/* Almas Ara — redesign prototype (Phase A). Design system v2 proposal.
   Not production code. Logical properties throughout (RTL + LTR). */

@font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn-33.0.3-wght-arabic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+2066-2069, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-5.3.0-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* same Inter file, scaled so Latin words sit at the height of Persian text in mixed lines */
@font-face { font-family: "Inter Fa"; src: url("../fonts/inter-5.3.0-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; size-adjust: 92%; }

/* ---------------- tokens ---------------- */
:root{
  /* surfaces */
  --ink: #0b0d12;
  --ink-2: #12151c;
  --ink-3: #1a1e27;
  --paper: #f4f1eb;
  --paper-2: #ebe6dc;
  --white: #ffffff;
  /* text */
  --on-ink: #f3f4f6;
  --on-ink-2: #b9bec8;
  --on-ink-3: #7f8592;
  --on-paper: #14171d;
  --on-paper-2: #4b515c;
  --on-paper-3: #7b808a;
  /* lines */
  --line-ink: rgb(255 255 255 / .1);
  --line-ink-2: rgb(255 255 255 / .18);
  --line-paper: rgb(20 23 29 / .12);
  --line-paper-2: rgb(20 23 29 / .22);
  /* accent: champagne (from the existing gem palette, desaturated) */
  --gold: #cfae74;
  --gold-ink: #e3c993;   /* on dark */
  --gold-paper: #8a6a33; /* on light, 4.6:1 */
  /* brand accents */
  --ug: #007934;
  --ug-bright: #19c26a;
  --tt: #1c1c1c;
  --tt-sand: #e7ddcf;
  --tt-clay: #b9825a;
  --iq-blue: #4e8abe;
  --iq-red: #d9272e;

  /* type */
  --font: "Vazirmatn", "Inter Fa", system-ui, sans-serif;
  --fs-display: clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem);
  --fs-h1: clamp(2.3rem, 1.5rem + 3vw, 4.25rem);
  --fs-h2: clamp(1.9rem, 1.35rem + 2vw, 3.1rem);
  --fs-h3: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  /* spacing (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section: clamp(72px, 4rem + 5vw, 136px);
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 14px;
  --radius-l: 22px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 700ms;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{ margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: 1.85; background: var(--ink); color: var(--on-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img{ display: block; max-inline-size: 100%; block-size: auto; }
a{ color: inherit; text-decoration: none; }
h1, h2, h3, h4, p{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.en, bdi{ font-family: "Inter", var(--font); }
.sr{ position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap{ inline-size: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section{ padding-block: var(--section); position: relative; }
.paper{ background: var(--paper); color: var(--on-paper); }
.paper-2{ background: var(--paper-2); color: var(--on-paper); }
.ink-2{ background: var(--ink-2); }

/* ---------------- type primitives ---------------- */
.eyebrow{ display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 600; letter-spacing: .02em; color: var(--gold-ink); }
.eyebrow::before{ content: ""; inline-size: 28px; block-size: 1px; background: currentColor; }
.paper .eyebrow, .paper-2 .eyebrow, .light .eyebrow{ color: var(--gold-paper); }
.display{ font-size: var(--fs-display); line-height: 1.08; font-weight: 800; letter-spacing: -.01em; }
.h1{ font-size: var(--fs-h1); line-height: 1.12; font-weight: 800; }
.h2{ font-size: var(--fs-h2); line-height: 1.2; font-weight: 780; }
.h3{ font-size: var(--fs-h3); line-height: 1.45; font-weight: 700; }
.lead{ font-size: var(--fs-lead); line-height: 1.85; color: var(--on-ink-2); }
.paper .lead, .paper-2 .lead, .light .lead{ color: var(--on-paper-2); }
.muted{ color: var(--on-ink-3); }
.paper .muted, .light .muted{ color: var(--on-paper-3); }
.soft{ color: var(--on-ink-3); }
.paper .soft{ color: var(--on-paper-3); }
:lang(en) .display, :lang(en) .h1, :lang(en) .h2{ letter-spacing: -.025em; line-height: 1.04; }

/* ---------------- buttons & links ---------------- */
.btn{ --bg: var(--on-ink); --fg: var(--ink); display: inline-flex; align-items: center; gap: 12px; min-block-size: 50px; padding: 0 24px; border-radius: 999px; background: var(--bg); color: var(--fg); font-weight: 650; font-size: .95rem; transition: transform var(--t-base) var(--ease), background var(--t-base), box-shadow var(--t-base); position: relative; isolation: isolate; overflow: hidden; }
.btn .arr{ transition: transform var(--t-base) var(--ease); }
@media (hover: hover) { .btn:hover .arr { transform: translateX(-4px); } }
@media (hover: hover) { [dir="ltr"] .btn:hover .arr { transform: translateX(4px); } }
@media (hover: hover) { .btn:hover { box-shadow: 0 10px 30px -12px rgb(0 0 0 / .5); } }
.btn:active{ transform: scale(.98); }
.btn-gold{ --bg: var(--gold); --fg: #17130b; }
.btn-ghost{ background: transparent; color: var(--on-ink); box-shadow: inset 0 0 0 1px var(--line-ink-2); }
@media (hover: hover) { .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--on-ink-2); } }
.paper .btn-ghost, .light .btn-ghost{ color: var(--on-paper); box-shadow: inset 0 0 0 1px var(--line-paper-2); }
.paper .btn:not(.btn-ghost):not(.btn-gold), .light .btn:not(.btn-ghost):not(.btn-gold){ --bg: var(--on-paper); --fg: var(--paper); }
.btn-sm{ min-block-size: 40px; padding: 0 16px; font-size: .875rem; }
.ext::after{ content: "↗"; font-family: "Inter"; font-size: .9em; margin-inline-start: 6px; display: inline-block; }
.link{ display: inline-flex; align-items: center; gap: 10px; font-weight: 650; border-block-end: 1px solid currentColor; padding-block-end: 2px; transition: gap var(--t-base) var(--ease); }
@media (hover: hover) { .link:hover { gap: 16px; } }

.pill{ display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgb(207 174 116 / .16); color: var(--gold-ink); }
.paper .pill, .light .pill{ background: rgb(138 106 51 / .12); color: var(--gold-paper); }
.chip{ font-size: var(--fs-small); padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-ink-2); color: var(--on-ink-2); }
.paper .chip, .light .chip{ box-shadow: inset 0 0 0 1px var(--line-paper-2); color: var(--on-paper-2); }

/* ---------------- header ---------------- */
.hdr{ position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50; transition: background var(--t-base), box-shadow var(--t-base), color var(--t-base); }
.hdr.is-solid, .hdr.static{ background: rgb(11 13 18 / .82); backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 var(--line-ink); }
.hdr.light.is-solid, .hdr.light.static{ background: rgb(244 241 235 / .86); box-shadow: 0 1px 0 var(--line-paper); }
.hdr.light{ color: var(--on-paper); }
.hdr-in{ display: flex; align-items: center; gap: var(--s6); block-size: 76px; }
.logo{ display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo svg{ inline-size: 34px; block-size: 34px; color: var(--gold); }
.logo b{ display: block; font-size: 1.12rem; font-weight: 800; line-height: 1.1; }
.logo small{ display: block; font-family: "Inter"; font-size: .6rem; letter-spacing: .32em; color: var(--on-ink-3); line-height: 1.4; }
.hdr.light .logo small{ color: var(--on-paper-3); }
.nav{ display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav > a, .nav > .dd > button{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: .95rem; font-weight: 550; color: inherit; opacity: .82; transition: opacity var(--t-fast), background var(--t-fast); }
.nav > a[aria-current="page"] { opacity: 1; background: rgb(255 255 255 / .06); }
@media (hover: hover) { .nav > a:hover, .nav > .dd > button:hover { opacity: 1; background: rgb(255 255 255 / .06); } }
.hdr.light .nav > a[aria-current="page"] { background: rgb(20 23 29 / .06); }
@media (hover: hover) { .hdr.light .nav > a:hover, .hdr.light .nav > .dd > button:hover { background: rgb(20 23 29 / .06); } }
.nav .caret{ inline-size: 10px; transition: transform var(--t-base) var(--ease); }
.dd{ position: relative; }
.dd .caret{ transition: transform var(--t-base) var(--ease); }
.dd-panel{ position: absolute; z-index: 2; inset-block-start: calc(100% + 12px); inset-inline-start: -16px; inline-size: 400px; padding: 8px; border-radius: var(--radius-l); background: #fbfaf7; color: var(--on-paper); box-shadow: 0 24px 64px -24px rgb(0 0 0 / .5), 0 0 0 1px rgb(0 0 0 / .05); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 180ms var(--ease), transform 220ms var(--ease), visibility 0s 220ms; }
/* invisible bridge: covers the 12px between trigger and panel, so the pointer never "leaves" */
.dd-panel::before{ content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: 14px; }
.dd[data-open] .dd-panel{ opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd[data-open] .caret{ transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .dd:not([data-dismissed]):hover .dd-panel{ opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .dd:not([data-dismissed]):hover .caret{ transform: rotate(180deg); }
}
.dd-item{ display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 16px; padding: 14px; border-radius: 14px; transition: background var(--t-fast); }
.dd-item:focus-visible{ outline: 2px solid var(--gold-paper); outline-offset: -2px; }
.dd-item:focus-visible { background: var(--paper-2); }
@media (hover: hover) { .dd-item:hover { background: var(--paper-2); } }
.dd-logo{ block-size: 40px; display: flex; align-items: center; }
.dd-logo img{ block-size: 18px; inline-size: auto; }
.dd-item.ug .dd-logo img{ block-size: 14px; }
.dd-item b{ display: block; font-size: .95rem; }
.dd-item span{ display: block; font-size: .8rem; color: var(--on-paper-3); line-height: 1.6; }
.dd-item .arr{ color: var(--on-paper-3); }
.dd-foot{ display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 6px; margin-block-start: 6px; border-block-start: 1px solid var(--line-paper); font-size: .8rem; color: var(--on-paper-3); }
.hdr-tools{ display: flex; align-items: center; gap: 10px; }
.lang{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-ink-2); }
.hdr.light .lang{ box-shadow: inset 0 0 0 1px var(--line-paper-2); }
.lang svg{ inline-size: 15px; }
.menu-btn{ display: none; inline-size: 44px; block-size: 44px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-ink-2); place-items: center; }
.hdr.light .menu-btn{ box-shadow: inset 0 0 0 1px var(--line-paper-2); }
.menu-btn i{ display: block; inline-size: 18px; block-size: 1.5px; background: currentColor; position: relative; }
.menu-btn i::before, .menu-btn i::after{ content: ""; position: absolute; inset-inline: 0; block-size: 1.5px; background: currentColor; }
.menu-btn i::before{ inset-block-start: -6px; } .menu-btn i::after{ inset-block-start: 6px; }

/* mobile sheet */
.sheet{ position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--on-ink); display: flex; flex-direction: column; padding: 0 var(--gutter) var(--s6); opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease), visibility var(--t-base); overflow-y: auto; }
.sheet[data-open]{ opacity: 1; visibility: visible; }
.sheet-top{ display: flex; align-items: center; justify-content: space-between; block-size: 64px; }
.sheet-close{ inline-size: 44px; block-size: 44px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-ink-2); font-size: 1.3rem; }
.sheet-nav{ margin-block-start: var(--s5); }
.sheet-nav > a{ display: flex; justify-content: space-between; align-items: center; padding-block: 16px; font-size: 1.6rem; font-weight: 750; border-block-end: 1px solid var(--line-ink); }
.sheet-nav > a .arr{ font-size: 1rem; color: var(--on-ink-3); }
.sheet-label{ margin-block: var(--s6) var(--s3); font-size: var(--fs-small); color: var(--on-ink-3); }
.sheet-brands{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sheet-brands a{ display: grid; gap: 10px; justify-items: center; padding: 18px 8px 14px; border-radius: var(--radius); background: var(--ink-3); font-size: .78rem; color: var(--on-ink-2); text-align: center; line-height: 1.5; }
.sheet-brands img{ block-size: 20px; inline-size: auto; }
.sheet-foot{ margin-block-start: auto; padding-block-start: var(--s6); display: grid; gap: 14px; }
.sheet-langs{ display: flex; gap: 8px; flex-wrap: wrap; }
.sheet-langs a{ padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-ink-2); font-size: .85rem; }
.sheet-langs a[aria-current]{ background: var(--on-ink); color: var(--ink); }
.sheet-contact{ font-size: .9rem; color: var(--on-ink-2); }

/* ---------------- HOME: hero ---------------- */
.hero{ position: relative; min-block-size: min(100svh, 940px); display: grid; align-items: center; padding-block: 120px 56px; overflow: hidden; background:
  radial-gradient(60% 70% at 85% 10%, rgb(207 174 116 / .10), transparent 60%),
  radial-gradient(50% 60% at 10% 90%, rgb(78 138 190 / .08), transparent 60%), var(--ink); }
.hero-grid{ display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-copy .display{ margin-block: var(--s5) var(--s5); font-size: clamp(2.4rem, 1.1rem + 3.3vw, 4.35rem); line-height: 1.16; }
.hero-copy .display .l2{ color: var(--on-ink-3); }
.hero-copy .lead{ max-inline-size: 34ch; }
.hero-ctas{ display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: var(--s7); }
.hero-foot{ display: flex; align-items: center; gap: var(--s6); margin-block-start: var(--s8); padding-block-start: var(--s5); border-block-start: 1px solid var(--line-ink); font-size: var(--fs-small); color: var(--on-ink-3); }
.hero-foot .sep{ inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--on-ink-3); }

/* triptych: three facet-cut brand panels */
.tri{ display: flex; gap: 10px; block-size: clamp(420px, 62vh, 600px); }
.tri-p{ position: relative; flex: 1; border-radius: 18px; overflow: hidden; background: var(--ink-3); transition: flex var(--t-slow) var(--ease); isolation: isolate; }
.tri-p:nth-child(1){ clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 100%); margin-block-start: 0; }
.tri-p:nth-child(2){ margin-block: 36px -36px; }
.tri-p:nth-child(3){ clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%); }
@media (hover: hover) { .tri:hover .tri-p { flex: .8; } }
.tri .tri-p:focus-visible { flex: 1.5; }
@media (hover: hover) { .tri:hover .tri-p:hover { flex: 1.5; } }
.tri-p:nth-child(3) img.bg{ object-position: 50% 50%; }
.tri-p img{ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease); }
@media (hover: hover) { .tri-p:hover img { transform: scale(1.0); } }
.tri-p::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / .72)); z-index: 1; }
.tri-cap{ position: absolute; inset-inline: 18px; inset-block-end: 18px; z-index: 2; display: grid; gap: 4px; }
.tri-cap img{ position: static; transform: none; block-size: 22px; inline-size: auto; object-fit: contain; justify-self: start; }
.tri-cap span{ font-size: .78rem; color: rgb(255 255 255 / .78); line-height: 1.5; }

/* ---------------- HOME: intro / facts ---------------- */
.intro-grid{ display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 6vw, 112px); align-items: end; }
.statement{ font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.35rem); line-height: 1.45; font-weight: 720; margin-block-start: var(--s5); }
.statement .q{ color: var(--on-paper-3); }
.facts{ display: grid; }
.fact{ display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: baseline; padding-block: 20px; border-block-start: 1px solid var(--line-paper-2); }
.fact:last-child{ border-block-end: 1px solid var(--line-paper-2); }
.fact b{ font-size: 2.6rem; font-weight: 800; line-height: 1; font-feature-settings: "tnum"; }
.fact span{ color: var(--on-paper-2); line-height: 1.7; }
.fact span strong{ display: block; color: var(--on-paper); font-weight: 700; }
.intro-more{ margin-block-start: var(--s6); }

/* ---------------- HOME: brands ---------------- */
.sec-head{ display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: end; margin-block-end: var(--s8); }
.sec-head .h2{ margin-block-start: var(--s4); }
.sec-head .lead{ max-inline-size: 48ch; margin-block-start: var(--s4); }
.brands{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---------------- HOME: activities (editorial index) ---------------- */
.act{ display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }

/* ---------------- HOME: cooperation ---------------- */
.coop{ border-radius: 28px; padding: clamp(32px, 5vw, 72px); background:
  radial-gradient(80% 120% at 100% 0%, rgb(207 174 116 / .22), transparent 55%), linear-gradient(180deg, #1a1712, #121011); box-shadow: inset 0 0 0 1px rgb(207 174 116 / .18); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.coop .h2{ margin-block: var(--s4) var(--s4); }
.steps{ display: grid; gap: 0; counter-reset: s; }
.step{ display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-block: 18px; border-block-end: 1px solid rgb(207 174 116 / .16); }
.step:first-child{ border-block-start: 1px solid rgb(207 174 116 / .16); }
.step::before{ counter-increment: s; content: counter(s, persian); inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--gold-ink); box-shadow: inset 0 0 0 1px rgb(207 174 116 / .4); }
html:not([lang="fa"]) .step::before{ content: counter(s); }
.step b{ display: block; }
.step span{ color: var(--on-ink-2); font-size: .92rem; }
.coop-ctas{ display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: var(--s6); }

/* ---------------- footer ---------------- */
.ftr{ background: #07080b; color: var(--on-ink-2); padding-block: var(--s9) var(--s6); }
.ftr h4{ font-size: .8rem; font-weight: 600; color: var(--on-ink-3); margin-block-end: var(--s4); }
.ftr li + li{ margin-block-start: 10px; }
@media (hover: hover) { .ftr a:hover { color: var(--on-ink); } }

/* ---------------- brand pages: shared ---------------- */
.crumb{ display: flex; gap: 8px; font-size: .82rem; color: var(--on-ink-3); }
.light .crumb{ color: var(--on-paper-3); }
@media (hover: hover) { .crumb a:hover { color: var(--on-ink); } }

/* ---------------- UGREEN ---------------- */
.ug-page{ --acc: var(--ug-bright); background: #0a0c0b; }
.ug-hero{ position: relative; padding-block: 140px 0; overflow: hidden; background: radial-gradient(60% 80% at 20% 30%, rgb(25 194 106 / .14), transparent 60%), #0a0c0b; }
.ug-hero .badge{ block-size: 56px; inline-size: auto; margin-block: var(--s6) var(--s5); }
.ug-hero .h1{ margin-block-end: var(--s5); }
.ug-hero .h1 em{ font-style: normal; color: var(--ug-bright); }
.current rect, .current path{ fill: none; stroke: var(--ug-bright); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 90 910; animation: flow 6s linear infinite; filter: drop-shadow(0 0 6px rgb(25 194 106 / .9)); }
@keyframes flow { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.ug-facts{ display: grid; grid-template-columns: repeat(4, 1fr); margin-block-start: var(--s9); border-block: 1px solid var(--line-ink); }
.ug-facts div{ padding: 26px 24px; border-inline-start: 1px solid var(--line-ink); }
.ug-facts div:first-child{ border-inline-start: 0; padding-inline-start: 0; }
.ug-facts b{ display: block; font-family: "Inter"; font-size: 2.2rem; font-weight: 700; line-height: 1.1; color: var(--on-ink); }
.ug-facts span{ font-size: .88rem; color: var(--on-ink-2); }
.ug-intro{ display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: center; }
.ug-intro figure{ margin: 0; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 4 / 3; }
.ug-intro figure img{ inline-size: 100%; block-size: 100%; object-fit: cover; }
.ug-intro .h2{ margin-block: var(--s4) var(--s5); }
.ug-intro p + p{ margin-block-start: var(--s4); }
/* category explorer */
.cx{ display: grid; grid-template-columns: 360px 1fr; gap: 28px; margin-block-start: var(--s8); }
.cx-tabs{ display: grid; align-content: start; }
.cx-tab{ display: grid; grid-template-columns: 34px 1fr; gap: 10px; text-align: start; padding: 18px 18px; border-radius: 16px; transition: background var(--t-base); color: var(--on-ink-2); }
.cx-tab .n{ font-family: "Inter"; font-size: .78rem; padding-block-start: 5px; color: var(--on-ink-3); }
.cx-tab b{ display: block; font-size: 1.12rem; color: inherit; }
.cx-tab span.d{ display: block; font-size: .85rem; color: var(--on-ink-3); max-block-size: 0; overflow: hidden; opacity: 0; transition: max-block-size var(--t-slow) var(--ease), opacity var(--t-base); }
.cx-tab[aria-selected="true"]{ background: var(--ink-3); color: var(--on-ink); box-shadow: inset 2px 0 0 var(--ug-bright); }
[dir="rtl"] .cx-tab[aria-selected="true"]{ box-shadow: inset -2px 0 0 var(--ug-bright); }
.cx-tab[aria-selected="true"] span.d{ max-block-size: 80px; opacity: 1; margin-block-start: 4px; }
.cx-tab[aria-selected="true"] .n{ color: var(--ug-bright); }
.cx-stage{ position: relative; border-radius: 28px; overflow: hidden; background: radial-gradient(70% 70% at 50% 50%, #1a1f1c, #0d0f0e); min-block-size: 520px; }
.cx-panel{ position: absolute; inset: 0; display: grid; opacity: 0; transition: opacity 520ms var(--ease); }
.cx-panel.is-on{ opacity: 1; }
.cx-panel img{ inline-size: 100%; block-size: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease); }
.cx-panel.is-on img{ transform: none; }
.cx-panel.contain img{ object-fit: contain; padding: 40px; }
.cx-cap{ position: absolute; inset-inline: 24px; inset-block-end: 22px; display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.cx-cap b{ font-size: 1.5rem; }
.cx-cap span{ font-size: .8rem; color: var(--on-ink-3); }
/* timeline (vertical, progress line) */
.tl-wrap{ display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.tl-side{ position: sticky; inset-block-start: 110px; }
.tl-side .h2{ margin-block: var(--s4) var(--s5); }
/* Rev7 shared vertical timeline: the UGREEN interaction is the standard for every brand page.
   Each brand sets --tl-ac (accent), --tl-glow, --tl-line, --tl-dot, --tl-year (inactive year colour) and --tl-text. */
.tl{ --tl-ac: var(--ug-bright); --tl-glow: rgb(25 194 106 / .15); --tl-line: var(--line-ink-2); --tl-sep: var(--line-ink); --tl-dot: #0a0c0b; --tl-year: var(--on-ink-3); --tl-text: var(--on-ink-2); --tl-col: 140px;
  position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tl::before{ content: ""; position: absolute; inset-block: 0; inset-inline-start: var(--tl-col); inline-size: 1px; background: var(--tl-line); }
.tl-fill{ position: absolute; inset-block-start: 0; inset-inline-start: var(--tl-col); inline-size: 1px; block-size: 100%; background: var(--tl-ac); transform-origin: top; transform: scaleY(var(--p, .55)); box-shadow: 0 0 12px var(--tl-ac); }
.tl-item{ display: grid; grid-template-columns: var(--tl-col) 1fr; gap: 48px; padding-block: 28px; border-block-end: 1px solid var(--tl-sep); }
.tl-item:last-child{ border-block-end: 0; }
.tl-year{ padding-inline-end: 30px; font-family: "Inter"; font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--tl-year); text-align: end; transition: color var(--t-slow); font-variant-numeric: lining-nums; }
.tl-item.is-on .tl-year{ color: var(--tl-ac); }
.tl-item > div{ position: relative; padding-inline-start: 0; max-inline-size: 640px; display: grid; gap: 18px; }
.tl-item > div::before{ content: ""; position: absolute; inset-inline-start: -53px; inset-block-start: 12px; inline-size: 11px; block-size: 11px; border-radius: 50%; background: var(--tl-dot); box-shadow: inset 0 0 0 2px var(--tl-line); transition: background-color var(--t-slow), box-shadow var(--t-slow); }
.tl-item.is-on > div::before{ box-shadow: inset 0 0 0 2px var(--tl-ac), 0 0 0 6px var(--tl-glow); background: var(--tl-ac); }
.tl-item h3{ font-size: 1.3rem; margin-block-end: 6px; }
.tl-item p{ color: var(--tl-text); }
.js .tl-ev{ opacity: .9; transform: translateY(10px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js .tl-item.is-on .tl-ev{ opacity: 1; transform: none; }
.js .tl-item.is-on .tl-ev + .tl-ev{ transition-delay: 90ms; }
@media (prefers-reduced-motion: reduce) { .js .tl-ev{ opacity: 1; transform: none; transition: none; } }
.ug-band{ position: relative; block-size: clamp(360px, 48vw, 620px); overflow: hidden; }
.ug-band img{ inline-size: 100%; block-size: 120%; object-fit: cover; position: absolute; inset-block-start: -10%; }
.ug-band figcaption{ position: absolute; inset-inline-start: var(--gutter); inset-block-end: 20px; font-size: .78rem; color: rgb(255 255 255 / .75); }
.brand-cta{ border-radius: 28px; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1.2fr auto; gap: 32px; align-items: center; }
.ug-cta{ background: linear-gradient(120deg, #00672c, #00873d 60%, #0aa04f); color: #fff; }
.ug-cta .btn{ --bg: #fff; --fg: #003d1a; }
.brand-cta .h2{ margin-block: var(--s3) var(--s4); }
.brand-cta p{ opacity: .85; max-inline-size: 52ch; }
.rel{ display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 5vw, 88px); margin-block-end: var(--s8); }

/* ---------------- tomtoc ---------------- */
.tt-page{ background: var(--tt-sand); color: var(--tt); }
.tt-page .paper{ background: #f6f1ea; }
.collage{ position: relative; aspect-ratio: 1 / 1.02; }
.collage figure{ position: absolute; margin: 0; overflow: hidden; border-radius: 4px; box-shadow: 0 40px 80px -40px rgb(40 30 20 / .5); }
.collage .c1{ inset-block: 0 8%; inset-inline-end: 0; inline-size: 66%; }
.collage .c2{ inset-block-end: 0; inset-inline-start: 0; inline-size: 50%; aspect-ratio: 857 / 462; }
.collage .c3{ inset-block-start: 10%; inset-inline-start: 6%; inline-size: 30%; aspect-ratio: 1; background: #fff; }
.collage img{ inline-size: 100%; block-size: 100%; object-fit: cover; }
.collage .tag{ position: absolute; inset-block-start: 4%; inset-inline-end: 70%; font-family: "Inter"; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: #6d665c; writing-mode: vertical-rl; }
.tt-quote{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.tt-quote .statement{ color: var(--tt); margin-block: var(--s4) var(--s5); }
.tt-quote p{ color: #4c4740; }
.tt-quote p + p{ margin-block-start: var(--s4); }
.tt-quote figure{ margin: 0; border-radius: 4px; overflow: hidden; }
.mosaic{ display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 150px; gap: 12px; margin-block-start: var(--s8); }
.tile{ position: relative; overflow: hidden; border-radius: 4px; background: #d9cfc1; color: #fff; }
.tile img{ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
@media (hover: hover) { .tile:hover img { transform: scale(1.05); } }
.tile::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(20 16 12 / .7)); }
.tile .cap{ position: absolute; z-index: 1; inset-inline: 20px; inset-block-end: 16px; display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.tile .cap b{ font-size: 1.2rem; display: block; }
.tile .cap span span{ font-size: .85rem; opacity: .88; display: block; max-block-size: 0; overflow: hidden; transition: max-block-size var(--t-slow) var(--ease); }
.tile:focus-visible .cap span span { max-block-size: 60px; }
@media (hover: hover) { .tile:hover .cap span span { max-block-size: 60px; } }
.tile .n{ position: absolute; z-index: 1; inset-block-start: 14px; inset-inline-start: 16px; font-family: "Inter"; font-size: .72rem; letter-spacing: .2em; opacity: .9; }
.t1{ grid-column: span 5; grid-row: span 4; } .t2{ grid-column: span 7; grid-row: span 2; } .t3{ grid-column: span 4; grid-row: span 2; } .t4{ grid-column: span 3; grid-row: span 2; }
.t5{ grid-column: span 7; grid-row: span 2; } .t6{ grid-column: span 5; grid-row: span 2; }
.tt-cta{ background: var(--tt); color: #f3ede4; grid-template-columns: 1fr 1fr; padding: 0; overflow: hidden; border-radius: 4px; }
.tt-cta .in{ padding: clamp(32px, 5vw, 64px); }
.tt-cta figure{ margin: 0; block-size: 100%; min-block-size: 360px; }
.tt-cta figure img{ inline-size: 100%; block-size: 100%; object-fit: cover; }
.tt-page .tt-cta .btn.ext{ --bg: #f3ede4; --fg: var(--tt); }
.tt-page .eyebrow{ color: var(--tt-clay); }
.ab-brands{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-block-start: var(--s7); }
.ab-brand{ display: grid; gap: 14px; padding: 28px; border-radius: var(--radius-l); background: var(--white); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base); }
@media (hover: hover) { .ab-brand:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgb(20 23 29 / .35); } }
.ab-brand .lg{ block-size: 48px; display: flex; align-items: center; }
.ab-brand .lg img{ max-block-size: 34px; inline-size: auto; }
.ab-brand p{ color: var(--on-paper-2); font-size: .93rem; }
.ab-brand .link{ justify-self: start; font-size: .9rem; }
.values{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-ink); border-radius: var(--radius-l); overflow: hidden; margin-block-start: var(--s8); }
.values > div{ background: var(--ink); padding: 32px 28px 36px; min-block-size: 220px; display: flex; flex-direction: column; justify-content: space-between; transition: background var(--t-base); }
@media (hover: hover) { .values > div:hover { background: var(--ink-2); } }
.values b{ font-size: 1.7rem; font-weight: 760; }
.values span{ color: var(--on-ink-2); font-size: .93rem; }
.pending{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-block-start: var(--s7); }
.pending > div{ border: 1.5px dashed var(--line-paper-2); border-radius: var(--radius); padding: 22px; min-block-size: 160px; display: grid; align-content: space-between; color: var(--on-paper-3); font-size: .88rem; }
.pending b{ font-family: "Inter"; font-size: 1.6rem; color: var(--on-paper-3); }
.offices{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-block-start: var(--s7); }
.office{ border-radius: var(--radius-l); overflow: hidden; background: var(--ink-2); }
.office .ph{ aspect-ratio: 16 / 7; display: grid; place-items: center; background: repeating-linear-gradient(135deg, #171b24 0 14px, #141821 14px 28px); color: var(--on-ink-3); font-size: .85rem; text-align: center; padding: 16px; }
.office .bd{ padding: 24px 28px 28px; }
.office h3{ font-size: 1.3rem; margin-block-end: 8px; }
.office p{ color: var(--on-ink-2); }

/* ---------------- motion: reveals ---------------- */
.js [data-r]{ opacity: 0; transform: translateY(22px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js [data-r].in{ opacity: 1; transform: none; }
.mask-line{ display: block; }
.js .mask-line{ overflow: hidden; }
.js .mask-line > span{ display: block; transform: translateY(105%); transition: transform 1000ms var(--ease); transition-delay: calc(var(--d, 0) * 110ms + 120ms); }
.js .ready .mask-line > span{ transform: none; }
.js .tri-p{ clip-path: inset(100% 0 0 0 round 18px); transition: clip-path 1200ms var(--ease-io), flex var(--t-slow) var(--ease); transition-delay: calc(var(--d, 0) * 140ms + 200ms), 0s; }
.js .ready .tri-p{ clip-path: inset(0 0 0 0 round 18px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-r], .js .mask-line > span{ opacity: 1; transform: none; }
  .js .tri-p{ clip-path: none; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 1080px) {
  .nav, .hdr-tools .lang, .hdr-tools .btn{ display: none; }
  .menu-btn{ display: grid; margin-inline-start: auto; }
  .hdr-in{ block-size: 64px; }
  .hero-grid, .intro-grid, .coop, .ug-intro, .tt-quote, .rel{ grid-template-columns: 1fr; }
  .brands{ grid-template-columns: 1fr; gap: 16px; }
  .act, .tl-wrap{ grid-template-columns: 1fr; }
  .tl-side{ position: static; }
  .cx{ grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero{ padding-block: 92px 40px; min-block-size: auto; }
  .hero-copy .display{ margin-block: 16px; }
  .hero-ctas{ margin-block-start: 28px; }
  .hero-ctas .btn{ flex: 1 1 auto; justify-content: center; }
  .hero-foot{ display: none; }
  .tri{ block-size: 300px; gap: 6px; margin-block-start: 8px; }
  .tri-p:nth-child(2){ margin-block: 20px -20px; }
  .tri-cap{ inset-inline: 10px; inset-block-end: 10px; }
  .tri-cap img{ block-size: 14px; }
  .tri-cap > span:not(.lk-ug){ display: none; } /* final: keep the UGREEN lockup (a span) visible on phones */
  .fact{ grid-template-columns: 64px 1fr; }
  .fact b{ font-size: 2rem; }
  .sec-head{ grid-template-columns: 1fr; margin-block-end: var(--s6); }
  .ug-facts{ grid-template-columns: 1fr 1fr; }
  .ug-facts div:nth-child(3){ border-inline-start: 0; padding-inline-start: 0; }
  .tl{ --tl-col: 72px; }
  .tl-item{ gap: 28px; }
  .tl-year{ font-size: 1.4rem; }
  .tl-item > div::before{ inset-inline-start: -33px; }
  .mosaic{ grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .t1{ grid-column: span 2; grid-row: span 2; } .t2, .t5{ grid-column: span 2; } .t3, .t4, .t6{ grid-column: span 1; }
  .brand-cta, .tt-cta{ grid-template-columns: 1fr; }
   .values, .pending, .ab-brands, .offices{ grid-template-columns: 1fr; }
}

/* =====================================================================
   ABOUT: cinematic company story (1391 → 1405)
   One sticky stage on desktop, one inline figure per chapter on mobile.
   No scroll locking: the page scrolls normally, the stage only listens.
   ===================================================================== */
.st-hero{ position: relative; min-block-size: 100svh; display: grid; align-items: end; padding-block: 140px 56px; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 70% at 78% 30%, rgb(207 174 116 / .13), transparent 70%), radial-gradient(50% 60% at 15% 90%, rgb(78 138 190 / .08), transparent 70%), var(--ink); }
@keyframes st-draw { to { stroke-dashoffset: 0; } }
.st-hero-in{ display: grid; gap: 18px; }
.st-title{ font-size: clamp(3rem, 1.4rem + 6.4vw, 7.4rem); line-height: 1.02; font-weight: 820; letter-spacing: -.015em; margin-block-start: 12px; }
.st-sub{ font-size: clamp(1.15rem, 1rem + .9vw, 1.8rem); color: var(--gold-ink); font-weight: 500; }
.st-index{ display: grid; grid-template-columns: repeat(4, 1fr); margin-block-start: clamp(40px, 8vh, 96px); border-block-start: 1px solid var(--line-ink-2); }
.st-index a{ display: grid; gap: 2px; padding: 18px 0 4px; padding-inline-end: 24px; transition: color var(--t-base); }
.st-index b{ font-size: 1.6rem; font-weight: 760; color: var(--on-ink); }
.st-index span{ font-size: .88rem; color: var(--on-ink-3); }
@media (hover: hover) { .st-index a:hover b { color: var(--gold-ink); } }
.st-index li{ position: relative; }
.st-index li::before{ content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0; inline-size: 40px; block-size: 1px; background: var(--gold); }
.st-cue{ display: inline-flex; align-items: center; gap: 12px; font-size: .8rem; color: var(--on-ink-3); margin-block-start: 22px; }
.st-cue i{ inline-size: 1px; block-size: 34px; background: linear-gradient(var(--gold), transparent); transform-origin: top; animation: st-cue 2.4s var(--ease-io) infinite; }
@keyframes st-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.st-intro{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; }
.st-intro .statement{ margin-block-start: 18px; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); line-height: 1.3; font-weight: 780; }
.st-intro-body{ display: grid; gap: 20px; font-size: 1.06rem; color: var(--on-paper-2); padding-block-start: 44px; }

/* ---- story: chapter palettes (background & text follow the active chapter) ---- */
.story{ --st-bg: #17110d; --st-fg: #f6eee3; --st-fg2: #cdbfae; --st-acc: #e3c993; --st-line: rgb(255 255 255 / .14);
  position: relative; background: var(--st-bg); color: var(--st-fg); transition: background-color 900ms var(--ease-io), color 900ms var(--ease-io); padding-block: var(--section); }
.story[data-ch="2"]{ --st-bg: #061a10; --st-fg: #eef7f1; --st-fg2: #a9c6b4; --st-acc: #19c26a; --st-line: rgb(255 255 255 / .13); }
.story[data-ch="3"]{ --st-bg: #e9dfd1; --st-fg: #1c1c1c; --st-fg2: #5d544a; --st-acc: #85583a; --st-line: rgb(28 28 28 / .16); }
.story[data-ch="4"]{ --st-bg: #eef3f8; --st-fg: #0f1a26; --st-fg2: #4f5f70; --st-acc: #2f6ea3; --st-line: rgb(15 26 38 / .14); }
.story .chip{ box-shadow: inset 0 0 0 1px var(--st-line); color: var(--st-fg2); transition: color 900ms, box-shadow 900ms; }
.story .link{ color: var(--st-acc); }

.story-grid{ position: relative; display: grid; grid-template-columns: minmax(0, .9fr) 2px minmax(0, 1.1fr); grid-template-areas: "text rail stage"; column-gap: clamp(32px, 5vw, 80px); }
.story-text{ grid-area: text; }
.story-rail{ grid-area: rail; position: relative; background: var(--st-line); }
.rail-fill{ position: absolute; inset: 0; background: var(--st-acc); transform-origin: top; transform: scaleY(var(--rp, 0)); transition: background-color 900ms; }
.rail-node{ position: absolute; inset-inline-start: 50%; inset-block-start: calc((var(--i) + .5) * 100% / var(--n, 4)); inline-size: 12px; block-size: 12px; margin: -6px; border-radius: 50%; background: var(--st-bg); box-shadow: inset 0 0 0 2px var(--st-line); transition: box-shadow 500ms, background-color 900ms, transform 500ms var(--ease); }
[dir="rtl"] .rail-node{ inset-inline-start: auto; inset-inline-end: 50%; }
.rail-node.is-on{ box-shadow: inset 0 0 0 2px var(--st-acc), 0 0 0 6px color-mix(in srgb, var(--st-acc) 18%, transparent); background: var(--st-acc); transform: scale(1.1); }

/* chapters */
.ch{ min-block-size: 92vh; display: flex; flex-direction: column; justify-content: center; gap: 0; padding-block: 48px; transition: opacity 700ms var(--ease); }
.js .ch{ opacity: .22; }
.js .ch.is-on{ opacity: 1; }
.ch-n{ font-size: .8rem; font-weight: 650; letter-spacing: .08em; color: var(--st-acc); }
.ch-year{ display: flex; align-items: baseline; gap: 16px; font-size: clamp(4.2rem, 2rem + 6vw, 8rem); line-height: 1; font-weight: 820; margin-block: 10px 18px; color: var(--st-fg); }
.ch-year small{ unicode-bidi: isolate; font-family: "Inter", var(--font); font-size: .9rem; font-weight: 500; color: var(--st-fg2); letter-spacing: .04em; }
.ch-title{ font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.3; font-weight: 780; }
.ch-sub{ font-size: 1.05rem; font-weight: 600; color: var(--st-acc); margin-block: 8px 18px; transition: color 900ms; }
.ch-p{ color: var(--st-fg2); font-size: 1.04rem; max-inline-size: 46ch; transition: color 900ms; }
.ch-countries{ margin-block-start: 26px; }
.ch-countries .k{ font-size: .82rem; color: var(--st-fg2); margin-block-end: 10px; }
.ch-countries ul{ display: flex; flex-wrap: wrap; gap: 8px; }
.ch-countries li{ font-size: .9rem; padding: 4px 12px; border-radius: 999px; background: rgb(227 201 147 / .12); color: var(--st-acc); }
.ch-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 24px; }
.ch-link{ justify-self: start; align-self: flex-start; margin-block-start: 26px; font-size: .95rem; }
.ch-media{ display: none; margin: 0 0 26px; }

/* stage */
.story-stage{ grid-area: stage; display: none; position: sticky; inset-block-start: 100px; block-size: calc(100vh - 140px); align-self: start; }
.js .story-stage{ display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.js .ch-media{ display: none; }
html:not(.js) .ch-media{ display: block; }
html:not(.js) .ch-media .scn{ position: relative; aspect-ratio: 16 / 11; opacity: 1; }
.stage-frame{ position: relative; border-radius: var(--radius-l); overflow: hidden; background: color-mix(in srgb, var(--st-bg) 80%, #000); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .55); transition: background-color 900ms; }
.stage-meta{ display: flex; align-items: center; gap: 16px; font-family: "Inter", var(--font); font-size: .8rem; color: var(--st-fg2); }
.stage-count b{ color: var(--st-fg); font-weight: 650; }
.stage-bar{ flex: 1; block-size: 1px; background: var(--st-line); position: relative; }
.stage-bar i{ position: absolute; inset: 0; background: var(--st-acc); transform-origin: right; transform: scaleX(.25); transition: transform 700ms var(--ease), background-color 900ms; }
[dir="ltr"] .stage-bar i{ transform-origin: left; }
.stage-year{ position: absolute; z-index: 4; inline-size: 3.2em; inset-block-end: 18px; inset-inline-start: 26px; font-size: clamp(3.5rem, 2rem + 4vw, 6.5rem); font-weight: 830; line-height: 1; block-size: 1em; overflow: hidden; color: #fff; text-shadow: 0 10px 40px rgb(0 0 0 / .35); }
.stage-year span{ display: block; position: absolute; inset-inline-start: 0; inset-block-start: 0; transform: translateY(100%); opacity: 0; transition: transform 900ms var(--ease), opacity 600ms; white-space: nowrap; }
.story[data-ch="1"] .stage-year [data-y="1"], .story[data-ch="td"] .stage-year [data-y="td"], .story[data-ch="2"] .stage-year [data-y="2"], .story[data-ch="3"] .stage-year [data-y="3"], .story[data-ch="4"] .stage-year [data-y="4"]{ transform: none; opacity: 1; }
.story[data-ch="4"] .stage-year{ color: #0f1a26; text-shadow: 0 6px 30px rgb(255 255 255 / .6); }

/* scenes */
.scn{ position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-io); overflow: hidden; }
.scn.is-on{ opacity: 1; }
.scn img{ position: absolute; object-fit: cover; }
.scn .l-back{ inset: 0; inline-size: 100%; block-size: 100%; transform: scale(1.1); transition: transform 2400ms var(--ease); }
.scn .l-front{ border-radius: 16px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .5); transform: translateY(40px); opacity: 0; transition: transform 1300ms var(--ease) 250ms, opacity 900ms 250ms; }
.scn.is-on .l-back{ transform: scale(1); }
.scn.is-on .l-front{ transform: none; opacity: 1; }
.scn::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scn img, .scn .glow, .scn .air, .scn .beam{ z-index: 0; }
.scn .l-front{ z-index: 2; }

/* 1391: warm beauty tones and gold (CSS-only concept, no photo yet) */
.scn-1{ background: linear-gradient(160deg, #3a2618, #1a120c 70%); }
.scn-1 .glow{ position: absolute; inset: -20%; background: radial-gradient(40% 40% at 60% 45%, rgb(240 200 140 / .45), transparent 70%), radial-gradient(30% 30% at 30% 70%, rgb(214 140 130 / .3), transparent 70%); animation: st-breathe 9s ease-in-out infinite alternate; }
@keyframes st-breathe { to { transform: scale(1.08) translate(2%, -2%); } }

/* 1401: dark technology green */
.scn-2{ background: #04140c; }
.scn-2 .l-back{ opacity: .6; filter: saturate(.7); }
.scn-2::after{ background: linear-gradient(180deg, rgb(4 20 12 / .15), rgb(4 20 12 / .55)), radial-gradient(60% 50% at 50% 60%, rgb(25 194 106 / .18), transparent 70%); }
.scn-2 .l-front{ inline-size: 64%; aspect-ratio: 1400 / 1165; inset-block-start: 22%; inset-inline-start: 18%; }
.scn-2 .beam{ position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 62%; block-size: 1px; background: linear-gradient(90deg, transparent, #19c26a, transparent); transform: scaleX(0); transition: transform 1600ms var(--ease) 500ms; box-shadow: 0 0 18px #19c26a; }
.scn-2.is-on .beam{ transform: scaleX(1); }

/* 1402: warm lifestyle (tomtoc) */
.scn-3{ background: #d9cbb6; }
.scn-3::after{ background: linear-gradient(0deg, rgb(40 26 16 / .45), transparent 50%); }
.scn-3 .l-front{ inline-size: 52%; aspect-ratio: 1172 / 681; inset-block-end: 12%; inset-inline-end: 7%; transform: translateY(40px) rotate(-3deg); }
.scn-3.is-on .l-front{ transform: rotate(-3deg); }

/* 1405: cool white & blue, calm, light particles */
.scn-4{ background: linear-gradient(180deg, #f7fafc, #dfe9f3); }
.scn-4 .l-back{ filter: saturate(.75) brightness(1.04); }
.scn-4::after{ background: linear-gradient(180deg, rgb(238 243 248 / .55), rgb(238 243 248 / 0) 40%, rgb(238 243 248 / .2) 70%, rgb(238 243 248 / .85)); }
.scn-4 .l-front{ inline-size: 30%; aspect-ratio: 600 / 792; inset-block-start: 14%; inset-inline-start: 12%; box-shadow: 0 40px 70px -30px rgb(30 60 100 / .45); }
[dir="rtl"] .scn-4 .l-front{ inset-inline-start: auto; inset-inline-end: 12%; }
.air{ position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.air i{ position: absolute; inset-block-end: -10px; inset-inline-start: calc(var(--k) * 7% + 3%); inline-size: 5px; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .9); box-shadow: 0 0 12px 2px rgb(78 138 190 / .55); opacity: 0; }
.scn-4.is-on .air i, .ch-media .scn-4 .air i{ animation: st-air 9s linear infinite; animation-delay: calc(var(--k) * -.66s); }

.air i:nth-child(3n){ inline-size: 8px; } .air i:nth-child(4n){ inline-size: 3px; }
@keyframes st-air { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .6; } 100% { transform: translateY(-520px) translateX(18px); opacity: 0; } }

/* world */
.world{ display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s8); align-items: start; }
.world .lead{ margin-block: 18px 22px; }
.ab-brand .by{ font-size: .78rem; font-weight: 650; color: var(--gold-paper); }

/* closing */
.st-close{ position: relative; text-align: center; padding-block: clamp(120px, 18vh, 200px); overflow: hidden; isolation: isolate; background: radial-gradient(50% 60% at 50% 40%, rgb(207 174 116 / .16), transparent 70%), var(--ink); }
.st-close::before{ content: ""; position: absolute; z-index: -1; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 520px; aspect-ratio: 1; margin: -260px; border-radius: 50%; border: 1px solid rgb(207 174 116 / .18); box-shadow: 0 0 0 80px rgb(207 174 116 / .03), 0 0 0 160px rgb(207 174 116 / .02); }
[dir="rtl"] .st-close::before{ inset-inline-start: auto; inset-inline-end: 50%; }
.st-close-a{ color: var(--gold-ink); font-size: 1.05rem; font-weight: 600; }
.st-close-h{ font-size: clamp(2.4rem, 1.3rem + 4.6vw, 5.6rem); line-height: 1.12; font-weight: 820; margin-block: 22px 32px; }
.st-close-h span{ display: inline-block; }
.st-sign{ display: inline-grid; gap: 2px; font-size: .9rem; color: var(--on-ink-3); }
.st-sign b{ color: var(--on-ink); font-size: 1.1rem; }
.st-close .hero-ctas{ justify-content: center; margin-block-start: 40px; }

@media (max-width: 1080px) {
  .st-intro, .world{ grid-template-columns: 1fr; gap: var(--s6); }
  .st-intro-body{ padding-block-start: 0; }
  .story-grid{ grid-template-columns: 2px minmax(0, 1fr); grid-template-areas: "rail text"; column-gap: 24px; }
  .js .story-stage{ display: none; }
  .ch-media, .js .ch-media{ display: block; position: relative; aspect-ratio: 4 / 3.4; border-radius: 18px; overflow: hidden; }
  .ch-media .scn{ opacity: 1; }
  .ch-media .scn .l-back{ transform: none; }
  .ch-media .scn .l-front{ transform: none; opacity: 1; }
  .ch-media .scn-3 .l-front{ transform: rotate(-3deg); }
  .ch-media .scn-2 .beam{ transform: scaleX(1); }
  .ch{ min-block-size: auto; padding-block: 40px 56px; }
  .js .ch{ opacity: .45; }
  .js .ch.is-on{ opacity: 1; }
  .ch-year{ font-size: clamp(3.4rem, 2rem + 8vw, 5rem); }
}
@media (max-width: 720px) {
  .st-hero{ padding-block: 120px 40px; min-block-size: 92svh; }
  .st-index{ grid-template-columns: 1fr 1fr; }
  .st-index a{ padding-block: 14px 8px; }
  .st-index b{ font-size: 1.3rem; }
  .st-close::before{ inline-size: 300px; margin: -150px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-cue i, .scn-1 .glow{ animation: none; }
  .scn-4.is-on .air i, .ch-media .scn-4 .air i{ animation: none; opacity: .5; transform: translateY(calc(var(--k) * -24px - 60px)); }
}
.st-title .mask-line{ padding-block: .08em .22em; margin-block: -.08em -.22em; }
.scn-4 .l-back{ object-position: 82% 50%; }
.ch{ scroll-margin-block-start: 84px; }

/* ---- About v2: globe opening (1391) and its hand-off to UGREEN (1401) ---- */
.st-head{ font-size: clamp(1.25rem, 1rem + 1.3vw, 2.1rem); font-weight: 650; line-height: 1.5; color: var(--on-ink); max-inline-size: 26ch; }
.stage-frame{ background: radial-gradient(70% 60% at 50% 45%, #241a10, #0c0907 75%); }
.story[data-ch="2"] .stage-frame{ background: radial-gradient(70% 60% at 50% 60%, #0b3a22, #03120a 75%); }
.globe-layer{ position: absolute; inset: 0; z-index: 0; transition: transform 1600ms var(--ease-io), opacity 1000ms var(--ease-io); transform-origin: 50% 50%; }
.globe-layer canvas, .scn-1 canvas{ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; touch-action: pan-y; cursor: grab; }
.globe-still{ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
.js .globe-still{ display: none; }
.story[data-ch="2"] .globe-layer{ transform: scale(2.1) translateY(34%); opacity: .38; }
.story[data-ch="3"] .globe-layer, .story[data-ch="4"] .globe-layer{ opacity: 0; transform: scale(2.4) translateY(40%); }
.scn{ z-index: 1; }
.scn-1{ background: transparent; }
.s1-kicker{ position: absolute; inset-block-start: 24px; inset-inline-start: 26px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: #f2d9a6; }
.s1-count{ position: absolute; inset-block-start: 20px; inset-inline-end: 24px; display: flex; align-items: baseline; gap: 6px; color: #cdbfae; font-size: .8rem; }
.s1-count b{ font-size: 1.9rem; font-weight: 760; color: #fff3df; line-height: 1; }
.s1-end{ position: absolute; inset-block-end: 26px; inset-inline-end: 26px; max-inline-size: 48%; display: grid; gap: 6px; text-align: end; opacity: 0; transform: translateY(14px); transition: opacity 800ms, transform 800ms var(--ease); }
.s1-end b{ font-size: 1.35rem; font-weight: 760; color: #fff3df; line-height: 1.4; }
.s1-end span{ font-size: .85rem; color: #cdbfae; line-height: 1.7; }
.scn-1.is-end .s1-end{ opacity: 1; transform: none; }

.scn-logo{ position: absolute; z-index: 3; inset-block-start: 30px; inset-inline-start: 50%; block-size: 26px; inline-size: auto; transform: translate(50%, -10px); opacity: 0; transition: opacity 900ms 450ms, transform 900ms var(--ease) 450ms; }
[dir="ltr"] .scn-logo{ transform: translate(-50%, -10px); }
.scn.is-on .scn-logo{ opacity: 1; transform: translate(50%, 0); }
[dir="ltr"] .scn.is-on .scn-logo{ transform: translate(-50%, 0); }
.scn-2{ background: transparent; }
.scn-2::after{ background: radial-gradient(55% 45% at 50% 58%, rgb(25 194 106 / .22), transparent 70%); }
.scn-2 .l-front{ inline-size: 58%; inset-block-start: 20%; inset-inline-start: 21%; }
.scn-2 .l-side{ position: absolute; z-index: 2; inline-size: 30%; inset-block-end: 16%; inset-inline-end: 6%; object-fit: contain; border-radius: 12px; opacity: 0; transform: translateY(30px); transition: opacity 900ms 700ms, transform 1400ms var(--ease) 700ms; filter: drop-shadow(0 30px 30px rgb(0 0 0 / .5)); }
.scn-2.is-on .l-side{ opacity: 1; transform: none; animation: st-float 6s ease-in-out 2.2s infinite alternate; }
@keyframes st-float { to { transform: translateY(-10px); } }
.scn-3 .scn-logo{ block-size: 24px; }
.scn-4 .scn-logo{ block-size: 30px; }
.scn-4 .l-front{ display: none; }

.ch-globe .ch-in, .ch .ch-in{ display: flex; flex-direction: column; }
.ch-countries .k b{ display: block; font-size: 1.15rem; color: var(--st-fg); margin-block-end: 4px; }
.ch-countries ol{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.ch-countries ol li{ display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; gap: 8px; padding-block: 9px; border-block-end: 1px solid var(--st-line); font-weight: 650; transition: opacity 500ms, color 500ms; }
.ch-countries ol li .n{ font-size: .78rem; color: var(--st-acc); }
.ch-countries ol li .en{ font-family: "Inter"; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--st-fg2); font-weight: 500; }
.ch-links{ display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-block-start: 26px; }
.ch-links .ch-link{ margin: 0; }
.shop{ display: inline-flex; align-items: center; min-block-size: 40px; padding: 0 16px; border-radius: 999px; font-size: .86rem; font-weight: 650; box-shadow: inset 0 0 0 1px currentColor; }
.ab-links{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-block-start: 6px; }
.ab-brand{ align-content: start; }
.ab-links .shop{ color: var(--on-paper); }

.evo{ display: grid; grid-template-columns: repeat(4, 1fr); margin-block-start: var(--s7); counter-reset: e; }
.evo li{ position: relative; display: grid; gap: 6px; padding-block: 26px 4px; padding-inline-end: 28px; border-block-start: 1px solid var(--line-ink-2); }
.evo li::before{ content: ""; position: absolute; inset-block-start: -5px; inset-inline-start: 0; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgb(207 174 116 / .15); }
.evo li:not(:last-child)::after{ content: "←"; position: absolute; inset-block-start: -15px; inset-inline-end: 12px; color: var(--on-ink-3); font-family: "Inter"; }
[dir="ltr"] .evo li:not(:last-child)::after{ content: "→"; }
.evo .y{ font-size: 2.2rem; font-weight: 800; color: var(--gold-ink); line-height: 1.1; }
.evo b{ font-size: 1.15rem; }
.evo .s{ color: var(--on-ink-3); font-size: .9rem; font-family: "Inter", var(--font); }

@media (min-width: 1081px) {
  .ch-globe{ min-block-size: 240vh; justify-content: flex-start; }
  .ch-globe .ch-in{ position: sticky; inset-block-start: 16vh; }
  .js .ch-globe .ch-countries ol li{ opacity: .35; }
  .js .ch-globe .ch-countries ol li.is-on{ opacity: 1; }
  .js .ch-globe .ch-countries ol li.is-on .n{ color: #fff3df; }
}
@media (max-width: 1080px) {
  .ch-media .scn-1{ background: radial-gradient(70% 60% at 50% 45%, #241a10, #0c0907 75%); }
  .ch-media .scn-2{ background: radial-gradient(70% 60% at 50% 60%, #0b3a22, #03120a 75%); }
  .ch-media .scn-logo{ opacity: 1; transform: translate(50%, 0); block-size: 20px; inset-block-start: 18px; }
  [dir="ltr"] .ch-media .scn-logo{ transform: translate(-50%, 0); }
  .ch-media .scn-2 .l-side{ opacity: 1; transform: none; }
  .evo{ grid-template-columns: 1fr 1fr; gap: 28px 0; }
}
@media (max-width: 720px) {
  .ch-countries ol{ grid-template-columns: 1fr; }
  .evo{ grid-template-columns: 1fr; }
  .evo li:not(:last-child)::after{ display: none; }
  .ab-links .shop{ flex: 1; justify-content: center; }
}
.ch-countries ol li{ background: none; border-radius: 0; padding-inline: 0; color: var(--st-fg); font-size: .98rem; }
.bx-t{ display: grid; line-height: 1.4; } .bx-t b{ font-size: .9rem; } .bx-t .en{ font-size: .78rem; opacity: .7; }
.fact{ grid-template-columns: minmax(64px, auto) 1fr; column-gap: 18px; }

/* ---------------- UGREEN wordmark: optical sizes (6:1 wordmark reads larger than the other logos) ---------------- */
.tri-cap img.lg-ug{ block-size: 16px; }
.sheet-brands img.lg-ug{ block-size: 15px; }
.ug-hero .badge{ block-size: 40px; }
.ab-brand .lg img.lg-ugreen{ max-block-size: 24px; }
.scn-logo.lg-ug{ block-size: 20px; }
@media (max-width: 760px) { .tri-cap img.lg-ug{ block-size: 11px; } .ch-media .scn-logo.lg-ug{ block-size: 15px; } }


/* =====================================================================
   TYPOGRAPHY v2 (revision 2026-10-18)
   Option A, Vazirmatn (owner-approved 2026-10-18).
   One scale for every page: calmer sizes, lighter heading weights,
   Persian-safe line heights, no letter-spacing on Persian.
   ===================================================================== */
:root{
  --font-head: "Vazirmatn", "Inter Fa", system-ui, sans-serif;
  --fs-display: clamp(2.3rem, 1.45rem + 3.3vw, 4.4rem);
  --fs-h1: clamp(2.05rem, 1.45rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.65rem, 1.3rem + 1.4vw, 2.5rem);
  --fs-h3: clamp(1.15rem, 1.05rem + .4vw, 1.38rem);
  --fs-lead: clamp(1.04rem, 1rem + .2vw, 1.16rem);
  --fs-body: 1.0313rem;
  --w-1: 720; --w-2: 660; --w-3: 600; --w-4: 560;
  --lh-1: 1.24; --lh-2: 1.34; --lh-3: 1.55;
}
body{ line-height: 1.9; }
p{ text-wrap: pretty; }
.display, .h1, .h2, .h3, .statement, .st-title, .ch-year, .ch-title, .stage-year, .values b, .sheet-nav > a, .logo b, .fact b, .st-index b, .coop .h2{ font-family: var(--font-head); letter-spacing: 0; text-wrap: balance; }
.display{ line-height: var(--lh-1); font-weight: var(--w-1); }
.h1{ line-height: var(--lh-1); font-weight: var(--w-1); }
.h2{ line-height: var(--lh-2); font-weight: var(--w-2); }
.h3 { line-height: var(--lh-3); font-weight: var(--w-3); }
.statement{ font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); line-height: 1.6; font-weight: var(--w-4); }
.st-intro .statement{ font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1.5; font-weight: var(--w-3); }
.statement .q{ font-weight: inherit; }
.st-title{ font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); line-height: 1.1; font-weight: var(--w-1); }
.ch-year{ font-size: clamp(3.4rem, 2rem + 4.6vw, 6.4rem); font-weight: var(--w-1); }
.ch-title{ font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); line-height: 1.45; font-weight: var(--w-2); }
.stage-year{ font-size: clamp(3rem, 2rem + 3.4vw, 5.4rem); font-weight: var(--w-1); }
.logo b{ font-weight: 700; }
.fact b{ font-size: 2.3rem; font-weight: var(--w-2); }
.values b, .st-index b{ font-weight: var(--w-2); }
.sheet-nav > a{ font-size: 1.45rem; font-weight: var(--w-3); }
.lead{ line-height: 1.95; }
.eyebrow{ font-weight: 600; letter-spacing: 0; }
/* pure Latin runs keep real Inter at full size */
.en, bdi { font-family: "Inter", system-ui, sans-serif; }
.tl-year, .ug-facts b{ font-weight: 600; letter-spacing: -.01em; }


/* ---------------- smoothness (revision 2026-10-18) ---------------- */
/* registered colours: the whole palette (text, lines, accents, stage) glides between chapters
   instead of only the background; browsers without @property simply switch */
@property --st-bg { syntax: "<color>"; inherits: true; initial-value: #17110d; }
@property --st-fg { syntax: "<color>"; inherits: true; initial-value: #f6eee3; }
@property --st-fg2 { syntax: "<color>"; inherits: true; initial-value: #cdbfae; }
@property --st-acc { syntax: "<color>"; inherits: true; initial-value: #e3c993; }
@property --st-line { syntax: "<color>"; inherits: true; initial-value: rgb(255 255 255 / .14); }
.story{ transition: --st-bg 1400ms var(--ease-io), --st-fg 1400ms var(--ease-io), --st-fg2 1400ms var(--ease-io), --st-acc 1400ms var(--ease-io), --st-line 1400ms var(--ease-io); }
.story .chip, .rail-fill, .stage-frame{ transition: none; }
.stage-bar i{ transition: transform 700ms var(--ease); }
/* stage gradients cross-fade (gradients cannot interpolate) */
.stage-frame, .story[data-ch="2"] .stage-frame{ background: #0c0907; isolation: isolate; }
.stage-frame::before, .stage-frame::after{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: opacity 1400ms var(--ease-io); }
.stage-frame::before{ background: radial-gradient(70% 60% at 50% 45%, #241a10, #0c0907 75%); }
.stage-frame::after{ background: radial-gradient(70% 60% at 50% 60%, #0b3a22, #03120a 75%); opacity: 0; }
.story[data-ch="2"] .stage-frame::after{ opacity: 1; }
.story[data-ch="3"] .stage-frame::before, .story[data-ch="4"] .stage-frame::before{ opacity: 0; }
.globe-layer{ z-index: 1; }
.scn{ z-index: 2; }
.stage-year{ z-index: 5; }
@media (prefers-reduced-motion: reduce) { .story, .stage-frame::before, .stage-frame::after{ transition: none; } }
.ug-hero .badge{ block-size: 34px; }

/* =====================================================================
   REVISION 3 (2026-10-18)
   ===================================================================== */

/* ---- UGREEN: green symbol + wordmark side by side (proposed treatment).
   Both are the owner's original files, unaltered; symbol stays on the visual left in RTL too. ---- */
.lk-ug{ --h: 16px; display: inline-flex; direction: ltr; align-items: center; gap: calc(var(--h) * .42); line-height: 0; vertical-align: middle; block-size: auto !important; inline-size: auto; }
.lk-ug img{ display: block; max-inline-size: none; inline-size: auto; }
.lk-ug .w{ block-size: var(--h) !important; }
.lk-ug .s{ block-size: calc(var(--h) * 1.5) !important; }
.dd-item.ug .dd-logo .lk-ug{ --h: 12px; }
.tri-cap .lk-ug{ --h: 14px; justify-self: start; }
.sheet-brands .lk-ug{ --h: 12px; }
.ug-hero .badge.lk-ug{ --h: 28px; margin-block: var(--s6) var(--s5); }
.scn-logo.lk-ug{ --h: 17px; }
.ab-brand .lk-ug{ --h: 20px; }
.ftr-b .lk-ug{ --h: 12px; }
@media (max-width: 760px) { .tri-cap .lk-ug{ --h: 10px; } .ch-media .scn-logo.lk-ug{ --h: 13px; } .ug-hero .badge.lk-ug{ --h: 22px; } }

/* ---- spacing: less dead space between sections ---- */
:root{ --section: clamp(64px, 3rem + 4.5vw, 112px); --fs-micro: .8125rem; }
.btn{ font-weight: 600; letter-spacing: 0; }
.num{ font-feature-settings: "tnum"; unicode-bidi: isolate; }
.dot{ inline-size: 8px; block-size: 8px; border-radius: 50%; display: inline-block; }
.dot.ug{ background: var(--ug); } .dot.tt{ background: var(--tt-clay); } .dot.iq{ background: var(--iq-blue); }

/* ---- FOOTER v3 ---- */
.ftr{ padding-block: clamp(48px, 5vw, 72px) 28px; }
.ftr-b{ display: inline-flex; align-items: center; justify-content: center; block-size: 52px; padding-inline: 20px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-ink); opacity: .85; transition: opacity var(--t-fast), box-shadow var(--t-fast); }
@media (hover: hover) { .ftr-b:hover { opacity: 1; box-shadow: inset 0 0 0 1px var(--line-ink-2); } }
.ftr-b img{ block-size: 16px; inline-size: auto; }
.ftr-b.iq img{ block-size: 18px; } .ftr-b.td img{ block-size: 20px; }
@media (max-width: 720px) {
  .ftr-b{ inline-size: 100%; padding-inline: 10px; }
  .ftr-b img{ block-size: 13px; } .ftr-b.iq img{ block-size: 15px; } .ftr-b .lk-ug{ --h: 9px; }
}
.num{ font-feature-settings: normal; letter-spacing: .01em; }
.ftr-b{ display: flex; }
/* keep page direction on the lockup (so its positioning follows the layout); only the children are ordered left-to-right */
.lk-ug{ direction: inherit; flex-direction: row; }
[dir="rtl"] .lk-ug{ flex-direction: row-reverse; }
.dd-item .lk-ug{ display: inline-flex; }
.lk-ug img{ position: static !important; inset: auto !important; transform: none !important; opacity: 1 !important; inline-size: auto !important; margin: 0 !important; filter: none; }
/* hero panels: start partly visible so the main image paints at once (better LCP); shorter, earlier reveal */
.js .tri-p{ clip-path: inset(38% 0 0 0 round 18px); transition: clip-path 900ms var(--ease), flex var(--t-slow) var(--ease); transition-delay: calc(var(--d, 0) * 90ms), 0s; }

/* ---- official Almas Ara symbol ---- */
.logo .mk{ display: grid; place-items: center; inline-size: 52px; block-size: 40px; border-radius: 10px; background: #f4f1eb; box-shadow: 0 0 0 1px rgb(255 255 255 / .06); flex-shrink: 0; }
.logo .mk img{ inline-size: 40px; block-size: auto; }
.hdr.light .logo .mk, .light .logo .mk{ background: transparent; box-shadow: none; inline-size: auto; }
.hdr.light .logo .mk img{ inline-size: 46px; }
.logo{ gap: 12px; }
.idmark{ display: inline-flex; align-items: center; gap: 14px; margin-block-end: var(--s5); }
.idmark img{ inline-size: 64px; block-size: auto; }
.idmark b{ display: block; font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; line-height: 1.2; color: var(--on-paper); }
.idmark small{ display: block; font-family: "Inter", system-ui, sans-serif; font-size: .62rem; letter-spacing: .32em; color: var(--on-paper-3); }
.idmark.id-about{ display: flex; inline-size: fit-content; }
@media (max-width: 760px) { .logo .mk{ inline-size: 46px; block-size: 36px; } .logo .mk img{ inline-size: 36px; } }

/* ================= Rev4 ================= */
/* fonts per language: Persian/Arabic use Vazirmatn; English Inter; Chinese uses the system CJK face */
html[lang="en"]{ --font: "Inter", system-ui, sans-serif; --font-head: "Inter", system-ui, sans-serif; }
/* final master: Chinese glyphs come from the system font for lang="zh-CN" (PingFang SC on Apple devices, Microsoft YaHei on
   Windows, Noto Sans CJK on Android and Linux), the same fonts the longer list picked. Each family name in the list that a
   device does not have was looked up again for every font size after the web font arrived (Chromium trace: ~330 family
   look-ups, ~70 ms, inside the first frame), so the absent names are no longer listed. */
html[lang="zh-CN"]{ --font: "Inter", system-ui, sans-serif; --font-head: var(--font); }
html[lang="zh-CN"] body{ line-height: 1.8; letter-spacing: .01em; }
/* perf (Chinese first layout): Chinese text has no web font, so for every font size and weight that carries Chinese
   characters the first layout asks the system for a fallback font (Linux trace, /zh-cn/about/: 53 such combinations,
   70-100 ms of a ~150 ms first frame). Sections below the first screen are laid out when they come near the viewport
   instead of in the first frame. Nothing is hidden: the content stays in the page, in find-in-page and in the
   accessibility tree, and looks the same once laid out. The remembered size (auto) keeps the page height stable.
   Not the About story: its script measures the chapters right after the first layout anyway, and while it is off
   screen and skipped its colour change between chapters would pause (axe then read the old colour).
   This is for the first frame only: after it, proto.js lays these sections out one per idle moment, or at once when
   one comes near the viewport, and marks them .cv-seen so they stay laid out. Left lazy, a section skipped again
   after scrolling past stopped its reveal fades half-way in Firefox and WebKit (axe read the half-faded text, CI run
   39734649796), WebKit did not start some of them at all, and on phones the page stayed up to 5000px too short. */
html[lang="zh-CN"] main > section:not(:first-child):not(.story):not(.cv-seen), html[lang="zh-CN"] .ftr:not(.cv-seen){ content-visibility: auto; contain-intrinsic-size: auto 900px; }
html[lang="en"] body{ line-height: 1.7; }
html[dir="ltr"] .display, html[dir="ltr"] .h1, html[dir="ltr"] .h2, html[dir="ltr"] .st-title{ letter-spacing: -.02em; }
html[lang="zh-CN"] .display, html[lang="zh-CN"] .h1, html[lang="zh-CN"] .h2, html[lang="zh-CN"] .st-title{ letter-spacing: 0; line-height: 1.25; }
html[dir="ltr"] .evo li:not(:last-child)::after{ content: "→"; }

/* language switcher (header): mouse, keyboard and touch */
.lsw{ position: relative; }
.lsw .lang{ cursor: pointer; color: inherit; background: none; border: 0; font: inherit; font-size: .85rem; font-weight: 600; }
.lsw .lang .caret{ inline-size: 9px; transition: transform var(--t-base); }
.lsw[data-open] .lang .caret{ transform: rotate(180deg); }
.lsw-p{ position: absolute; z-index: 5; inset-block-start: calc(100% + 10px); inset-inline-end: 0; min-inline-size: 180px; padding: 6px; border-radius: 14px; background: #fbfaf7; color: var(--on-paper); box-shadow: 0 18px 48px rgb(0 0 0 / .32), 0 0 0 1px rgb(0 0 0 / .06); display: grid; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 160ms, transform 160ms, visibility 0s 160ms; }
.lsw[data-open] .lsw-p{ opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lsw-a{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 9px; font-size: .95rem; }
.lsw-a[lang="fa"], .lsw-a[lang="ar"]{ font-family: "Vazirmatn", system-ui, sans-serif; }
.lsw-a[lang="en"]{ font-family: "Inter", system-ui, sans-serif; }
.lsw-a[lang="zh-CN"]{ font-family: system-ui, sans-serif; }
.lsw-a:focus-visible { background: #efe9df; }
@media (hover: hover) { .lsw-a:hover { background: #efe9df; } }
.lsw-a[aria-current]::after{ content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--gold-paper); }
.lsw-a[aria-current]{ font-weight: 700; }
@media (max-width: 1080px) { .hdr-tools .lsw{ display: none; } }
.sheet-langs a[lang="zh-CN"] { font-family: system-ui, sans-serif; }

/* corporate tagline */
.tagline{ font-size: clamp(1.08rem, .95rem + .55vw, 1.4rem); font-weight: 600; color: var(--gold-ink); margin-block-end: var(--s3); }
.ftr-tag{ font-size: 1.05rem !important; font-weight: 600; color: var(--gold-ink) !important; }
.ftr-h{ font-size: .8rem; font-weight: 600; color: var(--on-ink-3); letter-spacing: .04em; }

/* brand lists that grow: no layout assumes exactly three brands */
.brands{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ab-brands{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sheet-brands{ grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.dd-panel{ max-block-size: min(70vh, 560px); overflow-y: auto; }

/* layout-test placeholder brand (never published) */
.lk-ph{ display: inline-grid; place-items: center; padding: 4px 10px; border: 1px dashed currentColor; border-radius: 6px; font: 600 .8rem/1.2 "Inter", sans-serif; letter-spacing: .14em; opacity: .75; }
.ph-fill{ display: block; background: repeating-linear-gradient(135deg, #2a2b30 0 14px, #24252a 14px 28px); }
.tri-p .ph-fill.bg{ position: absolute; inset: 0; }
.lt-note{ position: relative; z-index: 3; margin: 92px auto 0; max-inline-size: 1200px; padding: 14px 18px; border-radius: 12px; background: #fff3d6; color: #4a3a12; font-size: .92rem; }
.lt-note b{ margin-inline-end: 6px; }

/* ---------- assembling diamond (About hero) ---------- */
.st-dmd{ position: absolute; z-index: -1; inset-block-start: 50%; inset-inline-end: max(2vw, calc((100vw - 1360px) / 2 - 20px)); inline-size: min(40vw, 540px); aspect-ratio: 1; transform: translateY(-58%); pointer-events: none; }
.dmd{ display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.dmd .dm-l, .dmd .dm-f, .dmd .dm-sparks > *{ transform-box: fill-box; transform-origin: center; }
.dmd .dm-l{ stroke: url(#dm-edge); stroke-width: .9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .9; }
.dmd .dm-f{ stroke: none; }
.dmd .dm-outline{ fill: none; stroke: url(#dm-edge); stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1; }
.dmd .dm-orbit{ fill: none; stroke: #e9c98f; stroke-opacity: .2; stroke-width: .8; stroke-dasharray: 1; }
.dmd .dm-rays line{ stroke: url(#dm-edge); stroke-width: .8; stroke-opacity: .28; stroke-linecap: round; stroke-dasharray: 1; }
.dmd .dm-sparks{ fill: #fff; }
.dmd .dm-sparks path{ fill: #f3dcae; }
.dmd .dm-sheen{ opacity: 0; }
.dmd .dm-body{ transform-box: view-box; transform-origin: 210px 210px; }
/* before the script runs, the parts wait hidden; if it never runs they appear after 3.5s */
@media (prefers-reduced-motion: no-preference) {
.js .st-dmd:not(.is-built) .dm-l, .js .st-dmd:not(.is-built) .dm-f, .js .st-dmd:not(.is-built) .dm-outline, .js .st-dmd:not(.is-built) .dm-orbit,
.js .st-dmd:not(.is-built) .dm-rays, .js .st-dmd:not(.is-built) .dm-sparks, .js .st-dmd:not(.is-built) .dm-glow{ opacity: 0; animation: dm-safety 0s 3.5s forwards; }
.js .st-dmd.is-run:not(.is-built) *{ animation: none; }
}
@keyframes dm-safety { to { opacity: 1; } }
.st-dmd.is-built .dm-body{ animation: dm-float 9s ease-in-out infinite; }
@keyframes dm-float { 50% { transform: translateY(-6px); } }
.st-hero-in{ position: relative; }
@media (max-width: 1080px) { .st-dmd{ inline-size: min(46vw, 420px); inset-block-start: 40%; } }
@media (max-width: 760px) {
  .st-hero{ display: flex; flex-direction: column; justify-content: flex-end; }
  .st-dmd{ position: relative; inset: auto; z-index: 0; inline-size: min(62vw, 250px); margin: -8px auto -18px; transform: none; flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) { .st-dmd.is-built .dm-body{ animation: none; } }
/* keep the hero copy clear of the diamond in every language */
@media (min-width: 761px) { .st-hero-in .st-title, .st-hero-in .st-head, .st-hero-in .st-sub, .st-hero-in .crumb{ max-inline-size: 60%; } .st-dmd{ inline-size: min(36vw, 500px); } }
.sheet-contact a{ display: inline-block; padding-block: 12px; }

/* =====================================================================
   REVISION 5 (2026-10-18)
   ===================================================================== */
/* larger official logo; header heights stay 76px / 64px (no jump) */
.logo .mk{ inline-size: 62px; block-size: 48px; border-radius: 11px; }
.logo .mk img{ inline-size: 50px; }
.hdr.light .logo .mk img{ inline-size: 58px; }
.logo b{ font-size: 1.22rem; }
.logo small{ font-size: .64rem; }
@media (max-width: 760px) {
  .logo .mk{ inline-size: 54px; block-size: 42px; } .logo .mk img{ inline-size: 44px; }
  .hdr.light .logo .mk img{ inline-size: 50px; }
  .logo b{ font-size: 1.1rem; }
}

/* ---------- activities: editorial business showcase ---------- */
.ed-sec{ overflow: clip; }
.ed-head{ display: grid; gap: 14px; max-inline-size: 44rem; margin-block-end: clamp(40px, 5vw, 72px); }
.ed-head .h2{ max-inline-size: 26ch; }
.ed{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); align-items: start; }
.ed + .ed{ margin-block-start: clamp(64px, 8vw, 128px); }
.ed-k{ display: flex; align-items: baseline; gap: 14px; font-size: .9rem; font-weight: 600; color: var(--gold-paper); }
.ed-n{ font-family: var(--font-head); font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 250; line-height: 1; color: var(--gold-paper); font-feature-settings: "tnum"; }
.ed-k > span:last-child{ padding-inline-start: 14px; border-inline-start: 1px solid var(--line-paper-2); }
.ed-t{ margin-block-start: 10px; font-family: var(--font-head); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); font-weight: var(--w-2); line-height: 1.35; text-wrap: balance; }
.ed-bd{ display: grid; gap: 22px; justify-items: start; }
.ed-bd > p{ font-size: var(--fs-lead); line-height: 1.95; color: var(--on-paper-2); max-inline-size: 46ch; }
/* image slots: fixed ratio + focal point, so owner photographs drop in without layout change */
.slot{ position: relative; margin: 0; overflow: hidden; aspect-ratio: var(--ar, 4 / 3); border-radius: var(--radius-l); background: var(--paper-2); }
.slot img{ display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); transition: transform 1600ms var(--ease); }
.slot.dark{ background: radial-gradient(70% 60% at 50% 44%, #15171c, #090909 72%); } /* final: ends in the globe image's own black, so its square edge never shows */
.slot.dark img{ object-fit: contain; padding: 8%; }
/* image reveal: clip opens from the inline-start edge (transform/clip only) */
.js .ed-rv[data-r] .slot, .js .ed-collage[data-r] .slot{ clip-path: inset(0 0 0 0 round var(--radius-l)); }
.js .ed-rv[data-r]:not(.in) .slot img, .js .ed-collage[data-r]:not(.in) .slot img{ transform: scale(1.08); }
/* A: copy at the start, tall image at the end */
.ed-a .ed-fig{ grid-column: 8 / -1; grid-row: 1 / span 2; }
.ed-a .ed-hd{ grid-column: 1 / 7; grid-row: 1; padding-block-start: clamp(8px, 4vw, 64px); }
.ed-a .ed-bd{ grid-column: 1 / 7; grid-row: 2; margin-block-start: 24px; }
.ed-countries{ display: flex; flex-wrap: wrap; gap: 6px 0; font-size: .98rem; color: var(--on-paper); }
.ed-countries li{ display: inline-flex; align-items: center; }
.ed-countries li + li::before{ content: ""; inline-size: 4px; block-size: 4px; margin-inline: 12px; border-radius: 50%; background: var(--gold); }
.ed-years{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); inline-size: 100%; max-inline-size: 560px; border-block-start: 1px solid var(--line-paper-2); }
.ed-years li{ display: grid; gap: 2px; padding-block-start: 12px; padding-inline-end: 12px; position: relative; }
.ed-years li::before{ content: ""; position: absolute; inset-block-start: -4px; inset-inline-start: 0; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--gold-paper); }
.ed-years b{ font-size: 1.15rem; font-weight: 650; }
.ed-years span{ font-size: .85rem; color: var(--on-paper-3); }
/* B: layered collage at the start, brand index at the end */
.ed-b .ed-fig{ grid-column: 1 / 8; grid-row: 1 / span 2; }
.ed-b .ed-hd{ grid-column: 8 / -1; grid-row: 1; align-self: end; }
.ed-b .ed-bd{ grid-column: 8 / -1; grid-row: 2; align-self: start; margin-block-start: 24px; }
.ed-b{ grid-template-rows: 1fr 1fr; } /* text block sits at the collage's optical middle */
.ed-collage{ position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; padding-block-end: 18%; }
.ed-collage .c1{ grid-column: 1 / 11; grid-row: 1; }
.ed-collage .c2{ grid-column: 8 / -1; grid-row: 1; align-self: end; inline-size: 100%; margin-block-end: -26%; box-shadow: 0 0 0 6px var(--paper); z-index: 1; }
.ed-collage .c3{ position: absolute; inset-block-end: 0; inset-inline-start: 6%; inline-size: 30%; box-shadow: 0 0 0 6px var(--paper); z-index: 1; }
.ed-collage .slot::after{ content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px; z-index: 2; }
.ed-collage .ug::after{ background: var(--ug-bright); } .ed-collage .tt::after{ background: var(--tt-clay); } .ed-collage .iq::after{ background: var(--iq-blue); }
/* C: wide image with an overlapping card */
@media (max-width: 1080px) {
  .ed-a .ed-fig{ grid-column: 7 / -1; } .ed-a .ed-hd, .ed-a .ed-bd{ grid-column: 1 / 7; }
  .ed-b .ed-fig{ grid-column: 1 / 7; } .ed-b .ed-hd, .ed-b .ed-bd{ grid-column: 7 / -1; }
}
/* phone: a single reading column; title, then image, then text */
@media (max-width: 760px) {
  .ed{ display: flex; flex-direction: column; gap: 20px; }
  .ed .ed-hd{ order: 1; padding: 0; } .ed .ed-fig{ order: 2; inline-size: 100%; } .ed .ed-bd{ order: 3; margin: 0; }
  .ed-a .slot{ --ar: 4 / 3 !important; }
  .ed-collage{ padding-block-end: 22%; }
  .ed-collage .c1{ grid-column: 1 / -1; }
  .ed-collage .c2{ grid-column: 8 / -1; inline-size: 100%; margin-block-end: -30%; box-shadow: 0 0 0 4px var(--paper); }
  .ed-collage .c3{ inline-size: 34%; inset-inline-start: 4%; box-shadow: 0 0 0 4px var(--paper); }
  .ed-years{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .slot{ border-radius: 16px; }
}

/* ---------- footer: identity / pages / brands / contact / offices ---------- */
.ftr5{ padding-block: clamp(56px, 6vw, 88px) 28px; }
.f5-grid{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px clamp(24px, 3vw, 48px); padding-block-end: 36px; border-block-end: 1px solid var(--line-ink); }
.f5-id{ display: grid; align-content: start; gap: 16px; }
.logo-f .mk{ inline-size: 80px; block-size: 62px; border-radius: 14px; }
.logo-f .mk img{ inline-size: 64px; }
.logo-f b{ font-size: 1.35rem; }
.f5-id .ftr-tag{ max-inline-size: 22ch; line-height: 1.8; }
.f5-col{ display: grid; align-content: start; gap: 14px; }
.f5-col ul{ display: grid; gap: 10px; }
.f5-col li + li{ margin-block-start: 0; }
.f5-col a{ color: var(--on-ink-2); font-size: .95rem; transition: color var(--t-fast); }
@media (hover: hover) { .f5-col a:hover { color: var(--on-ink); } }
.f5-brands{ display: grid; gap: 8px; }
.f5-brands .ftr-b{ display: inline-flex; justify-content: flex-start; block-size: 44px; padding-inline: 14px; inline-size: 100%; max-inline-size: 170px; }
.f5-brands .ftr-b img{ block-size: 14px; } .f5-brands .ftr-b.iq img{ block-size: 17px; } .f5-brands .ftr-b .lk-ug{ --h: 10px; } .f5-brands .ftr-b.td img{ block-size: 18px; }
.f5-ct a.num, .f5-ct a.en{ color: var(--on-ink); font-weight: 500; }
.f5-ct .link{ font-size: .88rem; color: var(--gold-ink); border-color: rgb(227 201 147 / .4); }
.f5-ofc{ gap: 16px; }
.f5-ofc address{ display: grid; gap: 2px; font-style: normal; font-size: .86rem; line-height: 1.75; color: var(--on-ink-2); }
.f5-ofc address b{ font-size: .9rem; font-weight: 600; color: var(--on-ink); margin-block-end: 2px; }
.f5-langs{ display: flex; justify-content: center; padding-block: 22px 6px; }
.f5-langs .langs{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: .88rem; color: var(--on-ink-3); }
.f5-langs .langs a[aria-current]{ color: var(--on-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.f5-langs .langs a[lang="zh-CN"]{ font-family: system-ui, sans-serif; }
.f5-copy{ text-align: center; font-size: .85rem; color: var(--on-ink-3); padding-block-start: 6px; }
@media (max-width: 1080px) {
  .f5-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .f5-id{ grid-column: 1 / -1; }
  .f5-ofc{ grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: 32px; } .f5-ofc .ftr-h{ grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .f5-grid{ grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .f5-id{ grid-column: 1 / -1; }
  .f5-ct, .f5-col:has(.f5-ct){ grid-column: 1 / -1; }
  .f5-ofc{ grid-column: 1 / -1; grid-template-columns: 1fr; }
  .logo-f .mk{ inline-size: 70px; block-size: 54px; } .logo-f .mk img{ inline-size: 56px; }
  .f5-brands .ftr-b{ max-inline-size: none; }
  .f5-copy{ padding-block-end: 64px; } /* room for the prototype badge */
}

/* ---------- language change: dust transition (assets/js/proto.js) ---------- */
/* cross-document view transition, used only for a language change (JS skips it otherwise) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration: 140ms; animation-timing-function: ease-out; }
/* arriving after a language change: text stays hidden only until the reveal starts (an inline
   head script also removes this class after 1.2s, so text can never stay hidden) */
html.lsw-in :is(.hdr, main, .ftr){ -webkit-text-fill-color: transparent; }
/* after a language change the page is already "known": no entrance motion, only the text reveal */
html.lsw-arrive :is([data-r], .mask-line > span, [data-enter] .tri-p, [data-enter] .tri-p img){ transition: none !important; }
.lsw-dust{ position: fixed; inset: 0; z-index: 200; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html.lsw-in :is(.hdr, main, .ftr){ -webkit-text-fill-color: initial; } }

/* =====================================================================
   Rev6: scroll performance. Each rule answers a measured cost (see
   REV6-PERFORMANCE.md). The look stays the same unless noted there.
   ===================================================================== */
/* 1. no backdrop blur on surfaces content scrolls under: the browser re-blurs the area
      behind them on every frame. Slightly denser solid colours give the same look. */
.hdr.is-solid, .hdr.static{ -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(11 13 18 / .97); }
.hdr.light.is-solid, .hdr.light.static{ background: rgb(244 241 235 / .97); }
/* 3. globe pulse rings: CSS (compositor) instead of canvas redraws */
.g-pulse{ position: absolute; top: 0; left: 0; inline-size: 0; block-size: 0; pointer-events: none; z-index: 1; }
.g-pulse::before{ content: ""; position: absolute; left: -14px; top: -14px; inline-size: 28px; block-size: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px rgb(243 220 170 / .8); animation: g-pulse 1.4s linear -.7s infinite; }
.g-pulse.g-home::before{ left: -20px; top: -20px; inline-size: 40px; block-size: 40px; animation-delay: 0s; }
@keyframes g-pulse { from { transform: scale(.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }
/* 4. About story: the palette change between chapters. Before: the page background, every
      text colour and line were re-painted on each frame of a 1.4 s blend, and some elements
      restarted their own colour transitions on every frame. Now the background is four solid
      layers that cross-fade on the compositor; text colours still blend through the shared
      colour tokens, without the duplicate per-element transitions. */
.story{ isolation: isolate; transition: --st-fg 1400ms var(--ease-io), --st-fg2 1400ms var(--ease-io), --st-acc 1400ms var(--ease-io), --st-line 1400ms var(--ease-io); }
.story-bg{ position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.story-bg i{ position: absolute; inset: 0; opacity: 0; transition: opacity 1400ms var(--ease-io); background: #17110d; }
.story-bg i[data-k="2"]{ background: #061a10; }
.story-bg i[data-k="3"]{ background: #e9dfd1; }
.story-bg i[data-k="4"]{ background: #eef3f8; }
.story-bg i.on{ opacity: 1; }
.ch-sub, .ch-p{ transition: none; }
.ch-countries ol li{ transition: opacity 500ms; }
.rail-node{ transition: transform 500ms var(--ease); }

/* =====================================================================
   Rev6: responsive refinements (content-driven; checked at 320 to 3440 px
   and at 125/150/200 % zoom, in all four languages)
   ===================================================================== */
/* large and ultra-wide screens: the content column grows with the screen (up to 1600 px)
   and type grows a little, instead of a 1280 px column floating in empty space */
:root{ --container: clamp(1280px, calc(66vw + 330px), 1600px); }
@media (min-width: 1800px) { html{ font-size: clamp(16px, calc(9px + .4vw), 18px); } }

/* readable minimum sizes (12 px) for small labels */
.logo small, .idmark small{ font-size: 12px; letter-spacing: .22em; }
.ch-countries ol li .en, .tile .n{ font-size: 12px; }

/* hero buttons: on narrow phones they share the row or stack, never break inside */
.hero-ctas .btn{ white-space: nowrap; }
@media (max-width: 560px) { .hero-ctas .btn{ flex: 1 1 auto; justify-content: center; } }
@media (max-width: 400px) {
  .btn:not(.btn-sm) { white-space: normal; text-align: center; line-height: 1.4; padding-block: 10px; }
  .btn-sm{ padding-inline: 14px; }
}
/* hero headline: smaller floor on very narrow phones (was 38 px at 320 px) */
.hero-copy .display{ font-size: clamp(2.05rem, 1.15rem + 3.3vw, 4.35rem); }

/* brand cards on tablets: two columns, and an odd last card spans the row as a
   horizontal card (no empty half row) */
@media (min-width: 680px) and (max-width: 1099px) {
  .brands{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .brands{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* touch: small text links get a larger invisible hit area (no visual change) */
@media (pointer: coarse) {
  :is(.f5-col, .f5-ct, .f5-langs, .ftr) a, a.num, a.en, a.link, .crumb a{ position: relative; }
  :is(.f5-col, .f5-ct, .f5-langs, .ftr) a::before, a.num::before, a.en::before, a.link::before, .crumb a::before{ content: ""; position: absolute; inset: -10px -6px; }
}
/* comfortable line length when the About intro becomes one column */
@media (max-width: 1080px) { .st-intro p, .st-intro .lead{ max-inline-size: 66ch; } }

/* ---------------- Rev7: warranty inquiry (coming soon) ---------------- */
.wty-btn{ display: inline-flex; align-items: center; gap: 7px; min-block-size: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-ink-2); transition: box-shadow var(--t-fast), color var(--t-fast); white-space: nowrap; }
.wty-btn svg{ inline-size: 16px; block-size: 16px; flex: none; color: var(--gold-ink); }
@media (hover: hover) { .wty-btn:hover { box-shadow: inset 0 0 0 1px var(--gold); } }
.hdr.light .wty-btn{ box-shadow: inset 0 0 0 1px var(--line-paper-2); }
.hdr.light .wty-btn svg{ color: var(--gold-paper); }
@media (hover: hover) { .hdr.light .wty-btn:hover { box-shadow: inset 0 0 0 1px var(--gold-paper); } }
.wty-sheet{ display: none; }
@media (max-width: 1080px) {
  .hdr-tools{ gap: 8px; }
  .wty-hdr{ order: 2; inline-size: 44px; block-size: 44px; min-block-size: 44px; padding: 0; justify-content: center; margin-inline-start: auto; }
  .wty-hdr span{ position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wty-hdr svg{ inline-size: 19px; block-size: 19px; }
  .hdr-tools .menu-btn{ order: 3; margin-inline-start: 0; }
  .wty-sheet{ display: flex; justify-content: center; inline-size: 100%; min-block-size: 50px; margin-block-start: var(--s5); font-size: .95rem; }
}
dialog.wty{ padding: 0; border: 0; border-radius: var(--radius-l); inline-size: min(440px, calc(100vw - 32px)); max-block-size: calc(100svh - 32px); background: #fbfaf7; color: var(--on-paper); box-shadow: 0 30px 80px rgb(0 0 0 / .35), 0 0 0 1px rgb(0 0 0 / .06); }
dialog.wty::backdrop{ background: rgb(8 10 14 / .58); }
dialog.wty[open]{ animation: wty-in 260ms var(--ease) both; }
dialog.wty[open]::backdrop{ animation: wty-fade 260ms var(--ease) both; }
@keyframes wty-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes wty-fade { from { opacity: 0; } }
.wty-in{ position: relative; display: grid; justify-items: center; gap: 12px; padding: 40px 28px 28px; text-align: center; }
.wty-ic{ display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; background: #f1ebdf; color: var(--gold-paper); box-shadow: inset 0 0 0 1px rgb(138 106 51 / .25); }
.wty-ic svg{ inline-size: 26px; block-size: 26px; }
.wty-t{ margin: 6px 0 0; font-family: var(--font-head, var(--font)); font-size: 1.3rem; font-weight: 700; }
.wty-d{ margin: 0; max-inline-size: 30ch; color: var(--on-paper-2); line-height: 1.9; }
.wty-ok{ --bg: var(--on-paper); --fg: #fbfaf7; margin-block-start: 12px; min-inline-size: 160px; justify-content: center; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.wty-x{ position: absolute; inset-block-start: 10px; inset-inline-end: 10px; inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%; background: none; color: var(--on-paper-2); font-size: 1rem; cursor: pointer; }
@media (hover: hover) { .wty-x:hover { background: #efe9df; color: var(--on-paper); } }
dialog.wty :focus-visible{ outline: 2px solid var(--gold-paper); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { dialog.wty[open], dialog.wty[open]::backdrop{ animation: none; } }

/* Rev7: shared cinematic toast */
.cine-toast{ position: fixed; z-index: 80; inset-block-end: 24px; inset-inline-start: 50%; translate: -50% 0; max-inline-size: min(92vw, 520px); padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--on-ink); font-size: .9rem; box-shadow: 0 10px 30px rgb(0 0 0 / .25); opacity: 0; transform: translateY(10px); transition: opacity 240ms var(--ease), transform 240ms var(--ease); pointer-events: none; }
:root[dir="rtl"] .cine-toast{ translate: 50% 0; }
.cine-toast.on{ opacity: 1; transform: none; }

/* ---------------- Rev7 colour system (§16) ----------------
   Candidate palette measured against Rev6 (contrast table in FINAL-QA.md). Proportion target 60/30/10:
   60 surfaces (Warm Ivory / Near Black), 30 structure (Warm Neutral / Deep Navy / Soft Slate), 10 accent (Muted Gold).
   Text colours were chosen from measured pairs: every body-text pair is at least 4.5:1. */
:root{
  --ink: #11151c;          /* Near Black: dark surfaces (Rev6 #0b0d12) */
  --navy: #101a28;         /* Deep Navy: footer, selected states */
  --paper: #f7f4ef;        /* Warm Ivory: light surfaces (Rev6 #f4f1eb) */
  --paper-2: #e8e2d8;      /* Warm Neutral: panels on ivory (Rev6 #ebe6dc) */
  --gold: #b3915d;         /* Muted Gold: accent fills, rules, focus on dark (Rev6 #cfae74) */
  --gold-paper: #7a5c28;   /* gold text on ivory 5.65:1 (Rev6 #8a6a33 was 4.45:1) */
  --on-paper-3: #65707c;   /* Soft Slate: tertiary text on ivory 4.60:1 (Rev6 #7b808a was 3.52:1) */
}
.ftr{ background: var(--navy); }
.light :focus-visible, .paper :focus-visible, .paper-2 :focus-visible, .ct7 :focus-visible, .ct7-coop :focus-visible{ outline-color: var(--gold-paper); }
/* Rev7 polish: the globe still blends into its dark card (no visible square edge) */
.slot.dark img{ -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent 99%); mask-image: radial-gradient(closest-side, #000 84%, transparent 99%); }
/* Rev7: tile numbers stay legible on light photos (sky, shelves) */
.tile .n{ opacity: 1; text-shadow: 0 0 2px rgb(0 0 0 / .55), 0 1px 10px rgb(0 0 0 / .6); }
.tile .cap{ text-shadow: 0 1px 12px rgb(0 0 0 / .35); }

/* ================= Rev9: homepage brand showcase =================
   One editorial row per brand: large photograph + identity, introduction and links.
   Rows alternate sides; a portrait photograph (tomtoc) gets a narrower column.
   Motion: only the existing scroll reveal plus a slow image zoom / accent line on hover. */
.bshow{ display: grid; gap: clamp(64px, 3rem + 5vw, 140px); margin-block-start: clamp(40px, 2rem + 3vw, 80px); }
.bs{ --acc: var(--gold); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 1rem + 3vw, 72px); align-items: center; }
.bs.ug{ --acc: var(--ug-bright); --go: #19c26a; }
.bs.tt{ --acc: var(--tt-clay); --go: #e7ddcf; }
.bs.iq{ --acc: #7fb0dc; --go: #9cc3e6; }
.bs-fig{ grid-column: 1 / span 7; grid-row: 1; position: relative; display: block; aspect-ratio: var(--ar); border-radius: var(--radius-l); overflow: hidden; background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-ink), 0 50px 90px -60px rgb(0 0 0 / .9); }
.bs-fig picture, .bs-fig img, .bs-fig .bs-ph{ display: block; inline-size: 100%; block-size: 100%; }
.bs-fig img{ object-fit: cover; transform: scale(1.001); transition: transform 1400ms var(--ease); }
.bs-fig .bs-ph{ position: absolute; inset: 0; }
.bs-body{ grid-column: 8 / span 5; grid-row: 1; display: grid; gap: 14px; align-content: center; max-inline-size: 34rem; }
.bs.flip .bs-fig{ grid-column: 6 / span 7; }
.bs.flip .bs-body{ grid-column: 1 / span 5; }
.bs.tall .bs-fig{ grid-column: 8 / span 4; }
.bs.tall .bs-body{ grid-column: 2 / span 5; }
.bs.tall:not(.flip) .bs-fig{ grid-column: 1 / span 4; }
.bs.tall:not(.flip) .bs-body{ grid-column: 6 / span 6; }
.bs-logo{ display: block; line-height: 0; margin-block-end: 6px; }
.bs-logo img.bs-lg{ block-size: 30px; inline-size: auto; }
.bs-logo .bs-lg.tt{ block-size: 32px; }
.bs-logo .lk-ug{ --h: 22px; }
.bs-rep{ display: flex; align-items: center; gap: 12px; font-size: .82rem; font-weight: 650; color: var(--gold-ink); }
.bs-rep i{ display: block; inline-size: 28px; block-size: 2px; border-radius: 2px; background: var(--acc); transition: inline-size var(--t-slow) var(--ease); }
.bs-t{ font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.15rem); font-weight: 750; line-height: 1.3; letter-spacing: -.01em; color: var(--on-ink); }
.bs-p{ color: var(--on-ink-2); font-size: 1rem; line-height: 1.95; }
.bs-cats{ display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 2px; }
.bs-cats li{ padding: 6px 13px; border-radius: 999px; font-size: .82rem; color: var(--on-ink-2); box-shadow: inset 0 0 0 1px var(--line-ink-2); }
.bs-acts{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-block-start: 10px; }
.bs-go{ --bg: var(--go); --fg: #0b0d12; font-weight: 700; }
.bs-go .arr{ transition: transform var(--t-base) var(--ease); }
.bs-ext{ display: inline-grid; gap: 2px; min-block-size: 44px; align-content: center; font-size: .86rem; font-weight: 600; color: var(--on-ink-2); transition: color var(--t-base); }
.bs-ext .en{ font-size: .78rem; font-weight: 500; color: var(--on-ink-3); }
@media (hover: hover) { .bs-ext:hover { color: var(--on-ink); } }
.bs-ext::after{ content: "↗"; display: none; }
@media (hover: hover) {
  .bs:hover .bs-fig img{ transform: scale(1.035); }
  .bs:hover .bs-rep i{ inline-size: 56px; }
  .bs-go:hover .arr{ transform: translateX(-5px); }
  [dir="ltr"] .bs-go:hover .arr{ transform: translateX(5px); }
}
.bs-fig:focus-visible{ outline: 2px solid var(--gold); outline-offset: 4px; }
@media (max-width: 1100px) and (min-width: 761px) {
  .bs:not(.tall){ row-gap: 28px; }
  .bs:not(.tall) .bs-fig{ grid-column: 1 / -1; grid-row: 1; }
  .bs:not(.tall) .bs-body{ grid-column: 1 / span 9; grid-row: 2; max-inline-size: 40rem; }
  .bs.tall .bs-fig{ grid-column: 1 / span 5; }
  .bs.tall .bs-body{ grid-column: 6 / span 7; }
  .bs.tall.flip .bs-fig{ grid-column: 8 / span 5; }
  .bs.tall.flip .bs-body{ grid-column: 1 / span 7; }
}
@media (max-width: 760px) {
  .bshow{ gap: 64px; }
  .bs{ grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .bs-fig, .bs.flip .bs-fig, .bs.tall .bs-fig, .bs.tall:not(.flip) .bs-fig{ grid-column: 1; grid-row: 1; aspect-ratio: var(--mar); }
  .bs.tall .bs-fig{ inline-size: min(100%, 420px); }
  .bs-body, .bs.flip .bs-body, .bs.tall .bs-body, .bs.tall:not(.flip) .bs-body{ grid-column: 1; grid-row: 2; max-inline-size: none; }
  .bs-acts .bs-go{ flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .bs-fig img, .bs-rep i{ transition: none !important; } }
@media (hover: hover) and (prefers-reduced-motion: reduce) { .bs:hover .bs-fig img{ transform: none; } }
:root[data-motion="reduce"] .bs-fig img{ transition: none !important; }
@media (hover: hover) { :root[data-motion="reduce"] .bs:hover .bs-fig img { transform: none; } }

/* ===== Final candidate: interaction polish (shared controls) =====
   One timing scale: hover/press feedback 160 ms, menus 180–220 ms, dialog 260 ms.
   Hover styles live in @media (hover: hover) so taps never leave a stuck state. */
.btn { transition: transform var(--t-fast) var(--ease), background-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); }
.btn .arr, .bs-go .arr, .dd-item .arr { transition: transform var(--t-fast) var(--ease); }
.link { transition: gap var(--t-fast) var(--ease), color var(--t-fast); }
.bs-ext, .lsw-a, .sheet-nav > a, .sheet-brands a, .sheet-langs a, .menu-btn, .sheet-close, .wty-x, .lang { transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast), transform var(--t-fast) var(--ease); }
.nav .caret, .dd .caret, .lsw .lang .caret { transition: transform 200ms var(--ease); }
/* pressed: a short, quiet confirmation (no bounce) */
.btn:active, .wty-btn:active, .menu-btn:active, .sheet-close:active, .wty-x:active, .lang:active { transform: scale(.97); }
.link:active, .bs-ext:active, .lsw-a:active, .dd-item:active, .sheet-nav > a:active, .sheet-brands a:active, .sheet-langs a:active, .f5-col a:active, .ftr a:active, .crumb a:active { opacity: .7; }
/* hover feedback for controls that had none */
@media (hover: hover) {
  .menu-btn:hover, .sheet-close:hover { box-shadow: inset 0 0 0 1px var(--on-ink-2); }
  .hdr.light .menu-btn:hover { box-shadow: inset 0 0 0 1px var(--on-paper-3); }
  .lang:hover { box-shadow: inset 0 0 0 1px var(--gold); }
  .hdr.light .lang:hover { box-shadow: inset 0 0 0 1px var(--gold-paper); }
  .dd-item:hover .arr { transform: translateX(-4px); color: var(--on-paper); }
  [dir="ltr"] .dd-item:hover .arr { transform: translateX(4px); }
  .sheet-brands a:hover { background: var(--ink-2); color: var(--on-ink); }
  .sheet-langs a:not([aria-current]):hover { box-shadow: inset 0 0 0 1px var(--on-ink-2); }
}
/* focus: gold on dark surfaces, deep gold on light ones (keeps the ring at 3:1 or more on ivory) */
:is(.paper, .light, .hdr.light, .dd-panel, .lsw-p, dialog.wty) :focus-visible { outline-color: var(--gold-paper); }
.btn:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn:active, .wty-btn:active, .menu-btn:active, .sheet-close:active, .wty-x:active, .lang:active { transform: none; } }
:root[data-motion="reduce"] :is(.btn, .wty-btn, .menu-btn, .sheet-close, .wty-x, .lang):active { transform: none; }
/* final: hero brand tiles: a deeper bottom scrim, so the white logos stay readable on light product photos */
.tri-p::after { background: linear-gradient(180deg, transparent 36%, rgb(0 0 0 / .5) 66%, rgb(0 0 0 / .86)); }
/* final: brand showcase actions on narrow phones: the page button always takes the full row and the store link sits under it,
   so the three brands look the same whatever the label length (before, short labels sat side by side with the store link) */
@media (max-width: 560px) { .bs-acts { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; } .bs-acts .bs-go { justify-self: stretch; } }

/* ---- Final pass (about-contact requests) ---- */
/* A. About stage year: Gregorian ranges (en/ar/zh) were clipped by the 3.2em box ("2012–1", "2023–");
      the box now spans the frame and ranges get a smaller display size than the 4-digit Solar year */
.stage-year { inline-size: auto; inset-inline-end: 26px; }
html:not([lang="fa"]) .stage-year { font-size: clamp(2.4rem, 1.3rem + 2.4vw, 4.4rem); }
/* B. Chapter year: full Gregorian ranges no longer break at the dash ("2022– / 2023"): Chinese at every width,
      Arabic at 320 px and on desktop (1081–1536 px) */
html[lang="zh-CN"] .ch-year { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.8rem); }
html[lang="ar"] .ch-year { font-size: clamp(2.8rem, 1.6rem + 3.6vw, 5.4rem); }
/* C. English: the country list repeated each name in capitals ("United States UNITED STATES") */
html[lang="en"] .ch-countries ol li .en { display: none; }
/*    and the country name itself never breaks (Arabic "الولايات / المتحدة"); the small Latin label wraps instead */
.ch-countries ol li { grid-template-columns: 26px max-content minmax(0, 1fr); }
.ch-countries ol li .en { text-align: end; }
/* D. Invisible chapter scenes no longer catch the pointer (the globe can be dragged again on desktop;
      right-click on the stage no longer hits the hidden IQAir photo) */
.story-stage .scn:not(.is-on), .story-stage .scn-1 { pointer-events: none; }
/* H. Values on tablets (721–1080 px): two columns; four did not fit ("Lasting relationships" ran 75 px past
      the screen edge in English at 721–768 px) */
@media (min-width: 721px) and (max-width: 1080px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* E. Values on phones: no 220 px card with the text pushed to the bottom */
@media (max-width: 720px) { .values > div { min-block-size: 0; justify-content: flex-start; gap: 12px; padding-block: 26px 28px; } }
/* F. Brand cards: the store button keeps its label on one line and moves to its own row when needed */
.ab-links .shop { white-space: nowrap; }
/* G. Phones in landscape: the chapter figure fits the screen height instead of being taller than it */
@media (max-width: 1080px) and (max-height: 520px) and (orientation: landscape) {
  .ch-media, .js .ch-media { inline-size: min(100%, calc((100svh - 110px) * 4 / 3.4)); }
}

/* ===== Final candidate: QA fixes (coordinator) ===== */
/* anchors land below the fixed header */
html{ scroll-padding-block-start: 96px; }
/* D1: skip link becomes visible when focused */
.sr:focus-visible{ position: fixed; z-index: 300; inset-block-start: 76px; inset-inline-start: 16px; inline-size: auto; block-size: auto; clip: auto; overflow: visible; white-space: nowrap; padding: 10px 18px; border-radius: 999px; background: var(--ink, #0b0d12); color: var(--on-ink, #f3f4f6); font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .5); outline: 2px solid var(--gold); outline-offset: 3px; }
/* D3: hover bridge between the trigger and the panel lives on .dd (the panel scrolls, so its ::before is clipped) */
.dd::after{ content: ""; position: absolute; inset-inline-start: -16px; inline-size: 400px; inset-block-start: 100%; block-size: 14px; display: none; }
.dd[data-open]::after{ display: block; }
@media (hover: hover) { .dd:not([data-dismissed]):hover::after{ display: block; } }
/* D2: the sheet is visible (and focusable) as soon as it opens; it still fades */
.sheet[data-open]{ transition: opacity var(--t-base) var(--ease), visibility 0s; }
/* About stage counter: its colour follows the chapter palette at the same pace as the background (no low-contrast flash between chapters) */
.stage-meta{ transition: color 900ms var(--ease-io); }
@media (prefers-reduced-motion: reduce) { .stage-meta{ transition: none; } }
/* breadcrumb links get a 44 px-ish hit area on every pointer (no visual change) */
.crumb a{ position: relative; }
.crumb a::before{ content: ""; position: absolute; inset: -10px -6px; }

/* ===== Rev10 visual corrections (coordinator) ===== */
/* §11 the fixed header is fully opaque once solid: at 97% the page behind it (timeline years, chapter
   headings, dark figures) showed through its bottom edge while scrolling */
.hdr.is-solid, .hdr.static{ background: #0b0d12; }
.hdr.light.is-solid, .hdr.light.static{ background: #f4f1eb; }

/* 1. Home chapter 02 "global brand connections": the company mark at the centre, fine lines to one product
   photograph per brand over a faint globe schematic (cooperation only; no routes, offices or logistics) */
.ed-b .ed-fig.ed-netw{ align-self: center; }
.ed-net{ --net-geo: rgb(138 106 51 / .2); --net-line: rgb(138 106 51 / .62); position: relative; inline-size: 100%; aspect-ratio: 1 / 1; margin-block-end: 18px; }
.ed-net::before{ content: ""; position: absolute; inset: 2%; pointer-events: none; background-image: radial-gradient(rgb(138 106 51 / .26) 1px, transparent 1.5px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); }
.net-svg{ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
[dir="rtl"] .net-svg{ transform: scaleX(-1); }
.net-m{ display: none; }
.net-geo > *{ fill: none; stroke: var(--net-geo); stroke-width: 1; vector-effect: non-scaling-stroke; }
.net-geo .net-ring{ stroke: rgb(138 106 51 / .42); stroke-dasharray: 2 5; }
.net-l{ fill: none; stroke: var(--net-line); stroke-width: .17; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.net-m .net-l{ stroke-width: .36; }
.net-t{ fill: var(--gold-paper); }
.net-t.ug{ fill: #12a35a; } .net-t.tt{ fill: var(--tt-clay); } .net-t.iq{ fill: var(--iq-blue); } .net-t.td{ fill: #8e98a3; }
.net-core{ position: absolute; z-index: 2; inset-inline-start: var(--dcx, 52%); inset-block-start: var(--dcy, 47%); inline-size: var(--dcs, 16%); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 7px var(--paper), 0 0 0 8px rgb(138 106 51 / .28), 0 22px 44px -20px rgb(40 30 15 / .4); }
[dir="rtl"] .net-core{ translate: 50% -50%; }
.net-core img{ inline-size: 66%; block-size: auto; }
.net-card{ --b: var(--gold-paper); position: absolute; z-index: 1; margin: 0; inline-size: var(--w, 30%); aspect-ratio: 4 / 5; inset-inline-start: var(--x); inset-block-start: var(--y); }
.net-card.ug{ --b: #12a35a; } .net-card.tt{ --b: var(--tt-clay); } .net-card.iq{ --b: var(--iq-blue); } .net-card.td{ --b: #8e98a3; }
.net-card img{ display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: var(--radius-l); box-shadow: 0 0 0 1px rgb(20 23 29 / .06), 0 34px 60px -30px rgb(40 30 15 / .5); }
.net-card.n1 img{ object-position: 40% 60%; }
.net-lb{ position: absolute; inset-block-end: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 11px; border-radius: 999px; background: rgb(251 250 247 / .95); color: var(--on-paper); font: 650 .8rem/1 "Inter", var(--font); letter-spacing: .01em; box-shadow: 0 8px 20px -10px rgb(0 0 0 / .45); white-space: nowrap; }
.net-lb i{ inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--b); }
.net-lb small{ font: 500 .78rem/1 var(--font); color: #5f6570; padding-inline-start: 8px; border-inline-start: 1px solid var(--line-paper-2); }
/* reveal: the cards rise, then the lines draw out from the centre (one time; no loop) */
.js .ed-netw[data-r]{ opacity: 1; transform: none; }
.net-card{ transition: opacity 900ms var(--ease) calc(var(--i, 0) * 140ms), transform 1100ms var(--ease) calc(var(--i, 0) * 140ms); }
.net-core{ transition: opacity 700ms var(--ease) 300ms, scale 900ms var(--ease) 300ms; }
.net-l{ transition: stroke-dashoffset 1500ms var(--ease) calc(650ms + var(--i, 0) * 150ms); }
.net-t{ transition: opacity 500ms var(--ease) 1700ms; }
.js .ed-netw:not(.in) .net-card{ opacity: 0; transform: translateY(26px); }
.js .ed-netw:not(.in) .net-core{ opacity: 0; scale: .86; }
.js .ed-netw:not(.in) .net-l{ stroke-dashoffset: 1; }
.js .ed-netw:not(.in) .net-t{ opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .net-card, .net-core, .net-l, .net-t{ transition: none; }
  .js .ed-netw:not(.in) :is(.net-card, .net-core, .net-t){ opacity: 1; transform: none; scale: 1; }
  .js .ed-netw:not(.in) .net-l{ stroke-dashoffset: 0; }
}
/* tablets and phones: the mark on top, three cards in one row below, joined by three lines; the chapter
   stacks (heading, figure, text) so the cards stay large enough to read */
@media (max-width: 1080px) {
  .ed-b{ display: flex; flex-direction: column; gap: 20px; }
  .ed-b .ed-hd{ order: 1; padding: 0; } .ed-b .ed-fig.ed-netw{ order: 2; inline-size: 100%; align-self: stretch; } .ed-b .ed-bd{ order: 3; margin: 0; }
  .ed-net{ aspect-ratio: 100 / var(--mh, 82); margin: 0 auto 4px; max-inline-size: 720px; }
  .net-d{ display: none; } .net-m{ display: block; }
  .net-core{ inset-inline-start: 50%; inset-block-start: var(--mcy, 18.3%); inline-size: var(--mcs, 18%); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px rgb(138 106 51 / .28), 0 16px 30px -16px rgb(40 30 15 / .4); }
  .net-card{ inline-size: var(--mw); inset-inline-start: var(--mx); inset-block-start: var(--my); }
  .net-lb{ inset-block-end: auto; inset-block-start: calc(100% + 8px); inset-inline-start: 50%; translate: 50% 0; padding: 5px 8px; font-size: .78rem; box-shadow: none; background: transparent; }
  [dir="ltr"] .net-lb{ translate: -50% 0; }
  .net-lb small{ font-size: .78rem; }
  .ed-netw{ padding-block-end: 34px; }
}
@media (max-width: 760px) {
  .net-card img{ border-radius: 14px; }
  .net-lb, .net-lb small{ font-size: .7rem; }
  .ed-netw{ padding-block-end: 30px; }
}

/* 7-9. About chapters 1401 / 1402 / 1405: art-directed scenes (Rev10). The scene engine, timing and scroll
   behaviour are unchanged; only what each scene shows. Each scene is a size container, so the compositions
   scale with the stage (portrait on desktop, landscape in the phone figure). */
.scx{ container-type: size; }
.scx::after{ display: none; }
.scx img{ position: absolute; }
.scx .rv{ transition: opacity 900ms var(--ease) calc(var(--rd, 0) * 1ms), transform 1300ms var(--ease) calc(var(--rd, 0) * 1ms); }
.story-stage .scx:not(.is-on) .rv{ opacity: 0; transform: translateY(26px); }
.js .ch:not(.is-on) .ch-media .scx .rv{ opacity: 0; transform: translateY(18px); }
.rig{ position: absolute; inset-inline-start: calc(50% - var(--rw) / 2); } /* no transform or z-index: the IQAir photos blend (multiply) with the scene background */
.rig .pr{ object-fit: contain; block-size: auto; }
[dir="rtl"] .rig > svg, [dir="rtl"] .scx .pcb-field, [dir="rtl"] .scx .q-air{ transform: scaleX(-1); }
.yr-mark{ position: absolute; z-index: 4; inset-inline-start: 26px; font-size: clamp(3rem, 2rem + 3.4vw, 5.4rem); inset-block-end: calc(18px + 1.14em); inline-size: 2.3em; block-size: 1px; pointer-events: none; transform-origin: 0 50%; transition: transform 1400ms var(--ease) 500ms, opacity 900ms 500ms; }
[dir="rtl"] .yr-mark{ transform-origin: 100% 50%; }
html:not([lang="fa"]) .yr-mark{ font-size: clamp(2.4rem, 1.3rem + 2.4vw, 4.4rem); inline-size: 2.6em; }
.story-stage .scx:not(.is-on) .yr-mark{ transform: scaleX(0); opacity: 0; }
.ch-media .yr-mark{ display: none; }

/* 1401 UGREEN, "technological transformation": real products joined by circuit traces on a fine grid */
.scn-2.scx{ background: linear-gradient(rgb(25 194 106 / .045) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgb(25 194 106 / .045) 1px, transparent 1px) 0 0 / 22px 22px; }
.pcb-field{ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 0; }
.pcb-field path{ fill: none; stroke: rgb(25 194 106 / .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pcb-field .nd circle{ fill: rgb(25 194 106 / .35); }
.ug-rig{ --rw: min(92cqw, 76cqh); inline-size: var(--rw); aspect-ratio: 1; inset-block-start: calc(var(--floor, 77cqh) - var(--rw) * .8); z-index: 1; }
.pcb-rig{ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.pcb-rig .tr path{ fill: none; stroke: #19c26a; stroke-opacity: .62; stroke-width: .28; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease) 450ms; }
.pcb-rig .tr .k0{ stroke-opacity: .34; }
.pcb-rig .tr .k2{ stroke-dasharray: .02 .025; transition: opacity 700ms 900ms; }
.pcb-rig .tr .k4, .pcb-rig .tr .k5{ transition-delay: 800ms; }
.pcb-rig .nd circle{ fill: #19c26a; transition: opacity 500ms 1500ms; }
.pcb-rig .pd rect{ fill: none; stroke: #19c26a; stroke-opacity: .7; stroke-width: .22; transition: opacity 500ms 1300ms; }
.story-stage .scn-2:not(.is-on) .pcb-rig .tr path:not(.k2){ stroke-dashoffset: 1; }
.story-stage .scn-2:not(.is-on) :is(.pcb-rig .k2, .pcb-rig .nd circle, .pcb-rig .pd rect){ opacity: 0; }
.u-gan{ inline-size: 27%; inset-inline-start: 5%; inset-block-end: 20%; filter: drop-shadow(0 18px 18px rgb(0 0 0 / .55)); --rd: 250; }
.u-pb{ inline-size: 25%; inset-inline-start: 37.5%; inset-block-end: 23%; filter: drop-shadow(0 28px 22px rgb(0 0 0 / .6)); --rd: 100; }
.u-hub{ inline-size: 33%; inset-inline-start: 64.5%; inset-block-end: 20%; filter: drop-shadow(0 18px 18px rgb(0 0 0 / .55)); --rd: 400; }
.story-stage .scn-2.is-on .u-pb{ animation: st-float 6s ease-in-out 2.4s infinite alternate; }
.scn-2 .yr-mark{ background: linear-gradient(90deg, #19c26a, rgb(25 194 106 / .2)); }
[dir="rtl"] .scn-2 .yr-mark{ background: linear-gradient(-90deg, #19c26a, rgb(25 194 106 / .2)); }
.scn-2 .yr-mark::after{ content: ""; position: absolute; inset-inline-end: -3px; inset-block-start: -3px; inline-size: 7px; block-size: 7px; border-radius: 50%; background: #19c26a; box-shadow: 0 0 0 4px rgb(25 194 106 / .18); }
.story[data-ch="2"] .stage-year{ color: #f3fff8; text-shadow: 0 10px 34px rgb(0 0 0 / .45); }

/* 1402 tomtoc, "designed for movement": an editorial crop of a backpack in motion, a material detail
   with stitch lines, warm neutrals and a faint twill texture */
.scn-3.scx{ background: repeating-linear-gradient(45deg, rgb(70 48 30 / .035) 0 1px, transparent 1px 5px), linear-gradient(160deg, #efe6d9, #e2d5c3); }
.scn-3 .t-main{ inset-block: 0; inset-inline-end: 0; inline-size: 54%; block-size: 100%; object-fit: cover; object-position: 62% 50%; transform: scale(1.06); transition: transform 2400ms var(--ease); }
.scn-3.is-on .t-main, .ch-media .scn-3 .t-main{ transform: none; }
.t-side{ position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 46%; padding: 11cqh 7cqw 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9cqh; }
.t-side::before{ content: ""; position: absolute; inset-block: 7cqh; inset-inline-end: 0; inline-size: 1px; background: linear-gradient(transparent, rgb(133 88 58 / .45) 20% 80%, transparent); }
.scn-3 .t-logo{ position: relative; block-size: clamp(16px, 4.2cqh, 26px); inline-size: auto; --rd: 200; }
.t-detail{ position: relative; margin: 0; inline-size: min(100%, 44cqh); aspect-ratio: 1; --rd: 350; }
.t-detail img{ inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 26px 46px -24px rgb(60 38 20 / .55); }
.t-detail::before{ content: ""; position: absolute; inset: -9px; border: 1px dashed rgb(133 88 58 / .55); border-radius: 20px; pointer-events: none; }
.t-detail::after{ content: ""; position: absolute; inset-inline: 0; inset-block-start: calc(100% + 22px); block-size: 9px; border-inline: 1px solid rgb(133 88 58 / .6); background: linear-gradient(rgb(133 88 58 / .6), rgb(133 88 58 / .6)) 0 50% / 100% 1px no-repeat; }
.scn-3 .yr-mark{ background: repeating-linear-gradient(90deg, #85583a 0 7px, transparent 7px 12px); opacity: .8; }
.story[data-ch="3"] .stage-year{ color: #2a1d14; text-shadow: none; }

/* 1405 IQAir, "a new dimension of clean air": the real product family on a calm light floor, soft airflow
   lines and fine particles. Purely visual: no readings, effects or claims */
.scn-4.scx{ background: radial-gradient(80% 55% at 70% 30%, rgb(255 255 255 / .9), transparent 70%), linear-gradient(180deg, #dce8f3 0%, #eaf1f8 46%, #f6f9fc 70%, #fbfcfe 100%); }
.scn-4 .scn-logo{ display: block; }
.q-air{ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.q-air path{ fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.q-air g{ transition: opacity 1400ms var(--ease) 600ms; animation: q-drift 16s ease-in-out infinite alternate; }
.story-stage .scn-4:not(.is-on) .q-air g{ opacity: 0; animation-play-state: paused; }
@keyframes q-drift { to { transform: translate(-2.5%, -2%); } }
.iq-rig{ --rw: min(98cqw, 120cqh); inline-size: var(--rw); aspect-ratio: 100 / 72; inset-block-start: calc(var(--floor, 77cqh) - var(--rw) * .72 * .88); }
.iq-rig::before{ content: ""; position: absolute; inset-inline: -6%; inset-block-start: 84%; block-size: 12%; background: radial-gradient(50% 50% at 50% 50%, rgb(255 255 255 / .95), transparent 70%); }
.iq-rig .pr{ mix-blend-mode: multiply; inset-block-end: 12%; }
.q-hp{ inline-size: 34%; inset-inline-start: 58%; --rd: 100; }
.q-ax{ inline-size: 23.5%; inset-inline-start: 33%; --rd: 250; }
.q-ad{ inline-size: 13.5%; inset-inline-start: 18%; --rd: 400; }
.q-av{ inline-size: 13%; inset-inline-start: 2.5%; --rd: 550; }
.scn-4 .air{ z-index: 3; }
.scn-4 .yr-mark{ background: linear-gradient(90deg, rgb(47 110 163 / .7), rgb(47 110 163 / 0)); }
[dir="rtl"] .scn-4 .yr-mark{ background: linear-gradient(-90deg, rgb(47 110 163 / .7), rgb(47 110 163 / 0)); }

/* phone figure (no stage year there): the floor sits lower so the products fill the frame */
.ch-media .scx{ --floor: 86cqh; }
.ch-media .scn-2 .pcb-rig .tr path{ stroke-width: .5; }
.ch-media .ug-rig{ --rw: min(96cqw, 100cqh); }
.ch-media .iq-rig{ --rw: min(98cqw, 130cqh); }
.ch-media .t-side{ padding: 9cqh 5cqw 0; gap: 7cqh; }
.ch-media .t-detail{ inline-size: min(100%, 50cqh); }
.ch-media .t-detail::after{ display: none; }
@media (prefers-reduced-motion: reduce) {
  .scx .rv, .yr-mark, .pcb-rig *, .scn-3 .t-main, .q-air g{ transition: none; animation: none; }
  .story-stage .scx:not(.is-on) .rv, .js .ch:not(.is-on) .ch-media .scx .rv{ opacity: 1; transform: none; }
  .story-stage .scn-2.is-on .u-pb{ animation: none; }
}

/* ===================== Rev11 · TecnoDry, the fourth brand =====================
   Typeset temporary wordmark (no official logo file yet), the airflow artwork used in every slot that will
   later take a TecnoDry photograph, and the scalable brand layouts (four brands). */
:root{ --td-graphite: #16181b; --td-soft: #0d0e10; --td-silver: #c9ced4; --td-steel: #8e98a3; --td-ivory: #f4f1ea; --td-champ: #c8ae86; }
/* Rev12: official TecnoDry logo (image). --h is the old cap height of the typeset placeholder; the logo's letters are
   about 64% of its height (the rest is the MADE IN ITALY line), so the image is 1.6×--h tall for the same visual weight. */
img.lk-td{ --h: 16px; display: inline-block; block-size: calc(var(--h) * 1.6) !important; inline-size: auto !important; max-inline-size: none !important; object-fit: contain; vertical-align: middle; }
.dd-item.td .dd-logo .lk-td{ --h: 13px; }
.tri-cap .lk-td{ --h: 14px; justify-self: start; }
.sheet-brands .lk-td{ --h: 13px; }
.ab-brand .lk-td{ --h: 20px; }
.bs-logo .lk-td{ --h: 24px; }
@media (max-width: 760px) { .tri-cap .lk-td{ --h: 10px; } }
.td-art{ position: relative; display: block; overflow: hidden; background: radial-gradient(120% 90% at 70% 40%, #23262b 0%, var(--td-graphite) 45%, var(--td-soft) 100%); }
.td-art svg{ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
[dir="rtl"] .td-art svg{ transform: scaleX(-1); }
.tri-art svg{ transform: none !important; }
.td-art .td-st path{ stroke-dasharray: 1; stroke-dashoffset: 0; }
.td-art::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(80% 70% at 60% 50%, #000, transparent); mask-image: radial-gradient(80% 70% at 60% 50%, #000, transparent); }
.td-art-mk{ position: absolute; z-index: 1; inset-block-end: 9%; inset-inline-start: 9%; --h: clamp(11px, 1.4vw, 18px); }
/* streamlines draw in once when their block is revealed */
.js .td-art .td-st path{ transition: stroke-dashoffset 1600ms var(--ease) calc(200ms + var(--i, 0) * 45ms); }
.js .ed-netw:not(.in) .td-art .td-st path, .js [data-r]:not(.in) .td-art .td-st path, .js .hero-grid:not(.ready) .td-art .td-st path{ stroke-dashoffset: 1; }
@media (prefers-reduced-motion: reduce) { .js .td-art .td-st path{ transition: none; stroke-dashoffset: 0 !important; } }
/* hero brand panel */
.tri-art{ position: absolute; inset: 0; }
/* brand showcase row and network card */
.bs-art{ inline-size: 100%; block-size: 100%; aspect-ratio: var(--ar, 16 / 9); border-radius: inherit; }
.bs.td{ --acc: #c9ced4; --go: #e3e6ea; }
.net-card .net-art{ inline-size: 100%; block-size: 100%; border-radius: var(--radius-l); box-shadow: 0 0 0 1px rgb(20 23 29 / .06), 0 34px 60px -30px rgb(40 30 15 / .5); }
.net-card .net-art .td-art-mk{ --h: clamp(9px, 1.05vw, 15px); inset-block-end: auto; inset-block-start: 10%; }
@media (max-width: 1080px) { .net-card .net-art{ border-radius: 14px; } .net-card .net-art .td-art-mk{ --h: clamp(9px, 2.4vw, 14px); } }
.dot.td{ background: var(--td-steel); }
/* four (or more) current brands on About */
.ab-brands{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
/* four brands on tablets and phones: a 2 × 2 grid, kept compact */
@media (max-width: 1080px) { .ed-net:not(.n3){ max-inline-size: 520px; } }

/* phone menu: an even 2 × 2 set of brand tiles when there are four (any count stays even) */
.sheet-brands:has(> a:nth-child(4):last-child){ grid-template-columns: 1fr 1fr; }

/* ===================== Rev12 · About 1400: TecnoDry chapter =====================
   Palette: graphite with warm silver; the globe sinks below the stage (as in the UGREEN chapter, untinted). */
.story[data-ch="td"]{ --st-bg: #121416; --st-fg: #eef0f2; --st-fg2: #aab1b9; --st-acc: #c8ae86; --st-line: rgb(255 255 255 / .13); }
.story-bg i[data-k="td"]{ background: #121416; }
.story[data-ch="td"] .stage-frame{ background: radial-gradient(70% 60% at 62% 38%, #24272b, #0c0d0f 75%); }
.story[data-ch="td"] .globe-layer{ transform: scale(2.1) translateY(34%); opacity: .16; filter: grayscale(1); }
.story[data-ch="td"] .stage-frame::before{ opacity: 0; }
.story[data-ch="td"] .stage-year{ color: #f4f5f6; text-shadow: 0 10px 34px rgb(0 0 0 / .5); }
.scn-td.scx{ background: linear-gradient(rgb(201 206 212 / .04) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, rgb(201 206 212 / .04) 1px, transparent 1px) 0 0 / 26px 26px; }
.td-sc{ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.td-sc .tds-l path{ fill: none; stroke-width: .4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1800ms var(--ease) calc(500ms + var(--j) * 70ms); }
.story-stage .scn-td:not(.is-on) .tds-l path, .js .ch:not(.is-on) .ch-media .scn-td .tds-l path{ stroke-dashoffset: 1; }
.tds-dry{ filter: drop-shadow(0 24px 26px rgb(0 0 0 / .6)); transition: opacity 1000ms var(--ease) 200ms, transform 1400ms var(--ease) 200ms; transform-box: fill-box; }
.story-stage .scn-td:not(.is-on) .tds-dry{ opacity: 0; transform: translateX(14px); }
.scn-logo.lg-td{ block-size: 34px; }
.tds-it{ position: absolute; z-index: 3; inset-block-start: 74px; inset-inline-start: 50%; translate: 50% 0; display: flex; align-items: center; gap: 10px; margin: 0; font: 600 .66rem/1 "Inter", sans-serif; letter-spacing: .3em; color: rgb(233 235 238 / .7); --rd: 700; }
[dir="ltr"] .tds-it{ translate: -50% 0; }
.tds-it .tri3{ inline-size: 30px; }
.scn-td .yr-mark{ background: linear-gradient(90deg, #c8ae86, rgb(200 174 134 / .15)); }
[dir="rtl"] .scn-td .yr-mark{ background: linear-gradient(-90deg, #c8ae86, rgb(200 174 134 / .15)); }
.ch-media .scn-td{ background-color: #111315; }
.ch-media .scn-logo.lg-td{ block-size: 24px; }
.ch-media .tds-it{ inset-block-start: 52px; }
/* the Italian hairline used on the TecnoDry page and in this chapter */
.tri3{ display: inline-block; inline-size: 42px; block-size: 2px; background: linear-gradient(90deg, #1f8a52 0 33.3%, #e9e9e6 33.3% 66.6%, #c4363a 66.6%); opacity: .85; }
@media (prefers-reduced-motion: reduce) { .td-sc .tds-l path, .tds-dry{ transition: none; } .story-stage .scn-td:not(.is-on) .tds-l path{ stroke-dashoffset: 0; } }
/* homepage: TecnoDry product cut-outs on the graphite airflow artwork */
.tri-td{ position: absolute; inset: 0; display: block; overflow: hidden; }
.tri-td .td-art{ position: absolute; inset: 0; }
.tri-td .tri-cut{ position: absolute; inset-inline-start: 50%; translate: -50% 0; inset-block-start: 22%; inline-size: 84%; block-size: auto; object-fit: contain; filter: drop-shadow(0 30px 30px rgb(0 0 0 / .6)); }
[dir="rtl"] .tri-td .tri-cut{ translate: 50% 0; }
.bs-stage{ position: absolute; inset: 0; display: block; }
.bs-stage .td-art{ position: absolute; inset: 0; }
.bs-stage .bs-cut{ position: absolute; inset-block: 9%; inset-inline-start: 50%; translate: -50% 0; block-size: 82%; inline-size: auto; max-inline-size: 86%; object-fit: contain; filter: drop-shadow(0 34px 34px rgb(0 0 0 / .55)); }
[dir="rtl"] .bs-stage .bs-cut{ translate: 50% 0; }

/* ===== Rev13 · About "our brands today": chronological cards (oldest relationship first) =====
   Grid order follows the document order, so RTL reads right-to-left and LTR left-to-right without any CSS reversal. */
.ab-brands.ab-chrono{ list-style: none; padding: 0; margin: var(--s7) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ab-chrono > li{ position: relative; display: grid; grid-template-rows: auto 1fr; gap: 22px; min-inline-size: 0; }
.ab-when{ position: relative; margin: 0; padding-block-end: 20px; display: grid; gap: 6px; }
.ab-when .ab-k{ font-size: .76rem; font-weight: 650; color: var(--gold-paper); }
.ab-when .ab-y{ font-size: clamp(1.7rem, 2.3vw, 2.35rem); font-weight: 700; line-height: 1.05; color: var(--on-paper); letter-spacing: -.01em; }
.ab-when .ab-n{ position: absolute; inset-block-start: 2px; inset-inline-end: 2px; font: 600 .7rem/1 "Inter", sans-serif; letter-spacing: .18em; color: var(--on-paper-3); }
/* the rail: one hairline across the row, a dot under each year */
.ab-when::after{ content: ""; position: absolute; inset-block-end: 0; inset-inline: 0 -16px; block-size: 1px; background: var(--line-paper-2); }
.ab-chrono > li:last-child .ab-when::after{ inset-inline-end: 0; }
.ab-when::before{ content: ""; position: absolute; z-index: 1; inset-block-end: -4px; inset-inline-start: 0; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--gold-paper); box-shadow: 0 0 0 4px var(--paper); }
.ab-chrono .ab-brand{ display: flex; flex-direction: column; gap: 16px; padding: 26px; block-size: 100%; box-sizing: border-box; }
.ab-chrono .ab-brand .lg{ block-size: 44px; }
.ab-chrono .ab-brand p{ margin: 0; flex: 1 0 auto; min-block-size: 3.2em; }
.ab-chrono .ab-links{ flex-direction: column; align-items: stretch; gap: 14px; margin: 0; }
.ab-chrono .ab-links .link{ align-self: flex-start; }
.ab-chrono .ab-links .shop{ justify-content: center; white-space: normal; text-align: center; }
@media (max-width: 1080px){
  .ab-brands.ab-chrono{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .ab-chrono > li:nth-child(2n) .ab-when::after{ inset-inline-end: 0; }
}
@media (max-width: 600px){
  /* one column: the rail turns vertical along the reading edge */
  .ab-brands.ab-chrono{ grid-template-columns: 1fr; row-gap: 26px; }
  .ab-chrono > li{ padding-inline-start: 26px; gap: 14px; }
  .ab-chrono > li::before{ content: ""; position: absolute; inset-inline-start: 4px; inset-block: 14px -26px; inline-size: 1px; background: var(--line-paper-2); }
  .ab-chrono > li:last-child::before{ inset-block-end: 0; }
  .ab-when{ padding-block-end: 0; }
  .ab-when::after{ display: none; }
  .ab-when::before{ inset-block: 10px auto; inset-inline-start: -26px; }
  .ab-chrono .ab-brand p{ min-block-size: 0; }
}

/* ===== Rev13 · icons drawn as SVG instead of font glyphs =====
   Inter has no arrow or ✕ glyphs, so each OS drew them with a different fallback font. Inline SVG / mask in
   currentColor renders identically everywhere and keeps the existing hover moves (they transform the wrapper). */
.arr{ display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.arr svg{ inline-size: 1em; block-size: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.sheet-close, .wty-x{ display: inline-grid; place-items: center; }
.sheet-close svg, .wty-x svg{ inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ext::after, .iqx-ghost.ext::after{ content: ""; inline-size: .78em; block-size: .78em; background: currentColor; -webkit-mask: url("../img/icons/arr-ne.svg") center / contain no-repeat; mask: url("../img/icons/arr-ne.svg") center / contain no-repeat; vertical-align: -.05em; }
.evo li:not(:last-child)::after, [dir="ltr"] .evo li:not(:last-child)::after, html[dir="ltr"] .evo li:not(:last-child)::after{ content: ""; inline-size: 14px; block-size: 14px; background: currentColor; -webkit-mask: url("../img/icons/arr-w.svg") center / contain no-repeat; mask: url("../img/icons/arr-w.svg") center / contain no-repeat; }
[dir="ltr"] .evo li:not(:last-child)::after, html[dir="ltr"] .evo li:not(:last-child)::after{ -webkit-mask-image: url("../img/icons/arr-e.svg"); mask-image: url("../img/icons/arr-e.svg"); }

/* ---------- Rev13 · interface-guidelines fixes ---------- */
/* hero panels are clip-pathed, which hides the outline: draw the focus ring inside the clip */
.tri-p:focus-visible{ outline: none; }
.tri-p:focus-visible::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--gold); z-index: 6; pointer-events: none; }
/* a focused element inside a not-yet-revealed block is always visible; print shows everything */
.js [data-r]:focus-within{ opacity: 1; transform: none; }
@media print{ .js [data-r], .js .mask-line > span{ opacity: 1 !important; transform: none !important; } }
.sheet{ overscroll-behavior: contain; }
:is(.ab-y, .tl-y, .ch-y, .num){ font-variant-numeric: tabular-nums; }
a, button{ -webkit-tap-highlight-color: transparent; }
/* Rev13: "ITALIA" label was 10.6px */
.tds-it{ font-size: .72rem; }
/* Rev13 (Pass C): chapter pictures on phones keep their loops paused while off screen */
.ch-media:not(.is-vis) *, .ch-media:not(.is-vis) *::before, .ch-media:not(.is-vis) *::after{ animation-play-state: paused !important; }
/* Content Revision 01, Option A: the home "about" band and the activities band that follows it sat on the same
   cream with a full section padding each (up to 224 px of empty cream between them). Tighter padding, the four
   business areas as quiet labels, and one number column for the three facts. Same palette, type and motion. */
.home-intro{ padding-block: clamp(44px, 1.5rem + 3vw, 80px) clamp(24px, .75rem + 2vw, 44px); }
.home-intro + .ed-sec{ padding-block-start: clamp(24px, .75rem + 2vw, 44px); }
.home-intro .statement{ margin-block-start: var(--s4); }
.intro-areas{ display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.intro-areas li{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line-paper-2); border-radius: 999px; font-size: .86rem; line-height: 1.5; color: var(--on-paper-2); }
.intro-areas li::before{ content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--gold-paper); flex: none; }
.home-intro .intro-more{ margin-block-start: var(--s5); }
/* one number column for all three facts (the widest number sets it); browsers without subgrid keep the old rows */
.home-intro .facts{ grid-template-columns: fit-content(42%) minmax(0, 1fr); }
.home-intro .fact{ grid-column: 1 / -1; grid-template-columns: subgrid; padding-block: 16px; }
@media (max-width: 720px) { .intro-areas li{ font-size: .8125rem; } }
/* Content Revision 01, item 11: an Iranian brand website named inside a sentence, linked only when its address is confirmed */
a.ir-site{ color: inherit; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
a.ir-site:hover{ text-decoration-thickness: 2px; }

/* =====================================================================
   Final pass (2026-10-20): scroll smoothness. Each rule answers a cost
   measured in docs/release/PERFORMANCE.md (section "Final pass").
   ===================================================================== */
/* globe in the TecnoDry chapter: the grey look is drawn by the canvas itself (globe.js), so the
   scaled 2.1x layer no longer runs a grayscale filter on every redraw. The two small pulse rings keep the filter. */
.story[data-ch="td"] .globe-layer{ filter: none; }
.story[data-ch="td"] .g-pulse{ filter: grayscale(1); }
.st-hero.is-away *, .st-hero.is-away *::before, .st-hero.is-away *::after,
.story-stage.is-away *, .story-stage.is-away *::before, .story-stage.is-away *::after{ animation-play-state: paused !important; }
/* phone menu: on opening, the sheet becomes visible at once (only its fade runs), so the script's focus() on its
   first link always lands. Before, visibility itself transitioned; on a slow first frame (seen in WebKit) the sheet
   could still be "hidden" when focus was moved, and keyboard focus stayed behind the menu. Closing still fades. */
.sheet[data-open]{ transition: opacity var(--t-base) var(--ease), visibility 0s; }

/* Final master (owner, 2026-10-20): About introduction. Heading column + three labelled rows (start, new fields, today)
   instead of two half-empty columns; larger, darker body text; key years as quiet gold labels. */
.st-intro-sec{ padding-block: clamp(64px, 8vw, 120px); }
.st-intro{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.st-intro .statement{ font-size: clamp(1.65rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.45; font-weight: 760; margin-block-start: 14px; text-wrap: balance; }
.st-intro-sub{ margin-block-start: var(--s4); font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem); line-height: 1.8; color: var(--on-paper-2); max-inline-size: 30ch; }
.st-intro-body{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 1.1rem; color: var(--on-paper); }
.st-intro-body li{ display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: clamp(16px, 2.4vw, 36px); padding-block: 26px; border-block-start: 1px solid rgb(20 23 29 / .12); }
.st-intro-body li:first-child{ border-block-start: 0; padding-block-start: 6px; }
.st-intro-body .k{ display: grid; gap: 2px; align-content: start; margin: 0; }
.st-intro-body .k b{ font-size: 1.6rem; line-height: 1.2; font-weight: 760; color: var(--gold-paper); }
.st-intro-body .k span{ font-size: .86rem; line-height: 1.5; color: var(--on-paper-3); }
.st-intro-body li > p:last-child{ margin: 0; line-height: 2; max-inline-size: 62ch; color: var(--on-paper-2); }
.st-intro-body .st-lead{ font-size: 1.2rem; color: var(--on-paper) !important; }
:lang(en) .st-intro-body li > p:last-child, :lang(zh-CN) .st-intro-body li > p:last-child{ line-height: 1.75; }
:lang(en) .st-intro-body .k b, :lang(zh-CN) .st-intro-body .k b{ font-size: 1.15rem; }
@media (max-width: 1080px){
  .st-intro{ grid-template-columns: 1fr; gap: var(--s6); }
  .st-intro-sub{ max-inline-size: 46ch; }
  .st-intro-body{ padding-block-start: 0; }
}
@media (max-width: 560px){
  .st-intro-body li{ grid-template-columns: 1fr; gap: 8px; padding-block: 20px; }
  .st-intro-body .k{ grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; }
  .st-intro-body .k b{ font-size: 1.25rem; }
  .st-intro-body{ font-size: 1.04rem; }
  .st-intro-body .st-lead{ font-size: 1.1rem; }
}

/* ---------- Final master: hero brand cards, stable captions ----------
   The caption keeps the width it has in the resting state, so hover/focus never re-wraps its text
   while the cards expand. The other cards, which get narrower, fade their captions (opacity only,
   no layout work). The second card is shifted 36px down, so its caption is lifted by the same amount
   to stay inside the visible area. */
.tri{ container-type: inline-size; --tg: 10px; --ti: 18px; --tof: 36px; }
.tri-cap{ inline-size: max(0px, calc((100cqi - (var(--n, 4) - 1) * var(--tg)) / var(--n, 4) - 2 * var(--ti))); inset-inline-end: auto; transition: opacity 320ms var(--ease); }
.tri-p:nth-child(2) .tri-cap{ inset-block-end: calc(var(--ti) + var(--tof)); }
@media (hover: hover) { .tri:hover .tri-p:not(:hover) .tri-cap{ opacity: 0; } }
.tri:has(.tri-p:focus-visible) .tri-p:not(:focus-visible) .tri-cap{ opacity: 0; }
@media (max-width: 760px) { .tri{ --tg: 6px; --ti: 10px; --tof: 20px; } }
@media (prefers-reduced-motion: reduce) { .tri-cap{ transition: none; } }

/* ---------- Final master: first-screen reveal without a fade (mobile LCP) ----------
   Text and blocks in the first section of each page are painted in the first frame and only slide a short distance
   into place; they no longer start invisible. The browser's largest-contentful-paint measurement ignored them while
   they were at opacity 0, so on a phone the first screen counted as shown only 1.4–2.0 s later. Below the first
   section the approved fade-and-rise reveal is unchanged. */
.js main > section:first-child [data-r]{ opacity: 1; transform: translateY(10px); transition: transform 800ms var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js main > section:first-child [data-r].in{ transform: none; }
@media (prefers-reduced-motion: reduce) { .js main > section:first-child [data-r]{ transform: none; transition: none; } }