/* ============================================================
   bewusstleiten.ch — Stylesheet
   Design system: editorial Swiss, tension between warmth & precision.
   Palette: ivory paper / deep petrol ink / brass lever accent.
   ============================================================ */

:root{
  --bg:#F1ECE2;
  --bg-2:#EAE2D2;
  --bg-3:#F7F3EB;
  --ink:#191512;
  --coal:#121B17;            /* deep petrol-black, dark sections */
  --forest:#10241C;
  --petrol:#1F5A4C;
  --petrol-soft:#2E6B5B;
  --brass:#B0833E;
  --brass-soft:#C9A25C;
  --stone:#6E6759;
  --line:rgba(25,21,18,.16);
  --line-light:rgba(247,243,235,.16);

  --serif:'Fraunces', Georgia, Times, serif;
  --sans:'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --max:1320px;
  --pad:clamp(20px,5vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  font-size:clamp(15px,1.05vw,17.5px);
  font-weight:400;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max,var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.wide{--pad:clamp(20px,2.5vw,40px)}

.eyebrow{
  font-family:var(--mono);
  font-size:clamp(11px,.8vw,13px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--petrol);
  font-weight:500;
  display:inline-flex;align-items:center;gap:.8em;
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
.on-dark .eyebrow{color:var(--brass-soft)}

.display{
  font-family:var(--serif);
  font-weight:420;
  line-height:1.03;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.h1{font-size:clamp(44px,7.6vw,116px)}
.h2{font-size:clamp(34px,4.6vw,72px)}
.h3{font-size:clamp(26px,3vw,42px)}
.lead{font-size:clamp(18px,1.5vw,23px);line-height:1.5;color:var(--ink);max-width:56ch}
.on-dark .lead{color:rgba(247,243,235,.85)}
.serif-i{font-family:var(--serif);font-style:italic;font-weight:380}

section{position:relative}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding:18px clamp(20px,5vw,64px);
  transition:background .4s var(--ease),padding .3s var(--ease);
}
.nav.scrolled{background:rgba(241,236,226,.86);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);padding-block:14px}
.brand{font-family:var(--serif);font-size:22px;font-weight:520;letter-spacing:-.01em;display:flex;align-items:baseline;gap:5px}
.brand b{font-weight:620}
.brand em{font-style:normal;color:var(--petrol)}
.nav-links{display:flex;gap:clamp(14px,2vw,30px);align-items:center}
.nav-links a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:inherit;opacity:.72;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-links a .dot{color:var(--brass)}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.burger span{width:26px;height:2px;background:var(--ink);transition:.3s var(--ease)}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){.nav-links{position:fixed;inset:0;background:var(--coal);color:var(--bg);
  flex-direction:column;justify-content:center;gap:1.6rem;transform:translateY(-102%);transition:transform .5s var(--ease)}
  .nav-links a{font-size:22px;opacity:1;font-family:var(--serif);text-transform:none;letter-spacing:0}
  .nav.open .nav-links{transform:translateY(0)}
  .burger{display:flex}}

/* ---------- Hero ---------- */
.hero{background:var(--bg);padding-top:clamp(120px,17vh,180px);padding-bottom:0}
.hero .topline{display:flex;justify-content:space-between;gap:2rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,70px)}
.hero .h1{max-width:15ch}
.hero .h1 .accent{color:var(--petrol)}
.hero-kicker{max-width:340px;font-size:15px;color:var(--stone);border-left:1px solid var(--line);padding-left:18px}
.hero-kicker b{color:var(--ink);font-weight:600}
.hero-figure{position:relative;margin-inline:calc(var(--pad)*-1)}
.hero-figure img{width:100%;height:clamp(340px,58vw,620px);object-fit:cover;filter:saturate(.96) contrast(1.02)}
.hero-figure .fcaption{position:absolute;left:var(--pad);bottom:0;padding:14px 18px;background:rgba(247,243,235,.72);backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.hero-q{padding:clamp(56px,10vh,120px) 0;background:var(--bg)}
.hero-q .h2{max-width:24ch}

/* ---------- Puzzle band ---------- */
.puzzle{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr)}
.puzzle div{display:flex;align-items:center;gap:.7rem;padding:26px clamp(14px,2.6vw,40px);border-left:1px solid var(--line);flex-wrap:wrap}
.puzzle div:first-child{border-left:0}
.puzzle .n{font-family:var(--serif);font-size:15px;color:var(--petrol)}
.puzzle .t{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
@media(max-width:900px){.puzzle{grid-template-columns:1fr 1fr}.puzzle div:nth-child(3){border-left:0}}

/* ---------- Section scaffolding ---------- */
.sect{padding:clamp(70px,12vh,150px) 0}
.sect-dark{background:var(--coal);color:var(--bg)}
.sect-paper{background:var(--bg-2)}
.sect-head{max-width:960px;margin-bottom:clamp(36px,6vh,80px)}
.sect-head .h2{margin-top:18px}
.sect-head .h2 em{font-weight:440}

.statement{font-family:var(--serif);font-size:clamp(26px,3.6vw,52px);line-height:1.12;font-weight:400;letter-spacing:-.015em;text-wrap:balance}
.statement em{font-style:italic;color:var(--petrol)}
.on-dark .statement em{color:var(--brass-soft)}

.bicol{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:start}
.bicol .right p{color:var(--stone);margin-bottom:1rem;max-width:52ch}

.taglist{display:grid;grid-template-columns:1fr 1fr;gap:14px clamp(24px,4vw,60px);margin-top:28px}
.taglist li{list-style:none;display:flex;gap:14px;align-items:baseline;padding:14px 0 14px 4px;border-bottom:1px solid var(--line);
  font-size:clamp(15px,1.15vw,18px)}
.taglist .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);flex-shrink:0;min-width:52px}
@media(max-width:820px){.bicol{grid-template-columns:1fr}.taglist{grid-template-columns:1fr}}

/* ---------- dark cost section ---------- */
.cost-mech{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-light);border:1px solid var(--line-light);margin-top:clamp(40px,7vh,70px)}
.cost-mech .cell{padding:28px 30px;background:rgba(9,20,16,.5);display:flex;gap:18px;align-items:flex-start}
.cost-mech .n{font-family:var(--serif);font-size:30px;color:var(--brass-soft);line-height:1;min-width:38px}
.cost-mech h4{font-family:var(--serif);font-size:19px;font-weight:520;margin-bottom:6px}
.cost-mech p{color:rgba(247,243,235,.72);font-size:14.5px}
@media(max-width:760px){.cost-mech{grid-template-columns:1fr}}

/* economic lever strip */
.lever-wrap{border-block:1px solid var(--line);overflow:hidden;position:relative}
.lever-track{display:flex;white-space:nowrap;width:max-content;animation:scroll 36s linear infinite;padding-block:26px}
.lever-track.rev{animation-direction:reverse}
.lever-item{display:inline-flex;align-items:center;gap:18px;padding:0 26px;font-family:var(--serif);font-size:clamp(18px,2vw,27px);color:var(--ink)}
.lever-item::after{content:"·";color:var(--brass)}
.inv2.lever-wrap{border-color:var(--line-light);background:var(--ink)}
.inv2 .lever-item{color:var(--bg)}
.inv2 .lever-item::after{color:var(--brass)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* fulcrum motif */
.hebel{display:flex;align-items:center;gap:clamp(20px,4vw,64px);flex-wrap:wrap}
.hebel .d{flex:1 1 430px}
.hebel .t{flex:1 1 340px}
.hebel-svg{width:100%;max-width:560px;height:auto}
.hebel-svg .beamo{stroke:var(--petrol);stroke-width:2;stroke-linecap:round}
.hebel-svg .fulcrum{fill:var(--brass)}
.hebel-svg .axis{stroke:rgba(25,21,18,.22);stroke-dasharray:3 5;stroke-width:1}
.heblabel{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;fill:var(--stone)}
.on-dark .hebel-svg .axis{stroke:rgba(247,243,235,.28)}
.on-dark .hebel-svg .beamo{stroke:var(--brass-soft)}
.on-dark .heblabel{fill:rgba(247,243,235,.6)}

/* ---------- levels cards ---------- */
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.lvl{background:var(--bg);padding:34px clamp(18px,2vw,30px) 40px;display:flex;flex-direction:column}
.lvl .rank{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:20px}
.lvl h3{font-family:var(--serif);font-size:24px;font-weight:560;line-height:1.1;margin-bottom:18px;text-wrap:balance}
.lvl p{font-size:14.5px;color:var(--stone)}
.lvl ul{list-style:none;margin-top:20px;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:9px}
.lvl ul li{font-size:13.5px;color:var(--ink);padding-left:16px;position:relative}
.lvl ul li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--petrol);border-radius:50%}
.lvl.on-deep{background:var(--coal);color:var(--bg)}
.lvl.on-deep p{color:rgba(247,243,235,.72)}
.lvl.on-deep ul li{color:var(--bg)}
.lvl.on-deep ul li::before{background:var(--brass)}
@media(max-width:1080px){.levels{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.levels{grid-template-columns:1fr}}

/* ---------- question block ---------- */
.sidefig{margin-top:34px;max-width:440px}
.sidefig img{aspect-ratio:4/3;object-fit:cover;width:100%;filter:saturate(.95)}
.sidefig figcaption{margin-top:12px}
@media(min-width:900px){.sidefig{margin-left:auto;margin-right:0}}
.qblock{border-left:3px solid var(--brass);padding:6px 0 6px clamp(22px,3vw,46px);margin-top:clamp(40px,7vh,70px);max-width:900px}
.qblock .emph{font-family:var(--serif);font-size:clamp(24px,3.4vw,44px);font-weight:440;line-height:1.12;letter-spacing:-.015em}
.qblock .emph em{font-style:italic;color:var(--petrol)}
.on-dark .qblock{border-color:var(--brass-soft)}
.on-dark .qblock .emph em{color:var(--brass-soft)}

/* ---------- why-contacted ---------- */
.why{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:start}
.why .fig{position:relative}
.why .fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.signs{margin-top:34px;display:grid;gap:0}
.signs .sig{display:flex;gap:20px;padding:18px 0;border-top:1px solid var(--line);align-items:baseline}
.signs .sig:last-child{border-bottom:1px solid var(--line)}
.signs .n{font-family:var(--mono);font-size:12px;color:var(--brass);min-width:34px}
.signs .sig p{font-size:16.5px}
@media(max-width:900px){.why{grid-template-columns:1fr}}

/* ---------- method ---------- */
.steps{display:grid;gap:0;margin-top:60px}
.step{display:grid;grid-template-columns:120px 1fr;gap:clamp(18px,3vw,40px);padding:clamp(22px,3.4vh,40px) 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .num{font-family:var(--serif);font-size:clamp(40px,5vw,72px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--petrol)}
.on-dark .step .num{-webkit-text-stroke:1px var(--brass-soft)}
.step h3{font-family:var(--serif);font-size:clamp(21px,2vw,27px);font-weight:560;margin-bottom:10px}
.step p{color:var(--stone);max-width:56ch}
.on-dark .step p{color:rgba(247,243,235,.7)}
@media(max-width:700px){.step{grid-template-columns:70px 1fr}}

/* ---------- curation ---------- */
.curve-list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,6vw,90px);margin-top:40px}
.curve-list .cl{padding:22px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:baseline}
.curve-list .cl span{display:block;color:var(--stone);font-size:14px;margin-top:3px}
.curve-list .cl b{font-family:var(--serif);font-weight:560;font-size:17px}
.curve-list .air{flex-shrink:0;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--brass);position:relative;top:2px}
@media(max-width:820px){.curve-list{grid-template-columns:1fr}}

/* rate volt block */
.volt{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:60px;border:1px solid var(--line)}
.volt .side{padding:clamp(28px,4vw,60px);display:flex;flex-direction:column;justify-content:center}
.volt .side.a{background:var(--bg-3)}
.volt .side.b{background:var(--coal);color:var(--bg)}
.volt .aft{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.volt h4{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);font-weight:520;margin-bottom:14px;text-wrap:balance}
.volt p{font-size:15px;color:var(--stone);max-width:46ch}
.volt .b p{color:rgba(247,243,235,.75)}
@media(max-width:800px){.volt{grid-template-columns:1fr}}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.pframe{position:relative;aspect-ratio:3/4;background:var(--forest);overflow:hidden;border:1px solid rgba(247,243,235,.16)}
.pframe .ph-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.pframe .ph-mono .initials{font-family:var(--serif);font-size:130px;color:var(--petrol-soft);line-height:1}
.pframe .ph-mono span{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(247,243,235,.42)}
.pframe img{width:100%;height:100%;object-fit:cover}
.pframe .tag{position:absolute;left:0;bottom:0;right:0;background:rgba(16,36,28,.86);color:var(--bg);padding:12px 18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;backdrop-filter:blur(6px)}
.fq{font-family:var(--serif);font-size:clamp(25px,3.2vw,44px);line-height:1.18;font-weight:420;letter-spacing:-.01em}
.fq cite{display:block;margin-top:20px;font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--petrol)}
.founder p{color:var(--stone);max-width:56ch}
.founder .bio{margin:26px 0 8px}
.flat-qs{display:grid;grid-template-columns:1fr;gap:0;margin-top:34px;border-top:1px solid var(--line)}
.flat-qs .fq2{padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;display:flex;gap:16px;align-items:baseline}
.flat-qs .fq2 .dot{color:var(--brass)}
@media(max-width:860px){.founder{grid-template-columns:1fr}}

/* ---------- closing ---------- */
.final{text-align:center}
.final .brandline{font-family:var(--serif);font-size:clamp(34px,6vw,88px);line-height:1.02;font-weight:420;letter-spacing:-.02em;margin-top:40px;text-wrap:balance}
.final .brandline b{font-weight:600}
.roles{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.roles span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);padding:10px 18px;border:1px solid var(--line);border-radius:100px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--bg);padding:clamp(46px,7vh,80px) 0 28px}
.foot-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(24px,4vw,60px);padding-bottom:40px;border-bottom:1px solid var(--line-light)}
.foot-copy h3{font-family:var(--serif);font-size:24px;font-weight:520;margin-bottom:12px}
.foot-copy p{color:rgba(247,243,235,.66);font-size:14px;max-width:40ch}
.foot-mid{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:rgba(247,243,235,.6);line-height:1.9}
.foot-links{display:grid;gap:12px}
.foot-links a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:rgba(247,243,235,.82)}
.foot-links a:hover{color:var(--brass-soft)}
.foot-end{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:rgba(247,243,235,.55);text-transform:uppercase}
@media(max-width:820px){.foot-top{grid-template-columns:1fr}}

/* ---------- reveal (only animates when JS is on) ---------- */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.08s}html.js .reveal.d2{transition-delay:.16s}html.js .reveal.d3{transition-delay:.24s}

::selection{background:var(--brass);color:#fff}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}