/* ==========================================================================
   PHOTOLICIOUS — ARABIC / RTL LAYER
   Enqueued last and only on the Arabic side, so it plainly overrides the Latin
   sheets rather than fighting them through [dir="rtl"] specificity. Three jobs:
   swap the typefaces, kill every letter-space (it breaks Arabic joining), and
   flip the few hard-coded left/right values the Latin layout relies on.
   ========================================================================== */

/* --- Faces ---------------------------------------------------------------- */
/* Display: PolySans Arabic Bulky — the brand face, supplied by the studio.
   Body: IBM Plex Sans Arabic, standing in until PolySans Arabic Neutral is
   available (the guidelines pair Bulky headlines with Neutral body). */
@font-face {
	font-family: "PolySans Arabic Bulky";
	src: url("../fonts/PolySans-Arabic-Bulky.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PlexAR";
	src: url("../fonts/PlexAR-400-arabic.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "PlexAR";
	src: url("../fonts/PlexAR-400-latin.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
	font-family: "PlexAR";
	src: url("../fonts/PlexAR-500-arabic.woff2") format("woff2");
	font-weight: 500; font-style: normal; font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "PlexAR";
	src: url("../fonts/PlexAR-500-latin.woff2") format("woff2");
	font-weight: 500; font-style: normal; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
	font-family: "PlexAR";
	src: url("../fonts/PlexAR-700-arabic.woff2") format("woff2");
	font-weight: 700; font-style: normal; font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

/* Repoint the tokens, not just body. Onest draws no Arabic, but leaving it in
   a stack still costs the download: the browser walks the list to find a face
   that can render the run, fetching each one to check. On a host where every
   request is about a second, that is a wasted round trip on the critical path
   for a font that renders nothing. PlexAR takes its place as the fallback that
   can actually draw the script; PolySans Bulky stays in front of --font-display
   so the Latin wordmark is unaffected. */
:root {
	--font-display: "PolySans Bulky", "PlexAR", sans-serif;
	--font-body: "PlexAR", system-ui, sans-serif;
}

body {
	font-family: "PlexAR", system-ui, sans-serif;
}
h1, h2, h3, h4, .bulky, .logo-tag, .hero-sub, .hero-line, .eyebrow, .btn, .nav-cta,
.metric b, .video-lead, .banner-p, .foot-tag, .marq li, .tabs button, .form-card h2, .season button {
	font-family: "PolySans Arabic Bulky", "PolySans Bulky", "PlexAR", sans-serif;
	font-weight: 800;
}

/* Arabic is a connected script — any tracking splits the letters apart. */
h1, h2, h3, h4, .bulky, .eyebrow, .btn, .nav-cta, .chips span, .case-name span, .metric b, .metric span,
.vcard em, .cap, .season, .banner-p, .tabs button, .field label, .video-lead, .hero-sub, .hero-line,
.logo-tag, .foot-tag, .form-note, .marq li, .banner-h, .case-lead { letter-spacing: normal; }

/* Uppercase does nothing to Arabic but throws the metrics off. */
h1, h2, h3, h4, .eyebrow, .btn, .nav-cta, .chips span, .case-name span, .metric span, .vcard em,
.cap, .season, .tabs button, .field label, .banner-h, .head h2, .page-hero h1, .assess h2,
.svc h3, .case-name h3, .form-card h2, .close h2, .case-hero h1, .page-doc__title,
.page-doc__body h2, .case-quote figcaption { text-transform: none; }

/* Arabic carries marks above and below the baseline — headlines need air. */
h1, h2, h3, h4, .bulky { line-height: 1.24; }
.head h2 { line-height: 1.2; max-width: 26ch; }
/* Not the homepage lockup. It is an h1 inside .hero, but it is the Latin
   wordmark rather than a line of Arabic, and 17ch of it came to 343px — the
   width of PHOTO alone. The box held that width, the symbol-and-LICIOUS line
   ran past its end, and in RTL the box sits on the right, so the whole
   lockup ended up parked to the right of where the English one sits. */
.hero h1:not(.logo), .page-hero h1 { line-height: 1.16; max-width: 17ch; }
.assess h2 { line-height: 1.18; max-width: 22ch; }
.banner-h { line-height: 1.22; max-width: 24ch; }
.close h2 { line-height: 1.2; max-width: 20ch; }
.svc h3, .case-name h3, .form-card h2 { line-height: 1.22; }
.faq summary { line-height: 1.45; }

.head p { max-width: 56ch; }
.svc p { max-width: 48ch; }
.case-lead { max-width: 66ch; }
.assess p { max-width: 50ch; }
.page-hero p { max-width: 58ch; }
.video-note { max-width: 64ch; }
.faq details p { max-width: 64ch; line-height: 1.9; }
.case-body { line-height: 1.9; }
.case-quote blockquote { line-height: 1.5; }

/* Small Latin caps sizes are unreadable in Arabic — every micro-label goes up. */
.eyebrow { font-size: 0.8rem; padding: 0.5em 1.1em; }
.btn { font-size: 0.86rem; }
.nav-cta { font-size: 0.78rem; }
.nav-in .nav-links a { font-size: 0.92rem; }
.chips span { font-size: 0.78rem; }
.case-name span { font-size: 0.78rem; }
.metric span { font-size: 0.74rem; }
.vcard em { font-size: 0.78rem; }
.vcard b { font-size: 0.95rem; }
.cap { font-size: 0.72rem; }
.field label { font-size: 0.8rem; }
.foot-line { font-size: 0.88rem; }
.tabs button { font-size: 0.86rem; }
.season { font-size: 0.7rem; }
.form-note { font-size: 0.86rem; }
.foot-tag { font-size: 0.95rem; }
.logo-tag { font-size: clamp(1rem, 1.6vw, 1.35rem); }
.case-quote figcaption { font-size: 0.8rem; }

/* --- Direction flips: only what was hard-coded left/right ------------------ */
.nav-in { padding-inline: 1.4rem 0.6rem; }
/* The spacer margin has to be PHYSICAL here. .nav-mark is direction:ltr below
   so the Latin wordmark cannot be reordered, and a logical margin resolves
   against the element's own direction — margin-inline-end became margin-RIGHT
   and shoved the wordmark inward, away from the edge it is supposed to hold.
   The flex container is the RTL one, so name the side the container sees. */
.nav-mark { margin-inline-end: 0; margin-left: auto; }
.nav-in .nav-links { margin-inline-end: 0.4rem; }
/* The caption already lands on the right here, because the base sheet pins it
   with a LOGICAL inset. All this needs to change is the distance: 14px puts it
   under the mirrored corner bracket, 46px clears it.

   The season switch needs nothing at all — its base `inset-inline-end` resolves
   to the left in RTL, which is exactly where the comps put it. Re-flipping it
   here only sent it back to the right. */
.cap { inset-inline-start: 46px; }
/* The figure keeps direction:ltr so "1 → 2" and "10k → 20k" stay in Latin
   order, but that made text-align:start resolve to LEFT inside a right-aligned
   column — the numeral sat under the far end of its own label. */
.metric b { text-align: right; }
.faq summary { padding-inline: 4px; }
.faq details p { padding-inline: 4px; }

/* The wordmark and the client ticker stay Latin and stay left-to-right.

   No text-align flip belongs here. PHOTO sits above the symbol and shares its
   left edge; right-aligning the lockup kept the box in place but pushed the
   glyphs to the far end, so PHOTO drifted away from the mark below it. The
   base rule is text-align:start, which resolves to left against this
   direction:ltr — the same lockup the Latin side draws. */
.logo, .nav-mark { direction: ltr; unicode-bidi: isolate; }
.logo-photo, .logo-lic { font-family: "PolySans Bulky", sans-serif; letter-spacing: -0.03em; }
.marq ul { direction: ltr; }
.marq li { font-family: "PolySans Bulky", "PolySans Arabic Bulky", sans-serif; }

/* Any Latin run inside Arabic copy — figures, phone numbers, addresses, the
   copyright line — is isolated so the bidi algorithm cannot reorder it. */
.num { unicode-bidi: isolate; direction: ltr; }

/* Form fields read right-to-left; email stays left-to-right as addresses do. */
.field input, .field select, .field textarea { direction: rtl; text-align: right; }
.field input[type="email"] { direction: ltr; text-align: left; }
.field label { opacity: 0.72; }

/* Arabic body copy at low opacity turns to mush — lift the floor. */
.head p, .svc p, .faq details p, .page-hero p, .video-note, .case-lead { opacity: 0.82; }
.assess p { opacity: 0.9; }

/* Full-bleed banners are offset from the START edge — in RTL that is the right. */
.banner { margin-inline: calc(50% - 50vw); }

/* Arabic punctuation must hug the word it belongs to, so the tagline stops
   being a row of flex items with gaps between the brackets and the full stop. */
.logo-tag { display: block; text-align: center; gap: 0; min-height: 1.6em; }
.logo-tag .rot { min-width: 0; text-align: center; }

/* The marquee track runs LTR here, so it travels the Latin way too. */
.marq ul { animation-name: pl-slide; }

@media (max-width: 660px) {
	.head h2 { max-width: none; }
	.banner-h { max-width: 18ch; }
}