/* ============================================================
   Cantatore Law — HOME PAGE stylesheet
   Home-page-only styles for the "Meet Franci" introduction that sits
   straight after the audience strip under "You're in the right place".
   Loaded AFTER ./site.css — the shared stylesheet is never modified,
   so no other page is affected. The .v2-* class names are historical
   (this began life as the /v2/ preview, promoted 2026-08-06).
   ============================================================ */

/* ------------------------------------------------------------------
   MEET FRANCI — sits between two paper sections, so it carries a
   slightly warmer ground of its own to read as a distinct moment
------------------------------------------------------------------ */
.v2-intro{
  background:linear-gradient(180deg,#F3EEE3 0%,#F6F2E8 100%);
  padding:clamp(3.2rem,7vh,5.2rem) var(--gutter) clamp(2.6rem,6vh,4rem);
  overflow:hidden;
}
.v2-intro-grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:minmax(260px,.86fr) 1.14fr;
  gap:clamp(2.2rem,5vw,4.6rem);align-items:center;
}

/* portrait */
.v2-portrait{position:relative;max-width:420px;width:100%;justify-self:center}
.v2-portrait .p-frame::before{transform:translate(-16px,16px)}
.v2-portrait .pwrap{aspect-ratio:1/1.06}
.v2-portrait .pwrap img{
  transform:scale(1.04);object-position:center 22%;
  filter:saturate(.92) contrast(1.02) brightness(1.03);
}
.v2-portrait .pwrap::after{background:linear-gradient(200deg,rgba(21,34,60,.06),rgba(21,34,60,0) 45%)}
.v2-namecard{
  position:relative;z-index:3;margin:-2.6rem 0 0 auto;width:max-content;max-width:100%;
  background:#FFFDF8;border-left:2px solid var(--brass);
  box-shadow:0 14px 40px -18px rgba(21,34,60,.35);
  padding:.85rem 1.25rem .9rem;
  display:flex;flex-direction:column;gap:.22rem;
}
.v2-namecard .n{
  font-family:var(--display);font-weight:500;font-size:clamp(.98rem,1.5vw,1.14rem);
  line-height:1.2;color:var(--ink);
}
.v2-namecard .n .c{color:var(--brass)}
.v2-namecard .r{
  font-family:var(--util);font-weight:600;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);
}

/* copy */
.v2-h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,4.1vw,3.2rem);
  line-height:1.1;letter-spacing:-.015em;color:var(--ink);
}
.v2-lede{
  font-size:clamp(1.06rem,1.35vw,1.2rem);line-height:1.72;
  color:var(--ink-soft);max-width:33em;margin-top:1.5rem;
}
.v2-lede-2{
  font-size:clamp(1rem,1.2vw,1.09rem);line-height:1.75;
  color:var(--slate);max-width:34em;margin-top:1rem;
}
.v2-intro-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.9rem}
.v2-intro-actions .btn-ink .arr{transition:transform .3s var(--ease-out)}
.v2-intro-actions .btn-ink:hover .arr{transform:translateY(3px)}
.v2-intro-micro{margin-top:1rem;max-width:34em}

/* the quiet credential line */
.v2-cred{
  max-width:1180px;margin:clamp(2.8rem,6vh,4.2rem) auto 0;
  border-top:1px solid rgba(21,34,60,.1);padding-top:1.5rem;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem 2.2rem;
}
.v2-cred .lbl{
  font-family:var(--util);font-weight:600;font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass);flex:none;
}
.v2-cred ul{
  list-style:none;display:flex;flex-wrap:wrap;gap:.55rem 1.7rem;
  font-size:.95rem;color:var(--slate);
  /* flex:1 1 0 + min-width:0 so the list can shrink and wrap its own items
     rather than keeping its max-content width and overflowing the row */
  flex:1 1 0;min-width:0;
}
.v2-cred li{display:flex;align-items:center;gap:.7rem}
.v2-cred li::before{
  content:"";width:5px;height:5px;background:var(--brass);
  transform:rotate(45deg);flex:none;opacity:.75;
}

/* ------------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------------ */
@media (max-width:1020px){
  .v2-intro-grid{grid-template-columns:1fr;gap:clamp(1.8rem,5vw,2.8rem)}
  /* the photograph comes first on a phone */
  .v2-portrait{justify-self:start;max-width:340px}
  .v2-portrait .p-frame::before{transform:translate(14px,14px)}
  .v2-namecard{margin-left:0;margin-right:auto}
}
@media (max-width:760px){
  .v2-intro-actions{width:100%}
  .v2-intro-actions .btn{flex:1}
  .v2-cred{flex-direction:column;gap:.9rem}
  .v2-cred ul{flex-direction:column;gap:.5rem}
}