/* =====================================================================
   Invoice Purchasing landing page — loaded after styles.css.
   Hero, intro, midway and footer reuse the housing page's blocks; this file
   holds the page's own sections and the few overrides those blocks need.
   Same scaling model: 1rem == 1 px of the 1366 artboard (430 on phones).
   ===================================================================== */

.fstep__list li { position: relative; padding-left: 14rem; }
.fstep__list li::before { content: "\2022"; position: absolute; left: 0; }
.fstep__link { color: var(--green-dark); overflow-wrap: anywhere; }
.fstep__link:hover { text-decoration: underline; }
.fstep__num { display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: var(--black); }
.inquiry { background: var(--gray); border-left: 6rem solid var(--green); font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; }
.flow__closing-text span, .work__name { display: block; }
.flow__closing-text .g, .flow__closing-text em { font-style: normal; color: var(--green); }
.flow__closing-block, .midway__block { background: var(--green); }
.fstep__top { display: contents; }   /* phones turn it into the clip box for figure + title bar */
.ale__line, .ale__line2 { font-family: var(--font-display); line-height: 1; letter-spacing: 0; text-transform: uppercase; }
.ale__u { display: inline-block; border-bottom: 14rem solid var(--green); }
.ale__pct { color: var(--green); font-weight: 400; }
.page--invoice .submit { z-index: 5; }
.work { position: relative; background: var(--black); color: var(--white); z-index: 4; }
.work__grid { display: grid; list-style: none; }
.work__item { position: relative; overflow: hidden; background: #15181b; }
.work__item img { width: 100%; height: 100%; object-fit: cover; }
.work__name { position: absolute; z-index: 1; text-transform: uppercase; }
.work__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%); }
.submit { position: relative; background: var(--white); }
.legal { background: var(--white); font-family: var(--font-body); }
.legal p { font-weight: 500; line-height: 1.35; color: #6a6a6a; }

/* =====================================================================
   DESKTOP
   ===================================================================== */
@media (min-width: 761px) {
  /* hero: headline, band and button sit in the sky, above the van (its roof rack tops out near 385rem).
     Moved down 22rem from the mockup on 2026-10-08 to clear the 56rem top bar, gaps tightened so the button stays off the rack */
  .hero__title--two { top: 78rem; }
  .hero__band--fit { top: 282rem; width: auto; padding-right: 24rem; white-space: nowrap; }
  .page--invoice .hero__btn { top: 338rem; }

  /* intro: longer bar copy, and the "up to 60%" figure where the housing page has the ALE prompt */
  .page--invoice .intro__bartext { top: 652rem; width: 425rem; font-size: 25rem; line-height: 27rem; }
  .page--invoice .intro { z-index: 4; height: 1300rem; }      /* 2026-10-08: the black "types of work" section now follows; the 60% stat + button end at ~1138rem and the user asked for ~160rem of white under the button before the black */
  .page--invoice .intro__family { left: 35rem; top: 461rem; width: 728rem; }
  .ale--stat { left: auto; right: 119rem; top: 905rem; width: max-content; height: auto; white-space: nowrap; }
  .ale__line { display: flex; align-items: center; font-size: 69rem; }
  .ale__u { flex: none; line-height: .93; }
  .ale__pct { font-size: 125rem; margin: 0 6rem; }
  .ale__line2 { margin-top: -22rem; font-size: 88rem; }
  .ale--stat .ale__btn { left: auto; right: 0; top: 196rem; width: 182rem; height: 37rem; }

  /* midway: one-line title */
  .midway--how .midway__h2 { left: 166rem; top: 215rem; font-size: 137rem; line-height: .85; letter-spacing: .02em; }
  .midway__block { position: absolute; left: 476rem; top: 213rem; width: 60rem; height: 220rem; }
  .midway--how .midway__sub { top: 452rem; }
  .midway--how .midway__btn { left: 172rem; top: 506rem; width: 182rem; height: 37rem; }
  /* phone hand (2026-10-08, user's mockup): original size (647rem wide -> 895rem tall at the image's 932 x 1289).
     The image has 36rem of empty space above the phone, so the box sits at -66rem to put the phone's top edge
     30rem above the bottom of the black "types of work" section. The section is shortened so the top of the grey
     band (midway height + 85rem flow fade) meets the sleeve's bottom edge at 829rem.
     The midway paints above the work section (z 4). */
  .page--invoice .midway { z-index: 5; }
  .midway--how .in { height: 744rem; }
  .midway--how .midway__hand { top: -66rem; width: 647rem; }

  /* ---------- steps: each pair is a two-column row, "what we do" drops 256rem like the housing zigzag ---------- */
  .flow { position: relative; z-index: 1; }
  .flow__fade { position: absolute; left: 0; right: 0; pointer-events: none; }
  .flow__fade--top    { top: 85rem; height: 264rem; background: linear-gradient(180deg, var(--gray-fade) 0%, rgba(236,236,236,0) 100%); }
  .flow__fade--bottom { bottom: 0; height: 1100rem; background: linear-gradient(180deg, rgba(236,236,236,0) 0%, var(--gray-fade) 45%, var(--gray-fade) 100%); }

  .flow__pair { position: relative; display: grid; grid-template-columns: 705rem 659rem; column-gap: 2rem; align-items: start; }
  .flow__pair + .flow__pair { margin-top: 150rem; }
  .fstep { position: relative; }
  .fstep--we { margin-top: 256rem; }
  .flow__pair + .flow__pair--4 { margin-top: 95rem; }                /* mockup: pair 4 sits closer after the taller pair 3 */
  .flow__pair--3 .fstep--we { margin-top: 309rem; }   /* mockup: steps 3 and 4 drop their "we" bar further */
  .flow__pair--4 .fstep--we { margin-top: 538rem; }
  .flow__pair--4 .fstep--we .fstep__head { padding-left: 88rem; }   /* no bust on this bar, title moves to the left */

  /* bars run flush to the viewport edge on their side, as on the housing page */
  .fstep__bar { position: absolute; top: 0; height: 200rem; background: var(--black); }
  .fstep--you .fstep__bar { left: calc(683rem - var(--vw) / 2); right: 0; }
  .fstep--we  .fstep__bar { left: 0; right: calc(683rem - var(--vw) / 2); }

  .fstep__head { position: relative; height: 200rem; display: flex; flex-direction: column; justify-content: center; color: #f2f2f2; z-index: 2; }
  .fstep--you .fstep__head { padding: 0 270rem 0 135rem; }
  .fstep--we  .fstep__head { padding: 0 120rem 0 273rem; }
  .fstep__kicker { display: flex; align-items: center; gap: 10rem; margin-bottom: 9rem; font-size: 25rem; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: var(--green); }
  .fstep__num { width: 32rem; height: 32rem; font-size: 27rem; letter-spacing: 0; padding-top: 2rem; }
  .fstep__title { font-size: 38.8rem; line-height: 1.01; letter-spacing: .05em; text-transform: uppercase; }

  /* busts are clipped at the bottom edge of the bar */
  .fstep__figure { position: absolute; top: -110rem; width: 250rem; height: 310rem; overflow: hidden; z-index: 3; }
  .fstep__figure img { width: 100%; }
  .fstep--you .fstep__figure { left: 445rem; }
  .fstep--we  .fstep__figure { left: 0; }
  /* per-figure boxes, from mockup.psd: left/top/width place the canvas so the cut-out sits where the mockup has it;
     busts keep overflow hidden so the bar bottom (200rem) cuts them, the others overflow (folder, ladder, iPad) */
  .fstep .fstep__figure--1y { left: 334rem; top: -80rem; width: 371rem; height: 280rem; }   /* head about the size of the step 2 contractor; right edge on the bar end */
  .fstep__figure--1y + .fstep__head { padding-right: 345rem; }
  .fstep .fstep__figure--1w { left: 29rem; top: -131rem; width: 265rem; height: 331rem; }
  .fstep .fstep__figure--2y { left: 367rem; top: -155rem; width: 285rem; height: 355rem; }
  .fstep .fstep__figure--2w { left: -36rem; top: -144rem; width: 311rem; height: 344rem; }
  .fstep .fstep__figure--3y { left: 402rem; top: -186rem; width: 333rem; height: 427rem; overflow: visible; }
  .fstep .fstep__figure--3w { left: -180rem; top: -128rem; width: 568rem; height: 328rem; }
  .fstep .fstep__figure--4y { left: 323rem; top: -172rem; width: 442rem; height: 372rem; }   /* torso cut (source row 791) lands on the bar bottom; ladder clipped there */
  .fstep .fstep__figure--4w { left: -27rem; top: -441rem; width: 661rem; height: 495rem; overflow: visible; }

  .fstep__body { position: relative; margin-top: 16rem; font-size: 25rem; line-height: 1; letter-spacing: .05em; text-transform: uppercase; z-index: 2; }
  .fstep--you .fstep__body { margin-left: 120rem; width: 500rem; }
  .fstep--we  .fstep__body { margin-left: 75rem; width: 463rem; }
  .fstep__body > * + * { margin-top: 25rem; }
  .fstep__body > .fstep__list { margin-top: 12rem; }
  .fstep__list li { line-height: 29rem; }
  .inquiry { padding: 18rem 22rem; font-size: 21rem; line-height: 27rem; }
  .fstep__btn { width: 182rem; height: 37rem; }

  /* closing statement, figure clipped at the section bottom so the legs run into the black section */
  .flow__closing { position: relative; height: 780rem; margin-top: 40rem; }
  .flow__closing-text { position: absolute; left: 882rem; top: 61rem; font-size: 76rem; line-height: 68rem; letter-spacing: 0; text-transform: uppercase; z-index: 2; }
  .flow__closing-figure { position: absolute; left: -34rem; top: -67rem; width: 851rem; }   /* men stay 812rem tall and in the same spot; the canvas grew for the shadow and full arms */
  .flow__closing-figure img { width: 100%; will-change: transform, opacity; }
  .flow__closing-block { position: absolute; left: 802rem; top: 52rem; width: 43rem; height: 281rem; }
  .flow__closing-btn { position: absolute; left: 1057rem; top: 374rem; width: 182rem; height: 37rem; }

  /* ---------- types of work ---------- */
  .work .in { padding: 101rem 120rem 110rem; }
  .work__h2 { margin-left: -2rem; font-size: 77rem; line-height: 1.01; letter-spacing: .05em; text-transform: uppercase; }
  .work__band { margin: 40rem 0 0 -8rem; width: 1142rem; padding: 10rem 30rem 9rem; background: var(--white); color: var(--black); font-size: 30rem; line-height: 1.01; letter-spacing: .03em; text-transform: uppercase; transform-origin: left center; }
  .work__grid { margin-top: 46rem; grid-template-columns: repeat(3, 1fr); gap: 20rem; }
  .work__item { height: 240rem; }
  .work__name { left: 18rem; right: 18rem; bottom: 14rem; font-size: 30rem; line-height: 1; letter-spacing: .05em; }
  .work__more { margin-top: 46rem; display: flex; align-items: center; gap: 40rem; font-size: 30rem; line-height: 1.01; letter-spacing: .03em; text-transform: uppercase; }
  .work__btn { width: 182rem; height: 37rem; }

  /* ---------- ready to submit ---------- */
  .submit .in { height: 820rem; }
  .submit__h2 { position: absolute; left: 118rem; top: 281rem; font-size: 100rem; line-height: 1.01; letter-spacing: .05em; text-transform: uppercase; }
  .submit__bar { position: absolute; left: 120rem; top: 537rem; width: 1127rem; height: 150rem; background: var(--black); transform-origin: left center; }
  .submit__figure { position: absolute; left: 738rem; top: -56rem; width: 593rem; height: 742rem; overflow: hidden; z-index: 2; }   /* clipped at the bar bottom, head rises into the black section above */
  .submit__figure img { width: 100%; }
  .submit__text { position: absolute; left: 150rem; top: 575rem; width: 600rem; color: var(--white); font-size: 30rem; line-height: 1.01; letter-spacing: .03em; text-transform: uppercase; z-index: 2; }
  .submit__btn { position: absolute; left: 120rem; top: 716rem; height: 56rem; padding: 0 30rem; font-size: 30rem; }

  /* ---------- disclaimer ---------- */
  .legal .in { padding: 0 120rem 44rem; }
  .legal p { font-size: max(9px, 12rem); }
  .legal p:first-child { padding-top: 22rem; border-top: max(1px, 1rem) solid #d9d9d9; }
  .legal p + p { margin-top: 8rem; }
}

/* =====================================================================
   MOBILE (<= 760px)
   ===================================================================== */
@media (max-width: 760px) {
  .hero__band--fit { white-space: normal; }
  /* hero copy at the top, in the sky above the van; darker shade up there to hold the white type */
  .page--invoice .hero .in { justify-content: flex-start; padding-top: calc(var(--topbar-h) + 34rem); padding-bottom: 0; }
  .page--invoice .hero__title { font-size: 52rem; }
  .page--invoice .hero__shade { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.2) 100%); }

  .ale--stat { display: block; }
  .ale__line { display: flex; align-items: center; font-size: 36rem; }
  .ale__u { padding-bottom: 2rem; border-bottom-width: 7rem; }
  .ale__pct { font-size: 66rem; margin: 0 4rem 0 7rem; }
  .ale__line2 { font-size: 46rem; margin-top: 4rem; }
  .ale--stat .ale__btn { margin-top: 14rem; }
  .midway__block { display: none; }
  .ale__pct { grid-row: 1 / span 2; font-size: 76rem; line-height: .92; color: var(--green-dark); }
  .ale__pct small { display: block; font-size: 18rem; line-height: 1; text-transform: uppercase; color: var(--black); }

  /* steps: figure rises out of a black title block, copy underneath */
  .flow .in { padding: 0; }
  .flow__fade { display: none; }
  /* Each step: the figure rises out of a black title bar and is cut at the bar's bottom edge, like the desktop
     busts. .fstep__top is the box (--rise of white above the bar for the head, then the bar); the figure is anchored
     to the BOTTOM of that box, so its own bottom edge always meets the bar bottom (2026-10-09 notes: no black gap
     under anyone). "You" steps keep the figure on the right, "we" steps on the left; --flip turns a figure to face
     the title. Hana in step 3 is the exception: anchored at the top and cut at the waist by the box. */
  .fstep { position: relative; display: block; margin-top: 28rem; }
  .fstep__bar { display: none; }
  .fstep__top { display: block; position: relative; overflow: hidden; padding-top: var(--rise, 80rem); }
  .fstep__figure { position: absolute; bottom: calc(-1 * var(--sink, 0rem)); width: var(--fw, 190rem); margin: 0; z-index: 3; transform: scaleX(var(--flip, 1)); }   /* --sink: how far the image's bottom goes below the bar so the BODY's cut line (not a prop like the ladder or folder) meets the bar bottom */
  .fstep__figure img { width: 100%; }
  .fstep--you .fstep__figure { right: var(--fx, 6rem); }
  .fstep--we  .fstep__figure { left: var(--fx, 6rem); }
  .fstep__head { position: relative; min-height: 150rem; display: flex; flex-direction: column; justify-content: center; padding: 24rem 22rem; background: var(--black); color: #f2f2f2; }
  .fstep--you .fstep__head { padding-right: calc(var(--fw, 190rem) + var(--fx, 6rem) + 12rem); }
  .fstep--we  .fstep__head { padding-left: calc(var(--fw, 190rem) + var(--fx, 6rem) + 12rem); text-align: right; }
  .fstep:has(.fstep__figure--1y) { --fw: 300rem; --fx: -70rem; --rise: 76rem; }   /* 800x604: 226 - 150, so the cap is never cut */   /* landscape crop of Joseph on the phone, bleeds off the right edge */
  .fstep:has(.fstep__figure--1y) .fstep__head { padding-right: 222rem; }
  .fstep:has(.fstep__figure--1w) { --fw: 180rem; --rise: 76rem; }
  .fstep:has(.fstep__figure--2y) { --fw: 190rem; --rise: 88rem; --flip: -1; }   /* faces the title */
  .fstep:has(.fstep__figure--2w) { --fw: 190rem; --rise: 88rem; --flip: -1; }
  .fstep:has(.fstep__figure--3y) { --fw: 200rem; --rise: 92rem; --sink: 24.4rem; }
  .fstep:has(.fstep__figure--3w) { --fw: 300rem; --fx: -34rem; --rise: 54rem; --flip: -1; }   /* bust only: top-anchored, the box cuts her at the waist */
  .fstep:has(.fstep__figure--3w) .fstep__figure { bottom: auto; top: 0; }
  .fstep:has(.fstep__figure--3w) .fstep__head { padding-left: 250rem; }
  .fstep:has(.fstep__figure--4y) { --fw: 250rem; --fx: -36rem; --rise: 64rem; --sink: 76.8rem; }   /* body cut at source row 589 of 804; the ladder below it is clipped by the bar */
  .fstep:has(.fstep__figure--4w) { --fw: 250rem; --fx: 0rem; --rise: 40rem; }   /* the tablet sits on the bar bottom */
  .fstep:has(.fstep__figure--4w) .fstep__head { padding-left: 262rem; }
  .fstep__kicker { display: flex; align-items: center; gap: 8rem; margin-bottom: 8rem; font-size: 20rem; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: var(--green); }
  .fstep--we .fstep__kicker { justify-content: flex-end; }
  .fstep__num { width: 26rem; height: 26rem; font-size: 22rem; padding-top: 2rem; }
  .fstep__title { font-size: 30rem; line-height: 1.01; letter-spacing: .05em; text-transform: uppercase; }
  .fstep__title br { display: none; }
  .fstep__body { padding: 24rem 22rem 20rem; font-size: 19rem; line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; }
  .fstep__body > * + * { margin-top: 18rem; }
  .fstep__body > .fstep__list { margin-top: 8rem; }
  .fstep__list li { line-height: 24rem; }
  .inquiry { padding: 16rem 18rem; font-size: 17rem; line-height: 23rem; }
  .fstep__btn { height: 40rem; padding: 0 24rem; }

  .flow__closing { display: flex; flex-direction: column; margin-top: 30rem; padding-top: 50rem; background: linear-gradient(180deg, #fff 0%, var(--gray-fade) 30%, var(--gray-fade) 100%); }
  .flow__closing-text { margin: 0 22rem; padding-left: 18rem; border-left: 10rem solid var(--green); font-size: 40rem; line-height: 1; letter-spacing: 0; text-transform: uppercase; }
  .flow__closing-block { display: none; }
  .flow__closing-btn { margin: 20rem 22rem 0; align-self: flex-start; height: 40rem; padding: 0 24rem; }
  .flow__closing-figure { width: 84%; align-self: center; margin-top: 20rem; }   /* the four contractors, centred */
  .flow__closing-figure img { width: 100%; }

  .page--invoice .intro { padding-bottom: 24rem; }   /* 2026-10-09 notes: the types-of-work title moves up, close to the band above */
  .work .in { padding-top: 26rem; padding-bottom: 70rem; }
  .work__h2 { font-size: 46rem; line-height: 1.01; letter-spacing: .05em; text-transform: uppercase; }
  .work__band { margin: 24rem -22rem 0 0; padding: 14rem 18rem; background: var(--white); color: var(--black); font-size: 19rem; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; transform-origin: left center; }
  .work__grid { margin-top: 30rem; grid-template-columns: 1fr; gap: 12rem; }
  .work__item { height: 170rem; }
  .work__name { left: 14rem; right: 14rem; bottom: 12rem; font-size: 22rem; line-height: 1; letter-spacing: .05em; }
  .work__more { margin-top: 30rem; font-size: 22rem; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; }
  .work__btn { margin-top: 16rem; height: 40rem; padding: 0 24rem; }

  .submit .in { display: flex; flex-direction: column; padding-top: 60rem; padding-bottom: 50rem; }
  .submit__h2 { font-size: 54rem; line-height: 1.01; letter-spacing: .05em; text-transform: uppercase; }
  .submit__bar { display: none; }
  .submit__figure { width: 64%; align-self: flex-end; margin-top: 10rem; }
  .submit__figure img { width: 100%; }
  .submit__text { margin: 0 -22rem; padding: 20rem 22rem; background: var(--black); color: var(--white); font-size: 20rem; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; }
  .submit__btn { margin-top: 20rem; height: 48rem; font-size: 19rem; }

  .legal .in { padding-bottom: 36rem; }
  .legal p { font-size: 11px; }
  .legal p:first-child { padding-top: 18rem; border-top: 1px solid #d9d9d9; }
  .legal p + p { margin-top: 8px; }

  /* 2026-10-09, the user's phone notes (Source/mobile edits - invoice purch.png): these blocks are centred
     paragraphs, centred in the page: intro headline, the 60% stat, the types-of-work title, "have a job that
     isn't listed", the how-it-works block and the closing line (its green rule goes, it only reads left-aligned) */
  .page--invoice .intro__text, .page--invoice .intro__h2 { text-align: center; }
  .ale--stat { text-align: center; }
  .ale__line { justify-content: center; }
  .work__h2, .work__more { text-align: center; }
  .page--invoice .midway .in { align-items: center; text-align: center; }
  .flow__closing-text { border-left: 0; padding-left: 0; text-align: center; }
  .flow__closing-btn { align-self: center; }
}

/* reduced motion: styles.css swaps the hero video for the storm poster; this page has its own */
@media (prefers-reduced-motion: reduce) {
  .page--invoice .hero__media { background-image: url("../assets/img/invoice/ip-hero-van.jpg?v=fd730a5e"); }
}