/* ============================================================
   CCDC Bangladesh site styles
   Rectangular geometry, no rounded corners anywhere by design.
   ============================================================ */

:root{
  --ink:#0B0E11;
  --ink-2:#14181D;
  --ink-3:#1E242B;
  --paper:#FFFFFF;
  --sand:#F4F5F6;
  --fg:#0B0E11;            /* body text — flips with theme */
  --muted:#6B7280;
  --accent:#D6001C;
  --line:rgba(11,14,17,.14);

  /* ---- content-band surfaces ----
     Light mode is white throughout; these flip to the near-blacks only under
     [data-theme="dark"]. Photo overlays (hero, mega feature, gallery, service
     media) deliberately keep literal --ink / #fff instead - white text on a
     photograph has to stay white in both themes. */
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-3:#F4F5F6;     /* hover only, so a white row still reacts */
  --on-surface:#0B0E11;
  --muted-dark:#6B7280;
  --line-dark:rgba(11,14,17,.14);
  --wm-now:#F5A623;        /* map: current operations */
  --wm-old:#1FA2E0;        /* map: former operations  */

  color-scheme:light;

  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --nav-top-h:66px;
  --nav-rib-h:50px;
  --nav-h:116px;

  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--fg);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.022em;font-weight:700}
p{margin:0}
dl,dd,dt{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#fff;padding:12px 20px;
}
.skip:focus{left:0}

.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.section--accent .eyebrow{color:#fff;opacity:.72}

/* ============================================================
   NAV  hides on scroll down, returns on scroll up (BP-style)
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  box-shadow:0 6px 18px rgba(0,0,0,.07);
  transition:transform .42s var(--ease);
}
.nav[data-state="hidden"]{transform:translateY(-100%)}

/* two-tier: white top bar (logo + tools) + red ribbon (links) */
.nav__top{background:var(--paper);border-bottom:1px solid var(--line)}
.nav__top .nav__inner{height:var(--nav-top-h)}
.nav__tools{display:flex;align-items:center;gap:6px}
.nav__ribbon{background:var(--accent)}
.nav__ribbon .nav__inner{height:var(--nav-rib-h)}

.nav__inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}

.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--fg)}
.brand__mark{width:40px;height:auto;flex:none;display:block}
.foot__brand .brand__mark{width:38px}
.brand__text{display:flex;flex-direction:column;line-height:1.12;gap:2px}
.brand__text strong{font-size:clamp(16px,1.9vw,20px);letter-spacing:.02em;font-weight:800;line-height:1.22}
.brand__text em{font-style:normal;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700}

.nav__ribbon .nav__links{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);height:var(--nav-rib-h)}
.nav__links{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px)}
/* Ribbon link styling now lives with the mega-menu block further down;
   .nav__links only owns layout so it cannot bleed into the dropdown links. */

.nav__toggle{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;margin-right:-10px}
.nav__toggle span{display:block;height:2px;width:26px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.panel{
  position:fixed;inset:0;z-index:99;background:var(--surface);
  display:flex;flex-direction:column;justify-content:flex-start;
  /* Top pad clears the fixed nav so the first link is not hidden behind it. */
  padding:calc(var(--nav-h) + 14px) var(--gut) 48px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.panel[hidden]{display:none}
.panel__links{display:flex;flex-direction:column;gap:6px}
.panel__links a{
  color:var(--on-surface);text-decoration:none;font-size:clamp(28px,7vw,44px);font-weight:700;
  letter-spacing:-.02em;padding:14px 0;border-bottom:1px solid var(--line-dark);
}
.panel__foot{margin-top:40px;color:var(--muted-dark);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- language dropdown (desktop nav) ---------- */
.langdrop{position:relative;margin-left:4px;padding-left:18px;border-left:1px solid var(--line-dark);flex:none}
.langdrop__btn{
  appearance:none;-webkit-appearance:none;background:transparent;border:0;cursor:pointer;
  color:#fff;opacity:.85;font:inherit;font-size:13px;font-weight:700;letter-spacing:.03em;
  display:inline-flex;align-items:center;gap:5px;padding:6px 2px;white-space:nowrap;
}
.langdrop__btn:hover{opacity:1}
.langdrop__caret{font-size:10px;opacity:.75;transition:transform .2s var(--ease)}
.langdrop__btn[aria-expanded="true"] .langdrop__caret{transform:rotate(180deg)}
.langdrop__menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:120;min-width:130px;
  background:var(--ink);border:1px solid var(--line-dark);
  display:flex;flex-direction:column;padding:4px;
}
.langdrop__menu[hidden]{display:none}
.langdrop__item{
  appearance:none;-webkit-appearance:none;background:transparent;border:0;cursor:pointer;
  color:#fff;opacity:.8;font:inherit;font-size:14px;text-align:left;padding:9px 12px;white-space:nowrap;
  transition:background .15s var(--ease),opacity .15s var(--ease);
}
.langdrop__item:hover{opacity:1;background:rgba(255,255,255,.08)}
.langdrop__item.is-active{opacity:1;color:var(--accent);font-weight:700}

/* ---------- language switcher (mobile panel) ---------- */
.lang{display:inline-flex;align-items:center;gap:2px}
.lang__btn{
  appearance:none;-webkit-appearance:none;background:transparent;border:0;cursor:pointer;
  color:var(--on-surface);opacity:.58;font:inherit;font-size:12.5px;font-weight:700;line-height:1;
  letter-spacing:.03em;padding:5px 7px;border-radius:2px;
  transition:opacity .2s var(--ease),color .2s var(--ease);
}
.lang__btn:hover{opacity:1}
.lang__btn.is-active{opacity:1;color:var(--accent)}
.panel__lang{display:flex;gap:8px;margin-top:28px}
.panel__lang .lang__btn{
  opacity:.85;font-size:16px;padding:11px 18px;border:1px solid var(--line-dark);border-radius:3px;
}
.panel__lang .lang__btn.is-active{opacity:1;color:#fff;background:var(--accent);border-color:var(--accent)}

/* ---------- theme toggle (icon only) + white top-bar tools ---------- */
.langdrop__btn{color:var(--fg)}
.langdrop{border-left-color:var(--line)}
.langdrop__menu{background:var(--paper);border-color:var(--line)}
.langdrop__item{color:var(--fg)}
.nav__toggle span{background:var(--fg)}
.nav__theme{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--fg);border:1px solid var(--line);border-radius:3px;flex:none;margin-left:6px;
  transition:background .2s var(--ease)}
.nav__theme:hover{background:var(--sand)}
.nav__theme svg{width:18px;height:18px}
.nav__theme .icon-sun{display:none}
.nav__theme[data-theme="dark"] .icon-sun{display:block}
.nav__theme[data-theme="dark"] .icon-moon{display:none}
.panel__theme{margin-top:26px;display:flex;align-items:center;gap:12px;
  color:var(--muted-dark);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.panel__theme .nav__theme{color:var(--on-surface);border-color:var(--line-dark);margin-left:0}

/* ---------- dark theme (red + black) ---------- */
:root[data-theme="dark"]{
  --paper:#0B0E11;
  --sand:#14181D;
  --fg:#ECEFF2;
  --muted:#9AA4B0;
  --line:rgba(255,255,255,.14);
  --surface:#0B0E11;
  --surface-2:#14181D;
  --surface-3:#1E242B;
  --on-surface:#ECEFF2;
  --muted-dark:#9AA4B0;
  --line-dark:rgba(255,255,255,.16);
  color-scheme:dark;
}

/* ---------- CCDC worldwide map ---------- */
.wmap{position:relative;margin-top:6px}
.wmap__svg{width:100%;height:auto;display:block}
.wmap__legend{position:absolute;right:1%;bottom:8%;display:flex;flex-direction:column;gap:10px}
.wmap__key{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);font-weight:600}
.wmap__pin{width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);flex:none;box-shadow:inset 0 0 0 3px rgba(255,255,255,.92)}
.wmap__pin--now{background:#F5A623}
.wmap__pin--old{background:#1FA2E0}
.wmap__note{
  margin-top:16px;color:var(--muted);font-size:13.5px;line-height:1.65;
  /* No measure cap: this is a caption under a full-width map, not a
     paragraph of prose. Capped at 800px it broke to two lines with half
     the map's width sitting empty beside it. It wraps on its own once the
     screen is narrower than the sentence. */
}
@media (max-width:760px){
  .wmap__legend{position:static;flex-direction:row;gap:22px;margin-top:14px;justify-content:center}
}

/* ---------- interactive CCDC worldwide map (dedicated page) ---------- */
.wmap--i{display:grid;grid-template-columns:250px 1fr;gap:clamp(18px,3vw,44px);align-items:start;position:relative}
.wmap--i .wmap__panel{position:relative}
.wmap__tabs{display:flex}
.wmap__tab{flex:1;padding:12px 8px;font-size:13px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:#AEB4BC;position:relative}
.wmap__tab--now{clip-path:polygon(0 0,100% 0,calc(100% - 13px) 100%,0 100%);z-index:2}
.wmap__tab--old{clip-path:polygon(13px 0,100% 0,100% 100%,0 100%);margin-left:-13px;padding-left:20px}
.wmap__tab.is-active.wmap__tab--now{background:var(--wm-now)}
.wmap__tab.is-active.wmap__tab--old{background:var(--wm-old)}
.wmap__list{margin-top:2px}
.wmap__city{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:11px 4px;font-size:15px;font-weight:600;color:var(--fg);
  border-bottom:1px solid var(--line);transition:color .2s,padding-left .2s;background:none}
.wmap__city::before{content:"";width:9px;height:9px;border-radius:50%;flex:none}
.wmap__city--now::before{background:var(--wm-now)}
.wmap__city--old::before{background:var(--wm-old)}
.wmap__city:hover,.wmap__city:focus-visible{color:var(--accent);padding-left:9px;outline:none}
.wmap__stage{position:relative}
.wpin{cursor:pointer;outline:none}
.wpin__hit{cursor:pointer}
.wpin__drop{transition:transform .2s var(--ease);transform-box:fill-box;transform-origin:50% 100%}
.wpin--now .wpin__drop{fill:var(--wm-now)}
.wpin--old .wpin__drop{fill:var(--wm-old)}
.wpin--hq .wpin__drop{fill:var(--accent)}
.wpin__eye{fill:#fff}
.wpin:hover .wpin__drop,.wpin.is-active .wpin__drop,.wpin:focus-visible .wpin__drop{transform:scale(1.35)}
.wpin.is-active .wpin__drop{filter:drop-shadow(0 4px 7px rgba(0,0,0,.4))}
.wmap__card{position:absolute;z-index:8;width:min(310px,74vw);background:var(--paper);
  border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.18);padding:17px 19px;pointer-events:auto}
.wmap__card-name{font-size:18px;font-weight:800;margin-bottom:3px}
.wmap__card-yr{color:var(--accent);font-weight:800;font-size:12.5px;letter-spacing:.06em;margin-bottom:9px}
.wmap__card-desc{color:var(--muted);font-size:13.5px;line-height:1.6}
@media (max-width:820px){
  .wmap--i{grid-template-columns:1fr}
  .wmap--i .wmap__panel{max-width:420px}
}

/* ============================================================
   HERO full-bleed rotating stage with a timed progress bar
   Swap a photo in per slide:  .slide__bg{ background-image:url(...) }
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero__stage{position:absolute;inset:0}

.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.slide.is-active{opacity:1}
.slide__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(255,255,255,.10), transparent 58%),
    linear-gradient(150deg, var(--tint-a) 0%, var(--tint-b) 62%, var(--tint-a) 100%);
  background-size:cover;background-position:center;
  transform:scale(1.06);
}
.slide.is-active .slide__bg{animation:kb 9s var(--ease) forwards}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1.14)}}

/* grid + vignette overlay for depth while photos are pending */
.hero__stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.55) 100%);
  background-size:88px 88px,88px 88px,100% 100%;
}

.hero__content{position:relative;z-index:2;width:100%;padding-bottom:clamp(90px,14vh,150px);padding-top:calc(var(--nav-h) + 40px)}
.hero__title{
  color:#fff;font-size:clamp(38px,6.4vw,80px);max-width:19ch;margin-bottom:24px;
}
.hero__lede{color:rgba(255,255,255,.80);font-size:clamp(16px,1.7vw,20px);max-width:56ch;margin-bottom:38px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 34px;font-size:14px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;border:1px solid transparent;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:#fff;color:var(--ink)}
.btn--ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

.hero__ui{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid var(--line-dark)}
.hero__ui-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px}
.dots{display:flex;gap:26px}
.dot{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.5);transition:color .3s}
.dot.is-active{color:#fff}
.dot span{font-size:12px;font-weight:700;letter-spacing:.14em}
.dot i{display:block;width:62px;height:2px;background:rgba(255,255,255,.26);position:relative;overflow:hidden}
.dot i::after{content:"";position:absolute;inset:0 100% 0 0;background:var(--accent)}
.dot.is-active i::after{animation:tick var(--dur,7s) linear forwards}
.dot.is-paused i::after{animation-play-state:paused}
@keyframes tick{to{inset:0 0 0 0}}

.pause{width:34px;height:34px;border:1px solid rgba(255,255,255,.34);position:relative;flex:none}
.pause::before,.pause::after{content:"";position:absolute;top:50%;left:50%;width:3px;height:12px;background:#fff;transform:translate(-50%,-50%)}
.pause::before{margin-left:-3.5px}.pause::after{margin-left:3.5px}
.pause[data-playing="false"]::before{
  width:0;height:0;margin-left:1px;background:transparent;
  border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.pause[data-playing="false"]::after{display:none}

/* ============================================================
   HERO ACCORDION  hover-reveal photos + auto-advance + pause
   ============================================================ */
.chero{position:relative;background:#07090B;margin-top:var(--nav-h)}
.chero__rail{display:flex;gap:3px;height:clamp(430px,72vh,760px)}
.cpanel{position:relative;flex:1 1 0%;min-width:0;overflow:hidden;display:block;
  transition:flex-grow .75s var(--ease);color:#fff}
.cpanel.is-active{flex-grow:8}
.cpanel__img{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1.3s var(--ease),filter .6s var(--ease);transform:scale(1.05)}
.cpanel:not(.is-active) .cpanel__img{filter:grayscale(.18) brightness(.64)}
.cpanel.is-active .cpanel__img{transform:scale(1)}
.cpanel.is-active.is-playing .cpanel__img{animation:ckb 7s linear forwards}
@keyframes ckb{from{transform:scale(1)}to{transform:scale(1.09)}}
.cpanel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,.24) 82%,rgba(0,0,0,.68) 100%)}
.cpanel:not(.is-active):hover .cpanel__img{filter:grayscale(0) brightness(.8)}
.cpanel__spine{position:absolute;left:0;right:0;bottom:78px;display:flex;justify-content:center;
  opacity:1;transition:opacity .3s;pointer-events:none}
.cpanel__spine b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:13px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.cpanel.is-active .cpanel__spine{opacity:0}
.cpanel__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.8vw,44px);
  max-width:660px;opacity:0;transform:translateY(14px);
  transition:opacity .5s .15s,transform .5s .15s;pointer-events:none}
.cpanel.is-active .cpanel__cap{opacity:1;transform:none}
.cpanel__kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:var(--accent);padding:4px 10px;margin-bottom:12px}
.cpanel__title{display:block;font-size:clamp(24px,3vw,44px);font-weight:800;line-height:1.08;
  text-shadow:0 2px 6px rgba(0,0,0,.85),0 1px 22px rgba(0,0,0,.6)}
.cpanel__sub{display:block;margin-top:12px;font-size:15px;color:rgba(255,255,255,.9);max-width:48ch;
  text-shadow:0 1px 10px rgba(0,0,0,.75)}
.chero__ctrl{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;
  gap:18px;padding:16px var(--gut);pointer-events:none}
.chero__pause{pointer-events:auto;width:40px;height:40px;flex:none;border:1px solid rgba(255,255,255,.5);
  position:relative;background:rgba(0,0,0,.28);backdrop-filter:blur(4px)}
.chero__pause::before,.chero__pause::after{content:"";position:absolute;top:50%;left:50%;
  width:3px;height:13px;background:#fff;transform:translate(-50%,-50%)}
.chero__pause::before{margin-left:-3.5px}.chero__pause::after{margin-left:3.5px}
.chero__pause[data-playing="false"]::before{width:0;height:0;margin-left:1px;background:transparent;
  border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.chero__pause[data-playing="false"]::after{display:none}
.chero__dots{pointer-events:auto;display:flex;gap:9px;flex:1}
.cdot{width:44px;height:3px;background:rgba(255,255,255,.3);position:relative;overflow:hidden;
  cursor:pointer;border:0;padding:0}
.cdot::after{content:"";position:absolute;inset:0 100% 0 0;background:var(--accent)}
.cdot.is-active::after{background:#fff}
.cdot.is-active.is-playing::after{animation:ctick 7s linear forwards}
@keyframes ctick{to{inset:0 0 0 0}}
.chero__cta{pointer-events:auto;display:flex;gap:10px;flex:none}
.chero__cta .btn{padding:13px 24px;font-size:12px}
@media (max-width:820px){
  .chero__rail{height:auto;flex-direction:column}
  .cpanel{height:60px;flex:none;transition:height .5s var(--ease)}
  .cpanel.is-active{height:min(64vh,470px)}
  .cpanel__spine b{writing-mode:horizontal-tb;transform:none}
  .cpanel__spine{bottom:auto;top:50%;transform:translateY(-50%)}
  .chero__cta{display:none}
}

/* ============================================================
   STATS
   ============================================================ */
.stats{background:var(--surface-2);color:var(--on-surface);border-top:1px solid var(--line-dark)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark)}
.stat{background:var(--surface-2);padding:clamp(32px,5vw,54px) clamp(16px,2.4vw,32px)}
.stat b{display:block;font-size:clamp(38px,5.2vw,62px);font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:12px}
.stat span{font-size:13px;letter-spacing:.06em;color:var(--muted-dark);text-transform:uppercase;font-weight:600}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding-block:clamp(72px,11vw,140px)}
.section--dark{background:var(--surface);color:var(--on-surface)}
.section--accent{background:var(--accent);color:#fff}
.section__head{max-width:60ch;margin-bottom:clamp(40px,5vw,68px)}
.section__head h2,.about h2,.contact h2{font-size:clamp(30px,4.2vw,52px)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.card{background:var(--paper);padding:clamp(30px,3.4vw,46px);border-top:3px solid var(--accent)}
.card__num{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--muted);margin-bottom:22px}
.card h3{font-size:23px;margin-bottom:14px}
.card p{color:var(--muted);font-size:16px}

.ops{display:grid;gap:1px;background:var(--line-dark);border-block:1px solid var(--line-dark)}
.op{
  background:var(--surface);display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding:clamp(24px,3vw,38px) 4px;
  transition:background .3s var(--ease),padding-inline .3s var(--ease);
}
.op:hover{background:var(--surface-3);padding-inline:20px 24px}
.op__id{font-size:clamp(24px,3.4vw,40px);font-weight:700;letter-spacing:-.02em}
.op__meta{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-dark);font-weight:600;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.op__tag{
  font-size:10px;letter-spacing:.14em;font-weight:700;padding:4px 9px;
  border:1px solid var(--line-dark);color:var(--muted-dark);
}
.op__tag--live{border-color:var(--accent);color:#fff;background:var(--accent)}
.op__tag--care{border-color:#C8922A;color:#E8B855}
.op__tag--next{border-color:var(--line-dark);color:var(--on-surface)}

.about{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(40px,6vw,90px);align-items:start}
.about__text h2{margin-bottom:26px}
.about__text p{color:var(--muted);margin-bottom:18px}
.about__facts dl{border-top:1px solid var(--line)}
.about__facts div{padding:20px 0;border-bottom:1px solid var(--line)}
.about__facts dt{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.about__facts dd{font-size:16px}

/* The head office column holds a four-line postal address and the other
   two hold a line each, so it is given more of the row and set a size down:
   three columns that read across, rather than one tall stack beside two
   short ones (user, 20 Sep 2026: "the positioning looks odd"). */
.contact__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:32px;
  align-items:start;margin-top:clamp(36px,5vw,58px)}
.contact__grid dt{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.72;margin-bottom:8px}
.contact__grid dd{font-size:clamp(18px,2vw,24px);font-weight:600;line-height:1.35}
.contact__grid div:first-child dd{font-size:clamp(15px,1.35vw,18px);
  line-height:1.55;max-width:32ch}
.contact__grid a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}

/* ============================================================
   INNER PAGE HEAD + CAREERS
   ============================================================ */
.pagehead{
  background:var(--surface);color:var(--on-surface);
  padding-top:calc(var(--nav-h) + clamp(48px,8vw,96px));
  padding-bottom:clamp(48px,7vw,86px);
  border-bottom:1px solid var(--line-dark);
}
.pagehead h1{font-size:clamp(32px,5.4vw,60px);max-width:20ch;margin-bottom:20px}

/* Careers leads with the vacancy list, so its head is compressed and the
   section under it starts tight - a visitor must land on a real role. */
.pagehead--tight{
  padding-top:calc(var(--nav-h) + clamp(20px,3vw,34px));
  padding-bottom:clamp(20px,2.6vw,30px);
}
.pagehead--tight h1{font-size:clamp(27px,3.6vw,40px);margin-bottom:12px}
.pagehead--tight .eyebrow{margin-bottom:10px}
.pagehead--tight .pagehead__lede{font-size:clamp(14px,1.4vw,15.5px);max-width:70ch}
/* One line each. The measure caps that keep body text readable are what forced
   these to wrap, so they come off here and the type shrinks to compensate. */
.pagehead__h1--line{max-width:none;font-size:clamp(21px,2.7vw,33px);white-space:nowrap}
/* Beats .pagehead--tight .pagehead__lede, which caps the measure at 70ch and
   is what was still wrapping this onto a second line. */
.pagehead--tight .pagehead__lede--line{max-width:none}

/* The openings head carries the search toolbar, which needs the full column;
   .section__head caps at 60ch and was stacking the sort under the input. */
#openings .section__head{max-width:none}

/* ---- waving flag behind the careers head ----
   The flag is decorative, so it is a background rather than an <img>, and it
   is masked away from the left column where the type sits. Text keeps its
   normal colour against normal paper; the flag only ever occupies the empty
   right-hand side. Both themes get their own opacity because the same wash
   that is subtle on white is invisible on near-black. */
.pagehead--flag{position:relative;isolation:isolate;overflow:hidden}

/* The cloth. Oversized, tilted and bled off three edges so what shows is a
   fragment in motion rather than a flag posed neatly in the corner. `cover`
   crops the top and bottom away, which is the point - the disc and two wave
   crests carry it. */
.pagehead--flag::before{
  content:"";position:absolute;z-index:-2;pointer-events:none;
  /* Full width of the banner. The artwork is cut to banner proportions and
     lies low on the left, climbing to the right, so the sweep spans the whole
     header while leaving the upper left clear for the type. */
  inset:var(--nav-h) 0 0 0;
  /* `cover` with the artwork cut to the header's own proportions, so it scales
     uniformly and the disc stays round. Anchored bottom: the sheet is drawn to
     sit low across the left, and that is what keeps the type off it. */
  background:url(/assets/img/bd-flag-wave.svg) no-repeat center bottom/cover;
  opacity:.95;
  /* A CSS filter follows the background image's own alpha, so this shadows the
     cloth's silhouette rather than the element box - the sheet reads as lying
     over the page instead of being printed into it. */
  filter:drop-shadow(0 10px 22px rgba(0,40,28,.22));
}

/* The guarantee. A wash of the page's own surface colour across the left,
   above the cloth and below the type, so the headline always sits on flat
   paper wherever the flag lands. Cheaper to reason about than tuning the
   flag's opacity until the text happens to survive. */
.pagehead--flag::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* The lede runs to about 73% of the width, so the wash has to stay solid
     past it. The flag reads on the right third - which is where the disc is -
     and as a soft tint behind the type. */
  background:linear-gradient(96deg,
    var(--surface) 0%, var(--surface) 54%,
    color-mix(in srgb, var(--surface) 60%, transparent) 71%,
    rgba(0,0,0,0) 88%);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .pagehead--flag::after{
    background:linear-gradient(96deg,
      var(--surface) 0%, var(--surface) 58%, rgba(0,0,0,0) 86%);
  }
}

:root[data-theme="dark"] .pagehead--flag::before{opacity:.54}

/* On a phone the type runs full width, so there is no column to set cloth
   beside. It becomes a tilted scrap behind the lower edge instead. */
@media (max-width:760px){
  /* Same idea as the desktop banner - cloth behind the whole head, not a
     separate strip under it, which read as a detached green band. The sheet
     still has to be anchored right or `cover` crops the disc off a narrow
     screen, and the wash runs top-to-bottom here because the type spans the
     full width rather than sitting in a left column. */
  .pagehead--flag::before{
    inset:var(--nav-h) 0 0 0;
    background-position:right bottom;
    /* Lighter than the desktop banner on purpose: there the lede sits on the
       white left column, here it runs across the cloth, so the sheet has to
       stay a tint rather than a picture. */
    opacity:.34;
  }
  .pagehead--flag::after{
    background:linear-gradient(172deg,
      var(--surface) 0%, var(--surface) 52%,
      color-mix(in srgb, var(--surface) 62%, transparent) 78%,
      rgba(0,0,0,0) 100%);
  }
  :root[data-theme="dark"] .pagehead--flag::before{opacity:.42}
}
@media (max-width:900px){
  .pagehead__h1--line{white-space:normal;font-size:clamp(21px,4.6vw,30px)}
}

/* ---- search over the openings ---- */
.jobsearch{
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap;
  justify-content:space-between;
  /* Bottom rule only. The top one sat just under the banner with a band of
     white between the two, which read as a stray line rather than a divider. */
  border-bottom:1px solid var(--line-dark);padding-block:0 14px;
}
.jobsearch__right{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);flex-wrap:wrap}
.jobsearch__sort{
  appearance:none;-webkit-appearance:none;
  background:var(--surface-2);border:1px solid var(--line-dark);
  color:var(--on-surface);font:inherit;font-size:13.5px;font-weight:600;
  padding:10px 34px 10px 13px;cursor:pointer;
  /* caret drawn in, since the native one cannot be themed */
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.jobsearch__sort:focus{outline:none;border-color:var(--accent)}
.jobsearch__input{
  flex:1 1 320px;min-width:0;max-width:460px;
  background:var(--surface-2);border:1px solid var(--line-dark);
  color:var(--on-surface);font:inherit;font-size:15px;padding:12px 14px;
  transition:border-color .2s var(--ease);
}
.jobsearch__input::placeholder{color:var(--muted-dark);opacity:1}
.jobsearch__input:focus{outline:none;border-color:var(--accent)}
.jobsearch .openings-total{margin:0;flex:none}
.section--tight{padding-top:clamp(14px,1.6vw,20px);padding-bottom:clamp(28px,3.2vw,44px)}
/* Off-screen but still announced. The openings section drops its visible
   heading to get a vacancy above the fold; the outline must not lose it. */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.section--tight .section__head{margin-bottom:clamp(16px,1.8vw,22px)}
.pagehead__lede{color:var(--muted-dark);max-width:62ch;font-size:clamp(15px,1.6vw,18px)}

.disc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.disc__group{background:var(--paper);padding:clamp(22px,2.6vw,32px)}
.disc__group h3{font-size:17px;margin-bottom:8px}
.disc__group p{color:var(--muted);font-size:14px;line-height:1.7}

.apply{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,42px);margin-top:clamp(30px,4vw,48px)}
.apply__step h3{font-size:19px;margin:12px 0 8px}
.apply__step p{font-size:14.5px;line-height:1.7;opacity:.92}
.apply__step a{color:var(--on-surface)}
.apply__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid rgba(255,255,255,.5);
  font-weight:700;font-size:14px;
}
.apply__note{
  margin-top:clamp(30px,4vw,46px);padding-top:22px;
  border-top:1px solid rgba(255,255,255,.34);
  font-size:13px;line-height:1.7;opacity:.86;max-width:78ch;
}
/* The rule and the gap exist to divide this note from the apply steps above
   it. Standing alone in its own band it has nothing to divide, and the border
   reads as a stray line. */
.apply__note--solo{margin-top:0;padding-top:0;border-top:0;font-size:13.5px;opacity:.95}

/* ============================================================
   STAFF PORTAL
   ============================================================ */

.staff__lede{color:var(--muted-dark);max-width:56ch;margin-top:14px;font-size:16px}

.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark)}
.app{
  background:var(--surface);display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(26px,3vw,38px);text-decoration:none;color:var(--on-surface);
  border-top:3px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.app:hover{background:var(--surface-3);border-top-color:var(--accent)}
.app__role{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--accent);margin-bottom:16px;
}
.app h3{font-size:26px;margin-bottom:12px}
.app p{color:var(--muted-dark);font-size:14.5px;margin-bottom:18px;flex:1}
.app__how{
  font-size:12px;color:var(--muted-dark);padding:7px 10px;
  border:1px solid var(--line-dark);margin-bottom:20px;
}
.app__go{
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
}
.app__go i{font-style:normal;transition:transform .3s var(--ease)}
.app:hover .app__go i{transform:translateX(5px)}

.staff__help{
  margin-top:clamp(28px,4vw,44px);color:var(--muted-dark);font-size:13.5px;
  border-top:1px solid var(--line-dark);padding-top:22px;
}

/* ============================================================
   JOB POSTINGS
   Full postings rather than a list of titles: a headcount, the
   requirements and the subject line all have to survive being
   read on a phone, since that is where most applicants see it.
   ============================================================ */
.jobs{display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.jobs__status{
  background:var(--surface);padding:clamp(24px,3vw,34px);
  color:var(--muted-dark);font-size:15px;margin:0;
}
/* Nothing open: the invitation to send a CV anyway, with the same button the
   postings carry. The text keeps the status padding; the button sits under
   it rather than beside, so a long line in Bangla cannot squeeze it. */
.jobs__empty{background:var(--surface);padding:0 clamp(24px,3vw,34px) clamp(24px,3vw,34px)}
.jobs__empty .jobs__status{padding-left:0;padding-right:0}

.job{background:var(--surface);padding:clamp(24px,3vw,36px);border-left:3px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.job:hover{border-left-color:var(--accent);background:var(--surface-3)}

.job__head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;flex-wrap:wrap;margin-bottom:14px;
}
.job__head h3{font-size:clamp(20px,2.4vw,26px);margin:0 0 6px;color:var(--on-surface)}
.job__meta{color:var(--muted-dark);font-size:13.5px;margin:0}

.job__count{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  flex:none;width:118px;
}
.job__vac{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--on-surface);border:1px solid var(--line-dark);padding:6px 11px;white-space:nowrap;
}
.job__tag{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:5px 9px;white-space:nowrap;
}
.job__tag--urgent{background:var(--accent);color:#fff}
.job__tag--soon{border:1px solid var(--accent);color:var(--accent)}

.job__summary{color:var(--muted-dark);font-size:14.5px;line-height:1.7;margin:0 0 18px;max-width:70ch}

.job__reqs{margin-bottom:20px}
.job__reqs h4{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-dark);margin:0 0 10px;font-weight:700;
}
.job__reqs ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;max-width:78ch}
.job__reqs li{
  color:var(--on-surface);font-size:14px;line-height:1.6;padding-left:18px;position:relative;
}
.job__reqs li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:1px;background:var(--accent);
}

.job__apply{border-top:1px solid var(--line-dark);padding-top:16px}
.job__mail{
  display:inline-block;font-size:14px;font-weight:700;color:var(--on-surface);
  text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px;
}
.job__mail:hover{color:var(--accent)}
.job__subject{color:var(--muted-dark);font-size:12.5px;margin:10px 0 0;line-height:1.6}
.job__subject b{color:var(--on-surface)}

@media (max-width:560px){
  .job__head{flex-direction:column}
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--surface);color:var(--on-surface);padding-block:clamp(44px,6vw,72px);border-top:1px solid var(--line-dark)}
.foot__inner{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.foot__brand{display:flex;align-items:center;gap:14px}
.foot__brand strong{display:block;font-size:16px;letter-spacing:.06em}
.foot__brand em{font-style:normal;font-size:11.5px;letter-spacing:.1em;color:var(--muted-dark)}
.foot__links{display:flex;gap:28px;flex-wrap:wrap}
.foot__links a{color:var(--muted-dark);text-decoration:none;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.foot__links a:hover{color:var(--on-surface)}
.foot__legal{width:100%;color:var(--muted-dark);font-size:12.5px;border-top:1px solid var(--line-dark);padding-top:26px;margin-top:8px}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .apps{grid-template-columns:1fr}
  .disc{grid-template-columns:1fr}
  .apply{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr;gap:24px}
}
/* Collapse the red ribbon to the hamburger before the links get cramped.
   The Staff sign-in utility link goes with it - it lives in the panel instead,
   otherwise it crowds the brand and pushes the hamburger off a phone screen. */
@media (max-width:980px){
  .nav__ribbon{display:none}
  .nav__toggle{display:flex}
  .nav__util{display:none}
  :root{--nav-h:var(--nav-top-h)}
}
@media (max-width:760px){
  body{font-size:16px}
  .hero__ui-inner{padding-block:14px}
  .dot i{width:40px}
  .dot span{display:none}
  .foot__inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .brand__text em{display:none}
  .brand__text strong{font-size:17px;white-space:nowrap}
  .brand__mark{width:34px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   GALLERY + LIGHTBOX
   ============================================================ */
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;
}
.gallery__status{color:var(--muted-dark);font-size:15px;grid-column:1/-1;padding:20px 0}
.gallery__item{
  position:relative;display:block;padding:0;border:0;cursor:pointer;
  background:var(--ink-2);overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line-dark);
}
.gallery__item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease),opacity .3s var(--ease);
}
.gallery__item:hover img{transform:scale(1.05)}
.gallery__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:18px 12px 10px;text-align:left;
  color:#fff;font-size:12.5px;font-weight:600;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
  opacity:0;transition:opacity .3s var(--ease);
}
.gallery__item:hover .gallery__cap,.gallery__item:focus-visible .gallery__cap{opacity:1}

.lightbox{
  position:fixed;inset:0;z-index:300;
  background:rgba(6,8,10,.94);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);
}
.lightbox[hidden]{display:none}
.lightbox__figure{margin:0;max-width:96vw;max-height:94vh;display:flex;flex-direction:column;align-items:center}
.lightbox__img{max-width:96vw;max-height:86vh;object-fit:contain;border:1px solid var(--line-dark);cursor:zoom-in}
/* Shown at its own size, to look at rather than to fit. The figure scrolls
   instead of the page, so the arrows and the close stay where they are. */
.lightbox--zoom .lightbox__figure{max-width:100vw;max-height:100vh;overflow:auto;align-items:flex-start}
.lightbox--zoom .lightbox__img{max-width:none;max-height:none;cursor:zoom-out}
.lightbox--zoom .lightbox__cap{display:none}
.lightbox__hint{color:#8D949C;font-size:11.5px;letter-spacing:.06em;margin-top:6px;text-transform:uppercase}
.lightbox__cap{color:#D7DBE0;font-size:13.5px;margin-top:14px;text-align:center}
.lightbox__close{
  position:absolute;top:16px;right:20px;
  background:transparent;border:0;color:#fff;font-size:34px;line-height:1;
  cursor:pointer;opacity:.8;padding:6px 10px;
}
.lightbox__close:hover{opacity:1}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:#fff;font-size:48px;line-height:1;
  cursor:pointer;opacity:.6;padding:10px 16px;
}
.lightbox__nav:hover{opacity:1}
.lightbox__nav--prev{left:8px}
.lightbox__nav--next{right:8px}
@media (max-width:560px){
  .lightbox__nav{font-size:36px;padding:8px 10px}
}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners{display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.partner{
  background:var(--surface-2);display:flex;gap:clamp(18px,3vw,34px);
  padding:clamp(22px,3vw,38px);align-items:flex-start;flex-wrap:wrap;
}
.partner__mark{
  flex:0 0 auto;width:136px;height:104px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line-dark);
  border-top:3px solid var(--accent);padding:12px;
}
.partner__logo{max-width:100%;max-height:100%;object-fit:contain;display:block}
.partner__body{flex:1;min-width:240px}
.partner__body h2{font-size:clamp(19px,2.2vw,24px);color:var(--on-surface);margin-bottom:6px;line-height:1.2}
.partner__role{
  color:var(--accent);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;margin-bottom:12px;
}
.partner__body p:last-child{color:var(--muted-dark);font-size:14.5px;line-height:1.7;max-width:72ch}
.partner__body strong{color:var(--on-surface)}
.partners__note{
  margin-top:clamp(24px,4vw,40px);color:var(--muted-dark);
  font-size:13px;line-height:1.6;max-width:82ch;
}

/* ============================================================
   JOB "VIEW DETAILS" + POSITION DETAILS PAGE
   ============================================================ */
.job__view{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-surface);text-decoration:none;
  border-bottom:2px solid var(--accent);padding-bottom:4px;
}
.job__view i{font-style:normal;transition:transform .3s var(--ease)}
.job__view:hover i{transform:translateX(5px)}

.position__status{color:var(--muted-dark)}
.pagehead .eyebrow a{color:var(--accent);text-decoration:none}
.pagehead .eyebrow a:hover{text-decoration:underline}
.position__tags{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.position__body{
  display:grid;grid-template-columns:1.6fr .9fr;
  gap:clamp(28px,4vw,56px);align-items:start;
}
.position__img{margin-bottom:22px}
.position__img img{width:100%;max-width:660px;border:1px solid var(--line-dark);display:block}
.position__summary{
  color:var(--on-surface);font-size:clamp(15px,1.7vw,18px);line-height:1.7;
  margin-bottom:24px;max-width:64ch;
}
.position__apply{
  border:1px solid var(--line-dark);background:var(--surface-2);
  padding:clamp(22px,3vw,30px);position:sticky;top:calc(var(--nav-h) + 20px);
}
.position__apply h4{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;font-weight:700;
}
.position__note{
  color:var(--muted-dark);font-size:12px;line-height:1.6;margin-top:16px;
  border-top:1px solid var(--line-dark);padding-top:14px;
}
@media (max-width:820px){
  .position__body{grid-template-columns:1fr}
  .position__apply{position:static}
}

/* Sits in the banner: a candidate checking on an application should not have
   to scroll past every vacancy to find the way in. */
.pagehead__cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  border:1px solid var(--accent);color:var(--accent);text-decoration:none;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 18px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.pagehead__cta:hover{background:var(--accent);color:#fff}
.pagehead__cta i{font-style:normal;transition:transform .3s var(--ease)}
.pagehead__cta:hover i{transform:translateX(4px)}
.openings-lede{
  color:var(--muted-dark);font-size:clamp(14.5px,1.5vw,16px);
  line-height:1.7;margin-top:16px;max-width:64ch;
}
.openings-total{
  margin-top:14px;color:var(--muted-dark);font-size:15px;letter-spacing:.01em;
}
.openings-total b{color:var(--accent);font-weight:800}

/* ============================================================
   JOB ACTIONS (cards) + APPLICATION FORM
   ============================================================ */
.job__actions{display:flex;gap:20px;align-items:center;margin-top:16px;flex-wrap:wrap}
.job__actions .job__view{margin-top:0}
.job__apply-btn{
  display:inline-flex;align-items:center;background:var(--accent);color:#fff;
  text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:11px 24px;
}
.job__apply-btn:hover{background:#B80018}
.job__apply-btn--lg{width:100%;justify-content:center;padding:15px;margin-bottom:12px}

.apply-form{max-width:780px}
.apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.af{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.af--full{grid-column:1/-1}
/* .af is display:flex, which otherwise beats the hidden attribute. */
.af[hidden]{display:none}
.af > span,.af__label{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--muted-dark);
}
.af input,.af textarea,.af select{
  width:100%;background:var(--surface-2);border:1px solid var(--line-dark);
  color:var(--on-surface);font:inherit;font-size:15px;padding:12px 13px;
}
.af input:focus,.af textarea:focus,.af select:focus{outline:none;border-color:var(--accent)}
.af select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  /* Caret drawn in, because the native one cannot be themed. */
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 21px) 55%,calc(100% - 16px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.af textarea{resize:vertical}
.cvpick{
  display:flex;align-items:center;gap:12px;margin-top:8px;padding:16px;
  border:1px dashed var(--line-dark);background:var(--surface-2);cursor:pointer;
  color:var(--muted-dark);transition:border-color .2s var(--ease);
}
.cvpick:hover{border-color:var(--accent)}
.cvpick__icon{font-size:22px;color:var(--on-surface);line-height:1}
.cvpick--ok{border-style:solid;border-color:#0F7B4F;color:var(--on-surface)}
.cvpick--err{border-color:var(--accent);color:var(--accent)}
.apply-err{
  margin:16px 0 0;padding:11px 13px;background:rgba(214,0,28,.12);
  border-left:3px solid var(--accent);color:var(--accent);font-size:13.5px;line-height:1.5;
}
.apply-submit{
  position:relative;margin-top:22px;background:var(--accent);color:#fff;border:0;
  font:inherit;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 42px;cursor:pointer;transition:background .2s var(--ease);
}
.apply-submit:hover{background:#B80018}
.apply-submit:disabled{opacity:.85;cursor:default}
.apply-submit[aria-busy="true"] .apply-submit__label{visibility:hidden}
.apply-submit__spin{
  display:none;position:absolute;top:50%;left:50%;width:16px;height:16px;
  margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:apply-spin .7s linear infinite;
}
.apply-submit[aria-busy="true"] .apply-submit__spin{display:block}
@keyframes apply-spin{to{transform:rotate(360deg)}}
.apply-note{margin-top:18px;color:var(--muted-dark);font-size:12px;line-height:1.6;max-width:62ch}
.apply-done h2{color:var(--on-surface);font-size:clamp(24px,3vw,34px);margin-bottom:14px}
.apply-done p{color:var(--muted-dark);font-size:16px;line-height:1.7;margin-bottom:22px;max-width:56ch}
@media (max-width:600px){ .apply-grid{grid-template-columns:1fr} }

/* ============================================================
   CREDITS (developer page)
   ============================================================ */
.credits{
  display:flex;gap:clamp(24px,4vw,48px);align-items:center;flex-wrap:wrap;
  padding-bottom:clamp(32px,5vw,56px);border-bottom:1px solid var(--line-dark);
  margin-bottom:clamp(32px,5vw,56px);
}
.credits__mark{flex:0 0 auto;background:#fff;padding:20px 26px;border:1px solid var(--line-dark)}
.credits__mark img{height:52px;width:auto;display:block}
.credits__body{flex:1;min-width:280px}
.credits__bio{color:var(--on-surface);font-size:clamp(15px,1.7vw,18px);line-height:1.7;max-width:64ch;margin-bottom:18px}
.credits__url{color:var(--accent);text-decoration:none;font-weight:700;letter-spacing:.04em;font-size:16px}
.credits__url i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
.credits__url:hover i{transform:translateX(5px)}
.credits__h2{color:var(--on-surface);font-size:clamp(20px,2.4vw,28px);margin-bottom:22px}
.credits__app{
  display:flex;gap:clamp(20px,3vw,34px);align-items:center;flex-wrap:wrap;
  border:1px solid var(--line-dark);background:var(--surface-2);padding:clamp(22px,3vw,34px);
}
.credits__app-logo{
  flex:0 0 auto;width:104px;height:104px;background:#fff;border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;padding:10px;
}
.credits__app-logo img{max-width:100%;max-height:100%;object-fit:contain}
.credits__app-body{flex:1;min-width:260px}
.credits__app-body h3{color:var(--on-surface);font-size:22px;margin-bottom:8px}
.credits__app-body p{color:var(--muted-dark);font-size:14.5px;line-height:1.7;margin-bottom:16px;max-width:64ch}
.foot__legal a{color:var(--muted-dark);text-decoration:underline;text-underline-offset:2px}
@media (max-width:560px){ .credits__mark{width:100%} }

/* ============================================================
   PRIMARY NAV v2 - four items, mega menus
   The ribbon carries only About us / What we do / Careers / Contact.
   Everything else moved into a dropdown or the utility row.
   ============================================================ */

/* anchors must clear the fixed nav */
[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}

.nav__util{
  color:var(--fg);text-decoration:none;font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
  padding:8px 0;opacity:.6;transition:opacity .2s var(--ease),color .2s var(--ease);
}
.nav__util:hover,.nav__util[aria-current="page"]{opacity:1;color:var(--accent)}
.nav__tools{gap:14px}

.nav__ribbon{position:relative}
.nav__ribbon .nav__links{gap:clamp(18px,2.6vw,44px)}
.nav__item{position:static;display:flex;align-items:center;height:var(--nav-rib-h)}

.nav__trigger{
  display:inline-flex;align-items:center;gap:8px;height:100%;
  color:#fff;text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap;
  letter-spacing:.05em;text-transform:uppercase;position:relative;
}
.nav__trigger::after{
  content:"";position:absolute;left:0;right:100%;bottom:13px;height:2px;
  background:#fff;transition:right .3s var(--ease);
}
.nav__item:hover .nav__trigger::after,
.nav__item:focus-within .nav__trigger::after,
.nav__item.is-open .nav__trigger::after,
.nav__trigger[aria-current="page"]::after{right:0}

.nav__caret{
  width:6px;height:6px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease);opacity:.85;
}
.nav__item:hover .nav__caret,
.nav__item.is-open .nav__caret{transform:translateY(1px) rotate(-135deg)}

/* ---------- the dropped panel ---------- */
.mega{
  position:absolute;top:100%;left:0;right:0;z-index:90;
  background:var(--paper);border-bottom:3px solid var(--accent);
  box-shadow:0 26px 48px rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s var(--ease),transform .26s var(--ease),visibility .22s;
}
.nav__item.is-open > .mega{opacity:1;visibility:visible;transform:none}
@media (hover:hover){
  .nav__item:hover > .mega,
  .nav__item:focus-within > .mega{opacity:1;visibility:visible;transform:none}
}
/* on a coarse pointer only an explicit tap opens it (site.js) */
@media (pointer:coarse){
  .nav__item:hover > .mega{opacity:0;visibility:hidden;transform:translateY(-10px)}
  .nav__item.is-open > .mega{opacity:1;visibility:visible;transform:none}
}

.mega__inner{
  display:grid;grid-template-columns:1fr minmax(250px,.5fr);
  gap:clamp(28px,4vw,72px);padding-block:clamp(28px,3.2vw,46px);align-items:start;
}
.mega__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,48px)}
.mega__cols--1{grid-template-columns:1fr;max-width:420px}

.mega__label{
  font-size:10.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--accent);
  padding-bottom:11px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.mega__link{
  display:block;text-decoration:none;color:var(--fg);
  padding:10px 0;transition:color .2s var(--ease),padding-left .25s var(--ease);
}
.mega__link > span{display:block;font-size:15px;font-weight:700;line-height:1.3}
.mega__link small{
  display:block;font-size:12.5px;font-weight:500;color:var(--muted);
  line-height:1.5;margin-top:3px;
}
.mega__link:hover{color:var(--accent);padding-left:7px}
.mega__link:hover small{color:var(--muted)}

.mega__feature{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(190px,17vw,250px);background:var(--ink);text-decoration:none;
}
.mega__feature-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.58;transition:transform .7s var(--ease),opacity .4s var(--ease);
}
.mega__feature:hover .mega__feature-img{transform:scale(1.06);opacity:.7}
.mega__feature::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,11,0) 28%,rgba(7,9,11,.88) 100%)}
.mega__feature-body{position:relative;z-index:2;padding:clamp(18px,2vw,26px);color:#fff;width:100%}
.mega__feature-kicker{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;opacity:.8;margin-bottom:9px;
}
.mega__feature-t{display:block;font-size:clamp(18px,1.7vw,22px);font-weight:800;line-height:1.18;letter-spacing:-.015em}
.mega__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.mega__go i{font-style:normal;transition:transform .3s var(--ease)}
.mega__feature:hover .mega__go i{transform:translateX(5px)}

/* ---------- mobile panel: accordions ---------- */
.panel__group{border-bottom:1px solid var(--line-dark)}
.panel__acc{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  color:var(--on-surface);font-size:clamp(26px,6.4vw,40px);font-weight:700;
  letter-spacing:-.02em;padding:14px 0;text-align:left;line-height:1.15;
}
.panel__acc i{
  width:12px;height:12px;flex:none;
  border-right:2px solid var(--on-surface);border-bottom:2px solid var(--on-surface);
  transform:translateY(-3px) rotate(45deg);opacity:.65;transition:transform .25s var(--ease);
}
.panel__acc[aria-expanded="true"] i{transform:translateY(2px) rotate(-135deg);opacity:1}
.panel__sub{padding:0 0 18px}
.panel__sub[hidden]{display:none}
.panel__links .panel__sub a{
  display:block;color:var(--muted-dark);font-size:16px;font-weight:600;letter-spacing:0;
  padding:9px 0;border-bottom:0;text-decoration:none;
}
.panel__links .panel__sub a:hover{color:var(--on-surface)}
.panel__sublabel{
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:18px 0 2px;
}

/* ============================================================
   ABOUT v2 - image led, sits directly under the hero
   ============================================================ */
.about2{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,5vw,80px);align-items:center}
.about2__media{position:relative}
.about2__media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 60%;display:block}
.about2__badge{
  position:absolute;left:0;bottom:0;background:var(--accent);color:#fff;
  padding:clamp(16px,2vw,24px) clamp(18px,2.2vw,28px);max-width:82%;
}
.about2__badge b{display:block;font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1}
.about2__badge span{
  display:block;font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;opacity:.9;margin-top:8px;
}
.about2__text h2{margin-bottom:24px}
.about2__text p:not(.eyebrow){color:var(--muted);margin-bottom:18px;font-size:clamp(16px,1.7vw,18px)}
.about2__facts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:30px;
}
.about2__facts > div{background:var(--paper);padding:18px 20px}
.about2__facts dt{
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;
}
.about2__facts dd{font-size:15px;font-weight:600;line-height:1.45}
.about2__more{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;text-decoration:none;
  color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.about2__more i{font-style:normal;transition:transform .3s var(--ease)}
.about2__more:hover i{transform:translateX(6px)}
@media (max-width:900px){
  .about2{grid-template-columns:1fr}
  .about2__media img{aspect-ratio:16/10}
}

/* ============================================================
   WHAT WE DO - image tiles on the home page
   ============================================================ */
.wwd__head{
  display:grid;grid-template-columns:1fr minmax(280px,.72fr);gap:clamp(28px,4vw,64px);
  align-items:end;margin-bottom:clamp(34px,4vw,54px);
}
.wwd__head > p{color:var(--muted-dark);font-size:clamp(15px,1.6vw,17.5px);line-height:1.7}
.section--dark .wwd__head > p{color:var(--muted-dark)}
@media (max-width:900px){ .wwd__head{grid-template-columns:1fr;gap:20px} }

.wwd{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark)}
.wwd__tile{
  position:relative;display:block;overflow:hidden;text-decoration:none;color:#fff;
  min-height:clamp(280px,27vw,360px);background:var(--ink-2);
}
.wwd__img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:grayscale(.3) brightness(.55);transform:scale(1.02);
  transition:transform .8s var(--ease),filter .5s var(--ease);
}
.wwd__tile:hover .wwd__img,.wwd__tile:focus-visible .wwd__img{transform:scale(1.08);filter:grayscale(0) brightness(.68)}
.wwd__tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,11,.05) 30%,rgba(7,9,11,.9) 100%);
}
.wwd__body{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(22px,2.6vw,34px);
}
.wwd__tag{
  align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  padding:5px 10px;margin-bottom:auto;background:var(--accent);color:#fff;
}
.wwd__tag--grp{background:rgba(255,255,255,.15);color:#fff}
.wwd__tile h3{font-size:clamp(20px,2.2vw,26px);margin:22px 0 10px;line-height:1.15}
.wwd__tile p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.76);max-width:36ch}
.wwd__arrow{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#fff;opacity:.85;
}
.wwd__arrow i{font-style:normal;transition:transform .3s var(--ease)}
.wwd__tile:hover .wwd__arrow i{transform:translateX(6px)}
.wwd__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(28px,3.4vw,44px);
}
.wwd__note{color:var(--muted-dark);font-size:14px;max-width:62ch;line-height:1.7}
@media (max-width:1000px){ .wwd{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .wwd{grid-template-columns:1fr} }

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.svcindex{background:var(--sand);border-bottom:1px solid var(--line);padding-block:clamp(34px,4.4vw,58px)}
.svcindex__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svcindex__col{background:var(--paper);padding:clamp(20px,2.4vw,30px)}
.svcindex__col h2{
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  padding-bottom:13px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.svcindex__col a{
  display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--fg);
  font-size:15px;font-weight:600;padding:9px 0;transition:color .2s var(--ease),padding-left .25s var(--ease);
}
.svcindex__col a b{color:var(--muted);font-size:11.5px;font-weight:800;letter-spacing:.08em;flex:none}
.svcindex__col a:hover{color:var(--accent);padding-left:6px}
@media (max-width:900px){ .svcindex__grid{grid-template-columns:1fr} }

/* the capability numbers band */
.capband{background:var(--surface);color:var(--on-surface);padding-block:clamp(44px,5.4vw,72px)}
.capband__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark)}
.capband__cell{background:var(--surface);padding:clamp(22px,2.6vw,32px)}
.capband__cell b{display:block;font-size:clamp(30px,4vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1}
.capband__cell span{
  display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-dark);margin-top:12px;line-height:1.5;
}
@media (max-width:900px){ .capband__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .capband__grid{grid-template-columns:1fr} }

/* one service */
.svc{padding-block:clamp(54px,7vw,100px);border-top:1px solid var(--line)}
.svc--alt{background:var(--sand)}
.svc__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,80px);align-items:start}
.svc__grid > *{min-width:0}
.tblwrap{max-width:100%}
.svc--flip .svc__media{order:2}
.svc__media{position:relative;overflow:hidden;background:var(--ink)}
@media (min-width:901px){
  .svc__media{position:sticky;top:calc(var(--nav-h) + 28px)}
}
.svc__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.svc__cap{
  position:absolute;left:0;bottom:0;right:0;padding:14px 18px;color:#fff;font-size:12px;
  letter-spacing:.06em;background:linear-gradient(180deg,rgba(7,9,11,0),rgba(7,9,11,.85));
}
.svc__eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:12px;
}
.svc__eyebrow b{color:var(--muted);font-weight:800}
.svc h2{font-size:clamp(26px,3.4vw,42px);margin-bottom:18px}
.svc__lede{color:var(--muted);font-size:clamp(16px,1.7vw,18.5px);line-height:1.7;margin-bottom:26px}
.svc__list{display:grid;gap:10px;margin-bottom:28px}
.svc__list li{position:relative;padding-left:22px;font-size:15px;line-height:1.6}
.svc__list li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:2px;background:var(--accent)}
.svc__list li b{font-weight:700}
.svc__sub{
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:26px 0 12px;
}
.svc__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px}
.svc__fact{background:var(--paper);padding:16px 18px;outline:1px solid var(--line)}
.svc--alt .svc__fact{background:var(--sand)}
.svc__fact b{display:block;font-size:clamp(19px,2.2vw,26px);font-weight:800;letter-spacing:-.02em;color:var(--accent);line-height:1.1}
.svc__fact span{
  display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:7px;line-height:1.45;
}
@media (max-width:900px){
  .svc__grid{grid-template-columns:1fr}
  .svc--flip .svc__media{order:0}
}

/* spec + record tables */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.tbl th,.tbl td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl thead th{
  background:var(--surface-3);color:var(--on-surface);font-size:10.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
}
.tbl tbody th{font-weight:700;white-space:normal}
.tbl td{color:var(--muted)}
.tbl td b{color:var(--accent);font-weight:800}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
/* Tables carrying sentences rather than figures wrap instead of scrolling. */
.tbl--prose{min-width:0}
.tbl--prose th,.tbl--prose td{white-space:normal;line-height:1.6;vertical-align:top}
.tbl--prose tbody th{width:30%;min-width:130px}

/* compact "also in scope" cards */
.alsogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark)}
.also{background:var(--surface);padding:clamp(24px,2.8vw,34px);border-top:3px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)}
.also:hover{border-top-color:var(--accent);background:var(--surface-3)}
.also h3{font-size:19px;color:var(--on-surface);margin-bottom:11px;line-height:1.2}
.also p{color:var(--muted-dark);font-size:14px;line-height:1.65}
@media (max-width:1000px){ .alsogrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .alsogrid{grid-template-columns:1fr} }

/* closing call to action */
.svccta{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:center}
.svccta h2{margin-bottom:18px}
.svccta p{opacity:.9;font-size:clamp(16px,1.7vw,18px);line-height:1.7}
.svccta__acts{display:flex;flex-wrap:wrap;gap:14px}
.svccta .btn--solid{background:#fff;color:var(--ink)}
.svccta .btn--solid:hover{background:var(--ink);color:#fff}
@media (max-width:820px){ .svccta{grid-template-columns:1fr} }

/* ============================================================
   SMALL SCREENS - nav top bar breathing room
   Must sit after the mega-menu block above: an earlier @media rule
   cannot override a later plain one at equal specificity.
   ============================================================ */
@media (max-width:980px){
  .nav__tools{gap:6px}
}
@media (max-width:430px){
  :root{--gut:16px}
  .brand{gap:10px}
  .brand__mark{width:31px}
  .brand__text strong{font-size:16px}
  .langdrop{margin-left:0;padding-left:9px}
  .nav__toggle{margin-right:-8px;width:40px}
}
@media (max-width:380px){
  .brand{gap:8px}
  .brand__mark{width:28px}
  .brand__text strong{font-size:14.5px}
  .nav__theme{width:34px;height:34px}
}

/* Six fixed 44px slide ticks plus the pause button overflow a 360px phone,
   so let the ticks share whatever width is actually left. */
@media (max-width:560px){
  .chero__dots{min-width:0;flex:1 1 0%}
  .cdot{width:auto;flex:1 1 0%;min-width:14px}
}

/* ============================================================
   ACCORDIONS (careers)
   Native <details>, so it opens with no JavaScript and keyboard
   and screen-reader behaviour come for free.
   ============================================================ */
.acc{display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.acc__item{background:var(--surface)}
.acc__q{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:clamp(17px,2.1vw,23px) clamp(16px,2vw,24px);
  font-size:clamp(16px,1.9vw,19px);font-weight:700;color:var(--on-surface);
  transition:background .2s var(--ease);
}
.acc__q::-webkit-details-marker{display:none}
.acc__q::after{
  content:"";margin-left:auto;flex:none;width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.acc__item[open] > .acc__q::after{transform:rotate(-135deg)}
.acc__q:hover{background:var(--surface-3)}
.acc__q:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.acc__a{padding:0 clamp(16px,2vw,24px) clamp(22px,2.6vw,30px)}
.acc__a > .cards,.acc__a > .disc,.acc__a > .apply{margin-top:0}

/* positions rendered as accordion rows, so the whole list fits one screen */
.job--acc{padding:0;border-left:3px solid transparent}
.job--acc[open]{border-left-color:var(--accent)}
.job__sum{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;
  gap:20px;flex-wrap:wrap;padding:clamp(20px,2.6vw,28px) clamp(18px,2.4vw,30px);
  transition:background .2s var(--ease);
}
.job__sum::-webkit-details-marker{display:none}
.job__sum:hover{background:var(--surface-3)}
.job__sum:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.job__sum-main{flex:1;min-width:200px}
.job__sum-title{
  display:block;font-size:clamp(18px,2.2vw,23px);font-weight:700;
  color:var(--on-surface);line-height:1.2;margin-bottom:6px;letter-spacing:-.02em;
}
.job__sum::after{
  content:"";flex:none;align-self:center;width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.job--acc[open] > .job__sum::after{transform:rotate(-135deg)}
.job__body{padding:0 clamp(18px,2.4vw,30px) clamp(22px,2.6vw,30px)}
@media (max-width:560px){
  /* The title column's 200px floor plus the count and the chevron overflowed a
     390px screen, so the whole count block wrapped under the meta. Letting the
     title get narrower keeps title | count | chevron on one line. */
  .job__sum{gap:12px;padding-inline:16px}
  .job__sum-main{min-width:110px}
  .job__count{width:104px}
  .job__vac{padding:5px 8px;font-size:11px;letter-spacing:.06em}
}

/* ============================================================
   APPLICATION FORM — grouped sections + experience repeater
   ============================================================ */
.afs{border:0;padding:0;margin:0 0 clamp(26px,3.4vw,40px);min-width:0}
.afs__leg{
  padding:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:var(--accent);margin-bottom:16px;
}
.afs__opt{color:var(--muted-dark);font-weight:700}
.afs__hint{color:var(--muted-dark);font-size:13.5px;line-height:1.6;margin:0 0 18px;max-width:66ch}
.afs__sub{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--on-surface);margin:4px 0 12px;
}
.apply-grid--3{grid-template-columns:repeat(3,1fr)}
.af__hint{
  font-size:12px;color:var(--muted-dark);line-height:1.5;
  /* .af > span is the uppercase field label; a hint is a sentence, not one. */
  text-transform:none;letter-spacing:0;font-weight:400;
}

.exp{border:1px solid var(--line-dark);padding:clamp(14px,2vw,20px);margin-bottom:14px}
.exp__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.exp__n{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--muted-dark)}
.exp__rm{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--accent);padding:4px 2px;
}
.exp__rm:hover{text-decoration:underline}
.exp__add{
  border:1px dashed var(--line-dark);color:var(--on-surface);font-weight:700;
  font-size:13px;letter-spacing:.06em;padding:13px 20px;width:100%;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.exp__add:hover{border-color:var(--accent);background:var(--surface-3)}
.exp__total{
  display:flex;align-items:baseline;gap:10px;margin:0 0 18px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--muted-dark);
}
.exp__total b{font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;color:var(--accent);font-weight:800;line-height:1}
@media (max-width:760px){ .apply-grid--3{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- News
   A reading column, not a grid. Announcements are prose of uneven length,
   and cards would either crop them or leave most tiles half empty. */
/* The reading column, down the middle of the page. It was pinned to the
   left of a 1240px wrap, which left a third of the screen empty and gave a
   picture that breaks out of the column nowhere sensible to break out to
   (20 Sep 2026). The head above it is held to the same column. */
.news{max-width:760px;margin-inline:auto}
.pagehead--news h1{max-width:760px;margin-inline:auto}
/* News leads with the news. Its head carries one line and no lede, and the
   list starts directly under it rather than a screen further down (user,
   20 Sep 2026). */
.pagehead--news{padding-bottom:clamp(14px,1.8vw,20px)}
.pagehead--news h1{margin-bottom:0}
.section--news{padding-top:clamp(18px,2.4vw,26px);padding-bottom:clamp(40px,6vw,72px)}
.news__status{color:var(--muted)}
.news__item{padding:34px 0;border-bottom:1px solid var(--line)}
.news__item:first-child{padding-top:0}
.news__item:last-child{border-bottom:0;padding-bottom:0}
/* A post that leads with a photograph: it runs the width of the column,
   above the date and the headline. */
.news__banner{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;
  margin:0 0 20px}
.news__date{
  margin:0 0 8px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--accent);
}
.news__title{
  margin:0 0 10px;font-size:clamp(21px,2.6vw,27px);letter-spacing:-.02em;
  line-height:1.25;
}
.news__lede{margin:0 0 14px;font-size:16.5px;line-height:1.6;color:var(--ink)}
.news__body p{margin:0 0 14px;line-height:1.75;color:var(--muted)}
.news__body p:last-child{margin-bottom:0}

/* The photograph somebody was sent here to look at, from Command's list of
   the site's pictures. It rings for a few seconds and then is a picture
   again. */
.is-found{outline:3px solid var(--accent);outline-offset:-3px;
  animation:found 1.2s ease-in-out 2}
@keyframes found{0%,100%{outline-color:var(--accent)}50%{outline-color:transparent}}

/* --------------------------------------------- News: showcase + spotlight
   Three picture cards and a dated list beside them, the way the corporate
   site leads its news - but set in this site's own type. Nothing here is
   larger than the page's own headings: the pictures do the leading, not
   the letters (user, 20 Sep 2026: "do not use exaggerated fonts and
   texts"). Both halves link into the list below. */
.lead{
  display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);
  gap:34px;padding-bottom:30px;margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.lead__label{
  margin:0 0 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--accent);
}
.lead__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lead__card{text-decoration:none;color:inherit;display:block}
.lead__shot{
  display:block;aspect-ratio:4/3;background-size:cover;background-position:center;
  background-color:#eceef0;
}
.lead__t{
  display:block;margin-top:10px;font-size:14px;line-height:1.45;
  font-weight:600;color:var(--ink);
}
.lead__card:hover .lead__t{color:var(--accent)}
.lead__d{display:block;margin-top:4px;font-size:11.5px;color:var(--muted)}
.lead__list{margin:0;padding:0;list-style:none}
.lead__list li{padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.lead__list li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.lead__list a{text-decoration:none;color:inherit;display:block}
.lead__date{
  display:block;font-size:11px;letter-spacing:.08em;font-weight:700;
  color:var(--accent);margin-bottom:3px;
}
.lead__h{display:block;font-size:13.5px;line-height:1.5;color:var(--ink)}
.lead__list a:hover .lead__h{color:var(--accent)}
@media (max-width:860px){
  .lead{grid-template-columns:1fr;gap:26px}
  .lead__cards{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .lead__cards{grid-template-columns:1fr}
}

/* ------------------------------------------------------ News blocks
   A post is laid out in Command as blocks - headings, paragraphs,
   photographs, grids, embeds, quotes, rules, buttons - and this is the
   other half of that: every class here is written by assets/js/news.js
   from one block, and the editor's preview is drawn to match (user,
   20 Sep 2026). Alignment and colour come from the block; the widths
   let a picture break out of the text column the way a feature does. */
.nb__h{margin:26px 0 10px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
h3.nb__h{font-size:clamp(19px,2.2vw,25px)}
h4.nb__h{font-size:clamp(16px,1.7vw,19px)}
.news__body .nb__p{margin:0 0 14px}
.news__body .nb__p--lead{font-size:clamp(16px,1.7vw,18.5px);line-height:1.65;color:var(--ink)}
.news__body .nb__p--small{font-size:13px;line-height:1.7}
.news__body .is-center{text-align:center}
.news__body .is-right{text-align:right}
.news__body .is-justify{text-align:justify}

.nb__fig{margin:22px 0}
.nb__fig img{display:block;width:100%;height:auto}
/* Out of the text column and back onto the middle of the page. Centring
   on the element itself rather than on the column is what keeps a full
   width picture from sliding off the left edge: the column is padded and
   is not where the middle of the screen is. */
.nb__fig.is-wide{width:min(116%,92vw);max-width:none;margin-left:50%;transform:translateX(-50%)}
.nb__fig.is-full{width:94vw;max-width:94vw;margin-left:50%;transform:translateX(-50%)}
.nb__cap{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.nb__fig.is-center .nb__cap{text-align:center}
.nb__fig.is-right .nb__cap{text-align:right}

.nb__grid{display:grid;gap:10px}
/* Every tile the same shape, whatever the photographs are: a grid whose
   rows each take their own picture's proportions reads as a mistake. */
.nb__grid img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.nb__grid--2{grid-template-columns:repeat(2,1fr)}
.nb__grid--3{grid-template-columns:repeat(3,1fr)}
.nb__grid--4{grid-template-columns:repeat(4,1fr)}

/* Words beside a photograph. Two columns that become one on a phone,
   with the picture first whichever side it was on: a paragraph pushed
   under its own photograph still reads in order. */
.nb__split-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.nb__split-pic img{display:block;width:100%;height:auto}
.news__body .nb__split-words{line-height:1.75;color:var(--muted)}
@media (max-width:700px){
  .nb__split-in{grid-template-columns:1fr;gap:14px}
  .nb__split.is-flipped .nb__split-pic{order:-1}
}

.nb__video{display:block;width:100%;height:auto;background:#0b0e11}
.nb__embed{position:relative;padding-top:56.25%;background:#0b0e11}
.nb__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.nb__quote{
  margin:22px 0;padding:2px 0 2px 18px;border-left:3px solid var(--accent);
}
.news__body .nb__quote p{margin:0;font-size:clamp(16px,1.8vw,19px);line-height:1.6;
  font-style:italic;color:var(--ink)}
.nb__quote cite{
  display:block;margin-top:8px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;font-style:normal;font-weight:700;color:var(--muted);
}

.nb__rule{margin:26px 0;border:0;border-top:1px solid var(--line)}

.news__body .nb__btnwrap{margin:18px 0}
.nb__btn{
  display:inline-block;padding:14px 24px;background:var(--accent);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;
}
.nb__btn:hover{filter:brightness(1.08)}

@media (max-width:700px){
  /* A grid of four on a phone is four stamps. Two across is the floor. */
  .nb__grid--3,.nb__grid--4{grid-template-columns:repeat(2,1fr)}
  /* The transform goes with the margin it compensates for, or the figure
     slides half its own width off the left of the phone. */
  .nb__fig.is-wide{width:100%;max-width:100%;margin-left:0;transform:none}
}

/* ---------------------------------------------------- Photograph cropper
   The frame is square and fixed, so what the applicant sees is exactly the
   1:1 image that gets stored. Cropping here rather than asking for a square
   file is the difference between a form people can finish and one they abandon. */
.afs__note{margin:0 0 14px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.cropper{
  width:260px;height:260px;margin:14px 0 0;overflow:hidden;
  border:1px solid var(--line);background:#F3F4F6;
}
.cropper__canvas{display:block;width:260px;height:260px;cursor:grab;touch-action:none}
.cropper__canvas:active{cursor:grabbing}
.cropper__controls{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:12px;max-width:420px;
}
.cropper__zoom{display:flex;align-items:center;gap:10px;flex:1;min-width:200px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cropper__zoom input{flex:1;accent-color:var(--accent)}
.cropper__clear{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:8px 14px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;
}
.cropper__clear:hover{border-color:var(--ink)}
.cvpick__text.is-ok{color:#2E7D5B}
.cvpick__text.is-err{color:var(--accent)}