/* Vivere Colorado · Catering
   "Hot metal at night": a dark warm ground, ember and brass for heat, bone for type.
   Tokens are the vivere-colorado site's (OKLCH resolved to hex in the reuse map).
   Anton is a UI face only (step numbers, prices). The wordmark is the locked image,
   never retyped; CATERING beneath it is Barlow 700 with wide tracking. */

:root{
  color-scheme: dark;
  --ember:#E4531F;          /* accents, borders, large type only (3.8:1 under white) */
  --ember-fill:#BE3200;     /* the solid under white text: 5.8:1 */
  --ember-lt:#F08A5E;       /* small accent text on the dark ground */
  --brass:#BA9140;
  --brass-lt:#D8B56C;
  --ok:#5FBF7A;
  --warn:#F0A35E;

  --ground:#140E0A;         /* ink */
  --s1:#1D1713;             /* char: panels */
  --s2:#251D18;             /* raised */
  --s3:#2E251F;             /* rows */
  --s4:#3A2F27;             /* row hover */
  --line:rgb(235 227 216 / .14);
  --line-lit:rgb(235 227 216 / .30);

  --t1:#EBE3D8;             /* bone */
  --t2:#CFC5B9;
  --t3:#ADA194;             /* 6.3:1 on --s3 */

  --f-display:'Anton','Anton FB Impact','Anton FB Sans',Impact,sans-serif;
  --f-body:'Barlow','Barlow FB',system-ui,-apple-system,'Segoe UI',sans-serif;

  --step--1:clamp(.82rem,.79rem + .15vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.6rem,1.35rem + 1.2vw,2.3rem);
  --step-3:clamp(2.2rem,1.6rem + 3vw,3.8rem);

  --r:14px; --r-lg:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgb(0 0 0 / .35),0 4px 12px rgb(0 0 0 / .25);
  --sh-2:0 2px 5px rgb(0 0 0 / .35),0 18px 44px rgb(0 0 0 / .38);
  --maxw:1200px;
  --gutter:clamp(1rem,.7rem + 1.4vw,2rem);
  --abh:68px;
  --top-h:64px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 16px)}
body{background:var(--ground);color:var(--t1);font:400 var(--step-0)/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100dvh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70vw 48vw at 88% -6%, rgb(228 83 31 / .13), transparent 62%),
    radial-gradient(56vw 40vw at 4% 100%, rgb(186 145 64 / .08), transparent 60%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brass-lt)}
a:hover{color:var(--t1)}
h1,h2,h3,h4{line-height:1.15;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--brass-lt);outline-offset:3px;border-radius:6px}
[hidden]{display:none !important}
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:820px}
.skip{position:fixed;top:-100px;left:12px;z-index:200;background:var(--ember-fill);color:#fff;
  padding:11px 17px;border-radius:0 0 10px 10px;font-weight:700;text-decoration:none}
.skip:focus{top:0}
.noscript-note{padding:1rem var(--gutter);color:var(--warn)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ── header ─────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:70;background:rgb(20 14 10 / .9);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(4px)){.top{background:rgb(20 14 10 / .78);backdrop-filter:blur(14px) saturate(1.2)}}
.top-in{max-width:var(--maxw);margin:auto;display:flex;align-items:center;gap:.75rem 1rem;
  padding:.55rem var(--gutter);min-height:var(--top-h)}
.lockup{display:inline-grid;justify-items:center;gap:.18rem;text-decoration:none;color:var(--t1);
  min-height:44px;align-content:center;flex:none}
.lockup-mark{width:clamp(92px,8vw + 60px,124px);height:auto}
.lockup-line{font:700 .62rem/1 var(--f-body);letter-spacing:.42em;text-transform:uppercase;
  color:var(--brass-lt);padding-left:.42em}
.top-sp{flex:1}
.steps{display:flex;gap:.3rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.stp{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .7rem;border-radius:var(--r-pill);
  border:1px solid var(--line);font:600 .8rem var(--f-body);color:var(--t3);white-space:nowrap;
  background:none;cursor:pointer;min-height:44px;min-width:44px;justify-content:center}
.stp .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--s3);color:var(--t2);font:400 .72rem var(--f-display)}
.stp[aria-current="step"]{border-color:var(--brass);color:var(--t1)}
.stp[aria-current="step"] .n{background:var(--brass);color:#1a1208}
.stp.done .n{background:var(--ok);color:#06180c}
.stp:hover{border-color:var(--line-lit);color:var(--t1)}
@media (max-width:860px){
  .stp .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .stp{padding:.4rem;gap:0}
}
/* Below 360px the five step buttons no longer fit beside the wordmark. The bottom bar
   already carries Back, Next and "Step N of 5", so the rail steps aside. */
@media (max-width:359px){.steps{display:none}}
@media (max-width:420px){
  .top-in{gap:.5rem}
  .steps{gap:.15rem}
  .stp{min-width:40px;padding:.3rem}
  .stp[data-go="start"]{display:none}
}

/* ── shared bits ────────────────────────────────────────────────────── */
.eyebrow{font:700 .7rem var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--brass-lt)}
.lede{color:var(--t2);font-size:var(--step-1);line-height:1.45;max-width:58ch;margin-top:.7rem}
.lede-2{color:var(--t2);max-width:60ch;margin-top:.8rem}
.lede-2 b{color:var(--ember-lt);font-weight:700}
.aside-note{margin-top:.9rem;padding:.65rem .85rem;border-left:3px solid var(--brass);background:var(--s1);
  border-radius:0 10px 10px 0;color:var(--t2);font-size:var(--step--1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.7rem 1.15rem;
  border-radius:var(--r-pill);font:700 .95rem var(--f-body);cursor:pointer;min-height:48px;
  border:1px solid var(--line-lit);background:transparent;color:var(--t1);text-decoration:none;
  transition:background .18s,border-color .18s,color .18s,transform .18s}
.btn:hover{border-color:var(--brass-lt);color:var(--brass-lt)}
.btn.primary{background:var(--ember-fill);border-color:var(--ember-fill);color:#fff}
.btn.primary:hover{background:oklch(from var(--ember-fill) calc(l + .05) c h);color:#fff;transform:translateY(-1px)}
.btn.ghost{border-style:dashed}
.btn.big{width:100%;min-height:54px;font-size:1.05rem}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.tbd{display:inline-block;font:600 .74rem/1.5 var(--f-body);color:var(--brass-lt);white-space:nowrap;
  border:1px dashed rgb(186 145 64 / .55);border-radius:5px;padding:0 .4rem;background:rgb(186 145 64 / .08)}
.tag{display:inline-block;font:700 .62rem/1.6 var(--f-body);letter-spacing:.1em;text-transform:uppercase;
  border-radius:4px;padding:0 .4rem;border:1px solid var(--line-lit);color:var(--t2);white-space:nowrap}
.tag.confirm{border-color:rgb(240 163 94 / .6);color:var(--warn)}
.tag.sug{border-color:var(--ember);color:var(--ember-lt)}
.tag.mimis{border-color:rgb(235 227 216 / .35)}
.price{font:400 1.05rem/1 var(--f-display);letter-spacing:.02em;color:var(--t1);white-space:nowrap}

/* ── start view ─────────────────────────────────────────────────────── */
.start .wrap{padding-top:clamp(1.4rem,3vw,2.6rem);padding-bottom:2rem}
.hero h1{font:400 var(--step-3)/1.02 var(--f-display);letter-spacing:.01em;text-transform:uppercase;margin-top:.5rem;max-width:16ch}
.prepared{margin-bottom:1.6rem;padding:1.1rem 1.25rem;border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgb(228 83 31 / .16),rgb(186 145 64 / .07) 60%),var(--s1);
  border:1px solid rgb(228 83 31 / .45);box-shadow:var(--sh-2)}
.prepared-k{font:700 .66rem var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--ember-lt)}
.prepared-v{font:400 var(--step-2)/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;margin-top:.2rem}
.prepared-intro{color:var(--t2);margin-top:.5rem;max-width:64ch}
.prepared-sum{margin-top:.7rem;font-weight:600}
.prepared-sum b{font:400 1.25rem var(--f-display);letter-spacing:.02em;color:var(--t1)}
.prepared-acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}

.ladder-h{font:700 .74rem var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lt);margin-top:2.2rem}
.ladder-sub{color:var(--t3);font-size:var(--step--1);margin-top:.25rem}
.ladder{list-style:none;display:grid;gap:.7rem;margin-top:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,136px),1fr));align-items:end}
@media (min-width:700px){.ladder{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}}
@media (max-width:699px){.ladder{align-items:stretch}.rung a{height:100%;align-content:start;min-height:0;padding:.85rem .85rem .9rem}.rung .r-price{font-size:2rem}.rung.featured{grid-column:1/-1}}
.rung{position:relative}
.rung a{display:grid;gap:.35rem;align-content:end;text-decoration:none;color:var(--t1);
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1rem 1.05rem;
  min-height:calc(150px + var(--lift,0px));box-shadow:var(--sh-1);transition:border-color .18s,transform .18s,background .18s}
.rung a:hover{border-color:var(--brass);transform:translateY(-2px);background:var(--s2)}
.rung .r-n{font:400 .8rem var(--f-display);color:var(--t3);letter-spacing:.06em}
.rung .r-price{font:400 2.4rem/1 var(--f-display);letter-spacing:.01em}
.rung .r-price small{font:600 .78rem var(--f-body);color:var(--t3);letter-spacing:0;margin-left:.25rem}
.rung .r-name{font-weight:700;font-size:1.02rem;line-height:1.25}
.rung .r-k{font-size:var(--step--1);color:var(--t2);line-height:1.4}
.rung.featured a{border-color:var(--ember);background:linear-gradient(170deg,rgb(228 83 31 / .2),transparent 70%),var(--s1)}
.rung.featured .r-n{color:var(--ember-lt)}
@media (min-width:900px){
  .rung:nth-child(1){--lift:0px}.rung:nth-child(2){--lift:22px}.rung:nth-child(3){--lift:44px}
  .rung:nth-child(4){--lift:66px}.rung:nth-child(5){--lift:88px}
}
.ladder-alt{margin-top:.8rem;color:var(--t2);font-size:var(--step--1)}
.ladder-alt a{font-weight:700;display:inline-flex;align-items:center;min-height:44px}

.paths{display:grid;gap:.9rem;margin-top:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.path{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.2rem 1.3rem;display:grid;gap:.6rem;align-content:start}
.path h2{font:400 var(--step-1)/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.path p{color:var(--t2)}
.path .btn{justify-self:start;margin-top:.2rem}
/* Private events at Delta Roadhouse book here now: the brass edge marks the partner path */
.path-rh{border-color:rgb(186 145 64 / .45);
  background:linear-gradient(160deg,rgb(186 145 64 / .1),transparent 65%),var(--s1)}
.path-rh h2{color:var(--brass-lt)}

.contact-card{margin-top:1.6rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--s1);display:grid;gap:.3rem}
.contact-card .k{font:700 .66rem var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lt)}
.contact-card .who{font-weight:700;font-size:1.1rem}
.contact-card p{color:var(--t2)}
.contact-card .lines{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem}
.contact-card .lines a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

/* ── questionnaire ──────────────────────────────────────────────────── */
.qview .wrap{padding-top:clamp(1.2rem,3vw,2.2rem);padding-bottom:2.5rem}
.qview h1{font:400 var(--step-2)/1.08 var(--f-display);text-transform:uppercase;letter-spacing:.015em;margin-top:.4rem}
.qform{display:grid;gap:.9rem;margin-top:1.4rem}
.qf{border:1px solid var(--line);border-radius:var(--r);background:var(--s1);padding:1rem 1.1rem 1.1rem;min-width:0}
.qf legend{font-weight:700;font-size:1.05rem;padding:0 .35rem;margin-left:-.35rem;display:flex;align-items:center;gap:.55rem}
.qn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--s3);
  font:400 .9rem var(--f-display);color:var(--brass-lt);flex:none}
.qf .hint{margin:.35rem 0 .1rem}
.sub-q{margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--line)}
.opts{display:grid;gap:.4rem;margin-top:.6rem}
.opts.inline{grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))}
.opt-row{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;border-radius:10px;background:var(--s3);
  border:1px solid transparent;cursor:pointer;min-height:48px;line-height:1.35}
.opt-row:hover{border-color:var(--line-lit)}
.opt-row:has(input:checked){border-color:var(--brass);background:rgb(186 145 64 / .16)}
.opt-row:has(input:focus-visible){outline:3px solid var(--brass-lt);outline-offset:1px}
.opt-row input{accent-color:var(--brass);width:20px;height:20px;flex:none}
.opt-row.check{margin-top:.7rem}
.qgo{margin-top:.3rem}
.rec{margin-top:1.4rem;padding:1.2rem 1.25rem;border-radius:var(--r-lg);border:1px solid var(--ember);
  background:linear-gradient(160deg,rgb(228 83 31 / .14),transparent 65%),var(--s1);box-shadow:var(--sh-2)}
.rec .rk{font:700 .66rem var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--ember-lt)}
.rec h2{font:400 var(--step-2)/1.08 var(--f-display);text-transform:uppercase;letter-spacing:.015em;margin-top:.25rem}
.rec .rp{margin-top:.35rem;font-weight:600}
.rec ul{margin:.6rem 0 0 1.1rem;color:var(--t2)}
.rec h3{font:700 .7rem var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lt);margin-top:1rem}
.rec .ups{display:grid;gap:.4rem;margin-top:.5rem}
.rec .acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.rec .bnote{margin-top:.6rem;color:var(--warn)}

/* ── builder layout ─────────────────────────────────────────────────── */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1.2rem;align-items:start;
  padding-top:1.2rem;padding-bottom:3rem}
@media (max-width:1000px){.cols{grid-template-columns:minmax(0,1fr)}}
.step{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1rem,2vw,1.5rem);box-shadow:var(--sh-1);min-width:0}
.step > h2{font:400 var(--step-2)/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.015em;
  display:flex;align-items:baseline;gap:.6rem}
.step > h2 .num{font-size:.55em;color:var(--brass-lt);letter-spacing:.08em}
.step > .sub{color:var(--t2);margin-top:.35rem;max-width:66ch}
h3.grp,h4.grp{font:700 .7rem var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lt);margin:1.2rem 0 .1rem}

/* fields */
.row{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));margin-top:.8rem}
.row.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.fld{display:grid;gap:.3rem;min-width:0}
.fld.wide{margin-top:.8rem}
.fld label{font:700 .7rem var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:var(--t2)}
.fld label .opt,legend .opt,label .opt{font-weight:500;letter-spacing:0;text-transform:none;color:var(--t3)}
.fld input,.fld select,.fld textarea{width:100%;background:var(--ground);border:1px solid var(--line-lit);
  border-radius:10px;color:var(--t1);padding:.65rem .8rem;font:16px/1.4 var(--f-body);min-height:48px}
.fld textarea{resize:vertical;min-height:84px}
.fld select option{background:var(--s1);color:var(--t1)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid var(--brass-lt);outline-offset:1px;border-color:transparent}
.fld input:user-invalid{border-color:var(--warn)}
.fld.money{position:relative;max-width:220px}
.fld.money .pre{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--t3);font-weight:700}
.fld.money input{padding-left:1.7rem}
.hint{font-size:var(--step--1);color:var(--t3)}
.hint.small{font-size:.8rem;margin-top:.35rem}
.ferr{color:var(--warn);font-weight:600;min-height:1.2em;margin-top:.5rem;font-size:var(--step--1)}
.echo{margin-top:.9rem;color:var(--t2);min-height:1.2em}
.echo b{color:var(--t1)}
.flags{display:grid;gap:.4rem;margin-top:.6rem}
.flag{padding:.6rem .8rem;border-radius:10px;border:1px solid rgb(240 163 94 / .5);background:rgb(240 163 94 / .08);
  color:var(--t1);font-size:var(--step--1)}
.flag b{color:var(--warn)}
.note-line{padding:.55rem .8rem;border-radius:10px;border:1px solid var(--line);background:var(--s2);color:var(--t2);font-size:var(--step--1)}

/* is the date free? "looks open" is never "available": the team confirms on the call */
.avail{margin-top:.7rem;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--line);border-left-width:4px;
  background:var(--s2);color:var(--t2);font-size:var(--step--1);max-width:70ch}
.avail b{color:var(--t1)}
.avail.open{border-left-color:var(--ok)}
.avail.taken{border-color:rgb(240 163 94 / .5);border-left-color:var(--warn);background:rgb(240 163 94 / .08)}
.avail.taken b{color:var(--warn)}
.avail.past{border-left-color:var(--t3)}

/* choice rows */
.choices{display:grid;gap:.4rem;margin-top:.55rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.choices.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.ch{position:relative;display:block;min-width:0}
.ch input{position:absolute;opacity:0;width:1px;height:1px}
.ch .body{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;background:var(--s3);
  border:1px solid transparent;border-radius:11px;cursor:pointer;min-height:50px;transition:background .15s,border-color .15s;height:100%}
.ch .body:hover{background:var(--s4);border-color:var(--line-lit)}
.ch input:checked + .body{background:rgb(186 145 64 / .17);border-color:var(--brass)}
.ch input:focus-visible + .body{outline:3px solid var(--brass-lt);outline-offset:1px}
.ch input:disabled + .body{opacity:.5;cursor:not-allowed}
.ch .info{flex:1;min-width:0;display:grid;gap:.12rem}
.ch .lab{font-weight:600;line-height:1.3;display:flex;flex-wrap:wrap;gap:.3rem .45rem;align-items:center}
.ch .inc{font-size:.84rem;color:var(--t2);line-height:1.4}
.ch .mark{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-lit);
  display:grid;place-items:center;font-size:12px;color:transparent;transition:all .15s}
.ch input[type=checkbox] + .body .mark{border-radius:6px}
.ch input:checked + .body .mark{background:var(--brass);border-color:var(--brass);color:#1a1208}
.ch .side{flex:none;text-align:right;display:grid;gap:.1rem;justify-items:end}
@media (max-width:480px){
  /* price chips drop under the label, so the label keeps the row's width */
  .ch .body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"info mark" "side mark";column-gap:.6rem}
  .ch .info{grid-area:info}
  .ch .side{grid-area:side;display:flex;flex-wrap:wrap;gap:.2rem .45rem;align-items:baseline;justify-items:start;text-align:left;margin-top:.25rem}
  .ch .side:empty{display:none}
  .ch .mark{grid-area:mark;align-self:center}
}
.qty{display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem}
.qty button{width:44px;height:44px;border-radius:10px;border:1px solid var(--line-lit);background:var(--ground);color:var(--t1);
  font:700 1.1rem var(--f-body);cursor:pointer}
.qty output{min-width:2ch;text-align:center;font:400 1.1rem var(--f-display)}

/* packages */
.pk-grid{display:grid;gap:.6rem;margin-top:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.pk{position:relative;display:block}
.pk input{position:absolute;opacity:0;width:1px;height:1px}
.pk .body{display:grid;gap:.3rem;align-content:start;height:100%;padding:.9rem 1rem;border-radius:var(--r);
  background:var(--s3);border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}
.pk .body:hover{background:var(--s4);border-color:var(--line-lit)}
.pk input:checked + .body{border-color:var(--brass);background:rgb(186 145 64 / .15);box-shadow:inset 0 0 0 1px var(--brass)}
.pk input:focus-visible + .body{outline:3px solid var(--brass-lt);outline-offset:2px}
.pk.featured .body{border-color:rgb(228 83 31 / .55)}
.pk .p-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.pk .p-n{font:400 .78rem var(--f-display);color:var(--t3);letter-spacing:.06em}
.pk.featured .p-n{color:var(--ember-lt)}
.pk .p-price{font:400 1.7rem/1 var(--f-display)}
.pk .p-price small{font:600 .72rem var(--f-body);color:var(--t3);margin-left:.15rem}
.pk .p-name{font-weight:700;line-height:1.25}
.pk .p-k{font-size:.86rem;color:var(--t2);line-height:1.4}
.pk .p-band{font-size:.78rem;color:var(--t3)}
.pk-detail{margin-top:1.2rem}
.pk-detail:empty{display:none}
.pk-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;align-items:baseline;
  padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.pk-head h3{font:400 var(--step-1)/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.pk-head .ph{font-weight:600;color:var(--t2)}
.pk-head .ph b{font:400 1.3rem var(--f-display);color:var(--t1)}
.pk-style{color:var(--t2);margin-top:.6rem;max-width:68ch}
.covers{display:grid;gap:.9rem;margin-top:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.covers h4{font:700 .68rem var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.covers ul{margin:.35rem 0 0 1.05rem;color:var(--t2);font-size:var(--step--1)}
.move{margin-top:.8rem;padding:.75rem .9rem;border-radius:11px;border:1px solid var(--ember);
  background:rgb(228 83 31 / .1);font-size:var(--step--1)}
.move b{color:var(--ember-lt)}
.samples{margin-top:.9rem;font-size:.84rem;color:var(--t3)}
.incl{margin-top:.4rem;color:var(--t2);font-size:var(--step--1)}

/* partners */
.partner{margin-top:1.1rem;padding:1rem 1.05rem 1.1rem;border-radius:var(--r);border:1px solid var(--line);background:var(--s2)}
.partner-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.3rem 1rem}
.partner-h h3{font-size:1.1rem;font-weight:700}
.partner-who{font-size:.8rem;color:var(--t3)}
.partner.roadhouse{border-left:3px solid var(--brass)}
.partner.mimis{border-left:3px solid var(--t2)}
.pnote{margin-top:.55rem;font-size:var(--step--1);color:var(--t3)}
.pnote a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.licence{margin-top:.7rem;padding:.65rem .85rem;border-radius:10px;border:1px solid var(--line-lit);background:var(--s1);
  font-size:var(--step--1);color:var(--t2)}
.dessert-card{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;
  margin-top:.7rem;padding:.8rem .9rem;border-radius:11px;background:var(--s3)}
.dessert-card .dc-t{display:grid;gap:.15rem;min-width:min(100%,240px);flex:1}
.dessert-card b{font-size:1.02rem}
.dessert-card span{font-size:.86rem;color:var(--t2)}

/* the quote document */
.quote-doc{margin-top:1rem;background:var(--s2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(.9rem,2vw,1.3rem)}
.qd-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1rem;align-items:flex-start;padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.qd-mark{display:grid;gap:.15rem;justify-items:start}
.qd-mark img{width:120px}
.qd-mark span{font:700 .58rem var(--f-body);letter-spacing:.42em;text-transform:uppercase;color:var(--brass-lt);padding-left:.1em}
.qd-for{text-align:right}
@media (max-width:520px){.qd-for{text-align:left}}
.qd-for .k{font:700 .62rem var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.qd-for .v{font:400 1.25rem var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.qd-facts{display:grid;gap:.25rem 1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));margin-top:.8rem;font-size:var(--step--1)}
.qd-facts div{display:grid}
.qd-facts span{color:var(--t3);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.qd-menu{margin-top:.9rem;font-size:var(--step--1);color:var(--t2)}
.qd-menu b{color:var(--t1)}
.qtable-wrap{overflow-x:auto;margin-top:1rem;-webkit-overflow-scrolling:touch}
.qtable{width:100%;border-collapse:collapse;font-size:var(--step--1);font-variant-numeric:tabular-nums}
.qtable th{font:700 .66rem var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:var(--t3);text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--line-lit)}
.qtable td{padding:.6rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.qtable td.n,.qtable th.n{text-align:right;white-space:nowrap}
.qtable .who{display:block;font-size:.76rem;color:var(--t3);margin-top:.12rem}
.qtable .lnote{display:block;font-size:.78rem;color:var(--t3);margin-top:.12rem}
.qtable tr.total td{border-bottom:0;border-top:2px solid var(--line-lit);font-weight:700;font-size:1rem;padding-top:.75rem}
.qtable tr.total td.n{font:400 1.35rem var(--f-display);letter-spacing:.02em}
.qtable tr.high td{color:var(--t3);border-bottom:0;padding-top:.2rem}
@media (max-width:620px){
  .qtable thead{display:none}
  .qtable,.qtable tbody,.qtable tr,.qtable td{display:block;width:100%}
  .qtable tr{padding:.55rem 0;border-bottom:1px solid var(--line)}
  .qtable td{border:0;padding:.08rem 0}
  .qtable td.n{text-align:left;display:flex;justify-content:space-between;gap:1rem}
  .qtable td.n::before{content:attr(data-k);color:var(--t3);font:600 .78rem var(--f-body)}
  .qtable td.n:empty{display:none}
  .qtable tr.total td.n::before{font-size:.86rem}
}
.qd-sec{margin-top:1.1rem}
.qd-sec h3{font:700 .7rem var(--f-body);letter-spacing:.17em;text-transform:uppercase;color:var(--brass-lt)}
.qd-sec ul{margin:.4rem 0 0 1.05rem;color:var(--t2);font-size:var(--step--1);display:grid;gap:.2rem}
.qd-est{margin-top:1.1rem;padding:.8rem .95rem;border-radius:11px;border:1px solid var(--brass);background:rgb(186 145 64 / .1);font-weight:600}
.terms{margin-top:.9rem;border:1px solid var(--line);border-radius:11px;background:var(--s1)}
.terms summary{cursor:pointer;padding:.7rem .9rem;font-weight:700;min-height:48px;display:flex;align-items:center;color:var(--t2)}
.terms .tl{padding:0 .9rem .9rem;display:grid;gap:.45rem}
.terms .t{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .8rem;align-items:baseline;padding-bottom:.45rem;border-bottom:1px solid var(--line);font-size:var(--step--1)}
.terms .t:last-child{border-bottom:0}
.terms .t span:first-child{color:var(--t2)}
.terms .t .tv{text-align:right}
.terms h4{font:700 .68rem var(--f-body);letter-spacing:.15em;text-transform:uppercase;color:var(--t3);margin-top:.5rem}
.q-acts{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}
.copied{min-height:1.2em;margin-top:.45rem;color:var(--ok);font-size:var(--step--1);font-weight:600}

/* send */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.hold{margin-top:1rem;padding:.7rem .9rem;border-radius:10px;background:var(--s2);border:1px solid var(--line);color:var(--t2);font-size:var(--step--1)}
.hold b{color:var(--t1)}
.saved-note{margin:.6rem 0 .9rem;font-size:.8rem;color:var(--t3)}
.sent{padding:1.2rem 1.25rem;border-radius:var(--r);border:1px solid var(--ok);background:rgb(95 191 122 / .08)}
.sent h3{font:400 var(--step-1)/1.15 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.sent p{margin-top:.5rem;color:var(--t2)}
.sent .ref b{font:400 1.3rem var(--f-display);letter-spacing:.08em;color:var(--t1)}
.sent .acts-row{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem}
.fresh{margin-top:1.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;color:var(--t2);font-size:var(--step--1)}

/* ── the summary rail ───────────────────────────────────────────────── */
.rail{position:sticky;top:calc(var(--top-h) + 14px)}
@media (min-width:1001px){.rail{max-height:calc(100dvh - var(--top-h) - var(--abh) - 28px);overflow-y:auto;scrollbar-width:thin;border-radius:var(--r-lg)}}
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem 1.1rem;box-shadow:var(--sh-2)}
.card h2{font:400 1.15rem var(--f-display);text-transform:uppercase;letter-spacing:.03em}
.res{display:grid;gap:.5rem;margin-top:.7rem}
.res .item{display:grid;gap:.1rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.res .item:last-child{border-bottom:0;padding-bottom:0}
.res .k{font:700 .62rem var(--f-body);letter-spacing:.15em;text-transform:uppercase;color:var(--brass-lt)}
.res .v{font-weight:600;line-height:1.3}
.res .m{font-size:.84rem;color:var(--t2)}
.res .big{font:400 1.6rem/1.05 var(--f-display);letter-spacing:.02em}
.res .empty{color:var(--t3);font-size:.9rem}
.card .acts{display:grid;gap:.45rem;margin-top:1rem}
.estline{margin-top:.8rem;font-size:.8rem;color:var(--t3);line-height:1.5}

/* ── app shell: one view at a time ──────────────────────────────────── */
body.app{padding-bottom:calc(var(--abh) + env(safe-area-inset-bottom,0px) + .5rem)}
body.app .view{display:none}
body.app .view.view-on{display:block;animation:viewin .22s ease both}
@keyframes viewin{from{opacity:0;transform:translateY(6px)}}
body.app[data-view="start"] .cols,body.app[data-view="q"] .cols{display:none}

.appbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgb(37 29 24 / .97);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -8px 28px rgb(0 0 0 / .4)}
@supports (backdrop-filter:blur(4px)){.appbar{background:rgb(37 29 24 / .9);backdrop-filter:blur(16px) saturate(1.2)}}
body:not(.app) .appbar{display:none}
.appbar-in{max-width:900px;margin:auto;display:flex;align-items:center;gap:.6rem;min-height:var(--abh);
  padding:.5rem var(--gutter)}
.ab-prog{position:absolute;top:0;left:0;right:0;height:3px;background:rgb(235 227 216 / .1)}
.ab-prog i{display:block;height:100%;width:0;background:var(--brass);transition:width .3s cubic-bezier(.32,.72,0,1)}
.ab-back{flex:none;min-height:48px;padding:.55rem .9rem;border-radius:12px;background:transparent;border:1px solid var(--line-lit);
  color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;font:700 .9rem var(--f-body)}
.ab-back:hover{border-color:var(--brass-lt);color:var(--brass-lt)}
@media (max-width:420px){.ab-back .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ab-back{padding:.55rem .8rem;min-width:48px;justify-content:center}}
.ab-sum{flex:1;min-width:0;text-align:left;background:transparent;border:0;color:inherit;font:inherit;cursor:pointer;
  padding:.2rem .1rem;display:grid;gap:.05rem;border-radius:8px;min-height:48px;align-content:center}
.ab-sum .s1{font:700 .62rem var(--f-body);letter-spacing:.15em;text-transform:uppercase;color:var(--brass-lt)}
/* The estimate comes first and never shrinks; only the package name behind it is cut
   short; the caret that opens "Your event so far" sits outside the clipped text. */
.ab-sum .s2{display:flex;align-items:baseline;gap:.3rem;min-width:0;font-size:.86rem;color:var(--t2);white-space:nowrap}
.ab-sum .ab-tot{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:var(--t1)}
.ab-sum .ab-tot:empty{display:none}
.ab-sum .ab-line{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ab-sum .caret{flex:none;font-size:.6rem;color:var(--t3)}
body:not(.sheetable) .ab-sum .caret{display:none}
.ab-next{flex:none;min-height:48px;padding:.55rem 1.1rem;border-radius:12px;background:var(--ember-fill);border:1px solid var(--ember-fill);
  color:#fff;cursor:pointer;font:700 .92rem var(--f-body);white-space:nowrap}
.ab-next:hover:not(:disabled){background:oklch(from var(--ember-fill) calc(l + .05) c h)}
.ab-next:disabled{opacity:.6;cursor:default}

/* the summary as a bottom sheet on narrow screens */
.sheet-bd{position:fixed;inset:0;z-index:78;background:rgb(0 0 0 / .55)}
@media (max-width:1000px){
  body.app.sheetable .rail{position:fixed;left:0;right:0;bottom:0;z-index:79;max-height:80dvh;overflow-y:auto;
    transform:translateY(101%);pointer-events:none;padding-bottom:calc(var(--abh) + env(safe-area-inset-bottom,0px))}
  body.app.sheetable.sheet-open .rail{transform:translateY(0);pointer-events:auto;animation:sheetup .3s cubic-bezier(.32,.72,0,1)}
  @keyframes sheetup{from{transform:translateY(101%)}}
  body.app.sheetable .rail .card{border-radius:20px 20px 0 0;border-bottom:0;max-width:640px;margin-inline:auto}
  body.app.sheetable .rail .card::before{content:"";display:block;width:40px;height:4px;border-radius:99px;background:var(--line-lit);margin:-.3rem auto .7rem}
}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(160%);z-index:95;
  /* width:max-content, or left:50% caps the shrink-to-fit width at half the screen */
  bottom:calc(var(--abh) + env(safe-area-inset-bottom,0px) + .7rem);width:max-content;max-width:min(94vw,520px);display:flex;align-items:center;gap:.7rem;
  padding:.7rem .9rem;border-radius:12px;background:var(--s3);border:1px solid var(--line-lit);box-shadow:var(--sh-2);
  font-size:.88rem;transition:transform .3s cubic-bezier(.32,.72,0,1)}
.toast.on{transform:translateX(-50%) translateY(0)}
.toast button{flex:none;background:transparent;border:1px solid var(--brass);color:var(--brass-lt);border-radius:9px;
  padding:.35rem .75rem;font:700 .8rem var(--f-body);cursor:pointer;min-height:40px}

/* footer */
.foot{border-top:1px solid var(--line);padding:2rem 0 2.5rem;color:var(--t3);font-size:var(--step--1);margin-top:1rem}
body.app[data-view="s1"] .foot,body.app[data-view="s2"] .foot,body.app[data-view="s3"] .foot,
body.app[data-view="s4"] .foot,body.app[data-view="s5"] .foot{margin-top:0}
.foot-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.foot-coin{width:48px;height:48px;margin-bottom:.5rem}
.foot-name{color:var(--t1);font-weight:700}
.foot-k{font:700 .66rem var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lt)}
.foot-who{list-style:none;display:grid;gap:.3rem;margin-top:.4rem}
.foot a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.foot-est{margin-top:1.2rem;color:var(--t2)}
.sources{margin-top:1rem;border:1px solid var(--line);border-radius:11px}
.sources summary{cursor:pointer;padding:.7rem .9rem;min-height:48px;display:flex;align-items:center;font-weight:700;color:var(--t2)}
.sources > p{padding:0 .9rem}
.sources ul{list-style:none;padding:.6rem .9rem .9rem;display:grid;gap:.5rem}
.sources li{display:grid;gap:.1rem;overflow-wrap:anywhere}
.sources li b{color:var(--t2);font-weight:600}
.sources li span{font-size:.78rem}

/* ── print: the quote and nothing else ──────────────────────────────── */
#printSheet{display:none}
@media print{
  @page{size:letter;margin:14mm}
  /* paper is light: without this Chrome paints the dark canvas into the page edges
     when "Background graphics" is on */
  :root{color-scheme:light}
  html{background:#fff}
  body{background:#fff !important;color:#111 !important;padding:0 !important;font-size:11pt}
  body::before{display:none}
  body > *:not(#printSheet){display:none !important}
  #printSheet{display:block !important;color:#111;
    /* re-point the dark-theme tokens at paper, so every component prints dark on white */
    --t1:#111;--t2:#222;--t3:#555;--s1:#fff;--s2:#fff;--s3:#fff;--s4:#fff;--ground:#fff;
    --line:#d0d0d0;--line-lit:#999;--brass-lt:#6b4a12;--ember-lt:#9a3a10}
  #printSheet .licence{background:none;border-color:#bbb;color:#111}
  #printSheet .quote-doc{background:#fff;border:0;padding:0;margin:0;box-shadow:none}
  #printSheet .qd-head{border-color:#999}
  #printSheet .qd-mark span,#printSheet .qd-sec h3{color:#6b4a12}
  #printSheet .qd-for .k,#printSheet .qd-facts span,#printSheet .qtable th,#printSheet .qtable .who,#printSheet .qtable .lnote{color:#555}
  #printSheet .qd-menu,#printSheet .qd-sec ul{color:#222}
  #printSheet .qtable td,#printSheet .qtable th{border-color:#ccc}
  #printSheet .qtable tr.total td{border-color:#333}
  #printSheet .qtable tr.high td{color:#555}
  #printSheet .tbd{color:#6b4a12;border-color:#b99a5a;background:none}
  #printSheet .qd-est{background:none;border-color:#b99a5a;color:#111}
  #printSheet .terms{background:none;border-color:#ccc}
  #printSheet .terms .t{border-color:#ddd}
  #printSheet .terms .t span:first-child{color:#333}
  #printSheet .flag{background:none;color:#111;border-color:#c77}
  #printSheet .flag b{color:#a33}
  #printSheet .print-foot{margin-top:1rem;font-size:9pt;color:#444;border-top:1px solid #ccc;padding-top:.5rem}
  #printSheet a{color:#111}
  #printSheet .qtable thead{display:table-header-group}
  #printSheet .qtable,#printSheet .qtable tbody{display:table;width:100%}
  #printSheet .qtable tbody{display:table-row-group}
  #printSheet .qtable tr{display:table-row}
  #printSheet .qtable td{display:table-cell}
  #printSheet .qtable td.n::before{content:none}
  #printSheet .qtable tr{break-inside:avoid}
}