/* =============================================================================
   PITCO Engineering — Home Page (index.css)
   Page-only styles. Foundation rules live in css/style.css — not repeated here.
   Follows Story/design-verdict.md: one idea per viewport, minimalism default.
   ============================================================================= */

/* =============================================================================
   HERO — full-bleed background image behind the headline + paragraph
   ============================================================================= */
.hero--home { color: var(--c-on-dark); }
.hero--home h1 { color: var(--c-on-dark); }
.hero--home .hero__eyebrow { color: var(--c-accent); }
/* Full white paragraph — stays readable over the lighter overlay + photo */
.hero--home .hero__sub { color: var(--c-on-dark); }

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg-img,
.hero__bg-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Override .placeholder defaults so it fills the hero edge-to-edge */
.hero__bg-ph {
  aspect-ratio: auto;
  border-radius: 0;
}
/* Light navy wash — the photo reads as the background; just enough
   darkening on the text side to keep the headline + paragraph legible */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(7, 19, 35, 0.78) 0%,
    rgba(7, 19, 35, 0.50) 52%,
    rgba(7, 19, 35, 0.24) 100%);
}

/* Hero content sits above the background layer */
.hero__inner {
  position: relative;
  z-index: 1;
}

/* =============================================================================
   LINEUP TILES — Apple-style 2-up tile grid, light design
   AEOS is the featured tile and spans the full width; the rest pair up 2-across.
   ============================================================================= */

/* White section — the seams between the light-gray tiles show this through */
#lineup {
  padding-top: var(--section-pad);
  background: var(--c-bg);
}

.lineup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;                       /* thin white seam between tiles */
  padding-inline: 12px;            /* white seam on the L/R sides; NO top/bottom
                                      frame — outer top/bottom tile edges meet
                                      the gray band directly (no notch) */
  margin-top: var(--sp-6);
  max-width: var(--w-wide);        /* stop tiles ballooning on wide displays */
  margin-inline: auto;             /* centre the capped grid in its gray band */
  background: var(--c-bg);         /* white seams sit over the gray band */
}

/* Each tile is a light-gray card — overrides the foundation full-bleed tile */
.tile {
  background: var(--c-bg-alt);
  padding: clamp(2.75rem, 4vw, 5rem) clamp(1.5rem, 3vw, 3rem);
}

/* Featured tile (AEOS) spans both columns */
.tile--featured { grid-column: 1 / -1; }

/* Tile visual slot */
.tile__visual {
  margin-top: var(--sp-4);
  width: 100%;
}

.tile .tile__desc {
  font-size: var(--t-body);
  max-width: 46ch;
}

/* Photo tiles (Integrators, Manufacturers): a smaller image — about the size
   of the AEOS laptop mockup — pinned to the tile's bottom edge so the images
   line up across the row. align-content:stretch lets the inner fill the tile;
   the auto margins centre the text block and push the image to the bottom. */
.tile--photo { align-content: stretch; }

.tile--photo .tile__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tile--photo .tile__inner > .eyebrow { margin-top: auto; }

.tile--photo .tile__visual {
  max-width: 72%;
  margin-top: auto;
  padding-block: var(--sp-3);   /* symmetric margin above and below the picture — matches row-1 height */
}

/* AEOS wordmark in place of the tile heading text */
.aeos-wordmark {
  display: block;
  height: clamp(4.5rem, 3.2rem + 5.2vw, 6.5rem);
  width: auto;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .lineup { grid-template-columns: 1fr; }
  .tile--featured { grid-column: auto; }
}

/* =============================================================================
   TEN YEARS — credibility section
   Two-column grid: text left, photo right
   ============================================================================= */
.tenyears-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}

.tenyears-text .eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
}

.tenyears-text h2 {
  margin-bottom: var(--sp-3);
}

.tenyears-visual .placeholder {
  border-radius: var(--r-lg);
}

@media (max-width: 768px) {
  .tenyears-grid {
    grid-template-columns: 1fr;
  }
  .tenyears-visual {
    order: -1;           /* photo above text on mobile */
  }
}

/* =============================================================================
   PROVEN AT SCALE — mask-expand video reveal
   scale-reveal.js drives it off scroll: a masked video window expands from a
   centred card to full-bleed, then the heading and four stats stagger in,
   each number counting up as its stat reveals.
   ============================================================================= */
.mx {
  position: relative;
  background: var(--c-bg-dark);
}

/* Pinned stage */
.mx__sticky {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Permanent dark base. The bright gradient sits ON this and fades AWAY for
     the workflow steps (see .mx__media) — so the dark is never a separate
     cover layer that could lag the scroll and flash the gradient at the edges. */
  background: linear-gradient(180deg, #0a1526 0%, #050c16 100%);
  /* own stacking context so the pinned layers (media/knockout/content)
     composite against each other, not page content behind the section */
  isolation: isolate;
}

/* Step track — one block per step supplies the pinned-scroll runway.
   scale-reveal.js drives the stepping; these are just spacers. The negative
   margin pulls the runway up over the sticky stage's own flow box so step 0
   begins exactly where the stage pins — no dead zone before the first beat. */
.mx__track {
  margin-top: calc(-100svh + var(--nav-h));
  pointer-events: none;
}
.mx__snap { height: 100svh; }

/* Touch-only: collapse the 10-step desktop runway to 6 visible spacer blocks
   so the track is exactly intro / 4 panels / finale tall. The desktop 2-beat
   cadence (panel = title-only beat then title+lead beat) is wrong for touch;
   on touch each panel is one stop with title+lead together, and one finger
   swipe ≈ one viewport ≈ one stop. scale-reveal.js's touch branch reads
   track.offsetHeight / 6 as the per-stop scroll, so this rule directly
   controls the touch step granularity. */
@media (hover: none) and (pointer: coarse) {
  .mx__snap:nth-child(2),
  .mx__snap:nth-child(4),
  .mx__snap:nth-child(6),
  .mx__snap:nth-child(8) {
    display: none;
  }

  /* No CSS scroll-snap. Every variant we've tried — stop:always on all panels
     (#66 #72), stop:always on finale only + IO-toggled snap-type (#73) —
     changes iOS Safari's scroll-deceleration feel within the section once
     scroll-snap-type is set on <html>, even when only one element is
     snap-aligned. Short swipes get proximity-pulled-back ("scroll once,
     nothing happens; scroll twice, snaps") and the section feels braked.

     The finale overshoot is caught in scale-reveal.js via a `scrollend`
     listener (with scroll-quiet fallback for iOS < 16.4). That fires AFTER
     iOS momentum has fully stopped, so it doesn't fight the gesture; it's
     a magnetic finish, not a snap-back interruption. */
}

/* Touch-only: fast CSS transitions for the discrete stop-to-stop snapshots
   scale-reveal.js writes on .mx--touch. The desktop 0.5–0.9s eases below are
   tuned for the deliberate wheel cadence; on touch where each stop change
   needs to land inside the user's finger gesture, ~180ms keeps the cross-fade
   smooth without dragging into the next stop change. The 0.06s delay on
   .mx__lead (which staggers it behind the title for the desktop 2-beat
   reveal) is also removed — on touch they're paired in one stop. */
.mx--touch .mx__media,
.mx--touch .mx__knockout {
  transition: opacity 0.22s ease,
              transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.mx--touch .mx__title,
.mx--touch .mx__lead {
  transition: opacity 0.18s ease,
              transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.mx--touch .mx__head,
.mx--touch .mx__stat {
  transition: opacity 0.2s ease,
              transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* Full-bleed media — the bright gradient covers the whole stage on entry
   (it's the entry visual itself; no centred card that expands into view). JS
   fades it to opacity 0 for the workflow steps, revealing the dark sticky
   base beneath; on entry / intro it's fully shown. */
.mx__media {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.55s ease;
}
.mx__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bright stand-in for the real loop — the highlights need to be light enough
   that the knockout letters read clearly as windows onto it */
.mx__video--placeholder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--sp-6);
  background:
    radial-gradient(48% 42% at 26% 30%, #6fc6ff 0%, rgba(111, 198, 255, 0) 62%),
    radial-gradient(56% 50% at 82% 74%, #2f7fd6 0%, rgba(47, 127, 214, 0) 64%),
    radial-gradient(40% 60% at 60% 8%, #8ad4ff 0%, rgba(138, 212, 255, 0) 60%),
    linear-gradient(150deg, #0f3163 0%, #1b4e88 48%, #0a2042 100%);
}
.mx__video-label {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.34);
}

/* Intro headline — a TRANSPARENT container with a gradient-filled headline
   (the blue gradient painted straight into the glyphs via background-clip:text).
   The dark background is the sticky's own base; the bright gradient fades out
   from under it as the headline settles. The container is deliberately
   transparent (NO opaque black panel): an opaque layer over the bright media
   left an antialiased "layer seam" — a thin gradient rim around the panel that
   flashed during scroll. With nothing opaque covering the gradient, there is
   no seam to expose. */
.mx__knockout {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  will-change: transform, opacity;
  transform: scale(2.6);
  transition: opacity 0.85s ease,
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mx__knockout-inner {
  max-width: 900px;
  padding-inline: var(--gutter);
  text-align: center;
}
.mx__knockout .eyebrow {
  display: block;
  margin-bottom: var(--sp-3);
  color: #5fa8e6;
}
.mx__knockout .mx__title {
  opacity: 1;
  background: linear-gradient(135deg, #8ad4ff 0%, #4ea3e8 46%, #2f7fd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* (No scrim layer: the dark base lives on .mx__sticky and the bright gradient
   fades away on top of it — see .mx__sticky / .mx__media.) */

/* Text content — workflow stage + stats finale stacked in one centred cell */
.mx__content {
  position: relative;
  z-index: 3;
  display: grid;
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.mx__stage,
.mx__finale { grid-area: 1 / 1; }

/* Workflow — panels stacked; JS flies each one in over the video */
.mx__stage { display: grid; justify-items: center; }
.mx__panel {
  grid-area: 1 / 1;
  max-width: 760px;
}
.mx__panel .eyebrow { display: block; margin-bottom: var(--sp-3); opacity: 0; }
.mx__title {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--c-on-dark);
  text-wrap: balance;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.55s ease,
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mx__lead {
  margin: var(--sp-3) auto 0;
  max-width: 36ch;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--c-on-dark);
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.5s ease 0.06s,
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.06s;
}

/* Finale — heading + the scale stats */
.mx__head {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.55s ease,
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mx__head .eyebrow { display: block; margin-bottom: var(--sp-2); }
.mx__fin-title {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-on-dark);
  text-wrap: balance;
}
.mx__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.mx__stat {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.5s ease,
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mx__num {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 1.8rem + 4vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-on-dark);
}
.mx__label {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-on-dark);
}

/* Reduced-motion & no-JS: unpin, full video, stacked legible content */
@media (prefers-reduced-motion: reduce) {
  .mx__sticky { position: static; height: auto; padding-block: var(--section-pad); }
  .mx__track { display: none; }
  .mx__media { opacity: 0; }   /* hide the bright gradient; dark base shows */
  .mx__knockout {
    position: relative;
    z-index: 3;
    mix-blend-mode: normal;
    background: transparent;
    opacity: 1;
    transform: none;
    margin-bottom: var(--sp-6);
  }
  .mx__content,
  .mx__stage { display: block; }
  .mx__panel { grid-area: auto; }
  .mx__panel + .mx__panel,
  .mx__finale { margin-top: var(--sp-6); }
  .mx__title, .mx__lead, .mx__head, .mx__stat,
  .mx__panel .eyebrow { opacity: 1; transform: none; }
}
.no-js .mx__sticky { position: static; height: auto; padding-block: var(--section-pad); }
.no-js .mx__track { display: none; }
.no-js .mx__media { opacity: 0; }   /* hide the bright gradient; dark base shows */
.no-js .mx__knockout {
  position: relative;
  z-index: 3;
  mix-blend-mode: normal;
  background: transparent;
  opacity: 1;
  transform: none;
  margin-bottom: var(--sp-6);
}
.no-js .mx__content,
.no-js .mx__stage { display: block; }
.no-js .mx__panel { grid-area: auto; }
.no-js .mx__panel + .mx__panel,
.no-js .mx__finale { margin-top: var(--sp-6); }
.no-js .mx__title,
.no-js .mx__lead,
.no-js .mx__head,
.no-js .mx__stat,
.no-js .mx__panel .eyebrow { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .mx__stats { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-3); }
}

/* =============================================================================
   ABOUT PREVIEW
   Two-column grid: text left, square visual right
   ============================================================================= */
.about-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Text + CTA in the left column, the values animation spanning the right. */
  grid-template-areas:
    "text   visual"
    "cta    visual";
  column-gap: var(--sp-6);
  row-gap: var(--sp-4);
  align-items: center;
}
.about-preview__text   { grid-area: text; }
.about-preview__visual { grid-area: visual; }
.about-preview__cta    { grid-area: cta; justify-self: start; }

.about-preview__text .eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
}

.about-preview__text h2 {
  margin-bottom: var(--sp-3);
}

.about-preview__text p {
  color: var(--c-ink-2);
  margin-bottom: var(--sp-3);
}

.about-preview__quote {
  border-left: 3px solid var(--c-accent);
  padding-left: var(--sp-3);
  margin-block: var(--sp-3) var(--sp-4);
  font-style: italic;
  color: var(--c-ink-2);
  font-size: var(--t-lead);
  line-height: 1.4;
}

.about-preview__visual .placeholder {
  border-radius: var(--r-lg);
}

/* .values-loop kinetic card lives in css/style.css §6.16 — shared with /about. */

/* =============================================================================
   NEWSROOM STRIP — horizontally-scrollable row of 9:16 portrait preview tiles
   (story-preview style, like LinkedIn / Facebook). Each tile is the cover image
   with the title overlaid; ~2.5 show on mobile (edge-to-edge) and the rest
   scroll, up to 8 in the track. Scoped to the homepage strip (#cms-news-grid)
   so the /news + /insights archives keep their normal card grid.
   ============================================================================= */
/* Tighten the strip vertically: the gap under the eyebrow and the margin below
   the stories match (sp-2). Top padding under the hero is left as-is. */
#news .section-head { margin-bottom: var(--sp-2); }
/* Halved top margin between the hero and the newsroom eyebrow. */
#news { padding-block: calc(var(--section-pad) / 2) var(--sp-2); position: relative; }

/* Trade-show graphic (placeholder). 4:1, right edge aligned to the centered
   1440px max width, straddling the hero/newsroom boundary — 2/3 of its height
   sits up in the hero, 1/3 in the newsroom. Height = width/4, so 2/3 of the
   height = width/6 (the negative top offset). */
.tradeshow-graphic {
  /* Scales with the viewport but stops shrinking at two-thirds of the max. */
  --tsg-w: clamp(calc(640px * 2 / 3), 42vw, 640px);
  position: absolute;
  z-index: 4;
  width: var(--tsg-w);
  aspect-ratio: 4 / 1;
  container-type: inline-size;   /* so the CTA can scale to the graphic's width */
  top: calc(var(--tsg-w) / -6);
  right: max(var(--gutter), calc((100% - var(--w-wide)) / 2));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  overflow: hidden;        /* clip the graphic image to the rounded 4:1 box */
  color: var(--c-accent);
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
/* The real graphic: drop an <img>/<picture> in (replacing the placeholder
   label) and it is forced into the 4:1 box — its own dimensions never matter. */
.tradeshow-graphic > img,
.tradeshow-graphic > picture,
.tradeshow-graphic > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Placeholder styling only while there is no image. */
.tradeshow-graphic:not(:has(img, picture)) {
  border: 2px dashed var(--c-accent);
  background: rgba(46, 163, 242, 0.12);
}
/* CTA button overlaying the graphic, anchored bottom-left. Both insets use cqw
   (% of the graphic's WIDTH) so the gap below the button equals the gap to its
   left — equal absolute distance, despite the 4:1 box being 4× wider than tall. */
.tradeshow-graphic__cta {
  position: absolute;
  left: 3cqw;
  bottom: 3cqw;
  margin: 0;
  /* Scale the button to the graphic's width (cqw) so it stays in proportion as
     the window shrinks — em padding scales with the font-size. ~16px on the
     widest graphic, down to ~11px when the window is narrow. */
  font-size: clamp(0.6rem, 2.5cqw, 1rem);
  padding: 0.55em 1.2em;
  border-radius: 6px;          /* rounded square, not a pill */
  border: 1px solid #fff;      /* 1px white outline */
}
@media (max-width: 768px) {
  /* On mobile the graphic drops into normal flow — below the hero, above the
     newsroom eyebrow. position:relative keeps it as the CTA's anchor. */
  .tradeshow-graphic {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    margin: 0 var(--gutter) var(--sp-3);
  }
  /* Shrink the CTA on mobile so it stops covering the graphic. Keep the
     base-rule bottom-left anchor (left: 3cqw, bottom: 3cqw) so the button
     sits with equal margin from the graphic's left + bottom edges — NOT
     centered. Padding is in em, so a smaller font-size shrinks width +
     height together. */
  .tradeshow-graphic__cta {
    font-size: 0.75rem;
  }
}
@media (max-width: 412px) {
  /* On narrow Android phones (Maik on Galaxy Flip 7) the 0.75rem button
     still covers part of the graphic. Drop further so it occupies less
     vertical real estate at this viewport class. iPhone 17 Pro Max (430)
     stays at 0.75rem from the rule above — Maik says iPhone is fine. */
  .tradeshow-graphic__cta {
    font-size: 0.6rem;
  }
}

#cms-news-grid {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox — hide the scrollbar */
  padding-block: 2px;               /* room for focus rings */
}
#cms-news-grid::-webkit-scrollbar { display: none; }   /* WebKit — hide the scrollbar */

#cms-news-grid .cms-card {
  flex: 0 0 auto;
  width: 150px;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  background: var(--c-bg-alt);
}
/* Top overlay — News / Insight indicator (from the card's data-label), in the
   accent blue, over a short scrim (~10% of the tile, mirroring the bottom). */
#cms-news-grid .cms-card::before {
  content: attr(data-label);
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  padding: 0.55rem 0.75rem 0.9rem;
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  background: linear-gradient(to bottom, rgba(7, 19, 35, 0.9), rgba(7, 19, 35, 0.9) 1.4rem, rgba(7, 19, 35, 0) 100%);
  pointer-events: none;
}

#cms-news-grid .cms-card__link { display: block; height: 100%; padding: 0; }
#cms-news-grid .cms-card__media {
  position: absolute;
  inset: 0;
  margin: 0;
  aspect-ratio: auto;
}
#cms-news-grid .cms-card__media img,
#cms-news-grid .cms-card__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Preview = picture + title only. */
#cms-news-grid .cms-card__kicker,
#cms-news-grid .cms-card__excerpt,
#cms-news-grid .cms-card__more { display: none; }

#cms-news-grid .cms-card__title {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 2rem 0.75rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-on-dark);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  /* Solid dark band behind the text (fully readable on any cover); the gradient
     fades to transparent ONLY across the top padding, above the text — so the
     scrim covers the headline whether it is 1 line or 4. */
  background: linear-gradient(to bottom, rgba(7, 19, 35, 0) 0, rgba(7, 19, 35, 0.9) 2rem, rgba(7, 19, 35, 0.9) 100%);
  /* Bottom-anchored: the headline's LAST line is the fixed baseline; it grows
     upward and clamps (never overflows the tile). */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  /* Bleed edge-to-edge so the row scrolls off the screen sides. */
  #cms-news-grid {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  #cms-news-grid .cms-card {
    width: calc((100vw - 2rem) / 2.5);   /* ~2.5 tiles visible across the viewport */
  }
}

@media (max-width: 768px) {
  /* Stack: headline + paragraph, then the values animation, then the CTA. */
  .about-preview {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "visual"
      "cta";
    row-gap: var(--sp-5);
  }
}

/* =============================================================================
   CTA BAND — contact section
   Inherits .section--dark and .cta-band from foundation.
   mailto: link styled as primary button; no HubSpot form on home.
   ============================================================================= */
#contact .eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
}

/* =============================================================================
   RESPONSIVE — breakpoints beyond what foundation handles
   ============================================================================= */

/* Stat grid: 2×2 on tablet, 1 col on smallest screens handled by foundation */
@media (max-width: 1024px) {
  .tenyears-grid {
    gap: var(--sp-4);
  }
}

@media (max-width: 480px) {
  .about-preview__quote {
    font-size: var(--t-body);
  }
}

/* =============================================================================
   GET IN TOUCH — light-gray CTA band (overrides the dark .cta-band default)
   ============================================================================= */
.cta-band.section--alt p { color: var(--c-ink-2); }

/* Contact form — custom-styled, submits to the HubSpot Forms API (js/forms.js).
   2-up fields on desktop, stacked on narrow screens. */
.cta-form {
  margin: var(--sp-5) auto 0;
  max-width: 540px;
  text-align: left;
}
.cta-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.cta-form__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cta-form__label {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.cta-form input:not([type="checkbox"]),
.cta-form select {
  width: 100%;
  padding: 0.72rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  -webkit-appearance: none;
  appearance: none;
}
.cta-form input::placeholder { color: var(--c-ink-3); }
.cta-form input:not([type="checkbox"]):focus,
.cta-form select:focus {
  outline: none;
  border-color: var(--c-accent-ink);
  box-shadow: 0 0 0 3px rgba(27, 118, 181, 0.16);
}
/* Custom caret for the company dropdown */
.cta-form select {
  cursor: pointer;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23515154' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
}
.cta-form__submit { width: 100%; }

/* "I am a…" business-type checkbox group */
.cta-form__group {
  border: 0;
  margin: 0 0 var(--sp-3);
  padding: 0;
}
.cta-form__group legend {
  margin-bottom: 9px;
  padding: 0;
}
.cta-form__check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--c-ink);
  cursor: pointer;
}
.cta-form__check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--c-accent-ink);
  cursor: pointer;
}

/* Submit feedback — success / error messages set by js/forms.js */
.cta-form__status {
  margin: var(--sp-3) 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}
.cta-form__status--ok {
  color: #1a7f37;
  font-weight: 600;
}
.cta-form__status--error { color: #b42318; }
.cta-form__status a { color: inherit; }

@media (max-width: 560px) {
  .cta-form__row { grid-template-columns: 1fr; }
}