/* ==========================================================
   FA STUDIO — luxury website templates & web design
   ========================================================== */
:root{
  --ink:#1c1a19;
  --ink-2:#262321;
  --paper:#f5f2ed;
  --paper-2:#ebe6de;
  --stone:#8b857d;
  --mist:#b9b2a8;
  --line:rgba(28,26,25,.14);
  --line-l:rgba(245,242,237,.18);
  --body:'Cormorant Garamond','Garamond',serif;
  --serif:'Bodoni Moda','Didot','Times New Roman',serif;
  --script:'Pinyon Script','Snell Roundhand',cursive;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --wide:'Jost','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.76,0,.24,1);
  --out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,4.4vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16.5px;line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.no-scroll{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
:focus{outline:none}:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.skip{position:fixed;left:16px;top:-60px;z-index:9999;background:var(--ink);color:var(--paper);padding:12px 18px;font-family:var(--wide);font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:top .3s}
.skip:focus-visible{top:16px}

/* textured charcoal (woven, like heavy linen) */
.tex{background-color:var(--ink);color:var(--paper);position:relative;isolation:isolate}
.tex .muted{color:var(--mist)}

/* type */
.k{font-family:var(--sans);font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;font-weight:400}
.disp{font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:-.015em}
.disp em,.it{font-style:italic}
.script{font-family:var(--script);font-weight:400;line-height:1}
.lede{font-family:var(--body);font-size:clamp(21px,1.75vw,27px);line-height:1.45;font-weight:400}
.muted{color:var(--stone)}
.center{text-align:center}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.max{max-width:1360px;margin-left:auto;margin-right:auto}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
.sec{padding-top:clamp(90px,11vw,170px);padding-bottom:clamp(90px,11vw,170px);position:relative}
.alt{background:var(--paper-2)}
.mt-s{margin-top:20px}.mt-m{margin-top:40px}.mt-l{margin-top:80px}
.flexb{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.h1{font-size:clamp(56px,9vw,156px)}
.h2{font-size:clamp(32px,4.4vw,78px);text-transform:uppercase}
.script{text-transform:none}
.h3{font-size:clamp(34px,3.8vw,62px)}

/* oval buttons (signature) */
.oval{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.32em;text-transform:uppercase;padding:22px 46px;border:1.2px solid currentColor;border-radius:50%;position:relative;overflow:hidden;isolation:isolate;transition:color .6s var(--ease),transform .8s var(--out);white-space:nowrap}
.oval::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:-1;border-radius:inherit}
.oval:hover{color:var(--paper)}
.oval:hover::before{transform:scaleY(1)}
.tex .oval::before,.oval.light::before{background:var(--paper)}
.tex .oval:hover,.oval.light:hover{color:var(--ink)}
.oval.fill{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.oval.fill::before{background:var(--paper)}
.oval.fill:hover{color:var(--ink)}
.tex .oval.fill{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tex .oval.fill::before{background:var(--ink)}
.tex .oval.fill:hover{color:var(--paper)}
.oval.sm{padding:16px 32px;font-size:10px}
/* square buttons (like "View the demo / Buy") */
.sq{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--wide);font-stretch:112%;font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding:19px 30px;border:1px solid currentColor;position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.sq::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-101%);transition:transform .6s var(--ease);z-index:-1}
.sq:hover{color:var(--paper)}.sq:hover::before{transform:none}
.sq.fill{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sq.fill::before{background:#3a3735}
.tex .sq::before{background:var(--paper)}.tex .sq:hover{color:var(--ink)}
.tex .sq.fill{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tex .sq.fill::before{background:#d9d5cf}
.tl{font-family:var(--wide);font-stretch:118%;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;display:inline-flex;align-items:center;gap:14px}
.tl .arr{width:30px;height:1px;background:currentColor;position:relative;transition:width .6s var(--ease)}
.tl .arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.tl:hover .arr{width:54px}
.ul{position:relative;display:inline-block}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease)}
.ul:hover::after,.ul.on::after{transform:scaleX(1);transform-origin:left}
.roll{display:inline-flex;overflow:hidden;position:relative;vertical-align:top;white-space:nowrap}
.roll span{display:block;transition:transform .75s var(--ease)}
.roll span+span{position:absolute;left:0;top:0;transform:translateY(105%)}
a:hover>.roll span:first-child,button:hover>.roll span:first-child{transform:translateY(-105%)}
a:hover>.roll span+span,button:hover>.roll span+span{transform:none}
button[disabled],.oval[aria-disabled="true"]{opacity:.35;pointer-events:none}

/* reveals */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--out),transform 1.4s var(--out)}
.rv.is-in{opacity:1;transform:none}
.ri img{clip-path:inset(100% 0 0 0);transform:scale(1.18);transition:clip-path 1.6s var(--ease),transform 2.2s var(--out)}
.ri.is-in img{clip-path:inset(0);transform:scale(1)}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0 .08em;margin:-.12em 0 -.08em}
[data-split] .w>span{display:inline-block;transform:translateY(110%);transition:transform 1.3s var(--out)}
[data-split].is-in .w>span{transform:none}
.ld{height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease)}
.ld.is-in{transform:scaleX(1)}
.ph{position:relative;overflow:hidden;background:#e7e4df}
.ph img{width:100%;height:100%;object-fit:cover}
.ph .z{transition:transform 1.6s var(--out),filter 1s}
.ph:hover .z{transform:scale(1.05)}

/* grain */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:9000;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(3%,3%)}}

/* cursor */
.cur,.cring{position:fixed;left:0;top:0;pointer-events:none;z-index:9800;border-radius:50%}
.cur{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--paper);mix-blend-mode:difference}
.cring{width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(141,135,130,.6);display:grid;place-items:center;transition:width .6s var(--out),height .6s var(--out),margin .6s var(--out),background .6s,border-color .6s}
.cring span{font-family:var(--wide);font-stretch:118%;font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .4s;padding-left:.28em;font-weight:600}
.cring.link{width:64px;height:64px;margin:-32px 0 0 -32px}
.cring.view{width:112px;height:76px;margin:-38px 0 0 -56px;background:rgba(246,245,242,.94);border-color:transparent;border-radius:50%}
.cring.view span{opacity:1}
.cring.hide{opacity:0}
@media (hover:none),(max-width:900px){.cur,.cring{display:none}}

/* loader: cursive name, a hairline that fills, and a count to 100 */
.loader{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;background:var(--ink);color:var(--paper);transition:clip-path 1.3s var(--ease);clip-path:inset(0)}
.loader.out{clip-path:inset(0 0 100% 0)}
.ldr{display:flex;flex-direction:column;align-items:center;width:min(640px,calc(100vw - 32px));transition:opacity .7s var(--out),transform 1.2s var(--ease)}
.loader.out .ldr{opacity:0;transform:translateY(-40px)}
.ld-name{width:clamp(min(336px,100vw - 40px),54vw,830px);color:var(--paper);line-height:0;-webkit-mask-image:linear-gradient(90deg,#000 48.5%,transparent 51.5%);mask-image:linear-gradient(90deg,#000 48.5%,transparent 51.5%);-webkit-mask-size:200% 100%;mask-size:200% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;animation:sigWrite 2.4s cubic-bezier(.3,.1,.55,1) .2s forwards}
.ld-name svg{display:block;width:100%;height:auto;overflow:visible}
.ld-name path{fill:currentColor}
@keyframes sigWrite{to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes sigStroke{to{stroke-dashoffset:0}}
@keyframes sigFill{to{fill-opacity:1}}
@keyframes ldName{to{opacity:1;filter:blur(0);transform:none}}
.ld-bar{position:relative;width:min(420px,78vw);height:1px;margin-top:clamp(30px,4.4vw,56px);background:rgba(245,242,237,.2);overflow:hidden;opacity:0;animation:fin .9s .55s forwards}
.ld-bar i{position:absolute;inset:0;background:var(--paper);transform:scaleX(0);transform-origin:left}
.ld-meta{width:min(420px,78vw);display:flex;justify-content:space-between;align-items:baseline;margin-top:20px;font-family:var(--sans);font-weight:400;text-transform:uppercase;color:rgba(245,242,237,.72);opacity:0;animation:fin .9s .75s forwards}
.ld-lbl{font-size:11.5px;letter-spacing:.5em}
.ld-num{font-size:10.5px;letter-spacing:.42em;margin-right:-.42em;font-variant-numeric:tabular-nums}
@keyframes fin{to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}

/* page transition: two panels meet, the FA monogram is unveiled, then they part */
.veil{position:fixed;inset:0;z-index:8500;pointer-events:none;display:grid;place-items:center;color:var(--paper)}
.veil .p{position:absolute;left:0;right:0;height:50.5%;background:var(--ink);transition:transform .9s var(--ease)}
.veil .p.t{top:0;transform:translateY(-101%)}.veil .p.b{bottom:0;transform:translateY(101%)}
.veil.cover .p{transform:none}
.veil.leave .p.t{transform:translateY(-101%)}.veil.leave .p.b{transform:translateY(101%)}
.veil .vm{position:relative;width:clamp(78px,8.4vw,118px);opacity:0;visibility:hidden;transition:opacity .45s var(--out),transform .6s var(--out),visibility 0s .6s}
.veil.cover .vm{opacity:1;visibility:visible;transition:opacity .2s,transform .6s var(--out),visibility 0s}
.veil.cover.leave .vm{opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .45s var(--out),transform .6s var(--out),visibility 0s .6s}
/* FA monogram written like a signature: a pen path uncovers each stroke in order */
.fasig{display:block;width:100%;height:auto;overflow:visible}
.fasig .pen path{stroke-dasharray:1;stroke-dashoffset:1}
.sig-on .fasig .pen path{animation:sigStroke calc(var(--t) * var(--sd,1.5s)) cubic-bezier(.5,.1,.4,1) calc(var(--d) * var(--sd,1.5s)) forwards}
.veil .vm{--sd:1.15s}
@media (prefers-reduced-motion:reduce){.ld-name,.ld-bar,.ld-meta{animation:none!important;opacity:1;filter:none;transform:none;-webkit-mask-image:none;mask-image:none}.fasig .pen path{animation:none!important;stroke-dashoffset:0}.veil .vm{transform:none}}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:70;transition:transform .9s var(--ease);background:var(--ink);color:var(--paper)}
.topbar{background:var(--paper);color:var(--ink);text-align:center;padding:10px 0;font-family:var(--sans);font-size:10px;letter-spacing:.42em;text-transform:uppercase;overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line)}
.topbar .tick{display:inline-flex;gap:60px;animation:tick 34s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px var(--pad);transition:padding .6s var(--ease)}
.hdr.solid{background:var(--ink)}
.hdr.solid .hdr-in{padding-top:13px;padding-bottom:13px}
.hdr.hidden{transform:translateY(-110%)}
.hdr.pre{transform:translateY(-110%)}
.hdr .side{display:flex;gap:30px;align-items:center}
.hdr .side.r{justify-content:flex-end}
.hdr .side a{font-family:var(--wide);font-stretch:115%;font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase}
.famark{display:block;background:currentColor;-webkit-mask:url(img/fa-logo.png) center/contain no-repeat;mask:url(img/fa-logo.png) center/contain no-repeat;aspect-ratio:700/654}
.logo{display:flex;flex-direction:column;align-items:center;gap:6px;line-height:1}
.logo .famark{width:40px;transition:width .6s var(--ease)}
.hdr.solid .logo .famark{width:32px}
.logo span{font-family:var(--sans);font-weight:500;font-size:8px;letter-spacing:.55em;padding-left:.55em}
.hdr .cta{border:1px solid currentColor;border-radius:50%;padding:10px 22px!important}
.mbtn{display:flex;align-items:center;gap:12px;font-family:var(--wide);font-stretch:115%;font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase}
.mbtn .bars{width:28px;height:9px;position:relative}
.mbtn .bars i{position:absolute;left:0;right:0;height:1.2px;background:currentColor;transition:transform .6s var(--ease),width .6s var(--ease)}
.mbtn .bars i:first-child{top:0}.mbtn .bars i:last-child{bottom:0;width:62%;left:auto}
.mbtn:hover .bars i:last-child{width:100%}
@media (max-width:1100px){.hdr .side.l a,.hdr .side.r a{display:none}}

/* MENU — split-shutter with oval preview */
.menu{position:fixed;inset:0;z-index:8000;visibility:hidden;color:var(--paper)}
.menu.open{visibility:visible}
.menu .sh{position:absolute;left:0;right:0;height:50.5%;background:var(--ink);transition:transform 1s var(--ease)}
.menu .sh.t{top:0;transform:translateY(-101%)}.menu .sh.b{bottom:0;transform:translateY(101%)}
.menu.open .sh{transform:none}
.mtop{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad);z-index:3;opacity:0;transition:opacity .4s}
.menu.open .mtop{opacity:1;transition-delay:.6s}
.menu .close .bars i:first-child{top:4px;transform:rotate(16deg)}
.menu .close .bars i:last-child{bottom:4px;width:100%;transform:rotate(-16deg)}
.mbody{position:relative;height:100%;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:4vw;padding:100px var(--pad) 90px;overflow-y:auto;opacity:0;transition:opacity .4s}
.menu.open .mbody{opacity:1;transition-delay:.45s}
.mlist{list-style:none}
.mlist li{overflow:hidden;border-bottom:1px solid var(--line-l)}
.mlist li:first-child{border-top:1px solid var(--line-l)}
.mlist a{display:grid;grid-template-columns:60px 1fr auto;align-items:baseline;gap:10px;padding:clamp(6px,1vh,12px) 0;font-family:var(--serif);font-size:clamp(32px,min(4.4vw,6.6vh),72px);line-height:1.05;letter-spacing:-.01em;transform:translateY(105%);transition:transform 1.1s var(--out),padding .6s var(--out),color .4s}
.menu.open .mlist a{transform:none}
.mlist a small{font-family:var(--wide);font-stretch:118%;font-size:10px;letter-spacing:.26em;color:var(--mist);font-weight:500}
.mlist a .tag{font-family:var(--wide);font-stretch:118%;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mist);font-weight:500;opacity:0;transform:translateX(-10px);transition:all .6s var(--out)}
.mlist a:hover{padding-left:22px;font-style:italic}
.mlist a:hover .tag{opacity:1;transform:none}
.mlist:hover a:not(:hover){color:rgba(246,245,242,.32)}
.mside{display:flex;flex-direction:column;align-items:center;gap:28px}
.moval{position:relative;width:min(360px,30vw);aspect-ratio:3/4.1;border-radius:50%;overflow:hidden;background:var(--ink-2);transform:scale(.85) rotate(-6deg);opacity:0;transition:transform 1.4s var(--out),opacity 1s}
.menu.open .moval{transform:none;opacity:1;transition-delay:.55s}
.moval img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.15);transition:opacity .9s var(--out),transform 1.6s var(--out)}
.moval img.on{opacity:1;transform:none}
.moval .lbl{position:absolute;left:0;right:0;bottom:16%;text-align:center;font-family:var(--serif);font-style:italic;font-size:30px;color:var(--paper);text-shadow:0 2px 20px rgba(0,0,0,.5)}
.mside .more{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.mside .more a{font-family:var(--wide);font-stretch:115%;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mist);font-weight:500;transition:color .4s}
.mside .more a:hover{color:var(--paper)}
.mfoot{position:absolute;left:var(--pad);right:var(--pad);bottom:22px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;opacity:0;transition:opacity .6s}
.menu.open .mfoot{opacity:1;transition-delay:.9s}
@media (max-width:900px){.mbody{grid-template-columns:1fr;padding-top:90px;padding-bottom:120px}.mside .moval{display:none}.mlist a{font-size:clamp(34px,10vw,52px);grid-template-columns:40px 1fr}.mlist a .tag{display:none}}

/* socials */
.soc{display:flex;gap:12px}
.soc a{width:40px;height:40px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;opacity:.85;transition:all .6s var(--out)}
.soc a:hover{opacity:1;transform:translateY(-4px);background:var(--paper);color:var(--ink)}
.soc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* pages */
.page{display:none}.page.active{display:block}

/* ===== HOME HERO ===== */
.hero{position:relative;min-height:100vh;padding:clamp(170px,19vh,210px) var(--pad) 0;overflow:hidden}
.hero .top{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px}
.hero .top .k{color:var(--stone)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,7.6vw,140px);line-height:.96;letter-spacing:-.01em;text-transform:uppercase;text-align:center;margin-top:clamp(20px,3vh,40px)}
.hero h1 .l2{display:block;font-style:italic}
.hero h1 .l3{display:block}
.hero h1 .script{font-size:.5em;letter-spacing:0;display:inline-block;transform:translateY(-.1em);margin:0 .06em}
.hero .sub{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:40px;align-items:start;margin-top:clamp(28px,4vh,50px)}
.hero .sub p{max-width:360px}
.hero .sub .c{text-align:center}
.hero .sub .r{display:flex;justify-content:flex-end}
@media (max-width:900px){.hero .top{grid-template-columns:1fr;text-align:center}.hero .top>:not(.c){display:none}.hero .sub{grid-template-columns:1fr;text-align:center}.hero .sub p{margin:0 auto}.hero .sub .r{justify-content:center}}
/* fanned mockup deck */
.deck{position:relative;height:calc(clamp(250px,27vw,460px) * 1.25 + 90px);margin-top:clamp(40px,6vh,70px);perspective:1800px}
.deck .card{position:absolute;left:50%;top:0;width:clamp(250px,27vw,460px);aspect-ratio:1399/1750;margin-left:calc(clamp(250px,27vw,460px) / -2);border-radius:6px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(33,31,30,.45);transition:transform 1.4s var(--out),box-shadow .8s;will-change:transform;cursor:pointer;background:#f6f5f1}
.deck .card img{width:100%;height:100%;object-fit:cover}
.deck .card .tagc{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(transparent,rgba(33,31,30,.75));color:var(--paper);display:flex;justify-content:space-between;align-items:end;opacity:0;transition:opacity .6s}
.deck .card:hover .tagc{opacity:1}
.deck .card .tagc b{font-family:var(--serif);font-weight:400;font-size:26px}
@media (max-width:760px){.deck{height:calc(52vw * 1.25 + 60px)}.deck .card{width:52vw;margin-left:-26vw}}

/* marquee */
.marq{overflow:hidden;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marq .tr{display:flex;width:max-content;animation:marq 40s linear infinite;align-items:center}
.marq span{font-family:var(--serif);font-size:clamp(34px,4.4vw,70px);line-height:1;padding:0 .5em;white-space:nowrap}
.marq span:nth-child(4n+3){font-style:italic}
.marq i{width:9px;height:9px;border:1px solid currentColor;border-radius:50%;flex-shrink:0}
@keyframes marq{to{transform:translateX(-50%)}}

/* intro statement */
.intro{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(40px,7vw,120px);align-items:start}
.intro h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,70px);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.intro h2 em{font-style:italic}
.intro .copy p+p{margin-top:18px}
.intro .sig{font-family:var(--script);font-size:clamp(40px,4vw,60px);margin-top:28px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:50px;border-top:1px solid var(--line)}
.stats div{padding:26px 20px 0 0}
.stats b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(44px,4.4vw,72px);line-height:1}
@media (max-width:900px){.intro{grid-template-columns:1fr}}

/* product covers (collection) */
.coll-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(50px,6vw,90px)}
.coll{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2vw,30px)}
.pc{position:relative;display:block}
.pc .cv{position:relative;overflow:hidden;background:var(--ink)}
.pc .cv img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--out),filter 1s}
.pc .cv::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(33,31,30,.12),rgba(33,31,30,.42))}
.pc:hover .cv img{transform:scale(1.06)}
.pc .nm{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;text-align:center;color:#fff;font-family:var(--serif);font-weight:400;text-transform:uppercase;font-size:clamp(28px,4vw,72px);padding:0 6%;line-height:.9;letter-spacing:-.01em;text-shadow:0 2px 30px rgba(0,0,0,.3);pointer-events:none;transition:letter-spacing 1s var(--out)}
.pc:hover .nm{letter-spacing:.03em}
.pc .nm em{display:block;font-family:var(--script);text-transform:none;font-size:.42em;letter-spacing:0;margin-top:.15em}
.pc .corner{position:absolute;z-index:2;color:#fff;font-size:12px}
.pc .c1{top:18px;left:20px}.pc .c2{top:18px;right:20px}.pc .c3{bottom:18px;left:20px}.pc .c4{bottom:18px;right:20px}
.pc .c1,.pc .c4{font-style:italic;font-family:var(--serif);font-size:16px}
.pc .c2,.pc .c3{font-family:var(--wide);font-stretch:118%;font-size:9px;letter-spacing:.3em;text-transform:uppercase;font-weight:500}
.pc .meta{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:18px;margin-top:18px;border-top:1px solid var(--line)}
.pc .meta b{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2vw,32px)}
.pc.a{grid-column:1/8}.pc.a .cv{aspect-ratio:4/4.6}
.pc.b{grid-column:8/13;margin-top:18vw}.pc.b .cv{aspect-ratio:3/4.2}
.pc.c{grid-column:2/7}.pc.c .cv{aspect-ratio:3/4.1}
.pc.d{grid-column:7/13;margin-top:10vw}.pc.d .cv{aspect-ratio:4/4.5}
.pc.e{grid-column:3/11;margin-top:6vw}.pc.e .cv{aspect-ratio:16/10.5}
@media (max-width:820px){.coll{grid-template-columns:1fr}.pc{grid-column:1/-1!important;margin:0!important}.pc .cv{aspect-ratio:4/5!important}}

/* paths (start here) */
.paths{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-l)}
.paths a{display:flex;flex-direction:column;padding:clamp(34px,4vw,60px) clamp(20px,2.6vw,44px) clamp(40px,4vw,60px);border-right:1px solid var(--line-l);min-height:440px;position:relative;overflow:hidden;transition:background .8s var(--out)}
.paths a:last-child{border-right:0}
.paths a:hover{background:rgba(246,245,242,.05)}
.paths .n{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--mist)}
.paths h3{font-family:var(--serif);font-weight:400;font-size:clamp(38px,3.6vw,60px);line-height:.95;margin:auto 0 18px}
.paths p{color:var(--mist);max-width:340px}
.paths .tl{margin-top:30px}
.paths a .img{position:absolute;right:-20px;top:-20px;width:46%;aspect-ratio:3/4;border-radius:50%;overflow:hidden;opacity:0;transform:scale(.8) rotate(8deg);transition:all 1.1s var(--out)}
.paths a:hover .img{opacity:.9;transform:scale(1) rotate(4deg)}
.paths a .img img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.paths{grid-template-columns:1fr}.paths a{border-right:0;border-bottom:1px solid var(--line-l);min-height:300px}.paths a .img{display:none}}

/* tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);align-items:stretch}
.tier{border:1px solid var(--line);padding:clamp(30px,3vw,48px);display:flex;flex-direction:column;background:var(--paper);position:relative;transition:transform 1s var(--out),box-shadow 1s var(--out)}
.tier:hover{transform:translateY(-10px);box-shadow:0 40px 80px -40px rgba(33,31,30,.3)}
.tier.feat{color:var(--paper);border-color:var(--ink);background-color:var(--ink)}
.tier .lvl{display:flex;justify-content:space-between;align-items:center}
.tier h3{font-family:var(--serif);font-weight:400;font-size:clamp(38px,3.4vw,58px);line-height:.95;margin:30px 0 10px}
.tier h3 em{font-style:italic}
.tier .price{font-family:var(--serif);font-size:clamp(32px,2.8vw,46px);line-height:1;margin:22px 0 4px}
.tier .when{font-size:14px}
.tier ul{list-style:none;margin:28px 0 36px;flex:1}
.tier li{padding:11px 0 11px 26px;border-bottom:1px solid var(--line);font-size:15px;position:relative}
.tier li::before{content:"";position:absolute;left:2px;top:20px;width:12px;height:1px;background:currentColor;opacity:.6}
.tier.feat li{border-color:var(--line-l)}
.tier .badge{position:absolute;top:-1px;right:-1px;background:var(--paper);color:var(--ink);padding:9px 14px}
@media (max-width:980px){.tiers{grid-template-columns:1fr}}

/* quiz teaser + quiz */
.qt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center}
.qt .ovl{aspect-ratio:3/4;border-radius:50%;overflow:hidden;max-width:440px;margin:0 auto;position:relative}
.qt .ovl img{width:100%;height:100%;object-fit:cover}
.qt .ovl .spin{position:absolute;inset:-14%;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){.qt{grid-template-columns:1fr}}
.quiz{max-width:980px;margin:0 auto}
.qprog{display:flex;gap:6px;margin-bottom:46px}
.qprog i{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
.qprog i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.qprog i.done::after{transform:scaleX(1)}
.qstage{position:relative;min-height:520px}
.qstage{overflow:hidden}
.qcard{position:absolute;inset:0;opacity:0;transform:translateX(60px);pointer-events:none;transition:opacity .8s var(--out),transform 1s var(--out)}
.qcard.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.qcard.gone{opacity:0;transform:translateX(-60px)}
.qcard h3{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.6vw,72px);line-height:1;letter-spacing:-.02em;margin:16px 0 40px}
.qcard h3 em{font-style:italic}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qopt{text-align:left;border:1px solid var(--line);padding:24px 26px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;transition:all .6s var(--out);background:var(--paper)}
.qopt:hover{border-color:var(--ink);transform:translateY(-3px)}
.qopt.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.qopt .let{width:40px;height:40px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:20px}
.qopt b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.1}
.qopt span{font-size:14px;opacity:.75}
.qopt .chips{display:flex;gap:6px;margin-top:8px}
.qopt .chips i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.qnav{display:flex;justify-content:space-between;align-items:center;margin-top:36px}
@media (max-width:700px){.qopts{grid-template-columns:1fr}.qstage{min-height:0}}
.qres{display:none}
.qres.on{display:block;animation:rise 1.2s var(--out)}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.qres .hdl{text-align:center}
.qres .hdl .script{font-size:clamp(46px,5vw,80px)}
.qres .hdl h3{font-family:var(--serif);font-weight:400;text-transform:uppercase;font-size:clamp(34px,6vw,104px);line-height:.88;letter-spacing:-.03em}
.qres .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);margin-top:60px}
.qres .grid>div{padding:30px 26px 30px 0;border-right:1px solid var(--line)}
.qres .grid>div+div{padding-left:26px}
.qres .grid>div:last-child{border-right:0}
.qres .pal{display:flex;gap:8px;margin-top:14px}
.qres .pal i{width:44px;height:44px;border-radius:50%;border:1px solid var(--line)}
.qres .fontpair b{font-family:var(--serif);font-weight:400;font-size:34px;display:block;line-height:1.1}
.qres .words{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.qres .words span{border:1px solid var(--line);border-radius:50%;padding:8px 18px;font-family:var(--serif);font-style:italic;font-size:18px}
.qres .rec{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center;margin-top:70px}
.qres .rec .ph{aspect-ratio:1399/1750}
@media (max-width:900px){.qres .grid{grid-template-columns:1fr}.qres .grid>div{border-right:0;border-bottom:1px solid var(--line);padding:24px 0!important}.qres .rec{grid-template-columns:1fr}}

/* netlify */
.why{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,7vw,120px)}
.wlist{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-l)}
.wlist div{padding:30px 26px 30px 0;border-bottom:1px solid var(--line-l)}
.wlist div:nth-child(odd){border-right:1px solid var(--line-l)}
.wlist div:nth-child(even){padding-left:26px}
.wlist b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;margin:10px 0 8px}
.wlist .n{font-family:var(--serif);font-style:italic;color:var(--mist)}
@media (max-width:900px){.why{grid-template-columns:1fr}.wlist{grid-template-columns:1fr}.wlist div{border-right:0!important;padding-left:0!important}}

/* FAQ (image 3 style) */
.faqh{text-align:center;margin-bottom:50px}
.faqh .script{font-size:clamp(54px,6vw,96px)}
.qa{border-top:1px solid var(--line-l);max-width:1200px;margin:0 auto}
.qa:last-of-type{border-bottom:1px solid var(--line-l)}
.qa button{width:100%;display:grid;grid-template-columns:1.25fr 1fr 30px;gap:40px;align-items:center;text-align:left;padding:clamp(28px,3vw,44px) 20px}
.qa h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,58px);line-height:.98;letter-spacing:-.03em;transition:font-style .3s}
.qa button:hover h3{font-style:italic}
.qa .peek{font-size:14.5px;opacity:.85;line-height:1.8}
.qa .pm{width:18px;height:18px;position:relative}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .6s var(--ease)}
.qa .pm::after{transform:rotate(90deg)}
.qa.open .pm::after{transform:rotate(0)}
.qa .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.qa.open .body{grid-template-rows:1fr}
.qa .body>div{overflow:hidden}
.qa .body p{padding:0 20px 34px;margin-left:calc(55.5% + 6px);max-width:560px;font-size:15px;opacity:.9}
.faq-light .qa{border-color:var(--line)}
@media (max-width:900px){.qa button{grid-template-columns:1fr 24px;gap:16px}.qa .peek{display:none}.qa .body p{margin-left:0}}

/* blog oval cta (image 4) */
.ovcta{min-height:70vh;display:grid;place-items:center;text-align:center;padding:120px var(--pad)}
.ovcta .oval{white-space:normal;max-width:100%;font-size:clamp(12px,1.5vw,20px);padding:clamp(28px,3vw,40px) clamp(56px,6vw,90px);letter-spacing:.22em}

/* footer — Céleste Noor layout */
.ftr{padding-top:clamp(90px,9vw,140px);overflow:hidden;background:var(--ink);color:var(--paper)}
.ftr .big{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:end;padding-bottom:clamp(70px,8vw,120px);border-bottom:1px solid var(--line-l)}
.ftr .big h2{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.4vw,112px);line-height:.92;letter-spacing:-.02em}
.ftr .big h2 em{font-style:italic}
.news{display:flex;border-bottom:1px solid var(--line-l);margin-top:14px}
.news input{flex:1;min-width:0;background:none;border:0;color:var(--paper);font-family:var(--body);font-size:22px;padding:14px 0;outline:none}
.news input::placeholder{color:var(--mist);font-style:italic}
.news button{font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500}
.fbrand{text-align:center;padding-top:clamp(70px,8vw,120px)}
.fbrand .famark{width:clamp(84px,9vw,120px);margin:0 auto}
.fsig{display:block;width:clamp(96px,9.5vw,134px);margin:0 auto;--sd:2.1s}
.fsig+.tag{margin-top:clamp(28px,2.6vw,38px)}
.fbrand .nm{font-family:var(--serif);font-size:clamp(26px,2.8vw,38px);letter-spacing:.08em;text-transform:uppercase;margin-top:26px}
.fbrand .tag{font-family:var(--sans);font-weight:300;font-size:clamp(16px,1.4vw,20px);margin-top:16px;color:var(--mist)}
.fbrand .soc{justify-content:center;margin-top:26px}
.fgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1340px;margin:clamp(50px,6vw,90px) auto 0}
.fgrid .ph{aspect-ratio:1/1.05;background:var(--ink-2);display:block}
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1340px;margin:clamp(56px,6vw,90px) auto 0}
.fcols h4{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.fcols ul{list-style:none}
.fcols li{font-family:var(--sans);font-weight:300;font-size:16px;line-height:2.1;color:var(--mist)}
.fcols li a:hover{color:var(--paper)}
.giant{white-space:nowrap;font-family:var(--serif);font-weight:400;font-size:clamp(100px,17vw,300px);line-height:.86;text-transform:uppercase;margin-top:clamp(60px,7vw,110px);display:flex;width:max-content;animation:marq 42s linear infinite}
.giant span{padding-right:.35em}
.giant em{font-family:var(--script);text-transform:none;font-style:normal;font-size:.7em;padding:0 .12em}
.credit{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:32px var(--pad);margin-top:clamp(40px,4vw,60px);border-top:1px solid var(--line-l);font-size:14px;color:var(--mist)}
@media (max-width:900px){.ftr .big{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr 1fr;max-width:480px;gap:16px}.fcols{grid-template-columns:1fr 1fr;max-width:480px;gap:30px 20px}.fcols>div:last-child{grid-column:1/-1}.credit{justify-content:center;text-align:center}}

/* PORTFOLIO — scattered editorial with reveals */
.pfilt{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-bottom:clamp(50px,6vw,90px)}
.pfilt button{font-family:var(--sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--stone);transition:color .4s}
.pfilt button.on,.pfilt button:hover{color:var(--ink)}
.pfg{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(40px,4vw,70px) clamp(16px,1.8vw,30px);align-items:start}
.pfg figure{transition:opacity .8s var(--out)}
.pfg figure.dim{opacity:.1}
.pfg .ph{width:100%}
.pfg figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--stone)}
.pfg figcaption span{display:none}
.pfg figcaption b{font-family:var(--body);font-style:italic;font-weight:400;font-size:17px;letter-spacing:0;text-transform:none;color:var(--ink)}
.p1{grid-column:1/5}.p1 .ph{aspect-ratio:4/5}
.p2{grid-column:6/9;margin-top:12vw}.p2 .ph{aspect-ratio:3/4}
.p3{grid-column:10/13;margin-top:3vw}.p3 .ph{aspect-ratio:3/4.2}
.p4{grid-column:2/7;margin-top:3vw}.p4 .ph{aspect-ratio:16/12}
.p5{grid-column:8/11;margin-top:6vw}.p5 .ph{aspect-ratio:3/4}
.p6{grid-column:1/4;margin-top:4vw}.p6 .ph{aspect-ratio:3/4}
.p7{grid-column:5/9;margin-top:2vw}.p7 .ph{aspect-ratio:4/5}
.p8{grid-column:10/13;margin-top:10vw}.p8 .ph{aspect-ratio:3/4}
.p9{grid-column:3/6;margin-top:2vw}.p9 .ph{aspect-ratio:3/4.3}
.p10{grid-column:7/12;margin-top:3vw}.p10 .ph{aspect-ratio:16/11}
.p11{grid-column:1/5;margin-top:4vw}.p11 .ph{aspect-ratio:4/5}
.p12{grid-column:6/9;margin-top:14vw}.p12 .ph{aspect-ratio:3/4}
.p13{grid-column:10/13}.p13 .ph{aspect-ratio:3/4.4}
.p14{grid-column:2/6;margin-top:2vw}.p14 .ph{aspect-ratio:1/1}
.p15{grid-column:7/10;margin-top:6vw}.p15 .ph{aspect-ratio:3/4}
.p16{grid-column:5/9;margin-top:9vw}.p16 .ph{aspect-ratio:4/5}
.p17{grid-column:5/9;margin-top:4vw}.p17 .ph{aspect-ratio:4/5}
.p18{grid-column:9/12;margin-top:8vw}.p18 .ph{aspect-ratio:3/4}
.ri.rl img{clip-path:inset(0 0 0 100%)}
.ri.lr img{clip-path:inset(0 100% 0 0)}
.ri.rl.is-in img,.ri.lr.is-in img{clip-path:inset(0)}
.pf-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center}
.pf-split .ph{aspect-ratio:4/5}
@media (max-width:760px){.pfg{grid-template-columns:1fr 1fr;gap:34px 18px}.pfg figure{grid-column:auto!important;margin:0!important;translate:none!important}.pfg figure .ph{aspect-ratio:3/4!important}.pfg figure:nth-child(5n){grid-column:1/-1!important}.pfg figure:nth-child(5n) .ph{aspect-ratio:4/3!important}.pfg figure:last-child:nth-child(5n+1){grid-column:1/-1!important}.pfg figure:last-child:nth-child(5n+1) .ph{aspect-ratio:4/3!important}.pf-split{grid-template-columns:1fr}}

/* page heroes */
.phero{padding:clamp(180px,16vw,240px) var(--pad) clamp(50px,6vw,90px)}
.phero .k{color:var(--stone)}
.phero h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,7.4vw,136px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;margin-top:22px}
.phero h1 em{font-style:italic}
.phero .row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.phero p{max-width:480px}

/* shop */
.filt{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:60px}
.filt button{border:1px solid var(--line);border-radius:50%;padding:12px 24px;font-family:var(--wide);font-stretch:115%;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;transition:all .5s var(--out)}
.filt button.on,.filt button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.shopgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px) clamp(20px,3vw,50px)}
.shopgrid .pc{transition:opacity .6s}
.shopgrid .pc.dim{opacity:.15;pointer-events:none}
.shopgrid .pc .cv{aspect-ratio:4/4.4}
.shopgrid .pc:nth-child(even){margin-top:120px}
.soon{border:1px dashed var(--line);display:grid;place-items:center;text-align:center;aspect-ratio:4/4.4;padding:30px}
@media (max-width:820px){.shopgrid{grid-template-columns:1fr}.shopgrid .pc:nth-child(even){margin-top:0}}

/* TEMPLATE PAGE */
.tp-hero{position:relative;height:100vh;min-height:640px;overflow:hidden;color:#fff;display:grid;place-items:center;text-align:center}
.tp-hero>img{position:absolute;inset:-8% 0;width:100%;max-width:none;height:116%;object-fit:cover}
.tp-hero{contain:paint}
.tp-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,18,17,.35),rgba(20,18,17,.55));z-index:1}
.tp-hero .in{position:relative;z-index:2;padding:0 var(--pad)}
.tp-hero .nm{font-family:var(--serif);font-weight:400;text-transform:uppercase;font-size:clamp(30px,8.4vw,170px);line-height:.84;letter-spacing:-.02em}
.tp-hero .tg{font-family:var(--script);font-size:clamp(34px,4vw,62px);margin-top:.2em}
.tp-hero .k{opacity:.85}
.tp-hero .bt{position:absolute;bottom:40px;left:var(--pad);right:var(--pad);z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.tp-buy{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center}
.tp-buy .mk{aspect-ratio:1399/1750;background:#f6f5f1;overflow:hidden;cursor:pointer}
.tp-buy .mk img{width:100%;height:100%;object-fit:cover}
.tp-buy h2{font-family:var(--serif);font-weight:400;text-transform:uppercase;font-size:clamp(34px,4.6vw,80px);line-height:.88;letter-spacing:-.03em;margin:18px 0 26px}
.tp-buy .price{font-family:var(--serif);font-size:30px;margin-bottom:22px}
.tp-buy .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.tp-buy .pol{margin-top:22px;font-size:13.5px}
.tp-buy .pol a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.tp-buy{grid-template-columns:1fr}}
.tp-pages{columns:3;column-gap:50px}
.tp-pages p{break-inside:avoid;display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-l)}
.tp-pages p small{font-family:var(--serif);font-style:italic;color:var(--mist);min-width:26px}
@media (max-width:900px){.tp-pages{columns:1}}
.tp-feat{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.tp-feat div{padding:34px 24px 34px 0;border-right:1px solid var(--line)}
.tp-feat div+div{padding-left:24px}.tp-feat div:last-child{border-right:0}
.tp-feat b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;margin:12px 0 8px}
@media (max-width:900px){.tp-feat{grid-template-columns:1fr 1fr}.tp-feat div{padding:24px 14px!important;border-bottom:1px solid var(--line)}}
.tp-gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,22px);align-items:start}
.tp-gal .g1{grid-column:1/6;aspect-ratio:3/4}.tp-gal .g2{grid-column:6/10;aspect-ratio:3/4.2;margin-top:10vw}.tp-gal .g3{grid-column:10/13;aspect-ratio:3/4;margin-top:4vw}.tp-gal .g4{grid-column:3/9;aspect-ratio:16/10;margin-top:-4vw}
@media (max-width:760px){.tp-gal{grid-template-columns:1fr 1fr}.tp-gal>*{grid-column:auto!important;margin:0!important;aspect-ratio:3/4!important}}
.pal-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.pal-row div{text-align:center}
.pal-row i{display:block;width:68px;height:68px;border-radius:50%;border:1px solid var(--line);margin-bottom:8px}
.perfect{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.perfect span{border:1px solid var(--line);border-radius:50%;padding:10px 20px;font-family:var(--serif);font-style:italic;font-size:19px}
.opts3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.opt{border:1px solid var(--line-l);padding:clamp(28px,3vw,44px);display:flex;flex-direction:column}
.opt h3{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3vw,50px);line-height:1;margin:22px 0 12px}
.opt .price{font-family:var(--serif);font-size:32px;margin:6px 0 16px}
.opt ul{list-style:none;margin:10px 0 30px;flex:1}
.opt li{padding:9px 0;border-bottom:1px solid var(--line-l);font-size:14.5px;color:var(--mist)}
@media (max-width:980px){.opts3{grid-template-columns:1fr}}
.nextt{display:block;text-align:center;padding:clamp(90px,10vw,160px) var(--pad);position:relative;overflow:hidden}
.nextt h3{font-family:var(--serif);font-weight:400;font-size:clamp(36px,7.4vw,140px);text-transform:uppercase;line-height:.86;letter-spacing:-.02em;transition:letter-spacing 1s var(--out)}
.nextt:hover h3{letter-spacing:.02em;font-style:italic}

/* semi-custom details */
.inc{display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
.inc div{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:24px 0;border-bottom:1px solid var(--line)}
.inc .n{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--stone)}
.inc b{font-family:var(--serif);font-weight:400;font-size:24px;display:block;line-height:1.15;margin-bottom:4px}
.yn{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,30px)}
.yn>div{border:1px solid var(--line);padding:clamp(28px,3vw,46px)}
.yn h4{font-family:var(--serif);font-weight:400;font-size:34px;margin-bottom:14px}
.yn li{list-style:none;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.steps div{border-top:1px solid var(--line-l);padding-top:22px}
.steps b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;margin:10px 0 8px}
@media (max-width:900px){.inc,.yn,.steps{grid-template-columns:1fr}}

/* about */
.ab{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,7vw,120px);align-items:center}
.ab .ph{aspect-ratio:3/4;border-radius:50% 50% 0 0}
@media (max-width:900px){.ab{grid-template-columns:1fr}}

/* journal */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,40px)}
.jc .ph{aspect-ratio:4/5}
.jc h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.2vw,34px);line-height:1.1;margin-top:10px}
.jc:hover h3{font-style:italic}
.jc .meta{display:flex;gap:14px;margin-top:20px;color:var(--stone)}
@media (max-width:900px){.jgrid{grid-template-columns:1fr}}
.post{max-width:720px;margin:0 auto;padding:0 var(--pad)}
.post p{margin-bottom:1.3em;font-size:17.5px}
.post h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3vw,46px);line-height:1.05;margin:1.6em 0 .6em}
.post .pull{font-family:var(--serif);font-style:italic;font-size:clamp(30px,3vw,44px);line-height:1.15;text-align:center;padding:46px 0;margin:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* legal */
.legal{display:grid;grid-template-columns:260px 1fr;gap:clamp(30px,6vw,110px)}
.legal aside{position:sticky;top:160px;align-self:start}
.legal aside a{display:block;padding:7px 0;color:var(--stone);font-size:15px;transition:color .4s,padding .4s}
.legal aside a.on{color:var(--ink);padding-left:12px}
.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3vw,46px);line-height:1;margin:70px 0 18px;scroll-margin-top:120px}
.legal h2:first-child{margin-top:0}
.legal h3{font-family:var(--wide);font-stretch:115%;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin:26px 0 8px}
.legal p,.legal li{color:#4a4644;margin-bottom:1em;max-width:740px;font-size:15.5px}
.legal ul{padding-left:20px}
.legal .note{border:1px solid var(--line);padding:26px 28px;max-width:740px;margin:24px 0}
@media (max-width:900px){.legal{grid-template-columns:1fr}.legal aside{display:none}}

/* inquire */
.inq{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,7vw,120px)}
.fld{position:relative;margin-bottom:30px}
.fld input,.fld textarea,.fld select{width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:22px 0 10px;font-family:var(--serif);font-size:22px;color:var(--ink);outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.fld textarea{min-height:130px;resize:vertical}
.fld label{position:absolute;left:0;top:22px;font-family:var(--serif);font-size:21px;color:var(--stone);pointer-events:none;transition:all .5s var(--out)}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,.fld textarea:focus+label,.fld textarea:not(:placeholder-shown)+label{top:-4px;font-family:var(--wide);font-stretch:115%;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.fld::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.fld:focus-within::after{transform:scaleX(1)}
.fld.err::after{transform:scaleX(1);background:#9a4b42}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 34px}
.chips button{border:1px solid var(--line);border-radius:50%;padding:12px 22px;font-family:var(--wide);font-stretch:112%;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;transition:all .5s var(--out)}
.chips button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fnote{min-height:22px;margin-top:14px;color:#9a4b42;font-size:14px}
@media (max-width:900px){.inq,.row2{grid-template-columns:1fr}}

/* 404 / thanks */
.e404{min-height:100vh;display:grid;place-items:center;text-align:center;padding:140px var(--pad) 80px}
.e404 .big{font-family:var(--serif);font-size:clamp(120px,24vw,380px);line-height:.8;letter-spacing:-.05em}
.e404 .big em{font-style:italic}
.thanks{min-height:100vh;display:grid;place-items:center;text-align:center;padding:140px var(--pad)}
.thanks .script{font-size:clamp(100px,15vw,240px)}

/* purchase modal */
.pm-modal{position:fixed;inset:0;z-index:8800;display:grid;place-items:center;visibility:hidden;pointer-events:none;padding:20px}
.pm-modal.open{visibility:visible;pointer-events:auto}
.pm-modal .scrim{position:absolute;inset:0;background:rgba(33,31,30,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .8s var(--out)}
.pm-modal.open .scrim{opacity:1}
.pm-box{position:relative;background:var(--paper);width:min(620px,100%);max-height:90vh;overflow:auto;padding:clamp(30px,4vw,56px);transform:translateY(40px);opacity:0;transition:all 1s var(--out)}
.pm-modal.open .pm-box{transform:none;opacity:1;transition-delay:.1s}
.pm-box h3{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4vw,58px);line-height:.95;margin:14px 0 6px}
.pm-box ul{list-style:none;margin:22px 0;border-top:1px solid var(--line)}
.pm-box li{padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font-size:14.5px;position:relative}
.pm-box li::before{content:"";position:absolute;left:0;top:22px;width:10px;height:1px;background:var(--ink)}
.agree{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;margin:20px 0 26px;cursor:pointer}
.agree input{width:20px;height:20px;accent-color:#1a1817;flex-shrink:0;margin-top:2px}
.agree a{text-decoration:underline;text-underline-offset:3px}
.pm-box .x{position:absolute;top:18px;right:20px}
.pm-box .msg{font-size:13.5px;margin-top:14px;color:var(--stone)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

@media (max-width:520px){.oval{padding:20px 34px;letter-spacing:.18em}.ovcta .oval{padding:26px 34px}}
.tp-feat>div,.wlist>div,.stats>div{min-width:0;overflow-wrap:break-word}.tp-feat b{hyphens:auto}
@media (max-width:760px){.pfg figcaption{flex-direction:column;gap:2px;font-size:8.5px}.pfg figcaption b{font-size:15px}}

/* oval seal logo */
.faseal{position:relative;display:block;aspect-ratio:140/112}
.faseal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.faseal .famark{position:absolute;left:50%;top:50%;width:38%;transform:translate(-50%,-52%)}
.faseal text{letter-spacing:0}
.hdr-in{padding-top:6px!important;padding-bottom:6px!important}
.logo .faseal{width:108px;transition:width .6s var(--ease)}
.hdr.solid .logo .faseal{width:92px}
.hdr-in{padding-top:10px;padding-bottom:10px}
.hdr.solid .hdr-in{padding-top:6px;padding-bottom:6px}
.loader .lm .faseal{width:100%}
.loader .lm{width:min(220px,52vw)}
.fseal{display:block;width:clamp(150px,14vw,200px);margin:0 auto}
.faseal.lg .famark{width:34%}
@media (max-width:600px){.logo .faseal{width:88px}.hdr.solid .logo .faseal{width:78px}}

/* palm-shadow photo behind selected dark sections */
.shadowbg{position:relative;isolation:isolate}
.shadowbg::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(28,26,25,.86),rgba(28,26,25,.9)),url(img/palm-shadow.jpg) center/cover no-repeat}
.sb-hero::after{background:linear-gradient(180deg,rgba(28,26,25,.72) 0%,rgba(28,26,25,.8) 55%,rgba(28,26,25,.94) 100%),url(img/palm-shadow.jpg) center 30%/cover no-repeat}
.hero.tex .top .k{color:var(--mist)}
.hero.tex .deck .card{box-shadow:0 50px 90px -30px rgba(0,0,0,.7)}
.logo .famark{width:46px}
.hdr.solid .logo .famark{width:38px}
.hdr-in{padding-top:14px!important;padding-bottom:14px!important}
.hdr.solid .hdr-in{padding-top:10px!important;padding-bottom:10px!important}

/* roomier header bar, like Céleste Noor, with a hint of the palm shadow */
.hdr,.hdr.solid{background:var(--ink)}
.hdr-in{padding-top:24px!important;padding-bottom:24px!important}
.hdr.solid .hdr-in{padding-top:16px!important;padding-bottom:16px!important}
.logo .famark{width:56px}
.hdr.solid .logo .famark{width:46px}
.hdr .side{gap:38px}
.hdr .side a,.mbtn{font-size:11px;letter-spacing:.3em}
.hero{padding-top:clamp(200px,22vh,240px)}
.phero{padding-top:clamp(200px,17vw,260px)}
@media (max-width:600px){.hdr-in{padding-top:18px!important;padding-bottom:18px!important}.logo .famark{width:48px}}

/* homepage strip — Céleste Noor style moving frames */
.strip{overflow:hidden;position:relative;padding:0 0 10px;background:var(--paper)}
.strack{display:flex;gap:10px;width:max-content;animation:marq 48s linear infinite}
.strack .fr{position:relative;flex-shrink:0;width:calc((100vw - 20px)/3);aspect-ratio:1399/1750;max-height:calc(100vh - 140px);overflow:hidden;background:var(--paper-2);display:block}
.strack .fr img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--out)}
.strack .fr:hover img{transform:scale(1.04)}
.strack .fr .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 22px;display:flex;justify-content:space-between;align-items:end;background:linear-gradient(transparent,rgba(28,26,25,.7));color:var(--paper);opacity:0;transform:translateY(10px);transition:all .7s var(--out)}
.strack .fr:hover .cap{opacity:1;transform:none}
.strack .fr .cap b{font-family:var(--serif);font-weight:400;font-size:26px;text-transform:uppercase;letter-spacing:.02em}
.scue{display:flex;align-items:center;justify-content:center;gap:16px;padding:26px 0 6px;color:var(--stone)}
.scue i{width:1px;height:40px;background:var(--line);position:relative;overflow:hidden}
.scue i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--ink);animation:cue2 2.2s var(--ease) infinite}
@keyframes cue2{to{top:100%}}
@media (max-width:760px){.strack .fr{width:72vw}}
.sb-deck::after{background:linear-gradient(180deg,rgba(28,26,25,.8),rgba(28,26,25,.88)),url(img/palm-shadow.jpg) center/cover no-repeat}
.deck-sec .deck{margin-top:clamp(50px,6vw,90px);margin-bottom:clamp(40px,5vw,70px)}
.deck-sec .deck .card{box-shadow:0 50px 90px -30px rgba(0,0,0,.7)}
.hero{min-height:auto;padding-bottom:clamp(50px,7vh,90px)}
.loader .lm{margin:0 auto}
@media (max-width:600px){.stats .k{letter-spacing:.24em;font-size:9px}}
.stats b{font-variant-numeric:tabular-nums lining-nums}

/* mobile deck carousel */
.deck-ui{display:none}
@media (max-width:759px){
  .deck{height:calc(64vw * 1.25 + 70px);touch-action:pan-y;user-select:none;-webkit-user-select:none}
  .deck .card{width:64vw;margin-left:-32vw;transition:transform .7s var(--out),opacity .5s}
  .deck.dragging .card{transition:none}
  .deck .card img{pointer-events:none;-webkit-user-drag:none}
  .deck-sec .deck{margin-bottom:24px}
  .deck-ui{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 auto 40px;max-width:420px}
  .dk-arr{width:46px;height:46px;border:1px solid rgba(245,242,237,.45);border-radius:50%;background:none;color:inherit;font-size:18px;flex:none;cursor:pointer}
  .dk-mid{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
  .dk-name{font-family:var(--serif);font-size:24px;line-height:1.1;text-transform:uppercase;letter-spacing:.04em}
  .dk-dots{display:flex;gap:8px}
  .dk-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.3;transition:opacity .4s,transform .4s}
  .dk-dots i.on{opacity:1;transform:scale(1.3)}
}

/* template hero slideshow */
.tp-slides{position:absolute;inset:-8% 0;overflow:hidden}
.tp-slides img{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover;opacity:0;transform:scale(1.07);transition:opacity 2.2s cubic-bezier(.45,0,.2,1),transform 9s cubic-bezier(.2,.6,.3,1)}
.tp-slides img.on{opacity:1;transform:scale(1);z-index:1}
.tp-slides img.was{z-index:0;opacity:1}
.tp-slides img[src*="hero-pm-4"]{object-position:50% 62%}
@media (prefers-reduced-motion:reduce){.tp-slides img{transform:none;transition:opacity 1.6s ease}}

/* payment plan note: quiet italic line beneath a price */
.plan{display:flex;align-items:flex-start;gap:12px;margin:12px 0 4px;font-family:var(--body);font-style:italic;font-size:17px;line-height:1.35;opacity:.78}
.plan::before{content:"";width:22px;height:1px;margin-top:.72em;background:currentColor;opacity:.5;flex:none}
.pm-plan{margin:8px 0 16px;font-size:16px}
.page .price + .plan.rv{margin-bottom:28px}
/* logo marks: geometric centring everywhere */
.hdr .logo .famark,.loader .lm .famark,.fbrand>.famark{transform:none}
.faseal .famark,.fbrand .faseal .famark,.loader .lm .faseal .famark{transform:translate(-50%,-50%)}
/* keep fanned cards from widening the page on phones */
.deck-sec{overflow:hidden}
html{overflow-x:clip}

/* ---------- services: editorial gallery ---------- */
.svc-gal-sec{padding-bottom:clamp(60px,8vw,130px)}
.svc-gal{position:relative;display:grid;grid-template-columns:repeat(12,1fr);align-items:start}
.svc-gal figure{margin:0}
.svc-gal .g1{grid-column:1/5;margin-top:6vw}.svc-gal .g1 .ph{aspect-ratio:3/4}
.svc-gal .g2{grid-column:5/10;padding:0 clamp(16px,2vw,34px)}.svc-gal .g2 .ph{aspect-ratio:4/5}
.svc-gal .g2 figcaption{margin-top:14px;text-align:center}
.svc-gal .g3{grid-column:10/13;margin-top:14vw}.svc-gal .g3 .ph{aspect-ratio:3/4}
.svc-script{position:absolute;left:3%;bottom:-2%;font-size:clamp(44px,5.2vw,92px);line-height:1;z-index:2;pointer-events:none;color:var(--ink)}
@media (max-width:760px){.svc-gal{grid-template-columns:1fr 1fr;gap:14px}.svc-gal .g1{grid-column:1/2;margin-top:18vw}.svc-gal .g2{grid-column:2/3;padding:0}.svc-gal .g3{display:none}.svc-gal .g2 figcaption{font-size:8px}.svc-script{position:static;grid-column:1/-1;text-align:center;margin-top:18px}}
/* ---------- services: process with image ---------- */
.proc{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,100px);align-items:center}
.proc-img{margin:0}.proc-img .ph{aspect-ratio:3/4;border-radius:999px 999px 0 0;overflow:hidden}
.proc .steps{grid-template-columns:1fr 1fr;gap:34px 30px}
@media (max-width:900px){.proc{grid-template-columns:1fr}.proc-img{max-width:420px;width:100%;margin:0 auto}.proc .steps{grid-template-columns:1fr}}
/* ---------- services: parallax band ---------- */
.svc-band{position:relative;height:clamp(460px,78vh,760px);overflow:hidden;contain:paint;color:var(--paper);display:grid;place-items:center;text-align:center}
.svc-band .ph{position:absolute;inset:0}
.svc-band img{position:absolute;inset:-10% 0;width:100%;height:120%;max-width:none;object-fit:cover}
.svc-band::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,18,17,.25),rgba(20,18,17,.55))}
.svc-band .in{position:relative;z-index:2;padding:0 var(--pad);display:flex;flex-direction:column;align-items:center;gap:22px}
.svc-band .disp{font-size:clamp(40px,6vw,96px);line-height:.95;text-transform:uppercase}
.svc-band .oval{color:var(--paper)}
/* ---------- quiz: flanking imagery ---------- */
.qwrap{position:relative}
.qflank{position:absolute;margin:0;z-index:0}
.qflank .ph{overflow:hidden}
.qflank.ql{left:max(2vw,calc(50% - 760px));top:40px;width:clamp(160px,15vw,250px)}
.qflank.ql .ph{aspect-ratio:3/4;border-radius:50%}
.qflank.qr{right:max(2vw,calc(50% - 760px));top:260px;width:clamp(150px,13vw,220px)}
.qflank.qr .ph{aspect-ratio:2/3}
.qflank .script{display:block;font-size:clamp(30px,2.6vw,44px);margin-top:10px;text-align:center}
.quiz{position:relative;z-index:1}
@media (max-width:1499px){.qflank{position:static;display:inline-block;vertical-align:top;width:calc(50% - 10px)!important;max-width:240px}.qwrap{text-align:center}.qwrap .quiz{text-align:left;margin-top:40px}.qflank.qr{margin-left:16px;margin-top:40px}.qflank .script{font-size:30px}}
.moval::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(20,18,17,.6));z-index:1;pointer-events:none}
.moval .lbl{z-index:2}
.svc-gal-sec{padding-bottom:clamp(110px,12vw,190px)}
.svc-script{left:2%;bottom:-90px;font-size:clamp(40px,3.8vw,66px)}
@media (max-width:760px){.svc-gal-sec{padding-bottom:70px}}
@media (min-width:1500px){
  .qflank.ql{left:auto;right:calc(50% + 540px);width:clamp(150px,calc(50vw - 580px),250px)}
  .qflank.qr{right:auto;left:calc(50% + 540px);width:clamp(140px,calc(50vw - 590px),230px)}
}
@media (max-width:1499px){.qflank{max-width:150px}.qflank .script{display:none}.qflank.qr{margin-top:30px}.qwrap .quiz{margin-top:30px}}

/* rotating mockups in the template buy frame */
.tp-buy .mk{position:relative}
.tp-buy .mkrot img{position:absolute;inset:0;opacity:0;transition:opacity 1.4s cubic-bezier(.45,0,.2,1)}
.tp-buy .mkrot img.on{opacity:1}
.tp-slides img{object-position:50% 22%}

/* homepage photo hero: image behind the opening, in the site's charcoal (--ink #1c1a19), slow premium zoom */
.hero-photo{padding-bottom:clamp(62px,8.5vh,108px)}
.hero-photo h1{margin-top:clamp(48px,6.5vh,72px)}
.hero-photo .hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--ink)}
.hero-photo .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:100% 0;transform-origin:100% 0;animation:heroDrift 28s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform}
.hero-photo .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,26,25,.42) 0%,rgba(28,26,25,.34) 40%,rgba(28,26,25,.6) 78%,rgba(28,26,25,.9) 100%)}
@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-photo .sub p{color:rgba(245,242,237,.82)}
.hero-photo .sub .c{padding-top:6px}

@media (prefers-reduced-motion:reduce){.hero-photo .hero-bg img{animation:none;transform:none}}

/* the FA Letter: silver tray pop-up */
.lt-modal{position:fixed;inset:0;z-index:8800;display:grid;place-items:center;visibility:hidden;pointer-events:none;padding:16px}
.lt-modal.open{visibility:visible;pointer-events:auto}
.lt-modal .scrim{position:absolute;inset:0;background:rgba(28,26,25,.28);backdrop-filter:blur(7px) saturate(.9);-webkit-backdrop-filter:blur(7px) saturate(.9);opacity:0;transition:opacity 1s var(--out)}
.lt-modal.open .scrim{opacity:1}
.lt-tray{position:relative;container-type:inline-size;width:min(560px,92vw,calc((100svh - 32px) * .639));aspect-ratio:713/1116;transform:translateY(46px) scale(.97);opacity:0;transition:transform 1.3s var(--out),opacity 1s var(--out)}
.lt-modal.open .lt-tray{transform:none;opacity:1;transition-delay:.12s}
.lt-img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35)) drop-shadow(0 6px 10px rgba(0,0,0,.25));pointer-events:none;user-select:none}
.lt-card{position:absolute;left:20%;top:22.8%;width:60%;height:54.6%;background:#151413;color:#f1ece4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 8.5cqw;box-shadow:0 2px 3px rgba(0,0,0,.5),0 14px 26px rgba(0,0,0,.35);
  background-image:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.05),transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px)}
.lt-card::before{content:"";position:absolute;inset:2.2cqw;border:1px solid rgba(214,208,198,.42);pointer-events:none}
.lt-k{font-family:var(--sans);font-size:max(8.5px,1.75cqw);letter-spacing:.42em;text-transform:uppercase;font-weight:400;color:#b9b2a8;padding-left:.42em}
.lt-card h3{font-family:var(--serif);font-weight:400;font-size:6.6cqw;line-height:1;letter-spacing:-.01em;margin:3.6cqw 0 0}
.lt-card h3 em{font-family:var(--script);font-style:normal;font-size:1.32em;line-height:.9;display:inline-block;margin-top:.5cqw;letter-spacing:0}
.lt-rule{display:block;width:9cqw;height:1px;background:rgba(214,208,198,.5);margin:3.4cqw 0 3cqw}
.lt-p{font-family:var(--body);font-size:max(13px,3cqw);line-height:1.42;color:#d6d0c6;max-width:36ch}
.lt-form{width:100%;margin-top:4.4cqw;display:flex;flex-direction:column;gap:2cqw}
.lt-form input{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(214,208,198,.45);color:#f1ece4;font-family:var(--body);font-size:max(15px,2.9cqw);padding:1.3cqw 0;text-align:center;border-radius:0;transition:border-color .4s}
.lt-form input::placeholder{color:#8b857d;font-style:italic}
.lt-form input:focus{border-color:#f1ece4;outline:none}
.lt-form button{margin-top:1.2cqw;background:#f1ece4;color:#151413;font-family:var(--sans);font-weight:500;font-size:max(9px,1.75cqw);letter-spacing:.32em;text-transform:uppercase;padding:2.5cqw 2cqw 2.5cqw calc(2cqw + .32em);transition:background .5s var(--ease),color .5s var(--ease);border:1px solid #f1ece4}
.lt-form button:hover{background:transparent;color:#f1ece4}
.lt-msg{min-height:1.4em;font-family:var(--body);font-style:italic;font-size:max(12.5px,2.4cqw);color:#b9b2a8;margin-top:1.4cqw}
.lt-no{font-family:var(--sans);font-size:max(8.5px,1.6cqw);letter-spacing:.3em;text-transform:uppercase;color:#8b857d;padding:.8cqw 0 0 .3em;transition:color .4s}
.lt-no:hover{color:#f1ece4}
.lt-x{position:absolute;top:6%;right:-1%;width:40px;height:40px;border-radius:50%;background:rgba(245,242,237,.92);color:var(--ink);font-size:13px;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .6s var(--out)}
.lt-x:hover{transform:rotate(90deg)}
@media (max-width:520px){
  .lt-modal .scrim{backdrop-filter:blur(6px) saturate(.9);-webkit-backdrop-filter:blur(6px) saturate(.9)}
  .lt-tray{width:min(292px,76vw,calc((100svh - 120px) * .639))}
  .lt-x{top:0;right:-4%;width:34px;height:34px;font-size:12px}
  .lt-card{left:16.5%;width:67%;top:21.6%;height:57.6%;padding:0 5.5cqw}
  .lt-card::before{inset:1.8cqw}
  .lt-k{font-size:7.5px;letter-spacing:.32em;padding-left:.32em}
  .lt-card h3{font-size:8cqw;margin-top:2.4cqw}
  .lt-rule{margin:2.8cqw 0 2.6cqw;width:10cqw}
  .lt-p{font-size:12px;line-height:1.35}
  .lt-long{display:none}
  .lt-form{margin-top:3.6cqw;gap:1.6cqw}
  .lt-form input{font-size:16px;padding:1cqw 0}
  .lt-form button{font-size:8px;letter-spacing:.24em;padding:3.4cqw 1cqw 3.4cqw calc(1cqw + .24em);margin-top:1.4cqw}
  .lt-msg{min-height:0;margin-top:1.4cqw;font-size:11.5px;line-height:1.3}
  .lt-msg:empty{display:none}
  .lt-no{font-size:7.5px;padding-top:2.6cqw}
}


/* homepage: photo runs up behind the menu; the menu turns solid charcoal once you scroll */
.hero-photo .top{grid-template-columns:1fr;justify-items:center}
.hdr{transition:transform .9s var(--ease),background-color .6s ease}
.hdr.over-hero{background:transparent}
.hdr.over-hero .hdr-in{background:linear-gradient(180deg,rgba(28,26,25,.35),rgba(28,26,25,0))}

/* phones: logo on the left of the menu bar */
@media (max-width:760px){.hdr-in{grid-template-columns:auto 1fr}.hdr .side.l{display:none}.hdr-in .logo{justify-self:start}}
@media (max-width:760px){.hero-photo .hero-bg img{object-position:50% 0;transform-origin:50% 0}.hero-photo .hero-bg::after{background:linear-gradient(180deg,rgba(28,26,25,.5) 0%,rgba(28,26,25,.48) 40%,rgba(28,26,25,.66) 78%,rgba(28,26,25,.9) 100%)}}

.hero-photo .hero-bg picture{display:block;width:100%;height:100%}

/* client testimonials (homepage) — quotes live in TESTIMONIALS in app.js */
.tm-head{margin-bottom:clamp(50px,6vw,90px)}
.tm-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-l)}
.tm{display:flex;flex-direction:column;padding:clamp(36px,4vw,60px) clamp(22px,2.8vw,48px) clamp(10px,2vw,20px);border-right:1px solid var(--line-l)}
.tm:last-child{border-right:0}
.tm::before{content:'\201C';font-family:var(--serif);font-style:italic;font-size:clamp(70px,6vw,96px);line-height:.6;color:var(--mist);opacity:.55;height:.45em}
.tm-stars{order:-1;font-size:11px;letter-spacing:.45em;color:var(--mist);margin-bottom:26px}
.tm blockquote p{font-family:var(--body);font-size:clamp(20px,1.6vw,24px);line-height:1.5;font-weight:400;font-style:italic;margin-top:6px}
.tm figcaption{margin-top:auto;padding-top:34px;display:flex;flex-direction:column;gap:6px}
.tm-name{font-family:var(--serif);font-size:22px;line-height:1}
.tm figcaption .k{color:var(--mist)}
@media (max-width:900px){.tm-grid{grid-template-columns:1fr;border-top:0}.tm{border-right:0;border-top:1px solid var(--line-l);padding:44px 0 40px;max-width:560px;margin:0 auto;width:100%;text-align:center;align-items:center}.tm::before{height:.4em}}

/* ==========================================================
   THE ATELIER SESSION (paid strategy hour) · added 2026-11-02
   About page block, home teaser, services card, inquire card
   ========================================================== */
.ab-wrap{padding-bottom:0}
.ats-bridge{display:flex;flex-direction:column;align-items:center;gap:22px;padding:clamp(70px,8vw,120px) 0 clamp(36px,4vw,56px);text-align:center}
.ats-bridge i{display:block;width:1px;height:clamp(70px,9vw,120px);background:var(--ink);opacity:.35;transform-origin:top;animation:atsLine 2.4s var(--out) both;animation-play-state:paused}
.page.active .ats-bridge i{animation-play-state:running}
@keyframes atsLine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.ats-bridge .script{font-size:clamp(34px,4vw,58px);color:var(--ink)}
.ats{border-top:1px solid var(--line)}
.ats-head .narrow{max-width:680px}
.ats-meta{display:grid;grid-template-columns:repeat(3,1fr);max-width:820px;margin:clamp(44px,5vw,70px) auto 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ats-meta div{padding:26px 12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.ats-meta div+div{border-left:1px solid var(--line)}
.ats-meta b{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.4vw,50px);line-height:1}
.ats-meta .k{font-size:9.5px;letter-spacing:.3em;text-align:center}
.ats-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,110px);align-items:center;margin-top:clamp(70px,8vw,120px)}
.ats-img{margin:0}
.ats-img .ph{aspect-ratio:3/4;border-radius:999px 999px 0 0;max-width:460px;margin:0 auto;background:#141211}
/* Atelier image: the five template presentations dissolve into one another inside the arch */
.ats-rot img{position:absolute;inset:0;opacity:0;transition:clip-path 1.6s var(--ease),transform 2.2s var(--out),opacity .9s cubic-bezier(.45,0,.2,1)}
.ats-rot img.on{opacity:1;z-index:1}
.ats-rot img.was{opacity:1;z-index:0}
@media (prefers-reduced-motion:reduce){.ats-rot img{transition:opacity .6s ease}}
.ats-for{font-family:var(--body);font-size:clamp(20px,1.6vw,24px);line-height:1.5;margin-top:14px}
.ats-list{list-style:none;margin-top:14px;border-top:1px solid var(--line)}
.ats-list li{padding:13px 0 13px 28px;border-bottom:1px solid var(--line);font-size:15.5px;position:relative}
.ats-list li::before{content:"";position:absolute;left:2px;top:24px;width:12px;height:1px;background:currentColor;opacity:.6}
.ats-how{margin-top:clamp(80px,9vw,140px)}
.ats-steps div{border-top-color:var(--line)}
.ats-cta{margin-top:clamp(60px,7vw,100px)}
.ats-fine{max-width:620px;margin:26px auto 0;font-size:13.5px;line-height:1.7}
.ats-msg{text-align:center;color:var(--ink)}
/* home teaser */
.ats-teaser .ovl{background:#0e0d0c}
.ats-line{font-family:var(--wide);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper)}
/* services card */
.ats-card{display:grid;grid-template-columns:1.1fr 1.4fr auto;gap:clamp(24px,4vw,60px);align-items:center;margin-top:clamp(40px,4vw,60px);padding:clamp(30px,3.4vw,52px);border:1px solid var(--line);background:var(--paper-2);transition:background .8s var(--out),color .8s var(--out)}
.ats-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3vw,48px);line-height:1;margin-top:12px}
.ats-card p{font-size:15.5px}
.ats-card:hover{background:var(--ink);color:var(--paper)}
.ats-card:hover .muted{color:var(--mist)}
/* inquire mini card */
.ats-mini{display:flex;flex-direction:column;gap:8px;padding:26px 28px;border:1px solid var(--line);max-width:460px;transition:background .8s var(--out),color .8s var(--out)}
.ats-mini b{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.05}
.ats-mini b em{font-style:italic}
.ats-mini .muted{font-size:14.5px;line-height:1.6}
.ats-mini .tl{margin-top:8px}
.ats-mini:hover{background:var(--ink);color:var(--paper)}
.ats-mini:hover .muted{color:var(--mist)}
@media (max-width:900px){
  .ats-grid{grid-template-columns:1fr}
  .ats-img .ph{max-width:340px}
  .ats-card{grid-template-columns:1fr;gap:18px}
}
@media (max-width:520px){
  .ats-meta div{padding:20px 6px}
  .ats-meta .k{font-size:8.5px;letter-spacing:.18em}
  .ats-cta .oval{width:100%;justify-content:center;text-align:center}
}

/* ==========================================================
   CHECKOUT + ORDER CONFIRMED
   ========================================================== */
body.co-mode .ftr{display:none}
body.co-mode:not(.no-scroll){overflow-x:clip}
.co{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:100vh}
.co-stage{position:sticky;top:0;align-self:start;height:100vh;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:150px clamp(28px,4vw,70px) clamp(40px,6vh,80px)}
.co-slides{position:absolute;inset:0;overflow:hidden}
.co-slides img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.8s cubic-bezier(.45,0,.2,1),transform 8s cubic-bezier(.2,.6,.3,1)}
.co-slides img.on{opacity:1;transform:scale(1)}
.co-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,26,25,.55) 0%,rgba(28,26,25,.08) 34%,rgba(28,26,25,.2) 60%,rgba(28,26,25,.78) 100%)}
/* the order ticket: a letterpress card */
.co-ticket{--gx:30%;position:relative;z-index:2;width:min(440px,100%);background:var(--paper);color:var(--ink);padding:34px 36px 30px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 2px 0 rgba(255,255,255,.4) inset;transition:transform .9s var(--out);transform-style:preserve-3d;will-change:transform}
.co-ticket::before{content:"";position:absolute;inset:9px;border:1px solid rgba(28,26,25,.22);outline:1px solid rgba(28,26,25,.1);outline-offset:-5px;pointer-events:none}
.co-ticket::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,0) calc(var(--gx) - 18%),rgba(255,255,255,.55) var(--gx),rgba(255,255,255,0) calc(var(--gx) + 18%),transparent 100%);mix-blend-mode:soft-light}
.co-tk-top{display:flex;justify-content:space-between;gap:12px;font-family:var(--sans);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--stone);padding-bottom:18px;border-bottom:1px solid var(--line)}
.co-tk-script{display:block;font-family:var(--script);font-size:30px;line-height:1;margin-top:20px;color:var(--stone)}
.co-tk-name{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.2vw,48px);line-height:1;letter-spacing:-.015em;margin:2px 0 10px}
.co-tk-name em{font-style:italic}
.co-tk-lbl{color:var(--stone)}
.co-tk-rule{height:1px;margin:22px 0 6px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 11px)}
.co-ticket dl div,.co-tot div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0;border-bottom:1px solid var(--line)}
.co-ticket dt,.co-tot dt{font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--stone)}
.co-ticket dd{font-family:var(--body);font-size:19px;text-align:right}
.co-tk-for{transition:color .4s}
.co-tk-for.set{font-family:var(--script);font-size:28px;line-height:1;color:var(--ink)}
.co-tk-for:not(.set){color:var(--mist);font-style:italic}
.co-ticket .co-tk-sum{border-bottom:0;padding-top:16px}
.co-ticket .co-tk-sum dd{font-family:var(--serif);font-size:30px}
/* wax seal */
.co-seal{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;color:rgba(245,242,237,.86);background:radial-gradient(circle at 34% 30%,#4a4542 0%,#2a2725 46%,#141211 100%);box-shadow:0 0 0 5px rgba(28,26,25,.92),0 0 0 6px rgba(255,255,255,.1),0 14px 28px -8px rgba(0,0,0,.65),inset 0 2px 6px rgba(255,255,255,.18),inset 0 -6px 12px rgba(0,0,0,.5)}
.co-seal .famark{width:46%;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.co-ticket .co-seal{position:absolute;right:26px;bottom:74px;opacity:0;transform:scale(1.9) rotate(-18deg);transition:all .7s cubic-bezier(.3,1.6,.5,1)}
.co-ticket.sealed .co-seal{opacity:1;transform:scale(1) rotate(-8deg)}
.co-seal.big{width:120px;height:120px;margin:0 auto}
/* right column */
.co-main{padding:clamp(150px,13vw,190px) clamp(24px,5vw,90px) 110px;max-width:760px;width:100%}
.co-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:46px;flex-wrap:wrap}
.co-back{font-family:var(--wide);font-stretch:112%;font-weight:500;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;display:inline-flex;gap:10px;align-items:center;transition:gap .5s var(--out)}
.co-back:hover{gap:16px}
.co-steps{list-style:none;display:flex;gap:10px;align-items:center;counter-reset:s}
.co-steps li{counter-increment:s;font-family:var(--sans);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--mist);display:flex;align-items:center;gap:10px;transition:color .6s}
.co-steps li::before{content:counter(s,upper-roman);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid currentColor;font-family:var(--serif);font-size:11px;letter-spacing:0;transition:all .6s var(--out)}
.co-steps li+li::after{content:none}
.co-steps li+li{padding-left:10px;border-left:1px solid var(--line)}
.co-steps li.on{color:var(--ink)}
.co-steps li.on::before{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.co-h{font-size:clamp(54px,6.4vw,104px);margin:14px 0 10px}
.co-blk{border-top:1px solid var(--line);padding:40px 0 10px;margin-top:40px}
.co-blk-h{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
.co-n{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--stone)}
.co-blk-h h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.01em}
.co-line{display:grid;grid-template-columns:96px 1fr auto;gap:22px;align-items:center}
.co-thumb{aspect-ratio:4/5;border-radius:50%;overflow:hidden;background:var(--paper-2)}
.co-thumb img{width:100%;height:100%;object-fit:cover}
.co-line-name{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1}
.co-line .muted{font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.co-line-price{font-family:var(--serif);font-size:26px}
.co-inc{list-style:none;margin:26px 0 0;columns:2;column-gap:34px}
.co-inc li{break-inside:avoid;position:relative;padding:0 0 12px 22px;font-family:var(--body);font-size:18px;line-height:1.4}
.co-inc li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--ink)}
.co-swap{margin-top:18px}
.co-swap summary{cursor:pointer;list-style:none;font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--stone);display:inline-flex;gap:10px;align-items:center}
.co-swap summary::-webkit-details-marker{display:none}
.co-swap summary::after{content:"+";font-size:15px;letter-spacing:0;transition:transform .5s var(--out)}
.co-swap[open] summary::after{transform:rotate(45deg)}
.co-swap>div{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.co-chip{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border:1px solid var(--line);border-radius:60px;font-family:var(--serif);font-size:16px;transition:border-color .4s,background .4s}
.co-chip img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.co-chip:hover{border-color:var(--ink);background:var(--paper-2)}
.co-note{font-size:14.5px;margin-top:-6px}
.co-tot{margin-bottom:8px}
.co-tot dd{font-family:var(--body);font-size:19px;text-align:right}
.co-tot .co-grand{border-bottom:0;padding-top:20px}
.co-tot .co-grand dt{font-family:var(--serif);font-size:24px;letter-spacing:0;text-transform:none;color:var(--ink)}
.co-tot .co-grand dt small{font-family:var(--sans);font-size:9.5px;letter-spacing:.3em;color:var(--stone);margin-left:8px}
.co-tot .co-grand dd{font-family:var(--serif);font-size:clamp(40px,4vw,56px);line-height:1}
.co-plan{font-family:var(--body);font-style:italic;font-size:18px;color:var(--stone);margin-bottom:6px}
.co-pay{width:100%;padding:28px 30px;font-size:11.5px;margin-top:6px}
.co-pay span{position:relative}
.co-msg a{color:inherit}
.co-msg.info{color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.5}
.co-trust{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--sans);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--stone)}
.co-trust span{display:inline-flex;align-items:center;gap:8px}
.co-trust svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3}
.co-help{font-size:14.5px;margin-top:26px}
/* sealing moment */
.co-sealing{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;text-align:center;background:rgba(28,26,25,.0);color:var(--paper);visibility:hidden;transition:background 1s var(--out),visibility 0s 1s}
.co-sealing.on{visibility:visible;background:rgba(28,26,25,.96);transition:background 1s var(--out) .5s}
.co-sealing .co-seal{opacity:0;transform:scale(2.4) rotate(-30deg)}
.co-sealing.on .co-seal{opacity:1;transform:scale(1) rotate(-8deg);transition:all .8s cubic-bezier(.3,1.5,.5,1) 1s}
.co-sealing .script{display:block;font-size:clamp(44px,5vw,70px);margin-top:28px;opacity:0;transform:translateY(14px);transition:all 1s var(--out) 1.4s}
.co-sealing .k{color:var(--mist);margin-top:14px;opacity:0;transition:opacity 1s 1.6s}
.co-sealing.on .script,.co-sealing.on .k{opacity:1;transform:none}
/* order confirmed */
.cf{min-height:100vh;display:grid;place-items:center;text-align:center;padding:170px var(--pad) 120px}
.cf-in{width:min(680px,100%)}
.cf-seal{margin-bottom:34px}
.cf-seal.is-in{animation:cfSeal 1.1s cubic-bezier(.3,1.5,.5,1) both .3s}
@keyframes cfSeal{0%{opacity:0;transform:scale(2.2) rotate(-28deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
.cf-ty{font-size:clamp(76px,10vw,150px);margin:16px 0 18px}
.cf-lede{max-width:560px;margin:0 auto}
.cf-card{position:relative;background:var(--paper);color:var(--ink);text-align:left;padding:34px clamp(24px,4vw,44px) 26px;margin:54px auto 0;box-shadow:0 50px 90px -40px rgba(0,0,0,.7)}
.cf-card::before{content:"";position:absolute;inset:9px;border:1px solid rgba(28,26,25,.22);pointer-events:none}
.cf-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.cf-amt{font-family:var(--serif);font-weight:400;font-size:34px}
.cf-next{list-style:none;margin-top:6px}
.cf-next li{display:grid;grid-template-columns:40px 1fr;gap:6px;padding:18px 0;border-bottom:1px solid var(--line)}
.cf-next li:last-child{border-bottom:0}
.cf-next b{font-family:var(--serif);font-weight:400;font-size:21px}
.cf-next p{font-family:var(--body);font-size:17.5px;line-height:1.45;color:#5d5852;margin-top:2px}
.cf-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:50px}
.cf-help{margin-top:30px;font-size:14.5px;color:var(--mist)}
.cf-help a{color:var(--paper)}
@media (max-width:900px){
  .co{grid-template-columns:1fr}
  .co-stage{position:relative;height:auto;min-height:min(196vw,860px);padding:150px 20px 30px}
  .co-ticket{padding:28px 26px 24px}
  .co-main{padding:50px 20px 90px}
  .co-head{margin-bottom:30px}
  .co-inc{columns:1}
  .co-line{grid-template-columns:70px 1fr auto;gap:16px}
  .co-line-name,.co-line-price{font-size:22px}
  .co-ticket .co-seal{bottom:64px;right:20px;width:70px;height:70px}
}
@media (max-width:560px){
  .co-steps li{font-size:0;gap:0}
  .co-steps li+li{padding-left:10px}
  .co .row2{grid-template-columns:1fr}
  .co-trust{flex-direction:column}
  .cf-row{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.co-slides img,.co-ticket,.co-seal,.co-sealing *{transition:none!important;animation:none!important}}