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

    :root {
      --black: #000000;
      --white: #ffffff;
      --green: #2ecc5e;
      --green-2: #44d96f;
    }

    html,
    body {
      background: var(--black);
      color: var(--white);
      font-family: "Roboto", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    /* ============ HERO SECTION WRAPPER + VIDEO BG ============ */
    .hero-section {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      transform: scale(1.06);
      transform-origin: center center;
    }

    .hero-section > .hero {
      position: relative;
      z-index: 1;
    }

    /* Soft drop shadows so text/icons stand out against the video */
    .nav-brand .brand-text,
    .nav-cta,
    .hero-wordmark,
    .hero-tagline,
    .hero-cta,
    .hero-connect p,
    .social-icons a {
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    }

    /* Lighter shadow for the center nav links */
    .nav-links a {
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    .nav-logo-img,
    .hero-logo-img,
    .nav-brand .logo-mark,
    .hero-logo .logo-mark {
      filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
    }

    .nav-cta,
    .hero-cta {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    /* ============ NAVBAR (fixed to the top on every page) ============ */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28px 48px;
      gap: 24px;
      transition: background 0.35s ease;
    }

    /* glass backdrop once the page is scrolled, so the bar stays readable
       over any content passing beneath it */
    .navbar.scrolled {
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--white);
      flex-shrink: 0;
    }

    .nav-brand .logo-mark {
      width: 44px;
      height: 38px;
    }

    .nav-logo-img {
      height: 44px;
      width: auto;
      display: block;
    }

    .nav-brand .brand-fallback {
      display: none;
      align-items: center;
      gap: 12px;
    }

    .nav-brand.logo-missing .nav-logo-img {
      display: none;
    }

    .nav-brand.logo-missing .brand-fallback {
      display: flex;
    }

    .nav-brand .brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.05;
    }

    .nav-brand .brand-text .top {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 0.06em;
    }

    .nav-brand .brand-text .bottom {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 11px;
      letter-spacing: 0.28em;
      color: #d8d8d8;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 22px;
      list-style: none;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .nav-links a {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 0.08em;
      color: var(--white);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .nav-links a:hover {
      color: var(--green);
    }

    .nav-links .divider {
      color: var(--white);
      font-weight: 400;
      user-select: none;
    }

    .nav-cta {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.06em;
      color: var(--white);
      text-decoration: none;
      border: 2px solid var(--white);
      border-radius: 999px;
      padding: 14px 28px;
      white-space: nowrap;
      transition: background 0.25s ease, color 0.25s ease;
      flex-shrink: 0;
    }

    .nav-cta:hover {
      background: var(--white);
      color: var(--black);
    }

    /* ============ HERO ============ */
    .hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      /* top padding accounts for the fixed navbar overlaying the hero */
      padding: 190px 24px 60px;
    }

    .hero-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 36px;
      flex-wrap: wrap;
    }

    .hero-logo .logo-mark {
      width: 230px;
      height: 200px;
      flex-shrink: 0;
    }

    .hero-logo-img {
      width: min(738px, 81vw);
      height: auto;
      display: block;
    }

    .hero-logo .logo-fallback {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 36px;
      flex-wrap: wrap;
    }

    .hero-logo.logo-missing .hero-logo-img {
      display: none;
    }

    .hero-logo.logo-missing .logo-fallback {
      display: flex;
    }

    .hero-wordmark {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1;
    }

    .hero-wordmark .top {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: clamp(44px, 7vw, 84px);
      letter-spacing: 0.02em;
    }

    .hero-wordmark .bottom {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: clamp(26px, 4.2vw, 50px);
      letter-spacing: 0.34em;
      margin-top: 12px;
      color: var(--white);
    }

    .hero-tagline {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: clamp(18px, 2.34vw, 29px);
      letter-spacing: 0.03em;
      margin-top: 72px;
      max-width: 1100px;
    }

    .hero-tagline .captivate {
      color: var(--white);
      font-weight: 900;
    }

    .hero-tagline .convert {
      font-weight: 900;
    }

    .hero-cta {
      font-family: "Roboto", sans-serif;
      font-weight: 900;
      font-size: 14.4px;
      letter-spacing: 0.05em;
      color: var(--white);
      text-decoration: none;
      border: 2px solid var(--white);
      border-radius: 999px;
      padding: 18px 50px;
      margin-top: 80px;
      transition: background 0.25s ease, color 0.25s ease;
    }

    .hero-cta:hover {
      background: var(--white);
      color: var(--black);
    }

    /* ============ CONNECT / SOCIAL ============ */
    .hero-connect {
      margin-top: 110px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 28px;
    }

    .hero-connect p {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 17px;
      letter-spacing: 0.02em;
      color: #e6e6e6;
    }

    .social-icons {
      display: flex;
      align-items: center;
      gap: 44px;
    }

    .social-icons a {
      color: var(--white);
      font-size: 24px;
      text-decoration: none;
      transition: color 0.2s ease, transform 0.2s ease;
    }

    .social-icons a:hover {
      color: var(--green);
      transform: translateY(-3px);
    }

    /* ============ STATEMENT SECTION ============ */
    .statement-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 150px 24px 50px;
      background: var(--black);
    }

    .statement-section h2 {
      margin-top: 20px;
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-size: clamp(30px, 4.4vw, 54px);
      letter-spacing: 0.02em;
      line-height: 1.25;
      max-width: 860px;
      color: var(--white);
    }

    .statement-section h2 .accent {
      font-style: italic;
      font-weight: 700;
      color: var(--green-2);
      letter-spacing: 0.03em;
    }

    /* ============ FEATURED REELS ============ */
    .reels-section {
      background: var(--black);
      padding: 60px 24px 140px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .section-label {
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.32em;
      color: var(--green-2);
      margin-bottom: 56px;
    }

    /* Infinite marquee: shows ~4 cards, scrolls right-to-left, pauses on reel hover */
    .reels-marquee {
      width: 100%;
      max-width: 1180px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
      mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    }

    .reels-track {
      display: flex;
      width: max-content;
      animation: reels-scroll 55s linear infinite;
      will-change: transform;
    }

    .reels-set {
      display: flex;
      gap: 30px;
      padding-right: 30px;
    }

    /* pause-on-hover only on devices with real hover — on touchscreens a
       tap makes :hover stick and would freeze the marquee permanently */
    @media (hover: hover) and (pointer: fine) {
      .reels-marquee:has(.reel-card:hover) .reels-track {
        animation-play-state: paused;
      }
    }

    /* mobile/tablet skip arrows for the marquee (hidden on desktop) */
    .marquee-nav {
      display: none;
      justify-content: center;
      gap: 18px;
      margin-top: 30px;
    }

    .marquee-arrow {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(0, 0, 0, 0.55);
      color: var(--white);
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.25s ease, color 0.25s ease;
    }

    .marquee-arrow:active,
    .marquee-arrow:hover {
      border-color: var(--green-2);
      color: var(--green-2);
    }

    @media (hover: none), (max-width: 820px) {
      .marquee-nav {
        display: flex;
      }
    }

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

    .reel-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      width: var(--reel-card-w, 272px);
      flex-shrink: 0;
    }

    /* 9:16 placeholder slot — swap in a real video later */
    .reel-media {
      position: relative;
      width: 100%;
      aspect-ratio: 9 / 16;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: linear-gradient(160deg, #101010 0%, #060606 100%);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      transition: border-color 0.3s ease, transform 0.3s ease;
    }

    /* real video fills the card; the card itself is the outbound link */
    .reel-media video,
    .youtube-media video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    a.reel-media,
    a.youtube-media {
      cursor: pointer;
    }

    .top-performer-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .volume-toggle {
      position: absolute;
      right: 14px;
      bottom: 14px;
      z-index: 2;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      color: var(--white);
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
    }

    .volume-toggle:hover {
      border-color: var(--green-2);
      color: var(--green-2);
    }

    .reel-card:hover .reel-media,
    .youtube-media:hover {
      border-color: var(--green-2);
      transform: translateY(-5px);
    }

    .reel-play {
      width: 54px;
      height: 54px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: 15px;
      padding-left: 4px;
      transition: border-color 0.3s ease, color 0.3s ease;
    }

    .reel-card:hover .reel-play,
    .youtube-media:hover .reel-play {
      border-color: var(--green-2);
      color: var(--green-2);
    }

    .reel-note {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 11px;
      letter-spacing: 0.24em;
      color: rgba(255, 255, 255, 0.35);
    }

    .reel-media .corner-icons,
    .youtube-media .corner-icons {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 12px;
      display: flex;
      justify-content: space-between;
      color: rgba(255, 255, 255, 0.45);
      font-size: 13px;
    }

    .reel-caption {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0.18em;
      color: #cfcfcf;
      text-align: center;
    }

    .reel-caption .dot {
      color: var(--green-2);
    }

    /* second label within the portfolio section (spacing above it) */
    .youtube-label {
      margin-top: 90px;
    }

    .youtube-rows {
      display: flex;
      flex-direction: column;
      gap: 80px;
      width: 100%;
      max-width: 1180px;
    }

    .youtube-row {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      gap: 64px;
      align-items: center;
    }

    /* alternating layout: video right, text left (mirrored column widths keep video size identical) */
    .youtube-row.reverse {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }

    .youtube-row.reverse .yt-info {
      order: -1;
      align-items: flex-end;
      text-align: right;
    }

    .yt-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }

    .yt-title {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: clamp(20px, 2.2vw, 28px);
      letter-spacing: 0.06em;
      color: var(--white);
    }

    .yt-desc {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 15px;
      line-height: 1.75;
      color: rgba(255, 255, 255, 0.65);
      max-width: 440px;
      margin-top: 16px;
    }

    /* 16:9 placeholder slot — swap in a real video later */
    .youtube-media {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: linear-gradient(160deg, #101010 0%, #060606 100%);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      transition: border-color 0.3s ease, transform 0.3s ease;
    }

    /* ============ PROCESS / HOW IT WORKS ============ */
    .process-section {
      background: var(--black);
      padding: 60px 24px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    /* extra breathing room below the About page's 5-step section, before
       the Top Performers showcase */
    .steps-section {
      padding-bottom: 110px;
    }

    @media (max-width: 560px) {
      .steps-section {
        padding-bottom: 70px;
      }
    }

    .process-kicker {
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.28em;
      color: #8a8a8a;
    }

    .process-heading {
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-size: clamp(30px, 4.4vw, 54px);
      letter-spacing: 0.02em;
      line-height: 1.25;
      color: var(--white);
      margin-top: 20px;
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 44px;
      width: 100%;
      max-width: 1080px;
      margin-top: 90px;
    }

    .process-step {
      border-top: 1px solid rgba(255, 255, 255, 0.16);
      padding-top: 30px;
      text-align: left;
      transition: border-top-color 0.3s ease;
    }

    .process-step:hover {
      border-top-color: var(--green-2);
    }

    .step-num {
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.24em;
      color: var(--green-2);
    }

    .step-title {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: 0.1em;
      color: var(--white);
      margin-top: 16px;
    }

    .step-desc {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 15px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.6);
      margin-top: 12px;
      max-width: 300px;
    }

    /* ============ VISION / DREAM RESULTS ============ */
    .vision-section {
      background: var(--black);
      padding: 110px 24px 90px;
      display: flex;
      justify-content: center;
    }

    .vision-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 90px;
      align-items: start;
      width: 100%;
      max-width: 1180px;
    }

    .vision-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      position: sticky;
      top: 60px;
    }

    .vision-kicker {
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.28em;
      color: #8a8a8a;
    }

    .vision-heading {
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-size: clamp(26px, 3vw, 40px);
      letter-spacing: 0.02em;
      line-height: 1.35;
      color: var(--white);
      margin-top: 20px;
    }

    .vision-heading .accent {
      font-style: italic;
      font-weight: 700;
      color: var(--green-2);
      letter-spacing: 0.03em;
    }

    .vision-text {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.8;
      color: rgba(255, 255, 255, 0.65);
      max-width: 480px;
      margin-top: 26px;
    }

    .vision-cards {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .vision-card {
      position: relative;
      background: linear-gradient(
        90deg,
        transparent 0%,
        #111111 14%,
        #111111 86%,
        transparent 100%
      );
      padding: 30px 40px;
      text-align: left;
      transition: transform 0.3s ease;
    }

    /* hairline top/bottom edges that fade out at the sides */
    .vision-card::before,
    .vision-card::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
      );
      transition: background 0.3s ease;
    }

    .vision-card::before {
      top: 0;
    }

    .vision-card::after {
      bottom: 0;
    }

    .vision-card:hover {
      transform: translateY(-4px);
    }

    .vision-card:hover::before,
    .vision-card:hover::after {
      background: linear-gradient(
        90deg,
        transparent,
        rgba(68, 217, 111, 0.7),
        transparent
      );
    }

    .vision-num {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--green-2);
      color: var(--black);
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .vision-card h3 {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: 0.08em;
      color: var(--white);
      margin-top: 18px;
    }

    .vision-card p {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.55);
      margin-top: 10px;
    }

    /* ============ ABOUT US SECTION ============ */
    .aboutus-section {
      background: var(--black);
      padding: 70px 24px 150px;
      display: flex;
      justify-content: center;
    }

    .aboutus-grid {
      display: grid;
      grid-template-columns: minmax(280px, 440px) 1fr;
      gap: 90px;
      align-items: center;
      max-width: 1180px;
      width: 100%;
    }

    .aboutus-media {
      width: 100%;
      aspect-ratio: 4 / 5;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    }

    .aboutus-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .aboutus-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }

    .aboutus-heading {
      font-family: "Roboto", sans-serif;
      font-weight: 800;
      font-size: clamp(28px, 3.2vw, 42px);
      line-height: 1.3;
      letter-spacing: 0.005em;
      color: var(--white);
      max-width: 620px;
    }

    .aboutus-heading .accent-white {
      font-style: italic;
    }

    .aboutus-heading .accent-green {
      font-style: italic;
      color: var(--green-2);
    }

    .aboutus-text {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.75;
      color: rgba(255, 255, 255, 0.7);
      max-width: 480px;
      margin-top: 26px;
    }

    .aboutus-cta {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.1em;
      color: var(--white);
      text-decoration: none;
      border: 2px solid rgba(255, 255, 255, 0.6);
      border-radius: 999px;
      padding: 16px 40px;
      margin-top: 36px;
      transition: border-color 0.25s ease, color 0.25s ease;
    }

    .aboutus-cta:hover {
      border-color: var(--green-2);
      color: var(--green-2);
    }

    /* ============ FOOTER ============ */
    .site-footer {
      background: var(--black);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding: 70px 48px 0;
    }

    .footer-kicker {
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.28em;
      color: #8a8a8a;
      text-align: center;
    }

    .footer-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 40px;
      max-width: 1400px;
      margin: 28px auto 0;
      padding-bottom: 54px;
    }

    .footer-contact {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .footer-contact-label {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.08em;
      color: var(--white);
      margin-bottom: 2px;
    }

    .footer-contact a,
    .footer-contact p {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.65);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-contact a:hover {
      color: var(--green-2);
    }

    .footer-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .footer-heading {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: clamp(22px, 2.6vw, 32px);
      letter-spacing: 0.02em;
      color: var(--white);
      white-space: nowrap;
    }

    .footer-heading .accent {
      font-style: italic;
      font-weight: 700;
      color: var(--green-2);
    }

    .footer-cta {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.08em;
      color: var(--white);
      text-decoration: none;
      border: 2px solid rgba(255, 255, 255, 0.6);
      border-radius: 999px;
      padding: 14px 32px;
      margin-top: 26px;
      white-space: nowrap;
      transition: border-color 0.25s ease, color 0.25s ease;
    }

    .footer-cta:hover {
      border-color: var(--green-2);
      color: var(--green-2);
    }

    .footer-social {
      display: flex;
      justify-content: flex-end;
      gap: 26px;
    }

    .footer-social a {
      color: var(--white);
      font-size: 20px;
      text-decoration: none;
      transition: color 0.2s ease, transform 0.2s ease;
    }

    .footer-social a:hover {
      color: var(--green-2);
      transform: translateY(-3px);
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding: 24px 0;
      text-align: center;
    }

    .footer-copyright {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.4);
    }

    /* ============ SCROLL REVEAL ============ */
    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: var(--reveal-delay, 0s);
      will-change: opacity, transform;
    }

    .reveal.in-view {
      opacity: 1;
      transform: none;
    }

    /* Above 900px, .nav-links is horizontally centered via
       transform: translateX(-50%); preserve that instead of letting the
       generic reveal transform replace it. Below 900px it uses static
       positioning instead, so no override is needed there. */
    @media (min-width: 901px) {
      .nav-links.reveal {
        transform: translate(-50%, 26px);
      }

      .nav-links.reveal.in-view {
        transform: translateX(-50%);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 900px) {
      .navbar {
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 20px;
        padding: 24px 24px;
      }

      .nav-links {
        position: static;
        transform: none;
        order: 3;
        width: 100%;
        justify-content: center;
      }
    }

    @media (max-width: 640px) {
      .hero-section {
        min-height: 100dvh;
      }

      .hero {
        flex: 1;
        justify-content: center;
        padding: 150px 20px 32px;
      }

      .navbar {
        row-gap: 32px;
        column-gap: 14px;
      }

      .nav-logo-img {
        height: 32px;
      }

      .nav-brand .logo-mark {
        width: 32px;
        height: 28px;
      }

      .nav-brand .brand-text .top {
        font-size: 12px;
      }

      .nav-brand .brand-text .bottom {
        font-size: 8px;
        letter-spacing: 0.2em;
      }

      .nav-cta {
        font-size: 9px;
        letter-spacing: 0.03em;
        padding: 10px 16px;
      }

      .hero-logo .logo-fallback {
        gap: 20px;
      }

      .hero-logo .logo-mark {
        width: 130px;
        height: 113px;
      }

      .hero-wordmark {
        align-items: center;
      }

      .hero-tagline {
        margin-top: 48px;
      }

      .hero-cta {
        margin-top: 52px;
        padding: 14px 40px;
      }

      .hero-connect {
        margin-top: 48px;
        gap: 20px;
      }

      .social-icons {
        gap: 36px;
      }

      .nav-links {
        gap: 14px;
      }

      .nav-links a {
        font-size: 13px;
      }
    }

    @media (max-width: 1000px) {
      .reel-card {
        width: 240px;
      }
    }

    @media (max-width: 900px) {
      .aboutus-grid {
        grid-template-columns: 1fr;
        gap: 44px;
      }

      .aboutus-content {
        align-items: center;
        text-align: center;
      }

      .aboutus-heading,
      .aboutus-text {
        max-width: 100%;
      }

      .aboutus-media {
        max-width: 420px;
        margin: 0 auto;
      }
    }

    @media (max-width: 820px) {
      .vision-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .vision-left {
        position: static;
        align-items: center;
        text-align: center;
      }

      .vision-text {
        max-width: 100%;
      }

      .vision-card {
        text-align: center;
      }

      .vision-num {
        margin: 0 auto;
      }

      .process-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        gap: 40px;
        margin-top: 64px;
      }

      .process-step {
        text-align: center;
      }

      .step-desc {
        max-width: 100%;
      }

      .youtube-rows {
        gap: 64px;
        max-width: 460px;
      }

      .youtube-row,
      .youtube-row.reverse {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      /* video always on top when stacked, for all rows */
      .youtube-row.reverse .yt-info {
        order: 0;
        align-items: center;
        text-align: center;
      }

      .yt-info {
        align-items: center;
        text-align: center;
      }

      .yt-desc {
        max-width: 100%;
      }
    }

    @media (max-width: 560px) {
      .statement-section {
        padding: 96px 20px 36px;
      }

      .reels-section {
        padding: 40px 20px 96px;
      }

      .reel-card {
        width: 200px;
      }

      .aboutus-section {
        padding: 50px 20px 100px;
      }

      .site-footer {
        padding: 56px 24px 0;
      }

      .footer-row {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
        padding-bottom: 44px;
      }

      .footer-contact {
        align-items: center;
      }

      .footer-social {
        justify-content: center;
      }

      .footer-heading {
        white-space: normal;
      }
    }

    /* ============ PAGE 2: ABOUT / PROCESS ============ */
    .page-hero {
      padding: 170px 24px 90px;
    }

    /* About hero: video background wrapper (same treatment as home hero) */
    .hero-section > .statement-section,
    .hero-section > .contact-section {
      position: relative;
      z-index: 1;
      background: transparent;
    }

    .about-hero .page-hero {
      flex: 1;
      justify-content: center;
      padding: 60px 24px 120px;
    }

    /* cinematic edge vignette + film grain — subtle color grade on the video */
    .hero-vignette {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(
        120% 120% at 50% 42%,
        rgba(0, 0, 0, 0) 38%,
        rgba(0, 0, 0, 0.62) 100%
      );
    }

    .hero-grain {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.05;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
      background-size: 180px 180px;
    }

    /* floating black panel behind the hero text for readability over video */
    .hero-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 64px clamp(28px, 6vw, 90px);
      max-width: 900px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    }

    .hero-panel .process-kicker {
      letter-spacing: 0.34em;
    }

    .hero-panel h2 {
      margin-top: 26px;
    }

    .hero-panel .page-sub {
      font-weight: 300;
      line-height: 1.85;
      margin-top: 34px;
    }

    @media (max-width: 560px) {
      .hero-panel {
        padding: 40px 22px;
      }
    }

    .page-sub {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 17px;
      line-height: 1.75;
      color: rgba(255, 255, 255, 0.65);
      max-width: 620px;
      margin-top: 28px;
    }

    .expect-text {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.8;
      color: rgba(255, 255, 255, 0.65);
      max-width: 720px;
      margin-top: 28px;
    }

    .process-grid.five {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      max-width: 1280px;
      gap: 32px;
    }

    /* Story section (About page only): rebalance the whitespace above/below
       so it doesn't sit hugging the hero with a large dead gap beneath it */
    .story-section {
      padding-top: 120px;
      padding-bottom: 90px;
    }

    .expect-section {
      padding-top: 90px;
    }

    /* full-bleed hairline; sits directly under <body> (no padded ancestor
       to escape) so a plain full-width block already reaches both edges */
    .full-divider {
      width: 100%;
      height: 1px;
      background: rgba(255, 255, 255, 0.12);
    }

    @media (max-width: 560px) {
      .story-section {
        padding-top: 64px;
        padding-bottom: 60px;
      }

      .expect-section {
        padding-top: 60px;
      }
    }

    /* ============ SHOWCASE (top performers) ============ */
    .showcase-section {
      background: var(--black);
      padding: 40px 24px 130px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* video background scoped to just the reel row — the video block below
       stays on the section's plain black background. Full-bleed: breaks out
       of the section's 24px side padding so the video touches both edges
       of the screen, while the reel row inside stays centered/inset. */
    .reel-showcase-wrap {
      position: relative;
      display: flex;
      justify-content: center;
      width: calc(100% + 48px);
      margin-left: -24px;
      margin-right: -24px;
      overflow: hidden;
      padding: 70px 40px;
    }

    .showcase-bg-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }

    .reel-showcase-wrap > .showcase-reel-row {
      position: relative;
      z-index: 1;
    }

    /* translucent panel behind the reel's title/description, fading out at
       the left/right edges instead of a hard stroke — same treatment as
       the Vision cards on the home page */
    .showcase-reel-row .reel-info {
      position: relative;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.78) 14%,
        rgba(0, 0, 0, 0.78) 86%,
        transparent 100%
      );
      padding: 32px 36px;
    }

    .showcase-reel-row .reel-info::before,
    .showcase-reel-row .reel-info::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
      );
    }

    .showcase-reel-row .reel-info::before {
      top: 0;
    }

    .showcase-reel-row .reel-info::after {
      bottom: 0;
    }

    /* drop shadow on the reel video card itself */
    .showcase-reel-row .reel-media {
      border: none;
      box-shadow: 0 42px 100px rgba(0, 0, 0, 0.92);
    }

    /* 20% larger title for this reel only (base .yt-title is shared) */
    .showcase-reel-row .yt-title {
      font-size: clamp(24px, 2.64vw, 33.6px);
    }

    /* Row 1: reel left (slides in from off-screen), title/description right */
    .showcase-reel-row {
      display: grid;
      grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
      gap: 72px;
      align-items: center;
      width: 100%;
      max-width: 1000px;
    }

    .showcase-reel-row .reel-media {
      opacity: 0;
      transform: translateX(-64px);
      transition:
        opacity 1.2s ease,
        transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform, opacity;
    }

    /* title/description mirrors the reel: fades in panning from the right */
    .showcase-reel-row .reel-info {
      opacity: 0;
      transform: translateX(64px);
      transition:
        opacity 1.2s ease,
        transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform, opacity;
    }

    .showcase-reel-row.in-view .reel-media,
    .showcase-reel-row.in-view .reel-info {
      opacity: 1;
      transform: none;
    }

    /* the reel/text pan-in offset is too wide for narrow phones — the
       stacked, centered mobile layout only has ~24px of side margin to
       spare, so shrink the travel distance to avoid horizontal overflow
       while the elements sit in their pre-animation resting position */
    @media (max-width: 560px) {
      .showcase-reel-row .reel-media {
        transform: translateX(-20px);
      }

      .showcase-reel-row .reel-info {
        transform: translateX(20px);
      }
    }

    /* Row 2: near-full-width video, cinematic scale/blur reveal, text below */
    /* full-bleed: breaks out of the section's 24px side padding so the
       video touches both edges of the screen */
    .showcase-video-block {
      width: calc(100% + 48px);
      margin-left: -24px;
      margin-right: -24px;
      margin-top: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .showcase-video-block .youtube-media {
      border-radius: 0;
    }

    .showcase-video-block .youtube-media {
      opacity: 0;
      transform: scale(0.92) translateY(44px);
      filter: blur(10px);
      transition:
        opacity 1.2s ease,
        transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.2s ease;
      will-change: transform, opacity, filter;
    }

    .showcase-video-block.in-view .youtube-media {
      opacity: 1;
      transform: none;
      filter: none;
    }

    .showcase-video-block .yt-info {
      margin-top: 56px;
      align-items: center;
      text-align: center;
    }

    @media (prefers-reduced-motion: reduce) {
      .showcase-reel-row .reel-media,
      .showcase-reel-row .reel-info,
      .showcase-video-block .youtube-media {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
      }
    }

    /* ============ PAGE 3: PORTFOLIO ============ */
    .portfolio-section {
      background: var(--black);
      padding: 60px 24px 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .section-label.tight {
      margin-bottom: 14px;
    }

    /* 20% larger variant of the section label */
    .section-label.large {
      font-size: 15.6px;
    }

    .section-sub {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 14px;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 56px;
      text-align: center;
    }

    .portfolio-reels-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 30px;
      width: 100%;
      max-width: 1180px;
    }

    /* in a grid the column sizes the card (unlike the marquee's fixed width) */
    .portfolio-reels-grid .reel-card {
      width: auto;
    }

    .tours-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 30px;
      width: 100%;
      max-width: 1180px;
    }

    .tour-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .tour-card:hover .youtube-media {
      border-color: var(--green-2);
      transform: translateY(-5px);
    }

    .tour-card:hover .reel-play {
      border-color: var(--green-2);
      color: var(--green-2);
    }

    /* Tetris collage: four tile shapes (2x2 feature, 2x1 wide, 1x2 tall,
       1x1 small) explicitly placed so each batch of six interlocks into a
       perfect rectangle — rows 1-3 for the first six, rows 4-6 (a mirrored
       pattern) for the six revealed by LOAD MORE. */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-rows: 185px;
      gap: 14px;
      width: 100%;
      max-width: 1180px;
    }

    .gallery-item {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: linear-gradient(160deg, #101010 0%, #060606 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      transition: border-color 0.3s ease, transform 0.3s ease;
    }

    .gallery-item img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .gallery-item:has(img) {
      cursor: pointer;
    }

    /* ============ PHOTO LIGHTBOX ============ */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(0, 0, 0, 0.92);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5vh 4vw;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

    .lightbox.open {
      opacity: 1;
      pointer-events: auto;
    }

    .lightbox-img {
      max-width: 100%;
      max-height: 100%;
      box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8);
      transform: scale(0.96);
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .lightbox.open .lightbox-img {
      transform: scale(1);
    }

    .lightbox-close {
      position: absolute;
      top: 24px;
      right: 24px;
      z-index: 2;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(0, 0, 0, 0.55);
      color: var(--white);
      font-size: 17px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.25s ease, color 0.25s ease;
    }

    .lightbox-close:hover {
      border-color: var(--green-2);
      color: var(--green-2);
    }

    /* freeze page scroll while the preview is open */
    body.no-scroll {
      overflow: hidden;
    }

    /* batch 1: | A A B B |
                | A A C D |
                | F F C E | */
    .gallery-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
    .gallery-item:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
    .gallery-item:nth-child(3) { grid-column: 3; grid-row: 2 / 4; }
    .gallery-item:nth-child(4) { grid-column: 4; grid-row: 2; }
    .gallery-item:nth-child(5) { grid-column: 4; grid-row: 3; }
    .gallery-item:nth-child(6) { grid-column: 1 / 3; grid-row: 3; }

    /* batch 2 (mirrored): | B B A A |
                           | C D A A |
                           | C E F F | */
    .gallery-item:nth-child(7)  { grid-column: 1 / 3; grid-row: 4; }
    .gallery-item:nth-child(8)  { grid-column: 3 / 5; grid-row: 4 / 6; }
    .gallery-item:nth-child(9)  { grid-column: 1; grid-row: 5 / 7; }
    .gallery-item:nth-child(10) { grid-column: 2; grid-row: 5; }
    .gallery-item:nth-child(11) { grid-column: 2; grid-row: 6; }
    .gallery-item:nth-child(12) { grid-column: 3 / 5; grid-row: 6; }

    .gallery-item.is-hidden {
      display: none;
    }

    .load-more {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.2em;
      color: var(--white);
      background: #1f1f1f;
      border: none;
      padding: 17px 40px;
      margin-top: 52px;
      cursor: pointer;
      transition: background 0.25s ease, color 0.25s ease;
    }

    .load-more:hover {
      background: var(--green-2);
      color: var(--black);
    }

    .gallery-item:hover {
      border-color: var(--green-2);
      transform: translateY(-5px);
    }

    .gallery-item i {
      font-size: 26px;
      color: rgba(255, 255, 255, 0.45);
      transition: color 0.3s ease;
    }

    .gallery-item:hover i {
      color: var(--green-2);
    }

    @media (max-width: 1000px) {
      .portfolio-reels-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 620px;
      }

      .gallery-grid {
        grid-auto-rows: 130px;
        max-width: 780px;
      }
    }

    @media (max-width: 560px) {
      .gallery-grid {
        grid-auto-rows: 78px;
        gap: 8px;
        max-width: 100%;
      }
    }

    @media (max-width: 820px) {
      .tours-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
      }
    }

    @media (max-width: 560px) {
      .portfolio-reels-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
      }

      .portfolio-section {
        padding: 40px 20px 90px;
      }
    }

    /* ============ HOME TOUR SCROLL GALLERY (coverflow) ============ */
    /* Section owns 5 viewports of scroll; the stage pins while scroll
       progress selects the active slide. */
    .tour-gallery {
      position: relative;
      height: 500vh;
      background: var(--black);
    }

    .tour-stage {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      perspective: 1300px;
    }

    /* green galaxy glow radiating from behind the center video */
    .tour-nebula {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 165vmin;
      height: 120vmin;
      z-index: 0;
      pointer-events: none;
      transform: translate(-50%, -50%);
      background:
        radial-gradient(
          ellipse 55% 42% at 50% 50%,
          rgba(68, 217, 111, 0.32) 0%,
          rgba(68, 217, 111, 0.14) 34%,
          rgba(46, 204, 94, 0.06) 55%,
          transparent 72%
        ),
        radial-gradient(
          ellipse 38% 60% at 42% 46%,
          rgba(46, 204, 94, 0.16) 0%,
          rgba(20, 140, 70, 0.08) 45%,
          transparent 70%
        );
      filter: blur(38px);
      animation: nebula-drift 26s ease-in-out infinite alternate;
      will-change: transform;
      backface-visibility: hidden;
    }

    /* second, counter-drifting layer for organic galaxy depth */
    .tour-nebula::before {
      content: "";
      position: absolute;
      inset: -10%;
      background: radial-gradient(
        ellipse 45% 35% at 58% 56%,
        rgba(68, 217, 111, 0.18) 0%,
        rgba(24, 160, 80, 0.08) 40%,
        transparent 68%
      );
      animation: nebula-drift-2 38s ease-in-out infinite alternate;
      will-change: transform;
      backface-visibility: hidden;
    }

    /* pronounced living drift: clear swell, rotation, and wander */
    @keyframes nebula-drift {
      from {
        transform: translate(-50%, -50%) rotate(-6deg) scale(0.94);
      }
      to {
        transform: translate(-45%, -55%) rotate(8deg) scale(1.22);
      }
    }

    @keyframes nebula-drift-2 {
      from {
        transform: rotate(7deg) scale(1.15) translate(4%, -4%);
      }
      to {
        transform: rotate(-9deg) scale(0.88) translate(-5%, 5%);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .tour-nebula,
      .tour-nebula::before {
        animation: none;
      }
    }

    /* shade the nebula to pure black at the stage's top/bottom edges so
       the glow dissolves before the section boundary instead of cutting
       off against the neighboring sections */
    .tour-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(
        180deg,
        var(--black) 0%,
        transparent 26%,
        transparent 74%,
        var(--black) 100%
      );
    }

    .tour-slide {
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(64vw, 1000px);
      aspect-ratio: 16 / 9;
      display: block;
      pointer-events: none;
      opacity: 0;
      z-index: 1;
      transform: translate(-50%, -50%) scale(0.7);
      transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.9s ease,
        filter 0.9s ease;
      will-change: transform, opacity, filter;
    }

    .tour-slide .youtube-media {
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
    }

    /* end-of-preview prompt: appears centered on the video once the 30s
       clip finishes, linking out to the full video on YouTube */
    .video-end-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.55);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
    }

    .youtube-media.show-end .video-end-overlay {
      opacity: 1;
      pointer-events: auto;
    }

    .video-end-overlay .watch-full-btn {
      margin-top: 0;
    }

    /* the front (active) slide */
    .tour-slide[data-offset="0"] {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      filter: none;
      z-index: 3;
      pointer-events: auto;
      cursor: pointer;
    }

    /* neighbors curve away at the edges, like a coverflow */
    .tour-slide[data-offset="1"] {
      transform: translate(calc(-50% + 76%), -50%) rotateY(-26deg) scale(0.8);
      opacity: 1;
      filter: brightness(0.35);
      z-index: 2;
    }

    .tour-slide[data-offset="-1"] {
      transform: translate(calc(-50% - 76%), -50%) rotateY(26deg) scale(0.8);
      opacity: 1;
      filter: brightness(0.35);
      z-index: 2;
    }

    /* slides two or more steps away are parked out wide, invisible */
    .tour-slide[data-offset="2"] {
      transform: translate(calc(-50% + 145%), -50%) rotateY(-30deg) scale(0.7);
    }

    .tour-slide[data-offset="-2"] {
      transform: translate(calc(-50% - 145%), -50%) rotateY(30deg) scale(0.7);
    }

    /* per-video title, crossfading with the active slide */
    .tour-titles {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 7vh;
      height: 2.4em;
      z-index: 4;
      pointer-events: none;
    }

    .tour-title {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 17px;
      letter-spacing: 0.18em;
      color: var(--white);
      opacity: 0;
      transition: opacity 0.6s ease;
    }

    .tour-title.visible {
      opacity: 1;
    }

    @media (max-width: 820px) {
      .tour-slide {
        width: 86vw;
      }

      .tour-slide[data-offset="1"],
      .tour-slide[data-offset="-1"] {
        filter: brightness(0.3);
      }

      .tour-title {
        font-size: 14px;
        letter-spacing: 0.14em;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .tour-slide,
      .tour-title {
        transition: none;
      }
    }

    /* ============ CONTACT PAGE ============ */
    .contact-section {
      background: var(--black);
      padding: 150px 24px 150px;
      display: flex;
      justify-content: center;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: 80px;
      align-items: start;
      width: 100%;
      max-width: 1180px;
    }

    .contact-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }

    .contact-heading {
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-size: clamp(30px, 3.8vw, 50px);
      letter-spacing: 0.02em;
      line-height: 1.2;
      color: var(--white);
      margin-top: 20px;
    }

    .contact-heading .accent {
      font-style: italic;
      font-weight: 700;
      color: var(--green-2);
    }

    .contact-sub {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.65);
      margin-top: 22px;
    }

    .contact-items {
      display: flex;
      flex-direction: column;
      gap: 30px;
      margin-top: 52px;
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 18px;
      text-decoration: none;
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
      padding: 20px 26px;
      align-self: stretch;
    }

    .contact-item i {
      font-size: 20px;
      color: var(--green-2);
      width: 24px;
      text-align: center;
    }

    .contact-item .contact-label {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0.18em;
      color: #8a8a8a;
      display: block;
    }

    .contact-item .contact-value {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 17px;
      color: var(--white);
      margin-top: 4px;
      transition: color 0.25s ease;
    }

    .contact-item:hover .contact-value {
      color: var(--green-2);
    }

    /* form panel: translucent glass over the video, like the About hero panel */
    .contact-form {
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
      padding: 44px;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .contact-form label {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.06em;
      color: var(--white);
      display: block;
      margin-bottom: 10px;
    }

    .field-hidden {
      display: none;
    }

    .contact-form select {
      width: 100%;
      background: #141414;
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--white);
      font-family: "Roboto", sans-serif;
      font-size: 14px;
      padding: 14px 16px;
      border-radius: 6px;
      outline: none;
      cursor: pointer;
      transition: border-color 0.25s ease;
    }

    .contact-form select:focus {
      border-color: var(--green-2);
    }

    .contact-form select:invalid {
      color: rgba(255, 255, 255, 0.3);
    }

    .contact-form select option {
      background: #141414;
      color: var(--white);
    }

    .contact-form input,
    .contact-form textarea {
      width: 100%;
      background: #141414;
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--white);
      font-family: "Roboto", sans-serif;
      font-size: 14px;
      padding: 14px 16px;
      border-radius: 6px;
      outline: none;
      transition: border-color 0.25s ease;
    }

    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    .contact-form input:focus,
    .contact-form textarea:focus {
      border-color: var(--green-2);
    }

    .contact-form textarea {
      min-height: 150px;
      resize: vertical;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .form-submit {
      align-self: flex-start;
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.08em;
      color: var(--black);
      background: var(--green-2);
      border: none;
      border-radius: 999px;
      padding: 16px 40px;
      cursor: pointer;
      transition: transform 0.25s ease, filter 0.25s ease;
    }

    .form-submit:hover {
      transform: translateY(-2px);
      filter: brightness(1.1);
    }

    .form-submit:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
      filter: none;
    }

    .form-status {
      font-family: "Roboto", sans-serif;
      font-size: 14px;
      line-height: 1.6;
      min-height: 1.4em;
    }

    .form-status.success {
      color: var(--green-2);
    }

    .form-status.error {
      color: #ff6b6b;
    }

    @media (max-width: 900px) {
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 56px;
      }

      .contact-left {
        align-items: center;
        text-align: center;
      }

      .contact-items {
        align-items: flex-start;
      }

      .contact-section {
        padding: 100px 20px 110px;
      }
    }

    @media (max-width: 560px) {
      .contact-form {
        padding: 28px 22px;
      }

      .form-row {
        grid-template-columns: 1fr;
      }
    }

    /* ============ WATCH PAGE (full video) ============ */
    .watch-section {
      background: var(--black);
      /* top padding clears the fixed navbar (no full-screen hero here) */
      padding: 180px 24px 130px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .watch-title {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: clamp(24px, 3vw, 38px);
      letter-spacing: 0.12em;
      color: var(--white);
      margin-top: 18px;
    }

    .watch-player {
      width: 100%;
      max-width: 1180px;
      margin-top: 56px;
    }

    .watch-back {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.12em;
      color: rgba(255, 255, 255, 0.6);
      text-decoration: none;
      margin-top: 56px;
      transition: color 0.25s ease;
    }

    .watch-back:hover {
      color: var(--green-2);
    }

    @media (max-width: 560px) {
      .watch-section {
        padding: 60px 20px 90px;
      }

      .watch-player {
        margin-top: 36px;
      }
    }

    /* ============ WHY THE NAME EXIMUS ============ */
    .why-section {
      position: relative;
      overflow: hidden;
      background: var(--black);
      padding: 130px 24px 150px;
      display: flex;
      justify-content: center;
    }

    /* black & white, dimmed background photo */
    .why-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(1);
      opacity: 0.22;
      z-index: 0;
    }

    /* half-transparent grey panel behind the text so it stays legible
       over the photo */
    .why-panel {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1260px;
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      padding: 56px clamp(24px, 5vw, 70px);
    }

    .why-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: 60px;
      align-items: center;
      width: 100%;
      max-width: 1180px;
      text-align: left;
    }

    .why-heading {
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: clamp(28px, 3.4vw, 42px);
      line-height: 1.25;
      letter-spacing: 0.01em;
      color: var(--white);
      margin-left: 10%;
    }

    .why-heading .accent {
      font-style: normal;
      color: var(--green-2);
    }

    .why-right {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .why-text {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 17px;
      line-height: 1.75;
      color: rgba(255, 255, 255, 0.7);
      max-width: 520px;
    }

    .why-text em {
      font-style: italic;
    }

    .why-highlight {
      color: var(--green-2);
      font-style: normal;
    }

    .why-right .cta-button {
      margin-top: 40px;
    }

    @media (max-width: 820px) {
      .why-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
      }

      .why-heading {
        margin-left: 0;
      }

      .why-right {
        align-items: center;
      }

      .why-text {
        max-width: 100%;
      }
    }

    @media (max-width: 560px) {
      .why-section {
        padding: 90px 20px 100px;
      }

      .why-panel {
        padding: 40px 22px;
      }
    }

    /* ============ CLOSING CTA ============ */
    .cta-section {
      padding: 130px 24px 150px;
    }

    .cta-button {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.08em;
      color: var(--white);
      text-decoration: none;
      border: 2px solid rgba(255, 255, 255, 0.6);
      border-radius: 999px;
      padding: 18px 48px;
      margin-top: 48px;
      transition: border-color 0.25s ease, color 0.25s ease;
    }

    .cta-button:hover {
      border-color: var(--green-2);
      color: var(--green-2);
    }

    @media (max-width: 1100px) {
      .process-grid.five {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 760px;
      }
    }

    @media (max-width: 820px) {
      .process-grid.five {
        grid-template-columns: 1fr;
        max-width: 460px;
      }

      .reel-showcase-wrap {
        padding: 44px 20px;
      }

      .showcase-reel-row {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 460px;
        justify-items: center;
      }

      .showcase-reel-row .reel-media {
        width: 100%;
        max-width: 280px;
      }

      .showcase-reel-row .yt-info,
      .showcase-video-block .yt-info {
        align-items: center;
        text-align: center;
        width: 100%;
      }

      .showcase-video-block {
        margin-top: 80px;
        align-items: center;
      }

      .page-hero {
        padding: 130px 20px 70px;
      }
    }