/* =====================================================================
   Home page (presentation card) — loaded after styles.css.
   Same brand language as the three service pages (Bebas Neue display,
   Barlow Condensed body, black bars, one green accent, 1rem == 1 artboard px:
   1366 on desktop, 430 on phones). Layout inspired by a full-bleed hero
   inside a rounded white frame, and a bottom
   "booking bar" that here becomes the audience router (Homeowner /
   Attorney / Contractor).
   ===================================================================== */

.page--home p, .page--home li { font-family: var(--font-body); font-weight: 500; }
.page--home .kicker { font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.btn--outline { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2rem var(--green); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--green); }
.page--home h2, .page--home h3 { text-transform: uppercase; }

/* ---------- hero: media, frame, shade ---------- */
.hero--home { background: #0b0f12; }
/* storm loop scaled up from the top so the house sits in the lower half, under the headline */
.hero--home .hero__video { top: 0; height: 118%; object-position: 50% 0; }
/* poster fallback (phones / reduced motion) laid out exactly like the video box */
.hero--home .hero__media { background: #0b0f12 url("../assets/img/storm-poster.jpg?v=7bbd62cf") 50% 0 / auto 118% no-repeat; }
.hero--home .hero__shade {
  background:
    linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.30) 30%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.18) 100%);
}
.hero__frame { position: absolute; border: 3rem solid rgba(255,255,255,.92); pointer-events: none; z-index: 1; }
.hero--home .in { z-index: 2; }

/* ---------- hero: copy ---------- */
.hero__copy { color: var(--white); text-align: center; }
.hero__kicker { font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; opacity: .88; }
.hero__title--home { position: static; text-align: center; }
.hero__word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .05em; margin-bottom: -.05em; color: var(--green); }
.hero__word-in { display: inline-block; }
.hero__sub { margin-left: auto; margin-right: auto; }

/* ---------- hero: audience router (the "booking bar") ---------- */
.router {
  display: flex; align-items: center;
  background: var(--white); color: var(--black);
  box-shadow: 0 20rem 60rem rgba(0,0,0,.35);
}
.hero .router p.router__label { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }   /* specificity beats the hero paragraph rule; same face as the item names, one step larger */
.router__item { position: relative; display: flex; align-items: center; transition: background .2s ease; }
.router__icon { flex: none; display: grid; place-items: center; border-radius: 50%; background: #f1f1f1; color: var(--black); transition: background .2s ease, color .2s ease; }
.router__text strong { display: block; font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.router__text span { display: block; font-family: var(--font-body); color: #666; }
.router__item:hover, .router__item:focus-visible { background: #f2fbf6; outline: none; }
.router__item:hover .router__icon, .router__item:focus-visible .router__icon { background: var(--green); color: var(--white); }
.router__btn { border-radius: 999rem; }

/* ---------- doors ---------- */
.doors__h2 { line-height: 1; letter-spacing: .04em; }
.doors__grid { list-style: none; }
.door { display: flex; flex-direction: column; background: var(--white); }
.door__fig { position: relative; background: var(--gray); overflow: hidden; }
.door__fig img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: auto; max-width: none; }
.door__bar { background: var(--black); color: var(--white); }
.door__who { font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.door__h3 { letter-spacing: .03em; line-height: 1.02; }
.door__body { flex: 1; display: flex; flex-direction: column; border: 1px solid #e3e3e3; border-top: 0; }
.door__fine { color: #6b6b6b; border-top: 1px solid #e3e3e3; }
.btn--door { align-self: flex-start; margin-top: auto; }

/* ---------- plain terms ---------- */
.plain { background: var(--black); color: var(--white); }
.plain__h2 { letter-spacing: .04em; line-height: 1; }
.plain__col h3 { letter-spacing: .04em; border-bottom: 3rem solid var(--green); }
.plain__col--no h3 { border-bottom-color: #555; }
.plain__list { list-style: none; }
.plain__list li { position: relative; border-bottom: 1px solid #2a2a2a; color: #e6e6e6; }
.plain__list li::before { position: absolute; left: 0; }
.plain__list--yes li::before { content: ""; width: .5em; height: .5em; background: var(--green); transform: rotate(45deg); border-radius: 1rem; }
.plain__list--no li::before { content: "\00d7"; font-family: var(--font-display); color: #8a8a8a; line-height: 1; }
.plain__note { font-family: var(--font-display); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; line-height: 1.08; }
.plain__note span { color: var(--green); }

/* ---------- thread ---------- */
.thread__h2 { letter-spacing: .04em; line-height: 1.01; }
.thread__steps { list-style: none; }
.tstep__img { width: 100%; object-fit: cover; background: var(--gray); }
.tstep--1 .tstep__img { object-position: 50% 45%; }
/* numbered like the invoice page steps: green square digit + green uppercase label; body matches .thread__p */
.tstep__h3 { display: flex; align-items: center; font-family: var(--font-body); font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase; color: var(--green-dark); }   /* Barlow Condensed Bold: heavier than the single-weight Bebas */
.tstep__num { font-family: var(--font-display); font-weight: 400; }
.tstep__num { display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--green); color: var(--black); letter-spacing: 0; }
.tstep a { display: inline-block; font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--green-dark); border-bottom: 2rem solid currentColor; transition: color .2s ease; }
.tstep a:hover, .tstep a:focus-visible { color: var(--black); outline: none; }

/* ---------- tool ---------- */
.tool { background: var(--gray); }
.tool__icon { object-fit: contain; }
.tool__h2 { letter-spacing: .03em; line-height: 1.02; }
.tool__fine { color: #666; }

/* ---------- closing cta ---------- */
.hcta { background: var(--black); color: var(--white); }
.hcta__h2 { letter-spacing: .04em; line-height: 1.01; }
.hcta__p { color: #e6e6e6; }
.hcta__btns { display: flex; }

/* =====================================================================
   DESKTOP (1366 artboard)
   ===================================================================== */
@media (min-width: 761px) {
  /* 840rem tall, but never taller than the viewport so the router stays above the fold: the router is
     anchored to the hero bottom, so the hero must follow the real viewport height (a 1366x768 laptop
     shows ~650px once the browser chrome is on; at 1920 wide the old 720rem floor was 1012px and hid
     half the bar). The floor only guards the copy/router collision; see the short-viewport block below. */
  .hero--home { height: min(840rem, 100vh); height: min(840rem, 100svh); min-height: 560rem; }
  .hero__frame { left: 60rem; right: 60rem; top: 76rem; bottom: 60rem; border-radius: 56rem; }
  .hero__copy { position: absolute; left: 0; right: 0; top: 96rem; }
  .hero__kicker { font-size: 20rem; }
  .hero__title--home { margin-top: 14rem; font-size: 100rem; line-height: .97; letter-spacing: .04em; }
  .hero__sub { margin-top: 18rem; max-width: 900rem; font-size: 24rem; line-height: 32rem; }


  .router { position: absolute; left: 103rem; bottom: 12rem; width: 1160rem; height: 96rem; padding: 0 16rem 0 36rem; border-radius: 48rem; }
  .router__label { margin-right: 24rem; font-size: 30rem; }
  .router__item { flex: 1; gap: 14rem; height: 68rem; padding: 0 18rem; border-radius: 14rem; }
  .router__item::before { content: ""; position: absolute; left: 0; top: 12rem; bottom: 12rem; width: 1px; background: #dcdcdc; }
  .router__icon { width: 44rem; height: 44rem; }
  .router__icon svg { width: 22rem; height: 22rem; }
  .router__text strong { font-size: 24rem; }
  .router__text span { margin-top: 3rem; font-size: 16rem; }
  .router__btn { margin-left: 12rem; height: 60rem; padding: 0 30rem; font-size: 22rem; }

  /* doors */
  .doors .in { padding: 110rem 120rem 100rem; }
  .doors__head { display: grid; grid-template-columns: 440rem 1fr; column-gap: 80rem; align-items: end; }
  .doors__h2 { font-size: 76rem; }
  .doors__lead { max-width: 600rem; font-size: 22rem; line-height: 30rem; }
  .doors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem; margin-top: 64rem; }
  .door__fig { height: 300rem; border-radius: 18rem 18rem 0 0; }
  .door--home .door__fig img { width: 251rem; }   /* same rendered height as the crew (320rem x 880/1000) */
  .door--law  .door__fig img { width: 232rem; }
  .door--work .door__fig img { width: 320rem; }
  .door__bar { padding: 22rem 26rem 24rem; }
  .door__who { font-size: 18rem; }
  .door__h3 { margin-top: 8rem; font-size: 32rem; }
  .door__body { padding: 22rem 26rem 28rem; border-radius: 0 0 18rem 18rem; }
  .door__body p { font-size: 18rem; line-height: 25rem; }
  .door__fine { margin: 16rem 0 22rem; padding-top: 14rem; font-size: 14.5rem; line-height: 19rem; }
  .btn--door { height: 44rem; padding: 0 24rem; font-size: 22rem; }

  /* plain terms */
  .plain .in { padding: 100rem 120rem 110rem; }
  .plain .kicker { font-size: 22rem; }
  .plain__h2 { margin-top: 10rem; font-size: 76rem; }
  .plain__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80rem; margin-top: 54rem; }
  .plain__col h3 { padding-bottom: 16rem; font-size: 30rem; }
  .plain__list li { padding: 18rem 0 18rem 36rem; font-size: 21rem; line-height: 28rem; }
  .plain__list li::before { top: 24rem; font-size: 24rem; }
  .plain__list--yes li::before { top: 27rem; }
  .plain__note { margin-top: 60rem; max-width: 980rem; font-size: 36rem; }

  /* thread */
  .thread .in { padding: 110rem 120rem 100rem; }
  .thread__head { display: grid; grid-template-columns: 520rem 1fr; column-gap: 80rem; align-items: end; }
  .thread__h2 { font-size: 64rem; }
  .thread__p { max-width: 560rem; font-size: 22rem; line-height: 30rem; }
  .thread__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem; margin-top: 64rem; }
  .tstep__img { height: 266rem; border-radius: 18rem; }
  .tstep__h3 { margin-top: 26rem; gap: 10rem; font-size: 25rem; }
  .tstep__num { width: 32rem; height: 32rem; font-size: 27rem; padding-top: 2rem; }
  .tstep p { margin-top: 14rem; font-size: 22rem; line-height: 30rem; }
  .tstep a { margin-top: 18rem; font-size: 20rem; }

  /* tool */
  .tool .in { display: grid; grid-template-columns: 120rem 1fr auto; column-gap: 40rem; align-items: center; padding: 56rem 120rem; }
  .tool__icon { width: 120rem; height: 120rem; }
  .tool__h2 { font-size: 40rem; }
  .tool__p { margin-top: 10rem; max-width: 720rem; font-size: 19rem; line-height: 26rem; }
  .tool__fine { margin-top: 8rem; font-size: 14.5rem; line-height: 19rem; }
  .tool__btn { height: 50rem; padding: 0 32rem; }

  /* closing cta */
  .hcta .in { display: grid; grid-template-columns: 1fr auto; column-gap: 60rem; align-items: center; padding: 90rem 120rem; }
  .hcta__h2 { font-size: 60rem; }
  .hcta__p { margin-top: 16rem; max-width: 640rem; font-size: 21rem; line-height: 28rem; }
  .hcta__btns { gap: 16rem; }
  .hcta__btns .btn { height: 54rem; padding: 0 30rem; }
}

/* ---------------------------------------------------------------------
   SHORT DESKTOP VIEWPORTS: viewport shorter than ~640rem (a 1366-wide window
   under 640px tall, a 1920-wide one under 900px). The hero is now the
   viewport height, so pull the copy up and tighten it so it clears the
   router with room to spare. Aspect ratio stands in for "height in rem"
   because 1rem == 100vw / 1366 (capped past 1920px, so a 2000x790 ultrawide
   window lands here too). The copy keeps its 96rem top: the frame border
   sits at 76rem and the kicker must clear it; the room comes from the type.
   --------------------------------------------------------------------- */
@media (min-width: 761px) and (min-aspect-ratio: 1366/640) {
  .hero__kicker { font-size: 18rem; }
  .hero__title--home { margin-top: 10rem; font-size: 84rem; }
  .hero__sub { margin-top: 12rem; max-width: 860rem; font-size: 22rem; line-height: 29rem; }
}

/* =====================================================================
   PHONES (430 artboard): everything stacks; the router becomes a card
   at the bottom of the hero
   ===================================================================== */
@media (max-width: 760px) {
  .hero--home { height: auto; min-height: 100svh; }
  .hero--home .hero__video { height: 100%; object-position: 50% 35%; }
  .hero__frame { left: 12rem; right: 12rem; top: calc(var(--topbar-h) + 12rem); bottom: 14rem; border-width: 2rem; border-radius: 28rem; }
  .hero--home .in {
    height: auto; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
    padding: calc(var(--topbar-h) + 44rem) 28rem 34rem;
  }
  .hero__copy { position: static; }
  .hero__kicker { font-size: 13rem; letter-spacing: .12em; }
  .hero__kicker-name { display: none; }   /* one line on phones: just the tagline */
  .hero__title--home { margin: 14rem 0 0; font-size: 60rem; line-height: .98; }
  .hero__sub { margin-top: 16rem; font-size: 17rem; line-height: 23rem; }


  .router { flex-direction: column; align-items: stretch; margin-top: auto; padding: 16rem 14rem 14rem; border-radius: 22rem; }
  .hero__sub { margin-bottom: 28rem; }
  .router__label { margin: 0 0 4rem 10rem; font-size: 23rem; }
  .router__item { gap: 12rem; height: 58rem; padding: 0 10rem; border-radius: 12rem; }
  .router__item + .router__item { border-top: 1px solid #e8e8e8; border-radius: 0; }
  .router__icon { width: 38rem; height: 38rem; }
  .router__icon svg { width: 19rem; height: 19rem; }
  .router__text strong { font-size: 20rem; }
  .router__text span { margin-top: 2rem; font-size: 14rem; }
  .router__btn { margin-top: 12rem; height: 48rem; font-size: 19rem; }

  /* doors */
  .doors .in { padding: 60rem 24rem 56rem; }
  .doors__h2 { font-size: 50rem; }
  .doors__lead { margin-top: 16rem; font-size: 17rem; line-height: 23rem; }
  .doors__grid { display: grid; gap: 24rem; margin-top: 36rem; }
  .door__fig { height: 240rem; border-radius: 16rem 16rem 0 0; }
  .door--home .door__fig img { width: 204rem; }
  .door--law  .door__fig img { width: 184rem; }
  .door--work .door__fig img { width: 260rem; }
  .door__bar { padding: 18rem 20rem; }
  .door__who { font-size: 15rem; }
  .door__h3 { margin-top: 6rem; font-size: 27rem; }
  .door__body { padding: 18rem 20rem 22rem; border-radius: 0 0 16rem 16rem; }
  .door__body p { font-size: 16.5rem; line-height: 22rem; }
  .door__fine { margin: 14rem 0 18rem; padding-top: 12rem; font-size: 13.5rem; line-height: 17.5rem; }
  .btn--door { height: 42rem; padding: 0 20rem; font-size: 19rem; }

  /* plain terms */
  .plain .in { padding: 60rem 24rem 64rem; }
  .plain .kicker { font-size: 17rem; }
  .plain__h2 { margin-top: 8rem; font-size: 50rem; }
  .plain__grid { display: grid; row-gap: 34rem; margin-top: 30rem; }
  .plain__col h3 { padding-bottom: 12rem; font-size: 24rem; }
  .plain__list li { padding: 14rem 0 14rem 30rem; font-size: 17rem; line-height: 23rem; }
  .plain__list li::before { top: 18rem; font-size: 21rem; }
  .plain__list--yes li::before { top: 21rem; }
  .plain__note { margin-top: 36rem; font-size: 27rem; }

  /* thread */
  .thread .in { padding: 60rem 24rem 56rem; }
  .thread__h2 { font-size: 46rem; }
  .thread__p { margin-top: 14rem; font-size: 17rem; line-height: 23rem; }
  .thread__steps { display: grid; row-gap: 36rem; margin-top: 34rem; }
  .tstep__img { height: 230rem; border-radius: 16rem; }
  .tstep__h3 { margin-top: 18rem; gap: 8rem; font-size: 21rem; }
  .tstep__num { width: 27rem; height: 27rem; font-size: 23rem; padding-top: 2rem; }
  .tstep p { margin-top: 10rem; font-size: 17rem; line-height: 23rem; }
  .tstep a { margin-top: 14rem; font-size: 18rem; }

  /* tool */
  .tool .in { padding: 44rem 24rem; }
  .tool__icon { width: 90rem; height: 90rem; }
  .tool__h2 { margin-top: 14rem; font-size: 32rem; }
  .tool__p { margin-top: 10rem; font-size: 16.5rem; line-height: 22rem; }
  .tool__fine { margin-top: 8rem; font-size: 13.5rem; line-height: 17.5rem; }
  .tool__btn { margin-top: 18rem; height: 46rem; padding: 0 24rem; font-size: 20rem; }

  /* closing cta */
  .hcta .in { padding: 60rem 24rem 64rem; }
  .hcta__h2 { font-size: 44rem; }
  .hcta__p { margin-top: 14rem; font-size: 17rem; line-height: 23rem; }
  .hcta__btns { flex-direction: column; gap: 12rem; margin-top: 26rem; }
  .hcta__btns .btn { height: 48rem; font-size: 20rem; }
}

.nowrap { white-space: nowrap; }