/* ==========================================================================
   Hero — homepage hero, page hero, SVG curves
   ========================================================================== */

/* ── Homepage hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-primary);
  min-height: 100vh;
}

/* Soft gradient cloud — lavender → blue → violet, concentrated lower-centre */
.hero__glow {
  position: absolute;
  inset: -10% -5% 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 28% 82%, rgba(54, 69, 253, 0.30), transparent 70%),
    radial-gradient(44% 46% at 58% 92%, rgba(139, 123, 216, 0.34), transparent 72%),
    radial-gradient(42% 50% at 78% 78%, rgba(110, 132, 255, 0.24), transparent 72%),
    radial-gradient(34% 40% at 46% 68%, rgba(206, 188, 238, 0.34), transparent 70%),
    radial-gradient(30% 34% at 88% 96%, rgba(120, 96, 220, 0.26), transparent 72%);
  filter: blur(50px);
}

/* Faint dot grid (matches Figma background pattern) */
.hero__dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(28, 27, 31, 0.06) 1px, transparent 1.4px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
}

/* Cursor-following spread glow (active over hero/header) */
.hero__cursor {
  position: absolute;
  top: 0; left: 0;
  width: 680px; height: 680px;
  margin: -340px 0 0 -340px;     /* centre the circle on the pointer */
  border-radius: 50%;
  background: radial-gradient(circle, rgba(54, 69, 253, 0.38) 0%, rgba(139, 123, 216, 0.20) 38%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  will-change: transform;
}
.hero.is-cursor-active .hero__cursor { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__cursor { display: none; }
}

/* Layout: top-left headline · centred AI · bottom-right headline */
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 50px;
}

.hero__title {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  color: var(--text-title);
  letter-spacing: -0.02em;
  line-height: 1.06;
  max-width: 520px;
  margin: 0;
}
.hero__title--top    { align-self: flex-start; }
.hero__title--bottom { align-self: flex-end; text-align: right; }

.hero__ai {
  align-self: center;
  width: 100%;
  max-width: 760px;
  margin-block: 40px;
}

.hero__ai-suggestions {
  display: flex;
  justify-content: center;
  gap: var(--gap-md);
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ai-chip {
  display: inline-block;
  padding: 8px 18px;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(28,27,31,0.18);
  background: rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: var(--font);
  font-size: var(--body-xs);
  color: var(--text-title);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.ai-chip:hover { border-color: var(--text-title); background: rgba(255,255,255,0.7); }

.hero__ai-input {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--bg-white);
  border-radius: var(--radius-btn);
  padding: 14px 14px 14px 28px;
  box-shadow: 0 10px 40px rgba(28, 16, 36, 0.10);
}
.hero__ai-placeholder {
  flex: 1;
  font-size: var(--body-sm);
  color: rgba(0,0,0,0.4);
}
.hero__ai-send {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--btn-dark);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.hero__ai-send:hover { background: var(--dragster-blue); }

/* ── Input-focus animation ───────────────────────────────────────────────────
   Clicking the input slides the top heading up & out, the bottom heading down,
   fades the suggestion chips and narrows the input. (.is-input-focused on .hero) */
.hero__title--top,
.hero__title--bottom {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
  will-change: transform, opacity;
}
.hero__ai-suggestions {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hero__ai-input {
  width: 100%;
  transition: max-width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero.is-input-focused .hero__title--top    { transform: translateY(-180%); opacity: 0; }
.hero.is-input-focused .hero__title--bottom { transform: translateY(180%);  opacity: 0; }
.hero.is-input-focused .hero__ai-suggestions {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.hero.is-input-focused .hero__ai-input {
  max-width: 560px;
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .hero__title--top,
  .hero__title--bottom { transition: opacity 0.3s ease; }
  .hero.is-input-focused .hero__title--top,
  .hero.is-input-focused .hero__title--bottom { transform: none; }
}

@media (max-width: 767px) {
  .hero__title { font-size: clamp(34px, 9vw, 44px); max-width: 100%; }
  .hero__title--bottom { text-align: left; align-self: flex-start; }
  .hero__inner { min-height: calc(100vh - var(--header-h)); }
}

/* ── Reusable page hero (template-parts/hero.php · Figma node 2524:11539) ────
   Full-bleed dark image + bottom-anchored eyebrow pill(s) + CTA(s) + 80px H1.
   Title uses --title-lg so it drops to 40px on mobile via the token; side
   inset comes from .container (--margin-primary: 50 → 16). Shared by the
   expertise / about / contact / career pages and the expertise / always-on
   single posts (replaces the old .about-hero and .expertise-hero families). */
.site-hero {
  position: relative;
  min-height: 100svh;
  max-height: 1024px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: var(--text-light);
}
.site-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;                            /* above the .media-fill picture (z 0) */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.site-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.site-hero__meta {
  display: flex;
  flex-wrap: wrap;                       /* two tags / two buttons wrap on narrow screens */
  align-items: center;
  gap: 12px;
}
/* .site-hero prefix: higher specificity than .glass-card (which sets radius:20px
   and loads later) so the fully-rounded pill radius wins; the liquid-glass mask
   follows since the fx engine reads the computed border-radius. */
/* Glass tag/eyebrow — unified size (Figma 3190:9242): 46px tall, 24px sides,
   20px corners, 20px/regular text. Keep in sync with .case-hero-x__tag and
   .service-hero__eyebrow. Glass look via .glass-card + --fx-filter. */
.site-hero .site-hero__tag {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08); /* glass blur comes from .glass-card + --fx-filter */
  color: var(--text-light);
  font-size: var(--body-md);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
/* Title wrapper: transparent passthrough on desktop (display:contents → no box,
   no glass-card shadow/border, no fx-container); on mobile it becomes the real
   liquid-glass card. --fx-filter is set only in the mobile query below, so the
   glassfilter.js engine adds the effect on mobile and drops it on desktop
   automatically (it removes the fx-container when the property is unset). */
.site-hero__title-wrap { display: contents; }
/* display:contents doesn't reliably suppress the .glass-card ::before sheen —
   with no box it leaks onto an ancestor as a full-width border ring. Kill it on
   desktop (higher specificity than .glass-card::before so it wins regardless of
   stylesheet order); the mobile query restores it. */
.site-hero .site-hero__title-wrap::before { content: none; }

.site-hero__title {
  margin: 0;
  max-width: 1000px;
  font-size: var(--title-lg);           /* Large (default). --site-hero--xl → XL */
  line-height: var(--title-lg-lh);
  letter-spacing: -0.02em;              /* Figma −2%: −1.6px @80 · −2px @100 (scales) */
  font-weight: 400;
  color: var(--text-light);
}
/* XL variant (ACF hero_title_size = xl) — 100px token set. */
.site-hero--xl .site-hero__title {
  font-size: var(--title-xl);
  line-height: var(--title-xl-lh);
}

@media (max-width: 767px) {
  /* Full phone-screen hero (site-wide decision 2026-09): every hero fills the
     small viewport; svh keeps it stable while the browser chrome collapses. */
  .site-hero {
    min-height: 100svh;
    max-height: none;
  }
  /* The hero CTA duplicates the header's always-visible Let’s talk button and
     collides with it while scrolling past the transparent header — hide on phones. */
  .site-hero__meta .btn { display: none; }
  .site-hero__title-wrap {
    display: block;
    width: 100%;
    padding: 24px;
    /* Real liquid-glass (AI-section recipe) — 5px blur.
       The .glass-card class supplies the radius, border sheen and shadow;
       the engine reads this to inject the refraction/blur fx-container. */
    --fx-filter: blur(8px) liquid-glass(2, 10, 1) saturate(1.25);
  }
  .site-hero .site-hero__title-wrap::before { content: ''; }   /* restore glass sheen */
}

/* ── SVG background curves ───────────────────────────────────────────────── */

.section__curve {
  position: absolute;
  left: 50%;
  /* Figma 3486:26931: the curve in this section is MIRRORED horizontally
     (loop on the right, bright tail exiting bottom-left) and its ink starts
     262px from the section top (geometry top 291 − 29 half-stroke). */
  transform: translateX(-50%) scaleX(-1);
  top: 262px;
  /* Original Figma svg is 1440×781. It spans the full section width and past
     1440px scales UNIFORMLY (aspect-ratio locks height to width) so shape and
     stroke keep their proportions; the svg clips the path's off-canvas ends
     just like the Figma frame does. */
  width: max(1440px, 100vw);
  height: auto;
  aspect-ratio: 1440 / 781;
  pointer-events: none;
  z-index: 0;
}
/* Drawn in on scroll (main.js smoothDraw sets the exact length); large initial
   dashoffset keeps the path hidden before the script runs. */
.section__curve-path {
  stroke-dasharray: 9000;
  stroke-dashoffset: 9000;
}

/* ── Generic page hero (About, Contact, Careers, etc.) ───────────────────── */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 80px);
  padding-bottom: 80px;
  background-color: var(--bg-primary);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg-primary) 0%, var(--bg-primary) 50%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.page-hero .container { position: relative; z-index: 3; }

/* ── Carousel variant (full-bleed image, content bottom) ─────────────────── */
.page-hero--carousel {
  background: transparent;
  min-height: 100svh;
  max-height: 1024px;
  padding: 0;
  align-items: flex-end;        /* content sits at the bottom */
}
.page-hero--carousel::before { content: none; }   /* no light gradient */

.page-hero__carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Slide-over carousel (Figma proto 1841-3648): the next image pushes in from
   the right edge and sweeps left across the current one, which stays put
   beneath (.is-under) until it is fully covered. The wrapper is its own
   stacking context (z-index: 0), so slide z-indexes never beat the gradient. */
.page-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.25, 1), visibility 0s 1.1s;
  z-index: 1;
}
.page-hero__slide.is-active {
  visibility: visible;
  transform: translateX(0);
  z-index: 3;
  /* Visibility must flip IMMEDIATELY on the way in — the base rule's 1.1s
     visibility delay is only for hiding after the slide-out completes. */
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.25, 1), visibility 0s 0s;
}
/* The outgoing slide pushes out to the LEFT in sync with the incoming one —
   a conveyor move; it goes hidden only after the 1.1s exit completes. */
.page-hero__slide.is-under {
  visibility: visible;
  transform: translateX(-100%);
  z-index: 2;
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.25, 1), visibility 0s 1.1s;
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__slide { transition: none; }
}

/* Dark gradient at the bottom so the white text stays readable */
.page-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}

.page-hero--carousel .container { position: relative; z-index: 2; width: 100%; }

.page-hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.page-hero--carousel .page-hero__title {
  font-size: var(--title-lg);        /* 80px */
  line-height: var(--title-lg-lh);   /* 86px */
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 1000px;
  margin: 0;
}

.page-hero__control {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.page-hero__view {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  color: #fff;
  text-decoration: none;
  font-size: var(--body-sm);
  line-height: 24px;
}

/* ── Carousel Control Button ─────────────────────────────────────────────── */
.carousel-control {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);   /* faint track — the ring draws the progress */
  background: transparent;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.carousel-control:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
}

/* Progress ring — fills clockwise over one slide interval (keep the 5s in
   sync with INTERVAL in main.js); freezes while the carousel is paused and
   restarts on every slide change (main.js re-triggers the animation). */
.carousel-control__ring {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.carousel-control__ring-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 188.5;   /* 2πr, r = 30 */
  stroke-dashoffset: 188.5;
  animation: dsr-carousel-ring 5s linear forwards;
}
.page-hero--carousel.paused .carousel-control__ring-fill { animation-play-state: paused; }
@keyframes dsr-carousel-ring { to { stroke-dashoffset: 0; } }

.carousel-control__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.carousel-control__icon svg {
  width: 24px;
  height: 24px;
  transition: opacity 0.3s ease;
}

/* Text label ("Pause"/"Play") — hidden by default; the carousel hero shows it
   next to the icon on mobile only (see page-all-case-studies.css). */
.carousel-control__label { display: none; }

.carousel-control.paused .carousel-control__icon {
  display: none;   /* remove the pause icon entirely so the triangle centers */
}

.carousel-control.paused::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 13px solid white;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  transform: translateX(2px);   /* optical centering of the triangle */
}

.page-hero__content {
  max-width: 620px;
}

.page-hero__type {
  display: inline-block;
  font-size: var(--body-sm);
  color: var(--dragster-blue);
  font-weight: 500;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-hero__title {
  font-size: var(--title-lg);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-title);
  line-height: var(--title-lg-lh);
  margin-bottom: 32px;
}

.page-hero__tagline {
  font-size: var(--body-lg);
  color: var(--text-body);
  line-height: var(--body-lg-lh);
  margin-bottom: 48px;
  max-width: 540px;
}

.page-hero__lead {
  font-size: var(--title-xs);
  font-weight: 400;
  color: var(--text-body);
  margin-top: 24px;
  max-width: 660px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .page-hero {
    padding-top: calc(var(--header-h) + 60px);
    padding-bottom: 60px;
    background-position: right;
    min-height: 60vh;
  }

  .page-hero__title {
    font-size: var(--title-md);
    line-height: var(--title-md-lh);
  }

  .page-hero__tagline {
    font-size: var(--body-md);
    line-height: var(--body-md-lh);
  }

  .carousel-control {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 767px) {
  .page-hero {
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: 40px;
    background-image: none !important;
    min-height: auto;
  }

  .page-hero::before {
    background: transparent;
  }

  .page-hero__content {
    max-width: 100%;
  }

  .page-hero__type {
    font-size: var(--body-xs);
    margin-bottom: 16px;
  }

  .page-hero__title {
    font-size: var(--title-sm);
    line-height: var(--title-sm-lh);
    margin-bottom: 20px;
  }

  .page-hero__tagline {
    font-size: var(--body-md);
    line-height: var(--body-md-lh);
    margin-bottom: 32px;
  }

  .carousel-control {
    width: 48px;
    height: 48px;
    bottom: 20px;
    right: 20px;
  }

  .carousel-control__icon svg {
    width: 20px;
    height: 20px;
  }

  .carousel-control.paused::after {
    border-left: 10px solid white;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
  }
}

/* ── Case Hero ────────────────────────────────────────────────────────────── */
.case-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 80px) 0 80px;
  background-color: var(--bg-primary);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.case-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;                 /* above the .media-fill picture (z-index 0) */
  background: linear-gradient(90deg, var(--bg-primary) 0%, var(--bg-primary) 55%, transparent 100%);
  pointer-events: none;
}

.case-hero .container { position: relative; z-index: 2; }

.case-hero__content {
  max-width: 620px;
}

.case-hero__type {
  display: inline-block;
  font-size: var(--body-xs);
  color: var(--dragster-blue);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 16px;
  margin-bottom: 24px;
}

.case-hero__year {
  display: inline-block;
  font-size: var(--body-xs);
  color: var(--text-body);
  font-weight: 400;
}

.case-hero__client {
  font-size: var(--body-md);
  color: var(--text-body);
  margin-bottom: 16px;
}

.case-hero__title {
  font-size: var(--title-lg);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-title);
  line-height: var(--title-lg-lh);
  margin-bottom: 32px;
}

.case-hero__tagline {
  font-size: var(--body-lg);
  color: var(--text-body);
  line-height: var(--body-lg-lh);
  max-width: 540px;
}