/* Shared appearance and motion layer. All content also works without JavaScript. */
:root {
  --canvas: #fcfbf8;
  --surface: #fff;
  --surface-raised: #fff;
  --ink: #182f43;
  --muted: #66737c;
  --paper: #f2f2ed;
  --line: #dedfd9;
  --accent: #a3844d;
  --accent-soft: #d3ba86;
  --header-surface: #fffffff0;
  --shadow-soft: 0 14px 45px #142b3c0b;
  --ease-out: cubic-bezier(.22,1,.36,1);
  color-scheme: light;
}
html[data-theme="dark"] {
  --canvas: #091722;
  --surface: #102330;
  --surface-raised: #152c3b;
  --ink: #eef1f0;
  --muted: #abbac3;
  --paper: #0d1e2b;
  --line: #2b3d49;
  --accent: #cfb780;
  --accent-soft: #e1c994;
  --header-surface: #0c1c29f2;
  --shadow-soft: 0 14px 45px #00000020;
  color-scheme: dark;
}
body { background: var(--canvas); color: var(--ink); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.theme-changing body, .theme-changing .site-header, .theme-changing .navigation,
.theme-changing .industry-strip, .theme-changing .soft-section, .theme-changing .sectors-section,
.theme-changing .download-card, .theme-changing .inquiry-form, .theme-changing .closing,
.theme-changing input, .theme-changing select, .theme-changing textarea,
.theme-changing .sector-aside, .theme-changing .inquiry-box, .theme-changing .resource-banner {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.site-header { background: var(--header-surface); border-color: var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.site-header.scrolled { box-shadow: var(--shadow-soft); }
.header-inner { gap: 20px; }
.header-actions { gap: 17px; }
.navigation { gap: 23px; }
.navigation>a::after { background: var(--accent); transform-origin: center; transition: transform .35s var(--ease-out); }
.brand strong { letter-spacing: -.02em; }
.brand img { transition: background-color .3s; }
.brand small { opacity: .8; }
.header-cta { border-bottom: 1px solid var(--line); padding-block: 8px; transition: border-color .25s; }
.header-cta:hover { border-color: var(--accent); }
.header-cta span { transition: transform .35s var(--ease-out); }
.header-cta:hover span { transform: translate(3px,-3px); }
.theme-toggle {
  position: relative; flex-shrink: 0; display: inline-flex; direction: ltr;
  align-items: center; justify-content: space-around; isolation: isolate;
  padding: 4px; width: 66px; height: 38px;
  border: 1px solid var(--line); border-radius: 22px;
  color: var(--muted); background: var(--paper);
  transition: border-color .25s, background-color .3s;
}
.theme-toggle::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; }
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle svg { position: relative; width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; transition: color .25s, transform .5s var(--ease-out); }
.theme-thumb { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-raised); box-shadow: 0 1px 4px #112b3d1a; transition: transform .4s var(--ease-out), background .3s; }
.theme-toggle[aria-pressed="false"] .theme-sun { color: #806128; }
.theme-toggle[aria-pressed="true"] .theme-thumb { transform: translateX(28px); background: var(--accent-soft); }
.theme-toggle[aria-pressed="true"] .theme-moon { color: #152b3b; transform: rotate(-18deg); }
.theme-toggle[aria-pressed="true"] .theme-sun { transform: rotate(75deg); }
.reading-progress { position: fixed; inset: 0 0 auto; height: 2px; background: var(--accent-soft); transform: scaleX(0); transform-origin: left; z-index: 80; pointer-events: none; }
html[dir="rtl"] .reading-progress { transform-origin: right; }
.eyebrow>span { background: var(--accent); }
.micro { color: #816943; }
.button { border-radius: 5px; transition: transform .35s var(--ease-out), background-color .25s, border-color .25s, box-shadow .35s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 8px 22px #091a2520; }
.button>span:not(.sr-only) { transition: transform .35s var(--ease-out); }
.button:hover>span:not(.sr-only) { transform: translate(3px,-3px); }
.button.text-button { border-radius: 0; box-shadow: none; }
.text-button { color: var(--ink); border-color: var(--line); }
.text-button:hover { border-color: var(--accent); }
.primary { background: #10283d; color: #fff; }
.text-link { border-color: var(--accent); }
.text-link:hover { color: var(--accent); }
.industry-strip { background: var(--paper); }
.industry-strip a { transition: color .25s, transform .3s var(--ease-out); }
.industry-strip a:hover { color: var(--accent); transform: translateY(-2px); }
.mini-dot { background: var(--accent); }
.hero { --hero-shift: 0px; }
.hero-image { transform: translateY(var(--hero-shift)) scale(1.055); }
.hero-overlay { z-index: -1; }
.hero h1 { text-wrap: balance; }
.hero h1 em { color: #e1c994; }
.hero h1, .hero p { position: relative; }
.hero p { min-height: 3.8em; }
.hero.has-showcase .hero-content { padding-bottom: 185px; }
.hero-selector {
  position: absolute; bottom: 75px; inset-inline: 0;
  display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 0; border: 1px solid #ffffff30; border-radius: 9px;
  background: #0c25366e; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden;
}
.hero-sector {
  display: flex; align-items: center; gap: 13px; text-align: start;
  border: 0; border-inline-end: 1px solid #ffffff20; background: transparent;
  color: #d4dfe3; padding: 18px 22px; font-size: 12px; line-height: 1.5;
  position: relative; min-height: 67px; transition: background .25s, color .25s;
}
.hero-sector:last-child { border-inline-end: 0; }
.hero-sector::after { content: ''; position: absolute; bottom: 0; inset-inline: 0; height: 2px; background: #ddc38e; transform: scaleX(0); transition: transform .4s var(--ease-out); }
.hero-sector[aria-pressed="true"] { background: #ffffff14; color: #f3e2bd; }
.hero-sector[aria-pressed="true"]::after { transform: scaleX(1); }
.hero-sector.is-loading { background: #ffffff20; }
.hero-sector:hover { background: #ffffff0e; color: #fff; }
.hero-sector-number { color: #d5bf92; font: 10px 'Manrope',sans-serif; }
.hero-sector svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.5; margin-inline-start: auto; flex-shrink: 0; opacity: .7; transition: transform .3s var(--ease-out); }
.hero-sector:hover svg { transform: translate(2px,-2px); }
.hero-sector:focus-visible { outline: 2px solid #e1c994; outline-offset: -5px; }
.hero-foot { bottom: 25px; }
.hero-foot a>span { display: inline-block; transition: transform .3s; }
.hero-foot a:hover>span { transform: translateY(4px); }
.intro-visual>img, .about-image>img, .sector-row>img { border-radius: 10px; }
.image-label { border-radius: 7px; box-shadow: 0 12px 35px #112a3c15; color: #182f43; }
.sector-card { border-radius: 10px; transition: transform .5s var(--ease-out), box-shadow .5s; }
.sector-card::after {
  content: ''; position: absolute; inset: 0; border: 1px solid #ffffff30; border-radius: inherit; pointer-events: none;
  background: radial-gradient(400px circle at var(--pointer-x,50%) var(--pointer-y,50%),#f0d8a822,transparent 65%);
  opacity: 0; transition: opacity .4s;
}
.sector-card:hover { transform: translateY(-5px); box-shadow: 0 18px 35px #102b3824; }
.sector-card:hover::after { opacity: 1; }
.card-shade { background: linear-gradient(0deg,#071d2df2,transparent 95%); }
.card-no { padding: 6px 10px; background: #0c25364d; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid #ffffff24; border-radius: 4px; }
.circle-arrow { transition: background .3s, color .3s, transform .35s var(--ease-out); }
.sector-card:hover .circle-arrow { transform: rotate(5deg); }
.sectors-section, .soft-section { background-color: var(--paper); background-image: radial-gradient(ellipse at 100% 0,#bfa46c09,transparent 60%); }
.resource-banner { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.resource-banner>img { height: 100%; min-height: 350px; }
.global-section { background-image: radial-gradient(ellipse at 0 100%,#24516b70,transparent 65%); }
.region-row>span:last-child { transition: transform .35s var(--ease-out); }
.region-row:hover>span:last-child { transform: translate(3px,-3px); }
.closing { background: #ede7dc; border-block: 1px solid #dfd5c2; }
.site-footer { border-top: 1px solid #c7ad7c25; }
.download-card { background: var(--surface); border-radius: 11px; overflow: hidden; transition: transform .4s var(--ease-out), box-shadow .4s, border-color .3s; }
.download-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--shadow-soft); }
.download-content { position: relative; }
.download-card h3 { font-weight: 600; }
.filters button { border-radius: 5px; background: var(--surface); transition: background-color .25s,color .25s,border-color .25s; }
.filters button:hover { border-color: var(--accent); }
.filters button[aria-pressed="true"] { background: #10283d; color: white; }
.gallery-item { border-radius: 8px; }
.gallery-item>span { border-radius: 50%; transition: transform .3s var(--ease-out); }
.gallery-item:hover>span { transform: rotate(8deg); }
.sector-aside { border: 1px solid var(--line); border-radius: 8px; }
.sector-aside a { transition: color .25s, padding-inline .3s var(--ease-out); }
.sector-aside a:hover { color: var(--accent); padding-inline-start: 4px; }
.sector-aside a[aria-current="page"] { color: var(--accent); }
.inquiry-box { border: 1px solid var(--line); border-radius: 10px; }
.inquiry-form { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-soft); }
.inquiry-form input,.inquiry-form select,.inquiry-form textarea { background: var(--surface); border-color: var(--line); color: var(--ink); border-radius: 5px; transition: border-color .2s,box-shadow .2s; }
.inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #bfa46c18; }
.offering-list span, .reason-number { color: var(--accent); }
.values-grid article+article { border-color: var(--line); }
.light-global .region-row>span:first-child { color: var(--accent); }
.lightbox { background: transparent; }
.lightbox[open] { animation: dialog-in .28s var(--ease-out); }
.lightbox img { border-radius: 8px; }
.lightbox-close { border-radius: 50%; transition: background .2s; }
.lightbox-close:hover { background: #ffffff25; }
.to-top { border-color: var(--line); background: var(--surface-raised); color: var(--ink); }
.form-status { color: #6c5737; }
.error-theme { position: fixed; top: 28px; right: 30px; }
.error-page { background: var(--canvas); color: var(--ink); }
.error-page p { color: var(--muted); }
.error-page a { border-radius: 5px; }

/* Dark appearance is fully art-directed, including forms, navigation and documents. */
html[data-theme="dark"] .brand img { background: #f7f4eb; padding: 4px; border-radius: 8px; }
html[data-theme="dark"] .site-header { border-color: #2a3c47; }
html[data-theme="dark"] .navigation { background: var(--header-surface); }
html[data-theme="dark"] .menu-toggle span { background: #eef1f0; }
html[data-theme="dark"] .primary { background: #d3ba86; color: #132a3b; }
html[data-theme="dark"] .primary:hover { background: #e4cfa5; }
html[data-theme="dark"] .text-button { color: var(--ink); }
html[data-theme="dark"] .text-button:hover { border-color: var(--accent); }
html[data-theme="dark"] .micro { color: #cfb780; }
html[data-theme="dark"] .closing { background: #142938; border-color: #31414b; color: #eef1f0; }
html[data-theme="dark"] .closing .light { background: #d3ba86; color: #132a3b; }
html[data-theme="dark"] .closing .light:hover { background: #e4cfa5; }
html[data-theme="dark"] .filters button[aria-pressed="true"] { background: #d3ba86; color: #132a3b; border-color: #d3ba86; }
html[data-theme="dark"] .inquiry-form ::placeholder { color: #a1b1bc; }
html[data-theme="dark"] .whatsapp-button { background: var(--surface-raised); color: var(--ink); border-color: #50606a; }
html[data-theme="dark"] .whatsapp-button:hover { background: #294354; }
html[data-theme="dark"] .form-status { color: #d3ba86; }
html[data-theme="dark"] .industry-strip a:hover { color: #e1c994; }
html[data-theme="dark"] .global-section { border-block: 1px solid #354752; }
html[data-theme="dark"] .error-page a { color: #132a3b; }

/* Native page transitions progressively enhance browsers that support them. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .18s ease both; }
::view-transition-new(root) { animation: page-in .32s ease both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

@media(min-width:1500px) {
  .hero-selector { max-width: 1360px; }
}
@media(max-width:1250px) and (min-width:941px) {
  .header-actions { gap: 13px; }
  .navigation, html[lang="en"] .navigation { gap: 16px; }
  html[lang="ar"] .navigation { font-size: 12px; }
  .brand strong { font-size: 18px; }
  .brand img { width: 53px; }
  .language { padding-inline-end: 12px; }
  .header-cta { display: none; }
  .hero-sector { padding-inline: 16px; gap: 9px; font-size: 11px; }
}
@media(max-width:940px) {
  .navigation { background: var(--header-surface); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
  .navigation.open { animation: dialog-in .3s var(--ease-out); }
  .header-actions { gap: 18px; }
  .hero-selector { bottom: 72px; }
  .hero-sector { padding: 16px 13px; gap: 8px; font-size: 10px; min-height: 65px; }
  .hero-sector svg { display: none; }
  .hero.has-showcase .hero-content { padding-bottom: 190px; }
}
@media(max-width:680px) {
  .header-actions { gap: 10px; }
  .theme-toggle { width: 58px; height: 34px; padding: 3px; }
  .theme-toggle svg { width: 15px; height: 15px; }
  .theme-thumb { top: 3px; left: 3px; width: 26px; height: 26px; }
  .theme-toggle[aria-pressed="true"] .theme-thumb { transform: translateX(24px); }
  .brand img { width: 43px; }
  .brand strong,html[lang="ar"] .brand strong { font-size: 16px; }
  .brand small { font-size: 7px; }
  html[lang="en"] .brand strong { font-size: 13px; }
  html[lang="en"] .brand small { font-size: 6px; }
  .language { padding-inline-end: 8px; }
  .menu-toggle { width: 30px; padding-inline: 3px; }
  .header-inner { gap: 6px; }
  .hero.has-showcase { min-height: 715px; }
  .hero.has-showcase .hero-content,html[lang="en"] .hero.has-showcase .hero-content { padding-top: 65px; padding-bottom: 190px; }
  .hero.has-showcase h1 { font-size: 40px; }
  html[lang="ar"] .hero.has-showcase h1 { font-size: 40px; }
  .hero p { min-height: 6.4em; }
  .hero-selector { bottom: 72px; grid-template-columns: repeat(5,minmax(0,1fr)); width: calc(100% - 32px); border-radius: 7px; }
  .hero-sector { flex-direction: column; justify-content: start; gap: 8px; text-align: center; font-size: 9px; line-height: 1.6; padding: 11px 5px; min-height: 76px; }
  .hero-sector-number { font-size: 8px; opacity: .8; }
  .hero-sector>span:last-of-type { max-width: 75px; }
  html[lang="en"] .hero-sector { font-size: 8px; }
  .hero-foot { bottom: 24px; }
  .hero-foot a { font-size: 8px; }
  .resource-banner>img { height: 235px; min-height: 0; }
  .image-label { border-radius: 5px; }
}
@media(max-width:359px) {
  .brand small { display: none; }
  .brand strong,html[lang="ar"] .brand strong { font-size: 14px; }
  .header-actions { gap: 6px; }
  .hero.has-showcase h1,html[lang="ar"] .hero.has-showcase h1 { font-size: 35px; }
}
@media(hover:none) {
  .sector-card:hover,.download-card:hover { transform: none; }
  .sector-card::after { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),::view-transition-new(root) { animation: none !important; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .hero-image { transform: none; }
  .button:hover,.sector-card:hover,.download-card:hover,.industry-strip a:hover { transform: none; }
}
@media print {
  :root,html[data-theme="dark"] { --canvas: #fff; --ink: #000; --muted: #333; --paper: #fff; --surface: #fff; --line: #bbb; }
  .theme-toggle,.hero-selector,.reading-progress,.error-theme { display: none !important; }
  .hero.has-showcase .hero-content { padding: 25px 0; }
}