/* Home hero (TODO 00001.5.13). FINAL design/home/inspiration/sections/hero/r3/v2.png; DESIGN-GUIDE.md sections 5-8.
   Split, not a fade: white copy column left, the plant photograph runs from beside it to the right edge
   (no gradients, section 7), the AI panel sits over the photograph with one AI leader to the gauge. */
.p-home-hero {
  position: relative; box-sizing: border-box; overflow: hidden;
  background: var(--wp--preset--color--white);
  padding-block: var(--wp--custom--section--desktop);
  min-height: 600px;
  display: flex; align-items: center;
}
.p-home-hero *, .p-home-hero *::before, .p-home-hero *::after { box-sizing: border-box; }
.p-home-hero__photo {
  position: absolute; top: 0; bottom: 0; right: 0; margin: 0;
  left: calc(max(var(--wp--custom--gutter--desktop), (100% - var(--wp--custom--layout--wide)) / 2) + 3 * var(--wp--preset--spacing--130) + var(--wp--preset--spacing--60));
}
.p-home-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.p-home-hero__inner {
  position: relative; width: min(100% - 2 * var(--wp--custom--gutter--desktop), var(--wp--custom--layout--wide)); margin-inline: auto;
  display: grid; grid-template-columns: calc(3 * var(--wp--preset--spacing--130)) minmax(0, 520px); column-gap: var(--wp--preset--spacing--70);
  align-items: center;
}
.p-home-hero__eyebrow {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--label);
  font-weight: var(--wp--custom--font-weight--label); letter-spacing: var(--wp--custom--letter-spacing--label);
  line-height: 1.3; text-transform: uppercase;
}
.p-home-hero__eyebrow::before { content: ""; flex: none; width: 32px; height: 3px; background: var(--wp--preset--color--orange); }
.p-home-hero .p-home-hero__title {
  margin-top: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--display); font-weight: var(--wp--custom--font-weight--display);
  letter-spacing: var(--wp--custom--letter-spacing--display); line-height: 1.05; color: var(--wp--preset--color--navy);
}
.p-home-hero__lead {
  margin-top: var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--body-l); line-height: 1.6; color: var(--wp--preset--color--ink);
}
.p-home-hero__actions { margin-top: var(--wp--preset--spacing--80); }
.p-home-hero__cta .wp-block-button__link {
  position: relative; display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--40);
  min-height: var(--wp--custom--control); padding: 14px var(--wp--preset--spacing--60);
  border-radius: var(--wp--custom--radius--default); line-height: 1; text-decoration: none;
}
.p-home-hero__cta .wp-block-button__link::after {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s cubic-bezier(.22, .61, .36, 1);
}
/* Hover fill (00001.5.22.13.b, the .12 rule): a layer over the padding box whose opacity fades at the kit's hover token, navy at
   8 percent ABOVE the navy label (navy over navy leaves the label as it is); never an animated box-shadow. Press: scale .98 at once. */
.p-home-hero__cta .wp-block-button__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: var(--wp--custom--alpha--overlay-navy); transition: opacity var(--mo-hover) var(--mo-ease); }
.p-home-hero__cta .wp-block-button__link:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--orange); outline-offset: var(--wp--custom--focus--offset);
}
@media (hover: hover) and (pointer: fine) {
  .p-home-hero__cta .wp-block-button__link:hover::before { opacity: 1; }
  .p-home-hero__cta .wp-block-button__link:hover::after { transform: translateX(3px); }
}
.p-home-hero__cta .wp-block-button__link:active { transform: scale(.98); }

/* AI panel: ai-surface ground, 1px ai edge, 4px radius, 24px padding (section 8 AI panel). */
.p-home-hero__ai-wrap { position: relative; align-self: end; margin-top: var(--wp--preset--spacing--110); }
.p-home-hero__ai {
  background: var(--wp--preset--color--ai-surface); border: 1px solid var(--wp--preset--color--ai);
  border-radius: var(--wp--custom--radius--default); padding: var(--wp--preset--spacing--60);
  box-shadow: var(--wp--custom--shadow); color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--small); line-height: 1.5;
}
:where(.p-home-hero__ai) p { margin: 0; }
.p-home-hero__ai-label {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--30); color: var(--wp--preset--color--ai);
  font-size: var(--wp--preset--font-size--label); font-weight: var(--wp--custom--font-weight--label);
  letter-spacing: var(--wp--custom--letter-spacing--label); text-transform: uppercase; line-height: 1.3;
}
.p-home-hero__ai-q {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--default); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--body); color: var(--wp--preset--color--ink);
}
.p-home-hero__ai-q .p-icon { color: var(--wp--preset--color--slate); }
.p-home-hero__ai-a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--wp--preset--spacing--40);
  margin-top: var(--wp--preset--spacing--60);
}
.p-home-hero__ai-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--ai);
  border-radius: var(--wp--custom--radius--default); color: var(--wp--preset--color--ai);
}
.p-home-hero__ai-name {
  color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--body); font-weight: 600; line-height: 1.4;
}
.p-home-hero__ai-text { margin-top: var(--wp--preset--spacing--20); color: var(--wp--preset--color--ink); }
/* The AI leader (section 7): a sibling of the panel (never inside its box), set on the answer name's line
   (the panel is 520px wide from 1200, its type fixed), running right into the photograph to a 6px dot. */
.p-home-hero__leader {
  position: absolute; left: 407px; top: 141px; width: 300px; height: 1px;
  background: var(--wp--preset--color--ai); pointer-events: none;
}
.p-home-hero__leader::after {
  content: ""; position: absolute; right: -3px; top: -3px; width: 6px; height: 6px;
  border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--ai);
  box-shadow: 0 0 0 2px var(--wp--preset--color--white);
}
.p-home-hero__chips {
  list-style: none; margin: var(--wp--preset--spacing--50) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30);
}
.p-home-hero__chips a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--ai);
  border-radius: var(--wp--custom--radius--default); color: var(--wp--preset--color--ai);
  font-size: var(--wp--preset--font-size--small); font-weight: 500; line-height: 1.2; text-decoration: none;
}
.p-home-hero__chips a:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .p-home-hero__chips a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.p-home-hero__ask {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--50);
  height: var(--wp--custom--control); padding-left: var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--slate);
  border-radius: var(--wp--custom--radius--default); color: var(--wp--preset--color--ai);
}
.p-home-hero__ask input {
  flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent;
  font: 400 var(--wp--preset--font-size--body)/1 var(--wp--preset--font-family--montserrat); color: var(--wp--preset--color--ink);
}
.p-home-hero__ask input::placeholder { color: var(--wp--preset--color--slate); opacity: 1; }
.p-home-hero__ask input:focus { outline: none; }
.p-home-hero__ask:focus-within {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: 2px;
}
.p-home-hero__ask button {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: 3px; border: 0; cursor: pointer;
  background: var(--wp--preset--color--ai); color: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--default);
}
.p-home-hero__ask button:focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: 2px; }
.p-home-hero__ai-note { margin-top: var(--wp--preset--spacing--60); color: var(--wp--preset--color--ai); font-size: var(--wp--preset--font-size--small); }

/* Under 1200 (the panel would cover the gauge): copy, then the photograph, then the AI panel over its foot. The inner grid dissolves
   (display: contents) so the three parts reorder. No leader (at most one per view, it would cross the copy). */
@media (max-width: 1199.98px) {
  .p-home-hero {
    display: flex; flex-direction: column; min-height: 0;
    padding-bottom: 0 !important; /* the AI panel ends the hero; the next white section's top padding is the gap */
  }
  .p-home-hero__inner { display: contents; }
  .p-home-hero__copy { order: 1; width: calc(100% - 2 * var(--wp--custom--gutter--desktop)); margin-inline: auto; }
  .p-home-hero__copy > * { max-width: 600px; }
  .p-home-hero__photo {
    order: 2; position: relative; left: auto; right: auto; top: auto; bottom: auto;
    width: 100%; aspect-ratio: 16 / 9; margin-top: var(--wp--preset--spacing--90);
  }
  .p-home-hero__photo img { object-position: 72% 50%; }
  .p-home-hero__ai-wrap {
    order: 3; align-self: flex-start; width: min(100% - 2 * var(--wp--custom--gutter--desktop), 600px);
    margin: calc(-1 * var(--wp--preset--spacing--110)) 0 0 var(--wp--custom--gutter--desktop);
  }
  .p-home-hero__leader { display: none; }
}
@media (max-width: 991.98px) {
  .p-home-hero { padding-block: var(--wp--custom--section--tablet); }
  .p-home-hero__copy { width: calc(100% - 2 * var(--wp--custom--gutter--tablet)); }
  .p-home-hero__ai-wrap { width: min(100% - 2 * var(--wp--custom--gutter--tablet), 600px); margin-left: var(--wp--custom--gutter--tablet); }
}
/* Under 840 the panel spans the content width, so its right margin equals the left (gap-check stray margin at 768). */
@media (max-width: 839.98px) {
  .p-home-hero__ai-wrap { width: calc(100% - 2 * var(--wp--custom--gutter--tablet)); }
}
@media (max-width: 599.98px) {
  .p-home-hero { padding-block: var(--wp--custom--section--phone); }
  .p-home-hero__copy { width: calc(100% - 2 * var(--wp--custom--gutter--phone)); }
  .p-home-hero__ai-wrap { width: calc(100% - 2 * var(--wp--custom--gutter--phone)); margin-left: var(--wp--custom--gutter--phone); }
  .p-home-hero__photo { aspect-ratio: 4 / 3; margin-top: var(--wp--preset--spacing--70); }
  .p-home-hero__ai-wrap { margin-top: calc(-1 * var(--wp--preset--spacing--90)); }
  .p-home-hero__photo img { object-position: 78% 50%; }
  .p-home-hero__ai { padding: var(--wp--preset--spacing--50); }
}

/* Motion (stage 10, 00001.5.22; design/FINDINGS.md "Motion inventory: hero"). Moves are set by inc/motion.php and the
   pattern's data-mo attributes; these are the hook start states, all under html.mo so JS off, reduced motion and
   print show the final state. The eyebrow rule draws across; the AI panel rises with its text visible (transform only);
   the leader's dot lands on the gauge as the line arrives. */
.mo .p-home-hero__eyebrow[data-mo]::before { transform-origin: 0 50%; transition: transform var(--mo-dur) var(--mo-ease); }
.mo .p-home-hero__eyebrow[data-mo]:not(.mo-in)::before { transform: scaleX(0); }
.mo .p-home-hero__ai[data-mo]:not(.mo-in) { transform: translate3d(0, var(--mo-rise), 0); }
.mo .p-home-hero__leader[data-mo]::after { transition: transform .9s var(--mo-ease-settle) 1.9s; }
.mo .p-home-hero__leader[data-mo]:not(.mo-in)::after { transform: scale(0); }