/* Coming-soon page for yuliamamaeva.com: the law-firm site's hero, with a preview password field.
   Colors, fonts and the hero look match site.css and law.css. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/manrope-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/manrope-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/manrope-latin-600-normal.woff2") format("woff2")}

:root{
  --ink:#282338;--accent:#4022A5;--button-deep:#381E91;--pearl:#F7F8FA;--white:#FFFFFF;--silver:#C4C7CE;--slate:#625F6C;
  --serif:"Cormorant Garamond",Georgia,serif;--sans:"Manrope",Arial,sans-serif;
  --side:24px;--ease-cine:cubic-bezier(.16,1,.3,1);--head-h:76px;
}
@media (min-width:900px){:root{--side:64px}}
@media (min-width:600px){:root{--head-h:96px}}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--pearl);color:var(--slate);font-family:var(--sans);font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
.cs-wrap{width:100%;max-width:calc(1200px + 2 * var(--side));margin:0 auto;padding-inline:var(--side)}

/* Logo: the header rests on the picture, as on the site */
.cs-head{position:absolute;top:0;left:0;right:0;z-index:2;padding-top:env(safe-area-inset-top,0px)}
.cs-head .cs-wrap{display:flex;align-items:center;min-height:var(--head-h)}
.cs-logo{height:30px;width:auto}
@media (min-width:600px){.cs-logo{height:36px}}

/* Hero */
.cs{position:relative;flex:1;overflow:hidden;background:var(--pearl)}
.cs-pic{display:block;position:relative;overflow:hidden;margin-top:calc(var(--head-h) + env(safe-area-inset-top,0px))}
.cs-pic img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 0;animation:cs-settle 9s var(--ease-cine) both}
.cs-in{position:relative;padding-block:40px 56px}
.cs-copy > *{animation:cs-rise 1.5s var(--ease-cine) both}
.cs-copy > .eyebrow{animation-delay:.25s}
.cs-copy > h1{animation-delay:.5s}
.cs-copy > .lead{animation-delay:.85s}
.cs-copy > .cs-form{animation-delay:1.15s}
@media (min-width:600px) and (max-width:1023px){.cs-pic img{aspect-ratio:16/9;object-position:74% center}}
@media (min-width:1024px){
  .cs{min-height:clamp(600px,100svh,900px)}
  .cs-pic{position:absolute;inset:0;margin-top:0}
  .cs-pic img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:74% 22%}
  .cs-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,248,250,.92) 0%,rgba(247,248,250,.78) 34%,rgba(247,248,250,0) 58%)}
  .cs-in{min-height:inherit;display:flex;align-items:center;padding-block:calc(var(--head-h) + 24px) 56px}
  .cs-copy{max-width:640px}
}

/* Type, from the site */
.eyebrow{margin:0 0 20px;font-size:12px;line-height:17px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
@media (min-width:900px){.eyebrow{font-size:13px;line-height:19px}}
h1{margin:0;font-family:var(--serif);font-weight:500;color:var(--ink);letter-spacing:-0.02em;font-size:44px;line-height:48px;text-wrap:balance}
h1 em{display:block;font-style:italic}
@media (min-width:1024px){h1{font-size:clamp(48px,3.9vw,56px);line-height:1.05}}
.lead{margin:28px 0 0;max-width:560px;font-size:20px;line-height:32px}
@media (min-width:900px){.lead{font-size:22px;line-height:35px}}

/* Preview password */
.cs-form{margin-top:40px;max-width:520px}
.cs-form label{display:block;margin-bottom:12px;font-size:16px;line-height:24px;font-weight:500;color:var(--ink)}
.cs-row{display:flex;flex-wrap:wrap;gap:12px}
.cs-row input{flex:1 1 220px;min-width:0;min-height:52px;padding:12px 22px;border:1.5px solid var(--silver);border-radius:999px;background:var(--white);color:var(--ink);font:400 16px/24px var(--sans)}
.cs-row input::placeholder{color:#8E8B97}
.cs-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(64,34,165,.14)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 30px;border:1.5px solid var(--accent);border-radius:999px;background:var(--accent);color:var(--white);font:600 16px/22px var(--sans);cursor:pointer;box-shadow:0 14px 28px -16px rgba(64,34,165,.7);transition:background 200ms ease,box-shadow 200ms ease}
.btn:hover{background:var(--button-deep);box-shadow:0 18px 34px -16px rgba(64,34,165,.8)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cs-error{margin:14px 0 0;font-size:15px;line-height:22px;color:#A12245}
@media (max-width:599px){.cs-row .btn{flex:1 1 100%}}

/* Footer */
.cs-foot{background:var(--pearl);border-top:1px solid var(--silver);padding-block:28px}
.cs-foot p{margin:0;font-size:14px;line-height:20px;color:var(--slate)}

@keyframes cs-rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes cs-settle{from{transform:scale(1.07)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.cs-copy > *,.cs-pic img{animation:none}}