/* ============================================================================
   KATHIR KREATION — CENTRALIZED HEADER STYLES
   Single source of truth for header/nav/side-menu behaviour across every page.

   Loaded LAST in every page's <head> (injected by tools/sync-header.py), so it
   overrides the generated assets bundles without those bundles being edited.
   Selectors are deliberately scoped one level deeper (e.g.
   `.Header__container .Header__right_controls`) so they beat the bundle's
   `!important` declarations on specificity rather than on source order.
   ========================================================================= */

:root {
  /* Where the floating header pill actually ends, derived from the same values
     section 6 sets on `.Header__container`, so the bar and the space reserved
     for it cannot drift apart:
        top offset 16px
      + padding 14px top + 14px bottom
      + tallest control in the bar (the CTA pill, 48px)
      + 1px border top and bottom                                = 94px  */
  --kk-header-top: 16px;
  --kk-header-pad: 14px;
  --kk-header-control-h: 48px;
  --kk-header-h: calc(
    var(--kk-header-top) + (var(--kk-header-pad) * 2) + var(--kk-header-control-h) + 2px
  );
  --kk-header-gap: 24px;
  /* Pill geometry (section 6), used to align the hamburger to it:
     `width: min(calc(100% - 32px), 1180px)` => 16px inset, 18px inner padding. */
  --kk-header-inset: 16px;
  --kk-header-pad-x: 18px;
  --kk-hamburger-size: 44px;
  /* Sound toggle sits one gap to the left of the hamburger. */
  --kk-hamburger-clearance: calc(var(--kk-hamburger-size) + 10px);
}

@media not screen and (min-width: 769px) {
  :root {
    /* Section 6's mobile block tightens the pill and the CTA is hidden, so the
       44px sound toggle becomes the tallest control: 12 + 24 + 44 + 2 = 82px */
    --kk-header-top: 12px;
    --kk-header-pad: 12px;
    --kk-header-control-h: 44px;
    /* Mobile block tightens it to `width: calc(100% - 24px)`, padding 12px 14px. */
    --kk-header-inset: 12px;
    --kk-header-pad-x: 14px;
  }
}

/* ---------------------------------------------------------------------------
   1. Header controls are available on every breakpoint
   The bundle hides the whole right-hand control cluster below 769px, which
   also removed the only sound control on mobile. Keep the cluster, drop only
   the wide CTA pill that genuinely does not fit.
   ------------------------------------------------------------------------ */
@media not screen and (min-width: 769px) {
  .Header__container .Header__right_controls {
    display: flex !important;
    align-items: center;
    gap: 10px;
    /* Sit clear of the fixed hamburger rather than underneath it. */
    margin-right: var(--kk-hamburger-clearance);
  }

  .Header__container .Header__contact {
    display: none !important;
  }

  .Header__container .SoundToggle__button {
    display: flex !important;
    /* iOS comfortable minimum; well above the 24px WCAG 2.2 target size. */
    width: 44px;
    height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   1b. Brand mark
   The wordmark sizing previously lived only in the homepage's inline <style>,
   so on every other page the <img> collapsed to 0×0 and the header rendered
   with no logo at all. Sizing it here means one rule for all pages.
   ------------------------------------------------------------------------ */
.Header__logo a {
  display: inline-flex;
  align-items: center;
}

.Header__brandLogo {
  display: block;
  width: clamp(148px, 15vw, 228px);
  height: auto;
}

@media not screen and (min-width: 769px) {
  .Header__brandLogo {
    width: clamp(132px, 38vw, 168px);
  }
}

/* ---------------------------------------------------------------------------
   1c. Hamburger alignment
   The button is a child of the full-viewport `.SideMenu__overlay`, so its
   `top/right` were measured against the viewport while the header is a centred
   pill inset from it. Result: the button overhung the pill's inner edge by
   10px — landing on the rounded border — and sat 9px above its centre line.
   Re-anchor it to the pill's own geometry using the same tokens the pill uses,
   so the two stay locked together at every width.
   ------------------------------------------------------------------------ */
.SideMenu__hamburger {
  /* Right edge flush with the pill's padding box. */
  right: calc(var(--kk-header-inset) + var(--kk-header-pad-x)) !important;
  /* Vertically centred within the pill. */
  top: calc(
    var(--kk-header-top) +
      ((var(--kk-header-h) - var(--kk-header-top) - var(--kk-hamburger-size)) / 2)
  ) !important;
}

/* ---------------------------------------------------------------------------
   2. Current-page indication
   Applied by tools/sync-header.py as aria-current="page" on the matching item.
   ------------------------------------------------------------------------ */
.Header__nav [aria-current="page"] > a,
.SideMenu__menu [aria-current="page"] > a {
  opacity: 1;
  color: #fff;
}

.Header__nav [aria-current="page"] > a::after,
.Header__nav [aria-current="page"] > a span::after {
  transform: scaleX(1);
}

.Header__nav [aria-current="page"] > a > span {
  position: relative;
}

.Header__nav [aria-current="page"] > a > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  opacity: 0.9;
}

.SideMenu__menu [aria-current="page"] > a > span {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Dark-on-light sections invert the header colour; keep the marker legible. */
[data-current_section="mission"] .Header__nav [aria-current="page"] > a,
[data-current_section="vision"] .Header__nav [aria-current="page"] > a,
[data-current_section="vision_out"] .Header__nav [aria-current="page"] > a,
[data-current_section="footer"] .Header__nav [aria-current="page"] > a {
  color: #000;
}

/* ---------------------------------------------------------------------------
   2b. Side-menu item visibility
   The root page hid menu items via `[data-nav-hidden]` in its own inline
   <style>, so the same markup rendered a different list there than on every
   other page. The rule lives here now: one attribute, one behaviour, site-wide.
   ------------------------------------------------------------------------ */
.SideMenu__menu_item[data-nav-hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   3. Keyboard focus
   The bundle relies on hover states only; restore a visible focus ring for
   keyboard users without showing it on mouse clicks.
   ------------------------------------------------------------------------ */
.Header__container a:focus-visible,
.Header__container button:focus-visible,
.SideMenu__menu a:focus-visible,
.SideMenu__hamburger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   4. Fixed-header clearance for inner pages
   `.Header__container` is `position: fixed`, so page content that starts at
   y=0 renders underneath it. Reserve exactly the header's height plus a gap.
   The homepage is deliberately excluded: its 3D hero is meant to run full
   bleed behind the header.
   ------------------------------------------------------------------------ */
.PageWorks__head,
.PageWorksDetail__head,
.PageAbout__head,
.PageContact__head,
.PageNews__head,
.PageLicense__head,
.PagePrivacyPolicy__container {
  padding-top: calc(var(--kk-header-h) + var(--kk-header-gap));
}

/* ---------------------------------------------------------------------------
   5. Motion preferences
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .Header__container,
  .Header__container *,
  .SideMenu__menu,
  .SideMenu__menu * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ---------------------------------------------------------------------------
   6. Root-page header system  — applied to EVERY page
   These 33 rules previously lived in index.html's inline <style>, so the
   homepage got a floating glass pill header with a 44px circular hamburger
   while every other page fell back to the bundle's bare 40px/50px bar with a
   30px hamburger. Moved here verbatim: one header design, all pages.
   ------------------------------------------------------------------------ */

.Header__container {
        top: 16px !important;
        left: 50% !important;
        width: min(calc(100% - 32px), 1180px) !important;
        transform: translateX(-50%) !important;
        padding: 14px 18px !important;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: #fff !important;
        overflow: visible !important;
        transition:
          background-color 0.35s ease,
          border-color 0.35s ease,
          box-shadow 0.35s ease,
          backdrop-filter 0.35s ease,
          -webkit-backdrop-filter 0.35s ease !important;
      }

.Header__container.Header__container--scrolled {
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(8, 8, 8, 0.48);
        box-shadow: 0 18px 70px rgba(0, 0, 0, 0.28);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        backdrop-filter: blur(18px) saturate(150%);
      }

.Header__logo,
      .PremiumNav__item,
      .Header__right_controls {
        pointer-events: auto;
      }

.Header__nav {
        gap: clamp(24px, 4vw, 52px) !important;
        font-family: Google Sans Code, IBM Plex Mono, monospace !important;
        font-size: 12px !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase;
      }

.PremiumNav__item a {
        position: relative;
        display: inline-flex;
        padding: 8px 0;
        color: rgba(255, 255, 255, 0.88) !important;
        transition: color 0.25s ease, opacity 0.25s ease !important;
      }

.PremiumNav__item a:hover {
        color: #fff !important;
        opacity: 1 !important;
      }

.PremiumNav__item a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2px;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
      }

.PremiumNav__item a:hover::after {
        transform: scaleX(1);
        transform-origin: left;
      }

.Header__contact {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 0 18px !important;
        border: 1px solid rgba(255, 255, 255, 0.34) !important;
        background: rgba(255, 255, 255, 0.08);
        color: #fff !important;
        font-family: Google Sans Code, IBM Plex Mono, monospace !important;
        font-size: 11px !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
      }

.Header__contact:hover {
        background: #fff !important;
        color: #000 !important;
        border-color: #fff !important;
      }

.Header__contact .SlotButton__text_hover {
        color: #000 !important;
      }

.SideMenu__menu_item[data-active="true"] {
        padding-left: 30px !important;
      }

.SideMenu__menu_item[data-active="true"]::before {
        width: 10px !important;
        background-color: rgba(255, 255, 255, 0.5) !important;
      }

.SideMenu__overlay {
        z-index: 10000 !important;
      }

.SideMenu__backdrop {
        background: rgba(0, 0, 0, 0.62) !important;
        -webkit-backdrop-filter: blur(22px) saturate(140%);
        backdrop-filter: blur(22px) saturate(140%);
      }

.SideMenu__menu {
        width: 100% !important;
        border-left: 0 !important;
        background: rgba(3, 3, 3, 0.62) !important;
        -webkit-backdrop-filter: blur(26px) saturate(150%) !important;
        backdrop-filter: blur(26px) saturate(150%) !important;
      }

.SideMenu__menu_inner {
        align-items: center;
        gap: clamp(16px, 4vh, 34px) !important;
        padding: 0 24px !important;
      }

.SideMenu__menu_item {
        padding-left: 0 !important;
      }

.SideMenu__menu_item::before {
        display: none !important;
      }

.SideMenu__menu_item a {
        position: relative;
        padding: 8px 0 !important;
        border: 0 !important;
        font-family: Google Sans Code, IBM Plex Mono, monospace !important;
        font-size: clamp(28px, 8vw, 58px) !important;
        font-weight: 400 !important;
        letter-spacing: 0.08em !important;
        line-height: 1 !important;
        text-transform: uppercase;
        opacity: 0.92 !important;
      }

.SideMenu__menu_item a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
      }

.SideMenu__menu_item a:hover::after {
        transform: scaleX(1);
        transform-origin: left;
      }

.HamburgerIcon__hamburger {
        width: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06) !important;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
      }

/* superseded by section 1c, which anchors the button to the pill instead of
   the viewport — the original `top: 16px; right: 16px` left it overhanging
   the pill's rounded edge and above its centre line. */

@media not screen and (min-width: 769px) {
  .Header__container {
          top: 12px !important;
          width: calc(100% - 24px) !important;
          padding: 12px 14px !important;
        }
}

.SlotButton__button {
        position: relative;
        display: inline-block;
        color: inherit;
        text-decoration: none;
        overflow: hidden;
        transition:
          background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

.SlotButton__button:hover .SlotButton__text_wrapper {
        transform: translateY(-100%);
      }

.SlotButton__button:hover .SlotButton__text_hover {
        opacity: 1;
      }

.SlotButton__button:hover .SlotButton__text {
        opacity: 0;
      }

.SlotButton__text_wrapper {
        position: relative;
        display: block;
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

.SlotButton__text {
        display: block;
        color: inherit;
        transition:
          color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

.SlotButton__text_hover {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        display: block;
        color: #000;
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

/* ---------------------------------------------------------------------------
   7. Top-page outro lockup
   The template's outro was a solid "A" mark (DOM svg) plus the letters LCHE
   drawn by the Lottie. The letter layers are now transparent in
   top/outro/data.json, and the mark has been replaced by the Kathir lockup —
   star + two-line wordmark — so the section resolves on the brand instead of
   ALCHE. The lockup is much wider than a single letter, so it stays centred:
   the script tweens `left` to 17.1% inline, which a stylesheet !important
   overrides.
   ------------------------------------------------------------------------ */
.TopPageOutro__logo {
  width: 58% !important;
  left: 50% !important;
}

@media not screen and (min-width: 769px) {
  .TopPageOutro__logo {
    width: 74% !important;
  }
}


/* ---------- Site-wide additions (kathir-site.js) ---------- */
.kk-wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px 0 16px;
  border: 1px solid rgba(255, 150, 40, 0.6); /* orange rim */
  border-radius: 26px;
  background: linear-gradient(180deg, #ffb15c 0%, #ff9628 100%); /* orange */
  color: #fff;
  font: 700 14px/1 acumin-pro, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.kk-wa-float::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid rgba(255, 150, 40, 0.6);
  animation: kk-wa-pulse 2.8s ease-out infinite;
  pointer-events: none;
}
.kk-wa-float:hover { transform: translateY(-2px); background: #ffc27a; border-color: #ffc27a; color: #1a0e00; }
.kk-wa-float:focus-visible { outline: 3px solid #ff9628; outline-offset: 3px; }
.kk-wa-float svg { width: 24px; height: 24px; flex: none; }
@keyframes kk-wa-pulse { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(1.18, 1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kk-wa-float::after { animation: none; display: none; } .kk-wa-float { transition: none; } }
@media not screen and (min-width: 769px) {
  .kk-wa-float { right: 12px; bottom: 12px; height: 48px; width: 48px; padding: 0; justify-content: center; border-radius: 50%; }
  .kk-wa-float span { display: none; }
}
.kk-wa-float[hidden] { display: none; }

/* Home: the old Mission/Vision scenes (white 3D backdrop + overlay text) are
   replaced by the .kk-studio section below. */
[data-top_section="mission"],
[data-top_section="vision"] { height: 0 !important; min-height: 0 !important; overflow: hidden; visibility: hidden; pointer-events: none; }
.MissionVision__container { display: none !important; }

/* The template flashes a white 3D scene while leaving Vision; keep it dark. */
[data-top_section="works_outro"],
[data-top_section="mission_in"],
[data-top_section="vision_out"],
[data-top_section="service_in"] { position: relative; z-index: 2; }
[data-top_section="works_outro"] { background: linear-gradient(to bottom, transparent 0, transparent 30%, #05060d 70%); }
[data-top_section="mission_in"] { background: #05060d; height: 0 !important; min-height: 0 !important; }
/* vision_out is a leftover transition spacer from the old 3D "Vision" scene
   (template sets its inner .PageTop__visionOut to 150lvh). The Vision text it
   used to pace is already hidden (see the mission/vision rule above), and
   nothing else reads its scroll-trigger range, so collapse it fully like
   mission_in — this was the giant empty black block reported on 2026-10-15. */
[data-top_section="vision_out"] { background: #05060d; height: 0 !important; min-height: 0 !important; overflow: hidden; }
[data-top_section="vision_out"] .PageTop__visionOut { height: 0 !important; }
/* service_in DOES drive a real animation (ServiceItemController fades the
   Services section in using this trigger's scroll range), so give it a short
   but non-zero height instead of collapsing it like vision_out/mission_in.
   Below it, the raw 3D canvas can flash very bright for a frame as it spins
   up the Services scene — service_in previously held flat black then cut
   straight to transparent at 35%, so visitors hit a hard dark-to-bright seam
   exactly where it met the (unstyled) service container — reported
   2026-10-16 ("transition not good"). Fixed two ways: the fade is now one
   continuous ramp with no flat hold-then-drop kink, AND it continues a
   little further into the service container itself via the ::before below,
   so the two pieces read as one smooth fade instead of two mismatched ones. */
[data-top_section="service_in"] { min-height: 22lvh; height: 22lvh; background: linear-gradient(to bottom, #05060d 0%, transparent 100%); }
[data-top_section="service"] { position: relative; }
[data-top_section="service"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 42vh;
  background: linear-gradient(to bottom, rgba(5, 6, 13, 0.82) 0%, rgba(5, 6, 13, 0) 100%);
  pointer-events: none;
}
/* Belt-and-braces: the Services section's own title/description text relies
   on the 3D canvas being dark behind it (the template only gave it a single
   faint text-shadow), so a bright frame of the scene made it unreadable
   regardless of the overlay above. A stronger multi-layer black halo keeps
   it legible no matter what the canvas is doing underneath. */
.Service__item_title, .Service__item_description, .Service__item_description_en {
  text-shadow: 0 1px 2px #000, 0 2px 10px #000, 0 4px 24px rgba(0, 0, 0, 0.9);
}

.kk-studio {
  position: relative;
  z-index: 2;
  padding: 160px 0 0;
  background: #05060d;
  color: #f3f4f8;
  font-family: acumin-pro, "Helvetica Neue", Arial, sans-serif;
}
.kk-studio__inner { width: min(1200px, 88%); margin: 0 auto; padding-bottom: 120px; }
.kk-eyebrow { margin: 0 0 20px; color: #ff9628; font: 600 13px/1 acumin-pro, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; }
.kk-studio__title { margin: 0; max-width: 18ch; font-size: clamp(38px, 6.2vw, 92px); font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.kk-studio__title em { font-style: normal; color: #ff9628; }
.kk-studio__title--sm { max-width: 22ch; font-size: clamp(30px, 4.2vw, 60px); }
.kk-studio__lead { max-width: 58ch; margin: 36px 0 0; color: #c9ccd8; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.65; }
.kk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 72px 0 140px; border-top: 1px solid rgba(255,255,255,.18); }
.kk-stats div { padding: 28px 24px 8px 0; }
.kk-stats div + div { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.12); }
.kk-stats dt { font-size: clamp(30px, 3.6vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
.kk-stats dd { margin: 10px 0 0; color: #aeb2c2; font-size: 15px; line-height: 1.5; }
.kk-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 64px 0 0; padding: 0; list-style: none; counter-reset: none; }
.kk-steps li { padding: 24px 20px 8px 0; border-top: 1px solid rgba(255,255,255,.18); }
.kk-steps li + li { padding-left: 20px; }
.kk-steps span { display: block; margin-bottom: 18px; color: #ff9628; font: 600 13px/1 "Google Sans Code", monospace; letter-spacing: 0.1em; }
.kk-steps h3 { margin: 0 0 10px; font-size: 22px; font-weight: 600; line-height: 1.2; }
.kk-steps p { margin: 0; color: #aeb2c2; font-size: 15px; line-height: 1.6; }
.kk-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 80px; }
.kk-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; color: #fff; font: 600 15px/1 acumin-pro, sans-serif; letter-spacing: 0.04em; text-decoration: none; transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.kk-btn:hover { background: #fff; color: #05060d; transform: translateY(-2px); }
.kk-btn--solid { background: #ff9628; border-color: #ff9628; color: #1a0e00; }
.kk-btn--solid:hover { background: #ffb15c; border-color: #ffb15c; color: #1a0e00; }
.kk-btn:focus-visible, .kk-wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.kk-marquee { overflow: hidden; padding: 36px 0 90px; border-top: 1px solid rgba(255,255,255,.12); }
.kk-marquee__track { display: flex; width: max-content; animation: kk-marquee 55s linear infinite; }
.kk-marquee:hover .kk-marquee__track { animation-play-state: paused; }
.kk-marquee__row { display: flex; flex: none; }
.kk-marquee__row span { padding: 0 36px; color: #9da1b3; font-size: clamp(20px, 2.4vw, 34px); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.kk-marquee__row span::after { content: "·"; margin-left: 72px; color: #ff9628; }
@keyframes kk-marquee { to { transform: translateX(-50%); } }

.kk-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.kk-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kk-reveal { opacity: 1; transform: none; transition: none; }
  .kk-marquee__track { animation: none; }
}
@media not screen and (min-width: 1000px) {
  .kk-stats { grid-template-columns: repeat(2, 1fr); margin-bottom: 100px; }
  .kk-stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .kk-steps { grid-template-columns: 1fr 1fr; }
  .kk-steps li:nth-child(odd) { padding-left: 0; }
}
@media not screen and (min-width: 769px) {
  .kk-studio { padding-top: 110px; }
  .kk-studio__inner { width: calc(100% - 40px); padding-bottom: 80px; }
  .kk-steps { grid-template-columns: 1fr; }
  .kk-steps li, .kk-steps li + li { padding-left: 0; }
  .kk-cta { margin-top: 56px; }
  .kk-btn { width: 100%; justify-content: center; }
}

/* Contact: quick brief buttons */
.kk-brief { margin-top: 56px; }
.kk-brief__title { font: 400 14px/1.6 "Google Sans Code", monospace; color: #888; margin-bottom: 18px; }
.kk-brief__grid { display: flex; flex-wrap: wrap; gap: 10px; }
.kk-brief__chip {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  color: #fff;
  font: 500 15px/1 acumin-pro, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.kk-brief__chip:hover { background: #fff; color: #000; }
.kk-facts { margin-top: 72px; display: grid; gap: 0; max-width: 520px; }
.kk-facts div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.2); font: 400 14px/1.6 "Google Sans Code", monospace; letter-spacing: 0; }
.kk-facts div:last-child { border-bottom: 1px solid rgba(255,255,255,.2); }
.kk-facts dt { color: #888; }
.kk-facts a { color: #fff; }

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


/* ---------- Footer (.kf) ---------- */
.Footer__footer.kf {
  position: relative !important;
  opacity: 1 !important; /* template fades it in via [data-phase=ready], which is not always set */
  z-index: 3;
  padding: 0;
  background: #05060d;
  color: #f3f4f8;
  font-family: acumin-pro, "Helvetica Neue", Arial, sans-serif;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.kf a { color: inherit; text-decoration: none; }
.kf a:focus-visible { outline: 3px solid #ff9628; outline-offset: 3px; border-radius: 4px; }
.kf ul { list-style: none; margin: 0; padding: 0; }
.kf__inner { width: min(1240px, 90%); margin: 0 auto; padding: 96px 0 32px; }

.kf__cta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 72px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.kf__eyebrow { margin: 0 0 16px; color: #ff9628; font: 600 13px/1 acumin-pro, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; }
.kf__cta-title { margin: 0; max-width: 20ch; font-size: clamp(32px, 4.6vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
.kf__cta-text { margin: 20px 0 0; max-width: 46ch; color: #b2b6c6; font-size: 17px; line-height: 1.6; }
.kf__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kf-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 1px solid #ff9628; border-radius: 999px; background: #ff9628; color: #1a0e00 !important; font: 700 15px/1 acumin-pro, sans-serif; letter-spacing: 0.03em; transition: background-color .2s ease, transform .2s ease, color .2s ease; }
.kf-btn:hover { background: #ffb15c; border-color: #ffb15c; transform: translateY(-2px); }
.kf-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: #fff !important; }
.kf-btn--ghost:hover { background: #fff; border-color: #fff; color: #05060d !important; }

.kf__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding: 64px 0; }
.kf__logo { display: block; width: 190px; height: auto; margin-bottom: 20px; }
.kf__about { margin: 0; max-width: 38ch; color: #b2b6c6; font-size: 15px; line-height: 1.65; }
.kf__address { margin: 20px 0 0; color: #f3f4f8; font-style: normal; font-size: 15px; line-height: 1.6; }
.kf__h { margin: 0 0 18px; color: #9da1b3; font: 600 12px/1 acumin-pro, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; }
.kf__col li + li { margin-top: 4px; }
.kf__col a { display: inline-block; padding: 8px 0; min-height: 44px; color: #f3f4f8; font-size: 16px; line-height: 1.5; transition: color .2s ease, transform .2s ease; }
.kf__col a:hover { color: #ff9628; transform: translateX(3px); }

.kf__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #9da1b3; font-size: 14px; }
.kf__legal p { margin: 0; }
.kf__legal ul { display: flex; gap: 8px 24px; flex-wrap: wrap; }
.kf__legal a { display: inline-block; padding: 10px 0; color: #b2b6c6; transition: color .2s ease; }
.kf__legal a:hover { color: #fff; }

@media not screen and (min-width: 1000px) {
  .kf__grid { grid-template-columns: 1fr 1fr; }
  .kf__brand { grid-column: 1 / -1; }
}
@media not screen and (min-width: 769px) {
  .kf__inner { width: calc(100% - 40px); padding: 64px 0 24px; }
  .kf__cta { padding-bottom: 48px; }
  .kf__cta-actions { width: 100%; }
  .kf-btn { width: 100%; justify-content: center; }
  .kf__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 48px 0; }
  .kf__legal { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .kf-btn, .kf__col a { transition: none; } }


/* ---------- How we work: scroll-scrubbed video ---------- */
.kk-studio--end { padding-top: 120px; }
.kk-studio--end .kk-studio__inner { padding-bottom: 90px; }
.kk-studio--end .kk-cta { margin-top: 0; }
.kk-story { position: relative; z-index: 2; height: calc(100svh * 5); background: #05060d; color: #f3f4f8; font-family: acumin-pro, "Helvetica Neue", Arial, sans-serif; }
.kk-story__stick { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.kk-story__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #05060d; }
.kk-story__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(5,6,13,.92) 0%, rgba(5,6,13,.55) 32%, rgba(5,6,13,0) 55%),
              linear-gradient(to bottom, rgba(5,6,13,.8) 0%, rgba(5,6,13,0) 34%); }
.kk-story__head { position: absolute; top: 132px; left: max(5vw, 24px); right: 5vw; }
.kk-story__title { margin: 0; max-width: 20ch; font-size: clamp(28px, 4vw, 58px); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.kk-story__rail { position: absolute; right: max(5vw, 24px); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; text-align: right; }
.kk-story__rail li { color: rgba(255,255,255,.55); font-size: 14px; letter-spacing: .06em; transition: color .3s ease, transform .3s ease; }
.kk-story__rail li span { display: inline-block; margin-right: 8px; font: 600 12px/1 "Google Sans Code", monospace; color: rgba(255,255,255,.4); }
.kk-story__rail li.is-done { color: rgba(255,255,255,.8); }
.kk-story__rail li.is-on { color: #fff; transform: translateX(-6px); font-weight: 700; }
.kk-story__rail li.is-on span { color: #ff9628; }
.kk-story__caps { position: absolute; left: max(5vw, 24px); bottom: 9vh; width: min(560px, 90vw); min-height: 190px; }
.kk-story__cap { position: absolute; left: 0; bottom: 0; opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.kk-story__cap.is-on { opacity: 1; transform: none; }
.kk-story__num { display: block; margin-bottom: 10px; color: #ff9628; font: 600 15px/1 "Google Sans Code", monospace; letter-spacing: .2em; }
.kk-story__cap h3 { margin: 0 0 12px; font-size: clamp(34px, 4.6vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.kk-story__cap p { margin: 0; max-width: 40ch; color: #d6d9e4; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; }
.kk-story__hint { position: absolute; right: max(5vw, 24px); bottom: 9vh; margin: 0; color: rgba(255,255,255,.5); font: 600 12px/1 acumin-pro, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.kk-story__hint::after { content: ""; display: block; width: 1px; height: 40px; margin: 12px auto 0; background: linear-gradient(#fff, transparent); }

/* Reduced motion / no scrub: a plain stacked layout */
.kk-story[data-static] { height: auto; }
.kk-story[data-static] .kk-story__stick { position: static; height: auto; padding: 120px 0 80px; overflow: visible; }
.kk-story[data-static] .kk-story__video { position: static; height: 56vw; max-height: 70vh; margin-top: 130px; }
.kk-story[data-static] .kk-story__shade, .kk-story[data-static] .kk-story__rail, .kk-story[data-static] .kk-story__hint { display: none; }
.kk-story[data-static] .kk-story__head { position: absolute; top: 120px; }
.kk-story[data-static] .kk-story__caps { position: static; width: min(1000px, 90%); margin: 32px auto 0; min-height: 0; display: grid; gap: 28px; }
.kk-story[data-static] .kk-story__cap { position: static; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .kk-story__cap, .kk-story__rail li { transition: none; } }

@media not screen and (min-width: 769px) {
  .kk-story { height: calc(100svh * 2.2); } /* short scroll track on phones: fewer frames to scrub, faster rendering */
  /* The source video is 16:9 landscape. On a tall phone, object-fit:cover
     scales it up until it fills the portrait screen, which crops away most
     of the left/right of every frame — a wide establishing shot (the table,
     the film set, the skyline) became an unreadable zoomed-in fragment.
     object-fit:contain shows the whole frame instead, letterboxed in the
     video's own dark background so the bars read as part of the design. */
  .kk-story__video { object-fit: contain; }
  .kk-story__head { top: 108px; right: 24px; }
  .kk-story__rail { top: auto; bottom: 3.5vh; left: 24px; right: 24px; transform: none; display: flex; justify-content: space-between; gap: 6px; text-align: center; }
  .kk-story__rail li { flex: 1; font-size: 0; }
  .kk-story__rail li span { margin: 0; font-size: 12px; padding: 8px 0; display: block; border-top: 2px solid rgba(255,255,255,.25); }
  .kk-story__rail li.is-on span, .kk-story__rail li.is-done span { border-top-color: #ff9628; }
  .kk-story__rail li.is-on { transform: none; }
  .kk-story__caps { bottom: 11vh; left: 24px; width: calc(100% - 48px); }
  .kk-story__hint { display: none; }
}

/* While the opaque story section fills the screen the 3D canvas behind it is invisible; stop painting it. */
body.kk-story-on .Layout__gl, body.kk-story-on .Layout__gl_inner, body.kk-story-on .GLCanvas__container { visibility: hidden; }


/* ---------- Hero 3D scene: retint from the template's blue to brand orange ----------
   The renderer is one shared canvas (#gl-canvas) reused for the Works and
   Services sections too, where it textures real video footage onto 3D
   planes — a global retint would discolour that footage. So the hue-rotate
   is scoped to body[data-current_section="kv"], the opening scene only, via
   the data-current_section attribute the template's scroll manager already
   sets. A soft orange glow overlay (screen-blended, pointer-events: none) is
   layered on top for the "orange shadow" ambient light the brand needs. */
body[data-current_section="kv"] #gl-canvas canvas {
  /* sepia first collapses every hue toward one warm brown base, THEN
     hue-rotate nudges that base to brand orange — a plain hue-rotate alone
     flips any pixel that was already warm (the logo's metal highlights) to
     its cold complementary colour (cyan), which looked wrong on the chrome. */
  filter: sepia(0.82) saturate(1.75) hue-rotate(-8deg) brightness(1.05) contrast(1.03);
}
.KV__container::before {
  content: "";
  position: absolute;
  inset: -10% -10% -10% -10%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 22% 30%, rgba(255, 150, 40, 0.5) 0%, rgba(255, 150, 40, 0) 70%),
    radial-gradient(55% 60% at 80% 75%, rgba(255, 150, 40, 0.32) 0%, rgba(255, 150, 40, 0) 72%);
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce), (prefers-contrast: more) {
  body[data-current_section="kv"] #gl-canvas canvas { filter: none; }
  .KV__container::before { display: none; }
}

/* ---------- Home hero copy (over the 3D opening scene) ----------
   The 3D "KATHIR KREATION" wordmark sits at the vertical centre of the scene, so the
   copy is split around it: headline above, pitch and buttons below. */
.KV__inner::before, .KV__inner::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.KV__inner::before { top: 0; height: 46%; background: linear-gradient(to bottom, rgba(5,6,13,.82) 0%, rgba(5,6,13,.45) 55%, rgba(5,6,13,0) 100%); }
.KV__inner::after { bottom: 0; height: 48%; background: linear-gradient(to top, rgba(5,6,13,.92) 0%, rgba(5,6,13,.55) 50%, rgba(5,6,13,0) 100%); }
.kk-hero { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(112px, 16vh, 150px) max(5vw, 24px) 9vh; color: #f3f4f8; font-family: acumin-pro, "Helvetica Neue", Arial, sans-serif; pointer-events: none; }
.kk-hero a, .kk-hero button { pointer-events: auto; }
.kk-hero__top, .kk-hero__bottom { max-width: 780px; }
.kk-hero__eyebrow { margin: 0 0 16px; color: #ff9628; font: 600 13px/1.4 acumin-pro, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.kk-hero__title { margin: 0; font-size: clamp(34px, min(5vw, 8.5vh), 76px); font-weight: 700; line-height: 1; letter-spacing: -0.015em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.kk-hero__title em { font-style: normal; color: #ff9628; }
.kk-hero__lead { margin: 0; max-width: 54ch; color: #d6d9e4; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; text-shadow: 0 1px 16px rgba(0,0,0,.6); }
.kk-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.kk-hero__trust { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 26px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.2); color: #b2b6c6; font-size: 15px; }
.kk-hero__trust strong { color: #fff; font-weight: 700; margin-right: 4px; }
.kk-hero__top > *, .kk-hero__bottom > * { opacity: 0; transform: translateY(18px); }
body[data-gl_loading_end="true"] .kk-hero__top > *, body[data-gl_loading_end="true"] .kk-hero__bottom > * { animation: kk-hero-in .9s cubic-bezier(.2,.7,.2,1) forwards; }
body[data-gl_loading_end="true"] .kk-hero__title { animation-delay: .12s; }
body[data-gl_loading_end="true"] .kk-hero__lead { animation-delay: .26s; }
body[data-gl_loading_end="true"] .kk-hero__actions { animation-delay: .38s; }
body[data-gl_loading_end="true"] .kk-hero__trust { animation-delay: .5s; }
@keyframes kk-hero-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kk-hero__top > *, .kk-hero__bottom > * { opacity: 1; transform: none; animation: none !important; } }
/* Short laptop screens: drop the paragraph so nothing touches the wordmark. */
@media (max-height: 700px) and (min-width: 769px) { .kk-hero__lead { display: none; } .kk-hero__actions { margin-top: 0; } }
@media not screen and (min-width: 769px) {
  /* Phones: everything sits together below the wordmark. */
  .kk-hero { justify-content: flex-end; padding-bottom: 8vh; }
  .KV__inner::before { display: none; }
  .KV__inner::after { height: 62%; }
  .kk-hero__eyebrow { margin-bottom: 12px; font-size: 11px; letter-spacing: .16em; }
  .kk-hero__title { font-size: clamp(32px, 9.4vw, 44px); }
  .kk-hero__lead { display: none; }
  .kk-hero__actions { flex-wrap: nowrap; gap: 10px; margin-top: 22px; }
  .kk-hero__actions .kk-btn { flex: 1 1 0; width: auto; min-height: 50px; padding: 0 10px; justify-content: center; font-size: 14px; white-space: nowrap; }
  .kk-hero__trust { margin-top: 22px; padding-top: 14px; font-size: 14px; gap: 6px 18px; }
  .KV__scrollText { display: none !important; }
}

/* ---------- Proof ("The record") ---------- */
.kk-proof { padding-top: 140px; }
.kk-proof .kk-studio__inner { padding-bottom: 40px; }
.kk-proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 64px 0 0; padding: 0; list-style: none; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; overflow: hidden; }
.kk-proof__card { padding: 36px 30px 40px; background: #05060d; transition: background-color .3s ease; }
.kk-proof__card:hover { background: #0c0e1a; }
.kk-proof__label { margin: 0 0 22px; color: #ff9628; font: 600 12px/1 acumin-pro, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.kk-proof__card h3 { margin: 0 0 14px; font-size: clamp(22px, 2vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -0.005em; text-wrap: balance; }
.kk-proof__card p:last-child { margin: 0; color: #b2b6c6; font-size: 16px; line-height: 1.6; }
@media not screen and (min-width: 1000px) { .kk-proof__grid { grid-template-columns: repeat(2, 1fr); } }
@media not screen and (min-width: 769px) { .kk-proof { padding-top: 96px; } .kk-proof__grid { grid-template-columns: 1fr; } .kk-proof__card { padding: 28px 22px 30px; } }

/* ---------- Home: auto-scrolling tour (kathir-autoscroll.js) ----------
   Trigger lives inline in the hero as a tertiary link (not a third button
   competing with Start a project / See our work). Hidden entirely for
   prefers-reduced-motion (the script removes the trigger rather than this
   CSS, so it's never rendered — not just visually hidden — for those
   visitors).

   The control bar it opens is created at runtime and docks top-center,
   under the header pill. It originally sat bottom-left, which on mobile
   collided with the "How we work" section's own 01–05 step rail (also
   bottom-anchored) — reported 2026-10-18, visible in the screenshot as the
   bar sitting directly on top of "04/05". Top placement can never collide
   with that rail (bottom) or the WhatsApp button (bottom-right). It's also
   smaller than the first version and fades to a low-opacity "idle" pill
   after ~2.5s of no interaction while playing, restoring on hover/touch —
   so it stops competing with page content once the visitor is just
   watching, without ever fully disappearing (it's still the only way to
   pause/exit, so WCAG 2.2.2 still requires it stay reachable). */
.kk-tour-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #d6d9e4;
  font: 600 14px/1 acumin-pro, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.kk-tour-trigger:hover { color: #fff; text-decoration-color: #ff9628; }
.kk-tour-trigger:focus-visible { outline: 3px solid #ff9628; outline-offset: 4px; border-radius: 4px; }
.kk-tour-trigger[hidden] { display: none; }
.kk-tour-trigger__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.kk-tour-trigger__icon svg { width: 9px; height: 11px; }

.kk-tour-bar {
  position: fixed;
  left: 50%;
  top: max(14px, env(safe-area-inset-top, 0px));
  transform: translateX(-50%) translateY(104px); /* parks clearly under the header pill, not flush against it */
  z-index: 850; /* below the header (which the template keeps on top) */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(8, 10, 20, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  color: #fff;
  font: 600 12px/1 acumin-pro, "Helvetica Neue", Arial, sans-serif;
  opacity: 1;
  transition: opacity 0.6s ease, transform 0.3s ease;
}
.kk-tour-bar[hidden] { display: none; }
/* Idle dim: still fully in the DOM and reachable by keyboard/tap, just
   visually quiet. Never fully invisible (opacity floor of .32). */
.kk-tour-bar.is-idle { opacity: 0.32; }
.kk-tour-bar.is-idle:hover, .kk-tour-bar.is-idle:focus-within { opacity: 1; }
.kk-tour-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #ff9628;
  color: #1a0e00;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.kk-tour-bar__btn:hover { background: #ffb15c; }
.kk-tour-bar__btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; font-weight: 600; }
.kk-tour-bar__btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.kk-tour-bar__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.kk-tour-bar__btn svg { width: 11px; height: 11px; display: block; flex: none; }
.kk-tour-bar__track { width: 60px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.kk-tour-bar__fill { height: 100%; width: 0%; background: #ff9628; border-radius: inherit; }
@media not screen and (min-width: 769px) {
  .kk-tour-trigger { font-size: 13px; }
  .kk-tour-bar { transform: translateX(-50%) translateY(90px); padding: 4px 8px 4px 4px; gap: 8px; }
  .kk-tour-bar__track { display: none; }
  .kk-tour-bar__btn { height: 32px; padding: 0 10px; }
  .kk-tour-bar__btn--ghost span { display: none; } /* icon/short label only — keeps the pill narrow enough not to crowd the header on small screens */
}

/* ---------- Home: the 3-second tour invite ----------
   A small, dismissible card — not a full-screen takeover — offering the
   tour once, a few seconds after the visitor lands, in case they never
   notice the quieter hero link. Shown once per browser session
   (sessionStorage), never if reduced motion is set, and never if the
   visitor already started the tour some other way before it would fire. */
.kk-tour-promo {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 940;
  width: min(320px, calc(100vw - 40px));
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 16px 16px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid #ff9628;
  border-radius: 14px;
  background: rgba(8, 10, 20, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
  color: #f3f4f8;
  font-family: acumin-pro, "Helvetica Neue", Arial, sans-serif;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.kk-tour-promo.is-in { opacity: 1; transform: none; }
.kk-tour-promo[hidden] { display: none; }
.kk-tour-promo__body { flex: 1; min-width: 0; }
.kk-tour-promo__title { margin: 0 0 4px; font-size: 14px; font-weight: 700; line-height: 1.3; }
.kk-tour-promo__text { margin: 0 0 12px; color: #b2b6c6; font-size: 13px; line-height: 1.5; }
.kk-tour-promo__cta {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border: 0; border-radius: 999px; background: #ff9628; color: #1a0e00;
  font: 700 13px/1 acumin-pro, sans-serif; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease;
}
.kk-tour-promo__cta:hover { background: #ffb15c; }
/* The inline play-icon SVG has no width/height attribute, so without this it
   falls back to the browser's default replaced-element size (300×150) —
   that's what was blowing the button up and wrapping "Take the tour" onto
   three lines (reported 2026-10-18). .kk-tour-bar__btn's icons were sized;
   this one was missed. */
.kk-tour-promo__cta svg { width: 10px; height: 12px; flex: none; }
.kk-tour-promo__cta:focus-visible, .kk-tour-promo__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.kk-tour-promo__close {
  flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #9da1b3; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.kk-tour-promo__close:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.kk-tour-promo__close svg { width: 10px; height: 10px; }
@media not screen and (min-width: 769px) {
  .kk-tour-promo { left: 12px; right: 12px; bottom: 92px; width: auto; padding: 14px 14px 14px 12px; } /* clears the WhatsApp button and the hero's own bottom-anchored content on short screens */
  .kk-tour-promo__text { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .kk-tour-bar { transition: none; }
  .kk-tour-promo { transition: none; }
}

/* The works_intro section's own content (.PageTop__worksIntro) is only
   20vh tall, but the bundle's default `.SectionContainer__container` rule
   forces every section to min-height: 100lvh. On mobile (where this section
   has no pinned camera/scroll animation filling the rest of it, unlike
   desktop) that left a large empty gap between the hero and the Works list.
   Match the container to its actual content height instead. */
@media not screen and (min-width: 769px) {
  .SectionContainer__container[data-top_section="works_intro"] { min-height: unset; height: 20vh; }
}

/* ---------------------------------------------------------------------------
   7. Mobile side-menu polish
   The bundle centers `.SideMenu__menu_inner` in the full 100dvh overlay, but
   `.SideMenu__social_links` is pinned separately 40px from the bottom. Net
   effect: the nav block's true center sits noticeably lower than the
   overlay's visual center, leaving a big dead gap above "Top" and cramping
   the links against the social row below. Push the centering point up by
   reserving the social row's own footprint as bottom padding, and give the
   "Start a Project" item its own CTA pill so it reads as the primary action
   instead of just another nav line.
   ------------------------------------------------------------------------ */
.SideMenu__menu_inner {
  padding-bottom: 120px !important;
}

.SideMenu__menu_item--cta {
  margin-top: 14px;
}

.SideMenu__menu_item--cta a {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  padding: 16px 30px !important;
  border-radius: 999px;
  background: #ff9628;
  color: #1a0e00 !important;
  font-size: clamp(16px, 4.2vw, 20px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  opacity: 1 !important;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.SideMenu__menu_item--cta a:hover {
  background: #ffb15c;
  transform: translateY(-2px);
}

.SideMenu__menu_item--cta a::after {
  display: none !important;
}

.SideMenu__social_links {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.SideMenu__social_link {
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}



/* ---------------------------------------------------------------------------
   8. Home page: "Our Clients"
   Desktop: full-bleed. The studio-stage photo is the section's backdrop,
   anchored right at its native 1947:808 ratio at the section's own height, so
   the logo cards (positioned in % of the photo) always land on the podium.
   Text and stats sit on the photo's dark left half.
   Mobile (<1100px): text, then the stage (cropped to the photo's right
   column), then prev/next + dots, then a bordered stats box.
   Logos cycle (see kathir-site.js initClientsStage); window.__kkClients holds
   the full list, the visually hidden <ul class="sr-only"> carries every name.
   ------------------------------------------------------------------------ */
.kk-clients {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 50vw, 780px);
  padding: clamp(72px, 7vw, 110px) 0;
  background: #05060d;
}
.kk-clients::before,
.kk-clients::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.kk-clients::before {
  background:
    linear-gradient(180deg, #05060d 0, rgba(5, 6, 13, 0) 20%),
    linear-gradient(0deg, #05060d 0, rgba(5, 6, 13, 0) 22%);
}
.kk-clients::after {
  background: linear-gradient(90deg, rgba(5, 6, 13, 0.92) 0, rgba(5, 6, 13, 0.55) 34%, rgba(5, 6, 13, 0) 58%);
}

.kk-clients__layout {
  /* Deliberately not positioned: the absolutely placed stage must resolve
     against the section (full-bleed), not this centred grid. */
  width: min(1300px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 500px) 1fr;
  align-items: center;
}
.kk-clients__text { grid-column: 1; grid-row: 1; position: relative; z-index: 3; }
.kk-clients__stats { grid-column: 1; grid-row: 2; position: relative; z-index: 3; }
.kk-clients__controls { display: none; }

.kk-clients__title {
  margin: 0;
  color: #fff;
  font-size: clamp(54px, 6.4vw, 100px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.kk-clients__title span,
.kk-clients__title em { display: block; }
.kk-clients__title em { font-style: normal; color: #ff9628; }
.kk-clients__rule { display: block; width: 72px; height: 3px; margin: 26px 0 0; border-radius: 2px; background: #ff9628; }
.kk-clients__lead { max-width: 23em; margin: 24px 0 0; color: #f3f4f8; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.6; }

.kk-clients__stats {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 40px 0 0;
  padding: 46px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.kk-clients__stats::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  width: 72px;
  height: 4px;
  border-radius: 2px;
  background: #ff9628;
}
.kk-clients__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.kk-clients__stats li:first-child { padding-left: 0; border-left: 0; }
.kk-clients__stats strong { color: #fff; font-size: clamp(22px, 2.1vw, 30px); font-weight: 700; line-height: 1.15; }
.kk-clients__stats li:last-child strong { font-size: clamp(16px, 1.4vw, 19px); padding-top: 4px; }
.kk-clients__stats span { color: #aeb2c2; font-size: 14px; line-height: 1.3; }
.kk-clients__stats svg { display: none; }

.kk-clients__stage {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  height: 100%;
  aspect-ratio: 1947 / 808;
  background: url("/kathir-assets/clients-stage-bg.jpg") center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20%);
}

.kk-clients__card {
  position: absolute;
  aspect-ratio: 17 / 20;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Slightly darker toward the bottom edge so the card reads as lit from above. */
  background: linear-gradient(180deg, #fff 0%, #f1f1f4 62%, #c3c3cb 100%);
  border-radius: 9%;
  box-shadow: 0 18px 22px -8px rgba(0, 0, 0, 0.95), 0 30px 44px rgba(0, 0, 0, 0.65), inset 0 -7px 0 rgba(0, 0, 0, 0.16);
}
/* Cast shadow on the podium, sitting just under the card's bottom edge. Kept
   entirely outside the card box so it never paints over the white face. */
.kk-clients__card::after {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  top: 100%;
  height: 13%;
  background: radial-gradient(ellipse at 50% 28%, #000 0%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 78%);
  filter: blur(4px);
  pointer-events: none;
}
.kk-clients__card img {
  /* Sized to the logo's own aspect ratio (not a fixed square) so the edge
     feather below follows the logo's real edges. */
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  backface-visibility: hidden;
  /* Most client logos are JPEGs on a pure-white backing. Multiplying them onto
     the card lets that white take the card's own (shaded) colour instead of
     showing as a bright rectangle; dark and coloured artwork is unaffected. */
  mix-blend-mode: multiply;
  /* Soft transparent fade on all four edges so a logo's backing never shows a
     hard rectangle against the card. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* Desktop: four cards (slot 4 unused) standing on the podium's top disc (photo x 62-92%, y 71-76%):
   bottoms rest on it, the front card overhangs its front edge. Every card top
   stays below ~48% so none covers the "KATHIR KREATION" wall sign (y 14-46%). */
.kk-clients__card[data-slot="0"] { left: 62.5%; top: 51.2%; width: 8.4%;  transform: rotate(-1.5deg); z-index: 2; }
.kk-clients__card[data-slot="1"] { left: 69.2%; top: 48.8%; width: 8.4%;  transform: rotate(1deg);    z-index: 1; }
.kk-clients__card[data-slot="2"] { left: 75.5%; top: 48.5%; width: 10.4%; transform: rotate(-0.5deg); z-index: 5; }
.kk-clients__card[data-slot="3"] { left: 84.5%; top: 51.2%; width: 8.4%;  transform: rotate(1.5deg);  z-index: 3; }
.kk-clients__card[data-slot="4"] { display: none; }

.kk-clients__card.is-flipping img { animation: kk-clients-flip 0.7s ease; }
@keyframes kk-clients-flip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .kk-clients__card.is-flipping img { animation: none; }
}

@media not screen and (min-width: 1100px) {
  .kk-clients { display: block; min-height: 0; padding: 72px 0 56px; }
  .kk-clients::before,
  .kk-clients::after { display: none; }
  .kk-clients__layout { display: block; width: 100%; }
  .kk-clients__text { padding: 0 20px; }
  .kk-clients__title { font-size: clamp(52px, 17vw, 76px); }
  .kk-clients__lead { max-width: 26em; }

  /* The photo's right column (podium, wall text, spotlight), pulled up so the
     spotlight/wall sit behind the end of the paragraph, as in the design. */
  .kk-clients__stage {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 760px;
    height: auto;
    aspect-ratio: 5 / 4;
    margin: -50px auto 0;
    background-size: auto 100%;
    background-position: right center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 82%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 82%, transparent 100%);
  }
  .kk-clients__card { aspect-ratio: 1 / 1; border-radius: 12%; box-shadow: 0 14px 18px -6px rgba(0, 0, 0, 0.95), 0 22px 32px rgba(0, 0, 0, 0.65), inset 0 -6px 0 rgba(0, 0, 0, 0.16); }
  .kk-clients__card[data-slot="0"] { display: flex; left: 19.5%; top: 47.5%;  width: 22%; transform: rotate(-1.5deg); z-index: 2; }
  .kk-clients__card[data-slot="1"] { display: none; }
  .kk-clients__card[data-slot="2"] { display: flex; left: 41%; top: 46.5%;  width: 27%; transform: rotate(-0.5deg); z-index: 5; }
  .kk-clients__card[data-slot="3"] { display: none; }
  .kk-clients__card[data-slot="4"] { display: flex; left: 66.5%; top: 47.5%;  width: 22%; transform: rotate(1.5deg);  z-index: 3; }

  .kk-clients__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 760px;
    margin: 6px auto 0;
    padding: 0 20px;
  }
  .kk-clients__arrow {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1.5px solid #ff9628;
    border-radius: 50%;
    background: transparent;
    color: #ff9628;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .kk-clients__arrow:hover,
  .kk-clients__arrow:focus-visible { background: #ff9628; color: #1a0e00; }
  .kk-clients__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .kk-clients__dots { display: flex; align-items: center; gap: 8px; }
  .kk-clients__dot {
    width: 14px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.24);
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
  }
  .kk-clients__dot[aria-current="true"] { width: 30px; background: #ff9628; }

  .kk-clients__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;
    margin: 28px 20px 0;
    padding: 22px 6px;
    border: 1px solid rgba(255, 150, 40, 0.55);
    border-radius: 14px;
    text-align: center;
  }
  .kk-clients__stats::before { display: none; }
  .kk-clients__stats li { align-items: center; gap: 4px; padding: 0 8px; }
  .kk-clients__stats li:first-child { padding-left: 8px; }
  .kk-clients__stats svg { display: block; width: 30px; height: 30px; margin-bottom: 6px; color: #ff9628; }
  .kk-clients__stats strong { font-size: 28px; }
  .kk-clients__stats li:last-child strong { padding-top: 0; font-size: 17px; line-height: 1.2; }
}
@media (min-width: 761px) and (max-width: 1099px) {
  .kk-clients__stats { margin-left: auto; margin-right: auto; }
}

/* ---------------------------------------------------------------------------
   9. Clients -> Services hand-off
   The transparent vision_out / service_in spacers let the 3D canvas show
   through between the Clients section and the Services title. That used to be
   a white/grey fog (the template's white mission/vision scene; blended out in
   the scene mixer shader) and, without it, stray hero-scene streaks. Paint the
   spacers the same solid dark as the sections around them.
   ------------------------------------------------------------------------ */
.SectionContainer__container[data-top_section="vision_out"],
.SectionContainer__container[data-top_section="service_in"] {
  background: #05060d;
}

/* ---- Mobile only: no horizontal scroll, tighter vertical spacing ---- */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }
  .Header__container,
  .SideMenu__overlay,
  .SideMenu__backdrop,
  .SideMenu__menu,
  .Works__content_inner {
    max-width: 100vw;
  }
  .KV__container {
    margin-bottom: 24px !important;
  }
  .Works__scroll_item {
    height: 70lvh;
  }
  .Service__scroll_item {
    height: 100lvh;
  }
  .PageTop__worksOutro {
    height: 1px;
  }
  .SectionContainer__container[data-top_section="works_outro"] {
    min-height: 0 !important;
    height: 1px;
  }
  /* Empty 3D transition after the clients section */
  .PageTop__stellla {
    height: 1px !important;
    overflow: hidden;
  }
  /* Empty transition scene (flashes blue between clients and the story) */
  [data-top_section="service_in"] {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    visibility: hidden;
  }
  .PageTop__visionOut,
  .PageTop__stellla {
    height: 80lvh;
  }
  .PageTop__stelllaContent {
    height: 160lvh;
  }
  .MissionVision__missionContent {
    height: 110vh;
  }
  .MissionVision__visionContent {
    height: 130vh;
  }
  .kk-studio {
    padding-top: 56px !important;
  }
  .kk-studio--end {
    padding-top: 48px !important;
  }
  .kk-clients {
    padding-top: 40px !important;
    padding-bottom: 32px !important;
  }
}