/* ============================================================================
   UNITEX CARGO SERVICES — main stylesheet
   ----------------------------------------------------------------------------
   HOW THIS FILE IS ORGANISED (search these headers to jump around):
     1.  DESIGN TOKENS .......... colours, fonts, spacing — edit these to retheme
     2.  BASE / RESET ........... sensible defaults for all elements
     3.  LAYOUT HELPERS ......... .container, .section, section spacing
     4.  ELEMENTS: EYEBROW ...... the "WHAT WE OFFER" mini-labels (dot motif)
     5.  ELEMENTS: BUTTONS ...... .btn and its variants
     6.  SITE HEADER / NAV ...... sticky top bar + mobile menu
     7.  HERO SLIDER ............ 3 crossfading slides with animated text
     8.  SERVICES ............... the 4 service cards
     9.  WHY UNITEX ............. value-proposition strip
     10. CONTACT ................ warehouse cards + contact form
     11. FOOTER
     12. MOTION / ACCESSIBILITY . reduced-motion + focus styles
     13. RESPONSIVE ............. tablet & mobile breakpoints

   TO CHANGE THE COLOUR SCHEME: edit only section 1 (DESIGN TOKENS).
   Every colour, gap and radius below is pulled from a variable there.
   ========================================================================== */


/* ============================================================================
   0. FONTS — self-hosted Assistant + Heebo (the SAME fonts the original site
      used). NO external requests: the .woff2 files live in /fonts on this server.
   ========================================================================== */
@font-face { font-family:"Assistant"; font-style:normal; font-weight:300; font-display:swap; src:url("../fonts/assistant-300.woff2") format("woff2"); }
@font-face { font-family:"Assistant"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/assistant-400.woff2") format("woff2"); }
@font-face { font-family:"Assistant"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/assistant-500.woff2") format("woff2"); }
@font-face { font-family:"Assistant"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/assistant-600.woff2") format("woff2"); }
@font-face { font-family:"Assistant"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/assistant-700.woff2") format("woff2"); }
@font-face { font-family:"Assistant"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/assistant-800.woff2") format("woff2"); }
@font-face { font-family:"Heebo"; font-style:normal; font-weight:300; font-display:swap; src:url("../fonts/heebo-300.woff2") format("woff2"); }
@font-face { font-family:"Heebo"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/heebo-400.woff2") format("woff2"); }
@font-face { font-family:"Heebo"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/heebo-500.woff2") format("woff2"); }
@font-face { font-family:"Heebo"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/heebo-700.woff2") format("woff2"); }


/* ============================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- Brand colours (sampled from the UNITEX logo) ---- */
  --brand-blue:        #1c5aa8;   /* the blue of the UNITEX wordmark */
  --brand-blue-dark:   #15457f;   /* darker blue for hovers / gradients */
  --brand-green:       #6fb52d;   /* the green halftone dots in the logo */
  --brand-green-dark:  #5a9a23;   /* darker green for hovers */

  /* ---- Neutrals / surfaces (the "light" theme) ---- */
  --ink:        #1a2330;   /* primary text — near-black with a blue tint */
  --slate:      #5b6878;   /* secondary / body text */
  --muted:      #8a96a5;   /* captions, fine print */
  --line:       #e4e8ee;   /* hairline borders & dividers */
  --surface:    #ffffff;   /* default background */
  --surface-alt:#f4f7fa;   /* alternating light-grey section background */

  /* ---- Typography ---- */
  /* The original site used Assistant for body + headings, with Heebo secondary.
     Both are self-hosted in /fonts — no external requests. */
  --font-display: "Assistant", system-ui, sans-serif;
  --font-body:    "Assistant", system-ui, sans-serif;
  --font-alt:     "Heebo", system-ui, sans-serif;

  --fs-hero:    clamp(2rem, 5vw, 3.6rem);    /* hero headline (close to the original ~52px) */
  --fs-h2:      clamp(1.8rem, 3.4vw, 2.6rem);/* section titles */
  --fs-h3:      1.3rem;                      /* card titles */
  --fs-body:    1.0625rem;                   /* 17px base body */
  --fs-small:   0.875rem;

  /* ---- Spacing scale (keeps rhythm consistent) ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;     /* vertical padding between major sections */

  /* ---- Shape & depth ---- */
  --radius:      10px;
  --radius-lg:   16px;
  --shadow-sm:   0 2px 8px rgba(20, 40, 70, .06);
  --shadow-md:   0 10px 30px rgba(20, 40, 70, .10);

  /* ---- Layout ---- */
  --container:   1180px;   /* max content width */
  --header-h:    196px;    /* full frozen top (utility bar + main header + nav) — offsets anchor jumps */

  /* ---- Motion ---- */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --t-fast:      .2s;
  --t-med:       .45s;
  --hero-fade:   1.5s;     /* slow, smooth image crossfade between hero slides */
}


/* ============================================================================
   2. BASE / RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--brand-blue); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--brand-blue-dark); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; color: var(--ink); margin: 0 0 var(--space-2); }
p  { margin: 0 0 var(--space-2); }

/* Keep the brand display face from looking too tight at large sizes */
h2 { font-size: var(--fs-h2); letter-spacing: -0.5px; }
h3 { font-size: var(--fs-h3); }


/* ============================================================================
   3. LAYOUT HELPERS
   ========================================================================== */

/* Centred, padded content column reused everywhere. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* A major page section: consistent top/bottom breathing room. */
.section { padding-block: var(--space-6); }
/* Services & Why Unitex start tighter — their titles sit closer to the section top. */
#services, #why { padding-top: var(--space-4); }
/* Why Unitex ends a little tighter (less gap before Our Locations). */
#why { padding-bottom: var(--space-5); }
/* Our Locations starts tighter too — smaller gap above it. */
#warehouses { padding-top: var(--space-4); }
/* The Advantages band sits right under the WHY UNITEX title. */
#why .section-head { margin-bottom: var(--space-3); }

/* Alternating light-grey band to separate sections visually. */
.section--alt { background: var(--surface-alt); }

/* Our Services gets a soft sky-blue background — lightened a touch and nudged
   slightly toward grey so it reads softer than a pure sky blue. */
#services { background: #d2e9f2; }

/* Centred section intro (eyebrow + title + optional lead paragraph). */
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-5); }
.section-head p { color: var(--slate); margin: 0; }
/* Left-aligned head (used by the Services section, like the original). */
.section-head--left { text-align: left; max-width: none; margin-left: 0; margin-right: 0; }

/* Big heavy section heading, reproduced from the original (.section-title:
   Assistant 900, ~42px). Used for "From Departure to Destination!" and "Our Services". */
.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 42px);
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 24px;
}

/* "From Departure to Destination" intro block — centred, with tighter spacing
   above (closer to the slider) and below (closer to the section edge). */
.intro { padding-top: var(--space-4); padding-bottom: var(--space-3); }
.intro__col { max-width: 760px; margin: 0 auto; text-align: center; }
.intro .section-title { font-size: clamp(1.9rem, 3.6vw, 38px); }   /* slightly smaller */
.intro .text-size-medium {     /* the lead — a touch larger */
  font-size: 20px; line-height: 32px;
  color: #3b424c;
  margin: 0 0 18px;
}
.intro p:not(.text-size-medium) {
  color: var(--slate);
  font-size: 1.0625rem; line-height: 1.6;   /* a touch larger */
  margin: 0 0 14px;
}
.intro p:last-child { margin-bottom: 0; }


/* ============================================================================
   4. ELEMENTS: EYEBROW  (the small label above each section title)
   ----------------------------------------------------------------------------
   SIGNATURE MOTIF: the three dots echo the green halftone dots in the logo,
   tying every section back to the brand mark.
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-green-dark);
  margin-bottom: var(--space-2);
}
/* the dots */
.eyebrow::before {
  content: "";
  width: 26px; height: 8px;
  background-image: radial-gradient(circle, var(--brand-green) 50%, transparent 52%);
  background-size: 8px 8px;
  background-repeat: repeat-x;
}


/* ============================================================================
   5. ELEMENTS: BUTTONS
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.85em 1.8em;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Primary = solid brand green (the CTA people should click first). */
.btn--primary { background: var(--brand-green); color: #fff; }
.btn--primary:hover { background: var(--brand-green-dark); color: #fff; }

/* Secondary = solid brand blue. */
.btn--blue { background: var(--brand-blue); color: #fff; }
.btn--blue:hover { background: var(--brand-blue-dark); color: #fff; }

/* Ghost = outlined, for use over photographs (hero). */
.btn--ghost { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--brand-blue); }

/* Quote = the header CTA, reproduced from the original .btn exactly:
   blue #038ed3, 14px, 9px/20px padding, 3px radius, turning green on hover. */
.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn--quote {
  background: var(--brand-green); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; line-height: 1.2;
  padding: 0.62em 1.25em; border-radius: 8px; border: 0;
  letter-spacing: 0; white-space: nowrap;
}
.btn--quote:hover { background: var(--brand-green-dark); color: #fff; }
.btn--track {
  background: var(--brand-blue); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; line-height: 1.2;
  padding: 0.62em 1.25em; border-radius: 8px; border: 0;
  letter-spacing: 0; white-space: nowrap;
}
.btn--track:hover { background: var(--brand-blue-dark); color: #fff; }


/* ============================================================================
   6. SITE HEADER  (thin top bar, a main bar with the full-size logo + contact
      info + quote button, then the nav bar — the whole block stays frozen)
   ========================================================================== */

/* The entire top (utility bar + main header + nav) is frozen: it stays pinned
   at the top of the viewport and the page scrolls underneath it. */
.site-top {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Short viewports — landscape phones especially — have very little vertical
   room, so the header is NOT frozen there either (it scrolls away with the
   page). This catches landscape orientation regardless of how wide the device
   reports itself, which a width-only query misses. */
@media (max-height: 600px) {
  .site-top { position: static; }
}

/* --- thin top utility bar --- */
.topbar {
  background: var(--ink);
  border-bottom: 3px solid var(--brand-green);   /* green line under the top bar, like the original */
  color: #c9d4e0;
  font-size: var(--fs-small);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding-block: 8px;
}
.topbar__tag {
  font-family: var(--font-display);
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.topbar__contact a { color: #c9d4e0; }
.topbar__contact a:hover { color: var(--brand-green); }

/* --- main header: full-size logo + info group + CTA --- */
.midheader { background: #e8eef3; }     /* light blue-grey, not white */
.midheader__inner {
  display: flex; align-items: center; gap: var(--space-3);
  padding-block: var(--space-2);
}
/* Logo at its natural 209x80 size, exactly like the original (no shrinking). */
.site-logo img { height: 80px; width: auto; display: block; }

.midheader__info {
  display: flex; align-items: center; gap: var(--space-4);
  margin-left: auto;                 /* push info + CTA to the right */
}
.info-item { display: flex; flex-direction: column; line-height: 1.35; }
/* Label: small grey caption (like the original "Call Us:"). */
.info-item__label {
  font-weight: 400; font-size: .85rem; color: #7c828c;
}
/* Value: bold dark (the original phone / email / hours). */
.info-item__value { color: #2a2c32; font-weight: 700; font-size: .95rem; }
.info-item a.info-item__value:hover { color: var(--brand-blue); }

/* --- nav bar: white text on a darker blue gradient (no longer individually
   sticky; the whole .site-top is frozen) --- */
.navbar {
  position: relative; z-index: 1;
  background: linear-gradient(to right, #042a52 0%, #0c5391 100%);
  border: 0;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
.navbar__inner { display: flex; align-items: center; gap: var(--space-3); min-height: 54px; }

.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav a.nav-link {
  font-family: var(--font-display); font-weight: 600;
  color: #fff; padding: 0.95rem 0; position: relative;
  text-transform: uppercase; letter-spacing: .03em; font-size: .92rem;
}
.nav a.nav-link:hover { color: #fff; }
/* animated underline on hover/active */
.nav a.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 0; height: 3px; background: var(--brand-green);
  transition: width var(--t-fast) var(--ease);
}
.nav a.nav-link:hover::after,
.nav a.nav-link.is-active::after { width: 100%; }

/* --- mobile hamburger (hidden on desktop) --- */
.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; display: block; height: 2px; width: 24px; background: #fff;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggle span::before { transform: translateY(-7px); }
.nav-toggle span::after  { transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }


/* ============================================================================
   7. HERO SLIDER
   ----------------------------------------------------------------------------
   Markup: a .hero wrapper holds three .hero-slide elements stacked on top of
   each other. Only the .is-active slide is visible (opacity 1); JS swaps the
   class to crossfade. The text inside each active slide animates upward.
   ========================================================================== */
.hero {
  position: relative;
  z-index: 0;                              /* contain the caption/dots z-indexes so the mobile nav can sit above the hero */
  width: 100%;
  /* The original slider used gridheight 600, capped — it did NOT keep growing on
     wide screens. Match that: 600px tall on desktop, scaling down only when the
     screen gets narrow. The image fills it with object-fit:cover. */
  height: 600px;                            /* fallback for engines without min() */
  height: min(600px, 51.282vw);             /* = 600 * min(1, width/1170): matches the scaled caption grid exactly */
  overflow: hidden;
  background: var(--surface-alt);   /* light; only visible if an image fails to load */
}

/* A soft shadow makes a section read as slightly elevated: it's painted on the
   top edge of the section directly below. Used under the hero (the hero clips
   overflow for the slider) and under the Why Unitex section. */
.hero + section,
#why + section {
  position: relative;
}
.hero + section::before,
#why + section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;          /* GSAP controls the crossfade opacity */
}
/* First slide visible before/without JS (no blank hero). */
.hero-slide:first-child { opacity: 1; }

/* The photo fills the frame, cropped to its center (the original did the same).
   No dark tint — the original had none either. */
.hero-slide__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* -------------------------------------------------------------------------
   HERO CAPTIONS — reproduced exactly from the original Revolution Slider.
   The original laid every caption out on a fixed 1170 x 600 grid: each line was
   anchored to the RIGHT at a precise top/right offset, then the whole grid was
   scaled to the slider width. We do the same: a 1170x600 stage, centred, scaled
   by --cap-scale (set in JS to min(1, heroWidth/1170)), with every caption at its
   ORIGINAL top/right offset and the ORIGINAL scaption font-size / line-height /
   weight / letter-spacing (in fixed px, since the whole grid is scaled).
   ------------------------------------------------------------------------- */
.hero-caption {
  position: absolute;
  top: 0; left: 50%;
  width: 1170px;
  height: 600px;
  transform: translateX(-50%) scale(var(--cap-scale, 1));
  transform-origin: top center;
  z-index: 5;
  pointer-events: none;        /* clicks pass through except on the button */
}
.hero-caption > * {
  position: absolute;          /* placed by inline top/right, exactly like the original */
  margin: 0;
  text-align: right;
  color: #fff;
  white-space: nowrap;
}
/* heading lines: original .custom-caption-font drop shadow */
.h-xl, .h-l2, .h-md, .h-sm, .h-sm2, .h-sm3 {
  font-family: var(--font-display);
  text-shadow: 2px 2px 10px #1a1c24;
}
.h-xl  { font-weight: 800; text-transform: uppercase; letter-spacing: -1px; font-size: 70px; line-height: 80px; }
.h-l2  { font-weight: 800; text-transform: uppercase; letter-spacing: 1px;  font-size: 64px; line-height: 70px; }
.h-md  { font-weight: 800; text-transform: uppercase; letter-spacing: 2px;  font-size: 59px; line-height: 60px; }
.h-sm  { font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 37px; line-height: 38px; }
.h-sm2 { font-weight: 300; letter-spacing: -.1px; font-size: 36px; line-height: 42px; }
.h-sm3 { font-weight: 500; letter-spacing: -.1px; font-size: 30px; line-height: 42px; }
/* sub-line: original .custom-font-slider blue glow */
.h-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  text-shadow: -2px 0 10px #003375, 0 2px 10px #003375, 2px 0 10px #003375, 0 -2px 10px #003375;
}
.hero-caption .btn { pointer-events: auto; }

/* The text of each caption lives in an inner <span> — that's what GSAP animates,
   exactly as the original Revolution Slider did via its data-frames:
     ENTER (frame 0):  from y:50px, opacity 0  ->  y:0, opacity 1; 2.0s; power3.out;
                       staggered per line (0.75 / 1.2 / 1.5 / 1.7s; button 2.2s).
     EXIT  (frame 999): y:0 -> y:175% behind a mask (the <p> clips); 1.0s; power2.inOut.
   The span starts hidden so nothing flashes before GSAP initialises. */
.hero-caption > * > span { display: inline-block; opacity: 0; will-change: transform, opacity; }
/* The button animates as a whole (box + text together), so it never shows as an
   empty coloured box before its label — its text span stays visible inside it. */
.cap-btn { display: inline-flex; opacity: 0; }
.cap-btn > span { opacity: 1; }

/* --- dot indicators --- */
.hero-dots {
  position: absolute;
  z-index: 20;                 /* always above the slide images */
  left: 0; right: 0; bottom: 22px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.hero-dots button {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.hero-dots button.is-active { background: var(--brand-green); border-color: var(--brand-green); transform: scale(1.15); }


/* ============================================================================
   8. SERVICES  (4 cards)
   ----------------------------------------------------------------------------
   The cards alternate a green / blue top accent bar (green, blue, green, blue),
   echoing the two brand colours.
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

/* Service cards reproduce the original: a green-to-blue gradient frame
   (green left border, blue right border, full gradient along top & bottom),
   white inside; on hover the whole card fills with the gradient and all the
   text turns white. */
.service-card {
  position: relative;
  background-color: #fff;
  border-left: 2px solid #80c645;
  border-right: 2px solid #038ed2;
  border-radius: 3px;
  overflow: hidden;
  padding: 40px 30px;
  /* the gradient top & bottom edges (2px each) */
  background-image:
    linear-gradient(to right, #7fc645 0%, #44ab88 50%, #3fa98e 51%, #048ed2 100%),
    linear-gradient(to right, #7fc645 0%, #44ab88 50%, #3fa98e 51%, #048ed2 100%);
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}
/* the gradient fill that appears on hover */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  border-radius: inherit;
  background-image: linear-gradient(to right, #7fc645 0%, #44ab88 50%, #3fa98e 51%, #048ed2 100%);
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 1;
}
.service-card > * {
  position: relative;
  z-index: 2;
  transition: color .35s ease;
}
.service-card:hover::before { opacity: 1; visibility: visible; }
.service-card:hover h3,
.service-card:hover p { color: #fff; }

.service-card h3 {
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-2);
  color: var(--ink);
}
.service-card p { color: #7b8285; margin: 0; font-size: 0.95rem; line-height: 1.5; }

/* ============================================================================
   OUR ADVANTAGES  (counter band — green-to-blue gradient, like the cards)
   ========================================================================== */
.advantages {
  background-image: linear-gradient(to right, #7fc645 0%, #44ab88 50%, #3fa98e 51%, #048ed2 100%);
  color: #eafff0;
  padding-block: var(--space-5);     /* a bit shorter than the original band */
}
.advantages__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;    /* heading | counters */
  gap: var(--space-4);
  align-items: center;
}
.advantages__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 3.4vw, 38px);
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.advantages__counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.counter__num {
  display: block;
  font-weight: 300;                  /* thin, like the original count-number */
  font-size: 54px;
  line-height: 1;
  color: #fff;
  margin-bottom: 12px;
}
.counter__label {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #eafff0;
}


/* ============================================================================
   9. WHY UNITEX  (value strip)
   ========================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
  margin-top: var(--space-5);   /* breathing room under the Advantages band */
}
.why-item__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .15em;
  color: var(--brand-green-dark);
}
.why-item h3 { font-size: 1.15rem; margin: var(--space-1) 0; }
.why-item p  { color: var(--slate); font-size: 0.95rem; margin: 0; }


/* ============================================================================
   10. CONTACT  (warehouse cards + form)
   ========================================================================== */

/* --- warehouse address cards --- */
.warehouse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.warehouse-card {
  background: #dcedf5;                 /* a touch lighter than the Services section */
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-green);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.warehouse-card:nth-child(2) { border-left-color: var(--brand-blue); }
.warehouse-card h3 {
  font-size: 1.15rem;
  margin-bottom: var(--space-1);
  display: flex; align-items: center; gap: .5em;
}
.warehouse-card h3 svg { width: 20px; height: 20px; color: var(--brand-blue); flex: none; }
.warehouse-card address {
  font-style: normal;
  color: #3a4453;                     /* darker than the default slate for better contrast */
  line-height: 1.5;
}
.warehouse-card .wh-link {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* --- two-column contact layout: intro + form --- */
/* Call-out strip — dark band lifted verbatim from the original site
   (#2a2c32 bg, white 36px Assistant heading, grey sub-line), but centered
   and without the original's button / phone column. */
.call-out {
  background: #2a2c32;
  color: #aab3b6;
  padding: 40px 0;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
}
.call-out h3 {
  font-family: var(--font-display);   /* Assistant */
  font-weight: normal;
  font-size: 36px;
  line-height: 1.25em;
  color: #fff;
  margin: 0 0 10px;
}
.call-out p {
  margin: 0;
  color: #aab3b6;
  font-weight: normal;
}

/* The Contact Us section (just the intro + form) sits on the green-to-blue
   brand gradient; its text goes white, the form stays a white card. */
#contact {
  background-image: linear-gradient(to right, #7fc645 0%, #44ab88 50%, #3fa98e 51%, #048ed2 100%);
}
#contact .contact-intro h2 { color: #fff; }
#contact .contact-intro p { color: rgba(255,255,255,.92); }
#contact .contact-detail,
#contact .contact-detail a { color: #fff; }
#contact .contact-detail svg { color: #fff; }

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-5);
  align-items: start;
}
.contact-intro h2 { margin-bottom: var(--space-2); }
.contact-intro p  { color: var(--slate); }
.contact-detail {
  display: flex; align-items: center; gap: .6em;
  font-family: var(--font-display);
  font-weight: 600;
  margin-top: var(--space-2);
}
.contact-detail svg { width: 20px; height: 20px; color: var(--brand-green-dark); }

/* --- the form --- */
.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.form-field { margin-bottom: var(--space-2); }
.form-field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .35em;
}
.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding: 0.7em 0.85em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(28, 90, 168, .15);
  background: #fff;
}
.form-field textarea { resize: vertical; min-height: 130px; }

/* HONEYPOT: visually + functionally hidden from humans, present for bots.
   Do NOT change to display:none alone — some bots skip those; this is safer. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* captcha — a distinct, clearly-labelled spam-protection box */
.captcha-box {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: #eef4fb;                         /* tinted, unlike the white form */
  border: 1px dashed var(--brand-blue);
  border-radius: var(--radius);
}
.captcha-box__head {
  display: flex; align-items: center; gap: .5em;
  font-family: var(--font-display); font-weight: 700;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--brand-blue);
  margin-bottom: .75em;
}
.captcha-box__head svg { width: 18px; height: 18px; flex: none; }
.captcha-hint { margin: .7em 0 0; font-size: .85rem; color: var(--slate); }

/* ALTCHA proof-of-work widget — themed to sit cleanly inside the box */
.captcha-box altcha-widget {
  display: block;
  --altcha-max-width: 100%;
  --altcha-border-radius: var(--radius);
  --altcha-border-width: 1px;
  --altcha-color-base: #fff;
  --altcha-color-border: var(--line);
  --altcha-color-border-focus: var(--brand-blue);
  --altcha-color-text: var(--ink);
  --altcha-color-error-text: #c0392b;
  --altcha-color-footer-bg: transparent;
}

/* submit + status message */
.contact-form .btn { width: 100%; margin-top: var(--space-2); }
.form-status {
  margin-top: var(--space-2);
  padding: 0.8em 1em;
  border-radius: var(--radius);
  font-size: 0.95rem;
  display: none;            /* shown by JS */
}
.form-status.is-ok    { display: block; background: #e9f7e4; color: #2f7d18; }
.form-status.is-error { display: block; background: #fdeaea; color: #c0392b; }


/* ============================================================================
   11. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--ink);
  color: #c4cedb;
  padding-block: var(--space-5) var(--space-3);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.site-footer h4 {
  font-family: var(--font-display);
  color: #fff;
  font-size: 1rem;
  letter-spacing: .04em;
  margin: 0 0 var(--space-2);
}
.site-footer a { color: #c4cedb; }
.site-footer a:hover { color: var(--brand-green); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .5em; }
.footer-logo img { height: 46px; background: #fff; padding: 6px 10px; border-radius: 8px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--muted);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
}


/* ============================================================================
   12. MOTION / ACCESSIBILITY
   ========================================================================== */

/* Always-visible keyboard focus ring for non-mouse users. */
:focus-visible { outline: 3px solid var(--brand-green); outline-offset: 2px; }

/* Hide visually but keep for screen readers / SEO (used by the page's <h1>). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Respect users who ask the OS to reduce motion: no slide animation, no smooth
   scroll, no text glide. Content still works — it just appears instantly. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* ============================================================================
   13. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ---- Tablet: tighten header info, collapse grids ---- */
@media (max-width: 960px) {
  .services-grid,
  .why-grid       { grid-template-columns: repeat(2, 1fr); }
  .warehouse-grid { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .footer-grid    { grid-template-columns: 1fr 1fr; }
  .midheader__info { display: none; }
  .info-item:last-child { display: none; }   /* hide business hours when space is tight */
  .advantages__grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ---- Mobile: single column + slide-down nav menu ---- */
@media (max-width: 720px) {
  .nav-toggle { display: block; }

  /* On phones the header is NOT frozen — it scrolls away with the page so the
     small screen isn't permanently eaten by the header. (Sticky stays on desktop.) */
  .site-top { position: static; }

  /* Mobile header: drop the thin top utility bar so the logo leads, stack the
     header items, and keep the phone number (Call Us) under the logo. */
  .topbar { display: none; }
  .midheader { border-top: 3px solid var(--brand-green); }   /* keep the brand accent up top */
  .midheader__inner { flex-direction: column; align-items: center; gap: var(--space-2); }
  .midheader__info { display: flex; margin-left: 0; gap: var(--space-3); }
  .midheader__info .info-item:nth-child(n + 2) { display: none; }   /* phone only */
  .info-item { align-items: center; }

  .navbar__inner { position: relative; }

  /* The nav drops as a panel directly beneath the sticky nav bar. When closed
     it is faded out IN PLACE (below the bar) — not slid upward — so it can
     never paint over the logo and header above it. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #042a52;
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow-md);
    padding: var(--space-1) var(--space-3) var(--space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-med) var(--ease),
                transform var(--t-med) var(--ease),
                visibility var(--t-med) var(--ease);
    z-index: 20;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a.nav-link { padding: 0.8em 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .advantages__counters { grid-template-columns: 1fr; gap: var(--space-3); }

  /* Hero height now scales with width automatically (min(600px, 51.282vw)). */

  .services-grid,
  .why-grid,
  .footer-grid    { grid-template-columns: 1fr; }
  .form-row       { grid-template-columns: 1fr; }
  .footer-bottom  { flex-direction: column; }
}