/* ============================================================
   Grilzo Customer Support — poster + order ticket
   ============================================================ */
:root{
  --char:#17110E; --char-2:#241A15; --char-3:#33241C;
  --chilli:#D7261E; --chilli-d:#A81C16; --mustard:#F5B31B;
  --cream:#FFF3DF; --cream-2:#FFE9C6; --ink-2:#5E4A3E; --line:#E4CFAC;
  --green:#3F7A3F; --shell:min(1160px,92vw);
  --body:'DM Sans',system-ui,sans-serif;
  --disp:'Anton',Impact,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--cream);color:var(--char);font-family:var(--body);
  font-size:16.5px;line-height:1.66;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--chilli-d);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--chilli);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:1;margin:0;
  letter-spacing:.005em;text-transform:uppercase}
p{margin:0 0 1rem}
.shell{width:var(--shell);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--mustard);color:var(--char);padding:.6rem 1rem}
code{font-family:var(--mono);font-size:.85em;background:var(--cream-2);padding:.1em .38em}

/* header */
.top{position:sticky;top:0;z-index:40;background:var(--char);border-bottom:4px solid var(--mustard)}
.top .shell{display:flex;align-items:center;gap:1.2rem;height:72px}
.brand{display:flex;align-items:center;gap:.7rem}
.brand i{display:block;width:32px;height:32px;background:var(--chilli);border-radius:8px;
  position:relative;flex:0 0 auto;transform:rotate(-6deg)}
.brand i::before{content:'';position:absolute;left:6px;top:9px;width:20px;height:4px;
  background:var(--mustard);box-shadow:0 7px 0 var(--cream)}
.brand b{font-family:var(--disp);font-size:1.28rem;color:var(--cream);display:block;line-height:1.05;
  letter-spacing:.02em}
.brand small{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--mustard);display:block}
.nav{margin-left:auto;display:flex;gap:1.1rem;align-items:center}
.nav a{font-size:.85rem;font-weight:500;color:#D9C9B9}
.nav a:hover,.nav a[aria-current]{color:var(--mustard);text-decoration:none}
.nav a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px}
.btn{display:inline-block;font-family:var(--disp);font-size:.95rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.7rem 1.4rem;border:3px solid var(--char);color:var(--char);
  background:var(--cream);cursor:pointer;transition:.14s;border-radius:6px;
  box-shadow:4px 4px 0 var(--char)}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--char);text-decoration:none}
.btn--solid{background:var(--mustard)}
.btn--red{background:var(--chilli);color:var(--cream);border-color:var(--char)}
.btn--red:hover{color:var(--cream)}
.nav .btn{padding:.5rem 1rem;font-size:.85rem;box-shadow:3px 3px 0 var(--mustard);border-color:var(--cream)}
.burger{display:none;margin-left:auto;background:var(--chilli);border:2px solid var(--cream);
  color:var(--cream);width:46px;height:40px;font-size:1.1rem;cursor:pointer;border-radius:6px}

/* hero */
.hero{padding:4rem 0 3rem;background:var(--char);color:var(--cream);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;opacity:.10;pointer-events:none;
  background-image:radial-gradient(var(--mustard) 1.5px,transparent 1.6px);background-size:16px 16px}
.hero .shell{position:relative;z-index:1}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--char);background:var(--mustard);padding:.4rem .85rem;
  margin-bottom:1.5rem;transform:rotate(-1.2deg)}
.hero h1{font-size:clamp(2.7rem,7.6vw,5.6rem);max-width:15ch;color:var(--cream);line-height:.94}
.hero h1 span{color:var(--mustard)}
.hero .lede{font-size:1.1rem;color:#DCC9B7;max-width:58ch;margin-top:1.4rem}
.cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}

/* order ticket — signature element */
.ticket{margin-top:3rem;background:var(--cream);color:var(--char);padding:0 0 1.4rem;
  position:relative;filter:drop-shadow(0 10px 0 rgba(0,0,0,.18))}
.ticket::before,.ticket::after{content:'';position:absolute;left:0;right:0;height:10px;
  background:radial-gradient(circle at 6px 0, transparent 0 6px, var(--cream) 6px);
  background-size:16px 10px}
.ticket::before{top:-9px;transform:rotate(180deg)}
.ticket::after{bottom:-9px}
.ticket__bar{background:var(--chilli);color:var(--cream);padding:.6rem 1.2rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap}
.tk__grid{display:grid;grid-template-columns:repeat(4,1fr);padding:.4rem 0}
.tk__cell{padding:1.4rem 1.2rem;border-right:2px dashed var(--line)}
.tk__cell:last-child{border-right:0}
.tk__cell dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:.45rem}
.tk__cell dd{margin:0;font-family:var(--disp);font-size:2rem;line-height:.98}
.tk__cell small{display:block;font-size:.76rem;color:var(--ink-2);margin-top:.5rem;line-height:1.5}
@media(max-width:820px){.tk__grid{grid-template-columns:1fr 1fr}
  .tk__cell:nth-child(2n){border-right:0}
  .tk__cell{border-bottom:2px dashed var(--line)}}

/* sections */
.sec{padding:4.2rem 0}
.sec--dark{background:var(--char);color:#D9C9B9}
.sec--dark h2,.sec--dark h3{color:var(--cream)}
.sec--dark p,.sec--dark .sub{color:#C4B2A2}
.sec--red{background:var(--chilli);color:#FFE7E4}
.sec--red h2,.sec--red h3{color:#fff}
.sec--red p,.sec--red .sub{color:#FFD8D3}
.sec--mustard{background:var(--mustard);color:var(--char)}
.sec--mustard p,.sec--mustard .sub{color:#5A4308}

.stamp{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;border:3px solid var(--chilli);color:var(--chilli);padding:.35rem .8rem;
  transform:rotate(-1.6deg);margin-bottom:1.6rem}
.sec--dark .stamp{border-color:var(--mustard);color:var(--mustard)}
.sec--red .stamp{border-color:#fff;color:#fff}
.sec--mustard .stamp{border-color:var(--char);color:var(--char)}
h2.big{font-size:clamp(2rem,5vw,3.4rem);max-width:19ch;margin-bottom:1rem;line-height:.98}
.sub{color:var(--ink-2);max-width:64ch;font-size:1.02rem}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));gap:1.2rem;margin-top:2.2rem}
.card{background:var(--cream);border:3px solid var(--char);border-radius:10px;padding:1.5rem 1.4rem;
  box-shadow:6px 6px 0 var(--char)}
.sec--dark .card{background:var(--char-2);border-color:var(--mustard);box-shadow:6px 6px 0 #0C0806}
.sec--red .card{background:var(--chilli-d);border-color:#fff;box-shadow:6px 6px 0 #7C130F}
.sec--mustard .card{box-shadow:6px 6px 0 var(--char)}
.card h3{font-size:1.15rem;margin-bottom:.6rem}
.card p{font-size:.93rem;color:var(--ink-2);margin-bottom:0}
.sec--dark .card p{color:#C4B2A2}
.sec--red .card p{color:#FFD8D3}
.card .tag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;background:var(--mustard);color:var(--char);padding:.24rem .55rem;
  margin-bottom:.85rem}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:2.8rem;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:2rem}}

/* menu-board list with dotted leaders */
.menu{margin-top:2rem;border-top:3px solid var(--char)}
.sec--dark .menu{border-color:var(--mustard)}
.menu__row{display:flex;align-items:baseline;gap:.6rem;padding:.85rem 0;
  border-bottom:2px dashed var(--line)}
.sec--dark .menu__row{border-color:#3A2A20}
.menu__row b{font-family:var(--disp);font-size:1.02rem;letter-spacing:.02em;flex:0 0 auto;
  text-transform:uppercase}
.menu__dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px);min-width:20px}
.menu__row span{font-family:var(--mono);font-size:.86rem;flex:0 0 auto;color:var(--ink-2)}
.sec--dark .menu__row span{color:#C4B2A2}

/* order-flow rows */
.rows{margin-top:2rem;display:grid;gap:1rem}
.row{background:var(--cream);border:3px solid var(--char);border-radius:10px;padding:1.4rem 1.5rem;
  display:grid;grid-template-columns:120px 1fr;gap:1.5rem;box-shadow:5px 5px 0 var(--char)}
.sec--dark .row{background:var(--char-2);border-color:var(--mustard);box-shadow:5px 5px 0 #0C0806}
.row__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--chilli);color:var(--cream);padding:.42rem .55rem;text-align:center;height:fit-content;
  border-radius:5px}
.row h3{font-size:1.16rem;margin-bottom:.5rem}
.row p{font-size:.94rem;color:var(--ink-2);margin-bottom:.6rem}
.sec--dark .row p{color:#C4B2A2}
.row ul{margin:.4rem 0 0;padding-left:1.15rem;color:var(--ink-2);font-size:.92rem}
.sec--dark .row ul{color:#C4B2A2}
.row ul li{margin-bottom:.32rem}
@media(max-width:640px){.row{grid-template-columns:1fr;gap:.7rem}.row__k{width:fit-content}}

/* tables */
.tblwrap{overflow-x:auto;margin-top:1.8rem;border:3px solid var(--char);border-radius:10px;
  background:var(--cream);box-shadow:6px 6px 0 var(--char)}
.sec--dark .tblwrap{background:var(--char-2);border-color:var(--mustard);box-shadow:6px 6px 0 #0C0806}
.tbl{width:100%;border-collapse:collapse;font-size:.91rem}
.tbl caption{text-align:left;padding:.85rem 1.1rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.15em;text-transform:uppercase;background:var(--char);color:var(--mustard)}
.tbl th,.tbl td{padding:.78rem 1.05rem;text-align:left;vertical-align:top;
  border-bottom:2px dashed var(--line)}
.sec--dark .tbl th,.sec--dark .tbl td{border-color:#3A2A20;color:#C4B2A2}
.tbl thead th{font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;
  background:var(--cream-2);color:var(--char);font-weight:700}
.sec--dark .tbl thead th{background:var(--char-3);color:var(--mustard)}
.tbl td.num,.tbl th.num{text-align:right;font-family:var(--mono);white-space:nowrap}
.tbl tfoot td{background:var(--mustard);color:var(--char);font-weight:700;font-family:var(--mono)}
.tbl tbody tr:last-child td{border-bottom:0}

/* lists */
.ticks,.crosses{list-style:none;padding:0;margin:1.3rem 0 0}
.ticks li,.crosses li{position:relative;padding-left:2.1rem;margin-bottom:.82rem;color:var(--ink-2);
  font-size:.96rem}
.sec--dark .ticks li,.sec--dark .crosses li{color:#C4B2A2}
.ticks li::before{content:'✔';position:absolute;left:0;color:var(--green);font-weight:700}
.sec--dark .ticks li::before{color:#7BC47B}
.crosses li::before{content:'✖';position:absolute;left:0;color:var(--chilli);font-weight:700}
.sec--dark .crosses li::before{color:#FF7A72}

.plain{border:3px solid var(--chilli);background:#FFE9E7;border-radius:10px;padding:1.8rem 1.7rem;
  margin-top:2.2rem;box-shadow:6px 6px 0 var(--chilli)}
.plain h3{color:var(--chilli-d);font-size:1.24rem;margin-bottom:.8rem}
.plain p{color:#6B2E2A;font-size:.96rem}
.plain p:last-child{margin-bottom:0}
.note{border-left:5px solid var(--mustard);background:var(--cream-2);padding:.95rem 1.15rem;
  color:var(--ink-2);font-size:.92rem;margin:1.5rem 0}
.sec--dark .note{background:var(--char-2);color:#C4B2A2}
.sec--red .note{background:var(--chilli-d);color:#FFD8D3;border-color:#fff}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:2rem;background:var(--cream);
  border:3px solid var(--char);border-radius:10px;padding:1.9rem;margin-top:2.2rem;
  box-shadow:8px 8px 0 var(--char)}
@media(max-width:820px){.calc{grid-template-columns:1fr;gap:1.4rem}}
.calc label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);margin:1rem 0 .4rem}
.calc input{width:100%;background:#fff;border:2px solid var(--char);border-radius:6px;
  color:var(--char);padding:.68rem .85rem;font-family:var(--mono);font-size:1rem}
.calc input:focus{border-color:var(--chilli);outline:none}
.calcout{border-top:2px dashed var(--line);padding-top:.82rem;margin-top:.82rem;display:flex;
  justify-content:space-between;gap:1rem;align-items:baseline}
.calcout span:first-child{font-size:.88rem;color:var(--ink-2)}
.calcout span:last-child{font-family:var(--mono);font-weight:700;font-size:1.12rem}
.calcout--big span:last-child{font-family:var(--disp);font-weight:400;font-size:1.85rem;color:var(--chilli)}
.calcout span.is-neg{color:var(--chilli-d)}

/* faq */
.acc{margin-top:2rem;display:grid;gap:.8rem}
.acc>div{background:var(--cream);border:3px solid var(--char);border-radius:10px;overflow:hidden;
  box-shadow:4px 4px 0 var(--char)}
.acc button{width:100%;background:none;border:0;color:var(--char);text-align:left;
  padding:1.1rem 3rem 1.1rem 1.3rem;font-family:var(--disp);font-size:1.06rem;cursor:pointer;
  position:relative;line-height:1.2;text-transform:uppercase;letter-spacing:.01em}
.acc button::after{content:'+';position:absolute;right:1.2rem;top:.85rem;color:var(--chilli);
  font-family:var(--disp);font-size:1.5rem}
.acc .is-open button::after{content:'–'}
.acc .panel{display:none;padding:0 1.3rem 1.2rem;color:var(--ink-2);font-size:.96rem}
.acc .is-open .panel{display:block}

/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.5rem;margin-top:2rem;
  background:var(--cream);border:3px solid var(--char);border-radius:10px;padding:1.9rem;
  box-shadow:8px 8px 0 var(--char)}
.form .full{grid-column:1/-1}
@media(max-width:760px){.form{grid-template-columns:1fr;padding:1.3rem}}
.form label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:.4rem}
.form input,.form select,.form textarea{width:100%;background:#fff;border:2px solid var(--char);
  border-radius:6px;color:var(--char);padding:.72rem .85rem;font-family:var(--body);font-size:.97rem}
.form textarea{min-height:118px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--chilli);outline:none}
.form .req{color:var(--chilli)}
.hp{position:absolute;left:-9999px}
.formerror{border:3px solid var(--chilli);background:#FFE9E7;border-radius:8px;padding:.85rem 1.05rem;
  color:#7C231E;font-size:.92rem;grid-column:1/-1}

[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- hero: fill the right rail on desktop ---------- */
@media(min-width:1000px){
  .hero .shell{display:grid;grid-template-columns:1.12fr .88fr;column-gap:3.4rem}
  .hero .eyebrow{grid-column:1/-1;justify-self:start}
  .hero h1{grid-column:1;grid-row:2/4;max-width:none;font-size:clamp(2.6rem,5vw,4.4rem);
    align-self:start}
  .hero .lede{grid-column:2;grid-row:2;align-self:end;margin-top:0;max-width:none}
  .hero .cta{grid-column:2;grid-row:3;margin-top:1.5rem;align-self:start}
  .hero .ticket{grid-column:1/-1;grid-row:4}
}

/* ---------- interior page headers: two columns, no empty right rail ---------- */
@media(min-width:1000px){
  main > section.sec:first-child > .shell{display:grid;grid-template-columns:1.1fr .9fr;
    column-gap:3.2rem;align-items:start}
  main > section.sec:first-child > .shell > *{grid-column:1/-1}
  main > section.sec:first-child > .shell > .eyebrow{justify-self:start}
  main > section.sec:first-child > .shell > h1{grid-column:1;max-width:none}
  main > section.sec:first-child > .shell > .sub{grid-column:2;grid-row:2;align-self:end;
    margin-top:0;max-width:none}
}

/* ---------- contrast: components own their text colour ----------
   Cream tables and cards sit inside red and charcoal sections, so they must
   never inherit the section's light text colour. */
.nav .btn,.nav .btn--solid{color:var(--char)}
.nav .btn:hover,.nav .btn--solid:hover{color:var(--char)}
.tblwrap{color:var(--char)}
.tbl th,.tbl td{color:var(--ink-2)}
.tbl thead th{color:var(--char)}
.tbl tfoot td{color:var(--char)}
.calc,.form,.acc,.menu{color:var(--char)}
.calcout span:last-child{color:var(--char)}
.sec--dark .menu{color:#C4B2A2}
.sec--dark .menu__row b{color:var(--cream)}
.sec--red .ticks li,.sec--red .crosses li{color:#FFE7E4}
.sec--red .ticks li::before{color:#8CD98C}
.sec--red .crosses li::before{color:#FFD8D3}
.sec--red .row p,.sec--red .row ul{color:#FFD8D3}
.sec--red .tblwrap{box-shadow:6px 6px 0 #7C130F}

code{color:var(--char)}
.sec--dark code,.sec--red code{color:var(--char)}
.sec--dark .tbl tfoot td,.sec--red .tbl tfoot td{color:var(--char)}

/* footer */
.foot{background:var(--char);color:#A2907F;padding:3.2rem 0 2rem;font-size:.9rem;
  border-top:6px solid var(--mustard)}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.4rem}
@media(max-width:820px){.foot__grid{grid-template-columns:1fr;gap:1.7rem}}
.foot h4{font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mustard);margin:0 0 .9rem;font-weight:700}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.46rem}
.foot a{color:#CDBBA9}
.foot code{background:var(--char-3);color:#CDBBA9}
.footlogo{font-family:var(--disp);font-size:1.5rem;color:var(--cream);margin-bottom:.6rem}
.foot .disc{border-top:2px dashed #3A2A20;margin-top:2.3rem;padding-top:1.4rem;font-size:.77rem;
  color:#82705F;line-height:1.75}

@media(max-width:900px){
  .nav{position:fixed;inset:72px 0 auto;background:var(--char);flex-direction:column;
    align-items:flex-start;gap:0;padding:.4rem 4vw 1.4rem;border-bottom:4px solid var(--mustard);
    display:none}
  .nav.is-open{display:flex}
  .nav a{padding:.8rem 0;width:100%;border-bottom:1px solid #33241C;font-size:.98rem}
  .nav .btn{margin-top:1rem}
  .burger{display:block}
  .hero{padding:2.8rem 0 2.2rem}
}