/* ==========================================================================
   site-alt.css
   Loaded ONLY by index-alt.html, after site.css.

   This is an alternate homepage layout for side-by-side comparison. It is a
   separate file on purpose: the other 18 pages are audited and shipping, and
   nothing here may reach them. Add-only, no overrides of shared classes.

   Every section below is a documented kit VARIANT of the section that
   index.html uses, so the page order and all cardinality rules still hold:
     hero            centered editorial + full-bleed photo strip
     trust bar       one thin small-caps credential line (the Marlowe
                     new-practice template) instead of a 4-cell grid
     meet the doctor photo LEFT mirror, larger portrait
     USP zigzag      offset rows, text on a raised card overlapping the image
     CTA band        floating card on a tinted stage instead of a full-bleed band
     services grid   6 image-left horizontal cards instead of a 3-up image-top grid
     locations       full-bleed horizontal band instead of a card + map split
   ========================================================================== */

/* ---------- centered editorial hero ---------- */
.hero-c{background:var(--cream);padding-block:clamp(52px,6.5vw,96px) 0;text-align:center}
.hero-c .wrap{display:block}
.hero-kick{
  font-family:var(--display);font-size:.8125rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.19em;color:var(--copper);display:block;margin-bottom:22px;
}
.hero-c h1{
  font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.02;letter-spacing:-.026em;
  max-width:19ch;margin:0 auto 24px;
}
.hero-c .lead{font-size:1.25rem;color:var(--ink);max-width:56ch;margin:0 auto 34px}
.hero-c .btn-row{justify-content:center;margin-top:0}
.hero-c .chips{justify-content:center;margin-top:30px}
.hero-c .hero-note{margin-top:20px}

/* full-bleed 3-photo strip under the hero. Uniform aspect via object-fit so
   portrait and landscape sources sit together without distortion. */
.strip{
  margin-top:clamp(48px,6vw,80px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  width:100vw;margin-left:calc(50% - 50vw);
}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:0}
.strip figure{margin:0;position:relative}
.strip figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 20px 16px;
  font-family:var(--text);font-size:.875rem;color:#fff;text-align:left;
  background:linear-gradient(to top,rgba(27,51,61,.82),rgba(27,51,61,0));
}

/* ---------- credential line: one thin small-caps row ---------- */
.credline{background:var(--slate-deep);color:#C9D6DB;padding-block:20px}
.credline ul{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:10px clamp(16px,2.4vw,32px);
}
.credline li{
  list-style:none;font-family:var(--display);font-size:.8125rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;color:#DCE7EB;
  display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);
}
.credline li+li::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--copper);flex:none;
}

/* ---------- offset zigzag: text card overlaps the image ---------- */
.zig-off{display:grid;gap:clamp(64px,8vw,120px)}
.zrow-off{display:grid;grid-template-columns:repeat(12,1fr);align-items:center}
.zrow-off .zo-media{grid-column:1/8;grid-row:1}
.zrow-off:nth-child(even) .zo-media{grid-column:6/13}
.zrow-off .zo-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-card);box-shadow:var(--sh-2)}
.zrow-off .zo-text{
  grid-column:6/13;grid-row:1;z-index:2;
  background:var(--white);border:1px solid var(--sand-edge);border-radius:var(--r-card);
  padding:clamp(28px,3.2vw,44px);box-shadow:var(--sh-2);
}
.zrow-off:nth-child(even) .zo-text{grid-column:1/8}
.zrow-off .zo-text h2{margin-bottom:14px}
.zo-num{
  font-family:var(--display);font-size:.8125rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--copper);display:block;margin-bottom:10px;
}

/* ---------- CTA as a floating card on a tinted stage ---------- */
.cta-stage{background:var(--sand);padding-block:clamp(56px,7vw,88px)}
.cta-card{
  background:var(--white);border-radius:20px;box-shadow:var(--sh-2);
  padding:clamp(36px,4.6vw,64px);text-align:center;max-width:780px;margin-inline:auto;
  border:1px solid var(--sand-edge);
}
.cta-card img{height:46px;width:auto;margin:0 auto 22px}
.cta-card h2{margin-bottom:14px;max-width:24ch;margin-inline:auto}
.cta-card p{color:var(--ink-soft);max-width:48ch;margin-inline:auto;margin-bottom:28px}

/* ---------- services: 6 image-left horizontal cards ---------- */
.svc-rows{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,26px)}
.svc-row{
  position:relative;display:grid;grid-template-columns:132px 1fr;
  background:var(--white);border:1px solid var(--sand-edge);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--sh-1);transition:transform .16s ease,box-shadow .16s ease;
}
.svc-row:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.svc-row img{width:100%;height:100%;object-fit:cover;min-height:132px}
.svc-row .sr-body{padding:20px 22px}
.svc-row h3{font-size:1.1875rem;margin-bottom:6px}
.svc-row h3 a{color:var(--slate);text-decoration:none}
.svc-row h3 a::after{content:'';position:absolute;inset:0}
.svc-row:hover h3 a{color:var(--copper-deep)}
.svc-row p{font-size:.9688rem;color:var(--ink-soft);margin:0}

/* ---------- locations: full-bleed horizontal band ---------- */
.loc-band{background:var(--slate);color:var(--cream);padding-block:0;overflow:hidden}
.loc-band .lb-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.loc-band .lb-media img{width:100%;height:100%;min-height:420px;object-fit:cover;display:block}
.loc-band .lb-text{padding:clamp(44px,5.5vw,84px) clamp(24px,4vw,64px);align-self:center;max-width:620px}
.loc-band h2{color:var(--cream);margin-bottom:18px}
.loc-band .nap{color:#C9D6DB}
.loc-band .nap .street{color:var(--cream)}
.loc-band .landmark{color:#A9BEC6}
.loc-band .napgrid div{border-top-color:#3A5561}
.loc-band .napgrid .k{color:#8FA6B4}
.loc-band .napgrid a{color:var(--copper-tint)}
.loc-band .napgrid span{color:#C9D6DB}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .strip{grid-template-columns:1fr 1fr;gap:3px}
  .strip figure:last-child{display:none}
  .zrow-off{grid-template-columns:1fr;gap:0}
  .zrow-off .zo-media,.zrow-off:nth-child(even) .zo-media{grid-column:1;grid-row:1}
  .zrow-off .zo-text,.zrow-off:nth-child(even) .zo-text{
    grid-column:1;grid-row:2;margin:-28px 16px 0;
  }
  .svc-rows{grid-template-columns:1fr}
  .loc-band .lb-grid{grid-template-columns:1fr}
  .loc-band .lb-media{order:2}
  .loc-band .lb-media img{min-height:280px}
}
@media (max-width:640px){
  .hero-c h1{font-size:clamp(2.05rem,9vw,2.7rem);max-width:24ch}
  .strip{grid-template-columns:1fr}
  .strip figure:nth-child(2),.strip figure:nth-child(3){display:none}
  .strip img{aspect-ratio:4/3}
  .credline li{font-size:.75rem}
  .svc-row{grid-template-columns:96px 1fr}
  .svc-row img{min-height:110px}
}