/* ============================================================
   resamp — Section layouts / sections.css
   Each section is composed differently on purpose — no two
   share the same rhythm, alignment or colour treatment.
   ============================================================ */

/* ============ HERO ====================================== */
.hero {
  position: relative;
  /* Hero + the services ticker below it together fill the first screen.
     The content is anchored to the bottom, leaving a wide, calm gap under
     the header — the ticker then sits right at the fold. `--ticker-h` is the
     room reserved for that band so nothing else peeks above the fold. */
  --ticker-h: 7rem;
  min-height: calc(100svh - var(--ticker-h));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--header-h) + clamp(3rem, 12vh, 9rem));
  padding-bottom: clamp(1.5rem, 3.5vw, 3rem);
  overflow: hidden;
}
.hero__grid { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
.hero__eyebrow { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.hero__title {
  font-size: clamp(2.8rem, 6.2vw, 6.2rem);
  line-height: .94;
  letter-spacing: var(--tracking-display);
  font-weight: 500;
  max-width: 15ch;
}
.hero__title .hero__line { display: block; }
/* The rotating word lives on its own line and never wraps, so swapping
   words of different lengths can't reflow the page (the animation keeps
   running in the background while the user scrolls). */
.hero__title .hero__line--rotate { white-space: nowrap; }
.hero__title .hero__accent { display: inline-block; font-style: italic; }
.hero__title .clover { width: .82em; height: .82em; vertical-align: -.06em; margin-inline: .1em; }
.hero__bottom {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}
.hero__lead { max-width: 56ch; font-size: var(--step-1); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; align-items: center; }
.hero__aside { display: grid; gap: 1.4rem; justify-items: start; }
.hero__meta-row { display: flex; gap: 2.4rem; flex-wrap: wrap; }
.hero__meta .n { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); letter-spacing: var(--tracking-display); display: block; }
.hero__meta .l { color: var(--fg-muted); font-size: var(--step--1); }
/* Ambient glow blobs */
.hero__glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__glow span { position: absolute; filter: blur(80px); opacity: .5; border-radius: 50%; }
.hero__glow .g1 { width: 42vw; height: 42vw; left: -8vw; top: 4vh; background: radial-gradient(circle, rgba(139, 255, 115,.55), transparent 65%); animation: float-slow 11s var(--ease-in-out) infinite; }
.hero__glow .g2 { width: 38vw; height: 38vw; right: -6vw; bottom: -8vh; background: radial-gradient(circle, rgba(153, 129, 247,.45), transparent 65%); animation: float-slower 15s var(--ease-in-out) infinite; }
/* Floating clover in the negative space */
.hero__mark { position: absolute; right: 7vw; top: 26%; width: clamp(60px, 8vw, 120px); color: var(--lime); z-index: -1; animation: float-slower 13s var(--ease-in-out) infinite; }
.hero__scrollcue { display: inline-flex; align-items: center; gap: .7rem; color: var(--fg-muted); font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.hero__scrollcue .mouse { width: 22px; height: 34px; border: 1.5px solid currentColor; border-radius: 12px; position: relative; }
.hero__scrollcue .mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; background: currentColor; border-radius: 2px; transform: translateX(-50%); animation: bob 1.6s var(--ease-in-out) infinite; }

/* ============ HERO — FULLSCREEN VIDEO INTRO → WHITE HERO ===
   The section is made tall by JS; a sticky inner stage pins for one
   screen of scroll. The video sits ON TOP of the normal (light) hero and
   FADES OUT as you scroll, cross-fading to the title on a white ground.
   JS scrubs three custom props: --video-op (video opacity), --reveal
   (title/content fade-in) and --cue. Without JS everything is shown. */
.hero--video {
  position: relative;
  /* JS sets an explicit height (≈ 1.9× viewport) to create the pin runway.
     This fallback keeps it a single screen if JS never runs. */
  min-height: 100svh;
}
.hero__pin {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--bg); /* the revealed hero sits on the normal light ground */
}
/* Fullscreen video overlay that covers the hero, then fades away on scroll */
.hero__video {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--ink);
  pointer-events: none;
}
.hero--video.is-scrub .hero__video { opacity: var(--video-op, 1); }
/* Desktop (landscape) vs mobile (portrait) source — one is shown per viewport */
.hero__video--mobile { display: none; }
@media (max-width: 768px) {
  .hero__video--desktop { display: none; }
  .hero__video--mobile { display: block; }
}

/* Content sits at the bottom, in the normal (dark-on-light) hero styling */
.hero--video .hero__content { padding-bottom: clamp(2rem, 5vh, 4rem); }
.hero--video.is-scrub .hero__content {
  opacity: var(--reveal, 0);
  transform: translateY(calc((1 - var(--reveal, 0)) * 22px));
  will-change: opacity, transform;
}

/* Initial scroll cue over the video, fades out as the video clears */
.hero--video .hero__cue {
  position: absolute; left: 50%; bottom: clamp(1.2rem, 3vh, 2.2rem);
  transform: translateX(-50%);
  color: var(--bone); opacity: 0; z-index: 4;
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
  transition: opacity var(--dur-2) linear;
}
.hero--video.is-scrub .hero__cue { opacity: var(--cue, 1); }

@media (prefers-reduced-motion: reduce) {
  .hero--video, .hero__pin { height: auto; min-height: 100svh; }
  .hero--video.is-scrub .hero__video { opacity: 0; }
  .hero--video.is-scrub .hero__content { opacity: 1; transform: none; }
  .hero--video.is-scrub .hero__cue { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--video, .hero__pin { height: auto; min-height: 100svh; }
  .hero--video.is-scrub .hero__content { opacity: 1; transform: none; }
  .hero--video.is-scrub .hero__scrim { opacity: .58; }
  .hero--video.is-scrub .hero__cue { opacity: 0; }
}

/* ============ TICKER / MARQUEE BAND ===================== */
.ticker { padding-block: clamp(1.2rem, 2.4vw, 2rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ticker .marquee__item { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); letter-spacing: var(--tracking-head); color: var(--fg); }
.ticker .marquee__item .clover { width: .7em; height: .7em; color: var(--lime); }
.ticker--muted .marquee__item { color: var(--fg-faint); }

/* ============ MANIFESTO (scroll word-fill) ============== */
.manifesto { padding-block: clamp(6rem, 3.5rem + 9vw, 12rem); }
.manifesto__text {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-3); line-height: 1.22; letter-spacing: var(--tracking-head);
  max-width: 30ch;
}
.manifesto__foot { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: end; margin-top: clamp(2rem, 4vw, 3.2rem); }
.manifesto__note { max-width: 46ch; color: var(--fg-muted); }

/* ============ STATS BAND ================================ */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.stats-band .stat { padding-top: 1.4rem; border-top: 2px solid var(--fg); }

/* ============ SERVICES ================================== */
.services__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.services__note {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .7rem 1.1rem; border: 1px dashed var(--line-strong); border-radius: var(--r-pill);
  color: var(--fg-muted); font-size: var(--step--1);
}
.services__note .x { color: var(--violet); font-weight: 500; }

/* ============ PROCESS (horizontal pinned scroll) ======== */
.process {
  position: relative;
  /* Dark theme tokens so muted step text isn't ink-on-ink (unreadable). */
  --fg: var(--bone);
  --fg-muted: rgba(244, 243, 238, .70);
  --fg-faint: rgba(244, 243, 238, .40);
  --line: var(--line-invert);
  --line-strong: rgba(255, 255, 255, .26);
  background: var(--ink);
  color: var(--bone);
}
.process__intro { padding-top: clamp(3rem, 5.5vw, 5rem); }
.process__intro h2 { color: var(--bone); }
.process__pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.process__track { display: flex; gap: clamp(1rem, 2.4vw, 2rem); padding-inline: var(--gutter); will-change: transform; }
.process__rail { position: absolute; left: 0; right: 0; bottom: 12%; height: 1px; background: var(--line-invert); }
.process__progress { position: absolute; left: 0; bottom: 12%; height: 1px; background: var(--lime); transform-origin: left; transform: scaleX(0); }
.process__count { position: absolute; right: var(--gutter); top: 14%; font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); color: var(--fg-faint); }

/* ============ WORK / PROJECTS ========================== */
.work__head { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem) clamp(1.2rem, 2.4vw, 2.4rem); }
.work-grid > * { grid-column: span 6; }
.work-grid .span-7 { grid-column: span 7; }
.work-grid .span-5 { grid-column: span 5; }
.work-grid .offset { margin-top: clamp(2rem, 6vw, 6rem); }

/* ============ CLIENT LOGOS ============================= */
.clients-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.6rem); }
.client-logo {
  display: grid; place-items: center;
  min-height: 160px; padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  transition: transform var(--dur-3) var(--ease-out-expo), box-shadow var(--dur-3) var(--ease-out-expo);
}
.client-logo img { max-height: 68px; width: auto; object-fit: contain; }
.client-logo--light { background: var(--paper); }
.client-logo--dark { background: var(--ink); border-color: var(--line-invert); }
.client-logo:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
@media (max-width: 640px) { .clients-2 { grid-template-columns: 1fr; } }

/* ============ APPROACH / SPLIT FEATURE ================= */
.split-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split-feature__media { position: relative; }
.split-feature__list { display: grid; gap: 1.4rem; margin-top: 1.8rem; }
.split-feature__list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.split-feature__list .k { color: var(--lime); font-family: var(--font-display); font-weight: 500; }
.on-dark .split-feature__list li { border-color: var(--line-invert); }

/* ============ CTA ====================================== */
.cta { position: relative; background: var(--violet); color: #fff; overflow: hidden; border-radius: clamp(1.5rem, 4vw, 3rem); }
.cta__inner { position: relative; z-index: 2; padding: clamp(2.5rem, 5.5vw, 5rem) var(--gutter); text-align: center; display: grid; gap: 1.6rem; justify-items: center; }
.cta h2 { font-size: var(--step-5); line-height: .96; color: #fff; max-width: 18ch; }
.cta .btn { --btn-bg: var(--lime); --btn-fg: var(--ink); --btn-hover: #fff; --btn-hover-fg: var(--ink); }
.cta__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cta__glow span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.cta__glow .c1 { width: 40vw; height: 40vw; left: -10vw; top: -20vh; background: radial-gradient(circle, rgba(139, 255, 115,.6), transparent 60%); }
.cta__glow .c2 { width: 34vw; height: 34vw; right: -8vw; bottom: -18vh; background: radial-gradient(circle, rgba(255,255,255,.4), transparent 60%); }
.cta__clover { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; opacity: .1; }
.cta__clover .clover { width: 60vh; height: 60vh; color: #fff; }

/* ============ INTERIOR PAGE HERO ======================= */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(2rem, 4.5vw, 3.6rem));
  padding-bottom: clamp(1.5rem, 3vw, 2.6rem);
  position: relative; overflow: hidden;
}
.page-hero__crumbs { display: flex; gap: .5rem; align-items: center; color: var(--fg-muted); font-size: var(--step--1); margin-bottom: 1.6rem; }
.page-hero__crumbs a:hover { color: var(--fg); }
.page-hero__crumbs .sep { opacity: .5; }
.page-hero__title { font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: .96; letter-spacing: var(--tracking-display); max-width: 20ch; }
.page-hero__title [data-reveal] { display: inline-block; }
.page-hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: end; margin-top: clamp(1.2rem, 2.4vw, 2rem); }
.page-hero__lead { font-size: var(--step-1); line-height: 1.5; max-width: 56ch; }

/* ============ CONTACT ================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
.contact-aside { display: grid; gap: 2rem; align-content: start; }
.contact-block h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-faint); margin-bottom: .6rem; }
.contact-block a, .contact-block p { font-size: var(--step-1); }
.contact-block a { font-weight: 500; }
.contact-block a:hover { color: var(--violet); }

.form { display: grid; gap: 1.4rem; }
.form__row { display: grid; gap: 1.4rem; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: .5rem; position: relative; }
.field label { font-size: var(--step--1); color: var(--fg-muted); letter-spacing: 0; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 1rem 1.1rem;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-size: var(--step-0);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(153, 129, 247,.14);
}
.field textarea { min-height: 160px; resize: vertical; }
.form__consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--step--1); color: var(--fg-muted); }
.form__consent input { width: 20px; height: 20px; flex: none; accent-color: var(--violet); }
.form__status { font-size: var(--step-0); }
.form__status[data-state="ok"] { color: var(--violet); }
.form__status[data-state="err"] { color: #c0392b; }

/* Budget chip selector */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  padding: .6rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--step--1); cursor: pointer; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked),
.chip.is-active { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ============ FAQ PAGE ================================= */
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.faq-layout .section-head { position: sticky; top: calc(var(--header-h) + 2rem); }

/* ============ ABOUT ==================================== */
.about-hero-media { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
.about-hero-media .a { grid-column: span 5; }
.about-hero-media .b { grid-column: span 4; margin-top: 3rem; }
.about-hero-media .c { grid-column: span 3; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.4rem); }

/* ============ LEISTUNG DETAIL ========================= */
.leistung-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.leistung-facts { display: grid; gap: 1.2rem; }
.leistung-facts .fact { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.leistung-facts .fact dt { color: var(--fg-muted); }
.leistung-facts .fact dd { font-weight: 500; text-align: right; }
.deliverables { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; }
.deliverables li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: baseline; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.deliverables li .clover { width: 16px; height: 16px; transform: translateY(2px); }
.other-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* ============ JOBS ==================================== */
.jobs { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
.job {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-raised);
  display: grid; gap: 1.3rem;
  transition: border-color var(--dur-3) var(--ease-out-expo), box-shadow var(--dur-3) var(--ease-out-expo), transform var(--dur-3) var(--ease-out-expo);
}
.job:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.job__head { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; align-items: flex-start; }
.job__head h3 { font-size: var(--step-3); }
.job__meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.job__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.job__cols h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-faint); margin-bottom: .9rem; }
.job__list { display: grid; gap: .55rem; }
.job__list li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: baseline; color: var(--fg-muted); }
.job__list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); transform: translateY(-1px); }
.job .btn { justify-self: start; }
@media (max-width: 640px) { .job__cols { grid-template-columns: 1fr; } }

/* ============ LEGAL / PROSE ============================ */
.prose { max-width: 80ch; }
.prose h2 { font-size: var(--step-2); margin-top: 2.6rem; margin-bottom: .8rem; }
.prose h3 { font-size: var(--step-1); margin-top: 1.8rem; margin-bottom: .5rem; }
.prose p, .prose li { color: var(--fg-muted); }
.prose p + p { margin-top: 1rem; }
.prose ul { padding-left: 1.2rem; display: grid; gap: .4rem; margin-top: .6rem; list-style: none; }
.prose ul li { position: relative; padding-left: 1rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.prose a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--fg); }

/* ============ 404 ====================================== */
.err {
  min-height: 100svh; display: grid; place-items: center; text-align: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
}
.err__code { font-family: var(--font-display); font-weight: 500; font-size: var(--step-7); line-height: .85; letter-spacing: var(--tracking-display); }
.err__code .clover { width: .7em; height: .7em; vertical-align: -.05em; }