/* ════════════════════════════════════════════════════════════════════════
   CLOUD GARDEN — launch site (page styles) · "Das Herbarium-Register"
   Loads AFTER tokens.css · fonts.css · type-scale.css · components.css.
   Everything here uses the canonical --cg-* tokens. One accent (laurel),
   green on light only. Depth = hairlines + cool shadows + space. No gradient,
   no glow, no texture. Eyebrows + dividers are plain cool grey (BRAND.md §7).

   The page is ONE continuous editorial spread: a 12-column grid threaded by a
   per-section meta rail (eyebrow + a vertical spine hairline), tight section
   rhythm with a top hairline so nothing floats, dense hairline REGISTERS (never
   cards), and natural-colour image plates at varied scale. No ordinal/section
   numbering anywhere (BRAND.md §2 — sections are titled, not indexed).
   ════════════════════════════════════════════════════════════════════════ */

/* ─── reset & base ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--cg-paper);color:var(--cg-ink);
  font-family:var(--cg-font);font-weight:var(--cg-weight-body);font-size:var(--cg-fs-body);
  line-height:var(--cg-lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:var(--cg-figs);overflow-x:clip}
img,svg{max-width:100%}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}   /* no ordinal markers — sections/blocks are titled, not indexed (§2) */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus:not(:focus-visible){outline:none}
a:focus-visible,button:focus-visible,details:focus-visible summary,summary:focus-visible{
  outline:2px solid var(--cg-green);outline-offset:3px;border-radius:2px}
.cg-soil a:focus-visible,.cg-soil button:focus-visible,.cg-soil summary:focus-visible,
.cg-bed a:focus-visible,.cg-bed button:focus-visible,.cg-bed summary:focus-visible{
  outline-color:var(--cg-dark-ink)}           /* no green on dark/bed — paper-white ring */
::selection{background:var(--cg-green);color:var(--cg-dark-ink)}
.cg-soil ::selection,.cg-bed ::selection{background:var(--cg-bed-ink);color:var(--cg-ink)}  /* no green on dark/bed — paper-white highlight */
.leist-atmo ::selection{background:var(--cg-bed-ink);color:var(--cg-ink)}

/* visually hidden (the single h1 lives here, the value prop carries it visibly) */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* skip link */
.skip{position:fixed;left:var(--cg-gutter);top:-100px;z-index:300;background:var(--cg-ink);
  color:#fff;padding:11px 18px;border-radius:var(--cg-radius);font-size:12px;font-weight:500;
  letter-spacing:.02em;transition:top var(--cg-dur-fast) var(--cg-ease)}
.skip:focus{top:14px}

/* ─── layout primitives ─────────────────────────────────────────────────── */
.wrap{max-width:var(--cg-wrap);margin-inline:auto;padding-inline:var(--cg-gutter)}
[id]{scroll-margin-top:96px}

/* Each section opens with a full-width-of-wrap top hairline so no block floats;
   the rhythm is tightened from the cavernous token (180px) to a composed band. */
.section{padding:0}
.section > .wrap{padding-block:clamp(58px,6.4vw,98px);border-top:1px solid var(--cg-rule)}
.cg-soil > .wrap{border-top-color:var(--cg-dark-line)}
.cg-bed   > .wrap{border-top-color:var(--cg-bed-line)}
/* the section right after the hero drops its top hairline — the curved hero foot is the divider */
.hero--media + .section > .wrap{border-top:0}

/* the 12-column spread + the meta rail (eyebrow + vertical spine hairline).
   The rail is a margin label: a short tracked eyebrow seated at the top of a
   full-height cool-grey spine that threads each section to the next. */
.sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2.2vw,32px)}
.sec__rail{grid-column:1 / 3;border-right:1px solid var(--cg-rule);
  padding-right:clamp(12px,1.4vw,20px);padding-top:2px}
.cg-soil .sec__rail{border-right-color:var(--cg-dark-line)}
.cg-bed   .sec__rail{border-right-color:var(--cg-bed-line)}
.sec__body{grid-column:3 / 13;min-width:0}

/* eyebrow — tracked uppercase, PLAIN COOL GREY, no green tick (§7) */
.eyebrow{display:block;font-family:var(--cg-font);font-weight:500;font-size:var(--cg-fs-label);
  letter-spacing:var(--cg-track-label-wide);text-transform:uppercase;color:var(--cg-grey-700)}
.cg-soil .eyebrow{color:var(--cg-dark-soft)}
.cg-bed  .eyebrow{color:var(--cg-bed-soft)}
.sec__rail .eyebrow + .rail-meta{margin-top:clamp(52px,6.5vw,76px);font-size:var(--cg-fs-small);color:var(--cg-grey-700);
  letter-spacing:var(--cg-track-label-micro);text-transform:uppercase;line-height:1.7}
.cg-soil .sec__rail .rail-meta{color:var(--cg-dark-soft)}

/* section heading block inside the body column */
.sec-head{max-width:46rem}
.sec-head .cg-h1,.sec-head .cg-h2{margin-top:0;color:var(--cg-ink);line-height:1.0}
/* eyebrow → heading gap: matches the spacing used in the Vorgehen pin column */
.sec-head .eyebrow + .cg-h1,
.sec-head .eyebrow + .cg-h2{margin-top:12px}
.sec-head .cg-lede{margin-top:20px;max-width:38rem;
  font-size:clamp(18px,1.5vw,21px);color:var(--cg-ink-soft);line-height:1.5}
.cg-soil .sec-head .cg-h1,.cg-soil .sec-head .cg-h2{color:var(--cg-dark-ink)}
.cg-bed  .sec-head .cg-h1,.cg-bed  .sec-head .cg-h2{color:var(--cg-bed-ink)}
/* section titles sit at a confident editorial scale, not billboard (within the type envelope) */
.cg-h1{font-family:var(--cg-font);font-weight:500;font-size:clamp(34px,4.3vw,50px);
  letter-spacing:var(--cg-track-h1)}
.cg-h2{font-family:var(--cg-font);font-weight:500;font-size:var(--cg-fs-h2);
  letter-spacing:var(--cg-track-h2);line-height:1.05}
.cg-h3{font-family:var(--cg-font);font-weight:500;font-size:var(--cg-fs-h3);
  letter-spacing:var(--cg-track-h3);line-height:1.2}

/* ─── headline highlight — laurel "marker" wash (EXPERIMENT · owner-requested) ──
   A lightly-coloured swipe behind big headline words, the way a highlighter sits
   behind text. LIGHT SURFACES ONLY: this is the one accent used AS an accent
   (§4.2); it must never ride a dark / bed / soil fill (green-on-dark is forbidden,
   so .hl is barred from .cg-soil / .cg-bed headings below). Two takes to choose:
   THREE takes to choose between (laurel #4E6C37 == --cg-green, at low alpha):
     .hl         skewed marker — angled chisel-tip ends (Makeev's 3 hard-stops),
                 a hair of tilt; reads as a real swipe, not a <mark> box.
     .hl--round  uneven rounded corners ("pen held imperfectly"), flat fill.
     .hl--band   clean straight band, even slight overshoot — Cultivated Precision.
   All sit behind ~the lower 70% so the cap-tops breathe, and use
   box-decoration-break:clone so the swipe re-draws per line when a headline wraps.
   ⚠ BRAND TENSION — flag, don't silently keep: tokens.css calls the accent "no
   tint, no 2nd shade" and §8 bans gradients/glow. A translucent laurel wash is a
   soft tint of the accent (the .hl skew uses HARD-STOP gradients purely as a
   geometric cut for the angled ends, not as a colour blend). Keep ONLY as an
   owner-approved custom usage, or amend BRAND.md first (see BRAND.md change control). */
.hl,.hl--round,.hl--band{
  -webkit-box-decoration-break:clone;box-decoration-break:clone;color:inherit;
  --hl-c:rgba(78,108,55,.24);   /* THE laurel at low alpha — no new hue */
}
/* A · skewed marker: fixed-width angled ends + a stretchy solid middle, so the
   chisel-tip slant stays constant at any text length. */
.hl{
  --skew:.34em;
  padding:.02em .12em .08em;margin:0 -.06em;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(to top right, transparent 48%, var(--hl-c) 48.6%),
    linear-gradient(var(--hl-c),var(--hl-c)),
    linear-gradient(to bottom left, transparent 48%, var(--hl-c) 48.6%);
  /* middle overshoots the ends by 1px to butt them with no sub-pixel gap */
  background-size:var(--skew) .78em, calc(100% - var(--skew)*2 + 1px) .78em, var(--skew) .78em;
  background-position:0% 82%, 50% 82%, 100% 82%;
}
/* B · uneven rounded corners — flat fill, pen-held-imperfectly */
.hl--round{
  background:var(--hl-c);
  border-radius:.85em .4em .7em .5em / 1.1em .6em 1em .7em;
  padding:.06em .26em .1em;margin:0 -.16em;
}
/* C · clean straight band, low, even slight overshoot */
.hl--band{
  background-repeat:no-repeat;
  background-image:linear-gradient(var(--hl-c),var(--hl-c));
  background-size:100% .74em;background-position:0 90%;
  padding:.02em .14em .08em;margin:0 -.08em;
}
/* never on the inverted grounds — green-on-dark is forbidden (§4.2) */
.cg-soil .hl,.cg-soil .hl--round,.cg-soil .hl--band,
.cg-bed .hl,.cg-bed .hl--round,.cg-bed .hl--band{background:none;padding:0;margin:0}

/* CTA group + sublabel */
.cta-group{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:30px}
.cta-sub{font-size:var(--cg-fs-small);color:var(--cg-grey-700);letter-spacing:.01em}
.cta-group .cta-sub{flex-basis:100%;margin-top:-2px}

/* buttons — keep the component's flood-to-ink, add only a tactile press dip on
   click (§9: hovers stay flood-to-ink, no popping shadows, no second colour). */
.cg-btn{transition:background var(--cg-dur) var(--cg-ease),color var(--cg-dur) var(--cg-ease),
  border-color var(--cg-dur) var(--cg-ease),transform var(--cg-dur-fast) var(--cg-ease-mech)}
.cg-btn:active{transform:translateY(1px)}

/* ─── header ────────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.72);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  transition:background var(--cg-dur) var(--cg-ease)}
.site-header::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--cg-rule);
  transform:scaleX(0);transform-origin:left;transition:transform var(--cg-dur-slow) var(--cg-ease)}
.site-header.is-scrolled{background:rgba(255,255,255,.9)}
.site-header.is-scrolled::after{transform:scaleX(1)}
.site-header__inner{max-width:var(--cg-wrap);margin-inline:auto;padding-inline:var(--cg-gutter);
  height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header .lk{font-size:25px;padding:0}
.site-header__nav{display:flex;align-items:center;gap:30px}
.nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.nav a{position:relative;font-weight:500;font-size:var(--cg-fs-label);
  letter-spacing:var(--cg-track-label);text-transform:uppercase;color:var(--cg-grey-700);
  padding:7px 1px;transition:color var(--cg-dur) var(--cg-ease)}
/* the underline DRAWS in from the left, then RETRACTS to the right on leave
   (origin swaps with the state) — a deliberate wipe both ways, not a fade */
.nav a::after{content:"";position:absolute;inset:auto 0 2px;height:1px;background:var(--cg-ink);
  transform:scaleX(0);transform-origin:right;transition:transform var(--cg-dur) var(--cg-ease)}
.nav a:hover,.nav a:focus-visible{color:var(--cg-ink)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.site-header .cg-btn{padding:10px 18px;font-size:13px}

/* header floating over a dark soil / laurel bed section: invert to paper-white (§4.2) */
.site-header.over-dark{background:rgba(21,23,26,.5)}
.site-header.over-dark.is-scrolled{background:rgba(21,23,26,.74)}
.site-header.over-dark::after{background:var(--cg-dark-line)}
.site-header.over-dark .nav a{color:var(--cg-dark-soft)}
.site-header.over-dark .nav a:hover,.site-header.over-dark .nav a:focus-visible{color:var(--cg-dark-ink)}
.site-header.over-dark .nav a::after{background:var(--cg-dark-ink)}
.site-header.over-dark .nav-toggle{color:var(--cg-dark-ink)}
.site-header.over-dark .lk{align-items:baseline}
.site-header.over-dark .lk .cg-m-tile{display:none}
.site-header.over-dark .lk .cg-m-open{display:block}
.site-header.over-dark .lk__mark{color:var(--cg-dark-ink)}
.site-header.over-dark .lk__cloud{color:var(--cg-dark-ink)}
.site-header.over-dark .lk__garden{color:var(--cg-grey-300)}
.site-header.over-dark .cg-btn--primary{background:var(--cg-dark-ink);color:var(--cg-dark);border-color:var(--cg-dark-ink)}
.site-header.over-dark .cg-btn--primary:hover{background:#fff;border-color:#fff}
/* over the hero band the bar is SOLID near-black, not the translucent veil (owner: "header black") */
.site-header.over-hero{background:var(--cg-dark)}
.site-header.over-hero.is-scrolled{background:var(--cg-dark)}
.site-header.over-hero .nav a{color:var(--cg-dark-soft)}
.site-header.over-hero .nav a:hover,.site-header.over-hero .nav a:focus-visible{color:var(--cg-dark-ink)}

/* hamburger — only when JS is on AND viewport is narrow */
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;
  margin-right:-9px;color:var(--cg-ink)}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle .x{display:none}
.nav-toggle[aria-expanded="true"] .bars{display:none}
.nav-toggle[aria-expanded="true"] .x{display:block}

/* ─── language switch — segmented DE/EN control (header + drawer) ──────────── */
.lang-switch{display:inline-flex;align-items:center;gap:2px;
  border:1px solid var(--cg-rule);border-radius:999px;padding:2px}
.lang-switch__opt{font-weight:500;font-size:12px;letter-spacing:var(--cg-track-label);
  text-transform:uppercase;color:var(--cg-grey-700);line-height:1;
  padding:6px 11px;border-radius:999px;
  transition:color var(--cg-dur) var(--cg-ease),background var(--cg-dur) var(--cg-ease)}
.lang-switch__opt:hover,.lang-switch__opt:focus-visible{color:var(--cg-ink)}
.lang-switch__opt[aria-current]{background:var(--cg-ink);color:var(--cg-paper);cursor:default}
/* inverted header states (over the dark hero band + soil / laurel-bed sections) */
.site-header.over-dark .lang-switch,.site-header.over-hero .lang-switch{border-color:var(--cg-dark-line)}
.site-header.over-dark .lang-switch__opt,.site-header.over-hero .lang-switch__opt{color:var(--cg-dark-soft)}
.site-header.over-dark .lang-switch__opt:hover,.site-header.over-hero .lang-switch__opt:hover,
.site-header.over-dark .lang-switch__opt:focus-visible,.site-header.over-hero .lang-switch__opt:focus-visible{color:var(--cg-dark-ink)}
.site-header.over-dark .lang-switch__opt[aria-current],.site-header.over-hero .lang-switch__opt[aria-current]{background:var(--cg-dark-ink);color:var(--cg-dark)}
/* paper-white focus ring over the dark header (the global green ring is only re-themed on cg-soil/cg-bed) */
.site-header.over-dark .lang-switch__opt:focus-visible,.site-header.over-hero .lang-switch__opt:focus-visible{outline-color:var(--cg-dark-ink)}
/* drawer variant: sits below the CTA, aligned left */
.drawer__lang{margin-top:24px;align-self:flex-start}

/* drawer (mobile) */
.drawer{position:fixed;inset:0;z-index:200;display:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(21,23,26,.34);opacity:0;
  transition:opacity var(--cg-dur) var(--cg-ease)}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(82vw,360px);
  background:var(--cg-paper);box-shadow:var(--cg-shadow-2);padding:88px var(--cg-gutter) 40px;
  display:flex;flex-direction:column;gap:8px;transform:translateX(100%);
  transition:transform var(--cg-dur-slow) var(--cg-ease)}
.drawer.is-open{display:block}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer a.drawer__link{font-weight:500;font-size:16px;letter-spacing:var(--cg-track-label);
  text-transform:uppercase;color:var(--cg-ink-soft);padding:15px 0;border-bottom:1px solid var(--cg-rule)}
.drawer a.drawer__link:hover{color:var(--cg-ink)}
.drawer .cg-btn{margin-top:24px;justify-content:center}

/* ─── back-to-top — a quiet disc that floats up once you've scrolled past the
   first screen (app.js toggles .is-visible; it owns the scroll to #top). Monochrome,
   never the accent. It INVERTS like the header: an ink disc on the light spread,
   flipping to a paper disc while it floats over a dark soil / bed section (.on-dark),
   so it stays crisp on every ground without ever putting green on a dark fill (§4.2).
   Depth = the §8 cool shadow + space; the hover is the signature flood. */
.to-top{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:120;
  width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--cg-ink);color:var(--cg-paper);border:1px solid var(--cg-ink);
  box-shadow:var(--cg-shadow-2);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--cg-dur) var(--cg-ease),transform var(--cg-dur) var(--cg-ease),
    background var(--cg-dur) var(--cg-ease),color var(--cg-dur) var(--cg-ease),
    border-color var(--cg-dur) var(--cg-ease),visibility 0s linear var(--cg-dur)}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--cg-dur) var(--cg-ease),transform var(--cg-dur) var(--cg-ease),
    background var(--cg-dur) var(--cg-ease),color var(--cg-dur) var(--cg-ease),
    border-color var(--cg-dur) var(--cg-ease)}
.to-top svg{width:18px;height:18px}
.to-top .arw-up{transition:transform var(--cg-dur) var(--cg-ease)}
.to-top:hover .arw-up{transform:translateY(-2px)}
/* hover on the light spread: the signature flood — the ink disc flips to paper */
.to-top:hover{background:var(--cg-paper);color:var(--cg-ink);border-color:var(--cg-rule-strong)}
/* over a dark soil / bed section: invert to a paper disc carrying an ink arrow */
.to-top.on-dark{background:var(--cg-paper);color:var(--cg-ink);border-color:var(--cg-paper)}
.to-top.on-dark:hover{border-color:var(--cg-ink)}
.to-top.on-dark:focus-visible{outline-color:var(--cg-bed-ink)}   /* paper-white ring — no green on a dark ground */

/* image plate picture sizing — owner directive: natural colour, NOT grayscale
   (overrides the kit's §6.1 plate-grayscale). Varied aspect per placement. */
.cg-plate img{aspect-ratio:3/2;object-fit:cover;filter:none}
.cg-plate figcaption{color:var(--cg-grey-700)}      /* AA at 11px */
.plate--portrait img{aspect-ratio:2/3}

/* ═══ HERO — full-bleed atmosphere image, copy overlaid, convex "bauchig" foot ═══
   Website-specific custom usage (owner-directed): a background-image header band with
   a curved bottom. Departs from §6.5 (plate imagery) and the no-organic-shape depth
   rule; light copy is seated on a UNIFORM cool scrim (no gradient). The band tucks up
   under the sticky nav, which inverts to over-dark via app.js. The bellied foot is a
   single elliptical bottom radius (50% horizontal → the two corners meet at centre). */
.hero--media{position:relative;isolation:isolate;
  --header-h:74px;--belly:clamp(150px,19vw,300px);--bleed:13%;
  width:calc(100% + 2*var(--bleed));margin-left:calc(-1*var(--bleed));   /* bleed past the
     viewport so the ellipse's steep "horns" fall off-screen → the visible foot is one even,
     continuous round with no cut-off corners at the sides */
  margin-top:calc(-1 * var(--header-h));
  padding-top:calc(var(--header-h) + clamp(48px,8vh,104px));
  padding-bottom:clamp(150px,21vh,240px);
  background:var(--cg-dark);overflow:hidden;
  border-bottom-left-radius:50% var(--belly);
  border-bottom-right-radius:50% var(--belly)}
.hero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 40%;background-repeat:no-repeat}
.hero__bg img{display:none}
.hero__bg::after{content:"";position:absolute;inset:0;background:rgba(19,21,24,.52)}
.hero__inner{position:relative;z-index:1}
.hero--media .hero__inner{max-width:min(var(--cg-wrap),100vw)}   /* keep copy on the real page
     width even though the band itself bleeds wider */
.hero__copy{max-width:48rem}
.hero--media .eyebrow{color:var(--cg-dark-soft)}
.hero__title{font-family:var(--cg-font);font-weight:500;font-size:var(--cg-fs-h1);
  letter-spacing:var(--cg-track-h1);line-height:1.0;color:var(--cg-dark-ink);
  max-width:18ch;margin-top:22px;text-wrap:balance}
.hero__lead-in{margin-top:22px;font-size:clamp(18px,1.5vw,21px);color:var(--cg-dark-soft);
  line-height:1.5;max-width:38ch}
/* the CTAs invert on the dark image. Primary mirrors the bed/Kontakt button: a
   paper-white fill carrying LAUREL TEXT (green-on-light = compliant; the one accent
   never rides the dark fill itself, §4.2). Ghost gets a light hairline + label. */
.hero--media .cg-btn--primary{background:var(--cg-bed-ink);color:var(--cg-green);border-color:var(--cg-bed-ink)}
.hero--media .cg-btn--primary:hover{background:#fff;border-color:#fff}
.hero--media .cg-btn--ghost{color:var(--cg-dark-ink);border-color:rgba(243,244,243,.42)}
.hero--media .cg-btn--ghost:hover{border-color:var(--cg-dark-ink);background:rgba(243,244,243,.08)}
.hero--media .cta-sub{color:var(--cg-dark-soft)}

/* ══ SCROLL-VIDEO HERO ══════════════════════════════════════════════════════
   The section is tall (500vh) so scroll provides scrub range.
   .hero__pin is position:sticky so the visual stays viewport-fixed.
   JS controls video.currentTime and phase label visibility.
   JS-off fallback: video shows first frame; copy is always visible. */
.hero--scroll{position:relative;height:500vh}
.hero--scroll + .section > .wrap{border-top:0}

.hero__pin{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;
  background:var(--cg-dark);isolation:isolate}

.hero__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;z-index:0}

.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(22,24,26,.38)}

/* ── phase labels ── */
.hero__stage{position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:flex-end;pointer-events:none}

.hero__phase{position:absolute;right:clamp(22px,5vw,48px);
  font-family:var(--cg-font);font-weight:500;
  font-size:clamp(3.5rem,10vw,8.5rem);
  letter-spacing:var(--cg-track-h1);line-height:1;
  color:var(--cg-dark-ink);
  opacity:0;transform:translateY(0.12em);
  transition:opacity .45s var(--cg-ease),transform .45s var(--cg-ease);
  white-space:nowrap;text-align:right;pointer-events:none}

.hero__phase.is-active{opacity:1;transform:none}

/* ── final copy ── */
.hero--scroll .hero__inner{position:absolute;inset:0;z-index:3;
  display:flex;align-items:flex-end;
  padding-bottom:clamp(44px,6vh,80px)}

.hero__copy--scroll{max-width:48rem}
/* always visible without JS; JS overrides to hide until progress threshold */
.js .hero__copy--scroll{opacity:0;transform:translateY(1.2rem);
  transition:opacity .65s var(--cg-ease),transform .65s var(--cg-ease)}
.js .hero__copy--scroll.is-active{opacity:1;transform:none}

/* button + text colours on dark video ground */
.hero--scroll .eyebrow{color:var(--cg-dark-soft)}
.hero--scroll .hero__title{color:var(--cg-dark-ink)}
.hero--scroll .hero__lead-in{color:var(--cg-dark-soft)}
.hero--scroll .cg-btn--primary{background:var(--cg-bed-ink);color:var(--cg-green);border-color:var(--cg-bed-ink)}
.hero--scroll .cg-btn--primary:hover{background:#fff;border-color:#fff}
.hero--scroll .cg-btn--ghost{color:var(--cg-dark-ink);border-color:rgba(243,244,243,.42)}
.hero--scroll .cg-btn--ghost:hover{border-color:var(--cg-dark-ink);background:rgba(243,244,243,.08)}
.hero--scroll .cta-sub{color:var(--cg-dark-soft)}

@media (prefers-reduced-motion:reduce){
  .hero--scroll{height:100vh}
  .hero__phase{display:none}
  .js .hero__copy--scroll{opacity:1!important;transform:none!important}
}

/* ══ VID-REEL — scroll-video section, below Leistungen ═════════════════════
   Same sticky-scrub pattern as .hero--scroll. 400vh → scrub range.
   .vid-reel__pin is sticky; JS drives video.currentTime + phase labels.
   JS-off fallback: video at first frame, copy always visible. */
.vid-reel{position:relative;height:400vh}

.vid-reel__pin{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;
  background:var(--cg-dark);isolation:isolate}

.vid-reel__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;z-index:0}

.vid-reel__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(22,24,26,.40)}

/* ── phase labels (centred, large, same idiom as .hero__phase) ── */
.vid-reel__stage{position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:flex-end;pointer-events:none}

.vid-reel__phase{position:absolute;right:clamp(22px,5vw,48px);
  font-family:var(--cg-font);font-weight:500;
  font-size:clamp(2.8rem,8.5vw,7rem);
  letter-spacing:var(--cg-track-h1);line-height:1;
  color:var(--cg-dark-ink);
  opacity:0;transform:translateY(0.12em);
  transition:opacity .45s var(--cg-ease),transform .45s var(--cg-ease);
  white-space:nowrap;text-align:right;pointer-events:none}

.vid-reel__phase.is-active{opacity:1;transform:none}

/* allow phase labels to line-break; right edge tracks the wrap container.
   max-width is 50% of the viewport minus that same right inset, so the box
   is truly confined to the right half of the frame (left edge never passes
   the horizontal centre) instead of 50% measured from the viewport edge,
   which let long labels creep past centre and overlap left-side media. */
.vid-reel--half .vid-reel__phase{white-space:normal;
  --vid-half-inset:max(var(--cg-gutter),calc((100% - var(--cg-wrap)) / 2 + var(--cg-gutter)));
  right:var(--vid-half-inset);
  max-width:calc(50% - var(--vid-half-inset))}

/* ── final copy (bottom-right) ── */
.vid-reel__inner{position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:flex-end;
  padding-bottom:0}

.vid-reel__copy{max-width:34rem;text-align:right}
.js .vid-reel__copy{opacity:0;transform:translateY(1.2rem);
  transition:opacity .65s var(--cg-ease),transform .65s var(--cg-ease)}
.js .vid-reel__copy.is-active{opacity:1;transform:none}

.vid-reel__title{font-size:clamp(22px,2.8vw,42px);font-weight:500;
  letter-spacing:-.022em;line-height:1.12;color:var(--cg-dark-ink);margin-top:10px;overflow-wrap:break-word}
.vid-reel .eyebrow{color:var(--cg-dark-soft)}
.vid-reel .cta-group{margin-top:28px;justify-content:flex-end}
.vid-reel .cg-btn--primary{background:var(--cg-dark-2);color:var(--cg-dark-ink);
  border-color:rgba(243,244,243,.28)}
.vid-reel .cg-btn--primary:hover{background:#fff;border-color:#fff;color:var(--cg-ink)}

@media(prefers-reduced-motion:reduce){
  .vid-reel{height:100vh}
  .vid-reel__phase{display:none}
  .js .vid-reel__copy{opacity:1!important;transform:none!important}
}
@media(max-width:768px){
  .vid-reel{height:auto}
  .vid-reel__pin{position:static;height:auto;min-height:0;padding:clamp(64px,10vw,96px) 0}
  .vid-reel__video,.vid-reel__scrim,.vid-reel__stage{display:none}
  .vid-reel__inner{position:static;padding:0}
  .vid-reel__copy{opacity:1!important;transform:none!important;max-width:none;text-align:left}
  .vid-reel .cta-group{justify-content:flex-start}
  .vid-reel__title{font-size:clamp(26px,7vw,36px)}
}

/* ═══ PRINZIPIEN — three enriched hairline-register pillars (not cards) ════ */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(34px,4vw,52px);
  border-top:1px solid var(--cg-rule)}
.pillar{position:relative;padding:clamp(26px,2.6vw,38px) clamp(22px,2vw,32px);border-left:1px solid var(--cg-rule)}
.pillar:first-child{border-left:0;padding-left:0}
.pillar > *{position:relative;z-index:1}
/* the hover surface is a soft rounded PLATE that floats with even breathing room
   around the content — never a hard rectangle hugging the text. The first pillar
   sits flush-left, so its plate reaches a touch into the gutter to stay even. */
.pillar::after{content:"";position:absolute;z-index:0;inset:12px 10px;border-radius:var(--cg-radius);
  background:var(--cg-grey-50);opacity:0;transition:opacity var(--cg-dur) var(--cg-ease)}
.pillar:first-child::after{left:-14px}
.pillar:hover::after{opacity:1}
.pillar h3{color:var(--cg-ink);font-weight:500}
.pillar h3::after{content:"";display:block;width:26px;height:1px;background:var(--cg-grey-300);margin-top:16px}
.pillar p{margin-top:16px;color:var(--cg-ink-soft);font-size:var(--cg-fs-body);line-height:1.6}

/* ═══ LEISTUNGS-ATLAS — the offering as registered "specimen plates" ═══
   The former flat register, reworked into framed plates so the core section
   carries the same craft as its neighbours. Each plate: a hairline frame + the
   §7 corner regmarks (.cg-regmarks), with the Ergebnis pinned at the foot as the
   harvest. Depth = hairline + cool shadow + space (§8) — no gradient, no glow.
   Monochrome at REST; the laurel is the HOVER event (regmarks + sprout go green,
   §4.2 accent-on-light), never a second hue. Terms verbatim from portfolio.md. */
/* a quiet group label (hairline rule) introduces each set — "Individuelles
   Angebot" (the four consulting plates) and "Feste Formate" (the two fixed-price). */
.lx-grouplabel{margin-top:clamp(34px,4vw,52px);display:flex;align-items:center;gap:16px;
  font-weight:500;font-size:var(--cg-fs-label);letter-spacing:var(--cg-track-label);
  text-transform:uppercase;color:var(--cg-grey-700)}
.lx-grouplabel::after{content:"";flex:1;height:1px;background:var(--cg-rule)}
.lx{margin-top:clamp(13px,1.5vw,18px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.5vw,20px)}
.lx-card{position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,40px);background:var(--cg-paper);
  border:1px solid var(--cg-rule);border-radius:var(--cg-radius);box-shadow:var(--cg-shadow-1);
  transition:transform var(--cg-dur) var(--cg-ease),box-shadow var(--cg-dur) var(--cg-ease),
    border-color var(--cg-dur) var(--cg-ease)}
.lx-card:hover{transform:translateY(-3px);box-shadow:var(--cg-shadow-2);border-color:var(--cg-rule-strong)}
/* the corner regmarks sit just inside the frame; quiet grey at rest, they light
   to laurel as the hover event — the one living signal, the colour as the event */
.lx-card>.cg-regmarks{inset:13px}
.lx-card .cg-regmarks i{transition:color var(--cg-dur) var(--cg-ease)}
.lx-card:hover .cg-regmarks i{color:var(--cg-green)}

.lx-card__title{color:var(--cg-ink);font-weight:500;font-size:var(--cg-fs-h3);
  letter-spacing:var(--cg-track-h3);line-height:1.2}
.lx-card__desc{margin-top:14px;margin-bottom:clamp(20px,2.4vw,28px);color:var(--cg-ink-soft);font-size:var(--cg-fs-body);line-height:1.58}

/* Bausteine — small hairline "specimen" chips (terms verbatim from portfolio.md) */
.lx-card__parts{margin-top:clamp(16px,1.8vw,22px);margin-bottom:clamp(16px,2vw,24px);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lx-card__parts-label{margin-right:2px;font-weight:500;font-size:var(--cg-fs-label);
  letter-spacing:var(--cg-track-label-micro);text-transform:uppercase;color:var(--cg-grey-500)}
.lx-chip{font-size:var(--cg-fs-small);color:var(--cg-grey-700);letter-spacing:.01em;
  padding:4px 10px;border:1px solid var(--cg-rule);border-radius:var(--cg-radius);white-space:nowrap;
  transition:border-color var(--cg-dur) var(--cg-ease)}
.lx-card:hover .lx-chip{border-color:var(--cg-rule-strong)}

/* the Ergebnis — the plate's harvest, pinned to the foot (margin-top:auto aligns
   it across a row) and set off by a hairline. The sprout + label read green on
   hover; the result text itself stays ink-soft. */
.lx-card__yield{margin-top:auto;padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid var(--cg-grey-150);color:var(--cg-ink-soft);
  font-size:var(--cg-fs-body);line-height:1.58}
/* key sits on its own line so its small label size never fights the body text baseline */
.lx-card__yield-key{display:flex;align-items:center;gap:7px;margin-bottom:8px;
  font-weight:500;font-size:var(--cg-fs-label);letter-spacing:var(--cg-track-label-micro);
  text-transform:uppercase;color:var(--cg-grey-700);white-space:nowrap;
  transition:color var(--cg-dur) var(--cg-ease)}
.lx-card:hover .lx-card__yield-key{color:var(--cg-green)}
.lx-sprout{width:15px;height:15px;color:var(--cg-grey-400);transition:color var(--cg-dur) var(--cg-ease)}
.lx-card:hover .lx-sprout{color:var(--cg-green)}

/* the two fixed-price formats — same plate family, a price-led horizontal interior */
.lx-formate{margin-top:clamp(13px,1.5vw,18px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.5vw,20px)}
.lx-card--format{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;
  padding-block:clamp(22px,2.2vw,30px)}
.lx-format__main{min-width:0}
.lx-card--format .lx-card__desc{margin-top:7px}
.lx-format__price{flex:none;text-align:right;white-space:nowrap}
.lx-format__amount{display:block;font-weight:500;font-size:clamp(24px,2.4vw,30px);color:var(--cg-ink);
  letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums lining-nums}
.lx-format__vat{display:block;margin-top:6px;font-size:var(--cg-fs-small);color:var(--cg-grey-700)}

/* Festpreis-Garantie: a quiet trust line under the atlas, before the CTA.
   Term in ink, the rest soft — mirrors the Ergebnis label idiom. */
.lx-note{margin-top:clamp(24px,2.6vw,34px);font-size:var(--cg-fs-body);color:var(--cg-ink-soft);
  line-height:1.58;max-width:46rem}
.lx-note b{color:var(--cg-ink);font-weight:500}

/* mid-page CTA: a quiet hairline text link, so the scroll tightens toward the
   two full buttons (hero + the laurel-bed Kontakt). Still repeats the CTA. */
.cta-line{margin-top:clamp(32px,3.6vw,48px);font-size:clamp(17px,1.4vw,20px);color:var(--cg-grey-700);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.cta-link{display:inline-flex;align-items:center;gap:.5em;font-weight:500;color:var(--cg-ink);
  border-bottom:1px solid var(--cg-grey-300);padding-bottom:2px;
  transition:border-color var(--cg-dur) var(--cg-ease)}
.cta-link:hover,.cta-link:focus-visible{border-color:var(--cg-ink)}
.cta-link .arw{width:15px;height:15px;transition:transform var(--cg-dur) var(--cg-ease)}
.cta-link:hover .arw,.cta-link:focus-visible .arw{transform:translateX(3px)}

/* ═══ "DAS ÜBERNEHMEN WIR" — concrete use-case showcase ═══════════════════
   A card carousel: cards on a horizontally scroll-snapping track that bleeds off
   the right edge. The high-level Leistungen remain a hairline register (§10.1);
   this is an additional capabilities deck.

   ⚠ OWNER-APPROVED CUSTOM USAGE — DEPARTS FROM §4.1 ("one accent only").
   The owner directed an expanded, multi-colour card palette here (see the
   reference brief). It is scoped to THIS deck only: the header, hero, register,
   Kontakt bed and footer stay monochrome + laurel. The palette is deliberately
   muted/editorial (not primaries), tuned to sit with the laurel and the cool
   greys, with the laurel itself kept as one of the six surfaces. Depth still
   comes from cool shadows + space; no gradients, no glow. Every card meets
   WCAG-AA. To make this permanent, amend BRAND.md §4 (Enforcement & change
   control) rather than widening the rule silently elsewhere. */
.uc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.uc-head .sec-head{margin:0}

/* prev / next — shown only with JS; otherwise the track scrolls by touch/trackpad */
.uc-controls{display:none}
.js .uc-controls{display:flex;gap:10px;flex:none}
.uc-nav{width:44px;height:44px;border-radius:50%;border:1px solid var(--cg-rule-strong);
  color:var(--cg-ink);display:inline-flex;align-items:center;justify-content:center;
  transition:border-color var(--cg-dur) var(--cg-ease),background var(--cg-dur) var(--cg-ease),
    color var(--cg-dur) var(--cg-ease),opacity var(--cg-dur) var(--cg-ease)}
.uc-nav:hover{border-color:var(--cg-ink);background:var(--cg-grey-50)}
.uc-nav:disabled{opacity:.32;cursor:default;border-color:var(--cg-rule);background:none}
.uc-nav svg{width:18px;height:18px}

/* the track: aligns its first card to the wrap's content-left, bleeds to the
   right viewport edge so the next card peeks (the scroll affordance). body has
   overflow-x:hidden, so the bleed never pushes the page sideways. */
.uc-track{
  --uc-edge:max((100vw - var(--cg-wrap)) / 2, 0px);
  display:flex;gap:clamp(16px,1.6vw,22px);
  margin-top:clamp(30px,3.4vw,44px);
  margin-right:calc(-1 * (var(--uc-edge) + var(--cg-gutter)));
  padding-right:calc(var(--uc-edge) + var(--cg-gutter));   /* end-scroll inset mirrors the left */
  padding-bottom:8px;                                       /* room so the card lift-shadow isn't clipped */
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.uc-track::-webkit-scrollbar{display:none}
.uc-item{flex:0 0 clamp(266px,27vw,328px);scroll-snap-align:start;display:flex}

/* card — flat colour fill + cool shadow at rest, lifts on hover/focus. Small
   radius (kept crisp per §8). Whole card is the link; the arrow is the affordance.
   Every colour is driven by four per-card custom properties so the scheme classes
   below stay one-liners and contrast is owned in one place. */
.uc-card{
  --uc-bg:var(--cg-paper);    /* card fill                                   */
  --uc-fg:var(--cg-ink);      /* title · icon · arrow (strong)               */
  --uc-fg-2:var(--cg-ink-soft); /* desc · tags (secondary, AA)              */
  --uc-line:rgba(22,24,26,.22); /* arrow-disc hairline                       */
  --uc-ring:var(--cg-green);  /* focus ring                                  */
  flex:1;display:flex;flex-direction:column;min-height:clamp(300px,32vw,366px);
  padding:clamp(22px,2vw,30px);background:var(--uc-bg);color:var(--uc-fg);
  border:1px solid transparent;border-radius:var(--cg-radius);box-shadow:var(--cg-shadow-1);
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
  transition:transform var(--cg-dur) var(--cg-ease),box-shadow var(--cg-dur) var(--cg-ease)}
.uc-card:hover,.uc-card:focus-visible{transform:translateY(-4px);box-shadow:var(--cg-shadow-2)}
.uc-card:focus-visible{outline:2px solid var(--uc-ring);outline-offset:3px}
.uc-card__icon{color:var(--uc-fg)}
.uc-card__icon svg{width:30px;height:30px;display:block}
.uc-card__title{margin-top:clamp(18px,2vw,26px);font-weight:500;font-size:var(--cg-fs-h3);
  letter-spacing:var(--cg-track-h3);line-height:1.2;color:var(--uc-fg)}
.uc-card__desc{margin-top:11px;color:var(--uc-fg-2);font-size:var(--cg-fs-body);line-height:1.55}
.uc-card__tags{margin-top:16px;font-size:var(--cg-fs-small);color:var(--uc-fg-2);letter-spacing:.02em}
/* the arrow sits at the foot (margin-top:auto), a quiet hairline disc */
.uc-card__go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;
  justify-content:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--uc-line);color:var(--uc-fg);
  transition:border-color var(--cg-dur) var(--cg-ease),transform var(--cg-dur) var(--cg-ease)}
.uc-card__go svg{width:15px;height:15px}
.uc-card:hover .uc-card__go,.uc-card:focus-visible .uc-card__go{border-color:var(--uc-fg);transform:translateX(4px)}

/* the expanded surface palette (owner-approved custom usage, departs from §4.1).
   Muted/editorial tones, 3 light (ink text) + 3 dark (paper text), all WCAG-AA,
   the laurel kept as one of the six. Alternated light/dark in the markup. */
.uc-card--sand  {--uc-bg:#e6ddcb;--uc-fg:#16181a;--uc-fg-2:#4e524b;--uc-line:rgba(22,24,26,.22)}
.uc-card--sky   {--uc-bg:#c3d2db;--uc-fg:#16181a;--uc-fg-2:#43484c;--uc-line:rgba(22,24,26,.24)}
.uc-card--sage  {--uc-bg:#cfd6c6;--uc-fg:#16181a;--uc-fg-2:#474c43;--uc-line:rgba(22,24,26,.22)}
.uc-card--laurel{--uc-bg:var(--cg-green);--uc-fg:#f3f4f3;--uc-fg-2:#e9ece5;--uc-line:rgba(243,244,243,.34);--uc-ring:var(--cg-bed-ink)}
.uc-card--petrol{--uc-bg:#2c4a4e;--uc-fg:#f3f4f3;--uc-fg-2:#d8e0df;--uc-line:rgba(243,244,243,.32);--uc-ring:#f3f4f3}
.uc-card--bark  {--uc-bg:#4a4636;--uc-fg:#f3f4f3;--uc-fg-2:#e3e2d6;--uc-line:rgba(243,244,243,.32);--uc-ring:#f3f4f3}

/* ═══ WIDE BAND PLATE — one calm horizon between Leistungen and Warum ═══
   A framed plate (NOT a new full-bleed atmosphere image, §6.1): hairline +
   regmarks + caption, letterboxed wide. */
.band{padding-block:clamp(40px,4.4vw,64px)}
.band .cg-plate{box-shadow:var(--cg-shadow-1)}
.band-plate img{aspect-ratio:2.5/1}

/* ═══ generic split: copy beside a plate (Studio) ══════════════════════════ */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(20px,2.6vw,44px);align-items:center}
.split__copy .cg-body{margin-top:20px;color:var(--cg-ink-soft);max-width:38rem}
.split__copy .cg-body + .cg-body{margin-top:16px}

/* soil-surface type colours (used by Vorgehen section + footer) */
.cg-soil .cg-body{color:var(--cg-dark-soft)}
.cg-soil .cg-plate figcaption{color:var(--cg-grey-700)}

/* ═══ VORGEHEN — sticky-left / scrolling-right methodology section ══════════
   Left column (heading + body) pins in the viewport while the right column
   scrolls through four AI-powered process steps. position:sticky on .vg-pin;
   JS-off / reduced-motion: normal stacked flow (the 900px breakpoint resets). */
.vg-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(40px,7vw,96px);align-items:start}
.vg-pin{position:sticky;top:calc(74px + clamp(36px,5vw,64px))}
.vg-pin .eyebrow{color:var(--cg-dark-soft)}
.vg-pin .cg-h1{color:var(--cg-dark-ink);margin-top:14px}
.vg-pin .cg-body{margin-top:20px;color:var(--cg-dark-soft);line-height:1.62;max-width:34rem}
.vg-steps{border-top:1px solid var(--cg-dark-line)}
.vg-step{padding-block:clamp(32px,4.4vw,56px);border-bottom:1px solid var(--cg-dark-line)}
.vg-step__title{font-family:var(--cg-font);font-weight:500;
  font-size:clamp(20px,2.3vw,28px);letter-spacing:var(--cg-track-h3);
  line-height:1.2;color:var(--cg-dark-ink)}
.vg-step__body{margin-top:clamp(13px,1.5vw,18px);color:var(--cg-dark-soft);
  font-size:var(--cg-fs-body);line-height:1.65;max-width:38rem}

/* Studio: plate left, copy right, a 2×2 facts register (confirmed facts only) */
.studio .split{align-items:stretch}
.studio .split__media{grid-column:1 / 6;display:flex;flex-direction:column}
.studio .split__copy{grid-column:6 / 13;align-self:center}
.studio .split__media .cg-plate{box-shadow:var(--cg-shadow-1);flex:1;display:flex;flex-direction:column}
.studio .split__media picture{flex:1;display:block;min-height:0}
/* image fills the copy height; no forced aspect-ratio so the copy column drives the row height */
.studio .split__media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;aspect-ratio:unset}
.facts{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;border-top:1px solid var(--cg-rule)}
.facts div{padding:16px 24px 16px 0;border-bottom:1px solid var(--cg-rule)}
.facts dt{font-weight:500;font-size:var(--cg-fs-label);letter-spacing:var(--cg-track-label-micro);
  text-transform:uppercase;color:var(--cg-grey-700)}
.facts dd{margin:8px 0 0;font-size:var(--cg-fs-small);color:var(--cg-ink);line-height:1.5}

/* ═══ REFERENZEN — a credits-roll register (TEXT, never logos): name | meta ═ */
.refs__lead{display:block;font-weight:500;font-size:var(--cg-fs-label);
  letter-spacing:var(--cg-track-label-micro);text-transform:uppercase;color:var(--cg-grey-700);
  margin-top:clamp(30px,3.6vw,48px);margin-bottom:clamp(14px,1.8vw,22px)}
.refs{border-bottom:1px solid var(--cg-rule)}
.ref{position:relative;display:grid;grid-template-columns:1fr minmax(0,11rem);align-items:baseline;gap:18px;
  border-top:1px solid var(--cg-rule);transition:padding-left var(--cg-dur) var(--cg-ease)}
/* the name slides right on hover; a grey register tick draws into the opened space */
.ref::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--cg-grey-400);
  transform:scaleY(0);transform-origin:top;transition:transform var(--cg-dur) var(--cg-ease)}
.ref:hover::before{transform:scaleY(1)}
.ref__name{display:block;padding-block:clamp(12px,1.5vw,20px);font-weight:500;
  font-size:clamp(26px,3.6vw,42px);letter-spacing:-.02em;line-height:1.06;color:var(--cg-ink)}
.ref__meta{justify-self:end;text-align:right;font-weight:500;font-size:var(--cg-fs-label);
  letter-spacing:var(--cg-track-label-micro);text-transform:uppercase;color:var(--cg-grey-700)}
.ref:hover{padding-left:14px}
.refs__note{margin-top:22px;font-size:var(--cg-fs-small);color:var(--cg-grey-700);max-width:42rem}

/* ═══ FAQ — a hairline disclosure register, the last beat before the laurel-bed climax.
   Native <details> (complete with JS off). Reuses the footer's disclosure idiom: a +/−
   mark built from two hairline bars (no glyph → no stray dash), and the OPEN question lit
   laurel (green on light text only, §4.2). Depth stays
   hairlines + space; no card, no gradient, no glow. ═══════════════════════════════════ */
.faq{margin-top:clamp(34px,4vw,54px);max-width:62rem;
  border-top:1px solid var(--cg-rule);border-bottom:1px solid var(--cg-rule)}
.faq-item{border-top:1px solid var(--cg-rule)}
.faq-item:first-child{border-top:0}
.faq-item > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  justify-content:space-between;gap:clamp(20px,3vw,40px);padding-block:clamp(19px,2.1vw,27px);
  color:var(--cg-ink);transition:color var(--cg-dur) var(--cg-ease)}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-q{flex:1;font-weight:500;font-size:var(--cg-fs-h3);letter-spacing:var(--cg-track-h3);line-height:1.25}
.faq-item[open] > summary .faq-q{color:var(--cg-green)}   /* the open question lit laurel — green on light text (§4.2) */
/* the +/− mark: two hairline bars; the vertical bar folds flat on open (+ → −) */
.faq-mark{flex:none;align-self:flex-start;position:relative;width:22px;height:22px;margin-top:.18em}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;top:50%;left:50%;background:var(--cg-grey-500);
  transition:transform var(--cg-dur-slow) var(--cg-ease),background var(--cg-dur) var(--cg-ease)}
.faq-mark::before{width:14px;height:1.6px;transform:translate(-50%,-50%)}
.faq-mark::after{width:1.6px;height:14px;transform:translate(-50%,-50%)}
.faq-item > summary:hover .faq-mark::before,.faq-item > summary:hover .faq-mark::after{background:var(--cg-ink)}
.faq-item[open] .faq-mark::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] .faq-mark::before,.faq-item[open] .faq-mark::after{background:var(--cg-green)}
.faq-a{padding:0 0 clamp(20px,2.2vw,28px);max-width:52rem}
.faq-a p{color:var(--cg-ink-soft);font-size:var(--cg-fs-body);line-height:1.62}
.faq-a p + p{margin-top:12px}

/* ═══ KONTAKT — the laurel BED climax (§4.6): the colour is the event, not
   the size; a labelled contact register grounds the lower bed ════════════ */
.kontakt{text-align:center}
.kontakt__inner{max-width:52rem;margin-inline:auto}
.kontakt .eyebrow{color:var(--cg-bed-soft)}
.kontakt__title{font-family:var(--cg-font);font-weight:500;font-size:var(--cg-fs-h1);
  letter-spacing:var(--cg-track-h1);line-height:1.0;color:var(--cg-bed-ink);margin-top:18px}
.kontakt__title .r-clip{display:block}   /* block so the mask-rise clips the centred two-line heading */
.kontakt .cg-lede{margin-top:22px;margin-inline:auto;max-width:42rem;color:var(--cg-bed-soft);
  font-size:clamp(18px,1.5vw,21px);line-height:1.55}
.kontakt .cta-group{justify-content:center;margin-top:34px}
.kontakt .cta-sub{color:var(--cg-bed-soft)}
.contact-reg{margin-top:clamp(36px,4vw,52px);padding-top:26px;border-top:1px solid var(--cg-bed-line);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.contact-reg div{text-align:center}
.contact-reg dt{font-weight:500;font-size:var(--cg-fs-label);letter-spacing:var(--cg-track-label);
  text-transform:uppercase;color:var(--cg-bed-soft)}
.contact-reg dd{margin:10px 0 0}
.contact-reg a,.contact-reg span{font-size:var(--cg-fs-small);font-weight:500;color:var(--cg-bed-ink);
  letter-spacing:.01em}
.contact-reg a{position:relative;transition:opacity var(--cg-dur) var(--cg-ease)}
.contact-reg a:hover{opacity:.8}
.contact-reg a::after{content:"";position:absolute;inset:auto 0 -4px;height:1px;background:var(--cg-bed-ink);
  transform:scaleX(0);transform-origin:right;transition:transform var(--cg-dur) var(--cg-ease)}
.contact-reg a:hover::after{transform:scaleX(1);transform-origin:left}

/* ─── dark soil footer ─────────────────────────────────────────────────────── */
.colophon{background:var(--cg-dark);color:var(--cg-dark-ink)}
.colophon .wrap{padding-top:0}
.colophon__top{display:grid;grid-template-columns:1fr 1fr;gap:48px;
  padding-block:clamp(56px,7vw,96px);border-bottom:1px solid var(--cg-dark-line)}
.colophon .lk{font-size:clamp(40px,6vw,68px);padding:0}
.colophon__claim{margin-top:24px;color:var(--cg-dark-soft);font-size:var(--cg-fs-lede);
  line-height:1.5;max-width:26rem}
.colophon__contact{display:flex;flex-direction:column;gap:13px;align-items:flex-end;justify-content:center;text-align:right}
.colophon__contact a,.colophon__contact span{font-size:var(--cg-fs-small);
  letter-spacing:var(--cg-track-label-micro);text-transform:uppercase;font-weight:500;color:var(--cg-dark-soft)}
.colophon__contact a{position:relative;width:max-content;transition:color var(--cg-dur) var(--cg-ease)}
.colophon__contact a:hover{color:var(--cg-dark-ink)}
.colophon__contact a::after{content:"";position:absolute;inset:auto 0 -3px;height:1px;background:var(--cg-dark-ink);
  transform:scaleX(0);transform-origin:right;transition:transform var(--cg-dur) var(--cg-ease)}
.colophon__contact a:hover::after{transform:scaleX(1);transform-origin:left}
.colophon__legal{padding-block:28px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;
  justify-content:space-between}
.colophon__legal nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.colophon__legal a,.colophon__legal .copy{font-size:12px;letter-spacing:.02em;color:var(--cg-dark-soft)}
.colophon__legal a:hover{color:var(--cg-dark-ink)}
.colophon details{margin-top:14px;max-width:60ch}
.colophon details summary{font-size:12px;letter-spacing:.02em;color:var(--cg-dark-soft);
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px}
.colophon details summary::-webkit-details-marker{display:none}
.colophon details summary::before{content:"+";color:var(--cg-grey-500)}
.colophon details[open] summary::before{content:"\2212"}  /* minus sign, not a dash */
.colophon details .legal-body{margin-top:12px;font-size:12px;line-height:1.7;color:var(--cg-dark-soft)}

/* ════════════════════════════════════════════════════════════════════════
   MOTION — "the page sets like a letterpress register" (BRAND.md §9)
   ONE gesture family, used with restraint: lines DRAW, type RISES out of its
   baseline, registers PRINT row by row, registration marks TICK into place.
   Transform / opacity / clip only — no layout thrash, no gradient, no glow, no
   second hue. One orchestrated load reveal, then stillness. Everything is fully
   drawn at rest with JS off or prefers-reduced-motion (resets sit at the foot).
   ════════════════════════════════════════════════════════════════════════ */

/* base reveal — a quiet fade + rise; the safe default on every block */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .72s var(--cg-ease) var(--d,0s),transform .72s var(--cg-ease) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
/* the use-case deck fades only (no rise): the track is overflow-clipped and the
   card owns the hover-lift transform, so a translate here would clip / collide */
.js .uc-item.reveal{transform:none}

/* r-clip — a headline RISES OUT OF ITS BASELINE behind a mask wipe. Reserved
   for the billboard headlines and the hero/bed climaxes. Works as the reveal
   element itself OR as a heading nested in a .reveal block (it keys off the
   block's .in). Top/bottom slack keeps descenders and the .hl marker-wash from
   ever cropping at the travel ends. */
.js .reveal.r-clip,.js .reveal .r-clip{opacity:0;
  clip-path:inset(106% 0 -.14em 0);transform:translateY(.42em);
  transition:opacity .68s var(--cg-ease) var(--d,0s),
             clip-path .95s var(--cg-ease-mech) var(--d,0s),
             transform .95s var(--cg-ease) var(--d,0s)}
.js .reveal.r-clip.in,.js .reveal.in .r-clip{opacity:1;clip-path:inset(-.06em 0 -.14em 0);transform:none}

/* plates — the print is PLACED (the image settles from a hair of zoom), then a
   beat later the four registration ticks SNAP to their corners. The zoom is
   clipped to the picture box so the hairline plate margin is never eaten. */
.js .cg-plate.reveal picture{display:block;overflow:hidden}
.js .cg-plate.reveal img{transform:scale(1.06);transition:transform 1.05s var(--cg-ease) var(--d,0s)}
.js .cg-plate.reveal.in img{transform:none}
.js .cg-plate.reveal .cg-regmarks i{opacity:0;transform:scale(.35);
  transition:opacity .5s var(--cg-ease) calc(var(--d,0s) + .4s),
             transform .55s var(--cg-ease-mech) calc(var(--d,0s) + .4s)}
.js .cg-plate.reveal.in .cg-regmarks i{opacity:1;transform:none}
.js .cg-plate .cg-regmarks i.tl{transform-origin:top left}
.js .cg-plate .cg-regmarks i.tr{transform-origin:top right}
.js .cg-plate .cg-regmarks i.bl{transform-origin:bottom left}
.js .cg-plate .cg-regmarks i.br{transform-origin:bottom right}

/* the meta-rail SPINE draws top→bottom as its section enters — the hairline
   that threads the page, now set live (≥901; below that the rail is a top strip
   and keeps the plain reveal). The static border is the JS-off fallback. */
@media (min-width:901px){
  .js .sec .sec__rail{position:relative;border-right-color:transparent}
  .js .sec .sec__rail.reveal{transform:none}     /* spine stays anchored; only its label fades */
  .js .sec .sec__rail::after{content:"";position:absolute;top:0;right:0;width:1px;height:100%;
    background:var(--cg-rule);transform:scaleY(0);transform-origin:top;
    transition:transform .9s var(--cg-ease-mech) var(--d,.05s)}
  .js .cg-soil .sec__rail::after{background:var(--cg-dark-line)}
  .js .cg-bed   .sec__rail::after{background:var(--cg-bed-line)}
  .js .sec__rail.reveal.in::after{transform:scaleY(1)}
}

/* one-shot LOAD choreography — the lockup BLOOMS and the hero image SETTLES:
   the single orchestrated page-load reveal that the hero copy is part of. */
.js .site-header .lk__mark{opacity:0;transform:scale(.82);transform-origin:50% 60%;
  transition:opacity .7s var(--cg-ease) .05s,transform .8s var(--cg-ease-mech) .05s}
.js .site-header .lk__wm{opacity:0;transform:translateX(-7px);
  transition:opacity .7s var(--cg-ease) .16s,transform .7s var(--cg-ease) .16s}
.js.is-loaded .site-header .lk__mark{opacity:1;transform:none}
.js.is-loaded .site-header .lk__wm{opacity:1;transform:none}
.js .hero__bg img{transform:scale(1.06);transition:transform 1.6s var(--cg-ease)}
.js.is-loaded .hero__bg img{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .uc-track{scroll-behavior:auto}   /* native/keyboard scroll-into-view honours the preference too */
  .js .reveal{opacity:1!important;transform:none!important;transition:none}
  /* every motion variant collapses to its drawn rest state */
  .js .reveal.r-clip,.js .reveal .r-clip{clip-path:none!important;opacity:1!important;transform:none!important}
  .js .cg-plate.reveal img,.js .cg-plate.reveal .cg-regmarks i{transform:none!important;opacity:1!important}
  .js .sec .sec__rail::after{transform:none!important}
  .js .hero__bg img{transform:none!important}
  .js .site-header .lk__mark,.js .site-header .lk__wm{opacity:1!important;transform:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ─── responsive ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  /* collapse the meta rail to a top strip; content goes full width */
  .sec{grid-template-columns:1fr}
  .sec__rail{grid-column:1;border-right:0;padding-right:0;padding-bottom:14px}
  .sec__body{grid-column:1}
  .pillars{grid-template-columns:1fr}
  .pillar{border-left:0;border-top:1px solid var(--cg-rule);padding:26px 0}
  .pillar:first-child{border-top:0}
  .pillar h3::after{margin-top:14px}
  /* full-width now, flush both sides — the plate bleeds out on both edges */
  .pillar::after{inset:8px -14px}
  .studio .split__media,.studio .split__copy{grid-column:1}
  .split{grid-template-columns:1fr;row-gap:clamp(26px,4vw,40px)}
  .studio .split__media{max-width:560px}
  .vg-layout{grid-template-columns:1fr}
  .vg-pin{position:static}
  .contact-reg{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
}
@media (max-width:880px){
  .js .nav{display:none}
  .js .site-header .site-header__nav > .cg-btn{display:none}
  .js .site-header .site-header__nav > .lang-switch{display:none}
  .js .nav-toggle{display:inline-flex}
  .nav{gap:18px 22px}
  .site-header__inner{gap:16px}
}
@media (max-width:720px){
  /* the atlas collapses to a single column of plates */
  .lx,.lx-formate{grid-template-columns:1fr}
  .lx-card__title{font-size:21px}
  /* carousel: touch/trackpad drives the scroll, so the arrow buttons step aside */
  .js .uc-controls{display:none}
  .uc-item{flex-basis:min(80vw,300px)}
  .facts{grid-template-columns:1fr}
  .ref{grid-template-columns:1fr}
  .ref__meta{justify-self:start;text-align:left;margin-top:-6px;padding-bottom:8px}
  .colophon__top{grid-template-columns:1fr;gap:34px}
  .colophon__contact{justify-content:flex-start;align-items:flex-start;text-align:left}
}

/* ═══ IDLE-ASSET IMAGERY — three plates putting previously-unused brand frames to
   work. All reuse the §6.1 hairline plate + §7 regmarks; colour per the owner's
   website override of the kit's plate-grayscale. ═════════════════════════════════ */

/* (1) Modern Consulting — a laurel SPECIMEN runs as a tall accent beside the whole
   principles stack (heading + pillars), so it never strands whitespace next to the
   one-line heading. Supporting texture (§6.2 item 4), NOT the signature. */
.mc-body{display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(28px,4vw,64px);align-items:center}
.mc-main{min-width:0}
.mc-specimen{width:clamp(150px,15vw,206px);margin:0;align-self:center}

/* (2) the "garden office" DIPTYCH — two concept plates side by side. */
.band--pair .diptych{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px)}
.band--pair .diptych__plate{margin:0;box-shadow:var(--cg-shadow-1)}

/* (3) the "Gespräch" Sinnbild — one contained advisory plate before Kontakt, held
   narrower than the wrap so it reads as a calm beat, not a billboard. */
.band--talk .talk-plate{margin:0 auto;max-width:760px;box-shadow:var(--cg-shadow-1)}

@media (max-width:900px){
  /* the specimen is decorative texture — drop it when the register narrows */
  .mc-body{grid-template-columns:1fr}
  .mc-specimen{display:none}
}
@media (max-width:720px){
  /* diptych stacks to a single column on phones */
  .band--pair .diptych{grid-template-columns:1fr;gap:clamp(14px,4vw,22px)}
}

/* ═══ LEISTUNGEN ATMOSPHERE GROUND — owner-directed colour studio behind the
   Leistungs-Atlas (#leistungen) ONLY; "Das übernehmen wir" stays on clean paper.
   Page's 2nd full-bleed atmosphere + in colour = owner-approved custom usage (§6.1).
   The opaque cards float on their own shadows; a flat white scrim keeps the photo
   recessive (legibility + the laurel stays the one accent). */
.leist-atmo{position:relative;isolation:isolate}
.leist-atmo__bg{position:absolute;inset:0;z-index:-1;
  background:#eef0ee center/cover no-repeat fixed;
  background-image:-webkit-image-set(url(./assets/tending-garden.webp) type("image/webp"),
                                     url(./assets/tending-garden.jpg)  type("image/jpeg"));
  background-image:image-set(url(./assets/tending-garden.webp) type("image/webp"),
                             url(./assets/tending-garden.jpg)  type("image/jpeg"))}
/* dark veil — image is present but subordinate; text + cards stay legible */
.leist-atmo__bg::after{content:"";position:absolute;inset:0;background:rgba(15,18,15,.72)}
/* the wrapped sections drop their white fill + hairline tops so the ground shows */
.leist-atmo .section{background:transparent}
.leist-atmo .section > .wrap{border-top:0}
/* text sitting directly on the dark ground → soil-surface colours */
.leist-atmo .sec__rail{border-right-color:var(--cg-dark-line)}
.leist-atmo .eyebrow{color:var(--cg-dark-ink)}
.leist-atmo .sec__rail .rail-meta{color:var(--cg-dark-ink)}
.leist-atmo .sec-head .cg-h1{color:var(--cg-dark-ink)}
.leist-atmo .sec-head .cg-lede{color:var(--cg-dark-soft)}
.leist-atmo .lx-grouplabel{color:var(--cg-dark-soft)}
.leist-atmo .lx-grouplabel::after{background:var(--cg-dark-line)}
.leist-atmo .lx-note{color:var(--cg-dark-soft)}
.leist-atmo .lx-note b{color:var(--cg-dark-ink)}
.leist-atmo .cta-line{color:var(--cg-dark-soft)}
.leist-atmo .cta-link{color:var(--cg-dark-ink);border-color:var(--cg-dark-line)}
.leist-atmo .cta-link:hover,.leist-atmo .cta-link:focus-visible{border-color:var(--cg-dark-ink)}
/* green CTA variant for Erstgespräch card in Einstieg section */
.lx-card--green{background:var(--cg-green);border-color:var(--cg-green)}
.lx-card--green .lx-card__title{color:#f3f4f3}
.lx-card--green .lx-card__desc{color:rgba(243,244,243,.82)}
.lx-card--green .cg-regmarks i{color:rgba(243,244,243,.35)}
.lx-card--green:hover{border-color:var(--cg-green)}
.lx-card--green:hover .cg-regmarks i{color:rgba(243,244,243,.7)}
.lx-card--green .lx-format__cta{display:inline-flex;align-items:center;gap:6px;flex:none;font-weight:500;font-size:var(--cg-fs-label);color:#f3f4f3;white-space:nowrap;border-bottom:1px solid rgba(243,244,243,.4);padding-bottom:1px;text-decoration:none}
.lx-card--green .lx-format__cta:hover{border-color:#f3f4f3}
.lx-card--green .lx-format__cta .arw{width:14px;height:14px}

/* white atlas cards need extra lift to float clearly over the dark ground */
.leist-atmo .lx-card{box-shadow:var(--cg-shadow-card)}
.leist-atmo .lx-card:hover{box-shadow:var(--cg-shadow-card),0 0 0 1px var(--cg-rule-strong) inset}

@media (max-width:900px){
  /* fixed backgrounds are janky on mobile — pin to normal scroll there */
  .leist-atmo__bg{background-attachment:scroll}
}
@media (max-width:520px){
  .site-header__inner{height:64px}
  .hero--media{--header-h:64px}
  .contact-reg{grid-template-columns:1fr;gap:22px}
  /* format plates: stack the price under the title on the narrowest screens */
  .lx-card--format{flex-direction:column;align-items:flex-start;gap:16px}
  .lx-format__price{text-align:left}
}


/* CG-FLIP-CSS  ═══ USE-CASE DECK: FLIP CARDS (click a Baustein to read what it is / what it solves) ═══ */
.uc-flip{display:block;position:relative;padding:0;overflow:visible;perspective:1500px;
  min-height:clamp(338px,34vw,398px)}
.uc-flip__inner{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .6s var(--cg-ease)}
.uc-face{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:clamp(22px,2vw,30px);border-radius:var(--cg-radius);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  overflow:auto;scrollbar-width:none}
.uc-face::-webkit-scrollbar{display:none}
.uc-back{transform:rotateY(180deg)}
.uc-flip.is-flipped .uc-flip__inner{transform:rotateY(180deg)}
.uc-flip.is-flipped,.uc-flip:focus-within{box-shadow:var(--cg-shadow-2)}
.uc-flip:focus-within{transform:translateY(-4px)}
/* front: visible content + a stretched toggle button (so the whole card flips, heading stays valid) */
.uc-front__more{margin-top:auto;display:inline-flex;align-items:center;gap:10px;padding-top:18px;
  font-size:var(--cg-fs-small);letter-spacing:.02em;color:var(--uc-fg)}
.uc-front__disc{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--uc-line);color:var(--uc-fg);
  transition:border-color var(--cg-dur) var(--cg-ease),transform var(--cg-dur) var(--cg-ease)}
.uc-front__disc svg{width:15px;height:15px}
.uc-flip:hover .uc-front__disc,.uc-front__btn:focus-visible ~ .uc-front__more .uc-front__disc{border-color:var(--uc-fg)}
.uc-front__btn{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;border:0;
  background:transparent;cursor:pointer;border-radius:var(--cg-radius)}
.uc-front__btn:focus-visible{outline:2px solid var(--uc-ring);outline-offset:-4px}
/* back: diagram + what-it-is / what-it-solves + book CTA + close */
.uc-back__viz{display:block;color:var(--uc-fg)}
.uc-back__viz svg{width:clamp(94px,50%,124px);height:auto;display:block;opacity:.9}
.uc-back__title{margin-top:13px;font-weight:500;font-size:var(--cg-fs-h3);
  letter-spacing:var(--cg-track-h3);line-height:1.2;color:var(--uc-fg)}
.uc-back__row{margin-top:10px;font-size:var(--cg-fs-small);line-height:1.5;color:var(--uc-fg-2)}
.uc-back__label{display:block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--uc-fg);opacity:.72;margin-bottom:3px}
.uc-back__cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding-top:16px;
  font-size:var(--cg-fs-small);font-weight:500;color:var(--uc-fg);text-decoration:none}
.uc-back__cta .arw{width:15px;height:15px;transition:transform var(--cg-dur) var(--cg-ease)}
.uc-back__cta:hover .arw,.uc-back__cta:focus-visible .arw{transform:translateX(4px)}
.uc-back__cta:focus-visible{outline:2px solid var(--uc-ring);outline-offset:3px;border-radius:var(--cg-radius)}
.uc-back__close{position:absolute;top:12px;right:12px;z-index:2;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--uc-line);background:transparent;color:var(--uc-fg);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.uc-back__close svg{width:13px;height:13px}
.uc-back__close:hover{border-color:var(--uc-fg)}
.uc-back__close:focus-visible{outline:2px solid var(--uc-ring);outline-offset:2px}
/* NO-JS: no 3D, stack both faces so all content and the booking link stay usable */
html:not(.js) .uc-flip{min-height:0;perspective:none}
html:not(.js) .uc-flip__inner{position:static;transform:none;transform-style:flat}
html:not(.js) .uc-face{position:relative;inset:auto;transform:none;overflow:visible;
  -webkit-backface-visibility:visible;backface-visibility:visible}
html:not(.js) .uc-front__more,html:not(.js) .uc-back__close,html:not(.js) .uc-front__btn{display:none}
html:not(.js) .uc-back{margin-top:6px;padding-top:18px;border-top:1px solid var(--uc-line);border-radius:0}
/* reduced motion: flip is instant, no spin */
@media (prefers-reduced-motion: reduce){
  .uc-flip__inner{transition:none}
  .uc-front__disc,.uc-back__cta .arw{transition:none}
}

/* CG-FIX  ═══ vision-section rhythm + footer address ═══ */
.mc-manifest{margin-top:clamp(20px,2.6vw,34px)}
.mc-manifest .cg-body{margin-top:clamp(12px,1.3vw,16px)}
.mc-manifest .cg-body:first-child{margin-top:0}
.mc-manifest .mc-kicker{margin-top:clamp(16px,1.8vw,24px)}
.colophon__addr{font-style:normal;line-height:1.55}