/* ============================================================================
   PracticeSteady — Homepage editorial TEMPLATE (layout only)
   Loaded after styles.css. This file provides ONLY the rebuilt homepage
   hero/band/stats template (structure, the photo frames, motion) and styles
   its type with the site's NORMAL fonts (Fraunces / Hanken Grotesk / Spline
   Sans Mono). It does NOT change global typography or any colors.
   ============================================================================ */

:root{
  --ps-paper:#F5F3ED; --ps-ink:#15201E; --ps-body:#46514E; --ps-line:#E2DDD0;
  --ps-accent:#EA7A5A; --ps-accent-ink:#2A140C; --ps-teal:#157A6E;
  --ps-on-dark:#F4EFE7; --ps-on-dark-kick:#D7CFC0;
  --ps-scrim:linear-gradient(105deg,rgba(20,26,23,.88) 0%,rgba(20,26,23,.6) 46%,rgba(20,26,23,.18) 82%);
  --ps-ease:cubic-bezier(.2,.7,.2,1); --ps-reveal:.7s;
}

/* ---- Type roles for the homepage template — SITE-NORMAL fonts ---- */
.ps-eyebrow{font-family:'Spline Sans Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ps-teal)}
.ps-kicker{font-family:'Spline Sans Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ps-teal)}
.ps-lead{font-family:'Hanken Grotesk',sans-serif;font-size:clamp(18px,2vw,20px);line-height:1.55;color:var(--ps-body)}

.ps-display{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-.025em;color:var(--ps-ink);margin:0}
.ps-display .ps-accent-word{color:var(--ps-accent)}

.ps-figure{font-family:'Fraunces',serif;font-weight:500;font-size:50px;line-height:1;letter-spacing:-.02em;color:var(--ps-ink);display:flex;align-items:flex-end;min-height:50px}
.ps-figure--long{font-size:34px;letter-spacing:-.02em}

.ps-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;border:none;justify-content:center;font-family:'Hanken Grotesk',sans-serif}
.ps-btn--cta{font-weight:700;font-size:16px;color:var(--ps-accent-ink);background:var(--ps-accent);padding:16px 28px;border-radius:12px}
.ps-btn--cta:hover{background:#ef8a6d}
.ps-serif-link{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:16px;color:var(--ps-ink);text-decoration:none;border-bottom:1.5px solid rgba(21,32,30,.25);padding-bottom:2px}
.ps-serif-link:hover{border-color:var(--ps-ink)}

.ps-rule{display:flex;align-items:baseline;gap:12px}
.ps-rule .ps-kicker{flex:0 0 auto}
.ps-rule .ln{flex:1;height:1px;background:var(--ps-line)}

/* =============================================================
   HOMEPAGE EDITORIAL LAYOUT (hero / band / stats)
   ============================================================= */
.ps-hero{display:grid;grid-template-columns:1fr 440px;gap:64px;align-items:center;max-width:1180px;margin:0 auto;padding:88px 40px 92px}
.ps-hero__portrait{overflow:hidden;border-radius:16px;height:560px}
.ps-hero__portrait>img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;display:block;animation:ps-kenA 22s ease-in-out infinite alternate}
.ps-dots{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:42px;padding-top:24px;border-top:1px solid var(--ps-line);font-family:'Hanken Grotesk',sans-serif}
.ps-dots span:not(.dot){font-size:13px;color:#46514E}
.ps-dots .dot{width:3px;height:3px;border-radius:50%;background:#C9C2B2}

.ps-band-wrap{max-width:1180px;margin:0 auto;padding:0 40px 88px}
.ps-band{position:relative;border-radius:18px;overflow:hidden;background:#E7E2D6}
.ps-band>img{width:100%;height:520px;object-fit:cover;object-position:50% 30%;display:block;animation:ps-kenB 26s ease-in-out infinite alternate}
.ps-band__scrim{position:absolute;inset:0;pointer-events:none;background:var(--ps-scrim),linear-gradient(to top,rgba(20,26,23,.55),rgba(20,26,23,0) 44%)}
.ps-band__copy{position:absolute;left:52px;bottom:48px;right:52px;pointer-events:none}
.ps-band__quote{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,3.4vw,42px);line-height:1.14;letter-spacing:-.015em;color:var(--ps-on-dark);max-width:640px}
.ps-band__kick{font-family:'Spline Sans Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ps-on-dark-kick);margin-bottom:18px}

.ps-statwrap{border-top:1px solid var(--ps-line);border-bottom:1px solid var(--ps-line);background:#FCFBF7}
.ps-statgrid{display:grid;grid-template-columns:repeat(4,1fr);max-width:1010px;margin:0 auto;padding:54px 40px}
.ps-statgrid>div{padding:0 30px;border-right:1px solid var(--ps-line)}
.ps-statgrid>div:last-child{border-right:none}
.ps-statgrid .lbl{font-family:'Hanken Grotesk',sans-serif;font-size:14px;line-height:1.4;color:#46514E;margin-top:14px}

@media (max-width:900px){
  .ps-hero{grid-template-columns:1fr;gap:40px;padding:64px 28px 72px}
  .ps-hero__portrait{height:420px;order:2}
  .ps-hero__text{order:1}
  .ps-band-wrap{padding:0 28px 64px}
  .ps-band>img{height:360px}
  .ps-band__copy{left:28px;right:28px;bottom:32px}
  .ps-statgrid{grid-template-columns:1fr 1fr;gap:32px 0;padding:44px 28px}
  .ps-statgrid>div{padding:0 22px}
  .ps-statgrid>div:nth-child(2){border-right:none}
}
@media (max-width:540px){
  .ps-statgrid{grid-template-columns:1fr;gap:28px}
  .ps-statgrid>div{border-right:none;padding:0}
  .ps-band__quote{font-size:24px}
}

/* =============================================================
   MOTION — transform-only reveals (never hide essential content)
   ============================================================= */
@keyframes ps-riseIn{from{transform:translateY(20px)}to{transform:translateY(0)}}
@keyframes ps-floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ps-kenA{0%{transform:scale(1.05)}100%{transform:scale(1.16) translate(-2.2%,-1.6%)}}
@keyframes ps-kenB{0%{transform:scale(1.08)}100%{transform:scale(1.18) translate(2.2%,1.6%)}}
.ps-reveal{animation:ps-riseIn var(--ps-reveal) var(--ps-ease) both}
.ps-photo--float{animation:ps-floatY 7.5s ease-in-out 1s infinite}

@media (prefers-reduced-motion:reduce){
  .ps-hero__portrait>img,.ps-band>img,.ps-photo--float,.ps-reveal{animation:none!important}
}