/* ==========================================================================
   Media Exchange — base styles
   Design tokens, fonts, shared components. Section-specific styles live in
   css/sections/*.css. Values come straight from the Figma "Home Page" frame
   (1920 wide, 100px gutters) and "Mobile Home" frame (402 wide, 20px gutters).
   ========================================================================== */

/* ---- Fonts (self-hosted, see DEPENDENCIES.md; preloaded in index.html <head>) */
@font-face { font-family: "Blauer Nue"; src: url("../fonts/BlauerNue-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Blauer Nue"; src: url("../fonts/BlauerNue-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* TEMP: SemiBold file not supplied yet — alias Medium so browsers don't synthesise a faux bold */
@font-face { font-family: "Blauer Nue"; src: url("../fonts/BlauerNue-Medium.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Europa"; src: url("../fonts/Europa-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* SloopScriptPro Bold (the hero's "Award winning" run) has not been supplied:
   the hero shows a traced SVG (assets/award-winning.svg) instead and no
   @font-face is declared, so a `.script` element never requests a missing
   file. When fonts/SloopScriptPro-Bold.woff2 arrives, restore:
   @font-face { font-family: "SloopScriptPro"; src: url("../fonts/SloopScriptPro-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } */

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --bg: #0d0d0d;
  --fg: #ffffff;
  --accent: #63f9a2;
  --black: #000000;
  --grey: #818181;
  --light: #d9d9d9;
  --star: #ffad0b;
  --cream: #fcfcf1;   /* light card fill (numbered cards, scroll-stack) */

  --font-display: "Blauer Nue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Europa", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-script: "SloopScriptPro", "Snell Roundhand", "Brush Script MT", cursive;

  /* Layout: sections are full-bleed; the design's 1720 content width is the
     viewport minus two gutters (100px at 1920, scaling down to 20px on mobile) */
  --gutter: clamp(20px, 5.2083vw, 100px);
  --col-gap: 11px; /* right column starts at x=971 in Figma: 860 + 11 + 849 */

  /* Type scale (desktop values from Figma; mobile overrides below) */
  --fs-hero: 128px;
  --fs-h1: 80px;
  --fs-h2: 64px;
  --fs-h3: 54px;
  --fs-h4: 50px;
  --fs-item: 40px;
  --fs-lead: 28px;
  --fs-body: 20px;
  --fs-small: 16px;
  --lh-display: 0.95;
  --lh-body: 1.24;

  --radius-pill: 50px;
  --radius-card: 21px;
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---- Layout --------------------------------------------------------------- */
/* Full-bleed: sections span the whole viewport at any size; only the gutters
   (100px at 1920, scaling down to 20px on mobile) hold content off the edges. */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; }

/* ---- Section rhythm on laptop / desktop (client change requests #20 / #37 / #40) ----
   Each block pads itself with half the Figma's gap to its neighbours, up to 175px (350px between most
   service-page sections at 1920, 268–288px between the homepage's lower sections). MX asked for less
   space between sections at 1440 and 1920, so from 1025px up no section is padded more than
   --section-pad-max above or below it: 110px at 1920, scaling with the viewport (82.5px at 1440). The
   roomy gaps all come down to at most two of it (220px at 1920, 165px at 1440); the Figma's tighter pairs
   (reviews → video testimonials 58px, showreel → case studies 88px, the card blocks' ~135px …) keep theirs.
   A block's own padding can't be read in CSS, so the cap is set on the sides that are always larger than
   it (listed by block class; #main out-ranks the block stylesheets). A new block with a padding above the
   cap joins its list. Tablet and mobile (≤1024) keep the blocks' own spacing. */
:root { --section-pad-max: min(5.7292vw, 110px); }
@media (min-width: 1025px) {
  #main .section:is(.section--services, .section--partners, .section--comparison, .section--team, .block-faq,
    .block-device-mockup, .block-section-wip, .block-text-image) { padding-top: var(--section-pad-max); }
  #main .section:is(.section--clients, .section--industries, .section--partners, .section--comparison,
    .block-service-hero, .block-section-wip, .block-device-mockup, .block-numbered-cards, .block-scroll-stack,
    .block-numbered-columns, .block-text-image, .block-awards-list, .block-timeline-carousel) { padding-bottom: var(--section-pad-max); }
  /* capped only where larger: the closing CTA pads with its own variables, the blog listing 104px below */
  #main .section.section--cta {
    padding-top: min(var(--section-pad-max), var(--cta-pad-top));
    padding-bottom: min(var(--section-pad-max), var(--cta-pad-bottom));
  }
  #main .section.section--blog { padding-bottom: min(var(--section-pad-max), 104px); }
}

/* ---- Page shell: fixed header offset ---------------------------------------
   The header (css/sections/nav.css) is position: fixed and lives outside
   #smooth-wrapper, so the scrolling content is padded by the header height
   (--nav-h: 114px desktop / 98px mobile, straight from the Figma frames) and
   native #anchor jumps land below it. --nav-stuck-h is the compact bar
   js/main.js shows once the page has scrolled (18 + 60 + 12 + 1px border);
   main.js reads it to offset scroll stops and anchor targets. These are shell
   concerns, kept here rather than in nav.css so every template that loads
   base.css gets the offset, whether or not the header CSS is enqueued. */
:root { --nav-h: 114px; --nav-stuck-h: 91px; }
#smooth-content { padding-top: var(--nav-h); }
.section { scroll-margin-top: var(--nav-h); }
@media (max-width: 640px) { :root { --nav-h: 98px; --nav-stuck-h: 65px; } }

/* Two-column section header: heading left, intro paragraph right (x=971) */
.grid-2 {
  display: grid;
  grid-template-columns: 860fr 849fr;
  column-gap: var(--col-gap);
  align-items: start;
}

/* ---- Typography ----------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-display);
  text-transform: uppercase;
  letter-spacing: 0;
}
.h1 { font-size: var(--fs-h1); }
.body { font-size: var(--fs-body); line-height: var(--lh-body); }
.accent { color: var(--accent); }

/* Reserved for CMS inner pages — NOT used on the homepage (safe to drop if the
   templates never need them): the rest of the Figma type scale, and .script
   for SloopScriptPro live text once that font is supplied. */
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }
.lead { font-size: var(--fs-lead); }
.small { font-size: var(--fs-small); line-height: 1.3; }
.script { font-family: var(--font-script); font-weight: 700; text-transform: none; }

/* Green eyebrow label with 6px dot: "Our clients", "Our services", ... */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.24;
}
.eyebrow::before {
  content: "";
  flex: 0 0 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Thin rules used between list rows */
.rule { border: 0; border-top: 1px solid var(--fg); margin: 0; }
.rule--accent { border-top-color: var(--accent); }
.rule--short { width: 125px; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 46px;
  padding: 0 17px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--black);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  text-transform: capitalize;
  white-space: nowrap;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn .btn__arrow { width: 26px; height: auto; }

/* Large outlined CTA: "Book a Discovery Call" (554 x 75.6, 3px green stroke) */
.btn--outline {
  --ring: 3px;
  --wipe-fill: var(--accent);
  --wipe-edge: var(--accent);
  --wipe-txt: var(--black);
  --wipe-edge-w: var(--ring);            /* the outline ring is the Figma's 3px stroke (2px on mobile) */
  height: 76px;
  padding: 0 37px;
  background: transparent;
  color: var(--accent);
  font-size: 36px;
  /* Client req #3: a brighter, more obvious pulse — a stronger ring breathing further out; stops on hover. */
  box-shadow: 0 0 0 0 rgba(99, 249, 162, 0.7);
  animation: btn-pulse 2.2s ease-out infinite;
}
.btn--outline:hover,
.btn--outline:focus-visible { animation: none; box-shadow: 0 0 0 0 rgba(99, 249, 162, 0); }
@keyframes btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 249, 162, 0.7); }
  70%  { box-shadow: 0 0 0 22px rgba(99, 249, 162, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 249, 162, 0); }
}
@media (prefers-reduced-motion: reduce) { .btn--outline { animation: none; } }

/* ---- Hover wipe (shared) --------------------------------------------------
   A pill-shaped fill that wipes in from the left, UNDER the label, with the
   outline ring painted ABOVE the fill. Buttons opt in with .btn--wipe and set
   --wipe-fill (the sweeping colour), --wipe-edge (the outline, transparent to
   hide it), --wipe-edge-w (ring width) and --wipe-txt (label colour on hover).
   clip-path ... round keeps the fill rounded like the button (never a straight
   corner) and leaves any outward pulse ring unclipped. */
.btn--wipe { position: relative; isolation: isolate; transition: color .3s ease, transform .25s ease; }
.btn--wipe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--wipe-fill, var(--accent));
  clip-path: inset(0 100% 0 0 round var(--radius-pill));
  transition: clip-path .45s cubic-bezier(.65, 0, .35, 1);
}
.btn--wipe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--wipe-edge-w, 2px) var(--wipe-edge, transparent);
  transition: box-shadow .3s ease;
  pointer-events: none;
}
.btn--wipe:hover::before,
.btn--wipe:focus-visible::before { clip-path: inset(0 0 0 0 round var(--radius-pill)); }
.btn--wipe:hover,
.btn--wipe:focus-visible { color: var(--wipe-txt, var(--black)); }
@media (prefers-reduced-motion: reduce) { .btn--wipe::before { transition: none; } }

/* "Book a Discovery Call" pill, shared by the hero and the CTA section: 554
   wide, 19px clear either side of the 41px logomark (Figma: "Book a" ends
   236, mark 297→338, "Discovery" from 354), label as typed. One rule for both
   sections so they cannot drift apart; the section files keep only their
   mobile overrides. */
.btn--outline-lg { min-width: min(554px, 100%); max-width: 100%; gap: 19px; text-transform: none; }   /* min(): never wider than its column (a 554px pill pushed /work/ to 574px wide on phones) */
.btn--outline-lg img { width: 41px; height: 41px; }

/* Small nav pill: "contact" with black logomark */
.btn--nav { height: 59px; padding: 0 36px; font-weight: 600; gap: 10px; }
.btn--nav img { width: 36px; height: 36px; }

/* ---- Media ---------------------------------------------------------------- */
.card-img { border-radius: var(--radius-card); overflow: hidden; }

/* ---- Animation hooks (js/main.js) -----------------------------------------
   data-reveal        element fades in + rises when it scrolls into view
   data-reveal-group  container whose [data-reveal] descendants (any depth) are
                      revealed together, staggered in on-screen order — row by
                      row, left → right. A multi-row group taller than about
                      half the viewport is split back into per-element reveals
                      by main.js, so tall lists reveal row by row as they enter.
   data-scroll-stop   marks a section as a wheel-paging / snap stop (main.js
                      also treats any section with an .eyebrow as one).
   The JS sets initial state; without JS everything is visible.
   -------------------------------------------------------------------------- */

/* ---- Accessibility -------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Responsive type scale ------------------------------------------------ */
@media (max-width: 1440px) {
  :root { --fs-hero: 96px; --fs-h1: 64px; --fs-h2: 52px; --fs-h3: 44px; --fs-h4: 40px; --fs-item: 32px; --fs-lead: 24px; }
}
@media (max-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr; row-gap: 32px; }
  :root { --fs-hero: 72px; --fs-h1: 56px; --fs-h2: 48px; --fs-h3: 40px; --fs-h4: 36px; --fs-item: 30px; }
}
@media (max-width: 640px) {
  /* Figma "Mobile Home": 402 wide, 20px gutters */
  :root {
    --gutter: 20px;
    --fs-hero: 40px; --fs-h1: 48px; --fs-h2: 40px; --fs-h3: 36px; --fs-h4: 36px; --fs-item: 26px;
    --fs-lead: 20px; --fs-body: 20px; --fs-small: 16px;
  }
  .eyebrow { font-size: 16px; }
  .btn { height: 42px; font-size: 20px; }
  .btn--outline { --ring: 2px; height: 47px; font-size: 24px; padding: 0 28px; }
  /* "Book a Discovery Call" pill, Figma "Mobile Home" Group 71: 315 × 47, 20px label, 27px logomark with
     20px clear either side (the 276px text run sits 22px in from each end) */
  .btn--outline-lg { min-width: min(315px, 100%); gap: 20px; padding: 0 22px; font-size: 20px; }
  .btn--outline-lg img { width: 27px; height: 27px; }
  .btn--nav { height: 44px; padding: 0 20px; }
}
/* Small phones (320–359): the 48px display heading's longest words ("EVERYTHING,") and the 315px pill no
   longer fit the 280–319px column — both scale down so nothing runs past the viewport */
@media (max-width: 359px) {
  :root { --fs-h1: 13vw; }                      /* 46.7px at 359, 41.6px at 320 */
  .btn--outline-lg { gap: 14px; padding: 0 16px; font-size: 18px; }
  .btn--outline-lg img { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Marquee (logo strips) ---------------------------------------------- */
.marquee { overflow: hidden; width: 100%; }
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
/* Draggable marquee (data-draggable, js/main.js initDraggableMarquees): the
   drift is JS-driven so the row can be dragged and thrown. */
.marquee.is-draggable { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.marquee.is-draggable.is-dragging { cursor: grabbing; }
.marquee.is-draggable .marquee__track { animation: none; will-change: transform; }

/* ---- Fixed "Book a Call" side tab (Figma Group 18: 44 × 205 green tab) -----
   Markup sits in index.html OUTSIDE #smooth-wrapper, because ScrollSmoother
   transforms #smooth-content and position:fixed would break inside it. */
.side-tab {
  position: fixed;
  top: 50%;                          /* vertically centred in the viewport */
  right: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 44px;
  height: 205px;
  transform: translateY(-50%);
  pointer-events: none;
}
.side-tab__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 44px;
  height: 205px;
  padding: 19px 0;
  border-radius: 27px 0 0 27px;
  background: var(--accent);
  color: var(--black);
  pointer-events: auto;
  /* raised off the page: a soft cast shadow to its left + a faint contact edge */
  box-shadow: -10px 10px 28px rgba(0, 0, 0, .55), -1px 0 0 rgba(0, 0, 0, .15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.side-tab:hover .side-tab__tab { transform: translateX(-3px); box-shadow: -16px 12px 34px rgba(0, 0, 0, .6), -1px 0 0 rgba(0, 0, 0, .15); }
.side-tab__arrow { width: 15px; height: 27px; }
.side-tab__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 0.98;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);        /* reads bottom → top, as in Figma (-90°) */
}
@media (max-width: 1024px) { .side-tab { display: none; } }

/* ---- Large screens (above the 1920 design width) -------------------------
   The hero heading keeps growing with the viewport instead of capping at the
   design's 128px, so the space between the headline and the X stays filled.
   7vw ≈ 140px at 2000 (vs the design's 128px at 1920). Capped at 200px. */
@media (min-width: 1921px) {
  :root { --fs-hero: min(7vw, 200px); }
}

/* Outlined pill hover: the green logomark inside "Book a Discovery Call" would
   vanish on the green fill — render it black with the text (keeps the PNG's alpha) */
.btn--outline img { transition: filter .25s ease; }
.btn--outline:hover img,
.btn--outline:focus-visible img { filter: brightness(0); }