/* Ivorest - componentes das paginas, na grade de 12 colunas: introducoes (titulo | texto), frases de
   destaque, servicos, "How we help", os tres pontos, listas de motivos, About, Working e Contact.
   Usa os tokens e blocos de site.css. */

/* ---------------------------------------------------- duas colunas (titulo | texto) */
.intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 36px; align-items: start; }
.intro__title { grid-column: 1 / span 5; }
.intro__body { grid-column: 7 / span 6; display: grid; gap: 28px; justify-items: start; }
@media (max-width: 1024px) { .intro__title, .intro__body { grid-column: 1 / -1; } }

/* ------------------------------------------------------- frases de destaque */
.fill { font-size: var(--fs-statement); font-weight: 520; font-stretch: 100%; line-height: 1.3; letter-spacing: -.012em; }
.fill--sm { font-size: clamp(21px, 1.6vw, 27px); }
/* o paragrafo longo de "Who we are" e texto corrido */
.fill:not(.fill--sm) { font-size: var(--fs-lead); font-weight: 400; font-stretch: 100%; line-height: 1.6; letter-spacing: 0; }
.chapter--mist .fill { color: var(--ink); }
.chapter--deep .fill { color: var(--white); }
.fill__close { color: var(--blue) !important; }
.chapter--deep .fill__close { color: var(--sky) !important; }

/* About: quem somos */
.who { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
.who__title { grid-column: 1 / span 4; }
.who__body { grid-column: 5 / span 8; display: grid; gap: 36px; justify-items: start; }
@media (max-width: 1024px) { .who__title, .who__body { grid-column: 1 / -1; } }

/* ------------------------------------------------------------- servicos */
.services-head { margin-bottom: clamp(32px, 3vw, 56px); }
.services-head .h2 { font-size: clamp(36px, 4.2vw, 76px); font-stretch: 100%; letter-spacing: -.03em; }

/* Home: os cinco servicos do texto do Mitch (ainda sem pagina propria, sem link): o nome a esquerda com
   a marca em arco, o texto a direita; uma regua entre as linhas */
.svc-item {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding-block: clamp(28px, 3vw, 48px); border-top: 1px solid var(--rule);
}
.svc-item:last-child { border-bottom: 1px solid var(--rule); }
.svc-item__name { grid-column: 1 / span 5; position: relative; padding-left: 40px; font-size: clamp(23px, 2vw, 34px); line-height: 1.1; }
.svc-item__name::before {
  content: ""; position: absolute; left: 0; top: .14em; width: 22px; height: 22px;
  border: 5px solid var(--cyan); border-right: 0; border-bottom: 0; border-top-left-radius: 100%;
}
.svc-item__body { grid-column: 7 / span 6; display: grid; gap: 14px; color: var(--soft); font-size: var(--fs-lead); line-height: 1.55; }
@media (max-width: 860px) {
  .svc-item { row-gap: 14px; }
  .svc-item__name, .svc-item__body { grid-column: 1 / -1; }
  .svc-item__body { padding-left: 40px; }
}

/* Services: o indice com link (as quatro paginas atuais). A linha inteira e o link; com mouse, o campo azul
   cobre a linha a partir da esquerda e a seta anda */
.svc-index { --bleed: clamp(0px, 1.6vw, 28px); margin-inline: calc(var(--bleed) * -1); }
.svc {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) auto; column-gap: clamp(24px, 3vw, 56px); align-items: center;
  padding: clamp(28px, 3vw, 48px) var(--bleed); border-top: 1px solid var(--rule);
}
.svc:last-child { border-bottom: 1px solid var(--rule); }
.svc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue); clip-path: inset(0 100% 0 0); transition: clip-path .55s var(--ease-out); }
/* o nome nao e posicionado: a marca e o link que cobre a linha se medem pela linha (.svc) */
.svc { align-items: start; }
.svc__name { padding-left: 40px; font-size: clamp(26px, 2.6vw, 46px); line-height: 1.04; transition: color .3s; }
.svc__name::before {
  content: ""; position: absolute; left: var(--bleed); top: calc(clamp(28px, 3vw, 48px) + .12em); width: 22px; height: 22px;
  border: 5px solid var(--cyan); border-right: 0; border-bottom: 0; border-top-left-radius: 100%;
}
.svc__name a { text-decoration: none; }
.svc__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc__name a:focus-visible { outline: none; }
.svc__text { color: var(--soft); font-size: var(--fs-lead); line-height: 1.5; max-width: 40ch; transition: color .3s; }
.svc__go {
  width: clamp(48px, 4vw, 60px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--rule); color: var(--ink);
  display: grid; place-items: center; transition: background-color .3s, border-color .3s, color .3s, transform .5s var(--ease-out);
}
.svc__go svg { width: 42%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc:focus-within { outline: 2px solid var(--blue); outline-offset: -2px; }
@media (hover: hover) {
  .svc:hover::after, .svc:focus-within::after { clip-path: inset(0 0 0 0); }
  .svc:hover .svc__name, .svc:focus-within .svc__name, .svc:hover .svc__text, .svc:focus-within .svc__text { color: var(--white); }
  .svc:hover .svc__name::before, .svc:focus-within .svc__name::before { border-color: var(--sky); }
  .svc:hover .svc__go, .svc:focus-within .svc__go { background: var(--white); border-color: var(--white); color: var(--blue); transform: translateX(8px); }
}
@media (max-width: 767px) {
  .svc-index { --bleed: 0px; }
  .svc { grid-template-columns: minmax(0, 1fr) auto; row-gap: 14px; align-items: start; }
  .svc__name { grid-column: 1; grid-row: 1; }
  .svc__go { grid-column: 2; grid-row: 1; width: 44px; }
  .svc__text { grid-column: 1 / -1; grid-row: 2; padding-left: 40px; }
}

/* ---------------------------------------------------------- lista de motivos */
.focus { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; }
.focus__title { grid-column: 1 / span 4; }
.focus__title > .lead { margin-top: 20px; }
.focus__list { grid-column: 5 / span 8; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); }
.focus__item { padding: 28px 0 36px; border-top: 1px solid var(--rule); }
.focus__icon { display: none; }
.focus__name { position: relative; padding-left: 40px; font-size: clamp(21px, 1.6vw, 27px); line-height: 1.16; }
.focus__name::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 22px; height: 22px;
  border: 5px solid var(--cyan); border-right: 0; border-bottom: 0; border-top-left-radius: 100%;
}
.focus__text { margin-top: 12px; padding-left: 40px; color: var(--soft); max-width: 46ch; }
@media (max-width: 1024px) { .focus__title, .focus__list { grid-column: 1 / -1; } }
@media (max-width: 680px) { .focus__list { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- "How we help" */
.includes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
.includes__title { grid-column: 1 / span 4; font-size: var(--fs-h2); line-height: 1.04; }
.includes__list { grid-column: 5 / span 8; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); }
.includes__list li { padding: 28px 0 36px; border-top: 1px solid var(--rule); }
.includes__term { display: block; position: relative; padding-left: 40px; font-size: clamp(20px, 1.5vw, 25px); font-weight: 600; font-stretch: 100%; line-height: 1.2; letter-spacing: -.012em; }
.includes__term::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 22px; height: 22px;
  border: 5px solid var(--cyan); border-right: 0; border-bottom: 0; border-top-left-radius: 100%;
}
.includes__desc { display: block; margin-top: 12px; padding-left: 40px; color: var(--soft); max-width: 48ch; }
.includes .actions { grid-column: 5 / span 8; }
@media (max-width: 1024px) { .includes__title, .includes__list, .includes .actions { grid-column: 1 / -1; } }
@media (max-width: 680px) { .includes__list { grid-template-columns: 1fr; } }

/* ------------------------------------------- os tres pontos (campo azul) */
.points-head { margin-bottom: clamp(48px, 6vw, 96px); }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
.point { padding-top: 28px; border-top: 2px solid var(--rule-inverse); display: grid; gap: 14px; align-content: start; }
.point__term { font-size: clamp(22px, 1.7vw, 29px); line-height: 1.14; color: var(--white); }
.point__text { color: rgba(255, 255, 255, .88); }
.point--statement .point__term { font-size: clamp(20px, 1.5vw, 25px); font-weight: 480; font-stretch: 100%; line-height: 1.32; letter-spacing: -.01em; }
@media (max-width: 860px) { .points { grid-template-columns: 1fr; row-gap: 32px; } }

/* ---------------------------------------------------------- About */
.impact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(40px, 5vw, 72px); }
.impact__title { grid-column: 1 / span 5; }
.impact__lead { grid-column: 7 / span 6; display: grid; gap: 24px; }
.impact__statement {
  grid-column: 1 / -1; font-size: clamp(30px, 3.4vw, 62px); font-weight: 620; font-stretch: 100%; line-height: 1.04; letter-spacing: -.03em;
  color: var(--white); padding-block: clamp(28px, 4vw, 64px); border-block: 2px solid var(--rule-inverse);
}
.impact__col { grid-column: span 6; color: rgba(255, 255, 255, .9); }
@media (max-width: 1024px) { .impact__title, .impact__lead, .impact__col { grid-column: 1 / -1; } }

/* Mitch: a foto nunca passa da altura do texto (a figura nao tem altura propria; a imagem e absoluta e
   ocupa a altura da linha do grid, em 4:5), com o canto de cima em arco como os campos azuis */
.mitch { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; }
.mitch__photo { grid-column: 1 / span 4; position: relative; }
.mitch__photo img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-top-left-radius: 46% 36%; }
.mitch__copy { grid-column: 5 / span 8; display: grid; gap: 28px; align-content: center; padding-left: 24px; justify-items: start; }
@media (max-width: 860px) {
  .mitch__photo, .mitch__copy { grid-column: 1 / -1; }
  .mitch__copy { padding-left: 0; }
  .mitch__photo { aspect-ratio: 4 / 5; max-height: 70vh; margin-bottom: 48px; }
  .mitch__photo img { width: 100%; max-width: none; }
}

/* ---------------------------------------------------------- Contact */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.contact__info { grid-column: 1 / span 5; display: grid; gap: 28px; }
.contact__big { display: grid; gap: 6px; margin-top: 8px; }
.contact__big a {
  font-size: clamp(26px, 2.4vw, 42px); font-weight: 600; font-stretch: 100%; line-height: 1.15; letter-spacing: -.02em; color: var(--ink);
  text-decoration: none; overflow-wrap: anywhere; justify-self: start;
  background: linear-gradient(var(--cyan), var(--cyan)) 0 100% / 0 3px no-repeat; transition: background-size .4s var(--ease-out);
}
.contact__big a:hover, .contact__big a:focus-visible { background-size: 100% 3px; }
.contact__kvk { color: var(--soft); font-size: 15px; }
.contact__panel { grid-column: 7 / span 6; background: var(--stone); border-top-left-radius: clamp(64px, 8vw, 140px); padding: clamp(32px, 4.5vw, 64px); }
@media (max-width: 1024px) { .contact__info, .contact__panel { grid-column: 1 / -1; } .contact__panel { margin-top: 56px; } }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 15px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: var(--white);
  border: 1.5px solid transparent; border-radius: 10px; padding: 13px 14px; min-height: 50px;
  transition: border-color .25s;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.form.is-checked :invalid { border-color: #B3261E; }
.form .btn { justify-self: start; }
.form__hp { position: absolute; left: -9999px; }
.form__status { margin-top: 16px; color: var(--soft); }
.form__status a { color: var(--blue); }
.form__done { font-size: var(--fs-statement); font-weight: 520; line-height: 1.3; color: var(--ink); }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } }

/* campo azul logo depois de outro: uma regua separa os dois */
.chapter--deep + .cta-band .cta-band__inner { padding-top: clamp(56px, 6vw, 104px); border-top: 2px solid var(--rule-inverse); }

/* ------------------------------------------- titulos de secao: peso e posicao */
/* os titulos da coluna da esquerda tem o tamanho de h2 (os longos, marcados .h3, num tamanho
   intermediario). No desktop, o titulo para no alto da coluna enquanto o texto da direita passa:
   a coluna nao fica vazia. Nao e animacao: o titulo so fica parado no lugar */
.intro__title.h2, .intro__title.h3, .who__title, .focus__title, .includes__title { font-size: var(--fs-h2); line-height: 1.04; }
.intro__title.h3 { font-size: clamp(26px, 2.2vw, 40px); line-height: 1.12; }
.who__title { font-size: var(--fs-h2); }
@media (min-width: 1025px) {
  .intro__title, .who__title, .focus__title, .includes__title { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}