/* ============================================================================
   POHJA: demo5 — TUMMA PREMIUM
   Tyyli: hiilenmusta pohja, iso valokuva-hero tummalla filtterillä, lämmin kulta-aksentti,
   elegantti serif-otsikko (Fraunces) + selkeä sans-leipä (Hanken Grotesk). Hehku-detaljit.
   Erottuu kaikista 4 vaaleasta demosta. Demo-yritys: fine dining -ravintola "Hiili".
   Samat osio-luokat kuin muissa demoissa → osiot siirrettävissä. Polut SUHTEELLISIA.
   ----------------------------------------------------------------------------
   TEEMA VAIHDETAAN VAIN TÄSTÄ :root-lohkosta.
   ============================================================================ */

:root {
  --c-accent: var(--c-primary);   /* toissijainen aksentti — sama nimi kaikissa pohjissa */
  /* Lomakkeen tilaviestit — teemattavissa kuten muutkin värit */
  --c-ok:  #4ade80;
  --c-err: #f87171;
  /* ---- VÄRIT: Wasastjerna & co — tumma #212121-sukuinen pohja + asiakkaan sininen #3182CE (tummalla kirkastettuna) ---- */
  --c-bg:        #111214;
  --c-surface:   #191B1F;
  --c-surface-2: #1E2126;
  --c-text:      #B9BEC7;
  --c-heading:   #F5F6F8;
  --c-muted:     #858B96;
  --c-border:    #2C3038;
  --c-primary:   #4A9BE8;   /* asiakkaan #3182CE kirkastettuna tummalle */
  --c-primary-2: #6DB2F2;
  --c-on-primary:#06121F;
  --c-dark:      #0B0C0E;
  --c-on-dark:   #E7E8EC;

  --grad: linear-gradient(120deg, var(--c-primary) 0%, #8EC5F5 100%);

  /* ---- MUODOT (hillitysti pyöristetty, premium) ---- */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- VARJOT (syvät, hehku) ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow:    0 22px 50px -22px rgba(0,0,0,.75);
  --shadow-lg: 0 34px 80px -28px rgba(0,0,0,.85);
  --glow:      0 0 0 1px color-mix(in srgb, var(--c-primary) 30%, transparent), 0 18px 44px -18px color-mix(in srgb, var(--c-primary) 40%, transparent);

  /* ---- TYPOGRAFIA (elegantti serif-otsikko + selkeä sans-leipä) ---- */
  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', 'Hanken Grotesk Fallback', system-ui, -apple-system, sans-serif;

  /* ---- MITAT ---- */
  --container: 1180px;
  --pad-x: clamp(18px, 5vw, 40px);
  --gap: clamp(18px, 2.4vw, 26px);
  --section-y: clamp(62px, 8vw, 112px);
}

/* =====================  VÄRI-PRESETIT (vaihda vain aksentti + tausta)  ============================
   VIININPUNAINEN: --c-primary:#C0506A; --c-primary-2:#D46A82; --c-on-primary:#1A0A0E;
   KUPARI:         --c-primary:#C97B4F; --c-primary-2:#DB9268; --c-on-primary:#160C06;
   SALVIA/VIHREÄ:  --c-primary:#8FB98A; --c-primary-2:#A6CDA0; --c-on-primary:#0C140B;
   SÄHKÖNSININEN:  --c-primary:#5BA8FF; --c-primary-2:#7FBEFF; --c-on-primary:#06121F;
   Vielä tummempi pohja: --c-bg:#0A0A0C; --c-surface:#121318; --c-surface-2:#16181E;
   ================================================================== */

/* ===========================  RESET / BASE  ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; overflow-x: clip;
  background: var(--c-bg); color: var(--c-text);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--c-heading); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .5em; font-weight: 500; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 400; }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 500; }
/* 🛑 max-width POISTETTU 24.9.2026 (Valtteri). Globaali 66ch kavensi jokaisen kappaleen
   noin 620 pikseliin riippumatta siitä kuinka leveä palsta oli, jolloin leipäteksti rajautui
   kesken ja osiot näyttivät satunnaisesti vajailta. Rivin pituutta rajoitetaan nyt palstan
   leveydellä (grid, .wrap, .sec-head), ei p-elementillä. Keskitetyt nostot alla. */
p { margin: 0 0 1rem; }
.cta-photo p, .cta-band p, .statement .lead, .sec-head--center .lead, .form-note { max-width: 62ch; }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; top: 10px; z-index: 200; background: var(--c-primary); color: var(--c-on-primary); padding: 10px 18px; font-weight: 700; border-radius: var(--r); }
.skip-link:focus { left: 14px; }

/* ===========================  LAYOUT  ============================ */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--c-surface-2); }
.section--dark { background: var(--c-dark); }
/* kiinteä läpinäkyvä nav: sisäsivun ensimmäinen osio (ei .hero) tarvitsee lisätilaa ylös */
main > .section:first-child { padding-top: calc(var(--section-y) + 34px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--c-primary); }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: var(--c-text); }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 58px); }
.sec-head .lead { max-width: 60ch; }
.sec-head--center { margin-inline: auto; text-align: center; max-width: 820px; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--center .lead { margin-inline: auto; }

/* ===========================  PAINIKKEET  ============================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  border: 1.5px solid transparent; transition: transform .16s ease, background .2s, box-shadow .25s, color .2s, border-color .2s;
  min-height: 52px;
}
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary);
  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--c-primary) 35%, transparent); }  /* hillitty: iso hehku näytti turhalta etenkin lomakkeen leveässä napissa (Valtteri 18.9.2026) */
.btn-ghost { background: transparent; color: var(--c-heading); border-color: rgba(255,255,255,.22); }
.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.3); }
.btn .arr { transition: transform .2s; font-weight: 700; }
@media (hover: hover) {
  .btn-primary:hover { background: var(--c-primary-2); border-color: var(--c-primary-2); transform: translateY(-1px); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--c-primary) 45%, transparent); }
  .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
  .btn-ghost.on-dark:hover { background: #fff; color: var(--c-dark); border-color: #fff; }
  .btn:hover .arr { transform: translateX(4px); }
}
.btn-primary:active { transform: translateY(0); }
.tlink { color: var(--c-primary); font-weight: 700; font-size: .92rem; display: inline-flex; gap: 7px; align-items: center; }
@media (hover: hover) { .tlink:hover .arr { transform: translateX(4px); } }

/* ===========================  HERO (koko leveyden valokuva + tumma filtteri, VASEN-ALAS editoriaalinen)  ============================ */
.hero { position: relative; min-height: clamp(580px, 86vh, 780px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; animation: heroZoom 28s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.hero-overlay { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,9,12,.78) 0%, rgba(8,9,12,.5) 45%, rgba(8,9,12,.25) 100%),
    linear-gradient(180deg, rgba(8,9,12,.55) 0%, rgba(8,9,12,.28) 16%, rgba(8,9,12,.32) 52%, rgba(8,9,12,.86) 100%); }
.hero-inner { position: relative; z-index: 2; padding-block: clamp(44px, 6vw, 80px); color: #fff; max-width: 760px; }
/* ohut kulta-pystyviiva eyebrow'n vieressä → editoriaalinen aksentti */
.hero-inner .eyebrow { color: var(--c-primary); }
.hero-inner h1 { color: #fff; max-width: 15ch; }
.hero-inner h1 .accent { color: var(--c-primary); font-style: italic; }
.hero-sub { font-size: clamp(1.08rem, 1.6vw, 1.4rem); color: rgba(255,255,255,.88); max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-meta { display: inline-flex; gap: 0; margin-top: 42px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.22); }
.hero-meta .m { padding: 20px 30px 0 0; margin-right: 30px; border-right: 1px solid rgba(255,255,255,.22); }
.hero-meta .m:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
.hero-meta .m b { font-family: var(--font-display); font-weight: 400; font-size: 2rem; color: #fff; display: block; line-height: 1; }
.hero-meta .m span { font-size: .8rem; color: rgba(255,255,255,.66); letter-spacing: .08em; text-transform: uppercase; }

/* ===========================  RUOKALISTA (oikea menu-lista, ei kortteja)  ============================ */
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px); }
@media (max-width: 760px) { .menu { grid-template-columns: 1fr; gap: 8px; } }
.menu-cat { font-family: var(--font-display); font-style: italic; color: var(--c-primary); font-size: 1.15rem; margin: 0 0 8px; }
.menu-col > .menu-cat:not(:first-child) { margin-top: 36px; }
.menu-item { padding: 15px 0; border-bottom: 1px solid var(--c-border); }
.menu-item:last-child { border-bottom: 0; }
.mi-head { display: flex; align-items: baseline; gap: 12px; }
.mi-name { font-family: var(--font-display); font-size: 1.18rem; color: var(--c-heading); }
.mi-dots { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--c-muted) 55%, transparent); position: relative; top: -5px; }
.mi-price { font-family: var(--font-display); color: var(--c-primary); font-size: 1.12rem; white-space: nowrap; }
.mi-desc { color: var(--c-muted); font-size: .92rem; margin-top: 4px; max-width: 46ch; }

/* ===========================  EDITORIAALINEN LAUSUNTO + TILASTOPALKKI + KUVAKAISTA  ============================ */
.statement { max-width: 880px; margin-inline: auto; text-align: center; }
.statement h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.statement .lead { margin-inline: auto; }
.stat-strip { display: flex; justify-content: center; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 52px); border-block: 1px solid var(--c-border); }
.stat-strip .s { padding: 26px clamp(24px, 4vw, 50px); text-align: center; border-right: 1px solid var(--c-border); }
.stat-strip .s:last-child { border-right: 0; }
.stat-strip b { display: block; font-family: var(--font-display); color: var(--c-primary); font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; }
.stat-strip span { font-size: .84rem; color: var(--c-muted); }
.band-img { margin-top: clamp(40px, 6vw, 72px); border-radius: var(--r-lg); overflow: hidden; height: clamp(240px, 40vw, 460px); }
.band-img img { width: 100%; height: 100%; object-fit: cover; }

/* ===========================  AIKAJANA (gold-viiva)  ============================ */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); position: relative; counter-reset: tl; }
.timeline::before { content: ""; position: absolute; top: 19px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-primary) 50%, transparent), transparent); }
@media (max-width: 760px) { .timeline { grid-template-columns: 1fr 1fr; row-gap: 32px; } .timeline::before { display: none; } }
.tl { position: relative; padding-top: 56px; }
.tl::before { content: counter(tl); counter-increment: tl; position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c-primary) 50%, var(--c-border)); color: var(--c-primary); font-family: var(--font-display); display: grid; place-items: center; }
.tl h3 { font-size: 1.12rem; margin-bottom: 6px; }
.tl p { color: var(--c-muted); font-size: .93rem; }

/* ===========================  MOSAIIKKI-GALLERIA  ============================ */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; }
.mosaic .g { position: relative; overflow: hidden; border-radius: var(--r); margin: 0; }
.mosaic .g img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mosaic .g.big { grid-column: span 2; grid-row: span 2; }
.mosaic .g.tall { grid-row: span 2; }
@media (hover: hover) { .mosaic .g:hover img { transform: scale(1.06); } }
.mosaic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; color: #fff; background: linear-gradient(transparent, rgba(6,7,10,.86)); font-weight: 600; font-size: .9rem; }
@media (max-width: 760px) { .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } .mosaic .g.big { grid-column: span 2; grid-row: span 1; } .mosaic .g.tall { grid-row: span 1; } }

/* ===========================  NOSTOLAINAUS  ============================ */
.feature-quote { max-width: 920px; margin-inline: auto; text-align: center; }
.feature-quote .mark { font-family: var(--font-display); color: var(--c-primary); font-size: 4.5rem; line-height: .4; display: block; }
.feature-quote blockquote { margin: 22px 0 26px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 3.3vw, 2.5rem); color: var(--c-heading); line-height: 1.3; }
.feature-quote .cite { color: var(--c-muted); font-size: .96rem; }
.feature-quote .cite b { color: var(--c-heading); font-family: var(--font-body); font-weight: 700; }

/* ===========================  MENUT (3 saraketta, kulta-jakajat, ei laatikoita)  ============================ */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.cols3 .c { padding: 8px clamp(22px, 3vw, 44px); border-left: 1px solid var(--c-border); }
.cols3 .c:first-child { border-left: 0; padding-left: 0; }
.cols3 .c h3 { margin-bottom: 4px; }
.cols3 .c .price { font-family: var(--font-display); color: var(--c-primary); font-size: 1.7rem; margin: 6px 0 12px; }
.cols3 .c p { color: var(--c-muted); font-size: .95rem; }
.cols3 .c .tlink { margin-top: 14px; }
@media (max-width: 760px) { .cols3 { grid-template-columns: 1fr; } .cols3 .c { border-left: 0; padding-left: 0; padding-block: 24px; border-top: 1px solid var(--c-border); } .cols3 .c:first-child { border-top: 0; padding-top: 0; } }

/* ===========================  CTA — KOKO LEVEYDEN KUVABANNERI  ============================ */
.cta-photo { position: relative; overflow: hidden; padding-block: clamp(76px, 11vw, 150px); text-align: center; }
.cta-photo .cta-bg { position: absolute; inset: 0; z-index: 0; }
.cta-photo .cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-photo .cta-veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(85% 130% at 50% 50%, rgba(8,9,12,.5), rgba(8,9,12,.86)); }
.cta-photo .wrap { position: relative; z-index: 2; }
.cta-photo .eyebrow { color: var(--c-primary); justify-content: center; }
.cta-photo h2 { color: #fff; }
.cta-photo p { color: rgba(255,255,255,.85); margin-inline: auto; }
.cta-photo .hero-cta { justify-content: center; margin-top: 26px; }

/* ===========================  TRUST  ============================ */
.trust { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.trust-in { display: flex; align-items: center; gap: clamp(18px, 4vw, 50px); padding-block: 22px; flex-wrap: wrap; justify-content: center; }
.trust-in .t { display: flex; align-items: center; gap: 10px; color: var(--c-text); font-weight: 600; font-size: .95rem; }
.trust-in .t svg { color: var(--c-primary); flex: none; }

/* ===========================  PALVELUKORTIT (2×2, ei numeroita)  ============================ */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 32px 30px;
  transition: transform .2s ease, box-shadow .26s ease, border-color .2s; display: flex; flex-direction: column; }
.card h3 { margin: 0 0 8px; }
.card p { color: var(--c-muted); margin-bottom: 18px; font-size: .97rem; }
.card .ico { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 20px;
  background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary); border: 1px solid color-mix(in srgb, var(--c-primary) 24%, transparent); }
.card .tlink { justify-content: flex-start; margin-top: auto; }
@media (hover: hover) { .card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-border)); box-shadow: var(--shadow); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

/* ===========================  MEISTÄ + LUVUT  ============================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.about-media { position: relative; }
.about-media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: var(--r-lg); }
.about-media::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.stat b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 4vw, 3rem); color: var(--c-primary); display: block; line-height: 1; }
.stat span { font-size: .86rem; color: var(--c-muted); }

/* ===========================  PROSESSI / VAIHEET  ============================ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--gap); counter-reset: step; }
.step { position: relative; padding-top: 22px; border-top: 1px solid var(--c-border); }
.step::before { content: counter(step); counter-increment: step;
  font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; color: var(--c-primary);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; line-height: 1; margin-bottom: 14px;
  background: color-mix(in srgb, var(--c-primary) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c-primary) 26%, transparent); }
.step h3 { font-size: 1.18rem; margin-bottom: 8px; }
.step p { color: var(--c-muted); font-size: .95rem; }

/* ===========================  GALLERIA  ============================ */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery .g { margin: 0; overflow: hidden; display: block; position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
@media (hover: hover) { .gallery .g:hover img { transform: scale(1.06); } }
.gallery .g figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; color: #fff;
  background: linear-gradient(transparent, rgba(6,7,10,.86)); font-weight: 600; font-size: .92rem; }

/* ===========================  REFERENSSIT (ei tähtiä)  ============================ */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--gap); }
.quote { margin: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 32px; }
.quote::before { content: "\201C"; font-family: var(--font-display); color: var(--c-primary); font-size: 3rem; line-height: .6; display: block; margin-bottom: 10px; }
.quote p { font-size: 1.06rem; color: var(--c-heading); }
.quote .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.quote .who .av { width: 46px; height: 46px; object-fit: cover; border-radius: var(--r-pill); }
.quote .who b { display: block; font-size: .96rem; color: var(--c-heading); font-family: var(--font-body); font-weight: 700; }
.quote .who span { font-size: .85rem; color: var(--c-muted); }

/* ===========================  HINNASTO / MENU-PAKETIT  ============================ */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: var(--gap); }
.plan { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 34px 30px; display: flex; flex-direction: column; }
.plan.featured { border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border)); box-shadow: var(--glow); position: relative; }
.plan.featured .tag { position: absolute; top: 18px; right: 18px; background: var(--c-primary); color: var(--c-on-primary); font-size: .72rem; font-weight: 700; padding: 6px 13px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .05em; }
.plan h3 { margin-bottom: 4px; }
.plan .price { font-family: var(--font-display); font-weight: 400; font-size: 2.6rem; color: var(--c-heading); line-height: 1; margin: 10px 0; }
.plan .price small { font-size: .9rem; color: var(--c-muted); font-family: var(--font-body); font-weight: 500; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; font-size: .96rem; color: var(--c-text); }
.plan li svg { color: var(--c-primary); flex: none; margin-top: 3px; }
.plan .btn { margin-top: auto; justify-content: center; }
.plan.featured .btn-ghost { border-color: var(--c-primary); color: var(--c-primary); }
@media (hover: hover) { .plan.featured .btn-ghost:hover { background: var(--c-primary); color: var(--c-on-primary); } }

/* ===========================  FAQ  ============================ */
.faq { max-width: 840px; margin-inline: auto; }
.faq details { border: 1px solid var(--c-border); border-radius: var(--r); margin-bottom: 12px; background: var(--c-surface); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 52px 20px 24px; position: relative; font-family: var(--font-display); font-weight: 500; font-size: 1.14rem; color: var(--c-heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; translate: 0 -50%; font-size: 1.6rem; color: var(--c-primary); transition: rotate .2s; line-height: 1; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details[open] summary { color: var(--c-primary); }
.faq .a { padding: 0 24px 22px; color: var(--c-muted); }
.faq .a p { margin: 0; }

/* ===========================  CTA  ============================ */
.cta-band { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 80px); background: var(--c-dark); border: 1px solid var(--c-border); border-radius: var(--r-lg); text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 130% at 50% 0%, color-mix(in srgb, var(--c-primary) 22%, transparent), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--c-heading); }
.cta-band p { color: var(--c-text); margin-inline: auto; }
.cta-band .hero-cta { margin-top: 26px; justify-content: center; }

/* ===========================  YHTEYS + LOMAKE  ============================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 60px); }
.contact-info .row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--c-border); }
.contact-info .row svg { color: var(--c-primary); flex: none; margin-top: 3px; }
.contact-info .row b { display: block; font-size: .95rem; color: var(--c-heading); }
.contact-info .row span { color: var(--c-muted); }
.contact-info .map { margin-top: 22px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--c-border); filter: grayscale(.3) brightness(.85); }
.contact-info .map iframe { width: 100%; height: 220px; border: 0; display: block; }

.form { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 38px); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: .9rem; color: var(--c-heading); margin-bottom: 7px; }
.field input, .field textarea { width: 100%; padding: 14px 15px; border: 1.5px solid var(--c-border); border-radius: var(--r); background: var(--c-bg); color: var(--c-heading); font: inherit; font-size: 16px; transition: border-color .16s, box-shadow .16s; }
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-muted); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 22%, transparent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .85rem; color: var(--c-muted); margin-top: 12px; }
.form-msg { margin-top: 14px; font-weight: 600; display: none; }
.form-msg.ok { display: block; color: var(--c-ok); }
.form-msg.err { display: block; color: var(--c-err); }

/* ===========================  REVEAL POISTETTU  ============================ */
.reveal, html.js .reveal { opacity: 1 !important; transform: none !important; }

/* ===========================  RESPONSIIVISUUS  ============================ */
@media (max-width: 860px) {
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hero { min-height: 0; }
  /* 🛑 Ylätila varattava navin korkeudelle (74px). nav.site on position:fixed, eli se ei vie
     tilaa virtauksesta, ja kun .hero min-height nollataan, hero alkaa sivun ylälaidasta →
     h1 jää navin alle. Vika ei näy silloin kun herossa sattuu olemaan .eyebrow h1:n yläpuolella
     (se työntää otsikon alas), joten se paljastui vasta sivulla jossa eyebrow'ta ei ollut.
     Mitattu 7.9.2026 (VCTS): peitto +19px ilman tätä, -37px tämän kanssa. */
  .hero-inner { padding-block: 112px 56px; }
  .stats { gap: 14px; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .hero-meta .m { border-right: 0; padding-right: 0; margin-right: 20px; }
  .btn { width: 100%; justify-content: center; }
  .hero-cta .btn, .cta-band .btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js .reveal, .reveal { opacity: 1 !important; transform: none !important; }
}


/* Lomakkeen alasvetovalikko — samat mitat ja tila kuin muilla kentillä.
   Oma nuoli-ikoni, koska selaimen oletusnuoli ei noudata teemaa.
   (Lisätty pohjiin 26.8.2026: viisi asiakasta oli joutunut kirjoittamaan tämän itse.) */
.field select, .form-group select {
  width: 100%; font: inherit; font-size: 16px; color: inherit;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m1 1 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 42px;
}


/* ============================================================================
   VAALEA VARIANTTI  —  lisää <body class="vaalea"> niin koko sivu kääntyy
   ----------------------------------------------------------------------------
   Tummasta vaaleaksi kääntäminen tehtiin aiemmin käsin joka kerta (A tape /
   demo13, 25.8.2026). Tämä lohko hoitaa sen: värit, varjot, nav ja hero-peitto.
   Aksenttiväri (--c-primary) EI muutu — vaihda se asiakkaan brändiin kuten aina.
   Hienosäädä tarvittaessa, mutta älä poista: pohjan pitää tarjota molemmat.
   ============================================================================ */
body.vaalea {
  --c-bg:        #FAF8F4;
  --c-surface:   #FFFFFF;
  --c-surface-2: #F2EEE7;
  --c-text:      #4A453D;
  --c-heading:   #14110C;
  --c-muted:     #7A7268;
  --c-border:    #E4DED4;
  --c-on-primary:#1A1407;
  /* Tumma sävy jää sitaattikaistaan ja footeriin — kontrastiksi, ei pohjaväriksi */
  --c-dark:      #14110C;
  --c-on-dark:   #EDE8DF;
  /* Varjot kevyiksi: mustapohjainen varjo likaantuu vaalealla pinnalla */
  --shadow-sm:   0 1px 3px rgba(20,17,12,.06);
  --shadow:      0 14px 36px -18px rgba(20,17,12,.16);
  --shadow-lg:   0 28px 64px -28px rgba(20,17,12,.20);
}
/* Nav peittäväksi: läpinäkyvä nav toimii vain valokuvahero'n päällä */
body.vaalea nav.site { background: var(--c-bg); border-bottom: 1px solid var(--c-border); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.vaalea nav.site a, body.vaalea nav.site .brand { color: var(--c-heading); }
/* Hero-peitto kevyemmäksi ja neutraaliksi (peitto ei saa olla brändinvärinen) */
body.vaalea .hero::before { background: linear-gradient(rgba(20,17,12,.42), rgba(20,17,12,.60)); }


/* ============================================================================
   OSIOKIRJASTO — lisätty pohjiin 26.8.2026
   Nämä kolme rakennettiin aiemmin käsin lähes joka asiakkaalle (mm. A tape).
   Kaikki käyttävät pohjan omia muuttujia, joten ne teemautuvat itsestään.
   ============================================================================ */

/* --- Yhteyshenkilökortit: isot kasvokuvat, ei pikkuruisia nappikuvia ---------
   Rajaa kuvat KASVOIHIN ennen käyttöä. Koko vartalo 60 px ympyrässä tarkoittaa,
   ettei kasvoja erota — tämä oli A tapen ensimmäisen version virhe. */
.person-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 26px 0 8px; }
.person { display: flex; flex-direction: column; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.person img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.person > div { padding: 16px 18px 18px; }
.person b { display: block; font-family: var(--font-display); font-size: 1.08rem; color: var(--c-heading); margin-bottom: 4px; }
.person a, .person span { display: block; font-size: .95rem; color: var(--c-muted); }
@media (hover: hover) { .person a:hover { color: var(--c-primary); } }

/* --- 2×2-korttiruudukko: neljä referenssiä tai palvelua ----------------------
   Palvelukorttien rivisääntö: 4 kpl EI KOSKAAN 3+1, vaan 2×2. */
.cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .cards--2 { grid-template-columns: 1fr; } }
.cards--2 .card .num { display: inline-block; align-self: flex-start; font-size: .9rem;
  letter-spacing: .12em; font-weight: 700; color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
  padding: 5px 13px; border-radius: var(--r-pill); }

/* --- Nostolainaus: asiakassitaatti omalla kaistallaan ------------------------
   Toimii sekä vaalealla että tummalla osiolla (peri väri isännältä). */
.pull { margin: 0; max-width: 900px; margin-inline: auto; text-align: center; }
.pull p { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 2.1rem); line-height: 1.35;
  max-width: none; margin: 0 0 22px; letter-spacing: -.02em; }
.pull footer { font-size: .96rem; letter-spacing: .04em; opacity: .75; }
.pull::before { content: "”"; display: block; font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6rem); line-height: .6; opacity: .18; margin-bottom: 8px; }


/* ============================================================================
   ASIAKASKOHTAISET LISÄYKSET — Wasastjerna & co (16.9.2026, v2 demo5)
   ============================================================================ */
/* Palvelulista ilman hintoja: nimi + kuvaus */
.menu-item .mi-name { font-size: 1.28rem; }
.menu-item .mi-desc { max-width: 52ch; }
/* Työhistoria aikajanalla: vuosi ympyrän sijaan */
.timeline .tl::before { content: attr(data-y); width: auto; min-width: 40px; padding: 0 12px; border-radius: 999px; font-size: .78rem; letter-spacing: .04em; white-space: nowrap; }
.timeline .tl p { font-size: .9rem; }
/* Asiakassitaatit 2×2 tummina kortteina, kasvokuva + nimi */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.quotes .q { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(24px, 3.4vw, 38px); display: flex; flex-direction: column; }
.quotes blockquote { margin: 0 0 22px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.5; color: var(--c-heading); }
.quotes .who { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.quotes .who img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: 0 0 54px; border: 1px solid var(--c-border); }
.quotes .who b { display: block; color: var(--c-heading); font-size: .95rem; }
.quotes .who span { display: block; color: var(--c-muted); font-size: .85rem; }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }
/* Luottamusrivi: badge-kuva rivissä */
.trust-in .t img { height: 40px; width: auto; }
/* Yhteystiedot: some-napit riviin */
.contact-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* Hero: teksti vasempaan reunaan (pohjan keskitetty 760 px -laatikko peitti kasvot), potretti oikealla */
.hero-inner { max-width: var(--container); }
.hero-inner > * { max-width: 640px; }
.hero-inner h1 { max-width: 13ch; }
.hero-bg img { object-position: 72% 40%; }
@media (max-width: 860px) { .hero-bg img { object-position: 78% 30%; } .hero-overlay { background: linear-gradient(180deg, rgba(10,11,14,.35) 0%, rgba(10,11,14,.72) 55%, rgba(10,11,14,.94) 100%); } }
/* Tunnustusbadge tummalla: valkoinen laatta, muuten teksti ei erotu */
.trust-in .t img { background: #fff; padding: 5px 10px; border-radius: 8px; height: 44px; }
/* CTA-banneri: Kaj vasemmalla, teksti keskellä ei osu kasvoihin; tummempi huntu */
.cta-photo .cta-bg img { object-position: 0% 40%; }
.cta-photo .cta-veil { background: radial-gradient(85% 130% at 50% 50%, rgba(8,9,12,.6), rgba(8,9,12,.9)); }
/* Tietoa minusta: pystypotretti + teksti vierekkäin (sääntö 18.9.2026: ei irrallisia kuvia ilman tekstiä päällä tai vieressä) */
.about-split { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.about-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-border); box-shadow: var(--shadow); }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; display: block; }
.about-copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.about-copy .lead { margin-bottom: 14px; }
.about-copy p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .about-split { grid-template-columns: 1fr; } .about-photo { max-width: 440px; } }
/* Aikajana 9 kohtaa → 3 × 3, ei orpoa (19.9.2026) */
@media (min-width: 761px) { .timeline { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .timeline { grid-template-columns: 1fr; row-gap: 26px; } }

/* ============================================================================
   ALASIVUT (24.9.2026): palvelut/, tietoa-minusta/, ota-yhteytta/
   Sivuston osoitteet säilyvät samoina kuin vanhalla sivustolla, joten jokainen
   sisältösivu on oma tiedostonsa. Nav on kiinteä, siksi yläosaan oma tilavaraus.
   ============================================================================ */
.page-hero { position: relative; overflow: hidden; background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding-block: clamp(124px, 15vw, 186px) clamp(42px, 6vw, 70px); }
.page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(64% 130% at 10% 0%, color-mix(in srgb, var(--c-primary) 15%, transparent), transparent 64%); }
.page-hero .wrap { position: relative; }
.page-hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); max-width: 19ch; }
.page-hero .lead { max-width: 72ch; }
.page-hero .hero-cta { margin-top: 26px; }

/* Sivukohtainen potretti tekstin vierellä. Jokaisella sivulla on eri kuva, kuten vanhalla
   sivustollakin (sääntö _ohjeet.md §12: ei irrallisia kuvia ilman tekstiä vieressä). */
.page-hero--kuva .wrap { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.page-hero--kuva .ph-kuva { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-border); box-shadow: var(--shadow); }
.page-hero--kuva .ph-kuva img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
@media (max-width: 860px) { .page-hero--kuva .wrap { grid-template-columns: 1fr; } .page-hero--kuva .ph-kuva { max-width: 360px; } }

/* Murupolku: kertoo myös hakukoneelle sivun paikan (sama tieto BreadcrumbList-schemassa) */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .84rem; color: var(--c-muted); margin-bottom: 16px; }
.crumbs a { color: var(--c-muted); }
.crumbs span { color: color-mix(in srgb, var(--c-muted) 60%, transparent); }
@media (hover: hover) { .crumbs a:hover { color: var(--c-primary); } }

/* Palvelusivun lohkot. scroll-margin pitää vanhat #ankkurit navin alta näkyvissä. */
.service-block { padding-block: clamp(34px, 5vw, 56px); border-top: 1px solid var(--c-border); scroll-margin-top: 92px; }
.service-block:first-of-type { border-top: 0; padding-top: 0; }
/* Otsikko tekstin päällä, ei omassa sarakkeessaan: sarake vei leveyttä koko lohkolta ja
   työnsi leipätekstin oikealle (Valtteri 24.9.2026). */
.service-inner { display: block; }
.service-inner > h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0 0 18px; }
.service-body { max-width: none; }
.service-body > p { color: var(--c-text); }
.service-body > p:last-child { margin-bottom: 0; }
.service-body h3 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); margin: 26px 0 8px; }
.service-body h3:first-child { margin-top: 0; }
.service-body .tlink { margin-top: 20px; }

/* Palvelun yhteydessä oleva asiakaslainaus */
.svc-quote { margin: 24px 0 0; padding: 22px 26px; background: var(--c-surface); border: 1px solid var(--c-border);
  border-left: 2px solid var(--c-primary); border-radius: var(--r); }
.svc-quote blockquote { margin: 0 0 12px; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.5; color: var(--c-heading); }
.svc-quote .who { display: flex; align-items: center; gap: 12px; }
.svc-quote .who img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 42px; border: 1px solid var(--c-border); }
.svc-quote .who b { display: block; color: var(--c-heading); font-size: .92rem; }
.svc-quote .who span { display: block; color: var(--c-muted); font-size: .83rem; }

/* Työhistoria alasivulla: pitkät kuvaukset eivät mahdu aikajanaruudukkoon, siksi lista */
.exp-item { display: grid; grid-template-columns: 158px 1fr; gap: clamp(14px, 3vw, 40px);
  padding-block: clamp(20px, 3vw, 28px); border-top: 1px solid var(--c-border); }
.exp-item:first-child { border-top: 0; padding-top: 0; }
.exp-y { font-family: var(--font-display); color: var(--c-primary); font-size: 1.02rem; white-space: nowrap; }
.exp-b h3 { margin: 0 0 3px; font-size: 1.14rem; }
.exp-b .role { display: block; color: var(--c-heading); font-weight: 700; font-size: .93rem; margin-bottom: 9px; }
.exp-b p { color: var(--c-muted); font-size: .95rem; margin: 0; }
.exp-b .tlink { margin-top: 10px; font-size: .86rem; }
@media (max-width: 640px) { .exp-item { grid-template-columns: 1fr; gap: 4px; } }

/* Hallitustyöskentely: kompakti kahden sarakkeen lista */
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 60px); }
.board-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--c-border); }
.board-item .bi { min-width: 0; }
.board-item b { display: block; color: var(--c-heading); font-family: var(--font-body); font-weight: 600; font-size: .98rem; }
.board-item .bi span { display: block; color: var(--c-muted); font-size: .88rem; margin-top: 2px; }
.board-item .yrs { color: var(--c-primary); font-family: var(--font-display); font-size: .95rem; white-space: nowrap; }
@media (max-width: 760px) { .board { grid-template-columns: 1fr; } }