/* The vinyl wrap page (docs/superpowers/specs/2026-10-05-vinyl-wrap-page-design.md §3), in the
   homepage's section language: one dark stage, big condensed headings, red-slash kickers and panels
   with a 1px light border. Every rule is scoped to body.wrap-page, the way css/home.css is scoped to
   body.home (the root's scroll padding through html:has(> body.wrap-page)); the shared header, footer
   and phone bar keep their own styles. */

/* The page's blocks set display, which beats the browser's own [hidden] rule. The submit button
   stays hidden until js/wrap-estimate.js runs, and the form and the thank-you swap places. */
body.wrap-page [hidden] { display: none !important; }

/* Whatever the page scrolls to lands clear of the sticky header: 73px tall, but up to 111px on tablets,
   where its links wrap. The root's scroll padding covers the field a failed check points at: the
   browser and focus() scroll it to the top edge, and its label sits about 30px above it. The sections'
   negative margin keeps anchors (#wrap-estimate above all) landing 96px down, where they always have.
   :has() reaches the root through the body's scope class. */
html:has(> body.wrap-page) { scroll-padding-top: 120px; }
body.wrap-page main section[id] { scroll-margin-top: -24px; }
@media (min-width: 768px) and (max-width: 1023px) {
  html:has(> body.wrap-page) { scroll-padding-top: 160px; }
  body.wrap-page main section[id] { scroll-margin-top: -64px; }
}
/* Below 640px the fixed phone bar (96px) covers the foot of the screen: a line scrolled into view from
   below, the send error above all, stops above it. */
@media (max-width: 639px) {
  html:has(> body.wrap-page) { scroll-padding-bottom: 104px; }
}

body.wrap-page .wp-in { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
body.wrap-page main h1 em,
body.wrap-page main h2 em { font-style: normal; color: var(--red-hot); }
body.wrap-page .wp-star { color: var(--gold); }
body.wrap-page .wp-ctas { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 30px; }

/* ---- Hero: the wrap photo, full width, fading into the dark from the bottom only. Below 1024px it shows
   whole (3:2) with the copy under it. From 1024px it fits the first screen under the 73px header: the
   panel is the whole photo's height or the screen's, whichever is less (never under 480px or 30vw, so the
   whole car always fits), and the photo covers it, cropping sky and ground. The panel's box is set before
   the photo loads; the photo is 100vw wide at every width, which the head's preload and the picture's
   sizes say. ---- */
body.wrap-page .wp-hero { position: relative; overflow: clip; }
body.wrap-page .wp-hero-photo { position: relative; width: 100%; aspect-ratio: 3 / 2; -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 84%, transparent 100%); }
body.wrap-page .wp-hero-photo img { display: block; width: 100%; height: auto; }
body.wrap-page .wp-hero-grid { position: relative; z-index: 1; display: flex; align-items: center; }
body.wrap-page .wp-hero-copy { min-width: 0; }
body.wrap-page .wp-hero h1 { width: max-content; max-width: 100%; font: 700 clamp(2.9rem, 5.4vw, 4.3rem) / 0.9 var(--disp); text-transform: uppercase; color: var(--text); }
body.wrap-page .wp-hero h1 .kicker { margin-bottom: 24px; }
body.wrap-page .wp-statement,
body.wrap-page .wp-statement > span { display: block; }
body.wrap-page .wp-short { margin-top: 22px; color: var(--muted); font-size: 1.12rem; line-height: 1.5; }
body.wrap-page .wp-proof { margin-top: 18px; color: var(--faint); font-size: .86rem; }

/* From 1024px the photo and the copy share one grid cell: the copy over the photo's top left, in the page's
   column and above the car's front, on a soft scrim (a dark ellipse behind the copy, never a column) with a
   dark halo on its lines. The small lines turn up to full white and the ghost button takes a dark fill, so
   each reads on the photo. The headline shrinks with the screen's height, so the copy clears the car's
   front on short laptop screens too. */
@media (min-width: 1024px) {
  body.wrap-page .wp-hero { display: grid; }
  body.wrap-page .wp-hero-photo,
  body.wrap-page .wp-hero-grid { grid-area: 1 / 1; }
  body.wrap-page .wp-hero-photo { max-height: max(480px, 30vw, 100svh - 73px); }
  body.wrap-page .wp-hero-photo img { height: 100%; object-fit: cover; object-position: 50% 60%; }
  body.wrap-page .wp-hero-grid { align-self: start; padding-top: clamp(20px, 4.5vw - 26px, 60px); }
  body.wrap-page .wp-hero-copy { position: relative; max-width: 560px; }
  body.wrap-page .wp-hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -170px -220px -50px -360px; background: radial-gradient(closest-side, rgba(10, 10, 14, .7), rgba(10, 10, 14, .68) 55%, rgba(10, 10, 14, .6) 78%, rgba(10, 10, 14, .3) 90%, rgba(10, 10, 14, 0)); pointer-events: none; }
  body.wrap-page .wp-hero h1 { font-size: clamp(2.9rem, min(5.4vw, 8.5svh), 4.3rem); text-shadow: 0 0 2px rgba(10, 10, 14, .95), 0 1px 5px rgba(10, 10, 14, .95), 0 0 10px rgba(10, 10, 14, .9), 0 0 24px rgba(10, 10, 14, .5); }
  body.wrap-page .wp-hero h1 .kicker { margin-bottom: 18px; color: var(--text); }
  body.wrap-page .wp-short { margin-top: 16px; color: var(--text); text-shadow: 0 0 2px rgba(10, 10, 14, .9), 0 0 6px rgba(10, 10, 14, .75), 0 0 14px rgba(10, 10, 14, .5); }
  body.wrap-page .wp-hero .wp-ctas { margin-top: 22px; }
  body.wrap-page .wp-hero .ghost-btn { border-color: rgba(255, 255, 255, .3); background: rgba(10, 10, 14, .55); }
  body.wrap-page .wp-hero .ghost-btn:hover { border-color: rgba(255, 255, 255, .45); background: rgba(10, 10, 14, .75); }
  body.wrap-page .wp-hero .wp-proof { margin-top: 14px; color: var(--text); text-shadow: 0 0 2px rgba(10, 10, 14, 1), 0 0 4px rgba(10, 10, 14, .95), 0 0 10px rgba(10, 10, 14, .8), 0 0 18px rgba(10, 10, 14, .5); }
}
/* Short laptop screens: the copy closes up. */
@media (min-width: 1024px) and (max-height: 800px) {
  body.wrap-page .wp-hero-grid { padding-top: 20px; }
  body.wrap-page .wp-hero h1 .kicker { margin-bottom: 12px; }
  body.wrap-page .wp-short { margin-top: 12px; font-size: 1.04rem; }
  body.wrap-page .wp-hero .wp-ctas { margin-top: 16px; }
  body.wrap-page .wp-hero .cta { padding-block: 12px; }
  body.wrap-page .wp-hero .wp-proof { margin-top: 10px; }
}

/* ---- The five finishes: one look each, shared by the finish columns and the form's chips ---- */
body.wrap-page .wp-sw-gloss { --sw: .5; background: linear-gradient(125deg, rgba(255, 255, 255, 0) 14.6%, rgba(255, 255, 255, .94) 15.4%, rgba(255, 255, 255, .94) 17.6%, rgba(255, 255, 255, 0) 18.4%), linear-gradient(125deg, rgba(255, 255, 255, 0) 21.2%, rgba(255, 255, 255, .34) 21.8%, rgba(255, 255, 255, 0) 22.8%), radial-gradient(140% 40% at 20% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #1b1c21 0%, #060608 38%, #030304 72%, #0e0e11 100%); }
body.wrap-page .wp-sw-satin { --sw: .26; background: radial-gradient(120% 46% at 24% 20%, rgba(255, 214, 214, .32), rgba(255, 255, 255, 0) 72%), radial-gradient(90% 30% at 70% 78%, rgba(255, 200, 200, .1), rgba(255, 255, 255, 0) 70%), linear-gradient(175deg, #a5181d 0%, #7f1116 46%, #5a0b0f 100%); }
body.wrap-page .wp-sw-matte { --sw: .05; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"), linear-gradient(175deg, #586049 0%, #4a5140 58%, #40463a 100%); }
body.wrap-page .wp-sw-shift { --sw: .3; background: radial-gradient(110% 40% at 26% 16%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%), linear-gradient(162deg, #4a1c9c 0%, #6c33d8 24%, #3558d4 48%, #149ea6 72%, #0d7a6b 100%) 0 0 / 100% 150%; animation: wp-shift 8s ease-in-out infinite; animation-delay: .9s; }
@keyframes wp-shift { 0%, 100% { background-position: 0 0, 0 0%; } 50% { background-position: 0 0, 0 100%; } }
body.wrap-page .wp-sw-chrome { --sw: .55; background: linear-gradient(125deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .75) 32%, rgba(255, 255, 255, 0) 34.5%), linear-gradient(180deg, #fafbfc 0%, #d9dde2 10%, #9ba2ab 22%, #3d424a 33%, #15171b 38%, #6f7680 40.5%, #e8ebee 47%, #fff 52%, #b7bdc4 62%, #5f656e 76%, #2a2e34 84%, #8e959e 93%, #d2d6db 100%); }

/* ---- Sections ---- */
body.wrap-page .wp-sect { position: relative; padding-block: 110px; border-top: 1px solid var(--line-soft); }
body.wrap-page .wp-sect h2 { max-width: 22ch; margin-top: 18px; font: 700 clamp(2.6rem, 5vw, 4rem) / .92 var(--disp); text-transform: uppercase; color: var(--text); }
body.wrap-page .wp-lede { max-width: 62ch; margin-top: 22px; color: var(--muted); font-size: 1.12rem; line-height: 1.6; }
/* Chrome delete: the copy on the left, the Mazda 3 before and after side by side on the right; below
   1024px the pair sits under the copy. The shots are not aligned, so there is no slider. */
body.wrap-page .wp-cd { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
body.wrap-page .wp-cd-copy { min-width: 0; }
body.wrap-page .wp-cd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.wrap-page .wp-cd-fig { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--panel); }
body.wrap-page .wp-cd-fig img { display: block; width: 100%; height: auto; }
body.wrap-page .wp-cd-fig figcaption { position: absolute; left: 8px; bottom: 8px; padding: 6px 10px; border-left: 2px solid var(--red); border-radius: 2px; background: rgba(10, 10, 14, .82); color: var(--text); font: 600 .72rem / 1 var(--body); letter-spacing: .2em; text-transform: uppercase; }
body.wrap-page .wp-panel h3 { font-size: 1.6rem; letter-spacing: .01em; color: var(--text); }
body.wrap-page .wp-panel p { margin-top: 12px; color: var(--muted); font-size: 1rem; line-height: 1.55; }
body.wrap-page .wp-grid3,
body.wrap-page .wp-grid4 { display: grid; gap: 16px; margin-top: 44px; }
body.wrap-page .wp-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.wrap-page .wp-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Each "What we wrap" panel opens with the look it describes. */
body.wrap-page .wp-look { height: 74px; margin: -14px -12px 24px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 2px; }
body.wrap-page .wp-look-color { background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .35) 33%, rgba(255, 255, 255, 0) 37%), linear-gradient(90deg, #c4161c 0 33.4%, #75787c 33.4% 66.7%, transparent 66.7%), linear-gradient(110deg, #6c33d8 66%, #3558d4 80%, #149ea6 100%); }
body.wrap-page .wp-look-chrome { background: linear-gradient(120deg, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, .6) 17%, rgba(255, 255, 255, 0) 21%), linear-gradient(104deg, transparent 0 52%, #0a0b0d 52%), linear-gradient(180deg, #fafbfc 0%, #c9ced4 18%, #5a6069 40%, #1a1d22 47%, #e8ebee 55%, #9aa1aa 78%, #d2d6db 100%); }
body.wrap-page .wp-look-stripes { background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .22) 33%, rgba(255, 255, 255, 0) 37%), linear-gradient(90deg, #17181c 0 36%, var(--red) 36% 45%, #17181c 45% 55%, var(--red) 55% 64%, #17181c 64%); }

/* ---- Proof: the five-star chip ---- */
body.wrap-page .wp-proof-strip { padding-block: 36px; border-top: 1px solid var(--line-soft); }
body.wrap-page .wp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--text); font-size: .9rem; transition: border-color .15s ease; }
body.wrap-page .wp-chip:hover { border-color: rgba(220, 38, 38, .5); }

/* ---- The finishes: five layered columns (bars on tablets and phones), one open at a time ----
   The base rules are the page without JavaScript: five finishes stacked, every panel shown. js/wrap-finishes.js
   adds .wp-on to turn them into the component, and the markup already has Gloss open, so the first paint
   matches. The entrance (.wp-pre, then released once when the section scrolls into view) moves only opacity
   and position, so scrolling can never change a width or a height; a visitor's own click does. ---- */
body.wrap-page #finishes { background: radial-gradient(60% 50% at 30% 70%, rgba(220, 38, 38, .09), rgba(220, 38, 38, 0) 70%), var(--bg); }
body.wrap-page .wp-cols { margin-top: 44px; }
body.wrap-page .wp-col { position: relative; overflow: hidden; margin-top: 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
body.wrap-page .wp-chead { margin: 0; }
body.wrap-page .wp-chead button { position: relative; display: block; width: 100%; height: 64px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
body.wrap-page .wp-chead button:focus-visible { outline: 3px solid var(--text); outline-offset: -6px; }
body.wrap-page .wp-col.wp-sw-chrome .wp-chead button:focus-visible { outline-color: #16181c; }
body.wrap-page .wp-vname { display: flex; align-items: center; height: 100%; padding: 0 20px; font: 700 1.9rem/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--text); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); white-space: nowrap; }
body.wrap-page .wp-col.wp-sw-chrome .wp-vname { color: #16181c; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
body.wrap-page .wp-chev { display: none; }
body.wrap-page .wp-plate { padding: 24px 20px 26px; background: #101016; }
body.wrap-page .wp-lead { margin: 0; color: var(--text); font: 700 2rem/1.05 var(--disp); text-transform: uppercase; }
body.wrap-page .wp-plate dl { margin: 18px 0 0; }
body.wrap-page .wp-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
body.wrap-page .wp-plate dt { padding-top: 3px; color: var(--faint); font: 600 .66rem/1.2 var(--body); letter-spacing: .2em; text-transform: uppercase; }
body.wrap-page .wp-plate dd { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }
body.wrap-page .wp-plate .wp-ctas { margin-top: 18px; }
body.wrap-page .wp-col:nth-child(1) { --i: 0; }
body.wrap-page .wp-col:nth-child(2) { --i: 1; }
body.wrap-page .wp-col:nth-child(3) { --i: 2; }
body.wrap-page .wp-col:nth-child(4) { --i: 3; }
body.wrap-page .wp-col:nth-child(5) { --i: 4; }

/* The component: a closed finish's panel is out of sight and out of the tab order. */
body.wrap-page .wp-cols.wp-on .wp-chead button { cursor: pointer; }
body.wrap-page .wp-cols.wp-on .wp-chead button:hover { background: rgba(255, 255, 255, .05); }
body.wrap-page .wp-cols.wp-on .wp-plate { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
body.wrap-page .wp-cols.wp-on .wp-col.wp-open .wp-plate { opacity: 1; visibility: visible; transition: opacity .35s ease .4s, visibility 0s 0s; }
body.wrap-page .wp-cols.wp-on .wp-col::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, var(--sw)) 50%, rgba(255, 255, 255, 0) 59%) 100% 0 / 300% 100% no-repeat; }
body.wrap-page .wp-cols.wp-on .wp-col.wp-open::after { opacity: 1; animation: wp-sweep 5s cubic-bezier(.45, .05, .35, 1) .6s infinite; }
@keyframes wp-sweep { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0% 0; } }
body.wrap-page .wp-cols.wp-on .wp-chev { display: block; }

/* Desktop: five tall columns side by side, overlapping a little; the open one is wide and shows its plate. */
@media (min-width: 1024px) {
  body.wrap-page .wp-cols.wp-on { display: flex; height: 480px; }
  body.wrap-page .wp-cols.wp-on .wp-col { flex: 1 1 0; min-width: 72px; margin: 0; z-index: calc(1 + var(--i)); box-shadow: -16px 0 30px rgba(0, 0, 0, .55); transition: flex-grow .65s cubic-bezier(.4, .1, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * .07s), opacity .6s ease calc(var(--i) * .07s); }
  body.wrap-page .wp-cols.wp-on .wp-col + .wp-col { margin-left: -16px; }
  body.wrap-page .wp-cols.wp-on .wp-col.wp-open { flex-grow: 7; z-index: 10; box-shadow: -18px 0 38px rgba(0, 0, 0, .6), 18px 0 38px rgba(0, 0, 0, .5); }
  body.wrap-page .wp-cols.wp-on .wp-chead button { position: absolute; inset: 0; z-index: 2; height: auto; }
  body.wrap-page .wp-cols.wp-on .wp-vname { position: absolute; top: 26px; left: 0; right: 0; justify-content: flex-start; width: auto; height: auto; padding: 0; writing-mode: vertical-rl; transform: rotate(180deg); }
  body.wrap-page .wp-cols.wp-on .wp-col + .wp-col .wp-vname { left: 16px; }
  body.wrap-page .wp-cols.wp-on .wp-col.wp-open .wp-vname { left: 0; right: auto; width: 72px; }
  body.wrap-page .wp-cols.wp-on .wp-chev { display: none; }
  body.wrap-page .wp-cols.wp-on .wp-plate { position: absolute; z-index: 3; top: 18px; bottom: 18px; left: 76px; right: 18px; overflow: auto; padding: 24px 28px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; background: rgba(10, 10, 14, .92); }
  body.wrap-page .wp-cols.wp-on.wp-pre .wp-col { opacity: 0; transform: translateX(calc(var(--i) * -44px)); }
}

/* Tablets and phones: stacked, layered bars that open downward. */
@media (max-width: 1023px) {
  body.wrap-page .wp-cols.wp-on .wp-col { display: grid; grid-template-rows: 72px 0fr; margin-top: 0; border-radius: 12px 12px 0 0; box-shadow: 0 -14px 26px rgba(0, 0, 0, .5); transition: grid-template-rows .55s cubic-bezier(.4, .1, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * .07s), opacity .6s ease calc(var(--i) * .07s); }
  body.wrap-page .wp-cols.wp-on .wp-col + .wp-col { margin-top: -12px; }
  body.wrap-page .wp-cols.wp-on .wp-col:last-child { border-radius: 12px; }
  body.wrap-page .wp-cols.wp-on .wp-col.wp-open { grid-template-rows: 72px 1fr; box-shadow: 0 -14px 26px rgba(0, 0, 0, .55); }
  body.wrap-page .wp-cols.wp-on .wp-col::after { display: none; }
  body.wrap-page .wp-cols.wp-on .wp-chead { grid-row: 1; }
  body.wrap-page .wp-cols.wp-on .wp-chead button { height: 72px; }
  body.wrap-page .wp-cols.wp-on .wp-vname { position: absolute; top: 0; bottom: 0; left: 24px; right: 64px; padding: 0; font-size: 1.9rem; }
  body.wrap-page .wp-cols.wp-on .wp-chev { position: absolute; right: 26px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border: solid currentColor; border-width: 0 3px 3px 0; color: var(--text); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); transform: rotate(45deg); transition: transform .3s ease; }
  body.wrap-page .wp-cols.wp-on .wp-col.wp-sw-chrome .wp-chev { color: #16181c; filter: none; }
  body.wrap-page .wp-cols.wp-on .wp-col.wp-open .wp-chev { margin-top: -3px; transform: rotate(-135deg); }
  body.wrap-page .wp-cols.wp-on .wp-plate { grid-row: 2; min-height: 0; overflow: hidden; padding: 0 24px; border: 0; border-radius: 0; background: #101016; transition: opacity .2s ease, visibility 0s .2s; }
  body.wrap-page .wp-cols.wp-on .wp-col.wp-open .wp-plate { padding: 24px 24px 26px; }
  body.wrap-page .wp-lead { font-size: 1.9rem; }
  body.wrap-page .wp-cols.wp-on.wp-pre .wp-col { opacity: 0; transform: translateY(26px); }
}

@media (max-width: 600px) {
  body.wrap-page .wp-cols { margin-top: 28px; }
  body.wrap-page .wp-cols.wp-on .wp-col { grid-template-rows: 64px 0fr; }
  body.wrap-page .wp-cols.wp-on .wp-col.wp-open { grid-template-rows: 64px 1fr; }
  body.wrap-page .wp-cols.wp-on .wp-chead button { height: 64px; }
  body.wrap-page .wp-cols.wp-on .wp-vname { left: 18px; font-size: 1.7rem; }
  body.wrap-page .wp-cols.wp-on .wp-col.wp-open .wp-plate { padding: 20px 18px 22px; }
  body.wrap-page .wp-lead { font-size: 1.6rem; }
  body.wrap-page .wp-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  body.wrap-page .wp-plate .wp-ctas { margin-top: 16px; }
}

/* ---- Pricing: the answer and its CTA beside the four things that move the price ---- */
body.wrap-page .wp-price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: 56px; align-items: start; }
body.wrap-page .wp-price-copy { grid-column: 1; grid-row: 1; }
body.wrap-page .wp-factors { display: grid; grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 1fr 1fr; gap: 14px; }
body.wrap-page .wp-price-cta { grid-column: 1; grid-row: 2; }
body.wrap-page .wp-factors .wp-panel { padding: 24px 22px 26px; }
body.wrap-page .wp-factors h3 { font-size: 1.35rem; }
body.wrap-page .wp-factors p { font-size: .96rem; }

/* ---- How a wrap goes: four steps in order, no visible numbers ---- */
body.wrap-page .wp-steps > li { box-shadow: inset 0 2px 0 var(--red); }
body.wrap-page .wp-after { max-width: 70ch; margin-top: 28px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
body.wrap-page .wp-after a,
body.wrap-page .wp-fine a,
body.wrap-page .wp-nojs a,
body.wrap-page .wp-send-error a,
body.wrap-page .wp-done a { color: var(--text); white-space: nowrap; border-bottom: 1px solid var(--red); }

/* ---- The estimate form: two columns on a lit frame, stacked on narrower screens ---- */
body.wrap-page .wp-est { background: radial-gradient(60% 50% at 50% 70%, rgba(220, 38, 38, .18), rgba(220, 38, 38, 0) 70%), var(--bg); }
body.wrap-page .wp-frame { position: relative; margin-top: 44px; padding: 34px 34px 36px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); box-shadow: 0 30px 70px rgba(0, 0, 0, .42); }
body.wrap-page .wp-frame::before { content: ""; position: absolute; inset: -1px -1px auto; height: 2px; border-radius: 4px 4px 0 0; background: var(--red); }
body.wrap-page .wp-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 44px; }
body.wrap-page .wp-fcol { min-width: 0; }
body.wrap-page .wp-fcol + .wp-fcol { margin-left: -1px; padding-left: 44px; border-left: 1px solid var(--line); }
body.wrap-page .wp-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
body.wrap-page .wp-fieldset + .wp-fieldset { margin-top: 28px; }
body.wrap-page .wp-lbl { display: block; margin: 0 0 12px; padding: 0; color: var(--faint); font: 600 .68rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; }
body.wrap-page .wp-lbl i,
body.wrap-page .wp-field > span i { font-style: normal; font-weight: 500; letter-spacing: .1em; text-transform: none; color: var(--faint); }
body.wrap-page .wp-lbl i::before,
body.wrap-page .wp-field > span i::before { content: "· "; }
/* The cards and chips are labels around real radios, kept focusable for the keyboard and the
   browser's validation message. */
body.wrap-page .wp-wtype input,
body.wrap-page .wp-fchip input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; }
body.wrap-page .wp-wtypes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.wrap-page .wp-wtype { position: relative; display: flex; align-items: center; min-height: 64px; padding: 12px; border: 1px solid var(--line); border-radius: 2px; background: rgba(255, 255, 255, .02); color: var(--text); font: 700 1.02rem/1.1 var(--disp); letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
body.wrap-page .wp-wtype:has(input:checked) { border-color: var(--red); background: rgba(220, 38, 38, .12); box-shadow: inset 0 2px 0 var(--red); }
body.wrap-page .wp-wtype:has(input:focus-visible),
body.wrap-page .wp-fchip:has(input:focus-visible) { outline: 2px solid rgba(220, 38, 38, .7); outline-offset: 3px; }
body.wrap-page .wp-colors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 8px; }
body.wrap-page .wp-color { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); font: 500 .72rem/1 var(--body); cursor: pointer; }
body.wrap-page .wp-color-chip { display: grid; place-items: center; width: 100%; max-width: 44px; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .18); border-radius: 3px; }
body.wrap-page .wp-color-unsure { border-style: dashed; color: var(--muted); font: 700 1.2rem/1 var(--disp); }
body.wrap-page .wp-color[aria-pressed="true"] { color: var(--text); }
body.wrap-page .wp-color[aria-pressed="true"] .wp-color-chip { outline: 2px solid var(--red); outline-offset: 2px; }
body.wrap-page .wp-fchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
body.wrap-page .wp-fchip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 2px; background: rgba(255, 255, 255, .02); color: var(--text); font: 600 .7rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
body.wrap-page .wp-fchip i { width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 2px; }
body.wrap-page .wp-fchip:has(input:checked) { border-color: var(--red); background: rgba(220, 38, 38, .12); }
body.wrap-page .wp-row3 { display: grid; grid-template-columns: .8fr 1fr 1fr; gap: 10px; }
body.wrap-page .wp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
body.wrap-page .wp-field { display: block; }
body.wrap-page .wp-field > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: .84rem; }
body.wrap-page .wp-notes { margin-top: 28px; }
body.wrap-page .wp-notes > span.wp-lbl { margin-bottom: 12px; color: var(--faint); font: 600 .68rem/1 var(--body); }
body.wrap-page .wp-form input[type="text"],
body.wrap-page .wp-form input[type="tel"],
body.wrap-page .wp-form input[type="email"],
body.wrap-page .wp-form textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 2px; background: #0d0d12; color: var(--text); font: 400 .98rem var(--body); }
body.wrap-page .wp-form select { width: 100%; padding: 12px 36px 12px 12px; border: 1px solid var(--line); border-radius: 2px; background: #0d0d12 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f4f4f6' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--text); font: 400 .98rem var(--body); appearance: none; -webkit-appearance: none; text-overflow: ellipsis; cursor: pointer; }
body.wrap-page .wp-form select:disabled { opacity: .55; cursor: not-allowed; }
body.wrap-page .wp-form select option { background: #0d0d12; color: var(--text); }
body.wrap-page .wp-vswap { display: inline-block; margin-top: 12px; padding: 4px 0; border: 0; background: none; color: var(--muted); font: 400 .88rem var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body.wrap-page .wp-vswap:hover { color: var(--text); }
body.wrap-page .wp-form textarea { min-height: 92px; resize: vertical; }
body.wrap-page .wp-form ::placeholder { color: var(--faint); }
body.wrap-page .wp-form input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #0d0d12 inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); }
body.wrap-page .wp-check { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--text); font-size: .95rem; cursor: pointer; }
body.wrap-page .wp-check input,
body.wrap-page .wp-consent input { flex: none; width: 18px; height: 18px; accent-color: var(--red); }
body.wrap-page .wp-consents { display: grid; gap: 10px; margin-top: 16px; }
body.wrap-page .wp-consent { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: .82rem; line-height: 1.45; cursor: pointer; }
body.wrap-page .wp-consent a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
body.wrap-page .wp-submit { width: calc(100% - 8px); margin: 24px 4px 0; padding: 17px 20px; }
body.wrap-page .wp-submit[disabled] { opacity: .7; cursor: progress; }
body.wrap-page .wp-nojs { margin-top: 24px; color: var(--text); font-size: .95rem; line-height: 1.5; }
body.wrap-page .wp-send-error { margin-top: 14px; color: #fcd34d; font-size: .92rem; line-height: 1.5; }
body.wrap-page .wp-send-error:empty { display: none; }
body.wrap-page .wp-fine { margin-top: 14px; color: var(--faint); font-size: .86rem; line-height: 1.5; }
body.wrap-page .wp-done { padding: 30px 6px 20px; }
body.wrap-page .wp-tick { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--red); border-radius: 50%; background: rgba(220, 38, 38, .14); color: var(--red-hot); font: 700 1.4rem/1 var(--body); }
body.wrap-page .wp-done h3 { margin-top: 22px; font: 700 clamp(2.4rem, 4vw, 3rem) / .95 var(--disp); text-transform: uppercase; color: var(--text); }
body.wrap-page .wp-done p { max-width: 52ch; margin-top: 14px; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }

/* ---- FAQ: two columns on desktop ---- */
body.wrap-page .wp-faq { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 0 40px; margin-top: 40px; }
body.wrap-page .wp-faq details { border-bottom: 1px solid var(--line); }
body.wrap-page .wp-faq-col > details:first-child { border-top: 1px solid var(--line); }
body.wrap-page .wp-faq summary { display: flex; justify-content: space-between; gap: 18px; padding: 20px 2px; list-style: none; color: var(--text); font: 500 1.06rem/1.35 var(--body); cursor: pointer; }
body.wrap-page .wp-faq summary::-webkit-details-marker { display: none; }
body.wrap-page .wp-faq summary::after { content: "+"; flex: none; color: var(--red-hot); font: 600 1.3rem/1 var(--body); transition: transform .2s ease; }
body.wrap-page .wp-faq details[open] summary::after { transform: rotate(45deg); }
body.wrap-page .wp-faq details p { margin: 0 0 20px; padding-right: 30px; color: var(--muted); font-size: .98rem; line-height: 1.6; }
body.wrap-page .wp-faq details p a { color: var(--text); border-bottom: 1px solid var(--red); }

/* ---- Final call to action ---- */
body.wrap-page .wp-final { padding-block: 120px 110px; background: radial-gradient(50% 60% at 20% 60%, rgba(220, 38, 38, .14), rgba(220, 38, 38, 0) 70%), var(--bg); }
body.wrap-page .wp-final h2 { max-width: none; margin-top: 0; font-size: clamp(3rem, 7vw, 5.6rem); }
body.wrap-page .wp-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-size: .95rem; }
body.wrap-page .wp-links a { padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, .2); color: var(--muted); }
body.wrap-page .wp-links a:hover { border-color: var(--red); color: var(--text); }

/* ---- Tablets: the whole photo on top, full width, fading into the dark at its foot, the copy below it; one column for the hero, the pricing and the form ---- */
@media (max-width: 1023px) {
  body.wrap-page .wp-cd { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  body.wrap-page .wp-hero { padding-block: 0 40px; }
  body.wrap-page .wp-hero-photo { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
  body.wrap-page .wp-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.wrap-page .wp-price-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 28px; }
  body.wrap-page .wp-price-copy,
  body.wrap-page .wp-factors,
  body.wrap-page .wp-price-cta { grid-column: auto; grid-row: auto; }
  body.wrap-page .wp-price-cta { margin-top: 0; }
  body.wrap-page .wp-form { grid-template-columns: minmax(0, 1fr); }
  body.wrap-page .wp-fcol + .wp-fcol { margin: 28px 0 0; padding-left: 0; border-left: 0; }
  body.wrap-page .wp-faq { grid-template-columns: minmax(0, 1fr); }
  body.wrap-page .wp-faq-col + .wp-faq-col > details:first-child { border-top: 0; }
}

@media (max-width: 760px) {
  body.wrap-page .wp-grid3 { grid-template-columns: minmax(0, 1fr); }
}

/* Narrow phones: two photos would be under 160px wide each, so the pair stacks, Before first. */
@media (max-width: 369px) {
  body.wrap-page .wp-cd-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Phones ---- */
@media (max-width: 600px) {
  body.wrap-page .wp-hero h1 .kicker { margin-bottom: 18px; }
  body.wrap-page .wp-short { margin-top: 16px; font-size: 1rem; }
  body.wrap-page .wp-ctas { flex-direction: column; gap: 12px; margin-top: 24px; }
  body.wrap-page .wp-ctas .cta { width: calc(100% - 8px); margin-inline: 4px; padding: 17px 18px; }
  body.wrap-page .wp-hero .wp-proof { margin-top: 16px; text-align: center; }
  body.wrap-page .wp-sect { padding-block: 64px; }
  body.wrap-page .wp-lede { margin-top: 16px; font-size: 1rem; }
  body.wrap-page .wp-grid3,
  body.wrap-page .wp-grid4 { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
  body.wrap-page .wp-panel { padding: 22px 18px 24px; }
  body.wrap-page .wp-panel h3 { font-size: 1.4rem; }
  body.wrap-page .wp-panel p { font-size: .95rem; }
  body.wrap-page .wp-look { height: 58px; margin: -8px -6px 18px; }
  body.wrap-page .wp-factors { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body.wrap-page .wp-factors .wp-panel { padding: 18px 18px 20px; }
  body.wrap-page .wp-after { font-size: .95rem; }
  body.wrap-page .wp-frame { margin-top: 28px; padding: 22px 16px 24px; }
  body.wrap-page .wp-wtypes { grid-template-columns: 1fr 1fr; }
  body.wrap-page .wp-wtype { min-height: 56px; font-size: .98rem; }
  body.wrap-page .wp-colors { gap: 10px 6px; }
  body.wrap-page .wp-color { font-size: .7rem; }
  body.wrap-page .wp-row3 { grid-template-columns: 1fr 1fr; }
  body.wrap-page .wp-row3 .wp-field:first-child { grid-column: 1 / -1; }
  body.wrap-page .wp-grid2 { grid-template-columns: minmax(0, 1fr); }
  body.wrap-page .wp-done h3 { font-size: 2.4rem; }
  body.wrap-page .wp-done p { font-size: 1rem; }
  body.wrap-page .wp-faq { margin-top: 26px; }
  body.wrap-page .wp-faq summary { padding: 18px 2px; font-size: 1rem; }
  body.wrap-page .wp-faq details p { padding-right: 8px; font-size: .95rem; }
  body.wrap-page .wp-final { padding-block: 72px 64px; }
  body.wrap-page .wp-final h2 { font-size: 3rem; }
  body.wrap-page .wp-links { gap: 10px 20px; margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  body.wrap-page .wp-sw-shift { animation: none; }
  body.wrap-page .wp-cols.wp-on .wp-col,
  body.wrap-page .wp-cols.wp-on .wp-plate,
  body.wrap-page .wp-cols.wp-on .wp-chev { transition: none; }
  body.wrap-page .wp-cols.wp-on .wp-col::after { animation: none; opacity: 0; }
  body.wrap-page .wp-cols.wp-on.wp-pre .wp-col { opacity: 1; transform: none; }
}