/* GENEROITU — älä muokkaa. Lähde: docs/tenants/glaston-select/landing-2026-10/prototype/style.css. Aja: node scripts/gs/port-css.mjs (ADR 0010). */
/* Glaston Select — landing-prototyyppi (Figma v2 224:2, desktop 1440).
   Mitoitus: --s = yksi Figman pikseli. 1024–1728 px leveydellä koko sommitelma skaalautuu suhteessa
   (1440 = Figma 1:1), sen yli sisältö keskittyy ja reunakuvat pysyvät reunoissa. Alle 1024 px ja pystysuuntaisessa
   ikkunassa (iPad pystyssä) oma pinottu asettelu. Raja on sama moottorissa (main.js DESKTOP_MQ) — muuta molempia.
   Kaikki 56°-muodot ovat clip-pathia: vaakasiirto = korkeus × cot 56° (0,6745). */

html.theme-glaston-select {
  --navy: #0b2639;
  --ice: #aacfdf;
  --frost: #eef4f7;
  --mist: #e3ecf2;
  --stage: #d8e6ee;
  --grey: #6d7d88; /* navy 60 % (vanha Glaston-harmaa #6d7e8f poistettu 12.10.) */
  --white: #fff;
  --rule: rgba(11, 38, 57, 0.14);
  --rule-inv: rgba(255, 255, 255, 0.16);
  --cot56: 0.6745;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); /* GSAP expo.out */
  --font: 'Work Sans', system-ui, sans-serif;
  --s: 1px;
  --gx: 20px;
  --header-h: 64px;
}

@media (min-width: 1024px) and (min-aspect-ratio: 19/20) {
  html.theme-glaston-select {
    /* sekä leveys että korkeus rajaavat: hero (980) mahtuu näkymään, yläraja 1,2 (Mika 7.10.: 16" läppärillä
       1,4× oli liian suuri) */
    --s: clamp(0.7112px, min(calc(100vw / 1440), calc(100vh / 940)), 1.2px);
    --gx: max(calc(var(--s) * 96), calc((100vw - var(--s) * 1248) / 2));
    --header-h: calc(var(--s) * 104);
  }
}

html.theme-glaston-select *, html.theme-glaston-select *::before, html.theme-glaston-select *::after { box-sizing: border-box; }
html.theme-glaston-select { -webkit-text-size-adjust: 100%; }
html.theme-glaston-select.lenis, html.theme-glaston-select.lenis body { height: auto; }
html.theme-glaston-select.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* Lenisin oma sääntö (lenis.css): iframe ei saa rullaa sileän vierityksen aikana. Muuten videon liukuessa kursorin alle
   rulla menee YouTube-kehykselle, selain vierittää natiivisti ja Lenis vetää takaisin → nykiminen (Mika 19.10.). */
html.theme-glaston-select.lenis.lenis-smooth iframe { pointer-events: none; }
html.theme-glaston-select body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.theme-glaston-select img { display: block; max-width: none; }
html.theme-glaston-select a { color: inherit; text-decoration: none; }
html.theme-glaston-select h1, html.theme-glaston-select h2, html.theme-glaston-select h3, html.theme-glaston-select p, html.theme-glaston-select ol { margin: 0; padding: 0; font-weight: 500; }
html.theme-glaston-select p, html.theme-glaston-select ol { font-weight: 400; }
html.theme-glaston-select ol { list-style: none; }
html.theme-glaston-select button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
html.theme-glaston-select :focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
html.theme-glaston-select .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Glastonin vahvistusta odottava teksti tai kohde (Mika 8.10.: ei omaa sisältöä, odottava jää punaisena) */

html.theme-glaston-select .gs-wrap { position: relative; padding-inline: var(--gx); }

/* ── Typografia ─────────────────────────────────────────────── */
html.theme-glaston-select .gs-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.173; }
html.theme-glaston-select .gs-eyebrow--muted { color: var(--grey); }
html.theme-glaston-select .gs-eyebrow--ice { color: var(--ice); }
html.theme-glaston-select .gs-h1 { font-size: clamp(38px, 10.6vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.035em; }
html.theme-glaston-select .gs-h2 { font-size: clamp(32px, 8.4vw, 48px); font-weight: 500; line-height: 1.04; letter-spacing: -0.025em; }
html.theme-glaston-select .gs-h1 .ln, html.theme-glaston-select .gs-h2 .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
html.theme-glaston-select .gs-h1 .ln > span, html.theme-glaston-select .gs-h2 .ln > span { display: inline-block; }
html.theme-glaston-select .gs-h1 .ln--sub { color: var(--grey); } /* toinen lause vastauksena, ei toisena pääasiana */
@media (min-width: 1024px) and (min-aspect-ratio: 19/20) { html.theme-glaston-select .gs-h1 .ln > span, html.theme-glaston-select .gs-h2 .ln > span { white-space: nowrap; } }
html.theme-glaston-select .gs-lead { font-size: 17px; line-height: 1.5; text-wrap: pretty; }
html.theme-glaston-select p, html.theme-glaston-select .gs-body { text-wrap: pretty; } /* Mika 9.10.: rivitykset tasaisemmiksi */
html.theme-glaston-select .gs-lead--muted { color: var(--grey); }
html.theme-glaston-select .gs-lead--ice { color: var(--ice); }
html.theme-glaston-select .gs-body { font-size: 16px; line-height: 1.55; }
html.theme-glaston-select .gs-num { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--grey); font-variant-numeric: tabular-nums; }

/* ── Painikkeet ja linkit (56°-viiste oikeassa yläkulmassa) ─── */
html.theme-glaston-select .gs-btn {
  --bw: 22px; --bh: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 38px 0 24px;
  background: var(--navy); color: var(--white);
  font-size: 16px; font-weight: 500; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - var(--bw)) 0, 100% var(--bh), 100% 100%, 0 100%);
  transition: background-color 0.35s var(--ease-out);
}
html.theme-glaston-select .gs-btn > span { display: inline-block; transition: transform 0.45s var(--ease-out); }
html.theme-glaston-select .gs-btn:hover { background: #12364f; }
html.theme-glaston-select .gs-btn:hover > span { transform: translateX(3px); }
html.theme-glaston-select .gs-link {
  position: relative; display: inline-flex; gap: 0.5em; align-items: baseline;
  font-size: 16px; font-weight: 500; white-space: nowrap; padding-bottom: 8px;
}
html.theme-glaston-select .gs-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor;
  transform-origin: left; transition: transform 0.6s var(--ease-out);
}
html.theme-glaston-select .gs-link i { font-style: normal; display: inline-block; transition: transform 0.45s var(--ease-out); }
html.theme-glaston-select .gs-link:hover i { transform: translateX(4px); }
html.theme-glaston-select .gs-link:hover::after { transform: scaleX(0.92); }
html.theme-glaston-select .gs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }

/* ── Header ─────────────────────────────────────────────────── */
html.theme-glaston-select .gs-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  transition: transform 0.7s var(--ease-out), background-color 0.5s var(--ease-out);
}
html.theme-glaston-select .gs-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(244, 248, 250, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  transition: opacity 0.5s var(--ease-out);
}
html.theme-glaston-select .gs-header.is-solid::before { opacity: 1; }
html.theme-glaston-select .gs-header.is-hidden { transform: translateY(-100%); }
html.theme-glaston-select .gs-header-in { display: flex; align-items: center; height: 100%; padding-inline: var(--gx); }
html.theme-glaston-select .gs-header-rule { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: rgba(255, 255, 255, 0.9); transform-origin: left; }
html.theme-glaston-select .gs-header.is-solid .gs-header-rule { background: var(--rule); }
html.theme-glaston-select .gs-lockup { display: inline-flex; align-items: center; gap: 12px; }
html.theme-glaston-select .gs-lockup .gs-logo { width: 80px; height: auto; }
html.theme-glaston-select .gs-lockup-div { width: 1px; height: 24px; background: rgba(11, 38, 57, 0.3); }
html.theme-glaston-select .gs-lockup-name { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; line-height: 1; }
html.theme-glaston-select .gs-lockup--white { color: var(--white); }
html.theme-glaston-select .gs-lockup--white .gs-lockup-div { background: rgba(255, 255, 255, 0.35); }
html.theme-glaston-select .gs-nav { display: none; }
html.theme-glaston-select .gs-header .gs-btn--sm { display: none; }
html.theme-glaston-select .gs-menu-btn { margin-left: auto; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; }
html.theme-glaston-select .gs-menu-btn i { display: block; width: 22px; height: 1.5px; background: var(--navy); transition: transform 0.4s var(--ease-out); }
html.theme-glaston-select .gs-menu-btn[aria-expanded='true'] i:first-of-type { transform: translateY(3.75px) rotate(28deg); }
html.theme-glaston-select .gs-menu-btn[aria-expanded='true'] i:last-of-type { transform: translateY(-3.75px) rotate(-28deg); }
html.theme-glaston-select .gs-menu {
  position: fixed; inset: 0; z-index: 40; background: var(--frost);
  padding: calc(var(--header-h) + 32px) 20px 32px; display: flex;
}
html.theme-glaston-select .gs-menu[hidden] { display: none; }
html.theme-glaston-select .gs-menu nav { display: flex; flex-direction: column; gap: 18px; font-size: 30px; font-weight: 500; letter-spacing: -0.02em; width: 100%; }
html.theme-glaston-select .gs-menu .gs-btn { margin-top: 16px; align-self: flex-start; font-size: 16px; letter-spacing: 0; }

/* ── 56°-viistelinjat ───────────────────────────────────────── */
/* viivan paksuus käyttäjäyksiköissä: 2 px ruudulla, kun SVG skaalautuu --s:n mukana (--su asetetaan JS:ssä) */
html.theme-glaston-select .gs-bevel { position: absolute; top: 0; overflow: visible; pointer-events: none; fill: none; stroke-width: calc(2 / var(--su, 1)); }

/* ── 01 Hero ────────────────────────────────────────────────── */
/* Kapea: hero on vähintään näkymän korkuinen (kiinnitys ei saa jättää kaistaa alle) ja kone on virrassa otsikon
   alla: tyhjä tila (::after) painaa sen alareunaan, ahtaalla näytöllä hero kasvaa eikä kone mene tekstin päälle */
html.theme-glaston-select .gs-hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100svh;
  background: linear-gradient(180deg, #deeaf1 0%, #f1f6f9 55%, #fcfefe 78%, #fff 100%);
}
html.theme-glaston-select .gs-hero::after { content: ''; order: 2; flex: 1 0 0; }
html.theme-glaston-select .gs-hero-back { position: absolute; inset: 0; }
html.theme-glaston-select .gs-hero-band { position: absolute; left: 0; right: 0; top: var(--header-h); height: 46%; overflow: hidden; }
html.theme-glaston-select .gs-hero-band img { position: absolute; left: 66%; top: -30%; width: 80%; height: auto; }
html.theme-glaston-select .gs-hero-pane {
  position: absolute; left: 0; top: var(--header-h); bottom: 0; width: 120%;
  background: rgba(255, 255, 255, 0.18);
  clip-path: polygon(0 0, 58% 0, 100% 100%, 0 100%);
}
html.theme-glaston-select .gs-hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s linear; }
html.theme-glaston-select .gs-hero.gl-on .gs-hero-gl { opacity: 1; }
html.theme-glaston-select .gs-hero-back { transition: opacity 0.8s linear; }
html.theme-glaston-select .gs-hero.gl-on .gs-hero-back,
html.theme-glaston-select .gs-hero.mach-gl [data-machine] { visibility: hidden; }
html.theme-glaston-select .gs-hero-load, html.theme-glaston-select .gs-hero-ig { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + 40px); pointer-events: none; display: none; }
html.theme-glaston-select .gs-hero.gl-on .gs-hero-load,
html.theme-glaston-select .gs-hero.swap-on .gs-hero-ig { display: block; }
/* rivit piilossa ensimmäisestä maalauksesta: lasi voi valmistua ennen fontteja, ja moottori piilottaa rivit vasta
   niiden jälkeen → "Load it. Done." näkyi puhelimessa heron tekstien päällä ~1,7 s (Mika 16.10.: tuplalataus) */
html.theme-glaston-select .gs-hero-load .ln > span, html.theme-glaston-select .gs-hero-ig .ln > span { transform: translateY(105%); }
html.theme-glaston-select .gs-swap-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; visibility: hidden; pointer-events: none; }
html.theme-glaston-select .gs-swap-static { display: none; }
@media (prefers-reduced-motion: reduce) {
  html.theme-glaston-select .gs-swap-static { display: block; padding-top: 64px; background: linear-gradient(180deg, var(--white) 0%, var(--frost) 100%); }
  html.theme-glaston-select .gs-swap-static img { width: 100%; height: auto; }
}
/* heron jälkeinen osio nousee kiinnitetyn heron päälle (main.js pinStory); varjo kertoo kerroksen */
html.theme-glaston-select .gs-over { position: relative; z-index: 2; box-shadow: 0 -28px 56px -24px rgba(11, 38, 57, 0.16); }
/* viiva koneen päällä myös DOM-vaiheessa: WebGL-kone on canvasissa viivan alla, luovutus ei saa näkyä */
html.theme-glaston-select .gs-hero-bevel { display: none; z-index: 1; stroke: var(--white); }
/* kuvan yläosa on läpinäkyvä (kone alkaa 31 %:sta), joten kone nousee 22 % leveydestä tyhjän tilan päälle */
html.theme-glaston-select .gs-hero-machine { order: 3; position: relative; flex: none; width: 160%; margin: -24% 0 0 -12%; aspect-ratio: 1480 / 832; }
@media (min-width: 600px) { html.theme-glaston-select .gs-hero-machine { width: 125%; margin: -18.5% 0 0 -8%; } } /* tabletti pystyssä: kone ei kasva näkymää pidemmäksi */
html.theme-glaston-select .gs-hero-machine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
html.theme-glaston-select .gs-hero-copy { order: 1; position: relative; padding-top: calc(var(--header-h) + 28px); }
html.theme-glaston-select .gs-hero-copy .gs-eyebrow { max-width: 62%; }
html.theme-glaston-select .gs-hero-copy .gs-h1 { margin-top: 12px; }
html.theme-glaston-select .gs-hero-lead { margin-top: 18px; max-width: 30em; }
html.theme-glaston-select .gs-hero-copy .gs-actions { margin-top: 26px; }

/* ── 02 Why ─────────────────────────────────────────────────── */
html.theme-glaston-select .gs-why { position: relative; background: var(--white); overflow: hidden; }
/* Kuvissa on oma 56°-viiste (läpinäkyvä alue): kapeassa asettelussa ei omaa clip-pathia, vaan kuva rajataan viisteen
   kulmasta tasaisella skaalauksella, jolloin kulma pysyy 56°:ssa (Mika 16.10.: prosenttirajaus vääristi muodon) */
html.theme-glaston-select .gs-why-media { position: relative; height: clamp(380px, 52vw, 520px); margin-left: 20%; }
html.theme-glaston-select .gs-why-media img { width: 100%; height: 100%; object-fit: cover; object-position: right bottom; }
html.theme-glaston-select .gs-why-bevel { display: none; stroke: var(--ice); }
html.theme-glaston-select .gs-why-in { padding-top: 48px; padding-bottom: 72px; }
html.theme-glaston-select .gs-why-in .gs-h2 { margin-top: 12px; }
html.theme-glaston-select .gs-rows { margin-top: 40px; }
html.theme-glaston-select .gs-row { display: grid; grid-template-columns: 40px 1fr; padding: 20px 0 28px; position: relative; }
/* rivien viivat pseudoina, jotta ne voivat piirtyä vasemmalta (--line / --last 0 → 1) */
html.theme-glaston-select .gs-row::before, html.theme-glaston-select .gs-srows li::before, html.theme-glaston-select .gs-row:last-child::after, html.theme-glaston-select .gs-srows li:last-child::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule);
  transform: scaleX(var(--line, 1)); transform-origin: left;
}
html.theme-glaston-select .gs-row:last-child::after, html.theme-glaston-select .gs-srows li:last-child::after { top: auto; bottom: 0; transform: scaleX(var(--last, 1)); }
html.theme-glaston-select .gs-srows li::before, html.theme-glaston-select .gs-srows li:last-child::after { background: var(--rule-inv); }
html.theme-glaston-select .gs-row .gs-num { padding-top: 8px; font-size: 12px; }
html.theme-glaston-select .gs-row-title { font-size: 24px; line-height: 1.12; letter-spacing: -0.012em; }
html.theme-glaston-select .gs-row-text { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--grey); }
html.theme-glaston-select .gs-why-lead { margin-top: 18px; }

/* ── 03 Products ────────────────────────────────────────────── */
html.theme-glaston-select .gs-range { position: relative; background: var(--mist); padding: 72px 0 80px; overflow-x: clip; } /* konekuvat ulottuvat reunaan (118 %), eivät levennä sivua */
html.theme-glaston-select .gs-range-head .gs-h2 { margin-top: 12px; }
html.theme-glaston-select .gs-range-intro { margin-top: 20px; }
html.theme-glaston-select .gs-stage { position: relative; margin-top: 40px; padding: 28px 24px 32px; display: flex; flex-direction: column; }
html.theme-glaston-select .gs-stage-bg { position: absolute; inset: 0; }
html.theme-glaston-select .gs-stage-bg::before { content: ''; position: absolute; inset: 0; background: var(--stage); clip-path: polygon(0 0, 100% 0, 100% 100%, 56px 100%, 0 calc(100% - 83px)); }
html.theme-glaston-select .gs-stage--b .gs-stage-bg::before { background: var(--white); clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 83px, 100% 100%, 0 100%); }
html.theme-glaston-select .gs-stage > :not(.gs-stage-bg) { position: relative; }
html.theme-glaston-select .gs-product { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin-top: 8px; } /* copy v1: otsikko on lause, ei tuotenimi */
html.theme-glaston-select .gs-tagline { font-size: 20px; font-weight: 500; color: var(--grey); margin-top: 2px; }
html.theme-glaston-select .gs-stage-machine { order: 5; width: 118%; height: auto; margin: 12px -9% 0; }
html.theme-glaston-select .gs-stage-shadow { display: none; }
html.theme-glaston-select .gs-stage-info { margin-top: 20px; }
html.theme-glaston-select .gs-points { margin-top: 22px; display: grid; gap: 18px; font-size: 16px; }
html.theme-glaston-select .gs-points li { display: grid; grid-template-columns: 32px 1fr; align-items: baseline; }
html.theme-glaston-select .gs-points .gs-num { font-size: 11px; }
/* hyötykohta = lihavoitu otsikko + teksti (copy v1) */
html.theme-glaston-select .gs-point-title { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; }
html.theme-glaston-select .gs-point-text { margin-top: 6px; font-size: 15px; line-height: 1.5; }
html.theme-glaston-select .gs-stage .gs-actions { gap: 14px 28px; }
/* esite kortin omana alarivinä viivan alla: ei kilpaile ensisijaisen napin kanssa eikä törmää konekuvaan
   (Mika 16.10.: napin alla "super ahtaasti" molemmissa laitteissa) */
html.theme-glaston-select .gs-stage-dl { order: 6; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rule); }
/* ylempi kortti: esite oikeaan reunaan, pois vasemman alakulman viisteen luota (Mika 16.10.: "menee melkein leikkaukseen") */
html.theme-glaston-select .gs-stage--a .gs-stage-dl { display: flex; justify-content: flex-end; }
html.theme-glaston-select .gs-download { display: inline-flex; align-items: center; gap: 16px; font-size: 16px; font-weight: 500; }
html.theme-glaston-select .gs-download i {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border: 1.5px solid currentColor; font-style: normal; transition: transform 0.45s var(--ease-out);
}
html.theme-glaston-select .gs-download:hover i { transform: translateY(3px); }
html.theme-glaston-select .gs-download--read:hover i { transform: translateX(3px); }
html.theme-glaston-select .gs-stage-info .gs-actions { margin-top: 20px; }

/* ── Esitteen lukija (leaflet.js; Mika 19.10.: esite "lehtiömuodossa") ── */
html.theme-glaston-select.gs-leaflet-open { overflow: hidden; }
html.theme-glaston-select .gs-leaflet {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; overscroll-behavior: contain;
  background: var(--navy); color: var(--white); font-family: var(--font);
}
html.theme-glaston-select .gs-leaflet[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
html.theme-glaston-select .gs-leaflet::backdrop { background: var(--navy); }
html.theme-glaston-select .gs-leaflet-bar { display: flex; align-items: center; gap: 18px; height: 64px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--rule-inv); }
html.theme-glaston-select .gs-leaflet-bar .gs-lockup { gap: 10px; margin: 0; }
html.theme-glaston-select .gs-leaflet-bar .gs-lockup .gs-logo { width: 72px; }
html.theme-glaston-select .gs-leaflet-bar .gs-lockup-div { height: 20px; }
html.theme-glaston-select .gs-leaflet-bar .gs-lockup-name { font-size: 17px; margin: 0; }
html.theme-glaston-select .gs-leaflet-label { font-size: 14px; color: var(--ice); }
html.theme-glaston-select .gs-leaflet-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
html.theme-glaston-select .gs-leaflet-btn, html.theme-glaston-select .gs-leaflet-pdf {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.28); color: var(--white);
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), opacity 0.3s;
}
html.theme-glaston-select .gs-leaflet-btn:hover, html.theme-glaston-select .gs-leaflet-pdf:hover { border-color: var(--white); }
html.theme-glaston-select .gs-leaflet-btn:disabled { opacity: 0.28; cursor: default; border-color: rgba(255, 255, 255, 0.28); }
html.theme-glaston-select .gs-leaflet-btn[aria-pressed='true'] { background: var(--white); color: var(--navy); border-color: var(--white); }
html.theme-glaston-select .gs-leaflet-btn[aria-pressed='true'] .gs-leaflet-plus { display: none; } /* zoomattuna painike loitontaa: + → − */
html.theme-glaston-select .gs-leaflet-btn i { font-style: normal; font-size: 18px; line-height: 1; }
html.theme-glaston-select .gs-leaflet-pdf { display: inline-flex; gap: 10px; width: auto; padding: 0 14px; font-size: 15px; font-weight: 500; }
html.theme-glaston-select .gs-leaflet-pdf i { font-style: normal; transition: transform 0.45s var(--ease-out); }
html.theme-glaston-select .gs-leaflet-pdf:hover i { transform: translateY(2px); }
html.theme-glaston-select .gs-leaflet-stage { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
html.theme-glaston-select .gs-leaflet.is-peek .gs-leaflet-stage { cursor: pointer; }
html.theme-glaston-select .gs-leaflet.is-zoomed .gs-leaflet-stage { cursor: zoom-out; }
html.theme-glaston-select .gs-leaflet-zoomer { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: 0 0; }
html.theme-glaston-select .gs-leaflet-book { position: relative; }
html.theme-glaston-select .gs-leaflet-page {
  position: absolute; top: 0; margin: 0; background: var(--frost);
  transform-origin: 0 50%; backface-visibility: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
html.theme-glaston-select .gs-leaflet-page.is-left { transform-origin: 100% 50%; }
html.theme-glaston-select .gs-leaflet-page img { width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
/* kääntyvän sivun valo (--shade 0–1 moottorista): tummin selän puolella */
html.theme-glaston-select .gs-leaflet-page::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--shade, 0);
  background: linear-gradient(90deg, rgba(4, 17, 27, 0.85), rgba(4, 17, 27, 0.35));
}
html.theme-glaston-select .gs-leaflet-page.is-left::after { background: linear-gradient(270deg, rgba(4, 17, 27, 0.85), rgba(4, 17, 27, 0.35)); }
/* aukeaman selkä: kevyt taite molemmin puolin */
html.theme-glaston-select .gs-leaflet.is-spread .gs-leaflet-page::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 38, 57, 0.2), rgba(11, 38, 57, 0) 7%);
}
html.theme-glaston-select .gs-leaflet.is-spread .gs-leaflet-page.is-left::before { background: linear-gradient(270deg, rgba(11, 38, 57, 0.14), rgba(11, 38, 57, 0) 6%); }
html.theme-glaston-select .gs-leaflet-foot { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 10px 16px 16px; }
html.theme-glaston-select .gs-leaflet-status { min-width: 10em; text-align: center; }
html.theme-glaston-select .gs-leaflet-count { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
html.theme-glaston-select .gs-leaflet-hint { margin-top: 3px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
/* aukeama: nuolet kirjan sivuille ja sivunumero yläpalkkiin, jotta sivu saa koko korkeuden */
html.theme-glaston-select .gs-leaflet.is-spread .gs-leaflet-foot { display: contents; }
html.theme-glaston-select .gs-leaflet.is-spread .gs-leaflet-status { position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 3; height: 64px; display: grid; place-content: center; }
html.theme-glaston-select .gs-leaflet.is-spread .gs-leaflet-nav { position: absolute; top: calc(50% + 32px); translate: 0 -50%; z-index: 3; width: 56px; height: 56px; background: var(--navy); }
html.theme-glaston-select .gs-leaflet.is-spread .gs-leaflet-nav--prev { left: max(24px, 2vw); }
html.theme-glaston-select .gs-leaflet.is-spread .gs-leaflet-nav--next { right: max(24px, 2vw); }
html.theme-glaston-select .gs-leaflet.is-spread.is-zoomed .gs-leaflet-nav { opacity: 0; pointer-events: none; }
/* kapea puhelin: yläpalkki mahtuu 320 px:iin (lukitus pienempänä, välit tiiviimmät) */
@media (max-width: 479px) {
  html.theme-glaston-select .gs-leaflet-label { display: none; }
  html.theme-glaston-select .gs-leaflet-bar { gap: 12px; padding: 0 8px 0 16px; }
  html.theme-glaston-select .gs-leaflet-bar .gs-lockup { gap: 8px; }
  html.theme-glaston-select .gs-leaflet-bar .gs-lockup .gs-logo { width: 64px; }
  html.theme-glaston-select .gs-leaflet-bar .gs-lockup-name { font-size: 16px; }
  html.theme-glaston-select .gs-leaflet-tools { gap: 6px; }
  html.theme-glaston-select .gs-leaflet-pdf { padding: 0 12px; }
}
/* matala näkymä (vaakapuhelin): palkit matalammiksi, sivu saa korkeuden */
@media (max-height: 499px) {
  html.theme-glaston-select .gs-leaflet-bar, html.theme-glaston-select .gs-leaflet.is-spread .gs-leaflet-status { height: 48px; }
  html.theme-glaston-select .gs-leaflet.is-spread .gs-leaflet-nav { top: calc(50% + 24px); width: 48px; height: 48px; }
  html.theme-glaston-select .gs-leaflet-btn { width: 40px; height: 40px; }
  html.theme-glaston-select .gs-leaflet-pdf { height: 40px; }
  html.theme-glaston-select .gs-leaflet-hint { display: none; }
}

/* ── 04 Service ─────────────────────────────────────────────── */
html.theme-glaston-select .gs-service { position: relative; background: var(--white); overflow: hidden; }
html.theme-glaston-select .gs-service-navy { display: none; position: absolute; inset: 0; }
html.theme-glaston-select .gs-service-navy::before { content: ''; position: absolute; inset: 0; background: var(--navy); clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); }
html.theme-glaston-select .gs-service-bevel { display: none; stroke: var(--ice); }
html.theme-glaston-select .gs-service-in { display: grid; padding-top: 72px; padding-bottom: 0; }
html.theme-glaston-select .gs-service-copy .gs-h2 { margin-top: 12px; }
html.theme-glaston-select .gs-service-copy .gs-lead { margin-top: 20px; }
html.theme-glaston-select .gs-service-copy .gs-link { margin-top: 24px; }
html.theme-glaston-select .gs-service-list {
  margin: 56px -20px 0; padding: 72px 20px 56px; color: var(--white); background: var(--navy);
  clip-path: polygon(0 0, calc(100% - 48px * 0.6745 - 48px) 0, 100% 71px, 100% 100%, 0 100%);
}
html.theme-glaston-select .gs-srows { margin-top: 24px; }
html.theme-glaston-select .gs-srows li { position: relative; display: grid; grid-template-columns: 40px 1fr; padding: 18px 0 20px; }
html.theme-glaston-select .gs-srows p { line-height: 1.4; }
html.theme-glaston-select .gs-srows .gs-num { color: var(--ice); padding-top: 6px; }
html.theme-glaston-select .gs-srows h3 { font-size: 22px; letter-spacing: -0.01em; line-height: 1.173; }
html.theme-glaston-select .gs-srows p { margin-top: 6px; font-size: 16px; color: var(--ice); }

/* ── 05 Promise ─────────────────────────────────────────────── */
html.theme-glaston-select .gs-promise { position: relative; background: var(--frost); overflow: hidden; }
html.theme-glaston-select .gs-promise-media { position: relative; width: min(90%, 600px); aspect-ratio: 1713 / 1640; } /* viiste ulottuu kuvan oikeaan reunaan → kokonaisena */
html.theme-glaston-select .gs-promise-media img { width: 100%; height: 100%; object-fit: fill; }
html.theme-glaston-select .gs-promise-bevel { display: none; stroke: var(--ice); }
html.theme-glaston-select .gs-promise-copy { padding: 40px 20px 72px; }
html.theme-glaston-select .gs-promise-text { margin-top: 14px; font-size: 26px; font-weight: 500; line-height: 1.22; letter-spacing: -0.015em; }
html.theme-glaston-select .gs-promise-text .w { display: inline-block; }
html.theme-glaston-select .gs-promise-text { text-wrap: balance; }

/* ── 06 Film ────────────────────────────────────────────────── */
html.theme-glaston-select .gs-film { position: relative; background: var(--navy); color: var(--white); overflow: hidden; padding: 72px 0 80px; }
html.theme-glaston-select .gs-film .gs-h2 { margin-top: 12px; }
html.theme-glaston-select .gs-film-lead { margin-top: 18px; }
html.theme-glaston-select .gs-film-bevel { left: 70%; width: 120%; height: auto; aspect-ratio: 797.6 / 1181.1; stroke: rgba(170, 207, 223, 0.7); }
html.theme-glaston-select .gs-film-poster {
  position: relative; margin-top: 32px; aspect-ratio: 16 / 9; overflow: hidden; background: #1a3a52;
}
/* Pysäytyskuva = videon oma ruutu samassa rajauksessa, jotta toiston alku jatkaa siitä ilman hyppyä (ei parallaksia). */
html.theme-glaston-select .gs-film-img { position: absolute; inset: 0; background: var(--gs-film-poster) center / cover no-repeat; }
/* Koko kuva on toistonappi; näkyvä neliö vasemmassa alakulmassa (keskellä se peitti logon) samalla 56°-kulmalla
   kuin sivun painikkeet. */
html.theme-glaston-select .gs-film-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: end start; padding: 16px; color: var(--white); }
html.theme-glaston-select .gs-film-play > span {
  --bw: 16px; --bh: 24px;
  display: grid; place-items: center; width: 56px; height: 56px; background: var(--navy);
  clip-path: polygon(0 0, calc(100% - var(--bw)) 0, 100% var(--bh), 100% 100%, 0 100%);
  transition: background-color 0.35s var(--ease-out);
}
html.theme-glaston-select .gs-film-play svg { width: 34%; height: auto; fill: currentColor; transition: transform 0.45s var(--ease-out); }
html.theme-glaston-select .gs-film-play:hover > span { background: #12364f; }
html.theme-glaston-select .gs-film-play:hover svg { transform: translateX(3px); }
html.theme-glaston-select .gs-film-play:focus-visible { outline: none; }
html.theme-glaston-select .gs-film-play:focus-visible > span { box-shadow: inset 0 0 0 3px var(--ice); }
/* teaser-iframe: juliste + toistonappi (tai paikkateksti) vain kunnes lähde on annettu */
html.theme-glaston-select .gs-film-frame { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; display: block; }
html.theme-glaston-select .gs-film-frame:not([src]) { display: none; }
html.theme-glaston-select .gs-film-frame[src] ~ * { display: none; }
html.theme-glaston-select .gs-film-tbd { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max-content; max-width: 80%; padding: 14px 20px; background: var(--white); font-size: 16px; font-weight: 500; text-align: center; }

/* ── 07 Glasstec ────────────────────────────────────────────── */
html.theme-glaston-select .gs-glasstec { position: relative; background: var(--ice); overflow: hidden; display: flex; flex-direction: column-reverse; }
html.theme-glaston-select .gs-glasstec-media { position: relative; width: min(78%, 520px); margin-left: auto; aspect-ratio: 1329 / 1560; } /* viiste ulottuu alareunaan → kokonaisena */
html.theme-glaston-select .gs-glasstec-media img { width: 100%; height: 100%; object-fit: fill; }
html.theme-glaston-select .gs-glasstec-bevel { display: none; stroke: var(--white); }
html.theme-glaston-select .gs-glasstec-in { padding-top: 72px; padding-bottom: 40px; }
html.theme-glaston-select .gs-glasstec-in .gs-h2 { margin-top: 12px; }
html.theme-glaston-select .gs-dates { margin-top: 32px; font-size: 21px; font-weight: 500; }
html.theme-glaston-select .gs-venue { margin-top: 8px; font-size: 18px; }
html.theme-glaston-select .gs-glasstec-text { margin-top: 22px; }
html.theme-glaston-select .gs-glasstec-in .gs-actions { margin-top: 28px; }

/* ── 08 Footer ──────────────────────────────────────────────── */
html.theme-glaston-select .gs-footer { position: relative; background: var(--navy); color: var(--white); overflow: hidden; }
html.theme-glaston-select .gs-footer-bevel { display: none; stroke: rgba(170, 207, 223, 0.6); }
html.theme-glaston-select .gs-footer-top { padding-top: 56px; padding-bottom: 40px; display: grid; gap: 40px; }
html.theme-glaston-select .gs-footer-tag { margin-top: 18px; color: var(--ice); font-size: 15px; text-wrap: balance; }
html.theme-glaston-select .gs-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; }
html.theme-glaston-select .gs-footer-cols p { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice); margin-bottom: 14px; }
html.theme-glaston-select .gs-footer-cols a { display: block; font-size: 16px; line-height: 2; width: fit-content; }
html.theme-glaston-select .gs-footer-cols a:hover, html.theme-glaston-select .gs-footer-bottom a:hover { color: var(--ice); }
html.theme-glaston-select .gs-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); }
html.theme-glaston-select .gs-footer-bottom .gs-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; padding-bottom: 28px; font-size: 13px; }
html.theme-glaston-select .gs-footer-bottom p { color: rgba(255, 255, 255, 0.6); }
html.theme-glaston-select .gs-footer-bottom a { color: rgba(255, 255, 255, 0.8); }

/* Kapea asettelu: väljyys ja heron otsikko (Mika 16.10.: "tekstielementtien suhteessa osioiden reunoihin saisi olla
   hieman lisää tilaa … tuo rauhaa luettavuuteen", heron otsikko ahdas). Työpöytä ei muutu (omat --s-arvot). Ennen
   matalan puhelimen ja vaakapuhelimen poikkeuksia, jotta ne voittavat. */
@media not all and (min-width: 1024px) and (min-aspect-ratio: 19/20) {
  html.theme-glaston-select { --gx: clamp(28px, 6vw, 56px); }
  html.theme-glaston-select .gs-menu { padding-inline: var(--gx); }
  html.theme-glaston-select .gs-hero-copy { padding-top: calc(var(--header-h) + 36px); }
  html.theme-glaston-select .gs-hero-copy .gs-h1 { margin-top: 14px; font-size: clamp(32px, 8.6vw, 56px); }
  html.theme-glaston-select .gs-hero-lead { margin-top: 22px; }
  html.theme-glaston-select .gs-hero-copy .gs-actions { margin-top: 32px; }
  /* nappi ja sen alle rivittyvä linkki selvästi erilleen (Mika 16.10.: "ihan kiinni toisissaan") */
  html.theme-glaston-select .gs-actions, html.theme-glaston-select .gs-stage .gs-actions { row-gap: 28px; }
  html.theme-glaston-select .gs-why-in .gs-h2, html.theme-glaston-select .gs-range-head .gs-h2, html.theme-glaston-select .gs-service-copy .gs-h2, html.theme-glaston-select .gs-film .gs-h2, html.theme-glaston-select .gs-glasstec-in .gs-h2 { margin-top: 14px; }
  html.theme-glaston-select .gs-why-in { padding-top: 56px; padding-bottom: 96px; }
  html.theme-glaston-select .gs-why-lead { margin-top: 24px; }
  html.theme-glaston-select .gs-rows { margin-top: 48px; }
  html.theme-glaston-select .gs-range { padding: 96px 0 104px; }
  html.theme-glaston-select .gs-range-intro { margin-top: 24px; }
  html.theme-glaston-select .gs-stage { margin-top: 48px; padding: 32px 24px 40px; }
  /* puhelimessa esiterivi on lähes kortin levyinen, joten oikea reuna ei yksin riitä: rivi viisteen (83 px) yläpuolelle */
  html.theme-glaston-select .gs-stage--a { padding-bottom: 72px; }
  html.theme-glaston-select .gs-stage-info { margin-top: 24px; }
  html.theme-glaston-select .gs-stage-info .gs-actions { margin-top: 28px; }
  html.theme-glaston-select .gs-points { margin-top: 44px; } /* Mika 16.10.: napin alle väljästi tilaa ennen hyötylistaa */
  html.theme-glaston-select .gs-service-in { padding-top: 96px; }
  html.theme-glaston-select .gs-service-copy .gs-lead { margin-top: 24px; }
  html.theme-glaston-select .gs-service-copy .gs-link { margin-top: 32px; }
  html.theme-glaston-select .gs-service-list { margin: 64px calc(var(--gx) * -1) 0; padding: 88px var(--gx) 72px; }
  html.theme-glaston-select .gs-srows { margin-top: 32px; }
  html.theme-glaston-select .gs-promise-copy { padding: 48px var(--gx) 96px; }
  html.theme-glaston-select .gs-promise-text { margin-top: 18px; }
  html.theme-glaston-select .gs-film { padding: 96px 0 104px; }
  html.theme-glaston-select .gs-film-lead { margin-top: 24px; }
  html.theme-glaston-select .gs-film-poster { margin-top: 40px; }
  html.theme-glaston-select .gs-glasstec-in { padding-top: 96px; padding-bottom: 64px; }
  html.theme-glaston-select .gs-glasstec-text { margin-top: 24px; }
  html.theme-glaston-select .gs-glasstec-in .gs-actions { margin-top: 32px; }
  html.theme-glaston-select .gs-footer-top { padding-top: 72px; padding-bottom: 48px; gap: 48px; }
}

/* Matala puhelin (iPhone SE): tiiviimpi otsikko, jotta kone mahtuu ensimmäiseen näkymään */
@media (max-width: 599px) and (max-height: 740px) {
  html.theme-glaston-select .gs-hero-copy .gs-h1 { font-size: 30px; }
  html.theme-glaston-select .gs-hero-lead { margin-top: 14px; font-size: 15px; line-height: 1.45; }
  html.theme-glaston-select .gs-hero-copy .gs-actions { margin-top: 20px; gap: 14px 24px; }
  html.theme-glaston-select .gs-hero-copy .gs-btn { height: 46px; }
}

/* Vaakapuhelin: otsikko tiiviinä vasempana palstana ja kone oikealla, hero tasan näkymän korkuinen (NV3 6.10.:
   pystyasettelu vei tekstin ja koneen näkymän alle) */
@media (max-width: 1023px) and (max-height: 540px) and (min-aspect-ratio: 13/10) {
  html.theme-glaston-select { --gx: 28px; } /* leveyteen sidottu väljyys kavensi otsikkopalstaa → linkki jäi näkymän alle */
  html.theme-glaston-select .gs-hero { display: block; height: 100svh; min-height: 0; }
  html.theme-glaston-select .gs-hero::after { content: none; }
  html.theme-glaston-select .gs-hero-copy { width: 52%; padding-top: calc(var(--header-h) + 12px); }
  html.theme-glaston-select .gs-hero-copy .gs-eyebrow { max-width: none; font-size: 10px; }
  html.theme-glaston-select .gs-hero-copy .gs-h1 { margin-top: 8px; font-size: clamp(22px, min(4.2vw, 7.4svh), 34px); } /* matala näkymä: otsikko ei saa työntää linkkiä näkymän alle */
  html.theme-glaston-select .gs-hero-lead { margin-top: 10px; font-size: 13px; line-height: 1.45; }
  html.theme-glaston-select .gs-hero-copy .gs-actions { margin-top: 14px; gap: 10px 18px; }
  html.theme-glaston-select .gs-hero-copy .gs-btn { height: 40px; padding: 0 30px 0 18px; font-size: 14px; }
  html.theme-glaston-select .gs-hero-copy .gs-link { font-size: 14px; padding-bottom: 5px; }
  html.theme-glaston-select .gs-hero-machine { position: absolute; left: 43%; bottom: -4%; width: 64%; margin: 0; }
  html.theme-glaston-select .gs-hero-load, html.theme-glaston-select .gs-hero-ig { top: calc(var(--header-h) + 12px); font-size: clamp(24px, 4.4vw, 36px); }
}
/* Matalin vaakapuhelin (SE 667 × 375): napit eivät mahtuneet näkymään jo ennen 16.10. → tiiviimpi ingressi, ja
   toissijainen ankkurilinkki pois (tarina vie samaan kohtaan, ensisijainen nappi jää) */
@media (max-width: 1023px) and (max-height: 400px) and (min-aspect-ratio: 13/10) {
  html.theme-glaston-select .gs-hero-copy .gs-h1 { font-size: clamp(22px, min(4.2vw, 6.6svh), 34px); }
  html.theme-glaston-select .gs-hero-lead { font-size: 12px; line-height: 1.4; }
  html.theme-glaston-select .gs-hero-copy .gs-link { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP ≥ 1024 — Figma v2 1:1 (arvot Figman pikseleinä × --s)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (min-aspect-ratio: 19/20) {
  html.theme-glaston-select .gs-eyebrow { font-size: calc(var(--s) * 13); }
  html.theme-glaston-select .gs-h1 { font-size: calc(var(--s) * 92); margin-left: calc(var(--s) * -6); }
  html.theme-glaston-select .gs-h2 { font-size: calc(var(--s) * 64); margin-left: calc(var(--s) * -6); }
  html.theme-glaston-select .gs-lead { font-size: max(15px, calc(var(--s) * 20)); }
  html.theme-glaston-select .gs-body { font-size: max(14px, calc(var(--s) * 17)); }
  html.theme-glaston-select .gs-num { font-size: calc(var(--s) * 12); }

  /* Figman leveydet: teksti keskitetään viisteen vasemmalle puolelle (leveys − 14) */
  html.theme-glaston-select .gs-btn { --bw: calc(var(--s) * 22); --bh: calc(var(--s) * 32); height: calc(var(--s) * 56); min-width: calc(var(--s) * 236); padding: 0 calc(var(--s) * 38) 0 calc(var(--s) * 24); font-size: max(14px, calc(var(--s) * 17)); }
  html.theme-glaston-select .gs-btn--wide { min-width: calc(var(--s) * 232); }
  html.theme-glaston-select .gs-header .gs-btn--sm { min-width: calc(var(--s) * 176); }
  html.theme-glaston-select .gs-link { font-size: max(14px, calc(var(--s) * 17)); padding-bottom: calc(var(--s) * 9); gap: 0.55em; }
  html.theme-glaston-select .gs-actions { gap: calc(var(--s) * 32); flex-wrap: nowrap; }

  html.theme-glaston-select .gs-header-in { align-items: flex-start; padding-top: calc(var(--s) * 30); }
  html.theme-glaston-select .gs-lockup { gap: calc(var(--s) * 16); }
  html.theme-glaston-select .gs-header .gs-lockup { margin-top: calc(var(--s) * 8); }
  html.theme-glaston-select .gs-lockup .gs-logo { width: calc(var(--s) * 97.588); }
  html.theme-glaston-select .gs-lockup-div { height: calc(var(--s) * 30); }
  html.theme-glaston-select .gs-lockup-name { font-size: calc(var(--s) * 23); margin-top: calc(var(--s) * 2); }
  html.theme-glaston-select .gs-nav { display: flex; gap: calc(var(--s) * 36); margin: calc(var(--s) * 16) calc(var(--s) * 44) 0 auto; font-size: max(13px, calc(var(--s) * 16)); line-height: 1.173; }
  html.theme-glaston-select .gs-nav a { position: relative; padding-bottom: 4px; }
  html.theme-glaston-select .gs-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-out); }
  html.theme-glaston-select .gs-nav a:hover::after, html.theme-glaston-select .gs-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
  html.theme-glaston-select .gs-header .gs-btn--sm { display: inline-flex; }
  html.theme-glaston-select .gs-menu-btn, html.theme-glaston-select .gs-menu { display: none !important; }

  /* 01 Hero */
  html.theme-glaston-select .gs-hero { display: block; height: max(100svh, calc(var(--s) * 760)); min-height: 0; }
  html.theme-glaston-select .gs-hero::after { content: none; }
  html.theme-glaston-select .gs-hero-band { top: calc(var(--s) * 105); height: calc(var(--s) * 710); }
  html.theme-glaston-select .gs-hero-band img { left: calc(100% - var(--s) * 600); top: calc(var(--s) * -165); width: calc(var(--s) * 1177.2); }
  html.theme-glaston-select .gs-hero-pane { top: calc(var(--s) * 104); bottom: auto; width: calc(var(--gx) + var(--s) * 1314.85); height: calc(var(--s) * 876); clip-path: polygon(0 0, calc(100% - var(--s) * 590.85) 0, 100% 100%, 0 100%); }
  html.theme-glaston-select .gs-hero-bevel { display: block; left: calc(var(--gx) + var(--s) * 799); top: calc(var(--s) * 104); width: calc(var(--s) * 592.5); height: calc(var(--s) * 877.1); }
  html.theme-glaston-select .gs-hero-machine { position: absolute; left: calc(var(--gx) + var(--s) * 234); top: calc(var(--s) * 281); width: calc(var(--s) * 1480); height: calc(var(--s) * 832); margin: 0; aspect-ratio: auto; }
  html.theme-glaston-select .gs-hero-copy { padding-top: calc(var(--s) * 164); }
  html.theme-glaston-select .gs-hero-load, html.theme-glaston-select .gs-hero-ig { top: calc(var(--s) * 204); }
  html.theme-glaston-select .gs-hero-copy .gs-eyebrow { max-width: none; }
  html.theme-glaston-select .gs-hero-copy .gs-h1 { margin-top: calc(var(--s) * 13); font-size: calc(var(--s) * 64); } /* copy v1 (Mika 9.10.): 2 riviä, pääväite + vaimeampi vastaus */
  html.theme-glaston-select .gs-hero-lead { margin-top: calc(var(--s) * 26); width: calc(var(--s) * 740); max-width: none; }
  html.theme-glaston-select .gs-hero-copy .gs-actions { margin-top: calc(var(--s) * 40); }

  /* 02 Why */
  /* copy v1 on pidempi → osio 1000 → 1160: kuva skaalautuu tasaisesti (cover, oikea alakulma, 56°-leikkaus säilyy)
     ja viistelinjan kulma on laskettu niin, että sen etäisyys kuvan leikkaukseen pysyy 74:ssä (polku index.html:ssä) */
  html.theme-glaston-select .gs-why { height: calc(var(--s) * 1160); }
  html.theme-glaston-select .gs-why-media { position: absolute; right: 0; top: 0; margin: 0; width: calc(var(--s) * 580); height: calc(var(--s) * 1160); clip-path: none; }
  html.theme-glaston-select .gs-why-media img { width: 100%; height: 100%; object-fit: cover; object-position: right bottom; clip-path: none; }
  html.theme-glaston-select .gs-why-bevel { display: block; left: calc(100% - var(--s) * 655); width: calc(var(--s) * 298.6); height: calc(var(--s) * 1160.6); }
  html.theme-glaston-select .gs-why-in { padding-top: calc(var(--s) * 120); padding-bottom: 0; }
  html.theme-glaston-select .gs-why-in .gs-h2 { margin-top: calc(var(--s) * 15); }
  html.theme-glaston-select .gs-why-lead { margin-top: calc(var(--s) * 29); width: calc(var(--s) * 640); }
  html.theme-glaston-select .gs-rows { margin-top: calc(var(--s) * 56); width: calc(var(--s) * 604); }
  html.theme-glaston-select .gs-row { grid-template-columns: calc(var(--s) * 54) 1fr; padding: calc(var(--s) * 22) 0 calc(var(--s) * 40); }
  html.theme-glaston-select .gs-row .gs-num { font-size: calc(var(--s) * 13); padding-top: calc(var(--s) * 8); }
  html.theme-glaston-select .gs-row-title { font-size: calc(var(--s) * 34); }
  html.theme-glaston-select .gs-row-text { margin-top: calc(var(--s) * 10); font-size: max(14px, calc(var(--s) * 19)); width: calc(var(--s) * 550); }

  /* 03 Products */
  html.theme-glaston-select .gs-range { padding: calc(var(--s) * 120) 0; }
  html.theme-glaston-select .gs-range-head { display: grid; grid-template-columns: calc(var(--s) * 804) calc(var(--s) * 440); }
  html.theme-glaston-select .gs-range-head .gs-h2 { margin-top: calc(var(--s) * 15); }
  html.theme-glaston-select .gs-range-intro { margin-top: calc(var(--s) * 56); }
  /* copy v1: kortin korkeus = sisältö. Hyötykohdat ovat virrassa koneen alla (padding-top), muut absoluuttisesti kuten ennen */
  html.theme-glaston-select .gs-stage { display: block; margin-top: calc(var(--s) * 77); padding: calc(var(--s) * 576) calc(var(--s) * 48) calc(var(--s) * 72); }
  /* Mika 9.10.: lisää väliä koneen heijastuksen ja hyötytekstien väliin. 14.10.: IG-kortti samalla asettelulla kuin E
     (koneet konevaihdon kehyksistä, pitkä IG-linja ei mahdu tekstien viereen kuten Comfort Box) */
  html.theme-glaston-select .gs-stage--a, html.theme-glaston-select .gs-stage--b { padding-top: calc(var(--s) * 624); }
  html.theme-glaston-select .gs-stage--b { margin-top: calc(var(--s) * 60); }
  html.theme-glaston-select .gs-stage-bg::before { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--s) * 100) 100%, 0 calc(100% - var(--s) * 148.26)); }
  html.theme-glaston-select .gs-stage--b .gs-stage-bg::before { clip-path: polygon(0 0, calc(100% - var(--s) * 150) 0, 100% calc(var(--s) * 222.39), 100% 100%, 0 100%); }
  html.theme-glaston-select .gs-stage > :not(.gs-stage-bg) { position: absolute; }
  html.theme-glaston-select .gs-stage-id { left: calc(var(--s) * 48); top: calc(var(--s) * 48); width: calc(var(--s) * 540); }
  html.theme-glaston-select .gs-stage--b .gs-stage-id { top: calc(var(--s) * 60); }
  html.theme-glaston-select .gs-product { font-size: calc(var(--s) * 40); letter-spacing: -0.02em; line-height: 1.15; margin: calc(var(--s) * 9) 0 0 calc(var(--s) * -3); }
  html.theme-glaston-select .gs-tagline { font-size: calc(var(--s) * 24); margin-top: calc(var(--s) * 4); line-height: 1.173; }
  html.theme-glaston-select .gs-stage-info { left: calc(var(--s) * 624); top: calc(var(--s) * 54); width: calc(var(--s) * 576); margin: 0; }
  html.theme-glaston-select .gs-stage--b .gs-stage-info { top: calc(var(--s) * 66); width: calc(var(--s) * 400); } /* oikean yläkulman viisteen vasemmalle puolelle */
  html.theme-glaston-select .gs-stage-info .gs-actions { margin-top: calc(var(--s) * 32); }
  html.theme-glaston-select .gs-stage .gs-actions { gap: calc(var(--s) * 16) calc(var(--s) * 32); flex-wrap: wrap; }
  /* hyötykohdat: kolme saraketta koneen alla (copy v1: otsikko + teksti) */
  html.theme-glaston-select .gs-stage > .gs-stage-dl { position: relative; margin-top: calc(var(--s) * 48); padding-top: calc(var(--s) * 28); }
  html.theme-glaston-select .gs-stage--a { padding-bottom: calc(var(--s) * 112); } /* alarivi selvästi vasemman alakulman 56°-viisteen yläpuolelle */
  html.theme-glaston-select .gs-stage > .gs-points { position: relative; margin: 0; grid-template-columns: repeat(3, 1fr); gap: 0 calc(var(--s) * 40); font-size: max(14px, calc(var(--s) * 17)); line-height: 1.173; }
  html.theme-glaston-select .gs-points li { grid-template-columns: calc(var(--s) * 32) 1fr; }
  html.theme-glaston-select .gs-point-title { font-size: max(15px, calc(var(--s) * 19)); line-height: 1.25; }
  html.theme-glaston-select .gs-point-text { margin-top: calc(var(--s) * 8); font-size: max(14px, calc(var(--s) * 16)); line-height: 1.5; }
  html.theme-glaston-select .gs-points .gs-num { font-size: calc(var(--s) * 12); }
  /* kone 56 alemmas (copy v1: tekstilohkot ylhäällä ovat korkeampia, 1024:llä linkit rivittyvät kahdelle riville) */
  html.theme-glaston-select .gs-stage-machine { left: calc(var(--s) * 24); top: calc(var(--s) * 96); width: calc(var(--s) * 1200); height: calc(var(--s) * 675); margin: 0; }
  /* IG: 4–5-rivinen teksti kapeassa palstassa painoi napin koneen päälle (palaute 19.10.: 14 px 1024:llä, 64 px 1440:llä).
     Kone + hyötykohdat 48 alemmas → väli kuten Tempering-kortissa (≈ 110 px 1440:llä), heijastuksen väli ennallaan. */
  html.theme-glaston-select .gs-stage--b { padding-top: calc(var(--s) * 672); }
  html.theme-glaston-select .gs-stage--b .gs-stage-machine { top: calc(var(--s) * 144); }
  html.theme-glaston-select .gs-stage-shadow { display: block; left: calc(var(--s) * 120); top: calc(var(--s) * 502.5); width: calc(var(--s) * 1008); height: calc(var(--s) * 22); border-radius: 50%; background: rgba(11, 38, 57, 0.22); filter: blur(calc(var(--s) * 8)); }

  /* 04 Service */
  html.theme-glaston-select .gs-service { height: calc(var(--s) * 760); }
  html.theme-glaston-select .gs-service-navy { display: block; left: calc(var(--gx) + var(--s) * 664); top: 0; }
  html.theme-glaston-select .gs-service-navy::before { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--s) * 107.919) 100%, 0 calc(var(--s) * 600)); }
  html.theme-glaston-select .gs-service-bevel { display: block; left: calc(var(--gx) + var(--s) * 589); width: calc(var(--s) * 109.7); height: calc(var(--s) * 760.6); }
  html.theme-glaston-select .gs-service-in { grid-template-columns: calc(var(--s) * 804) calc(var(--s) * 444); padding-top: 0; padding-bottom: 0; }
  html.theme-glaston-select .gs-service-copy { padding-top: calc(var(--s) * 120); width: calc(var(--s) * 520); }
  html.theme-glaston-select .gs-service-copy .gs-h2 { margin-top: calc(var(--s) * 15); }
  html.theme-glaston-select .gs-service-copy .gs-lead { margin-top: calc(var(--s) * 49); }
  html.theme-glaston-select .gs-service-copy .gs-link { margin-top: calc(var(--s) * 48); }
  html.theme-glaston-select .gs-service-list { margin: 0; padding: calc(var(--s) * 124) 0 0; background: none; clip-path: none; }
  html.theme-glaston-select .gs-srows { margin-top: calc(var(--s) * 45); }
  html.theme-glaston-select .gs-srows li { grid-template-columns: calc(var(--s) * 44) 1fr; min-height: calc(var(--s) * 104); padding: calc(var(--s) * 18) 0 calc(var(--s) * 16); }
  html.theme-glaston-select .gs-srows .gs-num { padding-top: calc(var(--s) * 6); }
  html.theme-glaston-select .gs-srows h3 { font-size: calc(var(--s) * 26); }
  html.theme-glaston-select .gs-srows p { margin-top: calc(var(--s) * 7.5); font-size: max(14px, calc(var(--s) * 17)); line-height: 1.35; }

  /* 05 Promise */
  html.theme-glaston-select .gs-promise { height: calc(var(--s) * 820); }
  html.theme-glaston-select .gs-promise-media { position: absolute; left: 0; top: 0; margin: 0; width: calc(var(--s) * 856.3); height: calc(var(--s) * 820); clip-path: none; }
  html.theme-glaston-select .gs-promise-media img { width: 100%; height: 100%; object-fit: fill; clip-path: none; }
  html.theme-glaston-select .gs-promise-bevel { display: block; left: calc(var(--s) * 675); width: calc(var(--s) * 258.1); height: calc(var(--s) * 820.6); }
  /* copy v1 on pidempi: teksti 38 → 34 ja ylemmäs, jotta viimeinen rivi pysyy 56°-linjan oikealla puolella */
  html.theme-glaston-select .gs-promise-copy { position: absolute; left: calc(var(--gx) + var(--s) * 704); top: calc(var(--s) * 180); padding: 0; width: calc(var(--s) * 548); } /* oikea reuna = sisältöruudukon reuna */
  html.theme-glaston-select .gs-promise-text { margin: calc(var(--s) * 17) 0 0 calc(var(--s) * -4); font-size: calc(var(--s) * 31); letter-spacing: -0.015em; } /* Mika 9.10.: tasainen rivitys 7 rivillä (balance) */

  /* 06 Film */
  html.theme-glaston-select .gs-film { height: calc(var(--s) * 1260); padding: calc(var(--s) * 120) 0 0; }
  html.theme-glaston-select .gs-film .gs-h2 { margin-top: calc(var(--s) * 15); }
  html.theme-glaston-select .gs-film-lead { margin-top: calc(var(--s) * 29); width: calc(var(--s) * 640); }
  html.theme-glaston-select .gs-film-bevel { left: calc(100% - var(--s) * 290); width: calc(var(--s) * 797.6); height: calc(var(--s) * 1181.1); aspect-ratio: auto; }
  html.theme-glaston-select .gs-film-poster { margin-top: calc(var(--s) * 38); width: calc(var(--s) * 1248); height: calc(var(--s) * 702); aspect-ratio: auto; }
  html.theme-glaston-select .gs-film-play { padding: calc(var(--s) * 32); }
  html.theme-glaston-select .gs-film-play > span { --bw: calc(var(--s) * 24); --bh: calc(var(--s) * 35.6); width: calc(var(--s) * 88); height: calc(var(--s) * 88); }
  html.theme-glaston-select .gs-film-tbd { font-size: max(14px, calc(var(--s) * 17)); padding: calc(var(--s) * 18) calc(var(--s) * 28); }

  /* 07 Glasstec */
  html.theme-glaston-select .gs-glasstec { display: block; height: calc(var(--s) * 780); }
  html.theme-glaston-select .gs-glasstec-media { position: absolute; right: 0; top: 0; margin: 0; width: calc(var(--s) * 664.44); height: calc(var(--s) * 780); clip-path: none; }
  html.theme-glaston-select .gs-glasstec-media img { width: 100%; height: 100%; object-fit: fill; clip-path: none; }
  html.theme-glaston-select .gs-glasstec-bevel { display: block; left: calc(100% - var(--s) * 739.44); width: calc(var(--s) * 272.2); height: calc(var(--s) * 780.6); }
  html.theme-glaston-select .gs-glasstec-in { padding-top: calc(var(--s) * 104); padding-bottom: 0; }
  html.theme-glaston-select .gs-glasstec-in .gs-h2 { margin-top: calc(var(--s) * 15); }
  html.theme-glaston-select .gs-h2--glasstec { font-size: calc(var(--s) * 60); }
  html.theme-glaston-select .gs-dates { margin-top: calc(var(--s) * 44); font-size: calc(var(--s) * 24); line-height: 1.173; }
  html.theme-glaston-select .gs-venue { margin-top: calc(var(--s) * 10); font-size: calc(var(--s) * 22); line-height: 1.173; }
  html.theme-glaston-select .gs-glasstec-text { margin-top: calc(var(--s) * 30); width: calc(var(--s) * 520); font-size: max(14px, calc(var(--s) * 18)); line-height: 1.5; }
  html.theme-glaston-select .gs-glasstec-in .gs-actions { margin-top: calc(var(--s) * 40); }

  /* 08 Footer */
  html.theme-glaston-select .gs-footer { height: calc(var(--s) * 440); }
  html.theme-glaston-select .gs-footer-bevel { display: block; left: calc(100% - var(--s) * 190); width: calc(var(--s) * 298.4); height: calc(var(--s) * 441.1); }
  html.theme-glaston-select .gs-footer-top { grid-template-columns: calc(var(--s) * 424) 1fr; gap: 0; padding-top: calc(var(--s) * 96); padding-bottom: 0; height: calc(var(--s) * 350); }
  html.theme-glaston-select .gs-footer-tag { margin-top: calc(var(--s) * 26); font-size: max(13px, calc(var(--s) * 16)); }
  html.theme-glaston-select .gs-footer-cols { grid-template-columns: repeat(4, calc(var(--s) * 180)); gap: 0; }
  html.theme-glaston-select .gs-footer-cols p { font-size: calc(var(--s) * 12); margin-bottom: calc(var(--s) * 22); line-height: 1.173; }
  html.theme-glaston-select .gs-footer-cols a { font-size: max(13px, calc(var(--s) * 16)); line-height: 1.173; margin-bottom: calc(var(--s) * 13); }
  html.theme-glaston-select .gs-footer-bottom .gs-wrap { display: grid; grid-template-columns: calc(var(--s) * 895) auto; justify-content: start; padding-top: calc(var(--s) * 26); padding-bottom: 0; font-size: max(12px, calc(var(--s) * 14)); }
}


/* ══════════════════════════════════════════════════════════════
   LIIKE — alkutilat vain kun moottori on tulossa (html.gs-motion). Hero ei odota moottoria (alla).
   ══════════════════════════════════════════════════════════════ */
html.theme-glaston-select.gs-motion section:not([data-hero]) [data-rise],
html.theme-glaston-select.gs-motion [data-rise-group] > *,
html.theme-glaston-select.gs-motion [data-rows] > li { opacity: 0; transform: translateY(28px); }
html.theme-glaston-select.gs-motion section:not([data-hero]) [data-lines] .ln > span { transform: translateY(105%); }
html.theme-glaston-select.gs-motion [data-draw='scroll'] { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.theme-glaston-select.gs-motion [data-words] .w { opacity: 0.14; }
/* uurrelasinauha ja lasin DOM-varapinta vain, jos WebGL ei käynnisty (WebGL tuo nauhan omalla sisääntulollaan) */
html.theme-glaston-select.gs-motion .gs-hero-back { opacity: 0; }

/* Heron sisääntulo CSS:llä ensimmäisestä maalauksesta. NV3 6.10.: moottorin varassa otsikko ja kuva näkyivät
   0,6–4 s myöhässä (tuotannossa hydraatio + käynnistys). Erilliset translate/scale/opacity-ominaisuudet, jotta
   moottorin transform-tweenit (vieritystarina, headerin piilotus) jäävät ennalleen. Kone vaihtuu WebGL-kohtaukseen
   vasta sisääntulon jälkeen tai ensimmäisestä vierityksestä (main.js handOff). */
@media (prefers-reduced-motion: no-preference) {
  html.theme-glaston-select .gs-header { animation: gs-drop 1.1s var(--ease-expo) backwards; }
  html.theme-glaston-select .gs-header-rule { animation: gs-rule 1.6s cubic-bezier(0.87, 0, 0.13, 1) 0.05s backwards; }
  html.theme-glaston-select .gs-hero-copy .gs-eyebrow { animation: gs-up 1.1s var(--ease-expo) 0.1s backwards; }
  html.theme-glaston-select .gs-hero-copy .gs-h1 .ln > span { animation: gs-line 1.45s var(--ease-expo) 0.15s backwards; }
  html.theme-glaston-select .gs-hero-copy .gs-h1 .ln:nth-child(2) > span { animation-delay: 0.27s; }
  html.theme-glaston-select .gs-hero-copy .gs-lead { animation: gs-up 1.2s var(--ease-expo) 0.4s backwards; }
  html.theme-glaston-select .gs-hero-copy .gs-actions { animation: gs-up 1.2s var(--ease-expo) 0.5s backwards; }
  /* kone liukuu ilman häivytystä: Chrome kirjaa häivytettävän elementin LCP:ksi vasta häivytyksen lopussa
     (mitattu 14.10.: ingressi 2,1 s), liukuva kone maalautuu heti ja on heron suurin elementti */
  html.theme-glaston-select .gs-hero-machine img { animation: gs-mach 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s backwards; }
  html.theme-glaston-select .gs-hero-bevel path { stroke-dasharray: 1; animation: gs-draw 2.8s cubic-bezier(0.37, 0, 0.63, 1) 0.9s backwards; }
}
@keyframes gs-drop { from { opacity: 0; translate: 0 -24px; } }
@keyframes gs-rule { from { scale: 0 1; } }
@keyframes gs-up { from { opacity: 0; translate: 0 24px; } }
@keyframes gs-line { from { translate: 0 105%; } }
@keyframes gs-mach { from { translate: 20% 0; } }
@keyframes gs-draw { from { stroke-dashoffset: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.theme-glaston-select *, html.theme-glaston-select *::before, html.theme-glaston-select *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}