w-webflow-badge {
  display: none !important;
  visibility: hidden !important;
} /* masketan main */
/*@import url("https://use.typekit.net/wvf3pil.css");*/

:root {
  font-family: halyard-display, sans-serif;
  font-weight: 300;
  font-style: normal;
  /* Default nav color (will be overridden by body classes) */
  --nav-fg: #fff6ea;
}

/* Navigation Theme Variables */
body[data-nav-theme="dark"] {
  --nav-fg: #fff6ea;
}

body[data-nav-theme="light"] {
  --nav-fg: #24283e;
}

/* Apply nav theme color to logo and nav elements */
.masketan-logo,
.masketan-mfo,
[data-nav-theme] .nav-link,
.nav-link {
  color: var(--nav-fg);
  transition:
    color 250ms ease,
    fill 250ms ease,
    stroke 250ms ease;
}

/* Top Navigation */
.top-nav {
  /* Sticky behavior - pure CSS */
  position: sticky;

  z-index: 1000;

  /* No backdrop-filter (glass effect disabled) */
  /* GSAP handles smooth background color transitions */
}

/* Section Scroll Snapping - Account for navbar height */
[data-section] {
  scroll-margin-top: 80px;
}

/* Nav Glass - Glass morphism effect when in other sections (logo compact) */
.top-nav-glass {
  /* Default: no glass effect - styles applied via .active class */
  transition:
    background 0.6s ease,
    border-radius 0.6s ease,
    box-shadow 0.6s ease,
    backdrop-filter 0.6s ease,
    border 0.6s ease;
}

.top-nav-glass.active {
  background: rgba(214, 214, 214, 0.19);
  border-radius: 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(214, 214, 214, 0.44);
}

/* Ensure SVG elements inherit color */
.masketan-logo svg,
.masketan-mfo svg {
  fill: currentColor;
  stroke: currentColor;
}

/* Logo color override: #fff6ea when navigation is open (mobile overlay) */
.top-nav[data-navigation-status="active"] .masketan-logo,
.top-nav[data-navigation-status="active"] .masketan-mfo,
.top-nav[data-navigation-status="active"] .masketan-logo-mask {
  color: #fff6ea;
}

/* Nav Logo Grid Gap - Responsive on Tablet */
@media screen and (max-width: 991px) {
  /* Default: smaller gap when in hero (not sticky) */
  .nav-logo {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    z-index: 2001;
  }

  /* Larger gap when sticky/compact */
  .top-nav[data-nav-state="sticky"] .nav-logo {
    grid-column-gap: 13px;
    grid-row-gap: 13px;
  }
}

/* Back to Top Button */
/* Hide the back-to-top wrapper on default (to prevent flash on loaded site) */
[data-back-to-top="wrap"] {
  opacity: 0;
}

/* Show the button in the Webflow environment */
.wf-design-mode [data-back-to-top="wrap"],
.w-editor [data-back-to-top="wrap"] {
  opacity: 1;
}

.back-top__arrow-row {
  transition: transform 0.5s cubic-bezier(0.65, 0, 0, 1);
}

.back-top__button {
  transition: border-width 0.5s cubic-bezier(0.65, 0, 0, 1);
}

/* Keyboard focus state */
.back-top__button:focus-visible {
  border-width: 0.6em;
}

.back-top__button:focus-visible .back-top__arrow-row {
  transform: translate(0px, -100%);
}

/* Hover styling */
@media (hover: hover) {
  .back-top__button:hover {
    border-width: 0.6em;
  }

  .back-top__button:hover .back-top__arrow-row {
    transform: translate(0px, -100%);
  }
}

/* Navigation Inkbar - CSS-based underline */
.nav-link {
  text-decoration: none;
  position: relative;
}

.nav-link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  /* Constrain underline width to viewport on mobile */
  max-width: 100vw;
  box-sizing: border-box;
}

/* Show underline ONLY on active link (persistent when not in hero) */
.nav-link[aria-current="page"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}

/* Show underline on hover (temporary - works in hero section too) */
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  /* Active link stays visible on hover */
  .nav-link[aria-current="page"]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}

/* Focus state for accessibility */
.nav-link:focus-visible::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}

/* Services Spotlight - Base state */
[data-service-item="true"] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  will-change: opacity, transform;
  pointer-events: auto;
}

/* Services Carousel - Mobile/Tablet */
/* 1. Viewport Lockdown */
[data-services-viewport] {
  position: static;
  overflow-x: hidden !important; /* Forces clipping of the track */
  /*width: 100%;
  max-width: 100vw;*/
  margin: 0;
  padding-top: 200px;
  --slider-status: off; /* Default: slider off */
  --slider-spv: 1.5; /* Slides per view - shows 1.5 items on tablet */
  --slider-gap: 16px; /* Slides Gap */
}

/* Tablet: Enable slider (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  [data-services-viewport] {
    --slider-status: on; /* Enable slider on tablet */
    --slider-spv: 1.5; /* Shows 1.5 items on tablet for better UX */
    padding-top: 0; /* Remove top padding on tablet */
  }
}

/* Mobile: Enable slider (≤767px) */
@media screen and (max-width: 767px) {
  [data-services-viewport] {
    --slider-status: on; /* Turn on slider on mobile */
    --slider-spv: 1; /* Show 1 item on mobile */
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
  }
  .services {
    width: 100% !important;
  }
}

/* 2. Track & Item Constraint */
@media screen and (max-width: 991px) {
  /* Switch grid-system to block layout on mobile so slider can fill viewport */
  .services-section .grid-system {
    display: block !important;
  }

  /* Remove top padding on tablet and below */
  [data-services-viewport] {
    padding-top: 0;
  }

  [data-services-track] {
    display: flex;
    flex-wrap: nowrap; /* Keep items side-by-side for slider */
    width: auto;
    /*min-width: 100%;*/
    margin: 0 !important;
    padding: 0 !important;
    will-change: transform;
  }

  [data-service-item="true"] {
    /* Critical: Allows flex items to shrink below their text content size */
    min-width: 0 !important;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .services {
    width: 100% !important;
  }
}

/* Governance stack CSS disabled */

/* 3. Mobile Text Wrapping (479px and below) */
@media screen and (max-width: 479px) {
  [data-services-viewport] {
    --slider-status: on;
    --slider-spv: 1;
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .list-item {
    word-break: normal !important; /* Fixes the 'no-wrap' issue */
    overflow-wrap: break-word !important;
    white-space: normal !important;
    width: 100% !important;
    display: block !important;
    line-height: 1.4 !important;
  }

  /* Ensure the services container doesn't have an inherited width:auto */
  .services {
    width: 100% !important;
  }
}
[data-services-track] > [data-service-item="true"] {
  /* Calculate item width accounting for flexbox gap */
  /* When SPV = 1: Show 1 item, 0 visible gaps => gap*(1-1)=0 => 100%/1 = 100% ✓ */
  /* When SPV = 1.5: Show 1.5 items, 1 visible gap => gap*(1.5-1)=gap*0.5 => (100% - gap*0.5)/1.5 */
  /* Note: For SPV > 1, there's always 1 visible gap between items, so we use (spv-1) as multiplier */
  /* This works correctly: SPV=1 → no gap, SPV=1.5 → 0.5 gap factor, SPV=2 → 1 gap factor */
  flex: 0 0
    calc(
      (100% - var(--slider-gap, 16px) * (var(--slider-spv, 1.5) - 1)) /
        var(--slider-spv, 1.5)
    );
  opacity: 1;
  min-width: 0; /* CRITICAL: Allows flex items to shrink below their content size */
  box-sizing: border-box;
  transform: none;
  /* Ensure items have no margin that would cause offset */
  margin: 0;
}

/* Track hover states */
[data-services-track-status="grab"] {
  cursor: grab;
}

[data-services-track-status="grabbing"] {
  cursor: grabbing;
}

/* Item status states - placeholder for custom styling */
[data-service-item-status="active"] {
  /* Active slide styles can be added here */
  opacity: 1;
}

[data-service-item-status="inview"] {
  /* In-view but not active slide styles */
  opacity: 1;
}

[data-service-item-status="not-active"] {
  /* Out of view slide styles */
  opacity: 0.6;
}

/* Services Slider Controls Wrapper */
[data-gsap-slider-controls] {
  /*position: absolute !important;
  left: 50% !important;
  bottom: 16px !important;
  transform: translateX(-50%) !important;*/
  display: flex !important;
  gap: 12px !important;
  z-index: 2000 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Masked Infinite Navigation Buttons - CSS Variables */
:root {
  --mask-btn-size: 56px;
  --mask-icon-size: 22px;
  --mask-transition-speed: 0.5s;
  --mask-border-color-idle: #000000; /* slate-200 */
  --mask-border-color-hover: #39826a; /* slate-800 */
  --mask-icon-color-idle: #000000; /* slate-600 */
  --mask-icon-color-active: #39826a; /* slate-900 */
  --mask-icon-color-ghost: #303030; /* slate-400 */
  --mask-shift-distance: 40px;
}

/* Services Slider Controls - Masked Button Base */
[data-services-control] {
  position: relative;
  width: var(--mask-btn-size);
  height: var(--mask-btn-size);
  /*border-radius: 50%;*/
  border: 1px solid var(--mask-border-color-idle);
  background: transparent;
  cursor: pointer;
  overflow: hidden; /* Critical: creates the masking effect */
  display: flex !important;
  justify-content: center;
  align-items: center;
  transition:
    border-color var(--mask-transition-speed),
    transform 0.1s;
  padding: 0;
  outline: none;
  pointer-events: auto;
  visibility: visible !important;
}

[data-services-control]:hover {
  border-color: var(--mask-border-color-hover);
}

[data-services-control]:active {
  transform: scale(0.95);
}

/* Icon Track Container (moves on hover) */
[data-services-control] .icon-track,
[data-services-control] > div {
  display: flex;
  align-items: center;
  position: relative;
  transition: transform var(--mask-transition-speed)
    cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--mask-icon-color-idle);
}

/* Shift track on hover - Next button moves right */
[data-services-control="next"]:hover .icon-track,
[data-services-control="next"]:hover > div {
  transform: translateX(var(--mask-shift-distance));
}

/* Shift track on hover - Prev button moves left */
[data-services-control="prev"]:hover .icon-track,
[data-services-control="prev"]:hover > div {
  transform: translateX(calc(-1 * var(--mask-shift-distance)));
}

/* Primary Icon (visible initially) */
[data-services-control] .icon-primary {
  flex-shrink: 0;
  transition: color var(--mask-transition-speed);
}

[data-services-control]:hover .icon-primary {
  color: var(--mask-icon-color-active);
}

/* Disabled state - prevent hover effects */
[data-services-control]:disabled:hover .icon-track,
[data-services-control]:disabled:hover > div {
  transform: none;
}

[data-services-control]:disabled:hover .icon-primary {
  color: var(--mask-icon-color-idle);
}

/* Secondary Icon (enters from left for next, right for prev) */
[data-services-control] .icon-secondary {
  position: absolute;
  flex-shrink: 0;
  color: var(--mask-icon-color-ghost);
}

/* Next button: secondary icon enters from left */
[data-services-control="next"] .icon-secondary {
  left: calc(-1 * var(--mask-shift-distance));
}

/* Prev button: secondary icon enters from right */
[data-services-control="prev"] .icon-secondary {
  right: calc(-1 * var(--mask-shift-distance));
}

[data-services-control] svg {
  width: var(--mask-icon-size);
  height: var(--mask-icon-size);
}

[data-services-control]:disabled,
[data-services-control][data-state="disabled"] {
  opacity: 0.5 !important; /* Make disabled buttons more visible */
  pointer-events: none;
  cursor: not-allowed;
}

/* Hover styles are handled by border-color and icon-track transform above */

/* Control status states */
[data-services-slider-status="not-active"] [data-services-control] {
  /* Hide buttons when slider is not active (disabled) */
  display: none !important;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

[data-services-control-status="not-active"] {
  opacity: 0.5 !important; /* Make not-active buttons more visible */
  pointer-events: none;
}

[data-services-control-status="active"] {
  opacity: 1;
  pointer-events: auto;
}

[data-services-control]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Hide slider controls on desktop (above 991px) */
@media (min-width: 992px) {
  [data-gsap-slider-controls],
  [data-services-control] {
    display: none !important;
    visibility: hidden !important;
  }
}

@media (max-width: 991px) {
  /* Show slider controls on tablet and mobile */
  [data-gsap-slider-controls] {
    display: flex !important;
  }

  [data-services-control] {
    display: flex !important; /* Keep as flex for centering */
  }

  /* hide sticky left column if needed */
  /* .services-left { display:none; } */
}

/* ============================================================================
   Team Slider - Reusing Services Slider Logic
   ============================================================================ */

/* Team Viewport - Base state */
.team-viewport {
  position: static;
  overflow-x: hidden !important;
  margin: 0;
}

/* Leadership / Team Section Specifics */
.leadership [data-team-viewport="true"],
.leadership .team-viewport {
  --slider-status: on; /* Must be ON for arrows to work with 5 members */
  --slider-spv: 4; /* CRITICAL: Force 4 items on desktop */
  --slider-gap: 24px; /* Match your grid gap - using px for consistency */
}

/* Tablet: 2.2 slides per view (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .leadership [data-team-viewport="true"] {
    --slider-spv: 2.2;
  }
}

/* Mobile: 1.2 slides per view (≤767px) */
@media screen and (max-width: 767px) {
  .leadership [data-team-viewport="true"] {
    --slider-spv: 1;
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

/* Team Track - Switch to flex below 991px */
@media screen and (max-width: 991px) {
  .team-track {
    display: flex;
    flex-wrap: nowrap;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    will-change: transform;
  }

  .team-member {
    min-width: 0 !important;
    flex-shrink: 0;
    box-sizing: border-box;
  }
}

/* Team Member - Calculate width based on SPV */
/* Use --slider-gap and --slider-spv to match the viewport definitions */
/* Layout only – no opacity/transform so Webflow "On Scroll In" can animate .team-member */
.leadership .team-track > .team-member,
.team-track > .team-member {
  flex: 0 0
    calc(
      (100% - var(--slider-gap, 24px) * (var(--slider-spv, 4) - 1)) /
        var(--slider-spv, 4)
    ) !important;
  min-width: 0 !important;
  box-sizing: border-box;
  margin: 0;
}

/* Team Member Status States */
.team-member[data-service-item-status="active"] {
  opacity: 1;
}

.team-member[data-service-item-status="not-active"] {
  opacity: 0.6;
}

/* On desktop: all members get opacity via data-service-item-status="active" (team-controller); no opacity/transform here so Webflow "On Scroll In" can run */
@media (min-width: 992px) {
  /* Prevent dragging on desktop - disable user-select and set cursor */
  .team-track {
    cursor: default !important;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Prevent touch actions that might trigger dragging */
  .team-track {
    touch-action: pan-y !important;
  }
}

/* ============================================================================
   Team Slider Controls - Reusing Services Control Styles
   ============================================================================ */

/* Team Slider Controls - Masked Button Base */
[data-team-control] {
  position: relative;
  width: var(--mask-btn-size);
  height: var(--mask-btn-size);
  border: 1px solid var(--mask-border-color-idle);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  display: none; /* Hidden by default, shown by controller when needed */
  justify-content: center;
  align-items: center;
  transition:
    border-color var(--mask-transition-speed),
    transform 0.1s;
  padding: 0;
  outline: none;
  pointer-events: auto;
  visibility: visible;
}

[data-team-control]:hover {
  border-color: var(--mask-border-color-hover);
}

[data-team-control]:active {
  transform: scale(0.95);
}

/* Icon Track Container (moves on hover) */
[data-team-control] .icon-track,
[data-team-control] > div {
  display: flex;
  align-items: center;
  position: relative;
  transition: transform var(--mask-transition-speed)
    cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--mask-icon-color-idle);
}

/* Shift track on hover - Next button moves right */
[data-team-control="next"]:hover .icon-track,
[data-team-control="next"]:hover > div {
  transform: translateX(var(--mask-shift-distance));
}

/* Shift track on hover - Prev button moves left */
[data-team-control="prev"]:hover .icon-track,
[data-team-control="prev"]:hover > div {
  transform: translateX(calc(-1 * var(--mask-shift-distance)));
}

/* Primary Icon (visible initially) */
[data-team-control] .icon-primary {
  flex-shrink: 0;
  transition: color var(--mask-transition-speed);
}

[data-team-control]:hover .icon-primary {
  color: var(--mask-icon-color-active);
}

/* Disabled state - prevent hover effects */
[data-team-control]:disabled:hover .icon-track,
[data-team-control]:disabled:hover > div {
  transform: none;
}

[data-team-control]:disabled:hover .icon-primary {
  color: var(--mask-icon-color-idle);
}

/* Secondary Icon (enters from left for next, right for prev) */
[data-team-control] .icon-secondary {
  position: absolute;
  flex-shrink: 0;
  color: var(--mask-icon-color-ghost);
}

/* Next button: secondary icon enters from left */
[data-team-control="next"] .icon-secondary {
  left: calc(-1 * var(--mask-shift-distance));
}

/* Prev button: secondary icon enters from right */
[data-team-control="prev"] .icon-secondary {
  right: calc(-1 * var(--mask-shift-distance));
}

[data-team-control] svg {
  width: var(--mask-icon-size);
  height: var(--mask-icon-size);
}

[data-team-control]:disabled,
[data-team-control][data-state="disabled"] {
  opacity: 0.5 !important;
  pointer-events: none;
  cursor: not-allowed;
}

/* Control status states */
[data-team-control-status="not-active"] {
  opacity: 0.5 !important;
  pointer-events: none;
}

[data-team-control-status="active"] {
  opacity: 1;
  pointer-events: auto;
}

[data-team-control]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Team slider controls visibility - managed by controller via inline styles */
/* Default: hidden, controller will show when needed */

@media (max-width: 991px) {
  /* Show team slider controls on tablet and mobile by default */
  [data-team-control] {
    display: flex !important;
    visibility: visible !important;
  }
}

/* Desktop controls visibility is managed by controller (shows when >4 members) */
/* Controller sets inline style display: flex when needed */

/* Ensure team controls can be seen on desktop when enabled by JS */
@media screen and (min-width: 992px) {
  .leadership .gsap-slider__controls {
    display: flex; /* The controller will toggle this via style.display */
    visibility: visible;
  }

  /* Team control buttons visibility controlled by JavaScript inline styles */
  /* No !important so JavaScript can hide/show as needed */
  .leadership [data-team-control] {
    display: flex;
    visibility: visible;
  }
}

/* Gsap Masking Clip Hero Headline Fix - COMMENTED OUT */
/* [class*="-mask"] {
    1. Add vertical breathing room
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
    
    2. Pull the margins back so it doesn't push other elements away
    margin-top: -0.2em !important;
    margin-bottom: -0.2em !important;

    3. Add a tiny bit of horizontal room for italic fonts or wide serifs
    padding-left: 0.05em !important;
    padding-right: 0.05em !important;
    margin-left: -0.05em !important;
    margin-right: -0.05em !important;

    4. Critical: Ensure the mask still clips for the reveal effect
    overflow: clip !important; 
    display: inline-block !important;
} */

/* Exclude navigation overlay from hero mask fixes - Mobile only - COMMENTED OUT */
/* @media screen and (max-width: 767px) {
  .navlinks-mask {
    display: flex !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    Keep overlay behavior intact
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
  }
} */

/* Optional: If your animation involves the text moving 'up', 
  ensure the inner word div is positioned correctly 
*/
.gsap_split_word {
  vertical-align: baseline;
}

/* ============================================================================
   Mobile Navigation Overlay
   ============================================================================ */

/* Hamburger Button Base */
.nav-hamburger {
  display: none; /* Hidden on desktop/tablet */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2100;
  position: relative;
}

/* Show hamburger on mobile only */
@media screen and (max-width: 767px) {
  .nav-hamburger {
    display: flex;
    width: 64px;
    height: 64px;
  }
}

/* Hamburger Bars */
.nav-hamburger-bar {
  width: 2.2em;
  height: 0.225em;
  background-color: var(--nav-fg);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  position: absolute;
}

/* Hamburger bars always use #fff6ea when overlay is active */
@media screen and (max-width: 767px) {
  .top-nav[data-navigation-status="active"] .nav-hamburger-bar {
    background-color: #fff6ea !important;
  }
}

/* Base state (closed): Spread bars vertically */
.nav-hamburger-bar:nth-child(1) {
  transform: translateY(-0.75em);
}

.nav-hamburger-bar:nth-child(2) {
  transform: translateY(0);
}

.nav-hamburger-bar:nth-child(3) {
  transform: translateY(0.75em);
}

/* Hover state (closed): Compress top/bottom bars horizontally */
@media (hover: hover) {
  .top-nav[data-navigation-status="not-active"]
    .nav-hamburger:hover
    .nav-hamburger-bar:nth-child(1) {
    transform: translateY(-0.45em) scaleX(0.5);
  }

  .top-nav[data-navigation-status="not-active"]
    .nav-hamburger:hover
    .nav-hamburger-bar:nth-child(3) {
    transform: translateY(0.45em) scaleX(0.5);
  }
}

/* Active state (open): Rotate to X, slide middle out */
.top-nav[data-navigation-status="active"] .nav-hamburger-bar:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

.top-nav[data-navigation-status="active"] .nav-hamburger-bar:nth-child(2) {
  transform: translateX(-160%);
}

.top-nav[data-navigation-status="active"] .nav-hamburger-bar:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

/* Hover state (open): Slightly reduce X width */
@media (hover: hover) {
  .top-nav[data-navigation-status="active"]
    .nav-hamburger:hover
    .nav-hamburger-bar:nth-child(1),
  .top-nav[data-navigation-status="active"]
    .nav-hamburger:hover
    .nav-hamburger-bar:nth-child(3) {
    transform: translateY(0) scaleX(0.7);
  }

  .top-nav[data-navigation-status="active"]
    .nav-hamburger:hover
    .nav-hamburger-bar:nth-child(1) {
    transform: translateY(0) rotate(45deg) scaleX(0.7);
  }

  .top-nav[data-navigation-status="active"]
    .nav-hamburger:hover
    .nav-hamburger-bar:nth-child(3) {
    transform: translateY(0) rotate(-45deg) scaleX(0.7);
  }
}

/* Mobile Overlay - Base (hidden by default) */
@media screen and (max-width: 767px) {
  .navlinks-mask {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #1f3c3b !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: visible !important;
    transition:
      opacity 0.6s cubic-bezier(0.7, 0, 0.3, 1),
      pointer-events 0s 0.6s;
  }

  /* Open state */
  .top-nav[data-navigation-status="active"] .navlinks-mask,
  [data-navigation-status="active"] .navlinks-mask,
  .navlinks-mask[data-navigation-status="active"] {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  /* Nav Links inside overlay */
  .navlinks-mask .nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5em;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    /* Override any inline transforms from GSAP or other libs */
    transform: none !important;
    /* Ensure proper centering */
    position: relative;
  }

  /* Link entrance animation (rise + straighten) */
  .navlinks-mask .nav-link {
    opacity: 0;
    transform: translateY(200%) rotate(8deg) !important;
    transition:
      opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1),
      transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    /* Always use light color in mobile overlay */
    color: #fff6ea !important;
    /* Large font size on mobile */
    font-size: calc(2.5vw + 2.5vh) !important;
    /* Center text and constrain width to prevent overflow */
    text-align: center !important;
    display: block !important;
    width: 100%;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
    /* Constrain underline to link width */
    position: relative;
  }

  /* Ensure underline doesn't exceed viewport */
  .navlinks-mask .nav-link::before {
    max-width: 100% !important;
    width: 100% !important;
    left: 0 !important;
    right: auto !important;
  }

  /* Stagger delays for closed state (reverse stagger) */
  .top-nav[data-navigation-status="not-active"]
    .navlinks-mask
    .nav-link:nth-child(1) {
    transition-delay: 0.2s;
  }

  .top-nav[data-navigation-status="not-active"]
    .navlinks-mask
    .nav-link:nth-child(2) {
    transition-delay: 0.15s;
  }

  .top-nav[data-navigation-status="not-active"]
    .navlinks-mask
    .nav-link:nth-child(3) {
    transition-delay: 0.1s;
  }

  .top-nav[data-navigation-status="not-active"]
    .navlinks-mask
    .nav-link:nth-child(4) {
    transition-delay: 0.05s;
  }

  .top-nav[data-navigation-status="not-active"]
    .navlinks-mask
    .nav-link:nth-child(5) {
    transition-delay: 0s;
  }

  /* Stagger delays for open state (forward stagger) */
  /* Delay starts after overlay animation completes (0.6s + 0.1s buffer) */
  .top-nav[data-navigation-status="active"]
    .navlinks-mask
    .nav-link:nth-child(1) {
    opacity: 1 !important;
    transform: translateY(0) rotate(0.001deg) !important;
    transition-delay: 0.4s;
  }

  .top-nav[data-navigation-status="active"]
    .navlinks-mask
    .nav-link:nth-child(2) {
    opacity: 1 !important;
    transform: translateY(0) rotate(0.001deg) !important;
    transition-delay: 0.43s;
  }

  .top-nav[data-navigation-status="active"]
    .navlinks-mask
    .nav-link:nth-child(3) {
    opacity: 1 !important;
    transform: translateY(0) rotate(0.001deg) !important;
    transition-delay: 0.46s;
  }

  .top-nav[data-navigation-status="active"]
    .navlinks-mask
    .nav-link:nth-child(4) {
    opacity: 1 !important;
    transform: translateY(0) rotate(0.001deg) !important;
    transition-delay: 0.49s;
  }

  .top-nav[data-navigation-status="active"]
    .navlinks-mask
    .nav-link:nth-child(5) {
    opacity: 1 !important;
    transform: translateY(0) rotate(0.001deg) !important;
    transition-delay: 0.52s;
  }

  .top-nav[data-navigation-status="active"]
    .navlinks-mask
    .nav-link:nth-child(6) {
    opacity: 1 !important;
    transform: translateY(0) rotate(0.001deg) !important;
    transition-delay: 0.55s;
  }

  /* Fallback for any additional links */
  .top-nav[data-navigation-status="active"] .navlinks-mask .nav-link {
    opacity: 1 !important;
    transform: translateY(0) rotate(0.001deg) !important;
  }

  /* Link hover effect (group dim + single highlight) */
  @media (hover: hover) {
    .navlinks-mask .nav-links:has(.nav-link:hover) .nav-link:not(:hover) {
      opacity: 0.15;
    }

    .navlinks-mask .nav-links:has(.nav-link:hover) .nav-link:hover {
      opacity: 1;
    }
  }
}

/* Desktop/Tablet: Keep inline navigation */
@media screen and (min-width: 768px) {
  .navlinks-mask {
    display: contents; /* Allow children to flow normally */
  }

  .navlinks-mask .nav-links {
    display: flex;
    flex-direction: row;
    gap: 2em;
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

/* Hero Video Effects */

.hero-video-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(36, 40, 62, 0.4) 0%,
    rgba(36, 40, 62, 0) 100%
  );
  pointer-events: none;
  z-index: 20;
}

/* Ensure video is behind everything */
.hero-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* About Image mobile stretch to full width */
@media (max-width: 767px) {
  .about .m-l-image,
  .about .m-l-image .img-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }

  .about .m-l-image .img-wrapper {
    height: 38vh;
    overflow: hidden;
  }

  .about .aboutt-image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover;
    object-position: center;
  }
}

.team-member:hover .photo-profile img {
  transform: scale(1.03);
}

/* ============================================================================
   Team Modal - Premium Slide-out Sidebar
   ============================================================================ */

/* Modal Wrapper */
.team-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  scroll-margin-top: 80px;
}

/* Modal Overlay */
.team-modal-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(36, 40, 62, 0.85); /* --dark with opacity */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Modal Sidebar */
/* Note: The sidebar has data-lenis-prevent attribute (added programmatically) */
/* This tells Lenis to ignore this element and allows native browser scrolling */
/* for the biography content while the background page scroll is stopped */
.team-modal-sidebar {
  position: absolute;
  right: 0;
  top: 0;
  height: 100vh;
  width: 45em;
  background-color: #f6f4f1;
  overflow-y: auto;
  overflow-x: hidden;
  will-change: transform;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Mobile: Full width sidebar */
@media screen and (max-width: 767px) {
  .team-modal-sidebar {
    width: 100%;
  }
}

/* Close Button Styling */
.modal-close-btn {
  width: 3.5em;
  height: 3.5em;
  border-radius: 0;
  border: 1px solid #24283e; /* Dark border */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  transition:
    background-color 0.4s ease,
    color 0.4s ease;
  z-index: 10;
  color: #24283e; /* Dark text */
  position: relative;
  top: 0;
  right: 0;
}

/* Hover Interaction - Swap colors */
.modal-close-btn:hover {
  background-color: #24283e; /* Dark background */
  color: #fff6ea; /* Light text */
}

/* Icon rotation within the button */
.modal-close-btn .close-icon {
  width: 1.25em;
  height: 1.25em;
  transition: transform 0.6s cubic-bezier(0.65, 0.01, 0.05, 0.99);
}

.modal-close-btn:hover .close-icon {
  transform: rotate(90deg);
}

/* Modal Content Styling */
.modal-photo-wrap,
.modal-name,
.modal-pos,
.modal-desc,
.modal-linkedin-link {
  will-change: transform, opacity;
}

/* Ensure modal content is properly styled */
.team-modal-sidebar {
  box-sizing: border-box;
}

/* Modal Typography - Inherits global Webflow styles */
/* The modal uses .s-title-text and .m-role-text classes which should be */
/* defined in Webflow's global styles. These styles will automatically */
/* apply within the modal context since the modal is part of the document. */
.team-modal-sidebar .s-title-text,
.team-modal-sidebar .member-name-text,
.team-modal-sidebar .member-position-text {
  /* Global .s-title-text styles from Webflow will apply here */
}

.team-modal-sidebar .m-role-text {
  /* Global .m-role-text styles from Webflow will apply here */
}

/* Focus state for accessibility */
.modal-close-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ============================================================================
   Button Character Stagger (moved from Webflow custom code)
   ============================================================================ */

/* Wrapper: overflow hidden for sliding chars */
.btn-animate-chars [data-button-animate-chars] {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

/* Each char span: slides up on hover via text-shadow + translateY */
.btn-animate-chars [data-button-animate-chars] span {
  display: inline-block;
  position: relative;
  text-shadow: 0px 1.3em currentColor;
  transform: translateY(0em) rotate(0.001deg);
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn-animate-chars:hover [data-button-animate-chars] span {
  transform: translateY(-1.3em) rotate(0.001deg);
}

/* Background inset on hover */
.btn-animate-chars__bg {
  inset: 0;
  transition: inset 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn-animate-chars:hover .btn-animate-chars__bg {
  inset: 0.125em;
}