/* savro.co — marketing site
   Layout: an atelier dossier. Left-set editorial columns on the brand's
   cream-to-white ground, hairline umber rules, one ink band for the economics.
   Tokens follow the savro brand book v0.3 (colour, type scale, text ladder,
   elevation). The site deliberately commits to the brand's light ground. */

@font-face{font-family:"Zodiak";src:url("fonts/Zodiak-Light.woff2") format("woff2");font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:"Zodiak";src:url("fonts/Zodiak-LightItalic.woff2") format("woff2");font-weight:300 400;font-style:italic;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Variable.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  /* ground & structure */
  --cream:#FFF7E2; --white:#FFFFFF; --sand:#E8DCC8; --stone:#C8B79D; --umber:#645138; --ink:#0C0B09;
  /* accents: sparingly, never large fills */
  --ochre:#D9BE84; --verde:#A9D2C3; --rose:#D9B3A7; --azzurro:#A6B8D3;
  /* reserved: mark only */
  --glow:#9CC5DC;
  /* text ladder: ink at opacity */
  --t1:rgba(12,11,9,1); --t2:rgba(12,11,9,.68); --t3:rgba(12,11,9,.58); --t4:rgba(12,11,9,.28);
  --r1:#FFFFFF; --r2:rgba(255,255,255,.72); --r3:rgba(255,255,255,.5); --r-line:rgba(255,255,255,.16);
  --line:rgba(100,81,56,.16); --line-s:rgba(100,81,56,.08);
  --ok-ink:#2F6B57;
  /* elevation: warm, never black */
  --e-rest:0 1px 2px rgba(100,81,56,.07);
  --e-raised:0 2px 12px rgba(100,81,56,.09);
  --e-lift:0 14px 44px rgba(100,81,56,.16);
  /* type */
  --fd:"Zodiak","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --fb:"Satoshi","Avenir Next","Segoe UI",system-ui,sans-serif;
  /* rhythm */
  --wrap:1180px; --gut:clamp(16px,5vw,56px); --sec:clamp(72px,10vw,136px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--fb);font-size:16px;line-height:1.55;color:var(--t1);
  background-color:var(--white);
  -webkit-font-smoothing:antialiased;
}
/* page ground per brand book §04: cream-to-white gradient (168°, cream → white at 62%) with the
   140px fractal-noise grain blended in with overlay at 28% (rect .5 × .28 = .14). Both sit on one
   fixed layer that is painted once, so scrolling stays smooth. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;will-change:transform;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"),
    linear-gradient(168deg,var(--cream) 0%,var(--white) 62%);
  background-blend-mode:overlay,normal;
}
main,header,footer{position:relative;z-index:1}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--umber);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.label{font-family:var(--fb);font-weight:500;font-size:12px;letter-spacing:1.1px;text-transform:lowercase;color:var(--t3)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--r1);padding:8px 14px;border-radius:100px;z-index:50}
.skip:focus{left:16px}

/* long German compounds (Kennenlerngespräch) may hyphenate instead of overflowing */
h1,h2,h3{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:100px;
  font-family:var(--fb);font-weight:500;font-size:14px;letter-spacing:.6px;text-transform:lowercase;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:transform 150ms var(--ease),box-shadow 150ms var(--ease),background 150ms var(--ease)}
.btn-p{background:var(--ink);color:var(--r1);box-shadow:var(--e-raised)}
.btn-p:hover{transform:translateY(-2px);box-shadow:var(--e-lift)}
.btn-o{border-color:var(--line);color:var(--t1);background:rgba(255,255,255,.6)}
.btn-o:hover{border-color:var(--stone);background:var(--white)}
.btn-sm{min-height:40px;padding:0 20px;font-size:13px;white-space:nowrap}
.arrow{font-family:var(--fb);transition:transform 150ms var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- header ---------- */
.site-h{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:rgba(255,249,234,.97);border-bottom:1px solid var(--line-s)}
.site-h .wrap{display:flex;align-items:center;gap:24px;min-height:68px}
.mark{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:300;font-size:30px;line-height:1;text-decoration:none;letter-spacing:-.3px;margin-right:auto}
/* the mark: a diffuse blue aura, light from within a stone (Savro Blue is reserved for this) */
.orb{position:relative;top:.13em;flex:none;will-change:transform,opacity;width:26px;height:26px;border-radius:50%;   /* top: sits on the middle of the lowercase letters, not the line box */
  background:radial-gradient(circle at 50% 50%,rgba(156,197,220,.95) 0%,rgba(156,197,220,.62) 32%,rgba(156,197,220,.22) 58%,rgba(156,197,220,0) 72%)}
@media (prefers-reduced-motion:no-preference){.orb{animation:br 3.4s ease-in-out infinite}}
/* the mark as mouse pointer (site.js adds .has-orb for desktop mice only). Centre = click point */
.c-orb{position:fixed;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;pointer-events:none;z-index:2147483000;opacity:0;will-change:translate,scale;
  background:radial-gradient(circle,rgba(156,197,220,1) 0%,rgba(156,197,220,.95) 20%,rgba(156,197,220,.5) 40%,rgba(156,197,220,.16) 60%,rgba(156,197,220,0) 72%);
  transition:opacity 240ms var(--ease),scale 240ms var(--ease)}
.c-orb.on{opacity:1}
.c-orb.hot{scale:1.6;opacity:.55}
.c-orb.down{scale:.8}
.c-orb.text{opacity:0}
html.has-orb,html.has-orb *{cursor:none!important}
html.has-orb :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),textarea,select,[contenteditable]){cursor:auto!important}
@media (prefers-reduced-motion:reduce){.c-orb{transition:none}}
.nav{display:flex;gap:26px}
.nav a{font-size:14px;text-decoration:none;color:var(--t2);text-transform:lowercase;transition:color 150ms}
.nav a:hover{color:var(--t1)}
.lang{display:flex;gap:2px;font-size:12px;font-weight:500;letter-spacing:1px}
.lang a{text-decoration:none;color:var(--t3);padding:6px 7px;border-radius:6px}
.lang a[aria-current="true"]{color:var(--t1)}
@media (max-width:1180px){.nav{display:none}}
@media (max-width:359px){.site-h .btn-p{display:none}}   /* tiny phones: the sticky bar and hero carry the call button */
@media (max-width:560px){.site-h .wrap{gap:8px}.site-h .btn-sm{padding:0 13px}.mark{font-size:27px;gap:6px}.orb{width:22px;height:22px}}
@media (max-width:420px){.site-h .wrap{gap:6px}.site-h .btn-sm{padding:0 12px;font-size:12.5px}.mark{font-size:25px;gap:5px}.orb{width:20px;height:20px}.lang a{padding:6px 5px}}
@media (max-width:374px){html[lang="de"] .site-h .btn-p{display:none}.site-h .btn-sm{padding:0 10px}}   /* the German button label is longer */

/* ---------- hero ---------- */
.hero{padding-block:clamp(28px,4vw,56px) clamp(48px,5vw,72px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,88px);align-items:center}   /* copy sits on the middle of the card, so neither column leaves a hole */
.hero h1{font-family:var(--fd);font-weight:300;font-size:clamp(42px,5vw,64px);line-height:1.04;letter-spacing:-1.2px;margin:18px 0 0;text-wrap:balance}
.hero h1 em{display:block;font-style:italic;color:var(--t2)}
.lead{font-weight:300;font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--t2);max-width:34em;margin:28px 0 0}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-note{margin:22px 0 0;font-size:13px;color:var(--t3);max-width:34em}
@media (max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}   /* minmax: a long word can never widen the page */
@media (max-width:560px){.hero .cta-row{flex-direction:column}.hero .cta-row .btn{width:100%;justify-content:center}}   /* phones: two even, full-width buttons */
.nw{white-space:nowrap}

/* the advisor's offer: hero object */
.offer{position:relative;margin:0;background:var(--white);border:1px solid var(--line-s);border-radius:18px;box-shadow:var(--e-lift);overflow:hidden;max-width:460px;width:100%;justify-self:end}
.offer-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:var(--ink);color:var(--r1)}
.offer-brand{font-family:var(--fd);font-size:17px;font-weight:300;letter-spacing:.2px}
.offer-tag{font-size:11px;font-weight:500;letter-spacing:1px;text-transform:lowercase;color:var(--r3)}
.offer-art{background:#FEFCF7;border-bottom:1px solid var(--line-s)}
.offer-art img{display:block;width:100%;height:auto;aspect-ratio:1225/746}
.offer-b{padding:20px 22px 22px}
.offer-t{font-family:var(--fd);font-weight:300;font-size:25px;line-height:1.25;margin:0}
.offer-s{font-size:13px;color:var(--t3);margin:4px 0 16px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-top:1px solid var(--line-s);font-size:14px}
.row span:first-child{color:var(--t2)}
.row b{font-weight:500;font-variant-numeric:tabular-nums}
.row label{color:var(--t2)}
.row output{font-weight:500;font-variant-numeric:tabular-nums}
.row.total{border-top:1px solid var(--ochre)}
/* client price slider: the visitor plays advisor */
.price .row{padding-bottom:2px}
.slider{-webkit-appearance:none;appearance:none;display:block;width:100%;height:36px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y;--p:40%}
.slider:focus{outline:none}
.slider::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--ink) var(--p),var(--sand) var(--p))}
.slider::-moz-range-track{height:4px;border-radius:4px;background:var(--sand)}
.slider::-moz-range-progress{height:4px;border-radius:4px;background:var(--ink)}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;background:var(--white);border:1.5px solid var(--ink);box-shadow:var(--e-raised);transition:transform 150ms var(--ease)}
.slider::-moz-range-thumb{width:23px;height:23px;border-radius:50%;background:var(--white);border:1.5px solid var(--ink);box-shadow:var(--e-raised)}
.slider:active::-webkit-slider-thumb{transform:scale(1.12)}
.slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--umber);outline-offset:3px}
.slider:focus-visible::-moz-range-thumb{outline:2px solid var(--umber);outline-offset:3px}
.slider-hint{margin:-4px 0 8px;font-size:12px;letter-spacing:.4px;text-transform:lowercase;color:var(--t3);text-align:center;transition:opacity 300ms var(--ease)}
.slider-hint.done{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .slider.nudge::-webkit-slider-thumb{animation:nudge 2.6s var(--ease) 1.2s infinite}
  .slider.nudge::-moz-range-thumb{animation:nudge 2.6s var(--ease) 1.2s infinite}
  @keyframes nudge{0%,60%,100%{box-shadow:var(--e-raised),0 0 0 0 rgba(217,190,132,0)}20%{box-shadow:var(--e-raised),0 0 0 8px rgba(217,190,132,.45)}}
}
.row.total b{font-family:var(--fd);font-weight:300;font-size:22px}
.row small{font-size:12px;color:var(--t3)}
.offer-note{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--t3)}
.offer-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.pill{font-size:11px;font-weight:500;letter-spacing:1px;text-transform:lowercase;padding:5px 12px;border-radius:100px;background:rgba(169,210,195,.4);color:var(--ok-ink)}
.fine{font-size:11px;color:var(--t3)}
@media (max-width:900px){.offer{justify-self:start}}

/* ---------- proof strip ---------- */
.proof{border-block:1px solid var(--line)}
.proof ul{list-style:none;margin:0;padding:22px 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.proof li{font-size:14px;color:var(--t2);line-height:1.45;min-width:0}
.proof li b{display:block;font-family:var(--fd);font-weight:300;font-size:21px;color:var(--t1);margin-bottom:2px}
@media (max-width:1100px){.proof ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.proof ul{grid-template-columns:repeat(2,minmax(0,1fr))}.proof li:last-child{grid-column:1/-1}}

/* ---------- sections ---------- */
.sec{padding-block:var(--sec) 0}
.sec-h{max-width:760px}
.sec-h h2,.h2{font-family:var(--fd);font-weight:300;font-size:clamp(34px,4.4vw,56px);line-height:1.08;letter-spacing:-.6px;margin:14px 0 0;text-wrap:balance}
.sec-h p{font-weight:300;font-size:19px;color:var(--t2);margin:20px 0 0;max-width:36em}

/* steps: a real sequence, so numbered */
.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.steps li{padding:26px 26px 8px 0;min-width:0}
.steps li+li{padding-left:26px;border-left:1px solid var(--line-s)}
.step-n{font-family:var(--fd);font-style:italic;font-weight:300;font-size:20px;color:var(--umber)}
.steps h3{font-family:var(--fd);font-weight:300;font-size:24px;line-height:1.25;margin:10px 0 10px}
.steps p{margin:0;font-size:15px;color:var(--t2)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps li:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.steps li,.steps li+li{padding:22px 0 4px;border-left:0;border-top:1px solid var(--line-s)}.steps li:first-child{border-top:0}}

/* who does what */
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;margin-top:56px}
.side{background:var(--white);border:1px solid var(--line-s);border-radius:16px;box-shadow:var(--e-rest);padding:28px 30px;min-width:0}
.side.you{background:var(--sand);border-color:transparent}
.side.you .label{color:var(--t2)}
.side h3{font-family:var(--fd);font-weight:300;font-size:28px;margin:6px 0 16px}
.side ul{list-style:none;margin:0;padding:0;columns:1}
.side.house ul{columns:2;column-gap:32px}
.side li{break-inside:avoid;font-size:15px;line-height:1.45;color:var(--t2);padding:10px 0 10px 18px;border-bottom:1px solid var(--line-s);position:relative}
.side li::before{content:"";position:absolute;left:0;top:18px;width:5px;height:5px;border-radius:50%;background:var(--umber);opacity:.55}
@media (max-width:860px){.split{grid-template-columns:1fr}}
@media (max-width:560px){.side.house ul{columns:1}.side{padding:24px 22px}}

/* earnings: the one ink band */
.earn{margin-top:var(--sec);background:var(--ink);color:var(--r1);padding-block:clamp(64px,9vw,120px)}
.earn .label{color:var(--r3)}
.earn h2{color:var(--r1)}
/* goldsmith film: opens the dark band and fades into it */
.film{position:relative;height:clamp(260px,40vw,520px);margin:calc(-1 * clamp(64px,9vw,120px)) 0 clamp(48px,6vw,80px);overflow:hidden;background:var(--ink)}
.film-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,9,.25) 0%,rgba(12,11,9,0) 28%,rgba(12,11,9,.3) 50%,rgba(12,11,9,.62) 68%,rgba(12,11,9,.86) 84%,var(--ink) 100%)}
.film-line{position:absolute;z-index:1;left:0;right:0;bottom:clamp(16px,3vw,40px);max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  font-family:var(--fd);font-style:italic;font-weight:300;font-size:clamp(28px,4.2vw,56px);line-height:1.1;color:var(--r1)}
.sentences{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:0}
.sentences li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:baseline;padding:22px 0;border-top:1px solid var(--r-line)}
.sentences li:last-child{border-bottom:1px solid var(--r-line)}
.sentences .step-n{color:var(--ochre)}
.sentences p{margin:0;font-family:var(--fd);font-weight:300;font-size:clamp(24px,3vw,38px);line-height:1.2;text-wrap:balance}
.earn-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:40px}
.earn-notes p{margin:0;font-size:16px;line-height:1.6;color:var(--r2);max-width:30em}
.earn-notes b{color:var(--r1);font-weight:500}
.earn .btn-p{background:var(--cream);color:var(--ink)}
@media (max-width:760px){.earn-notes{grid-template-columns:1fr}.sentences li{grid-template-columns:40px minmax(0,1fr)}}

/* who it's for */
.fit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fit-groups{display:grid;gap:28px}
.fit-g .label{margin:0 0 12px}
.chips li{border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:100px;padding:11px 18px;font-size:15px;color:var(--t1)}
.sec-h .fit-note{margin:24px 0 0;font-family:var(--fd);font-weight:300;font-style:italic;font-size:22px;line-height:1.35;color:var(--t2)}
.fit-img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px;box-shadow:var(--e-raised)}
@media (min-width:1001px){.fit{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 250px}}
@media (max-width:1000px){.fit-img{grid-column:1/-1;width:min(100%,320px)}}
.faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(32px,5vw,72px);align-items:start;margin-top:40px}
.faq-wrap .faq{margin-top:0}
.faq-img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px;box-shadow:var(--e-raised);position:sticky;top:100px}
@media (max-width:1000px){.faq-wrap{grid-template-columns:1fr}.faq-img{display:none}}
.not{margin-top:clamp(56px,7vw,88px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.not div{border-top:1px solid var(--stone);padding-top:18px;min-width:0}
.not h3{font-family:var(--fd);font-weight:300;font-size:22px;margin:0 0 8px}
.not p{margin:0;font-size:15px;color:var(--t2)}
@media (max-width:860px){.fit{grid-template-columns:1fr}.not{grid-template-columns:1fr}}

/* faq */
.faq{max-width:860px;margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;
  font-family:var(--fd);font-weight:300;font-size:clamp(20px,2vw,24px);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--fb);font-weight:300;font-size:26px;color:var(--t3);transition:transform 300ms var(--ease);flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 24px;max-width:40em;color:var(--t2)}

/* apply */
.apply{padding-block:var(--sec)}
.apply .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,88px);align-items:start}
.next{list-style:none;margin:36px 0 0;padding:0}
.next li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:16px 0;border-top:1px solid var(--line-s)}
.next li b{display:block;font-weight:500}
.next li span{color:var(--t2);font-size:15px}
.form{background:var(--white);border:1px solid var(--line-s);border-radius:20px;box-shadow:var(--e-lift);padding:clamp(24px,4vw,40px);display:grid;gap:22px}
.field{display:grid;gap:8px}
.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 20px}
@media (max-width:359px){.field-row{grid-template-columns:minmax(0,1fr)}}
.field label{font-size:12px;font-weight:500;letter-spacing:1px;text-transform:lowercase;color:var(--t3)}
.field input{width:100%;padding:10px 0 12px;border:0;border-bottom:1px solid var(--line);background:transparent;font:inherit;font-size:17px;color:var(--t1);border-radius:0}
.field input:focus{outline:none;border-bottom-color:var(--ink)}
.field input:focus-visible{box-shadow:0 1px 0 0 var(--ink)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--t2);cursor:pointer}
.check input{width:22px;height:22px;margin:0;accent-color:var(--ink);flex:0 0 auto}
.form .btn{width:100%}
.form-fine{font-size:12px;color:var(--t3);margin:0}
.form-msg{font-size:14px;margin:0;padding:12px 14px;border-radius:10px;background:rgba(217,190,132,.28);color:var(--t1)}
@media (max-width:900px){.apply .wrap{grid-template-columns:minmax(0,1fr)}}

/* footer */
.site-f{border-top:1px solid var(--line);padding-block:clamp(88px,9vw,112px) 40px;overflow-x:clip}   /* the aura reaches past the edge on phones */
.site-f .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px 32px;align-items:start}
.aura{position:relative;display:inline-block;font-family:var(--fd);font-weight:300;font-size:clamp(56px,8vw,96px);line-height:1;letter-spacing:-1px}
/* brand book wordmark aura, as specified: 172% x 265% of the word, centred slightly low, 7px blur. Static: the header orb is the one that breathes */
.aura::before{content:"";position:absolute;left:50%;top:52%;width:172%;height:265%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(circle at center,rgba(156,197,220,.60) 0%,rgba(156,197,220,.30) 30%,rgba(156,197,220,0) 66%);filter:blur(7px)}
@keyframes br{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.05);opacity:1}}
.tagline{margin:14px 0 0;font-family:var(--fd);font-style:italic;font-weight:300;font-size:19px;color:var(--t2)}
/* footer: two short columns (pages, legal) and a bottom bar with © on the left, portal and instagram on the right */
.f-cols{display:grid;grid-template-columns:repeat(2,max-content);gap:0 72px;padding-top:10px}
.f-col{display:flex;flex-direction:column;align-items:flex-start}
.f-col .label{margin:0 0 10px}
.f-col a,.f-col button,.f-links a{color:var(--t2);text-decoration:none;background:none;border:0;padding:0;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.f-col a:hover,.f-col button:hover,.f-links a:hover{color:var(--t1)}
.f-bar{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:8px;padding-top:20px;border-top:1px solid var(--line-s)}
.f-links{display:flex;gap:0 24px}
.copy{font-size:12px;color:var(--t3);margin:0}
@media (max-width:700px){.site-f .wrap{grid-template-columns:1fr;gap:40px}.f-cols{gap:0 40px;padding-top:0}}

/* mobile apply bar (most ad traffic is on phones) */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:#FFF9EC;border-top:1px solid var(--line);
  display:none;transform:translateY(110%);transition:transform 300ms var(--ease)}
.mbar .btn{width:100%}
.mbar.on{transform:none}
@media (max-width:760px){.mbar{display:block}.apply{padding-bottom:calc(var(--sec) + 64px)}}

/* ---------- imprint & privacy pages ---------- */
.legal{padding-block:clamp(56px,8vw,104px) var(--sec)}
.legal .wrap{max-width:860px}
.legal h1{font-family:var(--fd);font-weight:300;font-size:clamp(40px,5vw,60px);line-height:1.05;letter-spacing:-.6px;margin:14px 0 10px}
.legal-sub{margin:0 0 8px;color:var(--t3);font-size:14px}
.legal h2{font-family:var(--fd);font-weight:300;font-size:26px;line-height:1.2;margin:48px 0 12px;padding-top:24px;border-top:1px solid var(--line)}
.legal h3{font-family:var(--fb);font-weight:500;font-size:16px;margin:28px 0 8px}
.legal p,.legal li{font-size:16px;line-height:1.65;color:var(--t2);max-width:68ch}
.legal p{margin:0 0 14px}
.legal a{color:var(--t1);text-decoration-color:var(--stone);text-underline-offset:3px}
.legal code{font-size:.9em;background:rgba(232,220,200,.5);padding:1px 5px;border-radius:4px}
.legal-note{font-size:14px!important;color:var(--t3)!important}
.terms .terms-for{padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.6);margin:20px 0 8px;max-width:68ch}
.legal h2.annex{margin-top:80px}
.terms .tbl table{min-width:0;font-size:14.5px}.terms .tbl td:last-child,.terms .tbl th:last-child{width:28%;white-space:nowrap}
.inline-link{background:none;border:0;padding:0;font:inherit;color:var(--t1);text-decoration:underline;text-decoration-color:var(--stone);text-underline-offset:3px;cursor:pointer}
.tbl{overflow-x:auto;margin:8px 0 18px;border:1px solid var(--line-s);border-radius:12px;background:var(--white)}
.tbl table{width:100%;min-width:640px;border-collapse:collapse;font-size:13.5px;line-height:1.5}
.tbl th{text-align:left;font-weight:500;color:var(--t1);background:rgba(232,220,200,.35);padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl td{vertical-align:top;color:var(--t2);padding:10px 12px;border-bottom:1px solid var(--line-s)}
.tbl tr:last-child td{border-bottom:0}

/* ---------- thank-you page: pick a time ---------- */
.thanks{padding-block:clamp(48px,7vw,96px) var(--sec)}
.thanks .wrap{max-width:900px}
.thanks h1{font-family:var(--fd);font-weight:300;font-size:clamp(36px,5vw,58px);line-height:1.06;letter-spacing:-.6px;margin:14px 0 12px;text-wrap:balance}
.thanks-lead{font-weight:300;font-size:19px;color:var(--t2);margin:0 0 28px;max-width:34em}
.thanks-fine{margin:16px 0 0;font-size:13px;color:var(--t3)}
.thanks-fine a,.thanks-back a,.thanks-note a{color:var(--t1);text-underline-offset:3px;text-decoration-color:var(--stone)}
.thanks-note{margin:24px 0 0;font-size:15px;color:var(--t2)}
.thanks-back{margin:28px 0 0;font-size:14px}
[hidden]{display:none!important}
/* booking screen (own UI; Google Calendar behind /api) */
.bk{background:var(--white);border:1px solid var(--line-s);border-radius:20px;padding:clamp(20px,3.4vw,36px);box-shadow:var(--e-raised)}
.bk h2.label{margin:0;font-size:12px}
.bk-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.bk-h2{margin-top:30px;padding-top:26px;border-top:1px solid var(--line-s)}
.bk-loading{display:flex;align-items:center;gap:12px;min-height:370px;justify-content:center;color:var(--t3);font-size:15px}
.bk-dot{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,rgba(156,197,220,.95) 0%,rgba(156,197,220,.5) 40%,rgba(156,197,220,0) 72%);animation:br 1.6s ease-in-out infinite}
.bk-days{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;margin:0 -2px;scrollbar-width:thin}
.bk-day{flex:none;scroll-snap-align:start;display:grid;justify-items:center;gap:2px;width:76px;padding:12px 0 11px;border:1px solid var(--line);border-radius:14px;background:var(--white);color:var(--t1);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.bk-day:hover{border-color:var(--stone)}
.bk-day .w,.bk-day .m{font-size:11.5px;font-weight:500;letter-spacing:.8px;text-transform:lowercase;color:var(--t3)}
.bk-day .d{font-family:var(--fd);font-weight:300;font-size:28px;line-height:1.1}
.bk-day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--r1)}
.bk-day[aria-pressed="true"] .w,.bk-day[aria-pressed="true"] .m{color:var(--r2)}
.bk-tz{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--t3)}
.bk-tz select{font:inherit;font-size:13px;color:var(--t1);background:transparent;border:0;border-bottom:1px solid var(--line);padding:4px 18px 4px 2px;border-radius:0;max-width:220px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23645138' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 3px center}
.bk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.bk-time{min-height:46px;border:1px solid var(--line);border-radius:100px;background:var(--white);color:var(--t1);font:inherit;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .15s,background .15s}
.bk-time:hover{border-color:var(--stone)}
.bk-time[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--r1)}
.bk-empty{grid-column:1/-1;margin:0;color:var(--t2);font-size:15px}
.bk-confirm{margin-top:30px;padding-top:26px;border-top:1px solid var(--line-s)}
.bk-when{font-family:var(--fd);font-weight:300;font-size:clamp(22px,2.6vw,28px);line-height:1.25;margin:10px 0 22px}
.bk-when small{display:block;font-family:var(--fb);font-size:14px;color:var(--t3);margin-top:4px}
.bk-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 28px;max-width:640px}
.bk-fields .wide{grid-column:1/-1}
.bk-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bk-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
.bk-change{background:none;border:0;padding:6px 0;font:inherit;font-size:14px;color:var(--t2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--stone);cursor:pointer}
.bk-small{margin:14px 0 0;font-size:13px;color:var(--t3)}
.bk-msg{margin:20px 0 0;padding:14px 18px;border-radius:12px;background:rgba(217,190,132,.18);font-size:15px;color:var(--t1)}
.bk-msg a{color:var(--t1);text-underline-offset:3px}
.booking-fallback p{margin:0;font-size:17px;color:var(--t1)}
.booking-fallback a{color:var(--t1);text-underline-offset:3px;text-decoration-color:var(--stone)}
.btn[disabled]{opacity:.55;pointer-events:none}
@media (max-width:560px){
  .bk{border-radius:16px;margin-inline:calc(var(--gut) * -.5)}
  .bk-fields{gap:22px 16px}
  .bk-day{width:68px}
  .bk-loading{min-height:470px}   /* about the height of the day + time picker, so nothing jumps when times arrive */
  .bk-times{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bk-actions .btn{width:100%}
}
/* confirmation page */
.bkd{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:28px 0 8px;padding:26px 30px;background:var(--white);border:1px solid var(--line-s);border-radius:20px;box-shadow:var(--e-raised)}
.bkd > div{flex:1 1 0;min-width:0}
.bkd-orb{top:0;width:44px;height:44px}
.bkd-day{font-family:var(--fd);font-weight:300;font-size:clamp(26px,3.2vw,34px);line-height:1.15;margin:0}
.bkd-time{margin:6px 0 0;font-size:16px;color:var(--t2)}
.bkd-next{margin:48px 0 0}
.bkd-steps{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
@media (max-width:560px){.bkd{padding:22px 22px;gap:16px}.bkd-orb{width:34px;height:34px}.bkd-meet{flex-basis:100%}}
@media (max-width:900px){.bkd-steps{grid-template-columns:1fr}.bkd-steps li,.bkd-steps li+li{padding:22px 0 4px;border-left:0;border-top:1px solid var(--line-s)}.bkd-steps li:first-child{border-top:0}}

/* ---------- cookie consent (assets/consent.js) ----------
   "reject all" and "accept all" share one style on purpose: German regulators
   and courts expect both choices to be equally easy. Don't restyle one of them. */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cb{position:fixed;z-index:40;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:min(440px,calc(100% - 32px));margin:0;padding:22px 22px 16px;border-radius:18px;
  background:#FFFCF4;
  border:1px solid var(--line);box-shadow:var(--e-lift);font-size:14px;line-height:1.55;color:var(--t2)}
.cb-t{margin:0 0 8px}
.cb-x{margin:0 0 16px}
.cb-b,.cd-b{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cd-b{grid-template-columns:repeat(3,1fr)}
.cb-btn{min-height:44px;padding:0 14px;font-size:13px;background:var(--ink);color:var(--r1);box-shadow:var(--e-rest)}
.cb-btn:hover{background:#2a2620}
.cb-f{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 0;font-size:13px;color:var(--t3)}
.cb-f a,.cb-l{color:var(--t2);background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.cb-f a:hover,.cb-l:hover{color:var(--t1)}
.cb-open .mbar{display:none!important}
/* German pages: a WhatsApp button sits next to the booking button in the bar / pill */
.mbar.wa{display:flex;align-items:center;gap:10px}
.mbar.wa .btn{flex:1 1 auto}
.mbar-wa{flex:none;width:48px;height:48px;border-radius:50%;display:block;background:var(--ink);
  text-decoration:none;box-shadow:0 6px 18px rgba(14,12,10,.16),0 1px 3px rgba(14,12,10,.10);transition:transform .2s var(--ease)}
.mbar-wa img{display:block;width:48px;height:48px}
.mbar-wa:hover{transform:translateY(-1px)}
.mbar-wa:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (min-width:761px){.mbar.wa .btn{flex:none}}
/* wide screens: slim bar along the bottom so the hero's apply button stays visible */
@media (min-width:900px){
  .cb{right:16px;width:auto;max-width:1148px;margin-inline:auto;padding:18px 22px;
    display:grid;grid-template-columns:minmax(0,1fr) 330px;column-gap:36px;row-gap:8px;align-items:center}
  .cb-m{grid-column:1;grid-row:1/3}
  .cb-x{margin:0}
  .cb-b{grid-column:2;grid-row:1;align-self:end}
  .cb-f{grid-column:2;grid-row:2;margin:0;justify-content:center;align-self:start}
}
/* phones: only what the law needs on the first layer: purpose, providers, US transfer,
   reject = accept, a way to choose, privacy policy and imprint */
@media (max-width:560px){
  .cb{left:0;right:0;bottom:0;width:auto;border-radius:16px 16px 0 0;border-width:1px 0 0;padding:14px 16px calc(10px + env(safe-area-inset-bottom,0px));
    max-height:60vh;overflow:auto;font-size:13px;line-height:1.45}
  .cb-t{display:none}
  .cb-x{margin:0 0 12px}
  .cb-b{gap:8px}
  .cb-f{margin-top:8px;font-size:12.5px;justify-content:center}
}

.cd{width:min(620px,calc(100% - 32px));max-height:min(86vh,820px);padding:0;border:1px solid var(--line);border-radius:20px;
  background:var(--white);color:var(--t1);box-shadow:var(--e-lift);overflow:auto}
.cd::backdrop{background:rgba(12,11,9,.32);backdrop-filter:blur(2px)}
.cd-in{padding:26px 26px 20px}
.cd-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cd h2{margin:0;font-family:var(--fd);font-weight:300;font-size:30px;line-height:1.1}
.cd-x{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--line);background:none;font-size:22px;line-height:1;color:var(--t2);cursor:pointer}
.cd-x:hover{color:var(--t1);border-color:var(--stone)}
.cd-intro{margin:10px 0 18px;color:var(--t2);font-size:15px}
.cd-cat{border-top:1px solid var(--line);padding:16px 0}
.cd-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cd h3{margin:0;font-family:var(--fb);font-weight:500;font-size:13px;letter-spacing:1.1px;text-transform:lowercase}
.cd-cat p{margin:6px 0 0;font-size:14px;color:var(--t2)}
.cd-on{font-size:12px;letter-spacing:.6px;text-transform:lowercase;color:var(--ok-ink)}
.cd details{margin-top:8px;font-size:13px}
.cd summary{cursor:pointer;color:var(--t3);text-transform:lowercase;letter-spacing:.4px}
.cd summary:hover{color:var(--t1)}
.cd dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:10px 0 0;color:var(--t2)}
.cd dt{color:var(--t3)}
.cd dd{margin:0}
.cd dd a{color:var(--t1)}
.cd-b{margin-top:8px;padding-top:18px;border-top:1px solid var(--line)}
.sw{position:relative;display:inline-flex;flex:none;cursor:pointer}
.sw input{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.sw-ui{width:44px;height:26px;border-radius:100px;background:var(--sand);border:1px solid var(--line);position:relative;transition:background 150ms var(--ease)}
.sw-ui::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--white);box-shadow:var(--e-raised);transition:transform 150ms var(--ease)}
.sw input:checked + .sw-ui{background:var(--ink)}
.sw input:checked + .sw-ui::after{transform:translateX(18px)}
.sw input:focus-visible + .sw-ui{outline:2px solid var(--umber);outline-offset:3px}
@media (max-width:560px){
  .cd{width:100%;max-width:none;max-height:92vh;margin:auto 0 0;border-radius:20px 20px 0 0}
  .cd-in{padding:22px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .cd-b{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
  .cb,.cd[open]{animation:rise 300ms var(--ease) both}
}

/* arrival: fade with an 8px rise, from a visible resting state */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise 600ms var(--ease) both}
  .rise.d1{animation-delay:80ms}.rise.d2{animation-delay:160ms}.rise.d3{animation-delay:240ms}
  @keyframes rise{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.mbar{transition:none}}

/* ---------- the savro portal: mock-ups in the style of the real tool ---------- */
.plat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4.5vw,56px) clamp(20px,3vw,36px);margin-top:56px}
.plat-item{margin:0;min-width:0}
.plat-item figcaption h3{font-family:var(--fd);font-weight:300;font-size:24px;line-height:1.25;margin:22px 0 8px}
.plat-item figcaption p{margin:0;font-size:15px;color:var(--t2);max-width:31em}
@media (max-width:760px){.plat-grid{grid-template-columns:minmax(0,1fr)}}

/* the stage: a soft cream backdrop; everything inside scales with its width */
.mk{position:relative;aspect-ratio:5/4;container-type:inline-size;border-radius:20px;overflow:hidden;border:1px solid var(--line-s);
  background:linear-gradient(168deg,var(--cream) 0%,var(--white) 62%);user-select:none;pointer-events:none}
.mk-in{position:absolute;inset:0;font-size:2.3cqw;line-height:1.4;color:var(--t1)}
.mk-sheet{position:absolute;background:var(--white);border:1px solid var(--line-s);border-radius:1em;box-shadow:var(--e-raised);display:flex;flex-direction:column}
.mk-top{display:flex;align-items:center;gap:.7em}
.mk-title{font-family:var(--fd);font-weight:300;font-size:1.9em;line-height:1}
.mk-sub,.mk-fl{font-size:.68em;letter-spacing:.09em;color:var(--t3)}
.mk-h{font-family:var(--fd);font-weight:300;font-size:1.2em;line-height:1.15}
.mk-chips{display:flex;gap:.4em;flex-wrap:wrap}
.mk-chip{border:1px solid var(--line);border-radius:100px;padding:.28em .85em;font-size:.72em;background:var(--white);white-space:nowrap}
.mk-chip.on{background:var(--ink);border-color:var(--ink);color:var(--r1)}
.mk-btn{display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--r1);border-radius:100px;padding:.65em 1.2em;font-size:.72em;letter-spacing:.04em;white-space:nowrap}
.mk-btn.o{background:var(--white);color:var(--t1);border:1px solid var(--line)}
.mk img{display:block;width:100%;height:100%;object-fit:cover}
.mk-orb{width:1.5em;height:1.5em;border-radius:50%;flex:none;background:radial-gradient(circle,rgba(156,197,220,.95) 0%,rgba(156,197,220,.55) 34%,rgba(156,197,220,0) 72%)}

/* client view: the client's page on a phone, with what happens next */
.mk-phone{position:absolute;left:10%;top:5.5%;height:89%;aspect-ratio:9/19.3;padding:.36em;border-radius:2.35em;
  background:linear-gradient(145deg,#2A2824 0%,#0C0B09 45%,#1C1A17 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),var(--e-lift)}
.mk-phone::before,.mk-phone::after{content:"";position:absolute;width:.22em;border-radius:.2em;background:#23211D}
.mk-phone::before{left:-.18em;top:18%;height:7%}
.mk-phone::after{right:-.18em;top:24%;height:11%}
.mk-screen{position:relative;height:100%;border-radius:2em;overflow:hidden;background:var(--white);display:flex;flex-direction:column}
.mk-ptop{position:relative;background:var(--ink);color:var(--r1);padding:0 0 .85em}
.mk-status{display:flex;justify-content:space-between;align-items:center;height:2.3em;padding:0 1.5em 0 1.7em;font-size:.56em;font-weight:600;letter-spacing:.02em}
.mk-sys{display:flex;align-items:flex-end;gap:.14em}
.mk-sys i{width:.26em;background:var(--r1);border-radius:.1em}
.mk-sys i:nth-child(1){height:.35em}.mk-sys i:nth-child(2){height:.5em}.mk-sys i:nth-child(3){height:.65em}.mk-sys i:nth-child(4){height:.8em}
.mk-sys b{width:1.7em;height:.85em;margin-left:.45em;border:1px solid rgba(255,255,255,.6);border-radius:.25em;box-shadow:inset 0 0 0 .12em var(--ink),inset 1.3em 0 0 var(--r1)}
.mk-island{position:absolute;top:.42em;left:50%;transform:translateX(-50%);width:32%;height:1.05em;border-radius:1em;background:#000}
.mk-pbar{font-family:var(--fd);font-weight:300;font-size:.7em;text-align:center;letter-spacing:.02em;white-space:nowrap;padding-top:.3em}
.mk-dots{display:flex;align-items:center;gap:.4em;padding:.95em 1em .6em;font-size:.58em}
.mk-dots i{width:.75em;height:.75em;border-radius:50%;background:var(--sand)}
.mk-dots i.done,.mk-dots i.now{background:var(--ink)}
.mk-dots i.now{box-shadow:0 0 0 .28em rgba(217,190,132,.5)}
.mk-dots span{margin-left:.6em;letter-spacing:.06em;white-space:nowrap}
.mk-pimg{margin:0 .75em;border-radius:.75em;overflow:hidden;aspect-ratio:1/1.02;background:var(--white);border:1px solid var(--line-s)}
.mk-pbody{padding:.8em .95em;display:flex;flex-direction:column;gap:.45em}
.mk-pbody .mk-h{font-size:1.05em}
.mk-note{font-family:var(--fd);font-style:italic;font-weight:300;font-size:.64em;color:var(--t2);margin-bottom:.2em}
.mk-phone .mk-btn{font-size:.6em;padding:.85em .8em}
.mk-home{position:absolute;bottom:.45em;left:50%;transform:translateX(-50%);width:34%;height:.22em;border-radius:1em;background:rgba(12,11,9,.85)}
.mk-toast{position:absolute;right:7%;width:42%;display:flex;align-items:center;gap:.8em;padding:.95em 1.05em;background:var(--white);border:1px solid var(--line-s);border-radius:1em;
  box-shadow:var(--e-lift)}
.mk-toast.t1{top:26%}
.mk-toast.t2{top:49%;right:10%}
.mk-toast b{display:block;font-weight:500;font-size:.62em;letter-spacing:.08em;color:var(--ok-ink)}
.mk-toast.t2 b{color:var(--umber)}
.mk-toast div span{display:block;font-size:.76em;line-height:1.3}
.mk-ok,.mk-pend{width:2.1em;height:2.1em;border-radius:50%;flex:none;display:grid;place-items:center}
.mk-ok{background:rgba(47,107,87,.1);color:var(--ok-ink)}
.mk-ok svg{width:1.05em;height:1.05em}
.mk-pend{background:radial-gradient(circle,var(--white) 52%,transparent 55%),conic-gradient(var(--ochre) 0 62%,var(--sand) 0)}

/* library */
.mk-req{margin-left:auto;font-size:.66em;padding:.6em 1.1em}
.mk-lib .mk-sheet{inset:7% 6% -2% 6%;padding:1.5em 1.6em;gap:.9em}
.mk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1em .9em}
.mk-thumb{aspect-ratio:4/3;border-radius:.6em;overflow:hidden;border:1px solid var(--line-s);background:var(--white)}
.mk-tn{font-family:var(--fd);font-weight:300;font-size:.8em;margin-top:.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-tc{font-size:.58em;letter-spacing:.08em;color:var(--t3)}

/* calculator: the piece behind, the estimate in front */
.mk-back{left:6%;top:50%;transform:translateY(-56%);width:47%;padding:1.35em 1.4em 1.6em;gap:.85em}
.mk-front{right:6%;top:50%;transform:translateY(-38%);width:47%;padding:1.35em 1.4em;gap:.8em;box-shadow:var(--e-lift)}
.mk-field{display:flex;flex-direction:column;gap:.1em;border-bottom:1px solid var(--line);padding-bottom:.45em}
.mk-fv{font-family:var(--fd);font-weight:300;font-size:.95em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-est-h{display:flex;align-items:center;gap:.85em;padding-bottom:.3em}
.mk-eimg{width:4.4em;height:4.4em;flex:none;border-radius:.6em;overflow:hidden;border:1px solid var(--line-s)}
.mk-sum{font-size:.68em;color:var(--t3);margin-top:.2em}
.mk-line{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;border-top:1px solid var(--line-s);padding-top:.55em;font-size:.74em;color:var(--t2)}
.mk-line b{font-weight:500;color:var(--t1);font-size:1.15em}
.mk-line.big b{font-family:var(--fd);font-weight:300;font-size:2.5em;line-height:1}
.mk-line b.it{font-family:var(--fd);font-style:italic;font-weight:300;font-size:1.55em}

/* savro AI */
.mk-ai .mk-sheet{left:7%;right:7%;top:50%;transform:translateY(-50%);padding:1.5em 1.6em 1.3em;gap:1em}
.mk-q{align-self:flex-end;max-width:82%;background:var(--cream);border:1px solid var(--line-s);border-radius:1em 1em .3em 1em;padding:.65em 1em;font-family:var(--fd);font-weight:300;font-size:1em;line-height:1.3}
.mk-ans{display:flex;gap:1.1em;font-size:.8em;color:var(--t2)}
.mk-ans p{margin:0 0 .6em}
.mk-ref{flex:none;width:9em}
.mk-ref img{aspect-ratio:1;height:auto;border-radius:.6em;border:1px solid var(--line-s)}
.mk-ref span{display:block;font-size:.82em;line-height:1.3;color:var(--t3);margin-top:.45em}
.mk-src{font-size:.85em;letter-spacing:.05em;color:var(--t3)}
.mk-input{margin-top:.2em;display:flex;justify-content:space-between;align-items:center;gap:1em;border-top:1px solid var(--line);padding-top:.85em;font-size:.74em;color:var(--t3)}
.mk-input span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-input .mk-btn{background:var(--umber);font-size:.9em}

/* ---------- quiet in-page calls to action (outline: the hero button stays the main one) ---------- */
.sec-cta{margin:clamp(40px,5vw,56px) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;font-family:var(--fd);font-weight:300;font-style:italic;font-size:20px;color:var(--t2)}
.sec-cta .btn{font-family:var(--fb);font-style:normal}

/* ---------- phones ---------- */
.offer .row b,.offer .row output,.pill{white-space:nowrap}
.lang a{display:inline-flex;align-items:center;min-height:40px}
.check{padding:10px 0;margin:-10px 0}                          /* whole row is a 44px tap target */
.f-links a,.f-col a,.f-col button{min-height:44px;display:inline-flex;align-items:center}
.thanks-back a,.booking-fallback a{display:inline-block;padding:12px 0;margin:-12px 0}
@media (max-width:420px){
  .offer-h{flex-direction:column;align-items:flex-start;gap:2px;padding:14px 18px}   /* brand and tag on two lines, not squeezed side by side */
  .sec-h .fit-note{font-size:19px}
  .fit-img{aspect-ratio:5/4;width:100%;object-position:50% 35%}
}
@media (max-width:900px){
  /* phones and tablets: heading, then the form, then the four steps. A tap on "book an intro call"
     lands right on the fields instead of above four paragraphs of explanation */
  .apply .wrap{display:flex;flex-direction:column;gap:0}
  .apply .sec-h{display:contents}
  .apply .sec-h .label{order:1}
  .apply .sec-h h2{order:2}
  .apply .apply-box{order:3;margin-top:28px}
  .apply .next{order:4;margin-top:36px}
}
@media (max-width:560px){.sec-cta{font-size:18px}.sec-cta .btn{width:100%}}
.mark{min-height:44px}
.offer-f{flex-wrap:wrap;row-gap:8px}
.bk-time{white-space:nowrap;padding:0 6px}
@media (max-width:374px){.bk-times{grid-template-columns:repeat(2,minmax(0,1fr))}}   /* "10:00 AM" stays on one line on the smallest phones */
/* five facts: headings share one row and subtitles the next, so they line up even when a heading wraps */
.proof ul{row-gap:18px}
.proof li{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:2px;align-content:start}
.proof li b{margin:0;white-space:nowrap}   /* headings are kept short so all five sit on one line */
@media (max-width:374px){.proof li b{font-size:19px;white-space:normal}}
.proof li{text-wrap:pretty}   /* no single word left alone on a subtitle line */

/* ---------- tablets in portrait (about 600–900 px) ---------- */
@media (min-width:561px) and (max-width:900px){
  .hero .offer{justify-self:start;max-width:600px}                 /* card as wide as the text above it, not a phone-sized card in a wide column */
  .apply .wrap{align-items:stretch}                                 /* form uses the full width */
  .site-f .wrap{grid-template-columns:1fr}
}
@media (min-width:601px) and (max-width:820px){.proof ul{grid-template-columns:repeat(3,minmax(0,1fr))}.proof li:last-child{grid-column:auto}}
@media (min-width:641px) and (max-width:860px){.not{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:561px) and (max-width:1000px){
  .fit{grid-template-columns:minmax(0,1fr) minmax(200px,260px);align-items:start}
  .fit .sec-h{grid-column:1/-1}
  .fit-img{grid-column:auto;width:100%;aspect-ratio:4/5}           /* photo beside the tags instead of alone underneath */
}

/* ---------- phones: more air (≤560 px) ---------- */
@media (max-width:560px){
  :root{--gut:24px;--sec:92px}                                     /* wider side margins, more space between sections */
  .site-h .login{display:none}                                     /* header keeps logo, language and the call button; advisors log in from the footer */
  .site-h .wrap{min-height:64px}
  .hero{padding-top:36px}
  .hero h1{margin-top:16px}
  .lead{margin-top:24px;line-height:1.6}
  .cta-row{margin-top:32px}
  .hero-note{margin-top:20px;line-height:1.6}
  .hero .wrap{row-gap:52px}
  .proof ul{padding-block:32px;row-gap:28px;column-gap:24px}
  .steps p,.not p,.next li span,.faq details p{line-height:1.65}
  .steps li,.steps li+li{padding-block:28px 8px}
  .sec-h p,.plat .sec-h p{line-height:1.6}
  .plat-grid{row-gap:56px}
  .chips{gap:10px 8px}
  .not{gap:28px}
  .faq summary{padding-block:24px}
  .form{padding:28px 24px;gap:26px}
  .site-f{padding-top:96px}
}
.hero .label{text-wrap:balance}
h2,h3{text-wrap:balance}   /* no single word left alone on the last line of a heading */

/* ---------- menu on phones and tablets (≤1180 px, where the section links don't fit) ---------- */
.menu,.nav-login{display:none}
@media (max-width:1180px){
  .site-h .wrap{position:relative}
  .menu{display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:7px;width:44px;height:44px;margin-right:-10px;padding:0 10px;flex:none;
    background:none;border:0;border-radius:10px;cursor:pointer;color:var(--t1)}
  .menu span{display:block;width:22px;height:1.5px;background:currentColor;border-radius:1px;transition:transform 220ms var(--ease)}
  .menu span:last-child{width:15px}
  .menu:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .nav-open .menu span:first-child{transform:translateY(4.25px) rotate(45deg)}
  .nav-open .menu span:last-child{width:22px;transform:translateY(-4.25px) rotate(-45deg)}
  .nav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;
    padding:6px var(--gut) 26px;background:#FFF9EA;border-bottom:1px solid var(--line-s);box-shadow:0 22px 34px -18px rgba(70,50,20,.18);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 200ms var(--ease),transform 200ms var(--ease),visibility 0s 200ms}
  .nav-open .nav{opacity:1;visibility:visible;transform:none;transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
  .nav a{font-family:var(--fd);font-weight:300;font-size:25px;line-height:1.2;color:var(--t1);padding:15px 0;border-bottom:1px solid var(--line-s)}
  .nav a.nav-login{display:block;font-family:var(--fb);font-size:15px;color:var(--t2);border-bottom:0;padding:20px 0 4px}
}
@media (prefers-reduced-motion:reduce){.nav,.nav-open .nav,.menu span{transition:none}}
.nav-lang{display:none}
@media (max-width:1180px){
  .site-h .lang{display:none}                                       /* language moves into the menu */
  .nav .nav-lang{display:flex;gap:8px;padding-top:18px}
  .nav .nav-lang a{font-family:var(--fb);font-size:14px;line-height:1;padding:10px 16px;border:1px solid var(--line);border-radius:100px;color:var(--t2)}
  .nav .nav-lang a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--r1)}
}
/* phones: the four portal views become one row you swipe through, the next one peeking in */
@media (max-width:560px){
  .plat-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding:4px var(--gut) 12px;
    scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .plat-grid::-webkit-scrollbar{display:none}
  .plat-grid > .plat-item{flex:0 0 84%;scroll-snap-align:start;min-width:0}
  .fit-img{display:none}                                            /* decorative photo; the page has enough on phones */
}

/* phones: while the bottom booking bar is showing, the header's own booking button steps back,
   so there is one booking button on screen, not two (it comes back when the menu is open) */
@media (max-width:760px){
  .site-h .btn-p{transition:opacity .25s ease,visibility .25s}
  html.mbar-on:not(.nav-open) .site-h .btn-p{opacity:0;visibility:hidden}
}

/* tablets and desktop: the same booking button floats as a pill in the bottom-right corner, where it
   covers the least content (phones keep the full-width bar). Same timing: appears once the hero button
   is gone, leaves at the form */
@media (min-width:761px){
  .mbar{display:block;left:auto;right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));
    padding:0;background:none;border:0;transform:translateY(calc(100% + 48px))}
  .mbar.on{transform:none}
  .mbar .btn{width:auto;white-space:nowrap;box-shadow:0 12px 32px rgba(14,12,10,.18),0 2px 6px rgba(14,12,10,.10)}
}

/* ---------- tablets in portrait, 740–900 px (iPad mini, iPad 11", iPad Air) ----------
   the hero goes side by side like on desktop: copy left, proposal card right, both above the fold.
   Stacked, the copy and card only filled the left three quarters and the right side stayed empty */
@media (min-width:740px) and (max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);column-gap:32px;align-items:center}
  .hero .offer{justify-self:stretch;max-width:none}
  .hero h1{font-size:44px}
  .hero .cta-row{flex-wrap:wrap}
  .hero .offer-h{flex-direction:column;align-items:flex-start;gap:2px}   /* brand and tag on two lines, as on phones */
}

/* ---------- who it's for, desktop (≥1001 px) ----------
   heading on top, then the two groups side by side under it, photo on the right next to both.
   Reads like the phone version (heading, then the tags) and the two groups sit as equals,
   instead of one long column of tags squeezed between heading and photo */
@media (min-width:1001px){
  .fit{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 280px;column-gap:clamp(40px,4vw,64px);row-gap:44px}
  .fit .sec-h{grid-column:1/3;grid-row:1}
  .fit .sec-h .fit-note{max-width:34em}
  .fit-groups{grid-column:1/3;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,40px);align-items:start}
  .fit-img{grid-column:3;grid-row:1/3;align-self:start}
}

/* ---------- homepage: quiet way out for people who want to buy a piece ---------- */
.hero-buy{margin:14px 0 0;font-size:13px;color:var(--t3)}
.hero-buy a,.faq a.c-link{color:var(--t1);text-decoration:underline;text-decoration-color:var(--stone);text-underline-offset:3px}
.hero-buy a:hover,.faq a.c-link:hover{text-decoration-color:var(--ink)}
/* hero: the other two audiences as quiet routes under a hairline, not as fine print */
.hero-paths{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line-s)}
.hero-paths a{display:flex;flex-direction:column;gap:5px;padding:2px 28px 2px 0;text-decoration:none;color:var(--t1)}
.hero-paths a+a{padding-left:28px;border-left:1px solid var(--line-s)}
.hero-paths .label{font-size:11px}
.hero-paths .hp-t{font-size:15px;line-height:1.35}
.hero-paths .arrow{position:relative;left:0;transition:left 200ms var(--ease)}   /* inline, so it never drops onto a line of its own */
.hero-paths a:hover .hp-t{text-decoration:underline;text-decoration-color:var(--stone);text-underline-offset:3px}
.hero-paths a:hover .arrow{left:3px}
@media (max-width:560px){.hero-paths{grid-template-columns:1fr;gap:16px;margin-top:30px}.hero-paths a{padding:0}.hero-paths a+a{padding:16px 0 0;border-left:0;border-top:1px solid var(--line-s)}}
.fit-more{margin:22px 0 0}

/* ---------- /for-clients (people who want to buy a piece) ---------- */
.client .site-h .lang{display:flex}                                  /* no menu on this page: language stays in the header */
.c-art{margin:0}
.c-art img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:20px;box-shadow:var(--e-lift)}
@media (min-width:901px){.c-hero .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.c-art{max-width:440px;justify-self:end;width:100%}}
@media (max-width:739px){.c-art img{aspect-ratio:4/3}}
.c-why{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.c-why li{border-top:1px solid var(--stone);padding-top:18px;min-width:0}
.c-why h3{font-family:var(--fd);font-weight:300;font-size:23px;line-height:1.25;margin:0 0 10px}
.c-why p{margin:0;font-size:15px;color:var(--t2)}
@media (max-width:1000px){.c-why{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}.c-why li:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:560px){.c-why{grid-template-columns:1fr;gap:28px}}
.c-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.c-steps{grid-template-columns:1fr}.c-steps li,.c-steps li+li{padding:22px 0 4px;border-left:0;border-top:1px solid var(--line-s)}.c-steps li:first-child{border-top:0}}
.field select,.field textarea{width:100%;padding:10px 0 12px;border:0;border-bottom:1px solid var(--line);background:transparent;font:inherit;font-size:17px;color:var(--t1);border-radius:0}
.field select{-webkit-appearance:none;appearance:none;padding-right:28px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23645138' stroke-width='1.4'/%3E%3C/svg%3E") right 4px center/12px 8px no-repeat}
.field select:invalid{color:var(--t3)}
.field textarea{resize:vertical;min-height:84px;line-height:1.5}
.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--t4)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sec-h p.c-advisor{font-size:15px;font-weight:400;margin-top:32px}
.c-advisor a{color:var(--t1);text-decoration:underline;text-decoration-color:var(--stone);text-underline-offset:3px;white-space:nowrap}
.c-done{align-content:start}
.c-done h3{font-family:var(--fd);font-weight:300;font-size:32px;line-height:1.15;margin:0}
.c-done p{margin:0;color:var(--t2)}
.c-done:focus{outline:none}
.client .apply{padding-bottom:var(--sec)}
/* page for businesses (/for-businesses, /de/fuer-firmen) */
.b-jw{margin-top:clamp(48px,6vw,72px);padding:clamp(26px,3.6vw,44px);background:var(--white);border:1px solid var(--line-s);border-radius:20px;box-shadow:var(--e-raised);max-width:820px}
.b-jw h3{font-family:var(--fd);font-weight:300;font-size:clamp(26px,2.8vw,34px);line-height:1.15;margin:12px 0 12px}
.b-jw p{margin:0;font-size:16px;line-height:1.65;color:var(--t2);max-width:40em}
.biz .b-faq{margin-top:40px}
.form-msg a{color:inherit}
@media (max-width:560px){
  .c-request .c-row2{grid-template-columns:minmax(0,1fr)}   /* budget and place each get a full line */
  .c-request .sec-h p{order:2}
  .c-request .c-done{order:3}
  .c-request .form{order:3}
  .c-request .sec-h p.c-advisor{order:5;margin-top:28px}
}

/* the photo beside "who it's for" stays in view while you read the tags, like the one beside the questions */
@media (min-width:1001px){.fit-img{position:sticky;top:100px}}

/* ---------- finish: small things that make the site feel calmer and more finished ---------- */
/* no grey flash on tap (iOS/Android); buttons give a slight press instead */
a,button,summary,label{-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
/* selected text in the brand's ochre instead of system blue */
::selection{background:rgba(217,190,132,.38);color:var(--ink)}
/* headings: proper kerning */
h1,h2,h3{font-kerning:normal;text-rendering:optimizeLegibility}
/* a thin, warm scrollbar on desktop instead of the grey system one */
html{scrollbar-width:thin;scrollbar-color:rgba(100,81,56,.32) transparent}
/* moving between pages (homepage, client page, booking): a soft cross-fade instead of a hard cut.
   Chrome, Edge and Safari 18+; other browsers just change page as before */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:260ms;animation-timing-function:var(--ease)}
/* questions open and close smoothly instead of jumping (newer Chrome and Edge; elsewhere they open as before) */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size 320ms var(--ease),content-visibility 320ms allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}
/* sections settle into place as they come into view: a short fade and a small rise, once.
   site.js only does this for parts that start below the first screen, so nothing visible ever
   disappears; with reduced motion, or without JavaScript, everything simply shows */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(14px);transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:var(--rv-d,0ms)}
  .rv.rv-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ---------- jewelry basics: link in the navigation and a small section before the questions ---------- */
/* in the top bar it sits after a thin divider: the other links jump within this page, this one opens a page */
@media (min-width:1181px){
  .nav{align-items:center;gap:24px}
  .nav a{white-space:nowrap}
  .nav .nav-biz{position:relative;padding-left:24px}
  .nav .nav-biz::before{content:"";position:absolute;left:0;top:50%;width:1px;height:14px;margin-top:-7px;background:var(--line)}
  .nav .nav-learn[aria-current="page"],.nav .nav-biz[aria-current="page"]{color:var(--t1)}
}
@media (min-width:1181px) and (max-width:1280px){.nav{gap:18px}.nav .nav-biz{padding-left:18px}.site-h .wrap{gap:20px}}
/* crash course band on the homepage: dark, in the same voice as "how you earn" */
.learn{margin-top:var(--sec);background:var(--ink);color:var(--r1);padding-block:clamp(64px,9vw,120px)}
.learn .label{color:var(--r3)}
.learn-h{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,96px);align-items:end}
.learn-t h2{font-family:var(--fd);font-weight:300;font-size:clamp(36px,4.6vw,60px);line-height:1.06;letter-spacing:-.8px;margin:14px 0 0;color:var(--r1);text-wrap:balance}
.learn-t p{font-weight:300;font-size:18px;line-height:1.6;color:var(--r2);margin:20px 0 0;max-width:30em}
.learn-art{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.4vw,32px);align-items:end;padding-bottom:6px}
.learn-fig{margin:0;text-align:center}
.learn-fig svg{display:block;width:100%;max-width:104px;height:auto;margin:0 auto;overflow:visible}
.learn-fig figcaption{margin-top:14px;font-size:12px;letter-spacing:1px;color:var(--r3)}
.learn .ln{fill:none;stroke:var(--ochre);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.learn .ln.thin{stroke-width:.8;opacity:.5}
.learn .fl,.learn .fl.light{fill:rgba(217,190,132,.07);stroke:var(--ochre);stroke-width:1.2;stroke-linejoin:round}
.learn-list{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;border-bottom:1px solid var(--r-line)}
.learn-list li{border-top:1px solid var(--r-line)}
.learn-list a{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1fr) 28px;gap:16px;align-items:baseline;padding:24px 0;color:inherit;text-decoration:none}
.learn-list .step-n{color:var(--ochre)}
.learn-list .t{font-family:var(--fd);font-weight:300;font-size:clamp(26px,3vw,38px);line-height:1.2;transition:transform .35s var(--ease)}
.learn-list .d{font-size:16px;line-height:1.5;color:var(--r2)}
.learn-list .arrow{justify-self:end;color:var(--ochre);transition:transform .35s var(--ease)}
.learn-list a:hover .t{transform:translateX(6px)}
.learn-list a:hover .arrow{transform:translateX(4px)}
.learn-list a:focus-visible{outline:2px solid var(--ochre);outline-offset:4px;border-radius:4px}
.learn .cta-row{margin-top:40px;align-items:center;column-gap:20px}
.learn-meta{font-size:14px;letter-spacing:.02em;color:var(--r3)}
.learn .btn-p{background:var(--cream);color:var(--ink)}
@media (max-width:900px){.learn-h{grid-template-columns:minmax(0,1fr);align-items:start}.learn-art{max-width:460px}}
@media (max-width:760px){
  .learn-list a{grid-template-columns:40px minmax(0,1fr) 20px;row-gap:6px;padding:20px 0}
  .learn-list .t{grid-column:2}.learn-list .arrow{grid-column:3;grid-row:1}
  .learn-list .d{grid-column:2;grid-row:2;font-size:15px}
}
@media (max-width:560px){.learn-t p{font-size:17px}.learn .cta-row .btn{width:100%;justify-content:center}.learn-meta{width:100%;text-align:center}.learn-fig figcaption{font-size:11px}}

/* crash course as a PDF: a quiet email form (homepage band and end of the crash course) */
.print-only{display:none}
.pdf-form{display:grid;gap:14px;max-width:560px}
.pdf-row{display:flex;gap:12px;align-items:flex-end}
.pdf-row input{flex:1 1 auto;min-width:0;padding:10px 0 12px;border:0;border-bottom:1px solid var(--line);background:transparent;font:inherit;font-size:17px;color:var(--t1);border-radius:0}
.pdf-row input:focus{outline:none;border-bottom-color:var(--ink)}
.pdf-row input::placeholder{color:var(--t4)}
.pdf-row .btn{flex:none}
.pdf-row .btn{text-transform:none}   /* keeps "PDF" in capitals; the label is written in lowercase otherwise */
.pdf-news{font-size:14px}
.pdf-fine{margin:0;font-size:13px;line-height:1.5;color:var(--t3)}
.pdf-fine a{color:inherit;text-underline-offset:3px}
.pdf-msg{margin:0;font-size:14px;color:#9A3B2A}
.pdf-done p{margin:0 0 6px;font-size:16px;line-height:1.55;color:var(--t2)}
.pdf-done b{font-weight:500;color:var(--t1)}
.pdf-done a{color:var(--t1);text-underline-offset:3px}
.pdf-done:focus{outline:none}
.pdf-get{margin-top:28px;border-top:1px solid var(--r-line);padding-top:22px}
.pdf-get-h{margin:0;font-size:15px;color:var(--r2)}
.pdf-get .pdf-news{display:none}
.pdf-get .pdf-form.open .pdf-news{display:flex}       /* the news box appears once someone starts on the form */
.pdf-get .pdf-form,.pdf-get .pdf-done{margin-top:14px}
.learn .pdf-row input{color:var(--r1);border-bottom-color:var(--r-line)}
.learn .pdf-row input:focus{border-bottom-color:var(--r1)}
.learn .pdf-row input::placeholder{color:var(--r3)}
.learn .pdf-row .btn-o{background:transparent;color:var(--r1);border-color:rgba(255,255,255,.35)}
.learn .pdf-row .btn-o:hover{border-color:var(--r1)}
.learn .pdf-news{color:var(--r2)}.learn .check input{accent-color:var(--ochre)}
.learn .pdf-fine{color:var(--r3)}
.learn .pdf-msg{color:#F0B8A8}
.learn .pdf-done p{color:var(--r2)}.learn .pdf-done b,.learn .pdf-done a{color:var(--r1)}
@media (max-width:560px){.pdf-row{flex-direction:column;align-items:stretch}.pdf-row .btn{justify-content:center}}

/* the savro portal: four views in a list, one stage that shows the chosen view */
.pt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:56px}
.pt-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.pt-item{position:relative;border-top:1px solid var(--line)}
.pt-item h3{margin:0;font:inherit}
.pt-tab{all:unset;box-sizing:border-box;display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;align-items:baseline;width:100%;padding:22px 0;cursor:pointer;
  font-family:var(--fd);font-weight:300;font-size:clamp(22px,2.1vw,28px);line-height:1.2;color:var(--t3);transition:color .3s var(--ease);-webkit-tap-highlight-color:transparent}
.pt-tab:hover,.pt-item.on .pt-tab{color:var(--t1)}
.pt-tab:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.pt-tab .step-n{font-size:18px}
.pt-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.pt-d>div{overflow:hidden;min-height:0}
.pt-d p{margin:0;padding:0 0 26px 56px;font-size:16px;line-height:1.6;color:var(--t2);max-width:32em}
.pt-item.on .pt-d{grid-template-rows:1fr}
.pt-bar{position:absolute;left:0;right:0;top:-1px;height:1px;overflow:hidden}
.pt-bar i{display:block;height:100%;background:var(--ochre);transform:scaleX(0);transform-origin:left center}
.pt-item.on .pt-bar i{transform:none}
.pt.auto .pt-item.on .pt-bar i{animation:pt-fill 7s linear both}
.pt.auto.hold .pt-item.on .pt-bar i,.pt.auto.off .pt-item.on .pt-bar i{animation-play-state:paused}
@keyframes pt-fill{from{transform:scaleX(0)}to{transform:none}}
.pt-stage{position:relative;aspect-ratio:5/4;border-radius:24px;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 70% at 72% 18%,rgba(217,190,132,.20) 0%,rgba(217,190,132,0) 60%),linear-gradient(160deg,#221E18 0%,#13110E 55%,var(--ink) 100%);
  box-shadow:0 40px 90px -40px rgba(12,11,9,.55),0 2px 6px rgba(12,11,9,.08)}
.pt-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);pointer-events:none;z-index:2}
.pt-shot{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(10px) scale(.985);
  transition:opacity .55s var(--ease),transform .8s var(--ease),visibility 0s linear .55s}
.pt-shot.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease) .08s,transform .9s var(--ease) .08s,visibility 0s}
.pt-shot .mk{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0;background:none}
.pt-stage .mk-sheet,.pt-stage .mk-toast{border-color:rgba(255,255,255,.5);box-shadow:0 24px 60px -20px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.25)}
.pt-stage .mk-phone{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 30px 70px -20px rgba(0,0,0,.7)}
@media (max-width:900px){
  .pt{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:40px}
  .pt-stage{order:-1;border-radius:20px}
}
@media (max-width:560px){.pt-tab{grid-template-columns:40px minmax(0,1fr);padding:18px 0;font-size:22px}.pt-d p{padding-left:48px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.pt-d,.pt-shot,.pt-shot.on{transition:none}}
@media (hover:hover) and (min-width:901px){.f-col a,.f-col button{min-height:34px}}

/* intro call section: two ways in. "book a call" (the form as before) and "ask a question" (/api/question).
   The switch sits above the white card; the German question form also offers WhatsApp. */
.apply-box{display:grid;gap:14px;min-width:0}
.ask-tabs{justify-self:start;display:inline-flex;gap:2px;padding:4px;border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.6)}
.ask-tabs button{font:inherit;font-size:14px;line-height:1;padding:0 18px;min-height:40px;border:0;border-radius:100px;background:none;color:var(--t2);cursor:pointer;text-transform:lowercase;transition:background 150ms,color 150ms}
.ask-tabs button:hover{color:var(--t1)}
.ask-tabs button[aria-selected="true"]{background:var(--ink);color:var(--r1)}
.ask-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ask-lead{margin:0;font-size:15px;line-height:1.55;color:var(--t2)}
.ask-wa{margin:-8px 0 0;font-size:14px;color:var(--t2);text-align:center}
.ask-wa a,.hero-ask a{color:var(--t1);text-decoration:underline;text-decoration-color:var(--stone);text-underline-offset:3px}
.ask-wa a:hover,.hero-ask a:hover{text-decoration-color:var(--ink)}
.ask-done .label{margin:0}
.ask-done button.c-link{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:var(--t1);text-decoration:underline;text-decoration-color:var(--stone);text-underline-offset:3px}
.hero-ask{margin:20px 0 0;font-size:15px;color:var(--t2)}
.hero-ask .arrow{color:var(--t1)}
.hero-ask+.hero-note{margin-top:8px}
@media (max-width:560px){.ask-tabs{justify-self:stretch}.ask-tabs button{flex:1}}

/* the same quiet alternative under every mid-page booking button: "Not ready for a call? Ask us a question first →" */
.cta-ask{margin:16px 0 0;font-size:15px;color:var(--t2)}
.sec-cta+.cta-ask{margin-top:14px}
.cta-ask a{color:var(--t1);text-decoration:underline;text-decoration-color:var(--stone);text-underline-offset:3px}
.cta-ask a:hover{text-decoration-color:var(--ink)}
.cta-ask .arrow{color:var(--t1)}
.earn .cta-ask{color:var(--r2)}
.earn .cta-ask a,.earn .cta-ask .arrow{color:var(--r1);text-decoration-color:var(--r3)}
.earn .cta-ask a:hover{text-decoration-color:var(--r1)}

/* "ask a question first", the creative way: a small speech-bubble companion next to the header's "book a call"
   pill (desktop) and next to the sticky booking button (phones: bar, wider screens: floating pill).
   Hover or focus shows a little speech bubble with the words; once per visit it pops out on its own for a few
   seconds (site.js, section 10b), so people learn what the icon means. Phones and tablets also get
   "ask a question first" in the menu. */
.ask-dot{position:relative;display:none;flex:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:0;background:var(--ink);color:var(--r1);text-decoration:none;box-shadow:var(--e-raised);transition:transform 150ms var(--ease)}
.ask-dot:hover{transform:translateY(-1px)}
.ask-dot:focus-visible,.mbar-ask:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (min-width:1181px){.ask-dot{display:inline-flex;margin-left:-10px}}
.ask-tip{position:absolute;z-index:5;width:max-content;max-width:270px;padding:10px 14px 11px;border-radius:12px;background:var(--ink);color:var(--r2);
  font-family:var(--fb);font-size:13px;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;text-align:left;white-space:normal;
  box-shadow:0 12px 32px rgba(14,12,10,.18),0 2px 6px rgba(14,12,10,.10);opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;pointer-events:none}
.ask-tip b{display:block;margin-top:2px;color:var(--r1);font-weight:500}
.ask-tip::before{content:"";position:absolute;width:10px;height:10px;background:var(--ink);transform:rotate(45deg)}
.ask-dot .ask-tip{top:calc(100% + 12px);right:0}
.ask-dot .ask-tip::before{top:-4px;right:15px}
.ask-dot:hover .ask-tip,.ask-dot:focus-visible .ask-tip,.tip-on .ask-tip{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mbar.ask{display:flex;align-items:center;gap:10px}
.mbar.ask .btn{flex:1 1 auto;min-width:0;white-space:nowrap}
.mbar-ask{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  background:var(--ink);border:0;color:var(--r1);text-decoration:none;
  box-shadow:0 6px 18px rgba(14,12,10,.16),0 1px 3px rgba(14,12,10,.10);transition:transform .2s var(--ease)}
.mbar-ask svg{width:22px;height:22px}
.mbar-ask:hover{transform:translateY(-1px)}
.mbar-ask .ask-tip{bottom:calc(100% + 14px);right:0}
.mbar-ask .ask-tip::before{bottom:-4px;right:19px}
@media (hover:hover){.mbar-ask:hover .ask-tip{opacity:1;visibility:visible;transform:none}}
.l-short{display:none}
@media (max-width:480px){html[lang="de"] .mbar .l-long{display:none}html[lang="de"] .mbar .l-short{display:inline}}
@media (max-width:300px){.mbar .l-long{display:none}.mbar .l-short{display:inline}}
@media (min-width:761px){.mbar.ask .btn{flex:none}}
@media (prefers-reduced-motion:reduce){.ask-tip{transition:none;transform:none}}

/* desktop header: language and portal login folded into one small menu (globe + "en"), so the bar only
   carries the page links, "book a call" and the question bubble. Tablets and phones keep their own layout
   (language and login live in the burger menu there). The client page has its own header and keeps its switch. */
.util{display:none;position:relative}
@media (min-width:1181px){
  body:not(.client) .site-h .lang,.site-h .login{display:none}
  .util{display:block}
}
.util-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;border:0;border-radius:100px;background:none;
  font:inherit;font-size:13px;font-weight:500;letter-spacing:1px;color:var(--t2);cursor:pointer;transition:background 150ms,color 150ms}
.util-btn:hover,.util-btn[aria-expanded="true"]{background:rgba(255,255,255,.7);color:var(--t1)}
.util-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.util-chev{transition:transform 200ms var(--ease)}
.util-btn[aria-expanded="true"] .util-chev{transform:rotate(180deg)}
.util-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:40;min-width:210px;padding:10px;border:1px solid var(--line-s);border-radius:16px;
  background:var(--white);box-shadow:0 18px 44px rgba(14,12,10,.14),0 2px 6px rgba(14,12,10,.06)}
.util-menu .label{margin:6px 10px 4px;font-size:11px}
.util-menu .label + a{margin-top:0}
.util-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:10px;font-size:14px;color:var(--t1);text-decoration:none}
.util-menu a:hover{background:var(--cream,#FFF7E2)}
.util-menu a[aria-current="true"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.util-menu .label:not(:first-child){margin-top:10px;padding-top:10px;border-top:1px solid var(--line-s)}

/* phones: the lines under full-width buttons sit centred under them, with one rhythm:
   buttons → 18px → "not ready for a call?" → 6px → small note → 30px → the routes below */
@media (max-width:560px){
  .hero-ask,.hero-note{text-align:center;margin-left:auto;margin-right:auto}
  .hero-ask{margin-top:18px}
  .hero-ask+.hero-note{margin-top:6px}
  .hero-paths{margin-top:30px}
  .sec-cta+.cta-ask{text-align:center;margin-top:14px}
}
.hero-ask a,.cta-ask a{white-space:nowrap}   /* the link stays one piece: "Ask us a question first →" */

/* split pill: "book a call" and the question bubble join into one black pill with a thin divider
   (header on desktop, sticky bar on phones, floating pill on wider screens). Booking stays the larger part. */
@media (min-width:1181px){
  .site-h .btn-p.btn-sm{border-radius:100px 0 0 100px;padding-right:16px}
  .site-h .btn-p.btn-sm:hover{transform:none}
  .ask-dot{margin-left:-24px;width:44px;height:40px;border-radius:0 100px 100px 0;box-shadow:var(--e-raised);
    border-left:1px solid rgba(255,255,255,.22)}
  .ask-dot:hover{transform:none;background:#25211c}
  .ask-dot svg{width:18px;height:18px;margin-right:3px}
}
@media (min-width:1181px) and (max-width:1280px){.ask-dot{margin-left:-20px}}
.mbar.ask{gap:0}
.mbar.ask .mbar-wa{margin-right:10px}
.mbar.ask .btn{border-radius:100px 0 0 100px}
.mbar.ask .btn:hover{transform:none}
.mbar-ask{width:54px;height:48px;border-radius:0 100px 100px 0;border-left:1px solid rgba(255,255,255,.22);box-shadow:var(--e-raised)}
.mbar-ask:hover{transform:none;background:#25211c}
.mbar-ask svg{margin-right:4px}
@media (min-width:761px){.mbar-ask{box-shadow:0 12px 32px rgba(14,12,10,.18),0 2px 6px rgba(14,12,10,.10)}}

/* quality: first item in the strip under the hero; its heading may wrap (the others stay on one line) */
.proof li.q b{white-space:normal}
/* quality statement under the hero of the client and business pages */
.qband{border-block:1px solid var(--line)}
.qband .wrap{display:grid;grid-template-columns:minmax(120px,.3fr) minmax(0,1fr);gap:12px 32px;align-items:baseline;padding-block:clamp(24px,3vw,34px)}
.qband .label{margin:0}
.qband-t{margin:0;max-width:44em;font-family:var(--fd);font-weight:300;font-size:clamp(19px,1.9vw,23px);line-height:1.4;color:var(--t1);text-wrap:pretty}
@media (max-width:700px){.qband .wrap{grid-template-columns:1fr}}
.proof li.q b{white-space:nowrap}
@media (min-width:1101px){.proof ul{grid-template-columns:minmax(0,1.7fr) repeat(4,minmax(0,1fr));column-gap:28px}}
@media (min-width:821px) and (max-width:1100px){.proof ul{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.proof li.q{grid-column:1/-1}.proof li:last-child{grid-column:auto}}
@media (max-width:374px){.proof li.q b{white-space:normal}}

/* phone sticky bar: no backing strip, the buttons float over the page; the empty strip lets taps through */
@media (max-width:760px){
  .mbar{background:none;border-top:0;pointer-events:none}
  .mbar > *{pointer-events:auto}
  .mbar .btn,.mbar-ask{box-shadow:0 10px 28px rgba(14,12,10,.22),0 2px 6px rgba(14,12,10,.12)}
  .mbar-wa{box-shadow:0 10px 28px rgba(14,12,10,.18)}
}

/* phone hero film (≤560px): the goldsmith film behind the hero text, white type on top.
   Switched on by the class "has-film" on the hero section; without it the hero stays plain cream.
   Desktop and tablet are unchanged (the price card sits next to the hero there). */
.hero-film{display:none}
@media (max-width:560px){
  .hero.has-film{padding-top:0}
  .hero.has-film .wrap{row-gap:40px}
  .hero.has-film .wrap > div:first-child{position:relative;isolation:isolate;padding:40px 0 34px}
  .hero.has-film .hero-film{display:block;position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);overflow:hidden;background:#0c0b09}
  /* the still frame is an <img> in the page (phones only, via <picture>), so the browser finds it early: it is the
     first thing painted in the hero (LCP). The film is laid over it once it plays. */
  .hero-film picture{display:contents}
  .hero-film .hero-still{position:absolute;top:0;left:-52vw;display:block;width:255vw;height:auto;max-width:none}
  /* zoomed out so the whole ring shows: the film is 255% of the screen width, with the ring centred,
     and its lower edge fades into black */
  /* no mask-image on the video itself: iPhones (WebKit) fail to show masked videos. The fade into black is
     the first layer of the overlay instead, solid from 142vw so the film's lower edge never shows */
  .hero-film video{position:absolute;top:0;left:-52vw;display:block;width:255vw;height:auto;max-width:none}
  .hero-film::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(12,11,9,0) 100vw,#0c0b09 142vw),
      linear-gradient(180deg,rgba(12,11,9,.67) 0%,rgba(12,11,9,.73) 45%,rgba(12,11,9,.88) 100%)}
  .hero.has-film .label{color:rgba(255,255,255,.9)}
  .hero.has-film h1{color:#fff}
  .hero.has-film h1 em{color:rgba(255,255,255,.9)}
  .hero.has-film .lead{color:rgba(255,255,255,.92)}
  .hero.has-film .btn-p{background:var(--cream);color:var(--ink)}
  .hero.has-film .btn-o{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
  .hero.has-film .hero-ask{color:rgba(255,255,255,.88)}
  .hero.has-film .hero-ask a,.hero.has-film .hero-ask .arrow{color:#fff;text-decoration-color:rgba(255,255,255,.55)}
  .hero.has-film .hero-paths{border-top-color:rgba(255,255,255,.22)}
  .hero.has-film .hero-paths a{color:#fff}
  .hero.has-film .hero-paths a+a{border-top-color:rgba(255,255,255,.22)}
  .hero.has-film .hero-paths .label{color:rgba(255,255,255,.75)}
  /* the same film already plays in the hero, so the band at the top of "how you earn" is dropped on phones */
  body:has(.hero.has-film) .earn .film{display:none}
}

/* sticky buttons over a dark section: cream instead of black (site.js 4a2 sets .dark) */
.mbar.dark .btn-p{background:var(--cream);color:var(--ink)}
.mbar.dark .mbar-ask{background:var(--cream);color:var(--ink);border-left-color:rgba(12,11,9,.14)}
.mbar.dark .mbar-ask:hover{background:#f3ead2}
.mbar.dark .ask-tip,.mbar.dark .ask-tip::before{background:var(--cream)}
.mbar.dark .ask-tip{color:var(--t2)}
.mbar.dark .ask-tip b{color:var(--ink)}
.mbar .btn-p,.mbar-ask{transition:background-color .25s var(--ease),color .25s var(--ease),transform .2s var(--ease)}
.mbar.dark .mbar-wa{box-shadow:0 0 0 1px rgba(255,255,255,.28),0 10px 28px rgba(0,0,0,.3)}

/* brand ground on more surfaces (brand book §04: 168°, cream #FFF7E2 easing to white at 62%):
   - the beige buttons on dark sections carry the same blend, so they read as a piece of the page ground
   - the header bar (and the phone menu panel under it) use the page ground itself, fixed to the screen like
     the body's, with the same grain, so the bar sits seamlessly on the page instead of as a flat beige strip */
.earn .btn-p,.learn .btn-p,.mbar.dark .btn-p,.mbar.dark .mbar-ask{
  background-color:var(--cream);background-image:linear-gradient(168deg,var(--cream) 0%,var(--white) 62%)}
@media (max-width:560px){.hero.has-film .btn-p{background-color:var(--cream);background-image:linear-gradient(168deg,var(--cream) 0%,var(--white) 62%)}}
.mbar.dark .mbar-ask:hover{background-image:none;background-color:#f3ead2}
.site-h{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E") fixed,
    linear-gradient(168deg,var(--cream) 0%,var(--white) 62%) fixed;
  background-blend-mode:overlay,normal;background-color:var(--cream)}
/* phones and tablets: no fixed backgrounds (they repaint on every scroll frame there and flicker). The bar is
   always at the top of the screen, so the gradient is simply sized to the screen and anchored at the top,
   which shows the same slice of the page ground; the menu panel continues it 68px further down.
   The strip above the bar (under the notch / status bar) gets the cream too, so nothing scrolls through it. */
@media (max-width:1180px){
  .site-h{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"),
    linear-gradient(168deg,var(--cream) 0%,var(--white) 62%) 0 0/100vw 100vh no-repeat;
    background-blend-mode:overlay,normal;background-color:var(--cream)}
  .nav{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"),
    linear-gradient(168deg,var(--cream) 0%,var(--white) 62%) 0 -68px/100vw 100vh no-repeat;
    background-blend-mode:overlay,normal;background-color:var(--cream)}
}

/* a cream skirt above the sticky bar: covers the strip under the status bar / notch and the 1–2px gap phones
   briefly show above sticky bars while the browser toolbar collapses on scroll. It sits above the page, so at
   the very top it is simply off-screen. */
.site-h::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:calc(env(safe-area-inset-top,0px) + 120px);
  background:var(--cream);pointer-events:none}