/* ==========================================================================
   HERO — split layout: fixed left text panel (title/description animate in
   once, then rotate in place) | right auto-rotating, numbered 3-frame image
   collage (all 3 frames always show the same current service).
   + SERVICES TICKER marquee directly beneath the hero.
   + SEO content section — reuses the same numbered image-frame collage
     pattern, statically (no rotation).
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  color: var(--text-strong);
  background: var(--surface-raised, #fff);
}
@media (min-width: 1024px) { .hero { min-height: 38rem; } }

/* ---- Split inner layout: stacked on phones/tablets, side-by-side from
   1024px up. Both panels are visible at every width — only their internal
   sizing changes. ---- */
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .hero-split { grid-template-columns: 1fr 1fr; min-height: 38rem; }
}

/* Left: text panel */
.hero-text-panel {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 1.25rem 2rem;
  background: transparent;
}
@media (min-width: 380px) { .hero-text-panel { padding: 3rem 1.5rem 2.25rem; } }
@media (min-width: 640px) { .hero-text-panel { padding: 4rem 3rem 2.5rem; } }
@media (min-width: 1024px) { .hero-text-panel { padding: 4rem 3.5rem 4rem 0; } }

.hero-slide-content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
}

.hero-slide-content .eyebrow {
  background: rgba(239,68,68,0.08);
  color: var(--red-700);
  border-color: rgba(239,68,68,0.25);
  padding: 0.3rem 0.65rem;
  letter-spacing: 0.04em;
  font-size: 0.66rem;
  max-width: 225px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Dark theme's background here is a dark red-tinted blend, not the
   near-black page surface, so it needs its own lighter-red override
   (same reasoning as .eyebrow's dark variant in base.css). */
html[data-theme="dark"] .hero-slide-content .eyebrow { color: #fca5a5; }

.hero-slide-content h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  font-size: 1.65rem; color: var(--text-strong); margin: 1rem 0 0.9rem; max-width: 30rem;
  /* Reserve exactly 3 lines' worth of height (in em, so it scales with each
     breakpoint's font-size) so a shorter/longer rotating headline never
     shifts the buttons/stats below it. */
  min-height: 3.3em;
}
@media (min-width: 380px) { .hero-slide-content h1 { font-size: 1.85rem; } }
@media (min-width: 480px) { .hero-slide-content h1 { font-size: 2.1rem; } }
@media (min-width: 640px) { .hero-slide-content h1 { font-size: 2.6rem; } }
@media (min-width: 1024px) { .hero-slide-content h1 { font-size: 2.75rem; } }
@media (min-width: 1280px) { .hero-slide-content h1 { font-size: 3rem; } }
.hero-slide-content h1 .accent {
  background: linear-gradient(to right, var(--red-500), var(--rose-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero-sub {
  font-size: 0.9rem; color: var(--text-muted); max-width: 30rem; line-height: 1.7;
  min-height: 5.1em;
}
@media (min-width: 480px) { .hero-sub { font-size: 0.97rem; } }

/* Rotating text: entrance handled once by [data-anim]; ongoing rotation is
   driven by JS toggling inline opacity/transform on this inner span. */
.hero-rotate-text { display: inline-block; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 1.25rem 0; }
@media (min-width: 480px) { .hero-ctas { gap: 0.85rem; margin: 1.5rem 0; } }
.hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 480px) { .hero-ctas .btn { flex: 0 0 auto; } }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 1.1rem 1.5rem;
  margin-top: 0.6rem; padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
  max-width: 36rem;
}
@media (min-width: 480px) { .hero-stats { gap: 1.5rem 2rem; margin-top: 0.75rem; padding-top: 1.25rem; } }
.hero-stats strong { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; color: var(--text-strong); }
@media (min-width: 480px) { .hero-stats strong { font-size: 1.4rem; } }
.hero-stats span { font-size: 0.68rem; color: var(--text-muted); }
@media (min-width: 480px) { .hero-stats span { font-size: 0.7rem; } }

/* One-time entrance for badge / headline / subtext / ctas / stats — fires
   once on load, since the hero is no longer a multi-slide carousel. */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero [data-anim] { opacity: 0; transform: translateY(24px); animation: heroFadeUp 0.8s cubic-bezier(.16,.84,.44,1) forwards; }
.hero [data-anim="badge"]   { animation-delay: .05s; }
.hero [data-anim="headline"]{ animation-delay: .18s; }
.hero [data-anim="subtext"] { animation-delay: .35s; }
.hero [data-anim="ctas"]    { animation-delay: .52s; }
.hero [data-anim="stats"]   { animation-delay: .68s; }

/* ---- Right: image collage panel — visible at every screen size, sized up
   progressively so it never looks cramped on phones or tiny on ultra-wide
   desktops. ---- */
.hero-image-panel {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 2.5rem;
}
@media (min-width: 380px) { .hero-image-panel { padding: 1.75rem 1.25rem 2.5rem; } }
@media (min-width: 640px) { .hero-image-panel { padding: 2rem; } }
@media (min-width: 1024px) { .hero-image-panel { padding: 2.5rem; } }

.hero-collage { position: relative; z-index: 1; width: 100%; max-width: 19rem; aspect-ratio: 4 / 3.6; }
@media (min-width: 380px)  { .hero-collage { max-width: 21rem; } }
@media (min-width: 480px)  { .hero-collage { max-width: 23rem; } }
@media (min-width: 640px)  { .hero-collage { max-width: 27rem; } }
@media (min-width: 1024px) { .hero-collage { max-width: 29rem; } }
@media (min-width: 1280px) { .hero-collage { max-width: 31rem; } }
@media (min-width: 1600px) { .hero-collage { max-width: 34rem; } }

/* Manual prev/next controls — anchored to the image panel (present at every
   screen size) so they stay consistently placed regardless of how the text
   panel stacks above/beside it. */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  height: 2.1rem; width: 2.1rem; border-radius: 999px;
  background: var(--surface-raised, #fff);
  border: 1px solid var(--border-soft); color: var(--text-strong);
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--shadow-sm);
}
.hero-arrow:hover { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.hero-arrow.prev { left: 0.25rem; }
.hero-arrow.next { right: 0.25rem; }
@media (min-width: 480px) {
  .hero-arrow { height: 2.35rem; width: 2.35rem; font-size: 1.1rem; }
  .hero-arrow.prev { left: 0.5rem; }
  .hero-arrow.next { right: 0.5rem; }
}
@media (min-width: 1024px) {
  .hero-arrow { height: 2.6rem; width: 2.6rem; font-size: 1.2rem; }
  .hero-arrow.prev { left: 0.25rem; }
  .hero-arrow.next { right: 0.25rem; }
}

.hero-frame {
  position: absolute;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 2px solid var(--bg);
  box-shadow: 0 20px 45px -14px rgba(17,24,39,0.32);
  transition: width 0.5s cubic-bezier(.16,.84,.44,1), height 0.5s cubic-bezier(.16,.84,.44,1),
              top 0.5s cubic-bezier(.16,.84,.44,1), left 0.5s cubic-bezier(.16,.84,.44,1),
              transform 0.5s cubic-bezier(.16,.84,.44,1), box-shadow 0.3s ease;
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

.hero-frame.frame-a { z-index: 3; }
.hero-frame.frame-b { z-index: 4; }
.hero-frame.frame-c { z-index: 2; }

/* Frame number badge — every frame in the collage is numbered (01/02/03) so
   it reads as an ordered set of photos for the current service. Reused
   by any image-frame collage on the site (see .seo-frame). */
.frame-num {
  position: absolute;
  top: 0.6rem; left: 0.6rem;
  z-index: 2;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: rgba(17,24,39,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floating stickers — THREE badges per service, spread across visually
   distinct spots (never clustered together). Sticker 1 is the larger
   "headline" badge and always sits in that layout's genuinely open pocket
   (no frame overlap). Stickers 2 and 3 are compact accents that hang at two
   OTHER corners of the collage, on top of the frames (z-index above them,
   with their own card/shadow) — a deliberate floating-badge overlap, not a
   layout bug. top/left below are each badge's CENTER point;
   translate(-50%,-50%) in the animation keyframes centers it on that point.
   Content swaps per service via data-hero-sticker-ico/label (see
   hero-slider.js); the visible markup mirrors the first service. */
.hero-sticker {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 3rem;
  height: 3rem;
  background: var(--surface-raised, #fff);
  border: 1px solid var(--border-soft);
  border-radius: 0.65rem;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.46rem;
  line-height: 1.1;
  color: var(--text-strong);
  text-align: center;
  padding: 0.2rem;
  animation: heroStickerFloat 4.5s ease-in-out infinite;
  transition: top 0.5s cubic-bezier(.16,.84,.44,1), left 0.5s cubic-bezier(.16,.84,.44,1);
}
.hero-sticker .ico { font-size: 1rem; line-height: 1; }
.hero-sticker-2 { animation-delay: 0.6s; }
.hero-sticker-3 { animation-delay: 1.2s; }
/* Sticker label text: blue → purple gradient (matches the reference wordmark treatment). */
.hero-sticker [data-hero-sticker-label] {
  background: linear-gradient(90deg, #3559e9 0%, #7c3aed 55%, #c026d3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Sticker 1 — bigger, the badge that lives in the open pocket. */
.hero-sticker-1 {
  width: 4.4rem;
  height: 4.4rem;
  gap: 0.2rem;
  border-radius: 1rem;
  font-size: 0.62rem;
  padding: 0.35rem;
}
.hero-sticker-1 .ico { font-size: 1.5rem; }

@media (min-width: 480px) {
  .hero-sticker { width: 3.4rem; height: 3.4rem; font-size: 0.5rem; border-radius: 0.75rem; }
  .hero-sticker .ico { font-size: 1.1rem; }
  .hero-sticker-1 { width: 5rem; height: 5rem; font-size: 0.68rem; border-radius: 1.1rem; }
  .hero-sticker-1 .ico { font-size: 1.65rem; }
}
@media (min-width: 1024px) {
  .hero-sticker { width: 3.8rem; height: 3.8rem; font-size: 0.54rem; border-radius: 0.85rem; }
  .hero-sticker .ico { font-size: 1.2rem; }
  .hero-sticker-1 { width: 5.6rem; height: 5.6rem; font-size: 0.74rem; border-radius: 1.25rem; }
  .hero-sticker-1 .ico { font-size: 1.8rem; }
}

@keyframes heroStickerFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-5px); }
}

/* Three collage arrangements — JS cycles the .hero-collage layout-* class on
   every rotation so the frames also change position/orientation, not just
   the photos inside them. Every rule only ever sets top/left (never
   right/bottom) so the swap between layouts transitions smoothly. */
.hero-collage.layout-0 .frame-a { width: 62%; height: 64%; top: 0%;  left: 0%;  transform: rotate(0deg); }
.hero-collage.layout-0 .frame-b { width: 54%; height: 46%; top: 50%; left: 44%; transform: rotate(-2deg); }
.hero-collage.layout-0 .frame-c { width: 50%; height: 44%; top: 0%;  left: 44%; transform: rotate(3deg); }

.hero-collage.layout-1 .frame-a { width: 62%; height: 64%; top: 0%;  left: 38%; transform: rotate(0deg); }
.hero-collage.layout-1 .frame-b { width: 54%; height: 46%; top: 50%; left: 2%;  transform: rotate(2deg); }
.hero-collage.layout-1 .frame-c { width: 50%; height: 44%; top: 0%;  left: 6%;  transform: rotate(-3deg); }

.hero-collage.layout-2 .frame-a { width: 66%; height: 56%; top: 0%;  left: 16%; transform: rotate(-1.5deg); }
.hero-collage.layout-2 .frame-b { width: 52%; height: 44%; top: 48%; left: -2%; transform: rotate(3deg); }
.hero-collage.layout-2 .frame-c { width: 52%; height: 44%; top: 48%; left: 44%; transform: rotate(-2deg); }

/* Sticker anchor points — spread across 3 visually distinct spots per
   layout, never clustered. Sticker 1 (bigger) sits centered in that
   layout's one genuinely open pocket. Stickers 2 and 3 (compact) hang at
   two OTHER, different corners of the collage — deliberately over a frame
   corner, riding above it (z-index) like a floating accent badge. */
.hero-collage.layout-0 .hero-sticker-1 { top: 82%; left: 22%; }  /* open bottom-left pocket under frame-a */
.hero-collage.layout-0 .hero-sticker-2 { top: 4%;  left: 96%; }  /* top-right corner, over frame-c */
.hero-collage.layout-0 .hero-sticker-3 { top: 94%; left: 96%; }  /* bottom-right corner, over frame-b */

.hero-collage.layout-1 .hero-sticker-1 { top: 82%; left: 78%; }  /* open bottom-right pocket, mirrored */
.hero-collage.layout-1 .hero-sticker-2 { top: 4%;  left: 4%;  }  /* top-left corner, over frame-c */
.hero-collage.layout-1 .hero-sticker-3 { top: 94%; left: 4%;  }  /* bottom-left corner, over frame-b */

.hero-collage.layout-2 .hero-sticker-1 { top: 22%; left: 92%; }  /* open top-right pocket beside frame-a */
.hero-collage.layout-2 .hero-sticker-2 { top: 2%;  left: 14%; }  /* top-left corner, over frame-a */
.hero-collage.layout-2 .hero-sticker-3 { top: 94%; left: 2%;  }  /* bottom-left corner, over frame-b */

/* Per-service "modern transition" applied to the primary frame (frame-a) on
   each rotation — a different effect per service index (index % 5). Kept to
   2D opacity/translate/clip-path only: scale()/rotateY() were removed
   because animating them on a child of an overflow:hidden + border-radius
   box that is ALSO mid-resize triggers a browser clipping glitch (the
   image's square corners briefly peek past the rounded frame). */
@keyframes heroTransFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroTransSlide   { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes heroTransSlideUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroTransWipeH   { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes heroTransWipeV   { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

.frame-a img.trans-0 { animation: heroTransFade 0.45s ease both; }
.frame-a img.trans-1 { animation: heroTransSlide 0.45s cubic-bezier(.16,.84,.44,1) both; }
.frame-a img.trans-2 { animation: heroTransSlideUp 0.45s cubic-bezier(.16,.84,.44,1) both; }
.frame-a img.trans-3 { animation: heroTransWipeH 0.45s ease both; }
.frame-a img.trans-4 { animation: heroTransWipeV 0.45s ease both; }

/* Secondary frames (b/c) get a simple, calmer crossfade via inline opacity,
   set directly by JS — no keyframes needed here. */
.hero-frame.frame-b img,
.hero-frame.frame-c img { transition: opacity 0.3s ease; }

/* ---- SEO content section ---- */
.seo-section { background: var(--surface); }
.seo-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .seo-grid { grid-template-columns: 5fr 7fr; gap: 3.5rem; } }

.seo-copy h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  color: var(--text-strong); font-size: 1.5rem; margin: 0.85rem 0 1rem;
}
@media (min-width: 380px) { .seo-copy h2 { font-size: 1.7rem; } }
@media (min-width: 480px) { .seo-copy h2 { font-size: 1.9rem; } }
@media (min-width: 640px) { .seo-copy h2 { font-size: 2.25rem; } }
.seo-copy p { color: var(--text-muted); line-height: 1.75; font-size: 0.92rem; }
@media (min-width: 480px) { .seo-copy p { font-size: 1rem; } }

.seo-media { position: relative; }
.seo-collage { position: relative; width: 100%; max-width: 18rem; margin: 0 auto; aspect-ratio: 4 / 3.6; }
@media (min-width: 380px)  { .seo-collage { max-width: 20rem; } }
@media (min-width: 480px)  { .seo-collage { max-width: 23rem; aspect-ratio: 4 / 3.4; } }
@media (min-width: 640px)  { .seo-collage { max-width: 26rem; } }
@media (min-width: 1024px) { .seo-collage { max-width: 28rem; } }
@media (min-width: 1280px) { .seo-collage { max-width: 30rem; } }

.seo-frame {
  position: absolute;
  border-radius: 1.5rem;
  overflow: hidden;
}
.seo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.seo-frame.frame-1 { width: 62%; height: 64%; top: 0%;  left: 0%;  z-index: 3; transform: rotate(-1.5deg); }
.seo-frame.frame-2 { width: 46%; height: 40%; top: 58%; left: 46%; z-index: 4; transform: rotate(2deg); }
.seo-frame.frame-3 { width: 36%; height: 32%; top: 4%;  left: 58%; z-index: 2; transform: rotate(3deg); }

/* Floating stickers — 2 compact badges over the SEO collage, one in the
   open bottom-left pocket (frame-1 doesn't reach full width/height there),
   one hanging at the top-right corner over frame-3. */
.seo-sticker {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 4rem;
  height: 4rem;
  background: var(--surface-raised, #fff);
  border: 1px solid var(--border-soft);
  border-radius: 0.9rem;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.56rem;
  line-height: 1.1;
  color: var(--text-strong);
  text-align: center;
  padding: 0.3rem;
  transform: translate(-50%, -50%);
  animation: heroStickerFloat 4.5s ease-in-out infinite;
}
.seo-sticker .ico { font-size: 1.2rem; line-height: 1; }
.seo-sticker-1 { top: 82%; left: 22%; animation-delay: 0s; }
.seo-sticker-2 { top: 4%;  left: 96%; animation-delay: 1.5s; }

@media (min-width: 480px) {
  .seo-sticker { width: 4.6rem; height: 4.6rem; font-size: 0.62rem; border-radius: 1rem; }
  .seo-sticker .ico { font-size: 1.35rem; }
}
@media (min-width: 1024px) {
  .seo-sticker { width: 5.2rem; height: 5.2rem; font-size: 0.68rem; border-radius: 1.1rem; }
  .seo-sticker .ico { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .seo-sticker { animation: none !important; }
}

/* ---- Services ticker ---- */
.services-ticker {
  position: relative;
  background: var(--gray-950);
  color: #fff;
  overflow: hidden;
}
html[data-theme="dark"] .services-ticker { background: #000; }

/* Shimmering brand-gradient accent line across the top, replacing a flat border */
.services-ticker::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--red-600), var(--rose-500), var(--red-600));
  background-size: 200% 100%;
  animation: tickerAccentShift 6s linear infinite;
}
@keyframes tickerAccentShift { from { background-position: 0% 0; } to { background-position: -200% 0; } }

/* Overrides the shared .container max-width so the ticker always spans the
   full browser width (edge-to-edge background + content), not just the
   site's centered 1280px column. */
.ticker-inner.container { max-width: none; }
.ticker-inner { display: flex; align-items: center; gap: 1.1rem; height: 3.1rem; }
@media (min-width: 768px) { .ticker-inner { height: 3.4rem; gap: 1.5rem; } }

.ticker-label {
  display: flex; align-items: center; gap: 0.5rem;
  flex-shrink: 0;
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff;
  padding-right: 1.1rem;
  border-right: 1px solid rgba(255,255,255,0.16);
  white-space: nowrap;
}
@media (min-width: 768px) { .ticker-label { font-size: 0.78rem; padding-right: 1.5rem; } }

.ticker-label-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 999px; flex-shrink: 0;
  background: var(--red-500);
  animation: tickerDotPulse 1.8s ease-out infinite;
}
@keyframes tickerDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

.ticker-viewport { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; display: flex; align-items: center; }
.ticker-track { display: flex; align-items: center; gap: 2.5rem; width: max-content; animation: tickerScroll 34s linear infinite; }
.services-ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; font-weight: 700; white-space: nowrap; color: rgba(255,255,255,0.86); }
.ticker-item .dot { color: var(--red-500); font-size: 0.6rem; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Blurred fade-out at both edges of the scrolling viewport, so items ease
   in/out instead of being cut off sharply. */
.ticker-fade {
  position: absolute; top: 0; bottom: 0; width: 2.5rem; z-index: 2; pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
@media (min-width: 768px) { .ticker-fade { width: 4rem; } }
.ticker-fade-left { left: 0; background: linear-gradient(to right, var(--gray-950) 20%, transparent); }
.ticker-fade-right { right: 0; background: linear-gradient(to left, var(--gray-950) 20%, transparent); }
html[data-theme="dark"] .ticker-fade-left { background: linear-gradient(to right, #000 20%, transparent); }
html[data-theme="dark"] .ticker-fade-right { background: linear-gradient(to left, #000 20%, transparent); }


/* ---- Image-free page hero: H1 + a rotating H2 phrase, no banner photo.
   Used at the top of every inner page (About / Services / Industries / Contact
   / all 13 service pages) in place of the old dark hero-compact photo banner. ---- */
.page-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 1.75rem 0 2.75rem;
  background: #ffffff;
}
@media (min-width: 640px) { .page-hero { padding: 2.5rem 0 3.25rem; } }
html[data-theme="dark"] .page-hero {
  background: var(--surface-raised);
}
/* Positioned ancestor for the breadcrumb pill (see .hero-breadcrumb-pill below);
   .page-hero-inner narrows just the copy, not the pill, so the pill can still
   sit at the section's true left edge instead of the narrow column's edge. */
.page-hero .container { position: relative; z-index: 1; }

.page-hero-inner { max-width: 46rem; margin: 0 auto; }
.page-hero .eyebrow { margin-bottom: 1rem; }

.page-hero-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  font-size: 1.8rem; color: var(--text-strong); margin: 12px 0 0.75rem;
}
@media (min-width: 480px) { .page-hero-title { font-size: 2.2rem; } }
@media (min-width: 640px) { .page-hero-title { font-size: 2.65rem; } }

/* min-height reserves ~2 lines at this element's own line-height so
   rotating phrases of different lengths never shift the lede/breadcrumb
   below it (same fixed-height technique used on the home hero headline). */
.page-hero-rotate {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.4;
  font-size: 1.05rem; color: var(--text-muted); margin: 0 0 1.1rem;
  min-height: 2.8em;
}
@media (min-width: 480px) { .page-hero-rotate { font-size: 1.2rem; min-height: 2.6em; } }
@media (min-width: 640px) { .page-hero-rotate { font-size: 1.3rem; } }
.page-hero-rotate .rotate-text {
  display: inline-block;
  color: var(--red-600);
}

/* Contact's H2 forces the rotating phrase onto its own line (see contact.html)
   instead of flowing inline, so on the narrowest phones it can wrap to a 2nd
   line of its own — reserve enough height for 3 lines total there. Sized up
   from the shared .page-hero-rotate default to carry more weight in this hero. */
.contact-hero-light .page-hero-rotate { font-size: 1.35rem; min-height: 4.2em; }
@media (min-width: 480px) { .contact-hero-light .page-hero-rotate { font-size: 1.55rem; min-height: 2.6em; } }
@media (min-width: 640px) { .contact-hero-light .page-hero-rotate { font-size: 1.75rem; } }

.page-hero-lede { color: var(--text-muted); line-height: 1.75; font-size: 0.95rem; max-width: 38rem; margin: 0 auto; }
@media (min-width: 640px) { .page-hero-lede { font-size: 1rem; } }

/* Shared breadcrumb "pill" for every inner-page hero (About/Services/
   Industries/Contact/all 13 service pages). Stays inline — but still
   pill-shaped and left-aligned — on narrow phones where there's no room to
   float it; becomes an absolutely-positioned top-left overlay from tablet
   width up so it doesn't push the rest of the hero content down. Requires a
   `position: relative` ancestor (`.page-hero .container` / `.contact-hero-light
   .container` already provide this). */
.hero-breadcrumb-pill {
  width: fit-content;
  margin: 0 auto 1.5rem 0;
  justify-content: flex-start;
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-size: 0.78rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  animation: heroBreadcrumbIn 0.5s cubic-bezier(.16,.84,.44,1) both;
}
.hero-breadcrumb-pill:hover,
.hero-breadcrumb-pill:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(239, 68, 68, 0.3);
}
@keyframes heroBreadcrumbIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 768px) {
  /* top: 0 lines the pill up with the eyebrow badge that follows it in flow —
     both start at the same offset from the hero's .container top edge. */
  .hero-breadcrumb-pill { position: absolute; top: 0; left: 1.5rem; margin: 0; }
}
@media (min-width: 1024px) {
  .hero-breadcrumb-pill { left: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-breadcrumb-pill { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .services-ticker::before { animation: none !important; }
  .ticker-label-dot { animation: none !important; }
  .hero [data-anim] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .frame-a img.trans-0, .frame-a img.trans-1, .frame-a img.trans-2,
  .frame-a img.trans-3, .frame-a img.trans-4 { animation: none !important; }
  .hero-frame { transition: none !important; }
  .hero-slide-bg img { transition: none !important; }
  .rotate-text { transition: none !important; }
  .hero-sticker { animation: none !important; }
}