:root {
  --paper:#f5f3ee;
  --ink:#172723;
  --green:#184a3a;
  --muted:#59635c;
  --line:#d6d9ce;
  --soft:#e6e9df;
  --white:#fff;
  --max:1248px;
  --sans:'Plus Jakarta Sans','Avenir Next',Avenir,'Segoe UI',sans-serif;
  --mono:'Space Mono','SFMono-Regular',Consolas,monospace;
  color-scheme:light}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.125rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit}
a,button,summary {
  -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #836223;
  outline-offset:5px}
::selection {
  background:#d1dfca}
h1,h2,h3,h4,p {
  margin:0}
h1,h2,h3,h4 {
  line-height:1.15;
  letter-spacing:-.045em;
  font-weight:600}
p+p {
  margin-top:18px}
ul {
  padding-left:20px}
em {
  font-style:normal;
  color:var(--green)}
.shell {
  max-width:var(--max);
  margin:0 auto;
  padding-left:32px;
  padding-right:32px}
.site-header {
  max-width:1440px;
  margin:0 auto;
  min-height:96px;
  padding:24px 48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line)}
.identity {
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0}
.monogram {
  font-size:2.75rem;
  line-height:1;
  font-weight:650;
  letter-spacing:-.12em;
  color:var(--green);
  padding-right:4px}
.brand-dot {
  font-size:1.875rem;
  letter-spacing:0}
.identity-name {
  font-size:1rem;
  line-height:1.35;
  font-weight:600;
  letter-spacing:-.02em}
nav {
  display:flex;
  gap:24px;
  align-items:center}
nav a {
  font-size:1rem;
  font-weight:500}
nav a:hover,.footer-links a:hover {
  text-decoration:underline;
  text-underline-offset:5px}
.nav-contact {
  border:1px solid var(--green);
  padding:10px 14px;
  display:flex;
  gap:18px;
  align-items:center}
.menu-toggle {
  background:none;
  border:1px solid var(--line);
  color:var(--ink);
  padding:8px 12px}
.menu-toggle[hidden] {
  display:none}
.has-js .menu-toggle {
  display:none}
.skip-link {
  position:absolute;
  top:-100px;
  left:16px;
  padding:12px 18px;
  background:var(--green);
  color:var(--paper);
  z-index:100}
.skip-link:focus {
  top:10px}
.hero {
  position:relative;
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:24px 36px;
  padding-top:32px;
  padding-bottom:16px;
  align-items:start}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.13em;
  font-family:var(--mono);
  font-size:0.8125rem;
  line-height:1.6;
  font-weight:500}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  margin-right:8px}
.hero h1 {
  font-size:clamp(2.625rem,4.5vw,4rem);
  margin:25px 0 26px;
  line-height:1.06;
  max-width:710px;
  letter-spacing:-.05em}
.hero-lead {
  font-size:1.25rem;
  line-height:1.65;
  max-width:540px;
  color:var(--muted)}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  background:var(--green);
  color:var(--paper);
  padding:16px 23px;
  font-size:1.0625rem;
  font-weight:600;
  min-height:54px;
  line-height:1.5;
  transition:background .2s}
.button:hover {
  background:#24624d}
.button span {
  font-size:1.25rem;
  font-weight:400}
.hero .button {
  margin-top:30px}
.hero-note {
  margin-top:15px;
  font-size:0.9375rem;
  color:var(--muted)}
.hero-art {
  align-self:start;
  min-width:0;
  width:100%;
  margin:0;
  padding:0}
.art-caption {
  width:100%;
  max-width:400px;
  margin:0 auto;
  font-family:var(--mono);
  font-size:.75rem;
  line-height:1.5;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted)}
.art-footer {
  max-width:400px;
  margin:0 auto;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:1rem;
  line-height:1.6;
  color:var(--muted);
  text-align:center;
  text-wrap:balance}
.integration-map {
  position:relative;
  width:100%;
  max-width:400px;
  height:320px;
  margin:28px auto 24px}
.integration-links {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:#9aafa1;
  stroke-width:1.25}
.integration-links path {
  vector-effect:non-scaling-stroke}
.integration-node {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:42%;
  height:96px;
  padding:12px 6px;
  border:1px solid #c5cec1;
  border-radius:4px;
  background:#eeefe7;
  text-align:center}
.integration-node span {
  font-family:var(--mono);
  font-size:.75rem;
  line-height:1.2;
  color:var(--muted)}
.integration-node strong {
  font-size:1.125rem;
  line-height:1.4;
  font-weight:600}
.node-people {top:0;left:0}
.node-processes {top:0;right:0}
.node-data {bottom:0;left:0}
.node-technology {bottom:0;right:0}
.integration-center {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--green);
  color:var(--paper);
  box-shadow:0 0 0 8px var(--paper);
  font-size:1.75rem;
  line-height:1;
  font-weight:500;
  letter-spacing:-.08em;
  padding-right:.08em}
.section {
  padding-top:92px;
  padding-bottom:92px}
.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:50px;
  align-items:end;
  margin-bottom:44px}
.section-heading .eyebrow {
  grid-column:1/-1;
  margin-bottom:25px}
.section-heading h2,h2 {
  font-size:clamp(2rem,3.2vw,2.875rem)}
.section-heading>p:last-child {
  max-width:440px;
  color:var(--muted);
  font-size:1.125rem;
  justify-self:end}
#frentes {
  padding-top:32px}
#frentes .section-heading {
  align-items:start;
  row-gap:20px;
  margin-bottom:32px}
#frentes .section-heading .eyebrow {
  margin-bottom:0}
#frentes .section-heading>p:last-child {
  margin:0}
.fronts {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line)}
.front {
  min-width:0;
  padding:32px 28px;
  display:flex;
  flex-direction:column}
.front+.front {
  border-left:1px solid var(--line)}
.front-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:25px}
.number {
  font-family:var(--mono);
  font-size:0.875rem;
  border:1px solid #bcc5b5;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center}
.front-symbol {
  font-size:2.375rem;
  color:var(--green);
  line-height:1}
.front h3 {
  min-height:2.3em;
  font-size:2rem;
  margin-bottom:16px;
  letter-spacing:-.04em}
.front>p {
  font-size:1.125rem;
  color:var(--muted)}
.front>p:not(.front-outcome) {
  min-height:5em}
.fronts-note {
  margin-top:24px;
  max-width:900px;
  color:var(--muted);
  font-size:1.0625rem;
  line-height:1.65}
.front ul {
  font-size:1.0625rem;
  margin-top:26px;
  margin-bottom:24px;
  line-height:1.8;
  min-height:95px}
.front li {
  padding-left:4px;
  margin-bottom:8px}
.front li::marker {
  color:var(--green)}
.front .front-outcome {
  font-size:1.0625rem;
  line-height:1.65;
  max-width:480px;
  margin-bottom:28px}
.text-link {
  font-size:1rem;
  font-weight:600;
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  color:var(--green);
  padding-bottom:9px;
  border-bottom:1px solid #a9b9a6;
  line-height:1.5}
.text-link span {
  font-size:1.375rem}
.front .text-link {
  margin-top:auto}
.method-section {
  background:var(--soft)}
.method-steps {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:26px;
  list-style:none;
  margin:0;
  padding:0}
.method-steps li {
  border-top:1px solid #a8b6a4;
  padding-top:22px}
.method-steps span {
  font-family:var(--mono);
  font-size:0.8125rem;
  color:var(--muted)}
.method-steps h3 {
  font-size:1.375rem;
  margin:18px 0 12px;
  letter-spacing:-.03em}
.method-steps p {
  font-size:1.0625rem;
  line-height:1.65;
  max-width:220px;
  color:var(--muted)}
.offers-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  margin:70px 0 28px;
  border-top:1px solid #bdc7b7;
  padding-top:40px}
.offers-heading h3 {
  font-size:1.625rem;
  max-width:400px}
.offers-heading p {
  font-size:1.0625rem;
  color:var(--muted);
  max-width:440px;
  justify-self:end}
.offers {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px}
.offers article {
  border:1px solid #bbc6b5;
  padding:24px 25px}
.offers .eyebrow {
  font-size:0.75rem;
  letter-spacing:.06em}
.offers h4 {
  font-size:1.5rem;
  line-height:1.2;
  letter-spacing:-.025em;
  margin:18px 0 16px;
  max-width:250px}
.offers p {
  font-size:1.0625rem;
  color:var(--muted);
  line-height:1.8}
.trajectory {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  padding-top:106px;
  padding-bottom:32px}
.trajectory h2 {
  margin:25px 0}
.trajectory-role {
  font-size:1.375rem;
  color:var(--muted);
  line-height:1.65;
  margin-bottom:30px}
.trajectory-copy {
  padding-top:44px}
.trajectory-copy p {
  font-size:1.125rem;
  color:var(--muted)}
.trajectory-copy .large-copy {
  font-size:1.75rem;
  color:var(--ink);
  line-height:1.45;
  letter-spacing:-.025em}
.experience-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:26px}
.experience-tags span {
  border:1px solid var(--line);
  padding:5px 10px;
  font-family:var(--mono);
  font-size:0.75rem}

.technology {
  padding-top:32px}
.technology .section-heading {
  margin-bottom:44px}
.technology-list {
  border-top:1px solid var(--line)}
details {
  border-bottom:1px solid var(--line)}
summary {
  cursor:pointer;
  display:grid;
  grid-template-columns:50px 1.1fr 1fr 30px;
  gap:16px;
  align-items:center;
  list-style:none;
  padding:25px 0;
  font-size:1.625rem;
  line-height:1.3;
  letter-spacing:-.035em}
summary::-webkit-details-marker {
  display:none}
.tech-number {
  font-family:var(--mono);
  font-size:0.8125rem;
  color:var(--muted);
  letter-spacing:0}
.tech-descriptor {
  font-size:1rem;
  letter-spacing:0;
  color:var(--muted)}
.plus {
  font-size:1.625rem;
  justify-self:end;
  font-weight:400}
details[open] .plus {
  transform:rotate(45deg)}
.tech-detail {
  padding:0 48px 25px 66px;
  max-width:800px;
  font-size:1.0625rem;
  color:var(--muted)}
.tech-detail p+p {
  margin-top:12px}
.tech-detail strong {
  color:var(--ink);
  font-weight:600}
.contact-section {
  background:var(--green);
  color:var(--paper);
  padding:75px 0}
.contact-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:70px;
  align-items:center}
.contact-section h2 {
  font-size:clamp(2.125rem,3.6vw,3rem);
  margin:24px 0}
.contact-section p:not(.eyebrow) {
  font-size:1.0625rem;
  color:#d7e2d6;
  max-width:460px}
.contact-action {
  justify-self:end}
.button-light {
  background:var(--paper);
  color:var(--green);
  font-size:1rem}
.button-light:hover {
  background:#e2ebde}
.contact-action p {
  margin-top:25px;
  font-size:1rem}
.contact-action p a {
  font-size:1.375rem;
  letter-spacing:-.02em;
  color:var(--paper)}
.contact-action .contact-small {
  font-size:0.9375rem;
  color:#d7e2d6}
.site-footer {
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-top:30px;
  padding-bottom:34px}
.footer-name {
  font-size:0.875rem;
  font-weight:550}
.site-footer p {
  font-size:0.8125rem;
  color:var(--muted);
  margin-top:4px}
.footer-links {
  display:flex;
  align-items:center;
  gap:24px;
  font-size:0.8125rem;
  color:var(--muted);
  flex-wrap:wrap}
.legal {
  padding-top:70px;
  padding-bottom:80px;
  max-width:820px}
.legal h1 {
  font-size:2.875rem;
  margin-bottom:28px}
.legal h2 {
  font-size:1.75rem;
  margin:34px 0 16px}
.legal p {
  font-size:1.125rem}
.legal a {
  text-decoration:underline}
.legal .back {
  margin-top:40px;
  display:inline-block}
.error-page {
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:24px}
.error-page h1 {
  max-width:650px;
  font-size:3.125rem}

@media(min-width:1500px) {
  .hero {
  padding-top:32px;
  padding-bottom:16px}
.hero h1 {
  font-size:3.875rem}
}

@media(max-width:1100px) {
  .site-header {
  padding:24px 30px}
nav {
  gap:17px}
nav a {
  font-size:0.875rem}
.identity-name {
  display:none}
.hero {
  gap:24px 25px;
  grid-template-columns:1.3fr 1fr}
.fronts {
  grid-template-columns:1fr}
.front+.front {
  border-left:0;
  border-top:1px solid var(--line)}
.front h3,.front>p:not(.front-outcome) {
  min-height:0}
.front {
  padding:30px}
.method-steps {
  gap:18px}
.method-steps h3 {
  font-size:1.125rem}
.offers {
  gap:14px}
.offers article {
  padding:22px 20px}
.offers h4 {
  font-size:1.375rem}
.contact-grid {
  gap:35px}
.button {
  font-size:1rem;
  gap:15px;
  padding:15px 20px}
}

@media(max-width:800px) {
  html {
  scroll-padding-top:25px}
.shell {
  padding-left:24px;
  padding-right:24px}
.site-header {
  min-height:84px;
  padding:18px 24px;
  flex-wrap:wrap;
  position:relative}
.identity-name {
  display:block}
.monogram {
  font-size:2.3125rem}
.has-js .menu-toggle {
  display:flex;
  align-items:center;
  gap:18px}
.has-js nav {
  display:none}
.has-js nav.is-open {
  display:flex}
nav {
  width:100%;
  align-items:stretch;
  flex-direction:column;
  gap:0;
  padding-top:15px}
nav a {
  padding:12px 0;
  font-size:1.125rem;
  border-top:1px solid var(--line)}
nav .nav-contact {
  border:0;
  border-top:1px solid var(--line);
  padding:12px 0;
  justify-content:space-between}
.hero {
  grid-template-columns:1fr;
  padding-top:28px;
  padding-bottom:16px;
  gap:35px}
.hero h1 {
  font-size:clamp(2.625rem,6.8vw,3.5625rem);
  max-width:620px}
.hero-lead {
  font-size:1.125rem;
  max-width:540px}
.hero-art {
  max-width:440px;
  justify-self:center;
  width:100%;
  padding-top:12px}
.integration-map {
  height:280px;
  margin:24px auto}
.integration-node {
  height:88px}
.integration-node strong {
  font-size:1rem}
.section {
  padding-top:65px;
  padding-bottom:65px}
.section-heading {
  grid-template-columns:1fr;
  gap:22px;
  margin-bottom:32px}
.section-heading .eyebrow {
  margin:0}
.section-heading h2 {
  font-size:2.25rem}
.section-heading>p:last-child {
  justify-self:start;
  max-width:600px;
  margin:0}
.fronts {
  grid-template-columns:1fr}
.front+.front {
  border-left:0;
  border-top:1px solid var(--line)}
.front {
  padding:30px}
.front h3 {
  font-size:2rem}
.front ul {
  min-height:0}
.front-outcome {
  max-width:100%!important}
.method-steps {
  grid-template-columns:repeat(3,1fr);
  row-gap:32px}
.method-steps h3 {
  font-size:1.375rem}
.offers-heading {
  grid-template-columns:1fr;
  gap:16px;
  margin-top:45px;
  padding-top:30px}
.offers-heading p {
  justify-self:start;
  margin:0}
.offers {
  grid-template-columns:1fr}
.offers article {
  padding:27px}
.offers h4 {
  max-width:none;
  font-size:1.625rem;
  margin:12px 0}
.offers p {
  max-width:600px;
  font-size:1.0625rem}
.trajectory {
  grid-template-columns:1fr;
  gap:32px;
  padding-bottom:24px}
.technology {
  padding-top:24px}
.trajectory-copy {
  padding-top:0}
.trajectory-role {
  font-size:1.375rem}

summary {
  grid-template-columns:28px 1fr 22px;
  gap:12px;
  font-size:1.625rem;
  padding:22px 0}
.tech-descriptor {
  grid-column:2;
  grid-row:2;
  font-size:0.875rem}
.plus {
  grid-column:3;
  grid-row:1/3}
.tech-number {
  align-self:start;
  padding-top:8px}
.tech-detail {
  padding:0 20px 24px 40px}
.contact-grid {
  grid-template-columns:1fr;
  gap:32px}
.contact-action {
  justify-self:start}
.contact-section {
  padding:58px 0}
.contact-section h2 {
  font-size:2.3125rem}
.site-footer {
  flex-direction:column;
  gap:24px}
.footer-links {
  gap:18px}
.legal h1 {
  font-size:2.375rem}
}

@media(max-width:420px) {
  .shell {
  padding-left:20px;
  padding-right:20px}
.site-header {
  padding-left:20px;
  padding-right:20px}
.identity-name {
  font-size:0.8125rem}
.hero {
  padding-top:24px}
.hero .eyebrow {
  font-size:0.75rem;
  letter-spacing:.07em}
.hero h1 {
  font-size:2.625rem;
  margin-top:22px}
.hero .button {
  width:100%;
  font-size:1rem;
  padding:16px 15px;
  gap:10px}
.hero-note {
  font-size:0.9375rem}
.front {
  padding:26px 22px}
.front h3 {
  font-size:1.875rem}
.front ul {
  font-size:1.0625rem}
.text-link {
  font-size:0.875rem}
.method-steps {
  grid-template-columns:1fr 1fr}
.method-steps h3 {
  font-size:1.25rem}

.contact-action {
  width:100%}
.button-light {
  width:100%;
  padding:16px;
  font-size:0.875rem}
.footer-links span {
  overflow-wrap:anywhere}
.section-heading h2 {
  font-size:2.0625rem}
.contact-section h2 {
  font-size:2.125rem}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
* {
  transition:none!important}
}

/* Keep the larger navigation and method readable on narrower screens. */
@media (max-width:1040px) {
  .site-header {padding:18px 24px;flex-wrap:wrap;position:relative;}
  .identity-name {display:block;}
  .has-js .menu-toggle {display:flex;align-items:center;gap:18px;}
  .has-js nav {display:none;}
  .has-js nav.is-open {display:flex;}
  nav {width:100%;align-items:stretch;flex-direction:column;gap:0;padding-top:15px;}
  nav a {padding:12px 0;font-size:1rem;border-top:1px solid var(--line);}
  nav .nav-contact {border:0;border-top:1px solid var(--line);padding:12px 0;justify-content:space-between;}
  .method-steps {grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px;}
  .method-steps h3 {font-size:1.3125rem;}
}
@media (max-width:600px) {
  .method-steps {grid-template-columns:repeat(2,minmax(0,1fr));}
  .method-steps h3 {font-size:1.25rem;}
  
  .button span,.text-link span {flex-shrink:0;}
}



/* Professional track record: compact result and a single, extensible logo strip. */
.brands-section {
  padding-top:32px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.brand-proof {
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:36px;
  align-items:center;
}
.brand-result {
  border-right:1px solid var(--line);
  padding:4px 32px 4px 0;
}
.brand-result strong {
  display:block;
  color:var(--green);
  font-size:clamp(2.25rem,3.8vw,2.875rem);
  font-weight:650;
  line-height:1.1;
  letter-spacing:-.055em;
  white-space:nowrap;
}
.brand-result > span {
  display:block;
  margin-top:10px;
  color:var(--ink);
  font-size:1.0625rem;
  line-height:1.45;
}
.brand-marquee {min-width:0;}
.brand-heading {
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand-heading h2 {
  font-size:1.25rem;
  letter-spacing:-.025em;
}
.brand-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:8px 0 8px 12px;
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:.875rem;
  cursor:pointer;
}
.brand-toggle[hidden] {display:none;}
.brand-toggle:hover {color:var(--green);}
.brand-toggle-icon {
  width:10px;
  height:12px;
  border-left:3px solid currentColor;
  border-right:3px solid currentColor;
}
[data-paused="true"] .brand-toggle-icon {
  width:0;
  height:0;
  border:6px solid transparent;
  border-left:9px solid currentColor;
  border-right:0;
}
.brand-viewport {
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
  border-radius:2px;
}
.brand-viewport:focus-visible {
  outline:2px solid var(--green);
  outline-offset:3px;
}
.brand-track {
  display:flex;
  width:max-content;
  gap:0;
}
.brand-list {
  display:flex;
  align-items:center;
  flex-shrink:0;
  width:max-content;
  list-style:none;
  gap:32px;
  margin:0;
  padding:0 32px 0 0;
  background:var(--paper);
}
.brand-list li {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 144px;
  width:144px;
  height:90px;
}
.brand-list img {
  display:block;
  flex-shrink:0;
  width:132px;
  height:auto;
  max-width:100%;
  max-height:68px;
  object-fit:contain;
  filter:grayscale(1);
}
.brand-list .logo-ampm {width:134px;filter:grayscale(1) brightness(.56);}
.brand-list .logo-pao {width:65px;}
.brand-list .logo-ambev {width:132px;filter:brightness(0);opacity:.68;}
.brand-list .logo-bradesco {filter:brightness(0);opacity:.72;}
.brand-list .logo-ge {width:64px;filter:brightness(0);opacity:.72;}
.brand-list .logo-unilever {width:61px;}
.brand-list .logo-omo {width:154px;max-width:none;max-height:none;}
/* Blend the original white logo outlines into the paper background. */
.brand-list .logo-omo,.brand-list .logo-comfort {mix-blend-mode:multiply;}
.brand-list .logo-comfort {width:140px;max-width:none;max-height:none;}
[data-ready="true"] .brand-viewport {
  overflow:hidden;
  mask-image:linear-gradient(to right,transparent,#000 18px,#000 calc(100% - 18px),transparent);
}
[data-ready="true"] .brand-track {
  animation:brand-drift var(--brand-duration) linear infinite;
  will-change:transform;
}
[data-paused="true"] .brand-track,
.brand-viewport:hover .brand-track,
.brand-viewport:focus-within .brand-track {animation-play-state:paused;}
@keyframes brand-drift {
  to {transform:translateX(calc(-1 * var(--brand-distance)));}
}
.brand-context {
  margin:18px 0 0;
  max-width:1060px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.5;
}
@media(max-width:800px) {
  .brands-section {padding-top:24px;padding-bottom:22px;}
  .brand-proof {grid-template-columns:1fr;gap:14px;}
  .brand-result {
    display:flex;
    align-items:center;
    gap:24px;
    padding:0 0 20px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .brand-result strong {font-size:2.5rem;}
  .brand-result > span {margin:0;max-width:200px;font-size:1rem;}
  .brand-heading h2 {font-size:1.1875rem;}
  .brand-list li {width:134px;flex-basis:134px;height:84px;}
  .brand-list {gap:26px;padding-right:26px;}
  .brand-context {margin-top:14px;}
}
@media(max-width:480px) {
  .brand-result {gap:18px;}
  .brand-result strong {font-size:2.125rem;}
  .brand-result > span {font-size:.9375rem;line-height:1.4;}
  .result-break {display:none;}
  .brand-context {font-size:.9375rem;}
}
@media(max-width:360px) {
  .site-header {gap:12px;}
  .identity {gap:10px;}
  .has-js .menu-toggle {gap:10px;padding:8px 10px;}
  .brand-result {gap:12px;}
  .brand-result strong {font-size:1.875rem;}
}
@media(prefers-reduced-motion:reduce) {
  [data-ready="true"] .brand-track {animation:none;transform:none;will-change:auto;}
  [data-brand-clone] {display:none;}
  [data-ready="true"] .brand-viewport {overflow-x:auto;mask-image:none;}
  .brand-toggle {display:none;}
}