/**
 * www-about.css — Fluid responsive styles for the About Us page.
 *
 * Desktop (≥1440px) renders exactly as authored in about.html — none of the
 * fixed classes (container width, stats margins, card heights) are overridden.
 *
 * Two responsive layers apply below that:
 *   1. Fluid base — typography and images scale smoothly with the viewport
 *      using clamp() + vw units, so they adapt on EVERY screen size (not
 *      just at fixed breakpoints).
 *   2. Breakpoint overrides — structural layout changes only (stacking,
 *      grid columns, margins, spacing) for laptop / tablet / mobile.
 *
 * Fonts:  48px -> clamp(26px, 4vw, 48px)  etc., so headings shrink fluidly.
 * Images: widths use clamp() + max-width:100% + height:auto so they keep
 *         their proportions and never overflow the viewport.
 */

/* ==========================================================================
   FLUID BASE (applies at all viewport widths)
   ========================================================================== */

/* ---- Container padding ----
   Desktop ≥1440px: none — the container keeps its fixed 1440px content
   width exactly as authored in about.html.
   Below 1440px: side padding is added by the "Small desktop <1440px"
   media block so content stays clear of the screen edges. */

/* ---- Hero banner (background image) ----
   Max height 573px as fixed in about.html — screens wider than the 1440px
   design width keep 573px. Below 1440px the height follows the viewport
   (40vw) so the image scales with the device. No object-fit crop: the whole
   image stays visible with its fixed top-left anchor at every size. */
.h-\[573px\] {
  height: min(573px, 40vw);
}

/* ---- Hero content column ---- */
.h-\[486px\] {
  height: auto;
  min-height: clamp(320px, 34vw, 486px);
}

/* Hero title: 48px → 26px fluid */
h1.text-\[48px\] {
  font-size: clamp(26px, 4vw, 48px);
}

/* Hero paragraph */
.text-\[14px\].font-normal.text-\[\#2B2B2B\]\/60 {
  font-size: clamp(13px, 1.1vw, 14px);
}

/* Hero illustration: 674px → 280px fluid, keeps aspect ratio */
.w-\[674px\] {
  width: clamp(280px, 47vw, 674px);
  max-width: 100%;
  height: auto;
}

/* ---- Stats bar ---- */
.bg-\[\#FFAD01\].h-\[173px\] {
  height: clamp(120px, 13vw, 173px);
}
img.w-\[173px\] {
  width: min(173px, 13vw);
  height: auto;
}
span.text-\[42px\] {
  font-size: clamp(26px, 3vw, 42px);
}
span.text-\[14px\].text-white\/90 {
  font-size: clamp(12px, 1vw, 14px);
}

/* Stats bar layout — the 190px inner margins stay exactly as authored in
   about.html on desktop ≥1440px. They are only relaxed below 1440px, see
   the "Small desktop <1440px" media block. */

/* ---- Team section ---- */
.h-\[345px\] {
  height: auto;
  min-height: clamp(260px, 26vw, 345px);
}
.w-\[684px\] {
  width: clamp(300px, 48vw, 684px);
  max-width: 100%;
}
.h-\[345px\] .flex.items-center img {
  width: clamp(260px, 44vw, 605px);
  max-width: 100%;
  height: auto;
}
.h-\[438px\] {
  height: auto;
  min-height: clamp(280px, 32vw, 438px);
}
/* Team row 2 card headers (tech / business) — the background artwork is
   1406×446. The headers used to be flex-1, sharing the 438px card height
   with the text column (about 219px each). On 1440px laptops the card is
   only ~612px wide, and a 612×219 box is "taller" than the image ratio
   (3.15:1), so bg-cover cropped the artwork left/right — and whenever the
   description text wrapped onto more lines the flex-1 header was squeezed
   even shorter, cropping it top/bottom too. Lock the header to the image
   aspect ratio and take it out of flex sizing (flex: none): the header
   height always follows the card width, the artwork is always fully
   visible, and if the text column needs more room the card grows instead
   of compressing the header. */
.team-card-hero {
  flex: none;
  aspect-ratio: 1406 / 446;
}
h2.text-\[32px\] {
  font-size: clamp(22px, 2.4vw, 32px);
}
h3.text-\[28px\] {
  font-size: clamp(20px, 2vw, 28px);
}
h3.text-\[24px\] {
  font-size: clamp(17px, 1.7vw, 24px);
}
.text-\[16px\].font-normal.text-\[\#2B2B2B\]\/60 {
  font-size: clamp(14px, 1.2vw, 16px);
}
/* Team tech/business card descriptions — fixed 12px. The 12px minimum
   font-size floor must hold at every viewport (phone/tablet/laptop/desktop),
   so no fluid scaling below the authored 12px. */
.text-\[12px\].font-normal.text-\[\#2B2B2B\]\/60 {
  font-size: 12px;
}
.text-\[18px\].font-medium {
  font-size: clamp(14px, 1.4vw, 18px);
}

/* Team CTA buttons — on desktop ≥1440px the cards keep their fixed heights
   as authored in about.html. The extra top margin only applies below
   1440px, see the "Small desktop <1440px" media block. */

/* Value card icons: 68px → 52px fluid (incl. inner images) */
.relative.w-\[68px\].h-\[68px\],
.relative.w-\[68px\].h-\[68px\] img {
  width: clamp(52px, 5vw, 68px);
  height: clamp(52px, 5vw, 68px);
}

/* ---- Contact section ---- */
.gap-\[110px\] a img,
.gap-\[110px\] button img {
  width: clamp(52px, 6vw, 86px);
  height: clamp(52px, 6vw, 86px);
}
.w-\[517px\] {
  width: min(517px, 92%);
  max-width: 100%;
}
.w-\[517px\] span {
  font-size: clamp(12px, 1vw, 14px);
}

/* ==========================================================================
   Small desktop: < 1440px
   ========================================================================== */
@media (max-width: 1439px) {
  /* Container padding — screens narrower than the fixed 1440px content
     width get side padding so content stays clear of the edges.
     :not(.grid) exempts the stats bar grid, which also carries
     max-w-[1440px] but already sits inside the px-4 sm:px-6 lg:px-12
     xl:px-24 gutters of the stats bar — without the exemption it would be
     double-padded on every breakpoint. */
  .max-w-\[1440px\]:not(.grid):not(.final-cta) {
    padding-left: 96px;
    padding-right: 96px;
  }

  /* Stats bar layout — the two side items use sm:flex-1 but the middle one
     does not, and all three carry hard-coded 190px inner margins sized for
     desktop ≥1440px only. Give every item the same flex and drop the fixed
     margins below 1440px so the three stats share the bar as three equal
     columns and the middle one never gets squeezed on laptop/tablet. */
  .bg-\[\#FFAD01\] .divide-white\/40 > div:nth-child(2) {
    flex: 1 1 0%;
  }
  .mr-\[190px\],
  .mx-\[190px\],
  .ml-\[190px\] {
    margin-left: 0;
    margin-right: 0;
  }

  /* Team CTA buttons — keep breathing room above the button when the cards
     shrink below desktop: without a fixed card height the justify-between
     gap collapses to 0 and the button hugs the text above. */
  .h-\[345px\] a.self-start,
  .h-\[438px\] button.self-start {
    margin-top: 20px;
  }

  /* Hero banner image — the authored 1136×486 box is desktop-only. Below
     1440px cap it to the hero container (max-width + max-height) so the
     whole image stays visible with its original aspect ratio: never cropped,
     never stretched, still anchored to the right (same "show the whole
     image" approach as the final_cta background, which uses contain +
     background-position: right). min-height:0 undoes the fluid
     .h-[486px] min-height so the image can actually shrink on small
     screens instead of being forced to 320px+ tall. */
  img[src*="icon-1a1"] {
    width: auto;
    height: auto;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
  }
}

/* ==========================================================================
   Stats bar outer margins: 1024px – 1535px
   ========================================================================== */
/* The stats container is authored with lg:mx-[250px], which stays a fixed
   250px on every laptop screen and squeezes the three stats into a tiny
   strip — at 1440px (card ~612px wide after the 96px page gutters) the
   stats were left with only ~556px of content. Shrink the margin fluidly
   with the viewport instead: 48px at 1024px → 250px at 1536px (linearly),
   so ≥1536px keeps the authored 250px and <1024px is untouched (the lg:
   variant is off). At 1440px this lands on ~212px. */
@media (min-width: 1024px) and (max-width: 1535px) {
  .lg\:mx-\[250px\] {
    margin-left: clamp(48px, calc((100vw - 1024px) * 0.3945 + 48px), 250px);
    margin-right: clamp(48px, calc((100vw - 1024px) * 0.3945 + 48px), 250px);
  }
}

/* ==========================================================================
  Laptop: 1024px – 1279px
  ========================================================================== */
@media (max-width: 1279px) {
  /* Hero — the breadcrumb sits absolutely at the very top and the tall text
     column is vertically centered, so on laptop/tablet its top edge slides
     up under the breadcrumb. Push the whole hero section down with a fluid
     padding that fades out at ~1275px (where the taller centering box
     provides enough room again), avoiding a jump at the breakpoint. */
  .bg-gradient-to-b.from-\[\#FFEBC0\].to-\[\#FFFFFF\] {
    padding-top: clamp(0px, 153px - 12vw, 64px);
  }

  /* Container padding — laptop */
  .max-w-\[1440px\]:not(.grid):not(.final-cta) {
    padding-left: 48px;
    padding-right: 48px;
  }

  /* Team row 1 — shrink both columns so they stay side-by-side without overflow
     (font sizes and heights scale fluidly via the base clamp() rules) */
  .w-\[684px\] {
    width: clamp(280px, 44vw, 684px);
  }
  .h-\[345px\] .flex.items-center img {
    width: clamp(240px, 40vw, 605px);
  }

  /* Contact — tighten icon gap */
  .gap-\[110px\] {
    gap: 60px;
  }
}

/* ==========================================================================
   Tablet: 640px – 1023px
   ========================================================================== */
@media (max-width: 1023px) {
  /* Container padding — tablet */
  .max-w-\[1440px\]:not(.grid):not(.final-cta) {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ===== HERO ===== */
  /* Font sizes, hero height and illustration size scale fluidly in the
     base clamp() layer; only spacing/layout tweaks belong here. */

  /* Stats bar — keep a little breathing room */
  .bg-\[\#FFAD01\].h-\[173px\] {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Corner decorations — scale down */
  img.w-\[173px\] {
    width: min(80px, 10vw);
  }

  /* ===== TEAM ===== */
  .h-\[345px\] {
    padding: 20px !important;
  }
  /* Team row 1 — tighter column widths so the row never overflows */
  .w-\[684px\] {
    width: clamp(260px, 44vw, 684px);
  }
  .h-\[345px\] .flex.items-center img {
    width: clamp(220px, 36vw, 605px);
  }
  h3.w-\[155px\] {
    width: auto;
  }

  .mb-\[60px\] {
    margin-bottom: 40px;
  }

  /* ===== CONTACT ===== */
  .gap-\[110px\] {
    gap: 36px;
  }
}

/* ==========================================================================
   Mobile: < 640px
   ========================================================================== */
@media (max-width: 639px) {
  /* Container padding — mobile */
  .max-w-\[1440px\]:not(.grid):not(.final-cta) {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ===== HERO ===== */
  .h-\[486px\] {
    padding-top: 50px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .h-\[573px\] {
    height: clamp(160px, 52vw, 220px);
    object-fit: cover;
    object-position: center;
  }

  /* Stack hero text + image vertically */
  .h-\[486px\] .flex.flex-row {
    flex-direction: column !important;
    gap: 16px;
    text-align: center;
  }

  h1.text-\[48px\] {
    text-align: center;
  }

  .w-\[674px\] {
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Stats bar */
  .bg-\[\#FFAD01\].h-\[173px\] {
    height: auto;
    min-height: 120px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* Hide corner illustrations on mobile (too large) */
  img.absolute.w-\[173px\] {
    display: none;
  }

  /* ===== SECTION SPACING ===== */
  section.my-\[60px\] {
    margin-top: 36px;
    margin-bottom: 36px;
  }

  .mb-\[60px\] {
    margin-bottom: 30px;
  }

  section.mb-\[60px\] {
    margin-bottom: 36px;
  }

  /* ===== TEAM ===== */
  /* Section description */
  .text-\[16px\].font-normal.text-\[\#2B2B2B\]\/60 {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Team row 1 */
  .h-\[345px\] {
    padding: 20px !important;
  }

  .h-\[345px\].flex.flex-row {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
  }

  .w-\[684px\] {
    width: 100%;
  }

  /* Team row 1 CTA button — center on mobile (top spacing comes from the
     base CTA button rule) */
  .h-\[345px\] a.self-start {
    align-self: center;
  }

  /* Team row 1 illustration — vertical spacing on mobile */
  .h-\[345px\] .flex.items-center img {
    margin-top: 16px;
    margin-bottom: 8px;
  }

  /* Team row 2 — force single column (overrides lg:grid-cols-2) */
  .grid.grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr;
  }

  /* Values en title width override */
  h3.w-\[155px\] {
    width: auto;
  }

  /* CTA arrow — pull closer to label on narrow screens */
  svg.ml-\[60px\] {
    margin-left: 16px;
  }

  /* Section titles — allow wrapping on narrow screens */
  .text-center .inline-flex.flex-row {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
  }

  /* ===== CONTACT ===== */
  .gap-\[110px\] {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Contact bar — full width, stacked */
  .w-\[517px\] {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: 20px;
    gap: 6px;
    overflow: hidden;
  }

  /* Contact bar links/buttons */
  .w-\[517px\] a.flex-1 {
    min-width: 0;
    padding: 6px 12px;
    justify-content: center;
  }

  /* Contact bar vertical divider → horizontal on mobile */
  .w-\[517px\] div.w-px {
    width: 60%;
    height: 1px;
    margin: 2px auto;
  }

  /* ===== MISC ===== */
  /* Keep the mb-[34px] spacing reasonable */
  .mb-\[34px\] {
    margin-bottom: 20px;
  }

  /* Ensure inline-flex SVGs in section titles don't overflow */
  .text-center svg {
    max-width: 50px;
  }

  /* Ensure the hero gradient section doesn't clip, and keep the hero at its
     original position on mobile — the fluid laptop/tablet breadcrumb
     padding above does not apply below 640px */
  .bg-gradient-to-b.from-\[\#FFEBC0\].to-\[\#FFFFFF\] {
    overflow: visible;
    padding-top: 0;
  }
}

/* ==========================================================================
   Extra-small phones (< 400px)
   ========================================================================== */
@media (max-width: 399px) {
  .w-\[674px\] {
    max-width: 86%;
  }

  .gap-\[110px\] {
    gap: 14px;
  }

  .w-\[517px\] {
    width: 96%;
  }

  /* Team row 1 — keep illustration within very narrow screens */
  .h-\[345px\] .flex.items-center img {
    width: 240px;
  }
}