/* ---- webmaestro-local-fonts ---- */
/* 2026-09-15 — Brygada 1918 (display) and Schibsted Grotesk (text and
   labels) replace Fraunces, Inter and IBM Plex Mono: two families instead of
   three, and a pairing that is not the default look of the category.
   Self-hosted latin subsets from Google Fonts (SIL Open Font License), so the
   site makes no third-party font requests.

   Schibsted Grotesk also gets its latin-ext subset. It only downloads when a
   character outside latin appears - in practice a name like "Novaković" typed
   into the form - so it costs nothing on an ordinary visit.

   URLs are relative to THIS file (assets/), hence fonts/ and not
   assets/fonts/ - the standalone build knows both spellings. */
@font-face{
  font-family:"Brygada 1918";
  src:url("fonts/brygada-1918-400-700.woff2") format("woff2");
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Brygada 1918";
  src:url("fonts/brygada-1918-italic-400-700.woff2") format("woff2");
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Schibsted Grotesk";
  src:url("fonts/schibsted-grotesk-400-900.woff2") format("woff2");
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Schibsted Grotesk";
  src:url("fonts/schibsted-grotesk-400-900-latin-ext.woff2") format("woff2");
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Schibsted Grotesk";
  src:url("fonts/schibsted-grotesk-italic-400-900.woff2") format("woff2");
  font-style:italic;
  font-weight:400 900;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- base ---- */
:root{
    --ink:#586B54;
    --paper:#F3F2ED;
    --paper-2:#E6DDD0;
    --emerald:#5F6247;
    --emerald-dark:#454736;
    --brass:#B08D45;
    --brass-light:#D9C08C;
    --wine:#7A3B3F;
    --cream:#FAF9F4;
    --line:rgba(88,91,84,0.14);
    --line-on-dark:rgba(248,245,236,0.16);
    --shadow:0 24px 48px -28px rgba(88,91,84,0.45);
    --r-s:4px;
    --r-m:14px;
    --ff-display:'Brygada 1918',Georgia,'Times New Roman',serif;
    --ff-body:'Schibsted Grotesk',system-ui,'Segoe UI',Roboto,sans-serif;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--ff-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; }
  ul,ol{ margin:0; padding:0; list-style:none; }
  h1,h2,h3{ margin:0; font-family:var(--ff-display); font-weight:500; }
  p{ margin:0; }

  *:focus-visible{ outline:2px solid var(--emerald); outline-offset:3px; border-radius:2px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    html{ scroll-behavior:auto; }
  }

  .wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }

  .eyebrow{
    font-family:var(--ff-body);
    font-size:0.72rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--emerald);
    margin:0 0 14px;
    display:block;
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 26px;
    border-radius:var(--r-s);
    font-weight:600;
    font-size:0.95rem;
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    transition:background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .btn--primary{ background:var(--emerald); color:var(--cream); }
  .btn--primary:hover{ background:var(--emerald-dark); transform:translateY(-2px); box-shadow:var(--shadow); }
  .btn--on-dark:hover{ background:var(--brass-light); transform:translateY(-2px); }
  .btn--text:hover{ color:var(--emerald); }
  .btn--block{ width:100%; margin-top:22px; }

  /* ---------- Reveal on scroll ---------- */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }

  /* ---------- Nav ---------- */
  .nav{
    position:sticky; top:0; z-index:50;
    background:rgba(243,242,237,0.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav__inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:24px; }
  .nav__logo{ display:inline-flex; align-items:center; text-decoration:none; line-height:0; flex-shrink:0; }
  .nav__logo img{ display:block; width:min(360px, 42vw); height:auto; }
  .nav__links{ display:flex; gap:28px; font-size:0.9rem; }
  .nav__links a{ text-decoration:none; opacity:0.8; transition:opacity .2s ease; }
  .nav__links a:hover{ opacity:1; }
  .nav__cta{ white-space:nowrap; }
  @media (max-width:760px){
    .nav__links{ display:none; }
    .nav__logo img{ width:min(250px, 56vw); }
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background:var(--paper);
    color:var(--ink);
    padding:120px 0 96px;
    overflow:hidden;
  }
  .hero__inner{
    position:relative; z-index:1; max-width:1120px;
    display:grid; grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "visual"
      "tail";
    gap:36px;
  }
  @media (min-width:960px){
    .hero__inner{
      grid-template-columns:1.1fr 1fr;
      grid-template-areas:
        "head visual"
        "tail visual";
      gap:28px 48px;
      align-items:center;
    }
  }
  .hero__head{ grid-area:head; max-width:620px; }
  .hero__tail{ grid-area:tail; max-width:620px; }
  .hero__title-wrap{ margin-bottom:0; }
  .hero__title{
    font-size:clamp(2.6rem, 5.5vw + 1rem, 4.6rem);
    line-height:1.08;
  }
  .hero__title em{ font-style:italic; font-weight:400; color:var(--emerald); }
  .hero__actions{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }

  /* ---------- Section shared ---------- */
  section{ padding:96px 0; }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head h2{ font-size:clamp(2rem, 2.6vw + 1rem, 2.9rem); line-height:1.12; margin-bottom:16px; }
  .section-head p{ font-size:1.05rem; color:rgba(88,91,84,0.72); }

  /* ---------- Process ---------- */
  .process{ background:var(--paper); }

  /* ---------- Pricing ---------- */
  .pricing{ background:var(--paper); }
  .pricing__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch; }
  @media (max-width:900px){ .pricing__grid{ grid-template-columns:1fr; } }

  .pkg{
    position:relative;
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:var(--r-m);
    padding:32px 28px;
    display:flex; flex-direction:column;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .pkg:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
  .pkg--featured{ background:var(--cream); border:2px solid var(--emerald); }
  .pkg__name{ font-family:var(--ff-display); font-style:italic; font-size:1.6rem; margin-bottom:6px; }
  .pkg__desc{ font-size:0.95rem; color:rgba(88,91,84,0.65); margin-bottom:20px; min-height:44px; }
  .pkg__price{ font-family:var(--ff-display); font-size:1.6rem; margin-bottom:22px; }
  .pkg__price span{ font-size:0.85rem; opacity:0.6; font-weight:400; }
  .pkg__features{ display:flex; flex-direction:column; gap:11px; flex:1; }
  .pkg__features li{ font-size:0.92rem; padding-left:22px; position:relative; color:rgba(88,91,84,0.75); }
  .pkg__features li::before{ content:"—"; position:absolute; left:0; color:var(--emerald); }

  /* ---------- Impressum ---------- */
  .impressum{ background:var(--paper-2); color:rgba(88,91,84,0.86); padding-top:80px; }
  .impressum h2{ color:var(--ink); font-size:2rem; margin-bottom:40px; }
  .impressum__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:36px 48px; }
  @media (max-width:760px){ .impressum__grid{ grid-template-columns:1fr; } }
  .impressum h3{
    font-family:var(--ff-body); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--emerald); margin-bottom:12px; font-weight:600;
  }
  .impressum p{ font-size:0.92rem; line-height:1.7; color:rgba(88,91,84,0.72); }
  .impressum a{ color:var(--emerald); text-decoration:underline; }
  .impressum__note{
    margin-top:44px; padding-top:24px; border-top:1px solid var(--line);
    font-family:var(--ff-body); font-size:0.78rem; color:rgba(88,91,84,0.5);
  }
  .impressum__bottom{
    margin-top:24px; padding:18px 0; border-top:1px solid var(--line);
    font-size:0.82rem; color:rgba(88,91,84,0.5);
  }

  /* ---------- Fluid device sizing ---------- */
  :root{
    --page-gutter:clamp(18px,3.2vw,52px);
    --content-max:1280px;
  }
  html{ width:100%; overflow-x:hidden; }
  body{ width:100%; min-width:0; overflow-x:hidden; }
  .wrap{
    width:min(var(--content-max),calc(100% - (var(--page-gutter) * 2)));
    max-width:none;
    padding-left:0;
    padding-right:0;
  }
  .nav__inner{
    width:min(var(--content-max),calc(100% - (var(--page-gutter) * 2)));
    max-width:none;
    padding:clamp(12px,1.8vh,16px) 0;
  }
  .hero{
    padding:clamp(72px,11vh,120px) 0 clamp(62px,9vh,96px);
  }
  .hero__inner{ max-width:none; }
  .hero__title{
    font-size:clamp(2.45rem,5vw,4.8rem);
  }
  section{ padding:clamp(68px,9vw,106px) 0; }

  @media (min-width:1440px){
    :root{ --content-max:1360px; }
    .hero__inner{ grid-template-columns:1.05fr 1fr; gap:36px 72px; }
    .hero__head,.hero__tail{ max-width:700px; }
    .hero__title{ font-size:clamp(4.2rem,4.6vw,5.35rem); }
  }

  @media (max-width:959px){
    .hero{ padding-top:clamp(64px,8vh,88px); }
    .hero__inner{ gap:28px; }
    .hero__head,.hero__tail{ max-width:760px; }
  }

  @media (max-width:760px){
    :root{ --page-gutter:18px; }
    .nav__inner{ gap:12px; }
    .nav__logo{ font-size:1rem; }
    .nav__cta{ padding:11px 14px; font-size:.82rem; }
    .hero{ padding:54px 0 58px; }
    .hero__title{ font-size:clamp(2.35rem,11vw,3.65rem); line-height:1.02; }
    .hero__actions{ gap:14px; }
    .hero__actions .btn{ flex:1 1 auto; }
    section{ padding:62px 0; }
    .section-head{ margin-bottom:40px; }
    .pkg{ padding:28px 22px; }
  }

  @media (min-width:960px) and (max-height:760px){
    .nav__inner{ padding-top:10px; padding-bottom:10px; }
    .hero{ padding:58px 0 54px; }
    .hero__title{ font-size:clamp(2.8rem,4.5vw,4.05rem); }
    section{ padding:68px 0; }
  }
.hero-slide.is-active{opacity:1;}
.hero-gallery__slide.is-active { opacity:1; }
.hero-gallery__slide.is-active { opacity:1; }
.hero-gallery__slide.is-active{opacity:1;}

/* ---- base ---- */

.showcase{
  position:relative;
  background:#F3F2ED;
  overflow:clip;
}
.showcase__intro{
  min-height:72vh;
  display:grid;
  place-items:center;
  padding:110px 24px 92px;
  text-align:center;
  background:var(--paper);
}
.showcase__intro-inner{max-width:860px}
.showcase__intro .eyebrow{margin-bottom:18px}
.showcase__intro h2{
  margin:0 auto 24px;
  max-width:12ch;
  font-size:clamp(2.8rem,7vw,6.9rem);
  line-height:.92;
  letter-spacing:-.03em;
}
.showcase__intro h2 em{font-style:italic;color:var(--wine)}
.showcase__intro p{
  margin:0 auto;
  max-width:660px;
  font-size:clamp(1rem,1.35vw,1.16rem);
  color:rgba(88,91,84,.72);
}
.showcase__cue{
  margin-top:38px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font:500 .72rem var(--ff-body);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.showcase__cue i{
  display:block;
  width:1px;height:34px;
  background:currentColor;
  transform-origin:top;
  animation:showcaseCue 1.8s ease-in-out infinite;
}
@keyframes showcaseCue{0%,100%{transform:scaleY(.42);opacity:.35}50%{transform:scaleY(1);opacity:1}}
.showcase__dots button:hover{transform:translateY(-2px)}
.showcase__dots button.is-active{background:currentColor;color:#fff;transform:translateY(-2px)}
.showcase__dots button.is-active span{background:rgba(255,255,255,.18)}
.world.is-active{visibility:visible}

@media (max-width: 640px){
  .showcase__intro{padding:96px 18px 72px}
}

@media (prefers-reduced-motion: reduce){
  .showcase__cue i{animation:none}
}
.flora-loop__tabs span.is-active{
  background:#263226;
  color:#fff;
  border-color:#263226;
  transform:translateY(-1px);
}
.flora-loop[data-state="geburtstag"] .flora-loop__bouquet .stem{background:#A56A28}
.flora-loop[data-state="jahrestag"] .flora-loop__tabs span.is-active{background:#fff8f1;color:#7A2F25;border-color:#fff8f1}
.flora-loop[data-state="jahrestag"] .flora-loop__bouquet .stem{background:#FFE6C5}
.flora-loop[data-state="hochzeit"] .flora-loop__bouquet .stem{background:#7C8C95}
.flora-loop__slide.is-active{
  opacity:1;
  transform:scale(1);
}
.flora-loop__slide.is-active{transform:scale(1)}
.flora-loop__slide.is-active{transform:none !important;}

/* ---- offer-refresh-styles ---- */

.offer-check{
  background:var(--paper-2);
  padding:clamp(72px,8vw,104px) 0;
}
.offer-check__card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:clamp(36px,6vw,86px);
  align-items:center;
  padding:clamp(34px,5vw,68px);
  border-radius:24px;
  background:var(--emerald-dark);
  color:var(--cream);
  box-shadow:0 28px 70px -44px rgba(42,45,33,.7);
}
.offer-check__card::after{
  content:none !important;
  display:none !important;
}
.offer-check .eyebrow{color:var(--brass-light)}
.offer-check h2{
  max-width:12ch;
  margin:0 0 18px;
  font-size:clamp(2.35rem,4.2vw,4.5rem);
  line-height:.98;
  letter-spacing:-.02em;
}
.offer-check h2 em{font-style:italic;color:var(--brass-light)}
.offer-check__lead{
  max-width:620px;
  margin-bottom:28px;
  color:rgba(250,249,244,.76);
  font-size:1.04rem;
  line-height:1.7;
}

.pricing{background:var(--paper)}
.pricing .section-head{max-width:720px;margin-bottom:34px}
.pricing .section-head h2{max-width:15ch}
.included{
  margin:0 0 34px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(250,249,244,.72);
}
.included__label{
  display:block;
  margin-bottom:13px;
  font:600 .7rem var(--ff-body);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--emerald);
}
.included__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 20px;
}
.included__item{
  position:relative;
  padding-left:22px;
  color:rgba(88,91,84,.72);
  font-size:.86rem;
  line-height:1.45;
}
.included__item::before{
  content:"✓";
  position:absolute;left:0;top:0;
  color:var(--brass);
  font-weight:700;
}
.pricing__grid{gap:22px}
.pkg{
  padding:30px 26px 26px;
  border-radius:18px;
}
.pkg--featured{
  border:2px solid var(--emerald);
  box-shadow:0 22px 60px -42px rgba(69,71,54,.72);
}
.pkg__name{font-size:1.7rem;margin-bottom:8px}
.pkg__headline{
  display:block;
  min-height:48px;
  margin:0 0 10px;
  font-family:var(--ff-display);
  font-size:1.12rem;
  line-height:1.25;
  color:var(--ink);
}
.pkg__desc{min-height:66px;margin-bottom:17px;font-size:.88rem;line-height:1.55}
.pkg__price{font-size:1.65rem;margin-bottom:20px}
.pkg__price span{display:block;margin-top:2px;font-family:var(--ff-body);font-size:.72rem;letter-spacing:0;opacity:.55}
.pkg__features{gap:9px}
.pkg__features li{font-size:.86rem;line-height:1.48;padding-left:20px}
.pkg .btn--block{margin-top:20px;padding:13px 18px}
.pricing__foot{
  margin-top:24px;
  text-align:center;
  color:rgba(88,91,84,.58);
  font-size:.82rem;
}

.care-plans{
  background:var(--paper-2);
  padding:clamp(76px,8vw,104px) 0;
}
.care-plans__head{
  display:grid;
  grid-template-columns:1fr .82fr;
  gap:40px;
  align-items:end;
  margin-bottom:38px;
}
.care-plans__head h2{
  max-width:13ch;
  font-size:clamp(2.2rem,3.7vw,4rem);
  line-height:1;
  letter-spacing:-.02em;
}
.care-plans__head h2 em{font-style:italic;color:var(--wine)}
.care-plans__head p{max-width:520px;color:rgba(88,91,84,.68);font-size:.98rem}
.care-plans__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:980px;margin:0 auto}
.care-card{
  position:relative;
  padding:30px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--cream);
  display:flex;
  flex-direction:column;
}
.care-card--growth{
  background:var(--emerald-dark);
  color:var(--cream);
  border-color:transparent;
}
.care-card h3{font-size:1.75rem;margin-bottom:6px}
.care-card__desc{font-size:.9rem;line-height:1.55;color:rgba(88,91,84,.66);min-height:54px}
.care-card--growth .care-card__desc{color:rgba(250,249,244,.68)}
.care-card__price{font:500 1.55rem var(--ff-display);margin:18px 0 16px}
.care-card__price span{font:400 .76rem var(--ff-body);opacity:.6}
.care-card ul{display:grid;gap:9px;flex:1}
.care-card li{position:relative;padding-left:21px;font-size:.86rem;line-height:1.48;color:rgba(88,91,84,.74)}
.care-card li::before{content:"—";position:absolute;left:0;color:var(--brass)}
.care-card--growth li{color:rgba(250,249,244,.76)}
.care-card--growth .btn{background:var(--brass);color:var(--emerald-dark)}
.care-card--growth .btn:hover{background:var(--brass-light)}
.care-plans__note{text-align:center;margin-top:24px;font-size:.8rem;color:rgba(88,91,84,.56)}

@media(max-width:900px){
  .offer-check__card{grid-template-columns:1fr}
  .included__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .care-plans__head{grid-template-columns:1fr;gap:16px;align-items:start}
}
@media(max-width:700px){
  .offer-check__card{padding:30px 22px;border-radius:18px}
  .offer-check h2{font-size:clamp(2.15rem,10vw,3.4rem)}
  .included{padding:18px}
  .included__grid{grid-template-columns:1fr;gap:8px}
  .pkg__headline,.pkg__desc{min-height:0}
  .care-plans__grid{grid-template-columns:1fr}
  .care-card{padding:26px 22px}
}

/* ---- offer-check-simple-copy ---- */

.offer-check__card{
  grid-template-columns:1fr !important;
  max-width:980px;
  margin-inline:auto;
}
.offer-check__content{
  position:relative;
  z-index:1;
  max-width:760px;
}
.offer-check h2{
  max-width:18ch !important;
}
.offer-check__lead{
  max-width:700px !important;
  margin-bottom:24px !important;
}
.offer-check__note{
  margin-top:18px;
  max-width:680px;
  font-size:.88rem;
  line-height:1.6;
  color:rgba(250,249,244,.62);
}
@media (max-width:640px){
  .offer-check__note{font-size:.82rem;}
}

/* ---- simple-project-slideshow ---- */

.showcase{
  background:var(--paper);
  overflow:hidden;
}
.showcase__intro{
  min-height:auto !important;
  padding:clamp(82px,9vw,118px) 24px clamp(48px,5vw,68px) !important;
}
.showcase__cue{display:none !important;}
.world.is-active,
.world[aria-hidden="false"]{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:2;
}
.simple-showcase__dots button.is-active{
  width:24px;
  border-radius:999px;
  background:var(--wine);
}

/* ---- pricing-heading-refinement ---- */

.pricing{
  padding-top:clamp(42px,5vw,64px) !important;
}
.pricing .section-head.pricing__head{
  max-width:820px !important;
  margin-bottom:28px !important;
}
.pricing .pricing__head h2{
  max-width:none !important;
  margin:0 0 8px !important;
  font-size:clamp(2.6rem,4.4vw,4.8rem) !important;
  line-height:.98 !important;
  letter-spacing:-.025em !important;
  font-weight:500 !important;
}
.pricing__subtitle{
  margin:0;
  font-size:clamp(1.02rem,1.5vw,1.28rem);
  line-height:1.45;
  color:rgba(88,91,84,.66);
}
@media (max-width:640px){
  .pricing{
    padding-top:34px !important;
  }
  .pricing .section-head.pricing__head{
    margin-bottom:22px !important;
  }
}

/* ---- package-description-position ---- */

.pkg__desc--after{
  min-height:0 !important;
  margin:20px 0 0 !important;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:.86rem !important;
  line-height:1.55;
  color:rgba(88,91,84,.62) !important;
}

/* ---- care-growth-refinement ---- */

.care-card--growth{
  background:#6F745A !important;
  color:var(--cream) !important;
}
.care-card--care .btn,
.care-card:not(.care-card--growth) .btn{
  background:#6F745A !important;
  border-color:#6F745A !important;
  color:var(--cream) !important;
}
.care-card--growth .btn{
  background:#E6DDD0 !important;
  border-color:#E6DDD0 !important;
  color:#454736 !important;
}
.care-card--growth .btn:hover{
  background:#DCCFBE !important;
  border-color:#DCCFBE !important;
}

.care-card__title{
  margin:0 0 5px !important;
  font-family:var(--ff-display) !important;
  font-size:clamp(2.15rem,3vw,3rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.015em !important;
  font-weight:500 !important;
}
.care-card__tagline{
  margin:0 0 20px !important;
  font-family:var(--ff-body) !important;
  font-size:.98rem !important;
  line-height:1.45 !important;
  font-weight:400 !important;
  color:rgba(88,91,84,.62) !important;
}
.care-card--growth .care-card__tagline{
  color:rgba(250,249,244,.70) !important;
}

/* ---- global-responsive-resolution ---- */

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  min-width:320px;
}
img, video, iframe, svg{
  max-width:100%;
}
button, a, input, textarea, select{
  max-width:100%;
}
.wrap{
  width:min(1360px, calc(100% - 2 * clamp(18px, 4vw, 56px))) !important;
  max-width:none !important;
  margin-inline:auto !important;
}

body{font-size:clamp(15px, .25vw + 14px, 17px);}
h1,h2,h3,.hero__title,.world__title{
  text-wrap:balance;
}
p,li{
  overflow-wrap:anywhere;
}

.nav__inner{
  width:min(1360px, calc(100% - 2 * clamp(18px, 4vw, 56px))) !important;
  margin-inline:auto !important;
  gap:clamp(14px,2vw,28px) !important;
}
.nav__logo img{
  width:clamp(190px,22vw,310px) !important;
}
.nav__links{
  gap:clamp(16px,2vw,28px) !important;
}
.nav__cta{
  flex:0 0 auto;
  white-space:nowrap;
}

.hero__inner{
  width:100%;
}
.hero__title{
  font-size:clamp(2.35rem,5.4vw,5.25rem) !important;
}

section{
  padding-top:clamp(56px,7vw,100px) !important;
  padding-bottom:clamp(56px,7vw,100px) !important;
}
.section-head{
  width:min(760px,100%);
  margin-bottom:clamp(32px,4vw,56px) !important;
}
.section-head h2{
  font-size:clamp(2rem,4vw,4rem) !important;
}

.offer-check__card{
  width:100%;
  max-width:980px;
  padding:clamp(28px,4.5vw,64px) !important;
  border-radius:clamp(18px,2vw,28px) !important;
}
.offer-check h2{
  /* Capped at 4rem, not 4.25rem: this heading is held on one line, and in
     Brygada 1918 it measures 13.1em, so it fits the 860px card only up to
     65.5px. At 68px it ran 33px past the card edge. */
  font-size:clamp(2rem,4.6vw,4rem) !important;
}
.offer-check__lead{
  font-size:clamp(.98rem,1.25vw,1.15rem) !important;
}

.pricing__grid{
  gap:clamp(18px,2vw,28px) !important;
}
.pkg{
  min-width:0;
  padding:clamp(24px,2.4vw,34px) !important;
}
.pkg__name{
  font-size:clamp(1.45rem,2vw,1.8rem) !important;
}
.pkg__price{
  font-size:clamp(1.35rem,2vw,1.7rem) !important;
}
.pkg__features li{
  font-size:clamp(.88rem,1vw,.96rem) !important;
}

.care-plans__grid{
  width:100%;
  max-width:1080px !important;
  gap:clamp(18px,2vw,28px) !important;
}
.care-card{
  min-width:0;
  padding:clamp(24px,2.8vw,36px) !important;
}
.care-card__title{
  font-size:clamp(2rem,3vw,3rem) !important;
}

.impressum__grid{
  gap:clamp(24px,3vw,48px) !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px){
  .nav__links{
    gap:16px !important;
    font-size:.86rem !important;
  }
  .nav__cta{
    padding:11px 15px !important;
    font-size:.84rem !important;
  }

  .hero__inner{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "head"
      "visual"
      "tail" !important;
    gap:28px !important;
  }
  .hero__head,.hero__tail{
    max-width:760px !important;
  }

  .pricing__grid{
    grid-template-columns:1fr 1fr !important;
  }
  .pkg--featured{
    grid-column:span 1;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px){
  :root{ --page-gutter:18px; }

  .wrap,
  .nav__inner{
    width:calc(100% - 36px) !important;
  }

  .nav__inner{
    padding:8px 0 !important;
  }
  .nav__links{
    display:none !important;
  }
  .nav__logo img{
    width:min(220px,56vw) !important;
  }
  .nav__cta{
    padding:10px 12px !important;
    font-size:.78rem !important;
  }

  .hero{
    padding-top:48px !important;
    padding-bottom:54px !important;
  }
  .hero__title{
    font-size:clamp(2.25rem,11.5vw,3.7rem) !important;
    line-height:1.02 !important;
  }
  .hero__actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .hero__actions .btn{
    width:100% !important;
  }

  .showcase__intro{
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .showcase__intro h2{
    font-size:clamp(2.4rem,12vw,4.2rem) !important;
  }

  .offer-check__card{
    padding:28px 22px !important;
  }

  .pricing__grid{
    grid-template-columns:1fr !important;
  }
  .pkg{
    width:100% !important;
  }

  .care-plans__head,
  .care-plans__grid{
    grid-template-columns:1fr !important;
  }
  .care-card{
    width:100% !important;
  }

  .impressum__grid{
    grid-template-columns:1fr !important;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 430px){
  .wrap,
  .nav__inner{
    width:calc(100% - 28px) !important;
  }
  .nav__logo img{
    width:min(185px,52vw) !important;
  }
  .nav__cta{
    font-size:.72rem !important;
    padding:9px 10px !important;
  }

  .hero__title{
    font-size:clamp(2.05rem,12vw,3rem) !important;
  }

  .offer-check h2{
    font-size:clamp(1.9rem,10vw,2.8rem) !important;
  }

  .pkg,
  .care-card{
    padding:22px 18px !important;
  }
  .pkg__price,
  .care-card__price{
    white-space:normal !important;
  }
}

/* ---------- Large desktop ---------- */
@media (min-width: 1600px){
  .wrap,
  .nav__inner{
    width:min(1480px, calc(100% - 112px)) !important;
  }
  .hero__inner{
    gap:50px 82px !important;
  }
  .hero__title{
    font-size:5.4rem !important;
  }
}

/* ---- sticky-packages-cta-styles ---- */

.sticky-packages-cta{
  position:fixed;
  right:clamp(18px,2.4vw,34px);
  bottom:clamp(18px,2.4vw,30px);
  z-index:999;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 22px;
  border:1px solid rgba(111,116,90,.4);
  border-radius:999px;
  background:#6F745A;
  color:#FAF9F4;
  font-weight:600;
  font-size:.9rem;
  text-decoration:none;
  box-shadow:0 14px 34px rgba(48,48,38,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:opacity .24s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.sticky-packages-cta:hover{
  transform:translateY(-2px);
  background:#62674F;
  border-color:#62674F;
  box-shadow:0 18px 40px rgba(48,48,38,.22);
}
.sticky-packages-cta span{
  font-size:1rem;
  line-height:1;
}
.sticky-packages-cta.is-hidden{
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(12px) !important;
}

@media (max-width:640px){
  
  .sticky-packages-cta{
    position:static;
    display:flex;
    width:fit-content;
    max-width:min(86vw,320px);
    margin:28px auto 0;
    min-height:50px;
    padding:0 18px;
  }
  .sticky-packages-cta:hover{
    transform:none;
  }
  .sticky-packages-cta.is-hidden{
    transform:translateY(12px) !important;
  }
}

/* ---- live-chat-check-styles ---- */

.process--live-chat{
  padding:0 !important;
  min-height:100svh;
  background:
    radial-gradient(circle at 12% 12%, rgba(250,202,103,.12), transparent 24%),
    radial-gradient(circle at 88% 86%, rgba(162,122,61,.10), transparent 28%),
    var(--cream) !important;
  overflow:hidden;
}
.live-chat{
  width:min(1480px,calc(100% - (var(--page-gutter) * 2)));
  min-height:100svh;
  margin:0 auto;
  padding:clamp(34px,5vh,62px) 0 clamp(38px,6vh,72px);
  display:grid;
  grid-template-rows:auto 1fr;
}
.live-chat__head{
  position:relative;
  z-index:2;
}
.live-chat__head h2{
  margin:0;
  font-family:var(--ff-display);
  font-size:clamp(2.5rem,5vw,5.8rem);
  line-height:.94;
  letter-spacing:-.03em;
  font-weight:400;
  color:var(--forest);
}
.live-chat__conversation{
  align-self:center;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:clamp(12px,1.45vw,20px);
  padding:clamp(28px,4vh,48px) 0 0;
}
.live-chat__message{
  width:100%;
  display:flex;
  align-items:flex-end;
  gap:12px;
  opacity:0;
  transform:translate3d(0,16px,0) scale(.985);
  filter:blur(4px);
  transition:
    opacity .52s ease,
    transform .68s cubic-bezier(.22,.61,.36,1),
    filter .52s ease;
  pointer-events:none;
}
.live-chat__message.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:none;
  pointer-events:auto;
}
.live-chat__message--customer{
  justify-content:flex-end;
}
.live-chat__message--studio{
  justify-content:flex-start;
}
.live-chat__bubble{
  max-width:min(720px,60vw);
  padding:clamp(16px,1.55vw,23px) clamp(18px,1.8vw,28px);
  border-radius:24px;
  font-size:clamp(1rem,1.25vw,1.28rem);
  line-height:1.52;
  box-shadow:0 14px 34px rgba(21,19,10,.07);
}
.live-chat__message--customer .live-chat__bubble{
  background:#F3E4C8;
  color:var(--shadow);
  border-bottom-right-radius:7px;
  border:1px solid rgba(162,122,61,.22);
}
.live-chat__message--studio .live-chat__bubble{
  background:var(--forest);
  color:var(--cream);
  border-bottom-left-radius:7px;
  box-shadow:0 16px 38px rgba(21,19,10,.15);
}
.live-chat__message--studio .live-chat__bubble em{
  color:var(--honey);
  font-style:italic;
}
.live-chat__avatar{
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--shadow);
  color:var(--honey);
  border:1px solid rgba(250,202,103,.32);
  font:italic 500 1.1rem var(--ff-display);
  box-shadow:0 8px 22px rgba(21,19,10,.13);
}

.live-chat__typing{
  width:max-content;
  min-width:64px;
  height:38px;
  padding:0 14px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  opacity:0;
  transform:translateY(6px) scale(.96);
  transition:opacity .22s ease,transform .28s ease;
  pointer-events:none;
}
.live-chat__typing.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.live-chat__typing--studio{
  margin-left:54px;
  background:rgba(37,41,21,.10);
  border:1px solid rgba(37,41,21,.10);
}
.live-chat__typing--customer{
  align-self:flex-end;
  margin-right:4px;
  background:rgba(162,122,61,.11);
  border:1px solid rgba(162,122,61,.14);
}
.live-chat__typing span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--golden-wood);
  opacity:.35;
  animation:liveChatDot 1.05s infinite ease-in-out;
}
.live-chat__typing span:nth-child(2){animation-delay:.13s}
.live-chat__typing span:nth-child(3){animation-delay:.26s}
@keyframes liveChatDot{
  0%,70%,100%{transform:translateY(0);opacity:.32}
  35%{transform:translateY(-4px);opacity:1}
}

@media (min-width:900px) and (max-height:780px){
  .live-chat{
    padding-top:28px;
    padding-bottom:28px;
  }
  .live-chat__head h2{
    font-size:clamp(2.4rem,4.3vw,4.6rem);
  }
  .live-chat__conversation{
    gap:10px;
    padding-top:22px;
  }
  .live-chat__bubble{
    padding:13px 18px;
    font-size:.98rem;
    line-height:1.42;
  }
  .live-chat__typing{
    height:32px;
  }
}

@media (max-width:900px){
  .live-chat{
    width:calc(100% - 40px);
  }
  .live-chat__bubble{
    max-width:min(680px,78vw);
  }
}

@media (max-width:640px){
  .live-chat{
    width:calc(100% - 28px);
    min-height:100svh;
    padding:28px 0 34px;
  }
  .live-chat__head h2{
    font-size:clamp(2.2rem,11vw,3.8rem);
  }
  .live-chat__conversation{
    gap:11px;
    padding-top:30px;
  }
  .live-chat__bubble{
    max-width:84vw;
    padding:14px 16px;
    border-radius:19px;
    font-size:.94rem;
    line-height:1.48;
  }
  .live-chat__message--customer .live-chat__bubble{
    border-bottom-right-radius:6px;
  }
  .live-chat__message--studio .live-chat__bubble{
    border-bottom-left-radius:6px;
  }
  .live-chat__avatar{
    flex-basis:34px;
    width:34px;
    height:34px;
    font-size:.95rem;
  }
  .live-chat__typing--studio{
    margin-left:46px;
  }
}

@media (prefers-reduced-motion:reduce){
  .live-chat__message{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .live-chat__typing{
    display:none !important;
  }
  .live-chat__typing span{
    animation:none !important;
  }
}

/* ---- live-chat-cta-styles ---- */

.live-chat__cta{
  display:flex;
  justify-content:flex-start;
  padding-left:54px;
  opacity:0;
  transform:translate3d(0,14px,0) scale(.985);
  transition:
    opacity .45s ease,
    transform .65s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.live-chat__cta.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  pointer-events:auto;
}
.live-chat__cta-button{
  min-height:54px;
  padding-inline:24px !important;
  border-radius:999px !important;
  box-shadow:0 14px 34px rgba(21,19,10,.12);
}
@media (max-width:640px){
  .live-chat__cta{
    padding-left:46px;
  }
  .live-chat__cta-button{
    width:auto;
    min-height:50px;
    padding-inline:18px !important;
    font-size:.92rem !important;
  }
}
@media (prefers-reduced-motion:reduce){
  .live-chat__cta{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    pointer-events:auto !important;
  }
}

/* ---- webmaestro-cotton-evergreen-palette ---- */

:root{
  --cotton:#EDEAE1;
  --jade:#C1C3AC;
  --dusty-olive:#80866E;
  --evergreen:#013220;

  --shadow:#013220;
  --forest:#013220;
  --moss:#80866E;
  --bark:#80866E;
  --golden-wood:#80866E;
  --sunset:#013220;
  --honey:#EDEAE1;
  --dusk:#80866E;

  --ink:#013220;
  --paper:#EDEAE1;
  --paper-2:#C1C3AC;
  --cream:#F7F3EA;
  --emerald:#013220;
  --emerald-dark:#012716;
  --brass:#80866E;
  --brass-light:#C1C3AC;
  --wine:#013220;

  --line:rgba(128,134,110,0.20);
  --line-on-dark:rgba(237,234,225,0.18);
  --shadow-soft:0 24px 48px -28px rgba(1,50,32,0.28);
}

html, body{
  background:var(--paper) !important;
  color:var(--ink) !important;
}

.section-head p,
.hero__lead,
.mock p,
.pricing__subtitle,
.pkg__desc,
.pkg__desc--after,
.care-plans__head p,
.care-card__desc,
.live-chat__lead,
.impressum__note,
.impressum__bottom{
  color:rgba(128,134,110,0.94) !important;
}

.nav{
  background:rgba(247,243,234,0.92) !important;
  border-color:rgba(128,134,110,0.15) !important;
}
.nav__links a{
  color:rgba(1,50,32,0.66) !important;
}
.nav__links a:hover,
.nav__links a.is-active{
  color:var(--evergreen) !important;
}
.nav__cta,
.sticky-packages-cta,
.btn--primary,
.pkg .btn{
  background:var(--evergreen) !important;
  border-color:var(--evergreen) !important;
  color:var(--cotton) !important;
}
.nav__cta:hover,
.sticky-packages-cta:hover,
.btn--primary:hover,
.pkg .btn:hover{
  background:#012716 !important;
  border-color:#012716 !important;
  color:var(--cotton) !important;
}

.eyebrow,
.step__tag,
.care-card__kicker,
.included__item::before,
.pkg__features li::before,
.care-card li::before{
  color:var(--dusty-olive) !important;
}
.hero__actions .btn--ghost,
.offer-check .btn--ghost,
.impressum a{
  color:var(--evergreen) !important;
  border-color:rgba(1,50,32,0.12) !important;
}

.pkg,
.care-card--care,
.impressum__card,
.simple-showcase__shell,
.live-chat__conversation,
.live-chat__bubble,
.live-chat__typing,
.showcase__outro,
.offer-check__card{
  box-shadow:var(--shadow-soft) !important;
}
.pricing,
.impressum,
.showcase__outro{
  background:var(--paper) !important;
}
.pkg,
.care-card--care,
.impressum__card{
  background:rgba(247,243,234,0.88) !important;
  border-color:rgba(128,134,110,0.16) !important;
}
.pkg--featured{
  border-color:rgba(1,50,32,0.50) !important;
}

.care-card--growth,
.offer-check__card{
  background:var(--evergreen) !important;
  color:var(--cotton) !important;
}
.care-card--growth h3,
.care-card--growth .care-card__eyebrow,
.care-card--growth .care-card__desc,
.care-card--growth li,
.offer-check__card h2,
.offer-check__card p,
.offer-check__card .eyebrow{
  color:var(--cotton) !important;
}

.care-card--growth .btn,
.offer-check .btn,
.offer-check .btn--on-dark{
  background:var(--cotton) !important;
  border-color:var(--cotton) !important;
  color:var(--evergreen) !important;
}
.care-card--growth .btn:hover,
.offer-check .btn:hover,
.offer-check .btn--on-dark:hover{
  background:#f6f1e7 !important;
  border-color:#f6f1e7 !important;
  color:#012716 !important;
}

.included,
.mock,
.offer-strip,
.simple-showcase__controls,
.simple-showcase__dots{
  border-color:rgba(128,134,110,0.16) !important;
}
.live-chat__typing--customer,
.live-chat__message--customer .live-chat__bubble{
  background:var(--jade) !important;
  border-color:rgba(128,134,110,0.22) !important;
  color:var(--evergreen) !important;
}
.live-chat__typing--studio,
.live-chat__message--studio .live-chat__bubble{
  background:var(--evergreen) !important;
  border-color:rgba(237,234,225,0.12) !important;
  color:var(--cotton) !important;
}
.live-chat__message--studio .live-chat__bubble em{
  color:var(--cotton) !important;
}
.live-chat__avatar{
  background:var(--evergreen) !important;
  color:var(--cotton) !important;
  border-color:rgba(237,234,225,0.22) !important;
}
.live-chat__typing span{
  background:var(--cotton) !important;
}

.process--live-chat{
  background:
    radial-gradient(circle at 12% 12%, rgba(193,195,172,.38), transparent 24%),
    radial-gradient(circle at 88% 86%, rgba(128,134,110,.18), transparent 30%),
    var(--paper) !important;
}
.live-chat__head h2{
  color:var(--evergreen) !important;
}
.simple-showcase__dots button:not(.is-active){
  background:rgba(128,134,110,0.30) !important;
}
.simple-showcase__dots button.is-active{
  background:var(--evergreen) !important;
}

.impressum h3,
.impressum a,
.footer a{
  color:var(--evergreen) !important;
}

::selection{
  background:rgba(193,195,172,0.55);
  color:var(--evergreen);
}

/* ---- webmaestro-loader-styles ---- */
/* Replaces the old fake-code-editor loader with a WM mark + progress ring
   that shatters and falls once loading completes. See hero-gallery-controls
   above and the block near the end of this file for the mark/ring/shatter
   rules themselves — kept together with their own dated block since this
   is a full subsystem, not a patch. */

.wm-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  place-items:center;
  overflow:hidden;
  background:var(--cotton);
  transition:opacity .18s ease;
}
html.js .wm-loader{display:grid;}

.wm-loader.is-complete{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s step-end;
}

/* The rest of the page stays hidden until the loader hands off. */
html.js body > *:not(.wm-loader){
  opacity:0;
  transform:translateY(18px) scale(.99);
}
html.js body.wm-site-visible > *:not(.wm-loader){
  opacity:1;
  transform:none;
  transition:
    opacity .5s var(--ease-out),
    transform .5s var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  html.js body > *:not(.wm-loader){
    opacity:1 !important;
    transform:none !important;
  }
  .wm-loader{
    transition:opacity .2s ease !important;
  }
}

/* ---- showcase-reversed-heading-colors ---- */

.showcase__intro h2{
  color:#80866E !important;
}
.showcase__intro h2 em{
  color:#013220 !important;
}

/* ---- hero-typed-clean-override ---- */

.hero{
  padding-bottom:clamp(48px, 6vw, 76px) !important;
}

.hero__tail{
  margin-top:clamp(8px, 1.5vw, 16px) !important;
}

.hero__typed-line.is-active::after{
  content:"";
  display:inline-block;
  width:2px;
  height:.78em;
  margin-left:.08em;
  transform:translateY(.03em);
  background:currentColor;
  animation:heroCaretBlink .72s steps(1,end) infinite;
}

.hero__typed-line.is-done::after{
  content:none;
}

@keyframes heroCaretBlink{
  0%,47%{opacity:1}
  48%,100%{opacity:0}
}

.hero__actions{
  display:none !important;
  margin:0 !important;
  min-height:0 !important;
}

/* ---- showcase-true-fullscreen-override ---- */

.showcase{
  padding-top:0 !important;
  background:var(--cream) !important;
}

.showcase__intro{
  min-height:100svh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 var(--page-gutter) !important;
}

.showcase__intro-inner{
  width:100% !important;
  max-width:1200px !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.showcase__intro .eyebrow,
.showcase__intro h2,
.showcase__cue{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.showcase__intro h2{
  max-width:1120px !important;
  margin-bottom:0 !important;
}

@media (max-width: 900px){
  .showcase__intro{
    min-height:100svh !important;
    padding:0 clamp(18px,5vw,24px) !important;
  }

  .showcase__intro h2{
    max-width:16ch !important;
  }
}

/* ---- v75-cotton-check-dusty-impressum ---- */

  .offer-check{
    background:#EDEAE1 !important; 
    padding:clamp(72px,8vw,104px) 0 !important;
  }

  .offer-check .wrap{
    max-width:1200px;
  }

  .offer-check__card{
    background:#013220 !important;
    color:#F7F3E8 !important;
    box-shadow:0 28px 70px -44px rgba(42,45,33,.35) !important;
  }

  .offer-check__content h2,
  .offer-check__lead,
  .offer-check__note{
    color:#F7F3E8 !important;
  }

  .offer-check__note em{
    color:#F7F3E8 !important;
  }

  .offer-check .btn--on-dark:hover,
  .offer-check .btn--on-dark:focus-visible{
    background:#ede7db !important;
    color:#013220 !important;
    border-color:#ede7db !important;
  }

  .impressum{
    background:#80866E !important; 
    color:#F7F3E8 !important;
    padding-top:80px !important;
    padding-bottom:80px !important;
  }

  .impressum .eyebrow,
  .impressum h2,
  .impressum h3,
  .impressum p,
  .impressum li,
  .impressum a,
  .impressum__note,
  .impressum__bottom{
    color:#F7F3E8 !important;
  }

  .impressum a{
    text-decoration-color:rgba(247,243,232,.55) !important;
  }

  .impressum__note,
  .impressum__bottom{
    opacity:.88;
  }

  .impressum__note,
  .impressum__bottom,
  .impressum__grid{
    border-color:rgba(247,243,232,.18) !important;
  }

  .impressum__note,
  .impressum__bottom{
    border-top:1px solid rgba(247,243,232,.18) !important;
  }

/* ---- production-final-state ---- */
/* Final brand and layout decisions — one source of truth. */

/* Compact header + hero */
.nav__inner{padding-top:5px!important;padding-bottom:5px!important;min-height:0!important}
.nav__logo img{width:clamp(175px,19vw,280px)!important}
.nav__links{font-size:.86rem!important}
.nav__cta{padding:10px 18px!important;font-size:.86rem!important}
.hero{padding-top:clamp(34px,5.5vh,62px)!important}
.hero__head{padding-top:0!important}
.hero__title-wrap{margin-top:0!important}
.hero__title em{color:#80866E!important}

/* Live Website-Check chat */
.process--live-chat{background:#013220!important;color:#EDEAE1!important;padding:54px 0 110px!important;min-height:auto!important;overflow:hidden}
.live-chat{width:100%!important;max-width:none!important;min-height:auto!important;margin:0!important;padding:0 var(--page-gutter)!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}
.live-chat__head{margin:0 0 40px!important;background:transparent!important;border:0!important;box-shadow:none!important}
.live-chat__head h2{margin:0!important;color:#EDEAE1!important}
.live-chat__conversation{width:100%!important;align-self:flex-start!important;padding-top:0!important;gap:18px!important;background:transparent!important;border:0!important;box-shadow:none!important}
.live-chat__message--studio .live-chat__bubble{background:#EDEAE1!important;color:#013220!important;box-shadow:0 16px 36px -24px rgba(0,0,0,.55)!important}
.live-chat__message--studio .live-chat__bubble em{color:#013220!important}
.live-chat__avatar{background:#EDEAE1!important;color:#013220!important;box-shadow:0 10px 26px -18px rgba(0,0,0,.55)!important}
.live-chat__message--customer .live-chat__bubble{background:#C1C3AC!important;color:#013220!important}
.live-chat__typing{display:none!important;margin:0!important}
.live-chat__typing.is-visible{display:flex!important}
.live-chat__typing--studio{background:#EDEAE1!important}
.live-chat__typing--studio span,.live-chat__typing--customer span{background:#013220!important}
.live-chat__typing--customer{background:#C1C3AC!important}
.live-chat__cta{margin-top:28px!important}
.live-chat__cta-button{background:#C1C3AC!important;color:#013220!important;border-color:#C1C3AC!important}
.live-chat__cta-button:hover,.live-chat__cta-button:focus-visible{background:#EDEAE1!important;color:#013220!important;border-color:#EDEAE1!important}

/* Loader skip control */

/* Editorial quote */
.showcase{padding-bottom:0!important;margin-bottom:0!important}

/* Website packages */
.pricing{background:var(--evergreen)!important;margin-top:0!important;padding-block:88px 104px!important}
.pricing .section-head.pricing__head{margin-bottom:30px!important}
.pricing .pricing__head h2,.pricing .pricing__subtitle,.pricing .pricing__foot{color:var(--cotton)!important}
.pricing .included,.pricing .pkg{background:var(--cotton)!important;border-color:rgba(128,134,110,.18)!important}
.pricing .included__label,.pricing .pkg__name,.pricing .pkg__headline,.pricing .pkg__price,.pricing .pkg__price span,.pricing .pkg__value strong{color:var(--evergreen)!important}
.pricing .included__item,.pricing .pkg__features li,.pricing .pkg__desc,.pricing .pkg__desc--after,.pricing .pkg__value p{color:var(--dusty-olive)!important}
.pricing .included__item::before,.pricing .pkg__features li::before{color:var(--evergreen)!important}
.pricing .pkg--featured{border:2px solid rgba(1,50,32,.48)!important;box-shadow:0 26px 60px rgba(0,0,0,.16)!important}
.pricing .pkg .btn{background:var(--evergreen)!important;color:var(--cotton)!important;border-color:var(--evergreen)!important}
.pricing .pkg .btn:hover{filter:brightness(1.04)}

/* Care / Growth */
.care-card:not(.care-card--growth) .btn{background:#C1C3AC!important;border-color:#C1C3AC!important;color:#013220!important}
.care-card:not(.care-card--growth) .btn:hover,.care-card:not(.care-card--growth) .btn:focus-visible{background:#B5B89F!important;border-color:#B5B89F!important;color:#013220!important}
.care-plans__head h2 em{color:#EDEAE1!important}

@media(max-width:900px){
  .pricing{padding-block:72px 88px!important}
}
@media(max-width:760px){
  .nav__inner{padding-top:5px!important;padding-bottom:5px!important}
  .nav__logo img{width:min(195px,52vw)!important}
  .nav__cta{padding:9px 12px!important;font-size:.78rem!important;white-space:normal!important;text-align:center!important;line-height:1.2!important;flex-shrink:1!important}
  .hero{padding-top:34px!important}
  .process--live-chat{padding-top:42px!important;padding-bottom:84px!important}
  .live-chat{padding-inline:clamp(16px,4vw,22px)!important}
  .live-chat__head{margin-bottom:28px!important}
  .live-chat__conversation{gap:14px!important}
  .live-chat__cta{margin-top:22px!important}
}
.hero-gallery__dots button.is-active{
  background:var(--emerald);
  opacity:1;
  transform:scale(1.35);
}

/* ---- webmaestro-loader-mark-styles ---- */
/* WM mark + progress ring loader. Sequence: ring fills (CSS animation, class-
   triggered) -> mark shatters into a 3x3 tile grid and falls (WAAPI, per-
   shard cascade driven from app.js) -> loader hands off to the
   page via .is-complete (see webmaestro-loader-styles earlier in this file).
   Reduced motion drops the ring fill and shatter entirely; see below. */

.wm-loader__mark{
  width:min(148px, 34vw);
  height:min(148px, 34vw);
  overflow:visible;
}

.wm-loader__ring-track,
.wm-loader__ring-full,
.wm-loader__ring-progress{
  fill:none;
  stroke-width:3;
  transform-origin:100px 100px;
}
.wm-loader__ring-track{
  stroke:var(--jade);
  opacity:.55;
}
.wm-loader__ring-full{
  stroke:var(--evergreen);
  stroke-linecap:round;
}
.wm-loader__ring-progress{
  stroke:var(--evergreen);
  stroke-linecap:round;
  stroke-dasharray:540.35; /* 2 * PI * 86, rounded */
  stroke-dashoffset:540.35;
  transform:rotate(-90deg);
}
.wm-loader.is-progressing .wm-loader__ring-progress{
  animation:wmRingFill .75s linear forwards;
}

.wm-loader__glyph{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:500;
  font-size:58px;
  fill:var(--evergreen);
  text-anchor:middle;
  dominant-baseline:central;
}

.wm-loader__shard{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
.wm-loader.is-shattering [data-wm-loader-live]{
  opacity:0;
  transition:opacity 0s;
}
.wm-loader.is-shattering .wm-loader__shard{
  opacity:1;
}

@keyframes wmRingFill{
  to{stroke-dashoffset:0;}
}

@media (prefers-reduced-motion:reduce){
  .wm-loader__ring-progress{
    animation:none !important;
    stroke-dashoffset:0;
  }
}
.simple-showcase__dots button.is-active{
  background:none !important;
}
.simple-showcase__dots button.is-active::before{
  transform:scaleX(3);
  background:var(--evergreen);
}
/* The cotton-evergreen palette block paints these buttons directly with
   !important (including via :not(.is-active), which outranks a plain
   selector). The colour now belongs to ::before, so both states of the
   button itself have to be cleared at matching specificity. */
.simple-showcase__dots button:not(.is-active){
  background:none !important;
}

/* ---- guide-orb-journey ---- */
/* 2026-09-03 — The scroll-guided orb: it drops into the hero, bounces on the
   "Pakete ansehen" CTA, pinballs down the Website-Check bubbles, bounces on
   that section's CTA, then reaches "eigene Welt." and stretches into its underline. Motion lives in assets/app.js (the [data-orb] IIFE); this
   block owns the appearance, the CTA's new in-hero role, and the impact
   highlight. Curves are shared tokens so later work extends them rather than
   inventing new ones. */

:root{
  /* Strong UI curves — the built-in keywords are too weak to read. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  /* Gravity. Only ever used for something physically falling — never for UI
     entering the screen, where ease-in delays the moment being watched. */
  --ease-gravity:cubic-bezier(.55,.055,.675,.19);

  --orb-size:26px;
}

/* ---------- "Pakete ansehen": from corner pill to hero CTA ---------- */
/* It used to float fixed in the bottom-right corner. It is now the hero's
   primary action — centred, larger, bolder — and doubles as the surface the
   orb lands and bounces on, which a viewport-pinned element could not be
   (there has to be room below it to fall into). */

.hero__cta-row{
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
  margin-top:clamp(10px,2vw,26px);
}

.sticky-packages-cta{
  position:relative;
  right:auto;
  bottom:auto;
  z-index:auto;
  min-height:clamp(66px,6.2vw,80px);
  padding:0 clamp(36px,4.4vw,60px);
  font-size:clamp(1.08rem,1.45vw,1.32rem);
  font-weight:700;
  letter-spacing:.005em;
  background:var(--evergreen);
  border-color:var(--evergreen);
  color:var(--cotton);
  box-shadow:0 18px 38px -18px rgba(1,50,32,.55);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transform-origin:50% 50%;
  will-change:transform;
  transition:background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sticky-packages-cta span{
  font-size:1.05em;
  transform:translateY(1px);
}
/* Hover changes depth and colour rather than transform: the CTA pulse owns
   the transform channel, and two animations fighting over it would jitter. */
@media (hover:hover) and (pointer:fine){
  .sticky-packages-cta:hover{
    transform:none;
    background:var(--emerald-dark);
    border-color:var(--emerald-dark);
    box-shadow:0 24px 46px -18px rgba(1,50,32,.62);
  }
}
/* The old fixed-position IIFE that set this is gone; neutralised so the
   !important rule left behind in sticky-packages-cta-styles can never
   out-rank the inline tilt. */
.sticky-packages-cta.is-hidden{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:none;
}

/* ---------- Impact highlight ---------- */
/* Snaps on at the moment of contact, then fades out while expanding — an
   impact pulse, not decoration. Transitions rather than keyframes: strikes
   land in quick succession and must retarget from wherever the last one got
   to instead of restarting. */

.sticky-packages-cta,
.live-chat__cta-button,
.live-chat__bubble{
  position:relative;
}
.sticky-packages-cta::after,
.live-chat__cta-button::after,
.live-chat__bubble::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  border:2px solid currentColor;
  opacity:0;
  transform:scale(1.09);
  pointer-events:none;
  transition:opacity .38s var(--ease-out), transform .38s var(--ease-out);
}
.sticky-packages-cta.is-cta-ring::after,
.live-chat__cta-button.is-cta-ring::after,
.live-chat__bubble.is-cta-ring::after{
  opacity:1;
  transform:scale(1);
  transition-duration:70ms,70ms;
}
.sticky-packages-cta::after{ border-color:var(--evergreen); inset:-6px; }
.live-chat__cta-button::after{ border-color:var(--cotton); }
.live-chat__bubble::after{ border-width:1.5px; }
.live-chat__bubble.is-cta-ring::after{ opacity:.55; }

/* The orb becomes the full stop, so the real one steps aside as it lands. */
.showcase__dot{
  opacity:calc(1 - var(--orb-dot-fade,0));
}

/* ---------- Small screens ---------- */
@media (max-width:820px){
  :root{ --orb-size:18px; }
  .hero__cta-row{ margin-top:clamp(14px,4vw,24px); }
  .sticky-packages-cta{
    min-height:56px;
    max-width:min(90vw,340px);
    padding:0 24px;
    font-size:1rem;
  }
}

/* ---------- Reduced motion ---------- */
/* The orb is motion end to end — a stationary dot parked on a button would
   communicate nothing. It is not rendered at all; the script never mounts it,
   and this is the belt to that braces. */
@media (prefers-reduced-motion:reduce){
  .showcase__dot{ opacity:1 !important; }
  .sticky-packages-cta{ transform:none !important; }
}

/* ---------- Short viewports ---------- */
/* The hero's closing CTA is the orb's landing pad, so it has to be on
   screen when the ball arrives. On a 720p laptop or a phone in landscape
   the stacked headline and typed lines push it under the fold — the type
   tightens rather than the CTA moving somewhere else. */
@media (max-height:820px){
  .hero{
    padding-top:clamp(18px,2.4vh,34px) !important;
    padding-bottom:clamp(22px,3vw,40px) !important;
  }
  .hero__title{ font-size:clamp(2.2rem,4.1vw,3.9rem) !important; }
  .hero__cta-row{ margin-top:clamp(6px,1.2vw,14px); }
  .sticky-packages-cta{ min-height:clamp(58px,5.2vw,68px); }
}

/* ---- hero-drift-and-cta-pulse ---- */
/* 2026-09-06 — The hero's single laptop is replaced by a slow field of
   portfolio cards drifting across the whole section on one diagonal,
   fading in top/middle and out toward the bottom-right. The guide orb is
   switched off (see ORB_ENABLED in app.js), so the CTA highlight it used
   to trigger now runs on its own timer instead. */

.hero{
  position:relative;
  overflow:hidden;
}

/* One column now that the laptop column is gone: the copy sits on the
   left, the cards have the whole section behind it. */
.hero__inner{
  position:relative;
  z-index:2;
  grid-template-columns:1fr !important;
  grid-template-areas:"head" "tail" !important;
}

.hero-drift{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
/* The headline shares this space, so the cards are washed out under the
   left-hand column rather than competing with the type. */
.hero-drift::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(96deg,
    var(--cotton) 0%,
    rgba(237,234,225,.78) 13%,
    rgba(237,234,225,.28) 27%,
    rgba(237,234,225,0) 40%);
  pointer-events:none;
}

.hero-drift__card{
  position:absolute;
  left:0;
  top:0;
  /* Two ceilings. --w keeps the card proportional to the viewport; the
     33cqh term keeps it proportional to the column it travels down, so a
     short hero (a laptop screen, a browser with lots of chrome) scales the
     cards instead of letting them collide on the arc. */
  width:min(var(--w),64cqh);
  margin:0;
  border-radius:13px;
  overflow:hidden;
  background:var(--cotton);
  /* A hairline so a pale hero (Smile) still reads as a card, not a gap. */
  outline:1px solid rgba(1,50,32,.17);
  outline-offset:-1px;
  box-shadow:
    0 34px 64px -34px rgba(1,50,32,.42),
    0 2px 10px rgba(1,50,32,.07);
  opacity:0;
  will-change:transform,opacity;
  /* Constant, predetermined motion: a CSS animation so it keeps its
     rhythm off the main thread while the page is still loading, and
     `linear` because a drift that eases would read as a loop. */
  animation:wmHeroDrift var(--dur,34s) linear infinite;
  animation-delay:var(--delay,0s);
}
.hero-drift__card img{
  display:block;
  width:100%;
  height:auto;
  /* Reserve the box before the bitmap decodes: the cards are absolutely
     positioned and moving, so a late-arriving intrinsic size would collapse
     the card to zero height mid-arc. */
  aspect-ratio:1000 / 633;
}

@keyframes wmHeroDrift{
  /* Generated from a constant-speed traversal of the curve, not hand-placed
     waypoints, so the card never stalls or lurches between keyframes.

     Positions are the card CENTRE - the '- 50%' terms are percentages of the
     card's own box - in cqw/cqh of .hero-drift, so the arc keeps its shape
     whatever size the card resolves to.

     Shape: the heading turns from 5deg (near straight down) to 90deg over a
     fixed 757px, sized so the descent bottoms out at 77cqh whatever the
     speed; everything past that is a straight run to the right, ending well
     off the frame. That long tail is what separates the cards - 337px of path
     between one card and the next, against 235px before.

     Scale eases INTO the peak instead of arriving at it (.30 .40 .52 .66 .80
     .98 1.10 1.15) and leaves it the same way. It also spends less time large:
     scale is at or above 1.0 for 14.5% of the loop, under the 16.67% spacing
     between cards, so only ever ONE card is at full size at a time.

     Speed is constant to 87%, then ramps (smoothstep over the first 45% of the
     tail) to 1.12x - the card that has been replaced pulls away.

     z-index falls with phase, so the newest card always paints on top of the
     older ones it crosses.

     100% is the death point, not a return to 0%: the loop restarts by
     teleporting an invisible card back to the birth point. */
  0% { transform:translate3d(calc(19.3cqw - 50%),calc(16.8cqh - 50%),0) scale(calc(var(--s,1) * .3)); opacity:0; z-index:200; }
  48% { transform:translate3d(calc(19.3cqw - 50%),calc(16.8cqh - 50%),0) scale(calc(var(--s,1) * .3)); opacity:0; z-index:200; }
  52% { transform:translate3d(calc(21.2cqw - 50%),calc(27.7cqh - 50%),0) scale(calc(var(--s,1) * .4)); opacity:.28; z-index:181; }
  56% { transform:translate3d(calc(24.8cqw - 50%),calc(37.9cqh - 50%),0) scale(calc(var(--s,1) * .52)); opacity:.55; z-index:174; }
  60% { transform:translate3d(calc(29.9cqw - 50%),calc(47.3cqh - 50%),0) scale(calc(var(--s,1) * .66)); opacity:.78; z-index:168; }
  63% { transform:translate3d(calc(34.4cqw - 50%),calc(53.6cqh - 50%),0) scale(calc(var(--s,1) * .8)); opacity:.92; z-index:163; }
  66% { transform:translate3d(calc(39.6cqw - 50%),calc(59.3cqh - 50%),0) scale(calc(var(--s,1) * .98)); opacity:1; z-index:158; }
  68% { transform:translate3d(calc(43.3cqw - 50%),calc(62.6cqh - 50%),0) scale(calc(var(--s,1) * 1.1)); opacity:1; z-index:155; }
  70% { transform:translate3d(calc(47.2cqw - 50%),calc(65.7cqh - 50%),0) scale(calc(var(--s,1) * 1.15)); opacity:1; z-index:152; }
  74% { transform:translate3d(calc(55.5cqw - 50%),calc(70.7cqh - 50%),0) scale(calc(var(--s,1) * 1.13)); opacity:1; z-index:146; }
  78% { transform:translate3d(calc(64.3cqw - 50%),calc(74.2cqh - 50%),0) scale(calc(var(--s,1) * 1.06)); opacity:1; z-index:139; }
  81% { transform:translate3d(calc(71.1cqw - 50%),calc(75.9cqh - 50%),0) scale(calc(var(--s,1) * .97)); opacity:1; z-index:134; }
  84% { transform:translate3d(calc(78.1cqw - 50%),calc(76.7cqh - 50%),0) scale(calc(var(--s,1) * .86)); opacity:1; z-index:130; }
  87% { transform:translate3d(calc(85.1cqw - 50%),calc(76.8cqh - 50%),0) scale(calc(var(--s,1) * .74)); opacity:1; z-index:125; }
  91% { transform:translate3d(calc(94.7cqw - 50%),calc(76.8cqh - 50%),0) scale(calc(var(--s,1) * .62)); opacity:.58; z-index:118; }
  95% { transform:translate3d(calc(105.1cqw - 50%),calc(76.8cqh - 50%),0) scale(calc(var(--s,1) * .5)); opacity:.26; z-index:112; }
  98% { transform:translate3d(calc(112.9cqw - 50%),calc(76.8cqh - 50%),0) scale(calc(var(--s,1) * .42)); opacity:.07; z-index:107; }
  100% { transform:translate3d(calc(118.2cqw - 50%),calc(76.8cqh - 50%),0) scale(calc(var(--s,1) * .36)); opacity:0; z-index:104; }
}

/* ---------- The Website-Check CTA moves to the middle ---------- */
.live-chat__cta{
  justify-content:center !important;
  padding-left:0 !important;
}

/* ---------- CTA attention pulse ---------- */
/* The ring is the same ::after the orb used to strike; it is now driven on
   a timer by the [data-cta-pulse] block in app.js. Snap on, bloom outward
   as it fades — an impact pulse, with a short wiggle underneath it. */
/* A longer, decaying wobble. The 300ms ceiling in the motion guidance is for
   UI a person is waiting on - a dropdown, a modal. This is an occasional
   attention cue on a marketing page, fired roughly every six seconds and only
   while the button is on screen, so a slower settle reads as poise rather than
   as lag. Amplitude still decays to nothing. */
@keyframes wmCtaWiggle{
  0%   { transform:none; }
  10%  { transform:rotate(-1.9deg) scale(1.028); }
  26%  { transform:rotate(1.5deg) scale(1.020); }
  42%  { transform:rotate(-1.05deg) scale(1.013); }
  58%  { transform:rotate(.7deg) scale(1.008); }
  74%  { transform:rotate(-.4deg) scale(1.004); }
  88%  { transform:rotate(.15deg); }
  100% { transform:none; }
}
.is-cta-pulse{
  animation:wmCtaWiggle 1.6s cubic-bezier(.23,1,.32,1);
}

@media (prefers-reduced-motion:reduce){
  /* Fewer and gentler, not none: the cards hold still mid-path and the
     CTA keeps only the ring, which carries the meaning without movement. */
  .hero-drift__card{
    animation:none !important;
    opacity:.92;
    transform:translate3d(calc(47.2cqw - 50%),calc(65.7cqh - 50%),0) scale(calc(var(--s,1) * 1.15));
  }
  .is-cta-pulse{ animation:none !important; }
}

/* ---- hero-quote-right-drift-underline ---- */
/* 2026-09-06 — The drift is confined to the right of the hero so it can
   never sit under the copy; the closing quote moves up into the hero in
   place of the three typed words; "eigene Welt" draws its own underline
   as the heading scrolls into view. */

/* ---------- The quote, now the hero's second voice ---------- */
.hero__quote{
  margin:0 0 clamp(18px,2.4vw,30px);
  font-family:var(--ff-display);
  font-size:clamp(1.35rem,2.5vw,2.35rem);
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.01em;
  color:var(--dusty-olive);
}
.hero__quote-line{ display:block; }
.hero__quote-line em{
  font-style:italic;
  color:var(--evergreen);
}

/* ---------- The copy column keeps its own half ---------- */
.hero__head,
.hero__tail,
.hero__cta-row{
  /* 44% here against the drift's 52% leaves a real gutter between the two,
     rather than the columns meeting exactly on the 50% line. */
  max-width:min(44%,620px);
}
.hero__cta-row{
  justify-content:center;
  margin-inline:0;
}

/* ---------- The cards live on the right only ---------- */
.hero-drift{
  inset:0 0 0 auto;
  /* The copy's widest glyph run reaches 38% of the viewport, so the card
     column starts at 39% - the arc gains the whole channel beside the text
     without ever crossing it. */
  width:min(61%,1150px);
  /* The arc above is measured in cqw/cqh, i.e. against this box rather than
     the viewport, so it keeps its proportions whatever height the hero takes. */
  container-type:size;
  /* A soft left edge instead of a hard clip where the box begins. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 100%);
}
/* The scrim existed only to protect copy the cards used to cross. */
.hero-drift::after{ display:none; }

/* ---------- "eigene Welt" underlines itself on arrival ---------- */
/* Drawn as a background rather than a pseudo-element so it follows the
   phrase correctly when the heading wraps to a second line. */
.showcase__world-phrase{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% .055em;
  transition:background-size 1.05s cubic-bezier(.23,1,.32,1) .35s;
}
.showcase__world-phrase.is-underlined{
  background-size:100% .055em;
}

.showcase__intro-cta{
  margin-top:clamp(26px,3.4vw,44px);
}

/* At 1024 and below the hero collapses to a single column and the copy
   takes the full width (see the max-width:760px !important rule in the
   max-width:1024px block), so there is no channel left for the cards to
   travel down - they would cross the headline. The band stops there. */
@media (max-width:1024px){
  .hero-drift{ display:none; }
}

@media (max-width:900px){
  .hero__head,
  .hero__tail,
  .hero__cta-row{ max-width:100%; }
  .hero__quote{ font-size:clamp(1.25rem,5.2vw,1.8rem); }
}

@media (prefers-reduced-motion:reduce){
  .showcase__world-phrase,
  .showcase__world-phrase.is-underlined{
    background-size:100% .055em;
    transition:none;
  }
}

/* ---- cta-scale-up ---- */
/* 2026-09-06 — The hero CTA was enlarged on its own; this brings the rest of
   the page's calls to action up to match, so the hero one no longer looks
   like a different species. !important is needed on a few of these because
   the production-final block sizes them that way. */

.nav__cta{
  padding:13px 24px !important;
  font-size:.95rem !important;
}

.showcase__intro-cta{
  min-height:68px;
  padding:0 clamp(34px,3.8vw,52px);
  font-size:clamp(1.02rem,1.25vw,1.16rem);
}

.live-chat__cta-button{
  min-height:68px !important;
  padding-inline:clamp(30px,3.6vw,48px) !important;
  font-size:clamp(1.02rem,1.25vw,1.16rem) !important;
}

/* Package and care-plan buttons */
.pricing .pkg .btn--block,
.care-card .btn--block{
  min-height:62px;
  font-size:1.04rem;
}

.contact-form__submit{
  min-height:64px !important;
  padding-inline:clamp(30px,3.4vw,46px) !important;
  font-size:1.06rem !important;
}

@media (max-width:760px){
  /* Keep the bigger buttons from crowding a phone's nav bar. */
  .nav__cta{
    padding:10px 14px !important;
    font-size:.82rem !important;
  }
  .showcase__intro-cta,
  .live-chat__cta-button{
    min-height:58px !important;
    padding-inline:22px !important;
    font-size:.98rem !important;
  }
  .pricing .pkg .btn--block,
  .care-card .btn--block,
  .contact-form__submit{
    min-height:56px !important;
    font-size:1rem !important;
  }
}

/* ---- mobile-hero-strip ---- */
/* 2026-09-07 — The hero drift needs a column beside the copy, which does not
   exist at 1024px and under (the hero goes single-column there and the text
   takes the full width). Phones therefore saw no portfolio at all. This runs
   the same six sites past as a slideshow directly under the hero instead,
   on the same principle: each card surfaces from inside the page, crosses
   left to right at full size, and sinks back in. Desktop is untouched — the
   section is display:none above 1024px. */

.hero-strip{ display:none; }

@media (max-width:1024px){
  .hero-strip{
    display:block;
    position:relative;
    /* Tall enough for a card at full size plus a little air for its shadow. */
    height:clamp(178px,48vw,340px);
    margin:0;
    overflow:hidden;
    /* Same trick as the desktop drift: the path is written in container units
       so it holds its proportions at any phone width. */
    container-type:size;
    pointer-events:none;
  }

  .hero-strip__card{
    position:absolute;
    left:0;
    top:50%;
    width:68cqw;
    margin:0;
    /* Matches the desktop drift card, so the two share one shape. */
    border-radius:13px;
    overflow:hidden;
    background:var(--cotton);
    outline:1px solid rgba(1,50,32,.17);
    outline-offset:-1px;
    box-shadow:
      0 22px 44px -26px rgba(1,50,32,.42),
      0 2px 8px rgba(1,50,32,.07);
    opacity:0;
    will-change:transform,opacity;
    animation:wmHeroStrip 27s linear infinite;
    animation-delay:var(--delay,0s);
  }
  .hero-strip__card img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1000 / 633;
  }
}

@keyframes wmHeroStrip{
  /* X is the card's centre in cqw; the "- 50%" is half the card's own width
     and the "-50%" on Y centres it on the strip. X advances 5.82cqw per 1%
     of the loop throughout, so the crossing is at a constant pace.

     A card waits invisible and small off to the left for the first 78% of the
     loop, then crosses in 22% — with six cards 16.67% apart that leaves about
     one and a third on screen at a time, which is a slideshow rather than a
     crowd. Scale eases into 1.0 and back out (.50 .64 .80 .94 1.0 .94 .80
     .66 .50) so it grows and shrinks rather than snapping.

     z-index falls with phase, so the arriving card passes in front. */
  0%   { transform:translate3d(calc(-14cqw - 50%),-50%,0) scale(calc(var(--s,1) * .5)); opacity:0; z-index:200; }
  78%  { transform:translate3d(calc(-14cqw - 50%),-50%,0) scale(calc(var(--s,1) * .5)); opacity:0; z-index:200; }
  81%  { transform:translate3d(calc(3.5cqw - 50%),-50%,0) scale(calc(var(--s,1) * .64)); opacity:.34; z-index:186; }
  84%  { transform:translate3d(calc(20.9cqw - 50%),-50%,0) scale(calc(var(--s,1) * .8)); opacity:.8; z-index:178; }
  87%  { transform:translate3d(calc(38.4cqw - 50%),-50%,0) scale(calc(var(--s,1) * .94)); opacity:1; z-index:170; }
  90%  { transform:translate3d(calc(55.8cqw - 50%),-50%,0) scale(calc(var(--s,1) * 1)); opacity:1; z-index:162; }
  93%  { transform:translate3d(calc(73.3cqw - 50%),-50%,0) scale(calc(var(--s,1) * .94)); opacity:1; z-index:154; }
  96%  { transform:translate3d(calc(90.7cqw - 50%),-50%,0) scale(calc(var(--s,1) * .8)); opacity:.78; z-index:146; }
  98%  { transform:translate3d(calc(102.4cqw - 50%),-50%,0) scale(calc(var(--s,1) * .66)); opacity:.34; z-index:141; }
  100% { transform:translate3d(calc(114cqw - 50%),-50%,0) scale(calc(var(--s,1) * .5)); opacity:0; z-index:136; }
}

@media (prefers-reduced-motion:reduce){
  /* One card, held still, centred — the portfolio is still shown, it just
     does not travel. */
  .hero-strip__card{
    animation:none !important;
    opacity:0;
    transform:translate3d(calc(50cqw - 50%),-50%,0) scale(var(--s,1));
  }
  .hero-strip__card:first-child{ opacity:1; }
}

/* ---- final-contact-form-styles ---- */
/* Moved out of index.html on 2026-09-07: the enquiry form now lives on
   anfrage.html, so these rules belong in the shared stylesheet rather
   than inline on the homepage. */
#website-check{
  scroll-margin-top:72px;
}
#website-check .offer-check__card{
  max-width:1080px !important;
  padding:clamp(36px,5vw,72px) !important;
}
#website-check .offer-check__content{
  width:100%;
  max-width:860px !important;
  margin:0 auto;
}
#website-check .eyebrow{
  color:#C1C3AC !important;
  margin-bottom:16px;
}
#website-check h2{
  max-width:15ch !important;
  margin-bottom:12px !important;
  color:#EDEAE1 !important;
}
#website-check .offer-check__lead{
  margin:0 0 clamp(28px,3.5vw,42px) !important;
  color:rgba(237,234,225,.72) !important;
  font-size:clamp(.98rem,1.15vw,1.08rem) !important;
}

.contact-form{
  width:100%;
}
.contact-form__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.contact-form__field{
  display:grid;
  gap:8px;
}
.contact-form__field > span{
  color:#EDEAE1;
  font:500 .72rem var(--ff-body);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.contact-form__field small{
  /* .68rem landed at 10.9px, under the 11px floor for text that carries
     meaning - this word is what tells someone a field can be skipped.
     It stays secondary through weight and opacity instead of size. */
  font:400 .74rem var(--ff-body);
  letter-spacing:0;
  text-transform:none;
  opacity:.6;
}
.contact-form__field input{
  width:100%;
  min-height:56px;
  padding:0 17px;
  border:1px solid rgba(237,234,225,.20);
  border-radius:10px;
  outline:0;
  background:rgba(237,234,225,.07);
  color:#EDEAE1;
  font:500 .96rem var(--ff-body);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.contact-form__field input::placeholder{
  color:rgba(237,234,225,.42);
}
.contact-form__field input:hover{
  border-color:rgba(193,195,172,.52);
  background:rgba(237,234,225,.09);
}
.contact-form__field input:focus{
  border-color:#C1C3AC;
  background:rgba(237,234,225,.10);
  /* An outline rather than a box-shadow: same ring, but it survives
     Windows High Contrast mode, where box-shadows are dropped entirely.
     Matches the select on the enquiry page. */
  outline:2px solid rgba(193,195,172,.55);
  outline-offset:2px;
}
.contact-form__field input:user-invalid{
  border-color:#E3A4A4;
}
#website-check .contact-form__submit{
  width:100%;
  min-height:58px;
  margin-top:22px;
  border-radius:10px !important;
  background:#C1C3AC !important;
  border-color:#C1C3AC !important;
  color:#013220 !important;
  font-weight:700;
}
#website-check .contact-form__submit:hover,
#website-check .contact-form__submit:focus-visible{
  background:#EDEAE1 !important;
  border-color:#EDEAE1 !important;
  color:#013220 !important;
}
#website-check .contact-form__submit[disabled]{
  opacity:.65;
  cursor:wait;
  transform:none !important;
}
.contact-form__privacy,
.contact-form__status,
#website-check .offer-check__note{
  font-size:.78rem !important;
  line-height:1.55;
}
.contact-form__privacy{
  margin-top:12px;
  color:rgba(237,234,225,.54) !important;
}
.contact-form__status{
  min-height:1.4em;
  margin-top:10px;
  color:#C1C3AC !important;
}
#website-check .offer-check__note{
  margin-top:8px;
  color:rgba(237,234,225,.62) !important;
}
#website-check .offer-check__note a{
  color:#EDEAE1 !important;
  text-underline-offset:3px;
}

@media(max-width:700px){
  #website-check .offer-check__card{
    padding:30px 22px !important;
  }
  .contact-form__grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .contact-form__field input{
    min-height:54px;
  }
}

/* ---- contact-textarea-refinement ---- */
/* Moved out of index.html on 2026-09-07: the enquiry form now lives on
   anfrage.html, so these rules belong in the shared stylesheet rather
   than inline on the homepage. */
#website-check h2{
  margin-bottom:clamp(28px,3.5vw,42px) !important;
}
.contact-form__field--wide{
  grid-column:1 / -1;
}
.contact-form__field textarea{
  width:100%;
  min-height:150px;
  resize:vertical;
  padding:16px 17px;
  border:1px solid rgba(237,234,225,.20);
  border-radius:10px;
  outline:0;
  background:rgba(237,234,225,.07);
  color:#EDEAE1;
  font:500 .96rem/1.55 var(--ff-body);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.contact-form__field textarea::placeholder{
  color:rgba(237,234,225,.42);
}
.contact-form__field textarea:hover{
  border-color:rgba(193,195,172,.52);
  background:rgba(237,234,225,.09);
}
.contact-form__field textarea:focus{
  border-color:#C1C3AC;
  background:rgba(237,234,225,.10);
  /* An outline rather than a box-shadow: same ring, but it survives
     Windows High Contrast mode, where box-shadows are dropped entirely.
     Matches the select on the enquiry page. */
  outline:2px solid rgba(193,195,172,.55);
  outline-offset:2px;
}
@media(max-width:700px){
  .contact-form__field textarea{
    min-height:130px;
  }
}

/* ---- contact-heading-one-line ---- */
/* Moved out of index.html on 2026-09-07: the enquiry form now lives on
   anfrage.html, so these rules belong in the shared stylesheet rather
   than inline on the homepage. */
#website-check h2{
  max-width:none !important;
  width:100% !important;
  white-space:nowrap !important;
  text-wrap:nowrap !important;
}

@media(max-width:760px){
  #website-check h2{
    white-space:normal !important;
    text-wrap:balance !important;
  }
}

/* ---- form-validation-and-footer ---- */
/* 2026-09-08 — The form previously had no submit handler at all: it did a
   native POST to /api/contact, which nothing answers on a static host, so
   every enquiry was lost to a 404. assets/app.js now validates in place and
   delivers the message; these are the states it needs to show. */

.contact-form__field.is-invalid input,
.contact-form__field.is-invalid select,
.contact-form__field.is-invalid textarea{
  border-color:#E8A88F;
  background:rgba(232,168,143,.09);
}
.contact-form__field.is-invalid > span{
  color:#E8A88F;
}

/* The status line already carries !important from an earlier block, so the
   states have to match it to win. 7:1 against the evergreen card. */
.contact-form__status[data-state="error"]{ color:#E8A88F !important; }
.contact-form__status[data-state="ok"]{ color:#C1C3AC !important; }
.contact-form__status[data-state="info"]{ color:rgba(237,234,225,.78) !important; }

/* The enquiry page had no route to the Impressum; every page needs one. */
.anfrage-foot{
  padding:0 0 clamp(28px,4vw,48px);
  color:#585B54;
  font-size:.86rem;
}
.anfrage-foot p{ margin:0; }
.anfrage-foot a{
  color:#585B54;
  text-decoration:underline;
  text-underline-offset:3px;
}
.anfrage-foot a:hover,
.anfrage-foot a:focus-visible{ color:var(--evergreen); }

/* ---- form-delivery-states ---- */
/* 2026-09-18 — The enquiry is sent in the background now (the form
   handler in app.js). These are the pieces that needs: the confirmation
   the card turns into, the choice offered when sending fails, the spam
   trap, and two browser defaults that broke the dark card. */

/* ---------- the confirmation ---------- */
.anfrage-sent{
  display:grid;
  justify-items:start;
}
.anfrage-sent[hidden]{ display:none; }
/* It takes focus only so a screen reader announces it; it is not a
   control, so it shows no ring. */
.anfrage-sent:focus{ outline:none; }

.anfrage-sent__mark{
  width:52px;
  height:52px;
  margin-bottom:clamp(20px,2.4vw,28px);
  fill:none;
  stroke:#C1C3AC;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* The shared rule caps section headings at 15ch, which broke this longer
   sentence into four short lines. */
#website-check .anfrage-sent h2{
  max-width:19ch !important;
  margin-bottom:16px !important;
  /* The form heading is held on one line at wider sizes; this one is a
     sentence and has to wrap. */
  white-space:normal !important;
  text-wrap:balance;
}
/* An id rule, because .offer-check__card p sets every paragraph on the
   card to full cotton with !important. */
#website-check .anfrage-sent__lead{
  max-width:52ch;
  margin:0 0 10px;
  color:rgba(237,234,225,.78) !important;
  font-size:clamp(1rem,1.2vw,1.1rem);
  line-height:1.6;
}
#website-check .anfrage-sent__lead strong{
  color:#EDEAE1;
  font-weight:600;
  /* A long address must wrap rather than push the card sideways. */
  overflow-wrap:anywhere;
}
#website-check .anfrage-sent__more{
  margin:0 0 clamp(26px,3vw,34px);
  color:rgba(237,234,225,.66) !important;
  font-size:.92rem;
  line-height:1.55;
}
.anfrage-sent__more a{
  color:#EDEAE1;
  text-underline-offset:3px;
}
/* The same button as the submit it replaces, sized to its label. */
#website-check .anfrage-sent__home{
  min-height:54px;
  padding:0 28px;
  border-radius:10px !important;
  background:#C1C3AC !important;
  border-color:#C1C3AC !important;
  color:#013220 !important;
  font-weight:700;
}
#website-check .anfrage-sent__home:hover,
#website-check .anfrage-sent__home:focus-visible{
  background:#EDEAE1 !important;
  border-color:#EDEAE1 !important;
}
#website-check .anfrage-sent__home:focus-visible{
  outline:2px solid rgba(193,195,172,.55);
  outline-offset:2px;
}

/* The one moment on this page: the card settles into its new state and
   the mark draws itself - circle first, then the tick. It starts from the
   finished state, so anything that skips the animation still shows it. */
@media (prefers-reduced-motion: no-preference){
  .anfrage-sent:not([hidden]){
    animation:wmSentIn .42s cubic-bezier(.23,1,.32,1) both;
  }
  .anfrage-sent:not([hidden]) .anfrage-sent__mark circle,
  .anfrage-sent:not([hidden]) .anfrage-sent__mark path{
    stroke-dasharray:1;
    stroke-dashoffset:1;
  }
  .anfrage-sent:not([hidden]) .anfrage-sent__mark circle{
    animation:wmSentDraw .56s cubic-bezier(.65,0,.35,1) .08s forwards;
  }
  .anfrage-sent:not([hidden]) .anfrage-sent__mark path{
    animation:wmSentDraw .3s cubic-bezier(.23,1,.32,1) .52s forwards;
  }
}
@keyframes wmSentIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
@keyframes wmSentDraw{
  to{ stroke-dashoffset:0; }
}

/* ---------- when sending fails ---------- */
/* At .78rem an error was the smallest text on the card; the one message
   that says something went wrong should not be the easiest to miss. */
.contact-form__status[data-state="error"],
.contact-form__status[data-state="info"]{
  /* The note size already on this card, rather than one more step. */
  font-size:.92rem !important;
}
.contact-form__status-action{
  padding:0;
  border:0;
  background:none;
  color:#EDEAE1;
  font:inherit;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.contact-form__status-action:hover{ color:#C1C3AC; }
.contact-form__status-action:focus-visible{
  outline:2px solid rgba(193,195,172,.55);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- the spam trap ---------- */
/* Out of sight and out of the tab order, but still in the form, since a
   bot that finds display:none knows to skip the field. */
.contact-form__trap{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- browser defaults on the dark card ---------- */
/* Autofill painted the fields pale blue with dark text - the brightest
   thing on the card, and nothing to do with the design. The inset shadow
   is the only way over the browser's own background; its colour is the
   input's 7% cotton, flattened onto the evergreen card. */
.contact-form__field input:is(:-webkit-autofill, :autofill){
  -webkit-text-fill-color:#EDEAE1;
  caret-color:#EDEAE1;
  -webkit-box-shadow:0 0 0 100px #123F2E inset;
  box-shadow:0 0 0 100px #123F2E inset;
  filter:none;
}

/* ---- loader-glyph-font ---- */
/* 2026-09-18 — On a visit without the fonts cached (a first visit, a private
   window, a hard reload) the intro drew "WM" in Georgia and redrew it in
   Brygada a moment later: the mark visibly appeared twice. Body text should
   swap - showing words early is worth a reflow - but a logo must not. This
   face points at the same file (so it shares the preload and the cache) and
   blocks instead: the mark stays blank until its own font is there, then
   appears once. The ring around it draws from the first frame either way. */
@font-face{
  font-family:"Brygada 1918 Mark";
  src:url("fonts/brygada-1918-italic-400-700.woff2") format("woff2");
  font-style:italic;
  font-weight:400 700;
  font-display:block;
}
.wm-loader__glyph{
  font-family:"Brygada 1918 Mark", var(--ff-display);
}

/* ---- qa-pages ---- */
/* 2026-09-29 — The five question-and-answer pages (fragen.html and the four
   answers). A reading surface like the privacy policy, but one people are
   meant to want to read: one column on the cotton ground, the display serif
   for questions, and a single evergreen block at the end that asks for the
   enquiry. No new colours, sizes or spacing scales - everything here comes
   from the existing system. */

.qa{
  padding:clamp(24px,4vw,56px) 0 clamp(60px,8vw,104px);
  /* Evergreen at 84% rather than a grey: tinted from the ink, 7.6:1. */
  color:rgba(1,50,32,.84);
}
.qa .wrap{ max-width:820px; }

.qa__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:clamp(18px,2.4vw,28px);
  color:#585B54;
  font-size:.92rem;
  text-decoration:none;
  transition:color .18s ease;
}
.qa__back:hover,
.qa__back:focus-visible{ color:var(--evergreen); }

.qa h1{
  max-width:22ch;
  margin:0 0 14px;
  color:var(--evergreen);
  font-size:clamp(1.85rem,4.2vw,3.1rem);
  line-height:1.08;
  text-wrap:balance;
}
.qa__lead{
  max-width:58ch;
  margin:0 0 clamp(26px,3.6vw,38px);
  font-size:clamp(1.04rem,1.5vw,1.18rem);
  line-height:1.62;
}
.qa__lead strong{ color:var(--evergreen); font-weight:600; }

/* ---------- what is on this page ---------- */
.qa__toc{
  margin:0 0 clamp(30px,4.5vw,48px);
  padding:18px 0;
  border-top:1px solid rgba(128,134,110,.32);
  border-bottom:1px solid rgba(128,134,110,.32);
}
.qa__toc p{
  margin:0 0 12px;
  color:#585B54;
  font:500 .72rem/1 var(--ff-body);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.qa__toc ul{
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}
.qa__toc a{
  color:var(--evergreen);
  font-size:.98rem;
  text-decoration:none;
  border-bottom:1px solid rgba(1,50,32,.2);
  transition:border-color .18s ease;
}
.qa__toc a:hover,
.qa__toc a:focus-visible{ border-color:var(--evergreen); }

/* ---------- the answers ---------- */
.qa__item{ margin:0 0 clamp(32px,4.4vw,50px); scroll-margin-top:90px; }
.qa__item h2,
.qa__more h2,
.qa__sources h2{
  color:var(--evergreen);
  line-height:1.22;
  text-wrap:balance;
}
.qa__item h2{
  max-width:26ch;
  margin:0 0 12px;
  font-size:clamp(1.3rem,2.4vw,1.72rem);
}
.qa p,
.qa li{ max-width:62ch; line-height:1.7; }
.qa p{ margin:0 0 14px; }
.qa strong{ color:var(--evergreen); font-weight:600; }
.qa a{
  color:var(--evergreen);
  text-decoration:underline;
  text-underline-offset:3px;
}
.qa__list{
  display:grid;
  gap:12px;
  margin:0 0 16px;
  padding:0;
  list-style:none;
}
.qa__list li{
  position:relative;
  padding-left:21px;
}
.qa__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#80866E;
}
/* A point the reader should not skim past. A tint and a hairline, not a
   thick coloured bar. */
.qa__aside{
  max-width:none;
  margin:18px 0;
  padding:14px 18px;
  border:1px solid rgba(128,134,110,.3);
  border-radius:12px;
  background:rgba(128,134,110,.08);
}

/* ---------- the research checklist ---------- */
/* Three columns need room; on a phone the table scrolls inside itself
   rather than widening the page. */
.qa__scroll{ overflow-x:auto; margin:16px 0 18px; }
.qa__table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  font-size:.95rem;
}
.qa__table th,
.qa__table td{
  padding:11px 14px;
  border-bottom:1px solid rgba(128,134,110,.28);
  text-align:left;
  vertical-align:top;
  line-height:1.55;
}
.qa__table th{
  color:var(--evergreen);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.qa__table td:first-child{ color:var(--evergreen); font-weight:600; white-space:nowrap; }

/* ---------- the one ask ---------- */
.qa__cta{
  display:grid;
  justify-items:start;
  gap:clamp(16px,2vw,22px);
  margin:clamp(34px,5vw,56px) 0 clamp(30px,4vw,44px);
  padding:clamp(26px,4vw,40px);
  border-radius:18px;
  background:var(--evergreen);
}
.qa__cta p{
  max-width:52ch;
  margin:0;
  color:rgba(237,234,225,.84);
  font-size:clamp(1rem,1.3vw,1.1rem);
}
.qa__cta-button{
  min-height:54px;
  padding:0 26px;
  border-radius:10px;
  background:#C1C3AC;
  border-color:#C1C3AC;
  color:#013220;
  font-weight:700;
  text-decoration:none;
}
.qa__cta-button:hover,
.qa__cta-button:focus-visible{
  background:#EDEAE1;
  border-color:#EDEAE1;
  color:#013220;
}
.qa__cta-button:focus-visible{
  outline:2px solid rgba(237,234,225,.6);
  outline-offset:3px;
}

/* ---------- where to go next ---------- */
.qa__more h2,
.qa__sources h2{
  margin:0 0 16px;
  font-size:clamp(1.15rem,1.8vw,1.35rem);
}
.qa__more ul,
.qa__index{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}
.qa__more li,
.qa__index li{
  padding:16px 0;
  border-top:1px solid rgba(128,134,110,.28);
}
.qa__more li:last-child,
.qa__index li:last-child{ border-bottom:1px solid rgba(128,134,110,.28); }
.qa__more a,
.qa__index a{
  display:inline-block;
  max-width:34ch;
  color:var(--evergreen);
  font-family:var(--ff-display);
  font-size:clamp(1.1rem,1.7vw,1.3rem);
  line-height:1.25;
  text-decoration:none;
  border-bottom:1px solid rgba(1,50,32,.22);
  transition:border-color .18s ease;
}
.qa__more a:hover,
.qa__more a:focus-visible,
.qa__index a:hover,
.qa__index a:focus-visible{ border-color:var(--evergreen); }
.qa__more li span,
.qa__index li p{
  display:block;
  max-width:56ch;
  margin:6px 0 0;
  color:#585B54;
  font-size:.94rem;
  line-height:1.5;
}

/* The hub is a short page; its list is the whole content, so it breathes. */
.qa--hub .qa__index li{ padding:20px 0; }

/* ---------- sources ---------- */
.qa__sources{
  margin-top:clamp(34px,5vw,52px);
  padding-top:clamp(22px,3vw,30px);
  border-top:1px solid rgba(128,134,110,.32);
}
.qa__sources ul{
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}
.qa__sources li{ font-size:.92rem; line-height:1.5; }
.qa__sources a{ color:#40543F; }

/* ---------- the row of questions on the homepage ---------- */
.qa-foot{
  padding:0 0 clamp(40px,6vw,72px);
  background:var(--paper);
}
.qa-foot__inner{
  padding-top:clamp(28px,4vw,44px);
  border-top:1px solid rgba(128,134,110,.28);
}
.qa-foot h2{
  margin:0 0 6px;
  color:var(--evergreen);
  font-size:clamp(1.3rem,2.2vw,1.7rem);
}
.qa-foot__lead{
  max-width:56ch;
  margin:0 0 20px;
  color:rgba(1,50,32,.76);
  font-size:1rem;
  line-height:1.6;
}
.qa-foot ul{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
  gap:10px 32px;
  margin:0;
  padding:0;
  list-style:none;
}
.qa-foot li a{
  color:var(--evergreen);
  font-size:1rem;
  text-decoration:none;
  border-bottom:1px solid rgba(1,50,32,.22);
  transition:border-color .18s ease;
}
.qa-foot li a:hover,
.qa-foot li a:focus-visible{ border-color:var(--evergreen); }

/* A fifth link needs 796px to sit beside the button; below that the row
   falls back to logo and button, as it already did under 760px. */
@media (max-width:795px){
  .nav__links{ display:none; }
}

/* Under 620px three columns cannot be read side by side, and a table that
   scrolls sideways inside the page is easy to miss entirely. Each row
   becomes its own block instead, with the column name in front of the
   value. */
@media (max-width:620px){
  .qa__scroll{ overflow-x:visible; }
  .qa__table{ min-width:0; display:block; }
  .qa__table thead{ display:none; }
  .qa__table tbody,
  .qa__table tr,
  .qa__table td{ display:block; width:100%; }
  .qa__table tr{
    margin-bottom:14px;
    padding:14px 16px;
    border:1px solid rgba(128,134,110,.3);
    border-radius:12px;
    background:rgba(128,134,110,.06);
  }
  .qa__table td{
    padding:0;
    border:0;
    max-width:none;
  }
  .qa__table td + td{ margin-top:10px; }
  .qa__table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:3px;
    color:#585B54;
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .qa__table td:first-child{ white-space:normal; font-size:1.02rem; }
}

/* ---- nav-scale ---- */
/* 2026-09-30 — The menu was set at .9rem and faded twice over: .66 alpha on
   the colour and another .8 from opacity, which left it around 3.4:1 and
   visibly small on a wide screen. It now grows with the viewport and carries
   its contrast in the colour alone (6.4:1). */
.nav__links{
  font-size:clamp(.95rem,.28vw + .82rem,1.06rem) !important;
}
.nav__links a{
  opacity:1;
  color:rgba(1,50,32,.78) !important;
}
@media (max-width:1024px){
  .nav__links{
    font-size:.95rem !important;
  }
}

/* ---- showroom ---- */
/* Ein Projekt pro Bildschirm statt einer Kachelwand: Der Besucher sieht
   jeweils eine Marke, groß, mit ihrer eigenen Bildwelt. Die Vorschau steht
   gekippt im Raum wie ein aufgestellter Bildschirm, ein Klick öffnet die
   begehbare Demo im Rahmen (.demo weiter unten). */

.showroom{
  --exhibit-line:rgba(1,50,32,.17);
  color:rgba(1,50,32,.84);
}
.showroom__intro{
  padding:clamp(30px,5vw,58px) clamp(18px,5.2vw,64px) clamp(26px,3.4vw,40px);
  border-bottom:1px solid var(--exhibit-line);
}
.showroom__intro h1{
  max-width:20ch;
  margin:0 0 12px;
  color:var(--evergreen);
  font-size:clamp(1.9rem,4.2vw,3.1rem);
  line-height:1.06;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.showroom__intro h1 em{ font-style:italic; font-weight:400; color:#80866E; }
.showroom__intro p{
  max-width:56ch;
  margin:0;
  font-size:clamp(1rem,1.3vw,1.12rem);
  line-height:1.6;
}

/* ---------- ein Projekt ---------- */
.exhibit{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,40%) minmax(0,60%);
  align-items:center;
  gap:clamp(20px,3vw,48px);
  min-height:min(100svh,880px);
  padding:clamp(40px,6vw,76px) clamp(18px,5.2vw,64px);
  border-bottom:1px solid var(--exhibit-line);
  overflow:clip;
  isolation:isolate;
  scroll-margin-top:72px;
}
/* Jede Marke bekommt einen eigenen Ton unter den Füßen - der Wechsel macht
   beim Scrollen spürbar, dass eine neue Welt beginnt. */
.exhibit:nth-child(3n+3){ background:#E7E6DA; }
.exhibit:nth-child(3n+4){ background:#EEE9E1; }
.exhibit:nth-child(3n+5){ background:#E6E8DE; }

.exhibit__copy{
  position:relative;
  z-index:3;
  /* Breit genug, dass "Mit Charakter." in einer Zeile steht - sonst zerfaellt
     die Kopfzeile bei 1440px in drei Zeilen. */
  max-width:min(100%,540px);
  padding-right:clamp(0px,2vw,30px);
}
.exhibit__index{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 25px;
  color:#5B6C57;
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.exhibit__index::before{
  content:"";
  flex:none;
  width:27px;
  height:1px;
  background:#80866E;
}
.exhibit__index span:first-of-type{
  color:var(--evergreen);
  font-variant-numeric:tabular-nums;
}
.exhibit h2{
  margin:0 0 22px;
  color:var(--evergreen);
  font-size:clamp(2.3rem,4.4vw,4.6rem);
  line-height:1.03;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.exhibit h2 em{ font-style:italic; font-weight:400; color:#71785D; }
.exhibit__brand{
  margin:0 0 10px;
  color:var(--evergreen);
  font-size:1rem;
  font-weight:600;
}
.exhibit__text{
  max-width:44ch;
  margin:0 0 20px;
  font-size:1rem;
  line-height:1.62;
}
.exhibit__features{
  display:flex;
  flex-wrap:wrap;
  gap:7px 15px;
  margin:0 0 26px;
  color:#5D6B56;
  font-size:.78rem;
  line-height:1.5;
}
.exhibit__features span + span::before{
  content:"·";
  margin-right:15px;
}
.exhibit__open{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:0 24px;
  border-radius:3px;
  background:var(--evergreen);
  color:var(--cream);
  font-size:.92rem;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 9px 25px -17px #013220;
  transition:background .2s ease,transform .2s ease;
}
.exhibit__open:hover{ background:#194C37; transform:translateY(-2px); }
.exhibit__open:focus-visible{ outline:2px solid rgba(1,50,32,.55); outline-offset:3px; }
.exhibit__note{
  margin:18px 0 0;
  color:#6C765F;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- die gekippte Vorschau ---------- */
.exhibit__visual{
  position:relative;
  min-width:0;
  padding:18px 6px 20px 8px;
  perspective:1400px;
  isolation:isolate;
}
/* Ein zweites Blatt hinter dem Bildschirm und ein weicher Schatten darunter:
   zusammen stellen sie die Vorschau in den Raum, statt sie aufzukleben. */
.exhibit__visual::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:1%;
  left:2%;
  width:90%;
  height:85%;
  border:1px solid rgba(1,50,32,.12);
  transform:rotate(-5deg);
}
.exhibit__visual::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:18%;
  bottom:0;
  width:70%;
  height:24%;
  background:radial-gradient(ellipse,rgba(1,50,32,.19),transparent 67%);
  filter:blur(14px);
}
.exhibit__float{ animation:showroomFloat 8s ease-in-out infinite; }
.exhibit:nth-child(2n) .exhibit__float{ animation-delay:-3s; }
@keyframes showroomFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}
.exhibit__preview{
  display:block;
  position:relative;
  border:1px solid rgba(1,50,32,.18);
  border-radius:7px;
  background:#F8F6EF;
  overflow:hidden;
  transform:rotateY(-15deg) rotateX(3deg) rotateZ(1.2deg);
  box-shadow:17px 21px 38px -16px rgba(1,35,22,.32),2px 3px 0 rgba(1,50,32,.22);
  transition:transform .32s var(--ease-out,cubic-bezier(.23,1,.32,1)),box-shadow .32s ease;
}
.exhibit:nth-child(2n) .exhibit__preview{ transform:rotateY(-13deg) rotateX(3deg) rotateZ(-2deg); }
.exhibit__chrome{
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 14px;
  background:#EFEBE2;
  border-bottom:1px solid rgba(1,50,32,.1);
  color:rgba(1,50,32,.5);
  font-size:.68rem;
  letter-spacing:.04em;
}
.exhibit__chrome i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(1,50,32,.18);
}
.exhibit__chrome span{ margin-left:10px; }
.exhibit__preview img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1000/633;
  object-fit:cover;
}
.exhibit__caption{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin:26px 10px 0 13px;
  color:#63705C;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* Die Karte richtet sich beim Überfahren etwas auf - das sagt "anfassbar",
   ohne dass etwas springt. Der ganze Block reagiert, weil der Knopf links
   und die Vorschau rechts dieselbe Demo öffnen. */
@media (hover:hover) and (pointer:fine){
  .exhibit:hover .exhibit__preview,
  .exhibit__preview:focus-visible{
    transform:rotateY(-6deg) rotateX(2deg) rotateZ(.5deg);
    box-shadow:17px 27px 48px -15px rgba(1,35,22,.38),2px 3px 0 rgba(1,50,32,.18);
  }
  .exhibit:nth-child(2n):hover .exhibit__preview{ transform:rotateY(-5deg) rotateX(2deg) rotateZ(-.6deg); }
}

/* ---------- Kapitelleiste ---------- */
.chapters{
  position:fixed;
  z-index:29;
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:5px;
  max-width:calc(100vw - 24px);
  padding:5px;
  border:1px solid rgba(1,50,32,.17);
  border-radius:6px;
  background:rgba(247,243,234,.95);
  backdrop-filter:blur(20px);
  box-shadow:0 6px 30px -19px #013220;
  overflow-x:auto;
  scrollbar-width:none;
}
.chapters::-webkit-scrollbar{ display:none; }
.chapters a{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 15px;
  border-radius:3px;
  color:rgba(1,50,32,.72);
  font-size:.76rem;
  white-space:nowrap;
  text-decoration:none;
  transition:background .3s ease,color .3s ease;
}
.chapters a span{
  color:#80866E;
  font-variant-numeric:tabular-nums;
  font-size:.7rem;
}
.chapters a:hover{ background:rgba(1,50,32,.06); color:var(--evergreen); }
.chapters a.is-current{ background:var(--evergreen); color:var(--cream); }
.chapters a.is-current span{ color:#C1C3AC; }
.chapters a:focus-visible{ outline:2px solid rgba(1,50,32,.55); outline-offset:2px; }

/* ---------- Lichtschein am Zeiger ---------- */
.showroom__spot{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:radial-gradient(370px circle at var(--mx,-500px) var(--my,-500px),rgba(225,229,182,.26),transparent 72%);
  mix-blend-mode:soft-light;
}

/* ---------- Schluss ---------- */
.showroom__end{
  padding:clamp(48px,7vw,96px) clamp(18px,5.2vw,64px) clamp(96px,10vw,140px);
  text-align:left;
}
.showroom__end h2{
  max-width:16ch;
  margin:0 0 12px;
  color:var(--evergreen);
  font-size:clamp(1.8rem,3.6vw,2.8rem);
  line-height:1.08;
}
.showroom__end p{
  max-width:54ch;
  margin:0 0 26px;
  font-size:1.02rem;
  line-height:1.62;
}
.showroom__end-cta{
  min-height:54px;
  padding:0 26px;
  border-radius:3px;
  background:var(--evergreen);
  border-color:var(--evergreen);
  color:var(--cream);
  font-weight:700;
  text-decoration:none;
}
.showroom__end-cta:hover{ background:#194C37; border-color:#194C37; color:var(--cream); }

/* ---------- schmale Bildschirme ---------- */
@media (max-width:900px){
  .exhibit{
    grid-template-columns:1fr;
    min-height:0;
    /* Die Kapitelleiste schwebt unten - so viel Luft, dass sie nie auf dem
       Text liegt. */
    padding-bottom:86px;
  }
  .exhibit__copy{ max-width:none; padding-right:0; }
  .exhibit__visual{ order:-1; padding:0 0 12px; perspective:none; }
  /* Gekippt wirkt der Bildschirm nur mit Platz daneben; auf dem Handy steht
     er gerade und zeigt dafür mehr vom Entwurf. */
  .exhibit__preview,
  .exhibit:nth-child(2n) .exhibit__preview{ transform:none; }
  .exhibit__visual::before,
  .exhibit__visual::after{ display:none; }
  .exhibit__float{ animation:none; }
  .showroom__end{ padding-bottom:clamp(110px,16vw,150px); }
}

@media (prefers-reduced-motion:reduce){
  .exhibit__float{ animation:none; }
  .exhibit__preview{ transition-duration:.01ms; }
}

/* ---------- the demo in its frame ---------- */
.demo{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:10px;
  padding:clamp(10px,2vw,20px);
  background:rgba(1,39,22,.94);
  animation:demoIn .24s var(--ease-out) both;
}
.demo[hidden]{ display:none !important; }
@keyframes demoIn{ from{ opacity:0; } to{ opacity:1; } }
.demo__bar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:0 4px;
  color:var(--cotton);
}
.demo__label{ flex:1 1 auto; min-width:0; }
.demo__branch{
  display:block;
  color:#C1C3AC;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.demo__bar h2{
  margin:0;
  color:var(--cotton);
  font-family:var(--ff-display);
  font-weight:500;
  font-size:1.15rem;
  line-height:1.3;
}
.demo__seg{
  display:flex;
  border:1px solid rgba(237,234,225,.3);
  border-radius:999px;
  overflow:hidden;
}
.demo__seg button{
  border:0;
  background:transparent;
  color:rgba(237,234,225,.82);
  font:600 .8rem/1 var(--ff-body);
  padding:9px 15px;
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.demo__seg button[aria-pressed="true"]{ background:#C1C3AC; color:var(--evergreen); }
.demo__tab{
  color:var(--cotton);
  font-size:.82rem;
  text-decoration:underline;
  text-underline-offset:3px;
}
.demo__close{
  border:0;
  border-radius:999px;
  background:#C1C3AC;
  color:var(--evergreen);
  font:700 .82rem/1 var(--ff-body);
  padding:11px 18px;
  cursor:pointer;
  transition:background .16s ease;
}
.demo__close:hover{ background:var(--cotton); }
.demo__seg button:focus-visible,
.demo__close:focus-visible,
.demo__tab:focus-visible{
  outline:2px solid rgba(237,234,225,.65);
  outline-offset:2px;
}
.demo__stage{
  display:grid;
  place-items:center;
  min-height:0;
}
.demo__frame{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:1180px;
  height:100%;
  border-radius:12px;
  overflow:hidden;
  background:var(--cream,#F7F3EA);
  transition:max-width .3s var(--ease-out);
}
.demo__stage[data-device="phone"] .demo__frame{ max-width:390px; }
.demo__chrome{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
  padding:9px 12px;
  background:#E3DFD4;
  border-bottom:1px solid rgba(1,50,32,.12);
}
.demo__chrome i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(1,50,32,.22);
}
.demo__url{
  flex:1;
  margin-left:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:rgba(1,50,32,.66);
  font-size:.72rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.demo__screen{
  flex:1;
  width:100%;
  min-height:0;
  border:0;
  background:#fff;
}

/* ---------- the hero cards lead here ---------- */
/* The drifting cards show the same six sites; a click on one now opens the
   showroom. They stay out of the tab order and hidden from screen readers -
   the link below the headline is the route that is announced. */
.hero-drift__card a,
.hero-strip__card a{
  display:block;
  pointer-events:auto;
  cursor:pointer;
}
.hero__showroom{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
  color:rgba(1,50,32,.78);
  font-size:.98rem;
  text-decoration:none;
  border-bottom:1px solid rgba(1,50,32,.24);
  transition:color .18s ease,border-color .18s ease;
}
.hero__showroom:hover,
.hero__showroom:focus-visible{
  color:var(--evergreen);
  border-color:var(--evergreen);
}
.hero__showroom span{ transition:transform .16s ease; }
.hero__showroom:hover span{ transform:translateX(3px); }

@media (prefers-reduced-motion:reduce){
  .demo__frame,
  .hero__showroom span{ transition-duration:.01ms; }
  .demo{ animation-duration:.01ms; }
}


/* ---- showroom-viewer-preview-match-2026-10-02 ----
   Match the approved cream viewer. The six demo sites keep their own design. */
.demo{
  margin:auto; inset:0; padding:0; gap:0; z-index:120;
  width:calc(100% - 48px); max-width:1600px;
  height:calc(100dvh - 40px); max-height:none;
  grid-template-rows:auto minmax(0,1fr) auto;
  border:1px solid #a8b19a; border-radius:9px; overflow:hidden;
  background:var(--cotton,#edeae1); color:var(--evergreen,#013220);
  box-shadow:0 25px 100px #0006; animation:none;
}
.demo::backdrop{background:rgba(1,20,12,.78);backdrop-filter:blur(9px)}
.demo__bar{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(44px,1fr);
  min-height:68px; padding:12px 22px; gap:12px;
  background:var(--cotton,#edeae1); color:var(--evergreen);
  border-bottom:1px solid rgba(1,50,32,.17);
}
.demo__brand{display:flex;align-items:center;gap:18px;min-width:0}
.demo__bar h2{
  padding-left:20px; border-left:1px solid rgba(1,50,32,.17);
  color:var(--evergreen); font:400 18px/1.4 var(--ff-display);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demo button{cursor:pointer}
.demo button svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.demo__back,.demo__close{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;border:0;border-radius:2px;padding:6px 0;
  color:var(--evergreen);background:transparent;font:400 13px/1.3 var(--ff-body);
  white-space:nowrap;
}
.demo__close{justify-self:end;min-width:44px;padding:6px}
.demo__close kbd{font:10px var(--ff-body);border:1px solid rgba(1,50,32,.17);padding:2px 5px;border-radius:3px}
.demo__seg{border:0;border-radius:4px;background:#dedfd3;gap:3px;padding:4px;overflow:visible}
.demo__seg button{
  display:flex;align-items:center;gap:7px;padding:7px 10px;min-height:34px;
  border-radius:2px;color:var(--evergreen);font:400 12px/1.4 var(--ff-body);
}
.demo__seg button[aria-pressed="true"]{background:var(--cream,#f7f3ea);color:var(--evergreen);box-shadow:0 1px 4px #01322018}
.demo button:focus-visible{outline:2px solid var(--evergreen);outline-offset:3px}
.demo__stage{
  display:flex;justify-content:center;align-items:center;overflow:hidden;padding:0 18px;
  background:repeating-linear-gradient(45deg,#e1e2d8,#e1e2d8 1px,#e7e8df 1px,#e7e8df 8px);
}
.demo__frame{position:relative;display:block;flex:none;width:100%;max-width:none;height:100%;border-radius:0;transition:none;background:#fff}
.demo__stage[data-device="phone"] .demo__frame{max-width:none}
.demo__screen{display:block;width:100%;height:100%;border:0}
.demo__stage.is-phone-preview{padding:16px 18px}
.demo__stage.is-phone-preview .demo__frame{border-radius:6px;box-shadow:0 12px 30px #01322020}
.demo__stage.is-phone-preview .demo__screen{width:390px;height:844px;max-width:none;transform:scale(var(--phone-scale,1));transform-origin:top left}
.demo__bottom{
  min-height:41px;display:flex;align-items:center;justify-content:space-between;
  padding:4px 22px;font:400 11px/1.5 var(--ff-body);gap:12px;color:#52634b;
  border-top:1px solid rgba(1,50,32,.17);
}
.demo__bottom strong{font-weight:500;color:var(--evergreen)}
.demo__pager{display:flex;align-items:center;gap:16px;white-space:nowrap}
.demo__next{border:0;background:transparent;color:inherit;padding:8px 4px;font:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1050px){
  .demo__bar{padding:10px 16px}.demo__brand{gap:12px}.demo__bar h2{font-size:15px;padding-left:12px}
}
@media(max-width:760px){
  .demo{width:100%;height:100dvh;border:0;border-radius:0}
  .demo__bar{grid-template-columns:minmax(0,1fr) 44px;padding:6px 10px;gap:6px;min-height:58px}
  .demo__brand{gap:8px}.demo__bar h2{font-size:14px;padding-left:10px}
  .demo__back{font-size:11px;min-height:44px}.demo__close{min-height:44px}
  .demo__close kbd,.demo__seg{display:none}
  .demo__stage{padding:0}
  .demo__bottom{padding:3px 10px max(3px,env(safe-area-inset-bottom));font-size:10px;gap:8px}
  .demo__notice{display:none}.demo__pager{gap:8px}.demo__next{min-height:44px;padding:6px 0}
}

/* ---- packages-and-clear-introduction-2026-10-06 ---- */
.hero__title{font-size:clamp(2.5rem,4.2vw,4.5rem)!important;line-height:1.08;text-wrap:balance}
.hero__intro{max-width:60ch;color:var(--evergreen);font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.65}
.hero__intro p{margin:0}
.hero__intro p+p{margin-top:16px}
.hero__intro strong{font-weight:700}
.hero__cta-row{justify-content:flex-start}
.pricing .included{padding:32px!important;background:var(--cream)!important;margin-bottom:32px;border-color:var(--jade)!important}
.pricing .included__label{margin:0 0 24px;font:400 clamp(1.35rem,2.1vw,1.8rem)/1.3 var(--ff-display);letter-spacing:0;text-transform:none;color:var(--evergreen)!important}
.pricing .included__grid{gap:16px 24px}
.pricing .included__item{font-size:1.0625rem;line-height:1.5;font-weight:500;color:var(--evergreen)!important;padding-left:28px}
.pricing .included__item::before{font-size:1.25rem;line-height:1.3}
.pricing__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch}
.pricing .pkg{display:flex;flex-direction:column}
.pricing .pkg__name{margin-top:0;font-family:var(--ff-display);font-weight:500}
.pricing .pkg__headline{min-height:0;margin-bottom:20px;font-weight:400}
.pricing .pkg__price{font-size:clamp(2rem,3vw,2.6rem)!important;line-height:1.2}
.pricing .pkg__price span{font-size:.875rem;line-height:1.45;opacity:1}
.pricing .pkg__features li{color:var(--evergreen)!important;line-height:1.55}
.pkg__extras{border-top:1px solid rgba(1,50,32,.17);padding-top:24px;margin-top:24px}
.pkg__extras h4{font:600 1rem/1.4 var(--ff-body);margin:0 0 16px;color:var(--evergreen)}
.pkg__bonuses{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.pkg__bonuses li{display:flex;flex-direction:column;gap:4px;font-size:.9375rem;line-height:1.5;color:var(--evergreen)}
.pkg__bonuses small{font-size:.8125rem;color:var(--evergreen);opacity:.8}
.pricing .pkg__desc--after{margin-top:auto!important;padding-top:24px;line-height:1.55;color:var(--evergreen)!important}
.pricing .pkg .btn--block{margin-top:24px}
.pricing__foot{line-height:1.6}
#pakete{scroll-margin-top:100px}
#business{scroll-margin-top:110px}
@media(max-width:900px){
  .hero__title{font-size:clamp(2.25rem,6.7vw,3.8rem)!important;max-width:20ch}
  .hero__intro{max-width:65ch}
  .pricing .included__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .hero__title{font-size:clamp(2rem,8.5vw,3rem)!important;max-width:none}
  .hero__intro{font-size:1rem;line-height:1.6}
  .pricing__grid{grid-template-columns:1fr!important}
  .pricing .included{padding:24px!important}
  .pricing .included__label{margin-bottom:20px}
  .pricing .included__grid{grid-template-columns:1fr;gap:14px}
  .pricing .included__item{font-size:1rem}
  #pakete{scroll-margin-top:80px}
  #business{scroll-margin-top:88px}
}

/* ---- stripe-checkout-2026-10-08 ---- */
.checkout-page{padding:48px 0 80px;color:var(--evergreen);min-height:65vh}
.checkout-page h1{margin:24px 0;font:400 clamp(2rem,4.2vw,3.5rem)/1.15 var(--ff-display);max-width:22ch;text-wrap:balance}
.checkout-page h2{margin:0 0 16px;font:400 1.6rem/1.3 var(--ff-display)}
.checkout-lead{max-width:65ch;font-size:1.0625rem;line-height:1.7;margin-bottom:32px}
.checkout-page a:not(.btn){color:var(--evergreen);text-decoration:underline;text-underline-offset:4px}
.checkout-back{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.checkout-care{border:0;padding:0;margin:0 0 32px;min-width:0}
.checkout-care legend{padding:0;margin-bottom:16px;font:400 1.6rem/1.3 var(--ff-display)}
.checkout-care p,.checkout-terms p,.checkout-summary p{line-height:1.65;margin:0 0 16px}
.checkout-care label{display:block;font-weight:600;margin:24px 0 8px}
.checkout-care select{width:100%;padding:14px 12px;border:1px solid var(--dusty-olive);border-radius:3px;background:var(--cream);color:var(--evergreen);font:inherit;min-height:48px}
.checkout-terms{padding-top:24px;border-top:1px solid rgba(1,50,32,.17)}
.checkout-summary{background:var(--cream);border:1px solid var(--jade);border-radius:8px;padding:32px}
.checkout-order-name{font-size:1.125rem;font-weight:600}
.checkout-total{display:flex;flex-direction:column;gap:8px;padding:24px 0;border-top:1px solid var(--jade);border-bottom:1px solid var(--jade);margin:24px 0}
.checkout-total strong{font:400 2.5rem/1.2 var(--ff-display)}
.checkout-summary .btn{margin-top:8px;width:100%;white-space:normal;font:600 1rem/1.4 var(--ff-body);padding:16px;min-height:56px}
.checkout-page button:disabled{opacity:.6;cursor:wait}
.checkout-message,.checkout-error{border:1px solid var(--dusty-olive);padding:16px 20px;background:var(--cream);margin:16px 0;line-height:1.65}
.checkout-page [hidden]{display:none!important}
.checkout-error{color:var(--evergreen);margin-top:20px}
.checkout-summary .checkout-error{margin-top:20px}
.checkout-help{margin-top:32px;font-size:.9375rem;line-height:1.65}
.checkout-status-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:32px 0}
.checkout-page--status .wrap{max-width:900px}
@media(max-width:760px){
  .checkout-page{padding:24px 0 48px}
  .checkout-layout{grid-template-columns:1fr;gap:24px}
  .checkout-summary{padding:24px}
  .checkout-page h1{margin-top:16px}
}

/* ---- enquiry-and-confirmation-2026-10-10 ---- */
.enquiry-page,.thanks-page{color:var(--evergreen);background:var(--cotton);font:400 1rem/1.65 var(--ff-body)}
.enquiry-page [hidden],.thanks-page [hidden]{display:none!important}
.enquiry-page *,.thanks-page *{box-sizing:border-box}
.enquiry-page h1,.thanks-page h1{font:400 clamp(2.8rem,4.7vw,4.5rem)/1.08 var(--ff-display);letter-spacing:-.025em;margin:0 0 28px;text-wrap:balance}
.enquiry-page h1 em,.enquiry-page h2 em,.thanks-page h1 em{font-weight:400;color:var(--evergreen)}
.enquiry-page h2,.thanks-page h2{font:400 clamp(1.8rem,2.8vw,2.6rem)/1.2 var(--ff-display);letter-spacing:-.02em;margin:0 0 20px;text-wrap:balance}
.enquiry-page h3,.thanks-page h3{font:600 1.0625rem/1.45 var(--ff-body);margin:0 0 10px}
.enquiry-page p,.thanks-page p{margin:0 0 20px}
.enquiry-page a:not(.btn),.thanks-page a:not(.btn){color:var(--evergreen);text-underline-offset:4px;text-decoration-thickness:1px}
.enquiry-page :is(button,input,select,textarea),.thanks-page button{font:inherit}
.enquiry-page :is(a,button,input,select,textarea):focus-visible,.thanks-page :is(a,button):focus-visible{outline:2px solid var(--evergreen);outline-offset:4px}
.enquiry-page input,.enquiry-page textarea{caret-color:var(--evergreen);accent-color:var(--evergreen)}
.enquiry-page ::selection,.thanks-page ::selection{background:var(--jade);color:var(--evergreen)}
.enquiry-page .btn,.thanks-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px 22px;border-radius:4px;font:600 .9375rem/1.4 var(--ff-body);white-space:normal;text-align:center;text-decoration:none;box-shadow:none;transition:background-color 160ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
.enquiry-page .btn:active,.thanks-page .btn:active{transform:scale(.98)}
.enquiry-page button:disabled,.thanks-page button:disabled{opacity:.55;cursor:default}
.enquiry-page [aria-busy="true"]{cursor:progress}
.enquiry-skip{position:fixed;top:-120px;left:10px;padding:12px 20px;background:var(--cream);color:var(--evergreen);z-index:200}
.enquiry-skip:focus{top:10px}
/* The old shared section and .wrap rules use !important. Scope their overrides here. */
.enquiry-page>section,.thanks-page>section{padding-top:0!important;padding-bottom:0!important}
.enquiry-page .enquiry-hero{display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,1fr);align-items:start;gap:clamp(32px,5vw,80px);padding-top:clamp(40px,5vw,72px)!important;padding-bottom:clamp(56px,7vw,96px)!important}
.enquiry-intro{padding-top:18px}
.enquiry-lead{font-size:1.125rem;line-height:1.7;max-width:48ch}
.enquiry-page .enquiry-price{font-size:1rem;line-height:1.8;margin:26px 0}
.enquiry-price a{font-size:.875rem}
.enquiry-benefits{padding:0;margin:32px 0;list-style:none;display:grid;gap:14px}
.enquiry-benefits li{position:relative;padding-left:26px;line-height:1.55}
.enquiry-benefits li::before{content:"";position:absolute;left:3px;top:.35em;width:7px;height:12px;border:solid var(--evergreen);border-width:0 2px 2px 0;transform:rotate(45deg)}
.enquiry-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.enquiry-text-link{display:inline-flex;align-items:center;gap:12px;min-height:48px;font-weight:500}
.enquiry-page .enquiry-response{font-size:.875rem;margin:20px 0 0}
.enquiry-panel{border:1px solid var(--jade);background:var(--cream);border-radius:14px;padding:clamp(24px,3vw,40px);scroll-margin-top:116px}
.enquiry-panel h2{font-size:clamp(1.6rem,2.15vw,2rem);margin-bottom:12px}
.enquiry-panel>p{font-size:.9375rem;max-width:44ch;margin-bottom:28px}
.enquiry-field{display:flex;flex-direction:column;gap:8px;margin:0 0 20px;min-width:0}
.enquiry-field>span,.enquiry-chips legend{font-size:.875rem;font-weight:600;line-height:1.5}
.enquiry-field small,.enquiry-chips small{font-size:.8125rem;font-weight:400}
.enquiry-field :is(input,select,textarea){width:100%;color:var(--evergreen);background:var(--cream);border:1px solid var(--dusty-olive);border-radius:5px;padding:12px 14px;min-height:48px;font-size:1rem;line-height:1.5}
.enquiry-field textarea{resize:vertical;min-height:108px}
.enquiry-field select{appearance:auto;padding-right:30px;cursor:pointer}
.enquiry-field input::placeholder,.enquiry-field textarea::placeholder{color:#52634b;opacity:1}
.enquiry-field [aria-invalid="true"]{outline:2px solid var(--evergreen);outline-offset:2px}
.enquiry-chips{border:0;padding:0;margin:0 0 20px;min-width:0;display:flex;flex-wrap:wrap;gap:8px}
.enquiry-chips legend{padding:0;margin:0 0 10px}
.enquiry-chips label{position:relative;cursor:pointer}
.enquiry-chips input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.enquiry-chips label span{display:block;padding:10px 13px;border:1px solid var(--dusty-olive);border-radius:30px;font-size:.8125rem;line-height:1.65;min-height:44px}
.enquiry-chips input:checked+span{background:var(--evergreen);color:var(--cream);border-color:var(--evergreen)}
.enquiry-chips input:focus-visible+span{outline:2px solid var(--evergreen);outline-offset:3px}
.enquiry-page .enquiry-privacy,.enquiry-page .enquiry-small{font-size:.8125rem;line-height:1.65;margin:18px 0}
.enquiry-page .enquiry-context{font-size:.875rem;padding:16px 0;border-top:1px solid var(--jade);border-bottom:1px solid var(--jade)}
.enquiry-submit{width:100%}
.enquiry-page .enquiry-submit+.enquiry-small{margin-bottom:0;text-align:center}
.enquiry-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.enquiry-page .enquiry-error{border:1px solid var(--evergreen);padding:16px;font-size:.9375rem;line-height:1.6;margin:20px 0}
.enquiry-page .enquiry-process{padding-bottom:clamp(64px,7vw,96px)!important}
.enquiry-process h2{max-width:28ch;margin-bottom:36px}
.enquiry-process ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.enquiry-process li{border-top:1px solid var(--dusty-olive);padding-top:22px}
.enquiry-step-number{display:block;font-size:.8125rem;letter-spacing:.08em;margin-bottom:18px;font-variant-numeric:tabular-nums}
.enquiry-process li p{font-size:.9375rem;line-height:1.7;margin-bottom:0;max-width:38ch}
.enquiry-page .enquiry-personalise{border-top:1px solid var(--jade);background:var(--cream);padding:clamp(56px,6vw,88px) 0!important;scroll-margin-top:92px}
.enquiry-personalise__inner.wrap{max-width:960px!important}
.enquiry-section-heading{text-align:center;max-width:760px;margin:0 auto 40px}
.enquiry-section-heading h2{font-size:clamp(2rem,3.2vw,3rem)}
.enquiry-section-heading p{margin:0 auto;max-width:58ch}
.enquiry-wizard{border:1px solid var(--jade);border-radius:14px;background:var(--cotton);padding:clamp(24px,4vw,48px);scroll-margin-top:110px}
.enquiry-progress{margin-bottom:36px}
.enquiry-progress p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.875rem;line-height:1.5;font-variant-numeric:tabular-nums;margin:0 0 12px}
.enquiry-progress span{font-weight:600}
.enquiry-progress progress{appearance:none;display:block;width:100%;height:5px;border:0;border-radius:4px;overflow:hidden;color:var(--evergreen);background:var(--jade)}
.enquiry-progress progress::-webkit-progress-bar{background:var(--jade)}
.enquiry-progress progress::-webkit-progress-value{background:var(--evergreen)}
.enquiry-progress progress::-moz-progress-bar{background:var(--evergreen)}
.enquiry-step{padding:0;margin:0;border:0;min-width:0}
.enquiry-step legend{font:400 clamp(1.65rem,2.3vw,2.15rem)/1.25 var(--ff-display);letter-spacing:-.02em;padding:0;max-width:100%;margin-bottom:12px;text-wrap:balance}
.enquiry-step legend:focus{outline:none}
.enquiry-page .enquiry-hint{font-size:.9375rem;line-height:1.65;max-width:65ch;margin:0 0 26px}
.enquiry-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.enquiry-choice{display:flex;align-items:flex-start;gap:14px;border:1px solid var(--dusty-olive);border-radius:7px;background:var(--cream);padding:22px;cursor:pointer;min-height:132px;min-width:0;transition:background-color 160ms ease,border-color 160ms ease}
.enquiry-choice input{appearance:auto;flex:none;width:20px;height:20px;margin:4px 0 0;cursor:pointer}
.enquiry-choice strong{display:block;font-size:1rem;line-height:1.5;margin-bottom:8px;font-weight:600}
.enquiry-choice small{display:block;font-size:.875rem;line-height:1.55}
.enquiry-choice:has(input:checked){border-color:var(--evergreen);background:#dfe3d4;box-shadow:inset 0 0 0 1px var(--evergreen)}
.enquiry-choice:has(input:focus-visible){outline:2px solid var(--evergreen);outline-offset:4px}
.enquiry-page .enquiry-hint--after{margin:20px 0 0;font-size:.8125rem}
.enquiry-wizard-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:36px}
.enquiry-back{display:inline-flex;gap:8px;align-items:center;background:transparent;border:0;color:var(--evergreen);padding:12px 0;min-height:48px;cursor:pointer;font-size:.9375rem}
.enquiry-page .enquiry-next-hint{font-size:.8125rem;text-align:right;margin:14px 0 0;line-height:1.6}
.enquiry-review{margin:0 0 32px;padding:0;border-top:1px solid var(--jade)}
.enquiry-review>div{padding:12px 0;display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;border-bottom:1px solid var(--jade);font-size:.875rem}
.enquiry-review dt{font-weight:600}
.enquiry-review dd{margin:0;display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.enquiry-review button{font:inherit;font-size:.8125rem;background:none;border:0;color:var(--evergreen);text-decoration:underline;text-underline-offset:3px;cursor:pointer;flex:none;min-height:44px;padding:0 4px;margin:-9px 0}
.enquiry-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.enquiry-page .enquiry-close{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:56px!important;padding-bottom:56px!important}
.enquiry-close h2{font-size:1.8rem;margin-bottom:12px}
.enquiry-close p{font-size:.9375rem;margin:0;overflow-wrap:anywhere}
.thanks-page{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(56px,7vw,96px)}
.thanks-intro{max-width:850px}
.thanks-page h1{font-size:clamp(2.4rem,4.3vw,3.9rem);max-width:23ch}
.thanks-lead{font-size:1.125rem;line-height:1.7;max-width:65ch}
.thanks-mark{display:block;fill:none;stroke:var(--evergreen);stroke-width:1.5;width:48px;height:48px;margin:0 0 26px}
.thanks-page .thanks-note{display:inline-block;padding:12px 0;border-top:1px solid var(--jade);font-size:.9375rem}
.thanks-next{margin:36px 0}
.thanks-next h2{font-size:1.8rem;margin-bottom:28px}
.thanks-next ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.thanks-next li{padding-top:20px;border-top:1px solid var(--dusty-olive)}
.thanks-next li>span{display:block;font-size:.8125rem;margin-bottom:16px;font-variant-numeric:tabular-nums}
.thanks-next li p{font-size:.9375rem;line-height:1.7;margin:0}
.thanks-actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:36px}
.thanks-actions>a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
.thanks-page .thanks-contact{font-size:.9375rem;margin:40px 0 0;overflow-wrap:anywhere}
@media(hover:hover) and (pointer:fine){
  .enquiry-choice:hover,.enquiry-chips label:hover span{border-color:var(--evergreen)}
  .enquiry-page .btn:hover,.thanks-page .btn:hover{background:var(--evergreen-deep,#012716);transform:none}
}
@media(max-width:1000px){
  .enquiry-hero{gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .enquiry-page h1{font-size:clamp(2.6rem,5.3vw,3.7rem)}
  .enquiry-panel{padding:24px}
  .enquiry-actions{gap:12px}
}
@media(max-width:760px){
  .enquiry-page .enquiry-hero{grid-template-columns:1fr;gap:36px;padding-top:32px!important;padding-bottom:56px!important}
  .enquiry-intro{padding-top:0}
  .enquiry-page h1{font-size:clamp(2.4rem,8.8vw,3.5rem);margin-bottom:22px}
  .enquiry-lead{font-size:1.0625rem}
  .enquiry-benefits{margin:24px 0}
  .enquiry-actions{align-items:flex-start;flex-direction:column;gap:8px}
  .enquiry-panel{scroll-margin-top:86px}
  .enquiry-process ol,.thanks-next ol{grid-template-columns:1fr;gap:24px}
  .enquiry-process li,.thanks-next li{display:flex;gap:20px;padding-top:20px}
  .enquiry-step-number,.thanks-next li>span{flex:none;margin:3px 0 0}
  .enquiry-process li p{max-width:none}
  .enquiry-personalise{scroll-margin-top:80px}
  .enquiry-section-heading{text-align:left;margin-bottom:28px}
  .enquiry-wizard{padding:24px 20px;scroll-margin-top:90px}
  .enquiry-progress{margin-bottom:28px}
  .enquiry-progress p{font-size:.8125rem}
  .enquiry-choices{grid-template-columns:1fr;gap:12px}
  .enquiry-choice{min-height:108px;padding:18px}
  .enquiry-choice strong{margin-bottom:5px}
  .enquiry-wizard-nav{margin-top:28px;align-items:flex-start}
  .enquiry-wizard-nav .btn{max-width:calc(100% - 85px);padding:14px 18px}
  .enquiry-contact-grid{grid-template-columns:1fr}
  .enquiry-review>div{grid-template-columns:1fr;gap:6px}
  .enquiry-review dd{gap:16px}
  .enquiry-page .enquiry-close{flex-direction:column;align-items:flex-start;padding-top:40px!important;padding-bottom:40px!important}
  .thanks-actions{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .enquiry-page .btn,.thanks-page .btn,.enquiry-choice{transition:none}
}

/* ---- homepage-free-offer-hero-2026-10-20 ---- */
.hero--offer{
  padding:clamp(48px,6vw,82px) 0 clamp(64px,8vw,104px);
  background:var(--paper);
  color:var(--evergreen);
  overflow:visible;
}
.hero--offer .hero__inner{
  width:min(1320px,calc(100% - 48px));
  max-width:1320px;
  grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr)!important;
  grid-template-areas:"copy form"!important;
  align-items:center;
  gap:clamp(36px,6vw,88px);
}
.hero__copy{grid-area:copy;min-width:0}
.hero__copy>.eyebrow{display:inline-flex;align-items:center;margin-bottom:20px;padding:7px 13px;border:1px solid rgba(128,134,110,.24);border-radius:999px;background:rgba(193,195,172,.18);color:var(--evergreen);letter-spacing:.12em}
.hero--offer .hero__title{
  max-width:16ch;
  font-size:clamp(2.55rem,4.5vw,4.5rem)!important;
  line-height:1.04;
  letter-spacing:-.025em;
  text-wrap:balance;
  color:var(--evergreen);
}
.hero--offer .hero__intro{
  max-width:62ch;
  margin-top:24px;
  font-size:clamp(1rem,1.2vw,1.125rem);
  line-height:1.65;
  color:var(--evergreen);
}
.hero--offer .hero__intro p+p{margin-top:14px}
.hero__business-link{text-decoration-thickness:1px;text-underline-offset:4px;color:var(--evergreen)}
.hero__benefits{display:grid;gap:12px;margin:24px 0 28px;padding:0;list-style:none}
.hero__benefits li{position:relative;padding-left:27px;line-height:1.5;color:var(--evergreen)}
.hero__benefits li::before{content:"✓";position:absolute;left:0;top:0;color:var(--dusty-olive);font-weight:700}
.hero--offer .hero__actions{gap:12px 22px;align-items:center}
.hero--offer .hero__actions .btn{min-height:54px;text-align:center;white-space:normal}
.hero__personalise{display:inline-flex;align-items:center;gap:8px;min-height:48px;color:var(--evergreen);font-weight:600;text-underline-offset:4px}
.hero__response{margin-top:18px;font-size:.875rem;line-height:1.5;color:#52634b}
.home-offer{
  grid-area:form;
  position:relative;
  min-width:0;
  padding:clamp(28px,3.5vw,48px);
  background:var(--cream);
  color:var(--evergreen);
  border:1px solid var(--jade);
  border-top:3px solid var(--evergreen);
  border-radius:14px;
  scroll-margin-top:110px;
}
.home-offer__badge{
  position:absolute;top:-18px;right:28px;
  padding:8px 16px;border-radius:999px;
  background:var(--evergreen);color:var(--cotton);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.home-offer h2{max-width:20ch;margin:0 0 8px;font:500 clamp(1.65rem,2.3vw,2.15rem)/1.15 var(--ff-display);color:var(--evergreen);text-wrap:balance}
.home-offer__lead{max-width:42ch;margin:0 0 26px;color:#52634b;font-size:.9375rem;line-height:1.55}
.home-offer__field{display:flex;flex-direction:column;gap:8px;margin:0 0 20px;min-width:0}
.home-offer__field>span,.home-offer__choices legend{font-size:.875rem;font-weight:600;line-height:1.5}
.home-offer__field small,.home-offer__choices small{font-size:.8125rem;font-weight:400;color:#52634b}
.home-offer__field b{color:var(--dusty-olive)}
.home-offer__field :is(input,textarea){width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--jade);border-radius:5px;background:#fff;color:var(--evergreen);font:400 1rem/1.5 var(--ff-body)}
.home-offer__field textarea{min-height:96px;resize:vertical}
.home-offer__field :is(input,textarea):focus-visible{outline:2px solid var(--evergreen);outline-offset:2px}
.home-offer__choices{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0 0 20px;min-width:0}
.home-offer__choices legend{width:100%;padding:0;margin:0 0 3px}
.home-offer__choices label{position:relative;cursor:pointer}
.home-offer__choices input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.home-offer__choices label span{display:flex;align-items:center;min-height:42px;padding:8px 13px;border:1px solid var(--jade);border-radius:999px;background:var(--cream);font-size:.8125rem;line-height:1.4;color:var(--evergreen)}
.home-offer__choices input:checked+span{background:var(--evergreen);border-color:var(--evergreen);color:var(--cotton)}
.home-offer__choices input:focus-visible+span{outline:2px solid var(--evergreen);outline-offset:3px}
.home-offer__privacy,.home-offer__note{font-size:.78rem;line-height:1.55;color:#52634b}
.home-offer__error{padding:12px;border:1px solid var(--dusty-olive);margin:12px 0;color:var(--evergreen);font-size:.875rem;line-height:1.5}
.home-offer__privacy{margin:16px 0}
.home-offer__privacy a{color:var(--evergreen);text-underline-offset:3px}
.home-offer__submit{width:100%;min-height:54px;white-space:normal;text-align:center}
.home-offer__note{margin:12px 0 0;text-align:center}
.home-offer__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.hero--offer :is(a,button,input,textarea):focus-visible{outline:2px solid var(--evergreen);outline-offset:3px}
@media(max-width:960px){
  .hero--offer .hero__inner{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"copy" "form"!important;gap:38px}
  .hero__copy{max-width:760px}
  .home-offer{width:min(100%,720px)}
}
@media(max-width:640px){
  .hero--offer{padding:42px 0 64px}
  .hero--offer .hero__inner{width:calc(100% - 36px);gap:32px}
  .hero--offer .hero__title{font-size:clamp(2.25rem,10vw,3.35rem)!important;line-height:1.05}
  .hero--offer .hero__intro{margin-top:20px;font-size:1rem}
  .hero__benefits{gap:10px;margin:22px 0}
  .hero--offer .hero__actions{align-items:stretch;flex-direction:column}
  .hero--offer .hero__actions .btn{width:100%}
  .hero__personalise{align-self:flex-start}
  .home-offer{padding:30px 20px 24px;border-radius:12px}
  .home-offer__badge{right:18px;font-size:.67rem}
  .home-offer__choices label span{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.hero--offer *{scroll-behavior:auto}}

/* ---- 2026-10-20-homepage-offer-and-faq-polish ---- */
.home-offer__personalise{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:8px auto 0;color:var(--evergreen);font-size:.9rem;font-weight:600;text-underline-offset:4px;text-decoration-thickness:1px}
.home-offer__personalise:focus-visible{outline:2px solid var(--evergreen);outline-offset:3px}
.home-offer__note{margin-top:8px}
.qa-foot__summary{max-width:1000px;margin:26px 0 28px;padding:18px 22px;background:var(--cream);border:1px solid rgba(128,134,110,.3);border-radius:14px}
.qa-foot__summary p{margin:0;color:var(--evergreen);font-size:.95rem;line-height:1.65}
.qa-foot__summary strong{font-weight:700}
.qa-foot__list{max-width:1000px;display:grid;grid-template-columns:1fr!important;gap:0!important;border-top:1px solid rgba(128,134,110,.3)}
.qa-foot__list li{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;align-items:baseline;gap:24px;padding:17px 4px;border-bottom:1px solid rgba(128,134,110,.3)}
.qa-foot__list li a{font-weight:600;line-height:1.5}
.qa-foot__list li p{margin:0;color:rgba(1,50,32,.76);font-size:.9rem;line-height:1.55}
@media(max-width:640px){.qa-foot__summary{margin:20px 0;padding:16px}.qa-foot__list li{grid-template-columns:1fr;gap:5px;padding:15px 2px}}