:root {
  --suv-ink: #16201f;
  --suv-night: #101a1a;
  --suv-night-2: #1a2928;
  --suv-mineral: #32c7b2;
  --suv-mineral-dark: #117f73;
  --suv-soil: #b67a36;
  --suv-soil-dark: #70451f;
  --suv-snow: #dcecf1;
  --suv-paper: #f1eee5;
  --suv-sand: #ddd0b6;
  --suv-line: rgba(22,32,31,.2);
  --suv-shadow: 0 30px 80px rgba(8,18,18,.22);
}

/* Removed oversized edge diagrams; section content keeps its own motion. */
.suv-page main section > [aria-hidden="true"] { display: none !important; }

html { scroll-behavior: smooth; }
.suv-page { overflow-x: clip; color: var(--suv-ink); background: var(--suv-paper); }
.suv-page main > section { position: relative; isolation: isolate; overflow: clip; scroll-margin-top: 90px; }
.suv-page main > section > .container,
.suv-page main > section > figure,
.suv-page main > section > [class$="-layout"],
.suv-page main > section > [class$="-grid"],
.suv-page main > section > [class$="-stage"],
.suv-page main > section > [class$="-head"],
.suv-page main > section > [class$="-heading"] { position: relative; z-index: 3; }
.suv-page h1,
.suv-page h2,
.suv-page h3,
.suv-page p,
.suv-page li,
.suv-page a,
.suv-page dd,
.suv-page summary { overflow-wrap: anywhere; }
.suv-page h1,
.suv-page h2 { margin: 0; text-wrap: balance; font-weight: 950; line-height: .96; letter-spacing: -3.8px; }
.suv-page h1 { max-width: 790px; font-size: clamp(58px,6.4vw,94px); }
.suv-page h2 { max-width: 890px; font-size: clamp(45px,5.3vw,73px); }
.suv-page h3 { text-wrap: balance; }
.suv-page a:focus-visible,
.suv-page summary:focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 6px var(--suv-mineral-dark); }
.suv-kicker { margin: 0 0 18px; color: var(--suv-soil); font-size: 11px; font-weight: 950; line-height: 1.25; letter-spacing: 2.1px; text-transform: uppercase; }
.suv-page figure { position: relative; margin: 0; overflow: hidden; }
.suv-page figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.suv-page figure figcaption { position: absolute; z-index: 4; right: 20px; bottom: 20px; display: grid; max-width: min(360px,calc(100% - 40px)); padding: 14px 17px; color: #fff; background: rgba(16,26,26,.9); border-left: 6px solid var(--suv-mineral); box-shadow: 0 12px 34px rgba(0,0,0,.25); }
.suv-page figure figcaption span { margin-bottom: 5px; color: #91ebdf; font-size: 9px; font-weight: 950; letter-spacing: 1.3px; text-transform: uppercase; }
.suv-page figure figcaption strong { font-size: 13px; line-height: 1.35; }

/* 1. Transfer case hero. */
.suv-hero { min-height: 1010px; padding: 145px 0 0; color: #fff; background: radial-gradient(circle at 7% 78%,rgba(182,122,54,.24),transparent 31%),linear-gradient(126deg,#0d1717 0 58%,#24413e 58% 100%); }
.suv-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .13; background-image: repeating-radial-gradient(ellipse at 0 100%,transparent 0 34px,rgba(255,255,255,.6) 35px 36px); }
.suv-hero-grid { display: grid; grid-template-columns: 1.13fr .87fr; gap: 0; align-items: stretch; min-height: 710px; }
.suv-hero-copy { position: relative; z-index: 5; padding: 23px clamp(42px,5vw,82px) 70px 0; }
.suv-hero-copy::after { content: "4×4"; position: absolute; z-index: -1; left: -7px; bottom: -15px; color: rgba(255,255,255,.035); font-size: clamp(130px,17vw,255px); font-weight: 950; line-height: .7; letter-spacing: -18px; white-space: nowrap; }
.suv-hero .breadcrumbs { margin-bottom: 65px; }
.suv-hero .breadcrumbs a,
.suv-hero .breadcrumbs span { color: #b9cfcb; }
.suv-lead { max-width: 720px; margin: 30px 0 31px; color: #bed0cd; font-size: 18px; line-height: 1.69; }
.suv-inputs { display: grid; grid-template-columns: repeat(3,1fr); max-width: 750px; margin: 0 0 31px; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.suv-inputs div { min-height: 88px; padding: 18px 16px 16px 0; }
.suv-inputs div + div { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.18); }
.suv-inputs dt { color: var(--suv-mineral); font: 950 10px/1 monospace; }
.suv-inputs dd { margin: 12px 0 0; color: #eaf4f2; font-size: 12px; font-weight: 850; line-height: 1.3; }
.suv-hero .hero-actions { flex-wrap: wrap; }
.suv-hero .button-ghost { color: #fff; border-color: rgba(255,255,255,.26); }
.suv-hero-photo { min-height: 710px; margin-right: -120px !important; border-radius: 96px 0 0; clip-path: polygon(9% 0,100% 0,100% 100%,0 100%,0 17%); box-shadow: var(--suv-shadow); }
.suv-hero-photo::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(145deg,rgba(16,26,26,.06),transparent 47%,rgba(16,26,26,.72)); }
.suv-hero-photo img { object-position: 53% center; }
.suv-anchor-strip { z-index: 8 !important; display: grid; grid-template-columns: repeat(5,1fr); margin-top: 35px; background: #e6dcc7; border-bottom: 9px solid var(--suv-soil); box-shadow: var(--suv-shadow); }
.suv-anchor-strip a { position: relative; padding: 24px 20px; color: var(--suv-ink); font-size: 12px; font-weight: 900; text-align: center; text-decoration: none; }
.suv-anchor-strip a + a { border-left: 1px solid rgba(22,32,31,.17); }
.suv-anchor-strip a::before { content: ""; position: absolute; left: 50%; bottom: -9px; width: 0; height: 9px; background: var(--suv-mineral); transform: translateX(-50%); transition: width .25s ease; }
.suv-anchor-strip a:hover::before,
.suv-anchor-strip a:focus-visible::before { width: 100%; }

/* 2. Soil strata and uneven cards. */
.suv-use { padding: 135px 0 150px; background: linear-gradient(180deg,#d5c5a7 0 34%,#a86d31 34% 35%,#efe8da 35% 100%); }
.suv-use::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 46%; opacity: .18; background-image: repeating-linear-gradient(168deg,transparent 0 24px,rgba(112,69,31,.65) 25px 26px); }
.suv-use-head { display: grid; grid-template-columns: 1.13fr .87fr; gap: 70px; align-items: end; margin-bottom: 58px; }
.suv-use-head > p { margin: 0 0 5px; color: #4d5c58; font-size: 17px; line-height: 1.7; }
.suv-surface-stage { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(35px,5vw,72px); align-items: center; }
.suv-use-photo { height: 735px; border-radius: 0 105px 0 0; border-bottom: 13px solid var(--suv-soil); box-shadow: var(--suv-shadow); }
.suv-use-photo img { object-position: 56% center; }
.suv-surface-cards { display: grid; grid-template-columns: 1.13fr .87fr; grid-template-areas:"soil snow" "soil slope" "rut slope" "note note"; gap: 14px; }
.suv-surface-cards article { position: relative; min-height: 172px; padding: 27px 26px 24px; overflow: hidden; color: #fff; background: var(--suv-night); border-top: 6px solid var(--suv-mineral); box-shadow: 0 17px 39px rgba(16,26,26,.12); }
.suv-surface-cards article::after { content: ""; position: absolute; right: -33px; bottom: -34px; width: 105px; height: 105px; border: 22px solid rgba(255,255,255,.05); border-radius: 42% 58% 46% 54%; }
.suv-surface-cards .is-soil { grid-area: soil; min-height: 286px; padding-top: 50px; background: #51371f; border-top-color: #dca75f; }
.suv-surface-cards .is-rut { grid-area: rut; }
.suv-surface-cards .is-snow { grid-area: snow; color: var(--suv-ink); background: var(--suv-snow); border-top-color: #8ab8c5; }
.suv-surface-cards .is-slope { grid-area: slope; align-self: stretch; padding-top: 47px; background: #1d3d38; }
.suv-surface-cards article > span { display: block; margin-bottom: 23px; color: var(--suv-mineral); font: 950 10px/1 monospace; }
.suv-surface-cards .is-soil > span { color: #f4bd74; }
.suv-surface-cards .is-snow > span { color: #317684; }
.suv-surface-cards h3 { margin: 0 0 10px; font-size: 22px; }
.suv-surface-cards article p { margin: 0; color: #aec2be; font-size: 13px; line-height: 1.58; }
.suv-surface-cards .is-snow p { color: #506866; }
.suv-work-note { grid-area: note; margin: 7px 0 0; padding: 22px 25px; color: #43524f; background: rgba(255,255,255,.56); border-left: 9px solid var(--suv-soil); font-size: 13px; line-height: 1.57; }
.suv-work-note strong { color: var(--suv-ink); }
.suv-work-note a { color: var(--suv-mineral-dark); font-weight: 900; }

/* 3. Torsion condition matrix. */
.suv-condition { padding: 136px 0 150px; color: #fff; background: linear-gradient(117deg,#172322 0 68%,#283d3a 68%); }
.suv-condition::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .14; background-image: linear-gradient(30deg,transparent 47%,rgba(50,199,178,.55) 48% 49%,transparent 50%); background-size: 52px 90px; }
.suv-condition-grid { display: grid; grid-template-columns: 1.09fr .91fr; gap: clamp(45px,7vw,96px); align-items: center; }
.suv-condition-copy > p:not(.suv-kicker) { max-width: 710px; margin: 27px 0 34px; color: #afc0bd; font-size: 17px; line-height: 1.68; }
.suv-condition-matrix { border: 10px solid #0a1212; background: #213330; transform: skewY(-1.2deg); box-shadow: 18px 22px 0 rgba(50,199,178,.08); }
.suv-condition-matrix article { display: grid; grid-template-columns: 105px 160px 1fr; gap: 17px; align-items: center; min-height: 110px; padding: 17px 20px; border-bottom: 1px solid rgba(255,255,255,.13); transform: skewY(1.2deg); }
.suv-condition-matrix article:last-child { border-bottom: 0; }
.suv-condition-matrix article:nth-child(even) { margin-left: 26px; background: rgba(50,199,178,.06); }
.suv-condition-matrix span { color: var(--suv-mineral); font: 950 9px/1.25 monospace; text-transform: uppercase; }
.suv-condition-matrix strong { font-size: 15px; }
.suv-condition-matrix p { margin: 0; color: #9eb1ad; font-size: 12px; line-height: 1.5; }
.suv-condition-photo { height: 780px; border-radius: 0 0 0 110px; border: 13px solid #0a1212; border-top-color: var(--suv-soil); box-shadow: var(--suv-shadow); }
.suv-condition-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(16,26,26,.68),transparent 55%); }
.suv-condition-photo img { object-position: 48% center; }

/* 4. Nested access zones. */
.suv-access { padding: 135px 0 155px; background: radial-gradient(circle at 83% 22%,rgba(50,199,178,.17),transparent 31%),#e9e6dc; }
.suv-access::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .16; background-image: repeating-linear-gradient(90deg,transparent 0 79px,rgba(22,32,31,.22) 80px 81px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(22,32,31,.18) 80px 81px); }
.suv-access-title { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: end; margin-bottom: 54px; }
.suv-access-title .suv-kicker { grid-column: 1 / -1; margin-bottom: -38px; }
.suv-access-title > p:last-child { margin: 0; color: #52615e; font-size: 17px; line-height: 1.68; }
.suv-access-layout { display: grid; grid-template-columns: 1.26fr .74fr; align-items: stretch; padding: 17px; background: #c9c4b8; box-shadow: var(--suv-shadow); }
.suv-access-road { display: grid; grid-template-columns: .84fr 1.16fr; grid-template-rows: auto auto 1fr; column-gap: 31px; padding: 36px; color: #fff; background: var(--suv-night-2); }
.suv-panel-index { color: var(--suv-mineral); font: 950 10px/1 monospace; letter-spacing: 1.3px; }
.suv-access-road h3,
.suv-access-work h3 { margin: 16px 0 23px; font-size: 31px; line-height: 1.05; letter-spacing: -1.2px; }
.suv-access-road ul { grid-column: 1; margin: 0; padding: 0; list-style: none; }
.suv-access-road li { position: relative; padding: 13px 0 13px 24px; color: #b5c5c2; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; line-height: 1.48; }
.suv-access-road li::before { content: ""; position: absolute; left: 0; top: 18px; width: 9px; height: 9px; background: var(--suv-soil); transform: rotate(45deg); }
.suv-access-road figure { grid-column: 2; grid-row: 1 / 4; min-height: 510px; border-radius: 0 70px 0 0; }
.suv-access-road figure img { object-position: 55% center; }
.suv-access-work { padding: 38px 30px; background: #d8e9e5; border-left: 10px solid var(--suv-mineral-dark); }
.suv-access-work .suv-panel-index { color: var(--suv-mineral-dark); }
.suv-access-work dl { margin: 0; border-top: 1px solid var(--suv-line); }
.suv-access-work dl div { padding: 16px 0; border-bottom: 1px solid var(--suv-line); }
.suv-access-work dt { color: var(--suv-soil-dark); font-size: 11px; font-weight: 950; text-transform: uppercase; }
.suv-access-work dd { margin: 5px 0 0; color: #536461; font-size: 13px; line-height: 1.45; }
.suv-access-work p { margin: 27px 0 18px; padding: 18px; color: #40504d; background: rgba(255,255,255,.62); border-left: 5px solid var(--suv-soil); font-size: 12px; line-height: 1.55; }
.suv-access-work a { color: var(--suv-mineral-dark); font-size: 12px; font-weight: 900; }

/* 5. Negative profile and five-shot strip. */
.suv-brief { padding: 135px 0 150px; color: #fff; background: linear-gradient(154deg,#0c1515 0 45%,#55391e 45% 58%,#172624 58%); }
.suv-brief::before { content: ""; position: absolute; z-index: -1; left: -8%; top: -19%; width: 58%; height: 72%; border: 70px solid rgba(50,199,178,.08); transform: rotate(-9deg); }
.suv-brief-layout { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(48px,7vw,102px); align-items: center; }
.suv-brief-photo { height: 805px; border: 14px solid #020606; border-radius: 105px 0 0; box-shadow: var(--suv-shadow); }
.suv-brief-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(16,26,26,.65),transparent 56%); }
.suv-brief-photo img { object-position: 51% center; }
.suv-brief-copy > p:not(.suv-kicker) { margin: 27px 0 32px; color: #b7c6c3; font-size: 17px; line-height: 1.67; }
.suv-shot-sequence { margin: 0; padding: 0; list-style: none; counter-reset: shot; }
.suv-shot-sequence li { display: grid; grid-template-columns: 62px 1fr; gap: 19px; align-items: center; min-height: 100px; padding: 13px 17px 13px 0; border-top: 1px solid rgba(255,255,255,.15); }
.suv-shot-sequence li:last-child { border-bottom: 1px solid rgba(255,255,255,.15); }
.suv-shot-sequence li:nth-child(even) { margin-left: 42px; }
.suv-shot-sequence span { display: grid; width: 48px; height: 48px; place-items: center; color: var(--suv-night); background: var(--suv-mineral); clip-path: polygon(50% 0,100% 25%,87% 100%,13% 100%,0 25%); font: 950 10px/1 monospace; }
.suv-shot-sequence strong { font-size: 17px; }
.suv-shot-sequence p { margin: 5px 0 0; color: #9fb2ae; font-size: 12px; line-height: 1.48; }

/* 6. Securing sequence over platform image. */
.suv-loading { min-height: 1050px; padding: 135px 0 150px; color: #fff; background: #111b1b; }
.suv-loading::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(10,18,18,.98) 0 49%,rgba(10,18,18,.76) 67%,rgba(10,18,18,.22)); }
.suv-loading-photo { position: absolute !important; z-index: 0 !important; inset: 0; }
.suv-loading-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(10,18,18,.7),transparent 56%); }
.suv-loading-photo img { object-position: 63% center; }
.suv-loading-layout { display: flex; min-height: 765px; align-items: center; }
.suv-loading-copy { position: relative; z-index: 5; width: min(770px,64%); padding: 49px 48px 44px; background: rgba(20,32,31,.91); border-right: 11px solid var(--suv-soil); box-shadow: var(--suv-shadow); backdrop-filter: blur(15px); }
.suv-loading-copy > p:not(.suv-kicker) { margin: 25px 0 30px; color: #b4c5c1; font-size: 16px; line-height: 1.68; }
.suv-loading-steps { margin: 0; padding: 0; list-style: none; }
.suv-loading-steps li { display: grid; grid-template-columns: 57px 1fr; gap: 17px; align-items: center; min-height: 94px; padding: 12px 17px; background: rgba(255,255,255,.035); border-bottom: 1px solid rgba(255,255,255,.13); }
.suv-loading-steps li:nth-child(even) { margin-left: 38px; background: rgba(50,199,178,.07); }
.suv-loading-steps b { display: grid; width: 42px; height: 42px; place-items: center; color: var(--suv-night); background: var(--suv-mineral); border-radius: 50%; font: 950 10px/1 monospace; }
.suv-loading-steps strong { display: block; font-size: 15px; }
.suv-loading-steps small { display: block; margin-top: 6px; color: #9fb1ad; font-size: 11px; line-height: 1.43; }

/* 7. Layered selection sheet. */
.suv-estimate { padding: 136px 0 150px; background: linear-gradient(90deg,#dbd6c9 0 71%,#b9864a 71%); }
.suv-estimate::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .17; background-image: repeating-radial-gradient(ellipse at 20% 100%,transparent 0 45px,rgba(22,32,31,.55) 46px 47px); }
.suv-estimate-layout { display: grid; grid-template-columns: 1.17fr .83fr; gap: 0; align-items: center; }
.suv-factor-sheet { position: relative; z-index: 5; margin-right: -58px; padding: 53px 66px 47px 52px; background: rgba(244,241,231,.96); border-top: 13px solid var(--suv-mineral-dark); box-shadow: var(--suv-shadow); }
.suv-factor-sheet::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: repeating-linear-gradient(0deg,var(--suv-soil) 0 18px,transparent 18px 31px); }
.suv-offer-copy { margin: 27px 0 31px; color: #4d5e5a; font-size: 16px; line-height: 1.68; }
.suv-factor-lines { border-top: 1px solid var(--suv-line); }
.suv-factor-lines > div { display: grid; grid-template-columns: 48px minmax(170px,.9fr) 1.1fr; gap: 16px; align-items: center; min-height: 76px; border-bottom: 1px solid var(--suv-line); }
.suv-factor-lines span { color: var(--suv-soil-dark); font: 950 9px/1 monospace; }
.suv-factor-lines strong { font-size: 14px; }
.suv-factor-lines i { color: #61706d; font-size: 11px; font-style: normal; line-height: 1.42; }
.suv-commercial-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 29px; }
.suv-commercial-links a { padding: 13px 16px; color: var(--suv-ink); background: #e1ddd2; border-left: 5px solid var(--suv-soil); font-size: 11px; font-weight: 900; text-decoration: none; }
.suv-commercial-links a:last-child { color: #fff; background: var(--suv-mineral-dark); border-left-color: var(--suv-night); }
.suv-estimate-photo { height: 790px; border-radius: 0 105px 0 0; border: 13px solid var(--suv-night); box-shadow: var(--suv-shadow); }
.suv-estimate-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(16,26,26,.68),transparent 55%); }
.suv-estimate-photo img { object-position: 53% center; }

/* 8. Snow line and two decisions. */
.suv-wait { padding: 135px 0 155px; background: linear-gradient(160deg,#dcecf1 0 51%,#b9d2d9 51%); }
.suv-wait::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .25; background-image: radial-gradient(circle,rgba(47,94,100,.42) 1px,transparent 2px); background-size: 25px 25px; }
.suv-wait-heading { display: grid; grid-template-columns: 1fr; max-width: 1030px; margin: 0 auto 55px; text-align: center; }
.suv-wait-heading h2 { margin-inline: auto; }
.suv-wait-stage { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(34px,5vw,72px); align-items: center; }
.suv-wait-photo { height: 740px; border-radius: 105px 0; border: 14px solid #f4f8f8; box-shadow: var(--suv-shadow); }
.suv-wait-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(16,26,26,.62),transparent 57%); }
.suv-wait-photo img { object-position: 49% center; }
.suv-wait-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.suv-wait-actions article { min-height: 375px; padding: 31px 28px; color: #fff; background: var(--suv-night); border-top: 10px solid var(--suv-mineral); }
.suv-wait-actions .is-stop { color: var(--suv-ink); background: #f1e6ce; border-top-color: var(--suv-soil); transform: translateY(45px); }
.suv-wait-actions article > span { display: inline-block; margin-bottom: 27px; padding: 8px 10px; color: var(--suv-night); background: var(--suv-mineral); font: 950 9px/1 monospace; letter-spacing: 1.1px; }
.suv-wait-actions .is-stop > span { color: #fff; background: var(--suv-soil-dark); }
.suv-wait-actions ul { margin: 0; padding: 0; list-style: none; }
.suv-wait-actions li { position: relative; padding: 15px 0 15px 22px; color: #b4c5c1; border-top: 1px solid rgba(255,255,255,.13); font-size: 12px; line-height: 1.49; }
.suv-wait-actions .is-stop li { color: #596763; border-color: rgba(22,32,31,.15); }
.suv-wait-actions li::before { content: "+"; position: absolute; left: 0; top: 14px; color: var(--suv-mineral); font-weight: 950; }
.suv-wait-actions .is-stop li::before { content: "×"; color: var(--suv-soil-dark); }
.suv-wait-actions > p { grid-column: 1 / -1; margin: 54px 0 0; padding: 22px 24px; color: #3e504d; background: rgba(255,255,255,.63); border-left: 9px solid var(--suv-mineral-dark); font-size: 13px; line-height: 1.57; }

/* 9. Spline handover checklist. */
.suv-handover { padding: 136px 0 150px; color: #fff; background: linear-gradient(115deg,#1a2928,#101a1a 63%,#392817); }
.suv-handover::before { content: ""; position: absolute; z-index: -1; left: -15%; bottom: -41%; width: 74%; aspect-ratio: 1; border: 100px solid rgba(50,199,178,.07); border-radius: 50%; }
.suv-handover-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(48px,7vw,94px); align-items: center; }
.suv-handover-copy > p:not(.suv-kicker):not(.suv-route-context) { margin: 27px 0 31px; color: #adbfbb; font-size: 17px; line-height: 1.67; }
.suv-handover-list { margin: 0; padding: 0; list-style: none; }
.suv-handover-list li { display: grid; grid-template-columns: 65px 1fr; gap: 19px; min-height: 112px; padding: 20px 22px 20px 0; border-top: 1px solid rgba(255,255,255,.14); }
.suv-handover-list li:nth-child(even) { margin-left: 47px; }
.suv-handover-list li > span { display: grid; width: 50px; height: 50px; place-items: center; color: var(--suv-night); background: var(--suv-soil); border-radius: 50%; font: 950 10px/1 monospace; box-shadow: 0 0 0 8px rgba(182,122,54,.12); }
.suv-handover-list strong { display: block; font-size: 16px; }
.suv-handover-list p { margin: 7px 0 0; color: #9eb0ac; font-size: 12px; line-height: 1.48; }
.suv-route-context { margin: 26px 0 0; padding: 18px 20px; color: #bed0cc; background: rgba(50,199,178,.08); border-left: 7px solid var(--suv-mineral); font-size: 13px; line-height: 1.55; }
.suv-route-context a { color: #7be0d2; font-weight: 900; }
.suv-handover-photo { height: 810px; border-radius: 0 0 110px 0; border: 14px solid #091111; border-top-color: var(--suv-soil); box-shadow: var(--suv-shadow); }
.suv-handover-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(16,26,26,.67),transparent 57%); }
.suv-handover-photo img { object-position: 55% center; }

/* 10. Gaiter FAQ bank with contact receipt. */
.suv-faq { padding: 136px 0 150px; background: radial-gradient(circle at 9% 8%,rgba(182,122,54,.15),transparent 28%),#eee9dd; }
.suv-faq::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .18; background-image: repeating-linear-gradient(90deg,transparent 0 31px,rgba(22,32,31,.19) 32px 33px); }
.suv-faq-head { display: grid; grid-template-columns: 1.17fr .83fr; gap: 70px; align-items: end; margin-bottom: 52px; }
.suv-faq-head > p { margin: 0; color: #566560; font-size: 16px; line-height: 1.66; }
.suv-faq-grid { display: grid; grid-template-columns: 1.16fr .84fr; gap: clamp(40px,6vw,82px); align-items: start; }
.suv-faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.suv-faq-list details { min-height: 205px; color: #fff; background: var(--suv-night); border-bottom: 8px solid var(--suv-soil); }
.suv-faq-list details:nth-child(3n+2) { background: #25423d; border-bottom-color: var(--suv-mineral); }
.suv-faq-list summary { position: relative; min-height: 105px; padding: 25px 58px 20px 23px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 900; line-height: 1.42; }
.suv-faq-list summary::-webkit-details-marker { display: none; }
.suv-faq-list summary::after { content: "+"; position: absolute; right: 17px; top: 20px; display: grid; width: 32px; height: 32px; place-items: center; color: var(--suv-night); background: var(--suv-mineral); border-radius: 50%; font-size: 20px; font-weight: 950; }
.suv-faq-list details[open] summary::after { content: "×"; color: #fff; background: var(--suv-soil); }
.suv-faq-list details p { margin: 0; padding: 0 23px 24px; color: #afc0bc; font-size: 12px; line-height: 1.6; }
.suv-contact-panel { background: var(--suv-night); box-shadow: var(--suv-shadow); }
.suv-contact-photo { height: 420px; clip-path: polygon(0 0,100% 0,100% 90%,72% 100%,0 94%); }
.suv-contact-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(16,26,26,.7),transparent 58%); }
.suv-contact-photo img { object-position: 51% center; }
.suv-contact-copy { padding: 34px 35px 39px; color: #fff; }
.suv-contact-copy > p { margin: 0 0 25px; color: #afc1bd; font-size: 13px; line-height: 1.6; }
.suv-phone { display: block; margin-bottom: 9px; color: var(--suv-mineral); font-size: clamp(25px,3vw,38px); font-weight: 950; line-height: 1; letter-spacing: -1.7px; }
.suv-contact-copy address { margin-bottom: 26px; color: #92a8a3; font-size: 12px; font-style: normal; }

@media (max-width: 1080px) {
  .suv-page h1 { font-size: clamp(54px,7vw,76px); letter-spacing: -4px; }
  .suv-page h2 { font-size: clamp(42px,5.6vw,60px); letter-spacing: -3px; }
  .suv-hero-grid { grid-template-columns: 1.05fr .95fr; }
  .suv-hero-copy { padding-right: 40px; }
  .suv-hero-photo { margin-right: -20px !important; }
  .suv-use-head,
  .suv-access-title,
  .suv-faq-head { gap: 42px; }
  .suv-surface-stage { grid-template-columns: .79fr 1.21fr; gap: 36px; }
  .suv-condition-grid,
  .suv-brief-layout,
  .suv-handover-grid { gap: 46px; }
  .suv-condition-matrix article { grid-template-columns: 82px 126px 1fr; }
  .suv-access-road { grid-template-columns: .9fr 1.1fr; padding: 28px; }
  .suv-factor-sheet { padding-right: 51px; }
  .suv-wait-stage { gap: 35px; }
  .suv-wait-actions article { padding-inline: 21px; }
  .suv-faq-grid { grid-template-columns: 1.2fr .8fr; gap: 39px; }
  .suv-faq-list summary { font-size: 14px; }
}

@media (max-width: 840px) {
  .suv-page main > section { scroll-margin-top: 76px; }
  .suv-page h1 { font-size: clamp(50px,9vw,70px); }
  .suv-page h2 { font-size: clamp(40px,7.1vw,57px); }
  .suv-page figure figcaption { right: 12px; bottom: 12px; max-width: calc(100% - 24px); }
  .suv-hero { min-height: 0; padding: 126px 0 0; }
  .suv-hero-grid { grid-template-columns: 1fr; }
  .suv-hero-copy { padding: 10px 0 55px; }
  .suv-hero .breadcrumbs { margin-bottom: 45px; }
  .suv-hero-photo { min-height: 600px; margin-right: 0 !important; border-radius: 75px 0 0; }
  .suv-anchor-strip { margin-top: 0; }
  .suv-use,
  .suv-condition,
  .suv-access,
  .suv-brief,
  .suv-estimate,
  .suv-wait,
  .suv-handover,
  .suv-faq { padding-block: 105px 120px; }
  .suv-use-head,
  .suv-access-title,
  .suv-faq-head { grid-template-columns: 1fr; gap: 22px; }
  .suv-access-title .suv-kicker { grid-column: auto; margin-bottom: -4px; }
  .suv-surface-stage,
  .suv-condition-grid,
  .suv-brief-layout,
  .suv-estimate-layout,
  .suv-wait-stage,
  .suv-handover-grid,
  .suv-faq-grid { grid-template-columns: 1fr; gap: 48px; }
  .suv-use-photo,
  .suv-condition-photo,
  .suv-brief-photo,
  .suv-estimate-photo,
  .suv-wait-photo,
  .suv-handover-photo { grid-row: 1; height: 590px; }
  .suv-surface-cards { max-width: 720px; margin-inline: auto; }
  .suv-condition-copy { grid-row: 2; }
  .suv-access-layout { grid-template-columns: 1fr; }
  .suv-access-road { min-height: 575px; }
  .suv-access-work { border-left: 0; border-top: 10px solid var(--suv-mineral-dark); }
  .suv-brief-copy { grid-row: 2; }
  .suv-loading { min-height: 1120px; padding-block: 105px 130px; }
  .suv-loading::before { background: linear-gradient(180deg,rgba(10,18,18,.97) 0 72%,rgba(10,18,18,.4)); }
  .suv-loading-layout { min-height: 875px; align-items: flex-start; }
  .suv-loading-copy { width: 100%; padding: 43px 40px; }
  .suv-factor-sheet { margin: 0; padding: 48px 47px; }
  .suv-estimate-photo { grid-row: 1; }
  .suv-wait-actions { max-width: 720px; margin-inline: auto; }
  .suv-handover-copy { grid-row: 2; }
  .suv-faq-list { grid-template-columns: 1fr 1fr; }
  .suv-contact-panel { display: grid; grid-template-columns: 1.05fr .95fr; }
  .suv-contact-photo { height: 430px; clip-path: none; }
  .suv-contact-copy { align-self: center; }
}

@media (max-width: 560px) {
  .suv-page h1 { font-size: clamp(42px,13.4vw,58px); line-height: .98; letter-spacing: -2.9px; }
  .suv-page h2 { font-size: clamp(37px,11.2vw,49px); line-height: 1; letter-spacing: -2.4px; }
  .suv-page .button { width: 100%; justify-content: center; text-align: center; }
  .suv-hero { padding-top: 110px; }
  .suv-lead { font-size: 16px; }
  .suv-inputs { grid-template-columns: 1fr; }
  .suv-inputs div { display: grid; grid-template-columns: 35px 1fr; align-items: center; min-height: 60px; padding: 13px 0; }
  .suv-inputs div + div { padding-left: 0; border-top: 1px solid rgba(255,255,255,.17); border-left: 0; }
  .suv-inputs dd { margin: 0; }
  .suv-hero-photo { min-height: 440px; border-radius: 48px 0 0; }
  .suv-anchor-strip { grid-template-columns: repeat(2,1fr); }
  .suv-anchor-strip a { padding: 18px 11px; }
  .suv-anchor-strip a + a { border-left: 0; }
  .suv-anchor-strip a:nth-child(even) { border-left: 1px solid rgba(22,32,31,.17); }
  .suv-anchor-strip a:nth-child(n+3) { border-top: 1px solid rgba(22,32,31,.17); }
  .suv-use,
  .suv-condition,
  .suv-access,
  .suv-brief,
  .suv-estimate,
  .suv-wait,
  .suv-handover,
  .suv-faq { padding-block: 82px 95px; }
  .suv-use-photo,
  .suv-condition-photo,
  .suv-brief-photo,
  .suv-estimate-photo,
  .suv-wait-photo,
  .suv-handover-photo { height: 430px; border-radius: 45px 0; border-width: 9px; }
  .suv-surface-cards { grid-template-columns: 1fr; grid-template-areas:"soil" "rut" "snow" "slope" "note"; }
  .suv-surface-cards .is-soil,
  .suv-surface-cards .is-rut,
  .suv-surface-cards .is-snow,
  .suv-surface-cards .is-slope { min-height: 0; padding: 24px; }
  .suv-condition-matrix { border-width: 7px; transform: none; }
  .suv-condition-matrix article { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding: 21px 18px; transform: none; }
  .suv-condition-matrix article:nth-child(even) { margin-left: 0; }
  .suv-access-layout { padding: 9px; }
  .suv-access-road { grid-template-columns: 1fr; grid-template-rows: auto; padding: 24px; }
  .suv-access-road figure { grid-column: 1; grid-row: auto; min-height: 340px; margin-top: 25px; border-radius: 0 42px 0 0; }
  .suv-access-work { padding: 29px 23px; }
  .suv-shot-sequence li:nth-child(even),
  .suv-loading-steps li:nth-child(even),
  .suv-handover-list li:nth-child(even) { margin-left: 0; }
  .suv-loading { min-height: 1190px; padding-block: 82px 105px; }
  .suv-loading::before { background: linear-gradient(180deg,rgba(10,18,18,.98) 0 78%,rgba(10,18,18,.45)); }
  .suv-loading-layout { min-height: 1000px; }
  .suv-loading-copy { padding: 32px 25px; border-right-width: 7px; }
  .suv-loading-steps li { padding-inline: 8px; }
  .suv-factor-sheet { padding: 38px 24px 35px 32px; }
  .suv-factor-lines > div { grid-template-columns: 34px 1fr; gap: 10px; padding: 13px 0; }
  .suv-factor-lines i { grid-column: 2; }
  .suv-commercial-links { display: grid; }
  .suv-wait-actions { grid-template-columns: 1fr; }
  .suv-wait-actions article { min-height: 0; }
  .suv-wait-actions .is-stop { transform: none; }
  .suv-wait-actions > p { margin-top: 0; }
  .suv-handover-list li { grid-template-columns: 56px 1fr; padding-right: 0; }
  .suv-faq-list { grid-template-columns: 1fr; }
  .suv-faq-list details { min-height: 0; }
  .suv-faq-list summary { min-height: 0; }
  .suv-contact-panel { grid-template-columns: 1fr; }
  .suv-contact-photo { height: 360px; }
  .suv-contact-copy { padding: 30px 24px 34px; }
}

@media (max-width: 380px) {
  .suv-page h1 { font-size: 39px; letter-spacing: -2.2px; }
  .suv-page h2 { font-size: 35px; letter-spacing: -1.9px; }
  .suv-page figure figcaption { padding: 10px 12px; border-left-width: 4px; }
  .suv-page figure figcaption strong { font-size: 11px; }
  .suv-hero .breadcrumbs { margin-bottom: 32px; }
  .suv-hero-photo { min-height: 365px; }
  .suv-use-photo,
  .suv-condition-photo,
  .suv-brief-photo,
  .suv-estimate-photo,
  .suv-wait-photo,
  .suv-handover-photo { height: 355px; }
  .suv-surface-cards article,
  .suv-access-road,
  .suv-access-work,
  .suv-loading-copy,
  .suv-factor-sheet,
  .suv-wait-actions article,
  .suv-contact-copy { padding-left: 19px; padding-right: 19px; }
  .suv-shot-sequence li { grid-template-columns: 49px 1fr; gap: 11px; }
  .suv-shot-sequence span { width: 41px; height: 41px; }
  .suv-loading { min-height: 1270px; }
  .suv-loading-steps li { grid-template-columns: 48px 1fr; }
  .suv-phone { font-size: 25px; letter-spacing: -1px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .suv-page *,
  .suv-page *::before,
  .suv-page *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; }
}