/* ════════════════════════════════════════════════════════════════
   FONT FACES — PP Neue Montreal (self-hosted)
   ════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/NeueMontreal-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/NeueMontreal-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/NeueMontreal-Medium.woff") format("woff");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}


/* ════════════════════════════════════════════════════════════════
   style.css — Calidad Consulting
   ════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   ─────────────────
   1.  RESET
   2.  CSS CUSTOM PROPERTIES
   3.  BASE STYLES
   4.  NAVIGATION
       4a. Nav structure
       4b. Nav background + dropdown expansion
       4c. Nav dropdown content
       4d. Dropdown link hover states
       4e. Nav link underline animation
       4f. Mobile hamburger button
       4g. Breakpoints
   5.  HERO SECTION
       5a. Hero layout
       5b. Stats bar
       5c. Headline block
       5d. Animations
       5e. Breakpoints
   6.  ABOUT SECTION
       6a. Section wrapper
       6b. Trusted client marquee
       6c. About body copy
       6d. Stat cards
       6e. Scroll-reveal animation
       6f. Breakpoints
   7.  FOOTER
       7a. Footer layout
       7b. Breakpoints
   8.  SERVICES / INDUSTRIES SECTION
       8a. Section + top block
       8b. Services grid
       8c. Card base styles
       8d. Card body + icons
       8e. Scroll-reveal animation
       8f. Breakpoints
   9. WHAT WE OFFER SECTION
       9a. Section + inner wrapper
       9b. Top row
       9c. Column headers + row grid
       9d. Row cells
       9e. Media cell
       9f. Breakpoints
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════
   1. RESET
   ════════════════════════════════════════════ */

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


/* ════════════════════════════════════════════
   2. CSS CUSTOM PROPERTIES
   ════════════════════════════════════════════ */

:root {
  /* ── Brand colours ── */
  --rust:       #b54a2a;
  --rust-light: #d4663d;
  --dark:       #070707;
  --white:      #f5f0eb;
  --muted:      rgba(245, 240, 235, 0.833);

  /* ── Layout ── */
  --page-horizontal-padding: clamp(1.5rem, 6vw, 4.5rem);
  --page-top-padding:        clamp(2.5rem, 5vh, 3.5rem);

  /* ── Navigation ── */
  --nav-height:           3.5rem;
  --nav-radius:           15px;
  --nav-bg-height:        33em; 
  --color-dark:           #2b1d15;

  /* ── Glass / blur ── */
  --glass-blur:            18px;
  --glass-border-light:    rgba(255, 255, 255, 0.18);
  --glass-dark-bg:         rgba(31, 31, 31, 0.592);
  --glass-menu-bg:         rgba(31, 31, 31, 0.592);
  --glass-light-bg:        rgba(255, 255, 255, 0.88);
  --glass-highlight-bg:    rgba(255, 255, 255, 0.16);

  /* ── Text ── */
  --text-primary: #ffffff;
  --text-muted:   rgba(255, 255, 255, 0.8);
  --accent-dot:   #ff7a1a;

  /* ── Animation easing ── */
  --cubic-default:   cubic-bezier(0.525, 0, 0, 1);
  --duration-fast:   0.2s;
  --duration-normal: 0.45s;
}


/* ════════════════════════════════════════════
   3. BASE STYLES
   ════════════════════════════════════════════ */

body {
  font-family: "PP Neue Montreal";
  background: var(--dark);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Global link reset */
a {
  color: inherit;
  text-decoration: none;
}

/* Keyboard focus rings*/
a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--color-dark);
}


/* ════════════════════════════════════════════
   4. NAVIGATION
   ════════════════════════════════════════════ */

.nav-reveal {
    opacity: 0;
    transform: translateY(-24px); /* Slides down from above */
}

/* Smart nav — fixed position, hides on scroll down, returns on scroll up */
.nav--hidden {
  transform: translateY(-110%);
}
   
/* ── 4a. Nav structure ── */

.nav {
  z-index: 100;
  color: #fff;
  position: relative;
  overflow: visible;
  font-weight: 500;
  transition: color var(--duration-fast) var(--cubic-default);
}

/* Nav becomes fixed when sticky — GSAP handles all animation */
.nav--sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(7, 7, 7, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-container,
.nav-inner {
  overflow: visible;
}

.nav-inner {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 2em;
  padding-bottom: 2em;
  display: flex;
  position: relative;
  min-width: 0;
}

.nav-inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
}

.nav-container {
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-horizontal-padding);
  padding-right: var(--page-horizontal-padding);
  position: relative;
}

.nav-logo {
  width: 8em;
  flex-shrink: 0;
}

.nav-end {
  grid-column-gap: 0.75em;
  grid-row-gap: 0.75em;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  flex-shrink: 0;
}

.nav-button {
  border: 1px solid;
  border-radius: 0.25em;
  justify-content: center;
  align-items: center;
  height: 3em;
  padding-left: 1em;
  padding-right: 1em;
  font-size: 1em;
  line-height: 1.4;
  white-space: nowrap;
  display: flex;
  box-sizing: border-box;
  transition: all var(--duration-fast) var(--cubic-default);
}

.nav-button.is--primary {
  color: #2b1d15;
  background-color: #fff;
  border-color: #fff;
}

.nav-center {
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
}

.nav-center__list {
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.nav-link {
  grid-column-gap: 0.375em;
  grid-row-gap: 0.375em;
  background-color: transparent;
  border-radius: 0.25em;
  justify-content: center;
  align-items: center;
  padding: 0.75em 0.625em;
  display: flex;
  white-space: nowrap;
}

.nav-link__label {
  font-size: 1em;
  line-height: 1;
  position: relative;
}

.nav-link__dropdown-icon {
  width: 0.875em;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--cubic-default);
}


/* ── 4b. Nav background + dropdown expansion ── */

.nav-bg {
  background-color: #070707;
  border-radius: 0.75em;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: height var(--duration-normal) var(--cubic-default);
}

.page-bg {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100vh;
  position: absolute;
  inset: 0% 0% auto;
  transition: opacity var(--duration-fast) var(--cubic-default);
}

:is(
  body:has([data-dropdown-toggle]:hover),
  body:has([data-dropdown-toggle]:focus-visible),
  body:has([data-dropdown-toggle]:focus-within),
  body:has(.nav-dropdown:hover),
  body:has(.nav-dropdown:focus-within)
) {
  
  .nav-bg {
    height: var(--nav-bg-height);
  }
  
  .page-bg {
    opacity: 1;
  }
  
  .nav {
    color: #fff;
  }
  
  .nav-button {
    border-color: #fff;
    background-color: #fff;
    color: #070707;
  }
  .nav-button.is--primary {
    background-color: #070707;
    border-color: #fff;
    color: #fff;
  }
}


/* ── 4c. Nav dropdown panel ── */

.nav-dropdown {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  padding-top: 4em;
  padding-bottom: 3em;
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  transition:
    all var(--duration-fast) ease,
    transform var(--duration-normal) var(--cubic-default);
}

[data-dropdown-toggle]:hover + .nav-dropdown,
[data-dropdown-toggle]:focus-visible + .nav-dropdown,
.nav-dropdown:hover,
.nav-dropdown:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-dropdown__content {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  width: 100%;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.nav-dropdown__content-li {
  flex: 1;
  min-width: 0;
  transition: all var(--duration-normal) var(--cubic-default);
  transition-delay: 0.18s;
  opacity: 0;
  transform: translate(4em, 0px);
}

.nav-dropdown__content-li:nth-child(2) { transition-delay: 0.24s; }
.nav-dropdown__content-li:nth-child(3) { transition-delay: 0.30s; }
.nav-dropdown__content-li:nth-child(4) { transition-delay: 0.36s; }
.nav-dropdown__content-li:nth-child(5) { transition-delay: 0.44s; }

body:has([data-dropdown-toggle]:hover)
  [data-dropdown-toggle]:hover
  + .nav-dropdown
  .nav-dropdown__content-li,
body:has([data-dropdown-toggle]:focus-visible) .nav-dropdown__content-li,
body:has([data-dropdown-toggle]:focus-within)  .nav-dropdown__content-li,
body:has(.nav-dropdown:hover)                  .nav-dropdown__content-li,
body:has(.nav-dropdown:focus-within)           .nav-dropdown__content-li {
  opacity: 1;
  transform: translate(0em, 0px);
}

[data-dropdown-toggle] {
  appearance: none;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--cubic-default);
}


/* ── 4d. Dropdown link hover states ── */

.nav-dropdown__link {
  color: #fff;
  background-color: #111111;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
  flex-flow: column;
  flex: 1;
  justify-content: flex-end;
  align-items: stretch;
  height: 20em;
  padding: 1.5em;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* Text-only variant (Industries dropdown) */
.nav-dropdown__link.is--static {
  color: #ffffff;
  transition: background-color 0.2s cubic-bezier(0.625, 0.05, 0, 1);
}

.nav-dropdown__link.is--static:hover,
.nav-dropdown__link.is--static:focus-visible {
  background: #fd6e1c;
}

/* Inner label row (label + arrow bubble) */
.nav-dropdown__link-inner {
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.nav-dropdown__link-label {
  font-size: 1.75em;
  transition: transform 0.2s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Circular arrow bubble */
.nav-dropdown__link-bubble {
  color: #fff;
  background-color: #2b1d15;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  padding: 0.25em;
  display: flex;
  transition: transform 0.2s cubic-bezier(0.625, 0.05, 0, 1);
}

/* SVG icon helper (used in bubbles) */
.icon {
  width: 100%;
  height: 100%;
}

/* Background image layer inside image-card links */
.nav-dropdown__link-bg {
  position: absolute;
  inset: 0%;
}

.nav-dropdown__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.625, 0.05, 0, 1);
}

.nav-dropdown__img-overlay {
  z-index: 1;
  opacity: 0.25;
  background-image: linear-gradient(transparent, transparent 50%, #000);
  position: absolute;
  inset: 0%;
  transition: opacity 0.2s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Hover: reveal image, hide overlay */
.nav-dropdown__link:hover .nav-dropdown__img-overlay,
.nav-dropdown__link:focus-visible .nav-dropdown__img-overlay {
  opacity: 0;
}

.nav-dropdown__link:hover .nav-dropdown__img,
.nav-dropdown__link:focus-visible .nav-dropdown__img {
  transform: scale(1.1);
}


/* ── 4e. Nav link underline animation ── */

/* Sliding underline on plain <a> nav links */
a.nav-link .nav-link__label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scale(0, 1);
  transform-origin: right center;
  transition: transform var(--duration-normal) var(--cubic-default);
}

a.nav-link:hover .nav-link__label::after,
a.nav-link:focus-visible .nav-link__label::after {
  transform: scale(1, 1);
  transform-origin: left center;
}


/* ── 4f. Mobile hamburger button ── */

/* Hidden on desktop; shown at ≤ 767px */
.menu-button {
  grid-column-gap: 0.25em;
  grid-row-gap: 0.25em;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0.25em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  padding: 0.75em;
  display: none;
  flex-shrink: 0;
  box-sizing: border-box;
}

.menu-button.is--primary {
  color: #2b1d15;
  background-color: #fff;
  border-color: #fff;
}

.menu-button__line {
  background-color: #fff;
  width: 100%;
  height: 1px;
}


/* ── 4g. Breakpoints — tablet (≤ 991px) ── */

@media screen and (max-width: 991px) {
  .nav-inner {
    padding-top: 1.25em;
    padding-bottom: 1.25em;
  }

  .nav-container {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  /* Hide "Contact Us" secondary button on tablet */
  .nav-button.md--hide,
  .md--hide {
    display: none;
  }

  .nav-link {
    padding-left: 0.625em;
    padding-right: 0.625em;
  }

  .nav-link__label {
    font-size: 0.9em;
  }
}


/* ── 4h. Breakpoints — mobile (≤ 767px) ── */

@media screen and (max-width: 767px) {

  /* Disable the desktop dim overlay entirely on mobile */
  .page-bg { display: none !important; }

  /* Override --nav-bg-height to cover full screen on mobile */
  :root {
    --nav-bg-height: 100dvh;
  }

  .nav {
    overflow: visible;
  }

  /* Keep logo + end buttons above the mobile overlay */
  .nav-logo { z-index: 1; position: relative; }
  .nav-end   { z-index: 2; position: relative; }

  /* Mobile nav panel — full-screen overlay, hidden until menu open */
  .nav-center {
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    height: 100dvh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    transform: translate(0, 1em);
    transition:
      all var(--duration-normal) var(--cubic-default),
      opacity var(--duration-fast) var(--cubic-default);
  }

  .nav-center__list {
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
    padding-top: 8em;
    padding-left: 1.25em;
    padding-right: 1.25em;
    box-sizing: border-box;
    overflow: hidden scroll;
  }

  .nav-link {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 1em 0;
  }

  .nav-link__label {
    font-size: 2em;
  }

  /* On mobile, dropdowns are inline (not absolute positioned) */
  .nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    inset: auto;
    width: 100%;
    overflow: hidden;
  }

  .nav-dropdown .nav-container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Mobile: nav-bg gives the full-screen menu its dark background */
  .nav-bg {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background-color: #070707;
  }

  /* Grid-rows trick to animate dropdown height on mobile */
  .nav-dropdown__overflow {
    grid-template-rows: 0fr;
    width: 100%;
    display: grid;
    position: relative;
    overflow: hidden;
    transition: grid-template-rows var(--duration-normal) var(--cubic-default);
  }

  .nav-dropdown__overflow-inner {
    flex-flow: column;
    width: 100%;
    min-height: 0;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  /* 2-column grid for mobile dropdown cards */
  .nav-dropdown__content {
    grid-gap: 0.75em;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    box-sizing: border-box;
    padding-top: 1em;
    padding-bottom: 1em;
    display: grid;
  }

  .nav-dropdown__link {
    aspect-ratio: 1;
    height: auto;
    padding: 1em;
    min-width: 0;
    box-sizing: border-box;
  }

  .nav-dropdown__link-label {
    font-size: 1.25em;
  }

  /* Show hamburger on mobile */
  .menu-button {
    display: flex;
  }

  /* Hamburger line animation */
  .menu-button__line {
    transition: all var(--duration-normal) var(--cubic-default);
  }

  /* Hide items that should not appear on small screens */
  .sm--hide { display: none; }

  /* ── Open state: [data-menu-status="open"] ── */
  [data-menu-status="open"] {
    color: var(--white); /* dark bg on mobile needs white text, not --color-dark */

    /* Animate hamburger lines into an X */
    .menu-button__line:nth-of-type(1) {
      transform: translate(0px, 0.125em) rotate(135deg);
      background-color: #ffffff;
    }
    .menu-button__line:nth-of-type(2) {
      transform: translate(0px, -0.175em) rotate(-135deg);
      background-color: #ffffff;
    }

    .nav-bg    { height: var(--nav-bg-height); }

    .nav-button.is--primary {
      background-color: var(--color-dark);
      border-color: var(--color-dark);
      color: #fff;
    }

    /* Slide nav panel in */
    .nav-center {
      opacity: 1;
      visibility: visible;
      transform: translate(0px, 0em);
      transition-delay: 0.1s;
    }
  }

  /* Open individual dropdown (set by JS on the toggle button) */
  [data-dropdown-toggle="open"] + .nav-dropdown .nav-dropdown__overflow {
    grid-template-rows: 1fr;
  }

  [data-dropdown-toggle="open"] + .nav-dropdown .nav-dropdown__content-li {
    opacity: 1;
    transform: translate(0em, 0px);
  }

  /* Rotate chevron when dropdown is open */
  [data-dropdown-toggle="open"] .nav-link__dropdown-icon {
    transform: rotate(180deg);
  }
}


/* ── 4i. Breakpoints — small mobile (≤ 479px) ── */

@media screen and (max-width: 479px) {
  .nav-logo { width: 6.5em; }

  .nav-end {
    grid-column-gap: 0.5em;
    grid-row-gap: 0.5em;
  }

  .nav-button.is--primary {
    height: 2.5em;
    padding-left: 0.75em;
    padding-right: 0.75em;
  }

  .nav-dropdown__link        { padding: 0.75em; }
  .nav-dropdown__link-label  { font-size: 1em; }

  .nav-dropdown__link-bubble {
    width: 1.25em;
    height: 1.25em;
    padding: 0.375em;
  }

  .menu-button {
    width: 2.5em;
    height: 2.5em;
    padding: 0.65em;
  }

  /* Hide items not needed at this size */
  .xs--hide { display: none; }
}

/* ── Desktop only: chevron rotation + hover background ── */
@media screen and (min-width: 768px) {
  [data-dropdown-toggle]:hover .nav-link__dropdown-icon,
  [data-dropdown-toggle]:focus .nav-link__dropdown-icon,
  [data-dropdown-toggle]:focus-within .nav-link__dropdown-icon,
  [data-dropdown-toggle]:has(+ .nav-dropdown:hover) .nav-link__dropdown-icon,
  [data-dropdown-toggle]:has(+ .nav-dropdown:focus-within) .nav-link__dropdown-icon {
    transform: rotate(180deg);
  }

  [data-dropdown-toggle]:hover,
  [data-dropdown-toggle]:focus,
  [data-dropdown-toggle]:focus-within,
  [data-dropdown-toggle]:has(+ .nav-dropdown:hover),
  [data-dropdown-toggle]:has(+ .nav-dropdown:focus-within) {
    background-color: transparent;
  }
}


/* ════════════════════════════════════════════
   5. HERO SECTION
   ════════════════════════════════════════════ */

/* ── 5a. Hero layout ── */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
}
 
/* ── Unicorn Studio full-bleed background ── */
#unicorn-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #070707; /* fallback while animation loads */
  overflow: hidden;
}
 
/* ::before unused; ::after used on mobile for gradient overlay */
#unicorn-bg::before,
#unicorn-bg::after {
  display: none;
}



/* ── 5b. Stats bar ── */

/* Positioned at the bottom of the hero, above the headline */
.stats {
  position: relative;
  z-index: 10;
  display: flex;
  gap: 48px;
  padding: 0 48px;
  margin-top: auto;
  margin-bottom: 28px;
  animation: fadeUp 0.9s 0.2s both ease-out;
}

.stats {
    opacity: 0;
    transform: translateY(24px);
    animation: none; /* Remove the existing fadeUp animation */
}

/* Left orange border rule + spacing */
.stat {
  border-left: 1.5px solid var(--rust-light);
  padding-left: 14px;
}

.stat-number {
  font-family: "PP Neue Montreal";
  font-weight: 550;
  font-size: 28px;
  letter-spacing: 0.02em;
  color: var(--white);
  line-height: 1;
}

.stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.04em;
}


/* ── 5c. Headline block ── */

/* Sits at the very bottom of the hero above the fold */
.headline-block {
  position: relative;
  z-index: 10;
  padding: 0 48px 64px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  animation: fadeUp 0.9s 0.4s both ease-out;
}

/* GSAP Headline Reveal */
.headline-block,
.headline-block h1 {
    animation: none;
}

.word-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.word-mask .word {
    display: inline-block;
    transform: translateY(105%);
    color: inherit; 
}

.word-mask .word.accent {
    color: #fd6e1c;
}

.secondary-reveal {
    opacity: 0;
    transform: translateY(24px);
}

.headline-block h1 {
  font-family: "PP Neue Montreal";
  font-weight: 550;
  font-size: 5vw;
  line-height: 0.93;
  letter-spacing: -0.01em;
  max-width: 750px;
}

/* Year badge (e.g. "(2026)") — positioned above the tagline */
.year-tag {
  position: absolute;
  right: 48px;
  top: -90px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.1em;
}

/* Short tagline paragraph, right-aligned */
.tagline {
  font-size: 18px;
  color: var(--muted);
  max-width: 350px;
  line-height: 1.25;
  text-align: justify;
  flex-shrink: 0;
  align-self: flex-end;
  padding-bottom: 8px;
}


/* ── 5d. Animations ── */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ── 5e. Breakpoints — mobile hero (≤ 767px) ── */

@media screen and (max-width: 767px) {
  .hero {
    height: 100svh;
    min-height: 580px;
  }

  /* Re-enable ::after to add a gradient overlay for text legibility on mobile */
  /* Gradient overlay for text legibility on mobile */
  #unicorn-bg::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1)  0%,
      rgba(0, 0, 0, 0.0)  40%,
      rgba(0, 0, 0, 0.45) 100%
    );
    z-index: 1;
  }

  .stats {
    gap: 20px;
    padding: 0 20px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .stat           { padding-left: 10px; min-width: 0; }
  .stat-number    { font-size: 20px; }
  .stat-label     { font-size: 10px; }

  .headline-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0 20px 40px;
  }

  .headline-block h1 {
    font-size: clamp(32px, 10vw, 56px);
    line-height: 0.95;
    max-width: 100%;
  }

  /* Year tag becomes inline on mobile */
  .year-tag {
    position: static;
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    order: -1;
  }

  .tagline {
    max-width: 100%;
    font-size: 13px;
    text-align: left;
    align-self: auto;
    padding-bottom: 0;
    line-height: 1.4;
  }
}


/* ── 5f. Breakpoints — very small mobile (≤ 374px) ── */

@media screen and (max-width: 374px) {
  .stats          { gap: 14px; padding: 0 16px; }
  .stat-number    { font-size: 17px; }
  .stat-label     { font-size: 9px; }
  .headline-block { padding: 0 16px 32px; }
  .headline-block h1 { font-size: clamp(28px, 9.5vw, 40px); }
  .tagline        { font-size: 12px; }
}


/* ── 5g. Breakpoints — large screens (≥ 2000px) ── */

@media screen and (min-width: 2000px) {
  .nav-inner   { padding-top: 2.5em; }
  .nav-logo    { width: 10em; flex-shrink: 0; }
  .nav-link__label { font-size: 1.25em; }

  .headline-block h1 {
    font-size: 5.25vw;
    line-height: 1.05;
    max-width: 1080px;
  }

  .headline-block .tagline {
    font-size: 1.25rem;
    max-width: 440px;
  }

  .stat-number { font-size: 50px; }
  .stat-label  { font-size: 14px; color: var(--muted); margin-top: 4px; letter-spacing: 0.04em; }
}


/* ════════════════════════════════════════════
   6. ABOUT SECTION
   ════════════════════════════════════════════ */

/* ── 6a. Section wrapper ── */

.about {
  margin-top: 4vw;
  color: var(--white);
  padding-bottom: 5rem;
  overflow: hidden;
}

.about-inner {
  padding: 0 var(--page-horizontal-padding);
}

/* Shared pill tag used in About, Services, WWO, Testimonials */
.about-tag {
  display: inline-block;
  font-family: "PP Neue Montreal";
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(245, 240, 235, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  padding: 0.35em 0.75em;
  margin-top: 6px;
}


/* ── 6b. Trusted client marquee ── */

.trusted-bar {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem var(--page-horizontal-padding);
  position: relative;
}

/* Bottom separator line */
.trusted-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--page-horizontal-padding);
  right: var(--page-horizontal-padding);
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}

.trusted-bar__label {
  font-family: "PP Neue Montreal";
  font-size: 20px;
  font-weight: 400;
  color: rgba(245, 240, 235, 0.55);
  line-height: 1.4;
  flex-shrink: 0;
  min-width: 140px;
}

/* Accent colour on "100+" inside the label */
.trusted-bar__label span {
  color: #fd6e1c;
}

.trusted-bar__track-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

/* Left + right fade masks on the logo strip */
.trusted-bar__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.trusted-bar__fade--left  { left:  0; background: linear-gradient(to right, #0a0a0a, transparent); }
.trusted-bar__fade--right { right: 0; background: linear-gradient(to left,  #0a0a0a, transparent); }

.trusted-bar__track {
  overflow: hidden;
}

/* Scrolling inner container — JS sets --marquee-width via inline style */
.trusted-bar__inner {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  animation: marquee 28s linear infinite;
}

/* Pause marquee on hover to allow interaction */
.trusted-bar__inner:hover {
  animation-play-state: paused;
}

.trusted-logo {
  display: flex;
  align-items: center;
  opacity: 0.5;
  color: var(--white);
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.trusted-logo svg {
  width: auto;
  max-width: 240px;
}

.trusted-logo:hover {
  opacity: 1;
}

/* Marquee keyframe — translates by --marquee-width (set by JS) */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-width, 50%))); }
}


/* ── 6c. About body copy ── */

/* 4-column grid: tag | content (spans 3 cols) */
.about-body {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  gap: 3rem 12px;
  padding: 5rem 0 4rem;
  align-items: start;
}

.about-tag-col    { grid-column: 1; }
.about-content-col { grid-column: 2 / -1; }

.about-headline {
  font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(2.8rem, 3.2vw, 4.2rem);
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 1.75rem;
  letter-spacing: -0.01em;
}

/* Orange italic accent on "Calidad" */
.about-headline em {
  color: #fd6e1c;
  font-style: italic;
  font-weight: 400;
}

.about-body-text {
  font-family: "PP Neue Montreal";
  font-size: 20px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 240, 235, 0.6);
  max-width: 900px;
}


/* ── 6d. Stat cards ── */

/* 4-column grid matching the about body */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 2vw;
  padding: 0 0 2rem;
}

/* Base card — angled bottom-right corner via clip-path */
.about-stat-card {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
  background: #111111;
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background 0.25s ease;
  cursor: default;
  border: 1px solid #ffffff0c;
  text-decoration: none;
  color: inherit;
}

/* 4th card — accent (orange) with an angled top-left corner as well */
.about-stat-card:nth-child(4) {
  clip-path: polygon(
    32px 0,
    100% 0,
    100% calc(100% - 32px),
    calc(100% - 32px) 100%,
    0 100%,
    0 32px
  );
  background: #fd6e1c;
  cursor: pointer;
}

/* 4th card hover — invert to dark */
.about-stat-card:nth-child(4):hover {
  background: #111111;
}

.about-stat-card:nth-child(4) .about-stat-card__desc {
  color: #fff;
}

/* All other cards hover — turn orange */
.about-stat-card:hover {
  background: #fd6e1c;
}

.about-stat-card__number {
  font-family: "PP Neue Montreal";
  font-weight: 500;
  font-size: clamp(3rem, 6.5vw, 5rem);
  line-height: 1;
  color: var(--white);
  letter-spacing: -0.02em;
}

.about-stat-card__label {
  border-top: 1px solid #ffffff55;
  padding-top: 1vw;
  font-family: "PP Neue Montreal";
  font-weight: 600;
  font-size: 20px;
  color: var(--white);
  letter-spacing: 0.01em;
  margin-top: 5vw;
}

.about-stat-card__desc {
  font-family: "PP Neue Montreal";
  font-weight: 300;
  font-size: 13px;
  color: rgba(245, 240, 235, 0.5);
  line-height: 1.45;
}


/* ── 6e. Scroll-reveal animation ── */

/* Initial state — hidden + shifted down */
.about-body,
.about-stats,
.trusted-bar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

/* Revealed state — added by JS (observeReveal / IntersectionObserver) */
.about-body.is-visible,
.about-stats.is-visible,
.trusted-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slight delay for stats grid so it reveals after the body text */
.about-stats.is-visible { transition-delay: 0.15s; }


/* ── 6f. Breakpoints — about tablet (≤ 991px) ── */

@media screen and (max-width: 991px) {
  .about-body {
    grid-template-columns: 140px repeat(2, 1fr);
    gap: 2rem 12px;
  }

  .about-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ── 6g. Breakpoints — about mobile (≤ 767px) ── */

@media screen and (max-width: 767px) {
  .trusted-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2rem var(--page-horizontal-padding);
  }

  .trusted-bar__label  { min-width: unset; }
  .trusted-bar__track-wrap { width: 100%; }

  .about-body {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 3rem 0 2.5rem;
  }

  .about-tag-col,
  .about-content-col { grid-column: 1; }

  .about-headline { font-size: clamp(1.2rem, 5vw, 1.6rem); }

  .about-stats {
    grid-template-columns: 1fr; /* ← was repeat(2, 1fr) */
    gap: 8px;
  }

  .about-stat-card {
    padding: 1.75rem 1.25rem 1.5rem;
  }

  .about-stat-card__number {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }

  .about-stat-card__label {
    margin-top: 10vw;
  }
}


/* ── 6h. Breakpoints — about small mobile (≤ 479px) ── */

@media screen and (max-width: 479px) {
  .about-stats {
    grid-template-columns: 1fr; /* ← was 1fr 1fr */
    gap: 6px;
  }
}


/* ════════════════════════════════════════════
   7. FOOTER
   ════════════════════════════════════════════ */

/* ── 7a. Footer layout ── */

/* Outer wrapper — needed for the parallax scroll effect */
.footer-wrap {
  position: relative;
  overflow: hidden;
}

/* Inner footer — GSAP moves this element upward on scroll */
.demo-footer {
  grid-column-gap: 7.5em;
  grid-row-gap: 7.5em;
  letter-spacing: -0.02em;
  flex-flow: column;
  justify-content: space-between;
  min-height: 100svh;
  padding: 2.5em;
  font-weight: 400;
  display: flex;
  position: relative;
}

.demo-footer__links-row {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  display: flex;
}

.demo-footer__logo-row {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  display: flex;
}

/* Each column is one-third of the row with gap accounted for */
.demo-footer__col {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  width: calc(33.3333% - 1.66667em);
  display: flex;
}

.demo-footer__links {
  grid-column-gap: 0.25em;
  grid-row-gap: 0.25em;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.demo-footer__a {
  color: inherit;
  font-size: 2.75em;
  line-height: 1;
  text-decoration: none;
}

/* Dark overlay that GSAP fades in during the footer parallax scroll */
.footer-wrap__dark {
  opacity: 0;
  pointer-events: none;
  background-color: #111111;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


/* ── 7b. Breakpoints — footer tablet (≤ 991px) ── */

@media screen and (max-width: 991px) {
  .demo-footer__links-row {
    flex-flow: column;
  }

  .demo-footer__logo-row {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }

  .demo-footer__col {
    width: 100%;
  }
}


/* ── 7c. Breakpoints — footer mobile (≤ 767px) ── */

@media screen and (max-width: 767px) {
  .demo-eyebrow { font-size: 1em; }

  .demo-p {
    max-width: 100%;
    font-size: 1.25em;
  }

  .demo-footer {
    padding-left: 1em;
    padding-right: 1em;
  }

  .demo-footer__col {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }

  .demo-footer__a { font-size: 1.75em; }
}


/* ════════════════════════════════════════════
   8. SERVICES / INDUSTRIES SECTION
   ════════════════════════════════════════════ */

/* ── 8a. Section + top block ── */

.services {
  color: var(--white);
  padding: 6rem 0 5rem;
}

.services-inner {
  padding: 0 var(--page-horizontal-padding);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.services-top {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3rem 0 3.5rem;
}

/* Headline row: tag badge inline with first line of h2 */
.services-top__headline-row {
  display: block;
}

/* Tag badge — floated inline before the headline */
.services-tag-btn {
  display: inline-block;
  font-family: "PP Neue Montreal";
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(245, 240, 235, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  padding: 0.35em 0.75em;
  text-decoration: none;
  white-space: nowrap;
  margin-right: 2em;
  vertical-align: top;
  position: relative;
  top: 1em;
  transition: color 0.2s ease;
}

.services-tag-btn:hover {
  color: var(--white);
}

.services-top__headline {
  display: inline;
  vertical-align: top;
  font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(2.8rem, 3.2vw, 4.2rem);
  line-height: 1.2;
  color: var(--white);
  letter-spacing: -0.01em;
}

.services-top__headline em {
  color: #fd6e1c;
  font-style: italic;
}

/* Two-column bottom row: CTA left, paragraph right */
.services-top__bottom {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: end;
}

.services-top__bottom-left {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}

/* Shared CTA border-button (also used inside the grid) */
.services-cta {
  display: inline-flex;
  align-items: center;
  font-family: "PP Neue Montreal";
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  padding: 0.6em 1.1em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.services-cta:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}

.services-subtext {
  margin: 0;
  font-family: "PP Neue Montreal";
  font-size: 20px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 240, 235, 0.6);
  max-width: 80%;
  float: right;
  text-align: justify;
}


/* ── 8b. Services grid ── */

/* 3-column, 2-row grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* Grid position helpers */
.services-r1c1 { grid-column: 1; grid-row: 1; }
.services-r1c2 { grid-column: 2; grid-row: 1; }
.services-r1c3 { grid-column: 3; grid-row: 1; }
.services-r2c1 { grid-column: 1; grid-row: 2; }
.services-r2c2 { grid-column: 2; grid-row: 2; }
.services-r2c3 { grid-column: 3; grid-row: 2; }


/* ── 8c. Card base styles ── */

/* Angled bottom-right corner via clip-path */
.services-card {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
  position: relative;
  min-height: clamp(200px, 32vh, 380px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: background 0.25s ease;
}

.services-card--light  { background: #111111; color: #fff; }
.services-card--accent { background: #fd6e1c; color: #111111; }

.services-card--light:hover  { background: #fd6e1c; }
.services-card--accent:hover { background: #fff; }

/* r2c3: plain text + CTA cell, no clip-path */
.services-card--cta-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1em;           /* single declaration — duplicate removed */
  background: transparent;
  clip-path: none;
  min-height: unset;
  cursor: default;
}

/* Push CTA to the bottom of the cell */
.services-card--cta-cell .services-cta {
  align-self: flex-end;
  margin-top: auto;
}

.services-card--cta-cell .services-card__text {
  font-family: "PP Neue Montreal";
  font-size: 20px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 240, 235, 0.6);
  max-width: 90%;
}

.services-card__text {
  font-family: "PP Neue Montreal";
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 240, 235, 0.5);
  margin: 0;
}


/* ── 8d. Card body + icons ── */

/* Decorative icon — top-left of card */
.services-card__icon {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 3vw;
  height: 3vw;
  color: rgba(255, 255, 255, 0.55);
}

.services-card__icon svg {
  width: 100%;
  height: 100%;
}

.services-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.services-card__title {
  font-family: "PP Neue Montreal";
  font-weight: 500;
  font-size: clamp(1.8rem, 2vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  color: inherit;
}

.services-card__desc {
  font-family: "PP Neue Montreal";
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 70%;
}


/* ── 8e. Scroll-reveal animation ── */

.services-top,
.services-grid {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

/* Grid reveals slightly after the top block */
.services-grid { transition-delay: 0.1s; }

.services-top.is-visible,
.services-grid.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ── 8f. Breakpoints — services tablet (≤ 991px) ── */

/* Smaller desktop (≤ 1280px) — tighten the 3-col grid before it breaks */
@media screen and (max-width: 1280px) {
  .services-card {
    min-height: clamp(180px, 28vh, 300px);
  }
}

@media screen and (max-width: 991px) {
  .services-top__bottom {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* 2-column grid, hide the empty first cell and CTA-only cell */
  .services-grid {
    grid-template-columns: 1fr 1fr;
  }

  .services-r1c1 { display: none; }
  .services-r1c2 { grid-column: 1; grid-row: 1; }
  .services-r1c3 { grid-column: 2; grid-row: 1; }
  .services-r2c1 { grid-column: 1; grid-row: 2; }
  .services-r2c2 { grid-column: 2; grid-row: 2; }
  .services-r2c3 { display: none; }
}


/* ── 8g. Breakpoints — services mobile (≤ 767px) ── */

@media screen and (max-width: 767px) {
  .services { padding: 4rem 0 3rem; }

  .services-grid { grid-template-columns: 1fr; }

  /* Hide empty spacer cells on mobile */
  .services-r1c1,
  .services-r2c3 { display: none; }

  .services-r1c2,
  .services-r1c3,
  .services-r2c1,
  .services-r2c2 {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 200px;
  }

  .services-top__headline {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
}


/* ════════════════════════════════════════════
   9. WHAT WE OFFER SECTION
   ════════════════════════════════════════════ */

/* ── 10a. Section + inner wrapper ── */

.what-we-offer {
  padding: 0 var(--page-horizontal-padding);
  margin: 4vw 0;
}

/* Dark card container with angled top-left + bottom-right corners */
.wwo-inner {
  background: #111111;
  /*background-image: url("img/overlay.png");
  background-position: center center;
  background-size: cover;*/
  clip-path: polygon(
    76px 0,
    100% 0,
    100% calc(100% - 76px),
    calc(100% - 76px) 100%,
    0 100%,
    0 76px
  );
  padding: 6rem 5vw 5rem;
  border: 1px solid #ffffff0c;
}

.wwo-content {
  max-width: 100%;
  margin: 0 auto;
}


/* ── 10b. Top row (headline + subtext + CTA) ── */

.wwo-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 3.5rem;
}

.wwo-top__left {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.wwo-top__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding-bottom: 4px;
}

.wwo-header { margin-bottom: 0; }

.wwo-headline {
  font-family: "PP Neue Montreal";
  margin: 0 0 1.75rem;
  font-weight: 400;
  font-size: clamp(2.8rem, 3.2vw, 4.2rem);
  line-height: 1.2;
  color: var(--white);
  letter-spacing: -0.01em;
}

/* Orange italic accent on "unique" */
.wwo-headline span {
  color: #fd6e1c;
  font-style: italic;
}

.wwo-subtext {
  font-family: "PP Neue Montreal";
  font-size: 20px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 240, 235, 0.6);
  max-width: 600px;
  margin: 0;
}

/* Outline CTA button (same pattern as .services-cta) */
.wwo-cta {
  display: inline-flex;
  align-items: center;
  font-family: "PP Neue Montreal";
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--white);
  background-color: #fd6e1c;
  border: 1px solid #fd6e1c;
  border-radius: 3px;
  padding: 0.6em 1.1em;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.wwo-cta:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}


/* ── 10c. Column headers + row grid ── */

/* 4-column grid shared by the header row and every service row */
.wwo-col-headers,
.wwo-row {
  display: grid;
  grid-template-columns: 0.5fr 1fr 2fr 1fr;
  align-items: center;
}

.wwo-col-headers {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wwo-col-header {
  font-family: "PP Neue Montreal";
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(245, 240, 235, 0.28);
  text-transform: uppercase;
}

/* Service rows list */
.wwo-list {
  display: flex;
  flex-direction: column;
}

.wwo-row {
  padding: 4rem 0;
  cursor: default;
  position: relative;
}

/* Diagonal hatch divider between rows */
.wwo-row::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.257) 0px,
    rgba(255, 255, 255, 0.257) 1px,
    transparent 1px,
    transparent 6px
  );
  background-size: 8px 8px;
}


/* ── 10d. Row cells ── */

.wwo-cell {
  padding-right: 1.5rem;
}

/* Extra left padding on the "what we do" column to align with col header */
.wwo-cell--what,
.wwo-col-header:nth-child(3) {
  padding-left: 4rem;
}

/* Row number (e.g. "01") */
.wwo-num {
  font-family: "PP Neue Montreal";
  font-weight: 500;
  font-size: clamp(1.25rem, 1.6vw, 1.9rem);
  color: #fd6e1c;
  line-height: 1;
  display: block;
}

/* Service name */
.wwo-service-name {
  font-family: "PP Neue Montreal";
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffffff;
  display: block;
}

/* When wwo-service-name is an <a> tag — reset link styles, keep GSAP colours working */
a.wwo-service-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Service description heading */
.wwo-desc {
  font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.85rem;
  max-width: 50%;
}

/* Tag pills */
.wwo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-width: 80%;
}

.wwo-tag {
  font-family: "PP Neue Montreal";
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(245, 240, 235, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  padding: 0.25em 0.6em;
}


/* ── 10e. Media cell (hover reveal) ── */

/* Hidden by default — GSAP in initWhatWeOffer() fades this in on row hover */
.wwo-cell--media {
  padding-right: 0;
  opacity: 0;
  pointer-events: none;
  align-self: center;
}

.wwo-media-inner {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 500px;
}

.wwo-media-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  filter: grayscale(15%);
}

/* Quote row: small avatar + italic quote text */
.wwo-media-quote-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.wwo-media-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 1px;
  filter: grayscale(20%);
}

.wwo-media-quote {
  font-family: "PP Neue Montreal";
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
  color: rgba(245, 240, 235, 0.45);
  line-height: 1.55;
  margin: 0;
}


/* ── 10f. Breakpoints — WWO tablet (≤ 991px) ── */

@media screen and (max-width: 991px) {
  .wwo-inner {
    padding: 3rem 3rem 4rem;
  }

  .wwo-content { max-width: 95%; }

  .wwo-top { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Drop media column from grid on tablet */
  .wwo-col-headers,
  .wwo-row {
    grid-template-columns: 60px 1fr 2fr;
  }

  .wwo-cell--media { display: none; }

  .wwo-row { padding: 2.5rem 0; }
}


/* ── 10g. Breakpoints — WWO mobile (≤ 767px) ── */

@media screen and (max-width: 767px) {
  .what-we-offer { margin: 10vw 0; }

  .wwo-inner {
    padding: 2.5rem 1.75rem 3rem;
    /* Smaller corner cuts on mobile */
    clip-path: polygon(
      32px 0, 100% 0,
      100% calc(100% - 32px),
      calc(100% - 32px) 100%,
      0 100%, 0 32px
    );
  }

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

  .wwo-top {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
  }

  /* Hide column headers on mobile — content is self-explanatory */
  .wwo-col-headers { display: none; }

  .wwo-headline { font-size: clamp(1.6rem, 7vw, 2.25rem); }

  /* Single-column stacked layout */
  .wwo-col-headers,
  .wwo-row {
    grid-template-columns: 1fr;
  }

  .wwo-row {
    padding: 1.75rem 0;
    gap: 0.5rem;
    align-items: start;
  }

  .wwo-cell    { padding-right: 0; }
  .wwo-cell--what { padding-left: 0; }
  .wwo-subtext { font-size: 13px; }

  /* Hide the description/subheadline on mobile */
  .wwo-desc { display: none; }

  /* 2x2 grid for tags on mobile */
  .wwo-tags {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 0.4rem;
    max-width: 100%;
  }

  /* Show media cell on mobile */
  .wwo-cell--media {
    display: block;
    opacity: 1;
    pointer-events: auto;
    margin-top: 1rem;
  }

  .wwo-media-inner {
    max-width: 100%;
  }

  /* Hide the quote row on mobile, only show image */
  .wwo-media-quote-row {
    display: none;
  }
}





/* ════════════════════════════════════════════════════════════════
   INDUSTRIES + SERVICES SECTION  (servindus)
   Add this block to style.css — suggested placement after section 10
   (What We Offer) and before any future section 11.
   ════════════════════════════════════════════════════════════════

   TABLE OF CONTENTS
   ─────────────────
   SI-1.  Section wrapper + header
   SI-2.  Headline
   SI-3.  Body split (left | right)
   SI-4.  Left — industry list
   SI-5.  Right — slider chrome (dots, viewport, track)
   SI-6.  Service cards
   SI-7.  CTA button
   SI-8.  Scroll-reveal animation
   SI-9.  Breakpoints
   ════════════════════════════════════════════════════════════════ */


/* ── SI-1. Section wrapper + header ── */

.servindus {
  color: var(--white);
  padding: 6rem 0 5rem;
}

.servindus-inner {
  padding: 0 var(--page-horizontal-padding);
}

/* "OUR SERVICES" tag + full-width rule — matches your existing section-tag pattern */
.servindus-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.servindus-header__rule {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}


/* ── SI-2. Headline ── */

.servindus-headline {
  font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(2.8rem, 3.2vw, 4.2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 4rem;
  max-width: 700px;
}

/* Orange italic accent — consistent with other section headlines */
.servindus-headline span {
  color: #fd6e1c;
  font-style: italic;
}


/* ── SI-3. Body split ── */

/* Left column: ~35%  |  Right column: ~65% */
.servindus-body {
  display: grid;
  grid-template-columns: 35fr 65fr;
  gap: 0;
  align-items: start;
}


/* ── SI-4. Left — industry list ── */

.servindus-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin-bottom: 0;
}

.servindus-industry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.servindus-industry {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: opacity 0.3s ease;
}

/* Non-active industries dim to ~20% opacity */
.servindus-industry-list:has(.is--active) .servindus-industry:not(.is--active) {
  opacity: 0.2;
}

.servindus-industry__btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 2rem 1.5rem 2rem 0;
  color: var(--white);
  font-family: "PP Neue Montreal";
}

.servindus-industry__btn:focus-visible {
  outline: 1px solid var(--white);
  outline-offset: 2px;
}

.servindus-industry__name {
  display: block;
  font-weight: 500;
  font-size: clamp(1.6rem, 1.9vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
  transition: color 0.25s ease;
}

.servindus-industry.is--active .servindus-industry__name {
  color: #fd6e1c;
}

.servindus-industry__desc {
  font-family: "PP Neue Montreal";
  font-weight: 300;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(245, 240, 235, 0.5);
  margin: 0;
  max-width: 340px;
}


/* ── SI-5. Right — slider chrome ── */

.servindus-right {
  padding-left: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Dot indicators row */
.servindus-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.servindus-dot {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  height: 3px;
  width: 28px;
  transition: background 0.25s ease, width 0.35s cubic-bezier(0.525, 0, 0, 1);
}

.servindus-dot.is--active {
  background: var(--white);
  width: 48px;
}

/* Slider viewport — clips the sliding track */
.servindus-slider-wrap {
  overflow: hidden;
  position: relative;
}

/* The track holds all slides side-by-side;
   GSAP translates this on industry/dot change */
.servindus-slider-track {
  display: flex;
  will-change: transform;
}

/* Each slide is exactly 100% of the viewport wide */
.servindus-slide {
  min-width: 100%;
  flex-shrink: 0;
  /* Hidden slides are inaccessible to keyboard/screen readers */
  visibility: hidden;
  pointer-events: none;
}

.servindus-slide.is--visible {
  visibility: visible;
  pointer-events: auto;
}

/* Two cards side-by-side within each slide */
.servindus-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}


/* ── SI-6. Service cards ── */

.servindus-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
}

.servindus-card__img-wrap {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  width: 100%;
  margin-bottom: 1rem;
}

.servindus-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.525, 0, 0, 1);
  filter: grayscale(10%);
}

.servindus-card:hover .servindus-card__img {
  transform: scale(1.04);
}

.servindus-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.1rem 0 0.5rem;
}

.servindus-card__date {
  font-family: "PP Neue Montreal";
  font-size: 11px;
  font-weight: 300;
  color: rgba(245, 240, 235, 0.38);
  letter-spacing: 0.04em;
}

.servindus-card__title {
  font-family: "PP Neue Montreal";
  font-weight: 500;
  font-size: clamp(1.1rem, 1.4vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0.2rem 0 0;
}

.servindus-card__tag {
  font-family: "PP Neue Montreal";
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 240, 235, 0.35);
  margin-bottom: 0.6rem;
}

/* "View Service" link with extending arrow — mirrors mockup */
.servindus-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: "PP Neue Montreal";
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 0.25rem;
  transition: color 0.2s ease;
}

.servindus-card__link:hover {
  color: #fd6e1c;
}

.servindus-card__link svg {
  width: 52px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.525, 0, 0, 1);
}

.servindus-card__link:hover svg {
  opacity: 1;
  transform: translateX(6px);
}


/* ── SI-7. CTA button (bottom right) ── */

.servindus-cta-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

/* Pill outline button — matches mockup "Learn more about services" */
.servindus-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "PP Neue Montreal";
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  padding: 0.85em 2em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.servindus-cta-btn:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
}


/* ── SI-8. Scroll-reveal animation ── */

/* Initial hidden state — same pattern as rest of site */
.servindus-header,
.servindus-headline,
.servindus-body {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.servindus-headline.is-visible { transition-delay: 0.05s; }
.servindus-body.is-visible     { transition-delay: 0.1s;  }

.servindus-header.is-visible,
.servindus-headline.is-visible,
.servindus-body.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ── SI-9. Breakpoints ── */

/* ── Tablet (≤ 991px) ── */
@media screen and (max-width: 991px) {
  .servindus-body {
    grid-template-columns: 1fr;
  }

  .servindus-right {
    padding-left: 0;
    margin-top: 2.5rem;
  }
}

/* ── Mobile (≤ 767px) ── */
@media screen and (max-width: 767px) {
  .servindus { padding: 4rem 0 3rem; }

  .servindus-headline {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
    margin-bottom: 2.5rem;
  }

  .servindus-industry__name {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }

  /* Stack cards vertically on mobile */
  .servindus-cards-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ── Small mobile (≤ 479px) ── */
@media screen and (max-width: 479px) {
  .servindus-industry__btn {
    padding: 1.5rem 0.75rem 1.5rem 0;
  }
}

/* ════════════════════════════════════════════════════════════════
   SOLUTIONS SECTION
   Append to the bottom of style.css
   ════════════════════════════════════════════════════════════════ */

.solutions {
  color: var(--white);
  padding: 6rem 0 5rem;
}

.solutions-inner {
  padding: 0 var(--page-horizontal-padding);
}


/* ── Top row: tag left | content right ── */

.solutions-top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.75rem 3rem;
  padding: 0 0 3.5rem;
  align-items: start;
}

.solutions-top__left  { grid-column: 1; grid-row: 1; }
.solutions-top__right { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 1.75rem; }

/* Pills — left column, row 3 */
.solutions-pills {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-self: center;
  margin-top: 1rem;
}

/* Learn More — right column, row 3, aligned to left edge of content */
.solutions-learn-more-wrap {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  align-items: center;
  margin-top: 1rem;
}

.solutions-headline {
  font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(2.8rem, 3.2vw, 4.2rem);
  line-height: 1.2;
  color: var(--white);
  letter-spacing: -0.01em;
  margin: 0;
}

.solutions-headline em {
  color: #fd6e1c;
  font-style: italic;
  font-weight: 400;
}

.solutions-body-text {
  font-family: "PP Neue Montreal";
  font-size: 20px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 240, 235, 0.6);
  max-width: 900px;
  margin: 0;
}


/* ── Controls row: pills + Learn More ── */

.solutions-pill {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  background: transparent;
  color: rgba(245, 240, 235, 0.55);
  font-family: "PP Neue Montreal";
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  padding: 0.45em 0.85em;
  cursor: pointer;
  transition: all 0.25s ease;
}

.solutions-pill:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.solutions-pill.is--active {
  background: #fd6e1c;
  border-color: #fd6e1c;
  color: #111111;
}

.solutions-learn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "PP Neue Montreal";
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  padding: 0.45em 1.1em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.solutions-learn-more:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}


/* ── Bottom row: 4-column card grid ── */

.solutions-cards {
  position: relative;
  min-height: 320px;
}

.solutions-card-set {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Shared card base — clip-path with cut corner matching about-stat-card */
.solutions-card {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
  border: 1px solid #ffffff0c;
  overflow: hidden;
  min-height: 300px;
  position: relative;
}


/* ── Image cards ── */

.solutions-card--img {
  background: #111111;
}

.solutions-card--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.525, 0, 0, 1);
}

.solutions-card--img:hover img {
  transform: scale(1.04);
}


/* ── Stat cards ── */

.solutions-card--stat {
  background: #111111;
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background 0.25s ease;
  cursor: default;
}

.solutions-card--stat:hover {
  background: #fd6e1c;
}

/* Accent (orange) stat card — 4th card in each set */
.solutions-card--accent {
  background: #fd6e1c;
}

.solutions-card--accent:hover {
  background: #111111;
}

.solutions-card--accent .solutions-card__desc {
  color: rgba(255, 255, 255, 0.85);
}

/* Arrow icon — top right of stat cards */
.solutions-card__arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: border-color 0.2s ease;
}

.solutions-card--stat:hover .solutions-card__arrow {
  border-color: rgba(255, 255, 255, 0.6);
}

.solutions-card__number {
  font-family: "PP Neue Montreal";
  font-weight: 500;
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  line-height: 1;
  color: var(--white);
  letter-spacing: -0.02em;
}

.solutions-card__label {
  font-family: "PP Neue Montreal";
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 26px);
  color: var(--white);
  letter-spacing: 0.01em;
  margin-top: clamp(1.5rem, 6vw, 5rem);
  padding-top: clamp(0.5rem, 1vw, 1rem);
  border-top: 1px solid rgba(245, 240, 235, 0.5);
}

.solutions-card__desc {
  font-family: "PP Neue Montreal";
  font-weight: 300;
  font-size: 16px;
  color: rgba(245, 240, 235, 0.5);
  line-height: 1.45;
}


/* ── Scroll reveal ── */

.solutions-top,
.solutions-cards {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.solutions-cards { transition-delay: 0.15s; }

.solutions-top.is-visible,
.solutions-cards.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ── Breakpoints ── */

/* Smaller desktop / large laptop (≤ 1280px) */
@media screen and (max-width: 1280px) {
  .solutions-card { min-height: 260px; }
  .solutions-card-set { gap: 8px; }
}

/* Tablet */
@media screen and (max-width: 991px) {
  .solutions-top {
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem 2rem;
  }

  .solutions-pills { grid-column: 1; }
  .solutions-learn-more-wrap { grid-column: 2; }

  .solutions-card-set {
    grid-template-columns: repeat(2, 1fr);
  }

  .solutions-card { min-height: 240px; }
}

/* Mobile */
@media screen and (max-width: 767px) {
  .solutions { padding: 4rem 0 3rem; }

  .solutions-top {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-bottom: 2.5rem;
  }

  .solutions-top__left,
  .solutions-top__right { grid-column: 1; grid-row: auto; }

  .solutions-pills { grid-column: 1; grid-row: auto; margin-top: 0.5rem; }
  .solutions-learn-more-wrap { grid-column: 1; grid-row: auto; margin-top: 0; }

  .solutions-headline {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
  }

  .solutions-card-set {
    grid-template-columns: 1fr; /* ← was 1fr 1fr */
    gap: 8px;
  }

  .solutions-card { min-height: 260px; }

  .solutions-card--stat {
    padding: 1.75rem 1.25rem 1.5rem;
  }

  .solutions-card__number {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }

  .solutions-card__label {
    font-size: 16px;
    margin-top: 6vw;
  }
}

/* Small mobile */
@media screen and (max-width: 479px) {
  .solutions-card-set {
    grid-template-columns: 1fr; /* ← was 1fr 1fr */
    gap: 6px;
  }
}

/* ════════════════════════════════════════════
   CONTACT SECTION
   ════════════════════════════════════════════ */

.contact-section {
  color: var(--white);
  padding: 8rem 0 8rem;
}

.contact-inner {
  padding: 0 var(--page-horizontal-padding);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: stretch;
}

/* ── Left column ── */

.contact-left {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0.25rem;
  min-height: 100%;
}

.contact-left__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.contact-headline {
  font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(2.8rem, 3.2vw, 4.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
}

.contact-headline em {
  color: #fd6e1c;
  font-style: italic;
  font-weight: 400;
}

.contact-subtext {
  font-family: "PP Neue Montreal";
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 240, 235, 0.55);
  max-width: 340px;
  margin: 0;
}

/* ── Contact details ── */

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.contact-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.contact-detail-icon {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 240, 235, 0.5);
  flex-shrink: 0;
  margin-top: 1px;
}

.contact-detail-label {
  font-family: "PP Neue Montreal";
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.2rem;
}

.contact-detail-value {
  font-family: "PP Neue Montreal";
  font-size: 13px;
  font-weight: 300;
  color: rgba(245, 240, 235, 0.45);
  line-height: 1.5;
}

/* ── Social links ── */

.contact-socials {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}

.contact-social {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 240, 235, 0.45);
  transition: color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.contact-social:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ── Form card ── */

.contact-card {
  background: #111111;
  clip-path: polygon(
    76px 0,
    100% 0,
    100% calc(100% - 76px),
    calc(100% - 76px) 100%,
    0 100%,
    0 76px
  );
  border: 1px solid #ffffff0c;
  padding: 6rem 3.5rem 6rem;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 1.75rem;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-field--full {
  grid-column: 1 / -1;
}

.contact-label {
  font-family: "PP Neue Montreal";
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.01em;
}

.contact-input {
  font-family: "PP Neue Montreal";
  font-size: 14px;
  font-weight: 300;
  color: var(--white);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.65em 0;
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
}

.contact-input::placeholder {
  color: rgba(245, 240, 235, 0.25);
}

.contact-input:focus {
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.contact-textarea {
  resize: none;
  min-height: 220px;
  line-height: 1.6;
}

.contact-submit {
  width: 100%;
  background: #fd6e1c;
  border: 1px solid #fd6e1c;
  border-radius: 3px;
  color: #fff;
  font-family: "PP Neue Montreal";
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 1em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  margin-top: 0.5rem;
}

.contact-submit:hover {
  background: #fff;
  border-color: #fff;
  color: #111111;
}

.contact-form-status {
  font-family: "PP Neue Montreal";
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  border-radius: 3px;
  margin-bottom: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

.contact-form-status--success {
  background: rgba(253, 110, 28, 0.08);
  border: 1px solid rgba(253, 110, 28, 0.3);
  color: #fd6e1c;
}

.contact-form-status--error {
  background: rgba(255, 80, 60, 0.08);
  border: 1px solid rgba(255, 80, 60, 0.3);
  color: #ff503c;
}

/* ── Scroll reveal ── */

.contact-left,
.contact-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.contact-card { transition-delay: 0.1s; }

.contact-left.is-visible,
.contact-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Breakpoints ── */

@media screen and (max-width: 991px) {
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
  }

  .contact-left {
    gap: 2rem;
    min-height: unset;
  }

  .contact-details {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .contact-socials { margin-top: 0; }

  .contact-subtext { max-width: 100%; }
}

@media screen and (max-width: 767px) {
  .contact-section { padding: 4rem 0 3rem; }

  .contact-card {
    padding: 2.5rem 1.75rem 2.5rem;
    clip-path: polygon(
      32px 0, 100% 0,
      100% calc(100% - 32px),
      calc(100% - 32px) 100%,
      0 100%, 0 32px
    );
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .contact-headline {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}





/* ════════════════════════════════════════════════════════════════
   ABOUT PAGE SECTIONS — CSS
   ════════════════════════════════════════════════════════════════
   
   TABLE OF CONTENTS
   ─────────────────
   1.  WHY CHOOSE CALIDAD
   2.  BUSINESS SERVICES CARDS
   3.  YOUR PARTNER SECTION
   4.  OUR PROCESS SECTION
   5.  FREE CONSULTATION CTA
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════
   1. WHY CHOOSE CALIDAD
   ════════════════════════════════════════════ */

.why-choose {
  color: var(--white);
  padding: 8rem 0 6rem;
}

.why-choose-inner {
  padding: 0 var(--page-horizontal-padding);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* Left column - tag + headline stacked */
.why-choose-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.why-choose-left .about-tag {
  align-self: flex-start;
}

.why-choose-headline {
  font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(2.4rem, 3.5vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}

.why-choose-headline em {
  color: #fd6e1c;
  font-style: italic;
  font-weight: 400;
}

/* Right column — feature list (aligned to top with tag) */
.why-choose-right {
  padding-top: 0;
}

.why-choose-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-choose-feature {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.why-choose-feature:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.why-choose-feature__text {
  flex: 1;
}

.why-choose-feature__label {
  font-family: "PP Neue Montreal";
  font-size: 15px;
  font-weight: 300;
  color: rgba(245, 240, 235, 0.7);
  line-height: 1.5;
}

.why-choose-feature__num {
  font-family: "PP Neue Montreal";
  font-size: 13px;
  font-weight: 500;
  color: rgba(245, 240, 235, 0.35);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* Scroll reveal */
.why-choose-inner {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.why-choose-inner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Breakpoints */
@media screen and (max-width: 991px) {
  .why-choose-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media screen and (max-width: 767px) {
  .why-choose {
    padding: 5rem 0 4rem;
  }
  
  .why-choose-headline {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }
  
  .why-choose-feature {
    padding: 1.25rem 0;
  }
  
  .why-choose-feature__label {
    font-size: 14px;
  }
}


/* ════════════════════════════════════════════
   2. BUSINESS SERVICES CARDS
   ════════════════════════════════════════════ */

.biz-services {
  color: var(--white);
  padding: 4rem 0 6rem;
}

.biz-services-inner {
  padding: 0 var(--page-horizontal-padding);
}

/* Header row */
.biz-services-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 3rem;
}

.biz-services-header__left {
  display: flex;
  align-items: flex-end;
}

/* Button style for the Business Services tag */
.biz-services-tag-btn {
  display: inline-flex;
  align-items: center;
  font-family: "PP Neue Montreal";
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  padding: 0.6em 1.1em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.biz-services-tag-btn:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}

.biz-services-header__right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-left: auto;
  text-align: right;
  max-width: 600px;
}

.biz-services-headline {
  font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(1.8rem, 2.4vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
}

.biz-services-headline em {
  color: #fd6e1c;
  font-style: italic;
  font-weight: 400;
}

.biz-services-subtext {
  font-family: "PP Neue Montreal";
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 240, 235, 0.55);
  max-width: 600px;
  margin: 0;
  margin-left: auto;
}

/* Cards grid */
.biz-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Card base — snipped corner */
.biz-card {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 32px),
    calc(100% - 32px) 100%,
    0 100%
  );
  position: relative;
  min-height: 280px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: background 0.25s ease;
  cursor: default;
  border: 1px solid #ffffff0c;
}

.biz-card--dark {
  background: #111111;
}

.biz-card--dark:hover {
  background: #fd6e1c;
}

.biz-card--accent {
  background: #fd6e1c;
  /* Double snipped corners for accent card */
  clip-path: polygon(
    32px 0,
    100% 0,
    100% calc(100% - 32px),
    calc(100% - 32px) 100%,
    0 100%,
    0 32px
  );
}

.biz-card--accent:hover {
  background: #111111;
}

/* Icon */
.biz-card__icon {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  color: rgba(255, 255, 255, 0.5);
}

.biz-card__icon svg {
  width: 100%;
  height: 100%;
}

.biz-card--accent .biz-card__icon {
  color: rgba(255, 255, 255, 0.7);
}

/* Card body */
.biz-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.biz-card__title {
  font-family: "PP Neue Montreal";
  font-weight: 500;
  font-size: clamp(1.1rem, 1.3vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
}

.biz-card__desc {
  font-family: "PP Neue Montreal";
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.biz-card--accent .biz-card__desc {
  color: rgba(255, 255, 255, 0.8);
}

/* Scroll reveal */
.biz-services-header,
.biz-services-grid {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.biz-services-grid {
  transition-delay: 0.1s;
}

.biz-services-header.is-visible,
.biz-services-grid.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Breakpoints */
@media screen and (max-width: 991px) {
  .biz-services-header {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  
  .biz-services-header__right {
    text-align: left;
    margin-left: 0;
  }
  
  .biz-services-subtext {
    margin-left: 0;
  }
  
  .biz-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .biz-services {
    padding: 3rem 0 4rem;
  }
  
  .biz-services-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .biz-card {
    min-height: 200px;
    padding: 1.25rem;
  }
  
  .biz-services-headline {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }
}


/* ════════════════════════════════════════════
   3. YOUR PARTNER SECTION
   ════════════════════════════════════════════ */

.your-partner {
  color: var(--white);
  padding: 4rem 0 5rem;
}

.your-partner-inner {
  padding: 0 var(--page-horizontal-padding);
}

.your-partner-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 3rem;
  align-items: start;
}

/* Left — CTA button */
.your-partner-left {
  padding-top: 0.5rem;
}

.your-partner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "PP Neue Montreal";
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  padding: 0.6em 1.1em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.your-partner-cta:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}

/* Right — content */
.your-partner-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.your-partner-headline {
  font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(2rem, 2.8vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
}

.your-partner-headline em {
  color: #fd6e1c;
  font-style: italic;
  font-weight: 400;
}

.your-partner-body {
  font-family: "PP Neue Montreal";
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 240, 235, 0.6);
  max-width: 800px;
  margin: 0;
}

/* Scroll reveal */
.your-partner-grid {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.your-partner-grid.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Breakpoints */
@media screen and (max-width: 991px) {
  .your-partner-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media screen and (max-width: 767px) {
  .your-partner {
    padding: 3rem 0 4rem;
  }
  
  .your-partner-headline {
    font-size: clamp(1.5rem, 6vw, 2.2rem);
  }
  
  .your-partner-body {
    font-size: 15px;
  }
}


/* ════════════════════════════════════════════
   4. OUR PROCESS SECTION
   ════════════════════════════════════════════ */

.our-process {
  color: var(--white);
  padding: 6rem 0 8rem;
  background: #0a0a0a;
}

.our-process-inner {
  padding: 0 var(--page-horizontal-padding);
}

/* Two-column grid: headline left, content right */
.our-process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
}

/* Left column — Tag + Headline + Bottom CTA */
.our-process-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.our-process-headline {
  font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(2.4rem, 3.5vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}

.our-process-headline em {
  color: #fd6e1c;
  font-style: italic;
  font-weight: 400;
}

/* Bottom content — pushed to bottom via margin-top: auto */
.our-process-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: auto;
}

.our-process-subtext {
  font-family: "PP Neue Montreal";
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(245, 240, 235, 0.55);
  max-width: 420px;
  margin: 0;
}

.our-process-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "PP Neue Montreal";
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #111111;
  background: #fd6e1c;
  border: 1px solid #fd6e1c;
  border-radius: 3px;
  padding: 0.85em 1.75em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.our-process-cta:hover {
  background: #fff;
  border-color: #fff;
  color: #111111;
}

/* Right column — Intro + Steps */
.our-process-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.our-process-intro {
  font-family: "PP Neue Montreal";
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(245, 240, 235, 0.6);
  margin: 0 0 2.5rem 0;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.our-process-intro strong {
  color: #fd6e1c;
  font-weight: 500;
}

/* Steps list */
.our-process-steps {
  display: flex;
  flex-direction: column;
}

.our-process-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 3rem;
  padding: 4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.our-process-step:first-child {
  padding-top: 0;
}

.our-process-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Step number */
.our-process-step__num {
  font-family: "PP Neue Montreal";
  font-size: 15px;
  font-weight: 500;
  color: #fd6e1c;
  line-height: 1.4;
}

/* Step content */
.our-process-step__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.our-process-step__title {
  font-family: "PP Neue Montreal";
  font-size: 30px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
  margin: 0;
}

.our-process-step__desc {
  font-family: "PP Neue Montreal";
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(245, 240, 235, 0.45);
  margin: 0;
  max-width: 480px;
}

/* Scroll reveal */
.our-process-grid {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.our-process-grid.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Breakpoints */
@media screen and (max-width: 991px) {
  .our-process-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
  }
  
  .our-process-left {
    position: static;
  }
  
  .our-process-bottom {
    margin-top: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .our-process {
    padding: 4rem 0 5rem;
  }
  
  .our-process-headline {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }
  
  .our-process-intro {
    font-size: 14px;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
  
  .our-process-step {
    grid-template-columns: 36px 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
  }
  
  .our-process-step__num {
    font-size: 14px;
  }
  
  .our-process-step__title {
    font-size: 18px;
  }
  
  .our-process-step__desc {
    font-size: 12px;
  }
  
  .our-process-subtext {
    font-size: 13px;
  }
}


/* ════════════════════════════════════════════
   5. FREE CONSULTATION CTA
   ════════════════════════════════════════════ */

.free-consult {
  color: var(--white);
  padding: 6rem 0 8rem;
}

.free-consult-inner {
  padding: 0 var(--page-horizontal-padding);
}

.free-consult-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
}

/* Left column — uses flexbox to push bottom content down */
.free-consult-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.free-consult-left .about-tag {
  align-self: flex-start;
}

.free-consult-headline {
  font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(2.4rem, 3.8vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}

/* Bottom content — pushed to bottom via margin-top: auto */
.free-consult-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: auto;
}

.free-consult-subtext {
  font-family: "PP Neue Montreal";
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(245, 240, 235, 0.55);
  max-width: 380px;
  margin: 0;
}

.free-consult-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "PP Neue Montreal";
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #111111;
  background: #fd6e1c;
  border: 1px solid #fd6e1c;
  border-radius: 3px;
  padding: 0.85em 1.75em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.free-consult-cta:hover {
  background: #fff;
  border-color: #fff;
  color: #111111;
}

/* Right column — Image */
.free-consult-right {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}

.free-consult-img-wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 900px;
  /* Snipped corner on image */
  clip-path: polygon(
    32px 0,
    100% 0,
    100% calc(100% - 32px),
    calc(100% - 32px) 100%,
    0 100%,
    0 32px
  );
}

.free-consult-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(10%);
  transition: transform 0.5s cubic-bezier(0.525, 0, 0, 1);
}

.free-consult-img-wrap:hover .free-consult-img {
  transform: scale(1.04);
}

/* Scroll reveal */
.free-consult-grid {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.free-consult-grid.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Breakpoints */
@media screen and (max-width: 991px) {
  .free-consult-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
  }
  
  .free-consult-right {
    justify-content: flex-start;
  }
  
  .free-consult-img-wrap {
    max-width: 100%;
    min-height: 300px;
  }
  
  .free-consult-bottom {
    margin-top: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .free-consult {
    padding: 4rem 0 5rem;
  }
  
  .free-consult-headline {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  
  .free-consult-grid {
    gap: 2rem;
  }
  
  .free-consult-img-wrap {
    min-height: 250px;
    /* Smaller corner cut on mobile */
    clip-path: polygon(
      20px 0,
      100% 0,
      100% calc(100% - 20px),
      calc(100% - 20px) 100%,
      0 100%,
      0 20px
    );
  }
}

/* ════════════════════════════════════════════
   REGULATORY SERVICES — SHORT HERO
   ════════════════════════════════════════════ */

/* Short hero variant — 60vh instead of 100vh */
.hero--short {
  height: 60vh;
  min-height: 400px;
  max-height: 800px;
}

/* CHANGED: inner pages now use the Unicorn animation instead of static bg images.
   The hero-bg--regulatory and hero-bg--contact classes are no longer used —
   the static WebP images (reg-hero.webp, about-banner.webp) are kept in /img
   as fallbacks in case you want to revert a specific page. */

/* Unicorn bg on inner pages — same #unicorn-bg styles as homepage apply.
   Add a slightly stronger dark overlay on the short hero so text stays legible
   over the animation at 60vh. */
.hero--short #unicorn-bg::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.15) 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Optional: darken overlay for text legibility */
.hero--short .hero-bg::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.4) 100%
  );
  z-index: 1;
}

/* Hero content — centered at bottom */
.hero-short__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0 var(--page-horizontal-padding) 3rem;
  animation: fadeUp 0.9s 0.3s both ease-out;
}

.hero-short__title {
  font-family: "PP Neue Montreal";
  font-weight: 500;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}

/* Breakpoints */
@media screen and (max-width: 991px) {
  .hero--short {
    height: 50vh;
    min-height: 350px;
    max-height: 500px;
  }
  
  .hero-short__title {
    font-size: clamp(2.5rem, 10vw, 5rem);
  }
}

@media screen and (max-width: 767px) {
  .hero--short {
    height: 45vh;
    min-height: 300px;
    max-height: 400px;
  }
  
  .hero-short__content {
    padding-bottom: 2rem;
  }
  
  .hero-short__title {
    font-size: clamp(2rem, 12vw, 3.5rem);
  }
}











/* ════════════════════════════════════════════════════════════════
   ABOUT US PAGE — ADDITIONAL CSS
   Calidad Consulting
   
   Add these styles to the bottom of your style.css file
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════
   WHO WE ARE HERO
   ════════════════════════════════════════════ */

.who-we-are {
    color: var(--white);
    padding: 8rem 0 6rem;
}

.who-we-are-inner {
    padding: 0 var(--page-horizontal-padding);
    display: grid;
    grid-template-columns: .5fr 1.5fr;
    gap: 6rem;
    align-items: start;
}

/* Left column */
.who-we-are-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.who-we-are-headline {
    font-family: "PP Neue Montreal";
    font-weight: 400;
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0;
}

/* Right column — pushed further right */
.who-we-are-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 0.5rem;
    padding-left: 2rem;
    margin-left: auto;
    max-width: 80vw;
}

.who-we-are-body {
    margin: 0;

    font-family: "PP Neue Montreal";
  font-size: 20px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 240, 235, 0.6);
}

/* Lead paragraph — styled like .about-headline */
.who-we-are-body--lead {
    


    font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(2.8rem, 3.2vw, 4.2rem);
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 1.75rem;
  letter-spacing: -0.01em;
}

.who-we-are-tagline {
    font-family: "PP Neue Montreal";
    font-size: 20px;
    font-weight: 500;
    color: var(--white);
    margin: 0.5rem 0 0;
}

.who-we-are-tagline em {
    color: #fd6e1c;
    font-style: italic;
}

/* Scroll reveal */
.who-we-are-inner {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.who-we-are-inner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Breakpoints */
@media screen and (max-width: 991px) {
    .who-we-are-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .who-we-are-right {
        padding-left: 0;
        margin-left: 0;
        max-width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .who-we-are {
        padding: 5rem 0 4rem;
    }
    
    .who-we-are-headline {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }
    
    .who-we-are-body {
        font-size: 15px;
    }
}


/* ════════════════════════════════════════════
   FOUNDER BIO SECTIONS
   ════════════════════════════════════════════ */

.founder-bio {
    color: var(--white);
    padding: 2rem 0;
}

.founder-bio-inner {
    padding: 0 var(--page-horizontal-padding);
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 12px;
    align-items: stretch;
    position: relative;
    height: 65vh;
    min-height: 500px;
    max-height: 750px;
}

/* Label above image */
.founder-bio-label {
    position: absolute;
    top: -1.5rem;
    left: var(--page-horizontal-padding);
    font-family: "PP Neue Montreal";
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: rgba(245, 240, 235, 0.35);
}

.founder-bio--reverse .founder-bio-label {
    left: auto;
    right: var(--page-horizontal-padding);
}

/* Image wrapper — fills column height exactly */
.founder-bio-img-wrap {
    overflow: hidden;
    background: #111111;
    height: 100%;
    clip-path: polygon(
        32px 0,
        100% 0,
        100% calc(100% - 32px),
        calc(100% - 32px) 100%,
        0 100%,
        0 32px
    );
}

.founder-bio-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    filter: grayscale(10%);
    transition: transform 0.5s cubic-bezier(0.525, 0, 0, 1);
}

.founder-bio-img-wrap:hover .founder-bio-img {
    transform: scale(1.03);
}

/* Card container — fills column height, excerpt fills remaining space */
.founder-bio-card {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
    background: #111111;
    border: 1px solid #ffffff0c;
    padding: 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    height: 100%;
    overflow: hidden;
    transition: background 0.25s ease;
}

.founder-bio-card:hover {
    background: #161616;
}
.founder-bio-headline {
    margin: 0;


     font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(2.8rem, 3.2vw, 4.2rem);
  line-height: 1.2;
  color: var(--white);
  letter-spacing: -0.01em;
}

.founder-bio-headline em {
    color: #fd6e1c;
    font-style: italic;
    font-weight: 400;
}

.founder-bio-role {
    font-family: "PP Neue Montreal";
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 240, 235, 0.4);
    margin-bottom: 0.5rem;
}

.founder-bio-text {
    margin: 0;

    font-family: "PP Neue Montreal";
  font-size: 20px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 240, 235, 0.6);
}

.founder-bio-text:first-of-type {
    margin-top: 0;
}

/* CTA Button */
.founder-bio-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "PP Neue Montreal";
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #111111;
    background: var(--white);
    border: 1px solid var(--white);
    border-radius: 3px;
    padding: 0.65em 1.1em;
    text-decoration: none;
    margin-top: auto;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.founder-bio-btn svg {
    width: 11px;
    height: 11px;
    transition: transform 0.25s ease;
}

.founder-bio-btn:hover {
    background: #fd6e1c;
    border-color: #fd6e1c;
    color: #fff;
}

.founder-bio-btn:hover svg {
    transform: translate(2px, -2px);
}

/* Reversed layout (card left, image right) — 60/40 */
.founder-bio--reverse .founder-bio-inner {
    grid-template-columns: 3fr 2fr;
}

.founder-bio--reverse .founder-bio-card {
    order: 1;
}

.founder-bio--reverse .founder-bio-img-wrap {
    order: 2;
}

/* Scroll reveal */
.founder-bio-inner {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.founder-bio-inner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Breakpoints */
@media screen and (max-width: 991px) {
    .founder-bio-inner,
    .founder-bio--reverse .founder-bio-inner {
        grid-template-columns: 1fr 1fr;
    }
    
    .founder-bio-img-wrap {
        max-height: 400px;
    }
    
    .founder-bio-card {
        padding: 2rem;
    }
}

@media screen and (max-width: 767px) {
    .founder-bio {
        padding: 2rem 0;
    }
    
    .founder-bio-inner,
    .founder-bio--reverse .founder-bio-inner {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .founder-bio-label {
        position: static;
        margin-bottom: 0.75rem;
    }
    
    .founder-bio--reverse .founder-bio-card {
        order: 2;
    }
    
    .founder-bio--reverse .founder-bio-img-wrap {
        order: 1;
    }
    
    .founder-bio-img-wrap {
        aspect-ratio: 16 / 10;
        max-height: 280px;
    }
    
    .founder-bio-headline {
        font-size: clamp(1.6rem, 6vw, 2rem);
    }
    
    .founder-bio-card {
        padding: 1.5rem;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    }
    
    .founder-bio-text {
        font-size: 13px;
    }
}


/* ════════════════════════════════════════════
   OUR PROCESS — STATEMENT
   ════════════════════════════════════════════ */

.about-process-statement {
    color: var(--white);
    padding: 6rem 0 3rem;
}

.about-process-statement-inner {
    padding: 0 var(--page-horizontal-padding);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Left column — tag + headline */
.about-process-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.about-process-tag-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.about-tag-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #fd6e1c;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.about-process-headline {
    margin: 0;
    max-width: 70vw;


    font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(2.8rem, 3.2vw, 4.2rem);
  line-height: 1.2;
  color: var(--white);
  letter-spacing: -0.01em;
}

.about-process-headline em {
    color: #fd6e1c;
    font-style: italic;
    font-weight: 400;
}

/* Right column — blurb + CTA, aligned to top */
.about-process-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.25rem;
    text-align: right;
    padding-top: 0;
}

.about-process-blurb {
    margin: 0;
    max-width: 600px;

     font-family: "PP Neue Montreal";
  font-size: 20px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 240, 235, 0.6);
}

.about-process-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: "PP Neue Montreal";
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #111111;
    background: #fd6e1c;
    border: 1px solid #fd6e1c;
    border-radius: 3px;
    padding: 0.75em 1.25em;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.about-process-cta svg {
    width: 11px;
    height: 11px;
    transition: transform 0.25s ease;
}

.about-process-cta:hover {
    background: #fff;
    border-color: #fff;
    color: #111111;
}

.about-process-cta:hover svg {
    transform: translate(2px, -2px);
}

/* Scroll reveal */
.about-process-statement-inner {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.about-process-statement-inner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Breakpoints */
@media screen and (max-width: 991px) {
    .about-process-statement-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        align-items: start;
    }
    
    .about-process-right {
        align-items: flex-start;
        text-align: left;
    }
}

@media screen and (max-width: 767px) {
    .about-process-statement {
        padding: 4rem 0 2rem;
    }
    
    .about-process-headline {
        font-size: clamp(1.5rem, 6vw, 2.2rem);
    }
    
    .about-process-blurb {
        font-size: 13px;
        max-width: 100%;
    }
}


/* ════════════════════════════════════════════
   OUR PROCESS — IMAGE + STEP CARDS
   ════════════════════════════════════════════ */

.about-process-visual {
    color: var(--white);
    padding: 0 0 6rem;
}

.about-process-visual-inner {
    padding: 0 var(--page-horizontal-padding);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Full-width image */
.about-process-img-wrap {
    width: 100%;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    background: #111111;
    clip-path: polygon(
        32px 0,
        100% 0,
        100% calc(100% - 32px),
        calc(100% - 32px) 100%,
        0 100%,
        0 32px
    );
}

.about-process-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(10%);
}

/* Process Step Cards Grid — styled like about-stat-card */
.about-process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 24px;
}

/* Step Card — matches about-stat-card styling */
.about-process-step-card {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
    background: #111111;
    padding: 2.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: background 0.25s ease;
    cursor: default;
    border: 1px solid #ffffff0c;
}

.about-process-step-card:hover {
    background: #fd6e1c;
}

/* 4th card — accent (orange) with double snipped corners */
.about-process-step-card--accent {
    clip-path: polygon(
        32px 0,
        100% 0,
        100% calc(100% - 32px),
        calc(100% - 32px) 100%,
        0 100%,
        0 32px
    );
    background: #fd6e1c;
}

.about-process-step-card--accent:hover {
    background: #111111;
}

.about-process-step-card__num {
    font-family: "PP Neue Montreal";
    font-weight: 500;
    font-size: clamp(3rem, 6.5vw, 5rem);
    line-height: 1;
    color: var(--white);
    letter-spacing: -0.02em;
}

.about-process-step-card__label {
    border-top: 1px solid #ffffff55;
    padding-top: 1vw;
    font-family: "PP Neue Montreal";
    font-weight: 600;
    font-size: 20px;
    color: var(--white);
    letter-spacing: 0.01em;
    margin-top: 5vw;
}

.about-process-step-card__desc {
    font-family: "PP Neue Montreal";
    font-weight: 300;
    font-size: 13px;
    color: rgba(245, 240, 235, 0.5);
    line-height: 1.45;
}

.about-process-step-card--accent .about-process-step-card__desc {
    color: #fff;
}

/* Scroll reveal */
.about-process-visual-inner {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.about-process-visual-inner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Breakpoints */
@media screen and (max-width: 991px) {
    .about-process-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .about-process-visual {
        padding-bottom: 4rem;
    }
    
    .about-process-img-wrap {
        aspect-ratio: 16 / 10;
    }
    
    .about-process-steps {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .about-process-step-card {
        padding: 1.75rem 1.25rem 1.5rem;
    }
    
    .about-process-step-card__num {
        font-size: clamp(2.5rem, 10vw, 3.5rem);
    }
    
    .about-process-step-card__label {
        font-size: 16px;
        margin-top: 10vw;
    }
}






.oil-ticker {
    --ticker-bg: rgba(10, 15, 20, 0.55);
    --ticker-text: rgba(255, 255, 255, 0.7);
    --ticker-value: #ffffff;
    --ticker-up: #4ade80;
    --ticker-down: #f87171;
    --ticker-neutral: rgba(255, 255, 255, 0.5);
    --ticker-accent: #c9a227; /* Calidad gold */
    --ticker-border: rgba(255, 255, 255, 0.08);
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
   
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
    overflow: hidden;
    z-index: 9999;
  }
 
  .oil-ticker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to right, rgba(10, 15, 20, 0.4), transparent);
    z-index: 10;
    pointer-events: none;
  }
 
  .oil-ticker::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to left, rgba(10, 15, 20, 0.4), transparent);
    z-index: 10;
    pointer-events: none;
  }
 
  .ticker-track {
    display: flex;
    animation: ticker-scroll 35s linear infinite;
    width: max-content;
  }
 
  .ticker-track:hover {
    animation-play-state: paused;
  }
 
  @keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
 
  .ticker-content {
    display: flex;
    align-items: center;
    padding: 10px 0;
  }
 
  .ticker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 28px;
    white-space: nowrap;
    border-right: 1px solid rgba(148, 163, 184, 0.1);
  }
 
  .ticker-item:last-child {
    border-right: none;
  }
 
  .ticker-label {
    color: var(--ticker-text);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
 
  .ticker-value {
    color: var(--ticker-value);
    font-weight: 600;
    font-size: 13px;
  }
 
  .ticker-change {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
  }
 
  .ticker-change.up {
    color: var(--ticker-up);
  }
 
  .ticker-change.down {
    color: var(--ticker-down);
  }
 
  .ticker-change.neutral {
    color: var(--ticker-neutral);
  }
 
  .ticker-change svg {
    width: 10px;
    height: 10px;
  }
 
  .ticker-unit {
    color: var(--ticker-text);
    font-size: 10px;
    opacity: 0.7;
  }
 
  .ticker-live {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 24px;
    color: var(--ticker-accent);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
 
  .ticker-live-dot {
    width: 6px;
    height: 6px;
    background: var(--ticker-accent);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
  }
 
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
  }
 
  /* Loading state */
  .ticker-loading {
    color: var(--ticker-text);
    padding: 10px 20px;
    text-align: center;
    font-size: 11px;
    opacity: 0.6;
  }
 
  @media screen and (max-width: 479px) {
    .oil-ticker {
      font-size: 11px;
    }
    .ticker-item {
      padding: 0 16px;
    }
    .ticker-track {
      animation-duration: 25s;
    }
  }


/* ════════════════════════════════════════════
   FOUNDER BIO — EXCERPT + MODAL
   ════════════════════════════════════════════ */

/* Excerpt fills remaining card height after name/role — no fade, text runs to button */
.founder-bio-excerpt {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin-top: 1rem;
}

.founder-bio-excerpt .founder-bio-text {
  margin-bottom: 0.75rem;
}

.founder-bio-excerpt .founder-bio-text:last-child {
  margin-bottom: 0;
}

.founder-bio-excerpt__fade {
  display: none;
}

.founder-bio-readmore {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 1.5rem;
  font-family: "PP Neue Montreal";
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fd6e1c;
  background: none;
  border: 1px solid rgba(253, 110, 28, 0.3);
  border-radius: 3px;
  padding: 0.6em 1.1em;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.founder-bio-readmore:hover {
  border-color: #fd6e1c;
  background: rgba(253, 110, 28, 0.06);
}


/* ── Modal overlay — viewport locked and centered ── */
.bio-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(7, 7, 7, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  transform: none !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bio-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Modal panel — centered via fixed position on the modal itself */
.bio-modal {
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 32px),
    calc(100% - 32px) 100%,
    0 100%
  );
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(16px);
  width: min(900px, calc(100vw - 4rem));
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.bio-modal.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

.bio-modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: rgba(245, 240, 235, 0.4);
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s ease;
  z-index: 1;
}

.bio-modal__close:hover {
  color: var(--white);
}

.bio-modal__inner {
  padding: 2.5rem;
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0 2.5rem;
}

.bio-modal__header {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bio-modal__name {
  font-family: "PP Neue Montreal";
  font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}

.bio-modal__name em {
  color: #fd6e1c;
  font-style: italic;
}

.bio-modal__role {
  font-family: "PP Neue Montreal";
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(245, 240, 235, 0.4);
  text-transform: uppercase;
}

.bio-modal__body {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  padding-left: 2.5rem;
}

.bio-modal__body p {
  font-family: "PP Neue Montreal";
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(245, 240, 235, 0.7);
  margin: 0;
}

.bio-modal__footer {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding-top: 1.5rem;
}

.bio-modal__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "PP Neue Montreal";
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #111111;
  background: #fd6e1c;
  border: 1px solid #fd6e1c;
  border-radius: 3px;
  padding: 0.7em 1.4em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.bio-modal__cta:hover {
  background: #fff;
  border-color: #fff;
}

.bio-modal__vcard {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "PP Neue Montreal";
  font-size: 13px;
  font-weight: 400;
  color: rgba(245, 240, 235, 0.5);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  padding: 0.7em 1.2em;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.bio-modal__vcard:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}

.bio-modal__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: rgba(245, 240, 235, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.bio-modal__social:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}

@media screen and (max-width: 767px) {
  .bio-modal {
    width: calc(100vw - 2rem);
    top: 50%;
    left: 50%;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }

  .bio-modal__inner {
    padding: 1.75rem 1.5rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 1.25rem 0;
  }

  .bio-modal__header {
    grid-column: 1;
    grid-row: 1;
  }

  .bio-modal__body {
    grid-column: 1;
    grid-row: 2;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 1.25rem;
  }

  .bio-modal__footer {
    grid-column: 1;
    grid-row: 3;
    flex-direction: row;
    flex-wrap: wrap;
  }
}