@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;
  color: #173d33;
  background: #fbfcf8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #173d33;
  --green: #247754;
  --green-dark: #104b37;
  --green-deep: #0c382b;
  --mint: #eaf3e8;
  --lime: #d5ebad;
  --paper: #fbfcf8;
  --paper-green: #f3f7ef;
  --muted: #65736b;
  --line: #e3e9e1;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }
body, button, input, textarea { font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif; }
a { color: inherit; text-decoration: none; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
::selection { background: #d4e9b2; color: var(--green-deep); }
.site-shell { overflow: clip; }
.section-wrap { width: min(1160px, calc(100% - 56px)); margin-inline: auto; }
.section { padding-block: 104px; }

.site-header { height: 78px; position: sticky; z-index: 50; top: 0; background: rgb(251 252 248 / 91%); border-bottom: 1px solid rgb(224 231 222 / 76%); backdrop-filter: blur(16px); }
.nav-wrap { width: min(1240px, calc(100% - 48px)); height: 100%; display: flex; align-items: center; justify-content: space-between; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 20px/1 "Manrope", sans-serif; letter-spacing: -1px; color: var(--green-deep); white-space: nowrap; }
.brand-dot { color: #89b753; }
.brand-symbol { display: inline-flex; width: 32px; height: 32px; border-radius: 11px 11px 11px 4px; background: var(--green); position: relative; transform: rotate(-4deg); align-items: center; justify-content: center; }
.brand-symbol::before, .brand-symbol::after, .brand-symbol span { content: ""; position: absolute; width: 12px; height: 2px; border-radius: 4px; background: #eff8e7; transform: rotate(-42deg); }
.brand-symbol::before { top: 11px; right: 8px; width: 10px; }
.brand-symbol span { top: 16px; right: 10px; width: 14px; }
.brand-symbol::after { top: 21px; right: 14px; width: 9px; }
.main-nav { display: flex; align-items: center; gap: 27px; }
.nav-link { position: relative; padding-block: 10px; font-size: 13px; font-weight: 500; color: #65716a; transition: color .2s ease; }
.nav-link::after { content: ""; position: absolute; right: 0; bottom: 3px; width: 0; height: 2px; border-radius: 2px; background: #78a946; transition: width .22s ease; }
.nav-link:hover, .nav-link.active { color: var(--green-dark); }
.nav-link.active::after, .nav-link:hover::after { width: 17px; }
.nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; font-size: 13px; font-weight: 600; border-radius: 999px; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.nav-cta { padding: 12px 17px; color: #fff; background: var(--green-dark); }
.nav-cta:hover, .button-primary:hover { background: #0b5a3e; box-shadow: 0 8px 22px rgb(16 75 55 / 16%); transform: translateY(-2px); }
.menu-toggle { display: none; border: 1px solid var(--line); background: white; border-radius: 12px; width: 42px; height: 42px; align-items: center; justify-content: center; }

.hero { min-height: 630px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 42px; position: relative; padding-top: 74px; padding-bottom: 92px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--green); font-size: 12px; font-weight: 600; letter-spacing: .1px; }
.eyebrow { background: #edf5e8; border: 1px solid #e3efdc; border-radius: 999px; padding: 8px 13px; margin-bottom: 24px; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #78aa50; box-shadow: 0 0 0 4px #dcecca; }
.hero-title { max-width: 620px; margin: 0; font-size: clamp(42px, 5.25vw, 68px); line-height: 1.28; font-weight: 600; letter-spacing: -2.2px; }
.hero-title span { color: #5b914c; }
.hero-text { max-width: 500px; margin: 23px 0 28px; font-size: 15px; line-height: 2; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 23px; }
.button { min-height: 48px; padding: 0 21px; }
.button-primary { color: white; background: var(--green-dark); box-shadow: 0 5px 13px rgb(16 75 55 / 9%); }
.button-text { color: var(--ink); padding-inline: 2px; }
.button-text:hover { color: var(--green); transform: translateX(-3px); }
.trust-row { display: flex; align-items: center; gap: 15px; margin-top: 32px; color: #5e6b62; font-size: 11px; }
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row svg { color: #65964b; }
.trust-row i { width: 3px; height: 3px; border-radius: 50%; background: #b9c5b6; }
.hero-art { position: relative; min-height: 445px; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; z-index: -2; width: 370px; height: 370px; border-radius: 50%; background: radial-gradient(circle, #e2efd5 0%, #eef4e9 48%, transparent 70%); }
.art-orbit { position: absolute; z-index: -1; border: 1px solid #dfead7; border-radius: 50%; transform: rotate(-24deg); }
.orbit-one { width: 455px; height: 295px; }
.orbit-two { width: 410px; height: 255px; transform: rotate(38deg); border-color: #e5ebdf; }
.art-window { position: relative; width: min(390px, 88%); overflow: hidden; border-radius: 17px; background: #fff; box-shadow: 0 28px 75px rgb(34 69 48 / 14%), 0 2px 8px rgb(34 69 48 / 6%); transform: rotate(-2deg); animation: float-window 7s ease-in-out infinite; }
.window-top { height: 48px; display: flex; align-items: center; justify-content: space-between; padding-inline: 17px; color: #78837a; border-bottom: 1px solid #edf0e9; font-size: 10px; }
.window-dots { display: flex; gap: 4px; direction: ltr; }
.window-dots i { width: 5px; height: 5px; border-radius: 50%; background: #d7dfd5; }
.window-dots i:first-child { background: #b8d69c; }
.window-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 99px; color: #488353; background: #eff6ea; font-size: 9px; }
.window-chip span { width: 5px; height: 5px; border-radius: 50%; background: #78a95c; }
.window-content { padding: 29px 31px 22px; background: linear-gradient(137deg, #fff 0%, #fbfcf8 63%, #f3f8ed 100%); }
.window-kicker { display: flex; align-items: center; gap: 7px; color: #70806f; font-size: 10px; }
.window-kicker svg { color: #86ae5c; }
.window-headline { margin-top: 17px; color: #244839; font-size: 40px; font-weight: 500; line-height: 1.35; letter-spacing: -.8px; }
.window-headline span { color: #5c924e; }
.window-line { width: 49px; height: 2px; margin-block: 20px 14px; border-radius: 3px; background: #a5c879; }
.window-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #748078; font-size: 10px; }
.window-arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #eaf2e3; color: #477449; }
.float-note { position: absolute; display: flex; align-items: center; gap: 10px; min-width: 143px; padding: 11px 13px; border: 1px solid #eef1e9; border-radius: 13px; background: #fff; box-shadow: 0 13px 38px rgb(49 73 51 / 11%); animation: float-note 6s ease-in-out infinite; }
.float-note b, .float-note small { display: block; }
.float-note b { font-size: 11px; font-weight: 600; }
.float-note small { margin-top: 3px; color: #889188; font-size: 9px; }
.note-icon { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; color: #4d8151; background: #edf5e7; }
.note-icon-light { color: #708e40; background: #f3f6e9; }
.note-top { top: 71px; right: 1px; }
.note-bottom { bottom: 69px; left: -7px; animation-delay: -2.5s; }
.art-spark { position: absolute; z-index: 2; color: #92b969; }
.spark-a { top: 70px; left: 83px; font-size: 21px; animation: sparkle 4s ease-in-out infinite; }
.spark-b { right: 55px; bottom: 89px; color: #afc987; font-size: 17px; animation: sparkle 5s ease-in-out infinite reverse; }
.art-caption { position: absolute; bottom: 13px; right: 26px; display: flex; align-items: center; gap: 8px; color: #738072; font-size: 10px; }
.art-caption span { color: #80a855; font-size: 16px; }
.scroll-cue { position: absolute; bottom: 24px; right: 0; display: inline-flex; align-items: center; gap: 9px; color: #8b968b; font-size: 10px; }
.scroll-cue span { width: 19px; height: 29px; border: 1px solid #bac8b6; border-radius: 10px; position: relative; }
.scroll-cue span::after { content: ""; position: absolute; top: 5px; left: 7px; width: 3px; height: 5px; background: #779b5b; border-radius: 3px; animation: scroll-tick 1.4s ease-in-out infinite; }

.principles-band { border-block: 1px solid #e6ece3; background: #f5f8f2; }
.principles-inner { width: min(1160px, calc(100% - 56px)); min-height: 67px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.principles-inner span { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; color: #57685b; font-size: 11px; }
.principles-inner svg { color: #67924e; }
.principles-inner i { height: 15px; width: 1px; background: #dce5d8; }

.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 42px; }
.section-kicker { margin-bottom: 12px; }
.section-heading h2, .about-intro h2, .faq-intro h2, .contact-copy h2 { margin: 0; color: var(--ink); font-size: clamp(34px, 4.1vw, 49px); line-height: 1.43; font-weight: 600; letter-spacing: -1.2px; }
.heading-accent { color: #5f914c; }
.section-heading > p { width: min(405px, 42%); margin: 0 0 7px; color: var(--muted); font-size: 13px; line-height: 2; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.service-card { min-height: 221px; padding: 21px 22px 18px; position: relative; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.service-card:hover { transform: translateY(-5px); border-color: #c8dcc0; box-shadow: 0 14px 31px rgb(37 69 44 / 7%); }
.service-card-top { display: flex; justify-content: space-between; align-items: center; }
.service-icon { display: grid; place-items: center; width: 40px; height: 40px; color: #4e8053; background: #eff5ea; border-radius: 12px; }
.card-number { color: #a2aea1; font: 500 10px "Manrope", sans-serif; }
.service-card h3 { margin: 17px 0 6px; font-size: 15px; font-weight: 600; }
.service-card p { max-width: 300px; margin: 0; color: #748078; font-size: 11px; line-height: 1.95; }
.service-arrow { position: absolute; bottom: 18px; left: 19px; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #527d4d; background: #f3f7ef; transition: color .2s, background .2s, transform .2s; }
.service-arrow:hover { color: #fff; background: var(--green); transform: translate(-2px, -2px); }
.section-footnote { display: flex; align-items: center; gap: 7px; margin: 22px 0 0; color: #899389; font-size: 10px; }
.section-footnote span { color: #83a95b; font-size: 16px; }

.work-section { background: #f4f7f1; border-block: 1px solid #e9eee6; }
.work-inner { padding-top: 92px; padding-bottom: 82px; }
.work-inner .section-heading { margin-bottom: 34px; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.project-card { min-height: 248px; padding: 20px; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: 14px; transition: transform .3s ease, box-shadow .3s ease; }
.project-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgb(40 68 45 / 12%); }
.project-mint { background: #e4efe4; color: #244937; }
.project-lime { background: #eaf0d9; color: #35472d; }
.project-dark { background: #193f33; color: #f5f8f0; }
.project-card-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.project-tag { padding: 5px 10px; border: 1px solid rgb(102 128 92 / 19%); border-radius: 99px; font-size: 9px; }
.project-out { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(255 255 255 / 42%); }
.project-dark .project-out { background: rgb(255 255 255 / 11%); }
.project-mark { position: absolute; top: 50px; left: 27px; color: rgb(75 111 76 / 10%); font: 800 108px/1 "Manrope", sans-serif; transform: rotate(-9deg); transition: transform .4s ease; }
.project-card:hover .project-mark { transform: rotate(0deg) scale(1.07); }
.project-info { position: relative; z-index: 1; }
.project-info h3 { margin: 0 0 7px; font: 700 19px "Manrope", "IBM Plex Sans Arabic", sans-serif; }
.project-info p { max-width: 230px; margin: 0; color: inherit; opacity: .72; font-size: 11px; }
.work-quote { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 37px; color: #627064; text-align: center; }
.work-quote > span:first-child { color: #8bab6b; font: 500 42px/1 Georgia, serif; }
.work-quote p { margin: 0; font-size: 12px; }
.work-quote > span:last-child { color: #8bab6b; font-size: 15px; }

.about-section { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: center; }
.about-intro { max-width: 440px; }
.about-intro h2 { margin-bottom: 17px; }
.about-intro > p { margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 2.1; }
.inline-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--green); font-size: 12px; font-weight: 600; transition: gap .2s; }
.inline-link:hover { gap: 13px; }
.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.value-card { min-height: 145px; padding: 18px 19px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.value-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: #568357; background: #eff5ea; }
.value-card h3 { margin: 12px 0 4px; font-size: 13px; font-weight: 600; }
.value-card p { margin: 0; color: #78847a; font-size: 10px; }
.values-note { min-height: 93px; grid-column: span 2; display: flex; align-items: center; gap: 15px; padding: 13px 20px; border-radius: 13px; color: white; background: #1a4d39; }
.values-note-mark { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; color: #deedc4; background: rgb(255 255 255 / 11%); }
.values-note p { margin: 0; color: #d8e6d9; font-size: 11px; line-height: 1.8; }
.values-note b { color: #fff; font-size: 12px; }

.process-section { background: #f4f7f1; border-block: 1px solid #e9eee6; }
.process-section .section { padding-block: 94px 100px; }
.process-section .section-heading { margin-bottom: 50px; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.steps-grid::before { content: ""; position: absolute; top: 21px; right: 8%; left: 8%; height: 1px; border-top: 1px dashed #cbd8c5; }
.step-card { padding-inline: 4px 30px; position: relative; }
.step-number { display: inline-flex; align-items: center; gap: 12px; padding: 0 0 15px; color: #5c894e; font: 600 12px "Manrope", sans-serif; }
.step-number i { position: absolute; top: 6px; right: 44px; width: 8px; height: 8px; border: 2px solid #f4f7f1; border-radius: 50%; background: #78a95c; box-shadow: 0 0 0 1px #78a95c; }
.step-card h3 { margin: 9px 0 7px; font-size: 14px; font-weight: 600; }
.step-card p { max-width: 205px; margin: 0; color: #748078; font-size: 11px; line-height: 1.9; }

.cta-section { min-height: 300px; margin-block: 86px 92px; padding: 45px 58px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; overflow: hidden; border-radius: 21px; color: #fff; background: #154936; }
.cta-section::before { content: ""; position: absolute; width: 360px; height: 360px; top: -186px; left: 22%; border: 1px solid rgb(216 237 197 / 13%); border-radius: 50%; }
.cta-section::after { content: ""; position: absolute; width: 270px; height: 270px; top: -140px; left: calc(22% + 45px); border: 1px solid rgb(216 237 197 / 10%); border-radius: 50%; }
.cta-copy { position: relative; z-index: 1; }
.cta-copy .section-kicker { color: #c6dcae; }
.cta-copy h2 { margin: 3px 0 9px; font-size: clamp(27px, 3.3vw, 38px); font-weight: 500; line-height: 1.55; }
.cta-copy p { margin: 0; color: #d0dfd1; font-size: 12px; }
.button-light { position: relative; z-index: 1; flex: 0 0 auto; min-height: 48px; padding-inline: 20px; color: #184a36; background: #f5f8ee; }
.button-light:hover { background: #dcecc9; transform: translateY(-2px); box-shadow: 0 9px 22px rgb(0 0 0 / 12%); }
.cta-star { position: absolute; left: 55px; bottom: 33px; color: #a9c77d; font-size: 25px; }
.cta-pattern { position: absolute; left: 11%; bottom: -150px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgb(187 218 151 / 11%), transparent 67%); }

.faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 75px; padding-top: 7px; padding-bottom: 108px; }
.faq-intro h2 { margin-bottom: 12px; }
.faq-intro > p { max-width: 310px; color: var(--muted); font-size: 12px; line-height: 2; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 0; font-size: 13px; font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-toggle { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; color: #59814e; background: #eef4e8; border-radius: 50%; transition: transform .22s, background .22s; }
.faq-item[open] .faq-toggle { transform: rotate(180deg); background: #e1edd6; }
.faq-item > p { max-width: 550px; margin: -2px 30px 18px 0; color: #738076; font-size: 11px; line-height: 1.95; animation: answer-in .23s ease both; }

.contact-section { background: #f3f7f0; border-block: 1px solid #e8eee4; }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 80px; padding-block: 98px 102px; }
.contact-copy h2 { margin-bottom: 12px; }
.contact-copy > p { max-width: 365px; margin: 0; color: var(--muted); font-size: 12px; line-height: 2; }
.contact-points { display: grid; gap: 21px; margin-top: 35px; }
.contact-points > div { display: flex; align-items: center; gap: 12px; }
.contact-point-icon { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #e3ebde; border-radius: 12px; color: #528354; background: #fbfcf8; }
.contact-points b, .contact-points small { display: block; }
.contact-points b { margin-bottom: 3px; font-size: 11px; font-weight: 600; }
.contact-points small { color: #78847a; font-size: 10px; }
.contact-form { padding: 27px; border: 1px solid #e3eae0; border-radius: 16px; background: #fff; box-shadow: 0 13px 36px rgb(44 74 49 / 4%); }
.form-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.form-heading h3 { margin: 0; font-size: 15px; font-weight: 600; }
.form-heading > span { color: #939d93; font-size: 9px; }
.contact-form label { display: grid; gap: 7px; margin-bottom: 14px; color: #526257; font-size: 10px; font-weight: 500; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form input, .contact-form textarea { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #e5eae3; outline: none; border-radius: 9px; color: var(--ink); background: #fdfefb; font-size: 11px; font-weight: 400; transition: border-color .2s, box-shadow .2s; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #a9c897; box-shadow: 0 0 0 3px #eff5e9; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #abb4ab; }
.contact-form textarea { min-height: 105px; resize: vertical; line-height: 1.8; }
.form-hint { margin: -5px 0 15px; color: #98a197; font-size: 9px; }
.form-submit { min-height: 43px; padding-inline: 17px; font-size: 11px; }
.form-demo-note { margin: 14px 0 0; color: #9ba59a; font-size: 9px; line-height: 1.8; }
.form-message { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; color: #315f3a; background: #eff7e9; font-size: 10px; line-height: 1.8; }

.site-footer { color: #e8f0e7; background: #123d2f; }
.footer-main { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; padding-block: 57px 49px; }
.site-footer .brand { color: #f4f7ed; }
.site-footer .brand-symbol { color: white; background: #659454; }
.footer-brand-col > p { max-width: 330px; margin: 20px 0 15px; color: #c1d2c1; font-size: 10px; line-height: 2; }
.footer-contact-link { display: inline-flex; align-items: center; gap: 8px; color: #d4e5c3; font-size: 10px; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-links > div { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-links h3 { margin: 2px 0 5px; color: white; font-size: 11px; font-weight: 600; }
.footer-links a { color: #c0d0c1; font-size: 9px; transition: color .2s; }
.footer-links a:hover { color: #d7e9c4; }
.footer-bottom { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgb(229 239 225 / 14%); color: #b9cbb9; font-size: 9px; }
.footer-leaf { color: #a8c87c; font-size: 14px; vertical-align: -1px; }
.back-to-top { position: fixed; z-index: 30; bottom: 22px; left: 22px; display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #e0e8dd; border-radius: 50%; color: #47774b; background: #fff; box-shadow: 0 6px 20px rgb(30 60 36 / 9%); transition: transform .2s, background .2s; }
.back-to-top:hover { transform: translateY(-3px); background: #f1f7eb; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .72s cubic-bezier(.2,.65,.3,1), transform .72s cubic-bezier(.2,.65,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .18s; }
.reveal-delay-3 { transition-delay: .26s; }
@keyframes float-window { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(-1deg); } }
@keyframes float-note { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sparkle { 0%, 100% { opacity: .65; transform: scale(.88) rotate(0); } 50% { opacity: 1; transform: scale(1.12) rotate(28deg); } }
@keyframes scroll-tick { 0%, 100% { opacity: .45; transform: translateY(0); } 60% { opacity: 1; transform: translateY(6px); } }
@keyframes answer-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .section-wrap { width: min(100% - 42px, 760px); }
  .nav-wrap { width: calc(100% - 40px); }
  .main-nav { gap: 16px; }
  .nav-link { font-size: 11px; }
  .nav-cta { padding-inline: 13px; font-size: 11px; }
  .hero { gap: 20px; min-height: 585px; }
  .hero-title { font-size: clamp(39px, 6vw, 56px); }
  .hero-art { transform: scale(.9); }
  .principles-inner { width: calc(100% - 42px); flex-wrap: wrap; justify-content: center; padding-block: 18px; row-gap: 13px; }
  .principles-inner i { display: none; }
  .principles-inner span { margin-inline: 12px; }
  .about-section { gap: 38px; }
  .contact-grid { gap: 42px; }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 76px; }
  .section-wrap { width: calc(100% - 38px); }
  .section { padding-block: 72px; }
  .site-header { height: 68px; }
  .nav-wrap { width: calc(100% - 36px); }
  .brand { font-size: 19px; }
  .menu-toggle { display: flex; }
  .main-nav { position: absolute; top: 68px; right: 0; left: 0; display: none; align-items: stretch; gap: 0; padding: 9px 20px 18px; border-bottom: 1px solid var(--line); background: #fbfcf8; box-shadow: 0 16px 24px rgb(33 63 40 / 7%); }
  .main-nav.is-open { display: flex; flex-direction: column; }
  .nav-link { padding: 12px 4px; font-size: 13px; }
  .nav-link::after { bottom: 5px; }
  .nav-cta { justify-content: center; margin-top: 9px; padding-block: 13px; font-size: 12px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding-top: 55px; padding-bottom: 72px; }
  .hero-title { max-width: 520px; font-size: clamp(40px, 11vw, 56px); line-height: 1.3; letter-spacing: -1.3px; }
  .hero-text { margin: 18px 0 23px; font-size: 13px; line-height: 1.95; }
  .hero-actions { gap: 17px; }
  .button { min-height: 45px; padding-inline: 16px; font-size: 11px; }
  .trust-row { gap: 10px; margin-top: 25px; font-size: 9px; }
  .hero-art { min-height: 350px; margin: -7px -16px 0; transform: scale(.9); transform-origin: center; }
  .hero-art::before { width: 300px; height: 300px; }
  .orbit-one { width: 365px; height: 240px; }
  .orbit-two { width: 340px; height: 220px; }
  .art-window { width: min(340px, 83%); }
  .window-content { padding: 25px 25px 19px; }
  .window-headline { font-size: 35px; }
  .note-top { top: 29px; right: 11px; }
  .note-bottom { bottom: 42px; left: 1px; }
  .float-note { min-width: 127px; padding: 9px 10px; }
  .art-caption { bottom: 0; right: 24px; }
  .spark-a { top: 35px; left: 49px; }
  .scroll-cue { bottom: 8px; right: 1px; }
  .principles-inner { width: calc(100% - 32px); justify-content: flex-start; gap: 11px 15px; }
  .principles-inner span { margin: 0; font-size: 9px; }
  .principles-inner svg { width: 14px; }
  .section-heading { display: block; margin-bottom: 28px; }
  .section-heading h2, .about-intro h2, .faq-intro h2, .contact-copy h2 { font-size: 36px; line-height: 1.4; }
  .section-heading > p { width: auto; max-width: 480px; margin-top: 12px; font-size: 12px; }
  .desktop-break { display: none; }
  .services-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .service-card { min-height: 220px; padding: 16px 14px 17px; }
  .service-icon { width: 35px; height: 35px; }
  .service-card h3 { margin-top: 14px; font-size: 12px; }
  .service-card p { font-size: 10px; line-height: 1.85; }
  .service-arrow { bottom: 12px; left: 12px; width: 26px; height: 26px; }
  .section-footnote { align-items: flex-start; line-height: 1.7; }
  .work-inner { padding-block: 72px 61px; }
  .project-grid { grid-template-columns: 1fr; gap: 10px; }
  .project-card { min-height: 190px; padding: 16px 18px; }
  .project-mark { top: 37px; left: 27px; font-size: 87px; }
  .work-quote { gap: 8px; margin-top: 28px; }
  .work-quote p { font-size: 10px; line-height: 1.9; }
  .about-section { display: block; }
  .about-intro { margin-bottom: 29px; }
  .about-intro > p { font-size: 11px; }
  .values-grid { gap: 9px; }
  .value-card { min-height: 132px; padding: 14px; }
  .value-card h3 { font-size: 12px; }
  .value-card p { font-size: 9px; line-height: 1.8; }
  .values-note { min-height: 82px; padding-inline: 13px; }
  .process-section .section { padding-block: 72px; }
  .process-section .section-heading { margin-bottom: 32px; }
  .steps-grid { grid-template-columns: 1fr 1fr; gap: 27px 14px; }
  .steps-grid::before { display: none; }
  .step-card { padding-inline: 0; }
  .step-number { padding-bottom: 5px; }
  .step-number i { right: 43px; }
  .step-card h3 { font-size: 13px; }
  .step-card p { font-size: 10px; }
  .cta-section { width: calc(100% - 30px); min-height: 295px; margin-block: 56px 69px; padding: 30px 25px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; }
  .cta-copy h2 { font-size: 29px; }
  .cta-copy p { max-width: 280px; font-size: 10px; line-height: 1.9; }
  .cta-star { left: 25px; bottom: 20px; }
  .faq-section { display: block; padding-top: 0; padding-bottom: 74px; }
  .faq-intro { margin-bottom: 28px; }
  .faq-intro > p { font-size: 11px; }
  .faq-item summary { padding-block: 15px; font-size: 11px; }
  .faq-item > p { margin-right: 0; font-size: 10px; }
  .contact-grid { display: block; padding-block: 70px; }
  .contact-copy { margin-bottom: 28px; }
  .contact-copy > p { font-size: 11px; }
  .contact-points { gap: 16px; margin-top: 23px; }
  .contact-points b { font-size: 10px; }
  .contact-points small { font-size: 9px; }
  .contact-form { padding: 18px 15px; }
  .form-heading { align-items: flex-start; }
  .form-heading h3 { font-size: 13px; }
  .form-heading > span { font-size: 8px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-main { display: block; padding-block: 43px 34px; }
  .footer-brand-col > p { font-size: 9px; }
  .footer-links { grid-template-columns: 1fr 1fr; gap: 25px 20px; margin-top: 32px; }
  .footer-links h3 { font-size: 10px; }
  .footer-links a { font-size: 9px; }
  .footer-bottom { min-height: 66px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 5px; font-size: 8px; }
  .back-to-top { width: 35px; height: 35px; bottom: 15px; left: 14px; }
}
@media (max-width: 370px) {
  .section-wrap { width: calc(100% - 30px); }
  .hero-title { font-size: 37px; }
  .trust-row { flex-wrap: wrap; }
  .trust-row i { display: none; }
  .service-card { min-height: 239px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Aqaltaha brand identity: turquoise, orange, ink and white. */
:root {
  --ink: #171d20;
  --green: #19adbd;
  --green-dark: #078e9f;
  --green-deep: #151b1e;
  --mint: #e8f8fa;
  --lime: #ffe3af;
  --paper: #ffffff;
  --paper-green: #f5fbfc;
  --muted: #657177;
  --line: #e4eaec;
}
::selection { background: #bdebf0; color: #102428; }
.site-header { background: rgb(255 255 255 / 94%); border-bottom-color: rgb(220 232 235 / 88%); }
.brand { color: var(--ink); }
.brand-logo { display: block; width: 132px; height: 66px; object-fit: contain; }
.brand-dot { color: #eda21f; }
.brand-symbol, .brand-symbol::before, .brand-symbol::after, .brand-symbol span { display: none; }
.nav-link::after { background: #efa51f; }
.nav-link:hover, .nav-link.active { color: #078e9f; }
.nav-cta { background: #16aebd; }
.nav-cta:hover, .button-primary:hover { background: #078e9f; }
.hero { background-image: radial-gradient(ellipse at 78% 43%, rgb(32 181 194 / 6%), transparent 33%); }
.eyebrow, .section-kicker { color: #078e9f; }
.eyebrow { background: #eefafb; border-color: #d8f1f3; }
.eyebrow-dot { background: #1bb4c1; box-shadow: 0 0 0 4px #d8f1f3; }
.hero-title span, .heading-accent, .window-headline span { color: #079daf; }
.button-primary { background: #0ca3b2; box-shadow: 0 5px 13px rgb(10 157 174 / 16%); }
.button-text:hover, .inline-link { color: #078e9f; }
.trust-row svg { color: #0b9dad; }
.hero-art::before { background: radial-gradient(circle, #ddf5f7 0%, #eefafb 48%, transparent 70%); }
.art-orbit { border-color: #cbeef1; }
.orbit-two { border-color: #f7e8ce; }
.spark-a, .spark-b, .art-caption span, .section-footnote span { color: #efa51f; }
.window-chip { color: #078e9f; background: #e9f8f9; }
.window-chip span { background: #13adba; }
.window-kicker svg { color: #efa51f; }
.window-headline { color: #1b282c; }
.window-line { background: #efa51f; }
.window-arrow { color: #078e9f; background: #e6f7f8; }
.note-icon { color: #078e9f; background: #e9f8f9; }
.note-icon-light { color: #bf7810; background: #fff3db; }
.scroll-cue span { border-color: #a7dfe4; }
.scroll-cue span::after { background: #16aebd; }
.principles-band, .work-section, .process-section { border-color: #e5eff0; background: #f5fbfc; }
.principles-inner svg { color: #0da5b4; }
.principles-inner span:nth-of-type(even) svg { color: #e9a020; }
.service-icon, .value-icon { color: #078e9f; background: #e8f8fa; }
.service-card:hover { border-color: #a9e1e6; box-shadow: 0 14px 31px rgb(17 153 169 / 8%); }
.service-arrow { color: #078e9f; background: #edf9fa; }
.service-arrow:hover { color: #fff; background: #0ca3b2; }
.card-number { color: #e39a1c; }
.project-mint { background: #e1f5f7; color: #173e43; }
.project-lime { background: #fff0d5; color: #4c3b20; }
.project-dark { background: #1c272b; color: #f5fbfc; }
.project-mark { color: rgb(8 142 159 / 14%); }
.project-lime .project-mark { color: rgb(226 153 28 / 16%); }
.work-quote > span { color: #eca11e; }
.values-note { background: #202a2e; }
.values-note-mark { color: #fff; background: #0e9dad; }
.process-section .section { background: transparent; }
.steps-grid::before { border-color: #b9e2e5; }
.step-number { color: #079daf; }
.step-number i { background: #17adba; box-shadow: 0 0 0 1px #17adba; }
.cta-section { color: #fff; background: #1b2529; }
.cta-section::before { border-color: rgb(24 180 193 / 22%); }
.cta-section::after { border-color: rgb(239 165 31 / 28%); }
.cta-copy .section-kicker { color: #63d3dc; }
.button-light { color: #25231e; background: #efa51f; }
.button-light:hover { background: #ffc34c; }
.cta-star { color: #efa51f; }
.faq-toggle { color: #078e9f; background: #e8f8fa; }
.faq-item[open] .faq-toggle { background: #d9f1f3; }
.contact-section { border-color: #e1eff0; background: #f5fbfc; }
.contact-point-icon { border-color: #d9edef; color: #078e9f; background: #fff; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #8bd2da; box-shadow: 0 0 0 3px #e8f8fa; }
.form-message { color: #175762; background: #e8f8fa; }
.site-footer { color: #e8f2f3; background: #151d20; }
.site-footer .brand { color: #fff; }
.site-footer .brand-symbol { display: none; }
.footer-brand-col .brand { display: inline-flex; padding: 5px 9px; border-radius: 12px; background: #fff; }
.footer-logo { display: block; width: 164px; height: 102px; object-fit: contain; }
.footer-contact-link { color: #f4bb50; }
.footer-links a:hover { color: #4dd0d9; }
.footer-leaf { color: #f2ad2d; }
.footer-bottom { border-top-color: rgb(229 239 241 / 16%); }
.back-to-top { color: #078e9f; border-color: #d8e9eb; }
.back-to-top:hover { background: #eefafb; }
.brand-hero-card { position: relative; z-index: 1; width: min(405px, 90%); padding: 20px 26px 16px; overflow: hidden; border: 1px solid #e5edef; border-radius: 20px; background: #fff; box-shadow: 0 24px 68px rgb(23 59 64 / 13%); transform: rotate(-1.5deg); animation: float-window 7s ease-in-out infinite; }
.brand-hero-card::before { content: ""; position: absolute; inset: auto -20px -38px 35%; height: 12px; background: #efa51f; border-radius: 50%; filter: blur(20px); opacity: .4; }
.brand-hero-kicker { display: inline-flex; padding: 6px 10px; border: 1px solid #d9eff1; border-radius: 999px; color: #078e9f; background: #f3fbfc; font-size: 10px; }
.brand-hero-logo { display: block; width: min(100%, 350px); height: auto; margin: 8px auto 6px; }
.brand-hero-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; border-top: 1px solid #eef1f1; color: #697479; font-size: 10px; }
.brand-hero-footer i { display: block; width: 27px; height: 4px; border-radius: 9px; background: #efa51f; }
.float-note { border-color: #e6edef; }
.art-caption { color: #697479; }
.footer-main .footer-brand-col > p { color: #c5d2d4; }
@media (max-width: 680px) {
  .brand-logo { width: 106px; height: 58px; }
  .brand-hero-card { width: min(355px, 87%); padding: 16px 20px 13px; }
  .footer-logo { width: 144px; height: 90px; }
}

/* Clearer section rhythm and icon contrast. */
.section { padding-block: 86px; }
.hero { min-height: 590px; padding-top: 58px; padding-bottom: 82px; }
.hero-art { overflow: visible; }
.brand-hero-card { width: min(390px, 84%); padding: 16px 22px 14px; border: 1px solid #dcebed; box-shadow: 0 24px 60px rgb(20 68 74 / 14%), 0 4px 12px rgb(20 68 74 / 6%); }
.brand-hero-kicker { color: #056f7b; border-color: #b9e8ec; background: #e7f7f9; font-weight: 700; }
.brand-hero-footer { color: #405258; font-weight: 600; }
.float-note { z-index: 5; border: 2px solid #ccebef; background: #fff; box-shadow: 0 12px 28px rgb(13 62 67 / 16%); }
.note-top { top: 48px; right: -15px; }
.note-bottom { bottom: 56px; left: -15px; }
.note-icon { color: #045c67; background: #caeff2; }
.note-icon-light { color: #794800; background: #ffe4b1; }
.spark-a, .spark-b { z-index: 3; }
.art-caption { font-weight: 600; }
.principles-band { border-color: #cdebee; background: #e7f7f8; }
.principles-inner span { color: #29474c; font-weight: 600; }
.principles-inner svg { color: #057c89; }
.principles-inner span:nth-of-type(even) svg { color: #c67d09; }
#services { width: 100%; max-width: none; margin: 0; padding-inline: max(24px, calc((100vw - 1160px) / 2)); background: #f0fafb; border-block: 1px solid #d9eef0; }
.service-card { border-color: #d8e9eb; box-shadow: 0 5px 15px rgb(20 63 68 / 3%); }
.service-card h3 { color: #172a2e; }
.service-card p { color: #4e6065; }
.service-icon { color: #075f69; background: #d9f2f4; border: 1px solid #bee7eb; }
.service-card:nth-child(3n + 2) .service-icon { color: #8b5600; background: #fff0d4; border-color: #f5ddb0; }
.service-arrow { color: #075f69; background: #e1f4f5; }
.section-footnote { color: #54656a; }
.work-section { color: #f3f8f9; background: #172328; border-color: #172328; }
.work-section .section-heading h2 { color: #f7fbfc; }
.work-section .section-heading > p { color: #c3d0d2; }
.work-section .section-kicker { color: #5ad1db; }
.work-quote { color: #d7e1e2; }
.work-quote > span:first-child, .work-quote > span:last-child { color: #f2ad2d; }
.project-mint { background: #daf3f5; color: #163c42; }
.project-lime { background: #ffefcf; color: #44351d; }
.project-dark { background: #27363b; color: #f8fbfc; border: 1px solid #435357; }
.project-tag { font-weight: 600; }
.about-section { background: #fff; }
.value-card { border-color: #dce8e9; box-shadow: 0 5px 16px rgb(20 63 68 / 3%); }
.value-icon { color: #075e68; background: #dff3f5; border: 1px solid #c6eaed; }
.value-card:nth-child(even) .value-icon { color: #895500; background: #fff0d4; border-color: #f4dfb8; }
.values-note { background: #172328; border-inline-start: 5px solid #efa51f; }
.process-section { background: #fff6e7; border-color: #f3e7ce; }
.process-section .section { background: transparent; }
.process-section .section-kicker { color: #a86100; }
.steps-grid::before { border-color: #e8c988; }
.step-number { color: #047e8b; }
.step-number i { background: #0ca8b7; box-shadow: 0 0 0 2px #fff6e7, 0 0 0 3px #0ca8b7; }
.step-card h3 { color: #1e2b2e; }
.step-card p { color: #536166; }
.cta-section { background: linear-gradient(115deg, #078e9f 0%, #13aaba 62%, #078e9f 100%); box-shadow: 0 20px 48px rgb(6 125 139 / 17%); }
.cta-section::before { border-color: rgb(255 255 255 / 22%); }
.cta-section::after { border-color: rgb(255 191 69 / 55%); }
.cta-copy .section-kicker { color: #d6f7f8; }
.button-light { color: #34240a; background: #ffbf45; box-shadow: 0 8px 21px rgb(14 61 65 / 18%); }
.button-light:hover { background: #ffd274; }
.contact-section { background: #edf9fa; border-color: #d9eef0; }
.contact-form { border-color: #cfe5e8; box-shadow: 0 16px 38px rgb(20 68 74 / 8%); }
.contact-form label { color: #354b50; }
.contact-form input, .contact-form textarea { border-color: #d6e6e8; background: #fff; }
.contact-point-icon { color: #075e68; background: #fff; border-color: #cbe8ea; box-shadow: 0 4px 10px rgb(14 74 80 / 6%); }
.contact-points > div:nth-child(even) .contact-point-icon { color: #895500; background: #fff3dd; border-color: #f5dfb5; }
.footer-links h3 { color: #fff; }
.footer-links a { color: #cfdbdd; }
.footer-bottom { color: #c5d2d4; }
@media (max-width: 680px) {
  .section { padding-block: 68px; }
  #services { padding-inline: 19px; }
  .brand-hero-card { width: min(340px, 86%); padding: 14px 17px 12px; }
  .note-top { top: 22px; right: 2px; }
  .note-bottom { bottom: 35px; left: 1px; }
  .float-note { min-width: 118px; padding: 8px 9px; }
  .note-icon { width: 30px; height: 30px; }
  .work-inner { padding-block: 65px 56px; }
  .process-section .section { padding-block: 68px; }
}

/* Dark concept inspired by the supplied reference; no logo image is used in the page. */
:root {
  --ink: #eef3fb;
  --green: #22bac5;
  --green-dark: #1596a2;
  --green-deep: #080e19;
  --mint: #122033;
  --lime: #f3aa28;
  --paper: #080e19;
  --paper-green: #0d1728;
  --muted: #a9b6c8;
  --line: #26364c;
  --background: #080e19;
  --foreground: #eef3fb;
}
html, body { background: #080e19; color: #eef3fb; }
body { background-image: radial-gradient(ellipse at 50% -20%, rgb(36 74 128 / 13%), transparent 55%); }
.site-shell { color: #eef3fb; background: #080e19; }
::selection { color: #fff; background: #117f8d; }
.site-header { background: rgb(8 14 25 / 94%); border-bottom: 1px solid #202d40; box-shadow: 0 8px 28px rgb(0 0 0 / 18%); backdrop-filter: blur(15px); }
.brand { gap: 0; color: #f4f7fc; font: 800 23px/1 "IBM Plex Sans Arabic", sans-serif; letter-spacing: 0; }
.brand span { margin-inline-start: 2px; color: #23bac5; }
.brand-logo, .footer-logo { display: none !important; }
.nav-link { color: #c2ccda; }
.nav-link::after { background: #f3aa28; }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-cta { color: #07111d; background: #23bac5; box-shadow: 0 7px 24px rgb(35 186 197 / 14%); }
.nav-cta:hover { color: #07111d; background: #45d0d9; }
.menu-toggle { color: #edf4fb; border-color: #34445c; background: #101b2c; }
.main-nav.is-open { background: #0b1422; border-color: #26364c; box-shadow: 0 18px 35px rgb(0 0 0 / 30%); }
.hero { color: #eef3fb; background: radial-gradient(ellipse at 78% 45%, rgb(28 99 157 / 12%), transparent 48%); }
.hero-title { color: #f5f7fb; }
.hero-title span, .heading-accent { color: #26bbc6; }
.hero-text { color: #aab6c7; }
.eyebrow { color: #9be8ed; background: #101e30; border-color: #253e57; }
.eyebrow-dot { background: #27bdc7; box-shadow: 0 0 0 4px rgb(39 189 199 / 17%); }
.button-primary { color: #07111c; background: #24bac5; box-shadow: 0 8px 26px rgb(27 160 174 / 23%); }
.button-primary:hover { color: #07111c; background: #54d3dc; }
.button-text { color: #e0e8f2; }
.button-text:hover, .inline-link { color: #45cbd3; }
.trust-row { color: #aab7c8; }
.trust-row svg { color: #efaa2d; }
.hero-art::before { background: radial-gradient(circle, rgb(25 76 119 / 28%) 0%, rgb(17 43 69 / 16%) 46%, transparent 70%); }
.art-orbit { border-color: rgb(103 142 187 / 16%); }
.orbit-two { border-color: rgb(235 170 65 / 16%); }
.spark-a, .spark-b, .art-caption span, .section-footnote span { color: #f3aa28; }
.art-caption { color: #98a9bd; }
.concept-card { position: relative; z-index: 2; width: min(410px, 89%); min-height: 330px; overflow: hidden; border: 1px solid #30425d; border-radius: 21px; color: #eef4fc; background: linear-gradient(145deg, #17243a 0%, #101b2e 62%, #0d1728 100%); box-shadow: 0 26px 65px rgb(0 0 0 / 34%), inset 0 1px 0 rgb(255 255 255 / 4%); transform: rotate(-2deg); animation: float-window 7s ease-in-out infinite; }
.concept-card::after { content: ""; position: absolute; width: 190px; height: 190px; left: -80px; bottom: -110px; border: 1px solid rgb(35 186 197 / 24%); border-radius: 50%; box-shadow: 0 0 0 18px rgb(35 186 197 / 4%), 0 0 0 38px rgb(35 186 197 / 3%); pointer-events: none; }
.concept-toolbar { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 18px; border-bottom: 1px solid #283850; color: #b9c7d8; font-size: 10px; }
.concept-dots { display: flex; gap: 5px; }
.concept-dots i { width: 6px; height: 6px; border-radius: 50%; background: #62728a; }
.concept-dots i:first-child { background: #e5a32b; }
.concept-dots i:last-child { background: #27bac5; }
.concept-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid #314665; border-radius: 999px; color: #d4deeb; background: #1a2c46; }
.concept-status i { width: 5px; height: 5px; border-radius: 50%; background: #27c0b5; box-shadow: 0 0 0 3px rgb(39 192 181 / 12%); }
.concept-mark { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; color: #e1e9f3; }
.concept-mark b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; color: #a8c4ff; background: #203658; font-size: 14px; }
.concept-body { padding: 23px 25px 20px; }
.concept-kicker { display: inline-flex; align-items: center; gap: 7px; color: #9db9e8; font-size: 11px; font-weight: 600; }
.concept-kicker svg { color: #f3aa28; }
.concept-body h3 { margin: 15px 0 8px; color: #f5f7fc; font-size: 29px; line-height: 1.35; }
.concept-body h3 span { color: #9dbaff; }
.concept-body p { margin: 0; color: #aab8ca; font-size: 11px; }
.concept-progress { display: grid; gap: 7px; margin-top: 22px; }
.concept-progress i { display: block; height: 6px; border-radius: 9px; background: #263750; }
.concept-progress i:first-child { width: 86%; background: linear-gradient(90deg, #334e78, #283b59); }
.concept-progress i:nth-child(2) { width: 68%; margin-right: 12%; }
.concept-progress i:last-child { width: 49%; margin-right: 31%; }
.concept-pills { display: flex; gap: 8px; margin-top: 18px; }
.concept-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #2c405d; border-radius: 9px; color: #cbd7e5; background: #142239; font-size: 10px; }
.concept-pills span:first-child svg { color: #27bac5; }
.concept-pills span:last-child svg { color: #f3aa28; }
.principles-band { color: #dce6f3; background: #0d1727; border-block: 1px solid #202f44; }
.principles-inner span { color: #c5d0df; }
.principles-inner svg { color: #48c6cf; }
.principles-inner span:nth-of-type(even) svg { color: #f0ab30; }
.section-heading h2, .about-intro h2, .contact-copy h2, .faq-heading h2 { color: #f2f6fb; }
.section-kicker { color: #55c9d1; }
.section-heading > p, .about-intro > p, .contact-copy > p { color: #aab6c7; }
#services { width: 100%; max-width: none; margin: 0; padding-inline: max(24px, calc((100vw - 1160px) / 2)); background: #0a1321; border-block: 1px solid #1d2c40; }
.service-card, .value-card { color: #e9f0f8; border: 1px solid #27374c; background: linear-gradient(145deg, #111d30, #0d1728); box-shadow: 0 12px 28px rgb(0 0 0 / 14%); }
.service-card:hover { border-color: #367587; background: linear-gradient(145deg, #14243a, #101b2d); box-shadow: 0 18px 36px rgb(0 0 0 / 25%); }
.service-card h3, .value-card h3, .step-card h3, .faq-question { color: #eef3fa; }
.service-card p, .value-card p, .step-card p { color: #a8b5c5; }
.service-icon, .value-icon { color: #67d2d9; border: 1px solid #31576c; background: #15283a; }
.service-card:nth-child(3n + 2) .service-icon, .value-card:nth-child(even) .value-icon { color: #f3bd61; border-color: #624b2b; background: #2b241a; }
.card-number { color: #f3aa28; }
.service-arrow { color: #62d0d8; background: #13293a; }
.service-arrow:hover { color: #07111c; background: #40c3ce; }
.section-footnote { color: #9faec1; }
.work-section { color: #eaf1f8; background: #101a2a; border-color: #25334a; }
.work-section .section-heading h2 { color: #f3f6fb; }
.work-section .section-heading > p { color: #aeb9c8; }
.work-section .section-kicker { color: #55cbd3; }
.project-mint, .project-lime, .project-dark { color: #e9f1fb; border: 1px solid #2b3b54; background: linear-gradient(145deg, #18263b, #111c2d); }
.project-lime { border-color: #59462c; background: linear-gradient(145deg, #282318, #1b1b20); }
.project-dark { border-color: #314661; background: linear-gradient(145deg, #18263b, #111a29); }
.project-tag { color: #9cb9e6; }
.project-mark { color: rgb(93 180 202 / 19%); }
.project-lime .project-mark { color: rgb(243 170 40 / 18%); }
.project-title, .project-name, .project-description { color: #edf3fb; }
.work-quote { color: #bdc9d8; }
.work-quote > span:first-child, .work-quote > span:last-child { color: #f0aa2d; }
.about-section { background: #080e19; border-block: 1px solid #1b293a; }
.values-note { color: #e8f1fb; background: #121f32; border: 1px solid #2a4058; border-inline-start: 4px solid #24bac5; }
.values-note p { color: #c2cfdf; }
.values-note-mark { color: #0b1523; background: #25bbc5; }
.process-section { color: #eef3fb; background: #0d1727; border-block: 1px solid #26354a; }
.process-section .section { background: transparent; }
.process-section .section-kicker { color: #f1b34b; }
.steps-grid::before { border-color: #334962; }
.step-number { color: #4dc7cf; }
.step-number i { background: #25b7c3; box-shadow: 0 0 0 2px #0d1727, 0 0 0 3px #25b7c3; }
.cta-section { color: #f4f7fb; background: linear-gradient(120deg, #101c30, #122843 55%, #101c30); border: 1px solid #2c4562; box-shadow: 0 18px 48px rgb(0 0 0 / 28%); }
.cta-section::before { border-color: rgb(82 146 215 / 24%); }
.cta-section::after { border-color: rgb(243 170 40 / 34%); }
.cta-copy .section-kicker { color: #65d0d7; }
.cta-copy h2 { color: #f4f7fb; }
.cta-copy p { color: #bac7d7; }
.button-light { color: #131a24; background: #f3aa28; box-shadow: 0 8px 22px rgb(0 0 0 / 24%); }
.button-light:hover { color: #101720; background: #ffc75a; }
.cta-star { color: #f3aa28; }
.faq-section { background: #080e19; }
.faq-item { border-color: #27364a; }
.faq-question { background: transparent; }
.faq-toggle { color: #66d3da; background: #14263a; }
.faq-item[open] .faq-toggle { color: #f3b343; background: #282319; }
.faq-item > p { color: #aab6c7; }
.contact-section { color: #eef3fb; background: #0d1727; border-block: 1px solid #27364a; }
.contact-grid { color: #eef3fb; }
.contact-point-icon { color: #55c8d1; border: 1px solid #324960; background: #132337; }
.contact-points b { color: #e7eef7; }
.contact-points small { color: #9dacc0; }
.contact-form { color: #eef3fb; border: 1px solid #2a3b52; background: #111d30; box-shadow: 0 18px 44px rgb(0 0 0 / 24%); }
.contact-form label { color: #d9e3ef; }
.contact-form input, .contact-form textarea { color: #f0f4fa; border: 1px solid #34465f; background: #0b1422; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #78889f; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #28b7c2; box-shadow: 0 0 0 3px rgb(35 186 197 / 14%); }
.form-heading h3 { color: #eef3fb; }
.form-heading > span, .form-hint, .form-demo-note { color: #94a3b7; }
.form-message { color: #bdf3ee; background: #123530; border-color: #245e58; }
.site-footer { color: #e8f0f8; background: #060b14; border-top: 1px solid #1c2839; }
.site-footer .brand { color: #f2f6fb; }
.footer-brand-col > p { color: #9cabbf; }
.footer-contact-link { color: #f1b44d; }
.footer-links h3 { color: #edf3fa; }
.footer-links a { color: #aab6c6; }
.footer-links a:hover { color: #4dcbd3; }
.footer-bottom { color: #8f9fb4; border-top-color: #202d40; }
.footer-leaf { color: #f3aa28; }
.back-to-top { color: #63d1d8; border: 1px solid #34465f; background: #101b2c; }
.back-to-top:hover { color: #08121f; border-color: #45c6d0; background: #45c6d0; }
.brand-hero-card, .brand-hero-logo, .brand-hero-kicker, .brand-hero-footer { display: none !important; }
@media (max-width: 680px) {
  .brand { font-size: 20px; }
  #services { padding-inline: 19px; }
  .concept-card { width: min(365px, 91%); min-height: 300px; }
  .concept-body { padding: 19px 19px 17px; }
  .concept-body h3 { font-size: 26px; }
  .concept-toolbar { gap: 9px; padding-inline: 14px; }
  .work-section { border-inline: 0; }
  .cta-section { border-radius: 18px; }
}

/* Final dark surface pass: keep every section and form surface on-theme. */
.site-shell main, .site-shell section { color: #edf3fb; }
.hero { background-color: transparent; }
#services { background-color: #0a1321; }
.work-section { background-color: #101a2a; }
.about-section, .faq-section { background-color: #080e19; }
.process-section, .contact-section { background-color: #0d1727; }
.principles-band { background-color: #0d1727; }
.cta-section { background-color: #122239; }
.footer-brand-col .brand { padding: 0; border-radius: 0; color: #f2f6fb; background: transparent; }
.footer-brand-col .brand span { color: #23bac5; }
.brand-symbol, .brand-symbol::before, .brand-symbol::after, .brand-symbol span { display: none !important; }
.service-card, .value-card, .faq-item, .contact-form { background-color: #111d30; }
.contact-form input, .contact-form textarea { background-color: #0b1422; }
.nav-link, .button-text, .footer-links a { color: #c2ccda; }
.nav-link:hover, .nav-link.active, .footer-links a:hover { color: #fff; }
.scroll-cue { color: #9dacbf; }
.scroll-cue > span { border-color: #4a617e; }
.scroll-cue > span::after { background: #28bac5; }
.back-to-top { color: #72d7dc; border-color: #3a506b; background: #101b2c; }
@media (max-width: 680px) {
  .site-header { background: rgb(8 14 25 / 96%); }
  .main-nav.is-open { background: #0b1422; }
  .concept-card { max-width: calc(100vw - 62px); }
}

/* Aqaltaha orange-first identity on warm charcoal; turquoise remains secondary. */
:root {
  --ink: #f5f0e7;
  --green: #f0a526;
  --green-dark: #d58512;
  --green-deep: #110f0c;
  --mint: #2a2117;
  --lime: #f7c464;
  --paper: #110f0c;
  --paper-green: #191611;
  --muted: #bdb4a6;
  --line: #453828;
  --background: #110f0c;
  --foreground: #f5f0e7;
}
html, body { color: #f5f0e7; background: #110f0c; }
body { background-image: radial-gradient(ellipse at 55% -20%, rgb(184 113 25 / 12%), transparent 55%); }
.site-shell { color: #f5f0e7; background: #110f0c; }
::selection { color: #17110a; background: #f3ae32; }
.site-header { background: rgb(17 15 12 / 95%); border-bottom-color: #382d20; box-shadow: 0 8px 28px rgb(0 0 0 / 25%); }
.brand { color: #f8f3ea; }
.brand span, .footer-brand-col .brand span { color: #f1a629; }
.nav-link { color: #c9c0b2; }
.nav-link::after { background: #f2a629; }
.nav-link:hover, .nav-link.active { color: #fff2d9; }
.nav-cta { color: #201507; background: #f2a629; box-shadow: 0 7px 25px rgb(217 141 27 / 20%); }
.nav-cta:hover { color: #201507; background: #ffc451; }
.menu-toggle { color: #f5eee2; border-color: #4b3d2b; background: #201a12; }
.main-nav.is-open { background: #17130e; border-color: #453522; box-shadow: 0 18px 35px rgb(0 0 0 / 36%); }
.hero { color: #f5f0e7; background: radial-gradient(ellipse at 76% 48%, rgb(216 137 23 / 12%), transparent 49%); }
.hero-title { color: #fffaf0; }
.hero-title span, .heading-accent { color: #f2a629; }
.hero-text, .section-heading > p, .about-intro > p, .contact-copy > p { color: #c4b9a8; }
.eyebrow { color: #f4c979; background: #241b10; border-color: #4c371d; }
.eyebrow-dot { background: #f2a629; box-shadow: 0 0 0 4px rgb(242 166 41 / 15%); }
.button-primary { color: #1a1208; background: #f2a629; box-shadow: 0 8px 26px rgb(220 142 24 / 22%); }
.button-primary:hover { color: #1a1208; background: #ffc553; }
.button-text { color: #e7dfd2; }
.button-text:hover, .inline-link { color: #ffc35b; }
.trust-row { color: #beb5a8; }
.trust-row svg { color: #f2a629; }
.hero-art::before { background: radial-gradient(circle, rgb(164 94 16 / 17%) 0%, rgb(117 68 20 / 9%) 47%, transparent 72%); }
.art-orbit { border-color: rgb(197 147 78 / 17%); }
.orbit-two { border-color: rgb(235 172 60 / 21%); }
.spark-a, .spark-b, .art-caption span, .section-footnote span { color: #f2a629; }
.art-caption { color: #b1a696; }
.concept-card { color: #f5f0e7; border-color: #51402a; background: linear-gradient(145deg, #282016 0%, #1d1811 62%, #17130e 100%); box-shadow: 0 26px 65px rgb(0 0 0 / 42%), inset 0 1px 0 rgb(255 255 255 / 4%); }
.concept-card::after { border-color: rgb(242 166 41 / 22%); box-shadow: 0 0 0 18px rgb(242 166 41 / 4%), 0 0 0 38px rgb(242 166 41 / 3%); }
.concept-toolbar { border-bottom-color: #3b3021; color: #c9bda9; }
.concept-dots i { background: #75674f; }
.concept-dots i:first-child { background: #f2a629; }
.concept-dots i:last-child { background: #24aab0; }
.concept-status { color: #eadcc6; border-color: #574126; background: #322417; }
.concept-status i { background: #24aab0; box-shadow: 0 0 0 3px rgb(36 170 176 / 10%); }
.concept-mark { color: #f4e8d4; }
.concept-mark b { color: #ffc45b; background: #443019; }
.concept-kicker { color: #f5c777; }
.concept-kicker svg { color: #f2a629; }
.concept-body h3 { color: #fff7e9; }
.concept-body h3 span { color: #f2aa32; }
.concept-body p { color: #c0b4a2; }
.concept-progress i { background: #3a2e20; }
.concept-progress i:first-child { background: linear-gradient(90deg, #bd7b1d, #6b4b20); }
.concept-pills span { color: #e6dac7; border-color: #4b3924; background: #241c13; }
.concept-pills span:first-child svg { color: #f2a629; }
.concept-pills span:last-child svg { color: #28b4b7; }
.principles-band { color: #e8dece; background: #19150f; border-color: #382c1d; }
.principles-inner span { color: #d1c5b2; }
.principles-inner svg { color: #f2a629; }
.principles-inner span:nth-of-type(even) svg { color: #29a9ad; }
.section-heading h2, .about-intro h2, .contact-copy h2, .faq-heading h2 { color: #f8f1e6; }
.section-kicker { color: #eab45d; }
#services { background: #15120e; border-color: #30271c; }
.service-card, .value-card { color: #f2ecdf; border-color: #3b3022; background: linear-gradient(145deg, #211b13, #19150f); box-shadow: 0 12px 28px rgb(0 0 0 / 20%); }
.service-card:hover { border-color: #9b6620; background: linear-gradient(145deg, #2a2013, #1d1710); box-shadow: 0 18px 36px rgb(0 0 0 / 32%); }
.service-card h3, .value-card h3, .step-card h3, .faq-question { color: #f7f0e4; }
.service-card p, .value-card p, .step-card p { color: #beb4a5; }
.service-icon, .value-icon { color: #ffc45b; border-color: #68491f; background: #302315; }
.service-card:nth-child(3n + 2) .service-icon, .value-card:nth-child(even) .value-icon { color: #6ad0d0; border-color: #315154; background: #1a2928; }
.card-number { color: #f2a629; }
.service-arrow { color: #ffc45b; background: #302315; }
.service-arrow:hover { color: #1b1308; background: #f2a629; }
.section-footnote { color: #b7ad9d; }
.work-section { color: #f0e9dd; background: #1a1712; border-color: #393024; }
.work-section .section-heading h2 { color: #f8f1e6; }
.work-section .section-heading > p { color: #bdb3a4; }
.work-section .section-kicker { color: #efb650; }
.project-mint, .project-lime, .project-dark { color: #f1eadf; border-color: #403426; background: linear-gradient(145deg, #252016, #191610); }
.project-lime { border-color: #61441f; background: linear-gradient(145deg, #302214, #211a12); }
.project-dark { border-color: #443626; background: linear-gradient(145deg, #211c15, #17140f); }
.project-tag { color: #f2b74e; }
.project-mark { color: rgb(242 166 41 / 20%); }
.project-lime .project-mark { color: rgb(37 169 174 / 16%); }
.project-title, .project-name, .project-description { color: #f4ecdf; }
.work-quote { color: #c7bcaa; }
.work-quote > span:first-child, .work-quote > span:last-child { color: #f2a629; }
.about-section { background: #110f0c; border-color: #2d251a; }
.values-note { color: #eee5d7; background: #201a12; border-color: #443524; border-inline-start-color: #f2a629; }
.values-note p { color: #c5b9a7; }
.values-note-mark { color: #1d1407; background: #f2a629; }
.process-section { color: #f3ecdf; background: #1b1711; border-color: #3a2e20; }
.process-section .section-kicker { color: #ffc45b; }
.steps-grid::before { border-color: #594329; }
.step-number { color: #f3ae39; }
.step-number i { background: #f2a629; box-shadow: 0 0 0 2px #1b1711, 0 0 0 3px #f2a629; }
.cta-section { color: #f8f0e4; background: linear-gradient(120deg, #21190f, #2a1d0d 55%, #1c170f); border-color: #63451f; box-shadow: 0 18px 48px rgb(0 0 0 / 34%); }
.cta-section::before { border-color: rgb(242 166 41 / 25%); }
.cta-section::after { border-color: rgb(242 166 41 / 38%); }
.cta-copy .section-kicker { color: #f3bc61; }
.cta-copy h2 { color: #fff5e5; }
.cta-copy p { color: #c9bba7; }
.button-light { color: #1b1308; background: #f2a629; }
.button-light:hover { color: #1b1308; background: #ffc451; }
.cta-star { color: #f2a629; }
.faq-section { background: #110f0c; }
.faq-item { border-color: #3d3020; }
.faq-question { background: transparent; }
.faq-toggle { color: #ffc45b; background: #302315; }
.faq-item[open] .faq-toggle { color: #17110a; background: #f2a629; }
.faq-item > p { color: #bdb3a4; }
.contact-section { color: #f3ecdf; background: #1a1610; border-color: #3a2c1c; }
.contact-point-icon { color: #f6bb50; border-color: #5b4323; background: #2b2115; }
.contact-points b { color: #eee5d7; }
.contact-points small { color: #b3a795; }
.contact-form { color: #f3ecdf; border-color: #493824; background: #211a12; box-shadow: 0 18px 44px rgb(0 0 0 / 28%); }
.contact-form label { color: #e1d5c3; }
.contact-form input, .contact-form textarea { color: #f5ede1; border-color: #52412b; background: #15120e; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #8f806a; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #e4a02a; box-shadow: 0 0 0 3px rgb(242 166 41 / 14%); }
.form-heading h3 { color: #f5ede1; }
.form-heading > span, .form-hint, .form-demo-note { color: #ad9f8b; }
.form-message { color: #f7d88f; background: #382b16; border-color: #6e5124; }
.site-footer { color: #eee5d8; background: #0b0a08; border-color: #302719; }
.site-footer .brand { color: #f8f2e8; }
.footer-brand-col > p { color: #b4a995; }
.footer-contact-link { color: #f2b74f; }
.footer-links h3 { color: #f4ecdf; }
.footer-links a { color: #b7ad9e; }
.footer-links a:hover { color: #f8bb4e; }
.footer-bottom { color: #9d927f; border-color: #302719; }
.footer-leaf { color: #f2a629; }
.back-to-top { color: #ffc45b; border-color: #5b4527; background: #21190f; }
.back-to-top:hover { color: #1a1208; border-color: #f2a629; background: #f2a629; }
.scroll-cue { color: #aaa08f; }
.scroll-cue > span { border-color: #654b2a; }
.scroll-cue > span::after { background: #f2a629; }
@media (max-width: 680px) {
  .site-header { background: rgb(17 15 12 / 97%); }
  .main-nav.is-open { background: #17130e; }
}

.faq-item { background-color: #21190f; border-color: #4a3820; }
.faq-item[open] { background-color: #281e12; border-color: #76501f; }