/* ===== CORE STYLES ===== */
    :root {
      --bg: #0a0a0a;
      --bg-light: #efe9dd;
      --text: #f5f4ef;
      --text-dark: #171717;
      --text-muted: #9b9b95;
      --accent: #e3752f;
      --border: rgba(245,244,239,0.1);
      --border-light: rgba(10,10,10,0.1);
      --container: 1280px;
      --header-height: 64px;
    }
    
    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* When jumping to a section via a nav anchor (e.g. #why-us), offset the
       landing point by the fixed header height plus a little breathing room, so
       the section's first line isn't hidden underneath the header. */
    section[id] { scroll-margin-top: calc(var(--header-height) + 16px); }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      overflow-x: hidden;
    }
    
    /* ===== HEADER ===== */
    .header {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--header-height);
      z-index: 100;
      background: transparent;
      transition: background 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
    }
    .header.scrolled {
      background: rgba(10,10,10,0.85);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
    }
    .header-inner {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 24px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 700;
      font-size: 1.25rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .nav {
      display: none;
      align-items: center;
      gap: 8px;
    }
    @media (min-width: 1024px) { .nav { display: flex; } }
    .nav-link {
      padding: 8px 16px;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-muted);
      transition: color 0.2s ease;
      position: relative;
    }
    .nav-link:hover { color: var(--text); }
    .nav-link.active::before {
      content: '';
      position: absolute;
      left: 8px; top: 50%;
      transform: translateY(-50%);
      width: 4px; height: 4px;
      background: var(--text);
      border-radius: 50%;
    }
    .header-actions {
      display: none;
      align-items: center;
      gap: 12px;
    }
    @media (min-width: 1024px) { .header-actions { display: flex; } }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 18px;
      font-family: 'Inter Tight', sans-serif;
      font-weight: 600;
      font-size: 0.85rem;
      border-radius: 9999px;
      transition: all 0.3s ease;
      cursor: pointer;
      border: none;
    }
    .btn-primary {
      background: #f5f4ef;
      color: #0a0a0a;
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 40px rgba(245,244,239,0.15);
    }
    .btn-secondary {
      background: transparent;
      color: #f5f4ef;
      border: 1px solid rgba(245,244,239,0.2);
    }
    .btn-secondary:hover {
      background: rgba(245,244,239,0.1);
      border-color: rgba(245,244,239,0.4);
    }

    /* ===== MOBILE NAV (hamburger toggle + slide-down panel) ===== */
    .nav-toggle {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      padding: 0;
      background: transparent;
      border: none;
      cursor: pointer;
      z-index: 101;
    }
    @media (min-width: 1024px) { .nav-toggle { display: none; } }
    .nav-toggle span {
      display: block;
      width: 22px;
      height: 2px;
      margin: 0 auto;
      background: var(--text);
      border-radius: 2px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    /* Hamburger morphs into an X while the menu is open */
    .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity: 0; }
    .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mobile-nav {
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: rgba(10,10,10,0.98);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      padding: 8px 24px 24px;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.35s ease, opacity 0.25s ease;
    }
    @media (min-width: 1024px) { .mobile-nav { display: none; } }
    .mobile-nav.open {
      max-height: none;
      opacity: 1;
      overflow: visible;
    }
    .mobile-nav-link {
      padding: 14px 4px;
      font-size: 1rem;
      font-weight: 500;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
    }
    .mobile-nav-link:hover { color: var(--text); }
    .mobile-nav-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 16px;
    }
    .mobile-nav-actions .btn { width: 100%; }
    .mobile-nav-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(10,10,10,0.5);
      z-index: 99;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .mobile-nav-backdrop.open {
      display: block;
      opacity: 1;
    }
    @media (min-width: 1024px) { .mobile-nav-backdrop { display: none !important; } }
    .btn-sm { padding: 4px 12px; font-size: 0.7rem; }
    /* Desktop nav-bar "Book a strategy call" only - a transparent outline
       button (see-through fill, white border, muted grey text) instead of
       the solid white pill used everywhere else (hero, CTA section, mobile
       nav), which stays untouched. Higher specificity than .btn-primary (2
       classes vs 1) is what makes this win without touching that rule. */
    .header-actions .btn-primary {
      background: transparent;
      border: 1px solid #f5f4ef;
      color: var(--text-muted);
    }
    .header-actions .btn-primary:hover {
      background: #f5f4ef;
      border-color: #f5f4ef;
      color: #0a0a0a;
    }

    /* ===== HERO SECTION ===== */
    .hero {
      min-height: 100vh; /* fallback for older browsers without svh support */
      /* `svh` (small viewport height), NOT `dvh` (dynamic). dvh recalculates
         live as the mobile browser's address bar shows/hides - and that bar
         auto-collapses a moment after page load, which makes a 100dvh hero
         suddenly grow taller and shove every section below it further down
         the page. That's the "pulls down after it loads" bug. svh is locked
         to the browser chrome's fully-expanded (smallest) size, so the hero
         is already sized for the worst case up front and never resizes. */
      min-height: 100svh;
      display: flex;
      align-items: center;
      position: relative;
      padding: calc(var(--header-height) + 48px) 24px 60px;
      overflow: hidden;
      background: var(--bg);
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      background: 
        radial-gradient(ellipse at 20% 50%, rgba(227,117,47,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(255,140,66,0.04) 0%, transparent 50%);
    }
    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: var(--container);
      margin: 0 auto;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 48px;
      align-items: center;
    }
    .hero-content {
      max-width: 520px;
    }
    .hero-eyebrow {
      font-family: 'Inter Tight', sans-serif;
      font-size: 0.6rem;
      font-weight: 500;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 20px;
      animation: fadeInUp 0.6s ease-out forwards;
    }
    .hero-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(5rem, 10vw, 5em);
      font-weight: 400;
      line-height: 1.05;
      margin-bottom: 20px;
      animation: fadeInUp 0.8s ease-out 0.1s forwards;
      opacity: 0;
    }
    .hero-title em {
      font-style: italic;
      /* Plain solid color instead of the old background-clip:text gradient.
         That technique paints the gradient over the text's calculated
         bounding box using the DECLARED font's metrics (Instrument Serif),
         but scripts that font doesn't cover (e.g. Tamil) fall back to a
         different system font with different glyph shapes/metrics - so the
         painted gradient area didn't line up with the actual glyph ink,
         leaving parts of the letters transparent (invisible against the
         dark background) wherever they fell outside it. That got worse
         whenever the <em> phrase was long enough to wrap onto a second
         line. A flat color has no such font-metric dependency, matching
         how every other heading's <em> on this page is already styled
         (.section-title em). */
      color: var(--accent);
    }
    .hero-desc {
      font-size: 1.05rem;
      color: var(--text-muted);
      max-width: 460px;
      margin-bottom: 32px;
      line-height: 1.6;
      animation: fadeInUp 0.8s ease-out 0.2s forwards;
      opacity: 0;
    }
    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      animation: fadeInUp 0.8s ease-out 0.3s forwards;
      opacity: 0;
    }
    .hero-stats {
      display: flex;
      gap: 40px;
      margin-top: 48px;
      animation: fadeInUp 0.8s ease-out 0.4s forwards;
      opacity: 0;
    }
    .hero-stat {
      text-align: left;
    }
    .hero-stat-value {
      font-family: 'Instrument Serif', serif;
      font-size: 2rem;
      font-weight: 400;
    }
    .hero-stat-label {
      font-size: 0.7rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 4px;
    }

    /* ===== HERO BENTO SLIDER (manual vertical scroll, looping) ===== */
    .hero-bento {
      display: flex;
      gap: 12px;
      height: 720px;
      animation: fadeInUp 1s ease-out 0.3s forwards;
      opacity: 0;
      overflow: hidden;
      margin-top: 24px;
    }
    .bento-column {
      flex: 1;
      position: relative;
      border-radius: 16px;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;          /* Firefox: hide scrollbar */
      -ms-overflow-style: none;       /* IE/Edge */
      overscroll-behavior: contain;   /* don't chain scroll to the page */
      cursor: grab;
      -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
      mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    }
    .bento-column.dragging { cursor: grabbing; }
    .bento-column::-webkit-scrollbar { width: 0; height: 0; display: none; }
    .bento-track {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .bento-card {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      flex-shrink: 0;
      aspect-ratio: 4 / 5;
      height: auto;
    }
    .bento-card:hover {
      transform: scale(1.02);
      box-shadow: 0 20px 40px rgba(10,10,10,0.4);
      z-index: 5;
    }
    .bento-card:hover .bento-img,
    .bento-card:hover .bento-video {
      transform: scale(1.08);
    }
    /* The one video creative is portrait (9/16); the image cards are 4/5.
       Overriding just this card's aspect ratio lets the full video show
       without cropping, while it still scrolls in the column like the rest.
       Compound selector (0,2,0 specificity) so it also beats the plain
       `.bento-card { aspect-ratio: 4/5 }` inside the responsive media queries
       below, which otherwise win on mobile by coming later in the source. */
    .bento-card.bento-card--video {
      aspect-ratio: 9 / 16;
    }


    .bento-img,
    .bento-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
      -webkit-user-drag: none;
      user-select: none;
    }
    .bento-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.15) 40%, transparent 70%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 16px;
      pointer-events: none;
    }
    .bento-brand {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 600;
      font-size: 0.85rem;
      color: #f5f4ef;
      display: flex;
      align-items: center;
      gap: 6px;
      text-shadow: 0 1px 4px rgba(10,10,10,0.5);
    }
    .bento-brand-logo {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      background: #f5f4ef;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.6rem;
      font-weight: 700;
      color: #0a0a0a;
      flex-shrink: 0;
    }
    
    /* ===== TRUSTED BRANDS ===== */
    .brands {
      padding: 80px 0;
      background: var(--bg-light);
      color: var(--text-dark);
      position: relative;
      overflow: hidden;
    }
    .brands-inner {
      max-width: var(--container);
      margin: 0 auto;
      text-align: center;
      padding: 0 24px;
    }
    .brands-title {
      font-family: 'Inter Tight', sans-serif;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 48px;
    }
    .brands-marquee {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      overscroll-behavior-x: contain;
      -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
      mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
      cursor: grab;
      /* Keep scrollLeft math in the standard LTR convention (0 = start,
         increasing = scrolled forward) no matter what direction the page
         is in. Under dir="rtl" (Arabic), the browser flips scrollLeft's
         meaning for any horizontally-scrolling box using the document's
         direction, which broke the auto-scroll/loop-recentring logic in
         js/main.js - it was written assuming the LTR range and silently
         got stuck. This container's content is just logos, not directional
         text, so isolating it from the page direction has no visual cost. */
      direction: ltr;
    }
    .brands-marquee + .brands-marquee { margin-top: 20px; }
    .brands-marquee::-webkit-scrollbar { width: 0; height: 0; display: none; }
    .brands-marquee.dragging { cursor: grabbing; }
    .brands-track {
      display: flex;
      gap: 24px;
      padding: 0 12px;
      width: max-content;
    }
    .brand-card {
      position: relative;
      flex-shrink: 0;
      width: 150px;
      border-radius: 16px;
      overflow: hidden;
      background: transparent;
      box-shadow: none;
      transition: transform 0.3s ease;
    }
    .brand-card:hover { transform: translateY(-4px); }
    .brand-card img {
      width: 100%;
      height: 100px;
      object-fit: cover;
      display: block;
      pointer-events: none;
      -webkit-user-drag: none;
      user-select: none;
    }
    .brand-card-name {
      display: block;
      font-family: 'Inter Tight', sans-serif;
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--text);
      padding: 14px 18px;
      text-align: left;
    }
    
    /* ===== SECTION: AI CREATIVE ===== */
    .section-ai {
      padding: 120px 24px;
      position: relative;
    }
    .section-inner {
      max-width: var(--container);
      margin: 0 auto;
    }
    .section-eyebrow {
      font-family: 'Inter Tight', sans-serif;
      font-size: 0.75rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text-muted);
      margin-bottom: 16px;
    }
    .section-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 400;
      line-height: 1.1;
      margin-bottom: 24px;
    }
    .section-title em {
      font-style: italic;
      color: var(--accent);
    }
    .section-desc {
      font-size: 1.125rem;
      color: var(--text-muted);
      max-width: 600px;
      line-height: 1.7;
      margin-bottom: 48px;
    }
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 64px;
    }
    .feature-card {
      background: rgba(245,244,239,0.03);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px;
      transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .feature-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(227,117,47,0.5), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .feature-card:hover {
      transform: translateY(-4px);
      border-color: rgba(227,117,47,0.3);
      box-shadow: 0 20px 60px rgba(10,10,10,0.3);
    }
    .feature-card:hover::before {
      opacity: 1;
    }
    .feature-icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, rgba(227,117,47,0.2), rgba(255,140,66,0.2));
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      font-size: 1.25rem;
    }
    .feature-title {
      font-family: 'Inter Tight', sans-serif;
      font-size: 1.125rem;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .feature-desc {
      font-size: 0.875rem;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* ===== DIFFERENTIATOR: "Most agencies stop at the post" ===== */
    .differentiator {
      padding: 100px 24px;
      background: var(--bg-light);
    }
    .differentiator-card {
      position: relative;
      max-width: var(--container);
      margin: 0 auto;
      background: var(--bg);
      border-radius: 28px;
      padding: 64px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
      overflow: hidden;
    }
    .differentiator-glow {
      position: absolute;
      top: -20%;
      right: -10%;
      width: 60%;
      height: 60%;
      background: radial-gradient(circle, rgba(227,117,47,0.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .differentiator-left {
      position: relative;
      z-index: 1;
    }
    .differentiator-title {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 700;
      font-size: clamp(2rem, 3.2vw, 2.75rem);
      line-height: 1.15;
      color: var(--text);
    }
    .differentiator-title em {
      font-style: italic;
      color: var(--accent);
      /* The accent phrase ("We don't.") must never wrap mid-phrase - it's
         short in every site language, so nowrap is safe at all widths. */
      white-space: nowrap;
    }
    .differentiator-right {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
    }
    .diff-item {
      display: flex;
      gap: 20px;
      padding: 24px 0;
      border-top: 1px solid var(--border);
    }
    .diff-item:last-child {
      padding-bottom: 0;
    }
    .diff-number {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: rgba(227,117,47,0.14);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Inter Tight', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .diff-content h3 {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 600;
      font-size: 1.05rem;
      color: var(--text);
      margin-bottom: 8px;
    }
    .diff-content p {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.6;
    }
    @media (max-width: 900px) {
      .differentiator-card {
        grid-template-columns: 1fr;
        padding: 40px 28px;
        border-radius: 20px;
      }
    }

    /* ===== SERVICES SECTION ===== */
    .services {
      padding: 120px 24px;
      background: var(--bg-light);
      color: var(--text-dark);
    }
    .services-header {
      max-width: var(--container);
      margin: 0 auto 64px;
      text-align: center;
    }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: var(--container);
      margin: 0 auto;
    }
    .service-card {
      background: #f5f4ef;
      border: 1px solid var(--border-light);
      border-radius: 16px;
      overflow: hidden;
      transition: transform 0.5s ease, box-shadow 0.5s ease;
      cursor: pointer;
    }
    .service-card:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 20px 60px rgba(10,10,10,0.1);
    }
    .service-card:hover .service-img {
      transform: scale(1.05);
    }
    .service-img-wrap {
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .service-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s ease;
    }
    .service-content {
      padding: 24px;
    }
    .service-tag {
      font-size: 0.75rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent);
      margin-bottom: 8px;
    }
    .service-name {
      font-family: 'Inter Tight', sans-serif;
      font-size: 1.125rem;
      font-weight: 600;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .service-name::before {
      content: '';
      width: 0;
      height: 4px;
      background: var(--text-dark);
      border-radius: 50%;
      transition: width 0.3s ease;
      flex-shrink: 0;
    }
    .service-card:hover .service-name::before {
      width: 12px;
    }
    .service-desc {
      font-size: 0.875rem;
      color: var(--text-muted);
      line-height: 1.6;
    }
    
    /* ===== WHAT WE DO ===== */
    .what-we-do {
      padding: 120px 24px;
      background: var(--bg-light);
      color: var(--text-dark);
    }
    .wwd-list {
      max-width: var(--container);
      margin: 64px auto 0;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .wwd-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .wwd-item {
      position: relative;
      background: #efe9dd;
      border: 1px solid var(--border-light);
      border-radius: 16px;
      padding: 32px;
      transition: transform 0.3s ease, border-color 0.3s ease;
    }
    .wwd-row .wwd-item:hover {
      transform: translateY(-4px);
      border-color: rgba(227,117,47,0.4);
    }
    .wwd-body h3 {
      font-family: 'Inter Tight', sans-serif;
      font-size: 1.375rem;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .wwd-body p {
      font-size: 0.95rem;
      color: var(--text-dark);
      opacity: 0.65;
      line-height: 1.65;
      margin-bottom: 16px;
    }
    .wwd-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .wwd-tags span {
      font-size: 0.75rem;
      font-weight: 500;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(10,10,10,0.06);
      color: var(--text-dark);
      opacity: 0.75;
    }
    /* Software/Apps/IT gets a distinct highlighted treatment, full-width below
       the other three, to visually flag it as the differentiator vs. a
       typical marketing agency */
    .wwd-item-highlight {
      background: var(--bg);
      border-color: var(--border);
      padding: 40px 32px;
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .wwd-item-highlight .wwd-body { max-width: 640px; }
    .wwd-item-highlight .wwd-body p { color: var(--text); opacity: 0.7; }
    .wwd-item-highlight .wwd-tags span {
      background: rgba(245,244,239,0.1);
      color: var(--text);
      opacity: 1;
    }
    .wwd-item-highlight:hover { transform: none; }
    .wwd-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 999px;
      background: var(--accent);
      color: var(--text);
      margin-bottom: 20px;
    }
    @media (max-width: 900px) {
      .wwd-row { grid-template-columns: 1fr; }
    }

    /* ===== COMPARISON TABLE ===== */
    .comparison {
      padding: 120px 24px;
      background: linear-gradient(180deg, var(--bg) 0%, #050505 100%);
      position: relative;
    }
    .comparison::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(227,117,47,0.05) 0%, transparent 60%);
      pointer-events: none;
    }
    .comparison-inner {
      max-width: var(--container);
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    .comparison-header {
      text-align: center;
      margin-bottom: 64px;
    }
    .comparison-table {
      display: grid;
      grid-template-columns: 0.7fr repeat(3, 1.1fr);
      gap: 1px;
      background: var(--border);
      border-radius: 16px;
      overflow: hidden;
    }
    .comparison-cell {
      padding: 20px 24px;
      background: rgba(245,244,239,0.03);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      font-size: 0.9rem;
      line-height: 1.5;
      color: var(--text-muted);
    }
    /* Row-label column (Requirement): every 4th cell starting from the 1st,
       since this is one flat grid of cells rather than actual <tr> rows.
       (The old `:first-child` rule only ever matched the very first cell in
       the whole grid - the blank corner cell above "Requirement" - not the
       row-label cell in every row, since they're not literally the grid's
       first child.) */
    .comparison-cell:nth-child(4n+1) {
      font-weight: 600;
      color: var(--text);
    }
    .comparison-cell.head {
      background: rgba(245,244,239,0.06);
      font-family: 'Inter Tight', sans-serif;
      font-weight: 700;
      font-size: 0.875rem;
      color: var(--text);
      justify-content: center;
      text-align: center;
    }
    /* CAMBM column: white text on an orange-tinted wash (not orange text -
       reads better and lets the orange act as the highlight, not the ink). */
    .comparison-cell.highlight {
      background: linear-gradient(90deg, rgba(227,117,47,0.18), rgba(227,117,47,0.07));
      color: var(--text);
      font-weight: 500;
    }
    /* Checkmark badge before every CAMBM value - a quick visual "yes" hook
       that draws the eye down the column. */
    .comparison-cell.highlight:not(.head)::before {
      content: '\2713';
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      margin-inline-end: 10px;
      border-radius: 50%;
      background: var(--accent);
      color: #0a0a0a;
      font-size: 0.65rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .comparison-cell.head.highlight {
      background: linear-gradient(135deg, #e3752f 0%, #bd5d1e 100%);
      color: #fff;
    }
    .comparison-cell.head.highlight::before {
      content: '\2605';
      margin-inline-end: 8px;
      font-size: 0.8rem;
    }

    /* ===== PRICING ===== */
    .pricing {
      padding: 120px 24px 80px;
      background: #050505;
      position: relative;
    }
    .pricing-grid {
      max-width: var(--container);
      margin: 64px auto 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      align-items: stretch;
    }
    .pricing-card {
      position: relative;
      background: rgba(245,244,239,0.03);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 40px 32px;
      display: flex;
      flex-direction: column;
      transition: transform 0.4s ease, border-color 0.3s ease;
    }
    .pricing-card:hover { transform: translateY(-4px); }
    .pricing-card-featured {
      background: rgba(227,117,47,0.06);
      border-color: rgba(227,117,47,0.4);
      transform: scale(1.04);
      z-index: 1;
    }
    .pricing-card-featured:hover { transform: scale(1.04) translateY(-4px); }
    .pricing-badge {
      position: absolute;
      top: -14px;
      left: 32px;
      font-size: 0.75rem;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 999px;
      background: var(--accent);
      color: var(--text);
    }
    .pricing-name {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 600;
      font-size: 1.1rem;
      color: var(--text-muted);
      margin-bottom: 12px;
    }
    .pricing-price {
      font-family: 'Instrument Serif', serif;
      font-size: 2.5rem;
      color: var(--text);
      margin-bottom: 8px;
    }
    /* Only the "/mo" suffix should be small/muted - this used to be a bare
       `span` selector, which also matched the price-amount span added
       alongside data-price-index, silently shrinking and muting the actual
       price number too. Scoped to .pricing-price-suffix specifically now. */
    .pricing-price .pricing-price-suffix {
      font-family: 'Inter', sans-serif;
      font-size: 0.95rem;
      color: var(--text-muted);
      font-weight: 400;
    }
    .pricing-term {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-bottom: 24px;
    }
    .pricing-tc {
      font-size: 0.7rem;
      color: var(--text-muted);
      opacity: 0.7;
      text-align: center;
      margin-top: 14px;
    }
    .pricing-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 32px;
      flex-grow: 1;
    }
    .pricing-features li {
      position: relative;
      padding-left: 26px;
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.5;
    }
    .pricing-features li::before {
      content: '\2713';
      position: absolute;
      left: 0;
      top: 0;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      color: var(--accent);
      background: rgba(227,117,47,0.15);
      border-radius: 50%;
    }
    .pricing-btn { width: 100%; text-align: center; }
    .pricing-enterprise {
      max-width: var(--container);
      margin: 40px auto 0;
      background: rgba(245,244,239,0.03);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 32px 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }
    .pricing-enterprise h3 {
      font-family: 'Inter Tight', sans-serif;
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 6px;
    }
    .pricing-enterprise p {
      font-size: 0.9rem;
      color: var(--text-muted);
    }
    @media (max-width: 900px) {
      .pricing-grid { grid-template-columns: 1fr; }
      .pricing-card-featured { transform: none; }
      .pricing-card-featured:hover { transform: translateY(-4px); }
    }

    /* ===== TESTIMONIALS ===== */
    .testimonials {
      padding: 120px 24px;
      background: var(--bg-light);
      color: var(--text-dark);
      position: relative;
      overflow: hidden;
    }
    .testimonials::before {
      content: '';
      position: absolute;
      top: -50%; left: -50%;
      width: 200%; height: 200%;
      background: radial-gradient(circle at 50% 50%, rgba(227,117,47,0.03) 0%, transparent 50%);
      pointer-events: none;
    }
    .testimonials-inner {
      max-width: var(--container);
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    .testimonials-header {
      text-align: center;
      margin-bottom: 64px;
    }
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 24px;
      align-items: stretch;
    }
    .testimonial-card {
      background: #f5f4ef;
      border: 1px solid var(--border-light);
      border-radius: 20px;
      padding: 32px;
      transition: transform 0.5s ease, box-shadow 0.5s ease;
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .testimonial-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 60px rgba(10,10,10,0.08);
    }
    .testimonial-quote {
      font-family: 'Instrument Serif', serif;
      font-size: 1.25rem;
      line-height: 1.5;
      margin-bottom: 24px;
      color: var(--text-dark);
      flex-grow: 1;
    }
    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
    }
    .testimonial-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, #e3752f, #ff8c42);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 0.875rem;
      color: #f5f4ef;
    }
    .testimonial-info h4 {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 600;
      font-size: 0.875rem;
    }
    .testimonial-info p {
      font-size: 0.75rem;
      color: var(--text-muted);
    }
    .testimonial-stars {
      display: flex;
      gap: 4px;
      margin-bottom: 16px;
      color: #fbbf24;
      font-size: 0.875rem;
    }
    
    /* ===== CTA SECTION ===== */
    .cta {
      padding: 160px 24px;
      position: relative;
      overflow: hidden;
      text-align: center;
      background: var(--bg);
    }
    .cta-bg {
      position: absolute;
      inset: 0;
      background: 
        radial-gradient(ellipse at 50% 50%, rgba(227,117,47,0.1) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(255,140,66,0.08) 0%, transparent 50%);
    }
    .cta-inner {
      position: relative;
      z-index: 2;
      max-width: 700px;
      margin: 0 auto;
    }
    .cta-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 400;
      line-height: 1.1;
      margin-bottom: 24px;
    }
    .cta-desc {
      font-size: 1.125rem;
      color: var(--text-muted);
      margin-bottom: 40px;
      line-height: 1.7;
    }
    
    /* ===== FOOTER ===== */
    .footer {
      padding: 80px 24px 40px;
      background: #050505;
      border-top: 1px solid var(--border);
    }
    .footer-inner {
      max-width: var(--container);
      margin: 0 auto;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 2fr repeat(3, 1fr);
      gap: 48px;
      margin-bottom: 64px;
    }
    .footer-brand {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 700;
      font-size: 1.25rem;
      margin-bottom: 16px;
    }
    .footer-desc {
      font-size: 0.875rem;
      color: var(--text-muted);
      line-height: 1.6;
      max-width: 280px;
    }
    .footer-col-title {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 600;
      font-size: 0.875rem;
      margin-bottom: 20px;
      color: var(--text);
    }
    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .footer-link {
      font-size: 0.875rem;
      color: var(--text-muted);
      transition: color 0.2s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .footer-link:hover {
      color: var(--text);
    }
    .footer-link::before {
      content: '';
      width: 0;
      height: 4px;
      background: currentColor;
      border-radius: 50%;
      transition: width 0.3s ease;
      flex-shrink: 0;
    }
    .footer-link:hover::before {
      width: 8px;
    }
    .footer-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
    }
    .footer-copyright {
      font-size: 0.75rem;
      color: var(--text-muted);
    }
    .footer-socials {
      display: flex;
      gap: 16px;
    }
    .footer-social {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(245,244,239,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .footer-social:hover {
      background: rgba(245,244,239,0.1);
      transform: translateY(-2px);
    }
    
    /* ===== LOADING OVERLAY / PRELOADER BAR =====
       Minimalist "Loading NN%" bar that fills as the hero media loads, then
       zooms toward the viewer, blurs and fades to reveal the site. A single
       custom property --preloader-p (0..1, written once per frame on :root)
       drives the bar fill, the ambient bloom and the counter, so they can
       never drift out of step. */
    .loading-overlay {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 1s ease;
    }
    /* Ambient orange bloom, brightens as the bar fills. */
    .loading-overlay::before {
      content: "";
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 120vmin; aspect-ratio: 1;
      background: radial-gradient(circle, rgba(227,117,47,0.16), transparent 60%);
      opacity: var(--preloader-p, 0);
      pointer-events: none;
    }
    /* Zoom-through exit: the bar rushes forward, blurs and dissolves. */
    .loading-overlay.out { opacity: 0; pointer-events: none; }
    .preloader-stage {
      width: min(380px, 72vw);
      position: relative;
      transform-origin: 50% 50%;
      transition: transform 1.15s cubic-bezier(.66,0,.24,1),
                  filter    1.15s cubic-bezier(.66,0,.24,1),
                  opacity    .85s ease .12s;
    }
    .loading-overlay.out .preloader-stage {
      transform: scale(1.45);
      filter: blur(16px);
      opacity: 0;
    }
    .preloader-meta {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #5a5a5a;
    }
    .preloader-meta b {
      font-weight: 700;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
    }
    .preloader-rule {
      margin-top: 14px;
      height: 1px;
      background: rgba(245,244,239,0.1);
      position: relative;
      overflow: hidden;
    }
    .preloader-rule::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--accent);
      transform: scaleX(var(--preloader-p, 0));
      transform-origin: left;
    }
    /* Legacy hard-hide fallback (kept in case anything still toggles it). */
    .loading-overlay.hidden { opacity: 0; visibility: hidden; }

    /* ---- Reveal: content fades in; the hero settles into place ----
       The settle-scale is applied to .hero ONLY (it has no position:fixed
       descendants), so it can never rebase the fixed header/cursor/popups. */
    body > :not(.loading-overlay) { transition: opacity 0.9s ease; }
    .hero { transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
    html.bento-preloading .hero { transform: scale(1.04); }

    @media (prefers-reduced-motion: reduce) {
      .loading-overlay,
      .preloader-stage,
      body > :not(.loading-overlay),
      .hero { transition-duration: 0.01ms !important; }
      .loading-overlay.out .preloader-stage { transform: none; filter: none; }
      html.bento-preloading .hero { transform: none; }
    }
    
    /* ===== CURSOR ===== */
    .cursor {
      position: fixed;
      width: 8px;
      height: 8px;
      background: #e3752f;
      border-radius: 50%;
      pointer-events: none;
      z-index: 99999;
      transition: transform 0.1s ease;
      mix-blend-mode: difference;
    }
    .cursor-ring {
      position: fixed;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(245,244,239,0.3);
      border-radius: 50%;
      pointer-events: none;
      z-index: 99998;
      transition: transform 0.15s ease, width 0.3s ease, height 0.3s ease;
    }
    .cursor-ring.hover {
      width: 60px;
      height: 60px;
      border-color: rgba(227,117,47,0.5);
    }
    
    /* =====================================================================
       RESPONSIVE  -  single consolidated section.
       Everything mobile/tablet-related lives here now. Previously these
       rules were duplicated across three separate locations in this file
       (three separate `@media (max-width: 1024px)` blocks, three at 768px,
       two at 640px) with conflicting values for the same properties  -  since
       later rules win ties in CSS, large parts of the mobile design were
       silently overridden and never actually applied. That's the root
       cause of the broken mobile layout. Consolidated here, mobile-first
       within each breakpoint, no duplicate selectors.
       ===================================================================== */

    @media (max-width: 1024px) {
      /* Nav collapses to hamburger menu (see .nav-toggle / .mobile-nav below) */
      .hero-inner { grid-template-columns: 1fr; gap: 0; }
      .hero {
        padding: var(--header-height) 0 60px;
        min-height: auto;
        align-items: flex-start;
      }
      .hero-bento {
        width: 100%;
        height: 560px;
        margin-top: 24px;
        border-radius: 0;
        overflow: visible;
      }
      .hero-content {
        padding: 40px 24px 0;
        text-align: center;
        max-width: 100%;
      }
      .hero-title { font-size: clamp(2rem, 7vw, 3.5rem); }
      /* On mobile the italic serif "Beyond" reads visually smaller than the
         regular-weight line under it even at the same font-size, so give it
         a deliberate bump here (desktop already looks balanced as-is). */
      .hero-title em { font-size: 2em; }
      .hero-desc { margin: 0 auto 32px; }
      .hero-actions { justify-content: center; }
      .hero-stats { justify-content: center; gap: 32px; margin-top: 32px; }
      .hero-stat { text-align: center; }
      /* Semi-transparent header so the bento gallery reads through behind it */
      .header { background: rgba(10,10,10,0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
      .header.scrolled { background: rgba(10,10,10,0.9); }
      /* 6-item grids (AI workflow features, services) drop from 3 to 2 columns */
      .feature-grid,
      .services-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
      .hero-bento { height: 520px; gap: 8px; }
      .bento-track { gap: 8px; }
      .bento-card { aspect-ratio: 4 / 5; }
      .hero-stats { gap: 24px; margin-top: 32px; }
      .hero-stat-value { font-size: 1.75rem; }
      .bento-overlay { padding: 10px; }
      .bento-brand { font-size: 0.7rem; }

      /* Comparison table (mobile): TRANSPOSED relative to desktop - the grid
         flows column-by-column, so each original ROW becomes a COLUMN. The
         DOM order is row-major (Requirement, In-House, Outsourcing, CAMBM,
         then Strategy...), so with grid-auto-flow:column and 4 explicit rows
         the first 4 cells stack vertically as the pinned left column (the
         three providers + corner label), and each requirement becomes one
         horizontal step of the scroll. Only .comparison-table-scroll scrolls;
         the section heading above it never moves. */
      .comparison-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .comparison-table {
        grid-auto-flow: column;
        grid-template-rows: repeat(4, auto);
        grid-template-columns: 128px repeat(8, 170px);
        width: max-content;
        font-size: 0.8rem;
        /* Must NOT be `hidden` (as it is on desktop, for rounded corners) -
           `overflow: hidden` here would make sticky cells stick relative to
           THIS element instead of the actually-scrolling wrapper, since it'd
           become the nearest ancestor with non-visible overflow. That
           silently breaks position:sticky. */
        overflow: visible;
        border-radius: 0;
      }
      /* Provider column (Requirement / Hiring In-House / Traditional
         Outsourcing / Cambridge Marketing): pinned to the left edge while
         the requirement columns scroll past behind it. Opaque backgrounds so
         passing cells don't show through, plus a shadow hinting there's
         more content to scroll. */
      .comparison-cell.head {
        position: sticky;
        inset-inline-start: 0;
        z-index: 2;
        background: #16130f;
        justify-content: flex-start;
        text-align: start;
        box-shadow: 3px 0 8px rgba(0,0,0,0.35);
      }
      /* Sticky CAMBM header needs a fully opaque gradient (the base one is
         already opaque, restated here to keep it above scrolling cells). */
      .comparison-cell.head.highlight {
        background: linear-gradient(135deg, #e3752f 0%, #a3511a 100%);
      }

      .footer-top { grid-template-columns: 1fr; gap: 32px; }
      .feature-grid,
      .services-grid { grid-template-columns: 1fr; }
      .cursor, .cursor-ring { display: none; }
    }

    @media (max-width: 640px) {
      .hero-bento { height: 420px; gap: 6px; }
      .bento-track { gap: 6px; }
      .bento-card { aspect-ratio: 4 / 5; }
      .hero-title { font-size: clamp(2rem, 7vw, 3rem); }
    }
    
    /* ===== SCROLL ANIMATIONS ===== */
    .scroll-reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    .scroll-reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
    .scroll-reveal-left {
      opacity: 0;
      transform: translateX(-40px);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    .scroll-reveal-left.revealed {
      opacity: 1;
      transform: translateX(0);
    }
    .scroll-reveal-right {
      opacity: 0;
      transform: translateX(40px);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    .scroll-reveal-right.revealed {
      opacity: 1;
      transform: translateX(0);
    }
    .scroll-reveal-scale {
      opacity: 0;
      transform: scale(0.95);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    .scroll-reveal-scale.revealed {
      opacity: 1;
      transform: scale(1);
    }
    
    /* Stagger delays */
    .stagger-1 { transition-delay: 0.1s; }
    .stagger-2 { transition-delay: 0.2s; }
    .stagger-3 { transition-delay: 0.3s; }
    .stagger-4 { transition-delay: 0.4s; }
    .stagger-5 { transition-delay: 0.5s; }
    .stagger-6 { transition-delay: 0.6s; }

    /* ===== BACK TO TOP ===== */
    .back-to-top {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: none;
      background: var(--accent);
      color: var(--text);
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 90;
      box-shadow: 0 8px 24px rgba(10,10,10,0.25);
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background 0.3s ease;
    }
    .back-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .back-to-top:hover {
      background: #ff8c42;
      transform: translateY(-3px);
    }
    @media (max-width: 640px) {
      .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
    }

    /* ===== CLIENT CARD POPUP (bento gallery hover/tap) ===== */
    .client-popup-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(10,10,10,0.6);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s;
    }
    .client-popup-backdrop.open {
      opacity: 1;
      visibility: visible;
    }
    .client-popup {
      position: relative;
      width: 100%;
      max-width: 420px;
      background: #f5f4ef;
      color: var(--text-dark);
      border-radius: 20px;
      overflow: hidden;
      transform: scale(0.94) translateY(12px);
      transition: transform 0.3s ease;
      box-shadow: 0 30px 80px rgba(10,10,10,0.4);
    }
    .client-popup-backdrop.open .client-popup {
      transform: scale(1) translateY(0);
    }
    .client-popup-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: rgba(10,10,10,0.06);
      color: var(--text-dark);
      font-size: 0.8rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      transition: background 0.2s ease;
    }
    .client-popup-close:hover { background: rgba(10,10,10,0.12); }
    .client-popup-image {
      width: 100%;
      height: 260px;
      background-color: var(--bg);
      background-size: cover;
      background-position: center;
    }
    .client-popup-body {
      padding: 24px 28px 28px;
      text-align: center;
    }
    .client-popup-title {
      font-family: 'Inter Tight', sans-serif;
      font-size: 1.375rem;
      font-weight: 600;
      color: var(--text-dark);
    }

    /* ===== COUNTRY / LANGUAGE PICKER (header + mobile nav) ===== */
    .locale-nav-picker {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .locale-select {
      /* Solid white + dark text rather than the near-transparent light-on-light
         combo this used to have - the native option-list popup wasn't
         guaranteed to pick up the intended contrast, so it could render as
         unreadable white text on a white dropdown. */
      background: #f5f4ef;
      border: 1px solid var(--border-light);
      color: var(--text-dark);
      border-radius: 9999px;
      padding: 6px 10px;
      font-family: 'Inter Tight', sans-serif;
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
    }
    .locale-select:hover { background: #ffffff; }
    /* Nav-bar picker (header + mobile nav): the native <select> is replaced
       at runtime by a custom dropdown (.c-select, built in i18n.js), so the
       opened list matches the site instead of the dated OS-native option
       list. The real <select> stays in the DOM as the value store but is
       visually hidden here. The first-visit popup keeps its own solid
       <select> style (base .locale-select above) - it's a modal control. */
    .locale-nav-picker .locale-select {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      opacity: 0;
      pointer-events: none;
    }

    /* ---- Custom dropdown (replaces the native nav-bar selects) ---- */
    .c-select { position: relative; }
    .c-select-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: transparent;
      border: none;
      padding: 4px 2px;
      font-family: 'Inter Tight', sans-serif;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--text-muted);
      cursor: pointer;
      white-space: nowrap;
      transition: color 0.2s ease;
    }
    .c-select-trigger:hover,
    .c-select.open .c-select-trigger { color: var(--text); }
    .c-select-arrow {
      flex-shrink: 0;
      opacity: 0.75;
      transition: transform 0.25s ease;
    }
    .c-select.open .c-select-arrow { transform: rotate(180deg); }

    /* Desktop: floating panel below the trigger. */
    .c-select-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 100%;
      margin: 0;
      padding: 6px;
      list-style: none;
      background: rgba(18,17,15,0.92);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(245,244,239,0.12);
      border-radius: 12px;
      box-shadow: 0 16px 40px rgba(0,0,0,0.45);
      z-index: 200;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }
    .c-select.open .c-select-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .c-select-option {
      display: block;
      padding: 8px 16px 8px 12px;
      border-radius: 8px;
      font-family: 'Inter Tight', sans-serif;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--text-muted);
      white-space: nowrap;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .c-select-option:hover { background: rgba(245,244,239,0.08); color: var(--text); }
    .c-select-option.is-selected { color: var(--accent); }

    .locale-nav-picker-mobile { margin-bottom: 4px; }
    .locale-nav-picker-mobile .c-select { flex: 1; }
    .locale-nav-picker-mobile .c-select-trigger { width: 100%; justify-content: space-between; }
    /* Mobile: the nav panel scrolls (overflow-y:auto), which would clip an
       absolutely-positioned menu. So inside the mobile panel the menu lives
       in normal flow (static) and just shows/hides - the panel's own scroll
       handles any overflow, so it can never be cut off. */
    /* Mobile: keep dropdown floating, do not let it push nav items */
@media (max-width: 1024px) {
  .locale-nav-picker-mobile {
    position: relative;
    z-index: 300;
  }

  .locale-nav-picker-mobile .c-select {
    position: relative;
    flex: 1;
    min-width: 0;
  }

  .locale-nav-picker-mobile .c-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    max-width: calc(100vw - 48px);
    max-height: 260px;
    overflow-y: auto;

    margin: 0;
    padding: 6px;
    display: block;

    background: rgba(18,17,15,0.96);
    border: 1px solid rgba(245,244,239,0.12);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 500;
  }

  .locale-nav-picker-mobile .c-select.open {
    z-index: 600;
  }

  .locale-nav-picker-mobile .c-select.open .c-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Prevent the second dropdown from overflowing off the right edge */
  .locale-nav-picker-mobile .c-select:nth-child(2) .c-select-menu {
    left: auto;
    right: 0;
  }
}

    /* ===== LOCALE (COUNTRY/LANGUAGE) SELECTION POPUP ===== */
    .locale-popup-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(10,10,10,0.7);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      z-index: 300;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s;
    }
    .locale-popup-backdrop.open { opacity: 1; visibility: visible; }
    .locale-popup {
      position: relative;
      width: 100%;
      max-width: 380px;
      background: #f5f4ef;
      color: var(--text-dark);
      border-radius: 20px;
      padding: 32px 28px 28px;
      transform: scale(0.94) translateY(12px);
      transition: transform 0.3s ease;
      box-shadow: 0 30px 80px rgba(10,10,10,0.4);
    }
    .locale-popup-backdrop.open .locale-popup { transform: scale(1) translateY(0); }
    .locale-popup-title {
      font-family: 'Inter Tight', sans-serif;
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .locale-popup-desc {
      font-size: 0.9rem;
      color: var(--text-dark);
      opacity: 0.7;
      margin-bottom: 20px;
      line-height: 1.5;
    }
    .locale-field-label {
      display: block;
      font-family: 'Inter Tight', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-dark);
      opacity: 0.6;
      margin-bottom: 6px;
    }
    .locale-popup select.locale-select {
      display: block;
      width: 100%;
      background: rgba(10,10,10,0.04);
      border: 1px solid var(--border-light);
      color: var(--text-dark);
      padding: 10px 14px;
      margin-bottom: 16px;
      font-size: 0.9rem;
    }
    .locale-popup-confirm { width: 100%; margin-top: 4px; }
    .locale-popup-note {
      font-size: 0.75rem;
      color: var(--text-dark);
      opacity: 0.55;
      text-align: center;
      margin-top: 14px;
    }

    /* ===== CONTACT FORM POPUP (Enterprise "Contact us") ===== */
    .contact-popup-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(10,10,10,0.6);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      z-index: 300;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      visibility: hidden;
      overflow-y: auto;
      transition: opacity 0.3s ease, visibility 0.3s;
    }
    .contact-popup-backdrop.open { opacity: 1; visibility: visible; }
    .contact-popup {
      position: relative;
      width: 100%;
      max-width: 480px;
      background: #f5f4ef;
      color: var(--text-dark);
      border-radius: 20px;
      padding: 36px 32px 32px;
      margin: auto;
      transform: scale(0.94) translateY(12px);
      transition: transform 0.3s ease;
      box-shadow: 0 30px 80px rgba(10,10,10,0.4);
    }
    .contact-popup-backdrop.open .contact-popup { transform: scale(1) translateY(0); }
    .contact-popup-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: rgba(10,10,10,0.06);
      color: var(--text-dark);
      font-size: 0.8rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease;
    }
    .contact-popup-close:hover { background: rgba(10,10,10,0.12); }
    .contact-popup-title {
      font-family: 'Inter Tight', sans-serif;
      font-size: 1.375rem;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .contact-popup-desc {
      font-size: 0.9rem;
      color: var(--text-dark);
      opacity: 0.7;
      margin-bottom: 24px;
      line-height: 1.5;
    }
    .action-popup-plan {
      display: inline-block;
      background: rgba(227,117,47,0.12);
      border: 1px solid rgba(227,117,47,0.35);
      color: var(--accent);
      font-family: 'Inter Tight', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      padding: 8px 14px;
      border-radius: 8px;
      margin: -8px 0 20px;
    }
    .contact-form { display: flex; flex-direction: column; }
    .contact-form label {
      font-family: 'Inter Tight', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-dark);
      opacity: 0.6;
      margin-bottom: 6px;
    }
    .contact-form input,
    .contact-form textarea {
      width: 100%;
      background: rgba(10,10,10,0.04);
      border: 1px solid var(--border-light);
      border-radius: 10px;
      color: var(--text-dark);
      padding: 10px 14px;
      margin-bottom: 16px;
      font-family: 'Inter', sans-serif;
      font-size: 0.9rem;
      resize: vertical;
    }
    .contact-form input:focus,
    .contact-form textarea:focus {
      outline: none;
      border-color: var(--accent);
    }
    .contact-form-submit { width: 100%; margin-top: 4px; }
    .contact-form-submit:disabled { opacity: 0.6; cursor: not-allowed; }
    .contact-form-status {
      font-size: 0.85rem;
      text-align: center;
      margin-top: 14px;
      min-height: 1.2em;
    }
    .contact-form-status.success { color: #1a8f4c; }
    .contact-form-status.error { color: #d0392b; }

    @media (max-width: 1024px) {
  .mobile-nav {
    overflow: hidden;
  }

  .mobile-nav.open {
    max-height: none;
    overflow: visible;
  }

  .locale-nav-picker-mobile {
    position: relative;
    z-index: 300;
  }

  .locale-nav-picker-mobile .c-select {
    position: relative;
  }

  .locale-nav-picker-mobile .c-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;

    min-width: 100%;
    max-height: 260px;
    overflow-y: auto;

    background: rgba(18,17,15,0.96);
    border: 1px solid rgba(245,244,239,0.12);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;

    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 500;
  }

  .locale-nav-picker-mobile .c-select.open {
    z-index: 600;
  }

  .locale-nav-picker-mobile .c-select.open .c-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .locale-nav-picker-mobile .c-select:nth-child(2) .c-select-menu {
    left: auto;
    right: 0;
  }
}

    /* ============================================================
       ABOUT PAGE (about.html) - built entirely from existing tokens.
       Reuses .section-inner / .section-eyebrow / .section-title /
       .section-desc / .feature-grid / .feature-card / .diff-* / .cta /
       .btn* from the landing page. Only the pieces below are new, and
       they use logical properties so Arabic (dir=rtl) mirrors cleanly.
       ============================================================ */

    /* ---- Hero ---- */
    .about-hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      padding: calc(var(--header-height) + 64px) 24px 80px;
      overflow: hidden;
    }
    .about-hero-inner {
      position: relative;
      z-index: 1;
      max-width: var(--container);
      margin: 0 auto;
      width: 100%;
    }
    .about-hero-title {
      font-family: 'Instrument Serif', serif;
      font-weight: 400;
      font-size: clamp(2.75rem, 6vw, 5.5rem);
      line-height: 1.05;
      margin: 18px 0 28px;
      max-width: 18ch;
    }
    .about-hero-accent { color: var(--accent); display: block; }
    .about-hero-sub {
      font-size: 1.125rem;
      color: var(--text-muted);
      max-width: 640px;
      line-height: 1.7;
      margin-bottom: 40px;
    }

    /* ---- Generic About section rhythm ---- */
    .about-section { padding: clamp(72px, 10vw, 120px) 24px; position: relative; }

    /* ---- Our Story + Built From Technology: two elevated cards ---- */
    .about-split {
      max-width: var(--container);
      margin: 0 auto;
      display: grid;
      /* min(100%, 300px) so a card can shrink below 300px on very narrow
         screens (320px) instead of forcing horizontal overflow. */
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
      gap: 24px;
    }
    .about-split-card {
      background: rgba(245,244,239,0.03);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: clamp(28px, 4vw, 44px);
    }
    .about-card-title {
      font-family: 'Instrument Serif', serif;
      font-weight: 400;
      font-size: clamp(1.75rem, 3vw, 2.5rem);
      line-height: 1.15;
      margin-bottom: 18px;
    }
    .about-card-body { color: var(--text-muted); font-size: 1.05rem; line-height: 1.75; }

    /* ---- Why Work With Us: table-style rows (reason | description) ---- */
    .about-why { margin: 48px 0 0; }
    .about-why-item {
      display: grid;
      grid-template-columns: minmax(220px, 0.28fr) 1fr;
      gap: 56px;
      padding: 26px 0;
      border-top: 1px solid var(--border);
    }
    .about-why-item:last-child { border-bottom: 1px solid var(--border); }
    .about-why-title {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 600;
      font-size: 1.15rem;
      margin: 0;
    }
    .about-why-body { color: var(--text-muted); line-height: 1.65; }

    /* ---- Process: reuse .diff-item/.diff-number as full-width rows ---- */
    .about-process-list {
      margin: 48px 0 0;
      display: flex;
      flex-direction: column;
    }
    .about-process-list .diff-item {
      padding: 28px 0;
      border-top: 1px solid var(--border);
    }

    /* ---- Values: table-like definition list (no cards) ---- */
    .about-values { margin: 48px 0 0; }
    .about-value {
      display: grid;
      grid-template-columns: minmax(220px, 0.28fr) 1fr;
      gap: 56px;
      padding: 26px 0;
      border-top: 1px solid var(--border);
    }
    .about-value:last-child { border-bottom: 1px solid var(--border); }
    .about-value-title {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 600;
      font-size: 1.1rem;
      color: var(--accent);
    }
    .about-value-body { color: var(--text-muted); line-height: 1.65; }

    /* ---- Global Direction timeline: horizontal desktop -> vertical mobile ---- */
    .about-timeline {
      max-width: var(--container);
      margin: 56px auto 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .about-node { position: relative; padding-top: 28px; border-top: 2px solid var(--border); }
    .about-node::before {
      content: "";
      position: absolute;
      top: -7px;
      inset-inline-start: 0;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--accent);
    }
    .about-node-label {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 700;
      font-size: 1.4rem;
      color: var(--text);
      margin-bottom: 8px;
    }
    .about-node-detail { color: var(--text-muted); line-height: 1.55; font-size: 0.95rem; }

    @media (max-width: 720px) {
      .about-timeline { grid-template-columns: 1fr; gap: 0; }
      .about-node {
        border-top: none;
        border-inline-start: 2px solid var(--border);
        padding-top: 0;
        padding-inline-start: 26px;
        padding-bottom: 34px;
      }
      .about-node:last-child { padding-bottom: 0; }
      .about-node::before { top: 2px; inset-inline-start: -7px; }
    }
    @media (max-width: 560px) {
      .about-value, .about-why-item { grid-template-columns: 1fr; gap: 6px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .about-hero, .about-split-card, .about-why-item, .about-value, .about-node {
        transition: none !important;
      }
    }
    


/* ===== EDITORIAL CHAPTER UPDATES FOR OLD THEME ===== */

/* 1. Wrapper to force 01 and 02 to stack vertically */
.about-split {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 120px; /* Adjust this to change the vertical space between 01 and 02 */
}

/* 2. Asymmetric 2-column story splits (Zig-Zag Layout) */
.about-story-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 72px;
  align-items: center; /* Vertically centres the content */
}

/* 3. Meta: Title & Number */
.about-story-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-chapter-num {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(4.5rem, 8vw, 6.5rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent); /* Transparent number with orange stroke */
  user-select: none;
}
.about-card-title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 24px;
}

/* 4. Row 1 (Odd): Meta on Left, Body on Right */
.about-story-row:nth-child(odd) .about-story-meta {
  text-align: left;
  align-items: flex-start;
}
.about-story-row:nth-child(odd) .about-story-body-wrap {
  position: relative;
  padding-left: 56px;
}
.about-story-row:nth-child(odd) .about-story-body-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: -15%;
  bottom: -15%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
}

/* 5. Row 2 (Even): Body on Left, Meta on Right */
.about-story-row:nth-child(even) {
  grid-template-columns: 1.5fr 1fr;
}
.about-story-row:nth-child(even) .about-story-meta {
  order: 2;
  text-align: right;
  align-items: flex-end;
}
.about-story-row:nth-child(even) .about-story-body-wrap {
  order: 1;
  position: relative;
  padding-right: 56px;
  text-align: left;
}
.about-story-row:nth-child(even) .about-story-body-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: -15%;
  bottom: -15%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
}

/* 6. Section 03 — the connected system: a numbered flow of 4 stages.
   Deliberately card-based (vs. the borderless service grid it replaced) and
   distinct from the section-07 timeline, so the page never repeats a layout. */
.about-flow {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.about-flow-step {
  padding: 30px 26px;
  background: rgba(245, 244, 239, 0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.3s ease, transform 0.5s ease;
}
.about-flow-step:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}
.about-flow-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(227,117,47,0.14);
  color: var(--accent);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.about-flow-label {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.about-flow-body { color: var(--text-muted); line-height: 1.6; font-size: 0.97rem; }

/* 7. Mobile Responsiveness */
@media (max-width: 900px) {
  .about-split {
    gap: 64px;
  }
  .about-story-row, .about-story-row:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-story-row:nth-child(odd) .about-story-meta,
  .about-story-row:nth-child(even) .about-story-meta {
    order: 1;
    text-align: left;
    align-items: flex-start;
  }
  .about-story-row:nth-child(odd) .about-story-body-wrap,
  .about-story-row:nth-child(even) .about-story-body-wrap {
    order: 2;
    padding: 0 0 0 28px;
  }
  
  .about-story-row:nth-child(odd) .about-story-body-wrap::before,
  .about-story-row:nth-child(even) .about-story-body-wrap::after {
    display: none;
  }
  .about-story-row .about-story-body-wrap::before {
    display: block !important;
    content: '' !important;
    position: absolute;
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--accent) 20%, var(--accent) 80%, transparent) !important;
  }

  .about-flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .about-flow { grid-template-columns: 1fr; }
}