/* Layout: hero rebuilt from the Figma 1440 frame (positions scale with --u = 1/1440 of the frame) → Services: left sticky glass index (4 col) | service groups (8 col). Serif only for display lines; everything else Inter Tight. Single brand theme (light). */
:root{
  --wine:#7a020e;        /* primary */
  --ink:#41050b;         /* headings / names */
  --ink-2:#4d080f;       /* body */
  --blush:#dfb5cb;       /* gradient end */
  --petal:#fbd5e4;       /* light pink */
  --mist:#e9e8e8;        /* grey buttons */
  --mist-line:#d7d2d2;
  --paper:#ffffff;
  --rule:rgba(122,2,14,.14);
  --glass:rgba(255,255,255,.5);
  --glass-line:rgba(255,255,255,.65);
  --serif:"Instrument Serif", "Times New Roman", serif;
  --sans:"Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gap:150px;          /* one vertical rhythm between every section */
  color-scheme:light;
}
*{box-sizing:border-box}
/* the hidden attribute must always win over display rules (modal, mobile menu, form steps) */
[hidden]{display:none!important}
img{max-width:100%}
body{background:#fff;color:var(--ink-2);font-family:var(--sans);font-size:15px;line-height:1.5;margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
button:focus-visible,a:focus-visible{outline:2px solid var(--wine);outline-offset:3px}

.toolbar{max-width:1440px;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.toolbar p{margin:0;color:#5a4a4b;font-size:13px}
.seg{display:inline-flex;background:var(--paper)}
.seg button{padding:7px 14px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--wine);color:#fff}
@media (max-width:720px){.seg{display:none}}

.frame{max-width:1680px;margin:0 auto;background:var(--paper);container-type:inline-size;container-name:frame;transition:max-width .3s ease;position:relative;overflow:clip}
.frame.is-mobile{max-width:390px}

/* ───────── HERO ───────── */
.hero{--u:calc(100cqw / 1440);position:relative;height:calc(750 * var(--u));overflow:hidden;
  background:linear-gradient(180deg,#eeebeb 0%,#efecec 20%,#e5e2df 40%,#e4e1de 53%,#e3dfdc 76%,#e3dfdc 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 32.5%),linear-gradient(90deg,rgba(255,255,255,0) 55%,rgba(255,255,255,.35) 100%)}
/* the cutout sits above the glass nav (head over the blur, as in Figma); the hero ends on a clean edge */
.hero-screen{display:contents}
.hero-photo{position:absolute;z-index:5;pointer-events:none;left:calc(615 * var(--u));top:calc(-94 * var(--u));width:calc(924 * var(--u));max-width:none;height:auto;display:block}

.topbar{position:absolute;z-index:4;top:calc(40 * var(--u));left:max(16px,calc(40.5 * var(--u)));right:max(16px,calc(40.5 * var(--u)));height:56px;padding:8px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.3);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.tb-left{display:flex;align-items:center;gap:calc(146 * var(--u))}
.logo{display:block;width:47px;height:34px}
.logo img{width:100%;height:100%;display:block;object-fit:contain}
.tb-links{display:flex;gap:12px}
.tb-links a,.tb-menu a{padding:8px;font-size:14px;font-weight:500;text-transform:uppercase;color:var(--ink);text-decoration:none;cursor:pointer;transition:color .2s}
.tb-links a:hover{color:var(--wine)}
.tb-right{display:flex;align-items:center;gap:4px}
.tb-cta{display:flex;align-items:center;gap:10px;padding:8px;background:rgba(255,255,255,.6);font-size:14px;font-weight:600;text-transform:uppercase;color:var(--ink-2);transition:background .2s}
.tb-cta:hover{background:#fff}
.tb-cta img{width:24px;height:24px;display:block}
.tb-burger{display:none;width:40px;height:40px;place-items:center}
.tb-burger i,.tb-burger i::before,.tb-burger i::after{display:block;width:18px;height:1.5px;background:var(--wine);position:relative;transition:transform .25s,background .2s}
.tb-burger i::before,.tb-burger i::after{content:"";position:absolute;left:0}
.tb-burger i::before{top:-6px}.tb-burger i::after{top:6px}
.tb-burger[aria-expanded="true"] i{background:transparent}
.tb-burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.tb-burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
.tb-menu{position:absolute;z-index:8;top:76px;left:16px;right:16px;display:grid;padding:8px;background:rgba(255,255,255,.7);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.tb-menu a{padding:14px 10px}
.tbm-cta{display:flex;align-items:center;gap:10px;margin-top:6px;padding:12px 10px;background:var(--wine);color:#fff;font-size:14px;font-weight:600;text-transform:uppercase}
.tbm-cta img{width:22px;height:22px;filter:brightness(0) invert(1)}

.hero-copy{position:absolute;z-index:3;left:calc(40.5 * var(--u));top:calc(194.5 * var(--u));width:calc(525 * var(--u));display:grid;gap:calc(22 * var(--u))}
.hero-title{margin:0;font-family:var(--serif);font-weight:400;font-size:calc(55 * var(--u));letter-spacing:-.02em;color:var(--wine)}
.ht-it,.ht-rg{display:block;width:fit-content;-webkit-background-clip:text;background-clip:text;color:transparent}
.ht-it{font-style:italic;line-height:.86;margin-left:auto;text-align:right;padding-right:.04em;background-image:linear-gradient(90deg,var(--wine) 25.9%,var(--blush) 111.9%)}
.ht-rg{line-height:1.04;background-image:linear-gradient(90deg,var(--wine) 45.4%,var(--blush) 159.8%)}
.hero-desc{margin:0;width:max(280px,calc(388 * var(--u)));font-size:max(14px,calc(16 * var(--u)));line-height:1.2;color:var(--ink-2);text-wrap:pretty}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.hero-btns .btn{min-width:182px;min-height:50px;font-weight:600;letter-spacing:.02em;text-decoration:none}
.hero-btns .btn.alt{min-width:191px;background:#e9e8e8;border:1.5px solid #d7d2d2;color:var(--ink-2);backdrop-filter:none;-webkit-backdrop-filter:none}
.hero-btns .btn.alt:hover{background:#f1f0f0;border-color:#d7d2d2}

.hero-name{position:absolute;z-index:7;left:calc(40 * var(--u));bottom:calc(4 * var(--u));margin:0;font-family:var(--serif);font-weight:400;font-size:calc(131.2 * var(--u));line-height:1.1;letter-spacing:-.01em;color:var(--wine);white-space:nowrap}
.hero-name em{font-style:italic}

.hero-stats{position:absolute;z-index:7;left:calc(810.4 * var(--u));top:calc(590.6 * var(--u));display:flex;gap:calc(10 * var(--u))}
.stat{display:flex;align-items:flex-end;gap:calc(6 * var(--u));padding:calc(22 * var(--u)) calc(20 * var(--u));background:rgba(255,255,255,.3);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.num{font-family:var(--serif);font-size:calc(100 * var(--u));line-height:.78;letter-spacing:-.01em;color:var(--wine)}
.num.g{background:linear-gradient(90deg,var(--wine) 0%,var(--blush) 101.4%);-webkit-background-clip:text;background-clip:text;color:transparent;padding:.14em .04em .08em 0;margin:-.14em 0 -.08em}
.lbl{display:block;width:calc(76 * var(--u));font-size:max(10px,calc(14 * var(--u)));font-weight:600;line-height:1.2;text-transform:uppercase;color:var(--wine)}
.lbl-wrap{display:grid;gap:calc(4 * var(--u))}
.lbl-wrap .lbl{padding-bottom:0;width:auto}
.avatars{display:flex}
.avatars img{width:calc(35.4 * var(--u));height:calc(35.4 * var(--u));border-radius:50%;display:block}
.avatars img+img{margin-left:calc(-17 * var(--u))}

@container frame (max-width:820px){
  .hero{--u:1px;height:auto;padding:0 0 8px;display:block;background:#fff}
  /* mobile: everything up to the photo fills exactly one screen; the stats follow below */
  .hero-screen{position:relative;display:flex;flex-direction:column;height:100vh;height:100svh;min-height:600px;padding:12px 16px 0;overflow:hidden;background:linear-gradient(180deg,#f7f5f5 0%,#efecec 25%,#e5e2df 55%,#e3dfdc 100%)}
  .hero::before{display:none}
  .topbar{position:relative;top:auto;left:auto;right:auto;margin-bottom:24px;order:0;flex:none}
  .tb-links,.tb-cta{display:none}
  .tb-left{gap:0}
  .tb-right{display:flex;align-items:center;gap:4px}
  .tb-burger{display:grid}
  .hero-copy{position:relative;left:auto;top:auto;width:auto;gap:16px;order:2;flex:none}
  .hero-title{font-size:clamp(32px,9.4cqw,40px)}
  .hero-desc{width:auto;font-size:14.5px}
  .hero-btns .btn,.hero-btns .btn.alt{flex:1 1 0;min-width:0;width:auto}
  /* name spans the full content width: Instrument Serif "Natasha Yev" ≈ 4.0em wide (Figma: 525px at 131px) */
  .hero-name{position:absolute;left:16px;right:16px;bottom:10px;font-size:calc((100cqw - 32px) / 4.1);line-height:1;letter-spacing:-.015em;z-index:7}
  /* photo scaled up so the cut-out edges of the original shot fall outside the screen; face stays centred */
  .hero-photo{position:relative;left:auto;top:auto;order:4;flex:1 1 0;min-height:0;width:165%;max-width:none;margin:-55px 0 0 -14%;height:auto;object-fit:cover;object-position:50% 0}
  .hero-stats{position:relative;left:auto;top:auto;margin:20px 16px 8px;gap:8px}
  .stat{flex:1 1 0;min-width:0;padding:14px 12px;gap:6px;background:rgba(251,213,228,.32);backdrop-filter:none;-webkit-backdrop-filter:none}
  .num{font-size:44px}
  .stat:first-child{flex:.8 1 0}
  .stat:last-child{flex:1.2 1 0}
  .lbl{width:auto;font-size:11px}
  .avatars img{width:22px;height:22px}
  .avatars img+img{margin-left:-9px}
}

/* ───────── SERVICES ───────── */
/* one continuous background for everything below the hero: soft vertical petal wash + a left pink wash that fades in under the hero edge and out at the very bottom */
.flow{position:relative;isolation:isolate;background:linear-gradient(180deg,#ffffff 0,#fdf5f8 900px,#fbeef4 50%,#fdf5f8 calc(100% - 700px),#ffffff 100%)}
.flow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(240,196,216,.5) 0%,rgba(246,212,227,.32) 18%,rgba(251,213,228,.12) 36%,rgba(251,213,228,0) 52%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 800px,#000 calc(100% - 800px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 800px,#000 calc(100% - 800px),transparent 100%)}
@container frame (max-width:820px){ .flow::before{display:none} }
/* one smooth wash: white → soft petal → white, plus a left wash under the sticky glass menu so the white 30% card reads as a lighter panel */

.section{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;padding:var(--gap) 40px 0;scroll-margin-top:0}

/* left: title + glass index */
.aside{position:sticky;top:24px;align-self:start;display:grid;gap:28px}
h2{font-family:var(--serif);font-weight:400;font-size:72px;line-height:.95;letter-spacing:-1.2px;margin:0;color:var(--wine)}
.grad{font-style:italic;background:linear-gradient(90deg,var(--wine) 10%,var(--blush) 120%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.lead{margin:0;max-width:30ch;color:var(--ink-2);line-height:1.3;text-wrap:pretty}
.index-wrap{position:relative;max-width:340px;isolation:isolate}
/* same recipe as the hero stat plaques: white 30% + Figma glass radius 7, no shadow */
.index{position:relative;background:rgba(255,255,255,.3);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.55);padding:8px}
.index a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-2);text-decoration:none;transition:background .2s,color .2s}
.index a span{font-weight:500;color:rgba(77,8,15,.5);font-variant-numeric:tabular-nums}
.index a:hover{background:rgba(255,255,255,.6)}
.index a.on{background:var(--wine);color:#fff}
.index a.on span{color:rgba(255,255,255,.7)}

/* right: groups */
.groups{display:grid;gap:84px;min-width:0}
.group{scroll-margin-top:24px}
.g-head{position:relative;padding-bottom:14px}
.g-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(122,2,14,.45) 0%,rgba(223,181,203,.55) 55%,rgba(223,181,203,.15) 100%)}
.g-head h3{font-family:var(--serif);font-weight:400;font-size:52px;line-height:1;letter-spacing:-1px;margin:0;color:var(--wine);text-wrap:balance}
.g-desc{margin:16px 0 0;max-width:48ch;color:var(--ink-2);text-wrap:balance}
.g-note{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--wine);background:var(--glass);border:1px solid var(--petal);padding:6px 10px}

.rows{margin-top:22px;display:grid;gap:8px}
.row{background:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s,box-shadow .25s}
.row:hover{background:rgba(255,255,255,.8)}
.row.open{background:#fff;box-shadow:0 4px 14px rgba(122,2,14,.035)}
.row-btn{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,190px) 32px;gap:8px 18px;align-items:start;width:100%;padding:22px 22px}
.r-name{font-weight:600;font-size:16px;color:var(--ink);transition:color .2s}
.row-btn:hover .r-name{color:var(--wine)}
.r-name{grid-column:1;grid-row:1}
.r-cond{grid-column:1;grid-row:2;justify-self:start;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--wine);background:rgba(251,213,228,.6);padding:5px 9px;line-height:1.4;text-wrap:pretty}
.r-price{grid-column:2;grid-row:1}
.r-dur{grid-column:3;grid-row:1}
.tog{grid-column:4;grid-row:1}
.r-price{font-weight:600;font-size:16px;color:var(--wine);text-align:right;font-variant-numeric:tabular-nums}
.r-dur{font-size:14px;color:rgba(77,8,15,.75);font-variant-numeric:tabular-nums}
.tog{width:32px;height:32px;background:transparent;border:1px solid rgba(122,2,14,.25);display:grid;place-items:center;transition:background .2s,border-color .2s}
.tog i{width:12px;height:12px;position:relative;display:block}
.tog i::before,.tog i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--wine);transition:transform .25s,background .2s}
.tog i::after{transform:rotate(90deg)}
.row-btn:hover .tog{background:var(--petal);border-color:var(--petal)}
.row.open .tog{background:var(--wine);border-color:var(--wine)}
.row.open .tog i::before,.row.open .tog i::after{background:#fff}
.row.open .tog i::after{transform:rotate(0)}

.detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.row.open .detail{grid-template-rows:1fr}
.detail>div{overflow:hidden}
.detail-in{padding:0 72px 24px 22px;display:grid;gap:14px;max-width:700px}
.detail-in p{margin:0;text-wrap:pretty}
.r-note{font-size:14px;color:var(--wine)}
.r-note b{font-weight:600}
.prep{background:rgba(251,213,228,.4);padding:16px 18px}
.prep b{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--wine);margin-bottom:8px}
.prep ul{margin:0;padding-left:18px;display:grid;gap:4px}
.prep li::marker{color:var(--blush)}

/* CTA */
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;background:var(--wine);color:#fff;padding:11px 13px 11px 20px;font-size:14px;font-weight:500;text-transform:uppercase;min-width:220px}
.btn .box{width:28px;height:28px;background:#fff;display:grid;place-items:center;color:var(--wine)}
.btn.alt{background:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--wine);border:1px solid rgba(122,2,14,.3);font-weight:600;padding:11px 20px;min-height:50px;justify-content:center;transition:background .2s,border-color .2s}
.btn.alt:hover{background:#fff;border-color:var(--wine)}

@container frame (max-width:820px){
  .section{grid-template-columns:minmax(0,1fr);gap:28px;padding:var(--gap) 16px 0}
  .aside{position:static;gap:16px}
  h2{font-size:48px}
  .index-wrap{position:sticky;top:8px;z-index:5;max-width:none}
  .index-wrap::before,.index-wrap::after{display:none}
  .index{display:flex;overflow-x:auto;gap:4px;padding:6px;scrollbar-width:none;background:rgba(255,255,255,.45)}
  .index a{white-space:nowrap;padding:8px 10px;font-size:11.5px}
  .index a span{display:none}
  .groups{gap:56px}
  .g-head h3{font-size:36px}
  .row-btn{grid-template-columns:minmax(0,1fr) auto 32px;gap:4px 12px;padding:18px 16px}
  .row-btn{row-gap:6px}
  .r-name{grid-column:1;grid-row:1;align-self:center;line-height:1.35}
  .r-price{grid-column:2;grid-row:1;align-self:center}
  .tog{grid-column:3;grid-row:1;align-self:center}
  .r-dur{grid-column:1 / -1;grid-row:2;font-size:13.5px}
  .r-cond{grid-column:1 / -1;grid-row:3;justify-self:stretch;margin-top:8px;padding:8px 12px}
  .detail-in{padding:0 16px 20px}
  .btn,.btn.alt{width:100%}
}
/* the mobile index must be sticky relative to the page, so lift it out of .aside */
@container frame (max-width:820px){ .aside{display:contents} .aside>.head{order:0} }

/* mobile-only fold toggle: small label over a white outlined square with an arrow, centred */
.more-btn{display:none}
.more-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--wine)}
.more-box{width:44px;height:44px;display:grid;place-items:center;background:#fff;border:1px solid rgba(122,2,14,.35);color:var(--wine);transition:border-color .2s,background .2s}
.more-btn:hover .more-box{border-color:var(--wine)}
.more-box svg{transition:transform .25s}
.more-btn[aria-expanded="true"] .more-box svg{transform:rotate(180deg)}
@container frame (max-width:820px){
  .more-btn{display:grid;justify-items:center;gap:10px;justify-self:center;margin:0 auto;padding:4px 12px}
  .groups:not(.all) .group.more{display:none}
}
@container frame (max-width:820px){ .section,.about,.edu,.works{--gap:88px} }

/* ───────── ABOUT ───────── */
/* photo left with clean edges + a small glass caption (same recipe as the hero plaques); text right with the hero's broken serif lines */
.about{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:0;align-items:center;padding:var(--gap) 0 var(--gap) calc(56 * 100cqw / 1440);background:linear-gradient(180deg,rgba(255,255,255,0) 0,#fff var(--gap),#fff calc(100% - var(--gap)),rgba(255,255,255,0) 100%)}
/* the photo is capped to the viewport height so the whole block fits on one screen */
.about-photo{position:relative;margin:0;aspect-ratio:7/8.4;max-width:100%;overflow:hidden;background:#efecec}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.about-text{display:grid;justify-items:center;text-align:center;gap:26px;max-width:640px;margin:0 auto;padding:48px clamp(32px,6cqw,96px)}
/* lead styled like the condition tags in Services */
.about-lead{margin:0;font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.4;letter-spacing:.02em;text-transform:uppercase;color:var(--wine);background:rgba(251,213,228,.6);padding:10px 16px;max-width:560px;text-wrap:balance}
.about h2{white-space:nowrap}
.about-text p.body{margin:0;color:var(--ink-2);max-width:52ch;text-wrap:balance}
.spec{display:grid;gap:10px}
.spec{justify-items:center}
.spec .chips{justify-content:center}
.spec small{font-family:var(--serif);font-style:italic;font-size:32px;line-height:1.1;color:var(--wine)}
.about-text .chips li{background:transparent;border:1px solid rgba(122,2,14,.22)}
@container frame (max-width:820px){
  .about{grid-template-columns:minmax(0,1fr);gap:0;padding:var(--gap) 16px}
  .about-photo{aspect-ratio:7/8.4}
  .about-text{padding:28px 0 0}
  .about-lead{font-size:12.5px}
}

/* ───────── WORKS ───────── */
/* sticky text left (like Services) on the same pink wash; right: one column of glass-framed photo cards that stack over each other while scrolling */
.works{position:relative;display:grid;grid-template-columns:minmax(0,max-content) minmax(0,560px);justify-content:center;gap:36px;padding:var(--gap) 40px var(--gap)}
.works-aside{position:sticky;top:24px;align-self:start;display:grid;gap:22px;justify-items:end;text-align:right}
.works-aside .lead{max-width:32ch}
/* stacking cards: every card sticks near the top, the next one slides over it; --i staggers the stick point so earlier edges stay visible */
.stack{display:grid;gap:24px;width:100%;counter-reset:shot}
.shot{position:sticky;top:calc(24px + var(--i) * 8px);margin:0;padding:10px 10px 12px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);box-shadow:0 -6px 24px rgba(122,2,14,.06);transform-origin:50% 0;will-change:transform;counter-increment:shot}
.shot img{display:block;width:100%;height:min(54vh,480px);object-fit:cover}
.shot figcaption{display:flex;align-items:baseline;gap:12px;padding:12px 4px 2px;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--wine)}
.shot figcaption::before{content:counter(shot,decimal-leading-zero);font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:0;line-height:1;color:var(--wine)}
.shot figcaption i{font-style:normal;margin-left:auto;color:rgba(122,2,14,.55)}
.works-more{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
@container frame (max-width:820px){
  .works{grid-template-columns:minmax(0,1fr);gap:28px;padding:var(--gap) 16px var(--gap)}
  .works-aside{position:static;justify-items:start;text-align:left}
  .stack{width:100%;margin-left:0;gap:20px}
  .shot{top:calc(12px + var(--i) * 7px)}
  .shot img{height:min(56svh,440px)}
  .works-more .btn{width:100%}
}

/* ───────── EDUCATION ───────── */
/* five equal-weight plan cards on a 6-col grid: 3 Foundation courses (2 cols each) + Advanced and Online (3 cols each). Rows stretch to equal height; CTAs pinned to the bottom. */
.edu{position:relative;padding:0 40px 0;scroll-margin-top:0}
.edu-head{display:grid;justify-items:center;text-align:center;gap:10px;margin-bottom:40px}
.edu-head .lead{max-width:none;text-wrap:balance}
.plans{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:stretch}
.plan{grid-column:span 2;background:rgba(255,255,255,.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.75);padding:32px 30px;display:flex;flex-direction:column;gap:20px;min-width:0}
.plan.wide{grid-column:span 3}
.p-eyebrow{margin:0 0 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:rgba(122,2,14,.6)}
.plan h3{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1;letter-spacing:-.8px;margin:0;color:var(--wine);text-wrap:balance}
.p-head{padding-bottom:18px;position:relative}
.p-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(122,2,14,.45) 0%,rgba(223,181,203,.55) 55%,rgba(223,181,203,.15) 100%)}
.price{display:flex;align-items:baseline;gap:8px;color:var(--wine);margin:0}
.price small{font-size:13px;font-weight:600;letter-spacing:.04em}
.price b{font-family:var(--serif);font-weight:400;font-size:46px;line-height:1;letter-spacing:-.01em}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chips li{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--wine);background:rgba(251,213,228,.6);padding:5px 9px;line-height:1.4}
/* list marker: a short wine→blush stroke instead of check marks */
.points{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.points li{position:relative;padding-left:24px;color:var(--ink-2);line-height:1.4}
.points li::before{content:"";position:absolute;left:0;top:.7em;width:12px;height:1.5px;background:linear-gradient(90deg,var(--wine),var(--blush))}
.points.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.sub{margin:0;font-size:18px;font-weight:600;color:var(--ink)}
.desc{margin:0;color:var(--ink-2);max-width:52ch;text-wrap:pretty}
/* the only online course: inverted wine card */
.plan.featured{background:linear-gradient(150deg,#8a0612 0%,var(--wine) 45%,#5c010b 100%);border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff}
.plan.featured .p-eyebrow{color:rgba(251,213,228,.8)}
.plan.featured h3{color:#fff}
.plan.featured h3 .grad{background:linear-gradient(90deg,#fff 0%,var(--petal) 45%,var(--blush) 110%);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan.featured .p-head::after{background:linear-gradient(90deg,rgba(255,255,255,.55) 0%,rgba(251,213,228,.3) 55%,rgba(251,213,228,0) 100%)}
.plan.featured .desc{color:rgba(255,255,255,.86)}
.plan.featured .price{color:#fff}
.plan.featured .btn{background:#fff;color:var(--wine)}
.plan.featured .btn .box{background:var(--wine);color:#fff}
.plan.featured .btn:hover{background:var(--petal)}
.plan.featured .btn.soon,.plan.featured .btn.soon:hover{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);justify-content:center;min-height:50px;padding:11px 20px;letter-spacing:.08em;cursor:default}
/* price + CTA sit together at the bottom, so prices line up across a row */
.p-foot{margin-top:auto;display:grid;gap:18px;padding-top:12px}
.also{grid-column:1 / -1;margin:0;padding:16px 20px;background:rgba(251,213,228,.35);color:var(--ink-2);text-wrap:pretty}
.also b{font-weight:600;color:var(--wine)}

@container frame (max-width:1100px){
  .plan,.plan.wide{grid-column:span 3}
}
@container frame (max-width:820px){
  .edu{padding:0 16px 0}
  .edu-head{margin-bottom:32px}
  .plans{grid-template-columns:minmax(0,1fr)}
  .plan,.plan.wide{grid-column:auto;padding:24px 18px}
  .plan h3{font-size:36px}
  .price b{font-size:40px}
  .points.two{grid-template-columns:minmax(0,1fr)}
  .card-cta .btn{width:100%}
}

/* ───────── FOOTER ───────── */
/* wine block (same recipe as the featured Online card): CTA → link columns → full-width wordmark echoing the hero → legal line */
.foot{position:relative;color:#fff;background:linear-gradient(160deg,#8a0612 0%,var(--wine) 40%,#5c010b 100%);padding:56px 40px 22px;overflow:hidden}
.foot h2{font-size:56px}
.foot a,.foot button{color:inherit}
.f-cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 40px;padding-bottom:32px;position:relative}
.f-cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(251,213,228,.25) 55%,rgba(251,213,228,0) 100%)}
.f-cta h2{color:#fff;max-width:14ch;text-wrap:balance}
.f-cta h2 .grad{background:linear-gradient(90deg,#fff 0%,var(--petal) 45%,var(--blush) 110%);-webkit-background-clip:text;background-clip:text;color:transparent}
.f-cta p{margin:14px 0 0;max-width:40ch;color:rgba(255,255,255,.8);line-height:1.3}
.f-btns{display:flex;flex-wrap:wrap;gap:10px}
.foot .btn{background:#fff;color:var(--wine)}
.foot .btn .box{background:var(--wine);color:#fff}
.foot .btn:hover{background:var(--petal)}
.foot .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);justify-content:center;gap:10px;min-height:50px;padding:11px 20px}
.foot .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.foot .btn.ghost img{width:20px;height:20px;filter:brightness(0) invert(1)}
.f-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding:30px 0 26px}
.f-cols h4{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(251,213,228,.75)}
.f-cols ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.f-cols a,.f-cols button{font-size:15px;text-decoration:none;opacity:.92;transition:opacity .2s;cursor:pointer}
.f-cols a:hover,.f-cols button:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.f-cols p{margin:0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.92)}
.f-legal{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:18px;font-size:13px;color:rgba(255,255,255,.7)}
.f-legal::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(251,213,228,.25) 55%,rgba(251,213,228,0) 100%)}
.f-legal nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.f-legal a{text-decoration:none}
.f-legal a:hover{color:#fff}
@container frame (max-width:820px){
  .foot{padding:48px 16px 36px}
  .foot h2{font-size:40px}
  .f-cta{padding-bottom:28px}
  .f-btns,.f-btns .btn{width:100%}
  .f-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 20px;padding:40px 0 40px}
  .f-cols ul{gap:12px}
  .f-cols h4{margin-bottom:18px}
  .f-cols p{line-height:1.6}
  .f-legal{padding-top:26px;gap:16px}
  .f-legal nav{gap:10px 28px}
  .f-legal{flex-direction:column}
}

/* ───────── TRAINING REQUEST MODAL ───────── */
.modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;overflow:auto}
.modal-scrim{position:fixed;inset:0;background:rgba(65,5,11,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-card{position:relative;width:min(100%,460px);background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.9);padding:40px 36px 32px;display:grid;gap:18px;box-shadow:0 30px 80px rgba(65,5,11,.25)}
.modal-x{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(122,2,14,.25);color:var(--wine);font-size:20px;line-height:1;transition:background .2s,border-color .2s}
.modal-x:hover{background:var(--petal);border-color:var(--petal)}
.modal-card h3{margin:0;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;letter-spacing:-.8px;color:var(--wine)}
.modal-card .p-eyebrow{margin:0;padding-right:40px}
.modal-card .lead{max-width:none}
.m-form{display:grid;gap:14px;margin-top:4px}
.m-field{display:grid;gap:6px}
.m-field label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--wine)}
.m-field input{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid rgba(122,2,14,.25);padding:13px 14px;border-radius:0;outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
.m-field input::placeholder{color:rgba(77,8,15,.4)}
.m-field input:focus{border-color:var(--wine);box-shadow:0 0 0 3px rgba(251,213,228,.9)}
.m-field.bad input{border-color:var(--wine);background:rgba(251,213,228,.25)}
.m-err{font-size:12.5px;color:var(--wine);min-height:0}
.m-form .btn{width:100%;margin-top:4px}
.m-note{margin:0;font-size:12.5px;line-height:1.4;color:rgba(77,8,15,.65)}
.m-done{display:grid;gap:16px}
.m-done .btn{width:100%;justify-content:center}
@media (max-width:520px){.modal-card{padding:36px 20px 24px}.modal-card h3{font-size:34px}}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--wine);color:#fff;padding:12px 18px;font-size:13.5px;opacity:0;transition:.25s;z-index:30;pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}