/* Thunder Production — shared design system */

/* Fonts are self-hosted (assets/fonts, SIL Open Font License): Archivo for
   Latin display type, IBM Plex Sans Arabic for Arabic and body text. Only the
   arabic / latin / latin-ext subsets are kept; the browser downloads a file
   only when the page uses characters from its unicode-range. Each page
   preloads the one or two files its first screen needs. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/archivo-latin-ext-var.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/archivo-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-500.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-ext-500.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-ext-600.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  /* Official Thunder Production palette */
  --ink: #1E191A;        /* Thunder Black */
  --storm: #012E14;      /* Thunder Green — main brand anchor */
  --storm-2: #06451F;    /* lighter green, derived, for gradients/hover only */
  --paper: #FFFFFF;      /* White — used generously for calm, premium space */
  --sand: #DAF1DA;       /* Thunder Soft Green */
  --charcoal: #1E191A;   /* Thunder Black, used for occasional black sections */
  --line: rgba(30,25,26,0.12);
  --line-dark: rgba(255,255,255,0.16);
  --gold: #F9A905;       /* Thunder Mustard — primary accent, use intentionally */
  --gold-bright: #F9A905;
  --red: #F03919;        /* Thunder Red — sparing secondary accent only */
  --orange: #CA4E0A;     /* deep orange from the Mustard→Red range of the palette; dark enough for white text at 4.5:1 — the services section */
  --text-muted: rgba(30,25,26,0.74);
  --on-dark: #FFFFFF;
  --on-dark-muted: rgba(255,255,255,0.7);
  --container: 1320px;
  --header-h: 104px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{ color: inherit; text-decoration: none; }
img{ display: block; max-width: 100%; }
button, input, select, textarea{ font-family: inherit; }

.skip-link{
  position: fixed; top: -60px; inset-inline-start: 12px; z-index: 999;
  background: var(--storm); color: var(--on-dark);
  padding: 12px 20px; border-radius: 0; font-size: 14px; font-weight: 600;
  transition: top .2s ease;
}
.skip-link:focus{ top: 12px; }
button{ cursor: pointer; }
:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; }
/* Gold only reaches ~2:1 against white/soft-green — well under the 3:1 a
   focus indicator needs to actually be visible — so keyboard focus would
   have gone nearly invisible while tabbing through the "Our Work" tiles,
   the "View All Work" button, or the header once scrolled past the hero
   into a light section. Storm green keeps it on-brand and passes cleanly. */
.bg-paper :focus-visible, .bg-sand :focus-visible,
.site-header.scrolled:not(.on-dark) :focus-visible{ outline-color: var(--storm); }

[dir="ltr"] [lang="ar"]{ display: none !important; }
[dir="rtl"] [lang="en"]{ display: none !important; }
.ltr-always{ direction: ltr; unicode-bidi: isolate; display: inline-block; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.container{ max-width: var(--container); margin: 0 auto; padding-inline: clamp(20px, 4vw, 56px); }
.section{ position: relative; padding-block: clamp(72px, 11vw, 148px); }
.section-tight{ padding-block: clamp(48px, 7vw, 88px); }
.bg-paper{ background: var(--paper); color: var(--ink); }
.bg-sand{ background: var(--sand); color: var(--ink); }
.bg-storm{ background: var(--storm); color: var(--on-dark); }
.bg-charcoal{ background: var(--charcoal); color: var(--on-dark); }
/* Faded white text is pre-mixed with the section color instead of being
   see-through: Arabic letters overlap slightly where they join, and an rgba
   color paints each overlap twice, leaving bright seams inside words. */
.bg-storm{ --on-dark-muted: #B3C0B9; }
.bg-charcoal, .site-footer{ --on-dark-muted: #BCBABA; }

.eyebrow{ display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--gold); margin: 0 0 18px; }
/* Gold only reads on dark sections; on the light ones (paper/sand) it is
   ~1.6:1, so switch to storm green there. */
.bg-paper .eyebrow, .bg-sand .eyebrow{ color: var(--storm); }
.bg-storm .eyebrow, .bg-charcoal .eyebrow{ color: var(--gold-bright); }

/* A plain text link ("← Back to Work") was floating alone above the title
   with almost no separation and no affordance beyond its color — easy to
   miss and, on light sections, it was also sitting at gold-on-white's
   ~2:1 contrast (same failure the CTA button had). Storm green passes
   contrast cleanly and the animated arrow gives it a real hover state. */
.back-link{ display: inline-flex; align-items: center; gap: 8px; color: var(--storm); font-size: 14px; font-weight: 600; margin-bottom: 28px; min-height: 32px; }
.back-link svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; transition: transform .25s cubic-bezier(.16,1,.3,1); }
[dir="rtl"] .back-link svg{ transform: scaleX(-1); }
.back-link:hover svg{ transform: translateX(-4px); }
[dir="rtl"] .back-link:hover svg{ transform: scaleX(-1) translateX(-4px); }
.bg-storm .back-link, .bg-charcoal .back-link{ color: var(--on-dark); }

h1, h2, h3{ margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.h-display{ font-family: "Archivo", "IBM Plex Sans Arabic", sans-serif; font-weight: 800; font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 0.98; letter-spacing: -0.02em; }
[dir="rtl"] .h-display{ font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.h-section{ font-family: "Archivo", "IBM Plex Sans Arabic", sans-serif; font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.05; letter-spacing: -0.01em; }
[dir="rtl"] .h-section{ font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.body-lg{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-muted); max-width: 56ch; }
.bg-storm .body-lg, .bg-charcoal .body-lg{ color: var(--on-dark-muted); }

.rule{ border: 0; border-top: 1px solid var(--line); margin: 0; }
.bg-storm .rule, .bg-charcoal .rule{ border-top-color: var(--line-dark); }

.btn{ display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: 0; font-size: 14.5px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; }
/* Mustard gold as a text color only reaches ~2:1 contrast against white,
   well under WCAG AA's 4.5:1 minimum for normal text — this was shipping
   as white-on-gold, making the site's primary CTA button nearly illegible
   (confirmed both by computed luminance and by eye). Ink text is the only
   on-brand pairing that actually passes against the gold fill, so it's now
   the resting state, not just the hover state. */
/* This is the "Start a Project" CTA — the conversion action, meant to pop
   harder than the secondary "View Work" outline button next to it. Glows
   on both hover AND keyboard focus (not just hover) so it attracts the eye
   the same way regardless of how someone's navigating. */
.btn-gold{ background: var(--gold); color: var(--ink); }
.btn-gold:hover, .btn-gold:focus-visible{
  background: #e0980a; transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(249,169,5,0.5), 0 0 32px 8px rgba(249,169,5,0.6), 0 10px 24px rgba(0,0,0,0.22);
}
.btn-outline{ border-color: var(--line); color: var(--ink); }
.btn-outline:hover{ border-color: var(--gold); }
.bg-storm .btn-outline, .bg-charcoal .btn-outline{ border-color: var(--line-dark); color: var(--on-dark); }
.bg-storm .btn-outline:hover, .bg-charcoal .btn-outline:hover{ border-color: var(--gold-bright); }

/* ---------- Header ---------- */
/* Draft 3: a flat, full-width bar flush with the viewport top (no floating
   pill, no blur, no rounded shell) — matches the reference sites' minimal
   top bar sitting directly on the hero video. Over the hero, unscrolled, it
   carries no background at all; hovering it fades in a dark scrim behind
   the text so it stays legible without permanently darkening the video —
   the effect asked for from thegatefilms.com. Once scrolled (or over any
   non-hero section), .scrolled takes over with a solid/near-solid tone so
   the bar stays usable across the rest of the site. */
/* Draft 3 correction: matched to thegatefilms.com's actual bar — hamburger,
   a dead-centered logo, one small utility (language) — not a full nav list,
   not a CTA button, not a mail-icon dropdown. The nav links
   live only in the hamburger overlay, shown at every width, not just
   mobile; contact details live in the footer and floating buttons only. */
.site-header{
  position: fixed; top: 0; inset-inline: 0; z-index: 200;
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: clamp(20px, 4vw, 56px);
  background: transparent;
  border: 0; border-radius: 0; box-shadow: none;
  transition: background .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1);
}
.site-header:not(.scrolled):hover{
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 65%, rgba(0,0,0,0) 100%);
}
.site-header.scrolled{ background: rgba(255,255,255,0.94); box-shadow: 0 1px 0 rgba(30,25,26,0.08); }
.site-header.on-dark.scrolled{ background: rgba(1,46,20,0.92); box-shadow: 0 1px 0 rgba(255,255,255,0.08); }

.brand{ display: flex; align-items: center; gap: 10px; justify-self: center; }
.brand img{ height: 68px; width: auto; }
@media (max-width: 720px){
  :root{ --header-h: 84px; }
  .site-header{ padding-inline: 16px; }
  .brand img{ height: 52px; }
}

.lang-btn{ justify-self: end; background: transparent; border: 1px solid var(--line); color: inherit; border-radius: 0; padding: 6px 14px; font-size: 12.5px; font-weight: 500; }
.site-header.on-dark .lang-btn{ border-color: var(--line-dark); color: var(--on-dark); }

.hamburger{ justify-self: start; display: flex; width: 32px; height: 32px; border-radius: 0; border: 1px solid var(--line); align-items: center; justify-content: center; background: transparent; color: var(--ink); flex-shrink: 0; }
.site-header.on-dark .hamburger{ border-color: var(--line-dark); color: var(--on-dark); }
.hamburger svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
/* Touch target: 32px clears the WCAG AA minimum (24px) but is short of the
   44px comfort guideline for a thumb-operated control — bump it here since
   the hamburger is the only way to open nav on mobile, without touching the
   compact 32px desktop treatment that sits fine under a mouse cursor. Placed
   after the base rules above (not inside the earlier @media block) so it
   actually wins the cascade instead of losing to same-specificity rules
   that come later in source order regardless of media-query truth. */
@media (max-width: 720px){
  .hamburger{ width: 44px; height: 44px; }
  .lang-btn{ min-height: 44px; padding-inline: 16px; }
}

/* Compact dropdown, not a full-screen takeover — anchored under the
   hamburger via inset-inline-start, which sits on the same side as the
   hamburger itself in both directions (right in RTL, left in LTR) since
   both use logical properties. Each link reveals with its own staggered
   delay on open rather than everything appearing at once. */
.mobile-menu{
  position: fixed; top: calc(var(--header-h) + 8px); z-index: 300;
  inset-inline-start: clamp(16px, 4vw, 24px);
  width: min(260px, calc(100vw - 32px));
  background: transparent; border: 0; padding: 4px 22px;
  visibility: hidden;
}
.mobile-menu.open{ visibility: visible; }
.mobile-menu > a{
  display: block; font-family: "Archivo","IBM Plex Sans Arabic",sans-serif; font-weight: 700;
  font-size: 1.15rem; color: var(--on-dark); padding: 8px 0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5);
  opacity: 0; transform: translateY(14px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), color .2s ease;
}
[dir="rtl"] .mobile-menu > a{ font-weight: 600; }
.mobile-menu > a:hover{ color: var(--gold-bright); }
/* The menu itself has no panel, so on its own its text collided with
   whatever section sat behind it (unreadable over the work tiles). A
   full-screen scrim now fades in under it (below the header, above the
   page), so the links always sit on the same dark green. Clicking the
   scrim closes the menu (see initHeader). */
.menu-scrim{
  position: fixed; inset: 0; z-index: 150;
  background: rgba(1,46,20,0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
body.menu-open .menu-scrim{ opacity: 1; visibility: visible; transition-delay: 0s; }
body.menu-open .site-header{ background: transparent; box-shadow: none; }
body.menu-open .site-header .lang-btn,
body.menu-open .site-header .hamburger{ color: var(--on-dark); border-color: var(--line-dark); }
.mobile-menu.open > a:nth-child(1){ transition-delay: .08s; }
.mobile-menu.open > a:nth-child(2){ transition-delay: .17s; }
.mobile-menu.open > a:nth-child(3){ transition-delay: .26s; }
.mobile-menu.open > a:nth-child(4){ transition-delay: .35s; }
.mobile-menu.open > a:nth-child(5){ transition-delay: .44s; }
.mobile-menu.open > a{ opacity: 1; transform: translateY(0); }

/* ---------- Hero ---------- */
.hero{ position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #050f0a; }
.hero-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,15,10,0.35) 0%, rgba(5,15,10,0.25) 40%, rgba(5,15,10,0.82) 100%); }
.hero-content{ position: relative; z-index: 1; padding: 0 clamp(20px, 4vw, 56px) clamp(100px, 14vh, 150px); max-width: 1180px; }
.hero-headline{ color: var(--on-dark); margin: 0; }
.hero-sub{ margin: 20px 0 0; max-width: 560px; color: var(--on-dark-muted); font-size: clamp(1rem, 1.5vw, 1.15rem); }
.hero-actions{ margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.scroll-cue{ position: absolute; bottom: 28px; inset-inline-start: 50%; transform: translateX(-50%); color: var(--on-dark-muted); font-size: 12px; letter-spacing: 0.08em; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 1; }
[dir="rtl"] .scroll-cue{ transform: translateX(50%); }
.scroll-cue .line{ width: 1px; height: 26px; background: var(--on-dark-muted); animation: scrollcue 1.8s ease infinite; }
@keyframes scrollcue{ 0%{ transform: scaleY(0); transform-origin: top; } 50%{ transform: scaleY(1); transform-origin: top; } 51%{ transform-origin: bottom; } 100%{ transform: scaleY(0); transform-origin: bottom; } }
@media (max-height: 700px){ .scroll-cue{ display: none; } }

/* ---------- Inner page header (Work, Services, About) ----------
   The old full green title band filled most of the first screen before any
   real content. Now the green is only a header-height strip (the header
   sits on it) and the eyebrow / title / intro sit compactly on white right
   above the content. Contact keeps its original green band. */
.page-strip{ height: var(--header-h); }
.page-head{ padding-block: clamp(36px, 4.5vw, 56px) clamp(16px, 2.5vw, 28px); }
.page-head .eyebrow{ margin-bottom: 10px; }
.page-head .h-display{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.05; margin: 0 0 12px; }
.page-head .body-lg{ margin: 0; }
.page-body{ padding-top: clamp(16px, 2.5vw, 28px); }
/* Services keeps its title block on green, flowing straight on from the
   header (no separate strip), still compact. */
.page-head--dark{ padding-top: calc(var(--header-h) + clamp(6px, 1.2vw, 14px)); padding-bottom: clamp(20px, 2.6vw, 30px); }
.page-head--dark .eyebrow{ margin-bottom: 4px; }
.page-head--dark .h-display{ margin-bottom: 6px; }
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Editorial work grid ---------- */
.work-editorial{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.work-tile{ position: relative; overflow: hidden; cursor: pointer; background: #0d0d0a; aspect-ratio: 4/3; grid-column: span 3; border-radius: 0; }
.work-tile.large{ grid-column: span 4; aspect-ratio: 16/10; }
.work-tile.small{ grid-column: span 2; aspect-ratio: 3/4; }
.work-tile img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.work-tile:hover img{ transform: scale(1.045); }
/* Unlike .kode-tile on the homepage (a carousel where hover-to-reveal
   pairs with hover-to-expand-and-play-video), this is a plain browsing
   grid — the title/client is the only way to tell tiles apart before
   clicking, so it needs to be visible up front, not gated behind a hover
   a touch-device visitor can never trigger. Was opacity:0 by default. */
.work-tile .tile-info{
  position: absolute; inset-inline: 0; bottom: 0; padding: 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.78) 100%);
  color: #fff;
}
.work-tile .tile-title{ font-size: 18px; font-weight: 700; margin: 0; }
.work-tile .tile-meta{ font-size: 12.5px; color: rgba(255,255,255,0.72); margin: 4px 0 0; }
.work-tile .tile-play{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(251,175,23,0.94); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; }
.work-tile:hover .tile-play{ opacity: 1; }
.work-tile .tile-play svg{ width: 16px; height: 16px; fill: var(--ink); margin-inline-start: 2px; }
.work-tile iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px){
  .work-editorial{ grid-template-columns: repeat(2, 1fr); }
  .work-tile, .work-tile.large, .work-tile.small{ grid-column: span 2; aspect-ratio: 4/3; }
}

/* ---------- Home "Our Work" strip ----------
   A sideways rail at every screen size that drifts on its own in an
   endless loop (loopingRail() in site.js) and that people can also move
   themselves: swipe, trackpad, or drag the scroller bar under it
   (.swipe-bar, below). It runs edge to edge past the container's padding.
   On a mouse, hovering a tile stops the drift, opens the tile wider and a
   muted Vimeo embed swaps in for the still so its real video plays inside
   (renderFeaturedWork() in index.html). No scroll snapping: it would fight
   the drift. */
.kode-viewport{
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  margin-inline: calc(-1 * clamp(20px, 4vw, 56px));
  padding-inline: clamp(20px, 4vw, 56px); scroll-padding-inline: clamp(20px, 4vw, 56px);
}
.kode-viewport::-webkit-scrollbar{ display: none; }
.kode-row{ display: flex; gap: 14px; align-items: stretch; width: max-content; }
.kode-tile{
  --tile-w: clamp(240px, 19vw, 320px);
  position: relative; overflow: hidden; cursor: pointer; background: #0d0d0a;
  flex: 0 0 auto; width: var(--tile-w); height: clamp(320px, 38vw, 560px);
  transition: width .6s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) and (pointer: fine){
  .kode-tile:hover{ width: calc(var(--tile-w) * 2.2); }
}
.kode-media{ position: absolute; inset: 0; overflow: hidden; }
.kode-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kode-media iframe{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 0; pointer-events: none; }
.kode-tile .tile-info{
  position: absolute; inset-inline: 0; bottom: 0; padding: 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.8) 100%);
  color: #fff; opacity: 0; transform: translateY(8px);
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
  white-space: nowrap; overflow: hidden;
  pointer-events: none;
}
.kode-tile:hover .tile-info{ opacity: 1; transform: translateY(0); }
.kode-tile .tile-title{ font-size: 18px; font-weight: 700; margin: 0; text-overflow: ellipsis; overflow: hidden; }
.kode-tile .tile-meta{ font-size: 12.5px; color: rgba(255,255,255,0.72); margin: 4px 0 0; }
/* Phones and tablets (any touch screen, or a window 900px or narrower):
   4:5 tiles, and no hover-widening. */
@media (max-width: 900px), (hover: none) and (pointer: coarse){
  .kode-row{ gap: 12px; }
  .kode-tile, .kode-tile:hover{ --tile-w: clamp(250px, 72vw, 340px); width: var(--tile-w); height: auto; aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce){ .kode-tile{ transition: none; } }

/* Scroller bar under a sideways rail: a short track whose thumb shows how
   much of the rail is in view and where you are in it, so it's plain
   there's more to see (initSwipeRails in site.js). It can be dragged (mouse
   or finger): the bar itself is a 24px-tall grab area around the 3px line,
   which thickens while hovered or held. On the looping work strip the
   thumb wraps around, so the bar clips it. Hidden whenever the rail
   already fits, like the services row on wide screens. */
.swipe-bar{
  position: relative; overflow: hidden; width: min(180px, 48%); height: 24px; margin: 11px auto 0;
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
  transition: opacity .9s cubic-bezier(.16,1,.3,1);
}
.swipe-bar.is-dragging{ cursor: grabbing; }
.swipe-bar.is-idle{ display: none; }
/* fades in with the strip it belongs to */
.reveal:not(.is-visible) + .swipe-bar{ opacity: 0; }
.swipe-bar::before, .swipe-thumb{
  position: absolute; top: 50%; height: 3px; transform: translateY(-50%);
  transition: height .2s ease;
}
.swipe-bar::before{ content: ''; inset-inline: 0; background: rgba(30,25,26,0.12); }
.swipe-thumb{ inset-inline-start: 0; width: 30%; min-width: 28px; background: var(--storm); }
.swipe-bar:hover::before, .swipe-bar.is-dragging::before,
.swipe-bar:hover .swipe-thumb, .swipe-bar.is-dragging .swipe-thumb{ height: 6px; }
.bg-storm .swipe-bar::before{ background: rgba(255,255,255,0.2); }
.bg-storm .swipe-thumb{ background: var(--gold); }
/* Touch screens (and the stacked phone layout) have no hover, so the
   title/client would never appear — show it permanently there instead. */
@media (max-width: 900px), (hover: none){
  .kode-tile .tile-info{ opacity: 1; transform: none; white-space: normal; }
  .kode-tile .tile-title{ text-overflow: clip; }
}

/* ---------- Services editorial ---------- */
.services-edit{ display: flex; flex-direction: column; }
.service-row{ border-top: 1px solid var(--line); padding: 44px 0; display: grid; grid-template-columns: 0.9fr 1.5fr; gap: 40px; cursor: pointer; }
.services-edit .service-row:last-child{ border-bottom: 1px solid var(--line); }
.service-row .sr-head{ display: flex; align-items: baseline; gap: 18px; }
.service-row .sr-num{ font-size: 13px; color: var(--text-muted); }
.service-row h3{ font-family: "Archivo","IBM Plex Sans Arabic",sans-serif; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; }
[dir="rtl"] .service-row h3{ font-weight: 600; }
.service-row .sr-list{ list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.service-row.open .sr-list{ max-height: 400px; }
.service-row .sr-list li{ padding: 8px 0; color: var(--text-muted); font-size: 15px; border-top: 1px solid var(--line); }
.service-row .sr-list li:first-child{ border-top: 0; }
.service-row .sr-toggle{ font-size: 22px; color: var(--gold); line-height: 1; align-self: center; justify-self: end; }
[dir="rtl"] .service-row .sr-toggle{ justify-self: start; }
@media (max-width: 760px){ .service-row{ grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Services card grid — hover to expand ---------- */
/* ---------- Services page ----------
   The four disciplines sit across the top like clips on an edit timeline:
   the active one carries the gold bar. Choosing one cuts the panel over —
   the image wipes in like a film cut while the text settles. Deep-linkable
   (#creative, #production, #post, #films). Below it, the real order a
   project moves in, as numbered steps (it is a sequence). */
.sv-explorer{ padding-block: clamp(64px, 8vw, 112px); }
.bg-orange{ background: var(--orange); color: #fff; }
.sv-tabs{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(10px, 1.6vw, 20px); margin-bottom: clamp(36px, 5vw, 64px); }
.sv-tabs button{
  position: relative; background: none; border: 0; padding: 22px 0 0; text-align: start; cursor: pointer;
  color: #fff; font-size: clamp(0.95rem, 1.25vw, 1.1rem); font-weight: 500; line-height: 1.4;
  transition: color .25s ease;
}
.sv-tabs button::before{
  content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px; background: rgba(255,255,255,0.28);
}
.sv-tabs button::after{
  content: ''; position: absolute; top: 0; inset-inline-start: 0; height: 3px; width: 0; background: var(--storm);
  transition: width .6s cubic-bezier(.16,1,.3,1);
}
/* Hover hint on the tabs not yet chosen: the bar starts to fill (a preview
   of what a click does) and the name eases a step in the reading direction. */
@media (hover: hover){
  .sv-tabs button{ transition: color .25s ease, padding .45s cubic-bezier(.16,1,.3,1); }
  .sv-tabs button:not([aria-selected="true"]):hover{ padding-inline-start: 8px; }
  .sv-tabs button:not([aria-selected="true"]):hover::after{ width: 32%; opacity: 0.6; }
}
.sv-tabs button::after{ transition: width .6s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.sv-tabs button[aria-selected="true"]{ color: #fff; font-weight: 700; }
.sv-tabs button[aria-selected="true"]::after{ width: 100%; }
.sv-tabs button:focus-visible{ outline: 2px solid #fff; outline-offset: 6px; }

.sv-panel{
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "copy items" "cta items"; grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 5vw, 88px); align-items: start;
}
.sv-copy{ grid-area: copy; }
.sv-items{ grid-area: items; }
.sv-cta{ grid-area: cta; }
.sv-copy h2{
  margin: 0 0 14px; font-family: "Archivo", "IBM Plex Sans Arabic", sans-serif; font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.02; letter-spacing: -0.02em; color: #fff;
}
[dir="rtl"] .sv-copy h2{ font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.sv-desc{ margin: 0 0 clamp(28px, 3.5vw, 40px); max-width: 48ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.75; color: #fff; }
/* Items: on hover a green fill sweeps in from the reading start and the
   text turns white. */
.sv-items{ list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(255,255,255,0.28); }
.sv-items li{
  position: relative; isolation: isolate; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.28);
  font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 500; color: #fff;
  transition: color .3s ease, padding .45s cubic-bezier(.16,1,.3,1);
}
.sv-items li::before{
  content: ''; position: absolute; inset: -1px 0 0; z-index: -1; background: var(--storm);
  transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.16,1,.3,1);
}
[dir="rtl"] .sv-items li::before{ transform-origin: right center; }
@media (hover: hover){
  .sv-items li:hover{ color: #fff; padding-inline-start: 18px; }
  .sv-items li:hover::before{ transform: scaleX(1); }
}
.sv-explorer .btn-gold{ background: var(--storm); color: #fff; }
.sv-explorer .btn-gold:hover, .sv-explorer .btn-gold:focus-visible{ background: var(--ink); color: #fff; }
.sv-panel.is-cut > *{ animation: sv-settle .6s cubic-bezier(.16,1,.3,1) both; }
.sv-panel.is-cut > .sv-items{ animation-delay: .06s; }
@keyframes sv-settle{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
@media (max-width: 860px){
  .sv-tabs{ display: flex; overflow-x: auto; scrollbar-width: none; gap: 18px; margin-inline: calc(-1 * clamp(20px, 4vw, 56px)); padding-inline: clamp(20px, 4vw, 56px); }
  .sv-tabs::-webkit-scrollbar{ display: none; }
  .sv-tabs button{ flex: 0 0 auto; min-width: 62%; padding-bottom: 6px; }
  .sv-panel{ grid-template-columns: 1fr; grid-template-areas: "copy" "items" "cta"; grid-template-rows: auto; }
  .sv-cta{ margin-top: 32px; }
  /* Swipe cue. At 62% wide only one and a half tabs fit and the second
     one's bar ran clean into the screen edge, so nothing said there were
     three more. Tabs now take their own width, so the next name peeks in at
     the edge, and that edge fades out while there is more to see that way
     (.more-start / .more-end, set by initTabsCue), "01 — 05" sits above
     the row's far end with a thin arrow that steps to the next service, and
     the row nudges itself once when it first comes into view (nudgeRail). */
  .sv-tabs{ gap: 28px; }
  .sv-tabs button{ min-width: 0; max-width: 80%; white-space: nowrap; }
  [dir="rtl"] .sv-tabs{ --to-end: to left; }
  [dir="ltr"] .sv-tabs{ --to-end: to right; }
  .sv-tabs.more-end{ -webkit-mask-image: linear-gradient(var(--to-end), #000 calc(100% - 84px), transparent); mask-image: linear-gradient(var(--to-end), #000 calc(100% - 84px), transparent); }
  .sv-tabs.more-start{ -webkit-mask-image: linear-gradient(var(--to-end), transparent, #000 56px); mask-image: linear-gradient(var(--to-end), transparent, #000 56px); }
  .sv-tabs.more-start.more-end{ -webkit-mask-image: linear-gradient(var(--to-end), transparent, #000 56px, #000 calc(100% - 84px), transparent); mask-image: linear-gradient(var(--to-end), transparent, #000 56px, #000 calc(100% - 84px), transparent); }

  .sv-count{
    display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 14px;
    font-family: "Archivo", sans-serif; font-size: 13px; letter-spacing: 0.08em; color: #fff; font-variant-numeric: tabular-nums;
  }
  .sv-count-line{ width: 28px; height: 1px; background: rgba(255,255,255,0.45); }
  .sv-count-all{ color: #F2C3A8; }
  .sv-next{
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 32px; margin-inline-start: 2px;
    padding: 0; background: none; border: 0; color: #fff; cursor: pointer;
  }
  .sv-next svg{ width: 26px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation: sv-drift 2.6s cubic-bezier(.45,0,.25,1) infinite; }
  [dir="rtl"] .sv-next svg{ transform: scaleX(-1); animation-name: sv-drift-rtl; }
  @keyframes sv-drift{ 0%, 60%, 100%{ transform: translateX(0); } 30%{ transform: translateX(5px); } }
  @keyframes sv-drift-rtl{ 0%, 60%, 100%{ transform: scaleX(-1) translateX(0); } 30%{ transform: scaleX(-1) translateX(5px); } }
}
.sv-count{ display: none; }
@media (max-width: 860px){ .sv-count{ display: flex; } }
@media (prefers-reduced-motion: reduce){ .sv-next svg{ animation: none; } }

/* "من البريف … إلى الشاشة" — the section heading is split across the
   scroll: "من البريف" opens it, "إلى الشاشة." closes it, and a single
   hairline draws itself between them as you scroll, weaving past each
   stage (alternating sides, the first on the reading-start side). No
   track is shown ahead of the line; its tip is a soft dot. Each stage
   comes into focus as the line reaches it. Geometry + progress live in
   initServiceExplorer (the path is rebuilt from the real layout). */
.sv-process{ padding-block: clamp(80px, 11vw, 150px); }
.sv-journey{ position: relative; }
.sv-path{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sv-path-line{ fill: none; stroke: var(--storm); stroke-width: 1.5; stroke-linecap: round; }
.sv-path-halo{ fill: var(--storm); opacity: 0.12; }
.sv-path-head{ fill: var(--storm); }
.sv-j-title{
  position: relative; margin: 0; text-align: center;
  font-family: "Archivo", "IBM Plex Sans Arabic", sans-serif; font-weight: 800;
  font-size: clamp(2.8rem, 8vw, 7rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink);
}
[dir="rtl"] .sv-j-title{ font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.sv-j-start{ margin-bottom: clamp(96px, 16vh, 180px); }
.sv-j-end{ position: relative; padding-top: clamp(24px, 4vh, 48px); text-align: center; }
.sv-process-sub{ margin: 18px auto 0; max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.7; color: var(--text-muted); }
.sv-steps{ position: relative; list-style: none; margin: 0; padding: 0; }
.sv-step{ position: relative; width: 50%; padding-block: 0 clamp(80px, 14vh, 160px); }
.sv-step:nth-child(odd){ padding-inline-end: clamp(56px, 8vw, 120px); text-align: end; }
.sv-step:nth-child(even){ margin-inline-start: 50%; padding-inline-start: clamp(56px, 8vw, 120px); }
.sv-step-num{
  display: block; margin-bottom: 10px; font-family: "Archivo", sans-serif; font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--storm);
}
.sv-step h3{ margin: 0 0 8px; font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 700; line-height: 1.3; }
.sv-step p{ margin: 0; max-width: 36ch; font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.7; color: var(--text-muted); }
.sv-step:nth-child(odd) p{ margin-inline-start: auto; }
/* focus-in: hidden states only apply once JS is driving the scroll */
.sv-journey.is-live .sv-step, .sv-journey.is-live .sv-j-end{
  opacity: 0; transform: translateY(26px); filter: blur(8px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1);
}
.sv-journey.is-live .sv-step.is-in, .sv-journey.is-live .sv-j-end.is-in{ opacity: 1; transform: none; filter: none; }
@media (max-width: 900px){
  .sv-step, .sv-step:nth-child(odd), .sv-step:nth-child(even){
    width: auto; margin-inline-start: 0; padding: 0 0 clamp(64px, 10vh, 96px); padding-inline-start: 44px; text-align: start;
  }
  .sv-step:nth-child(odd) p{ margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce){
  .sv-panel.is-cut > *{ animation: none; }
  .sv-journey.is-live .sv-step, .sv-journey.is-live .sv-j-end{ transition: none; }
  .sv-items li, .sv-items li::before{ transition: none; }
  .sv-tabs button::after{ transition: none; }
}

/* ---------- Clients marquee ---------- */
/* direction:ltr is load-bearing here too, same reason as .kode-viewport
   above: pins the track's flush-side anchor to the left for both
   languages so the -50% loop never opens a gap under dir=rtl. Logo order
   inside the strip has no reading direction to preserve, so unlike the
   work row nothing needs to counter-set direction:rtl back. */
.marquee-wrap{ overflow: hidden; position: relative; direction: ltr; }
.marquee-track{ display: flex; align-items: center; gap: clamp(48px, 6vw, 96px); width: max-content; animation: marquee 21.2s linear infinite; } /* 15% slower than the original 18s */
/* No hover-pause here on purpose — unlike the work row (which needs to
   hold still so a hovered video can actually be watched), there's no
   reason for the logo strip to ever stop, and pausing on hover was the
   actual cause of it reading as "not looping": your cursor sits right on
   top of whatever you're currently looking at (inspecting, screenshotting),
   which was pausing it every time it was checked. */
.marquee-track img{ height: 44px; width: 132px; object-fit: contain; opacity: 0.9; transition: opacity .3s ease; }
.marquee-track img:hover{ opacity: 1; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; } }

/* ---------- About page ----------
   Built from film vocabulary instead of a generic company page: footage
   running inside the opening line, a statement that lights up as it is
   read, and the team set as end credits. The opening is the one bold
   moment; every section after it stays quiet and typographic. */

/* Opening — the h1 is black text on a white box in `screen` blend over the
   video: white stays pure white (seamless with the page) and the black
   letters become windows onto the footage. initAboutPage() fits the font
   size so the widest line spans the column exactly. */
.ab-open{ padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 96px); }
.ab-knock{ position: relative; isolation: isolate; overflow: hidden; }
.ab-knock video{
  /* inset 2px: at fractional pixel edges the white box antialiases and the
     video bled through as a faint outline; keeping the video just inside
     the box leaves those edge pixels on plain white. */
  position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover;
  filter: brightness(0.8) contrast(1.2) saturate(1.1);
}
.ab-knock h1{
  position: relative; margin: 0; padding-block: 0.02em 0.1em;
  background: #fff; color: #000; mix-blend-mode: screen;
  font-family: "Archivo", "IBM Plex Sans Arabic", sans-serif; font-weight: 900;
  font-size: clamp(3rem, 11vw, 10rem); line-height: 0.95; letter-spacing: -0.035em;
}
[dir="rtl"] .ab-knock h1{ font-weight: 700; line-height: 1.2; letter-spacing: 0; padding-block: 0 0.06em; }
.ab-knock .ab-line{ display: block; width: max-content; }
.ab-open-foot{
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: clamp(24px, 4vw, 72px); margin-top: clamp(28px, 3.5vw, 48px);
}
.ab-open-foot p{ margin: 0; max-width: 62ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.8; color: var(--ink); }
.ab-open-foot .btn svg{ width: 14px; height: 14px; fill: currentColor; }
@media (max-width: 760px){ .ab-open-foot{ grid-template-columns: 1fr; justify-items: start; } }

/* Our vision — heading beside the text on wide screens; the closing
   statement's words go from dim to white as it scrolls through view. */
.ab-story{ padding-block: clamp(80px, 11vw, 150px); }
.ab-story-grid{ display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(28px, 5vw, 88px); }
/* Same size as the page's other section heading ("Why Thunder"). */
.ab-story h2{
  margin: 0; align-self: start;
  font-family: "Archivo", "IBM Plex Sans Arabic", sans-serif; font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -0.02em; color: var(--gold);
}
[dir="rtl"] .ab-story h2{ font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.ab-story-body p{ margin: 0 0 1.2em; max-width: 60ch; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.85; color: var(--on-dark-muted); }
.ab-story-body p:last-child{ margin-bottom: 0; }
.ab-statement{
  grid-column: 1 / -1; margin: clamp(64px, 9vw, 120px) 0 0; max-width: 24ch;
  font-family: "Archivo", "IBM Plex Sans Arabic", sans-serif; font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.12; letter-spacing: -0.02em; color: #fff;
}
[dir="rtl"] .ab-statement{ max-width: 26ch; font-weight: 700; line-height: 1.45; letter-spacing: 0; }
.ab-statement .w{ color: #395C48; transition: color .45s ease; } /* 22% white on storm, solid */
.ab-statement .w.is-lit{ color: #fff; }
@media (max-width: 760px){
  .ab-story-grid{ grid-template-columns: 1fr; row-gap: 20px; }
}

/* Why Thunder — four values as full-width rows. On a mouse, hovering a row
   draws a green rule across it. */
.ab-why{ padding-block: clamp(80px, 10vw, 140px); }
.ab-why h2{
  margin: 0 0 clamp(36px, 5vw, 64px);
  font-family: "Archivo", "IBM Plex Sans Arabic", sans-serif; font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -0.02em;
}
[dir="rtl"] .ab-why h2{ font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.ab-pillars{ list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(30,25,26,0.2); }
.ab-pillar{
  position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 10px clamp(24px, 4vw, 64px); align-items: baseline;
  padding-block: clamp(24px, 3vw, 40px); border-top: 1px solid rgba(30,25,26,0.2);
}
.ab-pillar::before{
  content: ''; position: absolute; top: -1px; inset-inline-start: 0; height: 2px; width: 0;
  background: var(--storm); transition: width .7s cubic-bezier(.16,1,.3,1);
}
.ab-pillar h3{
  margin: 0; font-family: "Archivo", "IBM Plex Sans Arabic", sans-serif; font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.015em; transition: color .3s ease;
}
[dir="rtl"] .ab-pillar h3{ font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.ab-pillar p{ margin: 0; max-width: 46ch; font-size: 1.05rem; line-height: 1.75; color: var(--text-muted); }
@media (hover: hover){
  .ab-pillar:hover::before{ width: 100%; }
  .ab-pillar:hover h3{ color: var(--storm); }
}
@media (max-width: 760px){ .ab-pillar{ grid-template-columns: 1fr; } }

/* Closing line, then the clients as "in association with". */
.ab-credits{ padding-block: clamp(90px, 12vw, 170px); text-align: center; }
.ab-with h2{ margin: 0 0 clamp(32px, 4vw, 52px); font-size: 1rem; font-weight: 600; color: var(--on-dark-muted); }
.ab-credits-note{ max-width: 40ch; margin: 0 auto; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.7; color: var(--on-dark); }
.ab-with{ margin-top: clamp(72px, 9vw, 120px); }
.ab-logos{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(24px, 3vw, 40px) clamp(32px, 4vw, 56px); max-width: 1000px; margin: 0 auto; }
/* Invert + screen rather than brightness(0) invert(1): some logo files have a
   solid white backdrop (PIF, Flow), which the old filter turned into white
   blocks. Inverted, that backdrop goes black and `screen` drops it into
   the dark section, leaving only the marks. */
.ab-logos img{ height: clamp(26px, 3vw, 36px); width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1) invert(1) contrast(1.15); mix-blend-mode: screen; opacity: 0.8; }

@media (prefers-reduced-motion: reduce){
  .ab-statement .w, .ab-pillar::before, .ab-pillar h3{ transition: none; }
}

/* ---------- Final CTA ---------- */
.final-cta{ text-align: center; }
.final-cta .h-display{ margin-bottom: 34px; }

/* ---------- Homepage — hard section cuts, no blending ----------
   Every section below just uses its own flat .bg-paper/.bg-storm color and
   stops there — no gradient fade into the section above or below. None of
   the reference sites (thegatefilms.com, tigerhousefilms.com, kodemedia.com)
   blend sections into each other; they cut hard. */
.home-clients-quiet h2, .home-clients-quiet h3{ font-family: "Archivo","IBM Plex Sans Arabic",sans-serif; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
[dir="rtl"] .home-clients-quiet h3{ font-weight: 600; letter-spacing: 0; text-transform: none; }

.home-storm-panel > .container{ padding-block: clamp(48px, 8vw, 96px); }
.home-storm-panel > .container + .container{ padding-top: 0; }

.manifesto-text{
  font-family: "Archivo","IBM Plex Sans Arabic",sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: 30ch;
  margin: 0 auto;
}
[dir="rtl"] .manifesto-text{ font-weight: 700; line-height: 1.42; letter-spacing: 0; max-width: 26ch; }

/* The five disciplines as one quiet row under the manifesto: names split
   by hairlines (no boxes), each a link to its tab on the Services page.
   Hovering one turns it gold and draws a fine line under it while the
   rest dim. When the row is wider than the screen (phones, long English
   names) it swipes sideways, with the edges fading out. */
.capabilities-list{
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; justify-content: safe center;
  margin: clamp(40px, 5vw, 64px) auto 0; padding: 0 28px; list-style: none;
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.capabilities-list::-webkit-scrollbar{ display: none; }
.capabilities-list li{ display: flex; align-items: center; flex: 0 0 auto; white-space: nowrap; }
.capabilities-list li + li::before{
  content: ''; width: 1px; height: 22px; margin-inline: clamp(16px, 2.4vw, 36px); background: rgba(255,255,255,0.22);
}
.capabilities-list a{
  position: relative; display: block; padding-block: 10px;
  font-size: clamp(0.98rem, 1.25vw, 1.15rem); font-weight: 500; color: #E1E6E3; /* 88% white on storm, solid */
  transition: color .35s ease, opacity .35s ease;
}
/* Arabic names are shorter, so they can run larger and still fit one line */
[dir="rtl"] .capabilities-list a{ font-size: clamp(1rem, 1.45vw, 1.3rem); }
[dir="rtl"] .capabilities-list li + li::before{ height: 26px; }
/* English names run long: tighter dividers keep the row on one line at desktop widths */
[dir="ltr"] .capabilities-list li + li::before{ margin-inline: clamp(12px, 1.6vw, 24px); }
.capabilities-list a::after{
  content: ''; position: absolute; inset-inline: 0; bottom: 2px; height: 1px; background: var(--gold);
  transform: scaleX(0); transition: transform .5s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover){
  .capabilities-list:hover a{ opacity: 0.45; }
  .capabilities-list a:hover{ opacity: 1; color: var(--gold); }
  .capabilities-list a:hover::after{ transform: scaleX(1); }
}
.capabilities-list a:focus-visible{ outline: none; opacity: 1; color: var(--gold); }
.capabilities-list a:focus-visible::after{ transform: scaleX(1); }
@media (prefers-reduced-motion: reduce){ .capabilities-list a, .capabilities-list a::after{ transition: none; } }

.contact-box{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.contact-box a{ display:flex; align-items:center; gap:10px; padding:14px 26px; border-radius:0; border:1px solid var(--line-dark); color:var(--on-dark); font-size:15px; font-weight:500; transition:border-color .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1); }
.contact-box a:hover{ border-color:var(--gold-bright); color:var(--gold-bright); }
.contact-box svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; flex-shrink:0; }

/* ---------- Scroll reveal — sections ease in as you reach them ---------- */
.reveal{
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- Footer ---------- */
.site-footer{
  color: var(--on-dark); padding: 56px clamp(20px,4vw,56px) 30px;
  background: var(--charcoal);
}
/* Big looping text banner above the footer content — tigerhousefilms.com's
   footer motion. Full-bleed regardless of the footer's own inline padding
   via the 100vw/-50vw trick, since it's a plain flex marquee (duplicate
   content, translateX(-50%) loop) rather than the logo marquee's markup. */
.ticker-wrap{
  width: 100vw; margin-inline: calc(50% - 50vw);
  overflow: hidden;
  padding-block: clamp(16px, 3.2vw, 32px);
  /* .site-footer contributes 56px above the ticker but nothing below it
     before .footer-top's nav columns start, so the ticker band read as
     sitting low/cramped against "الموقع"/"تواصل" instead of centered in
     its own dark strip. This balances the space below to roughly match
     what's already above. */
  margin-bottom: clamp(40px, 6vw, 64px);
  /* Load-bearing, not cosmetic: pins the track's flush-side anchor to the
     left for both languages (see .kode-viewport above) so the -50% loop
     never opens the gap on the Arabic page that translateX(0) alone did —
     the track's own text order doesn't depend on it since every repeat is
     an identical copy. */
  direction: ltr;
}
.ticker-track{ display: flex; width: max-content; gap: clamp(24px, 3.4vw, 40px); animation: ticker-scroll 8s linear infinite; }
.ticker-track span{
  font-family: "Archivo","IBM Plex Sans Arabic",sans-serif; font-weight: 900;
  font-size: clamp(2.2rem, 6.6vw, 5rem); line-height: 1;
  color: var(--on-dark); text-transform: uppercase; letter-spacing: -0.01em;
  white-space: nowrap; flex-shrink: 0;
}
[dir="rtl"] .ticker-track span{ text-transform: none; font-weight: 700; }
/* CSS keyframe, not JS/rAF — a requestAnimationFrame loop pauses entirely
   whenever the tab isn't the focused/frontmost one (standard browser
   power-saving behavior), which would make the ticker look frozen/"not
   looping" far more easily than a CSS animation does; CSS animations keep
   their own clock running (at most throttled, never hard-paused) even in
   a background tab. Base direction reads right-to-left (translateX 0 ->
   -50%) for Arabic pages; English gets the reverse. */
@keyframes ticker-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
[dir="ltr"] .ticker-track{ animation-direction: reverse; }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation: none; } }

.footer-top{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-dark); }
/* The block itself carries .reveal only so the IntersectionObserver in
   initReveal() picks it up — its own fade/slide is switched off here so it
   doesn't double up with each column's own staggered entrance below. */
.footer-top.reveal{ opacity: 1; transform: none; transition: none; }
.footer-top > *{
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.footer-top.is-visible > *{ opacity: 1; transform: translateY(0); }
.footer-top.is-visible > *:nth-child(1){ transition-delay: 0s; }
.footer-top.is-visible > *:nth-child(2){ transition-delay: .12s; }
.footer-top.is-visible > *:nth-child(3){ transition-delay: .24s; }
.footer-top .brand img{ height: 64px; }
.footer-col h4{ font-size: 13px; font-weight: 600; color: var(--on-dark-muted); margin: 0 0 16px; }
.footer-col a{ display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--on-dark); padding: 6px 0; }
.footer-col a:hover{ color: var(--gold-bright); }
.footer-col a svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; flex-shrink: 0; }
.footer-bottom{ display: flex; justify-content: space-between; align-items: center; padding-top: 24px; flex-wrap: wrap; gap: 12px; color: var(--on-dark-muted); font-size: 13px; }
@media (max-width: 760px){ .footer-top{ grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Floating buttons (WhatsApp + "خلنا ننتج لك") ----------
   Both sit in one fixed dock (built by initProduceFloat) so that when one
   opens into a pill on hover, the other slides along instead of being
   covered. Each is a 54px circle with the same outward pulse; on
   hover/focus it opens and its label slides out ("حياك" on WhatsApp), and
   the pulse stops while open so the wider shape doesn't balloon. Touch
   screens never hover, so there they stay circles — the label is still in
   the DOM for screen readers. */
.float-dock{
  position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 90;
  display: flex; align-items: center; gap: 12px; pointer-events: none;
}
.wa-float, .produce-float{
  position: relative; isolation: isolate; height: 54px; min-width: 54px; border-radius: 27px;
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 14px; font-weight: 700; box-shadow: 0 8px 22px rgba(0,0,0,0.28);
}
.wa-float::before, .produce-float::before{
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: inherit; animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse{
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.1); opacity: 0; }
}
.wa-label, .produce-float .pf-label{
  max-width: 0; overflow: hidden; opacity: 0; padding-inline-start: 0;
  transition: max-width .45s cubic-bezier(.16,1,.3,1), opacity .25s ease, padding .45s cubic-bezier(.16,1,.3,1);
}
.wa-float:hover::before, .wa-float:focus-visible::before,
.produce-float:hover::before, .produce-float:focus-visible::before{ animation: none; opacity: 0; }
.wa-float:hover .wa-label, .wa-float:focus-visible .wa-label,
.produce-float:hover .pf-label, .produce-float:focus-visible .pf-label{
  max-width: 180px; opacity: 1; padding-inline-start: 22px; transition-delay: 0s, .1s, 0s;
}

.wa-float{ background: #25D366; color: #fff; pointer-events: auto; transition: background .2s ease; }
.wa-float:hover, .wa-float:focus-visible{ background: #1FBF5B; }
.wa-float svg{ flex: 0 0 auto; width: 26px; height: 26px; margin-inline: 14px; fill: #fff; }

/* On the homepage this one stays hidden until the hero's own "خلنا ننتج لك"
   button scrolls away (initProduceFloat); it is skipped on Contact. */
.produce-float{
  background: var(--gold); color: var(--ink);
  opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden;
  transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s, background .2s ease;
}
.produce-float.is-shown{ opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; transition-delay: 0s; }
.produce-float:hover, .produce-float:focus-visible{ background: #FFBE2E; }
.produce-float .pf-icon{
  flex: 0 0 54px; width: 54px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce){ .wa-float::before, .produce-float::before{ animation: none; } }

/* ---------- Work page filters ---------- */
/* Filters as large type on a hairline rail (no boxes). The active one is ink, the rest muted, and a green
   bar slides along the rail to whichever is chosen (.filter-ink, placed by
   the Work page script). On narrow screens the rail swipes sideways. */
.filter-row{
  position: relative; display: flex; gap: clamp(22px, 3.4vw, 48px); margin-bottom: clamp(36px, 5vw, 56px);
  border-bottom: 1px solid rgba(30,25,26,0.14);
  overflow-x: auto; scrollbar-width: none;
}
.filter-row::-webkit-scrollbar{ display: none; }
@media (max-width: 760px){
  .filter-row{
    padding-inline: 22px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  }
}
.filter-chip{
  flex: 0 0 auto; display: inline-flex; align-items: flex-start; gap: 6px;
  padding: 0 0 16px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font-family: "Archivo", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 700;
  color: rgba(30,25,26,0.62); transition: color .3s ease;
}
.filter-chip:hover{ color: var(--ink); }
.filter-chip.active{ color: var(--ink); }
.filter-chip:focus-visible{ outline: 2px solid var(--storm); outline-offset: 4px; }
.filter-ink{
  position: absolute; bottom: -1px; left: 0; height: 3px; width: 0; background: var(--storm);
  transition: left .55s cubic-bezier(.16,1,.3,1), width .55s cubic-bezier(.16,1,.3,1);
}
/* tiles settle in one after another when the filter changes */
.work-tile.is-entering{ animation: work-in .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes work-in{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .filter-ink{ transition: none; } .work-tile.is-entering{ animation: none; } }


/* ---------- Work page boxes ----------
   Rows of three works (.wk-row, built by the Work page script). On a mouse
   the hovered work opens wider while the other two in its row give way
   (the homepage strip's motion), and its footage plays, muted, inside the
   frame with a gold playhead along the bottom. On touch screens the frame
   nearest the middle of the screen plays once scrolling settles. Phones
   stack the works as 16:9 frames. Title, client and year sit on the
   footage, white on a dark fade, in solid colors so Arabic letter joins
   don't show seams. */
.wk-grid{ display: flex; flex-direction: column; gap: 10px; }
.wk-row{ display: flex; gap: 10px; height: clamp(240px, 27vw, 420px); }
.wk-item{
  position: relative; display: block; color: #fff;
  flex: 1 1 0; min-width: 0; transition: flex-grow .7s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover){
  .wk-row:hover .wk-item{ flex-grow: 0.7; }
  .wk-row:hover .wk-item:hover{ flex-grow: 2.2; }
}
.wk-frame{ position: absolute; inset: 0; overflow: hidden; background: #0d0d0a; }
.wk-media{
  position: absolute; inset: 0; container-type: size;
  transform: scale(var(--zoom, 1)); transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.wk-media img{ width: 100%; height: 100%; object-fit: cover; }
/* cover sizing for the player at any frame shape (cq = the media box) */
.wk-media iframe{
  position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw);
  transform: translate(-50%, -50%); border: 0; pointer-events: none;
  opacity: 0; transition: opacity .8s ease;
}
.wk-media iframe.is-playing{ opacity: 1; }
.wk-playhead{
  position: absolute; z-index: 2; inset-inline: 0; bottom: 0; height: 2px; background: var(--gold);
  transform: scaleX(var(--p, 0)); transform-origin: left center;
  opacity: 0; transition: opacity .4s ease, transform .3s linear;
}
[dir="rtl"] .wk-playhead{ transform-origin: right center; }
.wk-item.is-playing .wk-playhead{ opacity: 1; }
@media (hover: hover){ .wk-item:hover .wk-media{ transform: scale(calc(var(--zoom, 1) * 1.04)); } }
.wk-item:focus-visible{ outline: 2px solid var(--storm); outline-offset: 4px; }

.wk-info{
  position: absolute; inset-inline: 0; bottom: 0; padding: 48px 20px 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.74) 100%);
  pointer-events: none;
}
.wk-name, .wk-client{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-name{ grid-column: 1; margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.wk-client{ grid-column: 1; margin: 2px 0 0; font-size: 0.85rem; line-height: 1.5; color: #D2D2D2; }
.wk-year{ grid-column: 2; grid-row: 1; font-family: "Archivo", sans-serif; font-size: 0.85rem; line-height: 1.95; color: #D2D2D2; font-variant-numeric: tabular-nums; }
.wk-sep{ font-weight: 400; color: #9C9C9C; }

@media (max-width: 720px){
  .wk-row{ flex-direction: column; height: auto; }
  .wk-item{ flex: none; aspect-ratio: 16 / 9; }
}

/* works settle in one after another when the filter changes */
.wk-item.is-entering{ animation: work-in .7s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce){
  .wk-item.is-entering{ animation: none; }
  .wk-media, .wk-item{ transition: none; }
}

/* ---------- Forms ---------- */
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.form-field{ display: flex; flex-direction: column; gap: 8px; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-size: 13.5px; font-weight: 600; color: var(--ink); }
.form-field input, .form-field select, .form-field textarea{
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 0; color: var(--ink);
  padding: 12px 14px; font-size: 15.5px; font-family: inherit; transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field textarea{ resize: vertical; min-height: 110px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline: none; border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(249,169,5,0.18);
}
.form-field input.has-error, .form-field textarea.has-error{ border-color: var(--red); }
.form-field select option{ color: #000; }
.field-error{ font-size: 12.5px; color: var(--red); min-height: 15px; display: block; }
.form-submit{ margin-top: 12px; }
.form-note{ font-size: 12.5px; color: var(--text-muted); margin-top: 8px; }
/* Spam trap: clipped to nothing in place (moving it off-screen made RTL pages
   scroll sideways) and hidden from assistive tech; bots that fill every
   field get filtered by form.php. */
.hp-field{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.form-note a{ display: inline-block; padding-block: 6px; }
.form-status{
  margin-top: 20px; padding: 14px 18px; border-radius: 0; font-size: 14px; font-weight: 600;
  background: rgba(240,57,25,0.1); color: #9c2c15; border: 1px solid rgba(240,57,25,0.25);
}
.form-success{ text-align: center; padding: 60px 20px; }
.form-success svg{ width: 56px; height: 56px; stroke: var(--storm); fill: none; stroke-width: 1.4; margin-bottom: 20px; }
@media (max-width: 700px){ .form-grid{ grid-template-columns: 1fr; } }

/* ---------- Project detail ---------- */
.project-hero{ position: relative; aspect-ratio: 16/8; background: #050f0a; overflow: hidden; }
.project-hero iframe, .project-hero img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.project-meta-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.project-meta-row div .label{ font-size: 12.5px; color: var(--text-muted); margin: 0 0 6px; }
.project-meta-row div .value{ font-size: 16px; font-weight: 600; }
@media (max-width: 820px){ .project-meta-row{ grid-template-columns: repeat(2,1fr); } }

/* ---------- Night mode ----------
   Off by default, whatever the phone/computer is set to: the site always
   opens in its own light colors. The moon button at the bottom of the menu
   (initThemeToggle in site.js) sets data-theme="dark" on <html>, and the
   choice is remembered (the small script at the top of each page's <head>
   puts it back before the first paint, so there is no white flash).
   `only light` is what stops Chrome/Samsung from auto-darkening the light
   site with their own inverted colors on a phone in dark mode.
   Only the light surfaces change; the green, black, orange and video
   sections already are night colors and stay as they are.
     white (paper)      -> Thunder Black #1E191A
     soft green (sand)  -> Thunder Green, one step lighter (#06451F), so it
                           still cuts cleanly from the darker green panels
     footer / credits   -> a deeper black, so they still cut from the page
   Inside the light sections the brand tokens are re-pointed rather than
   every rule being rewritten: --ink becomes the text color, --line a light
   hairline, and --storm (green used as an accent on white) becomes Mustard
   on black and Soft Green on green. Faded text stays a solid pre-mixed
   color for the same reason as above (Arabic letter joins). Every night
   rule is wrapped in :where() so it has exactly the weight of the rule it
   replaces and wins only by coming later. */
:root{ color-scheme: only light; }
:root[data-theme="dark"]{
  color-scheme: dark;
  --night: #1E191A;
  --night-sand: #06451F;
  --charcoal: #141011;
}
:where(:root[data-theme="dark"]) body{ background: var(--night); color: var(--on-dark); }
:where(:root[data-theme="dark"]) .bg-charcoal, :where(:root[data-theme="dark"]) .site-footer{ --on-dark-muted: #BDBCBC; }

:where(:root[data-theme="dark"]) .bg-paper{
  --paper: var(--night); --ink: #FFFFFF; --text-muted: #C0BFBF;
  --line: rgba(255,255,255,0.16); --storm: var(--gold);
}
:where(:root[data-theme="dark"]) .bg-sand{
  --sand: var(--night-sand); --paper: var(--night-sand); --ink: #FFFFFF; --text-muted: #B9CBC0;
  --line: rgba(255,255,255,0.2); --storm: #DAF1DA;
}

/* dark text that sits on Mustard keeps the real Thunder Black */
:where(:root[data-theme="dark"]) .btn-gold{ color: #1E191A; }
:where(:root[data-theme="dark"]) .work-tile .tile-play svg{ fill: #1E191A; }

/* header bar once scrolled over a (now dark) light section */
:where(:root[data-theme="dark"]) .site-header{ --ink: #FFFFFF; --line: var(--line-dark); }
:where(:root[data-theme="dark"]) .site-header.scrolled{ background: rgba(30,25,26,0.94); box-shadow: 0 1px 0 rgba(255,255,255,0.08); }
:where(:root[data-theme="dark"]) .site-header.scrolled:not(.on-dark) :focus-visible{ outline-color: var(--gold); }

/* hairlines that were drawn in Thunder Black at low opacity */
:where(:root[data-theme="dark"]) .swipe-bar::before{ background: rgba(255,255,255,0.18); }
:where(:root[data-theme="dark"]) .filter-row{ border-bottom-color: rgba(255,255,255,0.16); }
:where(:root[data-theme="dark"]) .filter-chip{ color: #A5A3A3; }
:where(:root[data-theme="dark"]) .ab-pillars{ border-bottom-color: rgba(255,255,255,0.2); }
:where(:root[data-theme="dark"]) .ab-pillar{ border-top-color: rgba(255,255,255,0.2); }

/* Client logos on the homepage strip: the same light monochrome
   treatment as the About credits, so stc's purple and GASCO's blue
   don't sink into the black. */
:where(:root[data-theme="dark"]) .marquee-track img{ filter: grayscale(1) invert(1) contrast(1.15); opacity: 0.8; }

/* About opening: the same knockout, flipped. The box is the night
   surface with white letters in `darken` blend, so the box keeps the
   exact page color and the letters show the footage. The footage is
   mostly dark, which reads well as black letters on white but would sink
   into black here, so it is lifted into the light half of the range: its
   darkest pixel lands near 45% grey (about 3.6:1 on #1E191A, and always
   lighter than the box, which `darken` needs). */
:where(:root[data-theme="dark"]) .ab-knock h1{ background: var(--night); color: #fff; mix-blend-mode: darken; }
:where(:root[data-theme="dark"]) .ab-knock video{ filter: saturate(1.25) contrast(0.38) brightness(1.45); }

/* Form: fields sit one step above the surface with a hairline you can
   actually see, and the native controls (select arrow, date, autofill)
   follow color-scheme. */
:where(:root[data-theme="dark"]) .form-field input, :where(:root[data-theme="dark"]) .form-field select, :where(:root[data-theme="dark"]) .form-field textarea{
  background: #262021; border-color: rgba(255,255,255,0.24);
}
:where(:root[data-theme="dark"]) .form-field select option{ color: #fff; background: #262021; }
:where(:root[data-theme="dark"]) .field-error{ color: #FF7A61; }
:where(:root[data-theme="dark"]) .form-field input.has-error, :where(:root[data-theme="dark"]) .form-field textarea.has-error{ border-color: #FF7A61; }
:where(:root[data-theme="dark"]) .form-status{ background: rgba(240,57,25,0.14); color: #FFA28F; border-color: rgba(240,57,25,0.45); }

/* The switch itself: a square icon under the menu links, in the same
   hairline frame as the hamburger. Moon while the site is light, sun once
   it is dark. It eases in after the last link. */
.theme-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-top: 14px; padding: 0;
  background: transparent; border: 1px solid var(--line-dark); border-radius: 0; color: var(--on-dark);
  opacity: 0; transform: translateY(14px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), color .2s ease, border-color .2s ease;
}
.mobile-menu.open .theme-toggle{ opacity: 1; transform: none; transition-delay: .53s, .53s, 0s, 0s; }
.theme-toggle:hover{ color: var(--gold-bright); border-color: var(--gold-bright); }
.theme-toggle svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .tt-sun, .theme-toggle[aria-pressed="true"] .tt-moon{ display: none; }
.theme-toggle[aria-pressed="true"] .tt-sun{ display: block; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration: .5s; }