/* =========================================================
   KRI guest sites - site styles in the kri.fi design language

   Loads after tokens.css and uses only its custom properties: no new
   colours, spacing strictly from the --s-* scale, radii and shadows from
   the tokens. NOTE: the --amber-* tokens are the KRI blue.

   tokens.css is a mirror of the kri.fi stylesheet and is never edited here.
   Reused kri.fi components on purpose: .site-header, .container, .eyebrow,
   .lead, .btn (.btn-primary/.btn-amber/.btn-ghost), .tag (.tag-amber/
   .tag-teal), .field/.input/.textarea/.field-hint and .faq-item. The header
   (.nav, .nav-brand, .nav-links, .nav-cta, .nav-toggle) and the page head
   (.page-head) follow the kri.fi source stylesheet's patterns, which the
   mirror does not carry. tokens.css's .section and .reveal belong to its
   scroll animation and are never used here; site-specific classes take the
   gs- prefix.

   Mobile first at 390px; the chat docks to the right from 900px.
   ========================================================= */

/* ====================== Base ====================== */
:root {
  /* Type floors. --t-base, --t-sm and --t-xs all bottom out under what a
     guest can read on a phone: text is 16px or more, and only short
     uppercase eyebrows and pills go down to 13px. */
  --gs-t-body: max(16px, var(--t-base));
  --gs-t-label: max(13px, var(--t-xs));
  --gs-t-btn: 1.0625rem;
  /* The kri.fi stacks with a metric-matched fallback behind each webfont:
     while the preloaded Fraunces and Inter arrive, the fallback renders with
     the same advance widths and vertical metrics, so the header and the
     headlines do not reflow when the real fonts swap in. */
  --font-serif: 'Fraunces', 'Fraunces fallback', 'Times New Roman', Georgia, serif;
  --font-sans: 'Inter', 'Inter fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Times New Roman and Liberation Serif are metric-compatible, as are Arial
   and Liberation Sans, so one size-adjust serves both local names. Values
   computed from the shipped woff2 files against the system fonts. */
@font-face {
  font-family: 'Fraunces fallback';
  font-style: normal;
  font-weight: 300 500;
  src: local('Times New Roman'), local('Liberation Serif');
  size-adjust: 126.8%;
  ascent-override: 77.1%;
  descent-override: 20.1%;
}
@font-face {
  font-family: 'Fraunces fallback';
  font-style: italic;
  font-weight: 300 500;
  src: local('Times New Roman Italic'), local('Liberation Serif Italic');
  size-adjust: 126.4%;
  ascent-override: 77.4%;
  descent-override: 20.2%;
}
@font-face {
  font-family: 'Inter fallback';
  font-style: normal;
  font-weight: 300 499;
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 105.7%;
  ascent-override: 91.6%;
  descent-override: 22.8%;
}
@font-face {
  font-family: 'Inter fallback';
  font-style: normal;
  font-weight: 500 700;
  src: local('Arial Bold'), local('Liberation Sans Bold');
  size-adjust: 98.1%;
  ascent-override: 98.8%;
  descent-override: 24.6%;
}

[hidden] { display: none !important; }

/* Anchored sections land below the sticky header. */
html { scroll-padding-top: var(--s-24); }

/* The footer sits at the bottom of a short page and nothing trails it. */
body { font-size: var(--gs-t-body); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }
main:focus { outline: none; }

h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

a { transition: color .2s var(--ease); }
p a { text-decoration: underline; text-underline-offset: 3px; }
p a.btn, p a.chip, p a.gs-more, p a.gs-contact { text-decoration: none; }
p a:active { color: var(--slate-900); }

input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 3px;
}

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-2); z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--slate-900); color: var(--paper);
  border-radius: var(--r-md); font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--paper); }

.icon { flex: none; }
.sub { color: var(--slate-500); }
.eyebrow, .tag { font-size: var(--gs-t-label); }

/* ====================== Header ====================== */
.site-header {
  border-top: 2px solid var(--teal-500);
  background: rgba(251, 250, 246, .96);
  box-shadow: 0 1px 0 rgba(15, 26, 44, .03);
}
.eyebrow { color: var(--teal-700); }
main h2 em { color: var(--amber-700); }

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
}
.nav-brand {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--s-12);
  color: var(--slate-900);
}
/* The logo keeps its natural width at every viewport: with five nav links and
   two buttons the flex row would otherwise shrink it to make room. */
.nav-brand picture, .nav-brand img { flex: none; }
.nav-brand img { height: 40px; width: auto; display: block; }
.nav-brand-text { flex: none; line-height: 1.1; }
/* The wordmark is the cabin name in Fraunces; kri.fi's wordmark is "KRI ry". */
.nav-brand-text strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--slate-900);
  white-space: nowrap;
}
/* A small teal uppercase line under the cabin name says this is the renter's
   guide, not the booking site. Same two-line brand at every width: it is
   narrower than a pill beside the name, so the header never overflows. */
.gs-brand-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--gs-t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-700);
  /* One line at every width; a wrap would grow the header. */
  white-space: nowrap;
}

/* The nav links render twice: an inline list for wide screens and a <details>
   menu copy for phones, which opens without any JavaScript (a closed details
   hides its children, so one list cannot serve both). */
.gs-nav { display: none; }
.nav > .nav-links { margin-left: auto; }
.nav-toggle { display: none; }
.nav-links { display: flex; align-items: center; gap: var(--s-6); list-style: none; }
/* kri.fi sets its nav in --t-sm (14.7px at 1440px); floored to 15px here so
   the header chrome never drops under the nav-item minimum. */
.nav-links a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--s-12); min-height: var(--s-12);
  font-size: 0.9375rem; font-weight: 500; color: var(--slate-700);
  position: relative; padding: 4px var(--s-2);
}
.nav-links a:hover { color: var(--slate-900); }
.nav-links a.active { color: var(--slate-900); }
.nav-links a.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--amber-500);
  border-radius: 2px;
}
/* The desktop chat entry: a quiet ghost button next to the dark Varaukseni
   button, at the same size, weight and height as it. Hidden until chat.js
   runs, phones keep the in-flow bar instead. */
.btn.gs-nav-chat { font-size: 0.9375rem; }
.gs-nav-chat {
  display: none; white-space: nowrap;
  padding: 12px 18px; min-height: var(--s-12);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em;
}

.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; min-height: var(--s-12);
  background: var(--slate-900); color: var(--paper);
  border: 0; border-radius: var(--r-md);
  font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.nav-cta:hover { background: var(--slate-700); color: var(--paper); transform: translateY(-1px); }
.nav-cta:active { transform: translateY(0) scale(.98); transition-duration: .12s; }
.nav-cta:disabled { background: var(--slate-100); color: var(--slate-500); cursor: progress; transform: none; }

.gs-stale {
  padding: var(--s-3) 0;
  background: var(--paper-2); border-bottom: 1px solid var(--line);
  color: var(--slate-700);
}

/* ====================== Page head ====================== */
.page-head {
  position: relative;
  padding: calc(var(--s-12) + var(--s-4)) 0 var(--s-10);
  background:
    radial-gradient(ellipse 42% 80% at 92% 0%, rgba(52, 82, 255, .09), transparent 70%),
    var(--paper);
  border-bottom: 1px solid var(--line);
}
.page-head .container { position: relative; }
.page-head h1 {
  max-width: 19ch;
  font-weight: 300;
  font-size: clamp(2.5rem, 1.65rem + 4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.page-head h1 em { color: var(--amber-700); }
/* The breadcrumb eyebrow follows kri.fi: slate, no underline. The current
   item carries the guest guide's teal. Links get a 44px tall hit area from
   inline padding, which does not change the visual line height. */
.page-head .eyebrow { margin-bottom: var(--s-3); }
.gs-crumbs { color: var(--slate-500); }
.gs-crumbs a { color: var(--slate-500); text-decoration: none; padding: var(--s-4) 0; }
.gs-crumbs a:hover { color: var(--slate-900); text-decoration: underline; text-underline-offset: 3px; }
.gs-crumbs a:focus-visible { text-decoration: underline; }
.gs-crumbs .gs-current { color: var(--teal-700); }
.page-head .lead { max-width: 60ch; margin-top: var(--s-3); }
.page-head .gs-tags { margin-top: var(--s-4); }

.gs-page { display: flex; flex-direction: column; gap: var(--s-10); padding: var(--s-8) 0 var(--s-16); }
.gs-section-title { margin-bottom: var(--s-5); }

/* ====================== Buttons ====================== */
.btn {
  min-height: var(--s-12); font-family: inherit; font-size: var(--gs-t-btn); font-weight: 600;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn-block { width: 100%; white-space: normal; text-align: center; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--slate-100); color: var(--slate-500); border-color: var(--slate-200);
  cursor: not-allowed; transform: none; box-shadow: none;
}
.btn[aria-busy="true"] { cursor: progress; }
/* Loading: unlock, report submit and chat send set aria-busy while they wait. */
.btn[aria-busy="true"]::before {
  content: ""; flex: none;
  width: var(--s-4); height: var(--s-4); border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
}

.btn-text {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--s-12); padding: 0 var(--s-2);
  font: inherit; font-weight: 600; color: var(--amber-700);
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.btn-text:hover { color: var(--amber-600); background: var(--amber-100); }
.btn-text:active { color: var(--slate-900); }
.btn-text:disabled { color: var(--slate-500); background: none; cursor: not-allowed; }

.gs-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--s-12); height: var(--s-12); flex: none;
  background: none; border: 0; border-radius: var(--r-md);
  color: var(--slate-700); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.gs-icon-btn:hover { background: var(--paper-2); color: var(--slate-900); }
.gs-icon-btn:active { background: var(--slate-100); }

/* tokens.css rounds every focus ring to --r-sm, which reshapes larger components while focused. */
.btn:focus-visible, .gs-contact:focus-visible, .gs-icon-btn:focus-visible { border-radius: var(--r-md); }
.gs-tile:focus-visible { border-radius: var(--r-lg); }
.chip:focus-visible { border-radius: 999px; }

/* ====================== Search and forms ====================== */
.search { position: relative; }
.search .icon { position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%); color: var(--slate-500); pointer-events: none; }
.search .input { padding-left: var(--s-12); background: white; box-shadow: var(--shadow-sm); }

/* Field boundaries need 3:1 against the surface; --slate-300 does not reach it. */
.input, .select, .textarea {
  border-color: var(--slate-400); min-height: var(--s-12);
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.input:disabled, .input[readonly], .textarea:disabled, .textarea[readonly] {
  background: var(--slate-100); color: var(--slate-500); border-color: var(--slate-200); cursor: progress;
}
::placeholder { color: var(--slate-500); opacity: 1; }
.field label, .field-hint { font-size: var(--gs-t-body); }
.field legend { padding: 0; margin-bottom: var(--s-3); }
fieldset { min-width: 0; border: 0; }

/* ====================== Cards and callouts ====================== */
.card {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-8);
  background: white; border: 1px solid rgba(226, 222, 207, .72); border-radius: var(--r-xl);
  box-shadow: 0 10px 32px rgba(15, 26, 44, .045);
  scroll-margin-top: var(--s-24);
}
.card-strong { background: var(--paper-2); border-color: transparent; box-shadow: none; }
.card h2 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xl); font-weight: 400; }
.card h3 { font-size: var(--t-lg); font-weight: 500; }
.gs-state-card { max-width: 760px; }
.gs-state-card h2 { font-size: var(--t-2xl); }
.gs-state-card > p { max-width: 60ch; }
.gs-state-card .btn { align-self: flex-start; margin-top: var(--s-3); }

.gs-callout {
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-6) var(--s-8);
  background: var(--amber-100);
  border: 1px solid rgba(143, 160, 255, .42);
  border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sm);
}
.gs-callout-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: var(--s-12); height: var(--s-12); border-radius: var(--r-md);
  color: var(--amber-700); background: rgba(255, 255, 255, .7);
}
.gs-callout-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.gs-callout-body .eyebrow { margin-bottom: 0; color: var(--amber-700); }
.gs-callout-title { font-size: var(--t-xl); font-weight: 400; line-height: 1.18; }
.gs-callout-action { flex: none; display: flex; flex-direction: column; gap: var(--s-3); }

/* Label above value on a phone: a call button needs the full card width. */
.kv { display: grid; grid-template-columns: 1fr; gap: var(--s-1); }
.kv dt { color: var(--slate-500); }
.kv dd { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); min-width: 0; font-weight: 600; }
.kv dd + dt { margin-top: var(--s-3); }

.gs-tags { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.gs-tags .tag { display: inline-flex; align-items: center; gap: 6px; }

.note { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.note .icon { margin-top: var(--s-1); color: var(--slate-700); }
.gs-note-body { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.gs-note-body .icon { margin-top: 0; color: inherit; }

.gs-mini-note {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--amber-100); border-left: 3px solid var(--amber-500); border-radius: var(--r-sm);
  color: var(--slate-800);
}
.gs-mini-note .icon { flex: none; margin-top: 2px; color: var(--amber-700); }

/* Phone numbers, addresses and outbound links are call buttons of their own,
   block level with a full-size touch target, never part of a sentence. */
.gs-contact {
  display: flex; align-items: center; gap: var(--s-2);
  width: fit-content; max-width: 100%; min-width: var(--s-12); min-height: var(--s-12);
  padding: var(--s-2) var(--s-4);
  font-weight: 600; color: var(--amber-700); overflow-wrap: anywhere;
  background: white; border: 1px solid var(--slate-400); border-radius: var(--r-md);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.gs-contact span { min-width: 0; }
.gs-contact:hover { color: var(--amber-700); background: var(--amber-100); border-color: var(--amber-600); }
.gs-contact:active { color: var(--slate-900); background: var(--slate-100); border-color: var(--slate-900); }

/* Links that stand alone under a sentence or a checklist item: full-size target. */
.gs-more, .check-more {
  display: inline-flex; align-items: center; min-height: var(--s-12);
  font-weight: 600;
}
.gs-more:active, .check-more:active { color: var(--slate-900); }

/* ====================== Home ====================== */
/* The home hero is the same light page head as /varaukseni: paper field, ink
   type, one italic accent. Depth comes from stacked planes, not a dark
   overlay: the paper field, the search raised on it, the photograph on a white
   mount, and the changeover pill laid over the mount's lower edge. The page
   head's hairline is dropped so hero and tasks read as one arrival surface. */
.gs-hero {
  padding: var(--s-8) 0 var(--s-10);
  border-bottom: 0;
}
.gs-hero h1 {
  max-width: 100%;
  /* Whole words only. A 13ch measure plus hyphens:auto split ohjeita and lomallesi. */
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
  font-size: clamp(1.9rem, 1.05rem + 2vw, 3.2rem);
  line-height: 1.15;
}
.gs-hero-grid { display: grid; gap: var(--s-10); }
.gs-hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-6); min-width: 0; }
.gs-hero-copy .eyebrow { margin-bottom: 0; }
.gs-hero-find { display: flex; flex-direction: column; gap: var(--s-4); width: 100%; max-width: 520px; }
.gs-hero-search { width: 100%; }
.gs-hero-search .input { min-height: 60px; box-shadow: var(--shadow-md); }
.gs-hero-search .icon { color: var(--slate-700); }
/* The manual shortcuts hang under the search like its keys: one tap from the
   arrival screen to the cabin's own dishwasher, sauna or wifi page. */
.gs-hero-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.gs-hero-shortcuts-label { color: var(--slate-500); }
.gs-hero-shortcuts ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gs-hero-shortcuts a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4);
  color: var(--slate-900); font-weight: 600; text-decoration: none;
  background: white;
  border: 1px solid rgba(226, 222, 207, .9); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.gs-hero-shortcuts a:active { background: var(--slate-100); transform: translateY(1px); transition-duration: .1s; }
.gs-hero-shortcuts a:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 3px; border-radius: var(--r-md); }
@media (hover: hover) and (pointer: fine) {
  .gs-hero-shortcuts a:hover { color: var(--amber-700); border-color: var(--amber-600); transform: translateY(-1px); }
}
.gs-hero-visual {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 11;
  border: 1px solid rgba(251, 250, 246, .2);
  border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sm);
  overflow: hidden;
  background: var(--slate-700);
  box-shadow: 0 24px 64px rgba(4, 10, 22, .32);
}
.gs-hero-visual::after {
  content: "";
  position: absolute; inset: 55% 0 0;
  background: linear-gradient(to top, rgba(15, 26, 44, .38), transparent);
  pointer-events: none;
}
.gs-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
/* Home only: the shared frame above stays as it is for the empty state. */
.gs-hero .gs-hero-visual {
  aspect-ratio: auto;
  padding: var(--s-3);
  overflow: visible;
  background: white;
  border: 1px solid rgba(226, 222, 207, .72);
  box-shadow: var(--shadow-lg);
}
.gs-hero .gs-hero-visual::after { content: none; }
.gs-hero .gs-hero-visual picture {
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--slate-100);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm);
}
.gs-hero-pill {
  position: absolute; z-index: 1; left: var(--s-8); bottom: calc(-1 * var(--s-5));
  padding: var(--s-2) var(--s-4);
  color: var(--slate-900);
  background: white;
  border: 1px solid var(--line);
  font-size: var(--t-sm); font-weight: 600;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
}
.gs-empty-grid { display: grid; gap: var(--s-8); }
.gs-empty-main { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }

.gs-tasks { padding-top: var(--s-2); }
.gs-tasks .gs-section-title { max-width: 18ch; font-size: var(--t-2xl); }
.gs-tiles { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.gs-tiles > .gs-tile-wide { grid-column: 1 / -1; }
.gs-tile {
  display: flex; align-items: center; gap: var(--s-4);
  height: 100%; min-height: var(--s-20); padding: var(--s-5);
  color: var(--slate-900);
  background: white;
  border: 1px solid rgba(226, 222, 207, .72); border-radius: var(--r-lg);
  box-shadow: 0 10px 32px rgba(15, 26, 44, .045);
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.gs-tiles > li:first-child .gs-tile { background: var(--amber-100); border-color: var(--amber-300); }
.gs-tile:hover { color: var(--slate-900); transform: translateY(-2px); background: white; border-color: var(--amber-300); }
.gs-tile:active { transform: none; border-color: var(--amber-500); }
.gs-tile-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: var(--s-12); height: var(--s-12); border-radius: var(--r-md);
  color: var(--amber-700); background: var(--amber-100);
}
.gs-tiles > li:first-child .gs-tile-icon { background: white; }
.gs-tile-text { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; flex: 1; }
.gs-tile-text strong { font-family: var(--font-serif); font-weight: 500; font-size: var(--t-lg); line-height: 1.2; color: var(--slate-900); }
.gs-tile-text > span { color: var(--slate-500); line-height: 1.4; }
.gs-tile-cta { display: none; }
.gs-tile-chevron { display: flex; color: var(--slate-400); }

.gs-help {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-8);
  flex-wrap: wrap;
  padding: var(--s-8) 0;
  border-top: 1px solid var(--line);
}
.gs-help h2 { font-size: var(--t-xl); font-weight: 400; }
.gs-help-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ====================== Manual ====================== */
.gs-manual-grid { display: grid; gap: var(--s-10); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.chip {
  display: inline-flex; align-items: center; min-height: var(--s-12); padding: 0 var(--s-4);
  font-size: var(--gs-t-body); font-weight: 600; color: var(--slate-700);
  background: transparent; border: 1px solid var(--slate-300); border-radius: var(--r-md);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { color: var(--slate-900); background: white; border-color: var(--slate-700); }
.chip:active { background: var(--slate-100); }
.chip[aria-current="true"] { color: white; background: var(--slate-900); border-color: var(--slate-900); }

.groups { display: flex; flex-direction: column; gap: var(--s-10); margin-top: var(--s-10); }
.group { display: flex; flex-direction: column; gap: var(--s-4); scroll-margin-top: var(--s-24); }
.group-title { font-size: var(--t-xl); font-weight: 400; }

.gs-rows {
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr);
  background: white; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.gs-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  height: 100%; min-height: var(--s-16); padding: var(--s-4) var(--s-5);
  color: var(--slate-900); background: white;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.gs-rows > li + li { border-top: 1px solid var(--line); }
.gs-row:hover { color: var(--amber-700); background: var(--paper); }
.gs-row:active { background: var(--amber-100); }
.gs-row:focus-visible { position: relative; z-index: 1; outline-offset: -3px; }
.gs-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gs-row-text strong { font-family: var(--font-serif); font-weight: 500; font-size: var(--t-lg); line-height: 1.25; }
.gs-row-text small { font-size: var(--gs-t-body); color: var(--slate-500); }
.gs-row > .icon { color: var(--slate-400); transition: transform .2s var(--ease); }
.gs-row:hover > .icon { transform: translateX(3px); color: var(--amber-700); }

.gs-side-card {
  background: var(--slate-900); color: var(--paper); border-radius: var(--r-xl);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.gs-side-card-image { aspect-ratio: 16 / 9; background: var(--slate-700); }
.gs-side-card-image img { width: 100%; height: 100%; object-fit: cover; }
.gs-side-card-body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-8); }
.gs-side-card-body h2 { color: var(--paper); font-size: var(--t-2xl); font-weight: 300; }
.gs-side-card-body p { color: var(--slate-200); }

/* ====================== Section ====================== */
.gs-section-grid { display: grid; gap: var(--s-8); }
.gs-section-main {
  min-width: 0; padding: var(--s-8);
  background: white; border: 1px solid rgba(226, 222, 207, .72); border-radius: var(--r-xl);
}
.prose { display: flex; flex-direction: column; gap: var(--s-5); }
.prose > p { max-width: 65ch; font-size: 1.0625rem; line-height: 1.75; text-wrap: pretty; }
.prose h2 { margin-top: var(--s-2); font-size: var(--t-xl); font-weight: 400; }

.gs-steps { list-style: none; counter-reset: kri-step; }
.gs-steps li {
  counter-increment: kri-step;
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.65;
}
.gs-steps li::before {
  content: counter(kri-step, decimal-leading-zero);
  flex: none; display: flex; align-items: center; justify-content: center;
  width: var(--s-10); height: var(--s-10); border-radius: var(--r-sm);
  font-weight: 600; font-size: var(--t-sm); font-variant-numeric: tabular-nums;
  color: var(--amber-700); background: var(--amber-100);
}

.gs-faq { margin-top: var(--s-8); }
.faq-item summary { min-height: var(--s-12); font-weight: 600; }

.gs-action-card {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-8);
  color: var(--paper); background: var(--slate-900); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.gs-action-card .eyebrow { margin-bottom: 0; color: var(--amber-300); }
.gs-action-card h2 { color: var(--paper); font-size: var(--t-xl); font-weight: 400; }
.gs-action-card .sub { color: var(--slate-300); }
.gs-action-card .btn-ghost { color: var(--paper); border-color: var(--slate-400); }
.gs-action-card .btn-ghost:hover { color: var(--slate-900); background: var(--paper); }
.gs-action-card .btn-text { align-self: center; color: var(--amber-300); }
.gs-action-card .btn-text:hover { color: var(--slate-900); }

/* ====================== Checklists ====================== */
.gs-checklists { display: grid; gap: var(--s-6); }
.gs-checklist-card { gap: var(--s-5); }
.seg { display: flex; gap: var(--s-1); padding: var(--s-1); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.seg a {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: var(--s-12); border-radius: var(--r-sm);
  font-weight: 600; color: var(--slate-700);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.seg a:hover { color: var(--slate-900); background: var(--slate-100); }
.seg a:active { background: var(--slate-200); }
.seg a[aria-current="true"] { background: var(--amber-600); color: white; }

.checklist { display: flex; flex-direction: column; gap: var(--s-4); scroll-margin-top: var(--s-24); }
.progress-row { display: flex; align-items: center; gap: var(--s-4); }
.progress-row p { flex: none; }
progress {
  flex: 1; height: var(--s-2);
  appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 999px; overflow: hidden;
  background: var(--slate-100); color: var(--amber-600);
}
progress::-webkit-progress-bar { background: var(--slate-100); }
progress::-webkit-progress-value { background: var(--amber-600); transition: width .2s var(--ease); }
progress::-moz-progress-bar { background: var(--amber-600); }

.checks { list-style: none; }
.checks li + li { border-top: 1px solid var(--line); }
.check { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--s-12); padding: var(--s-3) 0; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--amber-600); cursor: pointer; }
.check span { transition: color .2s var(--ease); }
.check input:checked + span { color: var(--slate-500); }
.check-more { margin-left: calc(22px + var(--s-3)); min-height: var(--s-12); }

/* The progress row and the saved note are JS-driven; their space is reserved
   from the first paint (visibility, not display) so nothing shifts when
   checklists.js reveals them. */
[data-progress], [data-saved-note] { visibility: hidden; }
[data-progress].is-live, [data-saved-note].is-live { visibility: visible; }

.gs-checklist-side { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.gs-checklist-photo { aspect-ratio: 16 / 10; border-radius: var(--r-xl); overflow: hidden; background: var(--slate-100); box-shadow: var(--shadow-md); }
.gs-checklist-photo img { width: 100%; height: 100%; object-fit: cover; }
.gs-checklist-side .gs-callout { align-items: flex-start; padding: var(--s-6); }
.gs-checklist-card { gap: var(--s-6); }
.progress-row { padding: var(--s-4); background: var(--paper-2); border-radius: var(--r-md); }
.check { padding: var(--s-4) var(--s-2); }
.check input:checked + span { text-decoration: line-through; text-decoration-color: var(--slate-300); }

/* ====================== Report ====================== */
.report { display: flex; flex-direction: column; gap: var(--s-6); }
.gs-report-card { gap: var(--s-10); }
.gs-report-step { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.gs-step-head { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.gs-step-head .eyebrow { margin-bottom: 0; color: var(--amber-700); }
.gs-step-title { font-size: var(--t-xl); font-weight: 400; margin: 0; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice label {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 96px; padding: var(--s-3);
  font-size: inherit; font-weight: 600; color: var(--slate-900); text-align: center;
  background: var(--paper-2); border: 1px solid transparent; border-radius: var(--r-md);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.choice label > .icon { color: var(--slate-700); transition: color .2s var(--ease); }
.choice input:hover + label { background: white; border-color: var(--slate-400); }
.choice input:active + label { background: var(--slate-100); }
.choice input:checked + label {
  background: var(--amber-100); border-color: var(--amber-600);
  box-shadow: inset 0 0 0 1px var(--amber-600);
}
.choice input:checked + label > .icon { color: var(--amber-700); }
.choice input:focus-visible + label { outline: 2px solid var(--amber-500); outline-offset: 3px; }
.gs-choice-check {
  position: absolute; top: 6px; right: 6px;
  display: none; align-items: center; justify-content: center;
  width: var(--s-5); height: var(--s-5); border-radius: 50%;
  background: var(--amber-600); color: white;
}
.gs-choice-check .icon { color: white; }
.choice input:checked + label .gs-choice-check { display: flex; }

.field-error { font-weight: 600; color: var(--slate-900); }
[aria-invalid="true"].input, [aria-invalid="true"].textarea { border: 2px solid var(--slate-900); }

.field .file-drop {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--s-16); padding: var(--s-3) var(--s-4);
  color: var(--amber-700); background: var(--paper-2);
  border: 1px dashed var(--amber-600); border-radius: var(--r-md); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.file-drop:hover { background: var(--amber-100); }
.file-drop:active { border-color: var(--amber-700); }
input:focus-visible + .file-drop { outline: 2px solid var(--amber-500); outline-offset: 3px; }
.file-list { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.file-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0 var(--s-2) 0 var(--s-4); background: white; border: 1px solid var(--line); border-radius: var(--r-md); }
.file-list span { min-width: 0; overflow-wrap: anywhere; }

.status-panel { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-8); background: var(--paper-2); border: 1px solid var(--slate-700); border-radius: var(--r-xl); }
.status-panel:focus { outline: none; }
.status-panel h2 { font-size: var(--t-xl); font-weight: 400; }
.status-ok { background: var(--amber-100); border-color: var(--amber-300); }

/* ====================== Area guide ====================== */
.gs-area-card > h2 { font-size: var(--t-2xl); }
.area-items { list-style: none; display: grid; gap: 0 var(--s-8); }
.area-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-5) 0; }
.area-item + .area-item { border-top: 1px solid var(--line); }
.area-item h3 { font-family: var(--font-serif); font-size: var(--t-lg); font-weight: 500; letter-spacing: -.01em; }
.area-item > p { max-width: 62ch; }
.area-item .gs-contact { margin: var(--s-2) 0; }
.source-note { margin-top: auto; color: var(--slate-500); font-size: var(--t-sm); }
.source-note a:active { color: var(--slate-900); }

/* ====================== My booking ====================== */
.gs-booking-grid { display: grid; gap: var(--s-6); }
.gs-unlock-card { border-top: 3px solid var(--amber-600); }
.lock-head { display: flex; align-items: flex-start; gap: var(--s-4); }
.lock-head > div { display: flex; flex-direction: column; gap: var(--s-2); }
.lock-head h2 { align-items: flex-start; }
.lock-badge {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: var(--s-12); height: var(--s-12); border-radius: var(--r-md);
  color: var(--amber-700); background: var(--amber-100);
}
.code-input { min-height: 60px; font-size: var(--t-xl); letter-spacing: var(--s-2); text-align: center; font-variant-numeric: tabular-nums; }
.gs-unlock-card form { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-3); }
.gs-secrets-grid { display: grid; gap: var(--s-6); }

.gs-door-card { padding-top: 0; overflow: hidden; }
.gs-door-card:not(:has(.gs-door-image)) { padding-top: var(--s-8); }
.gs-door-image { margin: 0 calc(-1 * var(--s-8)); aspect-ratio: 16 / 9; background: var(--slate-100); }
.gs-door-image img { width: 100%; height: 100%; object-fit: cover; }
.gs-door-card h2 { margin-top: var(--s-3); }

.gs-secret summary { list-style: none; align-self: flex-start; width: fit-content; }
.gs-secret summary::-webkit-details-marker { display: none; }
.gs-secret .when-open, .gs-secret[open] .when-closed { display: none; }
.gs-secret[open] .when-open { display: inline; }
.gs-secret p { margin-top: var(--s-3); padding: var(--s-5); background: var(--paper-2); border-radius: var(--r-md); overflow-wrap: anywhere; font-size: var(--t-lg); }

/* ====================== Kumppaniedut ====================== */
.gs-section-lead { max-width: 65ch; margin: calc(-1 * var(--s-2)) 0 var(--s-6); color: var(--slate-700); }

.gs-offers { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.gs-offer { gap: var(--s-5); }
.gs-offer-photo {
  margin: calc(-1 * var(--s-8)) calc(-1 * var(--s-8)) 0;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--slate-100); border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.gs-offer-photo img { width: 100%; height: 100%; object-fit: cover; }
.gs-offer-head { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.gs-offer-logo { flex: 0 1 auto; min-width: 0; max-width: 160px; max-height: 56px; width: auto; height: auto; }
.gs-offer-title { min-width: 0; }
.gs-offer-title .eyebrow { margin-bottom: var(--s-1); color: var(--amber-700); }
.gs-offer h3 { font-size: var(--t-xl); font-weight: 400; }

.gs-terms { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); color: var(--slate-500); }
.gs-terms li { position: relative; padding-left: var(--s-4); }
.gs-terms li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: var(--s-2); height: 1px; background: var(--slate-400);
}

.gs-offer-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gs-offer-links .btn { min-height: 44px; padding: 8px 14px; font-size: 1rem; }
.gs-offer-contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); color: var(--slate-700); margin-top: auto; }
.gs-offers + .gs-callout { margin-top: var(--s-8); }
.gs-code { font-weight: 700; color: var(--slate-900); letter-spacing: 0.04em; }
.gs-code-mask { font-weight: 600; color: var(--slate-500); letter-spacing: 0.1em; }

.gs-prices { width: 100%; border-collapse: collapse; }
.gs-prices th, .gs-prices td { padding: var(--s-3) 0; vertical-align: baseline; }
.gs-prices tr + tr th, .gs-prices tr + tr td { border-top: 1px solid var(--line); }
.gs-prices th { text-align: left; font-weight: 500; color: var(--slate-700); }
.gs-prices td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-fineprint { margin-top: var(--s-4); color: var(--slate-500); }
.gs-pdf { display: flex; padding-top: var(--s-6); border-top: 1px solid var(--line); }
.gs-pdf .gs-more { gap: var(--s-2); font-weight: 600; }

@media (min-width: 720px) {
  .gs-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ====================== Footer ====================== */
.site-footer {
  padding: var(--s-16) 0 var(--s-12);
  color: var(--slate-300);
  background: var(--slate-900);
  border-top: 1px solid var(--slate-700);
}
.gs-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-10); flex-wrap: wrap; }
.gs-footer-brand { max-width: 420px; }
.gs-footer-brand img { height: 36px; width: auto; margin-bottom: var(--s-5); filter: brightness(0) invert(1); opacity: .9; }
.gs-footer-brand p { color: var(--slate-300); font-size: var(--gs-t-body); }
.gs-footer-brand p + p { margin-top: var(--s-2); }
.gs-footer-contacts { list-style: none; display: flex; flex-direction: column; gap: var(--s-4); }
.gs-footer-label {
  display: block; margin-bottom: 2px;
  font-size: var(--gs-t-label); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--slate-400);
}
.gs-footer-link {
  display: inline-flex; align-items: center; min-width: var(--s-12); min-height: var(--s-12);
  color: var(--slate-200); text-decoration: underline; text-underline-offset: 3px;
}
.gs-footer-link:hover { color: var(--amber-300); }
.gs-footer-link:active { color: var(--paper); }

/* ====================== Chat ====================== */
/* The chat entry is a full-width secondary button in normal flow directly
   above the footer, on paper with a hairline: the phone entry, since wide
   screens open the chat from the header (the 900px block hides this bar).
   Nothing fixed or sticky: no scroll position can put it over a control.
   Pages with their own "Kysy..." button leave it out (layout.ts chatBar). */
.gs-chat-bar {
  padding: var(--s-4) var(--s-4) max(var(--s-4), env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--line);
}
.gs-chat-bar .btn { display: flex; width: min(480px, 100%); margin: 0 auto; white-space: normal; }
.chat-open .gs-chat-bar { display: none; }

.chat {
  position: fixed; inset: 0; z-index: 110;
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  color: var(--slate-800); background: var(--paper); border: 0;
  flex-direction: column;
}
.chat[open] { display: flex; }
.chat::backdrop { background: rgba(15, 26, 44, .4); }

.chat-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: var(--s-16); padding: 0 var(--s-4);
  background: white; border-bottom: 1px solid var(--line);
}
.chat-head h2 { font-size: var(--t-xl); font-weight: 400; }
.chat-head-actions { display: flex; align-items: center; gap: var(--s-1); }

.chat-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5) var(--s-4); }
.chat-topic {
  align-self: center; padding: 4px 12px;
  font-size: var(--gs-t-body); font-weight: 600; color: var(--amber-700);
  background: var(--amber-100); border: 1px solid var(--amber-300); border-radius: 999px;
}
.thread { display: flex; flex-direction: column; gap: var(--s-3); }
.bubble { max-width: 85%; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble-user { align-self: flex-end; background: var(--slate-900); color: var(--paper); }
.bubble-bot { align-self: flex-start; background: white; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.bubble-pending { color: var(--slate-500); }
.bubble-sources { list-style: none; margin-top: var(--s-2); white-space: normal; }
.bubble-sources a { display: inline-flex; align-items: center; min-height: var(--s-12); text-decoration: underline; text-underline-offset: 3px; }
.bubble-sources a:active { color: var(--slate-900); }
.chat-error { padding: var(--s-3) var(--s-4); font-weight: 600; background: var(--paper-2); border: 1px solid var(--slate-900); border-radius: var(--r-md); }
/* The mailto link chat.js builds: its own row with a full-size target. */
.chat-error a { display: flex; align-items: center; width: fit-content; max-width: 100%; min-height: var(--s-12); overflow-wrap: anywhere; }

.chat-dock {
  flex: none; display: flex; gap: var(--s-2); align-items: center;
  padding: var(--s-3) var(--s-4) max(var(--s-3), env(safe-area-inset-bottom));
  background: white; border-top: 1px solid var(--line);
}
.chat-dock .input { flex: 1; min-width: 0; }
.gs-chat-send { flex: none; width: var(--s-12); height: var(--s-12); min-height: var(--s-12); padding: 0; border-radius: 999px; }
.gs-chat-send:focus-visible { border-radius: 999px; }

/* ====================== Wider screens ====================== */
@media (min-width: 480px) {
  .kv { grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-4); align-items: baseline; }
  .kv dd + dt { margin-top: 0; }
}

@media (min-width: 560px) {
  .gs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .gs-tile { flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: var(--s-6); }
  .gs-tile-chevron { display: none; }
  .gs-tile-cta {
    display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2);
    color: var(--amber-700); font-weight: 700; font-size: 1rem;
    transition: transform .2s var(--ease);
  }
  .gs-tile:hover .gs-tile-cta { transform: translateX(3px); }
}

@media (min-width: 700px) {
  .gs-page { gap: var(--s-16); padding: var(--s-12) 0 var(--s-24); }
  .page-head { padding: var(--s-20) 0 var(--s-16); }
  .gs-hero { padding: var(--s-16) 0 var(--s-12); }
  .gs-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choices { grid-template-columns: repeat(4, 1fr); }
  .area-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-item:nth-child(2) { border-top: 0; }
  .gs-footer-contacts { flex-direction: row; gap: var(--s-10); }
}

@media (min-width: 900px) {
  .gs-report-card { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .gs-booking-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .gs-secrets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* Header: the links fold into the <details> menu on narrow screens. The
   switch sits where the full header (brand with pill, five links, the chat
   ghost button and Varaukseni) genuinely fits: below it the desktop header
   uses the phone menu layout instead of overflowing the viewport. */
@media (max-width: 1179px) {
  .nav > .nav-links { display: none; }
  .gs-nav { display: block; order: 3; margin-left: 0; position: static; }
  /* The brand takes the free space, so the buttons sit at the right gutter
     even where there is no Varaukseni (a cabin with nothing to unlock). */
  .nav-brand { margin-right: auto; }
  .nav-cta { order: 2; margin-left: auto; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: var(--s-12); height: var(--s-12);
    background: var(--slate-900); border: 0; border-radius: var(--r-md);
    color: var(--paper); cursor: pointer; list-style: none;
    transition: background .2s var(--ease);
  }
  .nav-toggle::-webkit-details-marker { display: none; }
  .nav-toggle:hover { background: var(--slate-700); }
  .nav-toggle .icon + .icon { display: none; }
  .gs-nav[open] .nav-toggle .icon:first-child { display: none; }
  .gs-nav[open] .nav-toggle .icon + .icon { display: block; }
  .gs-nav .nav-links { display: none; }
  .gs-nav[open] .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 101;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: var(--s-2) 0;
  }
  .gs-nav[open] .nav-links a { display: flex; justify-content: flex-start; padding: var(--s-2) var(--s-4); font-size: var(--gs-t-body); }
  .gs-nav[open] .nav-links a.active::after { left: var(--s-4); right: var(--s-4); bottom: 0; }
}

/* Full nav from 1180px on. Until 1280px the chat entry is icon-only with
   its name visually hidden (and shown as a tooltip) so the row fits. */
/* From 900px chat.js shows the ghost button: it joins the right cluster ahead
   of Varaukseni. Phones never show it, so Varaukseni keeps the auto margin. */
@media (min-width: 900px) and (max-width: 1179px) {
  .gs-nav-chat:not([hidden]) { order: 2; margin-left: auto; }
  .gs-nav-chat:not([hidden]) ~ .nav-cta { margin-left: 0; }
}
@media (min-width: 1180px) and (max-width: 1279px) {
  .gs-nav-chat span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

@media (min-width: 960px) {
  .gs-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: var(--s-16); }
  .gs-hero-grid:not(:has(.gs-hero-visual)) { grid-template-columns: 1fr; }
  .gs-empty-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: var(--s-16); }
  .gs-tiles { grid-template-columns: repeat(3, 1fr); }
  .gs-tile-wide .gs-tile { flex-direction: row; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6); }
  .gs-tile-wide .gs-tile-text { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-5); }
  .gs-tile-wide .gs-tile-cta { margin-top: 0; }
}

@media (min-width: 1024px) {
  .gs-manual-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .gs-section-grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .gs-checklists { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .gs-side-card, .gs-action-card { position: sticky; top: var(--s-24); }
}

@media (max-width: 640px) {
  .nav { gap: var(--s-2); }
  .nav-brand { gap: var(--s-2); min-width: 0; flex: 1 1 auto; }
  .nav-brand img { height: 28px; }
  .nav-brand-text { min-width: 0; flex: 1 1 auto; }
  .nav-brand-text strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
  .gs-brand-sub { display: none; }
  .nav-cta { padding: 10px 14px; }
  .card, .gs-section-main, .gs-action-card { padding: var(--s-6); border-radius: var(--r-lg); }
  .gs-door-image { margin-inline: calc(-1 * var(--s-6)); }
  .gs-offer-photo { margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .gs-callout { flex-wrap: wrap; padding: var(--s-6); }
  .gs-callout-column { flex-direction: column; align-items: flex-start; }
  .gs-callout-action { width: 100%; }
  .gs-callout-action .btn, .gs-callout-action .gs-contact { width: 100%; justify-content: center; }
  .gs-hero-visual { aspect-ratio: 4 / 3; }
  .gs-hero .gs-hero-visual { aspect-ratio: auto; padding: var(--s-2); }
  .gs-hero .gs-hero-visual picture { aspect-ratio: 4 / 3; }
  .gs-hero-pill { left: var(--s-5); }
}

/* Under 380px the wide-tracked brand line would overflow next to Varaukseni
   and the menu button: tighten the tracking, the words stay readable. The
   rest of the row tightens with it so the toggle never crosses the edge. */
@media (max-width: 380px) {
  .gs-brand-sub { letter-spacing: 0.06em; }
  .nav { gap: var(--s-1); }
  .nav-brand img { height: 24px; }
  .nav-cta { padding: 10px 12px; }
}

/* The price value wraps on the narrowest phones instead of overflowing. */
@media (max-width: 400px) {
  .gs-prices td { white-space: normal; }
  /* A long partner eyebrow next to the logo wraps below it instead of
     pushing the card over the edge. */
  .gs-offer-head { flex-wrap: wrap; }
}

/* 320-340px: the last few pixels come from the tracked brand line, the
   Varaukseni padding and a 44px (still full-size) menu button. */
@media (max-width: 340px) {
  .gs-brand-sub { letter-spacing: 0.02em; }
  .nav-cta { padding: 10px 8px; }
  .nav-toggle { width: 44px; height: 44px; }
}

/* Docked chat: a non-modal side panel, the page stays usable beside it. */
@media (min-width: 900px) {
  .chat {
    inset: 0 0 0 auto; width: 420px;
    border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  }
  .chat-docked { padding-right: 420px; }
  /* Wide screens open the chat from the header's ghost button; the in-flow
     bar above the footer is the phone entry and would only be missed here. */
  .gs-nav-chat:not([hidden]) { display: inline-flex; }
  .gs-chat-bar { display: none !important; }
}

/* ====================== Motion ====================== */
@media (prefers-reduced-motion: no-preference) {
  .chat[open] { animation: chat-in .2s var(--ease-enter); }
  .bubble-pending { animation: chat-pulse 1.2s var(--ease) infinite alternate; }
  .btn[aria-busy="true"]::before { animation: gs-spin .8s linear infinite; }
  .gs-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .42s var(--ease-enter), transform .42s var(--ease-enter);
    transition-delay: calc(var(--gs-reveal-order, 0) * 45ms);
  }
  .gs-reveal.is-visible { opacity: 1; transform: none; }
  /* Home, once: the mount rises, the photograph settles inside it a little
     slower (a second plane), then the changeover pill is laid on its edge. */
  .gs-hero .gs-hero-visual.gs-reveal { transition-duration: .6s; }
  .gs-hero .gs-hero-visual.gs-reveal:not(.is-visible) { transform: translateY(24px) scale(.985); }
  .gs-hero .gs-hero-visual.gs-reveal img { transition: transform 1.3s var(--ease-enter); }
  .gs-hero .gs-hero-visual.gs-reveal:not(.is-visible) img { transform: scale(1.06); }
  .gs-hero .gs-hero-visual.gs-reveal .gs-hero-pill {
    transition: opacity .36s var(--ease-enter), transform .36s var(--ease-enter);
    transition-delay: .55s;
  }
  .gs-hero .gs-hero-visual.gs-reveal:not(.is-visible) .gs-hero-pill { opacity: 0; transform: translateY(-10px); }
  /* The shortcut keys drop out from under the search one by one as it lands. */
  .gs-hero-find.gs-reveal .gs-hero-shortcuts-label,
  .gs-hero-find.gs-reveal .gs-hero-shortcuts li {
    transition: opacity .32s var(--ease-enter), transform .32s var(--ease-enter);
    transition-delay: .2s;
  }
  .gs-hero-find.gs-reveal .gs-hero-shortcuts li:nth-child(1) { transition-delay: .26s; }
  .gs-hero-find.gs-reveal .gs-hero-shortcuts li:nth-child(2) { transition-delay: .32s; }
  .gs-hero-find.gs-reveal .gs-hero-shortcuts li:nth-child(3) { transition-delay: .38s; }
  .gs-hero-find.gs-reveal:not(.is-visible) .gs-hero-shortcuts-label,
  .gs-hero-find.gs-reveal:not(.is-visible) .gs-hero-shortcuts li { opacity: 0; transform: translateY(-6px); }
}
@keyframes chat-in { from { opacity: 0; transform: translateY(var(--s-4)); } }
@keyframes chat-pulse { to { opacity: .5; } }
@keyframes gs-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .gs-tile:hover, .gs-row:hover, .btn:hover, .nav-cta:hover { transform: none; }
}