/* Amazon Foods preview. Layout rhythm and type scale follow the Harvestra reference;
   colors come from the Amazon Foods logo (#f2722b orange, #343434 charcoal) and the brand packs. */
/* Instrument Sans (SIL Open Font License 1.1), served from this site so no page waits on another server for its type.
   shortcut: Google's "latin" set only, which has every character the site uses today (English, Portuguese accents,
   curly quotes); add the "latin-ext" file when a name needs a letter outside it. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/instrument-sans-latin.woff2) format('woff2'); }
:root {
  --ink: #161412;
  --muted: #5b544d;
  --bg: #f6f1ea;
  --card: #ffffff;
  --line: #e2d9cd;
  --orange: #f2722b;
  --orange-deep: #b04a12; /* text-safe orange on light backgrounds */
  --charcoal: #343434;
  --black: #0d0c0b;
  --th-red: #a3141c;
  --ma-purple: #3e1b52;
  --line-strong: #8c8073; /* borders of inputs: 3.85:1 on white, where --line is only decorative */
  --focus: var(--orange-deep); /* focus ring on light surfaces; dark and red sections override it below */
  --wa: #25d366;
  --danger: #b3261e;
  --notice-bg: #fff4e8;
  --notice-line: #f3c79f;
  --danger-bg: #fdecea; /* the form's error box, and its border */
  --danger-line: #f2b8b5;
  --line-soft: #f0ebe4; /* the rule under a product picture, on white */
  --stripe-a: #f5efe7; /* the two stripes of the "Photo coming soon" box */
  --stripe-b: #efe7dc;
  --ma-yellow: #f6d33c; /* the MA’YASAÍ wordmark */

  --h1: clamp(2.875rem, 1.895rem + 4.9vw, 5.9375rem);
  --h2: clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
  --h3: clamp(1.875rem, 1.675rem + 1vw, 2.5rem);
  --h4: clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --h6: clamp(1.125rem, 0.985rem + 0.7vw, 1.5625rem);
  --display: clamp(2.25rem, 1.53rem + 3.6vw, 4.5rem);

  --r12: 12px; --r16: 16px; --r24: 24px; --r99: 99px;
  --pad: 53px;
  --sec: 120px;
  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (max-width: 1439px) { :root { --pad: max(30px, calc((100vw - 1320px) / 2)); } }
@media (max-width: 991px) { :root { --pad: 30px; --sec: 96px; } }
/* Phones: a smaller scale, so that each screen holds more. Owner, 2026-11-13: "Aparencia muito grande do site em telas
   menores ... os maiores acessos viram de celulares"; he chose this set from a before and after picture ("Sim, aplicar").
   The headings grow with the width and meet the sizes above at 768px, so nothing jumps there. The other rules of the
   set are marked "compact phones" below. Tablets and computers are untouched. */
@media (max-width: 767px) { :root { --pad: 16px; --sec: 64px; --h1: clamp(2.5rem, 0.7rem + 7.5vw, 4.25rem); --h2: clamp(1.875rem, 0.98rem + 3.8vw, 2.875rem); --display: clamp(2rem, 1.04rem + 4.62vw, 3.5rem); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; accent-color: var(--orange-deep); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.5; letter-spacing: 0.2px; color: var(--ink); background: var(--bg); overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.hero, .cta, .footer, .mayasai { --focus: var(--orange); }
.brand-split__text { --focus: #fff; }
::selection { background: var(--orange); color: var(--black); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--black); color: #fff; padding: 10px 16px; border-radius: var(--r99); }
.skip:focus { top: 16px; }

.container { width: calc(100% - 2 * var(--pad)); max-width: 1320px; margin: 0 auto; }
.center { text-align: center; }
.mt { margin-top: 48px; }

/* type */
.h1 { font-size: var(--h1); line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; }
.h2 { font-size: var(--h2); line-height: 1.25; letter-spacing: -1.12px; font-weight: 500; }
.h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -0.8px; font-weight: 500; }
.h4 { font-size: var(--h4); line-height: 1.25; letter-spacing: -0.32px; font-weight: 500; }
.h6 { font-size: var(--h6); line-height: 1.25; letter-spacing: -0.24px; font-weight: 500; }
.h1, .h2, .h3, .h4, .h6, .pcard__name, .svc__name, .vcard__title { overflow-wrap: break-word; text-wrap: balance; }
p, li, dd, .pcard__en, .pcard__pack, .svc__blurb, .vcard__text { text-wrap: pretty; }

.pill { display: inline-block; font-size: .875rem; line-height: 1; padding: 8px 12px; border: 1px solid currentColor; border-radius: var(--r99); margin-bottom: 20px; }
.pill--light { color: #fff; }

/* buttons: pill with a round icon, as in the reference */
.btn { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-height: 52px; padding: 4px 4px 4px 22px; border-radius: var(--r99); text-decoration: none; font-size: 1rem; font-weight: 500; border: 2px solid transparent; transition: transform .2s, background-color .2s; cursor: pointer; }
.btn > span:first-child { min-width: 0; overflow-wrap: anywhere; } /* a long label wraps inside its pill when the text is large */
.btn:hover { transform: translateY(-2px); }
.btn__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; }
.btn__icon svg { width: 20px; height: 20px; }
.btn--dark { background: var(--black); color: #fff; }
.btn--dark .btn__icon { background: #fff; color: var(--black); }
.btn--light { background: #fff; color: var(--black); }
.btn--light .btn__icon { background: var(--black); color: #fff; }
.btn--outline { color: #fff; border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }
.btn--outline .btn__icon { background: var(--orange); color: var(--black); }
.btn--ghost { color: var(--black); border-color: var(--black); }
.btn--ghost .btn__icon { background: var(--black); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.circle-btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; display: grid; place-items: center; cursor: pointer; }
.circle-btn svg { width: 20px; height: 20px; }
.circle-btn:hover { background: var(--black); color: #fff; border-color: var(--black); }
/* Dim the icon and border, not the button: opacity on the button would also dim its focus ring. */
.circle-btn[aria-disabled="true"] { pointer-events: none; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.circle-btn[aria-disabled="true"] svg { opacity: .35; }
.mini-arrow { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--black); }
.mini-arrow svg { width: 13px; height: 13px; }

/* nav */
.nav { position: absolute; top: 12px; left: 0; right: 0; z-index: 50; }
.nav__bar { position: relative; max-width: 1340px; margin: 0 auto; width: calc(100% - 2 * var(--pad) + 20px); display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 18px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--r16); box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.nav__logo img { width: 170px; height: auto; }
.nav__menu { flex: 1; display: flex; justify-content: center; }
.nav__links { display: flex; align-items: center; }
.nav__links > li { display: flex; align-items: center; }
.nav__links > li + li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); margin: 0 14px; }
.nav__links a { text-decoration: none; font-size: 1rem; padding: 6px 2px; }
.nav__links a:hover, .nav__links a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.nav__links a[aria-current] { color: var(--orange-deep); }
.has-sub { position: relative; }
.sub-toggle { display: grid; place-items: center; width: 28px; height: 28px; margin-left: 2px; border: 0; background: transparent; cursor: pointer; border-radius: 6px; }
.sub-toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sub { display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); min-width: 200px; padding: 8px; background: var(--card); border-radius: var(--r12); box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.sub.is-open { display: block; }
.sub a { display: block; padding: 10px 12px; border-radius: 8px; white-space: nowrap; }
.sub a:hover { background: var(--bg); text-decoration: none; }
.nav__cta { min-height: 48px; font-size: .9375rem; }
.btn .btn__icon--wa { background: var(--wa); color: #fff; }
.nav__wa-mobile, .nav__toggle { display: none; }
/* The menu's breakpoints are in em (1180px and 992px at the default text size), so a visitor's larger text size
   brings the burger in earlier instead of crowding the bar; main.js uses the same 62em. */
@media (max-width: 73.75em) { .nav__cta-label { display: none; } }
@media (pointer: coarse) and (min-width: 62em) { .nav__links > li > a { padding: 10px 2px; } .sub-toggle { width: 44px; height: 44px; } }
@media (max-width: 61.99em) {
  .nav__bar { flex-wrap: wrap; padding: 12px 12px 12px 16px; }
  .nav__logo { flex: 1; }
  .nav__logo img { width: 150px; }
  .nav__cta { display: none; }
  .nav__toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; border-radius: 8px; }
  .nav__burger, .nav__burger::before, .nav__burger::after { display: block; width: 22px; height: 2px; background: var(--orange-deep); border-radius: 2px; transition: transform .2s; }
  .nav__burger { position: relative; }
  .nav__burger::before, .nav__burger::after { content: ''; position: absolute; left: 0; }
  .nav__burger::before { top: -7px; } .nav__burger::after { top: 7px; }
  .nav__toggle[aria-expanded="true"] .nav__burger { background: transparent; }
  .nav__toggle[aria-expanded="true"] .nav__burger::before { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__burger::after { transform: translateY(-7px) rotate(-45deg); }
  .js .nav__menu { display: none; }
  .nav__menu { flex-basis: 100%; flex-direction: column; padding: 8px 4px 6px; }
  .js .nav__menu.is-open { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; }
  .nav__links > li + li::before { display: none; }
  .nav__links li { border-top: 1px solid var(--line); }
  .nav__links a { display: block; width: 100%; padding: 14px 4px; font-size: 1.125rem; }
  .has-sub { flex-wrap: wrap; }
  .has-sub > a { width: auto; flex: 1; }
  .sub-toggle { width: 44px; height: 44px; }
  .sub { position: static; transform: none; flex-basis: 100%; box-shadow: none; padding: 0 0 8px 16px; background: transparent; }
  .sub a { padding: 10px 4px; font-size: 1rem; }
  .nav__wa-mobile { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 14px 16px; background: var(--black); color: #fff; border-radius: var(--r12); text-decoration: none; font-weight: 500; }
  .nav__wa-mobile svg { width: 22px; height: 22px; color: var(--wa); flex: none; }
}

/* sections */
/* Like the reference, section spacing sits on the inner column, not on the section itself. */
.sec > .container:first-child { padding-top: var(--sec); }
.sec > .container:last-child { padding-bottom: var(--sec); }
.sec--tight > .container:first-child { padding-top: calc(var(--sec) / 2); }
.sec--tight > .container:last-child { padding-bottom: calc(var(--sec) / 2); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 991px) { .split { grid-template-columns: 1fr; gap: 48px; } }
.split > *, .footer__top > * { min-width: 0; } /* a long word or an input must not widen its grid column */

/* hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; color: #fff; background: var(--black); overflow: hidden; }
@media (min-height: 1000px) { .hero { min-height: 900px; } }
.hero__media, .hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity .6s; }
.hero__video.is-ready { opacity: 1; }
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,8,6,.8) 0%, rgba(10,8,6,.45) 42%, rgba(10,8,6,0) 75%), linear-gradient(0deg, rgba(10,8,6,.5), transparent 30%); }
@media (max-width: 767px) { .hero__media::after { background: linear-gradient(0deg, rgba(10,8,6,.85) 0%, rgba(10,8,6,.55) 55%, rgba(10,8,6,.15) 100%); } }
/* A clip whose subject sits mid-frame (.hero--top). Wide screens: a darker scrim, because the copy lies over the subject. Phones held upright and tall enough: the picture moves to the top and fades into black, so the subject shows above the headline and not behind it. */
@media (min-width: 768px) { .hero--top .hero__media::after { background: linear-gradient(90deg, rgba(10,8,6,.85) 0%, rgba(10,8,6,.62) 45%, rgba(10,8,6,.12) 82%), linear-gradient(0deg, rgba(10,8,6,.5), transparent 30%); } }
@media (max-width: 767px) and (orientation: portrait) and (min-height: 700px) {
  .hero--top .hero__poster, .hero--top .hero__video { top: -14%; bottom: auto; height: 70%; }
  .hero--top .hero__media::after { background: linear-gradient(0deg, rgb(10,8,6) 44%, rgba(10,8,6,.7) 58%, rgba(10,8,6,.3) 70%, rgba(10,8,6,.1) 100%); }
}
.hero__inner { position: relative; padding-top: 120px; padding-bottom: 120px; }
.hero .h1 { max-width: 860px; }
.hero__lead { max-width: 520px; margin: 24px 0 32px; font-size: 1.125rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__toggle { position: absolute; right: max(var(--pad), calc((100% - 1320px) / 2)); /* the column's edge, on a wide screen too */ bottom: 24px; width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--orange); color: var(--black); display: grid; place-items: center; cursor: pointer; }
.hero__toggle[hidden] { display: none; }
.hero__toggle svg { width: 24px; height: 24px; }
.hero__toggle .i-play, .hero__toggle[aria-pressed="true"] .i-pause { display: none; }
.hero__toggle[aria-pressed="true"] .i-play { display: block; }
@media (max-width: 767px) { .hero { align-items: flex-end; } .hero__inner { padding-bottom: 140px; } .hero__lead { font-size: 1rem; } }
/* Phones held sideways: keep the buttons on the first screen. */
@media (max-height: 480px) and (orientation: landscape) { .hero__inner { padding-top: 96px; padding-bottom: 72px; } .hero .h1 { font-size: clamp(2.25rem, 11vh, 3.5rem); } .hero__lead { margin: 12px 0 16px; } }
/* Short phones held upright (320x568): the same, so that the second button is not cut by the first screen's foot. */
@media (max-width: 767px) and (max-height: 600px) and (orientation: portrait) { .hero__inner { padding-top: 100px; padding-bottom: 112px; } .hero .h1 { font-size: 2.5rem; } }

/* about teaser */
.split__text .h2 { margin-bottom: 24px; }
.chips__title { margin: 40px 0 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips a, .chips--static li { display: inline-block; padding: 10px 18px; background: var(--card); border-radius: var(--r99); text-decoration: none; font-size: 1rem; }
.chips a:hover { background: var(--black); color: #fff; }
.chips--static { margin-top: 24px; }
.circle-art { aspect-ratio: 1; max-width: 540px; margin-left: auto; border-radius: 50%; overflow: hidden; background: var(--card); box-shadow: 0 0 0 14px rgba(255,255,255,.7); }
.circle-art img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) { .circle-art { margin: 0 auto; max-width: 480px; } }

/* category showcase */
.services__title { max-width: 760px; margin-bottom: 48px; }
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.svc { position: relative; display: block; overflow: hidden; border-radius: var(--r16); color: #fff; text-decoration: none; background: var(--charcoal); }
.svc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.svc:hover img { transform: scale(1.04); }
.svc--wide { grid-column: 1 / -1; height: 640px; }
.svc--short { height: 420px; }
.svc--tall { height: 640px; }
.glass { background: rgba(20,16,12,.6); /* .6: white text keeps 4.5:1 even over a white photo */ backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.15); }
.svc__panel { position: absolute; left: 16px; right: 16px; bottom: 16px; max-width: 420px; margin-left: auto; padding: 20px; border-radius: var(--r12); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.svc--short .svc__panel, .svc--tall .svc__panel, .svc--card .svc__panel { margin-left: 0; }
.svc__name { font-size: var(--h6); font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.svc__blurb { font-size: .875rem; }
.svc__more { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.25); font-size: .875rem; }
.svc__more > span:last-child { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 767px) { .svc-grid { grid-template-columns: 1fr; } .svc--wide, .svc--tall { height: 400px; } .svc--short { height: 360px; } .services__title { margin-bottom: 32px; } } /* compact phones: 480, 420 and 48px before */

/* numbered category rail */
.values .h2 { max-width: 720px; margin: 0 auto 48px; }
@media (max-width: 767px) { .values .h2 { margin-bottom: 32px; } } /* compact phones */
.rail { position: relative; container-type: inline-size; }
/* Room for a focused card's ring, taken back by a margin so no card moves: 8px above the cards, and sideways only while
   a card has keyboard focus, so the row's cut edges stay on the page margin; scroll-padding keeps the snap points. */
.rail__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 0; margin-top: -4px; }
.rail__track:has(:focus-visible) { padding-inline: 8px; margin-inline: -8px; scroll-padding-inline: 8px; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > li { flex: none; scroll-snap-align: start; }
.rail__ctrl { display: flex; gap: 10px; margin-top: 24px; }
.rail__ctrl[hidden] { display: none; } /* main.js hides the arrows when every card is in view */
/* Category marquee: full-bleed, drifts continuously like the reference; pauses on hover, focus or the button, and off screen. */
.marquee { overflow: hidden; max-width: 2540px; margin-inline: auto; } /* the strip is repeated twice: enough for 2540px */
.marquee__track { display: flex; gap: 20px; width: max-content; padding: 8px 0; animation: marquee 60s linear infinite; }
.marquee__track > li { flex: none; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee.is-off .marquee__track { animation-play-state: paused; }
/* Keyboard focus: stop the drift so the browser can scroll the focused card into view; 8px keeps its ring unclipped. */
.marquee:has(a:focus-visible) .marquee__track { animation: none; padding-inline: 8px; }
/* Paused with the button: the drift becomes a scroll position (main.js), so the strip can be swiped both ways. */
.marquee.is-paused { overflow-x: auto; scrollbar-width: none; }
.marquee.is-paused::-webkit-scrollbar { display: none; }
.marquee.is-paused .marquee__track { animation: none; }
@keyframes marquee { to { transform: translateX(calc(-50% - 10px)); } }
.marquee__ctrl { margin-top: 24px; }
.circle-btn .i-play, .circle-btn[aria-pressed="true"] .i-pause { display: none; }
.circle-btn[aria-pressed="true"] .i-play { display: block; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; padding: 0 var(--pad); }
  .marquee__track { animation: none; }
  .marquee__track > [aria-hidden="true"], .marquee__ctrl { display: none; }
}
/* Without JavaScript: hide the controls that would do nothing, and let the category strip scroll. */
html:not(.js) :is(.toolbar, .filters, .marquee__ctrl, .rail__ctrl, .sub-toggle, .nav__toggle) { display: none; }
html:not(.js) .marquee { overflow-x: auto; padding: 0 var(--pad); }
html:not(.js) .marquee__track { animation: none; }
html:not(.js) .marquee__track > [aria-hidden="true"] { display: none; }
/* The menu is then always open: on phones it must sit above the page, not over the title. */
@media (max-width: 61.99em) { html:not(.js) .nav { position: static; padding-top: 12px; } html:not(.js) .page-head > .container, html:not(.js) .pdp { padding-top: 48px; } }
.vcard { width: 300px; }
.vcard a { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 420px; padding: 24px 20px; border-radius: var(--r12); overflow: hidden; color: #fff; text-decoration: none; background: var(--charcoal); }
@media (max-width: 767px) { .vcard { width: 260px; } .vcard a { min-height: 380px; } }
.vcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s; }
.vcard a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.05) 40%, rgba(0,0,0,.75)); }
.vcard a:hover img { transform: scale(1.05); }
.vcard__head, .vcard__text { position: relative; z-index: 1; }
.vcard__head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; } /* wraps when the visitor's text size is large */
.vcard__no { font-size: 3rem; line-height: 1; letter-spacing: -1.5px; font-weight: 500; }
.vcard__no sup { font-size: .8125rem; letter-spacing: 0; margin-left: 2px; vertical-align: top; }
.vcard__title { font-size: 1.25rem; font-weight: 500; line-height: 1.25; padding-top: 4px; flex: 1 1 6rem; min-width: 0; }
.vcard__text { font-size: .875rem; }
.partners { margin-top: 96px; text-align: center; }
.partners__label { margin-bottom: 20px; }
/* The names are words in centred lines of even length, so no name is left alone on the last line (where the browser
   balances lines; elsewhere they wrap as they come). The margins stand for the old 12px 36px gap; the list takes the
   outer ones back, sideways no further than the page's own margin. */
.partners__list { margin: -6px max(-18px, calc(-1 * var(--pad))); text-align: center; text-wrap: balance; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.4px; color: var(--charcoal); }
.partners__list > li { display: inline-block; margin: 6px 18px; }
.partners__list--page { margin-top: 26px; }
.partners__list--page a { text-decoration: none; border-bottom: 2px solid var(--orange); }

/* brand split (TODA HORA) */
.brand-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 900px; }
.brand-split__img { position: relative; min-height: 420px; }
.brand-split__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brand-split__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; padding: 80px max(var(--pad), 60px); color: #fff; }
.brand-split--th .brand-split__text { background: var(--th-red); }
.brand-split__logo { width: 182px; height: auto; } /* the file is cut to the artwork: 182, 144 and 151px draw it as before */
.brand-split__text p { max-width: 520px; font-size: 1.125rem; }
.brand-split__text .h3 { max-width: 560px; font-size: var(--display); line-height: 1.1; letter-spacing: -0.024em; }
@media (max-width: 991px) { .brand-split { grid-template-columns: minmax(0, 1fr); min-height: 0; } .brand-split__img { min-height: 460px; } }
@media (max-width: 767px) { .brand-split__text { padding: 64px var(--pad); } .brand-split__img { min-height: 340px; } .brand-split__logo { width: 144px; } }
/* The TODA HORA band, on the home page and on the brands page, is one scene: the photo runs into a dark band and the red panel
   lies over its edge as a card. On phones and tablets the panel is a sheet that laps over the foot of the photo. */
.brand-split--scene .brand-split__text { position: relative; }
@media (min-width: 992px) {
  .brand-split--scene { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: clamp(720px, 58vw, 900px); padding: 72px max(var(--pad), calc((100% - 1320px) / 2)); background: var(--black); }
  /* The photo takes the left of the band and darkens into it on the right, where the card laps over its edge:
     a subject in the middle of the photo then stays clear of the card at every width. */
  .brand-split--scene .brand-split__img { position: absolute; inset: 0 auto 0 0; width: 64%; }
  .brand-split--scene .brand-split__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 62%, var(--black)); }
  /* --pos-wide is the point of the photo kept in view here: posWide in data.mjs for a stock photo, a style on the photo's box
     in build.mjs for the brands page (!important: the usual position arrives as an inline style). */
  .brand-split--scene .brand-split__img img { object-position: var(--pos-wide, 50% 50%) !important; }
  .brand-split--scene .brand-split__text { width: clamp(460px, 44vw, 600px); padding: clamp(40px, 4vw, 56px); gap: 20px; border-radius: var(--r24); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
  .brand-split--scene .brand-split__text .h3 { font-size: clamp(2.25rem, 3.6vw, 3.25rem); }
  .brand-split--scene .brand-split__logo { width: 151px; }
}
@media (max-width: 991px) { .brand-split--scene .brand-split__text { margin-top: -32px; border-radius: 32px 32px 0 0; } }

/* MA’YASAÍ */
.mayasai { background: var(--ma-purple); color: #fff; }
.mayasai__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: start; }
.mayasai__grid > * { min-width: 0; }
.wordmark { display: block; font-weight: 700; letter-spacing: 0; color: var(--ma-yellow); }
.mayasai__lead { margin: 20px 0 24px; font-size: 1.125rem; max-width: 460px; }
/* The badge files are cut to the artwork: the height draws them as large as before, and gap and margins keep the
   spacing their transparent margins used to give, so only their left edge moved (to the text edge). */
.badges { display: flex; gap: 58px; padding-top: 20px; margin-bottom: 49px; }
.badges img { width: auto; height: 106px; }
.rail--dark .circle-btn { color: #fff; }
.rail--dark .circle-btn:hover { background: #fff; color: var(--ma-purple); border-color: #fff; }
.mayasai .rail .pcard { width: 260px; }
/* Where three cards fit at 225px or more, they share the row instead of scrolling it; a fourth would still scroll */
@container (min-width: 715px) { .mayasai .rail__track > li { flex: 1 0 225px; } .mayasai .rail .pcard { width: 100%; } }
/* The brand's own clip (bucket, açaí bowl, berries), made by tools/mayasai-clip.py. main.js plays it like the opening video:
   the picture first, the clip over it once it runs, never under reduced motion, paused off screen or with the button. */
.mayasai__clip { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r24); overflow: hidden; background: rgba(0,0,0,.25); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.mayasai__clip img, .mayasai__clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mayasai__clip video { opacity: 0; transition: opacity .6s; }
.mayasai__clip video.is-ready { opacity: 1; }
.mayasai__toggle { position: absolute; right: 16px; bottom: 16px; color: #fff; background: rgba(13,12,11,.55); }
.mayasai__toggle[hidden] { display: none; }
.mayasai--page .pgrid { margin-top: 64px; }
@media (max-width: 991px) { .mayasai__grid { grid-template-columns: 1fr; gap: 40px; } }
/* The brands page's three MA’YASAÍ cards stay three across on a tablet, where two columns left the third alone. */
@media (min-width: 768px) and (max-width: 991px) { .mayasai--page .pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* feature */
.split--feature { align-items: stretch; }
.feature__img { position: relative; border-radius: var(--r16); overflow: hidden; min-height: 560px; }
.feature__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__img--still img { object-position: left top; } /* the worker's face is at the photo's top left (about page); it stays still below */
.feature__text { align-self: center; }
.feature__text .h2, .feature__text .h3 { margin-bottom: 20px; }
.feature__text > p:not(.pill) { max-width: 540px; color: var(--muted); }
.feature__points { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 36px 0 40px; }
.feature__points svg { width: 40px; height: 40px; margin-bottom: 16px; color: var(--orange-deep); }
.feature__points .wheel { fill: var(--bg); }
.feature__points p { margin-top: 10px; color: var(--muted); font-size: .9375rem; }
@media (max-width: 991px) { .feature__img { min-height: 380px; } }
@media (max-width: 479px) { .feature__points { grid-template-columns: 1fr; } }

/* product cards */
.featured .h2 { margin-bottom: 48px; }
.featured .container.center:last-child { margin-top: 48px; }
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* A row of four stays four from 992px (a product page's "More in…"), so the fourth card is not alone in a second row. */
@media (min-width: 992px) and (max-width: 1199px) { .pgrid--row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991px) { .pgrid, .pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.pcard[hidden] { display: none; }
/* Catalog filter (main.js): the list dissolves into its filtered state. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* the rule near the top does not reach these */
.pcard__link { display: flex; flex-direction: column; height: 100%; background: var(--card); color: var(--ink); border-radius: var(--r16); overflow: hidden; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.pcard__link:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(40,24,10,.12); }
.pcard__media { display: grid; place-items: center; aspect-ratio: 1; padding: 20px; background: var(--card); border-bottom: 1px solid var(--line-soft); }
.pcard__media img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; } /* square box whatever the photo's shape */
.pcard__ph { display: grid; place-items: center; width: 100%; height: 100%; border-radius: var(--r12); background: repeating-linear-gradient(135deg, var(--stripe-a) 0 14px, var(--stripe-b) 14px 28px); color: var(--muted); text-align: center; font-size: .9375rem; font-weight: 500; }
.pcard__ph--lg { aspect-ratio: 1; font-size: 1.25rem; }
/* The body fills the card and the pack line sits at its foot, so the pack lines of a row line up. */
.pcard__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.pcard__body > :nth-last-child(2) { margin-bottom: 4px; } /* with the gap, at least 10px above the dashed rule */
.pcard__cat { font-size: .8125rem; color: var(--orange-deep); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; overflow-wrap: anywhere; text-wrap: wrap; } /* wrap: a label, not body copy (the card is an li); it breaks after its "·" */
.pcard__name { font-size: 1.1875rem; font-weight: 500; line-height: 1.3; letter-spacing: -.2px; overflow-wrap: anywhere; }
.pcard__en { font-size: .875rem; color: var(--muted); }
.pcard__pack { font-size: .875rem; color: var(--ink); padding-top: 8px; border-top: 1px dashed var(--line); margin-top: auto; }
/* Phones keep two columns so the catalog is half as long; only very narrow screens stack. */
@media (max-width: 479px) { .pgrid, .pgrid--3 { gap: 12px; } .pcard__media { padding: 12px; } .pcard__body { padding: 12px 12px 16px; } .pcard__name { font-size: 1rem; } }
@media (max-width: 339px) { .pgrid, .pgrid--3 { grid-template-columns: minmax(0, 1fr); } }

/* CTA */
.cta { position: relative; min-height: 820px; display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--black); }
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,8,6,.85), rgba(10,8,6,.35)); }
.cta__inner { position: relative; z-index: 2; }
.cta .h2 { max-width: 680px; font-size: var(--h1); line-height: 1.05; letter-spacing: -0.025em; }
.cta p { max-width: 480px; margin: 24px 0 32px; font-size: 1.125rem; }
@media (max-width: 767px) { .cta { min-height: 640px; } .cta .h2 { font-size: var(--display); } }

/* footer */
.footer { background: var(--black); color: #fff; padding-bottom: 40px; overflow: hidden; }
.footer__top { padding-top: var(--sec); display: grid; grid-template-columns: 4fr 8fr; gap: 60px; }
.footer__logo { display: inline-block; background: #fff; padding: 14px 18px; border-radius: var(--r12); }
.footer__logo img { width: 190px; height: auto; }
.footer__tag { margin: 20px 0; color: rgba(255,255,255,.8); max-width: 320px; }
.footer__social { display: flex; gap: 12px; margin-bottom: 28px; }
.footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); }
.footer__social a:hover { background: #fff; color: var(--black); }
.footer__social svg { width: 20px; height: 20px; }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.footer__h { font-size: 1.125rem; font-weight: 600; margin-bottom: 18px; }
.footer__cols li + li { margin-top: 12px; }
.footer__cols a { text-decoration: none; color: rgba(255,255,255,.85); }
.footer__cols ul:not(.footer__contact) a { display: inline-block; padding-block: 6px; margin-block: -6px; } /* a 36px tap area, as tall as the rows are apart; nothing moves */
.footer__cols a:hover { color: #fff; text-decoration: underline; }
.footer__contact span { display: block; font-size: .8125rem; color: var(--orange); margin-bottom: 2px; }
.footer__contact a { word-break: break-word; }
.footer__mark { display: flex; align-items: center; gap: 24px; justify-content: center; margin: 100px 0 40px; flex-wrap: wrap; }
.footer__mark > span:first-child { font-size: clamp(3.5rem, 1rem + 10vw, 10rem); line-height: 1; letter-spacing: -0.04em; font-weight: 600; white-space: nowrap; }
.footer__mark-sub { font-size: clamp(1rem, .8rem + 1vw, 1.75rem); line-height: 1.2; color: var(--orange); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.25); font-size: .875rem; color: rgba(255,255,255,.75); }
@media (min-width: 992px) and (max-width: 1199px) { .footer__cols { gap: 20px; } .footer__contact a { font-size: .8125rem; } }
@media (max-width: 991px) { .footer { padding-bottom: 36px; } .footer__top { grid-template-columns: 1fr; } .footer__cols { grid-template-columns: repeat(2, 1fr); } .footer__bottom { flex-direction: column; } .footer__mark { flex-direction: column; gap: 8px; } .footer__mark-sub { text-align: center; } .footer__mark-sub br { display: none; } }
@media (max-width: 767px) { .footer { padding-bottom: 32px; } .footer__mark { margin: 64px 0 32px; } .footer__mark > span:first-child { font-size: min(13.5vw, calc(1rem + 10vw)); } }
@media (max-width: 479px) { .footer__cols { grid-template-columns: 1fr; } }

/* inner pages */
.page-head > .container { padding: 180px 0 40px; }
.page-head .h2 { max-width: 900px; margin: 0 auto; font-size: var(--display); letter-spacing: -0.03em; }
.page-head__lead { max-width: 560px; margin: 24px auto 0; color: var(--muted); }
@media (max-width: 767px) { .page-head > .container { padding-top: 120px; } } /* compact phones: 140px before */
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
/* The panel sits in the flow at the card's foot, so a card grows with a visitor's larger text instead of cutting it;
   height: the cards of a row grow together. */
.svc--card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 400px; height: 100%; }
.svc--card .svc__panel { position: relative; inset: auto; margin: 16px; }
@media (max-width: 1199px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .svc--card { min-height: 220px; } .svc--card .svc__panel { margin: 8px; padding: 12px; } .svc--card .svc__blurb { display: none; } .svc--card .svc__name { font-size: 1.0625rem; } .cat-grid { gap: 12px; } }

/* footer quick question (opens WhatsApp prefilled, works without JavaScript) */
.quick { margin: 0 0 28px; max-width: 380px; }
.quick label { display: block; }
.quick__row { display: flex; gap: 10px; }
.quick__row input { flex: 1; min-width: 0; padding: 13px 18px; border-radius: var(--r99); border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; }
.quick__row input::placeholder { color: rgba(255,255,255,.65); }
.quick__row button { flex: none; width: 50px; height: 50px; border-radius: 50%; border: 0; background: #fff; color: var(--black); display: grid; place-items: center; cursor: pointer; }
.quick__row button svg { width: 20px; height: 20px; }
.quick__note { margin-top: 10px; font-size: .8125rem; color: rgba(255,255,255,.7); }

.catalog { scroll-margin-top: calc(24px - var(--pinned)); } /* lands 24px from the top, whatever the scroll-padding (set with .filters) */
.catalog > .container:first-child { padding-top: 40px; }
.toolbar { margin: 24px 0 8px; }
.search__label { display: block; font-weight: 500; margin-bottom: 8px; }
.search__box { display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 0 18px; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--r99); }
.search__box:focus-within { border-color: var(--black); outline: 2px solid var(--focus); outline-offset: 2px; }
.search__box svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.search__box input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 0; outline: none; }
/* Sticky: the category filter stays in reach while the long product list scrolls under it. It is always one row,
   which scrolls sideways where the filters do not fit (phones, tablets, large text): a wrapped bar would be taller
   than the room that scroll-padding keeps clear below it. The 8px at each end leave room for a focus ring. */
.filters { position: sticky; top: 0; z-index: 20; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -8px 16px; padding: 12px 8px; background: var(--bg); border-bottom: 1px solid var(--line); }
.filters::-webkit-scrollbar { display: none; }
.filters li { flex: none; }
/* Phones, and touch tablets (which get no scrollbar): the row runs to the screen's edges, so a chip cut by the edge shows that there are more. */
@media (max-width: 767px), (pointer: coarse) and (max-width: 1199px) { .filters { margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); } }
/* Keyboard focus and in-page jumps land below a pinned bar, with room for a focus ring: 84px at the default text size,
   of which 1.5rem is the bar's line of text, so the room grows with a visitor's larger text as the bar does. */
html:has(.filters, .brand-jump) { --pinned: calc(60px + 1.5rem); scroll-padding-top: var(--pinned); }
.filter { padding: 10px 16px; border-radius: var(--r99); border: 1.5px solid var(--line-strong); background: var(--card); cursor: pointer; }
.filter span { color: var(--muted); font-size: .8125rem; margin-left: 2px; }
.filter:hover:not([aria-pressed="true"]) { border-color: var(--black); }
.filter[aria-pressed="true"] { background: var(--black); color: #fff; border-color: var(--black); }
.filter[aria-pressed="true"] span { color: rgba(255,255,255,.75); }
/* Mouse users get a thin scrollbar on the filter row where it does not fit; touch screens swipe it and keep the clean row. */
@media (hover: hover) and (pointer: fine) {
  .filters { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
  .filters::-webkit-scrollbar { display: block; height: 6px; }
  .filters::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
  html:has(.filters) { --pinned: calc(70px + 1.5rem); } /* the scrollbar makes the bar 10px taller */
}
.results { margin-bottom: 24px; color: var(--muted); }
.empty { padding: 48px 0; display: grid; justify-items: start; gap: 16px; }
.empty[hidden] { display: none; }

.pdp { padding: 150px 0 40px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: .875rem; color: var(--muted); margin-bottom: 32px; }
.crumbs li + li::before { content: '/'; content: '/' / ''; margin-right: 8px; } /* the second: not read aloud, where understood */
.crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; } /* a 42px tap area; nothing moves */
@media (max-width: 767px) { .pdp { padding-top: 116px; } .crumbs ol { margin-bottom: 20px; } } /* compact phones: 150 and 32px before; 116px leaves 20px under the menu bar */
.pdp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.pdp__grid > * { min-width: 0; }
.pdp__media { background: var(--card); border-radius: var(--r24); padding: 40px; }
.pdp__media img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.pdp__note { margin-top: 12px; font-size: .875rem; color: var(--muted); text-align: center; }
/* More photos of one product (PGM, PFM): one row that is swiped a photo at a time, with a small copy of each under it
   to pick from. main.js marks the small copy of the photo in view. */
.gal__track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gal__track::-webkit-scrollbar { display: none; }
.gal__slide { flex: none; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.gal__thumbs { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.gal__thumbs li { flex: 0 1 76px; min-width: 0; } /* narrower on a small phone, so that all stay in one row */
.gal__thumbs a { display: block; padding: 5px; border: 2px solid var(--line); border-radius: var(--r12); transition: border-color .2s; }
.gal__thumbs a:hover { border-color: var(--muted); }
.gal__thumbs a[aria-current] { border-color: var(--ink); }
/* On a wide screen the small copies stand in a column beside the row: under it they would start below the first
   screen of a laptop. */
@media (min-width: 1200px) {
  .gal { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 16px; align-items: start; }
  .gal__thumbs { flex-direction: column; justify-content: flex-start; margin-top: 0; }
  .gal__thumbs li { flex: none; }
}
.pdp__info .h3 { margin-bottom: 8px; }
.pdp__en { font-size: 1.125rem; color: var(--muted); }
.specs { margin: 32px 0; border-top: 1px solid var(--line); }
.specs div { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--muted); }
.specs dd { grid-column: 2; } /* a row with several values (a pack in several sizes): one under the other, beside the name */
.pdp__hint { margin-top: 16px; font-size: .875rem; color: var(--muted); max-width: 520px; }
@media (max-width: 991px) { .pdp__grid { grid-template-columns: 1fr; gap: 32px; } .pdp__media { padding: 24px; } }
/* Tablets keep photo and details side by side; on phones the photo is capped so the name stays near the top. */
@media (min-width: 768px) and (max-width: 991px) { .pdp__grid { grid-template-columns: 1fr 1fr; } }
/* width: the auto margins would size the box by its picture. 75svh: on a phone held sideways the photo leaves room for the name under it. */
@media (max-width: 767px) { .pdp__media { width: 100%; max-width: 440px; max-width: min(440px, 75svh); margin-inline: auto; } }
/* Sticky: where photo and details sit side by side, the photo stays in view while the details scroll. */
@media (min-width: 768px) { .pdp__media { position: sticky; top: 24px; } }
@media (max-width: 479px) { .specs div { grid-template-columns: 1fr; gap: 2px; } .specs dd { grid-column: 1; } .specs dd + dd { margin-top: 4px; } }

/* Sticky: the three jump links ride along at the top of this long page, in the same floating bar as the main menu. */
.brand-jump { position: sticky; top: 12px; z-index: 30; display: flex; gap: 4px; width: fit-content; max-width: calc(100% - 2 * var(--pad)); margin: 0 auto 48px; padding: 6px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--r99); box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.brand-jump a { padding: 10px 18px; border-radius: var(--r99); text-decoration: none; font-weight: 500; white-space: nowrap; }
.brand-jump a:hover { background: var(--bg); }
/* Phones: tighter links that keep a 44px target. If the three still do not fit, the bar scrolls sideways instead of spilling. */
@media (max-width: 479px) { .brand-jump { overflow-x: auto; scrollbar-width: none; } .brand-jump::-webkit-scrollbar { display: none; } .brand-jump a { padding: 11px 12px; font-size: .9375rem; } }
@media (max-width: 389px) { .brand-jump { gap: 0; } .brand-jump a { padding: 11px 9px; } }
.sec--tight .h4 { margin-bottom: 24px; }

.prose p + p { margin-top: 16px; }
.prose p:not(.pill) { color: var(--muted); }
.prose .h4, .prose .h3 { margin-bottom: 20px; }
.prose .btn { margin-top: 28px; }
.loc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.loc-grid--stack { grid-template-columns: 1fr; margin-top: 32px; }
.loc { background: var(--card); border-radius: var(--r16); padding: 28px; }
.loc svg { width: 28px; height: 28px; color: var(--orange-deep); margin-bottom: 12px; }
.loc p { margin: 8px 0 12px; color: var(--muted); }
.loc a { color: var(--orange-deep); font-weight: 500; }
@media (max-width: 767px) { .loc-grid { grid-template-columns: 1fr; } }

/* contact */
.channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.channel { display: grid; gap: 4px; padding: 28px; background: var(--card); border-radius: var(--r16); text-decoration: none; height: 100%; transition: transform .2s; }
.channel:hover { transform: translateY(-3px); }
.channel svg { width: 32px; height: 32px; margin-bottom: 10px; color: var(--orange-deep); }
.channel--wa { background: var(--black); color: #fff; }
.channel--wa svg { color: var(--wa); }
.channel__k, .channel__h { font-size: .875rem; opacity: .8; }
.channel__v { font-size: 1.625rem; font-weight: 500; letter-spacing: -.4px; word-break: break-word; }
.channel__v--sm { font-size: 1.1875rem; }
@media (max-width: 991px) { .channels { grid-template-columns: 1fr; } }
.split--form { align-items: start; grid-template-columns: 5fr 7fr; }
@media (max-width: 991px) { .split--form { grid-template-columns: 1fr; } }
.demo-note { margin-top: 16px; padding: 16px 18px; border-radius: var(--r12); background: var(--notice-bg); border: 1px solid var(--notice-line); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: var(--card); padding: 36px; border-radius: var(--r24); }
.form > * { min-width: 0; }
@media (max-width: 767px) { .form { grid-template-columns: 1fr; padding: 24px 18px; } }
.field { display: grid; gap: 6px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 500; }
.field .opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r12); background: var(--card); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--black); outline: 2px solid var(--focus); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field__err { color: var(--danger); font-size: .875rem; }
.field__err:empty { display: none; }
.form__req { font-size: .875rem; color: var(--muted); }
.form__status { padding: 18px; border-radius: var(--r12); background: var(--notice-bg); border: 1px solid var(--notice-line); }
.form__status[hidden] { display: none; }
.form__status.is-error { background: var(--danger-bg); border-color: var(--danger-line); }
.form__status .btn-row { margin-top: 12px; }

/* Scroll-trigger: main.js hides what starts below the first screen (.reveal) and shows it once it scrolls into view
   (.is-in). The hidden start is never set here alone, so the page stays whole without the script. --i is the column. */
.reveal { opacity: 0; transform: translateY(32px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 90ms); }
@media print { .reveal { opacity: 1; transform: none; } }

/* Scroll-linked motion and parallax, run by the browser's own scroll timelines: no script, and no layout changes.
   A browser without them shows the page still; so does "reduce motion" (the rule near the top removes animations). */
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) { /* screen: on paper a scroll timeline would freeze things half way */
    /* A box that hides its overflow becomes a scroll container, and a timeline inside would follow it, not the page: clip instead. */
    .hero, .cta, .footer, .circle-art, .feature__img, .brand-split__img { overflow: clip; }
    /* Parallax: a photo drifts inside its frame while the frame crosses the screen, so it reads as lying behind the page.
       Framed photos are drawn 14% larger and move 6% each way. */
    .circle-art img, .feature__img img, .brand-split__img img, .cta__bg { animation: drift 1ms linear both; animation-timeline: view(); }
    .circle-art img, .feature__img img, .brand-split__img img { scale: 1.14; }
    /* Full-width bands move further: the photo box is 20% taller than the band and travels 10% of the band each way (8.3% of itself). */
    .cta__bg, .brand-split--scene .brand-split__img img { top: -10%; height: 120%; scale: none; animation-name: drift-band; }
    /* The brands page's band stays still: its photo has a face on the left, and enlarged for the drift the face slid under the card. */
    .brand-split--still .brand-split__img img { top: 0; height: 100%; animation: none; }
    /* So does the same photo on the about page: enlarged for the drift, it cut the worker's face. */
    .feature__img--still img { scale: none; animation: none; }
    /* The opening video falls behind as the first screen scrolls away. */
    .hero__media { animation: hero-away 1ms linear both; animation-timeline: view(); animation-range: exit; }
    /* The big name at the foot of every page rises into place as the footer scrolls in. */
    .footer__mark > span:first-child { animation: mark-in 1ms linear both; animation-timeline: view(); animation-range: entry; }
  }
}
@keyframes drift { from { translate: 0 -6%; } to { translate: 0 6%; } }
@keyframes drift-band { from { translate: 0 -8.3%; } to { translate: 0 8.3%; } }
@keyframes hero-away { to { translate: 0 18%; } }
@keyframes mark-in { from { translate: 0 45%; opacity: .2; } }

/* The home page's red band (TODA HORA) and purple band (.mayasai), and the purple part of the brands page, build
   themselves as they scroll in. Owner, 2026-11-13:
   "que a imagem/msg dessa parte se formasse conforme vou abaixando o site". Each piece follows the scroll through the
   lower part of the screen, forward and back; nothing is played once. The distances are shares of the screen's height
   (vh), not of the piece's, so a tall piece on a short screen (zoomed in, a phone on its side) is whole just as soon.
   Without scroll timelines, main.js shows the red card and the purple band's text once (.reveal); the cards stand still. */
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    /* main.js's one-shot reveal stands down for these pieces. */
    .brand-split--scene:not(.brand-split--still) > .reveal, .mayasai__intro > .reveal { opacity: 1; transform: none; transition: none; }
    /* The photo stands still in this band: no drift and no fade. Owner, 2026-11-13, with a screenshot of it: "O efeito de
       movimento dessa parte deve ser somente das informacoes e nao da foto de fundo". */
    .brand-split--scene:not(.brand-split--still) .brand-split__img img { top: 0; height: 100%; animation: none; }
    /* The red card rises on phones and comes from the right on wide screens; the purple band's text comes from the left. */
    .brand-split--scene:not(.brand-split--still) .brand-split__text, .mayasai__intro[data-reveal-list] > * { animation: form-in 1ms linear both; animation-timeline: view(); animation-range: cover 0% cover 28vh; }
    .brand-split--scene:not(.brand-split--still) .brand-split__text { --fy: 56px; }
    .mayasai__intro[data-reveal-list] > * { --fx: -56px; }
    /* The cards sit in a sideways scroller, which a view() of their own would follow instead of the page: they take the
       rail's timeline, one after the other, and grow from their foot (a shift would make the rail scroll). */
    .mayasai .rail { view-timeline: --rail; }
    .mayasai .rail__track > li { transform-origin: 50% 100%; animation: form-grow 1ms linear both; animation-timeline: --rail; animation-range: cover 0% cover 26vh; }
    .mayasai .rail__track > li:nth-child(2) { animation-range: cover 6vh cover 32vh; }
    .mayasai .rail__track > li:nth-child(n+3) { animation-range: cover 12vh cover 38vh; }
    /* The MA’YASAÍ part of the brands page builds the same way. Owner, 2026-11-13, with a screenshot of each: "O msm efeito
       de rolagem que tem nessa parte da imagem 1 deve ter no da pagina da imagem 2. Igual ou um que se adeque a pagina".
       Its text comes from the left by the rule above, and its clip grows from its foot. The distances are a little
       shorter than the home band's. The three product cards under them stand still: after seeing them grow he sent a
       screenshot of the cards and wrote "essa parte do site ... nao precisa ter efeito". */
    .mayasai--page .mayasai__clip.reveal { opacity: 1; transform: none; transition: none; }
    .mayasai--page .mayasai__intro[data-reveal-list] > * { animation-range: cover 0% cover 22vh; }
    /* The button is whole as soon as all of it is on the screen: after that jump it lands near the foot of a laptop's screen. */
    .mayasai--page .mayasai__intro[data-reveal-list] > .btn-row { animation-range: entry 0% entry 100%; }
    .mayasai--page .mayasai__clip { transform-origin: 50% 100%; animation: form-grow 1ms linear both; animation-timeline: view(); animation-range: cover 0% cover 22vh; }
    /* Keyboard focus never lands on a piece that is still forming (the first selector has to outweigh the card's rule above). */
    .brand-split--scene:not(.brand-split--still) .brand-split__text:focus-within, .mayasai__intro > :focus-within, .mayasai .rail__track > li:focus-within, .mayasai--page .mayasai__clip:focus-within { animation: none; }
  }
  @media screen and (prefers-reduced-motion: no-preference) and (min-width: 992px) {
    .brand-split--scene:not(.brand-split--still) .brand-split__text { --fx: min(48px, var(--pad)); --fy: 0px; } /* never further than the band's side padding, or the screen edge cuts its corner */
  }
}
@keyframes form-in { from { opacity: 0; translate: var(--fx, 0px) var(--fy, 0px); } }
@keyframes form-grow { from { opacity: 0; scale: .82; } }

/* Windows high-contrast themes drop backgrounds: restore what carried meaning. */
@media (forced-colors: active) {
  .nav__burger, .nav__burger::before, .nav__burger::after { background: CanvasText; }
  .filter[aria-pressed="true"] { background: Highlight; color: HighlightText; border-color: Highlight; }
  .filter[aria-pressed="true"] span { color: HighlightText; }
  .nav__logo, .footer__logo { forced-color-adjust: none; background: #fff; }
  .brand-split__logo { forced-color-adjust: none; background: var(--th-red); padding: 8px 12px; border-radius: var(--r12); } /* a white logo */
}