/* ==========================================================================
   CREA212 — style.css
   Layout, components and page-specific styling for the static rebuild.
   ========================================================================== */

/* ---------- Global backdrop ---------- */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at -6% 0%, rgba(242, 64, 82, 0.16), transparent 32rem),
    radial-gradient(circle at 104% 20%, rgba(84, 195, 129, 0.18), transparent 36rem),
    radial-gradient(circle at 70% 96%, rgba(222, 218, 176, 0.22), transparent 34rem),
    radial-gradient(circle at 18% 70%, rgba(234, 161, 170, 0.1), transparent 30rem);
}

.bg-grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 17% 31%, rgba(25, 21, 21, 0.09) 0 0.6px, transparent 0.7px 3px),
    repeating-radial-gradient(circle at 71% 66%, rgba(25, 21, 21, 0.04) 0 0.5px, transparent 0.6px 4px);
  background-size: 7px 9px, 11px 13px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 251, 250, 0.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--c-line-soft);
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-xs);
}

.nav {
  width: var(--shell);
  height: var(--header-h);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-bold);
}

.nav__logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.nav__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 2.6vw, 42px);
  font-size: 14px;
  font-weight: var(--fw-medium);
}

.nav__cta-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}

.nav__toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--c-charcoal);
  color: var(--c-off-white);
}

.nav__toggle svg {
  width: 20px;
  height: 20px;
}

.mobile-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  z-index: 55;
  background: var(--c-off-white);
  padding: 28px var(--shell-pad, 24px);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility var(--dur-med);
  overflow-y: auto;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
}

.mobile-nav__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 4px;
  border-bottom: 1px solid var(--c-line);
  font-size: 22px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}

.mobile-nav__num {
  font-size: 12px;
  color: var(--c-ink-faint);
  font-weight: var(--fw-regular);
}

.mobile-nav .btn {
  margin-top: 26px;
  width: 100%;
  justify-content: center;
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav { grid-template-columns: auto auto; }
  .nav__cta-wrap .btn--primary,
  .nav__cta-wrap .lang-switch { display: none; }
}

.lang-switch--mobile {
  margin-top: 34px;
  width: fit-content;
}

body.nav-open {
  overflow: hidden;
}

/* ---------- Buttons & links ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.btn--primary {
  color: var(--c-off-white);
  background: var(--c-charcoal);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.btn--accent {
  color: #ffffff;
  background: var(--c-mint);
  box-shadow: var(--shadow-glow-mint);
}

.btn--accent:hover {
  transform: translateY(-3px) scale(1.02);
}

.btn--ghost {
  border: 1.5px solid var(--c-line);
  background: rgba(251, 251, 250, 0.6);
}

.btn--ghost:hover {
  border-color: var(--c-charcoal);
  transform: translateY(-3px);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1.5px solid var(--c-charcoal);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}

.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

/* ---------- Section scaffolding ---------- */
.section {
  padding-block: clamp(56px, 7vw, 96px);
}

/* Padding never collapses like margins do, so two stacked .section elements
   would otherwise double the visual gap between them (each contributing its
   own top+bottom padding). Zero the second section's top padding so the
   gap is only ever one section's worth. */
.section + .section {
  padding-top: 0;
}

.section:has(+ .section-divider) {
  padding-bottom: 28px;
}

.section-divider + .section {
  padding-top: 0;
}

.section--tight {
  padding-block: clamp(40px, 6vw, 72px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* The two-star pairing (mint + red) echoes the CREA212 mark itself, so the
   brand motif — not just a stray green dot — repeats through every section
   label on the site. */
.eyebrow .dot {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  line-height: 1;
  font-style: normal;
}

.eyebrow .dot::before,
.eyebrow .dot::after {
  content: "\2605";
}

.eyebrow .dot::before {
  color: var(--c-mint);
}

.eyebrow .dot::after {
  color: var(--c-red);
}

.section__head {
  max-width: 720px;
  margin-bottom: clamp(36px, 5vw, 60px);
  margin-inline: auto;
  text-align: center;
}

.section__head h2 {
  margin-top: 18px;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.section__head p {
  margin-top: 18px;
  margin-inline: auto;
  color: var(--c-ink-soft);
  font-size: 15px;
  max-width: 560px;
}

.section__head .eyebrow {
  justify-content: center;
}

/* Headers that also carry a "view all" link stay visually consistent with
   plain centered headers — the link sits centered underneath instead of
   splitting the row, so alignment never jumps between sections on scroll. */
.section__head--split .link-arrow {
  margin-top: 26px;
}

em.accent { color: var(--c-mint); font-style: normal; }
strong.accent { color: var(--c-red); font-weight: inherit; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 96px) clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  align-items: center;
  gap: clamp(30px, 5vw, 70px);
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-xs);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero h1 {
  margin-top: 26px;
  max-width: 640px;
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: var(--fw-black);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero__text {
  margin-top: 24px;
  max-width: 480px;
  color: var(--c-ink-soft);
  font-size: 16px;
}

.hero__actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.hero__meta {
  margin-top: 46px;
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}

.hero__meta div strong {
  display: block;
  font-size: 24px;
  letter-spacing: -0.03em;
}

.hero__meta div span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-ink-faint);
}

/* Hero 3D stage */
.hero__stage-wrap {
  min-width: 0;
}

.hero__stage {
  position: relative;
  width: min(100%, 620px);
  height: clamp(360px, 42vw, 540px);
  margin-inline: auto;
}

.hero__stage-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__plinth {
  position: absolute;
  right: 4%;
  bottom: 2%;
  width: 78%;
  height: 40%;
  border-radius: 48% 42% 38% 46%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(222, 218, 176, 0.5));
  box-shadow: var(--shadow-lg);
  transform: translateZ(-60px) rotate(-6deg);
}

.hero__panel {
  position: absolute;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.hero__panel--browser {
  top: 8%;
  right: 0;
  width: 68%;
  height: 60%;
  transform: translateZ(60px) rotate(-2deg);
}

.hero__browser-bar {
  height: 46px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--c-line-soft);
}

.hero__browser-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-red);
}

.hero__browser-bar i:nth-child(2) { background: var(--c-lime); }
.hero__browser-bar i:nth-child(3) { background: var(--c-mint); }

.hero__browser-body {
  padding: 22px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero__browser-body img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  margin-bottom: 4px;
}

.hero__browser-body strong {
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.hero__browser-body span {
  width: 70%;
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-mint), var(--c-lime));
}

.hero__panel--phone {
  left: 2%;
  bottom: 0;
  width: 30%;
  height: 56%;
  border: 7px solid var(--c-charcoal);
  border-radius: 28px;
  transform: translateZ(100px) rotate(-8deg);
  padding: 22px 12px 12px;
}

.hero__phone-notch {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 46%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 0 0 10px 10px;
  background: var(--c-charcoal);
}

.hero__panel--phone img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  margin-top: 22px;
}

.hero__panel--phone p {
  margin-top: 10px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
}

.hero__panel--phone .chip {
  margin-top: 10px;
  width: fit-content;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  background: var(--c-mint);
  font-size: 8px;
  font-weight: var(--fw-bold);
}

.hero__token {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--c-off-white);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-md);
}

.hero__token--red {
  right: -2%;
  bottom: 20%;
  width: 96px;
  height: 96px;
  background: var(--c-red);
  font-size: 36px;
  transform: translateZ(140px) rotate(-8deg);
}

.hero__token--mint {
  top: 4%;
  left: 30%;
  width: 62px;
  height: 62px;
  background: var(--c-mint);
  border-radius: 18px;
  font-size: 24px;
  transform: translateZ(170px) rotate(12deg);
}

.hero__token--chart {
  top: 6%;
  left: 4%;
  width: 92px;
  height: 68px;
  background: var(--c-lime);
  border-radius: 20px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 14px;
  color: var(--c-charcoal);
  transform: translateZ(120px) rotate(-10deg);
}

.hero__token--chart i {
  width: 6px;
  border-radius: var(--r-pill);
  background: var(--c-mint-deep);
  display: block;
}

.hero__token--chart i:nth-child(1) { height: 14px; }
.hero__token--chart i:nth-child(2) { height: 28px; }
.hero__token--chart i:nth-child(3) { height: 20px; }
.hero__token--chart i:nth-child(4) { height: 36px; background: var(--c-red); }

.hero__token--pink {
  top: 40%;
  left: 24%;
  width: 58px;
  height: 58px;
  background: var(--c-pink);
  border-radius: 18px;
  font-size: 26px;
  color: rgba(242, 64, 82, 0.55);
  transform: translateZ(150px) rotate(11deg);
}

.hero__token--212 {
  bottom: 3%;
  left: 44%;
  width: auto;
  height: auto;
  display: inline-flex;
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: var(--c-charcoal);
  font-size: 13px;
  letter-spacing: -0.02em;
  transform: translateZ(160px) rotate(-4deg);
}

.hero__token--212 span {
  color: var(--c-mint);
}

.hero__star {
  position: absolute;
  color: var(--c-mint);
  font-size: 26px;
}

.hero__star--a { top: 0; right: 26%; }
.hero__star--b { top: 8%; right: 20%; color: var(--c-red); font-size: 16px; }

.scroll-cue {
  width: fit-content;
  margin: clamp(20px, 4vw, 46px) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.scroll-cue__mouse {
  width: 24px;
  height: 38px;
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
}

.scroll-cue__mouse i {
  width: 3px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-mint);
  animation: scroll-cue-drop 1.8s ease-in-out infinite;
}

@keyframes scroll-cue-drop {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue__mouse i { animation: none; }
}

/* ---------- Trust marquee ---------- */
.trust {
  padding-block: 10px 70px;
}

.trust__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  margin-bottom: 30px;
}

.trust__row span {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c-line));
}

.trust__row span:last-child {
  background: linear-gradient(to left, transparent, var(--c-line));
}

.trust__row h2 {
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.marquee__item i {
  display: inline-flex;
  align-items: center;
  font-size: 0;
  font-style: normal;
}

.marquee__item i::before {
  content: "\2605";
  font-size: 15px;
  color: var(--c-mint);
}

.marquee__item i::after {
  content: "\2605";
  font-size: 9px;
  color: var(--c-red);
  margin-left: 2px;
}

/* ---------- Cards: services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.services-grid--compact {
  grid-template-columns: repeat(5, 1fr);
}

/* Ten service cards sit in two even rows of five. Where the grid drops to
   three columns the last card would otherwise hang alone on the left, so
   nudge it to the middle. */
.service-card {
  position: relative;
  min-height: 300px;
  padding: 30px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.service-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -50% 15%;
  height: 65%;
  border-radius: 50%;
  opacity: 0.14;
  filter: blur(26px);
  background: var(--tint, var(--c-mint));
  pointer-events: none;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tint, var(--c-mint));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}

.service-card:hover,
.service-card:focus-within {
  box-shadow: var(--shadow-md);
  z-index: 2;
  border-color: color-mix(in srgb, var(--tint, var(--c-mint)) 45%, var(--c-line-soft));
  transform: perspective(900px) translateY(-6px);
}

.service-card:hover::before,
.service-card:focus-within::before {
  transform: scaleX(1);
}

.service-card__index {
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  color: rgba(25, 21, 21, 0.2);
}

.service-card__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tint, var(--c-mint)) 22%, white);
  color: var(--tint, var(--c-mint-deep));
  transition: transform var(--dur-med) var(--ease-out);
}

.service-card:hover .service-card__icon {
  transform: scale(1.08) rotate(-6deg);
}

.service-card__icon svg { width: 26px; height: 26px; }

.service-card h3 {
  margin-top: 24px;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.service-card p {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--c-ink-soft);
  line-height: 1.6;
}

.service-card__arrow {
  margin-top: auto;
  padding-top: 18px;
  color: var(--tint, var(--c-charcoal));
}

.services-grid--compact .service-card { min-height: 320px; padding: 22px 18px; }
.services-grid--compact .service-card p { font-size: 11px; }

.service-detail-list {
  display: grid;
  gap: 16px;
}

.service-detail {
  position: relative;
  overflow: hidden;
  padding: 32px 30px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  box-shadow: var(--shadow-xs);
  display: grid;
  grid-template-columns: 64px 1.3fr 1fr;
  gap: 30px;
  align-items: start;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.service-detail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tint, var(--c-mint));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}

.service-detail:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--tint, var(--c-mint)) 40%, var(--c-line-soft));
}

.service-detail:hover::before {
  transform: scaleX(1);
}

.service-detail__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tint, var(--c-mint)) 20%, white);
  color: var(--tint, var(--c-mint-deep));
  transition: transform var(--dur-med) var(--ease-out);
}

.service-detail:hover .service-detail__icon {
  transform: scale(1.08) rotate(-6deg);
}

.service-detail__icon svg { width: 24px; height: 24px; }

.service-detail__num {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tint, var(--c-red));
}

.service-detail h3 { font-size: 22px; letter-spacing: -0.02em; }
.service-detail h3 + p { margin-top: 10px; color: var(--c-ink-soft); font-size: 13.5px; }
.service-detail ul { display: grid; gap: 10px; }
.service-detail li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; transition: transform var(--dur-fast) var(--ease-out); }
.service-detail li:hover { transform: translateX(4px); }
.service-detail li .deliverables__check { flex: 0 0 auto; }

/* Services-page hero visual: the six disciplines arranged as a constellation
   around a central "6 services" badge, replacing the generic brand mockup. */
.services-hero-visual {
  position: relative;
  width: min(100%, 320px);
  height: 320px;
  margin-inline: auto;
}

.services-hero-visual__stage { position: relative; width: 100%; height: 100%; }

.services-hero-visual__ring {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px dashed var(--c-line);
}

.services-hero-visual__token {
  position: absolute;
  z-index: 1;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-sm);
  color: var(--tint, var(--c-mint));
}

.services-hero-visual__token svg { width: 22px; height: 22px; }

.services-hero-visual__badge {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 98px;
  height: 98px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-charcoal);
  color: var(--c-off-white);
  box-shadow: var(--shadow-lg);
}

.services-hero-visual__badge strong { font-size: 27px; line-height: 1; letter-spacing: -0.02em; }
.services-hero-visual__badge span { margin-top: 3px; font-size: 8px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-mint); }

.services-hero-visual__star { position: absolute; font-size: 18px; }
.services-hero-visual__star--a { top: -2%; right: 6%; color: var(--c-red); }
.services-hero-visual__star--b { bottom: -2%; left: 8%; color: var(--c-mint); font-size: 14px; }

/* ---------- Work / project cards ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Bento layout: the featured project sits inside the same grid as the rest
   of the work instead of a separate full-width block above it, so it reads
   as one entry in a growing collection rather than the whole page. */
.work-grid--bento { align-items: stretch; }

/* Full width on a single row: with seven entries that fills the 3-column grid
   exactly (3 + 6 = 9 cells), and 2 + 6 = 8 cells in the 2-column layout. */
.project-card--feature {
  grid-column: span 3;
  grid-row: span 1;
  display: flex;
  flex-direction: column;
}

.project-card--feature .project-card__media { flex: 1; height: auto; min-height: 300px; }

/* ---------- Portfolio: clients grouped by sector ---------- */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.sector-card {
  padding: 24px 22px 22px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.sector-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--tint, var(--c-mint)) 45%, var(--c-line-soft));
}

.sector-card__dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tint, var(--c-mint));
}

.sector-card h3 {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.sector-card ul {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sector-card li {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--c-surface-sunken);
  border: 1px solid var(--c-line-soft);
  font-size: 11px;
  color: var(--c-ink-soft);
}

.work-grid__more {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--c-ink-faint);
  font-size: 12.5px;
}

.work-grid__more svg { color: var(--c-mint); width: 15px; height: 15px; }

.project-card {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.project-card:hover,
.project-card:focus-within {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.project-card__media {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: var(--c-lime);
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-soft);
}

.project-card:hover .project-card__media img {
  transform: scale(1.06);
}

.project-card__media--art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
}

.project-card__media--art strong {
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -0.03em;
}

.project-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(25, 21, 21, 0.72);
  color: var(--c-off-white);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.project-card__body {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 76px;
}

.project-card__body strong {
  display: block;
  font-size: 15px;
}

.project-card__body span:not(.project-card__go) {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--c-ink-faint);
}

.project-card__go {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-surface-sunken);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.project-card:hover .project-card__go {
  background: var(--c-mint);
  color: var(--c-red);
  transform: rotate(-8deg);
}

/* Work-page hero visual: a fanned stack of project cards, tied to the
   page's actual portfolio instead of the generic brand mockup. */
.work-hero-visual {
  position: relative;
  width: min(100%, 360px);
  height: 300px;
  margin-inline: auto;
}

.work-hero-visual__stage { position: relative; width: 100%; height: 100%; }

.work-hero-visual__card {
  position: absolute;
  width: 172px;
  height: 132px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 6px solid var(--c-surface);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-hero-visual__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-hero-visual__card strong { font-size: 15px; letter-spacing: -0.02em; color: var(--c-charcoal); }

.work-hero-visual__card--a { top: 2%; left: 0; z-index: 3; transform: rotate(-6deg); }
.work-hero-visual__card--b { top: 24%; left: 32%; z-index: 2; transform: rotate(4deg); }
.work-hero-visual__card--c { bottom: 0; left: 14%; z-index: 1; transform: rotate(-3deg); }

.work-hero-visual__badge {
  position: absolute;
  top: 0;
  right: 2%;
  z-index: 4;
  width: 78px;
  height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-charcoal);
  color: var(--c-off-white);
  box-shadow: var(--shadow-lg);
  transform: rotate(6deg);
}

.work-hero-visual__badge strong { font-size: 24px; line-height: 1; letter-spacing: -0.02em; }
.work-hero-visual__badge span { margin-top: 3px; font-size: 7.5px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-mint); }

.work-hero-visual__star { position: absolute; font-size: 18px; }
.work-hero-visual__star--a { bottom: 4%; right: 20%; color: var(--c-red); }
.work-hero-visual__star--b { top: 2%; left: -2%; color: var(--c-mint); font-size: 14px; }

/* ---------- Process strip (home) ---------- */
.process-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.process-strip--three { grid-template-columns: repeat(3, 1fr); }

.process-step {
  position: relative;
  text-align: center;
  padding: 36px 20px 30px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.process-step:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--tint, var(--c-mint)) 45%, var(--c-line-soft));
}

.process-step__num {
  position: relative;
  z-index: 2;
  width: 62px;
  height: 62px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tint, var(--c-mint));
  font-size: 17px;
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out);
}

.process-step:hover .process-step__num {
  transform: scale(1.1);
}

.process-step h3 { margin-top: 20px; font-size: 15.5px; }
.process-step p { margin-top: 8px; font-size: 12px; color: var(--c-ink-soft); }

.process-connector {
  position: absolute;
  z-index: 1;
  top: 67px;
  left: calc(50% + 32px);
  right: calc(-50% + 32px);
  height: 2px;
  background-image: repeating-linear-gradient(to right, var(--c-line) 0 6px, transparent 6px 14px);
  background-size: 40px 2px;
  animation: process-dash-flow 2.6s linear infinite;
}

@keyframes process-dash-flow {
  to { background-position: -40px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .process-connector { animation: none; }
}

.process-step:last-child .process-connector { display: none; }

/* Process detail page */
.process-detail-list {
  display: grid;
  gap: 0;
}

.process-detail {
  padding-block: 42px;
  border-top: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: 90px 1.2fr 1fr;
  gap: 40px;
  align-items: start;
}

.process-detail:last-child { border-bottom: 1px solid var(--c-line); }
.process-detail h2 { margin-top: 14px; font-size: 40px; letter-spacing: -0.03em; }
.process-detail-copy p { margin-top: 14px; color: var(--c-ink-soft); font-size: 14px; max-width: 480px; }

/* Process-page hero visual: the four stages staircased as a mini roadmap,
   tying the hero directly to the page content instead of the generic mockup. */
.process-hero-visual {
  position: relative;
  width: min(100%, 320px);
  height: 320px;
  margin-inline: auto;
}

.process-hero-visual__stage {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.process-hero-visual__track {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 17px;
  width: 2px;
  background-image: repeating-linear-gradient(to bottom, var(--c-line) 0 6px, transparent 6px 14px);
}

.process-hero-visual__step {
  position: relative;
  z-index: 1;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: calc(var(--i) * 32px);
  padding: 7px 20px 7px 7px;
  border-radius: 999px;
  border: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}

.process-hero-visual__dot {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tint, var(--c-mint));
  font-size: 12px;
  font-weight: var(--fw-bold);
}

.process-hero-visual__label { font-size: 13px; font-weight: var(--fw-semibold); white-space: nowrap; }

.process-hero-visual__star { position: absolute; font-size: 18px; }
.process-hero-visual__star--a { top: -4px; right: 6%; color: var(--c-red); }
.process-hero-visual__star--b { bottom: 10%; right: -2%; color: var(--c-mint); font-size: 14px; }

.deliverables {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 22px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  box-shadow: var(--shadow-xs);
}

.deliverables::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tint, var(--c-mint));
}

.deliverables h3 { font-size: 11.5px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-ink-faint); }
.deliverables li { display: flex; align-items: center; gap: 11px; margin-top: 13px; font-size: 13px; }
.deliverables li:first-of-type { margin-top: 0; }

.deliverables__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tint, var(--c-mint)) 20%, white);
}

.deliverables__check svg { width: 11px; height: 11px; color: color-mix(in srgb, var(--tint, var(--c-mint)) 65%, black); }

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.workflow-grid > div {
  padding: 30px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line-soft);
  background: var(--c-surface);
}

.workflow-grid svg,
.workflow-symbol { color: var(--c-red); }
.workflow-symbol { font-size: 26px; }
.workflow-grid h3 { margin-top: 30px; font-size: 15.5px; }
.workflow-grid p { margin-top: 10px; font-size: 12.5px; color: var(--c-ink-soft); }

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.timeline-grid > div {
  padding: clamp(30px, 4vw, 54px);
  border-radius: var(--r-md);
  background: rgba(84, 195, 129, 0.14);
}

.timeline-grid > div:last-child { background: rgba(234, 161, 170, 0.18); }
.timeline-grid h2 { margin-top: 30px; font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.03em; }
.timeline-grid p { margin-top: 16px; color: var(--c-ink-soft); font-size: 13.5px; max-width: 440px; }

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  gap: 12px;
}

.faq-item {
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.faq-item.is-open { border-color: var(--c-line); box-shadow: var(--shadow-xs); }

.faq-item__q {
  width: 100%;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
}

.faq-item__q-left { display: flex; align-items: center; gap: 18px; }

.faq-item__q-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(84, 195, 129, 0.16);
  color: var(--c-mint-deep);
  font-size: 11px;
  font-weight: var(--fw-bold);
}

.faq-item:nth-child(2) .faq-item__q-num { background: rgba(242, 64, 82, 0.13); color: var(--c-red); }
.faq-item:nth-child(3) .faq-item__q-num { background: rgba(234, 161, 170, 0.26); color: var(--c-red); }
.faq-item:nth-child(4) .faq-item__q-num { background: rgba(222, 218, 176, 0.45); color: var(--c-mint-deep); }

.faq-item__q span:not(.faq-item__q-num) { font-size: 15.5px; font-weight: var(--fw-semibold); }

.faq-item__toggle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.faq-item__toggle svg { color: currentColor; transition: transform var(--dur-fast) var(--ease-out); }

.faq-item.is-open .faq-item__toggle {
  background: var(--c-charcoal);
  border-color: var(--c-charcoal);
  color: var(--c-off-white);
}

.faq-item.is-open .faq-item__toggle svg {
  transform: rotate(45deg);
}

.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}

.faq-item.is-open .faq-item__a {
  grid-template-rows: 1fr;
}

.faq-item__a-inner {
  overflow: hidden;
}

.faq-item__a p {
  padding: 0 24px 20px 70px;
  color: var(--c-ink-soft);
  font-size: 13.5px;
  max-width: 600px;
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  padding: clamp(36px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  align-items: center;
  gap: 36px;
  background:
    radial-gradient(circle at 0% 40%, rgba(242, 64, 82, 0.4), transparent 40%),
    radial-gradient(circle at 100% 30%, rgba(84, 195, 129, 0.36), transparent 42%),
    radial-gradient(circle at 60% 100%, rgba(222, 218, 176, 0.4), transparent 48%),
    var(--c-charcoal);
  color: var(--c-off-white);
  border: 1px solid rgba(251, 251, 250, 0.12);
  box-shadow: var(--shadow-lg);
}

.cta-band h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.cta-band p {
  margin-top: 14px;
  font-size: 13.5px;
  color: rgba(251, 251, 250, 0.72);
  max-width: 340px;
}

.cta-band .btn--accent { margin-top: 22px; }

.cta-band > div:nth-child(2) {
  position: relative;
  padding-left: 36px;
}

.cta-band > div:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6%;
  bottom: 6%;
  width: 1px;
  background: rgba(251, 251, 250, 0.16);
}

.cta-band__orbit {
  position: relative;
  height: 130px;
  display: grid;
  place-items: center;
}

.brand-badge {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}

.brand-badge__plate {
  position: relative;
  z-index: 2;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-off-white);
  box-shadow: var(--shadow-lg);
}

.brand-badge__plate img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.brand-badge__ring {
  position: absolute;
  z-index: 1;
  inset: -14px;
  border-radius: 50%;
  border: 1.5px dashed rgba(251, 251, 250, 0.4);
}

.brand-badge__star {
  position: absolute;
  z-index: 3;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  box-shadow: var(--shadow-sm);
}

.brand-badge__star--a { top: -8px; right: -12px; background: var(--c-red); color: var(--c-off-white); }
.brand-badge__star--b { bottom: -6px; left: -16px; background: var(--c-mint); color: var(--c-charcoal); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  z-index: 2;
  margin-top: 60px;
}

.footer__panel {
  position: relative;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--c-charcoal);
  color: var(--c-off-white);
  overflow: hidden;
}

.footer__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 0%, rgba(84, 195, 129, 0.22), transparent 34rem),
    radial-gradient(circle at 96% 12%, rgba(242, 64, 82, 0.2), transparent 32rem);
}

.footer__top {
  position: relative;
  padding: clamp(50px, 6vw, 76px) 0 clamp(40px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: clamp(30px, 4vw, 56px);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.footer__brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.footer__brand-mark img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--c-off-white);
  padding: 5px;
}

.footer__brand-mark strong {
  font-size: 17px;
  letter-spacing: -0.02em;
}

.footer__brand > p {
  max-width: 260px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(251, 251, 250, 0.62);
}

.footer__col h4 {
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 251, 250, 0.5);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 20px;
  font-size: 13.5px;
}

.footer__links a {
  position: relative;
  width: fit-content;
  color: rgba(251, 251, 250, 0.88);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 1.5px;
  background: var(--c-mint);
  transition: right var(--dur-fast) var(--ease-out);
}

.footer__links a:hover { color: var(--c-off-white); }
.footer__links a:hover::after { right: 0; }

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  font-size: 13px;
}

.footer__contact a,
.footer__contact span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(251, 251, 250, 0.82);
}

.footer__contact svg { flex: 0 0 auto; color: var(--c-mint); width: 15px; height: 15px; }
.footer__contact a:hover { color: var(--c-off-white); }

.footer__social {
  display: flex;
  gap: 10px;
}

.footer__social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(251, 251, 250, 0.2);
  color: var(--c-off-white);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.footer__social a:hover {
  background: var(--c-mint);
  border-color: var(--c-mint);
  color: var(--c-charcoal);
  transform: translateY(-3px);
}

.footer__bottom {
  position: relative;
  padding-block: 22px;
  border-top: 1px solid rgba(251, 251, 250, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11px;
  color: rgba(251, 251, 250, 0.55);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(251, 251, 250, 0.2);
  background: rgba(251, 251, 250, 0.06);
}

.lang-switch button {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: rgba(251, 251, 250, 0.6);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.lang-switch button.is-active {
  background: var(--c-off-white);
  color: var(--c-charcoal);
}

/* Header language switch reuses the same component on the light header */
.site-header .lang-switch {
  border-color: var(--c-line);
  background: rgba(251, 251, 250, 0.5);
}

.site-header .lang-switch button { color: var(--c-ink-faint); }
.site-header .lang-switch button.is-active { background: #54c381; color: #ffffff; }

/* ---------- Floating contact button ---------- */
.float-contact {
  position: fixed;
  z-index: 40;
  right: 22px;
  bottom: 22px;
  width: 74px;
  height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 50%;
  color: var(--c-off-white);
  background: var(--c-charcoal);
  box-shadow: var(--shadow-md);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-out);
}

.float-contact:hover {
  transform: scale(1.06) rotate(-4deg);
}

/* ---------- Founder greeter (mirrors float-contact on the left) ---------- */
.founder-greet {
  position: fixed;
  z-index: 40;
  left: 22px;
  bottom: 22px;
}

/* Stays hidden until the visitor scrolls past the hero — a "he just showed
   up" moment instead of cluttering the first screen. Scoped to html.js like
   [data-reveal] so a no-JS visitor still gets the widget, just unanimated. */
:where(html.js) .founder-greet {
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.founder-greet.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.founder-greet__avatar {
  position: relative;
  z-index: 2;
  display: block;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--c-surface);
  box-shadow: var(--shadow-md);
  animation: founder-breathe 5s var(--ease-soft) infinite;
  transition: transform var(--dur-fast) var(--ease-out);
}

.founder-greet__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.founder-greet:hover .founder-greet__avatar,
.founder-greet:focus-within .founder-greet__avatar {
  transform: scale(1.06) rotate(4deg);
  animation-play-state: paused;
}

@keyframes founder-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.founder-greet__dot {
  position: absolute;
  z-index: 3;
  top: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--c-mint);
  border: 2px solid var(--c-off-white);
}

.founder-greet__panel {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 86px;
  width: 246px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--r-sm);
  background: var(--c-charcoal);
  color: var(--c-off-white);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.founder-greet__panel::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 28px;
  width: 14px;
  height: 14px;
  background: var(--c-charcoal);
  transform: rotate(45deg);
}

.founder-greet:hover .founder-greet__panel,
.founder-greet:focus-within .founder-greet__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.founder-greet__panel-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
}

.founder-greet__panel-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.founder-greet__panel-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.founder-greet__panel-body strong { font-size: 13px; }
.founder-greet__panel-role { font-size: 9.5px; color: var(--c-mint); text-transform: uppercase; letter-spacing: 0.07em; }
.founder-greet__panel-msg { margin-top: 5px; font-size: 11.5px; line-height: 1.4; color: rgba(251, 251, 250, 0.75); }

/* Rotating one-line ticker beside the collapsed avatar — cycled by JS,
   hidden once the full panel takes over on hover/focus. */
.founder-greet__ticker {
  position: absolute;
  z-index: 1;
  left: 84px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 168px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--c-charcoal);
  color: var(--c-off-white);
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.founder-greet__ticker::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  background: var(--c-charcoal);
  transform: translateY(-50%) rotate(45deg);
}

.founder-greet__ticker.is-shown { opacity: 1; }

.founder-greet:hover .founder-greet__ticker,
.founder-greet:focus-within .founder-greet__ticker {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .founder-greet__avatar { animation: none; }
}

@media (max-width: 540px) {
  .founder-greet { left: 14px; bottom: 14px; }
  .founder-greet__avatar { width: 62px; height: 62px; }
  .founder-greet__panel { bottom: 74px; width: 216px; }
  .founder-greet__ticker { display: none; }
}

/* ---------- Genie popup (index.html experiment) ----------
   Ilyass "appears" mid-page to make a personal pitch. Triggered once per
   session by whichever "sensor" fires first: time on page, scroll depth, or
   exit-intent (see initGeniePopup in main.js). Self-contained — deleting
   #geniePopup's markup plus this block and the JS hook fully removes it. */
.genie-popup {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.genie-popup.is-open {
  opacity: 1;
  pointer-events: auto;
}

.genie-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(25, 21, 21, 0.55);
  backdrop-filter: blur(6px);
}

.genie-popup__card {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-lg);
  transform: translateY(24px) scale(0.94);
  transition: transform 0.4s var(--ease-out);
  overflow: hidden;
}

.genie-popup.is-open .genie-popup__card {
  transform: translateY(0) scale(1);
}

.genie-popup__inner {
  position: relative;
  padding: 46px 34px 34px;
  text-align: center;
}

.genie-popup__close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--c-ink-faint);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.genie-popup__close:hover { background: var(--c-surface-sunken); color: var(--c-ink); }

.genie-popup__portrait {
  position: relative;
  width: 118px;
  height: 118px;
  margin: 0 auto 20px;
}

.genie-popup__aura {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(84, 195, 129, 0.4), rgba(242, 64, 82, 0.16) 58%, transparent 72%);
  filter: blur(7px);
  animation: genie-aura-pulse 3.4s ease-in-out infinite;
}

@keyframes genie-aura-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 1; }
}

.genie-popup__portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--c-surface);
  box-shadow: var(--shadow-md);
}

.genie-popup__burst {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.genie-popup__burst span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-mint);
  opacity: 0;
}

.genie-popup__burst span:nth-child(even) { background: var(--c-red); }
.genie-popup__burst span:nth-child(1) { --a: 0deg; }
.genie-popup__burst span:nth-child(2) { --a: 60deg; }
.genie-popup__burst span:nth-child(3) { --a: 120deg; }
.genie-popup__burst span:nth-child(4) { --a: 180deg; }
.genie-popup__burst span:nth-child(5) { --a: 240deg; }
.genie-popup__burst span:nth-child(6) { --a: 300deg; }

.genie-popup.is-open .genie-popup__burst span {
  animation: genie-burst 900ms ease-out forwards;
}

@keyframes genie-burst {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(72px) scale(0.4); }
}

.genie-popup__eyebrow {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mint-deep);
}

.genie-popup__inner h3 {
  margin-top: 10px;
  font-size: clamp(21px, 3vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.genie-popup__text {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-ink-soft);
}

.genie-popup__cta {
  margin-top: 24px;
  width: 100%;
  justify-content: center;
}

.genie-popup__dismiss {
  display: block;
  margin: 14px auto 0;
  font-size: 12px;
  color: var(--c-ink-faint);
  text-decoration: underline;
}

.genie-popup__star {
  position: absolute;
  font-size: 16px;
  pointer-events: none;
}

.genie-popup__star--a { top: 8%; left: 6%; color: var(--c-mint); }
.genie-popup__star--b { bottom: 10%; right: 8%; color: var(--c-red); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .genie-popup__aura { animation: none; }
  .genie-popup.is-open .genie-popup__burst span { animation: none; opacity: 0; }
}

@media (max-width: 540px) {
  .genie-popup__inner { padding: 40px 24px 28px; }
  .genie-popup__portrait { width: 96px; height: 96px; }
}

/* ---------- Inner page hero ---------- */
.page-hero {
  padding-block: clamp(56px, 8vw, 100px) clamp(30px, 5vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.65fr);
  align-items: center;
  gap: 50px;
}

.page-hero h1 {
  margin-top: 20px;
  font-size: clamp(42px, 5.4vw, 78px);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -0.035em;
}

.page-hero p {
  margin-top: 22px;
  max-width: 520px;
  color: var(--c-ink-soft);
  font-size: 15.5px;
}

.mini-stage {
  position: relative;
  width: min(100%, 380px);
  height: 320px;
  margin-inline: auto;
}

.mini-card {
  position: absolute;
  inset: 14% 10% 10% 6%;
  padding: 34px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-lg);
  transform: translateZ(30px) rotate(-6deg);
}

.mini-card img { width: 34px; height: 34px; }
.mini-card span {
  display: block;
  width: 68%;
  height: 46px;
  margin-top: 40px;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--c-lime), var(--c-mint));
}

.mini-cube {
  position: absolute;
  right: 0;
  bottom: 6%;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: var(--c-off-white);
  background: var(--c-mint);
  box-shadow: var(--shadow-lg);
  font-size: 30px;
  font-weight: var(--fw-bold);
  transform: translateZ(90px) rotate(12deg);
}

.mini-orbit {
  position: absolute;
  top: 4%;
  right: 10%;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-red);
  color: var(--c-pink);
  font-size: 26px;
  box-shadow: var(--shadow-sm);
  transform: translateZ(70px);
}

/* ---------- About page ---------- */
.story-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  align-items: center;
}

.story-grid h2 { margin-top: 16px; font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.03em; line-height: 1.05; }

.story-card {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 4.5vw, 54px);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  box-shadow: var(--shadow-xs);
}

.story-card::before {
  content: "\201C";
  position: absolute;
  z-index: 0;
  top: -0.08em;
  left: 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(110px, 13vw, 150px);
  line-height: 1;
  color: var(--c-mint);
  opacity: 0.09;
  pointer-events: none;
}

.story-card .lede,
.story-card > p {
  position: relative;
  z-index: 1;
}

.story-card .lede { font-size: clamp(19px, 2.2vw, 27px); font-weight: var(--fw-medium); letter-spacing: -0.02em; line-height: 1.35; }
.story-card .lede + p { margin-top: 22px; color: var(--c-ink-soft); font-size: 14.5px; }

/* Hero visual: two founder photos stacked with a "2 founders" badge —
   ties the about-page hero directly to the page's actual subject instead
   of the generic brand mockup used on other inner pages. */
.about-hero-visual {
  position: relative;
  width: min(100%, 380px);
  height: 320px;
  margin-inline: auto;
}

.about-hero-visual__stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.about-hero-visual__photo {
  position: absolute;
  width: 155px;
  height: 195px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 6px solid var(--c-surface);
  box-shadow: var(--shadow-lg);
}

.about-hero-visual__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-hero-visual__photo--a {
  top: 6%;
  right: 8%;
  z-index: 2;
  transform: translateZ(60px) rotate(6deg);
}

.about-hero-visual__photo--b {
  bottom: 4%;
  left: 4%;
  z-index: 1;
  transform: translateZ(20px) rotate(-8deg);
}

.about-hero-visual__badge {
  position: absolute;
  top: 46%;
  left: 50%;
  z-index: 3;
  width: 92px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-charcoal);
  color: var(--c-off-white);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%) translateZ(120px) rotate(-4deg);
}

.about-hero-visual__badge strong {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.about-hero-visual__badge span {
  margin-top: 3px;
  font-size: 8px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-mint);
}

.about-hero-visual__star {
  position: absolute;
  color: var(--c-mint);
  font-size: 22px;
}

.about-hero-visual__star--a { top: 0; right: -2%; color: var(--c-red); font-size: 17px; }
.about-hero-visual__star--b { bottom: -2%; left: 30%; }

/* Stats strip: icon-topped so each figure reads as its own small feature
   instead of four bare numbers with no visual anchor. */
.stats-strip > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.stats-strip__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(84, 195, 129, 0.16);
  color: var(--c-mint-deep);
}

.stats-strip__icon svg { width: 20px; height: 20px; }

.stats-strip > div:nth-child(2) .stats-strip__icon { background: rgba(242, 64, 82, 0.14); color: var(--c-red); }
.stats-strip > div:nth-child(3) .stats-strip__icon { background: rgba(234, 161, 170, 0.28); color: var(--c-red); }
.stats-strip > div:nth-child(4) .stats-strip__icon { background: rgba(222, 218, 176, 0.45); color: var(--c-mint-deep); }

.capabilities-band {
  position: relative;
  overflow: hidden;
  margin-block: clamp(40px, 6vw, 70px);
  padding: clamp(40px, 6vw, 70px);
  border-radius: var(--r-md);
  border: 1px solid rgba(251, 251, 250, 0.1);
  background:
    radial-gradient(circle at 6% 8%, rgba(84, 195, 129, 0.24), transparent 42%),
    radial-gradient(circle at 96% 92%, rgba(242, 64, 82, 0.22), transparent 40%),
    var(--c-charcoal);
  color: var(--c-off-white);
  box-shadow: var(--shadow-lg);
}

.capabilities-band__head {
  max-width: 620px;
  margin: 0 auto clamp(32px, 5vw, 48px);
  text-align: center;
}

.capabilities-band__head .eyebrow {
  justify-content: center;
}

.capabilities-band h2 { margin-top: 18px; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.03em; }

.capabilities-band__head p {
  margin-top: 16px;
  color: rgba(251, 251, 250, 0.68);
  font-size: 13.5px;
  line-height: 1.7;
}

.capability-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Direct-child combinator matters here: without it this rule also caught
   the inner label <span>, nesting a second "card" inside the first. */
.capability-list > span {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(251, 251, 250, 0.12);
  background: rgba(251, 251, 250, 0.04);
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

/* A soft glow keyed to the icon's tint, seeping from the icon toward the
   label, so each card reads as one connected idea rather than an icon
   floating above unrelated text. */
.capability-list > span::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 18px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--c-mint);
  opacity: 0.16;
  filter: blur(26px);
  transform: translateY(-50%);
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}

.capability-list > span:nth-child(3n+2)::before { background: var(--c-red); }
.capability-list > span:nth-child(3n)::before { background: var(--c-lime); }

.capability-list > span:hover {
  background: rgba(251, 251, 250, 0.1);
  border-color: rgba(84, 195, 129, 0.5);
  transform: translateY(-4px);
}

.capability-list > span:hover::before {
  opacity: 0.3;
}

/* Capability rows carry a label plus a short supporting line. */
.capability-list__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.capability-list__text strong {
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
}

.capability-list__text em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(251, 251, 250, 0.62);
}

.capability-list svg {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(84, 195, 129, 0.2);
  color: var(--c-mint);
  transition: transform var(--dur-med) var(--ease-out);
}

.capability-list > span:hover svg {
  transform: scale(1.08) rotate(-6deg);
}

.capability-list > span:nth-child(3n+2) svg { background: rgba(242, 64, 82, 0.2); color: var(--c-pink); }
.capability-list > span:nth-child(3n) svg { background: rgba(222, 218, 176, 0.26); color: var(--c-lime); }

.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
  gap: 22px;
}

.founders-grid--home {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 1180px;
  margin-inline: auto;
}

.founder-story-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  color: var(--c-off-white);
  background:
    radial-gradient(circle at 15% 0%, rgba(84, 195, 129, 0.5), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(242, 64, 82, 0.48), transparent 55%),
    var(--c-charcoal);
  box-shadow: var(--shadow-sm);
}

.founder-story-card__star {
  position: absolute;
  top: 20px;
  right: 22px;
  font-size: 20px;
  color: rgba(251, 251, 250, 0.4);
}

.founder-story-card blockquote {
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.founder-story-card blockquote::before {
  content: "\201C";
  color: var(--c-mint);
}

.founder-story-card > p {
  font-size: 12px;
  color: rgba(251, 251, 250, 0.65);
  line-height: 1.6;
}

.founder-card {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  box-shadow: var(--shadow-xs);
}

.founder-card__media {
  position: relative;
  aspect-ratio: 4 / 4.4;
  overflow: hidden;
  background: var(--c-lime);
}

.founder-card__media img { width: 100%; height: 100%; object-fit: cover; }

.founder-card__media--placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--c-lime), var(--c-pink));
}

.founder-card__media--placeholder svg { width: 64px; height: 64px; color: rgba(25,21,21,0.55); }

.founder-card h3 { padding: 20px 20px 0; font-size: 16px; }
.founder-card p { padding: 4px 20px 20px; color: var(--c-ink-soft); font-size: 12px; }

.stats-strip {
  padding-block: clamp(40px, 6vw, 66px);
  border-block: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stats-strip--three { grid-template-columns: repeat(3, 1fr); }

.stats-strip div { text-align: center; }
.stats-strip strong { display: block; font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.03em; }
.stats-strip span:not(.stats-strip__icon) { display: block; margin-top: 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-faint); }

/* ---------- Manifesto / narrative statement ---------- */
.manifesto {
  position: relative;
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(60px, 9vw, 110px) clamp(24px, 6vw, 70px);
  text-align: center;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line-soft);
  background:
    radial-gradient(circle at 14% 18%, rgba(84, 195, 129, 0.16), transparent 46%),
    radial-gradient(circle at 88% 82%, rgba(242, 64, 82, 0.14), transparent 46%),
    var(--c-surface);
  box-shadow: var(--shadow-sm);
}

.manifesto::before {
  content: "\201C";
  position: absolute;
  z-index: 0;
  top: -0.1em;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(170px, 22vw, 320px);
  line-height: 1;
  color: var(--c-mint);
  opacity: 0.07;
  pointer-events: none;
}

.manifesto__star {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 18px;
  font-size: 26px;
  color: var(--c-mint);
}

.manifesto__star span {
  font-size: 15px;
  color: var(--c-red);
}

.manifesto h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.manifesto h2 em.accent {
  position: relative;
}

.manifesto h2 em.accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.07em;
  height: 0.08em;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--c-mint), var(--c-red));
  opacity: 0.5;
}

.manifesto p {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 22px auto 0;
  color: var(--c-ink-soft);
  font-size: 15px;
  line-height: 1.75;
}

/* ---------- Video showcase ---------- */
.video-showcase {
  position: relative;
  max-width: 980px;
  margin-inline: auto;
  padding: 44px;
}

.video-showcase__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 20%, rgba(84, 195, 129, 0.4), transparent 52%),
    radial-gradient(circle at 84% 78%, rgba(242, 64, 82, 0.34), transparent 52%);
  filter: blur(46px);
  opacity: 0.85;
}

.video-showcase__token {
  position: absolute;
  z-index: 2;
  font-size: 22px;
  pointer-events: none;
}

.video-showcase__token--a { top: 8px; left: 8px; color: var(--c-mint); }
.video-showcase__token--b { bottom: 8px; right: 8px; color: var(--c-red); font-size: 17px; }

.video-showcase__frame {
  position: relative;
  z-index: 1;
  padding: 3px;
  border-radius: calc(var(--r-md) + 4px);
  background: linear-gradient(135deg, var(--c-mint), var(--c-lime) 45%, var(--c-red));
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-med) var(--ease-out);
}

.video-showcase__inner {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--c-charcoal);
}

.video-showcase__player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--c-charcoal);
}

/* Belt-and-braces alongside the disablepictureinpicture attribute: some
   engines still render the native picture-in-picture hover affordance
   (a plain white circle) even when that attribute is present. */
.video-showcase__player::-webkit-media-controls-picture-in-picture-button {
  display: none !important;
}

.video-showcase__corner {
  position: absolute;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-color: rgba(251, 251, 250, 0.85);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.video-showcase__corner--tl { top: 16px; left: 16px; border-top: 2px solid; border-left: 2px solid; border-radius: 8px 0 0 0; }
.video-showcase__corner--tr { top: 16px; right: 16px; border-top: 2px solid; border-right: 2px solid; border-radius: 0 8px 0 0; }
.video-showcase__corner--bl { bottom: 16px; left: 16px; border-bottom: 2px solid; border-left: 2px solid; border-radius: 0 0 0 8px; }
.video-showcase__corner--br { bottom: 16px; right: 16px; border-bottom: 2px solid; border-right: 2px solid; border-radius: 0 0 8px 0; }

.video-showcase__badge {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(25, 21, 21, 0.6);
  backdrop-filter: blur(6px);
  color: var(--c-off-white);
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.video-showcase__play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(25, 21, 21, 0.22);
  transition: background var(--dur-fast) var(--ease-out);
}

.video-showcase__play:hover {
  background: rgba(25, 21, 21, 0.36);
}

.video-showcase__play-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92px;
  height: 92px;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(251, 251, 250, 0.7);
  border-radius: 50%;
  animation: video-ring-pulse 2.4s ease-out infinite;
}

.video-showcase__play span:not(.video-showcase__play-ring) {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-off-white);
  color: var(--c-charcoal);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-fast) var(--ease-out);
}

.video-showcase__play:hover span:not(.video-showcase__play-ring) {
  transform: scale(1.08);
}

.video-showcase__play svg {
  width: 28px;
  height: 28px;
  margin-left: 4px;
}

@keyframes video-ring-pulse {
  0% { transform: translate(-50%, -50%) scale(0.82); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .video-showcase__play-ring { animation: none; }
}

.video-showcase.is-playing .video-showcase__play,
.video-showcase.is-playing .video-showcase__badge,
.video-showcase.is-playing .video-showcase__corner {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 640px) {
  .video-showcase { padding: 20px; }
  .video-showcase__token { display: none; }
}

/* ---------- Section divider (scroll-story connective tissue) ---------- */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-block: 36px;
}

.section-divider__line {
  width: clamp(30px, 6vw, 90px);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c-line));
}

.section-divider__line:last-child {
  background: linear-gradient(to left, transparent, var(--c-line));
}

.section-divider__star {
  font-size: 16px;
}

.section-divider__star--mint { color: var(--c-mint); margin-right: -6px; }
.section-divider__star--red { color: var(--c-red); font-size: 11px; }

/* The divider doubles as the section's eyebrow when it carries a label —
   one line of "★★ LABEL ★★" instead of a divider immediately followed by
   an eyebrow that repeats the same two stars. */
.section-divider__label {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  white-space: nowrap;
}

/* ---------- Scroll progress + fixed particle field (injected by main.js) ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-mint), var(--c-red));
  transform-origin: left;
  transition: width 80ms linear;
}

.bg-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-particles span {
  position: absolute;
  color: var(--c-mint);
  opacity: 0.5;
  font-size: 15px;
  will-change: transform;
}

.bg-particles span:nth-child(3n) { color: var(--c-red); }
.bg-particles span:nth-child(3n+1) { color: var(--c-lime); }

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

@media (max-width: 640px) {
  .bg-particles { display: none; }
}

/* ---------- Cursor spotlight (injected by main.js, fine-pointer only) ---------- */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 35;
  width: 440px;
  height: 440px;
  margin-left: -220px;
  margin-top: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(84, 195, 129, 0.22), rgba(242, 64, 82, 0.1) 45%, transparent 72%);
  filter: blur(6px);
  mix-blend-mode: soft-light;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
  will-change: transform;
}

.cursor-glow.is-visible {
  opacity: 1;
}

@media (max-width: 900px) {
  .cursor-glow { display: none; }
}

/* ---------- Case study pages ---------- */
.case-hero {
  position: relative;
  padding: clamp(32px, 6vw, 60px);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(222, 218, 176, 0.4);
}

.case-hero--red { background: rgba(242, 64, 82, 0.14); }
.case-hero--pink { background: rgba(234, 161, 170, 0.26); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
}

.back-link svg { width: 16px; height: 16px; }

.case-hero h1 {
  margin-top: 24px;
  font-size: clamp(46px, 7vw, 90px);
  font-weight: var(--fw-black);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 780px;
}

.case-hero__summary {
  margin-top: 20px;
  max-width: 520px;
  font-size: 15.5px;
  color: var(--c-ink-soft);
}

.case-hero__cover {
  margin-top: 40px;
  max-width: 640px;
}

.case-hero__cover-frame {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 10px solid var(--c-surface);
}

.case-hero__cover-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.case-facts {
  padding-block: clamp(32px, 5vw, 48px);
  border-bottom: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.case-facts dt { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-faint); }
.case-facts dd { margin-top: 8px; font-size: 14px; font-weight: var(--fw-semibold); }
.case-facts a { display: inline-flex; align-items: center; gap: 6px; color: var(--c-mint-deep); }

.case-narrative {
  padding-block: clamp(50px, 7vw, 90px);
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 60px;
}

.case-narrative h2 { margin-top: 16px; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.03em; }
.case-narrative p { color: var(--c-ink-soft); font-size: 15px; }

.next-project {
  padding-block: 34px;
  border-block: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.next-project small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-faint); }
.next-project strong { display: block; margin-top: 6px; font-size: 26px; letter-spacing: -0.03em; }

/* ---------- Contact page ---------- */
.contact-layout {
  padding-block: clamp(40px, 6vw, 70px);
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.contact-intro h1 {
  margin-top: 20px;
  font-size: clamp(38px, 4.4vw, 58px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.contact-intro > p {
  margin-top: 20px;
  color: var(--c-ink-soft);
  font-size: 14.5px;
  max-width: 420px;
}

.trust-points {
  margin-top: 30px;
  display: grid;
  gap: 10px;
}

.trust-points p {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  font-size: 13px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.trust-points p:hover { transform: translateX(4px); border-color: var(--c-line); }

.trust-points__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(84, 195, 129, 0.16);
  color: var(--c-mint-deep);
}

.trust-points__icon svg { width: 15px; height: 15px; }

.trust-points p:nth-child(2) .trust-points__icon { background: rgba(242, 64, 82, 0.14); color: var(--c-red); }
.trust-points p:nth-child(3) .trust-points__icon { background: rgba(234, 161, 170, 0.28); color: var(--c-red); }
.trust-points p:nth-child(4) .trust-points__icon { background: rgba(222, 218, 176, 0.5); color: var(--c-mint-deep); }

.response-card {
  position: relative;
  overflow: hidden;
  margin-top: 22px;
  width: fit-content;
  padding: 16px 22px 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(242, 64, 82, 0.18);
  background: rgba(242, 64, 82, 0.08);
}

.response-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--c-red);
}

.response-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-off-white);
  box-shadow: var(--shadow-xs);
}

.response-card svg { color: var(--c-red); }
.response-card strong { display: block; font-size: 13px; }
.response-card span { font-size: 9.5px; color: var(--c-ink-faint); }

/* Contact-page hero visual: a mock message exchange, tied directly to the
   act of getting in touch instead of the generic brand mockup used elsewhere. */
.contact-preview {
  position: relative;
  width: min(100%, 340px);
  height: 230px;
  margin-top: 46px;
}

.contact-preview__stage { position: relative; width: 100%; height: 100%; }

.contact-preview__bubble {
  position: absolute;
  max-width: 250px;
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
}

.contact-preview__bubble--out {
  top: 4px;
  right: 0;
  background: var(--c-charcoal);
  color: var(--c-off-white);
  border-bottom-right-radius: 4px;
  transform: rotate(-1.5deg);
}

.contact-preview__bubble--in {
  bottom: 14px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  color: var(--c-ink);
  border-bottom-left-radius: 4px;
  transform: rotate(1.5deg);
}

.contact-preview__avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-mint);
}

.contact-preview__avatar img { width: 14px; height: 14px; display: block; }

.contact-preview__star {
  position: absolute;
  font-size: 18px;
}

.contact-preview__star--a { top: 46%; right: 26px; color: var(--c-red); }
.contact-preview__star--b { bottom: 0; right: 76px; color: var(--c-mint); font-size: 13px; }

/* ---------- Contact: find-us panel (info list + map) ---------- */
.contact-find-panel {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-sm);
}

.contact-find-panel__info {
  padding: clamp(28px, 4vw, 46px);
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
}

.contact-find-panel__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--c-line-soft);
  transition: transform var(--dur-fast) var(--ease-out);
}

.contact-find-panel__item:last-child {
  border-bottom: none;
}

a.contact-find-panel__item:hover {
  transform: translateX(4px);
}

.contact-find-panel__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(84, 195, 129, 0.16);
  color: var(--c-mint-deep);
}

.contact-find-panel__icon svg {
  width: 19px;
  height: 19px;
}

.contact-find-panel__item:nth-child(2) .contact-find-panel__icon { background: rgba(242, 64, 82, 0.14); color: var(--c-red); }
.contact-find-panel__item:nth-child(3) .contact-find-panel__icon { background: rgba(234, 161, 170, 0.28); color: var(--c-red); }
.contact-find-panel__item:nth-child(4) .contact-find-panel__icon { background: rgba(222, 218, 176, 0.45); color: var(--c-mint-deep); }

.contact-find-panel__item strong {
  display: block;
  font-size: 13.5px;
}

.contact-find-panel__item > span:last-child > span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--c-ink-soft);
}

.contact-find-panel__map {
  position: relative;
  min-height: 340px;
  background: var(--c-surface-sunken);
}

.contact-find-panel__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.15) contrast(1.03);
}

@media (max-width: 900px) {
  .contact-find-panel { grid-template-columns: 1fr; }
  .contact-find-panel__map { min-height: 280px; }
}

.form-panel {
  padding: clamp(26px, 4vw, 50px);
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-sm);
}

.form-panel__head {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--c-line);
}

.form-panel__head h2 { margin-top: 12px; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.02em; }
.form-panel__head p { margin-top: 10px; font-size: 10.5px; color: var(--c-ink-faint); }

form { margin-top: 28px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.field { margin-top: 20px; }
.form-grid .field { margin-top: 0; }

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
}

.field label .req { color: var(--c-red); }

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-xs);
  background: #fffefe;
  font-size: 13.5px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.field textarea { resize: vertical; min-height: 120px; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--c-mint);
  box-shadow: 0 0 0 4px rgba(84, 195, 129, 0.16);
}

.field.has-error input,
.field.has-error textarea {
  border-color: var(--c-red);
}

.field__error {
  display: none;
  margin-top: 6px;
  font-size: 11px;
  color: var(--c-red);
}

.field.has-error .field__error {
  display: block;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.chip-group input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.chip-group label {
  width: auto;
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line);
  font-size: 12px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.chip-group input:checked + label {
  background: #54c381;
  border-color: #54c381;
  color: #ffffff;
}

.form-submit {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.form-submit .btn {
  width: 100%;
}

.form-status {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--r-xs);
  background: rgba(84, 195, 129, 0.16);
  font-size: 13px;
  font-weight: var(--fw-medium);
  display: none;
}

.form-status.is-visible { display: block; }

.form-status--error {
  background: rgba(242, 64, 82, 0.14);
  color: var(--c-charcoal);
}

.form-status a { text-decoration: underline; }

.form-submit__note {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--c-ink-faint);
}

/* Bot bait: off-screen rather than display:none, which some bots skip. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 404 ---------- */
.not-found {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 80px;
}

.not-found__code {
  font-size: clamp(90px, 16vw, 200px);
  font-weight: var(--fw-black);
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(120deg, var(--c-charcoal), var(--c-mint-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.not-found h1 { margin-top: 8px; font-size: clamp(22px, 3vw, 32px); }
.not-found p { margin-top: 14px; color: var(--c-ink-soft); max-width: 420px; }
.not-found .btn { margin-top: 30px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid--bento { grid-template-columns: repeat(2, 1fr); }
  .project-card--feature { grid-column: span 2; }
  .capability-list { grid-template-columns: repeat(2, 1fr); }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero__stage-wrap { order: -1; }
  .hero__meta { gap: 24px; }
  .page-hero { grid-template-columns: 1fr; }
  .mini-stage { order: -1; }
  .story-grid { grid-template-columns: 1fr; gap: 30px; }
  .case-narrative { grid-template-columns: 1fr; gap: 30px; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-intro { position: static; }
  .process-detail { grid-template-columns: 1fr; gap: 16px; }
  .service-detail { grid-template-columns: 1fr; gap: 16px; }
  .cta-band { grid-template-columns: 1fr; text-align: left; }
  .cta-band__orbit { justify-self: start; }
  .cta-band > div:nth-child(2) { padding-left: 0; }
  .cta-band > div:nth-child(2)::before { display: none; }
  .footer__top { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .services-grid,
  .services-grid--compact,
  .work-grid,
  .workflow-grid,
  .timeline-grid,
  .form-grid,
  .stats-strip,
  .founders-grid,
  .case-facts,
  .marquee__item { }
  .services-grid,
  .services-grid--compact { grid-template-columns: 1fr 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .project-card--feature { grid-column: span 1; }
  .workflow-grid { grid-template-columns: 1fr; }
  .timeline-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .stats-strip.stats-strip--three { grid-template-columns: 1fr; }
  .process-strip.process-strip--three { grid-template-columns: 1fr; }
  .case-facts { grid-template-columns: repeat(2, 1fr); }
  .sector-grid { grid-template-columns: 1fr; }
  .process-strip { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .process-connector { display: none; }
  .faq-item__a p { padding-left: 22px; }
  .footer__top { grid-template-columns: 1fr; gap: 34px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 540px) {
  :root { --shell: min(1320px, calc(100% - 32px)); }
  .video-showcase__play span { width: 56px; height: 56px; }
  .video-showcase__play svg { width: 20px; height: 20px; }
  .video-showcase__play-ring { width: 66px; height: 66px; }
  .section-divider__line { width: clamp(18px, 10vw, 40px); }
  .section-divider__label { font-size: 9.5px; letter-spacing: 0.16em; }
  .services-grid,
  .services-grid--compact,
  .stats-strip,
  .founders-grid,
  .case-facts,
  .process-strip,
  .capability-list { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .float-contact { width: 62px; height: 62px; font-size: 9px; right: 14px; bottom: 14px; }
}