/*
 * invese-ui components + sections. Requires tokens.css.
 * Every section in sections/home.html uses only these classes.
 */

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { background: var(--inv-white); color: var(--inv-ink); font-family: var(--inv-text); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* =========================================================
   LAYOUT
   ========================================================= */
.i-wrap { width: min(var(--inv-max), 100% - 48px); margin-inline: auto; }
.i-section { padding-top: var(--inv-section); }
.i-dark { background: var(--inv-forest); color: #fff; position: relative; overflow: hidden; }
.i-tint { background: var(--inv-off); }
.i-title { color: var(--inv-ink); margin-bottom: var(--inv-title-gap); }
.i-title--center { text-align: center; margin-inline: auto; }
.i-dark .i-title { color: #fff; }
.i-text { color: var(--inv-body); }

/* Dotted "shadow" texture (single-dot tile). Size the tile with --dot. */
.i-dots { background: url(assets/decor/dot.png) 0 0 / var(--dot, 25px) var(--dot, 25px); }

/* Dashed wave lines behind dark sections (6% white) */
.i-waves { position: absolute; pointer-events: none; max-width: none; }

/* =========================================================
   BUTTONS: pills are the only rounded shapes
   ========================================================= */
.i-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625em;
  font: 400 1em/1.5 var(--inv-text); font-size: 16px;
  padding: 1.125em 1.5em; border-radius: var(--inv-pill); border: 0; cursor: pointer;
  background: var(--inv-brand); color: var(--inv-on-brand); white-space: nowrap;
  transition: background-color 150ms var(--inv-ease), color 150ms var(--inv-ease), border-color 150ms var(--inv-ease), scale 150ms var(--inv-ease);
}
.i-btn img { width: 1.5em; height: 1.5em; transition: translate 200ms var(--inv-ease), filter 150ms var(--inv-ease); }
.i-btn:hover { background: var(--inv-brand-hover); }
/* the long arrow on a brand button takes the button's text colour (--inv-on-brand); the mask is inline so it also works from file:// */
.i-btn:not(.i-btn--dark):not(.i-btn--outline) img {
  object-position: -99em 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8L22 12L18 16M2 12H22'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8L22 12L18 16M2 12H22'/%3E%3C/svg%3E") center / contain no-repeat;
}
.i-btn:active { scale: .97; }
.i-btn--dark { background: var(--inv-black); color: #fff; }
.i-btn--dark:hover { background: #2b2b2b; }
.i-btn--sm { padding: .75em 1em; gap: .75em; }              /* nav "Call us" */
.i-btn--sm img { width: 1em; height: 1em; }
.i-btn--outline {                                            /* "Read article →" */
  background: transparent; color: var(--inv-ink); border: 1px solid var(--inv-ink);
  padding: 11px 20px; font: 300 16px/24px var(--inv-display); letter-spacing: -.32px;
}
.i-btn--outline:hover { background: var(--inv-ink); color: #fff; }
.i-btn--outline:hover img { filter: brightness(0) invert(1); }
@media (hover: hover) and (pointer: fine) { .i-btn:hover img { translate: 4px 0; } }

/* Square 48px arrow buttons (carousels): sharp corners */
.i-sq { display: grid; place-items: center; width: 48px; height: 48px; border: 0; cursor: pointer; background: #fff; transition: background-color 150ms var(--inv-ease); }
.i-sq img { width: 16px; height: 16px; }
.i-sq--prev img { rotate: 180deg; }
.i-sq--outline { background: transparent; box-shadow: inset 0 0 0 1.2px var(--inv-off-2); }
.i-sq--dark { background: var(--inv-black); }
.i-sq:hover { background: var(--inv-off-2); }
.i-sq--dark:hover { background: #2b2b2b; }
.i-sq:disabled { opacity: .4; cursor: default; }
.i-arrows { display: flex; gap: 16px; }

.i-btn:focus-visible, .i-sq:focus-visible, .i-nav a:focus-visible, .i-field :focus-visible, .i-feat summary:focus-visible {
  outline: 2px solid var(--inv-brand); outline-offset: 3px;
}

/* =========================================================
   NAV
   ========================================================= */
.i-nav { display: flex; align-items: center; justify-content: space-between; position: relative; }
.i-nav__logo img { width: 114px; height: 24px; }
.i-nav__links { position: absolute; left: 50%; translate: -50% 0; display: flex; gap: 40px; list-style: none; padding: 0; color: var(--inv-body); }
.i-nav__links a { display: inline-flex; align-items: center; gap: 8px; transition: color 150ms var(--inv-ease); }
.i-nav__links a:hover { color: var(--inv-ink); }
.i-nav__links img { width: 16px; height: 16px; }
.i-nav .i-btn b { font-weight: 600; }

/* =========================================================
   01 HERO: one 1600×1389 canvas that scales with the viewport
   (the photo has stepped transparent cut-outs the UI sits in)
   ========================================================= */
.i-hero-wrap { container-type: inline-size; }
.i-hero { --u: calc(100cqw / 1600); position: relative; aspect-ratio: 1600 / 1389; font-size: calc(16 * var(--u)); }
.i-hero > * { position: absolute; }
.i-hero__photo { inset: 0; width: 100%; height: 100%; }
.i-hero__dots { left: calc(635 * var(--u)); top: calc(450 * var(--u)); width: calc(146 * var(--u)); height: calc(146 * var(--u)); --dot: calc(25 * var(--u)); }
.i-hero .i-nav { left: calc(48 * var(--u)); top: calc(24 * var(--u)); width: calc(1504 * var(--u)); height: calc(48 * var(--u)); font-size: max(13px, calc(16 * var(--u))); }
.i-hero .i-nav .i-btn { font-size: max(13px, calc(16 * var(--u))); }
.i-hero__copy { left: calc(48 * var(--u)); top: calc(176 * var(--u)); width: calc(507 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(36 * var(--u)); }
.i-hero__copy h1 { font-size: calc(64 * var(--u)); }
.i-hero__copy p { font-size: max(14px, calc(16 * var(--u))); width: calc(488 * var(--u)); margin-top: calc(24 * var(--u)); }
.i-hero__copy .i-btn { font-size: max(14px, calc(16 * var(--u))); }
.i-chip { top: calc(620 * var(--u)); height: calc(48 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); background: var(--inv-off); color: var(--inv-ink); font-size: max(12px, calc(16 * var(--u))); line-height: 1.5; white-space: nowrap; }
.i-chip img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.i-chip--1 { left: calc(416 * var(--u)); width: calc(205 * var(--u)); }
.i-chip--2 { left: calc(621 * var(--u)); width: calc(184 * var(--u)); }
.i-rating { left: calc(48 * var(--u)); top: calc(695 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: max(12px, calc(16 * var(--u))); line-height: 1.5; color: var(--inv-body); white-space: nowrap; }
.i-rating b { color: var(--inv-ink); font-weight: 600; }
.i-rating span { display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; background: var(--inv-off); }
.i-rating span img { width: calc(14 * var(--u)); }
.i-hero__stat { right: 0; top: calc(1115 * var(--u)); width: calc(328 * var(--u)); height: calc(274 * var(--u)); padding: calc(28 * var(--u)); background: var(--inv-off); display: flex; flex-direction: column; justify-content: space-between; }
.i-hero__stat strong { font: 400 calc(48 * var(--u))/1.167 var(--inv-display); color: var(--inv-ink); }
.i-hero__stat span { font-size: max(12px, calc(16 * var(--u))); color: var(--inv-body); }

/* =========================================================
   02 LOGOS: centered label + logo row fading out at both edges
   ========================================================= */
.i-logos { padding-top: 60px; text-align: center; }
.i-logos__label { color: var(--inv-ink); margin-bottom: 34px; }
.i-logos__row {
  display: flex; align-items: center; justify-content: space-between; gap: 48px; height: 22px; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 49.5%, transparent 100%);
  color: var(--inv-ink);
}
.i-logos__row > * { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 600 22px/1 var(--inv-display); letter-spacing: -.8px; white-space: nowrap; }
.i-logos__row svg { width: 20px; height: 20px; }

/* =========================================================
   03 ABOUT: hexagon photo left, copy + tile grid right
   ========================================================= */
.i-about { display: grid; grid-template-columns: 618fr 540fr; gap: 121px; align-items: center; }
.i-about__media img { width: 100%; height: auto; }
.i-about__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.i-about__copy h2 { margin-bottom: 32px; }
.i-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; width: 100%; margin-top: 4px; }
.i-tile { background: var(--inv-off); padding: 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 60px; grid-column: span 2; color: var(--inv-ink); }
.i-tile img { width: 16px; height: 16px; }
.i-tile--stat { grid-column: span 3; padding: 16px; gap: 40px; }
.i-tile--stat strong { font: 400 32px/1.25 var(--inv-display); color: var(--inv-ink); }
.i-tile--stat span { color: var(--inv-body); }

/* =========================================================
   04 SERVICES: dark forest, big white card + 2×2 checkerboard
   ========================================================= */
.i-services-sec { padding-block: var(--inv-section); }
.i-services-sec .i-title { max-width: 446px; }
.i-services-sec .i-waves { left: 0; top: -1%; width: 122.5%; height: 102%; }
.i-services { position: relative; display: grid; grid-template-columns: 600fr 680fr; }
.i-service-hero { position: relative; background: #fff; min-height: 576px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.i-service-hero__art { position: relative; width: 256px; height: 217px; }
.i-service-hero__art img { width: 256px; height: 200px; position: relative; }
.i-service-hero__art .i-dots { position: absolute; left: 142px; top: 116px; width: 100px; height: 101px; --dot: 21.57px; }
.i-service-hero__text { max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.i-service-grid { display: grid; grid-template-columns: 1fr 1fr; }
.i-service { padding: 24px; min-height: 288px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; background: #fff; }
.i-service:nth-child(1), .i-service:nth-child(4) { background: var(--inv-off); }
.i-service img { width: 28px; height: 28px; object-fit: contain; object-position: left; }
.i-service div { display: flex; flex-direction: column; gap: 16px; max-width: 292px; }
.i-service-hero h3, .i-service h3 { color: var(--inv-ink); }

/* =========================================================
   05 FEATURES: accordion list left, cut-out photo + advisor card right
   ========================================================= */
.i-features { display: grid; grid-template-columns: 572px 1fr; gap: 141px; align-items: center; }
.i-features__copy h2 { margin-bottom: 140px; }
.i-feats { display: flex; flex-direction: column; margin-bottom: 36px; }
.i-feat { position: relative; padding-block: 32px; border-bottom: 1px solid var(--inv-off-2); }
.i-feat:first-child { padding-top: 0; }
.i-feat:last-child { border-bottom: 0; padding-bottom: 0; }
.i-feat summary { list-style: none; cursor: pointer; color: var(--inv-ink); }
.i-feat summary::-webkit-details-marker { display: none; }
.i-feat p { margin-top: 24px; max-width: 508px; color: var(--inv-body); }
.i-feat[open]::after {                              /* progress bar on the open item's divider */
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 50%; background: var(--inv-ink);
}
.i-feats[data-auto] .i-feat[open]::after { width: 0; animation: i-progress var(--feat-time, 6s) linear forwards; }
.i-feats[data-auto]:hover .i-feat[open]::after { animation-play-state: paused; }
@keyframes i-progress { to { width: 100%; } }
.i-features__media { position: relative; width: 766px; height: 825px; }
.i-features__media > img { width: 766px; height: 800px; }
.i-features__media .i-dots { position: absolute; left: 42px; top: 575px; width: 151px; height: 152px; --dot: 28px; }
.i-advisor { position: absolute; left: 161px; top: 576px; width: 344px; padding: 24px; background: var(--inv-off); display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.i-faces { display: flex; }
.i-faces img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #fff; object-fit: cover; object-position: top; margin-right: -10px; }
.i-advisor h3 { margin: 24px 0 12px; max-width: 275px; color: var(--inv-ink); }
.i-advisor p { max-width: 275px; color: var(--inv-body); }
.i-advisor .i-btn { height: 44px; }

/* =========================================================
   06 CASE STUDY: tinted section, white card, pagination bar
   ========================================================= */
.i-case-sec { padding-bottom: 140px; }
.i-case-sec .i-title { max-width: 510px; }
.i-case { display: grid; grid-template-columns: 716fr 492fr; gap: 32px; background: #fff; padding: 8px 32px 8px 8px; }
.i-case__media { position: relative; min-height: 557px; }
.i-case__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 40%; }
.i-quote { position: absolute; left: 16px; bottom: 16px; width: 304px; background: #fff; padding: 16px; display: flex; flex-direction: column; gap: 20px; color: var(--inv-ink); }
.i-quote > img { width: 14px; height: 15px; margin-bottom: -8px; }
.i-quote hr { border: 0; border-top: .5px solid var(--inv-line); }
.i-quote__by { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.231; }
.i-quote__by img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: 55% 30%; }
.i-quote__by b { font-weight: 500; }
.i-quote__by span { font-weight: 300; color: var(--inv-body); }
.i-case__body { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 0 24px; }
.i-case__body > p { margin-top: 16px; color: var(--inv-body); }
.i-case__stats { width: 100%; margin: auto 0 60px; border-top: 1px solid var(--inv-off); }
.i-case__stats div { display: flex; align-items: center; justify-content: space-between; padding-block: 24px; border-bottom: 1px solid var(--inv-off); }
.i-case__stats strong { font: 400 32px/1.25 var(--inv-display); }
.i-case__stats span { width: 140px; color: var(--inv-body); }
.i-pager { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 36px; }
.i-pager__count { display: flex; align-items: center; gap: 40px; flex: 1; font: 300 20px/1.2 var(--inv-display); letter-spacing: -.8px; color: var(--inv-muted); white-space: nowrap; }
.i-pager__count b { font-weight: 500; color: var(--inv-ink); }
.i-pager__count::after { content: ""; flex: 1; height: 1px; background: var(--inv-off-2); }

/* =========================================================
   07 TESTIMONIALS: header + arrows, cards bleed off the right edge
   ========================================================= */
.i-reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: var(--inv-title-gap); }
.i-reviews-head h2 { max-width: 553px; }
.i-track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-right: calc((100% - 100vw) / 2); padding-right: calc((100vw - 100%) / 2);
}
.i-track::-webkit-scrollbar { display: none; }
.i-review { flex: 0 0 min(773px, 88vw); scroll-snap-align: start; background: var(--inv-off); padding: 36px; display: grid; grid-template-columns: 217px 1px 1fr; column-gap: 36px; min-height: 327px; }
.i-review > img { width: 217px; height: 217px; align-self: end; }
.i-review > i { background: var(--inv-off-2); }
.i-review__text { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; max-width: 412px; }
.i-review__text > img { width: 29px; height: 24px; margin-bottom: 20px; }
.i-review__text b { display: block; font-weight: 400; color: var(--inv-ink); }
.i-review__text span { color: var(--inv-body); }

/* =========================================================
   08 CONTACT: forest header, photo mosaic + tinted form bleeding right
   ========================================================= */
.i-contact-sec .i-waves { left: -21.24%; top: -1.1%; width: 121.24%; height: 106.15%; transform: scaleX(-1); }
.i-contact-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: var(--inv-title-gap); }
.i-contact-head h2 { max-width: 309px; }
.i-contact-info { display: flex; align-items: center; gap: 36px; white-space: nowrap; }
.i-contact-info a { display: inline-flex; align-items: center; gap: 12px; }
.i-contact-info img { width: 20px; height: 20px; }
.i-contact-info i { width: 1px; height: 24px; background: #fff; }
.i-contact { position: relative; display: grid; grid-template-columns: 27.3125% 13.4375% 1fr; grid-template-rows: auto auto; }
.i-contact__p1 { grid-area: 1 / 1; aspect-ratio: 1; }
.i-contact__p2 { grid-area: 2 / 2; aspect-ratio: 215 / 248; }
.i-contact__p1, .i-contact__p2 { width: 100%; height: 100%; object-fit: cover; }
.i-form { grid-area: 1 / 3 / 3 / 4; background: var(--inv-off); color: var(--inv-ink); padding: 60px 40px; }
.i-form > div { max-width: 748px; }
.i-form h3 { margin-bottom: 48px; }
.i-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 24px; margin-bottom: 24px; }
.i-field { position: relative; display: flex; align-items: center; gap: 10px; padding-bottom: 18px; border-bottom: .5px solid var(--inv-line); }
.i-field--full { grid-column: 1 / -1; }
.i-field > img { width: 16px; height: 16px; flex: none; }
.i-field input, .i-field select, .i-field textarea { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; line-height: 1.5; color: var(--inv-ink); appearance: none; outline: none; }
.i-field ::placeholder { color: var(--inv-muted); opacity: 1; }
.i-field select { cursor: pointer; padding-right: 26px; background: url(assets/icons/field-chevron.svg) right center / 16px no-repeat; }
.i-field select:invalid { color: var(--inv-muted); }
.i-field textarea { resize: none; height: 54px; align-self: flex-start; }
.i-field--area { align-items: flex-start; }
.i-field--area > img { margin-top: 4px; }
.i-field:focus-within { border-bottom-color: var(--inv-ink); }
.i-consent { display: flex; align-items: center; gap: 10px; color: var(--inv-muted); cursor: pointer; margin-bottom: 32px; }
.i-consent input { appearance: none; width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; background: url(assets/icons/field-check.svg) center / 16px no-repeat; border-radius: 50%; }
.i-consent input:checked { background-color: var(--inv-brand); background-image: none; box-shadow: inset 0 0 0 4px var(--inv-off); }
.i-form .i-btn { width: 298px; max-width: 100%; padding-inline: 32px; font: 300 16px/24px var(--inv-display); letter-spacing: -.32px; }

/* =========================================================
   09 BLOG: centered title, 3 cards
   ========================================================= */
.i-blog-sec .i-title { max-width: 411px; }
.i-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.i-post { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.i-post__img { width: 100%; aspect-ratio: 411 / 340; overflow: hidden; }
.i-post__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 600ms var(--inv-ease); }
.i-post:hover .i-post__img img { scale: 1.04; }
.i-post__meta { display: flex; align-items: center; gap: 12px; width: 100%; padding-bottom: 20px; border-bottom: .5px solid var(--inv-line); color: var(--inv-ink); }
.i-post__meta span { display: inline-flex; align-items: center; gap: 6px; }
.i-post__meta img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; object-position: top; }
.i-post__meta i { width: 1px; height: 12px; background: var(--inv-ink); }
.i-post h3 { margin: 8px 0 28px; color: var(--inv-ink); }
.i-post .i-btn img { width: 24px; height: 24px; }

/* =========================================================
   10 CTA: forest card with brand-green block pattern, straddling the footer
   ========================================================= */
.i-cta-wrap { padding-top: var(--inv-section); background: linear-gradient(#fff calc(var(--inv-section) + 237px), var(--inv-black) 0); }
.i-cta { position: relative; overflow: hidden; background: var(--inv-forest); color: #fff; min-height: 477px; display: flex; align-items: center; justify-content: flex-end; padding: 48px 148px 48px 48px; }
.i-cta .i-waves { left: -48px; top: 0; width: 995px; height: 476px; }
.i-cta__blocks { position: absolute; inset: 0 auto 0 0; width: 543px; }
.i-cta__blocks i { position: absolute; background: var(--inv-brand); }
.i-cta__copy { position: relative; width: 392px; display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.i-cta__copy h2 { max-width: 376px; }
.i-cta__copy p { margin-top: 32px; color: var(--inv-off); }

/* =========================================================
   11 FOOTER
   ========================================================= */
.i-footer { background: var(--inv-black); color: #fff; padding: 148px 0 24px; }
.i-footer__top { display: grid; grid-template-columns: 1fr 98px 172px 172px; column-gap: 220px; }
.i-footer__top img { width: 114px; height: 24px; }
.i-footer__col { display: flex; flex-direction: column; gap: 28px; }
.i-footer__col h3 { font: 400 20px/1.2 var(--inv-display); }
.i-footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; color: var(--inv-muted-on-dark); }
.i-footer__col a { transition: color 150ms var(--inv-ease); }
.i-footer__col a:hover { color: #fff; }
.i-footer__bottom { margin-top: 100px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--inv-muted-on-dark); }
.i-footer__social { display: inline-flex; align-items: center; gap: 12px; }
.i-footer__social span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; }
.i-footer__social img { width: 12px; height: 12px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1240px) {
  .i-features { grid-template-columns: 1fr; gap: 64px; }
  .i-features__copy h2 { margin-bottom: 56px; }
  .i-features__media { width: min(766px, 100%); height: auto; aspect-ratio: 766 / 825; justify-self: center; }
  .i-features__media > img { width: 100%; height: auto; }
  .i-features__media .i-dots { left: 5.5%; top: 69.7%; }
  .i-advisor { left: 21%; top: 69.8%; }
  .i-footer__top { grid-template-columns: 1fr repeat(3, auto); column-gap: 96px; }
}
@media (max-width: 1100px) {
  .i-about { grid-template-columns: 1fr; gap: 48px; }
  .i-about__media { max-width: 520px; }
  .i-services { grid-template-columns: 1fr; }
  .i-case { grid-template-columns: 1fr; padding: 8px 8px 24px; }
  .i-case__body { padding: 16px 16px 0; }
  .i-case__stats { margin: 32px 0; }
  .i-contact { grid-template-columns: 1fr 1fr; }
  .i-contact__p1 { grid-area: 1 / 1; }
  .i-contact__p2 { grid-area: 1 / 2; aspect-ratio: 1; }
  .i-form { grid-area: 2 / 1 / 3 / 3; }
  .i-cta { padding: 64px 48px; justify-content: flex-start; }
  .i-cta__blocks { opacity: .25; }
  .i-footer__top { grid-template-columns: repeat(3, auto); row-gap: 48px; column-gap: 64px; justify-content: start; }
  .i-footer__top > :first-child { grid-column: 1 / -1; }
}
/* hero: below 900px the canvas becomes a normal stacked layout */
@media (max-width: 900px) {
  .i-hero { aspect-ratio: auto; display: flex; flex-direction: column; font-size: 16px; padding: 16px 24px 0; }
  .i-hero > * { position: static; }
  .i-hero .i-nav { width: auto; height: auto; font-size: 14px; }
  .i-hero .i-nav .i-btn { font-size: 14px; }
  .i-nav__links { display: none; }
  .i-hero__copy { width: auto; margin-top: 56px; gap: 28px; }
  .i-hero__copy h1 { font-size: clamp(40px, 8vw, 56px); }
  .i-hero__copy p { width: auto; font-size: 16px; margin-top: 20px; }
  .i-hide-sm { display: none; }
  .i-hero__copy .i-btn { font-size: 16px; }
  .i-hero__dots { display: none; }
  .i-chip, .i-rating { display: none; }
  .i-hero__photo { order: 5; width: calc(100% + 48px); height: auto; margin: 40px -24px 0; }
  .i-hero__stat { order: 6; width: auto; height: auto; margin: 0 -24px; padding: 24px; gap: 32px; }
  .i-hero__stat strong { font-size: 40px; }
  .i-hero__stat span { font-size: 16px; }
  .i-logos__row { justify-content: flex-start; gap: 40px; mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); }
}
@media (max-width: 760px) {
  .i-tiles { grid-template-columns: 1fr 1fr; }
  .i-tile { grid-column: span 1; gap: 40px; }
  .i-tile:nth-child(3) { grid-column: span 2; }
  .i-tile--stat { grid-column: span 1; }
  .i-service-grid { grid-template-columns: 1fr; }
  .i-service:nth-child(n) { background: #fff; }
  .i-service:nth-child(odd) { background: var(--inv-off); }
  .i-service-hero { min-height: 480px; }
  .i-features__media { width: 100%; }
  .i-advisor { position: relative; left: auto; top: auto; width: auto; margin-top: -80px; margin-inline: 16px; }
  .i-features__media { aspect-ratio: auto; }
  .i-features__media .i-dots { display: none; }
  .i-quote { position: relative; left: auto; bottom: auto; width: auto; margin: 260px 12px 12px; }
  .i-case__media { min-height: 0; }
  .i-case__stats div { gap: 16px; }
  .i-pager { margin-top: 24px; }
  .i-pager__count { gap: 20px; }
  .i-reviews-head { flex-direction: column; align-items: flex-start; }
  .i-review { grid-template-columns: 1fr; row-gap: 24px; padding: 24px; }
  .i-review > img { width: 160px; height: 160px; }
  .i-review > i { display: none; }
  .i-contact-head { flex-direction: column; align-items: flex-start; }
  .i-contact-info { flex-direction: column; align-items: flex-start; gap: 12px; }
  .i-contact-info i { display: none; }
  .i-form { padding: 40px 24px; }
  .i-fields { grid-template-columns: 1fr; gap: 36px; }
  .i-posts { grid-template-columns: 1fr; gap: 56px; }
  .i-cta__copy { width: auto; }
  .i-cta { padding: 56px 24px; }
  .i-footer__top { grid-template-columns: 1fr 1fr; }
  .i-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Variants page
   sections/variants.html: alternative section layouts built only from the Invese DNA
   (square corners, brand pill, TikTok Sans 400 headings, stepped/hexagon photos, dot texture,
   forest bands with waves). Every class here starts with v-. Tokens only, no brand hex.
   ========================================================= */

/* ---- page chrome: top nav, intro, index, group heads, labels ---- */
.v-top { padding-top: 24px; }
.v-top .i-nav { height: 48px; }
.v-intro { padding-top: 96px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; }
.v-intro h1 { color: var(--inv-ink); margin-bottom: 24px; }
.v-intro p { max-width: 560px; }
.v-index { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 560px; }
.v-index a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: var(--inv-off); color: var(--inv-body); font-size: 14px; transition: background-color 150ms var(--inv-ease); }
.v-index a b { font-weight: 500; color: var(--inv-ink); }
.v-index a:hover { background: var(--inv-off-2); }
.v-group { margin-top: var(--inv-section); padding-top: 24px; border-top: 1px solid var(--inv-off-2); display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.v-group h2 { color: var(--inv-ink); }
.v-group h2 span { color: var(--inv-muted); }
.v-group p { max-width: 460px; color: var(--inv-body); }
.v-meta { margin-top: 96px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; border: 1px dashed var(--inv-line); scroll-margin-top: 24px; }
.v-group + .v-meta { margin-top: 48px; }
.v-meta__tag { padding: 4px 12px; background: var(--inv-black); color: #fff; font: 500 13px/1.5 var(--inv-text); }
.v-meta__txt { flex: 1 1 320px; min-width: 0; font-size: 14px; line-height: 1.6; color: var(--inv-body); }
.v-meta__txt b { color: var(--inv-ink); font-weight: 600; }
.v-cls { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
.v-cls li { padding: 1px 10px; background: var(--inv-off); font-size: 12px; line-height: 1.7; color: var(--inv-body); white-space: nowrap; }
.variant { margin-top: 48px; }
.v-end { height: var(--inv-section); }

/* ---- shared parts ---- */
.v-label { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; background: var(--inv-off); color: var(--inv-ink); font: 400 14px/1.5 var(--inv-text); }
.v-label img { width: 16px; height: 16px; }
.v-dark .v-label, .i-dark .v-label { background: color-mix(in srgb, #fff 10%, var(--inv-forest)); color: #fff; }
.v-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.v-link { display: inline-flex; align-items: center; gap: 10px; color: var(--inv-ink); font-size: 16px; border-bottom: 1px solid var(--inv-ink); padding-bottom: 2px; }
.v-link img { width: 18px; height: 18px; }
.i-btn.v-btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.i-btn.v-btn-ghost:hover { background: #fff; color: var(--inv-ink); }
.v-checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; color: var(--inv-body); }
.v-checks li { display: flex; align-items: flex-start; gap: 12px; }
.v-checks img { width: 16px; height: 16px; margin-top: 4px; flex: none; }
.v-rating { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--inv-body); }
.v-rating b { color: var(--inv-ink); font-weight: 600; }
.v-rating span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--inv-off); }
.v-rating span img { width: 14px; height: 14px; }
.v-num { font: 400 48px/1.167 var(--inv-display); color: var(--inv-ink); }
.v-head-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: var(--inv-title-gap); }
.v-head-split h2 { color: var(--inv-ink); max-width: 560px; }
.v-head-split > div { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 520px; justify-self: end; }
/* photo shapes: stepped (pixel) and hexagon cuts — the only non-rectangular photos */
.v-step { clip-path: polygon(0 16%, 18% 16%, 18% 0, 100% 0, 100% 74%, 82% 74%, 82% 88%, 64% 88%, 64% 100%, 0 100%); }
.v-step--b { clip-path: polygon(0 0, 70% 0, 70% 10%, 86% 10%, 86% 22%, 100% 22%, 100% 100%, 22% 100%, 22% 86%, 0 86%); }
.v-hex { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.v-photo { position: relative; }
.v-photo > img { width: 100%; height: 100%; object-fit: cover; }
.v-photo .i-dots { position: absolute; z-index: -1; }
.v-blocks { position: absolute; pointer-events: none; }
.v-blocks i { position: absolute; background: var(--inv-brand); }

/* =========================================================
   HERO A — hero-split: copy left, stepped photo right with tiles in the steps
   ========================================================= */
.v-hero-split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.v-hero-split__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.v-hero-split__copy h1 { color: var(--inv-ink); margin-top: 28px; }
.v-hero-split__copy .i-text { margin-top: 24px; max-width: 470px; }
.v-hero-split__media { position: relative; isolation: isolate; aspect-ratio: 720 / 640; }
.v-hero-split__media > img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.v-hero-split__media .i-dots { position: absolute; z-index: -1; left: -48px; bottom: -48px; width: 168px; height: 168px; }
.v-hero-split__stat { position: absolute; left: 0; bottom: 0; top: 72%; width: 36%; background: var(--inv-off); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.v-hero-split__stat strong { font: 400 48px/1.167 var(--inv-display); color: var(--inv-ink); }
.v-hero-split__stat span { color: var(--inv-body); font-size: 14px; }
.v-hero-split__note { position: absolute; right: 0; top: 0; width: 34%; height: 16%; background: #fff; padding: 0 0 0 24px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.v-hero-split__note p:first-child { color: var(--inv-muted); }
.v-hero-split__note p:last-child { color: var(--inv-ink); }
.v-hero-split .v-step { clip-path: polygon(0 0, 66% 0, 66% 16%, 100% 16%, 100% 100%, 36% 100%, 36% 72%, 0 72%); }

/* =========================================================
   HERO B — hero-statement: centred headline over a checkerboard strip of square tiles
   ========================================================= */
.v-hero-statement { text-align: center; }
.v-hero-statement__copy { display: flex; flex-direction: column; align-items: center; gap: 36px; max-width: 880px; margin-inline: auto; }
.v-hero-statement__copy h1 { color: var(--inv-ink); margin-top: 28px; }
.v-hero-statement__copy .i-text { margin-top: 24px; max-width: 560px; margin-inline: auto; }
.v-hero-statement .v-actions { justify-content: center; }
.v-strip { margin-top: 80px; display: grid; grid-template-columns: repeat(4, 1fr); text-align: left; }
.v-strip > * { aspect-ratio: 1; min-width: 0; }
.v-strip img { width: 100%; height: 100%; object-fit: cover; }
.v-strip__tile { padding: 28px; display: flex; flex-direction: column; justify-content: space-between; background: var(--inv-off); color: var(--inv-ink); }
.v-strip__tile strong { font: 400 48px/1.167 var(--inv-display); }
.v-strip__tile span { color: var(--inv-body); max-width: 220px; }
.v-strip__tile--dark { background: var(--inv-forest); color: #fff; position: relative; overflow: hidden; }
.v-strip__tile--dark span { color: var(--inv-off); }
.v-strip__tile--dark .v-blocks { right: 0; top: 0; width: 120px; height: 96px; transform: scaleX(-1); }

/* =========================================================
   HERO C — hero-forest: full-bleed dark band, hexagon photo, facts row
   ========================================================= */
.v-hero-forest { padding: 120px 0 0; }
.v-hero-forest .i-waves { left: -10%; top: 0; width: 120%; height: 100%; }
.v-hero-forest__grid { position: relative; display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; }
.v-hero-forest__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.v-hero-forest__copy h1 { color: #fff; margin-top: 28px; }
.v-hero-forest__copy p { color: var(--inv-off); margin-top: 24px; max-width: 520px; }
.v-hero-forest__media { position: relative; isolation: isolate; aspect-ratio: 520 / 600; max-width: 520px; width: 100%; justify-self: end; }
.v-hero-forest__media > img { width: 100%; height: 100%; object-fit: cover; }
.v-hero-forest__media .i-dots { position: absolute; z-index: -1; left: -48px; bottom: 6%; width: 160px; height: 160px; filter: invert(1); }
.v-facts { position: relative; margin-top: 96px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid color-mix(in srgb, #fff 16%, var(--inv-forest)); }
.v-facts > div { padding: 32px 32px 40px 0; display: flex; flex-direction: column; gap: 12px; }
.v-facts > div + div { padding-left: 32px; border-left: 1px solid color-mix(in srgb, #fff 16%, var(--inv-forest)); }
.v-facts strong { font: 400 32px/1.25 var(--inv-display); color: #fff; }
.v-facts span { color: var(--inv-off); }

/* =========================================================
   HERO D — hero-metric: proof-led, no photo: copy + bento of square number tiles and a stepped chart
   ========================================================= */
.v-hero-metric { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: stretch; }
.v-hero-metric__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 48px; padding-block: 24px; }
.v-hero-metric__copy h1 { color: var(--inv-ink); margin-top: 28px; }
.v-hero-metric__copy .i-text { margin-top: 24px; max-width: 460px; }
.v-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 12px; }
.v-bento > * { background: var(--inv-off); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 200px; min-width: 0; }
.v-bento span { color: var(--inv-body); font-size: 14px; }
.v-bento strong { font: 400 32px/1.25 var(--inv-display); color: var(--inv-ink); }
.v-bento__chart { grid-column: 1 / -1; min-height: 300px; background: #fff; box-shadow: inset 0 0 0 1px var(--inv-off-2); }
.v-bento__chart header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.v-bento__chart header strong { font-size: 48px; line-height: 1.167; display: block; margin-top: 8px; }
.v-bento__chart svg { width: 100%; height: 150px; display: block; color: var(--inv-ink); }
.v-seg { display: flex; }
.v-seg span { padding: 6px 12px; font-size: 13px; color: var(--inv-body); box-shadow: inset 0 0 0 1px var(--inv-off-2); }
.v-seg span.on { background: var(--inv-black); color: #fff; box-shadow: none; }
.v-bento__dark { background: var(--inv-forest); }
.v-bento .v-bento__dark strong { color: #fff; }
.v-bento .v-bento__dark span { color: var(--inv-off); }

/* =========================================================
   FEATURES A — features-checker: split head + 3×2 checkerboard of numbered tiles
   ========================================================= */
.v-checker { display: grid; grid-template-columns: repeat(3, 1fr); box-shadow: 0 0 0 1px var(--inv-off-2); }
.v-checker article { min-height: 300px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; background: #fff; }
.v-checker article:nth-child(even) { background: var(--inv-off); }
.v-checker header { display: flex; align-items: center; justify-content: space-between; }
.v-checker header img { width: 28px; height: 28px; }
.v-checker header span { font: 300 20px/1.2 var(--inv-display); color: var(--inv-muted); }
.v-checker h3 { color: var(--inv-ink); margin-bottom: 16px; }
.v-checker p { color: var(--inv-body); max-width: 320px; }

/* =========================================================
   FEATURES B — features-rows: alternating stepped photo / copy rows
   ========================================================= */
.v-rows { display: flex; flex-direction: column; gap: 120px; }
.v-row { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }
.v-row--flip .v-row__media { order: 2; }
.v-row__media { position: relative; isolation: isolate; aspect-ratio: 600 / 520; }
.v-row__media > img { width: 100%; height: 100%; object-fit: cover; }
.v-row__media .i-dots { position: absolute; z-index: -1; width: 150px; height: 150px; }
.v-row:not(.v-row--flip) .v-row__media .i-dots { left: -36px; top: -36px; }
.v-row--flip .v-row__media .i-dots { right: -36px; bottom: -36px; }
.v-row__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 520px; }
.v-row__copy h3 { color: var(--inv-ink); }
.v-row__copy > p { color: var(--inv-body); }
.v-row__copy .v-checks { margin: 8px 0 12px; }

/* =========================================================
   FEATURES C — features-index: sticky title left, big numbered list right
   ========================================================= */
.v-index-feat { display: grid; grid-template-columns: 5fr 7fr; gap: 96px; align-items: start; }
.v-index-feat__head { position: sticky; top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.v-index-feat__head h2 { color: var(--inv-ink); }
.v-index-feat__head p { color: var(--inv-body); max-width: 420px; }
.v-index-feat ol { list-style: none; padding: 0; border-top: 1px solid var(--inv-off-2); }
.v-index-feat li { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 36px 24px 36px 0; border-bottom: 1px solid var(--inv-off-2); transition: background-color 150ms var(--inv-ease), padding 150ms var(--inv-ease); }
.v-index-feat li:hover { background: var(--inv-off); padding-left: 24px; }
.v-index-feat li > span { font: 400 48px/1 var(--inv-display); color: var(--inv-ink); }
.v-index-feat h3 { color: var(--inv-ink); margin-bottom: 12px; }
.v-index-feat li p { color: var(--inv-body); max-width: 520px; }

/* =========================================================
   PROOF A — proof-band: forest band, 4 big numbers between hairlines + logo row
   ========================================================= */
.v-proof-band { padding: 120px 0; }
.v-proof-band .i-waves { right: -10%; top: 0; width: 90%; height: 100%; transform: scaleX(-1); }
.v-proof-band .i-wrap { position: relative; }
.v-proof-band h2 { color: #fff; max-width: 560px; margin-bottom: var(--inv-title-gap); }
.v-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid color-mix(in srgb, #fff 16%, var(--inv-forest)); border-bottom: 1px solid color-mix(in srgb, #fff 16%, var(--inv-forest)); }
.v-stats > div { padding: 40px 24px 40px 0; display: flex; flex-direction: column; gap: 48px; }
.v-stats > div + div { padding-left: 24px; border-left: 1px solid color-mix(in srgb, #fff 16%, var(--inv-forest)); }
.v-stats strong { font: 400 64px/1.08 var(--inv-display); color: #fff; }
.v-stats span { color: var(--inv-off); max-width: 220px; }
.v-proof-band .i-logos__row { margin-top: 56px; color: #fff; }

/* =========================================================
   PROOF B — proof-quote: one big quote panel + rating tile + short quote tile
   ========================================================= */
.v-quote { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.v-quote__main { background: var(--inv-off); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; min-height: 480px; }
.v-quote__main > img { width: 36px; height: 30px; }
.v-quote__main blockquote { color: var(--inv-ink); max-width: 720px; margin-top: 32px; }
.v-quote__by { display: flex; align-items: center; gap: 16px; }
.v-quote__by img { width: 72px; height: 72px; object-fit: cover; }
.v-quote__by b { display: block; font-weight: 400; color: var(--inv-ink); }
.v-quote__by span { color: var(--inv-body); font-size: 14px; }
.v-quote__side { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.v-quote__side > * { padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.v-quote__rate { background: var(--inv-forest); color: #fff; position: relative; overflow: hidden; }
.v-quote__rate strong { font: 400 64px/1.08 var(--inv-display); }
.v-quote__rate p { color: var(--inv-off); }
.v-quote__rate .v-blocks { right: 0; top: 0; width: 120px; height: 96px; }
.v-quote__mini { box-shadow: inset 0 0 0 1px var(--inv-off-2); }
.v-quote__mini blockquote { color: var(--inv-ink); }
.v-quote__mini p { color: var(--inv-body); font-size: 14px; }

/* =========================================================
   PRICING — pricing-plans: three square plans, the middle one on forest
   ========================================================= */
.v-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.v-plan { background: var(--inv-off); padding: 32px; display: flex; flex-direction: column; gap: 28px; position: relative; overflow: hidden; }
.v-plan h3 { color: var(--inv-ink); }
.v-plan__price { display: flex; align-items: baseline; gap: 10px; color: var(--inv-ink); padding-bottom: 28px; border-bottom: 1px solid var(--inv-off-2); }
.v-plan__price strong { font: 400 48px/1.167 var(--inv-display); }
.v-plan__price span, .v-plan > p:not(.v-plan__price) { color: var(--inv-body); }
.v-plan .v-checks { flex: 1; }
.v-plan .i-btn { align-self: flex-start; }
.v-plan--dark { background: var(--inv-forest); }
.v-plan--dark h3, .v-plan--dark .v-plan__price { color: #fff; }
.v-plan--dark .v-plan__price { border-color: color-mix(in srgb, #fff 16%, var(--inv-forest)); }
.v-plan--dark .v-plan__price span, .v-plan--dark > p:not(.v-plan__price), .v-plan--dark .v-checks { color: var(--inv-off); }
.v-plan--dark .v-checks img { filter: brightness(0) invert(1); }
.v-plan__flag { position: absolute; right: 0; top: 0; padding: 8px 16px; background: var(--inv-brand); color: var(--inv-on-brand); font-size: 13px; }
.v-plans-note { margin-top: 24px; text-align: center; color: var(--inv-muted); font-size: 13px; }

/* =========================================================
   STEPS — steps-line: four steps on one hairline with square markers
   ========================================================= */
.v-steps { padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.v-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--inv-off-2); }
.v-steps li { position: relative; list-style: none; padding-right: 32px; display: flex; flex-direction: column; gap: 16px; }
.v-steps li::before { content: ""; width: 12px; height: 12px; background: var(--inv-ink); margin-bottom: 32px; }
.v-steps li:last-child::before { background: var(--inv-brand); }
.v-steps li > span { color: var(--inv-muted); font: 300 20px/1.2 var(--inv-display); }
.v-steps h3 { color: var(--inv-ink); }
.v-steps p { color: var(--inv-body); }
.v-steps-foot { margin-top: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; background: var(--inv-off); color: var(--inv-ink); flex-wrap: wrap; }

/* =========================================================
   FAQ — faq-split: title + help tile left, hairline accordion right
   ========================================================= */
.v-faq { display: grid; grid-template-columns: 5fr 7fr; gap: 96px; align-items: start; }
.v-faq__head { display: flex; flex-direction: column; gap: 32px; }
.v-faq__head h2 { color: var(--inv-ink); }
.v-faq__head > p { color: var(--inv-body); max-width: 420px; }
.v-faq__help { background: var(--inv-off); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 380px; }
.v-faq__help h3 { color: var(--inv-ink); margin-top: 20px; }
.v-faq__help p { color: var(--inv-body); margin-top: 8px; }
.v-faq__list { border-top: 1px solid var(--inv-off-2); }
.v-faq__list details { border-bottom: 1px solid var(--inv-off-2); }
.v-faq__list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; color: var(--inv-ink); }
.v-faq__list summary::-webkit-details-marker { display: none; }
.v-faq__list summary::after { content: ""; flex: none; width: 32px; height: 32px; background: var(--inv-off) linear-gradient(currentColor, currentColor) center / 12px 1px no-repeat; box-shadow: none; }
.v-faq__list details:not([open]) summary::after { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 12px 1px, 1px 12px; background-position: center, center; background-repeat: no-repeat; }
.v-faq__list details p { color: var(--inv-body); padding: 0 56px 28px 0; max-width: 640px; }
.v-faq__list summary:focus-visible { outline: 2px solid var(--inv-brand); outline-offset: 3px; }

/* =========================================================
   CTA A — cta-form: tinted panel, copy left, underline email field right, pixel blocks in the corner
   ========================================================= */
.v-cta-form { position: relative; overflow: hidden; background: var(--inv-off); padding: 80px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.v-cta-form .v-blocks { right: 0; top: 0; width: 200px; height: 104px; }
.v-cta-form h2 { color: var(--inv-ink); max-width: 500px; }
.v-cta-form > div > p { color: var(--inv-body); margin-top: 24px; max-width: 460px; }
.v-cta-form form { position: relative; display: flex; flex-direction: column; gap: 24px; }
.v-cta-form .i-field { gap: 12px; }
.v-cta-form__row { display: flex; align-items: flex-end; gap: 24px; }
.v-cta-form__row .i-field { flex: 1; }
.v-cta-form small { color: var(--inv-muted); font-size: 13px; }

/* =========================================================
   CTA B — cta-center: forest band, centred title, mirrored pixel blocks in both corners
   ========================================================= */
.v-cta-center { position: relative; overflow: hidden; background: var(--inv-forest); color: #fff; padding: 120px 48px; text-align: center; }
.v-cta-center .i-waves { left: 0; top: 0; width: 100%; height: 100%; }
.v-cta-center .v-blocks { width: 240px; height: 200px; }
.v-cta-center .v-blocks--l { left: 0; bottom: 0; transform: scaleY(-1); }
.v-cta-center .v-blocks--r { right: 0; top: 0; transform: scaleX(-1); }
.v-cta-center__copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 36px; max-width: 620px; margin-inline: auto; }
.v-cta-center__copy p { color: var(--inv-off); margin-top: 24px; }
.v-cta-center .v-actions { justify-content: center; }

/* Variants page — responsive */
@media (max-width: 1100px) {
  .v-intro { grid-template-columns: 1fr; }
  .v-index { justify-content: flex-start; }
  .v-hero-split, .v-hero-metric, .v-hero-forest__grid, .v-row, .v-index-feat, .v-faq, .v-cta-form, .v-head-split, .v-quote { grid-template-columns: 1fr; gap: 56px; }
  .v-head-split > div { justify-self: start; }
  .v-hero-split__media .i-dots, .v-row__media .i-dots { left: -16px; right: auto; }
  .v-row--flip .v-row__media { order: 0; }
  .v-hero-forest__media { justify-self: start; max-width: 440px; }
  .v-index-feat__head { position: static; }
  .v-strip { grid-template-columns: repeat(2, 1fr); }
  .v-checker { grid-template-columns: repeat(2, 1fr); }
  .v-checker article:nth-child(n) { background: #fff; }
  .v-checker article:nth-child(4n+1), .v-checker article:nth-child(4n) { background: var(--inv-off); }
  .v-stats { grid-template-columns: repeat(2, 1fr); }
  .v-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .v-stats > div:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, #fff 16%, var(--inv-forest)); }
  .v-plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .v-steps { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
  .v-quote__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .v-intro { padding-top: 56px; }
  .v-meta { margin-top: 64px; }
  .v-hero-split__stat { width: 46%; padding: 16px; }
  .v-hero-split__stat strong, .v-strip__tile strong, .v-num, .v-bento__chart header strong { font-size: 34px; }
  .v-hero-split__note, .v-hero-split__media .i-dots { display: none; }
  .v-hero-split .v-step { clip-path: polygon(0 0, 100% 0, 100% 100%, 48% 100%, 48% 64%, 0 64%); }
  .v-hero-split__stat { top: 64%; width: 48%; }
  .v-hero-split__stat span { font-size: 12px; }
  .v-strip__tile--dark .v-blocks { width: 64px; height: 52px; }
  .v-strip { margin-top: 56px; }
  .v-strip__tile { padding: 16px; }
  .v-strip__tile span { font-size: 14px; }
  .v-hero-forest { padding-top: 72px; }
  .v-facts { grid-template-columns: 1fr; margin-top: 64px; }
  .v-facts > div, .v-facts > div + div { padding: 24px 0; border-left: 0; }
  .v-facts > div + div { border-top: 1px solid color-mix(in srgb, #fff 16%, var(--inv-forest)); }
  .v-bento { grid-template-columns: 1fr 1fr; }
  .v-bento > * { min-height: 160px; padding: 16px; }
  .v-bento__dark { grid-column: 1 / -1; min-height: 120px !important; }
  .v-bento__chart header { flex-direction: column; }
  .v-checker { grid-template-columns: 1fr; }
  .v-checker article:nth-child(n) { background: #fff; min-height: 0; }
  .v-checker article:nth-child(even) { background: var(--inv-off); }
  .v-rows { gap: 80px; }
  .v-row__media .i-dots { display: none; }
  .v-index-feat li { grid-template-columns: 1fr; gap: 12px; padding-right: 0; }
  .v-index-feat li > span { font-size: 34px; }
  .v-proof-band { padding: 80px 0; }
  .v-stats { grid-template-columns: 1fr; }
  .v-stats > div, .v-stats > div + div { padding: 28px 0; border-left: 0; gap: 16px; }
  .v-stats > div + div { border-top: 1px solid color-mix(in srgb, #fff 16%, var(--inv-forest)); }
  .v-stats strong, .v-quote__rate strong { font-size: 48px; }
  .v-quote__main { padding: 28px; min-height: 0; }
  .v-quote__side { grid-template-columns: 1fr; }
  .v-steps { grid-template-columns: 1fr; }
  .v-steps::before { display: none; }
  .v-steps li::before { margin-bottom: 12px; }
  .v-faq__list details p { padding-right: 0; }
  .v-cta-form { padding: 112px 24px 56px; }
  .v-cta-form .v-blocks { width: 136px; height: 80px; }
  .v-cta-form__row { flex-direction: column; align-items: stretch; }
  .v-cta-center { padding: 96px 24px; }
  .v-cta-center .v-blocks { width: 120px; height: 100px; }
}

/* hover: the underlined link takes the brand accent and its arrow nudges */
.v-link { transition: color .2s, border-color .2s; }
.v-link img { transition: transform .25s cubic-bezier(.16,1,.3,1); }
.v-link:hover, .v-link:focus-visible { color: var(--inv-accent-ink, var(--inv-ink)); border-bottom-color: var(--inv-accent, currentColor); border-bottom-width: 2px; padding-bottom: 1px; }
.v-link:hover img, .v-link:focus-visible img { transform: translateX(6px); }

/* links without an arrow icon: an arrow slides in on hover */
.v-link:not(:has(img))::after { content: "\2192"; display: inline-block; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s cubic-bezier(.16,1,.3,1); }
.v-link:not(:has(img)):hover::after, .v-link:not(:has(img)):focus-visible::after { opacity: 1; transform: none; }

/* Balanced headline breaks (Farhan 2026-10-10): every heading that wraps splits into even lines, never a long line
   over a short one. Never remove. */
h1, h2, h3, h4, h5, h6, [class*="t-h"], .h1, .h2, .h3, blockquote, blockquote p, .statement, [class*="quote"] p { text-wrap: balance; }