/* ============================================================
   BURAQ — shared brand system (v2)
   One component set, three skins, swapped by [data-brand].
   Ported from Grok's tokens; carries our commerce components.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&family=Outfit:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  --font-sans:"Outfit",ui-sans-serif,system-ui,sans-serif;
  --font-display:"Fraunces","Times New Roman",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  /* house (default) */
  --page:#100e0c; --copy:#f3ede3; --muted:#9a9288;
  --accent:#b0894f; --accent-fg:#100e0c;
  --line:rgb(243 237 227 / .14); --line-2:rgb(243 237 227 / .07);
  --elevated:#1a1714; --elevated-2:#221c17;
  --bronze:#b0894f; --champagne:#e4d2a8; --oxblood:#6b1c28; --bone:#f3ede3; --ink:#100e0c;
  --shadow:0 20px 50px -24px rgb(0 0 0 / .7);
  --text-display:clamp(3.1rem,8.5vw,7.5rem);
  --text-title:clamp(1.9rem,4.4vw,3.9rem);
  --text-h2:clamp(1.6rem,3.6vw,2.6rem);
  --max:78rem;
}
[data-brand="house"]{ color-scheme:dark;
  --page:#100e0c; --copy:#f3ede3; --muted:#9a9288; --accent:#b0894f; --accent-fg:#100e0c;
  --line:rgb(243 237 227 / .14); --line-2:rgb(243 237 227 / .07); --elevated:#1a1714; --elevated-2:#221c17;
}
[data-brand="flash"]{ color-scheme:dark;
  --page:#121518; --copy:#f4f1ea; --muted:#8b939c; --accent:#d4b47a; --accent-fg:#121518;
  --line:rgb(244 241 234 / .12); --line-2:rgb(244 241 234 / .06); --elevated:#1c2126; --elevated-2:#232a30;
}
[data-brand="table"]{ color-scheme:light;
  --page:#f3ede3; --copy:#100e0c; --muted:#6e655c; --accent:#6b1c28; --accent-fg:#f3ede3;
  --line:rgb(16 14 12 / .13); --line-2:rgb(16 14 12 / .07); --elevated:#e8e0d4; --elevated-2:#efe7d9;
  --shadow:0 24px 50px -30px rgb(60 30 20 / .35);
}

/* ---- reset ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important; transition-duration:.001ms!important} }
body{margin:0; background:var(--page); color:var(--copy);
  font-family:var(--font-sans); font-weight:400; font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:500; text-wrap:balance}
p{margin:0; text-wrap:pretty}
::selection{background:var(--accent); color:var(--accent-fg)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

/* ---- grain ---- */
.grain{position:relative}
.grain::after{content:""; pointer-events:none; position:fixed; inset:0; z-index:1; opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* ---- type ---- */
.display{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:var(--text-display); line-height:.9; letter-spacing:-.03em}
.title{font-family:var(--font-display); font-weight:500; font-size:var(--text-title); line-height:1.0; letter-spacing:-.02em}
.h2{font-family:var(--font-display); font-weight:500; font-size:var(--text-h2); line-height:1.04; letter-spacing:-.015em}
.kicker{font-family:var(--font-sans); font-size:.6875rem; line-height:1.2; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--muted); margin:0}
.lede{font-size:clamp(1.02rem,1.7vw,1.2rem); color:var(--muted); max-width:40ch}
.mono{font-family:var(--font-mono); font-size:.85em}
.strike{text-decoration:line-through; color:var(--muted); font-weight:400}

/* ---- layout ---- */
.wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.2rem); position:relative; z-index:2}
section{padding:clamp(3rem,7vw,5.5rem) 0; border-top:1px solid var(--line-2)}
.eyebrow{display:flex; align-items:center; gap:.7rem; margin-bottom:1rem}

/* ---- header ---- */
header.site{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--page) 85%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
header.site .bar{max-width:var(--max); margin:0 auto; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1.1rem,4vw,2.2rem)}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-style:italic; font-size:1.25rem; letter-spacing:-.01em}
.brand svg{width:34px; height:34px; flex:none}
.brand span{font-style:normal; font-family:var(--font-sans); font-weight:600; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); align-self:center}
nav.main{display:flex; align-items:center; gap:1.4rem; font-size:.85rem}
nav.main a.lnk{color:var(--muted); font-weight:500}
nav.main a.lnk:hover{color:var(--copy)}
nav.main .tel{font-family:var(--font-mono); font-size:.8rem; color:var(--copy)}
@media (max-width:820px){ nav.main .hidem{display:none} }

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:3.25rem; padding:0 1.5rem;
  font-family:var(--font-sans); font-weight:600; font-size:.92rem; letter-spacing:.02em; cursor:pointer; border:0; white-space:nowrap; transition:transform .12s ease, filter .15s ease, background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--accent); color:var(--accent-fg)}
.btn-solid:hover{filter:brightness(1.08)}
.btn-line{background:transparent; color:var(--copy); border:1px solid var(--line); box-shadow:inset 0 0 0 1px transparent}
.btn-line:hover{border-color:var(--accent); color:var(--copy)}
.btn-sm{height:2.6rem; padding:0 1.1rem; font-size:.82rem}
.btn.block{width:100%}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media img{width:100%; height:100%; object-fit:cover; opacity:.5}
.hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in srgb,var(--page) 40%,transparent), var(--page) 92%), linear-gradient(90deg, var(--page), color-mix(in srgb,var(--page) 20%, transparent))}
.hero-inner{position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:clamp(3.4rem,8vw,7rem) clamp(1.1rem,4vw,2.2rem) clamp(3rem,7vw,5rem)}
.hero .seal{width:clamp(84px,12vw,120px); height:auto; margin-bottom:1.4rem; filter:drop-shadow(0 12px 30px rgb(0 0 0 / .5))}
.hero h1{margin:.4rem 0}
.hero .cta-row{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem}
.hero .sub{margin-top:1.1rem}

/* ---- chips ---- */
.chip{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; padding:.5em .8em; border-radius:2px; border:1px solid var(--line); color:var(--copy); background:color-mix(in srgb, var(--elevated) 60%, transparent)}
.chip .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent)}
.chip.offer{border-color:color-mix(in srgb,var(--accent) 50%, var(--line))}
.chip .now{color:var(--accent); font-weight:600; letter-spacing:.02em}
.chip .clock{font-variant-numeric:tabular-nums; color:var(--muted)}

/* ---- trust strip ---- */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--elevated) 40%, transparent)}
.trust .row{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.trust .cell{padding:1.15rem clamp(1.1rem,3vw,1.6rem); border-left:1px solid var(--line-2)}
.trust .cell:first-child{border-left:0}
.trust .k{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600}
.trust .v{margin-top:.25rem; font-size:.92rem}
@media (max-width:720px){ .trust .row{grid-template-columns:repeat(2,1fr)} .trust .cell:nth-child(3){border-left:0} }

/* ---- section head ---- */
.sec-head .kicker{margin-bottom:.7rem}
.sec-head .h2{max-width:22ch}
.sec-head .lede{margin-top:.8rem}

/* ---- menu (product) ---- */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4rem 0 1.8rem}
.filter{font-family:var(--font-sans); font-size:.8rem; font-weight:500; letter-spacing:.02em; padding:.5rem .95rem; border-radius:24px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; transition:all .14s ease}
.filter:hover{color:var(--copy); border-color:var(--muted)}
.filter[aria-pressed="true"]{background:var(--accent); color:var(--accent-fg); border-color:var(--accent)}
.menu-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.1rem}
.dish{background:var(--elevated); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, border-color .18s ease}
.dish:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 40%, var(--line))}
.dish .ph{aspect-ratio:4/3; overflow:hidden}
.dish .ph img{width:100%; height:100%; object-fit:cover}
.dish .body{padding:1rem 1.05rem 1.15rem; display:flex; flex-direction:column; flex:1}
.dish .tag{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.dish h3{font-family:var(--font-display); font-size:1.18rem; margin-top:.25rem; line-height:1.1}
.dish p{color:var(--muted); font-size:.88rem; margin-top:.45rem; flex:1}
.dish .foot{display:flex; align-items:center; justify-content:space-between; margin-top:.9rem}
.dish .price{font-family:var(--font-mono); font-weight:600; font-size:.95rem}
.dish .price .strike{margin-left:.4rem; font-size:.8rem}
.badges{display:flex; gap:.35rem; margin-top:.5rem; flex-wrap:wrap}
.badge{font-family:var(--font-sans); font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:.15rem .4rem}
.drinks-note{margin-top:1.4rem; color:var(--muted); font-size:.9rem}

/* ---- steps / how it works ---- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.4rem; margin-top:1.6rem}
.step .n{font-family:var(--font-mono); font-size:.85rem; color:var(--accent); font-weight:600}
.step h3{font-family:var(--font-sans); font-weight:600; font-size:1.02rem; margin-top:.55rem}
.step p{color:var(--muted); font-size:.9rem; margin-top:.35rem}

/* ---- split / feature ---- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,4vw,3rem); align-items:center}
@media (max-width:820px){ .split{grid-template-columns:1fr} }
.split .media img{border-radius:16px; box-shadow:var(--shadow); width:100%}
.feature-list{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.6rem}
.feature-list li{padding-left:1.4rem; position:relative; color:var(--muted)}
.feature-list li::before{content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; background:var(--accent); border-radius:1px; transform:rotate(45deg)}
.feature-list li b{color:var(--copy)}

/* ---- portals (house) ---- */
.portals{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
@media (max-width:760px){ .portals{grid-template-columns:1fr} }
.portal{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; padding:1.6rem; text-decoration:none; color:var(--copy)}
.portal img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; z-index:0; transition:transform .5s ease, opacity .3s ease}
.portal::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 20%, color-mix(in srgb,var(--page) 92%, transparent))}
.portal:hover img.bg{transform:scale(1.05); opacity:.5}
.portal > *{position:relative; z-index:2}
.portal .pseal{width:56px; height:56px; margin-bottom:auto; filter:drop-shadow(0 6px 16px rgb(0 0 0 /.5))}
.portal h3{font-family:var(--font-display); font-style:italic; font-size:2.2rem; margin-top:1rem}
.portal p{color:var(--muted); font-size:.92rem; margin-top:.4rem}
.portal .go{font-family:var(--font-sans); font-weight:600; font-size:.85rem; color:var(--accent); margin-top:.9rem; display:inline-flex; gap:.4rem}

/* ---- pricing ---- */
.price-hero{display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap}
.price-hero .big{font-family:var(--font-display); font-size:clamp(2.6rem,6vw,4rem); font-style:italic; color:var(--accent)}
.price-hero .was{font-family:var(--font-mono); color:var(--muted); text-decoration:line-through}
.price-hero .per{color:var(--muted)}

/* ---- FAQ ---- */
.faq{display:grid; gap:0; 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; padding:1.05rem .2rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; font-family:var(--font-display); font-size:1.12rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--font-mono); color:var(--accent); font-size:1.3rem; transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted); font-size:.95rem; padding:0 .2rem 1.15rem; max-width:62ch}

/* ---- forms ---- */
.form{display:grid; gap:1rem; max-width:44rem}
.form .grid2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:560px){ .form .grid2{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:.35rem}
.field label{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600}
.field input,.field textarea,.field select{font-family:var(--font-sans); font-size:.98rem; color:var(--copy); background:var(--elevated); border:1px solid var(--line); border-radius:9px; padding:.75rem .85rem}
.field textarea{resize:vertical; min-height:90px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--accent)}
.days{display:flex; gap:.4rem; flex-wrap:wrap}
.days label{display:inline-flex; align-items:center; gap:.35rem; text-transform:none; letter-spacing:0; font-size:.85rem; color:var(--copy); border:1px solid var(--line); border-radius:20px; padding:.4rem .7rem; cursor:pointer}
.days input{accent-color:var(--accent)}
.form-msg{font-size:.9rem; padding:.7rem .9rem; border-radius:9px; display:none}
.form-msg.ok{display:block; background:color-mix(in srgb,var(--accent) 16%, transparent); border:1px solid color-mix(in srgb,var(--accent) 40%, var(--line))}
.form-msg.err{display:block; background:color-mix(in srgb,#c0392b 16%, transparent); border:1px solid color-mix(in srgb,#c0392b 40%, var(--line)); color:var(--copy)}
.hp{position:absolute; left:-9999px}

/* ---- footer ---- */
footer.site{border-top:1px solid var(--line); padding:clamp(2.4rem,5vw,3.6rem) 0 3rem; margin-top:1rem}
footer.site .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem}
@media (max-width:720px){ footer.site .cols{grid-template-columns:1fr; gap:1.4rem} }
footer.site .brand{margin-bottom:.7rem}
footer.site p, footer.site a{color:var(--muted); font-size:.9rem}
footer.site .fcol h4{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem}
footer.site .fcol a{display:block; margin:.3rem 0; color:var(--copy)}
footer.site .fcol a:hover{color:var(--accent)}
footer.site .legal{margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--line-2); font-size:.76rem; color:var(--muted); line-height:1.7}

/* ---- Mr Flash concierge ---- */
.mf-fab{position:fixed; right:1.1rem; bottom:1.1rem; z-index:50; display:inline-flex; align-items:center; gap:.5rem; height:3rem; padding:0 1.05rem; border-radius:30px; border:1px solid var(--line); background:var(--elevated); color:var(--copy); font-family:var(--font-sans); font-weight:600; font-size:.85rem; cursor:pointer; box-shadow:var(--shadow)}
.mf-fab svg{width:20px; height:20px}
.mf-fab .ping{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.mf-panel{position:fixed; right:1.1rem; bottom:1.1rem; z-index:51; width:min(360px,calc(100vw - 2rem)); max-height:min(560px,calc(100vh - 2rem)); background:var(--page); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); display:none; flex-direction:column; overflow:hidden}
.mf-panel.open{display:flex}
.mf-head{display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem; border-bottom:1px solid var(--line)}
.mf-head svg{width:26px;height:26px}
.mf-head .t{font-family:var(--font-display); font-style:italic; font-size:1.05rem}
.mf-head .x{margin-left:auto; background:none; border:0; color:var(--muted); cursor:pointer; font-size:1.2rem}
.mf-body{padding:1rem; overflow-y:auto; display:flex; flex-direction:column; gap:.7rem; flex:1}
.mf-bub{font-size:.9rem; line-height:1.5; padding:.65rem .8rem; border-radius:12px; max-width:85%}
.mf-bub.bot{background:var(--elevated); align-self:flex-start; border-bottom-left-radius:3px}
.mf-bub.me{background:var(--accent); color:var(--accent-fg); align-self:flex-end; border-bottom-right-radius:3px}
.mf-bub .vouch{margin-top:.5rem; font-family:var(--font-mono); font-weight:600; letter-spacing:.05em; background:var(--accent); color:var(--accent-fg); padding:.3rem .5rem; border-radius:5px; display:inline-block; font-size:.82rem}
.mf-form{display:flex; gap:.5rem; padding:.8rem; border-top:1px solid var(--line)}
.mf-form input{flex:1; font-family:var(--font-sans); background:var(--elevated); border:1px solid var(--line); border-radius:9px; padding:.6rem .7rem; color:var(--copy); font-size:.9rem}
.mf-form input:focus{outline:none; border-color:var(--accent)}
.mf-form button{background:var(--accent); color:var(--accent-fg); border:0; border-radius:9px; padding:0 .9rem; font-weight:600; cursor:pointer}
.mf-disc{font-size:.68rem; color:var(--muted); padding:0 1rem .8rem}

/* ---- utility ---- */
.center{text-align:center}
.mt-s{margin-top:.8rem}.mt-m{margin-top:1.6rem}.mt-l{margin-top:2.6rem}
.js .reveal{opacity:0; transform:translateY(14px)}
.js .reveal.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
@media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1; transform:none} }
.hidden{display:none}