/* ============================================================
   Social Media Marketing for Construction, Renovation &
   Home Service Companies — page stylesheet.

   Self-contained: tokens + site chrome + page sections.
   Token values are taken from syntrilabs.com/assets/css/tokens.css
   so this page matches the rest of the site. If those tokens ever
   change on the site, update the :root block below to match.
   ============================================================ */

:root{
  --amber:#FFB703;
  --amber-deep:#8A5A00;
  --amber-muted:#D6990A;
  --ink:#0A0A0A;
  --ink-text:#0F0F0F;
  --btn-text:#374151;
  --light:#F5F5F3;
  --warm:#EDE9E0;
  --muted-dark:#999995;
  --muted-nav:#9CA3AF;
  --muted-hero:#AEADA6;
  --muted-light:#4A4A47;
  --border-dark:#666661;
  --divider-amber:rgba(255,183,3,.5);

  --font-display:'Unbounded', sans-serif;
  --font-body:'Inter', sans-serif;

  --container-inset:80px;
  --section-gap:96px;
  --card-gap:24px;
  --card-pad:28px;
  --radius-btn:5px;
}
@media (max-width:1023px){ :root{ --container-inset:40px; } }
@media (max-width:767px){ :root{ --container-inset:20px; --section-gap:56px; } }

/* ---- Base ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-text);
  background:var(--light);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.1; margin:0; }
p,ul{ margin:0; }
ul{ padding:0; list-style:none; }

.container{ max-width:1440px; margin:0 auto; padding:0 var(--container-inset); }
/* The header is sticky at 80px, so anchor targets need clearance. */
section[id]{ scroll-margin-top:80px; }
.section{ padding-block:var(--section-gap); }
.section--dark{ background:var(--ink); color:#fff; }
.section--light{ background:var(--light); }
.section--warm{ background:var(--warm); }

/* ---- Kicker ---- */
.kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-weight:600; font-size:12px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--amber-deep);
  margin-bottom:16px;
}
.section--dark .kicker, .hero .kicker{ color:var(--amber); }
.kicker::before{ content:""; width:28px; height:1px; background:currentColor; flex:none; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-body); font-weight:600; font-size:14px;
  padding:14px 22px; border-radius:var(--radius-btn);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary{ background:var(--amber); color:var(--btn-text); }
.btn--primary:hover{ background:#e6a600; }
.btn--ghost-dark{ border-color:var(--border-dark); color:#fff; }
.btn--ghost-dark:hover{ border-color:#fff; }
.btn--ghost-light{ border-color:var(--amber-deep); color:var(--ink-text); }
.btn--ghost-light:hover{ background:rgba(138,90,0,.06); }
.btn--full{ width:100%; }
.btn--lg{ padding:16px 28px; font-size:15px; }

/* ---- Header ---- */












@media (max-width:1023px){





  .hdr-audit-btn{ display:none; }


}

/* ---- Footer ---- */









@media (max-width:767px){



}

/* ============================================================
   1. HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  padding:88px var(--container-inset) 80px;
  display:flex; align-items:center; min-height:520px;
}
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.86) 45%, rgba(10,10,10,.55) 100%);
}
.hero__inner{ position:relative; max-width:980px; }
/* The subject of the page gets the accent; everything after it is the
   qualifier. One highlight only — a second would cancel the first out. */
.hero h1{ font-size:clamp(30px, 4.4vw, 58px); letter-spacing:-.02em; }
.hero h1 em{ font-style:normal; color:var(--amber); }
.hero__sub b{ color:#fff; font-weight:600; }
.hero__sub{
  margin-top:18px; max-width:620px;
  font-size:clamp(15px, 1.35vw, 18px); color:var(--muted-hero); line-height:1.6;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.hero__marks{
  display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:28px;
  font-size:12.5px; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted-dark);
}
.hero__marks li{ display:flex; align-items:center; gap:10px; }
.hero__marks li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--amber); }
@media (max-width:767px){
  .hero{ padding-block:64px 56px; min-height:0; }
  .hero__marks{ gap:8px 16px; font-size:11px; }
}

/* ---- Section heads ---- */
.sec-head{ max-width:760px; margin-bottom:52px; }
.sec-head h2{ font-size:clamp(26px, 3.1vw, 42px); letter-spacing:-.015em; }
.sec-head__lede{ margin-top:18px; font-size:16.5px; line-height:1.65; color:var(--muted-light); }
.section--dark .sec-head__lede{ color:var(--muted-dark); }

/* ============================================================
   2. WHAT WE DO
   ============================================================ */
.grid{ display:grid; gap:var(--card-gap); }
.grid--services{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:1023px){ .grid--services{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:539px){ .grid--services{ grid-template-columns:1fr; } }

.svc{
  background:#fff; border:1px solid #e5e3dc; border-radius:10px;
  padding:var(--card-pad); position:relative;
  transition:border-color .2s ease, transform .2s ease;
}
.svc:hover{ border-color:var(--amber-deep); transform:translateY(-2px); }
.svc__num{
  font-family:var(--font-display); font-weight:600; font-size:12px;
  color:var(--amber-deep); letter-spacing:.08em;
}
.svc h3{ margin:14px 0 10px; font-size:17px; letter-spacing:-.01em; }
.svc p{ font-size:14.5px; line-height:1.6; color:var(--muted-light); }
.svc--note{ background:var(--ink); border-color:var(--ink); color:#fff; }
.svc--note:hover{ border-color:var(--amber); }
.svc--note h3{ margin-top:0; color:var(--amber); }
.svc--note p{ color:var(--muted-dark); }
.svc--note a{ display:inline-block; margin-top:10px; color:#fff; font-weight:600; }
.svc--note a:hover{ color:var(--amber); }

/* Platform scope note under the service cards */
.platforms{
  margin-top:32px; padding-top:24px; border-top:1px solid #dedad0;
  max-width:760px; font-size:15px; line-height:1.65; color:var(--muted-light);
}
.platforms strong{ color:var(--ink-text); font-weight:600; }

/* ============================================================
   3. FEATURED CASE — ENTECO
   ============================================================ */
.case__head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:48px; margin-bottom:34px;
}
.case__head h2{ font-size:clamp(28px, 3.4vw, 46px); letter-spacing:-.02em; }
.case__lede{ margin-top:18px; max-width:640px; font-size:16.5px; line-height:1.65; color:var(--muted-dark); }
/* No padding or border: the logo file carries its own dark ground, so the
   image edge IS the card edge and there is no box-inside-a-box. */
.case__logo{ flex:none; border-radius:10px; overflow:hidden; line-height:0; }
.case__logo img{ width:220px; height:auto; }
@media (max-width:1023px){
  .case__head{ flex-direction:column-reverse; gap:28px; align-items:flex-start; }
  .case__logo img{ width:170px; }
}

/* Scope chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:56px; }
.chips span{
  font-size:12.5px; font-weight:500; padding:8px 14px;
  border:1px solid #2b2b2b; border-radius:40px; color:#ddd;
}

/* Verified-number strip. Every figure here is legible in a screenshot
   further down the section — keep it that way. */
.stats{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
  padding:32px 0 8px; margin-bottom:56px;
  border-top:1px solid #232323; border-bottom:1px solid #232323;
}
.stat strong{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(24px, 2.4vw, 34px); letter-spacing:-.02em; color:var(--amber);
  margin-bottom:10px;
}
.stat__arrow{ color:#5c5c59; font-weight:400; }
.stat span{ font-size:13.5px; line-height:1.5; color:var(--muted-dark); }
@media (max-width:900px){ .stats{ grid-template-columns:1fr 1fr; gap:28px 24px; } }
@media (max-width:439px){ .stats{ grid-template-columns:1fr; } }

/* Sub-heading inside a case section */
.case__h3{
  font-size:13px; font-family:var(--font-body); font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--muted-dark);
  margin-bottom:18px;
}

/* Before / after pairs */
/* align-items:start so a shorter screenshot keeps its own height instead of
   stretching into a half-empty card next to a taller one. */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px; align-items:start; }
.ba--tight{ margin-bottom:56px; }
.ba__item{
  position:relative; margin:0;
  background:#111; border:1px solid #1f1f1f; border-radius:12px;
  overflow:hidden;
}
.ba__item img{ width:100%; height:auto; cursor:zoom-in; }
.ba__item figcaption{
  padding:16px 20px 18px; font-size:13.5px; line-height:1.55; color:var(--muted-dark);
}
.tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--font-body); font-weight:600; font-size:10.5px;
  letter-spacing:1.2px; text-transform:uppercase;
  padding:6px 11px; border-radius:4px;
}
.tag--before{ background:rgba(10,10,10,.82); color:var(--muted-hero); border:1px solid #3a3a3a; }
.tag--after{ background:var(--amber); color:#0a0a0a; }
/* Stacked below desktop: side by side, each phone screenshot renders about
   330px wide and the numbers inside it stop being readable. */
@media (max-width:1023px){ .ba{ grid-template-columns:1fr; } }

/* A screenshot of a reel carries Instagram's own play and view chrome, which
   at a glance reads as a real player. The tag says what it actually is, and
   the tile is dimmed slightly until hover so it reads as evidence, not UI. */
.shot-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--font-body); font-size:10px; font-weight:600;
  letter-spacing:.9px; text-transform:uppercase;
  padding:5px 9px; border-radius:3px;
  background:rgba(10,10,10,.72); color:#cfcdc6;
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(3px); pointer-events:none;
}
.section--light .shot-tag{ background:rgba(10,10,10,.6); color:#eae8e2; }
.proof__item{ position:relative; }
.proof__item img{ opacity:.94; transition:opacity .2s ease; }
.proof__item:hover img{ opacity:1; }

.case__h3-note{
  font-family:var(--font-body); font-weight:400; text-transform:none;
  letter-spacing:0; color:#6e6c66;
}

/* ---- Performance screenshots (insights + reel view counts) ----
   The insights screenshot is tall and the reel strips are wide, so they
   sit side by side rather than in equal grid cells. */
.proof{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:24px;
  align-items:start; margin-bottom:56px;
}
.proof__stack{ display:flex; flex-direction:column; gap:24px; }
.proof__item{
  margin:0; border-radius:12px; overflow:hidden;
  background:#111; border:1px solid #1f1f1f;
}
.proof__item img{ width:100%; height:auto; cursor:zoom-in; }
.proof__item figcaption{ padding:14px 18px; font-size:13px; color:var(--muted-dark); }
.proof__note{
  font-family:var(--font-display); font-size:16px; line-height:1.45; color:#fff;
  padding-top:4px;
}
@media (max-width:900px){ .proof{ grid-template-columns:1fr; } }

/* ---- Proof on video (Enteco): two video tiles plus the client's note ---- */
.social-proof{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  align-items:start; margin-bottom:56px;
}
.social-proof__item{
  margin:0; border-radius:12px; overflow:hidden;
  background:#111; border:1px solid #1f1f1f;
}
.social-proof__item img{ width:100%; height:auto; cursor:zoom-in; }
.social-proof__item video{
  width:100%; aspect-ratio:9/16; height:auto;
  display:block; background:#000; object-fit:cover;
}
.social-proof__item figcaption{
  padding:16px 18px; font-size:13px; line-height:1.55; color:var(--muted-dark);
}
.social-proof__item figcaption strong{
  display:block; color:#fff; font-family:var(--font-display);
  font-size:14px; margin-bottom:6px;
}
.social-proof__note p{ font-size:15px; line-height:1.65; color:var(--muted-dark); }
.social-proof__email{
  margin:20px 0; border-radius:10px; overflow:hidden; border:1px solid #1f1f1f;
}
.social-proof__email img{ width:100%; cursor:zoom-in; }
.quote__text{
  margin:0; font-family:var(--font-display); font-size:clamp(16px, 1.5vw, 19px);
  line-height:1.45; color:#fff; text-wrap:balance;
}
.quote__by{ margin-top:16px; font-size:13px; color:var(--muted-dark); }
@media (max-width:1023px){
  .social-proof{ grid-template-columns:1fr 1fr; }
  .social-proof__note{ grid-column:1 / -1; }
}
@media (max-width:539px){ .social-proof{ grid-template-columns:1fr; } }

/* ---- Ad creatives ----
   Deliberately a small block: this page is not an ads case study. */
.creatives{ display:grid; grid-template-columns:1fr 1fr 1.6fr; gap:24px; align-items:center; }
.creative{ margin:0; border-radius:12px; overflow:hidden; background:#111; border:1px solid #1f1f1f; }
.creative img{ width:100%; height:auto; cursor:zoom-in; }
.creative figcaption{
  padding:14px 16px; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted-dark);
}
.creatives__note{ font-size:15.5px; line-height:1.65; color:var(--muted-dark); }
@media (max-width:900px){
  .creatives{ grid-template-columns:1fr 1fr; }
  .creatives__note{ grid-column:1 / -1; }
}
/* Phones: two-up puts each creative at ~154px, where the offer text baked into
   it stops being readable. One per row instead. */
@media (max-width:539px){ .creatives{ grid-template-columns:1fr; } }

/* ---- Delivered video (Ecoline). preload="none" in the markup keeps
   these out of the initial page load. ---- */
.vid-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--card-gap); margin-bottom:44px; }
.vid{
  margin:0; border-radius:12px; overflow:hidden;
  background:#0a0a0a; border:1px solid #e5e3dc;
}
.vid video{
  width:100%; aspect-ratio:9/16; height:auto;
  display:block; background:#0a0a0a; object-fit:cover;
}
.vid figcaption{ padding:14px 16px; font-size:13px; color:var(--muted-light); background:#fff; }
@media (max-width:767px){
  .vid-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .vid figcaption{ padding:10px 12px; font-size:12px; }
}
@media (max-width:439px){ .vid-grid{ grid-template-columns:1fr; } }

/* ============================================================
   4. SECONDARY CASE — ECOLINE
   ============================================================ */
.scope{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:44px; }
.scope__col{ background:#fff; border:1px solid #e5e3dc; border-radius:12px; padding:28px; }
.scope__col--muted{ background:transparent; border-style:dashed; }
.scope__col h3{ font-size:16px; margin-bottom:18px; }
.ticks li{
  position:relative; padding-left:26px; margin-bottom:12px;
  font-size:15px; line-height:1.55;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:7px;
  width:12px; height:7px; border-left:2px solid var(--amber-deep);
  border-bottom:2px solid var(--amber-deep); transform:rotate(-45deg);
}
.ticks--dim li{ color:var(--muted-light); }
.ticks--dim li::before{ border-color:#b5b2a8; }
@media (max-width:767px){ .scope{ grid-template-columns:1fr; } }

.case2__close{
  margin-top:40px; max-width:720px;
  font-family:var(--font-display); font-size:clamp(17px, 1.9vw, 22px); line-height:1.4;
}

/* ---- Ecoline results ----
   The number is the claim; the screenshot is the receipt. So the figure is set
   large and the screenshot sits small beside it rather than filling the row. */
.results{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.result{
  display:grid; grid-template-columns:1fr auto; gap:28px;
  align-items:start;
  background:#fff; border:1px solid #e5e3dc; border-radius:12px; padding:30px;
}
.result__num{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(40px, 4.6vw, 58px); line-height:1; letter-spacing:-.03em;
  color:var(--ink-text);
}
.result__label{
  margin-top:8px; font-family:var(--font-display); font-size:15px;
  color:var(--amber-deep);
}
.result__note{
  margin-top:14px; font-size:14px; line-height:1.6; color:var(--muted-light);
  max-width:34ch;
}
.result__shot{ margin:0; width:96px; flex:none; }
.result__shot img{
  width:100%; height:auto; border-radius:6px; cursor:zoom-in;
  border:1px solid #ddd9cf; opacity:.9; transition:opacity .2s ease;
}
.result__shot:hover img{ opacity:1; }
.result__shot figcaption{
  margin-top:7px; font-size:9.5px; font-weight:600; letter-spacing:.9px;
  text-transform:uppercase; color:#8a877f; text-align:center;
}
@media (max-width:900px){ .results{ grid-template-columns:1fr; } }
@media (max-width:479px){
  .result{ padding:24px; gap:18px; }
  .result__shot{ width:74px; }
}

/* ============================================================
   5. CONTENT SHOWCASE
   ============================================================ */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.filter{
  font-family:var(--font-body); font-size:13px; font-weight:600;
  padding:10px 18px; border-radius:40px; cursor:pointer;
  background:transparent; border:1px solid #cfccc2; color:var(--muted-light);
  transition:all .18s ease;
}
.filter:hover{ border-color:var(--amber-deep); color:var(--ink-text); }
.filter.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* Masonry via CSS columns — keeps mixed aspect ratios tidy without JS.
   Three columns at desktop: nine tiles fill them evenly, and each tile stays
   big enough to judge the content by. */
.masonry{ column-count:3; column-gap:var(--card-gap); }
/* Two columns from tablet down. Three at 768px shrinks the designed stories
   to the point their text stops reading; one column makes the section endless. */
@media (max-width:1023px){ .masonry{ column-count:2; } }
@media (max-width:767px){ .masonry{ column-gap:12px; } .tile{ margin-bottom:12px; } }
/* Phones: two columns leaves each tile ~160px, which is fine for a reel still
   but too small to read the copy designed into a story. Stories therefore run
   full width; reels and photos stay two-up. */
@media (max-width:539px){
  .tile[data-cat="stories"]{ column-span:all; max-width:100%; }
}

.tile{
  position:relative; margin:0 0 var(--card-gap);
  break-inside:avoid; border-radius:12px; overflow:hidden;
  background:#fff; border:1px solid #ddd9cf;
}
.tile img{ width:100%; height:auto; cursor:zoom-in; }
.tile__cat{
  position:absolute; top:12px; left:12px;
  font-size:10.5px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase;
  background:rgba(10,10,10,.78); color:#fff; padding:5px 10px; border-radius:4px;
  backdrop-filter:blur(4px);
}
.tile[hidden]{ display:none; }

/* ============================================================
   6. WHY IT MATTERS
   ============================================================ */
.why__grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.why__img{ margin:0; border-radius:14px; overflow:hidden; }
.why__img img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.why__copy h2{ font-size:clamp(25px, 2.9vw, 38px); letter-spacing:-.015em; }
.why__lede{ margin-top:18px; font-size:16.5px; line-height:1.65; color:var(--muted-light); }
.why__list{ margin-top:28px; }
.why__list li{
  padding:16px 0; border-top:1px solid #dedad0;
  font-size:15px; line-height:1.6; color:var(--muted-light);
}
.why__list li strong{ color:var(--ink-text); }
@media (max-width:1023px){
  .why__grid{ grid-template-columns:1fr; gap:36px; }
  .why__img img{ aspect-ratio:16/10; }
}

/* ============================================================
   7. FINAL CTA
   ============================================================ */
.cta__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; }
.cta h2{ font-size:clamp(30px, 3.6vw, 48px); letter-spacing:-.02em; }
.cta__lede{ margin-top:20px; max-width:520px; font-size:16.5px; line-height:1.65; color:var(--muted-dark); }
.cta__marks{ margin-top:28px; }
.cta__marks li{
  padding:13px 0; border-top:1px solid #232323;
  font-size:14.5px; color:#ddd;
}
.cta__alt{ margin-top:26px; font-size:14px; color:var(--muted-dark); }
.cta__alt a{ color:var(--amber); font-weight:600; }

/* Form card / HubSpot container */
.cta__form{ background:#fff; border-radius:14px; padding:32px; color:var(--ink-text); }
.formcard__title{ font-size:21px; }
.formcard__lede{ margin:12px 0 22px; font-size:15px; line-height:1.6; color:var(--muted-light); }
/* Reserve height so the card doesn't jump when HubSpot injects the form. */
.hs-form-wrap{ min-height:220px; }
.formcard__fallback{
  margin-top:18px; padding-top:16px; border-top:1px solid #e7e4db;
  font-size:13px; color:#7a776f;
}
.formcard__fallback a{ color:var(--amber-deep); font-weight:600; }
/* The HubSpot form renders inside a cross-origin iframe, so its fields and
   submit button cannot be styled from here — those live in HubSpot's own form
   settings. Only the card around it is ours. */
@media (max-width:1023px){
  .cta__grid{ grid-template-columns:1fr; gap:40px; }
  .cta__form{ padding:24px; }
}

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(6,6,6,.94);
  display:flex; align-items:center; justify-content:center; padding:40px;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:88vh; width:auto; border-radius:8px; }
.lightbox__close{
  position:absolute; top:22px; right:26px;
  background:none; border:0; color:#fff; font-size:26px; cursor:pointer; line-height:1;
}
@media (max-width:767px){ .lightbox{ padding:16px; } }

/* ============================================================
   Motion
   Hover and focus transitions only. Nothing on this page starts at
   opacity:0 waiting to be faded in — a page that goes out to
   prospects should never be able to render a blank section because
   an animation or observer did not fire.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* ============================================================
   Marquee bands
   Pure CSS, no dependencies. Each track holds the item set twice
   and translates by half its width, so the loop is seamless.
   ============================================================ */
.mq-band{ overflow:hidden; padding-block:28px; }
.mq-band--dark{ background:var(--ink); color:#fff; border-block:1px solid #1c1c1c; }
.mq-band--warm{ background:var(--warm); color:var(--ink-text); }
.mq-band .mq + .mq{ margin-top:16px; }

.mq{ overflow:hidden; white-space:nowrap; }
.mq__track{ display:inline-block; will-change:transform; animation:mq-left 46s linear infinite; }
.mq--rev .mq__track{ animation-name:mq-right; animation-duration:38s; }
.mq--trades .mq__track{ animation-duration:60s; }
.mq__set{ display:inline-block; }
.mq__i{ display:inline-block; }
.mq__s{ display:inline-block; color:var(--amber); padding-inline:18px; }

.mq--lead .mq__i{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(20px,2.4vw,34px); letter-spacing:-.01em;
}
.mq--sub .mq__i{
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(13px,1.1vw,16px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-hero);
}
.mq--sub .mq__s{ color:var(--border-dark); padding-inline:14px; }
.mq--trades .mq__i{
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(12px,1vw,14px); letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-light);
}
.mq--trades .mq__s{ color:var(--amber-deep); padding-inline:14px; }

@keyframes mq-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes mq-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

.mq:hover .mq__track,
.mq:focus-within .mq__track{ animation-play-state:paused; }

@media (prefers-reduced-motion:reduce){
  .mq__track{ animation:none; }
  .mq{ overflow-x:auto; }
}
@media (max-width:767px){
  .mq-band{ padding-block:20px; }
  .mq__s{ padding-inline:12px; }
}

/* Platforms band: standalone, so it carries a little more weight than
   it did as a second row under the hero, but stays below the services row. */
.mq-band--thin{ padding-block:22px; }
.mq--platforms .mq__track{ animation-name:mq-right; animation-duration:44s; }
.mq--platforms .mq__i{
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(14px,1.4vw,20px); letter-spacing:.16em;
  text-transform:uppercase; color:#fff;
}
.mq--platforms .mq__s{ color:var(--amber); padding-inline:20px; }

/* .platforms was written for the light section it originally lived in.
   It is now reused on dark backgrounds too, where the light rule above
   put grey-on-black text under a near-white divider. */
.section--dark .platforms{ color:var(--muted-hero); border-top-color:#232323; }
.section--dark .platforms strong{ color:#fff; }

/* Rationale paragraph under a numbered decision heading.
   These used to borrow .proof__note / .creatives__note, which are caption
   styles scoped to narrow columns: as full-width body copy they rendered in
   the display face and read as headings. */
.why-note{
  max-width:760px; margin:-4px 0 26px;
  font-family:var(--font-body); font-size:15.5px; line-height:1.65;
  color:var(--muted-light);
}
.section--dark .why-note{ color:var(--muted-dark); }

/* Three cards in a four-column grid left a dangling empty column. */
.grid--three{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:1023px){ .grid--three{ grid-template-columns:1fr; } }