@import url("fonts.css");
:root{--section-title-top:clamp(1.5rem,5vw,4.5rem);--yellow:#ffe934;--ink:#22232a;--muted:#55565d;--wrap:1200px;--gutter:clamp(1rem,5vw,4rem);font-family:Montserrat,Arial,sans-serif;color:var(--ink);line-height:1.65}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #3678cb;outline-offset:3px}
img,video,iframe,table{max-width:100%}
img,video{display:block;height:auto}
iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
h1,h2,h3,h4,.brand{font-family:Raleway,Arial,sans-serif;line-height:1.18}
p,h1,h2,h3,h4{overflow-wrap:break-word}
p{margin:.45em 0 .85em}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1.1rem var(--gutter);background:white}
.brand{font-size:clamp(1.75rem,3vw,2.6rem);font-weight:900;letter-spacing:-.065em;text-decoration:none}
.brand span{color:#a18b00}
nav{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.75rem)}
nav a{font-size:.8rem;font-weight:700;text-transform:uppercase;text-decoration:none}
.site-header #navigation a:is(:hover, :focus-visible, [aria-current]){color:var(--yellow);text-decoration:none}
.language{border-left:1px solid #ddd;padding-left:.9rem}
.menu-toggle{display:none}
.section{padding:var(--section-title-top) var(--gutter)}
.section.with-image{background-color:#262732;background-size:cover;background-position:center;min-height:clamp(16rem,40vw,38rem);display:flex;flex-direction:column;justify-content:center;position:relative;color:white;isolation:isolate}
.with-image::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#101019bd,#17172538);z-index:-1}
.section.hero{min-height:clamp(30rem,62vw,49rem)}
.hero .column{max-width:53rem}
.hero h2,.hero h3{line-height:1.12;margin:.2em 0}
.hero h2{font-size:clamp(2.3rem,6vw,5rem)}
.hero h3{font-size:clamp(1.15rem,3vw,2rem)}
.row{display:grid;grid-template-columns:var(--cols,1fr);gap:clamp(1.1rem,3vw,3rem);width:100%;max-width:var(--wrap);margin:0 auto}
.row+.row{margin-top:clamp(1.25rem,4vw,3rem)}
.column{min-width:0}
.column>*+*{margin-top:.85rem}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.65em;background:var(--yellow);border:0;border-radius:.2rem;color:#181818;font:700 1rem/1.3 Raleway,Arial,sans-serif;text-decoration:none;padding:.9rem 1.25rem;cursor:pointer}
.button:hover{background:#f1d90a}
hr{width:4rem;height:.2rem;border:0;background:var(--yellow);margin:.75rem auto .75rem 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1.5rem}
.cards article{min-width:0}
.cards a{text-decoration:none}
.cards a:hover h2{text-decoration:underline}
.cards img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#eeedf1}
.cards h2{font-size:1.2rem;margin:.65rem 0 .15rem}
time{font-size:.875rem;color:var(--muted)}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1.5rem}
.filters button,.menu-toggle{font:inherit;border:1px solid #ddd;border-radius:.25rem;padding:.45rem .8rem;background:white;color:var(--ink);cursor:pointer}
.filters [aria-pressed=true]{background:var(--yellow);border-color:#a18b00}
[hidden]{display:none!important}
.logos{display:flex;gap:1.5rem;align-items:center;justify-content:center;flex-wrap:wrap}
.logos img{width:8rem;height:4rem;object-fit:contain}
details{border:1px solid #e4dfb7;padding:.9rem 1.15rem}
summary{cursor:pointer;font-weight:700}
.article-head,.article-body{max-width:calc(780px + 2 * var(--gutter));margin:auto;padding-inline:var(--gutter)}
.article-head{padding-top:clamp(2rem,6vw,5rem);padding-bottom:1rem}
.article-head h1{font-size:clamp(2rem,5vw,3.6rem);margin:0 0 .6rem}
.article-body{padding-bottom:4rem}
.article-body .section{padding-inline:0}
.contact{max-width:48rem;margin-inline:auto;display:grid;gap:1rem}
.contact label{display:block;font-weight:600}
.contact input:not([type=checkbox]),.contact textarea{display:block;width:100%;font:inherit;padding:.65rem;border:1px solid #aaa;border-radius:.25rem}
.contact .button{justify-self:start}
footer{background:#23242a;color:white;padding:2rem var(--gutter);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));align-items:start;gap:1.5rem}
footer a{text-decoration:none;overflow-wrap:anywhere}
footer a:hover{text-decoration:underline}
footer .brand span{color:var(--yellow)}
@media(max-width:850px){
  .site-header{flex-wrap:wrap}
  .menu-toggle{display:inline-block}
  nav{display:none;width:100%;flex-wrap:wrap}
  nav.is-open{display:flex}
  nav a{padding:.45rem 0}
}
@media(max-width:680px){
  .row{grid-template-columns:minmax(0,1fr)}
  .section.hero{min-height:30rem}
  .section.with-image{background-position:center}
  .article-body table{display:block;overflow:auto}
}
.site-header .brand img{width:clamp(3.25rem,5vw,4.5rem);height:auto}
.text a{overflow-wrap:anywhere}
/* Match the original fonts and spacing without depending on Google Fonts. */
:root{font-family:Raleway,Helvetica,Arial,sans-serif;font-weight:500;--ink:#000}
.brand{font-family:Montserrat,Helvetica,Arial,sans-serif}
.site-header :is(#navigation a, .menu-toggle){font-family:Raleway,Helvetica,Arial,sans-serif;font-size:14px;font-weight:600}
.home .section{padding-inline:0}
.home .section > .row{width:80%;max-width:1080px}
.home .section.with-image{color:#000;background-color:#fff}
.home .with-image::before{content:none}
.home .hero{min-height:clamp(35rem,69.9vw,56rem);padding-block:clamp(6rem,13vw,11rem)}
.home .hero .column{max-width:none}
.home .hero .column>.text{line-height:1.02!important;margin-block:0}
.home .hero .text p{margin:0}
.home .hero .text:first-child{font-family:Montserrat,Helvetica,Arial,sans-serif;margin-bottom:1rem}
.home .hero .text:nth-of-type(2),.home .hero .text:nth-of-type(3){font-size:clamp(2rem,5.2vw,4.0625rem)!important}
.home .hero hr{margin:0 0 clamp(1.4rem,3vw,2.75rem);width:clamp(3.25rem,7vw,5.75rem)}
.home .hero h3{font-size:clamp(1.1rem,2.4vw,1.4375rem);font-weight:500;margin-top:clamp(1.25rem,4vw,3rem)}
.home .hero .button{margin-top:1.5rem}
.home .home-service{min-height:clamp(30rem,46vw,38rem);padding-block:4rem}
.home .home-service>.row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
.home .home-marketing .column{grid-column:2}
.home .home-industria .column{grid-column:1}
.home .home-service .column{padding-inline-start:clamp(0rem,4.65vw,4rem)}
.home .home-service .text{line-height:1.45!important}
.home .home-service .text:nth-child(-n+2){line-height:1.12!important;font-size:clamp(1.85rem,3.4vw,2.5rem)!important;margin-block:0}
.home .home-service .text:nth-child(-n+2) p{margin:0}
.home .home-service .text:nth-child(3){font-size:1.125rem;margin-top:1.25rem}
.home .section:not(.with-image) .row{align-items:center}
.home .section:not(.with-image) .text img,.home .section:not(.with-image) .column>img{margin-inline:auto}
.home .section:not(.with-image) .row+.row{margin-top:1.5rem}
.home .section:last-child .column:last-child{text-align:center}
.home .section:last-child .button{background:#000;color:#fff}
@media(max-width:680px){
  .home .section > .row{width:calc(100% - 2.25rem)}
  .home .hero{min-height:31rem;padding-block:4rem;background-position:44% center}
  .home .home-service>.row{grid-template-columns:minmax(0,1fr)}
  .home .home-service .column{grid-column:1;padding-inline-start:clamp(0rem,10vw,3rem);max-width:27rem}
  .home .home-marketing .column{justify-self:end}
}
@font-face {
  font-family: "Footer Brands";
  src: url("media/fonts/footer-brands.woff2") format("woff2");
  font-display: block;
}
.site-footer {
  display: block;
  padding: 0;
  color: #fff;
  background: #242424;
  font-size: .9375rem;
}
.footer-main,.footer-legal-inner {
  width: min(80%, 1080px);
  margin-inline: auto;
}
.footer-main {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: center;
  gap: clamp(1rem,4vw,3.5rem);
  padding-block: clamp(2.5rem,6vw,5.75rem);
  text-align: center;
}
.footer-contact {display: grid; gap: .35rem}
.footer-main address {font-style: normal; line-height: 2}
.footer-identity {display: grid; justify-items: center; gap: .9rem}
.footer-identity img {width: 9.25rem; height: auto}
.footer-social {display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; list-style: none; padding: 0; margin: 0}
.footer-social a {display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .2rem; background: #fff; color: #242424}
.footer-social a:hover,.footer-social a:focus-visible {background: var(--yellow); text-decoration: none}
.footer-social span {font: 1rem/1 "Footer Brands"}
.footer-legal {background: #212121}
.footer-legal-inner {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; min-height: 4.625rem; padding-block: 1rem}
.footer-legal small,.footer-legal nav a {font: inherit}
.footer-legal nav {display: flex; width: auto; flex-wrap: wrap; gap: .4rem 1.35rem}
.footer-legal nav a {text-transform: none; padding: 0}
@media(max-width:850px) {
  .footer-main,.footer-legal-inner {width: min(calc(100% - 2.25rem),1080px)}
}
@media(max-width:640px) {
  .footer-main {grid-template-columns: minmax(0,1fr); gap: 1.5rem}
  .footer-identity {order: -1}
  .footer-social a {width: 2.75rem; height: 2.75rem}
  .footer-legal-inner,.footer-legal nav {justify-content: center; text-align: center}
}
/* Center the primary menu independently of the circular brand mark. */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 76px;
  padding: 0 16px;
  gap: 0;
}
.site-header .brand {grid-column: 1; grid-row: 1; justify-self: start}
.site-header .brand img {width: 50px; height: 50px}
.site-header #navigation {grid-column: 2; grid-row: 1; justify-content: center; gap: clamp(.8rem,1.6vw,1.5rem)}
.home .site-header {position: absolute; inset: 0 0 auto; z-index: 10; background: transparent}
@media (max-width: 980px) {
  .site-header {
    min-height: 81px;
    padding: 10px 16px;
    grid-template-columns: 1fr auto 1fr;
    align-content: start;
  }
  .site-header .brand {grid-column: 2; justify-self: center}
  .site-header .menu-toggle {display: block; grid-column: 3; grid-row: 1; justify-self: end}
  .site-header #navigation {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    width: min(100%, 30rem);
    justify-self: center;
    padding: .75rem 1rem;
    margin-top: .65rem;
    background: #fff;
    flex-wrap: wrap;
    box-shadow: 0 4px 18px rgb(0 0 0 / 12%);
  }
  .site-header #navigation.is-open {display: flex}
  .home .hero {padding-top: max(6rem, 90px)}
}
.cards .project-card {text-align: center}
.cards .project-card h2 {margin: .75rem 0 .25rem}
.project-category {margin: 0; color: #666; font-size: .875rem; line-height: 1.4}
.featured-project .column {text-align: center}
.featured-project .blurb img {margin-inline: auto}
.featured-project.with-image::before {content: none}


/* Shared case study layout. */
.project-detail {
  --project-width: 1080px;
  --project-gutter: clamp(1rem, 5vw, 3rem);
}
.project-heading,.project-content {
  width: min(calc(100% - 2 * var(--project-gutter)), var(--project-width));
  margin-inline: auto;
}
.project-cover img {width: 100%; height: auto}
.project-heading {text-align: center; padding-block: clamp(2rem, 5vw, 4rem)}
.project-heading h1 {font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin: 0}
.project-heading h1::after {content: ""; display: block; width: 3.5rem; height: 3px; margin: 1rem auto; background: var(--yellow)}
.project-heading p {color: #555; font-size: clamp(1rem, 2vw, 1.2rem); margin: 0}
.project-content {padding-bottom: clamp(2rem, 6vw, 5rem)}
.project-content .section {padding: 0; margin: 0}
.project-content .section + .section,.project-content .row + .row {margin-top: clamp(1.5rem, 4vw, 3rem)}
.project-content .row {max-width: none; align-items: start}
.project-content .row > .column {overflow-wrap: anywhere}
.project-content .section > img,.project-content .column > img,.project-content .column > a > img {
  margin-inline: auto;
}
.project-content :is(img,video,iframe) {max-width: 100%}
.project-content iframe {height: auto; aspect-ratio: 16 / 9}
.project-content h3 {margin: 0 0 .65em; font-size: clamp(1.3rem, 2.6vw, 1.85rem)}
.project-content .text > :last-child {margin-bottom: 0}
@media (max-width: 760px) {
  .project-content .row {grid-template-columns: minmax(0, 1fr)}
  .project-content table {display: block; overflow-x: auto}
}

.project-content .project-intro {
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}
.project-meta {text-align: left}
@media (max-width: 760px) {
  .project-content .project-intro {grid-template-columns: minmax(0, 1fr)}
}

.team-member {text-align: center}
.team-member > img {
  width: min(100%, clamp(8rem, 14vw, 11rem));
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  margin-inline: auto;
}
.team-linkedin {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-top: .25rem;
  border-radius: .25rem;
  color: #242424;
  background: var(--yellow);
  text-decoration: none;
}
.team-linkedin:hover {background: #242424; color: var(--yellow)}
.team-linkedin span {font: .875rem/1 "Footer Brands"}

.training-logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: clamp(.35rem, 2vw, 1.5rem);
  max-width: 1080px;
  margin-inline: auto;
}
.training-logos img {
  width: 100%;
  height: clamp(2.5rem, 8vw, 5rem);
  object-fit: contain;
}

.training-intro {
  max-width: 900px;
  margin-inline: auto;
  padding-bottom: 0;
  text-align: center;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 1080px;
  margin-inline: auto;
}
.blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid #d8d8d8;
  background: #fff;
  box-shadow: 0 2px 24px rgb(53 55 64 / 10%);
}
.blog-card-image img {width: 100%; aspect-ratio: 8 / 5; object-fit: cover}
.blog-card-body {display: flex; flex: 1; flex-direction: column; padding: clamp(1rem, 2vw, 1.25rem)}
.blog-card h2 {margin: 0 0 .5rem; color: #353740; font-size: clamp(1.15rem, 2.4vw, 1.4375rem); line-height: 1.2}
.blog-card h2 a {text-decoration: none}
.blog-card h2 a:hover {text-decoration: underline}
.blog-meta,.blog-meta time {color: #606873; font-size: .8rem}
.blog-meta {margin: 0 0 .65rem}
.blog-summary {margin: 0 0 .75rem; color: #606873; font-size: .875rem}
.blog-more {align-self: start; margin-top: auto; font-size: .875rem}
@media (max-width: 980px) {
  .blog-grid {grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 580px) {
  .blog-grid {grid-template-columns: minmax(0, 1fr)}
}

.blog-intro {
  width: min(calc(100% - 2 * var(--gutter)), 50rem);
  margin-inline: auto;
  padding-top: var(--section-title-top);
  text-align: center;
}
.blog-intro p {margin: 0; color: #555}
.article-cover {width: 100%; margin: 0 0 clamp(1.5rem, 4vw, 3rem)}

.contact-page {
  width: min(calc(100% - 2 * var(--gutter)), 66rem);
  margin-inline: auto;
  padding-block: var(--section-title-top) clamp(2rem, 6vw, 5rem);
}
.contact-heading {text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem)}
.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.contact-methods h2 {margin: 0 0 .65rem; font-size: 1.375rem}
.contact-methods address {font-style: normal}
.contact-methods p {margin: 0; overflow-wrap: anywhere}
.contact-message {
  max-width: 48rem;
  margin: clamp(2rem, 6vw, 4rem) auto 0;
}
.contact-message h2 {text-align: center; margin: 0 0 1.25rem}
.contact-privacy {margin: 1.25rem 0 0; color: var(--muted); font-size: .875rem; text-align: left}
@media (max-width: 620px) {
  .contact-methods {grid-template-columns: minmax(0, 1fr)}
}

.contact-map-section .contact-map {
  display: block;
  width: 100%;
  height: clamp(18rem, 42vw, 26rem);
  border: 0;
}

.cookie-panel {
  position: fixed;
  z-index: 100;
  left: clamp(.75rem, 3vw, 1.5rem);
  bottom: clamp(.75rem, 3vw, 1.5rem);
  width: min(26rem, calc(100% - 2 * clamp(.75rem, 3vw, 1.5rem)));
  max-height: 85vh;
  overflow: auto;
  padding: 1.25rem;
  background: #fff;
  color: #242424;
  box-shadow: 0 5px 28px rgb(0 0 0 / 25%);
  font-size: .9rem;
}
.cookie-panel h2 {margin: 0 0 .5rem; font-size: 1.15rem}
.cookie-actions {display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .75rem}
.cookie-panel button,.cookie-embed button {
  font: inherit;
  background: #eee;
  color: #242424;
  border: 0;
  padding: .5rem .7rem;
  cursor: pointer;
}
.cookie-panel button[data-cookie="accept"] {background: #242424; color: #fff}
#cookie-options {margin-bottom: .75rem}
#cookie-options label {display: block; margin-bottom: .4rem}
.cookie-embed {padding: 1rem; text-align: center; background: #f4f4f4}
.cookie-manage {border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-decoration: underline}

.contact .contact-field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.contact .contact-field :is(input, textarea) {
  border: 0;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  background: transparent;
  color: #353740;
  font: 400 1rem/1.5 Montserrat, Arial, sans-serif;
  padding: 1rem;
}
.contact .contact-field :is(input, textarea)::placeholder {color: #353740; opacity: 1}
.contact .contact-field :is(input, textarea):focus {border-bottom-color: #353740}
.contact .contact-field textarea {min-height: 9.75rem; resize: vertical}

:is(.project-card-image, .blog-card-image) {display: block; overflow: hidden}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.project-card-image, .blog-card-image) img {transition: transform .3s ease}
  .project-card:hover .project-card-image img, .blog-card-image:hover img, .blog-card:has(h2 a:hover) .blog-card-image img {transform: scale(1.045)}
}


.section-title {
  margin: .45em 0 .85em;
  text-align: center;
  font: 300 clamp(19px, 3.17vw, 38px)/1.65 Raleway, Helvetica, Arial, sans-serif;
}
.section-title strong {color: var(--yellow); font-weight: 700}