/* ====================================================================
   Pesosenpuoti — style.css
   Finnish Baltic maritime craft. Committed brand colour strategy.
   Palette anchored to seed oklch(0.650 0.100 230) per Impeccable.
   ==================================================================== */

/* --- Tokens --------------------------------------------------------- */
:root {
  /* Palette — Finnish summer dawn on the Baltic */
  --color-bg:      oklch(1.000 0.000 0);                      /* pure white — brand carries atmosphere */
  --color-surface: oklch(0.965 0.008 228);                    /* barely-tinted panel background */
  --color-navy:    oklch(44.5% 0.09 236);                     /* light scandinavian navy — headings, dark fills */
  --color-brand:   oklch(0.560 0.105 228);                    /* committed Baltic blue — links, borders, accents */
  --color-amber:   oklch(75.303% 0.12323 75.343);             /* warm amber — primary CTAs, white text */
  --color-ink:     oklch(0.170 0.020 232);                    /* near-black with blue cast — body copy */
  --color-muted:   oklch(0.480 0.018 228);                    /* secondary text — ≥3.5:1 vs bg */
  --color-white:   oklch(1.000 0.000 0);                      /* text on dark fills */
  --color-rule:    oklch(0.890 0.012 228);                    /* dividers, card borders */
  --color-navbar:  oklch(17.024% 0.02072 288.565 / 0.60);     /* navbar background top — overlays hero photo, same in both themes */
  --color-navbar-scrolled: oklch(1.000 0.000 0 / 0.60);       /* navbar background scrolled (light theme) */
  --color-wave:    112 158 196;                                /* canvas wave fill "r g b" (light theme) — read by wave.js, not sampled from the photo */
  --color-palvelut-bg: oklch(0.955 0.016 228);                 /* pale Baltic-blue section tint (light theme) */

  /* Typography */
  --font-heading: 'Barlow', system-ui, sans-serif;
  --font-body:    system-ui, -apple-system, sans-serif;

  /* Scale */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* Shadows */
  --shadow-card:       0 1px 6px oklch(0.220 0.060 235 / 0.07);
  --shadow-card-hover: 0 8px 28px oklch(0.220 0.060 235 / 0.13);

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-mid:  300ms;
  --dur-slow: 560ms;

  /* Layout */
  --max-w: 1140px;
  --pad-x: clamp(1.25rem, 5vw, 3rem);
  --pad-y: clamp(4.5rem, 9vw, 8rem);
}

/* --- Reset ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Global focus-visible — keyboard navigation */
:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Remove default focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

/* --- Typography ----------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

/* Fluid modular scale — ratio ~1.35 */
h1 { font-size: clamp(2.2rem, 5.3vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 600; }

p {
  max-width: 64ch;
  line-height: 1.7;
}

/* --- Layout utilities ----------------------------------------------- */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section-pad {
  padding-block: var(--pad-y);
}

/* --- Buttons -------------------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.8em;
  background: var(--color-amber);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  transition:
    filter var(--dur-fast) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-fast) var(--ease-out-quart);
}

.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px oklch(0.620 0.140 65 / 0.30);
}

.btn-primary:active {
  transform: translateY(0) scale(0.97);
  filter: brightness(0.98);
}

.btn-primary:focus-visible {
  outline: 3px solid var(--color-amber);
  outline-offset: 3px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.8em;
  border: 1.5px solid oklch(1.000 0.000 0 / 0.55);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.btn-ghost:hover {
  border-color: var(--color-white);
  background: oklch(1.000 0.000 0 / 0.10);
}

.btn-ghost:active {
  transform: scale(0.97);
}

.btn-ghost:focus-visible {
  outline: 3px solid oklch(1.000 0.000 0 / 0.7);
  outline-offset: 3px;
}

/* --- Hero entrance -------------------------------------------------- */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Scroll fade-in animation --------------------------------------- */
/* Visible by default. The hidden start state applies only under .js-reveal,
   which the inline head script adds when JS can actually undo it — so a failed
   script, a blocked script, or a renderer that never fires the observer shows
   the content rather than a blank section. */
.fade-in {
  transition:
    opacity var(--dur-slow) var(--ease-out-quart),
    transform var(--dur-slow) var(--ease-out-quart);
  /* Stagger via --i: 0, 1, 2, 3 set on the element */
  transition-delay: calc(var(--i, 0) * 90ms);
}

.js-reveal .fade-in:not(.visible) {
  opacity: 0;
  transform: translateY(20px);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
  * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* --- Navbar --------------------------------------------------------- */
.navbar {
  margin-top: 5rem;
  position: fixed;
  background-color: var(--color-navbar);
  backdrop-filter: blur(5px);
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition:
    background var(--dur-mid) var(--ease-in-out),
    padding var(--dur-mid) var(--ease-in-out),
    box-shadow var(--dur-mid) var(--ease-in-out);
}

.navbar.scrolled {
  background: var(--color-navbar-scrolled);
  backdrop-filter: blur(5px);
  box-shadow: 0 1px 0 var(--color-rule);
}

.navbar__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-block: 1.4rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  transition: padding-block var(--dur-mid) var(--ease-in-out);
}

.navbar.scrolled .navbar__inner {
  padding-block: 0.9rem;
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  transition: color var(--dur-fast);
}

.navbar.scrolled .navbar__logo {
  color: var(--color-navy);
}

.navbar__logo-mark {
  flex-shrink: 0;
  color: inherit;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin-left: auto;
}

.navbar__links a {
  color: oklch(1.000 0.000 0 / 0.85);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  transition: color var(--dur-fast), opacity var(--dur-fast);
  position: relative;
}

.navbar__links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--color-amber);
  transition: right var(--dur-mid) var(--ease-out-quart);
}

.navbar__links a:hover::after { right: 0; }

.navbar.scrolled .navbar__links a {
  color: var(--color-ink);
}

.navbar.scrolled .navbar__links a:hover {
  color: var(--color-brand);
}

/* Hamburger — 44x44 touch target */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  padding: 10px 8px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}

.navbar__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  border-radius: 1px;
  transition:
    transform var(--dur-mid) var(--ease-out-quart),
    opacity var(--dur-fast);
}

.navbar.scrolled .navbar__hamburger span {
  background: var(--color-navy);
}

.navbar__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu */

/* Same trap as .form-success: this display declaration outranks the UA rule
   behind [hidden], so without this the menu hangs open under the navbar and
   the hamburger toggle has no visible effect. */
.navbar__mobile[hidden] {
  display: none;
}

.navbar__mobile {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-top: 1px solid var(--color-rule);
  padding: 0.5rem var(--pad-x) 1.5rem;
  box-shadow: 0 8px 24px oklch(0.220 0.060 235 / 0.10);
}

.navbar__mobile a {
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-rule);
  transition: color var(--dur-fast), padding-left var(--dur-fast);
}

.navbar__mobile a:last-child {
  border-bottom: none;
}

.navbar__mobile a:hover {
  color: var(--color-brand);
  padding-left: 0.5rem;
}

@media (max-width: 760px) {
  .navbar__links { display: none; }
  .navbar__hamburger { display: flex; }
}

/* --- Hero ----------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-navy);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__image {
  position: absolute;
  inset: 0;
  background-image: url('images/hero-purjevene.jpg');
  background-size: cover;
  background-position: center 45%;
  opacity: 0.52;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-block: clamp(6rem, 12vw, 15rem);
  padding-inline: var(--pad-x);
  max-width: var(--max-w);
  margin-inline: auto;
  width: 100%;
}

.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: 1.25rem;
  animation: hero-rise 700ms var(--ease-out-quart) 120ms both;
}

.hero__heading {
  color: var(--color-white);
  max-width: 17ch;
  margin-bottom: 1.5rem;
  line-height: 1.08;
  letter-spacing: -0.02em;
  animation: hero-rise 800ms var(--ease-out-quart) 240ms both;
}

/* Slogan sits between the headline and the service summary: a quiet, ruled
   aside so it reads as a motto rather than a second headline competing
   with the h1 above it. */
.hero__slogan {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 1.5rem;
  max-width: 34ch;
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-white);
  animation: hero-rise 750ms var(--ease-out-quart) 320ms both;
}

.hero__slogan::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  border-radius: 2px;
  background: var(--color-amber);
}

.hero__sub {
  color: oklch(0.850 0.015 228);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 52ch;
  margin-bottom: 2.75rem;
  line-height: 1.65;
  animation: hero-rise 700ms var(--ease-out-quart) 380ms both;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  animation: hero-rise 600ms var(--ease-out-quart) 500ms both;
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__heading,
  .hero__slogan,
  .hero__sub,
  .hero__cta {
    animation: none;
  }
}

/* --- Palvelut ------------------------------------------------------- */
.palvelut {
  background: var(--color-palvelut-bg);
  padding-block: var(--pad-y);
}

.palvelut__header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.palvelut__header h2 {
  margin-bottom: 0.75rem;
}

.palvelut__header p {
  color: var(--color-muted);
  font-size: 1.05rem;
}

/* Alternating overlapping card + photo rows */
.palvelut__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 5.5rem);
}

.palvelut__row {
  display: flex;
  align-items: center;
}

.palvelut__row--reverse {
  flex-direction: row-reverse;
}

.palvelut__row .palvelu-card {
  flex: 0 1 460px;
  z-index: 2;
  margin-right: clamp(-3rem, -6vw, -1.5rem);
}

.palvelut__row--reverse .palvelu-card {
  margin-right: 0;
  margin-left: clamp(-3rem, -6vw, -1.5rem);
}

.palvelut__row .palvelu-photo {
  flex: 1 1 55%;
  z-index: 1;
  transform: translateY(1.75rem);
}

.palvelut__row--reverse .palvelu-photo {
  transform: translateY(-1.75rem);
}

/* Shared photo treatment (matching the Marjo Seki site): a padded, tinted
   frame holding a rounded inner crop, with the caption outside the crop.
   The frame does the framing, .image-frame does the cropping — keeping the
   two jobs apart is what lets one rule set serve every photo on the page. */
.image-frame {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 6px);
  background: var(--color-rule);
}

/* Focal point per photo, same convention as the Marjo Seki site: a tall source
   cropped to a landscape frame loses its subject to a centred crop, so the
   figure can nudge the crop with --image-position-x / -y. */
.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-position-x, 50%) var(--image-position-y, 50%);
  display: block;
  transition: transform 560ms var(--ease-out-quart);
}

.palvelu-photo {
  margin: 0;
  padding: 0.7rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    160deg,
    oklch(0.560 0.105 228 / 0.16),
    oklch(75.303% 0.12323 75.343 / 0.14)
  );
  border: 1px solid var(--color-rule);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-mid) var(--ease-out-quart);
}

.palvelu-photo .image-frame {
  aspect-ratio: 4 / 3.1;
}

.palvelu-photo:hover {
  box-shadow: var(--shadow-card-hover);
}

.palvelu-photo:hover img {
  transform: scale(1.04);
}

.palvelu-photo figcaption {
  margin-top: 0.65rem;
  padding: 0 0.15rem 0.1rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-brand);
}

@media (max-width: 860px) {
  /* align-items:center is what centres the card against the photo on wide
     screens, but once the row stacks it stops the children stretching, so
     they size to their text and run off the side of the phone. */
  .palvelut__row,
  .palvelut__row--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }
  .palvelut__row .palvelu-card,
  .palvelut__row--reverse .palvelu-card {
    flex: 1 1 auto;
    margin: 0;
  }
  .palvelut__row .palvelu-photo,
  .palvelut__row--reverse .palvelu-photo {
    flex: 1 1 auto;
    width: 100%;
    transform: none;
  }
}

/* Cards: no icon-above-h3 — use bold number as visual anchor */
.palvelu-card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 2.25rem 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
  transition:
    box-shadow var(--dur-mid) var(--ease-out-quart),
    transform var(--dur-mid) var(--ease-out-quart);
}

.palvelu-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--color-brand);
  opacity: 0;
  transition: opacity var(--dur-mid);
}

.palvelu-card:hover {
  transform: translateY(-3px);
}

.palvelu-card:hover::before {
  opacity: 1;
}

.palvelu-card__link {
  display: inline-block;
  margin-top: 1.1rem;
  color: var(--color-brand);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  transition: color var(--dur-fast);
}

.palvelu-card__link:hover {
  color: var(--color-navy);
}

.palvelu-card h3 {
  color: var(--color-navy);
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
}

.palvelu-card p {
  color: var(--color-ink);
  font-size: 0.95rem;
  line-height: 1.65;
}

.palvelu-card__list {
  list-style: none;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.palvelu-card__list li {
  font-size: 0.88rem;
  color: var(--color-muted);
  padding-left: 1em;
  position: relative;
}

.palvelu-card__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-brand);
  opacity: 0.6;
}

/* --- Galleria ------------------------------------------------------- */
.galleria {
  background: var(--color-surface);
  padding-block: var(--pad-y);
}

.galleria__header {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.galleria__header a {
  color: var(--color-brand);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: color var(--dur-fast);
}

.galleria__header a:hover {
  color: var(--color-navy);
}

/* Even 2×2 grid rather than the old asymmetric 3-up: the shop photos are a
   mix of portrait and landscape, and a uniform crop is the only layout that
   treats all of them fairly. Captions carry the story instead. */
.galleria__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.2vw, 1.75rem);
}

.galleria__item {
  margin: 0;
  padding: 0.7rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    160deg,
    oklch(0.560 0.105 228 / 0.16),
    oklch(75.303% 0.12323 75.343 / 0.14)
  );
  border: 1px solid var(--color-rule);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--dur-mid) var(--ease-out-quart),
    box-shadow var(--dur-mid) var(--ease-out-quart);
}

.galleria__item .image-frame {
  aspect-ratio: 4 / 3;
}

.galleria__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.galleria__item:hover img {
  transform: scale(1.05);
}

.galleria__item figcaption {
  margin-top: 0.7rem;
  padding: 0 0.15rem 0.1rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-brand);
}

@media (max-width: 640px) {
  .galleria__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galleria__item,
  .galleria__item:hover,
  .image-frame img,
  .palvelu-photo:hover img,
  .galleria__item:hover img {
    transform: none;
    transition: none;
  }
}

/* --- Kausi ---------------------------------------------------------- */
.kausi {
  background: var(--color-bg);
  padding-block: var(--pad-y);
}

.kausi__header {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.kausi__header p {
  color: var(--color-muted);
  margin-top: 0.75rem;
  font-size: 1.05rem;
}

.kausi__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.kausi-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 2.25rem;
  border-top: 3px solid var(--color-brand);
}

.kausi-card__season {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: 0.6rem;
}

.kausi-card h3 {
  margin-bottom: 0.85rem;
  font-size: 1.2rem;
}

.kausi-card p {
  font-size: 0.95rem;
  color: var(--color-ink);
}

/* --- Jäätelövene ---------------------------------------------------- */
.jaatelö {
  background: var(--color-navy);
  padding-block: var(--pad-y);
  overflow: hidden;
  position: relative;
}

/* Subtle wave texture */
.jaatelö::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right,
    var(--color-brand) 0%,
    var(--color-amber) 50%,
    var(--color-brand) 100%
  );
  opacity: 0.6;
}

.jaatelö__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.jaatelö__eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: 1.25rem;
  display: block;
}

.jaatelö__text h2 {
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

.jaatelö__text p {
  color: oklch(0.780 0.020 228);
  margin-bottom: 1rem;
  font-size: 1.02rem;
}

.jaatelö__text .btn-primary {
  margin-top: 0.5rem;
}

.jaatelö__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 20px 60px oklch(0.100 0.040 235 / 0.5);
}

/* The photo is wrapped in the shared .image-frame crop, so the frame — not
   the img — is what has to fill the section's fixed 4/3 box. */
.jaatelö__image .image-frame {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.jaatelö__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 760px) {
  .jaatelö__inner {
    grid-template-columns: 1fr;
  }
  .jaatelö__image {
    order: -1;
    max-height: 280px;
    border-radius: var(--radius-md);
  }
}

/* --- Yhteystiedot --------------------------------------------------- */
.yhteystiedot {
  background: var(--color-surface);
  padding-block: var(--pad-y);
}

.yhteystiedot__header {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.yhteystiedot__header h2 {
  margin-bottom: 0.75rem;
}

.yhteystiedot__intro {
  color: var(--color-muted);
  font-size: 1.05rem;
  max-width: 58ch;
}

.yhteystiedot__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 860px) {
  .yhteystiedot__layout {
    grid-template-columns: 1fr;
  }
}

/* Form */
.yhteyslomake {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form-group label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-navy);
  letter-spacing: 0.01em;
}

.form-group label .req {
  color: var(--color-brand);
  margin-left: 0.15em;
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition:
    border-color var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-fast) var(--ease-out-quart);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: oklch(0.640 0.010 228);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px oklch(0.560 0.105 228 / 0.14);
}

.form-group input[type="file"] {
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  font-size: 0.9rem;
}

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

.form-hint {
  font-size: 0.80rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.field-error {
  border-color: oklch(0.540 0.180 25) !important;
  box-shadow: 0 0 0 3px oklch(0.540 0.180 25 / 0.14) !important;
}

.form-submit {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* An author `display` declaration outranks the UA rule behind the [hidden]
   attribute, so without this the confirmation renders on page load — before
   anyone has submitted anything. */
.form-success[hidden] {
  display: none;
}

.form-success {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: oklch(0.960 0.040 150);
  border: 1px solid oklch(0.760 0.120 150);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  margin-top: 1rem;
}

.form-success__icon {
  font-size: 1.5rem;
  line-height: 1;
  color: oklch(0.380 0.140 150);
  flex-shrink: 0;
  margin-top: 0.1em;
}

.form-success p {
  color: oklch(0.220 0.080 150);
  font-size: 1rem;
  line-height: 1.6;
  max-width: none;
}

/* Contact aside */
.yhteystiedot__info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.info-block {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-rule);
}

.info-block:first-child {
  padding-top: 0;
}

.info-block:last-child {
  border-bottom: none;
}

.info-block__label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}

.info-block a {
  color: var(--color-navy);
  font-weight: 600;
  font-size: 1rem;
  transition: color var(--dur-fast);
  display: block;
  margin-bottom: 0.1rem;
}

.info-block a:hover {
  color: var(--color-brand);
}

.info-block address {
  font-style: normal;
  color: var(--color-ink);
  line-height: 1.6;
  font-size: 0.95rem;
}

.map-link {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-brand) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
}

.map-link:hover {
  color: var(--color-navy) !important;
}

/* --- Footer --------------------------------------------------------- */
.footer {
  background: var(--color-navy);
  color: var(--color-white);
}

.footer .container {
  padding-block: 2.5rem;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 2rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid oklch(1.000 0.000 0 / 0.10);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-white);
}

.footer__address,
.footer__ytunnus {
  font-size: 0.85rem;
  color: oklch(1.000 0.000 0 / 0.50);
}

.footer__links {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.footer__links a {
  font-size: 0.88rem;
  color: oklch(1.000 0.000 0 / 0.60);
  transition: color var(--dur-fast);
}

.footer__links a:hover {
  color: var(--color-white);
}

.footer__copy {
  font-size: 0.78rem;
  color: oklch(1.000 0.000 0 / 0.30);
}

/* --- Theme toggle --------------------------------------------------- */
.navbar__theme {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 8px;
  border-radius: 50%;
  color: oklch(1.000 0.000 0 / 0.80);
  transition: background var(--dur-fast), color var(--dur-fast);
}

.navbar__theme:hover {
  background: oklch(1.000 0.000 0 / 0.12);
}

.navbar.scrolled .navbar__theme {
  color: var(--color-navy);
}

.navbar.scrolled .navbar__theme:hover {
  background: oklch(0.220 0.060 235 / 0.08);
}

/* Show sun in light mode, moon in dark mode */
.navbar__theme-icon--moon { display: none; }
[data-theme="dark"] .navbar__theme-icon--sun  { display: none; }
[data-theme="dark"] .navbar__theme-icon--moon { display: block; }

/* On mobile: links hidden, theme button takes auto margin to push right */
@media (max-width: 760px) {
  .navbar__theme { margin-left: auto; }
}

/* --- Palvelu card icon ---------------------------------------------- */
/* The icon is now the card's only visual anchor above the heading — the 01/02
   numerals that used to carry this gap are gone — so it holds the spacing. */
.palvelu-card__icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.5rem;
  color: var(--color-brand);
}

.palvelu-card__icon svg {
  width: 100%;
  height: 100%;
}

/* --- Jäätelö icon ---------------------------------------------------- */
.jaatelö__icon {
  width: 3.25rem;
  height: 3.25rem;
  color: var(--color-amber);
  margin-bottom: 1.5rem;
}

.jaatelö__icon svg {
  width: 100%;
  height: 100%;
}

/* --- Yhteystiedot logo + map ---------------------------------------- */
.yhteystiedot__logo {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-rule);
}

.yhteystiedot__logo img {
  max-width: 160px;
  height: auto;
}

/* --- Tervetuloa telakalle — map + quote ------------------------------ */
.telakalle {
  position: relative;
  background: var(--color-brand);
  overflow: hidden;
}

.telakalle__map {
  width: 100%;
  height: clamp(240px, 30vw, 340px);
  background: var(--color-rule); /* placeholder tone while the iframe loads */
}

.telakalle__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.telakalle__inner {
  padding-block: 0 clamp(3rem, 6vw, 4.5rem);
}

.telakalle__inner h2 {
  color: var(--color-white);
  padding-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.telakalle__quote {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  max-width: 640px;
}

.telakalle__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(5.5rem, 9vw, 7.5rem);
  height: clamp(5.5rem, 9vw, 7.5rem);
  border-radius: 50%;
  background: oklch(0.220 0.055 232); /* fixed dark navy fill — same in both themes, unlike --color-navy which inverts */
  border: 3px solid var(--color-amber);
  color: oklch(0.960 0.008 228);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-card-hover);
}

.telakalle__card {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow-card-hover);
}

.telakalle__mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-brand);
  opacity: 0.35;
  margin-bottom: 0.25rem;
}

.telakalle__text {
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.4;
  max-width: none;
}

.telakalle__author {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  color: var(--color-muted);
}

.telakalle__author span {
  color: var(--color-muted);
}

@media (max-width: 560px) {
  .telakalle__quote {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Dark theme ---------------------------------------------------- */
[data-theme="dark"] {
  --color-bg:      oklch(0.148 0.042 232);
  --color-surface: oklch(0.192 0.050 230);
  --color-navy:    oklch(0.900 0.010 228);
  --color-brand:   oklch(0.680 0.115 228);
  --color-amber:   oklch(0.750 0.128 73);
  --color-ink:     oklch(0.860 0.012 228);
  --color-muted:   oklch(0.680 0.022 228);
  --color-white:   oklch(0.960 0.008 228);
  --color-rule:    oklch(0.270 0.040 232);
  --color-navbar-scrolled: oklch(0.148 0.042 232 / 0.94);      /* navbar background scrolled (dark theme) */
  --color-wave:    134 184 214;                                /* brighter wave fill for contrast against the near-black dark-theme hero */
  --color-palvelut-bg: oklch(0.170 0.048 230);                 /* pale-blue section tint, dark-theme equivalent */
  --shadow-card:       0 1px 6px oklch(0 0 0 / 0.35);
  --shadow-card-hover: 0 8px 28px oklch(0 0 0 / 0.50);
}

[data-theme="dark"] .hero {
  background: oklch(0.110 0.038 234);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea {
  background: oklch(0.192 0.050 230);
  border-color: var(--color-rule);
  color: var(--color-ink);
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
  color: oklch(0.520 0.025 228);
}

[data-theme="dark"] .telakalle__map {
  background: oklch(0.220 0.055 232);
}

[data-theme="dark"] .yhteystiedot__logo img {
  filter: brightness(1.15) saturate(0.95);
}

[data-theme="dark"] .footer {
  background: oklch(0.108 0.038 234);
}