/* Search pages: occasions, designs, pricing, questions. Same type, colors and scale as the home page. */
@font-face{font-family:'Celebriza Display';src:url(/assets/site/fonts/display.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Celebriza Text';src:url(/assets/site/fonts/text.woff2) format('woff2');font-weight:400 700;font-display:swap}

:root{
  --ink:#15121c;--soft:#4f4960;--mute:#6f6980;--line:rgba(21,18,28,.1);--pearl:#f6f5fb;
  --hot:#e4145c;--hot2:#ee4a18;--cta:linear-gradient(96deg,var(--hot),var(--hot2));
  --brand:linear-gradient(96deg,#2a7bff 0%,#8f4dff 34%,#f2399b 68%,#ff6a2b 100%);
  --display:'Celebriza Display',system-ui,sans-serif;--body:'Celebriza Text',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--bar:56px;--pad:16px;--max:72rem;
  --a:#8f4dff;--b:#f2399b;
  --lift:0 2px 6px rgba(35,20,70,.07),0 22px 54px -20px rgba(35,20,70,.26);
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html{background:#fff;color:var(--ink);-webkit-text-size-adjust:100%;font-size:16px;scroll-behavior:smooth}
@media(min-width:900px){html{font-size:clamp(16px,min(1.111vw,1.778vh),30px)}:root{--bar:4.2rem;--pad:clamp(24px,4vw,4rem)}}
body{font:400 1.0625rem/1.55 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased;background:#fff}
a{color:inherit}
img,video{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:650;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
em{font-style:normal}
.grad{background:linear-gradient(96deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:2px solid #8f4dff;outline-offset:3px}
[id]{scroll-margin-top:calc(var(--bar) + 12px)}

/* The light behind the page: two soft blooms in the theme colors, fixed, so it costs nothing to scroll. */
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(60vmax 50vmax at 8% -6%,color-mix(in oklab,var(--a) 20%,transparent),transparent 70%),
  radial-gradient(56vmax 46vmax at 104% 10%,color-mix(in oklab,var(--b) 18%,transparent),transparent 70%),
  linear-gradient(#fff 0,#fbfaff 100%)}

/* Bar */
.pbar{position:sticky;top:0;z-index:30;height:calc(var(--bar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad))) 0;display:flex;align-items:center;justify-content:space-between;gap:12px;background:color-mix(in srgb,#fff 82%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.mark{font:700 1.4rem/1 var(--display);letter-spacing:-.015em;text-decoration:none;padding:8px 0}
.pnav{display:flex;align-items:center;gap:clamp(10px,2vw,2rem)}
.pnav a{text-decoration:none;font-weight:500;font-size:.98rem;padding:10px 2px}
.pnav .go{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 5px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600}
.go i{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,#fff 54%,transparent 58%),conic-gradient(#2a7bff,#8f4dff,#f2399b,#ff6a2b,#ffc93c,#2a7bff)}
@media(max-width:899.98px){.wide{display:none!important}}
@media(min-width:900px){.pnav .go{height:2.9rem;padding:0 1.1rem 0 .3rem}.go i{width:2.2rem;height:2.2rem}}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:.88rem;color:var(--mute);padding-top:18px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}

/* Occasion hero: on monitors three designs fan out to the right of the title */
.fan{display:none}
@media(min-width:900px){
  .phero.has-fan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:clamp(24px,4vw,4rem);align-items:center}
  .fan{display:block;position:relative;height:30rem}
  .has-fan h1{font-size:clamp(2.5rem,4.6vw,4.8rem);max-width:none}
  .fan-c{position:absolute;top:50%;left:50%;width:13.5rem;aspect-ratio:9/16;border-radius:1.3rem;overflow:hidden;box-shadow:var(--lift);background:#eee;transition:transform .6s var(--ease)}
  .fan-c img,.fan-c video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .fan-c video{opacity:0;transition:opacity .4s}
  .fan-c video.on{opacity:1}
  .fan-l{transform:translate(-112%,-46%) rotate(-9deg) scale(.88)}
  .fan-r{transform:translate(12%,-46%) rotate(9deg) scale(.88)}
  .fan-m{transform:translate(-50%,-50%);z-index:2;box-shadow:0 30px 70px -24px rgba(35,20,70,.45)}
  .fan:hover .fan-l{transform:translate(-120%,-47%) rotate(-11deg) scale(.88)}
  .fan:hover .fan-r{transform:translate(20%,-47%) rotate(11deg) scale(.88)}
}

.phero{padding:clamp(22px,5vw,3.4rem) 0 clamp(18px,3vw,2.2rem)}
.kick{font-weight:600;font-size:.95rem;color:color-mix(in oklab,var(--a) 82%,#000);margin-bottom:.7rem}
.phero h1{font-size:clamp(2.5rem,10.6vw,5.4rem);max-width:15ch}
.lede{margin-top:1.1rem;font-size:clamp(1.06rem,3.8vw,1.32rem);line-height:1.5;color:var(--soft);max-width:44rem}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 1.5rem;border-radius:999px;font-weight:650;font-size:1.02rem;text-decoration:none;border:0;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.btn-hot{background:var(--cta);color:#fff;box-shadow:0 12px 28px -12px rgba(228,20,92,.55)}
.btn-soft{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line),0 6px 18px -12px rgba(35,20,70,.3)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
@media(max-width:520px){.acts .btn{flex:1 1 100%}}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.3rem;padding:0;list-style:none}
.facts li{font-size:.9rem;font-weight:550;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,#fff 70%,transparent);box-shadow:inset 0 0 0 1px var(--line)}

/* Sections */
.sec{padding:clamp(34px,7vw,5rem) 0 0}
.sec h2{font-size:clamp(1.9rem,7.6vw,3.3rem);max-width:20ch}
.sec .sub{margin-top:.6rem;color:var(--soft);max-width:44rem}

/* Design cards */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2.4vw,1.6rem);margin-top:1.4rem}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dc{display:block;text-decoration:none;color:inherit}
.dc-media{position:relative;aspect-ratio:9/16;border-radius:clamp(16px,2vw,1.4rem);overflow:hidden;background:color-mix(in srgb,var(--ca,#ddd) 30%,#fff);box-shadow:var(--lift);transform:translateZ(0);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.dc-media img,.dc-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dc-media video{opacity:0;transition:opacity .35s}
.dc-media video.on{opacity:1}
.dc:hover .dc-media{transform:translateY(-4px)}
.dc-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:.7rem}
.dc-meta b{font:650 1.08rem/1.2 var(--display);letter-spacing:-.01em}
.price{flex:none;font-size:.82rem;font-weight:650;padding:3px 9px;border-radius:999px;background:color-mix(in oklab,var(--ca,#8f4dff) 14%,#fff);color:color-mix(in oklab,var(--ca,#8f4dff) 70%,#000)}
.dc-line{margin-top:.2rem;font-size:.9rem;line-height:1.35;color:var(--mute)}

/* What guests get */
.feats{display:grid;gap:12px;margin-top:1.4rem;padding:0;list-style:none}
@media(min-width:700px){.feats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.feats{grid-template-columns:repeat(3,1fr)}}
.feats li{padding:1.1rem 1.2rem;border-radius:20px;background:color-mix(in srgb,#fff 78%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
.feats b{display:block;font:650 1.1rem/1.25 var(--display);margin-bottom:.3rem}
.feats span{color:var(--soft);font-size:.96rem}

/* Steps */
.steps{display:grid;gap:12px;margin-top:1.4rem;padding:0;list-style:none;counter-reset:s}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{position:relative;padding:1.2rem 1.2rem 1.2rem 4rem;border-radius:20px;background:#fff;box-shadow:var(--lift)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:1.1rem;top:1.1rem;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;font:700 1rem/1 var(--display);color:#fff;background:var(--a)}
.steps b{display:block;font:650 1.12rem/1.25 var(--display);margin-bottom:.3rem}
.steps span{color:var(--soft);font-size:.96rem}

/* Wording */
.words{display:grid;gap:12px;margin-top:1.4rem}
@media(min-width:900px){.words{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}}
.word{position:relative;padding:1.2rem 1.2rem 3.6rem;border-radius:20px;background:#fff;box-shadow:var(--lift)}
.word small{display:block;font-size:.8rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in oklab,var(--a) 80%,#000);margin-bottom:.5rem}
.word p{font-size:1.02rem;line-height:1.5}
.copy{position:absolute;left:1.2rem;bottom:1rem;height:36px;padding:0 14px;border-radius:999px;border:0;background:var(--pearl);font-weight:600;font-size:.88rem;cursor:pointer;color:var(--ink)}
.copy:hover{background:#ecebf5}
.when{margin-top:1rem;font-size:1.08rem;line-height:1.55;max-width:46rem;padding:1.1rem 1.2rem;border-radius:20px;background:color-mix(in oklab,var(--a) 8%,#fff);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--a) 22%,transparent)}

/* Questions */
.faq{margin-top:1.2rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:1.1rem 0;font:650 1.1rem/1.3 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{padding:0 0 1.2rem;color:var(--soft);max-width:46rem}

/* Links to other occasions */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.2rem;padding:0;list-style:none}
.chips a{display:inline-block;text-decoration:none;font-weight:550;font-size:.96rem;padding:10px 15px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 4px 14px -10px rgba(35,20,70,.25)}
.chips a:hover{box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--a) 50%,transparent)}

/* Closing call */
.close{margin:clamp(40px,8vw,6rem) 0 0;padding:clamp(28px,6vw,4rem) clamp(20px,5vw,4rem);border-radius:clamp(24px,3vw,2.2rem);color:#fff;background:radial-gradient(120% 140% at 0 0,color-mix(in oklab,var(--a) 85%,#000) 0,transparent 60%),radial-gradient(120% 140% at 100% 100%,color-mix(in oklab,var(--b) 85%,#000) 0,transparent 60%),#1b1626;overflow:hidden}
.close h2{font-size:clamp(2rem,8vw,3.6rem);max-width:16ch}
.close p{margin-top:.8rem;opacity:.86;max-width:36rem}
.close .btn{margin-top:1.4rem;background:#fff;color:var(--ink)}

/* Design page: on phones the name comes first, then the clip, then price and buttons;
   on monitors the clip stands on the left and the words on the right. */
.dhero{display:grid;gap:18px;padding:clamp(14px,3vw,2.6rem) 0 0;align-items:start}
.dh-media{position:relative;width:min(74vw,21rem);margin:0 auto;aspect-ratio:9/16;border-radius:clamp(22px,2.6vw,1.8rem);overflow:hidden;box-shadow:var(--lift);background:color-mix(in srgb,var(--a) 20%,#fff)}
.dh-media img,.dh-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(min-width:900px){
  .dhero{grid-template-columns:minmax(0,23rem) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(28px,5vw,4.5rem);row-gap:0}
  .dh-media{grid-row:1 / span 2;grid-column:1;width:100%;margin:0}
  .dh-head{grid-column:2;align-self:end;padding-top:2rem}
  .dh-body{grid-column:2}
}
.dh-head h1{font-size:clamp(2.6rem,11vw,5rem)}
.dh-kw{margin-top:.45rem;font:600 clamp(1.1rem,4vw,1.45rem)/1.3 var(--display);letter-spacing:-.01em}
.dh-line{margin-top:.4rem;font-size:1.12rem;color:var(--soft)}
@media(min-width:900px){.dh-line{margin-top:1rem}}
.dh-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.1rem;padding:0;list-style:none}
.dh-row li{font-size:.92rem;font-weight:600;padding:7px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.dh-row li.big{background:var(--ink);color:#fff;box-shadow:none}
.demo{display:inline-block;margin-top:1rem;font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:4px}

/* All designs page */
.cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-top:1.2rem;padding:2px 0 4px}
.cats::-webkit-scrollbar{display:none}
.cats a{flex:none}

/* Price page */
.tiers{display:grid;gap:14px;margin-top:1.4rem}
@media(min-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{padding:1.4rem;border-radius:24px;background:#fff;box-shadow:var(--lift)}
.tier .amt{font:700 clamp(2.6rem,9vw,3.6rem)/1 var(--display);letter-spacing:-.03em}
.tier .amt small{font-size:.4em;font-weight:600;color:var(--mute);letter-spacing:0}
.tier p{margin-top:.6rem;color:var(--soft)}
.tier a{display:inline-block;margin-top:.9rem;font-weight:600}

/* Footer */
.pfoot{margin-top:clamp(48px,9vw,7rem);padding:clamp(32px,6vw,4rem) 0 calc(28px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
.fcols{display:grid;gap:26px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.fcols{grid-template-columns:repeat(5,minmax(0,1fr))}}
.fcols h3{font:650 1rem/1.2 var(--display);letter-spacing:0;margin-bottom:.7rem}
.fcols ul{list-style:none;padding:0;display:grid;gap:.45rem}
.fcols a{text-decoration:none;color:var(--soft);font-size:.94rem}
.fcols a:hover{color:var(--ink)}
.fend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--mute)}
.fend a{text-decoration:none}


/* Personal design request */
.pform{display:grid;gap:14px;margin-top:1.4rem;max-width:40rem;padding:clamp(18px,4vw,1.8rem);border-radius:24px;background:#fff;box-shadow:var(--lift)}
.pform label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
.pform small{font-weight:500;color:var(--mute)}
.pform input,.pform select,.pform textarea{width:100%;min-height:50px;border-radius:14px;border:1.5px solid var(--line);background:var(--pearl);padding:12px 14px;font:500 16px/1.4 var(--body);color:var(--ink)}
.pform textarea{min-height:130px;resize:vertical}
.pform input:focus,.pform select:focus,.pform textarea:focus{outline:2px solid #8f4dff;outline-offset:1px}
.pform .two{display:grid;gap:14px}
@media(min-width:600px){.pform .two{grid-template-columns:1fr 1fr}}
.pform .err{min-height:1.2em;color:var(--hot);font-weight:600;font-size:.94rem}
.pform .btn{width:100%}
.pform .fine{font-size:.84rem;color:var(--mute)}
.pform [aria-invalid="true"]{border-color:var(--hot)}
.pdone{margin-top:1.4rem;max-width:40rem;padding:1.6rem;border-radius:24px;background:#fff;box-shadow:var(--lift)}
.pdone h2{font-size:clamp(1.8rem,7vw,2.6rem)}
.pdone p{margin-top:.6rem;color:var(--soft)}
.pform select{-webkit-appearance:none;appearance:none;padding-right:40px;background:var(--pearl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4960' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px}

/* Guides: a table that scrolls sideways on phones, never the page */
.tbl-wrap{margin-top:1.2rem;overflow-x:auto;border-radius:20px;background:#fff;box-shadow:var(--lift);-webkit-overflow-scrolling:touch}
.tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:.96rem}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font:650 .82rem/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);background:var(--pearl)}
.tbl tbody th{font-weight:650}
.tbl tbody th a{text-decoration:none}
.tbl tbody th a:hover{text-decoration:underline}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.feats li b a{text-decoration:none}
/* On phones each row of a guide table becomes a small card */
@media(max-width:640px){
  .tbl-wrap{overflow:visible;background:none;box-shadow:none}
  .tbl{min-width:0}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:100%}
  .tbl tr{margin-bottom:10px;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
  .tbl th,.tbl td{padding:0;border:0}
  .tbl tbody th{font-size:1.04rem;margin-bottom:6px}
  .tbl td{display:flex;gap:10px;font-size:.95rem;color:var(--soft);padding:2px 0}
  .tbl td::before{content:attr(data-l);flex:none;width:6.2rem;font-weight:600;color:var(--ink)}
}