/* =====================================================================
   GLEVITY.COM — Design System  (static build, 2026 redesign)
   Premium · Outdoorsy · Cinematic · Conversion-focused
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Brand palette — charcoal base, alpenglow accent, stone neutrals */
  --ink:        #0e0f11;   /* near-black background */
  --ink-2:      #15171a;   /* raised surface */
  --ink-3:      #1d2024;   /* cards */
  --stroke:     #2a2e33;   /* hairline borders */
  --snow:       #f5f3ee;   /* primary text on dark */
  --stone:      #b9b3a7;   /* muted text */
  --stone-2:    #8a857b;   /* dimmer text */
  --alpen:      #e2622e;   /* alpenglow orange — primary accent / CTA */
  --alpen-2:    #f0894f;   /* hover */
  --pine:       #3c5a4a;   /* secondary, outdoor green */
  --gold:       #d9a441;   /* highlight / "popular" */

  /* Light surfaces (for resume / technical pages) */
  --paper:      #f6f4ef;
  --paper-ink:  #1b1d20;

  --maxw: 1200px;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 18px 50px -20px rgba(0,0,0,.7);
  --shadow-sm: 0 8px 24px -12px rgba(0,0,0,.6);

  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* Deep-link anchors (e.g. /rates/#UGC): offset jump targets so the fixed header
   never covers a section heading. Navigation only — zero visual change. */
[id]{ scroll-margin-top:90px; }
body{
  font-family:var(--font-body);
  color:var(--snow);
  background:var(--ink);
  line-height:1.6;
  font-size:clamp(1rem,.96rem + .25vw,1.075rem);
  overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.04; letter-spacing:.01em; text-transform:uppercase; }
h1{ font-size:clamp(2.6rem,1.6rem + 4.6vw,5.4rem); }
h2{ font-size:clamp(2rem,1.3rem + 2.8vw,3.4rem); }
h3{ font-size:clamp(1.3rem,1.05rem + 1.1vw,1.85rem); }
p{ color:var(--stone); }
.lead{ font-size:clamp(1.1rem,1rem + .6vw,1.4rem); color:var(--snow); font-weight:300; }

/* ---------- Layout helpers ---------- */
.wrap{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; }
.wrap-wide{ width:min(100% - 1.6rem, 1480px); margin-inline:auto; }
.section{ padding:clamp(3.5rem,6vw,7rem) 0; }
.section-sm{ padding:clamp(2.5rem,4vw,4rem) 0; }
.center{ text-align:center; }
.eyebrow{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.28em;
  font-size:.78rem; color:var(--alpen); font-weight:500; display:inline-block; margin-bottom:.9rem;
}
.muted{ color:var(--stone-2); }
.accent{ color:var(--alpen); }
.maxch{ max-width:62ch; }
.stack > * + *{ margin-top:1rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.95rem 1.6rem; border-radius:999px;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em;
  font-weight:500; font-size:.95rem; line-height:1;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  will-change:transform;
}
.btn--primary{ background:var(--alpen); color:#fff; box-shadow:0 10px 30px -10px rgba(226,98,46,.6); }
.btn--primary:hover{ background:var(--alpen-2); transform:translateY(-2px); }
.btn--ghost{ border:1.5px solid rgba(245,243,238,.4); color:var(--snow); }
.btn--ghost:hover{ border-color:var(--snow); background:rgba(245,243,238,.07); transform:translateY(-2px); }
.btn--dark{ background:var(--ink-3); color:var(--snow); border:1px solid var(--stroke); }
.btn--dark:hover{ background:#23272c; transform:translateY(-2px); }
.btn--block{ width:100%; justify-content:center; }
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(14,15,17,.86); backdrop-filter:blur(12px);
  border-bottom-color:var(--stroke);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; font-size:1.35rem; }
.brand .dot{ color:var(--alpen); }

/* Header brand = Glevity logo image (full on desktop, letter mark on mobile).
   Text stays in the DOM (text-indent off-screen) for SEO + screen readers. */
.site-header .brand{
  display:inline-block; width:92px; height:42px;
  background:url(../assets/img/logo-full.png) left center / contain no-repeat;
  text-indent:-9999px; white-space:nowrap; overflow:hidden;
}
@media (max-width:760px){
  .site-header .brand{ width:40px; height:40px; background-image:url(../assets/img/logo-letter.png); }
}
.nav-links{ display:flex; align-items:center; gap:1.45rem; }
.nav-links a{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em;
  font-size:.88rem; color:var(--stone); font-weight:400; transition:color .2s; position:relative; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--snow); }
.nav-links a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--alpen); transition:width .25s var(--ease); }
.nav-links a:not(.btn):hover::after{ width:100%; }
.nav-cta{ padding:.62rem 1.15rem; }
.nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:24px; height:2px; background:var(--snow); position:relative; transition:.25s var(--ease); }
.nav-toggle span::before{ position:absolute; top:-7px; } .nav-toggle span::after{ position:absolute; top:7px; }
.nav-open .nav-toggle span{ background:transparent; }
.nav-open .nav-toggle span::before{ top:0; transform:rotate(45deg); }
.nav-open .nav-toggle span::after{ top:0; transform:rotate(-45deg); }

.trust-ribbon{ background:var(--ink-2); border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke); }
.trust-ribbon ul{ display:flex; flex-wrap:wrap; gap:.5rem 1.8rem; justify-content:center; padding:.7rem 0; }
.trust-ribbon li{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em;
  font-size:.72rem; color:var(--stone-2); }
.trust-ribbon li::before{ content:"▲"; color:var(--alpen); font-size:.55rem; margin-right:.5rem; vertical-align:middle; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero--short{ min-height:72vh; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media video, .hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(14,15,17,.6) 0%, rgba(14,15,17,.3) 35%, rgba(14,15,17,.96) 100%); }

/* ---------- Auto-cycling crossfade (hero headers + portfolio walls) ---------- */
.cycle{ position:relative; width:100%; height:100%; overflow:hidden; }
.cycle__item{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease); }
.cycle__item.is-active{ opacity:1; }
.cycle__item img, .cycle__item video{ width:100%; height:100%; object-fit:cover; display:block; }
/* cycling tile sized like a gallery cell */
.cycle--tile{ aspect-ratio:4/3; border-radius:var(--radius-sm); }
/* logo cycle: centered, contained (no crop), on a neutral panel */
.cycle--logos{ background:var(--ink-2); border:1px solid var(--stroke); border-radius:var(--radius); }
.cycle--logos .cycle__item{ display:flex; align-items:center; justify-content:center; padding:2rem; }
.cycle--logos .cycle__item img{ width:auto; height:auto; max-width:64%; max-height:62%; object-fit:contain; }
.hero__inner{ padding-bottom:clamp(3rem,7vh,6rem); padding-top:8rem; }
.hero h1{ max-width:16ch; text-shadow:0 2px 30px rgba(0,0,0,.5); }
.hero .lead{ max-width:48ch; margin-top:1.1rem; }
.hero__tagline{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em;
  font-size:clamp(1rem,.9rem + .6vw,1.5rem); color:var(--snow); margin-top:.8rem; }
.hero__tagline b{ color:var(--alpen); font-weight:600; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }
.hero__creds{ display:flex; flex-wrap:wrap; gap:.5rem .65rem; margin-top:1.6rem; }
.chip{ display:inline-flex; align-items:center; gap:.45rem; font-size:.76rem; letter-spacing:.04em;
  color:var(--stone); background:rgba(14,15,17,.5); border:1px solid var(--stroke); border-radius:999px;
  padding:.4rem .8rem; backdrop-filter:blur(4px); }
.chip b{ color:var(--snow); font-weight:600; }

/* ---------- Tier 1 quick-hit bar ---------- */
.quickbar{ background:var(--ink-2); border-bottom:1px solid var(--stroke); }
.quickbar__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.quickbar a{ display:flex; align-items:center; justify-content:center; gap:.6rem; text-align:center;
  padding:1.15rem 1rem; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em;
  font-size:.92rem; color:var(--stone); border-right:1px solid var(--stroke); transition:.25s var(--ease); }
.quickbar a:last-child{ border-right:0; }
.quickbar a:hover{ background:var(--alpen); color:#fff; }
.quickbar a .arr{ opacity:0; transform:translateX(-6px); transition:.25s var(--ease); }
.quickbar a:hover .arr{ opacity:1; transform:translateX(0); }
.quickbar a .qlabel{ display:inline-block; transition:transform .25s var(--ease); }
.quickbar a:hover .qlabel{ transform:translateX(-6px); }

/* ---------- Tier 2 revenue grid ---------- */
.revgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.6rem,1.4vw,1rem); }
.revtile{ position:relative; min-height:clamp(220px,30vw,340px); border-radius:var(--radius); overflow:hidden;
  display:flex; align-items:flex-end; isolation:isolate; }
.revtile video, .revtile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform .6s var(--ease); }
.revtile::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(14,15,17,.1), rgba(14,15,17,.85)); }
.revtile:hover video, .revtile:hover img{ transform:scale(1.06); }
.revtile__body{ padding:clamp(1.1rem,2.2vw,1.8rem); width:100%; }
.revtile__label{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.3rem,1rem+1.4vw,2rem);
  line-height:1; color:#fff; }
.revtile__anchor{ color:var(--gold); font-size:.9rem; letter-spacing:.04em; margin-top:.35rem; }
.revtile__go{ position:absolute; top:1.1rem; right:1.1rem; width:38px; height:38px; border-radius:999px;
  background:rgba(14,15,17,.6); border:1px solid var(--stroke); display:flex; align-items:center; justify-content:center;
  transition:.25s var(--ease); }
.revtile:hover .revtile__go{ background:var(--alpen); border-color:var(--alpen); }

/* ---------- Generic cards / grids ---------- */
.grid{ display:grid; gap:var(--gap); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.card{ background:var(--ink-3); border:1px solid var(--stroke); border-radius:var(--radius); padding:1.6rem;
  box-shadow:var(--shadow-sm); }
.service-card{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:300px; display:flex; align-items:flex-end; }
.service-card img,.service-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s var(--ease); }
.service-card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(14,15,17,.15),rgba(14,15,17,.8)); }
.service-card:hover img,.service-card:hover video{ transform:scale(1.05); }
.service-card__body{ padding:1.4rem; }

/* ---------- Pricing ---------- */
.pricing{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); align-items:stretch; }
.price-card{ position:relative; background:var(--ink-3); border:1px solid var(--stroke); border-radius:var(--radius);
  padding:1.8rem 1.5rem; display:flex; flex-direction:column; transition:.3s var(--ease); }
.price-card:hover{ transform:translateY(-4px); border-color:#3a4047; box-shadow:var(--shadow); }
.price-card.is-popular{ border-color:var(--alpen); box-shadow:0 0 0 1px var(--alpen), var(--shadow); }
.price-card__tag{ position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--alpen); color:#fff; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.1em; font-size:.7rem; padding:.3rem .8rem; border-radius:999px; }
.price-card__name{ font-family:var(--font-display); text-transform:uppercase; font-size:1.2rem; color:var(--snow); }
.price-card__price{ font-family:var(--font-display); font-size:2.6rem; color:#fff; line-height:1; margin:.5rem 0 .2rem; }
.price-card__price small{ font-size:.95rem; color:var(--stone-2); letter-spacing:.02em; }
.price-card__meta{ font-size:.82rem; color:var(--alpen); letter-spacing:.05em; text-transform:uppercase; margin-bottom:1rem; }
.price-card ul.feat{ display:grid; gap:.55rem; margin:.4rem 0 1.4rem; }
.price-card ul.feat li{ font-size:.92rem; color:var(--stone); padding-left:1.5rem; position:relative; }
.price-card ul.feat li::before{ content:"✓"; position:absolute; left:0; color:var(--pine); font-weight:700; }
.price-card .btn{ margin-top:auto; }

/* Clean B2B rate table */
.rate-table{ width:100%; border-collapse:collapse; background:var(--ink-3); border-radius:var(--radius); overflow:hidden; }
.rate-table th,.rate-table td{ padding:1rem 1.2rem; text-align:left; border-bottom:1px solid var(--stroke); }
.rate-table thead th{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; color:var(--stone); background:var(--ink-2); }
.rate-table td.price{ font-family:var(--font-display); font-size:1.3rem; color:#fff; }
.rate-table tr:last-child td{ border-bottom:0; }

/* ---------- Spec badges ---------- */
.badges{ display:flex; flex-wrap:wrap; gap:.6rem; }
.badge{ font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--snow);
  border:1px solid var(--stroke); background:var(--ink-2); border-radius:8px; padding:.45rem .8rem; }
.badge::before{ content:"●"; color:var(--pine); margin-right:.45rem; font-size:.6rem; vertical-align:middle; }

/* ---------- Gallery ---------- */
.gallery{ columns:3; column-gap:.8rem; }
.gallery img,.gallery video{ width:100%; border-radius:var(--radius-sm); margin-bottom:.8rem; break-inside:avoid; }
.gallery--2{ columns:2; }
.actiongrid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:.6rem; }
.actiongrid >*{ border-radius:var(--radius-sm); overflow:hidden; }
.actiongrid img,.actiongrid video{ width:100%; height:100%; object-fit:cover; }
.actiongrid .tall{ grid-row:span 2; } .actiongrid .wide{ grid-column:span 2; }
.phonewall{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.phoneframe{ aspect-ratio:9/16; border-radius:18px; overflow:hidden; border:3px solid var(--ink-3); box-shadow:var(--shadow-sm); background:#000; }
.phoneframe video,.phoneframe img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Split feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.split--rev .split__media{ order:2; }
.split__media img,.split__media video{ border-radius:var(--radius); width:100%; box-shadow:var(--shadow); }

/* ---------- Reviews ---------- */
.reviews{ background:var(--ink-2); }
.reviews__track{ display:flex; gap:1rem; overflow-x:auto; padding:.5rem .2rem 1.5rem; scroll-snap-type:x mandatory; }
.review{ flex:0 0 clamp(260px,80vw,340px); scroll-snap-align:start; background:var(--ink-3);
  border:1px solid var(--stroke); border-radius:var(--radius); padding:1.4rem; }
.review .stars{ color:var(--gold); letter-spacing:.15em; margin-bottom:.6rem; }
.review p{ color:var(--snow); font-size:.95rem; }
.review .who{ margin-top:.9rem; font-weight:600; color:var(--stone); font-size:.85rem; }

/* ---------- Quote band / forms ---------- */
.quoteband{ background:linear-gradient(120deg,var(--ink-2),var(--ink-3)); border-top:1px solid var(--stroke); }
.form{ display:grid; gap:.9rem; max-width:520px; }
.form label{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--stone); }
.form input,.form textarea,.form select{ width:100%; background:var(--ink); border:1px solid var(--stroke);
  border-radius:10px; padding:.85rem 1rem; color:var(--snow); font:inherit; transition:border-color .2s; }
.form input:focus,.form textarea:focus,.form select:focus{ outline:none; border-color:var(--alpen); }
.form textarea{ min-height:120px; resize:vertical; }
.form .hint{ font-size:.78rem; color:var(--stone-2); }

/* Click-to-reveal (anti-scraper) link rows */
.linkstack{ display:grid; gap:.7rem; max-width:460px; margin-inline:auto; }
.linkrow{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--ink-3); border:1px solid var(--stroke); border-radius:12px; padding:1rem 1.2rem;
  transition:.2s var(--ease); width:100%; text-align:left; }
.linkrow:hover{ border-color:var(--alpen); transform:translateY(-2px); }
.linkrow .ico{ width:26px; text-align:center; color:var(--alpen); }
.linkrow .lab{ flex:1; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em; font-size:.95rem; }
/* reversed-text obfuscation: real value stored reversed; CSS flips it visually */
.revealed .obf{ unicode-bidi:bidi-override; direction:rtl; }

/* ---------- Footer ---------- */
.site-footer{ background:#0b0c0e; border-top:1px solid var(--stroke); padding:clamp(2.5rem,5vw,4rem) 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.site-footer h4{ font-size:.95rem; letter-spacing:.1em; color:var(--snow); margin-bottom:1rem; }
.site-footer a{ display:block; color:var(--stone-2); font-size:.9rem; padding:.28rem 0; transition:color .2s; }
.site-footer a:hover{ color:var(--alpen); }
.footer-brand p{ font-size:.9rem; max-width:32ch; }
.footer-bottom{ border-top:1px solid var(--stroke); margin-top:2.5rem; padding-top:1.5rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--stone-2); font-size:.82rem; }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  grid-template-columns:1fr 1fr; gap:.5rem; padding:.6rem; background:rgba(11,12,14,.95);
  backdrop-filter:blur(10px); border-top:1px solid var(--stroke); }
.mobile-cta .btn{ padding:.8rem; font-size:.85rem; }

/* ---------- noindex resume page ---------- */
.noindex-banner{ background:var(--gold); color:#141414; text-align:center; font-size:.82rem;
  padding:.5rem 1rem; letter-spacing:.03em; }
.resume{ background:var(--paper); color:var(--paper-ink); }
.resume h1,.resume h2,.resume h3{ color:var(--paper-ink); }
.resume .card{ background:#fff; border-color:#e3ded3; color:var(--paper-ink); box-shadow:0 6px 20px -12px rgba(0,0,0,.25); }
.resume p{ color:#3c3f44; }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
/* Staggered reveal — gallery/grid children assemble in sequence on scroll.
   (.reveal-stagger + per-child transition-delay are applied by js/main.js.) */
.reveal-stagger > *{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; } .split--rev .split__media{ order:0; }
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .gallery{ columns:2; }
  .actiongrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .nav-links{ position:fixed; inset:0 0 0 auto; width:min(82vw,360px); flex-direction:column;
    align-items:flex-start; justify-content:flex-start; gap:.3rem; padding:6rem 2rem 2rem;
    background:var(--ink-2); border-left:1px solid var(--stroke); transform:translateX(105%);
    transition:transform .35s var(--ease); height:100dvh; overflow:auto; }
  .nav-open .nav-links{ transform:none; }
  .nav-links a{ font-size:1.1rem; padding:.5rem 0; width:100%; }
  .nav-links a:not(.btn)::after{ display:none; }
  .nav-cta{ margin-top:.6rem; }
  .nav-toggle{ display:flex; z-index:101; }
  .quickbar__grid{ grid-template-columns:1fr 1fr; }
  .quickbar a:nth-child(2){ border-right:0; }
  .quickbar a:nth-child(1),.quickbar a:nth-child(2){ border-bottom:1px solid var(--stroke); }
  .revgrid{ grid-template-columns:1fr; }
  .mobile-cta{ display:grid; }
  body{ padding-bottom:4rem; }
}
@media (max-width:520px){
  .grid-3,.grid-4{ grid-template-columns:1fr; }
  .gallery{ columns:1; } .actiongrid{ grid-template-columns:1fr 1fr; grid-auto-rows:140px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; }
  .reveal-stagger > *{ opacity:1; transform:none; }
}

/* ===== Client logo + name marquee — infinite auto-scroll, white, hover-pause ===== */
.logo-marquee{ margin:0 0 2.8rem; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.logo-marquee__track{ display:flex; align-items:center; gap:3.6rem; width:max-content;
  animation:logo-scroll 190s linear infinite; will-change:transform; }
.logo-marquee:hover .logo-marquee__track{ animation-play-state:paused; }
.logo-marquee img{ height:40px; width:auto; flex:0 0 auto; display:block;
  filter:brightness(0) invert(1); opacity:.6; transition:opacity .3s var(--ease); }
.logo-marquee img:hover{ opacity:1; }
/* text-name clients (no white logo found) — varied typography, consistent white */
.logo-marquee .cl-name{ flex:0 0 auto; white-space:nowrap; color:#fff; opacity:.5;
  transition:opacity .3s var(--ease); line-height:1; }
.logo-marquee .cl-name:hover{ opacity:1; }
.cl-name--a{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em; font-weight:600; font-size:1.1rem; }
.cl-name--b{ font-family:var(--font-body); font-weight:300; font-style:italic; font-size:1.35rem; }
.cl-name--c{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.26em; font-weight:400; font-size:.84rem; }
.cl-name--d{ font-family:var(--font-body); font-weight:600; font-size:1.08rem; letter-spacing:.02em; }
@keyframes logo-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:640px){ .logo-marquee img{ height:30px; } .logo-marquee__track{ gap:2.6rem; }
  .cl-name--a,.cl-name--d{ font-size:.95rem; } .cl-name--b{ font-size:1.1rem; } .cl-name--c{ font-size:.76rem; } }