/* ==========================================================================
   STRENGTH DEN — redesign layer (2026-10)
   One stylesheet, loaded last. Remove its <link> to roll back instantly.
   Direction: calm, confident, editorial. Warm charcoal + ivory, ONE gold accent,
   hairline rules, serif display type, real photography. No glow, no glass,
   no gradient text, no blue-neon.
   ========================================================================== */

/* ---------- fonts (self-hosted, no Google dependency) ---------- */
@font-face{font-family:"SD Display";src:url("/fonts/fraunces-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"SD Sans";src:url("/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:"SD Arabic";src:url("/fonts/cairo-arabic-wght-normal.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"SD Arabic";src:url("/fonts/cairo-latin-wght-normal.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC}

/* ---------- design tokens ---------- */
html:root,html[data-theme]:root,html[data-theme="dark"]:root{
  --sd-r:4px;
  --sd-serif:"SD Display","Iowan Old Style","Georgia",serif;
  --sd-sans:"SD Sans","SD Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* legacy variable names used all over the old pages → remapped */
  --ink:#0d0e10!important; --navy:#14161a!important; --navy-2:#1a1d22!important; --navy-3:#22262c!important;
  --line:rgba(243,238,228,.13)!important;
  --electric:#d6a247!important; --electric-bright:#e6b95e!important; --electric-soft:#7a5f2c!important;
  --gold:#d6a247!important; --gold-bright:#ecc578!important;
  --paper:#f3eee4!important; --muted:#aaa69b!important; --muted-dim:#78756d!important;
  --display:var(--sd-sans)!important; --body:var(--sd-sans)!important; --mono:var(--sd-sans)!important; --menu:var(--sd-sans)!important;
  --sd-font:var(--sd-sans);
  --r:var(--sd-r)!important;
  --sd-ink:#0d0e10; --sd-paper:#f3eee4; --sd-muted:#aaa69b; --sd-line:rgba(243,238,228,.13); --sd-gold:#d6a247; --sd-gold-bright:#ecc578; --sd-blue:#d6a247;

  /* theme layer tokens */
  --sdx-bg:#0d0e10; --sdx-bg-soft:#121417; --sdx-surface:#14161a; --sdx-surface-solid:#14161a; --sdx-surface-raised:#1a1d22;
  --sdx-ink:#f3eee4; --sdx-muted:#b4b0a5; --sdx-soft:#85827a; --sdx-line:rgba(243,238,228,.14);
  --sdx-blue:#e6b95e; --sdx-blue-soft:rgba(214,162,71,.10); --sdx-gold:#d6a247; --sdx-gold-deep:#b5842c;
  --sdx-shadow:none; --sdx-radius:var(--sd-r); --sdx-radius-sm:var(--sd-r);
}
html[data-theme="light"]:root{
  --ink:#f4f0e7!important; --navy:#ebe6da!important; --navy-2:#e3ddcf!important; --navy-3:#d9d2c1!important;
  --line:rgba(21,19,15,.16)!important;
  --electric:#8f6410!important; --electric-bright:#8f6410!important; --electric-soft:#c9b385!important;
  --gold:#a8730f!important; --gold-bright:#8f6410!important;
  --paper:#17150f!important; --muted:#55524a!important; --muted-dim:#78746a!important;
  --sd-ink:#f4f0e7; --sd-paper:#17150f; --sd-muted:#55524a; --sd-line:rgba(21,19,15,.16); --sd-gold:#a8730f; --sd-blue:#8f6410;
  --sdx-bg:#f4f0e7; --sdx-bg-soft:#ebe6da; --sdx-surface:#fbf9f3; --sdx-surface-solid:#fbf9f3; --sdx-surface-raised:#f0ebdf;
  --sdx-ink:#17150f; --sdx-muted:#4d4a42; --sdx-soft:#6f6b61; --sdx-line:rgba(21,19,15,.16);
  --sdx-blue:#8f6410; --sdx-blue-soft:rgba(143,100,16,.10); --sdx-gold:#a8730f; --sdx-gold-deep:#7d5409;
}

/* ---------- base ---------- */
html[data-theme] body{background:var(--ink)!important;color:var(--paper)!important;font-family:var(--sd-sans)!important;line-height:1.65;font-feature-settings:"ss01","tnum" 0}
html[data-theme] :is(button,input,textarea,select){font-family:var(--sd-sans)!important}
html[lang="ar"] body,html[lang="ar"] :is(button,input,textarea,select){font-family:"SD Arabic","Cairo",system-ui,sans-serif!important}
::selection{background:var(--gold);color:#0d0e10}

/* the old ambient decoration goes away */
.bg-glow,.grid-bg,.cta-glow,.scroll-hint,.hero-board::after,.cases-bg{display:none!important}
.hero-board{background:none!important}
section[style*="radial-gradient"],.stats,.value,.clients-panel{background:none!important}

/* ---------- type: serif display for English, Cairo for Arabic ---------- */
h1,h2,h3,h4{letter-spacing:0!important;text-wrap:balance}
html[lang="en"] :is(h1,h2,.value-quote,.cta h2,.sec-head h2){font-family:var(--sd-serif)!important;font-weight:500!important;letter-spacing:-.015em!important;font-optical-sizing:auto;line-height:1.08!important}
html[lang="en"] h3{font-family:var(--sd-sans)!important;font-weight:600!important}
html[lang="ar"] :is(h1,h2,h3,h4,.value-quote){font-family:"SD Arabic","Cairo",sans-serif!important;font-weight:700!important;line-height:1.35!important}
.hero h1{font-size:clamp(2.6rem,5.6vw,5.2rem)!important;max-width:15ch!important}
html[lang="ar"] .hero h1{max-width:none!important;font-size:clamp(2.4rem,5vw,4.4rem)!important}
.sec-head h2,.cta h2{font-size:clamp(2rem,4vw,3.4rem)!important}
.hero h1 .l2{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--gold-bright)!important;font-style:italic;padding:0!important}
html[lang="ar"] .hero h1 .l2{font-style:normal}
.stat .num{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--paper)!important;font-family:var(--sd-serif)!important;font-weight:400!important;font-variant-numeric:lining-nums}
.gold,.value-quote .hl{color:var(--gold-bright)!important}
.en{font-family:var(--sd-sans)!important}

/* eyebrows: quiet label + short rule, no blue mono */
.eyebrow,.hero-tag{font-family:var(--sd-sans)!important;font-weight:600!important;font-size:.74rem!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--gold-bright)!important}
html[lang="ar"] :is(.eyebrow,.hero-tag){letter-spacing:0!important;text-transform:none;font-size:.9rem!important}
.eyebrow::before{background:var(--gold)!important;height:1px!important;width:34px!important;border-radius:0!important}
.hero-tag{background:none!important;border:0!important;border-radius:0!important;padding:0!important;gap:12px!important}
.hero-tag .dot{box-shadow:none!important;width:6px!important;height:6px!important;border-radius:0!important;transform:rotate(45deg)}

/* ---------- buttons ---------- */
.btn,.nav-cta,.cta .btn{border-radius:var(--sd-r)!important;font-family:var(--sd-sans)!important;font-weight:600!important;letter-spacing:.01em;box-shadow:none!important;backdrop-filter:none!important;padding:15px 28px!important;transition:background-color .25s,color .25s,border-color .25s,transform .25s!important}
.nav-cta{padding:10px 20px!important;font-size:.88rem!important}
.btn-gold,.nav-cta{background:var(--gold)!important;color:#0d0e10!important}
.btn-gold:hover,.nav-cta:hover{background:var(--gold-bright)!important;transform:none!important;box-shadow:none!important}
html[data-theme="light"] :is(.btn-gold,.nav-cta){color:#fff!important}
.btn-ghost{background:transparent!important;border:1px solid var(--paper)!important;color:var(--paper)!important}
.btn-ghost:hover{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--paper)!important}
.lang-switch,.toggle-row{background:transparent!important;border-radius:var(--sd-r)!important;border:1px solid var(--line)!important}
.lang-btn,.toggle-row button{border-radius:2px!important;font-family:var(--sd-sans)!important;letter-spacing:.06em!important}
.lang-btn.active,.toggle-row button.active{background:var(--paper)!important;color:var(--ink)!important}
.toggle-row button.active.bad{background:var(--paper)!important;color:var(--ink)!important}

/* ---------- header: solid, no photo, no blur ---------- */
html[data-theme] #hdr,#hdr,header.scrolled,#hdr.scrolled{background:var(--ink)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;border-bottom:1px solid var(--line)!important}
html[data-theme] #hdr .navlinks a,#hdr .navlinks a{font-weight:500!important;color:var(--muted)!important}
html[data-theme] #hdr .navlinks a:hover,#hdr .navlinks a.active{color:var(--paper)!important}
#hdr .navlinks a:after{height:1px!important;border-radius:0!important;bottom:-8px!important}
#hdr .brand img.logo{height:34px}
html[data-theme="light"] #hdr .brand img.logo{filter:invert(1) brightness(.15)}
html[data-theme] #hdr .nav-cta{color:#0d0e10!important}
html[data-theme="light"] #hdr .nav-cta{color:#fff!important}
.mobile-menu,#mm{background:var(--ink)!important;backdrop-filter:none!important}

/* ---------- hero: copy left, one real photo right ---------- */
.hero{min-height:min(92vh,880px)!important;padding:150px 0 90px!important;background:var(--ink)!important;border-bottom:1px solid var(--line)}
.hero-inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;gap:clamp(36px,6vw,96px)!important;align-items:center!important}
.hero p.sub{color:var(--muted)!important;font-size:clamp(1.02rem,1.5vw,1.2rem)!important;max-width:52ch!important;line-height:1.75!important}
.hero-visual{display:block!important;position:relative;aspect-ratio:4/5;max-height:640px;border-radius:var(--sd-r);overflow:hidden;
  background:#1a1d22 url("/images/project-tuwaiq-academy.jpg") center/cover no-repeat;border:1px solid var(--line)}
.hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(13,14,16,.55));pointer-events:none}
.hero-visual>*{display:none!important}
@media(max-width:980px){
  .hero{padding:118px 0 56px!important}
  .hero-inner{grid-template-columns:1fr!important}
  .hero-visual{order:2!important;aspect-ratio:4/3;max-height:none}
  .hero h1{max-width:none!important}
}

/* ---------- sections: more air, hairline separation ---------- */
.sec{padding-block:clamp(84px,9vw,140px)!important;border-top:1px solid var(--line)}
.sec:first-of-type,.hero+.sec{border-top:0}
.sec-head{max-width:820px!important;margin-bottom:clamp(40px,5vw,72px)!important}
.sec-head p{color:var(--muted)!important;font-size:1.1rem!important;max-width:60ch}
.value-side{border-color:var(--gold)!important}
.value-photo{border-radius:var(--sd-r)!important}
.value-photo img{filter:none!important}

/* ---------- cards → flat panels, hairline borders, no lift/glow ---------- */
.stat,.svc,.sector,.case,.work,.pcard,.chaos,.solution-card,.logo-card,.why,.pill,.node{
  background:var(--navy)!important;border:1px solid var(--line)!important;border-radius:var(--sd-r)!important;box-shadow:none!important;backdrop-filter:none!important}
.stat::after,.svc::before{display:none!important}
.stat,.svc,.sector,.case,.work{transition:border-color .3s,background-color .3s!important}
.stat:hover,.svc:hover,.sector:hover,.case:hover,.work:hover{transform:none!important;border-color:var(--gold)!important;background:var(--navy-2)!important;box-shadow:none!important}
.stat{padding:36px 22px!important;text-align:start!important}
.stat .lab{font-size:.88rem!important;letter-spacing:.02em}
.svc{padding:34px 28px!important}
.svc .ic{background:none!important;border:1px solid var(--line);border-radius:var(--sd-r)!important;width:46px!important;height:46px!important}
.svc .ic svg,.node svg{stroke:var(--gold-bright)!important}
.svc li::before{content:"—"!important;color:var(--gold)!important}
.case-top{background:none!important}
.case-media::after{background:linear-gradient(180deg,transparent 55%,rgba(13,14,16,.7))!important}
.case-media .tag,.case .tag{color:var(--gold-bright)!important;font-family:var(--sd-sans)!important}
.case h3,.case .ar-name{font-family:var(--sd-sans)!important;font-size:1.35rem!important;font-weight:600!important}
.case-metric .m{font-family:var(--sd-serif)!important;font-weight:400!important}
.case-body li::before{content:"—"!important;font-size:.9rem!important;margin-top:0!important}
.case:hover .case-media img,.work:hover .work-img img{transform:scale(1.03)!important}
.work-cap .wn{font-family:var(--sd-sans)!important}
.sector .sn,.why .wn,.tl-year,.proc-num{font-family:var(--sd-serif)!important;font-weight:400!important;color:var(--gold)!important}
.why-grid{background:var(--line)!important;border-radius:var(--sd-r)!important}
.why{background:var(--ink)!important;border:0!important;border-radius:0!important}
.why:hover{background:var(--navy)!important}
.chaos::before{display:none!important}
.chaos{background:var(--navy)!important}
.solution-card{border-color:var(--gold)!important}
.solution-card .pills span{border-radius:var(--sd-r)!important;background:transparent!important}

/* timeline + process: remove glow */
.tl-line .fill{background:var(--gold)!important}
.tl-dot{box-shadow:none!important;border-radius:0!important;transform:rotate(45deg)}
.tl-item.in .tl-dot{box-shadow:none!important}
.proc-num{box-shadow:none!important;border-radius:var(--sd-r)!important}
.proc-step:hover .proc-num{box-shadow:none!important}
.wheel-detail li::before{box-shadow:none!important;border-radius:0!important}
.wheel-center{background:var(--navy)!important}
.wheel-center .smark path,.smark path{filter:none!important}
.wheel-detail h3{font-family:var(--sd-serif)!important;font-weight:500!important}
.node{box-shadow:none!important}

/* client logos stay on a light plate so brand colours read correctly */
.clients-panel{background:#f6f2e9!important;border:0!important;border-radius:var(--sd-r)!important;box-shadow:none!important}
.logo-card{background:#f6f2e9!important}
.logo-card img{filter:none!important}
.logo-card:hover{border-color:var(--gold)!important}

/* ---------- CTA + footer ---------- */
.cta{padding-top:clamp(96px,10vw,160px)!important;border-top:1px solid var(--line);text-align:start!important}
.cta-inner{max-width:900px!important;margin-inline:0!important}
.cta h2{font-size:clamp(2.4rem,6vw,5rem)!important;font-weight:500!important}
.cta p{max-width:52ch}
.contact-bar{border-top:1px solid var(--line)!important}
.cb{text-align:start!important}
.cb .cbl{font-family:var(--sd-sans)!important;letter-spacing:.14em!important;color:var(--muted-dim)!important}
.cb a,.cb span{font-family:var(--sd-sans)!important}
footer,#sd-homepage-footer{background:var(--ink)!important;border-top:1px solid var(--line)!important;color:var(--muted)!important}

/* ---------- inner pages (about / services / portfolio / booth / contact) ---------- */
html[data-theme] main :is(h1,h2){letter-spacing:-.01em!important}
html[lang="ar"] main :is(h1,h2){letter-spacing:0!important}
main :is(.card,.panel-card,article,[class*="card"]){border-radius:var(--sd-r)!important;box-shadow:none!important}
main [class*="kicker"],main [class*="eyebrow"],main [class*="tag"]{font-family:var(--sd-sans)!important}
main :is(input,textarea,select){border-radius:var(--sd-r)!important;background:var(--navy)!important;border:1px solid var(--line)!important;color:var(--paper)!important}
main :is(input,textarea,select):focus{border-color:var(--gold)!important;outline:0}
main a:not([class]){color:var(--gold-bright)}
/* neon blue accents on inner pages → gold */
[class*="text-blue"],[class*="text-sky"],[class*="text-cyan"]{color:var(--gold-bright)!important}
[class*="bg-blue"],[class*="bg-sky"]{background-color:var(--gold)!important}
[class*="border-blue"],[class*="border-sky"]{border-color:var(--gold)!important}
[class*="shadow-"],[class*="blur-"]{box-shadow:none!important}

/* ---------- privacy panel: compact card in the corner, never over the hero ---------- */
.sd-consent,[class*="sd-consent"]:not(.sd-consent-actions){border-radius:var(--sd-r)!important}
.sd-consent{position:fixed!important;inset:auto auto 16px 16px!important;right:auto!important;transform:none!important;width:min(380px,calc(100vw - 32px))!important;max-width:380px!important;padding:18px 20px!important;background:var(--navy)!important;border:1px solid var(--line)!important;box-shadow:0 12px 40px rgba(0,0,0,.35)!important;backdrop-filter:none!important;font-size:.88rem!important;line-height:1.55!important}
html[dir="rtl"] .sd-consent{inset:auto 16px 16px auto!important}
.sd-consent h2,.sd-consent h3,.sd-consent [class*="title"]{font-family:var(--sd-sans)!important;font-size:1rem!important;font-weight:600!important;margin:0 0 6px!important}
.sd-consent-actions{gap:8px!important;flex-wrap:wrap}
.sd-consent button{border-radius:var(--sd-r)!important;padding:9px 14px!important;font-size:.82rem!important;font-weight:600!important}
@media(max-width:640px){.sd-consent{inset:auto 10px 10px 10px!important;width:auto!important;max-width:none!important}}

/* ---------- focus + motion ---------- */
html[data-theme] :is(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--gold-bright)!important;outline-offset:3px!important}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

html[data-theme] #hdr .lang-btn.active,.lang-btn.active{background:var(--paper)!important;color:var(--ink)!important}
html[data-theme] #hdr .lang-btn{color:var(--muted)!important}
.hero-board{display:none!important}
.btn-ghost,html[data-theme] .btn-ghost{border-color:rgba(243,238,228,.55)!important}
html[data-theme="light"] .btn-ghost{border-color:rgba(21,19,15,.5)!important}
/* light theme was never finished → dark only; hide the toggle */
[data-sd-theme-toggle],.sd-theme-toggle{display:none!important}