/* ==========================================================================
   KAIRÚ — plant-based vegan burger joint, Florianópolis/SC
   @kairu.veg
   --------------------------------------------------------------------------
   SPEC MOCKUP — lead not signed. Instagram-only: the profile returned a login
   wall, so no menu, hours, address or phone was recoverable. Every business
   fact ships as a visible [CONFIRM].

   THE LOUDEST SITE IN THE BATCH, AND THE ONE THAT BORROWS LEAST.
   From restaurant-ref-01 (Verdeo) only the order of operations is taken —
   hero, trust strip, priced menu, ordering band, dark footer — and its entire
   aesthetic is rejected. Verdeo is polite, cream and restrained. Kairú is
   near-black, oversized and confident, closer to a streetwear drop page than
   a restaurant site.

   Deliberately the only build in this batch where the food sits on BLACK
   rather than cream: it makes the burgers look enormous, which is the whole
   point of a burger joint's homepage.

   Hard-edged cards with a 2px border, never a shadow. Headings very large in
   a heavy grotesque, tight-tracked and lowercase, with a lime underline that
   draws itself on scroll. One signature device: a thin looping ticker of the
   vegan credentials — energy, not ornament, and it costs almost nothing.

   CONTRAST (computed, WCAG 2.1 AA) — this palette needs real care:
     off-white #F4F4EF on near-black #111311 -> 16.4:1  OK  body on dark
     lime      #B4E33D on near-black #111311 -> 12.4:1  OK  passes comfortably
     lime      #B4E33D on off-white  #F4F4EF ->  1.4:1  ✗✗ FAILS BADLY.
       ⚠ Lime NEVER carries text on a light band. It is a FILL and an
       UNDERLINE only. Enforced below: --lime appears on light grounds solely
       in borders, rules and button backgrounds.
     near-black#111311 on lime       #B4E33D -> 12.4:1  OK  <- lime buttons
       take NEAR-BLACK text, never white.
     near-black#111311 on off-white  #F4F4EF -> 16.4:1  OK  body on light
     leaf      #2E5E2C on off-white  #F4F4EF ->  7.2:1  OK  tags, quiet UI
     ember     #E2703A on near-black #111311 ->  6.1:1  OK  picante / delivery
     ember     #E2703A on off-white  #F4F4EF ->  2.7:1  ✗  fills only on light
     ember-dk  #A94A1E on off-white  #F4F4EF ->  5.4:1  OK  ember as text
   The 2px card borders are kept at full opacity so they survive forced-colours
   and high-contrast modes, where a shadow would simply vanish.
   ========================================================================== */

:root{
  --black:#111311;
  --black-dk:#000000;
  --lime:#B4E33D;
  --lime-dk:#6FBF3A;
  --off:#F4F4EF;
  --off-dk:#E7E7DF;
  --leaf:#2E5E2C;
  --ember:#E2703A;
  --ember-dk:#A94A1E;
  --wa:#3F9D6B;
  --wa-dk:#2F7B53;
  --line-d:rgba(244,244,239,.22);
  --line-l:rgba(17,19,17,.16);

  --g-lime:linear-gradient(135deg,var(--lime) 0%,var(--lime-dk) 100%);
  --g-black:linear-gradient(180deg,var(--black) 0%,var(--black-dk) 100%);
  --g-light:linear-gradient(180deg,var(--off) 0%,var(--off-dk) 100%);
  --g-scrim:linear-gradient(0deg,rgba(17,19,17,.95) 0%,rgba(17,19,17,0) 100%);

  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1220px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--off);color:var(--black);
  font:400 clamp(1rem,.97rem + .16vw,1.06rem)/1.66 var(--sans);
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--ember-dk);text-underline-offset:3px}
a:hover{color:var(--black)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:800;line-height:1;letter-spacing:-.04em;margin:0;color:var(--black);text-transform:lowercase}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
@media(max-width:640px){.wrap{width:min(100% - 24px,var(--wrap))}}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--lime);color:var(--black);padding:12px 18px}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- type — very large, heavy, tight, lowercase ------------------- */
.h1{font-size:clamp(2.6rem,1.5rem + 4.8vw,5.4rem)}
.h2{font-size:clamp(2.1rem,1.4rem + 3vw,3.8rem)}
.h3{font-size:clamp(1.16rem,1.05rem + .5vw,1.44rem)}
.lede{font-size:clamp(1.04rem,1rem + .3vw,1.2rem);max-width:60ch;text-transform:none}
/* the lime underline that draws itself on scroll */
.sec-head h2{position:relative;display:inline-block;padding-bottom:14px}
.sec-head h2::after{
  content:"";position:absolute;left:0;bottom:0;height:6px;width:0;background:var(--g-lime);
  transition:width .9s cubic-bezier(.2,.7,.3,1);
}
.sec-head.in h2::after{width:100%}
.eyebrow{font:700 .72rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ember-dk);margin:0 0 14px}
.on-dark .eyebrow{color:var(--lime)}
.muted{color:#5D625D}
.on-dark .muted{color:rgba(244,244,239,.7)}

.cfm{
  display:inline-block;font:700 .78rem/1.35 var(--mono);
  background:rgba(180,227,61,.2);color:#3E5A0C;
  border:1px dashed var(--lime-dk);border-radius:2px;padding:1px 7px;text-transform:none;
}
.on-dark .cfm{background:rgba(180,227,61,.18);color:var(--lime);border-color:var(--lime)}
.cfm-note{
  font-size:.9rem;line-height:1.62;color:#5D625D;text-transform:none;
  border-left:4px solid var(--lime);background:rgba(180,227,61,.12);padding:14px 18px;margin:0;
}
.on-dark .cfm-note{color:rgba(244,244,239,.86);background:rgba(180,227,61,.1);border-left-color:var(--lime)}
/* a louder flag for the two claims that must never ship unconfirmed */
.flag{
  border:2px solid var(--ember);background:rgba(226,112,58,.1);color:var(--ember-dk);
  padding:16px 20px;font-size:.92rem;line-height:1.6;text-transform:none;
}
.on-dark .flag{color:#FFC7A6;background:rgba(226,112,58,.16)}
.flag b{display:block;font:800 .74rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}

/* ---------- buttons ------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--g-lime);color:var(--black);border:0;cursor:pointer;text-decoration:none;
  font:800 .9rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  padding:18px 32px;border-radius:2px;
  transition:filter .2s,transform .2s cubic-bezier(.2,.7,.3,1);
}
/* lime buttons take NEAR-BLACK text — white on lime is 1.4:1 */
.btn:hover{filter:brightness(1.08);transform:translateY(-2px);color:var(--black)}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}
.btn--wa{background:linear-gradient(135deg,var(--wa) 0%,var(--wa-dk) 100%);color:#fff}
.btn--wa:hover{color:#fff}
.btn--ember{background:linear-gradient(135deg,var(--ember) 0%,var(--ember-dk) 100%);color:#fff}
.btn--ember:hover{color:#fff}
.btn--ghost{background:transparent;color:var(--black);border:2px solid var(--black)}
.btn--ghost:hover{background:var(--black);color:var(--off);filter:none}
.on-dark .btn--ghost{color:var(--off);border-color:var(--line-d)}
.on-dark .btn--ghost:hover{background:var(--off);color:var(--black)}
.btn--sm{padding:12px 20px;font-size:.76rem}
.btn--full{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- header — solid near-black at every scroll position ----------- */
.hdr{position:sticky;top:0;z-index:80;background:var(--black);border-bottom:1px solid var(--line-d)}
.hdr__in{display:flex;align-items:center;gap:20px;padding:14px 0}
.brand{font:800 1.16rem/1 var(--sans);letter-spacing:-.03em;color:var(--off);text-decoration:none;flex:none;text-transform:lowercase}
.brand span{color:var(--lime)}
.nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav a{font:600 .86rem/1 var(--sans);color:var(--off);text-decoration:none;padding:7px 0;position:relative;text-transform:lowercase}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--lime);transition:right .24s cubic-bezier(.2,.7,.3,1)}
.nav a:hover::after{right:0}
.hdr__r{display:flex;align-items:center;gap:10px;flex:none}
.langs{display:flex;border:1px solid var(--line-d)}
.langs a{font:700 .7rem/1 var(--sans);letter-spacing:.1em;padding:8px 11px;text-decoration:none;color:var(--off)}
.langs a.on{background:var(--lime);color:var(--black)}
.burger{display:none;width:42px;height:38px;border:2px solid var(--off);background:transparent;cursor:pointer;padding:10px 8px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--off);transition:transform .24s,opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none;flex-direction:column;background:var(--black);border-bottom:1px solid var(--line-d)}
.mnav a{padding:15px 20px;border-bottom:1px solid var(--line-d);text-decoration:none;color:var(--off);font-weight:600;text-transform:lowercase}
.mnav.open{display:flex}
@media(max-width:960px){.nav{display:none}.burger{display:flex}.hdr__r .btn--ghost{display:none}}

/* ---------- sections ------------------------------------------------------ */
.sec{padding:clamp(52px,6.4vw,104px) 0}
.sec--dark{background:var(--black);color:var(--off)}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:var(--off)}
.sec--light{background:var(--g-light)}
.sec--white{background:#fff}
.sec-head{max-width:64ch;margin-bottom:clamp(28px,3.4vw,48px)}
.sec-head--row{display:flex;gap:28px;justify-content:space-between;align-items:flex-end;max-width:none;flex-wrap:wrap}

/* ---------- hero — one image, one job ------------------------------------ */
.hero{background:var(--g-black);color:var(--off);text-align:center;padding:clamp(30px,4vw,60px) 0 clamp(40px,5vw,80px)}
.hero__mark{font:800 .84rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--lime);margin:0 0 clamp(22px,3vw,40px)}
.hero__img{max-width:min(92%,560px);margin:0 auto clamp(24px,3.2vw,44px);position:relative}
.hero__img img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px}
.hero h1{color:var(--off);max-width:16ch;margin-inline:auto}
.hero .lede{margin:18px auto 0;color:rgba(244,244,239,.86)}
.hero .btn-row{justify-content:center}
.hero__link{display:inline-block;margin-top:20px;color:var(--lime);font:600 .92rem/1 var(--sans);text-transform:lowercase}

/* ---------- the ticker — energy, not ornament ---------------------------- */
.ticker{background:var(--lime);color:var(--black);overflow:hidden;border-block:2px solid var(--black)}
.ticker__track{display:flex;gap:0;width:max-content;animation:roll 26s linear infinite}
.ticker span{
  font:800 .84rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  padding:14px 26px;white-space:nowrap;display:inline-flex;align-items:center;gap:26px;
}
.ticker span::after{content:"·";opacity:.5}
@keyframes roll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- trust strip --------------------------------------------------- */
.trust{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:2px solid var(--black);background:#fff}
.trust div{padding:24px 16px;border-right:2px solid var(--black);text-align:center}
.trust div:last-child{border-right:0}
.trust .ic{width:42px;height:42px;margin:0 auto 12px;display:grid;place-items:center;background:var(--lime);color:var(--black);font-size:1.1rem}
.trust b{display:block;font:800 .9rem/1.3 var(--sans);text-transform:lowercase}
.trust span{display:block;margin-top:6px;font-size:.78rem;color:#5D625D;text-transform:none}
@media(max-width:900px){
  .trust{grid-template-columns:1fr 1fr}
  .trust div{border-bottom:2px solid var(--black)}
  .trust div:nth-child(2n){border-right:0}
}
@media(max-width:460px){.trust{grid-template-columns:1fr}.trust div{border-right:0}}

/* ---------- ⭐ the burger board ------------------------------------------ */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chips button{
  font:800 .8rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  background:transparent;color:var(--off);border:2px solid var(--line-d);
  padding:13px 20px;cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.chips button:hover{border-color:var(--lime)}
.chips button[aria-pressed="true"]{background:var(--lime);color:var(--black);border-color:var(--lime)}
.board{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.board{grid-template-columns:1fr}}
.item{
  background:var(--black);border:2px solid var(--off);display:flex;flex-direction:column;
  transition:transform .22s,border-color .22s;
}
.item:hover{transform:translateY(-4px);border-color:var(--lime)}
.item[hidden]{display:none}
.item__i{overflow:hidden;position:relative}
.item__i img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.item:hover .item__i img{transform:scale(1.05)}
.item__b{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.item__b h3{font-size:1.4rem;color:var(--off)}
.item__b > p{font-size:.94rem;color:rgba(244,244,239,.76);margin:0;text-transform:none}
.price{
  display:inline-flex;align-items:center;align-self:flex-start;background:var(--g-lime);color:var(--black);
  font:800 1rem/1 var(--mono);padding:11px 16px;border-radius:999px;
}
/* dietary tags — on a plant-based menu the useful signal is not "vegan",
   it is WHICH ALLERGEN THIS AVOIDS. That is what a customer filters on. */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  font:700 .68rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  border:1px solid;padding:6px 9px;white-space:nowrap;
}
.tag--free{color:var(--lime);border-color:var(--lime);background:rgba(180,227,61,.14)}
.tag--hot{color:#FFC7A6;border-color:var(--ember);background:rgba(226,112,58,.18)}

/* ---------- combo builder ------------------------------------------------- */
.combo{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.combo{grid-template-columns:1fr}}
.combo > div{border:2px solid var(--black);background:#fff;padding:24px 22px}
.combo b{display:inline-grid;place-items:center;width:40px;height:40px;background:var(--black);color:var(--lime);font:800 .95rem/1 var(--mono);margin-bottom:14px}
.combo h3{font-size:1.14rem;margin-bottom:10px}
.combo select{font:400 1rem/1.4 var(--sans);color:var(--black);background:var(--off);border:2px solid var(--black);padding:12px 13px;width:100%;border-radius:0}

/* ---------- ordering band ------------------------------------------------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.paths{grid-template-columns:1fr}}
.path{border:2px solid var(--off);padding:30px 26px;display:flex;flex-direction:column;gap:14px}
.path--direct{border-color:var(--lime)}
.path--app{border-color:var(--ember)}
.path h3{font-size:1.5rem;color:var(--off)}
.path p{font-size:.95rem;color:rgba(244,244,239,.78);margin:0;text-transform:none}

/* ---------- allergens ----------------------------------------------------- */
.allerblock{background:#fff;border:2px solid var(--black);padding:clamp(22px,3vw,34px)}
.allerblock h3{font-size:1.16rem;margin:22px 0 8px}
.allerblock h3:first-of-type{margin-top:0}
.allerblock p,.allerblock li{text-transform:none}
.allerblock ul{margin:0 0 14px;padding-left:1.15em}
.allerblock li{margin-bottom:6px;font-size:.94rem}
.chipset{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.chipset span{font:700 .78rem/1 var(--sans);padding:10px 13px;border:2px solid var(--black);background:var(--off);color:var(--black);text-transform:none}

/* ---------- split / gallery ----------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,62px);align-items:center}
.split--top{align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
figure{margin:0}
.shot{overflow:hidden;position:relative}
.shot img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.shot--wide img{aspect-ratio:16/9}
.shot:hover img{transform:scale(1.04)}
.cap{font-size:.8rem;color:#5D625D;margin-top:10px;text-transform:none}
.on-dark .cap{color:rgba(244,244,239,.66)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gal figure{overflow:hidden;aspect-ratio:1/1}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.07)}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}
.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ig a{display:block;overflow:hidden;aspect-ratio:1/1}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .3s}
.ig a:hover img{transform:scale(1.08);filter:saturate(1.15)}
@media(max-width:760px){.ig{grid-template-columns:repeat(3,1fr)}}

/* ---------- empty placeholders -------------------------------------------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rev{border:2px dashed var(--lime-dk);background:rgba(180,227,61,.1);padding:26px 22px;min-height:150px;
  display:flex;flex-direction:column;justify-content:center;gap:10px}
@media(max-width:860px){.revs{grid-template-columns:1fr}}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.num b{display:block;font:800 clamp(1.9rem,1.4rem + 2vw,3rem)/1 var(--mono);color:var(--lime)}
.num span{display:block;margin-top:8px;font-size:.86rem;color:rgba(244,244,239,.78);text-transform:none}
@media(max-width:760px){.nums{grid-template-columns:1fr 1fr}}

/* ---------- rows / map / forms ------------------------------------------- */
.rows{list-style:none;margin:22px 0 0;padding:0;border-top:2px solid var(--line-l)}
.rows li{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line-l);font-size:.95rem;text-transform:none}
.rows b{font:800 .68rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#5D625D}
.on-dark .rows{border-top-color:var(--line-d)}
.on-dark .rows li{border-bottom-color:var(--line-d)}
.on-dark .rows b{color:rgba(244,244,239,.62)}
.map{position:relative;min-height:320px;overflow:hidden;border:2px solid var(--black);background:var(--off-dk);display:grid;place-items:center;text-align:center;padding:26px}
.map__grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(var(--line-l) 1px,transparent 1px),linear-gradient(90deg,var(--line-l) 1px,transparent 1px);background-size:44px 44px}
.map .pin{width:16px;height:16px;border-radius:50%;background:var(--lime);border:2px solid var(--black);margin:0 auto 12px}

.form{background:#fff;border:2px solid var(--black);padding:clamp(22px,3vw,32px)}
.on-dark .form{background:rgba(244,244,239,.06);border-color:var(--off)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font:800 .68rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#5D625D}
.on-dark .field label{color:rgba(244,244,239,.7)}
.field input,.field select,.field textarea{font:400 1rem/1.5 var(--sans);color:var(--black);background:#fff;border:2px solid var(--black);padding:12px 14px;width:100%;border-radius:0}
.field textarea{min-height:106px;resize:vertical}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.fr{grid-template-columns:1fr}}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;line-height:1.55;margin:4px 0 16px;color:#5D625D;text-transform:none}
.on-dark .consent{color:rgba(244,244,239,.8)}
.consent input{margin-top:4px;flex:none;width:17px;height:17px;accent-color:var(--lime-dk)}

/* ---------- footer -------------------------------------------------------- */
.ftr{background:var(--g-black);color:rgba(244,244,239,.76);padding:clamp(46px,5.4vw,84px) 0 26px}
.ftr h4{font:800 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin:0 0 16px}
.ftr__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(24px,3vw,50px)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.92rem}
.ftr a{color:rgba(244,244,239,.9);text-decoration:none}
.ftr a:hover{color:var(--lime);text-decoration:underline}
.ftr .brand{color:var(--off);font-size:1.5rem}
.ftr .hr{display:flex;justify-content:space-between;gap:14px;font-size:.9rem;padding:6px 0;border-bottom:1px solid var(--line-d)}
.ftr .hr b{font-weight:700;color:var(--off)}
.age18{display:inline-flex;align-items:center;gap:9px;border:2px solid var(--ember);color:#FFC7A6;
  font:800 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:10px 14px}
.ftr__legal{margin-top:clamp(26px,3.2vw,46px);padding-top:22px;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;font-size:.8rem;color:rgba(244,244,239,.62);text-transform:none}
@media(max-width:820px){.ftr__grid{grid-template-columns:1fr}}

/* ---------- sticky CTAs --------------------------------------------------- */
.wa{position:fixed;right:16px;bottom:84px;z-index:90;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--wa) 0%,var(--wa-dk) 100%);display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(47,123,83,.44);transition:transform .22s}
.wa svg{width:29px;height:29px;fill:#fff}
.wa:hover{transform:scale(1.08)}
@media(min-width:861px){.wa{bottom:22px}}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:88;display:grid;grid-template-columns:2fr 1fr;gap:0;
  padding-bottom:env(safe-area-inset-bottom);background:var(--black);border-top:2px solid var(--lime)}
.mbar .btn{padding:16px 10px;font-size:.78rem;border-radius:0}
@media(min-width:861px){.mbar{display:none}}
@media(max-width:860px){body{padding-bottom:56px}}

/* an unconfirmed contact channel renders, disabled, and says why */
[data-unconfirmed]{opacity:.6;cursor:not-allowed;filter:grayscale(.4)}

/* ---------- LGPD ---------------------------------------------------------- */
.ck{position:fixed;left:12px;right:12px;bottom:12px;z-index:120;background:var(--off);border:3px solid var(--black);
  box-shadow:0 18px 44px rgba(0,0,0,.4);padding:18px 20px;display:none}
.ck.show{display:block}
.ck__in{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;max-width:var(--wrap);margin-inline:auto}
.ck p{font-size:.88rem;margin:0;max-width:66ch;text-transform:none}
.ck__opts{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;font-size:.85rem;text-transform:none}
.ck__opts label{display:flex;align-items:center;gap:7px}
.ck__opts input{width:16px;height:16px;accent-color:var(--lime-dk)}
.ck__btns{display:flex;flex-wrap:wrap;gap:9px}
@media(max-width:860px){.ck{bottom:66px}}

/* ---------- motion -------------------------------------------------------- */
[data-rv]{opacity:0;transform:translateY(20px);transition:opacity .55s ease-out,transform .55s cubic-bezier(.2,.7,.3,1)}
[data-rv].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1;transform:none}
  /* the ticker renders static rather than looping */
  .ticker__track{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
  .sec-head h2::after{width:100%}
}

/* ---------- legal pages --------------------------------------------------- */
.legal{max-width:78ch;margin-inline:auto;padding:clamp(40px,5vw,72px) 0;text-transform:none}
.legal h1{font-size:clamp(2rem,1.5rem + 2vw,3rem);margin-bottom:10px}
.legal h2{font-size:1.3rem;margin:34px 0 10px}
.legal table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.92rem}
.legal th,.legal td{border:2px solid var(--black);padding:10px 12px;text-align:left;vertical-align:top}
.legal th{background:var(--lime);font:800 .74rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--black)}

/* ---------------------------------------------------- responsive tables */
/* A data table with several prose columns has a min-content width far
   wider than a phone. Without its own scroll box it widens the whole
   document and the page scrolls sideways. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll>table{margin:0}

/* ------------------------------------------------- overflow guard
   Nothing may widen the document. Form controls and replaced elements
   cap at their container; flex/grid children get min-width:0 so they
   are allowed to shrink below their content width; and the header's
   right-hand cluster wraps on a phone rather than pushing the page
   sideways. */
input,select,textarea,img,svg,video,iframe{max-width:100%}
.form,.mapwrap,.split__t,.hdr__r,.head-right{min-width:0}
.form,.mapwrap,.split__t{max-width:100%}
@media (max-width:820px){
  .hdr__r,.head-right{flex-wrap:wrap;justify-content:flex-end;row-gap:.4rem}
}

/* ------------------------------------------- legal-header-layout
   The LGPD privacy page is generated from a shared template and uses
   .hdr__cta for its header cluster. Most stylesheets in this batch define
   .hdr__r or .head-cta instead, so on those sites the cluster had no
   layout at all - block flow, and on a long brand name it ran off the
   screen. This defines it, keeps the back-link on one line, and lets the
   row wrap before anything overflows. */
.hdr__cta,.head-cta{display:flex;align-items:center;gap:.6rem;
  flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}
.hdr__cta .btn,.head-cta .btn{white-space:nowrap}
.hdr__cta .lang,.head-cta .lang{display:inline-flex;gap:.35rem;flex:0 0 auto}
@media (max-width:560px){
  .hdr__in,.head-in{flex-wrap:wrap;row-gap:.55rem}
  .hdr__in>.brand,.head-in>.brand{min-width:0;max-width:100%}
  .brand__n{white-space:normal;overflow-wrap:anywhere}
  .hdr__cta,.head-cta{width:100%;justify-content:flex-start}
}