/* ==========================================================================
   COOL AIR TECH — stylesheet
   HTML5 + CSS3 only, no frameworks.

   CONTENTS
   01. Tokens        07. About
   02. Reset/base    08. Solutions
   03. Buttons       09. Impact band
   04. Topbar/header 10. CTA strip
   05. Hero          11. Footer
   06. Feature strip 12. Reveal · back-to-top · responsive
   ========================================================================== */


/* ===== 01. TOKENS ======================================================== */
:root {
  /* Brand */
  --navy:        #14477F;   /* buttons, headings */
  --navy-dark:   #0E3A6B;   /* impact band, footer */
  --navy-darker: #0B2E56;   /* footer bottom bar */
  --navy-ink:    #143C72;   /* heading text */
  --green:       #1CA05C;   /* accent */
  --green-dark:  #16874D;
  --green-light: #2BB56C;

  /* Neutrals */
  --white:    #FFFFFF;
  --bg:       #FFFFFF;
  --bg-soft:  #F2F7FB;      /* solutions section */
  --bg-strip: #F7FAFC;      /* topbar / CTA strip */
  --ink:      #1F2C3D;
  --ink-60:   #5B6B7F;
  --ink-40:   #8A99AB;
  --line:     #E4EBF2;
  --line-2:   #D7E1EA;
  --on-dark:  #C7D6E6;

  /* Type */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Shape + motion */
  --r-sm: 4px;  --r-md: 6px;  --r-lg: 10px;
  --sh-card: 0 2px 14px rgba(20, 60, 114, .07);
  --sh-strip: 0 10px 40px rgba(20, 60, 114, .10);
  --ease: cubic-bezier(.25, .8, .25, 1);
  --t: .25s var(--ease);

  /* Layout */
  --shell: 1440px;      /* content column — wide enough to balance the
                           full-bleed hero photo on large monitors */
  --gutter: clamp(1rem, 3.2vw, 2.6rem);
  --header-h: 94px;     /* taller, so the logo can breathe */
  --logo-h: 60px;       /* single knob for logo size everywhere */
}


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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: .94rem;      /* rem, not px — so it scales with the root bump
                             applied at large-display breakpoints */
  line-height: 1.7;
  color: var(--ink-60);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3 { margin: 0; color: var(--navy-ink); font-weight: 600; line-height: 1.25; }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 3px; }

.skip-link {
  position: absolute; left: 50%; top: 0; z-index: 300;
  transform: translate(-50%, -120%);
  padding: .65rem 1.2rem; background: var(--navy); color: #fff; font-size: .85rem;
  border-radius: 0 0 var(--r-md) var(--r-md); transition: transform var(--t);
}
.skip-link:focus { transform: translate(-50%, 0); }

.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--gutter);
}
.section { padding-block: clamp(3.5rem, 6vw, 5.5rem); }

/* Shared section heading pieces */
.eyebrow {
  margin: 0 0 .7rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green);
}
.eyebrow--light { color: var(--green-light); }
.sec-title { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.sec-head { text-align: center; max-width: 42rem; margin: 0 auto clamp(2rem, 3.5vw, 2.8rem); }


/* ===== 03. BUTTONS ====================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .78rem 1.5rem;
  border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--t), color var(--t),
              border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn svg { transition: transform var(--t); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--navy  { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-dark); box-shadow: 0 8px 20px rgba(20, 71, 127, .28); }

.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-dark); box-shadow: 0 8px 20px rgba(28, 160, 92, .3); }

.btn--white { background: #fff; color: var(--navy-ink); border-color: #fff; }
.btn--white:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.btn--outline { background: #fff; color: var(--navy-ink); border-color: var(--line-2); }
.btn--outline:hover { border-color: var(--navy); color: var(--navy); }


/* ===== 04. TOPBAR + HEADER ============================================== */
.topbar {
  background: var(--bg-strip);
  border-bottom: 1px solid var(--line);
  font-size: .76rem;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 34px;
}
.topbar__welcome { margin: 0; color: var(--ink-60); }
.topbar__right { display: flex; align-items: center; gap: 1.4rem; }
.topbar__item {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--ink-60); transition: color var(--t);
}
.topbar__item:hover { color: var(--navy); }
.topbar__item svg { color: var(--green); flex: none; }
.topbar__social { display: flex; gap: .85rem; }
.topbar__social a { color: var(--navy); opacity: .75; transition: opacity var(--t); }
.topbar__social a:hover { opacity: 1; }

/* --- Header --- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t);
}
.header.is-stuck { box-shadow: 0 4px 18px rgba(20, 60, 114, .09); }

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.1rem; min-height: var(--header-h);
  transition: min-height var(--t);
}
.header.is-stuck .header__inner { min-height: calc(var(--header-h) - 12px); }

/* --- Logo -----------------------------------------------------------
   The lockup is ~4:1 and stacks three tiers of text, so it is sized by
   HEIGHT and given plenty of it — anything under ~50px and the
   "INTEGRATED SOLUTIONS FOR" line stops being legible.
   -------------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo__img {
  width: auto;
  height: var(--logo-h);
  max-width: 100%;
  object-fit: contain;
  transition: height var(--t);
}
/* Shrink slightly once the header is stuck, to claw back vertical space */
.header.is-stuck .logo__img { height: calc(var(--logo-h) - 8px); }

/* Footer: navy logo text needs a light plate to stay readable on navy */
.logo--footer {
  background: #fff;
  padding: .7rem .95rem;
  border-radius: var(--r-md);
}
.logo--footer .logo__img { height: 46px; transition: none; }

/* Nav */
/* Nav sits to the right, grouped with the CTA — a wide logo on the left and
   a floating centre block reads unbalanced, so the two right-hand elements
   are kept together and the whitespace all falls in one place. */
.nav { margin-left: auto; }

.nav__list { display: flex; align-items: center; gap: .15rem; }
.nav__item { position: relative; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center;
  padding: .6rem 1.15rem;
  font-size: .9rem; font-weight: 500; color: var(--ink);
  letter-spacing: .005em;
  white-space: nowrap;
  transition: color var(--t);
}
.nav__link::after {
  content: ''; position: absolute;
  left: 1.15rem; right: 1.15rem; bottom: -1px; height: 2px;
  background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
}
.nav__link:hover { color: var(--navy); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--navy); font-weight: 600; }
.nav__link.is-active::after { transform: scaleX(1); }
.nav__mobile-cta { display: none; }

.header__actions {
  display: flex; align-items: center; gap: .7rem;
  margin-left: clamp(1rem, 2.5vw, 2.2rem);   /* breathing room before the CTA */
}

/* Hamburger */
.burger {
  display: none; width: 42px; height: 42px; padding: 12px 10px;
  flex-direction: column; justify-content: space-between;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.burger span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--navy);
  transition: transform var(--t), opacity var(--t);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(11, 46, 86, .5);
  opacity: 0; transition: opacity var(--t);
}
.nav-backdrop.is-visible { opacity: 1; }


/* ===== 05. HERO ========================================================= */
.hero {
  position: relative;
  /* Grows with the viewport but never taller than most of the fold */
  min-height: min(72vh, clamp(470px, 40vw, 820px));
  display: flex; align-items: center;
  padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(5rem, 9vw, 7rem);
  overflow: hidden;
}
/* --- Slider -----------------------------------------------------------
   Slides are stacked and crossfaded. A slow Ken-Burns zoom runs on the
   active slide only, so the hero never feels static.
   -------------------------------------------------------------------- */
.hero__slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s var(--ease), transform 7s linear;
}
.hero__img.is-active { opacity: 1; transform: scale(1); }

/* Per-photo focal points, so cropping never cuts off the subject.
   Adjust these if you swap an image for one composed differently. */
.hero__img:nth-child(1) { object-position: 58% center; }  /* keep room + technician */
.hero__img:nth-child(2) { object-position: center 55%; }  /* plant room floor level */
.hero__img:nth-child(3) { object-position: center 58%; }  /* keep tanks, drop sky */
/* Readability layer.
   The three photos vary a lot in brightness (bright cleanroom / mid-tone
   metallic plant / outdoor tanks), so the left side is held at near-solid
   white and released late. This guarantees the navy headline reads on any
   of them, while the right half still shows the photograph. */
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg,
      rgba(255, 255, 255, .95) 0%,
      rgba(255, 255, 255, .93) 26%,
      rgba(255, 255, 255, .87) 40%,
      rgba(255, 255, 255, .58) 52%,
      rgba(255, 255, 255, .22) 66%,
      rgba(255, 255, 255, .03) 82%,
      rgba(255, 255, 255, 0)  100%),
    /* faint cool tint unifies three differently-graded photos */
    linear-gradient(180deg, rgba(242, 247, 251, .30), rgba(242, 247, 251, .10));
}
.hero__inner { position: relative; }
.hero__copy { max-width: 40rem; }

.hero__rule {
  display: block; width: 52px; height: 3px;
  background: var(--green); margin-bottom: 1.5rem;
}
.hero__title {
  font-size: clamp(1.85rem, 3.6vw, 2.65rem);
  font-weight: 700; line-height: 1.28; letter-spacing: -.01em;
  color: var(--navy-ink);
  margin-bottom: 1.2rem;
}
.hero__lead {
  font-size: .95rem; color: var(--ink-60);
  margin-bottom: 1.9rem; max-width: 33rem;
}
.hero__btns { display: flex; flex-wrap: wrap; gap: .8rem; }


/* ===== 06. FEATURE STRIP ================================================ */
.strip-wrap { position: relative; margin-top: clamp(-5rem, -7vw, -3.5rem); }
.strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-strip);
  overflow: hidden;
}
.strip__item {
  padding: 1.9rem 1.15rem;
  text-align: center;
  border-right: 1px solid var(--line);
  transition: background-color var(--t);
}
.strip__item:last-child { border-right: 0; }
.strip__item:hover { background: var(--bg-strip); }
/* Fixed-height row so inline SVG icons and image icons line up on the
   same baseline regardless of their individual proportions. */
.strip__icon {
  display: grid; place-items: center;
  height: 36px;
  margin: 0 auto .9rem;
  color: var(--green);
  transition: transform var(--t);
}
/* Image icons are cropped tight to their artwork, whereas the inline SVGs
   carry padding inside their viewBox. Sizing the image slightly smaller
   than the row makes it read as the same weight as its neighbours. */
.strip__icon img { width: auto; height: 30px; object-fit: contain; }
.strip__item:hover .strip__icon { transform: translateY(-3px); }
.strip__title { font-size: .95rem; font-weight: 600; margin-bottom: .35rem; }
.strip__text { font-size: .78rem; color: var(--ink-40); line-height: 1.6; margin: 0; }


/* ===== 07. ABOUT ======================================================== */
.about { padding-top: clamp(3rem, 5vw, 4.5rem); }
.about__grid {
  display: grid; grid-template-columns: 1fr 1.12fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Collage — original arrangement: tall image on the left, a shorter one
   top-right, and a wide one overlapping across the bottom.

   `object-fit: cover` fills every box edge to edge with no empty space.
   Photos whose shape differs from their slot get their edges cropped —
   use object-position below to choose which part survives the crop. */
/* Column widths are derived from the three images' own ratios so that the
   tall left image ends up exactly as tall as the two stacked on the right.
   Recompute these if you swap an image for a differently-shaped one. */
.about__media {
  position: relative;
  display: grid;
  grid-template-columns: 1.03fr 1fr;
  grid-template-rows: auto auto;
  gap: 0;
}
.about__img {
  width: 100%;
  object-fit: cover;                /* fills the box completely */
  object-position: center;          /* per-image overrides below */
  box-shadow: var(--sh-card);
}

/* Outer corners rounded only, so the flush edges stay square */
/* Tall left — portrait image, fills the full height of the right-hand stack */
.about__img--1 {
  grid-column: 1; grid-row: 1 / span 2;
  height: 100%;
  border-radius: var(--r-md) 0 0 var(--r-md);
}
/* Top right — 16:9 */
.about__img--2 {
  grid-column: 2; grid-row: 1;
  aspect-ratio: 16 / 9;
  border-radius: 0 var(--r-md) 0 0;
}
/* Bottom — wide image, overlapping left across the corner */
.about__img--3 {
  grid-column: 2; grid-row: 2;
  aspect-ratio: 2048 / 1041;
  margin-left: -46%;
  width: 146%;
  align-self: end;
  position: relative; z-index: 2;
  border: 6px solid #fff;
  border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgba(20, 60, 114, .13);
}
.about__badge {
  position: absolute; left: -10px; bottom: 34px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 104px; height: 92px;
  background: var(--green); color: #fff;
  border-radius: var(--r-md);
  box-shadow: 0 10px 24px rgba(28, 160, 92, .32);
  text-align: center;
}
.about__badge strong { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.about__badge span   { font-size: .68rem; line-height: 1.35; }

/* Copy */
.about__text { font-size: .9rem; margin: 1.1rem 0 1.7rem; }

.about__features {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem; margin-bottom: 1.9rem;
}
.mini { display: flex; gap: .55rem; align-items: flex-start; }
.mini__icon {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  color: var(--green);
  flex: none;
  margin-top: 1px;
}
.mini__icon img { width: auto; height: 26px; object-fit: contain; }
.mini h3 { font-size: .82rem; font-weight: 600; margin-bottom: .18rem; }
.mini p  { font-size: .72rem; line-height: 1.55; color: var(--ink-40); margin: 0; }


/* ===== 08. SOLUTIONS ==================================================== */
.solutions { background: var(--bg-soft); }

.sol-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }

.sol {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.sol:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(20, 60, 114, .13);
  border-color: transparent;
}
.sol__media { overflow: hidden; aspect-ratio: 10 / 7; }
.sol__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.sol:hover .sol__media img { transform: scale(1.06); }

.sol__body { padding: 1.1rem 1.05rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.sol__title { font-size: .95rem; font-weight: 600; margin-bottom: .45rem; }
.sol__text  { font-size: .78rem; line-height: 1.65; color: var(--ink-40); margin: 0 0 1rem; }
.sol__link {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: auto;
  font-size: .78rem; font-weight: 500; color: var(--navy);
  transition: gap var(--t), color var(--t);
}
.sol__link svg { transition: transform var(--t); }
.sol:hover .sol__link { color: var(--green); }
.sol__link:hover { gap: .6rem; }


/* ===== 09. IMPACT BAND ================================================== */
.impact {
  position: relative;
  padding-block: clamp(2.6rem, 4.5vw, 3.4rem);
  background: var(--navy-dark);
  overflow: hidden;
}
.impact__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .16;                 /* faint texture behind the band */
}
.impact__inner { position: relative; }

.impact__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.impact__title { color: #fff; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }

.impact__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stat { display: flex; align-items: center; gap: .9rem; }
/* Fixed height keeps inline-SVG and image icons on a common baseline */
.stat__icon {
  display: grid; place-items: center;
  height: 40px;
  color: var(--green-light);
  flex: none;
}
.stat__icon img { width: auto; height: 46px; object-fit: contain; }
.stat__value {
  margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 600; line-height: 1.15; color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat__label { margin: 0; font-size: .8rem; color: var(--on-dark); }


/* ===== CLIENTS MARQUEE ================================================== */
.clients {
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
  background: var(--bg-soft);            /* soft tint so white cards read */
  border-block: 1px solid var(--line);
}

.marquee {
  position: relative;
  overflow: hidden;
  /* Vertical padding gives the cards room so hover-scale + shadow don't clip */
  padding-block: 1rem;
  /* Fade the edges so logos slide in/out softly instead of clipping */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.6rem);
  width: max-content;
  /* JS sets --marquee-dur from the track width to keep a constant speed.
     The fallback here runs the animation even before JS clones the row. */
  animation: marquee var(--marquee-dur, 40s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* row is duplicated → 50% = one full set */
}

/* Each logo sits in a white card of FIXED width AND height. The logo is
   capped by BOTH dimensions (max-width + max-height) with object-fit:contain,
   so it always fits fully inside — wide, tall or square — and can never spill
   outside the box. Definite box size is what makes the containment reliable. */
.marquee__item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 118px;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  overflow: hidden;                 /* belt-and-braces: nothing escapes */
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.marquee__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(20, 60, 114, .12);
  border-color: var(--line-2);
}
.marquee__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Tall, stacked logos (icon + badge + name) can use tighter padding so they
   render a little larger inside the same box. */
.marquee__item--tall { padding: 10px 14px; }

/* Before JS clones the row, don't animate a non-duplicated track */
.no-js .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; gap: 1rem; }


/* ===== 10. CTA STRIP ==================================================== */
.cta { background: var(--bg-strip); border-bottom: 1px solid var(--line); }
.cta__inner {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.6rem, 3vw, 2.2rem);
  flex-wrap: wrap;
}
.cta__icon { color: var(--green); flex: none; }
.cta__copy { flex: 1 1 20rem; }
.cta__title { font-size: clamp(1.1rem, 1.8vw, 1.35rem); margin-bottom: .35rem; }
.cta__text  { font-size: .8rem; color: var(--ink-40); margin: 0; }
.cta__btns { display: flex; gap: .7rem; flex-wrap: wrap; }


/* ===== 11. FOOTER ======================================================= */
.footer { background: var(--navy-dark); color: var(--on-dark); font-size: .82rem; }
/* 4 columns: brand · Quick Links · Solutions · Contact Info */
.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.25fr 1.35fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.6rem, 5vw, 3.6rem);
}
.footer__blurb { margin: 1rem 0 1.2rem; line-height: 1.75; color: var(--on-dark); }

.footer__social { display: flex; gap: .5rem; }
.footer__social a {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--r-sm);
  color: #fff; background: rgba(255, 255, 255, .09);
  transition: background-color var(--t), transform var(--t);
}
.footer__social a:hover { background: var(--green); transform: translateY(-2px); }

.footer__head {
  color: #fff; font-size: .88rem; font-weight: 600; margin-bottom: 1rem;
}
.footer__links { display: grid; gap: .55rem; }
.footer__links a { transition: color var(--t), transform var(--t); display: inline-block; }
.footer__links a:hover { color: #fff; transform: translateX(3px); }

.footer__contact { display: grid; gap: .8rem; }
.footer__contact li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.6; }
.footer__contact svg { color: var(--green-light); flex: none; margin-top: 4px; }
.footer__contact a:hover { color: #fff; }

.footer__bar { background: var(--navy-darker); font-size: .76rem; }
.footer__bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-block: .9rem;
}
.footer__bar p { margin: 0; }
.footer__legal { display: flex; gap: 1.1rem; }
.footer__legal li + li { border-left: 1px solid rgba(255, 255, 255, .18); padding-left: 1.1rem; }
.footer__legal a:hover { color: #fff; }


/* ===== 12. REVEAL · BACK TO TOP · RESPONSIVE ============================ */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

.to-top {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 95;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--r-sm);
  color: #fff; background: var(--navy);
  box-shadow: 0 8px 22px rgba(20, 60, 114, .3);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--t), transform var(--t), visibility var(--t), background-color var(--t);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--green); }

/* --- Small laptop: tighten the nav before giving up on it --- */
@media (max-width: 1320px) {
  :root { --logo-h: 54px; --header-h: 88px; }
  .nav__link { padding: .58rem .8rem; font-size: .85rem; }
  .nav__link::after { left: .8rem; right: .8rem; }
  .header__cta { padding: .7rem 1.05rem; font-size: .8rem; }
}

/* --- Tablet: nav becomes a drawer (early, so the logo keeps its size) --- */
@media (max-width: 1150px) {
  /* Nav → slide-in drawer */
  .nav {
    position: fixed; top: 0; right: 0; z-index: 95;
    width: min(330px, 86vw); height: 100dvh;
    padding: 1.4rem 1.2rem 2rem;
    background: #fff;
    box-shadow: -24px 0 50px rgba(11, 46, 86, .25);
    transform: translateX(103%);
    transition: transform var(--t);
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { display: block; }
  .nav__link {
    justify-content: space-between; width: 100%;
    padding: .85rem .3rem; font-size: .95rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__link::after { display: none; }
  .nav__link.is-active { color: var(--green); }
  .nav__mobile-cta { display: inline-flex; width: 100%; margin-top: 1.2rem; }

  .burger { display: flex; }
  .header__cta { display: none; }

  /* Layout collapse */
  .strip { grid-template-columns: repeat(3, 1fr); }
  .strip__item:nth-child(3) { border-right: 0; }
  .strip__item:nth-child(-n+3) { border-bottom: 1px solid var(--line); }

  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 520px; }
  .about__features { grid-template-columns: repeat(2, 1fr); }

  .sol-grid { grid-template-columns: repeat(3, 1fr); }
  .impact__stats { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; row-gap: 2.4rem; }
  .footer__brand { grid-column: 1 / -1; }
  .cta__inner { justify-content: center; text-align: left; }
}

/* --- Mobile --- */
@media (max-width: 700px) {
  :root { --header-h: 74px; --logo-h: 46px; }
  .logo--footer { padding: .55rem .8rem; }
  .logo--footer .logo__img { height: 40px; }

  .topbar__inner { justify-content: center; flex-wrap: wrap; gap: .3rem 1rem; min-height: 0; padding-block: .45rem; }
  .topbar__welcome { display: none; }
  .topbar__right { gap: .9rem; font-size: .72rem; }

  .br-lg { display: none; }
  .hero { min-height: 0; padding-block: 2.6rem 5.5rem; }
  /* Copy sits over the middle of the photo here, so wash top-down instead */
  .hero__veil {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .97) 0%,
      rgba(255, 255, 255, .93) 45%,
      rgba(255, 255, 255, .84) 100%);
  }
  .hero__btns .btn { flex: 1 1 100%; }

  .strip-wrap { margin-top: -3rem; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip__item { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .strip__item:nth-child(2n) { border-right: 0; }
  .strip__item:last-child { grid-column: 1 / -1; border-bottom: 0; }

  .about__features { grid-template-columns: 1fr; gap: .9rem; }
  .about__badge { width: 88px; height: 80px; left: -6px; bottom: 20px; }

  .sol-grid { grid-template-columns: 1fr; }
  .impact__stats { grid-template-columns: 1fr; }
  .impact__head { flex-direction: column; align-items: flex-start; }

  .cta__inner { flex-direction: column; align-items: flex-start; }
  .cta__btns { width: 100%; }
  .cta__btns .btn { flex: 1 1 auto; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bar-inner { flex-direction: column; align-items: center; text-align: center; }
}

/* ==========================================================================
   LARGE DISPLAYS
   The content column widens in steps and the root font-size scales with it,
   so type, spacing and components all grow together instead of the page
   sitting as a small island in the middle of a 27"/32" monitor.
   Because nearly everything is sized in rem, one font-size bump rescales
   the whole design proportionally.
   ========================================================================== */

/* ~1600px+ — large laptop / small 24" */
@media (min-width: 1600px) {
  :root { --shell: 1580px; }
}

/* ~1900px+ — 24" and most 1080p/1440p desktops */
@media (min-width: 1900px) {
  html { font-size: 17px; }
  :root {
    --shell: 1760px;
    --logo-h: 66px;
    --header-h: 104px;
  }
  .hero__copy { max-width: 44rem; }
}

/* ~2300px+ — 1440p / large 27"–32" */
@media (min-width: 2300px) {
  html { font-size: 18px; }
  :root {
    --shell: 1980px;
    --logo-h: 72px;
    --header-h: 112px;
  }
}

/* ~2800px+ — 4K and ultrawide */
@media (min-width: 2800px) {
  html { font-size: 19px; }
  :root {
    --shell: 2240px;
    --logo-h: 78px;
    --header-h: 120px;
  }
  /* Keep line length readable even though the column is very wide */
  .hero__copy { max-width: 46rem; }
  .about__text, .hero__lead { max-width: 38rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}