/* Kinor 3 project page - additions on top of the shared homepage stylesheet.
   Everything else (header, hero, titles, cards, form, footer, rhythm) comes from
   ../../homepage-static-20260810-v5/styles.css unchanged. */
/* Split hero: white, inside the content width. Breadcrumb, then a grid -
   right column (RTL: first column) = title + label + body text, left column =
   daylight photo, vertically centred across both text rows. 55/45, 48px gap.
   Mobile: breadcrumb, title, photo, text - one column. */
.phero { background: var(--white); padding: 40px var(--gut) 50px; }
.phero-inner { max-width: 1280px; margin: 0 auto; }
.crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.crumbs a { color: var(--blue); }
.crumbs a:hover { color: var(--blue-dark); }
.crumbs-sep { color: var(--muted); font-weight: 400; }
.crumbs-here { color: var(--navy); }
.phero-grid {
  display: grid; grid-template-columns: 55fr 45fr; column-gap: 48px; row-gap: 0;
  grid-template-areas: "head media" "body media"; align-items: center;
}
.phero-head  { grid-area: head; align-self: end; }
.phero-body  { grid-area: body; align-self: start; margin-top: 24px; }
.phero-media { grid-area: media; align-self: center; margin: 0; overflow: hidden; }
.phero-media { aspect-ratio: 1043 / 973; }                          /* = the cropped hero's own ratio: no stretch, no CSS crop */
.phero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }   /* if the box is ever shorter, CSS trims sky, never building */
.phero-head .section-title { text-align: right; }
.phero-sub { margin-top: 8px; }
.phero-body { text-align: right; }
.phero-body p { font-size: 16px; line-height: 1.7; font-weight: 400; color: var(--ink); }
.phero-body p + p { margin-top: 1.2em; }

/* specs: two columns on desktop, one on phones */
.specs-list {
  list-style: none; padding: 0; margin: 50px auto 0; max-width: 1080px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 48px;
}
.specs-list li {
  position: relative; padding-inline-start: 22px;
  font-size: 20px; line-height: 1.5; color: var(--navy); text-align: right;
}
.specs-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .6em; width: 10px; height: 10px; background: var(--blue); }

/* contact form: three inputs + button on one row (desktop), consent on the line below */
.lead-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 20px; align-items: center; }
.lead-row .submit-row { justify-content: stretch; }
.lead-row .submit { width: auto; }

@media (min-width: 1101px) {
  .phero-sub { font-size: 18px; }                                  /* label under the 42px title (shared rule would make it 24px) */
  .contact { padding-bottom: 50px; }                              /* contact -> more projects = 100px too */
}
@media (max-width: 768px) {
  .lead-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lead-row .submit { width: 100%; }
  .phero { padding: 24px var(--gut) 40px; }
  .crumbs { margin-bottom: 20px; }
  .phero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "body"; row-gap: 24px; }
  .phero-body { margin-top: 0; }
  .phero-body p { font-size: 15px; }
  .specs-list { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .specs-list li { font-size: 16px; }
}