/* Chalchitra Labs · style.css
   Look: a night-and-gold cinematic hero (a revolving stage of designs inside a mehrab arch), then warm ivory
   sections with arch-shaped cards. Display type is Cormorant Garamond, text is Jost.
   Old-phone safe: every clamp()/max() has a plain value in front of it; flex gap has a margin fallback (.nogap). */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/cormorant.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/cormorant-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20B8,U+20BA-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/jost.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/jost-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20B8,U+20BA-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* the rupee sign alone (1 KB each, cut from Cormorant and Manrope), so the big latin-ext files never download for it */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/rupee-serif.woff2) format('woff2');unicode-range:U+20B9}
@font-face{font-family:'Rupee';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/rupee-sans.woff2) format('woff2');unicode-range:U+20B9}

:root{
  color-scheme:light;
  --night:#170d12; --night2:#2b1219; --paper:#fffcf7; --ivory:#fbf5ec; --band:#f5ecdf;
  --ink:#231a1e; --ink2:#665b5f; --line:#e8dccb;
  --maroon:#7a1f2b; --maroon2:#5e1520; --gold:#c9a45c; --gold2:#ead8ae; --gold3:#a7823e;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost','Rupee',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper)}
html.reduce{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;color:inherit}
h1,h2{font-family:var(--serif);line-height:1.02;letter-spacing:-.01em;font-weight:500}
h2{font-size:40px;font-size:clamp(2.3rem,5.4vw,3.6rem)}
h3{font-family:var(--sans);font-size:18px;font-weight:500;line-height:1.35}
p{margin:0}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-left:20px;padding-right:20px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.narrow{max-width:860px}
.center{text-align:center}
.fine{font-size:13.5px;color:var(--ink2)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold3)}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}

/* buttons: squared-off with a fine inner rule, like a printed card's border */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;line-height:1;text-decoration:none;padding:17px 26px;border-radius:3px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.btn::after{content:"";position:absolute;left:4px;top:4px;right:4px;bottom:4px;border:1px solid currentColor;border-radius:2px;opacity:.28;pointer-events:none;transition:opacity .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{opacity:.55}
.btn.gold{background:var(--gold);color:var(--night)}
.btn.gold:hover{background:var(--gold2);box-shadow:0 14px 30px -14px rgba(201,164,92,.8)}
.btn.dark{background:var(--maroon);color:#fff}
.btn.dark:hover{background:var(--maroon2);box-shadow:0 14px 30px -16px rgba(122,31,43,.8)}
.btn.line{border-color:var(--maroon);color:var(--maroon);background:transparent}
.btn.line::after{display:none}
.btn.line:hover{background:var(--maroon);color:#fff}
.btn.ghost{border-color:rgba(234,216,174,.5);color:var(--gold2);background:transparent}
.btn.ghost::after{display:none}
.btn.ghost:hover{border-color:var(--gold2);background:rgba(234,216,174,.08)}
.btn.small{padding:12px 16px;font-size:11.5px}
.btn.small::after{display:none}
.btn.big{padding:20px 32px;font-size:14px}

/* header: transparent over the night hero, ivory once you scroll into the page */
.top{position:fixed;left:0;right:0;top:0;z-index:40;color:var(--ink);background:rgba(255,252,247,.96);border-bottom:1px solid var(--line);transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.top{background:rgba(255,252,247,.92);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}}
.top.dark{color:var(--ivory);background:rgba(23,13,18,0);border-bottom-color:rgba(234,216,174,0);-webkit-backdrop-filter:none;backdrop-filter:none}
.top.dark.line{background:rgba(23,13,18,.72);border-bottom-color:rgba(234,216,174,.14)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.top.dark.line{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
.top-in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;padding:12px 20px 0;padding-top:max(12px,env(safe-area-inset-top));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.logo-mark{width:36px;height:38px;flex:none}
.logo-word{font-family:var(--serif);font-weight:600;font-size:27px;line-height:.9;display:flex;flex-direction:column;align-items:center;color:var(--maroon)}
.logo-word small{font-family:var(--sans);font-weight:500;font-size:9px;letter-spacing:.62em;text-indent:.62em;text-transform:uppercase;color:var(--gold3);margin-top:5px}
.top.dark .logo-word{color:#fff}
.top.dark .logo-word small{color:var(--gold)}
/* the mark (an inline SVG): maroon arch on light backgrounds, gold line-work on dark ones */
.lm-arch{fill:none;stroke:var(--gold);stroke-width:3.2;stroke-linejoin:round}
.lm-panel{fill:var(--maroon)}
.lm-holes{fill:var(--maroon)}
.lm-gold{fill:var(--gold)}
.lm-play{fill:var(--gold);stroke:var(--gold);stroke-width:1.6;stroke-linejoin:round}
.top.dark .lm-panel,.close .lm-panel{fill:none;stroke:var(--gold);stroke-width:1.8}
.top.dark .lm-holes,.close .lm-holes{fill:var(--gold)}
.lm-panel,.lm-holes{transition:fill .35s ease,stroke .35s ease}
.top .btn{margin-left:auto}
.top.dark .btn{background:transparent;color:var(--gold2);border-color:rgba(234,216,174,.45)}
.top:not(.dark) .btn{background:var(--maroon);color:#fff}
/* nav: a slim scrollable strip under the logo on phones, inline on wide screens; the gold bar marks the current section */
.nav{position:relative;display:flex;order:3;flex:0 0 100%;gap:22px;margin:0 -20px;padding:2px 20px 0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{position:relative;text-decoration:none;font-size:14px;font-weight:400;letter-spacing:.02em;white-space:nowrap;padding:6px 0 10px;opacity:.72;transition:opacity .2s ease}
.nav a:hover,.nav a[aria-current]{opacity:1}
.nav-ind{position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;background:var(--gold);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease;pointer-events:none}
@media (min-width:900px){.top-in{flex-wrap:nowrap;padding-bottom:12px}.nav{order:0;flex:0 1 auto;margin:0 0 0 auto;padding:0;gap:30px;overflow:visible}.nav a{font-size:15px;padding:8px 0}.nav-ind{bottom:-2px}.top .btn{margin-left:10px}}
section[id]{scroll-margin-top:96px}
@media (min-width:900px){section[id]{scroll-margin-top:64px}}

/* ── hero ── */
.hero{position:relative;overflow:hidden;color:var(--ivory);background:var(--night);background:radial-gradient(120% 80% at 70% 40%,#3a1620 0%,var(--night2) 38%,var(--night) 75%);padding:128px 0 40px}
.stars{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1px 1px at 12% 18%,#f5e6c4 50%,transparent 51%),radial-gradient(1px 1px at 28% 72%,#f5e6c4 50%,transparent 51%),radial-gradient(1.5px 1.5px at 44% 30%,#f5e6c4 50%,transparent 51%),radial-gradient(1px 1px at 63% 12%,#f5e6c4 50%,transparent 51%),radial-gradient(1px 1px at 82% 64%,#f5e6c4 50%,transparent 51%),radial-gradient(1.5px 1.5px at 91% 22%,#f5e6c4 50%,transparent 51%),radial-gradient(1px 1px at 7% 88%,#f5e6c4 50%,transparent 51%),radial-gradient(1px 1px at 55% 92%,#f5e6c4 50%,transparent 51%);
  background-size:420px 380px;animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.25}to{opacity:.6}}
html.reduce .stars,html.lowend .stars{animation:none}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px}
.hero-text{text-align:center;max-width:560px}
.hero h1{font-size:46px;font-size:clamp(2.9rem,8.4vw,5.6rem);margin:16px 0 0;color:#fff}
.hero h1 em{font-style:italic;color:var(--gold2)}
.hero .eyebrow{color:var(--gold)}
.lede{margin:20px auto 0;font-size:17px;font-weight:300;color:rgba(251,245,236,.78);max-width:500px}
.address{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(234,216,174,.25);font-size:15.5px;font-weight:400;letter-spacing:.02em;color:#fff;min-width:240px;justify-content:center}
.address svg{width:14px;height:14px;color:#6ccf96;flex:none}
.caret{display:inline-block;width:1.5px;height:18px;background:var(--gold);margin-left:-4px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
html.reduce .caret{display:none}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
@media (max-width:480px){.hero{padding-top:118px}.hero .address{display:none}.lede{font-size:16px}.actions .btn{padding:15px 20px;font-size:12px}}
@media (min-width:980px){
  .hero{padding:120px 0 56px;min-height:720px}
  .hero-in{flex-direction:row;align-items:center;justify-content:space-between;gap:30px}
  .hero-text{text-align:left;flex:0 0 46%}
  .lede{margin-left:0}
  .actions{justify-content:flex-start}
}

/* the revolving stage */
/* isolate: the phones' z-index (0-100) must stay inside the stage, under the header and the preview dialog */
.show{position:relative;z-index:0;isolation:isolate;width:100%;max-width:560px;height:470px;-webkit-user-select:none;user-select:none;touch-action:pan-y}
@media (min-width:980px){.show{flex:0 0 50%;height:600px}}
.show .arch{position:absolute;left:12%;right:12%;top:0;bottom:84px;width:76%;height:auto;color:var(--gold);opacity:.38}
@media (min-width:980px){.show .arch{bottom:96px}}
.show .glow{position:absolute;left:50%;top:44%;width:520px;height:420px;margin:-210px 0 0 -260px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,164,92,.32),rgba(201,164,92,0));pointer-events:none}
.ring{position:absolute;left:0;right:0;top:0;bottom:84px;z-index:1;touch-action:pan-y;cursor:-webkit-grab;cursor:grab}
.ring.drag{cursor:-webkit-grabbing;cursor:grabbing}
/* Smoothness on phones: each phone is its own GPU layer and nothing inside it repaints while the ring turns.
   The shade and the front glow change only opacity on their own layers; the shadow never changes. */
.ring .device{position:absolute;left:50%;top:50%;width:150px;margin:-170px 0 0 -75px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;will-change:transform;box-shadow:0 18px 36px -16px rgba(0,0,0,.75)}
@media (min-width:980px){.ring .device{width:196px;margin:-222px 0 0 -98px}}
.ring .device .shade{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;border-radius:inherit;background:var(--night);opacity:0;pointer-events:none;will-change:opacity}
.ring .device::after{content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;z-index:3;border-radius:inherit;box-shadow:0 0 0 1px rgba(234,216,174,.55),0 0 34px rgba(201,164,92,.28);opacity:0;transition:opacity .35s ease;pointer-events:none;will-change:opacity}
.ring .device.front::after{opacity:1}
.floor{position:absolute;left:14%;right:14%;bottom:96px;height:40px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
/* the caption sits on its own layer above the ring, at a fixed width so long names never push into the arrows */
.cap{position:absolute;left:0;right:0;bottom:34px;z-index:2;display:flex;align-items:center;justify-content:center;gap:12px}
.cap-text{width:190px;max-width:calc(100% - 120px);text-align:center;display:flex;flex-direction:column;align-items:center}
.cap-now{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.cap strong{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15;color:#fff;transition:opacity .2s ease}
@media (min-width:480px){.cap-text{width:230px}.cap strong{font-size:28px}}
.cap-tag{white-space:nowrap;font-size:13px;color:rgba(251,245,236,.65);transition:opacity .25s ease}
.cap.swap strong,.cap.swap .cap-tag{opacity:0}
.nav-b{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(234,216,174,.35);background:transparent;color:var(--gold2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.nav-b:hover{background:rgba(234,216,174,.1);border-color:var(--gold2)}
.nav-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cap-watch{position:absolute;z-index:2;left:0;right:0;bottom:0;width:-webkit-max-content;width:max-content;max-width:100%;margin:0 auto;white-space:nowrap;background:none;border:0;padding:4px 2px;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold2);cursor:pointer;border-bottom:1px solid rgba(234,216,174,.4)}
.cap-watch:hover{border-bottom-color:var(--gold2)}

/* phone device */
.device{position:relative;background:#141216;border-radius:28px;padding:6px;box-shadow:0 30px 60px -20px rgba(40,20,30,.45),0 0 0 1px rgba(0,0,0,.08)}
.device .bar{display:flex;align-items:center;justify-content:center;gap:5px;height:24px;margin:0 0 5px;border-radius:999px;background:#2a272d;color:#cfc9d1;font-family:var(--sans);font-size:10px;font-weight:500;white-space:nowrap;overflow:hidden;padding:0 10px}
.device .bar svg{width:9px;height:9px;color:#6ccf96;flex:none}
.device .screen{position:relative;border-radius:21px;overflow:hidden;background:#222}
.device .screen::before{content:"";display:block;padding-top:216.4%}
.device .screen img,.device .screen video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.js .device .screen img.fade{opacity:0;transition:opacity .45s ease}
.js .device .screen img.fade.ld{opacity:1}
.device .screen video{background:#111;transform:translateZ(0)}
.ring .device img{-webkit-user-drag:none;pointer-events:none}

/* ribbon of functions */
.ribbon{overflow:hidden;background:var(--maroon);color:var(--gold2);border-top:1px solid rgba(234,216,174,.25);border-bottom:1px solid rgba(234,216,174,.25)}
.ribbon-track{display:flex;width:-webkit-max-content;width:max-content;padding:15px 0;animation:ribbon 46s linear infinite}
.ribbon span{font-family:var(--serif);font-style:italic;font-size:22px;white-space:nowrap;padding:0 22px;display:flex;align-items:center}
.ribbon span::after{content:"";width:6px;height:6px;margin-left:44px;background:var(--gold);-webkit-transform:rotate(45deg);transform:rotate(45deg)}
@keyframes ribbon{to{-webkit-transform:translateX(-50%);transform:translateX(-50%)}}
html.reduce .ribbon-track{animation:none}

/* sections */
.sec{padding:96px 0}
.head{margin:0 auto 42px;text-align:center;max-width:640px}
.head h2{margin-top:12px}
.head p:not(.eyebrow){margin-top:14px;color:var(--ink2);font-size:17px;font-weight:300}

/* designs */
.designs{background:var(--ivory)}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 26px;margin:0 0 44px}
.tab{position:relative;font-family:var(--sans);font-size:14.5px;font-weight:400;letter-spacing:.02em;padding:6px 0;border:0;background:none;color:var(--ink2);cursor:pointer}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold);-webkit-transform:scaleX(0);transform:scaleX(0);transition:transform .3s ease}
.tab:hover{color:var(--ink)}
.tab[aria-pressed="true"]{color:var(--maroon)}
.tab[aria-pressed="true"]::after{-webkit-transform:scaleX(1);transform:scaleX(1)}
.grid{list-style:none;margin:0 0 30px;padding:0;display:-ms-grid;display:grid;grid-template-columns:1fr 1fr;gap:40px 16px}
@media (min-width:760px){.grid{grid-template-columns:repeat(3,1fr);gap:56px 34px}}
.card{display:flex;flex-direction:column;height:100%;transition:opacity .26s ease,transform .26s ease}
.card.out{opacity:0;transform:scale(.96)}
/* the arch: a mehrab window tinted with the design's own colour */
.arch-b{position:relative;z-index:0;isolation:isolate;display:block;width:100%;height:280px;padding:34px 0 0;border:0;border-radius:999px 999px 6px 6px;overflow:hidden;cursor:pointer;background:#3b2a2e;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.arch-b::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:radial-gradient(90% 60% at 50% 0%,rgba(255,236,200,.28),rgba(255,236,200,0) 70%),linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,.35));pointer-events:none}
.arch-b::after{content:"";position:absolute;left:7px;top:7px;right:7px;bottom:7px;border:1px solid rgba(234,216,174,.45);border-radius:999px 999px 3px 3px;pointer-events:none}
@media (min-width:760px){.arch-b{height:420px;padding-top:56px}}
@media (max-width:420px){.arch-b{height:240px;padding-top:30px}}
.arch-b .clip{position:relative;z-index:1;display:block}
.arch-b .device{width:136px;margin:0 auto;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
@media (max-width:420px){.arch-b .device{width:118px}}
@media (min-width:760px){.arch-b .device{width:206px}}
.arch-b:hover .device{transform:translateY(-8px)}
.arch-b .lightspot{position:absolute;left:0;top:0;right:0;bottom:0;background:radial-gradient(circle at var(--mx,50%) var(--my,35%),rgba(255,230,180,.35),rgba(255,230,180,0) 55%);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:2}
.arch-b.tilt .lightspot{opacity:1}
.arch-b.tilt .device{transition:transform .14s ease-out}
.arch-b:active .device{transform:scale(.98)}
.arch-b .no{position:absolute;left:0;right:0;top:14px;z-index:3;text-align:center;font-size:10px;letter-spacing:.3em;color:rgba(251,245,236,.8)}
@media (min-width:760px){.arch-b .no{top:24px;font-size:11px}}
.screen .hv{opacity:0;transition:opacity .4s ease}
.screen .hv.on{opacity:1}
.card .meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:18px}
.card h3{font-family:var(--serif);font-size:30px;font-weight:500;line-height:1}
.card .price{font-family:var(--serif);font-variant-numeric:lining-nums;-webkit-font-feature-settings:'lnum';font-feature-settings:'lnum';font-size:22px;font-weight:600;color:var(--maroon);white-space:nowrap}
.card .tag{display:block;margin-top:6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold3);white-space:nowrap}
.card .desc{margin-top:8px;font-size:15px;font-weight:300;color:var(--ink2)}
.card .go{align-self:flex-start;margin-top:12px;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--maroon);background:none;border:0;border-bottom:1px solid rgba(122,31,43,.35);padding:4px 0;cursor:pointer}
.card .go:hover{border-bottom-color:var(--maroon)}
@media (max-width:560px){.card .desc{display:none}.card h3{font-size:23px}.card .meta{flex-direction:column;align-items:flex-start;gap:2px;margin-top:14px}.card .price{font-size:19px}.card .tag{margin-top:4px;font-size:10px;letter-spacing:.14em}.card .go{margin-top:8px;font-size:11px}}

/* features: a bento of tiles; a swipeable row on phones */
.features{background:var(--paper)}
/* sideways only: overflow-y hidden stops the diagonal wobble, overscroll-behavior stops the swipe from turning into a 'back' gesture */
.bento{list-style:none;margin:0;padding:6px 0 14px;display:flex;align-items:stretch;gap:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
.bento::-webkit-scrollbar{display:none}
.tile{flex:0 0 78%;scroll-snap-align:center;position:relative;overflow:hidden;background:var(--ivory);border:1px solid var(--line);border-radius:18px;padding:28px 24px 30px;transition:transform .35s ease,box-shadow .35s ease}
.tile:hover{transform:translateY(-4px);box-shadow:0 24px 40px -30px rgba(60,20,30,.5)}
.tile .ic{display:flex;width:52px;height:52px;border-radius:50%;align-items:center;justify-content:center;color:var(--maroon);border:1px solid var(--gold2);background:#fff;margin-bottom:22px}
.tile .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-family:var(--serif);font-size:25px;font-weight:500;line-height:1.1}
.tile p{margin-top:10px;font-size:15px;font-weight:300;color:var(--ink2)}
.tile.deep{background:var(--maroon);border-color:var(--maroon);color:var(--ivory)}
.tile.deep::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;border:1px solid rgba(234,216,174,.25);box-shadow:0 0 0 22px rgba(234,216,174,.05),0 0 0 44px rgba(234,216,174,.04)}
.tile.deep p{color:rgba(251,245,236,.75)}
.tile.deep .ic{background:transparent;border-color:rgba(234,216,174,.45);color:var(--gold2)}
.swipe{margin-top:10px;text-align:right;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold3)}
@media (min-width:760px){
  .bento{display:-ms-grid;display:grid;grid-template-columns:repeat(2,1fr);overflow:visible;margin:0;padding:0;gap:18px}
  .tile{flex:none}
  .swipe{display:none}
}
@media (min-width:1040px){.bento{grid-template-columns:repeat(4,1fr)}.tile{min-height:250px}}

/* how: roman numerals joined by a gold thread */
.how{background:var(--band)}
.steps-wrap{position:relative}
.steps-line{position:absolute;z-index:0;background:var(--line);pointer-events:none}
.steps-line.h{height:1.5px}.steps-line.v{width:1.5px}
.steps-line i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--gold);transform:scaleX(0);transition:transform .25s linear}
.steps-line.h i{-webkit-transform-origin:left center;transform-origin:left center}
.steps-line.v i{-webkit-transform-origin:center top;transform-origin:center top;transform:scaleY(0)}
.steps{list-style:none;margin:0;padding:0;display:-ms-grid;display:grid;grid-template-columns:1fr;gap:34px}
.steps li{position:relative;padding-left:92px;min-height:70px}
.steps .num{position:absolute;left:0;top:0;z-index:1;display:flex;width:68px;height:68px;border-radius:50%;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:30px;color:var(--maroon);border:1px solid var(--gold2);background:var(--band);transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease}
.steps .num.on{background:var(--maroon);border-color:var(--maroon);color:var(--gold2);box-shadow:0 0 0 7px rgba(201,164,92,.18)}
.steps h3{font-family:var(--serif);font-size:28px;font-weight:500;padding-top:6px}
.steps p{margin-top:8px;color:var(--ink2);font-weight:300}
@media (min-width:760px){
  .steps{grid-template-columns:repeat(3,1fr);gap:40px}
  .steps li{padding-left:0;text-align:center}
  .steps .num{position:relative;margin:0 auto 22px;width:84px;height:84px;font-size:36px}
  .steps p{max-width:300px;margin-left:auto;margin-right:auto}
}

/* versus */
.versus{background:var(--paper)}
.vs-switch{display:flex;justify-content:center;margin:0 auto 30px;padding:4px;border:1px solid var(--line);border-radius:999px;width:-webkit-max-content;width:max-content;max-width:100%;background:var(--ivory)}
.vs-b{font-family:var(--sans);font-size:14px;padding:10px 18px;border:0;border-radius:999px;background:none;color:var(--ink2);cursor:pointer;transition:background-color .3s ease,color .3s ease}
.vs-b[aria-pressed="true"]{background:var(--night);color:var(--gold2)}
.vs{border-top:1px solid var(--line)}
.vs-row{display:-ms-grid;display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:12px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line)}
.vs-row .k{font-weight:400}
.vs-row .them{color:var(--ink2);font-weight:300;transition:opacity .25s ease,transform .25s ease}
.vs-row .us{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--maroon);line-height:1.15}
.vs-head{padding-top:6px;padding-bottom:12px}
.vs-head .them,.vs-head .us{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.vs-head .us{color:var(--gold3)}
.vs.swap .them{opacity:0;-webkit-transform:translateY(6px);transform:translateY(6px)}
@media (max-width:560px){.vs-row{grid-template-columns:1fr 1fr;gap:4px 14px}.vs-row .k{grid-column:1 / -1;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold3)}.vs-head .k{display:none}.vs-row .us{font-size:19px}.vs-row.vs-head .them,.vs-row.vs-head .us{font-size:10.5px}}

/* pricing */
.pricing{background:var(--ivory)}
.plans{display:-ms-grid;display:grid;grid-template-columns:1fr;gap:20px;max-width:860px;margin:0 auto}
@media (min-width:720px){.plans{grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}}
.plan{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 30px;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.plan:hover{transform:translateY(-4px);box-shadow:0 26px 46px -30px rgba(40,20,30,.45)}
.plan .pname{font-family:var(--serif);font-size:30px;font-weight:500;line-height:1;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.plan .flag{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--night);background:var(--gold);padding:5px 10px;border-radius:999px}
.plan .pprice{font-family:var(--serif);font-variant-numeric:lining-nums;-webkit-font-feature-settings:'lnum';font-feature-settings:'lnum';font-size:64px;font-weight:600;letter-spacing:-.01em;margin-top:18px;line-height:1}
.plan .pnote{font-size:13px;letter-spacing:.06em;color:var(--ink2);margin-top:6px}
.plan ul{list-style:none;margin:24px 0 30px;padding:20px 0 0;border-top:1px solid var(--line)}
.plan .pprice.range{font-size:46px;white-space:nowrap}
@media (max-width:400px){.plan .pprice.range{font-size:38px}}
.plist{margin-top:22px;padding:4px 0;border-top:1px solid var(--line)}
.plist-row{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line)}
.plist-p{flex:none;min-width:72px;font-family:var(--serif);font-variant-numeric:lining-nums;-webkit-font-feature-settings:'lnum';font-feature-settings:'lnum';font-size:22px;font-weight:600;color:var(--maroon)}
.plist-n{font-size:14.5px;font-weight:400;line-height:1.5;color:var(--ink)}
.plist+ul{border-top:0;margin-top:14px;padding-top:6px}
.plan li{position:relative;padding-left:26px;margin:10px 0;font-size:15.5px;font-weight:300}
.plan li::before{content:"";position:absolute;left:3px;top:9px;width:7px;height:7px;background:var(--gold);-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.plan .btn{margin-top:auto}
.plan.feat-plan{background:var(--night);background:radial-gradient(120% 90% at 100% 0%,#40161f,var(--night) 70%);border-color:var(--night);color:var(--ivory)}
.plan.feat-plan .pnote{color:rgba(251,245,236,.65)}
.plan.feat-plan .pprice{color:var(--gold2)}
.plan.feat-plan ul{border-top-color:rgba(234,216,174,.2)}
.plan.feat-plan::before{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(234,216,174,.18);box-shadow:0 0 0 26px rgba(234,216,174,.04),0 0 0 52px rgba(234,216,174,.03);pointer-events:none}

/* voices */
.quotes{display:-ms-grid;display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:860px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{margin:0;padding:26px;border-radius:18px;background:var(--band)}
.quote p{font-family:var(--serif);font-size:23px;line-height:1.3}
.quote figcaption{margin-top:14px;font-size:14px;color:var(--ink2)}

/* faq */
.faq{background:var(--paper)}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:22px 48px 22px 0;position:relative;font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.25;transition:color .2s ease}
summary::-webkit-details-marker{display:none}
summary::before,summary::after{content:"";position:absolute;right:10px;top:50%;width:14px;height:1.5px;background:var(--gold3);transition:transform .3s ease}
summary::after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
details[open] summary::after{-webkit-transform:rotate(0);transform:rotate(0)}
summary:hover{color:var(--maroon)}
details p{padding:0 40px 24px 0;color:var(--ink2);font-weight:300}
details[open] p{animation:faqIn .35s ease}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
html.reduce details[open] p{animation:none}

/* closing */
.close{position:relative;overflow:hidden;padding:110px 0;background:var(--night);background:radial-gradient(90% 70% at 50% 0%,#40161f,var(--night) 70%);color:var(--ivory)}
.close .wrap{position:relative}
.close h2{color:#fff;margin:20px 0 14px}
.close p{color:rgba(251,245,236,.72);font-weight:300;margin-bottom:32px}
.close-mark{display:block;width:64px;height:68px;margin:0 auto}
.close .handle{margin:24px 0 0;letter-spacing:.08em}
.close .handle a{color:var(--gold2);text-decoration:none;border-bottom:1px solid rgba(234,216,174,.4)}

/* the "link not found" page */
.nf{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.nf h1{font-size:40px;font-size:clamp(2.2rem,7vw,3.4rem);color:#fff;margin:22px 0 14px}
.nf p{max-width:460px;margin-left:auto;margin-right:auto}

/* footer */
.foot{padding:48px 0 100px;background:var(--paper);border-top:1px solid var(--line)}
.foot-in{display:flex;flex-direction:column;gap:10px}
.foot-line{color:var(--ink2);font-weight:300}
.foot-links a{color:var(--ink2);margin-right:16px}
.foot-styles{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.foot-styles a{color:var(--ink2)}
.styles{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:22px;font-size:14px;color:var(--ink2)}
.styles a{color:var(--maroon)}
.faq-more{margin-top:28px}
.faq-more a{color:var(--maroon)}

/* floating Instagram */
.float-ig{position:fixed;right:16px;bottom:16px;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:45;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#d62976;background:linear-gradient(45deg,#feda75,#fa7e1e 25%,#d62976 50%,#962fbf 75%,#4f5bd5);color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.25);transform:scale(0);visibility:hidden;transition:transform .3s cubic-bezier(.2,1.4,.4,1),visibility 0s linear .3s}
.float-ig svg{width:28px;height:28px}
.float-ig.on{transform:scale(1);visibility:visible;transition-delay:0s}

/* preview dialog */
.preview{position:fixed;left:0;top:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center}
.pv-backdrop{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(23,13,18,.9)}
.pv-panel{position:relative;width:100%;max-width:880px;max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--paper);display:flex;flex-direction:column;align-items:center;gap:24px;padding:58px 20px 30px}
@media (min-width:760px){.pv-panel{flex-direction:row;align-items:center;gap:46px;padding:40px 46px;border-radius:24px;max-height:94vh}}
.pv-close{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:26px;line-height:1;cursor:pointer;color:var(--ink);z-index:2}
.device.big{flex:none;width:250px}
@media (min-width:760px){.device.big{width:290px}}
@media (min-width:760px) and (max-height:760px){.device.big{width:240px}}
.shield{position:absolute;left:0;top:0;right:0;bottom:0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pv-info{max-width:380px}
.pv-tag{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold3)}
.pv-info h3{font-family:var(--serif);font-size:44px;font-weight:500;line-height:1;margin:8px 0 12px}
.pv-info p{color:var(--ink2);font-weight:300;margin-bottom:22px}
.pv-info .btn{display:flex;width:100%;margin-bottom:10px}
.pv-info .fine{margin:8px 0 0}
html.pv-open,html.pv-open body{overflow:hidden}

/* old browsers without flex gap */
.nogap .actions>*{margin:6px}.nogap .tabs>*{margin:4px 13px}.nogap .logo>*+*{margin-left:10px}.nogap .nav>*+*{margin-left:24px}
.nogap .cap>*+*{margin-left:16px}.nogap .card .meta>*+*{margin-left:10px}.nogap .plans>*+*,.nogap .steps>*+*{margin-top:20px}.nogap .bento>*+*{margin-left:14px}

/* "message copied" note shown when a contact button copies its message for pasting into Instagram */
.toast{position:fixed;left:50%;bottom:24px;bottom:max(24px,env(safe-area-inset-bottom));z-index:70;max-width:calc(100% - 32px);-webkit-transform:translate(-50%,20px);transform:translate(-50%,20px);opacity:0;padding:12px 18px;border-radius:12px;background:var(--night);color:var(--ivory);font-size:14px;line-height:1.4;box-shadow:0 14px 34px rgba(0,0,0,.3);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.toast.on{opacity:1;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}

/* video loading ring */
.spin{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .8s linear infinite;transition:opacity .25s ease;pointer-events:none;z-index:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* touch screens: a live blur behind the header would have to be redrawn on every frame of the turning stage */
@media (hover:none){
  .tile:hover,.plan:hover{transform:none;box-shadow:none} /* a tap would leave the card lifted */
  .top,.top.dark.line{-webkit-backdrop-filter:none;backdrop-filter:none}
  .top:not(.dark){background:rgba(255,252,247,.98)}
  .top.dark.line{background:rgba(23,13,18,.94)}
}
/* budget phones: skip the costly paint effects */
html.lowend .top,html.lowend .top.dark.line{-webkit-backdrop-filter:none;backdrop-filter:none}
html.lowend .top:not(.dark){background:rgba(255,252,247,.98)}
html.lowend .top.dark.line{background:rgba(23,13,18,.94)}
html.lowend .ring .device{box-shadow:0 0 0 1px rgba(0,0,0,.25)}
html.lowend .ring .device::after{box-shadow:0 0 0 1px rgba(234,216,174,.55)}
html.lowend .tile:hover,html.lowend .plan:hover{transform:none;box-shadow:none}

/* without script the stage can't turn and the grid can't fill, so say where the designs are */
.no-js .show{display:none}
.nojs-note{margin:0 auto 30px;max-width:520px;text-align:center;color:var(--ink2)}
.nojs-list{margin:0 auto 30px;max-width:520px;padding:0;list-style:none;text-align:center;color:var(--ink2);line-height:1.9}

/* reveal on scroll (classes are added by main.js only, so nothing is hidden without script) */
.rv{opacity:0;-webkit-transform:translateY(24px);transform:translateY(24px);transition:opacity .75s ease var(--d,0ms),transform .85s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.rv.in{opacity:1;-webkit-transform:none;transform:none}
/* in the sideways feature row the cards only fade in; rising would poke out of the row */
@media (max-width:759px){.bento .rv{-webkit-transform:none;transform:none}}