:root{
  --ink:#0a0b0e; --ink-2:#101218; --ink-3:#06070a; --cream:#f4f0e6; --muted:#9a958a;
  --gold:#caa14e; --gold-soft:#e4cb93; --line:rgba(202,161,78,.26);
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink); color:var(--cream); font-family:'Inter',sans-serif; font-weight:300;
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif; font-weight:500; line-height:1.04}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
.eyebrow{font-weight:500; letter-spacing:.4em; text-transform:uppercase; font-size:.7rem;
  color:var(--gold); margin-bottom:26px}
.lead{font-size:1.32rem; color:#e7e1d2; font-weight:300; max-width:60ch; letter-spacing:.005em}
.dim{color:var(--muted); font-size:1.02rem}

/* film grain + reveal */
.grain{position:fixed; inset:0; z-index:75; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px}
.reveal{opacity:0; transform:translateY(34px); transition:opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important; transform:none !important; transition:none}
  .scrollcue span{animation:none}
  .portrait img{transform:none !important}
}

/* HERO */
.hero{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(70% 60% at 12% 18%, rgba(202,161,78,.14), transparent 60%)}
.hero-inner{position:relative; z-index:3}
.hero h1{font-size:clamp(3.8rem,10.5vw,9.5rem); line-height:.9; letter-spacing:-.022em}
.hero .tag{font-size:clamp(1.35rem,3.2vw,2.4rem); color:var(--gold-soft); font-style:italic;
  margin-top:24px; font-family:'Cormorant Garamond',serif}
.hero .sub{margin-top:22px; color:var(--muted); letter-spacing:.16em; text-transform:uppercase; font-size:.78rem}
.side-label{position:absolute; right:30px; top:50%; transform:rotate(90deg) translateX(50%);
  transform-origin:right center; z-index:4; color:var(--muted); font-size:.66rem; letter-spacing:.34em;
  text-transform:uppercase}
.scrollcue{position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:4;
  color:var(--muted); font-size:.66rem; letter-spacing:.34em; text-transform:uppercase}
.scrollcue span{display:block; width:1px; height:50px; margin:14px auto 0;
  background:linear-gradient(var(--gold),transparent); animation:drop 2.4s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:820px){
  .side-label{display:none}
}

/* ACTS */
.act{position:relative; padding:170px 0; overflow:hidden}
.ghost{position:absolute; top:-.16em; right:-.04em; z-index:0; pointer-events:none; user-select:none;
  font-family:'Cormorant Garamond',serif; font-weight:600; line-height:.7;
  font-size:min(52vw,720px); color:rgba(202,161,78,.045)}
.act .wrap{position:relative; z-index:2}
.act-head{display:flex; align-items:baseline; gap:20px; margin-bottom:18px}
.act-num{font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:var(--gold);
  letter-spacing:.24em; text-transform:uppercase}
.act h2{font-size:clamp(2.8rem,6.5vw,5rem); letter-spacing:-.01em}
.act-rise{background:
  radial-gradient(60% 50% at 85% 12%, rgba(202,161,78,.10), transparent 60%),
  linear-gradient(180deg, var(--ink), #15130d 55%, var(--ink))}
.act-fall{background:
  radial-gradient(55% 45% at 12% 18%, rgba(60,66,80,.18), transparent 60%),
  linear-gradient(180deg, var(--ink), var(--ink-3) 50%, #090a0d)}
.act-fall .ghost{color:rgba(150,160,180,.05)}
.act-fall .lead, .act-fall h2{filter:grayscale(.25)}
.act-rebuild{background:
  radial-gradient(75% 60% at 50% -5%, rgba(228,203,147,.16), transparent 62%),
  linear-gradient(180deg, #0b0c10, var(--ink))}

.split{display:grid; grid-template-columns:1.06fr .94fr; gap:72px; align-items:center; margin-top:54px}
.split.rev{grid-template-columns:.94fr 1.06fr}
.split.rev .col-img{order:-1}
@media(max-width:860px){.split,.split.rev{grid-template-columns:1fr; gap:40px}.split.rev .col-img{order:0}}

/* portrait */
.portrait{position:relative; aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(160deg,#1a1c22,#0c0d10);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.portrait::after{content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 120px 10px rgba(0,0,0,.45)}
.portrait img{width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.04);
  transform:scale(1.08); transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.reveal.in .portrait img, .col-img.in .portrait img{transform:scale(1)}
.portrait.bw img{filter:grayscale(1) contrast(1.06) brightness(.9)}
.portrait .ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; color:var(--muted); text-align:center; gap:8px; padding:24px}
.portrait .ph .k{font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--gold-soft)}
.portrait .ph .f{font-size:.7rem; letter-spacing:.12em}
.cap{margin-top:16px; font-size:.74rem; letter-spacing:.22em; color:var(--muted); text-transform:uppercase}

/* pull quote */
.pquote{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(2rem,4.8vw,3.4rem);
  color:var(--cream); max-width:22ch; line-height:1.16; margin:60px 0 0}
.pquote .by{display:block; font-size:.76rem; font-style:normal; letter-spacing:.28em; color:var(--muted);
  margin-top:22px; text-transform:uppercase; font-family:'Inter'}

/* TIMELINE */
.timeline{position:relative; padding:150px 0; background:var(--ink-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.tl{position:relative; margin-top:70px; padding-left:34px; max-width:760px}
.tl::before{content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(var(--gold), rgba(202,161,78,.12))}
.tl-item{position:relative; padding:0 0 48px 40px}
.tl-item::before{content:""; position:absolute; left:-2px; top:7px; width:18px; height:18px; border-radius:50%;
  background:var(--ink); border:2px solid var(--gold); box-shadow:0 0 0 5px rgba(202,161,78,.08)}
.tl-item.mute::before{border-color:var(--muted); box-shadow:none}
.tl-year{font-family:'Cormorant Garamond',serif; font-size:1.7rem; color:var(--gold); line-height:1}
.tl-item.mute .tl-year{color:var(--muted)}
.tl-t{font-weight:500; margin-top:4px; font-size:1.05rem}
.tl-d{color:var(--muted); font-size:.96rem; margin-top:5px; max-width:58ch}

/* FAQ */
.faq{padding:140px 0; background:var(--ink)}
.faq .q{margin-top:0; border-top:1px solid var(--line); padding:30px 0}
.faq .q h3{font-size:1.75rem; color:var(--cream)}
.faq .q p{color:var(--muted); margin-top:12px; max-width:74ch}


/* progress + language toggle */
#progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:90;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft))}
.langtoggle{position:fixed; top:20px; right:26px; z-index:90; display:flex; gap:14px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase}
.langtoggle a{color:var(--muted); text-decoration:none; transition:color .3s}
.langtoggle a.on{color:var(--gold)}
.langtoggle a:hover{color:var(--gold-soft)}

/* ============ BESPOKE v3 ============ */

/* graphic hero (no photo) */
.hero{background:radial-gradient(80% 70% at 50% 30%, rgba(202,161,78,.07), transparent 60%)}
.grid-bg{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(202,161,78,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(202,161,78,.045) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(72% 72% at 50% 42%,#000,transparent 82%);
          mask-image:radial-gradient(72% 72% at 50% 42%,#000,transparent 82%)}

/* signature life-arc */
.arc-section{position:relative; overflow:hidden; padding:150px 0 160px;
  background:linear-gradient(180deg,var(--ink),#0c0e13 50%,var(--ink))}
.lifearc{width:100%; height:auto; display:block; margin-top:56px; overflow:visible}
.lifearc .axis{stroke:rgba(202,161,78,.14); stroke-width:1}
.lifearc .grid{stroke:rgba(255,255,255,.03); stroke-width:1}
.lifearc .curve{fill:none; stroke:url(#ag); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
  filter:url(#aglow); stroke-dasharray:3000; stroke-dashoffset:3000; transition:stroke-dashoffset 2.8s cubic-bezier(.4,.1,.2,1)}
.lifearc.in .curve{stroke-dashoffset:0}
.lifearc .node{fill:var(--ink); stroke:var(--gold); stroke-width:2.5; opacity:0; transition:opacity .5s 1.6s}
.lifearc.in .node{opacity:1}
.lifearc .yr{fill:var(--gold); font-family:'Cormorant Garamond',serif; font-size:26px}
.lifearc .cap{fill:var(--muted); font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase}
.lifearc .node-g{opacity:0; transition:opacity .6s}
.lifearc.in .node-g{opacity:1}
.lifearc.in .node-g:nth-child(1){transition-delay:1.3s}
.lifearc.in .node-g:nth-child(2){transition-delay:1.7s}
.lifearc.in .node-g:nth-child(3){transition-delay:2.1s}
.lifearc.in .node-g:nth-child(4){transition-delay:2.4s}
.lifearc.in .node-g:nth-child(5){transition-delay:2.7s}

/* bespoke diagrams (single-line + platform) */
.diagram{width:100%; height:auto; display:block; margin-top:18px; overflow:visible}
.diagram .ln{stroke:rgba(202,161,78,.45); stroke-width:1.5; fill:none}
.diagram .bus{stroke:var(--gold); stroke-width:2.5}
.diagram .nd{fill:var(--ink); stroke:var(--gold); stroke-width:2}
.diagram .hub{fill:rgba(202,161,78,.07); stroke:var(--gold); stroke-width:2}
.diagram .t{fill:var(--cream); font-family:'Cormorant Garamond',serif; font-size:19px}
.diagram .s{fill:var(--muted); font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.diagram .flow{stroke:var(--gold-soft); stroke-width:2; stroke-dasharray:4 10; stroke-linecap:round; opacity:.7;
  animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
.diag-card{border:1px solid var(--line); padding:30px 32px 12px; margin-top:54px;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent)}
.diag-card .dl{font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:6px}
/* widen the schematic + enlarge its labels on phones so they stay readable */
@media(max-width:560px){
  .diag-card{padding:24px 12px 8px}
  .diagram .t{font-size:27px}
  .diagram .s{font-size:16px}
}

/* power-bar stats */
.barstat{margin-top:80px; display:grid; gap:26px}
.barstat .row{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:24px;
  padding-bottom:22px; border-bottom:1px solid var(--line)}
.barstat .row .lab{color:var(--cream); font-size:1.02rem}
.barstat .row .val{font-family:'Cormorant Garamond',serif; color:var(--gold); font-size:2.4rem; line-height:1; white-space:nowrap}
.barstat .track{grid-column:1/-1; height:2px; background:rgba(202,161,78,.14); margin-top:16px; overflow:hidden}
.barstat .track i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transition:width 1.6s cubic-bezier(.3,.1,.2,1)}
.barstat.in .track i{width:var(--w,70%)}
@media(max-width:560px){.barstat .row .val{font-size:1.8rem}}

/* generated hero artwork backdrop */
.hero-art{position:absolute; inset:0; z-index:0}
.hero-art img{width:100%; height:100%; object-fit:cover; object-position:72% center}
.hero-art::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink) 16%, rgba(10,11,14,.5) 52%, rgba(10,11,14,.05) 100%),
             linear-gradient(0deg, var(--ink) 2%, transparent 26%, transparent 80%, rgba(10,11,14,.55) 100%)}
@media(max-width:820px){.hero-art img{object-position:62% center}
  .hero-art::after{background:linear-gradient(180deg, rgba(10,11,14,.5), rgba(10,11,14,.9))}}

/* hero entrance: gold rule draws under the name */
.hero-inner::after{content:""; display:block; height:1px; width:0; margin-top:38px;
  background:linear-gradient(90deg, var(--gold), transparent);
  animation:heroRule 1.5s 1.3s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes heroRule{to{width:clamp(180px,26vw,320px)}}
/* cold generated artwork behind the fall act */
.fall-art{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5}
.fall-art img{width:100%; height:100%; object-fit:cover; object-position:center;
  filter:grayscale(.6) brightness(.7) contrast(1.05)}
.fall-art::after{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 45%, transparent, var(--ink) 88%),
             linear-gradient(0deg, var(--ink), transparent 22%, transparent 80%, var(--ink))}
@media (prefers-reduced-motion: reduce){
  .hero-inner::after{width:clamp(180px,26vw,320px); animation:none}
  .diagram .flow{animation:none}
}

/* warm generated artwork behind the rebuild act (bookends the cold fall) */
.rebuild-art{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.42}
.rebuild-art img{width:100%; height:100%; object-fit:cover; object-position:center bottom;
  filter:contrast(1.04) brightness(.9)}
.rebuild-art::after{content:""; position:absolute; inset:0;
  background:radial-gradient(65% 60% at 50% 35%, transparent, var(--ink) 88%),
            linear-gradient(0deg, var(--ink), transparent 26%, transparent 84%, var(--ink))}

/* ===== elevated footer ===== */
footer{padding:140px 0 64px; position:relative; overflow:hidden;
  background:radial-gradient(70% 120% at 50% 130%, rgba(202,161,78,.12), transparent 62%), var(--ink-3);
  border-top:1px solid var(--line); text-align:left}
.foot-cta{max-width:780px}
.foot-cta .eyebrow{margin-bottom:18px}
.foot-line{font-size:clamp(2.3rem,6vw,4.4rem); line-height:1.02; letter-spacing:-.01em}
.foot-base{display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  margin-top:96px; padding-top:30px; border-top:1px solid var(--line); flex-wrap:wrap}
.foot-name{font-family:'Cormorant Garamond',serif; font-size:1.55rem}
.foot-fine{font-size:.7rem; letter-spacing:.18em; color:#5b574d; text-transform:uppercase}

/* ===== elevated FAQ ===== */
.faq .q{display:grid; grid-template-columns:auto 1fr; gap:38px; padding:38px 0; margin-top:0;
  border-top:1px solid var(--line); align-items:start; transition:border-color .4s}
.faq .q:last-child{border-bottom:1px solid var(--line)}
.faq .q:hover{border-top-color:var(--gold)}
.faq .q .num{font-family:'Cormorant Garamond',serif; font-size:1.6rem; color:var(--gold);
  line-height:1; padding-top:8px; min-width:2.2ch}
.faq .q h3{font-size:1.75rem; color:var(--cream); line-height:1.1}
.faq .q .qa p{color:var(--muted); margin-top:12px; max-width:72ch}
@media(max-width:600px){.faq .q{grid-template-columns:1fr; gap:8px}.faq .q .num{font-size:1.25rem;padding-top:0}}

/* get-in-touch button */
.foot-btn{display:inline-block; margin-top:32px; padding:17px 38px; border:1px solid var(--gold);
  color:var(--gold-soft); text-decoration:none; font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
  border-radius:2px; transition:background .35s, color .35s}
.foot-btn:hover{background:var(--gold); color:var(--ink)}

/* ===== intro curtain ===== */
#intro{position:fixed; inset:0; z-index:200; background:var(--ink-3); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; animation:introOut 1.3s 1.05s forwards}
#intro .mg{font-family:'Cormorant Garamond',serif; font-size:3.6rem; color:var(--gold-soft);
  letter-spacing:.14em; opacity:0; animation:introIn .9s .15s forwards}
#intro .ln{display:block; height:1px; width:0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:introLine 1s .35s forwards}
@keyframes introIn{to{opacity:1}}
@keyframes introLine{to{width:150px}}
@keyframes introOut{to{opacity:0; visibility:hidden}}
@media (prefers-reduced-motion: reduce){#intro{display:none !important}}

/* ===== timeline, elevated (editorial) ===== */
.tl{max-width:920px; margin-top:64px; padding-left:0}
.tl::before{display:none}
.tl-item{display:grid; grid-template-columns:150px 1fr; column-gap:48px; padding:30px 0;
  border-top:1px solid var(--line); align-items:baseline; transition:border-color .4s}
.tl-item:last-child{border-bottom:1px solid var(--line)}
.tl-item:hover{border-top-color:var(--gold)}
.tl-item::before{display:none}
.tl-year{grid-column:1; grid-row:1 / span 2; font-size:2.3rem; line-height:1}
.tl-t{grid-column:2; grid-row:1; font-size:1.15rem; margin-top:0}
.tl-d{grid-column:2; grid-row:2; margin-top:6px}
@media(max-width:640px){.tl-item{grid-template-columns:1fr; column-gap:0; row-gap:6px}
  .tl-year{grid-row:auto; grid-column:1; font-size:1.9rem}.tl-t,.tl-d{grid-column:1; grid-row:auto}}

/* ===== life-curve: projection + we-are-here + goal ===== */
.lifearc .proj{fill:none; stroke:url(#ag); stroke-width:2.2; stroke-dasharray:1 11; stroke-linecap:round;
  opacity:0; filter:url(#aglow); transition:opacity .9s 2.2s}
.lifearc.in .proj{opacity:.6}
.lifearc .node.goal{stroke:var(--gold-soft); opacity:.5}
.lifearc .goalyr{fill:var(--gold-soft)}
.lifearc .here{opacity:0; transition:opacity .6s 2.3s}
.lifearc.in .here{opacity:1}
.lifearc .heredot{fill:#e4cb93; filter:url(#aglow)}
.lifearc .herepulse{fill:none; stroke:var(--gold); animation:herePulse 2.4s ease-out infinite}
.lifearc .hereyr{fill:var(--cream); font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.2em; font-weight:500}
@keyframes herePulse{0%{r:7;opacity:.85}100%{r:25;opacity:0}}
/* hero parallax headroom */
.hero-art{inset:-8% 0}
@media(max-width:820px){.hero-art{inset:-8% 0}}
@media (prefers-reduced-motion: reduce){.lifearc .herepulse{animation:none}.lifearc .proj{opacity:.6}.lifearc .here{opacity:1}}

/* ===== LIVING HERO (animated electricity) ===== */
.hero-art{opacity:.34}
.hero-fx{position:absolute; inset:-6% 0; z-index:1; pointer-events:none; will-change:transform;
  animation:fxSway 20s ease-in-out infinite alternate}
/* when JS drives the living hero, it removes the keyframe sway (see .hero-fx.live) */
.hero-fx.live{animation:none}
.hero-fx svg{width:100%; height:100%; display:block}
.hero-fx .fil{fill:none; stroke:url(#hgrad); stroke-width:1.7; stroke-linecap:round;
  filter:url(#hglow2); stroke-dasharray:50 400; opacity:.9;
  animation:fxFlow var(--dur,9s) linear infinite}
.hero-fx .spark{fill:#f0d9a0; filter:url(#hglow2); animation:fxTwinkle var(--td,5s) ease-in-out infinite}
@keyframes fxFlow{to{stroke-dashoffset:-450}}
@keyframes fxTwinkle{0%,100%{opacity:.12}50%{opacity:.95}}
@keyframes fxSway{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2.5%,-1.6%,0) scale(1.05)}}
@media (prefers-reduced-motion: reduce){.hero-fx{animation:none}.hero-fx .fil{animation:none;stroke-dasharray:none;opacity:.5}.hero-fx .spark{animation:none;opacity:.5}}

/* ===== STATS as bold number grid ===== */
.numbers{margin-top:80px}
.numbers .dl{font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:22px}
.numgrid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
.numcell{background:var(--ink); padding:48px 40px; display:flex; flex-direction:column; gap:16px;
  position:relative; transition:background .4s}
.numcell::before{content:""; position:absolute; left:0; top:-1px; width:0; height:2px;
  background:linear-gradient(90deg,var(--gold),transparent); transition:width 1.1s cubic-bezier(.3,.1,.2,1)}
.numbers.in .numcell::before{width:64px}
.numcell:hover{background:#13141a}
.numcell .val{font-family:'Cormorant Garamond',serif; font-size:clamp(2.9rem,5.5vw,4.6rem);
  color:var(--gold); line-height:.95; letter-spacing:-.01em}
.numcell .numlab{color:var(--muted); font-size:.94rem; max-width:34ch; line-height:1.5}
@media(max-width:680px){.numgrid{grid-template-columns:1fr}.numcell{padding:38px 30px}}

/* ===== TIMELINE: three acts on a spine ===== */
.tl{position:relative; padding-left:36px; max-width:900px; margin-top:64px}
.tl::before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--gold) 0%, rgba(150,160,180,.35) 42%, rgba(150,160,180,.25) 60%, var(--gold) 78%, var(--gold-soft) 100%)}
.tl-ph{display:flex; align-items:baseline; gap:16px; margin:44px 0 10px}
.tl-ph:first-child{margin-top:0}
.tl-act{font-family:'Cormorant Garamond',serif; font-size:1.25rem; color:var(--gold);
  letter-spacing:.18em; text-transform:uppercase}
.tl-ph.fall .tl-act{color:#aab2c2}
.tl-era{color:var(--muted); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase}
.tl-item{position:relative; display:grid; grid-template-columns:140px 1fr; column-gap:40px;
  padding:26px 0; border-top:1px solid var(--line); align-items:baseline; transition:border-color .4s}
.tl-item:hover{border-top-color:var(--gold)}
.tl-item::before{content:""; position:absolute; left:-30px; top:34px; width:11px; height:11px; border-radius:50%;
  background:var(--ink); border:2px solid var(--gold)}
.tl-item.mute::before{border-color:#8a93a4}
.tl-year{grid-column:1; grid-row:1 / span 2; font-size:2.1rem; line-height:1}
.tl-item.mute .tl-year{color:#aab2c2}
.tl-t{grid-column:2; grid-row:1; font-size:1.12rem; margin-top:0}
.tl-d{grid-column:2; grid-row:2; margin-top:6px}
@media(max-width:640px){.tl-item{grid-template-columns:1fr; column-gap:0; row-gap:6px}
  .tl-year{grid-row:auto; grid-column:1; font-size:1.8rem}.tl-t,.tl-d{grid-column:1; grid-row:auto}}

/* ============ HARDCORE: one move per section ============ */
/* intro: wipe up */
@keyframes introOut{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-105%);opacity:.3;visibility:hidden}}
/* hero name: living metallic sheen */
.hero h1{background:linear-gradient(92deg,#f4f0e6 28%,#ecd9a3 50%,#f4f0e6 72%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:nameSheen 8s ease-in-out infinite}
@keyframes nameSheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}
/* act leads: editorial drop cap */
.act .lead::first-letter{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:3.7em;line-height:.72;
  float:left;color:var(--gold);padding:8px 14px 0 0;margin-top:2px}
/* Act II portrait returns to colour on hover */
.portrait.bw img{transition:filter 1.1s ease}
.portrait.bw:hover img{filter:grayscale(0) contrast(1.04) brightness(1)}
/* Act III portrait: warm breathing halo */
.act-rebuild .portrait{animation:warmBreath 6s ease-in-out infinite}
@keyframes warmBreath{0%,100%{box-shadow:0 40px 90px -50px rgba(0,0,0,.9),0 0 50px -10px rgba(202,161,78,0)}
  50%{box-shadow:0 40px 90px -50px rgba(0,0,0,.9),0 0 64px -2px rgba(202,161,78,.34)}}
/* life-curve: area fill under the line */
.lifearc .area{fill:url(#areaGrad);opacity:0;transition:opacity 1.2s 1.5s}
.lifearc.in .area{opacity:1}
/* timeline: spine draws in on scroll */
.tl::before{transform:scaleY(0);transform-origin:top;transition:transform 1.9s cubic-bezier(.4,.1,.2,1)}
.tl.spine-in::before{transform:scaleY(1)}
/* footer button: breathing glow + arrow */
.foot-btn{position:relative;animation:btnBreath 4.5s ease-in-out infinite}
.foot-btn::after{content:" \2192";display:inline-block;transition:transform .3s}
.foot-btn:hover::after{transform:translateX(7px)}
@keyframes btnBreath{0%,100%{box-shadow:0 0 0 0 rgba(202,161,78,0)}50%{box-shadow:0 0 24px -6px rgba(202,161,78,.4)}}
/* FAQ accordion */
.faq .q{cursor:pointer; grid-template-columns:auto 1fr}
.faq .q .num{grid-row:1 / span 2}
.qhead{grid-column:2; grid-row:1; display:flex; justify-content:space-between; align-items:baseline; gap:24px}
.qhead h3{font-size:1.7rem; color:var(--cream); line-height:1.1; margin:0}
.q .toggle{color:var(--gold); font-size:1.7rem; line-height:1; flex:none; transition:transform .4s}
.q.open .toggle{transform:rotate(45deg)}
.ans{grid-column:2; grid-row:2; display:grid; grid-template-rows:0fr; opacity:0; margin-top:0;
  transition:grid-template-rows .5s ease, opacity .5s ease, margin-top .5s ease}
.q.open .ans{grid-template-rows:1fr; opacity:1; margin-top:14px}
.ans>div{overflow:hidden}
.ans p{color:var(--muted); max-width:72ch}
@media (prefers-reduced-motion: reduce){.hero h1{animation:none}.act-rebuild .portrait{animation:none}
  .foot-btn{animation:none}.tl::before{transform:none}.lifearc .area{opacity:1}}

/* ===== hero credential line ===== */
.hero-claim{margin-top:24px; max-width:42ch; color:#c2bcad; font-size:1.04rem; line-height:1.6;
  border-left:2px solid var(--line); padding-left:18px}
@media(max-width:820px){.hero-claim{font-size:.98rem}}

/* ===== credibility band (institutions) ===== */
.creds{padding:62px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(202,161,78,.022),transparent)}
.creds .lab{display:block; text-align:center; margin-bottom:26px}
.creds-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 18px;
  font-family:'Cormorant Garamond',serif; font-size:clamp(1.05rem,2.3vw,1.4rem); color:#d2ccbd; letter-spacing:.005em}
.creds-row .nm{transition:color .35s}
.creds-row .nm:hover{color:var(--gold-soft)}
/* diamond separators as ::after so they never orphan to a line start when wrapping */
.creds-row .nm:not(:last-child)::after{content:"◆"; color:var(--gold); opacity:.5; font-size:.6em;
  vertical-align:middle; margin-left:18px}
@media(max-width:600px){.creds{padding:46px 0}
  .creds-row{flex-direction:column; gap:14px; font-size:1.22rem}
  .creds-row .nm:not(:last-child)::after{display:none}}

/* ===== mission statement band ===== */
.statement{position:relative; overflow:hidden; padding:140px 0; text-align:center;
  background:radial-gradient(62% 85% at 50% 50%, rgba(202,161,78,.07), transparent 66%), var(--ink-3)}
.statement::before,.statement::after{content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:clamp(160px,26vw,320px); height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.statement::before{top:64px}.statement::after{bottom:64px}
.statement .eyebrow{margin-bottom:30px}
.statement h2{font-size:clamp(2.1rem,5.4vw,4.1rem); line-height:1.12; max-width:19ch; margin:0 auto; letter-spacing:-.01em}
.statement .accent{color:var(--gold-soft); font-style:italic}
.statement .sig{margin-top:36px; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted)}
@media(max-width:600px){.statement{padding:96px 0}.statement::before{top:44px}.statement::after{bottom:44px}}

/* ===== NEWSROOM (news.html / aktualnosci.html) ===== */
.np-nav{position:fixed; top:18px; left:26px; z-index:90; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase}
.np-nav a{color:var(--muted); text-decoration:none; transition:color .3s}
.np-nav a:hover{color:var(--gold-soft)}
.np-nav a::before{content:"\2190"; margin-right:9px; color:var(--gold)}
.masthead{position:relative; padding:210px 0 96px; overflow:hidden;
  background:radial-gradient(72% 80% at 50% 0%, rgba(202,161,78,.11), transparent 62%),
             linear-gradient(180deg, var(--ink-3), var(--ink))}
.masthead .grid-bg{opacity:.55}
.masthead .wrap{position:relative; z-index:2}
.masthead h1{font-size:clamp(3rem,8.4vw,6.6rem); letter-spacing:-.022em; margin-top:8px; line-height:.96}
.masthead .sub{margin-top:28px; color:var(--muted); max-width:54ch; font-size:1.06rem; line-height:1.6}
.masthead .rule{height:1px; width:0; margin-top:42px;
  background:linear-gradient(90deg, var(--gold), transparent);
  animation:heroRule 1.5s .5s cubic-bezier(.2,.7,.2,1) forwards}
.news-list{padding:30px 0 130px; background:var(--ink)}
.post{border-top:1px solid var(--line); padding:70px 0; display:grid;
  grid-template-columns:210px 1fr; gap:56px; transition:border-color .4s}
.post:hover{border-top-color:var(--gold)}
.post:last-child{border-bottom:1px solid var(--line)}
.post .meta{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.post .meta .date{display:block; font-family:'Cormorant Garamond',serif; font-size:2.1rem;
  letter-spacing:0; color:var(--gold); text-transform:none; margin-bottom:12px; line-height:1}
.post h2{font-size:clamp(1.9rem,3.7vw,3rem); letter-spacing:-.01em; line-height:1.07; color:var(--cream)}
.post .body{margin-top:6px}
.post .body p{color:#d6d0c2; font-size:1.08rem; margin-top:20px; max-width:68ch; line-height:1.72}
.post .body p.lead-p{font-size:1.34rem; color:#ece6d8; margin-top:24px}
.post .body p.lead-p::first-letter{font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:3.4em; line-height:.72; float:left; color:var(--gold); padding:8px 14px 0 0; margin-top:2px}
.post .keyline{margin-top:34px; padding:24px 30px; border-left:2px solid var(--gold);
  background:linear-gradient(90deg, rgba(202,161,78,.06), transparent);
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(1.4rem,2.6vw,1.9rem);
  color:var(--cream); line-height:1.2}
.post .pillars{margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line)}
.post .pillars div{background:var(--ink); padding:26px 28px}
.post .pillars .pk{font-family:'Cormorant Garamond',serif; font-size:1.35rem; color:var(--gold-soft)}
.post .pillars .pd{color:var(--muted); font-size:.95rem; margin-top:6px; line-height:1.5}
.post .tags{margin-top:34px; display:flex; flex-wrap:wrap; gap:10px}
.post .tags span{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); padding:8px 15px; border-radius:2px}
@media(max-width:760px){
  .post{grid-template-columns:1fr; gap:20px; padding:54px 0}
  .post .meta .date{margin-bottom:6px}
  .masthead{padding:150px 0 74px}
  .post .pillars{grid-template-columns:1fr}
}

/* newsroom link on the main pages (top-left nav + footer) */
.topnews{position:fixed; top:18px; left:26px; z-index:90; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase}
.topnews a{color:var(--muted); text-decoration:none; transition:color .3s}
.topnews a:hover{color:var(--gold-soft)}
.topnews a::after{content:" \2192"; color:var(--gold); margin-left:8px; display:inline-block; transition:transform .3s}
.topnews a:hover::after{transform:translateX(4px)}
.foot-news{color:var(--gold-soft); text-decoration:none; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; transition:color .3s}
.foot-news:hover{color:var(--gold)}
.foot-news::after{content:" \2192"; display:inline-block; transition:transform .3s}
.foot-news:hover::after{transform:translateX(5px)}
@media(max-width:600px){.topnews{font-size:.62rem; top:20px; left:18px}}

/* ===== interaction polish: focus rings, scroll cue, faq affordance ===== */
a:focus-visible, .foot-btn:focus-visible, .scrollcue:focus-visible, .faq .q:focus-visible, .langtoggle a:focus-visible{
  outline:2px solid var(--gold); outline-offset:5px; border-radius:2px}
.faq .q:focus-visible{outline-offset:10px}
a.scrollcue{cursor:pointer; text-decoration:none; transition:color .35s}
a.scrollcue:hover, a.scrollcue:focus-visible{color:var(--gold-soft)}
.faq .q{cursor:pointer}
.faq .q:hover .toggle{color:var(--gold-soft)}