/* ============================================================================
   EZ3 — pixel-perfect.css  (V3 redesign · 2026-05-18)
   Shared component classes used across index, work, about, contact pages.
   Source: Figma 7yuZViPxsDEnLsHcSNJQQJ — Home node 2403:3023, Components 2410:2825
   Naming: .ez-*  · All values extracted via get_design_context (no approximations)
   ============================================================================ */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-section-light, #f5f5f5);
  font-family: 'Albert Sans', sans-serif;
  color: #1e1e1e;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Page-transition effect — Framer-style curtain wipe ----------
   Bottom-to-top wipe on departure (curtain rises from below to cover),
   bottom-to-top wipe on arrival (curtain slides up out of view, revealing
   the new page). Uses keyframe animations so the start state is always
   explicit and immune to specificity cascades from previous states.       */

.ez-pt-curtain {
  position: fixed;
  left: 0; right: 0; top: 0;
  width: 100%; height: 100vh;
  background: #212121;
  z-index: 9998;
  pointer-events: none;
  transform: translate3d(0, 100%, 0);   /* default: hidden below viewport */
  will-change: transform;
}
/* Word-mark removed per request — keep the class for backward compat but hidden */
.ez-pt-curtain__mark { display: none; }

/* ---- Keyframes ---- */
@keyframes ezCurtainEnter {           /* slide UP from below to cover */
  0%   { transform: translate3d(0, 100%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes ezCurtainExit {            /* slide UP & out of view */
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -100%, 0); }
}
@keyframes ezCurtainMarkInOut {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- Arrival: curtain starts covering, then slides up ---- */
html.ez3-incoming .ez-pt-curtain {
  transform: translate3d(0, 0, 0);    /* hold covering on first paint */
}
html.ez3-incoming .ez-pt-curtain__mark { opacity: 1; }

html.ez3-incoming.ez3-ready .ez-pt-curtain {
  animation: ezCurtainExit .75s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
html.ez3-incoming.ez3-ready .ez-pt-curtain__mark {
  animation: ezCurtainMarkInOut .5s ease forwards;
}

/* ---- Departure: curtain rises from below to cover ----
   !important keeps this animation winning even if html still carries
   `ez3-incoming` / `ez3-ready` classes (higher-specificity selectors). */
html.ez3-leaving .ez-pt-curtain {
  animation: ezCurtainEnter .65s cubic-bezier(0.76, 0, 0.24, 1) forwards !important;
  transform: translate3d(0, 100%, 0);
}
html.ez3-leaving .ez-pt-curtain__mark {
  animation: ezCurtainMarkInOut .65s ease forwards !important;
}
html.ez3-leaving body { pointer-events: none; }

/* Block scroll while curtain is on screen */
html.ez3-leaving,
html.ez3-incoming:not(.ez3-ready) { overflow: hidden; }

/* ============================================================================
   SCROLL REVEAL — micro-interactions across the site
   Elements with [data-reveal] start invisible (opacity 0 + translateY) and
   animate into view when they enter the viewport. JS in page-transitions.js
   adds `.is-in-view` via IntersectionObserver.

   Variants:
     [data-reveal]              → fade + rise from below (default)
     [data-reveal="left"]       → slide in from left
     [data-reveal="right"]      → slide in from right
     [data-reveal="zoom"]       → fade + slight scale
     [data-reveal="fade"]       → fade only (no transform)

   Staggering: parent has [data-reveal-stagger], children inherit a delay
   based on their index (≤ 8 children for cheap math).
   ============================================================================ */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity .8s cubic-bezier(0.23, 1, 0.32, 1),
    transform .8s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translate3d(-32px, 0, 0); }
[data-reveal="right"] { transform: translate3d(32px, 0, 0); }
[data-reveal="zoom"]  { transform: scale(0.96); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Staggered children — applied via JS that sets --i on each child */
[data-reveal-stagger] > * {
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* Honor users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-in-view {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================================
   GLOBAL MICRO-INTERACTIONS
   ============================================================================ */

/* Cards lift on hover */
.ez-case-img,
.ez-quote,
.ez-service,
.ez-case-bignum,
.ez-case-overview,
.ez-case-stack-item {
  transition: transform .35s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow .35s cubic-bezier(0.23, 1, 0.32, 1);
}
.ez-case-img:hover,
.ez-quote:hover,
.ez-service:hover,
.ez-case-bignum:hover,
.ez-case-overview:hover,
.ez-case-stack-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}

/* Top header nav links — subtle underline-from-left on hover */
.ez-th-nav a {
  position: relative;
  padding-bottom: 2px;
}
.ez-th-nav a::after {
  content: ""; position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(0.23, 1, 0.32, 1);
}
.ez-th-nav a:hover::after,
.ez-th-nav a.is-active::after { transform: scaleX(1); }

/* CTA pill — gentle press */
.ez-btn-pill-dark,
.ez-footer__help-cta,
.ez-contact-form__submit {
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.ez-btn-pill-dark:active,
.ez-footer__help-cta:active,
.ez-contact-form__submit:active { transform: translateY(0) scale(0.98); }

/* FAQ row — subtle hover glow */
.ez-faq-item { transition: background .25s ease, box-shadow .25s ease; }
.ez-faq-item:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); }

/* ---------- Page shell ---------- */
.ez-page { width: 100%; min-height: 100vh; background: #f5f5f5; }

/* ---------- Hero wrapper (Top Header + Hero + Logo strip) — fits viewport ---------- */
.ez-hero-wrap {
  background: #f5f5f5;
  display: flex; flex-direction: column;
  gap: 5px; padding: 5px;
  width: 100%;                  /* full viewport — no max-width */
  height: 100vh;                /* full viewport height */
  min-height: 720px;
  overflow: hidden;
  border-top: 7px solid #D4A76A;
  box-sizing: border-box;
}

/* ---------- Top Header ---------- */
.ez-top-header {
  background: #ffffff;
  border-radius: 6px;
  padding: 12px 112px;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; flex-shrink: 0;
}
.ez-th-brand { display: flex; align-items: center; gap: 12px; }
.ez-th-logo { width: 110px; height: 21px; display: block; }
.ez-th-logo img { width: 100%; height: 100%; object-fit: contain; }
.ez-th-divider { width: 1px; height: 23px; background: rgba(0,0,0,.18); }
/* Clock block — Figma 2157:2229: each line is a 10px-tall container with
   gap 2px between city and time. line-height kept at 10px so the two lines
   sit nearly stacked (not the 20.8px line-height Figma stored, which would
   put them way too far apart). */
.ez-th-loc {
  display: flex; flex-direction: column;
  gap: 4px;
  width: 89px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 10px;
}
.ez-th-loc .city,
.ez-th-loc .time {
  display: block;
  height: 10px;
  line-height: 10px;
  margin: 0;
}
.ez-th-loc .city { color: #1e1e1e; }
.ez-th-loc .time { color: #777; }
.ez-th-nav {
  display: flex; gap: 48px; align-items: center;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500; font-size: 14px; line-height: 18px;
  letter-spacing: -0.5px; color: #1e1e1e;
}
.ez-th-nav a { white-space: nowrap; transition: color .2s ease; }
.ez-th-nav a:hover, .ez-th-nav a.is-active { color: #b88953; }
.ez-th-cta { display: flex; align-items: center; gap: 20px; }
.ez-btn-pill-dark {
  background: #1d2029; color: #ffffff; border: none; border-radius: 200px;
  padding: 4px 24px;
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: 12px; line-height: 26px;
  box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.25);
  transition: transform .2s ease;
  white-space: nowrap;
}
.ez-btn-pill-dark:hover { transform: translateY(-1px); }

/* ---------- Hero — video bg + title + vertical carousel ---------- */
.ez-hero {
  position: relative;
  background: #ffffff;
  border-radius: 6px;
  flex: 1 1 auto;            /* fills remaining viewport between header & logos */
  min-height: 0;
  display: flex; align-items: center;
  gap: 10px;
  padding: 0 112px;
  overflow: hidden;
}
.ez-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.20;
  border-radius: 6px;
  pointer-events: none;
  z-index: 0;
}
.ez-hero > .ez-hero-title-col,
.ez-hero > .ez-hero-carousel { position: relative; z-index: 1; }
.ez-hero-title-col {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
.ez-hero-title-inner {
  display: flex; flex-direction: column; gap: 12px;
  flex: 1 1 0; min-width: 0;
}
.ez-hero-h1 {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700;
  font-size: 64px; line-height: 64px;
  letter-spacing: -4px;
  color: #1e1e1e; margin: 0;
}
.ez-hero-h1 .dot { color: #b88953; }
.ez-hero-sub {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500;
  font-size: 16px; line-height: 22px;
  letter-spacing: -0.5px;
  color: #777;
  width: 501px; max-width: 100%; margin: 0;
}

/* Vertical infinite carousel (right column) */
.ez-hero-carousel {
  width: 453px;
  flex-shrink: 0;
  height: 360px;
  overflow: hidden;
  position: relative;
}
.ez-hcar-track {
  display: flex; flex-direction: column; gap: 18px;
  will-change: transform;
}
.ez-hcar-item {
  width: 100%;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px;
  transition: opacity .35s ease;
  opacity: 0.6;
}
.ez-hcar-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ez-hcar-icon svg { width: 24px; height: 24px; opacity: 0; transition: opacity .35s ease; }
.ez-hcar-text {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700;
  font-size: 16px; line-height: 22px;        /* ↑ avoid clipping descenders/ascenders */
  letter-spacing: -0.5px;
  color: #d1d1d1;
  width: 417px;
  margin: 0;
  white-space: normal;                       /* allow wrap so words never get cut */
  word-break: normal;
  overflow-wrap: break-word;
  transition: color .35s ease, font-size .35s ease, line-height .35s ease;
}
.ez-hcar-item.is-active { opacity: 1; }
.ez-hcar-item.is-active .ez-hcar-icon svg { opacity: 1; }
.ez-hcar-item.is-active .ez-hcar-text {
  color: #1e1e1e;
  font-size: 20px;
  line-height: 26px;                         /* ↑ extra room for the larger active size */
}

/* ---------- Logos strip — INFINITE AUTO-PLAY TICKER ---------- */
.ez-logos-strip {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  height: 120px;
  border-radius: 6px;
  /* fade edges for polish */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.ez-logos-track {
  display: flex;
  gap: 5px;
  width: max-content;            /* lets the track grow with content */
  animation: ezLogosTicker 40s linear infinite;
}
.ez-logos-strip:hover .ez-logos-track {
  animation-play-state: running;  /* never stops, even on hover */
}
.ez-logo-card {
  background: #ffffff;
  border-radius: 6px;
  height: 120px;
  width: 245px;                  /* fixed per Figma — required for seamless ticker math */
  flex-shrink: 0;
  display: block;
  overflow: hidden;
}
/* Logo PNGs are rendered at the full card size (245×120) with the logo
   already positioned/scaled — fill the card directly */
.ez-logo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Translate the track by exactly half its width (i.e., one full set of duplicated logos)
   so the loop is seamless. Each logo card = 245px + 5px gap = 250px per slot.
   6 logos × 250 = 1500px per set. We duplicate the set so total = 3000px,
   and animate from 0 → -1500px. */
@keyframes ezLogosTicker {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-1500px, 0, 0); }
}

/* ---------- Content section wrappers ----------
   Full viewport width (no max-width) — keeps every section aligned to the
   same left/right boundary as Hero / Footer / Solutions. The 112 horizontal
   padding gives consistent breathing room from the screen edges. */
.ez-content {
  width: 100%;
  padding: 100px 112px;
  display: flex; flex-direction: column;
  gap: 100px;
  background: #f5f5f5;
}
.ez-content-flush {
  width: 100%;                  /* full viewport — no max-width */
  padding: 0 5px;
}

/* ---------- Title Subsection ---------- */
.ez-title-sub {
  display: flex; flex-direction: column; gap: 24px;
  padding-bottom: 36px;
}
.ez-title-sub__title-row {
  display: flex; align-items: center;
  min-height: 56px;
  width: 100%;
}
.ez-title-sub__title {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700;
  font-size: 80px; line-height: 80px;
  letter-spacing: -4px;
  color: #1e1e1e; margin: 0;
  white-space: nowrap;
}
.ez-title-sub__title .dot { color: #b88953; }
.ez-title-sub__title.is-light { color: #ffffff; }
.ez-title-sub__chip-row {
  display: flex; align-items: center; gap: 24px;
  width: 100%;
}
.ez-chip {
  background: #1d2029; color: #ffffff;
  border-radius: 200px; padding: 4px 24px;
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: 12px; line-height: 26px;
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ez-chip.is-light { background: #ffffff; color: #1d2029; }
.ez-title-sub__desc {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500;
  font-size: 16px; line-height: 22px;
  letter-spacing: -0.5px;
  color: #777; width: 417px; margin: 0;
}
.ez-title-sub__desc.is-light { color: #c6c6c6; }

/* ---------- Cases Grid ---------- */
.ez-cases-grid { display: flex; flex-direction: column; gap: 5px; }
.ez-cases-row { display: flex; gap: 5px; }
.ez-case-col { display: flex; flex-direction: column; gap: 5px; justify-content: center; flex: 1 1 0; min-width: 0; }
.ez-case-tag {
  background: #ffffff; border-radius: 6px;
  padding: 16px 20px; height: 59px;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
/* Case tag: tudo 16/20 para consistência visual (descrição + brand).
   Antes: brand 14/16 Bold, descrição 14/18 Regular — inconsistente. */
.ez-case-tag p {
  margin: 0;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.5px;
  color: #777;
}
.ez-case-tag .brand { font-weight: 700; color: #1e1e1e; }
.ez-case-tag .dot   { font-weight: 700; color: #b88953; }
.ez-case-img {
  position: relative;
  width: 100%; height: 382px;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}
.ez-case-img img.ez-case-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 6px;
  transition: transform .6s ease;
}
.ez-case-img:hover img.ez-case-photo { transform: scale(1.04); }
.ez-case-img .ez-case-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  border-radius: 6px;
  transition: background .25s ease;
}
.ez-case-img:hover .ez-case-overlay { background: rgba(0,0,0,0.25); }
.ez-case-img .ez-case-logo {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 110px; height: 83px;
  display: flex; align-items: center; justify-content: flex-end;
}
.ez-case-img .ez-case-logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: brightness(0) invert(1) opacity(.85); }

/* ---------- Section Our Solutions (dark + texture overlay) ---------- */
.ez-solutions {
  position: relative;
  background: #212121;
  border-radius: 6px;
  width: 100%;                  /* full viewport — no max-width */
  padding: 100px 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ez-solutions::before {
  /* Texture overlay (Figma 2403:2771 — opacity 0.10 over the #212121 base) */
  content: ""; position: absolute; inset: 0;
  background: url("../assets/images/solutions-texture.png") center/cover no-repeat;
  opacity: 0.10;
  pointer-events: none;
  border-radius: 6px;
}
.ez-solutions > * { position: relative; z-index: 1; }
.ez-solutions__title { padding: 0 112px 36px 112px; }
.ez-solutions__grid {
  display: flex; gap: 5px; align-items: stretch;
  padding: 20px 112px;
}
.ez-service {
  background: #ffffff; border-radius: 6px;
  padding: 20px; height: 392px;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}
.ez-service__title {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700;
  font-size: 20px; line-height: 20px;
  letter-spacing: -0.5px;
  margin: 0;
}
.ez-service__title .l1 { display: block; color: #777; }
.ez-service__title .l2 { display: block; color: #1e1e1e; }
.ez-service.is-flip .ez-service__title .l1 { color: #1e1e1e; }
.ez-service.is-flip .ez-service__title .l2 { color: #777; }
.ez-service__body {
  flex: 1 1 auto;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400; font-size: 14px; line-height: 18px;
  letter-spacing: -0.5px; color: #777; margin: 0;
}
.ez-service__list {
  display: flex; flex-direction: column; gap: 8px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400; font-size: 14px; line-height: 18px;
  letter-spacing: -0.5px; color: #777;
}
.ez-service-illust {
  width: 300px; height: 392px;
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.ez-service-illust img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---------- Section Quotes ---------- */
.ez-quotes-grid { display: flex; gap: 6px; align-items: stretch; width: 100%; }
.ez-quote {
  background: #ffffff; border-radius: 6px;
  padding: 20px; height: 392px;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.ez-quote__head { display: flex; gap: 12px; align-items: flex-start; width: 100%; }
.ez-quote__avatar {
  width: 50px; height: 38px;
  background: #d9d9d9; border-radius: 6px;
  flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700; font-size: 14px; color: #fff;
}
.ez-quote__id { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ez-quote__name {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700; font-size: 16px; line-height: 16px;
  letter-spacing: -0.5px; color: #1e1e1e; margin: 0;
}
.ez-quote__role {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400; font-size: 14px; line-height: 18px;
  letter-spacing: -0.5px; color: #777; margin: 0;
}
.ez-quote__body {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400; font-size: 14px; line-height: 18px;
  letter-spacing: -0.5px; color: #777; margin: 0;
}

/* Avatar temporariamente oculto até os retratos estarem prontos.
   O markup fica preservado pra reativar depois. Cargo (role) visível. */
.ez-quote__avatar {
  display: none;
}


/* ---------- Section FAQ (accordion) ---------- */
.ez-faq { display: flex; gap: 152px; align-items: flex-start; width: 100%; }
.ez-faq__left { width: 522px; flex-shrink: 0; }
.ez-faq__list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ez-faq-item {
  background: #ffffff; border-radius: 6px;
  width: 100%; overflow: hidden;
}
.ez-faq-item__btn {
  width: 100%; background: transparent; border: none;
  padding: 20px;
  display: flex; align-items: center; gap: 12px;
  text-align: left;
}
.ez-faq-item__q {
  flex: 1 1 0; min-width: 0;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700; font-size: 16px; line-height: 16px;
  letter-spacing: -0.5px; color: #1e1e1e; margin: 0;
}
.ez-faq-item__toggle {
  width: 20px; height: 20px;
  background: #1d2029;
  border-radius: 999px; color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
}
.ez-faq-item__toggle::before,
.ez-faq-item__toggle::after {
  content: "";
  position: absolute;
  background: #ffffff;
  border-radius: 1px;
}
.ez-faq-item__toggle::before { width: 9px; height: 1.5px; }
.ez-faq-item__toggle::after  { width: 1.5px; height: 9px; transition: transform .25s ease; }
.ez-faq-item.is-open .ez-faq-item__toggle::after { transform: scaleY(0); }
.ez-faq-item__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
  padding: 0 20px;
}
.ez-faq-item__body > div { overflow: hidden; }
.ez-faq-item.is-open .ez-faq-item__body { grid-template-rows: 1fr; padding-bottom: 20px; }
.ez-faq-item__a {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400; font-size: 14px; line-height: 18px;
  letter-spacing: -0.5px; color: #777;
  margin: 0;
}

/* ---------- Footer ---------- */
.ez-footer-shell {
  width: 100%;                  /* full viewport — no max-width */
  padding: 5px; background: #f5f5f5;
}
.ez-footer {
  position: relative;
  background: #212121; border-radius: 6px;
  padding: 60px 108px;
  width: 100%;
  display: flex; flex-direction: column; gap: 96px;
  overflow: hidden;
  color: #ffffff;
}
.ez-footer::before {
  /* decorative wave texture overlay — opacity 0.07 per Figma spec */
  content: ""; position: absolute; inset: 0;
  background: url("../assets/images/footer-texture.png") center/cover no-repeat;
  opacity: 0.07;
  pointer-events: none;
  border-radius: 6px;
}
.ez-footer > * { position: relative; z-index: 1; }
.ez-footer__top { display: flex; flex-direction: column; gap: 48px; width: 100%; }
.ez-footer__help {
  background: #282828; border-radius: 6px;
  padding: 32px 96px 32px 48px;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; overflow: hidden;
}
.ez-footer__help-intro { display: flex; flex-direction: column; gap: 10px; letter-spacing: -0.5px; color: #f9fafb; }
.ez-footer__help-title {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500; font-size: 24px; line-height: 24px;
  margin: 0; white-space: nowrap;
}
.ez-footer__help-desc {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400; font-size: 14px; line-height: 18px;
  opacity: 0.6; width: 491px; margin: 0;
}
.ez-footer__help-cta {
  display: inline-flex; align-items: center; gap: 16px;
  background: #b88953; color: #ffffff;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700; font-size: 20px; line-height: 20px;
  letter-spacing: -0.5px;
  border: none; white-space: nowrap;
  transition: background .2s ease;
}
.ez-footer__help-cta:hover { background: #d4a76a; }

.ez-footer__cols { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; gap: 48px; }
.ez-footer__nav { display: flex; gap: 48px; align-items: flex-start; width: 848px; letter-spacing: -0.5px; }
.ez-footer__nav-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.ez-footer__nav-h {
  font-family: 'Albert Sans', sans-serif; font-weight: 700;
  font-size: 16px; line-height: 16px; color: #d1d1d1; margin: 0;
}
.ez-footer__nav-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-family: 'Albert Sans', sans-serif; font-weight: 400;
  font-size: 14px; line-height: 18px; color: #ffffff;
}
.ez-footer__nav-list li { opacity: 0.6; }
.ez-footer__nav-list a,
.ez-footer__nav-list span { color: inherit; }

.ez-footer__brandcol { display: flex; flex-direction: column; gap: 64px; align-items: flex-end; }
.ez-footer__brand img { width: 125px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
.ez-footer__contact { display: flex; flex-direction: column; gap: 24px; align-items: flex-end; }
.ez-footer__contact-line { width: 45px; height: 1px; background: rgba(255,255,255,0.25); }
.ez-footer__contact-list {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
  font-family: 'Albert Sans', sans-serif; font-weight: 400;
  font-size: 14px; line-height: 18px; letter-spacing: -0.5px; color: #d1d1d1;
}
.ez-footer__contact-list p { margin: 0; white-space: nowrap; }

.ez-footer__bottom { display: flex; flex-direction: column; gap: 48px; width: 100%; }
.ez-footer__social { display: flex; gap: 48px; width: 848px; }
.ez-footer__social-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.ez-footer__social-line { width: 100%; height: 1px; background: rgba(255,255,255,0.20); }
.ez-footer__social-link {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Albert Sans', sans-serif; font-weight: 400;
  font-size: 14px; line-height: 18px; letter-spacing: -0.5px;
  color: #777; white-space: nowrap; transition: color .2s ease;
}
.ez-footer__social-link:hover { color: #ffffff; }
.ez-footer__social-link svg { width: 16px; height: 16px; }

.ez-footer__cright { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; }
.ez-footer__cright p {
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px;
  line-height: 1.4; color: #777; margin: 0; white-space: nowrap;
}
.ez-footer__totop {
  width: 60px; height: 60px;
  background: #ffffff; color: #1e1e1e;
  border-radius: 999px; border: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
.ez-footer__totop:hover { background: #b88953; color: #ffffff; transform: translateY(-2px); }

/* ============================================================================
   ABOUT — bloco superior (intro + fotos + posicionamento)
   ============================================================================ */

/* Linha 1: título grande à esquerda + descrição curta à direita */
.ez-about-intro {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 80px;
}
.ez-about-intro__title {
  flex: 1 1 0; min-width: 0;
  max-width: 720px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -2px;
  color: #1e1e1e;
  margin: 0;
}
.ez-about-intro__title .dot { color: #b88953; }
.ez-about-intro__desc {
  flex: 1 1 0; min-width: 0;
  max-width: 480px;
  align-self: flex-end;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.3px;
  color: #555;
  margin: 0;
}

/* Linha 2: duas fotos lado a lado, 1:1 cada */
.ez-about-photos {
  display: flex;
  gap: 5px;
  width: 100%;
}
.ez-about-photos__item {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #eaeaea;
}
.ez-about-photos__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Linha 3: label à esquerda + título + 2 colunas + CTA à direita */
.ez-about-positioning {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  width: 100%;
}
.ez-about-positioning__label {
  flex: 0 0 200px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.3px;
  color: #777;
}
.ez-about-positioning__label p { margin: 0; }
.ez-about-positioning__main {
  flex: 1 1 0; min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 880px;
}
.ez-about-positioning__title {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: #1e1e1e;
  margin: 0;
}
.ez-about-positioning__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.ez-about-positioning__cols p {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.3px;
  color: #555;
  margin: 0;
}
.ez-about-positioning__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid #1e1e1e;
  color: #1e1e1e;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.3px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.ez-about-positioning__cta:hover {
  background: #1e1e1e;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .ez-about-intro { flex-direction: column; gap: 24px; }
  .ez-about-intro__title { font-size: 48px; letter-spacing: -1px; }
  .ez-about-photos { flex-direction: column; }
  .ez-about-photos__item { aspect-ratio: 4 / 3; }
  .ez-about-positioning { flex-direction: column; gap: 16px; }
  .ez-about-positioning__cols { grid-template-columns: 1fr; }
}

/* ---------- Internal pages (reused) ---------- */
.ez-hero-short {
  width: 100%;                  /* full viewport — no max-width */
  padding: 5px; background: #f5f5f5;
  display: flex; flex-direction: column; gap: 5px;
  border-top: 7px solid #D4A76A;
  box-sizing: border-box;
}
.ez-page-title-card {
  background: #ffffff; border-radius: 6px;
  padding: 60px 112px;
  display: flex; flex-direction: column; gap: 24px;
}

/* Page-hero (Subsection — Figma 2393:1658) — white card with diagonal line texture
   at 20% opacity (offset right). padding 72/105, gap 24. Title 92 Bold tracking -4
   width 585. Chip column width 426. Description 16/22 Medium #777 width 417. */
.ez-page-hero {
  position: relative;
  background: #ffffff;
  border-radius: 6px;
  padding: 72px 105px;
  display: flex; flex-direction: column;
  gap: 24px;
  width: 100%;
  overflow: hidden;
}
.ez-page-hero::before {
  /* diagonal line texture — Figma: h 224.8%, left 24.25%, top -62.4%, opacity .20 */
  content: ""; position: absolute;
  left: 24.25%; top: -62.4%;
  width: 100%; height: 224.8%;
  background: url("../assets/images/subsection-lines.png") center/cover no-repeat;
  opacity: 0.20;
  pointer-events: none;
}
.ez-page-hero > * { position: relative; z-index: 1; }
.ez-page-hero__title {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700;
  font-size: 92px;
  line-height: 92px;             /* readable line-height; Figma's 16 is a Figma-clip artifact */
  letter-spacing: -4px;
  color: #1e1e1e;
  margin: 0;
  width: 585px;
  max-width: 100%;
}
.ez-page-hero__title .dot { color: #b88953; }
.ez-page-hero__chip-row {
  display: flex; align-items: center; gap: 24px;
  width: 100%;
}
/* Chip lives in a hug-content column (no fixed width per Figma 2393:1658) */
.ez-page-hero__chip-col {
  flex-shrink: 0;
  display: flex; align-items: flex-start;
}

/* ---------- Content for internal pages ---------- */
.ez-content--internal {
  padding: 100px 112px;
  gap: 0;
}

/* ============================================================================
   CASE TEMPLATE (Figma 2431:4298)
   Image rules:
     M-01 — main image, 100% width (just outer padding of 5)
     C1   — one column, single image full width (any aspect ratio)
     C2   — two columns, equal widths, gap 5
     C3   — three columns, equal widths, gap 5, aspect 2500/3334 (~3:4 portrait)
   ============================================================================ */

/* M-01 — main image right after the hero. Wrapper with subtle bg + 5px padding
   around the image (Figma 2431:4217 — ANZ uses bg #f9f9f9). Each case may
   override --m01-bg and --m01-h inline. */
.ez-case-main {
  width: 100%;
  padding: 5px;
  background: var(--m01-bg, #f9f9f9);
  border-radius: 6px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.ez-case-main__img {
  position: relative;
  flex: 1 1 0;
  height: var(--m01-h, 570px);
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
  display: block;
}
.ez-case-main__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

/* Case content — full viewport, padding 100/112.
   Gap 5px between every top-level block (Project Overview row, Image grid,
   massive image) AND between rows inside the image grid. Per Figma. */
.ez-case-content {
  width: 100%;
  padding: 100px 112px;
  display: flex; flex-direction: column;
  gap: 5px;
}

/* Row 1 — Overview (left) + Situation/Task/Results stack (right) */
.ez-case-info-row { display: flex; gap: 5px; align-items: stretch; width: 100%; }

.ez-case-overview {
  background: #ffffff;
  border: 1px solid #f2f2f2;
  border-radius: 12px;
  padding: 32px 40px;
  flex: 1 1 0; min-width: 0;
  align-self: stretch;
  display: flex;
}
.ez-case-overview__inner {
  display: flex; flex-direction: column;
  gap: 8px;
  letter-spacing: -0.5px;
  max-width: 540px;
}
.ez-case-overview__title {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700;
  font-size: 36px; line-height: 36px;
  color: #000; margin: 0;
}
.ez-case-overview__body {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400;
  font-size: 14px; line-height: 18px;
  color: #777; margin: 0;
}
.ez-case-overview__body p { margin: 0 0 12px 0; }
.ez-case-overview__body p:last-child { margin-bottom: 0; }

/* Default: stack pinned top + bottom so the 3 cards align with the left
   Overview card (Big Numbers template). For ANZ-style centered: add
   `.is-centered`. */
.ez-case-stack {
  display: flex; flex-direction: column;
  gap: 5px;
  flex: 1 1 0; min-width: 0;
  align-self: stretch;
  justify-content: space-between;
}
.ez-case-stack.is-centered { justify-content: center; }
/* Stack item — Case-Boxes (Figma 2399:2173/74/75)
   bg white, border #f2f2f2, radius 12, padding 32/40, gap 5
   children:
     .ez-case-stack-item__titles (flex-col gap 4) → label + title
     .ez-case-stack-item__body (light 16/20 #1e1e1e)        */
.ez-case-stack-item {
  background: #ffffff;
  border: 1px solid #f2f2f2;
  border-radius: 12px;
  padding: 32px 40px;
  display: flex; flex-direction: column;
  gap: 5px;
}
.ez-case-stack-item__titles {
  display: flex; flex-direction: column;
  gap: 4px;
  width: 100%;
}
.ez-case-stack-item__label {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 300;
  font-size: 14px; line-height: 20px;
  color: #777;
  margin: 0;
}
.ez-case-stack-item__title {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700;
  font-size: 20px; line-height: 20px;
  letter-spacing: -0.5px;
  color: #1d2029;
  margin: 0;
}
.ez-case-stack-item__body {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 300;
  font-size: 16px; line-height: 20px;
  color: #777;                   /* ← gray, matches Figma 2448:2761 */
  margin: 0;
}

/* Row 2 — Big Numbers (4 cards) */
.ez-case-bignums { display: flex; gap: 5px; width: 100%; }
.ez-case-bignum {
  background: #ffffff;
  border: 1px solid #f2f2f2;
  border-radius: 12px;
  padding: 32px 40px;
  flex: 1 1 0; min-width: 0;
  height: 325px;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
}
.ez-case-bignum__value {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700;
  font-size: 64px; line-height: 64px;
  letter-spacing: -0.5px;
  color: #1d2029; margin: 0;
}
.ez-case-bignum__caption {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400;
  font-size: 14px; line-height: 18px;
  letter-spacing: -0.5px;
  color: #777; margin: 0;
}

/* ----------------------------------------------------------------------------
   CASE IMAGE GRID — per-frame reproduction rule

   Each case in Figma is its own composition: heights, aspect ratios, ordering
   and image set are unique per frame. The CSS below provides the utility
   skeleton; the HTML of each case declares the exact heights/aspects inline.

   Image fit: `object-fit: cover` (matches Figma). When the slot height/aspect
   matches the Figma frame's slot, no cropping happens. If a slot's aspect
   differs from the image, the slot crops — that's the Figma behavior too.

   Defaults are reasonable fallbacks; ALWAYS override via the inline
   `--row-h` or `aspect-ratio` per row, taken from the actual case frame.

   Utilities:
     .ez-case-c1                       — single full-width row
     .ez-case-c2 > .ez-case-img        — two equal columns
     .ez-case-c3 > .ez-case-img        — three equal columns
     .ez-case-c1.is-radius-6           — border-radius 6 (some Figma frames use 6)

   Per-row overrides (declare in HTML, taken from Figma):
       <div class="ez-case-c1" style="--row-h: 1036px"> ... </div>
       <div class="ez-case-c3"
            style="--row-aspect: 2500/3334"> ... </div>
   ---------------------------------------------------------------------------- */

.ez-case-grid { display: flex; flex-direction: column; gap: 5px; width: 100%; }

/* Imagem com moldura branca + padding (Figma: white container h 1575, padding 40).
   A imagem é exibida em natural width MAX (sem upscaling), centralizada na moldura
   com margens brancas nas laterais. Crop vertical via overflow se a imagem for
   mais alta que a altura disponível. Override --frame-h se quiser outra altura. */
.ez-case-imframe {
  background: #ffffff;
  border-radius: 6px;
  padding: 40px;
  width: 100%;
  height: var(--frame-h, 1575px);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.ez-case-imframe__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
}
.ez-case-imframe__inner img {
  display: block;
  max-width: 100%;            /* never enlarge beyond natural pixel width */
  height: auto;
  width: auto;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
}

/* Shared image holder */
.ez-case-grid .ez-case-img,
.ez-case-c1 {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  background: transparent;
}
.ez-case-grid .ez-case-img img,
.ez-case-c1 img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;            /* matches Figma; slot dims define crop */
  display: block;
  pointer-events: none;
}

/* C1 — full-width single image (default 419px). Override --row-h inline. */
.ez-case-c1 {
  width: 100%;
  height: var(--row-h, 419px);
}
.ez-case-c1.is-radius-6 { border-radius: 6px; }

/* C2 — two columns equal width (default 753px). Override --row-h inline. */
.ez-case-c2 { display: flex; gap: 5px; width: 100%; }
.ez-case-c2 > .ez-case-img {
  flex: 1 1 0; min-width: 0;
  height: var(--row-h, 753px);
}

/* C3 — three columns equal width. Use --row-h OR --row-aspect.
   When --row-aspect is set the height becomes derived from aspect-ratio. */
.ez-case-c3 { display: flex; gap: 5px; width: 100%; }
.ez-case-c3 > .ez-case-img {
  flex: 1 1 0; min-width: 0;
  height: var(--row-h, auto);
  aspect-ratio: var(--row-aspect, auto);
}
.ez-case-c3:not([style*="--row-aspect"]):not([style*="--row-h"]) > .ez-case-img {
  height: 290px;                /* sensible default if no override given */
}

/* Cases Overview row (Figma 2448:2761)
   Both columns are now white cards (border #f2f2f2, radius 12, padding 32/40).
   Outer gap is 5px. Body text color in every card is #777. */
.ez-case-overview-row {
  display: flex; gap: 5px;
  align-items: stretch;
  width: 100%;
}
/* Project Overview card (left) — white card with title block (gap 8) inside */
.ez-case-overview-text {
  flex: 1 1 0; min-width: 0;
  align-self: stretch;
  background: #ffffff;
  border: 1px solid #f2f2f2;
  border-radius: 12px;
  padding: 32px 40px;
  display: flex; flex-direction: column;
  align-items: flex-start;
}
.ez-case-overview-text__inner {
  display: flex; flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 540px;
}
.ez-case-overview-text__title {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700;
  font-size: 36px; line-height: 36px;
  letter-spacing: -0.5px;
  color: #000; margin: 0;
  width: 100%;
}
.ez-case-overview-text__body {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 300;
  font-size: 16px; line-height: 20px;
  color: #777;                   /* ← gray, matches Figma 2448:2761 */
  margin: 0;
  width: 100%;
}
.ez-case-overview-text__body p { margin: 0; }
.ez-case-overview-text__body p + p { margin-top: 20px; }   /* empty line between paragraphs */

/* ----------------------------------------------------------------------------
   Classic overview row variant (Figma e.g. 2448:2611 — Nuvio)
   Gap 32 outer, left text is plain (no card border/bg/padding/radius),
   stack body text uses #1e1e1e (dark) instead of the default #777.
   Apply with: .ez-case-overview-row.is-classic
   ---------------------------------------------------------------------------- */
.ez-case-overview-row.is-classic {
  gap: 32px;
  align-items: flex-start;
}
.ez-case-overview-row.is-classic .ez-case-overview-text {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  align-self: flex-start;
}
.ez-case-overview-row.is-classic .ez-case-stack-item__body {
  color: #1e1e1e;
}

/* Plain M-01 variant — no wrapper bg, no padding, no radius
   (Figma e.g. 2375:7736 — Nuvio). Apply with: .ez-case-main.is-plain */
.ez-case-main.is-plain {
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.ez-case-main.is-plain .ez-case-main__img {
  border-radius: 0;
}

@media (max-width: 1024px) {
  .ez-case-content { padding: 80px 40px; }
  .ez-case-info-row { flex-direction: column; }
  .ez-case-bignums { flex-wrap: wrap; }
  .ez-case-bignum { flex: 1 1 calc(50% - 5px); }
  .ez-case-c2, .ez-case-c3 { flex-direction: column; }
  .ez-case-c2 > .ez-case-img,
  .ez-case-c3 > .ez-case-img { width: 100%; }
}

/* ---------- Contact page — Box Contact + Form ---------- */
.ez-contact-grid {
  display: flex; gap: 5px; align-items: stretch;
  width: 100%;
}
.ez-box-contact {
  position: relative;
  width: 416px;
  height: 530px;
  border-radius: 6px;
  overflow: hidden;
  padding: 20px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  color: #ffffff;
  flex-shrink: 0;
}
.ez-box-contact::before {
  content: ""; position: absolute; inset: 0;
  background: url("../assets/images/contact-bg.png") center/cover no-repeat;
  border-radius: 6px;
}
.ez-box-contact::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,0.40);
  border-radius: 6px;
}
.ez-box-contact > * { position: relative; z-index: 1; }
.ez-box-contact__title-block { display: flex; flex-direction: column; gap: 4px; letter-spacing: -0.5px; width: 100%; }
.ez-box-contact__title {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700; font-size: 36px; line-height: 36px;
  margin: 0;
}
.ez-box-contact__sub {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400; font-size: 14px; line-height: 18px;
  margin: 0;
}
.ez-box-contact__list {
  display: flex; flex-direction: column; gap: 4px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400; font-size: 14px; line-height: 18px;
  letter-spacing: -0.5px;
}
.ez-box-contact__list p { margin: 0; }

.ez-contact-form {
  flex: 1 1 0; min-width: 0;
  background: #ffffff;
  border-radius: 6px;
  align-self: stretch;
  padding: 40px;
  display: flex; flex-direction: column; gap: 20px;
}
.ez-contact-form__field {
  display: flex; flex-direction: column; gap: 8px;
}
.ez-contact-form__label {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700; font-size: 12px; line-height: 16px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: #1e1e1e;
}
.ez-contact-form__input,
.ez-contact-form__textarea {
  width: 100%;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400; font-size: 16px; line-height: 22px;
  letter-spacing: -0.5px;
  color: #1e1e1e;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  padding: 8px 0;
  outline: none;
  transition: color .2s ease, border-color .2s ease;
}
/* Estado "vazio" — texto, placeholder e borda mais claros (aparência disabled).
   Volta ao normal automaticamente assim que o usuário começa a digitar. */
.ez-contact-form__input::placeholder,
.ez-contact-form__textarea::placeholder {
  color: #c8c8c8;
  opacity: 1;
}
.ez-contact-form__input:placeholder-shown,
.ez-contact-form__textarea:placeholder-shown {
  color: #c8c8c8;
  border-bottom-color: rgba(0,0,0,0.08);
}
/* Labels mantêm a cor preta padrão (sem variar pelo estado do campo) */

.ez-contact-form__input:focus,
.ez-contact-form__textarea:focus { border-bottom-color: #b88953; }
.ez-contact-form__input:focus::placeholder,
.ez-contact-form__textarea:focus::placeholder { color: #d8d8d8; }

.ez-contact-form__textarea { resize: none; min-height: 120px; }
.ez-contact-form__submit {
  align-self: flex-start;
  background: #1d2029; color: #ffffff;
  border: none; border-radius: 200px;
  padding: 12px 28px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 700; font-size: 14px;
  letter-spacing: -0.3px;
  margin-top: 12px;
  transition: background .2s ease;
}
.ez-contact-form__submit:hover { background: #b88953; }
.ez-contact-form__submit[disabled] {
  opacity: 0.55;
  cursor: progress;
  background: #1d2029;
}

/* Mensagens de status do form (sucesso / erro) */
.ez-contact-form__msg {
  margin: 8px 0 0 0;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500; font-size: 14px; line-height: 20px;
  letter-spacing: -0.3px;
}
.ez-contact-form__msg[hidden] { display: none; }
.ez-contact-form__msg--success {
  background: rgba(76, 175, 80, 0.08);
  color: #2d7a31;
  border: 1px solid rgba(76, 175, 80, 0.25);
}
.ez-contact-form__msg--error {
  background: rgba(239, 68, 68, 0.06);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.20);
}
.ez-contact-form__msg--error a {
  color: inherit; text-decoration: underline;
}

/* Decorative letter overlay on Contact page */
.ez-letter-send {
  position: absolute;
  right: 8%; top: 50%;
  width: 240px; height: 112px;
  transform: rotate(-29.75deg);
  pointer-events: none;
  opacity: 0.95;
  z-index: 2;
}
.ez-letter-send img { width: 100%; height: 100%; object-fit: contain; }
.ez-page-hero.has-letter { position: relative; }

@media (max-width: 1024px) {
  .ez-contact-grid { flex-direction: column; }
  .ez-box-contact { width: 100%; height: auto; min-height: 320px; }
  .ez-letter-send { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1440px) {
  .ez-hero-h1 { font-size: 56px; line-height: 56px; letter-spacing: -3px; }
  .ez-title-sub__title { font-size: 64px; line-height: 64px; }
}
@media (max-width: 1024px) {
  .ez-top-header { padding: 12px 40px; }
  .ez-hero { padding: 0 40px; }
  .ez-content { padding: 80px 40px; gap: 80px; }
  .ez-solutions__title { padding: 0 40px 36px 40px; }
  .ez-solutions__grid { padding: 20px 40px; flex-wrap: wrap; }
  .ez-faq { flex-direction: column; gap: 40px; }
  .ez-faq__left { width: 100%; }
  .ez-footer { padding: 48px 40px; }
  .ez-footer__cols { flex-direction: column; align-items: flex-start; }
  .ez-footer__nav, .ez-footer__social { width: 100%; flex-wrap: wrap; }
  .ez-footer__brandcol { align-items: flex-start; }
  .ez-cases-row { flex-direction: column; }
}
@media (max-width: 640px) {
  .ez-hero { height: auto; padding: 60px 24px; flex-direction: column; gap: 40px; }
  .ez-hero-h1 { font-size: 32px; line-height: 32px; letter-spacing: -1px; }
  .ez-hero-carousel { width: 100%; }
  .ez-hero-wrap { height: auto; }
  .ez-title-sub__title { font-size: 48px; line-height: 48px; letter-spacing: -2px; }
  .ez-th-nav, .ez-th-loc { display: none; }
}