/* still yes — v2 foundation · Palette 2.0 (Espresso + Cornflower + Vivid Orange)
   Cream-Fläche dominiert. Espresso-Anker für Text und dunkle Flächen.
   Warm Brown trägt Italic-Highlights. Drei Akzente in klarer Hierarchie:
     · Cornflower — kühler primärer Akzent (Eyebrow-Nummern, Links, kleine Marker)
     · Orange    — lauter Action-Akzent (CTAs, Unterstreichungen, sparsam)
     · Lavender  — weiche Surface (Hover, Tag-BG, Highlight-Bereiche)
*/

:root{
  /* === Bone Cream-Fläche === */
  --bg:#FDF9F4;            /* Cream — Hauptfläche (Nav, Hero, Welcome, About) */
  --bg-mid:#EAE3DA;        /* Stone — Pricing-Cards, leiser Rhythmus */

  /* === Ink Skala — Anker 800 Espresso === */
  --ink-50:#F5EFE6;        /* Veil — knapp unter Cream */
  --ink-100:#EAE3DA;       /* Stone — Hover-Surfaces, Tag-BG */
  --ink-200:#B2A199;       /* Taupe — Borders, Divider auf Hell */
  --ink-300:#8B7B72;       /* Smoke — Muted Text, Captions, Sektionsnummern */
  --ink-400:#61463D;       /* Warm Brown — sekundärer Text, Lede */
  --ink-500:#4A3530;       /* Cedar — Italic-Highlights, Handschrift */
  --ink-600:#2A1812;       /* Roast — Hover auf Dunkel, Footer-Top */
  --ink-700:#1F0F0A;       /* Ink — Übergang Anker */
  --ink-800:#150C08;       /* Espresso — ANKER · Body, Headlines, Dunkel-Flächen, CTAs */
  --ink-900:#0A0604;       /* Pitch — Modal-Backdrop, selten */

  /* === Semantik-Aliase (zeigen auf die Skala) === */
  --bg-deep:var(--ink-800);     /* Footer, tiefster Bezirk */
  --paper:var(--ink-800);       /* Reportagen-Band, dunkle Inversion */
  --paper-2:var(--ink-800);     /* Featured-Card */
  --paper-3:var(--ink-600);     /* Hover auf Dunkel-Fläche */

  --ink:var(--ink-800);          /* primärer Text auf Cream */
  --ink-soft:var(--ink-400);     /* Warm Brown — Lede, Captions */
  --muted:var(--ink-300);        /* Smoke — Meta, Nummern */
  --rule:rgba(21,12,8,.14);
  --hair:rgba(21,12,8,.06);

  /* === Akzente — drei Stimmen, klare Rollen === */
  --accent:#7B93D1;              /* Cornflower — primärer kühler Akzent */
  --accent-soft:#5C77B8;         /* Cornflower hover/active */

  --action:#D3BEEB;              /* Deep Lavender — Action-Akzent, sehr sparsam */
  --action-soft:#B89CD8;         /* Lavender hover */

  --soft:#E3D4F4;                /* Lavender — weiche Surface, Hover-Highlights */
  --soft-2:#D3BEEB;              /* Lavender deeper */

  --hand:var(--ink-500);         /* Warm Cedar — Handschrift, Italic-Highlights */

  /* === Text auf Dunkel-Inversion === */
  --on-paper:var(--ink-50);
  --on-paper-soft:var(--ink-200);
  --on-paper-muted:var(--ink-300);

  --serif:"DM Serif Display","Cormorant Garamond",Georgia,serif;
  --sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --hand-font:"Homemade Apple","Caveat","Brush Script MT",cursive;

  /* Corner radii — every page overrides 14/6 to 6/4 (tighter, more editorial). */
  --r-sm:4px;
  --r:6px;
  --r-lg:24px;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font-family:inherit}

/* Type system */
.h1{font-family:var(--serif);font-weight:400;font-size:clamp(48px,6.4vw,108px);line-height:1.02;letter-spacing:-.015em;margin:0}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.4vw,72px);line-height:1.05;letter-spacing:-.01em;margin:0}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,38px);line-height:1.15;letter-spacing:-.005em;margin:0}
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.body{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink-soft);text-wrap:pretty}
.lede{font-family:var(--sans);font-size:20px;line-height:1.5;color:var(--ink-soft);font-weight:400}
.hand{font-family:var(--hand-font);font-weight:400;color:var(--hand);font-size:1.6em;line-height:1}
.mono-sm{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* Layout */
.page{max-width:1320px;margin:0 auto;padding:0 32px}
.section{padding:96px 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:var(--accent);color:var(--ink-50);font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid var(--accent);transition:transform .2s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-1px);background:var(--accent-soft);border-color:var(--accent-soft)}
.btn.ghost,.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--ink-50)}
.btn.ghost:hover,.btn.accent:hover{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--ink-50)}
.btn.action{background:var(--action);border-color:var(--action);color:var(--ink-800)}
.btn.action:hover{background:var(--action-soft);border-color:var(--action-soft);color:var(--ink-800)}

/* Top nav */
.topnav{position:sticky;top:0;z-index:50;background:rgba(253,249,244,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.topnav .inner{max-width:1320px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:8px}
.topnav .brand{font-family:var(--serif);font-size:24px;letter-spacing:-.01em;text-decoration:none;color:var(--ink);line-height:1;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.topnav .brand .dot{color:var(--accent)}
/* .topnav-links + .topnav-burger + .nav-drawer styles live in shared/header.css */

/* ===== Shared CTA — paper-card contact form ===== */
.pp-cta{background:var(--ink-800);color:var(--on-paper);padding:140px 32px 160px;position:relative;overflow:hidden}
.pp-cta .inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:start;position:relative;text-align:left}
.pp-cta .left{padding-top:8px}
.pp-cta .left .marker{display:flex;align-items:center;gap:18px;margin-bottom:32px}
.pp-cta .left .marker .num{font-family:var(--serif);font-style:italic;font-size:44px;color:var(--accent);line-height:1}
.pp-cta .left .marker .rule{width:60px;height:1px;background:rgba(253,249,244,.35)}
.pp-cta .left .marker .label{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:rgba(253,249,244,.78)}
.pp-cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.4vw,72px);line-height:1.05;letter-spacing:-.01em;margin:0;color:#FDF9F4;text-wrap:balance}
.pp-cta h2 i{font-style:italic;color:var(--accent);display:inline-block}
.pp-cta h2 .dot{color:var(--accent)}
.pp-cta .left p{font-size:17px;line-height:1.65;color:rgba(253,249,244,.78);margin:36px 0 0;max-width:38ch}
.pp-cta .left .contact{margin-top:48px;display:grid;grid-template-columns:auto 1fr;column-gap:32px;row-gap:14px;align-items:baseline;max-width:440px}
.pp-cta .left .contact dt{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--accent);margin:0}
.pp-cta .left .contact dd{margin:0;font-family:var(--sans);font-size:15px;color:#FDF9F4;letter-spacing:.01em}
.pp-cta .left .contact dd a{color:inherit;text-decoration:none;transition:color .2s}
.pp-cta .left .contact dd a:hover{color:var(--accent)}
.pp-cta .left .signoff{margin-top:56px;font-family:var(--hand-font);font-size:32px;color:var(--accent);transform:rotate(-2deg);display:inline-block;line-height:1.2}
.pp-cta .card-wrap{position:relative;padding-top:48px}
.pp-cta .scribble{position:absolute;top:-12px;right:8px;font-family:var(--hand-font);font-size:34px;color:var(--accent);transform:rotate(-4deg);line-height:1;white-space:nowrap;z-index:3}
.pp-cta form{position:relative;background:#FDF9F4;color:var(--ink);border-radius:14px;padding:48px 48px 44px;display:flex;flex-direction:column;gap:22px;box-shadow:0 30px 80px -30px rgba(0,0,0,.55),0 8px 24px -12px rgba(0,0,0,.35)}
.pp-cta form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pp-cta form::before{content:"";position:absolute;top:-26px;left:50%;transform:translateX(-50%) rotate(-3deg);width:120px;height:36px;background:#D9C9A8;background-image:linear-gradient(90deg,rgba(255,255,255,.18),rgba(0,0,0,.06));box-shadow:0 6px 14px -8px rgba(0,0,0,.5);opacity:.92}
.pp-cta form label{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink);display:flex;flex-direction:column;gap:8px;letter-spacing:.01em;text-transform:none}
.pp-cta form input,.pp-cta form textarea{font-family:var(--sans);font-size:15px;color:var(--ink);background:#FDF9F4;border:1px solid var(--ink-200);border-radius:10px;padding:14px 16px;outline:none;transition:border-color .2s,box-shadow .2s;width:100%;letter-spacing:normal;text-transform:none;font-weight:400}
.pp-cta form input::placeholder,.pp-cta form textarea::placeholder{color:var(--ink-300);opacity:1}
.pp-cta form input:focus,.pp-cta form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(123,147,209,.18)}
.pp-cta form textarea{min-height:128px;resize:vertical;line-height:1.5}
.pp-cta form button[type="submit"]{margin-top:10px;width:100%;background:var(--accent);border:1px solid var(--accent);color:#FDF9F4;font-family:var(--sans);font-size:15px;letter-spacing:.02em;font-weight:500;padding:18px 24px;border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s,transform .15s;text-transform:none}
.pp-cta form button[type="submit"]:hover{background:var(--accent-soft);border-color:var(--accent-soft);transform:translateY(-1px)}

@media (max-width:1000px){
  .pp-cta{padding:96px 20px 120px}
  .pp-cta .inner{grid-template-columns:1fr;gap:48px}
  .pp-cta form{padding:40px 28px 36px}
  .pp-cta form .row{grid-template-columns:1fr}
  .pp-cta .scribble{font-size:26px;top:-4px;right:0}
}