/* ==========================================================================
   Artsci landing page - desktop (1440px design frame, Figma node 1:8)
   Coordinates in comments are Figma page coordinates (y from top of frame).
   ========================================================================== */

:root {
  --bg: #0d0d0d;
  --muted: #8f8f8f;
  --ink: #0a090f;
  --glass: rgba(253, 252, 253, 0.12);
  --accent-from: #f857a6;
  --accent-to: #ff5858;
  --font-ar: 'Baloo Bhaijaan 2', 'Segoe UI', Tahoma, sans-serif;
  --font-latin: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --stage: 1440px;
}

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

html { scroll-behavior: smooth; background: var(--bg); }

body {
  background: var(--bg);
  color: #fff;
  font-family: var(--font-ar);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: none; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* Page wrapper: the design is a fixed 1440 frame. Wider viewports centre it,
   narrower ones scroll horizontally. Decorative layers that bleed past the
   frame are clipped here. */
.page {
  position: relative;
  min-width: var(--stage);
  overflow-x: clip;
}

/* Section scroll targets sit below the (absolute) nav */
section, footer { scroll-margin-top: 0; }

/* --------------------------------------------------------------------------
   Shared: button (white pill)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 20px 16px;
  background: #fff;
  color: var(--ink);
  border-radius: 100px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15); }
.btn:focus-visible { outline: 2px solid var(--accent-to); outline-offset: 3px; }

/* Shared: glass surface */
.package,
.work-item {
  background: var(--glass);
  -webkit-backdrop-filter: blur(7.6px);
  backdrop-filter: blur(7.6px);
}

/* Shared: stage = centred canvas (1440 on desktop, 744 on tablet via --stage) */
.packages__stage,
.work__stage,
.clients__stage {
  position: relative;
  width: var(--stage);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Header navigation (1:109)  top: 0
   -------------------------------------------------------------------------- */
.nav {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 20;
  display: flex;
  justify-content: center;
  width: 640px;
  padding: 40px 16px 0;
  transform: translateX(-50%);
}
.nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 16px;
}
.nav__link {
  font-size: 18px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.2s ease;
}
.nav__link:hover { color: #fff; }
.nav__link--accent,
.nav__link--accent:hover {
  background-image: linear-gradient(to right, var(--accent-from), var(--accent-to));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.nav__lang {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 18px;
}
.nav__lang img { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Hero (1:163)  y: 0 - 1151
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 1057px;
}
.hero__pattern {
  position: absolute;
  inset: 0;
  background: url('../assets/hero-pattern.png') top left / 99px 110px;
  opacity: 0.5;
  pointer-events: none;
}
/* The hero artwork is always laid out on a 1440 canvas and centred; on tablet the page
   clips it to the visible slice. */
.hero__stage {
  position: relative;
  left: 50%;
  width: 1440px;
  height: 1057px;
  margin-left: -720px;
}

/* Polaroid-style project card shared by hero rows */
.shot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 300px;
  height: 248px;
  padding: 5px;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.04);
  transform: rotate(var(--r));
  /* fly in from behind the headline: --fx/--fy = offset back to that point, --d = stagger delay */
  animation: shot-fly-in 950ms cubic-bezier(0.22, 1.15, 0.36, 1) var(--d, 0ms) both;
  will-change: transform, opacity;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* Cards start small and slightly spun at the centre, then spring out to their slots. */
@keyframes shot-fly-in {
  from {
    opacity: 0;
    transform: translate(var(--fx), var(--fy)) rotate(calc(var(--r) * -2)) scale(0.35);
  }
  35% { opacity: 1; }
  to {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--r)) scale(1);
  }
}

/* Glow and headline ease in just ahead of the cards */
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
.hero__blur  { animation: hero-fade 800ms ease-out both; }
.hero__logo,
.hero__title { animation: hero-fade 600ms ease-out 100ms both; }

/* back row (y 582, 540 tall) */
.hero__back {
  position: absolute;
  left: 0;
  top: 350px;
  width: 1440px;
  height: 540px;
  overflow: hidden;
}
.hero__back-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 540px;
  opacity: 0.2;
}
.hero__back-pattern {
  position: absolute;
  left: 46.63%;
  top: 36.68%;
  width: 6.74%;
  height: 26.65%;
}
.hero__back-cards {
  position: absolute;
  left: 213px;
  top: 83px;
  width: 1013px;
  height: 374px;
}

/* dark glow behind headline: 806 x 806, centred, bleeds 31.02% past each edge */
.hero__blur {
  position: absolute;
  left: 317px;
  top: 120px;
  width: 806px;
  height: 806px;
  pointer-events: none;
}
.hero__blur img {
  position: absolute;
  left: -31.02%;
  top: -31.02%;
  width: 162.04%;
  height: 162.04%;
}

/* front row (y 824) */
.hero__front {
  position: absolute;
  left: 378px;
  top: 592px;
  width: 683px;
  height: 292px;
}

.hero__logo {
  position: absolute;
  left: calc(50% + 0.5px);
  top: 276.8px;               /* vertical centre of the old logo box (255.19 + 43.22 / 2) */
  width: 120px;
  height: auto;
  transform: translate(-50%, -50%);
}

.hero__title {
  position: absolute;
  left: 320px;
  top: 333px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 800px;
  height: 220px;
  font-size: 90px;
  font-weight: 500;
  line-height: 110px;
  letter-spacing: -4px;
  text-align: center;
  white-space: nowrap;
}
.hero__title span { display: block; }

/* vertical hairline, y 1057 */
.scroll-indicator {
  position: absolute;
  left: 720px;
  top: 1057px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 94px;
}
.scroll-indicator__line {
  position: relative;
  flex: none;
  width: 94px;
  height: 0;
  transform: rotate(90deg);
}
.scroll-indicator__line img {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
}

/* --------------------------------------------------------------------------
   Packages (1:123)  y: 674 - 1879   (overlaps the hero by 383px)
   Positions below are relative to y = 674.
   -------------------------------------------------------------------------- */
.packages {
  position: relative;
  z-index: 1;
  height: 1205px;
  margin-top: -383px;
}
.packages__stage { height: 1205px; }

.packages__calligraphy {
  position: absolute;
  left: 208px;
  top: 462.8px;
  width: 1001.77px;
  height: 541.04px;
  pointer-events: none;
}
.packages__blur {
  position: absolute;
  left: 105px;
  top: 0;
  width: 1186px;
  height: 1186px;
  pointer-events: none;
}
.packages__blur img {
  position: absolute;
  left: -67.45%;
  top: -67.45%;
  width: 234.9%;
  height: 234.9%;
}

.packages__intro {
  position: absolute;
  left: 128px;
  top: 636px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1185px;
}
.packages__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 678px;
  height: 144px;
  font-size: 52px;
  font-weight: 700;
  line-height: 60px;
  text-align: center;
}
.packages__lead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 714px;
  height: 77px;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}
.packages__lead span { display: block; }

.packages__list {
  position: absolute;
  left: 281px;
  top: 955px;
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: 878px;
}
.package {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  min-width: 1px;
  max-width: 250px;
  padding: 16px;
  border-radius: 27px;
  text-align: right;
}
/* Package cards fly out from the centre of the row when the list scrolls into view.
   `.js` is set in <head>, so without JavaScript the cards are simply visible. */
.js .package { opacity: 0; will-change: transform, opacity; }
.js .packages__list.is-visible .package {
  animation: package-fly-in 900ms cubic-bezier(0.22, 1.15, 0.36, 1) var(--d, 0ms) both;
}
/* --px = distance back to the row centre (card step 223.5px), --pr = starting tilt, --d = delay */
.package:nth-child(1) { --px: 335.25px;  --pr: -8deg; --d: 120ms; }
.package:nth-child(2) { --px: 111.75px;  --pr: -3deg; --d: 0ms; }
.package:nth-child(3) { --px: -111.75px; --pr: 3deg;  --d: 0ms; }
.package:nth-child(4) { --px: -335.25px; --pr: 8deg;  --d: 120ms; }

@keyframes package-fly-in {
  from {
    opacity: 0;
    transform: translate(var(--px), var(--py, 0px)) rotate(var(--pr)) scale(0.4);
  }
  35% { opacity: 1; }
  to {
    opacity: 1;
    transform: none;
  }
}

.package__title {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  font-size: 19px;
  font-weight: 600;
  line-height: 23px;
}
.package__title--sm { font-size: 18px; }
.package__text {
  width: 100%;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
}

/* --------------------------------------------------------------------------
   Work carousel (1:89)  y: 2179 - 2990.5   Relative to y = 2179.
   -------------------------------------------------------------------------- */
.work {
  position: relative;
  margin-top: 300px;
  overflow: hidden;
}
/* title, carousel, then the button, stacked with 48px between them */
.work__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.work__title {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1185px;
}
.work__heading {
  font-size: 52px;
  font-weight: 700;
  line-height: 89px;
  text-align: center;
  white-space: nowrap;
}
.work__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  white-space: nowrap;
}

.carousel {
  position: relative;
  flex: none;
  width: max(100vw, var(--stage));
  max-width: none;
  height: 582.5px;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel.is-dragging { cursor: grabbing; }
.carousel:focus-visible { outline: 2px solid var(--accent-to); outline-offset: -4px; }

.carousel__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
}
.work-item {
  flex: none;
  width: calc(var(--w) + 48px);
  padding: 34px 24px;
  overflow: hidden;
  border-radius: 32px;
}
/* slides are now links */
a.work-item {
  display: block;
  color: inherit;
  -webkit-user-drag: none;
  user-select: none;
  transition: background-color 0.25s ease;
}
a.work-item:hover { background: rgba(253, 252, 253, 0.2); }
a.work-item:focus-visible { outline: 2px solid var(--accent-to); outline-offset: -2px; }

/* The box size (--w x --h) is set in CSS pixels. Export the PNGs at 2x and they are shown at half
   their pixel size, i.e. sharp on retina screens. Keep the same aspect ratio as the box. */
.work-item__img {
  position: relative;
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  user-select: none;
}
.work-item__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* first slide: the design crops the top ~19% of the picture. `cover` + bottom does the same for the
   original image and also works if the file is exported already cropped to the 790 x 511 frame. */
.work-item--crop .work-item__img img { object-position: center bottom; }

/* soft red glow over the carousel edges; sits above, never intercepts input */
.work__edge-blur {
  position: absolute;
  left: -982px;
  top: -408px;
  width: 3403px;
  height: 1623px;
  pointer-events: none;
}
.work__edge-blur img {
  position: absolute;
  left: -8.82%;
  top: -18.48%;
  width: 117.64%;
  height: 136.96%;
}

/* --------------------------------------------------------------------------
   Clients (1:54)  y: 3115 - 3838   Relative to y = 3115.
   -------------------------------------------------------------------------- */
.clients {
  position: relative;
  height: 723px;
  margin-top: 76.5px;
}
.clients__stage { height: 723px; }

.clients__calligraphy {
  position: absolute;
  left: 390px;
  top: 73px;
  width: 660.5px;
  height: 591px;
  pointer-events: none;
}
.clients__blur {
  position: absolute;
  left: 358px;
  top: 0;
  width: 723px;
  height: 723px;
  pointer-events: none;
}
.clients__blur img {
  position: absolute;
  left: -55.33%;
  top: -55.33%;
  width: 210.66%;
  height: 210.66%;
}

.clients__title {
  position: absolute;
  left: 92px;
  top: 186px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1256px;
  height: 60px;
  font-size: 52px;
  font-weight: 700;
  line-height: 60px;
  text-align: center;
}

.logo-grid {
  position: absolute;
  left: 92px;
  top: 321px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 80px;
  width: 1256px;
}
.logo { position: relative; flex: none; height: 42px; }
.logo--box   { width: 132px; }
.logo--sm    { width: 46px; height: 37px; }
.logo--wide  { width: 125px; }
.logo--tiny  { width: 64px; height: 24px; mix-blend-mode: plus-lighter; }
.logo--masked { width: 235.636px; height: 48px; }

.logo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.logo__img--contain { object-fit: contain; }
.logo__img--cover   { object-fit: cover; }
.logo__img--bottom  { object-fit: contain; object-position: center; }  /* client-07: show the whole logo, not a bottom crop */
.logo__img--90 { opacity: 0.9; }
.logo__img--70 { opacity: 0.7; }
.logo__img--50 { opacity: 0.5; }

/* 4th client: Blue Mongoose. Keeps the old wordmark's footprint (235.6 x 48 slot, 182 x 28 logo area) */
.logo__bm {
  display: block;
  width: 182px;
  height: 28px;
  margin: 12px 0 0 26.82px;
  object-fit: contain;
  pointer-events: none;
}

.clients__cta {
  position: absolute;
  left: 667.5px;
  top: 566px;
}

/* --------------------------------------------------------------------------
   Contact (1:10)  y: 3979 - 4287
   -------------------------------------------------------------------------- */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  height: 308px;
  margin-top: 141px;
  padding-top: 48px;
}
.contact__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.link-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 800px;
  height: 40px;
  padding: 8px 16px;
}
.link-row__body {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 16px;
  min-width: 1px;
  height: 24px;
}
.link-row__value {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-family: var(--font-latin);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: var(--muted);
  transition: color 0.2s ease;
}
a.link-row__value:hover { color: #fff; }
.link-row__value--address { width: 284px; }
.link-row__value--address span {
  width: 284px;
  font-family: var(--font-ar);   /* the Figma address is Baloo Bhaijaan 2 Regular, not Inter */
  font-weight: 400;
  line-height: 18px;
  text-align: left;
}
.link-row__arrow { flex: none; width: 20px; height: 20px; transform: scaleX(-1); }
.link-row__label {
  flex: 1 0 0;
  min-width: 1px;
  font-family: var(--font-latin);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  text-align: right;
  white-space: nowrap;
  color: var(--muted);
}
.link-row__label--ar { font-family: var(--font-ar); }
.link-row__icon { flex: none; width: 20px; height: 20px; }
.link-row__icon--mail { position: relative; overflow: hidden; }
.link-row__icon--mail img {
  position: absolute;
  left: 8.33%;
  top: 16.67%;
  width: 83.34%;
  height: 66.66%;
}

.contact__copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  font-size: 16px;
  line-height: 22.4px;
  text-align: right;
  color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   Mobile menu button + overlay (hidden above 600px)
   -------------------------------------------------------------------------- */
.nav__menu {
  display: none;
  flex: none;
  margin: -8px;
  padding: 8px;
  background: none;
  border: 0;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__menu:focus-visible,
.menu-overlay__close:focus-visible,
.menu-overlay__link:focus-visible,
.menu-overlay__lang:focus-visible { outline: 2px solid var(--accent-to); outline-offset: 4px; border-radius: 6px; }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 96px 24px 48px;
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(248, 87, 166, 0.14), rgba(248, 87, 166, 0) 70%),
    rgba(13, 13, 13, 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}
html.menu-open,
html.menu-open body { overflow: hidden; }

.menu-overlay__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.menu-overlay__link {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: color 0.2s ease, opacity 0.35s ease, transform 0.35s ease;
}
.menu-overlay__link:hover,
.menu-overlay__link:active { color: #fff; }
.menu-overlay__link--accent,
.menu-overlay__link--accent:hover {
  background-image: linear-gradient(to right, var(--accent-from), var(--accent-to));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.menu-open .menu-overlay__link { opacity: 1; transform: none; }
.menu-open .menu-overlay__link:nth-child(1) { transition-delay: 0.04s; }
.menu-open .menu-overlay__link:nth-child(2) { transition-delay: 0.09s; }
.menu-open .menu-overlay__link:nth-child(3) { transition-delay: 0.14s; }
.menu-open .menu-overlay__link:nth-child(4) { transition-delay: 0.19s; }

.menu-overlay__lang {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--muted);
}
.menu-overlay__lang img { width: 16px; height: 16px; }

/* close button sits exactly where the menu icon is, drawn as an X */
.menu-overlay__close {
  position: absolute;
  top: 27px;
  right: 8px;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-overlay__close span {
  position: absolute;
  left: 13px;
  top: 21px;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.menu-overlay__close span:first-child { transform: rotate(45deg); }
.menu-overlay__close span:last-child { transform: rotate(-45deg); }

/* ==========================================================================
   Tablet  (Figma frame "artsci-tablet", node 2109:10390, 744px wide)
   Applies up to 1024px. The page stage becomes 744px and is centred; the hero
   artwork stays on its 1440 canvas and is clipped to the visible slice.
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --stage: 744px; }

  /* hero: only the scroll hairline moves */
  .scroll-indicator { top: 1015px; }

  /* ---- packages: 2 x 2 grid ---- */
  .packages__calligraphy { left: -59px; top: 406px; width: 839.5px; height: 470.3px; }
  .packages__blur { left: -99px; top: 376px; width: 920px; height: 920px; }
  .packages__blur img { left: -86.96%; top: -86.96%; width: 273.92%; height: 273.92%; }
  .packages__intro { left: -220px; }            /* 1185px block centred on the 744 stage */
  .packages__list {
    left: 32px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 680px;
  }
  .package { max-width: none; }
  .package__title { min-height: 0; }
  .package:nth-child(2) .package__title { width: 162px; }   /* wraps onto two lines as designed */
  /* fly-in: each card starts at the centre of the grid */
  .package:nth-child(1) { --px: 174px;  --py: 94px;  --pr: -6deg; --d: 0ms; }
  .package:nth-child(2) { --px: -174px; --py: 94px;  --pr: 6deg;  --d: 80ms; }
  .package:nth-child(3) { --px: 174px;  --py: -94px; --pr: -6deg; --d: 160ms; }
  .package:nth-child(4) { --px: -174px; --py: -94px; --pr: 6deg;  --d: 240ms; }

  /* ---- work carousel: the desktop slides scaled by 0.80515 ---- */
  .carousel { height: 469px; }
  .carousel__track { gap: 35.427px; }
  .work-item {
    width: calc(var(--w) * 0.80515 + 38.648px);
    padding: 27.375px 19.324px;
    border-radius: 25.765px;
    -webkit-backdrop-filter: blur(6.119px);
    backdrop-filter: blur(6.119px);
  }
  .work-item__img {
    width: calc(var(--w) * 0.80515);
    height: calc(var(--h) * 0.80515);
  }
  .work__edge-blur { left: -521px; top: -408px; width: 2040px; height: 1623px; }
  .work__edge-blur img { left: -14.71%; top: -18.48%; width: 129.42%; height: 136.96%; }

  /* ---- clients: 631px column, no button ---- */
  .clients { height: 578px; margin-top: 142px; }
  .clients__stage { height: 578px; }
  .clients__calligraphy { left: 97.1px; top: -40px; width: 548.741px; height: 490.998px; }
  .clients__blur { left: 50px; top: -60px; }
  .clients__title { left: 56px; top: 0; width: 631px; height: 89px; line-height: 89px; }
  .logo-grid { left: 56px; top: 164px; width: 631px; }
  .clients__cta { display: none; }

  /* ---- contact ---- */
  .contact { margin-top: 84px; padding-right: 24px; padding-left: 24px; }
}

/* ==========================================================================
   Mobile  (Figma frame "AR-artsci-mobile", node 9:1543, 390px wide)
   Applies up to 600px. Stages become fluid (100% of the viewport) and the
   sections stack in normal flow where their height depends on the text.
   The hero artwork is the desktop canvas scaled by 0.7519, as in the design.
   ========================================================================== */
@media (max-width: 600px) {
  :root { --stage: 100%; }
  .page { min-width: 0; }

  /* ---- nav: contact + language on the left, menu icon on the right ---- */
  .nav {
    width: 100%;
    max-width: 640px;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
  }
  .nav__list { flex: 1 0 0; justify-content: flex-start; gap: 16px; min-width: 1px; }
  .nav__link { font-size: 16px; }
  .nav__link:not(.nav__link--accent):not(.nav__lang) { display: none; }
  .nav__lang { line-height: 18px; }
  .nav__menu { display: block; }
  .menu-overlay { display: flex; }

  /* ---- hero ---- */
  .hero { height: 624px; }
  .hero__stage { height: 624px; }
  .scroll-indicator { display: none; }
  .hero__back { left: 177px; top: 287.93px; width: 1082.68px; height: 406.005px; }
  .hero__back-canvas { transform: scale(0.7519); transform-origin: 0 0; }
  .hero__back-cards { left: 160.14px; top: 62.4px; transform: scale(0.7519); transform-origin: 0 0; }
  .hero__blur { left: 417px; top: 115px; width: 606px; height: 606px; }  /* near-black glow, desktop asset scaled */
  .hero__blur img { left: -31.02%; top: -31.02%; width: 162.04%; height: 162.04%; }
  .hero__front { left: 461.2px; top: 469.88px; transform: scale(0.7519); transform-origin: 0 0; }
  .hero__logo { left: 719.75px; top: 218.98px; }
  .hero__title {
    left: 516px;
    top: 355px;
    width: 409px;
    height: auto;
    font-size: 56px;
    line-height: normal;
    transform: translateY(-50%);
  }

  /* ---- packages: full width, 24px side padding, stacked in normal flow ---- */
  .packages { height: auto; margin-top: 0; }
  .packages__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    height: auto;
    padding: 237px 24px 0;
  }
  .packages__blur { left: calc(50% - 318.5px); top: 97px; width: 637px; height: 637px; }
  .packages__blur img { left: -125.59%; top: -125.59%; width: 351.18%; height: 351.18%; }
  .packages__calligraphy { left: calc(50% - 229.35px); top: 159.4px; width: 458.7px; height: 216.8px; }
  .packages__intro {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: none;
    gap: 8px;
    transform: none;
  }
  .packages__title { width: 100%; height: auto; font-size: 32px; line-height: 1.3; }
  .packages__lead { display: block; width: 100%; height: auto; font-size: 16px; line-height: 28px; }
  .packages__lead span { display: inline; }
  .packages__list {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);   /* one card per row so the text gets the full width */
    grid-auto-rows: auto;
    transform: none;
  }
  .package__title,
  .package:nth-child(2) .package__title { width: 100%; }
  .package:nth-child(1) { --px: 0px; --py: 56px; --pr: -3deg; --d: 0ms; }
  .package:nth-child(2) { --px: 0px; --py: 56px; --pr: 3deg;  --d: 80ms; }
  .package:nth-child(3) { --px: 0px; --py: 56px; --pr: -3deg; --d: 160ms; }
  .package:nth-child(4) { --px: 0px; --py: 56px; --pr: 3deg;  --d: 240ms; }

  /* ---- work carousel: desktop slides scaled by 0.43263 ---- */
  .work { height: auto; margin-top: 140px; }
  .work__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    height: auto;
  }
  .work__title { position: static; left: auto; width: 100%; max-width: 396px; gap: 8px; }
  .work__heading { font-size: 32px; line-height: 1.3; }
  .work__lead { height: auto; max-width: 352px; font-size: 16px; line-height: normal; white-space: normal; }
  .carousel {
    position: relative;
    left: auto;
    top: auto;
    flex: none;
    width: 100vw;
    max-width: none;
    height: 252px;
    transform: none;
  }
  .carousel__track { gap: 19.035px; }
  .work-item {
    width: calc(var(--w) * 0.43263 + 20.766px);
    padding: 14.709px 10.383px;
    border-radius: 13.844px;
    -webkit-backdrop-filter: blur(3.288px);
    backdrop-filter: blur(3.288px);
  }
  .work-item__img { width: calc(var(--w) * 0.43263); height: calc(var(--h) * 0.43263); }
  .work__edge-blur { left: calc(50% - 368px); top: 50px; width: 734.048px; height: 584px; }
  .work__edge-blur img { left: -27.25%; top: -34.25%; width: 154.5%; height: 168.5%; }

  /* ---- clients: single column that wraps 2 / 1 / 1 / 2 / 2 / 2 ---- */
  .clients { height: auto; margin-top: 80px; }
  .clients__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    height: auto;
  }
  .clients__calligraphy { left: calc(50% - 240px); top: 0; width: 479.055px; height: 378.998px; }
  .clients__blur { left: calc(50% - 232px); top: 69px; width: 464px; height: 464px; }
  .clients__blur img { left: -86.21%; top: -86.21%; width: 272.42%; height: 272.42%; }
  .clients__title {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    font-size: 32px;
    line-height: 1.3;
  }
  .logo-grid {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 0 16px;
    gap: 40px;
  }

  /* ---- contact ---- */
  .contact { height: auto; gap: 32px; margin-top: 80px; padding-right: 0; padding-left: 0; }
  .link-row__value,
  .link-row__label,
  .contact__copyright { font-size: 14px; }
  .link-row--address { height: auto; align-items: flex-start; }
  .link-row--address .link-row__body { height: auto; align-items: flex-start; gap: 12px; }
  .link-row--address .link-row__label { flex: none; }
  .link-row__value--address { width: 236px; align-items: flex-start; }
  .link-row__value--address span { width: 236px; font-size: 14px; line-height: 18px; }
}

/* ==========================================================================
   English (en.html, Figma "EN-artsci-desktop", node 9:198)
   Same components as the Arabic page; these rules only cover what differs.
   The tablet and mobile English frames do not exist yet, so those sizes reuse
   the Arabic frames with the English offsets applied (marked "estimate").
   ========================================================================== */

/* "Have a question?" sits BELOW the package cards in the English design */
.packages__cta {
  position: absolute;
  left: 0;
  right: 0;
  top: 1169px;
  width: max-content;
  margin: 0 auto;
}

/* --- all sizes --- */
html[lang="en"] .nav__lang { padding-right: 20px; border-right: 1px solid var(--muted); }
html[lang="en"] .package { align-items: flex-start; text-align: left; }
html[lang="en"] .package__title { min-height: 0; }

/* contact rows are mirrored: icon, label, value, arrow */
html[lang="en"] .link-row__arrow { transform: none; }
html[lang="en"] .link-row__label { text-align: left; }
html[lang="en"] .link-row__value { text-align: right; }
html[lang="en"] .link-row__value--address { flex: 0 1 auto; width: auto; min-width: 0; }
html[lang="en"] .link-row__value--address span { width: auto; }

/* --- tablet + desktop (601px and up) --- */
@media (min-width: 601px) {
  /* hero content sits 30px higher than the Arabic hero */
  html[lang="en"] .hero__back { top: 320px; }
  html[lang="en"] .hero__blur { top: 90px; }
  html[lang="en"] .hero__front { top: 562px; }
  html[lang="en"] .hero__logo { top: 284.2px; }
  html[lang="en"] .hero__title { top: 339px; font-size: 80px; line-height: 89px; }

  /* work intro: two-line paragraph plus one blank line, carousel starts lower */
  html[lang="en"] .work__lead {
    display: block;
    width: 503px;
    max-width: 100%;
    height: auto;
    line-height: 28px;
    white-space: normal;
  }
}

/* --- desktop (1025px and up) --- */
@media (min-width: 1025px) {
  html[lang="en"] .scroll-indicator { top: 1014px; }
  html[lang="en"] .packages__list { top: 887px; }
  html[lang="en"] .package:nth-child(2) .package__title { width: 162px; }
  html[lang="en"] .package:nth-child(3) .package__title { width: 163px; }
  html[lang="en"] .package:nth-child(4) .package__title { width: 159px; }
  html[lang="en"] .clients { margin-top: 62.5px; }
  html[lang="en"] .work__edge-blur { left: -1244px; top: -408px; width: 3928px; height: 1623px; }
  html[lang="en"] .work__edge-blur img { left: -7.64%; top: -18.48%; width: 115.28%; height: 136.96%; }
}

/* --- tablet (601px to 1024px)  [estimates from the Arabic tablet frame] --- */
@media (min-width: 601px) and (max-width: 1024px) {
  html[lang="en"] .packages__list { top: 887px; }
  html[lang="en"] .packages__cta { top: 1279px; }
  html[lang="en"] .clients { margin-top: 128px; }
}

/* --- mobile (up to 600px)  [estimates from the Arabic mobile frame] --- */
@media (max-width: 600px) {
  html[lang="en"] .hero__back { top: 265.3px; }
  html[lang="en"] .hero__blur { top: 92.4px; }
  html[lang="en"] .hero__front { top: 447.3px; }
  html[lang="en"] .hero__logo { top: 224.6px; }
  html[lang="en"] .hero__title { top: 359.5px; font-size: 50px; }
  html[lang="en"] .packages__cta {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 8px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shot, .hero__blur, .hero__logo, .hero__title { animation: none; }
  .js .package,
  .js .packages__list.is-visible .package { opacity: 1; animation: none; }
  .menu-overlay, .menu-overlay__link { transition: none; }
  .btn, .nav__link, .link-row__value { transition: none; }
}