@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600&display=swap');

.site-language{
  position:fixed;
  z-index:260;
  top:82px;
  right:clamp(14px,2vw,28px);
  font-family:Manrope,Arial,sans-serif;
  color:#25241f;
  direction:ltr;
}
.site-language-toggle{
  min-width:104px;
  height:40px;
  padding:0 13px;
  border:1px solid rgba(28,27,24,.16);
  border-radius:999px;
  background:rgba(247,246,240,.88);
  color:inherit;
  box-shadow:0 8px 30px rgba(25,24,20,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  cursor:pointer;
  font:10px "DM Mono",monospace;
  letter-spacing:.07em;
}
.site-language-toggle strong{font-weight:400;font-size:11px}.site-language-toggle span{opacity:.62}.site-language-toggle i{font-style:normal;transition:transform .25s}.site-language.is-open .site-language-toggle i{transform:rotate(180deg)}
.site-language-menu{
  width:214px;
  margin-top:8px;
  padding:7px;
  border:1px solid rgba(28,27,24,.13);
  border-radius:18px;
  background:rgba(247,246,240,.96);
  box-shadow:0 24px 70px rgba(20,19,17,.16);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.98);
  transform-origin:top right;
  transition:opacity .22s,visibility .22s,transform .22s;
}
.site-language.is-open .site-language-menu{opacity:1;visibility:visible;transform:none}
.site-language-menu a{
  min-height:39px;
  padding:0 11px;
  border-radius:11px;
  display:grid;
  grid-template-columns:32px 1fr auto;
  align-items:center;
  gap:9px;
  color:inherit;
  text-decoration:none;
  font-size:12px;
}
.site-language-menu a:hover,.site-language-menu a:focus-visible{background:rgba(92,58,145,.10);outline:0}.site-language-menu a[aria-current="true"]{background:#5e3a91;color:#fff}.site-language-menu b{font:9px "DM Mono",monospace;font-weight:400;opacity:.72}.site-language-menu small{font-size:10px;opacity:.6}
.site-language-scrim{position:fixed;inset:0;z-index:-1;display:none}.site-language.is-open .site-language-scrim{display:block}

/* Arabic / RTL layout. Keep these overrides physical and scoped so every LTR
   locale retains the original art direction and animation transforms. */
html[dir="rtl"] body{direction:rtl;font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif}
html[dir="rtl"] :where(main,footer,.menu,.product-dialog){text-align:right}
html[dir="rtl"] .site-language{right:auto;left:clamp(14px,2vw,28px);direction:ltr;text-align:left}
html[dir="rtl"] .site-language-menu{transform-origin:top left}
html[dir="rtl"] .scroll-progress,html[dir="rtl"] .page-progress{right:auto;left:0}
html[dir="rtl"] .progress,html[dir="rtl"] .page-progress i{transform-origin:right top}

/* Arabic display type needs a real Arabic face, neutral tracking and enough
   leading for diacritics; the Latin Dinamo wordmarks remain untouched. */
html[lang="ar"] :where(main h1,main h2,main h3,footer h2,footer h3,.editorial-quote){font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif;letter-spacing:0!important;line-height:1.08!important}
html[lang="ar"] :where(.mono,.eyebrow,.kicker,.hero-eyebrow,.section-index,.statement-line-d){font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif!important;letter-spacing:0!important;text-transform:none}
html[lang="ar"] .statement-motion-line{letter-spacing:0!important;line-height:1.1!important}
html[lang="ar"] :where(.wordmark,.footer-word,.site-head .dinamo,.brand-hero h1,.brand-row h2,.other-card h3,.prelude span){font-family:Manrope,Arial,sans-serif;direction:ltr;unicode-bidi:isolate}
html[lang="ar"] .brand-hero h1{line-height:.73!important;letter-spacing:-.085em!important}
html[lang="ar"] .brand-row h2{line-height:.85!important;letter-spacing:-.08em!important}
html[lang="ar"] .other-card h3{line-height:normal!important;letter-spacing:-.05em!important}
html[lang="ar"] .career-hero .hero-copy h1{line-height:.95!important}

/* Navigation and opening hero. */
html[dir="rtl"] .header .menu-button{grid-column:3;justify-self:start}
html[dir="rtl"] .header .wordmark{grid-column:2}
html[dir="rtl"] .header .header-action{grid-column:1;justify-self:end}
html[dir="rtl"] .header-action b,html[dir="rtl"] .hero-bottom-line b{margin-left:0;margin-right:9px}
html[dir="rtl"] .hero-eyebrow,html[dir="rtl"] .hero-cinematic h1{left:auto;right:3.7vw;text-align:right}
html[dir="rtl"] .hero-cinematic .hero-intro{right:auto;left:4vw;text-align:right}
html[dir="rtl"] .hero-actions{right:auto;left:4vw;justify-content:flex-start}
html[dir="rtl"] .hero-proof-row{left:auto;right:3.7vw}
html[dir="rtl"] .hero-bottom-line{right:auto;left:4vw}
html[dir="rtl"] .hero-scroll-copy{right:3.7vw;left:16vw;text-align:right}
html[dir="rtl"] .hero-scroll-copy p span{margin-left:0;margin-right:8vw}
html[dir="rtl"] .hero-cinematic h1 span{margin-left:0;margin-right:0}

/* Kinetic statement: positions mirror, progress/entrance transforms do not. */
html[dir="rtl"] .statement-stage>.kicker{left:auto;right:var(--pad)}
html[dir="rtl"] .statement-motion-line,html[dir="rtl"] .capacity-stage-copy,html[dir="rtl"] .capacity-stage-number,html[dir="rtl"] .footer-cta{text-align:right}
html[dir="rtl"] .statement-line-a{margin-left:0;margin-right:5vw}
html[dir="rtl"] .statement-line-b{margin-left:0;margin-right:auto}
html[dir="rtl"] .statement-line-c{margin-left:0;margin-right:15vw}
html[dir="rtl"] .statement-line-e{margin-right:auto;margin-left:8vw}
html[dir="rtl"] .statement-orbit{right:auto;left:calc(var(--pad) - 5px);writing-mode:vertical-lr}
html[dir="rtl"] .statement-progress{left:auto;right:var(--pad);direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .statement-progress i span{transform-origin:right center}
html[dir="rtl"] .capacity-video-status{right:auto;left:var(--pad);transform-origin:left top}
html[dir="rtl"] .capacity-stage-copy h2 em{margin-left:0;margin-right:12vw}
html[dir="rtl"] .capacity-stage-number{margin-left:0;margin-right:auto}
html[dir="rtl"] .capacity-stage>a{right:auto;left:var(--pad)}

/* Alternating editorial sections and category explorer. */
html[dir="rtl"] .product-card,html[dir="rtl"] .category-stage-copy,html[dir="rtl"] .story-copy,html[dir="rtl"] .dialog-copy,html[dir="rtl"] .application-form{text-align:right}
html[dir="rtl"] .system-row{text-align:right}
html[dir="rtl"] .system-row em{text-align:left}
html[dir="rtl"] .category-stage-number{left:auto;right:24px;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .category-stage-ghost{left:auto;right:-1vw}
html[dir="rtl"] .category-list .system-row:hover,html[dir="rtl"] .category-list .system-row.active{padding-left:18px;padding-right:22px}
html[dir="rtl"] .category-list .system-row::after,html[dir="rtl"] .category-list .system-row[data-title="Çocuk & Aile"]::after{right:auto;left:16px;text-align:left;direction:ltr}
html[dir="rtl"] .lab-copy{left:auto;right:var(--pad)}
html[dir="rtl"] .lab-shade{background:linear-gradient(270deg,rgba(25,26,23,.82),rgba(25,26,23,.12) 65%),linear-gradient(0deg,rgba(0,0,0,.35),transparent)}
html[dir="rtl"] .motion-pause{right:auto;left:var(--pad)}
html[dir="rtl"] .reference-top h2,html[dir="rtl"] .reference-disclaimer{text-align:right}
html[dir="rtl"] .desire-head::after{right:auto;left:2.5vw;writing-mode:vertical-lr}

/* Proof rail and cards. The rail remains LTR because its JS progress math and
   translate3d distance are measured from the physical left edge. */
html[dir="rtl"] .proof-heading{left:auto;right:var(--pad);text-align:right}
html[dir="rtl"] .proof-heading h2 span{margin-left:0;margin-right:7vw}
html[dir="rtl"] .proof-progress{right:auto;left:28px;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] :where(.proof-track,.studio-track,.logo-loop,.logo-set,.certificate-track,.certificate-set,.channel-track,.rhythm-track){direction:ltr}
html[dir="rtl"] :where(.proof-track article,.studio-track figure,.certificate-card,.channel-track article,.rhythm-track article){direction:rtl;text-align:right}
html[dir="rtl"] :where(.category-ticker,.category-ticker div,.sensory-ticker,.sensory-ticker div,.scent-line,.scent-line>div){direction:ltr;unicode-bidi:isolate}

/* Gridded rules and directional affordances. */
html[dir="rtl"] :where(.process-grid,.manufacturer-proof-grid,.metric-grid,.brand-portal-line,.reference-wall){border-left:0;border-right:1px solid var(--line)}
html[dir="rtl"] :where(.process-grid article,.manufacturer-proof-grid article,.metric-grid article,.brand-portal-line>*,.reference-wall>div){border-right:0;border-left:1px solid var(--line)}
html[dir="rtl"] .brief-facts div+div{border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:22px}
html[dir="rtl"] .editorial-grid h3{margin-right:0;margin-left:40px}
html[dir="rtl"] .editorial-grid p{margin-right:0;margin-left:50px}
html[dir="rtl"] .editorial-grid b,html[dir="rtl"] .brand-portal-grid b{right:auto;left:24px}
html[dir="rtl"] .brand-portal-grid b{left:22px}
html[dir="rtl"] .brand-portal-line a{text-align:start}
html[dir="rtl"] .footer-grid>div{padding-right:0;padding-left:24px;align-items:flex-start}
html[dir="rtl"] .footer-grid>div+div{border-left:0;border-right:1px solid var(--line);padding-left:24px;padding-right:24px}
html[dir="rtl"] .footer-legal a:first-of-type{margin-left:0;margin-right:auto}

/* Brand universe and brand detail pages. */
html[dir="rtl"] .brand-hero h1 span{margin-left:0;margin-right:10vw}
html[dir="rtl"] .brand-hero .hero-copy>p{margin-left:0;margin-right:10vw}
html[dir="rtl"] .manifesto-note{margin-left:0;margin-right:auto}
html[dir="rtl"] .collection-head p,html[dir="rtl"] .universe-intro{margin-left:0;margin-right:auto}
html[dir="rtl"] .editorial-quote{left:auto;right:var(--pad);text-align:right}
html[dir="rtl"] .brand-row b{right:auto;left:calc(var(--pad) + 18px)}
html[dir="rtl"] .product-card.emotion-card .product-image::after,html[dir="rtl"] .product-card.experience-card .product-image::after{left:auto;right:14px}

/* Career page. */
html[dir="rtl"] .header-title{border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:20px}
html[dir="rtl"] .career-hero .hero-copy{padding:14vh var(--pad) 16vh 4vw}
html[dir="rtl"] .career-hero .hero-copy h1 span:nth-child(2){margin-left:0;margin-right:4vw}
html[dir="rtl"] .career-hero .hero-lede,html[dir="rtl"] .career-hero .hero-copy>a{margin-left:0;margin-right:8vw}
html[dir="rtl"] .career-hero .hero-image::after{background:linear-gradient(270deg,rgba(37,35,34,.38),transparent 30%),linear-gradient(0deg,rgba(0,0,0,.4),transparent 45%)}
html[dir="rtl"] .career-hero .hero-orbit{left:auto;right:calc(48% - 70px)}
html[dir="rtl"] .culture-note{margin-left:0;margin-right:auto}
html[dir="rtl"] .toast{right:auto;left:24px}
html[dir="rtl"] .cv-meta{text-align:left;direction:ltr;unicode-bidi:isolate}

/* Forms and machine-readable/contact data retain their natural direction. */
html[dir="rtl"] input,html[dir="rtl"] textarea,html[dir="rtl"] select{text-align:right;direction:rtl}
html[dir="rtl"] :where(input[type="email"],input[type="tel"],a[href^="tel:"],.menu>div a[href^="mailto:"],.footer-grid>div:nth-child(2)>a[href^="mailto:"],.apply-contact a[href^="mailto:"]){direction:ltr;unicode-bidi:isolate;text-align:left}
html[dir="rtl"] :where(.hero-proof-row strong,.metric-grid strong,.capacity-stage-number strong,.hero-phase-index,.statement-foot,.proof-progress,.category-stage-number,.hero-index>span:first-child,.brief-head>span,.field-list article>span){direction:ltr;unicode-bidi:isolate}

@media(max-width:800px){
  .site-language{top:70px;right:12px}.site-language-toggle{min-width:74px;height:36px;padding:0 11px}.site-language-toggle span{display:none}.site-language-menu{width:min(214px,calc(100vw - 24px))}
  html[dir="rtl"] .site-language{right:auto;left:12px}
  html[dir="rtl"] .hero-eyebrow,html[dir="rtl"] .hero-cinematic h1{left:auto;right:20px}
  html[dir="rtl"] .hero-cinematic .hero-intro{right:auto;left:20px;text-align:right}
  html[dir="rtl"] .hero-actions{right:auto;left:20px;justify-content:flex-start}
  html[dir="rtl"] .hero-bottom-line{right:auto;left:20px}
  html[dir="rtl"] .statement-stage>.kicker{left:auto;right:24px}
  html[dir="rtl"] .statement-line-a,html[dir="rtl"] .statement-line-c{margin-left:0;margin-right:0}
  html[dir="rtl"] .statement-line-b{margin-left:0;margin-right:8vw}
  html[dir="rtl"] .statement-line-e{margin:14px 0 0}
  html[dir="rtl"] .statement-progress{left:auto;right:24px}
  html[dir="rtl"] .capacity-video-status{right:auto;left:20px}
  html[dir="rtl"] .capacity-stage-copy h2 em{margin-left:0;margin-right:0}
  html[dir="rtl"] .capacity-stage-number{margin-left:0;margin-right:0}
  html[dir="rtl"] .proof-heading{left:auto;right:auto;text-align:right}
  html[dir="rtl"] .proof-heading h2 span{margin-left:0;margin-right:0}
  html[dir="rtl"] .story-copy,html[dir="rtl"] .story-b .story-copy,html[dir="rtl"] .story-d .story-copy{margin:22vh 0 0}
  html[dir="rtl"] .story>img,html[dir="rtl"] .story-b>img,html[dir="rtl"] .story-c>img,html[dir="rtl"] .story-d>img{right:auto;left:50%}
  html[dir="rtl"] .lab-copy{left:24px;right:24px}
  html[dir="rtl"] .lab-shade{background:linear-gradient(0deg,rgba(25,26,23,.9),rgba(25,26,23,.05) 80%)}
  html[dir="rtl"] .motion-pause{right:auto;left:24px}
  html[dir="rtl"] .reference-top h2,html[dir="rtl"] .reference-disclaimer{text-align:right}
  html[dir="rtl"] .footer-grid>div,html[dir="rtl"] .footer-grid>div+div{border-right:0;padding-right:0;padding-left:0}
  html[dir="rtl"] .footer-legal a:first-of-type{margin-right:0}
  html[dir="rtl"] .category-list .system-row:hover,html[dir="rtl"] .category-list .system-row.active{padding-left:12px;padding-right:17px}
  html[dir="rtl"] .category-list .system-row::after,html[dir="rtl"] .category-list .system-row[data-title="Çocuk & Aile"]::after{right:auto;left:12px}
  html[dir="rtl"] .desire-head::after{right:auto;left:14px}
  html[dir="rtl"] :where(.business-paths-grid,.production-reality-grid,.desire-grid,.brand-portal-grid,.product-grid,.other-grid){direction:ltr}
  html[dir="rtl"] :where(.business-path,.production-reality-grid article,.desire-card,.brand-portal-grid a,.product-card,.other-card){direction:rtl;text-align:right}
  html[dir="rtl"] .brand-hero h1 span{margin-left:0;margin-right:13vw}
  html[dir="rtl"] .brand-hero .hero-copy>p{margin-left:0;margin-right:13vw}
  html[dir="rtl"] .brand-hero .hero-visual{margin-left:0;margin-right:-18px}
  html[dir="rtl"] .brand-row b{right:auto;left:34px}
  html[dir="rtl"] .career-hero .hero-copy{padding-right:var(--pad);padding-left:4vw}
  html[dir="rtl"] .career-hero .hero-lede{margin-left:0;margin-right:12vw}
  html[dir="rtl"] .career-hero .hero-orbit{right:auto;left:18px}
  html[dir="rtl"] .culture-note{margin-left:0;margin-right:0}
  html[dir="rtl"] .career-header nav{justify-content:flex-start}
  html[dir="rtl"] .cv-meta{grid-column:2;text-align:right}
}

@media(max-width:600px){
  html[dir="rtl"] .career-hero .hero-lede{margin-left:0;margin-right:6vw}
  html[dir="rtl"] .career-hero .hero-orbit{right:auto;left:16px}
}

@media(min-width:781px){
  html[lang="ar"] .hero-cinematic h1{font-size:clamp(74px,7.9vw,136px);line-height:.98!important}
  html[lang="ar"] .hero-cinematic .hero-intro{top:38vh}
  html[lang="ar"] .hero-actions{top:56vh}
  html[dir="rtl"] .story-copy{margin-left:0;margin-right:12vw}
  html[dir="rtl"] .story>img{right:auto;left:4vw}
  html[dir="rtl"] .story-b>img,html[dir="rtl"] .story-d>img{left:auto;right:4vw}
  html[dir="rtl"] .story-c>img{right:auto;left:7vw}
  html[dir="rtl"] .story-b .story-copy,html[dir="rtl"] .story-d .story-copy{margin-left:7vw;margin-right:auto}
}

@media(prefers-reduced-motion:reduce){.site-language-menu,.site-language-toggle i{transition:none}}
