/* =====================================================================
   E-Toimisto «lux»: kerroksittain animoitu logo, tummat alasivujen herot,
   värisävysarja logon vihreistä ja hopeasta sekä hienovaraiset kiillot.
   Ladataan viimeisenä (views/layout.js).
   ===================================================================== */

/* ---------- Värisävyt (logon vihreät + hopea) ----------
   Oletus = smaragdi; tint-* -luokka vaihtaa sävyn. */
/* --t = päävärisävy (rgb-kolmikko), --t2 = vaalea korostus, --tb = tumma pohja */
:root { --t: 63 165 22; --t2: 143 214 92; --tb: 12 58 32; }
.hero.tint-emerald, .tint-emerald { --t: 63 165 22;  --t2: 143 214 92;  --tb: 12 58 32; }
.hero.tint-lime, .tint-lime    { --t: 124 196 40; --t2: 196 240 120; --tb: 20 62 24; }
.hero.tint-jade, .tint-jade    { --t: 26 160 110; --t2: 120 224 180; --tb: 8 52 40; }
.hero.tint-forest, .tint-forest  { --t: 46 122 13;  --t2: 160 220 110; --tb: 9 40 22; }
.hero.tint-mint, .tint-mint    { --t: 80 190 130; --t2: 170 240 200; --tb: 10 54 38; }
.hero.tint-gold, .tint-gold    { --t: 168 190 60; --t2: 226 236 150; --tb: 30 52 18; }
.hero.tint-silver, .tint-silver  { --t: 150 176 160; --t2: 225 235 228; --tb: 18 44 32; }

/* ---------- Logo kerroksina ---------- */
.lgo { position: relative; display: block; height: 40px; aspect-ratio: var(--lgo-ar); }
@media (min-width: 1280px) { .lgo { height: 46px; } }
.site-footer .lgo { height: 44px; }
.lgo__layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lgo__mark  { clip-path: inset(0 calc(100% - var(--lgo-title)) 0 0); transform-origin: 12% 50%; }
.lgo__title { clip-path: inset(0 0 48% var(--lgo-title)); }
.lgo__tag   { clip-path: inset(51% 0 0 var(--lgo-tag)); }
/* Kiilto näkyy vain logon pikseleissä */
.lgo__shine {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--lgo-src) center / 100% 100% no-repeat; mask: var(--lgo-src) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 0 38%, rgb(255 255 255 / 0.85) 46%, rgb(255 255 255 / 0) 54%, transparent 62%) 0 0 / 300% 100% no-repeat;
  background-position: 120% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .site-header .lgo__mark  { animation: lgo-coin 1100ms cubic-bezier(.2,.9,.25,1) 150ms both; }
  .site-header .lgo__title { animation: lgo-wipe 900ms cubic-bezier(.65,0,.35,1) 650ms both; }
  .site-header .lgo__tag   { animation: lgo-rise 700ms var(--ease-out) 1250ms both; }
  .site-header .lgo__shine { animation: lgo-shine 1.4s ease-in-out 2.1s both, lgo-shine 1.4s ease-in-out 9s infinite; }
  .site-footer .is-revealed .lgo__mark  { animation: lgo-coin 1100ms cubic-bezier(.2,.9,.25,1) both; }
  .site-footer .is-revealed .lgo__title { animation: lgo-wipe 900ms cubic-bezier(.65,0,.35,1) 450ms both; }
  .site-footer .is-revealed .lgo__tag   { animation: lgo-rise 700ms var(--ease-out) 1000ms both; }
  .site-footer .is-revealed .lgo__shine { animation: lgo-shine 1.4s ease-in-out 1.8s both; }
  .logo:hover .lgo__mark { animation: lgo-spin 900ms cubic-bezier(.3,.7,.3,1); }
}
@keyframes lgo-coin { 0% { opacity: 0; transform: perspective(400px) rotateY(-180deg) scale(.6); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes lgo-spin { from { transform: perspective(400px) rotateY(0); } to { transform: perspective(400px) rotateY(360deg); } }
@keyframes lgo-wipe { from { clip-path: inset(0 100% 48% var(--lgo-title)); opacity: .2; } to { clip-path: inset(0 0 48% var(--lgo-title)); opacity: 1; } }
@keyframes lgo-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lgo-shine { from { background-position: 120% 0; } to { background-position: -20% 0; } }

/* ---------- Alasivujen lux-hero ---------- */
.hero--lux {
  color: #fff; background: rgb(var(--tb)); border-bottom: 0;
  min-height: clamp(460px, 34vw + 260px, 680px);
}
.hero--lux::before { display: none; }
.hero--lux .hero__bg, .hero--lux.hero--plain .hero__bg {
  -webkit-mask: none; mask: none; overflow: hidden;
  background:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(45% 70% at 78% 45%, rgb(var(--t) / 0.45) 0%, transparent 70%),
    radial-gradient(55% 80% at 0% 100%, rgb(var(--t) / 0.18) 0%, transparent 70%),
    linear-gradient(135deg, rgb(var(--tb)) 0%, #0a2d19 55%, #061c10 100%);
}
.hero--lux .hero__bg::before, .hero--lux .hero__bg::after { display: none !important; }
/* Hopeinen hiusviiva alareunassa */
.hero--lux::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgb(var(--t2) / 0.6), rgb(220 230 225 / 0.7), rgb(var(--t2) / 0.6), transparent);
}
.hero--lux h1, .hero--lux .h1 { color: #fff; }
.hero--lux .accent { color: rgb(var(--t2)); }
.hero--lux .hero__lead { color: rgb(255 255 255 / 0.82); }
.hero--lux .hero__note { color: #fff; border-color: rgb(var(--t2)); }
.hero--lux .eyebrow { justify-self: start; width: fit-content; color: rgb(var(--t2)); background: rgb(255 255 255 / 0.07); border-color: rgb(255 255 255 / 0.16); }
.hero--lux .breadcrumbs, .hero--lux .breadcrumbs a { color: rgb(255 255 255 / 0.7); }
.hero--lux .breadcrumbs a:hover { color: #fff; }
.hero--lux .hero__content .h1::after { background: linear-gradient(90deg, rgb(var(--t2)), rgb(220 230 225)); }
.hero--lux .btn--outline, .hero--lux .btn--outline-light {
  --btn-fg: #fff; --btn-bg: rgb(255 255 255 / 0.06); --btn-border: rgb(255 255 255 / 0.3); --btn-bg-hover: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero--lux .btn--primary { --btn-bg: #fff; --btn-fg: rgb(var(--tb)); --btn-bg-hover: rgb(var(--t2)); }
.hero--lux .container { position: relative; z-index: 2; }
@media (min-width: 1024px) { .hero--lux.hero--split .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
@media (max-width: 1023px) { .hero--lux .hero__visual { order: -1; } }

/* ---------- Pallo ---------- */
.orb { position: relative; width: min(100%, 440px); margin-inline: auto; aspect-ratio: 1; }
@media (max-width: 1023px) { .orb { width: min(70vw, 300px); } }
.orb__svg { width: 100%; height: 100%; overflow: visible; }
.orb__s0 { stop-color: rgb(var(--t2)); }
.orb__s1 { stop-color: rgb(var(--t)); }
.orb__s2 { stop-color: rgb(var(--tb)); }
.orb__g0 { stop-color: rgb(var(--t)); stop-opacity: .45; }
.orb__g1 { stop-color: rgb(var(--t)); stop-opacity: 0; }
.orb__ring { fill: none; stroke: rgb(var(--t2) / 0.3); stroke-width: 1.2; transform-origin: 200px 200px; }
.orb__ring--dash { stroke: rgb(255 255 255 / 0.22); stroke-dasharray: 2 7; }
.orb__ring--arc { stroke: rgb(var(--t2) / 0.85); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 22 78; }
.orb__sat { fill: rgb(var(--t2)); filter: drop-shadow(0 0 6px rgb(var(--t2) / 0.9)); }
.orb__sat--2 { fill: #e8efe9; }
.orb__orbit { transform-origin: 200px 200px; transform: rotate(30deg); }
.orb__orbit--2 { transform: rotate(200deg); }
.orb__lines { fill: none; stroke: rgb(255 255 255 / 0.3); stroke-width: 1.1; }
.orb__mer { transform-origin: 200px 200px; transform: scaleX(calc(cos(var(--k) * 30deg))); }
.orb__rim { fill: none; stroke: rgb(255 255 255 / 0.3); stroke-width: 1.5; }
.orb__glow { transform-origin: 200px 200px; }
.orb__tile {
  position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; translate: -50% -50%;
  display: grid; place-items: center; border-radius: 28%;
  background: linear-gradient(150deg, rgb(255 255 255 / 0.32), rgb(255 255 255 / 0.08));
  border: 1px solid rgb(255 255 255 / 0.45);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 20px 40px -18px rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.6);
  color: #fff;
}
.orb__tile svg { width: 46%; height: 46%; stroke-width: 1.6; filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.35)); }
.orb__chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; color: #fff;
  background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 12px 26px -14px rgb(0 0 0 / 0.6);
}
.orb__dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--t2)); box-shadow: 0 0 0 4px rgb(var(--t2) / 0.25); }
.orb__chip--1 { left: -4%; top: 16%; }
.orb__chip--2 { right: -6%; top: 44%; }
.orb__chip--3 { left: 6%; bottom: 8%; }
@media (max-width: 479px) { .orb__chip { font-size: 0.75rem; padding: 6px 10px; } .orb__chip--1 { left: -8%; } .orb__chip--2 { right: -10%; } }
@media (prefers-reduced-motion: no-preference) {
  .orb { animation: rise-in 900ms var(--ease-out) 120ms both; }
  .orb__mer { animation: globe-spin 16s linear infinite; animation-delay: calc(var(--k) * -16s / 12); }
  .orb__ring--dash { animation: orb-rot 70s linear infinite; }
  .orb__ring--arc { animation: orb-rot 9s linear infinite; }
  .orb__orbit { animation: orb-rot 14s linear infinite; }
  .orb__orbit--2 { animation: orb-rot 22s linear infinite reverse; }
  .orb__glow { animation: globe-glow 5s ease-in-out infinite; }
  .orb__tile { animation: orb-tile 900ms cubic-bezier(.2,1.4,.4,1) 500ms both, orb-float 6s ease-in-out 1.6s infinite; }
  .orb__chip { animation: orb-chip 700ms var(--ease-out) both, orb-float 7s ease-in-out infinite; }
  .orb__chip--1 { animation-delay: 1s, 1.8s; }
  .orb__chip--2 { animation-delay: 1.25s, 2.6s; }
  .orb__chip--3 { animation-delay: 1.5s, 3.4s; }
}
@keyframes orb-rot { to { transform: rotate(360deg); } }
@keyframes orb-tile { from { opacity: 0; scale: .4; rotate: -12deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes orb-chip { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes orb-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.orb__tile { translate: -50% -50%; }
@keyframes orb-float-tile { 0%, 100% { translate: -50% -50%; } 50% { translate: -50% calc(-50% - 8px); } }
@media (prefers-reduced-motion: no-preference) {
  .orb__tile { animation: orb-tile 900ms cubic-bezier(.2,1.4,.4,1) 500ms both, orb-float-tile 6s ease-in-out 1.6s infinite; }
}

/* ---------- Ylellisyys: korttien liukuväriraja ja kiiltopyyhkäisy ---------- */
.card, .pillar, .work-group, .price-card, .pkg {
  position: relative;
}
.card::before, .pkg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(150deg, rgb(143 214 92 / 0.55), rgb(220 230 225 / 0.15) 40%, rgb(63 165 22 / 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity var(--dur-card) var(--ease-out);
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.35) 45%, transparent 60%) 0 0 / 250% 100% no-repeat;
  background-position: 130% 0; opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover::before, .pkg:hover::before { opacity: 1; }
  .card:hover::after { opacity: 1; animation: card-shine 900ms ease-out; }
}
@keyframes card-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* Pitkät merkit eivät peitä keskilaattaa: maksimileveys ja rivitys */
.orb__chip { max-width: 46%; white-space: normal; line-height: 1.25; }
.orb__chip--2 { right: -10%; top: 58%; }

/* Puhelimella pallo näkyy pienempänä tekstin yläpuolella */
@media (max-width: 1023px) {
  .hero--lux.hero--split .hero__visual { display: block; }
  .hero--lux .container { display: grid; gap: var(--space-5); }
  .hero--lux .orb { width: min(62vw, 240px); }
  .hero--lux .orb__chip { font-size: 0.6875rem; padding: 5px 9px; }
}

/* =====================================================================
   Brändipallo (Horizons BrandGlobe). Mittasuhteet ja ajoitukset luonnoksesta.
   ===================================================================== */
.bglobe { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin-inline: auto; }
.home-hero .bglobe { --t: 63 165 22; --t2: 132 214 64; --tb: 7 54 28; }
@media (max-width: 1023px) { .bglobe { width: min(70vw, 300px); } .hero--lux .bglobe { width: min(64vw, 250px); } }
.bglobe__halo { position: absolute; inset: 8%; border-radius: 50%; filter: blur(48px);
  background: radial-gradient(circle at 38% 28%, rgb(var(--t2) / 0.30), transparent 64%); }
.bglobe__done { position: absolute; inset: 4%; border-radius: 50%; filter: blur(32px); opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgb(var(--t2) / 0.42), transparent 62%); }
.bglobe__orbit { position: absolute; inset: 0; }
.bglobe__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.07); }
.bglobe__arc { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: rgb(var(--t2) / 0.45); }
.bglobe__sat { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; border-radius: 50%; translate: -50% -50%;
  background: rgb(var(--t2)); box-shadow: 0 0 16px 4px rgb(var(--t2) / 0.55); }
.bglobe__orbit2 { position: absolute; inset: 7%; border-radius: 50%; border: 2px dashed rgb(184 194 192 / 0.42); box-shadow: 0 0 12px rgb(184 194 192 / 0.1); }
.bglobe__body { position: absolute; inset: 14%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 32% 26%, rgb(var(--t2)), rgb(var(--t)) 32%, rgb(var(--tb)) 72%, rgb(3 26 12) 100%);
  box-shadow: inset 0 -26px 64px rgb(2 20 9 / 0.85), inset 0 12px 34px rgb(160 230 120 / 0.22), 0 44px 96px -42px rgb(var(--t) / 0.6); }
.bglobe__grid { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; transform-origin: 50% 50%; }
.bglobe__grid g { stroke: rgb(214 240 190 / 0.5); }
.bglobe__shade { position: absolute; inset: 0; background: linear-gradient(145deg, rgb(255 255 255 / 0.3), transparent 46%); }
.bglobe__spec { position: absolute; left: -25%; top: -33%; width: 66%; height: 66%; border-radius: 50%; background: rgb(255 255 255 / 0.18); filter: blur(28px); }
.bglobe__rim { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 2px 2px rgb(255 255 255 / 0.35); }
.bglobe__check { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bglobe__gloss { opacity: 0.6; }
.bglobe__base { position: absolute; bottom: 6%; left: 12%; right: 12%; height: 18%; border-radius: 100%; filter: blur(8px); pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(var(--t2) / 0.32), transparent 70%); }
.bglobe .orb__chip { z-index: 3; }
.bglobe .orb__chip--1 { left: -2%; top: 12%; }
.bglobe .orb__chip--2 { right: -4%; top: 52%; }
.bglobe .orb__chip--3 { left: 8%; bottom: 6%; }

@media (prefers-reduced-motion: no-preference) {
  .bglobe { animation: rise-in 900ms var(--ease-out) 100ms both; }
  .bglobe__halo { animation: bg-glow 7s ease-in-out infinite; }
  .bglobe__orbit { animation: bg-spin 42s linear infinite; }
  .bglobe__orbit2 { animation: bg-spin 62s linear infinite reverse; }
  .bglobe__grid { animation: bg-spin 60s linear infinite; }
  .bglobe__draw { stroke-dasharray: 170; stroke-dashoffset: 170; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%;
    animation: bg-draw 1.05s cubic-bezier(.16,1,.3,1) .3s forwards, bg-settle .5s cubic-bezier(.22,1,.36,1) 1.25s forwards; }
  .bglobe__gloss { stroke-dasharray: 170; stroke-dashoffset: 170; opacity: 0;
    animation: bg-gloss 0.9s cubic-bezier(.16,1,.3,1) .42s forwards, bg-gloss-fade .6s ease-out 1.3s forwards; }
  .bglobe__done { animation: bg-done 1.4s ease-out 1s both; }
  .bglobe .orb__chip--1 { animation-delay: 1.4s, 2.2s; }
  .bglobe .orb__chip--2 { animation-delay: 1.65s, 3s; }
  .bglobe .orb__chip--3 { animation-delay: 1.9s, 3.8s; }
}
@keyframes bg-spin { to { transform: rotate(360deg); } }
@keyframes bg-glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .85; transform: scale(1.04); } }
@keyframes bg-draw { 0% { stroke-dashoffset: 170; opacity: 0; } 6% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes bg-settle { 50% { transform: scale(1.035); } }
@keyframes bg-gloss { 0% { stroke-dashoffset: 170; opacity: 0; } 20% { opacity: .6; } 100% { stroke-dashoffset: 0; opacity: .6; } }
@keyframes bg-gloss-fade { to { opacity: .28; } }
@keyframes bg-done { 0% { opacity: 0; transform: scale(.94); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.06); } }
/* Etusivun vanha globe-sääntö ei enää käytössä */
.home-hero__visual .bglobe { width: min(100%, 560px); }
@media (max-width: 959px) { .home-hero__visual .bglobe { width: min(66vw, 300px); } }

/* =====================================================================
   «Palvelemme etänä koko Suomessa»: tumma osio ja pallo, jonka pinnalla Suomi
   ===================================================================== */
.remote--lux {
  --t: 63 165 22; --t2: 132 214 64; --tb: 7 54 28;
  color: #fff; position: relative; isolation: isolate;
  background:
    linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(45% 70% at 76% 50%, rgb(var(--t) / .42), transparent 70%),
    radial-gradient(50% 80% at 0% 100%, rgb(var(--t) / .14), transparent 70%),
    linear-gradient(135deg, #0c3a20 0%, #0a2d19 55%, #061c10 100%);
}
.remote--lux h2, .remote--lux strong { color: #fff; }
.remote--lux .accent { color: rgb(var(--t2)); }
.remote--lux .lead, .remote--lux .remote__item span span { color: rgb(255 255 255 / .78); }
.remote--lux .eyebrow { color: rgb(var(--t2)); }
.remote--lux .remote__icon { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .18); color: rgb(var(--t2)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12); }
.remote--lux .btn--primary { --btn-bg: #fff; --btn-fg: #0c3a20; --btn-bg-hover: rgb(var(--t2)); }

.gmap { margin: 0; width: 100%; }
.bglobe--map { width: min(100%, 540px); }
.gm-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gm-land { fill: rgb(240 255 232 / .14); fill-opacity: 0; stroke: rgb(232 255 220 / .9); stroke-width: 6; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgb(var(--t2) / .6)); }
.gm-arc { fill: none; stroke: #fff; stroke-width: .7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85; }
.gm-dot { fill: #fff; opacity: 0; }
.gm-ping { fill: none; stroke: rgb(var(--t2)); stroke-width: .6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.gm-pkts { opacity: 0; transition: opacity .6s ease 2.4s; }
.gm-pkt { fill: #fff; filter: drop-shadow(0 0 2px #fff); }
.gm-pkt--in { fill: rgb(var(--t2)); filter: drop-shadow(0 0 2px rgb(var(--t2))); }
.gm-home { fill: #fff; stroke: rgb(var(--t)); stroke-width: 1.2; }
.gm-pulse { fill: rgb(var(--t2)); opacity: 0; transform-box: fill-box; transform-origin: center; }
.gm-tag, .gm-toast {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; color: #fff;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .24);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 30px -14px rgb(0 0 0 / .6);
}
.gm-tag i, .gm-toast i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--t2) / .28); }
.gm-tag i svg, .gm-toast i svg { width: 15px; height: 15px; }
.gm-tag b, .gm-toast b { display: block; font-size: .86rem; line-height: 1.2; }
.gm-tag small, .gm-toast small { display: block; font-size: .75rem; color: rgb(255 255 255 / .7); }
.gm-tag { position: absolute; z-index: 3; left: -2%; top: 14%; opacity: 0; }
.gm-toasts { position: absolute; z-index: 3; right: -4%; bottom: 8%; width: 230px; height: 64px; margin: 0; padding: 0; list-style: none; }
.gm-toast { position: absolute; inset: 0 auto auto 0; width: max-content; max-width: 100%; opacity: 0; }
@media (max-width: 600px) { .gm-toasts { right: 0; bottom: -6%; width: 210px; } .gm-tag { left: 0; top: 4%; } }

.gmap.is-revealed .gm-land { animation: gm-draw 2.4s cubic-bezier(.65,0,.35,1) .2s forwards, gm-fill 1s ease 2s forwards; }
.gmap.is-revealed .gm-arc { animation: gm-draw 1s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(2.2s + var(--i) * .16s); }
.gmap.is-revealed .gm-dot { animation: gm-show .4s ease forwards; animation-delay: calc(2.8s + var(--i) * .16s); }
.gmap.is-revealed .gm-ping { animation: gm-ping 2.6s ease-out infinite; animation-delay: calc(3s + var(--i) * .16s); }
.gmap.is-revealed .gm-pkts { opacity: 1; }
.gmap.is-revealed .gm-pulse { animation: gm-pulse 2.8s ease-out infinite; }
.gmap.is-revealed .gm-pulse--2 { animation-delay: 1.4s; }
.gmap.is-revealed .gm-tag { animation: gm-show .6s ease 3.4s forwards, orb-float 7s ease-in-out 4s infinite; }
.gmap.is-revealed .gm-toast { animation: gm-toast 12s ease infinite; animation-delay: calc(3.8s + var(--t) * 3s); }
@keyframes gm-draw { to { stroke-dashoffset: 0; } }
@keyframes gm-fill { to { fill-opacity: 1; } }
@keyframes gm-show { to { opacity: 1; } }
@keyframes gm-ping { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes gm-pulse { 0% { opacity: .5; transform: scale(.8); } 100% { opacity: 0; transform: scale(4); } }
@keyframes gm-toast { 0% { opacity: 0; transform: translateY(10px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .gm-land, .gm-arc { stroke-dashoffset: 0; } .gm-land { fill-opacity: 1; }
  .gm-dot, .gm-tag, .gm-toast:first-child { opacity: 1; } .gm-pkts { display: none; }
}
.no-js .gm-land, .no-js .gm-arc { stroke-dashoffset: 0; } .no-js .gm-dot, .no-js .gm-tag { opacity: 1; }
/* Tumman osion tekstit luettaviksi */
.remote--lux p, .remote--lux .section-head__text p { color: rgb(255 255 255 / .8) !important; }
.gm-tag b, .gm-toast b { color: #fff !important; }

/* Etusivun pääpallo: hieman ohuempi ruksi ja tummempi kiertorata (vihreä satelliitti) */
.bglobe__draw { stroke-width: 18; }
.bglobe__gloss { stroke-width: 5; }
.home-hero .bglobe__arc { border-top-color: rgb(52 150 34 / 0.95); border-width: 2.5px; }
.home-hero .bglobe__ring { border-color: rgb(10 50 22 / 0.55); }

/* Kiertorata yhtenäisenä renkaana, jota pitkin pieni vihreä pallo kiertää */
.bglobe__ring, .home-hero .bglobe__ring { border: 2px solid rgb(52 150 34 / 0.85); }
.bglobe__arc { display: none; }
.bglobe__sat { width: 12px; height: 12px; background: radial-gradient(circle at 35% 30%, #c8f59a, rgb(var(--t2)) 55%, rgb(var(--t))); }

/* Yhteydenottopaneeli ennen alatunnistetta: tilaa myös yläpuolelle,
   ettei paneeli liimaudu edellisen (tumman) osion reunaan */
.prefooter { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) !important; }

/* =====================================================================
   Yläpalkin logo kerroksista – animaatio «Valo» (C)
   Merkki 418×369, koko logo 1586×369 (teksti-kuva sisältää tyhjän merkkialueen).
   ===================================================================== */
@property --klg-a { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
.klg { position: relative; display: block; height: 40px; aspect-ratio: 1586 / 369; }
@media (min-width: 1280px) { .klg { height: 46px; } }
.klg img { position: absolute; top: 0; height: 100%; display: block; }
.klg__mark { position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 418 / 369; }
.klg__mark img { left: 0; width: 100%; }
.klg__teksti { left: 0; width: 100%; clip-path: inset(0 0 0 22.7%); }
.klg__kaari { -webkit-mask: conic-gradient(from 200deg at 51% 43%, #000 var(--klg-a), transparent var(--klg-a)); mask: conic-gradient(from 200deg at 51% 43%, #000 var(--klg-a), transparent var(--klg-a)); }
@media (prefers-reduced-motion: no-preference) {
  .klg__pallo  { animation: klg-pallo 1.1s ease both; }
  .klg__e      { animation: klg-e .7s cubic-bezier(.22,1,.36,1) .9s both; }
  .klg__ruksi  { animation: klg-wipe .7s cubic-bezier(.65,0,.35,1) 1.5s both, klg-glow 1.4s ease 2.1s both; }
  .klg__kaari  { animation: klg-sweep 1.1s cubic-bezier(.65,0,.35,1) 2.2s both; }
  .klg__teksti { animation: klg-tx .9s cubic-bezier(.65,0,.35,1) 2.7s both; }
  .logo:hover .klg__ruksi { animation: klg-glow 1.2s ease; }
}
@keyframes klg-pallo { from { opacity: 0; filter: blur(8px) brightness(1.6); transform: scale(1.08); } }
@keyframes klg-e { from { opacity: 0; transform: translateY(18%); filter: blur(3px); } }
@keyframes klg-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes klg-glow { 40% { filter: drop-shadow(0 0 6px rgb(170 255 120 / .9)); } }
@keyframes klg-sweep { from { --klg-a: 0deg; } to { --klg-a: 360deg; } }
@keyframes klg-tx { from { clip-path: inset(0 100% 0 22.7%); opacity: .3; } to { clip-path: inset(0 0 0 22.7%); opacity: 1; } }

/* Pienempi pallo ja matalampi hero (pyyntö: «yläosa ei niin iso») */
.home-hero .bglobe, .home-hero__visual .bglobe { width: min(100%, 440px); }
.hero--lux .bglobe { width: min(100%, 380px); }
.home-hero { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.hero--lux { min-height: clamp(400px, 26vw + 220px, 560px); }
@media (max-width: 959px) { .home-hero__visual .bglobe { width: min(54vw, 240px); } }
@media (max-width: 1023px) { .hero--lux .bglobe { width: min(52vw, 210px); } }
/* Kerroslogo: leveys aina korkeuden mukaan, ei kutistu yläpalkissa */
.klg { width: calc(40px * 1586 / 369); flex: none; }
@media (min-width: 1280px) { .klg { width: calc(46px * 1586 / 369); } }
.logo { flex: none; min-width: max-content; }
@media (max-width: 380px) { .klg { height: 34px; width: calc(34px * 1586 / 369); } }

/* Venäjä: väljempi kirjainväli otsikoissa, ettei kyrillinen teksti tiivisty */
html[lang="ru"] h1, html[lang="ru"] h2, html[lang="ru"] h3, html[lang="ru"] .h1, html[lang="ru"] .h2,
html[lang="ru"] .home-hero__title { letter-spacing: -0.01em !important; }

/* Pallon merkit: yhdellä rivillä, siistit lasipillerit.
   Leveällä näytöllä leijuvat pallon ympärillä, puhelimella rivinä pallon alla. */
.bglobe__chips { display: contents; }
.bglobe .orb__chip { white-space: nowrap; max-width: none; line-height: 1; padding: 9px 14px 9px 11px; font-size: .8125rem; letter-spacing: .01em;
  background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / .06)); border-color: rgb(255 255 255 / .28);
  box-shadow: 0 10px 24px -12px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .25); }
.bglobe .orb__dot { width: 7px; height: 7px; flex: none; }
@media (max-width: 1023px) {
  .hero--lux .hero__visual { padding-bottom: 54px; }
  .bglobe__chips {
    position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0; z-index: 3;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    width: min(calc(100vw - 32px), 420px);
  }
  .bglobe .bglobe__chips .orb__chip { position: static; font-size: .75rem; padding: 7px 12px 7px 9px; }
  .bglobe .bglobe__chips .orb__chip--1, .bglobe .bglobe__chips .orb__chip--2, .bglobe .bglobe__chips .orb__chip--3 { left: auto; right: auto; top: auto; bottom: auto; }
}

/* =====================================================================
   Kompakti alatunniste
   ===================================================================== */
.site-footer { padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) calc(var(--space-4) + env(safe-area-inset-bottom)) !important; font-size: .875rem; }
.site-footer__grid { gap: var(--space-5) var(--space-6) !important; }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.2fr) !important; } }
.site-footer__brand { gap: var(--space-2); }
.site-footer .klg { height: 34px; width: calc(34px * 1586 / 369); }
.site-footer__tagline, .site-footer__area { font-size: .8125rem; line-height: 1.5; margin: 0; }
.site-footer__title { margin-bottom: var(--space-2) !important; font-size: .6875rem; }
.site-footer__list { gap: 0 !important; }
.site-footer__list a { min-height: 30px !important; padding-block: 2px !important; font-size: .875rem; }
.footer-contacts { display: grid; gap: 2px; }
.footer-contacts__row { gap: .55rem !important; min-height: 30px; padding-block: 2px !important; font-size: .875rem; }
.footer-contacts__row svg { width: 15px; height: 15px; }
.site-footer__bottom { margin-top: var(--space-5) !important; padding-top: var(--space-4) !important; font-size: .75rem; gap: .25rem 1.25rem; }
@media (max-width: 1023px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr !important; }
  .site-footer__brand, .site-footer__contacts { grid-column: 1 / -1; }
  .site-footer__tagline { display: none; }
  .site-footer__bottom { display: flex; flex-wrap: wrap; padding-right: 64px; }
}
/* Alatunnisteen (tumma) logo ei kutistu */
.site-footer .lgo { height: 34px; width: calc(34px * var(--lgo-ar)); flex: none; }
.site-footer .logo { min-width: max-content; }
/* Puhelin: merkkirivi voi olla kaksirivinen – tilaa alle */
@media (max-width: 1023px) { .hero--lux .hero__visual { padding-bottom: 104px; } }
/* Puhelin: vain pallo, ei merkkejä */
@media (max-width: 1023px) {
  .bglobe__chips, .bglobe .orb__chip { display: none !important; }
  .hero--lux .hero__visual { padding-bottom: 0; }
}

/* =====================================================================
   Puhelinversio kuten Horizons-luonnoksessa:
   yläpalkissa «🌐 FI», soittopainike ja valikko; herossa teksti ensin,
   pallo koristeena oikeassa alakulmassa tekstin takana.
   ===================================================================== */
.lang-pick, .header-call { display: none; }
@media (max-width: 1023px) {
  .site-header__inner { gap: 8px; }
  .logo { margin-right: auto; }
  .lang-pick { display: block; position: relative; }
  .lang-pick__btn { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px 0 12px; border-radius: 999px;
    border: 1px solid var(--color-line); background: #fff; color: var(--color-ink); font-weight: 800; font-size: .875rem; cursor: pointer; }
  .lang-pick__btn::-webkit-details-marker { display: none; }
  .lang-pick__btn svg { width: 18px; height: 18px; }
  .lang-pick__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 170px; margin: 0; padding: 6px; list-style: none;
    background: #fff; border: 1px solid var(--color-line); border-radius: 16px; box-shadow: var(--shadow-3); }
  .lang-pick__menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--color-ink); text-decoration: none; font-size: .9375rem; }
  .lang-pick__menu a b { width: 28px; font-size: .8125rem; color: var(--g-700); }
  .lang-pick__menu a[aria-current="true"] { background: var(--g-50); }
  .header-call { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line); background: #fff; color: var(--color-ink); flex: none; }
  .header-call svg { width: 19px; height: 19px; }
  .menu-toggle { width: 44px; height: 44px; border-radius: 50%; }
  .site-header .lang-switch { display: none !important; }
  .klg { height: 34px; width: calc(34px * 1586 / 369); }

  /* Hero: teksti ensin, pallo taustalla oikeassa alakulmassa */
  .home-hero, .hero--lux { position: relative; overflow: hidden; }
  .home-hero__grid, .hero--lux .container { display: block !important; position: relative; z-index: 2; }
  .home-hero__content, .hero--lux .hero__content { position: relative; z-index: 2; }
  .home-hero__visual, .hero--lux .hero__visual {
    position: absolute !important; z-index: 1; right: -70px; bottom: -70px; width: 290px; padding: 0 !important; pointer-events: none; order: 0;
  }
  .home-hero__visual .bglobe, .hero--lux .bglobe { width: 290px !important; }
  .hero--lux { min-height: 0; padding-bottom: 3.5rem; }
  .home-hero { padding-bottom: 3.5rem; }
}
@media (max-width: 380px) { .lang-pick__btn { padding: 0 10px; } .home-hero__visual, .hero--lux .hero__visual { right: -90px; } }
/* Puhelin: pallo kokonaan näkyvissä oikeassa alakulmassa */
@media (max-width: 1023px) {
  .home-hero__visual, .hero--lux .hero__visual { right: 6px !important; bottom: 10px !important; width: 230px !important; }
  .home-hero__visual .bglobe, .hero--lux .bglobe { width: 230px !important; }
}
@media (max-width: 380px) {
  .home-hero__visual, .hero--lux .hero__visual { right: 2px !important; width: 200px !important; }
  .home-hero__visual .bglobe, .hero--lux .bglobe { width: 200px !important; }
}
/* Puhelin: pallo kokonaan näkyvissä ja vapaana – tekstin ja painikkeiden alla oikealla, ei peitä mitään */
@media (max-width: 1023px) {
  .home-hero__visual, .hero--lux .hero__visual {
    position: relative !important; right: auto !important; bottom: auto !important;
    width: 210px !important; margin: 6px -6px -34px auto !important; z-index: 1;
  }
  .home-hero__visual .bglobe, .hero--lux .bglobe { width: 210px !important; }
  .home-hero, .hero--lux { padding-bottom: 2.5rem !important; }
}
/* Puhelin: sama koko, mutta pallo nostettu painikkeiden taakse (oikea alakulma) */
@media (max-width: 1023px) {
  .home-hero__visual, .hero--lux .hero__visual {
    position: absolute !important; right: 4px !important; bottom: 34px !important; margin: 0 !important;
    width: 210px !important; z-index: 1;
  }
  .home-hero__content, .hero--lux .hero__content { z-index: 2; }
  .home-hero, .hero--lux { padding-bottom: 4.5rem !important; }
}
/* Puhelin: pallo hieman alemmas ja oikeaan kulmaan (heron koko ennallaan) */
@media (max-width: 1023px) {
  .home-hero__visual, .hero--lux .hero__visual { right: -10px !important; bottom: 6px !important; }
}
@media (max-width: 1023px) {
  /* pallon sijainti lasketaan koko herosta, ei sisältösarakkeesta */
  .home-hero__grid, .hero--lux .container { position: static !important; }
  .home-hero__visual, .hero--lux .hero__visual { right: -14px !important; bottom: -12px !important; }
}

/* =====================================================================
   Mobiilin viimeistely (katselmus)
   ===================================================================== */
@media (max-width: 1023px) {
  /* Herossa pallo on painikkeiden takana: läpinäkyvät painikkeet tummemmiksi, teksti aina luettava */
  .home-hero .btn--glass, .home-hero .btn--outline, .home-hero .btn--outline-light,
  .hero--lux .btn--outline, .hero--lux .btn--outline-light, .hero--lux .btn--glass {
    background: rgb(6 30 16 / .78) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .home-hero__note, .hero--lux .hero__note { max-width: 62%; position: relative; z-index: 2; }
  .home-hero__content .actions, .hero--lux .hero__content .actions { position: relative; z-index: 2; }

  /* Kosketusalueet vähintään 44 px */
  .site-footer__list a, .footer-contacts__row, .link-arrow { min-height: 44px !important; display: inline-flex; align-items: center; }
  .footer-contacts { gap: 0; }

  /* Pienimmät tekstit 12 px:iin */
  .eyebrow, .site-footer__title, .pkg__tag, .consult__meta, .mini-steps__num, .card__meta { font-size: .75rem !important; }
}
@media (max-width: 1023px) {
  /* Ajanvaraus: hero ilman painikkeita – pallolle tilaa tekstin alle, ei tekstin päälle */
  .varaus-hero { padding-bottom: 200px !important; }
  /* Tekstin sisäiset sähköposti/puhelin-linkit: isompi kosketusalue */
  p a:not([class])[href^="mailto:"], p a:not([class])[href^="tel:"], li > a:not([class])[href^="mailto:"], li > a:not([class])[href^="tel:"] {
    display: inline-block; padding-block: 10px; margin-block: -10px;
  }
  /* Pienimmät tekstit */
  .terms-toc span, .toc span, .toc__num, th, small { font-size: .75rem !important; }
}
@media (max-width: 1023px) { .fam-block h2 a, .family h2 a, h2 > a[href^="/palvelut/"], h2 > a[href*="/palvelut/"] { display: inline-block; padding-block: 5px; } }
/* Puhelin: pallo kokonaan näkyvissä oikeassa alakulmassa (ei rajautu reunaan) */
@media (max-width: 1023px) {
  .home-hero__visual, .hero--lux .hero__visual { right: 8px !important; bottom: 10px !important; width: 190px !important; }
  .home-hero__visual .bglobe, .hero--lux .bglobe { width: 190px !important; }
  .home-hero, .hero--lux { padding-bottom: 5.5rem !important; }
  .varaus-hero { padding-bottom: 210px !important; }
}
@media (max-width: 380px) {
  .home-hero__visual, .hero--lux .hero__visual { width: 170px !important; }
  .home-hero__visual .bglobe, .hero--lux .bglobe { width: 170px !important; }
}

/* Yhteydenottopaneeli ennen alatunnistetta: kontaktit kuvakkeilla, puhelimella siisti pino */
.prefooter__contacts a { gap: .5rem; }
.prefooter__contacts a svg { width: 16px; height: 16px; flex: none; color: rgb(var(--t2, 143 214 92)); }
@media (max-width: 767px) {
  .prefooter__inner { padding: 1.75rem 1.25rem !important; gap: 1.25rem !important; text-align: left; }
  .prefooter__title { font-size: 1.4rem !important; line-height: 1.2; }
  .prefooter__lead { font-size: .9375rem; }
  .prefooter__contacts { flex-direction: column; align-items: stretch; gap: 8px !important; margin-top: 1rem !important; }
  .prefooter__sep { display: none; }
  .prefooter__contacts a {
    display: flex !important; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px;
    background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14); font-size: .9375rem;
  }
  .prefooter__contacts a span { overflow-wrap: anywhere; }
  .prefooter__actions { flex-direction: column; gap: 10px !important; }
  .prefooter__actions .btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   Alatunniste: yhteystiedot rivissä (kuvake + teksti), ei rivinvaihtoa kuvakkeen jälkeen
   ===================================================================== */
.site-footer li a[href^="mailto:"], .site-footer li a[href^="tel:"] { margin-block: 0 !important; padding-block: 0 !important; }
.footer-contacts__row { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: .6rem !important; min-height: 40px; padding-block: 8px !important; }
.footer-contacts__row svg { flex: none; margin-top: 3px; }
.footer-contacts__row > span { min-width: 0; overflow-wrap: anywhere; }

/* =====================================================================
   Kaikki herot samaan premium-ilmeeseen (etusivu = alasivut)
   - sama tausta: ruudukko + kaksi valoa + hidas liikkuva valokeila
   - sama yläotsikko (eyebrow) ilman laatikkoa, sama hopeinen hiusviiva alhaalla
   ===================================================================== */
.home-hero__bg, .hero--lux .hero__bg, .hero--lux.hero--plain .hero__bg {
  background:
    var(--grid-lines),
    radial-gradient(48% 70% at 80% 48%, rgb(var(--t, 63 165 22) / .42) 0%, transparent 70%),
    radial-gradient(55% 80% at 0% 100%, rgb(var(--t, 63 165 22) / .16) 0%, transparent 70%),
    linear-gradient(135deg, rgb(var(--tb, 12 58 32)) 0%, #0a2d19 55%, #061c10 100%) !important;
}
.home-hero, .hero--lux { position: relative; isolation: isolate; }
.home-hero::before, .hero--lux .hero__bg::after {
  content: ""; position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none; display: block !important;
  background: radial-gradient(30% 40% at 50% 50%, rgb(var(--t2, 143 214 92) / .14), transparent 70%);
  animation: hero-sweep 16s ease-in-out infinite alternate;
}
.home-hero::before { z-index: -1; }
@keyframes hero-sweep { from { transform: translate(-25%, -10%); } to { transform: translate(25%, 12%); } }
.home-hero::after, .hero--lux::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgb(var(--t2, 143 214 92) / .6), rgb(220 230 225 / .75), rgb(var(--t2, 143 214 92) / .6), transparent);
}
/* yhtenäinen yläotsikko */
.home-hero .eyebrow, .hero--lux .eyebrow {
  background: none !important; border: 0 !important; padding: 0 !important;
  color: rgb(var(--t2, 143 214 92)) !important; letter-spacing: .2em; font-weight: 800;
  display: inline-flex; align-items: center; gap: .6em;
}
.home-hero .eyebrow::before, .hero--lux .eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: .9;
}
/* yhtenäinen otsikko ja ingressi */
.hero--lux .h1, .home-hero__title { letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }
.hero--lux .hero__lead, .home-hero__lead { color: rgb(255 255 255 / .84); }
.hero--lux .breadcrumbs { font-size: .875rem; }
/* pehmeä sisääntulo kaikkiin */
@media (prefers-reduced-motion: no-preference) {
  .hero--lux .hero__content > *, .home-hero__content > * { animation: rise-in .8s var(--ease-out) both; }
  .hero--lux .hero__content > :nth-child(2), .home-hero__content > :nth-child(2) { animation-delay: .08s; }
  .hero--lux .hero__content > :nth-child(3), .home-hero__content > :nth-child(3) { animation-delay: .16s; }
  .hero--lux .hero__content > :nth-child(4), .home-hero__content > :nth-child(4) { animation-delay: .24s; }
  .hero--lux .hero__content > :nth-child(n+5), .home-hero__content > :nth-child(n+5) { animation-delay: .32s; }
}
@media (prefers-reduced-motion: reduce) { .home-hero::before, .hero--lux .hero__bg::after { animation: none; } }
/* Korjaus: tekstilinkkien kosketusalue-sääntö ei koske paneelia eikä alatunnistetta */
.prefooter .prefooter__contacts a { margin: 0 !important; }
@media (max-width: 767px) { .prefooter .prefooter__contacts a { padding: 0 14px !important; } }
.site-footer .footer-contacts a.footer-contacts__row, .site-footer .footer-contacts span.footer-contacts__row {
  margin: 0 !important; padding: 9px 0 !important; min-height: 0 !important; display: flex !important;
}

/* Kapeat näytöt: pitkä yksittäinen sana (esim. ru «конфиденциальности») ei saa valua heron yli */
@media (max-width: 480px) {
  .hero--page .h1 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  html[lang="ru"] .hero--page .h1, html[lang="et"] .hero--page .h1 { font-size: clamp(1.75rem, 1.2rem + 2.8vw, 3.4rem); }
}

/* Alasivujen herojen painikkeet täsmälleen kuten etusivulla: valkoinen + lasipainike, sama koko */
.hero--lux .actions { gap: var(--space-3); }
.hero--lux .btn--primary {
  --btn-bg: #fff; --btn-bg-hover: var(--g-50); --btn-fg: var(--g-900);
  --btn-shadow: 0 8px 22px -10px rgb(0 0 0 / .45); --btn-shadow-hover: 0 14px 28px -12px rgb(0 0 0 / .5);
}
.hero--lux .btn--outline, .hero--lux .btn--outline-light, .hero--lux .btn--glass {
  --btn-bg: rgb(255 255 255 / .08); --btn-bg-hover: rgb(255 255 255 / .16); --btn-fg: #fff;
  --btn-border: rgb(255 255 255 / .28); --btn-border-hover: rgb(255 255 255 / .5); --btn-shadow: none;
}
@media (max-width: 479px) { .hero--lux .actions .btn { width: 100%; } }

/* Yhteystiedot-sivun pikakortit: kaikki samanlevyisiä, kuvake vasemmalla */
.quick-contact > a, .quick-contact > div, a.quick-contact, div.quick-contact { display: flex !important; align-items: center; gap: 14px; width: 100%; margin: 0 !important; padding: 14px 16px !important; }

/* =====================================================================
   Puhelinversion herot kuten Hostinger-luonnoksessa (kaikki sivut, kaikki kielet):
   iso pallo oikeassa alakulmassa osittain reunan yli, painikkeiden takana;
   isot pyöristetyt painikkeet, vaalea lasipainike, yläotsikko ilman viivaa.
   ===================================================================== */
@media (max-width: 1023px) {
  .home-hero .eyebrow::before, .hero--lux .eyebrow::before { display: none; }
  .home-hero__title, .hero--lux .h1 { font-size: clamp(2.2rem, 1.2rem + 5vw, 3rem) !important; line-height: 1.05; }
  .home-hero__lead, .hero--lux .hero__lead { font-size: 1.05rem; }
  .home-hero .actions, .hero--lux .actions { display: grid !important; gap: 14px !important; }
  .home-hero .actions .btn, .hero--lux .actions .btn {
    width: 100%; min-height: 62px; border-radius: 14px; font-size: .95rem; letter-spacing: .02em;
  }
  /* vaalea lasipainike pallon päällä */
  .home-hero .btn--glass, .home-hero .btn--outline, .home-hero .btn--outline-light,
  .hero--lux .btn--glass, .hero--lux .btn--outline, .hero--lux .btn--outline-light {
    background: rgb(255 255 255 / .14) !important; border-color: rgb(255 255 255 / .28) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  }
  /* pallo: isompi, oikeassa alakulmassa osittain reunan yli */
  .home-hero__visual, .hero--lux .hero__visual {
    right: -70px !important; bottom: -60px !important; width: 300px !important;
  }
  .home-hero__visual .bglobe, .hero--lux .bglobe { width: 300px !important; }
  .home-hero, .hero--lux { padding-bottom: 3.5rem !important; overflow: hidden; }
  .varaus-hero { padding-bottom: 170px !important; }
  .home-hero__note, .hero--lux .hero__note { max-width: 70%; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .14); }
}
@media (max-width: 380px) {
  .home-hero__visual, .hero--lux .hero__visual { right: -90px !important; width: 270px !important; }
  .home-hero__visual .bglobe, .hero--lux .bglobe { width: 270px !important; }
}
@media (max-width: 1023px) {
  .home-hero .actions, .hero--lux .actions { justify-items: stretch !important; align-items: stretch; }
  .home-hero .actions > *, .hero--lux .actions > * { width: 100% !important; max-width: none !important; }
  /* lasipainike sumentaa pallon taakseen kuten luonnoksessa – teksti pysyy luettavana */
  .home-hero .actions .btn:not(.btn--light):not(.btn--primary), .hero--lux .actions .btn:not(.btn--light):not(.btn--primary) {
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important; backdrop-filter: blur(16px) saturate(150%) !important;
    background: rgb(40 120 50 / .32) !important; position: relative; z-index: 3; isolation: isolate;
  }
  .home-hero__visual, .hero--lux .hero__visual { bottom: -80px !important; }
}
@media (max-width: 1023px) { .home-hero__content > .actions, .hero--lux .hero__content > .actions { justify-self: stretch !important; width: 100% !important; } }

/* =====================================================================
   Rästikirjanpito: punainen pallo kiertää ulkorataa (kirjanpito «sekaisin»),
   siirtyy sisärataan, muuttuu vihreäksi ja liittyy palloon (kirjanpito kuntoon).
   ===================================================================== */
.bglobe { container-type: inline-size; }
.bglobe__fix { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 4; pointer-events: none; }
.bglobe__ball {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb3a8, #e5392b 55%, #9e1c12);
  box-shadow: 0 0 14px 4px rgb(229 57 43 / .65);
  transform: rotate(0deg) translateY(-50cqw);
}
.bglobe__merge { position: absolute; inset: 14%; border-radius: 50%; z-index: 2; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 0 rgb(143 214 92 / .0), inset 0 0 40px rgb(170 255 120 / .55); }
@media (prefers-reduced-motion: no-preference) {
  .bglobe__ball { animation: rasti-ball 10s cubic-bezier(.45,.05,.35,1) 1.6s infinite both; }
  .bglobe__merge { animation: rasti-merge 10s ease 1.6s infinite both; }
}
@keyframes rasti-ball {
  0%   { transform: rotate(0deg)   translateY(-50cqw) scale(1); background: radial-gradient(circle at 35% 30%, #ffb3a8, #e5392b 55%, #9e1c12); box-shadow: 0 0 14px 4px rgb(229 57 43 / .65); opacity: 1; }
  38%  { transform: rotate(560deg) translateY(-50cqw) scale(1); box-shadow: 0 0 18px 6px rgb(229 57 43 / .75); }
  52%  { transform: rotate(700deg) translateY(-43cqw) scale(1.05); background: radial-gradient(circle at 35% 30%, #ffe0a0, #e9a23b 55%, #9a5a12); box-shadow: 0 0 14px 4px rgb(233 162 59 / .6); }
  66%  { transform: rotate(860deg) translateY(-43cqw) scale(1); background: radial-gradient(circle at 35% 30%, #d8ffbf, #5fcf2e 55%, #2b7a10); box-shadow: 0 0 16px 5px rgb(120 220 70 / .7); }
  80%  { transform: rotate(960deg) translateY(-36cqw) scale(.9); background: radial-gradient(circle at 35% 30%, #d8ffbf, #5fcf2e 55%, #2b7a10); opacity: 1; }
  86%  { transform: rotate(990deg) translateY(-34cqw) scale(0); opacity: 0; }
  100% { transform: rotate(990deg) translateY(-34cqw) scale(0); opacity: 0; }
}
@keyframes rasti-merge { 0%, 82% { opacity: 0; } 87% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bglobe__ball { transform: rotate(40deg) translateY(-43cqw); background: radial-gradient(circle at 35% 30%, #d8ffbf, #5fcf2e 55%, #2b7a10); } }

/* Puhelin: pallo kokonaan näkyvissä (luonnoksen painikkeet säilyvät) */
@media (max-width: 1023px) {
  .home-hero__visual, .hero--lux .hero__visual { right: 10px !important; bottom: 12px !important; width: 210px !important; }
  .home-hero__visual .bglobe, .hero--lux .bglobe { width: 210px !important; }
  .home-hero, .hero--lux { padding-bottom: 7rem !important; }
  .varaus-hero { padding-bottom: 240px !important; }
}
@media (max-width: 380px) {
  .home-hero__visual, .hero--lux .hero__visual { right: 6px !important; width: 180px !important; }
  .home-hero__visual .bglobe, .hero--lux .bglobe { width: 180px !important; }
}
@media (max-width: 1023px) { .home-hero__note, .hero--lux .hero__note { max-width: 52% !important; } }

/* =====================================================================
   Rivitys kaikilla kielillä: otsikot tasapainotetusti (ei yksinäisiä sanoja),
   riittävä riviväli ääkkösille ja kyrillisille (ei päällekkäisyyttä),
   kappaleet ilman lesksanoja rivin lopussa.
   ===================================================================== */
h1, h2, h3, .h1, .h2, .h3, .home-hero__title, .card__title, .prefooter__title, .site-footer__slogan { text-wrap: balance; hyphens: manual; overflow-wrap: normal; word-break: normal; }
p, li, .hero__lead, .home-hero__lead, .lead { text-wrap: pretty; }
.home-hero__title { line-height: 1.1 !important; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4rem) !important; max-width: 13em; }
.hero--lux .h1 { line-height: 1.1 !important; }
h2, .h2 { line-height: 1.15; }
@media (max-width: 1023px) {
  .home-hero__title, .hero--lux .h1 { line-height: 1.1 !important; }
}
/* lauseen sisällä ei katkaista ennen pistettä tms. */
.home-hero__title .accent { display: block; }

/* =====================================================================
   Pallon tarinat (sama idea kuin rästikirjanpidossa):
   kirjaus   – harmaat kuitit kiertävät sisään yksi kerrallaan, muuttuvat vihreiksi ja liittyvät palloon
   palkat    – kolme valkoista (työntekijät) tulevat vuorotellen, palkka maksettu = vihreä
   kirje     – oranssi kirje viranomaiselta, vastattu = vihreä
   useat     – kolme eriväristä työmaata kiertävät yhdessä ja kootaan yhdeksi
   raja      – sininen (ulkomaa) siirtyy sisäradalle ja muuttuu vihreäksi
   data      – paperi → digi: nopea pienten pisteiden virta palloon
   kolikko   – kultainen kolikko asettuu (hinta selvä)
   uusi      – uusi pallo syntyy ja jää kiertämään (uusi yritys / uusi tiimiläinen)
   aika      – pallo kiertää ja pysähtyy klo 12 kohdalle sykkimään (aika varattu)
   viesti    – viesti lähtee palloon ja vastaus palaa vihreänä
   ===================================================================== */
.bglobe__story { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 4; pointer-events: none; }
.st-ball { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; opacity: 0;
  --c1: radial-gradient(circle at 35% 30%, #fff, #dfe6e1 55%, #9aa8a0); --g1: rgb(255 255 255 / .55);
  --c2: radial-gradient(circle at 35% 30%, #d8ffbf, #5fcf2e 55%, #2b7a10); --g2: rgb(120 220 70 / .7);
  --a0: calc(var(--i) * 120deg); --dur: 9s; --gap: 3s;
  background: var(--c1); box-shadow: 0 0 12px 4px var(--g1);
}
.st-kirjaus .st-ball { --c1: radial-gradient(circle at 35% 30%, #fff, #c9d1cc 55%, #8a958e); --dur: 8s; --gap: 2s; --a0: calc(var(--i) * 90deg); width: 13px; height: 13px; left: -6.5px; top: -6.5px; }
.st-palkat .st-ball { --gap: 3s; }
.st-kirje .st-ball { --c1: radial-gradient(circle at 35% 30%, #ffe0a8, #f0a030 55%, #9a5a10); --g1: rgb(240 160 48 / .65); }
.st-useat .st-ball:nth-child(1) { --c1: radial-gradient(circle at 35% 30%, #ffe0a8, #f0a030 55%, #9a5a10); --g1: rgb(240 160 48 / .6); }
.st-useat .st-ball:nth-child(2) { --c1: radial-gradient(circle at 35% 30%, #cfe2ff, #3b82f6 55%, #1d4ea8); --g1: rgb(59 130 246 / .6); }
.st-useat .st-ball:nth-child(3) { --c1: radial-gradient(circle at 35% 30%, #ffb3a8, #e5392b 55%, #9e1c12); --g1: rgb(229 57 43 / .6); }
.st-useat .st-ball { --gap: 0s; }
.st-raja .st-ball { --c1: radial-gradient(circle at 35% 30%, #cfe2ff, #3b82f6 55%, #1d4ea8); --g1: rgb(59 130 246 / .65); }
.st-kolikko .st-ball { --c1: radial-gradient(circle at 35% 30%, #fff3c0, #f2c94c 55%, #a07a10); --g1: rgb(242 201 76 / .7); --c2: radial-gradient(circle at 35% 30%, #fff3c0, #f2c94c 55%, #a07a10); --g2: rgb(242 201 76 / .8); }
.st-data .st-ball { width: 7px; height: 7px; left: -3.5px; top: -3.5px; --dur: 4s; --gap: .66s; --a0: calc(var(--i) * 60deg); }

@media (prefers-reduced-motion: no-preference) {
  .st-kirjaus .st-ball, .st-palkat .st-ball, .st-kirje .st-ball, .st-useat .st-ball, .st-raja .st-ball, .st-kolikko .st-ball {
    animation: st-absorb var(--dur) cubic-bezier(.45,.05,.35,1) infinite both; animation-delay: calc(1.6s + var(--i) * var(--gap));
  }
  .st-data .st-ball { animation: st-stream var(--dur) cubic-bezier(.5,0,.3,1) infinite both; animation-delay: calc(1.6s + var(--i) * var(--gap)); }
  .st-uusi .st-ball { animation: st-born 2.4s cubic-bezier(.2,1.3,.4,1) 1.8s both, st-orbit 9s linear 4.2s infinite; }
  .st-aika .st-ball { animation: st-clock 8s cubic-bezier(.6,0,.3,1) 1.6s infinite both; }
  .st-viesti .st-ball { animation: st-ping 7s cubic-bezier(.45,.05,.35,1) 1.6s infinite both; }
  .st-merge { animation: rasti-merge var(--mdur, 9s) ease 1.6s infinite both; }
  .st-merge.st-kirjaus { --mdur: 2s; } .st-merge.st-palkat { --mdur: 3s; } .st-merge.st-data { --mdur: .66s; }
  .st-merge.st-uusi, .st-merge.st-aika { animation: none; }
}
@keyframes st-absorb {
  0%   { opacity: 0; transform: rotate(var(--a0)) translateY(-50cqw) scale(.6); background: var(--c1); box-shadow: 0 0 12px 4px var(--g1); }
  6%   { opacity: 1; transform: rotate(calc(var(--a0) + 30deg)) translateY(-50cqw) scale(1); }
  40%  { transform: rotate(calc(var(--a0) + 420deg)) translateY(-50cqw); background: var(--c1); }
  55%  { transform: rotate(calc(var(--a0) + 560deg)) translateY(-43cqw); }
  68%  { transform: rotate(calc(var(--a0) + 680deg)) translateY(-43cqw); background: var(--c2); box-shadow: 0 0 14px 5px var(--g2); }
  80%  { opacity: 1; transform: rotate(calc(var(--a0) + 760deg)) translateY(-36cqw) scale(.9); background: var(--c2); }
  86%, 100% { opacity: 0; transform: rotate(calc(var(--a0) + 790deg)) translateY(-34cqw) scale(0); background: var(--c2); }
}
@keyframes st-stream {
  0%   { opacity: 0; transform: rotate(var(--a0)) translateY(-50cqw); background: var(--c1); }
  10%  { opacity: 1; }
  70%  { opacity: 1; transform: rotate(calc(var(--a0) + 260deg)) translateY(-36cqw); background: var(--c2); box-shadow: 0 0 10px 3px var(--g2); }
  80%, 100% { opacity: 0; transform: rotate(calc(var(--a0) + 300deg)) translateY(-33cqw) scale(0); }
}
@keyframes st-born { 0% { opacity: 0; transform: rotate(-30deg) translateY(-36cqw) scale(0); background: var(--c2); box-shadow: 0 0 24px 10px var(--g2); }
  60% { opacity: 1; transform: rotate(0deg) translateY(-43cqw) scale(1.4); } 100% { opacity: 1; transform: rotate(30deg) translateY(-43cqw) scale(1); background: var(--c2); box-shadow: 0 0 14px 5px var(--g2); } }
@keyframes st-orbit { from { opacity: 1; transform: rotate(30deg) translateY(-43cqw); background: var(--c2); box-shadow: 0 0 14px 5px var(--g2); } to { opacity: 1; transform: rotate(390deg) translateY(-43cqw); background: var(--c2); box-shadow: 0 0 14px 5px var(--g2); } }
@keyframes st-clock {
  0%   { opacity: 0; transform: rotate(-200deg) translateY(-50cqw); background: var(--c1); }
  8%   { opacity: 1; }
  55%  { transform: rotate(0deg) translateY(-50cqw); background: var(--c1); box-shadow: 0 0 12px 4px var(--g1); }
  62%  { transform: rotate(0deg) translateY(-50cqw) scale(1.5); background: var(--c2); box-shadow: 0 0 0 10px rgb(143 214 92 / .25), 0 0 18px 6px var(--g2); }
  70%  { transform: rotate(0deg) translateY(-50cqw) scale(1); background: var(--c2); box-shadow: 0 0 0 18px rgb(143 214 92 / 0), 0 0 14px 5px var(--g2); }
  88%  { opacity: 1; transform: rotate(0deg) translateY(-50cqw); background: var(--c2); }
  100% { opacity: 0; transform: rotate(40deg) translateY(-50cqw); background: var(--c2); }
}
@keyframes st-ping {
  0%   { opacity: 0; transform: rotate(-40deg) translateY(-50cqw); background: var(--c1); box-shadow: 0 0 12px 4px var(--g1); }
  8%   { opacity: 1; }
  40%  { opacity: 1; transform: rotate(10deg) translateY(-35cqw) scale(.8); background: var(--c1); }
  48%  { transform: rotate(14deg) translateY(-35cqw) scale(.6); background: var(--c2); box-shadow: 0 0 16px 6px var(--g2); }
  85%  { opacity: 1; transform: rotate(60deg) translateY(-52cqw) scale(1); background: var(--c2); }
  100% { opacity: 0; transform: rotate(70deg) translateY(-56cqw) scale(.8); background: var(--c2); }
}
@media (prefers-reduced-motion: reduce) { .st-ball { opacity: 1; transform: rotate(calc(var(--a0) + 40deg)) translateY(-43cqw); background: var(--c2); } }
.st-ball { width: 18px; height: 18px; left: -9px; top: -9px; }
.st-kirjaus .st-ball { width: 15px; height: 15px; left: -7.5px; top: -7.5px; }
.st-data .st-ball { width: 8px; height: 8px; left: -4px; top: -4px; }

/* Palvelukortit: ei vajaata riviä. 3 sarakkeessa (6-osainen ruudukko):
   5 → 3 + 2, 8 → 3 + 3 + 2 (kaksi alinta puolikkaina), 4 → 2 + 2, 7 → 2 + 3 + 2, 10 → 2 + 3 + 3 + 2.
   2 sarakkeessa pariton viimeinen kortti koko leveydelle. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .sub-grid > li:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .sub-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sub-grid > li { grid-column: span 2; }
  .sub-grid > li:nth-last-child(2):nth-child(3n + 1),
  .sub-grid > li:nth-last-child(2):nth-child(3n + 1) + li,
  .sub-grid > li:first-child:nth-last-child(3n + 1),
  .sub-grid > li:first-child:nth-last-child(3n + 1) + li,
  .sub-grid > li:last-child:nth-child(3n + 1),
  .sub-grid > li:nth-last-child(2):nth-child(3n) { grid-column: span 3; }
  .sub-grid > li:only-child { grid-column: 1 / -1; }
}

/* Palveluperheen otsikon laatta: kirjaimen sijaan palvelun ikoni */
.fam-head__letter svg { width: 26px; height: 26px; }
@media (max-width: 640px) { .fam-head__letter svg { width: 22px; height: 22px; } }

/* Yhteystiedot: kartan vieressä osoite, puhelin, sähköposti ja aukioloajat ikoneineen */
.map-card { border: 1px solid rgb(15 61 36 / 0.08); box-shadow: 0 24px 48px -32px rgb(15 61 36 / 0.35); }
.map-card__info { align-content: center; gap: var(--space-4); }
.map-facts { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.map-facts li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.75rem; align-items: center; line-height: 1.45; color: var(--color-ink); }
.map-facts li:first-child { align-items: start; }
.map-facts svg { width: 2.25rem; height: 2.25rem; padding: 0.5rem; border-radius: 0.7rem; background: var(--g-50, #eef6ef); color: var(--g-700, #1d5c36); fill: none; stroke: currentColor; stroke-width: 1.8; }
.map-facts a { color: inherit; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.map-facts a:hover { color: var(--g-700, #1d5c36); text-decoration: underline; }
.map-card__route { justify-self: start; }
.map-card .map { min-height: 22rem; border-radius: var(--radius-lg, 1rem); overflow: hidden; }
@media (max-width: 899px) { .map-card .map { min-height: 18rem; } }

/* =====================================================================
   Korttien globusverkko: ohut pallon verkko ja kiertorata oikeassa yläkulmassa
   + pehmeä vihreä hehku. Animaatio brändin hengessä:
   - kortin tullessa näkyviin verkko kääntyy paikalleen kuin pyörivä maapallo;
   - hiiren alla pallo kääntyy hieman ja valojuova kulkee sen yli («aamunkoitto»).
   Värit: vaaleilla korteilla tummanvihreä, tummilla vaaleanvihreä (--gl-ink).
   ===================================================================== */
:root {
  --gl-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-34 -34 268 268' fill='none' stroke='black' stroke-width='1.25'%3E%3Ccircle cx='100' cy='100' r='96'/%3E%3Cellipse cx='100' cy='100' rx='34' ry='96'/%3E%3Cellipse cx='100' cy='100' rx='68' ry='96'/%3E%3Cpath d='M100 4v192M4 100h192M12.7 60h174.6M12.7 140h174.6M36.5 28h127M36.5 172h127'/%3E%3Cellipse cx='100' cy='100' rx='130' ry='38' transform='rotate(-22 100 100)' stroke-width='1.6'/%3E%3Ccircle cx='219' cy='52' r='5' fill='black' stroke='none'/%3E%3C/svg%3E");
}
:is(.fam, .sub, .pkg, .principle, .term, .consult, .svc-aside, .quick-contact a, .quick-contact > div) {
  position: relative; isolation: isolate; overflow: hidden;
  --gl-ink: var(--g-600);
}
:is(.fam, .sub, .pkg, .principle, .term, .consult, .svc-aside, .quick-contact a, .quick-contact > div)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -78px; right: -78px; width: 250px; aspect-ratio: 1;
  background: var(--gl-ink);
  opacity: var(--gl-o, 0.15);
  -webkit-mask-image: var(--gl-svg), radial-gradient(closest-side, rgb(0 0 0 / 0.95), rgb(0 0 0 / 0.35) 55%, transparent);
          mask-image: var(--gl-svg), radial-gradient(closest-side, rgb(0 0 0 / 0.95), rgb(0 0 0 / 0.35) 55%, transparent);
  -webkit-mask-size: 100% 100%, 62% 62%;
          mask-size: 100% 100%, 62% 62%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center, 78% 22%;
          mask-position: center, 78% 22%;
  transform: rotate(-14deg);
  transition: transform 1.1s var(--ease-out, cubic-bezier(.2,.7,.2,1)), opacity 0.6s ease,
              -webkit-mask-position 1.1s var(--ease-out, ease), mask-position 1.1s var(--ease-out, ease);
}
/* Kortin vanha kulmarengas korvautuu globuksella */
.fam::before { content: none; }
/* Tummat kortit: vaalea limenvihreä verkko ja selvästi näkyvä hehku */
:is(.pkg--dark, .principle:nth-child(2), .quick-contact--primary a,
    .fam-grid > li:nth-child(4) .fam, .fam-grid > li:nth-child(5) .fam) { --gl-ink: #c6f07c; --gl-o: 0.3; --gl-oh: 0.5; }
.fam { --gl-ink: var(--f-cta); }
:is(.pkg--dark, .principle:nth-child(2), .quick-contact--primary a,
    .fam-grid > li:nth-child(4) .fam, .fam-grid > li:nth-child(5) .fam)::after { opacity: var(--gl-o); mix-blend-mode: screen; }
@media (max-width: 1023px) {
  .fam-grid > li:nth-child(4) .fam, .fam-grid > li:nth-child(5) .fam { --gl-ink: var(--f-cta); --gl-o: 0.15; --gl-oh: 0.26; }
  .fam-grid > li:nth-child(4) .fam::after { mix-blend-mode: normal; }
  .fam-grid > li:nth-child(even) .fam { --gl-ink: #c6f07c; --gl-o: 0.3; --gl-oh: 0.5; }
  .fam-grid > li:nth-child(even) .fam::after { opacity: var(--gl-o); mix-blend-mode: screen; }
}
/* Hiiren alla: pallo kääntyy, valojuova kulkee yli */
@media (hover: hover) and (pointer: fine) {
  :is(.fam, .sub, .pkg, .principle, .term, .consult, .svc-aside, .quick-contact a):hover::after {
    transform: rotate(4deg) scale(1.04);
    opacity: var(--gl-oh, 0.26);
    -webkit-mask-position: center, 18% 82%;
            mask-position: center, 18% 82%;
  }
}
/* Näkyviin tullessa: verkko kääntyy paikalleen */
@keyframes gl-in {
  from { transform: rotate(-60deg) scale(0.82); opacity: 0; }
}
:is(.fam, .principle, .term, .svc-aside).is-revealed::after,
.is-revealed :is(.sub, .pkg, .consult, .quick-contact a, .quick-contact > div)::after {
  animation: gl-in 1.6s var(--ease-out, cubic-bezier(.2,.7,.2,1)) 0.15s backwards;
}
@media (max-width: 640px) {
  :is(.fam, .sub, .pkg, .principle, .term, .consult, .svc-aside, .quick-contact a, .quick-contact > div)::after { width: 190px; top: -60px; right: -60px; }
  :is(.quick-contact a, .quick-contact > div)::after { width: 150px; top: -55px; right: -55px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.fam, .sub, .pkg, .principle, .term, .consult, .svc-aside, .quick-contact a, .quick-contact > div)::after { transition: none; animation: none !important; }
}