/* ==========================================================================
   Bathroom Concierge
   One stylesheet. Airport wayfinding as the organising system.
   ========================================================================== */

:root{
  --ink:        #0E1721;   /* signage ground */
  --ink-soft:   #1C2836;
  --ink-line:   #2A3A4C;
  --porcelain:  #E9EAE6;   /* page */
  --white:      #FFFFFF;
  --amber:      #F2C230;   /* wayfinding / directional */
  --amber-deep: #C99A0F;
  --jade:       #1D6F63;   /* delivered, clean, good */
  --rust:       #C2402D;   /* needs attention */
  --grey:       #6B7683;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap: 1140px;
  --r: 4px;                /* signage is not round */
  --shadow: 0 1px 0 rgba(14,23,33,.08), 0 12px 32px -18px rgba(14,23,33,.5);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--porcelain);
  color:var(--ink);
  font-family:var(--display);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.022em;
  margin:0 0 .5em;
  text-wrap:balance;
}

h1{ font-size:clamp(2.4rem,6.2vw,4.4rem); }
h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); }
h3{ font-size:1.18rem; letter-spacing:-.01em; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.mono{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:500;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:22px;
}

.lede{ font-size:1.16rem; color:#3A4756; max-width:62ch; }

.skip{
  position:absolute; left:-9999px;
  background:var(--ink); color:var(--white);
  padding:12px 18px; z-index:200;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}

/* --------------------------------------------------------------------------
   SIGNAGE BAR — the structural device.
   Encodes a real thing: where you are in the system.
   -------------------------------------------------------------------------- */
.sign{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--ink);
  color:var(--white);
  padding:9px 16px;
  margin-bottom:28px;
}
.sign-arrow{ color:var(--amber); font-size:1.15rem; line-height:1; }
.sign-label{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  font-weight:600;
}
.sign-code{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  color:var(--amber);
}

/* --------------------------------------------------------------------------
   TOPBAR
   -------------------------------------------------------------------------- */
.topbar{
  background:var(--ink);
  color:var(--white);
  position:sticky; top:0; z-index:90;
  border-bottom:3px solid var(--amber);
}
.topbar-inner{
  display:flex; align-items:center; gap:20px;
  min-height:68px;
}

.brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--white);
  font-weight:800; letter-spacing:-.02em;
  font-size:1.02rem;
  margin-right:auto;
}
.brand-mark{
  width:15px; height:26px;
  background:var(--amber);
  flex:0 0 auto;
}
.brand-break{ display:inline; }

.navtoggle{
  display:none;
  align-items:center; gap:9px;
  background:none; border:1px solid var(--ink-line);
  color:var(--white);
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:9px 13px; cursor:pointer;
}
.navtoggle-bars{
  width:16px; height:2px; background:var(--amber);
  box-shadow:0 5px 0 var(--amber), 0 -5px 0 var(--amber);
}

.sitenav ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:4px;
}
.sitenav a{
  display:block;
  text-decoration:none;
  padding:9px 13px;
  font-size:.9rem; font-weight:500;
  color:#C6CFD9;
}
.sitenav a:hover{ color:var(--white); }
.sitenav a[aria-current="page"]{
  color:var(--amber);
}
.sitenav-cta a{
  background:var(--amber); color:var(--ink);
  font-weight:700; margin-left:10px;
}
.sitenav-cta a:hover{ background:var(--white); color:var(--ink); }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-size:.97rem; font-weight:700;
  padding:14px 24px;
  border:2px solid var(--ink);
  border-radius:var(--r);
  background:var(--ink); color:var(--white);
  text-decoration:none; cursor:pointer;
  transition:transform .12s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-amber{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.btn-amber:hover{ background:var(--amber-deep); border-color:var(--amber-deep); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--white); }
.btn-block{ width:100%; }

.btnrow{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* --------------------------------------------------------------------------
   HOME HERO — thesis: the product does one trick, so show the trick.
   -------------------------------------------------------------------------- */
.hero{
  background:var(--ink);
  color:var(--white);
  padding:70px 0 84px;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px; align-items:center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--amber);
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:22px;
}
.hero-eyebrow::before{
  content:''; width:26px; height:2px; background:var(--amber);
}
.hero h1{ color:var(--white); margin-bottom:.35em; }
.hero h1 em{
  font-style:normal;
  color:var(--amber);
}
.hero-sub{
  font-size:1.14rem; color:#AFBBC7; max-width:46ch;
}
.hero-stats{
  display:flex; gap:34px; flex-wrap:wrap;
  margin-top:38px; padding-top:26px;
  border-top:1px solid var(--ink-line);
}
.hero-stat b{
  display:block;
  font-size:1.85rem; font-weight:800; letter-spacing:-.03em;
  color:var(--amber);
  line-height:1.1;
}
.hero-stat span{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase;
  color:#8896A6;
}

/* phone frame holding the live guest screen */
.phone{
  width:296px; margin-inline:auto;
  background:#000; border-radius:32px; padding:9px;
  box-shadow:0 40px 80px -32px rgba(0,0,0,.8);
}
.phone-screen{
  background:var(--porcelain);
  border-radius:24px; overflow:hidden;
  height:520px; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.phone-caption{
  text-align:center; margin-top:16px;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase; color:#8896A6;
}

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */
.band{ padding:74px 0; }
.band-white{ background:var(--white); }
.band-ink{ background:var(--ink); color:var(--white); }
.band-ink .lede{ color:#AFBBC7; }
.band-ink h2{ color:var(--white); }
.band-tight{ padding:52px 0; }

.pagehead{
  background:var(--ink); color:var(--white);
  padding:56px 0 60px;
}
.pagehead h1{ color:var(--white); }
.pagehead .lede{ color:#AFBBC7; }

/* --------------------------------------------------------------------------
   STEPS — genuinely sequential, so numbering is earned
   -------------------------------------------------------------------------- */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:2px solid var(--ink);
}
.step{
  padding:26px 22px 30px;
  border-right:1px solid rgba(14,23,33,.16);
}
.step:last-child{ border-right:0; }
.step-num{
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; color:var(--amber-deep);
  display:block; margin-bottom:14px;
}
.step h3{ margin-bottom:.45em; }
.step p{ font-size:.95rem; color:#414F5E; }

.band-ink .step{ border-right-color:var(--ink-line); }
.band-ink .steps{ border-top-color:var(--amber); }
.band-ink .step p{ color:#AFBBC7; }
.band-ink .step h3{ color:var(--white); }

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */
.cardgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.cardgrid-2{ grid-template-columns:repeat(2,1fr); }

.card{
  background:var(--white);
  border:1px solid rgba(14,23,33,.14);
  border-top:3px solid var(--ink);
  padding:26px 24px 28px;
}
.card h3{ margin-bottom:.5em; }
.card p{ font-size:.95rem; color:#414F5E; }
.card-amber{ border-top-color:var(--amber); }
.card-jade{ border-top-color:var(--jade); }
.card-rust{ border-top-color:var(--rust); }

/* --------------------------------------------------------------------------
   CATALOG
   -------------------------------------------------------------------------- */
.cat-block{ margin-bottom:52px; }
.cat-note{
  font-size:.95rem; color:#4B5765; margin:-14px 0 22px; max-width:58ch;
}
.itemgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.item{
  background:var(--white);
  border:1px solid rgba(14,23,33,.14);
  padding:18px 18px 20px;
  display:flex; flex-direction:column; gap:5px;
}
.item-name{ font-weight:700; font-size:1rem; }
.item-desc{ font-size:.87rem; color:var(--grey); flex:1; }
.item-price{
  font-family:var(--mono); font-size:.82rem; font-weight:600;
  color:var(--ink); letter-spacing:.04em;
}
.item-locked{ background:#DFE0DC; }
.item-locked .item-price{ color:var(--grey); text-decoration:line-through; }

.flag{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--amber); color:var(--ink);
  font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  padding:5px 11px; margin-bottom:14px;
}
.flag-rust{ background:var(--rust); color:var(--white); }

/* --------------------------------------------------------------------------
   PRICING
   -------------------------------------------------------------------------- */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.tier{
  background:var(--white);
  border:1px solid rgba(14,23,33,.16);
  padding:0 0 28px;
}
.tier-head{
  background:var(--ink); color:var(--white);
  padding:20px 24px;
}
.tier-feature .tier-head{ background:var(--amber); color:var(--ink); }
.tier-name{
  font-family:var(--mono); font-size:.74rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}
.tier-price{
  font-size:2rem; font-weight:800; letter-spacing:-.03em;
  margin-top:8px; line-height:1.1;
}
.tier-price small{
  display:block; font-size:.78rem; font-weight:500; letter-spacing:0;
  opacity:.72; margin-top:4px;
}
.tier-body{ padding:24px 24px 0; }
.tier ul{ list-style:none; margin:0 0 22px; padding:0; }
.tier li{
  font-size:.93rem; padding:9px 0 9px 24px; position:relative;
  border-bottom:1px solid rgba(14,23,33,.08);
}
.tier li::before{
  content:'→'; position:absolute; left:0; color:var(--amber-deep); font-weight:700;
}
.tier-body .btn{ margin-inline:0; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{ max-width:74ch; }
.faq-item{
  border-bottom:1px solid rgba(14,23,33,.16);
  padding:24px 0;
}
.faq-item h3{ margin-bottom:.5em; }
.faq-item p{ color:#414F5E; font-size:.97rem; }

/* --------------------------------------------------------------------------
   CONTACT FORM
   -------------------------------------------------------------------------- */
.form{ max-width:560px; }
.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:7px;
}
.field input, .field select, .field textarea{
  width:100%;
  font-family:var(--display); font-size:1rem;
  padding:13px 14px;
  border:1px solid rgba(14,23,33,.3);
  border-radius:var(--r);
  background:var(--white);
  color:var(--ink);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--ink);
}

.notice{
  border-left:4px solid var(--amber);
  background:var(--white);
  padding:18px 22px;
  margin:28px 0;
}
.notice p{ font-size:.95rem; }
.notice-rust{ border-left-color:var(--rust); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.foot{
  background:var(--ink); color:#AFBBC7;
  padding:56px 0 30px;
  border-top:3px solid var(--amber);
}
.foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:38px;
  padding-bottom:34px;
}
.foot-line{ margin:14px 0 10px; max-width:34ch; font-size:.97rem; }
.foot-code{ color:#67757F; }
.foot-col h2{
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--amber); margin-bottom:14px;
}
.foot-col ul{ list-style:none; margin:0; padding:0; }
.foot-col li{ margin-bottom:9px; }
.foot-col a{ text-decoration:none; font-size:.95rem; }
.foot-col a:hover{ color:var(--white); text-decoration:underline; }
.foot-legal{
  border-top:1px solid var(--ink-line);
  padding-top:22px;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.1em; color:#67757F;
}

/* ==========================================================================
   GUEST SCREEN — what the person in the stall sees.
   Scoped under .stall so it can also be embedded in the hero phone frame.
   ========================================================================== */
.stall{
  background:var(--porcelain);
  min-height:100%;
  padding-bottom:104px;
}
body.stallpage{ background:var(--porcelain); }

.stall-top{
  background:var(--ink); color:var(--white);
  padding:12px 16px 0;
}
.stall-brand{
  display:flex; align-items:center; gap:9px;
  font-weight:800; font-size:.88rem; letter-spacing:-.01em;
  padding-bottom:12px;
}
.stall-brand .brand-mark{ width:10px; height:18px; }

/* the wayfinding block — signature element */
.locblock{
  background:var(--ink);
  border-top:1px solid var(--ink-line);
  padding:16px 16px 18px;
  color:var(--white);
}
.locblock-row{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--amber);
  margin-bottom:9px;
}
.locblock-venue{ margin-left:auto; color:#8896A6; letter-spacing:.1em; }
.locblock-terminal{
  font-size:1.55rem; font-weight:800; letter-spacing:-.025em;
  line-height:1.1; margin-bottom:3px;
}
.locblock-fixture{
  font-family:var(--mono); font-size:.94rem; font-weight:500;
  color:#C6CFD9; letter-spacing:.06em;
}
.locblock-status{
  display:flex; align-items:center; gap:8px;
  margin-top:13px; padding-top:12px;
  border-top:1px solid var(--ink-line);
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase; color:#8896A6;
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--jade); flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(29,111,99,.28);
}

/* tabs */
.stall-tabs{
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--ink);
}
.stall-tab{
  appearance:none; border:0; cursor:pointer;
  background:var(--ink-soft); color:#AFBBC7;
  font-family:var(--display); font-weight:700; font-size:.92rem;
  padding:15px 10px;
  border-bottom:3px solid transparent;
}
.stall-tab[aria-selected="true"]{
  background:var(--porcelain); color:var(--ink);
  border-bottom-color:var(--amber);
}

.stall-body{ padding:20px 16px 0; }

.cat-head{
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--grey);
  margin:26px 0 11px;
  display:flex; align-items:center; gap:10px;
}
.cat-head::after{
  content:''; flex:1; height:1px; background:rgba(14,23,33,.18);
}
.cat-head:first-child{ margin-top:4px; }

.pick{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.pickbtn{
  appearance:none; cursor:pointer; text-align:left;
  background:var(--white);
  border:1px solid rgba(14,23,33,.18);
  border-radius:var(--r);
  padding:13px 13px 14px;
  font-family:var(--display); color:var(--ink);
  display:flex; flex-direction:column; gap:3px;
  min-height:88px;
  transition:border-color .12s ease, background .12s ease;
}
.pickbtn:hover{ border-color:var(--ink); }
.pickbtn-name{ font-weight:700; font-size:.95rem; line-height:1.25; }
.pickbtn-desc{ font-size:.78rem; color:var(--grey); line-height:1.35; flex:1; }
.pickbtn-price{
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  display:flex; align-items:center; justify-content:space-between;
}
.pickbtn[data-qty]{
  border-color:var(--jade);
  background:#F0F6F4;
}
.pickbtn-qty{
  background:var(--jade); color:var(--white);
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  padding:2px 7px; border-radius:99px;
}
.pickbtn[disabled]{
  opacity:.5; cursor:not-allowed; background:#DFE0DC;
}

.locked-note{
  font-size:.78rem; color:var(--grey);
  margin:9px 0 0; line-height:1.4;
}

/* sticky order bar */
.orderbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--ink);
  border-top:3px solid var(--amber);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  transform:translateY(120%);
  transition:transform .22s cubic-bezier(.3,.9,.4,1);
}
.orderbar[data-open="true"]{ transform:translateY(0); }
.orderbar-inner{
  display:flex; align-items:center; gap:14px;
  max-width:520px; margin-inline:auto;
}
.orderbar-sum{ color:var(--white); line-height:1.25; }
.orderbar-sum b{ display:block; font-size:1rem; }
.orderbar-sum span{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.11em; text-transform:uppercase; color:#8896A6;
}
.orderbar .btn{ margin-left:auto; padding:13px 20px; }

/* Inside the hero phone frame the bar must stay in the frame rather than
   pin to the viewport, so it becomes sticky and toggles display instead of
   sliding — a transform on a sticky element inside a scroll container is
   unreliable across browsers. */
.phone-screen .orderbar{
  position:sticky; bottom:0;
  transform:none; display:none;
}
.phone-screen .orderbar[data-open="true"]{ display:block; }
.phone-screen .stall{ padding-bottom:0; }

/* report tab */
.issuelist{ display:grid; gap:9px; margin-bottom:20px; }
.issuebtn{
  appearance:none; cursor:pointer; text-align:left;
  background:var(--white);
  border:1px solid rgba(14,23,33,.18);
  border-radius:var(--r);
  padding:15px 15px;
  font-family:var(--display); font-size:.97rem; font-weight:600;
  color:var(--ink);
  display:flex; align-items:center; gap:11px;
}
.issuebtn:hover{ border-color:var(--rust); }
.issuebtn[aria-pressed="true"]{
  border-color:var(--rust); background:#FBF0EE;
}
.issuebtn::before{
  content:''; width:9px; height:9px; border-radius:50%;
  border:2px solid rgba(14,23,33,.3); flex:0 0 auto;
}
.issuebtn[aria-pressed="true"]::before{
  background:var(--rust); border-color:var(--rust);
}

/* confirmation / status */
.panel{ padding:26px 16px 40px; }
.panel-badge{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--jade); color:var(--white);
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:7px 13px; margin-bottom:20px;
}
.panel-badge-rust{ background:var(--rust); }
.panel h2{ font-size:1.6rem; margin-bottom:.4em; }
.panel-ref{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.1em;
  color:var(--grey); margin-bottom:22px;
}
.panel-ref b{ color:var(--ink); }

.track{ list-style:none; margin:26px 0; padding:0; }
.track li{
  display:flex; gap:14px; align-items:flex-start;
  padding-bottom:22px; position:relative;
  opacity:.34; transition:opacity .3s ease;
}
.track li::after{
  content:''; position:absolute; left:8px; top:20px; bottom:0;
  width:2px; background:rgba(14,23,33,.18);
}
.track li:last-child{ padding-bottom:0; }
.track li:last-child::after{ display:none; }
.track li[data-done="true"]{ opacity:1; }
.track-dot{
  width:18px; height:18px; border-radius:50%; flex:0 0 auto;
  border:2px solid rgba(14,23,33,.3); background:var(--porcelain);
  margin-top:2px; z-index:1;
}
.track li[data-done="true"] .track-dot{
  background:var(--jade); border-color:var(--jade);
}
.track-label{ font-weight:700; font-size:.98rem; line-height:1.3; }
.track-time{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  color:var(--grey); display:block; margin-top:2px;
}

.receipt{
  background:var(--white);
  border:1px solid rgba(14,23,33,.16);
  padding:18px 18px;
  margin:22px 0;
}
.receipt-row{
  display:flex; justify-content:space-between; gap:16px;
  font-size:.93rem; padding:7px 0;
  border-bottom:1px solid rgba(14,23,33,.08);
}
.receipt-row:last-child{ border-bottom:0; }
.receipt-total{
  font-weight:800; border-top:2px solid var(--ink); margin-top:6px; padding-top:11px;
}
.receipt-row .mono{ font-size:.8rem; letter-spacing:.04em; text-transform:none; }

.unknown{
  padding:40px 20px; text-align:center;
}

/* --------------------------------------------------------------------------
   UTILITIES — keeps every style out of the markup so CSP needs no
   'unsafe-inline' in style-src.
   -------------------------------------------------------------------------- */
[hidden]{ display:none !important; }

.u-center{ text-align:center; }
.u-center .btnrow{ justify-content:center; }
.u-center .lede{ margin-inline:auto; }
.u-mt-m{ margin-top:34px; }
.u-mt-l{ margin-top:38px; }
.u-dim{ color:#67757F; margin-top:18px; }

/* ghost button sitting on the dark ground */
.btn-ghost-ink{
  background:transparent;
  color:var(--white);
  border-color:var(--ink-line);
}
.btn-ghost-ink:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step:nth-child(2){ border-right:0; }
  .step:nth-child(1),.step:nth-child(2){ border-bottom:1px solid rgba(14,23,33,.16); }
  .cardgrid{ grid-template-columns:repeat(2,1fr); }
  .tiers{ grid-template-columns:1fr; }
  .itemgrid{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  body{ font-size:16px; }

  .navtoggle{ display:inline-flex; }
  .sitenav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:var(--ink);
    border-bottom:3px solid var(--amber);
    padding:8px 0 16px;
  }
  .sitenav[data-open="true"]{ display:block; }
  .sitenav ul{ flex-direction:column; align-items:stretch; gap:0; padding-inline:22px; }
  .sitenav a{ padding:13px 0; border-bottom:1px solid var(--ink-line); }
  .sitenav-cta a{
    margin-left:0; margin-top:14px; text-align:center;
    border-bottom:0; padding:14px;
  }
  .topbar-inner{ position:relative; }

  .hero{ padding:48px 0 60px; }
  .hero-stats{ gap:22px; }
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:0; border-bottom:1px solid rgba(14,23,33,.16); }
  .band-ink .step{ border-bottom-color:var(--ink-line); }
  .cardgrid, .cardgrid-2{ grid-template-columns:1fr; }
  .itemgrid{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:28px; }
  .band{ padding:52px 0; }

  .phone{ width:100%; max-width:320px; }
}

@media (max-width:400px){
  .pick{ grid-template-columns:1fr; }
  .pickbtn{ min-height:0; flex-direction:row; align-items:center; gap:12px; }
  .pickbtn-desc{ display:none; }
  .pickbtn-price{ margin-left:auto; flex:0 0 auto; gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

@media print{
  .topbar,.foot,.orderbar,.skip{ display:none; }
  body{ background:var(--white); }
}