/* =====================================================================
   HOME PAGE — hero + conversion sections
   ===================================================================== */

/* ===== HERO (full page) ===== */
.hero {
  position: relative;
  /* #header-spacer clears the fixed header; svh keeps height stable while the
     mobile address bar shows/hides (no reflow / scroll jump). */
  min-height: calc(100svh - var(--header-height));
  display: flex; align-items: center;
  background: var(--bg);
  padding-block: var(--space-3xl);
  overflow: hidden;
}
.hero__container {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--hero-gap);                 /* protected 3.75rem text↔actions gap */
}
.hero__text {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-md);
  width: 100%; max-width: 42rem; text-align: center;
}
.hero__text h1 { font-size: 4rem; line-height: 1; }
/* Smaller than the shared .t-body-lg so longer copy (e.g. German) doesn't
   push the CTAs past the fold. 15–17px instead of 17–20px. */
.hero__lead { color: var(--text); max-width: 34rem; font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); }
.hero__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; }

.hero__pill .pill { gap: var(--space-xs); }

/* Typing animation — every glyph is laid out up front (JS wraps each in a
   .char span) and revealed one by one, so the title's wrapping and centring
   are fixed from the first frame. Untyped glyphs are hidden but keep their
   space. The caret is absolutely positioned on the current glyph, so it adds
   no layout of its own. The spans are kept after typing (never collapsed back
   to a text node), so the resting layout equals the final typed frame. */
/* Two things stop the line from re-flowing the instant typing ends:
   - text-wrap: wrap overrides .t-xl's text-wrap: balance. Safari only applies
     `balance` once the content stops mutating, then re-wraps the finished
     title (e.g. "direkt" dropping to the next line) — a visible jump. Greedy
     wrapping is deterministic, so the breaks match during typing and after.
   - font-kerning: none keeps each .char span's advance stable (isolated
     glyphs don't pair-kern), so nothing nudges sideways either. */
.hero__title { font-kerning: none; text-wrap: wrap; }
.hero__title .char { position: relative; }
.hero__title.is-typing .char:not(.typed) { visibility: hidden; }
.hero__title.is-typing .char.cursor::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -0.1em;
  height: 0.74em;
  width: 0.06em;
  background: var(--accent);
  animation: hero-caret 0.85s steps(1) infinite;
}
@keyframes hero-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__title.is-typing .char.cursor::after { animation: none; }
}

/* Progressive heading scale (CLAUDE.md hero rules) */
/* Monotonic decreasing — a wider breakpoint is never smaller than a narrower one. */
@media (max-width: 64rem)   { .hero__text h1 { font-size: 3.25rem; } }
@media (max-width: 47.9375rem)   { .hero__text h1 { font-size: 2.75rem; } }
@media (max-width: 37.5rem) {
  /* Reduced a touch at the smallest tier; lead paragraph smaller. */
  .hero__text h1 { font-size: 2.5rem; line-height: 1.04; }
  .hero__lead { font-size: 0.8125rem; }
  .hero__actions { flex-direction: column; width: 100%; max-width: none; }
  .hero__actions .btn { width: 100%; }
}

/* Small phone ≤30rem — hero left-aligns as one block; the pill is dropped to
   keep the tightest tier uncluttered. Button stack follows the text to the left. */
@media (max-width: 30rem) {
  .hero__text { align-items: flex-start; text-align: left; }
  .hero__pill { display: none; }
  .hero__actions { align-self: flex-start; justify-content: flex-start; }
}

/* ===== TRUST MARQUEE (client strip) ===== */
.trust {
  padding-block: var(--space-xl);
  border-block: 1px solid var(--border-light);
  background: var(--bg);
}
.trust .marquee__track { gap: var(--space-4xl); }
.trust__item {
  font-family: var(--font-display);
  font-size: var(--fs-300); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap; opacity: 0.75;
}

/* ===== Shared section header ===== */
.section-head { display: flex; flex-direction: column; gap: var(--space-md); max-width: 40rem; }
.section-head--center { align-items: center; text-align: center; margin-inline: auto; }

/* ===== WHY A WEBSITE — asymmetric bento: one tall lead point beside two
   stacked supporting points, so the row reads as a composition rather than
   three identical tiles. The lead carries the primary value prop. ===== */
.why-web .section-head { margin-bottom: var(--space-2xl); }
.why-web__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-sm);
}
.why-web__point {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-md);
  padding: var(--space-2xl) var(--space-xl);
  border: 1px solid var(--border-light);
}
/* Lead point spans both rows on the left and stretches to the combined height
   of the two stacked points; copy anchors low so the extra height becomes
   deliberate negative space behind the oversized watermark digit. */
.why-web__point--lead {
  grid-column: 1; grid-row: 1 / span 2;
  justify-content: space-between;   /* numeral up top, copy anchored at the base */
}
/* Lead groups its heading + paragraph so space-between splits number vs copy. */
.why-web__copy { display: flex; flex-direction: column; gap: var(--space-md); }
.why-web__point:nth-child(2) { grid-column: 2; grid-row: 1; }
.why-web__point:nth-child(3) { grid-column: 2; grid-row: 2; }
html.js .card.why-web__point.reveal.is-visible:hover,
.why-web__point:hover { transform: translateY(-0.375rem); }

/* The index digit replaces the icon: a confident accent numeral leads each
   point, so the section reads as a numbered set rather than another icon grid. */
.why-web__num {
  font-family: var(--font-display);
  font-size: 3rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.04em;
  color: var(--accent);
}
/* The lead point is taller, so its numeral is larger to hold the space. */
.why-web__point--lead .why-web__num { font-size: 4.5rem; }

/* ~700px & below: the bento unwinds to a single clean column. Pushed back
   from 64rem — the asymmetric grid still reads fine at tablet widths, and
   collapsing later keeps the bento composition visible longer. Once stacked,
   each card sticks in place and gets overlaid by the next as you scroll, so
   the set reads as a single deck rather than a long scroll of tall cards. */
@media (max-width: 43.6875rem) {
  .why-web__grid { grid-template-columns: 1fr; }
  .why-web__point--lead,
  .why-web__point:nth-child(2),
  .why-web__point:nth-child(3) { grid-column: 1; grid-row: auto; }
  .why-web__point--lead { justify-content: flex-start; }
  .why-web__point {
    padding: var(--space-xl);
    position: sticky;
    top: calc(var(--header-height) + var(--space-xl));
  }
  .why-web__point:nth-child(1) { z-index: 1; }
  .why-web__point:nth-child(2) { z-index: 2; }
  .why-web__point:nth-child(3) { z-index: 3; }
  /* Stacked: the lead is no longer taller, so its numeral matches the rest. */
  .why-web__point--lead .why-web__num { font-size: 3rem; }
}

/* Small phone — the centred head reads cramped at this width; align it left
   like the hero does at the same tier. */
@media (max-width: 30rem) {
  .why-web .section-head--center { align-items: flex-start; text-align: left; margin-inline: 0; }
  .why-web .section-head--center .t-center { text-align: left; }
}


/* ===== FLOW BAND — Why → Work → Services share one continuous gradient ===== */
.flow-band { background: var(--gradient-flow); }

/* ===== FEATURES ("Why Vias Media") ===== */
.features { background: transparent; }
.features__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-lg);
}
.feature-card {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--space-lg); min-height: 22.5rem;
}
.feature-card .icon-box { width: 5rem; height: 5rem; }
.feature-card__body { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Why-us carousel: full-bleed snap-scrolling track. Cards start at the
   container's left edge and bleed off the right; arrows live in the head. */
.why-slider { margin-top: var(--space-2xl); }
.why-slider__viewport {
  /* Left inset = the container's left gutter, so the first card lines up with
     the section head; cards then overflow past the right viewport edge.
     Uses 100% (not 100vw) so it matches the container's scrollbar-excluded width. */
  --slider-gutter: max(var(--space-lg), calc((100% - var(--container-max)) / 2 + var(--space-lg)));
  display: flex; gap: var(--space-xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--slider-gutter);
  padding-inline: var(--slider-gutter) var(--space-lg);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* hide scrollbar — head arrows drive the slider */
}
.why-slider__viewport::-webkit-scrollbar { display: none; }
.why-slider .feature-card {
  scroll-snap-align: start;
  flex: 0 0 21.25rem; max-width: 85vw;   /* fixed width; peek the next card on phones */
}

/* Slider arrows — in the features head, in place of the old "Learn more" link.
   Square with a hint of radius to echo the cards. */
.features__nav { display: flex; gap: var(--space-xs); flex-shrink: 0; }
.features__nav[hidden] { display: none; }
.why-slider__arrow {
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.why-slider__arrow:hover { background: var(--card-hover); border-color: var(--accent); }
.why-slider__arrow:disabled { opacity: 0.35; cursor: default; }
.why-slider__arrow:disabled:hover { background: var(--card); border-color: var(--border); }

/* ===== SERVICES teaser ===== */
.services { background: transparent; }
.services__layout {
  display: grid;
  grid-template-columns: minmax(0, 22rem) 1fr;
  gap: var(--space-3xl);
  align-items: start;
}
.services__head {
  position: sticky;
  top: calc(var(--header-height) + var(--space-xl));
  display: flex; flex-direction: column; gap: var(--space-md);
}
.services__head-cta { margin-top: var(--space-md); }
.services__list { display: flex; flex-direction: column; gap: var(--space-md); }
/* Each service is a link into the services page; the arrow + accent-on-hover
   icon make that affordance obvious without a second button. */
.service-card {
  display: flex; align-items: flex-start; gap: var(--space-md);
  color: inherit; text-decoration: none;
}
.service-card .icon-box {
  width: 3.5rem; height: 3.5rem;
  transition: background var(--dur-fast) ease;
}
.service-card .icon-box svg { transition: stroke var(--dur-fast) ease; }
.service-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.service-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
}
.service-card__arrow {
  flex-shrink: 0; display: flex; color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) ease;
}
.service-card:hover .icon-box--muted { background: var(--accent); }
.service-card:hover .icon-box svg { stroke: var(--btn-on-accent); }
.service-card:hover .service-card__arrow { transform: translateX(0.25rem); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .service-card__arrow { transition: color var(--dur-fast) ease; }
}

@media (max-width: 64rem) {
  .services__layout { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .services__head { position: static; top: auto; }
}

/* ===== WORK teaser ===== */
.work { background: transparent; }
/* Project showcase.
   Mobile (base): a swipeable, scroll-snapping slider, one card at a time.
   Desktop (hover + wide): a hover-expand accordion. Collapsed panels are
   image-only; the name + tags + arrow reveal on hover / keyboard focus. */
.folio {
  display: flex;
  gap: 0.75rem;
  margin-top: var(--space-2xl);
  /* Full-bleed: the slider breaks out of the container padding so cards run
     to the screen edges; padding keeps the first/last card aligned to content. */
  margin-inline: calc(-1 * var(--space-lg));
  padding-inline: var(--space-lg);
  scroll-padding-inline: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.folio::-webkit-scrollbar { display: none; }
.folio__panel {
  position: relative;
  flex: 0 0 86%;
  scroll-snap-align: start;
  aspect-ratio: 1760 / 957;   /* phone cards keep the screenshot's shape (no crop) */
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  color: #fff;
  text-decoration: none;
}
.folio__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
/* Dark legibility scrim — strong at the bottom, so text reads on any image. */
.folio__panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.38) 36%, rgba(0,0,0,0) 68%);
}
.folio__content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.35rem 1.4rem;
}
.folio__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-600); line-height: 1.04; letter-spacing: -0.02em;
  white-space: nowrap; text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.folio__tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.folio__tag {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.24);
  color: #fff; padding: 0.22rem 0.6rem; border-radius: 1.5rem;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.folio__go {
  position: absolute; top: 1rem; right: 1rem; z-index: 1;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
}

/* Desktop: hover-expand accordion. Collapsed = image only (no labels);
   title + tags + arrow appear on hover / keyboard focus. */
@media (hover: hover) and (min-width: 48rem) {
  .folio {
    overflow: visible;
    scroll-snap-type: none;
    gap: 0.5rem;
    height: clamp(22rem, 46vh, 30rem);
    margin-inline: 0;
    padding-inline: 0;
  }
  .folio__panel {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    aspect-ratio: auto;
    scroll-snap-align: none;
    transition: flex-grow 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .folio__name { font-size: var(--fs-700); }
  /* The label is absolutely positioned (left:0/right:0), so its tags re-flow
     on every frame while the panel widens — revealing during that grow makes
     the text jump around. So hold it hidden until the panel-widen (flex-grow
     0.55s above) has finished, then fade it in at the final width. Hiding has
     NO delay, so leaving or yielding clears the label instantly — labels never
     linger or overlap. */
  .folio__content {
    opacity: 0;
    transition: opacity 0.3s var(--ease);
  }
  .folio__go {
    opacity: 0;
    transition: opacity 0.3s var(--ease);
  }
  /* expanded: hover, keyboard focus, or the default-featured (.is-active) panel.
     The label fades in place (no slide-up) only after the card has finished
     expanding; the image no longer zooms — the only motion is the widen. */
  .folio__panel:hover,
  .folio__panel:focus-visible,
  .folio__panel.is-active { flex-grow: 5.2; }
  .folio__panel:hover .folio__content,
  .folio__panel:focus-visible .folio__content,
  .folio__panel.is-active .folio__content { opacity: 1; transition-delay: 0.55s; }
  .folio__panel:hover .folio__go,
  .folio__panel:focus-visible .folio__go,
  .folio__panel.is-active .folio__go { opacity: 1; transition-delay: 0.55s; }
  /* the default-featured panel yields (collapses, hides its label) when another
     is engaged — hide with no delay so two labels are never visible at once */
  .folio:hover .folio__panel.is-active:not(:hover),
  .folio:focus-within .folio__panel.is-active:not(:focus-visible) { flex-grow: 1; }
  .folio:hover .folio__panel.is-active:not(:hover) .folio__content,
  .folio:focus-within .folio__panel.is-active:not(:focus-visible) .folio__content { opacity: 0; transition-delay: 0s; }
  .folio:hover .folio__panel.is-active:not(:hover) .folio__go,
  .folio:focus-within .folio__panel.is-active:not(:focus-visible) .folio__go { opacity: 0; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .folio__panel, .folio__img, .folio__content, .folio__go { transition-duration: 0.001ms; transition-delay: 0s; }
}

/* Phone (≤600px): the panel stops being an image-with-overlay and becomes a
   stacked card — screenshot on top, a solid card-background footer carrying the
   name + tags below. The scrim and white-on-dark text are dropped because the
   labels now sit on the card surface, not the image. */
@media (max-width: 37.5rem) {
  .folio__panel {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;            /* height = image + footer, not a fixed ratio */
    color: var(--text);            /* was #fff for the overlay */
    background: var(--card);
  }
  .folio__img {
    position: static;              /* back into flow, at the top of the card */
    aspect-ratio: 1760 / 957;      /* keep the screenshot's shape */
    height: auto;
  }
  .folio__panel::after { content: none; }   /* drop the dark legibility scrim */
  .folio__content {
    position: static;              /* sits below the image, in normal flow */
    padding: 1rem 1.1rem 1.15rem;
  }
  .folio__name {
    color: var(--text);
    text-shadow: none;
    white-space: normal;           /* allow a long name to wrap on the card */
  }
  .folio__tag {
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

.work__footer { display: flex; justify-content: center; margin-top: var(--space-2xl); }

@media (max-width: 47.9375rem) {
  .features__head { flex-direction: column; align-items: flex-start; }
  .services__layout { gap: var(--space-xl); }
}

@media (max-width: 37.5rem) {
  .services__list { gap: var(--space-sm); }
  .service-card { gap: var(--space-sm); }
}

/* ===== TESTIMONIALS ===== */
.testimonials {
  display: none;             /* hidden for now — pending updated content */
  background: var(--gradient-testimonial);
  position: relative; overflow: hidden;
  padding-block: var(--space-5xl) var(--space-4xl);
}
/* Faint tiled logo-mark texture woven behind the testimonials band. */
.testimonials::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url(../../img/logo-mark.png);
  background-repeat: repeat;
  background-size: 7.5rem auto;
  opacity: 0.045;
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 50%, #000 25%, transparent 82%);
          mask-image: radial-gradient(ellipse 82% 72% at 50% 50%, #000 25%, transparent 82%);
}
[data-palette="ember-dark"] .testimonials::before {
  background-image: url(../../img/logo-mark-white.png);
  opacity: 0.055;
}
.testimonials__head,
.testimonials .marquee { position: relative; z-index: 1; }
.testimonials__head {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
  text-align: center; margin-bottom: var(--space-2xl);
}
.testimonials__track { display: flex; gap: var(--space-xs); width: max-content; }
.testimonial-card {
  width: 21.25rem; min-height: 23.75rem; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--space-lg);
}
.testimonial-card__author { display: flex; flex-direction: column; }

@media (max-width: 37.5rem) {
  .testimonial-card { width: 16.25rem; min-height: 20rem; }
}

/* ===== FAQ (accordion) ===== */
.faq { background: linear-gradient(to bottom, var(--bg), var(--bg-alt)); }
.faq__head { align-items: center; margin-inline: auto; margin-bottom: var(--space-2xl); }
.faq__list { max-width: 48rem; margin-inline: auto; display: flex; flex-direction: column; }

.faq-item { border-bottom: 1px solid var(--border-light); }
.faq-item:first-child { border-top: 1px solid var(--border-light); }

.faq-item__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-lg);
  background: none; border: none; text-align: left; cursor: pointer;
  color: var(--text);
}
.faq-item__q .t-card { transition: color var(--dur-fast) ease; }
.faq-item__q:hover .t-card,
.faq-item.is-open .faq-item__q .t-card { color: var(--accent); }

.faq-item__icon {
  flex-shrink: 0; display: flex; color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease), color var(--dur-fast) ease;
}
.faq-item.is-open .faq-item__icon { transform: rotate(180deg); color: var(--accent); }

/* grid-rows 0fr → 1fr animates the panel height with no JS measurement */
.faq-item__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease);
}
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__answer { overflow: hidden; }
.faq-item__answer p { padding-bottom: var(--space-lg); max-width: 42rem; color: var(--text-sec); }

@media (prefers-reduced-motion: reduce) {
  .faq-item__panel, .faq-item__icon { transition: none; }
}

/* Footer wrapper gradient now lives in components.css (shared across pages). */