/*
 * 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: #fff; white-space: nowrap;
  transition: background-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); }
.i-btn:hover { background: var(--inv-brand-hover); }
.i-btn:active { scale: .97; }
.i-btn--dark { background: var(--inv-black); }
.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); }
.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); }
.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; }
}