/* ==========================================================================
   AMIMA — "AURA"
   Every product owns the space around it. The site is a sequence of dark
   fields lit by a single object's own colour, cut by hard swings in
   typographic scale. The resolution ceiling becomes the concept: a small
   object with an enormous light field reads monumental without upscaling.
   ========================================================================== */

:root{
  /* fields */
  --void:#060D0A;
  --field:#0A1310;
  --field-2:#0E1B16;
  --green:#123E2F;
  --green-lit:#1B6B50;
  --paper:#F2EEE6;
  --paper-2:#E7E1D5;
  --bone:#FBF9F5;

  /* marks */
  --gold:#C9A96A;
  --gold-soft:rgba(201,169,106,.30);
  --gold-hair:rgba(201,169,106,.16);
  --ink:#0B1410;
  --ink-2:#46554C;
  --on-dark:#EFF3F0;
  --on-dark-2:#93A79C;

  --accent:var(--green-lit);

  --sans:"Archivo","Almarai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ar:"Almarai","Archivo",sans-serif;
  --mono:"IBM Plex Mono","Almarai",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* a scale with genuine range - whisper to monument */
  --t-micro:11.5px;
  --t-mono:clamp(11px,.72rem + .1vw,13px);
  --t-body:clamp(15.5px,.94rem + .2vw,17.5px);
  --t-lede:clamp(18px,1.02rem + .55vw,26px);
  --t-3:clamp(21px,1.1rem + 1.1vw,34px);
  --t-2:clamp(32px,1.3rem + 4.2vw,74px);
  --t-1:clamp(44px,1.2rem + 8.4vw,132px);
  --t-mega:clamp(64px,.5rem + 15vw,250px);

  --gut:clamp(1.15rem,4.2vw,4rem);
  --maxw:1560px;
  --ease:cubic-bezier(.22,.72,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--void);color:var(--on-dark);overflow-x:clip;
  font-family:var(--sans);font-size:var(--t-body);line-height:1.62;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:.94;letter-spacing:-.03em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}

.sr-only,.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;top:-70px;inset-inline-start:1rem;z-index:300;background:var(--gold);
  color:#151009;padding:.85rem 1.3rem;font-weight:700;transition:top .2s var(--ease)}
.skip:focus{top:.7rem}

/* ---------- Arabic is its own composition, not a mirror ---------- */
.lang-ar{--sans:var(--ar)}
.lang-ar body{line-height:1.9}
.lang-ar h1,.lang-ar h2,.lang-ar h3{letter-spacing:0;line-height:1.24;font-weight:800}
.lang-ar{--t-1:clamp(38px,1rem + 7.4vw,112px);--t-2:clamp(28px,1.1rem + 3.7vw,64px);
         --t-mega:clamp(54px,.4rem + 12.5vw,200px);--t-lede:clamp(17px,1rem + .5vw,24px)}
/* tracking destroys Arabic letter joining */
/* Arabic joining is broken by letter tracking and by Latin-first families.
   This used to be a hand-maintained list of ~30 class exceptions, which meant
   every new class silently reintroduced the bug - and it did. Guard
   structurally instead: anything that is not an explicitly marked LTR run gets
   zero tracking and the Arabic family, and LTR runs keep the mono voice. */
.lang-ar *:not([dir="ltr"]):not(.ltr):not(.ltr *){letter-spacing:0;text-transform:none;
  font-family:var(--ar)}
.lang-ar [dir="ltr"],.lang-ar .ltr,.lang-ar [dir="ltr"] *{font-family:var(--mono);letter-spacing:.04em}

/* ---------- primitives ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.act{position:relative;isolation:isolate}
.on-void{background:var(--void);color:var(--on-dark)}
.on-field{background:var(--field);color:var(--on-dark)}
.on-green{background:var(--green);color:var(--on-dark)}
.on-paper{background:var(--paper);color:var(--ink)}
.on-paper-2{background:var(--paper-2);color:var(--ink)}

.mono{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em}
.ltr{direction:ltr;unicode-bidi:isolate;font-family:var(--mono);white-space:nowrap;letter-spacing:.04em}
.kicker{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);display:block}
.on-paper .kicker,.on-paper-2 .kicker{color:#8A6F42}
.lede{font-size:var(--t-lede);line-height:1.45;color:var(--on-dark-2);max-width:34ch}
.on-paper .lede,.on-paper-2 .lede{color:var(--ink-2)}
.tight{letter-spacing:-.045em}
.wide{font-variation-settings:"wdth" 112}
.narrow{font-variation-settings:"wdth" 84}

/* ---------- the aura: a product's own light field ---------- */
.aura{position:relative;display:grid;place-items:center;isolation:isolate}
.aura::before{
  content:"";position:absolute;z-index:0;inset:-40%;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--accent) 78%,transparent) 0%,
    color-mix(in srgb,var(--accent) 30%,transparent) 38%,
    transparent 72%);
  filter:blur(6px);opacity:.72;
}
.on-paper .aura::before,.on-paper-2 .aura::before{opacity:.42;inset:-30%}
.aura img{position:relative;z-index:1;width:auto;
  max-height:var(--cap,420px);
  filter:drop-shadow(0 40px 46px rgba(0,0,0,.52)) drop-shadow(0 6px 10px rgba(0,0,0,.34))}
.on-paper .aura img,.on-paper-2 .aura img{
  filter:drop-shadow(0 26px 30px rgba(11,20,16,.24)) drop-shadow(0 3px 5px rgba(11,20,16,.16))}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.75rem;padding:1.05rem 1.9rem;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:999px;transition:.28s var(--ease)}
.lang-ar .btn{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:var(--t-body);font-weight:700}
.btn-solid{background:var(--gold);border-color:var(--gold);color:#171106}
.btn-solid:hover{background:#dcc08a;border-color:#dcc08a;transform:translateY(-2px)}
.btn-ghost:hover{background:currentColor}
.btn-ghost:hover span{color:var(--void)}
.arw{transition:transform .3s var(--ease)}
.is-rtl .arw{transform:scaleX(-1)}
.btn:hover .arw{transform:translateX(5px)}
.is-rtl .btn:hover .arw{transform:scaleX(-1) translateX(5px)}

/* ==========================================================================
   HEADER — deliberate, not decorative
   ========================================================================== */
.head{position:fixed;inset-inline:0;top:0;z-index:200;transition:background .4s var(--ease),border-color .4s}
.head::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:transparent;transition:.4s}
.head[data-stuck="true"]{background:color-mix(in srgb,var(--void) 92%,transparent);backdrop-filter:blur(16px) saturate(1.3)}
.head[data-stuck="true"] .head-in{height:clamp(62px,5.4vw,78px)}
.head[data-stuck="true"]::after{background:var(--gold-hair)}
.head-in{display:flex;align-items:center;gap:clamp(1rem,3vw,3rem);height:clamp(76px,7.6vw,116px)}
.brand{flex:0 0 auto;display:flex;align-items:center}
.brand img{height:clamp(28px,2.8vw,46px);width:auto;transition:height .4s var(--ease)}
.head[data-stuck="true"] .brand img{height:clamp(25px,2.2vw,36px)}
.nav{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.6rem);margin-inline-start:auto}
.nav a,.nav button{font-size:var(--t-mono);font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark);opacity:.72;padding-block:.5rem;transition:opacity .2s,color .2s;position:relative}
.nav a:hover,.nav button:hover{opacity:1}
.lang-ar .nav a,.lang-ar .nav button{font-family:var(--ar);letter-spacing:0;text-transform:none;
  font-size:var(--t-body);font-weight:700}
.nav a::after,.nav button::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:var(--o,left);transition:transform .3s var(--ease)}
.is-rtl .nav a::after,.is-rtl .nav button::after{--o:right}
.nav a:hover,.nav button:hover{color:var(--on-dark)}
.nav a:hover::after,.nav button:hover::after{transform:scaleX(1)}
/* the trigger says it has a submenu, and says whether it is open */
.nav-has-sub{display:inline-flex;align-items:center;gap:.5em}
/* A chevron points DOWN in both directions, so its two borders are physical.
   With logical borders the inline-end edge flips under RTL and the arrow ends
   up pointing sideways. */
.nav-caret{width:.46em;height:.46em;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-.16em) rotate(45deg);
  transition:transform .3s var(--ease);flex:0 0 auto}
[aria-expanded="true"] .nav-caret{transform:translateY(.06em) rotate(-135deg)}

/* You are here. Deliberately not a bright bar pasted on the header: the item
   simply stops being dim and its own hover rule is held at rest in gold-soft,
   so the active marker and the hover marker are the same object. */
.nav a.is-active,.nav button.is-active{opacity:1;color:var(--gold)}
.nav a.is-active::after,.nav button.is-active::after{transform:scaleX(1);
  background:var(--gold-soft);opacity:.7}
.nav a.is-active:hover::after,.nav button.is-active:hover::after{background:var(--gold);opacity:1}
/* the hover underline must not overlap the caret */
.nav-has-sub::after{inset-inline-end:1.1em}

/* the sheet marks the section the same way, at sheet scale */
.sheet nav a.is-active{color:var(--gold)}
.sheet nav a.is-active::before{content:"";display:inline-block;width:.42em;height:.42em;
  border-radius:50%;background:var(--gold);margin-inline-end:.5em;vertical-align:.18em}

.nav-side{display:flex;align-items:center;gap:1.1rem}
.lang-switch{display:flex;gap:.1rem;font-family:var(--mono);font-size:var(--t-mono);align-items:center}
.lang-switch a{color:var(--on-dark-2);padding:.25rem .4rem;transition:color .2s}
.lang-switch a.on{color:var(--gold)}
.lang-switch span{color:var(--gold-soft)}
.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:22px;height:1.5px;background:currentColor;transition:.3s var(--ease)}

/* mega */
.mega{position:fixed;inset-inline:0;top:0;z-index:190;background:var(--void);
  padding-top:clamp(72px,7vw,104px);opacity:0;visibility:hidden;transform:translateY(-8px);
  /* visibility is delayed on the way OUT so the fade is seen, but flips
     immediately on the way IN - a hidden element cannot take focus, and
     ArrowDown has to be able to move into the panel on the same tick */
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s}
.mega[data-open="true"]{opacity:1;visibility:visible;transform:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s}
.mega-in{display:grid;grid-template-columns:1.6fr .8fr;gap:clamp(2rem,5vw,6rem);
  padding-block:clamp(2rem,4vw,3.4rem) clamp(2.5rem,5vw,4rem);border-top:1px solid var(--gold-hair)}
.mega-solo{grid-template-columns:1fr}
.mega-list{columns:2;column-gap:clamp(1.5rem,3vw,3rem)}
.mega-list a{display:flex;gap:1rem;align-items:baseline;padding:.62rem 0;color:var(--on-dark-2);
  border-bottom:1px solid rgba(201,169,106,.10);break-inside:avoid;transition:color .2s,padding .25s var(--ease)}
.mega-list a:hover{color:var(--on-dark);padding-inline-start:.5rem}
.mega-list .n{font-family:var(--mono);font-size:11px;color:var(--gold);opacity:.7;min-width:1.7rem}
.mega-list .c{margin-inline-start:auto;font-family:var(--mono);font-size:11px;opacity:.45}

/* mobile sheet */
.sheet{position:fixed;inset:0;z-index:210;visibility:hidden}
.sheet[data-open="true"]{visibility:visible}
.sheet-bg{position:absolute;inset:0;background:rgba(4,9,7,.72);opacity:0;transition:opacity .4s var(--ease)}
.sheet[data-open="true"] .sheet-bg{opacity:1}
.sheet-panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(94vw,440px);background:var(--field);
  display:flex;flex-direction:column;padding:1.3rem var(--gut) 2.2rem;overflow-y:auto;
  transform:translateX(102%);transition:transform .45s var(--ease)}
.is-rtl .sheet-panel{transform:translateX(-102%)}
.sheet[data-open="true"] .sheet-panel{transform:none}
.sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.sheet nav a{display:block;font-size:clamp(28px,8vw,40px);font-weight:700;letter-spacing:-.03em;
  padding:.45rem 0;border-bottom:1px solid rgba(201,169,106,.12)}
.lang-ar .sheet nav a{letter-spacing:0;font-weight:800}
.sheet-cats{margin-top:1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1rem}
.sheet-cats a{display:flex;gap:.6rem;padding:.5rem 0;color:var(--on-dark-2);font-size:14.5px}
.sheet-cats .n{font-family:var(--mono);font-size:10.5px;color:var(--gold)}
.sheet-foot{margin-top:auto;padding-top:2rem;display:grid;gap:.9rem}

/* ==========================================================================
   ACT 1 — HERO: the object breaks the line
   The headline is a three-line shape with a deliberate notch, and the object
   stands in it - overlapping two grid columns of the type block rather than
   sitting in a column of its own. The whole frame is lit FROM the object's
   position, so the light is a consequence of the product, not a backdrop.
   ========================================================================== */
.hero{min-height:100svh;display:grid;align-content:center;position:relative;overflow:hidden;
  background:var(--void);padding-block:clamp(7rem,12vw,10rem) clamp(4.5rem,8vw,7rem)}
.hero-light{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 54% at 54% 56%,color-mix(in srgb,var(--accent) 46%,transparent),transparent 60%),
    radial-gradient(90% 40% at 46% 82%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 74%)}
.is-rtl .hero-light{
  background:
    radial-gradient(58% 54% at 46% 56%,color-mix(in srgb,var(--accent) 46%,transparent),transparent 60%),
    radial-gradient(90% 40% at 54% 82%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 74%)}

.hero-stage{position:relative;z-index:1}
.hero-kick{display:block}
/* The type and the object share one positioning context, so the object can be
   placed against the LAST LINE of the sentence rather than in a column of its
   own. The sentence ends and the product is what it ends on. */
.hero-block{position:relative;margin-top:clamp(.8rem,1.5vw,1.3rem)}
.hero-h{position:relative;z-index:2;pointer-events:none;
  font-weight:800;line-height:.88;letter-spacing:-.05em;
  text-shadow:0 6px 70px rgba(6,13,10,.85)}
.lang-ar .hero-h{letter-spacing:0;line-height:1.16}
.hero-h span{display:block}
.hl-1{font-size:calc(var(--t-1) * .68);font-weight:300;font-variation-settings:"wdth" 92;opacity:.9;
  letter-spacing:-.03em}
.lang-ar .hl-1{font-weight:300;letter-spacing:0}
.hl-2{font-size:var(--t-1)}
.hl-3{font-size:var(--t-1)}
/* the object stands on the closing line's baseline and cuts across the line
   above it - the overlap is the composition, not an accident of layout */
.hero-obj{position:absolute;z-index:3;inset-inline-start:47.5%;bottom:-14%;
  --cap:clamp(200px,26vw,400px);pointer-events:none}
.is-rtl .hero-obj{inset-inline-start:auto;inset-inline-end:24%;bottom:-8%}
.hero-obj img{position:relative;z-index:2;display:block;width:auto;max-height:var(--cap);max-width:100%;
  object-fit:contain;filter:drop-shadow(0 34px 44px rgba(0,0,0,.6))}
/* contact shadow: the object is standing on something */
.hero-obj::after{content:"";position:absolute;z-index:1;inset-inline:-14%;bottom:-6%;
  height:clamp(26px,4vw,58px);
  background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent 74%);filter:blur(7px)}

.hero-say{position:relative;z-index:2;margin-top:clamp(1.6rem,3vw,2.6rem)}
.hero-say .lede{max-width:36ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.5rem,2.6vw,2.2rem)}
.hero-foot{position:absolute;inset-inline:0;bottom:clamp(1.4rem,3vw,2.4rem);z-index:2;
  display:flex;justify-content:space-between;align-items:end;gap:1rem;color:var(--on-dark-2)}
.hero-foot .rule{flex:1;height:1px;margin-bottom:.55rem;
  background:linear-gradient(90deg,var(--gold-hair),color-mix(in srgb,var(--accent) 70%,transparent))}
@media (max-width:960px){
  .hero{min-height:auto;padding-block:clamp(6rem,20vw,8rem) clamp(2.5rem,8vw,4rem)}
  /* On a phone the interruption cannot survive: the idea becomes sequence -
     the type opens, the object lands under it at full width, the voice closes. */
  .hero-obj{position:static;--cap:clamp(190px,48vw,300px);display:grid;justify-items:center;
    margin-block:clamp(1.6rem,6vw,2.6rem) clamp(1rem,3vw,1.6rem)}
  .is-rtl .hero-obj{inset-inline-end:auto}
  .hero-obj::after{inset-inline:14%;bottom:-2%}
  .hero-say{max-width:none}
  .hero-foot{position:static;margin-top:2.4rem}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
}

/* ==========================================================================
   ACT 2 — HELLO: nine scripts orbit one mark
   Two visible rings, one word per language, each on a real radius. Distance
   from the centre encodes brightness and scale, so the composition reads as
   depth converging on AMIMA rather than as words scattered on a field.
   ========================================================================== */
.chorus{position:relative;min-height:clamp(580px,94svh,960px);display:grid;place-items:center;
  background:var(--green);overflow:hidden;--reach:min(43vw,520px)}
.chorus::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%,transparent 10%,rgba(6,13,10,.62) 74%)}
/* both rings and words share one centre, nudged up to sit on the word rather
   than on the whole text block */
.chorus-rings,.chorus-orbit{position:absolute;inset:0;z-index:0;--cx:50%;--cy:44%}
.chorus-rings i{position:absolute;left:var(--cx);top:var(--cy);transform:translate(-50%,-50%);
  border:1px solid var(--gold);border-radius:50%}
.chorus-rings .r1{opacity:.15}
.chorus-rings .r2{opacity:.09}
.chorus-orbit{z-index:1}
.chorus-orbit span{position:absolute;left:calc(var(--cx) + var(--x));top:calc(var(--cy) + var(--y));
  transform:translate(-50%,-50%);white-space:nowrap;
  font-weight:700;letter-spacing:-.03em;color:var(--on-dark);
  opacity:calc(.30 - (var(--ring) - 1) * .13);
  transition:opacity .9s var(--ease),color .9s var(--ease)}
.lang-ar .chorus-orbit span{letter-spacing:0}
.chorus-orbit span.dim{opacity:.03}
.chorus-core{position:relative;z-index:3;text-align:center;padding-inline:var(--gut);
  display:grid;justify-items:center}
.chorus-mark{display:block;font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.52em;
  color:var(--gold);opacity:.85;margin-inline-start:.52em;margin-bottom:clamp(.8rem,1.6vw,1.4rem)}
.lang-ar .chorus-mark{font-family:var(--mono);letter-spacing:.52em}
.chorus-word{font-size:var(--t-mega);font-weight:800;letter-spacing:-.05em;line-height:.94;
  min-height:1em;color:var(--paper);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.lang-ar .chorus-word{letter-spacing:0;line-height:1.2}
.chorus-word.swap{opacity:0;transform:translateY(14%)}
.chorus-lang{margin-top:.9rem;color:var(--gold);min-height:1.5em}
.chorus-line{margin-top:clamp(1.4rem,2.6vw,2.2rem);font-size:var(--t-3);font-weight:300;
  font-variation-settings:"wdth" 94;color:var(--on-dark);opacity:.85}
.lang-ar .chorus-line{font-weight:400}
@media (max-width:820px){
  .chorus{--reach:min(52vw,340px);min-height:clamp(520px,90svh,760px)}
  /* the far ring would collide with the word at this width, so it recedes */
  .chorus-orbit span{font-size:.62em}
  .chorus-rings .r2{opacity:.06}
}
@media (prefers-reduced-motion:reduce){.chorus-word,.chorus-orbit span{transition:none}}

/* ==========================================================================
   ACT 3 — THE UNIVERSE: categories cluster around anchor objects
   No cells, no borders, no index numerals. Three categories become lit
   anchors at product scale, four are featured at half that, and the rest
   form a typographic cluster - one field with three levels of gravity.
   ========================================================================== */
.universe{position:relative;background:var(--field);overflow:hidden;
  padding-block:clamp(3.5rem,7vw,6rem) clamp(4rem,8vw,7rem)}
.uni-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem;
  margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.uni-head h2{font-size:var(--t-2);max-width:16ch;margin-top:1rem}

.uni-anchors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,3.2rem);align-items:end}
.uni-a{position:relative;display:grid;justify-items:center;text-align:center;isolation:isolate;
  padding-block:clamp(1.2rem,3vw,3rem) 0}
/* each anchor is a pool of its own product's light, and the pools bleed past
   each other - that is what stops the row reading as three boxes */
.uni-a::before{content:"";position:absolute;z-index:0;inset-inline-start:50%;top:-6%;
  width:150%;aspect-ratio:1;transform:translateX(-50%);opacity:.62;
  transition:opacity .5s var(--ease);
  background:radial-gradient(circle at 50% 48%,
    color-mix(in srgb,var(--accent) 62%,var(--green-lit)) 0%,
    color-mix(in srgb,var(--accent) 40%,transparent) 34%,transparent 64%)}
.uni-a:hover::before,.uni-a:focus-visible::before{opacity:.86}
.uni-obj{position:relative;z-index:1;display:block}
.uni-obj img{display:block;width:auto;max-height:var(--cap);max-width:100%;object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55));transition:transform .5s var(--ease)}
.uni-a:hover .uni-obj img{transform:translateY(-8px)}
/* a staggered baseline, not a row of three equal things */
.uni-a.a1{--cap:clamp(140px,18.5vw,300px)}
.uni-a.a2{--cap:clamp(108px,14vw,232px);padding-bottom:clamp(1.4rem,3.4vw,3.4rem)}
.uni-a.a3{--cap:clamp(124px,16.5vw,266px);padding-bottom:clamp(.5rem,1.4vw,1.4rem)}
.uni-nm{position:relative;z-index:2;font-size:clamp(19px,2.2vw,36px);font-weight:800;
  letter-spacing:-.035em;margin-top:clamp(.8rem,1.6vw,1.4rem);line-height:1.05}
.lang-ar .uni-nm{letter-spacing:0}
.uni-ct{position:relative;z-index:2;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.14em;color:var(--gold);opacity:.8;margin-top:.4rem}
.lang-ar .uni-ct{font-family:var(--mono)}

.uni-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,2.6rem);
  margin-top:clamp(1.6rem,3vw,2.6rem);align-items:end}
.uni-f{display:grid;justify-items:center;text-align:center}
.uni-f{--cap:clamp(62px,7.4vw,124px)}
.uni-f .uni-nm{font-size:clamp(15px,1.35vw,22px);font-weight:700;margin-top:.9rem}
.uni-f .uni-ct{font-size:10.5px}

.uni-rest{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 clamp(1rem,2.4vw,2.6rem);
  margin-top:clamp(2.6rem,5vw,4.5rem);padding-top:clamp(1.6rem,3vw,2.6rem);
  border-top:1px solid var(--gold-hair)}
.uni-rest a{display:inline-block;font-size:clamp(17px,1.9vw,30px);font-weight:700;letter-spacing:-.025em;
  color:var(--on-dark);opacity:.42;padding-block:.35rem;transition:opacity .3s,color .3s}
.lang-ar .uni-rest a{letter-spacing:0;font-weight:800}
.uni-rest a:hover{opacity:1;color:var(--gold)}
.uni-rest sup{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--gold);
  vertical-align:super;margin-inline-start:.25em;opacity:.75}
@media (max-width:1000px){
  .uni-feats{grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,4vw,2.6rem)}
}
@media (max-width:680px){
  /* the anchors keep their hierarchy on a phone by stacking at three scales
     rather than shrinking to three equal thumbnails */
  .uni-anchors{grid-template-columns:1fr;gap:clamp(1.6rem,6vw,2.6rem);justify-items:center}
  .uni-a.a1{--cap:clamp(170px,46vw,260px)}
  .uni-a.a2{--cap:clamp(112px,30vw,170px);padding-bottom:0}
  .uni-a.a3{--cap:clamp(132px,36vw,200px);padding-bottom:0}
  .uni-a::before{width:160%}
  .uni-f{--cap:clamp(56px,17vw,90px)}
}

/* ==========================================================================
   ACT 4 — EVERYDAY: five things people do, with the objects in the words
   The one act that names uses rather than products. It is deliberately the
   first light field on the page: after two dark acts the page opens, the
   type becomes editorial, and each verb is answered by one small object
   standing in its own light. These are NOT categories - the fifteen client
   categories are untouched - so nothing here is set as a label or a chip.
   ========================================================================== */
.everyday{background:var(--bone);color:var(--ink);overflow:hidden;
  padding-block:clamp(3.5rem,7vw,6.5rem) clamp(4rem,8vw,7rem)}
/* the head sits as one block on the far side, over the empty half of the
   first row - split across the width it left a dead corner rather than a
   composition */
.ev-head{display:grid;justify-items:end;text-align:end;gap:.8rem;
  margin-bottom:clamp(1.6rem,3.4vw,3rem)}
.ev-head h2{font-size:var(--t-2);max-width:15ch;color:var(--ink)}
.ev-head .kicker{color:#8A6F42}

.ev-list{display:grid;border-block-start:1px solid rgba(11,20,16,.13)}
.ev-row{position:relative;display:flex;align-items:center;gap:clamp(1rem,4vw,4rem);
  padding-block:clamp(.5rem,1.4vw,1.1rem);border-block-end:1px solid rgba(11,20,16,.13);
  color:var(--ink);transition:background .4s var(--ease)}
/* alternation is the composition: the verb changes side down the column, so
   the eye zig-zags instead of scanning a list */
.ev-row.r1{flex-direction:row-reverse}
.ev-word{font-size:clamp(30px,7.2vw,104px);font-weight:800;line-height:1;letter-spacing:-.05em;
  font-variation-settings:"wdth" 92;transition:transform .5s var(--ease)}
.lang-ar .ev-word{letter-spacing:0;line-height:1.3;font-variation-settings:normal}
.ev-obj{position:relative;flex:0 0 auto;display:grid;place-items:center;isolation:isolate;
  width:clamp(104px,13.5vw,220px);height:clamp(78px,9.4vw,152px)}
/* the object's light is allowed to spill across the word - the light reads
   through the type, the object never covers a letter */
.ev-obj::before{content:"";position:absolute;z-index:0;inset:-46% -30%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 46%,transparent),transparent 72%);
  opacity:.34;transition:opacity .5s var(--ease)}
.ev-obj img{position:relative;z-index:1;width:auto;max-height:clamp(58px,7.6vw,126px);
  filter:drop-shadow(0 18px 22px rgba(11,20,16,.22)) drop-shadow(0 3px 5px rgba(11,20,16,.14))}
.ev-row:hover{background:rgba(11,20,16,.028)}
.ev-row:hover .ev-obj::before{opacity:.62}
.ev-row:hover .ev-word{transform:translateX(.14em)}
.ev-row.r1:hover .ev-word{transform:translateX(-.14em)}
.is-rtl .ev-row:hover .ev-word{transform:translateX(-.14em)}
.is-rtl .ev-row.r1:hover .ev-word{transform:translateX(.14em)}
@media (max-width:820px){
  /* at 390 the zig-zag survives but the travel does not: the word holds the
     row and the object drops to a punctuation mark at the far edge */
  .ev-head{justify-items:start;text-align:start}
  .ev-row{gap:1rem;padding-block:.55rem}
  .ev-word{font-size:clamp(28px,10.4vw,50px)}
  .ev-obj{width:clamp(86px,25vw,120px);height:clamp(60px,17vw,84px)}
  .ev-obj img{max-height:clamp(46px,15vw,78px)}
  .ev-obj::before{inset:-40% -26%;opacity:.42}
}
@media (prefers-reduced-motion:reduce){.ev-word,.ev-obj::before{transition:none}}

/* ==========================================================================
   ACT 5 — MONUMENT: the product lives inside the type
   ========================================================================== */
.monument{position:relative;padding-block:clamp(4rem,9vw,9rem);overflow:hidden;background:var(--void)}
.monument::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 52%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 68%)}
.monument-type{position:relative;z-index:1;font-size:var(--t-mega);font-weight:800;line-height:.82;
  letter-spacing:-.055em;text-align:center;color:var(--on-dark);pointer-events:none;
  font-variation-settings:"wdth" 88}
.lang-ar .monument-type{letter-spacing:0;line-height:1.5;font-variation-settings:normal;
  font-size:clamp(44px,.4rem + 9vw,150px)}
/* the specification set as a monument in its own right, behind the object */
.monument-fig{position:absolute;z-index:0;inset-inline-end:0;top:clamp(-2rem,-2vw,0rem);
  font-family:var(--mono);font-size:clamp(70px,15vw,240px);line-height:.8;font-weight:400;
  color:var(--gold);opacity:.10;pointer-events:none;letter-spacing:-.04em}
.lang-ar .monument-fig{inset-inline-end:auto;inset-inline-start:0}
/* Arabic sits taller and denser, so the object moves out of the words
   instead of sitting inside them. */
.lang-ar .monument-aura{position:relative;top:auto;transform:none;margin-top:clamp(1rem,2vw,2rem);
  --cap:clamp(180px,24vw,360px)}
.lang-ar .monument{padding-block:clamp(3.5rem,7vw,7rem)}
.monument-aura{position:absolute;z-index:2;inset-inline:0;top:50%;transform:translateY(-50%);
  --cap:clamp(200px,26vw,400px)}
.monument-foot{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:clamp(.6rem,1.6vw,1.4rem);margin-top:clamp(1.6rem,3vw,2.6rem)}
.monument .lede{position:relative;z-index:3;margin-inline:auto;text-align:center;max-width:44ch}
.chip{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.06em;padding:.5rem .95rem;
  border:1px solid var(--gold-soft);border-radius:999px;color:var(--on-dark-2)}
.on-paper .chip,.on-paper-2 .chip{border-color:rgba(11,20,16,.18);color:var(--ink-2)}

/* ==========================================================================
   ACT 6 — ARRAY: five finishes on paper (the benchmark act, preserved)
   ========================================================================== */
.array{background:var(--paper-2);color:var(--ink);padding-block:clamp(4rem,8vw,8rem);overflow:hidden}
.array-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;
  margin-bottom:clamp(2rem,4vw,3.4rem)}
.array-head h2{font-size:var(--t-2);max-width:13ch;color:var(--ink)}
.array-rail{display:flex;align-items:flex-end;justify-content:center;gap:clamp(.4rem,2vw,2.6rem);
  flex-wrap:nowrap}
.array-item{flex:0 0 auto;display:grid;justify-items:center;gap:.7rem}
.array-item .aura{--cap:clamp(96px,13vw,230px)}
.array-item:nth-child(2n){--cap-shift:1}
.array-item .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-2);opacity:.75}
/* deliberate scale rhythm rather than a flat row */
.array-item:nth-child(1) .aura{--cap:clamp(74px,10vw,170px)}
.array-item:nth-child(2) .aura{--cap:clamp(102px,14vw,246px)}
.array-item:nth-child(3) .aura{--cap:clamp(122px,17vw,300px)}
.array-item:nth-child(4) .aura{--cap:clamp(102px,14vw,246px)}
.array-item:nth-child(5) .aura{--cap:clamp(74px,10vw,170px)}
@media (max-width:820px){
  .array-head{grid-template-columns:1fr}
  .array-rail{gap:.2rem}
  .array-item .lbl{display:none}
  .array-item:nth-child(1),.array-item:nth-child(5){display:none}
}

/* ==========================================================================
   ACT 7 — FAMILY: the group portrait
   Every other act on this page argues with scale. This one argues with
   belonging: five products at near-equal weight, standing in TWO ROWS OF
   DEPTH on ONE SHARED BASELINE, overlapping at the shoulders, lit by a
   single key light that belongs to the group rather than to any one object.
   Nothing here is bigger than anything else by more than a fifth.
   ========================================================================== */
.family{position:relative;background:var(--void);overflow:hidden;
  padding-block:clamp(3.5rem,7vw,6.5rem)}
/* one key light for the whole group - the studio lamp of a family portrait,
   not five separate product auras */
.family::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 62% at 24% 16%,color-mix(in srgb,var(--gold) 22%,transparent),transparent 66%),
    radial-gradient(72% 36% at 50% 86%,color-mix(in srgb,var(--accent) 22%,var(--green-lit)) 0%,transparent 74%)}
.is-rtl .family::before{
  background:
    radial-gradient(58% 62% at 76% 16%,color-mix(in srgb,var(--gold) 22%,transparent),transparent 66%),
    radial-gradient(72% 36% at 50% 86%,color-mix(in srgb,var(--accent) 22%,var(--green-lit)) 0%,transparent 74%)}
.fam-in{position:relative;z-index:1}
.fam-head h2{font-size:var(--t-2);max-width:12ch;margin-top:1rem}
.fam-note{color:var(--gold);opacity:.8;margin-top:1rem}

.fam-group{position:relative;height:clamp(380px,41vw,540px);
  margin-top:clamp(1.6rem,3vw,2.4rem);--base:34%;--rise:clamp(44px,5.2vw,74px);--band:5.4rem}
/* the shared baseline every object in the front row stands on */
.fam-line{position:absolute;inset-inline:-2%;bottom:var(--base);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft) 12%,var(--gold-soft) 88%,transparent);
  opacity:.55}
/* one merged shadow for the whole group, not one per product */
.fam-shadow{position:absolute;inset-inline:14%;bottom:calc(var(--base) - 3%);height:clamp(40px,6vw,86px);
  background:radial-gradient(closest-side,rgba(0,0,0,.66),transparent 76%);filter:blur(9px)}

.fam-o{position:absolute;inset-inline-start:var(--x);transform:translateX(-50%);
  display:block;transition:transform .4s var(--ease)}
.is-rtl .fam-o{transform:translateX(50%)}
.fam-o img{display:block;width:auto;max-height:var(--cap);max-width:100%;object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.55))}
/* row 1 stands on the line; row 2 stands behind and slightly above it, which
   is what reads as depth rather than as a second, smaller tier */
.fam-o.r1{bottom:var(--base);z-index:3;--cap:clamp(140px,17.5vw,280px)}
.fam-o.r2{bottom:calc(var(--base) + var(--rise));z-index:2;--cap:clamp(116px,14.5vw,232px);opacity:.9}
.fam-o.r2 img{filter:drop-shadow(0 14px 18px rgba(0,0,0,.5)) saturate(.92)}
.fam-o:hover{transform:translateX(-50%) translateY(-8px)}
.is-rtl .fam-o:hover{transform:translateX(50%) translateY(-8px)}
.fam-o:hover img{filter:drop-shadow(0 24px 30px rgba(0,0,0,.6))}

/* the near row labels below the baseline, the far row labels in the gap
   between the rows - so nothing collides and the depth stays legible */
.fam-o .lbl{position:absolute;inset-inline-start:50%;top:100%;transform:translateX(-50%);
  display:grid;gap:.18rem;text-align:center;width:clamp(120px,13vw,178px);overflow-wrap:anywhere}
.is-rtl .fam-o .lbl{transform:translateX(50%)}
.fam-o.r1 .lbl{margin-top:clamp(.9rem,1.6vw,1.3rem)}
/* the far row's object stands --rise above the line, so its plate first drops
   by that much to reach the baseline, then by one band to clear the near row's */
.fam-o.r2 .lbl{margin-top:calc(var(--rise) + clamp(.9rem,1.6vw,1.3rem) + var(--band))}
.fam-o .lbl .m{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;
  color:var(--gold);opacity:.85}
.lang-ar .fam-o .lbl .m{font-family:var(--mono)}
.fam-o .lbl .t{font-size:clamp(12.5px,1.05vw,16px);font-weight:700;letter-spacing:-.015em;
  color:var(--on-dark);line-height:1.28}
.fam-o.r2 .lbl .t{font-size:clamp(11.5px,.92vw,14px);color:var(--on-dark-2);font-weight:600}
.lang-ar .fam-o .lbl .t{letter-spacing:0;font-weight:800}
.fam-o:hover .lbl .t{color:var(--gold)}
.fam-exit{margin-top:clamp(2rem,3.4vw,3rem)}

@media (max-width:900px){
  /* Five objects at 390px would be five illegible objects. The mobile version
     of a group portrait is a tighter group: three products, closer together,
     still two rows of depth on the same baseline, all of them readable. */
  .fam-group{height:clamp(330px,84vw,420px);--base:32%;--rise:clamp(34px,9vw,52px);--band:3.6rem}
  .fam-o.n4,.fam-o.n5{display:none}
  .fam-o.r1{--cap:clamp(112px,32vw,160px)}
  .fam-o.r2{--cap:clamp(96px,27vw,134px)}
  .fam-o.n1{inset-inline-start:24%}
  .fam-o.n2{inset-inline-start:52%}
  .fam-o.n3{inset-inline-start:78%}
  .fam-o .lbl{width:clamp(104px,30vw,128px)}
  .fam-o .lbl .t{font-size:11.5px}
  .fam-shadow{inset-inline:12%}
}

/* ==========================================================================
   ACT 8 — MANIFESTO: the brand speaks, the objects punctuate
   The only act with no product as its subject. The statement is set as
   authored lines - where a line breaks is the composition, not a wrap - and
   two objects are pushed into the reserved column at the end of the field so
   they read as punctuation inside the sentence rather than illustration
   beside it. It is the page's quietest surface and its loudest voice.
   ========================================================================== */
.manifesto{position:relative;background:var(--green);overflow:hidden;
  padding-block:clamp(4.5rem,9vw,8.5rem)}
.manifesto::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 60% at 78% 40%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 66%)}
.is-rtl .manifesto::before{background:radial-gradient(70% 60% at 22% 40%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 66%)}
.mf-body{position:relative;z-index:1;margin:0;color:var(--paper);
  /* the column the objects live in - the type is not allowed into it */
  padding-inline-end:clamp(0rem,20vw,22rem);
  font-size:clamp(27px,5.4vw,80px);font-weight:800;line-height:1.08;letter-spacing:-.042em}
.lang-ar .mf-body{letter-spacing:0;line-height:1.5;font-size:clamp(24px,4.6vw,62px)}
.mf-line{display:block}
/* a staggered stanza: the voice steps in and comes back out */
.mf-line.l1{margin-inline-start:clamp(.8rem,5vw,6rem)}
.mf-line.l2{margin-inline-start:clamp(1.6rem,9vw,11rem)}
.mf-line.l3{margin-inline-start:clamp(.8rem,5vw,6rem)}
.mf-line.l0,.mf-line.l4{margin-inline-start:0}
.mf-line.l4{color:var(--gold)}
.mf-obj{position:absolute;z-index:2;display:block;pointer-events:none}
.mf-obj::before{content:"";position:absolute;z-index:0;inset:-80%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 72%,transparent),transparent 70%);
  opacity:.5;filter:blur(4px)}
.mf-obj img{position:relative;z-index:1;width:auto;max-height:clamp(74px,10.5vw,168px);
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.5))}
.mf-obj.o0{inset-inline-end:1%;top:-4%}
.mf-obj.o1{inset-inline-end:12%;bottom:-6%}
@media (max-width:900px){
  /* the reserved column disappears, so the objects stop being punctuation
     inside the sentence and become the ground it is printed on */
  .mf-body{padding-inline-end:0}
  .mf-line.l1,.mf-line.l3{margin-inline-start:clamp(.6rem,3vw,1.4rem)}
  .mf-line.l2{margin-inline-start:clamp(1.2rem,6vw,2.8rem)}
  .mf-body{font-size:clamp(31px,7.8vw,46px);line-height:1.1}
  .lang-ar .mf-body{font-size:clamp(29px,7.4vw,42px);line-height:1.45}
  .mf-obj{opacity:.5}
  .mf-obj img{max-height:clamp(66px,20vw,110px)}
  .mf-obj.o0{inset-inline-end:-6%;top:-9%}
  .mf-obj.o1{inset-inline-end:auto;inset-inline-start:-8%;bottom:-9%}
}

/* ==========================================================================
   ACT 9 — ORIGIN: Foshan cut into a light field
   Geography set as type. FOSHAN is cropped by the page edge, the place names
   descend in scale to CHINA as a ghost, and the coordinates run as a spine
   instead of a caption. This is also where the page breathes out of the dark.
   ========================================================================== */
.origin{position:relative;background:var(--paper);color:var(--ink);overflow:hidden;
  padding-block:clamp(4rem,8vw,7.5rem) clamp(5rem,9vw,9rem)}
.origin-in{position:relative;min-height:clamp(320px,38vw,540px)}
.origin-spine{position:absolute;inset-inline-start:0;top:0;z-index:2;
  transform-origin:0 0;transform:rotate(90deg) translateY(-115%);
  color:var(--ink-2);opacity:.5;letter-spacing:.34em;white-space:nowrap}
.is-rtl .origin-spine{transform-origin:100% 0;transform:rotate(-90deg) translateY(-115%)}
.origin-name{display:grid;position:relative;z-index:1}
.o-1{font-size:clamp(52px,13.2vw,208px);font-weight:800;line-height:.78;letter-spacing:-.062em;
  color:var(--ink);margin-inline-start:calc(var(--gut) * -1)}
.o-2{font-size:clamp(17px,2.5vw,40px);font-weight:400;letter-spacing:.06em;color:var(--ink-2);
  margin-top:clamp(.8rem,1.6vw,1.4rem)}
.o-3{font-size:clamp(21px,4.4vw,70px);font-weight:300;letter-spacing:.02em;color:var(--ink);
  text-align:end;opacity:.72;margin-top:clamp(.4rem,1vw,.8rem);font-variation-settings:"wdth" 92}
.o-4{font-size:clamp(40px,10.6vw,168px);font-weight:800;line-height:.84;letter-spacing:-.05em;
  text-align:end;color:var(--ink);opacity:.12;margin-top:clamp(-.6rem,-1vw,-.2rem)}
.origin-say{position:absolute;inset-block-end:0;inset-inline-start:var(--gut);z-index:3;width:min(34ch,38%)}
.origin-say .lede{color:var(--ink-2);margin-top:1rem}
.origin-say .kicker{color:#8A6F42}
.origin-media{margin-top:1.4rem;border:1px solid rgba(11,20,16,.14)}
.origin-media img,.origin-media video{display:block;width:100%;height:auto}
/* the line that leaves Foshan and re-enters at the top of the world act */
.origin-thread{position:absolute;inset-inline-start:68%;bottom:0;width:1px;
  height:clamp(48px,8vw,110px);background:linear-gradient(transparent,var(--gold));opacity:.85}
@media (max-width:900px){
  .origin-in{min-height:0}
  .origin-spine{position:static;transform:none;letter-spacing:.2em;display:block;margin-bottom:1.2rem;opacity:.6}
  .is-rtl .origin-spine{transform:none}
  .o-1{font-size:clamp(52px,18vw,110px);margin-inline-start:0;letter-spacing:-.05em}
  .o-4{font-size:clamp(44px,15vw,90px);opacity:.14}
  .origin-say{position:static;width:auto;margin-top:clamp(2rem,7vw,3rem)}
}

/* ==========================================================================
   ACT 10 — ROUTE: one line carries a product out of Foshan
   The gold thread that leaves the origin act enters here, turns through
   ninety degrees, becomes the ground a single object travels along, and
   leaves at the same position for the world act. Three stops, no boxes and
   no arrows - a flowchart would say the same thing worse. The names at the
   end are read from the real distributor records, never invented.
   ========================================================================== */
.route{position:relative;background:var(--void);overflow:hidden;
  padding-block:clamp(3rem,6vw,5rem) clamp(3rem,6vw,5rem)}
.route-in-thread{position:absolute;inset-inline-start:68%;top:0;width:1px;
  height:clamp(38px,6vw,84px);background:linear-gradient(var(--gold),transparent);opacity:.85}
.route-out-thread{position:absolute;inset-inline-start:68%;bottom:0;width:1px;
  height:clamp(38px,6vw,84px);background:linear-gradient(transparent,var(--gold));opacity:.85}
.route-head h2{font-size:var(--t-2);max-width:15ch;margin-top:1rem}
.route-lede{margin-top:1.1rem;max-width:42ch}

.route-line{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(.6rem,2vw,2rem);margin-top:clamp(1.5rem,3vw,2.5rem);
  height:clamp(190px,24vw,280px);
  /* the column the markets fan into - the stops stop before it */
  padding-inline-end:var(--fan,clamp(150px,17vw,250px))}
.route-rail{position:absolute;inset-inline:0 var(--fan,clamp(150px,17vw,250px));top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft) 10%,var(--gold) 60%,var(--gold))}
/* the object is the first item ON the line rather than a decoration floating
   over it. Absolute placement kept landing it on a stop label at some widths,
   and readability wins over drama - in the flow it can never collide, whatever
   the owner sets the number of stops to. */
.route-obj{position:relative;z-index:3;flex:0 0 auto;align-self:center;
  display:grid;place-items:center;margin-inline-end:clamp(.4rem,1.6vw,1.6rem)}
.route-obj::before{content:"";position:absolute;inset:-110%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 66%,transparent),transparent 72%);
  opacity:.6;filter:blur(5px)}
.route-obj img{position:relative;z-index:1;width:auto;max-height:clamp(92px,12.5vw,180px);
  filter:drop-shadow(0 34px 40px rgba(0,0,0,.6))}
.route-stop{position:relative;z-index:2;flex:1 1 0;height:100%}
.route-stop i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 16%,transparent)}
.route-stop b{position:absolute;left:50%;transform:translateX(-50%);width:max-content;
  max-width:min(20ch,30vw);text-align:center;font-weight:400;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-dark)}
.lang-ar .route-stop b{font-family:var(--ar);letter-spacing:0;text-transform:none;font-weight:700}
/* labels alternate across the line so three stops do not read as a table row */
.route-stop.s0 b,.route-stop.s2 b,.route-stop.s4 b{bottom:calc(50% + 1.7rem)}
.route-stop.s1 b,.route-stop.s3 b,.route-stop.s5 b{top:calc(50% + 1.7rem)}
/* the line does not stop, it opens */
/* the line does not end at a stop, it opens downward into real markets */
.route-fan{position:absolute;z-index:2;inset-inline-end:0;top:calc(50% + .55rem);
  display:grid;gap:.12rem;justify-items:start;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase}
.lang-ar .route-fan{font-family:var(--ar);letter-spacing:0;text-transform:none}
.route-fan span{color:var(--on-dark);opacity:.34;white-space:nowrap}
.route-fan .m0{opacity:.95;color:var(--gold)}
.route-fan .m1{margin-inline-start:.5rem;opacity:.6}
.route-fan .m2{margin-inline-start:1rem;opacity:.48}
.route-fan .m3{margin-inline-start:1.5rem;opacity:.4}
.route-fan .m4{margin-inline-start:2rem;opacity:.32}
.route-fan .m5{margin-inline-start:2.5rem;opacity:.24}
@media (max-width:900px){
  /* the same idea turned upright: at 390 a horizontal route is three words
     squeezed into a strip, so the rail becomes the vertical spine of the act
     and the object sets off down it */
  .route-line{flex-direction:column;align-items:stretch;height:auto;gap:0;
    padding-inline-start:2.6rem;padding-block:clamp(1.4rem,5vw,2rem) 0}
  .route-rail{inset-inline:0 auto;inset-inline-start:5px;top:0;bottom:0;height:auto;width:1px;
    background:linear-gradient(180deg,transparent,var(--gold) 14%,var(--gold-soft) 92%,transparent)}
  .route-line{padding-inline-end:0}
  .route-obj{justify-self:start;margin-inline-end:0;margin-bottom:1.4rem}
  .route-obj img{max-height:clamp(84px,26vw,130px)}
  .route-stop{flex:0 0 auto;height:auto;padding-block:.85rem}
  .route-stop i{left:-2.6rem;top:1.5rem;transform:none;width:7px;height:7px}
  .is-rtl .route-stop i{left:auto;right:-2.6rem}
  .route-stop b{position:static;transform:none;max-width:none;text-align:start;display:block}
  .route-stop.s0 b,.route-stop.s1 b,.route-stop.s2 b,.route-stop.s3 b,
  .route-stop.s4 b,.route-stop.s5 b{bottom:auto;top:auto}
  .route-fan{position:static;margin-top:1.2rem;gap:.2rem}
}

/* ==========================================================================
   ACT 11 — WORLD: the markets as a landscape that does not fit
   The thread from Foshan arrives at the top and fans into three bands at
   three scales, moving at three speeds. The largest markets are cropped by
   the viewport on purpose - the point is that the world runs off the page.
   ========================================================================== */
.world{position:relative;background:var(--green);overflow:hidden;
  padding-block:clamp(3.5rem,7vw,6rem) clamp(3rem,6vw,5rem)}
.world-thread{position:absolute;inset-inline-start:68%;top:0;width:1px;
  height:clamp(44px,7vw,96px);background:linear-gradient(var(--gold),transparent);opacity:.85}
.world-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem}
.world-head h2{font-size:var(--t-2);max-width:14ch;margin-top:1rem}
.world-count{color:var(--gold)}
.world-bands{margin-block:clamp(2.2rem,4.5vw,3.6rem);display:grid;gap:clamp(.2rem,1vw,1rem)}
.band{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.band-run{display:flex;align-items:baseline;width:max-content;animation:band-l 52s linear infinite}
.band-run .rep{display:flex;align-items:baseline;gap:clamp(1.2rem,3vw,3.4rem);
  padding-inline-end:clamp(1.2rem,3vw,3.4rem)}
.band-run span{white-space:nowrap;font-weight:800;letter-spacing:-.045em;color:var(--on-dark);
  display:inline-flex;align-items:baseline}
.lang-ar .band-run span{letter-spacing:0}
.band-run sup{font-family:var(--mono);font-size:.28em;font-weight:400;letter-spacing:.08em;
  color:var(--gold);vertical-align:super;margin-inline-start:.28em;opacity:.8}
.b1 .band-run span{font-size:clamp(40px,9vw,148px);line-height:1.02;opacity:.97}
.b2 .band-run{animation-name:band-r;animation-duration:68s}
.b2 .band-run span{font-size:clamp(22px,4.2vw,70px);line-height:1.1;opacity:.5}
.b3 .band-run{animation-duration:86s}
.b3 .band-run span{font-size:clamp(13px,1.7vw,26px);line-height:1.3;opacity:.32;font-weight:700}
@keyframes band-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes band-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.world-foot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.world-foot .lede{max-width:38ch}
@media (prefers-reduced-motion:reduce){
  .band-run{animation:none}
  .band-run .rep + .rep{display:none}
}

/* ==========================================================================
   ACT 12 — PARTNERS: what each side actually brings
   Two columns that lean into one gold spine, a knot at every pair. It states
   only what is true - a range, one brand, direct contact - against what a
   distributor already owns. No margins, no volumes, no exclusivity, no
   promises the company has not made.

   It is set on paper on purpose. After the world act the page had four dark
   surfaces running to the end, and the closing colour event needs something
   to land against. This is also the page's plainest statement, so it is the
   one act that reads like a document rather than a stage.
   ========================================================================== */
.partners{position:relative;background:var(--paper);color:var(--ink);overflow:hidden;
  padding-block:clamp(3.5rem,7vw,6rem) clamp(4rem,8vw,7rem)}
.partners .kicker{color:#8A6F42}
.pt-head{margin-bottom:clamp(1.8rem,4vw,3.2rem)}
.pt-head h2{font-size:var(--t-2);max-width:17ch;margin-top:1rem}
.pt-pairs{margin:0;display:grid;max-width:min(100%,1150px);margin-inline:auto}
.pt-labels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,6vw,7rem);
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.22em;text-transform:uppercase;
  color:#8A6F42;padding-bottom:.9rem;border-block-end:1px solid rgba(11,20,16,.2)}
.lang-ar .pt-labels{font-family:var(--ar);letter-spacing:0;text-transform:none;font-weight:700}
.pt-labels span:first-child{text-align:end}
.pt-row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,6vw,7rem);
  align-items:center;padding-block:clamp(1.1rem,2.6vw,2.1rem);
  border-block-end:1px solid rgba(11,20,16,.12)}
/* the spine the two sides meet on, with the knot of each pair on it */
.pt-row::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(138,111,66,.34)}
.pt-row::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  background:#8A6F42;transform:translate(-50%,-50%);opacity:.9}
.pt-row dt{margin:0;text-align:end;font-size:var(--t-3);font-weight:700;letter-spacing:-.025em;
  color:var(--ink);line-height:1.16}
.pt-row dd{margin:0;text-align:start;font-size:var(--t-3);font-weight:300;letter-spacing:-.01em;
  color:var(--ink-2);line-height:1.16;font-variation-settings:"wdth" 96}
.lang-ar .pt-row dt,.lang-ar .pt-row dd{letter-spacing:0;line-height:1.5;font-variation-settings:normal}
.lang-ar .pt-row dd{font-weight:400}
@media (max-width:860px){
  /* two columns cannot meet at 390, so the spine turns: each pair becomes a
     statement and its answer, joined by a short rule */
  .pt-labels{display:none}
  .pt-row{grid-template-columns:1fr;gap:.55rem;padding-block:1.3rem}
  .pt-row::before{left:0;right:auto;top:1.35rem;bottom:auto;width:clamp(28px,9vw,44px);height:1px}
  .is-rtl .pt-row::before{left:auto;right:0}
  .pt-row::after{display:none}
  .pt-row dt,.pt-row dd{text-align:start}
  /* stacked, the pair loses the two headings that give it its meaning, so
     each side states which side it is */
  .pt-row dt::before,.pt-row dd::before{content:attr(data-label);display:block;
    font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.18em;
    text-transform:uppercase;color:#8A6F42;opacity:.85;margin-bottom:.3rem}
  .lang-ar .pt-row dt::before,.lang-ar .pt-row dd::before{font-family:var(--ar);
    letter-spacing:0;text-transform:none;font-size:11.5px;font-weight:700}
  .pt-row dt{padding-inline-start:clamp(40px,12vw,60px)}
  .pt-row dd{padding-inline-start:clamp(40px,12vw,60px);opacity:.9}
}

/* ==========================================================================
   ACT 13 — CLOSING: the world converges behind one object
   The markets from Act 8 return as a faint halo, collapsed into a ring
   around the most saturated object in the range - the page's one full colour
   event - with the offer set on its lit side.
   ========================================================================== */
.closing{position:relative;background:var(--void);overflow:hidden;
  padding-block:clamp(5rem,10vw,9rem) clamp(4rem,7vw,7rem);--reach:min(38vw,470px)}
.closing::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(64% 66% at 31% 54%,color-mix(in srgb,var(--accent) 50%,transparent),transparent 64%)}
.is-rtl .closing::before{background:radial-gradient(64% 66% at 69% 54%,color-mix(in srgb,var(--accent) 50%,transparent),transparent 64%)}
.closing-halo{position:absolute;left:31%;top:54%;z-index:1;pointer-events:none}
.is-rtl .closing-halo{left:auto;right:31%}
.closing-halo span{position:absolute;inset-inline-start:0;top:0;white-space:nowrap;font-weight:700;
  font-size:clamp(10.5px,1.1vw,17px);color:var(--on-dark);opacity:.14;
  --rad:calc(var(--reach) * (.66 + var(--d) * .17));
  transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--rad)) rotate(calc(var(--a) * -1))}
.closing-obj{position:absolute;left:31%;top:54%;transform:translate(-50%,-50%);z-index:2;
  --cap:clamp(190px,29vw,460px)}
.is-rtl .closing-obj{left:auto;right:31%;transform:translate(50%,-50%)}
.closing-obj img{display:block;width:auto;max-height:var(--cap);max-width:100%;object-fit:contain;
  filter:drop-shadow(0 44px 60px rgba(0,0,0,.6))}
.closing-in{position:relative;z-index:3;display:flex;justify-content:flex-end}
.closing-say{width:min(54%,620px);text-align:start}
.closing h2{font-size:var(--t-2);letter-spacing:-.04em;max-width:12ch;margin-top:1.1rem;line-height:.98}
.lang-ar .closing h2{letter-spacing:0;max-width:13ch;line-height:1.2}
.closing .lede{margin-top:1.2rem}
.closing-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.8rem,3.4vw,2.8rem)}
@media (max-width:960px){
  /* the object cannot sit beside the type at this width, so it becomes the
     ground the type stands on: halo and object drop behind, at lower value */
  .closing{padding-block:clamp(4rem,12vw,6rem) clamp(3rem,8vw,4.5rem);--reach:min(64vw,320px)}
  .closing-obj{left:50%;right:auto;top:auto;bottom:-2%;transform:translateX(-50%);
    --cap:clamp(160px,42vw,250px);opacity:.55}
  .is-rtl .closing-obj{left:50%;right:auto;transform:translateX(-50%)}
  .closing-halo{left:50%;right:auto;top:auto;bottom:12%;opacity:.7}
  .is-rtl .closing-halo{left:50%;right:auto}
  .closing-in{display:block}
  .closing-say{width:auto;padding-bottom:clamp(7rem,32vw,10rem)}
  .closing h2{max-width:14ch}
  .closing-cta .btn{flex:1 1 auto;justify-content:center}
}

/* ==========================================================================
   FOOTER — the page does not shrink at the end, it lands
   ========================================================================== */
.foot{position:relative;background:var(--void);color:var(--on-dark-2);
  padding-block:clamp(4rem,8vw,7rem) 1.8rem;border-top:1px solid var(--gold-hair)}
.foot::before{content:"";position:absolute;inset-inline-start:68%;top:0;width:1px;
  height:clamp(30px,4vw,60px);background:linear-gradient(var(--gold),transparent);opacity:.7}
.foot-mark{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:end;
  padding-bottom:clamp(3rem,6vw,5rem);margin-bottom:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--gold-hair)}
.foot-mark img{height:clamp(62px,8.5vw,126px);width:auto}
.foot-mark p{max-width:34ch;margin:0;font-size:var(--t-lede);line-height:1.45;color:var(--on-dark)}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:2rem}
.foot-cols h4{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1rem;font-weight:400}
.lang-ar .foot-cols h4{font-family:var(--ar);letter-spacing:0;text-transform:none;font-weight:700}
.foot-cols a{display:block;padding:.3rem 0;transition:color .2s}
.foot-cols a:hover{color:var(--on-dark)}
.foot-bot{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid var(--gold-hair);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-family:var(--mono);font-size:var(--t-mono)}
.lang-ar .foot-bot{font-family:var(--ar)}
.foot-bot a{color:var(--gold)}
@media (max-width:820px){
  .foot-mark{grid-template-columns:1fr;gap:clamp(1.6rem,6vw,2.4rem);align-items:start}
  .foot-mark p{max-width:none}
}

/* ==========================================================================
   INNER PAGES — calmer, same brand
   ========================================================================== */
.pad{padding-block:clamp(3rem,7vw,7rem)}
.pad-t{padding-top:clamp(7rem,11vw,11rem)}
.pad-b{padding-bottom:clamp(3rem,7vw,7rem)}
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.stack{display:grid;gap:.55rem}
.contact-list{display:grid;gap:1.3rem;margin-top:1.8rem}
.contact-list .lbl{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);opacity:.85}
.lang-ar .contact-list .lbl{font-family:var(--ar);letter-spacing:0;text-transform:none}
.contact-list a,.contact-list p{font-size:var(--t-3);font-weight:700;letter-spacing:-.02em;margin:0;
  display:block;transition:color .2s}
.lang-ar .contact-list a,.lang-ar .contact-list p{letter-spacing:0;font-weight:800}
.contact-list a:hover{color:var(--gold)}
.page-head{background:var(--void);padding-block:clamp(7rem,11vw,11rem) clamp(2rem,4vw,3.5rem);position:relative}
.page-head h1{font-size:var(--t-2);max-width:16ch}
.page-head .lede{margin-top:1.1rem}
.crumbs{font-family:var(--mono);font-size:var(--t-mono);color:var(--on-dark-2);opacity:.7;margin-bottom:1.4rem}
.lang-ar .crumbs{font-family:var(--ar)}

.no-results{padding:4rem 0;text-align:center;color:var(--on-dark-2)}

.dist-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.reach{display:grid;gap:clamp(1.6rem,3vw,2.4rem);align-content:start}
.reach-fig{display:grid;gap:.2rem;border-top:1px solid var(--gold-hair);padding-top:1rem}
.reach-fig .n{display:block;text-align:start;unicode-bidi:isolate;font-size:clamp(48px,7vw,96px);font-weight:800;line-height:.86;letter-spacing:-.04em;
  color:var(--paper);font-variant-numeric:tabular-nums}
.reach-fig .l{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);opacity:.85}
.lang-ar .reach-fig .l{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:var(--t-body)}
.region-list button{display:flex;justify-content:space-between;gap:1rem;width:100%;text-align:start;
  padding:.9rem .2rem;border-bottom:1px solid var(--gold-hair);color:var(--on-dark-2);transition:color .2s}
.region-list button[aria-pressed="true"],.region-list button:hover{color:var(--gold)}
.dist-cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));
  margin-top:clamp(2rem,4vw,3rem)}
.dist-card{border:1px solid var(--gold-hair);padding:1.5rem;background:var(--field-2)}
.dist-card h3{font-size:var(--t-3)}
.dist-card .cc{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.14em}
.dist-card ul{margin-top:.9rem;display:grid;gap:.35rem;font-size:14.5px;color:var(--on-dark-2)}
.dist-empty{grid-column:1/-1;border:1px solid var(--gold-hair);padding:clamp(2.2rem,5vw,3.6rem);text-align:center}
@media (max-width:900px){.dist-layout{grid-template-columns:1fr}}



/* ==========================================================================
   CATALOGUE — plates, not billboards
   The homepage creates desire; this page has to make 55 products legible in
   seconds. So AURA drops to its lowest intensity here: each product owns a
   small field of its own colour, and nothing else competes.
   ========================================================================== */
.cat-head{padding-block:clamp(7rem,11vw,10rem) clamp(2rem,4vw,3.2rem)}
.cat-head-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem}
.cat-title{font-size:var(--t-2);max-width:14ch;margin-top:1rem}
.cat-count{color:var(--gold);opacity:.85}
.cat-intro{margin-top:1.2rem;max-width:44ch}
.cat-body{padding-block:clamp(1.6rem,3vw,2.6rem) clamp(4rem,8vw,7rem)}

/* ---------- controls: a composition, not a strip of chips ---------- */
.controls{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(.8rem,2vw,1.8rem) clamp(1rem,2.4vw,2.4rem);align-items:end;
  padding-bottom:clamp(1.2rem,2.4vw,2rem);border-bottom:1px solid var(--gold-hair)}
.ctrl-search{display:grid;gap:.5rem}
.ctrl-search label{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);opacity:.85}
.lang-ar .ctrl-search label{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:var(--t-body)}
.ctrl-search input{width:100%;padding:.9rem 0;border:0;border-bottom:1px solid var(--gold-soft);
  background:none;color:var(--on-dark);font-family:inherit;
  font-size:clamp(18px,2vw,30px);font-weight:700;letter-spacing:-.02em;transition:border-color .3s}
.lang-ar .ctrl-search input{letter-spacing:0}
.ctrl-search input::placeholder{color:var(--on-dark-2);opacity:.45;font-weight:400;font-size:.62em}
.ctrl-search input:focus{outline:0;border-bottom-color:var(--gold)}

/* fifteen categories as a disclosure, never as a conveyor of tiny chips */
.ctrl-cats{position:relative}
.ctrl-cats summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 0;border-bottom:1px solid var(--gold-soft);cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark)}
.lang-ar .ctrl-cats summary{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:var(--t-body)}
.ctrl-cats summary::-webkit-details-marker{display:none}
.ctrl-cats summary::after{content:"";width:9px;height:9px;border-inline-end:1px solid var(--gold);
  border-block-end:1px solid var(--gold);transform:rotate(45deg);margin-inline-start:auto;
  transition:transform .3s var(--ease)}
.ctrl-cats[open] summary::after{transform:rotate(-135deg)}
.ctrl-cats summary .n{color:var(--gold);margin-inline-start:0}
.cat-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(1rem,2vw,2rem);
  padding-block:clamp(.8rem,1.6vw,1.2rem)}
.cat-list a{display:flex;justify-content:space-between;gap:.8rem;padding:.55rem 0;
  border-bottom:1px solid rgba(201,169,106,.10);color:var(--on-dark-2);transition:color .2s}
.cat-list a:hover{color:var(--gold)}
.cat-list .n{font-family:var(--mono);font-size:10.5px;color:var(--gold);opacity:.7}

.ctrl-facets{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem}
.facet{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.facet-l{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-2);opacity:.65;margin-inline-end:.3rem}
.lang-ar .facet-l{font-family:var(--ar);letter-spacing:0;text-transform:none}
[data-power-wrap][hidden],[data-connector-wrap][hidden]{display:none!important}
.ctrl-reset{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.12em;color:var(--gold);
  text-decoration:underline;text-underline-offset:.35em;margin-inline-start:auto}
.lang-ar .ctrl-reset{font-family:var(--ar);letter-spacing:0}
.ctrl-live{color:var(--on-dark-2);opacity:.6;margin-top:clamp(1rem,2vw,1.6rem);min-height:1.2em}

/* ---------- the matrix ---------- */
.matrix{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.4rem,2.6vw,2.6rem) clamp(1rem,2vw,2rem);margin-top:clamp(.6rem,1.4vw,1.2rem)}
.plate{position:relative;display:grid;gap:.75rem;align-content:start;isolation:isolate}
.plate-field{position:relative;display:grid;place-items:center;
  height:clamp(148px,16.5vw,236px);padding:clamp(.7rem,1.4vw,1.2rem);overflow:hidden}
/* AURA at catalogue intensity: a product owns its own small field, no more */
.plate-field::before{content:"";position:absolute;inset:0;z-index:0;opacity:.42;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  background:radial-gradient(circle at 50% 52%,
    color-mix(in srgb,var(--accent) 58%,var(--green-lit)) 0%,
    color-mix(in srgb,var(--accent) 30%,transparent) 40%,transparent 68%)}
.plate:hover .plate-field::before,.plate:focus-visible .plate-field::before{opacity:.9;transform:scale(1.05)}
.plate-field img{position:relative;z-index:1;width:auto;max-width:86%;max-height:88%;object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.5));transition:transform .4s var(--ease)}
.plate:hover .plate-field img{transform:translateY(-6px)}
.plate:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.plate-vars{position:absolute;z-index:2;inset-block-end:.55rem;inset-inline-start:.55rem;display:flex;gap:.28rem}
.plate-vars i{width:9px;height:9px;border-radius:50%;border:1px solid rgba(239,243,240,.35)}
.plate-say{display:grid;gap:.28rem}
.plate-model{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;color:var(--gold);opacity:.9}
.lang-ar .plate-model{font-family:var(--mono)}
.plate-title{font-size:clamp(14px,1.05vw,17px);font-weight:700;letter-spacing:-.015em;line-height:1.28;
  color:var(--on-dark)}
.lang-ar .plate-title{letter-spacing:0;font-weight:800}
.plate:hover .plate-title{color:var(--gold)}
.plate-facts{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin-top:.15rem}
.plate-facts .pf{display:flex;align-items:baseline;gap:.34rem}
.plate-facts b{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--on-dark-2)}
.plate-facts i{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-2);opacity:.5;font-style:normal}
.lang-ar .plate-facts i{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:11px}

/* the feature: twice the field, three facts, still not a billboard */
.plate.role-feature{grid-column:span 2}

.plate.role-feature .plate-field img{max-height:94%;max-width:52%}
.plate.role-feature .plate-title{font-size:clamp(17px,1.5vw,24px)}
.plate.role-feature .plate-facts b{font-size:13px}
/* a flat plate of placeholder art needs its frame, not a floating object */
.plate.shape-plate .plate-field img{max-width:70%;max-height:70%}
.plate.shape-long .plate-field img{max-height:90%;max-width:58%}

.no-hits{grid-column:1/-1;border:1px solid var(--gold-hair);padding:clamp(2rem,5vw,3.6rem);
  text-align:center;margin-top:clamp(1.4rem,3vw,2.4rem)}
.no-hits .lede{margin-inline:auto}
.no-hits p+p{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.no-hits-cats{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:center;
  margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--gold-hair)}
.no-hits-cats a{font-family:var(--mono);font-size:var(--t-mono);color:var(--on-dark-2);transition:color .2s}
.lang-ar .no-hits-cats a{font-family:var(--ar)}
.no-hits-cats a:hover{color:var(--gold)}

@media (max-width:1100px){
  .matrix{grid-template-columns:repeat(3,1fr)}
  .cat-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  /* two columns keeps the next row visible, which is what tells somebody
     they are browsing a range rather than reading one product at a time */
  .controls{grid-template-columns:1fr}
  .matrix{grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,4vw,1.8rem) clamp(.8rem,3vw,1.2rem)}
  .plate.role-feature{grid-column:span 2}

  .plate-title{font-size:13.5px}
  .cat-list{grid-template-columns:1fr 1fr}
  .ctrl-facets{gap:.4rem .9rem}
}

/* ==========================================================================
   CATEGORY OPENING — the category has a face of its own
   ========================================================================== */
.term-open{position:relative;background:var(--void);overflow:hidden;
  padding-block:clamp(7rem,11vw,10rem) clamp(2.4rem,4vw,3.6rem)}
.term-open::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 76% 46%,
    color-mix(in srgb,var(--accent) 34%,var(--green-lit)) 0%,transparent 66%)}
.is-rtl .term-open::before{background:radial-gradient(60% 70% at 24% 46%,
    color-mix(in srgb,var(--accent) 34%,var(--green-lit)) 0%,transparent 66%)}
.term-open .wrap{position:relative;z-index:1}
.term-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;
  min-height:clamp(220px,26vw,340px)}
.term-name{font-size:var(--t-1);letter-spacing:-.045em;line-height:.94;max-width:12ch}
.lang-ar .term-name{letter-spacing:0;line-height:1.16}
.term-count{font-size:clamp(30px,4vw,64px);font-weight:800;line-height:1;color:var(--gold);
  opacity:.55;margin-top:.6rem;font-variant-numeric:tabular-nums}
.term-desc{margin-top:1.1rem;max-width:38ch}
/* three objects at three depths - a category portrait, not a row of thumbs */
.term-objs{position:relative;height:clamp(200px,24vw,330px)}
.term-o{position:absolute;display:block}
.term-o img{display:block;width:auto;max-height:var(--cap);max-width:100%;object-fit:contain;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.55))}
.term-o.o1{inset-inline-end:6%;bottom:6%;--cap:clamp(120px,15vw,240px);z-index:3}
.term-o.o2{inset-inline-end:34%;bottom:22%;--cap:clamp(94px,11.5vw,186px);z-index:2;opacity:.9}
.term-o.o3{inset-inline-end:58%;bottom:2%;--cap:clamp(78px,9.5vw,150px);z-index:1;opacity:.8}
.density-thin .term-o.o1{inset-inline-end:14%;--cap:clamp(140px,17vw,260px)}
/* placeholder art is a small glyph on a large transparent canvas, so the same
   cap renders it about half the size of a real product render */
.term-o.shape-plate{--cap:clamp(180px,23vw,360px)}
.density-thin .term-o.shape-plate.o1{--cap:clamp(210px,26vw,400px)}
@media (max-width:820px){
  .term-in{grid-template-columns:1fr;min-height:0;gap:clamp(1.2rem,4vw,2rem)}
  .term-objs{height:clamp(150px,44vw,210px);order:-1}
  .term-o.o1{inset-inline-end:14%;--cap:clamp(110px,30vw,150px)}
  .term-o.o2{inset-inline-end:44%;--cap:clamp(86px,24vw,120px)}
  .term-o.o3{inset-inline-end:70%;--cap:clamp(72px,20vw,100px)}
}

/* ==========================================================================
   PRODUCT PORTRAIT
   Four opening compositions chosen from the object's own geometry, and a page
   whose length follows how much is genuinely known about the product.
   ========================================================================== */
.pd-open{position:relative;overflow:hidden;padding-block:clamp(7rem,11vw,10rem) clamp(3rem,6vw,5rem)}
.pd-light{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 62% at 72% 48%,
    color-mix(in srgb,var(--accent) 44%,transparent) 0%,transparent 64%)}
.is-rtl .pd-light{background:radial-gradient(58% 62% at 28% 48%,
    color-mix(in srgb,var(--accent) 44%,transparent) 0%,transparent 64%)}
.pd-open .wrap{position:relative;z-index:1}
.pd-stage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;
  margin-top:clamp(1rem,2vw,1.6rem)}
.pd-say{position:relative;z-index:2}
.pd-title{font-size:var(--t-2);letter-spacing:-.04em;line-height:.98;max-width:14ch;margin-top:.8rem}
.lang-ar .pd-title{letter-spacing:0;line-height:1.2;max-width:16ch}
.pd-model{color:var(--gold);letter-spacing:.16em;margin-top:.9rem}
.pd-lede{margin-top:1.1rem;max-width:38ch}
.pd-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.8rem,3vw,2.6rem)}

/* few facts: set as the composition's own type, not as a stunted table */
.pd-facts{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,3vw,2.8rem);margin-top:clamp(1.6rem,3vw,2.4rem);
  padding-top:clamp(1.2rem,2.4vw,1.8rem);border-top:1px solid var(--gold-hair)}
.pd-facts div{display:grid;gap:.2rem}
.pd-facts dt{font-size:clamp(20px,2.4vw,38px);font-weight:800;letter-spacing:-.03em;color:var(--paper);
  line-height:1}
.lang-ar .pd-facts dt{letter-spacing:0}
.pd-facts dd{margin:0;font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);opacity:.8}
.lang-ar .pd-facts dd{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:13px}

.pd-object{position:relative;display:grid;justify-items:center;gap:1.2rem}
.pd-object img{display:block;width:auto;max-height:var(--cap,clamp(220px,30vw,440px));max-width:100%;
  object-fit:contain;filter:drop-shadow(0 34px 44px rgba(0,0,0,.6));transition:opacity .3s var(--ease)}
/* the object's geometry chooses the frame */
.mode-long .pd-object{--cap:clamp(260px,36vw,520px)}
.mode-long .pd-stage{grid-template-columns:1.15fr .85fr}
.mode-wide .pd-stage{grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.4rem)}
.mode-wide .pd-object{order:-1;--cap:clamp(150px,19vw,280px)}
.mode-wide .pd-title{max-width:20ch}
.mode-plate .pd-object{--cap:clamp(230px,29vw,420px);padding:clamp(1rem,2vw,1.8rem);
  border:1px solid var(--gold-hair);background:color-mix(in srgb,var(--accent) 16%,var(--field-2))}
.mode-plate .pd-object img{filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}

.pd-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}
.pd-swatches button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(239,243,240,.24);transition:border-color .25s,transform .25s}
.pd-swatches button i{width:100%;height:100%;border-radius:50%;display:block}
.pd-swatches button[aria-pressed="true"]{border-color:var(--gold);transform:scale(1.12)}
.pd-swatches button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pd-swatch-name{font-family:var(--mono);font-size:var(--t-mono);color:var(--on-dark-2);
  margin-inline-start:.5rem}
.lang-ar .pd-swatch-name{font-family:var(--ar)}

/* ---------- specification field: authority without a dashboard ---------- */
.pd-spec{padding-block:clamp(3.5rem,7vw,6rem)}
.pd-spec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.2rem;
  margin-bottom:clamp(2rem,4vw,3rem)}
.pd-spec-head h2{font-size:var(--t-3);max-width:16ch;margin-top:.9rem;color:var(--ink)}
.spec-field{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:0;background:var(--paper);border-top:1px solid rgba(11,20,16,.14)}
.spec-cell{background:var(--paper);padding:clamp(1.2rem,2.4vw,2rem) clamp(1rem,2vw,1.6rem);display:grid;
  gap:.4rem;align-content:start;
  border-bottom:1px solid rgba(11,20,16,.14);border-inline-end:1px solid rgba(11,20,16,.14)}
.spec-cell dt{font-size:clamp(19px,2vw,30px);font-weight:800;letter-spacing:-.028em;line-height:1.08;
  color:var(--ink)}
.lang-ar .spec-cell dt{letter-spacing:0}
.spec-cell dd{margin:0;font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:#8A6F42}
.lang-ar .spec-cell dd{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:13px}

/* ---------- views ---------- */
.pd-views{padding-block:clamp(3rem,6vw,5rem)}
.pd-view-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(.8rem,1.6vw,1.4rem);margin-top:1.4rem;align-items:start}
.pd-view-grid img{display:block;width:100%;height:auto;max-height:clamp(200px,24vw,320px);
  object-fit:contain;background:var(--field-2);border:1px solid var(--gold-hair);
  padding:clamp(.6rem,1.2vw,1rem)}
.pd-view-grid img.studio{background:var(--paper-2);padding:0}
/* a single alternate is one plate, centred, not a grid of one */
.pd-view-grid.single{grid-template-columns:1fr;max-width:min(660px,100%)}
.pd-view-grid.single img{max-height:clamp(240px,30vw,400px)}
.pd-video{margin-top:1.4rem;border:1px solid var(--gold-hair)}
.pd-video video{width:100%;display:block}


/* ---------- constants: a line, not a section ---------- */
.pd-consts{padding-block:1.4rem;border-top:1px solid var(--gold-hair)}
.pd-consts .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;color:var(--on-dark-2);opacity:.75}

/* ---------- epilogue: related products are the footnote ---------- */
.pd-more{padding-block:clamp(2.6rem,5vw,4rem) clamp(3rem,6vw,5rem);border-top:1px solid var(--gold-hair)}
.pd-more-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-bottom:clamp(1.2rem,2.4vw,1.8rem)}
.pd-more-head h2{font-size:clamp(17px,1.5vw,23px);font-weight:700;letter-spacing:-.02em}
.lang-ar .pd-more-head h2{letter-spacing:0;font-weight:800}
.pd-more-all{color:var(--gold);opacity:.85}
.pd-more-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.4rem)}
.mini{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.8rem;isolation:isolate}
.mini-field{position:relative;display:grid;place-items:center;width:clamp(58px,6vw,84px);aspect-ratio:1;
  flex:0 0 auto;overflow:hidden}
.mini-field::before{content:"";position:absolute;inset:0;z-index:0;opacity:.34;transition:opacity .3s;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 56%,var(--green-lit)) 0%,transparent 66%)}
.mini:hover .mini-field::before{opacity:.8}
.mini-field img{position:relative;z-index:1;width:auto;max-width:82%;max-height:78%;object-fit:contain}
.mini-say{display:grid;gap:.15rem;min-width:0}
.mini-say .m{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--gold);opacity:.85}
.mini-say .t{font-size:12.5px;font-weight:700;line-height:1.25;color:var(--on-dark-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lang-ar .mini-say .t{font-weight:800}
.mini:hover .t{color:var(--gold)}
.mini:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

@media (max-width:900px){
  .pd-stage{grid-template-columns:1fr;gap:clamp(1.6rem,5vw,2.4rem)}
  .pd-object{order:-1;--cap:clamp(190px,48vw,300px)}
  .mode-long .pd-object{--cap:clamp(220px,56vw,330px)}
  .pd-title{max-width:none}
  .pd-lede{max-width:none}
  .pd-cta .btn{flex:1 1 auto;justify-content:center}
  .pd-facts{gap:1rem 1.8rem}
  .pd-facts dt{font-size:clamp(19px,6vw,26px)}
  .pd-more-row{grid-template-columns:repeat(2,1fr)}
}

/* forms */
.form{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr;max-width:860px}
.form .full{grid-column:1/-1}
.form label{display:block;font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-2);margin-bottom:.45rem}
.lang-ar .form label{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:14px}
.form input,.form textarea{width:100%;padding:.95rem 1.15rem;background:var(--field-2);
  border:1px solid var(--gold-hair);color:inherit;font:inherit;font-size:var(--t-body);border-radius:4px}
.form input:focus,.form textarea:focus{border-color:var(--gold);outline:none}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.form-note{font-size:var(--t-mono);font-family:var(--mono);color:var(--on-dark-2)}
.lang-ar .form-note{font-family:var(--ar);font-size:14px}
.alert{padding:1.1rem 1.3rem;border:1px solid var(--gold-soft);margin-bottom:1.6rem;
  font-size:var(--t-mono);font-family:var(--mono);color:var(--gold)}
.lang-ar .alert{font-family:var(--ar);font-size:15px}
@media (max-width:760px){.form{grid-template-columns:1fr}}

/* motion */
[data-rise]{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-rise].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-rise]{opacity:1!important;transform:none!important;transition:none!important}
  .btn,.plate,.mini,.term-o,.band-run span{transition:none!important}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .hide-sm{display:none}
}
.about-cats{grid-template-columns:repeat(3,1fr);margin-top:clamp(1.6rem,3vw,2.4rem)}
@media (max-width:760px){.about-cats{grid-template-columns:1fr 1fr}}