@font-face {
font-family: "IBM Plex Sans Arabic";
src: url("../fonts/plex-arabic-400.woff2") format("woff2");
font-weight: 400;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
src: url("../fonts/plex-arabic-600.woff2") format("woff2");
font-weight: 600;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
src: url("../fonts/plex-latin-400.woff2") format("woff2");
font-weight: 400;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
src: url("../fonts/plex-latin-600.woff2") format("woff2");
font-weight: 600;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--burgundy: #682f40;
--burgundy-deep: #4f2230;
--burgundy-lift: #7a4052;
--cream: #f5f0e8;
--cream-tint: #ede5d8;
--cream-lift: #fbf8f3;
--line: rgb(104 47 64 / 0.16);
--font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
--header-h: 72px;
--gutter: clamp(1.25rem, 4vw, 2.5rem);
--section-y: clamp(4.5rem, 10vw, 8rem);
--radius: 20px;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: var(--header-h);
}
body {
margin: 0;
background: var(--cream);
color: var(--burgundy);
font-family: var(--font);
font-size: 1.0625rem;
line-height: 1.8;
overflow-wrap: anywhere;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 600; line-height: 1.3; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
[lang="en"] { unicode-bidi: isolate; }
:focus-visible {
outline: 3px solid var(--focus, var(--burgundy));
outline-offset: 3px;
border-radius: 6px;
}
.surface-dark { --focus: var(--cream); background: var(--burgundy); color: var(--cream); }
.surface-light { --focus: var(--burgundy); background: var(--cream); color: var(--burgundy); }
.surface-tint { --focus: var(--burgundy); background: var(--cream-tint); color: var(--burgundy); }
.container {
width: 100%;
max-width: calc(1180px + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.skip-link {
position: fixed;
top: 0.75rem;
inset-inline-start: 0.75rem;
z-index: 60;
padding: 0.5rem 1rem;
border-radius: 10px;
background: var(--cream);
color: var(--burgundy);
font-weight: 600;
transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
min-height: 3.25rem;
padding: 0.6rem 1.6rem;
border: 1.5px solid transparent;
border-radius: 999px;
font-weight: 600;
line-height: 1.4;
text-align: center;
transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:focus-visible { border-radius: 999px; }
.btn--primary { background: var(--cream); color: var(--burgundy); }
.btn--primary:hover { background: var(--cream-lift); transform: translateY(-1px); }
.btn--ghost { border-color: rgb(245 240 232 / 0.5); color: var(--cream); }
.btn--ghost:hover { border-color: var(--cream); background: rgb(245 240 232 / 0.08); }
.btn--large { min-height: 3.75rem; padding-inline: 2.25rem; font-size: 1.125rem; }
.site-header {
--header-bg: var(--burgundy);
--header-fg: var(--cream);
--header-cta-bg: var(--cream);
--header-cta-fg: var(--burgundy);
--focus: var(--header-fg);
position: sticky;
top: 0;
z-index: 40;
background: var(--header-bg);
color: var(--header-fg);
box-shadow: 0 1px 0 transparent;
transition: background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled {
--header-bg: var(--cream);
--header-fg: var(--burgundy);
--header-cta-bg: var(--burgundy);
--header-cta-fg: var(--cream);
box-shadow: 0 1px 0 var(--line);
}
.site-header__inner {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0 1.5rem;
min-height: var(--header-h);
}
.brand { display: block; position: relative; flex: none; padding-block: 0.25rem; }
.brand img { width: auto; height: 32px; }
.brand__logo--light { position: absolute; inset-block-start: 0.25rem; inset-inline-start: 0; opacity: 0; }
.brand__logo--dark, .brand__logo--light { transition: opacity 0.25s var(--ease); }
.is-scrolled .brand__logo--dark { opacity: 0; }
.is-scrolled .brand__logo--light { opacity: 1; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; }
.site-nav__list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }
.site-nav__list a {
position: relative;
display: block;
padding-block: 0.4rem;
font-weight: 400;
}
.site-nav__list a::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0.2rem;
height: 1.5px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.25s var(--ease);
}
.site-nav__list a:hover::after { transform: scaleX(1); }
.btn--header {
min-height: 2.75rem;
padding: 0.35rem 1.2rem;
background: var(--header-cta-bg);
color: var(--header-cta-fg);
font-size: 0.98rem;
}
.btn--header:hover { transform: translateY(-1px); }
.nav-toggle {
display: none;
width: 2.75rem;
height: 2.75rem;
margin-inline-end: -0.5rem;
padding: 0;
border: 0;
background: none;
color: inherit;
cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
display: block;
width: 1.5rem;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav-toggle__bars { position: relative; margin-inline: auto; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after { transform: translateY(7px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); }
@media (max-width: 899.98px) {
:root { --header-h: 64px; }
.brand img { height: 28px; }
.site-nav { width: 100%; padding-block-end: 0.75rem; }
.js .nav-toggle { display: block; }
.js .site-nav {
position: absolute;
top: 100%;
inset-inline: 0;
display: block;
padding: 0.5rem var(--gutter) 1.5rem;
background: var(--header-bg);
box-shadow: 0 1px 0 var(--line), 0 18px 30px rgb(40 15 24 / 0.18);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.js .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.js .site-nav__list { display: block; }
.js .site-nav__list a { padding-block: 0.85rem; font-size: 1.125rem; }
.js .site-nav__list a::after { display: none; }
.js .site-nav__list li + li { border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.js .btn--header { width: 100%; min-height: 3.25rem; margin-top: 0.75rem; }
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
align-items: center;
gap: clamp(2rem, 5vw, 5rem);
min-height: min(calc(100svh - var(--header-h)), 760px);
padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero h1 { font-size: clamp(2.125rem, 1.45rem + 3.6vw, 4.25rem); line-height: 1.22; }
.hero__lead {
max-width: 34rem;
margin-top: 1.5rem;
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
line-height: 1.9;
color: rgb(245 240 232 / 0.88);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2.25rem; }
.hero__art { width: 100%; max-width: 460px; height: auto; margin-inline: auto; color: var(--cream); }
@media (prefers-reduced-motion: no-preference) {
.hero__art { animation: art-in 1s var(--ease) both; }
.art-line { stroke-dasharray: 1400; animation: draw 1.6s var(--ease) both; }
}
@keyframes art-in { from { opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@media (max-width: 899.98px) {
.hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.hero__art { max-width: min(340px, 82%); }
}
@media (max-width: 479.98px) {
.hero__actions .btn { width: 100%; }
}
.hero, .section, .contact { position: relative; isolation: isolate; overflow: clip; }
.hero::before, .section::before, .contact::before {
content: "";
position: absolute;
inset: calc(var(--dot-gap) * -1);
z-index: -1;
background-image: radial-gradient(circle, currentColor 1.1px, transparent 1.6px);
background-size: var(--dot-gap) var(--dot-gap);
opacity: var(--dot-opacity);
-webkit-mask-image: var(--dot-mask);
mask-image: var(--dot-mask);
pointer-events: none;
}
.hero, .section, .contact { --dot-gap: 26px; --dot-opacity: 0.2; }
.section { --dot-opacity: 0.16; }
.hero { --dot-mask: radial-gradient(ellipse 75% 95% at 12% 55%, #000 25%, transparent 100%); }
#about, #process { --dot-mask: radial-gradient(ellipse 60% 100% at 0% 50%, #000 10%, transparent 100%); }
#services { --dot-mask: radial-gradient(ellipse 60% 90% at 100% 0%, #000 10%, transparent 100%); }
.contact { --dot-mask: radial-gradient(ellipse 85% 110% at 50% 50%, transparent 30%, #000 85%); }
.hero::after, .contact::after {
content: "";
position: absolute;
z-index: -2;
width: min(70vw, 720px);
aspect-ratio: 1;
inset-block-start: -20%;
inset-inline-end: -12%;
border-radius: 50%;
background: radial-gradient(circle, rgb(245 240 232 / 0.09), transparent 68%);
pointer-events: none;
}
.contact::after { inset-block-start: auto; inset-block-end: -45%; inset-inline-end: auto; inset-inline-start: -10%; }
@media (prefers-reduced-motion: no-preference) {
.hero::before, .section::before, .contact::before { animation: dots-drift 26s ease-in-out infinite alternate; }
.hero::after, .contact::after { animation: glow-drift 22s ease-in-out infinite alternate; }
}
@keyframes dots-drift { to { transform: translate(var(--dot-gap), calc(var(--dot-gap) * -1)); } }
@keyframes glow-drift { to { transform: translate(-9%, 12%) scale(1.12); } }
.section { padding-block: var(--section-y); }
.section h2, .about h2 { font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem); }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.link-mark {
position: relative;
display: block;
width: 3.25rem;
height: 9px;
margin-bottom: 1.25rem;
}
.link-mark::before {
content: "";
position: absolute;
inset-inline: 4px;
top: 3.75px;
height: 1.5px;
background: currentColor;
opacity: 0.45;
}
.link-mark::after {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0;
width: 9px;
height: 9px;
border-radius: 50%;
background: currentColor;
box-shadow: calc(3.25rem - 9px) 0 0 -1.5px currentColor;
}
[dir="rtl"] .link-mark::after { box-shadow: calc(9px - 3.25rem) 0 0 -1.5px currentColor; }
.eyebrow { font-weight: 600; margin-bottom: 1rem; }
.about {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: end;
gap: clamp(2rem, 6vw, 6rem);
}
.about__text {
max-width: 40rem;
font-size: clamp(1.0938rem, 1rem + 0.45vw, 1.3125rem);
line-height: 2;
}
@media (max-width: 899.98px) {
.about { grid-template-columns: minmax(0, 1fr); }
}
.services {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
}
.service {
padding: clamp(1.75rem, 3vw, 2.5rem);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--cream-lift);
transition: opacity 0.6s var(--ease) var(--delay, 0ms), transform 0.6s var(--ease) var(--delay, 0ms), border-color 0.2s var(--ease);
}
.service:hover { border-color: rgb(104 47 64 / 0.4); }
.service__icon {
display: grid;
place-items: center;
width: 3.5rem;
height: 3.5rem;
margin-bottom: 2.25rem;
border-radius: 16px;
background: var(--burgundy);
color: var(--cream);
font-size: 1.25rem;
}
.service h3 { font-size: 1.375rem; margin-bottom: 0.75rem; }
@media (max-width: 899.98px) {
.services { grid-template-columns: minmax(0, 1fr); }
.service__icon { margin-bottom: 1.5rem; }
}
.steps { counter-reset: step; display: grid; }
.step { counter-increment: step; position: relative; }
.step::before {
content: counter(step, arabic-indic);
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--burgundy);
color: var(--cream);
font-weight: 600;
line-height: 1;
}
.step h3 { font-size: 1.375rem; margin-bottom: 0.25rem; }
@media (max-width: 899.98px) {
.step { min-height: 2.75rem; padding-inline-start: 4.25rem; padding-block-end: 2.5rem; }
.step:last-child { padding-block-end: 0; }
.step::before { position: absolute; top: 0; inset-inline-start: 0; }
.step:not(:last-child)::after {
content: "";
position: absolute;
top: 2.75rem;
bottom: 0;
inset-inline-start: calc(1.375rem - 0.75px);
width: 1.5px;
background: var(--line);
}
.step h3 { padding-top: 0.25rem; }
}
@media (min-width: 900px) {
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.step::before { margin-bottom: 1.5rem; }
.step:not(:last-child)::after {
content: "";
position: absolute;
top: calc(1.375rem - 0.75px);
inset-inline: 3.5rem -1.25rem;
height: 1.5px;
background: var(--line);
}
}
.contact { padding-block: clamp(5rem, 11vw, 9rem); }
.contact__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.contact h2 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
.contact__text {
max-width: 36rem;
margin-top: 1.25rem;
margin-bottom: 2.25rem;
text-wrap: balance;
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
color: rgb(245 240 232 / 0.88);
}
.contact__phone {
margin-top: 1.25rem;
padding: 0.25rem 0.5rem;
font-size: 1.125rem;
font-weight: 600;
border-bottom: 1px solid rgb(245 240 232 / 0.4);
transition: border-color 0.2s var(--ease);
}
.contact__phone:hover { border-bottom-color: var(--cream); }
.contact__social {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.75rem;
margin-top: 0.5rem;
padding: 0.25rem 0.5rem;
font-weight: 600;
transition: opacity 0.2s var(--ease);
}
.contact__social:hover { opacity: 0.8; }
@media (max-width: 479.98px) {
.contact .btn { width: 100%; padding-inline: 1rem; }
}
.site-footer { background: var(--burgundy-deep); padding-block: 2.5rem; }
.site-footer__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem 2rem;
}
.site-footer img { width: auto; height: 30px; }
.site-footer__brand { display: flex; align-items: center; gap: 1rem; }
.social-link {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid rgb(245 240 232 / 0.35);
border-radius: 50%;
transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.social-link:hover { border-color: var(--cream); background: rgb(245 240 232 / 0.08); }
.social-link:focus-visible { border-radius: 50%; }
.site-footer__tag { letter-spacing: 0.02em; }
.site-footer__copy { justify-self: end; font-size: 0.9375rem; color: rgb(245 240 232 / 0.85); }
@media (max-width: 767.98px) {
.site-footer__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.site-footer__copy { justify-self: center; }
}
.fab {
--focus: var(--burgundy);
position: fixed;
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
inset-inline-end: 1rem;
z-index: 30;
display: grid;
place-items: center;
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
border: 2px solid var(--cream);
background: var(--burgundy);
color: var(--cream);
font-size: 1.25rem;
box-shadow: 0 6px 20px rgb(40 15 24 / 0.28);
transition: opacity 0.25s var(--ease), visibility 0.25s, transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.fab:hover { background: var(--burgundy-lift); transform: translateY(-2px); }
.fab:focus-visible { border-radius: 50%; }
.js .fab:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(8px); }
@media (max-width: 599.98px) {
.fab { width: 3rem; height: 3rem; inset-inline-end: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
.step { padding-inline-end: 2.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
[data-reveal] { transition: opacity 0.6s var(--ease) var(--delay, 0ms), transform 0.6s var(--ease) var(--delay, 0ms); }
.js [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}