/* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
    input, textarea, select { -webkit-user-select: text; user-select: text; }

    /* ── Custom Cursor ── */
    @media (pointer: fine) {
      * { cursor: none !important; }
    }
    #amuga-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; }
    #amuga-cursor-dot {
      position: absolute;
      width: 6px; height: 6px;
      background: #6D2338;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
    }
    #amuga-cursor-ring {
      position: absolute;
      width: 36px; height: 36px;
      border: 1px solid rgba(109,35,56,0.4);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.35s cubic-bezier(0.4,0,0.2,1),
                  height 0.35s cubic-bezier(0.4,0,0.2,1),
                  opacity 0.35s ease,
                  border-color 0.35s ease;
      backdrop-filter: blur(2px);
    }
    body.cursor-hover #amuga-cursor-dot { width: 8px; height: 8px; }
    body.cursor-hover #amuga-cursor-ring {
      width: 56px; height: 56px;
      border-color: rgba(109,35,56,0.6);
    }
    body.cursor-hidden #amuga-cursor { opacity: 0; }
    @media (hover: none), (pointer: coarse) { #amuga-cursor { display: none !important; } }

    :root {
      --cream:   #FAF9F7;
      --ink:     #1A1A1A;
      --burg:    #6D2338;
      --burg2:   #8a2540;
      --muted:   #7B7B7B;
      --warm:    #FAF9F7;
      --gap:     clamp(2.5rem, 5.5vw, 5rem);
      --font:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
      --font-hd: 'Big Shoulders Display', sans-serif;
      --font-sr: 'Cormorant Garamond', serif;
      --font-ar: 'IBM Plex Sans Arabic', sans-serif;
      --sidebar: 3.5rem;
      --pad-x:   clamp(2rem, 8vw, 9rem);
    }

    /* Big Shoulders Display всегда 900 */
    [style*="font-hd"], h1, h2, h3,
    .work-card-title, .hero-title, .section-title,
    .contact-headline, .showreel-title, .next-title,
    .about-headline, .featured-label, .process-title {
      font-family: 'Big Shoulders Display', sans-serif !important;
      font-weight: 900 !important;
    }

    html { scroll-behavior: smooth; overflow-x: hidden; }

    body {
      background: var(--cream);
      color: var(--ink);
      font-family: var(--font);
      font-weight: 300;
      font-size: clamp(15px, 1.5vw, 17px);
      line-height: 1.8;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      padding-left: var(--sidebar);
    }

    html[lang="ar"] body { font-family: var(--font-ar); }
    html[dir="rtl"] body { padding-left: 0; padding-right: var(--sidebar); }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 9998;
      opacity: 0.4;
    }

    /* ── Sidebar logo ── */
    .sidebar-logo {
      position: fixed;
      left: 0; top: 0;
      width: var(--sidebar);
      height: 100vh;
      z-index: 99;
      pointer-events: none;
      overflow: visible;
      opacity: 0;
      transition: opacity 0.8s ease;
    }
    .sidebar-logo.visible { opacity: 1; }

    html[dir="rtl"] .sidebar-logo { left: auto; right: 0; }

    .sidebar-logo-inner {
      position: absolute;
      top: 50%; left: 50%;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.8rem;
      transform: translate(-50%, -50%) rotate(-90deg);
      white-space: nowrap;
    }

    .sidebar-logo-name {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 0.72rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink);
      transition: color 0.6s ease;
    }
    .sidebar-logo.on-dark .sidebar-logo-name {
      color: rgba(247,245,241,0.85);
    }
    .sidebar-logo-sub { display: none; }
    .sidebar-line { display: none; }

    @media (max-width: 480px) {
      :root { --sidebar: 0rem; }
      .sidebar-logo { display: none; }
      body { padding-left: 0 !important; padding-right: 0 !important; }
    }

    /* ── Nav ── */
    nav#main-nav {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: min(calc(100vw - 48px), 1100px);
      padding: 0 10px 0 20px;
      height: 64px;
      overflow: visible;
      border-radius: 100px;
      background: rgba(250,249,247,0.82);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(255,255,255,0.75);
      box-shadow: 0 8px 40px rgba(0,0,0,0.09), inset 0 1px 0 rgba(255,255,255,0.9);
      transition: top 0.4s cubic-bezier(0.4,0,0.2,1),
                  height 0.4s cubic-bezier(0.4,0,0.2,1),
                  background 0.4s ease,
                  box-shadow 0.4s ease,
                  transform 0.45s cubic-bezier(0.4,0,0.2,1);
    }
    nav#main-nav.scrolled {
      top: 12px;
      height: 58px;
      background: rgba(250,249,247,0.96);
      box-shadow: 0 12px 48px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.95);
    }
    nav#main-nav.nav-hidden {
      transform: translateX(-50%) translateY(-120%);
    }

    .nav-wordmark {
      display: flex;
      align-items: center;
      text-decoration: none;
      transition: opacity 0.3s;
      opacity: 1;
      flex-shrink: 0;
    }
    .nav-wordmark:hover { opacity: 0.72; }
    .nav-wordmark img {
      height: 48px;
      width: auto;
      display: block;
      filter: none;
      margin-top: 0;
      transition: height 0.4s ease, filter 0.4s ease;
    }
    nav#main-nav.scrolled .nav-wordmark img { height: 40px; }
    nav#main-nav.nav-on-dark .nav-wordmark img { filter: brightness(0) invert(1); }

    .nav-links {
      display: flex;
      gap: 2.4rem;
      align-items: center;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .nav-link {
      font-family: var(--font);
      font-size: 0.8rem;
      font-weight: 400;
      letter-spacing: 0.06em;
      color: rgba(26,26,26,0.6);
      text-decoration: none;
      text-transform: uppercase;
      transition: color 0.22s;
    }
    .nav-link:hover { color: var(--ink); }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-left: auto;
    }

    /* ── Language pill switcher ── */
    /* Language switcher hidden — EN only */
    .lang-switcher, .mob-lang-row, .ck-lang-switcher { display: none !important; }
    .lang-switcher {
      position: relative;
      display: flex;
      align-items: center;
      background: rgba(255,255,255,0.55);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255,255,255,0.8);
      border-radius: 100px;
      padding: 5px 6px;
      gap: 0;
      box-shadow: 0 4px 24px rgba(0,0,0,0.08), inset 0 1px 1px rgba(255,255,255,0.9);
    }
    .lang-dropdown { display: contents; }
    .lang-sep {
      width: 1px;
      height: 16px;
      background: rgba(0,0,0,0.12);
      flex-shrink: 0;
    }
    .lang-btn {
      position: relative;
      background: none;
      border: none;
      border-radius: 100px;
      cursor: pointer;
      font-family: var(--font);
      font-size: 0.7rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      color: rgba(26,26,26,0.55);
      padding: 0.32rem 1rem;
      min-width: 3rem;
      text-align: center;
      transition: color 0.3s ease;
      text-transform: uppercase;
      white-space: nowrap;
      z-index: 1;
    }
    .lang-btn.active {
      color: #fff;
      font-weight: 500;
    }
    .lang-btn:hover:not(.active) { color: rgba(26,26,26,0.85); }
    .lang-pill-indicator {
      position: absolute;
      top: 5px;
      left: 6px;
      height: calc(100% - 10px);
      border-radius: 100px;
      background: radial-gradient(ellipse at 50% 30%, #a33050 0%, #6D2338 60%, #4a1526 100%);
      box-shadow: 0 2px 12px rgba(109,35,56,0.5), inset 0 1px 1px rgba(255,255,255,0.2);
      transition: left 0.35s cubic-bezier(0.4,0,0.2,1), width 0.35s cubic-bezier(0.4,0,0.2,1);
      pointer-events: none;
    }


    /* nav-git hidden in capsule design */
    .nav-git { display: none; }

    @media (max-width: 900px) {
      .nav-links { display: none; }
      nav#main-nav { padding-left: 16px; padding-right: 10px; width: calc(100vw - 32px); }
    }


    /* ── Hero ── */
    /* ── Hero — dark showreel placeholder ── */
    #hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
      overflow: hidden;
      padding: 0;
      margin-left: calc(-1 * var(--sidebar));
      width: 100vw;
      background: #070608;
    }

    /* Subtle radial burgundy glow in center */
    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 70% 55% at 50% 48%, rgba(109,35,56,0.10) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    /* Center play button + label */
    .hero-center {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.8rem;
      opacity: 0;
      transition: opacity 1.4s ease 0.4s;
    }
    #hero.loaded .hero-center { opacity: 1; }

    .hero-play-btn {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.14);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: rgba(255,255,255,0.75);
      transition: background 0.35s ease, border-color 0.35s ease, transform 0.42s cubic-bezier(0.22,0.61,0.36,1);
      outline: none;
    }
    .hero-play-btn:hover {
      background: rgba(255,255,255,0.09);
      border-color: rgba(255,255,255,0.28);
      transform: scale(1.1);
    }
    .hero-play-btn svg {
      width: 20px;
      height: 20px;
      margin-left: 3px;
    }

    .hero-reel-label {
      font-family: var(--font);
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.22);
    }

    /* Keep but hide old hero elements */
    .hero-content, .hero-disciplines, .hero-logo,
    .hero-sub, .hero-typing-line { display: none !important; }

    .hero-bottom {
      position: absolute;
      bottom: 2.4rem;
      left: 0; right: 0;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 0 var(--pad-x);
      opacity: 0;
      transition: opacity 1s ease 1.4s;
    }
    #hero.loaded .hero-bottom { opacity: 1; }

    .hero-location-label {
      font-family: var(--font);
      font-size: clamp(0.62rem, 0.9vw, 0.78rem);
      font-weight: 400;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.25);
    }

    .scroll-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      cursor: pointer;
    }

    .scroll-indicator span { display: none; }

    .scroll-dot {
      width: 1px; height: 3rem;
      background: rgba(255,255,255,0.12);
      position: relative; overflow: hidden;
    }

    .scroll-dot::after {
      content: '';
      position: absolute;
      top: -100%; left: 0;
      width: 100%; height: 100%;
      background: rgba(255,255,255,0.55);
      animation: scrollFloat 3.5s cubic-bezier(0.4,0,0.2,1) infinite;
    }

    @keyframes scrollFloat {
      0%   { top: -100%; }
      60%  { top: 0%; }
      100% { top: 100%; }
    }

    @media (max-width: 600px) {
      #hero { background-image: none; }
      .hero-bottom { padding: 0 1.5rem; }
    }

    /* ── Showreel ── */
    #showreel {
      margin-left: calc(-1 * var(--sidebar));
      width: 100vw;
      position: relative;
      background: var(--ink);
      overflow: hidden;
      /* aspect ratio 16:9 default, but can go taller */
      aspect-ratio: 16/8;
    }

    #showreel video {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }

    .showreel-placeholder {
      width: 100%; height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.2rem;
      background: #111;
    }

    .showreel-placeholder-label {
      font-size: 0.55rem;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.2);
    }

    .showreel-placeholder-title {
      font-family: var(--font-sr);
      font-size: clamp(1.4rem, 4vw, 3rem);
      font-weight: 300;
      color: rgba(255,255,255,0.08);
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    @media (max-width: 600px) {
      #showreel { aspect-ratio: 9/14; }
    }

    /* ── Section base ── */
    section { padding: var(--gap) var(--pad-x); }

    .section-label {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      color: var(--muted);
      margin-bottom: 1.4rem;
      display: block;
    }

    /* ── Unified heading system ── */
    h2, .section-title,
    .about-headline, .contact-headline, .expertise-heading {
      font-family: var(--font);
      font-size: clamp(2.8rem, 5.5vw, 6rem);
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 0.96;
      color: var(--ink);
      margin-bottom: 1rem;
    }

    /* ── Selected Work ── */
    #work h2 {
      font-size: clamp(3.8rem, 8vw, 9rem);
      line-height: 0.92;
    }

    #about h2 {
      font-size: clamp(3.6rem, 7.5vw, 8.5rem);
      line-height: 0.9;
    }

    #work {
      padding: 0 0 clamp(5rem, 10vw, 10rem);
      margin-top: clamp(-4rem, -6vw, -6rem);
    }

    .work-header {
      display: block;
      margin-bottom: 3rem;
      padding: 0 var(--pad-x);
    }
    .work-header > div {
      display: inline-grid;
      grid-template-columns: min-content;
    }
    #work h2 { white-space: nowrap; }

    .work-header-right {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: clamp(0.75rem, 1vw, 0.9rem);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .work-intro {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-weight: 300;
      font-size: clamp(1rem, 1.3vw, 1.15rem);
      line-height: 1.75;
      color: var(--muted);
      max-width: 100%;
      letter-spacing: 0;
      margin-top: 0.75rem;
    }

    /* Work grid — editorial layout */
    /* ══ WORK GRID — Premium Portfolio ══ */
    .work-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 2.5rem;
      padding: 0 2rem;
    }
    .work-grid-row4 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 10px;
      padding: 0 2rem;
    }
    .work-grid-row4 .work-card:first-child { grid-column: 1; }
    .work-grid-row4 .work-card:last-child  { grid-column: 2; }

    .work-card {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      background: #0c0c0c;
      border-radius: 16px;
      aspect-ratio: 4/3;
      display: block;
      text-decoration: none;
      will-change: clip-path, transform;
      clip-path: inset(100% 0 0 0 round 16px);
      transition: box-shadow 0.55s cubic-bezier(0.22,1,0.36,1),
                  transform 0.55s cubic-bezier(0.22,1,0.36,1);
      z-index: 1;
    }
    .work-card:hover {
      transform: translateY(-8px) scale(1.015);
      box-shadow: 0 24px 64px rgba(0,0,0,0.45);
      z-index: 5;
    }

    /* Section heading reveal */
    .reveal-line-wrap { overflow: visible; display: block; }
    .reveal-line {
      display: block;
      transform: translateY(110%);
      opacity: 0;
      transition: transform 0.85s cubic-bezier(0.16,1,0.3,1),
                  opacity 0.6s ease;
    }
    .reveal-line.in {
      transform: translateY(0);
      opacity: 1;
    }

    @media (max-width: 800px) {
      .work-grid, .work-grid-row4 { grid-template-columns: 1fr 1fr; gap: 3px; }
      .work-grid-row4 .work-card:first-child  { grid-column: auto; }
      .work-grid-row4 .work-card:last-child   { grid-column: auto; }
      .work-card { aspect-ratio: 16/9; border-radius: 10px; }
      /* GTA Doha is card 9 — span full width so no empty cell */
      .work-grid .work-card:nth-child(9) { grid-column: 1 / -1; }
      .work-grid-row4 { margin-top: 3px; }
    }
    @media (max-width: 520px) {
      .work-grid, .work-grid-row4 { grid-template-columns: 1fr 1fr; gap: 2px; }
      .work-card { aspect-ratio: 16/9; border-radius: 8px; }
      .work-card-overlay {
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        top: 50% !important;
        border-radius: 0 0 8px 8px !important;
        padding: 1.5rem 0.5rem 0.4rem 0.55rem !important;
        background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.72) 60%, rgba(0,0,0,0.88) 100%) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        align-items: flex-end !important;
        transform: none !important; opacity: 1 !important;
      }
      .work-card:hover .work-card-overlay { transform: none !important; background: linear-gradient(to bottom, transparent 0%, rgba(109,35,56,0.7) 60%, rgba(109,35,56,0.92) 100%) !important; }
      .work-card-overlay-body { display: flex; flex-direction: column; justify-content: flex-end; }
      .work-card-category { display: none !important; }
      .work-card-title { font-size: 0.72rem !important; line-height: 1.1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; }
      .work-card-arrow { width: 18px !important; height: 18px !important; flex-shrink: 0; align-self: flex-end; }
      .work-card-arrow svg { width: 8px !important; height: 8px !important; }
    }

    .work-card-img,
    .work-card video {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.55s cubic-bezier(0.22,1,0.36,1),
                  filter 0.55s cubic-bezier(0.22,1,0.36,1);
      will-change: transform, filter;
    }
    .work-card:hover .work-card-img,
    .work-card:hover video {
      transform: scale(1.04);
      filter: brightness(1.1);
    }

    /* ── Glass overlay: floating pill ── */
    .work-card-overlay {
      position: absolute;
      bottom: 1rem; left: 1rem; right: 1rem;
      background: rgba(6,4,6,0.62);
      backdrop-filter: blur(28px) saturate(160%);
      -webkit-backdrop-filter: blur(28px) saturate(160%);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 20px;
      padding: 1rem 1rem 1rem 1.25rem;
      display: flex;
      align-items: center;
      gap: 0.85rem;
      box-shadow: 0 4px 24px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.07);
      transform: translateY(4px);
      opacity: 0.93;
      transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),
                  opacity 0.5s cubic-bezier(0.22,1,0.36,1),
                  background 0.5s cubic-bezier(0.22,1,0.36,1),
                  border-color 0.5s ease,
                  box-shadow 0.5s ease;
    }
    .work-card:hover .work-card-overlay {
      transform: translateY(-4px);
      opacity: 1;
      background: rgba(109,35,56,0.82);
      border-color: rgba(255,255,255,0.14);
      box-shadow: 0 8px 40px rgba(109,35,56,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .work-card-overlay-body { flex: 1; min-width: 0; }

    .work-card-category {
      font-family: 'Big Shoulders Display', sans-serif;
      font-size: clamp(0.85rem, 1.4vw, 1.1rem);
      font-weight: 900;
      letter-spacing: 0.02em;
      text-transform: none;
      color: rgba(255,255,255,0.45);
      margin-bottom: 0.15rem;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .work-card-title {
      font-family: var(--font);
      font-size: clamp(1.2rem, 2.4vw, 1.85rem);
      font-weight: 600;
      color: #ffffff;
      letter-spacing: -0.01em;
      text-transform: none;
      line-height: 1.1;
      margin-bottom: 0.25rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .work-card-tags {
      display: none;
      letter-spacing: 0;
      text-transform: none;
    }

    /* ── Arrow button ── */
    .work-card-arrow {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: rgba(109,35,56,0.85);
      box-shadow: 0 2px 10px rgba(109,35,56,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #fff;
      transition: background 0.55s cubic-bezier(0.22,1,0.36,1),
                  box-shadow 0.55s ease;
    }
    .work-card:hover .work-card-arrow {
      background: rgba(109,35,56,1);
      box-shadow: 0 4px 18px rgba(109,35,56,0.6), inset 0 1px 0 rgba(255,255,255,0.18);
    }
    .work-card-arrow svg {
      width: 14px; height: 14px; display: block;
      transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
    }
    .work-card:hover .work-card-arrow svg { transform: translateX(2px) translateY(-2px); }

    .work-card-view-label { display: none; }
    .work-card-view-btn   { display: none; }
    .work-card-glass      { display: none; }
    .work-card-placeholder { display: none; }

    @media (hover: none) {
      .work-card-overlay { background: rgba(10,9,11,0.82); }
      .work-card-video { display: none !important; }
      .work-card-mobile-img { display: block !important; }
    }

    /* ── Divider ── */
    .divider {
      width: 1px; height: 5rem;
      background: var(--ink);
      opacity: 0.1;
      margin: 0 auto;
    }

    /* ── About ── */
    #about {
      padding: clamp(5rem, 10vw, 10rem) var(--pad-x);
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      column-gap: 6rem;
      row-gap: 4rem;
      align-items: start;
    }
    .about-left        { grid-column: 1; grid-row: 1; }
    .about-right       { grid-column: 2; grid-row: 1; }
    .about-toggle-cell { grid-column: 1; grid-row: 2; display: flex; align-items: center; }
    .about-search-cell { grid-column: 2; grid-row: 2; }
    .about-bottom {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 6rem;
      align-items: center;
    }
    .about-bottom-left { display:flex; align-items:center; }
    .about-bottom-right { min-width:0; }

    .about-eyebrow {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 0.82rem;
      letter-spacing: 0;
      text-transform: none;
      font-weight: 300;
      color: var(--muted);
      margin-bottom: 1.5rem;
      display: block;
    }

    .about-headline {
      margin-bottom: 2rem;
    }

    .about-body {
      font-family: var(--font);
      font-size: 1.05rem;
      font-weight: 400;
      line-height: 1.9;
      color: rgba(26,26,26,0.88);
      max-width: 100%;
    }

    @keyframes colorReveal {
      from { color: var(--muted); }
      to   { color: var(--burg); }
    }
    .about-body .color-reveal { color: var(--burg); font-weight: 400; }

    .about-detail {
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .about-detail span {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 1rem;
      font-weight: 300;
      letter-spacing: 0;
      text-transform: none;
      color: var(--muted);
      line-height: 1.7;
    }

    @media (max-width: 680px) {
      #work h2 { font-size: clamp(2.4rem, 7vw, 3.2rem); white-space: normal; }
      .about-headline { font-size: clamp(2.4rem, 7vw, 3.2rem); }
      .work-header > div { display: block; width: 100%; }
      .work-intro { max-width: 100%; width: 100%; color: rgba(26,26,26,0.88); }
      #about { grid-template-columns: 1fr; row-gap: 1.5rem; padding-top: 2rem; }
      .about-left        { grid-column: 1 !important; grid-row: auto !important; order: 1; }
      .about-toggle-cell { grid-column: 1 !important; grid-row: auto !important; order: 2; }
      .about-search-cell { grid-column: 1 !important; grid-row: auto !important; order: 3; min-height: 220px; }
      .about-right       { grid-column: 1 !important; grid-row: auto !important; order: 4; }
      .ai-toggle-wrap { font-size: 28px; gap: 1rem; }
    }

    /* ── Services ── */
    #services {
      background: #060606;
      color: var(--ink);
      margin-left: calc(-1 * var(--sidebar));
      width: 100vw;
      padding: 0;
    }

    .services-inner { padding: 0 calc(var(--sidebar) + var(--pad-x)); }

    .services-top {
      margin-bottom: 4rem;
    }

    .services-headline {
      font-family: var(--font);
      font-size: clamp(1.6rem, 3.2vw, 2.8rem);
      letter-spacing: 0.01em;
      line-height: 1.25;
      color: var(--ink);
      max-width: 18ch;
      margin-top: 1.5rem;
    }

    #services .section-label {
      font-family: var(--font);
      font-weight: 900;
      font-size: clamp(2.2rem, 4vw, 3.8rem);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #f0ede8;
    }

    .svc-big-line {
      font-family: var(--font);
      font-weight: 900;
      font-size: clamp(1.4rem, 2.5vw, 2.4rem);
      line-height: 1.1;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: rgba(240,237,232,0.5);
      margin-top: 1.4rem;
    }

    /* Services marquee ticker */
    .svc-ticker {
      overflow: hidden;
      padding: clamp(1.2rem,2vw,2rem) 0;
      background: #5A1A24;
      margin-left: calc(-1 * (var(--sidebar) + var(--pad-x)));
      width: 100vw;
    }
    .svc-ticker-track {
      display: flex;
      width: max-content;
      animation: svcTicker 28s linear infinite;
      gap: 0;
    }
    .svc-ticker:hover .svc-ticker-track { animation-play-state: paused; }
    @keyframes svcTicker {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .svc-ticker span {
      font-family: var(--font);
      font-weight: 900;
      font-size: clamp(1.6rem, 3.5vw, 2.8rem);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(240,237,232,0.85);
      white-space: nowrap;
      padding: 0 2rem;
      line-height: 1.15;
    }
    .svc-ticker span.burg { color: rgba(240,237,232,0.6); }
    .svc-ticker span.sep { color: rgba(240,237,232,0.25); font-size: 1em; padding: 0 .2rem; }
    /* keep old .svc-scatter hidden */
    .svc-scatter { display: none; }

    /* Expertise list sidebar offset */
    #exp-list .exp-item {
      padding-left: calc(var(--sidebar) + clamp(1.5rem,6vw,6rem)) !important;
    }
    @media (max-width: 768px) {
      .svc-scatter {
        flex-direction: column;
        align-items: flex-start;
        gap: .55rem;
      }
      .svc-scatter span { font-size: clamp(1.3rem, 5.5vw, 1.8rem); }
      .svc-scatter span:nth-child(1)  { margin-left: 0%; }
      .svc-scatter span:nth-child(2)  { margin-left: 22%; }
      .svc-scatter span:nth-child(3)  { margin-left: 7%; }
      .svc-scatter span:nth-child(4)  { margin-left: 38%; }
      .svc-scatter span:nth-child(5)  { margin-left: 4%; }
      .svc-scatter span:nth-child(6)  { margin-left: 28%; }
      .svc-scatter span:nth-child(7)  { margin-left: 12%; }
      .svc-scatter span:nth-child(8)  { margin-left: 45%; }
      .svc-scatter span:nth-child(9)  { margin-left: 3%; }
      .svc-scatter span:nth-child(10) { margin-left: 32%; }
      .svc-scatter span:nth-child(11) { margin-left: 16%; }
      .svc-scatter span:nth-child(12) { margin-left: 50%; }
    }

    .services-industries {
      margin-top: 1.8rem;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 0.72rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      line-height: 2;
      max-width: 40ch;
    }

    /* Two-column: sticky image + list */
    .services-body {
      display: grid;
      grid-template-columns: 38% 1fr;
      gap: 0;
      align-items: start;
      padding: 0 calc(var(--sidebar) + var(--pad-x));
    }

    /* Sticky image panel */
    .services-img-panel {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      padding-right: 4vw;
    }

    .services-img-wrap {
      width: 100%;
      aspect-ratio: 3/4;
      overflow: hidden;
      position: relative;
    }

    .svc-img {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
                  transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
      transform: scale(1.04);
    }

    .svc-img.active {
      opacity: 1;
      transform: scale(1);
    }

    /* Services list */
    .services-list {
      border-top: 1px solid rgba(26,26,26,0.1);
      padding-top: 0;
    }

    .service-row {
      display: grid;
      grid-template-columns: 3rem 1fr;
      gap: 1.5rem;
      align-items: center;
      padding: 2rem 0;
      border-bottom: 1px solid rgba(26,26,26,0.08);
      cursor: default;
      transition: padding-left 0.3s ease;
    }

    .service-row:hover { padding-left: 0.5rem; }

    .service-num {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 0.72rem;
      letter-spacing: 0.15em;
      color: rgba(26,26,26,0.3);
    }

    .service-name {
      font-family: var(--font);
      font-size: clamp(1.1rem, 2vw, 1.65rem);
      font-weight: 400;
      color: rgba(26,26,26,0.35);
      letter-spacing: 0.04em;
      line-height: 1.1;
      transition: color 0.35s ease, letter-spacing 0.35s ease;
    }

    .service-row.active .service-name,
    .service-row:hover .service-name {
      color: var(--ink);
      letter-spacing: 0.06em;
    }

    .service-row.active .service-num,
    .service-row:hover .service-num { color: var(--burg); }

    .service-desc { display: none; }

    @media (max-width: 800px) {
      .services-body { grid-template-columns: 1fr; }
      .services-img-panel { display: none; }
    }

    /* ── Process ── */
    #process {
      background: #0d0c0b;
      margin-left: calc(-1 * var(--sidebar));
      width: 100vw;
      padding: 0;
    }
    .process-inner {
      display: flex;
      align-items: flex-start;
      padding-left: calc(var(--sidebar) + var(--pad-x));
    }
    .process-left {
      width: 38%;
      flex-shrink: 0;
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 5vw;
      padding-top: clamp(2rem,4vw,4rem);
      padding-bottom: clamp(2rem,4vw,4rem);
    }
    #process * {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
    }
    .process-left-label {
      font-size: 1.3rem;
      font-weight: 300;
      letter-spacing: 0;
      text-transform: none;
      color: rgba(240,237,232,0.5);
      margin-bottom: 1.5rem;
    }
    .process-left-title {
      font-size: clamp(2rem, 3.2vw, 3rem);
      font-weight: 300;
      line-height: 1.35;
      color: rgba(240,237,232,0.82);
      margin-bottom: 2rem;
    }
    .process-left-sub {
      font-size: 0.88rem;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(240,237,232,0.32);
      max-width: 280px;
    }
    .process-right {
      flex: 1;
      padding-right: var(--pad-x);
      padding-top: clamp(5rem,10vw,10rem);
      padding-bottom: clamp(6rem,12vw,12rem);
    }
    .process-step {
      padding: 3.5rem 0;
      border-top: 1px solid rgba(240,237,232,0.07);
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
    }
    .process-step.in-view {
      opacity: 1;
      transform: translateY(0);
    }
    .process-step:last-child { border-bottom: 1px solid rgba(240,237,232,0.07); }
    .process-step-num {
      font-size: 1rem;
      font-weight: 300;
      letter-spacing: 0;
      color: rgba(240,237,232,0.35);
      display: block;
      margin-bottom: 1rem;
    }
    .process-step-title {
      font-size: clamp(2rem, 3.5vw, 3rem);
      font-weight: 300;
      letter-spacing: -0.01em;
      color: #F0EDE8;
      margin-bottom: 1rem;
      line-height: 1.1;
    }
    .process-step-desc {
      font-size: clamp(0.95rem, 1.2vw, 1.05rem);
      font-weight: 300;
      color: rgba(240,237,232,0.4);
      line-height: 1.8;
      max-width: 520px;
    }
    .process-drag-hint { display: none; }
    .process-scroll-wrap { overflow: visible; }
    .process-mob-nav { display: none; }
    @media (max-width: 768px) {
      .process-inner { flex-direction: column; padding-left: 0; }
      .process-left { position: static; height: auto; width: 100%; padding-right: 0; padding-top: 2.5rem; padding-bottom: 1rem; padding-left: var(--pad-x); }
      .process-left-sub { display: none; }
      .process-right { padding: 0; overflow: hidden; width: 100%; }
      .process-slides { display: flex; transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); will-change: transform; }
      .process-step { flex: 0 0 100%; width: 100%; box-sizing: border-box; padding: 2.2rem var(--pad-x); border-top: 1px solid rgba(240,237,232,0.07); border-bottom: none !important; opacity: 1 !important; transform: none !important; }
      .process-mob-nav { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem var(--pad-x) 2.5rem; border-top: 1px solid rgba(240,237,232,0.07); }
      .pmob-arrows { display: flex; gap: 0.6rem; }
      .pmob-btn { background: none; border: 1px solid rgba(240,237,232,0.2); color: rgba(240,237,232,0.8); width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, color 0.2s; }
      .pmob-btn svg { width: 16px; height: 16px; }
      .pmob-btn:disabled { opacity: 0.2; cursor: default; }
      .pmob-btn:not(:disabled):active { border-color: rgba(240,237,232,0.6); }
      .pmob-counter { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; font-size: 0.8rem; font-weight: 300; color: rgba(240,237,232,0.35); letter-spacing: 0.05em; }
      .pmob-cur { color: rgba(240,237,232,0.7); }
    }

    /* ── Contact ── */
    #featured-in {
      padding: calc(var(--gap) * 1.4) var(--pad-x);
      background: var(--ink);
      text-align: center;
    }
    .featured-inner {
      max-width: 600px;
      margin: 0 auto;
    }
    .featured-label {
      font-family: var(--font-hd);
      font-size: clamp(2rem, 5vw, 3.5rem);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--cream);
      margin-bottom: 2.5rem;
      line-height: 1;
    }
    .featured-embed {
      display: flex;
      justify-content: center;
      margin-bottom: 1.5rem;
    }
    .featured-caption {
      font-family: var(--font);
      font-size: 0.8rem;
      color: rgba(255,255,255,0.45);
      letter-spacing: 0.03em;
      line-height: 1.6;
    }
    .featured-caption strong {
      color: rgba(255,255,255,0.75);
      font-weight: 500;
    }

    /* ── Contact ── */
    #contact {
      text-align: center;
      padding: clamp(4rem,8vw,8rem) var(--pad-x);
      background: rgba(250,248,245,0.72);
      backdrop-filter: blur(18px) saturate(1.2);
      -webkit-backdrop-filter: blur(18px) saturate(1.2);
      position: fixed;
      inset: 0;
      z-index: 9800;
      transform: translateY(100%);
      transition: transform 0.6s cubic-bezier(0.76,0,0.24,1);
      overflow-y: auto;
    }
    #contact.contact-open {
      transform: translateY(0);
    }
    .contact-close-btn {
      position: fixed;
      top: 2rem;
      right: 2.5rem;
      width: 44px;
      height: 44px;
      background: none;
      border: 1px solid rgba(26,26,26,0.15);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9801;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s, border-color 0.25s, background 0.25s;
    }
    #contact.contact-open ~ .contact-close-btn,
    .contact-close-btn.visible { opacity: 1; pointer-events: auto; }
    .contact-close-btn:hover { border-color: rgba(26,26,26,0.4); background: rgba(26,26,26,0.05); }
    .contact-close-btn svg { width: 16px; height: 16px; stroke: rgba(26,26,26,0.7); fill: none; stroke-width: 1.5; }

    .contact-headline {
      font-family: var(--font-hd);
      font-size: clamp(2.8rem, 8vw, 7rem);
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1;
      color: var(--ink);
      margin-bottom: 3rem;
      max-width: 18ch;
      margin-inline: auto;
      text-transform: uppercase;
    }

    /* ── Social Icons Tooltip ── */
    .social-icons-list { list-style:none; display:flex; justify-content:center; align-items:center; gap:1rem; margin:0 0 3rem; padding:0; }
    .soc-item { position:relative; }
    .soc-link { position:relative; overflow:hidden; display:flex; justify-content:center; align-items:center; width:52px; height:52px; border-radius:50%; color:#4d4d4d; background:#fff; border:1px solid #e8e8e8; transition:color .3s ease, box-shadow .3s ease; text-decoration:none; }
    .soc-link:hover { color:#fff; box-shadow:0 4px 24px rgba(0,0,0,.12); }
    .soc-link svg { position:relative; z-index:1; width:22px; height:22px; }
    .soc-fill { position:absolute; bottom:0; left:0; width:100%; height:0; transition:height .3s ease-in-out; }
    .soc-link:hover .soc-fill { height:100%; }
    .soc-link[data-social="linkedin"] .soc-fill { background:#0274b3; }
    .soc-link[data-social="behance"] .soc-fill { background:#053eff; }
    .soc-link[data-social="tiktok"] .soc-fill { background:#010101; }
    .soc-link[data-social="youtube"] .soc-fill { background:#ff0000; }
    .soc-link[data-social="whatsapp"] .soc-fill { background:#25d366; }
    .soc-tooltip { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#1a1a1a; color:#fff; padding:4px 10px; border-radius:6px; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif; font-size:0.72rem; letter-spacing:.04em; white-space:nowrap; opacity:0; visibility:hidden; transition:opacity .25s, bottom .25s; pointer-events:none; }
    .soc-tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#1a1a1a; }
    .soc-item:hover .soc-tooltip { opacity:1; visibility:visible; bottom:calc(100% + 12px); }

    /* ── Inquiry Form ── */
    .inquiry-form-outer {
      display: flex;
      justify-content: center;
      padding: 0 0 2rem;
    }
    .inquiry-form-wrap {
      --card-bg: #ffffff;
      --card-input: #f2ede8;
      position: relative;
      width: 100%;
      max-width: 400px;
      border-radius: 22px;
      overflow: hidden;
      z-index: 1;
      box-shadow: 0 4px 8px rgba(0,0,0,.25), 0 12px 32px rgba(0,0,0,.3), 0 0 40px rgba(90,26,36,.15);
    }
    .inquiry-form-wrap::before {
      content: '';
      position: absolute;
      inset: -60px;
      z-index: 0;
      background: conic-gradient(from 45deg, transparent 70%, #5A1A24 82%, #c9b89a 90%, #F0EDE8 95%, transparent 100%);
      animation: iq-spin 5s linear infinite;
      pointer-events: none;
    }
    @keyframes iq-spin { to { transform: rotate(360deg); } }
    .inquiry-form-inner {
      position: relative;
      z-index: 2;
      background: var(--card-bg);
      border-radius: 21px;
      margin: 1px;
      padding: 36px 32px 30px;
      text-align: left;
      box-shadow: inset 0 40px 60px -10px rgba(255,255,255,.06), inset 3px 0 10px -6px rgba(255,255,255,.06);
    }
    .iq-card-label {
      font-family: var(--font);
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(240,237,232,.3);
      margin-bottom: 14px;
    }
    .iq-card-heading {
      font-family: var(--font-hd);
      font-weight: 900;
      font-size: clamp(1.8rem, 4vw, 2.4rem);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1;
      color: #1A1A1A;
      margin-bottom: 6px;
    }
    .iq-card-heading span { color: #5A1A24; }
    .iq-card-sub {
      font-family: var(--font);
      font-size: 0.75rem;
      color: rgba(26,26,26,.45);
      margin-bottom: 24px;
      line-height: 1.5;
    }
    .iq-field { margin-bottom: 10px; }
    .iq-label { display: none; }
    .iq-field input, .iq-field textarea {
      display: block;
      width: 100%;
      background: var(--card-input);
      border: 1px solid rgba(26,26,26,0.08);
      border-radius: 11px;
      color: #1A1A1A;
      font-family: var(--font);
      font-size: 0.83rem;
      font-weight: 300;
      letter-spacing: 0.01em;
      padding: 11px 14px;
      outline: none;
      box-shadow: none;
      -webkit-appearance: none;
      transition: border-color 0.25s;
      resize: none;
    }
    .iq-field input::placeholder, .iq-field textarea::placeholder { color: rgba(26,26,26,.3); font-weight: 300; }
    .iq-field input:focus, .iq-field textarea:focus { border-color: rgba(90,26,36,.5); }
    .inquiry-submit {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 10px;
      padding: 0;
      height: 52px;
      border-radius: 100px;
      border: 1.5px solid rgba(0,0,0,0.12);
      background: rgba(255,255,255,0.95);
      box-shadow: 0 4px 24px rgba(0,0,0,0.14);
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      transition: border-color 0.35s, box-shadow 0.45s, transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
      text-transform: none;
    }
    .inquiry-submit:hover { border-color: rgba(0,0,0,0.22); background: #fff; transform: scale(1.015); box-shadow: 0 6px 36px rgba(109,35,56,0.2); }
    .inquiry-submit .iq-btn-arrow {
      position: relative; z-index: 2; flex-shrink: 0;
      width: 38px; height: 38px; border-radius: 50%;
      background: radial-gradient(ellipse at 45% 32%, #b03558 0%, #6D2338 52%, #45111f 100%);
      box-shadow: 0 2px 12px rgba(109,35,56,0.5), inset 0 1px 1px rgba(255,255,255,0.2);
      display: flex; align-items: center; justify-content: center;
      margin-left: 6px;
    }
    .inquiry-submit .iq-btn-arrow svg { width: 15px; height: 15px; color: #fff; }
    .inquiry-submit .iq-btn-sep {
      position: relative; z-index: 2;
      width: 1px; height: 18px;
      background: rgba(0,0,0,0.12);
      margin: 0 16px; flex-shrink: 0;
    }
    .inquiry-submit .iq-btn-label {
      position: relative; z-index: 2; flex: 1;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 1.08rem; font-weight: 400; letter-spacing: 0.03em;
      color: rgba(15,10,8,0.75); padding-right: 1.2rem; line-height: 1;
      text-align: center;
    }
    .inquiry-submit:hover .iq-btn-label { color: rgba(15,10,8,0.95); }
    .iq-foot {
      margin-top: 16px;
      font-family: var(--font);
      font-size: 0.68rem;
      color: rgba(26,26,26,.35);
      line-height: 1.7;
      text-align: center;
    }
    .iq-foot a { color: rgba(26,26,26,.55); text-decoration: none; font-weight: 500; transition: color .2s; }
    .iq-foot a:hover { color: rgba(26,26,26,.85); }
    .inquiry-success {
      display: none;
      font-family: var(--font);
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(240,237,232,.5);
      text-align: center;
      padding: 28px 0 4px;
    }
    @media (max-width: 700px) {
      .inquiry-form-inner { padding: 28px 22px 24px; }
      .contact-link:last-child { border-bottom: none; }
    }

    /* ── Cookie Modal ── */
    #cookie-overlay {
      position: fixed;
      bottom: 28px;
      left: 28px;
      z-index: 9990;
      width: 360px;
      max-width: calc(100vw - 40px);
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1),
                  transform 0.45s cubic-bezier(0.4,0,0.2,1);
    }
    #cookie-overlay.hidden {
      opacity: 0;
      transform: translateY(24px);
      pointer-events: none;
    }
    #cookie-modal {
      background: rgba(252,251,249,0.92);
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      border: 1px solid rgba(255,255,255,0.75);
      border-radius: 30px;
      box-shadow:
        0 20px 60px rgba(0,0,0,0.11),
        0 4px 16px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.9);
      padding: 32px 28px 28px;
      overflow: hidden;
    }
    .ck-logo { display: none; }

    /* Cookie lang switcher */
    .ck-lang-switcher {
      position: relative;
      display: flex;
      align-items: center;
      background: rgba(26,26,26,0.06);
      border: 1px solid rgba(26,26,26,0.10);
      border-radius: 100px;
      padding: 4px 5px;
      gap: 0;
      margin: 0 auto 20px;
      width: fit-content;
    }
    .ck-lang-pill {
      position: absolute;
      top: 4px;
      left: 5px;
      height: calc(100% - 8px);
      border-radius: 100px;
      background: #5A1A24;
      transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), width 0.25s ease;
      z-index: 0;
      pointer-events: none;
    }
    .ck-lang-btn {
      position: relative;
      z-index: 1;
      background: none;
      border: none;
      border-radius: 100px;
      cursor: pointer;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      color: rgba(26,26,26,0.45);
      padding: 0.3rem 0.9rem;
      text-transform: uppercase;
      white-space: nowrap;
      transition: color 0.25s ease;
    }
    .ck-lang-btn.active { color: #fff; font-weight: 500; }

    /* Cookie close button */
    .ck-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(26,26,26,0.07);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: background 0.2s;
      z-index: 2;
    }
    .ck-close:hover { background: rgba(26,26,26,0.13); }
    .ck-close svg { width: 12px; height: 12px; color: rgba(26,26,26,0.5); }
    .ck-title {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 15px;
      font-weight: 500;
      color: #1A1A1A;
      margin: 0 0 8px;
      letter-spacing: 0;
      text-align: center;
    }
    .ck-desc {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 12px;
      line-height: 1.7;
      color: #7B7B7B;
      font-weight: 400;
      margin: 0 0 22px;
      text-align: center;
    }
    /* main buttons */
    .ck-acts {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    /* Accept All — floating CTA style, always burgundy */
    .ck-btn-primary {
      display: flex;
      align-items: center;
      height: 50px;
      padding: 0;
      cursor: pointer;
      background: #6D2338;
      color: #fff;
      border: none;
      border-radius: 100px;
      width: 100%;
      transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
      box-shadow: 0 4px 18px rgba(109,35,56,0.35);
      overflow: hidden;
    }
    .ck-btn-primary:hover {
      background: #8a2a44;
      box-shadow: 0 6px 28px rgba(109,35,56,0.45);
      transform: scale(1.015);
    }
    .ck-btn-arrow {
      width: 50px;
      height: 50px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ck-btn-arrow svg {
      width: 15px;
      height: 15px;
      color: #fff;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
    }
    .ck-btn-sep {
      width: 1px;
      height: 22px;
      background: rgba(255,255,255,0.25);
      flex-shrink: 0;
    }
    .ck-btn-label {
      flex: 1;
      text-align: center;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fff;
      padding-right: 50px;
    }
    .ck-btn-secondary {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 11.5px;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 12px 24px;
      cursor: pointer;
      background: rgba(255,255,255,0.6);
      color: #1A1A1A;
      border: 1px solid rgba(26,26,26,0.14);
      border-radius: 100px;
      width: 100%;
      transition: background 0.25s ease, border-color 0.25s ease;
      backdrop-filter: blur(8px);
    }
    .ck-btn-secondary:hover {
      background: rgba(255,255,255,0.85);
      border-color: rgba(26,26,26,0.28);
    }

    /* expand panel */
    .ck-expand-wrap {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition:
        max-height 0.38s cubic-bezier(0.4,0,0.2,1),
        opacity 0.3s ease;
    }
    .ck-expand-wrap.open {
      max-height: 500px;
      opacity: 1;
    }
    .ck-expand-inner {
      padding-top: 20px;
    }
    /* preference row */
    .ck-pref-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      border-top: 1px solid rgba(26,26,26,0.07);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .ck-pref-row.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .ck-pref-info { flex: 1; min-width: 0; padding-right: 14px; }
    .ck-pref-name {
      font-family: var(--font);
      font-size: 12.5px;
      font-weight: 500;
      color: #1A1A1A;
      letter-spacing: 0.01em;
      display: block;
      margin-bottom: 3px;
    }
    .ck-pref-desc {
      font-family: var(--font);
      font-size: 11px;
      color: #9B9B9B;
      font-weight: 300;
      line-height: 1.5;
    }
    /* always-on badge */
    .ck-always-badge {
      font-family: var(--font);
      font-size: 9.5px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #6F1D2F;
      background: rgba(111,29,47,0.08);
      border-radius: 100px;
      padding: 4px 10px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    /* glass toggle */
    .ck-toggle {
      position: relative;
      width: 44px;
      height: 26px;
      flex-shrink: 0;
    }
    .ck-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
    .ck-toggle-track {
      display: block;
      width: 44px;
      height: 26px;
      border-radius: 100px;
      background: rgba(26,26,26,0.1);
      border: 1px solid rgba(26,26,26,0.1);
      transition: background 0.3s ease, border-color 0.3s ease;
      cursor: pointer;
      position: relative;
      backdrop-filter: blur(4px);
    }
    .ck-toggle input:checked + .ck-toggle-track {
      background: #6F1D2F;
      border-color: #6F1D2F;
      box-shadow: 0 0 0 3px rgba(111,29,47,0.12);
    }
    .ck-toggle-thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.22), inset 0 1px 1px rgba(255,255,255,0.8);
      transition: left 0.3s cubic-bezier(0.4,0,0.2,1);
      pointer-events: none;
    }
    .ck-toggle input:checked ~ .ck-toggle-track .ck-toggle-thumb { left: 21px; }

    /* save prefs buttons (shown after expand) */
    .ck-acts-save {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-top: 20px;
      border-top: 1px solid rgba(26,26,26,0.07);
    }

    @media (max-width: 500px) {
      #cookie-overlay { bottom: 16px; right: 16px; left: 16px; width: auto; max-width: none; }
    }

    /* ── Footer ── */
    #site-footer {
      background: #111010;
      color: rgba(240,237,232,0.7);
      padding: clamp(5rem, 8vw, 8rem) var(--pad-x) 3rem;
      margin-left: calc(-1 * var(--sidebar));
      width: 100vw;
    }

    .footer-main {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 5rem;
      margin-bottom: 5rem;
      padding-bottom: 4rem;
      border-bottom: 1px solid rgba(240,237,232,0.08);
    }

    .footer-logo-img {
      height: 90px;
      width: auto;
      filter: none;
      opacity: 0.9;
      margin-bottom: 1.5rem;
      display: block;
    }

    .footer-tagline {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.72;
      color: rgba(240,237,232,0.72);
      max-width: 280px;
    }

    .footer-col-title {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      color: rgba(240,237,232,0.5);
      margin-bottom: 1.5rem;
      display: block;
    }

    .footer-nav {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }

    .footer-nav a {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 1.5rem;
      font-weight: 300;
      color: rgba(240,237,232,0.55);
      text-decoration: none;
      transition: color 0.3s, font-weight 0.3s;
      position: relative;
      display: inline-block;
    }
    .footer-nav a::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0;
      width: 100%; height: 1px;
      background: rgba(240,237,232,0.9);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s cubic-bezier(0.76,0,0.24,1);
    }
    .footer-nav a:hover { color: rgba(240,237,232,1); font-weight: 400; }
    .footer-nav a:hover::after { transform: scaleX(1); }

    .footer-contact {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }

    .footer-contact a {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 1.5rem;
      font-weight: 300;
      color: rgba(240,237,232,0.55);
      text-decoration: none;
      transition: color 0.3s, font-weight 0.3s;
      position: relative;
      display: inline-block;
    }
    .footer-contact a::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0;
      width: 100%; height: 1px;
      background: rgba(240,237,232,0.9);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s cubic-bezier(0.76,0,0.24,1);
    }
    .footer-contact a:hover { color: rgba(240,237,232,1); font-weight: 400; }
    .footer-contact a:hover::after { transform: scaleX(1); }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1.5rem;
      font-size: 0.72rem;
      color: rgba(240,237,232,0.25);
    }

    .footer-soc-list { margin: 0 0 2rem; }
    .soc-link--dark { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); }
    .soc-link--dark:hover { color: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.3); }

    @media (max-width: 700px) {
      .footer-main { grid-template-columns: 1fr; gap: 3rem; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
    }

    /* ── Scroll Reveal ── */
    .reveal, .reveal-card {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.95s cubic-bezier(0.22,0.61,0.36,1),
                  transform 0.95s cubic-bezier(0.22,0.61,0.36,1);
    }
    .reveal.visible, .reveal-card.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.12s; }
    .reveal-delay-2 { transition-delay: 0.24s; }
    .reveal-delay-3 { transition-delay: 0.36s; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── RTL ── */
    html[dir="rtl"] nav#main-nav { flex-direction: row-reverse; }
    html[dir="rtl"] .scroll-indicator { left: var(--pad-x); right: auto; }

    /* ══════════════════════════════════
       HERO — rotating tagline
    ══════════════════════════════════ */
    .hero-tagline {
      position: absolute;
      bottom: 14vh;
      left: calc(var(--sidebar) + var(--pad-x));
      z-index: 2;
      opacity: 0;
      transition: opacity 1s ease 1.8s;
    }

    #hero.loaded .hero-tagline { opacity: 1; }

    .hero-tagline-rotating {
      display: inline-block;
      background: rgba(247,245,241,0.15);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(247,245,241,0.25);
      color: rgba(247,245,241,0.95);
      font-family: var(--font);
      font-size: clamp(1.1rem, 2vw, 1.7rem);
      font-weight: 300;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.4em 1.1em;
      transition: opacity 0.35s ease;
    }

    /* ══════════════════════════════════
       SERVICES DROPDOWN MEGA-MENU
    ══════════════════════════════════ */
    .nav-services-wrap {
      position: relative;
    }

    .nav-services-wrap:hover .services-dropdown,
    .nav-services-wrap:focus-within .services-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .services-dropdown {
      position: absolute;
      top: calc(100% + 1.2rem);
      left: 50%;
      transform: translateX(-50%) translateY(-8px);
      background: rgba(247,245,241,0.98);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(26,26,26,0.08);
      box-shadow: 0 20px 60px rgba(0,0,0,0.12);
      width: 520px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
      z-index: 600;
    }

    .dropdown-img {
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: cover;
      display: block;
    }

    .dropdown-list {
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      border-left: 1px solid rgba(26,26,26,0.07);
    }

    .dropdown-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 0.75rem 0;
      border-bottom: 1px solid rgba(26,26,26,0.06);
      text-decoration: none;
      color: rgba(26,26,26,0.4);
      font-family: var(--font);
      font-size: 0.88rem;
      font-weight: 300;
      letter-spacing: 0.01em;
      transition: color 0.2s;
    }
    .dropdown-item:last-child { border-bottom: none; }
    .dropdown-item:hover { color: var(--ink); }
    .dropdown-item .di-num {
      font-size: 0.6rem;
      letter-spacing: 0.12em;
      color: var(--burg);
      min-width: 1.8rem;
    }

    /* ══════════════════════════════════
       SHOWREEL — PLAY section
    ══════════════════════════════════ */
    /* ── Showreel scroll-expansion wrapper ── */
    #showreel-wrap {
      width: calc(100% + var(--sidebar));
      margin-left: calc(-1 * var(--sidebar));
      padding: 0 2vw;
      background: #fff;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
    }

    #showreel {
      position: relative;
      width: 100%;
      margin-left: 0;
      height: 56vw;
      max-height: 90vh;
      background: #080406;
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      will-change: border-radius;
    }

    .showreel-bg-video {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0.75;
    }

    .showreel-content {
      position: absolute;
      z-index: 2;
      right: clamp(2rem, 5vw, 5rem);
      bottom: clamp(2rem, 5vw, 4rem);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.3rem;
    }

    .showreel-play-btn {
      width: 88px; height: 88px;
      border-radius: 50%;
      border: 1px solid rgba(247,245,241,0.4);
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.4s, transform 0.5s cubic-bezier(0.34,1.56,0.64,1), background 0.4s;
      background: rgba(247,245,241,0.12);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    #showreel:hover .showreel-play-btn {
      border-color: rgba(247,245,241,0.7);
      transform: scale(1.1);
      background: rgba(247,245,241,0.22);
    }

    @media (hover: hover) and (min-width: 769px) {
      .showreel-play-btn { display: none; }
    }

    .showreel-play-btn svg {
      width: 28px; height: 28px;
      fill: rgba(247,245,241,0.9);
      transform: translateX(3px);
    }

    /* showreel text stack */
    .showreel-content {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      text-align: center;
    }
    .showreel-coming-soon {
      font-family: var(--font-hd);
      font-weight: 900;
      font-size: clamp(2rem, 4vw, 4.5rem);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(247,245,241,0.9);
      user-select: none;
      pointer-events: none;
    }
    .showreel-big-text {
      font-family: var(--font-hd);
      font-size: clamp(1.4rem, 2.6vw, 3rem);
      font-weight: 700;
      letter-spacing: 0.12em;
      color: rgba(247,245,241,0.55);
      text-transform: uppercase;
      white-space: nowrap;
      user-select: none;
      pointer-events: none;
      line-height: 1;
    }

    @media (max-width: 768px) {
      .showreel-coming-soon {
        font-size: clamp(1.8rem, 5vw, 3rem);
      }
      .showreel-big-text {
        font-size: clamp(1.2rem, 3.5vw, 2rem);
      }
    }

    /* Video Modal */
    #video-modal {
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(0,0,0,0.96);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    #video-modal.open {
      opacity: 1;
      visibility: visible;
    }

    #video-modal video {
      width: 90vw;
      max-height: 85vh;
      object-fit: contain;
    }

    .modal-close {
      position: absolute;
      top: 2rem; right: 2rem;
      background: none; border: none;
      color: rgba(247,245,241,0.6);
      font-family: var(--font);
      font-size: 0.75rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      cursor: pointer;
      display: flex; align-items: center; gap: 0.8rem;
      transition: color 0.2s;
    }
    .modal-close:hover { color: #F7F5F1; }
    .modal-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

    /* ══════════════════════════════════
       SERVICES REDESIGN — with images
    ══════════════════════════════════ */
    #services {
      background: #060606;
      color: var(--cream);
      margin-left: calc(-1 * var(--sidebar));
      width: 100vw;
      padding: 0;
      overflow: hidden;
    }

    .services-inner {
      padding: 0 calc(var(--sidebar) + var(--pad-x)) 0 calc(var(--sidebar) + var(--pad-x));
    }

    .services-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: end;
      margin-bottom: 3rem;
    }

    .services-headline {
      font-family: var(--font);
      font-size: clamp(1.3rem, 2.2vw, 2rem);
      font-weight: 300;
      letter-spacing: 0.01em;
      line-height: 1.4;
      color: rgba(26,26,26,0.65);
      max-width: 22ch;
    }

    /* auto-scrolling images strip */
    .services-strip {
      overflow: hidden;
      width: 100%;
      margin-bottom: 4rem;
      mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    }

    .services-strip-track {
      display: flex;
      gap: 1.2rem;
      width: max-content;
      animation: stripScroll 28s linear infinite;
    }

    .services-strip:hover .services-strip-track { animation-play-state: paused; }

    @keyframes stripScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    .strip-img {
      width: 280px;
      height: 180px;
      object-fit: cover;
      flex-shrink: 0;
      filter: grayscale(20%);
      transition: filter 0.4s;
    }

    .strip-img:hover { filter: grayscale(0%); }

    .services-list {
      margin-top: 0;
      border-top: 1px solid rgba(236,231,221,0.1);
    }

    /* ══════════════════════════════════
    /* ══════════════════════════════════
       CUSTOM CURSOR — showreel
    ══════════════════════════════════ */
    #showreel { cursor: none; }

    .cursor-play {
      position: fixed;
      top: 0; left: 0;
      width: 96px; height: 96px;
      border-radius: 50%;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border: none;
      display: flex;
      align-items: center; justify-content: center;
      pointer-events: none;
      z-index: 8000;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.4);
      transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1), width 0.25s ease, height 0.25s ease, background 0.25s ease, border-color 0.25s ease;
      will-change: transform;
    }

    .cursor-play.active {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    /* outside showreel — plain black dot */
    .cursor-play.outside {
      width: 12px; height: 12px;
      background: #1A1A1A;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: none;
    }

    .cursor-play.outside svg,
    .cursor-play.outside span { display: none; }

    .cursor-play svg { display: none; }

    .cursor-play span {
      font-family: var(--font-hd);
      font-size: 1.4rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #1A1A1A;
      line-height: 1;
    }

    .cursor-play { display: none !important; }
    /* desktop only */
    @media (hover: none), (max-width: 768px) {
      .cursor-play { display: none; }
      #showreel { cursor: auto; }
    }

    /* ══════════════════════════════════
       PRELOADER
    ══════════════════════════════════ */
    /* ── Mobile nav ── */
    .mob-nav {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 600;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.2rem;
      background: rgba(247,245,241,0.97);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(26,26,26,0.08);
    }
    .mob-nav-logo { height: 36px; width: auto; filter: none; }
    .mob-nav.nav-hidden { transform: translateY(-110%); transition: transform 0.3s ease; }
    .mob-nav { transition: transform 0.3s ease; }
    .mob-burger {
      background: none; border: none; cursor: pointer;
      display: flex; flex-direction: column; gap: 5px; padding: 4px;
    }
    .mob-burger span {
      display: block; width: 22px; height: 1.5px;
      background: var(--ink); border-radius: 2px;
      transition: all 0.3s ease;
    }
    .mob-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .mob-burger.open span:nth-child(2) { opacity: 0; }
    .mob-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* Dark backdrop */
    /* ── Mobile menu: light card style like inquiry modal ── */
    .mob-menu {
      display: flex;
      flex-direction: column;
      position: fixed;
      inset: 0;
      z-index: 550;
      background: #F8F7F5;
      padding: 0 1.8rem 2.2rem;
      pointer-events: none;
      clip-path: circle(0% at 50% 100%);
      transition: clip-path 0.62s cubic-bezier(0.77,0,0.18,1);
      overflow: hidden;
    }
    .mob-menu.open {
      pointer-events: auto;
      clip-path: circle(150% at 50% 100%);
    }
    .mob-menu-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.1rem 0 0;
      flex-shrink: 0;
    }
    .mob-menu-logo {
      height: 28px;
      width: auto;
      opacity: 0.85;
    }
    .mob-menu-x {
      background: none;
      border: 1px solid rgba(26,26,26,0.15);
      border-radius: 50%;
      width: 40px; height: 40px;
      cursor: pointer;
      color: rgba(26,26,26,0.6);
      transition: color 0.2s, border-color 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .mob-menu-x svg { width: 20px; height: 20px; }
    .mob-menu-x:active { color: #1A1A1A; border-color: rgba(26,26,26,0.4); }

    .mob-menu-nav {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: center;
      gap: 0;
    }
    .mob-menu-nav a {
      font-family: var(--font);
      font-weight: 300;
      font-size: clamp(1.7rem, 8vw, 2.6rem);
      letter-spacing: -0.02em;
      text-transform: lowercase;
      color: rgba(26,26,26,0.72);
      text-decoration: none;
      padding: 0.5rem 0;
      border-bottom: 1px solid rgba(26,26,26,0.08);
      display: block;
      transition: color 0.18s, padding-left 0.28s cubic-bezier(0.4,0,0.2,1);
    }
    .mob-menu-nav a:first-child { border-top: 1px solid rgba(26,26,26,0.08); }
    .mob-menu-nav a:active,
    .mob-menu-nav a.tapped { color: #5A1A24; padding-left: 0.4rem; }

    /* Staggered entrance */
    .mob-menu.open .mob-menu-nav a {
      animation: mobLinkIn 0.45s cubic-bezier(0.4,0,0.2,1) both;
    }
    .mob-menu.open .mob-menu-nav a:nth-child(1) { animation-delay: 0.18s; }
    .mob-menu.open .mob-menu-nav a:nth-child(2) { animation-delay: 0.23s; }
    .mob-menu.open .mob-menu-nav a:nth-child(3) { animation-delay: 0.28s; }
    .mob-menu.open .mob-menu-nav a:nth-child(4) { animation-delay: 0.33s; }
    .mob-menu.open .mob-menu-nav a:nth-child(5) { animation-delay: 0.38s; }
    @keyframes mobLinkIn {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .mob-menu-footer { flex-shrink: 0; }
    .mob-lang-row {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      background: rgba(255,255,255,0.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255,255,255,0.85);
      border-radius: 100px;
      padding: 5px 6px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.07), inset 0 1px 1px rgba(255,255,255,0.9);
    }
    .mob-lang-pill {
      position: absolute;
      top: 5px;
      left: 6px;
      height: calc(100% - 10px);
      border-radius: 100px;
      background: radial-gradient(ellipse at 50% 30%, #a33050 0%, #6D2338 60%, #4a1526 100%);
      box-shadow: 0 2px 12px rgba(109,35,56,0.45), inset 0 1px 1px rgba(255,255,255,0.2);
      transition: left 0.35s cubic-bezier(0.4,0,0.2,1), width 0.35s cubic-bezier(0.4,0,0.2,1);
      z-index: 0;
      pointer-events: none;
    }
    .mob-lang-row button {
      position: relative;
      z-index: 1;
      flex: 1;
      background: none;
      border: none;
      padding: 0.32rem 0;
      border-radius: 100px;
      font-family: var(--font);
      font-size: 0.7rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      color: rgba(26,26,26,0.5);
      transition: color 0.3s ease;
      text-align: center;
      min-width: 0;
    }
    .mob-lang-row button.active { color: #fff; font-weight: 500; }

    @media (max-width: 900px) {
      .mob-nav { display: flex; }
      nav#main-nav { display: none; }
      .sidebar-logo { display: none; }
      :root { --sidebar: 0rem; }
      body { padding-left: 0 !important; padding-right: 0 !important; padding-top: 60px !important; }
      body.mob-menu-open .floating-cta { display: none !important; }
      .services-top { grid-template-columns: 1fr; gap: 1.5rem; }
    }
    @media (max-width: 768px) {
      .svc-scatter { overflow: hidden; }
      .svc-scatter span:nth-child(4)  { margin-left: 28%; }
      .svc-scatter span:nth-child(8)  { margin-left: 35%; }
      .svc-scatter span:nth-child(12) { margin-left: 38%; }
    }

    /* ══════════════════════════════════
       FLOATING CTA
    ══════════════════════════════════ */
    /* ── Premium Glass Ribbon CTA ── */
    .floating-cta {
      position: fixed;
      right: 3.5rem;
      bottom: 4.5rem;
      z-index: 900;
      display: flex;
      align-items: center;
      height: 52px;
      min-width: 220px;
      padding: 0;
      border-radius: 100px;
      border: 1.5px solid rgba(255,255,255,0.28);
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(16px) saturate(120%);
      -webkit-backdrop-filter: blur(16px) saturate(120%);
      box-shadow: 0 2px 20px rgba(0,0,0,0.08);
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      transform: scale(1) translateZ(0);
      transition:
        transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
        border-color 0.35s ease,
        box-shadow 0.45s ease;
    }

    .floating-cta::before { display: none; }

    /* Button — always solid white, always visible */
    .floating-cta {
      border-color: rgba(0,0,0,0.12) !important;
      background: rgba(255,255,255,0.95) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      box-shadow: 0 4px 24px rgba(0,0,0,0.14) !important;
    }
    .floating-cta .fcta-label { color: rgba(15,10,8,0.75) !important; }
    .floating-cta .fcta-sep { background: rgba(0,0,0,0.12) !important; }
    .floating-cta:hover { border-color: rgba(0,0,0,0.22) !important; background: #fff !important; }
    .floating-cta:hover .fcta-label { color: rgba(15,10,8,0.95) !important; }

    /* Hidden until past showreel */
    .floating-cta { opacity: 0; transform: scale(0.92) translateZ(0); pointer-events: none; transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1), border-color 0.35s ease, box-shadow 0.45s ease; }
    .floating-cta.cta-visible { opacity: 1; transform: scale(1) translateZ(0); pointer-events: auto; }

    /* Same on dark sections — stays white */
    .floating-cta.on-dark {
      border-color: rgba(0,0,0,0.12) !important;
      background: rgba(255,255,255,0.95) !important;
    }
    .floating-cta.on-dark .fcta-label { color: rgba(15,10,8,0.75) !important; }
    .floating-cta.on-dark .fcta-sep { background: rgba(0,0,0,0.12) !important; }
    .floating-cta.on-dark:hover { border-color: rgba(0,0,0,0.22) !important; background: #fff !important; }
    .floating-cta.on-dark:hover .fcta-label { color: rgba(15,10,8,0.95) !important; }

    .floating-cta:hover {
      transform: scale(1.022) translateZ(0);
      border-color: rgba(255,255,255,0.48);
      box-shadow: 0 6px 36px rgba(109,35,56,0.28);
    }

    .fcta-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      border-radius: inherit;
    }

    .fcta-arrow-wrap {
      position: relative;
      z-index: 2;
      flex-shrink: 0;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: radial-gradient(ellipse at 45% 32%, #b03558 0%, #6D2338 52%, #45111f 100%);
      box-shadow: 0 2px 12px rgba(109,35,56,0.5), inset 0 1px 1px rgba(255,255,255,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 6px;
    }

    .fcta-arrow-wrap svg {
      width: 15px;
      height: 15px;
      color: #fff;
      flex-shrink: 0;
    }

    .fcta-sep {
      position: relative;
      z-index: 2;
      width: 1px;
      height: 18px;
      background: rgba(255,255,255,0.2);
      margin: 0 16px;
      flex-shrink: 0;
      transition: background 0.35s ease;
    }

    .floating-cta:hover .fcta-sep {
      background: rgba(255,255,255,0.35);
    }

    .fcta-label {
      position: relative;
      z-index: 2;
      flex: 1;
      text-align: center;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 1.08rem;
      font-weight: 400;
      letter-spacing: 0.03em;
      text-transform: none;
      color: rgba(255,255,255,0.78);
      padding-right: 1.2rem;
      line-height: 1;
      pointer-events: none;
      user-select: none;
      transition: color 0.28s ease;
    }

    .floating-cta:hover .fcta-label {
      color: rgba(255,255,255,0.96);
    }

    @media (max-width: 600px) {
      .floating-cta { right: 0.8rem; bottom: 0.8rem; height: 40px; min-width: 0; width: auto; }
      .fcta-arrow-wrap { width: 30px; height: 30px; flex-shrink: 0; margin-left: 5px; }
      .fcta-arrow-wrap svg { width: 12px; height: 12px; }
      .fcta-sep { margin: 0 10px; height: 14px; }
      .fcta-label { font-size: 0.76rem; letter-spacing: 0.06em; padding-right: 0.9rem; }
    }

  /* ── Арабский: IBM Plex Sans Arabic строгий ── */
  html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
  html[lang="ar"] .hero-title, html[lang="ar"] .section-title {
    font-family: 'IBM Plex Sans Arabic', -apple-system, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }
  html[lang="ar"] body {
    font-family: 'IBM Plex Sans Arabic', -apple-system, sans-serif;
  }

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