/* BAUPK UMI — main stylesheet.
   Loaded non-blocking; critical.css (inlined) already supplied the tokens,
   reset, header and hero, so this file covers everything below the fold. */

/* ================================= Hero — "Satu Pintu Layanan" ============ */
/* The device states the tagline rather than decorating around it: six service
   glyphs orbit one hub, a pulse runs down every spoke into it, and the hub
   answers with a sonar ring. Pure SVG driven by CSS transforms, so the whole
   thing composites on the GPU. */

.hero__aurora{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero__aurora span{position:absolute;display:block;border-radius:50%;will-change:transform}
/* Radial gradients rather than blur(): the softness is baked into the paint,
   so no filter has to run every frame. */
.hero__aurora span:nth-child(1){width:60vw;height:60vw;left:-16vw;top:-24vw;
  background:radial-gradient(circle,rgba(18,161,100,.55),transparent 66%)}
.hero__aurora span:nth-child(2){width:46vw;height:46vw;right:-8vw;bottom:-20vw;
  background:radial-gradient(circle,rgba(240,180,41,.24),transparent 68%)}
.hero__aurora span:nth-child(3){width:38vw;height:38vw;left:38%;top:-14vw;
  background:radial-gradient(circle,rgba(124,201,164,.3),transparent 70%)}

.orbit__glow{transform-box:view-box;transform-origin:200px 200px}
.orbit__ring{fill:none;stroke:rgba(255,255,255,.15);stroke-width:1}
.orbit__ring--main{stroke:rgba(255,255,255,.3);stroke-dasharray:2 11;
  transform-box:view-box;transform-origin:200px 200px}
.orbit__wave{fill:none;stroke:rgba(240,180,41,.55);stroke-width:1.5;opacity:0;
  transform-box:fill-box;transform-origin:center}
.orbit__spoke{stroke:var(--gold-400);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:16 240;stroke-dashoffset:0;opacity:0}
.orbit__carrier{transform-box:view-box;transform-origin:200px 200px}
.orbit__node-spin{transform-box:fill-box;transform-origin:center}
.orbit__node-disc{fill:rgba(4,51,31,.72);stroke:rgba(255,255,255,.4);stroke-width:1.5}
.orbit__node-icon{fill:#fff;opacity:.92}
/* The logo needs its own ground: the aurora and the rings behind it shift
   constantly, and a mark that changes contrast every few seconds reads as
   unstable. The disc holds it at a fixed tone. */
.orbit__hub-disc{fill:rgba(3,42,28,.62)}
.orbit__hub-rim{fill:none;stroke:rgba(240,180,41,.45);stroke-width:1.4}
.orbit__logo{opacity:.98}

/* Stagger lives here, not in style="" attributes on the elements. The site's
   CSP puts a nonce on style-src, and a nonce makes browsers ignore
   'unsafe-inline' — which drops every style attribute on the page. Anything
   derived purely from an element's position is therefore keyed by :nth-child;
   values that are real data (the footer network's link lengths) go into a
   nonced <style> block instead. See README §14. */
.orbit__sonar .orbit__wave:nth-child(2){--delay:1.6s}
.orbit__sonar .orbit__wave:nth-child(3){--delay:3.2s}
.orbit__spokes .orbit__spoke:nth-child(2){--delay:.55s}
.orbit__spokes .orbit__spoke:nth-child(3){--delay:1.1s}
.orbit__spokes .orbit__spoke:nth-child(4){--delay:1.65s}
.orbit__spokes .orbit__spoke:nth-child(5){--delay:2.2s}
.orbit__spokes .orbit__spoke:nth-child(6){--delay:2.75s}
.orbit__carrier .orbit__node:nth-child(2){--delay:.4s}
.orbit__carrier .orbit__node:nth-child(3){--delay:.8s}
.orbit__carrier .orbit__node:nth-child(4){--delay:1.2s}
.orbit__carrier .orbit__node:nth-child(5){--delay:1.6s}
.orbit__carrier .orbit__node:nth-child(6){--delay:2s}
/* Headline words. Titles run well under 14 words; anything beyond simply keeps
   the last delay, which is the right failure mode. */
.hero__word:nth-child(1){--i:0}   .hero__word:nth-child(2){--i:1}
.hero__word:nth-child(3){--i:2}   .hero__word:nth-child(4){--i:3}
.hero__word:nth-child(5){--i:4}   .hero__word:nth-child(6){--i:5}
.hero__word:nth-child(7){--i:6}   .hero__word:nth-child(8){--i:7}
.hero__word:nth-child(9){--i:8}   .hero__word:nth-child(10){--i:9}
.hero__word:nth-child(11){--i:10} .hero__word:nth-child(12){--i:11}
.hero__word:nth-child(13){--i:12} .hero__word:nth-child(n+14){--i:13}

.hero__ticker-track{will-change:transform}
.hero__slide .hero__img{will-change:transform}

@media (prefers-reduced-motion:no-preference){
  .hero__aurora span:nth-child(1){animation:auroraA 26s ease-in-out infinite alternate}
  .hero__aurora span:nth-child(2){animation:auroraB 32s ease-in-out infinite alternate}
  .hero__aurora span:nth-child(3){animation:auroraC 22s ease-in-out infinite alternate}

  /* One rotation shared by the carrier and, reversed, by every glyph — that is
     what keeps the icons upright while the ring turns. */
  .orbit__carrier{animation:orbitSpin 54s linear infinite}
  .orbit__node-spin{animation:orbitSpin 54s linear infinite reverse}
  .orbit__ring--main{animation:orbitSpin 90s linear infinite reverse}
  .orbit__glow{animation:hubBreathe 6s ease-in-out infinite}
  .orbit__wave{animation:sonar 4.8s ease-out infinite;animation-delay:var(--delay,0s)}
  .orbit__spoke{animation:spokePulse 3.6s ease-in-out infinite;animation-delay:var(--delay,0s)}
  .orbit__node-disc{animation:nodePulse 4.2s ease-in-out infinite;animation-delay:var(--delay,0s);
    transform-box:fill-box;transform-origin:center}

  /* Headline lands word by word out of its own mask. */
  .hero__slide.is-active .hero__word>span{
    animation:wordRise .72s cubic-bezier(.19,1,.22,1) both;
    animation-delay:calc(.18s + var(--i) * .07s)}
  .hero__slide.is-active .hero__eyebrow{animation:heroRise .5s var(--ease) .08s both}
  .hero__slide.is-active .hero__actions{animation:heroRise .6s var(--ease) .52s both}
  .hero__slide.is-active .hero__img{animation:heroDrift 22s ease-out both}

  .hero__ticker-track{animation:tickerRun 48s linear infinite}
  .hero:hover .hero__ticker-track{animation-play-state:paused}

  /* The dot doubles as the autoplay clock, so it stops when autoplay does. */
  .hero__dot.is-active .hero__dot-fill{animation:dotTimer 7s linear forwards}
  .hero.is-paused .hero__dot-fill{animation-play-state:paused}
}

/* Without the animation the mask would clip the words permanently. */
@media (prefers-reduced-motion:reduce){
  .hero__word{overflow:visible}
  .hero__dot.is-active .hero__dot-fill{width:100%}
}

@keyframes auroraA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,4vw,0) scale(1.12)}}
@keyframes auroraB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-7vw,-5vw,0) scale(1.18)}}
@keyframes auroraC{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4vw,6vw,0) scale(.9)}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes hubBreathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.14);opacity:1}}
/* Starts at scale 1 — i.e. on the hub rim — and stops short of the outer ring. */
@keyframes sonar{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.6);opacity:0}}
@keyframes spokePulse{
  0%{stroke-dashoffset:0;opacity:0}
  12%{opacity:1}
  80%{opacity:1}
  100%{stroke-dashoffset:-92;opacity:0}
}
@keyframes nodePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@keyframes wordRise{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroDrift{from{transform:scale(1.1) translate3d(1.5%,0,0)}to{transform:scale(1) translate3d(0,0,0)}}
@keyframes tickerRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes dotTimer{from{width:0}to{width:100%}}

/* Section headings reveal once as they scroll into view; the class is added by
   main.js only when IntersectionObserver is available, so nothing depends on it. */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);
    transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .reveal.is-visible{opacity:1;transform:none}
}

/* Turning off animation from the accessibility panel happens after the script
   has already marked elements as hidden-until-revealed. Without this, the
   global `transition:none` would freeze them at opacity 0 and the content
   would simply never appear. */
html.a11y-no-motion .reveal,
html.a11y-no-motion .hero__slide.is-active .hero__eyebrow,
html.a11y-no-motion .hero__slide.is-active .hero__actions,
html.a11y-no-motion .hero__word>span{
  opacity:1!important;transform:none!important
}
/* The headline masks each word for its entrance; with the animation removed
   the mask would simply hide them, so it has to be opened back up. */
html.a11y-no-motion .hero__word{overflow:visible}
html.a11y-no-motion .hero__dot.is-active .hero__dot-fill{width:100%}

/* ============================================================== Layout ==== */
.section{padding-block:var(--section-y)}
.section--services{background:var(--bg-soft)}
.section--articles{background:var(--bg-soft)}
.section--faq{background:var(--green-50)}
.section-sub{color:var(--muted);max-width:62ch;margin:0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap}
.section-head--compact{align-items:center;margin-bottom:1.25rem}
.section-title--rule{position:relative;padding-bottom:.6rem;margin-bottom:1.5rem;font-size:var(--step-2)}
.section-title--rule::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;background:var(--gold-500);border-radius:3px}
.link-more{font-size:var(--step--1);font-weight:700;color:var(--green-600)}
.link-more::after{content:" →"}

.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:start}
.content-layout--wide{grid-template-columns:minmax(0,1fr) 360px}
.page-body{max-width:1000px;margin-inline:auto}

.card-grid{display:grid;gap:clamp(1rem,.6rem + 1.4vw,1.75rem)}
.card-grid--2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card-grid--3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card-grid--4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* ============================================== Page hero (interior) ==== */
.page-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--green-800),var(--green-600));
  color:#fff;padding-block:clamp(2rem,1.4rem + 2.6vw,3.6rem)}
.page-hero__pattern{position:absolute;inset:0;opacity:.28;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.55) 1px,transparent 0);background-size:26px 26px;
  mask-image:linear-gradient(105deg,transparent 30%,#000 100%)}
.page-hero__title{position:relative;margin:.35rem 0 .3rem;font-size:var(--step-3);color:#fff;text-wrap:balance}
.page-hero__sub{position:relative;margin:0;max-width:70ch;color:rgba(255,255,255,.86)}

.breadcrumb{position:relative;font-size:var(--step--1)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0;color:rgba(255,255,255,.72)}
.breadcrumb li+li::before{content:"/";margin-right:.35rem;opacity:.5}
.breadcrumb a{color:rgba(255,255,255,.88)}
.breadcrumb a:hover{color:var(--gold-400)}
.breadcrumb [aria-current]{color:#fff;font-weight:600}

/* ================================================== Quick access strip ==== */
.quick-strip{position:relative;margin-top:-2.5rem;z-index:5;padding-bottom:var(--section-y)}
.quick-strip__head{margin-bottom:1.2rem;padding-top:3.2rem}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem;list-style:none;margin:0;padding:0}
.quick-card{display:flex;align-items:center;gap:.85rem;padding:1rem;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);height:100%}
.quick-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--green-300)}
.quick-card__icon{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:10px;
  background:var(--green-100);color:var(--green-700)}
.quick-card__icon svg{width:22px;height:22px}
.quick-card__icon img{width:26px;height:26px;object-fit:contain;background:none}
.quick-card__body{display:flex;flex-direction:column;min-width:0}
.quick-card__body strong{font-size:.92rem;color:var(--ink);line-height:1.3}
.quick-card__body small{font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick-card__arrow{width:18px;height:18px;margin-left:auto;flex:none;color:var(--green-500);opacity:0;
  transform:translateX(-4px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.quick-card:hover .quick-card__arrow{opacity:1;transform:translateX(0)}

/* ========================================================== Service UI ==== */
.service-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(1rem,.6rem + 1.4vw,1.75rem)}
.service-group{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.service-group:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service-group__head{--group-accent:var(--green-600);position:relative;padding:1.6rem 1.5rem 1.3rem;
  background:linear-gradient(150deg,color-mix(in srgb,var(--group-accent) 12%,#fff),#fff)}
.service-group__head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--group-accent)}
.service-group__icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:.9rem;border-radius:14px;
  background:var(--group-accent);color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--group-accent) 30%,transparent)}
.service-group__icon svg{width:26px;height:26px}
.service-group__title{font-size:var(--step-1);margin:0 0 .35rem}
.service-group__desc{margin:0;font-size:var(--step--1);color:var(--muted)}
.service-group__list{list-style:none;margin:0;padding:.6rem .9rem 1.2rem;flex:1}
.service-group__list a{display:flex;align-items:flex-start;gap:.55rem;padding:.55rem .6rem;border-radius:var(--radius-sm);
  font-size:.9rem;color:var(--ink-soft);transition:background .18s var(--ease),color .18s var(--ease)}
.service-group__list a:hover{background:var(--green-50);color:var(--green-700)}
.service-group__list svg{width:16px;height:16px;flex:none;margin-top:.28rem;color:var(--green-500)}

.service-block{margin-bottom:clamp(2rem,1.4rem + 2vw,3.4rem)}
.service-block__head{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.4rem}
.service-block__icon{--group-accent:var(--green-600);display:grid;place-items:center;width:54px;height:54px;flex:none;
  border-radius:14px;background:var(--group-accent);color:#fff}
.service-block__icon svg{width:26px;height:26px}

.service-card{display:flex;flex-direction:column;padding:1.5rem;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);height:100%;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green-300)}
.service-card__icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:1rem;border-radius:12px;
  background:var(--green-100);color:var(--green-700)}
.service-card__icon svg{width:23px;height:23px}
.service-card__title{font-size:1.03rem;margin:0 0 .45rem;color:var(--ink)}
.service-card__desc{margin:0 0 1rem;font-size:var(--step--1);color:var(--muted);flex:1}
.service-card__foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  padding-top:.85rem;border-top:1px dashed var(--line)}
.service-card__badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.76rem;color:var(--muted)}
.service-card__badge svg{width:14px;height:14px}
.service-card__more{font-size:.8rem;font-weight:700;color:var(--green-600)}
.service-card__more::after{content:" →"}

.service-section{margin-top:2.2rem;padding:1.6rem;background:var(--bg-soft);border-radius:var(--radius);border:1px solid var(--line)}
.service-section__title{display:flex;align-items:center;gap:.6rem;font-size:var(--step-1);margin:0 0 .9rem}
.service-section__title svg{width:22px;height:22px;color:var(--green-600)}

.service-aside{display:grid;gap:1.25rem;position:sticky;top:calc(var(--header-h) + 16px)}
.service-facts{padding:1.5rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.service-facts__title{font-size:var(--step-1);margin:0 0 1rem;padding-bottom:.6rem;border-bottom:2px solid var(--gold-500);display:inline-block}
.service-facts dl{margin:0}
.service-facts__row{padding:.7rem 0;border-bottom:1px dashed var(--line)}
.service-facts__row dt{display:flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.service-facts__row dt svg{width:15px;height:15px;color:var(--green-500)}
.service-facts__row dd{margin:.2rem 0 0;font-size:.94rem;color:var(--ink)}
.service-facts__actions{display:grid;gap:.6rem;margin-top:1.2rem}

/* ========================================================== Stats band ==== */
.stats-band{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--green-900),var(--green-700) 55%,var(--green-600));
  color:#fff;padding-block:clamp(2.2rem,1.6rem + 2.4vw,3.4rem)}
/* The dot lattice is the "UMI Connection" motif — a network of linked nodes. */
.stats-band__pattern{position:absolute;inset:0;opacity:.3;
  background-image:radial-gradient(circle at 1px 1px,rgba(240,180,41,.65) 1.4px,transparent 0);background-size:34px 34px}
.stats-band__grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.5rem;text-align:center}
.stat-tile__icon{display:inline-grid;place-items:center;width:48px;height:48px;margin-bottom:.6rem;border-radius:14px;
  background:rgba(255,255,255,.14);color:var(--gold-400)}
.stat-tile__icon svg{width:24px;height:24px}
.stat-tile__value{display:block;font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem);font-weight:800;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.stat-tile__label{display:block;margin-top:.4rem;font-size:var(--step--1);color:rgba(255,255,255,.8);letter-spacing:.02em}

/* =============================================================== Cards ==== */
.card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);height:100%;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green-300)}
.card__media{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:var(--bg-soft)}
.card__img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__img{transform:scale(1.05)}
.card__pin{position:absolute;top:.7rem;left:.7rem;display:grid;place-items:center;width:30px;height:30px;
  border-radius:8px;background:var(--gold-500);color:var(--green-900)}
.card__pin svg{width:16px;height:16px}
.card__body{display:flex;flex-direction:column;flex:1;padding:1.15rem 1.25rem 1.3rem}
.card__meta{display:flex;align-items:center;gap:.4rem;margin-bottom:.5rem;font-size:.76rem;color:var(--muted)}
.card__dot{opacity:.5}
.card__title{font-size:1.02rem;line-height:1.35;margin:0 0 .5rem}
.card__title a{color:var(--ink)}
.card__title a:hover{color:var(--green-600)}
.card__excerpt{margin:0 0 1rem;font-size:var(--step--1);color:var(--muted);flex:1}
.card__more{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;color:var(--green-600)}
.card__more svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.card:hover .card__more svg{transform:translateX(3px)}
.card--wide .card__title{font-size:var(--step-2)}
.card--wide .card__excerpt{font-size:var(--step-0)}
.card--compact{flex-direction:row;align-items:stretch}
.card--compact .card__media{aspect-ratio:1;width:120px;flex:none}
.card--compact .card__body{padding:.85rem 1rem}
.card--compact .card__title{font-size:.92rem}
.card--compact .card__excerpt,.card--compact .card__more{display:none}

.news-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1rem,.6rem + 1.4vw,1.75rem)}
.news-layout__grid{display:grid;gap:.9rem;align-content:start}

.chip{display:inline-flex;align-items:center;padding:.28rem .75rem;border-radius:999px;font-size:.74rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;background:var(--chip-accent,var(--green-600));color:#fff}
.chip:hover{color:#fff;filter:brightness(1.1)}
.chip--ghost{background:var(--green-100);color:var(--green-700);text-transform:none;letter-spacing:0;font-weight:600}
.chip--ghost:hover{background:var(--green-600);color:#fff}

/* ============================================================== Events ==== */
.event-list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.event-item{display:flex;gap:1rem;align-items:flex-start}
.event-item--card{padding:1.1rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);flex-wrap:wrap;transition:box-shadow .22s var(--ease),border-color .22s var(--ease)}
.event-item--card:hover{box-shadow:var(--shadow);border-color:var(--green-300)}
.event-item__date{display:grid;place-items:center;width:66px;padding:.55rem .3rem;flex:none;border-radius:var(--radius-sm);
  background:linear-gradient(160deg,var(--green-600),var(--green-800));color:#fff;line-height:1.1;text-align:center}
.event-item__date strong{font-size:1.5rem;font-weight:800}
.event-item__date em{font-style:normal;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-400)}
.event-item__date small{font-size:.66rem;opacity:.75}
.event-item__date--muted{background:var(--bg-soft);color:var(--muted)}
.event-item__date--muted em{color:var(--green-600)}
.event-item__body{flex:1;min-width:0}
.event-item__body h3{font-size:1rem;margin:0 0 .3rem;line-height:1.35}
.event-item__body h3 a{color:var(--ink)}
.event-item__body h3 a:hover{color:var(--green-600)}
.event-item__excerpt{margin:0 0 .5rem;font-size:var(--step--1);color:var(--muted)}
.event-item__meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0;font-size:.78rem;color:var(--muted)}
.event-item__meta span{display:inline-flex;align-items:center;gap:.3rem}
.event-item__meta svg{width:14px;height:14px;color:var(--green-500)}
.event-item__cta{flex:none;align-self:center}

.announce-list{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.announce-item{display:flex;gap:.85rem;align-items:flex-start;padding:.9rem 1rem;background:var(--bg);
  border:1px solid var(--line);border-left:3px solid var(--gold-500);border-radius:var(--radius-sm);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.announce-item:hover{box-shadow:var(--shadow-sm);transform:translateX(3px)}
.announce-item--card{padding:1.2rem}
.announce-item__icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:9px;
  background:var(--gold-100);color:var(--gold-600)}
.announce-item__icon svg{width:19px;height:19px}
.announce-item h2,.announce-item h3{font-size:.98rem;margin:0 0 .25rem;line-height:1.4}
.announce-item h2 a,.announce-item h3 a{color:var(--ink)}
.announce-item h2 a:hover,.announce-item h3 a:hover{color:var(--green-600)}
.announce-item time{font-size:.76rem;color:var(--muted)}
.announce-item__body{flex:1;min-width:0}
.announce-item__body p{margin:.25rem 0 .4rem;font-size:var(--step--1);color:var(--muted)}

.split-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(1.5rem,1rem + 2vw,3rem)}

/* ============================================================ Gallery ===== */
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(.85rem,.6rem + 1vw,1.4rem)}
.album-grid--4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.album-card{position:relative;display:block;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;box-shadow:var(--shadow-sm)}
.album-card__img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.album-card:hover .album-card__img{transform:scale(1.07)}
.album-card__body{position:absolute;inset:auto 0 0 0;padding:1.6rem 1rem .9rem;color:#fff;
  background:linear-gradient(transparent,rgba(4,51,31,.9))}
.album-card__body strong{display:block;font-size:.95rem;line-height:1.35}
.album-card__body small{font-size:.75rem;opacity:.82}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem}
.photo-grid__item{position:relative;display:block;padding:0;overflow:hidden;border:none;border-radius:var(--radius-sm);
  aspect-ratio:4/3;background:var(--bg-soft)}
.photo-grid__img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.photo-grid__item:hover .photo-grid__img{transform:scale(1.08)}
.photo-grid__caption{position:absolute;inset:auto 0 0 0;padding:1.4rem .7rem .55rem;font-size:.76rem;color:#fff;
  text-align:left;background:linear-gradient(transparent,rgba(4,51,31,.85))}

.lightbox{position:fixed;inset:0;z-index:1500;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:1rem;padding:clamp(1rem,4vw,3rem);background:rgba(4,51,31,.95);backdrop-filter:blur(6px)}
.lightbox__figure{grid-column:2;margin:0;display:grid;place-items:center;gap:.8rem;max-height:88vh}
.lightbox__figure img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--radius-sm)}
.lightbox__figure figcaption{color:rgba(255,255,255,.85);font-size:var(--step--1);text-align:center}
.lightbox__close{position:absolute;top:1rem;right:1rem;width:44px;height:44px;display:grid;place-items:center;
  border:none;border-radius:50%;background:rgba(255,255,255,.15);color:#fff}
.lightbox__close svg{width:22px;height:22px}
.lightbox__nav{width:48px;height:48px;display:grid;place-items:center;border:none;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff}
.lightbox__nav svg{width:26px;height:26px}
.lightbox__nav:hover,.lightbox__close:hover{background:rgba(255,255,255,.3)}

/* ================================================================ Team ==== */
.team-block{margin-bottom:clamp(2rem,1.4rem + 2vw,3.2rem)}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(1rem,.7rem + 1vw,1.6rem)}
.team-grid--org{grid-template-columns:repeat(auto-fit,minmax(190px,220px));justify-content:center}
.person-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);text-align:center;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.person-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.person-card__photo{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg-soft)}
.person-card__img{width:100%;height:100%;object-fit:cover}
.person-card__body{padding:1rem .9rem 1.2rem}
.person-card__name{font-size:.98rem;margin:0 0 .2rem;line-height:1.35}
.person-card__name a{color:var(--ink)}
.person-card__name a:hover{color:var(--green-600)}
.person-card__role{margin:0 0 .5rem;font-size:.79rem;color:var(--green-600);font-weight:600}
.person-card__contact{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;color:var(--muted);word-break:break-all}
.person-card__contact svg{width:13px;height:13px;flex:none}

.person-detail{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:start}
.person-detail__img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.person-detail__facts{margin:0 0 1.6rem;display:grid;gap:.1rem}
.person-detail__facts>div{display:grid;grid-template-columns:180px 1fr;gap:1rem;padding:.6rem 0;border-bottom:1px dashed var(--line)}
.person-detail__facts dt{font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.person-detail__facts dd{margin:0}

/* ============================================================ Documents === */
.doc-filter{margin-bottom:1.5rem}
.doc-filter input{width:100%;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;background:var(--bg)}
.doc-block{margin-bottom:2.2rem}
.doc-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.doc-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.doc-item:hover{box-shadow:var(--shadow-sm);border-color:var(--green-300)}
.doc-item__body{flex:1;min-width:200px}
.doc-item__body h3{font-size:.97rem;margin:0 0 .2rem;line-height:1.4}
.doc-item__body h3 a{color:var(--ink)}
.doc-item__body h3 a:hover{color:var(--green-600)}
.doc-item__body p{margin:0 0 .3rem;font-size:var(--step--1);color:var(--muted)}
.doc-item__meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.75rem;color:var(--muted)}
.doc-item__cta{flex:none}
.doc-empty{padding:2rem;text-align:center;color:var(--muted)}

.file-badge{display:inline-grid;place-items:center;min-width:38px;height:26px;padding:0 .4rem;border-radius:5px;
  font-size:.64rem;font-weight:800;letter-spacing:.05em;color:#fff;background:var(--muted);flex:none}
.file-badge--lg{min-width:52px;height:52px;border-radius:10px;font-size:.75rem}
.file-badge.is-pdf{background:#c1272d}
.file-badge.is-doc{background:#1a5fb4}
.file-badge.is-xls{background:#1a7f37}
.file-badge.is-ppt{background:#c9560f}
.file-badge.is-zip{background:#6b4fa0}
.file-badge.is-img{background:#0e7490}

/* ============================================================ Accordion === */
.accordion{display:grid;gap:.6rem}
.accordion__item{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.accordion__item h3{margin:0}
.accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:1rem 1.15rem;border:none;background:none;text-align:left;font-size:.96rem;font-weight:600;color:var(--ink)}
.accordion__trigger svg{width:20px;height:20px;flex:none;color:var(--green-600);transition:transform .25s var(--ease)}
.accordion__trigger[aria-expanded=true]{color:var(--green-700);background:var(--green-50)}
.accordion__trigger[aria-expanded=true] svg{transform:rotate(45deg)}
.accordion__trigger:hover{background:var(--green-50)}
.accordion__panel{border-top:1px solid var(--line)}
.accordion__content{padding:1rem 1.15rem 1.2rem;font-size:var(--step--1);color:var(--ink-soft)}
.faq-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:start}
.faq-page__filter{margin-bottom:1.5rem}
.faq-page__filter input{width:100%;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit}
.faq-block{margin-bottom:2rem}
.faq-cta{margin-top:2.5rem;padding:2rem;text-align:center;background:var(--green-50);border:1px dashed var(--green-300);border-radius:var(--radius)}
.faq-cta h2{font-size:var(--step-1)}

/* ============================================================== Single ==== */
/* Reading progress. Width is set by main.js; no transition, because a bar that
   eases behind the scroll reports a position the reader is no longer at. */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;pointer-events:none;
  background:transparent}
.read-progress span{display:block;width:0;height:100%;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-400))}

.single{--figure-lift:clamp(2rem,5vw,4.5rem)}
.single__hero{padding-block:clamp(1.6rem,1.2rem + 2vw,2.8rem);background:linear-gradient(135deg,var(--green-800),var(--green-600));color:#fff}
/* The image is lifted into the green band so the two halves of the page read as
   one composition instead of a coloured block stacked on a white one. The hero
   grows by exactly what the figure is pulled up by, so nothing collides — and
   the pair only applies when there is actually a figure to lift. */
.single--has-figure .single__hero{padding-bottom:calc(clamp(1.6rem,1.2rem + 2vw,2.8rem) + var(--figure-lift))}
.single--has-figure .single__figure{margin-top:calc(-1 * var(--figure-lift));position:relative;z-index:1}
.single__hero .breadcrumb{margin-bottom:1rem}
.single__terms{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.single__title{font-size:var(--step-3);color:#fff;margin:0 0 .7rem;max-width:32ch;text-wrap:balance}
.single__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:var(--step--1);color:rgba(255,255,255,.82)}
.single__meta a{color:var(--gold-400)}
.single__meta--boxed{color:var(--muted);padding:.6rem .9rem;background:var(--bg-soft);border-radius:var(--radius-sm);margin-bottom:1.2rem}
/* `auto` on the sides, not 0. The markup is <figure class="single__figure
   container">, and this rule loads after critical.css — a `margin` shorthand
   here silently cancelled .container's margin-inline:auto, so the figure kept
   the container's width but sat pinned to the left edge of the viewport. */
.single__figure{margin:0 auto 1.8rem}
/* Narrower than the container, and only then capped.
   At the full 1200px a 16:9 image stands 675px tall — taller than the article
   text beside it. Cropping the centre instead was worse: it forced the artwork
   to be drawn small enough to survive the crop, which left the device unreadable
   on every card. Reducing the measure shortens the image without removing any of
   it (900px → 506px), and max-height still catches the 4:3 and portrait
   photographs an editor may upload, which the ratio alone would not. */
.single__figure{width:min(100% - 2*var(--gap),900px)}
.single__img{display:block;width:100%;max-height:520px;
  object-fit:cover;object-position:center;border-radius:var(--radius);box-shadow:var(--shadow)}
.single__figure figcaption{margin-top:.6rem;font-size:.79rem;color:var(--muted);text-align:center}
.single__lead{font-size:var(--step-1);line-height:1.6;color:var(--ink-soft);font-weight:500;
  padding-left:1.1rem;border-left:3px solid var(--gold-500);margin-bottom:1.6rem}
.single__tags{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:2rem 0 1.5rem;
  padding-top:1.2rem;border-top:1px solid var(--line)}
.single__tags-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.page-updated{margin-top:2rem;font-size:.8rem;color:var(--muted);font-style:italic}

/* Prose — the editor's rendered output. */
.prose{font-size:var(--step-0);line-height:1.8;color:var(--ink-soft)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:var(--step-2);margin-top:1.8em;color:var(--ink)}
.prose h3{font-size:var(--step-1);margin-top:1.5em;color:var(--ink)}
.prose h4{font-size:1.05rem;margin-top:1.3em;color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose img{border-radius:var(--radius);margin-block:1.4em;box-shadow:var(--shadow-sm)}
.prose figure{margin:1.6em 0}
/* Video inserted from the editor. aspect-ratio rather than the old padding-top
   trick, and the iframe is absolutely positioned so it fills the frame at any
   width — an unstyled iframe defaults to 300×150 and looks broken. */
.prose .video-embed{position:relative;aspect-ratio:16/9;margin:1.6em 0;
  background:var(--green-900);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.prose .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Alignment arrives as a class: the editor cannot use inline styles, because
   both the CSP and the server-side sanitiser drop style attributes. */
.prose .is-center{text-align:center}
.prose .is-right{text-align:right}
.prose figcaption{margin-top:.5rem;font-size:.8rem;color:var(--muted);text-align:center}
.prose blockquote{margin:1.6em 0;padding:1.1rem 1.4rem;background:var(--green-50);border-left:4px solid var(--green-600);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--ink)}
.prose blockquote p:last-child{margin-bottom:0}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.35em}
.prose table{width:100%;border-collapse:collapse;margin-block:1.5em;font-size:var(--step--1);display:block;overflow-x:auto}
.prose th,.prose td{padding:.65rem .85rem;border:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{background:var(--green-50);font-weight:700;color:var(--green-800)}
.prose tbody tr:nth-child(even){background:var(--bg-soft)}
.prose code{padding:.15em .4em;background:var(--bg-soft);border-radius:4px;font-size:.88em;font-family:ui-monospace,Consolas,monospace}
.prose pre{padding:1rem;background:var(--green-900);color:#e6f4ec;border-radius:var(--radius-sm);overflow-x:auto}
.prose pre code{background:none;color:inherit;padding:0}
.prose hr{border:none;border-top:1px solid var(--line);margin-block:2em}
.prose--checklist ul{list-style:none;padding-left:0}
.prose--checklist li{position:relative;padding-left:1.9rem}
.prose--checklist li::before{content:"";position:absolute;left:0;top:.5em;width:18px;height:18px;border-radius:50%;
  background:var(--green-100) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a7c4a'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat}
.prose--steps ol{list-style:none;padding-left:0;counter-reset:step}
.prose--steps ol li{position:relative;padding-left:2.4rem;counter-increment:step}
.prose--steps ol li::before{content:counter(step);position:absolute;left:0;top:.15em;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;background:var(--green-600);color:#fff;font-size:.8rem;font-weight:700}

.child-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.85rem;margin-top:2.2rem}
.child-pages__item{padding:1.1rem;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.child-pages__item:hover{border-color:var(--green-300);box-shadow:var(--shadow-sm)}
.child-pages__item strong{display:block;margin-bottom:.25rem;color:var(--ink)}
.child-pages__item span{font-size:.82rem;color:var(--muted)}

/* =============================================================== Share ==== */
.share{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin-top:1.8rem;padding:1rem 1.2rem;
  background:var(--bg-soft);border-radius:var(--radius)}
.share__label{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.share__links{display:flex;gap:.45rem;flex-wrap:wrap}
.share__links a,.share__copy{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg);color:var(--ink-soft);
  transition:background .2s var(--ease),color .2s var(--ease),transform .18s var(--ease)}
.share__links a svg,.share__copy svg{width:18px;height:18px}
.share__links a:hover,.share__copy:hover{background:var(--green-600);color:#fff;border-color:var(--green-600);transform:translateY(-2px)}

/* Closes the article on the person who wrote it rather than on a row of icons. */
.author-card{display:flex;align-items:center;gap:1rem;margin-top:1.2rem;padding:1.1rem 1.25rem;
  background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--gold-500);
  border-radius:var(--radius)}
.author-card__avatar{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--green-50);color:var(--green-700);font-weight:800;font-size:1.05rem;letter-spacing:.02em}
.author-card__body{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.author-card__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.author-card__name{font-weight:700;color:var(--ink)}
.author-card__name:hover{color:var(--green-700)}
.author-card__role{font-size:.82rem;color:var(--muted)}

/* ============================================================= Sidebar ==== */
.sidebar{display:grid;gap:1.25rem;position:sticky;top:calc(var(--header-h) + 16px)}
.widget{padding:1.35rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.widget--search{padding:1rem}
.widget__search-row{display:flex;gap:.4rem}
.widget__search-row input{flex:1;min-width:0;padding:.6rem .8rem;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit}
.widget__title{font-size:1.02rem;margin:0 0 .9rem;padding-bottom:.55rem;border-bottom:2px solid var(--gold-500);display:inline-block}
.widget__list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.widget__list--terms a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem .3rem;
  font-size:.88rem;color:var(--ink-soft);border-bottom:1px dashed var(--line)}
.widget__list--terms a:hover{color:var(--green-600)}
.widget__count{min-width:26px;padding:.05rem .4rem;border-radius:999px;background:var(--green-100);color:var(--green-700);
  font-size:.72rem;font-weight:700;text-align:center}
.widget__list--posts{gap:.85rem}
.mini-post{display:flex;gap:.7rem}
.mini-post__thumb{flex:none;width:72px;height:72px;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-soft)}
.mini-post__img{width:100%;height:100%;object-fit:cover}
.mini-post__body h3{font-size:.85rem;line-height:1.4;margin:0 0 .2rem}
.mini-post__body h3 a{color:var(--ink)}
.mini-post__body h3 a:hover{color:var(--green-600)}
.mini-post__body time{font-size:.72rem;color:var(--muted)}
.widget__list--events{gap:.8rem}
.mini-event{display:flex;gap:.7rem}
.mini-event__date{display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:var(--radius-sm);
  background:var(--green-100);color:var(--green-700);line-height:1.05}
.mini-event__date strong{font-size:1.15rem;font-weight:800}
.mini-event__date em{font-style:normal;font-size:.64rem;text-transform:uppercase}
.mini-event__body h3{font-size:.85rem;margin:0 0 .15rem;line-height:1.4}
.mini-event__body h3 a{color:var(--ink)}
.mini-event__loc{font-size:.72rem;color:var(--muted)}
.widget__list--files a{display:flex;align-items:center;gap:.6rem;padding:.5rem .3rem;font-size:.84rem;
  color:var(--ink-soft);border-bottom:1px dashed var(--line)}
.widget__list--files a:hover{color:var(--green-600)}
.widget__file-name{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.widget__all{display:inline-block;margin-top:.7rem;font-size:.8rem;font-weight:700;color:var(--green-600)}
.widget--cta{background:linear-gradient(150deg,var(--green-700),var(--green-900));color:#fff;border-color:transparent}
.widget--cta .widget__title{color:#fff}
.widget--cta p{font-size:var(--step--1);color:rgba(255,255,255,.85)}

/* ============================================================== Search ==== */
.site-search{border-bottom:1px solid var(--line);background:var(--bg-soft);padding-block:1rem}
.site-search form{display:flex;gap:.5rem}
.site-search input{flex:1;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;background:var(--bg)}
.search-form{display:flex;gap:.5rem;margin-bottom:2rem}
.search-form input{flex:1;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit}
.search-form--center{max-width:520px;margin-inline:auto}
.search-group{margin-bottom:2.4rem}
.search-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.search-list li{padding:1.1rem 1.25rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  border-left:3px solid var(--green-500)}
.search-list h3{font-size:1rem;margin:0 0 .3rem}
.search-list h3 a{color:var(--ink)}
.search-list h3 a:hover{color:var(--green-600)}
.search-list p{margin:0 0 .3rem;font-size:var(--step--1);color:var(--muted)}
.search-list time{font-size:.75rem;color:var(--muted)}

/* ============================================================== Forms ===== */
.form{display:grid;gap:1.1rem}
.form__row{display:grid;gap:1.1rem}
.form__row--2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.form__group{display:grid;gap:.35rem}
.form__group label{font-size:.85rem;font-weight:600;color:var(--ink)}
.form__group .req{color:#c1272d}
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=search],
.form input[type=password],.form select,.form textarea{
  width:100%;padding:.72rem .9rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;color:var(--ink);background:var(--bg);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--green-500);
  box-shadow:0 0 0 3px rgba(18,161,100,.15);outline:none}
.form textarea{resize:vertical;min-height:140px}
.form__hint{font-size:.76rem;color:var(--muted)}
.form__error{font-size:.78rem;color:#c1272d;font-weight:600}
.form [aria-invalid=true]{border-color:#c1272d}
.captcha-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.captcha-img{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-soft)}
.captcha-input{max-width:180px;text-transform:uppercase;letter-spacing:.22em;font-weight:700}

.alert{display:flex;align-items:flex-start;gap:.7rem;padding:.95rem 1.15rem;margin-bottom:1.4rem;border-radius:var(--radius-sm);
  font-size:var(--step--1)}
.alert svg{width:20px;height:20px;flex:none;margin-top:.1rem}
.alert p{margin:0}
.alert--success{background:var(--green-100);color:var(--green-800);border:1px solid var(--green-300)}
.alert--error{background:#fdecec;color:#8f1d22;border:1px solid #f3bfc1}
.alert--warning{background:var(--gold-100);color:#7a5a06;border:1px solid #f0d79a}
.alert--info{background:#e7f1fb;color:#134a80;border:1px solid #bcd7f2}

.contact-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:start}
.contact-form-wrap{padding:clamp(1.25rem,1rem + 1vw,2rem);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.contact-info{display:grid;gap:1.25rem;position:sticky;top:calc(var(--header-h) + 16px)}
.contact-info__card{padding:1.5rem;background:linear-gradient(150deg,var(--green-700),var(--green-900));
  color:#fff;border-radius:var(--radius)}
.contact-info__card h2{font-size:var(--step-1);color:#fff;margin-bottom:.7rem}
.contact-info__card address{font-style:normal;font-size:var(--step--1);color:rgba(255,255,255,.85);margin-bottom:1rem}
.contact-info__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.contact-info__list li{display:flex;align-items:center;gap:.6rem;font-size:var(--step--1)}
.contact-info__list svg{width:17px;height:17px;flex:none;color:var(--gold-400)}
.contact-info__list a{color:#fff}
.contact-info__list a:hover{color:var(--gold-400)}
/* ---------------------------------------------------------- Office map --- */
.contact-map{padding:1.25rem;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.contact-map__title{font-size:var(--step-0);margin:0 0 .8rem}

/* The facade. A button, not a div: it is the control that loads the map, so it
   has to be reachable by keyboard and announced as actionable. */
.contact-map__preview{display:flex;align-items:center;gap:.85rem;width:100%;
  padding:1.1rem;text-align:left;cursor:pointer;
  border:1px dashed var(--green-300);border-radius:var(--radius-sm);
  background:linear-gradient(150deg,var(--green-50),var(--bg-soft));
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.contact-map__preview:hover{border-color:var(--green-600);background:var(--green-50)}
.contact-map__pin{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--green-600);color:#fff}
.contact-map__pin svg{width:24px;height:24px;fill:currentColor}
.contact-map__copy{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.contact-map__cta{font-weight:700;color:var(--green-700)}
.contact-map__note{font-size:.78rem;color:var(--muted);line-height:1.45}

/* Swapped in by main.js once the visitor asks for it. */
.contact-map__frame{display:block;width:100%;height:300px;border:0;border-radius:var(--radius-sm)}

.contact-map__link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.85rem;
  font-size:.85rem;font-weight:600;color:var(--green-700)}
.contact-map__link svg{width:15px;height:15px;fill:currentColor}
.contact-map__link:hover{color:var(--gold-600)}

/* =========================================================== Pagination === */
.pagination{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:2.5rem;flex-wrap:wrap}
.pagination__list{display:flex;gap:.3rem;list-style:none;margin:0;padding:0}
.pagination__page{display:grid;place-items:center;min-width:40px;height:40px;padding:0 .5rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;color:var(--ink-soft);background:var(--bg)}
.pagination__page:hover{border-color:var(--green-500);color:var(--green-700);background:var(--green-50)}
.pagination__page.is-current{background:var(--green-600);border-color:var(--green-600);color:#fff}
.pagination__gap{display:grid;place-items:center;min-width:26px;height:40px;color:var(--muted)}
.pagination__nav{display:inline-flex;align-items:center;gap:.4rem;padding:0 .9rem;height:40px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;color:var(--ink-soft);background:var(--bg)}
.pagination__nav:hover{border-color:var(--green-500);color:var(--green-700);background:var(--green-50)}
.pagination__nav svg{width:16px;height:16px}

/* ========================================================= Empty / 404 ==== */
.empty-state{display:grid;place-items:center;gap:.8rem;padding:3rem 1.5rem;text-align:center;color:var(--muted);
  background:var(--bg-soft);border:1px dashed var(--line);border-radius:var(--radius)}
.empty-state svg{width:44px;height:44px;opacity:.35}
.empty-state p{margin:0}

.error-page{padding-block:clamp(3rem,2rem + 4vw,6rem);text-align:center;
  background:linear-gradient(160deg,var(--green-50),var(--bg))}
.error-page__code{font-size:clamp(5rem,3rem + 12vw,11rem);font-weight:900;line-height:.9;letter-spacing:-.04em;
  background:linear-gradient(150deg,var(--green-600),var(--gold-500));-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:.4rem}
.error-page__title{font-size:var(--step-3)}
.error-page__text{max-width:52ch;margin-inline:auto;color:var(--muted)}
.error-page .search-form{margin-block:1.8rem}

/* ============================================================ Partners ==== */
.partners{padding-block:clamp(2rem,1.5rem + 2vw,3.2rem);border-top:1px solid var(--line);background:var(--bg-soft)}
.partners__title{font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-align:center;margin-bottom:1.5rem}
.partners__list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.2rem,1rem + 2vw,3rem);
  list-style:none;margin:0;padding:0}
.partners__list img{max-height:56px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.65;background:none;
  transition:filter .25s var(--ease),opacity .25s var(--ease)}
.partners__list li:hover img{filter:grayscale(0);opacity:1}

/* ============================================================== Footer ==== */
.site-footer{background:var(--green-900);color:rgba(255,255,255,.72);font-size:var(--step--1)}
.footer-connection{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--green-700),var(--green-600) 60%,var(--green-500))}
/* Bled out by one tile so the drift below never exposes a bare edge; the grid
   is 30px-periodic, so travelling exactly 30px lands on an identical frame and
   the loop has no seam. */
.footer-connection::after{content:"";position:absolute;inset:-30px;opacity:.3;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.5) 1.2px,transparent 0);background-size:30px 30px}
.footer-connection__inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-block:clamp(1.8rem,1.4rem + 1.6vw,2.8rem);flex-wrap:wrap}
.footer-connection__text{max-width:60ch}
.footer-connection h2{font-size:var(--step-2);color:#fff;margin:.2rem 0 .4rem}
.footer-connection p{margin:0;color:rgba(255,255,255,.85)}
.footer-connection .eyebrow{color:var(--gold-400)}

.footer-main{position:relative;padding-block:clamp(2.2rem,1.8rem + 2vw,3.4rem)}
/* The same pulse that runs down the hero spokes, laid flat across the seam
   between the two footer bands: one request crossing from the ecosystem into
   the bureau. It travels, then rests — a loop with no pause reads as a loading
   bar, which is not what this is saying. */
.footer-main::before{content:"";position:absolute;top:0;left:0;width:34%;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(240,180,41,.9),transparent);
  transform:translate3d(-110%,0,0);pointer-events:none}
.footer-main__grid{position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(1.5rem,1rem + 2vw,3rem)}

/* --- "UMI Connection" network -------------------------------------------- */
/* Sliced, not stretched, so the mesh keeps its proportions at every width. The
   mask thins it out across the top where the column headings live and lets it
   come through at the bottom, which is empty at every breakpoint. */
.footer-net{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 42%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 42%,#000 100%)}
.footer-net svg{width:100%;height:100%}
.fnet__line{stroke:rgba(255,255,255,.13);stroke-width:1}
/* One short dash chased by a gap as long as the whole line, so exactly one
   pulse crosses at a time. Both values need units: in CSS (unlike the SVG
   presentation attribute) a bare number is invalid, and one invalid value drops
   the whole declaration back to `none` -- which paints the link solid gold. */
.fnet__signal{stroke:rgba(240,180,41,.9);stroke-width:1.8;stroke-linecap:round;fill:none;
  stroke-dasharray:36px var(--len);stroke-dashoffset:36px;opacity:0}
.fnet__node{fill:rgba(255,255,255,.4);transform-box:fill-box;transform-origin:center}
.fnet__node--hub{fill:var(--gold-400)}
.fnet__ring{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.2;
  transform-box:fill-box;transform-origin:center}
.fnet__ring--hub{stroke:rgba(240,180,41,.55)}
.brand--footer{margin-bottom:1rem}
.brand--footer .brand__name{color:#fff}
.brand--footer .brand__sub{color:rgba(255,255,255,.6);max-width:30ch}
.footer-address{font-style:normal;margin-bottom:.9rem;color:rgba(255,255,255,.72);line-height:1.7}
.footer-contact{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.3rem}
.footer-contact a{color:rgba(255,255,255,.82)}
.footer-contact a:hover{color:var(--gold-400)}
.footer-social__label{display:block;margin-bottom:.5rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.footer-social__links{display:flex;gap:.5rem}
.footer-social__links a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.09);color:rgba(255,255,255,.8);transition:background .2s var(--ease),color .2s var(--ease),transform .18s var(--ease)}
.footer-social__links svg{width:18px;height:18px}
.footer-social__links a:hover{background:var(--gold-500);color:var(--green-900);transform:translateY(-2px)}
/* The gold rule is an ::after rather than a border-bottom purely so it can be
   drawn on. It defaults to full width, so with JS off or motion turned down it
   is simply the underline it always was. */
.footer-col__title{position:relative;font-size:.95rem;color:#fff;margin-bottom:.9rem;padding-bottom:.5rem;
  display:inline-block}
.footer-col__title::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(240,180,41,.55);transform-origin:left}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.footer-col a{display:inline-block;color:rgba(255,255,255,.72);
  transition:color .2s var(--ease),transform .2s var(--ease)}
/* translateX, not padding-left: nudging padding reflows the whole column on
   every hover, a transform only recomposites the one link. */
.footer-col a:hover{color:var(--gold-400);transform:translateX(4px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:1.1rem}
.footer-bottom__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-copy{margin:0;font-size:.79rem;color:rgba(255,255,255,.55)}
.footer-legal{display:flex;flex-wrap:wrap;gap:1rem;list-style:none;margin:0;padding:0;font-size:.79rem}
.footer-legal a{color:rgba(255,255,255,.6)}
.footer-legal a:hover{color:var(--gold-400)}

/* --- Footer motion ------------------------------------------------------- */
/* The footer carries the same two ideas as the hero, quieted down: a living
   ecosystem texture, and a service pulse arriving at the bureau. Everything
   here is transform/opacity only, so it composites without touching layout. */
@media (prefers-reduced-motion:no-preference){
  .footer-connection::after{animation:footerGrid 40s linear infinite}
  .footer-main::before{animation:footerPulse 9s cubic-bezier(.45,0,.2,1) infinite}

  /* Traffic on the network. Duration is set per link from its own length, so
     every pulse crosses at the same speed however far it has to go. */
  .fnet__signal{animation:fnetSignal var(--dur,2s) linear infinite;animation-delay:var(--delay,0s)}
  .fnet__node{animation:fnetNode 5.5s ease-in-out infinite;animation-delay:var(--delay,0s)}
  .fnet__ring{animation:fnetRing 6.5s ease-in-out infinite;animation-delay:var(--delay,0s)}

  /* The underline draws itself as its column arrives. .reveal is only ever
     added by main.js, and only when motion is allowed, so this selector simply
     never matches on the reduced-motion path. */
  .footer-col.reveal .footer-col__title::after{transform:scaleX(0);
    transition:transform .7s var(--ease) .2s}
  .footer-col.reveal.is-visible .footer-col__title::after{transform:scaleX(1)}
}

@keyframes footerGrid{to{transform:translate3d(30px,30px,0)}}
/* Travel fills the first 26% of the cycle (the $duty in footer_network.php);
   the remainder is the pause that keeps the mesh from reading as a cage. */
@keyframes fnetSignal{
  0%{stroke-dashoffset:36px;opacity:0}
  4%{opacity:1}
  22%{opacity:1}
  26%,100%{stroke-dashoffset:calc(-1 * var(--len));opacity:0}
}
@keyframes fnetNode{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.45);opacity:1}}
@keyframes fnetRing{0%,100%{transform:scale(.82);opacity:.35}50%{transform:scale(1.12);opacity:.9}}
@keyframes footerPulse{
  0%{transform:translate3d(-110%,0,0);opacity:0}
  6%{opacity:1}
  52%{opacity:1}
  60%,100%{transform:translate3d(294%,0,0);opacity:0}
}

/* Turning motion off mid-session freezes transitions, which would strand a
   not-yet-revealed underline at scaleX(0) and delete it for good. */
html.a11y-no-motion .footer-col__title::after{transform:none!important}

/* ================================================= Back-to-top + a11y ===== */
.back-to-top{position:fixed;right:clamp(1rem,2vw,1.6rem);bottom:clamp(1rem,2vw,1.6rem);z-index:800;
  display:grid;place-items:center;width:48px;height:48px;border:none;border-radius:50%;
  background:var(--green-600);color:#fff;box-shadow:var(--shadow);
  opacity:0;transform:translateY(12px);transition:opacity .25s var(--ease),transform .25s var(--ease),background .2s var(--ease)}
.back-to-top svg{width:24px;height:24px}
.back-to-top.is-visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{background:var(--green-700)}

.a11y{position:fixed;left:clamp(1rem,2vw,1.6rem);bottom:clamp(1rem,2vw,1.6rem);z-index:850}
.a11y__trigger{display:grid;place-items:center;width:52px;height:52px;border:none;border-radius:50%;
  background:var(--navy);color:#fff;box-shadow:var(--shadow);transition:transform .22s var(--ease),background .2s var(--ease)}
.a11y__trigger svg{width:27px;height:27px}
.a11y__trigger:hover{transform:scale(1.06);background:#123a6b}
.a11y__panel{position:absolute;left:0;bottom:64px;width:min(90vw,330px);padding:1rem;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.a11y__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.a11y__title{font-size:.98rem;margin:0}
.a11y__close{display:grid;place-items:center;width:30px;height:30px;border:none;border-radius:8px;background:var(--bg-soft);color:var(--ink-soft)}
.a11y__close svg{width:17px;height:17px}
.a11y__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem}
.a11y__btn{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.7rem .4rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);
  font-size:.7rem;line-height:1.25;text-align:center;color:var(--ink-soft);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.a11y__btn svg{width:20px;height:20px;color:var(--green-600)}
.a11y__btn:hover{background:var(--green-50);border-color:var(--green-300)}
.a11y__btn[aria-pressed=true]{background:var(--green-600);border-color:var(--green-600);color:#fff}
.a11y__btn[aria-pressed=true] svg{color:#fff}
.a11y__footer{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line);display:grid;gap:.5rem}
.a11y__statement{font-size:.72rem;color:var(--muted);text-align:center}

.reading-guide{position:fixed;left:0;right:0;height:44px;z-index:840;pointer-events:none;
  background:rgba(240,180,41,.16);border-block:2px solid rgba(212,160,23,.75)}

/* Accessibility modes, driven by classes the widget sets on <html>. */
html.a11y-contrast{filter:contrast(1.35)}
html.a11y-invert{filter:invert(1) hue-rotate(180deg)}
html.a11y-invert img,html.a11y-invert picture,html.a11y-invert video{filter:invert(1) hue-rotate(180deg)}
html.a11y-grayscale{filter:grayscale(1)}
html.a11y-contrast.a11y-grayscale{filter:contrast(1.35) grayscale(1)}
html.a11y-dyslexic,html.a11y-dyslexic body{font-family:Verdana,Tahoma,"Trebuchet MS",sans-serif!important;letter-spacing:.03em;word-spacing:.12em}
html.a11y-dyslexic p,html.a11y-dyslexic li{line-height:2}
html.a11y-underline a{text-decoration:underline!important;text-underline-offset:2px}
html.a11y-big-cursor,html.a11y-big-cursor *{cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M6 3l14 8-6 1.5L11 20z' fill='%230a7c4a' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 4 4,auto!important}
html.a11y-no-motion *,html.a11y-no-motion *::before,html.a11y-no-motion *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important}

/* ========================================================== Site map ====== */
.sitemap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.5rem,1rem + 2vw,2.5rem)}
.sitemap-list{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.4rem}
.sitemap-list a{font-size:.88rem;color:var(--ink-soft)}
.sitemap-list a:hover{color:var(--green-600)}
.sitemap-sub{font-size:.85rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:.8rem 0 .4rem}

/* ============================================================= Submenus === */
.submenu{position:absolute;top:100%;left:0;z-index:20;min-width:264px;padding:.55rem;margin:0;list-style:none;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
/* pointer-events is a second lock on the same door. A single stray
   `visibility:visible` deeper in the tree is enough to make a closed panel
   catch the cursor again, and that failure is invisible until someone reports
   a menu opening by itself. */
.primary-nav__item:hover>.submenu,.primary-nav__item:focus-within>.submenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.submenu li{position:relative}
.submenu a{display:block;padding:.6rem .75rem;border-radius:var(--radius-sm);font-size:.87rem;color:var(--ink-soft)}
.submenu a:hover{background:var(--green-50);color:var(--green-700)}
.submenu__label{display:block;font-weight:600}
.submenu__desc{display:block;margin-top:.1rem;font-size:.74rem;color:var(--muted);line-height:1.4}
.submenu--nested{top:0;left:100%;margin-left:.3rem}
.primary-nav__item:last-child .submenu,.primary-nav__item:nth-last-child(2) .submenu{left:auto;right:0}
.primary-nav__item:last-child .submenu--nested{left:auto;right:100%;margin-right:.3rem}

/* -------------------------------------------------------- Mega menu ------ */
/* One panel spanning the header instead of several narrow dropdowns: each
   direct child is a column heading and its own children fill that column.
   The item is taken out of the positioning flow so the panel can anchor to
   the sticky header and stay centred no matter which entry opens it. */
.primary-nav__item.is-mega{position:static}
.submenu--mega{
  left:50%;right:auto;
  width:min(1080px,calc(100vw - 3rem));
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.4rem 1.5rem;padding:1.4rem 1.6rem;
  transform:translate(-50%,8px)
}
.primary-nav__item.is-mega:hover>.submenu--mega,
.primary-nav__item.is-mega:focus-within>.submenu--mega{transform:translate(-50%,0)}

/* Column heading */
.submenu--mega>li>a{
  padding:.35rem .35rem .5rem;margin-bottom:.35rem;
  border-bottom:2px solid var(--green-100);border-radius:0;
  font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green-700)
}
.submenu--mega>li>a:hover{background:transparent;border-bottom-color:var(--gold-500)}
.submenu--mega>li>a .submenu__label{font-weight:800}

/* The nested list stops being a flyout and becomes the column body.
   `visibility:inherit`, never `visible`: visibility is inherited, so pinning it
   to visible kept these columns hit-testable while the panel around them was
   still closed. The panel is up to 1080px wide and sits directly under the
   header, so that left an invisible strip across most of the page that opened
   the mega menu on approach — the cursor never had to reach "Layanan" at all.
   opacity:0 does not stop pointer events; only visibility and pointer-events do.
   `pointer-events` needs the same inherit treatment and for the same reason:
   these lists match .submenu, so they pick up its explicit pointer-events:none,
   and the :hover rule only hands pointer-events back to the panel itself - its
   direct child - never to the columns nested inside it. That left every service
   link in the open mega panel unclickable while the four column headings above
   them worked. Inheriting ties them to the panel: dead while it is closed,
   live the moment it opens. */
.submenu--mega .submenu--nested{
  position:static;display:block;min-width:0;margin:0;padding:0;
  opacity:1;visibility:inherit;pointer-events:inherit;transform:none;
  background:none;border:none;border-radius:0;box-shadow:none
}
.submenu--mega .submenu--nested a{padding:.42rem .35rem;font-size:.85rem}

/* ======================================================== Print styles ==== */
@media print{
  .topbar,.site-header,.site-footer,.a11y,.back-to-top,.share,.sidebar,.pagination,.hero__nav,.hero__dots{display:none!important}
  body{font-size:11pt;color:#000;background:#fff}
  .page-hero{background:none!important;color:#000;padding-block:0}
  .page-hero__title,.single__title{color:#000}
  .container{width:100%}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .prose{page-break-inside:auto}
}

/* ========================================================== Responsive ==== */
@media (max-width:1080px){
  /* Below this the orbit device would crowd the headline; the copy takes the
     full measure instead and the hero keeps its meaning through the words.
     With the device gone the hero also has far less to hold, so the height
     token comes down with it - otherwise the copy floats in dead space. */
  .hero{--hero-h:clamp(392px,52vh,472px)}
  .hero__stage{display:none}
  .hero__copy{max-width:40rem}

  .content-layout,.content-layout--wide,.faq-layout,.contact-layout{grid-template-columns:minmax(0,1fr)}
  .sidebar,.service-aside,.contact-info{position:static}
  .news-layout{grid-template-columns:minmax(0,1fr)}
  .person-detail{grid-template-columns:minmax(0,1fr)}
  .person-detail__media{max-width:320px}
  /* pointer-events must be handed back here: the desktop rule switches it off
     on the closed panel, and on the slide-out these lists are shown by
     `display`, not by :hover, so nothing would ever switch it back on and every
     submenu link would be dead to the touch. */
  .submenu{position:static;min-width:0;opacity:1;visibility:visible;pointer-events:auto;
    transform:none;box-shadow:none;
    border:none;border-left:2px solid var(--green-100);border-radius:0;padding:.2rem 0 .2rem .7rem;
    margin-left:.75rem;display:none}
  /* On the slide-out the mega menu is a nested list again - but a flat one put
     all 20 service links into the drawer on a single tap, close to a whole
     screen of scrolling before the next top-level entry came back into view.
     Each of the four groups now collapses on its own, so "Layanan" opens to
     four rows and the entry after it stays in sight. */
  .primary-nav__item.is-mega{position:relative}
  .submenu--mega{grid-template-columns:1fr;min-width:0;width:auto;left:auto;right:auto;
    transform:none;padding:.2rem 0 .2rem .7rem;gap:0}
  /* A group heading is a row you tap now, not an eyebrow label, so it takes the
     weight of the rows around it instead of 11px of uppercase grey. */
  .submenu--mega>li>a{border-bottom:none;margin-bottom:0;padding:.6rem .35rem;
    font-size:.84rem;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
  .submenu--mega>li>a .submenu__label{font-weight:700}
  /* Written against .submenu rather than .submenu--mega so a third level added
     under any other menu behaves the same way instead of rendering a control
     that opens nothing. Beats the desktop `.submenu--mega .submenu--nested`
     display:block on specificity, which is what keeps a group shut. */
  .submenu>li.has-children{display:flex;flex-wrap:wrap;align-items:center}
  .submenu>li.has-children>a{flex:1}
  .submenu>li.has-children>.submenu{flex-basis:100%;display:none;padding-left:.4rem}
  .submenu>li.has-children.is-expanded>.submenu{display:block}
  /* 37px rows were under the 44px a thumb wants. The list is short now, so the
     room is there to spend. */
  .submenu--mega .submenu--nested a{display:flex;align-items:center;min-height:44px}
  /* The parent label now opens the submenu rather than following its own link,
     so the section's page needs a row of its own at the top of the list. */
  .submenu__self{display:block}
  .submenu__self a{display:flex;align-items:center;min-height:44px;font-weight:600;color:var(--green-700)}
  .primary-nav__item.is-expanded>.submenu{display:block}
  .primary-nav__item.has-children{display:flex;flex-wrap:wrap;align-items:center}
  .primary-nav__item.has-children>a{flex:1}
  .primary-nav__item>a .caret{display:none}
  .submenu-toggle{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);
    border-radius:var(--radius-sm);background:var(--bg);color:var(--ink-soft)}
  .submenu-toggle svg{width:20px;height:20px;transition:transform .2s var(--ease)}
  .submenu-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
  .primary-nav__item.has-children>.submenu{flex-basis:100%}
  .primary-nav__mobile-extra{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
  /* overflow-y:auto makes the other axis `auto` as well, so a row too wide for
     the panel turns into a sideways scroll that carries the labels out of
     sight instead of wrapping them - and a scrolled panel looks exactly like a
     broken one. Let the label shrink below its longest word and take the
     sideways scroll off the table entirely. */
  .primary-nav{overflow-x:hidden}
  .primary-nav__item.has-children>a,.submenu>li.has-children>a{min-width:0}
  .primary-nav a{overflow-wrap:break-word}
  /* Touch sizing. These rows measured 17-22px tall on a 390px screen - under
     the 24px WCAG 2.5.8 asks for, and well under what a thumb reliably hits.
     Bought with padding rather than type size, so the scale stays put. */
  .topbar__item,.topbar__nav a,.breadcrumb a,
  .footer-col a,.footer-contact a,.footer-legal a{display:inline-flex;align-items:center;min-height:32px}
  /* iOS zooms the page in whenever it focuses a field smaller than 16px and
     never zooms back out, stranding the visitor mid-form. Every field here
     takes the body size through `font:inherit`, which lands at 15.3px. The
     selectors are repeated verbatim so this wins on source order rather than
     on !important. */
  .form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=search],
  .form input[type=password],.form select,.form textarea,
  .doc-filter input,.faq-page__filter input,.widget__search-row input,
  .site-search input,.search-form input{font-size:16px}
  /* Same 24px floor as the footer rows, for the standalone links that sat at
     18-23px. .hero__dot only grows its hit box - the 4px track inside stays
     the size it was, centred by the grid. */
  .link-more,.widget__all,.contact-map__link{display:inline-flex;align-items:center;min-height:32px}
  .hero__dot{height:28px}
  /* A phone was carrying about 45 perpetual decorative animations - 39 of them
     in the footer's SVG network alone - and paying for every one of them in
     battery and in the frames the drawer needs to slide. None of them carry
     meaning, so on handheld they stop; the shapes stay, only the motion goes.
     The aurora selectors are repeated at their original weight because
     :nth-child outranks a plain descendant. */
  .fnet__signal,.fnet__node,.fnet__ring{animation:none}
  .footer-connection::after,.footer-main::before{animation:none}
  .hero__aurora span:nth-child(1),.hero__aurora span:nth-child(2),
  .hero__aurora span:nth-child(3){animation:none}
  /* List and card titles are the whole target for their row - none of these
     rows carries a stretched link - and one line of them measured 18-22px. */
  .card__title a,.doc-item__body h3 a,.mini-event__body h3 a,
  .event-item__body h3 a,.contact-info__list li a{display:inline-block;min-height:24px}
}
@media (min-width:1081px){.primary-nav__mobile-extra{display:none}}

@media (max-width:720px){
  .hero{--hero-h:clamp(348px,62vh,420px);--ticker-h:40px}
  /* 9.9px is unreadable at arm length; .72rem still fits the 40px band. */
  .hero__ticker-item{font-size:.72rem}
  .card--compact{flex-direction:column}
  .card--compact .card__media{width:100%;aspect-ratio:16/9}
  .card--compact .card__excerpt{display:block}
  .a11y__grid{grid-template-columns:repeat(2,1fr)}
  .footer-bottom__inner{flex-direction:column;text-align:center}
  .event-item__cta{width:100%}
  .quick-strip{margin-top:0}
  .quick-strip__head{padding-top:0}
  .lightbox{grid-template-columns:1fr}
  .lightbox__nav{position:absolute;bottom:1.5rem}
  .lightbox__nav--prev{left:25%}
  .lightbox__nav--next{right:25%}
  .lightbox__figure{grid-column:1}
}

@media (max-width:520px){
  .person-detail__facts>div{grid-template-columns:1fr;gap:.15rem}
  .share{flex-direction:column;align-items:flex-start}
}

/* Honeypot trap. Hidden via a class because the CSP nonce makes browsers
   ignore 'unsafe-inline', which would otherwise drop the inline style and
   show the field to real visitors. */
.honeypot-field{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;
  pointer-events:none!important}

/* The ticker is the one piece of motion left on a phone, and it runs in the
   strip of page still showing beside an open drawer. It holds while the menu
   is up. */
html.nav-is-open .hero__ticker-track{animation-play-state:paused}