/* Homepage art direction. Secondary pages keep the existing visual system. */
.home-art-page {
  --home-red: #ef5748;
  --home-blue: #2878bf;
  --home-yellow: #efb648;
  --lime: #f2be46;
  --pink: #f5dfda;
  --lilac: #e1edf7;
}
.home-art-page ::selection { background: #f2be46; color: #10110f; }
.home-art-page .btn-lime:hover { background: #ffd166; }
.home-art-page main { background: #fff; }
.home-art-page .home-hero .hero-visual { background: var(--home-blue); }
.home-art-page .home-hero .hero-visual::before,
.home-art-page .home-hero .hero-visual::after { border-color: rgba(255,255,255,.22); }
.home-art-page .hm-window { box-shadow: 7px 8px 0 rgba(5,31,56,.3); }
.home-art-page .hm-navigation,
.home-art-page .hm-caption-row { color: #fff; }
.home-art-page .hm-tabs > button { border-bottom-color: rgba(255,255,255,.42); }
.home-art-page .hm-tabs > button[aria-selected="false"] { opacity: .8; }
.home-art-page .hm-tabs [data-motion-progress] { background: #fff; }
.home-art-page .hm-caption-row > span { color: #fff; }
.home-art-page .hm-tabs > button:focus-visible { outline-color: #fff; }
.home-art-page .trust-strip { background: #fff; border-bottom-color: var(--line); }
.home-art-page .trust-item:nth-child(1) svg { color: #1d6cb2; }
.home-art-page .trust-item:nth-child(2) svg { color: #ce3b31; }
.home-art-page .trust-item:nth-child(3) svg { color: #9b680d; }

/* The illustrations are drawn in ink; the color lives behind them. */
.home-art-page .home-module-grid { border-color: #cdd0cf; }
.home-art-page .home-module-card { padding-block: 34px 32px; border-color: #cdd0cf; }
.home-art-page .home-module-card:nth-child(n+4) { border-top-color: #cdd0cf; }
.home-art-page .home-module-card:hover { background: #f9f8f4; }
.home-art-page .home-module-card .module-number { color: #6d716b; }
.home-art-page .home-module-card h3 { font-size: clamp(24px, 2.1vw, 29px); }
.home-illustration { position: relative; width: 130px; height: 130px; isolation: isolate; margin: 0 0 26px; }
.home-illustration::before { content: ''; position: absolute; z-index: -1; inset: 15px 7px 8px 10px; border-radius: 49% 51% 50% 47%; background: var(--home-blue); transform: rotate(-8deg); }
.home-illustration-1::before { background: var(--home-yellow); transform: rotate(9deg); }
.home-illustration-2::before { background: var(--home-red); transform: rotate(-3deg); }
.home-illustration .ink-drawing { width: 128px; height: 128px; display: block; transition: transform .25s ease; }
.home-module-card:hover .ink-drawing { transform: translateY(-3px) rotate(-2deg); }

/* Portraits use a photographic duotone, with text kept in HTML. */
.home-art-page .home-agencies { padding-top: 24px; }
.home-agencies-heading { margin-bottom: 38px; }
.home-agencies-heading h2 { max-width: 1100px; margin-bottom: 22px; font-size: clamp(38px, 4.65vw, 66px); line-height: 1.04; }
.home-agencies-heading > p { font-size: 15px; color: var(--muted); max-width: 520px; }
.home-agency-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.home-agency-card { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-width: 0; min-height: 530px; aspect-ratio: .69; border-radius: 13px; background: var(--card-color); color: #fff; }
.home-agency-rouge { --card-color: var(--home-red); }
.home-agency-bleu { --card-color: var(--home-blue); }
.home-agency-jaune { --card-color: var(--home-yellow); }
.home-agency-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; filter: grayscale(1) contrast(1.08) brightness(1.14); mix-blend-mode: multiply; transition: transform .6s ease; }
.home-agency-card::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.2) 0%,transparent 30%,rgba(0,0,0,.05) 43%,rgba(0,0,0,.74) 100%); }
.home-agency-card:hover > img { transform: scale(1.035); }
.home-agency-brand { display: flex; align-items: center; gap: 10px; padding: 28px 24px; }
.home-agency-glyph { font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: -.08em; }
.home-agency-brand h3 { margin: 0; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.12; letter-spacing: -.045em; }
.home-agency-copy { position: absolute; left: 25px; right: 25px; bottom: 29px; }
.home-agency-type { font-size: 11px; margin-bottom: 15px; letter-spacing: .025em; }
.home-agency-copy .home-agency-line { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(23px, 2vw, 29px); line-height: 1.3; letter-spacing: -.035em; margin-bottom: 22px; }
.home-agency-topics { font-size: 11px; line-height: 1.5; color: #fff; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.35); }
.home-agency-note { margin-top: 19px; font-size: 12px; color: var(--muted); }

/* Repeat the same three colors without adding decorative copy or badges. */
.home-art-page .home-autopilot { background: #10110f; }
.home-art-page .home-autopilot .autonomy-card { box-shadow: 7px 7px 0 var(--home-red); }
.home-art-page .autonomy-card .mini-row > svg:last-child { color: #1767a9; }
.home-art-page .autonomy-card .mini-row small { color: #686f69; }
.home-art-page .autonomy-stamp { color: #59685e; }
.home-art-page .photo-card { border: 0; border-radius: 14px; background: var(--home-red); }
.home-art-page .photo-caption { background: #fff; border-color: #10110f; box-shadow: 4px 4px 0 var(--home-red); }
.home-art-page .home-integrations { background: #edf4fa; }
.home-art-page .security-feature { background: #f8e5b7; border-color: #d3b77a; border-radius: 14px; }
.home-art-page .security-large { border: 0; background: #fff; }
.home-art-page .security-lines > span { color: #625641; border-top-color: #d7c193; }
.home-art-page .security-lines b { color: #362b1a; }
.home-art-page .closing-cta { background: var(--home-red); }
.home-art-page .closing-cta .cta-bars { opacity: .13; }
.home-art-page .section-light:not(.home-integrations) { background: #f8f7f3; }

@media (max-width: 1000px) {
  .home-agency-grid { gap: 16px; }
  .home-agency-card { min-height: 470px; aspect-ratio: .62; }
  .home-agency-brand { padding: 24px 18px; gap: 8px; }
  .home-agency-brand h3 { font-size: 19px; }
  .home-agency-glyph { font-size: 28px; }
  .home-agency-copy { left: 18px; right: 18px; bottom: 24px; }
  .home-agency-copy .home-agency-line { font-size: 23px; }
  .home-illustration { width: 116px; height: 116px; }
  .home-illustration .ink-drawing { width: 114px; height: 114px; }
}
@media (max-width: 720px) {
  .home-agency-grid { grid-template-columns: 1fr; gap: 22px; max-width: 520px; margin-inline: auto; }
  .home-agency-card { aspect-ratio: .8; min-height: 470px; }
  .home-agency-brand { padding: 28px; }
  .home-agency-brand h3 { font-size: 26px; }
  .home-agency-copy { left: 28px; right: 28px; bottom: 30px; }
  .home-agency-copy .home-agency-line { font-size: 29px; }
  .home-agencies-heading h2 { font-size: clamp(36px, 7.5vw, 50px); }
  .home-agency-type, .home-agency-topics { font-size: 12px; }
}
@media (max-width: 580px) {
  .home-art-page .home-module-card,
  .home-art-page .home-module-card:first-child,
  .home-art-page .home-module-card:last-child { padding-block: 30px; }
  .home-art-page .home-module-card h3 { font-size: 29px; }
  .home-art-page .home-module-grid { border-bottom: 0; }
  .home-illustration { width: 120px; height: 120px; margin-bottom: 22px; }
  .home-illustration .ink-drawing { width: 118px; height: 118px; }
  .home-agencies-heading { margin-bottom: 30px; }
  .home-agency-card { min-height: 460px; }
  .home-agency-copy .home-agency-line { font-size: 27px; }
  .home-agency-brand { padding: 25px 22px; }
  .home-agency-brand h3 { font-size: 24px; }
  .home-agency-copy { left: 22px; right: 22px; }
  .home-agency-note { font-size: 11px; line-height: 1.55; }
}
@media (prefers-reduced-motion: reduce) {
  .home-illustration .ink-drawing, .home-agency-card > img { transition: none; }
  .home-module-card:hover .ink-drawing, .home-agency-card:hover > img { transform: none; }
}
