/* Brand Overview — Figma 739:1425 */
body[data-chapter="overview"] { --dock-y: 168; --dock-x: 160; }

/* brief */
.ov-brief { min-height: 100svh; display: flex; align-items: center; }
.ov-brief__shape { position: absolute; right: calc(-60 * var(--fx)); top: 50%; translate: 0 -50%; width: min(52vw, 100svh); height: auto; fill: none; stroke: #A1A1A1; stroke-width: 1.2; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3.2s var(--ease); vector-effect: non-scaling-stroke; }
.ov-brief__shape path { vector-effect: non-scaling-stroke; }
.ov-brief.is-drawn .ov-brief__shape { stroke-dashoffset: 0; }
.ov-brief__grid { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 62vh; }
.ov-brief__main { max-width: 1040px; display: grid; gap: var(--s-5); align-content: center; }
.ov-brief__lede { color: #fff; }
.ov-brief__label { position: absolute; right: var(--gutter); top: 0; color: rgba(255,255,255,.85); }
.ov-brief__credit { position: absolute; right: var(--gutter); bottom: 0; text-align: right; font-weight: 300; }
.ov-brief__credit b { font-weight: 700; }
.ov-tag { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.ov-tag__head { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.ov-tag .seg { --line: rgba(255,255,255,.3); --fg: #fff; --bg: var(--m-navy); --fg-soft: rgba(255,255,255,.7); }
.ov-tag__stage { position: relative; min-height: 1.3em; font: 600 var(--t-h2)/1.15 var(--font-display); letter-spacing: -.02em; }
.ov-tag__line { position: absolute; inset: 0 auto auto 0; color: var(--m-lilac-2); opacity: 0; transform: translateY(.4em); filter: blur(8px); transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); }
.ov-tag__line.t-ar { font-family: var(--font-ar); font-weight: 700; }
.ov-tag__line.is-on { opacity: 1; transform: none; filter: none; position: relative; }

/* donut */
.ov-donut { min-height: 100svh; display: flex; align-items: center; }
.ov-donut__grid { width: 100%; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-6); align-items: center; }
.ov-donut__text { display: grid; gap: var(--s-4); max-width: 640px; }
.ov-vbtns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.ov-vbtn {
  display: inline-flex; align-items: center; gap: .8em; padding: 1.05em 1.7em; border-radius: 20px;
  background: #411E96; color: #fff; font: 600 clamp(16px, calc(22 * var(--fx)), 22px)/1 var(--font-display);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0); transition: box-shadow .3s, background .3s, transform .4s var(--ease);
}
.ov-vbtn span { font-weight: 300; font-size: 1.4em; line-height: .6; transition: transform .5s var(--ease); }
.ov-vbtn:hover, .ov-vbtn.is-hot { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); transform: translateY(-2px); }
.ov-vbtn:hover span, .ov-vbtn.is-hot span { transform: rotate(90deg); }
.ov-donut__hint { color: rgba(255,255,255,.7); }
.ov-donut__chart svg { width: 100%; max-width: 720px; margin-inline: auto; overflow: visible; }
.dn-seg { cursor: pointer; transition: transform .7s var(--ease), opacity .5s; transform-box: view-box; transform-origin: 0 0; }
.dn-seg path { transition: filter .5s; }
#donut.has-hot .dn-seg:not(.is-hot) { opacity: .42; }
.dn-label { font: 600 22px var(--font-display); pointer-events: none; }
.dn-core { font: 600 26px/1 var(--font-display); fill: #fff; }

/* rings */
.ov-rings__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); align-items: center; }
.ov-rings__chart svg { width: 100%; height: auto; max-height: min(74svh, 820px); overflow: visible; }
.rg-band { cursor: pointer; }
.rg-band circle { fill: #fff; stroke: #fff; stroke-width: 1.5; filter: url(#rg-shadow); transition: fill .45s var(--ease), stroke .45s; }
.rg-band:hover circle, .rg-band:focus-visible circle { fill: #F4F7FF; }
.rg-band.is-active circle { fill: #EEF1FF; stroke: var(--m-purple); }
.rg-band[aria-disabled="true"] { cursor: default; }
.rg-band:focus { outline: none; }
.rg-grow { transform-box: fill-box; transform-origin: 50% 100%; }
.js .ov-rings__chart:not(.is-in) .rg-grow { transform: scale(.2); opacity: 0; }
.ov-rings__chart.is-in .rg-grow { transition: transform 1.4s var(--ease), opacity .8s; transition-delay: calc(var(--k) * 110ms); }
.rg-dot { fill: var(--m-purple); transition: r .4s var(--ease); }
.rg-mark.is-hot .rg-dot, .rg-mark.is-active .rg-dot { r: 19; }
.rg-marks { pointer-events: none; }
.rg-num { font: 700 16px var(--font-display); fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rg-lbl { font: 700 20px var(--font-display); fill: var(--m-navy); text-anchor: middle; pointer-events: none; transition: font-size .4s var(--ease); }
.rg-mark.is-active .rg-lbl { fill: var(--m-purple); }
.rg-core text { font: 600 30px var(--font-display); fill: var(--m-navy); text-anchor: middle; }

.ov-rings__panel { display: grid; gap: var(--s-4); align-content: start; min-height: 520px; }
.ov-rings__tabs { flex-wrap: wrap; border-radius: 20px; }
.vp { display: grid; gap: var(--s-3); }
.vp__n { font: 600 var(--t-micro)/1 var(--font-display); letter-spacing: .2em; color: var(--m-purple); }
.vp__strong li { font-weight: 600; }
.vp .sp-list li::before { color: var(--m-navy); }

/* why now */
.ov-why { min-height: 100svh; }
.ov-why__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6); }
.ov-why__head { position: sticky; top: calc(var(--bar-h) + var(--s-5)); align-self: start; display: grid; gap: var(--s-6); }
.ov-why__tile { width: clamp(72px, calc(130 * var(--fx)), 130px); height: auto; transition: transform 1s var(--ease); }
.ov-why.is-last .ov-why__tile { transform: rotate(90deg) scale(1.08); }
.ov-why__story { display: grid; gap: var(--s-6); padding-block: 16vh 22vh; font-size: clamp(20px, calc(34 * var(--fx)), 34px); line-height: 1.4; }

/* vision / mission */
.ov-vm { display: flex; min-height: 100svh; }
.ov-vm__half { flex: 1 1 0; display: grid; align-content: start; gap: var(--s-5); padding: var(--s-8) var(--gutter); transition: flex-grow .9s var(--ease); scroll-margin-top: 0; }
.ov-vm:hover .ov-vm__half:hover { flex-grow: 1.45; }
.ov-vm__h { display: flex; align-items: center; gap: .45em; font: 600 var(--t-h2)/1 var(--font-display); letter-spacing: -.02em; }
.ov-vm__h img { height: .82em; width: auto; }
.ov-vm .seg { --line: rgba(255,255,255,.3); --fg: #fff; --bg: var(--m-navy); --fg-soft: rgba(255,255,255,.7); justify-self: start; }
.ov-vm__p { max-width: 40ch; }
.ov-vm__body { display: grid; gap: var(--s-3); max-width: 58ch; font-size: var(--t-body); color: rgba(255,255,255,.92); }
.ov-vm__body p:first-child { font: 600 var(--t-lead)/1.35 var(--font-display); color: #fff; }

@media (max-width: 900px) {
  .ov-donut__grid, .ov-rings__grid, .ov-why__grid { grid-template-columns: 1fr; }
  .ov-why__head { position: static; }
  .ov-vm { flex-direction: column; }
  .ov-brief__label, .ov-brief__credit { position: static; margin-top: var(--s-4); }
  .ov-brief__grid { grid-template-columns: 1fr; }
}

/* v2: every value visible — rings stay in view while the cards scroll past */
.ov-rings__grid { align-items: start; }
.ov-rings__chart { position: sticky; top: calc(var(--bar-h) + var(--s-3)); }
.ov-rings__list { display: grid; gap: var(--s-4); min-height: 0; }
.ov-rings__list .vp { padding: var(--s-5); border-radius: var(--r-card); background: #F4F6FD; transition: background .4s, transform .6s var(--ease), box-shadow .4s; scroll-margin-top: calc(var(--bar-h) + 24px); }
.ov-rings__list .vp.is-active { background: #EEF0FE; box-shadow: inset 4px 0 0 var(--m-purple); transform: translateX(-4px); }
.ov-horizon { display: grid; gap: var(--s-5); position: relative; padding-left: 28px; max-width: 46ch; }
.ov-horizon::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--m-violet), rgba(255,255,255,.2)); }
.ov-horizon li { position: relative; display: grid; gap: .5em; }
.ov-horizon li::before { content: ""; position: absolute; left: -28px; top: .35em; width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg); background: var(--m-violet); box-shadow: 0 0 0 5px rgba(126,105,245,.25); }
@media (max-width: 900px) { .ov-rings__chart { position: static; } }
/* both taglines visible (Figma stacks EN over AR); the switch only emphasises one */
.ov-tag__stage { display: grid; gap: .25em; min-height: 0; }
.ov-tag__line, .ov-tag__line.is-on { position: relative; inset: auto; opacity: .45; transform: none; filter: none; transition: opacity .5s var(--ease), transform .6s var(--ease), color .5s; }
.ov-tag__line.is-on { opacity: 1; transform: translateX(6px); color: #fff; }
.ov-tag__line.t-ar { justify-self: start; }