/* 11 PARFUME — mobile site styles. Files referenced here sit next to this stylesheet. */

/* Layout: a deck of uncropped photographs that slide over one another like pages of a campaign book; type sits on calm zones of each photo or on texture continued only from neutral surfaces (paper, sky). */
:root{
  --graphite:#2b2a28;
  --ink:#1f1e1c;
  --ink-soft:rgba(31,30,28,.62);
  --ink-line:rgba(31,30,28,.2);
  --ivory:#f2eee7;
  --ivory-line:rgba(31,30,28,.22);
  --night:#141312;
  --sheet:#ebe8e3;
  --surround:#2a2927;
  --font:"Futura PT","Jost","Helvetica Neue",Arial,sans-serif;
  --col:min(100vw,480px);
  --u:calc(var(--col) / 100);
  --ease:cubic-bezier(.22,.61,.12,1);
  --ease-cine:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.15,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--surround)}
body{margin:0;background:var(--surround);color:var(--ink);font-family:var(--font);font-weight:300;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#page :is(button,input,textarea),.sheet :is(button,input,textarea),.dock button{font:inherit;color:inherit}
#page a,.sheet a{color:inherit}
#page img{display:block;max-width:100%}
[hidden]{display:none!important}
html,body{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2228%22%20viewBox%3D%220%200%2024%2028%22%3E%3Cpath%20d%3D%22M3%202.5%20L3%2022%20L8%2017.4%20L11.6%2025.4%20L14.3%2024.2%20L10.8%2016.3%20L17.6%2016.3%20Z%22%20fill%3D%22%231f1e1c%22%20stroke%3D%22%231f1e1c%22%20stroke-width%3D%22.6%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 3 3,auto}
a,button,label,.hot,[role=button],input[type=radio],input[type=checkbox]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2228%22%20viewBox%3D%220%200%2024%2028%22%3E%3Cpath%20d%3D%22M3%202.5%20L3%2022%20L8%2017.4%20L11.6%2025.4%20L14.3%2024.2%20L10.8%2016.3%20L17.6%2016.3%20Z%22%20fill%3D%22%231f1e1c%22%20stroke%3D%22%231f1e1c%22%20stroke-width%3D%22.6%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 3 3,pointer!important}


:focus-visible{outline:1px solid currentColor;outline-offset:3px}

#page{position:relative;width:var(--col);margin:0 auto;background:var(--night);overflow-x:clip}
.deck{position:relative}
.deck>section{position:sticky;top:0}
.frame{position:relative;overflow:hidden}
.frame img{width:100%;height:auto}

.eyebrow{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:400;margin:0}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block}

/* ======================= 01 HERO ======================= */
.s-hero{position:relative!important;top:auto!important;z-index:1;background:var(--night)}
.s-hero .frame{will-change:transform}
.slit,.lens{position:relative}
.s-hero{background:linear-gradient(90deg,#9e9da2 2.08%,#9e9ea2 6.25%,#9f9ea3 10.42%,#a09fa4 14.58%,#a09fa5 18.75%,#a1a0a6 22.92%,#a2a1a7 27.08%,#a3a2a7 31.25%,#a3a3a8 35.42%,#a4a4a9 39.58%,#a5a4aa 43.75%,#a7a6ac 47.92%,#a8a7ad 52.08%,#a9a8ae 56.25%,#aaa9af 60.42%,#abaab0 64.58%,#acabb1 68.75%,#acabb1 72.92%,#acabb2 77.08%,#adabb2 81.25%,#adacb2 85.42%,#aeacb3 89.58%,#aeacb4 93.75%,#afadb4 97.92%)}
.s-hero .frame{background:#1e2125}
.hero-v{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 6px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 6px),transparent)}
.hero-v .lens{aspect-ratio:9/16;background:#1e2125}
.hero-v .poster,.hero-v video{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-v .poster,.hero-v video{opacity:0;transition:opacity 1.2s var(--ease)}
.vid .hero-v video{opacity:1;transition-duration:.35s}
.still .hero-v .poster{opacity:1}
.s-hero{--fg:var(--ink);--fg-line:rgba(31,30,28,.22)}
.s-hero.dark{--fg:var(--ivory);--fg-line:rgba(242,238,231,.3)}
.hero-copy{transition:color .45s var(--ease);position:relative;z-index:2;margin-top:calc(var(--col) * 16 / 9 * -.147);padding:0 calc(var(--u)*6.5) calc(var(--u)*4);display:flex;flex-direction:column;gap:calc(var(--u)*2.4);color:var(--fg)}
.hero-title{position:absolute;z-index:2;left:0;right:0;top:calc(var(--col) * 16 / 9 * .034);margin:0;text-align:center;color:var(--fg);transition:color .45s var(--ease);font-weight:400;font-size:max(13.5px,calc(var(--u)*3.75));letter-spacing:.26em;text-transform:uppercase;line-height:1.3}
.tiers{margin:0;display:grid}
.tier{position:relative;display:grid;grid-template-columns:1fr auto;align-items:baseline;padding:calc(var(--u)*1.05) 0;font-variant-numeric:tabular-nums}
.tier::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fg-line);transition:background .45s;transform-origin:left}
.tier:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fg-line);transition:background .45s;transform-origin:left}
.tier dt{font-weight:300;font-size:max(12.5px,calc(var(--u)*3.45));letter-spacing:.02em}
.tier dd{margin:0}
.tier .now{font-weight:400;font-size:max(16px,calc(var(--u)*4.5));letter-spacing:.01em}
.was{position:relative;display:inline-block;margin-right:.9em;font-weight:300;opacity:.55;font-size:max(11px,calc(var(--u)*2.95))}
.was::after{content:"";position:absolute;left:-2px;right:-2px;top:55%;height:1px;background:currentColor;transform-origin:left}
.hero-cta{position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px;height:46px;padding:0 18px;background:none;border:0;cursor:pointer;color:var(--fg);transition:color .45s,background .3s;font-size:max(10.5px,calc(var(--u)*2.85));letter-spacing:.26em;text-transform:uppercase;font-weight:400;-webkit-tap-highlight-color:transparent}
.hero-cta .rule{position:absolute;inset:0;border:1px solid currentColor;opacity:.6;transform-origin:left;pointer-events:none}
.hero-cta:active{background:rgba(127,127,127,.12)}
.arrow{width:26px;height:1px;background:currentColor;position:relative;transition:width .6s var(--ease)}
.arrow::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)}
.hero-cta:active .arrow,.text-cta:active .arrow,.row-cta:active .arrow{width:38px}

/* intro: the offer is set within ~1 second of the film starting */
.fx .s-hero:not(.go) .hero-copy,.fx .s-hero:not(.go) .hero-title{visibility:hidden}
.fx .go .hero-title{animation:track 1.4s var(--ease-cine) both}
.fx .go .tier::before,.fx .go .tier:last-child::after{animation:draw 1s var(--ease-cine) both;animation-delay:calc(.12s + var(--i)*.07s)}
.fx .go .tier:last-child::after{animation-delay:calc(.2s + var(--i)*.07s)}
.fx .go .tier .ln>span{animation:rise .9s var(--ease-cine) both;animation-delay:calc(.18s + var(--i)*.07s)}
.fx .go .tier .was::after{animation:draw .7s var(--ease) both;animation-delay:calc(.6s + var(--i)*.07s)}
.fx .go .hero-cta .ln>span{animation:rise .9s var(--ease-cine) .5s both}
.fx .go .hero-cta .rule{animation:draw 1.2s var(--ease-cine) .45s both}
.fx .go .hero-cta .arrow{animation:grow 1s var(--ease-cine) .8s both}
@keyframes slit{0%{clip-path:inset(0 49.7% 0 49.7%)}100%{clip-path:inset(0 0 0 0)}}
@keyframes settle{0%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes track{0%{opacity:0;letter-spacing:.6em;filter:blur(5px)}100%{opacity:1;letter-spacing:.26em;filter:blur(0)}}
@keyframes draw{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes rise{0%{transform:translateY(108%)}100%{transform:translateY(0)}}
@keyframes grow{0%{width:0;opacity:0}100%{width:26px;opacity:1}}

/* ======================= 02 CATALOGUE ======================= */
.s-catalog{position:relative!important;top:auto!important;z-index:2;background:#7f7c7b}
.catalog-frame{position:relative}
.dust{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.catalog-frame img{width:100%;height:auto}
.hot{position:absolute;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.hot .plate,.hot .inlight{position:absolute;inset:0;pointer-events:none}
.hot .plate{-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;background-image:url("catalog_hq.jpg");background-repeat:no-repeat;background-size:calc(100% * 100 / var(--w)) calc(100% * 100 / var(--h));background-position:calc(var(--x) / (100 - var(--w)) * 100%) calc(var(--y) / (100 - var(--h)) * 100%);opacity:0;transform:none;transition:transform .45s cubic-bezier(.3,.6,.35,1),filter .45s ease,opacity 0s .46s}
.hot .inlight{background:var(--in) center/100% 100% no-repeat;opacity:0;transition:opacity .2s ease}
.hot.pressed .plate{opacity:1;animation:grind .34s linear forwards;filter:brightness(.9);transition:filter .3s ease,opacity 0s}
@keyframes grind{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.4,0,.6,1)}40%{transform:translateY(.11em)}52%{transform:translateY(.12em);animation-timing-function:cubic-bezier(.3,0,.4,1)}100%{transform:translateY(.22em)}}
.hot.pressed .inlight{opacity:1;transition:opacity .3s ease}
.hot:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.ripple{position:absolute;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1px solid var(--ink);animation:ripple 1.2s var(--ease) forwards}
.ripple.r2{animation-delay:.15s;opacity:0}
@keyframes ripple{0%{transform:scale(.4);opacity:.7}100%{transform:scale(7.5);opacity:0}}

/* ======================= 03 PAUSE ======================= */
.s-pause{z-index:3;background:#bfc3c8}
.collage{position:relative}
.collage img{width:100%;height:auto}
.hold{position:relative;z-index:2;height:26vh;pointer-events:none}

/* ======================= 04 FORMULA ======================= */
.s-formula{z-index:4}
.sky04{position:relative;background:linear-gradient(90deg,#dfe5f0 2.08%,#dfe6f0 6.25%,#dee4ef 10.42%,#dce2ed 14.58%,#dae1ec 18.75%,#d8dfea 22.92%,#d6dde9 27.08%,#d5dde8 31.25%,#d5dde8 35.42%,#dae0ea 39.58%,#dbe1eb 43.75%,#dce2ec 47.92%,#dfe4ed 52.08%,#dfe4ee 56.25%,#dde2ed 60.42%,#dbe0eb 64.58%,#d8deea 68.75%,#d4dbe7 72.92%,#d1d9e5 77.08%,#d0d8e4 81.25%,#d0d8e4 85.42%,#d3dae6 89.58%,#d5dce7 93.75%,#d7dee8 97.92%);padding:calc(var(--u)*9) calc(var(--u)*6.5) calc(var(--u)*7)}
.f-grid{display:grid;grid-template-columns:calc(var(--u)*42) minmax(0,1fr);gap:calc(var(--u)*5);align-items:start}
.film{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;background:#c9ccd0}
.film video,.film img{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx .film:not(.in){clip-path:inset(100% 0 0 0)}
.fx .film{transition:clip-path 1.6s var(--ease-cine)}
.fx .film.from-right:not(.in){clip-path:inset(0 0 0 100%)}
.f-side{display:flex;flex-direction:column;gap:calc(var(--u)*3.6);color:var(--ink)}
.f-title{margin:0;font-weight:300;font-size:calc(var(--u)*8.2);line-height:1.04;letter-spacing:.005em;will-change:transform}
.f-stack{display:grid;justify-items:center;gap:calc(var(--u)*4);padding:calc(var(--u)*9) calc(var(--u)*6.5) calc(var(--u)*6)}
.f-stack .film{width:calc(var(--u)*60)}
.f-stack .f-title{font-size:max(26px,calc(var(--u)*7.4));line-height:1.1;text-align:center;white-space:nowrap}
.f-photo{position:relative}
.f-p2{display:block;margin-top:.7em}
.f-body{position:absolute;z-index:2;left:calc(var(--u)*9);right:calc(var(--u)*9);top:5.5%;margin:0;text-align:center;font-size:max(14px,calc(var(--u)*3.6));line-height:1.62;color:var(--ink)}
.horizon{position:absolute;z-index:2;left:0;right:0;height:1px;background:var(--ink);opacity:0;transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ======================= 05 COMPACT ======================= */
.s-compact{z-index:5}
.feather img{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 8px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 8px),transparent)}
.c-frame{position:relative}
.c-head{position:absolute;z-index:2;left:5.5%;width:41%;top:14%;display:flex;flex-direction:column;gap:calc(var(--u)*1.8);color:var(--ink)}
.c-head .lead-p{margin:calc(var(--u)*.6) 0 0;font-size:max(13px,calc(var(--u)*3.3));line-height:1.45}
.c-head .title{margin:0;font-weight:300;font-size:max(16.5px,calc(var(--u)*4.5));line-height:1.16;letter-spacing:.005em}
.sand{position:relative;margin-top:-8px;background:url("f05_sand.jpg") top center / 100% auto no-repeat,#998f8e;padding:calc(var(--u)*5) calc(var(--u)*6.5) calc(var(--u)*9);color:var(--ink)}
.c-grid{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--u)*34);gap:calc(var(--u)*5);align-items:center}
.c-text{display:grid;gap:calc(var(--u)*4)}
.c-text p{margin:0;font-size:max(13.5px,calc(var(--u)*3.5));line-height:1.6}
.c-text h3{margin:0;font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;line-height:1.6}
.c-text .pair{display:grid;gap:calc(var(--u)*1.8)}

/* ======================= 06 CONSULT ======================= */
.s-consult{z-index:6}
.s-consult .frame{transform-origin:50% 100%}

/* ======================= 07 FOUNDERS ======================= */
.s-founders{position:relative!important;top:auto!important;z-index:7;background:#a6a3a0}
.paper-above{position:relative;background:url("t07_paper_tile.jpg") 0 0 / 100% auto repeat-y;padding:calc(var(--u)*8) calc(var(--u)*7) calc(var(--u)*7)}
.paper-above img,.paper-below>img{width:100%;height:auto}
.consult-more{position:relative;display:grid;gap:calc(var(--u)*3.2);color:var(--ink)}
.consult-more h2{margin:0;font-weight:300;font-size:max(18px,calc(var(--u)*4.85));line-height:1.22;letter-spacing:.005em}
.consult-more p{margin:0;font-size:max(14px,calc(var(--u)*3.7));line-height:1.6;max-width:30ch}
.row-cta{display:flex;justify-content:space-between;align-items:center;margin-top:calc(var(--u)*2);padding:16px 0;background:none;border:0;border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);cursor:pointer;color:var(--ink);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;width:100%;-webkit-tap-highlight-color:transparent}
.text-cta{position:relative;display:inline-flex;align-items:center;gap:14px;background:none;border:0;padding:10px 0;cursor:pointer;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;color:var(--ink);-webkit-tap-highlight-color:transparent;text-decoration:none}
.text-cta::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;opacity:.55;transform-origin:left;transition:transform 1.2s var(--ease-cine)}
.fx .text-cta:not(.in)::after{transform:scaleX(0)}
.founders-frame{position:relative}

.founders-frame img{width:100%;height:auto}
.paper-above img,.founders-frame img,.paper-below>img{transform:translateZ(0)}
.paper-below{position:relative;background:url("t07_paper_tile.jpg") 0 var(--col) / 100% auto repeat-y}
.paper-below>img{position:absolute;top:0;left:0}
.paper-inner{position:relative;padding:calc(var(--u)*13) calc(var(--u)*6.5) calc(var(--u)*7);color:var(--ink)}
.names{text-align:center;display:grid;gap:10px;margin-bottom:calc(var(--u)*16)}
.names .who{font-size:23px;letter-spacing:.07em;font-weight:300}
.names .eyebrow{opacity:.7}
.about-label{display:block;text-align:center;margin-bottom:18px;opacity:.62}
/* paper-cut accordion */
.cut{list-style:none;margin:0;padding:0}
.cut li{position:relative}
.crease{display:block;height:2px;background:linear-gradient(to bottom,rgba(20,19,18,.2) 0 1px,rgba(255,255,255,.2) 1px 2px)}
.cut-q{display:grid;grid-template-columns:2.2em 1fr 16px;gap:10px;align-items:center;width:100%;background:none;border:0;padding:20px 0 19px;text-align:left;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}
.cut-q .n{font-size:10.5px;letter-spacing:.14em;opacity:.55;font-variant-numeric:tabular-nums}
.cut-q .t{font-size:15.5px;line-height:1.4;font-weight:300;letter-spacing:.01em}
.plus{position:relative;width:13px;height:13px;transition:transform .9s var(--ease-cine)}
.plus::before,.plus::after{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:currentColor}
.plus::after{transform:rotate(90deg)}
.open>.cut-q .plus,.open>.fold-q .plus{transform:rotate(135deg)}
.cut-a{margin:0 calc(var(--u)*-6.5);display:grid;grid-template-rows:0fr;transition:grid-template-rows 1s var(--ease-cine)}
.open>.cut-a{grid-template-rows:1fr}
.cut-a>div{overflow:hidden;min-height:0}
.cutin{display:block}
.cut .cutin{padding:22px calc(var(--u)*6.5) 26px calc(var(--u)*6.5 + 2.2em + 10px);background:linear-gradient(to bottom,rgba(24,22,20,.07),rgba(24,22,20,.03) 40%,rgba(24,22,20,.03));box-shadow:inset 0 12px 14px -12px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.22)}
.cut .cutin p{margin:0;font-size:14.5px;line-height:1.68;max-width:40ch;opacity:0;transform:translateY(-8px);transition:opacity .8s var(--ease),transform 1s var(--ease-cine)}
.open>.cut-a .cutin p{opacity:.88;transform:none;transition-delay:.2s}

/* ======================= 08 FAQ ======================= */
.s-faq{position:relative;z-index:8;background:linear-gradient(90deg,#ced6dc 2.08%,#d0d7de 6.25%,#d4dbe2 10.42%,#d7dee5 14.58%,#dae1e8 18.75%,#dee5eb 22.92%,#e1e8ee 27.08%,#e5ecf1 31.25%,#e6edf2 35.42%,#e5ecf1 39.58%,#e4ebef 43.75%,#e2e9ed 47.92%,#dfe7ec 52.08%,#dde5ea 56.25%,#dce3ea 60.42%,#dce3ea 64.58%,#dce4ea 68.75%,#dee5eb 72.92%,#e0e8ec 77.08%,#e1eaed 81.25%,#e1eaee 85.42%,#e1eaed 89.58%,#e1e9ed 93.75%,#e0e9ec 97.92%)}

.env{position:relative;z-index:1}
.env img{width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 6px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 6px),transparent)}
.ground{position:relative;margin-top:-6px;background:url("f08_ground.jpg") top center / 100% auto no-repeat,url("t08_ground_tile.jpg") 0 var(--col) / 100% auto repeat-y;padding:calc(var(--u)*9) calc(var(--u)*7) calc(var(--u)*6);color:var(--ink)}
.fold{list-style:none;margin:0;padding:0}
.fold li{position:relative;border-top:1px solid var(--ink-line)}
.fold li:last-child{border-bottom:1px solid var(--ink-line)}
.fold-q{display:grid;grid-template-columns:1fr 16px;gap:14px;align-items:center;width:100%;background:none;border:0;padding:21px 0;text-align:left;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}
.fold-q .t{font-size:15.5px;line-height:1.4;font-weight:300;letter-spacing:.01em}
.fold-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 1s var(--ease-cine);perspective:900px}
.open>.fold-a{grid-template-rows:1fr}
.fold-a>div{overflow:hidden;min-height:0}
.sheetlet{position:relative;padding:2px 0 22px;transform-origin:50% 0;transform:perspective(700px) rotateX(-22deg) translateY(-10px);opacity:0;transition:transform 1s var(--ease-cine),opacity .7s var(--ease)}
.sheetlet::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(31,30,28,.28) 20%,rgba(31,30,28,.28) 80%,transparent);transform:scaleX(0);transition:transform 1.1s var(--ease-cine)}
.sheetlet p{margin:14px 0 0;font-size:14.5px;line-height:1.7;max-width:36ch}
.open>.fold-a .sheetlet{transform:none;opacity:1;transition-delay:.05s}
.open>.fold-a .sheetlet::before{transform:scaleX(1)}

/* ======================= 09 FINAL ======================= */
.s-final{position:relative;z-index:9;height:calc(100vh + 110vh);height:calc(100lvh + 110lvh);background:#e6e6e5}
.stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:#e6e6e5}
.pan{position:absolute;top:0;left:0;height:100%;aspect-ratio:2048/1143;will-change:transform}
.pan img{height:100%;width:auto;max-width:none}
.handset{position:absolute;left:17%;top:57%;width:23%;height:23%;display:block;-webkit-tap-highlight-color:transparent}
.handset .pulse{position:absolute;left:50%;top:46%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;border:1px solid var(--ink);opacity:0;pointer-events:none}
.handset.ping .pulse{animation:pulse 2.6s var(--ease) 2}
@keyframes pulse{0%{transform:scale(.5);opacity:0}25%{opacity:.6}100%{transform:scale(2.4);opacity:0}}
.end{position:absolute;inset:0;padding:calc(var(--u)*16 + env(safe-area-inset-top,0px)) calc(var(--u)*6) calc(100lvh - 100svh + 86px + env(safe-area-inset-bottom,0px)) calc(var(--u)*27);display:flex;flex-direction:column;justify-content:space-between;color:var(--ink);pointer-events:none}
.end.on{pointer-events:auto}
.end .eyebrow{opacity:.62;margin-bottom:22px}
.end .big{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;font-size:24px;font-weight:300;line-height:1.2;letter-spacing:.01em;padding:0 0 18px;border-bottom:1px solid var(--ink-line)}
.end .rows{display:grid}
.end .rows a{display:flex;justify-content:space-between;align-items:baseline;text-decoration:none;padding:16px 0;border-bottom:1px solid var(--ink-line);font-size:14.5px;font-weight:300}
.end .rows a span:last-child{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.legal{margin:28px 0 0;font-size:10.5px;line-height:1.8;letter-spacing:.02em;opacity:.66}
.legal a{text-underline-offset:3px}
.fx .end .pc{transition:opacity 1.6s var(--ease),transform 1.8s var(--ease-cine),filter 1.6s var(--ease);transition-delay:var(--d,0s)}
.fx .end:not(.on) .pc{opacity:0;transform:translateY(18px);filter:blur(6px)}

/* ======================= reveals ======================= */
.fx .mist{transition:opacity 1.4s var(--ease),transform 1.5s var(--ease-cine),filter 1.4s var(--ease),letter-spacing 1.8s var(--ease-cine);transition-delay:var(--d,0s)}
.fx .mist:not(.in){opacity:0;transform:translateY(12px);filter:blur(7px)}
.fx .mist.track:not(.in){letter-spacing:.6em}
.fx .lines .ln>span{transition:transform 1.3s var(--ease-cine);transition-delay:calc(var(--d,0s) + var(--i,0)*.11s)}
.fx .lines:not(.in) .ln>span{transform:translateY(108%)}

/* ======================= cart dock ======================= */
.dock{position:fixed;z-index:40;left:50%;bottom:0;width:var(--col);transform:translateX(-50%);padding:0 22px calc(14px + env(safe-area-inset-bottom,0px));pointer-events:none}
.pill{pointer-events:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;height:36px;border:1px solid rgba(31,30,28,.08);cursor:pointer;background:rgba(238,235,230,.62);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);color:var(--ink);padding:0 14px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;transform:translateY(160%);opacity:0;transition:transform 1.1s var(--ease-cine),opacity .8s var(--ease);-webkit-tap-highlight-color:transparent}
.pill.show{transform:none;opacity:1}
.pill .ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;max-width:120px;justify-self:center;width:100%}
.pill .ladder i{height:1px;background:var(--ink);opacity:.14;transition:opacity .6s var(--ease)}
.pill .ladder i.on{opacity:.8}
.pill .sum{letter-spacing:.08em;font-variant-numeric:tabular-nums}
.pill.bump .count{display:inline-block;animation:bump .7s var(--ease-cine)}
@keyframes bump{0%{transform:translateY(0)}40%{transform:translateY(-4px);opacity:.3}100%{transform:none}}
.toast{position:fixed;z-index:41;left:50%;bottom:calc(60px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);opacity:0;color:var(--ink);background:rgba(238,235,230,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(31,30,28,.08);padding:9px 14px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ======================= sheets ======================= */
.veil{position:fixed;inset:0;z-index:50;background:rgba(20,19,18,.46);opacity:0;transition:opacity .8s var(--ease);pointer-events:none}
.veil.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:51;left:50%;bottom:0;width:var(--col);max-height:calc(100% - 28px - env(safe-area-inset-top,0px));transform:translate(-50%,104%);transition:transform 1s var(--ease-in-out);background:var(--sheet) url("t07_paper_tile.jpg") 0 0/100% auto;background-blend-mode:soft-light;color:var(--ink);display:flex;flex-direction:column;visibility:hidden}
.sheet.show{transform:translate(-50%,0);visibility:visible}
.sheet-head{position:relative;display:flex;justify-content:space-between;align-items:center;padding:22px 24px 18px;border-bottom:1px solid var(--ink-line)}
.back,.close{background:none;border:0;padding:8px;margin:-8px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;-webkit-tap-highlight-color:transparent}
.back .bar{width:18px;height:1px;background:currentColor;display:block}
.close i{position:relative;display:block;width:16px;height:16px}
.close i::before,.close i::after{content:"";position:absolute;left:0;right:0;top:8px;height:1px;background:currentColor;transform:rotate(45deg)}
.close i::after{transform:rotate(-45deg)}
.sheet-body{position:relative;overflow:auto;-webkit-overflow-scrolling:touch;padding:8px 24px calc(28px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
.step{display:none}
.step.on{display:block;animation:stepIn .8s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.lines-list{list-style:none;margin:0;padding:0}
.line{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:20px 0;border-bottom:1px solid var(--ink-line)}
.line .nm{font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:400}
.line .meta{font-size:12px;opacity:.6;letter-spacing:.04em}
.qty{grid-row:span 2;display:flex;align-items:center;gap:4px}
.qty button{width:36px;height:36px;border:0;background:none;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.qty button::before,.qty button.plusb::after{content:"";position:absolute;left:12px;right:12px;top:50%;height:1px;background:currentColor}
.qty button.plusb::after{transform:rotate(90deg)}
.qty output{min-width:18px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.remove{background:none;border:0;padding:0;cursor:pointer;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;justify-self:start;margin-top:4px}
.empty{padding:40px 0 24px;display:grid;gap:18px;justify-items:start}
.summary{padding:22px 0 6px;display:grid;gap:10px}
.sumrow{display:flex;justify-content:space-between;align-items:baseline;font-variant-numeric:tabular-nums}
.sumrow .k{font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.sumrow .v{display:flex;gap:12px;align-items:baseline;font-size:22px;font-weight:300}
.sumrow .v s{font-size:14px;opacity:.5;text-decoration-thickness:1px}
.hint{font-size:13px;line-height:1.55;opacity:.72;margin:0}
.hint.warn{opacity:1}
.ladder-lg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 2px}
.ladder-lg span{height:1px;background:var(--ink);opacity:.16;transition:opacity .6s var(--ease)}
.ladder-lg span.on{opacity:.9}
.cta{width:100%;margin-top:22px;border:0;cursor:pointer;background:var(--ink);color:var(--ivory);padding:18px 20px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;display:flex;justify-content:space-between;align-items:center;-webkit-tap-highlight-color:transparent;transition:opacity .4s}
.cta[disabled]{opacity:.35;cursor:default}
.cta .amt{letter-spacing:.06em;font-variant-numeric:tabular-nums}
.ghost{width:100%;margin-top:10px;background:none;border:1px solid var(--ink-line);padding:16px 20px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;font-weight:400}
.fields{display:grid;margin-top:6px}
.field{position:relative;border-bottom:1px solid var(--ink-line);padding:22px 0 8px}
.field label{position:absolute;left:0;top:26px;font-size:14px;opacity:.55;transition:transform .5s var(--ease),opacity .5s,font-size .5s;transform-origin:left top;pointer-events:none}
.field input,.field textarea{width:100%;border:0;background:none;padding:6px 0 4px;font-size:16px;outline:none;resize:none;border-radius:0}
.field textarea{min-height:52px;line-height:1.5}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-20px);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.field::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.field.bad::after{transform:scaleX(1);background:#7a3b2e}
.field .err{display:block;font-size:11.5px;color:#7a3b2e;margin-top:4px}
.field .opt{position:absolute;right:0;top:28px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.4}
fieldset{border:0;padding:0;margin:26px 0 0}
legend{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.6;padding:0;margin-bottom:6px}
.choice{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--ink-line);cursor:pointer;font-size:14.5px;line-height:1.4}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .dot{flex:none;width:14px;height:14px;border:1px solid var(--ink);border-radius:50%;position:relative}
.choice .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .4s var(--ease)}
.choice input:checked+.dot::after{transform:scale(1)}
.choice input:focus-visible+.dot{outline:1px solid var(--ink);outline-offset:3px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips .choice{border:1px solid var(--ink-line);padding:10px 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.chips .choice:has(input:checked){border-color:var(--ink)}
.chips .dot{display:none}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:12.5px;line-height:1.5;opacity:.85}
.consent input{position:absolute;opacity:0}
.consent .box{flex:none;width:14px;height:14px;border:1px solid var(--ink);margin-top:2px;position:relative;cursor:pointer}
.consent .box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg) scale(0);transition:transform .35s var(--ease)}
.consent input:checked+.box::after{transform:rotate(45deg) scale(1)}
.consent input:focus-visible+.box{outline:1px solid var(--ink);outline-offset:3px}
.consent.bad .box{border-color:#7a3b2e}
.mini{margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--ink-line);font-size:13px;line-height:1.7;opacity:.8}
.done{padding:34px 0 10px;display:grid;gap:16px}
.done .title{font-size:26px;font-weight:300;margin:0}
.proto{font-size:11.5px;letter-spacing:.04em;line-height:1.6;opacity:.55;margin:0;border-top:1px solid var(--ink-line);padding-top:14px}
.manager{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding:16px 0;border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);text-decoration:none;font-size:14px;font-weight:400}
.manager span:last-child{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.lead{margin:14px 0 4px;font-size:22px;font-weight:300;line-height:1.25}

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

/* Tilda: let sticky scenes work inside Tilda wrappers */
.t-records,.t-rec,.t-rec_pt_0,#allrecords{overflow:visible!important}
.t-rec:has(#page){padding:0!important}
