/* timeskip.studio — homepage styles */

@font-face {
  font-family: 'Geist Pixel Square';
  src: url('../assets/fonts/geist-pixel-square.woff2') format('woff2');
  font-weight: 100 900; /* single weight, declared as a range so heavier headings never get faux-bolded */
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --accent: #1F4FD8;
  --on-accent: #FFFFFF;
  --on-accent-soft: #E6ECFF;
  --black: #020203;
  --radius: 12px;
  --header-h: 81px;
}

:root,
:root[data-theme="dark"] {
  --bg: #020203;
  --bg2: #07080B;
  --card: #0B0C10;
  --card-top: #0E1018;
  --line: #1E212B;
  --line-soft: #16181F;
  --btn-line: #2C3040;
  --text: #EAF0FF;
  --text2: #C9D3EC;
  --muted: #9AA7C7;
  --dim: #6B7799;
  --hi: #8FAEFF;
  --ink-strong: #E6EEFF;
  --glass: rgba(2, 2, 3, 0.55);
  --ghost: rgba(14, 15, 20, 0.6);
  --pill-bg: rgba(255, 255, 255, 0.07);
  --pill-line: rgba(255, 255, 255, 0.12);
  --pill-hover: rgba(255, 255, 255, 0.08);
  --btn-primary-line: rgba(255, 255, 255, 0.16);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #EEEBE4;
  --bg2: #E5E1D7;
  --card: #F8F6F1;
  --card-top: #FBFAF6;
  --line: #D3CDC0;
  --line-soft: #DDD8CC;
  --btn-line: #C4BDAE;
  --text: #0B0D14;
  --text2: #2A2E3A;
  --muted: #4A4F5E;
  --dim: #5E6270;
  --hi: #1F4FD8;
  --ink-strong: #0B0D14;
  --glass: rgba(238, 235, 228, 0.72);
  --ghost: rgba(255, 255, 255, 0.55);
  --pill-bg: rgba(255, 255, 255, 0.55);
  --pill-line: rgba(11, 13, 20, 0.09);
  --pill-hover: rgba(11, 13, 20, 0.05);
  --btn-primary-line: transparent;
  color-scheme: light;
}
/* Light mode still has dark surfaces (the hero photo behind the header, the contact photo) */
[data-theme="light"]:not(.past-hero) .navcta,
[data-theme="light"] .contact { --btn-primary-line: rgba(255, 255, 255, 0.16); }

/* ---------- Base ---------- */

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color .3s ease, color .3s ease;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--text); }
button { font-family: inherit; }
img { display: block; }

:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 16px; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent);
}
.skip:focus { top: 12px; }

.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;
}

/* ---------- Type ---------- */

/* Latin glyphs come from Geist Pixel. Arabic: small pixel labels fall back to IBM Plex Sans Arabic (Handjet is illegible that small); display sizes use Handjet, a pixel Arabic face (below). */
.px { font-family: 'Geist Pixel Square', 'IBM Plex Sans Arabic', 'Outfit', monospace; font-weight: 400; }
.h1, .h2, .hc, .price {
  font-family: 'Geist Pixel Square', 'Handjet', 'Outfit', monospace;
  /* Handjet settings (Arabic glyphs): weight 594, Element Grid 1, Element Shape 7.4 */
  font-weight: 594;
  font-variation-settings: 'ELGR' 1, 'ELSH' 7.4;
  font-synthesis: none;
}
.label { margin: 0; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--hi); }
.h1 { font-size: 80px; line-height: 1.04; margin: 0; min-height: 2.08em; }
.h2 { font-size: 52px; line-height: 1.08; margin: 0; white-space: pre-line; }
.hc { font-size: 128px; line-height: 1; margin: 0; }
.price { font-size: 60px; line-height: 1; }
.price--text { font-size: 40px; line-height: 1.1; } /* word "price" like "Custom quote" */
.lead { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.6; color: var(--text2); }
.aside { margin: 0; max-width: 360px; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--muted); }

[dir="rtl"] .label { letter-spacing: 0; }
[dir="rtl"] .h1 { font-size: 84px; line-height: 1.2; min-height: 2.4em; }
[dir="rtl"] .h2 { font-size: 60px; line-height: 1.15; }
[dir="rtl"] .hc { font-size: 136px; line-height: 1.1; }

/* ---------- Layout ---------- */

.wrap { width: 100%; max-width: 1240px; padding-inline: 48px; margin-inline: auto; }
.sec { padding-block: 112px; }
.sec--alt { background: var(--bg2); }
.sec--rule { border-top: 1px solid var(--line-soft); }
.stack { display: flex; flex-direction: column; gap: 56px; }
.heading { display: flex; flex-direction: column; gap: 20px; }

.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.s7 { grid-column: span 7; }
.s5 { grid-column: 8 / span 5; }
.s4 { grid-column: span 4; }
.s7r { grid-column: 6 / span 7; }
.s12 { grid-column: 1 / -1; }

.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }

/* ---------- Buttons ---------- */

.btns { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Two button styles, a 50px pill each. Primary = solid black; on dark surfaces it gets the same faint
   white rim as the nav pill so its edge stays visible. Outline (ghost) = blue outline + blue text in --hi. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 24px;
  border: 1.5px solid transparent; border-radius: 999px;
  font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; text-align: center;
  text-shadow: none;
  transition: filter .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn--primary { background: var(--black); border-color: var(--btn-primary-line); color: #FFFFFF; }
.btn--primary:hover { color: #FFFFFF; filter: brightness(1.6); } /* a small brightness bump barely shows on black */
.btn--ghost { background: transparent; border-color: var(--hi); color: var(--hi); }
.btn--ghost:hover { color: var(--hi); background: color-mix(in srgb, var(--hi) 12%, transparent); }

.icon-btn {
  min-width: 44px; height: 44px; padding: 0;
  border-radius: var(--radius);
  border: 1px solid var(--btn-line);
  background: var(--ghost);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px;
  transition: border-color .2s ease;
}
.icon-btn:hover { border-color: var(--hi); }
.icon-btn--text { padding: 0 14px; }

.theme-icon--sun { display: block; }
.theme-icon--moon { display: none; }
[data-theme="light"] .theme-icon--sun { display: none; }
[data-theme="light"] .theme-icon--moon { display: block; }

/* ---------- Logo mark ---------- */

.mark {
  display: grid;
  grid-template-columns: repeat(8, 3px);
  grid-auto-rows: 3px;
  gap: 1px;
  flex-shrink: 0;
}
.mark i { border-radius: .5px; }
.mark .a { background: var(--hi); }
.mark .b { background: var(--ink-strong); }

/* ---------- Header ---------- */

/* Floats over the page with no bar background; only the pill and CTA carry a surface. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; }
.site-header a, .site-header button { pointer-events: auto; }
.nav {
  padding-block: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* Logo: no surface of its own. Light version over the hero (a soft dark glow in the hero's top corner,
   in .scene__scrim, keeps it at WCAG AA over the photo) and in dark mode; dark version in light mode once
   it's over the cream page (html.past-hero, set in main.js). */
.brand {
  --hi: #8FAEFF; --ink-strong: #E6EEFF;
  display: flex; align-items: center; gap: 12px; font-size: 20px;
  color: #FFFFFF;
  transition: color .3s ease;
}
.brand:hover { color: #FFFFFF; }
.brand__tld { color: #C9D3EC; transition: color .3s ease; }
[data-theme="light"].past-hero .brand { --hi: #1F4FD8; --ink-strong: #0B0D14; color: #0B0D14; }
[data-theme="light"].past-hero .brand__tld { color: #4A4F5E; }

/* Nav: a dark glass pill over the hero, measured against the photo behind it (after the backdrop blur)
   to clear WCAG AA 4.5:1 at the brightest spot. */
.navpill {
  --text: #FFFFFF; --hi: #8FAEFF;
  display: flex; align-items: center; gap: 2px; padding: 5px; font-size: 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(2, 2, 3, .58);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: var(--text);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.navpill .nl {
  padding: 9px 18px; border-radius: 999px;
  color: var(--text);
  transition: color .2s ease, background-color .2s ease;
}
.navpill .nl:hover { color: var(--text); background: rgba(255, 255, 255, .1); }

/* Light mode, once past the hero: the pill sits on the cream page, where white text on dark glass would
   fail, so it switches to light glass + dark text. */
[data-theme="light"].past-hero .navpill {
  --text: #0B0D14; --hi: #1F4FD8;
  background: rgba(248, 246, 241, .85);
  border-color: rgba(11, 13, 20, .1);
}
[data-theme="light"].past-hero .navpill .nl:hover,
[data-theme="light"].past-hero .navpill .icon-btn:hover { background: rgba(11, 13, 20, .06); }
[data-theme="light"].past-hero .navpill__sep { background: rgba(11, 13, 20, .12); }

.navpill__sep { width: 1px; height: 20px; margin-inline: 6px; background: rgba(255, 255, 255, .12); }
/* Toggles live inside the pill, so they drop their own border and surface */
.navpill .icon-btn {
  min-width: 38px; height: 38px;
  border: 0; border-radius: 999px;
  background: transparent; color: inherit;
  transition: background-color .2s ease;
}
.navpill .icon-btn:hover { background: rgba(255, 255, 255, .08); }
.navpill .icon-btn--text { padding: 0 14px; }

.navlinks { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.navcta__short { display: none; } /* phones show "Book a call" instead (see responsive rules) */

/* ---------- Hero ---------- */

.hero-sec {
  position: relative; overflow: hidden;
  min-height: max(720px, 100svh);
  display: flex; flex-direction: column; justify-content: flex-end;
}

/* Gradient fallback (matches the photo's blues) so the hero still reads while the image loads or if it fails */
/* overflow: the wave layer is oversized; on phones the scene is shorter than the hero, so unclipped it
   would leak below the bottom fade and leave a hard line where the hero ends */
.scene {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60% 50% at 70% 30%, #5C7FD6 0%, rgba(92,127,214,0) 70%),
    radial-gradient(50% 45% at 25% 60%, #3E5DB8 0%, rgba(62,93,184,0) 70%),
    linear-gradient(180deg, #2A3F86 0%, #0A1236 100%);
}
.scene > * { position: absolute; }
/* Hero background photo, panning and slowly zooming (Ken Burns) so it never sits fully still. */
.scene__media {
  top: -3%; left: -3%; width: 106%; height: 106%; object-fit: cover;
  animation: tsSkyPan 42s ease-in-out infinite alternate;
}
/* A blurred, blended duplicate drifting on its own slower path: the "wavy" light/cloud motion over the sharp photo. */
.scene__wave {
  top: -12%; left: -12%; width: 124%; height: 124%;
  background: url('../assets/img/hero-prism.webp') center / cover;
  filter: blur(38px) saturate(1.25);
  opacity: .55;
  mix-blend-mode: screen;
  animation: tsSkyWave 60s ease-in-out infinite;
}
@keyframes tsSkyPan {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-2.5%, -1.5%) scale(1.04); }
}
@keyframes tsSkyWave {
  0%   { transform: translate(-2%, -1%) rotate(0deg) scale(1); }
  33%  { transform: translate(2%, 1.5%) rotate(1.5deg) scale(1.05); }
  66%  { transform: translate(-1%, 2%) rotate(-1deg) scale(1.03); }
  100% { transform: translate(-2%, -1%) rotate(0deg) scale(1); }
}
/* Soft hand-off into the next section: fades the hero into the page background (follows the theme) */
/* Eased (not linear) ramp so there's no visible edge where the hero meets the page colour */
.scene__fade {
  left: 0; right: 0; bottom: -1px; height: 55%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 0%, transparent) 0%,
    color-mix(in srgb, var(--bg) 6%, transparent) 18%,
    color-mix(in srgb, var(--bg) 18%, transparent) 34%,
    color-mix(in srgb, var(--bg) 38%, transparent) 50%,
    color-mix(in srgb, var(--bg) 62%, transparent) 65%,
    color-mix(in srgb, var(--bg) 84%, transparent) 80%,
    color-mix(in srgb, var(--bg) 96%, transparent) 92%,
    var(--bg) 100%);
}
/* Light touch near the top so the photo stays visible behind the nav (it's already fairly dark there);
   darkens toward the headline side and the bottom (cards, form) where text needs to sit on it. */
.scene__scrim {
  inset: 0;
  background:
    /* soft glow behind the logo (it has no surface of its own), so it clears WCAG AA over the photo;
       centred on the logo: the content column is max 1240px, centred, with 48px padding (+110px ≈ half the logo) */
    radial-gradient(ellipse 560px 240px at max(158px, calc(50% - 462px)) 0, rgba(2,2,3,.62) 0%, rgba(2,2,3,.45) 45%, rgba(2,2,3,0) 100%),
    linear-gradient(180deg, rgba(2,2,3,.12) 0%, rgba(2,2,3,.02) 16%, rgba(2,2,3,.18) 50%, rgba(2,2,3,.88) 100%),
    linear-gradient(90deg, rgba(2,2,3,.5) 0%, rgba(2,2,3,.12) 55%, rgba(2,2,3,0) 100%);
}
[dir="rtl"] .scene__scrim {
  background:
    radial-gradient(ellipse 560px 240px at min(calc(100% - 158px), calc(50% + 462px)) 0, rgba(2,2,3,.62) 0%, rgba(2,2,3,.45) 45%, rgba(2,2,3,0) 100%),
    linear-gradient(180deg, rgba(2,2,3,.12) 0%, rgba(2,2,3,.02) 16%, rgba(2,2,3,.18) 50%, rgba(2,2,3,.88) 100%),
    linear-gradient(270deg, rgba(2,2,3,.5) 0%, rgba(2,2,3,.12) 55%, rgba(2,2,3,0) 100%);
}
/* Light mode: the hero keeps the dark photo treatment (a cream-washed photo was too bright, and a darker
   photo can't carry dark text accessibly), so its text tokens are pinned to the dark values. --bg stays
   cream so the fade at the bottom still hands off into the light page below. */
[data-theme="light"] .hero-sec {
  --text: #EAF0FF; --text2: #C9D3EC; --muted: #9AA7C7; --dim: #6B7799;
  --hi: #8FAEFF; --ink-strong: #E6EEFF;
  --line: #1E212B; --pill-line: rgba(255, 255, 255, .12);
  color: var(--text);
}
/* A short fixed-height fade (not 55% of the hero) so the dark-to-cream ramp happens below the text and cards */
[data-theme="light"] .scene__fade { height: 220px; }

.hero {
  position: relative; z-index: 1;
  padding-top: 140px; padding-bottom: 120px;
  display: grid; grid-template-columns: minmax(0, 760px);
  align-items: end;
}
/* The photo has patches of extreme local contrast (bright road, near-black rock), so the headline/label/body
   text carry their own shadow rather than counting on the scrim alone to stay readable wherever it lands. */
/* A tight, dark edge shadow plus a wider soft one: the tight one keeps letterforms defined even over the
   photo's blown-out highlights (the road), the wide one is the "glow" that reads against darker passages. */
.hero__copy { display: flex; flex-direction: column; gap: 24px; text-shadow: 0 1px 3px rgba(2,2,3,.55), 0 2px 22px rgba(2,2,3,.55); }
.hero__label { display: flex; align-items: center; gap: 12px; }
.tick { width: 6px; height: 14px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.hero__h1 .b { color: var(--hi); }
/* Keep "fast-forwarded." on one line; phones (below) are too narrow and may break at the hyphen */
html[lang="en"] .hero__h1 .b { white-space: nowrap; }
.caret {
  display: inline-block; width: .45em; height: .8em;
  margin-inline-start: .08em; background: var(--hi); vertical-align: baseline;
}
.hero__p { margin: 0; max-width: 480px; font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--text2); }

/* Hero booking CTA (standard .btn--primary; just don't stretch it across the column) */
.hero__cta { align-self: flex-start; }
/* Dark mode: the hero CTA takes the secondary style (blue outline + blue text) instead of solid black */
[data-theme="dark"] .hero__cta { background: transparent; border-color: var(--hi); color: var(--hi); }
[data-theme="dark"] .hero__cta:hover { color: var(--hi); background: color-mix(in srgb, var(--hi) 12%, transparent); filter: none; }


/* ---------- Cards ---------- */

.card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 20px;
  background: var(--card);
}
.card h3 { margin: 0; font-weight: 400; }


/* ---------- Work ticker ---------- */

.work .split { margin-bottom: 56px; }
/* Auto-drifts and can be dragged / flung in either direction (see main.js) */
.ticker {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;            /* vertical page scroll stays native; horizontal drags go to the ticker */
  -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.ticker.is-dragging { cursor: grabbing; }
.ticker:focus-visible { outline-offset: -2px; border-radius: 20px; }
.ticker__track {
  display: flex; width: max-content;
  margin: 0; padding: 0; list-style: none;
  direction: ltr; /* loop always runs the same way, including in Arabic */
  will-change: transform;
}
/* Trailing padding (not gap) keeps both halves equal, so the loop wraps seamlessly */
.shot { width: clamp(310px, 54vw, 800px); padding-right: 28px; display: flex; flex-direction: column; gap: 18px; }
.shot__frame {
  background-size: cover; background-position: center; /* poster painted behind the video as a fallback */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  background-color: var(--card);
}
.shot__video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.shot__meta { display: flex; flex-direction: column; gap: 8px; padding-inline: 4px; }
[dir="rtl"] .shot__meta { direction: rtl; }
.shot__title { font-size: 22px; font-weight: 400; }
.shot__sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.shot__company { font-size: 15px; color: var(--text2); }
.shot__industry { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.shot__industry::before { content: '/'; margin-inline-end: 14px; color: var(--line); }
[dir="rtl"] .shot__industry { letter-spacing: 0; }

/* ---------- Services ---------- */

.services { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); margin: 0; padding: 0; list-style: none; }
.service { display: flex; gap: 28px; padding: 28px 0; border-top: 1px solid var(--line); }
.service__n { font-size: 14px; color: var(--accent); width: 32px; flex-shrink: 0; padding-top: 8px; }
.service__text { display: flex; flex-direction: column; gap: 8px; }
.service h3 { margin: 0; font-size: 24px; font-weight: 400; }
.service p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--muted); }

/* ---------- How we work ---------- */

.how { position: relative; padding: 28px; border-radius: 16px; gap: 14px; }
.how__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.how--muted .how__dot { background: var(--dim); }
.how h3 { font-size: 19px; font-weight: 500; }
.how p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--muted); }

/* ---------- Pricing ---------- */

/* Plans stack vertically, one full-width card each; wide screens lay each card out as a row */
.plans { display: flex; flex-direction: column; gap: 20px; }
.plan { padding: 36px; gap: 26px; }
@media (min-width: 1025px) {
  .plan {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
    grid-template-areas: "head list cta" "price list cta";
    column-gap: 56px; row-gap: 24px;
    padding: 40px 44px;
  }
  .plan > .plan__head, .plan__top { grid-area: head; }
  .plan__price { grid-area: price; align-self: end; }
  .plan__list { grid-area: list; align-self: center; }
  .plan .plan__cta { grid-area: cta; align-self: center; margin-top: 0; }
}
.plan__head { display: flex; flex-direction: column; gap: 8px; }
.plan h3 { font-size: 22px; font-weight: 500; }
.plan__sub { margin: 0; font-size: 15px; font-weight: 300; color: var(--muted); }
.plan__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan__unit { font-size: 15px; color: var(--muted); }
.plan__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--text2); }
.plan__list li { display: flex; gap: 12px; align-items: baseline; }
.plan__list li::before {
  content: ''; width: 6px; height: 6px; border-radius: 1.5px;
  background: var(--hi); flex-shrink: 0; transform: translateY(-2px);
}
.plan__cta { margin-top: auto; }

.plan--featured { position: relative; border: 0; background: var(--accent); color: var(--on-accent); }
.plan--featured .plan__sub,
.plan--featured .plan__unit { color: var(--on-accent-soft); font-weight: 400; }
.plan--featured .plan__list { color: var(--on-accent); font-weight: 400; }
.plan--featured .plan__list li::before { background: var(--on-accent); }
.plan__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan__top .plan__head { min-width: 0; }
.plan__tag { font-size: 12px; padding: 7px 12px; border-radius: 999px; background: var(--black); color: #FFFFFF; white-space: nowrap; }


/* ---------- Studio ---------- */

.studio__body { display: flex; flex-direction: column; gap: 24px; }
.studio__p2 { color: var(--muted); }

/* ---------- Contact ---------- */

/* Solid rules above and below, like the other sections */
.contact { position: relative; overflow: hidden; border-block: 1px solid var(--line-soft); }
/* Night-sky photo behind the contact block. Like the hero it stays dark in both themes (so the text is
   light in light mode too). */
.contact__bg { position: absolute; inset: 0; pointer-events: none; background: #0A1A3A; }
.contact__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(2,2,3,.55) 0%, rgba(2,2,3,.35) 100%),
    rgba(2,2,3,.3);
}
[data-theme="light"] .contact {
  --text: #EAF0FF; --text2: #C9D3EC; --muted: #9AA7C7; --dim: #6B7799; --hi: #8FAEFF; --ink-strong: #E6EEFF;
  color: var(--text);
}
.contact__inner {
  position: relative; padding-top: 160px; padding-bottom: 140px;
  display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center;
}
.contact__cursor { color: var(--hi); }
.contact__p { margin: 0; max-width: 520px; font-size: 19px; font-weight: 300; line-height: 1.6; color: var(--text2); }
.contact .btns { justify-content: center; }

/* ---------- Footer ---------- */

.foot {
  padding-block: 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-size: 13px; color: var(--dim);
}
.foot__brand { display: flex; align-items: center; gap: 10px; }
.foot__entity { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.foot__sep { color: var(--line); }

/* ---------- Light-theme art tweaks ---------- */


/* ---------- Viewport edge: dithered blur at the bottom only (the top one sat behind the nav and made the
   logo/links harder to read there, so it's gone — the nav now carries its own solid background instead). */
/* A soft blur plus a shimmering 2px checker in the page colour, faded by a mask.
   Stronger while the page is scrolling (html.is-scrolling, set in main.js). */

.edge {
  position: fixed; left: 0; right: 0; z-index: 45; /* under the nav (50) */
  height: 56px;
  pointer-events: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: .75;
  transition: opacity .45s ease, height .45s ease;
}
.edge--bottom {
  bottom: 0;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
}
.edge::after {
  content: '';
  position: absolute; inset: 0;
  background-image: conic-gradient(var(--bg) 0 25%, transparent 0 50%, var(--bg) 0 75%, transparent 0);
  background-size: 4px 4px;
  opacity: .6;
  animation: tsDither 1.4s steps(2) infinite;
}
html.is-scrolling .edge { opacity: 1; height: 84px; }
html.is-scrolling .edge::after { animation-duration: .5s; }
@keyframes tsDither { to { background-position: 4px 0; } }

/* ---------- Scroll reveal (classes added by main.js, so no-JS pages stay visible) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity .8s cubic-bezier(.2, .7, .2, 1),
    transform .8s cubic-bezier(.2, .7, .2, 1),
    filter .8s ease;
  transition-delay: var(--rd, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Theme switch ---------- */
/* Browsers with View Transitions crossfade the whole page (main.js); others ease colours via .theme-anim. */

::view-transition-old(root),
::view-transition-new(root) { animation-duration: .55s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition:
    background-color .5s ease, color .5s ease, border-color .5s ease,
    fill .5s ease, stroke .5s ease, box-shadow .5s ease, text-shadow .5s ease !important;
}

/* ---------- Motion ---------- */

@keyframes tsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes tsPulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .85; transform: scale(1.06); } }
@keyframes tsBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tsFF { 0%, 100% { opacity: .3; } 25% { opacity: 1; } 55% { opacity: .3; } }

.ts-float { animation: tsFloat 9s ease-in-out infinite; }
.ts-pulse { animation: tsPulse 7s ease-in-out infinite; }
.ts-blink { animation: tsBlink 1.1s steps(1) infinite; }


.mark i { animation: tsFF 1.6s linear infinite; }
.mark .f1 { animation-delay: .1s; } .mark .f2 { animation-delay: .2s; } .mark .f3 { animation-delay: .3s; }
.mark .f4 { animation-delay: .4s; } .mark .f5 { animation-delay: .5s; } .mark .f6 { animation-delay: .6s; }
.mark .f7 { animation-delay: .7s; }
.mark .e { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ts-float, .ts-pulse, .ts-blink, .mark i, .scene__media, .scene__wave { animation: none; }
  .mark i { opacity: 1; }
  /* Ticker: no auto-drift (main.js), dragging still works */
  .edge::after { animation: none; }
  .reveal { transform: none !important; filter: none !important; transition: opacity .4s ease !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h1 { font-size: 68px; }
  [dir="rtl"] .h1 { font-size: 72px; }
  .hc { font-size: 96px; }
  .navpill .nl { padding: 9px 12px; }
  .hero { padding-top: 160px; }
}

@media (max-width: 900px) {
  .navpill .nl, .navpill__sep { display: none; }
}

@media (max-width: 760px) {
  :root { --header-h: 77px; }
  .wrap { padding-inline: 20px; }
  .sec { padding-block: 72px; }
  .g12 { display: flex; flex-direction: column; gap: 32px; }
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .split { flex-direction: column; align-items: flex-start; gap: 20px; }
  .h1 { font-size: 44px; min-height: 3.2em; }
  [dir="rtl"] .h1 { font-size: 50px; min-height: 3.6em; }
  .h2 { font-size: 34px; }
  [dir="rtl"] .h2 { font-size: 42px; }
  .hc { font-size: 60px; }
  [dir="rtl"] .hc { font-size: 72px; }
  .price { font-size: 48px; }
  .price--text { font-size: 34px; }
  .hero { padding-top: 120px; padding-bottom: 72px; }
  /* Phones: the hero stacks tall, so keep the video to the first screen (less zoom) and fade it out below */
  .scene { bottom: auto; height: 100svh; }
  /* Cheaper on phones: the animated blur is the most expensive layer to keep repainting */
  .scene__wave { filter: blur(22px) saturate(1.2); }
  .scene__fade { height: 55%; }
  .scene__scrim, [dir="rtl"] .scene__scrim {
    background:
      radial-gradient(ellipse 240px 150px at 36px 0, rgba(2,2,3,.6) 0%, rgba(2,2,3,.4) 45%, rgba(2,2,3,0) 100%),
      linear-gradient(180deg, rgba(2,2,3,.14) 0%, rgba(2,2,3,.22) 30%, rgba(2,2,3,.45) 70%, rgba(2,2,3,.6) 100%);
  }
  /* Light mode: the hero text is light, so the dark photo has to reach all the way under the cards
     (they stack below the first screen on phones) before handing off to the cream page. */
  [data-theme="light"] .scene { bottom: 0; height: auto; }
  [data-theme="light"] .scene__fade { height: 160px; }
  .hero__p { font-size: 16px; }
  html[lang="en"] .hero__h1 .b { white-space: normal; }
  .navcta { height: 42px; padding: 0 16px; font-size: 14px; }
  /* Phones: a smaller logo (mark + wordmark), the language switcher and "Book a call"
     (nav links + theme toggle hidden) */
  #theme-toggle { display: none; }
  .brand { gap: 8px; font-size: 15px; }
  .brand .mark { grid-template-columns: repeat(8, 2px); grid-auto-rows: 2px; }
  .navpill { padding: 2px; }
  .navpill .icon-btn { height: 36px; min-width: 36px; }
  .navcta__full { display: none; }
  .navcta__short { display: inline; }
  .foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .card, .plan, .how { padding: 24px; }
}


@media (max-width: 430px) {
  /* Narrow phones: the language switcher shrinks to its globe icon (it keeps its aria-label) so the
     logo, switcher and "Book a call" fit inside the page margins */
  .nav { gap: 10px; }
  .navlinks { gap: 8px; }
  .navpill .icon-btn--text { padding: 0; width: 36px; }
  .navpill .icon-btn--text span { display: none; }
}

@media (max-width: 360px) {
  .nav, .navlinks { gap: 6px; }
  .brand { font-size: 14px; gap: 6px; }
  .navcta { padding: 0 12px; font-size: 13px; }
}