/* ==== tokens.css ==== */
/* Workbeds design tokens.
   Source: Figma 6liWOTvGZyYazw2TRwWgu6 (homepage v2 176:366, components on page 09).
   Colours and gradients are copied from Figma values, never approximated.
   Sizes are the Figma desktop scale reduced by roughly 10-15% for production density. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback so the swap to Geist does not shift the layout. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* ---------- Colour: neutrals (Figma variables ws/color/*) ---------- */
  --ws-ink: #0a0a0a;
  --ws-muted: #6b7078;
  --ws-subtle: #9aa0a8;
  --ws-muted-on-tint: #565b63;   /* muted text on tinted fills (accent-soft), keeps 4.5:1 */
  --ws-border: #e6e7e9;
  --ws-border-strong: #d2d5d9;
  --ws-soft: #f5f6f7;
  --ws-background: #ffffff;
  --ws-on-dark: #ffffff;
  --ws-on-dark-muted: rgba(255, 255, 255, 0.62);

  /* ---------- Colour: Monsoon ---------- */
  --ws-deep: #0c1624;          /* Monsoon/02 Deep base */
  --ws-monsoon: #305282;
  --ws-monsoon-dark: #28466f;
  --ws-mist: #98afc7;
  --ws-fog: #e9ecef;
  --ws-frost: #8ca4bf;         /* Monsoon/04 Frost base */
  --ws-cloud: #f5f7f9;         /* Monsoon/03 Cloud base */
  --ws-sand: #eef0f2;          /* neutral chip */
  --ws-accent-soft: #e7edf4;   /* accent chip / notice */
  --ws-warning-soft: #f8efd9;  /* warning chip */
  --ws-success-soft: #e5f1ea;  /* success chip */

  /* ---------- Colour: status (green only for status) ---------- */
  --ws-success: #1f7a4d;
  --ws-warning: #8f5f00;
  --ws-danger: #b42318;
  --ws-danger-soft: #fef3f2;
  --ws-info: #305282;

  /* ---------- Colour: map ---------- */
  --ws-map-sea: #f1f3f5;
  --ws-map-provider: #b7c0ca;

  /* ---------- Gradients (Figma paint styles Monsoon/01-06) ----------
     Every gradient is defined once here. Components reference the token. */

  /* Monsoon/01 Diagonal: stops shared by every use of the style. */
  --ws-monsoon-diagonal-stops: #e9ecef 0%, #98afc7 38%, #305282 90%, #28466f 100%;
  /* Request starter (Figma 176:374, 1280 x 504). */
  --ws-gradient-monsoon-diagonal: linear-gradient(21.492deg, var(--ws-monsoon-diagonal-stops));
  /* Same paint style on the "With Workbeds" card (Figma 176:615, 628 x 534):
     Figma renders the style at 40.375deg on that frame. */
  --ws-gradient-monsoon-diagonal-card: linear-gradient(40.375deg, var(--ws-monsoon-diagonal-stops));
  /* Figma draws the style corner to corner, so its angle follows the frame (21.49deg on 1280x504,
     40.38deg on 628x534, 35.75deg on 700x504). `to top right` reproduces that on any frame size. */
  --ws-gradient-monsoon-diagonal-fit: linear-gradient(to top right, var(--ws-monsoon-diagonal-stops));

  /* Monsoon/02 Deep: a light rising from the bottom edge over #0C1624.
     Used by Sourcing live stages 1-3 (177:327) and the footer panel (231:650).
     Figma: two radial layers; sizes and centres expressed as a share of the frame. */
  --ws-gradient-deep:
    radial-gradient(20% 35% at 50% 105%, rgba(233, 236, 239, 0.8) 0%, rgba(233, 236, 239, 0) 100%),
    radial-gradient(80% 80% at 50% 115%,
      rgba(152, 175, 199, 0.95) 0%,
      rgba(100, 129, 165, 0.925) 17.5%,
      rgba(74, 105, 147, 0.9125) 26.25%,
      rgba(48, 82, 130, 0.9) 35%,
      rgba(35, 62, 102, 0.7) 52.5%,
      rgba(22, 41, 74, 0.5) 70%,
      rgba(12, 22, 36, 0) 100%),
    var(--ws-deep);
  --ws-gradient-footer: var(--ws-gradient-deep);

  /* Monsoon/06 Beam: soft light column, four radial layers over Deep.
     Sourcing live stage 4 only ("Beam lights up once, at the first offer"). */
  --ws-gradient-beam:
    radial-gradient(14% 80% at 50% 50%,
      rgba(233, 236, 239, 0.15) 0%, rgba(233, 236, 239, 0.129) 12%, rgba(233, 236, 239, 0.093) 25%,
      rgba(233, 236, 239, 0.057) 40%, rgba(233, 236, 239, 0.027) 58%, rgba(233, 236, 239, 0.009) 78%,
      rgba(233, 236, 239, 0) 100%),
    radial-gradient(25% 95% at 50% 50%,
      rgba(152, 175, 199, 0.3) 0%, rgba(152, 175, 199, 0.258) 12%, rgba(152, 175, 199, 0.186) 25%,
      rgba(152, 175, 199, 0.114) 40%, rgba(152, 175, 199, 0.054) 58%, rgba(152, 175, 199, 0.018) 78%,
      rgba(152, 175, 199, 0) 100%),
    radial-gradient(42% 105% at 50% 50%,
      rgba(48, 82, 130, 0.6) 0%, rgba(48, 82, 130, 0.516) 12%, rgba(48, 82, 130, 0.372) 25%,
      rgba(48, 82, 130, 0.228) 40%, rgba(48, 82, 130, 0.108) 58%, rgba(48, 82, 130, 0.036) 78%,
      rgba(48, 82, 130, 0) 100%),
    radial-gradient(62% 95% at 50% 62%,
      rgba(48, 82, 130, 0.85) 0%, rgba(27, 50, 87, 0.55) 55%, rgba(12, 22, 36, 0) 100%),
    var(--ws-deep);

  /* Monsoon/04 Frost (supply-side band 261:245, 1280 x 158). */
  --ws-gradient-frost:
    radial-gradient(80% 80% at 10% 100%, rgba(48, 82, 130, 0.85) 0%, rgba(48, 82, 130, 0) 100%),
    radial-gradient(42% 50% at 88% 8%, rgba(233, 236, 239, 0.85) 0%, rgba(233, 236, 239, 0) 100%),
    var(--ws-frost);

  /* Monsoon/03 Cloud (highlighted offer card 122:203, 410 x 487). */
  --ws-gradient-cloud:
    radial-gradient(65% 75% at 85% -10%,
      rgba(48, 82, 130, 1) 0%,
      rgba(74, 107, 150, 0.85) 30%,
      rgba(113, 141, 175, 0.675) 46%,
      rgba(152, 175, 199, 0.5) 62%,
      rgba(245, 247, 249, 0) 100%),
    var(--ws-cloud);

  /* Explore button (262:578): Monsoon pill, left to right. */
  --ws-gradient-explore: linear-gradient(90deg, #2f5282 0%, #5e7fa9 60%, #8ba6c6 100%);
  /* Figma has no hover variant; the note says "gradient shifts darker". We darken the same
     gradient with a Deep overlay instead of inventing a second gradient. */
  --ws-explore-hover-overlay: rgba(12, 22, 36, 0.16);

  /* ---------- Typography ---------- */
  --ws-font-sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ws-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Figma Display 72/72 -4% -> production clamp */
  --ws-text-display: clamp(2.25rem, 3.7vw, 3.5rem);
  --ws-leading-display: 1;
  --ws-tracking-display: -0.04em;
  /* Figma H1 48/52 -3% -> section headings */
  --ws-text-h2: clamp(1.75rem, 2.7vw, 2.5rem);
  --ws-leading-h2: 1.1;
  --ws-tracking-h2: -0.03em;
  /* Figma H2 32/38 -2.5% -> sub headings */
  --ws-text-h2s: clamp(1.375rem, 1.8vw, 1.625rem);
  --ws-leading-h2s: 1.19;
  --ws-tracking-h2s: -0.025em;
  /* Figma H3 22/28 -1.5% */
  --ws-text-h3: 1.125rem;
  --ws-leading-h3: 1.3;
  --ws-tracking-h3: -0.015em;
  /* Figma Number 40/44 -4% */
  --ws-text-number: clamp(1.625rem, 2.1vw, 1.875rem);
  --ws-leading-number: 1.1;
  --ws-tracking-number: -0.04em;
  /* Figma Title 16/22 -0.5% */
  --ws-text-title: 0.9375rem;
  --ws-leading-title: 1.375;
  /* Figma Body large 18/27 -0.5% */
  --ws-text-body-lg: 1rem;
  --ws-leading-body-lg: 1.5;
  /* Figma Body 15/22 */
  --ws-text-body: 0.875rem;
  --ws-leading-body: 1.5;
  /* Figma Body small / Label / Data 13/18 */
  --ws-text-small: 0.8125rem;
  --ws-leading-small: 1.3846;
  /* Figma Caption 12/16 */
  --ws-text-caption: 0.75rem;
  --ws-leading-caption: 1.3333;
  /* Figma Eyebrow Geist Mono 11/14 +8% uppercase */
  --ws-text-eyebrow: 0.6875rem;
  --ws-leading-eyebrow: 1.2727;
  --ws-tracking-eyebrow: 0.08em;
  /* Figma Button 15/20 -0.5% */
  --ws-text-button: 0.875rem;

  /* ---------- Spacing (4px base) ---------- */
  --ws-space-1: 4px;
  --ws-space-2: 8px;
  --ws-space-3: 12px;
  --ws-space-4: 16px;
  --ws-space-5: 20px;
  --ws-space-6: 24px;
  --ws-space-7: 28px;
  --ws-space-8: 32px;
  --ws-space-10: 40px;
  --ws-space-12: 48px;
  --ws-space-14: 56px;
  --ws-space-16: 64px;
  --ws-space-20: 80px;
  /* Vertical rhythm between homepage sections (Figma 80 -> 72 desktop). */
  --ws-section-space: clamp(56px, 6.2vw, 84px);
  --ws-section-space-tight: clamp(16px, 2.4vw, 36px);

  /* ---------- Widths ---------- */
  --ws-container: 1200px;
  --ws-surface-inner: 1280px;
  --ws-surface-wide: 1680px;
  --ws-measure: 400px;                        /* hero and intro paragraphs */
  --ws-gutter: 16px;

  /* ---------- Radii ---------- */
  --ws-radius-sm: 8px;
  --ws-radius-md: 10px;
  --ws-radius-lg: 12px;       /* cards (Figma 16) */
  --ws-radius-xl: 18px;       /* panels (Figma 24) */
  --ws-radius-footer: 28px;
  --ws-radius-pill: 999px;

  /* ---------- Borders and shadows ---------- */
  --ws-hairline: 1px solid var(--ws-border);
  --ws-hairline-strong: 1px solid var(--ws-border-strong);
  --ws-shadow-pop: 0 8px 12px rgba(13, 23, 36, 0.08);
  --ws-shadow-card: 0 8px 12px rgba(13, 23, 36, 0.06);
  --ws-shadow-menu: 0 12px 32px rgba(13, 23, 36, 0.12), 0 2px 6px rgba(13, 23, 36, 0.06);
  --ws-shadow-nav: 0 1px 0 var(--ws-border), 0 6px 20px rgba(13, 23, 36, 0.05);
  --ws-focus-ring: 0 0 0 2px var(--ws-background), 0 0 0 4px var(--ws-monsoon);

  /* ---------- Controls ---------- */
  --ws-control-height: 46px;
  --ws-button-l: 46px;
  --ws-button-m: 36px;
  --ws-nav-height: 60px;

  /* ---------- Motion ---------- */
  --ws-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ws-duration-micro: 200ms;
  --ws-duration-color: 380ms;   /* colour changes on hover: slower than movement, so they fade rather than flip */
  --ws-duration-popover: 200ms;
  --ws-duration-reveal: 800ms;
  --ws-stage-interval: 1400ms;   /* Sourcing live: 1.4 s per stage (Figma component note) */
  --ws-loop-pause: 5000ms;
  /* Page transition (Figma Foundations 247:681): cover 450, hold 200, reveal 500 */
  --ws-pt-cover: 450ms;
  --ws-pt-hold: 200ms;
  --ws-pt-reveal: 500ms;
  --ws-pt-ease: cubic-bezier(0.76, 0, 0.24, 1);      /* hold the finished state, then play again */
}

@media (min-width: 640px) {
  :root { --ws-gutter: 28px; }
}
@media (min-width: 1024px) {
  :root { --ws-gutter: 40px; --ws-nav-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ws-duration-micro: 0ms;
    --ws-duration-popover: 0ms;
    --ws-duration-reveal: 0ms;
  }
}

/* ==== base.css ==== */
/* Reset, typography scale and layout primitives. */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--ws-nav-height) + 16px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ws-background);
  color: var(--ws-ink);
  font-family: var(--ws-font-sans);
  font-size: var(--ws-text-body);
  line-height: var(--ws-leading-body);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; font-size: inherit; }
/* :where() keeps this at zero specificity, so component padding always wins. */
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ws-focus-ring); border-radius: 2px; }
h1[tabindex="-1"]:focus { box-shadow: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ws-ink); color: var(--ws-on-dark);
  padding: 10px 16px; font-size: var(--ws-text-small); font-weight: 500;
  transition: top var(--ws-duration-micro) var(--ws-ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Typography roles ---------- */
.t-display {
  font-size: var(--ws-text-display);
  line-height: var(--ws-leading-display);
  letter-spacing: var(--ws-tracking-display);
  font-weight: 400;
}
.t-h2 {
  font-size: var(--ws-text-h2);
  line-height: var(--ws-leading-h2);
  letter-spacing: var(--ws-tracking-h2);
  font-weight: 400;
}
.t-h2s {
  font-size: var(--ws-text-h2s);
  line-height: var(--ws-leading-h2s);
  letter-spacing: var(--ws-tracking-h2s);
  font-weight: 400;
}
.t-h3 {
  font-size: var(--ws-text-h3);
  line-height: var(--ws-leading-h3);
  letter-spacing: var(--ws-tracking-h3);
  font-weight: 400;
}
.t-number {
  font-size: var(--ws-text-number);
  line-height: var(--ws-leading-number);
  letter-spacing: var(--ws-tracking-number);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.t-title {
  font-size: var(--ws-text-title);
  line-height: var(--ws-leading-title);
  letter-spacing: -0.005em;
  font-weight: 500;
}
.t-body-lg {
  font-size: var(--ws-text-body-lg);
  line-height: var(--ws-leading-body-lg);
  letter-spacing: -0.005em;
}
.t-body { font-size: var(--ws-text-body); line-height: var(--ws-leading-body); }
.t-small { font-size: var(--ws-text-small); line-height: var(--ws-leading-small); }
.t-label { font-size: var(--ws-text-small); line-height: var(--ws-leading-small); font-weight: 500; }
.t-caption { font-size: var(--ws-text-caption); line-height: var(--ws-leading-caption); }
.t-caption-strong { font-size: var(--ws-text-caption); line-height: var(--ws-leading-caption); font-weight: 500; }
.t-data {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-text-small);
  line-height: var(--ws-leading-small);
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-text-eyebrow);
  line-height: var(--ws-leading-eyebrow);
  letter-spacing: var(--ws-tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ws-muted);
}
.muted { color: var(--ws-muted); }
.on-dark { color: var(--ws-on-dark); }
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--ws-on-dark); }

/* ---------- Layout primitives ---------- */

/* Content container: text, grids, normal sections. */
.container {
  width: 100%;
  max-width: calc(var(--ws-container) + 2 * var(--ws-gutter));
  margin-inline: auto;
  padding-inline: var(--ws-gutter);
}
/* Wide visual surface: may grow past the content width (footer, full visuals). */
.wide-surface {
  width: 100%;
  max-width: calc(var(--ws-surface-wide) + 2 * var(--ws-gutter));
  margin-inline: auto;
  padding-inline: clamp(12px, 2.5vw, 40px);
}
/* Controlled content inside a wide surface. */
.surface-inner {
  width: 100%;
  max-width: var(--ws-surface-inner);
  margin-inline: auto;
}

.section { padding-block: var(--ws-section-space) 0; }
.section--last { padding-bottom: var(--ws-section-space); }
.section--tight { padding-top: var(--ws-section-space-tight); }

/* Section header: heading block left, intro (+ optional action) right, bottom aligned. */
.section-header {
  display: grid;
  gap: var(--ws-space-5);
  margin-bottom: clamp(28px, 3vw, 36px);
}
.section-header__main { display: grid; gap: var(--ws-space-4); max-width: 720px; }
.section-header__aside { display: grid; gap: var(--ws-space-4); justify-items: start; max-width: var(--ws-measure); }
.section-header__aside p { color: var(--ws-muted); }
@media (min-width: 900px) {
  .section-header {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--ws-measure));
    align-items: end;
    column-gap: var(--ws-space-10);
  }
}

.stack { display: grid; gap: var(--stack-gap, var(--ws-space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--ws-space-3)); }

/* ---------- Reveal (once, subtle, optional) ---------- */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--ws-duration-reveal) var(--ws-ease) var(--reveal-delay, 0ms),
              transform var(--ws-duration-reveal) var(--ws-ease) var(--reveal-delay, 0ms);
}
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
/* Photos fade in once decoded instead of popping in. */
.js img.fade-img { opacity: 0; transition: opacity 700ms var(--ws-ease); }
.js img.fade-img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
}

/* ==== components.css ==== */
/* Shared components: buttons, fields, chips, cards, overlays, feedback.
   Figma component references in comments. */

/* ============ Button (118:36) ============
   Primary (ink, square) = act. Explore (Monsoon pill) = go to a page or guide.
   Secondary / Ghost = alternatives. OnDark = on gradients and Deep. */
.btn {
  --btn-h: var(--ws-button-m);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding-inline: 16px;
  font-size: var(--ws-text-small);
  line-height: var(--ws-leading-small);
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 0;
  transition:
    background-color var(--ws-duration-color) var(--ws-ease),
    border-color var(--ws-duration-color) var(--ws-ease),
    color var(--ws-duration-color) var(--ws-ease),
    transform var(--ws-duration-micro) var(--ws-ease),
    box-shadow var(--ws-duration-color) var(--ws-ease);
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.btn:active:not([disabled]):not([aria-disabled="true"]) { transform: scale(0.985); }
.btn__icon { flex: none; width: 16px; height: 16px; transition: transform 320ms var(--ws-ease), filter var(--ws-duration-color) var(--ws-ease); }
/* Hover: the arrow turns to point up-right (north-east). */
.btn:hover .btn__icon--arrow, .btn:focus-visible .btn__icon--arrow { transform: rotate(-45deg); }
.btn:focus-visible { border-radius: 0; }

.btn--l {
  --btn-h: var(--ws-button-l);
  padding-inline: 18px;
  font-size: var(--ws-text-button);
  line-height: 20px;
  letter-spacing: -0.005em;
}
.btn--l .btn__icon { width: 18px; height: 18px; }
.btn--block { width: 100%; }

.btn--primary { background: var(--ws-ink); color: var(--ws-on-dark); }
.btn--primary:hover { background: #26282c; }

.btn--secondary { background: var(--ws-background); color: var(--ws-ink); border-color: var(--ws-border-strong); }
.btn--secondary:hover { background: var(--ws-ink); border-color: var(--ws-ink); color: var(--ws-on-dark); }
.btn--secondary:hover .btn__icon { filter: invert(1); }

.btn--ghost { background: transparent; color: var(--ws-ink); }
.btn--ghost:hover { background: var(--ws-soft); }

.btn--on-dark { background: var(--ws-background); color: var(--ws-ink); }
.btn--on-dark:hover { background: var(--ws-fog); }

.btn--explore {
  background: var(--ws-gradient-explore);
  background-origin: border-box; /* the gradient runs under the border too: no repeated dark sliver on the right */
  color: var(--ws-on-dark);
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: var(--ws-radius-pill);
  padding-inline: 20px 16px;
  overflow: hidden;
}
.btn--explore::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--ws-explore-hover-overlay);
  opacity: 0;
  transition: opacity var(--ws-duration-color) var(--ws-ease);
  z-index: -1;
}
.btn--explore:hover::after { opacity: 1; }
.btn--explore:focus-visible { border-radius: var(--ws-radius-pill); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* Busy state: label stays readable, spinner replaces the arrow. */
.btn__spinner {
  display: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: ws-spin 0.8s linear infinite;
}
.btn[aria-busy="true"] .btn__spinner { display: block; }
.btn[aria-busy="true"] .btn__icon { display: none; }
.btn[aria-busy="true"] { cursor: progress; }

@keyframes ws-spin { to { transform: rotate(360deg); } }

/* Text link with arrow ("Or describe it in your own words") */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  font-size: var(--ws-text-small); line-height: var(--ws-leading-small); font-weight: 500;
  color: var(--ws-ink);
}
.link-arrow img { transition: transform var(--ws-duration-micro) var(--ws-ease); }
.link-arrow:hover img, .link-arrow:focus-visible img { transform: rotate(-45deg); }
.link-arrow:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.text-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--ws-border-strong); }
.text-link:hover { text-decoration-color: currentColor; }

/* ============ Field (119:50) ============ */
.field { display: grid; gap: 6px; min-width: 0; align-content: start; position: relative; }
.field__label { font-size: var(--ws-text-small); line-height: var(--ws-leading-small); font-weight: 500; color: var(--ws-ink); }
.field__optional { color: var(--ws-muted); font-weight: 400; }
.field__control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--ws-control-height);
  padding-inline: 14px;
  min-width: 0;
  overflow: hidden;
  background: var(--ws-background);
  border: 1px solid var(--ws-border-strong);
  transition: border-color var(--ws-duration-micro) var(--ws-ease), box-shadow var(--ws-duration-micro) var(--ws-ease), background-color var(--ws-duration-micro) var(--ws-ease);
}
.field__control:hover { border-color: var(--ws-subtle); }
.field__control:focus-within { border-color: var(--ws-ink); box-shadow: 0 0 0 3px rgba(48, 82, 130, 0.16); }
.field__icon { flex: none; width: 16px; height: 16px; }
.field__input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; padding: 0;
  font-size: var(--ws-text-body); line-height: var(--ws-leading-body);
  color: var(--ws-ink);
  appearance: none; -webkit-appearance: none;
}
.field__input:focus-visible { box-shadow: none; }
/* Figma uses Subtle (#9AA0A8) for placeholders; that is 2.6:1 on white. Muted (4.9:1) keeps the hint readable. */
.field__input::placeholder { color: var(--ws-muted); opacity: 1; }
.field__input[type="number"] { -moz-appearance: textfield; }
.field__input[type="number"]::-webkit-outer-spin-button,
.field__input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field__input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
.field__input[type="date"]:invalid, .field__input[type="date"][data-empty="true"] { color: var(--ws-muted); }
.field__suffix { flex: none; color: var(--ws-muted); font-size: var(--ws-text-small); }

/* Button that looks like a field (date trigger) */
.field__trigger {
  flex: 1; min-width: 0; height: 100%;
  display: flex; align-items: center;
  text-align: left;
  font-size: var(--ws-text-body); line-height: var(--ws-leading-body);
  color: var(--ws-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.field__trigger[data-empty="true"] { color: var(--ws-muted); }
.field__trigger:focus-visible { box-shadow: none; }
.field__trigger::after { content: ""; position: absolute; inset: -1px; }

.field__hint { font-size: var(--ws-text-caption); line-height: var(--ws-leading-caption); color: var(--ws-muted); }
.field__error {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--ws-text-caption); line-height: var(--ws-leading-caption);
  color: var(--ws-danger);
}
.field__error::before {
  content: "!";
  flex: none; width: 14px; height: 14px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ws-danger); color: #fff;
  font-size: 10px; line-height: 1; font-weight: 500;
}
.field.is-invalid .field__control { border-color: var(--ws-danger); background: var(--ws-danger-soft); }
.field.is-invalid .field__control:focus-within { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14); }
.field.is-valid .field__control { border-color: var(--ws-border-strong); }
.field.is-disabled .field__control, .field__control:has(.field__input:disabled) { background: var(--ws-soft); border-color: var(--ws-border); cursor: not-allowed; }
.field.is-disabled .field__label { color: var(--ws-muted); }

/* ============ Popover / listbox ============ */
.popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: var(--ws-background);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-md);
  box-shadow: var(--ws-shadow-menu);
  padding: 6px;
  opacity: 0;
  transform: translateY(4px);
  visibility: hidden;
  transition: opacity var(--ws-duration-popover) var(--ws-ease), transform var(--ws-duration-popover) var(--ws-ease), visibility 0s linear var(--ws-duration-popover);
}
.popover.is-open {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity var(--ws-duration-popover) var(--ws-ease), transform var(--ws-duration-popover) var(--ws-ease), visibility 0s;
}
.popover--up { top: auto; bottom: calc(100% + 6px); transform: translateY(-4px); }
.popover--right { left: auto; right: 0; }

.listbox { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.option {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--ws-radius-sm);
  font-size: var(--ws-text-body); line-height: var(--ws-leading-body);
  cursor: pointer;
  color: var(--ws-ink);
}
.option[aria-selected="true"], .option.is-active { background: var(--ws-soft); }
.option__meta { margin-left: auto; color: var(--ws-muted); font-size: var(--ws-text-caption); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.option__alias { color: var(--ws-muted); }
.option mark { background: none; color: inherit; font-weight: 500; }
.option[aria-disabled="true"] { cursor: default; color: var(--ws-muted); }
.listbox__empty { padding: 10px; font-size: var(--ws-text-small); color: var(--ws-muted); }
.listbox__empty strong { color: var(--ws-ink); font-weight: 500; }
.listbox__group { padding: 8px 10px 4px; }

/* ============ Calendar (date popover) ============ */
.calendar { width: 300px; padding: 10px; }
.calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.calendar__title { font-size: var(--ws-text-small); font-weight: 500; }
.calendar__nav {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--ws-radius-sm);
}
.calendar__nav:hover { background: var(--ws-soft); }
.calendar__nav:disabled { opacity: 0.3; cursor: default; background: none; }
.calendar__nav svg { width: 16px; height: 16px; }
.calendar__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar__grid th {
  font-family: var(--ws-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ws-muted); font-weight: 500; padding: 4px 0 6px;
}
.calendar__grid td { padding: 1px; text-align: center; }
.calendar__day {
  width: 100%; aspect-ratio: 1; max-height: 38px;
  display: grid; place-items: center;
  border-radius: var(--ws-radius-sm);
  font-size: var(--ws-text-small);
  font-variant-numeric: tabular-nums;
}
.calendar__day:hover:not(:disabled) { background: var(--ws-soft); }
.calendar__day:disabled { color: var(--ws-border-strong); cursor: default; }
.calendar__day[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--ws-border-strong); }
.calendar__day.is-in-range { background: var(--ws-cloud); border-radius: 0; }
.calendar__day[aria-pressed="true"], .calendar__day.is-range-end { background: var(--ws-ink); color: var(--ws-on-dark); }
.calendar__day:focus-visible { box-shadow: var(--ws-focus-ring); }
.calendar__foot { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--ws-border); }
.calendar__foot-label { width: 100%; font-size: var(--ws-text-caption); color: var(--ws-muted); }
.calendar__status { font-size: var(--ws-text-caption); color: var(--ws-muted); padding-top: 8px; }

/* ============ Chip (118:58) ============ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ws-radius-pill);
  font-size: var(--ws-text-caption); line-height: var(--ws-leading-caption); font-weight: 500;
  white-space: nowrap;
  justify-self: start;
  width: max-content;
  background: var(--ws-background);
  border: 1px solid var(--ws-border);
  color: var(--ws-ink);
}
.chip--dark { background: var(--ws-ink); border-color: var(--ws-ink); color: var(--ws-on-dark); }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
button.chip { min-height: 32px; padding: 6px 12px; cursor: pointer; transition: border-color var(--ws-duration-micro) var(--ws-ease), background-color var(--ws-duration-micro) var(--ws-ease); }
button.chip:hover { border-color: var(--ws-ink); }
button.chip[aria-pressed="true"] { background: var(--ws-ink); border-color: var(--ws-ink); color: var(--ws-on-dark); }

/* Status badge: shape + text, never colour alone. */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--ws-text-caption); line-height: var(--ws-leading-caption);
  color: var(--ws-muted);
}
.status--strong { color: var(--ws-ink); }

/* ============ Card ============ */
.card {
  background: var(--ws-background);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  transition: transform var(--ws-duration-micro) var(--ws-ease), border-color var(--ws-duration-micro) var(--ws-ease), box-shadow var(--ws-duration-micro) var(--ws-ease);
}
.card--interactive:hover { transform: translateY(-2px); border-color: var(--ws-border-strong); box-shadow: var(--ws-shadow-card); }
.panel-soft { background: var(--ws-soft); border-radius: var(--ws-radius-xl); }

/* ============ Alert / feedback ============ */
.alert {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
  padding: 12px 14px;
  border-radius: var(--ws-radius-md);
  font-size: var(--ws-text-small); line-height: var(--ws-leading-small);
  background: var(--ws-soft); color: var(--ws-ink);
  border: 1px solid var(--ws-border);
}
.alert__icon { width: 16px; height: 16px; margin-top: 1px; }
.alert__title { font-weight: 500; }
.alert__body { grid-column: 2; color: var(--ws-muted); }
.alert--error { background: var(--ws-danger-soft); border-color: #f4c7c3; }
.alert--error .alert__title { color: var(--ws-danger); }
.alert--success .alert__title { color: var(--ws-success); }

.loader {
  width: 26px; height: 26px; flex: none;
  animation: ws-spin 1s linear infinite;
}
.loader--s { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) {
  .loader, .btn__spinner { animation-duration: 2.4s; }
}

.skeleton {
  display: block;
  background: linear-gradient(90deg, var(--ws-soft) 0%, #eceef0 50%, var(--ws-soft) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: ws-shimmer 1.4s ease-in-out infinite;
}
@keyframes ws-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.alert__mark {
  width: 16px; height: 16px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--ws-danger); color: #fff;
  font-size: 11px; line-height: 1; font-weight: 500;
}

/* Chip tones (Figma Chip 118:58: Neutral, Accent, Warning) */
.chip--neutral { background: var(--ws-sand); border-color: var(--ws-sand); }
.chip--accent { background: var(--ws-accent-soft); border-color: var(--ws-accent-soft); color: var(--ws-monsoon); }
.chip--success { background: var(--ws-success-soft); border-color: var(--ws-success-soft); color: var(--ws-success); }
.chip--warning { background: var(--ws-warning-soft); border-color: var(--ws-warning-soft); color: var(--ws-warning); }
.chip { transition: background-color var(--ws-duration-color) var(--ws-ease), color var(--ws-duration-color) var(--ws-ease), border-color var(--ws-duration-color) var(--ws-ease); }

/* Check list */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--ws-text-body); line-height: var(--ws-leading-body); }
.check-list img { margin-top: 3px; }

/* ==== chrome.css ==== */
/* Site chrome: header, navigation, language selector, mobile menu, footer.
   Figma: Nav / Website 121:40, Nav / Mobile 270:775, Language switcher 239:766,
   Footer / Website 231:649, Footer / Mobile 273:1107. */

/* ============ Header ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ws-background);
  border-bottom: 1px solid var(--ws-border);
  transition: box-shadow var(--ws-duration-popover) var(--ws-ease), background-color var(--ws-duration-popover) var(--ws-ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(13, 23, 36, 0.05); background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.site-header__bar {
  height: var(--ws-nav-height);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ws-space-6);
}
.site-header__left { display: flex; align-items: center; gap: clamp(28px, 3.4vw, 48px); min-width: 0; }
.site-header__right { display: flex; align-items: center; gap: var(--ws-space-5); }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: 102px; height: auto; }

.nav-primary { display: none; }
.nav-primary__list { display: flex; gap: clamp(20px, 2.1vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav-primary__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.875rem; line-height: 1.43;
  color: var(--ws-ink);
  white-space: nowrap;
}
.nav-primary__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--ws-duration-micro) var(--ws-ease);
}
.nav-primary__link:hover::after, .nav-primary__link[aria-current="page"]::after { transform: scaleX(1); }

.site-header__cta { display: none; }

@media (min-width: 1100px) {
  .nav-primary { display: block; }
  .site-header__cta { display: inline-flex; }
  .site-header .menu-toggle { display: none; }
}
@media (min-width: 640px) and (max-width: 1099.98px) {
  .site-header__cta { display: inline-flex; }
}

/* ============ Language selector ============ */
.lang { position: relative; }
.lang__trigger {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--ws-border-strong);
  border-radius: var(--ws-radius-pill);
  background: var(--ws-background);
  font-size: var(--ws-text-small); font-weight: 500;
  transition: border-color var(--ws-duration-micro) var(--ws-ease);
}
.lang__trigger:hover { border-color: var(--ws-ink); }
.lang__trigger:focus-visible { border-radius: var(--ws-radius-pill); }
.lang__flag { width: 20px; height: 20px; border-radius: 50%; }
.lang__chevron { width: 14px; height: 14px; transition: transform var(--ws-duration-popover) var(--ws-ease); }
.lang__trigger[aria-expanded="true"] .lang__chevron { transform: rotate(180deg); }
.lang .popover { width: 232px; }
.lang__option { display: flex; align-items: center; gap: 10px; }
.lang__option[aria-current="true"] { font-weight: 500; }
.lang__check { margin-left: auto; width: 14px; height: 14px; }
.lang__soon { margin-left: auto; font-size: var(--ws-text-caption); color: var(--ws-muted); }
.lang__note { padding: 8px 10px 4px; font-size: var(--ws-text-caption); color: var(--ws-muted); border-top: 1px solid var(--ws-border); margin-top: 4px; }

/* Language selector on Deep (footer) */
.lang--on-dark .lang__trigger {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2);
  color: var(--ws-on-dark); font-weight: 400; padding: 8px 12px 8px 6px;
}
.lang--on-dark .lang__trigger:hover { border-color: rgba(255, 255, 255, 0.5); }

/* No JS: the language list is a plain disclosure (details/summary). */
.lang details > summary { list-style: none; }
.lang details > summary::-webkit-details-marker { display: none; }
.lang details[open] > .popover { opacity: 1; visibility: visible; transform: none; }

/* ============ Mobile menu ============ */
.menu-toggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  margin-right: -10px;
}
.menu-toggle__bars { position: relative; width: 20px; height: 12px; }
.menu-toggle__bars span {
  position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ws-ink);
  transition: transform var(--ws-duration-popover) var(--ws-ease), top var(--ws-duration-popover) var(--ws-ease), opacity var(--ws-duration-micro);
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 10.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { top: 5.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { top: 5.25px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--ws-nav-height) 0 0 0; z-index: 49;
  background: var(--ws-background);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--ws-duration-popover) var(--ws-ease), transform var(--ws-duration-popover) var(--ws-ease), visibility 0s linear var(--ws-duration-popover);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-menu__inner { padding-block: 8px 32px; display: grid; gap: 28px; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.mobile-menu__link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--ws-border);
  font-size: 1.25rem; letter-spacing: -0.015em;
}
.mobile-menu__link img { width: 16px; height: 16px; opacity: 0.5; }
.mobile-menu__actions { display: grid; gap: 10px; }
body.menu-open { overflow: hidden; }
@media (min-width: 1100px) { .mobile-menu { display: none; } }

/* ============ Footer (wide surface) ============ */
.site-footer { padding-top: clamp(16px, 2.5vw, 40px); }
.footer-surface {
  position: relative;
  width: 100%;
  /* The panel sits on the bottom edge of the page: rounded top, square bottom, wordmark cut off. */
  border-radius: var(--ws-radius-footer) var(--ws-radius-footer) 0 0;
  background: var(--ws-gradient-footer);
  color: var(--ws-on-dark);
  overflow: hidden;
}
.footer-inner {
  max-width: calc(var(--ws-surface-inner) + 2 * clamp(20px, 4vw, 64px));
  margin-inline: auto;
  padding: clamp(36px, 4.5vw, 64px) clamp(20px, 4vw, 64px) 0;
  display: grid; gap: clamp(32px, 3.4vw, 44px);
}
.footer-top { display: grid; gap: 40px; }
.footer-intro { display: grid; gap: 22px; justify-items: start; max-width: 360px; }
.footer-intro p { font-size: var(--ws-text-body-lg); line-height: var(--ws-leading-body-lg); letter-spacing: -0.005em; }
.footer-person {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: var(--ws-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: border-color var(--ws-duration-color) var(--ws-ease), background-color var(--ws-duration-color) var(--ws-ease);
}
.footer-person:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); }
.footer-person:focus-visible { border-radius: var(--ws-radius-pill); }
.footer-person img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.footer-person__name { display: block; font-size: var(--ws-text-small); font-weight: 500; line-height: var(--ws-leading-small); }
.footer-person__role { display: block; font-size: var(--ws-text-caption); line-height: var(--ws-leading-caption); color: var(--ws-on-dark-muted); }

.footer-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-col .eyebrow { color: var(--ws-on-dark-muted); margin-bottom: 2px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-col a {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: var(--ws-text-body); line-height: var(--ws-leading-body);
}
.footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.footer-cities { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 26px; display: grid; gap: 14px; }
.footer-cities .eyebrow { color: var(--ws-on-dark-muted); }
.footer-cities ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.city-chip {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--ws-radius-pill);
  font-size: var(--ws-text-small); font-weight: 500; line-height: var(--ws-leading-small);
  transition: border-color var(--ws-duration-color) var(--ws-ease), background-color var(--ws-duration-color) var(--ws-ease);
}
.city-chip:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); }
.city-chip:focus-visible { border-radius: var(--ws-radius-pill); }
.city-chip.is-soon { color: rgba(255, 255, 255, 0.5); border-style: dashed; border-color: rgba(255, 255, 255, 0.18); }
.city-chip.is-soon:hover { background: none; border-color: rgba(255, 255, 255, 0.18); }

.footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer-legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer-legal li, .footer-legal a, .footer-legal button { font-size: var(--ws-text-small); line-height: var(--ws-leading-small); color: var(--ws-on-dark-muted); }
.footer-legal a, .footer-legal button { display: inline-flex; min-height: 32px; align-items: center; }
.footer-legal a:hover, .footer-legal button:hover { color: var(--ws-on-dark); }
.footer-legal li:first-child { display: inline-flex; align-items: center; min-height: 32px; }

/* The cut-off wordmark: runs to the bottom edge of the panel (Figma: band 158 high, mark 225 high, top 8). */
.footer-wordmark { position: relative; aspect-ratio: 1152 / 158; overflow: hidden; }
.footer-wordmark img { position: absolute; left: 0; top: 5.06%; width: 100%; height: auto; max-width: none; }

@media (min-width: 720px) {
  .footer-columns { grid-template-columns: repeat(4, max-content); gap: 32px 48px; }
}
@media (min-width: 1100px) {
  .footer-top { grid-template-columns: minmax(0, 360px) auto; justify-content: space-between; align-items: start; }
  .footer-columns { gap: 56px; }
}

/* ============ Page transition (Figma 247:681) ============
   A Cloud panel wipes down over the page, the mark lands in the middle, then the panel carries on
   down and out while the next page is already underneath. Only between site pages. */
.page-transition {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--ws-gradient-cloud);
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
}
.page-transition__mark { width: 36px; height: 36px; opacity: 0; }

/* Leaving: cover from the top, the mark flies in */
html.pt-out .page-transition { visibility: visible; animation: pt-cover var(--ws-pt-cover) var(--ws-pt-ease) forwards; }
html.pt-out .page-transition__mark { animation: pt-mark-in 520ms cubic-bezier(0.22, 1, 0.36, 1) 160ms forwards; }
/* Arriving: start covered with the mark in place, hold, then sweep down and out. Pure CSS, so the page
   never stays covered even if JavaScript fails. */
html.pt-in .page-transition { visibility: visible; transform: none; animation: pt-reveal var(--ws-pt-reveal) var(--ws-pt-ease) var(--ws-pt-hold) forwards; }
html.pt-in .page-transition__mark { opacity: 1; animation: pt-mark-out 360ms ease-in var(--ws-pt-hold) forwards; }

@keyframes pt-cover { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes pt-reveal { from { transform: none; } to { transform: translateY(100%); visibility: hidden; } }
@keyframes pt-mark-in { from { opacity: 0; transform: translateY(-28px) scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes pt-mark-out { to { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
  /* Crossfade instead of a wipe */
  html.pt-out .page-transition { transform: none; opacity: 0; animation: pt-fade-in 200ms linear forwards; }
  html.pt-out .page-transition__mark { animation: none; opacity: 1; }
  html.pt-in .page-transition { animation: pt-fade-out 250ms linear 50ms forwards; }
  html.pt-in .page-transition__mark { animation: none; }
  @keyframes pt-fade-in { to { opacity: 1; } }
  @keyframes pt-fade-out { to { opacity: 0; visibility: hidden; } }
}
.city-chip--all { border-style: solid; background: rgba(255, 255, 255, 0.08); }

/* Chat popup (bottom right) */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: grid; justify-items: end; gap: 12px; }
.chat[hidden] { display: none; }
.chat__launcher { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--ws-ink); color: #fff; font: inherit; font-size: var(--ws-text-small); font-weight: 500; cursor: pointer; box-shadow: 0 8px 24px rgba(13, 23, 36, 0.22); transition: transform 200ms var(--ws-ease), background var(--ws-duration-color) var(--ws-ease); order: 2; }
.chat__launcher:hover { background: #26282c; transform: translateY(-1px); }
.chat__spark { filter: brightness(0) invert(1); }
.chat__panel { order: 1; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100svh - 120px)); background: var(--ws-background); border-radius: 18px; box-shadow: 0 24px 64px rgba(13, 23, 36, 0.24), 0 0 0 1px rgba(13, 23, 36, 0.06); display: grid; grid-template-rows: auto 1fr auto auto; overflow: hidden; opacity: 0; transform: translateY(10px) scale(0.98); transform-origin: bottom right; transition: opacity 220ms var(--ws-ease), transform 220ms var(--ws-ease); }
.chat__panel[hidden] { display: none; }
.chat__panel.is-open { opacity: 1; transform: none; }
.chat__head { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 14px 14px 12px 16px; background: var(--ws-gradient-cloud); border-bottom: 1px solid var(--ws-border); }
.chat__title { font-size: var(--ws-text-title); font-weight: 500; line-height: 1.2; }
.chat__sub { font-size: var(--ws-text-caption); color: var(--ws-muted); }
.chat__close { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.chat__close:hover { background: var(--ws-soft); }
.chat__log { overflow-y: auto; padding: 16px; display: grid; gap: 10px; align-content: start; overscroll-behavior: contain; }
.chat__msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: var(--ws-text-body); line-height: 1.45; display: grid; gap: 6px; }
.chat__msg--bot { background: var(--ws-soft); border-bottom-left-radius: 4px; justify-self: start; }
.chat__msg--user { background: var(--ws-ink); color: #fff; border-bottom-right-radius: 4px; justify-self: end; }
.chat__msg--error { background: var(--ws-warning-soft); }
.chat__msg a { color: var(--ws-monsoon); text-decoration: underline; text-underline-offset: 2px; }
.chat__msg ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.chat__suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.chat__suggest[hidden] { display: none; }
.chat__chip { font: inherit; font-size: var(--ws-text-small); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--ws-border-strong); background: var(--ws-background); cursor: pointer; }
.chat__chip:hover { border-color: var(--ws-ink); }
.chat__form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--ws-border); }
.chat__form textarea { flex: 1; resize: none; border: 1px solid var(--ws-border-strong); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: var(--ws-text-body); line-height: 1.4; max-height: 120px; }
.chat__form textarea:focus-visible { outline: none; border-color: var(--ws-ink); box-shadow: 0 0 0 3px rgba(48, 82, 130, 0.16); }
.chat__send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ws-ink); cursor: pointer; display: grid; place-items: center; flex: none; }
.chat__send:hover { background: #26282c; }
.chat__note { padding: 0 14px 10px; font-size: 11px; color: var(--ws-muted); }
.chat__note a { color: inherit; text-decoration: underline; }
.chat__typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ws-subtle); animation: chat-dot 1s infinite ease-in-out; }
.chat__typing i:nth-child(2) { animation-delay: 150ms; }
.chat__typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 559.98px) {
  .chat { right: 12px; bottom: 12px; left: 12px; }
  .chat__panel { width: 100%; height: min(78svh, 620px); }
}
@media (prefers-reduced-motion: reduce) { .chat__panel, .chat__launcher { transition: none; } .chat__typing i { animation: none; } }

/* ==== product.css ==== */
/* Product components, reused across homepage, city pages, request flow and workspace.
   RequestStarter, SourcingLive, OfferCard / OfferComparison, ProjectMap, Timeline, FactList. */

/* ============ RequestStarter (176:374) ============ */
.request-starter {
  display: grid;
  gap: clamp(10px, 2vw, 24px);
  padding: clamp(10px, 1.9vw, 24px);
  border-radius: var(--ws-radius-xl);
  background: var(--ws-gradient-monsoon-diagonal);
}
.request-card {
  background: var(--ws-background);
  border-radius: var(--ws-radius-lg);
  padding: clamp(18px, 1.9vw, 26px);
  display: grid;
  gap: 16px;
  align-content: start;
}
.request-card__title { font-size: var(--ws-text-h3); line-height: var(--ws-leading-h3); letter-spacing: var(--ws-tracking-h3); }
.request-card__fields { display: grid; gap: 12px 14px; grid-template-columns: minmax(0, 1fr); }
.request-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.request-card__reassure { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.request-card__reassure li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ws-text-caption); line-height: var(--ws-leading-caption); color: var(--ws-muted); }
.request-card__reassure img { width: 14px; height: 14px; }
.request-card__status:empty { display: none; }
.request-card .alert { margin-top: -4px; }

@media (min-width: 640px) {
  .request-card__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  .request-card__actions .btn { width: 100%; }
  .request-card__actions .link-arrow { width: 100%; justify-content: center; }
  .request-card__reassure { flex-direction: column; }
}

/* "What happens next" (176:398): translucent white layer on the gradient */
.next-steps {
  color: var(--ws-on-dark);
  border-radius: var(--ws-radius-lg);
  padding: clamp(18px, 1.9vw, 22px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: grid; gap: 16px; align-content: start;
}
.next-steps .eyebrow { color: var(--ws-on-dark); }
.next-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.next-steps h3 { font-size: var(--ws-text-title); line-height: var(--ws-leading-title); font-weight: 500; letter-spacing: -0.005em; margin-bottom: 4px; }
.next-steps p { font-size: var(--ws-text-small); line-height: var(--ws-leading-small); opacity: 0.86; max-width: 336px; }

@media (min-width: 1200px) {
  .request-starter { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); }
}
@media (max-width: 1199.98px) {
  /* Stacked below the form the panel reaches the light end of the diagonal, where white text
     fails contrast. Below 1024 the card turns into light glass with ink text (deliberate deviation). */
  .next-steps { color: var(--ws-ink); background: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.9); }
  .next-steps .eyebrow { color: var(--ws-muted); }
  .next-steps p { opacity: 1; color: var(--ws-muted); }
  .next-steps ol { gap: 16px; }
}
@media (min-width: 640px) and (max-width: 1199.98px) {
  .next-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============ Credibility strip / FactStrip (250:130) ============ */
.fact-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 8px;
  background: var(--ws-soft);
  border-radius: var(--ws-radius-lg);
  list-style: none; margin: 0;
}
.fact-strip li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; position: relative; }
.fact-strip li + li::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: var(--ws-border-strong); opacity: 0.6;
}
.fact-strip img { width: 20px; height: 20px; flex: none; }
.fact-strip strong { display: block; font-weight: 500; font-size: var(--ws-text-small); line-height: var(--ws-leading-small); }
.fact-strip span { display: block; font-size: var(--ws-text-small); line-height: var(--ws-leading-small); color: var(--ws-muted); }
@media (min-width: 720px) {
  .fact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-strip li:nth-child(3)::before, .fact-strip li:nth-child(4)::before { left: 16px; right: 16px; }
  .fact-strip li:nth-child(2)::before { display: none; }
}
@media (min-width: 1240px) {
  /* Columns size to their content so no line wraps; the spare width goes between them. */
  .fact-strip { grid-template-columns: repeat(4, max-content); justify-content: space-between; }
  .fact-strip li { padding: 16px 28px 16px 30px; gap: 12px; }
  .fact-strip li:first-child { padding-left: 20px; }
  .fact-strip li + li::before { left: 0; right: auto; top: 50%; width: 1px; height: 36px; transform: translateY(-50%); opacity: 1; display: block !important; }
}

/* ============ SourcingLive (177:327) ============ */
.sourcing-live {
  --sl-pad: clamp(18px, 3.6vw, 48px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--ws-radius-xl);
  background: var(--ws-gradient-deep);
  color: var(--ws-on-dark);
  padding: clamp(18px, 3vw, 40px) clamp(18px, 3.4vw, 44px);
  display: grid; gap: clamp(18px, 2vw, 24px);
}
/* Beam (Monsoon/06) cross-fades in at the first offer. */
.sourcing-live::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ws-gradient-beam);
  opacity: 0;
  transition: opacity 1400ms var(--ws-ease);
}
.sourcing-live[data-stage="4"]::before { opacity: 1; }
.sourcing-live__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.sourcing-live__request { font-size: var(--ws-text-title); line-height: var(--ws-leading-title); font-weight: 500; letter-spacing: -0.005em; }
.sourcing-live__phase { color: var(--ws-on-dark); }
.sourcing-live__counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.counter {
  display: grid; gap: 4px; align-content: start;
  padding: clamp(14px, 1.8vw, 22px);
  border-radius: var(--ws-radius-lg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background-color 600ms var(--ws-ease);
  min-width: 0;
}
.counter.is-highlight { background: rgba(255, 255, 255, 0.16); }
.counter { transition: background-color 800ms var(--ws-ease), border-color 800ms var(--ws-ease); }
.counter__value { height: 34px; display: flex; align-items: center; }
.counter__value .t-number { transition: opacity 400ms var(--ws-ease); }
.counter__value .is-pending { opacity: 0.35; }
.counter__label { font-size: var(--ws-text-small); line-height: var(--ws-leading-small); font-weight: 500; }
.counter__note { font-size: var(--ws-text-caption); line-height: var(--ws-leading-caption); opacity: 0.78; min-height: 16px; }
@media (min-width: 900px) {
  .sourcing-live__counters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}
.feed { list-style: none; margin: 0; padding: 0; }
.feed__item {
  display: grid; grid-template-columns: 44px 14px minmax(0, 1fr); align-items: center; gap: 12px;
  padding-block: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--ws-text-body); line-height: var(--ws-leading-body);
  transition: opacity 700ms var(--ws-ease);
}
.feed__item[data-state="future"] { opacity: 0.22; }
.feed__item[data-state="now"] .feed__text { opacity: 0.9; }
.feed__time { font-family: var(--ws-font-mono); font-size: var(--ws-text-small); opacity: 0.78; font-variant-numeric: tabular-nums; }
.feed__mark { display: grid; place-items: center; }
.feed__mark img { width: 8px; height: 8px; }
.feed__mark img.feed__check { width: 14px; height: 14px; }
.counter__label { display: flex; align-items: center; gap: 6px; }
.counter__check { width: 14px; height: 14px; opacity: 0; transform: scale(0.6); transition: opacity 300ms var(--ws-ease), transform 300ms var(--ws-ease); }
.counter.is-done .counter__check { opacity: 1; transform: none; }
.feed__mark .loader { width: 12px; height: 12px; }
.feed__item.is-key .feed__text { font-weight: 500; }
.sourcing-live__foot { display: flex; justify-content: flex-end; margin-top: -8px; }
.sourcing-live__replay {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px;
  font-size: var(--ws-text-caption); color: var(--ws-on-dark-muted); border-radius: var(--ws-radius-pill);
}
.sourcing-live__replay:hover { color: var(--ws-on-dark); background: rgba(255, 255, 255, 0.06); }
.sourcing-live__replay:focus-visible { border-radius: var(--ws-radius-pill); box-shadow: 0 0 0 2px var(--ws-on-dark); }
.sourcing-live__replay[hidden] { display: none; }
@media (max-width: 639.98px) {
  .feed__item { grid-template-columns: 38px 10px minmax(0, 1fr); gap: 10px; font-size: var(--ws-text-small); }
}

/* ============ Photo moment (178:567) ============ */
.photo-moment {
  position: relative;
  border-radius: var(--ws-radius-xl);
  overflow: hidden;
  min-height: clamp(360px, 38vw, 500px);
  display: flex; align-items: flex-end;
  padding: clamp(10px, 2.8vw, 36px);
}
.photo-moment > picture, .photo-moment > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.data-card {
  position: relative;
  background: var(--ws-background);
  border-radius: var(--ws-radius-lg);
  padding: clamp(18px, 2vw, 26px);
  width: min(440px, 100%);
  display: grid; gap: 12px;
}
.data-card__title { font-size: var(--ws-text-h3); line-height: var(--ws-leading-h3); letter-spacing: var(--ws-tracking-h3); }
.data-card hr { border: 0; height: 1px; background: var(--ws-border); margin: 2px 0; }
.data-card dl { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.data-card dl div { display: grid; gap: 2px; }
.data-card dd { font-size: clamp(1.5rem, 2.2vw, 1.75rem); line-height: 1.19; letter-spacing: -0.025em; order: -1; }
.data-card dt { font-size: var(--ws-text-caption); line-height: var(--ws-leading-caption); color: var(--ws-muted); }

/* ============ OfferCard (122:346) / OfferComparison ============ */
.offer-panel {
  background: var(--ws-soft);
  border-radius: var(--ws-radius-xl);
  padding: clamp(10px, 2vw, 24px);
}
.offer-rail {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.offer-card {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  height: 100%;
  padding: clamp(18px, 1.8vw, 24px);
  background: var(--ws-background);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  transition: transform var(--ws-duration-micro) var(--ws-ease), box-shadow var(--ws-duration-micro) var(--ws-ease), border-color var(--ws-duration-micro) var(--ws-ease);
}
.offer-card:hover { transform: translateY(-2px); box-shadow: var(--ws-shadow-card); }
.offer-card--best { background: var(--ws-gradient-cloud); border-color: var(--ws-border-strong); }
.offer-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offer-card--best .offer-card__head { justify-content: flex-start; }
.offer-card__quote { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--ws-radius-md); background: var(--ws-soft); }
.offer-card--best .offer-card__quote, .offer-card--best .offer-card__match { background: var(--ws-background); }
.offer-card__quote p:not(.eyebrow):not(.offer-card__converted) { font-size: var(--ws-text-small); line-height: var(--ws-leading-small); }
.offer-card__converted { display: flex; align-items: center; gap: 6px; font-size: var(--ws-text-caption); color: var(--ws-muted); margin-top: 4px; }
.offer-card__converted img { width: 14px; height: 14px; }
.offer-card__price { display: grid; gap: 2px; }
.offer-card__total { font-size: clamp(1.5rem, 1.9vw, 1.75rem); line-height: var(--ws-leading-number); letter-spacing: var(--ws-tracking-number); font-variant-numeric: tabular-nums; }
.offer-card__total-note { font-size: var(--ws-text-caption); line-height: var(--ws-leading-caption); color: var(--ws-muted); }
.offer-card__per-night { display: flex; align-items: baseline; gap: 6px; }
.offer-card__per-night strong { font-weight: 500; font-size: var(--ws-text-title); letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.offer-card__per-night span { font-size: var(--ws-text-small); color: var(--ws-muted); }
.offer-card hr { border: 0; height: 1px; background: var(--ws-border); margin: 0; }
.offer-card__facts { list-style: none; margin: 10px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ws-border); display: grid; gap: 8px; }
.offer-card__facts li, .offer-card__track { display: flex; align-items: center; gap: 6px; font-size: var(--ws-text-small); line-height: var(--ws-leading-small); }
.offer-card__facts img, .offer-card__track img, .offer-card__match img { width: 16px; height: 16px; flex: none; }
.offer-card__track { font-size: var(--ws-text-caption); font-weight: 500; gap: 8px; }
.offer-card__match { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--ws-radius-md); background: var(--ws-soft); }
.offer-card__match strong { display: flex; align-items: center; gap: 8px; font-size: var(--ws-text-small); font-weight: 500; }
.offer-card__match span { font-size: var(--ws-text-caption); color: var(--ws-muted); }
.offer-card__delta { font-size: var(--ws-text-caption); color: var(--ws-muted); margin-top: 2px; }
.offer-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; }
.offer-card__foot .btn { --btn-h: 34px; padding-inline: 12px; }
.offer-card__held { font-size: var(--ws-text-caption); color: var(--ws-muted); }
.offer-note { margin-top: 16px; font-size: var(--ws-text-caption); color: var(--ws-muted); }

.rail-status { display: none; align-items: center; gap: 10px; margin-bottom: 12px; font-size: var(--ws-text-caption); color: var(--ws-muted); }
.rail-dots { display: flex; gap: 4px; }
.rail-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--ws-border-strong); transition: width var(--ws-duration-popover) var(--ws-ease), background-color var(--ws-duration-popover); }
.rail-dots span.is-active { width: 18px; background: var(--ws-ink); }

@media (max-width: 1023.98px) {
  /* Mobile/tablet Figma: offers become a swipe rail with a peeking next card. */
  .offer-panel { background: none; padding: 0; }
  .offer-rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82%, 340px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ws-gutter);
    padding-inline: var(--ws-gutter);
    margin-inline: calc(-1 * var(--ws-gutter));
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .offer-rail::-webkit-scrollbar { display: none; }
  .offer-rail > li { scroll-snap-align: start; }
  .rail-status { display: flex; }
}

/* ============ Compare: without / with (176:592) ============ */
.compare { display: grid; gap: 16px; }
@media (min-width: 900px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; } }
.compare__without { background: var(--ws-soft); border-radius: var(--ws-radius-xl); padding: clamp(20px, 2.8vw, 34px); display: grid; gap: 16px; align-content: start; }
.compare__without dl { display: grid; }
.compare__without dl div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: 16px; align-items: start;
  padding-block: 13px; border-bottom: 1px dashed var(--ws-border-strong);
}
.compare__without dt { font-size: var(--ws-text-body); line-height: var(--ws-leading-body); }
.compare__without dd { font-family: var(--ws-font-mono); font-size: var(--ws-text-small); line-height: var(--ws-leading-small); color: var(--ws-muted); text-align: right; justify-self: end; max-width: 250px; padding-top: 2px; }
.compare__with {
  /* Lighter than the Figma v2 card (Diagonal): Monsoon/03 Cloud with ink text, per review 23-09. */
  color: var(--ws-ink);
  background: var(--ws-gradient-cloud);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-xl);
  padding: clamp(20px, 2.8vw, 34px);
  display: grid; gap: 16px; align-content: start;
}
.compare__with-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.compare__with-intro { max-width: 460px; }
.compare__with ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ws-border-strong); }
.compare__with li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; gap: 12px;
  padding-block: 12px; border-bottom: 1px solid var(--ws-border-strong);
}
.compare__with li strong { font-weight: 400; font-size: var(--ws-text-number); line-height: var(--ws-leading-number); letter-spacing: var(--ws-tracking-number); font-variant-numeric: tabular-nums; }
.compare__with li span { font-size: var(--ws-text-body-lg); line-height: var(--ws-leading-body-lg); }

/* ============ Steps (176:415) ============ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 20px; grid-template-columns: minmax(0, 1fr); }
.steps li { border-top: 1px solid var(--ws-ink); padding-block: 20px 16px; display: grid; gap: 10px; align-content: start; }
.steps .t-data { color: var(--ws-muted); }
.steps h3 { font-size: var(--ws-text-h3); line-height: var(--ws-leading-h3); letter-spacing: var(--ws-tracking-h3); font-weight: 400; }
.steps p { color: var(--ws-muted); }
@media (max-width: 639.98px) {
  .steps li { grid-template-columns: 28px minmax(0, 1fr); gap: 2px 8px; padding-block: 14px; border-top-color: var(--ws-border); }
  .steps li .t-data { grid-row: span 2; padding-top: 3px; }
  .steps h3 { font-size: var(--ws-text-title); font-weight: 500; letter-spacing: -0.005em; }
  .steps p { font-size: var(--ws-text-small); }
}
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============ Mini case (179:598) ============ */
.mini-case { display: grid; gap: clamp(24px, 4.4vw, 60px); align-items: start; }
@media (min-width: 900px) { .mini-case { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mini-case__photo { border-radius: var(--ws-radius-xl); overflow: hidden; aspect-ratio: 620 / 640; }
.mini-case__photo img { width: 100%; height: 100%; object-fit: cover; }
.mini-case__body { display: grid; gap: 20px; justify-items: start; }
.fact-list { width: 100%; display: grid; }
.fact-list div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding-block: 11px; border-top: 1px solid var(--ws-border); }
.fact-list dt { color: var(--ws-muted); }
.timeline { display: grid; gap: 8px; }
.timeline h3 { font-size: var(--ws-text-small); font-weight: 500; line-height: var(--ws-leading-small); margin-bottom: 2px; }
.timeline ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.timeline li { display: grid; grid-template-columns: 150px 7px minmax(0, 1fr); align-items: center; gap: 16px; }
.timeline time { font-family: var(--ws-font-mono); font-size: var(--ws-text-small); color: var(--ws-muted); }
.timeline li img { width: 7px; height: 7px; }
@media (max-width: 639.98px) {
  .timeline li { grid-template-columns: 90px 7px minmax(0, 1fr); gap: 10px; }
  .timeline time .tl-clock { display: none; }
  .fact-list div { grid-template-columns: 84px minmax(0, 1fr); }
}

/* ============ Teaser strip (261:211) ============ */
.teaser-strip {
  display: grid; gap: 18px; align-items: center;
  background: var(--ws-soft); border-radius: var(--ws-radius-xl);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px);
}
.teaser-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.teaser-strip li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ws-text-small); font-weight: 500; }
.teaser-strip li img { width: 16px; height: 16px; }
@media (min-width: 1024px) { .teaser-strip { grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; } }

/* ============ Trust (176:484 + 180:540) ============ */
.trust-grid { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-lg); }
.trust-grid li { padding: clamp(18px, 2vw, 24px); display: grid; gap: 12px; align-content: start; }
.trust-grid li + li { border-top: 1px solid var(--ws-border); }
.trust-grid img { width: 22px; height: 22px; }
.trust-grid h3 { font-size: var(--ws-text-title); line-height: var(--ws-leading-title); font-weight: 500; letter-spacing: -0.005em; }
.trust-grid p { font-size: var(--ws-text-small); line-height: var(--ws-leading-small); color: var(--ws-muted); max-width: 260px; }
@media (min-width: 640px) {
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid li + li { border-top: 0; }
  .trust-grid li:nth-child(even) { border-left: 1px solid var(--ws-border); }
  .trust-grid li:nth-child(n + 3) { border-top: 1px solid var(--ws-border); }
}
@media (min-width: 1024px) {
  .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust-grid li:nth-child(n + 2) { border-left: 1px solid var(--ws-border); border-top: 0; }
}
.human-backup {
  margin-top: 16px;
  display: grid; gap: 20px 36px; align-items: center;
  border: 1px solid var(--ws-border); border-radius: var(--ws-radius-xl);
  padding: clamp(20px, 3vw, 36px);
}
.human-backup__photo { width: clamp(64px, 7vw, 96px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.human-backup__text { display: grid; gap: 10px; max-width: 560px; }
.human-backup__text p { color: var(--ws-muted); }
.human-backup__contact { display: grid; gap: 10px; justify-items: start; max-width: 280px; }
.human-backup__contact p { font-size: var(--ws-text-small); line-height: var(--ws-leading-small); color: var(--ws-muted); }
@media (min-width: 900px) { .human-backup { grid-template-columns: auto minmax(0, 1fr) auto; } }

/* ============ ProjectMap (188:566) ============ */
.project-map {
  position: relative;
  border-radius: var(--ws-radius-xl);
  overflow: hidden;
  background: var(--ws-map-sea);
  aspect-ratio: 1280 / 610;   /* Figma 1280 x 760, cropped to rows 40-650: every marker stays in view */
}
.project-map__base { position: absolute; left: 0; top: -6.557%; width: 100%; height: 124.59%; max-width: none; }
.project-map__fade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ws-map-sea) 0%, rgba(241, 243, 245, 0) 12.5%),
    linear-gradient(270deg, var(--ws-map-sea) 0%, rgba(241, 243, 245, 0) 12.5%),
    linear-gradient(180deg, var(--ws-map-sea) 0%, rgba(241, 243, 245, 0) 11.8%),
    linear-gradient(0deg, var(--ws-map-sea) 0%, rgba(241, 243, 245, 0) 14.5%);
}
.map-markers { list-style: none; margin: 0; padding: 0; }
.map-marker {
  --m: 28px;
  position: absolute;
  display: flex; align-items: center; gap: 0;
  transform: translate(calc(var(--m) / -2), -50%);
}
.map-marker img { width: var(--m); height: var(--m); }
.map-marker > span { font-size: var(--ws-text-caption); line-height: 16px; color: var(--ws-muted); white-space: nowrap; }
.map-marker--label-left { flex-direction: row-reverse; transform: translate(calc(-100% + var(--m) / 2), -50%); }
.map-marker.is-dim { opacity: 0.5; }
.map-marker--focus > span { color: var(--ws-ink); font-size: var(--ws-text-small); font-weight: 500; }
.map-marker--focus::before {
  content: ""; position: absolute; left: calc(var(--m) / 2); top: 50%;
  width: 34px; height: 34px; transform: translate(-50%, -50%);
  border: 1px dashed var(--ws-subtle); border-radius: 50%;
}
.map-inset {
  position: absolute; left: 28%; top: 12px;
  width: 236px;
  background: var(--ws-background); border-radius: var(--ws-radius-lg);
  box-shadow: var(--ws-shadow-pop);
  padding: 12px 14px 12px;
  display: grid; gap: 8px;
}
.map-inset__head { display: flex; justify-content: space-between; align-items: center; }
.map-inset__head strong { font-size: var(--ws-text-small); font-weight: 500; }
.map-inset__radius { position: relative; height: 120px; background: var(--ws-soft); border-radius: var(--ws-radius-md); overflow: hidden; }
.map-inset__radius > img { position: absolute; }
.map-inset p { font-size: var(--ws-text-caption); color: var(--ws-muted); }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; list-style: none; margin: 0; padding: 0; }
.map-legend li { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ws-text-caption); color: var(--ws-muted); }
.map-legend li img { width: 6px; height: 6px; }
.map-connector { position: absolute; width: 1px; background: var(--ws-subtle); }
.map-projects {
  position: absolute; right: 2.5%; top: 24px;
  width: 318px;
  background: var(--ws-background); border-radius: var(--ws-radius-lg);
  box-shadow: var(--ws-shadow-card);
  padding: 12px 12px 10px;
}
.map-projects__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; }
.map-projects__head h3 { font-size: var(--ws-text-small); font-weight: 500; line-height: var(--ws-leading-small); }
.map-projects ul { list-style: none; margin: 0; padding: 0; }
.map-projects__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px 4px 2px; border-radius: var(--ws-radius-sm); }
.map-projects__row > img { width: 20px; height: 20px; }
.map-projects__row.is-focus { background: var(--ws-soft); }
.map-projects__row strong { display: block; font-size: var(--ws-text-small); font-weight: 500; line-height: 16px; }
.map-projects__row span { display: block; font-size: var(--ws-text-caption); color: var(--ws-muted); line-height: var(--ws-leading-caption); }
.map-projects__row .status { text-align: right; white-space: nowrap; }
.map-projects__row span { white-space: nowrap; }
.map-projects__more { font-size: var(--ws-text-caption); color: var(--ws-muted); padding: 2px 0 6px; }
.map-projects__legend { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 6px; border-top: 1px solid var(--ws-border); padding-top: 6px; list-style: none; margin: 0; padding-left: 0; }
.map-projects__legend li { display: inline-flex; align-items: center; gap: 2px; font-size: var(--ws-text-caption); color: var(--ws-muted); }
.map-projects__legend img { width: 18px; height: 18px; }
.map-projects__legend li { gap: 3px; white-space: nowrap; font-size: 11.5px; }

.project-map-wrap { position: relative; }
@media (max-width: 1023.98px) {
  /* Tablet/mobile (Figma 01m): the map stays whole; the Hamburg inset and project list move below it. */
  .project-map-wrap { display: grid; gap: 12px; }
  .project-map { overflow: hidden; }
  .map-marker { --m: 18px; }
  .map-marker > span { font-size: 10px; }
  .map-marker--focus::before { width: 24px; height: 24px; }
  .map-inset { position: static; width: auto; box-shadow: none; border: 1px solid var(--ws-border); grid-template-columns: 1fr; }
  .map-projects { position: static; width: auto; box-shadow: none; border: 1px solid var(--ws-border); }
  .map-connector { display: none; }
  .map-inset__radius { width: 204px; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .project-map-wrap { grid-template-columns: 1fr 1fr; }
  .project-map { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .map-projects { position: absolute; }
}

/* ============ Supply band (261:245) ============ */
.supply-band {
  color: var(--ws-on-dark);
  background: var(--ws-gradient-frost);
  border-radius: var(--ws-radius-xl);
  padding: clamp(22px, 2.8vw, 34px) clamp(20px, 3vw, 38px);
  display: grid; gap: 20px; align-items: center;
}
.supply-band__text { display: grid; gap: 6px; }
.supply-band__text .eyebrow { color: var(--ws-on-dark); }
.supply-band__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 1024px) { .supply-band { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; } }
@media (max-width: 639.98px) { .supply-band__actions .btn { width: 100%; } }

/* ============ Final CTA + RequestBar (176:530) ============ */
.final-cta { text-align: center; display: grid; gap: clamp(24px, 2.6vw, 30px); justify-items: center; }
.request-bar {
  width: 100%; max-width: 1080px;
  display: grid; gap: 12px; text-align: left;
  border: 1px solid var(--ws-border); padding: 12px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .request-bar { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
}
@media (max-width: 639.98px) {
  .final-cta { text-align: left; justify-items: stretch; }
  .request-bar { border: 0; padding: 0; }
}

/* ============ CaseSlider ============ */
/* Each slide is exactly the container width; the track runs on to the right edge of the viewport,
   so the next case shows at the edge and tells you there is more. */
.case-slider { position: relative; container-type: inline-size; }
.case-track {
  --peek-room: calc((100vw - 100cqw) / 2);
  --slide-w: 100cqw;
  --gap: 16px;
  list-style: none; margin: 0; padding: 0;
  margin-right: calc(-1 * var(--peek-room));
  display: flex; gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.case-track > li { flex: 0 0 var(--slide-w); }
/* Trailing room so the last slide can scroll all the way to the start position. */
.case-track::after, .offer-slider__track::after { content: ""; flex: 0 0 max(0px, calc(100% - var(--slide-w) - var(--gap))); }
@media (max-width: 639.98px) {
  /* Phone gutters are narrow: make the slide a bit narrower so the next one still peeks in. */
  .case-track { --slide-w: 88cqw; --gap: 10px; }
}
.case-slide .photo-moment { transition: opacity 600ms var(--ws-ease); }
.case-slider.is-ready .case-slide:not(.is-current) .photo-moment { opacity: 0.55; }
.case-slider.is-ready .case-slide:not(.is-current) { cursor: pointer; }
.case-track::-webkit-scrollbar { display: none; }
.case-track:focus-visible { box-shadow: var(--ws-focus-ring); }
.case-slide { scroll-snap-align: start; scroll-snap-stop: always; }
.case-slide .photo-moment img { transition: transform 1200ms var(--ws-ease); }
.case-slide:not(.is-current) .photo-moment img { transform: scale(1.03); }
.case-slide .data-card { transition: opacity 600ms var(--ws-ease), transform 600ms var(--ws-ease); }
.case-slide:not(.is-current) .data-card { opacity: 0; transform: translateY(10px); }
.no-js .case-slide .data-card, .case-slider:not(.is-ready) .case-slide .data-card { opacity: 1; transform: none; }
.data-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.case-controls {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px;
}
.case-controls[hidden] { display: none; }
.case-dots { display: flex; gap: 6px; }
.case-dots__dot {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
}
.case-dots__dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--ws-border-strong);
  transition: width 400ms var(--ws-ease), background-color 400ms var(--ws-ease);
}
.case-dots__dot[aria-current="true"]::before { width: 18px; background: var(--ws-ink); }
.case-dots__dot:focus-visible { border-radius: 12px; }
.case-count { font-family: var(--ws-font-mono); font-size: var(--ws-text-caption); color: var(--ws-muted); font-variant-numeric: tabular-nums; }
.case-arrows { margin-left: auto; display: flex; gap: 8px; }
.case-arrow {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--ws-border-strong); border-radius: 50%; background: var(--ws-background);
  transition: background-color var(--ws-duration-color) var(--ws-ease), border-color var(--ws-duration-color) var(--ws-ease), opacity var(--ws-duration-color) var(--ws-ease);
}
.case-arrow:hover:not(:disabled) { background: var(--ws-ink); border-color: var(--ws-ink); }
.case-arrow img { transition: filter var(--ws-duration-color) var(--ws-ease); }
.case-arrow:hover:not(:disabled) img { filter: invert(1); }
.case-arrow:disabled { opacity: 0.35; cursor: default; }
.case-arrow:focus-visible { border-radius: 50%; }
.case-arrow__icon--prev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .case-track { scroll-behavior: auto; } }

/* ============ Offer slider (208:1070) ============ */
.offer-slider { background: var(--ws-soft); border-radius: var(--ws-radius-xl); padding: clamp(12px, 1.6vw, 20px); overflow: hidden; container-type: inline-size; }
.offer-slider__track {
  --slide-w: min(78cqw, 360px);
  --gap: 16px;
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
  margin-right: calc(-1 * clamp(12px, 1.6vw, 20px));
}
.offer-slider__track > li { flex: 0 0 var(--slide-w); }
.offer-slider__track::-webkit-scrollbar { display: none; }
.offer-slider__track:focus-visible { box-shadow: var(--ws-focus-ring); }
.offer-slide { scroll-snap-align: start; }
.offer-slide .offer-card { transition: opacity 500ms var(--ws-ease); }
.offer-slider.is-ready .offer-slide:not(.is-current) .offer-card { cursor: pointer; }
.offer-slider__count { font-size: var(--ws-text-small); font-weight: 500; }

/* ============ Payment schedule (197:912) ============ */
.pay-card { background: var(--ws-gradient-cloud); border: 1px solid var(--ws-border); border-radius: var(--ws-radius-xl); padding: clamp(18px, 2.2vw, 28px); display: grid; gap: 6px; }
.pay-card__amount { font-size: var(--ws-text-number); line-height: var(--ws-leading-number); letter-spacing: var(--ws-tracking-number); margin-top: 8px; font-variant-numeric: tabular-nums; }
.pay-card__note { font-size: var(--ws-text-small); color: var(--ws-muted); margin-bottom: 10px; }
.pay-card__table { width: 100%; background: var(--ws-background); border-radius: var(--ws-radius-md); overflow: hidden; }
.pay-card__table th, .pay-card__table td { padding: 12px 14px; border-bottom: 1px solid var(--ws-border); text-align: left; font-weight: 400; }
.pay-card__table tr:last-child th, .pay-card__table tr:last-child td { border-bottom: 0; }
.pay-card__table th { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--ws-text-body); }
.pay-card__table td { text-align: right; white-space: nowrap; vertical-align: middle; }
.pay-card__total th { font-size: var(--ws-text-small); font-weight: 500; }

/* ============ Extend stay (197:963) ============ */
.extend-card { background: var(--ws-soft); border-radius: var(--ws-radius-xl); padding: clamp(18px, 2.2vw, 28px); display: grid; gap: 14px; }
.extend-card__notice { display: flex; align-items: center; gap: 14px; background: var(--ws-accent-soft); border-radius: var(--ws-radius-lg); padding: 16px 18px; }
.extend-card__notice img { flex: none; }
.extend-card__notice .muted { color: var(--ws-muted-on-tint); }
.extend-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.extend-card__actions .btn[aria-pressed="true"] { background: var(--ws-ink); border-color: var(--ws-ink); color: var(--ws-on-dark); }
.extend-card__custom { display: grid; gap: 6px; max-width: 260px; }
.extend-card__flow { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.extend-card__flow li[aria-hidden] { display: grid; }
.extend-card__flow .chip.is-done { background: var(--ws-accent-soft); color: var(--ws-monsoon); }
[data-extend-title] { transition: opacity 300ms var(--ws-ease); }

/* ============ Who does what (197:1032) ============ */
.duo { display: grid; gap: 16px; }
@media (min-width: 900px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.duo__card { border-radius: var(--ws-radius-xl); padding: clamp(22px, 2.6vw, 34px); color: var(--ws-on-dark); display: grid; gap: 14px; align-content: start; }
.duo__card .eyebrow { color: var(--ws-on-dark); }
.duo__card--you { background: var(--ws-gradient-frost); border: 1px solid var(--ws-border); }
.duo__card--you .check-list li { font-size: var(--ws-text-h3); line-height: var(--ws-leading-h3); letter-spacing: var(--ws-tracking-h3); grid-template-columns: 18px minmax(0, 1fr); gap: 12px; }
.duo__card--you .check-list img { margin-top: 4px; }
.duo__card--us { background: var(--ws-gradient-deep); }
.duo__card--us .check-list li { font-size: var(--ws-text-body-lg); line-height: var(--ws-leading-body-lg); gap: 12px; }

/* ============ FAQ (197:1077) ============ */
.faq { border-bottom: 1px solid var(--ws-border); }
.faq__item { border-top: 1px solid var(--ws-border); }
.faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 18px; min-height: 44px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 { font-size: var(--ws-text-h3); line-height: var(--ws-leading-h3); letter-spacing: var(--ws-tracking-h3); }
.faq__q:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--ws-border-strong); }
.faq__icon { flex: none; display: grid; transition: transform 400ms var(--ws-ease); }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__a { overflow: hidden; }
.faq__a p { padding-bottom: 20px; max-width: 720px; color: var(--ws-muted); font-size: var(--ws-text-body-lg); line-height: var(--ws-leading-body-lg); }

.offer-card__match-line { display: flex; align-items: center; gap: 8px; font-size: var(--ws-text-small); font-weight: 500; }
.offer-card__match-line img { width: 16px; height: 16px; flex: none; }

/* ============ Offer dialog: the full offer, horizontal, over a dimmed page ============ */
.offer-dialog {
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0; border: 0; border-radius: var(--ws-radius-xl);
  background: var(--ws-gradient-cloud); color: var(--ws-ink);
  box-shadow: 0 30px 80px rgba(12, 22, 36, 0.28);
  overflow: auto;
}
.offer-dialog::backdrop {
  background: rgba(12, 22, 36, 0.42);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
  backdrop-filter: blur(8px) saturate(0.9);
}
.offer-dialog[open] { animation: ws-dialog-in 420ms var(--ws-ease); }
.offer-dialog[open]::backdrop { animation: ws-fade-in 420ms var(--ws-ease); }
.offer-dialog.is-closing { animation: ws-dialog-out 240ms ease-in forwards; }
.offer-dialog.is-closing::backdrop { animation: ws-fade-out 240ms ease-in forwards; }
@keyframes ws-dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes ws-dialog-out { to { opacity: 0; transform: translateY(8px) scale(0.99); } }
@keyframes ws-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ws-fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .offer-dialog[open], .offer-dialog[open]::backdrop, .offer-dialog.is-closing, .offer-dialog.is-closing::backdrop { animation: none; }
}
.offer-dialog__inner { padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 22px; }
.offer-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.offer-dialog__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.offer-dialog__close {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--ws-border-strong);
  transition: background-color var(--ws-duration-color) var(--ws-ease), border-color var(--ws-duration-color) var(--ws-ease);
}
.offer-dialog__close { background: var(--ws-background); }
.offer-dialog__close:hover { background: var(--ws-soft); border-color: var(--ws-ink); }
.offer-dialog__close:focus-visible { border-radius: 50%; }
.offer-dialog__grid { display: grid; gap: 20px; }
.offer-dialog__col { display: grid; gap: 12px; align-content: start; }
.offer-dialog__col + .offer-dialog__col { border-top: 1px solid var(--ws-border); padding-top: 20px; }
.offer-dialog__total { font-size: var(--ws-text-number); line-height: var(--ws-leading-number); letter-spacing: var(--ws-tracking-number); font-variant-numeric: tabular-nums; }
.offer-dialog__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.offer-dialog__facts li { display: flex; align-items: center; gap: 10px; font-size: var(--ws-text-body); }
.offer-dialog__actions { display: grid; gap: 8px; margin-top: 8px; }
.offer-dialog__actions .btn { width: 100%; }
@media (min-width: 900px) {
  .offer-dialog__grid { grid-template-columns: 1.1fr 1fr 0.9fr; gap: 0; }
  .offer-dialog__col { padding-inline: 24px; }
  .offer-dialog__col:first-child { padding-left: 0; }
  .offer-dialog__col:last-child { padding-right: 0; }
  .offer-dialog__col + .offer-dialog__col { border-top: 0; padding-top: 0; border-left: 1px solid var(--ws-border); }
}
html.dialog-open { overflow: hidden; }

/* Offer dialog on Cloud: inner blocks stay white so they read as cards on the gradient */
.offer-dialog .offer-card__quote, .offer-dialog .offer-card__match { background: var(--ws-background); }
.offer-dialog__col + .offer-dialog__col { border-color: rgba(10, 10, 10, 0.08); }

/* Who does what: checks draw in one by one when the cards scroll into view */
.duo .check-list li { transition: opacity 500ms var(--ws-ease), transform 500ms var(--ws-ease); transition-delay: calc(var(--i, 0) * 110ms); }
.duo .check-list img { transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms var(--ws-ease); transition-delay: calc(var(--i, 0) * 110ms + 120ms); }
.duo.is-armed .check-list li { opacity: 0; transform: translateX(-6px); }
.duo.is-armed .check-list img { opacity: 0; transform: scale(0.4); }
.duo.is-armed.is-in .check-list li { opacity: 1; transform: none; }
.duo.is-armed.is-in .check-list img { opacity: 1; transform: none; }

/* Rule grid: items under a black rule, three per row (Figma 199:1002, 199:1138) */
.rule-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 20px; }
.rule-grid li { border-top: 1px solid var(--ws-ink); padding: 18px 20px 0 0; display: grid; gap: 8px; align-content: start; }
.rule-grid h3 { font-size: var(--ws-text-h3); line-height: var(--ws-leading-h3); letter-spacing: var(--ws-tracking-h3); }
.rule-grid p { color: var(--ws-muted); max-width: 360px; }
.rule-grid--icons li { gap: 12px; }
@media (min-width: 640px) { .rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rule-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; } }

/* Detail list: check, title and one line of detail, separated by hairlines (Figma 199:1028) */
.detail-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.detail-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; padding-block: 12px; border-top: 1px solid var(--ws-border); }
.detail-list li img { margin-top: 2px; }
.mini-case__photo--wide { aspect-ratio: 620 / 520; }

/* Project card (workspace preview, Figma 199:1113) */
.project-card { background: var(--ws-background); border-radius: var(--ws-radius-lg); padding: clamp(18px, 2vw, 24px); display: grid; gap: 10px; }
.project-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-card__place { display: inline-flex; align-items: center; gap: 6px; }
.project-card__stays { list-style: none; margin: 4px 0 0; padding: 0; }
.project-card__stays li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 9px; border-top: 1px solid var(--ws-border); }
.project-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.project-card__link { font-size: var(--ws-text-small); font-weight: 500; color: var(--ws-monsoon); }
.project-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============ Phone: the provider's view of a request (Figma 202:1044) ============ */
/* Device frame in the shape of a current iPhone (titanium band, black bezel, Dynamic Island, side buttons).
   Hardware colours live here, not in the brand tokens: they describe the device, not Workbeds. */
.phone {
  --frame: #2b2e33; --frame-edge: #8a8f97; --bezel: #0b0c0e;
  position: relative; justify-self: center;
  width: 254px; padding: 9px;
  border-radius: 48px;
  background: var(--bezel);
  box-shadow:
    inset 0 0 0 1px #000,
    0 0 0 2px var(--frame),
    0 0 0 3px var(--frame-edge),
    0 0 0 4px #3a3d42,
    0 28px 50px rgba(5, 13, 26, 0.32), 0 8px 16px rgba(5, 13, 26, 0.18);
}
.phone__button { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #6f747c, #3a3d42); }
.phone__button--action { left: -7px; top: 92px; height: 22px; }
.phone__button--vol-up { left: -7px; top: 132px; height: 40px; }
.phone__button--vol-down { left: -7px; top: 182px; height: 40px; }
.phone__button--power { right: -7px; top: 150px; height: 64px; background: linear-gradient(270deg, #6f747c, #3a3d42); }
.phone__button--camera { right: -7px; top: 262px; height: 36px; background: linear-gradient(270deg, #6f747c, #3a3d42); }
.phone__island { position: absolute; z-index: 2; top: 9px; left: 50%; transform: translateX(-50%); width: 70px; height: 20px; border-radius: 12px; background: #000; }
.phone__body:focus-visible { box-shadow: inset 0 0 0 2px var(--ws-monsoon); }
.phone__screen {
  position: relative; height: 508px; overflow: hidden;
  background: var(--ws-background); color: var(--ws-ink);
  border-radius: 39px;
  display: flex; flex-direction: column;
}
.phone__status-icons { display: inline-flex; align-items: center; gap: 2px; }
.phone__status-icons i { width: 2.5px; background: currentColor; border-radius: 1px; }
.phone__status-icons i:nth-child(1) { height: 4px; } .phone__status-icons i:nth-child(2) { height: 6px; } .phone__status-icons i:nth-child(3) { height: 8px; }
.phone__status-icons b { width: 16px; height: 8px; margin-left: 4px; border: 1px solid currentColor; border-radius: 2.5px; position: relative; opacity: 0.9; }
.phone__status-icons b::after { content: ""; position: absolute; inset: 1px 3px 1px 1px; background: currentColor; border-radius: 1px; }
.phone__head { background: var(--ws-gradient-cloud); padding: 0 14px 18px; display: grid; gap: 9px; }
.phone__status { display: flex; justify-content: space-between; height: 38px; align-items: center; padding: 0 12px 0 14px; font-size: 10px; font-weight: 500; }
.phone__logo { width: 79px; height: auto; }
.phone__meta { font-size: 8px; line-height: 10px; color: var(--ws-muted); }
.phone__title { font-size: 20px; line-height: 24px; letter-spacing: -0.025em; }
.phone__body { padding: 12px 14px 80px; display: grid; gap: 12px; align-content: start; overflow-y: auto; scrollbar-width: none; }
.phone__summary { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ws-border); border-radius: 9px; }
.phone__summary li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--ws-border); }
.phone__summary li:last-child { border-bottom: 0; }
.phone__summary img { width: 12px; height: 12px; margin-top: 1px; }
.phone__row-title { font-size: 10.5px; line-height: 14px; font-weight: 500; }
.phone__row-sub { font-size: 8.5px; line-height: 11.5px; color: var(--ws-muted); }
.phone__note { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 6px; font-size: 8.5px; line-height: 11.5px; color: var(--ws-muted); }
.phone__note--small { font-size: 8px; line-height: 10px; grid-template-columns: 9px minmax(0, 1fr); gap: 5px; }
.phone__note img { width: 100%; height: auto; margin-top: 1px; }
.phone__answer { font-size: 9.5px; line-height: 13px; background: var(--ws-success-soft); color: var(--ws-success); border-radius: 8px; padding: 8px 10px; }
.phone__answer:not([hidden]) { animation: ws-fade-in 360ms var(--ws-ease); }
.phone__bar { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ws-background); border-top: 1px solid var(--ws-border); display: flex; gap: 5px; padding: 8px 12px 22px; }
.phone__bar::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 80px; height: 3.5px; margin-left: -40px; border-radius: 2px; background: var(--ws-ink); }
.phone__btn {
  height: 36px; padding: 0 12px; font-size: 9.6px; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--ws-border-strong); background: var(--ws-background);
  transition: background-color var(--ws-duration-color) var(--ws-ease), color var(--ws-duration-color) var(--ws-ease), border-color var(--ws-duration-color) var(--ws-ease);
}
.phone__btn--yes { background: var(--ws-ink); border-color: var(--ws-ink); color: var(--ws-on-dark); flex: 1; }
.phone__btn:hover { border-color: var(--ws-ink); }
.phone__btn[aria-pressed="true"] { background: var(--ws-monsoon); border-color: var(--ws-monsoon); color: var(--ws-on-dark); }

/* Line strip: four facts separated by hairlines (Figma 202:1095) */
.line-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.line-strip li { display: grid; gap: 4px; font-size: var(--ws-text-small); line-height: var(--ws-leading-small); }
.line-strip strong { font-weight: 500; }
.line-strip span { color: var(--ws-muted); }
@media (min-width: 640px) { .line-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .line-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .line-strip li { padding: 4px 24px; }
  .line-strip li:first-child { padding-left: 0; }
  .line-strip li + li { border-left: 1px solid var(--ws-border); }
}

.rule-grid--steps li { gap: 10px; }
@media (min-width: 1024px) { .rule-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.rule-grid--five li { gap: 6px; padding-top: 16px; }

/* Partial offers: bed bars fill when scrolled into view (Figma 202:1132) */
.beds-panel { background: var(--ws-soft); border-radius: var(--ws-radius-xl); padding: clamp(16px, 2vw, 26px); display: grid; gap: 14px; }
.beds-card { background: var(--ws-background); border-radius: var(--ws-radius-lg); padding: 16px 18px; display: grid; gap: 8px; }
.beds-card__head { display: flex; justify-content: space-between; gap: 12px; font-size: var(--ws-text-small); }
.beds-card__head strong { font-weight: 500; }
.beds-card__track { height: 8px; border-radius: 999px; background: var(--ws-sand); overflow: hidden; }
.beds-card__track span { display: block; height: 100%; width: var(--share); border-radius: 999px; background: var(--ws-ink); transition: width 1100ms var(--ws-ease); }
.beds-panel.is-armed .beds-card__track span { width: 0; }
.beds-panel.is-armed.is-in .beds-card:nth-child(2) .beds-card__track span { transition-delay: 300ms; }
.beds-panel.is-armed.is-in .beds-card__track span { width: var(--share); }
.beds-panel__total { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: var(--ws-text-title); transition: opacity 500ms var(--ws-ease) 1300ms; }
.beds-panel.is-armed .beds-panel__total { opacity: 0; }
.beds-panel.is-armed.is-in .beds-panel__total { opacity: 1; }

/* Payouts on Deep (Figma 202:1152) */
.payout-card { background: var(--ws-gradient-deep); color: var(--ws-on-dark); border-radius: var(--ws-radius-xl); padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.2vw, 28px) clamp(40px, 5vw, 64px); display: grid; gap: 14px; }
.payout-card .eyebrow { color: var(--ws-on-dark); }
.payout-card__head { display: flex; justify-content: space-between; align-items: center; }
.payout-card__table { width: 100%; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--ws-radius-md); border-collapse: separate; border-spacing: 0; }
.payout-card__table th, .payout-card__table td { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-weight: 400; text-align: left; }
.payout-card__table tr:last-child th, .payout-card__table tr:last-child td { border-bottom: 0; }
.payout-card__table th { display: grid; gap: 6px; justify-items: start; font-size: var(--ws-text-body); }
.payout-card__table td { text-align: right; white-space: nowrap; }
.payout-card__note { font-size: var(--ws-text-caption); color: #a9b1bc; }

/* Phone: scroll affordance (fade + hint that leaves once you scroll) */
.phone__body { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 110px), transparent calc(100% - 64px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 110px), transparent calc(100% - 64px)); }
.phone__body.is-end { -webkit-mask-image: none; mask-image: none; }
.phone__scroll-hint {
  position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(10, 10, 10, 0.78); color: #fff; font-size: 9px; font-weight: 500; white-space: nowrap;
  pointer-events: none; transition: opacity 400ms var(--ws-ease);
}
.phone__scroll-hint span { display: inline-block; animation: ws-nudge 1.6s var(--ws-ease) infinite; }
.phone__scroll-hint.is-gone { opacity: 0; }
@keyframes ws-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }

/* Phone: "sent" screen after Yes */
.phone__sent {
  position: absolute; inset: 0; z-index: 3;
  background: var(--ws-gradient-cloud);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 48px 20px 28px; gap: 10px;
  transform: translateY(100%); transition: transform 520ms var(--ws-ease);
}
.phone__sent.is-open { transform: none; }
.phone__sent-check { width: 54px; height: 54px; fill: none; stroke: var(--ws-success); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.phone__sent-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.phone__sent-check path { stroke-dasharray: 36; stroke-dashoffset: 36; }
.phone__sent.is-open .phone__sent-check circle { transition: stroke-dashoffset 700ms var(--ws-ease) 350ms; stroke-dashoffset: 0; }
.phone__sent.is-open .phone__sent-check path { transition: stroke-dashoffset 420ms var(--ws-ease) 950ms; stroke-dashoffset: 0; }
.phone__sent-title { font-size: 18px; line-height: 22px; letter-spacing: -0.02em; }
.phone__sent-sub { font-size: 9.5px; line-height: 13px; color: var(--ws-muted); max-width: 200px; }
.phone__sent-steps { list-style: none; margin: 10px 0 4px; padding: 10px 12px; width: 100%; background: var(--ws-background); border-radius: 10px; display: grid; gap: 8px; text-align: left; }
.phone__sent-steps li { display: flex; align-items: center; gap: 8px; font-size: 10px; line-height: 13px; color: var(--ws-muted); transition: color 400ms var(--ws-ease); }
.phone__sent-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ws-border-strong); flex: none; position: relative; transition: background-color 400ms var(--ws-ease), border-color 400ms var(--ws-ease); }
.phone__sent-steps li.is-now .phone__sent-dot { border-color: var(--ws-monsoon); border-right-color: transparent; animation: ws-spin 0.9s linear infinite; }
.phone__sent-steps li.is-done { color: var(--ws-ink); }
.phone__sent-steps li.is-done .phone__sent-dot { background: var(--ws-success); border-color: var(--ws-success); animation: none; }
.phone__sent-steps li.is-done .phone__sent-dot::after { content: ""; position: absolute; left: 3.5px; top: 1.5px; width: 3px; height: 5.5px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.phone__sent-back { margin-top: 4px; font-size: 10px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; min-height: 28px; }
.phone__sent-note { font-size: 8px; color: var(--ws-muted); }
@media (prefers-reduced-motion: reduce) {
  .phone__sent, .phone__sent-check circle, .phone__sent-check path { transition: none !important; }
  .phone__scroll-hint span { animation: none; }
}

/* Phone: bottom sheets for Partially and No */
.phone__scrim { position: absolute; inset: 0; z-index: 3; background: rgba(12, 22, 36, 0.28); opacity: 0; transition: opacity 360ms var(--ws-ease); }
.phone__scrim.is-open { opacity: 1; }
.phone__sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  background: var(--ws-background); border-radius: 20px 20px 0 0;
  padding: 10px 14px 22px; display: grid; gap: 9px;
  box-shadow: 0 -8px 24px rgba(12, 22, 36, 0.12);
  transform: translateY(100%); transition: transform 460ms var(--ws-ease);
}
.phone__sheet::before { content: ""; justify-self: center; width: 32px; height: 4px; border-radius: 2px; background: var(--ws-border-strong); margin-bottom: 2px; }
.phone__sheet.is-open { transform: none; }
.phone__sheet-title { font-size: 14px; line-height: 18px; letter-spacing: -0.01em; }
.phone__sheet-sub { font-size: 9px; line-height: 12px; color: var(--ws-muted); }
.phone__sheet-label { font-size: 9px; font-weight: 500; color: var(--ws-muted); margin-top: 2px; }
.phone__stepper { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 8px; margin-top: 4px; }
.phone__step-btn { height: 36px; border: 1px solid var(--ws-border-strong); font-size: 16px; line-height: 1; transition: border-color var(--ws-duration-color) var(--ws-ease), background-color var(--ws-duration-color) var(--ws-ease); }
.phone__step-btn:hover { border-color: var(--ws-ink); }
.phone__step-btn:disabled { opacity: 0.35; cursor: default; }
.phone__beds { text-align: center; display: grid; }
.phone__beds span { font-size: 28px; line-height: 30px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.phone__beds small { font-size: 9px; color: var(--ws-muted); }
.phone__beds-bar { height: 6px; border-radius: 999px; background: var(--ws-sand); overflow: hidden; }
.phone__beds-bar span { display: block; height: 100%; background: var(--ws-ink); border-radius: 999px; transition: width 360ms var(--ws-ease); }
.phone__choices { display: flex; gap: 6px; }
.phone__choices--wrap { flex-wrap: wrap; }
.phone__choice {
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--ws-border-strong);
  font-size: 9.5px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--ws-duration-color) var(--ws-ease), color var(--ws-duration-color) var(--ws-ease), border-color var(--ws-duration-color) var(--ws-ease);
}
.phone__choice:hover { border-color: var(--ws-ink); }
.phone__choice[aria-pressed="true"] { background: var(--ws-ink); border-color: var(--ws-ink); color: var(--ws-on-dark); }
.phone__sheet-send { height: 36px; background: var(--ws-ink); color: var(--ws-on-dark); font-size: 10px; font-weight: 500; margin-top: 4px; transition: opacity 200ms; }
.phone__sheet-send:disabled { opacity: 0.35; cursor: default; }
.phone__sheet-cancel { font-size: 9.5px; color: var(--ws-muted); min-height: 24px; }
.phone__sent-check.is-neutral { stroke: var(--ws-monsoon); }
@media (prefers-reduced-motion: reduce) { .phone__sheet, .phone__scrim { transition: none; } }

/* About: wide photo, two-column rules, contact cards (Figma 203:1076) */
.wide-photo { border-radius: var(--ws-radius-xl); overflow: hidden; aspect-ratio: 1280 / 520; }
.wide-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .rule-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } }
.rule-grid--two li { gap: 10px; }
.rule-grid--two .t-body-lg { max-width: 520px; }
.contact-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.contact-card { border: 1px solid var(--ws-border); border-radius: var(--ws-radius-xl); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 12px; align-content: start; justify-items: start; }
.contact-card p { max-width: 340px; }
.contact-card .btn { margin-top: 4px; }
@media (min-width: 900px) { .contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============ Guides (Figma 233:1865) ============ */
.guide-search { width: 100%; max-width: var(--ws-measure); }
.guide-search .field__input::-webkit-search-cancel-button { cursor: pointer; }
.chip-filters { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.chip-filters[hidden] { display: none; }
.chip-filter {
  min-height: 38px; padding: 8px 14px; border-radius: var(--ws-radius-pill);
  border: 1px solid var(--ws-border-strong); background: var(--ws-background);
  font-size: var(--ws-text-small); font-weight: 500;
  transition: background-color var(--ws-duration-color) var(--ws-ease), color var(--ws-duration-color) var(--ws-ease), border-color var(--ws-duration-color) var(--ws-ease);
}
.chip-filter:hover { border-color: var(--ws-ink); }
.chip-filter[aria-pressed="true"] { background: var(--ws-ink); border-color: var(--ws-ink); color: var(--ws-on-dark); }
.chip-filter:focus-visible { border-radius: var(--ws-radius-pill); }

.featured-guide { display: grid; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-xl); overflow: hidden; }
.featured-guide__media { aspect-ratio: 16 / 11; }
.featured-guide__media img { width: 100%; height: 100%; object-fit: cover; }
.featured-guide__text { padding: clamp(22px, 3.4vw, 44px); display: grid; gap: 16px; align-content: center; justify-items: start; }
.featured-guide__text h2 a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (min-width: 1024px) { .featured-guide { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .featured-guide__media { aspect-ratio: auto; min-height: 400px; } }

.list-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; }
.guide-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px 20px; }
@media (min-width: 640px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guide-card { display: grid; gap: 10px; align-content: start; position: relative; }
.guide-card__media { aspect-ratio: 410 / 220; border-radius: var(--ws-radius-lg); overflow: hidden; margin-bottom: 4px; }
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ws-ease); }
.guide-card:not(.is-soon):hover .guide-card__media img { transform: scale(1.03); }
.guide-card__tile { display: flex; align-items: flex-end; padding: 22px; }
.guide-card__tile p { font-size: var(--ws-text-h3); line-height: var(--ws-leading-h3); letter-spacing: var(--ws-tracking-h3); max-width: 300px; }
.guide-card__tile--cloud { background: var(--ws-gradient-cloud); }
.guide-card__tile--deep { background: var(--ws-gradient-deep); color: var(--ws-on-dark); }
.guide-card__tile--frost { background: var(--ws-gradient-frost); color: var(--ws-on-dark); }
.guide-card__link::after { content: ""; position: absolute; inset: 0; }
.guide-card__link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.guide-card__status { color: var(--ws-muted); }
.guide-card.is-soon .guide-card__media { opacity: 0.7; }
.guide-card.is-soon .guide-card__status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; margin-right: 6px; vertical-align: 1px; }
.guide-empty { padding: 20px; border-radius: var(--ws-radius-lg); background: var(--ws-soft); color: var(--ws-muted); }
[data-guide][hidden] { display: none !important; }

.city-guides { display: grid; gap: 32px; }
.city-guides__intro { display: grid; gap: 16px; align-content: start; max-width: 440px; }
@media (min-width: 1024px) { .city-guides { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 64px; } }
.city-list { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 20px; }
@media (min-width: 640px) { .city-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.city-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; border-top: 1px solid var(--ws-border); }
.city-row strong { display: block; font-size: var(--ws-text-title); font-weight: 500; }
.city-row small { display: block; font-size: var(--ws-text-caption); color: var(--ws-muted); }
a.city-row img { transition: transform 320ms var(--ws-ease); }
a.city-row:hover img { transform: rotate(-45deg); }
a.city-row:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.city-row.is-soon strong { color: var(--ws-muted); font-weight: 400; }

/* ============ Article (Figma 236:2020) ============ */
.article-head .container { display: grid; gap: 18px; padding-block: clamp(24px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.article-head__title { max-width: 22ch; }
.article-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--ws-text-small); color: var(--ws-muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; font-size: var(--ws-text-small); color: var(--ws-muted); }
.breadcrumb a:hover { color: var(--ws-ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb__sep { transform: rotate(-90deg); width: 12px; height: 12px; opacity: 0.6; }
.short-answer { background: var(--ws-gradient-cloud); border: 1px solid var(--ws-border); border-radius: var(--ws-radius-xl); padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 40px); display: grid; gap: 10px; }
.short-answer .t-body-lg { max-width: 820px; }
.article { display: grid; gap: 32px; }
@media (min-width: 1024px) { .article { grid-template-columns: 240px minmax(0, 720px); gap: 80px; } }
.article__toc { display: none; }
@media (min-width: 1024px) {
  .article__toc { display: block; position: sticky; top: calc(var(--ws-nav-height) + 24px); align-self: start; }
  .article__toc ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; border-left: 1px solid var(--ws-border); }
  .article__toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent; font-size: var(--ws-text-small); color: var(--ws-muted); transition: color var(--ws-duration-color) var(--ws-ease), border-color var(--ws-duration-color) var(--ws-ease); }
  .article__toc a:hover { color: var(--ws-ink); }
  .article__toc a.is-active { color: var(--ws-ink); border-left-color: var(--ws-ink); }
}
.prose { display: grid; gap: 44px; }
.prose section { display: grid; gap: 14px; scroll-margin-top: calc(var(--ws-nav-height) + 20px); }
.prose h2 { font-size: var(--ws-text-h2s); line-height: var(--ws-leading-h2s); letter-spacing: var(--ws-tracking-h2s); }
.prose > section > p, .prose section > p:not(.t-small) { font-size: var(--ws-text-body-lg); line-height: var(--ws-leading-body-lg); color: var(--ws-muted); }
.formula { background: var(--ws-soft); border-radius: var(--ws-radius-lg); padding: clamp(18px, 2.2vw, 26px); display: grid; gap: 12px; }
.formula strong { font-weight: 400; color: var(--ws-ink); }
.formula dl { display: grid; gap: 6px; }
.formula dl div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
.formula dd { font-family: var(--ws-font-mono); font-size: var(--ws-text-small); color: var(--ws-muted); padding-top: 2px; }
@media (max-width: 639.98px) { .formula dl div { grid-template-columns: 1fr; gap: 0; } }
.quote-calc { border: 1px solid var(--ws-border); border-radius: var(--ws-radius-lg); padding: clamp(16px, 2vw, 22px); display: grid; gap: 14px; }
.quote-calc__fields { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .quote-calc__fields { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.quote-calc select.field__input { cursor: pointer; background: url("/assets/img/icons/chevron-down-ink.svg") no-repeat right 0 center / 14px; padding-right: 20px; }
.quote-calc__out { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 12px; border-top: 1px solid var(--ws-border); font-size: var(--ws-text-small); color: var(--ws-muted); }
.quote-calc__out strong { display: block; font-size: var(--ws-text-number); line-height: var(--ws-leading-number); letter-spacing: var(--ws-tracking-number); font-weight: 400; color: var(--ws-ink); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-lg); }
.table-wrap:focus-visible { box-shadow: var(--ws-focus-ring); }
.data-table { width: 100%; min-width: 640px; font-size: var(--ws-text-small); }
.data-table th, .data-table td { text-align: left; padding: 13px 16px; border-top: 1px solid var(--ws-border); font-weight: 400; }
.data-table thead th { background: var(--ws-soft); border-top: 0; font-size: var(--ws-text-caption); font-weight: 500; color: var(--ws-muted); }
.data-table tbody th { font-weight: 500; }
.big-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.big-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-size: var(--ws-text-body-lg); line-height: var(--ws-leading-body-lg); }
.big-checks img { margin-top: 4px; }
.inline-cta { background: var(--ws-gradient-deep); color: var(--ws-on-dark); border-radius: var(--ws-radius-xl); padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 36px); display: grid; gap: 18px; align-items: center; }
.inline-cta p:not(.t-h3) { font-size: var(--ws-text-body); opacity: 0.9; margin-top: 6px; max-width: 440px; }
@media (min-width: 640px) { .inline-cta { grid-template-columns: minmax(0, 1fr) auto; } }
.faq--compact .faq__q h3 { font-size: var(--ws-text-title); font-weight: 500; letter-spacing: -0.005em; }
.faq--compact .faq__q { padding-block: 16px; }

/* ============ City page: Hamburg (241:1985) ============ */
.city-hero .container { display: grid; gap: clamp(18px, 2.2vw, 28px); padding-block: clamp(20px, 2.6vw, 36px) clamp(8px, 1.4vw, 20px); }
.city-hero__inner { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.city-hero__text { display: grid; gap: 18px; align-content: start; }
.city-hero__text h1 { max-width: 14ch; }
.city-hero__text .t-body-lg { max-width: 34rem; }
@media (min-width: 1024px) { .city-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); } }

.city-request { background: var(--ws-gradient-monsoon-diagonal-fit); border-radius: 20px; padding: clamp(12px, 2vw, 24px); margin-top: 6px; }
.city-request__card { background: var(--ws-background); border-radius: var(--ws-radius-lg); padding: clamp(16px, 1.8vw, 22px); display: grid; gap: 12px; }
.city-request__fields { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.city-request__fields > :first-child { grid-column: 1 / -1; }
@media (max-width: 479.98px) { .city-request__fields { grid-template-columns: minmax(0, 1fr); } }
.city-request__submit { width: 100%; }

.area-map { position: relative; margin: 0; aspect-ratio: 616 / 662; margin-inline: auto; width: 100%;
  border-radius: 14px; overflow: hidden; background: #fafbfc; container-type: inline-size; }
.area-map__base { position: absolute; inset: 0; width: 100%; height: 100%; }
.area-map__town { position: absolute; font-size: clamp(10px, 1.95cqw, 12px); line-height: 16px; color: #6f767e; white-space: nowrap; }
.area-map__radius { position: absolute; width: 37.34%; height: auto; transform: translate(-50%, -50%); opacity: 0.6; }
.area-map__centre { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--ws-ink); border: 2px solid #fff; transform: translate(-50%, -50%); }
.area-map__areas { list-style: none; margin: 0; padding: 0; }
.area-map__area { position: absolute; display: flex; align-items: center; gap: 5px; transform: translate(-9px, -50%); }
.area-map__area--left { flex-direction: row-reverse; transform: translate(calc(-100% + 9px), -50%); }
.area-map__dot { width: 18px; height: 18px; flex: none; border-radius: 50%; background: rgba(48, 82, 130, 0.16); border: 1px solid rgba(48, 82, 130, 0.5); }
.area-map__label { background: #fff; border-radius: 999px; padding: 3px 8px; font-size: clamp(10px, 1.95cqw, 12px); line-height: 16px; font-weight: 500; box-shadow: 0 2px 6px rgba(13, 23, 36, 0.1); white-space: nowrap; }
.area-map__note { position: absolute; left: 16px; top: 16px; background: var(--ws-background); border-radius: 10px; padding: 8px 12px; font-size: var(--ws-text-caption); line-height: 16px; color: var(--ws-muted); }
.city-hero__map .area-map { max-width: min(616px, calc(82svh * 616 / 662)); }

.area-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.area-card { border: 1px solid var(--ws-border); border-radius: var(--ws-radius-xl); padding: clamp(20px, 2vw, 26px); display: grid; gap: 6px; align-content: start; }
.area-card dl { margin: 12px 0 0; }
.area-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 10px; border-top: 1px solid var(--ws-border); font-size: var(--ws-text-small); }
.area-card dt { color: var(--ws-muted); }
.area-card dd { margin: 0; }

.city-split { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; }
.city-split__text { display: grid; gap: 16px; align-content: start; }
.city-split__text .t-body-lg { max-width: 30rem; }
@media (min-width: 1024px) { .city-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); } }

.price-band { color: var(--ws-on-dark); background: var(--ws-gradient-deep); border-radius: var(--ws-radius-xl); padding: clamp(22px, 2.6vw, 32px); display: grid; gap: 16px; justify-items: start; }
.price-band .eyebrow { color: var(--ws-on-dark); }
.price-band__range { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -0.04em; }
.price-band__range small { font-size: 1.125rem; letter-spacing: -0.01em; }
.price-band__track { width: 100%; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); position: relative; }
.price-band__track span { position: absolute; left: 23.7%; width: 34.8%; top: 0; bottom: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.55); }
.price-band .t-small { max-width: 30rem; }

.rings { gap: 12px; }
.rings__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rings__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ring { background: var(--ws-background); border-radius: 14px; padding: 16px 20px; display: grid; gap: 10px; }
.ring__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ring__head > div, .ring__total { display: grid; gap: 2px; }
.ring__total { margin: 0; text-align: right; }
.ring__title { font-size: var(--ws-text-title); font-weight: 500; margin: 0; }
.ring__amount { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.25; }
.ring:not(.ring--ref) .ring__track span { background: var(--ws-monsoon); }
.ring__foot { margin: 0; display: flex; align-items: center; gap: 10px; }
.beds-panel.is-armed.is-in .ring:nth-child(2) .ring__track span { transition-delay: 250ms; }
.beds-panel.is-armed.is-in .ring:nth-child(3) .ring__track span { transition-delay: 500ms; }

.nearby { display: grid; gap: 14px; justify-items: start; }
.nearby__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nearby-chip { display: inline-flex; padding: 9px 16px; border: 1px solid var(--ws-border-strong); border-radius: 999px; font-size: var(--ws-text-small); font-weight: 500; line-height: 18px; transition: background var(--ws-duration-color) var(--ws-ease), color var(--ws-duration-color) var(--ws-ease); }
a.nearby-chip:hover { background: var(--ws-ink); color: #fff; border-color: var(--ws-ink); }
.nearby-chip.is-soon { color: var(--ws-muted); border-style: dashed; }
.short-answer--plain { background: var(--ws-cloud); }

/* City guides (generated) */
.price-band__pending { margin: 0; font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; }
.nearby-chip__km { margin-left: 8px; color: var(--ws-muted); font-weight: 400; font-family: var(--ws-font-mono, inherit); font-size: var(--ws-text-caption); }
a.nearby-chip:hover .nearby-chip__km { color: rgba(255, 255, 255, 0.7); }
.nearby-chip--term { background: var(--ws-soft); border-color: transparent; }
.local-search { display: grid; gap: 18px; }
.local-search > div { display: grid; gap: 10px; max-width: 40rem; }
.local-search__num { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.method-note { border-top: 1px solid var(--ws-border); padding-top: 18px; display: grid; gap: 6px; max-width: 60rem; }

/* Generic guide blocks */
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.guide-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-block: 14px; border-top: 1px solid var(--ws-border); }
.guide-steps li:last-child { border-bottom: 1px solid var(--ws-border); }
.guide-steps .t-data { padding-top: 2px; }
.guide-steps .muted { margin-top: 2px; }
.guide-defs { margin: 0; display: grid; }
.guide-defs > div { display: grid; gap: 4px; padding-block: 14px; border-top: 1px solid var(--ws-border); }
.guide-defs > div:last-child { border-bottom: 1px solid var(--ws-border); }
.guide-defs dt { font-weight: 500; font-size: var(--ws-text-title); }
.guide-defs dd { margin: 0; color: var(--ws-muted); }
@media (min-width: 640px) { .guide-defs > div { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; } }
.guide-note { font-size: var(--ws-text-small); color: var(--ws-muted); background: var(--ws-soft); border-radius: var(--ws-radius-lg); padding: 14px 18px; }
.city-groups { display: grid; border-bottom: 1px solid var(--ws-border); }
.city-group { border-top: 1px solid var(--ws-border); }
.city-group[hidden] { display: none; }
.city-group__head { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 16px; padding-block: 16px; }
.city-group__head::-webkit-details-marker { display: none; }
.city-group__name strong { display: block; font-size: var(--ws-text-h3); font-weight: 400; letter-spacing: -0.01em; }
.city-group__name small { display: block; font-size: var(--ws-text-small); color: var(--ws-muted); margin-top: 2px; }
.city-group__count { color: var(--ws-muted); font-size: var(--ws-text-small); }
.city-group__icon img { transition: transform 320ms var(--ws-ease); }
.city-group[open] .city-group__icon img { transform: rotate(180deg); }
.city-group__head:hover .city-group__name strong { text-decoration: underline; text-underline-offset: 3px; }
.city-group .city-list { padding-bottom: 16px; }
.city-group .city-row { border-top-color: var(--ws-border); padding-block: 10px; }
@media (min-width: 1200px) { .city-group .city-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .city-guides__intro { position: sticky; top: calc(var(--ws-nav-height) + 32px); align-self: start; } }
.city-group [data-collapse-body] { overflow: hidden; }
.city-group.is-closing .city-group__icon img { transform: none; }

/* Contact (no Figma frame; built from the request card and Trust parts) */
.contact-page__inner { display: grid; gap: clamp(28px, 4vw, 64px); padding-block: clamp(20px, 2.6vw, 40px) var(--ws-section-space); align-items: start; }
@media (min-width: 1024px) { .contact-page__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.contact-page__text { display: grid; gap: 20px; align-content: start; }
.contact-page__text .t-body-lg { max-width: 32rem; }
.contact-person { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-lg); max-width: 26rem; }
.contact-person__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.contact-routes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; max-width: 32rem; }
.contact-route { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; border-top: 1px solid var(--ws-border); }
.contact-routes li:last-child .contact-route { border-bottom: 1px solid var(--ws-border); }
.contact-route strong { display: block; font-weight: 500; font-size: var(--ws-text-title); }
.contact-route small { display: block; font-size: var(--ws-text-small); color: var(--ws-muted); }
.contact-route img { transition: transform 320ms var(--ws-ease); }
.contact-route:hover img { transform: rotate(-45deg); }
.contact-route:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.contact-form, .contact-sent { background: var(--ws-background); border-radius: var(--ws-radius-lg); padding: clamp(16px, 1.8vw, 22px); display: grid; gap: 12px; }
.contact-form__fields { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .contact-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-form__wide { grid-column: 1 / -1; } }
.contact-form__submit { width: 100%; }
.contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field__control--select { position: relative; }
.field__control--select select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.field__chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: 0.7; }
.field__control--area { height: auto; align-items: stretch; }
.field__control--area textarea { min-height: 92px; padding-block: 12px; resize: vertical; line-height: 1.5; font: inherit; }
.contact-sent { justify-items: start; padding: clamp(24px, 3vw, 36px); }
.contact-sent:focus { outline: none; }
.contact-sent__mark { width: 32px; height: 32px; border-radius: 50%; background: var(--ws-success); display: grid; place-items: center; }

/* City guides: photo in the hero, map as a wide strip below */
.city-photo { margin: 0; display: grid; gap: 8px; max-width: min(560px, calc(82svh * 616 / 662)); margin-inline: auto; width: 100%; }
.city-photo picture, .city-photo img { display: block; width: 100%; aspect-ratio: 616 / 662; object-fit: cover; border-radius: 14px; }
.city-photo__credit { font-size: 11px; line-height: 1.4; color: var(--ws-muted); }
.city-photo__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.city-photo__credit a:hover { color: var(--ws-ink); }
.area-map--wide { aspect-ratio: 1200 / 440; max-width: none; }
.city-mapstrip__narrow { display: none; }
@media (max-width: 767.98px) {
  .city-mapstrip .area-map--wide { display: none; }
  .city-mapstrip__narrow { display: block; }
}

/* Across Europe: the map flies to one example city after the other */
.dive__zoom { position: absolute; inset: 0; transform-origin: 0 0; --z: 1; transition: transform 1800ms cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; }
.dive.is-still .dive__zoom { transition: none; }
.dive .map-marker { transform: translate(calc(var(--m) / -2), -50%) scale(calc(1 / var(--z))); transform-origin: calc(var(--m) / 2) 50%; transition: opacity 600ms var(--ws-ease); }
.dive__panel { position: absolute; right: 2.5%; top: 24px; width: 340px; display: grid; gap: 10px; }
.dive__cards { list-style: none; margin: 0; padding: 0; display: grid; }
.dive-card { grid-area: 1 / 1; background: var(--ws-background); border-radius: var(--ws-radius-lg); box-shadow: var(--ws-shadow-card); overflow: hidden; opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ws-ease), transform 500ms var(--ws-ease); }
.dive-card.is-active { opacity: 1; transform: none; }
.dive-card.is-leaving { opacity: 0; transform: translateY(-10px); transition-duration: 340ms; }
.dive-card__media, .dive-card__nophoto { aspect-ratio: 16 / 10; background: var(--ws-gradient-cloud); overflow: hidden; }
.dive-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 6500ms linear; }
.dive-card.is-active .dive-card__media img { transform: scale(1); }
.dive-card__body { padding: 14px 16px 12px; display: grid; gap: 8px; }
.dive-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dive-card__project { display: flex; align-items: center; gap: 6px; font-size: var(--ws-text-small); margin: 0; }
.dive-card__project img { width: 22px; height: 22px; margin: -3px -2px; }
.dive-card__project strong { font-weight: 500; }
.dive-card__link { font-size: var(--ws-text-small); justify-self: start; }
.dive-card__credit { font-size: 10.5px; line-height: 1.35; color: var(--ws-muted); }
.dive-card__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dive__controls { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.dive__controls[hidden] { display: none; }
.dive__btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ws-border-strong); background: var(--ws-background); display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color var(--ws-duration-color) var(--ws-ease); }
.dive__btn:hover { border-color: var(--ws-ink); }
.dive__prev-icon { transform: scaleX(-1); }
.dive__count { color: var(--ws-muted); min-width: 44px; text-align: center; }
.dive.is-paused .hero-homes__pause-icon { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--ws-ink); margin-left: 2px; }
@media (max-width: 1023.98px) {
  .dive__panel { position: static; width: auto; }
  .dive-card { box-shadow: none; border: 1px solid var(--ws-border); }
  .dive-card { display: grid; grid-template-columns: 38% 1fr; }
  .dive-card__media { aspect-ratio: auto; }
}
@media (prefers-reduced-motion: reduce) { .dive__zoom, .dive-card, .dive-card__media img { transition: none; } .dive-card__media img { transform: none; } }
/* legal pages: tables read as data, first column as a label */
.legal .data-table td, .legal .data-table th { vertical-align: top; }
.legal .data-table th[scope="row"] { white-space: nowrap; }
.legal .table-wrap + p { margin-top: 4px; }

/* City guide: around the city (beds, work, roads) */
.profile-head { display: grid; gap: 14px; max-width: 46rem; margin-bottom: clamp(24px, 3vw, 36px); }
.profile-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.profile-card { border: 1px solid var(--ws-border); border-radius: var(--ws-radius-xl); padding: clamp(20px, 2vw, 26px); display: grid; gap: 10px; align-content: start; }
.profile-card__num { margin: 0; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.stay-mix { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; margin-top: 6px; }
.stay-mix__seg { flex-basis: 0; min-width: 3px; }
.stay-mix__seg--hotel { background: var(--ws-ink); }
.stay-mix__seg--guest_house { background: var(--ws-monsoon); }
.stay-mix__seg--apartment { background: var(--ws-monsoon-dark); opacity: .55; }
.stay-mix__seg--hostel { background: var(--ws-border-strong); }
.stay-mix__seg--motel { background: var(--ws-fog); }
.stay-mix__legend { list-style: none; margin: 0; padding: 0; display: grid; font-size: var(--ws-text-small); }
.stay-mix__legend li { display: flex; align-items: center; gap: 8px; padding-block: 8px; border-top: 1px solid var(--ws-border); }
.stay-mix__legend .t-data { margin-left: auto; }
.stay-mix__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rose { width: 100%; max-width: 200px; height: auto; justify-self: center; overflow: visible; }
.rose__grid { fill: none; stroke: var(--ws-border); stroke-width: 1; }
.rose__ind { fill: var(--ws-border-strong); fill-opacity: .7; stroke: none; }
.rose__stay { fill: var(--ws-monsoon); fill-opacity: .12; stroke: var(--ws-monsoon); stroke-width: 1.5; stroke-linejoin: round; }
.rose__labels { font: 500 10px var(--ws-font-mono); fill: var(--ws-muted); text-anchor: middle; }
.rose__centre { fill: var(--ws-ink); }
.rose__key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--ws-text-small); color: var(--ws-muted); }
.rose__key li { display: flex; align-items: center; gap: 6px; }
.rose__swatch { width: 12px; height: 8px; border-radius: 2px; }
.rose__swatch--ind { background: var(--ws-border-strong); }
.rose__swatch--stay { background: color-mix(in srgb, var(--ws-monsoon) 12%, transparent); border: 1.5px solid var(--ws-monsoon); }

/* ==== pages.css ==== */
/* Page-level composition. Only arrangement lives here; components come from product.css. */

/* Homepage hero (176:368): eyebrow, display headline left, intro right, bottom-aligned. */
.hero__inner {
  display: grid;
  gap: clamp(12px, 1.3vw, 18px);
  padding-block: clamp(24px, 2.4vw, 36px) clamp(20px, 2.1vw, 32px);
}
.hero__row { display: grid; gap: 16px; }
.hero__title { max-width: 14ch; }
.hero__intro { color: var(--ws-muted); max-width: var(--ws-measure); }
@media (min-width: 900px) {
  .hero__row { grid-template-columns: minmax(0, 1fr) minmax(0, var(--ws-measure)); align-items: end; column-gap: 40px; }
  .hero__title { max-width: none; }
}

.no-js .menu-toggle { display: none; }

/* First screen: header + hero + request fill exactly one viewport; the rest starts below the fold.
   Spare height goes above and below the content, so taller screens get calm air, not a peeking strip. */
.first-screen {
  min-height: calc(100vh - var(--ws-nav-height));
  min-height: calc(100svh - var(--ws-nav-height));
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: clamp(12px, 1.6vw, 24px);
}
@media (max-height: 560px), (max-width: 639.98px) { .first-screen { min-height: 0; } }

/* Subpage hero (196:732) */
.page-hero__inner {
  display: grid; gap: 20px;
  padding-block: clamp(40px, 5vw, 72px) clamp(24px, 2.4vw, 36px);
}
.page-hero__main { display: grid; gap: clamp(14px, 1.4vw, 20px); }
.page-hero__aside { display: grid; gap: 18px; justify-items: start; max-width: var(--ws-measure); }
.page-hero__aside .t-body-lg { color: var(--ws-muted); }
@media (min-width: 900px) {
  .page-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, var(--ws-measure)); align-items: end; column-gap: 40px; }
}

/* Step row: numbered text next to a product visual, sides alternate (Figma Step 01-05) */
.step-row__inner { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
.step-row__text { display: grid; gap: 14px; align-content: start; max-width: 460px; }
.step-row__text .check-list { margin-top: 6px; }
.step-row__visual { min-width: 0; }
@media (min-width: 1024px) {
  .step-row__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); }
  .step-row--reverse .step-row__text { order: 2; }
  .step-row--reverse .step-row__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* The request card on the Diagonal, as an illustration that still works (196:742) */
.diagonal-frame { background: var(--ws-gradient-monsoon-diagonal-fit); border-radius: var(--ws-radius-xl); padding: clamp(10px, 2.2vw, 28px); }

/* Split hero: text left, portrait photo with a data card right (Figma 199:954) */
.split-hero__inner { display: grid; gap: 28px; align-items: center; padding-block: clamp(28px, 3.4vw, 48px) clamp(12px, 1.6vw, 24px); }
.split-hero__text { display: grid; gap: 18px; justify-items: start; }
.split-hero__text .t-body-lg { max-width: 460px; }
.split-hero__photo { position: relative; border-radius: var(--ws-radius-xl); overflow: hidden; aspect-ratio: 496 / 560; display: flex; align-items: flex-end; padding: 18px; }
.split-hero__photo > picture, .split-hero__photo > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-hero__card { position: relative; width: 100%; background: var(--ws-background); border-radius: var(--ws-radius-lg); padding: 16px 18px; display: grid; gap: 6px; }
.split-hero__card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (min-width: 1024px) {
  .split-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; min-height: calc(100svh - var(--ws-nav-height) - 24px); max-height: 760px; }
  .split-hero__photo { max-height: calc(100svh - var(--ws-nav-height) - 80px); }
}

/* Provider hero: Frost panel with the phone (Figma 202:1033) */
.provider-hero-wrap { padding-top: clamp(12px, 1.4vw, 20px); }
.provider-hero {
  display: grid; gap: 32px; align-items: center;
  background: var(--ws-gradient-frost);
  border-radius: var(--ws-radius-xl);
  padding: clamp(24px, 2.2vw, 30px) clamp(20px, 4.4vw, 60px);
  color: var(--ws-on-dark);
}
.provider-hero .eyebrow { color: var(--ws-on-dark); }
.provider-hero__text { display: grid; gap: 18px; justify-items: start; }
.provider-hero__text .t-display { max-width: 12ch; }
.provider-hero__text .t-body-lg { max-width: 500px; }
.provider-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
@media (min-width: 1024px) {
  .provider-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
}

/* ============ Request flow (Figma 02 — Customer Request: 133:2, 263:1342, 264:420, 281:254) ============ */
.is-flow { background: var(--ws-background); }
.flow-header { position: sticky; top: 0; z-index: 30; background: var(--ws-background); border-bottom: 1px solid var(--ws-border); }
.flow-header__bar { height: var(--ws-nav-height); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.flow-header__left, .flow-header__right { display: flex; align-items: center; gap: 20px; min-width: 0; }
.flow-header__sep { width: 1px; height: 20px; background: var(--ws-border); flex: none; }
.flow-header__context { font-size: var(--ws-text-body); color: var(--ws-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.flow-header__step { white-space: nowrap; }
.flow-header__help { font-size: var(--ws-text-small); color: var(--ws-muted); white-space: nowrap; }
.flow-header__help:hover { color: var(--ws-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899.98px) { .flow-header__help, .flow-header__sep, .flow-header__context { display: none; } }

.rq__steps { padding-block: clamp(24px, 3vw, 44px) clamp(56px, 6vw, 88px); }
.rq-step { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
.rq-step + .rq-step { margin-top: 64px; }
.rq.is-enhanced .rq-step + .rq-step { margin-top: 0; }
@media (min-width: 1024px) { .rq-step { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); } .rq-step--review { grid-template-columns: minmax(0, 1fr); } }
.rq-main, .rq-column { display: grid; gap: 24px; align-content: start; min-width: 0; }
.rq-column { width: 100%; max-width: 720px; margin-inline: auto; }
.rq-head { display: grid; gap: 10px; }
.rq-title { font-size: clamp(1.875rem, 2.9vw, 2.625rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 400; }
.rq-title:focus { outline: none; }
.rq-head .t-body-lg { max-width: 38rem; }

/* stepper */
.rq-stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; }
.rq-stepper__item { display: flex; align-items: center; gap: 8px; font-size: var(--ws-text-small); color: var(--ws-subtle); }
.rq-stepper__item + .rq-stepper__item::before { content: ""; width: 32px; height: 1px; background: var(--ws-border); margin-inline: 16px; }
.rq-stepper__item.is-current + .rq-stepper__item::before { background: var(--ws-border); }
.rq-stepper__item.is-done + .rq-stepper__item::before { background: var(--ws-ink); }
.rq-stepper__mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 500; border: 1px solid var(--ws-border-strong); color: var(--ws-subtle); background: var(--ws-background); flex: none; }
.rq-stepper__item.is-current { color: var(--ws-ink); font-weight: 500; }
.rq-stepper__item.is-current .rq-stepper__mark { border-color: var(--ws-ink); color: var(--ws-ink); }
.rq-stepper__item.is-done { color: var(--ws-ink); }
.rq-stepper__item.is-done .rq-stepper__mark { background: var(--ws-ink); border-color: var(--ws-ink); }
.rq-stepper__edit { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.rq-stepper__edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.rq-stepper__item.is-todo { color: var(--ws-muted); }
.rq-stepper__item.is-todo .rq-stepper__mark { color: var(--ws-muted); }

/* basics fields: location, radius, workers + trade, arrival + departure, checks */
.rq-fields { display: grid; gap: 18px 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .rq-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rq-fields > [data-field="rq-location"], .rq-fields > .rq-seg, .rq-fields > .rq-checks { grid-column: 1 / -1; }
}
.rq-fields > [data-field="rq-location"] { order: 1; }
.rq-fields > .rq-seg { order: 2; }
.rq-fields > [data-field="rq-workers"] { order: 3; }
.rq-fields > [data-field="rq-trade"] { order: 4; }
.rq-fields > [data-field="rq-start"] { order: 5; }
.rq-fields > [data-field="rq-end"] { order: 6; }
.rq-fields > .rq-checks { order: 7; }
.field.is-disabled { opacity: 0.55; pointer-events: none; }
.rq-seg { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.rq-seg legend { padding: 0; margin-bottom: 8px; }
.rq-seg__opts { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ws-border-strong); width: fit-content; }
.rq-seg__opt { position: relative; }
.rq-seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rq-seg__opt span { display: block; padding: 12px 18px; font-size: var(--ws-text-small); font-weight: 500; transition: background var(--ws-duration-color) var(--ws-ease), color var(--ws-duration-color) var(--ws-ease); }
.rq-seg__opt + .rq-seg__opt span { border-left: 1px solid var(--ws-border); }
.rq-seg__opt input:checked + span { background: var(--ws-ink); color: #fff; }
.rq-seg__opt input:focus-visible + span { box-shadow: var(--ws-focus-ring); position: relative; z-index: 1; }
.rq-seg__opt:hover input:not(:checked) + span { background: var(--ws-soft); }
.rq-seg__custom { max-width: 200px; }
.rq-seg .field__hint { margin: 0; }
.rq-checks { display: grid; gap: 10px; }
.rq-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--ws-text-body); cursor: pointer; }
.rq-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ws-ink); flex: none; }
.rq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* side panel (basics) on the Diagonal gradient */
.rq-side { position: sticky; top: calc(var(--ws-nav-height) + 24px); }
.rq-side--diagonal { background: var(--ws-gradient-monsoon-diagonal-fit); border-radius: 20px; padding: clamp(18px, 2vw, 28px); display: grid; gap: 16px; }
.rq-side__note { display: flex; gap: 10px; align-items: flex-start; font-size: var(--ws-text-small); color: #fff; padding-inline: 4px; }
.rq-side__note img { margin-top: 1px; flex: none; }
.rq-sofar { background: var(--ws-background); border-radius: 14px; padding: clamp(18px, 2vw, 24px); display: grid; gap: 14px; }
.rq-sofar__row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; }
.rq-sofar__row img { margin-top: 2px; }
.rq-sofar__next { border-top: 1px solid var(--ws-border); padding-top: 14px; display: grid; gap: 4px; }

/* map in the summary */
.rq-map { position: relative; height: 220px; border-radius: 14px; overflow: hidden; background: #fafbfc; }
.rq-map__base { position: absolute; inset: 0; transition: opacity 500ms var(--ws-ease); }
.rq-map__base svg { display: block; width: 100%; height: 100%; }
.rq-map__base.is-loading { opacity: 0; }
.rq-map__ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url("/assets/img/map/hamburg/radius.png") center / contain no-repeat; transition: width 400ms var(--ws-ease), height 400ms var(--ws-ease); }
.rq-map__dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--ws-ink); border: 3px solid #fff; transform: translate(-50%, -50%); box-sizing: content-box; }
.rq-map__label { position: absolute; left: calc(50% + 14px); top: calc(50% - 34px); background: var(--ws-ink); color: #fff; font-size: var(--ws-text-caption); font-weight: 500; line-height: 16px; padding: 4px 8px; border-radius: 999px; box-shadow: 0 2px 8px rgba(13, 23, 36, 0.12); white-space: nowrap; }
.rq-map__km { position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -26px; background: #fff; font-size: var(--ws-text-caption); font-weight: 500; line-height: 16px; padding: 4px 8px; border-radius: 999px; box-shadow: 0 2px 8px rgba(13, 23, 36, 0.12); white-space: nowrap; transition: transform 400ms var(--ws-ease); }

/* details: natural input, chips, question */
.rq-natural { border: 1.5px solid var(--ws-ink); border-radius: 16px; padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 20px); display: grid; gap: 10px; grid-template-rows: 1fr auto; }
.rq-natural textarea, .rq-natural textarea:focus, .rq-natural textarea:focus-visible { border: 0; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; }
.rq-natural textarea { resize: vertical; font: inherit; font-size: var(--ws-text-body-lg); line-height: 1.5; color: var(--ws-ink); min-height: 76px; background: none; padding: 0; }
.rq-natural textarea::placeholder { color: var(--ws-muted); opacity: 1; }
.rq-natural textarea:focus-visible { outline: none; }
.rq-natural:focus-within { box-shadow: 0 0 0 3px rgba(48, 82, 130, 0.16); }
.rq-natural__meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: var(--ws-text-caption); color: var(--ws-muted); flex-wrap: wrap; }
.rq-natural__found { display: inline-flex; align-items: center; gap: 8px; }
.rq-natural__count { color: var(--ws-muted); font-size: var(--ws-text-caption); }
.rq-chips { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.rq-chips legend { padding: 0; margin-bottom: 12px; }
.rq-chips__list { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-chip { position: relative; }
.rq-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rq-chip > span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 12px; border: 1px solid var(--ws-border-strong); border-radius: 999px; font-size: var(--ws-text-small); font-weight: 500; background: var(--ws-background); transition: background var(--ws-duration-color) var(--ws-ease), color var(--ws-duration-color) var(--ws-ease), border-color var(--ws-duration-color) var(--ws-ease); }
.rq-chip__check { display: none; }
.rq-chip input:checked + span { background: var(--ws-ink); border-color: var(--ws-ink); color: #fff; }
.rq-chip input:checked + span .rq-chip__plus { display: none; }
.rq-chip input:checked + span .rq-chip__check { display: block; }
.rq-chip input:focus-visible + span { box-shadow: var(--ws-focus-ring); }
.rq-chip:hover input:not(:checked) + span { border-color: var(--ws-ink); }
.rq-question { background: var(--ws-warning-soft); border-radius: 14px; padding: clamp(16px, 1.8vw, 20px); display: grid; gap: 12px; }
.rq-question[hidden] { display: none; }
.rq-question__head { display: flex; align-items: center; gap: 10px; font-size: var(--ws-text-small); font-weight: 500; }
.rq-question__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-opt { position: relative; }
.rq-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rq-opt span { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--ws-border-strong); background: var(--ws-background); font-size: var(--ws-text-small); font-weight: 500; transition: background var(--ws-duration-color) var(--ws-ease), color var(--ws-duration-color) var(--ws-ease); }
.rq-opt--ghost span { border-color: transparent; background: none; }
.rq-opt input:checked + span { background: var(--ws-ink); border-color: var(--ws-ink); color: #fff; }
.rq-opt input:focus-visible + span { box-shadow: var(--ws-focus-ring); }

/* live summary (details) */
.rq-summary { border: 1px solid var(--ws-border); border-radius: 20px; padding: clamp(18px, 2vw, 24px); display: grid; }
.rq-summary__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; }
.rq-live { display: inline-flex; align-items: center; gap: 6px; background: var(--ws-accent-soft); color: var(--ws-monsoon); font-size: var(--ws-text-caption); font-weight: 500; padding: 3px 10px 3px 8px; border-radius: 999px; }
.rq-live span { width: 6px; height: 6px; border-radius: 50%; background: var(--ws-monsoon); animation: rq-pulse 1.8s var(--ws-ease) infinite; }
@keyframes rq-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .rq-live span { animation: none; } }
.rq-group { border-bottom: 1px solid var(--ws-border); padding-block: 16px; display: grid; gap: 10px; }
.rq-group__head { display: flex; justify-content: space-between; align-items: center; }
.rq-edit { font: inherit; font-size: var(--ws-text-small); font-weight: 500; color: var(--ws-monsoon); background: none; border: 0; padding: 0; cursor: pointer; }
.rq-edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.rq-line { display: flex; align-items: center; gap: 10px; font-size: var(--ws-text-body); flex-wrap: wrap; }
.rq-needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rq-needs li { display: flex; align-items: center; gap: 10px; font-size: var(--ws-text-body); flex-wrap: wrap; }
.rq-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--ws-accent-soft); color: var(--ws-monsoon); font-size: var(--ws-text-caption); line-height: 16px; padding: 2px 8px 2px 6px; border-radius: 999px; }
.rq-tag--warn { background: var(--ws-warning-soft); color: var(--ws-warning); padding-left: 8px; }
.rq-summary__foot { padding-top: 14px; }

/* review */
.rq-review { border: 1px solid var(--ws-border); border-radius: 20px; overflow: hidden; }
.rq-review__sec { padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 28px); display: grid; gap: 12px; }
.rq-review__sec + .rq-review__sec { border-top: 1px solid var(--ws-border); }
.rq-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rq-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border: 1px solid var(--ws-border); border-radius: 999px; font-size: var(--ws-text-small); font-weight: 500; }
.rq-pills li.rq-pills__empty { border: 0; padding: 0; font-weight: 400; color: var(--ws-muted); }
.rq-budget { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.rq-toggle { position: relative; flex: none; width: 40px; height: 24px; cursor: pointer; }
.rq-toggle[hidden] { display: none; }
.rq-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rq-toggle > span[aria-hidden] { position: absolute; inset: 0; border-radius: 999px; background: var(--ws-border-strong); transition: background var(--ws-duration-color) var(--ws-ease); }
.rq-toggle > span[aria-hidden]::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 240ms var(--ws-ease); }
.rq-toggle input:checked + span { background: var(--ws-ink); }
.rq-toggle input:checked + span::after { transform: translateX(16px); }
.rq-toggle input:focus-visible + span { box-shadow: var(--ws-focus-ring); }
.rq-contact { display: grid; gap: 14px 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .rq-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rq-contact__wide { grid-column: 1 / -1; } }
.rq-send { background: var(--ws-gradient-deep); color: #fff; border-radius: 20px; padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 16px; }
.rq-send .eyebrow { color: #fff; }
.rq-send__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rq-send__head .t-data { color: rgba(255, 255, 255, 0.72); }
.rq-send__title { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -0.025em; max-width: 34rem; }
.rq-send > p:not(.rq-send__title):not(.rq-send__note) { max-width: 38rem; }
.rq-send__btn { width: 100%; }
.rq-send__note { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: var(--ws-text-caption); color: rgba(255, 255, 255, 0.72); text-align: center; }
.rq-send .alert { color: var(--ws-ink); }

/* sent (R3) */
.rq-sent { min-height: calc(100svh - var(--ws-nav-height)); background: var(--ws-gradient-deep); color: #fff; display: grid; place-items: center; padding: 48px 16px; text-align: center; }
.rq-sent[hidden] { display: none; }
.rq-sent__inner { display: grid; justify-items: center; gap: 20px; max-width: 44rem; }
.rq-sent__mark { width: 88px; height: 88px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1.5px solid rgba(255, 255, 255, 0.35); display: grid; place-items: center; }
.rq-sent__title { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.04em; font-weight: 400; }
.rq-sent__title:focus { outline: none; }
.rq-sent__lead { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.3; }
.rq-sent__next { font-size: var(--ws-text-body); color: rgba(255, 255, 255, 0.78); }
.rq-sent__dots { display: flex; gap: 10px; }
.rq-sent__dots i { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.rq-sent.is-in .rq-sent__dots i { animation: rq-dot 1.6s var(--ws-ease) both; }
.rq-sent.is-in .rq-sent__dots i:nth-child(n) { animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rq-dot { from { opacity: 0.15; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.rq-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* without JavaScript: one long form, no stepper, no live panels */
.no-js .rq-stepper, .no-js .rq-side, .no-js [data-review-js], .no-js [data-next], .no-js [data-back] { display: none; }
@media (min-width: 1024px) { .no-js .rq-step { grid-template-columns: minmax(0, 720px); } }
@media (max-width: 1023.98px) { .rq-side { position: static; } }
@media (max-width: 479.98px) {
  .rq-stepper { flex-wrap: nowrap; }
  .rq-stepper__item + .rq-stepper__item::before { width: 14px; margin-inline: 8px; }
  .rq-stepper__item { font-size: var(--ws-text-caption); gap: 6px; white-space: nowrap; }
}

/* summary lists: items fade in and out instead of popping */
.rq-needs li, .rq-pills li { transition: opacity 420ms var(--ws-ease), transform 420ms var(--ws-ease); }
.rq-needs li.is-entering, .rq-pills li.is-entering, .rq-needs li.is-leaving, .rq-pills li.is-leaving { opacity: 0; transform: translateX(10px); }
@media (prefers-reduced-motion: reduce) { .rq-needs li, .rq-pills li { transition: none; } }
.rq-back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--ws-text-small); font-weight: 500; color: var(--ws-muted); background: none; border: 0; padding: 4px 0; cursor: pointer; margin-bottom: -8px; transition: color var(--ws-duration-color) var(--ws-ease); }
.rq-back__icon { transform: scaleX(-1); opacity: 0.7; transition: transform 320ms var(--ws-ease); }
.rq-back:hover { color: var(--ws-ink); }
.rq-back:hover .rq-back__icon { transform: scaleX(-1) translateX(3px); }
.no-js .rq-back { display: none; }

/* budget slider (details) */
.rq-budget-pick { display: grid; gap: 10px; }
.rq-budget-pick__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rq-budget-pick__out { font-size: var(--ws-text-title); font-weight: 500; font-variant-numeric: tabular-nums; }
.rq-range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: none; cursor: pointer; --fill: 0%; }
.rq-range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--ws-ink) var(--fill), var(--ws-border-strong) var(--fill)); }
.rq-range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--ws-border-strong); }
.rq-range::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--ws-ink); }
.rq-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ws-ink); box-shadow: 0 1px 4px rgba(13, 23, 36, 0.16); transition: transform 200ms var(--ws-ease); }
.rq-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ws-ink); }
.rq-range:hover::-webkit-slider-thumb { transform: scale(1.08); }
.rq-range:focus-visible { outline: none; }
.rq-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--ws-focus-ring); }
.rq-range:focus-visible::-moz-range-thumb { box-shadow: var(--ws-focus-ring); }

/* ============ Register (providers) — no Figma frame; built from contact + request-flow parts ============ */
.reg-page .container { padding-block: clamp(24px, 3vw, 48px) var(--ws-section-space); }
.reg-head { display: grid; gap: 14px; max-width: 44rem; margin-bottom: clamp(24px, 3vw, 40px); }
.reg-layout { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 1024px) { .reg-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); } }
.reg-form { border: 1px solid var(--ws-border); border-radius: 20px; overflow: hidden; }
.reg-sec { padding: clamp(18px, 2.2vw, 28px); }
.reg-sec__set { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.reg-sec + .reg-sec { border-top: 1px solid var(--ws-border); }
.reg-sec__head { display: flex; align-items: baseline; gap: 12px; padding: 0; margin-bottom: 14px; float: left; width: 100%; }
.reg-sec__head + * { clear: both; }
.reg-sec__n { color: var(--ws-muted); }
.reg-sec__body { display: grid; gap: 14px; }
.reg-types { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.reg-type { position: relative; }
.reg-type input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.reg-type > span { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--ws-border-strong); border-radius: 12px; height: 100%; transition: border-color var(--ws-duration-color) var(--ws-ease), background var(--ws-duration-color) var(--ws-ease); }
.reg-type strong { font-weight: 500; font-size: var(--ws-text-body); }
.reg-type small { font-size: var(--ws-text-small); color: var(--ws-muted); }
.reg-type input:checked + span { border-color: var(--ws-ink); background: var(--ws-soft); box-shadow: inset 0 0 0 1px var(--ws-ink); }
.reg-type input:focus-visible + span { box-shadow: var(--ws-focus-ring); }
.reg-type:hover input:not(:checked) + span { border-color: var(--ws-ink); }
.reg-grid { display: grid; gap: 14px 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .reg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reg-grid > [data-field="rg-location"] { grid-column: 1 / -1; } }
.reg-grid--half { max-width: 50%; }
@media (max-width: 639.98px) { .reg-grid--half { max-width: none; } }
.reg-submit { padding: 0 clamp(18px, 2.2vw, 28px) clamp(18px, 2.2vw, 28px); display: grid; gap: 10px; }
.reg-submit .btn { width: 100%; }
.reg-form .request-card__status { padding-inline: clamp(18px, 2.2vw, 28px); }
.reg-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reg-aside { position: sticky; top: calc(var(--ws-nav-height) + 24px); display: grid; gap: 16px; background: var(--ws-gradient-cloud); border: 1px solid var(--ws-border); border-radius: 20px; padding: clamp(18px, 2vw, 24px); }
@media (max-width: 1023.98px) { .reg-aside { position: static; } }
.reg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.reg-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.reg-steps .t-data { color: var(--ws-muted); padding-top: 2px; }
.reg-facts { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--ws-border); display: grid; gap: 8px; font-size: var(--ws-text-small); }
.reg-facts li { display: flex; gap: 8px; align-items: flex-start; }
.reg-facts img { margin-top: 1px; flex: none; }
.reg-done { border: 1px solid var(--ws-border); border-radius: 20px; padding: clamp(24px, 3vw, 36px); display: grid; gap: 14px; justify-items: start; }
.reg-done[hidden] { display: none; }
.reg-done:focus { outline: none; }

/* For companies hero: example homes */
.hero-homes__slides { position: absolute; inset: 0; }
.hero-homes__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1100ms var(--ws-ease); }
.hero-homes__slide.is-active { opacity: 1; }
.hero-homes__slide picture, .hero-homes__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-homes__slide img { transform: scale(1.06); transition: transform 7000ms linear; }
.hero-homes__slide.is-active img { transform: scale(1); }
.hero-homes__card { gap: 10px; }
.hero-homes__infos { display: grid; }
.hero-homes__info { grid-area: 1 / 1; display: grid; gap: 6px; opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--ws-ease), transform 420ms var(--ws-ease); }
.hero-homes__info.is-active { opacity: 1; transform: none; }
.hero-homes__info.is-leaving { opacity: 0; transform: translateY(-8px); transition-duration: 320ms; }
.hero-homes__place { display: flex; align-items: center; gap: 6px; color: var(--ws-ink); }
.hero-homes__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hero-homes__controls { display: flex; align-items: center; gap: 10px; }
.hero-homes__controls[hidden] { display: none; }
.hero-homes__dots { display: flex; gap: 6px; }
.hero-homes__dot { width: 22px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hero-homes__dot span { display: block; width: 100%; height: 3px; border-radius: 999px; background: var(--ws-border-strong); overflow: hidden; position: relative; }
.hero-homes__dot[aria-current="true"] span { background: var(--ws-border-strong); }
.hero-homes__dot[aria-current="true"] span::after { content: ""; position: absolute; inset: 0; background: var(--ws-ink); transform-origin: left; transform: scaleX(1); }
.hero-homes.is-ticking .hero-homes__dot[aria-current="true"] span::after { animation: home-tick var(--home-interval, 5200ms) linear both; }
@keyframes home-tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-homes__dot:focus-visible { outline: none; }
.hero-homes__dot:focus-visible span { box-shadow: var(--ws-focus-ring); }
.hero-homes__pause { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--ws-border-strong); background: var(--ws-background); cursor: pointer; display: grid; place-items: center; padding: 0; }
.hero-homes__pause-icon { width: 8px; height: 9px; border-left: 2.5px solid var(--ws-ink); border-right: 2.5px solid var(--ws-ink); }
.hero-homes.is-paused .hero-homes__pause-icon { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--ws-ink); margin-left: 2px; }
.hero-homes__pause:hover { border-color: var(--ws-ink); }
@media (prefers-reduced-motion: reduce) { .hero-homes__slide, .hero-homes__slide img, .hero-homes__info { transition: none; } .hero-homes__slide img { transform: none; } }

/* Product film (sections.product_video): Monsoon diagonal frame, narrower than the container so the
   1920 px source is always downscaled (sharper interface text). */
.product-video { max-width: 1040px; margin: clamp(24px, 4vw, 48px) auto 0; }
.product-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--ws-radius-lg); background: var(--ws-background); }
.section--film { padding-top: 0; }
.section--film .product-video { margin-top: 0; }