/* ============================================================================
 * Suunta.ai Landing v2 — Contact page (premium rebuild 2026-05-25)
 * ----------------------------------------------------------------------------
 * Linear Contact / Stripe Sales / Vercel Sales -taso. LIGHT canvas.
 *
 * Rakenne (3 osiota):
 *   1. .v2-contact-hero        — editorial asymmetric split (1.4fr 1fr)
 *   2. .v2-contact-main        — routing-shortcuts (vasen) + form (oikea)
 *   3. .v2-contact-trust       — typografinen inline-rivi
 *
 * Periaatteet:
 *   - One accent per view: emerald vain submit-CTA:ssa. EI muita emerald-elementtejä.
 *   - Hairline borders (rgba 0.05–0.08). EI heavy borders.
 *   - Hairline-input (bg rgba 0.025, border rgba 0.08, focus emerald rim).
 *   - Hover-mikrointeraktiot subtle (translateY -1px tai border-alpha shift).
 *   - Section padding tight (var(--space-12) -> var(--space-16) -> var(--space-20)).
 *
 * Säilytetty:
 *   - .block-form-status -luokka (main.js käsittelee AJAX-submitin).
 *   - Kaikki tokenit (00-tokens.css) — EI hardcoded hex-arvoja.
 * ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════════
 * 1. EDITORIAL HERO — asymmetric split
 * ════════════════════════════════════════════════════════════════════════════ */

/* HUOM: Hero on first-child-section. 01-base.css määrittelee siihen
 * margin-top: -64/-72px + padding-top: calc(72px + var(--section-y-…)) jotta
 * sticky-header ei peitä sisältöä. Älä overridaa padding-top:ia tässä.
 * Ainoastaan padding-bottom tiivistetään (alisivut eivät tarvitse 128px
 * anchor-paddingia osion alapuolelle). */
.v2-contact-hero {
  padding-bottom: var(--space-10) !important; /* 40px mobile */
}

@media (min-width: 768px) {
  .v2-contact-hero {
    padding-bottom: var(--space-12) !important; /* 48 */
  }
}

@media (min-width: 1024px) {
  .v2-contact-hero {
    padding-bottom: var(--space-16) !important; /* 64 */
  }
}

.v2-contact-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  max-width: 1180px;
  margin-inline: auto;
  /* Vasen text-stack ja oikea hero-kuva alkavat samasta yläreunasta.
     Aiemmin align-items: end → teksti laskeutui kuvan pohjaan asti
     (kuva on pidempi), jolloin "GET IN TOUCH" alkoi paljon kuvan
     yläreunan alapuolelta. */
  align-items: start;
}

@media (min-width: 900px) {
  .v2-contact-hero__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-16);
  }
}

.v2-contact-hero__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 640px;
}

.v2-contact-hero__h1 {
  /* Hero-tasoinen typografia, tighter kuin alisivujen h1. Käytetään 5xl-tokenia
     (clamp 36→64px) jotta linja matchaa etusivun heroon. */
  font-size: var(--text-5xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tightest);
  font-weight: var(--weight-display);
  color: var(--text-primary);
  margin: 0;
}

.v2-contact-hero__lead {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 560px;
}

/* SLA-rivi — typografinen, kevyt emerald-dot (yksi mikro-aksentti, ei pillaria) */
.v2-contact-hero__sla {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}

.v2-contact-hero__sla strong {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.v2-contact-hero__sla-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--emerald-500);
  /* Sub-pulse — yksi ainoa motion-mikro koko sivulla, signal: live status */
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
  animation: contactDot 2.4s var(--ease) infinite;
}

@keyframes contactDot {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.40); }
  70%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-contact-hero__sla-dot { animation: none; }
}

/* ─── Hero right: meta-block (Office / Hours / Reply / Languages) ─── */
.v2-contact-hero__right {
  /* Editorial dl-list — hairline-rows, monospace-like alignment.
     Mobile: täysi leveys ja ylhäällä reilumpi gap.
     Desktop: oikealla, vasten textin baseline:a. */
}

.v2-contact-hero__meta {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.v2-contact-hero__meta-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  align-items: baseline;
}

.v2-contact-hero__meta-row dt {
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0;
}

.v2-contact-hero__meta-row dd {
  font-size: var(--text-sm);
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 899px) {
  .v2-contact-hero__meta-row {
    grid-template-columns: 96px 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * 2. ROUTING + FORM — main split
 * ════════════════════════════════════════════════════════════════════════════ */

.v2-contact-main {
  padding-block: var(--space-12) var(--space-16) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

@media (min-width: 768px) {
  .v2-contact-main {
    padding-block: var(--space-16) var(--space-20) !important;
  }
}

@media (min-width: 1024px) {
  .v2-contact-main {
    padding-block: var(--space-20) var(--space-24) !important;
  }
}

.v2-contact-main__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  max-width: 1180px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .v2-contact-main__grid {
    /* 55% vasen / 45% oikea — vasemmalla on enemmän copya. */
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-16);
  }
}

@media (min-width: 1200px) {
  .v2-contact-main__grid {
    gap: var(--space-20);
  }
}

.v2-contact-main__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.v2-contact-main__section-label {
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 var(--space-4) 0;
}

/* ─── Smart topic-list (2026-05-27 rebuild) ───────────────────────────
 * Yhdistää aiemmat 2 listaa (routing-shortcuts + direct-emails) yhteen
 * editorial-tyyliseen luetteloon. Kukin rivi tarjoaa kaksi reittiä:
 *   1. Mailto-linkki (mono-font, subtle underline-hover)
 *   2. CTA-nappi joka pre-fyllittää lomakkeen + scrollaa formiin
 *
 * Layout: 2-col grid desktopissa (head | actions), mobile-stack alle 640px.
 * Hover: 6px translate oikealle + subtle slate-background-fade.
 * is-selected: kun lomakkeen topic on tämä → vasemmalla 3px emerald-bar.
 * ─────────────────────────────────────────────────────────────────────── */
.v2-contact-topics {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.v2-contact-topic {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-2) var(--space-5) 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  position: relative;
  transition:
    background var(--transition-hover),
    padding-left var(--transition-hover);
}

.v2-contact-topic:hover {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.02) 0%, transparent 75%);
  padding-left: var(--space-3);
}

/* is-selected -tila (JS lisää kun lomakkeen topic = tämä rivi).
   Emerald-rim vasemmalle, subtle background. */
.v2-contact-topic.is-selected {
  background: rgba(16, 185, 129, 0.05);
  box-shadow: inset 3px 0 0 0 var(--emerald-500);
  padding-left: var(--space-4);
}

@media (max-width: 640px) {
  .v2-contact-topic {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding-block: var(--space-4);
  }
}

/* ─── Vasen puoli: numero + label + desc ─── */
.v2-contact-topic__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: baseline;
  min-width: 0;
}

.v2-contact-topic__num {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text-tertiary);
  transition: color var(--transition-hover);
}

.v2-contact-topic:hover .v2-contact-topic__num,
.v2-contact-topic.is-selected .v2-contact-topic__num {
  color: var(--text-primary);
}

.v2-contact-topic__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.v2-contact-topic__kind {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: -0.012em;
  color: var(--text-primary);
  line-height: 1.3;
}

.v2-contact-topic__desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
  line-height: 1.45;
}

/* ─── Oikea puoli: email + sep + cta ─── */
.v2-contact-topic__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .v2-contact-topic__actions {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding-left: calc(var(--space-5) + 16px);  /* indent num-leveyden alle */
  }
}

.v2-contact-topic__email {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  text-decoration: none;
  position: relative;
  transition: color var(--transition);
}

.v2-contact-topic__email::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: 0 50%;
  transition:
    opacity var(--transition-hover),
    transform var(--transition-hover);
}

.v2-contact-topic__email:hover {
  color: var(--text-primary);
}

.v2-contact-topic__email:hover::after {
  opacity: 0.6;
  transform: scaleX(1);
}

.v2-contact-topic__sep {
  color: var(--text-tertiary);
  opacity: 0.5;
  user-select: none;
}

@media (max-width: 640px) {
  .v2-contact-topic__sep { display: none; }
}

.v2-contact-topic__cta {
  appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;

  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  color: var(--text-primary);
  transition: color var(--transition-hover);
}

.v2-contact-topic__cta i {
  font-size: 11px;
  color: var(--text-tertiary);
  transition:
    color var(--transition-hover),
    transform var(--transition-hover);
}

.v2-contact-topic__cta:hover {
  color: var(--emerald-600);
}

.v2-contact-topic__cta:hover i {
  color: var(--emerald-500);
  transform: translateX(3px);
}

.v2-contact-topic.is-selected .v2-contact-topic__cta {
  color: var(--emerald-600);
}

.v2-contact-topic.is-selected .v2-contact-topic__cta i {
  color: var(--emerald-500);
  transform: translateX(3px);
}

.v2-contact-topic__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
  border-radius: 4px;
}

/* ─── Calendar-rivi (yksi linkki) ─────────────────────────────────── */
.v2-contact-cal {
  margin: 0;
  padding-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  letter-spacing: -0.005em;
}

.v2-contact-cal__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.18);
  padding-bottom: 1px;
  transition:
    color var(--transition),
    border-color var(--transition-hover);
}

.v2-contact-cal__link i {
  font-size: 10px;
  opacity: 0.7;
  transition: transform var(--transition-hover);
}

.v2-contact-cal__link:hover {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

.v2-contact-cal__link:hover i {
  transform: translate(2px, -2px);
}

/* ════════════════════════════════════════════════════════════════════════════
 * 2.b FORM (oikea sarake) — kompakti hairline
 * ════════════════════════════════════════════════════════════════════════════ */

.v2-contact-main__right {
  /* Sticky desktopilla — pidetään form näkyvillä kun vasen scrollaa */
  position: relative;
}

@media (min-width: 1024px) {
  .v2-contact-main__right {
    position: sticky;
    top: var(--space-20);
    align-self: start;
  }
}

.v2-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* Subtle elevated panel — hairline border + tiny shadow, ei card-glow */
  background: var(--white);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  /* Lähes näkymätön shadow vain laatutuntemukseen */
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.02),
    0 4px 16px -8px rgba(15, 23, 42, 0.06);
}

@media (max-width: 540px) {
  .v2-contact-form {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
  }
}

.v2-contact-form__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  margin-bottom: var(--space-2);
}

.v2-contact-form__title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin: 0;
}

.v2-contact-form__sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.005em;
  margin: 0;
}

.v2-contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 520px) {
  .v2-contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.v2-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v2-contact-form__label {
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.v2-contact-form__input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.025);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.4;
  transition:
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

.v2-contact-form__input::placeholder {
  color: var(--text-tertiary);
}

.v2-contact-form__input:hover:not(:focus) {
  border-color: rgba(15, 23, 42, 0.14);
}

.v2-contact-form__input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--emerald-500);
  /* Subtle 2px rim — EI dramaattista glow:ta */
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.14);
}

.v2-contact-form__textarea {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
  line-height: 1.5;
}

.v2-contact-form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}

.v2-contact-form__submit {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  margin-top: var(--space-2);
}

.v2-contact-form__submit .btn {
  width: 100%;
  justify-content: center;
}

.v2-contact-form__legal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.005em;
  line-height: 1.5;
  margin: 0;
}

.v2-contact-form__legal i {
  font-size: 10px;
  color: var(--text-tertiary);
}

/* Form-status (success / error) — pieni emerald banner. Vain success
 * saa accent:n; error käyttää neutral red-500. */
.block-form-status:not([hidden]) {
  display: block;
  margin-top: var(--space-2);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
}

.block-form-status[data-state='success'] {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.22);
  color: var(--emerald-700);
}

.block-form-status[data-state='error'] {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.20);
  color: var(--red-600);
}

/* ════════════════════════════════════════════════════════════════════════════
 * 3. INLINE TRUST BAND — typografinen viiva, ei iconia, ei pillaria
 * ════════════════════════════════════════════════════════════════════════════ */

.v2-contact-trust {
  padding-block: var(--space-10) var(--space-16) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

@media (min-width: 768px) {
  .v2-contact-trust {
    padding-block: var(--space-12) var(--space-20) !important;
  }
}

.v2-contact-trust__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  color: var(--text-tertiary);
  text-align: center;
}

.v2-contact-trust__line > span:not(.v2-contact-trust__sep) {
  white-space: nowrap;
}

.v2-contact-trust__sep {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  opacity: 0.6;
}

@media (max-width: 540px) {
  .v2-contact-trust__line {
    flex-direction: column;
    gap: var(--space-2);
  }
  .v2-contact-trust__sep {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * MOBILE TWEAKS
 * ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .v2-contact-hero__h1 {
    font-size: clamp(2rem, 7vw, 2.5rem);
  }
  .v2-contact-shortcut {
    padding: var(--space-4) var(--space-2) var(--space-4) 0;
    gap: var(--space-4);
  }
  .v2-contact-shortcut__arrow {
    width: 24px;
    height: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * HERO PHOTO + QUICK-META (2026-05-27)
 * ─────────────────────────────────────────────────────────────────────────
 * Markkinoinnin palaute: "Nyt ei näy mitään visua" → tiimin valokuva
 * oikealle hero-grid:n puolelle. Meta-tiedot kompaktiin inline-listaan
 * vasemmalla puolella, jotta kuva saa täyden tilan oikealla.
 * ════════════════════════════════════════════════════════════════════════════ */

.v2-contact-hero__photo {
  margin: 0;
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-subtle, #f6f8fb);
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(15, 23, 42, 0.08);
  /* Pienennys 2026-05-27: rajataan max-width:llä etteivät hero-kuva
     dominoi grid-saraketta. Justify-self pitää kuvan oikealla puolella. */
  max-width: 420px;
  width: 100%;
  justify-self: end;
}

.v2-contact-hero__photo::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 50%, transparent);
  z-index: 2;
  pointer-events: none;
}

.v2-contact-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

/* Subtle aurora-emerald glow taustalla — brand-feel */
.v2-contact-hero__photo::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.10) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* Mobiilissa kuva-aspekti voi olla matalampi jotta ei vie kohtuuttoman
   paljon viewportia. */
@media (max-width: 767px) {
  .v2-contact-hero__photo {
    aspect-ratio: 16 / 11;
    margin-top: var(--space-6);
  }
}

/* Quick-meta — kompakti inline-lista lead-tekstin alle. */
.v2-contact-hero__quickmeta {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.v2-contact-hero__quickmeta li {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}

.v2-contact-hero__quickmeta li span {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-right: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PRODUCT TOUR — selkeä oma osio contact-sivulla (2026-05-27)
 * ─────────────────────────────────────────────────────────────────────────
 * Markkinoinnin palaute: footerin "Book a product tour" -linkki vie
 * contact-sivulle, mutta tarvitaan selkeä oma osio jotta käyttäjä näkee
 * mitä tour sisältää. Footer-linkki vie nyt /contact/#product-tour.
 * ════════════════════════════════════════════════════════════════════════════ */

.v2-contact-tour {
  position: relative;
  overflow: hidden;
}

.v2-contact-tour__glow {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 50%;
  height: 60%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.v2-contact-tour__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.v2-contact-tour__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald-400, var(--emerald-500));
  margin: 0 0 var(--space-4) 0;
}

.v2-contact-tour__heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--weight-medium);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 var(--space-5) 0;
  color: var(--text-primary, #ffffff);
}

.v2-contact-tour__lead {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  margin: 0 0 var(--space-10) 0;
  max-width: 580px;
  margin-inline: auto;
}

.v2-contact-tour__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-10) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  text-align: left;
}

@media (min-width: 768px) {
  .v2-contact-tour__bullets {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

.v2-contact-tour__bullets li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .v2-contact-tour__bullets li {
    flex-direction: column;
    gap: var(--space-3);
  }
}

.v2-contact-tour__bullet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.20);
  color: var(--emerald-400, var(--emerald-500));
  font-size: 14px;
  flex-shrink: 0;
}

.v2-contact-tour__bullets strong {
  display: block;
  font-size: 0.95rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary, #ffffff);
  margin-bottom: var(--space-1);
}

.v2-contact-tour__bullets p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary, rgba(255, 255, 255, 0.65));
  margin: 0;
}

.v2-contact-tour__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.v2-contact-tour__cta-hint {
  font-size: 12px;
  color: var(--text-muted, rgba(255, 255, 255, 0.45));
  margin: 0;
}