


.atelier{
  --m1:clamp(0,var(--m,4),1);--m2:clamp(0,calc(var(--m,4) - 1),1);
  --m3:clamp(0,calc(var(--m,4) - 2),1);--m4:clamp(0,calc(var(--m,4) - 3),1);
  position:relative;padding-block:var(--section);overflow-x:clip;
}
.atelier-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,80px);align-items:center}
.atelier-copy h2{margin-bottom:22px;max-width:12ch}
.as-n{display:block;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
.atelier-visual{position:relative;padding-block:12px 4%}

.atelier .proofs{margin-top:clamp(56px,7vw,104px)}
.atelier-frame{position:relative;width:100%}
.atelier-frame .frame-bar{gap:6px}
.atelier-frame .frame-bar>span{margin-inline:auto 0;max-width:46%}
.atelier-status{
  position:relative;display:inline-grid;align-items:center;margin-inline-start:auto;padding:3px 10px 3px 22px;border-radius:99px;
  font-family:var(--font-mono);font-size:.64rem;font-weight:500;color:var(--text);background:rgba(255,255,255,.06);
}
.atelier-status>i{position:absolute;inset-inline-start:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--dim)}
.atelier-status>i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#F5E1FF;box-shadow:0 0 8px rgba(245,225,255,.7);opacity:var(--m4)}
.atelier-status span{grid-area:1/1}
.st-draft{opacity:calc(1 - var(--m4))}
.st-live{opacity:var(--m4)}
.atelier-screen{background:#09090C}

.atelier-screen::before{content:"";position:absolute;inset:0;background:#0C0B09;opacity:clamp(0,calc(var(--m2) * 2 - .6),1)}
.atelier-sketch{position:absolute;inset:0;width:100%;height:100%;opacity:calc(1 - var(--m2))}
.atelier-sketch path{
  stroke:#F5F5F7;stroke-opacity:.55;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1 1;stroke-dashoffset:calc(1 - clamp(0,calc(var(--m1) * 1.6 - var(--i) * .15),1));
}
.atelier-blocks{position:absolute;inset:0;opacity:clamp(0,calc(var(--m2) * 3),1)}
.atelier-blocks i{position:absolute;display:block;border-radius:4px;background:rgba(255,255,255,.09)}
.atelier-blocks i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--c,#15130F);opacity:clamp(0,calc(var(--m2) * 2 - 1),1)}
.ab-nav{left:4.4%;right:4.4%;top:6%;height:3.2%;--c:#15130F}
.ab-h1{left:6.25%;width:53%;top:21%;height:6%;--c:#F3EDE3}
.ab-h2{left:6.25%;width:41%;top:31%;height:6%;--c:#F3EDE3}
.ab-btn{left:6.25%;width:21%;top:44%;height:6%;border-radius:99px!important;--c:#C9A86A}
.ab-img{left:64%;width:29.7%;top:17.5%;height:40%;--c:#2A241B}
.ab-c1,.ab-c2,.ab-c3{top:65.5%;height:27.5%;width:28.1%;--c:#15130F}
.ab-c1{left:6.25%}.ab-c2{left:36%}.ab-c3{left:65.6%}
.atelier-shot{position:absolute;inset:0;display:block;clip-path:inset(0 0 calc((1 - var(--m3)) * 100%) 0)}
.atelier-shot img{width:100%;height:auto;transform:translate3d(0,calc(var(--m4) * -14%),0)}
.atelier-phone{
  position:absolute;inset-inline-end:-3%;bottom:-8%;width:24%;
  opacity:var(--m4);transform:translate3d(calc((1 - var(--m4)) * 40px),calc((1 - var(--m4)) * 14px),0);
}
.atelier-phone .frame-screen picture{display:block}
.atelier-phone img{width:100%;height:auto}
@media (max-width:760px){
  .atelier{padding-bottom:40px}
  .atelier .lead{font-size:1rem}
  .atelier .chapter{margin-bottom:20px}
  .atelier-grid{grid-template-columns:minmax(0,1fr)}
  .atelier-copy{display:contents}
  .atelier-copy>.chapter{order:1}
  .atelier-copy>h2{order:2}
  .atelier-copy>.lead{order:3}
  .atelier-visual{order:4;margin:26px 8% 0 0;padding:0}
  .atelier .proofs{margin-top:48px}
  .atelier-phone{width:30%;inset-inline-end:-6%}
}
@media (prefers-reduced-motion:reduce){
  .atelier{--m:4!important}
}



.rc-sec{overflow-x:clip}
.rc-grid{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,5vw,80px);align-items:start;
  --note-w:220px;--note-gap:40px;
}
.rc-intro{position:sticky;top:clamp(100px,17vh,160px);padding-top:6px}
.rc-intro h2{font-size:clamp(2.4rem,4.3vw,4rem);max-width:9ch;margin-bottom:28px}
.rc-intro .lead{max-width:32ch}
.rc-cta{margin-top:34px}


.rc-stage{
  --pr:1;--hn:720;
  position:relative;width:420px;max-width:100%;margin-inline-end:calc(var(--note-w) + var(--note-gap));
}

.rc-stage::before{
  content:"";position:absolute;inset:-8% -35%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(192,132,252,.2),rgba(244,114,182,.06) 55%,transparent 75%);
  opacity:calc(.25 + var(--pr) * .75);
}


.rc-paper{
  --ink:#141218;--ink2:#524D5B;--ink3:#5F5A69;--rule:rgba(20,18,24,.22);--stamp:#7E22CE;--px:clamp(22px,2.4vw,32px);
  position:relative;padding:34px var(--px) 30px;color:var(--ink);
  font-family:var(--font-mono);font-size:.74rem;line-height:1.5;letter-spacing:.02em;
  
  clip-path:inset(-60px -400px calc((1 - var(--pr)) * 100%) -400px);
}
.rc-paper > :not(.rc-sheet){position:relative;z-index:1}
.rc-sheet{
  --z:6px;
  position:absolute;inset:0;z-index:0;
  
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .16 0 0 0 0 .3 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(90deg,rgba(40,20,60,.07),#0000 7%,#0000 93%,rgba(40,20,60,.07)),
    radial-gradient(90% 34% at 50% 0,rgba(255,255,255,.6),transparent 70%),
    linear-gradient(180deg,#E6E1EA 0,#F3F0F4 12%,#EFEBF1 70%,#E2DCE6 100%);
  
  -webkit-mask:
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2 * var(--z)) var(--z) repeat-x,
    linear-gradient(#000 0 0) 0 var(--z)/100% calc(100% - 2 * var(--z)) no-repeat,
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2 * var(--z)) var(--z) repeat-x;
  mask:
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2 * var(--z)) var(--z) repeat-x,
    linear-gradient(#000 0 0) 0 var(--z)/100% calc(100% - 2 * var(--z)) no-repeat,
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2 * var(--z)) var(--z) repeat-x;
}


.rc-top{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px dashed var(--rule)}
.rc-logo{flex:none;display:inline-flex;padding:3px 7px 6px 6px;border-radius:9px;background:#050507;color:#F5F5F7}
.rc-logo .logo{display:block;height:30px;width:auto}
.rc-meta{display:grid;justify-items:end;margin-inline-start:auto;text-align:end;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}

.rc-colhead{position:relative;padding:14px 0 2px;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.rc-margin-label{
  position:absolute;top:14px;inset-inline-start:calc(100% + var(--px) + var(--note-gap));width:var(--note-w);
  color:var(--dim);white-space:nowrap;
}


.rc-items{margin:0;padding:0;list-style:none}
.rc-item{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:4px;padding:12px 0 9px}
.rc-n{color:var(--ink3);font-size:.66rem;padding-top:.32em}
.rc-what{font-family:var(--font-sans);font-size:.98rem;line-height:1.38;letter-spacing:-.006em;color:var(--ink2)}
.rc-what b{color:var(--ink);font-weight:620}
.rc-val{grid-column:2;display:flex;align-items:baseline;gap:8px;margin-top:3px;font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--stamp)}
.rc-dots{flex:1;min-width:20px;border-bottom:1.5px dotted rgba(20,18,24,.32);transform:translateY(-3px)}


.rc-note{
  --k:clamp(0,calc((var(--pr) * var(--hn) - var(--top,0) - 40) / 120),1);
  position:absolute;top:8px;inset-inline-start:calc(100% + var(--px) + var(--note-gap));width:var(--note-w);margin:0;
  font-family:var(--font-serif);font-style:italic;font-size:1.36rem;line-height:1.16;color:#BEB9CC;
}
.rc-note::before{
  content:"";position:absolute;top:.66em;inset-inline-end:calc(100% + 8px);width:calc(var(--note-gap) + var(--px) - 14px);
  border-top:1px dashed rgba(255,255,255,.2);
}
.rc-note-t{text-decoration:none;opacity:calc(1 - var(--k) * .2)}
.rc-note-s{
  position:absolute;inset:0;color:transparent;
  text-decoration:line-through;text-decoration-color:#F472B6;text-decoration-thickness:1.25px;
  clip-path:inset(-6px calc((1 - var(--k)) * 100%) -6px 0);
}


.rc-extras{display:grid;gap:7px;margin:4px 0 0;padding:14px 0;border-block:1px dashed var(--rule);list-style:none;font-size:.72rem;color:var(--ink2)}
.rc-extras li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:4px}

.rc-extras li{text-wrap:balance}
.rc-what,.rc-note,.rc-total-v{text-wrap:pretty}
.rc-extras li::before{
  content:"";width:12px;height:12px;margin-top:.22em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237E22CE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3 3L13 4.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.rc-fee{position:relative;margin-top:14px}
.rc-fee .rc-note{top:-4px}
.rc-line{display:flex;align-items:baseline;gap:8px;margin:0;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.rc-line b{font-size:.86rem;font-weight:600;letter-spacing:.04em;color:var(--ink);white-space:nowrap}


.rc-total{position:relative;margin-top:14px;padding-top:16px;border-top:3px double var(--ink)}
.rc-total-k{display:block;margin-bottom:8px;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink2)}
.rc-total-v{max-width:11ch;font-family:var(--font-sans);font-size:clamp(1.5rem,2.1vw,1.8rem);font-weight:640;line-height:1.06;letter-spacing:-.03em}
.rc-seal{
  --s:clamp(0,calc((var(--pr) * var(--hn) - var(--top,0) - 60) / 110),1);
  position:absolute;top:0;inset-inline-end:-4px;width:112px;height:112px;overflow:visible;
  color:var(--stamp);mix-blend-mode:multiply;
  opacity:calc(var(--s) * .88);
  transform:rotate(calc(-13deg + (1 - var(--s)) * 28deg)) scale(calc(1.75 - var(--s) * .75));
}
.rc-seal text{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:1px;fill:currentColor}


.rc-foot{display:grid;justify-items:center;gap:7px;margin-top:20px;font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink3)}
.rc-bars{
  width:56%;height:20px;opacity:.42;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,#0000 2px 4px,var(--ink) 4px 5px,#0000 5px 8px,var(--ink) 8px 11px,#0000 11px 12px,var(--ink) 12px 13px,#0000 13px 16px,var(--ink) 16px 17px,#0000 17px 19px,var(--ink) 19px 22px,#0000 22px 23px);
}


.rc-headbar{
  position:absolute;top:0;inset-inline:-18px;z-index:3;height:10px;margin-top:-5px;border-radius:99px;pointer-events:none;
  background:linear-gradient(180deg,#3A3544,#16141C);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 12px 30px -8px rgba(0,0,0,.9);
  transform:translate3d(0,calc(var(--pr) * var(--hn) * 1px),0);
  opacity:calc(1 - clamp(0,calc((var(--pr) - .97) * 34),1));
}

.rc-headbar::before{content:"";position:absolute;bottom:100%;inset-inline:18px;height:54px;background:linear-gradient(0deg,rgba(244,114,182,.24),transparent)}
.rc-headbar::after{content:"";position:absolute;top:50%;inset-inline:16px;height:1.5px;margin-top:-.75px;border-radius:2px;background:var(--iris);box-shadow:0 0 14px 1px rgba(244,114,182,.75)}



@media (max-width:1180px){
  .rc-grid{--note-w:190px;--note-gap:36px}
  .rc-stage{width:380px}
}

@media (max-width:1000px){
  .rc-grid{grid-template-columns:minmax(0,1fr)}
  .rc-intro{position:static;display:contents}
  .rc-intro h2{max-width:14ch}
  .rc-intro .lead{margin-bottom:48px}
  .rc-cta{order:2;justify-self:start;margin-top:40px}
}

@media (max-width:700px){
  .rc-intro .lead{margin-bottom:24px;font-size:1rem}
  .rc-intro h2{margin-bottom:16px}
  .rc-cta{margin-top:26px}
  .rc-paper{padding:26px var(--px) 22px}
  .rc-item{padding:9px 0 7px}
  .rc-foot{margin-top:14px}
  .rc-stage{width:100%;max-width:420px;margin-inline:auto}
  .rc-paper{--px:20px}
  .rc-margin-label,.rc-note{position:static;inset:auto;width:auto}
  .rc-colhead{display:flex;justify-content:space-between;gap:12px}
  .rc-margin-label{color:var(--ink3);font-family:var(--font-serif);font-style:italic;font-size:.9rem;letter-spacing:0;text-transform:none;white-space:normal;text-align:end}
  .rc-note{position:relative;grid-column:2;grid-row:1;margin-bottom:6px;font-size:1rem;color:var(--ink3)}
  .rc-note::before{display:none}
  .rc-note-s{text-decoration-color:#DB2777}
  
  .rc-note-t{opacity:1}
  .rc-n{grid-row:2}
  .rc-what,.rc-val{grid-column:2}
  .rc-fee{display:flex;flex-direction:column}
  .rc-fee .rc-note{order:-1;top:auto}
  .rc-headbar{inset-inline:-10px}
  .rc-seal{width:96px;height:96px;inset-inline-end:-6px}
  .rc-total-v{font-size:1.45rem}
}
@media (max-width:360px){
  .rc-seal{width:84px;height:84px}
}
@media (prefers-reduced-motion:reduce){
  .rc-headbar{display:none}
  .rc-paper{clip-path:none}
}
