/* ==========================================================================
   IIC Planet
   Design concept: the Mubadala-style prototype (IIC General Trading/
   Proposal - Mubadala Style/prototype): full-screen hero slider, light/bold
   condensed capitals, pill buttons, eyebrow lines, square imagery, light footer.
   Colours: portal.iicplanet.com/login, light only:
   cream #FAF7E9 · mint wash · green #2e765a → mint #67e698 · warm stone text.
   ========================================================================== */

:root {
  /* Brand */
  --cream: #faf7e9;
  --cream-2: #f3efdc;
  --green: #2e765a;
  --green-600: #256149;
  --green-800: #173f30;
  --mint: #67e698;
  --mint-50: #eefaf2;
  --mint-soft: rgba(103, 230, 152, .22);
  --grad: linear-gradient(104deg, #2e765a 0%, #67e698 100%);
  --grad-text: linear-gradient(100deg, #2e765a 0%, #379b6d 55%, #46b97c 100%);
  /* login-page background: mint wash fading into cream */
  --wash: linear-gradient(135deg, rgba(196, 240, 214, .75) 0%, #faf7e9 55%, #faf7e9 100%);

  /* Semantic */
  --bg: var(--cream);
  --surface: #fffdf6;
  --ink: #1c1917;
  --text: #44403c;
  --muted: #6b645d;          /* 5.3:1 on cream */
  --soft: #a8a29e;           /* decorative / large only */
  --line: #e6e0ca;
  --line-strong: #d6cfb6;
  --tint: #f1f6ec;           /* mint-tinted cream for alternate sections */

  /* Type */
  --display: "Barlow Condensed", "Inter Tight", sans-serif;
  --sans: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 250ms;
  --hdr: 88px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 500; line-height: 1.15; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--green); color: #fff; padding: 10px 16px; border-radius: 99px; font-weight: 600; transition: top var(--dur) var(--ease); }
.skip-link:focus { top: 16px; }

.wrap, .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 10vw, 140px) 0; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.rule { height: 1px; background: var(--line); }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 24px; height: 24px; }
.icon--xl { width: 28px; height: 28px; }

/* ---------- Type ---------- */
.eyebrow { display: inline-flex; align-items: center; font: 600 .75rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--grad); margin-right: 12px; flex: none; }
.h-display { font: 300 clamp(2.5rem, 5vw, 4.4rem)/.95 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.h-display b { font-weight: 600; display: block; }
.h-display b.inline { display: inline; }
.h-display .g, .g { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font: 300 clamp(1.25rem, 2.2vw, 1.75rem)/1.35 var(--sans); color: var(--ink); letter-spacing: -.015em; }
.lead strong { font-weight: 600; }
.lead .soft { color: var(--soft); }
.sub { color: var(--muted); max-width: 56ch; }
.tagline { font: 600 .75rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--green); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Pills & links ---------- */
.pill, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 24px; border: 1px solid currentColor; border-radius: 99px; background: transparent; color: var(--ink); font: 600 .75rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; transition: background var(--dur), color var(--dur), border-color var(--dur), box-shadow var(--dur), transform 120ms var(--ease); touch-action: manipulation; }
.pill:hover, .btn:hover { background: var(--green); border-color: var(--green); color: #fff; }
.pill:active, .btn:active { transform: scale(.97); }
.pill--solid, .btn--mint, .btn--green { background: var(--grad) border-box; border-color: transparent; color: #fff; text-shadow: 0 1px 2px rgba(23, 63, 48, .35); box-shadow: 0 10px 24px -14px rgba(46, 118, 90, .8); }
.pill--solid:hover, .btn--mint:hover, .btn--green:hover { background: var(--grad) border-box; color: #fff; border-color: transparent; box-shadow: 0 12px 30px -10px rgba(103, 230, 152, .9); }
/* Same green gradient as Register with Us */
.pill--green { background: var(--grad) border-box; border-color: transparent; color: #fff; text-shadow: 0 1px 2px rgba(23, 63, 48, .35); box-shadow: 0 10px 24px -14px rgba(46, 118, 90, .8); }
.pill--green:hover { background: var(--grad) border-box; border-color: transparent; color: #fff; box-shadow: 0 12px 30px -10px rgba(103, 230, 152, .9); }
.pill--sm { min-height: 40px; padding: 0 18px; font-size: .6875rem; }
.pill .icon { width: 15px; height: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-more { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font: 600 .75rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); padding: 8px 0; border-bottom: 2px solid var(--mint); transition: gap var(--dur) var(--ease), color var(--dur); }
.link-more:hover { gap: 16px; color: var(--green); }

/* ---------- Brand lockup ---------- */
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.brand__crest { height: 48px; width: auto; }
.brand__word { display: grid; line-height: 1; font-family: var(--display); text-transform: uppercase; color: var(--ink); }
.brand__name { font-weight: 600; font-size: 1.85rem; letter-spacing: .01em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr); display: flex; align-items: center; transition: background-color .3s, box-shadow .3s, height .3s; }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hdr__right { display: flex; align-items: center; gap: 10px; }
.hdr.is-solid { background: rgba(250, 247, 233, .95); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--line); height: 76px; }
.burger { width: 48px; height: 48px; border: 0; background: none; display: grid; place-content: center; gap: 7px; color: var(--ink); margin-right: -8px; }
.burger span { display: block; width: 30px; height: 1.5px; background: currentColor; }
@media (max-width: 760px) { .hdr__right .pill { display: none; } .brand__crest { height: 40px; } .brand__name { font-size: 1.4rem; } }

/* ---------- Full-screen menu (light) ---------- */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--wash), var(--cream); color: var(--ink); display: grid; grid-template-columns: 1.2fr 1fr; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; overflow-y: auto; }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s; }
.menu nav { padding: 120px var(--gutter) 60px; display: grid; align-content: center; gap: 4px; }
.menu nav a { font: 300 clamp(2.2rem, 4.6vw, 3.9rem)/1.08 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); transition: color var(--dur), padding var(--dur) var(--ease); justify-self: start; }
.menu nav a:hover { color: var(--green); padding-left: 10px; }
.menu nav a[aria-current="page"] { font-weight: 600; color: var(--green); }
.menu aside { background: rgba(255, 253, 246, .7); border-left: 1px solid var(--line); padding: 120px var(--gutter) 60px; display: grid; align-content: center; gap: 24px; font-size: .9375rem; color: var(--text); }
.menu aside b { display: block; font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.menu aside a:hover { color: var(--green); }
.menu__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.menu__top { position: absolute; top: 0; left: 0; right: 0; height: var(--hdr); }
.menu__top .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.menu__close { width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink); display: grid; place-items: center; transition: background var(--dur), color var(--dur); }
.menu__close:hover { background: var(--green); color: #fff; border-color: var(--green); }
@media (max-width: 960px) { .menu { grid-template-columns: 1fr; } .menu aside { border-left: 0; border-top: 1px solid var(--line); padding-top: 32px; } .menu nav { padding-bottom: 24px; } }

/* ---------- Hero slider ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; max-height: 1000px; overflow: hidden; background: var(--cream); color: var(--ink); }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 0s 1s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s var(--ease); }
.slide > img, .slide > video { width: 100%; height: 100%; object-fit: cover; }
/* Slow zoom on photos only: animating the scale of a playing video re-samples every frame and makes it shake */
.slide > img { transform: scale(1.04); transition: transform 8s linear; }
.slide.is-active > img { transform: scale(1); }
/* Light veil (login-page cream + mint) so text stays dark on bright photos */
.slide::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(250,247,233,.95) 0%, rgba(250,247,233,.84) 42%, rgba(250,247,233,.2) 74%, rgba(250,247,233,.3) 100%),
  linear-gradient(180deg, rgba(250,247,233,.75) 0%, rgba(250,247,233,0) 22%),
  linear-gradient(0deg, rgba(238,250,242,.9) 0%, rgba(238,250,242,0) 30%); }
.slide__text { position: absolute; z-index: 2; left: 0; right: 0; top: var(--hdr); bottom: 112px; display: flex; align-items: center; opacity: 0; transition: opacity .25s; }
.slide.is-active .slide__text { opacity: 1; transition: opacity .5s .45s; }
.slide__kicker { margin-bottom: 22px; }
.slide__title { font: 300 clamp(3rem, 5.9vw, 6.6rem)/.94 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.slide__title b { font-weight: 600; display: block; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.slide.is-active .slide__title { animation: rise 1s var(--ease) .45s both; }
.slide__text p.slide__lead { margin-top: 24px; max-width: 58ch; color: var(--text); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
.slide__text .btn-row { margin-top: 30px; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero__ui { position: absolute; z-index: 3; left: 0; right: 0; bottom: 36px; }
.hero__ui .wrap { display: flex; align-items: center; gap: 28px; }
.hero__count { font: 300 3rem/1 var(--display); min-width: 64px; color: var(--ink); }
.hero__dots { display: flex; gap: 6px; }
.hero__dots button { width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font: 600 .8125rem var(--sans); position: relative; }
.hero__dots button[aria-current="true"] { color: var(--ink); }
.hero__dots button[aria-current="true"]::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 3px; height: 2px; background: var(--grad); }
.hero__arrows { margin-left: auto; display: flex; gap: 10px; }
.round-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255,253,246,.7); color: var(--ink); display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background var(--dur), color var(--dur), border-color var(--dur); }
.round-btn:hover { background: var(--green); border-color: var(--green); color: #fff; }
.hero__vid { width: 52px; height: 52px; }
.hero__vid .vt-play, .hero__vid.is-paused .vt-pause { display: none; }
.hero__vid.is-paused .vt-play { display: block; }

@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(103,230,152,.8); } 70% { box-shadow: 0 0 0 12px rgba(103,230,152,0); } 100% { box-shadow: 0 0 0 0 rgba(103,230,152,0); } }
@media (min-width: 961px) { .slide__text .wrap { padding-right: calc(var(--gutter) + 8vw); } }
@media (max-width: 960px) {
  .hero { min-height: 720px; }
  .slide::after { background: linear-gradient(180deg, rgba(250,247,233,.9) 0%, rgba(250,247,233,.82) 55%, rgba(238,250,242,.95) 100%); }
  .slide__text { top: calc(var(--hdr) + 8px); bottom: 104px; align-items: flex-start; }
}

/* ---------- News strip ---------- */
.ticker { display: flex; align-items: stretch; height: 52px; background: var(--surface); color: var(--ink); overflow: hidden; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.ticker__label { flex: none; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 34px 0 max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); background: var(--grad); color: var(--green-800); font: 600 1.05rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); white-space: nowrap; }
.ticker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-800); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.ticker__viewport { flex: 1; min-width: 0; overflow: hidden; margin-left: -18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.ticker__track { display: flex; width: max-content; height: 100%; animation: roll var(--ticker-dur, 50s) linear infinite; }
.ticker.is-paused .ticker__track, .ticker__track:hover, .ticker__track:focus-within { animation-play-state: paused; }
@keyframes roll { to { transform: translateX(-50%); } }
.ticker__list { display: flex; align-items: center; height: 100%; padding-left: 40px; }
.ticker__item { display: flex; align-items: center; }
.ticker__item::after { content: ""; width: 6px; height: 6px; margin: 0 30px; background: var(--mint); transform: rotate(45deg); box-shadow: 0 0 0 1px var(--green); }
.ticker__item a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 400 .9375rem/1 var(--sans); white-space: nowrap; }
.ticker__item a:hover .ticker__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--green); }
.ticker__cat { font: 600 .68rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.ticker__date { font-size: .8125rem; color: var(--muted); }
.ticker__toggle { flex: none; width: 52px; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; }
.ticker__toggle:hover { background: var(--mint-50); }
.ticker__toggle .ticker__play, .ticker.is-paused .ticker__pause { display: none; }
.ticker.is-paused .ticker__play { display: block; }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } .ticker__viewport { overflow-x: auto; } .ticker__toggle, .ticker__track > .ticker__list[aria-hidden] { display: none; } }

/* ---------- Page hero (inner pages, light) ---------- */
.page-hero { background: var(--wash); padding: calc(var(--hdr) + clamp(48px, 7vw, 100px)) 0 0; }
.page-hero .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .8125rem; color: var(--muted); margin-bottom: 28px; }
.breadcrumb a:hover { color: var(--green); text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.page-hero__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: end; }
.page-hero h1 { font: 300 clamp(2.6rem, 5vw, 4.9rem)/.94 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); margin-top: 22px; }
.page-hero h1 b { font-weight: 600; display: block; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.page-hero__lead { color: var(--text); font-size: 1.0625rem; max-width: 52ch; }
.page-hero__aside { display: grid; gap: 24px; padding-bottom: 8px; }
.page-hero__media { position: relative; margin-top: clamp(40px, 6vw, 72px); aspect-ratio: 21 / 8; overflow: hidden; background: var(--cream-2); }
.page-hero__media img, .page-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250,247,233,.25), rgba(250,247,233,0) 30%); pointer-events: none; }
.page-hero--plain { padding-bottom: clamp(40px, 6vw, 80px); }
@media (max-width: 900px) { .page-hero__grid { grid-template-columns: 1fr; align-items: start; } .page-hero__media { aspect-ratio: 16 / 9; } }

/* ---------- About: video-filled figures ---------- */
.about__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; padding: 30px 0 clamp(50px, 6vw, 80px); }
.about__row--flip { grid-template-columns: minmax(0, 1fr) auto; padding-top: clamp(50px, 6vw, 80px); }
.about__cap { margin-top: 14px; font: 600 .8125rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.about__copy { display: grid; gap: 22px; justify-items: start; }
.about-big { margin: 0; font-family: var(--display); font-weight: 600; text-transform: uppercase; color: var(--green-800); line-height: .8; letter-spacing: -.005em; white-space: nowrap; }
.about-big--num { font-size: clamp(8.5rem, 22vw, 20rem); }
.about-big--word { font-size: clamp(6.5rem, 16vw, 15rem); }
.about-big--video { position: relative; display: inline-block; }
.about-big__video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.about-big__canvas { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); max-width: none; pointer-events: none; }
.about-big__mask { display: block; color: var(--green-800); }
.about-big--video.is-filled .about-big__mask { color: transparent; }
@media (max-width: 960px) { .about__row, .about__row--flip { grid-template-columns: 1fr; } .about__fig--right { order: -1; } }

/* ---------- Accordion with sticky visual (sectors on home) ---------- */
.svc { background: var(--tint); padding: clamp(80px, 9vw, 130px) 0; }
.svc .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.svc .h-display { margin: 18px 0 40px; }
.acc__item { border-top: 1px solid var(--line-strong); }
.acc__item:last-child { border-bottom: 1px solid var(--line-strong); }
.acc__btn { width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 0; background: none; border: 0; text-align: left; font: 400 clamp(1.3rem, 2vw, 1.7rem)/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); transition: color var(--dur); }
.acc__btn:hover { color: var(--ink); }
.acc__btn .ico { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--green); transition: background var(--dur), color var(--dur); }
.acc__btn .plus { margin-left: auto; font: 300 1.6rem/1 var(--sans); transition: transform .3s var(--ease); }
.acc__item.is-open .acc__btn { color: var(--ink); }
.acc__item.is-open .acc__btn .ico { background: var(--grad) border-box; color: var(--green-800); border-color: transparent; }
.acc__item.is-open .acc__btn .plus { transform: rotate(45deg); color: var(--green); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.acc__panel > div { overflow: hidden; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__body { padding: 0 0 22px 54px; display: grid; gap: 14px; justify-items: start; }
.acc__body p { color: var(--text); max-width: 52ch; }
.svc__visual { position: sticky; top: 120px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-2); }
.svc__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s, transform 1.2s var(--ease); }
.svc__visual img.is-active { opacity: 1; transform: none; }
.svc__caption { position: absolute; z-index: 1; left: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: rgba(250,247,233,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 1.1rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.svc__caption .ico { color: var(--green); display: grid; }
@media (max-width: 960px) { .svc .wrap { grid-template-columns: 1fr; } .svc__visual { display: none; } .acc__body { padding-left: 0; } }

/* ---------- Why: numbered columns ---------- */
.why { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 48px; }
.why__item { padding: 28px 22px 32px; border-left: 1px solid var(--line); display: grid; gap: 12px; align-content: start; transition: background var(--dur); }
.why__item:first-child { border-left: 0; padding-left: 0; }
.why__item:hover { background: linear-gradient(180deg, var(--mint-50), transparent); }
.why__n { font: 300 2.6rem/1 var(--display); color: var(--green); }
.why__item h3 { font: 600 1.3rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.why__item p { color: var(--muted); font-size: .9375rem; }
@media (max-width: 1100px) { .why { grid-template-columns: 1fr 1fr; } .why__item, .why__item:first-child { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--line); } .why__item:nth-child(2n) { padding-left: 22px; border-left: 1px solid var(--line); } }
@media (max-width: 560px) { .why { grid-template-columns: 1fr; } .why__item:nth-child(2n) { padding-left: 0; border-left: 0; } }

/* ---------- Media block (wide image with caption) ---------- */
.media { position: relative; }
.media__frame { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--cream-2); }
.media__frame img, .media__frame video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.media:hover .media__frame img { transform: scale(1.03); }
.media__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(250,247,233,.96) 0%, rgba(250,247,233,.86) 34%, rgba(250,247,233,.2) 62%, rgba(250,247,233,0) 80%); }
.media__cap { position: absolute; z-index: 2; left: clamp(28px, 5vw, 72px); top: 50%; transform: translateY(-50%); max-width: 560px; display: grid; gap: 18px; justify-items: start; }
@media (max-width: 760px) { .media__frame { aspect-ratio: 4 / 5; } .media__frame::after { background: linear-gradient(0deg, rgba(250,247,233,.97) 0%, rgba(250,247,233,.88) 62%, rgba(250,247,233,.35) 100%); } .media__cap { top: auto; bottom: 24px; transform: none; right: 24px; } }

/* ---------- Section heads ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 46px; }
.sec-head .h-display { margin-top: 18px; }
.split-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: end; margin-bottom: 46px; }
.split-head .h-display { margin-top: 18px; }
.split-head .sub { justify-self: end; }
@media (max-width: 900px) { .split-head { grid-template-columns: 1fr; } .split-head .sub { justify-self: start; } }

/* ---------- Projects ---------- */
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.project { position: relative; display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--line); padding-bottom: 24px; transition: border-color var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur); }
.project__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-2); }
.project__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.project__meta, .project h3, .project p, .project .link-more { margin: 0 22px; }
.project__meta { font: 600 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.project__meta b { padding: 5px 9px; background: var(--mint-soft); color: var(--green-800); letter-spacing: .12em; }
.project h3 { font: 600 1.7rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.project p { color: var(--muted); }
/* "View project" sits at the bottom right of every card, level across the row */
.project .link-more { align-self: flex-end; margin-top: auto; }
.project .link-more::after { content: ""; position: absolute; inset: 0; }
.project:hover { border-color: var(--green); transform: translateY(-4px); box-shadow: 0 24px 40px -30px rgba(46,118,90,.6); }
.project:hover .project__img img { transform: scale(1.05); }
@media (max-width: 960px) { .projects { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .projects { grid-template-columns: 1fr; } }

/* ---------- News ---------- */
.news-grid { --cols: 3; --gap: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.news-card { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); transition: border-color var(--dur), transform var(--dur) var(--ease); }
.news-card:hover { border-color: var(--green); transform: translateY(-3px); }
.news-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-2); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.news-card:hover .news-card__media img { transform: scale(1.05); }
.news-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.news-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font: 600 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.news-card__meta .chip { padding: 5px 9px; background: var(--mint-soft); color: var(--green-800); letter-spacing: .12em; }
.news-card h3 { font: 500 1.2rem/1.3 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.news-card h3 a::after { content: ""; position: absolute; inset: 0; }
.news-card:hover h3 { text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.news-card p { color: var(--muted); font-size: .9375rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 4px; font-size: .8125rem; color: var(--muted); }
.news-card__foot .go { font: 600 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); padding-bottom: 6px; border-bottom: 2px solid var(--mint); display: inline-flex; align-items: center; gap: 8px; }
.news-card--feature { flex-basis: 100%; flex-direction: row; margin-bottom: 0; }
.news-card--feature .news-card__media { flex: 1.25; aspect-ratio: auto; min-height: 420px; }
.news-card--feature .news-card__body { flex: 1; padding: clamp(28px, 4vw, 56px); justify-content: center; gap: 18px; }
.news-card--feature h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; letter-spacing: -.02em; }
.news-card--feature p { -webkit-line-clamp: 4; font-size: 1rem; }
.news-card--feature .news-card__foot { margin-top: 8px; }
@media (max-width: 1024px) { .news-grid { --cols: 2; } }
@media (max-width: 900px) { .news-card--feature { flex-direction: column; } .news-card--feature .news-card__media { min-height: 0; aspect-ratio: 16 / 9; flex: none; } }
@media (max-width: 640px) { .news-grid { --cols: 1; } }
.news-carousel { flex: 0 0 100%; min-width: 0; }
.news-carousel__track { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.news-card.is-entering { animation: nEnter .45s ease both; }
@keyframes nEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.news-carousel__dots { display: none; justify-content: center; gap: 4px; margin-top: 34px; }
.news-carousel.is-paginated .news-carousel__dots { display: flex; }
.news-carousel__dot { width: 32px; height: 32px; border: 0; background: none; display: grid; place-items: center; padding: 0; }
.news-carousel__dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); transition: background .3s, transform .3s; }
.news-carousel__dot.is-active::before { background: var(--green); transform: scale(1.3); box-shadow: 0 0 0 3px var(--mint-soft); }

.news-toolbar { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; position: sticky; top: 76px; z-index: 5; background: rgba(250,247,233,.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 14px 0; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { min-height: 42px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); font: 600 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); transition: all var(--dur); }
.filter:hover { border-color: var(--green); color: var(--green); }
.filter[aria-pressed="true"] { background: var(--grad) border-box; color: #fff; border-color: transparent; text-shadow: 0 1px 2px rgba(23, 63, 48, .35); }
.filter .count { margin-left: 6px; opacity: .7; }
.search { position: relative; min-width: min(320px, 100%); }
.search input { width: 100%; min-height: 44px; padding: 10px 16px 10px 42px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 1rem; }
.search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px var(--mint-soft); }
.search .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.news-empty { flex: 0 0 100%; text-align: center; padding: 80px 16px; border: 1px dashed var(--line-strong); color: var(--muted); }
.news-empty h3 { font-size: 1.25rem; margin-bottom: 8px; }
.news-empty button { margin-top: 16px; }
.news-more { display: flex; justify-content: center; margin-top: 40px; }
.results-note { font-size: .875rem; color: var(--muted); min-height: 1.5em; }

/* ---------- Feature block (cream / wash, annual-review pattern) ---------- */
.feat { background: var(--wash); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feat .wrap { display: grid; grid-template-columns: 1fr 1.1fr; padding: 0; max-width: var(--container); }
.feat__text { padding: clamp(48px, 7vw, 110px) var(--gutter); display: grid; align-content: center; gap: 22px; justify-items: start; }
.feat__text p { color: var(--text); max-width: 46ch; }
.feat__img { position: relative; min-height: 480px; overflow: hidden; }
.feat__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat__img--mock { display: grid; place-items: center; padding: 40px var(--gutter); }
@media (max-width: 960px) { .feat .wrap { grid-template-columns: 1fr; } .feat__img { min-height: 320px; } }

/* ---------- Contact band ---------- */
.cta { padding: clamp(90px, 11vw, 150px) 0; }
.cta { background: var(--wash); border-top: 1px solid var(--line); }
.cta .wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.cta h2 { margin-top: 18px; }
.cta h2 { font: 300 clamp(3rem, 6vw, 5.6rem)/.92 var(--display); text-transform: uppercase; color: var(--ink); }
.cta h2 b { font-weight: 600; display: block; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.cta__text { margin-top: 24px; color: var(--muted); max-width: 52ch; }
.cta dl { display: grid; gap: 18px; margin: 36px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.cta dt { font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.cta dd { margin: 6px 0 0; font: 400 1.0625rem/1.45 var(--sans); color: var(--ink); }
.cta dd a:hover { color: var(--green); }
@media (max-width: 900px) { .cta .wrap { grid-template-columns: 1fr; } }

/* ---------- Sector grid (What We Do: main attraction) ---------- */
.sector-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sector-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.sector-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--cream-2); }
.sector-card__img { position: absolute; inset: 0; overflow: hidden; }
.sector-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.sector-card__num { position: absolute; z-index: 1; left: 0; top: 0; padding: 10px 14px; background: rgba(250,247,233,.9); font: 600 1rem/1 var(--display); letter-spacing: .1em; color: var(--ink); }
.sector-card__ico { position: absolute; z-index: 1; right: 22px; bottom: -26px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--green); box-shadow: 0 10px 24px -14px rgba(46,118,90,.6); transition: background .35s, color .35s, transform .35s var(--ease); }
.sector-card__body { padding: 30px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sector-card h3 { font: 600 1.85rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.sector-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.sector-card p { color: var(--muted); font-size: .9375rem; }
.sector-card__more { margin-top: auto; padding-top: 10px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; font: 600 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); padding-bottom: 8px; border-bottom: 2px solid var(--mint); transition: gap var(--dur) var(--ease); }
.sector-card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(103,230,152,.18), transparent 45%); }
.sector-card:hover { transform: translateY(-6px); border-color: var(--green); box-shadow: 0 30px 50px -36px rgba(46,118,90,.75); }
.sector-card:hover::before { opacity: 1; }
.sector-card:hover .sector-card__media img { transform: scale(1.07); }
.sector-card:hover .sector-card__ico { background: var(--grad) border-box; color: var(--green-800); border-color: transparent; transform: translateY(-4px) rotate(-6deg); }
.sector-card:hover .sector-card__more { gap: 16px; }
@media (max-width: 1024px) { .sector-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .sector-grid { grid-template-columns: 1fr; } }

/* ---------- Tiles (values etc.) ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.tile { padding: 32px 28px 36px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); display: grid; gap: 12px; align-content: start; transition: background var(--dur); }
.tile:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.tile:hover { background: linear-gradient(180deg, var(--mint-50), transparent); }
.tile .ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-soft); color: var(--green); }
.tile h3 { font: 600 1.6rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.tile p { color: var(--muted); }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; } .tile, .tile:nth-child(3n+1) { border-left: 0; padding-left: 0; } .tile:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 24px; } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } .tile:nth-child(2n) { border-left: 0; padding-left: 0; } }

/* ---------- About page ---------- */
.chairman { display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.chairman__photo { position: sticky; top: 110px; aspect-ratio: 4 / 5; background: var(--wash); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.chairman__photo img.portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chairman__ph { display: grid; justify-items: center; gap: 12px; color: var(--muted); font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.chairman__ph img { width: 62%; height: auto; }
.chairman__sig { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px; background: rgba(250,247,233,.92); border-top: 1px solid var(--line); }
.chairman__sig strong { display: block; font: 600 1.4rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.chairman__sig span { font-size: .875rem; color: var(--green); }
.chairman__msg { display: grid; gap: 1.1em; font-size: 1.0625rem; line-height: 1.75; max-width: 64ch; margin-top: 24px; }
.chairman__msg blockquote { margin: .4em 0; padding: 24px 28px; border-left: 2px solid var(--green); background: var(--wash); font: 300 1.35rem/1.4 var(--sans); color: var(--ink); }
@media (max-width: 860px) { .chairman { grid-template-columns: 1fr; } .chairman__photo { position: relative; top: 0; max-width: 400px; } }
.vm { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vm__card { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 56px); display: grid; gap: 24px; align-content: start; min-height: 380px; }
.vm__card + .vm__card { border-left: 1px solid var(--line); background: var(--wash); }
.vm__big { position: absolute; right: -6px; bottom: -18px; font: 600 clamp(5rem, 11vw, 9rem)/.8 var(--display); text-transform: uppercase; color: var(--mint-soft); pointer-events: none; }
.vm__text { position: relative; font: 300 clamp(1.3rem, 2.1vw, 1.75rem)/1.35 var(--sans); color: var(--ink); letter-spacing: -.015em; }
@media (max-width: 860px) { .vm { grid-template-columns: 1fr; } .vm__card + .vm__card { border-left: 0; border-top: 1px solid var(--line); } }
.focus-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.focus-list a, .focus-list .soon { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); font: 600 1.05rem/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); transition: border-color var(--dur), background var(--dur); }
.focus-list a .icon { color: var(--green); }
.focus-list a:hover { border-color: var(--green); background: var(--mint-50); }
.focus-list .soon { border-style: dashed; color: var(--muted); background: transparent; }
@media (max-width: 1024px) { .focus-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .focus-list { grid-template-columns: 1fr 1fr; } }
.closing { text-align: center; display: grid; justify-items: center; gap: 24px; }
.closing .h-display { max-width: 18ch; }
.closing .sub { margin: 0 auto; }

/* ---------- Sector page ---------- */
.sector-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.sector-nav { position: sticky; top: 100px; display: grid; border-top: 1px solid var(--line); }
.sector-nav h2 { font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: 18px 0 10px; }
.sector-nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--line); font: 400 1.15rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); transition: color var(--dur), padding var(--dur) var(--ease); }
.sector-nav a .icon { color: var(--soft); }
.sector-nav a:hover { color: var(--ink); padding-left: 6px; }
.sector-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.sector-nav a[aria-current="page"] .icon { color: var(--green); }
.sector-select { display: none; }
.sector-intro { font: 300 clamp(1.3rem, 2.2vw, 1.75rem)/1.35 var(--sans); color: var(--ink); letter-spacing: -.015em; }
@media (max-width: 960px) {
  .sector-layout { grid-template-columns: 1fr; }
  .sector-nav { display: none; }
  .sector-select { display: grid; gap: 8px; margin-bottom: 32px; }
  .sector-select label { font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
  .sector-select select { min-height: 50px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface); padding: 0 18px; font-size: 1rem; }
}
.prose { font-size: 1.0625rem; line-height: 1.75; color: var(--text); max-width: 74ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: 300 clamp(1.9rem, 3.2vw, 2.7rem)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); margin-top: 1.8em; }
.prose h3 { font-size: 1.15rem; margin-top: 1.4em; }
.prose ul { padding: 0; }
.prose ul li { position: relative; padding-left: 1.6em; }
.prose ul li + li { margin-top: .45em; }
.prose ul li::before { content: ""; position: absolute; left: .15em; top: .66em; width: 7px; height: 7px; background: var(--mint); box-shadow: 0 0 0 1px var(--green); transform: rotate(45deg); }
.prose ol { padding-left: 1.3em; list-style: decimal; }
.prose ol li + li { margin-top: .45em; }
.prose strong { color: var(--ink); }
.prose a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--green); }
.prose blockquote { margin: 1.6em 0; padding: 24px 28px; border-left: 2px solid var(--green); background: var(--wash); font: 300 1.3rem/1.45 var(--sans); color: var(--ink); }
.prose .lede { font: 300 1.3rem/1.5 var(--sans); color: var(--ink); letter-spacing: -.01em; }
.prose .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; margin-top: 1.4em; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.prose .box { padding: 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); transition: background var(--dur); }
.prose .box:hover { background: var(--mint-50); }
.prose .box h3, .prose .box h4 { margin: 0; font: 600 1.25rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); display: flex; gap: 10px; align-items: baseline; }
.prose .box .n { color: var(--green); font-weight: 400; }
.prose .box ul { margin-top: .7em; font-size: .9375rem; }
.prose .box p { margin-top: .5em; font-size: .9375rem; color: var(--muted); }
.prose .callout { padding: 32px 36px; background: var(--wash); border: 1px solid var(--line); border-left: 2px solid var(--green); }
.prose .callout h3 { margin: 0 0 .5em; font: 600 1.6rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.prose .callout p { color: var(--text); }
.sector-pager { margin-top: 72px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sector-pager a { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; padding: 22px 0; transition: background var(--dur); }
.sector-pager a + a { border-left: 1px solid var(--line); padding-left: 24px; }
.sector-pager a img { width: 96px; height: 72px; object-fit: cover; }
.sector-pager small { display: block; font: 600 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.sector-pager strong { font: 600 1.5rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.sector-pager a:hover { background: linear-gradient(90deg, var(--mint-50), transparent); }
@media (max-width: 600px) { .sector-pager { grid-template-columns: 1fr; } .sector-pager a + a { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } }

/* ---------- Globe (light) ---------- */
.globe-panel { background: var(--wash); border: 1px solid var(--line); }
.globe-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(32px, 5vw, 72px); }
.globe-section__text { display: grid; gap: 22px; align-content: start; justify-items: start; }
.globe-wrap { position: relative; aspect-ratio: 1; width: 100%; max-width: 600px; justify-self: center; }
.globe-canvas { width: 100%; height: 100%; cursor: grab; touch-action: none; }
.globe-canvas:active { cursor: grabbing; }
.globe-tip { position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); padding: 8px 12px; background: var(--surface); border: 1px solid var(--line-strong); border-left: 2px solid var(--green); color: var(--ink); font: 600 1rem/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity 150ms; box-shadow: 0 10px 24px -14px rgba(28,25,23,.4); }
.globe-tip.is-on { opacity: 1; }
.globe-tip small { display: block; font: 600 .62rem/1.3 var(--sans); letter-spacing: .16em; color: var(--green); }
.globe-hint { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font: 600 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.globe-fallback { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: .875rem; }
.country-list { display: flex; flex-wrap: wrap; gap: 8px; }
.country { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 .875rem/1 var(--sans); transition: background var(--dur), border-color var(--dur); }
.country::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1px var(--green); }
.country--office::before { background: var(--green); box-shadow: 0 0 0 3px var(--mint-soft); }
.country:hover, .country[aria-pressed="true"] { background: var(--mint-50); border-color: var(--green); }
.globe-legend { display: flex; flex-wrap: wrap; gap: 18px; font: 600 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.globe-legend span { display: inline-flex; align-items: center; gap: 8px; }
.globe-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1px var(--green); }
.globe-legend i.o { background: var(--green); box-shadow: 0 0 0 3px var(--mint-soft); }
@media (max-width: 960px) { .globe-section { grid-template-columns: 1fr; } }

/* ---------- Offices ---------- */
.offices { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.office { background: var(--surface); border: 1px solid var(--line); }
.office__map { aspect-ratio: 16 / 9; background: var(--cream-2); }
.office__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.6) sepia(.08); }
.office__body { padding: 24px; display: grid; gap: 6px; }
.office__body h3 { font: 600 1.8rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin-top: 8px; }
.office__body p { color: var(--muted); }
@media (max-width: 860px) { .offices { grid-template-columns: 1fr; } }

/* ---------- Partnership ---------- */
.feature-rows { border-top: 1px solid var(--line-strong); }
.feature-row { display: grid; grid-template-columns: 72px 1fr 1.2fr; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line-strong); transition: background var(--dur); }
.feature-row:hover { background: linear-gradient(90deg, var(--mint-50), transparent 70%); }
.feature-row .ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-soft); color: var(--green); transition: background var(--dur), color var(--dur); }
.feature-row:hover .ico { background: var(--grad); color: var(--green-800); }
.feature-row h3 { font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.feature-row p { color: var(--muted); }
@media (max-width: 760px) { .feature-row { grid-template-columns: 56px 1fr; } .feature-row p { grid-column: 2; } }
.audience { display: flex; flex-wrap: wrap; gap: 8px; }
.audience li { padding: 9px 16px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line-strong); font: 600 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.portal-mock { position: relative; width: 100%; max-width: 420px; border-radius: 28px; background: rgba(255,253,246,.9); border: 1px solid var(--line); padding: 32px; box-shadow: 0 40px 80px -50px rgba(46,118,90,.6); }
.portal-mock__badge { display: inline-flex; align-items: center; gap: 10px; font: 700 .68rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.portal-mock__badge span { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--grad); color: #fff; }
.portal-mock h3 { margin-top: 18px; font: italic 800 2.4rem/1 var(--sans); letter-spacing: -.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .1em; }
.portal-mock p { font-size: .875rem; color: var(--muted); margin-top: 6px; }
.portal-mock .pill { width: 100%; margin-top: 20px; border-radius: 14px; justify-content: center; border: 0; cursor: pointer; }

/* ---------- Gallery ---------- */
.gallery { columns: 3 300px; column-gap: 20px; }
.gallery__item { break-inside: avoid; margin-bottom: 20px; position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; background: var(--cream-2); text-align: left; }
.gallery__item img { width: 100%; height: auto; transition: transform .9s var(--ease); }
.gallery__cap { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 14px 18px; background: rgba(250,247,233,.94); color: var(--ink); font: 600 1.15rem/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; transform: translateY(100%); transition: transform .35s var(--ease); }
.gallery__cap small { display: block; font: 600 .62rem/1.4 var(--sans); letter-spacing: .18em; color: var(--green); }
.gallery__zoom { position: absolute; z-index: 1; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--green-800); opacity: 0; transition: opacity .3s; }
.gallery__item:hover img, .gallery__item:focus-visible img { transform: scale(1.04); }
.gallery__item:hover .gallery__cap, .gallery__item:focus-visible .gallery__cap { transform: none; }
.gallery__item:hover .gallery__zoom, .gallery__item:focus-visible .gallery__zoom { opacity: 1; }
@media (hover: none) { .gallery__cap { transform: none; } }
.lightbox { width: min(1200px, 100vw); max-width: 100vw; max-height: 100dvh; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.lightbox::backdrop { background: rgba(250,247,233,.96); backdrop-filter: blur(6px); }
.lightbox[open] { animation: lbIn .26s var(--ease); }
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lightbox figure { margin: 0; display: grid; gap: 14px; padding: 64px 16px 16px; }
.lightbox img { width: 100%; max-height: calc(100dvh - 170px); object-fit: contain; }
.lightbox figcaption { display: flex; justify-content: space-between; gap: 16px; font: 600 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.lightbox figcaption span { color: var(--muted); font-variant-numeric: tabular-nums; }
.lightbox__btn { position: absolute; z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); display: grid; place-items: center; transition: background var(--dur), color var(--dur); }
.lightbox__btn:hover { background: var(--green); color: #fff; border-color: var(--green); }
.lightbox__close { top: 0; right: 16px; }
.lightbox__prev { left: 24px; top: 50%; }
.lightbox__next { right: 24px; top: 50%; }

/* ---------- Contact form ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__info { display: grid; margin: 32px 0 0; }
.info-row { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.info-row:first-child { border-top: 1px solid var(--line); }
.info-row .ico { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--mint-soft); display: grid; place-items: center; color: var(--green); }
.info-row dt { font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.info-row dd { margin: 6px 0 0; color: var(--ink); }
.info-row dd + dd { margin-top: 8px; }
.info-row a:hover { color: var(--green); text-decoration: underline; }
.form-card { background: var(--surface); border: 1px solid var(--line); padding: clamp(24px, 4vw, 48px); border-radius: 24px; box-shadow: 0 40px 80px -60px rgba(46,118,90,.6); }
.form-card h2 { font: 300 2.4rem/1 var(--display); text-transform: uppercase; }
.form-card h2 b { font-weight: 600; }
.form-card > p { color: var(--muted); margin-top: 10px; font-size: .9375rem; }
.form-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font: 700 .66rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.field label .req { color: #a3261b; margin-left: 2px; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: #f5f1e3; font-size: 1rem; color: var(--ink); transition: border-color var(--dur), box-shadow var(--dur), background var(--dur); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--green); box-shadow: 0 0 0 4px var(--mint-soft); }
.field .err { font-size: .8125rem; color: #a3261b; font-weight: 500; display: none; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #b42318; }
.field.is-invalid .err { display: block; }
.form-actions { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-actions .form-msg { flex: 1; min-width: 200px; }
.form-msg { font-size: .875rem; font-weight: 500; min-height: 1.4em; }
.form-msg.is-error { color: #a3261b; }
.form-msg.is-ok { color: var(--green-800); }
@media (max-width: 960px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Article ---------- */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.article__meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; color: var(--muted); font-size: .875rem; margin-top: 24px; }
.article__meta .chip { padding: 5px 10px; background: var(--mint-soft); color: var(--green-800); font: 600 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.article__hero { margin-top: clamp(32px, 5vw, 56px); aspect-ratio: 21 / 9; overflow: hidden; background: var(--cream-2); }
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article__side { position: sticky; top: 100px; display: grid; gap: 16px; }
.side-card { border-top: 1px solid var(--line); padding-top: 18px; }
.side-card h2 { font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.share { display: flex; gap: 8px; flex-wrap: wrap; }
.share a, .share button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); transition: all var(--dur); }
.share a:hover, .share button:hover { background: var(--grad) border-box; border-color: transparent; color: #fff; }
.toc a { display: block; padding: 7px 0 7px 14px; font-size: .9375rem; color: var(--muted); border-left: 2px solid var(--line); }
.toc a:hover, .toc a.is-active { color: var(--ink); border-color: var(--green); }
.article-nav { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.article-nav a { padding: 22px 0; display: grid; gap: 8px; }
.article-nav a + a, .article-nav span + a { border-left: 1px solid var(--line); padding-left: 24px; text-align: right; }
.article-nav small { font: 600 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--green); display: flex; gap: 6px; align-items: center; }
.article-nav a + a small, .article-nav span + a small { justify-content: flex-end; }
.article-nav strong { color: var(--ink); font-weight: 500; line-height: 1.3; }
.article-nav a:hover strong { text-decoration: underline; text-decoration-color: var(--mint); text-underline-offset: 4px; }
@media (max-width: 960px) { .article { grid-template-columns: 1fr; } .article__side { position: static; } .toc-card { display: none; } }
@media (max-width: 560px) { .article-nav { grid-template-columns: 1fr; } .article-nav a + a, .article-nav span + a { border-left: 0; padding-left: 0; text-align: left; border-top: 1px solid var(--line); } }

/* ---------- Footer (light) ---------- */
.ftr { background: var(--tint); border-top: 1px solid var(--line); padding: 72px 0 32px; }
.ftr__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; }
/* Footer logo in a white, soft-edged tile (same style as the IICB tile) */
.ftr__logo { display: grid; place-items: center; width: 204px; height: 136px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 30px -24px rgba(46,118,90,.45); transition: border-color var(--dur), box-shadow var(--dur); }
.ftr__logo:hover { border-color: var(--green); box-shadow: 0 18px 34px -22px rgba(46,118,90,.55); }
.ftr__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ftr__tagline { margin-top: 18px; color: var(--muted); font-size: .9375rem; max-width: 34ch; }
.ftr h2 { margin: 0 0 14px; font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.ftr li { margin: 7px 0; font-size: .9375rem; }
.ftr p { font-size: .9375rem; }
.ftr a:hover { color: var(--green); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ftr__ctas { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.ftr__bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; font-size: .8125rem; color: var(--muted); }
.ftr__logos { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
.ftr__logos > * { display: flex; align-items: center; gap: 12px; }
.ftr__logos img { height: 48px; width: auto; background: #fff; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); }
.ftr__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.social { display: flex; gap: 8px; }
.social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); transition: background var(--dur), color var(--dur), border-color var(--dur); }
.social a:hover { background: var(--grad) border-box; color: #fff; border-color: transparent; text-decoration: none; }
@media (max-width: 1100px) { .ftr__top { grid-template-columns: 1fr 1fr 1fr; } .ftr__top > :first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ftr__top { grid-template-columns: 1fr 1fr; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Two-column intro ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .hero__ui .wrap { gap: 10px; }
  .hero__count { font-size: 2.2rem; min-width: 40px; }
  .hero__dots button { width: 30px; }
  .hero__arrows { gap: 6px; }
  .round-btn { width: 44px; height: 44px; }
}
.focus-list li { min-width: 0; }
@media (max-width: 480px) { .focus-list { grid-template-columns: 1fr; } }

/* ---------- "15": sized by JS to the width of its caption ---------- */
.about__cap-text { display: inline-block; white-space: nowrap; }
.about-big--num[data-fit-caption] { display: block; width: max-content; }

/* ---------- Commitment: statement + focus-area carousel ---------- */
.commit { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; padding: clamp(56px, 7vw, 100px) 0 clamp(16px, 3vw, 40px); }
.commit__text { display: grid; gap: 28px; justify-items: start; }
.commit__text .lead strong { color: var(--green); }
@media (max-width: 960px) { .commit { grid-template-columns: 1fr; } }

/* ---------- Portal buttons: same size and width as a pair ---------- */
.ftr__ctas { display: grid; justify-items: stretch; width: 240px; gap: 10px; }
.ftr__ctas .pill, .menu__ctas .pill { width: 240px; min-height: 46px; padding: 0 18px; font-size: .72rem; justify-content: center; }
@media (max-width: 600px) { .about__cap-text { white-space: normal; max-width: 100%; } .about__cap { letter-spacing: .14em; } }
.about__row { overflow-x: clip; }

/* ---------- Focus-area carousel: big self-drawing icon in an orbiting ring ---------- */
.focus-orb { --orb: clamp(250px, 28vw, 360px); --focus-dur: 5s; display: grid; gap: 30px; justify-items: center; text-align: center; min-width: 0; }
.focus-orb__stage { position: relative; width: 100%; }
.focus-orb__stage::before { content: ""; position: absolute; top: calc(var(--orb) * .14); left: 50%; width: calc(var(--orb) * .72); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--mint-50) 55%, rgba(103,230,152,.18) 100%); box-shadow: 0 30px 60px -40px rgba(46,118,90,.6); }
.focus-orb__ring { position: absolute; top: 0; left: 50%; width: var(--orb); height: var(--orb); margin-left: calc(var(--orb) / -2); overflow: visible; pointer-events: none; animation: orbSpin 40s linear infinite; }
.focus-orb__ring circle { fill: none; stroke: var(--green); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 2 7; }
.focus-orb__ring .focus-orb__dot { fill: var(--mint); stroke: var(--green); stroke-opacity: 1; stroke-width: 1; stroke-dasharray: none; }
.focus-orb__ring--inner { animation-duration: 70s; animation-direction: reverse; }
.focus-orb__ring--inner circle { stroke-opacity: .22; stroke-dasharray: 1 4; }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.focus-orb__slides { display: grid; }
.focus-orb__slide { grid-area: 1 / 1; display: grid; justify-items: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
.focus-orb__slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s; }
.focus-orb__icon { position: relative; width: var(--orb); height: var(--orb); display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.focus-orb__icon::before { content: ""; position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--green); opacity: 0; transform: scale(.92); transition: opacity var(--dur), transform var(--dur) var(--ease); }
.focus-orb__icon:hover::before, .focus-orb__icon:focus-visible::before { opacity: .5; transform: scale(1); }
.focus-orb__icon:hover svg, .focus-orb__icon:focus-visible svg { stroke-width: 1.4; }
.focus-orb__icon:focus-visible { outline-offset: -12px; }
.focus-orb__icon svg { width: calc(var(--orb) * .34); height: auto; fill: none; stroke: var(--green); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 10px 16px rgba(46,118,90,.25)); }
.focus-orb__icon svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.focus-orb__slide.is-active .focus-orb__icon svg * { animation: orbDraw 1.6s var(--ease) .15s forwards; }
.focus-orb__slide.is-active .focus-orb__icon svg { animation: orbFloat 4s ease-in-out 1.7s infinite; }
@keyframes orbDraw { to { stroke-dashoffset: 0; } }
@keyframes orbFloat { 50% { transform: translateY(-8px); } }

.focus-orb__title { margin-top: 10px; font: 600 clamp(1.9rem, 3vw, 2.7rem)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.focus-orb__sector { margin-top: 8px; font: 600 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .focus-orb__ring, .focus-orb__slide.is-active .focus-orb__icon svg { animation: none; }
  .focus-orb__icon svg * { stroke-dashoffset: 0; }
  .focus-orb__slide.is-active .focus-orb__icon svg * { animation: none; }
}

/* ---------- Commitment v2: carousel as a big, faint backdrop behind the statement ---------- */
.commit { --orb-bg: clamp(440px, 46vw, 660px); position: relative; display: block; min-height: calc(var(--orb-bg) + 40px); padding: clamp(40px, 5vw, 72px) 0; isolation: isolate; }
.commit__text { position: relative; z-index: 2; display: grid; align-content: center; min-height: var(--orb-bg); max-width: min(640px, 58%); gap: 28px; }
.commit .focus-orb { --orb: var(--orb-bg); position: absolute; z-index: 1; right: -3%; top: 0; bottom: 0; margin: auto 0; height: max-content; width: var(--orb); opacity: .5; pointer-events: none; gap: 0; }
.commit .focus-orb__icon { pointer-events: auto; }
.commit .focus-orb__icon svg { stroke-width: .9; filter: none; }
.commit .focus-orb__stage::before { box-shadow: 0 40px 80px -50px rgba(46,118,90,.5); }
/* labels stay for screen readers only */
.commit .focus-orb__title, .commit .focus-orb__sector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (max-width: 960px) {
  .commit { --orb-bg: clamp(300px, 80vw, 440px); min-height: 0; }
  .commit__text { max-width: none; min-height: 0; }
  .commit .focus-orb { right: -22%; top: -30px; bottom: auto; margin: 0; opacity: .32; }
}
.commit .focus-orb.reveal { opacity: 0; }
.commit .focus-orb.reveal.is-in, .no-js .commit .focus-orb.reveal { opacity: .5; }
@media (max-width: 960px) { .commit .focus-orb.reveal.is-in, .no-js .commit .focus-orb.reveal { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .commit .focus-orb.reveal { opacity: .5; } }
#who-we-are { overflow-x: clip; }

/* Backdrop v3: rings and disc stay soft, the icon itself pops */
.commit .focus-orb.reveal.is-in, .no-js .commit .focus-orb.reveal { opacity: 1; }
.commit .focus-orb__ring { opacity: .55; }
.commit .focus-orb__stage::before { opacity: .75; }
.commit .focus-orb__icon svg { stroke: var(--green); stroke-width: 1.35; filter: drop-shadow(0 12px 22px rgba(46,118,90,.35)); }
.commit .focus-orb__icon:hover svg, .commit .focus-orb__icon:focus-visible svg { stroke-width: 1.6; }
.commit .focus-orb__icon::after { content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(103,230,152,.35) 0%, rgba(103,230,152,0) 70%); z-index: -1; animation: orbGlow 3.2s ease-in-out infinite; }
@keyframes orbGlow { 50% { transform: scale(1.18); opacity: .6; } }
@media (max-width: 960px) { .commit .focus-orb.reveal.is-in, .no-js .commit .focus-orb.reveal { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .commit .focus-orb__icon::after { animation: none; } .commit .focus-orb.reveal { opacity: 1; } }
/* Backdrop v4: halfway between the faint and the bold version */
.commit .focus-orb.reveal.is-in, .no-js .commit .focus-orb.reveal { opacity: .72; }
.commit .focus-orb__icon svg { stroke-width: 1.15; filter: drop-shadow(0 10px 18px rgba(46,118,90,.2)); }
@media (max-width: 960px) { .commit .focus-orb.reveal.is-in, .no-js .commit .focus-orb.reveal { opacity: .28; } }
@media (prefers-reduced-motion: reduce) { .commit .focus-orb.reveal { opacity: .72; } }

/* Footer first column: logo tile, tagline and buttons share one width at every screen size */
.ftr__top > :first-child { display: grid; align-content: start; width: 100%; max-width: 260px; }
.ftr .ftr__logo { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.ftr__tagline { max-width: none; }
.ftr__ctas { width: 100%; }
.ftr__ctas .pill { width: 100%; }

/* Footer bottom row: bank tile left, copyright centred, legal links right */
.ftr__bottom--row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px 32px; margin-top: 48px; }
.ftr__bank { display: flex; align-items: center; gap: 12px; justify-self: start; max-width: 380px; font-size: .8125rem; color: var(--muted); }
.ftr__bank img { flex: none; height: 48px; width: auto; background: #fff; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); }
.ftr .ftr__copy { margin: 0; text-align: center; font-size: .8125rem; color: var(--muted); }
.ftr__bottom--row .ftr__links { justify-self: end; }
@media (max-width: 900px) {
  .ftr__bottom--row { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ftr__bank, .ftr__bottom--row .ftr__links { justify-self: center; }
  .ftr__bottom--row .ftr__links { justify-content: center; }
}
.ftr .ftr__tagline { text-align: center; }


/* ==========================================================================
   Scroll motion: home, What We Do → News (sections marked .motion)
   Headings are only masked inside an observed .reveal wrapper, never on the
   observed element itself, so the observer always sees them.
   ========================================================================== */
.motion .reveal .h-display { clip-path: inset(0 0 100% 0); transform: translateY(42px); transition: clip-path 1s var(--ease) .12s, transform 1s var(--ease) .12s; }
.motion .reveal.is-in .h-display { clip-path: inset(-10% -5% -15% -5%); transform: none; }
/* Slide in from the left */
.reveal--left { transform: translateX(-36px); }
.reveal--left.is-in { transform: none; }
.media__cap.reveal--left { transform: translate(-36px, -50%); }
.media__cap.reveal--left.is-in { transform: translate(0, -50%); }
@media (max-width: 760px) { .media__cap.reveal--left { transform: translateX(-36px); } .media__cap.reveal--left.is-in { transform: none; } }
/* Accordion rows slide in one after another */
.motion .acc__item.reveal { transform: translateX(-28px); }
.motion .acc__item.reveal.is-in { transform: none; }
/* Why: a gradient line draws across the top of each column */
.motion .why__item { position: relative; }
.motion .why__item::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--grad); transition: width 1s var(--ease) .35s; }
.motion .why__item.is-in::before { width: 100%; }
/* Parallax: JS sets `translate`; a small base scale keeps the edges covered */
[data-parallax] { scale: 1.16; will-change: translate; }
@media (prefers-reduced-motion: reduce) {
  .motion .reveal .h-display { clip-path: none; transform: none; }
  .reveal--left, .motion .acc__item.reveal { transform: none; }
  .media__cap.reveal--left { transform: translateY(-50%); }
  [data-parallax] { scale: 1; translate: none !important; }
  .motion .why__item::before { width: 100%; transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) { .media__cap.reveal--left { transform: none; } }

/* News photos: frame closer to the photos' own shape (3:2 / 4:3) and focus on
   the upper middle, where faces usually are, so less of each photo is cropped */
.news-card__media { aspect-ratio: 4 / 3; }
.news-card__media img { object-position: 50% 30%; }
.news-card--feature .news-card__media { aspect-ratio: auto; }
.news-card--feature .news-card__media img { object-position: 50% 35%; }
@media (max-width: 900px) { .news-card--feature .news-card__media { aspect-ratio: 4 / 3; } }
.article__hero img { object-position: 50% 35%; }
/* Article header photo: 3:2 like most news photos (was 21:9, which cut off heads and feet) */
.article__hero { aspect-ratio: 3 / 2; max-width: 980px; margin-left: auto; margin-right: auto; }
@media (max-width: 560px) { .article__hero { aspect-ratio: 4 / 3; } }
/* Backdrop orb nudged further right (section clips anything past the page edge) */
@media (min-width: 961px) {
  /* Sit further right, but never past the screen edge: overhang is capped at the side margin minus 24px */
  .commit .focus-orb { right: max(-15%, calc((100% - 100vw) / 2 + 24px)); }
}

/* ---------- Why cards: hover = lift, grow, green fill, white text ---------- */
.why__item { position: relative; isolation: isolate; }
.why__item::after { content: ""; position: absolute; z-index: -1; inset: -2px -10px; border-radius: 16px; background: var(--grad) border-box; opacity: 0; box-shadow: 0 26px 46px -24px rgba(46,118,90,.75); transition: opacity .3s var(--ease); }
.why__item:first-child::after { left: -18px; }
.why .why__item, .why .why__item.is-in { transition: transform .35s var(--ease), opacity .9s var(--ease); }
.why .why__item h3, .why .why__item p, .why .why__item .why__n { transition: color .3s var(--ease); }
.why > .why__item:hover { z-index: 2; transform: translateY(-6px) scale(1.05); background: none; }
.why > .why__item:hover::after { opacity: 1; }
.why > .why__item:hover h3, .why > .why__item:hover p, .why > .why__item:hover .why__n { color: #fff; }
@media (max-width: 1100px) { .why__item:nth-child(odd)::after { left: -18px; } }
@media (max-width: 560px) { .why__item::after { left: -18px; right: -18px; } }
@media (prefers-reduced-motion: reduce) { .why > .why__item:hover { transform: none; } }
/* Why card hover: same gradient as the buttons; soft shadow keeps white text readable on the mint end;
   the green line along the top is hidden while the card is lifted */
.why > .why__item:hover h3, .why > .why__item:hover p, .why > .why__item:hover .why__n { text-shadow: 0 1px 3px rgba(23, 63, 48, .45); }
.why > .why__item:hover::before { opacity: 0; }
.motion .why__item::before { transition: width 1s var(--ease) .35s, opacity .2s var(--ease); }

/* ---------- Two offices shown as separate addresses ---------- */
dd.addr { display: block; padding: 10px 0 10px 14px; border-left: 2px solid var(--mint); }
dd.addr + dd.addr { margin-top: 10px; }
.addr__city { display: block; margin-bottom: 3px; font: 600 .78rem/1.2 var(--sans); letter-spacing: .06em; color: var(--green); }

/* ---------- Select arrows inset from the edge ---------- */
.field select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%232e765a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 22px center; background-size: 12px 8px;
}
.field select::-ms-expand { display: none; }
.field select:focus, .field.is-invalid select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%232e765a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 22px center; background-size: 12px 8px;
}

/* ---------- Why cards: smooth hover in/out ----------
   The card stays above its neighbours until it has fully faded out, so their divider lines
   never slice across the fading green card; colour, shadow and scale share one timing. */
.why > .why__item, .why > .why__item.is-in {
  --why-t: .45s;
  transition: transform var(--why-t) var(--ease), opacity .9s var(--ease), z-index 0s linear var(--why-t);
  backface-visibility: hidden;
}
.why > .why__item:hover { transition: transform var(--why-t) var(--ease), opacity .9s var(--ease), z-index 0s; }
.why > .why__item::after { transition: opacity var(--why-t) var(--ease); }
.why > .why__item h3, .why > .why__item p, .why > .why__item .why__n { transition: color var(--why-t) var(--ease), text-shadow var(--why-t) var(--ease); text-shadow: 0 1px 3px rgba(23, 63, 48, 0); }
.motion .why > .why__item::before { transition: width 1s var(--ease) .35s, opacity var(--why-t) var(--ease); }

/* ---------- Why cards: opaque hover layer ----------
   Fading the layer's opacity let the divider lines underneath show through it as a light line.
   Instead the layer stays fully opaque and its colour blends cream -> gradient (--why-a 0 -> 1),
   so nothing beneath is ever visible; it is only hidden once it is back to plain cream. */
@property --why-a { syntax: "<number>"; inherits: false; initial-value: 0; }
.why > .why__item::after {
  --why-a: 0;
  opacity: 1; visibility: hidden;
  background: linear-gradient(104deg,
    color-mix(in srgb, #2e765a calc(var(--why-a) * 100%), var(--cream)) 0%,
    color-mix(in srgb, #67e698 calc(var(--why-a) * 100%), var(--cream)) 100%) border-box;
  box-shadow: 0 26px 46px -24px rgba(46, 118, 90, calc(.75 * var(--why-a)));
  transition: --why-a var(--why-t) var(--ease), visibility 0s linear var(--why-t);
}
.why > .why__item:hover::after { --why-a: 1; visibility: visible; transition: --why-a var(--why-t) var(--ease), visibility 0s; }
/* top accent line: hide straight away, come back only after the card has settled */
.motion .why > .why__item::before { transition: width 1s var(--ease) .35s, opacity .2s var(--ease) var(--why-t); }
.motion .why > .why__item:hover::before { transition: width 1s var(--ease) .35s, opacity .15s var(--ease); }

/* ---------- Responsive audit fixes ---------- */
/* Short phones (iPhone SE and similar): tighten the hero so the slide controls stay on screen */
@media (max-width: 960px) and (max-height: 760px) {
  .hero { min-height: 600px; }
  .slide__text { bottom: 92px; }
  .slide__kicker { margin-bottom: 14px; }
  .slide__title { font-size: clamp(2.3rem, 10.5vw, 2.7rem); }
  .slide__text p.slide__lead { margin-top: 14px; font-size: 1rem; }
  .slide__text .btn-row { margin-top: 18px; }
  .hero__ui { bottom: 24px; }
}
/* Footer bank tile: stack logo over its caption once the bottom row is centred */
@media (max-width: 900px) { .ftr__bank { flex-direction: column; gap: 10px; text-align: center; } }
/* Stacked menu (phones/tablets) scrolls: keep its logo + close bar pinned so it never scrolls away */
@media (max-width: 960px) {
  .menu__top { position: fixed; z-index: 2; background: rgba(250, 247, 233, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
/* Why cards in two columns (tablets): the odd fifth card spans the row instead of leaving an empty cell */
@media (min-width: 561px) and (max-width: 1100px) {
  .why > .why__item:last-child:nth-child(odd) { grid-column: 1 / -1; border-bottom: 0; }
  .why > .why__item:last-child:nth-child(odd) p { max-width: 46ch; }
}
/* Touch screens: taller tap areas for the slide numbers and news dots (visuals unchanged) */
@media (max-width: 767px), (pointer: coarse) {
  .hero__dots button { height: 44px; }
  .news-carousel__dot { height: 44px; }
  .news-carousel__dots { margin-top: 28px; }
}
/* IIC Portal button: the globe reads a little larger than the other pill icons */
.pill .icon--globe { width: 19px; height: 19px; stroke-width: 1.6; }
/* Commit section: make the orbiting dotted rings read more clearly (was ~10% effective opacity) */
.commit .focus-orb__ring { opacity: 1; }
.commit .focus-orb__ring circle { stroke-opacity: .6; stroke-width: 1.3; }
.commit .focus-orb__ring--inner circle { stroke-opacity: .45; }
.commit .focus-orb__ring .focus-orb__dot { stroke-opacity: 1; }

/* =====================================================================
   About page motion
   ===================================================================== */
/* Hero entrance on load: text rises in sequence, then the photo wipes up and settles */
@keyframes introRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes introWipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes introZoom { from { transform: scale(1.14); } to { transform: scale(1); } }
.page-hero--intro .breadcrumb { animation: introRise .8s var(--ease) .05s both; }
.page-hero--intro .eyebrow { animation: introRise .8s var(--ease) .15s both; }
.page-hero--intro h1 b { animation: introRise .9s var(--ease) .25s both; }
.page-hero--intro h1 { animation: introRise .9s var(--ease) .38s both; }
.page-hero--intro .page-hero__lead { animation: introRise .9s var(--ease) .55s both; }
.page-hero--intro .page-hero__media.reveal { opacity: 1; transform: none; animation: introWipe 1.3s var(--ease) .6s both; }
.page-hero--intro .page-hero__media img { animation: introZoom 2.2s var(--ease) .6s both; }

/* Chairman portrait: a quick fade-in with a gentle settle. (A slow bottom-up wipe hid the face
   until the very end, so the portrait looked like it hadn't loaded when scrolling past.) */
.motion .chairman__photo.reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.motion .chairman__photo img.portrait { transform: scale(1.05); transition: transform 1s var(--ease); }
.motion .chairman__photo.is-in img.portrait { transform: scale(1); }
.motion .chairman__msg blockquote { border-left-color: transparent; transition: border-color .6s var(--ease) .6s; }
.motion .reveal.is-in .chairman__msg blockquote { border-left-color: var(--green); }

/* Vision slides in from the left, Mission from the right */
.motion .vm__card.reveal:first-child { transform: translateX(-40px); }
.motion .vm__card.reveal:last-child { transform: translateX(40px); transition-delay: .15s; }
.motion .vm__card.reveal.is-in { transform: none; }
.motion .vm__big { transform: translateY(30%); opacity: 0; transition: transform 1.2s var(--ease) .3s, opacity 1.2s var(--ease) .3s; }
.motion .vm__card.is-in .vm__big { transform: none; opacity: 1; }

/* Sector list cascades in item by item */
.motion .focus-list li { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.motion .focus-list.is-in li { opacity: 1; transform: none; }
.motion .focus-list.is-in li:nth-child(1) { transition-delay: .05s; } .motion .focus-list.is-in li:nth-child(2) { transition-delay: .1s; }
.motion .focus-list.is-in li:nth-child(3) { transition-delay: .15s; } .motion .focus-list.is-in li:nth-child(4) { transition-delay: .2s; }
.motion .focus-list.is-in li:nth-child(5) { transition-delay: .25s; } .motion .focus-list.is-in li:nth-child(6) { transition-delay: .3s; }
.motion .focus-list.is-in li:nth-child(7) { transition-delay: .35s; } .motion .focus-list.is-in li:nth-child(8) { transition-delay: .4s; }
.motion .focus-list.is-in li:nth-child(9) { transition-delay: .45s; } .motion .focus-list.is-in li:nth-child(10) { transition-delay: .5s; }

/* Vision / Mission: the hovered card widens, the other gives way; both return on leave */
@media (min-width: 861px) and (hover: hover) {
  .vm { transition: grid-template-columns .65s var(--ease); }
  .vm.is-expand-1 { grid-template-columns: 1.6fr 1fr; }
  .vm.is-expand-2 { grid-template-columns: 1fr 1.6fr; }
  .vm__card { min-width: 0; transition: background-color .5s var(--ease); }
  .vm__big { transition: transform .65s var(--ease), color .5s var(--ease); }
  /* The hovered card's big word grows into the freed space (sized to stay inside the card, below the text) */
  .vm__big { transform-origin: right bottom; }
  .vm.is-expand-1 .vm__card:first-child .vm__big { transform: scale(1.75); color: #d5f5e1; }
  .vm.is-expand-2 .vm__card:last-child .vm__big { transform: scale(1.55); color: #d5f5e1; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero--intro .breadcrumb, .page-hero--intro .eyebrow, .page-hero--intro h1, .page-hero--intro h1 b,
  .page-hero--intro .page-hero__lead, .page-hero--intro .page-hero__media.reveal, .page-hero--intro .page-hero__media img { animation: none; }
  .motion .chairman__photo img.portrait, .motion .vm__card.reveal, .motion .vm__big, .motion .focus-list li { transform: none; opacity: 1; }
  .vm { transition: none; }
}
/* Single-line display heading: the bold part sits inline instead of on its own line */
.h-display--one b { display: inline; }
/* Page-hero buttons stack in one column sized to the widest, so stacked buttons share one width */
.page-hero__aside .btn-row { display: grid; grid-template-columns: max-content; }
.page-hero__aside .btn-row .pill { justify-content: center; }
/* Globe hint sits a little below the globe instead of against its edge */
.globe-hint { bottom: -40px; }
/* Stacked layout: the globe is last in the panel, so leave room for the lowered hint inside it */
@media (max-width: 960px) { .globe-section .globe-wrap { margin-bottom: 40px; } }
/* The Mission card starts 40px to the right before sliding in: clip it so the page never scrolls sideways */
.vm { overflow: clip; }

/* =====================================================================
   Partnership: "Five ways to take part" step cards
   Phones / reduced motion: a stacked list. Desktop (JS adds .is-pinned): the section pins while
   scrolling and a horizontal track of cards slides past, current card in front, neighbours peeking.
   ===================================================================== */
.ways { position: relative; padding: clamp(40px, 6vw, 90px) 0 clamp(60px, 8vw, 110px); }
.ways__head { text-align: center; display: grid; justify-items: center; gap: 18px; margin-bottom: 36px; }
.ways__steps { display: none; }
.ways__track { display: grid; gap: 22px; }
.ways__card { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(46,118,90,.45); }
.ways__body { display: grid; align-content: center; gap: 16px; padding: clamp(28px, 4vw, 56px); }
.ways__card h3 { font: 600 clamp(1.7rem, 2.8vw, 2.6rem)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.ways__text { color: var(--muted); font-size: 1.0625rem; max-width: 44ch; }
.ways__body .pill { justify-self: start; margin-top: 8px; }
.ways__media { position: relative; min-height: 300px; background: var(--wash); }
.ways__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ways__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(46,118,90,0) 40%, rgba(23,63,48,.45)); }
.ways__ico { position: absolute; z-index: 1; left: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,253,246,.92); color: var(--green); box-shadow: 0 10px 24px -12px rgba(23,63,48,.6); }
.ways__ico .icon { width: 26px; height: 26px; }
@media (max-width: 760px) {
  .ways__card { grid-template-columns: 1fr; }
  .ways__media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
}

/* Pinned desktop version */
.ways.is-pinned { padding: 0; }
.ways.is-pinned .ways__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: var(--hdr); overflow: hidden; }
.ways.is-pinned .ways__pin > .wrap { width: 100%; }
.ways.is-pinned .ways__head { margin-bottom: clamp(18px, 2.4vh, 28px); }
.ways.is-pinned .ways__steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 520px; margin: 0 auto clamp(22px, 3.4vh, 40px); }
.ways__seg { border: 0; background: none; padding: 6px 0; cursor: pointer; display: grid; gap: 10px; text-align: left; color: var(--muted); }
.ways__bar { display: block; height: 2px; background: var(--line-strong); border-radius: 2px; overflow: hidden; }
.ways__bar i { display: block; height: 100%; width: 0; background: var(--grad); }
.ways__lbl { font: 500 .78rem/1.3 var(--sans); transition: color .3s; }
.ways__seg.is-active .ways__lbl { color: var(--ink); font-weight: 600; }
.ways__seg:hover .ways__lbl, .ways__seg:focus-visible .ways__lbl { color: var(--ink); }
.ways.is-pinned .ways__track { position: relative; display: block; height: var(--ways-h, 420px); }
.ways.is-pinned .ways__card { position: absolute; left: 50%; top: 0; width: min(980px, 82vw); height: 100%; margin-left: calc(min(980px, 82vw) / -2); will-change: transform, opacity; }
.ways.is-pinned .ways__card:not(.is-current) { pointer-events: none; }
/* Side cards stay solid (no see-through overlap) and are dimmed with a cream veil instead */
.ways.is-pinned .ways__card::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--bg); opacity: var(--ways-dim, 0); pointer-events: none; border-radius: inherit; }
/* "Register": italic gradient text leans past its box; pad the painted area so no letter edge is cut, margins keep its position */
.portal-mock h3 { display: block; width: fit-content; padding: .08em .2em .12em .08em; margin: calc(18px - .08em) 0 -.12em -.08em; }
/* One office (Dubai): a single wide card, map beside the address; stacks on small screens */
.offices--single { grid-template-columns: 1fr; }
.offices--single .office { display: grid; grid-template-columns: 1.6fr 1fr; }
.offices--single .office__map { aspect-ratio: auto; min-height: 340px; }
.offices--single .office__body { align-content: center; padding: clamp(24px, 4vw, 48px); }
@media (max-width: 760px) {
  .offices--single .office { grid-template-columns: 1fr; }
  .offices--single .office__map { min-height: 0; aspect-ratio: 16 / 9; }
}

/* =====================================================================
   Sector page redesign: card sidebar with "On this page", tile bullets, lifted cards
   (scoped to the sector page layout so other prose pages are unchanged)
   ===================================================================== */
/* Sidebar: one rounded card; current sector in the brand gradient with its sections below */
.sector-layout .sector-nav { top: 104px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); padding: 10px; gap: 2px; box-shadow: 0 30px 60px -44px rgba(46,118,90,.55); }
.sector-layout .sector-nav h2 { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 10px; }
.sector-layout .sector-nav h2 span { font-weight: 600; color: var(--green); letter-spacing: .1em; }
.sector-layout .sector-nav a { min-height: 50px; padding: 6px 12px 6px 8px; border: 0; border-radius: 14px; font-size: 1.08rem; color: var(--text); transition: background var(--dur), color var(--dur); }
.sector-layout .sector-nav a .icon { width: 34px; height: 34px; padding: 8px; flex: none; border-radius: 50%; background: var(--mint-soft); color: var(--green); transition: background var(--dur), color var(--dur); }
.sector-layout .sector-nav a:hover { padding-left: 8px; background: var(--mint-50); color: var(--ink); }
.sector-layout .sector-nav a[aria-current="page"] { background: var(--grad); color: #fff; font-weight: 600; box-shadow: 0 14px 28px -16px rgba(46,118,90,.8); }
.sector-layout .sector-nav a[aria-current="page"] .icon { background: rgba(255,255,255,.22); color: #fff; }
.sector-toc { display: grid; gap: 2px; margin: 6px 0 8px 26px; padding-left: 16px; border-left: 2px solid var(--mint-soft); }
.sector-layout .sector-toc a { min-height: 34px; padding: 4px 10px; border-radius: 10px; font: 500 .82rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.sector-layout .sector-toc a:hover { background: var(--mint-50); color: var(--ink); }
.sector-layout .sector-toc a.is-active { color: var(--green); font-weight: 600; background: var(--mint-50); }

/* Bullets: a grid of soft tiles with a round arrow marker instead of diamonds */
.sector-layout .prose > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 1.3em; }
.sector-layout .prose > ul li { margin: 0; padding: 16px 18px 16px 58px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; font-size: .97rem; line-height: 1.55; color: var(--text); transition: border-color var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur); }
.sector-layout .prose > ul li + li { margin-top: 0; }
.sector-layout .prose > ul li::before { left: 16px; top: 15px; width: 28px; height: 28px; border-radius: 50%; box-shadow: none; transform: none;
  background: var(--mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e765a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat; }
.sector-layout .prose > ul li:hover { border-color: var(--mint); transform: translateY(-2px); box-shadow: 0 16px 30px -24px rgba(46,118,90,.6); }
@media (max-width: 700px) { .sector-layout .prose > ul { grid-template-columns: 1fr; } }

/* Cards (e.g. Prevention first): separate rounded cards, faint big number, gradient bar, lift on hover */
.sector-layout .prose .cols { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; border: 0; }
.sector-layout .prose .box { position: relative; overflow: hidden; display: grid; align-content: end; min-height: 150px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.sector-layout .prose .box::before { content: ""; position: absolute; left: 22px; top: 22px; width: 34px; height: 3px; border-radius: 3px; background: var(--grad); transition: width .45s var(--ease); }
.sector-layout .prose .box:hover { background: var(--surface); transform: translateY(-4px); border-color: var(--mint); box-shadow: 0 26px 44px -30px rgba(46,118,90,.65); }
.sector-layout .prose .box:hover::before { width: calc(100% - 44px); }
.sector-layout .prose .box h3, .sector-layout .prose .box h4 { display: block; font-size: 1.3rem; line-height: 1.08; }
.sector-layout .prose .box .n { position: absolute; right: 16px; top: 6px; font: 600 3.6rem/1 var(--display); color: var(--mint-soft); pointer-events: none; }

/* Quote: rounded mint panel with a large quotation mark */
.sector-layout .prose blockquote { position: relative; padding: 30px 32px 30px 84px; border: 1px solid var(--line); border-left: 0; border-radius: 22px; background: linear-gradient(135deg, var(--mint-50), var(--surface)); }
.sector-layout .prose blockquote::before { content: "\201C"; position: absolute; left: 26px; top: 14px; font: 600 5rem/1 var(--display); color: var(--mint); }

/* Closing callout: soft gradient card */
.sector-layout .prose .callout { padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-left: 0; border-radius: 24px; background: radial-gradient(120% 140% at 100% 0%, rgba(103,230,152,.22), transparent 55%), var(--surface); box-shadow: 0 34px 60px -48px rgba(46,118,90,.6); }
.sector-layout .prose .callout h3 { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; }

/* Previous / next sector: photo cards */
.sector-layout .sector-pager { gap: 14px; border: 0; }
.sector-layout .sector-pager a { padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); grid-template-columns: 120px 1fr; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.sector-layout .sector-pager a + a { border-left: 1px solid var(--line); padding-left: 12px; }
.sector-layout .sector-pager a img { width: 120px; height: 88px; border-radius: 14px; }
.sector-layout .sector-pager a:hover { background: var(--surface); transform: translateY(-3px); border-color: var(--mint); box-shadow: 0 22px 40px -30px rgba(46,118,90,.6); }
@media (max-width: 600px) { .sector-layout .sector-pager a + a { border-top: 1px solid var(--line); } }
.sector-layout .prose > ul li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 700px) { .sector-layout .prose > ul li:last-child:nth-child(odd) { grid-column: auto; } }
/* Cards: 2 or 4 items sit in tidy pairs (no lone card on its own row); stack on phones */
.sector-layout .prose .cols:has(> :nth-child(2):last-child), .sector-layout .prose .cols:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .sector-layout .prose .cols, .sector-layout .prose .cols:has(> :nth-child(2):last-child), .sector-layout .prose .cols:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; } }
/* Bullets inside cards: a small round mint dot to match the new tile markers (replaces the diamond) */
.sector-layout .prose .box ul li::before { left: .1em; top: .62em; width: 8px; height: 8px; border-radius: 50%; transform: none; background: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); }
/* Room above the card title for the accent bar, so tall cards never overlap it */
.sector-layout .prose .box { padding-top: 46px; }
/* Cards in rows of three on a 6-part grid; a leftover last row stretches so no card sits alone:
   1 leftover = full width, 2 leftovers = half each. (Groups of 2 or 4 keep the paired layout above.) */
@media (min-width: 561px) {
  .sector-layout .prose .cols { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sector-layout .prose .cols > * { grid-column: span 2; }
  .sector-layout .prose .cols > :last-child:nth-child(3n+1) { grid-column: span 6; }
  .sector-layout .prose .cols > :nth-last-child(2):nth-child(3n+1), .sector-layout .prose .cols > :last-child:nth-child(3n+2) { grid-column: span 3; }
  .sector-layout .prose .cols:has(> :nth-child(2):last-child), .sector-layout .prose .cols:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector-layout .prose .cols:has(> :nth-child(2):last-child) > *, .sector-layout .prose .cols:has(> :nth-child(4):last-child) > * { grid-column: auto; }
}
/* Previous / next cards: allow them to shrink and long sector names to wrap (no sideways scroll at mid widths) */
.sector-layout .sector-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sector-layout .sector-pager a { min-width: 0; }
.sector-layout .sector-pager strong { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .sector-layout .sector-pager a { grid-template-columns: 84px 1fr; gap: 14px; } .sector-layout .sector-pager a img { width: 84px; height: 66px; } .sector-layout .sector-pager strong { font-size: 1.25rem; } }
@media (max-width: 600px) { .sector-layout .sector-pager { grid-template-columns: 1fr; } }
/* Card content starts at the top (titles line up across a row); the faint number gets its own space above the title */
.sector-layout .prose .box { align-content: start; }
.sector-layout .prose .box .n { top: 12px; font-size: 2.8rem; }
.sector-layout .prose .box:has(.n) { padding-top: 64px; }
/* Hover bar: on cards with a number it stops short of the number; cards without one keep the full stretch */
.sector-layout .prose .box:has(.n):hover::before { width: calc(100% - 22px - 80px); }

/* =====================================================================
   IIC Portal landing page (portal.html)
   ===================================================================== */
.portal-start { padding-top: clamp(28px, 4vw, 48px) !important; }

/* Three main actions */
.portal-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.portal-action { position: relative; display: grid; gap: 18px; align-content: start; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 30px 60px -48px rgba(46,118,90,.6); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.portal-action__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--mint-soft); color: var(--green); transition: background .35s, color .35s; }
.portal-action__body { display: grid; gap: 8px; }
.portal-action__body strong { font: 600 1.7rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.portal-action__body span { color: var(--muted); font-size: .97rem; }
.portal-action__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font: 700 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.portal-action__go .icon { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.portal-action:hover { transform: translateY(-5px); border-color: var(--mint); box-shadow: 0 34px 60px -36px rgba(46,118,90,.65); }
.portal-action:hover .portal-action__ico { background: var(--grad); color: #fff; }
.portal-action:hover .portal-action__go .icon { transform: translateX(4px); }
.portal-action:first-child { background: radial-gradient(130% 120% at 100% 0%, rgba(103,230,152,.2), transparent 55%), var(--surface); }
@media (max-width: 900px) { .portal-actions { grid-template-columns: 1fr; } }

/* Goals */
.portal-goals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 4vw, 52px); }
.portal-goal { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); display: grid; gap: 10px; align-content: start; }
.portal-goal .ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-soft); color: var(--green); }
.portal-goal .ico .icon { width: 22px; height: 22px; }
.portal-goal h3 { font: 600 1.45rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }
.portal-goal p { color: var(--muted); font-size: .95rem; }
@media (max-width: 1000px) { .portal-goals { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .portal-goals { grid-template-columns: 1fr; } }

/* Understanding the portal: tabs + panel */
.portal-explorer { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: 0 34px 60px -50px rgba(46,118,90,.6); }
.portal-tabs { display: grid; gap: 4px; align-content: start; }
.portal-tab { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 0; border-radius: 16px; background: none; text-align: left; cursor: pointer; font: 500 1.15rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--text); transition: background var(--dur), color var(--dur); }
.portal-tab .icon { width: 36px; height: 36px; padding: 8px; flex: none; border-radius: 50%; background: var(--mint-soft); color: var(--green); }
.portal-tab:hover { background: var(--mint-50); color: var(--ink); }
.portal-tab[aria-selected="true"] { background: var(--grad); color: #fff; font-weight: 600; box-shadow: 0 14px 28px -16px rgba(46,118,90,.8); }
.portal-tab[aria-selected="true"] .icon { background: rgba(255,255,255,.22); color: #fff; }
.portal-panels { position: relative; min-height: 300px; border-radius: 20px; background: radial-gradient(120% 120% at 100% 0%, rgba(103,230,152,.22), transparent 55%), var(--wash); }
.portal-panel { height: 100%; display: grid; align-content: center; gap: 14px; padding: clamp(28px, 4vw, 52px); animation: panelIn .45s var(--ease); }
.portal-panel[hidden] { display: none; }
.portal-panel__ico { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: 0 16px 30px -18px rgba(46,118,90,.9); }
.portal-panel h3 { font: 600 clamp(1.8rem, 3vw, 2.6rem)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); margin-top: 8px; }
.portal-panel p { max-width: 52ch; font-size: 1.0625rem; color: var(--text); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .portal-explorer { grid-template-columns: 1fr; }
  .portal-tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .portal-tab { font-size: 1rem; }
  .portal-panels { min-height: 0; }
}

/* Four stages: numbered timeline */
.stages { position: relative; display: grid; gap: 14px; counter-reset: none; }
.stages::before { content: ""; position: absolute; left: 31px; top: 34px; bottom: 34px; width: 2px; background: linear-gradient(var(--mint), var(--green)); opacity: .5; }
.stage { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start; padding: 22px 26px 22px 0; }
.stage__n { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--mint); font: 600 1.7rem/1 var(--display); color: var(--green); box-shadow: 0 0 0 6px var(--bg); }
.stage > div { padding: 22px 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); transition: border-color .3s, box-shadow .3s; }
.stage:hover > div { border-color: var(--mint); box-shadow: 0 22px 40px -32px rgba(46,118,90,.6); }
.stage:hover .stage__n { background: var(--grad) border-box; border-color: transparent; color: #fff; }
.stage__k { font: 700 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.stage h3 { font: 600 1.6rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 8px 0 8px; color: var(--ink); }
.stage p:last-child { color: var(--muted); }
.stages__after { margin-top: 18px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: clamp(24px, 3.5vw, 36px); border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(120% 140% at 100% 0%, rgba(103,230,152,.22), transparent 55%), var(--surface); }
.stages__after p { font-size: 1.0625rem; color: var(--text); max-width: 70ch; }
@media (max-width: 700px) {
  .stages::before { left: 23px; }
  .stage { grid-template-columns: 48px 1fr; gap: 14px; padding-right: 0; }
  .stage__n { width: 48px; height: 48px; font-size: 1.3rem; }
  .stages__after { grid-template-columns: 1fr; }
}

/* Tutorial videos */
.portal-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.portal-video { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 60px -48px rgba(46,118,90,.6); }
.portal-video__frame { aspect-ratio: 2010 / 1080; background: #10241c; }
.portal-video__frame video { width: 100%; height: 100%; display: block; object-fit: contain; background: #10241c; }
.portal-video__body { padding: 22px 26px 26px; display: grid; gap: 8px; }
.portal-video__body h3 { font: 600 1.55rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.portal-video__body p:last-child { color: var(--muted); }
@media (max-width: 860px) { .portal-videos { grid-template-columns: 1fr; } }

/* Sectors: interactive cards */
.portal-sectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .portal-sectors { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .portal-sectors { grid-template-columns: 1fr; } }

/* Closing band */
.portal-ready { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: clamp(32px, 5vw, 60px); border-radius: 28px; border: 1px solid var(--line); background: var(--wash), var(--surface); }
.portal-ready .h-display { margin-top: 16px; }
@media (max-width: 760px) { .portal-ready { grid-template-columns: 1fr; } }
@media (min-width: 561px) and (max-width: 1000px) { .portal-sectors > .psector:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* =====================================================================
   "Switching to IIC Planet Portal" loading banner (IIC Portal buttons)
   ===================================================================== */
.portal-switch { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: var(--wash), var(--cream); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.portal-switch.is-on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.portal-switch__card { display: grid; justify-items: center; gap: 22px; text-align: center; transform: translateY(14px) scale(.98); transition: transform .5s var(--ease); }
.portal-switch.is-on .portal-switch__card { transform: none; }
.portal-switch__marks { display: flex; align-items: center; gap: 18px; }
.portal-switch__from { width: 96px; height: 96px; border-radius: 24px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 40px -28px rgba(46,118,90,.6); }
.portal-switch__from img { width: 72px; height: auto; }
.portal-switch__to { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: 0 22px 44px -22px rgba(46,118,90,.9); }
.portal-switch__to .icon { width: 44px; height: 44px; stroke-width: 1.5; }
.portal-switch.is-on .portal-switch__to { animation: switchPulse 1.4s var(--ease) infinite; }
.portal-switch__path { display: flex; gap: 7px; }
.portal-switch__path i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); opacity: .25; }
.portal-switch.is-on .portal-switch__path i { animation: switchDot 1s ease-in-out infinite; }
.portal-switch__path i:nth-child(2) { animation-delay: .15s !important; }
.portal-switch__path i:nth-child(3) { animation-delay: .3s !important; }
.portal-switch__path i:nth-child(4) { animation-delay: .45s !important; }
.portal-switch__from-lbl, .portal-switch__to-lbl { font: 700 .66rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.portal-switch__to-lbl { color: var(--green); }
.portal-switch__title { font: 600 clamp(1.9rem, 4vw, 2.8rem)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.portal-switch__title b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portal-switch__sub { color: var(--muted); font-size: .95rem; margin-top: -10px; }
.portal-switch__bar { width: min(320px, 70vw); height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.portal-switch__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); }
.portal-switch.is-on .portal-switch__bar span { animation: switchBar var(--switch-ms, 1100ms) var(--ease) forwards; }
@keyframes switchDot { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes switchPulse { 0%, 100% { box-shadow: 0 22px 44px -22px rgba(46,118,90,.9), 0 0 0 0 rgba(103,230,152,.45); } 60% { box-shadow: 0 22px 44px -22px rgba(46,118,90,.9), 0 0 0 16px rgba(103,230,152,0); } }
@keyframes switchBar { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .portal-switch.is-on .portal-switch__to, .portal-switch.is-on .portal-switch__path i { animation: none; opacity: 1; }
  .portal-switch__card { transform: none; }
}


/* Sector cards (IIC Portal page)
   At rest: icon + name enlarged and centred to fill the card. Hover/focus: they glide back to normal size at the
   top-left and the full summary fades in below. The card always keeps the height the summary needs, so nothing is
   cut and rows never jump. --tx/--ty/--k (move + scale for the resting state) are measured per card in main.js.
   Touch screens (no hover) always show the normal layout with the summary. */
.psector { position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 14px; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, background .35s; }
.psector__head { display: flex; align-items: center; gap: 14px; width: max-content; max-width: 100%; transform-origin: center; }
.psector__ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-soft); color: var(--green); transition: background .35s, color .35s, transform .35s var(--ease); }
.psector__ico .icon { width: 22px; height: 22px; }
.psector__name { font: 600 1.3rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.psector__sum { font-size: .9rem; line-height: 1.55; color: var(--muted); }
.psector:hover, .psector:focus-visible { transform: translateY(-4px); border-color: var(--mint); box-shadow: 0 26px 44px -30px rgba(46,118,90,.65); background: radial-gradient(130% 130% at 100% 0%, rgba(103,230,152,.18), transparent 55%), var(--surface); }
.psector:hover .psector__ico, .psector:focus-visible .psector__ico { background: var(--grad); color: #fff; transform: rotate(-6deg); }
@media (hover: hover) {
  .psector__head { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--k, 1)); transition: transform .5s var(--ease); }
  .psector__sum { opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease), transform .45s var(--ease); }
  .psector:hover .psector__head, .psector:focus-visible .psector__head { transform: none; }
  .psector:hover .psector__sum, .psector:focus-visible .psector__sum { opacity: 1; transform: none; transition-delay: .1s; }
}

/* =====================================================================
   Full-width layout (modelled on IIC Worldwide Revamped)
   - header and menu bar span the whole screen
   - wider content column that keeps growing on large monitors, with type scaled up there
   - page photos, the "Our promise" banner and split-section photos run edge to edge
   ===================================================================== */
:root { --container: 1560px; --gutter: clamp(20px, 4.5vw, 72px); }
@media (min-width: 1680px) { :root { --container: 1760px; } html { font-size: 17px; } }
@media (min-width: 2200px) { :root { --container: 2040px; } html { font-size: 19px; } }
@media (min-width: 3000px) { :root { --container: 2560px; } html { font-size: 22px; } }
html, body { overflow-x: clip; } /* edge-to-edge (100vw) pieces never cause sideways scrolling */

/* Header + full-screen menu bar: logo at the left edge, actions at the right edge */
.hdr .wrap, .menu__top .wrap { max-width: none; }

/* Inner-page header photo: full bleed */
.page-hero__media { width: 100vw; margin-left: calc(50% - 50vw); max-height: 72vh; }

/* Homepage "Our promise" banner: full bleed, caption stays aligned with the content column */
.media .media__frame { width: 100vw; margin-left: calc(50% - 50vw); max-height: 82vh; min-height: 420px; }
.media .media__cap { left: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter)); }

/* Split sections (photo beside text): the photo runs to the right edge of the screen */
@media (min-width: 961px) {
  .feat__img:not(.feat__img--mock) { margin-right: calc(-1 * max(0px, (100vw - var(--container)) / 2)); }
}

/* =====================================================================
   Balance pass for the full-width layout (use the freed space; trim doubled gaps)
   ===================================================================== */
/* Home, Who we are: a larger "15" (its size follows the caption) and a wider intro paragraph */
@media (min-width: 961px) {
  .about__cap { font-size: clamp(.8125rem, 1.05vw, 1.15rem); }
  #who-we-are .about__copy .sub { max-width: 62ch; }
}

/* Home: globe panel and "Why IIC Planet" share a background, so their two paddings stacked into ~280px */
#where-we-are.section { padding-bottom: clamp(36px, 4vw, 64px); }

/* "Our promise" banner: the heading can use the wider banner instead of breaking into four lines */
.media .media__cap { max-width: min(760px, 56vw); }

/* Gallery intro paragraph: wider on desktop */
[aria-label="Photo gallery"] > .wrap > .sub { max-width: 78ch; }

/* Chairman's message: slightly wider text column */
.chairman__msg { max-width: 72ch; }

/* Sector pages: body uses the full column (cards, tiles, quote, callout); running paragraphs keep a readable line length */
.sector-layout .prose { max-width: none; }
.sector-layout .prose > p, .sector-layout .prose > h2 { max-width: 82ch; }
/* Sector page hero: the sector summary fills the empty right-hand side */
.page-hero__aside .sector-hero-lead { font-size: 1.125rem; }

/* Article pages: the text, share box and photo form one block aligned with the title (no wide empty middle) */
.article { max-width: 1180px; }
@media (min-width: 961px) { .article { grid-template-columns: minmax(0, 1fr) 300px; } }
.article .prose { max-width: none; }
.article__hero { aspect-ratio: 16 / 9; max-width: 1180px; margin-left: 0; margin-right: 0; }
@media (max-width: 560px) { .article__hero { aspect-ratio: 4 / 3; } }

/* Partnership "Five ways": wider cards on the wider layout */
.ways.is-pinned .ways__card { width: min(1180px, 82vw); margin-left: calc(min(1180px, 82vw) / -2); }

/* Portal "Four stages": on wide screens a horizontal four-step row (lines were ~140 characters long) */
@media (min-width: 1100px) {
  .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .stages::before { left: 32px; right: 32px; top: 31px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--mint), var(--green)); }
  .stage { grid-template-columns: 1fr; gap: 18px; padding: 0; }
  .stage > div { height: 100%; }
}
@media (min-width: 1100px) {
  /* the connecting line runs from the first stage number to the last (not to the edge) */
  .stages::before { right: calc((100% - 3 * 18px) / 4 - 32px); }
}
/* Home: "Why IIC Planet" directly follows the globe on the same background: lighter top padding */
#where-we-are + #why.section { padding-top: clamp(48px, 5vw, 88px); }
@media (min-width: 1100px) { .stage { grid-template-rows: auto 1fr; } } /* number row keeps its size; the card takes the rest, so card tops line up */

/* Loading banner: each label sits directly under its own mark (centred on it); the dots line up with the marks' centres */
.portal-switch__marks { align-items: flex-start; }
.portal-switch__mark { display: grid; justify-items: center; gap: 12px; width: 96px; }
.portal-switch__path { height: 96px; align-items: center; }

/* =====================================================================
   Large-screen tightening (feedback at 1920x1080)
   ===================================================================== */
@media (min-width: 1280px) {
  /* Who we are: the "15" stops growing past ~480px tall; the text beside it reads a little larger to balance it */
  .about__cap { font-size: clamp(.8125rem, .78vw, .9rem); }
  #who-we-are.section { padding-top: clamp(80px, 6vw, 110px); }
  #who-we-are .about__copy .lead { font-size: clamp(1.6rem, 1.55vw, 2.1rem); }
  #who-we-are .about__copy .sub { font-size: 1.0625rem; }
  .about__row { padding-bottom: clamp(24px, 2.5vw, 40px); }

  /* Icon carousel section: smaller orb, less padding, bigger text, and the orb centred in the space beside the text */
  .commit { --orb-bg: clamp(420px, 30vw, 540px); --text-w: min(760px, 50%); padding: clamp(24px, 3vw, 48px) 0; }
  .commit__text { max-width: var(--text-w); }
  .commit__text .lead { font-size: clamp(1.5rem, 1.55vw, 2.1rem); }
  .commit .focus-orb { right: auto; left: calc(var(--text-w) + (100% - var(--text-w) - var(--orb)) / 2); }
}
@media (min-width: 1280px) {
  /* Chairman's message: larger portrait column and slightly larger text, so the pair fills the row */
  .chairman { grid-template-columns: minmax(300px, 30%) 1fr; }
  .chairman__msg { font-size: clamp(1.0625rem, .95vw, 1.2rem); max-width: 78ch; }
  .chairman__msg blockquote { font-size: clamp(1.35rem, 1.3vw, 1.6rem); }
}

/* Article pages: the whole reading column (breadcrumb, title, photo, text, share box, related) is centred as one block,
   so wide screens get even margins instead of one large empty strip on the right */
main:has([data-article]) .wrap { max-width: calc(76rem + 2 * var(--gutter)); }
main:has([data-article]) .article, main:has([data-article]) .article__hero { max-width: none; }

/* Home, Who we are + icon carousel (wide screens): one inset block (~77% of the viewport) centred on the page; the paragraph and
   text column fill it, and the orb sits on the block's right edge */
@media (min-width: 1280px) {
  #who-we-are > .wrap > .eyebrow, #who-we-are .about__row, #who-we-are .commit { max-width: max(77vw, 1160px); margin-left: auto; margin-right: auto; }
  #who-we-are > .wrap > .eyebrow { display: flex; }
  #who-we-are .about__row { gap: clamp(40px, 4vw, 80px); }
  #who-we-are .commit .focus-orb { left: auto; right: 0; }
}

/* About, Chairman's message (wide screens): one centred block (~74% of the viewport); portrait about a third of it,
   the message filling the rest */
@media (min-width: 1280px) {
  .chairman { max-width: max(74vw, 1160px); margin-left: auto; margin-right: auto; grid-template-columns: 34.5% 1fr; gap: clamp(48px, 5vw, 100px); }
  .chairman__msg { max-width: none; }
}

/* Article pages on tablets and phones */
.page-hero .article-title { font: 400 clamp(2.2rem, 4.6vw, 4.2rem)/1 var(--display); text-transform: uppercase; max-width: 24ch; overflow-wrap: break-word; }
@media (max-width: 960px) { .page-hero .article-title { max-width: 32ch; } }
/* Long headlines ran to 9-11 lines on phones */
@media (max-width: 560px) { .page-hero .article-title { font-size: clamp(1.5rem, 6.8vw, 2rem); line-height: 1.05; max-width: none; } }
/* The empty "link copied" line and the 64px margin left a ~85px hole under the share buttons */
.article__side .results-note:empty { min-height: 0; }
@media (max-width: 960px) { .article-nav { margin-top: 40px; } }

/* Partnership, Register card: fills its column and matches the text column's height; the portal's three steps
   sit between the title and the button */
.feat__img--mock { place-items: center stretch; padding: clamp(40px, 6vw, 96px) var(--gutter); }
.portal-mock { max-width: 560px; justify-self: center; padding: clamp(28px, 3vw, 44px); display: grid; align-content: start; }
.portal-mock h3 { margin-top: 20px; font-size: clamp(2.4rem, 3.2vw, 3rem); }
.portal-mock .portal-mock__lead { font-size: .95rem; margin-top: 8px; }
.portal-mock__steps { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 18px; counter-reset: none; }
.portal-mock__steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.portal-mock__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mint-soft); color: var(--green); }
.portal-mock__ico .icon { width: 20px; height: 20px; }
.portal-mock__steps strong { display: block; font-size: .975rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.portal-mock__steps small { display: block; margin-top: 2px; font-size: .85rem; color: var(--muted); line-height: 1.45; }
.portal-mock .pill { margin-top: 28px; min-height: 52px; }
.portal-mock .portal-mock__alt { margin-top: 14px; text-align: center; font-size: .875rem; }
.portal-mock__alt a { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-color: var(--mint); text-underline-offset: 3px; }
.portal-mock__alt a:hover { color: var(--ink); }
@media (max-width: 960px) { .feat__img--mock { padding-top: 0; } .portal-mock { justify-self: start; } }

/* Gallery on laptops and desktops: an even 4-column grid instead of uneven masonry columns (which left a blank
   corner). "All" makes a 12-cell bento: the first photo spans two columns, the second a 2x2 block. Filtered views
   use one even row. */
@media (min-width: 961px) {
  .gallery { columns: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 15vw, 320px); grid-auto-flow: dense; gap: 20px; }
  .gallery__item { margin: 0; height: 100%; }
  .gallery__item[hidden] { display: none; }
  .gallery__item img { height: 100%; object-fit: cover; }
  .gallery:not([data-view]) > .gallery__item:nth-child(1), .gallery[data-view="All"] > .gallery__item:nth-child(1) { grid-column: span 2; }
  .gallery:not([data-view]) > .gallery__item:nth-child(2), .gallery[data-view="All"] > .gallery__item:nth-child(2) { grid-column: span 2; grid-row: span 2; }
  .gallery[data-count="1"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: clamp(320px, 34vw, 620px); }
  .gallery[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(280px, 26vw, 480px); }
  .gallery[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(240px, 20vw, 400px); }
}

/* Responsive audit fixes
   - IIC Portal sector cards: the column stays the card's width, so a name too long for one line (e.g. "Borderless
     Infrastructure" on laptops) wraps instead of running past the card edge; names that fit stay on one line */
.psector { grid-template-columns: minmax(0, 1fr); }
/* - IIC Portal "Ready to join" box: stack heading and buttons until there is room for both side by side;
     on small phones the buttons take the full width and their labels may wrap */
@media (max-width: 1100px) { .portal-ready { grid-template-columns: 1fr; } }
@media (max-width: 420px) {
  .portal-ready { padding: 28px 20px; }
  .portal-ready .btn-row .pill { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}
/* - Footer links: taller tap targets on touch-size screens (same visual spacing) */
@media (max-width: 1024px) {
  .ftr li { margin: 0; }
  .ftr li a, .ftr__links a { display: inline-block; padding: 7px 0; }
}
/* - Chairman's message on tablets: portrait beside the message instead of alone above it */
@media (min-width: 600px) and (max-width: 860px) {
  .chairman { grid-template-columns: minmax(200px, 36%) 1fr; }
  .chairman__photo { position: sticky; top: 100px; }
}
/* - Phone and email links in contact details: a taller tap area on touch-size screens without moving the text */
@media (max-width: 1024px) {
  main a[href^="tel:"], main a[href^="mailto:"] { display: inline-block; padding: 10px 0; margin: -10px 0; }
}

/* "67" figure on phones/tablets: the single column stays the row's width. Before, the column grew to fit the figure,
   the caption widened with it and the figure was re-fitted to the wider caption, so all three ran past the screen edge */
@media (max-width: 960px) {
  .about__row, .about__row--flip { grid-template-columns: minmax(0, 1fr); }
  .about-big--num[data-fit-caption] { max-width: 100%; }
}
/* Phones (portrait): caption on one line, centred, with the "67" above spanning exactly its text (sized in main.js) */
@media (max-width: 600px) {
  #who-we-are .about-big--num[data-fit-caption] { margin-left: auto; margin-right: auto; }
  #who-we-are .about__cap { text-align: center; letter-spacing: .14em; }
}