/* Womenknow Plastic Surgery: violet, lime and blush. Space Grotesk headlines, Manrope text. */
@font-face{font-family:"Space Grotesk";src:url(fonts/SpaceGrotesk-VF.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/Manrope-VF.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
 --violet:#4C3BE0;
 --violet-deep:#3A2BC4;
 --lime:#C8F98C;
 --blush:#FBF0EE;
 --ink:#0E0E14;
 --ink-2:#4A4A55;
 --line:rgba(14,14,20,.12);
 --white:#FFFFFF;
 --wrap:1240px;
 --gut:28px;
 --head:84px;
 --ease:cubic-bezier(.22,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--head);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink-2);font:400 17px/1.6 "Manrope",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
*{-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,blockquote{margin:0;padding:0}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto;position:relative}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;color:var(--ink)}
h3{font-size:30px;line-height:1.3;font-weight:500;letter-spacing:-.05em}
.giant{font-size:clamp(64px,8.9vw,128px);line-height:1;font-weight:700;text-transform:uppercase;letter-spacing:-.04em}
.lime{color:var(--lime)}
.hl{color:var(--violet)}

/* Pill buttons with a round arrow */
.pill{display:inline-flex;align-items:center;gap:6px;text-decoration:none;border:0;padding:0;background:none;cursor:pointer;font:600 16px/1 "Manrope",sans-serif}
.pill>span{display:inline-flex;align-items:center;min-height:54px;padding:0 26px;border-radius:999px;transition:transform .35s var(--ease)}
.pill>i{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;transition:transform .45s var(--ease)}
.pill svg{width:20px;height:20px}
.pill:hover>i{transform:rotate(45deg)}
.pill:hover>span{transform:translateX(-4px)}
.pill-lime>span,.pill-lime>i{background:var(--lime);color:var(--ink)}
.pill-ink>span,.pill-ink>i{background:var(--ink);color:var(--white)}

/* Header */
.head{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--head);display:flex;align-items:center;gap:40px;padding:0 28px 0 22px;color:var(--white);transition:background-color .35s ease,color .35s ease,box-shadow .35s ease}
.head.light{background:rgba(255,255,255,.94);color:var(--ink);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.head.dark{background:rgba(76,59,224,.96)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;margin-right:auto}
.logo-mark{height:34px;width:60px;flex:none}
.head,.menu-open .head{--wk-w:#fff;--wk-k:var(--lime)}
.head.light{--wk-w:var(--violet);--wk-k:#7DBF2E}
.head.dark{--wk-w:#fff;--wk-k:var(--lime)}
.logo-word{display:flex;flex-direction:column}
.logo-word b{font:700 25px/1 "Space Grotesk",sans-serif;letter-spacing:-.04em}
.logo-word small{font:600 10px/1 "Manrope",sans-serif;letter-spacing:.3em;text-transform:uppercase;margin-top:4px;opacity:.8}
.nav{display:flex;gap:30px}
.nav a{text-decoration:none;font-weight:500;font-size:16px;padding:8px 0;opacity:.88;transition:opacity .2s ease}
.nav a:hover{opacity:1}
.head-cta>span{min-height:46px;padding:0 20px;font-size:15px}
.head-cta>i{width:46px;height:46px}
.burger{display:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--lime);cursor:pointer;position:relative}
.burger i{position:absolute;left:14px;right:14px;height:2px;background:var(--ink);transition:transform .3s var(--ease),top .3s var(--ease)}
.burger i:first-child{top:19px}.burger i:last-child{top:27px}
.menu-open .burger i{top:23px}
.menu-open .burger i:first-child{transform:rotate(45deg)}
.menu-open .burger i:last-child{transform:rotate(-45deg)}
.menu{position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:40;background:var(--violet);color:var(--white);padding:calc(var(--head) + 24px) var(--gut) 36px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.menu-open .menu{opacity:1;visibility:visible;transition:opacity .3s ease}
.menu-open{overflow:hidden}
.menu-open .head{background:transparent;color:var(--white);box-shadow:none}
.menu nav{display:grid}
.menu nav a{text-decoration:none;font:700 44px/1.15 "Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:-.03em;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.menu-foot{margin-top:auto}

/* Hero */
.hero{background:var(--violet);color:var(--white);min-height:max(100svh,720px);display:flex;align-items:center;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:calc(var(--head) + 40px) 60px}
.kicker{display:flex;align-items:center;gap:10px;font-size:15px;margin-bottom:22px;color:rgba(255,255,255,.9)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(200,249,140,.25)}
.hero-title{font-size:clamp(70px,11.2vw,168px);line-height:.95;font-weight:700;text-transform:uppercase;letter-spacing:-.045em;color:var(--white)}
.hero-title .line{display:flex;align-items:center;gap:.12em;white-space:nowrap}
.hero-title .line.split{display:block}
.hero-title .lime{color:var(--lime)}
.rings{position:relative;width:.42em;height:.42em;flex:none}
.rings i{position:absolute;inset:0;border:3px solid var(--lime);border-radius:50%}
.rings i:last-child{transform:translateX(42%);border-color:var(--white)}
.hero-right{display:grid;gap:22px;justify-items:start;max-width:380px;justify-self:end}
.down{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--lime);color:var(--ink);transform:rotate(90deg)}
.down svg{width:22px;height:22px}
.hero-pic{width:240px;aspect-ratio:4/5;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px rgba(14,14,20,.35)}
.hero-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-right p{color:rgba(255,255,255,.88)}
.see-all{font:600 15px "Manrope",sans-serif;text-transform:uppercase;letter-spacing:.06em;text-decoration:underline;text-underline-offset:6px}

/* Who we are */
.about{background:var(--blush);padding:110px 0}
.tag{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:40px;color:var(--ink)}
.tag svg{width:34px;height:20px}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.about-pic{border-radius:6px;overflow:hidden;aspect-ratio:4/3}
.about-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.big{font:500 clamp(24px,2.2vw,30px)/1.3 "Space Grotesk",sans-serif;letter-spacing:-.04em;color:var(--ink);margin-bottom:24px}

/* Procedures: big cards, staggered down the page */
.procedures{background:var(--blush);padding:40px 0 120px}
.proc-head{display:grid;grid-template-columns:auto minmax(0,380px);justify-content:space-between;align-items:end;gap:40px;margin-bottom:70px}
.proc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:90px 28px}
.proc figure{border-radius:6px;overflow:hidden;margin-bottom:22px;background:var(--white)}
.proc img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.proc:hover img{transform:scale(1.04)}
.proc h3{margin-bottom:6px}
.proc p{max-width:44ch}
.p1{grid-column:1/8}.p1 figure{aspect-ratio:4/3}.p1 img{object-position:50% 30%}
.p2{grid-column:9/13;margin-top:180px}.p2 figure{aspect-ratio:4/5}.p2 img{object-position:50% 25%}
.p3{grid-column:2/6}.p3 figure{aspect-ratio:4/5}.p3 img{object-position:50% 12%}
.p4{grid-column:7/13;margin-top:120px}.p4 figure{aspect-ratio:16/9}.p4 img{object-position:50% 35%}
.p5{grid-column:1/6;margin-top:60px}.p5 figure{aspect-ratio:1}.p5 img{object-position:50% 40%}
.p6{grid-column:7/13;margin-top:-80px}.p6 figure{aspect-ratio:4/3}.p6 img{object-position:50% 40%}
.center{text-align:center;margin-top:90px}

/* Statement band */
.band{background:var(--violet);color:var(--white);padding:110px 0}
.band-in{text-align:center}
.band-line{font:700 clamp(54px,8.6vw,128px)/1.04 "Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:-.045em}
.band-pic{display:inline-block;width:1.6em;height:.78em;border-radius:8px;overflow:hidden;vertical-align:-.06em;margin-left:.08em}
.band-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* Care */
.care{background:var(--white);padding:120px 0}
.care-head{display:grid;grid-template-columns:auto minmax(0,380px);justify-content:space-between;align-items:end;gap:40px;margin-bottom:70px}
.care-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 48px}
.care-item{display:grid;gap:18px;align-content:start}
.care-item img{width:150px;height:150px;object-fit:contain;margin-left:-10px}
.care-item h3{font-size:24px;margin-bottom:6px}

/* Testimonial */
.voice{background:var(--violet);color:var(--white);padding:100px 0 120px}
.chip{display:inline-flex;gap:10px;border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:8px 14px;font-size:14px;margin-bottom:60px}
.chip span{opacity:.6}
.voice-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px;align-items:center}
.voice-pic{border-radius:6px;overflow:hidden;aspect-ratio:4/5}
.voice-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.voice blockquote{margin:0}
.q{width:52px;height:44px;color:var(--lime);margin-bottom:22px}
.voice blockquote p{font:500 clamp(26px,2.6vw,38px)/1.3 "Space Grotesk",sans-serif;letter-spacing:-.04em;color:var(--white);margin-bottom:30px}
.voice footer{display:grid;gap:2px}
.voice footer b{color:var(--lime);font-weight:700}

/* We help */
.help{background:var(--blush);padding:130px 0;text-align:center}
.help-title{font:500 clamp(46px,6.6vw,96px)/1.05 "Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:-.03em;color:var(--ink)}
.spark{display:inline-block;width:.32em;height:.32em;border-radius:50%;background:radial-gradient(circle,var(--violet) 0 30%,transparent 31%),conic-gradient(from 0deg,var(--lime),var(--violet),var(--lime));vertical-align:.12em}
.help-sub{margin-top:30px;font-size:20px;color:var(--ink-2)}

/* Surgeons: the title stays put while the list scrolls */
.surgeons{background:var(--white);padding:120px 0}
.surgeons-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
.surgeons-head{position:sticky;top:calc(var(--head) + 30px)}
.surgeons .giant{font-size:clamp(56px,6.2vw,90px)}
.small-kick{font-size:15px;color:var(--ink);margin-bottom:-6px}
.surgeons-head>p:last-child{margin-top:18px;max-width:34ch}
.dr-list{display:grid;gap:56px}
.dr{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:center;padding-bottom:56px;border-bottom:1px solid var(--line)}
.dr:last-child{border-bottom:0;padding-bottom:0}
.dr img{width:220px;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:6px}
.meta{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--violet);margin-bottom:8px}
.meta i{width:24px;height:1px;background:var(--violet)}
.dr h3{margin-bottom:8px}

/* Contact */
.contact{background:var(--violet);color:var(--white);padding:120px 0}
.contact .giant{color:var(--white);margin-bottom:22px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.contact-grid>div>p{max-width:42ch;color:rgba(255,255,255,.9);margin-bottom:18px}
.contact-lines a{color:var(--lime);font-weight:600}
.form{display:grid;gap:18px;background:var(--white);color:var(--ink);padding:40px;border-radius:8px}
.form label{display:grid;gap:8px}
.form label span{font-weight:600;color:var(--ink)}
.form input,.form select{width:100%;min-height:52px;border:1.5px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);font:inherit;padding:0 14px;outline:0;transition:border-color .2s ease}
.form input:focus,.form select:focus{border-color:var(--violet)}
.form .bad input{border-color:#B3261E}
.form-msg{font-weight:600;color:var(--ink)}
.form .pill{justify-self:start;margin-top:6px}

/* Footer */
.foot{background:var(--violet);color:var(--white);padding-bottom:30px}
.marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);padding:22px 0}
.marquee-track{display:flex;align-items:center;gap:48px;width:max-content;animation:roll 30s linear infinite}
.marquee span{font:700 clamp(80px,12vw,180px)/1 "Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:-.05em}
.marquee svg{width:clamp(110px,15vw,220px);height:clamp(62px,8.5vw,125px);--wk-w:#fff;--wk-k:var(--lime)}
@keyframes roll{to{transform:translateX(-50%)}}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1fr);gap:48px;padding-top:70px}
.foot-cta p{font:500 24px/1.35 "Space Grotesk",sans-serif;letter-spacing:-.03em;max-width:24ch;margin-bottom:18px}
.foot-cta a{display:inline-flex;align-items:center;gap:6px;color:var(--lime);font-weight:600;text-underline-offset:5px}
.foot-cta svg{width:18px;height:18px}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col a{text-decoration:none;opacity:.9}
.foot-col a:hover{opacity:1;color:var(--lime)}
.foot-col p{opacity:.9}
.copy{margin-top:70px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);font-size:13px;opacity:.85}

/* Motion. Headline letters slide in from the right one by one; the small line slides
   in from the side; text blocks rise 40px into place. */
.char{display:inline-block;white-space:pre}
.js .split .char,.js .split-side{opacity:0;transform:translate3d(40px,0,0)}
.js .rise,.js .rv.up{opacity:0;transform:translate3d(0,40px,0)}
.js .split .char,.js .split-side,.js .rise,.js .rv{transition:opacity .8s ease,transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js .rings{opacity:0;transform:translate3d(40px,0,0);transition:opacity .8s ease .95s,transform .9s var(--ease) .95s}
.ready .split .char,.ready .split-side,.ready .rise,.ready .rings,.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
 .js .split .char,.js .split-side,.js .rise,.js .rv,.js .rings{opacity:1;transform:none;transition:none}
 .marquee-track{animation:none}
}

/* Tablet */
@media (max-width:991px){
 :root{--gut:24px}
 .nav,.head-cta{display:none}
 .burger{display:block}
 .hero-grid{grid-template-columns:1fr;gap:40px}
 .hero-right{justify-self:start;grid-template-columns:auto minmax(0,1fr);max-width:none;align-items:center;column-gap:24px}
 .hero-right .down{display:none}
 .hero-pic{width:180px;grid-row:span 2}
 .about-grid,.voice-grid,.contact-grid,.surgeons-grid{grid-template-columns:1fr;gap:44px}
 .surgeons-head{position:static}
 .proc-head,.care-head{grid-template-columns:minmax(0,1fr);gap:16px}
 .proc-grid{gap:56px 24px}
 .p1,.p3,.p5{grid-column:1/13;margin-top:0}
 .p2,.p4,.p6{grid-column:1/13;margin-top:0}
 .p2 figure,.p3 figure,.p5 figure{aspect-ratio:4/3}
 .care-grid{grid-template-columns:1fr 1fr}
 .voice-pic{max-width:380px}
 .foot-grid{grid-template-columns:1fr 1fr}
 .foot-cta{grid-column:1/-1}
}

/* Phone */
@media (max-width:640px){
 :root{--gut:20px;--head:72px}
 body{font-size:16px}
 .head{padding:0 16px 0 14px;gap:16px}
 .logo-mark{height:28px;width:50px}
 .logo-word b{font-size:22px}
 .hero{min-height:max(100svh,640px)}
 .hero-title{font-size:clamp(58px,17vw,86px)}
 .giant{font-size:clamp(44px,13.5vw,64px)}
 .surgeons .giant{font-size:clamp(44px,13.5vw,64px)}
 .hero-right{grid-template-columns:1fr}
 .hero-pic{width:150px;grid-row:auto}
 .about,.care,.voice,.surgeons,.contact{padding:84px 0}
 .procedures{padding-bottom:84px}
 .help{padding:90px 0}
 .care-grid{grid-template-columns:1fr;gap:40px}
 .care-item img{width:130px;height:130px}
 .band{padding:80px 0}
 .dr{grid-template-columns:1fr;gap:18px}
 .dr img{width:100%;max-width:300px}
 .form{padding:26px 20px}
 .foot-grid{grid-template-columns:1fr}
}