/* Generated by tools-prerender.py. Do not edit: change the source
   stylesheet in css/ and rebuild. */

/* ===== fonts.css ===== */

/* Cairo, self-hosted.
   Generated by tools-fetch-fonts.py from Google Fonts; do not hand-edit.
   The unicode-range blocks are theirs and are the reason an Arabic
   visitor never downloads the Latin cuts. font-display:swap keeps text
   readable in the fallback face while a cut is still arriving. */
/* arabic */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin-ext */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.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;
}
/* arabic */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin-ext */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.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;
}
/* arabic */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin-ext */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.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;
}
/* arabic */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin-ext */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.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;
}
/* arabic */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin-ext */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../assets/fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.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;
}

/* ===== tokens.css ===== */

/* Arena Rise — design tokens (mirrored from the Claude Design project 5702d4bd).
   Only change vs. the source: Tajawal is loaded from Google Fonts instead of
   self-hosted woff2, so this folder stays copy-paste portable. */

:root{
--ar-white:#FFFFFF;--ar-ink:#1D1D1B;--ar-black:#0B0B0A;
--ar-teal-50:#EEFAFA;--ar-teal-100:#D7F3F2;--ar-teal-200:#B0E7E6;--ar-teal-300:#87DAD9;--ar-teal-400:#45C3C2;--ar-teal-500:#2FADAC;--ar-teal-600:#1F8D8C;--ar-teal-700:#166A69;--ar-teal-800:#0F4948;--ar-teal-900:#0A2E2E;
--ar-n-0:#FFFFFF;--ar-n-25:#FCFCFB;--ar-n-50:#F7F7F5;--ar-n-100:#F0F0ED;--ar-n-200:#E3E2DE;--ar-n-300:#CBCAC5;--ar-n-400:#A5A49F;--ar-n-500:#7C7B76;--ar-n-600:#575651;--ar-n-700:#3B3A37;--ar-n-800:#26251F;--ar-n-900:#1D1D1B;--ar-n-950:#0B0B0A;
--ar-success:#3E8B63;--ar-warning:#B98A31;--ar-danger:#B0402F;--ar-info:#1F8D8C;

--brand-primary:var(--ar-teal-400);--brand-primary-strong:var(--ar-teal-600);--brand-ink:var(--ar-ink);
--text-strong:var(--ar-n-900);--text-body:var(--ar-n-700);--text-muted:var(--ar-n-500);--text-faint:var(--ar-n-400);--text-inverse:var(--ar-n-0);--text-accent:var(--ar-teal-600);--text-on-accent:var(--ar-ink);
--surface-page:var(--ar-n-0);--surface-subtle:var(--ar-n-50);--surface-card:var(--ar-n-0);--surface-sunken:var(--ar-n-100);--surface-accent-soft:var(--ar-teal-50);
--border-hairline:var(--ar-n-200);--border-default:var(--ar-n-300);--border-strong:var(--ar-n-900);--border-accent:var(--ar-teal-400);
--focus-ring:var(--ar-teal-500);

/* type */
/* Cairo — chosen over the logo file's Tajawal for a cleaner Arabic bowl, wider
   apertures at small sizes, and a full 200–1000 weight range, so every step of
   the scale below resolves to a real weight instead of a synthesised one.
   Tajawal stays as the fallback. To try another face, change these two lines
   and the Google Fonts <link> in index.html. */
--font-sans:'Cairo','Tajawal',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
--font-display:'Cairo','Tajawal',ui-sans-serif,system-ui,sans-serif;
--fw-light:300;--fw-regular:400;--fw-medium:500;--fw-bold:700;--fw-heavy:800;--fw-black:900;
--fs-3xs:11px;--fs-2xs:12px;--fs-xs:13px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:21px;--fs-2xl:26px;--fs-3xl:32px;--fs-4xl:40px;--fs-5xl:52px;--fs-6xl:68px;--fs-7xl:88px;
--lh-tight:1.08;--lh-snug:1.22;--lh-normal:1.5;--lh-relaxed:1.75;
--ls-mega:.02em;--ls-display:.01em;--ls-normal:0;--ls-wide:.08em;--ls-wider:.18em;--ls-widest:.34em;
--type-display:var(--fw-heavy) var(--fs-6xl)/var(--lh-tight) var(--font-display);
--type-h1:var(--fw-bold) var(--fs-4xl)/var(--lh-snug) var(--font-display);
--type-h2:var(--fw-bold) var(--fs-3xl)/var(--lh-snug) var(--font-display);
--type-h3:var(--fw-medium) var(--fs-2xl)/var(--lh-snug) var(--font-sans);
--type-body:var(--fw-regular) var(--fs-md)/var(--lh-relaxed) var(--font-sans);
--type-body-sm:var(--fw-regular) var(--fs-sm)/var(--lh-normal) var(--font-sans);
--type-label:var(--fw-medium) var(--fs-2xs)/1.2 var(--font-sans);
--type-eyebrow:var(--fw-medium) var(--fs-2xs)/1.2 var(--font-sans);

/* space */
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;--sp-40:160px;
--gutter:var(--sp-6);--section-y:var(--sp-32);--section-y-tight:var(--sp-20);
--container-max:1240px;--container-narrow:760px;--measure:66ch;

/* shape */
--radius-none:0;--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-pill:999px;
--radius-control:var(--radius-sm);--radius-card:var(--radius-md);--radius-surface:var(--radius-lg);
--shadow-xs:0 1px 2px rgba(29,29,27,.06);
--shadow-sm:0 2px 8px rgba(29,29,27,.06),0 1px 2px rgba(29,29,27,.04);
--shadow-md:0 12px 32px -12px rgba(29,29,27,.14),0 2px 6px rgba(29,29,27,.05);
--shadow-lg:0 32px 64px -24px rgba(29,29,27,.22),0 4px 12px rgba(29,29,27,.06);
--shadow-accent:0 16px 40px -18px rgba(69,195,194,.55);
--overlay-scrim:rgba(11,11,10,.62);
--blur-veil:saturate(140%) blur(18px);

/* motion */
--dur-instant:80ms;--dur-fast:160ms;--dur-base:240ms;--dur-slow:420ms;--dur-scene:720ms;
--ease-standard:cubic-bezier(.2,.6,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.6,0,.9,.4);
--motion-hover:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
}

/* Dark theme — taken from the design system's own tokens/colors.css.
   The brand book reserves black for the website, so this is the identity's
   intended web surface, not an invention. site.css tints the surfaces toward
   the brand teal on top of these. */
[data-theme="dark"]{
/* tells the UA to render native controls dark too — date picker, select
   dropdown, scrollbars — otherwise they punch light holes in the theme */
color-scheme:dark;
--text-strong:#FFFFFF;--text-body:rgba(255,255,255,.78);--text-muted:rgba(255,255,255,.56);--text-faint:rgba(255,255,255,.48);--text-inverse:var(--ar-n-900);--text-accent:var(--ar-teal-300);
--surface-page:var(--ar-n-950);--surface-subtle:#111110;--surface-card:#141413;--surface-sunken:#0F0F0E;--surface-accent-soft:rgba(69,195,194,.10);
--border-hairline:rgba(255,255,255,.10);--border-default:rgba(255,255,255,.18);--border-strong:rgba(255,255,255,.42);--border-accent:var(--ar-teal-400);
}

@media (prefers-reduced-motion:reduce){
:root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-scene:0ms}
}

/* base */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
h1{font:var(--type-h1);color:var(--text-strong)}
h2{font:var(--type-h2);color:var(--text-strong)}
h3{font:var(--type-h3);color:var(--text-strong)}
a{color:var(--text-accent);text-decoration:none;transition:var(--motion-hover)}
a:hover{color:var(--ar-teal-500)}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--ar-teal-200);color:var(--ar-ink)}
.ar-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--text-muted)}
.ar-num{font-variant-numeric:tabular-nums lining-nums}

/* ===== site.css ===== */

/* ===========================================================================
   Arena Rise — website layer.
   Palette: ivory ground, deep-teal bands, one brand-teal accent.
   Motion vocabulary matches the design system: fade-up reveals, masked
   headline rise, drawn teal rules, sweep fills. No bounce, no spring.
   =========================================================================== */

:root{
  /* Black ground, one continuous field, a single teal accent. Surfaces are
     translucent so the hexagon animation runs beneath the whole page rather
     than stopping at section edges. */
  --site-ground:#000000;                    /* page floor, matches the canvas base */
  --site-panel:rgba(9,9,9,.66);             /* lifted section bands */
  --site-card:rgba(12,12,12,.90);           /* cards */
  --site-card-hover:rgba(20,22,22,.95);
  --site-deep:#0A2E2E;                      /* brand teal-900, used as a wash */
  --site-deep-2:#0F4948;
  --site-line:rgba(255,255,255,.12);
  --site-line-strong:rgba(255,255,255,.26);
  --nav-h:92px;
}

html{scroll-behavior:smooth;scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{background:var(--site-ground);color:var(--text-body);overflow-x:hidden}

/* ------------------------------------------------------- animated ground --*/
/* One fixed canvas behind the whole document: the hexagon field runs under
   every section instead of only the hero, and reacts to the pointer anywhere
   on the page. Sections layer translucent surfaces on top of it. */
.bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none}

.wrap{max-width:var(--container-max);margin:0 auto;padding:0 32px}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.measure{max-width:var(--measure)}

/* Readable to a crawler and a screen reader, absent to the eye. Used for
   the home page h1: the hero is a film with two buttons and carries no
   heading of its own, so without this the document has no h1 at all and
   a screen reader opens on nothing. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;top:0;inset-inline-start:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;z-index:100;background:var(--ar-teal-400);color:var(--ar-ink);padding:12px 20px;font-weight:var(--fw-medium)}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none;inset-inline-start:16px;top:16px}

/* Section labels are bracketed and widely tracked, set apart from body copy.
   nowrap matters: these are Latin runs inside an RTL block, so a line break
   strands the closing bracket at the start of the wrong line. */
.sec-head__top .ar-eyebrow,.hero__eyebrow .ar-eyebrow{color:var(--ar-teal-300);white-space:nowrap}
.sec-head__top .ar-eyebrow::before,.hero__eyebrow .ar-eyebrow::before{content:"[ \2013 \00a0"}
.sec-head__top .ar-eyebrow::after,.hero__eyebrow .ar-eyebrow::after{content:"\00a0 \2013 ]"}
@media (max-width:520px){
  .sec-head__top .ar-eyebrow,.hero__eyebrow .ar-eyebrow{font-size:10px;letter-spacing:var(--ls-wider)}
}

/* ---------------------------------------------------------------- motion --*/
.rv{opacity:0;transform:translateY(26px);transition:opacity 760ms var(--ease-out),transform 760ms var(--ease-out)}
.rv.in{opacity:1;transform:none}

.mask{display:block;overflow:hidden;padding-block:2px}
.mask>span{display:block;transform:translateY(110%);transition:transform 900ms var(--ease-out)}
.mask.in>span,.in .mask>span{transform:none}

.rule-draw{height:2px;background:var(--ar-teal-400);width:56px;transform:scaleX(0);transform-origin:right;transition:transform 720ms var(--ease-out)}
.in .rule-draw,.rule-draw.in{transform:scaleX(1)}

@keyframes ar-spin{to{transform:rotate(360deg)}}
@keyframes ar-spin-r{to{transform:rotate(-360deg)}}
@keyframes ar-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes ar-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ar-cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(14px);opacity:0}}

.spin-slow{animation:ar-spin 48s linear infinite}
.spin-slow-r{animation:ar-spin-r 64s linear infinite}
.float{animation:ar-float 9s ease-in-out infinite}

.linkline{position:relative}
.linkline::after{content:"";position:absolute;inset-inline-start:0;bottom:-6px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 420ms var(--ease-out)}
.linkline:hover::after,.linkline[aria-current="true"]::after{transform:scaleX(1)}

/* ---------------------------------------------------------------- buttons -*/
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid transparent;border-radius:var(--radius-control);
  font:var(--fw-medium) var(--fs-xs)/1 var(--font-sans);
  letter-spacing:var(--ls-wide);text-transform:uppercase;
  padding:0 26px;height:50px;cursor:pointer;background:transparent;
  transition:color 320ms var(--ease-standard),background-color 320ms var(--ease-standard),
             border-color 320ms var(--ease-standard),transform 260ms var(--ease-out),box-shadow 380ms ease;
}
.btn--sm{height:40px;padding:0 18px;font-size:var(--fs-3xs)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);transition:transform 480ms var(--ease-out)}
.btn:hover::before{transform:translateY(0)}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:42%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:translateX(-160%) skewX(-18deg)}
.btn:hover::after{animation:ar-shine 900ms var(--ease-out) 120ms}
@keyframes ar-shine{to{transform:translateX(320%) skewX(-18deg)}}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.975)}

.btn--primary{background:var(--ar-teal-400);color:var(--ar-ink);border-color:var(--ar-teal-400)}
.btn--primary::before{background:var(--site-deep)}
.btn--primary:hover{color:#fff;border-color:var(--site-deep);box-shadow:0 18px 36px -18px rgba(10,46,46,.6)}

.btn--accent{background:transparent;color:#fff;border-color:var(--ar-teal-400)}
.btn--accent::before{background:var(--ar-teal-400)}
.btn--accent:hover{color:var(--ar-ink);border-color:var(--ar-teal-400);box-shadow:0 18px 36px -18px rgba(69,195,194,.75)}

.btn--outline{color:#fff;border-color:var(--site-line-strong)}
.btn--outline::before{background:var(--ar-teal-400)}
.btn--outline:hover{color:var(--ar-ink);border-color:var(--ar-teal-400)}

.btn--on-dark{color:#fff;border-color:rgba(255,255,255,.42)}
.btn--on-dark::before{background:#fff}
.btn--on-dark:hover{color:var(--site-deep);border-color:#fff;box-shadow:0 18px 36px -18px rgba(255,255,255,.4)}

/* ------------------------------------------------------------------- nav --*/
.nav{position:sticky;top:0;z-index:40;background:transparent;border-bottom:1px solid transparent;
     transition:background-color 420ms var(--ease-standard),border-color 420ms var(--ease-standard),backdrop-filter 420ms var(--ease-standard)}
.nav__inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:32px;
            transition:height 420ms var(--ease-standard)}
.nav[data-solid="true"]{background:rgba(0,0,0,.80);backdrop-filter:var(--blur-veil);-webkit-backdrop-filter:var(--blur-veil);border-bottom-color:var(--site-line)}
.nav[data-solid="true"] .nav__inner{height:72px}
/* black ground throughout, so nav type stays light in both states */
.nav .nav__link{color:rgba(255,255,255,.62)}
.nav .nav__link[aria-current="true"]{color:#fff}
.nav .lockup__word{color:#fff}
.nav .lockup__tag{color:rgba(255,255,255,.52)}
.nav__links{display:flex;align-items:center;gap:36px}
.nav__link{font-size:var(--fs-sm);color:var(--text-muted);transition:color var(--dur-fast) var(--ease-standard)}
.nav__link[aria-current="true"]{color:var(--text-strong)}
.nav__toggle{display:none;width:44px;height:44px;border:1px solid var(--site-line-strong);color:#fff;background:transparent;border-radius:var(--radius-sm);cursor:pointer;padding:0;place-items:center}
.nav__toggle span{display:block;width:18px;height:1px;background:currentColor;margin:4px auto;transition:transform var(--dur-base) var(--ease-standard),opacity var(--dur-fast) linear}
.nav[data-open="true"] .nav__toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav[data-open="true"] .nav__toggle span:nth-child(2){opacity:0}
.nav[data-open="true"] .nav__toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------------------------------------------------------------- lockup --*/
.lockup{display:inline-flex;align-items:center;gap:14px}
.lockup__mark{display:block;flex:none}
/* black ground throughout, so the monochrome white mark is the only variant used */
.nav .mark-color{display:none}
.nav .mark-white{display:block}
.lockup__text{display:flex;flex-direction:column;gap:4px}
.lockup__word{font:var(--fw-heavy) 17px/1 var(--font-display);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-strong);transition:color 420ms var(--ease-standard)}
.lockup__tag{font-size:8px;letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--text-muted);transition:color 420ms var(--ease-standard)}
.lockup--on-dark .lockup__word{color:#fff}
.lockup--on-dark .lockup__tag{color:rgba(255,255,255,.62)}

/* ------------------------------------------------------------------ hero --*/
.hero{position:relative;min-height:100svh;margin-top:calc(var(--nav-h) * -1);padding-top:var(--nav-h);
      display:flex;align-items:center;color:#fff;isolation:isolate}
/* keeps type legible over the animation without a photographic look */
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(110% 80% at 76% 16%,rgba(69,195,194,.15),transparent 60%),
    /* denser behind the RTL text column on the right, open on the left so the field reads */
    linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.55) 54%,rgba(0,0,0,.80))}
.hero__inner{width:100%;padding-block:96px 84px}
.hero__eyebrow{display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.62)}
/* Arabic needs headroom the reference's Latin display does not: diacritics sit
   above the cap line and ى/ح drop below the baseline, and the reveal masks clip
   with overflow:hidden. So the line box stays generous and the negative margin
   pulls the lines back into a tight display rhythm. */
.hero h1{font:var(--fw-black) clamp(42px,7.4vw,var(--fs-7xl))/1.15 var(--font-display);color:#fff;letter-spacing:0;margin-top:30px}
.hero h1 .mask{padding-block:.10em;margin-block:-.06em}
.hero h1 em{font-style:normal;color:var(--ar-teal-300)}
.hero__lede{margin-top:28px;max-width:52ch;color:rgba(255,255,255,.72);font-size:var(--fs-lg);line-height:var(--lh-relaxed)}
.hero__cta{margin-top:44px;display:flex;flex-wrap:wrap;gap:14px}
.hero__figures{margin-top:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid rgba(255,255,255,.14);padding-top:32px}
.hero__cue{position:absolute;inset-inline-start:32px;bottom:36px;display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.45);font-size:var(--fs-3xs);letter-spacing:var(--ls-wider);text-transform:uppercase}
.hero__cue i{display:block;width:1px;height:38px;background:linear-gradient(rgba(255,255,255,.5),transparent);animation:ar-cue 2.6s var(--ease-standard) infinite}

.figure__value{font:var(--fw-bold) var(--fs-3xl)/1 var(--font-display);color:#fff}
.figure__value span{color:var(--ar-teal-300)}
.figure__label{margin-top:10px;font-size:var(--fs-xs);color:rgba(255,255,255,.52)}

/* --------------------------------------------------------------- marquee --*/
.marquee{overflow:hidden;border-top:1px solid var(--site-line);border-bottom:1px solid var(--site-line);padding:18px 0;background:transparent}
.marquee__row{display:flex;width:max-content;animation:ar-marquee 38s linear infinite}
.marquee:hover .marquee__row{animation-play-state:paused}
.marquee__item{display:inline-flex;align-items:center;gap:28px;padding-inline:28px;font-size:var(--fs-xs);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.marquee__item::after{content:"";width:5px;height:5px;background:var(--ar-teal-400);display:inline-block}

/* -------------------------------------------------------- section header --*/
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:64px}
.sec-head__top{display:flex;align-items:center;gap:16px}
.sec-head h2{font:var(--fw-black) clamp(30px,4.4vw,var(--fs-5xl))/1.2 var(--font-display);letter-spacing:0}
.sec-head p{color:var(--text-muted);max-width:58ch}
.sec-head--split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}

/* -------------------------------------------------------------- services --*/
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--site-line);border:1px solid var(--site-line)}
.service{position:relative;overflow:hidden;isolation:isolate;background:var(--site-card);padding:44px 36px 40px;min-height:280px;display:flex;flex-direction:column;gap:16px}
.service::after{content:"";position:absolute;inset:0;background:var(--site-deep-2);transform:translateY(101%);transition:transform 520ms var(--ease-out);z-index:-1}
.service:hover::after,.service:focus-within::after{transform:translateY(0)}
.service__num{font:var(--fw-medium) var(--fs-3xs)/1 var(--font-sans);letter-spacing:var(--ls-widest);color:var(--ar-teal-400);transition:color 380ms var(--ease-standard)}
.service h3{transition:color 380ms var(--ease-standard)}
.service p{font-size:var(--fs-sm);color:var(--text-muted);transition:color 380ms var(--ease-standard)}
.service__icon{width:28px;height:28px;color:var(--ar-teal-400);transition:color 380ms var(--ease-standard),transform 520ms var(--ease-out)}
.service:hover .service__icon{transform:translateY(-4px)}
.service:hover h3{color:#fff}
.service:hover p{color:rgba(255,255,255,.74)}
.service:hover .service__num,.service:hover .service__icon{color:var(--ar-teal-300)}
.service__spacer{flex:1}

/* ------------------------------------------------------------------ work --*/
.filters{display:flex;flex-wrap:wrap;gap:10px}
.filter{border:1px solid var(--border-hairline);background:transparent;border-radius:var(--radius-pill);
        padding:9px 18px;font:var(--fw-medium) var(--fs-xs)/1 var(--font-sans);color:var(--text-muted);cursor:pointer;
        transition:var(--motion-hover)}
.filter:hover{border-color:var(--border-default);color:var(--text-strong)}
.filter[aria-pressed="true"]{background:var(--ar-teal-400);border-color:var(--ar-teal-400);color:var(--ar-ink)}

/* the portfolio grid and cards are styled in work.css */

/* --------------------------------------------------------------- process --*/
.process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.step{padding-top:26px;border-top:1px solid var(--site-line);position:relative}
.step::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:0;height:2px;background:var(--ar-teal-400);transition:width 720ms var(--ease-out)}
.step.in::before{width:44px}
.step__num{font:var(--fw-black) var(--fs-3xl)/1 var(--font-display);color:rgba(255,255,255,.40)}
.step h3{margin-top:16px;font:var(--fw-medium) var(--fs-lg)/var(--lh-snug) var(--font-sans)}
.step p{margin-top:10px;font-size:var(--fs-sm);color:var(--text-muted)}

/* ------------------------------------------------------------------- cta --*/
/* a wash rather than a solid fill, so the field keeps running underneath */
.cta{position:relative;isolation:isolate;color:#fff;
     background:linear-gradient(to bottom,rgba(10,46,46,.42),rgba(10,46,46,.62));
     border-block:1px solid var(--site-line)}
.cta__inner{padding-block:110px;display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.cta h2{color:#fff;font:var(--fw-black) clamp(28px,4vw,var(--fs-4xl))/1.2 var(--font-display);letter-spacing:0;max-width:20ch}
.cta p{margin-top:16px;color:rgba(255,255,255,.66);max-width:46ch}

/* --------------------------------------------------------------- contact --*/
.contact{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font:var(--type-label);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted)}
.field input,.field select,.field textarea{
  font:var(--type-body);color:var(--text-strong);background:var(--site-card);
  border:1px solid var(--site-line-strong);border-radius:var(--radius-control);
  padding:13px 14px;width:100%;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ar-teal-400);box-shadow:0 0 0 3px rgba(69,195,194,.22)}
.field small{font-size:var(--fs-2xs);color:var(--ar-danger);min-height:15px}
.form__actions{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form__note{font-size:var(--fs-2xs);color:var(--text-faint)}

.contact-card{border:1px solid var(--site-line);background:var(--site-card);padding:38px 34px;display:flex;flex-direction:column;gap:26px}
.contact-row{display:flex;gap:14px;align-items:flex-start}
.contact-row svg{color:var(--ar-teal-400);flex:none;margin-top:3px}
.contact-row b{display:block;font:var(--fw-medium) var(--fs-3xs)/1.2 var(--font-sans);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}
.contact-row span{color:var(--text-strong);font-size:var(--fs-sm)}

/* ---------------------------------------------------------------- footer --*/
.footer{background:rgba(0,0,0,.72);border-top:1px solid var(--site-line);color:rgba(255,255,255,.7);padding-top:88px;padding-bottom:36px}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.1fr;gap:56px 40px;align-items:start}
.footer__col{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.footer__col--brand{gap:20px}
.footer__group{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.footer__col--brand+.footer__col .ar-eyebrow,.footer__group+.footer__group{margin-top:0}
.footer__group+.footer__group{margin-top:22px}
.footer__col a{width:fit-content}
.footer__note{max-width:38ch;line-height:var(--lh-relaxed)}
.footer__cta{margin-top:4px}
.footer__contact{font-style:normal}
.footer__hours{color:rgba(255,255,255,.45)!important}
.footer__col .ar-eyebrow{font:var(--fw-bold) var(--fs-md)/1.3 var(--font-display);
  letter-spacing:.06em;color:#fff;margin-bottom:2px}
.footer p,.footer span,.footer a{font-size:var(--fs-sm);color:rgba(255,255,255,.6)}
.footer a:hover{color:#fff}
.footer__bar{margin-top:64px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer__bar span{font-size:var(--fs-3xs);letter-spacing:var(--ls-wide);color:rgba(255,255,255,.52)}

/* ----------------------------------------------------------------- toast --*/
/* ------------------------------------------------------------- whatsapp --*/
/* Fixed to the end corner, so it rides every section of the page. z-index 70
   puts it over the content and the toast but under the lightbox scrim (80) and
   the intro curtain (120) — it should never float on top of an open film. */
.wa{
  position:fixed;inset-block-end:28px;inset-inline-end:28px;z-index:70;
  display:inline-flex;align-items:center;gap:0;
  height:56px;padding:0;border-radius:var(--radius-pill);overflow:hidden;
  /* brand teal on ink, the same pairing as .btn--primary — the WhatsApp glyph
     carries the recognition, so the colour does not have to leave the identity */
  background:var(--ar-teal-400);color:var(--ar-ink);text-decoration:none;
  border:1px solid var(--ar-teal-400);
  box-shadow:var(--shadow-accent),0 2px 8px rgba(0,0,0,.35);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) ease,
             background-color 320ms var(--ease-standard),color 320ms var(--ease-standard),
             border-color 320ms var(--ease-standard)}
.wa:hover{background:var(--site-deep);border-color:var(--site-deep);color:#fff;
  transform:translateY(-3px);
  box-shadow:0 20px 44px -16px rgba(69,195,194,.72),0 3px 10px rgba(0,0,0,.45)}
.wa:active{transform:translateY(0) scale(.97)}
.wa__mark{flex:none;width:56px;height:56px;display:grid;place-items:center}
.wa__mark svg{width:28px;height:28px;display:block}
/* the number unfurls on hover instead of sitting there permanently */
.wa__num{
  max-width:0;opacity:0;white-space:nowrap;
  font:var(--fw-medium) var(--fs-sm)/1 var(--font-sans);
  transition:max-width 420ms var(--ease-out),opacity 260ms var(--ease-standard),
             padding-inline-end 420ms var(--ease-out)}
.wa:hover .wa__num,.wa:focus-visible .wa__num{max-width:190px;opacity:1;padding-inline-end:22px}

@media (max-width:760px){
  .wa{inset-block-end:20px;inset-inline-end:20px;height:52px}
  .wa__mark{width:52px;height:52px}
  /* no hover on touch, so the label would never open — keep it to the mark */
  .wa__num{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wa,.wa__num{transition:none}
  .wa:hover{transform:none}
}

.toast{position:fixed;inset-block-end:28px;inset-inline-start:28px;z-index:60;
       background:var(--site-deep);color:#fff;border-inline-start:2px solid var(--ar-teal-400);
       padding:16px 22px;box-shadow:var(--shadow-lg);display:flex;gap:14px;align-items:center;
       transform:translateY(140%);opacity:0;transition:transform 420ms var(--ease-out),opacity 420ms var(--ease-out)}
.toast[data-open="true"]{transform:none;opacity:1}
.toast span{font-size:var(--fs-sm)}

/* ------------------------------------------------------------ responsive --*/
@media (max-width:1024px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
  .contact{grid-template-columns:1fr;gap:48px}
  .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}
  .footer__col--brand{grid-column:1/-1}
  .footer__note{max-width:60ch}
}
@media (max-width:760px){
  :root{--section-y:88px;--section-y-tight:64px;--nav-h:76px}
  .wrap{padding:0 20px}
  .nav__toggle{display:grid}
  .nav__links{position:absolute;inset-inline:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
              background:rgba(0,0,0,.97);backdrop-filter:var(--blur-veil);-webkit-backdrop-filter:var(--blur-veil);
              border-bottom:1px solid var(--site-line);padding:8px 20px 20px;
              display:none}
  .nav[data-open="true"] .nav__links{display:flex}
  .nav__link{padding:14px 0;border-bottom:1px solid var(--site-line)}
  .nav__links .btn{margin-top:16px}
  .lockup__tag{display:none}
  .hero__inner{padding-block:96px 120px}
  .hero__figures{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;margin-top:64px}
  .hero__cue{display:none}
  .services{grid-template-columns:1fr}
  .process{grid-template-columns:1fr;gap:36px}
  .form{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:40px}
  .footer__col--brand{grid-column:auto}
  .cta__inner{padding-block:80px}
}

@media (prefers-reduced-motion:reduce){
  .rv,.mask>span,.rule-draw,.step::before{transition:none!important;opacity:1!important;transform:none!important}
  .step::before{width:44px}
  .spin-slow,.spin-slow-r,.float,.marquee__row,.hero__cue i,.btn::after{animation:none!important}
}

/* ===== work.css ===== */

/* ===========================================================================
   Arena Rise — "أعمالنا" portfolio section, media lightbox, language toggle.
   Additive only: nothing here restyles an element outside #work, the lightbox
   or the nav's language button.
   =========================================================================== */

/* --------------------------------------------------------- language switch */
.langbtn{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  height:34px;padding:0 12px;cursor:pointer;
  background:transparent;border:1px solid var(--border-hairline);border-radius:var(--radius-pill);
  font:var(--fw-medium) var(--fs-3xs)/1 var(--font-sans);letter-spacing:var(--ls-wide);
  color:var(--text-muted);text-transform:uppercase;
  transition:var(--motion-hover)}
.langbtn:hover{color:var(--text-strong);border-color:var(--border-default)}
.langbtn svg{width:14px;height:14px;flex:none}
.nav .langbtn{color:rgba(255,255,255,.62);border-color:var(--site-line-strong)}
.nav .langbtn:hover{color:#fff;border-color:rgba(255,255,255,.55)}
@media (max-width:760px){
  .nav__links .langbtn{align-self:flex-start;margin-top:16px}
}

/* ------------------------------------------------------------- work cards */
.work-count{font-size:var(--fs-3xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-faint)}

.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.work-grid .wcard--wide{grid-column:span 2}

.wcard{
  display:flex;flex-direction:column;text-align:start;
  background:var(--site-card);border:1px solid var(--site-line);
  padding:0;cursor:pointer;font:inherit;color:inherit;overflow:hidden;
  transition:transform 420ms var(--ease-out),box-shadow 420ms ease,border-color var(--dur-fast) var(--ease-standard)}
.wcard:hover,.wcard:focus-visible{transform:translateY(-3px);background:var(--site-card-hover);box-shadow:0 24px 56px -28px rgba(69,195,194,.45);border-color:var(--site-line-strong)}

.wcard__shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0A0A0A}
.wcard--wide .wcard__shot{aspect-ratio:16/7}
.wcard__shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 900ms var(--ease-out),filter 600ms ease}
.wcard:hover .wcard__shot img{transform:scale(1.05)}

/* type badge sits on the image, teal on ink */
.wcard__kind{
  position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:2;
  background:var(--ar-teal-400);color:var(--ar-ink);
  font:var(--fw-medium) var(--fs-3xs)/1 var(--font-sans);letter-spacing:var(--ls-wide);
  padding:7px 11px;text-transform:uppercase}

.wcard__dur{
  position:absolute;inset-block-start:14px;inset-inline-end:14px;z-index:2;
  background:rgba(11,11,10,.66);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font:var(--fw-medium) var(--fs-3xs)/1 var(--font-sans);padding:7px 10px;letter-spacing:.04em}

/* play / gallery affordance */
.wcard__play{
  position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  background:linear-gradient(to top,rgba(10,46,46,.55),rgba(10,46,46,0) 55%);
  transition:background 420ms ease}
.wcard:hover .wcard__play{background:linear-gradient(to top,rgba(10,46,46,.72),rgba(10,46,46,.14) 60%)}
.wcard__play i{
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform 420ms var(--ease-out),background 320ms ease,border-color 320ms ease}
.wcard:hover .wcard__play i{transform:scale(1.08);background:var(--ar-teal-400);border-color:var(--ar-teal-400)}
.wcard__play svg{color:#fff;transition:color 320ms ease}
.wcard:hover .wcard__play svg{color:var(--ar-ink)}

.wcard__body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.wcard__client{font:var(--fw-medium) var(--fs-3xs)/1.3 var(--font-sans);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--text-faint)}
.wcard__body h3{font:var(--fw-medium) var(--fs-xl)/var(--lh-snug) var(--font-sans)}
.wcard__body p{font-size:var(--fs-sm);color:var(--text-muted);flex:1}
.wcard__more{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font:var(--fw-medium) var(--fs-3xs)/1 var(--font-sans);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--ar-teal-300)}
.wcard__more svg{transition:transform 420ms var(--ease-out)}
/* the chevron travels along the reading direction */
.wcard:hover .wcard__more svg{transform:translateX(-4px)}
[dir="ltr"] .wcard:hover .wcard__more svg{transform:translateX(4px)}

/* ------------------------------------------------------ portfolio download */
.pf{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    border:1px solid var(--site-line);background:var(--site-card);overflow:hidden}
.pf__shot{position:relative;overflow:hidden;background:#0A0A0A;
          border-inline-end:1px solid var(--site-line)}
.pf__shot img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
              transition:transform 900ms var(--ease-out)}
.pf:hover .pf__shot img{transform:scale(1.03)}
.pf__badge{position:absolute;inset-block-start:16px;inset-inline-start:16px;
  background:var(--ar-teal-400);color:var(--ar-ink);
  font:var(--fw-medium) var(--fs-3xs)/1 var(--font-sans);letter-spacing:var(--ls-wide);
  padding:7px 11px;text-transform:uppercase}

.pf__body{padding:48px 44px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.pf__body h3{font:var(--fw-bold) clamp(22px,2.4vw,var(--fs-2xl))/var(--lh-snug) var(--font-display);
             color:var(--text-strong)}
.pf__body p{color:var(--text-muted);font-size:var(--fs-sm);max-width:46ch}
.pf__meta{display:flex;flex-wrap:wrap;gap:0 18px;align-items:center;
  font-size:var(--fs-3xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-faint)}
.pf__meta i{width:4px;height:4px;background:var(--ar-teal-400);display:block;flex:none}
.pf__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.pf__actions .btn svg{flex:none}

@media (max-width:900px){
  .pf{grid-template-columns:1fr}
  .pf__shot{aspect-ratio:16/9;border-inline-end:0;border-block-end:1px solid var(--site-line)}
  .pf__body{padding:34px 26px}
}

/* --------------------------------------------------------------- lightbox */
.lb{position:fixed;inset:0;z-index:80;display:none}
.lb[data-open="true"]{display:block}
.lb__scrim{position:absolute;inset:0;background:rgba(11,11,10,.88);
  backdrop-filter:var(--blur-veil);-webkit-backdrop-filter:var(--blur-veil);
  animation:lb-fade var(--dur-base) var(--ease-standard) both}
@keyframes lb-fade{from{opacity:0}to{opacity:1}}

.lb__panel{
  position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;align-items:center;gap:0;
  padding:76px 24px 48px;
  animation:lb-rise var(--dur-slow) var(--ease-out) both}
@keyframes lb-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.lb__close{
  position:fixed;inset-block-start:20px;inset-inline-end:24px;z-index:3;
  width:46px;height:46px;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff;
  border-radius:var(--radius-sm);transition:var(--motion-hover)}
.lb__close:hover{background:var(--ar-teal-400);border-color:var(--ar-teal-400);color:var(--ar-ink)}

.lb__stage{width:100%;max-width:1120px;position:relative}
.lb__stage video{width:100%;max-height:72vh;display:block;background:#000;outline:none}
.lb__stage img{width:100%;max-height:72vh;object-fit:contain;display:block;background:#0F0F0E}

/* gallery arrows */
.lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;display:grid;place-items:center;cursor:pointer;
  background:rgba(11,11,10,.55);border:1px solid rgba(255,255,255,.28);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:var(--motion-hover)}
.lb__nav:hover{background:var(--ar-teal-400);border-color:var(--ar-teal-400);color:var(--ar-ink)}
.lb__nav--prev{inset-inline-start:14px}
.lb__nav--next{inset-inline-end:14px}
.lb__nav[disabled]{opacity:.3;cursor:default}
/* each glyph is mirrored explicitly in work.js so it points the way the
   reader travels — prev toward the start of the line, next toward the end */

.lb__caption{
  width:100%;max-width:1120px;margin-top:14px;display:flex;gap:16px;align-items:flex-start;
  justify-content:space-between;flex-wrap:wrap;
  color:rgba(255,255,255,.72);font-size:var(--fs-sm);line-height:var(--lh-normal)}
.lb__counter{font-size:var(--fs-3xs);letter-spacing:var(--ls-wide);color:rgba(255,255,255,.45);flex:none}

/* a horizontal scroller inside a column flex parent needs a stated height —
   its automatic minimum size is 0, so it would otherwise collapse */
.lb__thumbs{width:100%;max-width:1120px;margin-top:18px;flex:none;height:75px;
  display:flex;align-items:flex-start;gap:10px;overflow-x:auto;overflow-y:hidden;padding-bottom:6px}
/* explicit height, not aspect-ratio: a stretch-aligned flex item would collapse */
.lb__thumbs button{flex:none;width:92px;height:69px;padding:0;cursor:pointer;overflow:hidden;
  border:1px solid rgba(255,255,255,.2);background:none;opacity:.5;transition:opacity var(--dur-fast) ease,border-color var(--dur-fast) ease}
.lb__thumbs button:hover{opacity:.85}
.lb__thumbs button[aria-current="true"]{opacity:1;border-color:var(--ar-teal-400)}
.lb__thumbs img{width:100%;height:100%;object-fit:cover;display:block}

.lb__info{width:100%;max-width:1120px;margin-top:40px;padding-top:32px;
  border-top:1px solid rgba(255,255,255,.14);
  display:grid;grid-template-columns:1.4fr .9fr;gap:48px;align-items:start}
.lb__info h2{color:#fff;font:var(--fw-bold) var(--fs-3xl)/var(--lh-snug) var(--font-display)}
.lb__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.lb__tag{background:var(--ar-teal-400);color:var(--ar-ink);
  font:var(--fw-medium) var(--fs-3xs)/1 var(--font-sans);letter-spacing:var(--ls-wide);
  padding:7px 11px;text-transform:uppercase}
.lb__client{font-size:var(--fs-3xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:rgba(255,255,255,.5)}
.lb__info p{margin-top:18px;color:rgba(255,255,255,.72);line-height:var(--lh-relaxed);max-width:62ch}
.lb__facts{display:flex;flex-direction:column;gap:0}
.lb__fact{display:flex;justify-content:space-between;gap:20px;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.10);font-size:var(--fs-sm)}
.lb__fact b{font-weight:var(--fw-medium);color:rgba(255,255,255,.45);
  font-size:var(--fs-3xs);letter-spacing:var(--ls-wide);text-transform:uppercase;flex:none}
.lb__fact span{color:rgba(255,255,255,.82);text-align:end}

body.lb-open{overflow:hidden}

/* ------------------------------------------------------------ responsive --*/
@media (max-width:1024px){
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-grid .wcard--wide{grid-column:span 2}
  .lb__info{grid-template-columns:1fr;gap:28px}
}
@media (max-width:760px){
  .work-grid{grid-template-columns:1fr}
  .work-grid .wcard--wide{grid-column:span 1}
  .work-grid .wcard--wide .wcard__shot{aspect-ratio:16/10}
  .lb__panel{padding:68px 14px 36px}
  .lb__close{inset-block-start:12px;inset-inline-end:14px;width:42px;height:42px}
  .lb__stage video,.lb__stage img{max-height:56vh}
  .lb__nav{width:40px;height:40px}
  .lb__info h2{font-size:var(--fs-2xl)}
  .lb__thumbs{height:62px}
  .lb__thumbs button{width:74px;height:56px}
}

@media (prefers-reduced-motion:reduce){
  .lb__scrim,.lb__panel{animation:none!important}
  .wcard,.wcard__shot img,.wcard__more svg{transition:none!important}
  .wcard:hover{transform:none}
  .wcard:hover .wcard__shot img{transform:none}
}

/* ── the pre-rendered card ───────────────────────────────────────────────────
   work.js replaces these the moment it runs, so almost nobody sees them. The
   two audiences who do are a visitor whose JavaScript failed and a crawler,
   and neither should meet a broken-looking page. Collapsed by default: the
   long write-up is one summary line until someone asks for it. */
.wcard__detail{margin-top:14px;border-top:1px solid var(--site-line);padding-top:12px}
.wcard__detail summary{cursor:pointer;font:var(--type-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-accent);list-style:none}
.wcard__detail summary::-webkit-details-marker{display:none}
.wcard__detail summary::after{content:' +';font-weight:700}
.wcard__detail[open] summary::after{content:' –'}
.wcard__detail p{margin:12px 0 0;font:var(--type-body-sm);color:var(--text-body)}
.wcard__facts{margin:14px 0 0;display:grid;gap:6px}
.wcard__facts div{display:flex;gap:10px;font:var(--type-body-sm)}
.wcard__facts dt{color:var(--text-muted);min-width:11ch}
.wcard__facts dd{margin:0;color:var(--text-body)}
.wcard__shots{margin:14px 0 0;padding-inline-start:18px;display:grid;gap:6px;
  font:var(--type-body-sm);color:var(--text-muted)}

/* ── the 3D carousel ─────────────────────────────────────────────────────────
   Everything that moves here moves on the compositor. The turn is one keyframe
   on the stage; the depth fade is a second keyframe per card, offset by
   animation-delay so each card sits at its own point on the revolution.

   The first version drove both from requestAnimationFrame and measured 20.2s
   of blocking on mobile. Transform and opacity are the two properties a
   browser can animate without waking the main thread, so those are the only
   two used.

   .wheel.is-on is set by wheel.js once it has actually taken the cards. Until
   then, under prefers-reduced-motion, and whenever a filter leaves fewer than
   five items, the grid is what shows. */
.wheel{position:relative;display:none;perspective:1700px;perspective-origin:50% 45%;
  margin:38px 0 0;overflow:hidden;touch-action:pan-y}
.wheel.is-on{display:block;cursor:grab}
.wheel.is-on.is-dragging{cursor:grabbing}

.wheel__stage{position:absolute;inset:0;transform-style:preserve-3d;
  transform:translateZ(calc(var(--wheel-radius,0px) * -1))
            rotateY(var(--wheel-offset,0deg));
  animation:wheel-turn 110s linear infinite;
  will-change:transform}
@keyframes wheel-turn{
  from{transform:translateZ(calc(var(--wheel-radius,0px) * -1))
                 rotateY(var(--wheel-offset,0deg))}
  to  {transform:translateZ(calc(var(--wheel-radius,0px) * -1))
                 rotateY(calc(var(--wheel-offset,0deg) + 360deg))}
}

.wheel__card{position:absolute;top:50%;left:50%;
  width:var(--wheel-card,290px);margin:0;
  transform-origin:50% 50%;backface-visibility:hidden;
  animation:wheel-depth 110s linear infinite}
/* front of the turn is full strength; the rim recedes and comes back */
@keyframes wheel-depth{
  0%{opacity:1}
  30%{opacity:.55}
  50%{opacity:.3}
  70%{opacity:.55}
  100%{opacity:1}
}

/* hover and focus are class swaps on the host, so changing the rate never
   touches a style property from script */
.wheel.is-slow .wheel__stage,.wheel.is-slow .wheel__card{animation-duration:550s}
.wheel.is-still .wheel__stage,.wheel.is-still .wheel__card,
.wheel.is-dragging .wheel__stage,.wheel.is-dragging .wheel__card{animation-play-state:paused}

.wheel__card .wcard__shot{border-radius:var(--radius-card)}
.wheel__card .wcard__body{padding-top:12px}
.wheel__card p{display:none}          /* the rim carries titles, not ledes */

/* the grid steps aside only while a wheel is actually running */
.wheel.is-on + .work-grid{display:none}

@media (prefers-reduced-motion:reduce){
  .wheel{display:none !important}
  .wheel + .work-grid{display:grid !important}
  .wheel__stage,.wheel__card{animation:none !important}
}

@media (max-width:900px){
  .wheel{perspective:1150px}
  .wheel__card .wcard__body{padding-top:10px}
}
@media (max-width:520px){
  .wheel{perspective:820px;perspective-origin:50% 47%}
  .wheel__card h3{font:var(--type-body-sm)}
  /* the card is 340px now, not 200 - the client line has room again */
  .wheel__card .wcard__more{display:none}
  /* Two short lines were sitting inside 60px of padding while the photograph
     took what was left. The picture is what people are looking at. */
  .wheel__card .wcard__body{padding:10px 14px 14px;gap:6px}
  .wheel__card .wcard__shot{aspect-ratio:3/2}
}

/* ===== intro.css ===== */

/* ===========================================================================
   Arena Rise — logo intro, hero showreel backdrop, hero pointer response.

   INTRO PHASE TABLE (single 1200ms timeline, percentages are of that)
   ---------------------------------------------------------------------------
   phase              %          ms          what moves
   setup              0          0           mark at .82, invisible
   anticipation       0–25       0–750       mark eases DOWN to .78 while fading
                                             in — the counter-move that makes the
                                             growth read as a push, not a fade
   commitment         25–45      750–1350    mark .78 → 1.05, full opacity
   settle             45–54      1350–1620   1.05 → 1.00, overshoot recovered
   secondary          30–62      900–1860    wordmark masks up: starts AFTER the
                                             mark commits, settles AFTER it lands
   hold               54–80      1620–2400   rule draws, tagline fades in
   exit anticipation  80–85      2400–2560   lockup drifts DOWN 6px
   exit               85–100     2560–3000   lockup lifts and fades, curtain
                                             wipes up to reveal the page
   ---------------------------------------------------------------------------
   Every channel is a pure function of elapsed time — no frame-to-frame state,
   so a skip or a reduced-motion run lands in exactly the same end pose.
   =========================================================================== */

.intro{
  position:fixed;inset:0;z-index:120;background:#000;
  display:grid;place-items:center;
  will-change:transform;
  animation:intro-curtain 1200ms cubic-bezier(.16,1,.3,1) both;
}
body.intro-open{overflow:hidden}

.intro__lockup{display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px}

.intro__mark{width:clamp(96px,14vw,168px);height:auto;display:block;
  animation:intro-mark 1200ms cubic-bezier(.16,1,.3,1) both}

/* the wordmark rises out of a clip, so its entrance reads as a reveal
   rather than a fade — same mask vocabulary as the hero headline */
.intro__word{display:block;overflow:hidden;padding-block:4px}
.intro__word span{
  display:block;
  font:var(--fw-black) clamp(20px,3.2vw,34px)/1 var(--font-display);
  letter-spacing:var(--ls-wider);text-transform:uppercase;color:#fff;
  animation:intro-word 1200ms cubic-bezier(.16,1,.3,1) both}

.intro__rule{width:88px;height:2px;background:var(--ar-teal-400);transform-origin:center;
  animation:intro-rule 1200ms cubic-bezier(.16,1,.3,1) both}

.intro__tag{font-size:var(--fs-3xs);letter-spacing:var(--ls-widest);text-transform:uppercase;
  color:rgba(255,255,255,.62);white-space:nowrap;
  animation:intro-tag 1200ms linear both}

@keyframes intro-curtain{
  0%,85%{transform:translateY(0)}
  100%  {transform:translateY(-101%)}
}
@keyframes intro-mark{
  0%   {opacity:0;   transform:translateY(0) scale(.82)}
  25%  {opacity:.45; transform:translateY(0) scale(.78)}   /* anticipation */
  45%  {opacity:1;   transform:translateY(0) scale(1.05)}  /* commitment */
  54%  {opacity:1;   transform:translateY(0) scale(1)}     /* settle */
  80%  {opacity:1;   transform:translateY(0) scale(1)}     /* hold */
  85%  {opacity:1;   transform:translateY(6px) scale(1)}   /* exit anticipation */
  100% {opacity:0;   transform:translateY(-26px) scale(1.02)}
}
@keyframes intro-word{
  0%,30%{opacity:0; transform:translateY(105%)}
  62%   {opacity:1; transform:translateY(0)}
  80%   {opacity:1; transform:translateY(0)}
  85%   {opacity:1; transform:translateY(4px)}
  100%  {opacity:0; transform:translateY(-22px)}
}
@keyframes intro-rule{
  0%,52%{transform:scaleX(0);opacity:1}
  72%   {transform:scaleX(1);opacity:1}
  85%   {transform:scaleX(1);opacity:1}
  100%  {transform:scaleX(1);opacity:0}
}
@keyframes intro-tag{
  0%,58%{opacity:0}
  75%   {opacity:.62}
  85%   {opacity:.62}
  100%  {opacity:0}
}

/* skip: collapse to the same end pose, fast, without replaying anything */
.intro.is-done{
  animation:none;transform:translateY(-101%);
  transition:transform 420ms cubic-bezier(.16,1,.3,1)}
.intro.is-done *{animation:none!important;opacity:0;transition:opacity 200ms linear}

@media (prefers-reduced-motion:reduce){
  .intro,.intro *{animation:none!important}
  .intro{display:none}
}

/* ------------------------------------------------------- hero showreel --- */
/* Sits above the page-wide canvas, below the veil and the type. Muted, looped
   and silent — it is a backdrop, not a player; the same film is watchable with
   sound from the work grid. */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:-3;
  opacity:0;transition:opacity 1200ms var(--ease-out)}
.hero__video.is-live{opacity:1}
/* where the loop is withheld — phone, metered connection, reduced motion —
   the element still carries the poster, so the hero keeps the same
   composition as a still instead of falling back to a bare canvas */
.hero__video.is-poster{opacity:.62}

/* ------------------------------------------------------- sound toggle --- */
/* stacked above the floating WhatsApp button, which owns this corner */
.hero__sound{
  position:absolute;inset-inline-end:38px;bottom:100px;z-index:3;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;padding:0;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.34);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background-color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             transform var(--dur-base) var(--ease-out)}
.hero__sound:hover{background:var(--ar-teal-400);border-color:var(--ar-teal-400);
  color:var(--ar-ink);transform:scale(1.06)}
.hero__sound svg{width:19px;height:19px;display:block}
.hero__sound-on,.hero__sound-off{display:none;line-height:0}
/* the icon shows the CURRENT state, not the action — a crossed speaker while
   muted is the convention people already read correctly */
.hero__sound[data-muted="false"] .hero__sound-on{display:block}
.hero__sound[data-muted="true"]  .hero__sound-off{display:block}
/* while sound is still waiting on a gesture, the control asks to be pressed */
.hero__sound[data-await="true"]{border-color:var(--ar-teal-400);
  box-shadow:0 0 0 0 rgba(69,195,194,.55);animation:sound-ask 2.6s var(--ease-standard) infinite}
@keyframes sound-ask{
  0%,70%,100%{box-shadow:0 0 0 0 rgba(69,195,194,.45)}
  35%        {box-shadow:0 0 0 9px rgba(69,195,194,0)}
}
@media (max-width:760px){
  /* Up under the header. At bottom:84 this sat inside .hero__inner, which a
     phone pins to the bottom of a full-height hero - the button covered the
     "see our work" button completely. */
  .hero__sound{inset-inline-end:20px;top:calc(var(--nav-h) + 14px);bottom:auto;
    width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .hero__sound[data-await="true"]{animation:none}
}

/* a teal light that follows the cursor across the hero */
.hero__spot{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity 600ms var(--ease-standard);
  background:radial-gradient(520px 380px at var(--spot-x,50%) var(--spot-y,40%),
             rgba(69,195,194,.20),rgba(69,195,194,.06) 42%,transparent 68%)}
.hero.is-pointing .hero__spot{opacity:1}

/* the hero column counter-drifts against the pointer — small, and slower than
   the cursor, so it reads as depth rather than as the content chasing a mouse */
.hero__inner{will-change:transform}

/* The desktop veil is a horizontal ramp tuned for the RTL text column. On a
   phone the copy spans the full width, so the ramp has to run top-to-bottom
   instead or the headline sits on open picture. */
@media (max-width:760px){
  .hero__video.is-poster{opacity:.5}
  .hero__veil{background:
    radial-gradient(90% 55% at 72% 10%,rgba(69,195,194,.12),transparent 62%),
    linear-gradient(to bottom,rgba(0,0,0,.58),rgba(0,0,0,.74) 55%,rgba(0,0,0,.86))}
}

@media (prefers-reduced-motion:reduce){
  .hero__video{transition:none}
  .hero__spot{display:none}
}

/* ===== cursor.css ===== */

/* ===========================================================================
   Arena Rise — interactive cursor.

   Two parts moving at different rates, which is what makes it read as one
   object with weight rather than as a sticker glued to the pointer:

     dot   primary   tracks the pointer exactly, no lag
     ring  secondary trails behind, settles after the dot has stopped

   States: rest → hover (ring opens around the target, dot recedes)
           → press (ring contracts, the impact) → release (settles back).

   Only mounted for a fine, hovering pointer, and never under reduced motion —
   a trailing cursor is precisely the motion that setting exists to suppress.
   =========================================================================== */

.cur{
  position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  border-radius:50%;
  opacity:0;
  will-change:transform,opacity;
}
.cur--dot{
  width:6px;height:6px;margin:-3px 0 0 -3px;
  background:var(--ar-teal-400);
  transition:opacity 220ms linear,width 260ms var(--ease-out),height 260ms var(--ease-out),
             margin 260ms var(--ease-out),background-color 260ms var(--ease-standard);
}
.cur--ring{
  width:36px;height:36px;margin:-18px 0 0 -18px;
  border:1px solid rgba(69,195,194,.55);
  background:rgba(69,195,194,0);
  transition:opacity 220ms linear,width 320ms var(--ease-out),height 320ms var(--ease-out),
             margin 320ms var(--ease-out),border-color 260ms var(--ease-standard),
             background-color 320ms var(--ease-standard);
}

html.has-cursor .cur{opacity:1}
html.has-cursor.cur-hidden .cur{opacity:0}

/* the native pointer steps aside, except where a caret is the better signal */
html.has-cursor,
html.has-cursor *{cursor:none}
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select{cursor:auto}

/* hover: the ring opens around whatever is under it and the dot recedes */
html.has-cursor.cur-hot .cur--ring{
  width:62px;height:62px;margin:-31px 0 0 -31px;
  border-color:rgba(69,195,194,.9);
  background:rgba(69,195,194,.10);
}
html.has-cursor.cur-hot .cur--dot{
  width:4px;height:4px;margin:-2px 0 0 -2px;
  background:rgba(69,195,194,.7);
}

/* press: the ring contracts — the impact the release then recovers from */
html.has-cursor.cur-down .cur--ring{
  width:30px;height:30px;margin:-15px 0 0 -15px;
  background:rgba(69,195,194,.20);
}
html.has-cursor.cur-hot.cur-down .cur--ring{
  width:52px;height:52px;margin:-26px 0 0 -26px;
}

@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .cur{display:none}
  html.has-cursor,html.has-cursor *{cursor:auto}
}

/* ===== theme.css ===== */

/* ===========================================================================
   Arena Rise — hero layout, stats ticker, theme toggle, and the light mode.

   Loaded last. Dark is the default and is left exactly as the other sheets
   define it; every light-mode rule here is scoped to
   html:not([data-theme="dark"]) so switching cannot leak into the dark look.
   =========================================================================== */

/* ------------------------------------------------------------- hero ------ */
/* the film carries the frame; only the two calls to action sit on it,
   anchored to the bottom of the reading side */
.hero{align-items:flex-end}
.hero__inner{padding-block:0 clamp(56px,9vh,104px)}
.hero__cta{margin-top:0;justify-content:flex-start}

/* ----------------------------------------------------------- ticker ------ */
.ticker{
  position:relative;overflow:hidden;
  /* LTR on the CONTAINER, not the row: an overflowing max-content child is
     placed against the right edge under dir=rtl, which is what walked the
     band off-screen. Direction on the row itself only orders its children. */
  direction:ltr;
  border-block:1px solid var(--site-line);
  padding-block:20px;
  background:var(--site-panel);
  /* the band dissolves into the page at both ends instead of being cut off */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
}
.ticker__row{display:flex;width:max-content;align-items:center;
  animation:ticker-run 46s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
@keyframes ticker-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.ticker__stat,.ticker__word{
  display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap;
  padding-inline:30px;position:relative}
[dir="rtl"] .ticker__stat{direction:rtl}
/* one teal lozenge between every item, drawn on the item rather than as extra
   markup so the cloned half stays identical. Physical `left` because the row
   is always LTR — a logical property would flip per item. */
.ticker__stat::after,.ticker__word::after{
  content:"";position:absolute;left:-3px;top:50%;
  width:5px;height:5px;margin-top:-2.5px;background:var(--ar-teal-400)}

.ticker__stat b{font:var(--fw-black) var(--fs-xl)/1 var(--font-display);color:var(--text-strong)}
.ticker__stat i{font-style:normal;font-size:var(--fs-xs);color:var(--text-muted)}
.ticker__word{font-size:var(--fs-xs);letter-spacing:var(--ls-wider);
  text-transform:uppercase;color:var(--text-faint)}

@media (prefers-reduced-motion:reduce){
  .ticker__row{animation:none}
  .ticker{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
}

/* ------------------------------------------------------ theme toggle ----- */
.themebtn{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  height:34px;padding:0 12px;cursor:pointer;
  background:transparent;border:1px solid var(--site-line-strong);border-radius:var(--radius-pill);
  font:var(--fw-medium) var(--fs-3xs)/1 var(--font-sans);letter-spacing:var(--ls-wide);
  color:var(--nav-fg,rgba(255,255,255,.62));text-transform:uppercase;
  transition:var(--motion-hover)}
.themebtn:hover{color:var(--nav-fg-on,#fff);border-color:var(--ar-teal-400)}
.themebtn svg{width:15px;height:15px;display:block}
.themebtn__icon{display:none;line-height:0}
/* the button shows the mode it will switch TO */
html[data-theme="dark"] .themebtn__icon--sun{display:block}
html:not([data-theme="dark"]) .themebtn__icon--moon{display:block}
@media (max-width:760px){
  .nav__links .themebtn{align-self:flex-start;margin-top:10px}
}

/* =====================================================  LIGHT MODE  ======= */
/* scoped to the root, not body, so :root and body never disagree about the
   palette — anything reading a --site-* var gets the same answer either way */
html:not([data-theme="dark"]){
  --site-ground:#F7F5F0;
  --site-panel:rgba(255,255,255,.78);
  --site-card:rgba(255,255,255,.94);
  --site-card-hover:#FFFFFF;
  --site-line:rgba(29,29,27,.12);
  --site-line-strong:rgba(29,29,27,.22);
  --nav-fg:var(--text-muted);
  --nav-fg-on:var(--text-strong);
}

/* nav: ink type on ivory, and the colour mark returns */
html:not([data-theme="dark"]) .nav[data-solid="true"]{background:rgba(247,245,240,.88)}
html:not([data-theme="dark"]) .nav .nav__link{color:var(--text-muted)}
html:not([data-theme="dark"]) .nav .nav__link[aria-current="true"]{color:var(--text-strong)}
html:not([data-theme="dark"]) .nav .lockup__word{color:var(--text-strong)}
html:not([data-theme="dark"]) .nav .lockup__tag{color:var(--text-muted)}
html:not([data-theme="dark"]) .nav .mark-color{display:block}
html:not([data-theme="dark"]) .nav .mark-white{display:none}
html:not([data-theme="dark"]) .nav__toggle{color:var(--text-strong);border-color:var(--site-line-strong)}
html:not([data-theme="dark"]) .nav .langbtn,
html:not([data-theme="dark"]) .themebtn{color:var(--text-muted);border-color:var(--site-line-strong)}
html:not([data-theme="dark"]) .nav .langbtn:hover,
html:not([data-theme="dark"]) .themebtn:hover{color:var(--text-strong)}
@media (max-width:760px){
  html:not([data-theme="dark"]) .nav__links{background:rgba(247,245,240,.97)}
}

/* the hero veil stays dark in both modes — it sits on the film, not the page */

html:not([data-theme="dark"]) .step__num{color:var(--ar-n-500)}
html:not([data-theme="dark"]) .service__num,
html:not([data-theme="dark"]) .service__icon{color:var(--ar-teal-600)}
html:not([data-theme="dark"]) .wcard__shot,
html:not([data-theme="dark"]) .pf__shot{background:var(--ar-n-100)}
html:not([data-theme="dark"]) .wcard__more{color:var(--ar-teal-600)}
html:not([data-theme="dark"]) .wcard:hover,
html:not([data-theme="dark"]) .wcard:focus-visible{box-shadow:var(--shadow-md)}
html:not([data-theme="dark"]) .sec-head__top .ar-eyebrow{color:var(--ar-teal-600)}

/* buttons that sat on black need ink type on ivory */
html:not([data-theme="dark"]) .btn--accent{color:var(--text-strong)}
html:not([data-theme="dark"]) .btn--accent:hover{color:var(--ar-ink)}
html:not([data-theme="dark"]) .btn--outline{color:var(--text-strong);border-color:var(--border-default)}
html:not([data-theme="dark"]) .btn--outline:hover{color:var(--ar-ink)}

/* the two dark bands keep their own contrast in either mode */
html:not([data-theme="dark"]) .cta{
  background:linear-gradient(to bottom,rgba(10,46,46,.94),rgba(10,46,46,1))}
html:not([data-theme="dark"]) .footer{background:var(--site-deep)}

/* the whole page cross-fades rather than snapping between modes */
html.theme-shift body,
html.theme-shift .nav,
html.theme-shift .ticker,
html.theme-shift .wcard,
html.theme-shift .service,
html.theme-shift .contact-card,
html.theme-shift .field input,
html.theme-shift .field textarea,
html.theme-shift .field select{
  transition:background-color 420ms var(--ease-standard),
             color 420ms var(--ease-standard),
             border-color 420ms var(--ease-standard)}
@media (prefers-reduced-motion:reduce){
  html.theme-shift *{transition:none!important}
}

/* ===== pages.css ===== */

/* ===========================================================================
   Arena Rise — inner pages (services.html, work.html).
   A compact page header instead of the home page's full-height film, plus the
   detailed service blocks. Everything else is inherited from the site layer.
   =========================================================================== */

/* ------------------------------------------------------- page header ----- */
.page-head{
  position:relative;isolation:isolate;
  margin-top:calc(var(--nav-h) * -1);
  padding-block:calc(var(--nav-h) + 92px) 84px;
  border-bottom:1px solid var(--site-line)}
.page-head__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 120% at 78% 0%,rgba(69,195,194,.13),transparent 62%)}
.page-head h1{
  font:var(--fw-black) clamp(38px,6.2vw,var(--fs-6xl))/1.15 var(--font-display);
  color:var(--text-strong);letter-spacing:0;margin-top:22px}
.page-head__lede{margin-top:24px;max-width:60ch;color:var(--text-muted);
  font-size:var(--fs-lg);line-height:var(--lh-relaxed)}
.page-head__top{display:flex;align-items:center;gap:16px}

@media (max-width:760px){
  .page-head{padding-block:calc(var(--nav-h) + 56px) 56px}
  .page-head__lede{font-size:var(--fs-md)}
}

/* --------------------------------------------------- service detail ------ */
.svc-list{display:flex;flex-direction:column}
.svc{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:0 28px;
  padding-block:56px;border-bottom:1px solid var(--site-line)}
.svc:last-child{border-bottom:0}
.svc__head{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.svc__icon{width:34px;height:34px;color:var(--ar-teal-400);flex:none}
.svc__num{font:var(--fw-black) var(--fs-3xl)/1 var(--font-display);color:var(--site-line-strong)}

.svc__body{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.svc__body h2{font:var(--fw-bold) clamp(24px,3vw,var(--fs-3xl))/var(--lh-snug) var(--font-display)}
.svc__lede{color:var(--text-body);max-width:62ch;line-height:var(--lh-relaxed)}

.svc__cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:32px 48px;width:100%;margin-top:6px;align-items:start}
.svc__label{display:block;margin-bottom:14px;color:var(--text-faint)}
.svc__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.svc__list li{position:relative;padding-inline-start:22px;font-size:var(--fs-sm);color:var(--text-muted)}
.svc__list li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:6px;height:6px;background:var(--ar-teal-400)}

/* the payoff line, set apart from the checklist beside it */
.svc__outcome{
  border-inline-start:2px solid var(--ar-teal-400);
  padding-inline-start:20px;
  font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--text-strong)}

.svc__cta{margin-top:8px}

@media (max-width:900px){
  .svc{grid-template-columns:1fr;gap:22px}
  .svc__head{flex-direction:row;align-items:center;gap:14px}
  .svc__cols{grid-template-columns:1fr;gap:26px}
}

/* ------------------------------------------------------------- about ----- */
/* every block on the page shares one rhythm: a narrow label column on the
   reading side, content beside it — so the page scans as one column of labels */
.abt-grid{display:grid;grid-template-columns:180px minmax(0,1fr);gap:0 40px;align-items:start}
.abt-grid__label{padding-top:6px}
.abt-story{border-bottom:1px solid var(--site-line)}

.abt-prose{display:flex;flex-direction:column;gap:22px;max-width:66ch}
.abt-prose p{font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--text-body)}
.abt-prose p:first-child{color:var(--text-strong)}

.abt-figures__label{display:block}

.abt-values{display:flex;flex-direction:column;gap:0}
.abt-value{padding-block:34px;border-bottom:1px solid var(--site-line);
  display:flex;flex-direction:column;gap:12px}
.abt-value:first-child{padding-top:0}
.abt-value:last-child{border-bottom:0;padding-bottom:0}
.abt-value__num{font:var(--fw-medium) var(--fs-3xs)/1 var(--font-sans);
  letter-spacing:var(--ls-widest);color:var(--ar-teal-400)}
.abt-value h2{font:var(--fw-bold) clamp(21px,2.4vw,var(--fs-2xl))/var(--lh-snug) var(--font-display)}
.abt-value__short{color:var(--text-body);max-width:60ch}
.abt-value__body{font-size:var(--fs-sm);color:var(--text-muted);max-width:62ch}

.abt-clients{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px}
.abt-clients li{
  border:1px solid var(--site-line);padding:11px 18px;
  font-size:var(--fs-sm);color:var(--text-body);
  transition:border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.abt-clients li:hover{border-color:var(--ar-teal-400);color:var(--text-strong)}

.abt-facts{margin:0;display:flex;flex-direction:column;gap:0}
.abt-fact{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;
  padding-block:15px;border-bottom:1px solid var(--site-line)}
.abt-fact:last-child{border-bottom:0}
.abt-fact dt{font:var(--fw-medium) var(--fs-3xs)/1.4 var(--font-sans);
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-faint)}
.abt-fact dd{margin:0;font-size:var(--fs-sm);color:var(--text-strong)}

@media (max-width:900px){
  .abt-grid{grid-template-columns:1fr;gap:18px}
  .abt-grid__label{padding-top:0}
  .abt-prose p{font-size:var(--fs-md)}
  .abt-fact{grid-template-columns:1fr;gap:6px}
}

/* ------------------------------------------------------- home teasers ---- */
/* the "see everything" link that closes a teaser block */
.more-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:40px;
  font:var(--fw-medium) var(--fs-xs)/1 var(--font-sans);
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ar-teal-300)}
.more-link svg{transition:transform 420ms var(--ease-out)}
.more-link:hover{color:var(--ar-teal-400)}
.more-link:hover svg{transform:translateX(-5px)}
[dir="ltr"] .more-link:hover svg{transform:translateX(5px)}
html:not([data-theme="dark"]) .more-link{color:var(--ar-teal-600)}

/* ── decision guides: compare.html, guide.html ───────────────────────────────
   Prose pages, so they use the narrow measure. The comparison table is the one
   piece of real structure: it scrolls inside its own container rather than
   letting the page scroll sideways, and it keeps its row header visible. */
.wrap--narrow{max-width:var(--container-narrow)}
.cmp-wrap{overflow-x:auto;margin:32px 0 8px;border:1px solid var(--site-line);
  border-radius:var(--radius-card)}
.cmp{width:100%;border-collapse:collapse;font:var(--type-body-sm);min-width:560px}
.cmp th,.cmp td{padding:16px 18px;text-align:start;vertical-align:top;
  border-bottom:1px solid var(--site-line)}
.cmp thead th{font:var(--type-label);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-accent);background:var(--site-panel);white-space:nowrap}
.cmp tbody th{font-weight:var(--fw-medium);color:var(--text-strong);width:30%}
.cmp tbody td{color:var(--text-body)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
/* the accountable column is the answer the page argues for; mark it once */
.cmp tbody td:first-of-type{background:var(--surface-accent-soft,transparent)}

.guide-list{margin:18px 0 0;padding-inline-start:20px;display:grid;gap:12px;
  font:var(--type-body);color:var(--text-body)}
.guide-list--num{list-style:decimal}

.guide-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:34px;counter-reset:g}
.guide-step{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.guide-step__num{font:var(--fw-heavy) var(--fs-xl)/1 var(--font-display);
  color:var(--text-faint);letter-spacing:-.02em}
.guide-step h2{margin:0 0 6px;font:var(--type-h3)}
.guide-step p{margin:0;font:var(--type-body);color:var(--text-body)}

@media (max-width:520px){
  .guide-step{grid-template-columns:1fr;gap:8px}
  .cmp th,.cmp td{padding:13px 14px}
}