/* ═══════════════════════════════════════════════════════════════
   MECKEL RAUMGESTALTUNG — "Chalk Atelier"
   Tokens sampled from the van livery + the house facade in Sayn.
   No component below may use a raw colour value.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --plaster-50:#FBF9F7; --plaster-100:#F6F2EE; --plaster-200:#EDE7E1; --plaster-300:#DED6CE;
  --silver-400:#B8B9BC;
  --graphite-600:#5A5E64; --graphite-700:#3C3F44; --ink-900:#212327;
  --wine-500:#A11842; --wine-600:#8A1237; --wine-300:#D96A90; --wine-50:#FAEDF1;

  --background:var(--plaster-100);
  --surface:#FFFFFF;
  --sunken:var(--plaster-200);
  --foreground:var(--ink-900);
  --muted:var(--graphite-600);
  --primary:var(--wine-500);
  --primary-hover:var(--wine-600);
  --on-primary:#FFFFFF;
  --secondary:var(--graphite-700);
  --on-secondary:#FBF9F7;
  --accent:var(--silver-400);
  --border:var(--plaster-300);
  --ring:var(--wine-500);

  --font-display:"Playfair Display",Georgia,serif;
  --font-body:"Inter",-apple-system,"Segoe UI",sans-serif;

  --radius-sm:2px; --radius:4px; --radius-lg:8px; --radius-full:999px;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;
  --sp-20:5rem; --sp-24:6rem; --sp-32:8rem;

  --shadow-sm:0 1px 2px rgba(33,35,39,.05);
  --shadow:0 4px 18px -4px rgba(33,35,39,.10);
  --shadow-lg:0 28px 70px -24px rgba(33,35,39,.26);

  --container:1240px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* z-index scale */
  --z-bg:0; --z-content:10; --z-float:20; --z-header:40; --z-top:50;
}

/* ── reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--background);color:var(--foreground);
  font-family:var(--font-body);font-size:16px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.06;margin:0;letter-spacing:-.02em;}
p{margin:0;} img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:var(--radius-sm);}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-6);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ── THE DASH FRIEZE — the signature device ────────────────────
   A painter's chalk snap-line. Used as every rule on the page. */
.dash-rule{
  height:1px;width:100%;border:0;margin:0;
  background-image:repeating-linear-gradient(to right,
    var(--border) 0 10px, transparent 10px 18px);
}
.dash-rule--wine{
  background-image:repeating-linear-gradient(to right,
    var(--primary) 0 12px, transparent 12px 22px);
  opacity:.55;
}
.dash-rule--v{
  width:1px;height:100%;
  background-image:repeating-linear-gradient(to bottom,
    var(--border) 0 10px, transparent 10px 18px);
}

/* ── typography helpers ────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  font-size:.68rem;text-transform:uppercase;letter-spacing:.24em;font-weight:600;
  color:var(--primary);
}
.eyebrow::before{content:"";width:30px;height:1px;
  background-image:repeating-linear-gradient(to right,var(--primary) 0 5px,transparent 5px 9px);}
.eyebrow--muted{color:var(--muted);}
.eyebrow--muted::before{background-image:repeating-linear-gradient(to right,var(--muted) 0 5px,transparent 5px 9px);}
.eyebrow--light{color:var(--plaster-200);}
.eyebrow--light::before{background-image:repeating-linear-gradient(to right,var(--plaster-200) 0 5px,transparent 5px 9px);}
.vtext{writing-mode:vertical-rl;text-orientation:mixed;}

/* ── buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);
  min-height:48px;padding:.9rem 1.7rem;
  font-size:.9rem;font-weight:500;letter-spacing:.01em;
  border:1px solid transparent;border-radius:var(--radius);cursor:pointer;
  transition:background-color .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .25s var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow);}
.btn-ghost{background:transparent;color:var(--foreground);border-color:var(--border);}
.btn-ghost:hover{border-color:var(--secondary);background:var(--surface);}
.btn-dark{background:var(--secondary);color:var(--on-secondary);}
.btn-dark:hover{background:var(--ink-900);}
.btn-sm{min-height:40px;padding:.55rem 1.15rem;font-size:.82rem;}

/* ── scroll progress: a stroke of paint across the top ─────── */
.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:var(--z-top);
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--primary),var(--wine-300),var(--secondary));
}

/* ── header ────────────────────────────────────────────────── */
.site-header{
  position:fixed;top:var(--sp-4);left:var(--sp-4);right:var(--sp-4);z-index:var(--z-header);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
  padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  border:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--plaster-50) 78%,transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.is-stuck{background:color-mix(in srgb,var(--plaster-50) 94%,transparent);box-shadow:var(--shadow);}
.wordmark{display:flex;align-items:baseline;gap:var(--sp-2);flex:none;}
.wordmark .name{font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:1.5rem;color:var(--primary);letter-spacing:-.02em;line-height:1;}
.wordmark .sub{font-size:.56rem;text-transform:uppercase;letter-spacing:.26em;
  color:var(--muted);font-weight:600;}
.nav{display:flex;align-items:center;gap:var(--sp-8);}
.nav a{font-size:.83rem;color:var(--muted);position:relative;padding-block:4px;transition:color .2s;}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background-image:repeating-linear-gradient(to right,var(--primary) 0 4px,transparent 4px 8px);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease);}
.nav a:hover{color:var(--primary);}
.nav a:hover::after{transform:scaleX(1);}
.header-cta{display:flex;align-items:center;gap:var(--sp-3);}
.header-phone{font-size:.83rem;color:var(--muted);white-space:nowrap;}
.header-phone:hover{color:var(--primary);}
.menu-btn{display:none;background:none;border:1px solid var(--border);border-radius:var(--radius);
  width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;color:var(--foreground);}

/* ═══ 1. HERO — deliberately off-grid ═══════════════════════ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;padding-top:140px;padding-bottom:var(--sp-16);}
.hero-bg{position:absolute;inset:0;z-index:var(--z-bg);background:var(--plaster-100);}
.wash{position:absolute;border-radius:var(--radius-full);filter:blur(96px);will-change:transform;}
.wash-a{width:64vw;height:64vw;left:-16vw;top:-24vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--wine-500) 28%,transparent) 0%,transparent 68%);
  animation:driftA 36s ease-in-out infinite alternate;}
.wash-b{width:58vw;height:58vw;right:-18vw;top:2vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--graphite-700) 24%,transparent) 0%,transparent 66%);
  animation:driftB 44s ease-in-out infinite alternate;}
.wash-c{width:52vw;height:52vw;left:24vw;bottom:-28vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--silver-400) 46%,transparent) 0%,transparent 70%);
  animation:driftC 40s ease-in-out infinite alternate;}
@keyframes driftA{to{transform:translate3d(7vw,5vw,0) scale(1.12);}}
@keyframes driftB{to{transform:translate3d(-6vw,7vw,0) scale(1.08);}}
@keyframes driftC{to{transform:translate3d(4vw,-6vw,0) scale(1.14);}}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(102deg,
  color-mix(in srgb,var(--plaster-50) 94%,transparent) 0%,
  color-mix(in srgb,var(--plaster-100) 76%,transparent) 44%,
  color-mix(in srgb,var(--plaster-100) 26%,transparent) 100%);}
.grain{position:absolute;inset:0;opacity:.3;mix-blend-mode:multiply;pointer-events:none;z-index:2;}

/* the ornament, redrawn from their own gable */
.hero-vine{position:absolute;z-index:2;right:-3vw;top:50%;transform:translateY(-50%);
  height:112%;width:auto;pointer-events:none;}
.vine{fill:none;stroke:var(--primary);stroke-width:2.2;stroke-linecap:round;}
.vine-s{fill:none;stroke:var(--silver-400);stroke-width:1.6;stroke-linecap:round;}
.dot{fill:var(--primary);} .dot-s{fill:var(--silver-400);}
.draw{stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 3.6s var(--ease) .25s forwards;}
.draw-2{animation-duration:4.4s;animation-delay:.55s;}
.pop{opacity:0;animation:pop 1s var(--ease) 2.5s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes pop{to{opacity:.85;}}

/* the address printed up the left edge, like a spine */
.hero-spine{position:absolute;left:var(--sp-6);top:38%;z-index:3;
  font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:var(--sp-4);}
.hero-spine .line{width:1px;height:74px;
  background-image:repeating-linear-gradient(to bottom,var(--muted) 0 5px,transparent 5px 10px);}

.hero-inner{position:relative;z-index:var(--z-content);width:100%;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.44fr);
  gap:var(--sp-10);align-items:end;}
.hero-grid--single{grid-template-columns:minmax(0,1fr);}
.hero h1{font-size:clamp(3rem,8.4vw,7.2rem);letter-spacing:-.035em;margin-bottom:var(--sp-6);}
.hero h1 .l1{display:block;margin-left:-.06em;}
.hero h1 .l2{display:block;padding-left:min(9vw,120px);}
.hero h1 .l3{display:block;font-style:italic;color:var(--primary);padding-left:min(3vw,40px);}
.hero h1 .thin{font-weight:400;color:var(--muted);}
.hero-sub{font-size:clamp(1rem,1.35vw,1.16rem);color:var(--muted);max-width:30rem;
  font-weight:300;margin:var(--sp-6) 0 var(--sp-8);}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);}

/* trust numbers, staggered — not a tidy row */
.trust{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(var(--sp-6),4vw,var(--sp-16));
  margin-top:var(--sp-12);padding-top:var(--sp-6);
  background-image:repeating-linear-gradient(to right,var(--border) 0 10px,transparent 10px 18px);
  background-size:100% 1px;background-repeat:no-repeat;background-position:top left;}
.trust-item{display:flex;flex-direction:column;gap:2px;}
.trust-item:nth-child(2){transform:translateY(-14px);}
.trust-item:nth-child(3){transform:translateY(6px);}
.trust-item .k{font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;}
.trust-item .k .star{color:var(--primary);font-size:.7em;}
.trust-item .v{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);}

/* ═══ 2. MARQUEE FRIEZE ═════════════════════════════════════ */
.frieze{position:relative;background:var(--secondary);color:var(--on-secondary);
  padding-block:var(--sp-6);overflow:hidden;transform:rotate(-1.1deg) scale(1.035);margin-block:var(--sp-16);}
.frieze-track{display:flex;width:max-content;gap:0;align-items:center;
  animation:slide 42s linear infinite;will-change:transform;}
.frieze-track.rev{animation-direction:reverse;animation-duration:58s;opacity:.4;
  font-size:.62em;margin-top:var(--sp-3);}
@keyframes slide{to{transform:translateX(-50%);}}
.frieze-item{display:flex;align-items:center;gap:var(--sp-10);flex:none;
  padding-right:var(--sp-10);
  font-family:var(--font-display);font-size:clamp(1.05rem,2vw,1.7rem);font-style:italic;white-space:nowrap;}
.frieze-item .sep{width:64px;height:1px;flex:none;
  background-image:repeating-linear-gradient(to right,var(--wine-300) 0 8px,transparent 8px 15px);}
.frieze-item .glyph{color:var(--wine-300);font-size:.7em;font-style:normal;}
.frieze:hover .frieze-track{animation-play-state:paused;}

/* ═══ section scaffolding ═══════════════════════════════════ */
.section{padding-block:clamp(var(--sp-20),11vw,var(--sp-32));position:relative;}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-8);margin-bottom:var(--sp-16);}
.section-head h2{font-size:clamp(2rem,4.6vw,3.4rem);max-width:16ch;}
.section-head h2 em{font-style:italic;color:var(--primary);}
.section-head .aside{max-width:30ch;color:var(--muted);font-weight:300;font-size:.95rem;}
.idx{font-family:var(--font-display);font-size:.8rem;color:var(--primary);letter-spacing:.2em;}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.in{opacity:1;transform:none;}
.rv-d1{transition-delay:.08s;} .rv-d2{transition-delay:.16s;}
.rv-d3{transition-delay:.24s;} .rv-d4{transition-delay:.32s;}

/* ═══ 3. SWATCH DRAWER (services) ═══════════════════════════ */
.drawer{display:flex;gap:6px;height:clamp(420px,58vh,560px);}
.swatch{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;
  border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);
  transition:flex-grow .7s var(--ease);
}
.swatch.active{flex-grow:4.2;}
.swatch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(1.04);opacity:.20;
  transition:opacity .7s var(--ease),filter .7s var(--ease),transform 1.2s var(--ease);transform:scale(1.06);}
.swatch.active img{opacity:1;filter:grayscale(0) contrast(1) brightness(1);transform:scale(1);}
.swatch::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);
  background:linear-gradient(to top,color-mix(in srgb,var(--ink-900) 88%,transparent) 0%,
    color-mix(in srgb,var(--ink-900) 34%,transparent) 52%,transparent 100%);}
.swatch.active::after{opacity:1;}
.swatch-face{position:absolute;inset:0;z-index:2;padding:var(--sp-6);
  display:flex;flex-direction:column;justify-content:space-between;}
.swatch-num{font-family:var(--font-display);font-size:.78rem;letter-spacing:.2em;color:var(--primary);}
.swatch.active .swatch-num{color:var(--plaster-200);}
.swatch-title{font-family:var(--font-display);font-size:1.25rem;line-height:1.1;
  writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  align-self:flex-start;margin-top:auto;transition:color .5s var(--ease);white-space:nowrap;}
.swatch.active .swatch-title{display:none;}
.swatch-body{display:none;}
.swatch.active .swatch-body{display:block;color:var(--plaster-100);max-width:34ch;margin-top:auto;}
.swatch.active .swatch-body h3{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:var(--sp-3);color:var(--plaster-50);}
.swatch.active .swatch-body p{font-size:.9rem;font-weight:300;color:var(--plaster-200);margin-bottom:var(--sp-4);}
.swatch-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);}
.swatch-tags span{font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;
  border:1px solid color-mix(in srgb,var(--plaster-100) 40%,transparent);
  padding:5px 10px;border-radius:var(--radius-full);color:var(--plaster-200);}

/* ═══ 4. BEFORE / AFTER SLIDER ═════════════════════════════════════ */
.compare{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-lg);background:var(--sunken);
  touch-action:pan-y;user-select:none;}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.compare .after{}
/* the "before" side: yellowed, flat and tired — never a mock-up */
.compare .before{clip-path:inset(0 50% 0 0);
  filter:sepia(.34) saturate(.62) contrast(.9) brightness(.86);}
.compare-label{position:absolute;top:var(--sp-4);z-index:3;font-size:.64rem;
  text-transform:uppercase;letter-spacing:.2em;padding:7px 12px;border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--plaster-50) 92%,transparent);color:var(--foreground);}
.compare-label.l{left:var(--sp-4);} .compare-label.r{right:var(--sp-4);}
.compare-handle{position:absolute;top:0;bottom:0;width:2px;background:var(--plaster-50);z-index:4;
  left:50%;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(33,35,39,.16);}
.compare-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:var(--radius-full);background:var(--plaster-50);
  display:grid;place-items:center;box-shadow:var(--shadow);color:var(--primary);}
.compare-knob svg{width:22px;height:22px;}
.compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  z-index:5;cursor:ew-resize;margin:0;}
.compare input[type=range]:focus-visible + .compare-handle{box-shadow:0 0 0 3px var(--ring);}

/* ═══ 5. FACADE ═════════════════════════════════════════════ */
.facade{position:relative;overflow:hidden;background:var(--secondary);}
.facade-media{position:relative;}
.facade-media img{width:100%;height:clamp(440px,72vh,760px);object-fit:cover;object-position:center 40%;}
.facade-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,color-mix(in srgb,var(--ink-900) 84%,transparent) 0%,
    color-mix(in srgb,var(--ink-900) 40%,transparent) 46%,transparent 78%);}
.facade-copy{position:absolute;inset:auto auto var(--sp-16) 0;z-index:3;width:100%;}
.facade-copy h2{color:var(--plaster-50);font-size:clamp(1.9rem,4.4vw,3.2rem);max-width:15ch;margin-block:var(--sp-4);}
.facade-copy p{color:var(--plaster-200);max-width:38ch;font-weight:300;}
.facade-note{position:absolute;right:var(--sp-8);top:var(--sp-8);z-index:3;
  max-width:230px;text-align:right;color:var(--plaster-200);font-size:.74rem;line-height:1.5;}
.facade-note .arrow{display:block;margin-left:auto;margin-bottom:var(--sp-2);color:var(--wine-300);}

/* ═══ 6. SARAH / EDITORIAL ══════════════════════════════════ */
.editorial{position:relative;}
.ed-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(var(--sp-8),5vw,var(--sp-16));align-items:center;}
.ed-figure{position:relative;}
.ed-figure img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:200px 200px var(--radius) var(--radius);border:1px solid var(--border);}
.ed-ghost{position:absolute;right:-8%;bottom:-6%;z-index:0;
  font-family:var(--font-display);font-size:clamp(7rem,15vw,15rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px var(--border);letter-spacing:-.05em;pointer-events:none;}
.ed-badge{position:absolute;z-index:2;left:calc(var(--sp-6) * -1);bottom:var(--sp-10);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow);transform:rotate(-2deg);}
.ed-badge .k{font-family:var(--font-display);font-size:1.4rem;color:var(--primary);line-height:1;}
.ed-badge .v{font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);}
.ed-quote{font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.25;margin-block:var(--sp-6) var(--sp-8);}
.ed-quote .hl{color:var(--primary);}
.ed-sign{display:flex;align-items:center;gap:var(--sp-4);}
.ed-sign .nm{font-family:var(--font-display);font-style:italic;font-size:1.2rem;color:var(--primary);}
.ed-sign .rl{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);}

/* ═══ 7. PROCESS SNAP-LINE ══════════════════════════════════ */
.process{position:relative;}
.snap{position:relative;padding-left:clamp(var(--sp-8),7vw,var(--sp-20));}
.snap::before{content:"";position:absolute;left:clamp(6px,2.4vw,34px);top:8px;bottom:8px;width:1px;
  background-image:repeating-linear-gradient(to bottom,var(--border) 0 8px,transparent 8px 16px);}
.snap-fill{position:absolute;left:clamp(6px,2.4vw,34px);top:8px;width:1px;height:0;
  background-image:repeating-linear-gradient(to bottom,var(--primary) 0 8px,transparent 8px 16px);
  transition:height .12s linear;}
.step{position:relative;padding-block:clamp(var(--sp-6),3vw,var(--sp-10));display:grid;
  grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:var(--sp-8);align-items:start;}
.step + .step{background-image:repeating-linear-gradient(to right,var(--border) 0 10px,transparent 10px 18px);
  background-size:100% 1px;background-repeat:no-repeat;background-position:top left;}
.step-node{position:absolute;left:calc(clamp(6px,2.4vw,34px) - clamp(var(--sp-8),7vw,var(--sp-20)) - 5px);
  top:calc(clamp(var(--sp-6),3vw,var(--sp-10)) + 8px);width:11px;height:11px;border-radius:var(--radius-full);
  background:var(--plaster-100);border:1.5px solid var(--border);transition:border-color .4s,background-color .4s;}
.step.on .step-node{border-color:var(--primary);background:var(--primary);}
.step .n{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,4rem);line-height:.9;
  color:transparent;-webkit-text-stroke:1px var(--silver-400);transition:color .5s,-webkit-text-stroke-color .5s;}
.step.on .n{color:var(--primary);-webkit-text-stroke-color:transparent;}
.step h3{font-size:clamp(1.3rem,2.2vw,1.8rem);margin-bottom:var(--sp-3);}
.step p{color:var(--muted);font-weight:300;max-width:48ch;}

/* ═══ 8. RECEIPT + REVIEWS ══════════════════════════════════ */
.tax-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(var(--sp-8),5vw,var(--sp-16));align-items:center;}
.receipt{position:relative;background:var(--surface);padding:var(--sp-8) var(--sp-8) var(--sp-10);
  box-shadow:var(--shadow-lg);transform:rotate(-1.6deg);max-width:400px;}
/* torn perforation: circles of page colour punched into the top and bottom edge */
.receipt::before,.receipt::after{content:"";position:absolute;left:0;right:0;height:9px;
  background-size:18px 18px;background-repeat:repeat-x;}
.receipt::before{top:-1px;background-image:radial-gradient(circle at 9px 0,var(--background) 6.5px,transparent 7px);}
.receipt::after{bottom:-1px;background-image:radial-gradient(circle at 9px 9px,var(--background) 6.5px,transparent 7px);}
.receipt .rh{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);}
.receipt .amount{font-family:var(--font-display);font-size:clamp(3rem,7vw,4.6rem);
  color:var(--primary);line-height:1;margin-block:var(--sp-3) var(--sp-2);letter-spacing:-.04em;}
.receipt .rrow{display:flex;justify-content:space-between;gap:var(--sp-4);
  font-size:.8rem;padding-block:var(--sp-3);color:var(--muted);}
.receipt .rrow strong{color:var(--foreground);font-weight:500;}
.receipt .legal{font-size:.68rem;color:var(--muted);margin-top:var(--sp-4);}

.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5);}
.review{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-6);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.review:nth-child(1){transform:rotate(-1.2deg);} .review:nth-child(2){transform:rotate(.9deg) translateY(var(--sp-6));}
.review:nth-child(3){transform:rotate(1.4deg) translateY(calc(var(--sp-4) * -1));} .review:nth-child(4){transform:rotate(-.7deg) translateY(var(--sp-3));}
.review:hover{transform:rotate(0) translateY(-4px);box-shadow:var(--shadow);}
.review .stars{color:var(--primary);letter-spacing:.16em;font-size:.8rem;margin-bottom:var(--sp-3);}
.review p{font-size:.88rem;font-weight:300;margin-bottom:var(--sp-4);}
.review .who{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);}

/* ═══ 9. TYPOGRAPHIC SERVICE MAP ════════════════════════════ */
.area{background:var(--secondary);color:var(--plaster-100);position:relative;overflow:hidden;}
.area .grain{opacity:.14;mix-blend-mode:overlay;}
/* the ornament again, mirrored and very quiet, behind the contact block */
.quiet-vine{position:absolute;left:-6vw;top:50%;transform:translateY(-50%) scaleX(-1);
  height:120%;width:auto;opacity:.13;pointer-events:none;z-index:0;}
.quiet-vine .vine,.quiet-vine .vine-s{stroke-dasharray:none;stroke-dashoffset:0;animation:none;}
.quiet-vine .dot,.quiet-vine .dot-s{opacity:.85;animation:none;}
.map{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:clamp(var(--sp-3),2vw,var(--sp-8));font-family:var(--font-display);line-height:1;}
.map span{display:inline-block;transition:color .35s var(--ease),transform .35s var(--ease);cursor:default;}
.map .core{font-size:clamp(2.2rem,7.6vw,6rem);color:var(--plaster-50);letter-spacing:-.035em;}
/* hierarchy comes from size + style, never from washed-out grey — every tier
   stays above 5:1 on the graphite ground */
.map .mid{font-size:clamp(1.5rem,4.4vw,3.4rem);color:var(--plaster-200);font-style:italic;}
.map .far{font-size:clamp(1rem,2.2vw,1.6rem);color:var(--silver-400);letter-spacing:.02em;}
.map span:hover{color:var(--wine-300);transform:translateY(-4px);}
.map .plus{font-family:var(--font-body);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--plaster-200);align-self:center;}

/* ═══ 10. CONTACT ═══════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(var(--sp-8),5vw,var(--sp-16));align-items:start;}
.form{display:grid;gap:var(--sp-5);}
.field{display:grid;gap:var(--sp-2);}
.field label{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:500;}
.field input,.field select,.field textarea{
  font:inherit;font-size:.92rem;padding:.85rem 1rem;min-height:48px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--foreground);transition:border-color .2s,box-shadow .2s;width:100%;}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--wine-50);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);}
.form-note{font-size:.74rem;color:var(--muted);}
.contact-side{position:relative;}
.contact-side img{width:100%;border-radius:var(--radius);border:1px solid var(--border);}
.contact-lines{margin-top:var(--sp-8);display:grid;gap:var(--sp-5);}
.cline{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:start;}
.cline .ic{width:38px;height:38px;border:1px solid var(--border);border-radius:var(--radius);
  display:grid;place-items:center;color:var(--primary);background:var(--surface);flex:none;}
.cline .ic svg{width:17px;height:17px;}
.cline .lb{font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);}
.cline .vl{font-size:1rem;}
.cline a:hover{color:var(--primary);}

/* ═══ FOOTER ════════════════════════════════════════════════ */
.site-footer{padding-top:var(--sp-16);overflow:hidden;}
.foot-top{display:flex;flex-wrap:wrap;gap:var(--sp-8);justify-content:space-between;
  padding-bottom:var(--sp-12);}
.foot-col h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;
  font-family:var(--font-body);font-weight:600;color:var(--muted);margin-bottom:var(--sp-4);}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);}
.foot-col a{font-size:.88rem;color:var(--foreground);}
.foot-col a:hover{color:var(--primary);}
.foot-mark{font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:clamp(4.5rem,18vw,15rem);line-height:.78;color:var(--primary);
  letter-spacing:-.045em;margin-bottom:-.18em;user-select:none;}
.foot-legal{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;
  padding-block:var(--sp-6);font-size:.74rem;color:var(--muted);}

/* ═══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;}
  .ed-grid,.tax-grid,.contact-grid{grid-template-columns:1fr;}
  .hero-vine{opacity:.3;right:-22vw;}
}
@media (max-width:860px){
  .nav,.header-phone{display:none;}
  .nav.is-open{display:flex;position:absolute;top:100%;right:0;margin-top:var(--sp-2);
    flex-direction:column;align-items:flex-end;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);
    background:var(--plaster-50);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow);min-width:200px;}
  .nav.is-open a{font-size:.95rem;color:var(--foreground);}
  .menu-btn{display:flex;}
  .hero-spine{display:none;}
  .drawer{flex-direction:column;height:auto;}
  .swatch{flex:none;height:88px;transition:height .6s var(--ease);}
  .swatch.active{height:400px;flex-grow:0;}
  .swatch-title{writing-mode:horizontal-tb;transform:none;margin-top:0;}
  .swatch-face{justify-content:flex-end;}
  .reviews{grid-template-columns:1fr;}
  .review{transform:none!important;}
  .step{grid-template-columns:1fr;gap:var(--sp-3);}
  .field-row{grid-template-columns:1fr;}
  .facade-note{display:none;}
}
@media (max-width:560px){
  .site-header{left:var(--sp-3);right:var(--sp-3);top:var(--sp-3);padding-left:var(--sp-4);}
  .hero h1 .l2{padding-left:0;} .hero h1 .l3{padding-left:0;}
  .trust-item{transform:none!important;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;}
  html{scroll-behavior:auto;}
  .draw{stroke-dashoffset:0;} .pop{opacity:.85;}
  .rv{opacity:1;transform:none;}
  .frieze-track{animation:none;}
}

/* ═══════════════════════════════════════════════════════════════
   MAP — consent-gated Google Maps embed (German cookie law)
   ═══════════════════════════════════════════════════════════════ */
.map-embed{position:relative;aspect-ratio:4/3;border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;background:var(--sunken);}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(.35) contrast(1.03);}
.map-consent{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:var(--sp-3);
  padding:var(--sp-8);background:var(--sunken);}
.map-consent::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,var(--border) 0 10px,transparent 10px 18px),
    repeating-linear-gradient(to bottom,var(--border) 0 10px,transparent 10px 18px);
  background-size:100% 1px,1px 100%;
  background-position:center center;background-repeat:no-repeat;}
.map-consent > *{position:relative;z-index:1;}
.map-consent svg{width:30px;height:30px;color:var(--primary);}
.map-consent .mc-title{font-family:var(--font-display);font-size:1.02rem;line-height:1.35;max-width:24ch;}
.map-consent .mc-note{font-size:.74rem;color:var(--muted);max-width:34ch;font-weight:300;}
.map-consent .mc-alt{font-size:.74rem;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;}
.map-consent .mc-alt:hover{color:var(--primary);}
.map-caption{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3);
  font-size:.72rem;color:var(--muted);}
.map-caption .dash-rule{flex:1;}

/* ═══════════════════════════════════════════════════════════════
   PROJECTS PAGE
   ═══════════════════════════════════════════════════════════════ */
.page-hero{position:relative;padding-top:190px;padding-bottom:var(--sp-16);overflow:hidden;}
.page-hero .wash-a{width:52vw;height:52vw;left:-18vw;top:-26vw;}
.page-hero .wash-c{width:44vw;height:44vw;left:auto;right:-14vw;bottom:-30vw;}
.page-hero h1{font-size:clamp(2.6rem,7vw,5.4rem);letter-spacing:-.035em;max-width:14ch;}
.page-hero h1 em{font-style:italic;color:var(--primary);}
.page-hero .lead{max-width:44ch;color:var(--muted);font-weight:300;
  font-size:clamp(1rem,1.3vw,1.12rem);margin-top:var(--sp-6);}
.crumb{display:flex;align-items:center;gap:var(--sp-3);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin-bottom:var(--sp-6);}
.crumb a:hover{color:var(--primary);}
.crumb .sep{width:22px;height:1px;
  background-image:repeating-linear-gradient(to right,var(--muted) 0 4px,transparent 4px 8px);}

/* filter bar */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;
  padding-block:var(--sp-6);position:sticky;top:96px;z-index:var(--z-float);
  background:color-mix(in srgb,var(--background) 92%,transparent);
  backdrop-filter:blur(10px);}
.filter{background:transparent;border:1px solid var(--border);border-radius:var(--radius-full);
  padding:.5rem 1.05rem;min-height:40px;font-size:.8rem;color:var(--muted);cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);}
.filter:hover{border-color:var(--secondary);color:var(--foreground);}
.filter[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}
.filter-count{margin-left:auto;font-size:.72rem;color:var(--muted);letter-spacing:.1em;
  text-transform:uppercase;}

/* deliberately irregular gallery — no two rows the same */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-5);
  margin-top:var(--sp-8);}
.pcard{position:relative;grid-column:span 2;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:var(--surface);
  transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);}
.pcard.hide{display:none;}
.pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.pcard.w3{grid-column:span 3;} .pcard.w4{grid-column:span 4;} .pcard.w6{grid-column:span 6;}
.pcard .media{position:relative;overflow:hidden;background:var(--sunken);}
.pcard .media img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .5s var(--ease);}
.pcard:hover .media img{transform:scale(1.04);}
.pcard.r-tall .media{aspect-ratio:3/4;} .pcard.r-sq .media{aspect-ratio:1/1;}
.pcard.r-wide .media{aspect-ratio:16/10;} .pcard.r-pano .media{aspect-ratio:21/9;}
.pcard .tag{position:absolute;top:var(--sp-4);left:var(--sp-4);z-index:2;
  font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;padding:6px 11px;
  border-radius:var(--radius-sm);background:color-mix(in srgb,var(--plaster-50) 92%,transparent);
  color:var(--foreground);}
.pcard .body{padding:var(--sp-5) var(--sp-5) var(--sp-6);}
.pcard .body h3{font-size:1.2rem;margin-bottom:var(--sp-2);}
.pcard .body p{font-size:.84rem;color:var(--muted);font-weight:300;}
.pcard .meta{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);
  font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);}
.pcard .meta .dash-rule{flex:1;}

/* the one full-width statement card */
.pcard.feature{grid-column:span 6;display:grid;grid-template-columns:1.25fr 1fr;align-items:stretch;}
.pcard.feature .media{aspect-ratio:auto;min-height:340px;}
.pcard.feature .body{padding:clamp(var(--sp-6),3.5vw,var(--sp-12));
  display:flex;flex-direction:column;justify-content:center;}
.pcard.feature .body h3{font-size:clamp(1.5rem,2.6vw,2.2rem);margin-bottom:var(--sp-4);}
.pcard.feature .body p{font-size:.95rem;}
.pcard.feature .quote{font-family:var(--font-display);font-style:italic;
  font-size:1.05rem;color:var(--foreground);margin-top:var(--sp-5);
  padding-top:var(--sp-5);
  background-image:repeating-linear-gradient(to right,var(--border) 0 10px,transparent 10px 18px);
  background-size:100% 1px;background-repeat:no-repeat;background-position:top left;}

.empty{grid-column:1/-1;text-align:center;padding-block:var(--sp-20);color:var(--muted);}
.empty h3{font-size:1.4rem;margin-bottom:var(--sp-3);color:var(--foreground);}

/* closing band */
.cta-band{background:var(--secondary);color:var(--plaster-100);position:relative;overflow:hidden;
  text-align:center;}
.cta-band .grain{opacity:.14;mix-blend-mode:overlay;}
.cta-band h2{color:var(--plaster-50);font-size:clamp(1.9rem,4.4vw,3.2rem);
  max-width:18ch;margin-inline:auto;margin-bottom:var(--sp-6);}
.cta-band p{color:var(--silver-400);max-width:44ch;margin-inline:auto;font-weight:300;
  margin-bottom:var(--sp-8);}
.cta-band .btns{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;}
.cta-band .btn-ghost{color:var(--plaster-100);border-color:color-mix(in srgb,var(--plaster-100) 34%,transparent);}
.cta-band .btn-ghost:hover{background:color-mix(in srgb,var(--plaster-100) 12%,transparent);
  border-color:var(--plaster-200);}

@media (max-width:1024px){
  .gallery{grid-template-columns:repeat(4,1fr);}
  .pcard,.pcard.w3{grid-column:span 2;} .pcard.w4,.pcard.w6,.pcard.feature{grid-column:span 4;}
  .pcard.feature{grid-template-columns:1fr;}
  .pcard.feature .media{min-height:260px;aspect-ratio:16/10;}
}
@media (max-width:860px){
  .filters{top:84px;}
  .page-hero{padding-top:150px;}
}
@media (max-width:640px){
  .gallery{grid-template-columns:1fr;}
  .pcard,.pcard.w3,.pcard.w4,.pcard.w6,.pcard.feature{grid-column:span 1;}
  .pcard.r-tall .media,.pcard.r-sq .media,.pcard.r-pano .media{aspect-ratio:4/3;}
  .filters{position:static;}
}