/* Vesurila — vaihtoehto 4: valokeila */

:root {
  --ink: #f0f1ef;
  --muted: rgb(240 241 239 / 0.66);
  --orange: #e0913e;
  --green: #97be74;
  --line: rgb(212 186 140 / 0.22);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(60% 42% at 50% 30%, #1d1f24 0%, rgb(29 31 36 / 0) 70%),
    linear-gradient(180deg, #121316 0%, #0c0d10 60%, #08090b 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../images/paper-grain.webp?v=202607121653") repeat;
  background-size: 140px;
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2.4rem, 6vh, 4.2rem);
  padding: clamp(2.5rem, 7vh, 5rem) clamp(1.25rem, 4vw, 3rem);
  position: relative;
}

/* pehmeä valokeila logon takana */
.halo {
  position: absolute;
  top: clamp(6rem, 16vh, 11rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(72vw, 46rem);
  aspect-ratio: 2.2;
  background: radial-gradient(50% 50% at 50% 50%, rgb(226 208 178 / 0.09) 0%, rgb(226 208 178 / 0) 100%);
  pointer-events: none;
}

.mark {
  position: relative;
  width: min(80vw, 30rem);
  overflow: hidden;
  border-radius: 6px;
}

.mark img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.5));
}

/* kertaluontoinen valopyyhkäisy */
.sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgb(255 255 255 / 0) 30%, rgb(240 232 216 / 0.14) 50%, rgb(255 255 255 / 0) 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sheen { animation: sweep 1.6s cubic-bezier(0.4, 0.2, 0.2, 1) 0.6s forwards; }
  .mark:hover .sheen { animation: sweep 1.4s cubic-bezier(0.4, 0.2, 0.2, 1) forwards; }
}

@keyframes sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

/* ---------- typografiset linjat ---------- */

.lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 3.4vh, 2.2rem);
  max-width: 46rem;
}

.service {
  margin: 0;
  font-size: clamp(1.02rem, 0.9rem + 0.55vw, 1.24rem);
  font-weight: 450;
  line-height: 1.7;
  letter-spacing: 0.02em;
  text-align: center;
  text-wrap: balance;
  max-width: 46ch;
  color: var(--muted);
}

.divider {
  width: 4rem;
  height: 1px;
  background: linear-gradient(90deg, rgb(212 186 140 / 0), rgb(212 186 140 / 0.55), rgb(212 186 140 / 0));
  position: relative;
}

.divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: rgb(212 186 140 / 0.5);
}

/* ---------- yhteystiedot ---------- */

.contact-strip {
  width: min(100%, 42rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.9rem, 4.5vh, 2.8rem);
}

.contact { text-align: center; }

.c-name {
  margin: 0 0 1.15rem;
  font-size: clamp(1.28rem, 1.12rem + 0.7vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--ink);
}

.c-line { margin: 0.55rem 0; }

/* puhelin ja sähköposti samalla painoarvolla — sivun toimintakehotteet */
.c-line a {
  display: inline-block;
  padding: 0.18em 0.4em;
  font-size: clamp(1.12rem, 0.98rem + 0.7vw, 1.42rem);
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgb(224 145 62 / 0.38);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.c-line a:hover, .c-line a:focus-visible { color: #f0ab5e; border-color: rgb(224 145 62 / 0.85); }
.c-line a:focus-visible { outline: 2px solid rgb(224 145 62 / 0.65); outline-offset: 3px; border-radius: 2px; }

.c-biz {
  margin: 1.5rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--muted);
}

.c-biz-value {
  color: var(--green);
  letter-spacing: 0.08em;
}

@media (max-width: 40rem) {
  .stage { justify-content: flex-start; padding-top: 12vh; }
}

@media (prefers-reduced-motion: reduce) {
  .sheen { display: none; }
  .c-line a { transition: none; }
}