/*
  FARBWERK MEIER — concept demo stylesheet.

  Design language: Colour-Led Friendly. Paper-white canvas, near-black text and
  one accent colour that the visitor owns. Every accent value lives in a custom
  property, so switching a colour world repaints buttons, chips, tints, lines
  and blobs at once. Fraunces carries the voice, Manrope carries the reading.

  The accent defaults below are the "Terrakotta Süd" world. The generated page
  writes a <style id="fw-boot"> after this file that restores the visitor's
  stored world before first paint, and site.js writes inline properties on the
  body when a new world is picked — both overrule these defaults on purpose.
*/

.fw {
  /* accent system — replaced live */
  --fw-accent: #c0563a;
  --fw-deep: #a74b33;
  --fw-ink-accent: #8b3e2a;
  --fw-wash: #eed6ce;
  --fw-soft: #f4e6e1;
  --fw-veil: #f8f2ef;
  --fw-line: #e7c2b7;

  /* fixed ground */
  --paper: #fbfaf8;
  --paper-2: #f4f2ee;
  --card: #ffffff;
  --ink: #232323;
  --ink-2: #56514a;
  /* --ink-3 carries small print (hints, table heads, meta lines). It is dark
     enough for 4.5:1 on paper, card, paper-2 and on the tinted --fw-veil of
     every colour world — the darkest of those grounds still reads 4.8:1. */
  --ink-3: #6e6961;
  --edge: rgba(35, 35, 35, .12);
  --edge-soft: rgba(35, 35, 35, .07);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r: 24px;
  --r-lg: 32px;
  --r-xl: 40px;
  --shell: 1240px;
  --gut: clamp(18px, 5vw, 60px);

  margin: var(--appv-bar-h) 0 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.66;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
}

.fw *, .fw *::before, .fw *::after { box-sizing: border-box; }
:where(.fw) img { display: block; max-width: 100%; height: auto; }
:where(.fw) a { color: inherit; text-decoration: none; }
:where(.fw) p { margin: 0 0 1.05em; }
.fw ul, .fw ol { margin: 0; padding: 0; list-style: none; }
.fw :focus-visible { outline: 3px solid var(--fw-ink-accent); outline-offset: 3px; border-radius: 6px; }

.fw .skip {
  position: fixed; left: 14px; top: -90px; z-index: 300;
  padding: 13px 22px; border-radius: 999px;
  color: #fff; background: var(--fw-deep); font-weight: 700;
  transition: top .18s ease;
}
.fw .skip:focus { top: calc(var(--appv-bar-h) + 12px); }

.fw-shell { width: min(100% - var(--gut) * 2, var(--shell)); margin-inline: auto; }

/* ------------------------------------------------------------- typography */

.fw h1, .fw h2, .fw h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.018em;
}
.fw h1 { font-size: clamp(2.35rem, 5.6vw, 4.3rem); }
.fw h2 { font-size: clamp(1.72rem, 3.4vw, 2.75rem); }
.fw h3 { font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.2; }
.fw h1 em { font-style: italic; color: var(--fw-ink-accent); }

.fw-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 18px; padding: 0;
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--fw-ink-accent);
}
.fw-eyebrow::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  background: var(--fw-accent); flex: 0 0 auto;
}
.fw-lead { max-width: 56ch; color: var(--ink-2); font-size: 1.11rem; }
.fw-hint { color: var(--ink-3); font-size: .88rem; line-height: 1.55; }

.fw-plain li {
  position: relative; padding: 0 0 0 26px; margin-bottom: 9px;
  color: var(--ink-2); font-size: .97rem;
}
.fw-plain li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--fw-accent);
}

/* ---------------------------------------------------------------- buttons */

.fw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 28px;
  border: 2px solid var(--fw-deep); border-radius: 999px;
  color: #fff; background: var(--fw-deep); cursor: pointer;
  font-family: var(--sans); font-size: 1rem; font-weight: 700; text-align: center;
}
.fw-btn:hover { background: var(--fw-ink-accent); border-color: var(--fw-ink-accent); }
.fw-btn--lg { min-height: 60px; padding: 16px 34px; font-size: 1.04rem; }
.fw-btn--sm { min-height: 44px; padding: 10px 20px; font-size: .93rem; }
.fw-btn--ghost { color: var(--fw-ink-accent); background: transparent; }
.fw-btn--ghost:hover { color: #fff; background: var(--fw-deep); border-color: var(--fw-deep); }
.fw-btn--outline {
  min-height: 46px; padding: 11px 20px; font-size: .94rem;
  color: var(--fw-ink-accent); background: var(--card); border-color: var(--fw-line);
}
.fw-btn--outline:hover { color: #fff; background: var(--fw-deep); border-color: var(--fw-deep); }
.fw-btn--light { color: var(--fw-ink-accent); background: var(--paper); border-color: var(--paper); }
.fw-btn--light:hover { background: var(--card); border-color: var(--card); color: var(--fw-ink-accent); }
.fw-btn--block { display: flex; width: 100%; }

.fw-link {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--fw-ink-accent); font-weight: 700; font-size: .98rem;
}
.fw-link i { font-style: normal; }
.fw-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.fw-link--lg { margin-top: 34px; font-size: 1.04rem; }

/* ----------------------------------------------------------------- header */

.fw-head {
  position: sticky; top: var(--appv-bar-h); z-index: 90;
  background: rgba(251, 250, 248, .94); border-bottom: 1px solid var(--edge-soft);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.fw-head__inner { display: flex; align-items: center; gap: 22px; min-height: 82px; }
.fw-logo { display: inline-flex; align-items: center; gap: 13px; flex: 0 0 auto; min-width: 0; }
.fw-logo__mark {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 16px;
  color: var(--fw-accent); background: var(--fw-soft);
}
.fw-logo__mark svg { width: 30px; height: 30px; }
.fw-logo__text {
  display: flex; flex-direction: column; min-width: 0;
  font-family: var(--display); font-size: 1.24rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
}
.fw-logo__text i {
  font-family: var(--sans); font-size: .68rem; font-style: normal; font-weight: 600;
  letter-spacing: .05em; color: var(--ink-3);
}
.fw-logo__text--foot { font-size: 1.45rem; }

.fw-nav { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.fw-nav a {
  display: inline-block; padding: 10px 15px; border-radius: 999px;
  font-size: .95rem; font-weight: 600; color: var(--ink-2);
}
.fw-nav a:hover { color: var(--ink); background: var(--paper-2); }
.fw-nav a[aria-current] { color: var(--fw-ink-accent); background: var(--fw-soft); }

.fw-head__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.fw-worldchip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 8px; border-radius: 999px;
  background: var(--fw-veil); border: 1px solid var(--fw-line);
}
.fw-worldchip__dot {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  background: var(--fw-accent); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.fw-worldchip__label { display: flex; flex-direction: column; line-height: 1.15; }
.fw-worldchip__label i { font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fw-worldchip__label b { font-size: .84rem; font-weight: 700; color: var(--ink); white-space: nowrap; }

.fw-burger {
  display: none; width: 48px; height: 48px; padding: 0;
  border: 2px solid var(--edge); border-radius: 16px; background: var(--card); cursor: pointer;
}
.fw-burger span, .fw-burger::before, .fw-burger::after {
  content: ""; display: block; width: 19px; height: 2px; margin: 4px auto;
  border-radius: 2px; background: var(--ink);
}
.fw-burger[aria-expanded="true"] span { opacity: 0; }
.fw-burger[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.fw-burger[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }
.fw-mobile { display: none; }

/* ------------------------------------------------------------------- hero */

.fw-hero { position: relative; overflow: hidden; padding: clamp(40px, 5.5vw, 82px) 0 clamp(44px, 6vw, 88px); }
.fw-hero::before {
  content: ""; position: absolute; inset: auto auto -30% -18%;
  width: min(560px, 60vw); aspect-ratio: 1; border-radius: 50%;
  background: var(--fw-veil); pointer-events: none;
}
.fw-hero__grid {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(28px, 5vw, 66px); align-items: center;
}
.fw-hero h1 { margin-bottom: 22px; }
.fw-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fw-hero__facts {
  display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 40px;
  padding-top: 26px; border-top: 1px solid var(--edge-soft);
}
.fw-hero__facts li { display: flex; flex-direction: column; }
.fw-hero__facts b { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--fw-ink-accent); line-height: 1.1; }
.fw-hero__facts span { font-size: .87rem; color: var(--ink-3); }

.fw-hero__media { position: relative; }
.fw-hero__blob {
  position: absolute; right: -8%; top: -9%; z-index: -1;
  width: 56%; aspect-ratio: 1; border-radius: 50%;
  background: var(--fw-wash); pointer-events: none;
}

.fw-frame { display: block; overflow: hidden; border-radius: var(--r-xl); background: var(--paper-2); }
.fw-frame picture, .fw-frame img { display: block; width: 100%; }
.fw-frame--hero { border-radius: clamp(28px, 4vw, 48px); }

/* -------------------------------------------------------- colour selector */

.fw-section--picker { padding-top: 0; padding-bottom: clamp(28px, 3.5vw, 52px); }

.fw-picker {
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--fw-line); border-radius: var(--r-xl);
  background: var(--fw-veil);
}
.fw-picker__head { max-width: 62ch; }
.fw-picker__title { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.fw-picker__sub { margin: 24px 0 0; color: var(--ink-2); font-size: 1rem; }

.fw-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.fw-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 9px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--edge-soft); background: var(--card);
  font-family: var(--sans); font-size: .93rem; font-weight: 650; color: var(--ink);
}
.fw-chip__dot {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--fw-chip, #c0563a);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.fw-chip:hover { border-color: var(--fw-chip); }
.fw-chip[aria-checked="true"] { border-color: var(--fw-chip); background: var(--fw-veil); }
.fw-chip[aria-checked="true"] .fw-chip__dot { box-shadow: inset 0 0 0 4px #fff, 0 0 0 3px var(--fw-chip); }

.fw-picker__read {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: 24px 0 0; padding: 16px 20px;
  border-radius: var(--r); background: var(--card); border: 1px solid var(--fw-line);
}
.fw-picker__read b { font-family: var(--display); font-size: 1.22rem; font-weight: 600; color: var(--fw-ink-accent); }
.fw-picker__read span { color: var(--ink-2); font-size: .97rem; }
.fw-picker--page { background: var(--card); }

/* ------------------------------------------------------- before and after */

.fw-ba { margin: 0; }
.fw-ba__stage {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 2; border-radius: var(--r-lg);
  background: var(--paper-2); touch-action: pan-y;
}
.fw-ba__layer { position: absolute; inset: 0; }
.fw-ba__layer picture { display: block; width: 100%; height: 100%; }
.fw-ba__layer img { width: 100%; height: 100%; object-fit: cover; }
.fw-ba__layer--before { clip-path: inset(0 calc(100% - var(--fw-pos)) 0 0); }
.fw-ba__layer--before img { filter: saturate(.55) contrast(.92) brightness(1.03); }

.fw-ba__seam {
  position: absolute; top: 0; bottom: 0; left: var(--fw-pos);
  width: 3px; margin-left: -1.5px; background: #fff;
  box-shadow: 0 0 0 1px rgba(35, 35, 35, .18); pointer-events: none;
}
.fw-ba__handle {
  position: absolute; top: 50%; left: var(--fw-pos);
  transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; cursor: ew-resize;
  display: grid; place-items: center;
  background: var(--fw-accent); border: 3px solid #fff;
  box-shadow: 0 8px 24px rgba(35, 35, 35, .28);
}
.fw-ba__grip { position: relative; display: block; width: 26px; height: 12px; }
.fw-ba__grip::before, .fw-ba__grip::after {
  content: ""; position: absolute; top: 1px; width: 9px; height: 9px;
  border-top: 2.5px solid #fff; border-right: 2.5px solid #fff;
}
.fw-ba__grip::before { left: 0; transform: rotate(-135deg); }
.fw-ba__grip::after { right: 0; transform: rotate(45deg); }
.fw-ba__handle:focus-visible { outline: 3px solid var(--fw-ink-accent); outline-offset: 4px; }

.fw-ba__tag {
  position: absolute; top: 14px; max-width: 46%;
  padding: 7px 13px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; line-height: 1.35;
  color: #fff; background: rgba(24, 22, 20, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fw-ba__tag--before { left: 14px; }
.fw-ba__tag--after { right: 14px; background: var(--fw-deep); }

.fw-ba__caption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  margin-top: 14px; font-size: .87rem; color: var(--ink-2);
}
.fw-ba__caption span:first-child { font-weight: 700; color: var(--fw-ink-accent); }
.fw-ba__hint { color: var(--ink-3); }

/* --------------------------------------------------------------- sections */

.fw-section { padding: clamp(52px, 6.5vw, 96px) 0; }
.fw-section--top { padding-top: clamp(26px, 3.5vw, 44px); }
.fw-tint { background: var(--fw-veil); }

.fw-pagehead { padding: clamp(46px, 6vw, 88px) 0 clamp(26px, 3.5vw, 44px); }
.fw-pagehead--tight { padding-bottom: clamp(18px, 2.5vw, 30px); }
.fw-pagehead h1 { margin-bottom: 20px; }

.fw-sectionhead {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(18px, 3vw, 52px); align-items: end; margin-bottom: clamp(28px, 4vw, 50px);
}
.fw-sectionhead p { margin: 0; color: var(--ink-2); }

/* ------------------------------------------------------------------ cards */

.fw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.fw-card {
  position: relative; overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--edge-soft); border-radius: var(--r-lg); background: var(--card);
}
.fw-card__blob {
  position: absolute; right: -46px; top: -46px;
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--fw-soft); pointer-events: none;
}
.fw-card h3 { position: relative; margin-bottom: 12px; }
.fw-card p { position: relative; color: var(--ink-2); font-size: .97rem; }
.fw-card__price { font-weight: 700; color: var(--fw-ink-accent); }

.fw-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.fw-steps li {
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-lg); background: var(--fw-veil); border: 1px solid var(--fw-line);
}
/* The pure hue carries white text at only 2.9:1 in the lightest worlds, so the
   numerals sit on the deepened tone instead — that one is derived against the
   paper and keeps white above 5.5:1 in all eight colour worlds. */
.fw-steps__num {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px;
  border-radius: 50%; background: var(--fw-deep); color: #fff;
  font-family: var(--display); font-size: 1.02rem; font-weight: 600;
}
.fw-steps h3 { margin-bottom: 8px; }
.fw-steps p { margin: 0; color: var(--ink-2); font-size: .94rem; }

.fw-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(26px, 4.5vw, 64px); align-items: center; }
.fw-split__copy h2 { margin-bottom: 16px; }
.fw-split__copy > p { color: var(--ink-2); }

.fw-people { margin-top: 22px; display: grid; gap: 14px; }
.fw-people li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--edge-soft);
}
.fw-people b { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.fw-people i { font-style: normal; font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fw-ink-accent); }
.fw-people span { color: var(--ink-2); font-size: .93rem; }

/* -------------------------------------------------------------- leistungen */

.fw-services { display: grid; gap: clamp(30px, 4vw, 60px); }
.fw-service { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(20px, 3.5vw, 46px); align-items: center; }
.fw-service:nth-child(even) .fw-service__media { order: 2; }
.fw-service__num {
  display: inline-block; margin-bottom: 12px;
  /* --fw-accent is the pure hue and only guaranteed against surfaces, not for
     reading; text on paper takes the deepened --fw-ink-accent like every other
     accent-coloured line on the page. */
  font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--fw-ink-accent);
  letter-spacing: .06em;
}
.fw-service h2 { font-size: clamp(1.44rem, 2.4vw, 2.05rem); margin-bottom: 12px; }
.fw-service__body > p { color: var(--ink-2); }
.fw-service__body ul { margin-top: 18px; }
.fw-service__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--edge-soft);
}
.fw-service__meta b { color: var(--fw-ink-accent); font-size: 1.02rem; }
.fw-service__meta span { color: var(--ink-3); font-size: .9rem; }

/* --------------------------------------------------------------- projekte */

.fw-projects { display: grid; gap: clamp(40px, 6vw, 78px); }
.fw-project { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); gap: clamp(22px, 3.5vw, 48px); align-items: center; }
.fw-project:nth-child(even) .fw-ba { order: 2; }
.fw-project h2 { font-size: clamp(1.44rem, 2.4vw, 2.05rem); margin-bottom: 12px; }
.fw-project__body > p { color: var(--ink-2); }
.fw-project__body ul { margin: 16px 0 0; }
.fw-project__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin: 22px 0 0; padding: 18px 20px;
  border-radius: var(--r); background: var(--fw-veil); border: 1px solid var(--fw-line);
}
.fw-project__facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fw-project__facts dd { margin: 2px 0 0; font-weight: 650; font-size: .95rem; }

.fw-note-block { max-width: 78ch; }
.fw-note-block h2 { margin-bottom: 14px; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.fw-note-block p { margin: 0; color: var(--ink-2); }

/* ------------------------------------------------------------- farbwelten */

.fw-preview {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px); align-items: center;
  margin-top: clamp(26px, 3.5vw, 46px);
  padding: clamp(22px, 3vw, 38px);
  border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--edge-soft);
}
.fw-preview__wall { display: grid; gap: 12px; }
.fw-preview__band { display: block; height: clamp(56px, 8vw, 84px); border-radius: var(--r); }
.fw-preview__band--full { background: var(--fw-accent); }
.fw-preview__band--soft { background: var(--fw-line); }
.fw-preview__band--veil { background: var(--fw-soft); }
.fw-preview__copy h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 12px; }
.fw-preview__copy p { color: var(--ink-2); font-size: .97rem; }
.fw-preview__meta { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.fw-preview__meta b { font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--fw-ink-accent); }
.fw-preview__meta span { color: var(--ink-3); font-size: .9rem; }

.fw-worlds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(16px, 2vw, 24px); margin-top: clamp(30px, 4vw, 52px);
}
.fw-world {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--edge-soft); border-radius: var(--r-lg); background: var(--card);
}
.fw-world__dot {
  width: 74px; height: 74px; border-radius: 50%; margin-bottom: 18px;
  background: var(--fw-chip); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .5);
}
.fw-world h2 { font-size: 1.35rem; margin-bottom: 10px; }
.fw-world__effect { color: var(--ink-2); font-size: .95rem; }
.fw-world__note { color: var(--ink-3); font-size: .88rem; }
.fw-world__fits { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }
.fw-world__fits li {
  padding: 5px 12px; border-radius: 999px;
  background: var(--paper-2); font-size: .8rem; font-weight: 650; color: var(--ink-2);
}
.fw-world .fw-btn { margin-top: auto; }

/* ------------------------------------------------------- tables and towns */

.fw-tablewrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--fw-line); background: var(--card); }
.fw-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .95rem; }
.fw-table caption { text-align: left; }
.fw-table th, .fw-table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--edge-soft); }
.fw-table thead th {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); background: var(--fw-veil);
}
.fw-table tbody th { font-weight: 700; color: var(--ink); }
.fw-table tbody tr:last-child th, .fw-table tbody tr:last-child td { border-bottom: 0; }

.fw-towns { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.fw-towns li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--fw-line);
}
.fw-towns b { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.fw-towns span { font-size: .87rem; color: var(--ink-3); }
.fw-towns i { font-style: normal; font-size: .85rem; font-weight: 700; color: var(--fw-ink-accent); }

/* ------------------------------------------------------------------ forms */

.fw-request { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; }

.fw-form {
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--edge-soft); border-radius: var(--r-xl); background: var(--card);
}
.fw-form--card { margin-top: 26px; }
.fw-form h3 { margin-bottom: 18px; font-size: 1.3rem; }

.fw-progress {
  display: flex; flex-direction: column; gap: 10px; margin: 0 0 26px;
  padding: 16px 20px; border-radius: var(--r); background: var(--fw-veil); border: 1px solid var(--fw-line);
}
.fw-progress__track { display: block; height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.fw-progress__track i { display: block; height: 100%; border-radius: 999px; background: var(--fw-accent); }
.fw-progress b { font-size: .92rem; font-weight: 700; color: var(--fw-ink-accent); }

.fw-fieldset { margin: 0 0 26px; padding: 0; border: 0; display: block; }
.fw-fieldset legend {
  display: block; width: 100%; float: none; padding: 0; margin: 0 0 14px;
  font-family: var(--display); font-size: 1.18rem; font-weight: 600; color: var(--ink);
}

.fw-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fw-choice { position: relative; display: block; cursor: pointer; }
.fw-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fw-choice span {
  display: flex; flex-direction: column; gap: 2px;
  padding: 15px 18px; border-radius: var(--r);
  border: 2px solid var(--edge-soft); background: var(--paper);
}
.fw-choice b { font-size: .98rem; }
.fw-choice i { font-style: normal; font-size: .84rem; color: var(--ink-3); }
.fw-choice input:checked + span { border-color: var(--fw-accent); background: var(--fw-veil); }
.fw-choice input:focus-visible + span { outline: 3px solid var(--fw-ink-accent); outline-offset: 3px; }

.fw-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fw-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fw-field--wide { grid-column: 1 / -1; }
.fw-field > span { font-size: .87rem; font-weight: 700; color: var(--ink-2); }
.fw-field > span i { font-style: normal; font-weight: 500; color: var(--ink-3); }
.fw-field input, .fw-field select, .fw-field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  border: 2px solid var(--edge-soft); border-radius: 16px;
  font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--paper);
}
.fw-field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.fw-field input:focus, .fw-field select:focus, .fw-field textarea:focus { border-color: var(--fw-accent); outline: none; }
.fw-field input:focus-visible, .fw-field select:focus-visible, .fw-field textarea:focus-visible { outline: 3px solid var(--fw-ink-accent); outline-offset: 2px; }

.fw-form__world {
  margin: 24px 0 20px; padding: 15px 20px;
  border-radius: var(--r); background: var(--fw-soft);
  font-size: .95rem; color: var(--ink-2);
}
.fw-form__world b { color: var(--fw-ink-accent); font-weight: 700; }

.fw-aside { display: grid; gap: 16px; }
.fw-aside__box {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg); background: var(--fw-veil); border: 1px solid var(--fw-line);
}
.fw-aside h2 { font-size: 1.22rem; margin-bottom: 10px; }
.fw-aside p { color: var(--ink-2); font-size: .95rem; }
.fw-phone { font-family: var(--display); font-size: 1.32rem; font-weight: 600; color: var(--fw-ink-accent); }
.fw-aside address { font-style: normal; color: var(--ink-2); font-size: .95rem; line-height: 1.7; }

/* -------------------------------------------------------------- cta, foot */

.fw-cta { padding: clamp(46px, 6vw, 84px) 0; }
.fw-cta__inner {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, auto);
  gap: clamp(22px, 3vw, 44px); align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--r-xl); background: var(--fw-deep); color: #fff;
}
.fw-cta__inner h2 { color: #fff; margin-bottom: 12px; }
.fw-cta__inner p { margin: 0; color: rgba(255, 255, 255, .85); }

.fw-foot { padding: clamp(44px, 5vw, 74px) 0 clamp(30px, 4vw, 48px); background: var(--paper-2); border-top: 1px solid var(--edge-soft); }
.fw-foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
.fw-foot h2 { font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.fw-foot__grid > div > a { display: block; padding: 5px 0; font-size: .96rem; font-weight: 600; color: var(--ink-2); }
.fw-foot__grid > div > a:hover { color: var(--fw-ink-accent); }
.fw-foot__brand p { color: var(--ink-2); font-size: .95rem; max-width: 42ch; }
.fw-foot__world b { color: var(--fw-ink-accent); font-weight: 700; }
.fw-foot__line { margin: 0 0 6px; color: var(--ink-2); font-size: .95rem; }
.fw-foot address { font-style: normal; color: var(--ink-2); font-size: .95rem; line-height: 1.75; }

.fw-note {
  margin: clamp(30px, 4vw, 48px) 0 0; padding-top: 22px;
  border-top: 1px solid var(--edge-soft);
  color: var(--ink-3); font-size: .84rem; line-height: 1.6;
}
.fw-note a { color: var(--fw-ink-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
  html.appv-demo [data-reveal] { opacity: 0; transform: scale(.975) translateY(12px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1); }
  html.appv-demo [data-reveal].is-in { opacity: 1; transform: none; }

  .fw-btn, .fw-chip, .fw-chip__dot, .fw-worldchip, .fw-worldchip__dot, .fw-logo__mark,
  .fw-tint, .fw-picker, .fw-card__blob, .fw-steps li, .fw-steps__num, .fw-hero::before,
  .fw-hero__blob, .fw-preview__band, .fw-world__dot, .fw-plain li::before, .fw-eyebrow::before,
  .fw-cta__inner, .fw-progress, .fw-progress__track i, .fw-form__world, .fw-aside__box,
  .fw-towns li, .fw-project__facts, .fw-ba__handle, .fw-ba__tag--after, .fw-table thead th {
    transition: background-color .5s ease, border-color .5s ease, color .5s ease, box-shadow .5s ease;
  }
  .fw-nav a, .fw-link, .fw-card, .fw-world { transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease; }
  .fw-card:hover, .fw-world:hover { transform: translateY(-3px); }
  .fw-btn { transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .2s ease; }
  .fw-btn:hover { transform: translateY(-2px); }
  .fw-ba__layer--before, .fw-ba__seam, .fw-ba__handle { transition-property: background-color, border-color, color, box-shadow; }
}

/* ------------------------------------------------------------- responsive */

/* Logo, five nav links and the two actions need 1096px of row before the nav
   would start wrapping onto a second line. With the shell gutters that width is
   only available from about 1216px upwards, so the desktop nav stays folded
   into the mobile panel until there is room for it in one line. */
@media (max-width: 1240px) {
  .fw-nav { display: none; }
  .fw-burger { display: block; }
  .fw-mobile {
    display: block; max-height: 0; overflow: hidden;
    background: var(--card); border-top: 1px solid var(--edge-soft);
  }
  .fw-mobile.is-open { max-height: 520px; }
  .fw-mobile a {
    display: block; padding: 15px var(--gut);
    border-bottom: 1px solid var(--edge-soft);
    font-size: 1.05rem; font-weight: 650;
  }
  .fw-mobile a[aria-current] { color: var(--fw-ink-accent); }
  .fw-mobile .fw-btn--block { width: auto; margin: 18px var(--gut) 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 1240px) { .fw-mobile { transition: max-height .3s ease; } }
}

@media (max-width: 1000px) {
  .fw-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .fw-hero__media { order: -1; }
  .fw-hero__blob { display: none; }
  .fw-split, .fw-service, .fw-project, .fw-preview, .fw-request, .fw-sectionhead, .fw-cta__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .fw-sectionhead { align-items: start; }
  .fw-service:nth-child(even) .fw-service__media, .fw-project:nth-child(even) .fw-ba { order: 0; }
  .fw-cards, .fw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fw-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .fw { font-size: 16.5px; }
  .fw-head__inner { min-height: 72px; gap: 12px; }
  .fw-logo__mark { width: 42px; height: 42px; border-radius: 14px; }
  .fw-logo__mark svg { width: 26px; height: 26px; }
  .fw-logo__text { font-size: 1.08rem; }
  .fw-worldchip { padding: 6px; }
  .fw-worldchip__label { display: none; }
  .fw-head__actions .fw-btn--sm { display: none; }
  .fw-cards, .fw-steps, .fw-choices, .fw-grid2, .fw-project__facts { grid-template-columns: minmax(0, 1fr); }
  .fw-ba__stage { border-radius: var(--r); }
  .fw-ba__handle { width: 48px; height: 48px; }
  .fw-ba__tag { font-size: .68rem; padding: 6px 11px; max-width: 62%; top: 10px; }
  .fw-ba__tag--before { left: 10px; }
  .fw-ba__tag--after { top: auto; bottom: 10px; right: 10px; }
  .fw-hero__facts { gap: 12px 24px; }
  .fw-chip { font-size: .88rem; padding: 7px 15px 7px 8px; }
  .fw-chip__dot { width: 24px; height: 24px; }
}

/* Below the width where the widest table still fits, the rows become the same
   card list that the request page already uses. Nothing is parked behind a
   horizontal scroll any more; the column heads travel along as row labels. */
@media (max-width: 700px) {
  .fw-tablewrap { overflow-x: visible; border: 0; border-radius: 0; background: none; }
  .fw-table { display: block; min-width: 0; }
  .fw-table thead {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .fw-table tbody { display: grid; gap: 12px; }
  .fw-table tbody tr {
    display: flex; flex-direction: column; gap: 3px;
    padding: 16px 20px; border-radius: var(--r);
    background: var(--card); border: 1px solid var(--fw-line);
  }
  .fw-table tbody th, .fw-table tbody td { display: block; padding: 0; border: 0; }
  .fw-table tbody th { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
  .fw-table tbody td { font-size: .89rem; color: var(--ink-2); }
  .fw-table tbody td::before {
    content: attr(data-label) ": ";
    font-weight: 700; color: var(--ink-3);
  }
}

@media (max-width: 560px) {
  .fw-foot__grid { grid-template-columns: minmax(0, 1fr); }
  .fw-btn { width: 100%; }
  .fw-hero__actions .fw-btn, .fw-cta__inner .fw-btn { width: 100%; }
  .fw-worlds { grid-template-columns: minmax(0, 1fr); }
  .fw-towns { grid-template-columns: minmax(0, 1fr); }
  .fw-picker__read { flex-direction: column; }
}

/* On the narrowest phones the header row (logo, colour chip, burger) is wider
   than the shell and pushes the whole page into a sideways scroll. The claim
   line under the wordmark is the widest part of the logo and the only piece
   that is purely decorative — it steps aside so the row fits again. */
@media (max-width: 380px) {
  .fw-logo__text { font-size: 1rem; }
  .fw-logo__text i { display: none; }
}

@media print {
  .fw-head, .fw-mobile, .fw-cta, .fw-ba__handle { display: none !important; }
}