/* The selected photo layouts, shared by both landing routes. */
.hero-visual > img { object-position: 50% 14%; }
.hero-visual::after { background: linear-gradient(180deg, #0004, transparent 26%, transparent 65%, #000c); }
.photo-top { max-width: 210px; text-shadow: 0 1px 12px #000; }

/* Approach: one continuous text column beside the portrait. */
#approach {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-areas: "intro photo" "benefits photo";
  gap: 28px 64px;
  padding-block: 80px;
  align-items: start;
}
.photo-approach-intro { display: contents; }
#approach .section-head { grid-area: intro; margin: 0; }
#approach .eyebrow { margin-bottom: 18px; }
#approach h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); }
.photo-approach-figure {
  grid-area: photo;
  position: relative;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
  border-radius: 3px;
}
.photo-approach-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%;
}
#approach .approach-grid { grid-area: benefits; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
#approach .approach-grid article { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 16px; padding: 20px 0; border-top: 1px solid var(--line); }
#approach .approach-grid article:last-child { padding-bottom: 0; }
#approach .index { grid-row: 1 / 3; padding-top: 2px; }
#approach .approach-grid h3 { margin: 0 0 10px; font-size: 1.2rem; }
#approach .approach-grid p { grid-column: 2; max-width: none; font-size: .96rem; }

/* Method: the photograph stays behind legible text on a wide screen. */
#method { padding: 110px 0; min-height: 550px; }
#method .method-background { opacity: .67; object-position: 50% 26%; }
#method::after { background: linear-gradient(90deg, #101112eb 0%, #10111270 43%, #101112d6 78%, #101112ef 100%); }
#method .method-content { align-items: center; }
#method .method-content p { color: #d0d1d2; }

/* Process: the heading and steps determine the portrait's height. */
.photo-process-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas: "photo heading" "photo steps";
  gap: 32px 64px;
  align-items: start;
}
#process .section-head { grid-area: heading; margin: 0; }
#process h2 { font-size: clamp(2rem, 3vw, 2.65rem); }
#process .eyebrow { margin-bottom: 20px; }
.photo-process-figure { grid-area: photo; position: relative; align-self: stretch; min-width: 0; overflow: hidden; border-radius: 3px; }
.photo-process-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
#process .steps { grid-area: steps; display: grid; grid-template-columns: 1fr; gap: 0; }
#process .steps article { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 20px; padding: 24px 0; border-top: 1px solid #424448; }
#process .steps article:first-child { padding-top: 0; border-top: 0; }
#process .steps article:last-child { padding-bottom: 0; }
#process .steps span { grid-row: 1 / 3; font-size: 1.4rem; line-height: 1.2; }
#process .steps h3 { margin: 0 0 10px; font-size: 1.2rem; }
#process .steps p { grid-column: 2; font-size: .93rem; }

/* Contact: one card and one form, without duplicated fields. */
#start { padding: 64px 0; }
#start .contact-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas: "photo intro" "photo form";
  gap: 28px 40px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  align-items: start;
}
.contact-copy { display: contents; }
.contact-intro { grid-area: intro; }
#start .contact-intro h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); word-spacing: .1em; }
#start .contact-intro h2 br { display: none; }
#start .contact-intro .eyebrow { margin-bottom: 16px; }
#start .contact-intro > p:not(.eyebrow) { max-width: 620px; margin: 18px 0; }
.photo-contact-figure { grid-area: photo; position: relative; width: 100%; margin: 0; align-self: stretch; overflow: hidden; border-radius: 3px; }
.photo-contact-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
#start #lead-form { grid-area: form; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 0; margin: 0; border: 0; background: transparent; }
.contact-field { min-width: 0; }
.contact-name { grid-column: 1 / -1; }
#start #lead-form label { margin-bottom: 8px; }
#start #lead-form :is(input, select) { min-width: 0; margin: 0; }
#start #lead-form .button { grid-column: 1 / -1; margin: 0; }
#start .form-note { grid-column: 1 / -1; margin: 0; }

@media (min-width: 1500px) {
  .hero-visual > img { object-position: 50% 6%; }
}
@media (max-width: 1080px) {
  #approach { gap: 26px 36px; grid-template-columns: 1.1fr .9fr; grid-template-areas: "intro intro" "benefits photo"; }
  .photo-process-layout { grid-template-areas: "heading heading" "photo steps"; gap: 32px 40px; }
  #start .contact-grid { grid-template-columns: .8fr 1.2fr; gap: 26px; padding: 24px; }
}
@media (max-width: 800px) {
  #method { padding: 70px 0; min-height: 0; }
  #method::after { background: #101112bb; }
  .photo-process-layout { gap: 28px 30px; }
  #process .steps article { grid-template-columns: 32px 1fr; gap: 0 14px; padding: 20px 0; }
  #process .steps h3 { font-size: 1.08rem; }
  #process .steps p { font-size: .85rem; }
}
@media (max-width: 760px) {
  #approach { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "photo" "benefits"; gap: 24px; padding-block: 56px; }
  #approach h2 { font-size: clamp(1.6rem, 6.5vw, 2.4rem); }
  .photo-approach-figure { width: 100%; aspect-ratio: 1; max-width: 440px; justify-self: start; }
  .photo-approach-figure img { object-position: 50% 55%; }
  #start { padding: 48px 0; }
  #start .contact-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "photo"; padding: 24px; gap: 26px; }
  #start .contact-intro h2 { font-size: clamp(1.8rem, 7.5vw, 2.6rem); }
  .photo-contact-figure { aspect-ratio: 8 / 5; }
}
@media (max-width: 600px) {
  .hero-visual { height: auto; aspect-ratio: 4 / 5; }
  .hero-visual > img { object-position: 50% 10%; }
  .photo-top { font-size: .61rem; top: 15px; left: 16px; letter-spacing: .09em; }
  .photo-caption { bottom: 17px; left: 16px; right: 16px; }
  #method { padding: 28px 0 60px; }
  #method .method-background { position: relative; inset: auto; width: calc(100% - 40px); height: auto; aspect-ratio: 3 / 2; object-fit: contain; opacity: 1; margin: 0 auto 35px; z-index: auto; border-radius: 3px; }
  #method::after { display: none; }
  #method .method-content { gap: 32px; }
  .photo-process-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "photo" "steps"; gap: 28px; }
  #process h2 { font-size: clamp(1.65rem, 7vw, 2.15rem); }
  .photo-process-figure { width: 100%; aspect-ratio: 1; }
  #process .steps { width: 100%; }
  #process .steps article { grid-template-columns: 36px 1fr; gap: 0 18px; padding: 23px 0; }
  #process .steps h3 { font-size: 1.2rem; }
  #process .steps p { font-size: .96rem; }
  #start #lead-form { grid-template-columns: minmax(0, 1fr); }
}