.site-header{
position:sticky;
top:0;
z-index:var(--z-header);
display:flex;
align-items:center;
justify-content:space-between;
height:84px;
padding:0 4.5vw;
border-bottom:1px solid var(--color-line);
background:var(--color-header-bg);
color:var(--color-primary);
transition:box-shadow var(--transition),height var(--transition)
}
.site-header.is-scrolled{
box-shadow:var(--shadow-float)
}
.nav{
display:flex;
gap:37.5px;
font-size:17px;
font-weight:700
}
.nav a{
padding-bottom:6px;
border-bottom:2px solid transparent;
opacity:.8
}
.nav a:hover,.nav .active{
opacity:1
}
.nav .active{
border-bottom-color:var(--color-teal-dark)
}
.nav-disclosure{
position:relative
}
.nav-disclosure::after{
position:absolute;
top:100%;
left:calc(var(--space-2) * -1);
width:13rem;
height:var(--space-2);
content:""
}
.nav-disclosure-trigger{
display:inline-flex;
align-items:center;
gap:var(--space-1);
padding:0;
border:0;
background:transparent;
color:inherit;
font:inherit;
cursor:pointer;
opacity:.72
}
.nav-disclosure-trigger:hover,.nav-disclosure-trigger:focus-visible,.nav-disclosure-trigger.active{
opacity:1
}
.nav-disclosure-icon{
width:.45rem;
height:.45rem;
border-right:1px solid currentColor;
border-bottom:1px solid currentColor;
transform:translateY(-2px) rotate(45deg);
transition:transform var(--transition)
}
.nav-disclosure.is-open .nav-disclosure-icon{
transform:translateY(1px) rotate(225deg)
}
.nav-submenu{
position:absolute;
top:calc(100% + var(--space-2));
left:calc(var(--space-2) * -1);
z-index:1;
display:grid;
min-width:13rem;
padding:var(--space-2);
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
background:var(--color-paper);
box-shadow:var(--shadow-float);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-.25rem);
transition:opacity var(--transition) .18s,transform var(--transition) .18s,visibility 0s linear .18s
}
.nav-submenu a{
padding:var(--space-1) var(--space-2);
white-space:nowrap
}
.nav-submenu a:hover,.nav-submenu a:focus-visible,.nav-submenu a.active{
background:var(--color-mist);
opacity:1
}
/* This hover rule is moved here (ahead of .is-open/.is-dismissed below) deliberately: it
   ties in specificity with both of them (three classes/pseudo-classes each), so whichever
   comes LAST in source order wins when more than one applies simultaneously — e.g. the
   mouse still resting on the trigger (:hover true) at the exact moment JS closes the menu
   via scroll or Escape (.is-dismissed added). Keeping this block earlier guarantees the
   JS-driven state below always wins that tie, instead of :hover silently overriding a menu
   JS just closed. See js/main.js's scroll listener and dismissDisclosure(). */
@media (hover:hover) and (pointer:fine){
.nav-disclosure:hover .nav-submenu{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
transition-delay:0s
}
.nav-disclosure:hover .nav-disclosure-icon{transform:translateY(1px) rotate(225deg)}
}
.nav-disclosure.is-open .nav-submenu{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
transition-delay:0s
}
.nav-disclosure.is-dismissed .nav-submenu{
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-.25rem);
transition-delay:0s
}
.header-contact{
padding:10px 14px;
border-bottom:0;
font-size:13px
}
/* Keep the header contact action distinct from its background with readable text. */
.site-header .button-primary{
background:var(--color-primary-dark);
color:#fff
}
.menu-toggle{
display:none
}
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){
.nav-disclosure{width:100%}
.nav-disclosure-trigger{justify-content:space-between;width:100%}
.nav-submenu{
position:static;
display:none;
min-width:0;
margin-top:var(--space-1);
padding:0 0 0 var(--space-2);
border:0;
box-shadow:none;
opacity:1;
visibility:visible;
pointer-events:auto;
transform:none
}
.nav-disclosure.is-open .nav-submenu{display:grid}
.nav-submenu a{padding:var(--space-1) 0}
}
@media (prefers-reduced-motion:reduce){
.nav-disclosure-icon,.nav-submenu{transition:none}
}
.hero{
display:grid;
grid-template-columns:1fr 1.05fr;
min-height:calc(100vh - 84px);
max-height:900px;
background:var(--color-primary);
color:#fff;
position:relative;
overflow:hidden
}
.hero-copy{
align-self:center;
z-index:1;
max-width:730px;
padding:80px 4.5vw
}
.hero .eyebrow{
color:#9ed5d3
}
.intro{
max-width:440px;
margin-top:30px;
color:#c8d9d7;
font-size:16px
}
.actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:27px;
margin-top:38px
}
.hero .text-link{
border-color:#fff
}
.hero-visual{
position:relative;
overflow:hidden;
clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)
}
.hero-visual picture{
display:block;
width:100%;
height:100%
}
.hero-image,.solution-image img,.news-image{
width:100%;
height:100%;
object-fit:cover
}
.hero-image{
filter:saturate(.7);
object-position:60% center
}
.image-tag{
position:absolute;
bottom:75px;
left:20%;
padding:10px 15px;
background:rgba(255,255,255,.92);
color:var(--color-primary);
font:500 9px var(--font-mono);
letter-spacing:.4px
}
.pulse{
display:inline-block;
width:8px;
height:8px;
margin-right:7px;
border-radius:50%;
background:var(--color-teal-dark)
}
.hero-footer{
position:absolute;
right:4.5vw;
bottom:30px;
left:4.5vw;
display:flex;
justify-content:space-between;
font:10px var(--font-mono);
letter-spacing:1px;
text-transform:uppercase
}
.statement{
max-width:1120px;
margin:0 auto;
padding:150px 12vw 135px
}
.statement>p:last-child{
max-width:550px;
margin:25px 0 0 32%;
color:var(--color-muted)
}
.solutions{
display:grid;
grid-template-columns:1fr 1fr;
background:var(--color-teal-tint);
color:var(--color-primary)
}
.solution-image{
position:relative;
min-height:600px;
overflow:hidden
}
.solution-image picture{
display:block;
width:100%;
height:100%
}
.solution-image img{
filter:saturate(.55)
}
.solution-copy{
align-self:center;
padding:110px 9vw
}
.solution-copy>p:not(.eyebrow){
max-width:440px;
margin-top:20px;
color:var(--color-muted)
}
.services{
margin:37px 0 28px;
border-top:1px solid var(--color-line)
}
.services span{
display:block;
padding:14px 0;
border-bottom:1px solid var(--color-line);
color:var(--color-teal-dark);
font:10px var(--font-mono)
}
.services b{
margin-left:20px;
color:var(--color-primary);
font:600 13px var(--font-sans)
}
.inverse{
border-color:#fff
}
.site-footer{
padding:45px 4.5vw 25px;
background:var(--color-primary);
color:#fff
}
.footer-top,.footer-bottom{
display:flex;
justify-content:space-between;
gap:40px
}
.footer-columns{
display:grid;
grid-template-columns:repeat(2,minmax(150px,1fr));
gap:clamp(48px,7vw,100px)
}
/* Footer now uses two deliberate columns: Quick links and Stay connected. */
.footer-columns section{
display:grid;
align-content:start;
gap:8px
}
.footer-columns h2{
margin-bottom:5px;
font-size:14px;
letter-spacing:0
}
.footer-columns a{
display:inline-flex;
align-items:center;
gap:7px;
color:#9eb5b2;
font-size:13px
}
/* Social icons: Instagram/Facebook (Simple Icons, CC0) are inline SVG using
   currentColor, so they always match the surrounding link's color exactly,
   including on hover. LinkedIn (see docs/ICON-CREDITS.md) is a fixed-color
   raster PNG — no SVG source was available — so it can only approximate
   that same light color rather than inherit it exactly; the white variant
   was chosen as the closest match against this dark footer. Every icon is
   aria-hidden since the link's own visible text already provides the
   accessible name. Applying inline-flex to every .footer-columns a (not
   just the ones with an icon) is intentional and harmless — a flex
   container with only a text-node child lays out identically to plain
   inline flow, so links without an icon (Email us) are visually unaffected. */
.social-icon{
display:inline-flex;
flex-shrink:0
}
.social-icon img{
display:block
}
.footer-bottom{
color:#9eb5b2;
font-size:11px;
margin-top:55px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.2)
}
.footer-bottom div{
display:flex;
gap:18px
}
.credentials{
background:var(--color-teal-tint)
}
.credentials-row{
display:grid;
grid-template-columns:1fr 1fr;
border-top:1px solid var(--color-line)
}
.credential-item{
padding:25px 30px 10px 0;
border-right:1px solid var(--color-line)
}
.credential-item+.credential-item{
padding-left:30px
}
.credential-item:last-child{
border-right:0
}
.credential-k{
display:block;
margin-bottom:10px;
color:var(--color-teal-dark);
font:600 11px var(--font-mono);
letter-spacing:.8px;
text-transform:uppercase
}
.credential-v{
display:block;
max-width:420px;
color:var(--color-text);
font-size:15px;
line-height:1.5
}
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){
.credentials-row{
grid-template-columns:1fr;
border-top:0
}
.credential-item{
padding:20px 0;
border-right:0;
border-top:1px solid var(--color-line)
}
.credential-item+.credential-item{
padding-left:0
}
.credential-item:first-child{
border-top:0
}
}




.header-actions{display:flex;align-items:center;gap:12px}
.language-switcher{display:inline-flex;align-items:center;padding:2px;border:1px solid var(--color-line);border-radius:9px;background:rgba(255,255,255,.45)}
.language-switcher[hidden]{display:none}
.language-switch{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:32px;padding:0 8px;border:0;border-radius:7px;background:transparent;color:var(--color-primary);font:700 12px/1 var(--font-sans);letter-spacing:.04em;text-decoration:none;opacity:1;transition:background var(--transition),color var(--transition),opacity var(--transition)}
.language-switch:hover,.language-switch:focus-visible{background:var(--color-paper);color:var(--color-primary-dark);opacity:1}
.language-switch.is-active{background:var(--color-primary-dark);color:#fff;opacity:1;pointer-events:none}
.header-signin{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 10px;border:1px solid var(--color-line);border-radius:9px;background:rgba(255,255,255,.45);color:var(--color-primary);font:700 13px/1 var(--font-sans);text-decoration:none;white-space:nowrap;transition:border-color var(--transition),background var(--transition),color var(--transition)}
.header-signin:hover,.header-signin:focus-visible{border-color:var(--color-teal);background:var(--color-paper);color:var(--color-primary-dark)}
.header-signin:focus-visible{outline:2px solid var(--color-teal-dark);outline-offset:2px}
.header-signin[hidden]{display:none}
.header-signin svg{flex-shrink:0}
@media(max-width:480px){.header-signin{width:36px;height:36px;padding:7px}.header-signin-label{display:none}}
.header-account{position:relative}
.header-account-trigger{display:inline-flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--color-line);border-radius:9px;background:rgba(255,255,255,.45);color:var(--color-primary);font:700 13px/1 var(--font-sans);cursor:pointer}
.header-account-trigger [data-header-account-name]{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-account-chevron{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--transition)}
.header-account-trigger[aria-expanded="true"] .header-account-chevron{transform:translateY(1px) rotate(225deg)}
.header-account-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:3;min-width:230px;padding:14px;border:1px solid var(--color-line);border-radius:12px;background:var(--color-paper);box-shadow:var(--shadow-float)}
.header-account-menu[hidden]{display:none}
.header-account-label{margin:0 0 3px;color:var(--color-muted);font-size:11px}
.header-account-menu strong{display:block;max-width:260px;margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;font-size:12px;white-space:nowrap}
.header-account-menu a,.header-account-menu button{display:block;width:100%;padding:9px 0;border:0;border-top:1px solid var(--color-line);background:transparent;color:var(--color-primary);font:600 13px/1.3 var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}

.header-welcome{position:fixed;top:96px;right:24px;z-index:4;padding:10px 14px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-paper);box-shadow:var(--shadow-float);color:var(--color-primary);font-size:13px;font-weight:600}
.header-welcome[hidden]{display:none}
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){
.header-actions{min-width:0;gap:8px}
.language-switch{min-width:32px;height:30px;padding:0 7px}
.header-account{min-width:0}
.header-account-trigger{max-width:min(42vw,180px);min-height:40px;padding:9px 10px}
.header-account-trigger [data-header-account-name]{max-width:none;min-width:0}
.header-account-menu{right:0;min-width:min(230px,calc(100vw - 24px));max-width:calc(100vw - 24px)}
.header-account-menu strong{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.header-welcome{top:80px;right:12px;left:12px;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}


/* Compatibility for pages that still contain the previous four-column footer markup.
   Visually collapse Company / Products & solutions / Support into one Quick links column
   until those static pages are regenerated from the shared footer partial. */
.footer-columns:has(section:nth-child(4)){
grid-template-columns:minmax(150px,1fr) minmax(150px,1fr);
column-gap:clamp(48px,7vw,100px);
row-gap:8px
}
.footer-columns:has(section:nth-child(4)) section:nth-child(-n+3){
grid-column:1
}
.footer-columns:has(section:nth-child(4)) section:nth-child(-n+3) h2{
display:none
}
.footer-columns:has(section:nth-child(4)) section:first-child::before{
content:"Quick links";
margin-bottom:5px;
font-size:14px;
font-weight:700;
color:#fff
}
.footer-columns:has(section:nth-child(4)) section:nth-child(4){
grid-column:2;
grid-row:1 / span 3
}
.footer-columns a[href="/#esg"],
.footer-columns a[href="/#solutions"]{
display:none
}

/* Shared mobile header rules for pages that do not load pages.css/product-pages.css. */
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){
.site-header{
height:68px
}
.site-header .nav,
.site-header .header-contact{
display:none
}
.site-header .menu-toggle{
display:block;
z-index:2;
width:35px;
padding:7px;
border:0;
background:transparent;
color:var(--color-primary)
}
.site-header .menu-toggle span{
display:block;
width:100%;
height:1px;
margin:6px 0;
background:currentColor
}
.site-header .nav.open{
display:flex;
position:absolute;
top:0;
right:0;
left:0;
flex-direction:column;
gap:16px;
padding:90px 6vw 30px;
background:var(--color-paper);
font-size:15px
}
}

@media(max-width:480px){
.site-header{
padding-left:4vw;
padding-right:4vw
}
.site-header .brand img{
width:min(46vw,180px)
}
.site-header .header-actions{
flex:0 1 auto;
min-width:0
}
}

/* Shared mobile footer rules for pages that only load layout.css. */
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){
.site-footer .footer-top,
.site-footer .footer-bottom{
flex-direction:column
}
.site-footer .footer-columns{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:28px
}
.site-footer .footer-bottom{
gap:15px;
margin-top:35px
}
.site-footer .footer-bottom div{
flex-wrap:wrap
}
}

@media(max-width:480px){
.site-footer .footer-columns{
grid-template-columns:1fr
}
}


/* Mobile header order: logo | language/account | menu at the far right. */
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){
  .site-header .brand{order:0;flex-shrink:1;min-width:0}
  .site-header .header-actions{order:1;margin-left:auto;flex-shrink:0;gap:6px}
  .site-header .menu-toggle{order:2;flex:0 0 40px;width:40px;min-height:44px;margin-left:4px;padding:10px}
  .site-header .nav{order:3}
  .site-header .nav.open .mobile-nav-contact{
    display:block;
    align-self:stretch;
    margin-top:8px;
    padding:13px 16px;
    border:0;
    border-radius:9px;
    background:var(--color-primary-dark);
    color:#fff;
    text-align:center;
    font-size:14px;
    font-weight:700;
    opacity:1;
  }
  .site-header .nav.open .mobile-nav-contact:focus-visible{outline:2px solid var(--color-teal-dark);outline-offset:3px}
}
.mobile-nav-contact{display:none}

/* Persistent back-to-top shortcut, shared by all published EN/PT pages.
   A normal anchor works with JS disabled and remains visible at scrollY=0. */
.back-to-top{
  position:fixed;
  right:max(18px,calc(12px + env(safe-area-inset-right)));
  bottom:max(18px,calc(12px + env(safe-area-inset-bottom)));
  z-index:100;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:46px;
  height:46px;
  min-height:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:var(--color-primary-dark,#0f2f2f);
  color:#fff;
  box-shadow:0 5px 20px rgba(8,39,39,.22);
  font:700 13px/1.2 var(--font-sans,sans-serif);
  text-decoration:none;
  white-space:nowrap;
  transition:background .2s ease,transform .2s ease;
}
.back-to-top:hover{background:var(--color-teal-dark,#176f68);color:#fff;transform:translateY(-2px)}
.back-to-top:focus-visible{outline:3px solid var(--color-teal,#3bb6a4);outline-offset:3px}
.back-to-top svg{flex:none}
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){
  .back-to-top{
    right:max(14px,env(safe-area-inset-right));
    bottom:max(16px,env(safe-area-inset-bottom));
    width:46px;
    height:46px;
    min-height:46px;
    padding:0;
  }
  .back-to-top span{display:none}
}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}}