:root{--bg:#f0f0ee;--paper:#fff;--ink:#202020;--muted:#6f6f6f;--line:#bdbdbd;--soft:#ececea;--dark:#292929}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
a{color:inherit}.page{width:min(100%,430px);margin:auto;background:var(--paper);box-shadow:0 0 0 1px #d4d4d4;overflow:hidden}.inner{padding-inline:20px}
header{min-height:74px;padding:12px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.brand strong,.brand span{display:block}.brand strong{font-size:17px}.brand span{font-size:12px;color:var(--muted);margin-top:4px}
.menu{min-height:44px;padding:9px 12px;background:transparent;border:0px solid var(--ink)}
section{border-bottom:1px solid var(--line)}.section{padding-block:76px}.compact{padding-block:56px}.open{padding-block:108px}
.hero{min-height:calc(88svh - 74px);display:flex;align-items:center;position:relative;overflow:hidden}.hero-copy{position:relative;z-index:2;padding-block:68px 92px}
h1{font-size:clamp(40px,11vw,48px);line-height:1.02;letter-spacing:-.035em;margin:0 0 34px}h2{font-size:31px;line-height:1.08;letter-spacing:-.025em;margin:0 0 22px}h3{font-size:25px;line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
p{font-size:18px;margin:0 0 18px}.small{font-size:15px;color:var(--muted)}.question{font-size:24px;line-height:1.2;margin-bottom:34px}.jump{font-weight:700;text-underline-offset:4px}
.plane,.wire{position:absolute;pointer-events:none}.plane.a{width:210px;height:220px;right:-70px;bottom:24px;background:#e9e9e6;transform:skewY(-12deg)}.plane.b{width:180px;height:180px;right:10px;bottom:-50px;border:1px solid #9c9c9c;transform:rotate(8deg)}.wire.a{width:240px;height:1px;background:#8c8c8c;right:-50px;bottom:172px;transform:rotate(-28deg)}.wire.b{width:1px;height:220px;background:#a5a5a5;right:82px;bottom:-20px;transform:rotate(14deg)}
.choice-list{margin-top:34px;border-top:1px solid var(--line)}.choice{display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:24px 0;color:var(--ink);font:inherit;cursor:pointer}.choice-head{display:grid;grid-template-columns:1fr 26px;gap:12px}.choice-title{font-size:22px;line-height:1.18;font-weight:700}.choice-copy,.answer{font-size:17px;line-height:1.48}.choice-copy{display:block;margin-top:12px}.answer{display:none;padding-top:18px;font-weight:700}.choice[aria-expanded=true]{background:var(--soft);padding-inline:14px}.choice[aria-expanded=true] .answer{display:block}.marker{width:19px;height:19px;border:1.5px solid var(--ink);border-radius:50%;margin-top:3px;position:relative}.choice[aria-expanded=true] .marker:after{content:"";position:absolute;inset:4px;background:var(--ink);border-radius:50%}.skip{display:inline-block;margin-top:28px}
.threshold{background:#fafafa}.threshold-transition{margin-top:56px;padding-top:34px;position:relative}.threshold-transition:before{content:"";display:block;width:70px;border-top:2px solid var(--ink);margin:0 0 30px 18%}.threshold blockquote{margin:0;font-family:Georgia,serif;font-size:30px;line-height:1.15}.threshold p{margin-top:28px}
.principle{padding-block:20px}.rule{width:70px;border-top:2px solid var(--ink);margin-bottom:22px}
.portrait{width:100%;aspect-ratio:4/5;margin:34px 0 26px;background:linear-gradient(135deg,#d6d6d4 0 48%,#bdbdbb 48% 50%,#e7e7e5 50%);border:1px solid var(--line);display:grid;place-items:center}.sil{width:44%;aspect-ratio:3/4;border-radius:45% 45% 20% 20%;background:#9f9f9d;position:relative}.sil:before{content:"";position:absolute;width:46%;aspect-ratio:1;border-radius:50%;background:#8c8c8a;left:27%;top:-18%}
.closing{font-family:Georgia,serif;font-size:28px;line-height:1.18;margin-top:56px}
.context{padding-block:76px;position:relative}.context:before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;background:#d7d7d4}.personal{background:#f2f2ef}.work{background:#e9e9e7}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:700;margin-bottom:16px}
ul{margin:24px 0 30px;padding-left:20px}li{font-size:17px;margin-bottom:12px}.qualification{border-left:2px solid var(--ink);padding-left:16px;margin-top:28px}
.meta{font-size:16px;font-weight:700;padding-block:14px;border-block:1px solid var(--line);margin:28px 0}.button{display:inline-block;background:var(--dark);color:#fff;text-decoration:none;padding:15px 18px;min-height:52px;font-weight:700;margin-top:12px}
footer{background:var(--dark);color:#fff;padding:40px 20px 30px}.ftop,.fbottom{display:flex;justify-content:space-between;gap:20px;align-items:flex-end}.fbottom{margin-top:34px;align-items:center}.flinks{display:flex;gap:14px;flex-wrap:wrap;font-size:14px}.linkedin{width:44px;height:44px;border:1px solid #fff;display:grid;place-items:center;text-decoration:none;font-weight:700}.toplink{font-size:14px}
:focus-visible{outline:3px solid #000;outline-offset:4px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.desktop-nav{display:none}

@media (min-width:900px){
  body{background:#e9e9e6}
  .page{
    width:min(100%,1440px);
    box-shadow:0 0 0 1px #d1d1cf;
  }
  .inner{
    width:min(100% - 96px,1180px);
    margin-inline:auto;
    padding-inline:0;
  }

  header{
    min-height:92px;
    padding:0 48px;
    position:relative;
    z-index:5;
    background:var(--paper);
  }
  .brand strong{font-size:19px}
  .brand span{font-size:13px}
  .menu{display:none}
  .desktop-nav{
    display:flex;
    align-items:center;
    gap:30px;
    font-size:14px;
  }
  .desktop-nav a{
    text-decoration:none;
    padding-block:10px;
    border-bottom:1px solid transparent;
  }
  .desktop-nav a:hover,
  .desktop-nav a:focus-visible{
    border-bottom-color:var(--ink);
  }

  .section{padding-block:118px}
  .open{padding-block:140px}
  h1{font-size:clamp(68px,6vw,92px);line-height:.98;max-width:720px}
  h2{font-size:46px;line-height:1.05}
  h3{font-size:29px}
  p{font-size:19px;line-height:1.58}
  .small{font-size:16px}

  .hero{
    min-height:calc(92vh - 92px);
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
    align-items:center;
  }
  .hero .inner{
    width:auto;
    margin-left:max(48px,calc((100vw - min(100vw,1440px))/2 + 48px));
    margin-right:0;
  }
  .hero-copy{
    padding:90px 40px 110px 0;
    max-width:780px;
  }
  .question{
    font-size:31px;
    line-height:1.25;
    max-width:520px;
    margin-bottom:42px;
  }
  .plane.a{
    width:540px;height:500px;right:-70px;bottom:35px;
  }
  .plane.b{
    width:470px;height:430px;right:105px;bottom:-105px;
  }
  .wire.a{
    width:650px;right:-80px;bottom:360px;
  }
  .wire.b{
    height:540px;right:315px;bottom:-50px;
  }

  .selection-section>.inner{
    display:grid;
    grid-template-columns:minmax(250px,.72fr) minmax(0,1.55fr);
    gap:90px;
    align-items:start;
  }
  .selection-section h2{
    max-width:380px;
    position:sticky;
    top:120px;
  }
  .selection-section .small{
    max-width:330px;
  }
  .choice-list{margin-top:0}
  .choice{
    padding:32px 0;
  }
  .choice[aria-expanded=true]{
    padding-inline:24px;
  }
  .choice-title{font-size:27px}
  .choice-copy,.answer{font-size:18px}
  .skip{grid-column:2;margin-top:30px}

  .threshold-section>.inner{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(340px,.75fr);
    gap:110px;
    align-items:start;
  }
  .threshold blockquote{
    font-size:52px;
    line-height:1.08;
    max-width:650px;
  }
  .threshold blockquote + p{
    font-size:21px;
    max-width:560px;
  }
  .threshold-transition{
    margin-top:12px;
    padding-top:0;
  }
  .threshold-transition:before{
    margin-left:12%;
    margin-bottom:38px;
  }

  .work-method>.inner{
    display:grid;
    grid-template-columns:minmax(360px,.86fr) minmax(0,1.14fr);
    grid-template-areas:
      "title title"
      "portrait principles"
      "closing closing";
    column-gap:100px;
    row-gap:54px;
  }
  .work-method h2{grid-area:title;margin-bottom:0}
  .work-method .portrait{
    grid-area:portrait;
    margin:0;
    position:sticky;
    top:120px;
    align-self:start;
  }
  .work-method .principle{
    grid-column:2;
    padding-block:24px 40px;
    max-width:610px;
  }
  .work-method .principle:nth-of-type(1){margin-top:0}
  .work-method .principle:nth-of-type(2){margin-left:8%}
  .work-method .principle:nth-of-type(3){margin-left:18%}
  .work-method .principle:nth-of-type(4){margin-left:6%}
  .work-method .closing{
    grid-area:closing;
    max-width:760px;
    margin:70px 0 0 auto;
    font-size:45px;
    line-height:1.13;
  }

  .context-pair{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .context-card{
    padding:110px 0 120px;
    min-height:720px;
    display:flex;
    align-items:flex-start;
  }
  .context-card>.inner{
    width:min(100% - 80px,570px);
    margin-inline:auto;
  }
  .context-card:before{
    width:12px;
  }
  .context-card h2{
    font-size:40px;
    max-width:500px;
  }
  .context-card li{
    font-size:18px;
    line-height:1.48;
    margin-bottom:18px;
  }
  .personal{background:#f2f2ef}
  .work{background:#e9e9e7}

  .about-section>.inner{
    display:grid;
    grid-template-columns:minmax(240px,.6fr) minmax(0,1.4fr);
    column-gap:100px;
  }
  .about-section h2{grid-column:1}
  .about-section p,
  .about-section .jump{grid-column:2}
  .about-section .qualification{
    max-width:760px;
    margin-top:32px;
  }

  .cta-section>.inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(390px,.82fr);
    column-gap:110px;
    align-items:start;
  }
  .cta-section h2{
    grid-row:1 / span 5;
    max-width:620px;
    font-size:49px;
  }
  .cta-section h3,
  .cta-section .meta,
  .cta-section p,
  .cta-section .button{
    grid-column:2;
  }
  .cta-section h3{margin-top:4px}

  footer{
    padding:56px 48px 42px;
  }
  .ftop,.fbottom{
    width:min(100%,1180px);
    margin-inline:auto;
  }
  .fbottom{margin-top:44px}
}

@media (min-width:1180px){
  .desktop-nav{gap:38px;font-size:15px}
}

@media (min-width:900px){
  .work-method>.inner{
    grid-template-areas:
      "title title"
      "portrait principles"
      "closing closing";
  }
  .principles-stack{
    grid-area:principles;
    display:flex;
    flex-direction:column;
    align-self:start;
  }
  .work-method .principle{
    grid-column:auto;
  }
  .work-method .principle:nth-of-type(1){margin-top:0}
  .work-method .principle:nth-of-type(2){margin-left:8%}
  .work-method .principle:nth-of-type(3){margin-left:18%}
  .work-method .principle:nth-of-type(4){margin-left:6%}
}

@media (min-width:900px){
  .selection-section>.inner{
    grid-template-columns:minmax(280px,.78fr) minmax(0,1.52fr);
    gap:100px;
  }
  .selection-intro{
    position:sticky;
    top:120px;
    align-self:start;
  }
  .selection-intro h2{position:static;margin-bottom:18px}
  .selection-intro .small{margin-bottom:20px}
  .selection-intro .skip{display:inline-block;margin-top:0}
  .selection-section .choice-list{grid-column:2}

  .threshold-section>.inner{
    display:block;
    max-width:1180px;
  }
  .threshold-main{max-width:900px}
  .threshold blockquote{
    font-size:52px;
    line-height:1.08;
    max-width:820px;
  }
  .threshold blockquote + p{
    font-size:21px;
    max-width:620px;
  }
  .threshold-transition{
    width:min(100%,660px);
    margin:82px 0 0 auto;
    padding-top:0;
  }
  .threshold-transition:before{
    margin-left:12%;
    margin-bottom:38px;
  }

  .work-method .closing{
    margin:72px 0 0 0;
    max-width:760px;
  }
}

@media (min-width:900px){
  .work-right>.inner{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
    grid-template-areas:
      "title title"
      "principles portrait"
      "closing closing";
    column-gap:100px;
    row-gap:54px;
  }
  .work-right h2{grid-area:title;margin-bottom:0}
  .work-right .principles-stack{
    grid-area:principles;
    display:flex;
    flex-direction:column;
    align-self:start;
  }
  .work-right .portrait{
    grid-area:portrait;
    margin:0;
    position:sticky;
    top:120px;
    align-self:start;
  }
  .work-right .principle{
    margin-left:0!important;
    max-width:640px;
    padding-block:24px 38px;
  }
  .work-right .principle:nth-child(1) .rule{margin-left:0}
  .work-right .principle:nth-child(2) .rule{margin-left:12%}
  .work-right .principle:nth-child(3) .rule{margin-left:28%}
  .work-right .principle:nth-child(4) .rule{margin-left:8%}
  .work-right .closing{grid-area:closing}
}

:root{
 --brand-bg:#F1EEE7;--brand-paper:#F8F6F1;--brand-ink:#202725;
 --brand-dark:#293532;--brand-muted:#67716E;--brand-line:rgba(32,39,37,.24);
 --personal:#96523C;--personal-soft:#E8D6CB;--personal-pale:#F2E8E2;
 --professional:#486F72;--professional-soft:#D5E1DF;--professional-pale:#E8F0EF;
 --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
 --sans:"Instrument Sans",Arial,Helvetica,sans-serif
}
html,body{background:var(--brand-bg)}
body{color:var(--brand-ink);font-family:var(--sans);font-optical-sizing:auto}
.page{background:var(--brand-paper)}
h1,h2,h3,.choice-title,.eyebrow,.button,.desktop-nav,.menu,.brand,p,.choice-copy,.answer,li{font-family:var(--sans)}
.small{color:var(--brand-muted)}
header{background:rgba(248,246,241,.96);border-color:var(--brand-line);backdrop-filter:blur(12px)}
.brand strong{letter-spacing:-.02em}.menu{border-color:var(--brand-ink);color:var(--brand-ink)}
.desktop-nav a{color:var(--brand-ink)}
.desktop-nav a:hover,.desktop-nav a:focus-visible{border-bottom-color:var(--brand-ink)}
.hero{background:linear-gradient(115deg,rgba(232,214,203,.28),transparent 34%),linear-gradient(300deg,rgba(213,225,223,.38),transparent 42%),var(--brand-paper)}
.hero h1{font-weight:560;color:var(--brand-ink)}.question{color:#35413E}
.jump{text-decoration-color:rgba(32,39,37,.44);text-decoration-thickness:1px}
.plane.a{background:rgba(232,214,203,.62);box-shadow:inset 0 0 0 1px rgba(150,82,60,.08)}
.plane.b{background:rgba(213,225,223,.18);border-color:rgba(72,111,114,.48)}
.wire.a,.wire.b{background:rgba(32,39,37,.38)}
section{border-color:var(--brand-line)}
.selection-section{background:#F7F5F0}.selection-intro h2{font-weight:560}
.choice-list,.choice{border-color:var(--brand-line)}
.choice{transition:background-color .25s ease,padding .25s ease}
.choice:hover{background:rgba(213,225,223,.22)}
.choice[aria-expanded=true]{background:linear-gradient(100deg,rgba(232,214,203,.58),rgba(213,225,223,.45))}
.marker{border-color:var(--brand-ink)}
.choice[aria-expanded=true] .marker:after{background:var(--brand-ink)}
.answer{color:#2D3835}
.threshold{background:linear-gradient(155deg,rgba(232,214,203,.25),transparent 42%),linear-gradient(320deg,rgba(213,225,223,.28),transparent 48%),#FBFAF7}
.threshold blockquote,.closing{font-family:var(--serif);font-optical-sizing:auto;font-weight:450;letter-spacing:-.018em}
.threshold-transition:before,.rule{border-color:var(--brand-ink)}
.work-method{background:var(--brand-paper)}
.portrait{background:linear-gradient(135deg,#D8D4CC 0 43%,#B7C2BE 43% 51%,#E4D9CF 51% 100%);border-color:rgba(32,39,37,.2);overflow:hidden;position:relative}
.portrait:after{content:"";position:absolute;inset:auto -14% -10% 34%;height:44%;border:1px solid rgba(32,39,37,.3);transform:rotate(-8deg)}
.sil{background:#767F7B}.sil:before{background:#646C69}
.context.personal{background:linear-gradient(150deg,rgba(232,214,203,.86),rgba(242,232,226,.82))}
.context.personal:before{background:var(--personal)}
.context.work{background:linear-gradient(150deg,rgba(213,225,223,.92),rgba(232,240,239,.88))}
.context.work:before{background:var(--professional)}
.context.personal .eyebrow{color:#763E2D}.context.work .eyebrow{color:#355B5E}
.about-section{background:linear-gradient(120deg,rgba(232,214,203,.12),transparent 28%),linear-gradient(300deg,rgba(213,225,223,.18),transparent 34%),var(--brand-paper)}
.qualification{border-color:var(--brand-ink)}
.cta-section{background:#F7F4EE!important}.meta{border-color:var(--brand-line);color:#3C4845}
.button{background:var(--brand-dark);border:1px solid var(--brand-dark);color:#fff;border-radius:3px;transition:background-color .2s ease,transform .2s ease}
.button:hover{background:#35433F;transform:translateY(-1px)}
footer{background:var(--brand-dark)}
.linkedin{border-color:rgba(255,255,255,.74);color:#fff;border-radius:2px;transition:background .2s ease,color .2s ease}
.linkedin:hover{background:#fff;color:var(--brand-dark)}
@media(min-width:900px){
 .page{box-shadow:0 18px 65px rgba(32,39,37,.12)}
 .hero-copy{padding-top:105px}.choice-title{font-weight:590}
 .work-right .principle h3{font-weight:590}.context-card h2{font-weight:560}
}
@media(max-width:899px){
 .hero h1{font-weight:570}
 .context.personal{background:var(--personal-pale)}
 .context.work{background:var(--professional-pale)}
}

/* ---------- Spatial layer across the whole page ---------- */
.page{
  position:relative;
  background:transparent;
}
main,header,footer{
  position:relative;
  z-index:2;
}
.ambient-space{
  position:fixed;
  z-index:0;
  inset:0 max(0px,calc((100vw - 1440px)/2));
  overflow:hidden;
  pointer-events:none;
}
.ambient-plane,.ambient-line{
  position:absolute;
  display:block;
  will-change:translate,rotate;
}
.ambient-plane-a{
  width:38vw;height:56vh;
  right:-13vw;top:18vh;
  background:rgba(150,82,60,.055);
  transform:skewY(-13deg);
}
.ambient-plane-b{
  width:34vw;height:48vh;
  left:-12vw;bottom:7vh;
  background:rgba(72,111,114,.06);
  transform:skewY(11deg);
}
.ambient-line{
  height:1px;
  background:rgba(32,39,37,.115);
  transform-origin:center;
}
.ambient-line-a{
  width:78vw;left:-18vw;top:28vh;
  transform:rotate(-19deg);
}
.ambient-line-b{
  width:70vw;right:-24vw;top:62vh;
  transform:rotate(24deg);
}
.ambient-line-c{
  width:1px;height:74vh;left:72%;top:8vh;
  transform:rotate(8deg);
}

/* Sections remain legible but let the spatial layer breathe through. */
.hero{background-color:rgba(248,246,241,.91)}
.selection-section{background-color:rgba(247,245,240,.93)}
.threshold{background-color:rgba(251,250,247,.91)}
.work-method{background-color:rgba(248,246,241,.94)}
.about-section{background-color:rgba(248,246,241,.93)}
.cta-section{background-color:rgba(247,244,238,.94)!important}
.context.personal{background-color:rgba(242,232,226,.94)}
.context.work{background-color:rgba(232,240,239,.94)}

section,.context-pair{
  position:relative;
}
section>.inner,.context-card>.inner,.context-pair>section>.inner{
  position:relative;
  z-index:2;
}

/* Local fragments strengthen the idea at a few transitions without boxing it in. */
.space-fragment{
  position:absolute;
  z-index:1;
  width:min(48vw,620px);
  height:420px;
  pointer-events:none;
  opacity:.48;
  will-change:translate,rotate;
}
.fragment-line,.fragment-plane{
  position:absolute;
  display:block;
}
.fragment-line{
  height:1px;
  background:rgba(32,39,37,.22);
  transform-origin:left center;
}
.fragment-line.one{
  width:112%;
  top:24%;
  left:-18%;
  transform:rotate(-16deg);
}
.fragment-line.two{
  width:86%;
  top:63%;
  left:18%;
  transform:rotate(21deg);
}
.fragment-plane{
  width:42%;
  height:64%;
  right:8%;
  top:12%;
  border:1px solid rgba(32,39,37,.13);
  background:rgba(213,225,223,.055);
  transform:skewY(-9deg);
}
.fragment-selection{right:-16%;bottom:-180px}
.fragment-threshold{left:-15%;bottom:-190px}
.fragment-work{right:-17%;top:18%}
.fragment-context{left:29%;top:-160px}
.fragment-about{right:-15%;bottom:-175px}
.fragment-contact{left:-14%;top:-150px}

/* ---------- Stronger, truer Hero colours ---------- */
.hero .plane.a{
  background:rgba(150,82,60,.76);
  box-shadow:inset 0 0 0 1px rgba(115,55,39,.18);
}
.hero .plane.b{
  background:rgba(72,111,114,.58);
  border-color:rgba(45,83,86,.72);
}
.hero .wire.a,.hero .wire.b{
  background:rgba(32,39,37,.48);
}

/* ---------- Robust selection accordion ---------- */
.choice-list{
  border-top:1px solid var(--brand-line);
}
.choice-item{
  border-bottom:1px solid var(--brand-line);
  transition:background-color .25s ease;
}
.choice{
  border-bottom:0!important;
}
.choice-item:hover{
  background:rgba(213,225,223,.20);
}
.choice-item.is-open{
  background:linear-gradient(100deg,rgba(232,214,203,.62),rgba(213,225,223,.48));
}
.choice-item.is-open .choice{
  padding-inline:14px;
}
.answer-panel{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .34s ease,opacity .25s ease;
}
.answer-inner{
  overflow:hidden;
}
.answer-text{
  margin:0;
  padding:0 14px 24px;
  color:#2D3835;
  font-size:17px;
  line-height:1.48;
  font-weight:650;
}
.choice-item.is-open .answer-panel{
  grid-template-rows:1fr;
  opacity:1;
}

/* ---------- Moving recurring short lines ---------- */
.threshold-transition:before{
  display:none!important;
}
.rule{
  will-change:translate;
}
.threshold-rule{
  margin-left:12%;
  margin-bottom:38px;
}
@media(max-width:899px){
  .work-method .principle .rule{
    margin-left:var(--base-offset-mobile)!important;
  }
  .space-fragment{
    width:82vw;
    height:300px;
    opacity:.34;
  }
  .fragment-selection{right:-42%;bottom:-130px}
  .fragment-threshold{left:-44%;bottom:-130px}
  .fragment-work{right:-48%;top:24%}
  .fragment-context{left:10%;top:-105px}
  .fragment-about{right:-42%;bottom:-125px}
  .fragment-contact{left:-44%;top:-110px}
}
@media(min-width:900px){
  .choice-item.is-open .choice{
    padding-inline:24px;
  }
  .answer-text{
    padding:0 24px 29px;
    font-size:18px;
  }
}

/* Reduced motion: equal, static design. */
@media(prefers-reduced-motion:reduce){
  .ambient-plane,.ambient-line,.space-fragment,.rule,
  .hero .plane,.hero .wire{
    translate:0 0!important;
    rotate:0deg!important;
    transition:none!important;
  }
  .answer-panel{
    transition:none;
  }
}

/* V3: continuous open selection surface */
.choice-item.is-open{
  background:linear-gradient(100deg,rgba(232,214,203,.62),rgba(213,225,223,.48))!important;
}
.choice-item.is-open .choice,
.choice-item.is-open .answer-panel,
.choice-item.is-open .answer-inner,
.choice[aria-expanded="true"]{
  background:transparent!important;
}

/* V3: one subtle moving room fragment in every homepage section */
main section,.context-pair{overflow:visible}
.space-fragment{
  position:absolute;z-index:1;width:min(46vw,620px);height:390px;
  pointer-events:none;opacity:.42;will-change:translate,rotate;
}
.fragment-line,.fragment-plane{position:absolute;display:block}
.fragment-line{height:1px;background:rgba(32,39,37,.19);transform-origin:left center}
.fragment-line.one{width:110%;top:22%;left:-16%;transform:rotate(-16deg)}
.fragment-line.two{width:88%;top:61%;left:16%;transform:rotate(21deg)}
.fragment-line.three{width:68%;top:42%;left:30%;transform:rotate(-7deg)}
.fragment-plane{
  width:39%;height:60%;right:9%;top:13%;border:1px solid rgba(32,39,37,.10);
  background:rgba(213,225,223,.045);transform:skewY(-9deg)
}
.fragment-v0{right:-15%;bottom:-175px}
.fragment-v1{left:-14%;top:-150px}
.fragment-v2{right:-13%;top:18%}
.fragment-v3{left:-11%;bottom:-155px}
.fragment-v1 .fragment-line.one{transform:rotate(18deg)}
.fragment-v1 .fragment-line.two{transform:rotate(-23deg)}
.fragment-v1 .fragment-line.three{transform:rotate(8deg)}
.fragment-v1 .fragment-plane{left:8%;right:auto;transform:skewY(11deg);background:rgba(232,214,203,.04)}
.fragment-v2 .fragment-line.one{transform:rotate(-11deg)}
.fragment-v2 .fragment-line.two{transform:rotate(27deg)}
.fragment-v2 .fragment-line.three{transform:rotate(-21deg)}
.fragment-v2 .fragment-plane{right:20%;transform:skewY(-13deg) rotate(3deg)}
.fragment-v3 .fragment-line.one{transform:rotate(24deg)}
.fragment-v3 .fragment-line.two{transform:rotate(-15deg)}
.fragment-v3 .fragment-line.three{transform:rotate(5deg)}
.fragment-v3 .fragment-plane{left:16%;right:auto;transform:skewY(8deg) rotate(-3deg);background:rgba(232,214,203,.045)}

/* Extra page-wide thin lines */
.ambient-line-d{width:74vw;left:-22vw;top:78vh;transform:rotate(17deg)}
.ambient-line-e{width:68vw;right:-18vw;top:42vh;transform:rotate(-27deg)}
.ambient-line-f{width:1px;height:82vh;left:24%;top:4vh;transform:rotate(-10deg)}

@media(max-width:899px){
  .space-fragment{width:84vw;height:280px;opacity:.30}
  .fragment-v0{right:-44%;bottom:-110px}
  .fragment-v1{left:-45%;top:-95px}
  .fragment-v2{right:-47%;top:22%}
  .fragment-v3{left:-42%;bottom:-105px}
}

/* =========================================================
   V4: one continuous viewport-wide spatial environment
   ========================================================= */

/* No framed or separately coloured page canvas at any breakpoint. */
html,body{
  width:100%;
  min-width:0;
  overflow-x:clip;
  background:#F1EEE7;
}
.page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  overflow:visible!important;
  box-shadow:none!important;
  background:transparent!important;
}

/* Content remains constrained, but the visual space always uses the full viewport. */
.ambient-space{
  position:fixed;
  inset:0!important;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:
    linear-gradient(132deg,rgba(150,82,60,.075),transparent 38%),
    linear-gradient(312deg,rgba(72,111,114,.085),transparent 42%),
    #F1EEE7;
}

/* More visible, continuously present room geometry. */
.ambient-line{
  background:rgba(32,39,37,.19)!important;
}
.ambient-plane{
  border:1px solid rgba(32,39,37,.055);
}
.ambient-plane-a{
  background:rgba(150,82,60,.095)!important;
}
.ambient-plane-b{
  background:rgba(72,111,114,.10)!important;
}
.ambient-plane-c{
  position:absolute;
  width:34vw;
  height:52vh;
  left:9vw;
  top:-15vh;
  background:rgba(72,111,114,.075);
  transform:skewY(-11deg) rotate(4deg);
}
.ambient-plane-d{
  position:absolute;
  width:40vw;
  height:48vh;
  right:-12vw;
  top:44vh;
  background:rgba(150,82,60,.072);
  transform:skewY(13deg) rotate(-5deg);
}
.ambient-plane-e{
  position:absolute;
  width:29vw;
  height:62vh;
  left:42vw;
  bottom:-29vh;
  background:rgba(72,111,114,.058);
  transform:skewY(-8deg) rotate(7deg);
}

.ambient-line-g{
  width:92vw;
  left:-24vw;
  top:16vh;
  transform:rotate(28deg);
}
.ambient-line-h{
  width:88vw;
  right:-26vw;
  top:83vh;
  transform:rotate(-21deg);
}
.ambient-line-i{
  width:1px;
  height:105vh;
  left:45%;
  top:-8vh;
  transform:rotate(13deg);
}
.ambient-line-j{
  width:76vw;
  left:12vw;
  top:51vh;
  transform:rotate(-33deg);
}
.ambient-line-k{
  width:1px;
  height:94vh;
  right:18%;
  top:12vh;
  transform:rotate(-17deg);
}

/* Section surfaces become translucent windows into the same room. */
.hero{
  background:
    linear-gradient(115deg,rgba(232,214,203,.34),transparent 34%),
    linear-gradient(300deg,rgba(213,225,223,.42),transparent 42%),
    rgba(248,246,241,.74)!important;
}
.selection-section{
  background:rgba(247,245,240,.76)!important;
}
.threshold{
  background:
    linear-gradient(155deg,rgba(232,214,203,.17),transparent 42%),
    linear-gradient(320deg,rgba(213,225,223,.20),transparent 48%),
    rgba(251,250,247,.74)!important;
}
.work-method{
  background:rgba(248,246,241,.77)!important;
}
.about-section{
  background:
    linear-gradient(120deg,rgba(232,214,203,.10),transparent 28%),
    linear-gradient(300deg,rgba(213,225,223,.12),transparent 34%),
    rgba(248,246,241,.76)!important;
}
.cta-section{
  background:rgba(247,244,238,.79)!important;
}
.context.personal{
  background:
    linear-gradient(150deg,rgba(232,214,203,.76),rgba(242,232,226,.72))!important;
}
.context.work{
  background:
    linear-gradient(150deg,rgba(213,225,223,.80),rgba(232,240,239,.74))!important;
}
header{
  background:rgba(248,246,241,.91)!important;
}

/* Every section's local geometry is more visible and moves through the content zone. */
.space-fragment{
  opacity:.58!important;
  width:min(54vw,760px)!important;
  height:470px!important;
}
.fragment-line{
  background:rgba(32,39,37,.27)!important;
}
.fragment-plane{
  border-color:rgba(32,39,37,.13)!important;
  background:rgba(213,225,223,.075)!important;
}
.fragment-v1 .fragment-plane,
.fragment-v3 .fragment-plane{
  background:rgba(232,214,203,.068)!important;
}

/* Prevent section boundaries from clipping the underlying spatial layer. */
main section,.context-pair{
  overflow:visible!important;
}

/* The strong rules now travel a clearly perceivable distance. */
.rule{
  will-change:translate;
}

/* Keep the same continuous environment on tablet and desktop. */
@media(min-width:900px){
  body{background:#F1EEE7!important}
  .page{width:100%!important}
  .inner{width:min(100% - 96px,1180px)}
}

/* Tablet: narrower text, but never a separate page card or canvas. */
@media(min-width:600px) and (max-width:899px){
  .inner{
    width:min(100% - 72px,720px);
    margin-inline:auto;
    padding-inline:0;
  }
  header{
    padding-inline:36px;
  }
  .hero .inner{
    width:min(100% - 72px,720px);
    margin-inline:auto;
  }
}

/* Mobile has the same full-screen room, with adjusted scale only. */
@media(max-width:599px){
  .ambient-line{
    background:rgba(32,39,37,.17)!important;
  }
  .ambient-plane-c{width:72vw;left:-28vw}
  .ambient-plane-d{width:78vw;right:-38vw}
  .ambient-plane-e{width:66vw;left:44vw}
  .space-fragment{
    width:96vw!important;
    height:340px!important;
    opacity:.48!important;
  }
  .fragment-line{
    background:rgba(32,39,37,.23)!important;
  }
}

/* =========================================================
   V5 refinements
   ========================================================= */

/* 1) Exactly one rotating thin line per main section. */
.section-line-fragment{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
.section-line-fragment span{
  position:absolute;
  top:var(--line-y);
  width:var(--line-length);
  height:1px;
  background:rgba(32,39,37,.24);
  transform:rotate(var(--base-angle));
  transform-origin:var(--pivot) 50%;
  will-change:rotate;
}
.section-line-fragment[style*="--line-left"] span{
  left:var(--line-left);
}
.section-line-fragment[style*="--line-right"] span{
  right:var(--line-right);
}
@media(max-width:599px){
  .section-line-fragment span{
    width:calc(var(--line-length) * 1.45);
    background:rgba(32,39,37,.20);
  }
}

/* 2) Hero action sits close to the lower edge of the Hero. */
.hero-copy{
  min-height:calc(88svh - 74px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-jump{
  margin-top:auto;
  padding-top:54px;
  align-self:flex-start;
}
@media(min-width:900px){
  .hero-copy{
    min-height:calc(92vh - 92px);
    padding-bottom:34px!important;
  }
  .hero-jump{
    padding-top:42px;
  }
}

/* 4) Portrait is sticky only inside the principles block. */
.work-core{
  display:contents;
}
@media(min-width:900px){
  .work-right>.inner{
    display:block!important;
  }
  .work-right h2{
    margin-bottom:54px;
  }
  .work-core{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
    grid-template-areas:"principles portrait";
    column-gap:100px;
    align-items:start;
    position:relative;
  }
  .work-core .principles-stack{
    grid-area:principles;
  }
  .work-core .portrait{
    grid-area:portrait;
    position:sticky;
    top:120px;
    align-self:start;
    margin:0;
  }
  .work-method .closing{
    margin-top:72px;
  }
}
@media(max-width:899px){
  .work-core{
    display:flex;
    flex-direction:column;
  }
  .work-core .portrait{order:1}
  .work-core .principles-stack{order:2}
}

/* 5) More space before About link. */
.about-link{
  display:inline-block;
  margin-top:18px;
}
@media(min-width:900px){
  .about-link{
    margin-top:30px;
  }
}

/* 6) Equalized concern boxes after title shortening. */
.context-card{
  min-height:auto!important;
}
@media(min-width:900px){
  .context-pair{
    align-items:stretch;
  }
  .context-card{
    min-height:680px!important;
    height:100%;
  }
  .context-card>.inner{
    display:flex;
    flex-direction:column;
  }
  .context-card .jump{
    margin-top:auto;
  }
}

/* 7) About third paragraph aligns with the others. */
.about-third{
  border-left:0!important;
  padding-left:0!important;
  margin-top:0!important;
}
.about-moving-rule{
  margin-top:30px;
  margin-bottom:28px;
  margin-left:18%;
}

/* 8) Slightly rebalance the shorter CTA title. */
.cta-section h2{
  max-width:650px;
}

/* V6: robust, clearly visible section-line rotation. */
.section-line-fragment span{
  --motion-angle:0deg;
  transform:rotate(calc(var(--base-angle) + var(--motion-angle)));
  transform-origin:var(--pivot) 50%;
  transition:none;
  will-change:transform;
}
.hero > .section-line-fragment{display:none!important}

/* V7: final rotation intensity and About-rule placement. */
@media(min-width:900px){
  .about-section .about-moving-rule{
    grid-column:2;
    width:82px;
    justify-self:start;
  }
}

/* V1.3: continuation link inside the homepage selection impulses */
.answer-jump{
  display:inline-block;
  margin:0 14px 24px;
  color:#202725;
  font-size:15px;
  font-weight:700;
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(32,39,37,.44);
  text-underline-offset:4px;
}
.answer-jump:hover,
.answer-jump:focus-visible{
  text-decoration-color:currentColor;
}
#oeffnung{
  scroll-margin-top:96px;
}
@media(min-width:900px){
  .answer-jump{
    margin:0 24px 29px;
    font-size:16px;
  }
}