/* Shtil Group: the loan program pages (loans/*.html, built by tools/site/build_programs.py). Loaded after site.css.
   One design for all twelve. The program's own photo (made in ChatGPT) moves in 3D as you scroll, under its name; two
   short beats follow; then the picture settles into a framed card on the page. Below it: the program sheet (an architect's title
   block), four things to know (each on a dimension line, like the home page's numbers), working with Vadim (the steps
   as lettered grid lines, the way columns are labelled on a plan), and the other programs in the home page's photo
   frame. The glass is the approved revision 2026-10-20.1, unchanged; opacity is never put on glass or its parents. */

/* ---------- the scene: a sticky stage, as tall as the scroll it takes ---------- */
.scene{position:relative;height:calc((var(--len) + var(--out) + 1) * 100vh);background:#fff}
.sstage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#fff}
.smedia{position:absolute;inset:0;overflow:hidden;background:#0c2617;will-change:transform,clip-path}
.szoom{position:absolute;inset:0;will-change:transform}
.szoom picture{position:absolute;inset:0}
.szoom img,.smedia canvas{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
/* the photo in 3D: drawn over the plain photo, fading in once its first moment is ready (it sits outside .szoom:
   it does its own zoom) */
.smedia canvas{opacity:0;transition:opacity .7s ease}
.smedia canvas.on{opacity:1}
/* the text sits bottom left: the picture darkens toward that corner, and toward the foot for the slate */
.sscrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,24,13,.72) 0%,rgba(4,24,13,.42) 30%,rgba(4,24,13,.1) 50%,rgba(4,24,13,0) 62%),linear-gradient(0deg,rgba(4,24,13,.78) 0%,rgba(4,24,13,.3) 34%,rgba(4,24,13,0) 56%)}

/* the name: the program in the hero's style ("Expect better."), two lines, sized so the longest line fits */
.stitle{position:absolute;left:clamp(20px,5vw,72px);bottom:clamp(36px,8vh,88px);width:min(900px,calc(100% - 40px));color:#fff;will-change:transform}
.stitle>:not(.cta),.stitle .lg::before,.stitle .lg>*{opacity:var(--a,1)}
.stitle .eyebrow{color:rgba(255,255,255,.88)}
.stitle .eyebrow a{color:inherit;text-decoration:none}
.stitle .eyebrow a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.stitle h1{margin:20px 0 0;font:500 clamp(46px,min(9vw,13.5vh,calc(56vw / (var(--w) * .64))),136px)/.9 var(--display);letter-spacing:-.045em;text-shadow:0 2px 34px rgba(0,22,10,.32)}
.stitle h1 em{font-style:normal}
.stitle .lede{margin:22px 0 0;max-width:42ch;font:400 clamp(17px,1.35vw,20px)/1.5 var(--sans);color:rgba(255,255,255,.92);text-wrap:pretty}
.stitle .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* the slate: the scene's name, and a dimension line that fills as the scene plays */
.slate{position:absolute;right:clamp(20px,3.4vw,48px);bottom:clamp(36px,8vh,88px);display:grid;justify-items:end;gap:10px;color:#fff;text-align:right;opacity:var(--o,1);pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.slate small{font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.slate b{font:600 16px/1.2 var(--display);letter-spacing:-.005em}
.slate i{position:relative;display:block;width:168px;height:9px;margin-top:4px;border:solid rgba(255,255,255,.55);border-width:0 1px}
.slate i::before,.slate i::after{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:rgba(255,255,255,.3)}
.slate i::after{background:#fff;transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* two beats, the film's way: one big phrase and a line under it, bottom left once the name has gone */
.beats{position:absolute;left:clamp(20px,5vw,72px);bottom:clamp(36px,8vh,88px);width:min(660px,calc(100% - 40px));pointer-events:none}
.beat{position:absolute;left:0;bottom:0;width:100%;opacity:0;color:#fff;will-change:opacity,transform}
.beat b{display:block;font:500 clamp(44px,5.6vw,96px)/.95 var(--display);letter-spacing:-.045em;text-shadow:0 2px 30px rgba(0,30,10,.25)}
.beat p{margin:16px 0 0;max-width:36ch;font:400 clamp(15px,1.25vw,18px)/1.5 var(--sans);color:rgba(255,255,255,.92)}

@media (max-width:900px),(orientation:portrait){
  .stitle{bottom:max(28px,4.5vh)}
  .stitle h1{margin-top:16px;font-size:clamp(40px,min(19vw,calc(86vw / (var(--w) * .64))),120px)}
  .stitle .lede{margin-top:16px;font-size:16px}
  .stitle .cta{margin-top:22px}
  .slate{display:none}
  .beats{bottom:max(40px,6vh)}
  .beat b{font-size:clamp(40px,11vw,64px)}
  .beat p{font-size:15px}
}

/* ---------- 01 the program: the words beside the sheet ---------- */
.pabout{padding:clamp(88px,12vw,160px) 0 clamp(80px,10vw,140px);background:#fff}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px clamp(40px,7vw,120px);align-items:start}
.pabout h2,.know h2,.steps h2,.more h2{margin:16px 0 0;font:500 clamp(36px,4.6vw,64px)/1 var(--display);letter-spacing:-.035em;color:var(--green);max-width:17ch;text-wrap:balance}
.pabout p{margin:24px 0 0;max-width:56ch;color:var(--soft);font-size:18px;text-wrap:pretty}
.pabout p+p{margin-top:16px}
.pabout .btn{margin-top:34px}
.pabout .btn .short{display:none}
/* the sheet: the title block in the corner of an architect's drawing, on paper. Its number is the program's place in
   its list ("02 / 09"); a dimension line under the head, the facts in ruled rows, the broker in the foot */
.sheet{position:relative;margin:0;border-radius:30px;background:var(--paper);box-shadow:inset 0 0 0 1px rgba(9,90,49,.16);padding:26px 28px 20px;transform:translateY(26px);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.sheet.in{transform:none}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.shead span{font:600 10.5px/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.shead b{font:600 46px/.85 var(--display);letter-spacing:-.04em;color:var(--green);font-variant-numeric:tabular-nums}
.shead b small{font-size:.42em;letter-spacing:0;opacity:.6;margin-left:4px}
.sheet .sdim{display:block;height:9px;margin:20px 0 4px;border:solid rgba(9,90,49,.42);border-width:0 1px;transform-origin:50% 50%;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .2s}
.sheet .sdim::before{content:"";display:block;margin-top:4px;height:1px;background:rgba(9,90,49,.42)}
.sheet:not(.in) .sdim{transform:scaleX(0)}
.sheet dl{margin:0}
.sheet dl>div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;padding:15px 0;border-top:1px solid rgba(9,90,49,.12);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.25s + var(--i,0) * 70ms)}
.sheet dl>div:first-child{border-top:0}
.sheet:not(.in) dl>div{opacity:0;transform:translateY(10px)}
.sheet dt{font:600 10px/1.9 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.sheet dd{margin:0;font:600 17px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.sfoot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;margin-top:4px;padding-top:15px;border-top:1px solid rgba(9,90,49,.16);font:500 12.5px/1.4 var(--sans);color:var(--soft)}

/* ---------- 02 what to know: four facts, each standing on a dimension line ---------- */
.know{background:var(--paper);padding:clamp(88px,11vw,150px) 0}
.kgrid{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px clamp(24px,3.2vw,48px)}
.k b{display:block;font:600 clamp(52px,5vw,76px)/1 var(--display);letter-spacing:-.045em;color:var(--green);font-variant-numeric:tabular-nums lining-nums;transition:opacity .8s ease calc(var(--c,0) * .12s),transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--c,0) * .12s)}
.k .sdim{display:block;position:relative;height:16px;margin-top:16px}
.k .sdim::before{content:"";position:absolute;left:6px;right:6px;top:7.5px;height:1px;background:rgba(9,90,49,.48);transform-origin:50% 50%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--c,0) * .12s)}
.k .sdim::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16' fill='none' stroke='%23095A31' stroke-opacity='.62' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M6 1v14M2.2 11.8l7.6-7.6'/%3E%3C/svg%3E") left center/12px 16px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16' fill='none' stroke='%23095A31' stroke-opacity='.62' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M6 1v14M2.2 11.8l7.6-7.6'/%3E%3C/svg%3E") right center/12px 16px no-repeat;transition:opacity .5s ease calc(.8s + var(--c,0) * .12s)}
.k h3{margin:20px 0 0;font:600 19px/1.25 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.k p{margin:10px 0 0;color:var(--soft);font-size:15.5px;line-height:1.55;text-wrap:pretty}
.k h3,.k p{transition:opacity .8s ease calc(.4s + var(--c,0) * .12s),transform .8s cubic-bezier(.2,.7,.2,1) calc(.4s + var(--c,0) * .12s)}
.kgrid:not(.in) .k b,.kgrid:not(.in) .k h3,.kgrid:not(.in) .k p{opacity:0;transform:translateY(12px)}
.kgrid:not(.in) .k .sdim::before{transform:scaleX(0)}
.kgrid:not(.in) .k .sdim::after{opacity:0}

/* ---------- 03 working with Vadim: four steps as lettered grid lines ---------- */
.steps{padding:clamp(88px,11vw,150px) 0;background:#fff}
.gsteps{position:relative;list-style:none;margin:clamp(52px,6vw,84px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(24px,3.2vw,48px)}
.gsteps::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:rgba(9,90,49,.3);transform-origin:0 50%;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.gsteps:not(.in)::before{transform:scaleX(0)}
.gsteps li{position:relative}
.gsteps .bub{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.2px var(--green);font:600 13px/1 var(--sans);letter-spacing:.04em;color:var(--green);transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--i,0) * .18s),box-shadow .5s}
.gsteps li:first-child .bub{background:var(--green);color:#fff}
.gsteps h3{margin:26px 0 0;font:600 20px/1.25 var(--display);letter-spacing:-.01em;color:var(--ink)}
.gsteps p{margin:10px 0 0;max-width:30ch;color:var(--soft);font-size:15.5px;line-height:1.55;text-wrap:pretty}
.gsteps h3,.gsteps p{transition:opacity .8s ease calc(.3s + var(--i,0) * .18s),transform .8s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--i,0) * .18s)}
.gsteps:not(.in) .bub{transform:scale(.4)}
.gsteps:not(.in) h3,.gsteps:not(.in) p{opacity:0;transform:translateY(12px)}

/* ---------- 04 the other programs: the home page's photo frame ---------- */
.more{background:var(--paper);padding:clamp(88px,11vw,150px) 0}
.more .phead2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px clamp(32px,6vw,96px);align-items:end}
.more .phead2 p{margin:0 0 4px;max-width:46ch;color:var(--soft);font-size:18px}
.more .phead2 p a{color:var(--green);text-underline-offset:3px;text-decoration-thickness:1px}
.more .frame{margin-top:clamp(44px,5.5vw,72px)}
.list li a[aria-current="page"]{background:rgba(255,255,255,.1)}
.list li a[aria-current="page"] b::after{content:"You are here";display:inline-block;vertical-align:.32em;margin-left:12px;padding:5px 9px;border-radius:999px;font:600 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#06331b;background:var(--leaf)}
.list li a[aria-current="page"]::after{display:none}

/* the small print, at the foot of the contact section */
.foot .fine{margin:22px 0 0;max-width:110ch;font-size:12px;line-height:1.6;color:rgba(255,255,255,.66)}

@media (max-width:1100px){
  .kgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .sheet{max-width:560px}
  .more .phead2{grid-template-columns:minmax(0,1fr)}
  /* the steps run down the page: the grid line on the left through the letters, the words beside them */
  .gsteps{grid-template-columns:minmax(0,1fr);gap:34px}
  .gsteps::before{left:22px;right:auto;top:8px;bottom:8px;width:1px;height:auto;transform-origin:50% 0}
  .gsteps:not(.in)::before{transform:scaleY(0)}
  .gsteps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:20px}
  .gsteps .bub{grid-row:1/3}
  .gsteps h3{margin-top:10px}
  .gsteps p{max-width:52ch}
}
@media (max-width:560px){
  .pabout .btn .long{display:none}
  .pabout .btn .short{display:inline}
  .kgrid{grid-template-columns:minmax(0,1fr);gap:40px}
  .sheet{padding:22px 20px 18px}
  .sheet dl>div{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .sheet,.sheet *,.kgrid *,.kgrid ::before,.kgrid ::after,.gsteps,.gsteps *,.gsteps::before{transition:none!important}
}

/* ---------- type: B · Architect (in use) and A · Private bank, as on the home page ---------- */
html[data-type="b"] .stitle h1{font-weight:600;font-stretch:118%}
html[data-type="b"] .stitle h1 em{font:italic 300 1em var(--serif);font-stretch:118%;letter-spacing:-.04em}
html[data-type="b"] .beat b{font-weight:600;font-stretch:118%}
html[data-type="b"] .slate b,html[data-type="b"] .sheet dd,html[data-type="b"] .k h3,html[data-type="b"] .gsteps h3{font-stretch:110%}
html[data-type="b"] .pabout h2,html[data-type="b"] .know h2,html[data-type="b"] .steps h2,html[data-type="b"] .more h2{font-weight:600;font-stretch:115%;letter-spacing:-.04em}
html[data-type="b"] .shead b,html[data-type="b"] .k b{font-stretch:125%;letter-spacing:-.05em}
html[data-type="a"] .stitle h1{font-weight:400;letter-spacing:-.03em}
html[data-type="a"] .stitle h1 em{font:italic 300 1em var(--serif);letter-spacing:-.02em}
html[data-type="a"] .beat b{font:italic 300 clamp(50px,6vw,104px)/.92 var(--serif);letter-spacing:-.02em}
html[data-type="a"] .pabout h2,html[data-type="a"] .know h2,html[data-type="a"] .steps h2,html[data-type="a"] .more h2{font-weight:400;letter-spacing:-.025em}
html[data-type="a"] .shead b,html[data-type="a"] .k b{font-weight:300;letter-spacing:-.02em}
html[data-type="a"] .sheet dd,html[data-type="a"] .k h3,html[data-type="a"] .gsteps h3{font-weight:500;letter-spacing:0}