/* ==========================================================================
   VERSTAS GOES BUSINESS — tyylit
   Toteutus DESIGN.md:n mukaan. Vanilla CSS, ei buildia.

   00 Fontit · 01 Tokenit · 02 Reset · 03 Typografia · 04 Layout
   05 Napit · 06 Navi · 07 Hero · 08 Faktanauha · 09 Ohjelma · 10 Liput
   11 Puhujat · 12 Paikka ja majoitus · 13 Lomake · 14 Footer
   15 Motion · 16 Mobiili · 17 Reduced motion · 18 Print
   ========================================================================== */

/* 00 FONTIT ------------------------------------------------------------- */
@font-face {
  font-family: "Big Shoulders";
  src: url("../fonts/BigShoulders-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-VariableItalic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Narrow"), local("Helvetica Neue"), local("Arial");
  size-adjust: 96%;
}
@font-face {
  font-family: "Big Shoulders Fallback";
  src: local("Arial Narrow"), local("Impact"), local("Arial");
  size-adjust: 88%;
}

/* 01 TOKENIT ------------------------------------------------------------ */
:root {
  /* Tummat pinnat: lahes musta (VGB erottuu emosivuston lampimasta #161310:sta) */
  --piki: #0c0b0a;
  --piki-2: #141311;
  --piki-3: #1c1a17;

  --luu: #f0eae0;
  --luu-2: #e6dfd2;
  --luu-3: #d9d0c0;

  --messinki: #d4a13c;
  --messinki-hot: #e6b652;
  --messinki-mid: #a8741c;
  --messinki-deep: #7d5212;
  --messinki-line: rgba(212, 161, 60, 0.55);

  --t-luu: #f0eae0;
  --t-luu-2: #b3aea6;
  --t-piki: #161310;
  --t-piki-2: #6b625a;

  --line-dark: rgba(240, 234, 224, 0.16);
  --line-dark-2: rgba(240, 234, 224, 0.28);
  --line-light: rgba(22, 19, 16, 0.14);
  --line-light-2: rgba(22, 19, 16, 0.32);
  /* Summit-tyylinen harmaa apuviiva messingin rinnalla */
  --line-gray: rgba(240, 234, 224, 0.22);
  --line-gray-light: rgba(22, 19, 16, 0.22);

  --err-dark: #e0664a;
  --err-light: #9d4128;

  --radius: 2px;
  --radius-btn: 2px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-wipe: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: "Big Shoulders", "Big Shoulders Fallback", "Arial Narrow", Impact, sans-serif;
  /* Nappifontti: Archivo (OFL), variable. Anton oli 14-17px:ssa liian tiivis
     ja umpinainen; Archivo wdth 84 / wght 800 antaa saman tiiviin boldin
     ilmeen mutta avoimet sisaaukot, eli se pysyy luettavana pienena. */
  --font-btn: "Archivo", "Archivo Fallback", "Arial Narrow", Helvetica, sans-serif;
  --font-body: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Instrument Serif", Georgia, serif;

  --fs-hero: clamp(3.5rem, 9.2vw, 8.25rem);
  --fs-h2: clamp(2.5rem, 5.4vw, 5rem);
  --fs-h3: clamp(1.375rem, 2.2vw, 1.875rem);
  --fs-h4: 1.125rem;
  --fs-price: clamp(2.5rem, 4.5vw, 4rem);
  --fs-time: 1.375rem;
  --fs-lead: clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;
  --fs-btn: 0.8125rem;
  --fs-nav: 0.875rem;

  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1360px;
  --sec-pad: clamp(80px, 9vw, 128px);
  --h-nav: 104px;

  /* pintakonteksti, oletus tumma */
  --fg: var(--t-luu);
  --fg-2: var(--t-luu-2);
  --line-c: var(--line-dark);
  --line-c-2: var(--line-dark-2);
  --accent: var(--messinki);
  /* Aksentti PIENENA TEKSTINA: vaalealla oltava --messinki-deep (5.7:1),
     koska --messinki on luulla 1.9:1 ja --messinki-mid vain 3.4:1. */
  --accent-txt: var(--messinki);
  --surface-2: var(--piki-2);
  --rule-brass: var(--messinki);
  --rule-gray: var(--line-gray);
}

/* 02 RESET -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  background: var(--piki);
  color-scheme: dark;
  scroll-behavior: smooth;
}
body {
  min-height: 100svh;
  overflow-x: clip;
  background: var(--piki);
  color: var(--t-luu);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200; padding: 12px 16px;
  background: var(--luu); color: var(--piki); font-weight: 600; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* 03 TYPOGRAFIA --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.95;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); line-height: 0.98; }
h2 { font-size: var(--fs-h2); line-height: 1.04; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.08; letter-spacing: 0.01em; font-variation-settings: "opsz" 40; }
h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.05; letter-spacing: 0.02em; font-variation-settings: "opsz" 24; }
.u-messinki { color: var(--accent); }
.lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 46ch; text-wrap: pretty; }
.lead--accent {
  font-family: var(--font-accent); font-style: italic;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.3; max-width: 34ch;
}
.copy { max-width: 62ch; }
.copy p + p { margin-top: 1em; }
.copy a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.copy a:hover { color: var(--accent); }
.small { font-size: var(--fs-small); line-height: 1.5; }
.dim { color: var(--fg-2); }
.label {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-2);
}
.num { font-variant-numeric: tabular-nums; }
.line { display: block; overflow: hidden; }
.line > span { display: block; }

/* 04 LAYOUT ------------------------------------------------------------- */
.wrap { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.sec { padding-block: var(--sec-pad); position: relative; }
.sec--tight { padding-block: clamp(56px, 6vw, 88px); }
.sec--dark {
  background: var(--piki); color: var(--t-luu);
  --fg: var(--t-luu); --fg-2: var(--t-luu-2);
  --line-c: var(--line-dark); --line-c-2: var(--line-dark-2);
  --accent: var(--messinki); --accent-txt: var(--messinki); --surface-2: var(--piki-2);
  --rule-brass: var(--messinki); --rule-gray: var(--line-gray);
  --dot: var(--messinki); --dot-2: var(--messinki-mid);
  color-scheme: dark;
}
.sec--light {
  background: var(--luu); color: var(--t-piki);
  --fg: var(--t-piki); --fg-2: var(--t-piki-2);
  --line-c: var(--line-light); --line-c-2: var(--line-light-2);
  --accent: var(--messinki-mid); --accent-txt: var(--messinki-deep); --surface-2: var(--luu-2);
  --rule-brass: var(--messinki-deep); --rule-gray: var(--line-gray-light);
  --dot: var(--messinki-deep); --dot-2: rgba(125, 82, 18, 0.7);
  color-scheme: light;
}

/* Summit-tyylinen viivadetalji: lyhyt messinkipalkki + pidempi harmaa viiva.
   Vain hero, puhujat, liput ja paikka, ettei siita tule kohinaa. */

/* Viistetyt muodot. A: yksi leikattu kulma. B: pyoristetty pala pois maskilla. */
.shape-notch {
  --notch: 48px;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.shape-notch--bl {
  --notch: 48px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}
.shape-cut {
  --cut: clamp(72px, 11vw, 148px);
  -webkit-mask-image: radial-gradient(circle var(--cut) at 0 100%, transparent 0 var(--cut), #000 calc(var(--cut) + 1px));
  mask-image: radial-gradient(circle var(--cut) at 0 100%, transparent 0 var(--cut), #000 calc(var(--cut) + 1px));
}

/* Kulmakehys: kaksi messinkihakasta kuvan vastakkaisiin kulmiin. Ei suoraa
   viivaa reunasta reunaan, vaan merkki joka jattaa kuvan hengittamaan. */
.frame { position: relative; overflow: visible !important; }
.frame::before, .frame::after {
  content: ""; position: absolute; width: clamp(40px, 5vw, 72px); height: clamp(40px, 5vw, 72px);
  border: 2px solid var(--frame-c, var(--messinki)); pointer-events: none; z-index: 2;
}
.frame::before { top: -16px; left: -16px; border-right: 0; border-bottom: 0; }
.frame::after { bottom: -16px; right: -16px; border-left: 0; border-top: 0; }
.frame--brass { --frame-c: var(--messinki); }

/* Vinoviivakuvio: kaytetaan pintana siella missa kuvaa ei ole. */
.hatch {
  background-color: var(--luu-3);
  background-image: repeating-linear-gradient(45deg,
    rgba(212, 161, 60, 0.55) 0 2px, transparent 2px 13px);
}
.sec--dark .hatch { background-color: var(--piki-3); }

/* Kulmikas siirtyma sectionien valissa: kolmio sectionin ylapuolella omalla
   taustavarilla. Enintaan kaksi koko sivulla. */
.sec--angled { --ramp: clamp(40px, 5vw, 72px); --ramp-viiva: 3px; }
/* Umpinainen kiila. Menee 1px sectionin ylareunan yli, muuten clip-pathin
   reunapehmennys jatti vaakasuoran sauman josta vaalea pinta paistoi labi. */
.sec--angled::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  height: calc(var(--ramp) + 1px); background: inherit; z-index: 2;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
/* Messinkiviiva rampin suuntaisesti. Clip-path eika gradientti: gradientin
   kova varirajaus ei reunapehmenny, ja nain loivassa kulmassa siita tuli
   sahalaitainen. Rajattu kapeaksi nauhaksi eika tayteen kiilaan: taytetysta
   kiilasta jai messinkia peittavan kiilan vaakasuoran alareunan alle, mika
   nakyi himmeana harmaana viivana osion ylareunassa koko leveydelta. */
.sec--angled::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  height: calc(var(--ramp) + 1px + var(--ramp-viiva));
  z-index: 1; pointer-events: none; background: var(--messinki);
  clip-path: polygon(0 calc(100% - var(--ramp-viiva)), 100% 0,
                    100% var(--ramp-viiva), 0 100%);
}
.sec--same > .wrap { border-top: 1px solid var(--line-c); padding-top: clamp(56px, 6vw, 88px); }
.sec--same { padding-top: 0; }
.sec__head {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 24px 48px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px);
}
.sec__head--single { grid-template-columns: 1fr; }
.sec__aside { justify-self: start; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.stack-20 > * + * { margin-top: 20px; }

/* 05 NAPIT -------------------------------------------------------------- */
/* Yksiosainen nappi. Typografia ja mitat: leadersinaisummit.com
   (Anton 400, 20px / line-height 1 / letter-spacing 0, uppercase,
   padding 28px 40px, radius 8px, nappirivin gap 8px).
   Nuoli: Material Symbols Rounded "arrow_forward", rako 8px
   (emeralddevelopersny.com). Sama jarjestelma kuin nakkilanverstas.fi:ssa. */
.btn {
  --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: var(--line-c-2);
  --btn-hover: var(--messinki); --btn-hover-fg: #161310; --btn-hover-line: var(--messinki);
  --btn-fs: 16px; --btn-pad-y: 22px; --btn-pad-x: 34px;
  --btn-gap: 8px; --btn-slide: 6px; --btn-ico: 20px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap);
  min-width: 0; padding: var(--btn-pad-y) var(--btn-pad-x);
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-line); border-radius: var(--radius-btn);
  font-family: var(--font-btn); font-weight: 800; font-size: var(--btn-fs);
  font-variation-settings: "wdth" 84; font-stretch: 84%;
  line-height: 1; letter-spacing: 0.045em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; text-align: center;
  transition: color 0.38s var(--ease), border-color 0.38s var(--ease), transform 0.12s ease;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-hover);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.38s var(--ease);
}
.btn__label { display: flex; align-items: center; padding: 0; border: 0; background: none; border-radius: 0; }
.btn__cell {
  display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; background: none;
  border-radius: 0; transition: transform 0.38s var(--ease);
}
.btn__cell svg {
  width: var(--btn-ico); height: var(--btn-ico); stroke: currentColor; stroke-width: 1.75; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Material Symbols -nuolet piirtyvat tayttona, Luciden ikonit viivana */
svg.is-filled, svg.is-filled * { fill: currentColor; stroke: none; }
.btn--sm { --btn-fs: 13px; --btn-pad-y: 13px; --btn-pad-x: 22px; --btn-ico: 15px; }
.btn--cell-only { --btn-pad-x: var(--btn-pad-y); }
.btn--cell-only .btn__label { display: none; }
.btn--block { display: flex; width: 100%; }
.btn--messinki { --btn-bg: var(--messinki); --btn-fg: #161310; --btn-line: var(--messinki); --btn-hover: var(--messinki-hot); --btn-hover-fg: #161310; --btn-hover-line: var(--messinki-hot); }
.btn--fill-piki { --btn-bg: var(--piki); --btn-fg: #f0eae0; --btn-line: var(--piki); --btn-hover: var(--messinki); --btn-hover-fg: #161310; --btn-hover-line: var(--messinki); }
.btn--outline-luu { --btn-bg: transparent; --btn-fg: #f0eae0; --btn-line: rgba(240, 234, 224, 0.45); --btn-hover: var(--messinki); --btn-hover-fg: #161310; --btn-hover-line: var(--messinki); }
.btn--outline-piki { --btn-bg: transparent; --btn-fg: #161310; --btn-line: rgba(12, 11, 10, 0.4); --btn-hover: var(--piki); --btn-hover-fg: #f0eae0; --btn-hover-line: var(--piki); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--btn-hover-fg); border-color: var(--btn-hover-line); }
  .btn:hover::before { transform: scaleX(1); }
  .btn:hover .btn__cell { transform: translateX(var(--btn-slide)); }
  .btn--down:hover .btn__cell { transform: translateY(var(--btn-slide)); }
}
}
.btn.is-loading .btn__cell svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 06 NAVI --------------------------------------------------------------- */
/* Sticky-navi peitti ankkurilinkin kohdeotsikon ylaosan. Varataan navin
   korkeus ja hieman ilmaa, jotta otsikko jaa kokonaan nakyviin. Navi kutistuu
   vieritettaessa, joten tasta jaa viela pieni pelivara. */
:where(section[id], article[id]) { scroll-margin-top: calc(var(--h-nav) + 28px); }

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--h-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter); background: transparent; border-bottom: 1px solid transparent;
  transition: height 0.3s var(--ease), background-color 0.3s var(--ease),
              transform 0.4s var(--ease), border-color 0.3s;
}
/* Tummennus navin taakse heron paalla: ilman sita menu-nappi ja logo
   hukkuivat kuvan vaaleisiin kohtiin. Haviaa kun navi saa oman taustansa. */
.nav::before {
  content: ""; position: absolute; inset: 0 0 -48px 0; z-index: -1;
  pointer-events: none; transition: opacity 0.3s var(--ease);
  background: linear-gradient(to bottom,
    rgba(10, 9, 8, 0.62) 0%, rgba(10, 9, 8, 0.38) 55%, rgba(10, 9, 8, 0) 100%);
}
.nav.is-scrolled::before, .nav.is-open::before { opacity: 0; }
.nav.is-scrolled { height: 84px; background: var(--piki); border-bottom-color: var(--line-dark); }
/* Navi pysyy aina nakyvissa (Alexin ohje 22.9.) */
.nav.is-open { transform: none; background: var(--piki); }
.nav__logo { display: block; flex: 0 0 auto; }
.nav__logo img { height: 64px; width: auto; transition: height 0.3s var(--ease); }
.nav.is-scrolled .nav__logo img { height: 50px; }
.nav__right { display: flex; align-items: center; gap: 40px; }
.nav__links { display: flex; gap: 32px; }
.nav__link {
  position: relative; font-size: var(--fs-nav); font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; padding: 6px 0; white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active::after { transform: scaleX(1); background: var(--messinki); }
.nav__burger { display: none; }
.nav__cta .btn__label { gap: 6px; }

.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--piki); color: var(--t-luu);
  padding: calc(64px + 24px) var(--gutter) 32px; display: flex; flex-direction: column;
  overflow-y: auto; clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none;
  transition: clip-path 0.5s var(--ease-wipe), visibility 0s linear 0.5s;
}
.menu.is-open { visibility: visible; pointer-events: auto; clip-path: inset(0); transition: clip-path 0.5s var(--ease-wipe); }
.menu__list li { border-top: 1px solid var(--line-dark); }
.menu__list li:last-child { border-bottom: 1px solid var(--line-dark); }
.menu__link {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 0;
  text-decoration: none; font-family: var(--font-display); font-weight: 700;
  font-size: 2.5rem; line-height: 1.1; text-transform: uppercase; font-variation-settings: "opsz" 40;
  min-height: 56px;
}
.menu__link svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.75; fill: none; }
.menu__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 16px; font-size: var(--fs-small); }
.menu__foot a:not(.btn) { text-decoration: none; }
.menu.is-open .menu__link, .menu.is-open .menu__foot > * { animation: menuIn 0.5s var(--ease-out) backwards; }
.menu.is-open .menu__list li:nth-child(1) .menu__link { animation-delay: 0.2s; }
.menu.is-open .menu__list li:nth-child(2) .menu__link { animation-delay: 0.25s; }
.menu.is-open .menu__list li:nth-child(3) .menu__link { animation-delay: 0.3s; }
.menu.is-open .menu__list li:nth-child(4) .menu__link { animation-delay: 0.35s; }
.menu.is-open .menu__list li:nth-child(5) .menu__link { animation-delay: 0.4s; }
.menu.is-open .menu__list li:nth-child(6) .menu__link { animation-delay: 0.45s; }
.menu.is-open .menu__foot > * { animation-delay: 0.5s; }
@keyframes menuIn { from { opacity: 0; transform: translateY(20px); } }

/* 07 HERO --------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 160px var(--gutter) clamp(48px, 6vw, 72px); overflow: clip;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--piki); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.hero__img--after { z-index: 1; }
.hero__edge {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--messinki);
  z-index: 2; opacity: 0; will-change: transform;
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(0deg, rgba(12, 11, 10, 0.95) 0%, rgba(12, 11, 10, 0.55) 32%, rgba(12, 11, 10, 0.1) 62%),
    linear-gradient(90deg, rgba(12, 11, 10, 0.88) 0%, rgba(12, 11, 10, 0.4) 46%, rgba(12, 11, 10, 0.62) 100%);
}
.hero__inner {
  /* Leipatekstin ja nappirivin yhteinen mitta, jotta oikeat reunat osuvat */
  --hero-text-w: 480px;
  position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto; width: 100%;
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px 48px; align-items: end;
}
.hero__lead { margin-top: 20px; font-size: clamp(1rem, 1.05vw, 1.0625rem); line-height: 1.5; max-width: var(--hero-text-w); color: var(--t-luu-2); }
/* Nappirivi samaan mittaan leipatekstin kanssa: kaksi yhta levea saraketta,
   jolloin rivin oikea reuna osuu tekstin oikeaan reunaan eika yli. */
.hero__btns {
  margin-top: 28px; max-width: var(--hero-text-w);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.hero__btns .btn { width: 100%; justify-content: center; --btn-pad-x: 16px; }
/* Päivämääräpylväs: heron toinen ankkuri otsikon rinnalla, ei alapalkkia */
/* Tapahtumatiedot: nelja samankokoista riviä, ei otsikoita eikä erotinviivoja.
   Pylväs venyy heron vasemman palstan korkuiseksi ja rivit jakautuvat tasan. */
.hero__date {
  justify-self: end; align-self: stretch; text-align: left; width: min(100%, 380px);
  display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 8px;
}
/* Isot rivit, valjat valit. Paivamaara on selvasti suurin, ja savyt
   porrastetaan niin ettei pylvas ole yhta valkoista massaa. */
.hero__facts { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 30px; }
.hero__facts li {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 2.95vw, 2.625rem); line-height: 1.05; letter-spacing: 0.01em;
  text-transform: uppercase; font-variation-settings: "opsz" 40; font-variant-numeric: tabular-nums;
}
/* Kasin piirretyn oloinen aaltoviiva paivamaaran alle: ei suora viiva vaan
   epatasainen veto, joka piirtyy heron sisaantulossa vasemmalta oikealle. */
.hero__day { position: relative; display: inline-block; }
.scribble {
  position: absolute; left: 0; right: -2%; top: calc(100% + 4px);
  width: 104%; height: 0.38em; overflow: visible;
}
.scribble path {
  fill: none; stroke: var(--messinki); stroke-width: 5; stroke-linecap: round;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.hero__facts li:first-child {
  color: var(--messinki); white-space: nowrap; margin-bottom: 48px;
  font-size: clamp(3.25rem, 5vw, 4.5rem); font-variation-settings: "opsz" 72;
}
/* paikka taysi luu, kesto himmeampi, hinta taas taysi -> rytmi */
/* Ikoni + teksti omina sarakkeinaan, jotta rivin rivittyessa teksti ei
   valu ikonin alle. Ikoni on samasta Material Symbols -setista painolla 700
   kuin nappien nuoli, ja se skaalautuu rivin fonttikoon mukana. */
.hero__facts li:not(:first-child) {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 22px; align-items: start;
}
.hero__ico {
  width: 0.86em; height: 0.86em; margin-top: 0.078em; flex: 0 0 auto;
  color: var(--messinki);
}
/* Rivien lukujarjestys: paivamaara, aika, sijainti, Early Bird. Hintarivi on
   viimeisena, koska siina on ainoa paatos ja takaraja: palkki paattyy siihen
   ja katse siirtyy nappeihin. Jarjestys tehdaan flexin orderilla, jotta DOM
   sailyy loogisena ruudunlukijalle ja nth-child-varisaannot osuvat edelleen
   oikeisiin riveihin. */
.hero__facts li:nth-child(3) { order: 2; }
.hero__facts li:nth-child(2) { order: 3; }
.hero__facts li:nth-child(4) { order: 4; }
.hero__facts li:nth-child(2) { color: var(--t-luu); }
/* Sama saanto kuin mobiilissa: karki messinkiin, tarkenne luuksi. */
.hero__facts li:nth-child(3) { color: var(--t-luu); }
.hero__facts li:nth-child(4) { color: var(--t-luu); }
/* Early Bird nostetaan messinkiin: se on rivin myyva osa. */
.hero__facts li:nth-child(4) [data-fakta-lippu-k] { color: var(--messinki); }
/* Sama saanto kuin muilla riveilla: rivin karki messinkiin, tarkenne luuksi. */
.hero__karki { color: var(--messinki); }
/* Desktopilla heron tekstit ovat luunvalkoisia ja messinki on varattu
   yksin Early Birdille, jotta se erottuu rivistolta. Mobiilissa rivien
   karjet ovat messinkia, koska siella rivit ovat lyhyempia ja tiiviimpia. */
@media (min-width: 768px) {
  .hero__facts li:first-child { color: var(--t-luu); }
  .hero__karki, .hero__aika-alku { color: inherit; }
}

/* Esittely: perus split, kuva vasemmalla ja tekstit oikealla */
.intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
/* Kuva on tarkoituksella hieman korkeampi kuin oikean palstan sisalto,
   jolloin se jaa yli ylhaalta ja alhaalta eika rivity tekstin mukaan. */
.intro__media { margin: 0; aspect-ratio: 11 / 10;  border-radius: var(--radius);}
.intro__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .intro { grid-template-columns: 1fr; gap: 32px; }
  .intro__media { aspect-ratio: 4 / 3; }
}
.intro__text > .copy { margin-top: 24px; }
.intro__text > .btn-row { margin-top: 32px; }

/* 08 FAKTANAUHA --------------------------------------------------------- */
.facts { display: flex; border-block: 1px solid var(--line-c); }
.facts--hero { --line-c: var(--line-dark-2); }
.fact { flex: 1 1 0; padding: 16px 24px; border-right: 1px solid var(--line-c); min-width: 0; }
.fact:first-child { padding-left: 0; }
.fact:last-child { border-right: 0; }
.fact__k {
  display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-2); margin-bottom: 6px;
}
.fact__v {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  line-height: 1; text-transform: uppercase; letter-spacing: 0.01em;
  font-variation-settings: "opsz" 40; white-space: nowrap;
}
.fact--accent .fact__v { color: var(--messinki); }

/* 09 OHJELMA ------------------------------------------------------------ */
.prog { border-top: 1px solid var(--line-c); max-width: 1120px; }
.prog__row {
  display: grid; grid-template-columns: 88px 24px minmax(0, 3fr) minmax(0, 5fr);
  gap: 0 24px; padding: 24px 0; border-bottom: 1px solid var(--line-c);
  align-items: baseline; margin-inline: -24px; padding-inline: 24px;
  transition: background-color 0.25s var(--ease);
}
.prog__time {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-time);
  line-height: 1; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 40;
}
.prog__dot { position: relative; align-self: stretch; }
.prog__dot::before {
  content: ""; position: absolute; left: 50%; top: -24px; bottom: -24px; width: 1px;
  margin-left: -0.5px; background: var(--line-c);
}
/* Merkki keskitetaan seka viivalle etta rivin korkeudelle. Aiempi 0.35em
   sitoi sen ensimmaisen tekstirivin perusviivaan, jolloin se istui ylhaalla. */
.prog__dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--dot);
}
/* Viiva jatkuu ensimmaisen rivin ylareunaan asti, ei ala vasta tekstin kohdalta. */
.prog__row:first-child .prog__dot::before { top: -24px; }
.prog__row:last-child .prog__dot::before { bottom: -24px; height: auto; }
/* Muut ohjelmakohdat kuin puheenvuorot: lyhyt poikkiviiva, ei tyhjaa rengasta.
   Rengas luki "tassa ei ole mitaan"; viiva lukee "tassa on merkki aikajanalla". */
.prog__row--break .prog__dot::after {
  background: var(--dot-2); border: 0; border-radius: 0;
  width: 16px; height: 2px;
}
.prog__who {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 1.05;
  text-transform: uppercase; letter-spacing: 0.02em; font-variation-settings: "opsz" 24;
}
.prog__who a { text-decoration: none; }
.prog__who a:hover { color: var(--accent); }
.prog__what { font-size: var(--fs-body); line-height: 1.5; }
.prog__row--break .prog__who {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small);
  line-height: 1.5; text-transform: none; letter-spacing: 0; color: var(--fg-2);
}
@media (hover: hover) and (pointer: fine) {
  .prog__row:hover { background: var(--surface-2); }
}

/* 10 LIPUT: kolme korttia vierekkain ------------------------------------ */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.tier {
  --notch: 32px;
  position: relative; display: flex; flex-direction: column;
  padding: 28px 28px 28px; background: var(--piki-2);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.tier__badge {
  align-self: flex-start; display: inline-flex; align-items: center; height: 24px;
  padding: 0 10px; margin-bottom: 20px; background: var(--messinki); color: #0c0b0a;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.tier:not(.is-open) .tier__badge { visibility: hidden; }
.tier__name {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);
  line-height: 1; text-transform: uppercase; font-variation-settings: "opsz" 40;
}
.tier__price {
  display: block; margin-top: 16px; font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-price); line-height: 0.9; font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 72; white-space: nowrap;
}
.tier__price small {
  /* inline-block: estaa hinnan yliviivauksen periytymisen "+ alv":iin
     (periytyvaa text-decorationia ei voi kumota lapsessa, mutta se ei mene
     atomiseen inline-laatikkoon). */
  display: inline-block;
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); line-height: 1;
  text-transform: none; margin-left: 8px; color: var(--fg-2); letter-spacing: 0;
}
.tier__until { display: block; margin-top: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.tier__save { display: block; margin-top: 8px; font-size: var(--fs-small); line-height: 1.4; color: var(--messinki); }
.tier__list {
  margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-dark);
  display: grid; gap: 10px;
}
.tier__list li {
  position: relative; padding-left: 22px; font-size: var(--fs-small); line-height: 1.45; color: var(--t-luu-2);
}
.tier__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 1px; background: var(--messinki);
}
.tier__group { margin-top: 20px; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.tier__foot { margin-top: auto; padding-top: 24px; }
.tier__cta { display: flex; width: 100%; }
.tier__soon {
  display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-2);
}
/* Messinkireuna maalataan taustana ja kortin oma pinta ::before-kerroksena
   1px sisaan: nain reuna seuraa myos viistetyn kulman diagonaalia. Pelkka
   inset-box-shadow katkesi leikkauksen kohdalla. */
.tier.is-open { background: var(--messinki-line); }
.tier.is-open::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; background: var(--piki-2);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.tier.is-open > * { position: relative; z-index: 1; }
.tier.is-open .tier__price { color: var(--messinki); }
.tier.is-open .tier__until { color: var(--messinki); }
.tier.is-next { opacity: 0.6; }
.tier.is-past { opacity: 0.5; }
.tier.is-past .tier__price { text-decoration: line-through; text-decoration-thickness: 1px; }

.tier__note { margin-top: 24px; font-size: var(--fs-small); color: var(--fg-2); }

/* 11 PUHUJAT ------------------------------------------------------------ */
/* 11a Puhujakortit: nelja isoa korttia heti esittelyn jalkeen */
.spk-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.spk-card { display: flex; flex-direction: column; min-width: 0; text-decoration: none; }
.spk-card__img {
  position: relative;
  --notch: 40px; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--luu-3);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.sec--dark .spk-card__img { background: var(--piki-3); }
.spk-card__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  filter: grayscale(1) sepia(0.22) contrast(1.06) brightness(0.97);
  transition: filter 0.6s var(--ease), transform 0.8s var(--ease);
}
.spk-card__slot {
  margin-top: 18px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-txt); font-variant-numeric: tabular-nums;
}
.spk-card__name {
  margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);
  line-height: 1; text-transform: uppercase; font-variation-settings: "opsz" 40;
}
/* Lisatieto kuvan alalaitaan messinkilapuksi: tekstivirrassa se tyonsi
   yhden kortin nimen alemmas ja rikkoi neljan kortin rivityksen. */
.spk-card__pre {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  padding: 7px 12px; background: var(--messinki); color: #0c0b0a;
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
}
.spk-card__topic { margin-top: 10px; font-size: var(--fs-small); line-height: 1.45; color: var(--fg-2); }
.spk-card__more {
  margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.spk-card__more svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.28s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .spk-card:hover .spk-card__img img { filter: none; transform: scale(1.03); }
  .spk-card:hover .spk-card__more { color: var(--accent-txt); }
  .spk-card:hover .spk-card__more svg { transform: translateY(3px); }
}

/* 11b Pitkat esittelyt */
/* Kaksi palstaa: kuva vasemmalla, kaikki teksti oikealla yhtena pylvaana.
   Kolmas sarake jatti nimen alle ison tyhjan alueen. */
/* Kuva irrotettu tekstivirrasta absoluuttiseksi: se tayttaa aina kortin
   koko korkeuden, joten teksti ei voi olla sita korkeampi. Teksti on oma
   pystysuora pinonsa, joka keskittyy kuvan korkeuteen kun sita on vahan. */
.speaker {
  --spk-kuva: 400px; --spk-korkeus: 640px;
  --spk-pad: clamp(40px, 5vw, 64px); --spk-rako: clamp(32px, 4vw, 64px);
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: calc(var(--spk-korkeus) + 2 * var(--spk-pad));
  padding: var(--spk-pad) 0 var(--spk-pad) calc(var(--spk-kuva) + var(--spk-rako));
  border-top: 1px solid var(--line-c); scroll-margin-top: calc(var(--h-nav) + 28px);
}
/* Kuvat ovat kaikissa korteissa tasmalleen saman kokoiset tekstin pituudesta
   riippumatta. Sekä kuva etta teksti keskittyvat pystysuunnassa, joten ne
   ovat aina samalla keskilinjalla. */
.speaker__img {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: var(--spk-kuva); height: var(--spk-korkeus);
}
.speaker__bio { margin-top: 28px; }
.speaker:last-child { border-bottom: 1px solid var(--line-c); }
.speaker__img { overflow: hidden; border-radius: var(--radius); background: var(--luu-3); }
.speaker__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  filter: grayscale(1) sepia(0.22) contrast(1.06) brightness(0.97);
  transition: filter 1.1s var(--ease), transform 0.8s var(--ease);
}
/* Kuva on mustavalkoinen kunnes se on kunnolla nakyvissa, sitten variin.
   Nollat kirjoitettu auki: filter: none ei interpoloidu yhta luotettavasti. */
.speaker__img.is-vari img {
  filter: grayscale(0) sepia(0) contrast(1) brightness(1);
}
.speaker__pre { font-size: var(--fs-small); color: var(--fg-2); margin-bottom: 8px; }
.speaker__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1; text-transform: uppercase; font-variation-settings: "opsz" 40; }
.speaker__topic { margin-top: 12px; font-weight: 500; font-size: var(--fs-body); line-height: 1.45; }
.speaker__slot { margin-top: 8px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--messinki-deep); }
.speaker__site { margin-top: 24px; }
.speaker__bio { font-size: var(--fs-body); line-height: 1.55; max-width: 62ch; }
.speaker__bio p + p { margin-top: 1em; }
.speaker__bio .small { color: var(--fg-2); margin-top: 16px; }
@media (hover: hover) and (pointer: fine) {
  .speaker:hover .speaker__img img { filter: none; transform: scale(1.03); }
}


/* 12 PAIKKA JA MAJOITUS ------------------------------------------------- */
.img { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--piki-3); }
.img img { width: 100%; height: 100%; object-fit: cover; }
.img--3-2 { aspect-ratio: 3 / 2; }
.img--4-3 { aspect-ratio: 4 / 3; }
.sec--light .img { background: var(--luu-3); }

.specs { width: 100%; }
.spec { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 24px; padding: 16px 0; border-top: 1px solid var(--line-c); }
.spec:last-child { border-bottom: 1px solid var(--line-c); }
.spec__k { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); padding-top: 3px; }
.spec__v { font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.spec__v a { text-decoration: none; border-bottom: 1px solid var(--line-c-2); }
.spec__v a:hover { color: var(--accent); }

/* Kaksi korttia rinnakkain: kuva ylos, tiedot alle. Aiemmat leveat rivit
   hiusviivoineen olivat raskaat ja tyhjat. */
.stay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.stay__card { display: flex; flex-direction: column; min-width: 0; }
.stay__card > .img, .stay__card > .stay__ph { --notch: 40px; }
.stay__card h3 { margin-top: 28px; }
.stay__card .specs { margin-top: 16px; }
.stay__card .btn-row { margin-top: auto; padding-top: 24px; }
.stay__ph {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-piki-2);
  font-variation-settings: "opsz" 24;
}
.stay__ph span { background: var(--luu); padding: 10px 16px; }

/* 12b CTA-KAISTA: puhujakuva vasemmalla, varaus oikealla ---------------- */
.cta-band {
  position: relative; background: var(--piki); color: var(--t-luu);
  padding: clamp(64px, 7vw, 104px) var(--gutter);
  --fg: var(--t-luu); --fg-2: var(--t-luu-2);
  --line-c: var(--line-dark); --line-c-2: var(--line-dark-2);
  --accent: var(--messinki); --accent-txt: var(--messinki);
  --rule-brass: var(--messinki); --rule-gray: var(--line-gray);
}
/* Sisalto samassa mitassa kuin muut sectionit, ei reunasta reunaan */
.cta-band__inner {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
.cta-band__media { position: relative; aspect-ratio: 4 / 3;  border-radius: var(--radius);}
.cta-band__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  filter: grayscale(1) sepia(0.22) contrast(1.06) brightness(0.9);
}
.cta-band__body { display: flex; flex-direction: column; justify-content: center; }
.cta-band__price {
  margin-top: 24px; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-price);
  line-height: 0.9; color: var(--messinki); font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 72;
}

/* Paikka-osion kuva hieman oikean palstan sisaltoa korkeampi. */
#paikka .img { aspect-ratio: 20 / 21; }
@media (max-width: 860px) { #paikka .img { aspect-ratio: 3 / 2; } }

/* 12c EVASTEKORTTI ------------------------------------------------------ */
/* Evastekortti vasemmassa alakulmassa. Ei koko leveyden palkkia, jotta se
   peittaa sisallosta mahdollisimman vahan. */
.cookie {
  position: fixed; left: var(--gutter); bottom: var(--gutter); right: auto;
  z-index: 70;
  width: min(452px, calc(100vw - var(--gutter) * 2));
  background: var(--luu); color: var(--t-piki);
  border: 1px solid var(--line-light); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(12, 11, 10, 0.45);
  padding: 22px; font-size: var(--fs-small);
  /* Kortti odottaa sivun paljastusanimaation ohi ja liukuu sitten esiin.
     visibility display:nonen sijaan, jotta siirtyma voi ylipaataan ajautua. */
  visibility: hidden; opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0.5s;
  --fg: var(--t-piki); --fg-2: var(--t-piki-2);
  --line-c: var(--line-light); --line-c-2: var(--line-light-2);
}
.cookie.is-visible {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.cookie__inner { display: grid; gap: 18px; }
.cookie p { margin: 0; line-height: 1.55; }
/* linkki ei saa katketa kahdelle riville kesken nimen */
.cookie p a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* Napit vierekkain ja yhta leveina. Kortti on levea ja nappien teksti
   tiiviimpaa kuin muualla, jotta "Vain valttamattomat" mahtuu yhdelle
   riville puolikkaaseen sarakkeeseen. */
.cookie__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookie__btns .btn { white-space: nowrap; }
.cookie__btns .btn {
  justify-content: center; text-align: center;
  --btn-pad-x: 10px; font-size: 0.75rem; letter-spacing: 0.04em;
}
/* Suostumusnappi ei vie minnekaan, joten nuolisolu on pois. Samalla
   molemmat napit mahtuvat vierekkain kortin leveyteen. */
.cookie .btn__cell { display: none; }

@media (max-width: 600px) {
  .cookie { padding: 18px; }
  .cookie__btns { grid-template-columns: 1fr; }
  .cookie__btns .btn { font-size: 0.8125rem; }
}

/* 13 LOMAKE ------------------------------------------------------------- */
.form { display: grid; gap: 20px; }
.form__fields { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.field input, .field select, .field textarea {
  background: var(--piki-2); border: 1px solid var(--line-dark); height: 56px; padding: 0 16px;
  color: var(--t-luu); font-size: 1rem; width: 100%; border-radius: var(--radius);
  transition: border-color 0.25s var(--ease);
}
.field textarea { height: auto; min-height: 120px; padding: 16px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b3aea6' stroke-width='1.75'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--messinki); }
.field.is-error input, .field.is-error textarea, .field.is-error select { border-color: var(--err-dark); }
.field__err { font-size: 0.875rem; color: var(--err-dark); display: none; }
.field.is-error .field__err { display: block; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.field--check input { width: 18px; height: 18px; accent-color: var(--messinki); }
.field--check label { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); font-weight: 400; color: var(--t-luu-2); }
.form__err { font-size: var(--fs-small); color: var(--err-dark); min-height: 1.2em; }
.form__ok { display: none; }
.form.is-sent .form__fields { display: none; }
.form.is-sent .form__ok { display: block; }

/* 14 FOOTER ------------------------------------------------------------- */
.footer { background: var(--piki); color: var(--t-luu); padding: 64px 0 32px; border-top: 1px solid var(--line-dark); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; }
.footer__logo { height: 72px; width: auto; }
.footer__about { margin-top: 20px; font-size: var(--fs-small); color: var(--t-luu-2); max-width: 46ch; }
.footer__about a { text-decoration: none; border-bottom: 1px solid var(--line-dark-2); }
.footer__about a:hover { color: var(--messinki); }
.footer__bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-dark);
  font-size: 0.8125rem; color: var(--t-luu-2); display: flex; flex-wrap: wrap; gap: 8px 24px;
}
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { color: var(--messinki); }
.footer__credit { margin-left: auto; }

/* 15 MOTION ------------------------------------------------------------- */
html.js:not(.reduced) .js-reveal { opacity: 0; transform: translateY(16px); }
html.js:not(.reduced) .js-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
html:not(.js) .hero__img--before { display: none; }
html.js:not(.reduced) .hero__img--after { clip-path: inset(0 100% 0 0); }
/* Kertaluonteinen hidas zoom: kuva asettuu 1,05 -> 1,0 ja jaa paikalleen.
   Ei jatkuvaa ken burns -looppia, joka pitaisi kuvan pysyvasti skaalattuna. */
html.js:not(.reduced) .hero__img { transform: scale(1.05); transform-origin: 50% 45%; }
html.js:not(.reduced) .hero h1 .line > span,
html.js:not(.reduced) .hero__rule,
html.js:not(.reduced) .hero__lead,
html.js:not(.reduced) .hero__btns,
html.js:not(.reduced) .hero__date { opacity: 0; }
html.js:not(.reduced) .hero h1 .line > span { transform: translateY(110%); opacity: 1; }

/* Päätetilat käyttävät samaa html.js:not(.reduced) -etuliitettä kuin alkutilat,
   jotta spesifisyys on sama ja lähdejärjestys ratkaisee. */
html.js:not(.reduced) .hero__rule,
html.js:not(.reduced) .hero__lead,
html.js:not(.reduced) .hero__btns,
html.js:not(.reduced) .hero__date { transform: translateY(12px); }
html.js:not(.reduced) .hero.is-wiping .hero__img--after { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-wipe); }
html.js:not(.reduced) .hero.is-in .hero__img { transform: none; transition: transform 2.6s var(--ease-out); }
html.js:not(.reduced) .hero.is-wiping .hero__edge { opacity: 1; transform: translateX(100vw); transition: transform 1.1s var(--ease-wipe), opacity 0.2s 1s; }
html.js:not(.reduced) .hero.is-in h1 .line > span { transform: none; transition: transform 0.8s var(--ease-out); }
html.js:not(.reduced) .hero.is-in h1 .line:nth-child(2) > span { transition-delay: 0.09s; }
html.js:not(.reduced) .hero.is-in .hero__rule,
html.js:not(.reduced) .hero.is-in .hero__lead,
html.js:not(.reduced) .hero.is-in .hero__btns,
html.js:not(.reduced) .hero.is-in .hero__date {
  opacity: 1; transform: none; transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
html.js:not(.reduced) .hero.is-in .hero__btns { transition-delay: 0.1s; }
html.js:not(.reduced) .hero.is-in .hero__date { transition-delay: 0.2s; }
/* Aaltoviiva piirtyy vasta kun paivamaara on paikallaan. Paatetilalla sama
   html.js:not(.reduced) -etuliite kuin alkutilalla (ks. AGENTS.md). */
html.js:not(.reduced) .scribble path { stroke-dasharray: 100; stroke-dashoffset: 100; }
html.js:not(.reduced) .hero.is-in .scribble path {
  stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-out) 0.55s;
}

/* 16 MOBIILI ------------------------------------------------------------ */
@media (max-width: 1199px) {
  .nav__links { gap: 24px; }
  .nav__right { gap: 24px; }
  .nav__link { font-size: 0.8125rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 1099px) {
  .spk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
}
/* Slaiderin nuolet nakyvat vain kun kortit oikeasti vierivat. */
.spk-nuolet { display: none; gap: 8px; justify-content: flex-start; margin-bottom: 16px; }
/* Sliderissa aktiivinen kortti variin, muut mustavalkoisina. Nollat auki,
   koska filter: none ei interpoloidu yhta luotettavasti. */
.spk-card.is-aktiivinen .spk-card__img img {
  filter: grayscale(0) sepia(0) contrast(1) brightness(1);
}
.spk-nuoli {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-c-2); border-radius: var(--radius); color: var(--fg);
  background: none; cursor: pointer; transition: background-color 0.25s var(--ease);
}
.spk-nuoli:hover { background: var(--surface-2); }
.spk-nuoli[data-spk="-1"] svg { transform: rotate(180deg); }
.spk-nuoli svg { width: 18px; height: 18px; }
.spk-nuoli[disabled] { opacity: 0.35; cursor: default; }

@media (max-width: 767px) {
  .spk-nuolet { display: flex; }
  /* Puhujakortit vaakascrollilla, yksi kerrallaan */
  .spk-cards {
    display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: 4px;
  }
  .spk-cards::-webkit-scrollbar { display: none; }
  .spk-card { flex: 0 0 min(76%, 300px); scroll-snap-align: start; }
  /* Juliste on 3:4, joten kortti vei mobiilissa 61-78 % ruudun
     korkeudesta. Sliderissa matalampi rajaus riittaa. */
  .spk-card__img { --notch: 32px; aspect-ratio: 1 / 1; }
  /* Kortit ovat vaakasliderissa, joten reveal ei saa liikuttaa niita
     pystysuunnassa: jos osui samaan hetkeen kuin pyyhkaisy, kortit
     nayttivat liikkuvan joka suuntaan eivatka olevan lukossa radalla.
     Mobiilissa jaljelle jaa pelkka haivytys. */
  html.js:not(.reduced) .spk-cards .js-reveal { transform: none; }
  html.js:not(.reduced) .spk-cards .js-reveal.is-in { transform: none; transition: opacity 0.6s var(--ease-out); }
}
@media (max-width: 959px) {
  :root { --h-nav: 76px; }
  .nav { height: 64px; }
  .nav__logo img { height: 46px; }
  .nav.is-scrolled .nav__logo img { height: 42px; }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; --btn-pad-x: 12px; }
  /* Mobiilissa navin CTA ei saa viedä puolta palkista. */
  .nav__cta { --btn-fs: 13px; --btn-pad-y: 11px; --btn-pad-x: 14px; }
  .nav__burger .btn__cell svg.i-x { display: none; }
  .nav.is-open .nav__burger .btn__cell svg.i-menu { display: none; }
  .nav.is-open .nav__burger .btn__cell svg.i-x { display: block; }
  .nav__right { gap: 12px; }

  .hero { padding: 120px 20px 32px; }
  .hero__img { object-position: 28% 50%; }
  .hero__bg::after { background: linear-gradient(0deg, rgba(12, 11, 10, 0.94) 0%, transparent 55%), linear-gradient(90deg, rgba(12, 11, 10, 0.8) 0%, rgba(12, 11, 10, 0.4) 100%); }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__lead { max-width: 38ch; font-size: 0.9375rem; }
  .hero__date { justify-self: start; align-self: auto; width: 100%; max-width: none; margin-top: 36px; padding-bottom: 0; }
  /* Mobiilissa paivamaara siirretaan JS:lla kellorivin sisaan, ikonin jalkeen
     ja ajan eteen. Samalla se saa saman koon kuin muut rivit, ja aaltoviiva
     jaa pois: pienessa koossa se vain sotki rivin. */
  /* Valikon linkit ovat mobiilissa selvasti pienemmat kuin desktopilla:
     2.5rem tayttaa pienen ruudun ja tyontaa yhteystiedot taitteen alle. */
  .menu__link { font-size: 2.125rem; padding: 12px 0; min-height: 52px; }
  .hero__facts { height: auto; gap: 18px; justify-content: flex-start; }
  .hero__facts li { font-size: 1.5rem; }
  .hero__facts li:first-child { font-size: 2.25rem; margin-bottom: 20px; }
  .hero__facts-day:empty { display: none; }
  .hero__kello { display: flex; flex-wrap: wrap; gap: 0 14px; }
  .hero__kello .scribble { display: none; }
  /* Mobiilissa rivit noudattavat yhta saantoa: messinki on rivin karki,
     valkoinen tarkenne. Desktopilla savyporrastus jaa ennalleen. */
  .hero__kello .hero__day { color: var(--messinki); font-size: inherit; }
  .stay { grid-template-columns: 1fr; }
  .cta-band__inner { grid-template-columns: 1fr; gap: 32px; }
  .speaker { display: block; min-height: 0; padding: var(--spk-pad) 0; }
  .speaker__img { position: static; transform: none; width: 100%; max-width: 240px; height: auto; aspect-ratio: 4 / 5; }
  .speaker > div:not([class]) { margin-top: 24px; }
  .frame::before, .frame::after { width: 32px; height: 32px; }
  .frame::before { top: -10px; left: -10px; } .frame::after { bottom: -10px; right: -10px; }
  .hero__facts li { font-size: 1.375rem; }

  .btn { --btn-fs: 17px; --btn-pad-y: 22px; --btn-pad-x: 30px; --btn-ico: 18px; }
  .btn--sm { --btn-fs: 14px; --btn-pad-y: 14px; --btn-pad-x: 22px; --btn-ico: 15px; }
  .btn-row { flex-direction: column; gap: 8px; }
  .btn-row .btn { display: flex; width: 100%; }
  .btn-row--inline { flex-direction: row; }
  .btn-row--inline .btn { width: auto; }

  .sec__head { grid-template-columns: 1fr; }
  /* Pystysuunnassa pinoutuvat sarakkeet: 24px jai ahtaaksi kuvan ja sen
     otsikon valiin. */
  .grid-12 { grid-template-columns: 1fr; row-gap: 44px; }
  .grid-12 > * { grid-column: 1 / -1 !important; }

  .facts { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 0; }
  .fact { border-right: 0; border-bottom: 1px solid var(--line-c); padding: 14px 0; }
  .fact:nth-child(odd) { padding-right: 16px; }
  .fact__v { font-size: 1.25rem; white-space: normal; }

  .prog__row { grid-template-columns: 64px 16px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 16px; padding: 20px 0; margin-inline: -20px; padding-inline: 20px; }
  .prog__time { font-size: 1.125rem; }
  .prog__what { grid-column: 3; margin-top: 6px; font-size: var(--fs-small); }
  /* Kuvaus menee omalle grid-riville, joten pistesarake jai vain
     ensimmaiselle riville ja yhdysviiva katkesi kaksirivisissa kohdissa.
     Rivit maaritellaan eksplisiittisesti, jotta grid-row: 1 / -1 toimii:
     implisiittisilla riveilla -1 viittaa eksplisiittisen gridin loppuun.
     Merkki ankkuroidaan otsikon korkeudelle, ei rivin puolivaliin. */
  .prog__dot { grid-column: 2; grid-row: 1 / -1; }
  .prog__dot::before { top: -20px; bottom: -20px; }
  .prog__dot::after { top: 11px; }

  .tiers { grid-template-columns: 1fr; gap: 16px; }
  .tier { padding: 24px 22px; --notch: 28px; }
  .tier__price { font-size: 2.5rem; }

  .cta-band { grid-template-columns: 1fr; }
  .cta-band__media { min-height: clamp(260px, 62vw, 380px); }
  .cta-band__media::after {
    background:
      linear-gradient(0deg, var(--piki) 0%, rgba(12, 11, 10, 0.4) 46%, rgba(12, 11, 10, 0.15) 100%);
  }
  .cta-band__body { padding: clamp(28px, 6vw, 44px) var(--gutter) clamp(48px, 9vw, 72px); max-width: none; }

  .speaker { padding: 32px 0; }
  .speaker__img { max-width: 200px; }
  .speaker__bio { margin-top: 16px; }
  .speaker__site { margin-top: 16px; }
  .speaker:hover .speaker__img img { filter: grayscale(1) sepia(0.22) contrast(1.06) brightness(0.97); transform: none; }

  .stay__row { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .spec { grid-template-columns: 1fr; gap: 4px; }
  .form__row { grid-template-columns: 1fr; }
  .field input, .field select { height: 52px; }
  .footer__credit { margin-left: 0; }
}
@media (max-width: 479px) {
  .fact__v { font-size: 1.125rem; }
  .menu__link { font-size: 1.875rem; }

}

/* 17 REDUCED MOTION ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__img--before { display: none; }
  .hero__edge { display: none; }
  .btn:hover .btn__cell { transform: none; }
}

/* 18 PRINT -------------------------------------------------------------- */
@media print {
  .nav, .menu, .hero__bg, .hero__edge, .cta-band__media { display: none !important; }
  body { background: #fff; color: #000; }
  .sec, .hero { background: #fff !important; color: #000 !important; min-height: 0; padding-block: 12pt; }
  .tier, .speaker, .prog__row { break-inside: avoid; }
}

/* Mobiilivalikon sisalto on 688px korkea riippumatta naytosta, joten se ei
   mahtunut iPhone SE:lle (667) eika sita pienemmille. Tiivistetaan kahdessa
   portaassa naytonkorkeuden mukaan, jotta kaikki linkit ja yhteystiedot
   nakyvat ilman vierittamista. */
@media (max-width: 767px) and (max-height: 720px) {
  .menu { padding-top: calc(64px + 14px); padding-bottom: 20px; }
  .menu__link { font-size: 1.75rem; padding: 10px 0; min-height: 48px; }
  .menu__foot { padding-top: 20px; gap: 12px; }
}
@media (max-width: 767px) and (max-height: 600px) {
  .menu { padding-top: calc(64px + 10px); padding-bottom: 16px; }
  .menu__link { font-size: 1.5rem; padding: 7px 0; min-height: 44px; }
  .menu__foot { padding-top: 14px; gap: 9px; }
}