/* Four useful entry points. Every card is a real link, without a JS dependency. */
.project-direction { padding-block: 76px 60px; background: #f3f2ee; color: #142238; }
.direction-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 80px; margin-bottom: 38px; }
.project-direction .agency-kicker { color: #626a70; }
.project-direction .direction-heading h2 { font-size: clamp(34px, 3.7vw, 51px); }
.project-direction .direction-heading h2 em { color: #142238; }
.project-direction .direction-heading > p { max-width: 39ch; margin: 0; color: #5e6873; font-size: 13px; line-height: 1.85; }
.direction-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.direction-service { --service-accent: #2563eb; display: block; min-width: 0; padding: 26px 28px 29px; border: 1px solid #dcdedb; border-radius: 5px; background: #fff; color: #142238; text-decoration: none; transition: background .25s ease, border-color .25s ease; }
.direction-service--lojas-virtuais { --service-accent: #a75a32; }
.direction-service--landing-pages { --service-accent: #207561; }
.direction-service--sistemas-sob-medida { --service-accent: #6860a4; }
.direction-service-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.direction-service-index { color: #596774; font-size: 9px; font-weight: 600; letter-spacing: .1em; line-height: 1.6; text-transform: uppercase; }
.direction-service-index > span { margin-inline: 8px; color: #91989e; }
.direction-service-arrow { display: grid; flex: 0 0 33px; place-items: center; width: 33px; height: 33px; border: 1px solid #cbd2d6; border-radius: 50%; color: #142238; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.direction-service-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.direction-service-body { display: grid; grid-template-columns: minmax(0, 1fr) 155px; align-items: center; gap: 16px; }
.direction-service-copy { min-width: 0; }
.direction-service h3 { max-width: 13ch; margin: 0; color: #142238; font-size: clamp(24px, 2.5vw, 32px); font-weight: 550; letter-spacing: -.045em; line-height: 1.16; text-wrap: balance; }
.direction-service-copy > p { max-width: 32ch; margin: 13px 0 0; color: #5e6873; font-size: 12px; line-height: 1.75; }
.direction-service-visual { min-width: 0; }
.direction-preview { display: block; width: 100%; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.direction-preview-window { fill: #f8f9f8; stroke: #9aa9b4; stroke-width: 1; }
.direction-preview-rule { stroke: #cbd4d9; stroke-width: 1; }
.direction-preview-dot { fill: #81929f; }
.direction-preview-line { stroke: #8a9ba8; stroke-width: 2; }
.direction-preview-heading { stroke: #253c50; stroke-width: 3; }
.direction-preview-accent, .direction-preview-button { fill: var(--service-accent); }
.direction-preview-block { fill: #e2e8eb; }
.direction-preview-field { fill: #fff; stroke: #9aa9b4; stroke-width: 1; }
.direction-preview-mark { stroke: var(--service-accent); stroke-width: 5; }
.direction-preview-product { stroke: var(--service-accent); stroke-width: 1.5; }
.direction-preview-chart { stroke: var(--service-accent); stroke-width: 2; }
.direction-service:hover { border-color: #8d9aa4; background: #fcfcfa; }
.direction-service:hover .direction-service-arrow { border-color: var(--service-accent); background: var(--service-accent); color: #fff; }
.direction-service:focus-visible { outline: 3px solid #2563eb; outline-offset: 5px; }
.direction-other-service { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 29px; padding-top: 27px; border-top: 1px solid #d4d8d6; }
.direction-other-service p { margin: 0; color: #26384a; font-size: 12px; line-height: 1.8; }
.direction-other-service p span { color: #5e6873; }
.direction-other-service > a { display: inline-flex; flex-shrink: 0; align-items: center; gap: 20px; min-height: 44px; color: #142238; font-size: 12px; font-weight: 650; }
.direction-other-service > a:hover { text-decoration: underline; text-underline-offset: 5px; }
.direction-other-service > a:focus-visible { outline: 2px solid #2563eb; outline-offset: 5px; }
.direction-other-service svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) {
  .direction-heading { gap: 40px; }
  .direction-service { padding: 22px; }
  .direction-service-body { grid-template-columns: minmax(0, 1fr) 122px; gap: 10px; }
  .direction-service h3 { font-size: 26px; }
}
@media (max-width: 760px) {
  .project-direction { padding-block: 48px 36px; }
  .direction-heading { grid-template-columns: 1fr; gap: 19px; margin-bottom: 27px; }
  .project-direction .direction-heading h2 { font-size: clamp(31px, 7.7vw, 43px); }
  .project-direction .direction-heading > p { max-width: 42ch; font-size: 12px; }
  .direction-services { grid-template-columns: 1fr; gap: 12px; }
  .direction-service { padding: 20px 22px 24px; }
  .direction-service-top { gap: 14px; margin-bottom: 19px; }
  .direction-service-body { grid-template-columns: minmax(0, 1fr) minmax(98px, 33%); gap: 13px; }
  .direction-service h3 { font-size: clamp(23px, 6vw, 28px); }
  .direction-service-copy > p { margin-top: 10px; font-size: 11px; line-height: 1.7; }
  .direction-service-index { font-size: 8px; }
  .direction-other-service { align-items: start; flex-direction: column; gap: 9px; margin-top: 23px; padding-top: 22px; }
  .direction-other-service p { max-width: 38ch; font-size: 11px; }
  .direction-other-service p span { display: block; }
  .direction-other-service > a { gap: 30px; }
}
@media (max-width: 359px) {
  .direction-service { padding-inline: 17px; }
  .direction-service-body { grid-template-columns: minmax(0, 1fr) 87px; gap: 8px; }
  .direction-service h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .direction-service, .direction-service-arrow { transition: none; }
}