.sites-page-body { background: #fbf8f5; }
.sites-header .nav-shell { background: rgba(255,252,248,.84); }
.sites-header .nav-cta { background: #3a173f; }

.sites-hero { position: relative; min-height: 900px; padding: 180px 0 0; overflow: hidden; background: linear-gradient(145deg, #fffaf5, #f5ece9 52%, #eee8f8); }
.sites-hero::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(62,25,68,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(62,25,68,.08) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.sites-hero-orb { position: absolute; border-radius: 50%; filter: blur(5px); }
.orb-coral { width: 600px; height: 600px; right: -290px; top: -180px; background: radial-gradient(circle, rgba(255,105,77,.2), transparent 68%); }
.orb-violet { width: 520px; height: 520px; left: -330px; bottom: -180px; background: radial-gradient(circle, rgba(112,52,234,.14), transparent 68%); }
.sites-hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: .94fr 1.06fr; gap: 50px; align-items: center; }
.sites-kicker { margin: 0 0 22px; color: #7c3474; font-size: 12px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.sites-kicker span { color: #d10869; font-family: Georgia, serif; font-size: 18px; font-style: italic; letter-spacing: -.03em; text-transform: lowercase; }
.sites-hero h1 { margin: 0; max-width: 660px; font-size: clamp(58px, 6.1vw, 84px); line-height: .98; letter-spacing: -.065em; }
.sites-hero h1 em { color: #7b2a78; }
.sites-hero-copy > p:not(.sites-kicker) { max-width: 610px; margin: 30px 0 0; color: #675b67; font-size: 18px; }
.sites-hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.sites-button { color: white; background: linear-gradient(120deg, #3a173f, #8c296f); box-shadow: 0 16px 36px rgba(65,21,70,.22); }
.sites-text-link { padding-bottom: 4px; border-bottom: 1px solid rgba(48,21,50,.25); font-size: 14px; font-weight: 800; }
.sites-text-link span { margin-left: 8px; color: #c40866; }

.sites-hero-visual { position: relative; height: 570px; perspective: 1000px; }
.hero-site-window { position: absolute; width: 600px; height: 465px; left: 0; top: 30px; overflow: hidden; border: 8px solid #2d1534; border-radius: 24px; background: #fffdf9; box-shadow: -20px 35px 80px rgba(53,20,63,.21); transform: rotate(1.5deg) rotateY(-4deg); transform-origin: left center; }
.hero-window-bar { height: 37px; display: flex; align-items: center; gap: 6px; padding: 0 13px; background: #eee9ee; color: #9b919d; font-size: 8px; }
.hero-window-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d0c6d0; }.hero-window-bar i:first-child { background: #ef7468; }
.hero-window-bar span { margin-left: 8px; padding: 5px 90px; border-radius: 6px; background: white; }
.hero-window-nav { display: flex; justify-content: space-between; padding: 27px 30px 0; color: #352d36; font-size: 8px; text-transform: uppercase; letter-spacing: .15em; }
.hero-window-nav b { font-size: 14px; letter-spacing: .08em; }
.hero-window-content { display: grid; grid-template-columns: .9fr 1.1fr; gap: 25px; align-items: center; padding: 25px 30px; }
.hero-window-content small, .hero-window-content strong, .hero-window-content em { display: block; }
.hero-window-content small { color: #a34163; font-size: 7px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.hero-window-content strong { margin-top: 12px; font-family: Georgia, serif; font-size: 34px; line-height: 1; font-weight: 400; letter-spacing: -.04em; }
.hero-window-content p { margin: 14px 0 0; color: #756d74; font-size: 9px; line-height: 1.6; }
.hero-window-content em { margin-top: 25px; font-size: 8px; font-weight: 850; font-style: normal; }
.hero-window-art { position: relative; height: 305px; overflow: hidden; background: linear-gradient(145deg, #cf967c, #e8bba2 48%, #824862); }
.hero-window-art::before { content: ""; position: absolute; width: 180px; height: 245px; left: 72px; bottom: -62px; border-radius: 100px 100px 24px 24px; background: linear-gradient(150deg, #f5dfd0, #b65f59); box-shadow: -30px -10px 50px rgba(74,31,46,.2); transform: rotate(-8deg); }
.hero-window-art i { position: absolute; border-radius: 50%; }.hero-window-art i:nth-child(1) { width: 82px; height: 82px; left: 28px; top: 30px; background: rgba(255,247,235,.8); }.hero-window-art i:nth-child(2) { width: 42px; height: 42px; right: 25px; top: 42px; background: #4e2644; }.hero-window-art i:nth-child(3) { width: 100px; height: 19px; right: 14px; bottom: 26px; background: rgba(65,27,46,.25); }
.hero-site-phone { position: absolute; z-index: 3; width: 174px; height: 345px; right: -15px; bottom: 5px; padding: 20px; border: 7px solid #2d1534; border-radius: 31px; color: white; background: linear-gradient(rgba(45,21,52,.08), rgba(45,21,52,.56)), linear-gradient(145deg, #cf967c, #824862); box-shadow: 0 26px 55px rgba(49,17,56,.28); transform: rotate(-4deg); }
.hero-site-phone > div { display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: .1em; }.hero-site-phone > div i { width: 16px; height: 1px; background: white; box-shadow: 0 5px white; }
.hero-site-phone small, .hero-site-phone strong { display: block; }.hero-site-phone small { margin-top: 75px; font-size: 6px; letter-spacing: .13em; text-transform: uppercase; }.hero-site-phone strong { margin-top: 10px; font-family: Georgia, serif; font-size: 23px; line-height: 1.03; font-weight: 400; }.hero-site-phone > span { display: inline-block; margin-top: 28px; padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.7); font-size: 8px; font-weight: 800; }
.sites-float-note { position: absolute; z-index: 5; left: -20px; bottom: 75px; padding: 12px 16px; border-radius: 13px; background: white; box-shadow: 0 17px 35px rgba(58,23,66,.18); font-size: 10px; font-weight: 800; transform: rotate(-3deg); }.sites-float-note b { margin-left: 8px; color: #c40866; }
.sites-proof { position: relative; z-index: 2; display: flex; justify-content: space-between; margin-top: 36px; padding: 26px 0; border-top: 1px solid rgba(54,23,58,.12); color: #786d78; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.sites-intro { display: grid; grid-template-columns: 250px 1fr; gap: 55px; align-items: start; }
.sites-eyebrow { margin: 0; display: flex; align-items: center; gap: 10px; color: #7c3474; font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }.sites-eyebrow > span { width: 22px; height: 2px; background: linear-gradient(90deg, #c40866, #f06d57); }
.sites-intro h2, .fit-heading h2, .value-copy h2, .process-heading h2, .sites-cta h2 { margin: 0; font-size: clamp(48px, 5.5vw, 72px); line-height: 1.02; letter-spacing: -.055em; }
.sites-intro h2 em, .value-copy h2 em, .sites-cta h2 em { color: #8b2c77; }
.sites-intro > div > p { max-width: 750px; margin: 28px 0 0; color: #675e68; font-size: 18px; }
.sites-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 70px; }
.sites-benefit { position: relative; min-height: 360px; padding: 32px; border: 1px solid rgba(64,27,69,.09); border-radius: 24px; background: white; box-shadow: 0 18px 50px rgba(61,24,71,.06); }
.sites-benefit > span { color: #b0a4af; font-size: 10px; font-weight: 850; }.sites-benefit h3 { margin: 85px 0 13px; font-size: 23px; line-height: 1.15; }.sites-benefit p { margin: 0; color: #756b75; font-size: 14px; }
.benefit-icon { position: absolute; top: 28px; right: 28px; width: 72px; height: 72px; border-radius: 18px; background: #f6edf2; }.benefit-icon i { position: absolute; display: block; background: #a93475; }
.design-icon i:first-child { width: 31px; height: 38px; left: 16px; top: 17px; border-radius: 5px; transform: rotate(-8deg); }.design-icon i:last-child { width: 22px; height: 30px; right: 13px; bottom: 12px; border-radius: 4px; background: #f06d57; transform: rotate(7deg); }
.speed-icon i { width: 35px; height: 35px; left: 18px; top: 18px; border: 6px solid #7b2a78; border-left-color: transparent; border-radius: 50%; background: transparent; transform: rotate(-30deg); }.speed-icon i::after { content: ""; position: absolute; width: 17px; height: 3px; left: 10px; top: 10px; background: #f06d57; transform: rotate(-25deg); transform-origin: left center; }
.support-icon { display: flex; align-items: center; justify-content: center; gap: 4px; }.support-icon i { position: static; width: 12px; height: 12px; border-radius: 50%; }.support-icon i:nth-child(2) { background: #f06d57; }.support-icon i:nth-child(3) { background: #6f34db; }

.sites-fit { position: relative; overflow: hidden; color: white; background: #24102d; }.fit-glow { position: absolute; width: 650px; height: 650px; right: -330px; top: -190px; border-radius: 50%; background: radial-gradient(circle, rgba(220,39,116,.23), transparent 67%); }
.sites-fit .shell { position: relative; z-index: 2; }.sites-eyebrow-light { color: #d7bfd3; }.fit-heading { max-width: 900px; }.fit-heading h2 { margin-top: 24px; }.fit-heading h2 em { color: #f190b4; }.fit-heading > p:last-child { max-width: 680px; margin: 27px 0 0; color: #bfaebf; font-size: 17px; }
.fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 68px; }.fit-card { min-height: 510px; padding: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: rgba(255,255,255,.055); }.fit-card > span { color: #8f7c91; font-size: 10px; font-weight: 850; }.fit-card h3 { margin: 27px 0 12px; font-size: 23px; }.fit-card p { margin: 0; color: #c2b2c1; font-size: 14px; }.fit-card small { display: block; margin-top: 23px; color: #eab6cd; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fit-art { position: relative; height: 205px; margin: 25px -10px 0; overflow: hidden; border-radius: 18px; }.makers-card .fit-art { background: linear-gradient(140deg, #b5775e, #e3b29a); }.practice-card .fit-art { background: linear-gradient(140deg, #8077a5, #d3cbdc); }.venue-card .fit-art { background: linear-gradient(140deg, #4f2443, #ba5972); }
.fit-art::before { content: ""; position: absolute; width: 130px; height: 170px; left: calc(50% - 65px); bottom: -58px; border-radius: 70px 70px 20px 20px; background: rgba(255,244,232,.7); transform: rotate(-8deg); }.practice-card .fit-art::before { width: 180px; height: 125px; bottom: -22px; border-radius: 90px 90px 10px 10px; transform: none; }.venue-card .fit-art::before { left: 25px; width: 220px; height: 90px; bottom: 25px; border-radius: 70px 70px 5px 5px; background: rgba(255,192,150,.48); transform: none; }
.fit-art i { position: absolute; border-radius: 50%; background: rgba(255,255,255,.62); }.fit-art i:first-child { width: 48px; height: 48px; left: 22px; top: 20px; }.fit-art i:last-child { width: 28px; height: 28px; right: 24px; top: 30px; background: rgba(60,22,48,.68); }

.sites-value { background: #f6f0ed; }.value-layout { display: grid; grid-template-columns: 1fr .9fr; gap: 85px; align-items: center; }.value-copy h2 { margin-top: 23px; }.value-copy > p:not(.sites-eyebrow) { margin: 28px 0 0; color: #6d626c; font-size: 17px; }.value-copy ul { list-style: none; margin: 34px 0 0; padding: 0; }.value-copy li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(58,22,62,.11); }.value-copy li > i { width: 25px; height: 25px; display: grid; place-items: center; flex: none; border-radius: 50%; color: white; background: #8d2d77; font-size: 10px; font-style: normal; }.value-copy li strong, .value-copy li span { display: block; }.value-copy li strong { font-size: 14px; }.value-copy li span { color: #7a6e79; font-size: 12px; }
.value-card { padding: 30px; border-radius: 28px; color: white; background: linear-gradient(145deg, #34163c, #6d2364); box-shadow: 0 28px 70px rgba(65,20,66,.24); transform: rotate(1.5deg); }.value-card-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.13); }.value-card-top span { color: #cbb8ca; font-size: 8px; font-weight: 850; letter-spacing: .13em; }.value-card-top b { padding: 6px 9px; border-radius: 20px; color: #531a4f; background: #f4c5d5; font-size: 8px; }.value-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.09); font-size: 11px; }.value-row i { height: 1px; background: rgba(255,255,255,.13); }.value-row b { color: #f5c7d7; font-size: 9px; }.value-card-bottom { padding-top: 36px; }.value-card-bottom small, .value-card-bottom strong { display: block; }.value-card-bottom small { color: #cbb8ca; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.value-card-bottom strong { margin-top: 8px; font-family: Georgia, serif; font-size: 31px; line-height: 1.05; font-weight: 400; }

.sites-process { background: #fffdfb; }.process-heading { max-width: 850px; }.process-heading h2 { margin-top: 23px; }.sites-steps { list-style: none; margin: 65px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(57,23,62,.13); }.sites-steps li { display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding: 34px 35px 40px 0; border-bottom: 1px solid rgba(57,23,62,.13); }.sites-steps li:nth-child(odd) { border-right: 1px solid rgba(57,23,62,.13); }.sites-steps li:nth-child(even) { padding-left: 35px; }.sites-steps > li > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #8b2c77; background: #f4e7ed; font-size: 10px; font-weight: 850; }.sites-steps h3 { margin: 0 0 8px; font-size: 20px; }.sites-steps p { margin: 0; color: #756a75; font-size: 14px; }

.sites-cta { position: relative; overflow: hidden; color: white; background: linear-gradient(145deg, #2a1232, #601f5a 65%, #90284e); }.cta-orb { position: absolute; width: 620px; height: 620px; right: -230px; bottom: -350px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.018); }.sites-cta-inner { position: relative; z-index: 2; max-width: 930px; text-align: center; }.sites-cta-inner .sites-eyebrow { justify-content: center; }.sites-cta h2 { margin-top: 24px; }.sites-cta h2 em { color: #f4a0ba; }.sites-cta-inner > p:not(.sites-eyebrow) { max-width: 680px; margin: 28px auto 36px; color: #d2c0cf; font-size: 17px; }.sites-button-light { color: #3a173f; background: white; box-shadow: 0 17px 36px rgba(25,7,28,.2); }
.sites-footer { background: #1a0b20; }

@media (max-width: 1080px) {
  .sites-hero-layout { grid-template-columns: 1fr; }
  .sites-hero { padding-top: 160px; }
  .sites-hero-copy { max-width: 780px; }
  .sites-hero-visual { width: min(100%, 680px); margin: 20px auto 0; }
  .sites-proof { margin-top: 0; }
  .sites-benefits, .fit-grid { grid-template-columns: 1fr; }
  .sites-benefit { min-height: 300px; }
  .fit-card { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .fit-card .fit-art { grid-column: 2; grid-row: 1 / 5; margin: 0; height: 260px; }.fit-card h3, .fit-card p, .fit-card small { grid-column: 1; }
  .value-layout { gap: 45px; }
}

@media (max-width: 820px) {
  .sites-hero h1 { font-size: clamp(53px, 12vw, 75px); }
  .sites-hero-visual { height: 500px; transform: scale(.86); transform-origin: left top; width: 720px; margin-bottom: -60px; }
  .sites-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
  .sites-intro { grid-template-columns: 1fr; gap: 25px; }
  .value-layout { grid-template-columns: 1fr; }.value-card { transform: none; }
  .sites-steps { grid-template-columns: 1fr; }.sites-steps li:nth-child(odd) { border-right: 0; }.sites-steps li:nth-child(even) { padding-left: 0; }
}

@media (max-width: 560px) {
  .sites-hero { padding-top: 135px; }.sites-hero h1 { font-size: 50px; }.sites-hero-copy > p:not(.sites-kicker) { font-size: 16px; }
  .sites-hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .sites-hero-visual { height: 415px; transform: scale(.65); width: 720px; margin-bottom: -125px; }
  .sites-proof { display: none; }
  .sites-intro h2, .fit-heading h2, .value-copy h2, .process-heading h2, .sites-cta h2 { font-size: 43px; }
  .sites-benefit { min-height: 330px; padding: 27px; }
  .fit-card { display: block; padding: 25px; }.fit-card .fit-art { height: 220px; margin: 24px 0 0; }.fit-card h3 { margin-top: 25px; }
  .value-card { padding: 24px; }.value-card-bottom strong { font-size: 25px; }
  .sites-steps li { grid-template-columns: 45px 1fr; gap: 15px; }
}