@charset "UTF-8";
/* =============================================================
OAW INFOTECH — Brand Design System
Palette: 05a8cc / 006699 / ff6600 / d9e8f5 / 003f54
No framework. No jQuery. One stylesheet.
============================================================= */
/* ---------- 0. FONTS (self-hosted) ----------
These were two s to fonts.googleapis.com. That stylesheet is
render-blocking and lives on a third origin, so a cold visit paid a full
DNS + TCP + TLS + request round trip -- measured at 462ms from here -- before
the page could paint, and only then discovered the woff2 on a *fourth*
origin. Self-hosted, the font rides the connection already open for the HTML.
Variable, not four static cuts: one file covers 200-800, and the two
`font-weight: 500` rules in this sheet finally have a real face to use
instead of snapping to 400.
Subsets are Google's own, so the unicode-range splits are unchanged: latin-ext
only downloads if a page actually contains a glyph in it (some city names in
data/cities.json do). Arabic is 121KB and loads only on RTL pages, because
nothing else on the site is in that range.
Both faces are SIL Open Font License 1.1; the licences ship in fonts/.
Re-download from Google Fonts rather than editing these files. */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Noto Kufi Arabic";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/noto-kufi-arabic-arabic.woff2") format("woff2");
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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* ---------- 1. TOKENS ---------- */
:root {
/* Brand */
--cyan: #05a8cc;
--blue: #006699;
--orange: #ff6600;
--mist: #d9e8f5;
--navy: #003f54;
/* Derived ink / surfaces */
--navy-900: #002936;
--blue-700: #005580;
--orange-600: #e65c00;
--orange-ink: #b34400; /* AA-safe orange for small text on white and tints */
--cyan-50: #eaf7fb;
--mist-50: #f2f7fc;
--bg: #ffffff;
--bg-soft: var(--mist-50);
--surface: #ffffff;
--ink: #0d2b38;
--ink-soft: #47616d;
/* Strongest text colour. Unlike --navy (a fixed brand hue) this one flips
with the theme, so components never end up painting navy on near-black. */
--ink-strong: var(--navy);
/* Label colour for bright accent fills (warm gradient, WhatsApp green).
Fixed in both themes because those fills do not change with the theme. */
--ink-on-bright: #0d2b38;
--ink-mute: #5a7180;
--line: #e2ebf3;
--line-strong: #c9dcea;
/* Gradients */
--grad-brand: linear-gradient(135deg, #09708a 0%, var(--blue) 55%, var(--navy) 100%);
--grad-warm: linear-gradient(135deg, var(--orange) 0%, #ff9147 100%);
/* Warm ramp for fills that carry a label. --grad-warm is too light to put
white on (2.2-2.4:1), which is why the buttons used to run a near-black
label instead; this ramp is the same hue family taken down far enough that
white clears AA at both ends (4.9:1 light end, 7.0:1 dark end). --grad-warm
stays bright for the hairline rules and bars, which carry no text. */
--grad-warm-deep: linear-gradient(135deg, #c2490c 0%, #a03500 100%);
--grad-deep: linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%);
--grad-text: linear-gradient(100deg, var(--blue) 0%, #0596b5 100%);
/* Type */
--font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--fs-hero: clamp(2.35rem, 1.25rem + 4.1vw, 4.35rem);
--fs-h1: clamp(2rem, 1.3rem + 2.6vw, 3.15rem);
--fs-h2: clamp(1.7rem, 1.2rem + 1.9vw, 2.55rem);
--fs-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
--fs-h4: clamp(1.08rem, 1rem + 0.3vw, 1.2rem);
--fs-lead: clamp(1.03rem, 0.97rem + 0.4vw, 1.2rem);
--fs-body: 1rem;
--fs-sm: 0.9rem;
--fs-xs: 0.795rem;
/* Space (8pt rhythm) */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
--s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
--section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
--container: 1200px;
--gutter: clamp(1.15rem, .6rem + 2vw, 2.5rem);
/* Shape & depth */
--r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
--sh-xs: 0 1px 2px rgba(0,63,84,.06), 0 1px 3px rgba(0,63,84,.05);
--sh-sm: 0 2px 6px rgba(0,63,84,.06), 0 6px 16px -6px rgba(0,63,84,.12);
--sh-md: 0 10px 30px -12px rgba(0,63,84,.22), 0 2px 8px rgba(0,63,84,.06);
--sh-lg: 0 30px 60px -24px rgba(0,63,84,.30), 0 6px 18px rgba(0,63,84,.07);
--sh-brand: 0 14px 30px -12px rgba(0,102,153,.55);
--sh-warm: 0 14px 30px -12px rgba(194,73,12,.45);
--ease: cubic-bezier(.22,1,.36,1);
--dur: .45s;
}
/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
font-family: var(--font);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--blue); text-decoration: none; transition: color .2s; }
a:hover { color: var(--orange-ink); }
ul[class], ol[class] { list-style: none; padding: 0; }
h1, h2, h3, h4, h5 {
font-weight: 800; line-height: 1.14; letter-spacing: -.022em;
color: var(--ink-strong); text-wrap: balance;
}
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--cyan); color: #fff; }
hr { border: 0; border-top: 1px solid var(--line); }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; top: -100%; left: var(--s-4); z-index: 200;
padding: .7rem 1.2rem; border-radius: var(--r-pill);
background: var(--navy); color: #fff; font-weight: 700;
}
.skip-link:focus { top: var(--s-3); color: #fff; }
/* ---------- 3. LAYOUT ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: 1400px; }
.container--narrow { max-width: 880px; }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--soft { background: var(--bg-soft); }
.section--tint { background: linear-gradient(180deg, var(--cyan-50), #fff); }
.section--deep { background: var(--grad-deep); color: #cfe3ec; }
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: #fff; }
.below { content-visibility: auto; contain-intrinsic-size: auto 720px; }
.grid { display: grid; gap: var(--s-5); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 62rem) {
.split { grid-template-columns: 1fr 1fr; }
.split--7-5 { grid-template-columns: 1.35fr 1fr; }
.split--5-7 { grid-template-columns: 1fr 1.35fr; }
}
.stack > * + * { margin-top: var(--s-4); }
.center { text-align: center; }
/* ---------- 4. TYPE HELPERS ---------- */
.eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--orange-ink);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--grad-warm); }
.section--deep .eyebrow { color: #5cc6e3; }
.section--deep .eyebrow::before { background: #5cc6e3; }
.h-hero { font-size: var(--fs-hero); letter-spacing: -.035em; line-height: 1.04; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); font-weight: 700; }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.6; }
.section--deep .lead, .section--deep p { color: #b7d2de; }
.muted { color: var(--ink-mute); }
.small { font-size: var(--fs-sm); }
.grad-text {
background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.mark { position: relative; display: inline-block; isolation: isolate; }
.mark::after {
content: ""; position: absolute; inset-inline: -.08em; bottom: .06em; height: .32em; z-index: -1;
background: linear-gradient(90deg, rgba(255,102,0,.30), rgba(5,168,204,.30));
border-radius: .2em;
}
.section-head { max-width: 47rem; }
.section-head .h2 { margin-top: var(--s-3); }
.section-head > p { margin-top: var(--s-4); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
/* ---------- 5. BUTTONS ---------- */
.btn {
--btn-bg: var(--grad-warm-deep); --btn-fg: #fff; --btn-bd: transparent; --btn-sh: var(--sh-warm);
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
padding: .85rem 1.6rem; border-radius: var(--r-pill);
font-size: .97rem; font-weight: 700; letter-spacing: -.01em; text-align: center;
color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-bd);
box-shadow: var(--btn-sh);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
background-color .25s, color .25s, border-color .25s;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-3px); box-shadow: 0 20px 38px -14px rgba(194,73,12,.55); }
.btn:active { transform: translateY(-1px); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--brand { --btn-bg: var(--grad-brand); --btn-fg: #fff; --btn-sh: var(--sh-brand); }
.btn--brand:hover { box-shadow: 0 20px 38px -14px rgba(0,102,153,.6); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--line-strong); --btn-sh: none; }
.btn--ghost:hover { --btn-fg: var(--blue); border-color: var(--blue); box-shadow: var(--sh-sm); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--navy); --btn-sh: var(--sh-md); }
.btn--light:hover { --btn-fg: var(--blue); box-shadow: var(--sh-lg); }
.btn--onDark { --btn-bg: rgba(255,255,255,.06); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.34); --btn-sh: none; }
.btn--onDark:hover { --btn-bg: #fff; --btn-fg: var(--navy); box-shadow: 0 18px 34px -14px rgba(0,0,0,.5); }
.btn--sm { padding: .6rem 1.15rem; font-size: .88rem; }
.btn--lg { padding: 1.02rem 2rem; font-size: 1.03rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--blue); }
.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }
:root[data-theme="dark"] .link-arrow { color: #5cc6e3; }
/* ---------- 6. PILLS ---------- */
.pill {
display: inline-flex; align-items: center; gap: .5rem;
padding: .42rem .95rem; border-radius: var(--r-pill);
font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
background: #fff; border: 1px solid var(--line); color: var(--navy); box-shadow: var(--sh-xs);
}
.pill--glass { background: rgba(255,255,255,.75); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.65); }
.pill--dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff; box-shadow: none; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }
.dot--live { animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(255,102,0,.20); }
50% { box-shadow: 0 0 0 9px rgba(255,102,0,0); }
}
/* ---------- 7. HEADER ---------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(255,255,255,.82); backdrop-filter: blur(14px) saturate(160%);
border-bottom: 1px solid transparent;
transition: box-shadow .3s, border-color .3s, background-color .3s;
}
.site-header.is-stuck { box-shadow: var(--sh-sm); border-bottom-color: var(--line); background: rgba(255,255,255,.94); }
.nav {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
min-height: 76px;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; flex: none; }
.brand img { height: 42px; width: auto; }
.nav-links { display: none; align-items: center; gap: clamp(.4rem, .1rem + 1vw, 1.35rem); }
.nav-links a {
position: relative; padding: .45rem .2rem;
font-size: .96rem; font-weight: 600; color: var(--navy);
}
.nav-links a::after {
content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; border-radius: 2px;
background: var(--grad-warm); transition: right .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; }
.nav-links a[aria-current="page"] { color: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: var(--s-3); }
.nav-actions .btn { display: none; }
.nav-toggle {
display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
width: 46px; height: 42px; padding: 0 11px; border-radius: 12px;
border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-xs);
}
.nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--navy); transition: transform .35s var(--ease), opacity .2s; }
.nav-toggle span:nth-child(2) { width: 70%; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.drawer {
position: fixed; inset: 76px 0 auto; z-index: 99;
display: grid; gap: .2rem;
padding: var(--s-5) var(--gutter) var(--s-6);
background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--sh-lg);
transform: translateY(-120%); visibility: hidden;
transition: transform .45s var(--ease), visibility .45s;
max-height: calc(100vh - 76px); overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer a {
padding: .85rem .2rem; font-size: 1.06rem; font-weight: 700; color: var(--navy);
border-bottom: 1px solid var(--line);
}
.drawer a:last-of-type { border-bottom: 0; }
.drawer .btn { margin-top: var(--s-4); }
@media (min-width: 62rem) {
.nav-links { display: flex; }
.nav-actions .btn { display: inline-flex; }
.nav-toggle, .drawer { display: none; }
}
/* ---------- 8. HERO ---------- */
.hero { position: relative; overflow: clip; padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) var(--section-y); }
.hero::before, .hero::after {
content: ""; position: absolute; z-index: -2; border-radius: 50%; filter: blur(70px); opacity: .5;
pointer-events: none;
}
.hero::before { width: 44rem; height: 44rem; top: -22rem; right: -14rem; background: radial-gradient(circle, rgba(5,168,204,.55), transparent 65%); }
.hero::after { width: 36rem; height: 36rem; bottom: -20rem; left: -14rem; background: radial-gradient(circle, rgba(255,102,0,.30), transparent 65%); }
.hero-grid {
position: absolute; inset: 0; z-index: -3; opacity: .5;
background-image: linear-gradient(var(--mist) 1px, transparent 1px), linear-gradient(90deg, var(--mist) 1px, transparent 1px);
background-size: 68px 68px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.hero-copy > * + * { margin-top: var(--s-5); }
.hero-copy .btn-row { margin-top: var(--s-6); }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-7); }
.hero-proof-item { display: flex; flex-direction: column; }
.hero-proof-item b { font-size: 1.5rem; font-weight: 800; color: var(--navy); line-height: 1.1; letter-spacing: -.03em; }
/* Direct child. `100+` puts the counter inside
the number, so an unscoped `span` rule styled the digits as the label: the
count rendered at 12.7px uppercase grey next to a 24px navy suffix. */
.hero-proof-item > span { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.hero-proof-sep { width: 1px; align-self: stretch; background: var(--line-strong); }
.hero-art { position: relative; }
.hero-art-frame {
position: relative; border-radius: var(--r-xl); overflow: hidden;
background: var(--grad-brand); box-shadow: var(--sh-lg);
padding: clamp(1rem, .4rem + 2vw, 2rem);
}
.hero-art-frame::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.22), transparent 60%);
pointer-events: none;
}
.hero-art-frame img { border-radius: var(--r-lg); width: 100%; }
.float-card {
position: absolute; display: flex; align-items: center; gap: .7rem;
padding: .7rem .95rem; border-radius: var(--r-md);
background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
box-shadow: var(--sh-md); font-size: var(--fs-sm); font-weight: 700; color: var(--navy);
animation: bob 6s ease-in-out infinite;
}
.float-card i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--cyan-50); color: var(--blue); flex: none; }
.float-card i svg { width: 18px; height: 18px; }
.float-card--tl { top: 8%; left: -6%; }
.float-card--br { bottom: 9%; right: -5%; animation-delay: -3s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 61.9375rem) {
.float-card--tl { left: 2%; }
.float-card--br { right: 2%; }
}
@media (max-width: 30rem) { .float-card { display: none; } }
/* ---------- 9. CARDS ---------- */
.card {
position: relative; height: 100%;
padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
border-radius: var(--r-lg); background: var(--surface);
border: 1px solid var(--line); box-shadow: var(--sh-xs);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
overflow: hidden;
}
.card::before {
content: ""; position: absolute; inset: 0 0 auto; height: 3px;
background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.card:hover::before { transform: scaleX(1); }
.card .h4 { margin-bottom: var(--s-2); }
.card p { color: var(--ink-soft); font-size: var(--fs-sm); }
.card--alt::before { background: var(--grad-warm); }
.card--flat { box-shadow: none; }
.card--dark {
background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); color: #b7d2de;
}
.card--dark:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
.icon-tile {
display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--s-4);
border-radius: 18px; color: #fff; background: var(--grad-brand); box-shadow: var(--sh-brand);
transition: transform var(--dur) var(--ease);
}
.icon-tile svg { width: 26px; height: 26px; }
.card:hover .icon-tile { transform: rotate(-6deg) scale(1.06); }
.icon-tile--warm { background: var(--grad-warm-deep); box-shadow: var(--sh-warm); }
.icon-tile--soft { background: var(--cyan-50); color: var(--blue); box-shadow: none; }
.icon-tile--sm { width: 44px; height: 44px; border-radius: 14px; margin-bottom: var(--s-3); }
.icon-tile--sm svg { width: 20px; height: 20px; }
/* Numbered process steps */
.step { position: relative; padding-left: 4.6rem; }
.step + .step { margin-top: var(--s-6); }
.step-num {
position: absolute; left: 0; top: 0;
display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px;
font-size: 1.15rem; font-weight: 800; color: #fff; background: var(--grad-brand);
box-shadow: var(--sh-brand);
}
.step:nth-child(2) .step-num { background: var(--grad-warm-deep); color: #fff; box-shadow: var(--sh-warm); }
.step:nth-child(3) .step-num { background: linear-gradient(135deg, #09708a, var(--blue)); }
.step::after {
content: ""; position: absolute; left: 27px; top: 62px; bottom: -2rem; width: 2px;
background: linear-gradient(180deg, var(--line-strong), transparent);
}
.step:last-child::after { display: none; }
.step p { color: var(--ink-soft); margin-top: var(--s-2); }
/* ---------- 10. STATS ---------- */
.stats {
display: grid; gap: 1px; overflow: hidden;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
border-radius: var(--r-lg); background: var(--line);
border: 1px solid var(--line); box-shadow: var(--sh-sm);
}
.stat { background: #fff; padding: clamp(1.4rem, 1rem + 1vw, 2.2rem); text-align: center; }
.stat b {
display: block; font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem); font-weight: 800;
line-height: 1; letter-spacing: -.04em;
background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Direct child, for the same reason as .hero-proof-item above — this one was
worse, rendering a 14.4px grey digit above a 48px '+' in every stats band. */
.stat > span { display: block; margin-top: .55rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-mute); }
.section--deep .stats { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); box-shadow: none; }
.section--deep .stat { background: rgba(0,41,54,.55); }
.section--deep .stat b { background: linear-gradient(100deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; }
.section--deep .stat > span { color: #8fb4c4; }
/* ---------- 11. PORTFOLIO ---------- */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: var(--s-6); }
.filters button {
padding: .55rem 1.25rem; border-radius: var(--r-pill);
font-size: .9rem; font-weight: 700; color: var(--ink-soft);
background: #fff; border: 1px solid var(--line); transition: all .25s;
}
.filters button:hover { color: var(--blue); border-color: var(--line-strong); }
.filters button[aria-pressed="true"] { color: #fff; background: var(--grad-brand); border-color: transparent; box-shadow: var(--sh-brand); }
.work-grid { margin-top: var(--s-6); }
/* The label sits under the shot, not over it.
It used to be white text on a scrim covering the whole card at .82 opacity,
which is a lot of navy to put over the one thing this section exists to
show — every screenshot read as a murky rectangle, and the contrast of the
title depended on whatever pixels happened to be behind it. On its own
surface the type is deterministic in both themes and the work is visible. */
.work {
position: relative; display: flex; flex-direction: column; overflow: hidden;
border-radius: var(--r-lg); background: var(--surface);
border: 1px solid var(--line); box-shadow: var(--sh-xs);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
border-color .3s, opacity .3s, scale .3s;
}
/* aspect-ratio lives here now, so the grid still reserves the row height
before any image has loaded */
.work-shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-soft); }
.work-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.work-shot::after {
content: ""; position: absolute; inset: 0; opacity: 0;
background: linear-gradient(to top, rgba(0,41,54,.30), transparent 60%);
transition: opacity .4s var(--ease);
}
.work:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.work:hover .work-shot img { transform: scale(1.05); }
.work:hover .work-shot::after { opacity: 1; }
.work-meta { padding: clamp(.9rem, .6rem + .8vw, 1.15rem) clamp(1rem, .7rem + .8vw, 1.25rem) clamp(1.05rem, .7rem + .9vw, 1.35rem); }
.work-meta span {
display: inline-block; margin-bottom: .45rem;
font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-mute);
}
.work-meta h3 { font-size: 1.02rem; color: var(--ink-strong); letter-spacing: -.02em; line-height: 1.25; }
.work.is-hidden { display: none; }
/* ---------- 12. TESTIMONIALS ---------- */
.rail {
display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 25rem);
gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory;
padding: .5rem .25rem var(--s-5);
scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.rail > * { scroll-snap-align: center; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
@media (min-width: 62rem) {
.rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, 1fr); overflow: visible; padding: 0; }
}
.quote { display: flex; flex-direction: column; }
.quote-mark { font-size: 3rem; line-height: .8; font-weight: 800; color: var(--cyan); opacity: .4; }
.quote p { flex: 1; margin-block: var(--s-3); color: var(--ink-soft); }
.quote-by { display: flex; align-items: center; gap: .8rem; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.quote-by img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.quote-by b { display: block; font-size: .95rem; color: var(--ink-strong); }
.quote-by span { display: block; font-size: var(--fs-xs); color: var(--ink-mute); }
.stars { display: flex; gap: 2px; color: var(--orange); }
.stars svg { width: 15px; height: 15px; }
/* ---------- 13. LOGO MARQUEE ---------- */
.marquee { position: relative; overflow: hidden; padding-block: var(--s-2);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; gap: clamp(2rem, 1rem + 4vw, 5rem); animation: slide 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* The button lives outside .marquee because that element is overflow:hidden
and carries an edge mask, both of which would eat it. */
.marquee-wrap { position: relative; }
.marquee-wrap .marquee-toggle {
position: absolute; inset-block-start: 50%; inset-inline-end: 0;
transform: translateY(-50%);
display: grid; place-items: center; width: 34px; height: 34px;
border-radius: 50%; border: 1px solid var(--hairline-strong);
background: var(--surface); color: var(--ink-mute);
transition: color .25s, border-color .25s;
}
/* No resting opacity: fading this to .55 dropped the glyph to 2.47:1, under the
3:1 that SC 1.4.11 wants for a control the user has to find. */
.marquee-wrap .marquee-toggle:hover,
.marquee-wrap .marquee-toggle:focus-visible { color: var(--blue); border-color: var(--blue); }
.marquee-toggle .i-play, .is-paused .marquee-toggle .i-pause { display: none; }
.is-paused .marquee-toggle .i-play { display: grid; }
.marquee-wrap.is-paused .marquee-track { animation-play-state: paused; }
.marquee img {
height: clamp(34px, 26px + 1.4vw, 46px); width: auto; object-fit: contain;
filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s, transform .3s;
}
.marquee img:hover { filter: none; opacity: 1; transform: scale(1.06); }
@keyframes slide { to { transform: translateX(-50%); } }
/* ---------- 14. FORM ---------- */
.form-card {
padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
border-radius: var(--r-xl); background: #fff;
border: 1px solid var(--line); box-shadow: var(--sh-lg);
}
.field { display: block; margin-bottom: var(--s-4); }
.field span { display: block; margin-bottom: .4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.field input, .field textarea {
width: 100%; padding: .85rem 1.05rem; border-radius: var(--r-sm);
background: var(--mist-50); border: 1.5px solid var(--line); color: var(--ink);
transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field input:focus, .field textarea:focus {
outline: 0; background: #fff; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(5,168,204,.15);
}
.field-row { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-note { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--ink-mute); line-height: 1.6; }
.form-note a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.form-note a:hover { color: var(--blue); }
.form-note svg, .prose svg, p > svg { display: inline-block; vertical-align: -2px; }
/* reCAPTCHA badge is hidden (it collides with the floating buttons on mobile).
Google permits this as long as the attribution below every form stays visible. */
.grecaptcha-badge { visibility: hidden !important; }
/* Submit outcomes are reported by toasts (section 27), not an inline panel. */
.contact-list { display: grid; gap: var(--s-4); }
.contact-item { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-item .icon-tile { margin: 0; }
.contact-item b { display: block; margin-bottom: .15rem; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); }
.contact-item a, .contact-item p { color: var(--ink); font-weight: 600; }
.contact-item a:hover { color: var(--blue); }
.section--deep .contact-item b { color: var(--cyan); }
.section--deep .contact-item a, .section--deep .contact-item p { color: #dcecf3; }
.section--deep .contact-item a:hover { color: #fff; }
/* ---------- 15. ACCORDION ---------- */
.accordion { display: grid; gap: var(--s-3); }
.acc {
border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
box-shadow: var(--sh-xs); overflow: hidden; transition: border-color .25s, box-shadow .25s;
}
.acc[open] { border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.acc summary {
display: flex; align-items: center; gap: .9rem; cursor: pointer; list-style: none;
padding: 1.1rem 1.25rem; font-weight: 700; color: var(--navy);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
content: ""; margin-left: auto; flex: none; width: 10px; height: 10px;
border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease);
}
.acc[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.acc summary:hover { color: var(--blue); }
.acc-i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--cyan-50); color: var(--blue); flex: none; }
.acc-i svg { width: 17px; height: 17px; }
.acc-body { padding: 0 1.25rem 1.25rem 4.15rem; color: var(--ink-soft); }
.acc-body ul { padding-left: 1.1rem; list-style: disc; }
.acc-body a { font-weight: 600; }
@media (max-width: 30rem) { .acc-body { padding-left: 1.25rem; } }
/* ---------- 16. TEAM ---------- */
.person { text-align: center; }
.person-photo {
position: relative; margin-bottom: var(--s-4); border-radius: var(--r-lg); overflow: hidden;
background: linear-gradient(160deg, var(--mist), var(--cyan-50));
/* Source photos are 465x598 (ratio 0.78). A square frame cropped ~22% off the
bottom of every portrait; 4/5 matches the source so `cover` crops almost
nothing and nobody loses their shoulders. */
aspect-ratio: 4 / 5;
box-shadow: var(--sh-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.person:hover .person-photo { transform: translateY(-6px); box-shadow: var(--sh-md); }
.person h3 { font-size: 1.1rem; }
.person span { font-size: var(--fs-sm); font-weight: 600; color: var(--orange-ink); }
/* ---------- 17. PAGE HEAD (inner pages) ---------- */
.pagehead { position: relative; overflow: clip; padding-block: clamp(2.75rem, 1.5rem + 5vw, 5rem); background: var(--grad-deep); }
.pagehead::before {
content: ""; position: absolute; width: 40rem; height: 40rem; top: -26rem; right: -12rem; border-radius: 50%;
background: radial-gradient(circle, rgba(5,168,204,.42), transparent 62%); filter: blur(50px);
}
.pagehead::after {
content: ""; position: absolute; inset: 0; opacity: .18;
background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
background-size: 70px 70px;
mask-image: radial-gradient(ellipse 70% 100% at 20% 50%, #000, transparent);
-webkit-mask-image: radial-gradient(ellipse 70% 100% at 20% 50%, #000, transparent);
}
.pagehead .container { position: relative; z-index: 1; }
.pagehead h1 { color: #fff; font-size: var(--fs-h1); }
.pagehead p { color: #b7d2de; max-width: 44rem; margin-top: var(--s-4); }
.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: var(--s-4); font-size: var(--fs-sm); color: var(--ink-mute); }
.crumbs a { color: var(--blue); font-weight: 600; }
.crumbs a:hover { color: var(--orange-ink); }
.crumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--ink-mute); }
/* the same crumbs sit on the deep navy pagehead on most pages, but on plain
white on the location pages — so the light-on-dark set is scoped, not global */
.pagehead .crumbs { color: #b7d2de; }
.pagehead .crumbs a { color: #5cc6e3; }
.pagehead .crumbs a:hover { color: #fff; }
.pagehead .crumbs li + li::before { color: #7ea5b6; }
.crumbs ol, .crumbs ul { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0; }
/* ---------- 18. CTA BAND ---------- */
.cta {
position: relative; overflow: hidden; border-radius: var(--r-xl);
padding: clamp(2rem, 1.2rem + 3vw, 3.75rem);
background: var(--grad-brand); box-shadow: var(--sh-lg); color: #fff;
}
.cta::before {
content: ""; position: absolute; width: 26rem; height: 26rem; right: -8rem; top: -12rem; border-radius: 50%;
background: radial-gradient(circle, rgba(255,102,0,.55), transparent 62%); filter: blur(40px);
}
.cta::after {
content: ""; position: absolute; inset: 0; opacity: .13;
background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
background-size: 56px 56px;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.93); margin-top: var(--s-4); max-width: 42rem; }
.cta .btn-row { margin-top: var(--s-6); }
/* ---------- 19. FOOTER ---------- */
.site-footer { background: var(--navy-900); color: #9fc0ce; padding-top: var(--section-y); }
.footer-grid { display: grid; gap: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.footer-brand { max-width: 24rem; }
.footer-brand img { height: 44px; width: auto; margin-bottom: var(--s-4); }
.footer-brand p { font-size: var(--fs-sm); line-height: 1.7; }
.site-footer h3, .site-footer h4 {
margin-bottom: var(--s-4); font-size: var(--fs-xs); font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.footer-links { display: grid; gap: .6rem; }
/* The nudge is a translate declared on the base rule. As `padding-left` set
inside `:hover` it animated in and snapped back out — the transition only
existed while hovered — and it reflowed the link box on every pointer pass. */
.footer-links a {
display: inline-block; font-size: var(--fs-sm); color: #9fc0ce;
transition: color .25s, translate .25s var(--ease);
}
.footer-links a:hover { color: #fff; translate: 4px 0; }
[dir="rtl"] .footer-links a:hover { translate: -4px 0; }
.socials { display: flex; gap: .55rem; margin-top: var(--s-5); }
.socials a {
display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #cfe3ec;
transition: transform .3s var(--ease), background-color .3s, color .3s;
}
.socials a:hover { transform: translateY(-3px); background: var(--orange); color: #fff; border-color: transparent; }
.socials svg { width: 18px; height: 18px; }
.footer-bottom {
margin-top: var(--s-7); padding-block: var(--s-5);
border-top: 1px solid rgba(255,255,255,.10);
display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; align-items: center;
font-size: var(--fs-xs);
}
.footer-bottom a { color: #9fc0ce; }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }
/* ---------- 20. FLOATING UI ---------- */
/* Logical inset, not right/bottom. The skip link, the hero glows and the float
cards all carry an explicit [dir="rtl"] patch and this one was missed, so on
the Arabic pages the buttons stayed pinned to the right edge instead of
mirroring with the text. Logical properties need no patch at all. */
.floaties {
position: fixed;
inset-inline-end: clamp(.75rem, .3rem + 1vw, 1.5rem);
inset-block-end: clamp(.75rem, .3rem + 1vw, 1.5rem);
z-index: 90; display: grid; gap: .6rem; justify-items: end;
}
.fab {
--fab-size: 3.25rem; /* one rhythm for both floaties */
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
min-height: var(--fab-size); padding-inline: 1.05rem;
border-radius: var(--r-pill);
font-size: .88rem; font-weight: 700; letter-spacing: -.01em;
color: #fff; background: #0b8043;
box-shadow: 0 12px 26px -12px rgba(11,128,67,.65);
transition: translate .45s var(--ease), scale .45s var(--ease), box-shadow .3s var(--ease);
}
.fab:hover { color: #fff; translate: 0 -3px; scale: 1.03; }
.fab:active { translate: 0 -1px; scale: .99; }
.fab svg { width: 22px; height: 22px; flex: none; }
.fab--top {
width: var(--fab-size); height: var(--fab-size); padding-inline: 0;
background: #fff; color: var(--ink-strong); border: 1px solid var(--line);
box-shadow: var(--sh-md); opacity: 0; pointer-events: none; transform: translateY(10px);
transition: opacity .3s, transform .3s var(--ease),
translate .45s var(--ease), scale .45s var(--ease);
}
.fab--top.is-on { opacity: 1; pointer-events: auto; transform: none; }
/* Icon-only below 30rem: a circle of the same size rather than a lopsided stub.
.fab-label is display:none here, which is why the markup carries aria-label
-- icon() renders its