:root { --ink:#17191a; --ink-soft:#242729; --paper:#f3f1ec; --paper-deep:#e9e5dd; --line:rgba(23,25,26,.16); --warm:#ba7953; --muted:#69706e; --max:1240px; --serif:Georgia,"Times New Roman",serif; --sans:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 var(--sans); }
img { display:block; max-width:100%; }
a { color:inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.site-header { position:absolute; z-index:3; inset:0 0 auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:30px; width:min(calc(100% - 64px),var(--max)); margin:auto; min-height:84px; color:#fff; }
.brand { display:inline-flex; align-items:center; gap:9px; color:inherit; text-decoration:none; font-size:.83rem; font-weight:800; letter-spacing:.16em; white-space:nowrap; }
.brand-logo { width:28px; height:28px; }
.brand-horizontal { width:200px; height:auto; }
.brand i { color:#c18a65; font-style:normal; }
.nav-links { display:flex; justify-content:center; gap:24px; font-size:.78rem; letter-spacing:.04em; }
.nav-links a,.locale-actions a { text-decoration:none; opacity:.82; }
.nav-links a:hover,.locale-actions a:hover,.locale-actions .active { opacity:1; }
.locale-actions { display:flex; align-items:center; gap:7px; font-size:.75rem; letter-spacing:.04em; }
.nav-toggle { display:none; }
.conversion-hero { position:relative; isolation:isolate; min-height:770px; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); color:#fff; }
.conversion-hero-media,.conversion-hero-media::after { position:absolute; inset:0; z-index:-1; }
.conversion-hero-media img { width:100%; height:100%; object-fit:cover; object-position:center; }
.conversion-hero-media::after { content:""; background:linear-gradient(90deg,rgba(12,14,15,.92) 0%,rgba(12,14,15,.63) 41%,rgba(12,14,15,.08) 76%),linear-gradient(0deg,rgba(12,14,15,.54),transparent 46%); }
.conversion-hero-inner,.section-shell { width:min(calc(100% - 64px),var(--max)); margin-inline:auto; }
.conversion-hero-inner { padding:160px 0 116px; max-width:min(calc(100% - 64px),var(--max)); }
.eyebrow { margin:0 0 18px; color:var(--warm); font-size:.72rem; font-weight:800; letter-spacing:.18em; line-height:1.4; text-transform:uppercase; }
.conversion-hero h1 { max-width:760px; margin:0; font:clamp(3.1rem,6.3vw,6.15rem)/.98 var(--serif); letter-spacing:-.058em; }
.hero-copy { max-width:580px; margin:28px 0 0; color:rgba(255,255,255,.78); font-size:1.1rem; }
.hero-actions { display:flex; gap:13px; flex-wrap:wrap; margin-top:34px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:22px; min-height:48px; padding:12px 18px; border:1px solid transparent; font-size:.78rem; font-weight:800; letter-spacing:.07em; text-decoration:none; text-transform:uppercase; transition:background-color .2s,color .2s,border-color .2s; }
.button.primary { background:var(--warm); color:#fff; }.button.primary:hover { background:#d08e64; }.button.secondary { border-color:rgba(255,255,255,.52); color:#fff; }.button.secondary:hover { background:#fff;color:var(--ink); }.button.secondary.dark { border-color:var(--ink); color:var(--ink); }.button.secondary.dark:hover { background:var(--ink); color:#fff; }
.hero-note { margin:22px 0 0; color:rgba(255,255,255,.55); font-size:.78rem; }
.hero-scroll { position:absolute; bottom:28px; right:max(32px,calc((100% - var(--max))/2)); color:#fff; font-size:.7rem; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }.hero-scroll span { margin-left:9px; color:var(--warm); }
.section-shell { padding:124px 0; }.section-intro { max-width:745px; }.section-intro h2,.method-copy h2,.project-brief h2 { margin:0; font:clamp(2.35rem,4.6vw,4.65rem)/1.02 var(--serif); letter-spacing:-.05em; }.section-intro>p:not(.eyebrow) { margin:23px 0 0; color:var(--muted); max-width:590px; }
.audience-pathways { border-bottom:1px solid var(--line); }.pathway-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:68px; border-top:1px solid var(--line); }.pathway { min-height:305px; display:flex; flex-direction:column; padding:24px 22px 20px 0; color:inherit; text-decoration:none; border-right:1px solid var(--line); transition:background .2s,padding .2s; }.pathway:not(:first-child) { padding-left:22px; }.pathway:last-child { border-right:0; }.pathway:hover { background:rgba(186,121,83,.08); }.pathway span,.card-number { color:var(--warm); font-size:.74rem; font-weight:800; letter-spacing:.12em; }.pathway h3 { margin:58px 0 8px; font:1.55rem/1.1 var(--serif); }.pathway p { margin:0; color:var(--muted); font-size:.9rem; }.pathway b { margin-top:auto; font-size:.73rem; letter-spacing:.08em; text-transform:uppercase; }.pathway i,.inline-link span { color:var(--warm); font-style:normal; }
.capability-split { background:var(--ink); color:#fff; }.split-intro>p:not(.eyebrow) { color:rgba(255,255,255,.61); }.capability-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:70px; background:rgba(255,255,255,.22); }.capability-card { min-height:420px; padding:35px; background:var(--ink-soft); }.capability-card.technical { background:#1c1e1f; }.capability-card h3 { margin:65px 0 12px; font:clamp(2rem,3vw,3.15rem)/1 var(--serif); letter-spacing:-.04em; }.capability-card>p:not(.card-number) { max-width:470px; color:rgba(255,255,255,.69); }.capability-links { display:grid; gap:9px; margin-top:39px; }.capability-links a { color:#fff; font-size:.83rem; text-decoration:none; }.capability-links a::after { content:" ↗"; color:var(--warm); }.capability-links a:hover { color:#ead7ca; }
.production-method { display:grid; grid-template-columns:minmax(0,1.03fr) minmax(320px,.97fr); align-items:center; gap:clamp(38px,7vw,118px); }.method-image { min-height:610px; overflow:hidden; }.method-image img { width:100%; height:100%; min-height:610px; object-fit:cover; }.method-copy ol { margin:41px 0 31px; padding:0; list-style:none; border-top:1px solid var(--line); }.method-copy li { display:grid; grid-template-columns:170px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }.method-copy strong { font-size:.73rem; letter-spacing:.1em; text-transform:uppercase; }.method-copy span { color:var(--muted); font-size:.91rem; }.inline-link { font-size:.78rem; font-weight:800; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.selected-work { padding-top:45px; }.work-intro { max-width:690px; }.work-intro .button { margin-top:30px; }.work-grid { display:grid; grid-template-columns:1.04fr .96fr; grid-template-rows:330px 330px; gap:12px; margin-top:70px; }.work-card { position:relative; min-height:0; overflow:hidden; background:var(--ink); color:#fff; text-decoration:none; }.work-card.tall { grid-row:span 2; }.work-card.wide { grid-column:span 1; }.work-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }.work-card::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.72)); }.work-card:hover img { transform:scale(1.04); }.work-card span { position:absolute; z-index:1; bottom:20px; left:20px; right:20px; display:flex; justify-content:space-between; gap:15px; align-items:end; }.work-card b { font:1.4rem/1.05 var(--serif); }.work-card em { color:rgba(255,255,255,.72); font-size:.72rem; font-style:normal; letter-spacing:.08em; text-align:right; text-transform:uppercase; }
.inquiry-band { position:relative; isolation:isolate; overflow:hidden; background:#272a2b; color:#fff; }.inquiry-image,.inquiry-image::after { position:absolute; inset:0; z-index:-1; }.inquiry-image img { width:100%; height:100%; object-fit:cover; object-position:center; }.inquiry-image::after { content:""; background:linear-gradient(90deg,rgba(20,22,23,.95),rgba(20,22,23,.75)); }.project-brief { padding:116px 0; }.project-brief h2 { max-width:820px; }.brief-grid { display:grid; grid-template-columns:repeat(2,minmax(0,275px)); gap:40px; margin-top:42px; }.brief-grid ul { margin:0; padding:0; list-style:none; }.brief-grid li { padding:11px 0; border-top:1px solid rgba(255,255,255,.23); color:rgba(255,255,255,.78); font-size:.89rem; }.brief-actions { display:flex; align-items:center; flex-wrap:wrap; gap:28px; margin-top:39px; }.contact-whatsapp { color:#fff; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }.contact-whatsapp span { color:var(--warm); }
.conversion-footer { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; width:min(calc(100% - 64px),var(--max)); margin:auto; padding:57px 0; }.conversion-footer .footer-logo { width:190px; }.conversion-footer p { max-width:330px; margin:17px 0 0; color:var(--muted); font-size:.84rem; }.conversion-footer nav,.footer-contact { display:grid; align-content:start; gap:8px; font-size:.78rem; }.conversion-footer a { text-decoration:none; }.conversion-footer nav a:hover,.footer-contact a:hover { color:var(--warm); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media (max-width:900px) { .site-header { width:min(calc(100% - 40px),var(--max)); grid-template-columns:auto auto 1fr; gap:17px; }.nav-toggle { display:block; position:relative; z-index:4; width:38px; height:38px; border:0; background:transparent; color:#fff; }.nav-toggle-lines,.nav-toggle-lines::before,.nav-toggle-lines::after { position:absolute; left:8px; width:22px; height:1px; background:currentColor; content:""; }.nav-toggle-lines { top:18px; }.nav-toggle-lines::before { top:-7px; left:0; }.nav-toggle-lines::after { top:7px; left:0; }.nav-links { display:none; }.nav-open .nav-links { position:absolute; inset:0 -20px auto; display:grid; gap:0; padding:93px 20px 24px; background:#17191a; text-align:center; }.nav-open .nav-links a { padding:12px; }.locale-actions { justify-self:end; }.conversion-hero { min-height:690px; }.pathway-grid { grid-template-columns:repeat(2,1fr); }.pathway:nth-child(2) { border-right:0; }.pathway:nth-child(n+3) { border-top:1px solid var(--line); }.capability-grid,.production-method { grid-template-columns:1fr; }.method-image,.method-image img { min-height:420px; }.work-grid { grid-template-rows:300px 260px; }.conversion-footer { grid-template-columns:1fr 1fr; }.conversion-footer>div:first-child { grid-column:span 2; } }
@media (max-width:600px) { .site-header,.conversion-hero-inner,.section-shell,.conversion-footer { width:min(calc(100% - 32px),var(--max)); }.site-header { min-height:70px; }.brand { font-size:.72rem; }.brand-logo { width:24px; height:24px; }.conversion-hero { min-height:670px; }.conversion-hero-media img { object-position:63% center; }.conversion-hero-inner { padding:145px 0 92px; }.conversion-hero h1 { font-size:clamp(2.85rem,13.4vw,4.45rem); }.hero-copy { font-size:1rem; }.hero-actions .button { width:100%; }.hero-scroll { display:none; }.section-shell { padding:78px 0; }.section-intro h2,.method-copy h2,.project-brief h2 { font-size:clamp(2.25rem,11vw,3.15rem); }.pathway-grid { margin-top:42px; }.pathway { min-height:250px; padding:20px 16px 18px 0; }.pathway:not(:first-child) { padding-left:16px; }.pathway h3 { margin-top:39px; font-size:1.35rem; }.capability-grid { margin-top:42px; }.capability-card { min-height:350px; padding:26px; }.capability-card h3 { margin-top:52px; }.method-image,.method-image img { min-height:300px; }.method-copy li { grid-template-columns:1fr; gap:5px; }.selected-work { padding-top:15px; }.work-grid { grid-template-columns:1fr; grid-template-rows:340px repeat(3,240px); margin-top:42px; }.work-card.tall { grid-row:auto; }.work-card.wide { grid-column:auto; }.work-card span { align-items:start; flex-direction:column; gap:5px; }.work-card em { text-align:left; }.project-brief { padding:82px 0; }.brief-grid { grid-template-columns:1fr; gap:0; margin-top:31px; }.brief-grid ul+ul { margin-top:-1px; }.brief-actions { align-items:flex-start; flex-direction:column; gap:20px; }.conversion-footer { grid-template-columns:1fr; padding:45px 0; }.conversion-footer>div:first-child { grid-column:auto; }.conversion-footer nav { grid-template-columns:1fr 1fr; }.locale-actions { font-size:.67rem; } }
@media (max-width:600px) { .brand-horizontal { width:156px; } }
.arabic-conversion { font-family:Tahoma,Arial,sans-serif; text-align:right; }
.arabic-conversion .conversion-hero h1,.arabic-conversion .section-intro h2,.arabic-conversion .method-copy h2,.arabic-conversion .project-brief h2 { font-family:Tahoma,Arial,sans-serif; font-weight:700; letter-spacing:0; }
.arabic-conversion .conversion-hero-media::after { background:linear-gradient(270deg,rgba(12,14,15,.92) 0%,rgba(12,14,15,.63) 41%,rgba(12,14,15,.08) 76%),linear-gradient(0deg,rgba(12,14,15,.54),transparent 46%); }
.arabic-conversion .pathway { border-right:0; border-left:1px solid var(--line); padding:24px 0 20px 22px; }.arabic-conversion .pathway:not(:first-child) { padding-right:22px; padding-left:22px; }.arabic-conversion .pathway:last-child { border-left:0; }
.arabic-conversion .work-card em { text-align:left; }.arabic-conversion .hero-scroll { right:auto; left:max(32px,calc((100% - var(--max))/2)); }
@media (max-width:900px) { .arabic-conversion .pathway:nth-child(2) { border-left:0; }.arabic-conversion .pathway:nth-child(n+3) { border-top:1px solid var(--line); } }
@media (max-width:600px) { .arabic-conversion .pathway { padding:20px 0 18px 16px; }.arabic-conversion .pathway:not(:first-child) { padding-right:16px; padding-left:16px; }.arabic-conversion .work-card em { text-align:right; } }