/* ============================================================
   MCI Hong Kong — Landing Page
   1. Tokens
   2. Reset / base
   3. Utilities (container, section, sr-only, image placeholders)
   4. Buttons / links
   5. Forms
   6. Header
   7. Hero
   8. Trusted by
   9. Awards
   10. Selected work
   11. Services
   12. Why MCI
   13. Testimonials
   14. FAQ
   15. Final CTA
   16. Footer
   17. Responsive (<=1100 / <=900 / <=640 / <=420)
============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
------------------------------------------------------------ */
:root {
  /* brand */
  --pink:        #e4004b;
  --pink-dark:   #c40041;
  --pink-soft:   #ffe8ef;
  --blue:        #2b34d8;
  --blue-dark:   #1d25b4;
  --blue-soft:   #eef0ff;

  --grad-brand:  linear-gradient(90deg, #e4004b 0%, #a01397 48%, #2b34d8 100%);

  /* neutrals */
  --ink:         #0f1723;
  --ink-2:       #253044;
  --muted:       #5c6779;
  --muted-2:     #8b93a3;
  --line:        #e5e8ee;
  --line-2:      #eff1f5;
  --bg:          #ffffff;
  --bg-soft:     #f7f8fb;

  /* type */
  --font:        "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-serif:  "Playfair Display", Georgia, "Times New Roman", serif;

  /* layout */
  --container:   1180px;
  --gutter:      24px;
  --radius:      12px;
  --radius-lg:   18px;
  --radius-xl:   26px;

  --shadow-sm:   0 2px 10px rgba(15, 23, 35, .06);
  --shadow-md:   0 10px 30px rgba(15, 23, 35, .10);
  --shadow-lg:   0 22px 55px rgba(15, 23, 35, .16);

  --header-h:    76px;
  --t:           .22s ease;
}

/* ------------------------------------------------------------
   2. RESET / BASE
------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
}

p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
blockquote, figure { margin: 0; }   /* zera a margem padrao do navegador */

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* generic stroke icons */
.ico,
.point-ico svg,
.service__ico svg,
.why-item__ico svg,
.link-arrow svg,
.btn__arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* icons that are drawn as solid shapes */
.hcontact .ico,
.footer__social svg {
  fill: currentColor;
  stroke: none;
}

/* ------------------------------------------------------------
   3. UTILITIES
------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 64px; }
.section--tight { padding-block: 40px; }

.section__title {
  font-size: clamp(22px, 2.4vw, 28px);
  text-align: center;
  margin-bottom: 34px;
}
.section__title--sm {
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 700;
  margin-bottom: 26px;
}
.section__title--left {
  text-align: left;
  font-size: clamp(19px, 2vw, 22px);
  margin-bottom: 26px;
}

.eyebrow {
  color: var(--pink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- IMAGE PLACEHOLDERS -------------------------------------
   Replace each .img-ph block with a real <img>. The data-img
   attribute names the expected asset.
------------------------------------------------------------- */
.img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg, #f2f4f8, #f2f4f8 10px, #eceff5 10px, #eceff5 20px);
  border: 1px dashed #c9d0dd;
  border-radius: var(--radius);
  color: var(--muted-2);
  overflow: hidden;
}
.img-ph__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  padding: 2px 8px;
  line-height: 1.3;
}

.img-ph--logo        { width: 46px; height: 46px; border-radius: 50%; }
.img-ph--hero        { width: 100%; aspect-ratio: 16 / 11; border-radius: 6px; }
.img-ph--logo-strip  { width: 100%; height: 46px; }
.img-ph--badge       { width: 118px; height: 118px; border-radius: 50%; flex: none; }
.img-ph--badge-wide  { width: 190px; height: 96px; border-radius: 8px; }
.img-ph--card        { width: 100%; aspect-ratio: 16 / 10; border-radius: 0; border: none; border-bottom: 1px dashed #c9d0dd; }
.img-ph--gradient    { background: linear-gradient(135deg, #ff3d7f 0%, #b13ad2 45%, #2f7bf6 100%); color: rgba(255,255,255,.85); }
.img-ph--client      { width: 150px; height: 46px; }

/* ------------------------------------------------------------
   4. BUTTONS / LINKS
------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 22px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.btn--primary {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 6px 18px rgba(228, 0, 75, .22);
}
.btn--primary:hover { background: var(--pink-dark); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }

.btn--lg    { padding: 15px 28px; font-size: 15px; border-radius: 10px; }
.btn--block { display: flex; width: 100%; }

.btn__arrow { width: 17px; height: 17px; transition: transform var(--t); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pink);
  font-size: 13px;
  font-weight: 600;
  margin-top: 14px;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------
   5. FORMS
------------------------------------------------------------ */
.field { position: relative; margin-bottom: 10px; }

.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t);
  -webkit-appearance: none;
  appearance: none;
}
.lead-form input,
.lead-form select,
.lead-form textarea { display: block; }

.lead-form textarea { resize: vertical; min-height: 74px; }

.lead-form input::placeholder,
.lead-form textarea::placeholder { color: var(--muted-2); }

.lead-form select.is-placeholder { color: var(--muted-2); }

.lead-form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  padding-right: 34px;
}

.field--date input {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a3' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4m8-4v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  padding-right: 34px;
}
.field--date input::-webkit-calendar-picker-indicator { opacity: 0; }

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(228, 0, 75, .10);
}

.lead-form .is-invalid {
  border-color: var(--pink);
  background-color: #fff6f8;
}

.field__error {
  display: none;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--pink);
}
.field__error.is-visible { display: block; }

.form-status {
  display: none;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0d8a4f;
}
.form-status.is-visible { display: block; }
.form-status--light { color: #fff; }

/* ------------------------------------------------------------
   6. HEADER
------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  transition: box-shadow var(--t);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand { flex: none; display: inline-flex; }
.brand__logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.header__contacts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}

.hcontact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-2);
  transition: color var(--t);
}
.hcontact:hover { color: var(--pink); }
.hcontact .ico { width: 17px; height: 17px; color: var(--muted); }
.hcontact--icon .ico { width: 19px; height: 19px; }

.header__cta { flex: none; }
.header__cta.btn--primary {
  background: #000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.header__cta.btn--primary:hover { background: #1a1a1a; }

.header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.header__toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}
.header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header__drawer[hidden] { display: none; }

.header__drawer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px var(--gutter) 22px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.header__drawer-link { font-size: 15px; font-weight: 500; }

/* ------------------------------------------------------------
   7. HERO
------------------------------------------------------------ */
.hero {
  position: relative;
  padding-block: 46px 60px;
  overflow: hidden;
}

.hero__deco { position: absolute; pointer-events: none; }
.hero__deco--wave {
  left: -160px;
  bottom: -120px;
  width: 520px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(228, 0, 75, .07), transparent 62%);
}
.hero__deco--circle1 {
  width: 54px; height: 54px;
  border: 1.5px solid rgba(228, 0, 75, .22);
  border-radius: 50%;
  left: 43%; top: 60px;
}
.hero__deco--circle2 {
  width: 26px; height: 26px;
  border: 1.5px solid rgba(43, 52, 216, .20);
  border-radius: 50%;
  left: 45%; top: 132px;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 48px;
  align-items: start;
}

.hero__title {
  font-size: clamp(32px, 4.1vw, 46px);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.hero__title em {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  font-size: 14.5px;
  color: var(--muted);
  max-width: 430px;
  margin-bottom: 26px;
}

.hero__points { display: grid; gap: 16px; margin-bottom: 30px; }
.hero__points li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.point-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-2);
  background: #fff;
}

.hero__cta { box-shadow: 0 10px 26px rgba(228, 0, 75, .25); }

/* media + overlapping form card (grid overlap keeps height correct) */
.hero__media {
  display: grid;
  grid-template-columns: 1fr;
}
.hero__media > * { grid-area: 1 / 1; }

.hero__media > .img-ph--hero,
.hero__media > img {
  position: relative;
  z-index: 1;
  align-self: start;
}

.form-card {
  position: relative;
  z-index: 2;              /* sempre acima da imagem do hero */
  align-self: start;
  justify-self: end;
  width: min(300px, 60%);
  margin-top: 44px;
  padding: 20px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.form-card__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}
.form-card__note {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted-2);
  text-align: center;
}

/* ------------------------------------------------------------
   8. TRUSTED BY
------------------------------------------------------------ */
.trusted { background: var(--bg); }

.logo-carousel { --logo-gap: 24px; }
.logo-carousel__row {
  overflow: hidden;
  padding-block: 4px;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.logo-carousel__row:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.logo-carousel__track {
  display: flex;
  width: max-content;
  animation: client-logo-scroll 45s linear infinite;
}
.logo-carousel__row:nth-child(2) .logo-carousel__track { animation-direction: reverse; }
.logo-carousel__group {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding-right: var(--logo-gap);
  flex-shrink: 0;
}
.logo-carousel .client-logo-frame { width: clamp(128px, 12vw, 160px); flex: none; }
.logo-carousel .client-logo-frame--readable {
  width: clamp(176px, 16vw, 208px);
  height: 90px;
  aspect-ratio: auto;
}
@keyframes client-logo-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* Explicit autoplay for this carousel. */
  .logo-carousel__track {
    animation-duration: 45s !important;
    animation-iteration-count: infinite !important;
  }
}

/* caixa uniforme: cada logo preenche a largura da celula, limitado pela altura */
.brand-logo {
  width: 100%;
  height: 56px;
  object-fit: contain;
  object-position: center;
}
/* Optical sizing uses each asset's visible bounds, not its transparent canvas. */
.client-logo-frame {
  display: block;
  position: relative;
  aspect-ratio: 160 / 90;
  overflow: hidden;
}
.trusted .client-logo-frame .brand-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  height: auto;
  opacity: 1;
}
.trusted .brand-logo--monochrome { filter: brightness(0); }

/* ajuste optico: marcas quadradas e empilhadas pesam mais que os letreiros */
.brand-logo--square { height: 48px; }   /* BMW (redondo)   */
.brand-logo--tall   { height: 46px; }   /* adidas (empilhado) */

/* ------------------------------------------------------------
   9. AWARDS
------------------------------------------------------------ */
.awards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: center;
}
.award {
  display: flex;
  align-items: center;
  gap: 24px;
}
.award__badge {
  flex: none;
  width: 150px;
  height: 150px;
  object-fit: contain;
}
.award__badge--wide {
  width: 250px;
  height: auto;
}
.award__recognition {
  flex: 0 1 230px;
  width: 230px;
  min-width: 150px;
  max-width: 100%;
  text-align: center;
}
.award__official-logo { display: block; width: 100%; height: auto; }
/* Show only the original gold lettering; hide the unrelated award logo. */
.award__gold-art {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 285 / 174;
  margin: 8px auto 0;
}
.award__gold-art img {
  position: absolute;
  width: 175.4386%;
  max-width: none;
  height: auto;
  left: -75.4386%;
  top: -17.2414%;
}
@media (max-width: 640px) {
  .award__recognition { flex: none; width: 230px; }
}

/* titulo em coluna mais estreita, para o selo respirar */
.award__body { max-width: 300px; }
.award__title { font-size: 15px; margin-bottom: 8px; }
.award__meta  { font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------
   10. SELECTED WORK
------------------------------------------------------------ */
.work { border-top: 1px solid var(--line-2); }

.work__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.work-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.work-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.work-card__body { padding: 18px 18px 22px; }
.work-card__type { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.work-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}
.work-card__image--consensus { object-position: center 57%; }
.work-card__brand-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: #f1f5fb;
}
.work-card__brand-cover img { width: 68%; height: auto; object-fit: contain; }
.work-card__title { font-size: 15px; margin-bottom: 10px; }

.work-card__meta {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 8px;
}
.ico--pin { width: 15px; height: 15px; margin-top: 2px; color: var(--muted-2); }

.dot {
  flex: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  margin-top: 4px;
}
.dot--bronze { background: linear-gradient(135deg, #d79a5b, #a86b2c); }
.dot--gold   { background: linear-gradient(135deg, #f5cf5e, #c99a17); }

.work-card__text {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
}

/* ------------------------------------------------------------
   11. SERVICES
------------------------------------------------------------ */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.services__grid > * + * {
  border-left: 1px solid var(--line-2);
  padding-left: 30px;
}
.services__grid > * { padding-right: 30px; }

.service { display: flex; gap: 16px; align-items: flex-start; }

.service__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--pink-soft);
  color: var(--pink);
}
.service__ico svg { width: 20px; height: 20px; }

.service__title { font-size: 15px; margin-bottom: 8px; }
.service__text  { font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------
   12. WHY MCI
------------------------------------------------------------ */
.why { padding-block: 20px; }

.why__band {
  position: relative;
  overflow: hidden;
  padding: 34px 38px 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #2b34d8 0%, #3b2fd0 55%, #4a2fc9 100%);
  color: #fff;
}
.why__deco {
  position: absolute;
  right: -60px; bottom: -120px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 62%);
  pointer-events: none;
}

.why__title {
  color: #fff;
  font-size: 20px;
  margin-bottom: 26px;
}

.why__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.why__grid > * + * {
  border-left: 1px solid rgba(255, 255, 255, .22);
  padding-left: 26px;
}
.why__grid > * { padding-right: 26px; }

.why-item__ico {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 12px;
  color: #fff;
}
.why-item__ico svg { width: 24px; height: 24px; }

.why-item__title {
  color: #fff;
  font-size: 14px;
  margin-bottom: 9px;
}
.why-item__text {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .85);
}

/* ------------------------------------------------------------
   13. TESTIMONIALS
------------------------------------------------------------ */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;      /* os dois cards com a mesma altura */
}

.testimonial {
  --logo-col: 165px;
  position: relative;
  display: grid;
  grid-template-columns: var(--logo-col) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;      /* texto + assinatura centrados no card */
  gap: 20px;
  margin: 0;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* logo ocupa as duas linhas e fica centralizado na vertical */
.testimonial__logo {
  grid-row: 1 / -1;
  grid-column: 1;
  align-self: center;
}
.client-logo {
  width: 100%;
  max-width: 160px;
  height: auto;
  object-fit: contain;
}

.testimonial__body {
  grid-row: 1;
  grid-column: 2;
  position: relative;
}

/* aspas ancoradas no inicio do texto */
.quote-mark {
  position: absolute;
  top: -12px;
  left: -26px;             /* na calha, a esquerda da primeira linha */
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 58px;
  line-height: 1;
  color: var(--pink);
  transform: scaleX(-1);   /* espelhado: abre o texto em vez de fechar */
}

.testimonial__body p {
  font-size: 12px;
  line-height: 1.62;
  color: var(--muted);
}

.testimonial__author {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.testimonial__author strong { display: block; color: var(--ink); font-size: 13px; }

/* ------------------------------------------------------------
   14. FAQ
------------------------------------------------------------ */
.faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 34px;
  align-items: stretch;      /* as duas colunas com a mesma altura */
}
/* itens distribuidos: o primeiro encosta no topo, o ultimo na base,
   de modo que as duas colunas comecem e terminem na mesma linha */
.faq__col {
  display: grid;
  gap: 12px;
  align-content: space-between;
}

.accordion {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color var(--t);
}
.accordion.is-open { border-color: transparent; background: transparent; }

.accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 13px 16px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}
.accordion.is-open .accordion__head { color: var(--pink); font-weight: 600; }

/* plus / minus sign */
.accordion__sign {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.accordion__sign::before,
.accordion__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.6px;
  background: currentColor;
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform var(--t), opacity var(--t);
}
.accordion__sign::after { transform: translateY(-50%) rotate(90deg); }
.accordion.is-open .accordion__sign::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.accordion__panel { padding: 0 16px 14px; }
.accordion__panel p { font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* ------------------------------------------------------------
   15. FINAL CTA
------------------------------------------------------------ */
.cta { padding-block: 30px 46px; }

.cta__band {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.4fr);
  gap: 30px;
  align-items: center;
  padding: 34px 38px;
  border-radius: var(--radius-lg);
  background: var(--grad-brand);
  color: #fff;
}

.cta__title {
  color: #fff;
  font-size: clamp(24px, 2.6vw, 30px);
  margin-bottom: 10px;
}
.cta__lead { font-size: 13.5px; color: rgba(255, 255, 255, .92); }

/* o formulario e um bloco unico: painel branco + botao ao lado */
.cta__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.cta__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 12px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.cta__fields .field { margin-bottom: 0; }

/* todos os campos do painel com a mesma altura */
.cta__fields input,
.cta__fields select,
.cta__fields textarea {
  height: 40px;
  min-height: 40px;
  padding-block: 0;
  line-height: 38px;
}
.cta__fields input,
.cta__fields select,
.cta__fields textarea { font-size: 13px; }

.cta__fields textarea {
  resize: none;
  overflow: auto;
  line-height: 1.4;
  padding-block: 10px;
}

.cta__submit .btn { white-space: nowrap; }
.cta__form .form-status { grid-column: 1 / -1; }

/* ------------------------------------------------------------
   16. FOOTER
------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--line-2);
  padding-block: 22px;
}
.footer__inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer__contacts { display: flex; align-items: center; gap: 26px; }
.footer__legal {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.footer__legal a:hover { color: var(--pink); }
.footer__sep { color: var(--line); }

.footer__social { display: flex; align-items: center; gap: 16px; color: var(--ink); }
.footer__social svg { width: 21px; height: 21px; }
.footer__social a:hover { color: var(--pink); }

/* ============================================================
   17. RESPONSIVE
============================================================ */

/* ---- <= 1100px : laptops / small desktops ---- */
@media (max-width: 1100px) {
  .hero__inner { gap: 32px; }
  .hero__deco--circle1,
  .hero__deco--circle2 { display: none; }

  .form-card { width: min(290px, 66%); margin-top: 30px; }


  .testimonial { --logo-col: 132px; }
  .client-logo { max-width: 128px; }

  .cta__band { padding: 30px; }
}

/* ---- <= 900px : tablets ---- */
@media (max-width: 900px) {
  .section { padding-block: 48px; }
  .section--tight { padding-block: 34px; }

  /* header */
  .header__contacts,
  .header__cta { display: none; }
  .header__toggle { display: flex; }

  /* hero stacks: image, then form card below */
  .hero { padding-block: 34px 44px; }
  .hero__inner { grid-template-columns: 1fr; gap: 30px; }
  .hero__media { display: block; }
  .img-ph--hero { aspect-ratio: 16 / 9; }
  .form-card {
    width: 100%;
    margin-top: -34px;
    margin-inline: auto;
    max-width: 460px;
  }
  .hero__lead { max-width: none; }

  /* awards */
  .awards__grid { grid-template-columns: 1fr; gap: 26px; }

  /* work */
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* services */
  .services__grid { grid-template-columns: 1fr; gap: 24px; }
  .services__grid > * + * { border-left: 0; padding-left: 0; }
  .services__grid > * { padding-right: 0; }

  /* why */
  .why__band { padding: 28px 24px 32px; }
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .why__grid > * + * { border-left: 0; padding-left: 0; }
  .why__grid > *:nth-child(even) { border-left: 1px solid rgba(255,255,255,.22); padding-left: 24px; }
  .why__grid > * { padding-right: 24px; }

  /* testimonials */
  .testimonials__grid { grid-template-columns: 1fr; }

  /* faq */
  .faq__grid { grid-template-columns: 1fr; gap: 12px; }
  .faq__col { align-content: start; }

  /* cta */
  .cta__band { grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .cta__form { grid-template-columns: 1fr; }
  .cta__submit .btn { width: 100%; }

  /* footer */
  .footer__inner { flex-wrap: wrap; justify-content: center; text-align: center; gap: 18px 26px; }
  .footer__legal { margin-left: 0; }
}

/* ---- <= 640px : phones ---- */
@media (max-width: 640px) {
  :root { --gutter: 18px; }

  .section { padding-block: 40px; }
  .section--tight { padding-block: 28px; }
  .section__title { margin-bottom: 24px; }

  .hero__title { font-size: 30px; }
  .hero__title br { display: none; }
  .hero__title em { display: inline; }
  .br-md { display: none; }

  .hero__cta,
  .hero__points li { font-size: 14px; }
  .hero__cta { width: 100%; }

  .form-card { padding: 18px 16px; margin-top: -26px; }

  /* logos: 3 per row */
  .img-ph--logo-strip { height: 42px; }
  .brand-logo { height: 50px; }
  .brand-logo--square { height: 44px; }
  .brand-logo--tall { height: 42px; }

  /* awards stack */
  .awards { padding-block: 44px; }
  .awards .section__title { margin-bottom: 36px; }
  .awards__grid { gap: 48px; }
  .award { flex-direction: column; align-items: center; gap: 22px; text-align: center; }
  .award__badge { width: 150px; height: 150px; }
  .award__badge--wide { width: 200px; height: auto; }
  .award__recognition { width: 190px; }
  .award__body { width: 100%; max-width: 300px; }
  .award__title { line-height: 1.5; margin-bottom: 10px; }
  .award__meta { line-height: 1.65; }

  /* work: single column */
  .work__grid { grid-template-columns: 1fr; gap: 20px; }

  /* why: single column */
  .why__grid { grid-template-columns: 1fr; gap: 24px; }
  .why__grid > *:nth-child(even) { border-left: 0; padding-left: 0; }
  .why__grid > * { padding-right: 0; }

  /* testimonials stack logo above quote */
  .testimonial { grid-template-columns: 1fr; gap: 14px; padding: 22px 18px; }
  .testimonial__logo { grid-row: auto; }
  .testimonial__body { grid-row: auto; grid-column: 1; }
  .testimonial__author { grid-column: 1; grid-row: auto; }
  .quote-mark {
    position: static;
    display: block;
    width: fit-content;
    margin-bottom: -14px;
  }

  /* cta form single column */
  .cta__band { padding: 26px 20px; border-radius: var(--radius); }
  .cta__fields { grid-template-columns: 1fr; }

  .footer__contacts { flex-direction: column; gap: 10px; }
}

/* ---- <= 420px : small phones ---- */
@media (max-width: 420px) {
  .hero__title { font-size: 27px; }
  .section__title { font-size: 19px; }
  .accordion__head { font-size: 13px; padding: 12px 13px; }
}

/* ---- <= 360px : very small phones ---- */
@media (max-width: 360px) {
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Hero media comparison: keep the complete image above the form. */
.hero__media { display: flex; flex-direction: column; }
.hero-visual { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #111c35; }
.hero-visual__image, .hero-visual__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-visual__video { position: absolute; inset: 0; }
.hero-visual__video[hidden], .hero-visual__caption[hidden] { display: none; }
.hero-visual__caption { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.65); color: #fff; border-radius: 4px; padding: 3px 8px; font-size: 11px; pointer-events: none; }
.hero__media .form-card { width: calc(100% - 40px); max-width: 460px; align-self: center; margin: 16px auto 0; }
@media (max-width: 600px) { .hero__media .form-card { width: 100%; } }

/* Full-width background hero trial. */
.hero--background { isolation: isolate; background: #101827 url('../assets/images/work-suns-1280.webp') center / cover no-repeat; padding-block: 76px 82px; }
.hero--background::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,13,29,.65), rgba(7,13,29,.42) 46%, rgba(7,13,29,.14)); pointer-events: none; }
.hero__background-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; }
.hero--video-playing .hero__background-video { opacity: 1; }
.hero--background .hero__deco, .hero--background .hero-visual { display: none; }
.hero--background .hero__inner { align-items: center; grid-template-columns: minmax(0,1.3fr) minmax(300px,.9fr); gap: 64px; }
.hero--background .hero__content { position: relative; isolation: isolate; }
.hero--background .hero__content::before {
  content: '';
  position: absolute;
  inset: -24px;
  z-index: -1;
  border-radius: 20px;
  background: rgba(7,13,29,.34);
  border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.hero--background .hero__title { color: #fff; font-size: clamp(34px,4vw,52px); }
.hero--background .hero__title em { color: #ffb2cd; background: none; -webkit-text-fill-color: #ffb2cd; }
.hero--background .eyebrow { color: #ffb2cd; }
.hero--background .hero__lead, .hero--background .hero__points li { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.65); }
.hero--background .point-ico { color: #fff; background: rgba(7,13,29,.3); border-color: rgba(255,255,255,.65); }
.hero--background .hero__media .form-card { width: 100%; max-width: 370px; margin: 0; align-self: flex-end; padding: 26px; }
.hero__video-controls { position: absolute; bottom: 16px; left: 24px; display: flex; gap: 12px; align-items: center; z-index: 3; color: #fff; font-size: 11px; }
.hero__video-controls button { padding: 6px 12px; background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 20px; cursor: pointer; }
.hero__video-controls button[hidden] { display: none; }
@media (max-width: 900px) {
  .hero--background { padding-block: 44px 70px; }
  .hero--background .hero__inner { grid-template-columns: 1fr; gap: 30px; }
  .hero--background .hero__content::before { inset: -16px -12px; border-radius: 16px; }
  .hero--background::after { background: rgba(7,13,29,.48); }
  .hero--background .hero__media .form-card { max-width: 460px; align-self: center; }
}

/* Hero typography and accent: MCI brand guidelines 1.5, pages 33 and 55–57. */
.hero { font-family: "Jost", Calibri, Arial, sans-serif; }
.hero__title { font-weight: 600; }
.hero__title em { font-family: inherit; font-style: normal; font-weight: 600; background: none; color: #F43B56; }
.hero--background .hero__title em { color: #F43B56; -webkit-text-fill-color: #F43B56; }
.hero--background .eyebrow { color: #FFFFFF; }

/* Honeypot: off-screen for people, still fillable by bots. Not display:none,
   because some bots skip hidden fields. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* The form only reports failures here: success redirects to the thank-you
   page, so it never reaches this element. */
.form-status.is-error { color: var(--pink); }
.form-status--light.is-error { color: #ffd7e1; }

@media (max-width: 700px) {
  .hero--background { background-image: url('../assets/images/work-suns-768.webp'); }
}