/* v7 (from v6, Option C): editorial design (Moritz, 14 Oct 2026). Same toni Design System tokens as Option B, used quietly:
   cream paper, ink type, a serif display face, thin rules, square photos and lots of space.
   Content is Option B's. Shared by index.html, next-gen/ and coaching/. */
:root{
  --cream-50:#FFFFFF;--cream-100:#F3F1EE;--cream-200:#ECEAE6;--cream-300:#E2E0DB;
  --ink-900:#243959;--ink-800:#2E4568;--ink-700:#3C5679;--ink-600:#536C8E;--ink-500:#6D84A3;--ink-400:#8C9EB7;--ink-300:#AAB8CB;
  --sky:#DCEEFD;--sky-soft:#EDF6FE;--sky-deep:#A9D3F5;
  --butter:#FDF3DC;--butter-soft:#FEF9EE;--butter-deep:#F2DFAC;
  --blush:#FFECF2;--blush-soft:#FFF6F9;--blush-deep:#FFC8DA;
  --tiffany:#5CE1E6;--tiffany-soft:#DCFDFF;--tiffany-deep:#25B9C0;--tiffany-ink:#136E76;
  --cream-a64:rgba(243,241,238,.64);--cream-a40:rgba(243,241,238,.40);--cream-a14:rgba(243,241,238,.14);
  --rule:rgba(36,57,89,.14);
  --font-display:"Instrument Serif",Iowan Old Style,Palatino,serif;
  --font-headline:"Inter Tight","Inter Display",Helvetica,sans-serif;
  --font-ui:"Bricolage Grotesque","Helvetica Neue",Helvetica,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,4vw,56px);--container:1320px;
  /* Spacing system: use these steps for every gap, margin and padding. Sections use --section, headlines --head-gap. */
  --s-2xs:4px;--s-xs:8px;--s-s:12px;--s-m:16px;--s-l:24px;--s-xl:32px;--s-2xl:48px;--s-3xl:64px;--s-4xl:96px;
  --section:clamp(48px,7vw,108px);--section-tight:clamp(32px,4.5vw,72px);--head-gap:clamp(24px,3.5vw,48px);
  --edge:max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter)));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream-100);color:var(--ink-900);font-family:var(--font-ui);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--tiffany-deep);outline-offset:3px}
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink-900);color:var(--cream-50);padding:12px 18px}
.skip:focus{left:8px}

/* Type */
.label{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500)}
.label .dot{width:6px;height:6px;border-radius:50%;background:var(--tiffany-deep)}
.display{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;line-height:.98}
.display em{font-style:italic}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;background:var(--ink-900);color:var(--cream-50);text-decoration:none;
  font-size:.9rem;font-weight:500;white-space:nowrap;transition:background-color .25s}
.btn:hover{background:var(--ink-700)}
.btn-sm{padding:10px 18px;font-size:.85rem}
.btn svg,.arrow-link svg{width:16px;height:16px;transition:transform .35s var(--ease-out)}
.btn:hover svg,.arrow-link:hover svg{transform:translateX(3px)}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}

/* Photos: square corners. Replace each .ph with <img> (see the TODO comment next to it). */
.img{position:relative;overflow:hidden;background:var(--cream-200)}
.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph{position:absolute;inset:0;display:grid;place-items:center;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-400);
  background:radial-gradient(90% 70% at 22% 18%,var(--tone-soft,var(--sky-soft)) 0%,transparent 70%),
             radial-gradient(80% 70% at 85% 92%,var(--tone,var(--sky)) 0%,transparent 70%),var(--cream-200)}
.ph.dark{color:var(--cream-a40);background:radial-gradient(90% 70% at 22% 18%,var(--ink-700) 0%,transparent 70%),radial-gradient(80% 70% at 85% 92%,rgba(92,225,230,.18) 0%,transparent 70%),var(--ink-800)}
.img img,.img .ph{transition:transform 1.4s var(--ease-out)}

/* Reveal (only with JS and motion allowed) */
html.js.motion .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
html.js.motion .rv.in{opacity:1;transform:none}
html.js.motion .img.rv{opacity:1;transform:none;clip-path:inset(6% 6% 6% 6%);transition:clip-path 1.3s var(--ease-out);transition-delay:var(--d,0ms)}
html.js.motion .img.rv.in{clip-path:inset(0 0 0 0)}

/* ============================== HEADER: name and one button */
.top{position:fixed;inset:0 0 auto 0;z-index:50;border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.top.scrolled{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:var(--rule)}
.top .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px;padding-inline:var(--edge)}
.wordmark{font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.01em;line-height:1;text-decoration:none}

/* ============================== HERO: type left, portrait right */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100svh}
.hero-text{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:var(--s-l);padding:120px clamp(24px,4vw,64px) clamp(40px,7vh,80px) var(--edge)}
.hero h1{font-size:clamp(3.4rem,7.4vw,7.8rem)}
.hero h1 span{display:block}
.hero.sub h1{font-size:clamp(2.8rem,5.4vw,5.6rem)}
.hero .intro{font-size:clamp(1.05rem,1.3vw,1.2rem);color:var(--ink-600);max-width:36ch}
.hero .intro strong{color:var(--ink-900);font-weight:600}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.back{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-600);text-decoration:none}
.back svg{width:15px;height:15px;transform:rotate(180deg)}
.back:hover{color:var(--ink-900)}
.hero-img{min-height:100%}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-text{padding:calc(68px + var(--s-xl)) var(--gutter) var(--s-xl)}
  .hero-img{min-height:0;aspect-ratio:4/5}
}

/* ============================== SECTIONS: rule, then the headline (no labels) */
.sec{padding:var(--section) 0}
.paper{background:var(--cream-50)}
.head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px 24px;border-top:1px solid var(--rule);padding-top:var(--s-l);margin-bottom:var(--head-gap)}
.head h2{grid-column:1 / 11;font-size:clamp(2.2rem,4.2vw,3.8rem)}
.head .ctrl{grid-column:12 / 13;justify-self:end;align-self:end}
@media(max-width:820px){
  .head{grid-template-columns:1fr auto}
  .head h2{grid-column:1 / 2}
  .head .ctrl{grid-column:2 / 3}
}

/* ============================== IMPRESSIONS: horizontal photo row with captions */
.strip{display:flex;align-items:flex-end;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);
  padding:0 var(--edge) 4px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.shot{flex:0 0 auto;width:clamp(170px,17vw,240px);scroll-snap-align:start}
.shot .img{aspect-ratio:3/4}
.shot figcaption{display:flex;align-items:baseline;gap:10px;margin-top:12px;font-size:.85rem;color:var(--ink-600)}
.shot figcaption b{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-900)}
.badge{position:absolute;right:12px;bottom:12px;z-index:2;background:var(--cream-50);padding:8px 12px}
.badge img{max-height:20px;width:auto}
.ctrl{display:flex;gap:8px}
.ctrl button{all:unset;cursor:pointer;width:44px;height:44px;border:1px solid var(--rule);border-radius:50%;display:grid;place-items:center;transition:background-color .25s,opacity .25s}
.ctrl button:hover{background:var(--cream-50)}
.ctrl button:disabled{opacity:.3;cursor:default}
.ctrl button:focus-visible{outline:2px solid var(--tiffany-deep);outline-offset:3px}
.ctrl svg{width:16px;height:16px}
.ctrl button[data-dir="-1"] svg{transform:rotate(180deg)}

/* Numerals in captions and labels */

/* ============================== HOW: three photo cards */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.way{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.flag{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tiffany-ink)}
.flag .dot{width:6px;height:6px;border-radius:50%;background:var(--tiffany-deep);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.way h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.35rem,1.8vw,1.7rem);line-height:1.1;margin-top:10px}
.way p{color:var(--ink-600);font-size:.95rem;margin-top:6px}
@media(max-width:860px){.ways{grid-template-columns:1fr;gap:var(--s-xl)}}

/* Certifications: a quiet list */

/* ============================== CONTACT: photo and email on ink */

footer{background:var(--ink-900);color:var(--cream-a40);font-size:.85rem;border-top:1px solid var(--cream-a14)}
footer .bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:24px var(--edge) calc(24px + env(safe-area-inset-bottom,0px))}
footer a{color:var(--cream-a64);text-decoration:none}
footer a:hover{color:var(--cream-50)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}


/* ============================== WHY ANTONIA: one portrait, her story as a short editorial */
.portrait{display:grid;grid-template-columns:5fr 6fr;gap:clamp(var(--s-xl),6vw,110px);align-items:center}
.portrait .img{aspect-ratio:4/5}
.portrait .text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-l);max-width:580px}
.portrait h2{font-size:clamp(2.4rem,4.4vw,4.2rem)}
.portrait .body p{font-size:1.08rem;line-height:1.75;color:var(--ink-700)}
.portrait .body p+p{margin-top:16px}
.portrait .body p:first-child::first-letter{float:left;font-family:var(--font-display);font-size:4.4em;line-height:.8;padding:8px 12px 0 0;color:var(--ink-900)}
.sig{font-family:var(--font-display);font-style:italic;font-size:2.3rem;line-height:1;color:var(--tiffany-ink)}
@media(max-width:900px){.portrait{grid-template-columns:1fr}.portrait .img{max-width:520px}}

/* ============================== MY CORE CONCEPT: three steps on one line (rows aligned) */
.journey{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,3vw,48px)}
.journey::before{content:"";position:absolute;top:34px;left:16.66%;right:16.66%;height:1px;background:linear-gradient(90deg,var(--sky-deep),var(--butter-deep),var(--blush-deep))}
.jstep{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.jstep .dot{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--band,var(--cream-100));border:1px solid var(--ink-300);transition:border-color .4s,box-shadow .5s,background-color .4s;
  font-family:var(--font-display);font-style:italic;font-size:1.7rem;color:var(--ink-900);box-shadow:0 0 0 12px var(--band,var(--cream-100))}
.jstep h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.1vw,2rem);line-height:1.05;margin-top:var(--s-l)}
.jstep .q{font-family:var(--font-display);font-style:italic;font-size:1.15rem;color:var(--ink-600);margin-top:8px}
.jstep .tags{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:8px;margin-top:22px;max-width:360px}
.jstep .tags li{font-size:.8rem;color:var(--ink-700);padding:6px 13px;border:1px solid var(--rule);border-radius:999px;background:var(--cream-50)}
@media(min-width:861px){
  .journey{grid-template-rows:repeat(4,auto)}
  .jstep{display:grid;grid-row:span 4;grid-template-rows:subgrid;justify-items:center}
}
@media(max-width:860px){
  .journey{grid-template-columns:1fr;gap:var(--s-2xl)}
  .journey::before{display:none}
}

/* ============================== THROUGH KNOWLEDGE / IMPACT / INVESTMENT: one photo, one promise */
.through{padding:var(--section) 0}
/* Through knowledge is the main focus: its own soft band, set apart from the rows below. */
#knowledge{--band:color-mix(in srgb,var(--tiffany-soft) 32%,var(--cream-50));background:var(--band)}
.spread{display:grid;grid-template-columns:4fr 6fr;gap:clamp(var(--s-xl),6vw,110px);align-items:center}
.spread.flip{grid-template-columns:6fr 4fr}
.spread.flip .img{order:2}
.spread .img{aspect-ratio:4/5;max-height:600px}
.spread .text{display:flex;flex-direction:column;align-items:flex-start}
.spread .label{flex-wrap:wrap}
.spread .focus{padding:4px 10px;border-radius:999px;background:var(--tiffany-soft);color:var(--tiffany-ink);letter-spacing:.12em}
.spread h2{font-size:clamp(2.6rem,5vw,4.6rem);line-height:.95}
.spread .value{font-family:var(--font-display);font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.2;margin-top:var(--s-m);max-width:24ch}
.spread .sub{color:var(--ink-600);margin-top:16px;max-width:40ch}
.spread .links{display:flex;flex-wrap:wrap;gap:var(--s-m) var(--s-l);margin-top:var(--s-xl)}
@media(max-width:900px){
  .spread,.spread.flip{grid-template-columns:1fr;gap:var(--s-l)}
  .spread.flip .img{order:0}
  .spread .img{max-width:520px}
}

/* ============================== CERTIFICATE PREVIEW */
.viewer{width:min(94vw,980px);height:min(90vh,920px);max-width:none;max-height:none;padding:0;border:0;background:var(--cream-50);color:var(--ink-900);box-shadow:0 30px 90px rgba(36,57,89,.35)}
.viewer[open]{display:flex;flex-direction:column}
.viewer::backdrop{background:rgba(36,57,89,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.v-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--rule)}
.v-actions{display:flex;align-items:center;gap:18px}
.v-close{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.v-close:hover{background:var(--cream-200)}
.v-close:focus-visible{outline:2px solid var(--tiffany-deep);outline-offset:2px}
.v-close svg{width:18px;height:18px}
.viewer .stage{flex:1;min-height:0;display:grid;place-items:center;background:var(--cream-200)}
.viewer .stage iframe{width:100%;height:100%;border:0;background:var(--cream-50)}
.viewer .stage img{max-width:100%;max-height:100%;object-fit:contain}

/* ============================== LOGO BANNER: scrolls by itself, can be dragged */
.logos{position:relative;overflow:hidden;border-bottom:1px solid var(--rule);padding:28px 0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logos.grabbing{cursor:grabbing}
.logos-track{display:flex;width:max-content;will-change:transform}
.logo{flex:0 0 auto;display:grid;place-items:center;height:48px;margin-right:clamp(48px,6vw,96px);font-family:var(--font-headline);font-weight:700;font-size:1.2rem;letter-spacing:.02em;color:var(--ink-400)}
.logo img{max-height:none;width:auto;pointer-events:none}
.logo.txt{color:var(--ink-900);font-weight:600}
.logo.ph-logo{min-width:120px;padding:0 18px;border:1px dashed var(--ink-300);border-radius:8px;font-family:var(--font-ui);font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
html:not(.motion) .logos{overflow-x:auto;scrollbar-width:none}

/* ============================== IMPACT / INVESTMENT / EXPERIENCES: rows that open */
.more{padding:var(--section-tight) 0 var(--section)}
.more+.words-row{margin-top:calc(var(--section-tight) - var(--section))}
.acc{border-top:1px solid var(--rule)}
.acc:last-child{border-bottom:1px solid var(--rule)}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--s-s) var(--s-xl);padding:clamp(var(--s-l),3vw,var(--s-xl)) 0}
.acc summary::-webkit-details-marker{display:none}
.acc summary:focus-visible{outline:2px solid var(--tiffany-deep);outline-offset:4px}
.acc summary h2{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1}
.acc .who{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500)}
.acc .plus{position:relative;width:46px;height:46px;border:1px solid var(--rule);border-radius:50%;transition:transform .45s var(--ease-out),background-color .3s}
.acc .plus::before,.acc .plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--ink-900);transform:translate(-50%,-50%)}
.acc .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc summary:hover .plus{background:var(--cream-50)}
.acc[open] .plus{transform:rotate(45deg)}
.acc .panel{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-l);max-width:640px;padding:0 0 clamp(var(--s-xl),4vw,var(--s-2xl))}
.manifesto{font-family:var(--font-display);font-style:italic;font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.3;color:var(--ink-800);border-left:2px solid var(--tiffany-deep);padding-left:20px}
.acc .main{font-size:1.05rem;color:var(--ink-700);line-height:1.7}
:root{interpolate-size:allow-keywords}
.acc::details-content{height:0;overflow:clip;transition:height .5s var(--ease-out),content-visibility .5s allow-discrete}
.acc[open]::details-content{height:auto}
@media(max-width:700px){.acc summary{grid-template-columns:1fr auto}.acc .who{grid-row:2;grid-column:1}.acc .plus{grid-row:1 / 3;grid-column:2}}

@media(max-width:700px){
  .hero-img{aspect-ratio:4/5;max-height:72svh}
  .portrait .img,.spread .img{aspect-ratio:4/5;max-height:62svh}
  }

/* ============================== ANIMATED SCENES on the next gen page (from v3/v5, restyled for v6) */
/* The missing conversation: pinned scene, a dark circle opens, business words dissolve, her questions appear. */
.gap{position:relative;height:340vh;color:var(--cream-50)}
.gap .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.gap .dark-bg{position:absolute;inset:0;z-index:-2;background:var(--ink-900);clip-path:circle(var(--r,150%) at 50% 50%)}
.gap .stage::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(50% 45% at 50% 50%,rgba(92,225,230,calc(.06 + var(--g,0) * .18)) 0%,transparent 70%)}
.biz{position:absolute;font-family:var(--font-display);font-style:italic;font-size:clamp(1.2rem,2.4vw,2.1rem);color:var(--cream-a40);white-space:nowrap;will-change:transform,opacity,filter}
.gap-center{position:relative;width:min(92vw,980px);text-align:center;display:grid;gap:var(--s-l);justify-items:center}
.gap-titles{position:relative;display:grid;width:100%}
.gap-titles h2{grid-area:1/1;font-size:clamp(2.4rem,6vw,5.2rem);line-height:1;will-change:opacity,transform,filter}
.gap-titles .t2 em{color:var(--tiffany)}
.questions{display:grid;gap:var(--s-s);justify-items:center;min-height:8.5em}
.questions p{font-family:var(--font-display);font-style:italic;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.2;opacity:0;transform:translateY(24px);filter:blur(8px)}
.questions p.on{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out)}
.gap-end{color:var(--cream-a64);opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.gap-end.on{opacity:1;transform:none}
.gap-end b{color:var(--tiffany);font-weight:500}

/* Why me: the quote lights up word by word. */
.wordquote blockquote{font-family:var(--font-display);font-size:clamp(2.6rem,6.4vw,6rem);line-height:1;letter-spacing:-.02em;max-width:16ch}
.wordquote .wd{color:var(--ink-300);transition:color .45s ease}
.wordquote .wd.on{color:var(--ink-900)}
.wordquote .wd.em{font-style:italic}
.wordquote .wd.em.on{color:var(--tiffany-ink)}
.wordquote .foot{margin-top:var(--s-2xl);max-width:58ch;font-size:1.1rem;color:var(--ink-600)}
.wordquote .foot b{color:var(--ink-900);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .gap{height:auto}
  .gap .stage{position:relative;height:auto;padding:var(--section) 0}
  .biz{display:none}
}

/* ============================== HERO: the four ways in, as a small index (number, word, arrow on hover) */
.throughs{width:100%;max-width:440px;border-top:1px solid var(--rule)}
.throughs li{border-bottom:1px solid var(--rule)}
.throughs a{position:relative;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--s-s);padding:var(--s-s) 0;text-decoration:none;color:var(--ink-500)}
.throughs .tw{font-family:var(--font-display);font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.1;transition:transform .5s var(--ease-out)}
.throughs .tw em{font-style:italic;color:var(--ink-900);transition:color .3s}
.throughs svg{width:16px;height:16px;align-self:center;color:var(--tiffany-ink);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .5s var(--ease-out)}
.throughs a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--tiffany-deep);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.throughs a:hover .tw,.throughs a:focus-visible .tw{transform:translateX(6px)}
.throughs a:hover .tw em,.throughs a:focus-visible .tw em{color:var(--tiffany-ink)}
.throughs a:hover svg,.throughs a:focus-visible svg{opacity:1;transform:none}
.throughs a:hover::after,.throughs a:focus-visible::after{transform:scaleX(1)}
@media(hover:none){.throughs svg{opacity:.45;transform:none}}

/* Core concept and certifications, inside Through knowledge */
.concept{margin-top:var(--section)}
/* Work with me: each format drawn as who is in the room. Slight motion on hover. */
.fmt-box{position:relative;aspect-ratio:16/10;display:grid;place-items:center;background:var(--cream-50);border:1px solid var(--rule);overflow:hidden}
.fmt{width:52%;height:auto;overflow:visible}
.fmt .au{fill:var(--ink-700)}
.fmt .me{fill:var(--tiffany-deep)}
.fmt .ln,.fmt .waves path{fill:none;stroke:var(--ink-300);stroke-width:1.2}
.fmt .faint{stroke:var(--rule)}
.fmt .dash{stroke-dasharray:3 5}
.fmt .waves path{stroke:var(--tiffany-deep);opacity:.25}
.fmt .ring,.fmt .l,.fmt .r{transform-box:view-box;transition:transform 1.2s var(--ease-out)}
.fmt .ring{transform-origin:120px 84px}
.fmt-box .flag{position:absolute;left:var(--s-m);top:var(--s-m)}
.way h3{margin-top:var(--s-m)}
html.motion .way:hover .waves path{animation:wave 1.6s ease-out infinite}
html.motion .way:hover .waves path:nth-child(2){animation-delay:.25s}
html.motion .way:hover .waves path:nth-child(3){animation-delay:.5s}
@keyframes wave{0%,100%{opacity:.25}40%{opacity:1}}
html.motion .way:hover .ring{transform:rotate(45deg)}
html.motion .way:hover .l{transform:translateX(8px)}
html.motion .way:hover .r{transform:translateX(-8px)}
.strip-bar{display:flex;justify-content:flex-end;margin-top:var(--s-m)}
/* Work with me: straight after the logo line, so no second line and less space on top; photos sit close under the cards. */
#work{padding-top:var(--section-tight)}
#work .head{border-top:0;padding-top:0}
#work .ways+.strip,#work .wrap+.strip{margin-top:var(--s-3xl)}
#work{padding-bottom:calc(var(--section) + var(--s-l))}
@media(max-width:860px){.fmt-box{aspect-ratio:5/2}.fmt{width:34%}}
/* Expertise: each step glows softly on hover. */
.jstep{isolation:isolate}
.jstep::before{content:"";position:absolute;inset:-28px -12px;z-index:-1;border-radius:32px;background:radial-gradient(60% 55% at 50% 30%,rgba(92,225,230,.28),transparent 75%);opacity:0;transition:opacity .5s var(--ease-out)}
.jstep h3 em,.jstep .tags li{transition:color .4s,border-color .4s,box-shadow .4s}
.jstep:hover::before,.jstep:focus-within::before{opacity:1}
.jstep:hover .dot{border-color:var(--tiffany-deep);background:var(--cream-50);box-shadow:0 0 0 12px var(--band,var(--cream-100)),0 0 34px 16px rgba(92,225,230,.45)}
.jstep:hover h3 em{color:var(--tiffany-ink)}
.jstep:hover .tags li{border-color:rgba(37,185,192,.45);box-shadow:0 0 14px rgba(92,225,230,.25)}
/* Certifications: small A4 previews in a row, like the impressions. Click opens the preview. */
.certs{margin-top:var(--section-tight)}
.acc.certs summary{padding:var(--s-l) 0}
.certs h3{font-weight:400;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1}
.certs .panel{max-width:none;display:block}
.cert-strip{padding:6px 0 var(--s-xs);align-items:flex-start;scroll-padding-inline:0}
.cert{flex:0 0 auto;width:clamp(120px,10vw,150px);scroll-snap-align:start;text-decoration:none;color:inherit}
.cert .a4{display:block;aspect-ratio:297/210;background:var(--cream-50);border:1px solid var(--rule);overflow:hidden;
  box-shadow:0 1px 2px rgba(36,57,89,.06),0 8px 18px -12px rgba(36,57,89,.3);transition:transform .5s var(--ease-out),box-shadow .5s}
.cert .a4 img{width:100%;height:100%;object-fit:cover}
.cert:hover .a4,.cert:focus-visible .a4{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(37,185,192,.45),0 14px 24px -12px rgba(36,57,89,.4)}
.cert .c-name{display:block;margin-top:var(--s-xs);font-size:.75rem;font-weight:500;line-height:1.3}
.cert .c-meta{display:block;font-size:.7rem;color:var(--ink-500)}

/* Word strip (from v3): outline words drift sideways, two are filled. */
.words-row{--wgap:clamp(28px,3.5vw,46px);overflow:hidden;padding:var(--section-tight) 0}
.words-track{display:flex;align-items:center;gap:var(--wgap);width:max-content;animation:words 60s linear infinite reverse}
.words-row:hover .words-track{animation-play-state:paused}
@keyframes words{to{transform:translateX(calc(-50% - var(--wgap) / 2))}}
.words-track span{font-family:var(--font-display);font-style:italic;font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.15;white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--ink-300)}
.words-track span.f{color:var(--ink-900);-webkit-text-stroke:0}
.words-track b{width:12px;height:12px;border-radius:50%;background:var(--tiffany);flex-shrink:0;box-shadow:0 0 0 6px rgba(92,225,230,.2)}
html:not(.motion) .words-track{animation:none}

/* Let's talk (from v3): letters rise in, rings turn slowly, one call to action. Normal cursor. */
.final{position:relative;background:var(--ink-900);color:var(--cream-50);padding:calc(var(--section) * 1.5) 0 var(--section);overflow:hidden;isolation:isolate;text-align:center}
.final .orbit{position:absolute;left:50%;top:46%;width:min(120vw,1100px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none}
.final .orbit span{position:absolute;inset:0;border-radius:50%;border:1px solid var(--cream-a14)}
.final .orbit span:nth-child(2){inset:12%;border-color:rgba(169,211,245,.18)}
.final .orbit span:nth-child(3){inset:24%;border-color:rgba(92,225,230,.22)}
.final .orbit span:nth-child(4){inset:36%;border:0;background:radial-gradient(circle,rgba(92,225,230,.18),transparent 70%);animation:glow 5s ease-in-out infinite}
.final .orbit .o1,.final .orbit .o2{position:absolute;inset:0;animation:spin 24s linear infinite}
.final .orbit .o2{inset:12%;animation-duration:36s;animation-direction:reverse}
.final .orbit em{position:absolute;left:50%;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--tiffany);box-shadow:0 0 24px var(--tiffany)}
.final .orbit .o2 em{background:var(--sky-deep);box-shadow:0 0 20px var(--sky-deep)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glow{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.15);opacity:.4}}
.big{font-family:var(--font-headline);font-weight:700;font-size:clamp(4.2rem,15vw,13rem);letter-spacing:-.06em;line-height:.9;margin:0 0 var(--s-l)}
.big .ch{display:inline-block;transition:transform .9s var(--ease-out),opacity .9s var(--ease-out);transition-delay:calc(var(--i) * 45ms)}
.big .it{font-family:var(--font-display);font-style:italic;font-weight:400;letter-spacing:-.03em;color:var(--tiffany)}
html.js.motion .big .ch{transform:translateY(60%) rotate(6deg);opacity:0}
html.js.motion .final.in .big .ch{transform:none;opacity:1}
.final .lead{color:var(--cream-a64);font-size:1.1rem;max-width:46ch;margin:0 auto}
.btn-glow{margin-top:var(--s-xl);background:var(--tiffany);color:var(--ink-900);font-weight:500;box-shadow:0 10px 40px -8px rgba(92,225,230,.6)}
.btn-glow:hover{background:#86EBEE}
.final .note{margin-top:var(--s-m);font-size:.85rem;color:var(--cream-a40);user-select:all}

/* Next gen: "You can inherit a company" (from v3), dark, lights up word by word. */
.inherit{position:relative;background:var(--ink-900);color:var(--cream-50);padding:calc(var(--section) * 1.3) 0;overflow:hidden;isolation:isolate}
.inherit::before{content:"";position:absolute;left:50%;top:50%;width:90vmax;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;background:radial-gradient(circle,rgba(92,225,230,.14) 0%,transparent 55%)}
.inherit blockquote{margin:0;font-family:var(--font-headline);font-weight:600;font-size:clamp(2.2rem,5.6vw,5rem);letter-spacing:-.045em;line-height:1.02;max-width:16ch}
.inherit .wd{color:rgba(243,241,238,.16);transition:color .45s ease}
.inherit .wd.on{color:var(--cream-50)}
.inherit .wd.em{font-family:var(--font-display);font-style:italic;font-weight:400;letter-spacing:-.02em}
.inherit .wd.em.on{color:var(--tiffany)}
.inherit .foot{margin-top:var(--s-2xl);max-width:52ch;color:var(--cream-a64);font-size:1.1rem}
.inherit .foot b{color:var(--cream-50);font-weight:600}
/* Impact, investment, experiences: lines only between and below the rows, none on top (the band edge already separates). */
.acc:first-child{border-top:0}

/* ============================== v7: colours from Antonia's design ideas (14 Oct 2026)
   White pages and light blue bands (#DCEEFD); navy text and the v6 headline style stay; turquoise for highlights and buttons. */
:root{--cream-100:#FFFFFF;--cream-200:#EEF5FC;--blue:#DCEEFD;--hl:#13959C;--band:var(--blue)}
.band{background:var(--blue)}
#knowledge{--band:var(--blue);background:var(--blue)}
.jstep .tags li{background:var(--cream-50)}

/* Highlights: a few words in headlines in the turquoise of the Let's talk button (a deeper shade so it reads on white and light blue), with a soft glow. */
.hl{color:var(--hl);text-shadow:0 0 28px rgba(92,225,230,.35)}
/* Buttons: the bright turquoise with navy text and the glow from the Let's talk button, everywhere (navbar too). */
.btn{background:var(--tiffany);color:var(--ink-900);font-weight:500;box-shadow:0 10px 32px -10px rgba(92,225,230,.75)}
.btn:hover{background:#86EBEE;box-shadow:0 12px 40px -8px rgba(92,225,230,.85)}
.top .btn-sm{box-shadow:0 6px 22px -6px rgba(92,225,230,.8)}
.arrow-link{border-bottom-color:var(--tiffany-deep)}
.arrow-link svg{color:var(--hl)}

/* About: full-width text, two columns on wide screens, then the impressions. */
.about h2{font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1;max-width:20ch}
.about-text{margin-top:var(--head-gap);columns:2;column-gap:clamp(var(--s-xl),5vw,var(--s-4xl))}
.about-text p{font-size:clamp(1.05rem,1.25vw,1.2rem);line-height:1.75;color:var(--ink-700);break-inside:avoid;margin:0 0 var(--s-l)}
.about .strip{margin-top:var(--s-2xl)}
@media(max-width:820px){.about-text{columns:1}}

/* Through knowledge: one story text that lights up as you scroll, photo beside it. */
.story-grid{display:grid;grid-template-columns:7fr 4fr;gap:clamp(var(--s-xl),6vw,110px);align-items:center}
.story-grid .img{aspect-ratio:4/5;max-height:640px}
.story{margin-top:var(--s-xl);font-family:var(--font-display);font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.38;max-width:34ch}
.story .wd{color:var(--ink-300);transition:color .45s ease}
.story .wd.on{color:var(--ink-900)}
.story-text .links{margin-top:var(--s-xl)}
.story-text h2{font-size:clamp(2.6rem,5vw,4.6rem);line-height:.95}
.tr-head h2{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1}
@media(max-width:900px){.story-grid{grid-template-columns:1fr;gap:var(--s-l)}.story-grid .img{order:-1;max-width:520px;max-height:62svh}}

/* Impact, investment, experiences: open sections, title and text side by side; .rev puts the title on the right. */
.tr{padding:var(--section) 0}
.tr-grid{display:grid;grid-template-columns:5fr 6fr;gap:var(--s-l) clamp(var(--s-xl),6vw,110px);align-items:center}
.tr.rev .tr-grid{grid-template-columns:6fr 5fr}
.tr.rev .tr-head{order:2;text-align:right}
.tr-head .who{display:block;margin-top:var(--s-m);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500)}
.tr-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-l)}
.tr-body p{font-size:clamp(1.05rem,1.25vw,1.2rem);line-height:1.75;color:var(--ink-700);max-width:52ch}
.tr .manifesto p{font-size:inherit;line-height:1.3;color:var(--ink-800)}
@media(max-width:820px){.tr-grid,.tr.rev .tr-grid{grid-template-columns:1fr}.tr.rev .tr-head{order:0;text-align:left}}

/* Work with me sits on a light blue band here, after the Through sections. */
#work{padding:var(--section) 0}
#work .head{border-top:0;padding-top:0}
.band .fmt-box{border-color:transparent}

/* Navbar: liquid glass once you scroll (strong blur and saturation, a light sheen on top, a soft edge and shadow). */
.top.scrolled{background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.38));
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border-bottom-color:rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(36,57,89,.06),0 10px 30px -14px rgba(36,57,89,.22)}

/* ============================== v9 LINKEDIN (Antonia, 16 Oct 2026): latest posts as cards, one Connect button. Before Let's talk. */
.linkedin{background:var(--blue)}
.li-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-l);margin-bottom:var(--head-gap)}
.li-head h2{font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1}
.li-head .btn{gap:var(--s-s)}
.li-btn{width:17px;height:17px}
.li-gate{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-m);padding:var(--s-2xl);background:var(--cream-50);border-radius:4px}
.li-gate p:first-child{font-family:var(--font-display);font-size:clamp(1.35rem,2vw,1.7rem);color:var(--ink-900)}
.li-note{font-size:.8rem;color:var(--ink-500)}
.li-strip{align-items:flex-start;padding-top:var(--s-2xs)}
.li-post{flex:0 0 min(504px,86vw);scroll-snap-align:start}
.li-post iframe{display:block;width:100%;border:0;border-radius:8px;background:var(--cream-50);box-shadow:0 18px 40px -26px rgba(36,57,89,.4)}

/* ============================== v9 THROUGH sections: headline at the top of its column (not centred); impact (and later experiences) has a photo under it. */
.tr-grid,.tr.rev .tr-grid{align-items:start}
.tr-img{margin-top:var(--s-xl);aspect-ratio:4/3;border-radius:4px;overflow:hidden}
.tr-img img{width:100%;height:100%;object-fit:cover}

/* ============================== v9 KNOWLEDGE: story text on the left, the three steps vertical on the right (sticky on wide screens).
   Editorial numbers (large italic serif), hairlines between the steps, no circles and no connecting line (Antonia, 16 Oct 2026). */
#knowledge .story-grid{grid-template-columns:6fr 5fr;align-items:start}
.k-concept{position:sticky;top:110px}
.k-concept .head{border-top:0;padding-top:0;margin-bottom:var(--s-xl);display:block}
.k-concept .head h2{font-size:clamp(1.7rem,2.6vw,2.4rem)}
.journey.vert{display:block}
.journey.vert::before{display:none}
.journey.vert .jstep{display:grid;grid-template-columns:clamp(64px,6vw,92px) 1fr;grid-template-rows:auto;grid-row:auto;column-gap:var(--s-l);align-items:start;justify-items:start;text-align:left;
  padding:var(--s-xl) 0;border-top:1px solid var(--rule)}
.journey.vert .jstep:last-child{border-bottom:1px solid var(--rule)}
.journey.vert .jstep::before{display:none}
.journey.vert .jstep .dot{grid-row:1 / 4;grid-column:1;width:auto;height:auto;display:block;border:0;border-radius:0;background:none;box-shadow:none;
  font-family:var(--font-display);font-style:italic;font-size:clamp(2.6rem,3.6vw,3.4rem);line-height:.9;color:var(--ink-300);transition:color .5s}
.journey.vert .jstep:hover .dot{border:0;background:none;box-shadow:none;color:var(--hl)}
.journey.vert .jstep>:not(.dot){grid-column:2}
.journey.vert .jstep h3{margin-top:0}
.journey.vert .jstep .tags{justify-content:flex-start;margin-top:var(--s-m);max-width:none}
@media(max-width:900px){
  #knowledge .story-grid{grid-template-columns:1fr;gap:var(--s-3xl)}
  .k-concept{position:static}
  .journey.vert .jstep{grid-template-columns:56px 1fr;column-gap:var(--s-m)}
}
.li-gate[hidden],.li-strip[hidden],.li-bar[hidden]{display:none}

/* ============================== v11 (Antonia, 18 Oct 2026): the v9 design with the v10 texts. Styles for the new text parts, in the v9 look. */
.k-text{margin-top:var(--s-xl);display:flex;flex-direction:column;gap:var(--s-m)}
.k-text p,.tr-body p{font-size:clamp(1.02rem,1.2vw,1.14rem);line-height:1.75;color:var(--ink-700);max-width:56ch}
.tr-body{gap:var(--s-m)}
.tr-body .tr-lead{font-family:var(--font-display);font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.3;color:var(--ink-900);margin-bottom:var(--s-2xs)}
.tr-body .tr-tagline{font-family:var(--font-display);font-style:italic;font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1.1;color:var(--ink-900)}
.k-text .close-line,.tr-body .close-line{font-family:var(--font-display);font-style:italic;font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.35;color:var(--ink-800);border-left:2px solid var(--tiffany-deep);padding-left:var(--s-l);margin:var(--s-s) 0}
.tr-body .arrow-link{margin-top:var(--s-s)}
.links{margin-top:var(--s-xl)}
/* Mantra: her motto as a line of its own before Let's talk. */
.mantra{padding:var(--section) var(--gutter);text-align:center;border-top:1px solid var(--rule)}
.mantra p{font-family:var(--font-display);font-size:clamp(2rem,4.4vw,4rem);line-height:1.1;color:var(--ink-900)}
.mantra span{display:inline-block;margin:0 .15em}
@media(max-width:700px){.mantra span{display:block}}
.foot-links{display:inline-flex;flex-wrap:wrap;gap:var(--s-l)}

/* Through impact / investment / experiences (Antonia, 18 Oct 2026): like knowledge, the title column (with its photo, if any) stays in view
   beside the text while you scroll, on wide screens. On phones the columns stack and nothing sticks. */
@media(min-width:821px){
  .tr-head{position:sticky;top:110px;align-self:start}
}


/* ============================== Chapter index (from v10, Antonia 18 Oct 2026): lines in the right margin while the four Through sections are on screen; the current one longer and turquoise, names on hover. Wide screens only. */
/* Chapter index at the side (wide screens), shown while a chapter is on screen. */
.chapnav{position:fixed;right:clamp(14px,1.6vw,28px);top:50%;z-index:40;display:flex;flex-direction:column;gap:var(--s-s);transform:translate(12px,-50%);opacity:0;pointer-events:none;transition:opacity .5s,transform .6s var(--ease-out)}
.chapnav.show{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.chapnav a{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--s-xs);text-decoration:none;color:var(--ink-400);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;transition:color .4s}
.chapnav i{font-family:var(--font-display);font-size:1.1rem;letter-spacing:0;text-transform:none;min-width:2ch;text-align:right}
.chapnav span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .5s var(--ease-out),opacity .4s}
.chapnav:hover span,.chapnav a.on span{max-width:12ch;opacity:1}
.chapnav a.on,.chapnav a:hover{color:var(--ink-900)}
.chapnav a.on i{color:var(--hl)}
@media(max-width:1100px){.chapnav{display:none}}

/* v11 second round (Antonia): no chapter numbers, no extra tints; the side index shows names with a short line, the current one longer and turquoise. */
.chapnav a{align-items:center}
.chapnav i{min-width:0;width:14px;height:1px;background:currentColor;font-size:0;transition:width .5s var(--ease-out),background-color .4s}
.chapnav a.on i{width:32px;background:var(--hl)}
/* The index sits in the page margin: only lines, names appear on hover (with a paper backing) so they never cover the text. */
.chapnav{right:14px}
.chapnav a.on span{max-width:0;opacity:0}
.chapnav:hover a span{max-width:12ch;opacity:1}
.chapnav:hover{background:rgba(255,255,255,.94);padding:var(--s-s) var(--s-m);margin-right:-4px;border-radius:4px}
@media(max-width:1200px){.chapnav{display:none}}

/* ============================== Type roles (Antonia, 18 Oct 2026)
   Headlines and quotes: the serif (Instrument Serif), playful italics. Secondary lines under headlines (taglines, lead sentences, the
   knowledge opening line, the questions under the three steps): the body font (Bricolage Grotesque) set like a display face, light weight,
   tight tracking, its large optical size. Body text stays as it is. */
:root{--sub-weight:300;--sub-track:-.025em}
.tr-body .tr-tagline,.tr-body .tr-lead,.story,.jstep .q,.li-gate p:first-child{
  font-family:var(--font-ui);font-style:normal;font-weight:var(--sub-weight);letter-spacing:var(--sub-track);font-optical-sizing:auto}
.tr-body .tr-tagline{font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.12;color:var(--ink-900)}
.tr-body .tr-lead{font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.35;color:var(--ink-800)}
.story{font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.35}
.jstep .q{font-size:1.02rem;letter-spacing:-.01em;color:var(--ink-600);font-weight:400}
.li-gate p:first-child{font-size:clamp(1.3rem,1.9vw,1.6rem)}
/* Chapter index on hover: no white backing (Antonia), and enough room for "Experiences" with its letter spacing. */
.chapnav:hover{background:none;padding:0;margin-right:0}
.chapnav:hover a span{max-width:16ch}

/* Let's talk: a small round photo of her above the headline (kept from v12, Antonia 18 Oct 2026). */
.final-face{display:block;width:84px;height:84px;margin:0 auto var(--s-l);border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.3)}
.final-face img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;transform:scale(1.9);transform-origin:50% 14%}


/* ============================== v13 (Antonia, 18 Oct 2026): details only, the v11 design stays.
   Her name in the bar in a luxury style: the serif in widely spaced capitals, like a fashion house. */
.wordmark{text-transform:uppercase;letter-spacing:.24em;font-size:1.25rem;line-height:1}
@media(max-width:600px){.wordmark{font-size:1rem;letter-spacing:.18em}}

/* Photos fade in slowly with a slight zoom-out as they come into view (site.js adds .ph-in). Uses the separate "scale" property so hover effects keep working. */
html.js.motion .img>img,html.js.motion .final-face>img{opacity:0;scale:1.07;transition:opacity 1.6s ease,scale 2.6s cubic-bezier(.16,1,.3,1)}
html.js.motion .img.ph-in>img,html.js.motion .final-face.ph-in>img{opacity:1;scale:1}

/* ============================== v13, second round (Antonia, 18 Oct 2026): more colour and some glamour, details only. */

/* 2. Depth on the light blue: a soft turquoise light falls in from one corner of each blue section. */
.band,#knowledge,.linkedin{background-image:radial-gradient(55% 60% at 100% 0%,rgba(92,225,230,.20),transparent 72%),radial-gradient(40% 45% at 0% 100%,rgba(255,255,255,.55),transparent 75%)}
#investment{background-image:radial-gradient(55% 70% at 0% 100%,rgba(92,225,230,.20),transparent 72%),radial-gradient(40% 45% at 100% 0%,rgba(255,255,255,.55),transparent 75%)}
#work{background-image:radial-gradient(50% 60% at 0% 0%,rgba(92,225,230,.18),transparent 72%)}

/* 3. A band of light glides across the buttons on hover. */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-130%);transition:transform .9s var(--ease-out)}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(130%)}

/* 4. Turquoise in the small details: selected text, focus rings, text cursor, form accents. */
::selection{background:rgba(92,225,230,.38);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--tiffany-deep);outline-offset:3px}
html{caret-color:var(--tiffany-deep);accent-color:var(--tiffany-deep)}

/* Hero glamour */
/* a. The portrait drifts in very slowly, like a fashion film (transform, so it adds to the photo fade's scale). */
html.js.motion .hero-img img{animation:hero-drift 26s ease-in-out 1.5s infinite alternate}
@keyframes hero-drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.07) translate(-1%,-1.5%)}}
/* b. A soft turquoise light behind the headline. */
.hero-text{position:relative;isolation:isolate}
.hero-text::before{content:"";position:absolute;z-index:-1;left:calc(var(--edge) - 8%);top:18%;width:min(640px,80%);height:46%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(92,225,230,.24),rgba(92,225,230,.08) 55%,transparent);filter:blur(28px)}
html.js.motion .hero-text::before{animation:hero-glow 9s ease-in-out infinite alternate}
@keyframes hero-glow{from{opacity:.7;transform:scale(.96)}to{opacity:1;transform:scale(1.06)}}
/* c. The headline comes in from soft focus to sharp instead of sliding up. */
html.js.motion .hero h1 .rv{transform:scale(1.035);filter:blur(14px);transition:opacity 1.5s ease,transform 1.8s var(--ease-out),filter 1.6s ease;transition-delay:var(--d,0ms)}
html.js.motion .hero h1 .rv.in{transform:none;filter:blur(0)}
/* d. A fine turquoise frame line inside the portrait, like a passe-partout; it appears after the photo. */
.hero-img::after{content:"";position:absolute;inset:clamp(14px,2vw,28px);border:1px solid rgba(92,225,230,.75);pointer-events:none;z-index:1}
html.js.motion .hero-img::after{opacity:0;transform:scale(1.02);transition:opacity 1.6s ease 1.2s,transform 2s var(--ease-out) 1.2s}
html.js.motion .hero-img.ph-in::after{opacity:1;transform:none}

/* Through sections in Antonia's two warm colours (18 Oct 2026): knowledge warm stone #F3F1EE, investment soft blush #FEF8F4.
   Impact and experiences stay white; work with me and LinkedIn keep the light blue. A soft white light instead of the turquoise one. */
#knowledge{--band:#F3F1EE;background-color:#F3F1EE;background-image:radial-gradient(55% 60% at 100% 0%,rgba(255,255,255,.7),transparent 72%)}
#investment{--band:#FEF8F4;background-color:#FEF8F4;background-image:radial-gradient(55% 70% at 0% 100%,rgba(255,255,255,.75),transparent 72%)}


/* ============================== Antonia, 18 Oct 2026: warm accents.
   The light blue backgrounds become soft blush. The accent colour of the headline words ("experiences", "yourself" on hover, the step numbers on hover)
   becomes a warm tone from her moodboard; turquoise stays only for buttons and highlights (link lines and arrows, chapter index, frame line, selection). */
:root{--blue:#FEF8F4;--band:#FEF8F4;--hl:#BCA070;--hl-glow:rgba(188,160,112,.20)}
.band,.linkedin{background-color:#FEF8F4;background-image:radial-gradient(55% 60% at 100% 0%,rgba(255,255,255,.75),transparent 72%)}
#work{background-image:radial-gradient(50% 60% at 0% 0%,rgba(255,255,255,.7),transparent 72%)}
.hl{color:var(--hl);text-shadow:none}
.jstep:hover h3 em,.throughs a:hover .tw em,.throughs a:focus-visible .tw em{color:var(--hl)}
.journey.vert .jstep:hover .dot{color:var(--hl)}
.hero-text::before{background:radial-gradient(closest-side,var(--hl-glow),rgba(188,160,112,.06) 55%,transparent)}
.arrow-link svg{color:var(--tiffany-deep)}
.chapnav a.on i{background:var(--tiffany-deep)}


/* Antonia, 18 Oct 2026: the highlighted headline words upright (no italics), the knowledge background soft blush like the others,
   and the two short lines in the About text set as secondary lines (body font, display style). */
.hl,.display em.hl,.mantra em.hl{font-style:normal}
#knowledge{--band:#FEF8F4;background-color:#FEF8F4}
.about-text .about-line{font-family:var(--font-ui);font-weight:300;letter-spacing:-.02em;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.35;color:var(--ink-900)}

/* About: "Meet Antonia." as the heading, her first sentence as a large lead (secondary line style, body font). */
.about-lead{margin-top:var(--s-xl);max-width:34ch;font-family:var(--font-ui);font-weight:300;letter-spacing:-.025em;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.3;color:var(--ink-900)}
.about-lead+.about-text{margin-top:var(--s-2xl)}
/* About lead: across both columns, a little smaller (Antonia, 18 Oct 2026). */
.about-lead{max-width:none;font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.4}
/* About: both columns end at the same height; body paragraphs may continue into the next column, the short lines stay whole. */
.about-text{column-fill:balance}
.about-text p{break-inside:auto}
.about-text .about-line{break-inside:avoid}

/* Impact photo is portrait now (the UNICEF NextGen banner, Antonia 18 Oct 2026). Impressions: every photo the same size, no captions. */
.tr-img.tall{aspect-ratio:4/5;max-width:440px}
#strip .shot figcaption{display:none}
#strip{align-items:flex-start}

/* Mantra strip: "Own your path." filled in the gold accent. */
.words-track span.f.gold{color:var(--hl);-webkit-text-stroke:0}


/* Through investment: the USP as a small visual, financial capital x human capital (Antonia, 19 Oct 2026). */
.capital{margin:var(--s-2xl) 0 0 auto;width:min(380px,100%);text-align:right}
.capital svg{display:block;width:100%;height:auto;overflow:visible}
.capital circle{fill:none;stroke:var(--ink-400);stroke-width:1.2}
.capital .c-lens{fill:var(--hl);fill-opacity:.28;stroke:none}
.capital text{font-family:var(--font-ui);font-weight:300;font-size:17px;letter-spacing:-.01em;fill:var(--ink-800);text-anchor:middle}
.capital .c-x{font-family:var(--font-display);font-size:40px;fill:var(--hl);font-weight:400}
.capital figcaption{margin-top:var(--s-s);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500)}
html.js.motion .capital .c-l,html.js.motion .capital .c-r,html.js.motion .capital .c-lens,html.js.motion .capital .c-x{transition:transform 1.6s var(--ease-out) .3s,opacity 1.2s ease .3s}
html.js.motion .rv:not(.in) .capital .c-l{transform:translateX(-34px)}
html.js.motion .rv:not(.in) .capital .c-r{transform:translateX(34px)}
html.js.motion .rv:not(.in) .capital .c-lens,html.js.motion .rv:not(.in) .capital .c-x{opacity:0}
html.js.motion .capital .c-lens,html.js.motion .capital .c-x{transition-delay:1.1s}
@media(max-width:820px){.capital{margin:var(--s-xl) 0 0;text-align:left}}

/* Experiences photo: a small brand label in the top left corner (RSVP Mallorca). */
.tr-img .img-label{position:absolute;left:var(--s-m);top:var(--s-m);z-index:1;font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}

/* Links inside body text: bold, with a fine turquoise underline. */
.text-link{color:var(--ink-900);text-decoration:underline;text-decoration-color:var(--tiffany-deep);text-decoration-thickness:1px;text-underline-offset:3px}
.text-link:hover{text-decoration-thickness:2px}

/* ============================== Name in Caslon (Antonia, 19 Oct 2026): only "Antonia Gölzner" uses Libre Caslon Display, in widely spaced capitals,
   in the bar and the footer. Headings stay in Instrument Serif with their italics (Caslon headings and a handwriting lockup were tried and dropped). */
.wordmark.caslon{font-family:"Libre Caslon Display",Georgia,serif;font-size:21px;letter-spacing:.16em;text-transform:uppercase;line-height:1;text-decoration:none;color:var(--ink-900)}
.wordmark.caslon.lg{font-size:26px}
footer .wordmark.caslon{color:var(--cream-50)}
.foot-brand{display:inline-flex;align-items:baseline;gap:var(--s-l)}
@media(max-width:600px){.wordmark.caslon{font-size:16px;letter-spacing:.12em}}


/* Legal pages (Impressum, Datenschutz): a narrow reading column. */
.legal{padding:calc(88px + var(--s-3xl)) 0 var(--section)}
.legal-wrap{max-width:760px}
.legal h1{font-size:clamp(2.6rem,5vw,4rem);margin-bottom:var(--s-xl)}
.legal h2{font-family:var(--font-ui);font-size:1.05rem;font-weight:600;color:var(--ink-900);margin:var(--s-2xl) 0 var(--s-s)}
.legal p{color:var(--ink-700);line-height:1.75;margin:0 0 var(--s-m)}
.legal a{color:var(--ink-900);text-decoration-color:var(--tiffany-deep);text-underline-offset:3px}
.legal-lead{font-size:1.15rem}
.todo{background:#FFF4D6;color:#7A5A00;padding:1px 6px;border-radius:3px;font-size:.95em}

/* Work with me drawings: centred in their box in every browser (Safari did not stretch the grid row to the box's aspect-ratio height, so the drawing sat at the top). */
.fmt-box{display:block}
.fmt-box .fmt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.fmt-box .fmt{width:52%;height:auto;aspect-ratio:240/168;max-height:80%}
@media(max-width:860px){.fmt-box .fmt{width:34%}}

/* ============================== Next gen page scenes (Antonia, 19 Oct 2026). site.js sets --p (0 to 1) on [data-progress] as it scrolls through
   the screen and adds .on to children whose data-at is reached. Without JS or with reduced motion everything is shown complete. */
.gens-lead{max-width:46ch;font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.6;color:var(--ink-700);margin-top:calc(var(--head-gap) * -.4)}
.gens-line{position:relative;margin-top:var(--s-3xl);padding-bottom:var(--s-xl)}
.gens-svg{position:absolute;left:0;right:0;top:0;width:100%;height:120px;overflow:visible}
.gens-svg line{stroke-width:2;vector-effect:non-scaling-stroke}
.gens-svg .track{stroke:var(--rule)}
.gens-svg .draw{stroke:var(--hl);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,1))}
.gens-nodes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
.gens-nodes li{display:flex;flex-direction:column;align-items:center;gap:var(--s-xs);text-align:center;opacity:.35;transition:opacity .8s var(--ease-out)}
.gens-nodes li.on{opacity:1}
.gens-nodes .node{display:block;width:18px;height:18px;margin:51px 0 var(--s-l);border-radius:50%;background:var(--cream-50);border:1.5px solid var(--ink-300);transition:background-color .6s,border-color .6s,transform .8s var(--ease-out)}
.gens-nodes li.on .node{background:var(--ink-900);border-color:var(--ink-900)}
.gens-nodes li.you .node{width:26px;height:26px;margin-top:47px;margin-bottom:calc(var(--s-l) - 8px)}
.gens-nodes li.you.on .node{background:var(--hl);border-color:var(--hl);box-shadow:0 0 0 8px rgba(188,160,112,.18);transform:scale(1.1)}
.gens-nodes b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1;color:var(--ink-900)}
.gens-nodes li.you b{color:var(--hl)}
.gens-nodes span:not(.node){font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500)}
.gens-end{margin-top:var(--s-3xl);text-align:center;font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.2;color:var(--ink-700);opacity:0;transform:translateY(12px);transition:opacity 1s ease,transform 1.2s var(--ease-out)}
.gens-end.on{opacity:1;transform:none}
.gens-end b{font-weight:400;color:var(--ink-900)}

.split-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s-2xl);align-items:start}
.split-label{font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500);margin-bottom:var(--s-l)}
.split-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-m)}
.split-col li{font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.15;opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform 1s var(--ease-out),color .6s}
.split-col li.on{opacity:1;transform:none}
.given li{color:var(--ink-400)}
.found li{color:var(--ink-900);display:flex;align-items:baseline;gap:var(--s-s)}
.found li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--hl);transform:translateY(-.15em)}
.split-mid{position:relative;width:1px;align-self:stretch}
.split-mid span{position:absolute;left:0;top:0;width:1px;height:calc(var(--p,1) * 100%);background:var(--hl)}
.split-grid{--p:1}
.split-end{margin-top:var(--s-3xl);font-size:clamp(1.1rem,1.4vw,1.3rem);color:var(--ink-700);max-width:52ch}
.split-end b{color:var(--ink-900);font-weight:600}
@media(max-width:760px){.split-grid{grid-template-columns:1fr;gap:var(--s-xl)}.split-mid{display:none}}

.steps-path{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--s-xl),4vw,var(--s-4xl))}
.steps-path::before{content:"";position:absolute;left:0;top:26px;height:1px;width:calc(var(--p,1) * 100%);background:var(--hl);transition:width .2s linear}
.steps-path::after{content:"";position:absolute;left:0;right:0;top:26px;height:1px;background:var(--rule);z-index:-1}
.steps-path li{position:relative;opacity:.3;transform:translateY(14px);transition:opacity .9s ease,transform 1s var(--ease-out)}
.steps-path li.on{opacity:1;transform:none}
.step-no{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--band,var(--cream-50));border:1px solid var(--ink-300);font-family:var(--font-display);font-size:1.3rem;color:var(--ink-700);transition:border-color .6s,color .6s}
.steps-path li.on .step-no{border-color:var(--hl);color:var(--hl)}
.steps-path h3{margin-top:var(--s-l);font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.05;color:var(--ink-900)}
.steps-path .q{margin-top:var(--s-xs);font-family:var(--font-display);font-style:italic;font-size:1.15rem;color:var(--ink-600)}
.steps-path p:not(.q){margin-top:var(--s-m);font-size:1.02rem;line-height:1.65;color:var(--ink-700)}
@media(max-width:820px){.steps-path{grid-template-columns:1fr}.steps-path::before,.steps-path::after{display:none}}

/* Without JS or with reduced motion: everything complete. */
html:not(.js) [data-progress] [data-at],html:not(.motion) [data-progress] [data-at]{opacity:1;transform:none}
html:not(.motion) [data-progress]{--p:1}
@media(max-width:600px){.gens-nodes li:not(.you) span:not(.node){display:none}.gens-nodes li.you span:not(.node){font-size:.66rem;letter-spacing:.08em}}