:root{
  --navy:#1B2A4A;
  --navy-deep:#0F1B30;
  --olive:#3A5C4E;
  --olive-light:#7DA293;
  --paper:#F4F0E8;
  --paper2:#EFEDE4;
  --ink:#1A1A18;
  --grey:#5A5A54;
  --grey2:#4A4A46;
  --line:#D9D4C8;
  --serif:'Tinos', Georgia, serif;
  --arabic:'Cairo', 'Arimo', sans-serif;
  --sans:'Arimo', Helvetica, Arial, sans-serif;
  --mono:'Spline Sans Mono', 'Courier New', monospace;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 44px;width:100%;}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--olive);margin:0 0 14px;
}
.eyebrow.on-navy{color:var(--olive-light);}
h1,h2,h3{font-family:var(--serif);color:var(--navy);margin:0;font-weight:400;}
p{margin:0 0 14px;}

/* ---- NAV (shared) ---- */
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;height:76px;display:flex;align-items:center;}
.topnav .wrap{display:flex;align-items:center;justify-content:space-between;max-width:none;padding:0 clamp(22px,3.2vw,52px);direction:ltr;}
.topnav.on-paper{background:rgba(244,240,232,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.topnav.on-navy{background:linear-gradient(to bottom, rgba(15,27,48,.65), rgba(15,27,48,.15));}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;}
.brand svg{width:36px;height:auto;display:block;}
.topnav.on-paper .mark-path{fill:#1B2A4A;}
.topnav.on-paper .mark-accent{fill:#3A5C4E;}
.topnav.on-navy .mark-path{fill:#F4F0E8;}
.topnav.on-navy .mark-accent{fill:#7DA293;}
.brand-text{font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:.14em;line-height:1;display:inline-block;}
.topnav.on-paper .brand-text{color:var(--navy);}
.topnav.on-navy .brand-text{color:var(--paper);}
nav.links{display:flex;align-items:center;gap:28px;direction:ltr;}
.nav-link-group{display:flex;align-items:center;gap:36px;}
nav.links a{
  position:relative;font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:6px 0;transition:color .2s ease;
  display:inline-flex;align-items:center;line-height:1;
}
nav.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;transition:right .25s ease;}
nav.links a:hover::after,nav.links a.active::after{right:0;}
.topnav.on-paper nav.links a{color:var(--grey2);}
.topnav.on-paper nav.links a:hover,.topnav.on-paper nav.links a.active{color:var(--olive);}
.topnav.on-paper nav.links a::after{background:var(--olive);}
.topnav.on-navy nav.links a{color:rgba(244,240,232,.82);}
.topnav.on-navy nav.links a:hover,.topnav.on-navy nav.links a.active{color:var(--paper);}
.topnav.on-navy nav.links a::after{background:var(--olive-light);}
nav.links a.cta{padding:10px 18px;border-radius:2px;letter-spacing:.08em;white-space:nowrap;}
nav.links a.cta::after{display:none;}
.topnav.on-paper nav.links a.cta{background:var(--navy);color:var(--paper);}
.topnav.on-paper nav.links a.cta:hover{background:var(--navy-deep);}
.topnav.on-navy nav.links a.cta{background:var(--paper);color:var(--navy);}
.topnav.on-navy nav.links a.cta:hover{background:var(--olive-light);}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.menu-btn span{display:block;width:22px;height:2px;margin:5px 0;}
.topnav.on-paper .menu-btn span{background:var(--navy);}
.topnav.on-navy .menu-btn span{background:var(--paper);}

/* ---- LANGUAGE TOGGLE ---- */
.lang-toggle{
  display:inline-flex;align-items:center;line-height:1;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;font-weight:600;cursor:pointer;
  border-radius:2px;padding:6px 11px;margin-inline-start:4px;background:none;transition:color .2s ease,border-color .2s ease;
}
.topnav.on-paper .lang-toggle{border:1px solid var(--navy);color:var(--navy);}
.topnav.on-paper .lang-toggle:hover{background:var(--navy);color:var(--paper);}
.topnav.on-navy .lang-toggle{border:1px solid rgba(244,240,232,.5);color:var(--paper);}
.topnav.on-navy .lang-toggle:hover{background:var(--paper);color:var(--navy);}

/* ---- RTL / ARABIC ---- */
/* Cairo used for all Arabic content site-wide, in place of the
   Latin serif/sans/mono set (chosen over the brand kit's Noto Naskh
   Arabic for a bolder, more modern geometric feel). */
html[dir="rtl"] body{font-family:var(--arabic);}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .big{font-family:var(--arabic);font-weight:700;}
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .num,
html[dir="rtl"] .scope-label,
html[dir="rtl"] .hero-tag,
html[dir="rtl"] .site-footer-line,
html[dir="rtl"] .steps-line,
html[dir="rtl"] .contact-card label,
html[dir="rtl"] .send-btn,
html[dir="rtl"] nav.links a{
  font-family:var(--arabic);font-weight:600;letter-spacing:0;
}
html[dir="rtl"] .contact-card input,
html[dir="rtl"] .contact-card textarea{
  font-family:var(--arabic);font-size:15px;
}
/* Cairo reads visually smaller than the Latin mono/sans set at equal
   px, so bump these contact-form sizes in Arabic to match the English
   footprint. */
html[dir="rtl"] .contact-card label{font-size:12px;}
html[dir="rtl"] .send-btn{font-size:14px;}
html[dir="rtl"] .alt-note{font-family:var(--arabic);font-size:14px;}
/* Lighter weight + retained letter-spacing than the general Arabic
   swap above, so this small label doesn't visually jump in size/weight
   against the English "Scroll" mono label when the language toggles. */
html[dir="rtl"] .scroll-cue .label{
  font-family:var(--arabic);font-weight:700;font-size:15px;letter-spacing:0;
}
/* Logo stays pinned left, language toggle stays pinned right (both
   forced via direction:ltr above); only the link order inside the
   group flips so Home lands nearest the language button. */
html[dir="rtl"] .nav-link-group{flex-direction:row-reverse;}
/* Home hero content (logo, English headline, Kuwait tag) is always
   English/Latin regardless of the language toggle, so it must be
   excluded from the Arabic font swap above. #home-scoped selectors
   out-specificity the html[dir="rtl"] rules and win either way. */
#home .hero-name-en{font-family:var(--serif);font-weight:700;}
#home .hero-tag{font-family:var(--mono);font-weight:400;letter-spacing:.22em;}
#home .scroll-cue .label{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.3em;}
html[dir="rtl"] .eyebrow{
  font-size:14px;
}
html[dir="rtl"] .scope-list li::before{content:"–";left:auto;right:0;}
html[dir="rtl"] .scope-list li{padding-left:0;padding-right:12px;}
html[dir="rtl"] .not-line b,
html[dir="rtl"] .serve-line b{margin-inline-end:4px;}

/* ---- LANDSCAPE PAGE FRAME ---- */
.page{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:120px 0 60px;
  position:relative;
}
.page.on-navy{background:var(--navy);color:var(--paper);overflow:hidden;}
.page.on-navy::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 900px 600px at 12% 15%, rgba(125,162,147,.14), transparent 60%),
    radial-gradient(ellipse 1000px 700px at 92% 90%, rgba(58,92,78,.22), transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 45%, var(--navy) 100%);
}
.page.on-navy::after{
  content:"";position:absolute;z-index:0;pointer-events:none;right:-14%;top:-10%;width:70%;height:120%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512.93 554.84'%3E%3Cpath fill='%23F4F0E8' d='M75.96,460.74l340.59.23v-97.06c3.48-.91,6.41-.9,9.82.05v106.95s-360.19-.18-360.19-.18l.02-418.86h360.03s-.06,104.76-.06,104.76c-3.18,1-6.2,1.04-9.68.12l-.06-95.08-340.63.12.16,398.95Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.035;
}
.page > .wrap{position:relative;z-index:1;}
.page h1{font-size:clamp(30px,3.6vw,44px);margin-bottom:16px;}
.page.on-navy h1{color:var(--paper);}
.lead{font-size:16px;color:var(--grey);max-width:680px;}
.page.on-navy .lead{color:#C9CBD6;}

.site-footer-line{
  position:absolute;bottom:20px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7C889C;
}
.page:not(.on-navy) .site-footer-line{color:#A9A499;}

/* ---- SCROLL CUE (shared) ---- */
.scroll-cue{
  position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;
}
.scroll-cue .label{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;line-height:1;}
.scroll-cue .chevron{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);animation:scrollBounce 1.7s ease-in-out infinite;}
@keyframes scrollBounce{0%,100%{margin-top:0;opacity:.4;}50%{margin-top:8px;opacity:1;}}
.page.on-navy .scroll-cue{color:rgba(244,240,232,.72);}
.page.on-navy .scroll-cue:hover{color:var(--paper);}
.page:not(.on-navy) .scroll-cue{color:var(--grey);}
.page:not(.on-navy) .scroll-cue:hover{color:var(--olive);}

@media (max-width:900px){
  .page{min-height:auto;padding:110px 0 70px;}
  .scroll-cue{display:none;}
  nav.links{position:fixed;inset:76px 0 0 0;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:30px 40px;gap:24px;display:none;}
  .nav-link-group{flex-direction:column;align-items:flex-start;gap:24px;}
  html[dir="rtl"] .nav-link-group{flex-direction:column;}
  .topnav.on-paper nav.links{background:var(--paper);}
  .topnav.on-navy nav.links{background:var(--navy-deep);}
  nav.links.open{display:flex;}
  .menu-btn{display:block;}
  .wrap{padding:0 26px;}
}