/*
 * Public website styles — بوابة الأفلام المحلية
 *
 * Tokens are taken from the Figma source (file fgKMSwy87Av9ctnoRKKhFJ, "Home Page" 210:7059).
 * The design canvas is 1920px wide with an 1830px content shell; sizes below use clamp() so the
 * page scales down instead of reproducing the absolute positioning of the artboard.
 *
 * Written RTL-first with logical properties, so the dir="ltr" English locale mirrors for free.
 */

/*
 * Licensed display faces used in the Figma source.
 *
 * "Qatar" (headings) and "Lyon Arabic Display" (hero) are commercial and are not bundled. Drop the
 * files into public/fonts/ and uncomment this block — they already sit at the head of every stack
 * in :root below, so nothing else in this file needs to change. Follows the @font-face pattern
 * already used by public/css/layout.css.
 */

/*
@font-face {
    font-family: "Qatar";
    src: url("../fonts/qatar-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lyon Arabic Display";
    src: url("../fonts/lyon-arabic-display.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lyon Arabic Slanted Display";
    src: url("../fonts/lyon-arabic-slanted-display.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
*/

/*
 * Lama Sans — the face of the September 2026 redesign (Figma o6Zgrb23zW0ba5te6EuTSI), served
 * from the TrueType files in public/fonts/. Until a weight's file is there, every rule that
 * asks for it falls through to Alexandria, which Google Fonts already serves.
 */
@font-face {
    font-family: "Lama Sans";
    src: url("../fonts/LamaSans-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lama Sans";
    src: url("../fonts/LamaSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lama Sans";
    src: url("../fonts/LamaSans-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lama Sans";
    src: url("../fonts/LamaSans-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lama Sans";
    src: url("../fonts/LamaSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* The redesign's palette. The header, the footer and every page rebuilt on the new
       design draw from these; the pages still on the first design keep the tokens below. */
    --navy: #12161a;
    --navy-line: rgba(201, 195, 182, 0.24);
    --navy-deep: #000000;
    --ivory: #f8f6f0;
    --stone: #c9c3b6;
    --taupe: #8a857a;
    --mustard: #dfaf3b;
    --teal: #1e6b66;
    --sand: #efeae0;
    --sand-line: #c9c3b6;
    --paper: #f8f6f0;
    --paper-line: #c9c3b6;
    --rise: #ce6b36;
    --font-lama: "Lama Sans", "Alexandria", "Segoe UI", Tahoma, sans-serif;
    /* The headline figures. The design sets them in "SansSerif" — the generic face Figma
       records when a file arrives without its font — so they take the platform's own sans. */
    --font-figures: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    /* The redesign's artboards keep 116px each side of a 1920 canvas. */
    --frame-pad: clamp(1rem, 6.04vw, 7.25rem);

    /* Surfaces */
    --cream: #f5f4f1;
    --white: #ffffff;
    --ink: #0f0f0f;
    --panel: rgba(26, 35, 50, 0.95);
    --panel-solid: #1a2332;
    --panel-border: #6f685d;
    --card: #1c1e20;
    --card-border: #3e3529;
    --countdown: #141b27;
    --footer-black: #000000;
    --footer-cream: #c7bdad;

    /* Accents */
    --gold: #deb665;
    --gold-deep: #cc9e61;
    /* The about page prints its headings on photographs of white walls, where both golds
       above wash out; this is the deeper one the design switches to there. */
    --gold-ink: #ad7b2b;
    --badge: #89400a;
    --muted: #9b989e;
    /* Nothing in the design is drawn in an error state, so this is ours: warm enough to
       sit beside the golds, and dark enough to hold on the light modal fields. */
    --danger: #e0685e;

    /* Typography.
     *
     * Each stack is ordered licensed face → Latin face → Arabic face. Google Fonts serves these
     * with unicode-range, so the browser resolves each glyph independently: Latin text picks up
     * Manrope (a face actually drawn for Latin), Arabic text falls through to Alexandria/Amiri.
     * That is why there is no separate English stylesheet and no [lang] switching — one stack
     * serves both languages correctly. Installing the licensed faces needs no edit beyond the
     * @font-face block above. */
    --font-display: "Lyon Arabic Display", "Qatar", "Amiri", Georgia, serif;
    --font-heading: "Qatar", "Manrope", "Alexandria", "Segoe UI", sans-serif;
    --font-body: "Manrope", "Alexandria", "Segoe UI", Tahoma, sans-serif;
    --font-num: "Manrope", "Alexandria", sans-serif;

    /* Fluid type — clamp(min, ratio of 100vw at 1920, design px) */
    --fs-hero: clamp(2.25rem, 4.69vw, 5.625rem);
    --fs-hero-sub: clamp(1.0625rem, 1.56vw, 1.875rem);
    --fs-section: clamp(1.75rem, 3.13vw, 3.75rem);
    --fs-section-sub: clamp(1.0625rem, 1.56vw, 1.875rem);
    --fs-stat-num: clamp(2.25rem, 3.65vw, 4.375rem);
    --fs-stat-label: clamp(1.0625rem, 1.46vw, 1.75rem);
    --fs-stat-unit: clamp(0.9375rem, 1.3vw, 1.5625rem);
    --fs-nav: clamp(0.8125rem, 0.94vw, 1.125rem);
    --fs-film-title: clamp(2rem, 4.69vw, 5.625rem);
    --fs-body: clamp(0.9375rem, 1.04vw, 1.25rem);

    /* Metrics */
    --shell: 1830px;
    --pad-x: clamp(1rem, 2.34vw, 2.8125rem);
    --radius-lg: clamp(18px, 1.56vw, 30px);
    --radius-sm: 12px;
    --badge-size: clamp(4.5rem, 6.51vw, 7.8125rem);
    --badge-icon: clamp(2.5rem, 3.65vw, 4.375rem);
    --pill-h: clamp(2.75rem, 2.86vw, 3.4375rem);
    --gap-section: clamp(1.75rem, 3.65vw, 4.375rem);
    /* Both footer bands carry the same oversized top sweep (100px in the design). */
    --footer-radius: clamp(2rem, 5.21vw, 6.25rem);

    /* Motion. A decelerate curve rather than ease: at these durations it leaves
       fast and settles, where ease lingers through the middle. */
    --ease-menu: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Arabic sits taller on the line than Latin and needs more leading at the same size. */
:lang(ar) {
    line-height: 1.65;
}

img,
svg {
    max-width: 100%;
}

/* An icon drawn as a mask rather than an <img>, so it takes its colour from
   currentColor. Whatever stroke the SVG was exported with is ignored — which is
   what lets one asset serve a dark nav pill and a black dropdown panel. */
.icon-mask {
    display: inline-block;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--icon-url) no-repeat center / contain;
    mask: var(--icon-url) no-repeat center / contain;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

/* The redesign's container: the full 1920 canvas with its 116px gutters, which scale down
   with the viewport. */
.frame {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: var(--frame-pad);
}

/* The UA ring disappears against the black panels, so state it once in the
   brand's accent instead. */
:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------------------------ masthead
 *
 * The header of the October 2026 design (Figma QtOQXXkpv857x1Qf38mxSJ, 628:12998): a navy band in
 * two rows, drawn at 1440 with the 88 gutter. The top one (109) carries the brand with its beta
 * caption, a rule and the sponsor slot at the inline start, and the utilities — visitors,
 * search, the account, a rule, the language — at the inline end. The nav row (64) sits under it
 * between two hairlines. Everything here is 13px or smaller; the design sets the chrome quiet.
 *
 * Establishes the stacking context the dropdown panels and the account veil overlay from.
 */

.masthead {
    position: relative;
    z-index: 20;
    background: var(--navy);
    color: var(--sand);
    font-family: var(--font-lama);
    line-height: 1.5;
}

.masthead__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 3.19vw, 2.875rem);
    min-height: 109px;
}

.masthead__brand {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.22vw, 2rem);
    min-width: 0;
}

/* The logo over its caption, centred under it (628:13032). */
.brand {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.brand img {
    display: block;
    width: 145px;
    height: auto;
}

.brand__caption {
    font-size: 11px;
    line-height: 1.2;
    color: var(--taupe);
    white-space: nowrap;
}

.masthead__rule {
    flex: none;
    width: 1px;
    height: 37px;
    background: var(--navy-line);
}

.masthead__rule--short {
    height: 15px;
}

/* «برعاية» and the sponsor's logo beside it, unframed. */
.sponsor {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0;
    font-size: 11px;
    color: var(--taupe);
}

.sponsor__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--stone);
    white-space: nowrap;
}

.masthead__utils {
    display: flex;
    align-items: center;
    gap: 27px;
}

/* The eye leads, with «عدد الزوار» over the count beside it. */
.visitors {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

.visitors__icon {
    width: 16px;
    height: 16px;
    color: var(--stone);
}

.visitors__lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}

.visitors__label {
    font-size: 10px;
    color: var(--taupe);
}

.visitors__count {
    font-size: 13px;
    color: var(--stone);
    font-variant-numeric: tabular-nums;
}

.masthead__search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sand);
    transition: color 0.15s ease;
}

.masthead__search .icon-mask {
    width: 16px;
    height: 16px;
}

.masthead__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    color: var(--sand);
    unicode-bidi: isolate;
    transition: color 0.15s ease;
}

.masthead__lang .icon-mask {
    width: 1.125rem;
    height: 1.125rem;
}

.masthead__search:hover,
.masthead__lang:hover {
    color: var(--mustard);
}

/* The drawer's own copy of the sponsor, count and language — not drawn on a desktop. */
.masthead__extras {
    display: none;
}

/* ----------------------------------------------------------------- nav */

/* The row sits between two hairlines the width of the frame, with the gold bar of the
   current entry resting on the lower one. */
.masthead__nav > .frame > .mainnav {
    border-block: 1px solid var(--navy-line);
}

.mainnav {
    font-family: var(--font-lama);
}

/* One line, spread end to end across the 1264 of the frame (628:13035). */
.mainnav__list {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mainnav__list > li {
    display: flex;
    align-items: stretch;
}

.mainnav__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--stone);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.mainnav__item:hover {
    color: var(--sand);
}

.mainnav__item--active,
.mainnav__item--active:hover {
    color: var(--mustard);
}

/* The 2px bar under the page you are on, drawn over the row's lower hairline. Only the
   header's row carries it; the footer copy passes current=false. */
.masthead .mainnav__item--active::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2px;
    background: var(--mustard);
}

/* «حاسبة التعادل السينمائي» is always a gold outlined box in the header (628:13050). On its own
   page the box fills faintly instead of carrying the bar. */
.masthead .mainnav__item--button {
    align-self: center;
    min-height: 40px;
    padding-inline: 13px;
    border: 1px solid var(--mustard);
    color: var(--mustard);
}

.masthead .mainnav__item--button:hover {
    background: rgba(223, 175, 59, 0.1);
    color: var(--mustard);
}

.masthead .mainnav__item--button.mainnav__item--active {
    background: rgba(223, 175, 59, 0.16);
}

.masthead .mainnav__item--button.mainnav__item--active::after {
    content: none;
}

/* The «سيناريوهات» wordmark beside «خدمات», drawn from the same artwork the services page uses. */
.mainnav__wordmark {
    display: inline-block;
    flex: none;
    width: 99px;
    height: 21px;
    background-color: var(--sand);
    -webkit-mask: var(--icon-url) no-repeat center / contain;
    mask: var(--icon-url) no-repeat center / contain;
}

/* The two keyframes every menu surface arrives with. Transitions do not run out of
   display:none, but a keyframe on reveal does. */
@keyframes nav-reveal {
    from {
        opacity: 0;
        transform: translateY(-0.375rem);
    }
}

@keyframes nav-fade {
    from {
        opacity: 0;
    }
}

/* ----------------------------------------------------------- dropdowns */

.navdrop {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 10px;
}

/* An open trigger turns gold over a 2px gold bar the width of the trigger (628:20361). */
.navdrop::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2px;
    background: var(--mustard);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-menu);
}

.navdrop:has(> .navdrop__state:checked)::after {
    opacity: 1;
}

.navdrop__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--stone);
    transition: color 0.15s ease;
}

.navdrop__toggle:hover {
    color: var(--sand);
}

.navdrop__chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.24s var(--ease-menu);
}

.navdrop__state:checked ~ .mainnav__item,
.navdrop__state:checked ~ .navdrop__toggle {
    color: var(--mustard);
}

.navdrop__state:checked ~ .mainnav__item .navdrop__chevron,
.navdrop__state:checked ~ .navdrop__toggle .navdrop__chevron {
    transform: rotate(180deg);
}

/* The checkbox is visually hidden, so its keyboard focus shows on the control it drives. */
.navdrop__state:focus-visible ~ .navdrop__toggle {
    outline: 2px solid var(--mustard);
    outline-offset: 4px;
    border-radius: 2px;
}

/* A 320 navy card hung 8 under the nav row from the trigger's start edge (628:20372), square,
   with a faint hairline and a soft shadow. A clear strip above it bridges the gap, so the
   pointer never drops the hover on its way down. */
.navdrop__panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 40;
    width: 320px;
    max-width: 92vw;
    padding: 10px;
    border: 1px solid rgba(201, 195, 182, 0.3);
    background: var(--navy);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.33);
    transform: translateY(-0.375rem);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.24s var(--ease-menu), transform 0.24s var(--ease-menu),
                visibility 0.24s var(--ease-menu);
}

.navdrop__panel::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 100%;
    height: 10px;
}

.navdrop__state:checked ~ .navdrop__panel {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.navdrop--end .navdrop__panel {
    inset-inline: auto 0;
}

/* On a desktop with a pointer the menus also open on hover, and the trigger takes its open
   look while they do. The checkbox stays for touch and the keyboard; the rule is kept off
   the drawer, where there is no hover. */
@media (hover: hover) and (min-width: 1101px) {
    .navdrop:hover > .navdrop__panel {
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .navdrop:hover::after {
        opacity: 1;
    }

    .navdrop:hover > .mainnav__item,
    .navdrop:hover > .navdrop__toggle {
        color: var(--mustard);
    }

    .navdrop:hover > .mainnav__item .navdrop__chevron,
    .navdrop:hover > .navdrop__toggle .navdrop__chevron {
        transform: rotate(180deg);
    }
}

.navdrop__list,
.navdrop__sublist {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One 44 row: icon, label and — at the far end — the «قريبًا» tag or, on a row that folds
   open, the caret. A <summary> as well as an <a>, so the browser's marker is taken off.
   Hovered, focused or the page you are on, the row lifts to a lighter navy with a 3px gold
   bar on its start edge and turns gold (628:20399). */
.navdrop__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px 0 15px;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sand);
    list-style: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

[dir="ltr"] .navdrop__link {
    padding: 0 15px 0 12px;
}

.navdrop__link::-webkit-details-marker {
    display: none;
}

.navdrop__link::before {
    content: "";
    position: absolute;
    inset-block: -1px;
    inset-inline-start: -1px;
    width: 3px;
    background: var(--mustard);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.navdrop__link:hover,
.navdrop__link:focus-visible,
.navdrop__link.is-current {
    background: #252a2d;
    color: var(--mustard);
    outline: 0;
}

.navdrop__link:hover::before,
.navdrop__link:focus-visible::before,
.navdrop__link.is-current::before {
    opacity: 1;
}

.navdrop__icon {
    flex: none;
    width: 16px;
    height: 16px;
}

.navdrop__soon {
    margin-inline-start: auto;
    font-size: 10px;
    line-height: 1.6;
    color: var(--taupe);
}

/* Closed it points along the row; open it turns down (628:20427, 628:1227). */
.navdrop__caret {
    flex: none;
    width: 13px;
    height: 13px;
    margin-inline-start: auto;
    transform: rotate(90deg);
    transition: transform 0.24s var(--ease-menu);
}

[dir="ltr"] .navdrop__caret {
    transform: rotate(-90deg);
}

/* Open, a folding row takes a thin gold frame with a solid gold start edge (628:906). */
.navdrop__group[open] > .navdrop__link {
    border-color: rgba(223, 175, 59, 0.4);
    border-inline-start-color: var(--mustard);
    background: #252a2d;
    color: var(--mustard);
}

.navdrop__group[open] > .navdrop__link::before {
    opacity: 0;
}

.navdrop__group[open] > .navdrop__link .navdrop__caret {
    transform: none;
}

.navdrop__group[open] > .navdrop__sublist {
    animation: nav-reveal 0.24s var(--ease-menu);
}

/* The sub-list hangs from a hairline under the parent's icon (628:1230). */
.navdrop__sublist {
    gap: 16px;
    margin: 10px 0 10px;
    margin-inline-start: 21px;
    padding-block: 7px 2px;
    padding-inline-start: 28px;
    border-inline-start: 1px solid rgba(201, 195, 182, 0.29);
}

.navdrop__sublink {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    color: var(--stone);
    transition: color 0.15s ease;
}

.navdrop__sublink:hover,
.navdrop__sublink:focus-visible,
.navdrop__sublink.is-current {
    color: var(--mustard);
}

/* «استعرض جميع الخدمات ←» under a rule at the foot of the services card (628:949). */
.navdrop__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin-block-start: 10px;
    padding-inline: 15px 12px;
    border-block-start: 1px solid var(--navy-line);
    font-size: 14px;
    line-height: 1.6;
    color: var(--mustard);
    transition: color 0.15s ease;
}

.navdrop__footer:hover,
.navdrop__footer:focus-visible {
    color: var(--gold);
}

.navdrop__footer-arrow {
    width: 13px;
    height: 12px;
}

[dir="ltr"] .navdrop__footer-arrow {
    transform: scaleX(-1);
}

/* -------------------------------------------------------- account menu */

.acctmenu {
    position: relative;
    display: inline-flex;
}

/* A guest sees the person icon and «تسجيل الدخول»; a member sees their name in the same place
   (628:13004, 628:11374). Neither is a pill any more. */
.acctlink {
    position: relative;
    z-index: 42;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sand);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease;
}

.acctlink:hover,
.acctlink:focus-visible,
.acctmenu__state:checked ~ .acctlink {
    color: var(--mustard);
}

.acctlink__icon {
    width: 16px;
    height: 16px;
}

/* A long name stops at the band's share rather than pushing the utilities over. */
.acctlink__label {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acctmenu__state:focus-visible ~ .acctlink {
    outline: 2px solid var(--mustard);
    outline-offset: 4px;
}

/* The dark card of 628:11430, the nav cards' twin: two rows with their icons, a rule, and
   «تسجيل خروج» without one. */
.acctmenu__panel {
    position: absolute;
    top: calc(100% + 1.25rem);
    inset-inline-end: 0;
    z-index: 42;
    width: 320px;
    max-width: 92vw;
    padding: 10px;
    border: 1px solid rgba(201, 195, 182, 0.3);
    background: var(--navy);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.33);
    transform: translateY(-0.375rem);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s var(--ease-menu), transform 0.2s var(--ease-menu),
                visibility 0.2s var(--ease-menu);
}

.acctmenu__state:checked ~ .acctmenu__panel {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.acctmenu__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acctmenu__list form {
    margin: 0;
}

.acctmenu__out {
    border-block-start: 1px solid var(--navy-line);
}

.acctmenu__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 0 15px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sand);
    text-align: start;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.acctmenu__link::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--mustard);
    opacity: 0;
}

.acctmenu__link:hover,
.acctmenu__link:focus-visible,
.acctmenu__link.is-current {
    background: #252a2d;
    color: var(--mustard);
    outline: 0;
}

.acctmenu__link:hover::before,
.acctmenu__link:focus-visible::before,
.acctmenu__link.is-current::before {
    opacity: 1;
}

.acctmenu__icon {
    flex: none;
    width: 16px;
    height: 16px;
}

/* Clear, and only there to catch the click that closes the menu: the page behind an open
   account menu is not dimmed or blurred. It is a label for the menu's checkbox, so a click
   anywhere on it closes the menu even without the script. */
.acctmenu__veil {
    position: fixed;
    inset: 0;
    z-index: 41;
    display: none;
    cursor: default;
}

.acctmenu__state:checked ~ .acctmenu__veil {
    display: block;
}

/* -------------------------------------------------------- drawer button */

/* Hidden until the nav row stops fitting; see the 1100 stop below. */
.navtoggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-inline-end: -0.5rem;
    cursor: pointer;
}

.navtoggle__bars {
    position: relative;
}

.navtoggle__bars,
.navtoggle__bars::before,
.navtoggle__bars::after {
    display: block;
    width: 1.375rem;
    height: 2px;
    border-radius: 1px;
    background: var(--sand);
    transition: transform 0.2s ease, background 0.2s ease;
}

.navtoggle__bars::before,
.navtoggle__bars::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
}

.navtoggle__bars::before {
    top: -0.4375rem;
}

.navtoggle__bars::after {
    top: 0.4375rem;
}

/* Open: the middle bar drops out and the outer two cross. */
.navtoggle__state:checked ~ .masthead__bar .navtoggle__bars {
    background: transparent;
}

.navtoggle__state:checked ~ .masthead__bar .navtoggle__bars::before {
    top: 0;
    transform: rotate(45deg);
}

.navtoggle__state:checked ~ .masthead__bar .navtoggle__bars::after {
    top: 0;
    transform: rotate(-45deg);
}

.navtoggle__state:focus-visible ~ .masthead__bar .navtoggle {
    outline: 2px solid var(--mustard);
    outline-offset: 2px;
}

/* ---- 1280: the utilities tighten before anything is dropped. */
@media (max-width: 1280px) {
    .visitors__label,
    .sponsor__label {
        display: none;
    }

    .masthead__utils {
        gap: 1.25rem;
    }
}

/* ---- 1100: the row no longer holds one line, so it becomes a drawer under the top band
   (no Figma frame; the September drawer, restyled). The top band keeps the brand, search,
   the account and the drawer button; the sponsor, the visitor count and the language move
   into the drawer under the links. */
@media (max-width: 1100px) {
    .masthead__bar {
        min-height: 4.5rem;
    }

    .navtoggle {
        display: flex;
    }

    .masthead__bar .sponsor,
    .masthead__bar .visitors,
    .masthead__bar .masthead__rule,
    .masthead__bar .masthead__lang,
    .masthead__search-label {
        display: none;
    }

    .masthead__utils {
        gap: 1rem;
    }

    .brand img {
        width: 128px;
    }

    /* Out of flow, so opening it never reflows the page underneath. It scrolls inside
       itself only when it is taller than the screen below the band. */
    .masthead__nav {
        position: absolute;
        top: 100%;
        inset-inline: 0;
        display: none;
        max-height: calc(100vh - 4.5rem);
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;
        border-block: 1px solid var(--navy-line);
        background: var(--navy);
        box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
    }

    .navtoggle__state:checked ~ .masthead__nav {
        display: block;
        animation: nav-reveal 0.3s var(--ease-menu);
    }

    .masthead__nav > .frame > .mainnav {
        border: 0;
    }

    .masthead .mainnav__list {
        flex-direction: column;
        gap: 0;
        min-height: 0;
    }

    .masthead .mainnav__list > li {
        display: block;
        border-block-end: 1px solid var(--navy-line);
    }

    .masthead .mainnav__item {
        display: flex;
        width: 100%;
        padding-block: 0.9375rem;
        font-size: 0.9375rem;
    }

    .masthead .mainnav__item--active::after,
    .masthead .navdrop::after {
        content: none;
    }

    /* The calculator keeps its gold box, at its own width, inside the drawer row. */
    .masthead .mainnav__item--button {
        width: auto;
        margin-block: 0.625rem;
        padding-block: 0;
    }

    /* A menu entry becomes a row with its caret at the far end and its panel folding open
       underneath, in flow. */
    .masthead .navdrop {
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }

    .masthead .navdrop > .mainnav__item {
        flex: 1;
    }

    .masthead .navdrop__toggle.mainnav__item .navdrop__chevron {
        margin-inline-start: auto;
    }

    .masthead .navdrop--link .navdrop__toggle {
        align-self: stretch;
        padding-inline: 1rem 0;
    }

    .masthead .navdrop__panel,
    .masthead .navdrop--end .navdrop__panel {
        position: static;
        display: none;
        width: 100%;
        max-width: none;
        padding: 0 0 0.875rem;
        border: 0;
        background: none;
        box-shadow: none;
        transform: none;
        visibility: visible;
        opacity: 1;
    }

    .masthead .navdrop__panel::before {
        content: none;
    }

    .masthead .navdrop__state:checked ~ .navdrop__panel {
        display: block;
        transform: none;
        animation: nav-reveal 0.26s var(--ease-menu);
    }

    .masthead__extras {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem 1.5rem;
        padding-block: 1.25rem 1.5rem;
    }

    .masthead__extras .sponsor__label,
    .masthead__extras .visitors__label {
        display: inline;
    }

    /* Down to the icon: the name or «تسجيل الدخول» would crowd the band. The text is
       clipped rather than removed, so the control still says what it is. */
    .acctlink__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .acctlink {
        justify-content: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .acctlink__icon {
        width: 18px;
        height: 18px;
    }

    /* The card becomes a sheet the width of the screen under the band, as the nav drawer
       is: the menu lets go of its own box so the sheet hangs from the header instead. */
    .acctmenu {
        position: static;
    }

    .acctmenu__panel {
        top: 100%;
        inset-inline: 0;
        width: auto;
        max-width: none;
        padding-inline: var(--frame-pad);
        border-inline: 0;
    }
}

/* ---------------------------------------------------------- hero video

   1408x768 in the design — narrower than the panels below it, so it is capped
   and centred inside the shell rather than filling it. */

.herovideo {
    position: relative;
    max-width: 1408px;
    margin-inline: auto;
    margin-block-end: var(--gap-section);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1408 / 768;
    background: var(--panel-solid);
}

/* At the width of whatever holds it, with no gap under it: the band around it owns the
   spacing. */
.herovideo--flush {
    max-width: none;
    margin-block-end: 0;
}

/* The frame keeps its drawn size whatever plays in it, and the picture is never cut: a video
   (or cover) of another shape is scaled to fit, with black bands at the sides or top and
   bottom. The design's own covers are cut to their frames, so they fill them exactly. */
.herovideo__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.herovideo__play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: grid;
    place-items: center;
    width: clamp(3rem, 3.39vw, 4.0625rem);
    height: clamp(3rem, 3.39vw, 4.0625rem);
    transform: translate(50%, -50%);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    transition:
        background 0.2s ease,
        opacity 0.2s ease,
        visibility 0.2s ease;
}

[dir="ltr"] .herovideo__play {
    transform: translate(-50%, -50%);
}

.herovideo__play:hover {
    background: var(--gold);
}

.herovideo__play img {
    width: 55%;
    height: 55%;
    object-fit: contain;
}

/* The poster button is the affordance until playback starts; after that the bar owns it. */
.herovideo.is-playing .herovideo__play {
    opacity: 0;
    visibility: hidden;
}

/* The bar borrows .panel's chrome at a smaller scale, so it reads as the same surface
   as every other block on the page. It stays out of the way until the video has been
   started once — before that the poster button is the only control worth offering. */
.herovideo__controls {
    position: absolute;
    inset-inline: clamp(0.75rem, 1.3vw, 1.5625rem);
    inset-block-end: clamp(0.75rem, 1.3vw, 1.5625rem);
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 0.83vw, 1rem);
    padding: clamp(0.375rem, 0.52vw, 0.625rem) clamp(0.625rem, 0.94vw, 1.125rem);
    border-radius: var(--radius-sm);
    background: var(--panel);
    backdrop-filter: blur(2.1px);
    color: var(--white);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}

/* Once the video has been played the bar becomes the primary control and stays up, so
   there is always something focusable to tab back into. During playback it gets out of
   the way again — unless you are pointing at it, or hold keyboard focus inside it. */
.herovideo.is-active .herovideo__controls {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.herovideo.is-active.is-playing .herovideo__controls {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
}

.herovideo.is-active.is-playing:hover .herovideo__controls,
.herovideo.is-active.is-playing:focus-within .herovideo__controls {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.herovideo__btn {
    display: grid;
    place-items: center;
    flex: none;
    width: clamp(1.75rem, 1.98vw, 2.375rem);
    height: clamp(1.75rem, 1.98vw, 2.375rem);
    border-radius: 8px;
    color: var(--white);
    transition: color 0.2s ease;
}

.herovideo__btn:hover {
    color: var(--gold);
}

.herovideo__icon {
    width: clamp(1.125rem, 1.25vw, 1.5rem);
    height: clamp(1.125rem, 1.25vw, 1.5rem);
}

/* Each toggle ships both glyphs and shows one. web.js only moves the state class. */
.herovideo__icon--pause,
.herovideo__icon--muted,
.herovideo__icon--collapse {
    display: none;
}

.herovideo.is-playing .herovideo__icon--play,
.herovideo.is-muted .herovideo__icon--volume,
.herovideo.is-fullscreen .herovideo__icon--expand {
    display: none;
}

.herovideo.is-playing .herovideo__icon--pause,
.herovideo.is-muted .herovideo__icon--muted,
.herovideo.is-fullscreen .herovideo__icon--collapse {
    display: inline-block;
}

/* --progress is written by web.js on every timeupdate; the gradient is the filled track. */
.herovideo__scrub {
    -webkit-appearance: none;
    appearance: none;
    direction: ltr;
    flex: 1;
    min-width: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--gold) 0 var(--progress, 0%),
        var(--card-border) var(--progress, 0%) 100%
    );
    cursor: pointer;
}

.herovideo__scrub::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: var(--gold);
}

.herovideo__scrub::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: var(--gold);
}

.herovideo__time {
    flex: none;
    direction: ltr;
    font-family: var(--font-num);
    font-size: clamp(0.75rem, 0.83vw, 1rem);
    font-variant-numeric: tabular-nums;
    color: var(--white);
}

/* Fullscreen hands the element the whole viewport, so the design's frame comes off. */
.herovideo:fullscreen {
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    aspect-ratio: auto;
}

.herovideo:fullscreen .herovideo__media {
    object-fit: contain;
}

/* The YouTube or Vimeo player, put over the cover when play is pressed. */
.herovideo__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

/* --------------------------------------------------------------- panel */

.panel {
    margin-block-end: var(--gap-section);
    padding: clamp(1.25rem, 2.6vw, 3.125rem) clamp(1rem, 1.67vw, 2rem);
    border: 2.5px solid var(--panel-border);
    border-radius: var(--radius-lg);
    background: var(--panel);
    backdrop-filter: blur(2.1px);
}

/* This panel alone is drawn with a light hairline rather than the heavier warm-grey
   border the stats and box-office panels share. */
.panel--films {
    border: 1px solid #e9e4da;
    background: var(--panel-solid);
}

/* ---------------------------------------------------------------- films */

/* poster stack

   A fan of every film's poster: the active one centred at full size, its neighbours
   scaled to 0.865 and pushed 24.7% of a poster's width either side. Those two numbers
   are the design's 526-against-608 sizes and its 150px offset. Only --pos changes as
   you page, so the posters glide between slots instead of being swapped out.

   --dir puts the previous film on the right in Arabic and on the left in English. */

.posters {
    position: relative;
    aspect-ratio: 883 / 909;
}

/* Sits under the poster column, centred on the stack — level with the action buttons
   in the other column rather than below the whole row. */
.carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 1.3vw, 1.5625rem);
    margin-block-start: clamp(1rem, 3.33vw, 4rem);
}

.carousel__dots {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.56vw, 1.875rem);
}

.carousel__dot {
    flex: none;
    width: clamp(0.5rem, 0.63vw, 0.75rem);
    height: clamp(0.5rem, 0.63vw, 0.75rem);
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transition:
        width 0.2s ease,
        height 0.2s ease,
        background 0.2s ease;
}

.carousel__dot--active {
    width: clamp(0.75rem, 1.25vw, 1.5rem);
    height: clamp(0.75rem, 1.25vw, 1.5rem);
    background: var(--gold);
}

/* The slider still works with motion off — it just arrives instead of travelling. */
@media (prefers-reduced-motion: reduce) {
    .carousel__dot {
        transition: none;
    }
}

/* ------------------------------------------------------------- page hero

   The banner that opens an inner page: a photograph filling the shell with the
   headline block held against its dark half. Shared by the services page and the
   break-even calculator, which draw it at the same size with different content. */

/* ------------------------------------------------------------ breadcrumbs */

.crumbs {
    font-size: clamp(0.875rem, 1.15vw, 1.375rem);
    font-weight: 500;
    color: var(--muted);
}

.crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.crumbs__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.crumbs__link:hover {
    color: var(--white);
}

/* ------------------------------------------ redesign: حاسبة التعادل السينمائي

   The break-even page on the paper ground: the inputs heading, three columns of a head and a
   black box split by hairlines, the full-width mustard bar, and — once something has been
   submitted — the sand card with the two figures. Measured on the 1920 frame: 530 columns
   with 48 between them, 65 boxes, a 64 bar, a 1686 card.

   The consultation modal is a sibling of the form rather than a child of the card, so the
   section (.calc) is what its :has() reads the open state from. */

.formalert {
    margin: clamp(0.75rem, 1.25vw, 1.5rem) 0 0;
    color: var(--danger);
    font-size: clamp(0.875rem, 0.89vw, 1.0625rem);
}

.fielderror {
    margin: 0.5rem 0 0;
    color: var(--danger);
    font-size: clamp(0.875rem, 0.89vw, 1.0625rem);
}

/* --- the consultation modal */

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

/* The design draws this at 909 across on a 1920 canvas, which in a browser leaves the
   three fields swimming and pushes the page it is asking about out of sight. It is a
   dialog rather than a page, so it takes fixed metrics instead of the canvas-scaled ones
   everything else here uses, and is sized to the form it holds. */
.modal__card {
    position: relative;
    width: min(30rem, 100%);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 2.25rem 2rem 2.5rem;
    border: 2.5px solid var(--panel-border);
    border-radius: var(--radius-lg);
    background: var(--panel);
    backdrop-filter: blur(2.1px);
}

/* Kept clear of the close control in the corner. */
.modal__title {
    margin: 0;
    padding-inline: 1.75rem;
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    color: var(--white);
}

/* A label rather than a button, so closing still works with no script; web.js adds the
   keyboard half, since a label carries no activation behaviour of its own. */
.modal__x {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.modal__x:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

/* --------------------------------------------------------------- footer
 *
 * The October 2026 close (Figma 628:10525, 628:12943): the sponsor band on the paper ground —
 * «البوابة برعاية» then the strategic partner, each over a 365×76 box — then the navy footer:
 * the logo, a rule and the tagline against the social squares, the nav row between two
 * hairlines without its chevrons, and the legal line.
 */

.sitefooter {
    font-family: var(--font-lama);
    line-height: 1.5;
}

.partners {
    padding-block: 0 57px;
    background: var(--paper);
}

.partners__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    padding-block-start: 37px;
    border-block-start: 1px solid var(--paper-line);
}

/* Only one of the two has a logo: it stands alone, centred on the band. */
.partners__row--single {
    grid-template-columns: minmax(0, 1fr);
}

.partners__slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.partners__label {
    margin: 0;
    font-size: 12px;
    color: var(--taupe);
}

/* The logo on the paper, unframed, under its label. */
.partners__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    margin: 0;
    font-size: 14px;
    color: var(--taupe);
    text-align: center;
}

.sitefooter__main {
    padding-block: 44px 25px;
    background: var(--navy);
    color: var(--stone);
}

.sitefooter__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block-end: 33px;
}

.sitefooter__brand {
    display: flex;
    align-items: center;
    gap: 36px;
}

.sitefooter .brand img {
    width: 164px;
}

.sitefooter__rule {
    flex: none;
    width: 1px;
    height: 54px;
    background: var(--navy-line);
}

.sitefooter__tagline {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--stone);
}

.sitefooter__social {
    display: flex;
    gap: 13px;
}

.sitefooter__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--navy-line);
    color: var(--stone);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.sitefooter__social a:hover,
.sitefooter__social a:focus-visible {
    border-color: var(--mustard);
    color: var(--mustard);
}

.sitefooter__social .icon-mask {
    width: 16px;
    height: 16px;
}

.sitefooter__nav .mainnav__list {
    flex-wrap: wrap;
    min-height: 0;
    padding-block: 23px;
    border-block: 1px solid var(--navy-line);
}

.sitefooter__nav .mainnav__item {
    gap: 7px;
    font-size: 12px;
    line-height: 2;
}

.sitefooter__nav .mainnav__item:hover {
    color: var(--sand);
}

.sitefooter__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-block-start: 24px;
    font-size: 10px;
    color: var(--taupe);
}

.sitefooter__legal p {
    margin: 0;
}

.sitefooter__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 23px;
}

.sitefooter__legal a {
    transition: color 0.15s ease;
}

.sitefooter__legal a:hover,
.sitefooter__legal a:focus-visible {
    color: var(--sand);
}

/* ---- the footer's own stops */

@media (max-width: 1100px) {
    /* The row wraps and centres instead of spreading end to end. */
    .sitefooter__nav .mainnav__list {
        justify-content: center;
        gap: 0.25rem 1.75rem;
        padding-block: 1rem;
    }
}

@media (max-width: 700px) {
    .partners__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .sitefooter__top,
    .sitefooter__legal {
        flex-direction: column;
        text-align: center;
    }

    .sitefooter__brand {
        flex-direction: column;
        gap: 1rem;
    }

    .sitefooter__rule {
        width: 3rem;
        height: 1px;
    }

    .sitefooter__legal-links {
        justify-content: center;
    }
}

/* ------------------------------------------------------- redesign: shared
 *
 * The pages rebuilt on the September 2026 design — the home page, «حجم شباك التذاكر
 * المحلي» and the scenarios services page — sit inside .lfg, which sets them on the paper
 * ground in Lama Sans. Sizes are off the 1920 canvas: clamp(min, px/19.2 vw, px).
 */

.lfg {
    background: var(--paper);
    color: var(--navy);
    font-family: var(--font-lama);
    line-height: 1.5;
}

.lfg__navy {
    background: var(--navy);
    color: var(--ivory);
}

/* An arrow glyph drawn pointing left, into the page in Arabic; it turns in English. */
[dir="ltr"] .dir-arrow {
    transform: scaleX(-1);
}

/* The mustard button. */
.goldbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: clamp(3rem, 3.75vw, 4.5rem);
    padding-inline: clamp(1.25rem, 1.46vw, 1.75rem);
    border: 0;
    background: var(--mustard);
    color: var(--navy);
    font: inherit;
    font-size: clamp(0.9375rem, 1.04vw, 1.25rem);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.goldbtn:hover,
.goldbtn:focus-visible {
    background: #e9c05c;
}

.goldbtn[hidden] {
    display: none;
}

.goldbtn__arrow {
    flex: none;
    width: clamp(1.25rem, 1.25vw, 1.5rem);
    height: clamp(1.25rem, 1.25vw, 1.5rem);
}

.goldbtn--small {
    min-height: clamp(2.75rem, 2.5vw, 3rem);
    padding-inline: 1.25rem;
    font-size: clamp(0.875rem, 0.83vw, 1rem);
}

.goldbtn--small .goldbtn__arrow {
    width: 1.25rem;
    height: 1.25rem;
}

/* A text link with its arrow; on the navy it is underlined, as the hero's second action is. */
.arrowlink {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.875rem, 0.83vw, 1rem);
    line-height: 1.5;
    color: var(--navy);
    white-space: nowrap;
    transition: color 0.15s ease;
}

.arrowlink__arrow {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.arrowlink--light {
    padding-block-end: 0.375rem;
    border-block-end: 1px solid currentColor;
    font-size: clamp(0.9375rem, 1.04vw, 1.25rem);
    color: var(--ivory);
}

.arrowlink:hover,
a:hover > .arrowlink {
    color: var(--mustard);
}

/* Every band's opening: kicker over heading at the inline start, and at the inline end
   either a Latin index on the heading's baseline, a note level with the heading, or the
   slider's arrows. Sizes are the stats band's; the tools band sets a larger heading. */
.bandhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    margin-block-end: clamp(1.75rem, 2.86vw, 3.4375rem);
}

.bandhead__kicker {
    margin: 0 0 clamp(0.75rem, 1.3vw, 1.5625rem);
    font-size: clamp(0.8125rem, 0.83vw, 1rem);
    line-height: 1.4;
    color: var(--taupe);
}

.lfg__navy .bandhead__kicker {
    font-size: clamp(0.875rem, 0.96vw, 1.15rem);
    color: var(--stone);
}

.bandhead__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.03vw, 2.4375rem);
    font-weight: 400;
    line-height: 1.3;
}

/* A note (the last-updated date): sits level with the heading, not on the kicker. */
.bandhead__aside {
    align-self: flex-end;
    margin: 0 0 0.5em;
    font-size: clamp(0.75rem, 0.73vw, 0.875rem);
    color: var(--taupe);
}

/* «01 / DISCOVER»: Latin, spaced wide, on the heading's baseline. */
.bandhead__index {
    align-self: flex-end;
    margin: 0 0 0.35em;
    font-size: clamp(0.75rem, 0.83vw, 1rem);
    letter-spacing: 0.3em;
    color: var(--taupe);
}

.bandhead__controls {
    align-self: flex-end;
}

/* The data tables of the redesign: hairline rows on the paper, the header in small taupe. */
.datatable {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(0.9375rem, 1.04vw, 1.25rem);
    line-height: 1.4;
    text-align: start;
    font-variant-numeric: tabular-nums;
}

.datatable th,
.datatable td {
    padding: clamp(0.875rem, 1.25vw, 1.5rem) clamp(0.5rem, 0.78vw, 0.9375rem);
    border-block-end: 1px solid var(--paper-line);
    font-weight: 400;
    text-align: start;
    vertical-align: middle;
}

.datatable th:first-child,
.datatable td:first-child {
    padding-inline-start: 0;
}

.datatable thead th {
    padding-block: 0 clamp(0.75rem, 0.94vw, 1.125rem);
    font-size: clamp(0.75rem, 0.68vw, 0.8125rem);
    color: var(--taupe);
    vertical-align: bottom;
}

/* The riyal sign beside an amount. */
.money {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    white-space: nowrap;
}

.money__sign {
    width: 0.8em;
    height: 0.9em;
}

/* -------------------------------------------------------- redesign: home
 *
 * October 2026 (Figma 628:316), drawn at 1440 with the 88 gutter: the hero, the introductory
 * film, «الأفلام السعودية في شباك التذاكر المحلي» on the navy, the market on the sand, the
 * three tools and «قريبا في السينما». Sizes are the frame's at 1440 and above.
 */

.homeband {
    padding-block-start: 64px;
}

/* Every home band opens on a 13px kicker over its heading; the heading is 30 on the navy
   bands, 40 for the tools and 29 for the films. */
.homeband .bandhead {
    margin-block-end: 36px;
}

.homeband .bandhead__kicker {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
}

.homeband .bandhead__title {
    font-size: clamp(1.5rem, 2.08vw, 1.875rem);
    line-height: 1.5;
}

/* The gold button of the October bands: 54 tall, 14–15px medium, the arrow at its end. */
.goldbtn--v3 {
    gap: 0.75rem;
    min-height: 54px;
    padding-inline: 25px;
    font-size: 15px;
}

.goldbtn--v3 .goldbtn__arrow {
    width: 13px;
    height: 12px;
}

/* ---- the opening: the title block on the inline start, the photograph on the other half */

.homehero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 570px;
    background: var(--navy);
    color: var(--sand);
}

.homehero__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-block: 56px;
    padding-inline: var(--frame-pad) clamp(2rem, 3.33vw, 3rem);
}

.homehero__eyebrow {
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--stone);
}

/* Two lines, as drawn: each line is kept whole while the half-width column can hold it. */
.homehero__title {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: clamp(2.75rem, 5.28vw, 4.75rem);
    font-weight: 300;
    line-height: 1.24;
    letter-spacing: -0.016em;
}

@media (min-width: 901px) {
    .homehero__title span {
        white-space: nowrap;
    }
}

/* The global :lang(ar) leading (1.65) lands on every element, these lines included; they take
   the block's own leading instead, as drawn. */
.homehero__title span,
.homehero__lead span,
.statrow__value span,
.boxband__value span {
    line-height: inherit;
}

.homehero__lead {
    display: flex;
    flex-direction: column;
    max-width: 587px;
    margin: 24px 0 0;
    font-size: clamp(1.0625rem, 1.39vw, 1.25rem);
    font-weight: 300;
    line-height: 1.9;
    color: var(--stone);
}

.homehero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-block-start: 33px;
}

.homehero__actions .goldbtn {
    gap: 1rem;
    min-height: 54px;
    padding-inline: 21px;
    font-size: 14px;
}

.homehero__actions .goldbtn__arrow,
.homehero__actions .arrowlink__arrow {
    width: 13px;
    height: 12px;
}

.homehero__actions .arrowlink--light {
    gap: 0.75rem;
    padding-block-end: 0.5rem;
    border-block-end-color: var(--navy-line);
    font-size: 14px;
    color: var(--sand);
}

.homehero__note {
    align-self: stretch;
    max-width: 584px;
    margin: 36px 0 0;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--navy-line);
    font-size: 12px;
    color: var(--taupe);
}

.homehero__media {
    position: relative;
    min-height: 100%;
}

.homehero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homehero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 22, 26, 0.35), transparent 40%);
    pointer-events: none;
}

.homehero__caption {
    position: absolute;
    z-index: 1;
    inset-block-end: 46px;
    inset-inline-end: 90px;
    margin: 0;
    font-size: 11px;
    color: var(--stone);
}

/* ---- the introductory film: 1264×480 in a hairline, a round play button, and the two words
   along its foot (628:386–628:395) */

.discover {
    padding-block-end: 52px;
}

.discover .bandhead {
    margin-block-end: 26px;
}

.discover .bandhead__kicker {
    color: var(--sand);
}

.discover .herovideo {
    max-width: none;
    margin: 0;
    border: 1px solid #4d493e;
    border-radius: 0;
    aspect-ratio: 1264 / 480;
}

.discover .herovideo__play {
    width: 82px;
    height: 82px;
    border: 1px solid rgba(239, 234, 224, 0.8);
    border-radius: 50%;
    background: rgba(18, 22, 26, 0.4);
    backdrop-filter: none;
}

.discover .herovideo__play img {
    width: 32px;
    height: 32px;
    filter: invert(1);
}

.herovideo__caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 72px 32px 24px;
    background: linear-gradient(to top, rgba(18, 22, 26, 0.55), rgba(18, 22, 26, 0));
    font-size: 12px;
    color: var(--sand);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.herovideo__caption-rule {
    flex: 1;
    height: 1px;
    background: rgba(239, 234, 224, 0.35);
}

.herovideo.is-active .herovideo__caption {
    opacity: 0;
}

/* ---- «الأفلام السعودية في شباك التذاكر المحلي»: a rule, the heading with the report button
   beside it, then four 316 columns split by hairlines; the last is lifted onto its own
   green-grey card with the list button (628:396) */

.marketstats {
    padding-block-start: 0;
}

.marketstats::before {
    content: "";
    display: block;
    height: 1px;
    margin-block-end: 28px;
    background: var(--navy-line);
}

.marketstats .bandhead {
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1rem clamp(1.5rem, 3.4vw, 3rem);
    margin-block-end: 57px;
}

.marketstats .bandhead__kicker {
    color: var(--stone);
}

.marketstats .bandhead__controls {
    align-self: flex-end;
}

.statrow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.statrow__item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 304px;
    padding: 24px 26px;
}

.statrow__item:first-child {
    padding-inline-start: 0;
}

.statrow__item + .statrow__item {
    border-inline-start: 1px solid var(--navy-line);
}

.statrow__item--lift {
    border: 1px solid #56605d;
    border-inline-start-color: transparent;
    background: #222b2d;
}

.statrow__item--lift + .statrow__item,
.statrow__item + .statrow__item--lift {
    border-inline-start: 1px solid #56605d;
}

.statrow__label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--stone);
}

.statrow__qualifier {
    font-size: 11px;
    color: var(--taupe);
}

.statrow__icon {
    width: 20px;
    height: 20px;
    color: var(--mustard);
}

.statrow__figure {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
}

/* The figure, then its glyph 18 beyond it (628:415, 628:431). */
.statrow__value {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    font-size: clamp(2.75rem, 4.44vw, 4rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--sand);
    font-variant-numeric: tabular-nums;
}

.statrow__sign {
    width: 0.86em;
    height: 0.7em;
}

.statrow__sign--riyal {
    width: 0.63em;
    height: 0.7em;
}

.statrow__unit {
    font-size: 13px;
    line-height: 1.6;
    color: var(--taupe);
}

.statrow__cta {
    margin-block-start: 11px;
}

.lfg__navy {
    padding-block-end: 66px;
}

/* ---- the market on the sand (628:471): the heading block with its notes and the green
   button, then two teal figures, each behind a hairline */

.boxband {
    padding-block: 53px 57px;
    background: var(--sand);
}

.boxband__inner {
    display: grid;
    grid-template-columns: minmax(0, 39.9%) minmax(0, 31.8%) minmax(0, 1fr);
    align-items: start;
}

.boxband__kicker {
    margin: 0;
    font-size: 13px;
    color: var(--taupe);
}

.boxband__title {
    max-width: 9em;
    margin: 12px 0 0;
    font-size: clamp(1.5rem, 2.08vw, 1.875rem);
    font-weight: 400;
    line-height: 1.5;
}

.boxband__title a:hover {
    color: var(--teal);
}

.boxband__sub {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--taupe);
}

.boxband__updated {
    margin: 16px 0 0;
    font-size: 11px;
    color: var(--taupe);
}

.boxband__cta {
    margin-block-start: 22px;
    min-height: 46px;
    font-weight: 500;
}

/* The list is only a wrapper: its two figures sit in the band's own grid columns. */
.boxband__figures {
    display: contents;
}

.boxband__item {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-block-start: 43px;
    padding-inline-start: 45px;
    border-inline-start: 1px solid var(--stone);
}

.boxband__label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--navy);
}

.boxband__icon {
    width: 20px;
    height: 20px;
    color: var(--teal);
}

.boxband__figure {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
}

.boxband__value {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    font-size: clamp(2.75rem, 4.58vw, 4.125rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--teal);
    font-variant-numeric: tabular-nums;
}

.boxband__sign {
    width: 0.875em;
    height: 0.7em;
}

.boxband__sign--riyal {
    width: 0.63em;
}

.boxband__unit {
    font-size: 13px;
    line-height: 1.6;
    color: var(--taupe);
}

/* ---- «أدواتنا لقراءة السوق»: three 400×255 sand cards, each the whole of it a link (628:513) */

.tools {
    padding-block-end: 62px;
}

.tools .bandhead__title {
    font-size: clamp(1.75rem, 2.78vw, 2.5rem);
}

.tools__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.toolcard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 255px;
    padding: 32px 32px 58px;
    border: 1px solid #a9a397;
    background: var(--sand);
    transition: border-color 0.2s ease;
}

.toolcard:hover,
.toolcard:focus-visible {
    border-color: var(--teal);
}

.toolcard__icon {
    width: 26px;
    height: 26px;
    margin: 4px 4px 9px;
    color: var(--teal);
}

.toolcard__title {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
}

.toolcard__text {
    margin: 12px 0 27px;
    font-size: 15px;
    line-height: 1.8;
    color: #6e685d;
}

.toolcard .arrowlink {
    gap: 0.875rem;
    margin-block-start: auto;
    font-size: 14px;
}

.toolcard .arrowlink__arrow {
    width: 13px;
    height: 12px;
}

/* ---- «قريبا في السينما»: under a hairline, the heading with the list button and the arrows,
   then one 1264×542 navy card per film — the text at the inline start, the posters fanned at the
   other end (628:579) */

.upnext::before,
.weekly::before {
    content: "";
    display: block;
    height: 1px;
    margin-block-end: 55px;
    background: var(--paper-line);
}

/* 61 under the dots before the partners' hairline (628:579 ends 61 below them). */
.upnext {
    padding-block-end: 61px;
}

.upnext,
.weekly {
    padding-block-start: 0;
}

.upnext .bandhead__title {
    font-size: clamp(1.5rem, 2.01vw, 1.8125rem);
}

.upnext .bandhead__controls {
    align-self: center;
}

.upnext__headactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.upnext__list {
    font-size: 14px;
    font-weight: 500;
}

.upnext__arrows {
    display: flex;
    gap: 8px;
}

.upnext__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--paper-line);
    color: var(--navy);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.upnext__arrow:hover,
.upnext__arrow:focus-visible {
    border-color: var(--navy);
}

.upnext__arrow-icon {
    width: 16px;
    height: 16px;
}

/* In Arabic «previous» is to the right: that button carries the arrow turned right. */
.upnext__arrow-icon--prev,
[dir="ltr"] .upnext__arrow-icon {
    transform: scaleX(-1);
}

[dir="ltr"] .upnext__arrow-icon--prev {
    transform: none;
}

/* One navy card that never moves: the texts at the inline start, the poster fan at the other
   end. Stepping the slider swaps what is inside it. */
.upnext__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38%;
    background: var(--navy);
}

/* Every film's text sits in the same cell, so the card is as tall as the longest one; the
   others are inert (Blade for the first render, web.js after) and fade out. */
.upnext__slides {
    display: grid;
}

.upnext__slide {
    display: flex;
    grid-area: 1 / 1;
    transition: opacity 0.45s var(--ease-menu), visibility 0.45s var(--ease-menu);
}

.upnext__slide[inert] {
    opacity: 0;
    visibility: hidden;
}

.upnext__slide > .upnext__panel {
    flex: 1;
}

.upnext__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-block: 42px 52px;
    padding-inline: 43px 0;
    color: var(--sand);
}

.upnext__save {
    position: absolute;
    inset-block-start: 35px;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--navy-line);
    color: var(--sand);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.upnext__save:hover,
.upnext__save:focus-visible {
    border-color: var(--mustard);
    color: var(--mustard);
}

.upnext__save .icon-mask {
    width: 16px;
    height: 16px;
}

/* Saved to the member's list: the hover colours, kept. */
.upnext__save[aria-pressed="true"] {
    border-color: var(--mustard);
    color: var(--mustard);
}

.upnext__kicker {
    margin: 0 0 24px;
    font-size: 12px;
    color: var(--mustard);
}

.upnext__title {
    max-width: 7em;
    margin: 0;
    font-size: clamp(2.25rem, 3.75vw, 3.375rem);
    font-weight: 300;
    line-height: 1.2;
}

.upnext__text {
    max-width: 553px;
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.9;
    color: var(--stone);
}

.upnext__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 34px;
    margin: 20px 0 26px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--stone);
}

.upnext__meta li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.upnext__meta .icon-mask {
    width: 16px;
    height: 16px;
    color: var(--taupe);
}

/* Under the rule: the countdown at the inline start, the two actions at the other end. */
.upnext__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    align-self: stretch;
    margin-block-start: auto;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--navy-line);
}

.upnext__countdown {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}

.upnext__countdown-label {
    font-size: 12px;
    color: var(--taupe);
}

.upnext__countdown-value {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 15px;
    color: var(--stone);
}

.upnext__countdown-value strong {
    font-size: 52px;
    font-weight: 300;
    line-height: 1.1;
    color: var(--mustard);
}

.upnext__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 34px;
}

.upnext__actions .goldbtn {
    gap: 1rem;
    min-height: 49px;
    padding-inline: 20px;
    font-size: 14px;
}

.upnext__actions .goldbtn__arrow {
    width: 16px;
    height: 16px;
}

.upnext__actions .arrowlink {
    gap: 0.875rem;
    padding: 0;
    border: 0;
    font-size: 14px;
}

.upnext__actions .arrowlink__arrow {
    width: 13px;
    height: 12px;
}

/* The fan: the active film's poster at 292×438, rounded 12 in a faint gold edge, and its
   neighbours' at 234×388, 75 to either side behind it. Every poster is in the fan at once
   and only --pos (its distance from the active film) changes as the slider steps, so the
   posters glide between those slots. In Arabic the next film waits on the left. */
.upnext__poster {
    display: grid;
    place-items: center;
    padding-block: 52px;
    overflow: hidden;
}

.upnext__fan {
    --dir: -1;
    position: relative;
    width: min(292px, 62%);
    aspect-ratio: 292 / 438;
}

[dir="ltr"] .upnext__fan {
    --dir: 1;
}

.upnext__card-poster {
    position: absolute;
    z-index: 2;
    top: 50%;
    /* 75 of the 292 poster's width either side. */
    left: calc(50% + var(--pos, 0) * var(--dir) * 25.7%);
    display: block;
    width: 80.1%;
    height: 88.7%;
    border: 1px solid rgba(223, 175, 59, 0.5);
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 9px 25px rgba(0, 0, 0, 0.33);
    transform: translate(-50%, -50%);
    transition:
        left 0.6s var(--ease-menu),
        width 0.6s var(--ease-menu),
        height 0.6s var(--ease-menu),
        opacity 0.6s var(--ease-menu);
}

.upnext__card-poster.is-active {
    z-index: 3;
    width: 100%;
    height: 100%;
}

.upnext__card-poster.is-hidden {
    z-index: 1;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .upnext__slide,
    .upnext__card-poster {
        transition: none;
    }
}

.upnext__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-block-start: 20px;
}

.upnext .carousel__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border-radius: 999px;
    background: var(--stone);
    transition: width 0.3s var(--ease-menu), background-color 0.3s var(--ease-menu);
}

.upnext .carousel__dot--active {
    width: 27px;
    background: var(--teal);
}

@media (max-width: 900px) {
    .statrow__item {
        min-height: 0;
    }

    .upnext__panel {
        padding-inline: 1.25rem;
    }

    .upnext__save {
        inset-inline-end: 1.25rem;
    }
}

/* «شباك التذاكر السعودي»: the tools band's larger heading, then a table whose film column
   takes 610 of the 1688 frame and whose four figures share the rest equally. */
.weekly .bandhead {
    margin-block-end: clamp(2.5rem, 4.69vw, 5.625rem);
}

.weekly .bandhead__title {
    font-size: clamp(1.875rem, 3.13vw, 3.75rem);
    line-height: 1.2;
}

.weekly__scroll {
    overflow-x: auto;
}

.weekly__table {
    min-width: 36rem;
    table-layout: fixed;
    font-size: clamp(1rem, 1.15vw, 1.375rem);
}

.weekly__table thead th {
    padding-block-end: clamp(1rem, 1.3vw, 1.5625rem);
    font-size: clamp(0.8125rem, 0.83vw, 1rem);
}

.weekly__table thead th {
    width: 16%;
}

.weekly__table thead th:first-child {
    width: 36.1%;
}

/* Each figure starts right on its column's edge, as drawn. */
.weekly__table th,
.weekly__table td {
    padding-inline: 0;
}

.weekly__table tbody th,
.weekly__table tbody td {
    height: clamp(3.75rem, 4.17vw, 5rem);
    padding-block: 0;
}

.weekly__table tbody td {
    font-family: var(--font-figures);
}

.weekly__change {
    color: var(--taupe);
}

.weekly__change--up {
    color: var(--rise);
}

.weekly {
    padding-block-end: clamp(1.5rem, 1.82vw, 2.1875rem);
}

/* -------------------------------------------------- redesign: page heroes */

/* ------------------------------------------ redesign: حجم شباك التذاكر المحلي */

.reportshare {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: clamp(1.75rem, 2.66vw, 3.1875rem);
}

/* 253x65, as drawn. */
.reportshare .goldbtn {
    gap: 1rem;
    min-height: clamp(3rem, 3.39vw, 4.0625rem);
    padding-inline: clamp(1.25rem, 1.3vw, 1.5625rem);
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
}

.reportshare .goldbtn__arrow {
    width: 1.375rem;
    height: 1.375rem;
}

/* Out of the flow, so the line it shows does not push the partner band down. */
.reportshare__toast {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    margin: 0;
    font-size: 0.875rem;
    color: var(--teal);
}

/* ---------------------------------------- redesign: تقارير أداء الفيلم السعودي
 *
 * The four reports on the paper ground: the switcher rail on a sand plate at the start of
 * the line, bled 45 past the frame's edge; the report beside it, 1229 of the 1688 frame and
 * 56 away; the share button centred under the report. Every size below is measured off the
 * 1920 frames.
 *
 * Everything here is scoped to .perfv2, which the profile pages share (see .profv2).
 */

.perfv2 {
    --field-edge: #353533;
    --field-ink: #737370;

    display: grid;
    grid-template-columns: minmax(0, 402fr) minmax(0, 1229fr);
    column-gap: clamp(1.5rem, 2.92vw, 3.5rem);
    padding-block: clamp(2rem, 2.6vw, 3.125rem) clamp(0.5rem, 0.68vw, 0.8125rem);
}

/* ---- the row every report opens with: the paragraph, and the search box */

.perfv2 .reptop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(1rem, 3.02vw, 3.625rem);
}

.perfv2 .reptop__intro {
    flex: 0 1 61%;
    margin: 0;
    font-size: clamp(1rem, 1.35vw, 1.625rem);
    line-height: 1.5;
    color: #97948f;
}

.perfv2 .repsearch {
    position: relative;
    flex: 0 1 34%;
    margin-block-start: clamp(0.25rem, 0.94vw, 1.125rem);
}

.perfv2 .repsearch__field {
    width: 100%;
    height: clamp(3.25rem, 3.39vw, 4.0625rem);
    padding-inline: clamp(3rem, 4.69vw, 5.625rem) 1rem;
    border: 2px solid var(--field-edge);
    border-radius: 0;
    background: #191a1c;
    color: #fff;
    font: inherit;
    font-size: clamp(1rem, 1.41vw, 1.6875rem);
}

.perfv2 .repsearch__field::placeholder {
    color: var(--field-ink);
}

.perfv2 .repsearch__field:focus-visible {
    outline: 2px solid var(--mustard);
    outline-offset: 2px;
}

/* At the start of the box, as drawn, with the placeholder running on from it. */
.perfv2 .repsearch__icon {
    position: absolute;
    inset-inline-start: clamp(1rem, 1.56vw, 1.875rem);
    top: 50%;
    width: clamp(1.375rem, 1.82vw, 2.1875rem);
    height: clamp(1.375rem, 1.82vw, 2.1875rem);
    transform: translateY(-50%);
    color: #fff;
    pointer-events: none;
}

/* ---- the tables: ruled rows on the paper, sand strips for the bands and totals */

.perfv2 .reptable {
    margin-block-start: clamp(1.75rem, 2.6vw, 3.125rem);
}

.perfv2 .reptable__scroll {
    container-type: inline-size;
    overflow-x: auto;
    scrollbar-color: #1d1d1d #b5bfc7;
}

.perfv2 .reptable__scroll::-webkit-scrollbar {
    height: 9px;
}

.perfv2 .reptable__scroll::-webkit-scrollbar-track {
    background: #b5bfc7;
}

.perfv2 .reptable__scroll::-webkit-scrollbar-thumb {
    background: #1d1d1d;
}

.perfv2 .reptable__scroll:focus-visible {
    outline: 2px solid var(--mustard);
    outline-offset: 4px;
}

.perfv2 .reptable__table {
    width: 100%;
    border-collapse: collapse;
}

.perfv2 .reptable__cell {
    padding: clamp(0.875rem, 1.3vw, 1.5625rem) clamp(0.5rem, 0.78vw, 0.9375rem);
    border-block-end: 1px solid var(--paper-line);
    font-family: var(--font-figures);
    font-size: clamp(0.9375rem, 1.3vw, 1.5625rem);
    line-height: 1.3;
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--navy);
}

.perfv2 .reptable__cell:first-child {
    padding-inline-start: 0;
}

.perfv2 .reptable__cell:last-child {
    padding-inline-end: 0;
}

.perfv2 .reptable__row--head .reptable__cell {
    padding-block: 0 clamp(0.5rem, 0.63vw, 0.75rem);
    font-family: var(--font-lama);
    font-size: clamp(0.8125rem, 0.92vw, 1.10625rem);
    font-weight: 400;
    color: #625e55;
}

/* The two weekend reports' four columns, spaced as the frames space them: 205 / 374 / 244
   / 406 of the 1229 panel. */
.perfv2 .reptable:not(.reptable--wide):not(.reptable--annual) .reptable__table {
    table-layout: fixed;
}

.perfv2 .reptable:not(.reptable--wide):not(.reptable--annual) .reptable__row--head .reptable__cell:nth-child(1) {
    width: 16.7%;
}

.perfv2 .reptable:not(.reptable--wide):not(.reptable--annual) .reptable__row--head .reptable__cell:nth-child(2) {
    width: 30.4%;
}

.perfv2 .reptable:not(.reptable--wide):not(.reptable--annual) .reptable__row--head .reptable__cell:nth-child(3) {
    width: 19.9%;
}

.perfv2 .reptable:not(.reptable--wide):not(.reptable--annual) .reptable__cell {
    white-space: normal;
}

.perfv2 .reptable__cell--rank {
    font-weight: 500;
}

/* The free-text columns wrap, and hold a floor width rather than being squeezed to their
   shortest row. */
.perfv2 .reptable__cell--lg,
.perfv2 .reptable__cell--xl {
    white-space: normal;
}

.perfv2 .reptable__cell--lg {
    min-width: clamp(14rem, 14vw, 17rem);
}

.perfv2 .reptable__cell--xl {
    min-width: 42rem;
}

/* The header's sort control: the label with a small glyph after it. */
.perfv2 .reptable__sort {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.perfv2 .reptable__sort:hover {
    color: var(--navy);
}

.perfv2 .reptable__sorticon {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.perfv2 .reptable__sort[data-sort="date"] .reptable__sorticon {
    transform: rotate(90deg);
}

.perfv2 .reptable__cell[aria-sort] .reptable__sorticon {
    opacity: 1;
}

.perfv2 .reptable__cell[aria-sort="ascending"] .reptable__sorticon {
    transform: rotate(180deg);
}

/* The strips the design breaks a run with: the 500,000 mark, a year, a total. 110 tall
   on the sand, 30 type. */
.perfv2 .reptable__row--band .reptable__cell {
    height: clamp(4.5rem, 5.73vw, 6.875rem);
    padding-block: 0.75rem;
    background: var(--sand);
    font-size: clamp(1rem, 1.56vw, 1.875rem);
    text-align: center;
    white-space: normal;
}

/* Centred in the visible panel rather than across the whole scrolling row: as wide as the
   scroll box and stuck to its start edge, so on the wide report it stays in the reader's
   view whichever columns they have scrolled to. */
.perfv2 .reptable__bandtext {
    position: sticky;
    inset-inline-start: 0;
    display: block;
    width: 100cqw;
}

.perfv2 .reptable__empty {
    margin: 1.5rem 0 0;
    color: var(--taupe);
    text-align: center;
}

/* A year's total row keeps the sand strip but lines up like a film row: the label in the
   film column, each total at the start of the column it adds up. */
.perfv2 .reptable__row--total .reptable__cell {
    text-align: start;
    white-space: nowrap;
}

/* The yearly table: shorter rows, and its totals and market block set like the bands. */
.perfv2 .reptable--annual .reptable__row:not(.reptable__row--head):not(.reptable__row--band) .reptable__cell {
    padding-block: clamp(0.75rem, 1.09vw, 1.3125rem);
}

.perfv2 .reptable--annual tbody:last-child .reptable__row .reptable__cell {
    height: clamp(4.5rem, 5.73vw, 6.875rem);
    background: var(--sand);
    font-size: clamp(1rem, 1.56vw, 1.875rem);
    text-align: center;
    white-space: normal;
}

@media (max-width: 1100px) {
    .perfv2 {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2rem;
    }

}

@media (max-width: 700px) {
    .perfv2 .reptop {
        flex-direction: column;
        align-items: stretch;
    }

    .perfv2 .reptop__intro,
    .perfv2 .repsearch {
        flex-basis: auto;
    }

    .perfv2 .reptable__cell--lg {
        min-width: 11rem;
    }

}

/* ------------------------------------------------- redesign: خدمات سيناريوهات
 *
 * October 2026 (Figma 628:1242): a 330 navy band with the director's chair cut to 518 at its far
 * end — the gold «من الفكرة إلى النص», «خدمات» and the wordmark, the introduction — then six
 * 405×296 sand cards three to a row, 25 apart, each numbered in its far corner. A service that
 * has not launched keeps the card, paler, with an outlined «قريبًا» chip.
 */

.svchero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 330px;
    overflow: hidden;
    background: var(--navy);
    font-family: var(--font-lama);
}

.svchero__media {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 36%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

[dir="ltr"] .svchero__media {
    transform: scaleX(-1);
}

.svchero__body {
    position: relative;
    padding-block: 48px;
}

.svchero__eyebrow {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mustard);
}

.svchero__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 21px;
    margin: 12px 0 0;
    font-family: inherit;
    font-size: clamp(2.25rem, 3.75vw, 3.375rem);
    font-weight: 300;
    line-height: 1.35;
    color: var(--sand);
}

.svchero__wordmark {
    display: inline-block;
    width: clamp(10rem, 17.01vw, 15.3125rem);
    aspect-ratio: 356 / 75;
    background-color: var(--sand);
    -webkit-mask: var(--icon-url) no-repeat center / contain;
    mask: var(--icon-url) no-repeat center / contain;
}

.svchero__intro {
    max-width: 763px;
    margin: 20px 0 0;
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.9;
    color: var(--stone);
}

.svcgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    padding-block: 64px 74px;
}

.svccard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 296px;
    padding: 35px;
    border: 1px solid var(--v3-rule);
    background: var(--sand);
    font-family: var(--font-lama);
}

.svccard__number {
    position: absolute;
    inset-block-start: 30px;
    inset-inline-end: 31px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--taupe);
}

.svccard__icon {
    width: 26px;
    height: 26px;
    margin: 6px 6px 0;
    color: var(--v3-green);
}

.svccard__title {
    /* 272 at 26px: «الترجمة وتنسيق النصوص» holds one line and the first card breaks after
       «النصوص», as drawn. */
    max-width: 10.6em;
    margin: 30px 0 1.5rem;
    font-family: inherit;
    font-size: clamp(1.25rem, 1.81vw, 1.625rem);
    font-weight: 400;
    line-height: 1.65;
    color: var(--v3-ink);
}

.svccard__cta,
.svccard__soon,
.svccard__routes {
    margin-block-start: auto;
}

.svccard .cta {
    min-height: 45px;
    padding-inline: 18px;
    font-size: 13px;
    font-weight: 500;
}

.svccard--soon {
    background: #f2eee5;
}

.svccard--soon .svccard__icon {
    color: var(--v3-text);
}

.svccard--soon .svccard__title {
    color: #6a675e;
}

.svccard__soon {
    display: inline-flex;
    align-items: center;
    min-height: 45px;
    padding-inline: 26px;
    border: 1px solid var(--stone);
    font-size: 13px;
    color: var(--v3-text);
}

@media (max-width: 900px) {
    .svchero__media {
        opacity: 0.35;
        width: 100%;
    }
}

/* ---------------------------------------------------- redesign: تواصل معنا */

/* ------------------------------------------------------- redesign: من نحن
 *
 * October 2026 (Figma 628:12392): under the shared page head, the two founders side by side,
 * 612 each and 40 apart — the photograph flush to the head rule, a green role over the name with
 * the account marks at the far end, a rule, the biography — then the green mission band, the
 * partner and the one-line «مصادرنا».
 */

.abtpeople {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    padding-block-end: 65px;
}

.abtperson__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 612 / 360;
    object-fit: cover;
}

.abtperson__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 25px 23px;
    border-block-end: 1px solid var(--stone);
}

.abtperson__role {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--v3-green);
}

.abtperson__name {
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.5rem, 2.08vw, 1.875rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--v3-ink);
}

.abtperson__bio {
    padding-block-start: 22px;
}

.abtperson__bio p {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 2;
    color: var(--v3-ink);
}

.abtperson__bio p:last-child {
    margin-block-end: 0;
}

/* The accounts on the name's line: the IMDb badge and two marks, 14 apart. */
.socialmarks {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.socialmarks__link {
    display: inline-flex;
    color: var(--v3-green);
    transition: color 0.15s ease, opacity 0.15s ease;
}

.socialmarks__link:hover,
.socialmarks__link:focus-visible {
    opacity: 0.75;
}

.socialmarks__icon {
    width: 17px;
    height: 17px;
}

.socialmarks__imdb {
    display: inline-grid;
    place-items: center;
    min-width: 33px;
    height: 17px;
    padding-inline: 4px;
    border-radius: 2px;
    background: var(--v3-green);
    font-family: var(--font-figures);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: #f7f5f0;
}

.abtmission {
    padding-block: 63px 65px;
    background: var(--v3-green);
    color: var(--sand);
}

.abtmission__eyebrow {
    margin: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}

.abtmission__statement {
    max-width: 1003px;
    margin: 22px 0 0;
    font-size: clamp(1.5rem, 2.43vw, 2.1875rem);
    font-weight: 300;
    line-height: 1.7;
}

.abtpartner {
    padding-block: 58px 42px;
}

.abtpartner__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-block-end: 30px;
    border-block-end: 1px solid var(--stone);
}

.abtpartner__eyebrow {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--v3-green);
}

.abtpartner__name {
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.625rem, 2.43vw, 2.1875rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--v3-ink);
}

.abtpartner__logo {
    display: grid;
    place-items: center;
    width: 240px;
    max-width: 100%;
    height: 85px;
    background: var(--white);
}

.abtpartner__logo img {
    max-width: 85%;
    max-height: 70px;
    object-fit: contain;
}

.abtpartner__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px;
    padding-block-start: 30px;
}

.abtpartner__col p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 2;
    color: var(--v3-ink);
}

.abtpartner__place {
    display: flex;
    align-items: center;
    gap: 9px;
}

.abtpartner__pin {
    width: 15px;
    height: 17px;
    color: var(--v3-green);
}

.abtpartner__links {
    margin-block-start: 8px;
}

.abtsources {
    margin: 39px 0 0;
    font-size: 12px;
    line-height: 2;
    color: var(--v3-text);
}

.abtsources a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.abtsources a:hover,
.abtsources a:focus-visible {
    color: var(--v3-green);
}

.abtsources__sep {
    margin-inline: 0.25rem;
}

@media (max-width: 900px) {
    .abtpeople,
    .abtpartner__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .abtpeople {
        row-gap: 3rem;
        padding-block-start: 2rem;
    }
}

/* --------------------------------------------- redesign: 404 and «قريباً»
 *
 * The two pages a visitor lands on off the map share one navy stage: the words at the
 * inline start and one object from a film set beside them — a clapperboard for a scene that
 * was cut, a lit marquee for one that is coming. That object is the only thing on either
 * page that moves, and it moves once (the clap) or slowly (the bulbs).
 */

.offstage {
    background: var(--navy);
    color: var(--ivory);
}

.offstage__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5.21vw, 6.25rem);
    min-height: clamp(30rem, 36.46vw, 43.75rem);
    padding-block: clamp(3rem, 5.21vw, 6.25rem);
}

.offstage__title {
    max-width: 14em;
    margin: 0;
    font-size: clamp(2rem, 3.65vw, 4.375rem);
    font-weight: 500;
    line-height: 1.25;
    text-wrap: balance;
}

.offstage__text {
    max-width: 34em;
    margin: clamp(1rem, 1.56vw, 1.875rem) 0 0;
    font-size: clamp(1rem, 1.15vw, 1.375rem);
    line-height: 1.8;
    color: var(--stone);
}

.offstage__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem clamp(1.5rem, 1.88vw, 2.25rem);
    margin-block-start: clamp(1.75rem, 2.6vw, 3.125rem);
}

/* ---- the clapperboard */

.slate {
    position: relative;
    justify-self: center;
    width: min(100%, 36rem);
    padding-block-start: clamp(3.25rem, 4.17vw, 5rem);
    filter: drop-shadow(0 2rem 3rem rgba(0, 0, 0, 0.45));
}

/* The two sticks: the fixed one sits on the board, the arm hinges from the inline start and
   claps down onto it. Both carry the same diagonal stripes, set against each other. */
.slate__arm,
.slate__hinge {
    position: absolute;
    inset-inline: 0;
    height: clamp(1.75rem, 2.08vw, 2.5rem);
    border: 3px solid var(--ivory);
    background: repeating-linear-gradient(-55deg, var(--mustard) 0 1.6rem, var(--navy-deep) 1.6rem 3.2rem);
}

.slate__hinge {
    top: calc(clamp(3.25rem, 4.17vw, 5rem) - clamp(1.75rem, 2.08vw, 2.5rem));
    background: repeating-linear-gradient(55deg, var(--mustard) 0 1.6rem, var(--navy-deep) 1.6rem 3.2rem);
}

.slate__arm {
    top: calc(clamp(3.25rem, 4.17vw, 5rem) - 2 * clamp(1.75rem, 2.08vw, 2.5rem) - 3px);
    transform-origin: right bottom;
    animation: slate-clap 0.9s cubic-bezier(0.5, 0, 0.75, 0) 0.35s both;
}

[dir="ltr"] .slate__arm {
    transform-origin: left bottom;
    animation-name: slate-clap-ltr;
}

@keyframes slate-clap {
    from {
        transform: rotate(-24deg);
    }

    86% {
        transform: rotate(0deg);
    }

    93% {
        transform: rotate(-2deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes slate-clap-ltr {
    from {
        transform: rotate(24deg);
    }

    86% {
        transform: rotate(0deg);
    }

    93% {
        transform: rotate(2deg);
    }

    to {
        transform: rotate(0deg);
    }
}

/* The board: chalk on black, ruled into the fields a slate always has. */
.slate__board {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    margin: 0;
    border: 3px solid var(--ivory);
    background: var(--navy-deep);
}

.slate__cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: clamp(0.75rem, 1.04vw, 1.25rem) clamp(1rem, 1.3vw, 1.5625rem);
    border-block-end: 2px solid rgba(248, 246, 240, 0.7);
}

.slate__cell + .slate__cell:not(.slate__cell--wide) {
    border-inline-start: 2px solid rgba(248, 246, 240, 0.7);
}

.slate__cell--wide {
    grid-column: 1 / -1;
}

.slate__cell:last-child {
    border-block-end: 0;
}

.slate__cell dt {
    font-size: clamp(0.75rem, 0.78vw, 0.9375rem);
    color: var(--taupe);
}

.slate__cell dd {
    margin: 0;
    font-size: clamp(1rem, 1.25vw, 1.5rem);
    line-height: 1.35;
    color: var(--ivory);
}

.slate__cell--scene dd.slate__code {
    font-family: var(--font-figures);
    font-size: clamp(3.5rem, 6.25vw, 7.5rem);
    line-height: 1;
    color: var(--mustard);
}

.slate__cell code {
    font-family: var(--font-figures);
    font-size: 0.85em;
    color: var(--stone);
    overflow-wrap: anywhere;
}

/* ---- the marquee */

.marquee {
    position: relative;
    justify-self: center;
    width: min(100%, 36rem);
    padding: clamp(1.25rem, 1.56vw, 1.875rem);
    border-radius: clamp(1rem, 1.25vw, 1.5rem);
    background: #1b1f24;
    box-shadow: 0 0 0 2px #2c3137, 0 2rem 4rem rgba(0, 0, 0, 0.5);
}

/* The bulbs: one background of alternating bright and dim lamps, masked down to the frame's
   ring. Stepping it along by one lamp makes the light chase round the sign. */
.marquee__bulbs {
    --bulb: 1.5rem;

    position: absolute;
    inset: 0;
    padding: calc(var(--bulb) * 0.8);
    border-radius: inherit;
    background:
        radial-gradient(circle, #ffe7a3 0 0.22rem, var(--mustard) 0.26rem 0.34rem, transparent 0.4rem) 0 0 / calc(var(--bulb) * 2) var(--bulb),
        radial-gradient(circle, #7a6330 0 0.26rem, transparent 0.34rem) var(--bulb) 0 / calc(var(--bulb) * 2) var(--bulb);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: marquee-chase 1.2s steps(1) infinite;
}

@keyframes marquee-chase {
    50% {
        background-position: var(--bulb) 0, 0 0;
    }
}

.marquee__sign {
    position: relative;
    padding: clamp(2rem, 3.13vw, 3.75rem) clamp(1.5rem, 2.6vw, 3.125rem);
    border: 2px solid rgba(223, 175, 59, 0.45);
    border-radius: clamp(0.5rem, 0.63vw, 0.75rem);
    background: var(--navy-deep);
    text-align: center;
}

.marquee__top {
    margin: 0;
    font-size: clamp(0.875rem, 1.04vw, 1.25rem);
    color: var(--stone);
}

.marquee__word {
    margin: clamp(0.25rem, 0.52vw, 0.625rem) 0;
    font-size: clamp(3.5rem, 7.29vw, 8.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: #fff4d6;
    text-shadow: 0 0 0.35em rgba(223, 175, 59, 0.55), 0 0 1.2em rgba(223, 175, 59, 0.3);
}

.marquee__bill {
    margin: 0;
    padding-block-start: clamp(0.75rem, 1.04vw, 1.25rem);
    border-block-start: 1px solid rgba(223, 175, 59, 0.35);
    font-size: clamp(1rem, 1.35vw, 1.625rem);
    font-weight: 500;
    color: var(--mustard);
}

/* ---- the list under the stage: the pages people usually mean, or what is coming */

.shotlist {
    padding-block: clamp(3rem, 4.69vw, 5.625rem) clamp(1rem, 1.56vw, 1.875rem);
}

.shotlist__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.03vw, 2.4375rem);
    font-weight: 400;
    line-height: 1.3;
}

.shotlist__note {
    margin: 0.5rem 0 0;
    font-size: clamp(0.875rem, 0.94vw, 1.125rem);
    color: var(--taupe);
}

/* Two columns of ruled rows, like a call sheet — not cards. */
.shotlist__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4.17vw, 5rem);
    margin-block-start: clamp(1.5rem, 2.08vw, 2.5rem);
    border-block-start: 1px solid var(--paper-line);
}

.shotlist__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: clamp(3.75rem, 4.17vw, 5rem);
    border-block-end: 1px solid var(--paper-line);
    font-size: clamp(1rem, 1.15vw, 1.375rem);
    color: var(--navy);
}

a.shotlist__row {
    transition: color 0.15s ease;
}

a.shotlist__row:hover,
a.shotlist__row:focus-visible {
    color: var(--teal);
}

.shotlist__icon {
    flex: none;
    width: 1.625rem;
    height: 1.625rem;
    color: var(--teal);
}

.shotlist__label {
    flex: 1;
}

.shotlist__arrow {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    transition: transform 0.2s var(--ease-menu);
}

a.shotlist__row:hover .shotlist__arrow {
    translate: -0.25rem 0;
}

[dir="ltr"] a.shotlist__row:hover .shotlist__arrow {
    translate: 0.25rem 0;
}

/* What the visitor asked for, among what is coming. */
.shotlist__row--current {
    position: relative;
    font-weight: 700;
}

.shotlist__row--current::before {
    content: "";
    position: absolute;
    inset-block: -1px;
    inset-inline-start: calc(-1 * clamp(0.75rem, 1.04vw, 1.25rem));
    width: 3px;
    background: var(--mustard);
}

.shotlist__row--current .shotlist__icon {
    color: var(--mustard);
}

.shotlist__tag {
    padding: 0.25rem 0.75rem;
    background: var(--sand);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--taupe);
}

@media (prefers-reduced-motion: reduce) {
    .slate__arm,
    .marquee__bulbs {
        animation: none;
    }
}

@media (max-width: 900px) {
    .offstage__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .slate,
    .marquee {
        order: -1;
        width: min(100%, 30rem);
    }

    .shotlist__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------ redesign: responsive */

@media (max-width: 1100px) {
    .statrow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 1.75rem;
    }

    .statrow__item:nth-child(odd) {
        padding-inline-start: 0;
        border-inline-start: 0;
    }

    .upnext__card {
        grid-template-columns: minmax(0, 1fr) 34%;
    }
}

@media (max-width: 900px) {
    .homehero {
        grid-template-columns: minmax(0, 1fr);
    }

    .homehero__body {
        padding-inline: var(--frame-pad);
    }

    .homehero__media {
        aspect-ratio: 4 / 3;
    }

    .tools__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .toolcard {
        min-height: 0;
    }

    .svcgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The heading takes its own row and the two figures share the next. */
    .boxband__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2rem;
    }

    .boxband__head {
        grid-column: 1 / -1;
    }

    .boxband__item:first-child {
        padding-inline-start: 0;
        border-inline-start: 0;
    }

}

@media (max-width: 700px) {
    .discover .herovideo {
        aspect-ratio: 16 / 9;
    }

    /* The poster goes above the details, at a size a phone can hold beside the text. */
    .upnext__card {
        grid-template-columns: minmax(0, 1fr);
    }

    .upnext__poster {
        order: -1;
        padding-block: 1.5rem 0;
    }

    .upnext__fan {
        width: min(50%, 13rem);
    }

    .upnext__foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .svcgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .svccard {
        min-height: 0;
    }

    .statrow__value {
        font-size: 2.25rem;
    }

    .homehero__actions .goldbtn {
        width: 100%;
    }
}

/* ----------------------------------------------------------------- about */

/* --------------------------------------------------------------- contact */

/* Reached by the redirect after a submit, and it is a status rather than an alert — nothing
   went wrong, so it takes the accent instead of the error colour. */
.formnotice {
    margin: 0;
    color: var(--gold-deep);
    font-size: clamp(0.875rem, 0.89vw, 1.0625rem);
}

/* --------------------------------------------------- film performance

   The switcher rail beside the four «أداء الفيلم السعودي» reports and the profile
   pages. The frame around it is .perfv2 (and .profv2 on the profile), further down. */

/* Covers the whole chip — icon included — rather than sitting sized to its own text,
   so every click within it is a genuine direct click on the control. Fully
   transparent, not display:none or visibility:hidden: it stays in the tab order and
   keeps its own accessible name from its <option>s, which is the standard pattern
   for a custom-styled native select. */
.repselect__field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    appearance: none;
    cursor: pointer;
}

/* The list itself is drawn by the browser, on its own surface. */
.repselect__field option {
    background: #191a1c;
    color: var(--white);
}

/* The report pages themselves are drawn in the redesign section (.perfv2). */

/* -------------------------------------------------------- member account
 *
 * The account screens: تسجيل دخول and تسجيل جديد on the shared photograph card, the two
 * password-recovery steps drawn on the same card, and تغيير كلمة المرور on a card of
 * إدارة الملف الشخصي — see "profile management" below.
 *
 * Figma sizes are off the 1920 canvas and become clamp(min, px/19.2 vw, px). The card
 * itself is the full 1830 shell, so it needs no width of its own.
 */

.authcard,
.profcard {
    /* The field palette these screens share. #14171a is the box, #343230 its edge and
       #7e8492 the placeholder — none of them are in :root because nothing outside the
       account screens draws a field this way. The cards of the profile draw the same
       boxes, so they are on this list too. */
    --auth-field: #14171a;
    --auth-edge: #343230;
    --auth-ink: #7e8492;
    --auth-gap: clamp(1rem, 2.29vw, 2.75rem);
}

/* --- the stage the guest screens are drawn on: 1920×850 under the header, the design's
   own auditorium photograph edge to edge at 1920×1080 and cropped from 21px down, so the
   lamps, the screen and the front rows all show (554:125). Over it the navy fades from
   the header into the room, and the whole is dimmed a step. */

.authcard {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(30rem, 44.27vw, 53.125rem);
    padding-block: clamp(2rem, 3.65vw, 4.375rem);
    background: var(--navy);
    color: var(--white);
    text-align: center;
}

.authcard__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 9%;
}

.authcard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(18, 22, 26, 0.9) 0%, rgba(18, 22, 26, 0) 100%),
        rgba(18, 22, 26, 0.35);
}

.authcard__content {
    position: relative;
}

.authcard__title {
    margin: 0;
    font-family: var(--font-lama);
    font-size: clamp(1.625rem, 2.08vw, 2.5rem);
    font-weight: 400;
    line-height: 1.5;
}

.authcard__intro {
    margin: 0;
    font-family: var(--font-lama);
    font-size: clamp(0.9375rem, 1.15vw, 1.375rem);
    line-height: 1.5;
    color: #9b989e;
}

/* «ليس لديك حساب؟ اشترك الآن»: 26px, the question in white and the link mustard and
   underlined. */
.authcard__alt {
    margin: clamp(2rem, 4.17vw, 5rem) 0 0;
    font-size: clamp(1.0625rem, 1.35vw, 1.625rem);
    line-height: 1.25;
}

.authcard__altlink {
    color: var(--mustard);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.authcard__altlink:hover,
.authcard__altlink:focus-visible {
    color: var(--gold);
}

/* «اختر نوع الحساب للمتابعة» moved to the October 2026 block at the end of the file (.authchoose). */

/* --- the forms on it */

.authform {
    display: grid;
    row-gap: var(--auth-gap);
    width: min(100%, 44.3125rem);
    margin-block-start: clamp(1.75rem, 3.28vw, 3.9375rem);
    margin-inline: auto;
    text-align: start;
}

.authform .formnotice,
.authform .formalert {
    margin: 0;
}

/* --- one field */

.authfield__label {
    display: block;
    margin-block-end: clamp(0.25rem, 0.52vw, 0.625rem);
    font-size: clamp(0.8125rem, 0.89vw, 1.0625rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--white);
}

.authbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(0.4375rem, 0.78vw, 0.9375rem);
    height: clamp(2.75rem, 3.96vw, 4.75rem);
    padding-inline: clamp(0.75rem, 1.2vw, 1.4375rem) clamp(0.75rem, 1.88vw, 2.25rem);
    border: 1.5px solid var(--auth-edge);
    border-radius: 8px;
    background: var(--auth-field);
}

.authbox:focus-within {
    border-color: var(--gold-deep);
}

.authbox.is-invalid {
    border-color: var(--danger);
}

.authbox__icon {
    width: clamp(1.25rem, 1.82vw, 2.1875rem);
    height: clamp(1.25rem, 1.82vw, 2.1875rem);
    color: var(--white);
}

.authbox__rule {
    flex: none;
    width: 1px;
    height: clamp(1.25rem, 1.82vw, 2.1875rem);
    background: var(--auth-edge);
}

.authbox__control {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: clamp(0.8125rem, 1.04vw, 1.25rem);
    font-weight: 500;
    color: var(--white);
}

.authbox__control:focus {
    outline: none;
}

/* The browser lays an address or a number out left-to-right whatever the page's
   direction, which on the Arabic page puts the value at the far side of its box. The
   order of the characters is right; only where they sit is, so they are pushed back to
   the start of the line. */
[dir="rtl"] .authbox__control:is([type="tel"], [type="email"], [type="url"], [type="number"]) {
    text-align: right;
}

/* The one box that holds more than a line. The glyph and its rule go to the top where
   the first line is, and the count sits in the far corner, inside the box. */
.authbox--area {
    align-items: flex-start;
    height: auto;
    min-height: clamp(6rem, 8.39vw, 10.0625rem);
    padding-block: clamp(0.75rem, 1.04vw, 1.25rem) clamp(1.5rem, 1.56vw, 1.875rem);
}

.authbox__area {
    align-self: stretch;
    resize: none;
    line-height: 1.6;
}

.authbox__control::placeholder {
    color: var(--auth-ink);
    opacity: 1;
}

/* A masked glyph is display:inline-block, which outranks the [hidden] default. */
.icon-mask[hidden] {
    display: none;
}

/* --- the redesign's guest screens (554:111, 554:207, 554:325): on the stage the boxes
   are sand with square corners and dark ink, 65px tall; the button is the same height in
   flat mustard; the links are mustard and underlined. Scoped to .authcard so the profile's
   cards, which still draw the first design's boxes, keep theirs. */

.authcard {
    --auth-field: #efeae0;
    --auth-gap: clamp(1.25rem, 2.86vw, 3.4375rem);
}

.authcard .authbox {
    height: clamp(2.875rem, 3.39vw, 4.0625rem);
    border-radius: 0;
}

.authcard .authbox__icon,
.authcard .authbox__control {
    color: var(--navy);
}

.authcard .authbox:focus-within {
    border-color: var(--mustard);
}

.authcard .authbox__select option {
    color: var(--navy);
}

.authcard .authbtn {
    min-height: clamp(2.875rem, 3.39vw, 4.0625rem);
    border-radius: 0;
    font-size: clamp(0.9375rem, 0.99vw, 1.1875rem);
}

.authcard .authbtn--primary {
    background: var(--mustard);
}

.authcard .authbtn--primary:hover,
.authcard .authbtn--primary:focus-visible {
    background: var(--gold);
}

/* --- the buttons these screens share */

.authbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 0.52vw, 0.625rem);
    width: 100%;
    min-height: clamp(3rem, 5.42vw, 6.5rem);
    padding-inline: clamp(0.75rem, 0.52vw, 0.625rem);
    border: 1px solid transparent;
    border-radius: clamp(0.625rem, 0.78vw, 0.9375rem);
    font: inherit;
    font-size: clamp(0.9375rem, 1.35vw, 1.625rem);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.authbtn--primary {
    background: var(--gold-deep);
    color: #000;
}

.authbtn--primary:hover,
.authbtn--primary:focus-visible {
    background: var(--gold);
}

/* What the design draws the save button as while the new password does not yet
   satisfy all three conditions. web.js puts it on and takes it off. */
.authbtn[disabled] {
    background: #b3b3b3;
    border-color: #b3b3b3;
    color: #423f3f;
    cursor: not-allowed;
}

/* --- تغيير كلمة المرور, on its card of the profile */

.pwform {
    display: grid;
    /* The current and the new password share the first line; everything after takes
       a line to itself. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.29vw, 2.75rem);
}

.pwform__wide {
    grid-column: 1 / -1;
}

.pwform .formnotice,
.pwform .formalert {
    margin: 0;
}

/* The one button, at the start of the line and at its own width, as drawn. */
.pwform__actions {
    display: flex;
    justify-content: flex-start;
}

.pwform__actions .authbtn {
    width: min(100%, 26.6875rem);
}

/* --- «شروط كلمة المرور» */

.pwrules {
    padding: clamp(0.5rem, 0.68vw, 0.8125rem) clamp(1rem, 1.88vw, 2.25rem)
             clamp(0.75rem, 1.04vw, 1.25rem);
    border: 1.5px solid #9db5c6;
    border-radius: 8px;
    background: #ededed;
    color: #000;
    text-align: start;
}

.pwrules__title {
    margin: 0;
    font-size: clamp(0.8125rem, 0.83vw, 1rem);
    font-weight: 700;
    line-height: 2.2;
}

.pwrules__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pwrules__row {
    display: flex;
    align-items: center;
    gap: clamp(0.25rem, 0.52vw, 0.625rem);
    font-size: clamp(0.75rem, 0.73vw, 0.875rem);
    font-weight: 500;
    line-height: 2.5;
    color: var(--auth-ink);
}

.pwrules__row.is-met {
    color: #000;
}

.pwrules__tick {
    width: clamp(0.75rem, 0.83vw, 1rem);
    height: clamp(0.75rem, 0.83vw, 1rem);
    color: #2fae60;
}

/* ------------------------------------------------------ profile management
 *
 * إدارة الملف الشخصي: the banner, then the rail at the start of the line and one card
 * beside it — general information, the password, visibility, work and portfolio,
 * downloads, or the crowdfunding track, each its own page.
 *
 * The frame is the performance reports' .perfv2 grid and rail, reused as they are; what is
 * here is the card and its contents. The card shell is the site's own .panel; only its
 * padding is restated, since it sits tighter than the panels elsewhere. Everything inside
 * is off the 1920 canvas and becomes clamp(min, px/19.2 vw, px).
 */

.profcard,
.delform {
    /* The design's own red, which is deeper than the --danger this site uses for form
       messages: it has to hold as a fill behind a white glyph, not just as text. */
    --profile-danger: #a33d2e;
    /* And the slate the design greys the unbuilt cards down to. */
    --profile-soon: #d1d7e0;
    --profile-inner: rgba(20, 19, 15, 0.7);
    --profile-inner-edge: #3e3529;
    --profile-pad: clamp(0.875rem, 1.56vw, 1.875rem);
    --profile-gap: clamp(0.75rem, 1.56vw, 1.875rem);
}

/* --- the card */

.profcard {
    padding: var(--profile-pad);
}

.profcard__heading {
    margin: 0;
    font-size: clamp(1.375rem, 2.08vw, 2.5rem);
    font-weight: 600;
    line-height: 1.5;
    text-align: start;
    color: var(--gold-deep);
}

.profcard--soon .profcard__heading {
    color: var(--profile-soon);
}

.profcard__intro {
    margin: clamp(0.25rem, 0.83vw, 1rem) 0 0;
    font-size: clamp(0.9375rem, 1.15vw, 1.375rem);
    font-weight: 500;
    line-height: 1.5;
    text-align: start;
    color: var(--muted);
}

/* The inner panel every card holds its contents on. */
.profcard__body {
    margin-block-start: var(--profile-pad);
    padding: var(--profile-pad);
    border: 2px solid var(--profile-inner-edge);
    border-radius: clamp(0.625rem, 0.83vw, 1rem);
    background: var(--profile-inner);
}

/* The one select. It keeps the box the inputs use and gives up the browser's arrow for
   the design's own — which is drawn over the end of the control rather than beside it:
   as a sibling the caret would take the clicks that land on it, and a native select does
   not open from a click on something next to it. The padding is the room it sits in. */
.authbox__select {
    appearance: none;
    padding-inline-end: clamp(1.5rem, 2.08vw, 2.5rem);
    cursor: pointer;
}

.authbox__select option {
    background: var(--panel-solid);
    color: var(--white);
}

.authbox__caret {
    position: absolute;
    inset-inline-end: clamp(0.75rem, 1.88vw, 2.25rem);
    width: clamp(1.125rem, 1.56vw, 1.875rem);
    height: clamp(1.125rem, 1.56vw, 1.875rem);
    color: var(--white);
    pointer-events: none;
}

/* ------------------------------------------ redesign: إدارة الملف الشخصي
 *
 * The six profile sections on the paper ground (554:650 and its siblings): the reports'
 * .perfv2 frame and rail, the heading straight on the paper in navy, and the contents in
 * the redesign's square boxes — grey fields while the card is locked and sand ones once it
 * opens, #12161a rows for the visibility settings, #0d0d0d plates edged in #3e3529 for the
 * works and the «قريباً» rows. Scoped to .profv2 so the guest screens that share the field
 * and password-rule components keep their own paint.
 */

.profv2,
.profv2 .profcard {
    /* Restated on the card and the rows too: the first design's palette is declared on
       those same elements, and a custom property takes the nearest declaration. */
    --profile-gap: clamp(0.75rem, 1.56vw, 1.875rem);
    --profile-pad: clamp(1rem, 1.56vw, 1.875rem);
    --profile-plate: #0d0d0d;
    --profile-plate-edge: #3e3529;
    --profile-soon: #d1d7e0;
    --profile-danger: #a33d2e;
    --auth-field: #efeae0;
    --auth-edge: #bfbfbf;
    --auth-ink: #7e8492;
}

.profv2 {
    align-items: start;
    padding-block-end: clamp(2.5rem, 4.17vw, 5rem);
}

/* ---- the section */

.profv2 .profcard {
    padding: 0;
    border: 0;
    background: none;
}

.profv2 .profcard__heading,
.profv2 .profcard--soon .profcard__heading {
    font-size: clamp(1.5rem, 2.11vw, 2.53rem);
    font-weight: 400;
    line-height: 1.46;
    color: var(--navy);
}

.profv2 .profcard__intro {
    margin: 0;
    font-size: clamp(0.9375rem, 0.91vw, 1.09rem);
    font-weight: 400;
    line-height: 2.8;
    color: var(--taupe);
}

.profv2 .profcard__body {
    margin-block-start: clamp(1.25rem, 2.86vw, 3.4375rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* ---- the fields: 76 tall, square, labels in ink */

.profv2 .authfield__label {
    font-size: clamp(0.875rem, 0.89vw, 1.0625rem);
    color: #14171a;
}

.profv2 .authbox {
    height: clamp(3rem, 3.96vw, 4.75rem);
    border-radius: 0;
}

.profv2 .authbox--area {
    height: auto;
    min-height: clamp(7rem, 8.65vw, 10.375rem);
}

.profv2 .authbox__icon,
.profv2 .authbox__caret {
    color: #14171a;
}

.profv2 .authbox__rule {
    background: #14171a;
}

.profv2 .authbox__control {
    color: #14171a;
}

.profv2 .authbox:focus-within {
    border-color: var(--mustard);
}

.profv2 .authbox__select option {
    background: var(--white);
    color: #14171a;
}

/* The drop-down that stands in for the select sets its value in the inputs' own type and
   ink; locked, it takes the placeholder ink with them and stops answering. */
.profv2 .cselect__button {
    font-size: clamp(0.9375rem, 1.04vw, 1.25rem);
    font-weight: 700;
    color: #14171a;
}

/* ---- the buttons: 65 tall, square, flat mustard */

.profv2 .authbtn {
    min-height: clamp(2.875rem, 3.39vw, 4.0625rem);
    border-radius: 0;
    font-size: clamp(0.9375rem, 0.99vw, 1.1875rem);
}

.profv2 .authbtn--primary {
    background: var(--mustard);
}

.profv2 .authbtn--primary:hover,
.profv2 .authbtn--primary:focus-visible {
    background: var(--gold);
}

/* ---- تغيير كلمة المرور: the conditions hang straight off the confirmation above them */

.profv2 .pwform {
    column-gap: clamp(1rem, 2.86vw, 3.4375rem);
    row-gap: clamp(1.25rem, 2.86vw, 3.4375rem);
}

.profv2 .pwrules {
    margin-block-start: calc(-1 * clamp(1.25rem, 2.86vw, 3.4375rem) + 3px);
    padding: clamp(0.75rem, 1.04vw, 1.25rem) clamp(1rem, 1.46vw, 1.75rem);
    border: 1.5px solid var(--auth-edge);
    border-radius: 0;
    background: #e0e0e0;
}

.profv2 .pwrules__title,
.profv2 .pwrules__row.is-met {
    color: #2b2b2b;
}

.profv2 .pwrules__row {
    font-size: clamp(0.8125rem, 0.83vw, 1rem);
}

.delform {
    margin-block-start: clamp(0.75rem, 1.04vw, 1.25rem);
    text-align: start;
}

/* ------------------------------------------------------- themed controls
 *
 * The list behind a <select> and the calendar behind a date, drawn by web.js in place
 * of the browser's own. The native select stays in the box, hidden, and keeps the
 * value; the calendar's ISO value lives in a hidden input. Both sit in a positioned
 * box — .authbox, or the chip on the directory filter — and drop from its lower edge.
 */

/* --- the list
 *
 * One look for every select on the site, taken from the header's menus: a black panel
 * with a hairline edge and rounded corners, ivory rows that turn mustard under the pointer,
 * and the chosen row boxed in mustard the way an open menu row is. The box the select sits
 * in (.cselect-host, set by web.js) takes a mustard edge while its list is open, as a menu
 * trigger does.
 */

.cselect-host {
    position: relative;
}

.cselect {
    flex: 1 1 auto;
    min-width: 0;
}

.cselect__native {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

/* Stands where the select stood, in its type; each box below sets its own colour. */
.cselect__button {
    display: block;
    width: 100%;
    padding: 0;
    padding-inline-end: clamp(1.5rem, 2.08vw, 2.5rem);
    border: 0;
    background: none;
    font: inherit;
    font-size: clamp(0.8125rem, 1.04vw, 1.25rem);
    font-weight: 500;
    line-height: 1.4;
    text-align: start;
    color: var(--white);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cselect__button:focus-visible {
    outline: none;
}

.cselect-host:has(.cselect__button:focus-visible) {
    outline: 2px solid var(--mustard);
    outline-offset: 2px;
}

.cselect__button.is-placeholder {
    color: var(--auth-ink, #7e8492);
}

.cselect__list {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline: 0;
    z-index: 60;
    min-width: max(100%, 12rem);
    max-height: 20rem;
    margin: 0;
    padding: 0.5rem;
    border: 1px solid #22262c;
    border-radius: clamp(0.75rem, 0.94vw, 1.125rem);
    background: var(--navy-deep);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.4);
    font-family: var(--font-lama);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #3a3f46 transparent;
    scrollbar-width: thin;
    list-style: none;
    animation: nav-reveal 0.2s var(--ease-menu);
}

.cselect__list[hidden] {
    display: none;
}

/* Hung above the box instead when there is no room under it — near the foot of the
   window, or of a scrolling modal. */
.cselect__list--up {
    inset-block: auto calc(100% + 0.5rem);
}

.cselect__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-size: clamp(0.9375rem, 0.99vw, 1.1875rem);
    font-weight: 400;
    line-height: 1.4;
    text-align: start;
    white-space: normal;
    color: var(--ivory);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.cselect__option + .cselect__option {
    margin-block-start: 0.125rem;
}

.cselect__option:hover,
.cselect__option:focus {
    outline: none;
    background: rgba(248, 246, 240, 0.06);
    color: var(--mustard);
}

/* The chosen row: boxed in mustard, with a small tick at the end of the line. */
.cselect__option[aria-selected="true"] {
    border-color: var(--mustard);
    color: var(--mustard);
}

.cselect__option[aria-selected="true"]::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.875rem;
    margin-block-start: -0.25rem;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Open, the box that holds the select wears the menu trigger's mustard edge, and a caret
   drawn beside the select turns over. */
.cselect-host.is-open {
    border-color: var(--mustard);
}

/* The individual rotate property, so it adds to the translate some carets are centred with
   rather than replacing it. */
.cselect-host.is-open > [class*="caret"] {
    rotate: 180deg;
}

.cselect-host > [class*="caret"] {
    transition: rotate 0.2s var(--ease-menu);
}

/* A chip (the directory, films and report filters) keeps its own printed label and value;
   the button lies over the whole chip, invisible, so the chip is the thing clicked. */
.cselect--cover {
    position: absolute;
    inset: 0;
}

.cselect__button--cover,
.cselect__button--cover.is-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    color: transparent;
}

.cselect--cover .cselect__list {
    inset-inline: 0 auto;
    min-width: max(100%, 16rem);
}

/* --- the calendar
 *
 * The same panel as the select lists above: black with a hairline edge, ivory days that
 * turn mustard under the pointer, today ringed and the chosen day boxed in mustard. It
 * sets its own colours rather than borrowing the field's, so it reads the same over a
 * sand box as over a dark one.
 */

.dpick {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    /* Hung from the end of the box, under the calendar glyph the field draws there. */
    inset-inline-end: 0;
    z-index: 50;
    width: min(21rem, 100%);
    padding: 0.875rem;
    border: 1px solid #22262c;
    border-radius: clamp(0.75rem, 0.94vw, 1.125rem);
    background: var(--navy-deep);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.4);
    font-family: var(--font-lama);
    font-size: 0.9375rem;
    color: var(--ivory);
    animation: nav-reveal 0.2s var(--ease-menu);
}

.dpick[hidden] {
    display: none;
}

.dpick__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid #22262c;
}

.dpick__title {
    font-weight: 600;
    color: var(--mustard);
}

/* The arrow file is drawn pointing left. Previous points to the start of the line and
   next to its end, so each is mirrored in one direction and not the other. */
.dpick__nav {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #22262c;
    color: var(--ivory);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.dpick__nav:hover,
.dpick__nav:focus-visible {
    outline: none;
    border-color: var(--mustard);
    color: var(--mustard);
}

.dpick__nav::before {
    content: "";
    width: 1.125rem;
    height: 1.125rem;
    background: currentColor;
    -webkit-mask: url("../images/figma/icons/arrow-left-02.svg") no-repeat center / contain;
    mask: url("../images/figma/icons/arrow-left-02.svg") no-repeat center / contain;
}

[dir="rtl"] .dpick__nav--prev::before,
[dir="ltr"] .dpick__nav--next::before {
    transform: scaleX(-1);
}

.dpick__grid {
    display: grid;
    gap: 0.25rem;
}

.dpick__grid--days {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.dpick__grid--months {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dpick__weekday {
    padding-block: 0.25rem;
    font-size: 0.75rem;
    text-align: center;
    color: #8a857a;
}

.dpick__cell {
    min-height: 2.25rem;
    padding: 0.25rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: none;
    font-family: var(--font-num);
    font-size: 0.9375rem;
    color: var(--ivory);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.dpick__grid--months .dpick__cell {
    font-family: inherit;
    min-height: 2.75rem;
}

.dpick__cell:hover,
.dpick__cell:focus-visible {
    outline: none;
    background: rgba(248, 246, 240, 0.06);
    color: var(--mustard);
}

.dpick__cell.is-today {
    border-color: #4b4a47;
}

.dpick__cell.is-selected {
    border-color: var(--mustard);
    background: var(--mustard);
    color: var(--ink);
}

/* ----------------------------------------------------------- responsive */

/* There is no narrow-viewport design, so the clamp() scale above does the sizing
   and these stops only change layout for the page bodies (the header and footer
   carry their own stops, beside their rules):

     1200  content grids give up their columns
     1024  platform and track grids drop to three
      900  film/poster stack, paired columns become one
      760  profile rows stack their controls
      700  single-column content
      560  modals, calculator boxes

   Written max-width so the desktop rules stay the unqualified default. */

@media (max-width: 900px) {

    /* The box is sized off the poster, so shrinking one means shrinking the other. */
    .posters {
        aspect-ratio: 1.216;
    }

    /* The profile's paired columns stop pairing: the picture drops under the fields it
       belongs to, and every two-up row becomes one. */
    .pwform {
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (max-width: 700px) {

    .authcard {
        min-height: 0;
    }

    .pwform__actions .authbtn {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .modal {
        padding: 0.75rem;
    }

    .modal__card {
        padding: 1.5rem 1.25rem;
    }

}

/* ------------------------------------------ redesign: الأفلام السعودية القادمة
 *
 * The list of upcoming films and a film's own page, on the paper. The list opens on the
 * home page's slider (.upnext), then the title with its two dark filter chips, the table
 * under a sand header strip and the sand newsletter strip. A film's page opens on its
 * trailer — the poster over the still until it plays — or, without one, on the slider's
 * card; under either run the rows of people, the fact plates, where to watch, the table
 * by market, the credits and the awards, 80 apart on the 1920 canvas.
 */

/* web.js hides a paged row's controls when everything fits; [hidden] alone loses to
   the flex the controls carry. */
.carousel[hidden] {
    display: none;
}

.trailer {
    position: relative;
    aspect-ratio: 1687 / 724;
    overflow: hidden;
    background: #141414;
    color: var(--white);
}

/* The play button between the writing and the poster: the only thing the design does not
   draw, and the one thing the still needs to become a trailer. */
.trailer__start {
    display: grid;
    place-items: center;
    flex: none;
    align-self: center;
    width: clamp(3.5rem, 4.69vw, 5.625rem);
    height: clamp(3.5rem, 4.69vw, 5.625rem);
    margin-inline: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(22, 22, 22, 0.55);
    backdrop-filter: blur(4px);
    color: var(--white);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.trailer__start:hover,
.trailer__start:focus-visible {
    border-color: var(--mustard);
    background: rgba(22, 22, 22, 0.8);
}

.trailer.is-fullscreen {
    aspect-ratio: auto;
}

@media (max-width: 900px) {

    /* The still becomes the backdrop of a column: the poster first, then the writing,
       the play button in the top-end corner. Started, the cover goes and the trailer
       takes its own 16:9. */
    .trailer {
        aspect-ratio: auto;
    }

    .trailer__start {
        position: absolute;
        inset-block-start: 1.25rem;
        inset-inline-end: 1.25rem;
        margin: 0;
    }

}

/* ------------------------------------------- redesign: دليل مزوّدي الخدمات
 *
 * «دليل مزوّدي الخدمات» on the paper: the list under the dark banner, with its filter
 * bar and five cards to a row; the page each company opens onto, square throughout,
 * the company on navy grids and its founders on navy cards; and the form behind «أضف
 * شركتك إلى الدليل» — four steps and «إضافة عمل» — as a sand card holding a near-black
 * plate of sand fields. Everything is off the 1920 canvas: clamp(min, px/19.2 vw, px).
 */

/* The select is stretched invisibly over its chip, as the report chips do — see
   .repselect for why — and the value beside the label stands in for its own text. */
.dirfilter__select {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(0.375rem, 0.52vw, 0.625rem);
    padding-block: 0.25rem;
    cursor: pointer;
}

/* The controls that matter are hidden or transparent, so the ring goes on the chip. */
.dirfilter__select:focus-within {
    outline: 2px solid var(--mustard);
    outline-offset: 4px;
}

.dirlist__notice {
    margin-block-end: clamp(0.75rem, 1.3vw, 1.5625rem);
}

.dirlist__empty {
    margin: 0;
    padding-block: clamp(2rem, 4vw, 5rem);
    font-size: clamp(1rem, 1.15vw, 1.375rem);
    text-align: center;
    color: var(--taupe);
}

/* ---- the pager: grey and mustard squares at the ends, the current page on a disc */

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 1.56vw, 1.875rem);
    margin-block-start: clamp(1.75rem, 2.6vw, 3.125rem);
}

.pager__list {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.3vw, 1.5625rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pager__step {
    display: grid;
    place-items: center;
    width: clamp(2.5rem, 2.6vw, 3.125rem);
    height: clamp(2.5rem, 2.6vw, 3.125rem);
    background: #bfbfbf;
    color: var(--white);
}

.pager__step--live {
    background: var(--mustard);
    color: var(--ink);
}

.pager__step--live:hover,
.pager__step--live:focus-visible {
    background: #e9c05c;
}

.pager__glyph {
    width: 50%;
    height: 50%;
}

/* Drawn pointing left: the previous page is to the right in Arabic, so its arrow
   turns; in English the pair swaps back. */
.pager__glyph--prev {
    transform: scaleX(-1);
}

[dir="ltr"] .pager__glyph {
    transform: scaleX(-1);
}

[dir="ltr"] .pager__glyph--prev {
    transform: none;
}

.pager__num {
    display: grid;
    place-items: center;
    min-width: clamp(1.75rem, 1.82vw, 2.1875rem);
    height: clamp(1.75rem, 1.82vw, 2.1875rem);
    padding-inline: 0.25rem;
    font-family: var(--font-num);
    font-size: clamp(1rem, 1.15vw, 1.375rem);
    color: #8a8a8a;
}

a.pager__num:hover,
a.pager__num:focus-visible {
    color: var(--ink);
}

.pager__num--current {
    border-radius: 50%;
    background: var(--mustard);
    color: var(--white);
}

.pager__gap {
    font-size: clamp(1rem, 1.15vw, 1.375rem);
    color: #8a8a8a;
}

/* ---- one company: the breadcrumb, then the company at the start of the line and its
        openings at the end — 975 and 684 of the frame, 28 apart */

.company {
    padding-block: clamp(1rem, 2.6vw, 3.125rem) 0;
}

/* ---- the founders: two navy cards, the photograph on its grey band */

.founders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.46vw, 1.75rem);
    margin-block-start: clamp(1.5rem, 1.56vw, 1.875rem);
}

.companyvideo {
    padding-block-end: clamp(2.5rem, 4.17vw, 5rem);
}

/* The player at the frame's width, square-cornered, at the card's 1687 x 900. */
.companyvideo .herovideo {
    aspect-ratio: 1687 / 900;
    border-radius: 0;
}

/* ---- «تعبئة معلومات مزود الخدمة»: the title and trail centred on the paper */

.wizard {
    padding-block-end: clamp(2.5rem, 4.17vw, 5rem);
}

/* ---- the card: sand under a 2px rule, the step's heading and intro, then the plate */

.wizmodal {
    /* The account screens' field palette, turned for the directory's form: sand boxes
       with dark type on the near-black plate. .authbox and its parts read these. The
       add-an-entry modal is moved out from under the card, so it names them again. */
    --auth-field: var(--sand);
    --auth-edge: var(--sand);
    --auth-ink: #8a857a;
    --wiz-gap: clamp(0.75rem, 1.3vw, 1.5625rem);
    --wiz-edge: #3e3529;
    --profile-inner-edge: var(--wiz-edge);
}

.wizsection {
    display: flex;
    flex-direction: column;
    gap: var(--wiz-gap);
}

.wizsection__lede {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.wizsection__title {
    margin: 0;
    font-size: clamp(1rem, 1.15vw, 1.375rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--mustard);
}

.wizsection__title--small {
    font-size: clamp(0.9375rem, 1.04vw, 1.25rem);
}

.wizsection__req,
.wizfield__req {
    color: var(--mustard);
}

/* Tight under its title, not a whole gap down. */
.wizsection__hint {
    margin: calc(0.5rem - var(--wiz-gap)) 0 0;
    font-size: clamp(0.8125rem, 0.83vw, 1rem);
    line-height: 1.4;
    color: #a9a397;
}

.wizsection__lede .wizsection__hint {
    margin: 0;
}

.wizsection__note {
    margin: 0;
    font-size: clamp(0.8125rem, 0.94vw, 1.125rem);
    text-align: center;
    color: #a9a397;
}

.wizgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wiz-gap) clamp(1rem, 1.82vw, 2.1875rem);
}

.wizgrid__wide {
    grid-column: 1 / -1;
}

/* ---- the fields: white labels over sand boxes, square, dark type */

:is(.wizcard, .wizmodal) .authfield__label {
    font-size: clamp(0.8125rem, 0.83vw, 1rem);
    font-weight: 500;
    color: var(--white);
}

.wizfield__hint {
    margin: 0 0 0.5rem;
    font-size: clamp(0.8125rem, 0.83vw, 1rem);
    color: #a9a397;
}

:is(.wizcard, .wizmodal) .authbox {
    height: clamp(2.75rem, 3.39vw, 4.0625rem);
    border-radius: 0;
}

:is(.wizcard, .wizmodal) .authbox--area {
    height: auto;
    min-height: clamp(6rem, 8.33vw, 10rem);
}

:is(.wizcard, .wizmodal) .authbox:focus-within {
    border-color: var(--mustard);
}

:is(.wizcard, .wizmodal) .authbox.is-invalid {
    border-color: var(--danger);
}

:is(.wizcard, .wizmodal) .authbox__control,
:is(.wizcard, .wizmodal) .authbox .cselect__button {
    color: var(--ink);
}

:is(.wizcard, .wizmodal) .authbox .cselect__button.is-placeholder {
    color: var(--auth-ink);
}

:is(.wizcard, .wizmodal) .authbox__icon,
:is(.wizcard, .wizmodal) .authbox__caret {
    color: #4b4a47;
}

:is(.wizcard, .wizmodal) .authbox__rule {
    background: #b9b3a6;
}

/* ---- pickers: a dashed zone on the plate's slate, the button mustard and square */

.wizupload__zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.375rem, 0.52vw, 0.625rem);
    min-height: clamp(9rem, 14.11vw, 16.9375rem);
    padding: clamp(1rem, 1.3vw, 1.5625rem);
    border: 1.5px dashed #5a554b;
    background: #191c1e;
    text-align: center;
}

.wizupload__zone:focus-within {
    border-color: var(--mustard);
}

.wizupload__zone.is-invalid {
    border-color: var(--danger);
}

.wizupload__prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.25rem, 0.52vw, 0.625rem);
}

.wizupload__prompt[hidden],
.wizupload__preview[hidden],
.wizupload__file[hidden] {
    display: none;
}

.wizupload__glyph {
    width: clamp(1.75rem, 2.08vw, 2.5rem);
    height: clamp(1.75rem, 2.08vw, 2.5rem);
    color: var(--mustard);
}

.wizupload__cta {
    margin: 0;
    font-size: clamp(1rem, 1.15vw, 1.375rem);
    font-weight: 700;
    color: var(--mustard);
}

.wizupload__cta--small {
    font-size: clamp(0.8125rem, 0.94vw, 1.125rem);
    font-weight: 400;
}

.wizupload__limits {
    margin: 0;
    font-size: clamp(0.8125rem, 0.94vw, 1.125rem);
    color: #a9a397;
}

/* A picked file that is not a picture is named here. */
.wizupload__file {
    margin: 0;
    font-size: clamp(0.8125rem, 0.94vw, 1.125rem);
    color: var(--white);
    overflow-wrap: anywhere;
}

/* «استعراض الملفات», the label that opens the picker: 291 x 63, mustard, square. */
.wizupload__browse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(2.5rem, 3.28vw, 3.9375rem);
    min-width: min(100%, clamp(9rem, 15.16vw, 18.1875rem));
    margin-block-start: clamp(0.25rem, 0.52vw, 0.625rem);
    padding-inline: 1rem;
    background: var(--mustard);
    font-size: clamp(0.875rem, 0.94vw, 1.125rem);
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.wizupload__browse:hover {
    background: #e9c05c;
}

.wizupload__preview {
    display: block;
    width: 100%;
    max-height: 16rem;
    object-fit: contain;
}

/* The same zone as a tile in the album grid, at the photographs' own size. */
.wizupload__zone--tile {
    height: 100%;
    min-height: 0;
    padding: clamp(0.75rem, 1.04vw, 1.25rem);
}

/* And as the small portrait slot on a founder row: 116 x 104, the whole thing a label. */
.wizupload__zone--photo {
    width: clamp(5.5rem, 6.04vw, 7.25rem);
    height: clamp(5rem, 5.42vw, 6.5rem);
    min-height: 0;
    padding: 0.5rem;
    border-color: #5a554b;
    background: #14130f;
    overflow: hidden;
    cursor: pointer;
}

.wizupload__zone--photo .wizupload__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

/* ---- the album */

.wizalbum {
    display: flex;
    flex-direction: column;
    gap: var(--wiz-gap);
}

/* «تم رفع 4/5», at the end of the line above the grid. */
.wizalbum__count {
    margin: 0;
    font-size: clamp(1rem, 1.25vw, 1.5rem);
    font-weight: 500;
    text-align: end;
    color: #a9a397;
}

/* 216 x 238, five to the row with the picker's tile among them. */
.wizalbum__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.5rem, 1.3vw, 1.5625rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wizalbum__preview {
    aspect-ratio: 216 / 238;
}

.wizalbum__preview {
    position: relative;
    margin: 0;
    background: #191c1e;
    overflow: hidden;
}

.wizalbum__preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The cross that takes a picture — or a work — out again, in its corner: two bars drawn
   from the button's own centre, so nothing depends on where a glyph sits in its line
   box. */
.wizalbum__remove {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wizalbum__remove::before,
.wizalbum__remove::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.875rem;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}

.wizalbum__remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.wizalbum__remove:hover,
.wizalbum__remove:focus-visible {
    border-color: var(--mustard);
    background: var(--mustard);
    color: var(--ink);
}

/* ---- the works added on «إضافة عمل»: a poster's frame each, the title set on it */

.wizworks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.5rem, 1.3vw, 1.5625rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wizwork {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 2 / 3;
    padding: clamp(0.75rem, 1.04vw, 1.25rem);
    border: 1.5px solid var(--wiz-edge);
    background: linear-gradient(to top, #0b0b09, #26231c);
}

.wizwork__title {
    font-size: clamp(0.9375rem, 1.15vw, 1.375rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--white);
    overflow-wrap: anywhere;
}

/* ---- repeating rows: founders, cast, crew, awards, announcements, projects, openings */

.wizrows,
.wizrows__list {
    display: flex;
    flex-direction: column;
    gap: var(--wiz-gap);
}

.wizrows[hidden] {
    display: none;
}

.wizrows__list:empty {
    display: none;
}

/* The awards run two to a row. */
.wizrows__list--pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The buttons of the form: mustard to go on, black edged in mustard to go back, and
   outlined in mustard to add a row. All square. */
.wizbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.375rem, 0.52vw, 0.625rem);
    min-height: clamp(2.75rem, 3.13vw, 3.75rem);
    padding-inline: clamp(1rem, 1.3vw, 1.5625rem);
    border: 1px solid transparent;
    background: none;
    font: inherit;
    font-size: clamp(0.875rem, 0.94vw, 1.125rem);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wizbtn--primary {
    background: var(--mustard);
    color: var(--ink);
}

.wizbtn--primary:hover,
.wizbtn--primary:focus-visible {
    background: #e9c05c;
}

.wizbtn--back {
    border-color: var(--mustard);
    background: #000;
    color: var(--mustard);
}

.wizbtn--back:hover,
.wizbtn--back:focus-visible {
    background: var(--mustard);
    color: var(--ink);
}

.wizbtn__icon {
    width: clamp(1.125rem, 1.25vw, 1.5rem);
    height: clamp(1.125rem, 1.25vw, 1.5rem);
}

.wizrows__add {
    flex: none;
    align-self: flex-start;
}

/* A row on its own edged plate. */
.wizplate {
    margin: 0;
    padding: clamp(0.75rem, 1.3vw, 1.5625rem);
    border: 1.5px solid var(--wiz-edge);
    background: none;
}

/* The bin: square, the height of the box beside it. */
.wizremove {
    display: grid;
    flex: none;
    place-items: center;
    width: clamp(2.5rem, 2.86vw, 3.4375rem);
    height: clamp(2.5rem, 2.86vw, 3.4375rem);
    padding: 0;
    border: 1.5px solid #4b4a47;
    background: #242424;
    color: var(--white);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.wizremove:hover,
.wizremove:focus-visible {
    border-color: var(--danger);
    color: var(--danger);
}

.wizremove__icon {
    width: clamp(1.125rem, 1.25vw, 1.5rem);
    height: clamp(1.125rem, 1.25vw, 1.5rem);
}

/* A person: the bin, the portrait slot, then the name and the second field, the bin
   and the boxes on one baseline. */
.wizfounder {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--wiz-gap) clamp(1rem, 1.82vw, 2.1875rem);
    align-items: center;
}

.wizfounder__photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.375rem, 0.52vw, 0.625rem);
}

/* An award, an announcement or a project, as drawn: the bin, the two lines, and the
   date at the end of the plate. */
.wizentry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(0.75rem, 1.3vw, 1.5625rem);
    align-items: center;
    min-height: clamp(4.5rem, 5.73vw, 6.875rem);
    list-style: none;
    background: #1b1a17;
}

.wizentry__text {
    min-width: 0;
}

.wizentry__title {
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    font-weight: 600;
    line-height: 1.6;
    color: var(--white);
    overflow-wrap: anywhere;
}

.wizentry__sub {
    margin: 0.25rem 0 0;
    font-size: clamp(0.8125rem, 0.94vw, 1.125rem);
    line-height: 1.5;
    color: #8e8b8c;
    overflow-wrap: anywhere;
}

.wizentry__sub:empty {
    display: none;
}

.wizentry__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding-inline: clamp(0.25rem, 0.78vw, 0.9375rem);
    font-size: clamp(0.8125rem, 0.94vw, 1.125rem);
    line-height: 2;
    text-align: center;
    color: #8e8b8c;
}

.wizentry__date:has(.wizentry__when:empty) {
    display: none;
}

/* Announcements and projects share a line, a rule between them. */
.wizcols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.6vw, 3.125rem);
}

.wizcols > .wizsection + .wizsection {
    padding-inline-start: clamp(1rem, 2.6vw, 3.125rem);
    border-inline-start: 1px solid var(--wiz-edge);
}

/* The player under the link, hidden until web.js has a YouTube or Vimeo address to put
   in it. */
.wizvideo {
    margin-block-start: var(--wiz-gap);
}

.wizvideo[hidden] {
    display: none;
}

.wizvideo__frame {
    display: block;
    width: 100%;
    aspect-ratio: 1707 / 837;
    border: 0;
    background: #000;
}

.wizwhy {
    text-align: center;
}

.wizwhy__title {
    margin: 0;
    font-size: clamp(1rem, 1.15vw, 1.375rem);
    font-weight: 500;
    line-height: 1.6;
    color: var(--mustard);
}

.wizwhy__body {
    margin: 0;
    font-size: clamp(0.8125rem, 0.83vw, 1rem);
    line-height: 2;
    color: var(--white);
}

/* ---- the card that adds an entry: the consultation modal's square navy over the page
        dimmed and blurred, the step's mustard heading at the start, the form's sand
        fields, and its two buttons side by side */

.modal.is-open {
    display: flex;
}

.wizmodal .modal__scrim {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
}

/* Not clipped: the calendar opens below the date field and needs to be seen. */
.wizmodal__card {
    width: min(100%, 44rem);
    overflow: visible;
    padding: clamp(1.5rem, 2.08vw, 2.5rem);
    border: 2.5px solid var(--panel-border);
    border-radius: 0;
    background: var(--navy);
    backdrop-filter: none;
    font-family: var(--font-lama);
    color: var(--white);
}

.wizmodal__title {
    padding-inline: 0 2.5rem;
    font-family: inherit;
    font-size: clamp(1.375rem, 1.67vw, 2rem);
    font-weight: 500;
    line-height: 1.5;
    text-align: start;
    color: var(--mustard);
}

/* The close control: a square hairline box in the corner, mustard under the pointer. */
.wizmodal .modal__x {
    inset-block-start: clamp(1.25rem, 1.82vw, 2.1875rem);
    inset-inline-end: clamp(1.25rem, 1.82vw, 2.1875rem);
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--panel-border);
    border-radius: 0;
    background: none;
    color: #a9a397;
}

.wizmodal .modal__x:hover,
.wizmodal .modal__x:focus-visible {
    border-color: var(--mustard);
    background: none;
    color: var(--mustard);
}

.wizmodal__fields {
    display: grid;
    gap: clamp(1rem, 1.3vw, 1.5625rem);
    margin-block-start: clamp(1.25rem, 1.82vw, 2.1875rem);
    padding-block-start: clamp(1.25rem, 1.82vw, 2.1875rem);
    border-block-start: 1px solid var(--panel-border);
}

.wizmodal__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-block-start: clamp(1.5rem, 2.08vw, 2.5rem);
}

.wizmodal__actions .wizbtn {
    min-height: clamp(3rem, 3.39vw, 4.0625rem);
}

.wizopening {
    display: flex;
    flex-direction: column;
    gap: var(--wiz-gap);
}

.wizopening__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.wizparty {
    display: flex;
    flex-direction: column;
    gap: var(--wiz-gap);
}

.wizparty__name {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- responsive */

@media (max-width: 1400px) {
    .wizworks {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .wizworks,
.wizalbum__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* The bin and the portrait on one line, the two fields under them. */
    .wizfounder {
        grid-template-columns: auto auto;
    }

    .wizfounder .wizfield {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {

    .founders,
.wizgrid,
.wizcols,
.wizrows__list--pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .wizcols > .wizsection + .wizsection {
        padding-inline-start: 0;
        padding-block-start: clamp(1rem, 2.6vw, 3.125rem);
        border-inline-start: 0;
        border-block-start: 1px solid var(--wiz-edge);
    }
}

@media (max-width: 560px) {
    .wizworks,
.wizalbum__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pager {
        gap: 0.5rem;
    }

    .pager__list {
        gap: 0.25rem;
    }

    .wizmodal__actions {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* ------------------------------------------------ redesign: البحث (Spotlight)
 *
 * The header's «بحث» as a Mac's Spotlight: the page blurs and dims, and one panel
 * drops in near the top of the window — the field across it, the results grouped under
 * it, and the keys along its foot. The panel is the select lists' own: black, a
 * hairline edge, ivory rows that take the mustard when chosen. A dialog rather than a
 * page, so it takes fixed metrics.
 */

html.is-spotlight {
    overflow: hidden;
}

.spotlight {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(4rem, 14vh, 9rem) 1rem 1rem;
    font-family: var(--font-lama);
}

.spotlight[hidden] {
    display: none;
}

.spotlight__scrim {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 12, 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.spotlight.is-open .spotlight__scrim {
    opacity: 1;
}

@media (max-width: 560px) {
    .spotlight {
        padding-top: 0.75rem;
    }

}

/* Quality floor: honour a reduced-motion preference everywhere. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* CMS pages: privacy, terms, cookies (phase 4, D12). Plain text in a readable measure. */
.legalpage {
    max-width: 52rem;
    padding-block: clamp(2rem, 4vw, 4rem);
}

.legalpage__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.75rem, 2.5vw, 2.75rem);
    color: var(--teal);
}

.legalpage__updated,
.legalpage__fallback {
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    color: #9b9a9b;
}

.legalpage__body h2 {
    margin: 2rem 0 0.75rem;
    font-size: 1.25rem;
}

.legalpage__body p {
    margin: 0 0 1rem;
    line-height: 1.8;
}

/* Lists written as "- " or "1. " lines (x-web.ui.page-body). The site resets ul to bare; legal
   text needs its markers back, indented from the start of the line. */
.legalpage__body ul,
.legalpage__body ol {
    margin: 0 0 1rem;
    padding-inline-start: 1.5rem;
    line-height: 1.8;
}

.legalpage__body ul {
    list-style: disc;
}

.legalpage__body ol {
    list-style: decimal;
}

.legalpage__body li + li {
    margin-top: 0.25rem;
}

.legalpage__body li::marker {
    color: var(--teal);
}

/* ---------------------------------------------------- phase 7: site chrome */

/* A sponsor's or partner's uploaded logo (brand_slots), unframed. A slot without a logo is not
   drawn at all (SiteChromeComposer). */
.sponsor__img {
    display: block;
    max-width: clamp(7.5rem, 8.33vw, 10rem);
    max-height: clamp(2.25rem, 2.6vw, 2.75rem);
    object-fit: contain;
}

a.sponsor__logo {
    text-decoration: none;
}

.partners__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
}

.partners__img {
    display: block;
    max-width: min(100%, 20rem);
    max-height: clamp(6.25rem, 4.6vw, 5.5rem);
    object-fit: contain;
}

/* «جلب الرعاة»: one link per audience instead of a single button. */
.svccard__routes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
}

/* The cookie notice: a navy bar across the foot of the window until it is answered. The two
   answers are the same size, so refusing is as easy as accepting. */
.cookienote {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 60;
    padding-block: 1rem;
    border-block-start: 1px solid var(--navy-line);
    background: var(--navy);
    color: var(--stone);
}

.cookienote__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.cookienote__text {
    flex: 1 1 32rem;
}

.cookienote__title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ivory);
}

.cookienote__text p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.cookienote__text a {
    color: var(--mustard);
}

.cookienote__actions {
    display: flex;
    gap: 0.75rem;
}

.cookienote__btn {
    min-width: 8.5rem;
    padding: 0.625rem 1.25rem;
    border: 1.5px solid var(--stone);
    background: transparent;
    color: var(--ivory);
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
}

.cookienote__btn--primary {
    border-color: var(--mustard);
    background: var(--mustard);
    color: var(--navy);
}

.cookienote__btn:focus-visible {
    outline: 2px solid var(--mustard);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .cookienote__actions,
    .cookienote__btn {
        flex: 1 1 0;
    }
}

/* =====================================================================================
   October 2026 redesign — shared pieces (Figma QtOQXXkpv857x1Qf38mxSJ, docs/upgrades phase 1)

   The new file is drawn at 1440 with an 88 gutter, which --frame-pad already lands on. Sizes
   below are clamp(min, px/1440 of the viewport, px): the design's size at 1440 and above.
   ===================================================================================== */

:root {
    --v3-ink: #12161a;
    --v3-text: #68665e;
    --v3-hint: #8a857a;
    --v3-placeholder: #7b776d;
    --v3-field-line: #aaa598;
    --v3-rule: #cec9bd;
    --v3-green: #1e6b66;
    --v3-green-deep: #17524e;
    --v3-rust: #a84f28;
    --v3-rust-wash: #f8eee7;
}

/* --- the page head: breadcrumb strip, eyebrow, title, intro, full-width rule (628:10202) */

.pagehead {
    border-block-end: 1px solid var(--v3-rule);
    font-family: var(--font-lama);
}

.pagehead__crumbs {
    padding-block: 18px 19px;
    font-family: var(--font-lama);
}

.pagehead__crumbs .crumbs__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagehead__crumbs .crumbs {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--v3-text);
}

.pagehead__crumbs .crumbs__link:hover,
.pagehead__crumbs .crumbs__link:focus-visible {
    color: var(--v3-green);
}

.crumbs__chevron {
    width: 7px;
    height: 4px;
    transform: rotate(90deg);
}

[dir="ltr"] .crumbs__chevron {
    transform: rotate(-90deg);
}

.pagehead__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-block: clamp(1.25rem, 1.91vw, 1.75rem) clamp(1.75rem, 3.09vw, 2.8125rem);
}

.pagehead__eyebrow {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--v3-green);
}

.pagehead__titlerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.pagehead__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(2.125rem, 3.75vw, 3.375rem);
    font-weight: 300;
    line-height: 1.35;
    color: var(--v3-ink);
}

.pagehead__badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding-inline: 12px;
    border: 1px solid var(--v3-green);
    font-size: 13px;
    color: var(--v3-green);
}

.pagehead__intro {
    max-width: 760px;
    margin: 0;
    padding-block-start: 8px;
    font-size: clamp(1rem, 1.32vw, 1.1875rem);
    line-height: 1.9;
    color: var(--v3-text);
}

/* --- the rail beside the content, split by a hairline (628:10206) */

.railframe {
    display: grid;
    grid-template-columns: clamp(12rem, 16.39vw, 14.75rem) minmax(0, 1fr);
    padding-block: 48px 64px;
    font-family: var(--font-lama);
}

.railframe__rail {
    padding-inline-end: clamp(1rem, 1.74vw, 1.5625rem);
    border-inline-end: 1px solid var(--stone);
}

.railframe__main {
    min-width: 0;
    padding-inline-start: clamp(1.25rem, 2.5vw, 2.25rem);
}

.siderail__label {
    margin: 0 0 21px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--v3-hint);
}

.siderail__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.siderail__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 61.5px;
    padding-inline: 14px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.47;
    color: var(--v3-ink);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.siderail__icon {
    width: 16px;
    height: 16px;
    color: var(--v3-text);
}

.siderail__link:hover {
    background: var(--sand);
}

.siderail__link.is-active {
    background: var(--v3-green);
    color: var(--sand);
}

.siderail__link.is-active .siderail__icon {
    color: var(--sand);
}

@media (max-width: 900px) {
    .railframe {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2rem;
        padding-block-start: 2rem;
    }

    .railframe__rail {
        padding: 0 0 1.5rem;
        border-inline-end: 0;
        border-block-end: 1px solid var(--stone);
    }

    .railframe__main {
        padding-inline-start: 0;
    }

    .siderail__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .siderail__link {
        min-height: 48px;
    }
}

/* --- form fields: label above a light bordered box, rust when invalid (628:11525) */

.lfield {
    font-family: var(--font-lama);
}

.lfield + .lfield {
    margin-block-start: 22px;
}

.lfield__label {
    display: block;
    margin-block-end: 10px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--v3-ink);
}

.lfield__box {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 54px;
    border: 1px solid var(--v3-field-line);
    background: var(--paper);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lfield__box:focus-within {
    border-color: var(--v3-green);
    box-shadow: 0 0 0 1px var(--v3-green);
}

.lfield__box.is-invalid {
    border-color: var(--v3-rust);
}

.lfield__box.is-invalid:focus-within {
    box-shadow: 0 0 0 1px var(--v3-rust);
}

.lfield__control {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    padding: 0 16px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    line-height: 1.6;
    color: var(--v3-ink);
    outline: 0;
}

/* Addresses and numbers read left to right even on the Arabic page («name@», 628:11540); the
   placeholder above them stays Arabic until something is typed. */
.lfield__control:is([type="email"], [type="url"], [type="tel"]):not(:placeholder-shown) {
    direction: ltr;
    text-align: left;
}

.lfield__control::placeholder {
    color: var(--v3-placeholder);
    opacity: 1;
}

.lfield__box--area {
    align-items: stretch;
}

textarea.lfield__control {
    min-height: 144px;
    padding-block: 15px;
    resize: vertical;
}

.lfield__select {
    padding-inline-end: 44px;
    appearance: none;
    cursor: pointer;
}

.lfield__caret {
    position: absolute;
    inset-inline-end: 17px;
    width: 10px;
    height: 6px;
    color: var(--v3-text);
    pointer-events: none;
}

.lfield__eye {
    display: grid;
    place-items: center;
    width: 48px;
    align-self: stretch;
    border: 0;
    background: transparent;
    color: var(--v3-text);
    cursor: pointer;
}

.lfield__eye:hover,
.lfield__eye:focus-visible {
    color: var(--v3-green);
}

.lfield__eyeicon {
    width: 18px;
    height: 18px;
}

.lfield__hint {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--v3-hint);
}

.lfield__error {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--v3-rust);
}

/* --- the error summary at the head of a form (628:11529) */

.formerrors {
    margin-block-end: 24px;
    padding: 18px 20px 19px;
    border: 1px solid var(--v3-rust);
    border-inline-start-width: 3px;
    background: var(--v3-rust-wash);
    font-family: var(--font-lama);
    color: var(--v3-ink);
}

.formerrors:focus {
    outline: 0;
}

.formerrors__title {
    margin: 0;
    font-size: 17px;
    line-height: 1.9;
}

.formerrors__line {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.9;
}

.formerrors__list {
    margin: 4px 0 0;
    padding-inline-start: 18px;
    list-style: none;
}

.formerrors__link {
    font-size: 13px;
    line-height: 1.9;
    color: var(--v3-rust);
}

.formerrors__link:hover,
.formerrors__link:focus-visible {
    text-decoration: underline;
}

/* --- buttons: solid green, hairline outline, full-width with the arrow, and sending
       (628:11549, 628:10516, 628:12889) */

.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 47px;
    padding: 0 23px;
    border: 1px solid var(--v3-green);
    background: var(--v3-green);
    font-family: var(--font-lama);
    font-size: 14px;
    line-height: 1.6;
    color: var(--sand);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cta:hover,
.cta:focus-visible {
    border-color: var(--v3-green-deep);
    background: var(--v3-green-deep);
}

.cta--outline {
    min-height: 46px;
    padding-inline: 16px;
    border-color: var(--stone);
    background: transparent;
    font-size: 12px;
    color: var(--v3-green);
}

.cta--outline:hover,
.cta--outline:focus-visible {
    border-color: var(--v3-green);
    background: transparent;
}

.cta--block {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    padding-inline: 24px 25px;
    font-size: 15px;
}

.cta__icon {
    width: 16px;
    height: 16px;
}

.cta__arrow {
    width: 13px;
    height: 12px;
}

[dir="ltr"] .cta__arrow {
    transform: scaleX(-1);
}

.cta__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: 50%;
    animation: cta-spin 0.8s linear infinite;
}

.cta.is-sending,
.cta.is-sending:hover {
    justify-content: center;
    gap: 12px;
    border-color: var(--stone);
    background: var(--stone);
    color: var(--v3-text);
    cursor: progress;
}

.cta.is-sending .cta__spinner {
    display: block;
    order: -1;
}

.cta.is-sending .cta__arrow,
.cta.is-sending .cta__icon {
    display: none;
}

@keyframes cta-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta__spinner {
        animation-duration: 2.4s;
    }
}

/* --- the light modal card (628:11680 over the 628:11679 scrim) */

.dialog {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.dialog__state:checked + .dialog {
    display: flex;
}

.dialog__scrim {
    position: absolute;
    inset: 0;
    background: rgba(18, 22, 26, 0.77);
    cursor: pointer;
}

.dialog__card {
    position: relative;
    width: min(620px, 100%);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 38px clamp(1.25rem, 2.71vw, 2.4375rem) 39px;
    border: 1px solid var(--stone);
    background: var(--paper);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.33);
    font-family: var(--font-lama);
    color: var(--v3-ink);
}

.dialog__x {
    position: absolute;
    inset-block-start: 21px;
    inset-inline-end: 21px;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 1px solid var(--stone);
    color: var(--v3-ink);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.dialog__x:hover,
.dialog__x:focus-visible {
    border-color: var(--v3-ink);
}

.dialog__xicon {
    width: 9px;
    height: 9px;
}

.dialog__eyebrow {
    margin: 0;
    padding-inline-end: 44px;
    font-size: 11px;
    line-height: 1.9;
    color: var(--v3-green);
}

.dialog__title {
    margin: 14px 0 0;
    font-family: inherit;
    font-size: clamp(1.625rem, 2.15vw, 1.9375rem);
    font-weight: 300;
    line-height: 1.5;
}

.dialog__intro {
    margin: 15px 0 0;
    font-size: 15px;
    line-height: 1.9;
    color: var(--v3-text);
}

.dialog__card form {
    margin-block-start: 18px;
}

.dialog__card .lfield__label {
    margin-block-end: 6px;
}

.dialog__card .lfield__box {
    min-height: 46px;
}

.dialog__card .lfield__control {
    padding-inline: 13px;
    font-size: 13px;
}

.dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 22px;
}

/* --- figures: the ticket glyph before a count, the blank for an unknown (628:10267) */

.tickets {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.tickets__sign {
    width: 12.25px;
    height: 9.8px;
}

.money--blank,
.tickets--blank {
    color: var(--v3-hint);
}

/* =====================================================================================
   October 2026 redesign — the reports' frame and tables (Figma 628:10195, phase 3)

   The four rail reports sit in the shared rail frame. It keeps the .perfv2 class so the
   chart and band rules above still reach it; its own grid replaces the September one.
   ===================================================================================== */

.perfv2.railframe {
    grid-template-columns: clamp(12rem, 16.39vw, 14.75rem) minmax(0, 1fr);
    column-gap: 0;
    padding-block: 48px 64px;
}

@media (max-width: 900px) {
    .perfv2.railframe {
        grid-template-columns: minmax(0, 1fr);
    }
}

.perfframe .reptop {
    display: block;
}

.perfframe .reptop__intro {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
    color: var(--v3-text);
}

.perfframe .repsearch {
    position: relative;
    width: min(420px, 100%);
    margin-block-start: 28px;
}

.perfframe .repsearch__field {
    width: 100%;
    height: 48px;
    padding-inline: 51px 16px;
    border: 1px solid var(--stone);
    background: var(--paper);
    color: var(--v3-ink);
    font: inherit;
    font-size: 14px;
}

.perfframe .repsearch__field::placeholder {
    color: #757575;
}

.perfframe .repsearch__field:focus-visible {
    outline: 0;
    border-color: var(--v3-green);
    box-shadow: 0 0 0 1px var(--v3-green);
}

.perfframe .repsearch__icon {
    inset-inline-start: 17px;
    width: 16px;
    height: 16px;
    color: var(--v3-green);
}

.perfframe .reptable {
    margin-block-start: 24px;
}

.perfframe .reptable__cell {
    padding: 0 12px;
    border-block-end: 1px solid var(--stone);
    font-family: var(--font-lama);
    font-size: 15px;
    line-height: 1.8;
    color: var(--v3-ink);
}

.perfframe .reptable__cell:first-child,
.perfframe .reptable__cell:last-child {
    padding-inline: 12px;
}

.perfframe .reptable__row:not(.reptable__row--head):not(.reptable__row--band) .reptable__cell {
    height: 80px;
}

.perfframe tbody .reptable__row[data-report-row]:nth-child(odd) .reptable__cell {
    background: var(--sand);
}

.perfframe tbody .reptable__row[data-report-row]:nth-child(even) .reptable__cell {
    background: var(--paper);
}

/* The near-black header row, small light labels, the gold sort glyph. */
.perfframe .reptable__row--head .reptable__cell {
    height: 57px;
    padding-block: 0;
    border: 0;
    background: var(--v3-ink);
    font-size: 11px;
    line-height: 1.7;
    color: var(--sand);
    vertical-align: middle;
}

.perfframe .reptable__sort:hover {
    color: var(--white);
}

.perfframe .reptable__sorticon {
    width: 12px;
    height: 10px;
    color: var(--mustard);
    opacity: 1;
}

.perfframe .reptable__sort[data-sort="date"] .reptable__sorticon {
    transform: none;
}

.perfframe .reptable__cell--rank {
    font-size: 20px;
    font-weight: 300;
    color: var(--v3-green);
}

/* The two weekend reports: 99 / 298 / 208 / 387 of the 992 column (628:10250). */
.perfframe .reptable:not(.reptable--wide):not(.reptable--annual) .reptable__row--head .reptable__cell:nth-child(1) {
    width: 10%;
}

.perfframe .reptable:not(.reptable--wide):not(.reptable--annual) .reptable__row--head .reptable__cell:nth-child(2) {
    width: 30%;
}

.perfframe .reptable:not(.reptable--wide):not(.reptable--annual) .reptable__row--head .reptable__cell:nth-child(3) {
    width: 21%;
}

.perfframe .reptable:not(.reptable--wide):not(.reptable--annual) tbody .reptable__cell--lg {
    min-width: 0;
    font-size: 11px;
    color: var(--v3-text);
}

.perfframe .reptable__figure {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 300;
    color: var(--v3-green);
}

.perfframe .reptable__glyph {
    width: 12.25px;
    height: 9.8px;
}

.perfframe .reptable__row--band .reptable__cell {
    height: 64px;
    font-size: 15px;
}

.perfframe__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-block-start: 29px;
}

.perfframe .reportshare {
    align-items: flex-start;
    margin: 0;
}

.perfframe__download {
    margin: 0;
    font-size: 12px;
    color: var(--v3-hint);
}

.perfframe__download a {
    color: var(--v3-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =====================================================================================
   October 2026 redesign — the profile frame and its simple pages (Figma 628:15189, phase 3)

   The rail at the start (245, hairline at its end), 38 to the page's sand card (981 at 1440).
   General information and works keep their September contents inside the new card until
   phase 10 rebuilds them.
   ===================================================================================== */

.perfv2.railframe.profframe {
    grid-template-columns: 245px minmax(0, 1fr);
    padding-block: 44px 60px;
}

.profframe .railframe__main {
    padding-inline-start: 38px;
}

@media (max-width: 900px) {
    .perfv2.railframe.profframe {
        grid-template-columns: minmax(0, 1fr);
    }

    .profframe .railframe__main {
        padding-inline-start: 0;
    }
}

/* The quiet rail: 14px regular grey, two-line labels allowed. */
.siderail--quiet .siderail__label {
    margin-block-end: 12px;
    color: var(--v3-text);
}

.siderail--quiet .siderail__link {
    min-height: 57.8px;
    padding-block: 17px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--v3-text);
}

.siderail--quiet .siderail__icon {
    width: 17px;
    height: 17px;
}

.siderail--quiet .siderail__link.is-active {
    color: var(--sand);
}

/* The account type on the title's line (628:15206): crew green, company near-black, both with
   a small gold square; personal outlined, without one. */
.pagehead__badge {
    min-height: 0;
    padding: 0;
    border: 0;
}

.typebadge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 41px;
    padding-inline: 16px;
    border: 1px solid var(--v3-green);
    background: var(--v3-green);
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    color: var(--sand);
}

.typebadge::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--mustard);
}

.typebadge--company {
    border-color: var(--v3-ink);
    background: var(--v3-ink);
}

.typebadge--personal {
    border-color: var(--stone);
    background: transparent;
    color: var(--v3-text);
}

.typebadge--personal::before {
    content: none;
}

/* ---- the card */

.profframe .profcard {
    padding: 31px 32px 32px;
    border: 1px solid var(--stone);
    background: var(--sand);
}

.profframe .profcard__heading,
.profframe .profcard--soon .profcard__heading {
    font-size: clamp(1.375rem, 1.88vw, 1.6875rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--v3-ink);
}

.profframe .profcard__intro {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.9;
    color: var(--v3-text);
}

.profframe .profcard__body {
    margin-block-start: 27px;
}

/* ---- change password (628:15220) */

.profframe .pwform {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.profframe .pwform .lfield + .lfield {
    margin: 0;
}

.profframe .pwform .lfield__box {
    min-height: 51px;
}

.profframe .pwform .lfield__control {
    font-size: 13px;
}

.profframe .pwform__actions {
    margin: 0;
    padding-block-start: 5px;
}

.profframe .pwrules {
    margin: 0;
    padding: 24px 24px 37px;
    border: 0;
    border-inline-start: 2px solid var(--v3-green);
    border-radius: 0;
    background: var(--paper);
}

.profframe .pwrules__title {
    margin: 0 0 13px;
    font-size: 17px;
    font-weight: 400;
    color: var(--v3-ink);
}

.profframe .pwrules__list {
    padding-inline-start: 20px;
}

.profframe .pwrules__row {
    font-size: 13px;
    line-height: 2;
    color: var(--v3-text);
}

.profframe .pwrules__row.is-met {
    color: var(--v3-green);
}

.cta[disabled],
.cta[disabled]:hover {
    border-color: var(--stone);
    background: var(--stone);
    color: var(--v3-text);
    cursor: not-allowed;
}

@media (max-width: 700px) {
    .profframe .pwform {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- visibility and privacy (628:15478) */

.privlist .formnotice,
.privlist .formalert {
    margin: 0 0 1rem;
}

.privrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 92px;
    padding-block: 20px;
    border-block-start: 1px solid var(--stone);
}

.privrow__label {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--v3-ink);
}

.privrow__note {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--v3-text);
}

/* The switch: a 39x23 track, the 17 knob at the end it points to, and the state word. */
.privswitch {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    min-width: 96px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.privswitch__track {
    display: flex;
    flex: none;
    justify-content: flex-end;
    width: 39px;
    height: 23px;
    padding: 3px;
    border-radius: 20px;
    background: var(--stone);
    transition: background-color 0.15s ease;
}

.privswitch__knob {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--paper);
    transition: transform 0.15s ease;
}

.privswitch__word {
    font-size: 12px;
    color: var(--v3-text);
}

.privrow.is-on .privswitch__track {
    background: var(--v3-green);
}

/* Off, the knob rests at the end of the line; on, it moves to the start (628:15478). */
.privrow.is-on .privswitch__track {
    justify-content: flex-start;
}

.privrow.is-on .privswitch__word {
    color: var(--v3-green);
}

.privswitch:focus-visible .privswitch__track {
    outline: 2px solid var(--v3-green);
    outline-offset: 2px;
}

.privswitch[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
}

.privlist__note {
    margin: 0;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--stone);
    font-size: 12px;
    line-height: 1.8;
    color: var(--v3-hint);
}

/* The delete box, 24 under the card in an orange hairline (628:15540). */
.delbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: 24px;
    padding: 28px;
    border: 1px solid #ce6b36;
}

.delbox__title {
    margin: 0;
    font-size: 18px;
    color: var(--v3-ink);
}

.delbox__line {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--v3-text);
}

.delbox__action {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    min-height: 54px;
    padding-inline: 24px;
    border: 1px solid #ce6b36;
    font-size: 13px;
    color: #ce6b36;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.delbox__action:hover,
.delbox__action:focus-visible {
    background: rgba(206, 107, 54, 0.08);
}

.delbox__icon {
    width: 11px;
    height: 11px;
}

.cta--danger {
    border-color: #ce6b36;
    background: #ce6b36;
}

.cta--danger:hover,
.cta--danger:focus-visible {
    border-color: #b45a2b;
    background: #b45a2b;
}

/* ---- downloads (628:16294): two cards side by side */

.dlgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.dlcard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 250px;
    padding: 30px;
    border: 1px solid var(--stone);
}

.dlcard__icon {
    width: 28px;
    height: 28px;
    margin-block-end: 28px;
    color: var(--v3-green);
}

.dlcard__title {
    margin: 0 0 24px;
    font-family: inherit;
    font-size: clamp(1.25rem, 1.6vw, 1.4375rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--v3-ink);
}

.dlcard .soonchip,
.dlcard__cta {
    margin-block-start: auto;
}

.dlcard__empty {
    margin: 0 0 1rem;
    font-size: 13px;
    line-height: 1.8;
    color: var(--v3-text);
}

.dlcard__scope {
    margin: 1rem 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--v3-text);
}

.dlruns {
    align-self: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dlruns__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 12px;
    border-block-start: 1px solid var(--stone);
}

.dlruns__date {
    display: block;
    font-size: 14px;
    color: var(--v3-ink);
}

.dlruns__note {
    display: block;
    font-size: 12px;
    color: var(--v3-text);
}

.dlruns__print {
    flex: none;
    font-size: 12px;
    color: var(--v3-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The outlined chip of the profile cards and the empty states. */
.soonchip {
    display: inline-flex;
    align-items: center;
    min-height: 47px;
    padding-inline: 27px;
    border: 1px solid var(--stone);
    font-size: 13px;
    color: var(--v3-text);
}

@media (max-width: 700px) {
    .dlgrid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- an empty state: the centred icon, a line and the chip (628:16554) */

.emptycard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    padding: 32px 20px 50px;
    text-align: center;
}

.emptycard__icon {
    width: 46px;
    height: 46px;
    color: var(--v3-green);
}

.emptycard__text {
    max-width: 470px;
    margin: 0;
    font-size: 15px;
    line-height: 2;
    color: var(--v3-text);
}

/* =====================================================================================
   October 2026 redesign — sign in and sign up (Figma 628:11349, phase 4)

   The split frame: the light form panel at the start (688 wide between 70 gutters at 1440),
   the dark cinema photo at the end (612). The chooser before the sign-up forms stays dark and
   full-bleed (.authchoose).
   ===================================================================================== */

.authsplit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 42.5%);
    min-height: clamp(36rem, 57.43vw, 827px);
    background: var(--paper);
    font-family: var(--font-lama);
}

.authsplit__panel {
    padding-block: clamp(2.5rem, 4.48vw, 64.5px) clamp(3rem, 6.94vw, 100px);
    padding-inline: clamp(1rem, 4.86vw, 70px);
}

.authsplit__eyebrow {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--v3-green);
}

.authsplit__title {
    margin: 17px 0 0;
    font-family: inherit;
    font-size: clamp(2rem, 3.125vw, 2.8125rem);
    font-weight: 300;
    line-height: 1.35;
    color: var(--v3-ink);
}

.authsplit__intro {
    margin: 9px 0 0;
    font-size: 15px;
    line-height: 1.9;
    color: var(--v3-text);
}

.authsplit__lead {
    margin-block-start: 6px;
}

/* «تغيير نوع الحساب»: not drawn, kept small under the intro. */
.authsplit__change {
    font-size: 13px;
    line-height: 1.9;
    color: var(--v3-green);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.authsplit__body {
    margin-block-start: 33px;
}

/* The login and reset forms: one column, 22 between fields (628:11612–628:11621). */
.authsplit__form > .cta--block,
.authsplit__form > .authsplit__submit {
    margin-block-start: 25px;
}

.authsplit__form > .pwrules + .lfield {
    margin-block-start: 22px;
}

.authsplit__rules {
    margin-block-start: 16px;
}

/* The sign-up forms: two 332 columns 24 apart, a row every 24 (628:11778–628:11797). */
.authsplit__form--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.authsplit__form--grid .lfield + .lfield,
.authsplit__form--grid .formerrors {
    margin: 0;
}

.authsplit__form--grid > .cta--block {
    margin-block-start: 1px;
}

.authsplit__wide {
    grid-column: 1 / -1;
}

/* «تذكّر تسجيل الدخول» and «هل نسيت كلمة المرور؟» on one line (628:11546, 628:11548). */
.authsplit__opts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-block-start: 21px;
}

.authsplit__link {
    font-size: 13px;
    line-height: 1.6;
    color: var(--v3-green);
}

.authsplit__link:hover,
.authsplit__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* «ليس لديك حساب؟ اشترك الآن»: the link green over a hairline (628:11557). */
.authsplit__alt {
    margin: 28px 0 0;
    font-size: 14px;
    line-height: 1.9;
    color: var(--v3-ink);
}

.authsplit__altlink {
    color: var(--v3-green);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
}

.authsplit__altlink:hover,
.authsplit__altlink:focus-visible {
    color: var(--v3-green-deep);
}

/* A status line above a form: a reset done, a verification link that failed. */
.authnote {
    margin: 0 0 24px;
    padding: 14px 18px;
    border: 1px solid var(--v3-green);
    border-inline-start-width: 3px;
    background: rgba(30, 107, 102, 0.07);
    font-size: 13px;
    line-height: 1.9;
    color: var(--v3-ink);
}

.authnote--warn {
    border-color: var(--v3-rust);
    background: var(--v3-rust-wash);
}

.authsplit__body > .authnote + .cta {
    margin-block-start: 0;
}

/* ---- the light checkbox: an 18 square, green with a tick when on (628:11547) */

.lcheck {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--v3-ink);
    cursor: pointer;
}

.lcheck__box {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    border: 1px solid var(--v3-hint);
    background: var(--paper);
    appearance: none;
    cursor: pointer;
}

.lcheck__box:checked {
    border-color: var(--v3-green);
    background: var(--v3-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.3 8.4 11 1.6' fill='none' stroke='%23efeae0' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / 11px 9px;
}

.lcheck__box:focus-visible {
    outline: 2px solid var(--v3-green);
    outline-offset: 2px;
}

/* ---- «شروط كلمة المرور» folded under the password row of a sign-up form */

.authrules__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--v3-green);
    cursor: pointer;
    list-style: none;
}

.authrules__toggle::-webkit-details-marker {
    display: none;
}

.authrules__toggle::after {
    content: "";
    width: 10px;
    height: 6px;
    background: currentColor;
    -webkit-mask: url("../images/figma/icons/v3-chevron.svg") no-repeat center / contain;
    mask: url("../images/figma/icons/v3-chevron.svg") no-repeat center / contain;
    transition: transform 0.15s ease;
}

.authrules[open] .authrules__toggle::after {
    transform: rotate(180deg);
}

.authrules .pwrules {
    margin-block-start: 10px;
}

/* The rules panel on the light forms, as on the profile's password page (628:14924). */
.authsplit .pwrules {
    padding: 14px 20px 16px;
    border: 0;
    border-inline-start: 2px solid var(--v3-green);
    border-radius: 0;
    background: var(--sand);
}

.authsplit .pwrules__title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;
    color: var(--v3-ink);
}

.authsplit .pwrules__row {
    font-size: 13px;
    font-weight: 400;
    line-height: 2;
    color: var(--v3-text);
}

.authsplit .pwrules__row.is-met {
    color: var(--v3-green);
}

.authsplit .pwrules__tick {
    color: var(--v3-green);
}

/* ---- the photo side: the seats at half strength, darkening to the top (628:11559) */

.authsplit__stage {
    position: relative;
    overflow: hidden;
    background: var(--v3-ink);
}

.authsplit__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.authsplit__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 22, 26, 0.07), var(--v3-ink));
}

.authsplit__words {
    position: relative;
    z-index: 1;
    padding-block: clamp(2rem, 5.52vw, 79.5px) 2rem;
    padding-inline: clamp(1.25rem, 4.72vw, 68px) clamp(1.25rem, 4.51vw, 65px);
}

.authsplit__kicker {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mustard);
}

.authsplit__motto {
    margin: 31px 0 0;
    font-size: clamp(2.5rem, 4.72vw, 4.25rem);
    font-weight: 300;
    line-height: 1.3;
    color: var(--sand);
}

.authsplit__community {
    margin: 20px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--stone);
}

@media (max-width: 900px) {
    .authsplit {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    /* The photo becomes a short band above the form. */
    .authsplit__stage {
        order: -1;
        min-height: 13rem;
    }

    .authsplit__words {
        padding-block: 1.75rem;
    }

    .authsplit__motto {
        margin-block-start: 0.75rem;
        font-size: clamp(2rem, 8vw, 2.5rem);
    }

    .authsplit__community {
        margin-block-start: 0.5rem;
        font-size: 15px;
    }

    .authsplit__panel {
        padding-inline: var(--frame-pad);
    }
}

@media (max-width: 600px) {
    .authsplit__form--grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- «اختر نوع الحساب للمتابعة» (628:12035): dark, three cards 24 apart, the picked one gold */

.authchoose {
    position: relative;
    overflow: hidden;
    min-height: clamp(36rem, 57.43vw, 827px);
    background: var(--v3-ink);
    font-family: var(--font-lama);
    color: var(--sand);
}

.authchoose__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.authchoose::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(18, 22, 26, 0.94), rgba(18, 22, 26, 0.75));
}

.authchoose__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(2.5rem, 4.41vw, 63.5px) clamp(3rem, 8.33vw, 120px);
}

.authchoose__eyebrow {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mustard);
}

.authchoose__title {
    margin: 20px 0 0;
    font-family: inherit;
    font-size: clamp(2rem, 3.47vw, 3.125rem);
    font-weight: 300;
    line-height: 1.5;
    color: var(--sand);
}

.authchoose__intro {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--stone);
}

.acctypes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 41px 0 0;
    padding: 0;
    list-style: none;
}

.acctypes__item {
    display: flex;
}

.acctype {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-height: clamp(16rem, 22.1vw, 318px);
    padding: 31px;
    border: 1px solid rgba(201, 195, 182, 0.27);
    background: var(--v3-ink);
    color: var(--sand);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.acctype__badge {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(201, 195, 182, 0.24);
    color: var(--mustard);
}

.acctype__icon {
    width: 23px;
    height: 23px;
}

.acctype__title {
    margin-block-start: 21px;
    font-size: clamp(1.5rem, 1.94vw, 1.75rem);
    line-height: 1.5;
}

.acctype__note {
    margin-block: 14px 24px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--stone);
}

.acctype__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    align-self: stretch;
    min-height: 52px;
    margin-block-start: auto;
    padding-inline: 25px;
    border: 1px solid rgba(201, 195, 182, 0.27);
    font-size: 13px;
    line-height: 1.6;
    color: var(--sand);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.acctype__arrow {
    flex: none;
    width: 13px;
    height: 12px;
}

[dir="ltr"] .acctype__arrow {
    transform: scaleX(-1);
}

.acctype:hover,
.acctype:focus-visible {
    border-color: var(--mustard);
    background: #24241f;
}

.acctype:focus-visible {
    outline: 2px solid var(--sand);
    outline-offset: 3px;
}

.acctype:hover .acctype__cta,
.acctype:focus-visible .acctype__cta {
    border-color: var(--mustard);
    background: var(--mustard);
    color: var(--v3-ink);
}

.authchoose__alt {
    margin: 20px 0 0;
    font-size: 14px;
    line-height: 1.9;
    color: var(--stone);
}

.authchoose__altlink {
    color: var(--mustard);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
}

@media (max-width: 900px) {
    .acctypes {
        grid-template-columns: minmax(0, 1fr);
    }

    .acctype {
        min-height: 0;
    }
}

/* A select still on its empty first option reads as a placeholder (628:11782). */
.lfield__select:has(option[value=""]:checked) {
    color: var(--v3-placeholder);
}

.lfield__select option {
    color: var(--v3-ink);
}

/* =====================================================================================
   October 2026 redesign — the historical, annual and box-office reports (Figma 628:8569,
   628:9325, 628:8054, 628:10924, phase 5)
   ===================================================================================== */

/* ---- shared cell pieces: the label with its green lead, a figure with its glyph, «غير متاح» */

.replabel__lead {
    font-weight: 600;
    color: var(--v3-green);
}

.perfframe .reptable__figure,
.boxreport .reptable__figure {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 1.8;
    white-space: nowrap;
}

.reptable__figure--riyal .reptable__glyph {
    width: 8.8px;
    height: 9.8px;
}

.reptable__na {
    font-size: 12px;
    line-height: 1.8;
    color: var(--v3-text);
}

/* The rows alternate sand and ivory counting film rows only, so the folded details rows and
   the bands between them do not break the run. */
.perfframe tbody .reptable__row[data-report-row]:nth-child(odd of [data-report-row]) > .reptable__cell {
    background: var(--sand);
}

.perfframe tbody .reptable__row[data-report-row]:nth-child(even of [data-report-row]) > .reptable__cell {
    background: var(--paper);
}

/* ---- historical: five columns and the details toggle (628:9359) */

.perfframe .reptable--details .reptable__table {
    table-layout: fixed;
    min-width: 760px;
}

.perfframe .reptable--details .reptable__row--head .reptable__cell:nth-child(1) { width: 9.55%; }
.perfframe .reptable--details .reptable__row--head .reptable__cell:nth-child(2) { width: 23%; }
.perfframe .reptable--details .reptable__row--head .reptable__cell:nth-child(3) { width: 16.4%; }
.perfframe .reptable--details .reptable__row--head .reptable__cell:nth-child(4) { width: 17.25%; }
.perfframe .reptable--details .reptable__row--head .reptable__cell:nth-child(5) { width: 25.1%; }
.perfframe .reptable--details .reptable__row--head .reptable__cell:nth-child(6) { width: 8.6%; }

.perfframe .reptable--details tbody .reptable__row[data-report-row] .reptable__cell {
    height: 75px;
    font-size: 12px;
    white-space: normal;
}

.perfframe .reptable--details tbody .reptable__cell--film {
    font-size: 15px;
}

.perfframe .reptable--details .reptable__figure {
    font-weight: 400;
    color: var(--v3-ink);
}

.perfframe .reptable--details tbody .reptable__row--badge .reptable__cell {
    height: 102px;
}

/* Ranks 1–3: the gold star with the number on it and «Top» under it (628:9415). */
.reptable__star {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding-block-start: 4px;
    background: var(--mustard);
    -webkit-mask: url("../images/figma/icons/v3-star.svg") no-repeat center / contain;
    mask: url("../images/figma/icons/v3-star.svg") no-repeat center / contain;
}

.reptable__startext {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--v3-ink);
}

.reptable__star + .reptable__toptag {
    display: block;
    width: 40px;
    margin-block-start: 3px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.04em;
    text-align: center;
    color: #8a6d1f;
}

/* The top ten carry a gold edge at the start, through their open panel too (628:9414). */
.perfframe .reptable__row--top > .reptable__cell:first-child {
    box-shadow: inset -3px 0 0 var(--mustard);
}

[dir="ltr"] .perfframe .reptable__row--top > .reptable__cell:first-child {
    box-shadow: inset 3px 0 0 var(--mustard);
}

/* The «+» square, a «×» while its panel is open (628:9387). */
.reptable__more {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--stone);
    background: transparent;
    color: var(--v3-ink);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.reptable__more[hidden] {
    display: none;
}

.reptable__more:hover,
.reptable__more:focus-visible {
    border-color: var(--v3-ink);
}

.reptable__moreicon {
    width: 15px;
    height: 15px;
    transition: transform 0.15s ease;
}

.reptable__more[aria-expanded="true"] .reptable__moreicon {
    transform: rotate(45deg);
}

/* ---- the details panel: three fields a strip, ivory and sand in turn (628:9423) */

.perfframe .reptable__row--detail > .reptable__cell {
    height: auto;
    padding: 0;
    border-block-end: 1px solid var(--stone);
    background: var(--sand);
    white-space: normal;
}

.repdetail__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 12px;
}

.repdetail__row:nth-child(odd) {
    background: var(--paper);
}

.repdetail__row:nth-child(even) {
    background: var(--sand);
}

.repdetail__item {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.repdetail__label {
    font-size: 11px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--v3-text);
}

.repdetail__value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin: 0;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.9;
    color: var(--v3-ink);
}

.repdetail__value .reptable__figure {
    font-weight: 300;
}

.repdetail__value .reptable__na {
    font-size: 13px;
    font-weight: 300;
    color: var(--v3-ink);
}

.repdetail__usd {
    font-size: 12px;
    font-weight: 300;
    color: var(--v3-hint);
}

@media (max-width: 700px) {
    .repdetail__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
}

/* ---- bands, the total row and the legend (628:9768, 628:9974, 628:9996) */

.perfframe .reptable--details .reptable__row--band .reptable__cell {
    height: 54px;
    padding: 13px;
    background: var(--v3-green);
    font-size: 15px;
    font-weight: 300;
    color: var(--sand);
}

.perfframe .reptable__row--total > .reptable__cell {
    height: 70px;
    padding-block: 0;
    border: 0;
    background: var(--v3-green);
    text-align: start;
    color: var(--sand);
}

.perfframe .reptable--details .reptable__row--total > .reptable__cell {
    height: 87px;
    border-block-start: 12px solid var(--paper);
}

.reptable__totallabel {
    font-size: 18px;
    font-weight: 600;
    color: var(--mustard);
}

.perfframe .reptable__row--total .reptable__figure,
.boxreport tfoot .reptable__figure {
    font-weight: 600;
    color: var(--sand);
}

.reptable__mark {
    margin-inline-start: 2px;
    color: var(--mustard);
}

.reptable__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-block-start: 18px;
}

.reptable__key {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    margin-inline-start: auto;
    font-size: 11px;
    line-height: 1.6;
    color: var(--v3-text);
    order: -1;
}

.reptable__keymark {
    width: 18px;
    height: 3px;
    background: var(--mustard);
}

.reptable__footnote {
    margin: 0;
    font-size: 11px;
    line-height: 1.8;
    color: var(--v3-hint);
}

/* ---- annual: the intro beside the series picker (628:8074) */

.perfframe .reptop--annual2 {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.perfframe .reptop--annual2 .reptop__intro {
    flex: 1 1 auto;
}

.repfield {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 7px;
    width: 180px;
    font-family: var(--font-lama);
}

.repfield__label {
    font-size: 12px;
    line-height: 1.3;
    color: var(--v3-text);
}

.repfield__box {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    border: 1px solid var(--v3-field-line);
    background: var(--paper);
}

.repfield__box:focus-within {
    border-color: var(--v3-green);
    box-shadow: 0 0 0 1px var(--v3-green);
}

.repfield__select {
    width: 100%;
    height: 100%;
    padding-inline: 16px 40px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--v3-ink);
    appearance: none;
    cursor: pointer;
    outline: 0;
}

.repfield__caret {
    position: absolute;
    inset-inline-end: 16px;
    width: 10px;
    height: 6px;
    color: var(--v3-ink);
    pointer-events: none;
}

@media (max-width: 700px) {
    .perfframe .reptop--annual2 {
        flex-direction: column;
        gap: 18px;
    }
}

/* ---- annual: the chart card (628:8086) */

.repchart2 {
    margin-block-start: 28px;
    padding: 29px 27px 0;
    border: 1px solid var(--stone);
    background: var(--sand);
    font-family: var(--font-lama);
}

.repchart2__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-block-end: 18px;
}

.repchart2__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.25rem, 1.67vw, 1.5rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--v3-ink);
}

.repchart2__unit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 13px;
    color: var(--v3-text);
}

.repchart2__unit[hidden],
.repchart2__figure[hidden],
.repchart2__foot[hidden],
.repchart2__coverage[hidden] {
    display: none;
}

.repchart2__unitglyph {
    width: 11.4px;
    height: 9.1px;
}

.repchart2__figure {
    margin: 0;
}

.repchart2__plot {
    position: relative;
}

.repchart2__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.repchart2__grid {
    stroke: var(--stone);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}

.repchart2__fill {
    fill: var(--v3-green);
    fill-opacity: 0.12;
}

.repchart2__line {
    fill: none;
    stroke: var(--v3-green);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.repchart2__tick,
.repchart2__year {
    position: absolute;
    font-size: clamp(10px, 0.88vw, 12.6px);
    line-height: 1;
    color: var(--v3-text);
    white-space: nowrap;
}

.repchart2__tick {
    transform: translateY(-50%);
}

.repchart2__year {
    top: 92%;
    transform: translateX(-50%);
}

.repchart2__dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--v3-green);
    transform: translate(-50%, -50%);
}

.repchart2__dot--partial {
    border: 2px solid var(--v3-green);
    background: var(--sand);
}

.repchart2__value {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(11px, 1.02vw, 14.7px);
    line-height: 1;
    color: var(--v3-green);
    white-space: nowrap;
    transform: translate(-50%, calc(-100% - 12px));
}

.repchart2__glyph {
    width: 11.4px;
    height: 9.1px;
}

.repchart2__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-block-start: 6px;
    padding-block: 23px;
    border-block-start: 1px solid var(--stone);
}

.repchart2__stat {
    display: flex;
    align-items: center;
    gap: 17px;
}

.repchart2__big {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: clamp(1.75rem, 2.57vw, 2.3125rem);
    font-weight: 300;
    line-height: 1.4;
    color: var(--v3-green);
}

.repchart2__bigglyph {
    width: 32px;
    height: 26px;
}

.repchart2__na {
    font-size: 15px;
    color: var(--v3-text);
}

.repchart2__statlabel {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: 11px;
    line-height: 1.8;
    color: var(--v3-ink);
}

.repchart2__statsub {
    font-size: 10px;
    color: var(--v3-text);
}

.repchart2__coverage {
    margin: 0;
    padding-block: 0 18px;
    font-size: 11px;
    line-height: 1.8;
    color: var(--v3-hint);
}

/* ---- annual: «المبيعات السنوية» (628:8192) */

.repannual {
    margin-block-start: 45px;
    font-family: var(--font-lama);
}

.repannual__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: 22px;
}

.repannual__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.375rem, 1.94vw, 1.75rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--v3-ink);
}

.perfframe .reptable--annual {
    margin-block-start: 0;
}

.repannual__year + .repannual__year {
    margin-block-start: 40px;
}

.repannual__strip {
    margin: 0;
    padding: 13px 18px 14px;
    background: var(--v3-ink);
    font-size: 17px;
    line-height: 1.25;
    color: var(--sand);
}

.perfframe .reptable--annual .reptable__table {
    table-layout: fixed;
    min-width: 640px;
}

.perfframe .reptable--annual .reptable__row--head .reptable__cell {
    height: 58px;
    border-block-end: 1px solid var(--stone);
    background: transparent;
    color: var(--v3-text);
}

.perfframe .reptable--annual .reptable__row--head .reptable__cell:nth-child(1) { width: 9%; }
.perfframe .reptable--annual .reptable__row--head .reptable__cell:nth-child(2) { width: 26%; }
.perfframe .reptable--annual .reptable__row--head .reptable__cell:nth-child(3) { width: 17%; }
.perfframe .reptable--annual .reptable__row--head .reptable__cell:nth-child(4) { width: 20%; }

.perfframe .reptable--annual tbody .reptable__row .reptable__cell {
    height: 65px;
    padding-block: 0;
    font-size: 12px;
    white-space: normal;
}

.perfframe .reptable--annual tbody .reptable__cell:first-child {
    font-size: 13px;
}

.perfframe .reptable--annual tbody .reptable__cell--film {
    font-size: 15px;
}

.perfframe .reptable--annual .reptable__figure {
    font-weight: 400;
    color: var(--v3-ink);
}

.perfframe .reptable--annual .reptable__empty {
    margin: 0;
    padding: 1.5rem 0;
    font-size: 13px;
    color: var(--v3-text);
    text-align: start;
}

/* «ملخص عام 2019»: the market's two figures and the Saudi share (628:8340). */
.repsummary {
    margin-block-start: 27px;
    padding: 24px;
    border: 1px solid var(--stone);
    background: var(--sand);
}

.repsummary__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.125rem, 1.53vw, 1.375rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--v3-ink);
}

.repsummary__sub {
    margin: 7px 0 0;
    font-size: 13px;
    color: var(--v3-text);
}

.repsummary__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px;
    margin: 23px 0 0;
}

.repsummary__cell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-block: 14px;
    border-block-start: 1px solid var(--stone);
}

.repsummary__label {
    font-size: 12px;
    color: var(--v3-text);
}

.repsummary__value {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: clamp(1.375rem, 1.94vw, 1.75rem);
    line-height: 1.2;
    color: var(--v3-text);
}

.repsummary__glyph {
    width: 17.6px;
    height: 19.6px;
}

.repsummary__glyph--ticket {
    width: 24.5px;
    height: 19.6px;
}

.repsummary__share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding-block-start: 17px;
    border-block-start: 1px solid var(--stone);
}

.repsummary__sharelabel {
    font-size: 13px;
    line-height: 1.7;
    color: var(--v3-ink);
}

.repsummary__sharevalue {
    font-size: clamp(1.5rem, 2.08vw, 1.875rem);
    font-weight: 300;
    color: var(--v3-green);
}

@media (max-width: 700px) {
    .repsummary__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

/* ---- box office: the sand head band (628:10935) */

.boxhead {
    font-family: var(--font-lama);
}

.boxhead__band {
    background: var(--sand);
}

.boxhead__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-block: 54px 40px;
}

.boxhead__eyebrow {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--v3-hint);
}

.boxhead__title {
    margin: 11px 0 0;
    font-family: inherit;
    font-size: clamp(1.625rem, 2.08vw, 1.875rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--v3-ink);
}

.boxhead__line {
    margin: 11px 0 0;
    font-size: 13px;
    color: var(--v3-hint);
}

.boxhead__updated {
    margin: 20px 0 0;
    font-size: 11px;
    line-height: 1.8;
    color: var(--v3-hint);
}

.boxhead__share {
    margin-block-start: 28px;
}

/* ---- box office: the yearly table (628:10956) */

.boxreport {
    padding-block: 56px 64px;
    font-family: var(--font-lama);
}

.boxreport__title {
    margin: 0 0 36px;
    font-family: inherit;
    font-size: clamp(1.375rem, 1.81vw, 1.625rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--v3-ink);
}

.boxreport__scroll {
    overflow-x: auto;
}

.boxreport__table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    table-layout: fixed;
}

.boxreport__table th,
.boxreport__table td {
    padding: 0 8px;
    border-block-end: 1px solid var(--stone);
    text-align: start;
    vertical-align: middle;
}

.boxreport__table thead th {
    height: 52px;
    font-size: 11px;
    font-weight: 400;
    color: var(--v3-text);
}

.boxreport__table thead th:nth-child(1) { width: 16%; }
.boxreport__table thead th:nth-child(2) { width: 22%; }
.boxreport__table thead th:nth-child(3) { width: 28%; }

.boxreport__hint {
    font-size: 10px;
}

.boxreport__table tbody tr > * {
    height: 70px;
    font-size: 14px;
    font-weight: 400;
    color: var(--v3-ink);
}

.boxreport__table tbody tr:nth-child(odd) > * {
    background: var(--sand);
}

.boxreport__table tbody tr:nth-child(even) > * {
    background: var(--paper);
}

.boxreport__table .boxreport__year {
    font-size: 16px;
}

.boxreport__mark {
    color: var(--v3-rust);
}

/* «الأعلى»: the year's figure in gold with a small tag after it (628:11066). */
.boxreport__peak .reptable__figure {
    font-weight: 500;
    color: #9a7419;
}

.boxreport__tag {
    display: inline-block;
    margin-inline-start: 10px;
    padding: 1px 8px;
    background: rgba(223, 175, 59, 0.2);
    font-size: 10px;
    line-height: 1.6;
    color: #8a6612;
    vertical-align: middle;
}

.boxreport__table tfoot tr > * {
    height: 71px;
    border: 0;
    background: var(--v3-green);
    font-size: 14px;
    font-weight: 600;
    color: var(--sand);
}

.boxreport__table tfoot th {
    font-size: 18px;
    color: var(--mustard);
}

.boxreport__notes {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
    line-height: 1.9;
    color: var(--v3-hint);
}

/* The strips paint over the cell, so an open top-ten panel draws its gold edge on itself. */
.perfframe .reptable__row--detail.reptable__row--top .repdetail {
    border-inline-start: 3px solid var(--mustard);
}

.boxreport .reptable__figure--tickets .reptable__glyph {
    width: 12.25px;
    height: 9.8px;
}

/* =====================================================================================
   October 2026 redesign — contact (Figma 628:12543, success 628:13063, phase 6)
   ===================================================================================== */

/* The form card at the start (697 of 1264), the dark channels card at the end (536), 30 apart. */
.contactv3 {
    display: grid;
    grid-template-columns: minmax(0, 697fr) minmax(0, 536fr);
    align-items: start;
    gap: 30px;
    padding-block: 44px 32px;
    font-family: var(--font-lama);
}

.contactv3__form {
    padding: 31px 32px 32px;
    border: 1px solid var(--stone);
    background: var(--sand);
    scroll-margin-block-start: 1.5rem;
}

.contactv3__title {
    margin: 0 0 27px;
    font-family: inherit;
    font-size: clamp(1.375rem, 1.88vw, 1.6875rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--v3-ink);
}

.contactv3__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.contactv3__grid .lfield + .lfield,
.contactv3__grid .formerrors {
    margin: 0;
}

.contactv3__wide {
    grid-column: 1 / -1;
}

.contactv3 .lfield__box {
    min-height: 51px;
}

.contactv3 .lfield__control {
    font-size: 13px;
}

.contactv3 .lfield__select {
    font-size: 15px;
}

.contactv3 textarea.lfield__control {
    min-height: 144px;
    padding-block: 14px;
}

.contactv3__actions {
    margin-block-start: 6px;
}

.contactv3__actions .cta {
    gap: 22px;
    min-height: 49px;
    padding-inline: 24px;
}

/* The channels: gold icon, ivory title and value, a grey note, hairlines between (628:12564). */
.contactv3__info {
    padding: 16px 30px;
    background: var(--v3-ink);
    color: var(--sand);
}

.cinfo3 {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ccard3 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-block: 24px;
}

.ccard3 + .ccard3 {
    border-block-start: 1px solid rgba(201, 195, 182, 0.24);
}

.ccard3__icon {
    flex: none;
    width: 24px;
    height: 24px;
    margin-block-start: 2px;
    color: var(--mustard);
}

.ccard3__title {
    margin: 0 0 7px;
    font-size: 19px;
    line-height: 1.5;
    color: var(--sand);
}

.ccard3__value {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
    color: var(--sand);
}

.ccard3__note {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.9;
    color: var(--stone);
}

/* «تابعنا على منصات التواصل الاجتماعي»: five equal outlined tiles (628:12637). */
.csocial3 {
    padding-block: 19px 64px;
    font-family: var(--font-lama);
}

.csocial3__title {
    margin: 0 0 25px;
    font-family: inherit;
    font-size: clamp(1.25rem, 1.74vw, 1.5625rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--v3-ink);
}

.csocial3__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.csocial3__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 52px;
    padding: 15px 24px;
    border: 1px solid var(--stone);
    font-size: 14px;
    color: var(--v3-green);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.csocial3__tile:hover,
.csocial3__tile:focus-visible {
    border-color: var(--v3-green);
    background: rgba(30, 107, 102, 0.06);
}

.csocial3__icon {
    width: 20px;
    height: 20px;
}

/* «وصلت رسالتك»: the green check in a ring, the line, «متابعة التصفح» (628:13220). */
.sentcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 21px;
    padding-block: 28px 6px;
    text-align: center;
}

.sentcard__mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--v3-green);
    border-radius: 50%;
    color: var(--v3-green);
}

.sentcard__check {
    width: 26px;
    height: 26px;
}

.sentcard__line {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--v3-text);
}

@media (max-width: 900px) {
    .contactv3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .contactv3__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contactv3__form {
        padding: 24px 18px;
    }
}

/* The spam-trap field (spatie/laravel-honeypot) hides itself at left: -10000px. On a right-to-left
   page overflow to the left is scrollable, so the page grew 10,000px of blank width to the side.
   Kept where it is instead, clipped to nothing — still out of sight and out of the tab order. */
div[aria-hidden="true"][style*="-10000px"] {
    left: 0 !important;
    clip-path: inset(50%);
}

/* ==========================================================================
   October 2026 redesign — break-even calculator (Figma 628:5419, result 628:5584,
   consultation 628:5787, phase 7)
   ========================================================================== */

/* --- the split hero: text on the dark band, the cinema photo at the end (628:5426) */

.calchero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 36%);
    min-height: 330px;
    background: var(--navy);
    font-family: var(--font-lama);
}

.calchero__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding-block: 3rem;
    padding-inline: var(--frame-pad) clamp(1.5rem, 4vw, 4.5rem);
}

.calchero__eyebrow {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mustard);
}

.calchero__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(2.125rem, 3.75vw, 3.375rem);
    font-weight: 300;
    line-height: 1.35;
    color: var(--sand);
}

.calchero__intro {
    max-width: 763px;
    margin: 0;
    padding-block-start: 8px;
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.9;
    color: var(--stone);
}

/* height 0 + min-height 100%: the photo fills the band without its own tall shape setting it. */
.calchero__photo {
    width: 100%;
    height: 0;
    min-height: 100%;
    max-width: none;
    object-fit: cover;
}

/* --- the page body */

.calc3 {
    padding-block: 54px 60px;
    font-family: var(--font-lama);
}

/* --- «مدخلات الحساب»: the sand card (628:5596) */

.calcin {
    padding: 37px 41px 30px;
    border: 1px solid var(--sand-line);
    background: var(--sand);
}

.calcin__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
}

.calcin__eyebrow {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--taupe);
}

.calcin__title,
.calcout__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.625rem, 2.22vw, 2rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--v3-ink);
}

.calcin__step {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--v3-text);
}

.calcin__errors {
    margin-block-start: 24px;
}

.calcin__fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 30px;
    margin-block-start: 33px;
}

.c3field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.c3field__icon {
    width: 27px;
    height: 27px;
    color: var(--v3-green);
}

.c3field__label {
    margin-block-start: 10px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--v3-ink);
}

.c3field__error {
    margin-block-start: 7px;
}

/* A budget: the riyal sign, then the amount, read left to right in both languages. */
.c3money {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 59px;
    margin-block-start: 13px;
    padding-inline: 16px 14px;
    border: 1px solid #b3ad9f;
    background: var(--paper);
    color: var(--v3-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.c3money:focus-within {
    border-color: var(--v3-green);
    box-shadow: 0 0 0 1px var(--v3-green);
}

.c3money.is-invalid {
    border-color: var(--v3-rust);
}

.c3money__sign {
    flex: none;
    width: 15px;
    height: 17px;
}

.c3money__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.6;
    color: inherit;
    text-align: left;
    outline: none;
}

/* The commission: value and «من الإيرادات», the track, the bounds under its ends. */
.c3rate {
    width: 100%;
    margin-block-start: 6px;
}

.c3rate__now {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}

.c3rate__value {
    font-size: 22px;
    line-height: 1.6;
    color: var(--v3-green);
}

.c3rate__of {
    font-size: 10px;
    line-height: 1.6;
    color: var(--v3-ink);
}

.c3rate__input {
    display: block;
    width: 100%;
    height: 16px;
    margin: 6px 0 2px;
    appearance: none;
    background: none;
    cursor: pointer;
}

/* --progress is set by Blade for the first paint and by web.js from there on. The bar fills from
   the lower bound, which sits at the start of the line: the right on an Arabic page. */
.c3rate__input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to left, var(--v3-green) var(--progress, 0%), #d9d6cf var(--progress, 0%));
}

.c3rate__input::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to left, var(--v3-green) var(--progress, 0%), #d9d6cf var(--progress, 0%));
}

[dir="ltr"] .c3rate__input::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--v3-green) var(--progress, 0%), #d9d6cf var(--progress, 0%));
}

[dir="ltr"] .c3rate__input::-moz-range-track {
    background: linear-gradient(to right, var(--v3-green) var(--progress, 0%), #d9d6cf var(--progress, 0%));
}

.c3rate__input::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-block-start: -6px;
    border: 0;
    border-radius: 50%;
    background: var(--v3-green);
    appearance: none;
}

.c3rate__input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: var(--v3-green);
}

.c3rate__input:focus-visible {
    outline: 2px solid var(--v3-green);
    outline-offset: 4px;
}

.c3rate__ends {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
    color: var(--v3-ink);
}

/* The gold bar: «احسب التعادل», or «استعادة القيم الافتراضية» once there is a result. */
.calcbar3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 19px;
    width: 100%;
    min-height: 55px;
    margin-block-start: 30px;
    padding: 0 24px;
    border: 1px solid var(--mustard);
    background: var(--mustard);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--v3-ink);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.calcbar3:hover,
.calcbar3:focus-visible {
    border-color: #c99a2c;
    background: #c99a2c;
    color: var(--v3-ink);
}

.calcbar3:focus-visible {
    outline: 2px solid var(--v3-ink);
    outline-offset: 2px;
}

.calcbar3__icon {
    width: 20px;
    height: 20px;
}

.calcin__recalc {
    margin-block-start: 12px;
}

.calcin__live:empty {
    display: none;
}

.calcin__live {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--v3-text);
}

.calcin__privacy {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--taupe);
}

/* --- «تعادلك السينمائي هو»: the dark panel and its two gold figures (628:5656) */

.calcout {
    padding-block-start: 48px;
}

.calcout__step {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--taupe);
}

.calcout__title {
    margin-block-start: 12px;
}

.calcout__panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: 36px;
    padding: 39px 48px 36px;
    background: var(--navy);
    transition: opacity 0.2s ease;
}

.calcout.is-updating .calcout__panel {
    opacity: 0.6;
}

.calcout__figure {
    min-width: 0;
    padding-inline-end: 20px;
}

.calcout__figure + .calcout__figure {
    padding-inline: 45px 0;
    border-inline-start: 1px solid var(--navy-line);
}

.calcout__label {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--stone);
}

.calcout__icon {
    flex: none;
    width: 26px;
    height: 20px;
    margin-block-start: 10px;
    color: var(--mustard);
}

.calcout__icon--money {
    height: 18px;
}

.calcout__value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 16px 0 0;
    font-size: clamp(2.25rem, 3.75vw, 3.375rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--mustard);
    font-variant-numeric: tabular-nums;
}

html[dir="ltr"] .calcout__value {
    justify-content: flex-start;
}

.calcout__glyph--riyal {
    width: 0.63em;
    height: 0.7em;
}

.calcout__glyph--ticket {
    width: 0.875em;
    height: 0.7em;
}

.calcout__alt {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--stone);
    text-align: right;
}

html[dir="ltr"] .calcout__alt {
    text-align: left;
}

.calcout__disclaimer {
    margin: 21px 0 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--v3-text);
}

.calcout__consult {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-block-start: 36px;
    text-align: center;
}

.calcout__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-width: 195px;
    min-height: 54px;
    padding: 0 25px;
    border: 1px solid var(--mustard);
    background: var(--mustard);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--v3-ink);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.calcout__cta:hover,
.calcout__cta:focus-visible {
    border-color: #c99a2c;
    background: #c99a2c;
}

.calcout__cta:focus-visible {
    outline: 2px solid var(--v3-ink);
    outline-offset: 2px;
}

.calcout__cta-icon {
    width: 20px;
    height: 20px;
}

.calcout__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--v3-text);
}

.calcout__note--done {
    color: var(--v3-green);
}

.calcout__print {
    margin-block-start: 4px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--taupe);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.calcout__print:hover,
.calcout__print:focus-visible {
    color: var(--v3-green);
}

/* --- the consultation card (628:5906) */

.consult3 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.consult3 .formerrors {
    margin-block-end: 18px;
}

.consult3 .lfield + .lfield {
    margin-block-start: 14px;
}

.consult3__optin {
    margin-block-start: 18px;
}

.consult3 .dialog__actions {
    margin-block-start: 6px;
}

@media (max-width: 1000px) {
    .calcin__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .c3field--rate {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .calchero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .calchero__photo {
        display: none;
    }

    .calcin {
        padding: 24px 18px;
    }

    .calcin__fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .calcout__panel {
        grid-template-columns: minmax(0, 1fr);
        padding: 28px 22px;
    }

    .calcout__figure {
        padding-inline-end: 0;
    }

    .calcout__figure + .calcout__figure {
        margin-block-start: 24px;
        padding: 24px 0 0;
        border-inline-start: 0;
        border-block-start: 1px solid var(--navy-line);
    }
}

/* ==========================================================================
   October 2026 redesign — /films and «دليل الأفلام السعودية» (Figma 628:1423,
   628:5932, 628:6235, phase 8)
   ========================================================================== */

/* --- the page head with a control at its far end (/films' «حالة العرض») */

.pagehead__body--aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 50px;
    row-gap: 12px;
    align-items: start;
}

.pagehead__body--aside > :not(.pagehead__aside) {
    grid-column: 1;
}

.pagehead__aside {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
}

/* --- a boxed filter select (628:1440): the label over a light 48px box */

.boxsel {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    font-family: var(--font-lama);
}

.boxsel__label {
    font-size: 13px;
    line-height: 1.6;
    color: var(--v3-text);
}

.boxsel__box {
    position: relative;
    display: block;
}

.boxsel__control {
    width: 100%;
    min-width: 107px;
    height: 48px;
    padding-block: 0;
    padding-inline: 16px 44px;
    border: 1px solid #aaa598;
    border-radius: 0;
    background: var(--paper);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    color: var(--v3-ink);
    appearance: none;
    cursor: pointer;
}

.boxsel__control:focus-visible {
    outline: none;
    border-color: var(--v3-green);
    box-shadow: 0 0 0 1px var(--v3-green);
}

.boxsel__caret {
    position: absolute;
    inset-inline-end: 17px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-block-start: -8px;
    color: var(--v3-ink);
    pointer-events: none;
}

.boxsel--wide {
    width: 200px;
}

/* «تطبيق»: only drawn when web.js is missing (it sends the form on change). */
.films3__apply,
.guide__apply {
    align-self: end;
    min-height: 48px;
}

/* --- /films: the list head (628:1452) */

.films3__screen {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.films3__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 32px;
    padding-block: 68px 36px;
    font-family: var(--font-lama);
}

.films3__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.625rem, 2.22vw, 2rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--v3-ink);
}

.films3__count {
    margin-inline-start: 10px;
    font-size: 0.62em;
    font-weight: 300;
    color: var(--taupe);
}

.films3__intro {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--taupe);
}

.films3__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px;
}

/* --- /films: the numbered list (628:1476) */

.films3 {
    padding-block-end: 56px;
    font-family: var(--font-lama);
}

.films3__empty,
.guide__empty {
    margin: 0;
    padding: 48px 0;
    font-size: 15px;
    color: var(--v3-text);
    text-align: center;
}

.films3table {
    width: 100%;
    border-collapse: collapse;
    border-block-start: 1px solid var(--sand-line);
}

.films3table__th {
    padding: 17px 10px 16px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--v3-text);
    text-align: start;
    white-space: nowrap;
}

.films3table__th--number {
    width: 26px;
    padding-inline: 16px 10px;
    text-align: center;
}

.films3table__row:nth-child(odd) {
    background: var(--sand);
}

.films3table__row:nth-child(even) {
    background: var(--paper);
}

.films3table__cell {
    padding: 28px 10px;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--v3-ink);
    text-align: start;
}

.films3table__cell--number {
    width: 26px;
    padding-inline: 16px 10px;
    font-size: 17px;
    font-weight: 300;
    color: var(--v3-green);
    text-align: center;
}

.films3table__cell--poster {
    width: 96px;
}

.films3table__poster {
    display: grid;
    place-items: center;
    width: 96px;
    height: 138px;
    overflow: hidden;
    border: 1px solid var(--sand-line);
    background: var(--sand);
}

.films3table__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.films3table__noposter {
    width: 28px;
    height: 28px;
    color: var(--taupe);
}

.films3table__cell--name {
    width: 38%;
}

.films3table__title {
    font-size: 24px;
    line-height: 1.4;
    color: var(--v3-ink);
}

.films3table__title:hover,
.films3table__title:focus-visible {
    color: var(--v3-green);
}

.films3table__blurb {
    display: -webkit-box;
    margin: 8px 0 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
    line-height: 1.8;
    color: var(--v3-text);
}

.films3table__credits {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: #6a685f;
}

.films3table__caption {
    display: block;
    margin-block-end: 10px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--v3-text);
}

/* The genre's caption is for the phone cards; the table head names it on a wide screen. */
.films3table__cell--genre .films3table__caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.films3table__cell--countdown .films3table__caption {
    color: var(--taupe);
}

.films3table__countdown {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
    color: var(--v3-green);
}

.films3table__days {
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
}

.films3table__cell--status {
    width: 155px;
    padding-inline-end: 16px;
}

.films3status {
    display: inline-block;
    padding: 10px 11px;
    border: 1px solid var(--sand-line);
    font-size: 11px;
    line-height: 1.3;
    color: var(--v3-text);
    white-space: nowrap;
}

.films3status--live {
    border-color: var(--v3-green);
    background: var(--v3-green);
    color: var(--sand);
}

.films3status--live:hover,
.films3status--live:focus-visible {
    border-color: var(--v3-green-deep);
    background: var(--v3-green-deep);
    color: var(--sand);
}

/* --- the guide: the photo hero (628:5939) */

.guidehero {
    display: flex;
    align-items: center;
    min-height: 330px;
    background:
        linear-gradient(to left, rgba(18, 22, 26, 0.88) 0%, rgba(18, 22, 26, 0.55) 45%, rgba(18, 22, 26, 0.15) 100%),
        var(--guide-hero) center / cover no-repeat,
        var(--navy);
    font-family: var(--font-lama);
}

[dir="ltr"] .guidehero {
    background:
        linear-gradient(to right, rgba(18, 22, 26, 0.88) 0%, rgba(18, 22, 26, 0.55) 45%, rgba(18, 22, 26, 0.15) 100%),
        var(--guide-hero) center / cover no-repeat,
        var(--navy);
}

.guidehero__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding-block: 3rem;
}

.guidehero__eyebrow {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mustard);
}

.guidehero__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(2.125rem, 3.75vw, 3.375rem);
    font-weight: 300;
    line-height: 1.35;
    color: var(--sand);
}

.guidehero__intro {
    margin: 0;
    padding-block-start: 8px;
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.9;
    color: var(--stone);
}

/* --- the guide: the filter bar (628:5945–628:5978) */

.guide {
    padding-block: 41px 64px;
    font-family: var(--font-lama);
}

.guide__bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
    align-items: end;
    gap: 20px;
    padding-block-end: 32px;
    border-block-end: 1px solid var(--sand-line);
}

.guide__bar .guide__apply {
    grid-column: 1 / -1;
    justify-self: start;
}

.guide__view,
.guide__search {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.guide__view .boxsel__label {
    color: var(--v3-ink);
}

.guideview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guideview__option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border: 1px solid var(--sand-line);
    font-size: 13px;
    line-height: 1.6;
    color: var(--v3-ink);
}

.guideview__option + .guideview__option {
    border-inline-start: 0;
}

.guideview__option:hover,
.guideview__option:focus-visible {
    color: var(--v3-green);
}

.guideview__option.is-current {
    border-color: var(--v3-green);
    background: var(--v3-green);
    color: var(--sand);
}

.guideview__icon {
    width: 16px;
    height: 16px;
}

.guidesearch {
    display: flex;
    align-items: center;
    height: 48px;
    border: 1px solid var(--sand-line);
}

.guidesearch:focus-within {
    border-color: var(--v3-green);
    box-shadow: 0 0 0 1px var(--v3-green);
}

.guidesearch__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 13px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--v3-ink);
    outline: none;
}

.guidesearch__input::placeholder {
    color: #757575;
}

.guidesearch__go {
    display: grid;
    place-items: center;
    width: 44px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--v3-text);
    cursor: pointer;
}

.guidesearch__go:hover,
.guidesearch__go:focus-visible {
    color: var(--v3-green);
}

.guidesearch__icon {
    width: 16px;
    height: 16px;
}

/* --- the guide: «صفحة الفيلم ←» */

.guidelink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--v3-ink);
}

.guidelink:hover,
.guidelink:focus-visible {
    color: var(--v3-green);
}

.guidelink__arrow {
    width: 13px;
    height: 12px;
}

[dir="ltr"] .guidelink__arrow {
    transform: scaleX(-1);
}

/* --- the guide: posters, five across (628:5979) */

.guidegrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.guidecard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--sand-line);
    background: var(--sand);
}

.guidecard__poster {
    display: grid;
    place-items: center;
    aspect-ratio: 232 / 300;
    overflow: hidden;
    background: var(--stone);
}

.guidecard__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.guidecard:hover .guidecard__poster img {
    transform: scale(1.03);
}

.guidecard__noposter {
    width: 36px;
    height: 36px;
    color: var(--v3-text);
}

.guidecard__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    padding: 17px 18px 19px;
}

.guidecard__title {
    margin: 0;
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--v3-ink);
}

.guidecard__screen {
    margin: 9px 0 0;
    font-size: 12px;
    line-height: 2.1;
    color: var(--v3-green);
}

.guidecard__date {
    margin: 4px 0 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--v3-ink);
}

.guidecard .guidelink {
    margin-block-start: auto;
}

/* --- the guide: the list (628:6305) */

.guidelist {
    width: 100%;
    margin-block-start: 34px;
    border-collapse: collapse;
}

.guidelist__th {
    padding: 17px 10px 16px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--v3-text);
    text-align: start;
    white-space: nowrap;
}

.guidelist__th--film {
    padding-inline-start: 16px;
}

.guidelist__row:nth-child(odd) {
    background: var(--sand);
}

.guidelist__row:nth-child(even) {
    background: var(--paper);
}

.guidelist__row > * {
    padding: 24px 10px;
    vertical-align: middle;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--v3-ink);
    text-align: start;
}

.guidelist__number {
    width: 26px;
    padding-inline-start: 16px;
    font-size: 17px;
    font-weight: 300;
    color: var(--v3-green);
    text-align: center;
}

.guidelist__thumb {
    width: 86px;
}

.guidelist__thumb img,
.guidelist__noposter {
    display: grid;
    place-items: center;
    width: 86px;
    height: 113px;
    object-fit: cover;
    background: var(--stone);
}

.guidelist__noicon {
    width: 24px;
    height: 24px;
    color: var(--v3-text);
}

.guidelist__title {
    font-size: 18px;
}

.guidelist__screen {
    color: var(--v3-green);
}

.guide__pager {
    margin-block-start: 40px;
}

@media (max-width: 1100px) {
    .guidegrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .guide__bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .pagehead__body--aside {
        grid-template-columns: minmax(0, 1fr);
    }

    .pagehead__aside {
        grid-column: 1;
        grid-row: auto;
        order: 4;
    }

    .boxsel--wide {
        width: 100%;
    }

    .guidegrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* The numbered list becomes a card per film: the poster beside everything else. */
    .films3table,
    .films3table tbody,
    .films3table__row,
    .films3table__cell {
        display: block;
    }

    .films3table thead {
        display: none;
    }

    .films3table__row {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr);
        column-gap: 16px;
        padding: 20px 16px;
    }

    .films3table__cell {
        grid-column: 2;
        width: auto;
        padding: 0 0 12px;
    }

    .films3table__cell--number {
        grid-column: 1 / -1;
        padding: 0 0 8px;
        text-align: start;
    }

    .films3table__cell--poster {
        grid-column: 1;
        grid-row: 2 / span 5;
    }

    .films3table__poster {
        width: 80px;
        height: 115px;
    }

    .films3table__title {
        font-size: 20px;
    }

    .films3table__cell--genre .films3table__caption {
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
    }

    .films3table__caption {
        margin-block-end: 4px;
    }

    /* The guide's list keeps number, thumb and title on a line and the facts under them. */
    .guidelist,
    .guidelist tbody,
    .guidelist__row,
    .guidelist__row > * {
        display: block;
    }

    .guidelist thead {
        display: none;
    }

    .guidelist__row {
        display: grid;
        grid-template-columns: 26px 70px minmax(0, 1fr);
        column-gap: 12px;
        padding: 16px;
    }

    .guidelist__row > * {
        grid-column: 3;
        width: auto;
        padding: 0 0 4px;
    }

    .guidelist__number {
        grid-column: 1;
        grid-row: 1 / span 5;
        padding: 0;
    }

    .guidelist__thumb {
        grid-column: 2;
        grid-row: 1 / span 5;
    }

    .guidelist__thumb img,
    .guidelist__noposter {
        width: 70px;
        height: 92px;
    }
}

@media (max-width: 600px) {
    .guidegrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .guide__bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .guidecard__body {
        padding: 12px;
    }

    .guidecard__title {
        font-size: 16px;
    }

    .films3__filters {
        width: 100%;
    }

    .films3__filters .boxsel {
        flex: 1 1 0;
    }
}

/* «تطبيق» is for a visitor without web.js; .cta's display would otherwise beat [hidden]. */
.films3__apply[hidden],
.guide__apply[hidden] {
    display: none;
}

/* --- /films: the green newsletter band (628:1717) */

.newsband3 {
    background: var(--v3-green);
    font-family: var(--font-lama);
}

.newsband3__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    padding-block: 43px;
}

.newsband3__heading {
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.375rem, 1.8vw, 1.625rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--sand);
}

.newsband3__sub {
    margin: 9px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--sand);
    opacity: 0.85;
}

.newsband3__form {
    width: min(100%, 466px);
}

.newsband3__box {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.newsband3__field {
    flex: 1 1 auto;
    min-width: 0;
    height: 57px;
    padding: 0 19px;
    border: 1px solid rgba(239, 234, 224, 0.5);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--sand);
    outline: none;
}

.newsband3__field::placeholder {
    color: rgba(239, 234, 224, 0.8);
}

.newsband3__field:focus-visible {
    border-color: var(--sand);
}

.newsband3__btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 144px;
    margin-block: 1.5px;
    border: 0;
    background: var(--mustard);
    font-family: inherit;
    font-size: 14px;
    color: var(--v3-ink);
    cursor: pointer;
}

.newsband3__btn:hover,
.newsband3__btn:focus-visible {
    background: #c99a2c;
}

.newsband3__arrow {
    width: 13px;
    height: 12px;
}

[dir="ltr"] .newsband3__arrow {
    transform: scaleX(-1);
}

.newsband3__note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--sand);
}

.newsband3__note--consent {
    opacity: 0.7;
}

.newsband3__note--error {
    color: #ffd9c7;
}

/* ==========================================================================
   October 2026 redesign — the film page (Figma 628:1877, trailer 628:3598, phase 9)
   ========================================================================== */

.filmpage3 {
    padding-block-end: 56px;
    font-family: var(--font-lama);
}

/* --- the dark card (628:1888) */

.filmhero3 {
    padding-block-start: 28px;
}

.filmhero3__card {
    position: relative;
    display: grid;
    grid-template-areas: "body media";
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 478px;
    background: var(--navy);
}

.filmhero3__media {
    grid-area: media;
    display: flex;
    min-width: 0;
}

.filmhero3__still {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 330px;
    margin-block: 35px;
    overflow: hidden;
    background: #1d2227;
}

.filmhero3__stillimg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.filmhero3__play {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(239, 234, 224, 0.6);
    border-radius: 50%;
    background: rgba(18, 22, 26, 0.64);
    color: var(--sand);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.filmhero3__play:hover,
.filmhero3__play:focus-visible {
    background: var(--v3-green);
    transform: scale(1.05);
}

.filmhero3__playicon {
    width: 24px;
    height: 24px;
}

[dir="rtl"] .filmhero3__playicon,
[dir="rtl"] .filmhero3__trailericon {
    transform: scaleX(-1);
}

.filmhero3__poster {
    flex: 0 0 210px;
    min-width: 0;
    width: 210px;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.filmhero3__body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 33px;
}

.filmhero3__eyebrow {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mustard);
}

.filmhero3__title {
    margin: 14px 0 0;
    font-family: inherit;
    font-size: clamp(2rem, 2.8vw, 2.5rem);
    font-weight: 300;
    line-height: 1.3;
    color: var(--sand);
}

.filmhero3__logo {
    display: block;
    width: auto;
    max-width: 220px;
    height: auto;
    max-height: 82px;
}

.filmhero3__synopsis {
    max-width: 640px;
    margin: 22px 0 0;
    font-size: 16px;
    line-height: 1.9;
    color: var(--stone);
}

.filmhero3__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 13px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
    line-height: 1.6;
    color: var(--stone);
}

.filmhero3__rating {
    padding: 1px 7px;
    border: 1px solid var(--navy-line);
}

.filmhero3__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-block-start: 24px;
}

.filmhero3__trailer {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    min-height: 45px;
    padding: 0 24px;
    border: 1px solid var(--mustard);
    background: var(--mustard);
    font-size: 13px;
    font-weight: 500;
    color: var(--v3-ink);
}

.filmhero3__trailer:hover,
.filmhero3__trailer:focus-visible {
    border-color: #c99a2c;
    background: #c99a2c;
    color: var(--v3-ink);
}

.filmhero3__trailericon {
    width: 20px;
    height: 20px;
}

.filmhero3__share .cta--outline {
    min-height: 45px;
    padding-inline: 24px;
    border-color: var(--mustard);
    font-size: 13px;
    color: var(--mustard);
}

.filmhero3__share .cta--outline:hover,
.filmhero3__share .cta--outline:focus-visible {
    border-color: var(--sand);
    color: var(--sand);
}

.filmhero3__share .reportshare__toast {
    color: var(--stone);
}

.filmhero3__accounts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    align-self: stretch;
    margin-block-start: 33px;
    padding-block-start: 22px;
    border-block-start: 1px solid var(--navy-line);
}

.filmhero3__accountslabel {
    margin: 0;
    font-size: 12px;
    color: var(--stone);
}

.filmhero3__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filmhero3__network {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(201, 195, 182, 0.4);
    color: var(--stone);
}

.filmhero3__network:hover,
.filmhero3__network:focus-visible {
    border-color: var(--mustard);
    color: var(--mustard);
}

.filmhero3__networkicon {
    width: 16px;
    height: 16px;
}

/* The trailer over the whole card. */
.filmhero3__player {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #000;
}

.filmhero3__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.filmhero3__close {
    position: absolute;
    top: 21px;
    inset-inline-end: 21px;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    padding: 0;
    border: 1px solid rgba(239, 234, 224, 0.5);
    background: rgba(18, 22, 26, 0.64);
    color: var(--sand);
    cursor: pointer;
}

.filmhero3__closeicon {
    width: 16px;
    height: 16px;
}

/* --- section heads (628:1953) */

.filmsec3 {
    padding-block-start: 56px;
}

.filmsec3--tight {
    padding-block-start: 0;
}

.filmhead3 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-block-end: 36px;
}

.filmhead3__eyebrow {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--taupe);
}

.filmhead3__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.625rem, 2.22vw, 2rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--v3-ink);
}

/* --- cast and crew (628:1959) */

.filmpeople3 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filmperson3 {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-block-end: 18px;
    background: var(--sand);
}

.filmperson3__photo {
    display: grid;
    place-items: center;
    aspect-ratio: 194 / 233;
    overflow: hidden;
    background: #e5e0d6;
}

.filmperson3__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.filmperson3__blank {
    width: 55px;
    height: 55px;
    color: var(--taupe);
}

.filmperson3__name {
    padding: 14px 16px 0;
    font-size: 17px;
    line-height: 1.65;
    color: var(--v3-ink);
}

.filmperson3__role {
    padding: 4px 16px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--taupe);
}

/* --- the album (628:2071) */

.filmalbum3 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filmalbum3__figure {
    margin: 0;
}

.filmalbum3__img {
    display: block;
    width: 100%;
    aspect-ratio: 301 / 226;
    object-fit: cover;
    background: var(--sand);
}

.filmalbum3__caption {
    margin-block-start: 12px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--taupe);
}

/* --- the figures band (628:2088): 3 + 2 cells, the total on green */

.filmsec3--tight .filmfigs3 {
    margin-block-start: 56px;
}

.filmfigs3 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--sand-line);
    background: var(--sand-line);
}

.filmfigs3__cell {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 158px;
    padding: 24px 15px;
    background: var(--sand);
    text-align: center;
}

.filmfigs3__cell--wide {
    grid-column: span 3;
    min-height: 168px;
}

.filmfigs3__cell--total {
    background: var(--v3-green);
}

.filmfigs3__label {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--v3-ink);
}

.filmfigs3__lead {
    font-weight: 600;
    color: var(--mustard);
}

.filmfigs3__cell--total .filmfigs3__label {
    color: var(--sand);
}

.filmfigs3__value {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: clamp(2rem, 2.65vw, 2.375rem);
    font-weight: 300;
    line-height: 1.2;
    color: var(--v3-green);
}

.filmfigs3__cell--total .filmfigs3__value {
    font-weight: 600;
    color: var(--mustard);
}

.filmfigs3__riyal {
    width: 24px;
    height: 27px;
}

.filmfigs3__unit {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--v3-ink);
}

.filmfigs3__cell--total .filmfigs3__unit {
    color: #cfe0dc;
}

.filmfigs3__blank {
    margin: 0;
    font-size: 15px;
    color: var(--v3-text);
}

.filmfigs3__cell--total .filmfigs3__blank {
    color: #cfe0dc;
}

.filmfigs3__script {
    min-height: 54px;
    font-size: 15px;
}

/* --- where to watch (628:2141): radio tabs, so they switch with no script */

.filmwatch3 {
    margin-block-start: 56px;
    padding-block: 52px 56px;
    background: var(--sand);
}

.filmwatch3 .filmhead3 {
    margin-block-end: 28px;
}

.filmwatch3__list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.filmwatch3__tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: min(100%, 300px);
    padding: 22px 24px;
    border: 1px solid var(--sand-line);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.filmwatch3__tab:hover {
    border-color: var(--v3-green);
}

.filmwatch3__tabicon {
    flex: none;
    width: 28px;
    height: 28px;
    color: var(--v3-green);
}

.filmwatch3__tabtext {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
}

.filmwatch3__count {
    font-size: 12px;
    color: var(--v3-text);
}

.filmwatch3__name {
    font-size: 21px;
    line-height: 1.3;
    color: var(--v3-ink);
}

.filmwatch3__caret {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--v3-text);
}

.filmwatch3__panel {
    display: none;
    margin-block-start: 24px;
    padding: 50px 30px 30px;
    border: 1px solid var(--sand-line);
    background: var(--paper);
}

.filmwatch3__heading {
    margin: 0 0 22px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--v3-ink);
}

.filmwatch3__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filmwatch3__place {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #ddd8cc;
    background: #fff;
}

.filmwatch3__logo {
    display: grid;
    place-items: center;
    height: 108px;
    padding: 18px 26px;
}

.filmwatch3__logo img {
    max-width: 100%;
    max-height: 66px;
    object-fit: contain;
}

.filmwatch3__wordmark {
    font-size: 18px;
    color: var(--v3-ink);
    text-align: center;
}

.filmwatch3__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-block-start: 1px solid #e6e1d6;
    font-size: 13px;
    color: var(--v3-ink);
}

a.filmwatch3__link:hover,
a.filmwatch3__link:focus-visible {
    color: var(--v3-green);
}

.filmwatch3__arrow,
.filmnews3__arrow {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--v3-green);
}

[dir="ltr"] .filmwatch3__arrow,
[dir="ltr"] .filmnews3__arrow {
    transform: scaleX(-1);
}

/* The checked tab: green with the notch under it, and its panel. */
#film-watch-streaming:checked ~ .filmwatch3__panel--streaming,
#film-watch-cinema:checked ~ .filmwatch3__panel--cinema,
#film-watch-airline:checked ~ .filmwatch3__panel--airline {
    display: block;
}

#film-watch-streaming:checked ~ .filmwatch3__list .filmwatch3__tab--streaming,
#film-watch-cinema:checked ~ .filmwatch3__list .filmwatch3__tab--cinema,
#film-watch-airline:checked ~ .filmwatch3__list .filmwatch3__tab--airline {
    border-color: var(--v3-green);
    background: var(--v3-green);
}

#film-watch-streaming:checked ~ .filmwatch3__list .filmwatch3__tab--streaming::after,
#film-watch-cinema:checked ~ .filmwatch3__list .filmwatch3__tab--cinema::after,
#film-watch-airline:checked ~ .filmwatch3__list .filmwatch3__tab--airline::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    background: var(--v3-green);
    transform: rotate(45deg);
}

#film-watch-streaming:checked ~ .filmwatch3__list .filmwatch3__tab--streaming *,
#film-watch-cinema:checked ~ .filmwatch3__list .filmwatch3__tab--cinema *,
#film-watch-airline:checked ~ .filmwatch3__list .filmwatch3__tab--airline * {
    color: var(--sand);
}

#film-watch-streaming:checked ~ .filmwatch3__list .filmwatch3__tab--streaming .filmwatch3__count,
#film-watch-cinema:checked ~ .filmwatch3__list .filmwatch3__tab--cinema .filmwatch3__count,
#film-watch-airline:checked ~ .filmwatch3__list .filmwatch3__tab--airline .filmwatch3__count {
    color: #cfe0dc;
}

#film-watch-streaming:focus-visible ~ .filmwatch3__list .filmwatch3__tab--streaming,
#film-watch-cinema:focus-visible ~ .filmwatch3__list .filmwatch3__tab--cinema,
#film-watch-airline:focus-visible ~ .filmwatch3__list .filmwatch3__tab--airline {
    outline: 2px solid var(--v3-ink);
    outline-offset: 2px;
}

/* --- the box office (628:2324) */

.filmstats3__scroll {
    overflow-x: auto;
}

.filmstats3 {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.filmstats3 thead th {
    padding: 15px 8px 16px;
    border-block-end: 1px solid var(--sand-line);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--v3-text);
    text-align: start;
}

.filmstats3__lead {
    font-weight: 600;
    color: var(--v3-green);
}

.filmstats3 tbody tr:nth-child(odd) {
    background: var(--sand);
}

.filmstats3 tbody tr:nth-child(even) {
    background: var(--paper);
}

.filmstats3 tbody th,
.filmstats3 tbody td {
    padding: 21px 8px;
    border-block-end: 1px solid var(--sand-line);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--v3-ink);
    text-align: start;
    vertical-align: middle;
}

.filmstats3 tbody th {
    width: 24%;
    font-size: 16px;
}

.filmstats3__sub {
    display: block;
    font-size: 12px;
    color: var(--taupe);
}

.filmstats3__note {
    font-size: 12px;
    color: var(--v3-text);
}

.filmstats3 tfoot th,
.filmstats3 tfoot td {
    padding: 22px 8px;
    background: var(--v3-green);
    font-size: 15px;
    font-weight: 600;
    color: var(--sand);
    text-align: start;
}

.filmstats3 tfoot th {
    font-size: 18px;
    color: var(--mustard);
}

/* --- the credits strip (628:2478) */

.filmcredits3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-block-start: 56px;
    padding-block: 48px;
    border-block: 1px solid var(--sand-line);
}

.filmcredits3__label {
    margin: 0 0 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--taupe);
    text-align: center;
}

.filmcredits3__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 80px;
}

.filmcredits3__logo {
    max-width: 135px;
    max-height: 65px;
    object-fit: contain;
}

.filmcredits3__name {
    font-size: 15px;
    color: var(--v3-ink);
}

/* --- awards (628:2502) */

.filmhonours3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filmhonour3 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 45px 28px 25px;
    background: var(--sand);
    text-align: center;
}

.filmhonour3__laurel {
    width: 40px;
    height: 40px;
    margin-block-end: 10px;
    color: var(--v3-green);
}

.filmhonour3__title {
    margin: 0;
    font-size: clamp(1.25rem, 1.75vw, 1.5625rem);
    line-height: 1.4;
    color: var(--v3-ink);
}

.filmhonour3__name {
    margin: 0;
    font-size: 14px;
    color: var(--v3-text);
}

.filmhonour3__year {
    position: absolute;
    top: 24px;
    inset-inline-end: 25px;
    margin: 0;
    font-size: 12px;
    color: var(--taupe);
}

/* --- news (628:2564) */

.filmnews3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filmnews3__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-block-start: 20px;
    border-block-start: 2px solid var(--v3-ink);
}

.filmnews3__kind {
    padding: 4px 10px;
    border: 1px solid var(--v3-green);
    font-size: 11px;
    color: var(--v3-green);
}

.filmnews3__title {
    margin: 16px 0 0;
    font-size: 19px;
    line-height: 1.7;
    color: var(--v3-ink);
}

.filmnews3__title a:hover,
.filmnews3__title a:focus-visible {
    color: var(--v3-green);
}

.filmnews3__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    align-self: stretch;
    margin: auto 0 0;
    padding-block-start: 18px;
    font-size: 12px;
    color: var(--taupe);
}

@media (max-width: 1100px) {
    .filmpeople3 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .filmwatch3__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .filmhero3__card {
        grid-template-areas: "media" "body";
        grid-template-columns: minmax(0, 1fr);
    }

    .filmhero3__media {
        height: 320px;
    }

    .filmhero3__still {
        flex: 1 1 auto;
        margin-block: 0;
    }

    .filmhero3__poster {
        flex-basis: 40%;
        width: 40%;
    }

    .filmhero3__body {
        padding: 24px 20px;
    }

    .filmalbum3,
    .filmhonours3,
    .filmnews3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filmfigs3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filmfigs3__cell {
        grid-column: span 1;
    }

    .filmfigs3__cell--total,
    .filmfigs3__cell--wide {
        grid-column: 1 / -1;
    }

    .filmwatch3__tab {
        flex: 1 1 100%;
    }
}

@media (max-width: 600px) {
    .filmhero3__media {
        height: 240px;
    }

    .filmpeople3,
    .filmwatch3__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .filmalbum3,
    .filmhonours3,
    .filmnews3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .filmwatch3__panel {
        padding: 24px 14px 14px;
    }
}

/* =====================================================================================
   October 2026 redesign — «المعلومات العامة» and the works page (Figma 628:13235 read,
   628:13896 edit, 628:14563 company, 628:15977 works; phase 10)

   Inside the sand profile card from phase 3. The photo column (142) at the start, 30 to the
   values (two to a row, 20 apart); «وسائل التواصل الاجتماعي» under a hairline with seven
   boxes two to a row; the green button at the start of the last line, its icon at the end.
   ===================================================================================== */

.profinfo {
    font-family: var(--font-lama);
    line-height: inherit;
}

.profinfo__notice,
.profinfo__pending,
.profinfo__errors {
    margin: 0 0 24px;
}

.profinfo__pending {
    font-size: 13px;
    line-height: 1.8;
    color: var(--v3-text);
}

.profinfo__top {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.profinfo__photo {
    display: flex;
    flex: 0 0 142px;
    flex-direction: column;
    align-items: flex-start;
}

.profinfo__image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--paper);
    object-fit: cover;
}

.profinfo__caption {
    margin: 21px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--v3-text);
}

/* the form: «تغيير الصورة» in green, the limits under it (628:13896) */
.profinfo__change {
    margin-block-start: 21px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--v3-green);
    cursor: pointer;
}

.profinfo__change:hover {
    text-decoration: underline;
}

.profinfo__photo:focus-within .profinfo__change {
    outline: 2px solid var(--v3-green);
    outline-offset: 2px;
}

.profinfo__limits {
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.6;
    color: var(--v3-text);
}

.profinfo__grid {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    min-width: 0;
    margin: 0;
}

.profinfo__wide {
    grid-column: 1 / -1;
}

.profinfo__grid .lfield + .lfield {
    margin: 0;
}

.profinfo__grid .lfield__box {
    min-height: 51px;
}

.profinfo__grid .lfield__control {
    font-size: 15px;
}

/* the read view: a label, then the value on a hairline */
.profinfo__row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.profinfo__label {
    font-size: 13px;
    line-height: 1.7;
    color: var(--v3-ink);
}

.profinfo__value {
    min-height: 51px;
    margin: 0;
    padding-block: 13px;
    border-bottom: 1px solid var(--stone);
    font-size: 15px;
    line-height: 1.6;
    color: var(--v3-ink);
    overflow-wrap: anywhere;
}

.profinfo__value[dir="ltr"] {
    text-align: right;
}

[dir="ltr"] .profinfo__value[dir="ltr"] {
    text-align: left;
}

.profinfo__value.is-empty {
    color: var(--v3-hint);
}

.profinfo__row--bio .profinfo__value {
    min-height: 144px;
    padding-block: 11px 24px;
    white-space: pre-line;
}

/* «وسائل التواصل الاجتماعي» */
.profinfo__social {
    margin-block-start: 27px;
    padding-block-start: 41px;
    border-top: 1px solid var(--stone);
}

.profinfo__subhead {
    margin: 0 0 27px;
    font-size: clamp(1.375rem, 1.88vw, 1.6875rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--v3-ink);
}

.profsocial {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profsocial .lfield + .lfield {
    margin: 0;
}

.profsocial__label {
    display: flex;
    align-items: center;
    gap: 9px;
}

.profsocial__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--v3-ink);
}

.profsocial .lfield__box {
    min-height: 51px;
}

.profsocial__control {
    font-size: 13px;
    direction: ltr;
    text-align: left;
}

.profsocial__control::placeholder {
    text-align: left;
}

/* the read view's boxes: the address, or the platform's address in grey when there is none */
.profsocial__box {
    padding-inline: 16px;
    overflow: hidden;
}

.profsocial__url,
.profsocial__blank {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profsocial__url {
    color: var(--v3-ink);
    text-decoration: none;
}

.profsocial__url:hover {
    color: var(--v3-green);
    text-decoration: underline;
}

.profsocial__blank {
    color: var(--v3-placeholder);
}

/* «التخصص»: the specialties as ticked chips across the card */
.profchips {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.profchips__hint {
    margin: -4px 0 12px;
}

.profchips__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profchip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.profchip__box {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.profchip__label {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding-inline: 14px;
    border: 1px solid var(--v3-field-line);
    background: var(--paper);
    font-size: 13px;
    line-height: 1.5;
    color: var(--v3-ink);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.profchip:hover .profchip__label {
    border-color: var(--v3-green);
}

.profchip__box:checked + .profchip__label {
    border-color: var(--v3-green);
    background: var(--v3-green);
    color: var(--sand);
}

.profchip__box:focus-visible + .profchip__label {
    outline: 2px solid var(--v3-green);
    outline-offset: 2px;
}

.profchips.is-invalid .profchip__label {
    border-color: var(--v3-rust);
}

/* the last line: «تعديل» / «حفظ التغييرات» at the far end of the card, the icon at the end of
   the label (628:13367) */
.profinfo__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    margin-block-start: 30px;
}

.profinfo__actions .cta,
.profworks3__toggle {
    flex-direction: row-reverse;
    gap: 22px;
    min-height: 52px;
    padding-inline: 24px;
}

.profinfo__actions .cta__icon,
.profworks3__toggle .cta__icon {
    width: 20px;
    height: 20px;
}

.profinfo__cancel {
    font-size: 13px;
    color: var(--v3-text);
}

.profinfo__cancel:hover {
    color: var(--v3-green);
}

/* ---- works (628:16002) */

.profworks3 {
    font-family: var(--font-lama);
    line-height: inherit;
}

.profworks3 > .formnotice {
    margin: 0 0 24px;
}

.profworks3__group {
    padding-block: 54px 28px;
    border-top: 1px solid var(--stone);
}

.profworks3__group + .profworks3__group {
    padding-block-start: 27px;
}

.profworks3__title {
    margin: 0;
    font-size: clamp(1.375rem, 1.88vw, 1.6875rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--v3-ink);
}

.profworks3__note {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.9;
    color: var(--v3-text);
}

.profworks3__empty {
    margin: 0;
    padding-block: 20px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--v3-hint);
}

.profworks3__videos,
.profworks3__credits {
    margin: 27px 0 0;
    padding: 0;
    list-style: none;
}

.profvideo,
.profcredit {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-block: 19px;
    border-top: 1px solid var(--stone);
}

.profworks3__videos > .profworks3__empty,
.profworks3__credits > .profworks3__empty {
    border-top: 1px solid var(--stone);
}

.profvideo__mark {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: var(--v3-green);
}

.profvideo__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.profvideo__title,
.profcredit__title {
    font-size: 18px;
    line-height: 1.45;
    color: var(--v3-ink);
    text-decoration: none;
}

.profvideo__title:hover {
    color: var(--v3-green);
}

.profvideo__url,
.profcredit__meta {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.4;
    color: var(--v3-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profvideo__url {
    text-align: right;
}

.profcredit {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* «إضافة رابط»: an outlined box at the start; open, the address field and its save under it */
.profworks3__add {
    margin-block-start: 0;
}

.profworks3__toggle {
    min-height: 54px;
    font-size: 15px;
    list-style: none;
}

.profworks3__toggle::-webkit-details-marker {
    display: none;
}

.profworks3__add[open] .profworks3__toggle {
    border-color: var(--v3-green);
}

.profworks3__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-block-start: 20px;
}

.profworks3__form .lfield {
    flex: 1 1 320px;
}

.profworks3__form .lfield__box {
    min-height: 51px;
}

.profworks3__form .cta {
    min-height: 51px;
}

/* «معرض الصور»: four across, 150 tall, then the dashed drop box */
.profworks3__gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 27px 0 0;
    padding: 0;
    list-style: none;
}

.profworks3__cell {
    position: relative;
    height: 150px;
    overflow: hidden;
    background: var(--paper);
}

.profworks3__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profworks3__more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(18, 22, 26, 0.55);
    font-size: 22px;
    color: var(--sand);
}

.profdrop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    min-height: 178px;
    margin-block-start: 20px;
    padding: 31px 25px 36px;
    border: 1px dashed var(--v3-field-line);
    background: var(--paper);
    text-align: center;
}

.profdrop:focus-within {
    border-color: var(--v3-green);
}

.profdrop__icon {
    width: 25px;
    height: 25px;
    color: var(--v3-green);
}

.profdrop__title {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--v3-ink);
}

.profdrop__limits {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--v3-text);
}

.profdrop__browse {
    margin-block-start: 4px;
    padding-block-end: 2px;
    border-bottom: 1px solid var(--v3-green);
    font-size: 13px;
    line-height: 1.4;
    color: var(--v3-green);
    cursor: pointer;
}

.profdrop__input:focus-visible ~ .profdrop__browse {
    outline: 2px solid var(--v3-green);
    outline-offset: 3px;
}

.profdrop__submit[hidden] {
    display: none;
}

.profdrop__picked {
    font-size: 12px;
    color: var(--v3-text);
}

.profdrop__picked:empty {
    display: none;
}

.profdrop.is-sending {
    opacity: 0.6;
}

/* privacy, personal accounts: one line in place of the switches */
.privnone {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
    color: var(--v3-text);
}

@media (max-width: 720px) {
    .profinfo__top {
        flex-direction: column;
        gap: 24px;
    }

    .profinfo__photo {
        flex-basis: auto;
    }

    .profinfo__grid,
    .profsocial {
        grid-template-columns: minmax(0, 1fr);
    }

    .profworks3__gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profworks3__cell {
        height: 120px;
    }
}

/* ==========================================================================
   Phase 11 (October 2026): the directory, a company's page and the five-step
   provider wizard (Figma 628:17001, 628:17172, 628:17451 to 628:18880)
   ========================================================================== */

/* --- the list: the filter row and the logo tiles (628:17001) */

.dirpage3 {
    padding-block-end: 72px;
    background: var(--paper);
}

.dirtools3 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 32px;
    padding-block: 40px 26px;
    border-block-end: 1px solid var(--stone);
}

.dirtools3__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 28px;
    font-family: var(--font-lama);
}

.dirtools3__field {
    min-width: 168px;
}

.dirtools3__flag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 45px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--v3-ink);
    cursor: pointer;
}

.dirtools3__box {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--v3-green);
    cursor: pointer;
}

.dirtools3__apply[hidden] {
    display: none;
}

.dirtools3__add {
    flex-direction: row-reverse;
    gap: 22px;
    min-height: 51px;
    padding-inline: 24px;
    font-size: 15px;
}

.dirlist3 {
    padding-block-start: 28px;
}

.dirgrid3 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 21px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dircard3 {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--stone);
    font-family: var(--font-lama);
    transition: border-color 0.15s ease;
}

.dircard3:hover,
.dircard3:focus-visible {
    border-color: var(--v3-green);
}

.dircard3__plate {
    display: grid;
    place-items: center;
    height: 146px;
    padding: 18px 22px;
    background: var(--white);
}

.dircard3__logo {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.dircard3__plate--empty .dircard3__logo {
    width: 64px;
    height: 64px;
    opacity: 0.5;
}

.dircard3__foot {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    padding: 18px 18px 20px;
    background: var(--sand);
}

.dircard3__name {
    font-size: 17px;
    line-height: 1.7;
    color: var(--v3-ink);
}

.dircard3__field {
    font-size: 12px;
    line-height: 1.6;
    color: var(--v3-text);
}

/* --- a company's page: the head and the openings card (628:17179) */

.company3 {
    padding-block-end: 8px;
    font-family: var(--font-lama);
}

.company3__crumbs {
    padding-block: 18px 22px;
}

.company3__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 38px;
    align-items: start;
}

.company3__head {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    padding-block: 24px 26px;
    border-block-end: 1px solid var(--stone);
}

.company3__logo {
    display: grid;
    flex: none;
    place-items: center;
    width: 140px;
    height: 100px;
    padding: 10px;
    background: var(--white);
}

.company3__logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.company3__eyebrow {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--v3-green);
}

.company3__name {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 0;
    font-family: inherit;
    font-size: clamp(2.25rem, 3.47vw, 3.125rem);
    font-weight: 300;
    line-height: 1.35;
    color: var(--v3-ink);
}

.company3__badge {
    width: 26px;
    height: 26px;
}

.company3__about {
    margin: 24px 0 0;
    font-size: 15px;
    line-height: 2;
    color: var(--v3-ink);
}

.company3__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
    margin: 28px 0 0;
    padding: 23px 27px 25px;
    background: var(--sand);
}

.company3__fact {
    min-width: 0;
}

.company3__factlabel {
    font-size: 12px;
    line-height: 1.6;
    color: var(--v3-text);
}

.company3__factvalue {
    margin: 6px 0 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--v3-ink);
    overflow-wrap: anywhere;
}

.company3__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 22px;
    padding-block: 38px 24px;
    border-block-end: 1px solid var(--stone);
}

.company3__phones {
    display: flex;
    flex-direction: column;
}

.company3__line {
    font-size: 13px;
    line-height: 1.8;
    color: var(--v3-green);
}

.company3__line:hover,
.company3__line:focus-visible {
    text-decoration: underline;
}

.company3__social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.company3__tile {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--stone);
    color: var(--v3-green);
    transition: border-color 0.15s ease;
}

.company3__tile:hover,
.company3__tile:focus-visible {
    border-color: var(--v3-green);
}

.company3__tileicon {
    width: 19px;
    height: 19px;
}

.company3__opps {
    margin-block-start: 24px;
    padding: 26px 27px 27px;
    background: var(--navy);
    color: var(--stone);
}

.company3__oppsheading {
    margin: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--mustard);
}

.company3__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 34px;
}

.company3__tab {
    min-height: 35px;
    padding: 0 12px;
    border: 1px solid var(--navy-line);
    background: none;
    font: inherit;
    font-size: 12px;
    line-height: 1.6;
    color: var(--stone);
    cursor: pointer;
}

.company3__tab[aria-selected="true"] {
    border-color: var(--mustard);
    color: var(--mustard);
}

.company3__tab:focus-visible {
    outline: 2px solid var(--mustard);
    outline-offset: 2px;
}

.company3__opening + .company3__opening {
    margin-block-start: 26px;
    padding-block-start: 26px;
    border-block-start: 1px solid var(--navy-line);
}

.company3__panel + .company3__panel {
    margin-block-start: 26px;
}

.company3__opptitle {
    margin: 22px 0 0;
    font-family: inherit;
    font-size: 29px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--sand);
}

.company3__oppbody {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.9;
    color: var(--stone);
}

.company3__oppfacts {
    margin: 22px 0 0;
    padding-inline-start: 18px;
    font-size: 13px;
    line-height: 2.2;
    list-style: none;
}

.company3__apply {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    margin-block-start: 34px;
    padding-inline: 26px 24px;
    background: var(--mustard);
    font-size: 14px;
    line-height: 1.6;
    color: var(--v3-ink);
    transition: background-color 0.15s ease;
}

.company3__apply:hover,
.company3__apply:focus-visible {
    background: #e9c162;
}

.company3__applyicon {
    width: 13px;
    height: 12px;
}

[dir="ltr"] .company3__applyicon {
    transform: scaleX(-1);
}

.company3__oppsnone {
    margin: 26px 0 0;
    font-size: 14px;
    line-height: 1.9;
}

/* --- the page's sections: «أعمالنا», «إعلانات الشركة», «فيديو تعريفي», «المؤسسون» */

.company3sec {
    padding-block-start: 64px;
    font-family: var(--font-lama);
}

.company3sec__title {
    margin: 0 0 26px;
    font-family: inherit;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--v3-ink);
}

.company3works {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 35px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.company3works__poster {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 225 / 337;
    object-fit: cover;
    background: var(--sand);
}

.company3news {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.company3news__item {
    display: flex;
    flex-direction: column;
    padding-block-start: 16px;
    border-block-start: 2px solid var(--v3-ink);
}

.company3news__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.65;
    color: var(--v3-ink);
}

.company3news__body {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--v3-text);
}

.company3news__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: auto 0 0;
    padding-block-start: 22px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--v3-text);
}

.company3news__arrow {
    width: 16px;
    height: 16px;
    color: var(--v3-green);
}

[dir="ltr"] .company3news__arrow {
    transform: scaleX(-1);
}

.dirpage3 .filmsec3 {
    padding-block-start: 64px;
}

.dirpage3 .filmhead3 {
    margin-block-end: 26px;
}

.dirpage3 .filmhead3__title {
    font-size: 27px;
}

.dirpage3 .dirclaim {
    margin-block-start: 32px;
}

.company3sec--founders .company3sec__title {
    margin-block-end: 26px;
}

.company3people {
    padding-block-end: 0;
}

/* --- the wizard's frame: the five tabs, the cards, the footer (628:17463, 628:17488) */

.wizard3 {
    padding-block-end: 72px;
    background: var(--paper);
    font-family: var(--font-lama);
}

.wizard3__tabs {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-block: 34px;
}

.wiztabs {
    display: flex;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wiztabs__tab {
    flex: 1 1 0;
    min-width: 0;
    border-block-end: 2px solid var(--stone);
}

.wiztabs__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 73px;
    padding-inline: 16px;
    color: var(--v3-text);
}

.wiztabs__number {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.7;
}

.wiztabs__label {
    font-size: 14px;
    line-height: 1.7;
}

.wiztabs__tab.is-done .wiztabs__link {
    color: var(--v3-green);
}

a.wiztabs__link:hover,
a.wiztabs__link:focus-visible {
    background: var(--sand);
}

.wiztabs__tab.is-current {
    border-block-end-color: var(--v3-green);
}

.wiztabs__tab.is-current .wiztabs__link {
    background: var(--v3-green);
    color: var(--sand);
}

.wizard3__crowd {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    margin-block-start: 13px;
    padding-inline: 20px;
    background: var(--v3-green);
    font-size: 14px;
    line-height: 1.7;
    color: var(--sand);
    transition: background-color 0.15s ease;
}

.wizard3__crowd:hover,
.wizard3__crowd:focus-visible {
    background: var(--v3-green-deep);
}

.wizard3__crowdicon {
    width: 20px;
    height: 20px;
}

.wizard3__cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wizard3__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block-start: 30px;
}

.wizard3__next {
    min-height: 52px;
    margin-inline-start: auto;
    padding-inline: 25px;
    font-size: 14px;
}

.wizard3__back {
    min-height: 52px;
    padding-inline: 25px;
    font-size: 14px;
}

.wizard3__back .cta__icon {
    width: 13px;
    height: 12px;
}

/* The arrow file points the way forward; «السابق» turns it round. */
[dir="rtl"] .wizard3__back .cta__icon {
    transform: scaleX(-1);
}

.wizcard3 {
    padding: 32px 33px 33px;
    border: 1px solid var(--stone);
    background: var(--sand);
    color: var(--v3-ink);
}

.wizcard3__head--rule {
    padding-block-end: 28px;
    border-block-end: 1px solid var(--stone);
}

.wizcard3__title {
    margin: 0;
    font-family: inherit;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--v3-ink);
}

.wizcard3__intro {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.9;
    color: var(--v3-text);
}

.wizcard3__body {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-block-start: 28px;
}

/* The old dark plate's palette, turned light for the fields drawn inside the cards. */
.wizard3,
.wizmodal {
    --auth-field: var(--paper);
    --auth-edge: var(--v3-field-line);
    --auth-ink: var(--v3-placeholder);
    --wiz-gap: 22px;
    --wiz-edge: var(--stone);
}

.wizard3 .wizsection {
    gap: 14px;
}

.wizard3 .wizsection--ruled {
    padding-block-start: 28px;
    border-block-start: 1px solid var(--stone);
}

.wizard3 .wizsection__title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--v3-ink);
}

.wizard3 .wizsection__title--small {
    font-size: 20px;
}

.wizard3 .wizsection__req,
.wizcard3__req,
:is(.wizard3, .wizmodal) .wizfield__req {
    color: inherit;
}

.wizard3 .wizsection__hint {
    margin: -8px 0 6px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--v3-text);
}

.wizard3 .wizsection__lede {
    gap: 6px;
}

.wizard3 .wizsection__lede .wizsection__hint {
    margin: 0 0 6px;
}

.wizard3 .wizsection__note {
    font-size: 13px;
    line-height: 1.8;
    text-align: start;
    color: var(--v3-text);
}

.wizard3 .wizgrid {
    gap: 22px 24px;
}

/* The two «مجال الشركة» selects share the column the name's neighbour would have. */
.wizpair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

:is(.wizard3, .wizmodal) .authfield__label {
    margin-block-end: 10px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--v3-ink);
}

:is(.wizard3, .wizmodal) .wizfield__hint {
    margin: -4px 0 10px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--v3-hint);
}

:is(.wizard3, .wizmodal) .authbox {
    height: 54px;
    padding-inline: 16px;
    border: 1px solid var(--v3-field-line);
    border-radius: 0;
    background: var(--paper);
}

:is(.wizard3, .wizmodal) .authbox--area {
    height: auto;
    min-height: 98px;
    padding-block: 14px;
}

:is(.wizard3, .wizmodal) .authbox:focus-within,
:is(.wizard3, .wizmodal) .cselect-host.is-open {
    border-color: var(--v3-green);
    box-shadow: 0 0 0 1px var(--v3-green);
}

:is(.wizard3, .wizmodal) .authbox.is-invalid {
    border-color: var(--v3-rust);
}

:is(.wizard3, .wizmodal) .authbox__control,
:is(.wizard3, .wizmodal) .authbox .cselect__button {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--v3-ink);
}

:is(.wizard3, .wizmodal) .authbox__control::placeholder,
:is(.wizard3, .wizmodal) .authbox .cselect__button.is-placeholder {
    color: var(--v3-placeholder);
}

:is(.wizard3, .wizmodal) .authbox__icon {
    width: 16px;
    height: 16px;
    color: var(--v3-green);
}

:is(.wizard3, .wizmodal) .authbox__rule {
    height: 34px;
    background: var(--v3-field-line);
}

:is(.wizard3, .wizmodal) .authbox__caret {
    inset-inline-end: 16px;
    width: 16px;
    height: 16px;
    color: var(--v3-text);
}

:is(.wizard3, .wizmodal) .authbox__select option {
    background: var(--paper);
    color: var(--v3-ink);
}

:is(.wizard3, .wizmodal) .fielderror {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--v3-rust);
}

/* Addresses read left to right, placeholder included, from the start of the Arabic box. */
[dir="rtl"] :is(.wizard3, .wizmodal) .authbox__control:is([type="url"], [type="email"]) {
    direction: ltr;
    text-align: right;
}

/* The open select (628:17870): a white panel under the box, the chosen row a pale green with a
   green edge and a tick. */
:is(.wizard3, .wizmodal) .cselect__list {
    inset-block-start: calc(100% + 4px);
    padding: 6px;
    border: 1px solid var(--stone);
    border-radius: 0;
    background: var(--white);
    box-shadow: 0 12px 28px rgba(18, 22, 26, 0.12);
}

:is(.wizard3, .wizmodal) .cselect__option {
    border-radius: 0;
    font-size: 14px;
    color: var(--v3-ink);
}

:is(.wizard3, .wizmodal) .cselect__option:hover,
:is(.wizard3, .wizmodal) .cselect__option:focus {
    background: var(--sand);
    color: var(--v3-ink);
}

:is(.wizard3, .wizmodal) .cselect__option[aria-selected="true"] {
    border-color: transparent;
    border-inline-start: 2px solid var(--v3-green);
    background: rgba(30, 107, 102, 0.08);
    color: var(--v3-green);
}

/* The calendar (628:18880): white, hairline, green for today and the chosen day. */
:is(.wizard3, .wizmodal) .dpick {
    border: 1px solid var(--stone);
    border-radius: 0;
    background: var(--white);
    box-shadow: 0 12px 28px rgba(18, 22, 26, 0.12);
    color: var(--v3-ink);
}

:is(.wizard3, .wizmodal) .dpick__head {
    border-block-end-color: var(--stone);
}

:is(.wizard3, .wizmodal) .dpick__title {
    color: var(--v3-ink);
}

:is(.wizard3, .wizmodal) .dpick__nav {
    border-color: var(--stone);
    color: var(--v3-text);
}

:is(.wizard3, .wizmodal) .dpick__nav:hover,
:is(.wizard3, .wizmodal) .dpick__nav:focus-visible {
    border-color: var(--v3-green);
    color: var(--v3-green);
}

:is(.wizard3, .wizmodal) .dpick__cell {
    border-radius: 0;
    color: var(--v3-ink);
}

:is(.wizard3, .wizmodal) .dpick__cell:hover,
:is(.wizard3, .wizmodal) .dpick__cell:focus-visible {
    background: var(--sand);
    color: var(--v3-green);
}

:is(.wizard3, .wizmodal) .dpick__cell.is-today {
    border-color: transparent;
    background: rgba(30, 107, 102, 0.1);
}

:is(.wizard3, .wizmodal) .dpick__cell.is-selected {
    border-color: var(--v3-green);
    background: none;
    color: var(--v3-green);
}

/* --- the pickers: dashed paper boxes, the upload arrow, «استعراض الملفات» underlined */

.wizard3 .wizupload__zone {
    gap: 6px;
    min-height: 178px;
    padding: 28px 20px;
    border: 1px dashed var(--v3-field-line);
    background: var(--paper);
}

.wizard3 .wizupload__zone:focus-within {
    border-color: var(--v3-green);
}

.wizard3 .wizupload__zone.is-invalid {
    border-color: var(--v3-rust);
}

.wizard3 .wizupload__prompt {
    gap: 6px;
}

.wizard3 .wizupload__glyph {
    width: 25px;
    height: 25px;
    color: var(--v3-green);
}

.wizard3 .wizupload__cta {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--v3-ink);
}

.wizard3 .wizupload__cta--small {
    font-size: 12px;
}

.wizard3 .wizupload__limits {
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
    color: var(--v3-text);
}

.wizard3 .wizupload__browse {
    display: inline-block;
    min-width: 0;
    min-height: 0;
    margin-block-start: 4px;
    padding: 0;
    border: 0;
    border-block-end: 1px solid var(--v3-green);
    border-radius: 0;
    background: none;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--v3-green);
    cursor: pointer;
}

.wizard3 .wizupload__file {
    font-size: 13px;
    color: var(--v3-ink);
}

/* Founders, cast and crew: a hairline box, the photograph's picker at the start. */
.wizard3 .wizplate {
    position: relative;
    padding: 23px;
    border: 1px solid var(--stone);
    background: none;
}

.wizard3 .wizfounder {
    grid-template-columns: 155px minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

.wizard3 .wizfounder .wizremove {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
}

.wizard3 .wizupload__zone--photo {
    width: 155px;
    min-height: 137px;
    padding: 14px 8px;
    cursor: pointer;
}

.wizard3 .wizupload__zone--photo .wizupload__glyph {
    width: 19px;
    height: 19px;
}

.wizard3 .wizupload__zone--photo .wizupload__browse {
    font-size: 12px;
}

.wizard3 .wizremove {
    width: 30px;
    height: 30px;
    border: 1px solid var(--stone);
    background: var(--paper);
    color: var(--v3-text);
}

.wizard3 .wizremove:hover,
.wizard3 .wizremove:focus-visible {
    border-color: var(--v3-rust);
    color: var(--v3-rust);
}

.wizard3 .wizremove__icon {
    width: 12px;
    height: 12px;
}

.wizard3 .wizrows__add {
    align-self: flex-start;
    flex-direction: row-reverse;
    gap: 22px;
    min-height: 54px;
    padding-inline: 24px;
    font-size: 15px;
}

.wizard3 .wizrows__add .cta__icon {
    width: 20px;
    height: 20px;
}

/* The album (628:18083): four to a row, a small black «×» in each corner; the box under them;
   the count under that. */
.wizard3 .wizalbum {
    gap: 12px;
}

.wizard3 .wizalbum__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.wizard3 .wizalbum__grid:empty {
    display: none;
}

.wizard3 .wizalbum__preview {
    aspect-ratio: 292 / 154;
    background: var(--stone);
}

.wizard3 .wizalbum__remove {
    inset-block-start: 8px;
    inset-inline-start: 8px;
    inset-inline-end: auto;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 0;
    background: var(--navy);
}

.wizard3 .wizalbum__remove::before,
.wizard3 .wizalbum__remove::after {
    width: 9px;
    height: 1.5px;
}

.wizard3 .wizupload__zone--tile[hidden] {
    display: none;
}

.wizard3 .wizalbum__count {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
    text-align: start;
    color: var(--v3-text);
}

/* The showreel: the player once a link is in, the drawn still until then. */
.wizard3 .wizvideo {
    margin-block-start: 22px;
}

.wizvideo--still {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1198 / 244;
    min-height: 180px;
    overflow: hidden;
    background: var(--navy);
}

[data-video-frame]:not([hidden]) ~ .wizvideo--still {
    display: none;
}

.wizvideo__still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wizvideo__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding-inline: 24px;
    border: 1px solid var(--stone);
    background: var(--navy);
    font-size: 14px;
    line-height: 1.6;
    color: var(--sand);
}

.wizvideo__play {
    width: 16px;
    height: 16px;
}

/* Awards, announcements and projects as hairline cards on paper (628:18278). */
.wizard3 .wizrows__list--pair {
    gap: 16px 24px;
}

.wizard3 .wizentry {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: 21px 23px 19px;
    border: 1px solid var(--stone);
    background: var(--paper);
    text-align: start;
}

.wizard3 .wizentry .wizremove {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
}

.wizard3 .wizentry__title {
    padding-inline-end: 36px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--v3-ink);
}

.wizard3 .wizentry__sub {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--v3-text);
}

.wizard3 .wizentry__date {
    flex-direction: row;
    gap: 6px;
    padding: 0;
    align-items: flex-start;
    margin-block-start: 6px;
    font-size: 11px;
    line-height: 1.6;
    text-align: start;
    color: var(--v3-green);
}

.wizard3 .wizcols {
    gap: 28px;
}

.wizard3 .wizcols > .wizsection + .wizsection {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.wizard3 .wizworks {
    gap: 14px;
}

.wizard3 .wizwork {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    aspect-ratio: auto;
    padding: 0;
    border: 0;
    background: none;
}

.wizwork__poster {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 225 / 337;
    object-fit: cover;
    background: var(--stone);
}

.wizard3 .wizwork__title {
    font-size: 13px;
    font-weight: 400;
    color: var(--v3-ink);
}

.wizard3 .wizwork__remove {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
}

/* «لماذا نحتاج هذه المعلومات؟» (628:18493): white, the green edge at the start. */
.wizard3 .wizwhy {
    margin-block-start: 10px;
    padding: 18px 20px 20px;
    border-inline-start: 2px solid var(--v3-green);
    background: var(--white);
    text-align: start;
}

.wizard3 .wizwhy__title {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--v3-ink);
}

.wizard3 .wizwhy__body {
    margin-block-start: 6px;
    font-size: 12px;
    line-height: 1.9;
    color: var(--v3-text);
}

/* «الفرص» (628:18679): three radio chips, the chosen one green on a pale wash. */
.wizchips3 {
    margin: 0;
    padding: 0;
    border: 0;
}

.wizchips3__list {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.wizchip3 {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding-inline: 18px 20px;
    border: 1px solid var(--stone);
    background: var(--paper);
    font-size: 13px;
    line-height: 1.6;
    color: var(--v3-ink);
    cursor: pointer;
}

.wizchip3__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wizchip3__dot {
    width: 16px;
    height: 16px;
    border: 1px solid var(--v3-text);
    border-radius: 50%;
}

.wizchip3:has(.wizchip3__input:checked) {
    border-color: var(--v3-green);
    background: rgba(30, 107, 102, 0.08);
    color: var(--v3-green);
}

.wizchip3:has(.wizchip3__input:checked) .wizchip3__dot {
    border-color: var(--v3-green);
    box-shadow: inset 0 0 0 3px var(--paper);
    background: var(--v3-green);
}

.wizchip3:has(.wizchip3__input:focus-visible) {
    outline: 2px solid var(--v3-green);
    outline-offset: 2px;
}

.wizchips3__note {
    margin: 14px 0 0;
    font-size: 11px;
    line-height: 1.8;
    color: var(--v3-text);
}

.wizopps:has(.wizchip3__input[value="none"]:checked) .wizopps__details {
    display: none;
}

.wizopps [data-opening-kind="hiring"],
.wizopps:has(.wizchip3__input[value="hiring"]:checked) [data-opening-kind="training"] {
    display: none;
}

.wizopps:has(.wizchip3__input[value="hiring"]:checked) [data-opening-kind="hiring"] {
    display: inline;
}

.wizard3 .wizopening + .wizopening {
    padding-block-start: 28px;
    border-block-start: 1px solid var(--stone);
}

/* --- the modal that adds an award, an announcement or a project, now light */

.wizmodal__card {
    border: 1px solid var(--stone);
    background: var(--paper);
    color: var(--v3-ink);
}

.wizmodal__title {
    font-size: 24px;
    font-weight: 400;
    color: var(--v3-ink);
}

.wizmodal .modal__x {
    border-color: var(--stone);
    color: var(--v3-text);
}

.wizmodal .modal__x:hover,
.wizmodal .modal__x:focus-visible {
    border-color: var(--v3-green);
    color: var(--v3-green);
}

.wizmodal__fields {
    border-block-start-color: var(--stone);
}

.wizmodal .wizbtn--primary {
    border-color: var(--v3-green);
    background: var(--v3-green);
    color: var(--sand);
}

.wizmodal .wizbtn--back {
    border-color: var(--stone);
    background: none;
    color: var(--v3-green);
}

@media (max-width: 1100px) {
    .dirgrid3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .company3__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .company3works {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .wizard3__tabs {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .wizard3__crowd {
        align-self: flex-end;
        margin-block-start: 0;
    }

    .wizard3 .wizworks {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .dirgrid3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .dircard3__plate {
        height: 110px;
    }

    .dirtools3__add {
        width: 100%;
    }

    .company3__head {
        flex-direction: column;
        gap: 16px;
    }

    .company3__facts,
    .company3news {
        grid-template-columns: minmax(0, 1fr);
    }

    .company3works {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wiztabs {
        overflow-x: auto;
    }

    .wiztabs__tab {
        flex: 0 0 auto;
    }

    .wiztabs__label {
        white-space: nowrap;
    }

    .wizcard3 {
        padding: 22px 16px;
    }

    .wizard3 .wizgrid,
    .wizpair,
    .wizard3 .wizrows__list--pair,
    .wizard3 .wizcols {
        grid-template-columns: minmax(0, 1fr);
    }

    .wizard3 .wizfounder {
        grid-template-columns: minmax(0, 1fr);
    }

    .wizard3 .wizalbum__grid,
    .wizard3 .wizworks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wizard3__nav {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Phase 12 (October 2026): «إضافة عمل» in five steps (Figma 628:19134 to
   628:19896), drawn in the provider wizard's frame
   ========================================================================== */

/* Two pickers side by side under the summary, close to it as drawn. */
.wizard3 .wizgrid--flush {
    gap: 16px;
    margin-block-start: -12px;
}

/* «ميزانية الإنتاج ﷼»: the riyal after the label. */
.wizfield__labelicon {
    width: 10px;
    height: 11px;
    margin-inline-start: 4px;
    vertical-align: -1px;
}

/* The computed total reads as a box that is not typed into. */
.wizard3 .wizfield[data-readonly="true"] .authbox {
    background: var(--sand);
}

.wizard3 .wizfield[data-readonly="true"] .authbox__control {
    cursor: default;
}

.wizupload__kept {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--v3-green);
}

.wizard3 .wizfounder__kept {
    grid-column: 1 / -1;
    margin: 0;
}

/* A company: the name, and the logo's dashed picker at the far end (628:19521). */
.wizard3 .wizparty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 155px;
    grid-template-areas: "name logo";
    gap: 16px 24px;
    align-items: center;
    padding: 0;
    border: 0;
}

.wizard3 .wizparty__logo {
    grid-area: logo;
}

.wizard3 .wizparty__name {
    grid-area: name;
}

.wizard3 .wizparty__logo .wizupload__zone {
    min-height: 111px;
    padding: 12px 8px;
}

.wizard3 .wizparty__logo .wizupload__glyph {
    width: 19px;
    height: 19px;
}

.wizard3 .wizparty__logo .wizupload__cta {
    font-size: 12px;
}

.wizard3 .wizparty .wizremove {
    position: absolute;
    inset-block-start: -6px;
    inset-inline-end: 0;
}

.wizard3 .wizparty + .wizparty {
    padding-block-start: 22px;
    border-block-start: 1px solid var(--stone);
}

.wizard3 .wizparty {
    position: relative;
}

/* «تنويه وإقرار» above the script picker (628:19717). */
.wizconsent {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wizconsent__title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--v3-ink);
}

.wizconsent__body {
    margin: 0;
    font-size: 12px;
    line-height: 2;
    color: var(--v3-text);
}

.wizconsent__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-block-start: 10px;
    font-size: 12px;
    line-height: 1.9;
    color: var(--v3-ink);
    cursor: pointer;
}

.wizconsent__check.is-invalid {
    color: var(--v3-rust);
}

.wizconsent__box {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 4px 0 0;
    accent-color: var(--v3-green);
}

/* «راجع بيانات العمل» (628:19896): white boxes two to a row, label over value. */
.wizreview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    margin: 0;
}

.wizreview__item {
    padding: 18px 20px 20px;
    border: 1px solid var(--stone);
    background: var(--paper);
}

.wizreview__label {
    font-size: 12px;
    line-height: 1.7;
    color: var(--v3-text);
}

.wizreview__value {
    margin: 6px 0 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--v3-ink);
    overflow-wrap: anywhere;
}

.wizreview__value.is-empty,
.wizreview__line dd.is-empty {
    color: var(--v3-hint);
}

.wizreview__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.wizreview__edit {
    font-size: 13px;
    line-height: 1.8;
    color: var(--v3-green);
    border-block-end: 1px solid currentColor;
}

.wizreview__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.wizreview__line {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
    font-size: 14px;
    line-height: 1.8;
}

.wizreview__line dt {
    color: var(--v3-text);
}

.wizreview__line dd {
    margin: 0;
    color: var(--v3-ink);
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .wizreview,
    .wizard3 .wizgrid--flush {
        grid-template-columns: minmax(0, 1fr);
    }

    .wizreview__line {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .wizard3 .wizparty {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "logo" "name";
    }
}

/* ==========================================================================
   Phase 13 (October 2026): «ابحث في البوابة», the light search card
   (Figma 628:20138, empty 628:20156), and the /search page in its dress
   ========================================================================== */

.spotlight3 {
    align-items: center;
    padding: 1rem;
}

.spotlight3 .spotlight__scrim {
    background: rgba(18, 22, 26, 0.6);
}

.spotlight3__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 620px);
    max-height: calc(100dvh - 2rem);
    padding: 38px 39px 30px;
    border: 1px solid var(--stone);
    background: var(--paper);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.33);
    color: var(--v3-ink);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s var(--ease-menu, ease);
}

.spotlight3.is-open .spotlight3__card {
    opacity: 1;
    transform: none;
}

.spotlight3__close {
    position: absolute;
    inset-block-start: 21px;
    inset-inline-end: 21px;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    padding: 0;
    border: 1px solid var(--stone);
    background: none;
    color: var(--v3-ink);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.spotlight3__close:hover,
.spotlight3__close:focus-visible {
    border-color: var(--v3-green);
    color: var(--v3-green);
}

.spotlight3__closeicon {
    width: 10px;
    height: 10px;
}

.spotlight3__eyebrow {
    margin: 0;
    font-size: 11px;
    line-height: 1.9;
    color: var(--v3-green);
}

.spotlight3__title {
    margin: 14px 0 0;
    font-family: inherit;
    font-size: 31px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--v3-ink);
}

.spotlight3__label {
    margin-block-start: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--v3-ink);
}

.spotlight3__field {
    flex: none;
    width: 100%;
    height: 46px;
    margin-block-start: 6px;
    padding: 0 13px;
    border: 1px solid var(--v3-field-line);
    border-radius: 0;
    background: var(--paper);
    font: inherit;
    font-size: 13px;
    color: var(--v3-ink);
    outline: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The card has its own «×»; the browser's clear button inside the field is not drawn. */
.spotlight3__field::-webkit-search-cancel-button,
.searchpage3__field input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.spotlight3__field:focus {
    border-color: var(--v3-green);
    box-shadow: 0 0 0 1px var(--v3-green);
}

.spotlight3__results {
    flex: 1 1 auto;
    min-height: 0;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.spotlight3__results[hidden] {
    display: none;
}

.spotlight3__row {
    border-block-end: 1px solid var(--stone);
}

.spotlight3__link,
.searchpage3__link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 10px 12px;
    transition: background-color 0.15s ease;
}

.spotlight3__row[aria-selected="true"] .spotlight3__link,
.spotlight3__link:hover,
.searchpage3__link:hover,
.searchpage3__link:focus-visible {
    background: var(--sand);
}

.spotlight3__rowtitle {
    font-size: 15px;
    line-height: 1.6;
    color: var(--v3-green);
}

.spotlight3__caption {
    font-size: 11px;
    line-height: 1.6;
    color: var(--v3-green);
    opacity: 0.85;
}

.spotlight3__empty {
    margin: 30px 0 14px;
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
    color: var(--v3-hint);
}

/* --- /search without script */

.searchpage3 {
    padding-block-end: 72px;
    background: var(--paper);
}

.searchpage3__body {
    max-width: 760px;
    margin-inline: auto;
    padding-block-start: 36px;
    font-family: var(--font-lama);
}

.searchpage3__form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.searchpage3__field {
    flex: 1 1 auto;
}

.searchpage3__submit {
    min-height: 54px;
}

.searchpage3__list {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.searchpage3__row {
    border-block-end: 1px solid var(--stone);
}

.searchpage3__empty {
    margin: 40px 0 0;
    font-size: 15px;
    text-align: center;
    color: var(--v3-hint);
}

@media (max-width: 560px) {
    .spotlight3__card {
        padding: 30px 18px 20px;
    }

    .spotlight3__title {
        font-size: 26px;
    }

    .searchpage3__form {
        flex-direction: column;
        align-items: stretch;
    }
}

/* --------------------------------------------- the launch countdown (October 2026)
 *
 * «الإطلاق الرسمي خلال» in the home hero, between the title and the line under it, drawn as a
 * strip of film: four frames — days, hours, minutes, seconds — between two rows of sprocket
 * holes, the numbers in the title's light weight dropping in as they change. The seconds sit on a
 * projector's countdown-leader dial (a circle, its crosshair, and a gold sweep for what is left of
 * the minute: --sweep, 0–1, set by Blade and then web.js). The gold label carries a slow pulse and
 * the date. Not in the Figma file; drawn from the hero's own palette. Gone once
 * config('site.launch_at') has passed.
 */

.launchcd {
    margin-block-start: 30px;
}

.launchcd__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mustard);
}

.launchcd__pulse {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mustard);
}

.launchcd__pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: launchcd-pulse 2s ease-out infinite;
}

@keyframes launchcd-pulse {
    from {
        opacity: 0.6;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(3);
    }
}

/* The date, as a small outlined tag after the words. */
.launchcd__date {
    padding: 2px 8px;
    border: 1px solid rgba(223, 175, 59, 0.4);
    font-size: 11px;
    color: var(--stone);
}

/* The film: a band darker than the hero, its sprocket holes along both edges. */
.launchcd__strip {
    --hole: rgba(239, 234, 224, 0.16);
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding-block: 16px;
    background: #0b0e11;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.launchcd__strip::before,
.launchcd__strip::after {
    content: "";
    position: absolute;
    inset-inline: 6px;
    height: 5px;
    background-image: linear-gradient(to right, var(--hole) 0 7px, transparent 7px);
    background-size: 13px 5px;
    background-repeat: repeat-x;
    border-radius: 1px;
}

.launchcd__strip::before {
    top: 5px;
}

.launchcd__strip::after {
    bottom: 5px;
}

.launchcd__units {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each frame, the film's thin gold line between it and the next. */
.launchcd__unit {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: clamp(4.25rem, 5.9vw, 5.5rem);
    padding: 12px 12px 10px;
    overflow: hidden;
}

.launchcd__unit + .launchcd__unit {
    border-inline-start: 1px solid rgba(223, 175, 59, 0.28);
}

.launchcd__value {
    position: relative;
    z-index: 1;
    display: block;
    font-size: clamp(1.875rem, 2.6vw, 2.5rem);
    font-weight: 300;
    line-height: 1;
    color: var(--sand);
    font-variant-numeric: tabular-nums;
}

/* A digit that has just changed drops into place (web.js re-adds the class each tick). */
.launchcd__value.is-ticking {
    animation: launchcd-drop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes launchcd-drop {
    from {
        opacity: 0;
        transform: translateY(-45%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.launchcd__name {
    position: relative;
    z-index: 1;
    font-size: 11px;
    line-height: 1.2;
    color: var(--stone);
}

/* The seconds on the countdown-leader dial: a ring with its crosshair, and a gold sweep that
   drains with the minute. */
.launchcd__unit--dial .launchcd__value {
    color: var(--mustard);
}

.launchcd__unit--dial::before,
.launchcd__unit--dial::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.75rem;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.launchcd__unit--dial::before {
    background: conic-gradient(rgba(223, 175, 59, 0.22) calc(var(--sweep, 0) * 1turn), transparent 0);
}

.launchcd__unit--dial::after {
    border: 1px solid rgba(223, 175, 59, 0.35);
    background:
        linear-gradient(rgba(223, 175, 59, 0.18), rgba(223, 175, 59, 0.18)) center / 1px 100% no-repeat,
        linear-gradient(rgba(223, 175, 59, 0.18), rgba(223, 175, 59, 0.18)) center / 100% 1px no-repeat;
}

@media (max-width: 560px) {
    .launchcd__strip {
        display: block;
    }

    .launchcd__unit {
        flex: 1;
        min-width: 0;
        padding-inline: 4px;
    }

    .launchcd__unit--dial::before,
    .launchcd__unit--dial::after {
        width: 3.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .launchcd__pulse::after,
    .launchcd__value.is-ticking {
        animation: none;
    }
}