@font-face {
  font-family: 'League Spartan';
  src: url('/assets/fonts/league-spartan-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: normal;
  font-style: normal;
  font-display: block;
}

/* A broad, heavy headline sits against the lower edge of the opening image. */
.hero-copy { left: 2.5vw; right: 2.5vw; bottom: 83px; }
.hero-lockup { width: max-content; max-width: 100%; margin-inline: auto; text-align: left; }
.hero-copy .eyebrow { margin-left: 0; margin-bottom: 26px; font-size: 17.05px; }
.hero-copy h1 {
  font-family: 'League Spartan', 'Arial Black', sans-serif;
  font-weight: 900;
  font-stretch: normal;
  font-variation-settings: 'wght' 900;
  font-size: 12.7vw;
  letter-spacing: -.04em;
  line-height: .85;
  white-space: nowrap;
}
html[lang=fi] .hero-copy { left: var(--gutter); right: var(--gutter); bottom: 70px; text-align: left; transform-origin: left bottom; }
html[lang=fi] .hero-lockup { margin-inline: 0; }
html[lang=fi] .hero-copy .eyebrow { margin-left: 0; margin-bottom: 16px; }
html[lang=fi] .hero-copy h1 { font-size: 8.9vw; line-height: .95; text-transform: none; }

/* Green leads the edge colour; blue and lilac balance it around a white centre. */
:root {
  color-scheme: light;
  --page-surface: #ffffff;
  --ink: #282a23;
  --line: #2d41332b;
  --muted: #505c56;
  --page-edge-wash:
    radial-gradient(ellipse 70% 110% at -10% 2%, #9dc8b68c 0%, #adcfc17b 12%, #c4dfd154 30%, #e2efe628 50%, #e3f1e900 78%),
    radial-gradient(ellipse 64% 96% at 112% 4%, #abcbed81 0%, #bad5ed6c 12%, #c8def246 30%, #e3edf920 50%, #d9e9fa00 78%),
    radial-gradient(ellipse 68% 98% at -14% 112%, #a2cbbb81 0%, #b7d7c96c 12%, #cce3d846 30%, #e4f0e920 50%, #e2f2ed00 78%),
    radial-gradient(ellipse 64% 94% at 114% 108%, #cbc2e681 0%, #d2caeb6c 12%, #e0d9f046 30%, #efebf820 50%, #eeeafa00 78%);
}
body, .opening { background: var(--page-surface); }
.opening-stage {
  background-color: var(--page-surface);
  background-image: var(--page-edge-wash);
  background-repeat: no-repeat;
}
.skip-link { background: #f2f3ed; color: #202524; }
button:focus-visible, a:focus-visible { outline-color: #415439; }

/* The rolling totals form one quiet line directly beneath the navigation. */
.opening-stats {
  position: absolute; z-index: 4;
  top: var(--stats-top, 84px); right: var(--stats-right, 36px); left: auto; bottom: auto;
  width: auto; max-width: calc(100% - 56px); margin: 0;
  display: flex; align-items: center; gap: 20px;
  color: var(--ink); opacity: 0;
  transform: translateY(calc((1 - var(--stats-p, 0)) * 8px));
  pointer-events: none;
}
.stat { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 20px; }
.stat-label { order: 2; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--muted); }
.stat-value { order: 1; margin: 0; font-family: 'League Spartan', sans-serif; font-weight: 650; font-size: 28px; line-height: 1; letter-spacing: -.045em; }
.stat-link { position: absolute; inset: -8px 0; z-index: 2; pointer-events: auto; border-radius: 3px; }
.stat-digits { display: flex; }
.stat-digit { display: block; width: .57em; height: 1em; overflow: hidden; }
.digit-reel { display: block; transform: translateY(0); transition: transform 1.5s cubic-bezier(.18,.75,.16,1); transition-delay: var(--delay, 0ms); }
.digit-step { display: flex; align-items: center; justify-content: center; height: 1em; }
.opening-stats.is-counted .digit-reel { transform: translateY(calc(var(--digit) * -1em)); }
body:has(.site-header.mega-open) .opening-stats { visibility: hidden; }

.collection-details { display: contents; }
.collection-statement {
  position: absolute; z-index: 4; isolation: isolate;
  left: 9.2%; bottom: 4.8%; width: max-content; max-width: 55%; margin: 0;
  font-family: 'League Spartan', 'Arial Black', sans-serif;
  font-weight: 900; font-size: clamp(28px, 3.3vw, 76px);
  letter-spacing: -.035em; line-height: 1.06; color: #171b19;
  opacity: var(--details-p, 0);
  transform: translateY(calc((1 - var(--details-p, 0)) * 16px));
  pointer-events: none;
}
.collection-statement::before {
  content: ''; position: absolute; z-index: -1; inset: -16px -26px;
  border-radius: 100px; background: #ffffff3d; filter: blur(18px);
}
@media (max-width: 1160px) {
  .opening-stats { right: var(--stats-right, 31px); }
}
@media (max-width: 650px) {
  .collection-details {
    position: absolute; z-index: 4;
    left: 3%; right: 3%; bottom: max(24px, env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 49% 47%; gap: 4%; align-items: start;
  }
  .opening-stats {
    position: relative; inset: auto; width: 100%; max-width: none;
    display: grid; grid-template-columns: max-content 1fr;
    align-items: stretch; gap: clamp(9px, 2.4vw, 16px);
  }
  .stat { flex-direction: column; align-items: flex-start; gap: 6px; }
  .stat + .stat { padding-left: clamp(9px, 2.4vw, 16px); }
  .stat-value { font-size: clamp(25px, 7.2vw, 46px); }
  .stat-label { font-size: clamp(9px, 2.65vw, 17px); white-space: nowrap; }
  .collection-statement {
    position: relative; inset: auto; width: auto; max-width: none;
    font-size: clamp(18px, 5.55vw, 36px); line-height: 1.12;
    transform: translateY(calc((1 - var(--details-p, 0)) * 8px));
  }
  .collection-statement span { display: block; white-space: nowrap; }
  .collection-statement::before { display: none; }
}
@media (max-height: 600px) and (min-width: 651px) {
  .opening-stats { top: calc(var(--stats-top, 84px) - 6px); gap: 14px; }
  .stat + .stat { padding-left: 14px; }
  .stat-value { font-size: 22px; }
  .stat-label { font-size: 11px; }
  .collection-statement { bottom: 3%; font-size: clamp(24px, 3vw, 42px); }
}
@media (min-width: 650.01px) and (max-width: 760px) and (max-height: 480px) {
  .opening-stats { gap: 8px; }
  .stat { gap: 4px; }
  .stat + .stat { padding-left: 8px; }
  .stat-value { font-size: 18px; }
  .stat-label { font-size: 10px; white-space: nowrap; }
}
@media (max-height: 540px) and (max-width: 650px) {
  .collection-details { bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .opening-stage { padding-top: 150px; }
  .opening-stats { opacity: 1 !important; transform: none; }
  .digit-reel { transform: translateY(calc(var(--digit) * -1em)); transition: none; }
  .collection-statement { position: static; grid-column: 1 / -1; order: 4; width: auto; max-width: none; margin-top: 24px; font-size: clamp(26px, 4vw, 60px); opacity: 1; transform: none; }
}
@media (max-width: 650px) and (prefers-reduced-motion: reduce) {
  .opening-stage { padding-top: 110px; }
  .collection-details {
    position: static; grid-column: 1 / -1; order: 4; margin-top: 24px;
    width: 100%;
  }
  .collection-statement {
    grid-column: auto; order: 0; margin: 0;
    font-size: clamp(18px, 5.55vw, 36px);
  }
  .opening-stats {
    position: static; grid-column: auto; order: 1;
    width: 100%; max-width: none; margin: 0;
  }
}

/* A tall central photograph anchors a staggered seven-card composition. */
.main-photo {
  left: calc(14px + var(--stage-p) * (37.5% - 14px));
  top: calc(14px + var(--stage-p) * (21% - 14px));
  width: calc(100% - 28px - var(--stage-p) * (71.5% - 28px));
  height: calc(100% - 28px - var(--stage-p) * (38% - 28px));
}
.tile-sointu { left: 8.4%; top: 12%; width: 28.5%; height: 25%; }
.tile-vaakko { left: 15.7%; top: 38%; width: 21.2%; height: 23%; }
.tile-loimu { left: 19.4%; top: 62%; width: 17.5%; height: 18%; }
.tile-kuohu { left: 66.6%; top: 26%; width: 17.5%; height: 18%; }
.tile-frans { left: 66.6%; top: 45%; width: 21.2%; height: 23%; }
.tile-serviced { left: 66.6%; top: 69%; width: 28.5%; height: 25%; }

/* Fine glass edges and soft depth; the photograph itself stays crisp. */
.opening .photo-frame {
  isolation: isolate;
  border-radius: 18px;
  box-shadow: 0 12px 28px -13px #202f3847, 0 3px 8px -3px #17263021;
}
.opening .photo-frame > img, .opening .main-photo picture {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.opening .photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid #ffffff5c;
  border-radius: inherit;
  background: linear-gradient(135deg, #ffffff0a, transparent 40%, transparent 80%, #ffffff0a);
  box-shadow: inset 0 1px 1px #ffffff33;
}
.opening .main-photo::after { opacity: 1; }
.tile-logo {
  position: absolute;
  bottom: 14px;
  left: 14px;
  width: min(25%, 84px);
  z-index: 2;
  display: block;
  overflow: hidden;
  filter: drop-shadow(0 1px 2px #0009);
}
.tile-logo img { display: block; width: 100%; height: auto; max-width: none; }
.tile-logo.logo-vaakko { aspect-ratio: 900 / 449; width: min(27%, 78px); }
.tile-logo.logo-serviced { aspect-ratio: 900 / 165; width: min(32%, 108px); }
.tile-logo.logo-frans { width: min(27%, 84px); }
.tile-logo.main-logo { width: min(15%, 57px); opacity: var(--stage-p); }
.tile-city { right: 14px; bottom: 16px; font-size: 8px; }
.tile-shade {
  inset: auto 0 0;
  height: 57px;
  background: linear-gradient(transparent, #1b252966);
  border-bottom: 1px solid #ffffff30;
  box-shadow: inset 0 -16px 25px -25px #ffffff4d;
}

@media (max-width: 650px) {
  .hero-copy { bottom: 100px; left: 4vw; right: 4vw; }
  .hero-copy .eyebrow { margin-left: 0; margin-bottom: 20px; font-size: 13.95px; }
  .hero-copy h1 { font-size: 12.3vw; }
  html[lang=fi] .hero-copy { bottom: 78px; }
  html[lang=fi] .hero-copy h1 { font-size: 8.9vw; }
  .main-photo { left: calc(8px + var(--stage-p) * (34% - 8px)); top: calc(8px + var(--stage-p) * (22% - 8px)); width: calc(100% - 16px - var(--stage-p) * (68% - 16px)); height: calc(100% - 16px - var(--stage-p) * (48% - 16px)); }
  .tile-sointu { left: 6%; top: 14%; width: 26%; height: 17%; }
  .tile-vaakko { left: 9%; top: 32.5%; width: 23%; height: 17%; }
  .tile-loimu { left: 12%; top: 51%; width: 20%; height: 15.5%; }
  .tile-kuohu { left: 68%; top: 28%; width: 20%; height: 15.5%; }
  .tile-frans { left: 68%; top: 45%; width: 23%; height: 17%; }
  .tile-serviced { left: 68%; top: 63.5%; width: 26%; height: 17%; }
  .opening .photo-frame { box-shadow: 0 8px 19px -10px #202f3866, 0 2px 5px -2px #17263026; }
  .tile-logo, .tile-logo.logo-vaakko, .tile-logo.logo-frans { width: 42%; left: 8px; bottom: 9px; }
  .tile-logo.logo-serviced { width: 59%; }
  .tile-logo.main-logo { width: 10%; left: 13px; bottom: 13px; }
  .tile-shade { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .opening .photo-frame { left: auto; top: auto; width: 100%; height: 180px; }
  .opening .main-photo { height: 270px; }
  .hero-copy h1 { font-size: 12.1vw; }
  html[lang=fi] .hero-copy h1 { font-size: 8.9vw; }
}

/* Reveal layout: brand and homepage left, location pin and label right. */
.opening-location { display: none; }
.opening .photo-frame { display: block; text-align: left; container: property-card / inline-size; }
.card-reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: end;
  align-items: end;
  gap: 10px 12px;
  padding: 16px;
  color: #fff;
  background: linear-gradient(160deg, #0c15194a, #091413cc);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}
.opening .card-reveal .tile-logo {
  position: static;
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  opacity: 1;
  transform: none;
  width: min(108px, 34cqw);
  max-width: 55%;
}
.opening .card-reveal .logo-vaakko { width: min(96px, 32cqw); }
.opening .card-reveal .logo-serviced { width: min(160px, 40cqw); max-width: 60%; }
.opening .card-reveal .main-logo { width: 58px; }
.opening .card-reveal .tile-city {
  position: static;
  grid-column: 2;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 3px;
  margin: 0;
  opacity: 1;
  transform: none;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .025em;
  white-space: nowrap;
}
.location-pin { width: 18px; height: 22px; flex: 0 0 auto; }
.tile-visit {
  grid-column: 1;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 15px;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.3;
  border-bottom: 1px solid #ffffff85;
  padding-bottom: 4px;
}
.visit-arrow { display: block; width: 24px; height: 24px; flex: 0 0 auto; }
.opening .photo-frame:not([inert]):is(:focus-visible, .is-revealed) .card-reveal { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .opening .photo-frame:not([inert]):hover .card-reveal { opacity: 1; }
}
@container property-card (max-width: 240px) {
  .card-reveal { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 10px; gap: 7px; }
  .opening .card-reveal .tile-logo { width: 70px; max-width: 75%; }
  .opening .card-reveal .logo-serviced { width: 90px; max-width: 90%; }
  .opening .card-reveal .main-logo { width: 40px; }
  .opening .card-reveal .tile-city { grid-column: 1; grid-row: 2; justify-self: start; font-size: 8.5px; letter-spacing: .02em; }
  .tile-visit { grid-row: 3; font-size: 10px; gap: 7px; padding-bottom: 3px; }
  .visit-arrow { width: 18px; height: 18px; }
  .location-pin { width: 13px; height: 15px; }
}
@container property-card (max-width: 130px) {
  .card-reveal { padding: 8px; gap: 5px; }
  .opening .card-reveal .tile-logo { width: 49px; }
  .opening .card-reveal .logo-serviced { width: 67px; }
  .opening .card-reveal .tile-city { font-size: 7.5px; gap: 2px; }
  .tile-visit { font-size: 9px; gap: 4px; padding-bottom: 2px; }
  .visit-arrow { width: 16px; height: 16px; }
  .location-pin { width: 11px; height: 13px; }
}
@media (max-width: 650px) {
  .card-reveal { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .opening .card-reveal .tile-logo { grid-column: 1; grid-row: 1; }
  .opening .card-reveal .tile-city { grid-column: 1; grid-row: 2; justify-self: start; }
  .tile-visit { grid-column: 1; grid-row: 3; justify-self: start; }
}

/* User-selected photographs, including a lake-centred Kuohu crop. */
.opening .tile-kuohu > img,
.place-image img[src="/assets/kuohu.jpg"] { object-position: 50% 42%; }

/* Scroll controls the opening; the final collage stays pinned briefly. */
.collection-note { display: none; }
.opening-stage:focus { outline: none; }
.site-header { transform: translateY(var(--header-travel, 0px)); }
.menu-open .site-header { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .opening { height: 300svh; min-height: 0; }
  .opening-stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
}
@media (max-width: 650px) and (prefers-reduced-motion: no-preference) {
  .opening { height: 300svh; }
  .category-lockup { bottom: 4.5%; }
}

/* The hero crop and its image scale separately while cards slide in diagonally. */
.hero-copy { transform-origin: center bottom; }
.hero-copy h1 { text-align: left; }
@media (prefers-reduced-motion: no-preference) {
  .opening .side-photo {
    opacity: 1;
    transform: translate3d(calc((1 - var(--card-p, 0)) * var(--entry-x, 0px)), calc((1 - var(--card-p, 0)) * 100%), 0);
  }
  .opening .side-photo:not(.image-ready) { visibility: hidden; }
  .opening-stage.is-ready .side-photo { transform: none; will-change: auto; }
  .opening .main-photo picture {
    inset: auto;
    left: 50%; top: 50%;
    width: var(--hero-media-width, 100%);
    height: var(--hero-media-height, 100%);
    max-width: none;
    transform: translate(-50%, -50%) scale(var(--hero-scale, 1));
    transform-origin: center;
  }
}
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* The home logo belongs to the opening and scrolls away with its photo stage. */
.header-brand.brand {
  position: absolute;
  z-index: 6;
  top: 26px;
  left: var(--gutter);
  width: 106px;
  height: 44px;
  display: flex;
  align-items: center;
}
.opening-stage .header-brand img { width: 100%; filter: brightness(0) invert(1) drop-shadow(0 1px 3px #28473966); opacity: 1; transition: filter .25s ease; }
.opening-stage.on-white .header-brand img { filter: brightness(0) invert(.13); }
.header-brand:focus-visible { outline-color: #fff; outline-offset: 4px; }
@media (max-width: 650px) {
  .header-brand.brand { top: 22px; left: 28px; width: 92px; }
}

/* T1-inspired compact glass navigation, with language before the contact CTA. */
.site-header, .site-header.on-white, .menu-open .site-header {
  --nav-glass-radius: 16px;
  position: fixed;
  top: 28px; left: auto; right: 28px;
  width: min(760px, 100% - 210px); max-width: none;
  margin: 0; padding: 3px;
  display: grid; grid-template-columns: 65fr 35fr; align-items: center; gap: 0;
  color: #fff;
  background: transparent;
  border: 1px solid #ffffff14;
  border-radius: 16px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 3px 14px #13201a09;
  transform: none;
  transition: box-shadow .2s;
}
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(23,23,23,.5);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  /* Clip and composite the glass itself, leaving the dropdown outside the bar. */
  clip-path: inset(0 round var(--nav-glass-radius));
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
}
.main-navigation { display: block; }
.nav-triggers { display: grid; grid-template-columns: minmax(0,38fr) minmax(0,49fr) minmax(0,43fr); align-items: center; gap: 0; }
.nav-group { position: static; }
.nav-trigger {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 36px; padding: 5px 8px; border: 0; background: transparent; color: inherit;
  font: inherit; font-size: 12px; font-weight: 500; line-height: 1.25; white-space: normal; text-align: center;
  opacity: .88; transition: opacity .18s;
}
.nav-trigger:hover { opacity: 1; }
.mega-open .nav-trigger { opacity: .55; }
.mega-open .nav-trigger.is-active { opacity: 1; }
.nav-chevron { display: none; }
.site-header .header-right { display: grid; grid-template-columns: minmax(0,14fr) minmax(0,21fr); margin: 0; align-items: center; gap: 0; }
.site-header .languages { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 500; }
.site-header .languages a { padding: 10px 0; opacity: .62; }
.site-header .languages a[aria-current] { opacity: 1; }
.site-header .languages span { opacity: .45; }
.site-header .mobile-languages { display: none; }
.site-header .nav-contact {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; margin-inline: 4px; padding: 0 8px;
  border-radius: 12px; background: #fff; color: #322d2a;
  font-size: 10px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  transition: background .18s, font-weight .18s;
}
.site-header .nav-contact:is(:hover, :focus-visible) { background: #e7eae7; font-weight: 700; }
.nav-contact-label { display: grid; }
.nav-contact-label > span, .nav-contact-label::after { grid-area: 1 / 1; }
.nav-contact-label::after { content: attr(data-label); font-weight: 700; visibility: hidden; }
.site-header a:focus-visible, .site-header button:focus-visible,
.site-header.on-white a:focus-visible, .site-header:not(.on-white) a:focus-visible {
  outline: 2px solid #fff; outline-offset: 4px;
}
.site-header .nav-contact:focus-visible { outline-color: #fff; outline-offset: 3px; }
.opening-stage.on-white .header-brand:focus-visible { outline-color: var(--ink); }
.site-header .menu-toggle { display: none; margin: 0; }
.mega-panel[hidden] { display: none !important; }
.mega-panel {
  position: absolute; top: calc(100% + 8px); left: -1px; right: -1px;
  display: grid; grid-template-columns: minmax(0,19fr) minmax(0,24.5fr) minmax(0,21.5fr) minmax(0,14fr) minmax(0,21fr);
  align-items: start; padding: 20px 3px 24px;
  border: 1px solid #ffffff14; border-radius: 16px;
  background: rgba(23,23,23,.5);
  -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);
  box-shadow: 0 10px 30px #12221c0a;
  max-height: calc(100svh - 100px); overflow-y: auto; overscroll-behavior: contain;
  animation: nav-appear .2s ease both;
}
.mega-column { padding: 0 8px; color: #ffffff99; transition: color .18s; min-width: 0; }
.mega-column:first-child { grid-column: 1; }
.mega-column.is-active { color: #fff; }
.mega-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mega-links { display: grid; gap: 1px; }
.mega-links a { display: flex; align-items: center; min-height: 34px; padding: 6px 0; color: inherit; font-size: 12px; font-weight: 450; line-height: 1.5; letter-spacing: 0; overflow-wrap: break-word; text-decoration: none; }
.mega-links a:hover { color: #fff; }
.mega-links a:focus-visible { color: #fff; outline-offset: 2px; border-radius: 3px; }
.menu-placeholder { display: flex; align-items: center; min-height: 34px; padding: 6px 0; font-size: 12px; font-weight: 450; line-height: 1.5; }
.mega-note { margin: 6px 0 17px; font-size: 12px; font-weight: 450; line-height: 1.6; }
.mega-secondary { display: grid; gap: 1px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #ffffff20; }
@keyframes nav-appear { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1160px) {
  .site-header, .site-header.on-white, .menu-open .site-header { top: 22px; right: 24px; display: flex; width: max-content; padding: 3px 6px; max-width: calc(100% - 48px); gap: 0; }
  .site-header .header-right { display: flex; gap: 8px; }
  .site-header .nav-contact { margin: 0; min-height: 32px; padding-inline: 12px; }
  .site-header .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 36px; padding: 0; color: #fff; background: transparent; font: inherit; font-size: 12px; }
  .site-header .menu-label, .site-header .desktop-languages { display: none; }
  .site-header .mobile-languages { display: flex; justify-content: flex-start; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid #ffffff26; font-size: 14px; }
  .site-header .menu-toggle span { background: transparent; height: auto; width: auto; margin: 0; }
  .menu-icon { display: grid; gap: 5px; }
  .menu-icon i { display: block; width: 17px; height: 1px; background: currentColor; transition: transform .2s; }
  .menu-open .menu-icon i:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-open .menu-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
  .menu-open .site-header .menu-toggle span { transform: none; }
  .main-navigation {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    width: min(420px, calc(100vw - 48px));
    max-height: calc(100svh - 95px); overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 20px; border: 1px solid #ffffff12; border-radius: 16px;
    background: rgba(63,63,62,.88);
    -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);
    box-shadow: 0 16px 40px #12221c18;
  }
  .menu-open .main-navigation { display: block; animation: nav-appear .2s ease both; }
  .nav-triggers { display: none; }
  .mega-panel { position: static; display: block; padding: 2px 0; max-height: none; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
  .mega-column, .mega-column.is-active { padding: 18px 0; color: #ffffffd9; }
  .mega-column + .mega-column { border-top: 1px solid #ffffff26; }
  .mega-heading { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0; margin: 0 0 8px; }
  .mega-links a { min-height: 38px; padding: 8px 0; font-size: 13px; }
  .menu-placeholder { min-height: 38px; padding: 8px 0; font-size: 13px; }
  .mega-note { font-size: 13px; margin-bottom: 5px; }
  .mega-secondary { border: 0; margin-top: 6px; padding-top: 0; }

}
@media (max-width: 650px) {
  .site-header, .site-header.on-white, .menu-open .site-header { top: 18px; right: 16px; padding: 4px 5px 4px 10px; max-width: none; }
  .site-header .header-right { gap: 10px; }
  .site-header .nav-contact { min-height: 34px; padding: 0 11px; font-size: 10px; }
  .site-header .languages { gap: 5px; font-size: 11px; }
  .site-header .menu-toggle { height: 34px; min-width: 22px; }
  .site-header .menu-label { display: none; }
  .main-navigation { width: calc(100vw - 32px); max-height: calc(100svh - 85px); }
  .header-brand.brand { top: 17px; left: 24px; width: 86px; }
}
@media (max-width: 359px) {
  .site-header, .site-header.on-white { right: 12px; }
  .site-header .header-right { gap: 8px; }
  .site-header .nav-contact { padding-inline: 8px; font-size: 9px; }
  .header-brand.brand { left: 21px; width: 72px; }
  .main-navigation { width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .mega-panel, .menu-open .main-navigation { animation: none; }
  .mega-column { transition: none; }
}

/* Phone collage and a dedicated full-width statistics strip. */
@media (max-width: 650px) and (prefers-reduced-motion: no-preference) {
  .main-photo {
    left: calc(8px + var(--stage-p) * (3% - 8px));
    top: calc(8px + var(--stage-p) * (var(--mobile-gallery-top, 12%) - 8px));
    width: calc(100% - 16px - var(--stage-p) * (45% - 16px));
    height: calc(100% - 16px - var(--stage-p) * (100% - 16px - var(--mobile-gallery-range, 68%) * .367647));
  }
  .tile-sointu { left: 60%; top: var(--mobile-gallery-top, 12%); width: 37%; height: calc(var(--mobile-gallery-range, 68%) * .235294); }
  .tile-kuohu { left: 60%; top: calc(var(--mobile-gallery-top, 12%) + var(--mobile-gallery-range, 68%) * .257353); width: 37%; height: calc(var(--mobile-gallery-range, 68%) * .264706); }
  .tile-vaakko { left: 3%; top: calc(var(--mobile-gallery-top, 12%) + var(--mobile-gallery-range, 68%) * .389706); width: 55%; height: calc(var(--mobile-gallery-range, 68%) * .264706); }
  .tile-loimu { left: 3%; top: calc(var(--mobile-gallery-top, 12%) + var(--mobile-gallery-range, 68%) * .676471); width: 55%; height: calc(var(--mobile-gallery-range, 68%) * .323529); }
  .tile-frans { left: 60%; top: calc(var(--mobile-gallery-top, 12%) + var(--mobile-gallery-range, 68%) * .544118); width: 37%; height: calc(var(--mobile-gallery-range, 68%) * .220588); }
  .tile-serviced { left: 60%; top: calc(var(--mobile-gallery-top, 12%) + var(--mobile-gallery-range, 68%) * .786765); width: 37%; height: calc(var(--mobile-gallery-range, 68%) * .213235); }
  .opening .photo-frame { border-radius: 14px; }
}

/* Slim navigation: the mobile bar holds just the menu toggle and contact CTA. */
@media (min-width: 1161px) {
  .nav-trigger { min-height: 32px; padding-inline: 16px; }
  .mega-column { padding-inline: var(--column-inset, 16px) 12px; }
  .site-header .languages a { padding-block: 8px; }
}
.site-header .menu-toggle svg.menu-icon {
  display: block; width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
.menu-icon path { transform-origin: 12px 12px; transition: transform .2s, opacity .2s; }
.menu-open .menu-line-top { transform: translateY(6px) rotate(45deg); transform-origin: 12px 6px; }
.menu-open .menu-line-middle { opacity: 0; }
.menu-open .menu-line-bottom { transform: translateY(-6px) rotate(-45deg); transform-origin: 12px 18px; }
@media (max-width: 650px) {
  .site-header, .site-header.on-white, .menu-open .site-header {
    --nav-glass-radius: 13px;
    top: max(16px, env(safe-area-inset-top));
    left: auto;
    right: max(16px, env(safe-area-inset-right));
    width: max-content; max-width: none; min-height: 42px;
    padding: 3px 6px; border-radius: 13px;
    display: flex; gap: 0;
  }
  .opening-stage .header-brand.brand {
    position: absolute; top: max(16px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left));
    width: clamp(72px, 21vw, 86px); height: 42px;
    margin: 0; flex: none;
  }
  .site-header .header-right { display: flex; gap: 8px; margin-left: auto; }
  .site-header .menu-toggle {
    order: 1; justify-content: center; width: 32px; min-width: 32px; height: 34px;
    padding: 0;
  }
  .site-header .mobile-languages { gap: 12px; font-size: 14px; }
  .site-header .mobile-languages a { padding-block: 12px; }
  .site-header .nav-contact {
    order: 2; min-height: 30px; padding-inline: 9px; margin: 0;
    border-radius: 9px; font-size: 9px;
  }
  .site-header .main-navigation {
    left: auto; right: -1px; width: calc(100vw - 32px); top: calc(100% + 8px);
    max-height: calc(100svh - 84px); padding: 10px 24px 14px; border-radius: 14px;
  }
}

/* A vector arrow avoids the baseline offset of a font glyph. */
.down-arrow { line-height: 0; flex: none; }
.down-arrow svg { display: block; width: 24px; height: 24px; }


/* The new Sointu suite image keeps the bedside lamp and bed in both crops. */
.tile-sointu > img:not(.tile-logo) {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: 60% 55%; transform: none;
}