/* ---------------------------------------------------------------------------
   Lev Developments — home page, light sections (Sprint 2)

   Page-local per the sprint's architecture decision: nothing here is used by
   any other page, so it stays out of styles.css/brand-ui.css and off the
   verification path those two carry on every future change. Linked from
   index.html only.

   Three blocks, in scroll order: the proof strip (first photograph on the
   site, directly under the hero), the founder unit (a small portrait added
   to the still-navy "who we are" section), and the client-voice band (the
   named absence of a testimonial). All three build on .section--paper /
   .card / .grid from styles.css rather than redeclaring paper from scratch.
   --------------------------------------------------------------------------- */

/* ---- 1. Proof strip ------------------------------------------------------- */

/* Full content width, hard-cut top and bottom: no gradient, no radius, no
   shadow. This is a site record, not a marketing crop, and the hard edge is
   what says so. */
.proof-strip-photo {
  width: 100%;
  height: auto;
  display: block;
}

/* Mono caption with a brass tick standing in for a bullet or an icon: a
   dimension annotation on the drawing, not a photo credit line. Ink at the
   same 0.72 the shared paper system gives body copy (5.87:1 on #F5F2EC,
   measured) rather than the lighter 0.55 .label uses, because this line has
   to carry real information (the job name, the county, the date) on its
   own, not sit beside a heading the way an eyebrow does. */
.proof-strip-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(26,36,51,0.72);
}
.proof-strip-caption::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--brass-line);
  flex: none;
}

/* Four annotations in a row, divided by navy hairlines, no boxes and no
   fills — the brief is explicit that these read as notes on a drawing, not
   badges. Grid rather than the flex .hero-meta uses elsewhere: the 2x2 fold
   at mobile is a column-count change, which a grid template expresses in one
   declaration where a flex row needs a rewritten basis. */
.proof-strip-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(26px, 3.4vw, 38px);
  border-top: 1px solid rgba(4,38,92,0.18);
  border-bottom: 1px solid rgba(4,38,92,0.18);
}
.proof-strip-tiles span {
  padding: 16px clamp(10px, 1.6vw, 20px);
  border-left: 1px solid rgba(4,38,92,0.18);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.5;
  /* 0.82, not the caption's 0.72: these four lines are the page's first
     credibility claims and short enough that a lighter ink read as
     apologetic in review. Measures 8.15:1 on #F5F2EC. */
  color: rgba(26,36,51,0.82);
}
.proof-strip-tiles span:first-child { border-left: 0; }

@media (max-width: 720px) {
  .proof-strip-tiles { grid-template-columns: repeat(2, 1fr); }
  .proof-strip-tiles span:nth-child(3) { border-left: 0; }
  .proof-strip-tiles span:nth-child(-n+2) { border-bottom: 1px solid rgba(4,38,92,0.18); }
}

/* Card 1's roof photograph, inset inside the card's own padding rather than
   bled to its edges: a bleed would need the padding value duplicated here as
   a negative margin, and any future change to .card's padding would silently
   throw the two out of step. An inset photo costs nothing to keep correct. */
.card-photo {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
}

/* ---- 2. Founder unit (home "who we are") ---------------------------------- */

/* Sits below the section's right-hand column, under a hairline that reads as
   a footnote to the copy above it rather than a fourth paragraph. Still
   navy: only the section's own copy sweep and this addition happen here, the
   section itself does not flip to paper (Sprint 2, item 2). */
.founder-unit {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--line-soft);
}

/* A photograph pinned to a drawing, not an avatar: a thin paper hairline
   frame (not a circle) and a small brass corner tick, the same two-layer
   corner-mark trick the hh-logo lockup and the interior nav mark already use
   elsewhere in the system. 150-170px wide per the brief; clamped rather than
   fixed so it holds proportion on the narrower end of desktop. */
.founder-photo-frame {
  position: relative;
  width: clamp(140px, 13vw, 170px);
  flex: none;
}
.founder-photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--paper-line);
}
.founder-photo-frame::after {
  content: "";
  position: absolute;
  top: -6px; left: -6px;
  width: 16px; height: 16px;
  border-top: 1px solid var(--brass-line);
  border-left: 1px solid var(--brass-line);
  pointer-events: none;
}

.founder-name {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--white);
  margin: 2px 0 5px;
}
/* Same mono-small-caps-on-navy pairing .label and .footer-col h4 already use
   sitewide (white-55 on navy-base measures 5.32:1, confirmed) — reused
   rather than re-picked, so this reads as the same drafting annotation
   voice as everything else on the sheet. */
.founder-role {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-55);
  margin: 0 0 11px;
}
.founder-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--white-90);
  margin: 0;
}

/* ---- 3. Client voice ------------------------------------------------------- */

.client-voice { text-align: center; }
.client-voice .label { justify-content: center; }

.client-voice-rule {
  width: 64px;
  height: 1px;
  margin: 22px auto 30px;
  border: 0;
  background: var(--brass-line);
}

/* The biggest type on the page after the hero display headline, per the
   brief: sized close to the site's own h2 scale rather than past it, so it
   reads as the loudest thing on THIS section without competing with the
   hero. Full ink, not a reduced opacity — this is the one sentence on the
   page meant to be read first. */
.client-voice-statement {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  line-height: 1.4;
  color: #1A2433;
  max-width: 26ch;
  margin: 0 auto 28px;
}
.client-voice-support {
  font-size: 0.98rem;
  line-height: 1.75;
  color: rgba(26,36,51,0.72);
  max-width: 58ch;
  margin: 0 auto;
}

@media (max-width: 560px) {
  .founder-unit { gap: 14px; }
}