/* ===========================================================
   SAZEH PEYVAND — VECTR-style light scroll experience
   =========================================================== */
:root{
  --bg:#e4e8ee; --paper:#eef1f5; --ink:#10141a; --ink-soft:#576070;
  --ink-faint:#9aa3b0; --line:rgba(18,26,40,.14); --accent:#2287c6; --warm:#ef5536;
  --sans:"Archivo","Segoe UI",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  --fa:"Vazirmatn","Archivo","Segoe UI",system-ui,sans-serif;
  --pad:clamp(20px,4vw,64px); --maxw:1320px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{overflow-x:clip;}
::selection{background:var(--ink);color:var(--bg);}
a{color:inherit;text-decoration:none;}

/* ---- fixed 3D stage ---- */
.stage{position:fixed;inset:0;z-index:1;background:linear-gradient(180deg,#e7ecf4 0%,#d6e0ee 55%,#c3d0e3 100%);}
#scene{display:block;width:100%;height:100%;}

/* ---- top chrome ---- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:clamp(16px,2.4vw,30px) var(--pad);}
.topbar .meta{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);}
.topbar .wordmark{justify-self:center;display:flex;align-items:center;}
.topbar .actions{justify-self:end;display:flex;align-items:center;gap:18px;}
.lang{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-faint);}
.lang .on{color:var(--ink);}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:40px;background:var(--ink);color:var(--bg);
  font-size:13px;font-weight:600;letter-spacing:.02em;transition:.35s;}
.btn i{font-style:normal;transition:transform .35s;}
.btn:hover{background:var(--accent);} .btn:hover i{transform:translate(2px,-2px);}

/* ---- progress rail ---- */
.rail{position:fixed;left:0;top:0;bottom:0;width:2px;z-index:9;background:var(--line);}
.rail i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--ink);}

/* ---- journey overlay ---- */
.beats{position:fixed;inset:0;z-index:5;pointer-events:none;}

.hero{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:15vh;transition:opacity .6s ease;}
.hero .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--ink-soft);margin-bottom:26px;}
.hero h1{font-size:clamp(34px,5.28vw,83px);font-weight:800;line-height:.98;letter-spacing:-.02em;}
.hero h1 .em{color:var(--accent);}
.hero p{margin-top:24px;max-width:46ch;font-size:clamp(15px,1.2vw,19px);line-height:1.7;color:var(--ink-soft);text-wrap:pretty;}
.scrollcue{position:absolute;bottom:8vh;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--ink-soft);}
.scrollcue i{width:1px;height:42px;background:linear-gradient(var(--ink),transparent);position:relative;overflow:hidden;}
.scrollcue i::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--ink);animation:run 1.8s infinite;}
@keyframes run{0%{transform:translateY(-100%)}100%{transform:translateY(280%)}}

/* Journey beats now read off the 3D floor (see scene.js makeFloorBeats).
   Keep them in the DOM — visually hidden — for screen readers, SEO and so the
   3D scene can pull each beat's localized text. */
.jbeat{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:normal;border:0;}
.jbeat .jnum{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--accent);
  display:inline-block;padding-bottom:14px;}
.jbeat h2{font-size:clamp(26px,3vw,44px);font-weight:800;line-height:1.06;letter-spacing:-.01em;margin-bottom:22px;}
.jbeat p{font-size:clamp(14px,1.05vw,16px);line-height:1.7;color:var(--ink-soft);text-wrap:pretty;}

/* spacer that scrolls the journey */
.journey-spacer{height:900vh;width:100%;position:relative;z-index:0;}

/* ============ CONTENT ============ */
.content{position:relative;z-index:2;background:var(--bg);--lift:0;
  box-shadow:0 calc(-48px * var(--lift)) 90px rgba(18,26,40,calc(.22 * var(--lift)));}
.content::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent 8%,rgba(34,135,198,.85) 50%,transparent 92%);
  opacity:calc(.8 * var(--lift));box-shadow:0 0 16px rgba(34,135,198,calc(.45 * var(--lift)));}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.26em;color:var(--ink-soft);}
.kicker.dark{color:var(--accent);}

.grid-sec{padding:clamp(90px,14vh,180px) 0 clamp(60px,9vh,110px);}
.sec-title{font-size:clamp(26px,3.52vw,51px);font-weight:800;line-height:1.02;letter-spacing:-.02em;max-width:18ch;margin-bottom:clamp(48px,7vh,90px);}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.fcard{padding:38px 30px 46px 0;}
.fcard:last-child{padding-right:0;}
.fcard:not(:first-child){padding-left:30px;}
/* hand-drawn grid lines (drawn in on scroll) */
.fgrid .gl{position:absolute;background:rgba(18,26,40,.2);pointer-events:none;z-index:1;}
.gl-h{left:0;width:100%;height:1px;transform:scaleX(0);transform-origin:left center;}
.gl-top{top:0;}
.gl-bot{bottom:0;}
.gl-v{top:0;width:1px;height:100%;transform:scaleY(0);transform-origin:top center;}
.v1{left:25%;}
.v2{left:50%;}
.v3{left:75%;}
.grid-sec.is-drawn .gl-h{transform:scaleX(1);transition:transform .85s cubic-bezier(.65,0,.35,1);}
.grid-sec.is-drawn .gl-v{transform:scaleY(1);transition:transform .6s cubic-bezier(.65,0,.35,1);}
.grid-sec.is-drawn .gl-top{transition-delay:0s;}
.grid-sec.is-drawn .v1{transition-delay:.55s;}
.grid-sec.is-drawn .v2{transition-delay:.72s;}
.grid-sec.is-drawn .v3{transition-delay:.89s;}
.grid-sec.is-drawn .gl-bot{transition-delay:1.15s;}
@media(prefers-reduced-motion:reduce){.grid-sec .gl{transform:none!important;transition:none!important;}}
.ficon{width:54px;height:54px;margin-bottom:30px;border:1.5px solid var(--ink);position:relative;transform:rotate(0);}
.ficon[data-shape="cube"]{transform:rotate(45deg) scale(.8);}
.ficon[data-shape="cube"]::after{content:"";position:absolute;inset:8px;border:1.5px solid var(--ink);}
.ficon[data-shape="stack"]{border:0;}
.ficon[data-shape="stack"]::before,.ficon[data-shape="stack"]::after{content:"";position:absolute;left:0;width:100%;height:14px;border:1.5px solid var(--ink);}
.ficon[data-shape="stack"]::before{top:8px;} .ficon[data-shape="stack"]::after{top:30px;}
.ficon[data-shape="ring"]{border-radius:50%;}
.ficon[data-shape="ring"]::after{content:"";position:absolute;inset:10px;border:1.5px solid var(--ink);border-radius:50%;}
.ficon[data-shape="bars"]{border:0;display:flex;align-items:flex-end;gap:6px;}
.ficon[data-shape="bars"]::before{content:"";width:12px;height:34px;background:var(--ink);}
.ficon[data-shape="bars"]::after{content:"";width:12px;height:54px;background:var(--ink);}
.fcard h3{font-size:19px;font-weight:700;margin-bottom:14px;}
.fcard p{font-size:14px;line-height:1.65;color:var(--ink-soft);}

/* ---- activities (editorial index w/ sticky visual) ---- */
.acts-sec{padding:clamp(80px,12vh,160px) 0;border-top:1px solid var(--line);}
.acts-head{margin-bottom:clamp(40px,6vh,70px);}
.acts-head .acts-h{font-size:clamp(26px,3.52vw,51px);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin-top:18px;max-width:16ch;text-wrap:balance;}
.acts-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,84px);align-items:start;}
.acts-list{display:flex;flex-direction:column;}
.act{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:clamp(18px,2vw,32px);padding:clamp(24px,3.2vh,40px) 6px;border-top:1px solid var(--line);position:relative;cursor:pointer;
  opacity:0;transform:translateY(20px);}
.act-item:last-child .act{border-bottom:1px solid var(--line);}
.acts-sec.is-in .act{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);}
.acts-sec.is-in .act-item:nth-child(2) .act{transition-delay:.08s;}
.acts-sec.is-in .act-item:nth-child(3) .act{transition-delay:.16s;}
.acts-sec.is-in .act-item:nth-child(4) .act{transition-delay:.24s;}
.act-no{font-family:var(--mono);font-size:14px;color:var(--ink-faint);padding-top:9px;transition:color .35s;}
.act-body{min-width:0;}
/* the category is the headline; the longer sector title sits under it as a subtitle */
.act-cat{display:block;font-size:clamp(26px,3vw,44px);font-weight:800;line-height:1.08;letter-spacing:-.01em;color:var(--ink-faint);transition:color .4s ease,transform .5s cubic-bezier(.16,1,.3,1);}
.act-title{display:block;font-size:clamp(14px,1.25vw,18px);font-weight:600;line-height:1.5;color:var(--accent);opacity:.65;margin-top:10px;transition:opacity .35s;}
.act-desc{display:block;font-size:14px;line-height:1.65;color:var(--ink-soft);max-width:44ch;overflow:hidden;max-height:0;opacity:0;transform:translateY(4px);transition:max-height .5s ease,opacity .4s ease,margin .5s ease,transform .5s ease;}
.act-go{font-style:normal;font-size:22px;color:var(--ink);opacity:0;transform:translate(-8px,8px);transition:opacity .4s,transform .45s cubic-bezier(.16,1,.3,1);padding-top:6px;}
.act.is-active .act-no{color:var(--ink);}
.act.is-active .act-cat{color:var(--ink);transform:translateX(8px);}
.act.is-active .act-title{opacity:1;}
.act.is-active .act-desc{max-height:140px;opacity:1;transform:none;margin-top:16px;}
.act.is-active .act-go{opacity:1;transform:none;}
/* project count + link, revealed with the description */
.act-meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-soft);
  overflow:hidden;max-height:0;opacity:0;transition:max-height .5s ease,opacity .4s ease,margin .5s ease;}
.act-meta b{font-size:15px;font-weight:700;color:var(--accent);}
.act-meta-sep{width:18px;height:1px;background:var(--line);}
.act.is-active .act-meta{max-height:30px;opacity:1;margin-top:14px;}

/* project gallery for the active sector (sticky beside the list) */
.acts-gal{position:sticky;top:96px;outline:none;min-width:0;}   /* min-width: the thumb strip must scroll, not widen the column */
.acts-list{min-width:0;}
.acts-gal:focus-visible .gal-frame{outline:2px solid var(--accent);outline-offset:3px;}
.gal-frame{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--paper);border:1px solid var(--line);
  touch-action:pan-y;user-select:none;animation:galIn .5s ease both;}
@keyframes galIn{from{opacity:0;transform:scale(.985);}to{opacity:1;transform:none;}}
.gal-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;}
.gal-slide.is-on{opacity:1;z-index:1;}
.gal-slide image-slot{display:block;width:100%;height:100%;}
.gal-slide .ms-media{width:100%;height:100%;object-fit:cover;}
.gal-slide.is-on .ms-media{animation:galKen 7s ease-out both;}
@keyframes galKen{from{transform:scale(1.08);}to{transform:scale(1);}}
.gal-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,18,.42) 0%,rgba(8,12,18,0) 26%,rgba(8,12,18,0) 48%,rgba(8,12,18,.82) 100%);}
.gal-top{position:absolute;inset:16px 16px auto;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none;}
.gal-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;font-size:12px;font-weight:600;color:#fff;
  background:rgba(10,14,20,.5);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.gal-chip i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 30%,transparent);}
.gal-count{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.7);direction:ltr;}
.gal-count b{color:#fff;font-weight:700;}
.gal-cap{position:absolute;inset:auto 0 0;z-index:3;display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2.2vw,28px);color:#fff;
  animation:galCap .6s cubic-bezier(.16,1,.3,1) both;}
@keyframes galCap{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.gal-badge{font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.66);line-height:1.5;}
.gal-title{font-size:clamp(17px,1.5vw,22px);font-weight:800;line-height:1.35;text-wrap:balance;}
.gal-sub{font-size:13px;line-height:1.6;color:rgba(255,255,255,.78);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.gal-cap:hover .gal-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;}
.gal-bar{display:flex;align-items:center;gap:10px;margin-top:14px;}
.gal-track{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden;}
.gal-fill{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left center;animation:galFill 5s linear forwards;}
html[dir="rtl"] .gal-fill{transform-origin:right center;}
.acts-gal:hover .gal-fill,.acts-gal:has(:focus-visible) .gal-fill,.acts-gal:focus-visible .gal-fill{animation-play-state:paused;}   /* hold the slide while the visitor looks */
@keyframes galFill{to{transform:scaleX(1);}}
.gal-btn{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--ink);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s;}
.gal-btn:hover:not(:disabled){background:var(--ink);color:var(--bg);border-color:var(--ink);}
.gal-btn:disabled{opacity:.35;cursor:default;}
.gal-next svg{transform:scaleX(-1);}
html[dir="rtl"] .gal-prev svg{transform:scaleX(-1);}
html[dir="rtl"] .gal-next svg{transform:none;}
.gal-thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding:3px;}
.gal-thumbs::-webkit-scrollbar{display:none;}
.gal-thumb{flex:none;width:78px;aspect-ratio:4/3;padding:0;border:0;background:var(--paper);cursor:pointer;overflow:hidden;
  opacity:.5;outline:1px solid var(--line);transition:opacity .3s,outline-color .3s;}
.gal-thumb image-slot{display:block;width:100%;height:100%;}
.gal-thumb .ms-media{width:100%;height:100%;object-fit:cover;}
.gal-thumb:hover{opacity:.85;}
.gal-thumb.is-on{opacity:1;outline:2px solid var(--accent);}
.act-reel{display:none;}

@media(max-width:900px){
  .acts-layout{grid-template-columns:1fr;}
  .acts-gal{display:none;}
  .act{opacity:1;transform:none;}
  .act-cat{color:var(--ink);}
  .act-desc,.act.is-active .act-desc{max-height:160px;opacity:1;transform:none;margin-top:12px;}
  .act-meta,.act.is-active .act-meta{max-height:30px;opacity:1;margin-top:12px;}
  .act-go{display:none;}
  /* each sector card carries its own swipeable strip of project photos */
  .act-reel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(var(--pad) * -1);padding:0 var(--pad) clamp(24px,3.2vh,36px);scroll-padding:0 var(--pad);}
  .act-reel::-webkit-scrollbar{display:none;}
  .act-reel-card{flex:0 0 min(80%,420px);margin:0;scroll-snap-align:start;position:relative;aspect-ratio:4/3;overflow:hidden;
    background:var(--paper);border:1px solid var(--line);}
  .act-reel-card image-slot{display:block;width:100%;height:100%;}
  .act-reel-card .ms-media{width:100%;height:100%;object-fit:cover;}
  .act-reel-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,12,18,.8));pointer-events:none;}
  .act-reel-card figcaption{position:absolute;inset:auto 0 0;z-index:1;padding:14px 16px;color:#fff;display:flex;flex-direction:column;gap:4px;}
  .act-reel-card b{font-size:14px;font-weight:700;line-height:1.4;}
  .act-reel-card small{font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.75);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
}
@media(prefers-reduced-motion:reduce){
  .acts-sec .act{opacity:1;transform:none;}
  .gal-slide.is-on .ms-media,.gal-frame,.gal-cap{animation:none;}
}

/* ---- CTA band (dark, full-bleed) ---- */
.cta-band{position:relative;overflow:hidden;background:#0a0e14;color:#eef1f5;
  padding:clamp(82px,14vh,168px) 0;isolation:isolate;}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 95% at 88% 8%, color-mix(in oklab,var(--accent) 30%,transparent) 0%, transparent 55%),
    radial-gradient(90% 80% at 6% 100%, color-mix(in oklab,var(--accent) 14%,transparent) 0%, transparent 60%);}
.cta-dwg{position:absolute;top:clamp(20px,3.4vh,40px);right:var(--pad);z-index:1;
  font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.1em;
  text-align:right;color:rgba(231,235,241,.28);}
.cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.34fr .66fr;
  gap:clamp(36px,5vw,80px);align-items:end;}

.cta-kicker{display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--accent);margin-bottom:clamp(22px,3.4vh,34px);}
.cta-kicker i{width:26px;height:1px;background:var(--accent);display:inline-block;}
.cta-h{font-size:clamp(36px,5.12vw,83px);font-weight:800;line-height:.96;letter-spacing:-.03em;text-wrap:balance;}
.cta-h em{font-style:normal;color:var(--accent);}
.cta-sub{margin-top:clamp(22px,3vh,32px);max-width:50ch;
  font-size:clamp(15px,1.15vw,18px);line-height:1.66;color:rgba(231,235,241,.62);text-wrap:pretty;}

.cta-acts{margin-top:clamp(34px,5vh,50px);display:flex;align-items:center;gap:clamp(22px,3vw,40px);flex-wrap:wrap;}
.cta-primary{display:inline-flex;align-items:center;gap:12px;
  padding:18px 34px;border-radius:46px;background:var(--accent);color:#fff;
  font-size:16px;font-weight:600;letter-spacing:.01em;position:relative;overflow:hidden;
  box-shadow:0 14px 40px -14px color-mix(in oklab,var(--accent) 75%,transparent);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,background .3s;}
.cta-primary i{font-style:normal;font-size:18px;transition:transform .4s cubic-bezier(.16,1,.3,1);}
.cta-primary:hover{transform:translateY(-3px);background:#2f96d6;
  box-shadow:0 22px 52px -16px color-mix(in oklab,var(--accent) 88%,transparent);}
.cta-primary:hover i{transform:translate(4px,-4px);}
.cta-secondary{display:flex;flex-direction:column;gap:5px;position:relative;padding-bottom:4px;}
.cta-sec-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(231,235,241,.5);}
.cta-sec-num{font-size:19px;font-weight:700;letter-spacing:.01em;color:#eef1f5;
  background:linear-gradient(var(--accent),var(--accent)) left bottom / 0% 1.5px no-repeat;transition:background-size .4s ease;padding-bottom:2px;}
.cta-secondary:hover .cta-sec-num{background-size:100% 1.5px;}

.cta-creds{list-style:none;display:flex;flex-direction:column;}
.cta-creds li{display:flex;align-items:baseline;gap:16px;padding:clamp(15px,2vh,20px) 0;
  border-top:1px solid rgba(255,255,255,.13);}
.cta-creds li:last-child{border-bottom:1px solid rgba(255,255,255,.13);}
.cta-creds .cc-k{flex:0 0 auto;min-width:2.4ch;font-size:clamp(26px,2.7vw,36px);font-weight:800;
  letter-spacing:-.03em;line-height:1;color:#fff;}
.cta-creds .cc-v{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:rgba(231,235,241,.56);}

/* entrance */
.cta-main>*,.cta-creds li{opacity:0;transform:translateY(22px);}
.cta-band.is-in .cta-main>*,.cta-band.is-in .cta-creds li{opacity:1;transform:none;
  transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);}
.cta-band.is-in .cta-main>*:nth-child(2){transition-delay:.07s;}
.cta-band.is-in .cta-main>*:nth-child(3){transition-delay:.13s;}
.cta-band.is-in .cta-main>*:nth-child(4){transition-delay:.19s;}
.cta-band.is-in .cta-creds li:nth-child(1){transition-delay:.16s;}
.cta-band.is-in .cta-creds li:nth-child(2){transition-delay:.23s;}
.cta-band.is-in .cta-creds li:nth-child(3){transition-delay:.3s;}
.cta-band.is-in .cta-creds li:nth-child(4){transition-delay:.37s;}

@media(max-width:900px){
  .cta-inner{grid-template-columns:1fr;gap:clamp(34px,6vh,52px);align-items:start;}
  .cta-dwg{display:none;}
  .cta-creds{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,5vw,48px);}
  .cta-creds li:nth-child(3),.cta-creds li:nth-child(4){border-top:1px solid rgba(255,255,255,.13);}
}
@media(prefers-reduced-motion:reduce){
  .cta-main>*,.cta-creds li{opacity:1;transform:none;}
}

.news2-sec{padding:clamp(70px,11vh,140px) 0;border-top:1px solid var(--line);}
.news2-head{margin-bottom:clamp(34px,5vh,60px);}
.news2-title{font-size:clamp(24px,2.88vw,42px);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin-top:16px;}
.news2-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:start;}

/* left: featured caption + horizontal chip strip (distinct from the activities index) */
.news2-panel{display:flex;flex-direction:column;gap:clamp(26px,4vh,46px);align-self:stretch;min-width:0;}
.nv-feature{position:relative;transition:opacity .34s ease,transform .5s cubic-bezier(.16,1,.3,1);}
.nv-feature.is-fading{opacity:0;transform:translateY(8px);}
.nv-line{display:flex;align-items:center;gap:18px;margin-bottom:clamp(16px,2.4vh,26px);}
.nv-num{font-size:clamp(41px,4.48vw,69px);font-weight:800;line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.4px var(--accent);text-stroke:1.4px var(--accent);}
.nv-tagwrap{display:flex;flex-direction:column;gap:8px;}
.nv-tag{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);border:1px solid color-mix(in oklab,var(--accent) 45%,transparent);
  border-radius:30px;padding:5px 13px;}
.nv-date{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-faint);}
.nv-title{font-size:clamp(22px,2.48vw,37px);font-weight:800;line-height:1.04;letter-spacing:-.02em;
  text-wrap:balance;margin-bottom:clamp(14px,2vh,22px);max-width:18ch;min-height:2.1em;}
.nv-desc{font-size:15px;line-height:1.66;color:var(--ink-soft);max-width:50ch;min-height:5em;}

.nv-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto;min-width:0;}
.nv-chip{display:flex;flex-direction:column;gap:7px;align-items:flex-start;
  background:none;border:1px solid var(--line);border-radius:12px;padding:12px 16px;cursor:pointer;
  font:inherit;color:inherit;min-width:0;text-align:left;
  transition:border-color .3s,background .3s,transform .4s cubic-bezier(.16,1,.3,1);}
.nv-chip b{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--ink-faint);transition:color .3s;}
.nv-chip span{font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--ink-soft);transition:color .3s;}
.nv-chip:hover{border-color:var(--ink-soft);}
.nv-chip.is-active{background:var(--ink);border-color:var(--ink);transform:translateY(-2px);}
.nv-chip.is-active b{color:var(--accent);}
.nv-chip.is-active span{color:var(--bg);}

/* right: photo collage that swaps per item */
.news2-stage{position:sticky;top:clamp(80px,12vh,120px);aspect-ratio:7/5;width:100%;}
.n2-gal{display:grid;grid-template-columns:1.5fr 1fr;grid-auto-rows:1fr;gap:10px;
  position:absolute;inset:0;
  opacity:0;visibility:hidden;transform:scale(.985);
  transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1),visibility .55s;}
.n2-gal.is-active{opacity:1;visibility:visible;transform:none;}
.n2-gal image-slot{display:block;width:100%;height:100%;overflow:hidden;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);}
.n2-gal image-slot:first-child{grid-row:1 / -1;}

@media(max-width:900px){
  .news2-grid{grid-template-columns:1fr;gap:34px;}
  .news2-stage{position:relative;top:0;order:-1;}
  .nv-title{max-width:none;}
  .nv-strip{grid-template-columns:repeat(2,1fr);}
}

/* ---- dark footer ---- */
.footer{background:#0c1118;color:#e7ebf1;padding:clamp(70px,11vh,130px) 0 40px;}
.footer .foot-top{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-bottom:clamp(50px,8vh,90px);}
.foot-h{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:#7e8a9c;display:block;margin-bottom:14px;}
.foot-col p{font-size:17px;line-height:1.7;}
.foot-col a{transition:color .3s;} .foot-col a:hover{color:var(--accent);}
.foot-mark{font-weight:900;font-size:clamp(38px,10vw,132px);line-height:.9;letter-spacing:-.03em;
  text-align:center;color:#fff;padding:18px 0 14px;white-space:nowrap;width:fit-content;max-width:100%;margin-inline:auto;}
.foot-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);padding-top:24px;
  font-family:var(--mono);font-size:12px;color:#7e8a9c;}

/* ---- splash (dots assemble into the logo) ---- */
/* lock page scroll for as long as the splash is on screen; #splash is removed
   the instant the intro finishes, which releases the lock automatically */
html:has(#splash),body:has(#splash){overflow:hidden;}
.splash{position:fixed;inset:0;z-index:50;overflow:hidden;}
.splash-bg{position:absolute;inset:0;background:var(--bg);}
#splashCanvas{position:absolute;inset:0;}
.splash-logo svg{width:100%;height:100%;display:block;}

/* ---- header brand logo ---- */
.brand-logo{opacity:0;transition:opacity .35s ease;}
.brand-link{display:inline-flex;text-decoration:none;cursor:pointer;}
.brand-text{display:flex;gap:1px;font-weight:900;font-size:clamp(22px,2.4vw,30px);letter-spacing:.12em;color:var(--ink);font-family:var(--sans);}
.brand-text b{color:var(--accent);}
.brand-mark{display:block;height:1.05em;width:auto;overflow:visible;}
.brand-mark .bm-ink{fill:currentColor;}
.brand-mark .bm-accent{fill:var(--accent,#2287c6);}

/* enter */
.topbar,.rail{opacity:0;transition:opacity 1s ease .2s;}
body.ready .topbar,body.ready .rail{opacity:1;}

@media(max-width:900px){
  .grid-sec{padding:clamp(60px,10vh,110px) 0 clamp(40px,7vh,80px);}
  .sec-title{margin-bottom:clamp(30px,5vh,52px);}
  .fgrid{grid-template-columns:1fr;}
  .fcard{padding:26px 0;border-bottom:1px solid var(--line);}
  .fcard:first-child{padding-top:0;}
  .fcard:not(:first-child){padding-left:0;}
  .fcard:last-child{border-bottom:0;}
  .fgrid .gl{display:none;}
  .news{grid-template-columns:1fr;gap:30px;}
  .footer .foot-top{grid-template-columns:1fr;gap:28px;}
  .topbar .meta{display:none;}
  .topbar .wordmark{grid-column:2;}
  .topbar .actions{grid-column:3;}
}
@media(prefers-reduced-motion:reduce){.scrollcue i::after{animation:none;}}

/* compact top nav on phones */
@media(max-width:600px){
  .topbar{padding:13px 16px;}
  .topbar .actions{gap:10px;}
  .topbar .lang{display:none;}
  .topbar .btn{padding:9px 15px;font-size:12px;gap:6px;white-space:nowrap;}
  .topbar .brand-text{font-size:20px;letter-spacing:.1em;}
}

/* ===========================================================
   ABOUT — "enter the screen" (Lusion-style scroll expansion)
   =========================================================== */
.about{position:relative;height:520vh;background:var(--bg);border-top:1px solid var(--line);z-index:2;}
.about-stage{position:sticky;top:0;width:100%;height:100vh;overflow:hidden;background:var(--bg);}

/* ---- opening view: editorial block beside the resting video ----
   left/width are set by about.js (text on the reading-start side); it fades
   and drifts outward as the screen opens. */
.about-desc{position:absolute;top:50%;left:var(--pad);transform:translateY(-50%);
  width:min(40vw,520px);z-index:5;text-align:start;font-family:var(--sans);
  display:flex;flex-direction:column;align-items:flex-start;will-change:opacity,transform;}
.ad-kicker{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);}
.ad-kicker i{display:block;width:34px;height:1px;background:var(--accent);}
.ad-title{margin-top:clamp(16px,2.4vh,24px);font-size:clamp(26px,2.32vw,40px);font-weight:800;line-height:1.03;
  letter-spacing:-.025em;color:var(--ink);text-wrap:balance;}
.ad-title em{font-style:normal;color:var(--accent);}
.ad-lead{margin-top:clamp(14px,2.2vh,22px);max-width:44ch;font-size:clamp(15px,1.05vw,17px);line-height:1.75;
  color:var(--ink-soft);text-wrap:pretty;}

/* chapter index — previews the four steps; each row jumps to its step */
.ad-chapters{list-style:none;width:100%;margin-top:clamp(22px,4vh,40px);border-top:1px solid var(--ink);}
.ad-chapter{appearance:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  width:100%;padding:clamp(10px,1.5vh,14px) 2px;border:0;border-bottom:1px solid var(--line);background:none;
  font:inherit;color:var(--ink);text-align:start;cursor:pointer;position:relative;}
.ad-chapter::after{content:"";position:absolute;inset-inline-start:0;bottom:-1px;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:var(--from,left);transition:transform .55s cubic-bezier(.16,1,.3,1);}
.ad-ch-no{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--accent);}
.ad-ch-name{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;}
.ad-chapter i{font-style:normal;font-size:15px;color:var(--ink-faint);
  transition:transform .4s cubic-bezier(.16,1,.3,1),color .3s;}
.ad-chapter:hover::after,.ad-chapter:focus-visible::after{transform:scaleX(1);}
.ad-chapter:hover i,.ad-chapter:focus-visible i{color:var(--accent);transform:translate(2px,2px);}
.ad-chapter:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

/* scroll cue — a small mouse with a falling dot */
.ad-cue{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(20px,3.6vh,34px);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);}
.ad-cue-mouse{position:relative;width:18px;height:28px;border:1.5px solid var(--ink-soft);border-radius:10px;opacity:.8;}
.ad-cue-mouse::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;
  border-radius:2px;background:var(--accent);animation:adCue 1.8s cubic-bezier(.6,0,.4,1) infinite;}
@keyframes adCue{0%{transform:translateY(0);opacity:0}25%{opacity:1}70%{transform:translateY(9px);opacity:0}100%{opacity:0}}

/* resting-video HUD: caption chip + expand glyph */
.af-hud{position:absolute;inset:0;z-index:3;pointer-events:none;will-change:opacity;}
.af-chip{position:absolute;top:clamp(14px,1.6vw,22px);inset-inline-start:clamp(14px,1.6vw,22px);
  display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 12px;border-radius:999px;
  background:rgba(8,12,18,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);color:#eef3f9;font-size:12px;font-weight:500;letter-spacing:.01em;}
.af-chip i{width:7px;height:7px;border-radius:50%;background:#ef5536;box-shadow:0 0 0 0 rgba(239,85,54,.6);
  animation:afPulse 2s ease-out infinite;}
@keyframes afPulse{0%{box-shadow:0 0 0 0 rgba(239,85,54,.55)}70%{box-shadow:0 0 0 9px rgba(239,85,54,0)}100%{box-shadow:0 0 0 0 rgba(239,85,54,0)}}
.af-expand{position:absolute;bottom:clamp(14px,1.6vw,22px);inset-inline-end:clamp(14px,1.6vw,22px);
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.88);color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.af-expand svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* short laptop screens: drop the chapter index rather than crowd the title */
@media(max-height:700px) and (min-width:821px){
  .ad-chapters{display:none;}
  .ad-title{font-size:clamp(28px,3vw,44px);}
}
@media(prefers-reduced-motion:reduce){
  .ad-cue-mouse::after,.af-chip i{animation:none;}
}

/* the screen / tablet — geometry driven entirely by JS */
.about-frame{position:absolute;z-index:3;contain:layout;will-change:width,height,left,top;}
/* no device frame, no shadow — just the video with rounded corners */
.af-bezel{width:100%;height:100%;will-change:border-radius;}
.af-screen{position:relative;width:100%;height:100%;overflow:hidden;background:#05070b;}
.af-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.af-overlay{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(135% 130% at 50% 46%,rgba(4,8,14,.46) 0%,rgba(4,8,14,.74) 66%,rgba(4,8,14,.88) 100%);}

/* content that lives over the video and changes with scroll */
.af-content{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  padding:0 clamp(28px,8vw,140px);opacity:0;pointer-events:none;}
.afc-step{position:absolute;max-width:800px;text-align:center;color:#eef2f8;will-change:opacity,transform;
  text-shadow:0 2px 28px rgba(4,8,14,.72),0 1px 4px rgba(4,8,14,.6);}
.afc-step .afc-no{font-family:var(--mono);font-size:13px;letter-spacing:.26em;color:#76d3ff;
  display:block;margin-bottom:24px;}
.afc-step h3{font-size:clamp(26px,3.52vw,53px);font-weight:800;line-height:1.04;letter-spacing:-.02em;
  margin-bottom:22px;text-wrap:balance;}
.afc-step p{font-size:clamp(15px,1.2vw,20px);line-height:1.8;color:rgba(231,235,241,.82);text-wrap:pretty;}
.afc-step.fa{direction:rtl;font-family:var(--fa);}
.afc-step.fa .afc-no{direction:ltr;}
.afc-note{margin-top:30px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:rgba(118,211,255,.65);}

/* intro step — editorial stat panel over the video */
.afc-step--intro{position:absolute;max-width:none;width:min(1160px,100%);text-align:left;
  text-shadow:0 2px 30px rgba(5,9,16,.45);}
.afc-step--intro .afc-no{position:static;margin-bottom:22px;}
.afc-intro-lead{max-width:660px;margin-bottom:clamp(40px,6.5vh,76px);}
.afc-intro-lead h3{font-size:clamp(27px,3.36vw,51px);font-weight:800;line-height:1.02;
  letter-spacing:-.025em;margin-bottom:24px;}
.afc-intro-lead p{font-size:clamp(15px,1.2vw,19px);line-height:1.75;color:rgba(236,240,247,.9);
  max-width:58ch;}
.afc-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(231,235,241,.24);}
.afc-stat{padding:clamp(22px,3vh,32px) clamp(20px,2.4vw,36px) 0;}
.afc-stat:first-child{padding-left:0;}
.afc-stat:not(:first-child){border-left:1px solid rgba(231,235,241,.18);}
.afc-stat .n{display:flex;align-items:baseline;gap:7px;font-size:clamp(29px,3.52vw,53px);
  font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff;}
.afc-stat .n small{font-size:.4em;font-weight:600;letter-spacing:0;color:#76d3ff;}
.afc-stat .l{display:block;margin-top:13px;font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;color:rgba(236,240,247,.72);}
.afc-foot{margin-top:clamp(20px,3vh,30px);font-size:clamp(13px,1vw,15px);line-height:1.7;
  color:rgba(236,240,247,.68);max-width:96ch;}
.afc-foot b{color:#9fd4f5;font-weight:600;}

/* group / subsidiaries step */
.afc-step--group{position:absolute;max-width:none;width:min(1200px,100%);text-align:left;
  text-shadow:0 1px 18px rgba(4,8,14,.5);}
.afc-group-head{margin-bottom:clamp(26px,4.2vh,46px);}
.afc-group-head .afc-no{position:static;margin-bottom:18px;}
.afc-group-head h3{font-size:clamp(26px,3.2vw,46px);font-weight:800;line-height:1.02;letter-spacing:-.025em;}
.afc-subs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,28px);}
.afc-sub{background:rgba(8,12,18,.5);border:1px solid rgba(231,235,241,.14);border-radius:14px;
  padding:clamp(20px,2.2vw,30px);text-shadow:none;}
.afc-sub-logo{width:72px;height:72px;border-radius:13px;background:#fff;display:flex;
  align-items:center;justify-content:center;padding:13px;margin-bottom:20px;}
.afc-sub-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.afc-sub h4{font-size:clamp(17px,1.35vw,21px);font-weight:800;letter-spacing:-.01em;
  margin-bottom:18px;color:#fff;line-height:1.2;}
.afc-sub-meta{display:flex;flex-direction:column;gap:11px;}
.afc-sub-meta>div{display:flex;flex-direction:column;gap:3px;}
.afc-sub-meta dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#76d3ff;}
.afc-sub-meta dd{font-size:14px;line-height:1.5;color:rgba(236,240,247,.88);}
@media(max-width:820px){
  .afc-subs{grid-template-columns:1fr;gap:12px;}
  .afc-sub{padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;}
  .afc-sub-logo{width:50px;height:50px;padding:8px;margin-bottom:0;grid-row:1 / span 2;}
  .afc-sub h4{margin-bottom:6px;font-size:15px;}
  .afc-sub-meta{gap:0;}
  .afc-sub-meta>div:not(:first-child){display:none;}
  .afc-sub-meta dt{display:none;}
  .afc-sub-meta dd{font-size:12.5px;color:rgba(236,240,247,.7);}
}

/* history timeline step */
.afc-step--time{position:absolute;max-width:none;width:min(1280px,100%);text-align:left;
  text-shadow:0 1px 18px rgba(4,8,14,.5);}
.afc-time-head{margin-bottom:clamp(26px,4.5vh,52px);}
.afc-time-head .afc-no{position:static;margin-bottom:16px;}
.afc-time-head h3{font-size:clamp(24px,2.88vw,43px);font-weight:800;line-height:1.04;letter-spacing:-.025em;}
.afc-timeline{position:relative;display:grid;grid-template-columns:repeat(10,1fr);
  column-gap:clamp(4px,.6vw,12px);min-height:clamp(300px,44vh,420px);
  padding:0 clamp(44px,5vw,90px);}
.aft-spine{position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(231,235,241,.32) 7%,rgba(231,235,241,.32) 93%,transparent);}
.aft-item{position:relative;}
.aft-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50%;background:#76d3ff;
  box-shadow:0 0 0 4px rgba(118,211,255,.16);z-index:2;}
.aft-card{position:absolute;left:50%;transform:translateX(-50%);width:clamp(108px,11vw,150px);text-align:center;}
.aft-up .aft-card{bottom:calc(50% + 26px);}
.aft-down .aft-card{top:calc(50% + 26px);}
.aft-card::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:1px;height:16px;background:rgba(231,235,241,.26);}
.aft-up .aft-card::after{bottom:-20px;}
.aft-down .aft-card::after{top:-20px;}
.aft-yr{display:block;font-weight:800;font-size:clamp(17px,1.5vw,24px);letter-spacing:-.01em;
  color:#fff;margin-bottom:7px;}
.aft-card p{font-size:clamp(10.5px,.8vw,12.5px);line-height:1.4;color:rgba(236,240,247,.78);}
.aft-item.is-now .aft-node{background:#86d36b;box-shadow:0 0 0 5px rgba(134,211,107,.2);width:13px;height:13px;}
.aft-item.is-now .aft-yr{color:#a7e58c;}
/* anchor the end cards inward so they never clip the viewport edges */
.aft-item:first-child .aft-card{left:0;transform:none;text-align:left;}
.aft-item:last-child .aft-card{left:auto;right:0;transform:none;text-align:right;}
.aft-item:first-child .aft-card::after,.aft-item:last-child .aft-card::after{display:none;}
@media(max-width:820px){
  .afc-timeline{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;min-height:330px;
    padding-bottom:6px;scrollbar-width:none;}
  .afc-timeline::-webkit-scrollbar{display:none;}
  .aft-spine{display:none;}
  .aft-item{flex:0 0 58vw;scroll-snap-align:center;}
  .aft-card{width:54vw;}
}

/* facilities step — two plants side by side */
.afc-sites{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid rgba(231,235,241,.24);}
.afc-site{padding:clamp(24px,3.4vh,38px) clamp(28px,3vw,54px) 0;}
.afc-site:first-child{padding-left:0;}
.afc-site:not(:first-child){border-left:1px solid rgba(231,235,241,.18);}
.afc-site-no{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  color:#76d3ff;margin-bottom:16px;}
.afc-site .n{margin-bottom:16px;}
.afc-site p{font-size:clamp(14px,1.05vw,16px);line-height:1.7;color:rgba(236,240,247,.86);max-width:42ch;}
@media(max-width:820px){
  .afc-sites{grid-template-columns:1fr;gap:0;}
  .afc-site{padding:clamp(18px,2.6vh,26px) 0 0;}
  .afc-site:not(:first-child){border-left:0;border-top:1px solid rgba(231,235,241,.18);}
}
@media(max-width:820px){
  .afc-stats{grid-template-columns:repeat(2,1fr);gap:0;}
  .afc-stat{padding:clamp(16px,2.4vh,24px) clamp(14px,4vw,22px) 0;}
  .afc-stat:nth-child(3){border-left:0;padding-left:0;}
  .afc-stat:nth-child(odd){padding-left:0;}
  .afc-stat:nth-child(even){border-left:1px solid rgba(231,235,241,.18);}
}

@media(max-width:820px){
  /* phones/tablets: centred block above the video; keep it short */
  .about-desc{width:min(88vw,520px);left:50%;top:clamp(78px,11vh,112px);
    transform:translateX(-50%);text-align:center;align-items:center;}
  .ad-title{font-size:clamp(28px,7.4vw,40px);}
  .ad-lead{font-size:14.5px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .ad-chapters,.ad-cue{display:none;}
}
/* phones: keep the over-video content from overflowing the small portrait screen */
@media(max-width:600px){
  /* steps are position:absolute, so their %-width ignores .af-content padding and
     bleed to the edges — give each step its own inset via box-sizing + padding */
  .af-content{padding:0;}
  .afc-step,.afc-step--intro,.afc-step--group,.afc-step--time,.afc-step--cap,.afc-step--cert{
    width:100%!important;max-width:100%!important;left:0;box-sizing:border-box;
    padding-left:20px;padding-right:20px;}
  /* darker scrim so white text stays readable over the bright video when full */
  .af-overlay{background:linear-gradient(180deg,rgba(4,8,14,.84) 0%,rgba(4,8,14,.66) 42%,rgba(4,8,14,.88) 100%);}
  .afc-step h3{font-size:clamp(23px,6.8vw,32px);margin-bottom:16px;}
  .afc-step p{font-size:14.5px;line-height:1.7;}
  .afc-step--intro h3,.afc-intro-lead h3{font-size:clamp(25px,7.4vw,34px);margin-bottom:16px;}
  .afc-intro-lead{margin-bottom:clamp(20px,3.6vh,30px);}
  .afc-intro-lead p{font-size:14.5px;line-height:1.65;}
  .afc-stat{padding-top:clamp(14px,2.2vh,20px);}
  .afc-stat .n{font-size:clamp(25px,7.6vw,38px);}
  .afc-stat .l{font-size:10px;margin-top:9px;}
  .afc-foot{display:none;}
  .afc-group-head h3,.afc-time-head h3,.afc-cap-head h3,.afc-cert-head h3{font-size:clamp(23px,6.8vw,32px);}
  .afc-no{margin-bottom:16px!important;}
}
@media(prefers-reduced-motion:reduce){
  .af-bezel,.about-desc{transition:none!important;}
}

/* capacity / activities gauge step */
.afc-step--cap{position:absolute;max-width:none;width:min(1180px,100%);text-align:left;
  text-shadow:0 1px 18px rgba(4,8,14,.5);}
.afc-cap-head{margin-bottom:clamp(20px,3.4vh,40px);}
.afc-cap-head .afc-no{position:static;margin-bottom:14px;}
.afc-cap-head h3{font-size:clamp(24px,2.88vw,43px);font-weight:800;line-height:1.04;letter-spacing:-.025em;}
.afc-cap-body{display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,5vw,80px);align-items:center;}
.afc-gauge{position:relative;width:clamp(278px,32vw,400px);aspect-ratio:1;flex:none;}
.afg-disc{position:absolute;inset:3%;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(118,211,255,.13),rgba(118,211,255,.04) 58%,transparent 74%);}
.afg-ticks{position:absolute;inset:1%;border-radius:50%;
  background:repeating-conic-gradient(from -90deg,rgba(236,240,247,.34) 0deg .5deg,transparent .5deg 6deg);
  -webkit-mask:radial-gradient(circle,transparent 0 46.5%,#000 46.5% 49.5%,transparent 49.5%);
          mask:radial-gradient(circle,transparent 0 46.5%,#000 46.5% 49.5%,transparent 49.5%);}
.afg-arc{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;}
.afg-arc circle{fill:none;stroke-width:1.3;}
.afg-arc-bg{stroke:rgba(236,240,247,.16);}
.afg-arc-fg{stroke:#76d3ff;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1);
  filter:drop-shadow(0 0 4px rgba(118,211,255,.55));}
.afg-art{position:absolute;inset:15%;border-radius:50%;overflow:hidden;}
.afg-art image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;
  transition:opacity .6s ease;}
.afg-art image-slot.is-on{opacity:.45;}
.afg-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;pointer-events:none;}
.afg-num{font-weight:800;font-size:clamp(29px,3.2vw,48px);letter-spacing:-.02em;line-height:1;color:#fff;}
.afg-unit{font-family:var(--mono);font-size:clamp(12px,1.05vw,15px);letter-spacing:.3em;
  color:#76d3ff;margin-top:11px;}
.afg-node{position:absolute;left:1%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;
  border-radius:50%;background:#fff;color:#0b0f15;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.32);text-shadow:none;}
.afc-cap-list{list-style:none;display:flex;flex-direction:column;}
.cap-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(12px,1.6vw,22px);
  padding:clamp(12px,1.7vh,20px) 4px;border-top:1px solid rgba(236,240,247,.16);cursor:pointer;
  opacity:.5;transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1);}
.cap-item:last-child{border-bottom:1px solid rgba(236,240,247,.16);}
.cap-item.is-active{opacity:1;}
/* scroll drives the active item; hover only hints that a row is clickable */
.cap-item.is-done{opacity:.62;}
.cap-item:not(.is-active):hover{opacity:.78;}
.cap-item{position:relative;}
.cap-item::before{content:"";position:absolute;inset-inline-start:-14px;top:22%;bottom:22%;width:2px;border-radius:2px;
  background:#76d3ff;transform:scaleY(0);transition:transform .45s cubic-bezier(.16,1,.3,1);}
.cap-item.is-active::before{transform:scaleY(1);}
.cap-item.is-active{transform:translateX(6px);}
.ci-no{font-family:var(--mono);font-size:12px;color:#76d3ff;}
.ci-name{font-size:clamp(15px,1.35vw,20px);font-weight:700;letter-spacing:-.01em;color:#eef2f8;}
.cap-item.is-active .ci-name{color:#fff;}
@media(max-width:820px){
  .afc-cap-body{grid-template-columns:1fr;gap:24px;justify-items:center;}
  .afc-gauge{width:min(70vw,300px);}
  .afc-cap-list{width:100%;}
  .cap-item.is-active{transform:none;}
}

/* standards & principles step */
.afc-step--cert{position:absolute;max-width:none;width:min(1200px,100%);text-align:left;
  text-shadow:0 1px 18px rgba(4,8,14,.5);}
.afc-cert-head{margin-bottom:clamp(20px,3vh,36px);}
.afc-cert-head .afc-no{position:static;margin-bottom:14px;}
.afc-cert-head h3{font-size:clamp(24px,2.88vw,43px);font-weight:800;line-height:1.04;letter-spacing:-.025em;}
.afc-cert-body{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(30px,4.5vw,72px);align-items:center;}
.afc-values{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vh,32px) clamp(22px,2.4vw,38px);}
.afc-val{position:relative;padding-top:16px;border-top:1px solid rgba(236,240,247,.2);}
.afc-val h4{font-size:clamp(16px,1.3vw,20px);font-weight:800;letter-spacing:-.01em;color:#fff;margin-bottom:9px;}
.afc-val p{font-size:clamp(12px,.85vw,13.5px);line-height:1.55;color:rgba(236,240,247,.74);}
.afc-certs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.3vw,20px);}
.cert-card{display:block;background:rgba(8,12,18,.5);border:1px solid rgba(236,240,247,.14);
  border-top:2px solid var(--cc,#76d3ff);border-radius:11px;overflow:hidden;text-shadow:none;
  width:100%;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .4s;}
.cert-card:focus-visible{outline:2px solid var(--cc,#76d3ff);outline-offset:3px;}
.cert-card:hover{transform:translateY(-6px);border-color:rgba(236,240,247,.32);
  box-shadow:0 24px 50px rgba(0,0,0,.42);}
.cert-thumb{aspect-ratio:3/4;background:#fff;overflow:hidden;}
.cert-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.cert-cap{display:flex;flex-direction:column;gap:4px;padding:11px 13px 13px;}
.cert-std{font-weight:800;font-size:clamp(13px,1.05vw,16px);letter-spacing:-.01em;color:#fff;}
.cert-scope{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:rgba(236,240,247,.62);}
@media(max-width:820px){
  .afc-cert-body{grid-template-columns:1fr;gap:26px;}
  .afc-certs{gap:8px;}
  .cert-cap{padding:9px 10px 11px;}
  .cert-std{font-size:12px;}
  .cert-scope{font-size:9px;}
}

/* certificate lightbox */
.cert-lb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,5vh,64px);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s;}
.cert-lb.is-open{opacity:1;visibility:visible;transition:opacity .45s ease;}
.cert-lb-backdrop{position:absolute;inset:0;background:rgba(4,7,12,.72);backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);}
.cert-lb-stage{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  max-width:100%;max-height:100%;}
.cert-lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;
  transform:scale(.6);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease;}
.cert-lb.is-open .cert-lb-fig{transform:scale(1);opacity:1;}
.cert-lb-fig img{max-width:min(86vw,640px);max-height:74vh;width:auto;height:auto;display:block;
  border-radius:6px;background:#fff;box-shadow:0 40px 120px rgba(0,0,0,.6);}
.cert-lb-cap{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;}
.cert-lb-std{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:#fff;}
.cert-lb-scope{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:rgba(236,240,247,.6);}
.cert-lb-close{position:absolute;top:clamp(16px,3vh,30px);right:clamp(16px,3vw,34px);z-index:2;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(236,240,247,.24);
  background:rgba(12,18,26,.6);color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.3s;}
.cert-lb-close:hover{background:rgba(236,240,247,.15);border-color:rgba(236,240,247,.5);transform:rotate(90deg);}

/* ---- about · step progress (number + one bar per step), driven by about.js ---- */
.afc-progress{position:absolute;left:50%;bottom:clamp(18px,4.2vh,40px);z-index:5;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;opacity:0;pointer-events:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(238,243,249,.62);will-change:opacity;}
.afc-pg-num{color:#fff;}
.afc-pg-bars{display:flex;gap:6px;}
.afc-pg-bars i{position:relative;display:block;width:clamp(26px,3vw,46px);height:2px;border-radius:2px;
  background:rgba(238,243,249,.22);overflow:hidden;}
.afc-pg-bars b{position:absolute;inset:0;background:#76d3ff;transform:scaleX(0);transform-origin:left;}
html[dir="rtl"] .afc-progress{direction:rtl;}
html[dir="rtl"] .afc-pg-bars b{transform-origin:right;}
@media(max-width:600px){.afc-progress{bottom:14px;}.afc-pg-bars i{width:22px;}}

/* ---- capacity step · make the scroll-driven switch obvious ---- */
/* node rides the ring to the arc tip (transform set in about-cap.js) */
.afg-node{left:50%;top:50%;transition:transform 1s cubic-bezier(.16,1,.3,1);will-change:transform;}
/* current activity name under the unit */
.afg-name{margin-top:12px;max-width:66%;font-size:clamp(12px,.95vw,14px);font-weight:600;line-height:1.45;
  color:rgba(238,243,249,.8);text-wrap:balance;}
/* every switch: the readout flips in, staggered */
.afg-center.is-swap > *{animation:capSwap .6s cubic-bezier(.16,1,.3,1) both;}
.afg-center.is-swap > .afg-unit{animation-delay:.06s;}
.afg-center.is-swap > .afg-name{animation-delay:.12s;}
@keyframes capSwap{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
/* rows: dim upcoming, keep read ones mid, spotlight the active one */
.cap-item{opacity:.36;border-radius:6px;transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1),background-color .35s;}
.cap-item.is-done{opacity:.6;}
.cap-item.is-active{opacity:1;background:rgba(118,211,255,.08);}
/* per-row progress bar along the bottom — fills as you scroll through it */
.cap-item::after{content:"";position:absolute;inset-inline-start:0;bottom:-1px;width:100%;height:2px;
  background:#76d3ff;transform:scaleX(var(--fill,0));transform-origin:left;pointer-events:none;}
html[dir="rtl"] .cap-item::after{transform-origin:right;}
@media(prefers-reduced-motion:reduce){.afg-center.is-swap > *{animation:none;}.afg-node{transition:none;}}

/* capacity step: list first, gauge after; rows are name-only */
.afc-cap-body{grid-template-columns:minmax(0,1fr) auto;}
.afc-cap-list{order:1;}
.afc-gauge{order:2;}
.cap-item{grid-template-columns:auto 1fr;}
@media(max-width:820px){
  .afc-cap-body{grid-template-columns:1fr;}
  .afc-gauge{order:0;}
}