/* Peacock public site. Logical properties everywhere so RTL/LTR flip from <html dir>. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: var(--step-0); line-height: 1.75; color: var(--ink); background: var(--paper); transition: background .4s, color .4s; text-rendering: optimizeLegibility; }
[dir="ltr"] body { line-height: 1.6; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1em; }
.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 820px); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--gutter), 1480px); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--navy); padding: 10px 16px; border-radius: var(--r-s); font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- buttons ---------- */
.btn { --bg: var(--emerald); --fg: #fff; display: inline-flex; align-items: center; gap: .6em; padding: .82em 1.5em; border-radius: 999px; border: 0; background: var(--bg); color: var(--fg); font: 700 var(--step-0)/1.2 var(--font); text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; box-shadow: 0 10px 30px -14px var(--bg); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px var(--bg); }
.btn--gold { --bg: var(--gold); --fg: var(--navy); }
.btn--ghost { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--light { --bg: #fff; --fg: var(--deep); }
.btn--sm { padding: .55em 1.1em; font-size: var(--step--1); }
.btn .ic { transition: transform .25s var(--ease); }
.btn:hover .ic--arrow { transform: translateX(4px); }
[dir="rtl"] .ic--arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .ic--arrow { transform: scaleX(-1) translateX(4px); }
.link-arrow { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--deep); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; transition: background .3s, box-shadow .3s, color .3s; }
.hdr__in { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.hdr__logo { display: flex; align-items: center; flex: none; }
.hdr__logo img { width: 132px; height: auto; }
.hdr__nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.hdr__nav > a, .hdr__nav > .mega > button { padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: var(--step--1); background: none; border: 0; color: inherit; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.hdr__nav > a:hover, .hdr__nav > .mega > button:hover, .hdr__nav a[aria-current="page"] { background: rgba(4,157,125,.1); color: var(--deep); }
.hdr__tools { display: flex; align-items: center; gap: 8px; }
.langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(4,157,125,.08); }
.langs a { padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; text-decoration: none; }
.langs a[aria-current="true"] { background: var(--emerald); color: #fff; }
.hdr.is-solid { background: color-mix(in srgb, #C9D9D4 80%, transparent); backdrop-filter: blur(14px); box-shadow: 0 6px 30px -20px rgba(0,44,81,.5); }
.hdr--over:not(.is-solid) { color: #fff; }
.hdr--over:not(.is-solid) .hdr__nav > a:hover, .hdr--over:not(.is-solid) .hdr__nav > .mega > button:hover { background: rgba(255,255,255,.12); color: #fff; }
.hdr--over:not(.is-solid) .langs { background: rgba(255,255,255,.12); }
.hdr--over { position: fixed; inset-inline: 0; }
.burger { display: none; background: none; border: 0; color: inherit; padding: 8px; cursor: pointer; }
.burger .ic { width: 28px; height: 28px; }

.mega { position: relative; }
.mega__panel { position: absolute; inset-inline-start: 50%; translate: -50% 0; top: calc(100% + 10px); width: min(920px, 92vw); background: var(--card); color: var(--ink); border-radius: var(--r-l); box-shadow: 0 30px 80px -30px rgba(0,44,81,.45); padding: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s var(--ease); }
[dir="rtl"] .mega__panel { translate: 50% 0; }
.mega[data-open] .mega__panel { opacity: 1; visibility: visible; transform: none; }
.mega__col { padding: 16px; border-radius: var(--r); background: var(--mint); }
.mega__col h3 { font-size: var(--step-0); margin-bottom: .6em; }
.mega__col h3 a { text-decoration: none; color: var(--deep); }
.mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__col li a { display: block; padding: 6px 8px; border-radius: 8px; text-decoration: none; font-size: var(--step--1); }
.mega__col li a:hover { background: var(--card); color: var(--deep); }
.mega__col--gold { background: var(--note); }
.mega__col--navy { background: var(--navy-tint); }

.drawer { position: fixed; inset: 0; z-index: 60; background: var(--night); color: #fff; padding: 22px var(--gutter) 40px; overflow-y: auto; transform: translateY(-100%); transition: transform .35s var(--ease); visibility: hidden; }
.drawer[data-open] { transform: none; visibility: visible; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.drawer__btns { display: flex; align-items: center; gap: 10px; }
.drawer__search { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.drawer nav a { display: block; padding: 12px 0; font-size: var(--step-2); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.drawer .langs { margin-top: 24px; width: max-content; background: rgba(255,255,255,.1); }

/* ---------- sections ---------- */
.sec { padding-block: clamp(64px, 9vw, 130px); position: relative; }
.sec--mint { background: linear-gradient(180deg, var(--mint), var(--paper)); }
.sec--dark { background: radial-gradient(120% 90% at 85% 0%, #0E3B33 0%, var(--night) 55%); color: #E8F3F1; }
.sec--emerald { background: linear-gradient(135deg, var(--emerald), var(--deep)); color: #fff; }
.sec--gold { background: linear-gradient(135deg, #FFF3CC, #FFE38A); }
.sec--tight { padding-block: clamp(40px, 6vw, 70px); }
.sec[data-align="center"] .sec__head { text-align: center; margin-inline: auto; }
.sec__head { max-width: 760px; margin-bottom: clamp(30px, 4vw, 56px); }
.eyebrow { display: inline-flex; align-items: center; gap: .6em; font-weight: 700; font-size: var(--step--1); color: var(--emerald); letter-spacing: .02em; margin-bottom: .8em; }
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--emerald)); }
.sec--dark .eyebrow, .sec--emerald .eyebrow { color: var(--sun); }
.h-display { font-size: var(--step-4); letter-spacing: -.01em; }
.h-sec { font-size: var(--step-3); }
.lead { font-size: var(--step-1); color: var(--ink-2); }
.sec--dark .lead, .sec--emerald .lead { color: rgba(255,255,255,.78); }
.gold-ink { background: linear-gradient(100deg, var(--gold), var(--sun) 40%, #E9A800); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* the gradient only paints inside the line box: pad it so the dots of ش and tall letters are not cut off */
.hero__title .gold-ink, .lhero__title .lhero__shine { padding-block: .18em; margin-block: -.18em; }
.em-ink { color: var(--emerald); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(100svh, 920px); display: grid; align-items: center; overflow: hidden; background: var(--night); color: #fff; isolation: isolate; padding-top: 90px; }
.hero__art { position: absolute; inset: 0; z-index: -2; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; opacity: .85; transform: scale(1.06); animation: heroDrift 22s ease-in-out infinite alternate; }
[dir="ltr"] .hero__art img { transform: scale(1.06) scaleX(-1); animation-name: heroDriftL; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,26,23,.15) 0%, rgba(6,26,23,.55) 45%, rgba(6,26,23,.95) 75%); }
[dir="ltr"] .hero::before { background: linear-gradient(270deg, rgba(6,26,23,.15) 0%, rgba(6,26,23,.55) 45%, rgba(6,26,23,.95) 75%); }
.hero__ribbons { position: absolute; inset: auto 0 -2px 0; z-index: -1; width: 100%; height: 46%; pointer-events: none; }
.hero__ribbons path { fill: none; stroke-width: 2; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 3.2s var(--ease) forwards; }
.hero__ribbons path:nth-child(2) { animation-delay: .4s; }
.hero__ribbons path:nth-child(3) { animation-delay: .8s; }
.hero__body { max-width: 760px; padding-block: 60px 120px; }
.hero__title { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.4rem); line-height: 1.12; margin-bottom: .35em; }
.hero__title span { display: block; }
.hero__text { font-size: var(--step-1); color: rgba(255,255,255,.82); max-width: 560px; margin-bottom: 1.8em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
/* vertical film beside the headline: sits on the opposite side of the text (left in Arabic), aligned with the header's CTA edge */
.hero > .wrap { position: relative; }
.hero__reel { position: absolute; inset-block: 0; inset-inline-end: 0; margin: auto 0; height: clamp(360px, 62vh, 540px); aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: var(--night-2); border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 40px 70px -30px rgba(0,0,0,.7); z-index: 1; }
.hero__reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__sound { position: absolute; inset-block-end: 14px; inset-inline-end: 14px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(6,26,23,.55); color: #fff; display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s, transform .3s var(--ease); }
.hero__sound:hover { background: rgba(6,26,23,.8); transform: scale(1.06); }
.hero__sound:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
.hero__sound .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero__sound .sound-on { display: none; }
.hero__sound.is-on .sound-on { display: inline; }
.hero__sound.is-on .sound-off { display: none; }
@media (max-width: 1100px) {
  .hero__reel { position: relative; inset: auto; height: auto; width: min(100%, 300px); margin: 36px auto 0; }
}
.hero__slogan { position: absolute; inset-block-end: 28px; inset-inline-start: var(--gutter); font-size: var(--step--1); color: rgba(255,255,255,.6); display: flex; gap: 10px; align-items: center; }
.hero__slogan::before { content: ""; width: 40px; height: 1px; background: currentColor; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes heroDrift { to { transform: scale(1.12) translate(-1.5%, 1%); } }
@keyframes heroDriftL { to { transform: scale(1.12) scaleX(-1) translate(-1.5%, 1%); } }

.page-hero { padding: 150px 0 clamp(50px, 7vw, 90px); background: radial-gradient(90% 120% at 100% 0%, var(--mint-2), var(--mint) 45%, var(--paper) 100%); position: relative; overflow: hidden; }
.page-hero--dark { background: radial-gradient(120% 90% at 85% 0%, #0E3B33 0%, var(--night) 60%); color: #fff; }
.page-hero h1 { font-size: var(--step-4); max-width: 900px; }
.page-hero .lead { max-width: 720px; }
.page-hero > .wrap { position: relative; z-index: 1; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; font-size: var(--step--1); color: var(--ink-2); }
.page-hero--dark .crumbs { color: rgba(255,255,255,.6); }
.crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: 6px; opacity: .5; }
.crumbs a { text-decoration: none; }

/* ---------- intro strip ---------- */
.intro { background: var(--night-2); color: #fff; overflow: hidden; }
.marquee { display: flex; gap: 48px; padding-block: 22px; white-space: nowrap; animation: marquee 38s linear infinite; width: max-content; }
[dir="rtl"] .marquee { animation-name: marqueeR; }
.marquee span { font-size: var(--step-2); font-weight: 700; display: inline-flex; align-items: center; gap: 48px; color: rgba(255,255,255,.85); }
.marquee span::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marqueeR { to { transform: translateX(50%); } }
.orbit { overflow: hidden; padding-block: 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.orbit__track { display: flex; gap: 22px; width: max-content; animation: marquee 46s linear infinite; }
[dir="rtl"] .orbit__track { animation-name: marqueeR; }
.orbit__chip { flex: none; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.3), rgba(255,255,255,.05) 62%); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 16px 30px -18px rgba(0,0,0,.6); }
.orbit__chip .ic { width: 28px; height: 28px; }
.intro__row { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.08); border-top: 1px solid rgba(255,255,255,.08); }
.intro__row > div { background: var(--night-2); padding: 28px var(--gutter); }
.intro__row p { margin: 0; color: rgba(255,255,255,.72); }
.intro__row > div { text-align: right; }
.intro__row b.ltr { text-align: right; }
.intro__row b { display: block; font-size: var(--step-3); color: var(--sun); line-height: 1.1; }

/* ---------- service doors ---------- */
.doors { display: flex; gap: 14px; min-height: 520px; }
.door { --tone: var(--emerald); flex: 1; position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--tone); color: #fff; padding: 32px; display: flex; flex-direction: column; transition: box-shadow .4s; text-decoration: none; isolation: isolate; min-width: 0; }
.door--gold { --tone: #E9B21F; color: var(--navy); }
/* digital solutions: the peacock tail, from emerald through teal-blue into the brand navy */
.door--navy { --tone: #0B6F8F; background: linear-gradient(160deg, var(--emerald) 0%, #0B6F8F 52%, var(--navy) 100%); }
.door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 60% at 100% 0%, rgba(255,255,255,.28), transparent 60%); }
.door__num { font-size: var(--step--1); opacity: .7; font-weight: 700; }
.door__num { align-self: flex-start; }
.door__title { font-size: var(--step-2); margin-top: auto; }
.door__summary { opacity: .85; max-width: 420px; }
.door__list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .4s; }
.door__list li { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.door__list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .6; }
.door__glass { position: relative; width: 108px; height: 108px; margin-block: 36px auto; border-radius: 38px; display: grid; place-items: center; color: #fff; background: radial-gradient(120% 90% at 28% 12%, rgba(255,255,255,.75), rgba(255,255,255,.18) 50%, rgba(255,255,255,.06) 80%); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border: 1px solid rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -20px 34px -22px rgba(255,255,255,.4), 0 30px 48px -22px rgba(0,0,0,.5); transition: transform .6s var(--ease); }
/* a fine inner ring, like the eye of a feather */
.door__glass::after { content: ""; position: absolute; inset: 8px; border-radius: 30px; border: 1px solid rgba(255,255,255,.3); pointer-events: none; }
.door__glass .ic { width: 50px; height: 50px; stroke-width: 1.6; filter: drop-shadow(0 6px 10px rgba(0,0,0,.2)); transition: transform .6s var(--ease); }
.door--gold .door__glass { color: var(--navy); }
.door--gold .door__glass::after { border-color: rgba(0,44,81,.22); }
.door:hover .door__glass .ic { transform: scale(1.1) rotate(-6deg); }
.door__go { position: absolute; top: 28px; inset-inline-end: 28px; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s; }
.door:hover .door__list, .door:focus-visible .door__list { max-height: 360px; opacity: 1; }
.door:hover .door__glass { transform: translateY(-4px); }
.door:hover .door__go { transform: rotate(-45deg); background: rgba(255,255,255,.35); }
[dir="rtl"] .door:hover .door__go { transform: rotate(45deg); }

/* ---------- work grid ---------- */
.work { columns: 3 300px; column-gap: 18px; }
.work--featured { columns: 2 340px; }
.tile { break-inside: avoid; margin-bottom: 18px; position: relative; display: block; border-radius: var(--r-l); overflow: hidden; background: var(--mint); text-decoration: none; color: #fff; isolation: isolate; }
.tile img { width: 100%; height: auto; transition: transform .8s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6,26,23,.85)); opacity: .75; transition: opacity .4s; }
.tile__cap { position: absolute; inset-inline: 22px; bottom: 18px; z-index: 1; transition: transform .4s var(--ease); }
.tile__cap h3 { font-size: var(--step-1); margin: 0; }
.tile__cap span { font-size: var(--step--1); opacity: .8; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.05); }
.tile:hover::after { opacity: 1; }
.tile:hover .tile__cap { transform: translateY(-6px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.chip { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); text-decoration: none; font-weight: 700; font-size: var(--step--1); cursor: pointer; font-family: inherit; color: inherit; }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--emerald); border-color: var(--emerald); color: #fff; }
/* glass mode paints every chip with the glass fill; the selected chip keeps the brand green */
html .chip[aria-pressed="true"], html .chip[aria-current="true"] { background: var(--emerald) !important; border-color: var(--emerald) !important; color: #fff !important; }
.tile[hidden] { display: none; }

/* ---------- features (why) ---------- */
.why { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.why__art { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/5; position: relative; }
.why__art img { width: 100%; height: 100%; object-fit: cover; }
.orbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.orb { width: clamp(118px, 13vw, 150px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 16px; font-weight: 700; line-height: 1.35; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); transition: transform .4s var(--ease), background .3s; }
.orb:hover { transform: translateY(-6px) scale(1.04); background: rgba(246,195,48,.18); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card { padding: 28px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sec--dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.card h3 { font-size: var(--step-1); }
.card__ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--mint); color: var(--deep); margin-bottom: 16px; }
.card__ic .ic { width: 26px; height: 26px; }

/* ---------- process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; counter-reset: s; }
.steps::before { content: ""; position: absolute; top: 34px; inset-inline: 30px; height: 2px; background: var(--line); }
.steps::after { content: ""; position: absolute; top: 34px; inset-inline-start: 30px; height: 2px; width: calc((100% - 60px) * var(--p, 0)); background: linear-gradient(90deg, var(--gold), var(--emerald)); transition: width .2s linear; }
.step { position: relative; z-index: 1; }
.step__n { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; font-size: var(--step-1); font-weight: 700; background: var(--card); border: 2px solid var(--line); color: var(--deep); margin-bottom: 18px; transition: .4s var(--ease); }
.step.is-on .step__n { background: var(--emerald); border-color: var(--emerald); color: #fff; transform: scale(1.06); }
.step h3 { font-size: var(--step-1); }
.step p { color: var(--ink-2); }

/* ---------- metrics ---------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.metric { padding: 34px 28px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); position: relative; overflow: hidden; }
.metric b { display: block; font-size: var(--step-5); line-height: 1; color: var(--deep); direction: ltr; text-align: start; }
.metric span { font-weight: 700; color: var(--ink-2); }
.metric > span { display: block; }
/* Arabic: number on the right, label on the left; English and Turkish: the reverse */
[dir="rtl"] .metric b { text-align: right; }
[dir="rtl"] .metric > span { text-align: left; }
[dir="ltr"] .metric b { text-align: left; }
[dir="ltr"] .metric > span { text-align: right; }
.metric::after { content: ""; position: absolute; inset-inline-end: -30px; bottom: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(246,195,48,.35), transparent 70%); }
.metrics__note { margin-top: 18px; color: var(--ink-2); font-weight: 700; }

/* ---------- partners ---------- */
.logos { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logos__track { display: flex; gap: 22px; width: max-content; animation: marquee 50s linear infinite; }
[dir="rtl"] .logos__track { animation-name: marqueeR; }
.logos:hover .logos__track { animation-play-state: paused; }
.logo-cell { width: 180px; height: 110px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; padding: 14px; }
.logo-cell img { max-height: 76px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: .3s; }
.logo-cell:hover img { filter: none; opacity: 1; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.logo-grid .logo-cell { width: auto; }

/* ---------- tool cta ---------- */
.toolcta { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.sheet { background: var(--card); color: var(--ink); border-radius: 22px; padding: 26px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); transform: rotate(-3deg); position: relative; aspect-ratio: 1/1.25; display: grid; grid-template-rows: auto 1fr auto auto; gap: 14px; }
.sheet + .sheet { position: absolute; }
.sheet__hd { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-2); }
.sheet__logo { border: 1.5px dashed rgba(4,157,125,.5); border-radius: 12px; display: grid; place-items: center; position: relative; }
.sheet__logo svg { width: 55%; color: var(--deep); }
.sheet__sw { display: flex; gap: 8px; }
.sheet__sw i { flex: 1; height: 46px; border-radius: 10px; }
.sheet__ft { font-size: .7rem; color: #9AA9B2; display: flex; justify-content: space-between; }
.toolcta__stack { position: relative; padding: 20px; }
.toolcta__stack::before { content: ""; position: absolute; inset: 40px 0 0 40px; border-radius: 22px; background: var(--gold); transform: rotate(5deg); opacity: .9; }

/* ---------- final cta ---------- */
.final { position: relative; overflow: hidden; background: var(--night); color: #fff; }
.final__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: blur(14px); transform: scale(1.08); }
.final__card { position: relative; margin-inline: auto; max-width: 820px; text-align: center; padding: clamp(36px, 6vw, 70px); border-radius: var(--r-xl); background: linear-gradient(150deg, rgba(4,157,125,.88), rgba(0,90,77,.9)); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 50px 90px -40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.25); backdrop-filter: blur(10px); }
.final__card img.logo { width: 150px; margin: 0 auto 26px; filter: brightness(0) invert(1); }
@media (max-width: 700px) { .final__card > .btn + .btn { margin-top: 14px; } }
.contact-phones { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.contact-phones a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.contact-phones .cp-name { font-weight: 700; opacity: .85; }
.contact-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin: 24px 0 30px; }
.contact-row a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; opacity: .92; }
.contact-row a:hover { opacity: 1; text-decoration: underline; }

/* ---------- prose / detail ---------- */
.prose { font-size: var(--step-0); }
.prose p { color: var(--ink-2); }
.split { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.aside { position: sticky; top: 100px; padding: 28px; border-radius: var(--r-l); background: var(--mint); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 4px; border-radius: 50%; background: var(--emerald) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat; }
.note { padding: 14px 18px; border-radius: var(--r); background: var(--note); border-inline-start: 4px solid var(--gold); font-size: var(--step--1); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gallery a { border-radius: var(--r); overflow: hidden; display: block; background: var(--mint); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .6s var(--ease); }
.gallery a:hover img { transform: scale(1.04); }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(6,26,23,.94); display: grid; place-items: center; padding: 30px 84px; }
.lightbox img { max-height: 86vh; max-width: 100%; width: auto; border-radius: var(--r); }
.lightbox button { position: absolute; background: var(--card); border: 0; border-radius: 50%; width: 46px; height: 46px; cursor: pointer; display: grid; place-items: center; font-size: 26px; line-height: 1; color: var(--ink, #061A17); }
.lightbox [hidden] { display: none !important; }
.lightbox__close { top: 20px; inset-inline-end: 20px; font-size: 30px !important; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { inset-inline-end: 20px; }
.lightbox__nav--next { inset-inline-start: 20px; }
.lightbox__nav:hover, .lightbox__nav:focus-visible, .lightbox__close:focus-visible { background: #fff; }
.lightbox__count { position: absolute; bottom: 20px; inset-inline: 0; text-align: center; color: #fff; font-size: 14px; direction: ltr; opacity: .85; }
@media (max-width: 600px) {
  .lightbox { padding: 64px 12px 40px; }
  .lightbox__nav { top: auto; bottom: 48px; transform: none; width: 42px; height: 42px; }
}
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: var(--step-1); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6em; line-height: 1; color: var(--emerald); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 12px 0 0; color: var(--ink-2); }
.vm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vm > div { padding: 32px; border-radius: var(--r-l); background: var(--glass); color: #fff; }
.vm > div:nth-child(2) { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
/* values box: warm orange from the logo's gold, with dark text for contrast */
.vm > div:nth-child(3) { background: linear-gradient(140deg, #F9C27A 0%, #EFA263 100%); color: #2A1A08; }
.vm ul { margin: 0; padding-inline-start: 1.2em; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: var(--step--1); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); font: inherit; color: inherit; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--emerald); outline: none; box-shadow: 0 0 0 4px rgba(4,157,125,.15); }
.field .err, .errorlist { color: var(--danger); font-size: var(--step--1); margin: 4px 0 0; list-style: none; padding: 0; }
.field--check { display: flex; gap: 10px; align-items: flex-start; }
.field--check input { width: 20px; height: 20px; margin-top: 4px; flex: none; }
.hp { position: absolute; inset-inline-start: -9999px; }
.alert { padding: 16px 20px; border-radius: var(--r); margin-bottom: 20px; }
.alert--ok { background: var(--ok-bg); color: var(--ok); }
.alert--warn { background: var(--note); }
.contact-cards { display: grid; gap: 12px; }
.ccard { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-decoration: none; }
.ccard:hover { border-color: var(--emerald); }
.ccard .ic { width: 28px; height: 28px; color: var(--emerald); }
.ccard small { display: block; color: var(--ink-2); }

/* ---------- footer ---------- */
.ftr { background: var(--night); color: rgba(255,255,255,.75); padding: 80px 0 30px; position: relative; overflow: hidden; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.ftr h2 { font-size: var(--step-0); color: #fff; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ftr a { text-decoration: none; }
.ftr a:hover { color: var(--sun); }
.ftr__logo { width: 140px; margin-bottom: 18px; }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--step--1); }
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.phones { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.phones a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.wa-float { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 40; width: 54px; height: 54px; border-radius: 50%; background: #1FAF63; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px -10px rgba(0,0,0,.4); }
.wa-float .ic { width: 28px; height: 28px; }

.consent { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 70; max-width: 520px; padding: 20px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line); }
.consent p { font-size: var(--step--1); }
.consent div { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- misc pages ---------- */
.search-form { display: flex; gap: 8px; max-width: 640px; }
.search-form input { flex: 1; padding: 14px 18px; border-radius: 999px; border: 1.5px solid var(--line); font: inherit; }
.results { list-style: none; padding: 0; display: grid; gap: 12px; }
.results a { display: block; padding: 18px 22px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-decoration: none; }
.results small { color: var(--emerald); font-weight: 700; }
.err-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 140px 20px 60px; }
.err-page b { font-size: clamp(5rem, 18vw, 12rem); line-height: 1; display: block; }
.svc-cat { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(20px, 4vw, 60px); padding-block: 50px; border-top: 1px solid var(--line); }
.svc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.svc { display: flex; gap: 14px; padding: 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: .3s var(--ease); }
.svc:hover { border-color: var(--emerald); transform: translateY(-3px); box-shadow: var(--shadow); }
.svc h3 { font-size: var(--step-0); margin-bottom: 4px; }
.svc p { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.svc .ic { width: 30px; height: 30px; color: var(--emerald); }
.notice-lang { background: var(--note); padding: 10px 0; font-size: var(--step--1); text-align: center; }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hdr__nav { display: none; }
  .burger { display: inline-flex; margin-inline-start: auto; }
  .hdr__tools .btn { display: none; }
  .hdr__tools { margin-inline-start: auto; }
  .burger { margin-inline-start: 0 !important; }
  .doors { flex-direction: column; min-height: 0; }
  .door, .doors:hover .door, .doors .door:hover { flex: none; min-height: 300px; }
  .door__list { max-height: none; opacity: 1; }
  /* keep a clear gap between the icon box and the title: the auto margins collapse once the card is full */
  .door__glass { margin: 12px 0 28px; }
  .door__title { margin-top: 0; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .intro__row { grid-template-columns: 1fr 1fr; }
  .intro__row > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .why, .toolcta, .split, .svc-cat, .vm { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps::before { inset-inline: auto; inset-inline-start: 33px; top: 30px; bottom: 30px; width: 2px; height: auto; }
  .steps::after { inset-inline-start: 33px; top: 30px; width: 2px; height: calc((100% - 60px) * var(--p, 0)); }
  .step { display: grid; grid-template-columns: 68px 1fr; gap: 0 18px; }
  .step__n { grid-row: span 2; margin: 0; }
  .form .row { grid-template-columns: 1fr; }
  .aside { position: static; }
  .hero__body { padding-bottom: 90px; }
  .hero::before { background: linear-gradient(180deg, rgba(6,26,23,.35), rgba(6,26,23,.92) 60%) !important; }
  .toolcta__stack { max-width: 360px; margin-inline: auto; }
}
@media (max-width: 520px) {
  .ftr__grid, .intro__row { grid-template-columns: 1fr; }
  .work, .work--featured { columns: 1; }
  .hdr__logo img { width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee, .orbit__track, .logos__track { animation: none !important; flex-wrap: wrap; width: auto; white-space: normal; justify-content: center; }
  .marquee .dup, .logos__track [aria-hidden="true"] { display: none; }
  .rv { opacity: 1; transform: none; }
}
@media print { .hdr, .ftr, .wa-float, .consent { display: none; } }

/* review fixes: readable line length for free text, compact steps inside service pages */
.prose { max-width: 760px; }
.split .prose, [data-align="center"] .prose { margin-inline: auto; }
.prose p { font-size: var(--step-1); line-height: 1.85; }
.steps--compact { grid-template-columns: 1fr; gap: 10px; margin-bottom: 30px; }
.steps--compact::before, .steps--compact::after { display: none; }
.steps--compact .step { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--r); background: var(--mint); }
.steps--compact .step__n { width: 46px; height: 46px; margin: 0; font-size: var(--step-0); background: var(--emerald); border-color: var(--emerald); color: #fff; }
.steps--compact .step p { margin: 0; color: var(--ink); font-weight: 700; }
/* printed-paper and partner-logo surfaces stay white in every mode (logos are dark artwork) */
.sheet, .logo-cell { background: #fff; }

/* ---------- language menu: a curtain dropping from the header ---------- */
.langmenu { position: relative; }
.langmenu > button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: none; color: inherit; font: 700 var(--step--1) var(--font); cursor: pointer; }
.langmenu > button .ic:last-child { width: 14px; transition: transform .35s var(--ease); }
.langmenu__panel { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 190px; list-style: none; margin: 0; padding: 8px; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 30px 60px -28px rgba(0,44,81,.55); border: 1px solid var(--line);
  clip-path: inset(0 0 100% 0 round 18px); visibility: hidden; transition: clip-path .5s var(--ease), visibility 0s .5s; z-index: 5; }
.langmenu__panel::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; } /* hover bridge */
.langmenu__panel li { opacity: 0; transform: translateY(-10px); transition: opacity .3s, transform .4s var(--ease); }
.langmenu__panel a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 12px; border-radius: 12px; text-decoration: none; font-weight: 700; }
.langmenu__panel a small { font-size: .72rem; opacity: .55; }
.langmenu__panel a:hover, .langmenu__panel a:focus-visible { background: var(--mint); color: var(--deep); }
.langmenu__panel a[aria-current="true"] { background: var(--emerald); color: #fff; }
.langmenu:hover .langmenu__panel, .langmenu:focus-within .langmenu__panel, .langmenu[data-open] .langmenu__panel { clip-path: inset(0 0 0 0 round 18px); visibility: visible; transition: clip-path .5s var(--ease); }
.langmenu:hover li, .langmenu:focus-within li, .langmenu[data-open] li { opacity: 1; transform: none; }
.langmenu:hover li:nth-child(2), .langmenu[data-open] li:nth-child(2) { transition-delay: .06s; }
.langmenu:hover li:nth-child(3), .langmenu[data-open] li:nth-child(3) { transition-delay: .12s; }
.langmenu:hover > button .ic:last-child, .langmenu[data-open] > button .ic:last-child { transform: rotate(180deg); }

/* ---------- display mode toggles ---------- */
.modes { display: flex; gap: 4px; }
.mode-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: none; color: inherit; cursor: pointer; transition: background .3s, color .3s, transform .3s var(--ease); }
.mode-btn .ic { width: 18px; height: 18px; }
.mode-btn:hover { transform: rotate(-12deg) scale(1.06); }
.mode-btn[aria-pressed="true"] { background: var(--gold); color: var(--navy); border-color: var(--gold); }

/* ---------- dark mode: structure only — colours come from the mode's variables (dashboard) ---------- */
html.m-dark { color-scheme: dark; }
html.m-dark .sec--gold { color: #0B2433; }
html.m-dark .hdr:not(.hdr--over), html.m-dark .hdr.is-solid { color: var(--ink); }
html.m-dark img:not(.logo-cell img):not(.logo):not(.final__bg) { filter: brightness(.94); }
html.m-dark .final__bg { filter: blur(14px) brightness(.94); }  /* dark mode keeps the CTA backdrop blurred */

/* ---------- liquid glass: frosted, refracting surfaces over a soft living backdrop ---------- */
html.m-glass body { background: radial-gradient(55vw 55vw at 88% 6%, color-mix(in srgb, var(--emerald) 26%, transparent), transparent 62%),
  radial-gradient(48vw 48vw at 6% 55%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%),
  radial-gradient(40vw 40vw at 70% 95%, color-mix(in srgb, var(--navy) 16%, transparent), transparent 60%), var(--paper); background-attachment: fixed; }
html.m-glass :is(.sec--mint, .page-hero:not(.page-hero--dark)) { background: transparent; }
html.m-glass :is(.card, .svc, .metric, .ccard, .results a, .aside, .mega__panel, .langmenu__panel, .chip, .consent, .field input, .field select, .field textarea, .vm > div:nth-child(2), .notice-lang, .note) {
  background: var(--glass-bg); border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 color-mix(in srgb, var(--glass-shine) 30%, transparent), 0 20px 50px -30px rgba(0,44,81,.45); }
html.m-glass .hdr.is-solid { background: color-mix(in srgb, #B9CCC6 76%, transparent); -webkit-backdrop-filter: blur(24px) saturate(200%); backdrop-filter: blur(24px) saturate(200%); box-shadow: inset 0 -1px 0 var(--glass-border); }
html.m-glass :is(.card, .svc, .metric, .ccard, .aside) { position: relative; overflow: hidden; }
html.m-glass :is(.card, .svc, .metric, .ccard, .aside)::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, var(--glass-shine) 0%, transparent 28%, transparent 70%, color-mix(in srgb, var(--glass-shine) 40%, transparent) 100%); opacity: .55; }
html.m-glass .btn { background-image: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 55%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 12px 30px -14px var(--bg); }
html.m-glass .door { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.18); }

/* ---------- featured work: scroll-index (sample 2أ) — text beside a 16:9 frame ---------- */
.fx { display: grid; gap: 56px; }
.fx__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px; align-items: center; color: inherit; text-decoration: none; }
.fx__n { color: var(--emerald, #2FB58A); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.fx__meta h3 { font-size: var(--step-3, 2rem); margin: 8px 0 10px; line-height: 1.25; }
.fx__meta p { color: var(--ink-2, rgba(0,0,0,.65)); line-height: 1.8; margin: 0 0 14px; }
.fx__cats { font-size: var(--step--1); opacity: .75; }
.fx__frame { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: #111; box-shadow: 0 30px 70px -36px rgba(0,0,0,.6); }
.fx__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.fx__row:hover .fx__frame img, .fx__row:focus-visible .fx__frame img { transform: scale(1.03); }
.fx__row:focus-visible { outline: 2px solid var(--emerald, #2FB58A); outline-offset: 8px; border-radius: 12px; }
@media (max-width: 700px) { .fx__row { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- featured work: coverflow (sample 3أ) — wide 16:10 cards in a track ---------- */
.wtrack { display: flex; gap: 16px; overflow-x: auto; padding: 8px 0 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.wtrack__item { margin: 0; flex: 0 0 clamp(300px, 40vw, 600px); scroll-snap-align: start; }
.wtrack-wrap { position: relative; }
.wtrack-wrap.is-more .wtrack { -webkit-mask-image: linear-gradient(to right, transparent, #000 18%); mask-image: linear-gradient(to right, transparent, #000 18%); }
[dir="ltr"] .wtrack-wrap.is-more .wtrack { -webkit-mask-image: linear-gradient(to left, transparent, #000 18%); mask-image: linear-gradient(to left, transparent, #000 18%); }
.wtrack__nav { position: absolute; inset-inline-end: 6px; top: 37%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%;
  display: none; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.22); background: rgba(8,20,18,.72); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wtrack__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="ltr"] .wtrack__nav svg { transform: scaleX(-1); }
.wtrack-wrap.is-more .wtrack__nav { display: grid; }
.wtrack__nav:hover { background: rgba(8,20,18,.9); }
.wtrack__nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.wtrack__item a { display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; background: #111; }
.wtrack__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.wtrack__item a:hover img, .wtrack__item a:focus-visible img { transform: scale(1.05); }
.wtrack__item figcaption { margin-top: 10px; }
.wtrack__item figcaption b { display: block; font-size: var(--step-0, 1.05rem); }
.wtrack__item figcaption span { font-size: var(--step--1); opacity: .65; }
@media (max-width: 700px) { .wtrack__item { flex-basis: 80vw; } }

/* ---------- studio wheel: cards on a large wheel that turns with scroll ---------- */
.wheel { background: #000; color: #fff; position: relative; }
.wheel__stage { padding: 80px var(--gutter) 60px; }
.wheel__title { text-align: center; font-size: clamp(2rem, 1.2rem + 3.6vw, 4.4rem); margin: 0 0 12px; letter-spacing: -.01em;
  color: #fff; text-shadow: none; }
.wheel__sub { text-align: center; color: rgba(255,255,255,.6); margin: 0 auto 40px; max-width: 640px; }
.wheel__ring { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.wheel__card a { display: block; position: relative; aspect-ratio: 1; border-radius: 28px; overflow: hidden; background: #111; color: #fff; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.9); }
.wheel__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.wheel__card a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.75)); opacity: 0; transition: opacity .4s; }
.wheel__cap { position: absolute; inset-inline: 22px; bottom: 18px; z-index: 1; opacity: 0; transform: translateY(10px); transition: .4s var(--ease); }
.wheel__cap b { display: block; font-size: var(--step-1); }
.wheel__cap span { font-size: var(--step--1); opacity: .75; }
.wheel__card a:hover img, .wheel__card a:focus-visible img { transform: scale(1.05); }
.wheel__card a:hover::after, .wheel__card a:focus-visible::after, .wheel__card.is-center a::after { opacity: 1; }
.wheel__card a:hover .wheel__cap, .wheel__card a:focus-visible .wheel__cap, .wheel__card.is-center .wheel__cap { opacity: 1; transform: none; }
.wheel__more { text-align: center; margin-top: 24px; }
/* live mode (JS on, motion allowed): sticky stage, cards pivot around a point far below */
.wheel.is-live { height: calc(100vh + var(--n) * 38vh); }
.wheel.is-live .wheel__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; padding-top: clamp(80px, 11vh, 120px); }
.wheel.is-live .wheel__ring { display: block; position: absolute; inset: 0; }
.wheel.is-live .wheel__card { --size: min(34vw, 46vh, 460px); position: absolute; left: 50%; top: 30vh; width: var(--size); margin-left: calc(var(--size) / -2);
  transform-origin: 50% 165vh; transform: rotate(var(--a, 0deg)); will-change: transform; }
.wheel.is-live .wheel__more { position: absolute; bottom: 4vh; inset-inline: 0; margin: 0; z-index: 2; }
@media (max-width: 700px) { .wheel.is-live .wheel__card { --size: 76vw; top: 25vh; transform-origin: 50% 150vh; } }

/* ---------- featured work (layout "spotlight"): centre project large, neighbours faded, scroll-snap track ---------- */
.hero3 { background: #000; color: #fff; padding: 80px 0 64px; }
.hero3__title { text-align: center; font-size: clamp(2rem, 1.2rem + 3.6vw, 4.4rem); margin: 0 0 12px; letter-spacing: -.01em;
  color: #fff; text-shadow: none; }
.hero3__sub { text-align: center; color: rgba(255,255,255,.6); margin: 0 auto 40px; max-width: 640px; }
.hero3__track { position: relative; list-style: none; margin: 0; padding: 16px 21% 8px; display: flex; gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero3__track::-webkit-scrollbar { display: none; }
.hero3__item { flex: 0 0 58%; scroll-snap-align: center; opacity: .4; transform: scale(.92); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.hero3__item.is-center { opacity: 1; transform: none; }
.hero3__item a { display: block; color: #fff; text-decoration: none; }
.hero3__item img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.9); }
.hero3__item.is-center img { outline: 2px solid var(--gold, #E2B95A); outline-offset: 4px; }
.hero3__item a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 22px; }
.hero3__cap { display: block; margin-top: 16px; text-align: center; }
.hero3__cap b { display: block; font-size: var(--step-1); }
.hero3__cap span { font-size: var(--step--1); color: rgba(255,255,255,.6); }
.hero3__more { text-align: center; margin: 28px 0 0; }
@media (max-width: 700px) { .hero3__track { padding-inline: 10%; } .hero3__item { flex-basis: 80%; } }
.scrollwords { font-size: var(--step-2); line-height: 1.7; font-weight: 700; max-width: 900px; }
/* Madd components read Peacock's tokens (and follow dark mode) */
:root { --madd-accent: var(--emerald); --madd-ink: var(--ink); --madd-text: var(--ink); --madd-muted: var(--ink-2); --madd-bg: var(--paper);
  --madd-surface: var(--card); --madd-soft: var(--mint); --madd-line: var(--line); --madd-radius: var(--r-l); }
.sec--dark, .sec--emerald, .wheel { --madd-ink: #E8F3F1; --madd-text: #E8F3F1; --madd-muted: rgba(255,255,255,.65); --madd-surface: rgba(255,255,255,.06); --madd-line: rgba(255,255,255,.12); --madd-bg: transparent; }

/* ================= light heroes — the peacock: joy, optimism, creativity, beauty, a bright tomorrow ================= */
.lhero { position: relative; min-height: min(100svh, 900px); display: grid; align-items: center; overflow: hidden; isolation: isolate; padding: 110px 0 70px; color: #0B2433; }
.lhero__in { position: relative; z-index: 2; }
.lhero__body { max-width: 640px; }
.lhero__eyebrow { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; color: var(--deep); background: rgba(255,255,255,.7); padding: 6px 14px; border-radius: 999px; box-shadow: 0 6px 20px -12px rgba(0,44,81,.4); font-size: var(--step-0); margin-block-end: 26px; }
.lhero__eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: conic-gradient(#F6C330, #049D7D, #1F5FAF, #7B4BC9, #F6C330); }
.lhero__title { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.4rem); line-height: 1.12; margin: 18px 0 .35em; color: #0B2433; }
.lhero__title span { display: block; }
.lhero__shine { background: linear-gradient(100deg, #049D7D 0%, #1F5FAF 35%, #7B4BC9 55%, #E0A800 80%, #049D7D 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 9s linear infinite; }
@keyframes shine { to { background-position: -220% 0; } }
.lhero__text { font-size: var(--step-1); color: #4A5C68; max-width: 560px; margin-bottom: 1.8em; }
.hdr--light:not(.is-solid) { color: #0B2433 !important; }
.hdr--light:not(.is-solid) .hdr__nav > a:hover, .hdr--light:not(.is-solid) .hdr__nav > .mega > button:hover { background: rgba(4,157,125,.1); color: var(--deep); }

/* 1 · feather fan */
.lhero--feathers { background: radial-gradient(90% 80% at 75% 100%, #DDF5EE 0%, rgba(221,245,238,0) 60%), radial-gradient(60% 60% at 10% 10%, #FFF4D6 0%, rgba(255,244,214,0) 70%), #FFFDF8; }
[dir="ltr"] .lhero--feathers { background: radial-gradient(90% 80% at 25% 100%, #DDF5EE 0%, rgba(221,245,238,0) 60%), radial-gradient(60% 60% at 90% 10%, #FFF4D6 0%, rgba(255,244,214,0) 70%), #FFFDF8; }
.lhero__fan { position: absolute; z-index: 0; bottom: -4%; inset-inline-end: -6%; width: min(62vw, 980px); height: auto; }
.lhero__fan .f, .lhero__fan .fan { transform-box: view-box; transform-origin: 500px 580px; }
.lhero__fan .f { transform: rotate(0deg) scale(.6); opacity: 0; animation: fanOpen 1.6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 70ms + .2s); }
.lhero__fan .fan { animation: sway 7s ease-in-out 2s infinite alternate; }
@keyframes fanOpen { to { transform: rotate(var(--a)) scale(1); opacity: 1; } }
@keyframes sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }

/* 2 · bright tomorrow */
.lhero--sunrise { background: linear-gradient(180deg, #FFFDF7 0%, #FFF1D6 45%, #FFE2B0 78%, #FFD58F 100%); }
.lhero__sky { position: absolute; inset: 0; z-index: 0; }
.lhero__sun { position: absolute; left: 50%; bottom: 8%; width: min(46vw, 560px); aspect-ratio: 1; translate: -50% 50%; border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0%, #FFF3C4 28%, #FFD25C 55%, rgba(255,196,64,0) 72%); animation: rise 2.4s cubic-bezier(.2,.8,.2,1) both; }
.lhero__rays { position: absolute; left: 50%; bottom: 8%; width: 170vmax; aspect-ratio: 1; translate: -50% 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.55) 0deg 5deg, rgba(255,255,255,0) 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 55%); mask-image: radial-gradient(circle, #000 10%, transparent 55%); animation: spin 90s linear infinite; opacity: .8; }
.lhero__hills { position: absolute; bottom: 0; left: 0; width: 100%; height: 26%; }
.lhero--sunrise .lhero__in { text-align: center; }
.lhero--sunrise .lhero__body { margin-inline: auto; padding-bottom: 12vh; }
.lhero--sunrise .lhero__text { margin-inline: auto; }
.lhero--sunrise .hero__ctas { justify-content: center; }
@keyframes rise { from { translate: -50% 90%; opacity: .2; } }
@keyframes spin { to { rotate: 360deg; } }

/* 3 · joy: floating glass shapes and feather eyes */
.lhero--joy { background: radial-gradient(70% 60% at 50% 40%, #FFFFFF 0%, #F2FBF8 60%, #E6F6F1 100%); }
.lhero--joy .lhero__in { text-align: center; }
.lhero--joy .lhero__body { margin-inline: auto; }
.lhero--joy .lhero__text { margin-inline: auto; }
.lhero--joy .hero__ctas { justify-content: center; }
.lhero__joy { position: absolute; inset: 0; z-index: 0; }
.j { position: absolute; display: block; border-radius: 50%; width: var(--s); height: var(--s); left: var(--x); top: var(--y);
  transform: translate(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * 1px)); transition: transform .4s ease-out; }
.j::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bg); box-shadow: inset 0 2px 6px rgba(255,255,255,.7), 0 18px 40px -18px rgba(0,44,81,.35);
  animation: floaty var(--t, 7s) ease-in-out infinite alternate; }
@keyframes floaty { from { transform: translateY(-12px) rotate(-6deg); } to { transform: translateY(14px) rotate(8deg); } }
.j:nth-child(1)  { --x: 8%;  --y: 18%; --s: 70px;  --d: 18; --bg: linear-gradient(135deg, #F6C330, #FFE48A); }
.j:nth-child(2)  { --x: 18%; --y: 66%; --s: 120px; --d: 10; --bg: radial-gradient(circle at 50% 55%, #002C51 0 14%, #1F5FAF 15% 30%, #049D7D 31% 48%, #F6C330 49% 62%, rgba(246,195,48,.15) 63%); --t: 9s; }
.j:nth-child(3)  { --x: 82%; --y: 14%; --s: 96px;  --d: 14; --bg: radial-gradient(circle at 50% 55%, #002C51 0 14%, #1F5FAF 15% 30%, #049D7D 31% 48%, #F6C330 49% 62%, rgba(246,195,48,.15) 63%); }
.j:nth-child(4)  { --x: 88%; --y: 62%; --s: 58px;  --d: 22; --bg: linear-gradient(135deg, #7B4BC9, #B79BF0); --t: 6s; }
.j:nth-child(5)  { --x: 30%; --y: 10%; --s: 34px;  --d: 26; --bg: #049D7D; }
.j:nth-child(6)  { --x: 70%; --y: 82%; --s: 44px;  --d: 16; --bg: #F6C330; --t: 8s; }
.j:nth-child(7)  { --x: 4%;  --y: 46%; --s: 28px;  --d: 30; --bg: #1F5FAF; }
.j:nth-child(8)  { --x: 94%; --y: 38%; --s: 24px;  --d: 34; --bg: #049D7D; --t: 5s; }
.j:nth-child(9)  { --x: 62%; --y: 8%;  --s: 52px; --d: 12; border-radius: 16px; --bg: linear-gradient(135deg, rgba(4,157,125,.85), rgba(127,216,196,.85)); }
.j:nth-child(10) { --x: 36%; --y: 84%; --s: 64px; --d: 20; border-radius: 20px; --bg: linear-gradient(135deg, rgba(31,95,175,.8), rgba(123,75,201,.8)); --t: 9s; }
.j:nth-child(11) { --x: 12%; --y: 88%; --s: 18px; --d: 40; --bg: #7B4BC9; }
.j:nth-child(12) { --x: 76%; --y: 46%; --s: 16px; --d: 44; --bg: #F6C330; }
.j:nth-child(13) { --x: 46%; --y: 4%;  --s: 14px; --d: 38; --bg: #1F5FAF; }
.j:nth-child(14) { --x: 24%; --y: 34%; --s: 12px; --d: 46; --bg: #049D7D; }
.j:nth-child(15) { --x: 54%; --y: 90%; --s: 22px; --d: 28; --bg: #002C51; --t: 6s; }
.j:nth-child(16) { --x: 90%; --y: 88%; --s: 80px; --d: 8; --bg: radial-gradient(circle at 50% 55%, #002C51 0 14%, #1F5FAF 15% 30%, #049D7D 31% 48%, #F6C330 49% 62%, rgba(246,195,48,.15) 63%); --t: 10s; }

/* 4 · iridescent peacock colours behind frosted glass */
.lhero--iris { background: #FBFDFC; }
.lhero__iris { position: absolute; inset: -10%; z-index: 0; filter: blur(60px) saturate(140%); }
.lhero__iris i { position: absolute; border-radius: 50%; opacity: .55; animation: drift 16s ease-in-out infinite alternate; }
.lhero__iris i:nth-child(1) { width: 46vw; height: 46vw; left: 2%; top: 4%; background: #049D7D; }
.lhero__iris i:nth-child(2) { width: 40vw; height: 40vw; right: 4%; top: 0; background: #1F5FAF; animation-duration: 19s; }
.lhero__iris i:nth-child(3) { width: 34vw; height: 34vw; left: 34%; bottom: 0; background: #F6C330; animation-duration: 14s; }
.lhero__iris i:nth-child(4) { width: 28vw; height: 28vw; right: 18%; bottom: 8%; background: #7B4BC9; animation-duration: 21s; opacity: .4; }
.lhero__iris i:nth-child(5) { width: 22vw; height: 22vw; left: 18%; bottom: 14%; background: #7FD8C4; animation-duration: 12s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, -4vw) scale(1.12); } 100% { transform: translate(-5vw, 5vw) scale(.92); } }
.lhero--iris .lhero__in { display: grid; place-items: center; }
.lhero__glass { text-align: center; padding: clamp(28px, 5vw, 56px); border-radius: 36px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: inset 0 1px 0 #fff, 0 40px 80px -40px rgba(0,44,81,.45); max-width: 760px; }
.lhero__glass .lhero__text { margin-inline: auto; }
.lhero__glass .hero__ctas { justify-content: center; }

@media (max-width: 820px) {
  .lhero { padding-top: 96px; align-items: start; }
  .lhero__fan { width: 120vw; inset-inline-end: -10vw; bottom: -2%; opacity: .9; }
  .lhero--feathers .lhero__body { padding-bottom: 54vw; }
  .lhero__sun { width: 80vw; }
}
@media (prefers-reduced-motion: reduce) {
  .lhero__fan .f { opacity: 1; transform: rotate(var(--a)); }
}
.lhero .btn--ghost { background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 820px) {
  .j { opacity: .55; }
  .j:nth-child(2), .j:nth-child(10), .j:nth-child(16), .j:nth-child(6) { display: none; }
}

/* ---------- header search ---------- */
.hsearch { position: relative; }
.hsearch__panel { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 70; width: min(420px, calc(100vw - 32px)); display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 18px; background: rgba(255,255,255,.78); color: #0B2433; -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 24px 50px -24px rgba(0,44,81,.45), inset 0 1px 0 rgba(255,255,255,.9); }
.hsearch__panel[hidden] { display: none; }
.hsearch__panel input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; padding: 8px 4px; outline: none; }
.hsearch__panel input::placeholder { color: rgba(11,36,51,.55); }
.hsearch__btn[aria-expanded="true"] { background: rgba(4,157,125,.18); }

/* language flags: circles, two-letter codes */
.flag { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: none; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.14); vertical-align: middle; }
.langmenu__panel { min-width: 0; width: 124px; padding: 6px; }
.langmenu__panel a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: var(--step--1); }
.langmenu__panel .flag { width: 20px; height: 20px; }
.drawer .langs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; font-size: var(--step-0); }
.drawer .langs a b { font-weight: 700; }

/* header sub-menus (menu items with child links): a native <details> dropdown, no JS */
.subnav { position: relative; }
.subnav summary { list-style: none; cursor: pointer; }
.subnav summary::-webkit-details-marker { display: none; }
.subnav__panel { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; min-width: 200px; padding: 8px; display: grid; gap: 2px;
  background: var(--card, #fff); border: 1px solid var(--line, #e5ecea); border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.35); z-index: 60; }
.subnav__panel a { padding: 9px 12px; border-radius: 10px; text-decoration: none; color: inherit; white-space: nowrap; }
.subnav__panel a:hover { background: rgba(127,127,127,.12); }
.ftr ul ul { margin: 6px 0 0; padding-inline-start: 14px; opacity: .8; }

/* FAQ answers keep the line breaks and paragraphs written in the editor */
.faq__a p { margin: 0 0 .8em; }
.faq__a p:last-child { margin-bottom: 0; }

/* phone numbers stay written left-to-right (country code first) inside the Arabic layout */
.contact-phones .cp-num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* article cover sizes chosen in the editor */
.art-cover { margin: 0 auto 1.6em; }
.art-cover img { width: 100%; height: auto; border-radius: 16px; display: block; }
.art-cover--large { width: 100%; }
.art-cover--medium { width: 75%; }
.art-cover--small { width: 50%; }
.art-cover--article { width: 100%; max-width: 720px; }

/* article body: alignment set in the editor, tables and super/subscript */
.prose [data-align="center"] { text-align: center; }
.prose [data-align="right"] { text-align: right; }
.prose [data-align="left"] { text-align: left; }
.prose [data-align="justify"] { text-align: justify; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .95em; }
.prose td, .prose th { border: 1px solid #D9E2E0; padding: 8px 10px; vertical-align: top; }
.prose th { background: #F4F7F6; font-weight: 700; }
.prose sup, .prose sub { font-size: .75em; line-height: 0; }
.prose mark { padding: 0 .15em; border-radius: 3px; }

/* Homepage article sections, drawn after the layout picker thumbnails (content/models.py PageSection.LAYOUTS["articles"]) */
.art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.art-card { display: block; color: inherit; text-decoration: none; background: #fff; border: 1px solid rgba(15, 90, 70, .14); border-radius: 18px; padding: 12px; }
.art-card__img { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #DCEFE8; }
.art-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-card h3 { margin: 12px 4px 4px; font-size: 1.05em; line-height: 1.5; }
.art-card p { margin: 0 4px; opacity: .8; font-size: .95em; line-height: 1.7; }
.art-card--thumb .art-card__img { aspect-ratio: 1 / 1; }
.art-card--text { min-height: 120px; display: flex; flex-direction: column; justify-content: center; border-top: 4px solid #7CC7AE; }
.art-card--text h3 { margin: 0; }
.art-grid--feature .art-card--main { grid-column: span 2; grid-row: span 2; }
.art-grid--feature .art-card--main .art-card__img { aspect-ratio: 16 / 10; }
.art-grid--slider { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(260px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.art-grid--slider .art-card { scroll-snap-align: start; }
@media (max-width: 900px) {
  .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-grid--feature .art-card--main { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 600px) {
  .art-grid { grid-template-columns: 1fr; }
  .art-grid--feature .art-card--main { grid-column: auto; }
  .art-grid--slider { grid-auto-columns: 80%; }
}

/* Previous / next article links under an article */
.art-nav { padding: 8px 0 40px; }
.art-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.art-nav__link { display: grid; gap: 8px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); text-decoration: none; }
.art-nav__link:hover { border-color: #2F8F72; }
.art-nav__lbl { font-size: .9em; opacity: .7; display: inline-flex; gap: 6px; align-items: center; }
.art-nav__link b { font-size: 1.05em; line-height: 1.6; }
.art-nav__link--next { text-align: end; }
@media (max-width: 600px) { .art-nav__grid { grid-template-columns: 1fr; } }

/* Articles listing page: room between image, title, summary and between cards */
.cards--blog { gap: 32px; }
.blog-card { display: flex; flex-direction: column; padding: 22px; color: inherit; }
.blog-card__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; margin-bottom: 26px; }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__title { font-size: var(--step-1); line-height: 1.6; margin: 0 4px 14px; }
.blog-card__text { margin: 0 4px; line-height: 1.95; opacity: .85; }


/* Article side bar: fixed on the right edge while scrolling. Text size + share menu */
.art-dock { position: fixed; right: 14px; top: 42%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 8px; width: 64px; border-radius: 20px; background: var(--card, #fff); border: 1px solid var(--line, rgba(15,90,70,.18)); box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.art-dock__sizes { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.art-dock__size { font: inherit; font-size: 12px; padding: 5px 0; border-radius: 10px; border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .75; }
.art-dock__size[aria-pressed="true"] { background: #2F8F72; color: #fff; opacity: 1; }
.art-dock__share { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.art-dock__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(15,90,70,.25); background: #2F8F72; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.art-dock__svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.art-dock__svg circle { fill: currentColor; stroke: none; }
.art-dock__arrow { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 2px; }
.art-dock__arrow .ic { width: 14px; height: 14px; }
.art-dock__btn:focus-visible, .art-dock__arrow:focus-visible, .art-dock__size:focus-visible, .art-dock__link:focus-visible { outline: 2px solid #2F8F72; outline-offset: 2px; }
.art-dock__menu { list-style: none; margin: 4px 0 0; padding: 6px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.art-dock__menu[hidden] { display: none; }
.art-dock__link { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(15,90,70,.2); background: transparent; color: inherit; cursor: pointer; padding: 0; }
.art-dock__link:hover { border-color: #2F8F72; color: #2F8F72; }
.art-dock__link .ic { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 700px) { .art-dock { right: 8px; width: 54px; padding: 8px 5px; } .art-dock__btn { width: 36px; height: 36px; } }

/* Each text-size option is drawn at its own size, so the choice reads as "font size" */
.art-dock__size[data-size-btn="lg"] { font-size: 17px; }
.art-dock__size[data-size-btn="md"] { font-size: 14px; }
.art-dock__size[data-size-btn="sm"] { font-size: 11px; }
.art-dock__link .art-dock__logo { width: 18px; height: 18px; }
/* the bar sits just beside the text column (760px), on the right */
@media (max-width: 700px) { .art-dock { right: 8px; } }


/* The share bar lives inside the article container: it starts at the cover's top and stops at the footer */
.art-shell { position: relative; }
.art-dock-track { position: absolute; top: 0; bottom: 0; right: 12px; width: 64px; z-index: 1; pointer-events: none; }
.art-dock { position: sticky; top: 40vh; right: auto; transform: none; margin: 0; pointer-events: auto; }
@media (max-width: 700px) { .art-dock-track { width: 54px; } }

/* Artistic shape: softer gold, glass-like, with a slow gentle float */
.page-hero__art, .ftr__art {
  opacity: .5;
  filter: saturate(.75) brightness(1.06) drop-shadow(0 14px 26px rgba(190,140,40,.22));
  animation: art-float 11s ease-in-out infinite;
  will-change: transform;
}
.page-hero__art { mix-blend-mode: multiply; }
.ftr__art { opacity: .3; }
@keyframes art-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-14px) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .page-hero__art, .ftr__art { animation: none; } }

/* Artistic shape: always fully inside its box, on the physical right in every language (no flip, same angle) */
.page-hero__art { position: absolute; right: 3%; bottom: 10%; width: clamp(160px, 20vw, 280px); height: auto; pointer-events: none; z-index: 0; transform: rotate(-6deg); }
.ftr__art { position: absolute; right: 3%; bottom: 6%; width: clamp(150px, 20vw, 260px); aspect-ratio: 768 / 886; display: block; pointer-events: none; transform: rotate(-6deg);
  background: #2F8F72; opacity: .08; filter: none; -webkit-mask: url("/static/brand/art-shape.8e63aaf4f9d4.png") center / contain no-repeat; mask: url("/static/brand/art-shape.8e63aaf4f9d4.png") center / contain no-repeat; }
@media (max-width: 700px) { .page-hero__art { width: 150px; bottom: 6%; } .ftr__art { width: 140px; } }

/* Contact page: two stages on the same page */
.lead-steps { position: relative; display: flex; gap: 10px; align-items: center; margin: 0 0 30px; padding-bottom: 16px; flex-wrap: wrap; }
.lead-steps::before, .lead-steps::after { content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 3px; border-radius: 3px; }
.lead-steps::before { background: var(--line, rgba(15,90,70,.15)); }
.lead-steps::after { inset-inline-start: 0; width: 50%; background: linear-gradient(90deg, var(--gold, #D9A93A), var(--emerald, #2F8F72)); transition: width .3s ease; }
.lead-steps[data-progress="2"]::after { width: 100%; }
.lead-steps[data-progress="1"]::after { width: 50%; }
.lead-steps__item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(15,90,70,.2); font-size: .92em; opacity: .6; }
.lead-steps__item b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(15,90,70,.12); font-size: .9em; }
.lead-steps__item.is-current { opacity: 1; border-color: #2F8F72; }
.lead-steps__item.is-current b { background: #2F8F72; color: #fff; }
.lead-steps__item.is-done { opacity: .85; }
.step[hidden] { display: none; }
.step__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kinds { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.kinds legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.kinds__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kind-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px; border-radius: 16px; border: 1.5px solid var(--line, rgba(15,90,70,.18)); background: var(--card, #fff); color: inherit; cursor: pointer; text-align: center; transition: border-color .2s, box-shadow .2s, transform .2s; }
.kind-card:hover { border-color: #2F8F72; transform: translateY(-2px); }
.kind-card input { position: absolute; opacity: 0; pointer-events: none; }
.kind-card:has(input:checked), .kind-card.is-selected { border-color: #2F8F72; box-shadow: 0 0 0 3px rgba(47,143,114,.18); }
.kind-card:has(input:focus-visible) { outline: 2px solid #2F8F72; outline-offset: 2px; }
.kind-card__ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(47,143,114,.12); color: #2F8F72; }
.kind-card__ico .ic { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; }
.kind-card__name { font-weight: 700; font-size: .95em; line-height: 1.5; }
.phone { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
.phone input { grid-column: 1 / -1; }
.phone__flag { width: 28px; height: 21px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.12); display: inline-block; }
.phone__flag img { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (max-width: 700px) { .kinds__grid { grid-template-columns: 1fr; } }

/* Request-type cards (contact page), styled after the reference: icon tile beside the name, check badge when selected */
.kinds__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kind-card { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 16px 16px; border-radius: 14px; border: 1px solid var(--line, rgba(15,90,70,.14)); background: var(--card, #fff); text-align: start; box-shadow: 0 1px 2px rgba(0,0,0,.04); transform: none; }
.kind-card:hover { border-color: rgba(47,143,114,.55); transform: none; }
.kind-card__ico { width: 38px; height: 38px; border-radius: 10px; flex: none; background: rgba(120,130,140,.12); color: inherit; opacity: .8; }
.kind-card__ico .ic { width: 18px; height: 18px; }
.kind-card__name { font-size: .95em; font-weight: 600; line-height: 1.45; }
.kind-card:has(input:checked), .kind-card.is-selected { background: rgba(47,143,114,.12); border-color: #2F8F72; box-shadow: none; }
.kind-card:has(input:checked) .kind-card__ico, .kind-card.is-selected .kind-card__ico { background: #1F4F44; color: #fff; opacity: 1; }
.kind-card:has(input:checked)::after, .kind-card.is-selected::after { content: "✓"; position: absolute; top: 8px; inset-inline-end: 8px; width: 20px; height: 20px; border-radius: 50%; background: #1F4F44; color: #fff; font-size: 12px; line-height: 20px; text-align: center; font-weight: 700; }
@media (max-width: 700px) { .kinds__grid { grid-template-columns: 1fr; } }

/* Contact page: roomier spacing between every element */
.form--roomy { gap: 30px; }
.form--roomy .row { gap: 30px; }
.step { display: grid; gap: 28px; }
.step .field label { margin-bottom: 10px; }
.step__actions { margin-top: 6px; }
.form--roomy .field .err { margin-top: 8px; }
@media (max-width: 700px) { .form--roomy { gap: 26px; } .form--roomy .row { gap: 26px; } }
/* Contact form steps reuse the .step class; on phones the timeline's 2-column rule (68px + 1fr) must not apply here */
@media (max-width: 820px) { .form--roomy .step { display: grid; grid-template-columns: 1fr; gap: 28px; } .form--roomy .step[hidden] { display: none; } }

/* Stage two: service boxes reuse the request cards; the budget is a slider on a line */
.svc-pick { margin-top: 4px; }
.budget { display: grid; gap: 14px; }
.budget__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.budget__title { font-weight: 700; }
.budget__title small { font-weight: 400; opacity: .7; }
.budget__out { font-weight: 700; color: #2F8F72; }
.budget__track { position: relative; padding: 10px 6px 0; }
.budget__range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; margin: 0; cursor: pointer; background: linear-gradient(90deg, #D9A93A 0%, #2F8F72 var(--pos, 33%), rgba(120,130,140,.25) var(--pos, 33%)); }
.budget__range:disabled { cursor: not-allowed; }
.budget__range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid #2F8F72; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.budget__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #2F8F72; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.budget__range:focus-visible { outline: 2px solid #2F8F72; outline-offset: 6px; }
.budget__track.is-off .budget__range { background: rgba(160,170,178,.35); }
.budget__track.is-off .budget__range::-webkit-slider-thumb { border-color: #A3ADB4; }
.budget__track.is-off .budget__range::-moz-range-thumb { border-color: #A3ADB4; }
.budget__marks { display: flex; justify-content: space-between; gap: 6px; margin-top: 12px; font-size: .86em; opacity: .75; flex-wrap: wrap; }
.budget__marks span.is-on { opacity: 1; font-weight: 700; color: #2F8F72; }
.budget__track.is-off .budget__marks span.is-on { color: inherit; opacity: .6; }
.budget__open { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.budget__open input { width: 18px; height: 18px; accent-color: #2F8F72; }

.full-only[hidden] { display: none; }
.step > .full-only { display: grid; gap: 28px; }
.step > .full-only[hidden] { display: none; }

/* Service boxes: cool colours, several can be chosen, icon tile beside the name, check badge when chosen */
.svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-card { --tone-bg: #F1F3F5; --tone-line: #B9C2CA; --tone-ink: #2E3A44; --tone-icon: #2E3A44; flex-direction: row; background: var(--tone-bg); border-color: var(--tone-line); color: #1F2D36; min-height: 74px; }
.svc-card .kind-card__name { flex: 1; font-weight: 700; }
.svc-card .kind-card__ico { background: #fff; color: var(--tone-icon, var(--tone-ink)); opacity: 1; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.svc-card:hover { border-color: var(--tone-ink); transform: none; }
.svc-card:has(input:checked), .svc-card.is-selected { background: var(--tone-bg); border-color: var(--tone-ink); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.svc-card:has(input:checked) .kind-card__ico { background: var(--tone-ink); color: #fff; }
.svc-card:has(input:checked)::after { content: "✓"; inset-inline-end: auto; inset-inline-start: 8px; top: 8px; background: var(--tone-ink); }
.svc-card.tone-1 { --tone-bg: #E9FAF2; --tone-line: #BDEBD3; --tone-ink: #1F7A4D; --tone-icon: #3DBA7A; }
.svc-card.tone-2 { --tone-bg: #FDE8E8; --tone-line: #F7C1C1; --tone-ink: #B42323; --tone-icon: #E5484D; }
.svc-card.tone-3 { --tone-bg: #FFF6E0; --tone-line: #FBDDA0; --tone-ink: #9A6200; --tone-icon: #F5A524; }
.svc-card.tone-4 { --tone-bg: #E6F3FD; --tone-line: #B5DCF8; --tone-ink: #1A6FB3; --tone-icon: #2F8FE0; }
.svc-card.tone-0 { --tone-bg: #F1F3F5; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* Budget line: in Arabic the start is on the right, so the coloured part fills from the right */
[dir="rtl"] .budget__range { background: linear-gradient(to left, #D9A93A 0%, #2F8F72 var(--pos, 33%), rgba(120,130,140,.25) var(--pos, 33%)); }

/* Contact page: less empty space between the form and the call-to-action under it */
.contact-main { padding-bottom: 20px; }
.contact-tail > .sec:first-child { padding-top: 28px; }

/* Contact page: the form starts right under the heading (no large empty band) */
.contact-page .page-hero { padding-bottom: 24px; }
.contact-main { padding-top: 24px; }

.contact-flow__intro { margin: 0 0 28px; max-width: 640px; }

/* Contact fields: faded hint text */
.contact-page .field input::placeholder { color: rgba(31,45,54,.38); opacity: 1; }

/* Contact page: error messages in a soft, cool red box */
.contact-page .field .err, .contact-page .form .err { display: inline-block; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(229,72,77,.14); border: 1px solid rgba(229,72,77,.40); color: #FF8A8F; font-size: .92em; font-weight: 600; line-height: 1.5; }
.contact-page .field .err:empty, .contact-page .form .err:empty { display: none; }

/* Contact page: more room between the form buttons and the "what happens next" section */
.contact-main { padding-bottom: 48px; }
.contact-tail > .sec:first-child { padding-top: 96px; }

/* Request and service cards: a band above the text keeps the check mark clear of the words */
.kind-card { padding-top: 34px; }
.kind-card:has(input:checked)::after, .kind-card.is-selected::after { top: 9px; }
.svc-card { padding-top: 34px; }
.svc-card:has(input:checked)::after { top: 9px; inset-inline-start: 9px; }

/* Works wheel on laptop-height screens: the cards start below the heading and subtitle, not on top of them */
.wheel.is-live .wheel__title { font-size: clamp(2rem, 1rem + 2.4vw, 3.4rem); }
.wheel.is-live .wheel__sub { margin-bottom: 0; }
@media (min-width: 701px) { .wheel.is-live .wheel__card { top: 33vh; --size: min(34vw, 40vh, 460px); } }
@media (max-width: 1600px) and (max-height: 1000px) {
  .wheel.is-live .wheel__stage { padding-top: clamp(72px, 9vh, 100px); }
}
@media (max-width: 700px) { .wheel.is-live .wheel__card { top: 31vh; --size: 82vw; margin-left: calc(82vw / -2); } .wheel.is-live .wheel__more { bottom: 12vh; } }

/* Article cards follow the section's theme: light cards on light sections, glass cards on dark ones */
.art-card { background: var(--card, #fff); color: var(--ink, #1F2D36); }
.sec--dark .art-card, .sec--emerald .art-card, .sec--dark .art-card h3, .sec--emerald .art-card h3 { color: #E8F3F1; }
.sec--dark .art-card, .sec--emerald .art-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }

/* The share bar sits behind the site header and behind the previous/next cards */
.art-nav { position: relative; z-index: 3; }
.art-page, .art-nav, .cta-band, .sec { position: relative; }

/* Homepage article cards: more room between the title and the summary, and between the image and the title */
.art-card h3 { margin: 18px 4px 10px; line-height: 1.55; }
.art-card p { margin: 0 4px; line-height: 1.9; }
.art-card__img { margin-bottom: 4px; }

/* Logo band above the intro band: same height, the logo large and cropped, with a glossy shine */
.logo-band { position: relative; overflow: hidden; background: var(--night-2); }
.logo-band__shine { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.logo-band__logo { height: 210%; width: auto; max-width: none; flex: none; object-fit: contain; opacity: .9; }
.logo-band__shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-100%); animation: logo-shine 6s ease-in-out infinite; pointer-events: none; }
@keyframes logo-shine { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .logo-band__shine::after { animation: none; display: none; } }

/* Logo band: a faint outline of the logo that draws itself and fades, then draws again every 7 seconds */
.logo-band { position: relative; overflow: hidden; background: var(--night-2); }
.logo-band__draw { position: absolute; left: 50%; top: 50%; height: 380%; width: auto; transform: translate(-50%, -50%); overflow: visible; }
.logo-band__draw path { fill: rgba(150, 235, 200, 0); stroke: rgba(150, 235, 200, .45); stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: logo-draw 7s ease-in-out infinite; }
@keyframes logo-draw {
  0% { stroke-dashoffset: 1; fill: rgba(150, 235, 200, 0); }
  45% { stroke-dashoffset: 0; fill: rgba(150, 235, 200, 0); }
  62% { stroke-dashoffset: 0; fill: rgba(150, 235, 200, .10); }
  80% { stroke-dashoffset: 0; fill: rgba(150, 235, 200, .10); stroke: rgba(150, 235, 200, .45); }
  95%, 100% { stroke-dashoffset: 0; fill: rgba(150, 235, 200, 0); stroke: rgba(150, 235, 200, 0); }
}
@media (prefers-reduced-motion: reduce) { .logo-band__draw path { animation: none; stroke-dashoffset: 0; fill: rgba(150, 235, 200, .08); } }

/* Light glass hero: the same parts as the dark glass hero, in light colours */
.hero--light { background: radial-gradient(120% 90% at 85% 0%, #FFFFFF 0%, #EAF7F3 55%, #DDF1EA 100%); color: #0B2433; }
.hero--light .hero__art img { opacity: .55; filter: brightness(1.55) saturate(.55); }
.hero--light::before { background: linear-gradient(90deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.7) 45%, rgba(255,255,255,.96) 78%); }
.hero--light .hero__title { color: #0B2433; }
.hero--light .hero__text { color: rgba(11,36,51,.78); }
.hero--light .hero__ribbons path:nth-child(3) { stroke: rgba(11,36,51,.18); }
.hero--light .hero__ctas .btn--ghost { color: #0B2433; border-color: rgba(11,36,51,.35); background: rgba(255,255,255,.6); }
.hero--light .hero__reel { background: #FFFFFF; border-color: rgba(11,36,51,.12); box-shadow: 0 24px 60px rgba(11,36,51,.14); }
.hero--light .hero__slogan { color: rgba(11,36,51,.6); }

/* Logo band variants (chosen on the intro section in the simulator) */
.logo-band__draw--2 { display: none; }
.logo-band--twin .logo-band__draw--2 { display: block; left: 30%; top: 58%; height: 150%; opacity: .55; animation-delay: .9s; }
.logo-band--twin .logo-band__draw--2 path { animation-delay: .9s; }
.logo-band--twin .logo-band__draw { left: 66%; }
@keyframes logo-draw-fill {
  0% { stroke-dashoffset: 1; fill: rgba(150, 235, 200, 0); }
  45% { stroke-dashoffset: 0; fill: rgba(150, 235, 200, 0); }
  62% { stroke-dashoffset: 0; fill: rgba(150, 235, 200, .16); }
  100% { stroke-dashoffset: 0; fill: rgba(150, 235, 200, .16); }
}
.logo-band--fill .logo-band__draw path { animation-name: logo-draw-fill; }
.logo-band--gold .logo-band__draw path { stroke: rgba(246, 195, 48, .75); stroke-width: 3; filter: drop-shadow(0 0 10px rgba(246, 195, 48, .45)); }
.logo-band--gold .logo-band__draw path { animation-name: logo-draw-gold; }
@keyframes logo-draw-gold {
  0% { stroke-dashoffset: 1; fill: rgba(246, 195, 48, 0); }
  45% { stroke-dashoffset: 0; fill: rgba(246, 195, 48, 0); }
  62% { stroke-dashoffset: 0; fill: rgba(246, 195, 48, .08); }
  80% { stroke-dashoffset: 0; fill: rgba(246, 195, 48, .08); }
  95%, 100% { stroke-dashoffset: 0; fill: rgba(246, 195, 48, 0); stroke: rgba(246, 195, 48, 0); }
}

/* Contact page: success popup after a sent request */
.sent-dlg { border: 0; border-radius: 22px; padding: 32px 28px 26px; width: min(420px, 92vw); max-width: 92vw; background: var(--card); color: var(--ink); text-align: center; box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); }
.sent-dlg::backdrop { background: rgba(6,26,23,.5); backdrop-filter: blur(2px); }
.sent-dlg__ic { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: #2F8F72; color: #fff; font-size: 28px; font-weight: 700; }
.sent-dlg h3 { margin: 0 0 8px; font-size: var(--step-1); }
.sent-dlg p { margin: 0 0 22px; color: var(--ink-2); }

/* Video items in galleries: a muted preview tile, and a playable one in the lightbox */
.gallery video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; border-radius: inherit; background: #061A17; }
.lightbox video { max-height: 86vh; max-width: 100%; width: auto; border-radius: var(--r); background: #000; }