:root {
  --color-bg: hsla(253, 100%, 94%, 1);
  --font-family: "DM Sans", sans-serif;
  --container-padding: var(--space-12);

  /* ===== COLORS ===== */
  --color-white: #fff;
  --color-black: #000;
  --color-primary: #7b5cff;
  --color-secondary: #a855f7;
  --color-button: #1f0036;
  --color-white: #ffffff;
  --color-cta-section-bg: hsla(257, 100%, 84%, 1);
  --color-footer-bg: hsla(271, 100%, 12%, 1);
  --color-text-strong: hsla(260, 28%, 14%, 1);

  /* ===== FONTS ===== */
  --font-size-xs: 0.75em;
  --font-size-sm: 0.875em;
  --font-size-base: 1em;
  --font-size-lg: 1.25em;
  --font-size-xl: 1.5em;
  --font-size-xxl: 2em;
  --font-size-xxxl: 3em;
  --font-size-xxxxl: 4em;
  --font-size-xxxxxl: 5em;

  /* ===== SPACING ===== */
  --space-1: 0.25em;
  --space-2: 0.5em;
  --space-3: 0.75em;
  --space-4: 1em;
  --space-5: 1.25em;
  --space-6: 1.5em;
  --space-8: 2em;
  --space-10: 2.5em;
  --space-12: 3em;
  --space-16: 4em;
  --space-20: 5em;

  /* ===== RADIUS ===== */
  --radius-base: 0.5em;
  --radius-circle: 6.25em;
  --radius-rectangle: 18px;

  /* ===== LAYOUT ===== */
  --nav-height: 5em;

  /* CTA Layout */
  --section-padding-y: 6em;
  --section-padding-x: 0;
  --col-gap: 8%;
  --cta-width: 46%;
  --footer-height: 20%;
  --footer-vector-width: 100%;
  --footer-vector-left: 0%;
  --footer-vector-bottom: 0%;

  /* ===== TRANSITION ===== */
  --transition-timing-function: cubic-bezier(0.32, 2, 0.55, 0.27);
  --button-hover-transition: translateY(0.0625em) scale(0.95);
  --card-hover-transition: translateY(-0.0625em) scale(1.05);

  /* ===== SHAPE ===== */
  --shape-left-width: 24%;
  --shape-left-top: 18%;
  --shape-left-left: -1%;
  --shape-right-width: 22%;
  --shape-right-top: 28%;
  --shape-right-right: 13%;

  /* ===== GRADIENTS ===== */
  --gradient-button-bg:
    linear-gradient(var(--color-button), var(--color-button)) padding-box,
    linear-gradient(77.12deg, #7e53ff 14.21%, #d3a3ff 112.16%) border-box;
  --gradient-button-border: 0.3125em solid transparent;
  --text-gradient: linear-gradient(261.73deg, #ff51dc -3.73%, #602bff 95.41%);
}

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

body {
  font-family: var(--font-family);
  line-height: 1.5;
  overflow-x: hidden;
}

a:focus-visible {
  outline: none;
}

a,
button {
  cursor: pointer;
}

/* ===================================================================
 * iOS VIEWPORT IMPLEMENTATION - TECHNICAL SPECIFICATION
 * ===================================================================
 * 
 * SPECIFICATION: Viewport Units and Safe Area Insets for iOS Safari
 * 
 * IMPLEMENTATION DETAILS:
 * 
 * 1. VIEWPORT UNITS (100svh)
 *    - Specification: CSS Values and Units Module Level 4
 *    - svh (Small Viewport Height): Represents the smallest possible 
 *      viewport height when browser chrome (address bar, toolbar) is visible
 *    - Calculation: min(100vh, actual viewport height with chrome visible)
 *    - Behavior: Static value that doesn't change during scroll
 *    - Use case: Full-height sections, fixed overlays, scroll containers
 * 
 * 2. SAFE AREA INSETS
 *    - Specification: CSS Environment Variables Module Level 1
 *    - Function: env(safe-area-inset-{top|right|bottom|left})
 *    - Values: Pixel values representing unsafe display areas
 *    - Activation: Requires viewport-fit=cover in viewport meta tag
 *    - Fallback: Second parameter provides default (0px for non-iOS devices)
 *    - Typical values:
 *      * iPhone X/11: ~44px top, ~34px bottom
 *      * iPhone 12+: ~47px top, ~34px bottom
 *      * iPad Pro: ~20px top/bottom (landscape)
 * 
 * 3. VIEWPORT-FIT=COVER
 *    - Specification: CSS Round Display Level 1
 *    - Behavior: Extends layout to screen edges, enabling safe area insets
 *    - Implementation: <meta name="viewport" content="viewport-fit=cover">
 *    - Effect: Activates env() safe area variables in CSS
 * 
 * TECHNICAL RATIONALE:
 * - iOS Safari implements dynamic viewport: height changes when browser 
 *   chrome shows/hides during scroll events
 * - Modern iOS devices have physical constraints (notches, rounded corners)
 *   requiring content inset calculations
 * - Fixed positioning requires explicit viewport unit handling
 * 
 * BROWSER SUPPORT:
 * - iOS Safari 11.0+: Full support for safe area insets
 * - iOS Safari 15.4+: Full support for svh viewport units
 * - Desktop browsers: svh behaves identically to vh (no chrome dynamics)
 * - Legacy browsers: Falls back gracefully to vh (polyfill available)
 * 
 * IMPLEMENTATION FILES:
 * - HTML: viewport meta tag with viewport-fit=cover attribute
 * - CSS: env() function usage with safe area calculations
 * - CSS: 100svh unit for all viewport-height declarations
 * 
 * REFERENCE:
 * - https://www.w3.org/TR/css-values-4/#viewport-relative-units
 * - https://drafts.csswg.org/css-env-1/
 * - https://webkit.org/blog/7929/designing-websites-for-iphone-x/
 * =================================================================== */

/* Container */
/*
 * VIEWPORT HEIGHT: 100svh Implementation
 * 
 * SPECIFICATION:
 * Uses the Small Viewport Height (svh) unit for container minimum height.
 * 
 * TECHNICAL DETAILS:
 * - Unit: 100svh = 100% of the smallest possible viewport height
 * - Calculation: Measured when browser chrome (address bar, toolbar) is visible
 * - Stability: Value remains constant regardless of scroll position or chrome state
 * - Behavior: Ensures container fills viewport even when Safari UI is maximized
 * 
 * IMPLEMENTATION RATIONALE:
 * iOS Safari implements dynamic viewport sizing where the actual viewport height
 * changes based on browser chrome visibility. The svh unit provides a static
 * reference to the smallest viewport dimension, ensuring consistent layout
 * regardless of UI state transitions during scroll events.
 * 
 * COMPATIBILITY:
 * - Modern browsers: svh renders as specified
 * - Legacy browsers: Falls back to vh (standard viewport height)
 * - iOS Safari 15.4+: Native support
 * 
 * USE CASE:
 * Full-height container that maintains consistent dimensions across all
 * browser chrome states, preventing layout shifts and content overflow.
 */
.container {
  min-height: 100svh;
  background: rgba(230, 247, 255, 1);
  /* Top offset: navigation base height + top safe area inset */
  padding-top: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
  /* Height: 100% of small viewport height (stable on iOS Safari) */
  height: 100svh;
  /* display: flex;
  align-items: center;
  flex-direction: column; */
  /* padding-inline: var(--space-16); */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;

  .gradient-text {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }

  .text-underline {
    position: relative;
    display: inline-block;
    --underline-color: hsla(24, 100%, 74%, 1); /* Default orange color */

    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 100%;
      height: 4px;
      background-color: var(--underline-color);
    }

    &.medium-purple {
      --underline-color: hsla(251, 62%, 60%, 1);
    }

    &.golden-orange {
      --underline-color: hsla(24, 100%, 74%, 1);
    }

    &.seafoam-green {
      --underline-color: hsla(173, 62%, 60%, 1);
    }

    &.lavender {
      --underline-color: hsla(251, 62%, 60%, 1);
    }

    &.peachy-orange {
      --underline-color: hsla(24, 100%, 74%, 1);
    }
  }
}

/* Navigation */
/*
 * FIXED NAVIGATION BAR: Safe Area Inset Implementation
 * 
 * SPECIFICATION:
 * Fixed positioning with height and padding calculations using CSS Environment
 * Variables for safe area insets on iOS devices.
 * 
 * TECHNICAL DETAILS:
 * 
 * Height Calculation:
 * - Formula: calc(var(--nav-height) + env(safe-area-inset-top, 0px))
 * - Components:
 *   * var(--nav-height): Base navigation bar height (5em)
 *   * env(safe-area-inset-top, 0px): Top inset for notch/sensor housing
 * - Result: Total height accommodates both base navigation and unsafe display area
 * 
 * Padding Specification:
 * - Top: env(safe-area-inset-top, 0px) - Insets content below notch region
 * - Right: calc(var(--container-padding) + env(safe-area-inset-right, 0px))
 * - Left: calc(var(--container-padding) + env(safe-area-inset-left, 0px))
 * - Bottom: 0px (no inset required for top navigation)
 * 
 * SAFE AREA INSETS:
 * - env(safe-area-inset-top): Pixel value for top unsafe area (notch/sensors)
 *   * iPhone X/11: ~44px
 *   * iPhone 12+: ~47px
 *   * Non-notched devices: 0px (fallback)
 * - env(safe-area-inset-left/right): Horizontal insets for rounded corners
 *   * Critical in landscape orientation
 *   * Prevents content cutoff at screen edges
 * 
 * POSITIONING:
 * - position: fixed - Removed from document flow, fixed to viewport
 * - top: 0 - Anchored to viewport top edge
 * - z-index: 100 - Ensures visibility above page content
 * 
 * REQUIREMENTS:
 * - HTML viewport meta tag must include viewport-fit=cover
 * - Without viewport-fit=cover, env() returns 0 (safe area disabled)
 * - Fallback values ensure graceful degradation on non-iOS devices
 * 
 * BROWSER SUPPORT:
 * - iOS Safari 11.0+: Full env() support with viewport-fit=cover
 * - Other browsers: env() returns fallback value (0px), standard behavior
 * */
.top-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Height includes safe area for notch (iPhone X and newer) */
  height: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
  background: transparent;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Padding accounts for safe areas on all sides (notch, rounded corners) */
  padding: env(safe-area-inset-top, 0px)
    calc(var(--container-padding) + env(safe-area-inset-right, 0px)) 0
    calc(var(--container-padding) + env(safe-area-inset-left, 0px));
  transition: color 0.3s ease;
}

.top-nav-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex: 1;
}

.top-nav-bar-left-logo {
  position: relative;
  cursor: pointer;
}

.top-nav-bar-left-logo img {
  height: 2em;
  width: auto;
  transition: opacity 0.3s ease;
}

.nav-logo-white {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* Show white logo when nav has white text class */
.top-nav-bar.nav-white-text .nav-logo {
  opacity: 0;
}

.top-nav-bar.nav-white-text .nav-logo-white {
  opacity: 1;
}

/* Navigation button changes when in universities section */
.top-nav-bar.nav-white-text .btn-primary {
  background: var(--color-white);
  color: var(--color-primary);
  border: 0.125em solid var(--color-white);
}

.top-nav-bar.nav-white-text .btn-primary-icon {
  display: none;
}

.top-nav-bar.nav-white-text .btn-primary-icon-white {
  display: block;
}

/* Hamburger icon changes when nav has white text class */
.top-nav-bar.nav-white-text .hamburger-icon {
  opacity: 0;
}

.hamburger-icon-white {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.top-nav-bar.nav-white-text .hamburger-icon-white {
  opacity: 1;
}

.top-nav-bar.nav-white-text .top-nav-bar-hamburger-menu {
  background-color: var(--color-white);
  button {
    color: var(--color-footer-bg);
  }
}

.top-nav-bar-left-menu {
  display: flex;
  gap: var(--space-8);
}

.top-nav-bar-left-menu a {
  text-decoration: none;
  color: var(--color-fg);
  font-weight: 500;
  font-size: var(--font-size-base);
  transition:
    color 0.2s var(--transition-timing-function),
    background-color 0.2s var(--transition-timing-function),
    text-shadow 0.2s var(--transition-timing-function),
    transform 0.3s var(--transition-timing-function); /* springy "jump" effect */
}

.top-nav-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.top-nav-bar-right-menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.top-nav-bar-right-menu a,
.top-nav-bar-right-menu button {
  text-decoration: none;
  line-height: 1.5;
  color: var(--color-fg);
  font-weight: 500;
  font-size: var(--font-size-base);
  transition:
    color 0.2s var(--transition-timing-function),
    background-color 0.2s var(--transition-timing-function),
    text-shadow 0.2s var(--transition-timing-function),
    transform 0.3s var(--transition-timing-function);
}

.top-nav-bar-right-menu a:hover,
.top-nav-bar-right-menu button:hover,
.top-nav-bar-left-menu a:hover {
  color: var(--color-primary);
  background-color: var(--primary-bg, transparent);
  text-shadow: 0 0.125em 0.625em rgba(51, 57, 240, 0.12);
  transform: var(--button-hover-transition); /* jump up and slightly enlarge */
}

.top-nav-bar-right-menu,
.top-nav-bar-left-menu {
  button:hover,
  a:hover {
    color: var(--color-primary);
    background-color: var(--primary-bg, transparent);
    text-shadow: 0 0.125em 0.625em rgba(51, 57, 240, 0.12);
    transform: var(
      --button-hover-transition
    ); /* jump up and slightly enlarge */
  }
}

.top-nav-bar-right-menu {
  button {
    background: none;
    border: none;
    color: var(--color-fg);
    cursor: pointer;
    font-weight: 500;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    transition:
      color 0.2s,
      background-color 0.2s,
      text-shadow 0.2s,
      transform 0.3s var(--transition-timing-function); /* springy "jump" effect */
  }
  a {
    text-decoration: none;
    color: var(--color-fg);
    font-weight: 500;
    font-size: var(--font-size-base);
    transition:
      color 0.2s,
      background-color 0.2s,
      text-shadow 0.2s,
      transform 0.3s cubic-bezier(0.32, 2, 0.55, 0.27); /* springy "jump" effect */
  }
}

.top-nav-bar-hamburger {
  display: none;
  position: relative;
  .top-nav-bar-hamburger-menu {
    position: absolute;
    height: auto;
    inset: 3em 0em 0 -7em;
    background-color: var(--color-footer-bg);
    display: flex;
    flex-direction: column;
    width: 10em;
    height: 0;
    border-radius: var(--radius-base);
    overflow: hidden;
    transition:
      height 0.1s cubic-bezier(0.25, 0.1, 0.25, 1),
      overflow 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
    button {
      text-decoration: none;
      color: var(--color-white);
      font-weight: 600;
      background: transparent;
      border: none;
      padding: var(--space-3) var(--space-2);
      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--font-size-base);
    }
  }
  &.menu-open {
    .top-nav-bar-hamburger-menu {
      overflow: visible;
      height: 6em;
    }
  }
}

/* Buttons */
.top-nav-bar-right {
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-button);
    color: var(--color-white);
    text-decoration: none;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-circle);
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition:
      transform 0.2s var(--transition-timing-function),
      box-shadow 0.2s var(--transition-timing-function);
    position: relative;
  }

  .btn-primary-icon {
    width: 1em;
    height: 1em;
    object-fit: contain;
    display: block;
  }

  .btn-primary-icon-white {
    width: 1em;
    height: 1em;
    object-fit: contain;
    display: none;
  }

  .btn-primary:hover {
    transform: var(--button-hover-transition);
  }

  .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    color: var(--color-fg);
    text-decoration: none;
    padding: var(--space-3) var(--space-6);
    border: 0.125em solid #1e0c31;
    border-radius: var(--radius-circle);
    font-weight: 800;
    font-size: var(--font-size-sm);
    transition:
      all 0.2s var(--transition-timing-function),
      box-shadow 0.2s;
    cursor: pointer;
  }
}

.hero-section {
  .hero-container {
    width: 90%;
    height: 80%;
    margin: 0 0 0 auto;
    display: grid;
    background-color: rgba(230, 247, 255, 1);
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;

    align-items: center;
    position: relative;

    .hero-left {
      grid-column: 1/7;
      align-content: center;
      height: 100%;
    }

    .hero-right {
      grid-column: 7/13;
    }
  }

  .logo-container {
    --fade-effect-width: 20em;

    max-width: 100%;
    overflow: hidden;
    height: 20%;
    position: relative;
    background-color: hsl(180, 0%, 100%);
    padding: var(--space-2) var(--space-4) var(--space-4) var(--space-4);

    /* Fade effect on left edge */
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: var(--fade-effect-width);
      height: 100%;
      background: linear-gradient(to right, hsl(180, 0%, 100%), transparent);
      z-index: 10;
      pointer-events: none;
    }

    /* Fade effect on right edge */
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: var(--fade-effect-width);
      height: 100%;
      background: linear-gradient(to left, hsl(180, 0%, 100%), transparent);
      z-index: 10;
      pointer-events: none;
    }

    .logo-container-title {
      font-size: var(--font-size-lg);
      font-weight: 600;
      color: rgba(30, 12, 49, 1);
      text-align: center;
      width: 100%;
      position: relative;
      z-index: 20;
    }

    .marquee-track {
      display: flex;
      width: max-content;
      height: 80%;
      gap: var(--space-4);
      animation: marquee-content 30s linear infinite;

      &:hover {
        animation-play-state: paused;
      }
    }

    .institution-logo {
      width: 15em;
      height: auto;
      flex-shrink: 0;
      margin-right: var(--space-4);
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      &.carnegie-mellon-logo {
        img {
          height: 80%;
        }
      }
    }
  }
}

.hero-title {
  font-size: var(--font-size-xxxl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-3);
  color: var(--color-fg);

  @media (min-width: 1440px) {
    width: 80%;
  }
}

.highlight-primary {
  color: var(--color-primary);
}

.highlight-secondary {
  color: var(--color-secondary);
}

.hero-description {
  font-size: var(--hero-section-font-size);
  color: var(--color-gray-600);
  margin-bottom: var(--space-8);
  max-width: 31.25em;
  margin-left: 0;
  margin-right: 0;

  @media screen and (min-width: 1440px) {
    font-size: var(--font-size-xl);
  }
}

.hero-buttons {
  display: flex;
  gap: var(--space-6);
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
  .btn-primary,
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
    border-radius: var(--radius-circle);
    padding: var(--space-2) var(--space-4);
    font-weight: 700;
    border: var(--gradient-button-border);
    font-size: var(--font-size-lg);
    transition:
      transform 0.2s var(--transition-timing-function),
      box-shadow 0.2s var(--transition-timing-function);

    &:hover {
      transform: var(--button-hover-transition);
      box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
    }
  }

  .btn-primary {
    background: var(--gradient-button-bg);
    color: var(--color-white);
  }

  .btn-secondary {
    background: transparent;
    border: 0.125em solid #1e0c31;
    color: #1e0c31;
  }

  .btn-primary-icon,
  .btn-secondary-icon {
    width: 1.3em;
    height: 1.3em;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

.hero-right {
  height: 80%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .hero-visual {
    height: 70%;
    width: 100%;
    background-image: url("/partner/assets/hero-section/hero-right-image.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 3;
  }

  .hero-visual-rectangle-image {
    position: absolute;
    width: auto;
    border-radius: var(--radius-rectangle);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    aspect-ratio: 9/6 auto;
    --width: 40%;
    height: calc(var(--width) * 0.6);
  }

  .hero-visual-rectangle-image-1 {
    top: 4%;
    right: 15%;
    z-index: 3;
    background-image: url("/partner/assets/hero-section/hero-visual-rectangle-image-1.jpg");
  }

  .hero-visual-rectangle-image-2 {
    bottom: 12%;
    right: 45%;
    z-index: 3;
    background-image: url("/partner/assets/hero-section/hero-visual-rectangle-image-2.jpg");
  }

  .hero-visual-rectangle-image-3 {
    top: 5%;
    left: 5%;
    z-index: 1;
    background-image: url("/partner/assets/hero-section/hero-visual-rectangle-image-3.jpg");
  }
}

/* ===================================================================
 * CAREER SERVICES SECTION
 * ===================================================================
 */
.career-services-section {
  padding: 0;
  background-color: rgba(253, 254, 255, 1);
  background-image: url("/partner/assets/career-services-section/section-bg-image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;

  .content-container {
    padding-block: var(--space-16);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .career-services-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: rgba(30, 12, 49, 1);
    margin-bottom: var(--space-8);
    line-height: 1.2;
  }

  .career-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
  }

  .career-card {
    background-color: rgba(230, 247, 255, 1);
    border-radius: var(--radius-rectangle);
    padding: var(--space-6);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: transform 0.3s var(--transition-timing-function);

    &:hover {
      transform: var(--card-hover-transition);
      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
    }
  }

  .career-card-icon {
    margin-bottom: var(--space-2);
  }

  .career-card-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: rgba(30, 12, 49, 1);
    margin: 0;
  }

  .career-card-description {
    font-size: var(--font-size-base);
    color: rgba(30, 12, 49, 0.8);
    line-height: 1.5;
    margin: 0;
  }
}

/* Video Modal Styles */
/*
 * VIDEO MODAL OVERLAY: Full-Screen Fixed Positioning
 * 
 * SPECIFICATION:
 * Fixed-position overlay covering entire viewport for video modal display.
 * 
 * TECHNICAL IMPLEMENTATION:
 * 
 * Positioning:
 * - position: fixed - Fixed to viewport, removed from document flow
 * - top: 0, left: 0 - Anchored to viewport origin
 * - width: 100% - Full viewport width
 * - height: 100svh - Full viewport height using small viewport unit
 * 
 * HEIGHT SPECIFICATION:
 * - Unit: 100svh (Small Viewport Height)
 * - Rationale: Fixed positioning requires explicit viewport unit specification
 * - Behavior: Covers entire viewport regardless of browser chrome state
 * - Stability: Maintains full coverage even when Safari UI appears/disappears
 * 
 * USE CASE:
 * Full-screen modal overlays require complete viewport coverage. Using 100svh
 * ensures the overlay remains fully visible on iOS Safari, where viewport
 * dimensions change dynamically based on browser chrome visibility.
 * 
 * ADDITIONAL PROPERTIES:
 * - background: rgba(0, 0, 0, 0.8) - Semi-transparent dark overlay
 * - backdrop-filter: blur(0.5em) - Visual blur effect
 * - z-index: 9999 - Maximum stacking order for overlay visibility
 */
.video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Height: 100% of small viewport height for full-screen coverage */
  height: 100svh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(0.5em);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: var(--space-4);
}

.video-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.video-modal-container {
  position: relative;
  width: 100%;
  max-width: 56.25em; /* 16:9 aspect ratio for 1000px width */
  max-height: 90vh;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 2em 4em rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.video-modal-overlay.show .video-modal-container {
  transform: scale(1);
}

.video-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 2.5em;
  height: 2.5em;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
}

.video-modal-close:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.video-modal-content {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: #000;
}

.video-modal-content video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

.video-hidden,
.video-loading.video-hidden,
.video-error.video-hidden {
  display: none;
}

/* Video Loading State */
.video-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.loading-spinner {
  width: 3em;
  height: 3em;
  border: 0.25em solid rgba(255, 255, 255, 0.3);
  border-top: 0.25em solid var(--color-white);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-3);
}

.loading-text {
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: 500;
  margin: 0;
  text-align: center;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Hide loading when video is ready */
.video-modal-content.loaded .video-loading {
  display: none;
}

/* .video-modal-content.loaded .video-hidden {
  display: block;
} */

.video-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

/* ===================================================================
 * MOCK INTERVIEW SECTION
 * ===================================================================
 */
.mock-interview-section {
  padding-top: var(--nav-height);
  background-color: var(--color-bg); /* Light purple background */

  .content-container {
    height: 100%;
  }

  .section-header {
    text-align: center;
    width: 80%;
    margin: 0 auto var(--space-8);
  }

  .section-title {
    font-size: var(--font-size-xxxl);
    font-weight: 700;
    color: rgba(30, 12, 49, 1);
    line-height: 1.2;
    margin-bottom: var(--space-4);
  }

  .section-subtitle {
    font-size: var(--font-size-lg);
    color: rgba(30, 12, 49, 0.8);
    line-height: 1.6;

    @media screen and (min-width: 1440px) {
      width: 80%;
      margin: 0 auto;
    }
  }

  .mock-interview-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: var(--space-8);
    width: 80%;
    height: 60%;
    max-height: 60%;
    margin: 0 auto;
  }

  .mock-interview-text {
    grid-column: 1/3;
    text-align: left;
  }

  .mock-interview-visual {
    max-height: 100%;
    grid-column: 3/6;
    justify-content: center;
    align-items: center;
  }

  .mock-interview-visual img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
  }

  .feature-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: rgba(30, 12, 49, 1);
    margin-bottom: var(--space-3);
  }

  .underline-purple {
    position: relative;
    display: inline-block;
  }

  .underline-purple::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 4px;
    background-color: var(--color-secondary); /* Purple underline */
    border-radius: 2px;
  }

  .feature-description {
    font-size: var(--font-size-lg);
    color: rgba(30, 12, 49, 0.8);
    line-height: 1.5;
  }
}

/* ===================================================================
 * RESUME BUILDER SECTION
 * ===================================================================
 */
.resume-builder-section {
  padding-top: var(--nav-height);
  background-color: var(--color-bg); /* */

  .content-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .resume-builder-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: var(--space-8);
    width: 80%;
    height: 60%;
    max-height: 60%;
    margin: 0 auto;
  }

  .resume-builder-visual {
    max-height: 100%;
    grid-column: 1/4;
    justify-content: center;
    align-items: center;
  }

  .resume-builder-visual img {
    width: 80%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }

  .resume-builder-text {
    grid-column: 4/6;
    text-align: left;
  }

  .feature-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: rgba(30, 12, 49, 1);
    margin-bottom: var(--space-3);
  }

  .underline-purple {
    position: relative;
    display: inline-block;
  }

  .underline-purple::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 175, 120, 1);
    border-radius: 2px;
  }

  .feature-description {
    font-size: var(--font-size-lg);
    color: rgba(30, 12, 49, 0.8);
    line-height: 1.5;
  }
}

/* ===================================================================
 * COVER LETTER BUILDER SECTION
 * ===================================================================
 */
.cover-letter-builder-section {
  padding-top: var(--nav-height);
  background-color: var(--color-bg); /* White background */

  .content-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cover-letter-builder-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: var(--space-8);
    width: 80%;
    height: 80%;
    margin: 0 auto;
  }

  .cover-letter-builder-text {
    grid-column: 1/3;
    text-align: left;
  }

  .cover-letter-builder-visual {
    max-height: 100%;
    grid-column: 3/6;
    justify-content: center;
    align-items: center;
  }

  .cover-letter-builder-visual img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }

  .feature-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: rgba(30, 12, 49, 1);
    margin-bottom: var(--space-3);
  }

  .underline-orange {
    position: relative;
    display: inline-block;
  }

  .underline-orange::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 175, 120, 1); /* Orange underline */
    border-radius: 2px;
  }

  .feature-description {
    font-size: var(--font-size-lg);
    color: rgba(30, 12, 49, 0.8);
    line-height: 1.5;
  }
}

/* ===================================================================
 * Q&A BANK SECTION
 * ===================================================================
 */
.qa-bank-section {
  padding-top: var(--nav-height);
  background-color: var(--color-bg); /* Light purple background */

  .content-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .qa-bank-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: var(--space-8);
    width: 80%;
    height: 80%;
    margin: 0 auto;
  }

  .qa-bank-visual {
    max-height: 100%;
    grid-column: 1/4;
    justify-content: center;
    align-items: center;
  }

  .qa-bank-visual img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }

  .qa-bank-text {
    grid-column: 4/6;
    text-align: left;
  }

  .feature-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: rgba(30, 12, 49, 1);
    margin-bottom: var(--space-3);
  }

  .underline-orange {
    position: relative;
    display: inline-block;
  }

  .underline-orange::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 175, 120, 1); /* Orange underline */
    border-radius: 2px;
  }

  .feature-description {
    font-size: var(--font-size-lg);
    color: rgba(30, 12, 49, 0.8);
    line-height: 1.5;
  }
}

/* ===================================================================
 * INSTITUTION-SPECIFIC EMPLOYERS SECTION
 * ===================================================================
 */
.institution-specific-employers-section {
  padding-top: var(--nav-height);
  background-color: var(--color-bg); /* White background */

  .content-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .institution-specific-employers-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: var(--space-8);
    width: 80%;
    height: 80%;
    margin: 0 auto;
  }

  .institution-specific-employers-text {
    grid-column: 1/3;
    text-align: left;
  }

  .institution-specific-employers-visual {
    max-height: 100%;
    grid-column: 3/6;
    justify-content: center;
    align-items: center;
  }

  .institution-specific-employers-visual img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }

  .feature-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: rgba(30, 12, 49, 1);
    margin-bottom: var(--space-3);
  }

  .underline-orange {
    position: relative;
    display: inline-block;
  }

  .underline-orange::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 175, 120, 1); /* Orange underline */
    border-radius: 2px;
  }

  .feature-description {
    font-size: var(--font-size-lg);
    color: rgba(30, 12, 49, 0.8);
    line-height: 1.5;
  }
}

/* ===================================================================
 * HIGHLIGHTS SECTION
 * ===================================================================
 */
.highlights-section {
  padding-top: var(--nav-height);
  background-image: url("/partner/assets/highlights-section/highlights-section-bg-image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;

  .content-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--space-16) var(--space-4);
  }

  .highlights-title {
    font-size: var(--font-size-xxxl);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-4);
    color: rgba(30, 12, 49, 1);
  }

  .highlight-simple {
    background: linear-gradient(90deg, #a855f7 0%, #d946ef 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }

  .highlight-secure {
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }

  .highlight-instant {
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }

  .highlights-subtitle {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-12);
  }

  .highlights-cards {
    display: grid;
    height: 30%;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
  }

  .highlight-card {
    padding: var(--space-8);
    border-radius: var(--radius-rectangle);
    text-align: left;
    transition: transform 0.2s var(--transition-timing-function);
    position: relative;
    min-height: 10em;
    &:hover {
      transform: var(--card-hover-transition);
      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
    }
  }

  .highlight-card-purple {
    background: rgba(213, 204, 255, 1);
    box-shadow: 0px 17px 23px 0px rgba(182, 170, 238, 1);
    .highlight-card-title {
      color: rgba(32, 0, 62, 1);
    }
    .highlight-card-description {
      color: rgba(32, 0, 62, 1);
    }
    .highlight-card-number {
      color: rgba(227, 221, 255, 1);
    }
  }

  .highlight-card-blue {
    background: rgba(109, 70, 255, 1);
    box-shadow: 0px 17px 23px 0px rgba(131, 108, 218, 1);
    .highlight-card-title {
      color: rgba(247, 240, 255, 1);
    }
    .highlight-card-description {
      color: rgba(247, 240, 255, 1);
    }
    .highlight-card-number {
      color: rgba(143, 113, 255, 1);
    }
  }

  .highlight-card-cyan {
    background: rgba(147, 230, 220, 1);
    box-shadow: 0px 17px 23px 0px rgba(139, 195, 211, 1);
    .highlight-card-number {
      color: rgba(161, 255, 213, 1);
    }
    .highlight-card-description {
      color: rgba(32, 0, 62, 1);
    }
    .highlight-card-number {
      color: rgba(227, 221, 255, 1);
    }
  }

  .highlight-card-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: rgba(30, 12, 49, 1);
    margin-bottom: var(--space-3);
  }

  .highlight-card-description {
    font-size: var(--font-size-base);
    color: rgba(30, 12, 49, 0.8);
    line-height: 1.5;
    margin: 0;
  }

  .highlight-card-number {
    position: absolute;
    font-size: var(--font-size-xxxl);
    z-index: 1;
    color: inherit;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    font-family: Inter;
    font-weight: 700;
    font-style: Bold;
    font-size: var(--font-size-xxxl);
    line-height: 100%;
    letter-spacing: 0%;
  }
}

/* ===================================================================
 * TESTIMONIALS SECTION
 * ===================================================================
 */
.testimonials-section {
  padding-top: var(--nav-height);
  /* background: hsla(39, 100%, 98%, 1); */
  background: linear-gradient(
    hsla(39, 100%, 98%, 1) 50%,
    hsla(0, 0%, 100%, 1) 100%
  );
  position: relative;
  overflow: hidden;
  text-align: center;

  .content-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-16) var(--space-4);
    position: relative;
    z-index: 2;
  }

  .testimonials-title {
    font-size: var(--font-size-xxxl);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-6);
    color: hsla(271, 100%, 12%, 1);
  }

  .testimonials-cards {
    display: flex;
    gap: var(--space-8);
    justify-content: center;
    padding: var(--space-8);
    width: 80%;
    height: 80%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  .testimonial-card {
    padding: var(--space-8);
    border-radius: var(--radius-rectangle);
    text-align: left;
    display: flex;
    flex-direction: column;
    width: 35%;
    max-height: 20em;
    gap: var(--space-4);
    transition: transform 0.2s var(--transition-timing-function);
    position: relative;

    &:hover {
      transform: var(--card-hover-transition);
      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
    }
  }

  .testimonial-card-purple {
    background: hsla(251, 62%, 60%, 1);
    .testimonial-role,
    .testimonial-text {
      color: hsla(0, 0%, 100%, 1);
    }
  }

  .testimonial-card-cyan {
    background: hsla(173, 62%, 60%, 1);
    .testimonial-role,
    .testimonial-text {
      color: hsla(271, 100%, 12%, 1);
    }
  }

  .testimonial-avatar {
    flex-shrink: 0;
    width: 6em;
    height: 6em;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }

  .testimonial-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .testimonial-role {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
  }

  .testimonial-text {
    font-size: var(--font-size-base);
    line-height: 1.5;
    margin: 0;
  }

  /* Background Decorative Shapes */
  .testimonial-bg-shape {
    position: absolute;
    z-index: 1;
    pointer-events: none;
  }

  .testimonial-shape-purple-square {
    width: 3%;
    height: auto;
    top: 5%;
    left: 5%;
  }

  .testimonial-shape-purple-square-small {
    width: 1%;
    height: auto;
    top: 21%;
    right: 29%;
  }

  .testimonial-shape-orange-circle {
    width: 2%;
    height: auto;
    top: 60%;
    left: 15%;
  }

  .testimonial-shape-orange-square {
    width: 3%;
    height: auto;
    bottom: 27%;
    right: 5%;
  }

  .testimonial-shape-blue-square {
    width: 10%;
    height: auto;
    top: 30%;
    left: 20%;
  }

  .testimonial-shape-twisted-thread {
    width: 15%;
    height: auto;
    bottom: 56%;
    left: 4%;
  }

  .testimonial-shape-ellipse-union {
    width: 12%;
    height: auto;
    bottom: 15%;
    right: 15%;
  }

  .swiper-wrapper {
    max-width: 100%;
  }

  /* Display testimonials as regular divs on desktop (no carousel) */
  @media (min-width: 767px) {
    .testimonials-cards {
      display: flex !important;
      gap: var(--space-6);
      justify-content: center;
      align-items: stretch;
    }

    .testimonial-card {
      flex: 1;
      max-width: calc(45% - var(--space-3));
      width: auto;
    }

    .swiper-wrapper {
      justify-content: center;
      gap: var(--space-6);
    }
  }

  @media (max-width: 1280px) {
    font-size: 0.9em;
  }

  @media (min-width: 1500px) {
    .testimonial-card {
      max-width: calc(35% - var(--space-3));
    }
  }
}

/* CTA Section */
.cta-section {
  background: var(--color-cta-section-bg);
  position: relative;
  padding: var(--section-padding-y) var(--section-padding-x) 0
    var(--section-padding-x);
  overflow: hidden;
}

.cta-container {
  max-width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  position: relative;
  z-index: 2;
  height: 60%;
}

.cta-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  height: 50%;
  align-self: center;
  width: 80%;
  justify-self: start;

  .cta-left-button-container {
    width: 100%;
    display: flex;
    gap: var(--space-4);
    justify-content: start;
  }
}

.cta-title {
  font-size: var(--font-size-xxxxl);
  font-weight: 700;
  line-height: 1.2;
  color: hsla(269, 61%, 12%, 1);
  margin: 0;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--gradient-button-bg);
  color: var(--color-white);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-circle);
  font-weight: 700;
  font-size: var(--font-size-lg);
  transition:
    all 0.2s var(--transition-timing-function),
    box-shadow 0.2s ease;
  width: fit-content;
  box-shadow: var(--shadow-base);
  border: var(--gradient-button-border);
}

.btn-pill:hover {
  transform: var(--button-hover-transition);
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
}

.btn-pill-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: #1e0c31;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-circle);
  font-weight: 700;
  font-size: var(--font-size-lg);
  border: 0.125em solid #1e0c31;
  transition:
    all 0.2s var(--transition-timing-function),
    box-shadow 0.2s ease;
  width: fit-content;
}

.btn-pill-secondary:hover {
  transform: var(--button-hover-transition);
  box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
}

.btn-icon {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
}

.cta-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  height: 50%;
  align-self: center;
}

.cta-col {
  justify-self: start;
  align-self: start;
}

.cta-col h3 {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--color-text-strong);
  margin: 0 0 var(--space-2) 0;
}

.cta-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cta-col li {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  transition: transform 0.2s var(--transition-timing-function);

  &:hover {
    transform: translateY(0.125em) scale(0.98);
  }
}

.cta-col a {
  color: var(--color-link);
  text-decoration: none;
  font-size: var(--fs-body);
  transition: color 0.2s ease;
}

.cta-bottom {
  width: 80%;
  margin: 0 auto 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 7%;
  margin-bottom: var(--space-6);
}

.contact-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-strong);
  margin: 0;
  font-weight: 600;
  display: flex;
  flex-direction: column;
}

.contact-info a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-info .address {
  margin: 0;
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.copyright {
  font-size: var(--font-size-sm);
  color: var(--color-text-strong);
  margin: 0;
  font-weight: 600;
}

/* Background Shapes */
.bg-shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.bg-shape-left {
  width: var(--shape-left-width);
  height: calc(var(--shape-left-width) + 1rem);
  top: var(--shape-left-top);
  left: var(--shape-left-left);
}

.bg-shape-right {
  width: var(--shape-right-width);
  height: calc(var(--shape-right-width) + 1rem);
  top: var(--shape-right-top);
  right: var(--shape-right-right);
}

/* Site Footer */
.cts-footer {
  background: var(--color-footer-bg);
  /* position: relative; */
  height: 30%;
  overflow: hidden;
}

.footer-vector {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center center;
  /* z-index: 1; */
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (min-width: 769px) {
  /*
   * RESPONSIVE SECTIONS: Viewport Height Specification
   * 
   * SPECIFICATION:
   * Full-height section implementation for desktop and tablet viewports.
   * 
   * TECHNICAL DETAILS:
   * - Media query: min-width: 769px (tablet and desktop breakpoint)
   * - Height unit: 100svh (Small Viewport Height)
   * - Scroll behavior: scroll-snap-align: start for snap point alignment
   * 
   * IMPLEMENTATION:
   * All major content sections use 100svh for consistent viewport-height
   * calculation. This ensures sections fill the entire viewport height while
   * maintaining stability across browser chrome state changes.
   * 
   * SECTIONS AFFECTED:
   * - Hero content, problem statement, AI mock interview
   * - Cover letter, resume builder, testimonials
   * - Pricing, resources, universities, webinar
   * - CTA sections and career center sections
   * 
   * VIEWPORT UNIT BEHAVIOR:
   * - Desktop browsers: 100svh equals 100vh (no dynamic chrome)
   * - iOS Safari: 100svh provides stable height regardless of chrome visibility
   * - Result: Consistent full-height sections across all platforms
   * 
   * SCROLL SNAP COORDINATION:
   * Each section snaps to viewport start, creating full-screen section scrolling
   * experience. Height stability ensures snap points remain accurate during
   * browser chrome state transitions.
   */
  /* all sections */
  .hero-section,
  .career-services-section,
  .mock-interview-section,
  .resume-builder-section,
  .cover-letter-builder-section,
  .qa-bank-section,
  .institution-specific-employers-section,
  .highlights-section,
  .testimonials-section,
  .cta-section {
    height: 100svh;
    scroll-snap-align: start;
    min-height: 42em;
  }
  .career-services-section {
    padding-block-start: var(--nav-height);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-section {
    font-size: 0.8em;
  }
  .career-services-section {
    font-size: 0.8em;
    .career-services-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-4);

      .career-card {
        width: 70%;
        justify-self: center;
      }
    }
  }
  .testimonials-section {
    .testimonials-cards {
      width: 90%;
      .swiper-wrapper {
        width: 100%;
        .testimonial-card {
          max-width: calc(50% - var(--space-3));
        }
      }
    }
  }
  .mock-interview-section,
  .resume-builder-section,
  .cover-letter-builder-section,
  .qa-bank-section,
  .institution-specific-employers-section,
  .highlights-section,
  .testimonials-section,
  .cta-section {
    font-size: 0.8em;
  }

  .cta-section {
    .cta-title {
      font-size: var(--font-size-xxxxl);
    }
    .btn-pill,
    .btn-pill-secondary {
      font-size: var(--font-size-base);
    }
    .footer-vector {
      object-position: left center;
    }
  }
}

@media (min-width: 769px) and (max-width: 1000px) {
  .hero-section {
    font-size: 0.7em;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  .hero-section {
    font-size: 0.9em;
  }
  .mock-interview-section,
  .resume-builder-section,
  .cover-letter-builder-section,
  .qa-bank-section,
  .institution-specific-employers-section,
  .highlights-section,
  .testimonials-section {
    font-size: 0.9em;
  }
}

@media (max-width: 768px) {
  .top-nav-bar {
    --container-padding: 5%;

    .top-nav-bar-right-menu {
      display: none;
    }
    .top-nav-bar-hamburger {
      display: block;
    }
  }

  .container {
    padding-top: var(--nav-height);
  }

  .hero-section {
    .hero-container {
      margin: 0 auto;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(2, 1fr);
      min-height: 42em;

      .hero-left {
        grid-column: 1 / 2;
        grid-row: 1 / 2;

        .hero-buttons {
          align-items: center;
          justify-content: center;
          .btn-primary,
          .btn-secondary {
            font-size: var(--font-size-base);
            width: 70%;
          }
        }
      }

      .hero-right {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
      }
    }

    .logo-container {
      --fade-effect-width: 5em;
    }
  }

  .career-services-section {
    padding: 0;

    .career-services-title {
      font-size: var(--font-size-xl);
      padding: 0;
    }

    .career-services-grid {
      grid-template-columns: 1fr;
      padding: 0 var(--space-4);
    }

    .career-card {
      padding: var(--space-5);
      width: 90%;
      justify-self: center;
    }
  }

  .mock-interview-section {
    padding: var(--space-8) 0 0 0;
    .section-title {
      font-size: var(--font-size-xxl);
    }

    .section-header {
      width: 90%;
    }

    .feature-title {
      font-size: var(--font-size-lg);
    }

    .mock-interview-content {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 2fr;
      gap: 0;
    }

    .mock-interview-visual {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      justify-self: center;
      text-align: center;
      height: 100%;
      img {
        height: 100%;
      }
    }

    .mock-interview-description {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      justify-self: center;
      text-align: center;
      .feature-title {
        text-align: center;
      }
    }
  }

  .resume-builder-section {
    padding: 0;

    .feature-title {
      font-size: var(--font-size-lg);
    }

    .resume-builder-content {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 2fr;
      gap: 0;
      width: 80%;
    }

    .resume-builder-visual {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      justify-self: center;
      text-align: center;
      height: 100%;
      img {
        height: 100%;
      }
    }

    .resume-builder-text {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      justify-self: center;
      text-align: left;
      .feature-title {
        text-align: left;
      }
    }
  }

  .cover-letter-builder-section {
    padding: 0;

    .feature-title {
      font-size: var(--font-size-lg);
    }

    .cover-letter-builder-content {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 2fr;
      gap: 0;
      width: 80%;
    }

    .cover-letter-builder-text {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      justify-self: center;
      text-align: left;
      .feature-title {
        text-align: left;
      }
    }

    .cover-letter-builder-visual {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      justify-self: center;
      text-align: center;
      height: 100%;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }

  .qa-bank-section {
    padding: 0;

    .feature-title {
      font-size: var(--font-size-lg);
    }

    .qa-bank-content {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1.5fr;
      gap: 0;
      width: 80%;
    }

    .qa-bank-text {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      justify-self: center;
      text-align: left;
      .feature-title {
        text-align: left;
      }
    }

    .qa-bank-visual {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      justify-self: center;
      text-align: center;
      height: 100%;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }

  .institution-specific-employers-section {
    padding: 0;

    .feature-title {
      font-size: var(--font-size-lg);
    }

    .institution-specific-employers-content {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 2fr;
      gap: 0;
      width: 80%;
    }

    .institution-specific-employers-text {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      justify-self: center;
      text-align: left;
      .feature-title {
        text-align: left;
      }
    }

    .institution-specific-employers-visual {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      justify-self: center;
      text-align: center;
      height: 100%;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }

  .highlights-section {
    padding: var(--space-8) 0;

    .content-container {
      padding-block: 0;
    }

    .highlights-title {
      font-size: var(--font-size-xxl);
      padding: 0 var(--space-4);
    }

    .highlights-subtitle {
      font-size: var(--font-size-base);
      padding: 0 var(--space-4);
      margin-bottom: var(--space-8);
    }

    .highlights-cards {
      grid-template-columns: 1fr;
      gap: var(--space-8);
      padding: 0 var(--space-4);
    }

    .highlight-card {
      padding: var(--space-6);
    }

    .highlight-card-title {
      font-size: var(--font-size-base);
    }

    .highlight-card-description {
      font-size: var(--font-size-sm);
    }
  }

  .testimonials-section {
    padding: 0;

    .content-container {
      padding-block: var(--space-8);
    }

    .testimonials-title {
      font-size: var(--font-size-xxl);
      padding: 0 var(--space-4);
      margin-bottom: var(--space-8);
    }

    .testimonials-cards {
      gap: var(--space-6);
      padding: 0 var(--space-4);
    }

    .testimonial-card {
      padding: var(--space-6);
      flex-direction: column;
      align-items: flex-start;
      height: auto;
    }

    .testimonial-avatar {
      width: 3.5em;
      height: 3.5em;
    }

    .testimonial-role {
      font-size: var(--font-size-sm);
    }

    .testimonial-text {
      font-size: var(--font-size-sm);
    }
  }

  .cta-section {
    font-size: 0.9em;

    .cta-title {
      font-size: var(--font-size-xxxl);
    }

    .cts-footer {
      .footer-vector {
        object-fit: contain;
      }
    }
    .cta-container {
      max-width: 90%;
      gap: 0;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
      .cta-links {
        height: 100%;
        .cta-col {
          align-self: center;
        }
      }

      .cta-left-button-container {
        flex-direction: column;

        .btn-pill,
        .btn-pill-secondary {
          width: 80%;
        }

        .btn-pill-secondary {
          display: flex;
          justify-content: center;
        }
      }
    }
    .cta-bottom {
      flex-direction: column;
      align-items: start;
      margin-inline: auto;
      width: 90%;
    }
  }
}

/* Hide Swiper pagination on desktop where carousel is disabled */
@media (min-width: 768px) {
  .testimonials-section .swiper-pagination-container {
    display: none;
  }
  .career-services-section {
    .content-container {
      padding: 0;
      height: 80%;
    }
  }
}

@media (min-width: 1440px) and (max-height: 800px) {
  .cta-title {
    font-size: var(--font-size-xxxl);
  }
}

@media (min-width: 1024px) and (max-height: 600px) {
  .cta-title {
    font-size: var(--font-size-xxxl);
  }
}

@media (orientation: landscape) and (max-height: 650px) {
  .content {
    font-size: 0.8em;
  }
}

@media (orientation: landscape) and (min-height: 500px) and (max-height: 750px) {
  .cta-title {
    font-size: var(--font-size-xxxl);
  }
  .btn-pill-secondary,
  .btn-pill {
    font-size: var(--font-size-sm);
  }
}

/* ===================================================================
 * FORM MODAL STYLES
 * ===================================================================
 */
.form-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(0.5em);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: var(--space-4);
}

.form-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.form-modal-container {
  position: relative;
  width: 100%;
  max-width: 37.5em;
  max-height: 90vh;
  background: var(--color-white);
  border-radius: var(--radius-rectangle);
  box-shadow: 0 2em 4em rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 92, 255, 0.3) transparent;
}

.form-modal-overlay.show .form-modal-container {
  transform: scale(1);
}

.form-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 2.5em;
  height: 2.5em;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 50%;
  color: rgba(30, 12, 49, 1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
}

.form-modal-close:hover {
  background: rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

.form-modal-content {
  padding: var(--space-8) var(--space-6);
}

.form-modal-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: rgba(30, 12, 49, 1);
  text-align: center;
}

.form-modal-subtitle {
  font-size: var(--font-size-base);
  color: rgba(30, 12, 49, 0.7);
  text-align: center;
  padding-bottom: var(--space-2);
  border-bottom: 0.0625em solid rgba(30, 12, 49, 0.15);
}

.form-section-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: rgba(30, 12, 49, 1);
  text-align: left;
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: rgba(30, 12, 49, 1);
}

.form-group .required {
  color: #ef4444;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: var(--space-2) var(--space-2);
  border: 0.125em solid rgba(30, 12, 49, 0.2);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: rgba(30, 12, 49, 1);
  transition: all 0.2s ease;
  background: var(--color-white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.1875em rgba(123, 92, 255, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(30, 12, 49, 0.4);
}

.form-group textarea {
  resize: vertical;
  min-height: 6.25em;
}

.form-submit-btn {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--gradient-button-bg);
  color: var(--color-white);
  border: var(--gradient-button-border);
  border-radius: var(--radius-circle);
  font-size: var(--font-size-lg);
  font-weight: 700;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s var(--transition-timing-function);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.form-submit-btn:hover:not(:disabled) {
  transform: var(--button-hover-transition);
  box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
}

.form-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.btn-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Success and Error States */
.form-success,
.form-error {
  text-align: center;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.form-hidden {
  display: none !important;
}

.success-icon,
.error-icon {
  margin-bottom: var(--space-2);
}

.form-success h3,
.form-error h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: rgba(30, 12, 49, 1);
  margin: 0;
}

.form-success p,
.form-error p {
  font-size: var(--font-size-base);
  color: rgba(30, 12, 49, 0.7);
  margin: 0;
  max-width: 25em;
}

.form-close-btn,
.form-retry-btn {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-8);
  background: var(--gradient-button-bg);
  color: var(--color-white);
  border: var(--gradient-button-border);
  border-radius: var(--radius-circle);
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s var(--transition-timing-function);
}

.form-close-btn:hover,
.form-retry-btn:hover {
  transform: var(--button-hover-transition);
  box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .form-modal-container {
    max-width: 95%;
  }

  .form-modal-content {
    padding: var(--space-6) var(--space-4);
  }

  .form-modal-title {
    font-size: var(--font-size-xl);
  }

  .form-submit-btn {
    font-size: var(--font-size-base);
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  .btn-pill,
  .btn-pill-secondary {
    font-size: var(--font-size-base);
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .btn-pill,
  .btn-pill-secondary {
    font-size: var(--font-size-sm);
  }
}

@media (min-width: 500px) and (max-width: 768px) {
  .hero-section {
    .hero-right {
      min-height: 30em;
      width: 60%;
      margin: 0 auto;
    }
  }
}

@keyframes marquee-content {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 1500px) {
  .hero-section {
    .hero-right {
      height: 75%;
      width: 95%;
      top: 5%;
    }
    .hero-visual-rectangle-image {
      --width: 40%;
    }
    .hero-visual-rectangle-image-1 {
      right: 10%;
    }
    .hero-visual-rectangle-image-3 {
      left: 0%;
    }
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-section {
    .hero-right {
      height: 70% !important;
      width: 100%;
      top: auto;
    }
    .hero-visual-rectangle-image {
      --width: 35%;
    }
  }
}
@media (min-width: 320px) and (max-width: 932px) {
  .hero-section {
    .hero-visual {
      height: 90% !important;
    }
  }
}
@media (max-width: 1500px) and (orientation: portrait) {
  .hero-section {
    .hero-right {
      height: 70%;
      width: 100%;
      top: 5%;
    }
    .hero-visual-rectangle-image {
      --width: 35%;
    }
    .hero-visual-rectangle-image-1 {
      right: 10%;
    }
    .hero-visual-rectangle-image-3 {
      left: 0%;
    }
  }
}
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  .hero-container {
    height: 50% !important;
  }
}
@media (min-width: 320px) and (max-width: 932px) and (orientation: portrait) {
  .hero-section {
    .hero-right {
      height: 65% !important;
      width: 100%;
      top: auto;
    }
    .hero-visual {
      width: 90% !important;
    }
    .hero-visual-rectangle-image-1 {
      right: 0%;
    }
    .hero-container {
      height: 50% !important;
    }
  }
}
@media (max-height: 500px) and (max-width: 932px) and (orientation: landscape) {
  .hero-section {
    .hero-right {
      height: 70% !important;
      width: 80%;
      top: 2%;
    }
    .hero-visual-rectangle-image-1 {
      right: 0%;
    }
  }
}
/* @media (min-width: 560px) and (max-height: 580px) {
  .hero-section {
    .hero-right {
        height: 80% !important;
        width: 100%;
        top: 5%;
    }
  }
} */
/* ===================================================================
 * CONTACT FORM MODAL STYLES
 * ===================================================================
 */
.contact-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(0.5em);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: var(--space-4);
}

.contact-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.contact-modal-container {
  position: relative;
  width: 100%;
  max-width: 32em;
  max-height: 90vh;
  background: rgb(255 255 255);
  border-radius: var(--radius-rectangle);
  box-shadow: 0 2em 4em rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 92, 255, 0.3) transparent;
}

.contact-modal-overlay.show .contact-modal-container {
  transform: scale(1);
}

.contact-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 2em;
  height: 2em;
  background: transparent;
  border: none;
  color: rgba(30, 12, 49, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
}

.contact-modal-close:hover {
  color: rgba(30, 12, 49, 0.8);
  transform: scale(1.1);
}

.contact-modal-content {
  padding: var(--space-8) var(--space-6);
  position: relative;
}

.contact-modal-title {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  color: rgba(30, 12, 49, 1);
  text-align: left;
  margin: 0 0 var(--space-3) 0;
}

.contact-modal-subtitle {
  font-size: var(--font-size-base);
  color: rgba(30, 12, 49, 0.8);
  text-align: left;
  margin: 0;
  line-height: 1.4;
}

.contact-modal-subtitle-secondary {
  font-size: var(--font-size-base);
  color: rgba(30, 12, 49, 0.8);
  text-align: left;
  margin: 0 0 var(--space-6) 0;
  line-height: 1.4;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-form-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.contact-form-group-icon {
  position: relative;
}

.contact-form-group-icon .input-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.contact-form-group-icon input {
  padding-left: calc(var(--space-3) + 1.75em + var(--space-2));
}

.contact-form-group input,
.contact-form-group textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(30, 12, 49, 0.15);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: rgba(30, 12, 49, 1);
  transition: all 0.2s ease;
  background: var(--color-white);

  &#contact-email {
    padding-inline-start: calc(var(--space-4) + 1.5em);
  }
}

.contact-form-group input:focus,
.contact-form-group textarea:focus {
  outline: none;
  border-color: rgba(30, 12, 49, 0.3);
  box-shadow: 0 0 0 0.125em rgba(30, 12, 49, 0.05);
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
  color: rgba(30, 12, 49, 0.4);
}

.contact-form-group textarea {
  resize: vertical;
  min-height: 6em;
}

.contact-submit-btn {
  align-self: flex-end;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: rgba(30, 12, 49, 1);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-circle);
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s var(--transition-timing-function);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 50%;
}

.contact-submit-btn:hover:not(:disabled) {
  transform: var(--button-hover-transition);
  box-shadow: 0 0.25em 1em rgba(30, 12, 49, 0.3);
}

.contact-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Contact Success and Error States */
.contact-success,
.contact-error {
  text-align: center;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.contact-hidden {
  display: none !important;
}

.contact-success h3,
.contact-error h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: rgba(30, 12, 49, 1);
  margin: 0;
}

.contact-success p,
.contact-error p {
  font-size: var(--font-size-base);
  color: rgba(30, 12, 49, 0.7);
  margin: 0;
  max-width: 25em;
}

.contact-retry-btn {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-8);
  background: rgba(30, 12, 49, 1);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-circle);
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s var(--transition-timing-function);
}

.contact-retry-btn:hover {
  transform: var(--button-hover-transition);
  box-shadow: 0 0.25em 1em rgba(30, 12, 49, 0.3);
}

/* Mobile Responsive for Contact Modal */
@media (max-width: 768px) {
  .contact-modal-container {
    max-width: 95%;
  }

  .contact-modal-content {
    padding: var(--space-6) var(--space-4);
  }

  .contact-modal-title {
    font-size: var(--font-size-xl);
  }

  .contact-submit-btn {
    width: 100%;
    justify-content: center;
  }
}