/* ==========================================================
   Yellow Brick Law, APC. Coming soon page
   Loads after styles.css and reuses its brand tokens, button
   and footer text styles. Delete this file at launch.
   ========================================================== */

/* Page frame: logo field, message band and footer fill the screen. */
.cs{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.cs-main{flex:1 0 auto;display:flex;flex-direction:column}

/* Logo field. The soft glow sits behind the starburst at the top of the logo. */
.cs-brand{flex:1 0 auto;display:flex;align-items:center;justify-content:center;padding:48px var(--gutter) 44px;background:radial-gradient(ellipse 60% 55% at 50% 30%,#FFF6DC 0%,#FFFFFF 70%)}
.cs-logo{width:min(100%,600px,66vh);min-width:min(100%,260px)}

/* Message band */
.cs-message{padding:52px var(--gutter) 60px;background:var(--navy);border-top:2px solid var(--gold);color:#FFFFFF;text-align:center}
.cs-message__inner{max-width:720px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.cs-eyebrow{font-size:13px;line-height:1.5;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.cs-title{font-family:var(--serif);font-weight:800;font-size:clamp(32px,8.4vw,60px);line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
.cs-lead{max-width:620px;font-size:18px;color:var(--on-navy);text-wrap:pretty}
.cs-contact{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:14px;max-width:100%}
.cs-contact__label{font-size:13px;line-height:1.5;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--on-navy)}
/* An email address reads better in its own case, so the button drops the uppercase and wide tracking. */
.cs-email{max-width:100%;padding-inline:clamp(10px,4vw,22px);font-size:clamp(13.5px,4.2vw,16px);letter-spacing:.01em;text-transform:none;overflow-wrap:anywhere}

/* Footer */
.cs-footer{padding:32px var(--gutter) 36px;background:var(--navy-deep);border-top:1px solid #2A3F60;text-align:center}
.cs-footer .footer-legal{margin-inline:auto;max-width:860px}
.cs-copyright{margin-top:16px;font-size:13.5px;line-height:1.65;color:var(--on-navy-soft)}

@media (min-width:700px){
  .cs-brand{padding-block:64px 56px}
  .cs-message{padding-block:64px 72px}
  .cs-lead{font-size:19px}
  .cs-email{padding-inline:32px;font-size:17px}
}

/* Motion: only for people who have not asked for reduced motion */
@media (prefers-reduced-motion:no-preference){
  .cs-logo{animation:cs-rise .7s ease-out both}
  .cs-message__inner{animation:cs-rise .7s ease-out .15s both}
}
@keyframes cs-rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}