/* =========================================================
   LIMITLESS IDEAS AGENCY
   MASTER STYLESHEET
   ========================================================= */


/* =========================================================
   01. RESET
   ========================================================= */

   *,
   *::before,
   *::after {
       box-sizing: border-box;
   }
   
   html {
       margin: 0;
       padding: 0;
       scroll-behavior: smooth;
   }
   
   body {
       margin: 0;
       padding: 0;
       background: #f4f1ec;
       color: #1a1715;
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
       font-size: 16px;
       line-height: 1.7;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
   
   body.menu-open {
       overflow: hidden;
       touch-action: none;
   }
   
   img {
       display: block;
       max-width: 100%;
       height: auto;
   }
   
   a {
       color: inherit;
       text-decoration: none;
       transition: color 0.3s ease;
   }
   
   button {
       cursor: pointer;
       background: none;
       border: none;
       padding: 0;
   }
   
   ul,
   ol {
       margin: 0;
       padding: 0;
       list-style: none;
   }
   
   h1,
   h2,
   h3,
   h4,
   p {
       margin-top: 0;
   }
   
   h1,
   h2,
   h3,
   h4 {
       font-weight: 400;
   }
   
   ::selection {
       background: #b300e6;
       color: #ffffff;
   }
   
   
   /* =========================================================
      02. VARIABLES
      ========================================================= */
   
   :root {
       --bg: #f4f1ec;
       --dark: #161412;
       --text: #1a1715;
       --muted: #7e7871;
       --border: #e3ddd4;
   
       --accent: #b300e6;
       --accent-dark: #8a00b3;
   
       --display: "Cormorant Garamond",
           Georgia,
           "Times New Roman",
           serif;
   
       --body: "Helvetica Neue",
           Helvetica,
           Arial,
           sans-serif;
   
       --container: 1280px;
       --transition: 0.3s ease;
   }
   
   
   /* =========================================================
      03. GLOBAL LAYOUT
      ========================================================= */
   
   .section-container {
       width: min(calc(100% - 80px), var(--container));
       margin-inline: auto;
   }
   
   .section {
       padding-block: 80px;
   }
   
   
   /* =========================================================
      04. EDITORIAL LABEL
      ========================================================= */
   
   .editorial-label {
       display: flex;
       align-items: center;
       gap: 14px;
       margin-bottom: 24px;
   
       color: var(--muted);
   
       font-size: 9px;
       font-weight: 600;
       letter-spacing: 0.2em;
       text-transform: uppercase;
   }
   
   .editorial-label span:first-child {
       color: var(--accent);
   }
   
   .editorial-label::after {
       content: "";
       display: block;
       width: 28px;
       height: 1px;
       background: var(--border);
   }
   
   
   /* =========================================================
      05. HEADER
      ========================================================= */
   
   .site-header {
       position: fixed;
       top: 0;
       left: 0;
   
       width: 100%;
   
       z-index: 1100;
   
       background: rgba(244, 241, 236, 0.92);
   
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
   
       border-bottom: 1px solid transparent;
   
       transition:
           background 0.3s ease,
           border-color 0.3s ease;
   }
   
   .site-header.is-scrolled {
       background: rgba(244, 241, 236, 0.98);
       border-color: var(--border);
   }
   
   .header-inner {
       position: relative;
   
       display: flex;
       align-items: center;
       justify-content: space-between;
   
       width: min(calc(100% - 80px), var(--container));
   
       min-height: 80px;
   
       margin-inline: auto;
   
       z-index: 1201;
   }
   
   .logo {
       position: relative;
       z-index: 1202;
   }
   
   .logo img {
       max-width: 250px;
       max-height: 70px;
       object-fit: contain;
   }
   
   
   /* =========================================================
      06. DESKTOP NAVIGATION
      ========================================================= */
   
   .desktop-navigation {
       display: flex;
       align-items: center;
       gap: 40px;
   }
   
   .desktop-navigation a {
       font-size: 10px;
       font-weight: 500;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--text);
   
       transition: color 0.3s ease;
   }
   
   .desktop-navigation a:hover {
       color: var(--accent);
   }
   
   .desktop-navigation a[aria-current="page"] {
       color: var(--accent);
   }
   
   
   /* =========================================================
      07. HAMBURGER BUTTON
      ========================================================= */
   
   .menu-toggle {
       display: none;
   
       position: relative;
   
       width: 44px;
       height: 44px;
   
       flex: 0 0 44px;
   
       align-items: center;
       justify-content: center;
   
       padding: 0;
   
       border: 0;
       outline: none;
   
       background: transparent;
   
       z-index: 1300;
   
       -webkit-tap-highlight-color: transparent;
       touch-action: manipulation;
   }
   
   .menu-toggle span {
       position: absolute;
   
       left: 11px;
   
       width: 22px;
       height: 1.5px;
   
       display: block;
   
       background: var(--text);
   
       transform-origin: center;
   
       transition:
           transform 0.3s ease,
           opacity 0.2s ease,
           top 0.3s ease,
           bottom 0.3s ease;
   }
   
   .menu-toggle span:first-child {
       top: 15px;
   }
   
   .menu-toggle span:last-child {
       bottom: 15px;
   }
   
   
   /* HAMBURGER → X */
   
   .menu-toggle[aria-expanded="true"] span:first-child {
       top: 21px;
       transform: rotate(45deg);
   }
   
   .menu-toggle[aria-expanded="true"] span:last-child {
       bottom: 21px;
       transform: rotate(-45deg);
   }
   
   
   /* =========================================================
      08. MOBILE NAVIGATION
      ========================================================= */
   
   .mobile-navigation {
       position: fixed;
   
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
   
       width: 100%;
       height: 100vh;
       height: 100dvh;
   
       display: block;
   
       visibility: hidden;
       opacity: 0;
   
       pointer-events: none;
   
       background: rgba(244, 241, 236, 0.99);
   
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
   
       transform: translateY(-10px);
   
       overflow-x: hidden;
       overflow-y: auto;
   
       -webkit-overflow-scrolling: touch;
   
       z-index: 1200;
   
       padding-top: 68px;
   
       transition:
           opacity 0.25s ease,
           transform 0.25s ease,
           visibility 0.25s ease;
   }
   
   
   /* OPEN STATE */
   
   .mobile-navigation.is-open {
       visibility: visible;
       opacity: 1;
   
       pointer-events: auto;
   
       transform: translateY(0);
   }
   
   
   /* =========================================================
      MOBILE NAV INNER
      ========================================================= */
   
   .mobile-navigation-inner {
       width: calc(100% - 30px);
   
       min-height: calc(100dvh - 68px);
   
       margin-inline: auto;
   
       padding: 24px 0 50px;
   }
   
   .mobile-navigation nav {
       display: flex;
   
       flex-direction: column;
   
       align-items: center;
   
       gap: 0;
   
       width: 100%;
   }
   
   
   /* =========================================================
      MOBILE NAV LINKS
      ========================================================= */
   
   .mobile-navigation nav > a {
       display: block;
   
       width: 100%;
   
       padding: 18px 0;
   
       font-family: var(--display);
   
       font-size: 32px;
   
       line-height: 1;
   
       text-align: center;
   
       border-bottom: 1px solid var(--border);
   
       transition:
           color 0.3s ease,
           background 0.3s ease;
   }
   
   .mobile-navigation nav > a:hover {
       color: var(--accent);
   }
   
   
   /* =========================================================
      MOBILE BOOKING BUTTON
      ========================================================= */
   
   .mobile-navigation .mobile-booking {
       display: flex;
   
       align-items: center;
       justify-content: center;
   
       gap: 16px;
   
       width: 100%;
   
       margin-top: 30px;
   
       padding: 17px 24px;
   
       background: var(--dark);
   
       color: #ffffff;
   
       border: 1px solid var(--dark);
   
       font-family: var(--body);
   
       font-size: 11px;
   
       font-weight: 600;
   
       letter-spacing: 0.12em;
   
       text-transform: uppercase;
   
       transition:
           background 0.3s ease,
           border-color 0.3s ease;
   }
   
   .mobile-navigation .mobile-booking:hover {
       background: var(--accent);
       border-color: var(--accent);
   }
   
   
   /* =========================================================
      09. BUTTONS
      ========================================================= */
   
   .dark-button {
       display: inline-flex;
   
       align-items: center;
       justify-content: center;
   
       gap: 12px;
   
       padding: 14px 28px;
   
       background: var(--dark);
   
       color: #ffffff;
   
       font-size: 10px;
   
       font-weight: 600;
   
       letter-spacing: 0.12em;
   
       text-transform: uppercase;
   
       border: 1px solid var(--dark);
   
       transition: all var(--transition);
   }
   
   .dark-button:hover {
       background: var(--accent);
       border-color: var(--accent);
   
       transform: translateY(-2px);
   }
   
   .light-button {
       display: inline-flex;
   
       align-items: center;
       justify-content: center;
   
       gap: 12px;
   
       padding: 14px 28px;
   
       background: transparent;
   
       color: #ffffff;
   
       font-size: 10px;
   
       font-weight: 600;
   
       letter-spacing: 0.12em;
   
       text-transform: uppercase;
   
       border: 1px solid rgba(255, 255, 255, 0.3);
   
       transition: all var(--transition);
   }
   
   .light-button:hover {
       background: #ffffff;
   
       color: var(--dark);
   
       border-color: #ffffff;
   
       transform: translateY(-2px);
   }
   
   
   /* =========================================================
      10. EDITORIAL LINKS
      ========================================================= */
   
   .editorial-link {
       display: inline-flex;
   
       align-items: center;
   
       gap: 10px;
   
       font-size: 10px;
   
       font-weight: 600;
   
       letter-spacing: 0.12em;
   
       text-transform: uppercase;
   
       transition: color 0.3s ease;
   }
   
   .editorial-link:hover {
       color: var(--accent);
   }
   
   .editorial-link span:last-child {
       color: var(--accent);
   
       transition: transform 0.3s ease;
   }
   
   .editorial-link:hover span:last-child {
       transform: translate(6px, -6px);
   }
   
   
   /* =========================================================
      11. HERO
      ========================================================= */
   
   .hero {
       position: relative;
   
       display: flex;
   
       align-items: flex-end;
   
       min-height: 100vh;
   
       overflow: hidden;
   
       background: var(--dark);
   
       color: #ffffff;
   }
   
   .hero-image {
       position: absolute;
   
       inset: 0;
   
       z-index: 0;
   }
   
   .hero-image img {
       width: 100%;
       height: 100%;
   
       object-fit: cover;

       object-position: right center;
   }
   
   .hero-gradient {
       position: absolute;
   
       inset: 0;
   
       z-index: 1;
   
       background:
           linear-gradient(
               180deg,
               rgba(0, 0, 0, 0.05) 0%,
               rgba(0, 0, 0, 0.3) 40%,
               rgba(0, 0, 0, 0.85) 100%
           );
   }
   
   .hero-content {
       position: relative;
   
       z-index: 2;
   
       width: min(calc(100% - 80px), var(--container));
   
       margin-inline: auto;
   
       padding-top: 160px;
   
       padding-bottom: 60px;
   }
   
   .hero-kicker {
       margin-bottom: 20px;
   
       color: rgba(255, 255, 255, 0.4);
   
       font-size: 10px;
   
       letter-spacing: 0.2em;
   
       text-transform: uppercase;
   }
   
   .hero h1 {
       max-width: 900px;
   
       margin-bottom: 50px;
   
       font-family: var(--display);
   
       font-size: clamp(80px, 13vw, 170px);
   
       letter-spacing: -0.06em;
   
       line-height: 0.78;
   }
   
   .hero h1 span {
       font-style: italic;
   }
   
   .hero-bottom {
       display: flex;
   
       flex-wrap: wrap;
   
       gap: 40px;
   
       align-items: flex-end;
   
       justify-content: space-between;
   }
   
   .hero-introduction {
       max-width: 480px;
   
       color: rgba(255, 255, 255, 0.65);
   
       font-size: 15px;
   
       line-height: 2;
   
       font-weight: 300;
   }
   
   .hero-actions {
       display: flex;
   
       gap: 14px;
   
       flex-wrap: wrap;
   }
   
   
   /* =========================================================
      12. PAGE HERO
      ========================================================= */
   
   .page-hero {
       display: flex;
   
       align-items: flex-end;
   
       min-height: 480px;
   
       padding-top: 140px;
       padding-bottom: 70px;
   
       background: var(--bg);
   }
   
   .page-hero-content {
       width: min(calc(100% - 80px), var(--container));
   
       margin-inline: auto;
   }
   
   .page-hero h1 {
       max-width: 800px;
   
       margin-bottom: 25px;
   
       font-family: var(--display);
   
       font-size: clamp(60px, 9vw, 120px);
   
       letter-spacing: -0.05em;
   
       line-height: 0.85;
   }
   
   .page-hero h1 em {
       color: var(--accent);
   
       font-style: italic;
   }
   
   .page-hero p {
       max-width: 520px;
   
       color: var(--muted);
   
       font-size: 16px;
   
       line-height: 1.9;
   
       font-weight: 300;
   }
   
   
   /* =========================================================
      13. INTRODUCTION
      ========================================================= */
   
   .introduction {
       background: var(--bg);
   }
   
   .introduction-grid {
       display: flex;
   
       flex-wrap: wrap;
   
       gap: 60px;
   }
   
   .introduction-grid > div {
       flex: 1;
   
       min-width: 300px;
   }
   
   .introduction-content h2 {
       max-width: 700px;
   
       margin-bottom: 30px;
   
       font-family: var(--display);
   
       font-size: clamp(56px, 7vw, 100px);
   
       letter-spacing: -0.05em;
   
       line-height: 0.85;
   }
   
   .introduction-content h2 em {
       display: block;
   
       color: var(--accent);
   
       font-style: italic;
   }
   
   .introduction-copy p {
       max-width: 520px;
   
       margin-bottom: 24px;
   
       color: var(--muted);
   
       line-height: 2;
   
       font-weight: 300;
   }
   
   .introduction-copy p.lead {
       font-size: 18px;
   
       color: var(--text);
   
       font-weight: 400;
   }
   
   
   /* =========================================================
      14. SERVICES
      ========================================================= */
   
   .services-preview {
       background: var(--bg);
   }
   
   .services-heading {
       margin-bottom: 60px;
   }
   
   .services-heading h2 {
       max-width: 700px;
   
       font-family: var(--display);
   
       font-size: clamp(56px, 7vw, 100px);
   
       letter-spacing: -0.05em;
   
       line-height: 0.85;
   }
   
   .services-heading h2 em {
       color: var(--accent);
   
       font-style: italic;
   }
   
   .services-grid {
       display: flex;
   
       flex-wrap: wrap;
   
       gap: 2px;
   }
   
   .service-card {
       flex: 1 1 calc(50% - 2px);
   
       min-width: 280px;
   
       background: var(--bg);
   
       padding: 40px 35px 50px;
   
       transition:
           background 0.3s ease,
           transform 0.3s ease;
   }
   
   .service-card:hover {
       background: #e8e3db;
   
       transform: translateY(-4px);
   }
   
   .service-number {
       display: block;
   
       color: var(--accent);
   
       font-size: 9px;
   
       font-weight: 600;
   
       letter-spacing: 0.15em;
   
       margin-bottom: 15px;
   }
   
   .service-card h3 {
       font-family: var(--display);
   
       font-size: clamp(28px, 3vw, 42px);
   
       margin-bottom: 12px;
   }
   
   .service-card p {
       max-width: 340px;
   
       color: var(--muted);
   
       font-size: 14px;
   
       line-height: 1.8;
   
       font-weight: 300;
   }
   
   .service-arrow {
       display: block;
   
       text-align: right;
   
       color: var(--accent);
   
       font-size: 18px;
   
       margin-top: 20px;
   
       transition: transform 0.3s ease;
   }
   
   .service-card:hover .service-arrow {
       transform: translate(4px, -4px);
   }
   
   
   /* =========================================================
      15. TALENT
      ========================================================= */
   
   .talent-section {
       background: #e8e3db;
   }
   
   .talent-introduction {
       display: flex;
   
       flex-wrap: wrap;
   
       gap: 60px;
   
       margin-bottom: 60px;
   }
   
   .talent-introduction > div {
       flex: 1;
   
       min-width: 280px;
   }
   
   .talent-introduction h2 {
       font-family: var(--display);
   
       font-size: clamp(56px, 7vw, 100px);
   
       letter-spacing: -0.05em;
   
       line-height: 0.85;
   }
   
   .talent-introduction h2 em {
       color: var(--accent);
   
       font-style: italic;
   }
   
   .talent-introduction p {
       color: var(--muted);
   
       font-size: 15px;
   
       line-height: 1.9;
   
       font-weight: 300;
   }
   
   .talent-grid {
       display: flex;
   
       flex-wrap: wrap;
   
       gap: 2px;
   }
   
   .talent-card {
       flex: 1 1 calc(50% - 2px);
   
       min-width: 280px;
   
       background: var(--bg);
   }
   
   .talent-card-image {
       aspect-ratio: 4 / 3;
   
       overflow: hidden;
   }
   
   .talent-card-image img {
       width: 100%;
       height: 100%;
   
       object-fit: cover;
   
       transition: transform 600ms ease;
   }
   
   .talent-card:hover .talent-card-image img {
       transform: scale(1.03);
   }
   
   .talent-card-content {
       display: flex;
   
       gap: 20px;
   
       padding: 25px 30px 35px;
   }
   
   .talent-number {
       color: var(--accent);
   
       font-size: 9px;
   
       font-weight: 600;
   
       flex-shrink: 0;
   }
   
   .talent-card-content h3 {
       font-family: var(--display);
   
       font-size: 34px;
   
       margin-bottom: 8px;
   }
   
   .talent-card-content p {
       color: var(--muted);
   
       font-size: 14px;
   
       line-height: 1.8;
   
       font-weight: 300;
   }
   
   
   /* =========================================================
      16. TRAINING ACADEMY
      ========================================================= */
   
   .academy-section {
       display: flex;
   
       flex-wrap: wrap;
   
       min-height: 600px;
   
       background: var(--dark);
   
       color: #ffffff;
   }
   
   .academy-section > div {
       flex: 1;
   
       min-width: 300px;
   }
   
   .academy-image {
       min-height: 400px;
   }
   
   .academy-image img {
       width: 100%;
       height: 100%;
   
       object-fit: cover;
   }
   
   .academy-content {
       display: flex;
   
       flex-direction: column;
   
       justify-content: center;
   
       padding: 60px 70px;
   }
   
   .academy-content .editorial-label {
       color: rgba(255, 255, 255, 0.3);
   }
   
   .academy-content .editorial-label::after {
       background: rgba(255, 255, 255, 0.1);
   }
   
   .academy-content h2 {
       max-width: 550px;
   
       margin-bottom: 30px;
   
       font-family: var(--display);
   
       font-size: clamp(52px, 6vw, 90px);
   
       letter-spacing: -0.05em;
   
       line-height: 0.85;
   }
   
   .academy-content h2 em {
       display: block;
   
       color: var(--accent);
   
       font-style: italic;
   }
   
   .academy-content p {
       max-width: 460px;
   
       color: rgba(255, 255, 255, 0.55);
   
       line-height: 2;
   
       font-weight: 300;
   }
   
   .academy-content p.lead {
       font-size: 17px;
   
       color: rgba(255, 255, 255, 0.8);
   
       font-weight: 400;
   }
   
   .academy-content .editorial-link {
       margin-top: 20px;
   }
   
   
   /* =========================================================
      17. KELLY BOOKING
      ========================================================= */
   
   .kelly-booking {
       background: var(--bg);
   }
   
   .kelly-booking-layout {
       display: flex;
   
       flex-wrap: wrap;
   
       min-height: 600px;
   
       background: var(--dark);
   
       color: #ffffff;
   }
   
   .kelly-booking-layout > div {
       flex: 1;
   
       min-width: 300px;
   }
   
   .kelly-booking-image {
       min-height: 400px;
   }
   
   .kelly-booking-image img {
       width: 100%;
       height: 100%;
   
       object-fit: cover;
   }
   
   .kelly-booking-content {
       display: flex;
   
       flex-direction: column;
   
       justify-content: center;
   
       padding: 60px 70px;
   }
   
   .kelly-booking-content .editorial-label {
       color: rgba(255, 255, 255, 0.3);
   }
   
   .kelly-booking-content .editorial-label::after {
       background: rgba(255, 255, 255, 0.1);
   }
   
   .small-heading {
       margin-bottom: 8px;
   
       color: rgba(255, 255, 255, 0.3);
   
       font-size: 9px;
   
       letter-spacing: 0.2em;
   
       text-transform: uppercase;
   }
   
   .kelly-booking-content h2 {
       margin-bottom: 25px;
   
       font-family: var(--display);
   
       font-size: clamp(64px, 8vw, 110px);
   
       letter-spacing: -0.05em;
   
       line-height: 0.8;
   }
   
   .kelly-booking-content h2 em {
       display: block;
   
       color: var(--accent);
   
       font-style: italic;
   }
   
   .kelly-booking-content p:not(.small-heading) {
       max-width: 440px;
   
       color: rgba(255, 255, 255, 0.55);
   
       line-height: 2;
   
       font-weight: 300;
   
       margin-bottom: 30px;
   }
   
   .kelly-booking-content .dark-button {
       background: #ffffff;
   
       border-color: #ffffff;
   
       color: var(--dark);
   }
   
   .kelly-booking-content .dark-button:hover {
       background: var(--accent);
   
       border-color: var(--accent);
   
       color: #ffffff;
   }
   
   
   /* =========================================================
      18. CONTACT
      ========================================================= */
   
   .home-contact {
       padding-block: 100px;
   
       background: var(--bg);
   }
   
   .contact-content {
       max-width: 800px;
   }
   
   .contact-content h2 {
       margin-bottom: 40px;
   
       font-family: var(--display);
   
       font-size: clamp(60px, 8vw, 110px);
   
       letter-spacing: -0.05em;
   
       line-height: 0.85;
   }
   
   .contact-content h2 em {
       color: var(--accent);
   
       font-style: italic;
   }
   
   
   /* =========================================================
      19. FOOTER
      ========================================================= */
   
   .site-footer {
       padding-top: 70px;
   
       padding-bottom: 30px;
   
       background: #0f0e0c;
   
       color: #ffffff;
   }
   
   .footer-main {
       display: flex;
   
       justify-content: space-between;
   
       flex-wrap: wrap;
   
       gap: 60px;
   
       padding-bottom: 60px;
   }
   
   .footer-logo img {
       max-width: 260px;
   
       max-height: 76px;

       object-fit: contain;
       
       filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
   }
   
   .footer-navigation {
       display: flex;
   
       gap: 60px;
   
       flex-wrap: wrap;
   }
   
   .footer-navigation > div {
       display: flex;
   
       flex-direction: column;
   }
   
   .footer-navigation span {
       margin-bottom: 14px;
   
       color: rgba(255, 255, 255, 0.2);
   
       font-size: 9px;
   
       font-weight: 600;
   
       letter-spacing: 0.2em;
   
       text-transform: uppercase;
   }
   
   .footer-navigation a {
       margin-bottom: 8px;
   
       color: rgba(255, 255, 255, 0.6);
   
       font-size: 14px;
   
       font-weight: 300;
   
       transition: color 0.3s ease;
   }
   
   .footer-navigation a:hover {
       color: var(--accent);
   }
   
   .footer-navigation p {
       margin: 0;
   
       color: rgba(255, 255, 255, 0.4);
   
       font-size: 14px;
   
       line-height: 1.7;
   
       font-weight: 300;
   }
   
   .footer-bottom {
       display: flex;
   
       justify-content: space-between;
   
       padding-top: 20px;
   
       border-top: 1px solid rgba(255, 255, 255, 0.06);
   
       color: rgba(255, 255, 255, 0.25);
   
       font-size: 10px;
   
       letter-spacing: 0.05em;
   }
   
   
   /* =========================================================
      20. SCROLL ANIMATIONS
      ========================================================= */
   
   .animate-on-scroll {
       opacity: 0;
   
       transform: translateY(30px);
   
       transition:
           opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
           transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
   }
   
   .animate-on-scroll.is-visible {
       opacity: 1;
   
       transform: translateY(0);
   }
   
   
   /* =========================================================
      21. MOBILE
      ========================================================= */
   
   @media (max-width: 900px) {
   
       .site-header {
           z-index: 1100;
       }
   
       .header-inner {
           position: relative;
   
           z-index: 1201;
   
           width: calc(100% - 30px);
   
           min-height: 68px;
       }
   
       .section-container,
       .hero-content,
       .page-hero-content {
           width: calc(100% - 30px);
       }
   
   
       /* Hide desktop nav */
   
       .desktop-navigation {
           display: none;
       }
   
   
       /* Show hamburger */
   
       .menu-toggle {
           display: flex;
       }
   
   
       /* Hero */
   
       .hero {
           min-height: 100vh;
       }
   
       .hero-content {
           padding-top: 120px;
   
           padding-bottom: 40px;
       }
   
       .hero h1 {
           font-size: 64px;
   
           margin-bottom: 35px;
       }
   
       .hero-bottom {
           flex-direction: column;
   
           align-items: flex-start;
   
           gap: 30px;
       }
   
       .hero-actions {
           flex-direction: column;
   
           width: 100%;
       }
   
       .hero-actions a {
           width: 100%;
   
           justify-content: center;
       }
   
   
       /* Page hero */
   
       .page-hero {
           min-height: 380px;
   
           padding-top: 110px;
   
           padding-bottom: 50px;
       }
   
       .page-hero h1 {
           font-size: 48px;
       }
   
   
       /* Introduction */
   
       .introduction-grid {
           flex-direction: column;
   
           gap: 40px;
       }
   
   
       /* Talent */
   
       .talent-introduction {
           flex-direction: column;
   
           gap: 30px;
       }
   
   
       /* Services */
   
       .service-card {
           flex: 1 1 100%;
       }
   
   
       /* Talent cards */
   
       .talent-card {
           flex: 1 1 100%;
       }
   
   
       /* Academy */
   
       .academy-section {
           flex-direction: column;
       }
   
       .academy-content {
           padding: 50px 40px;
       }
   
   
       /* Kelly */
   
       .kelly-booking-layout {
           flex-direction: column;
       }
   
       .kelly-booking-content {
           padding: 50px 40px;
       }
   
   
       /* Contact */
   
       .home-contact {
           padding-block: 80px;
       }
   
       .contact-content h2 {
           font-size: 56px;
       }
   
   
       /* Footer */
   
       .footer-main {
           flex-direction: column;
   
           gap: 40px;
   
           padding-bottom: 40px;
       }
   
       .footer-navigation {
           flex-direction: column;
   
           gap: 30px;
       }
   
       .footer-bottom {
           flex-direction: column;
   
           align-items: flex-start;
   
           gap: 8px;
       }
   }
   
   
   /* =========================================================
      22. SMALL PHONES
      ========================================================= */
   
   @media (max-width: 480px) {
   
       .header-inner {
           width: calc(100% - 24px);
   
           min-height: 64px;
       }
   
       .logo img {
           max-width: 135px;
   
           max-height: 40px;
       }
   
       .menu-toggle {
           width: 42px;
   
           height: 42px;
   
           flex-basis: 42px;
       }
   
       .menu-toggle span {
           left: 10px;
   
           width: 22px;
       }
   
       .mobile-navigation {
           padding-top: 64px;
       }
   
       .mobile-navigation-inner {
           width: calc(100% - 24px);
   
           min-height: calc(100dvh - 64px);
   
           padding-top: 20px;
       }
   
       .mobile-navigation nav > a {
           padding: 17px 0;
   
           font-size: 29px;
       }
   
       .mobile-navigation .mobile-booking {
           margin-top: 24px;
   
           padding: 16px 18px;
   
           font-size: 10px;
       }
   
       .hero h1 {
           font-size: 54px;
       }
   
       .hero-kicker {
           font-size: 8px;
       }
   
       .hero-introduction {
           font-size: 14px;
       }
   
       .dark-button,
       .light-button {
           padding: 13px 20px;
       }
   
       .academy-content,
       .kelly-booking-content {
           padding: 45px 25px;
       }
   
       .talent-card-content {
           padding: 22px 20px 30px;
       }
   }
   
   
   /* =========================================================
      23. REDUCED MOTION
      ========================================================= */
   
   @media (prefers-reduced-motion: reduce) {
   
       html {
           scroll-behavior: auto;
       }
   
       *,
       *::before,
       *::after {
           animation-duration: 0.01ms !important;
   
           animation-iteration-count: 1 !important;
   
           transition-duration: 0.01ms !important;
       }
   }