@layer reset, tokens, base, components, utilities;

@font-face {
   font-family: 'Inter';
   src: local('Inter'), url('assets/fonts/Inter-VariableFont_opsz\,wght.ttf');
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Oswald';
   src: local('Oswald'), url('assets/fonts/Oswald-VariableFont_wght.ttf');
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
}

@layer reset {
   *,
   *::before,
   *::after {
      box-sizing: border-box;
   }

   html {
      -moz-text-size-adjust: none;
      -webkit-text-size-adjust: none;
      text-size-adjust: none;
   }

   body,
   h1,
   h2,
   h3,
   h4,
   p,
   figure,
   blockquote,
   dl,
   dd {
      margin: 0;
   }

   [role='list'] {
      list-style: none;
      margin: 0;
      padding: 0;
   }

   body {
      min-block-size: 100vh;
      line-height: 1.6;
   }

   h1,
   h2,
   h3,
   button,
   input,
   label {
      line-height: 1.1;
   }

   h1,
   h2,
   h3,
   h4 {
      text-wrap: balance;
   }

   p,
   li {
      text-wrap: pretty;
   }

   img,
   picture {
      max-inline-size: 100%;
      display: block;
   }

   input,
   button,
   textarea,
   select {
      font: inherit;
   }
}

@layer tokens {
   :root {
      /* Colours */
      --clr-black: hsl(0, 0%, 0%);
      --clr-white: hsl(0, 0%, 100%);
      --clr-white-soft: hsl(0, 0%, 92%);
      --clr-grey: hsl(0, 0%, 53%);
      --clr-grey-dark: hsl(0, 0%, 33%);
      --clr-overlay: hsla(0, 0%, 0%, 0.3);

      --clr-gold-muted: hsl(40, 40%, 38%);
      --clr-gold: hsl(40, 65%, 47%);
      --clr-gold-highlight: hsl(40, 75%, 57%);

      --clr-bg: var(--clr-black);
      --clr-text: var(--clr-white-soft);
      --clr-text-heading: var(--clr-white);
      --clr-text-muted: var(--clr-grey);
      --clr-text-on-accent: var(--clr-black);
      --clr-accent: var(--clr-gold);
      --clr-accent-hover: var(--clr-gold-highlight);
      --clr-nav-accent-hover: var(--clr-white-soft);
      --clr-border: var(--clr-grey-dark);

      /* Typography */
      --base-size: 1rem;
      --scale: 1.25;
      --text-hero: clamp(3.5rem, 25vw, 8rem);
      --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      --text-small: calc(var(--base-size) / var(--scale));
      --h6: var(--text-body);
      --h5: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
      --h4: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
      --h3: clamp(1.95rem, 1.7rem + 1.25vw, 2.75rem);
      --h2: clamp(2.5rem, 2.1rem + 2vw, 3.75rem);
      --h1: clamp(3rem, 2.4rem + 3vw, 5rem);

      /* Fonts */
      --font-heading: 'Oswald', sans-serif;
      --font-body: 'Inter', sans-serif;

      /* Spacing */
      --space-050: 0.5rem;
      --space-065: 0.65rem;
      --space-100: 1rem;
      --space-150: 1.5rem;
      --space-200: 2rem;
      --space-250: 2.5rem;
      --space-300: 3rem;
      --space-350: 3.5rem;
      --space-400: 4rem;
      --space-500: 5.3rem;
      --space-600: 6rem;
      --space-800: 8rem;
      --space-900: 9rem;
      --space-1000: 10rem;

      /* Letter Spacing */
      --tracking-tight: -0.02em;
      --tracking-normal: 0;
      --tracking-wide: 0.05em;
      --tracking-wider: 0.1em;
      --tracking-widest: 0.2em;

      /* Line Height */
      --lh-hero: 85%;
      --lh-desktop: 1.5;
      --lh-desktop-footer: 1.2;
      --lh-heading-mobile: 0.9;

      /* Border Radius */
      --radius-sm: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 1rem;
      --radius-pill: 6.25rem;

      /* Layout */
      --container-max: 1440px;
      --container-padding: clamp(1rem, 5vw, 2rem);

      /* Nav */
      --nav-height: 72px;

      /* Transitions */
      --transition-fast: 200ms ease;
      --transition-base: 300ms ease;
   }
}

@layer base {
   html {
      scroll-behavior: smooth;
      scroll-padding-top: 96px;
   }

   body {
      font-family: var(--font-body);
      background-color: var(--clr-bg);
      color: var(--clr-text);
   }

   a {
      text-decoration: none;
      color: var(--clr-text);
   }

   a:hover {
      color: var(--clr-accent);
   }

   header {
      position: sticky;
      background-color: var(--clr-bg);
      top: 0;
      z-index: 100;
      width: 100%;
      padding-bottom: var(--space-100);
   }

   .hero {
      position: relative;
      background-image: url('assets/images/backgrounds/mobile/hero.webp');
      background-size: cover;
      background-position: center;
   }

   .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
         to bottom,
         hsla(0, 0%, 0%, 0.65),
         hsla(0, 0%, 0%, 0.95)
      );
      z-index: 0;
   }

   .hero-content {
      position: relative;
      z-index: 1;
      display: grid;
      gap: var(--space-150);
      justify-items: start;
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: var(--container-padding);
      padding-block: var(--space-400) var(--space-300);
   }

   h1 {
      font-family: var(--font-heading);
      font-size: var(--text-hero);
      color: var(--clr-text-heading);
      line-height: var(--lh-hero);
      text-transform: uppercase;
      max-width: 5ch;
   }

   .full-stop {
      color: var(--clr-accent);
   }

   .hero-paragraph {
      font-size: var(--text-body);
      color: var(--clr-text-muted);
   }

   .hero-contact-links {
      display: flex;
      flex-direction: column;
      justify-self: center;
      gap: var(--space-100);
   }

   .about {
      padding-inline: var(--container-padding);
   }

   .about-inner {
      max-width: var(--container-max);
      margin-inline: auto;
   }

   h2 {
      font-family: var(--font-heading);
      font-size: var(--h1);
      line-height: var(--lh-heading-mobile);
      letter-spacing: var(--tracking-wide);
      color: var(--clr-text-heading);
      text-transform: uppercase;
      max-width: 10ch;
      padding-bottom: var(--space-200);
   }

   .about-portrait-col span,
   .bbq-content span {
      color: var(--clr-accent);
   }

   .about-portrait-col span::after,
   .bbq-content span::after {
      content: '';
      display: block;
      width: 40%;
      height: 4px;
      background-color: var(--clr-accent);
      margin-top: var(--space-200);
   }

   .about-portrait {
      position: relative;
      padding-bottom: var(--space-200);
   }

   .about-portrait img {
      border-radius: var(--radius-md);
      border: 1px solid var(--clr-border);
      padding: var(--space-050);
   }

   .about-content {
      display: grid;
      gap: var(--space-100);
      max-width: 50ch;
   }

   .about-features {
      display: grid;
      gap: var(--space-150);
      padding-bottom: var(--space-600);
   }

   .feature h3 {
      font-family: var(--font-heading);
      font-size: var(--h4);
      text-transform: uppercase;
      color: var(--clr-text-heading);
   }

   .feature p {
      font-size: var(--text-body);
      color: var(--clr-text-muted);
   }

   .training-area {
      position: relative;
      padding-inline: var(--container-padding);
      background-image: url('assets/images/backgrounds/mobile/gym-environment.webp');
      background-size: cover;
      background-position: center;
      padding-block: var(--space-400);
      margin-bottom: var(--space-600);
   }

   .training-area::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
         to bottom,
         hsla(0, 0%, 0%, 0.2),
         hsla(0, 0%, 0%, 0.9)
      );
      z-index: 0;
   }

   .training-area > * {
      position: relative;
      z-index: 1;
   }

   .training-intro p {
      font-size: var(--text-body);
      letter-spacing: var(--tracking-wide);
   }

   .services {
      padding-bottom: var(--space-600);
   }

   .services-inner {
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: var(--container-padding);
   }

   .services-label-container {
      display: grid;
      gap: var(--space-100);
      justify-content: end;
   }

   .services-hero-content-container {
      padding-bottom: var(--space-200);
   }

   .service-content h3 {
      font-family: var(--font-heading);
      font-size: var(--text-body);
      text-transform: uppercase;
      color: var(--clr-text-heading);
   }

   .service-content p,
   .services-inner p {
      color: var(--clr-text-muted);
   }

   .services-inner p {
      padding-bottom: var(--space-050);
   }

   .bbq-shack {
      padding-inline: var(--container-padding);
      padding-bottom: var(--space-600);
   }

   .bbq-inner {
      display: grid;
      gap: var(--space-100);
      max-width: var(--container-max);
      margin-inline: auto;
   }

   .bbq-content h2 {
      padding-bottom: var(--space-050);
   }

   .bbq-content {
      display: grid;
      gap: var(--space-150);
   }

   .bbq-content p:last-of-type {
      padding-bottom: var(--space-200);
   }

   .bbq-media img {
      border-radius: var(--radius-md);
   }

   .pricing {
      padding-inline: var(--container-padding);
      padding-bottom: var(--space-600);
   }

   .pricing-inner {
      max-width: var(--container-max);
      margin-inline: auto;
   }

   .pricing-inner h2 {
      font-size: var(--h1);
      line-height: var(--lh-heading-mobile);
      text-align: center;
      margin-inline: auto;
   }

   .pricing-inner h2::after {
      content: '';
      display: block;
      width: 40%;
      height: 4px;
      background-color: var(--clr-accent);
      margin-top: var(--space-150);
      margin-left: var(--space-350);
   }

   .pricing-label {
      text-align: center;
      padding-bottom: var(--space-150);
   }

   .pricing-main-paragraph {
      color: var(--clr-text-muted);
      font-size: var(--text-body);
      padding-bottom: var(--space-200);
   }

   .pricing-card-header {
      display: grid;
      justify-items: center;
      text-align: center;
      padding: var(--space-150);
   }

   .pricing-card-header.monthly {
      border: 1px solid var(--clr-border);
   }

   .pricing-card-header.monthly p {
      color: var(--clr-text-muted);
   }

   .pricing-card-header h3 {
      font-family: var(--font-heading);
      font-size: var(--h3);
      text-transform: uppercase;
      max-width: 10ch;
      text-wrap: wrap;
      padding-bottom: var(--space-050);
   }

   .pricing-card-header p {
      font-family: var(--font-body);
      font-size: var(--text-body);
      text-transform: uppercase;
      color: var(--clr-text-on-accent);
   }

   .sessions-card .pricing-card-header {
      background-color: var(--clr-accent);
   }

   .sessions-card .pricing-card-header h3 {
      color: var(--clr-text-on-accent);
   }

   .pricing-cards {
      display: grid;
      gap: var(--space-200);
      padding-bottom: var(--space-200);
   }

   .pricing-card table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
   }

   .pricing-card td,
   .pricing-card th {
      padding-block: var(--space-100);
      padding-inline: var(--space-100);
   }

   .pricing-card th {
      font-family: var(--font-heading);
      text-transform: uppercase;
      font-size: var(--text-small);
      letter-spacing: var(--tracking-wide);
      color: var(--clr-text-muted);
      font-weight: 400;
      text-align: center;
   }

   .pricing-card th:first-child {
      text-align: left;
   }

   .pricing-card td:first-child,
   .pricing-card th[scope='row'] {
      font-family: var(--font-heading);
      text-transform: uppercase;
      font-size: var(--text-body);
      color: var(--clr-text-heading);
      text-align: left;
      font-weight: 400;
   }

   .pricing-card td span,
   .pricing-card th span {
      display: block;
      font-family: var(--font-body);
      font-size: var(--text-small);
      text-transform: none;
      color: var(--clr-text-muted);
   }

   .pricing-card tbody tr,
   .pricing-card thead {
      background-image: linear-gradient(to right, var(--clr-border) 0 100%);
      background-repeat: no-repeat;
      background-position: bottom center;
      background-size: calc(100% - var(--space-100)) 1px;
   }

   .pricing-card .price {
      font-family: var(--font-heading);
      font-size: var(--h3);
      color: var(--clr-accent);
      text-align: center;
   }

   .pricing-footnote {
      font-size: var(--text-small);
      color: var(--clr-text-muted);
      text-align: center;
   }

   .pricing-card.monthly-card {
      border: 1px solid var(--clr-accent);
      box-shadow: 0 0 26px hsla(40, 65%, 47%, 0.5);
   }

   .final-cta {
      padding-inline: var(--container-padding);
      padding-bottom: var(--space-600);
      border-bottom: 1px solid var(--clr-border);
   }

   .final-cta-inner {
      display: grid;
      gap: var(--space-100);
      max-width: var(--container-max);
      margin-inline: auto;
   }

   .final-cta-inner h2 {
      display: grid;
      justify-self: center;
      text-align: center;
   }

   .footer-inner {
      display: grid;
      justify-items: center;
      gap: var(--space-150);
      padding-block: var(--space-300);
   }

   .footer-inner p {
      font-size: var(--text-small);
      font-weight: 200;
      color: var(--clr-text-muted);
   }

   .footer-nav {
      display: flex;
      gap: var(--space-200);
   }

   .footer-nav a {
      font-size: var(--text-small);
      font-weight: 300;
      color: var(--clr-text-muted);
   }

   .footer-nav a:hover {
      color: var(--clr-accent);
   }

   @media (min-width: 768px) {
      .hero {
         background-image: url('assets/images/backgrounds/tablet/hero.webp');
      }

      .hero-contact-links {
         flex-direction: row;
         gap: var(--space-200);
      }

      .hero-content {
         padding-top: var(--space-400);
         padding-bottom: var(--space-600);
         gap: var(--space-300);
      }

      .about-content {
         max-width: 100%;
      }

      .about-features {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: var(--space-200);
      }

      .training-area {
         min-block-size: 80vh;
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         background-image: url('assets/images/backgrounds/tablet/gym-environment.webp');
      }

      .training-area h2 {
         font-size: var(--h1);
      }

      .training-intro {
         max-width: 55ch;
      }

      .services-label-container {
         justify-content: start;
      }

      .services-label-container h2 {
         padding-bottom: var(--space-100);
      }

      .services-hero-content-container {
         display: flex;
         gap: var(--space-800);
         align-items: flex-end;
      }

      .bbq-inner {
         grid-template-columns: 1fr 1fr;
         align-items: center;
         gap: var(--space-400);
      }

      .pricing-card-header h3 {
         max-width: none;
      }

      .footer-inner {
         display: flex;
         justify-content: space-evenly;
         align-items: center;
         gap: var(--space-200);
      }
   }
   @media (min-width: 1200px) {
      .hero {
         background-image: url('assets/images/backgrounds/desktop/hero.webp');
      }

      h1 {
         line-height: var(--lh-desktop);
         letter-spacing: var(--tracking-tight);
         max-width: 15ch;
      }

      .hero-paragraph {
         max-width: 75ch;
      }

      .hero-content {
         gap: var(--space-150);
      }

      .hero-contact-links {
         justify-self: start;
      }

      .about-inner {
         display: grid;
         grid-template-columns: auto auto;
         gap: var(--space-200);
         align-items: start;
      }

      .training-area {
         min-block-size: 90vh;
         background-image: url('assets/images/backgrounds/desktop/gym-environment.webp');
      }

      .training-area h2 {
         line-height: var(--lh-desktop);
      }

      .pricing-inner h2::after {
         margin-left: var(--space-900);
         width: 25%;
      }

      .pricing-hero-content-container {
         display: grid;
         justify-content: center;
         gap: var(--space-050);
      }

      .pricing-main-paragraph {
         max-width: 75ch;
      }

      .pricing-cards {
         display: flex;
      }

      .pricing-card-header {
         justify-items: start;
         text-align: left;
         border-bottom: 1px solid var(--clr-border);
      }

      .pricing-card-header h3 {
         color: var(--clr-accent);
      }

      .pricing-card-header p {
         color: var(--clr-text-muted);
      }

      .sessions-card .pricing-card-header {
         background-color: transparent;
      }

      .sessions-card .pricing-card-header h3 {
         color: var(--clr-accent);
      }

      .pricing-card-header.monthly {
         border: none;
         border-bottom: 1px solid var(--clr-border);
      }

      .pricing-card.monthly-card tbody tr:last-child {
         background-image: none;
      }

      .final-cta-inner h2 {
         max-width: 20ch;
         line-height: var(--lh-desktop-footer);
      }
   }
}

@layer components {
   .navigation {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: var(--nav-height);
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: var(--container-padding);
   }

   .logo img,
   footer img {
      height: 40px;
      width: auto;
   }

   .nav-toggle {
      display: flex;
      flex-direction: column;
      gap: 5px;
      background: transparent;
      border: 0;
      cursor: pointer;

      position: relative;
      z-index: 300;
   }

   .nav-toggle-bar {
      width: 24px;
      height: 3px;
      background: var(--clr-accent);
      border-radius: var(--radius-md);
      transition: var(--transition-base);
   }

   .nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
   }
   .nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(2) {
      opacity: 0;
   }
   .nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
   }
   .nav-toggle[aria-expanded='true'] ~ #primary-nav {
      position: fixed;
      inset: var(--nav-height) 0 0 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-400);
      background-color: var(--clr-bg);
      z-index: 200;
   }

   #primary-nav {
      display: none;
   }

   .bubble {
      display: inline-block;
      font-family: var(--font-heading);
      font-size: var(--text-small);
      text-transform: uppercase;
      letter-spacing: var(--tracking-widest);
      color: var(--clr-accent);
      border: 1px solid var(--clr-accent);
      border-radius: var(--radius-pill);
      padding: var(--space-050) var(--space-100);
   }

   .whatsapp-icon {
      height: 24px;
      width: auto;
   }

   .whatsapp-message-group {
      display: none;
   }

   .whatsapp {
      display: inline-flex;
      align-items: center;
      gap: var(--space-050);
      background-color: var(--clr-gold);
      color: var(--clr-text-on-accent);
      text-decoration: none;
      font-family: var(--font-heading);
      text-transform: uppercase;
      padding: var(--space-100) var(--space-200);
      border-radius: var(--radius-pill);
      transition: background-color var(--transition-base);
   }

   .whatsapp:hover {
      background-color: var(--clr-nav-accent-hover);
   }

   .whatsapp-hero {
      padding: var(--space-100) var(--space-200);
      font-size: var(--text-body);
   }

   .training-link {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--space-100);
      text-transform: uppercase;
      font-size: var(--text-small);
      border: 1px solid var(--clr-text-muted);
      padding: var(--space-100);
      border-radius: var(--radius-pill);
   }

   .training-link:hover {
      border-color: var(--clr-accent);
   }

   .training-link:hover .arrow-icon,
   .training-link:hover .envelope-icon {
      fill: var(--clr-accent);
   }

   .arrow-icon {
      width: 20px;
      height: auto;
      fill: currentColor;
   }

   .label {
      position: absolute;
      bottom: var(--space-300);
      left: var(--space-100);
      right: var(--space-100);

      font-family: var(--font-heading);
      font-size: var(--text-small);
      text-transform: uppercase;
      color: var(--clr-text-heading);
      background-color: var(--clr-overlay);
      padding: var(--space-050) var(--space-100);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: var(--radius-md);
   }

   .feature-icon {
      width: 32px;
      height: auto;
      fill: var(--clr-accent);
   }

   .feature,
   .training-intro {
      padding: var(--space-200) var(--space-150);
      border-left: 3px solid var(--clr-accent);
      border-radius: var(--radius-lg);
      corner-shape: squircle;
      background-color: var(--clr-bg);
   }

   .feature {
      display: grid;
      gap: var(--space-100);
   }

   .testimonial-block {
      padding-inline: var(--container-padding);
   }

   .testimonial {
      position: relative;
      max-width: 50ch;
      margin-inline: auto;
      text-align: center;
      padding-bottom: var(--space-600);
   }

   .testimonial::before {
      content: '\201C';
      font-family: var(--font-heading);
      font-size: var(--text-hero);
      line-height: 1;
      color: var(--clr-accent);
      display: block;
   }

   .testimonial p {
      text-transform: uppercase;
      font-style: italic;
      font-size: var(--text-body);
      font-weight: 600;
   }

   .testimonial cite {
      display: block;
      font-family: var(--font-heading);
      text-transform: uppercase;
      font-size: var(--text-body);
      font-style: normal;
      color: var(--clr-accent);
      padding-top: var(--space-100);
   }

   .testimonial cite::before,
   .testimonial cite::after {
      content: '';
      display: inline-block;
      width: var(--space-300);
      height: 2px;
      background-color: var(--clr-accent);
      vertical-align: middle;
      margin-inline: var(--space-100);
   }

   .marquee {
      overflow: hidden;
      background-color: var(--clr-accent);
      padding-block: var(--space-100);
      margin-bottom: var(--space-200);
   }

   .marquee-track {
      display: flex;
      width: max-content;
      gap: var(--space-300);
      animation: marquee-scroll 30s linear infinite;
   }

   .marquee-group {
      display: flex;
      flex-shrink: 0;
      gap: var(--space-300);
      margin: 0;
      padding: 0;
   }

   .marquee-group li {
      display: flex;
      align-items: center;
      gap: var(--space-050);
      white-space: nowrap;
      font-family: var(--font-heading);
      text-transform: uppercase;
      color: var(--clr-text-on-accent);
   }

   .marquee-group img {
      height: 24px;
      width: 24px;
   }

   @keyframes marquee-scroll {
      from {
         transform: translateX(0);
      }
      to {
         transform: translateX(calc(-50% - (var(--space-300) / 2)));
      }
   }

   .services-list {
      counter-reset: service;
      display: grid;
      gap: var(--space-200);
      border-bottom: 1px solid var(--clr-border);
      margin-inline: calc((var(--container-padding) - var(--space-050)) * -1);
      padding-inline: var(--container-padding);
      padding-bottom: var(--space-200);
   }

   .service {
      counter-increment: service;
      display: grid;
      gap: var(--space-150);
      border-top: 1px solid var(--clr-border);
      padding-top: var(--space-200);
      margin-inline: calc((var(--container-padding) - var(--space-050)) * -1);
      padding-inline: var(--container-padding);
   }

   .service::before {
      content: counter(service, decimal-leading-zero);
      font-family: var(--font-heading);
      font-size: var(--h2);
      font-weight: 700;
      color: var(--clr-accent);
      line-height: 1;
      opacity: 0.5;
   }

   .service-content {
      display: grid;
      gap: var(--space-050);
   }

   .services-label,
   .pricing-label {
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: var(--tracking-widest);
      font-size: var(--text-small);
      color: var(--clr-accent);
   }

   .pricing-card {
      position: relative;
      display: grid;
      gap: var(--space-200);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-lg);
      overflow: hidden;
   }

   .pricing-card.monthly-card {
      border: 1px solid var(--clr-accent);
   }

   .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-050);
      font-family: var(--font-heading);
      text-transform: uppercase;
      text-align: center;
      padding: var(--space-100) var(--space-200);
      border-radius: var(--radius-lg);
      border: 1px solid transparent;
      transition:
         background-color var(--transition-base),
         color var(--transition-base);
   }

   .btn-gold {
      background-color: var(--clr-accent);
      color: var(--clr-text-on-accent);
   }

   .btn-gold:hover {
      background-color: var(--clr-nav-accent-hover);
   }

   .btn-outline {
      background-color: transparent;
      border-color: var(--clr-accent);
      color: var(--clr-accent);
   }

   .btn-outline:hover {
      background-color: var(--clr-accent);
      color: var(--clr-text-on-accent);
   }

   .pricing-card .btn {
      margin-top: var(--space-200);
      margin-inline: var(--space-150);
      margin-bottom: var(--space-200);
   }

   .popular-ribbon {
      position: absolute;
      top: var(--space-200);
      right: calc(var(--space-250) * -1);
      transform: rotate(45deg);
      transform-origin: center;
      background-color: var(--clr-accent);
      color: var(--clr-text-on-accent);
      font-family: var(--font-heading);
      font-size: var(--text-small);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wider);
      text-align: center;
      padding: var(--space-050) var(--space-300);
      z-index: 2;
   }

   .final-cta-buttons {
      display: grid;
      justify-content: center;
      gap: var(--space-150);
   }

   .final-cta-buttons a {
      font-family: var(--font-heading);
      font-size: var(--text-small);
      font-weight: 500;
      letter-spacing: var(--tracking-wider);
      text-transform: uppercase;
   }

   .envelope-icon {
      width: 24px;
      height: auto;
      fill: currentColor;
   }

   @media (min-width: 768px) {
      .nav-toggle {
         display: none;
      }

      #primary-nav {
         display: flex;
         gap: var(--space-200);
      }

      #primary-nav .whatsapp {
         display: none;
      }

      .whatsapp-message-group {
         display: flex;
         align-items: center;
         gap: var(--space-050);
      }

      .whatsapp {
         padding: var(--space-050) var(--space-150);
      }

      .marquee {
         margin-bottom: var(--space-400);
      }

      .service {
         grid-template-columns: auto 1fr;
         align-items: center;
         gap: var(--space-400);
      }

      .final-cta-buttons {
         display: flex;
      }

      .training-link {
         padding: var(--space-100) var(--space-300);
      }
   }
   @media (min-width: 1200px) {
      .marquee {
         margin-bottom: var(--space-600);
      }

      .pricing-card {
         grid-template-rows: auto auto 1fr;
      }

      .pricing-card .btn {
         margin-top: auto;
         border-radius: var(--radius-pill);
         justify-self: stretch;
      }

      .pricing-card.monthly-card {
         gap: var(--space-065);
      }
   }
}

@layer utilities {
   .visually-hidden {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
   }
   .skip-link:focus {
      position: absolute;
      top: 1rem;
      left: 1rem;
      z-index: 9999;
      clip: auto;
      clip-path: none;
      height: auto;
      width: auto;
      overflow: visible;
      white-space: normal;
      background: var(--clr-accent);
      color: var(--clr-text-on-accent);
      padding: 0.5rem 1rem;
   }

   @media (prefers-reduced-motion: reduce) {
      .marquee-track {
         animation: none;
         flex-wrap: wrap;
      }
   }
}