:root { --black: #181819; --offwhite: #f2f0ea; --stone: #d8d4cc; --rose: #d58273; --muted: #686865; --line: #aaa7a1; }
* { box-sizing: border-box; letter-spacing: 0; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--black); background: var(--offwhite); font-family: "DM Sans", Arial, sans-serif; line-height: 1.5; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; } button { cursor: pointer; }.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.demo-note { min-height: 34px; display: flex; justify-content: space-between; align-items: center; padding: 0 max(24px, calc((100vw - 1180px) / 2)); color: var(--stone); background: var(--black); font-family: "DM Mono", monospace; font-size: 11px; }.demo-note a { text-decoration: underline; }.site-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }.logo { font-size: 18px; font-weight: 600; }.logo i { font-family: "Space Grotesk", "DM Sans", Arial, sans-serif; font-weight: 500; font-style: normal; }.site-header nav { display: flex; gap: 24px; font-size: 13px; font-weight: 600; }
.hero { min-height: 650px; color: var(--offwhite); background: var(--black); }.hero-layout { min-height: 650px; display: grid; grid-template-columns: .32fr 1fr .48fr; gap: 36px; align-items: end; padding-bottom: 60px; }.hero-mark { align-self: start; margin: 44px 0 0; color: #92918d; font-family: "DM Mono", monospace; font-size: 12px; }.eyebrow { margin: 0 0 14px; color: #9f9e9a; font-family: "DM Mono", monospace; font-size: 11px; }.hero h1, .services h2, .calendar h2, .booking h2 { margin: 0; font-family: "Space Grotesk", "DM Sans", Arial, sans-serif; font-weight: 500; line-height: .86; }.hero h1 { font-size: clamp(58px, 7.2vw, 97px); }.hero h1 em { color: var(--rose); font-style: normal; }.hero-copy > p:last-of-type { max-width: 400px; margin: 27px 0; color: #c7c4be; font-size: 17px; }.button { min-height: 44px; display: inline-flex; justify-content: center; align-items: center; gap: 12px; border: 1px solid var(--offwhite); border-radius: 3px; padding: 10px 14px; color: var(--black); background: var(--offwhite); font-size: 13px; font-weight: 600; }.hero-panel { display: grid; gap: 16px; border-top: 1px solid #656561; padding-top: 14px; }.hero-panel span { color: #b4b1aa; font-family: "DM Mono", monospace; font-size: 10px; }.hero-panel b { font-family: "Space Grotesk", "DM Sans", Arial, sans-serif; font-size: 30px; font-weight: 500; line-height: 1; }.hero-panel a { color: var(--rose); font-size: 13px; font-weight: 600; }
.services { padding: 116px 0; }.services > .wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; }.services h2, .calendar h2, .booking h2 { font-size: clamp(43px, 5.2vw, 70px); }.service-list { border-top: 1px solid var(--line); }.service-list article { display: grid; grid-template-columns: 48px 1fr auto 28px; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); padding: 20px 0; }.service-list span { color: var(--muted); font-family: "DM Mono", monospace; font-size: 11px; }.service-list h3 { margin: 0; font-family: "Space Grotesk", "DM Sans", Arial, sans-serif; font-size: 26px; font-weight: 500; }.service-list p { margin: 0; color: var(--muted); font-size: 13px; }.service-list a { height: 28px; display: grid; place-items: center; border: 1px solid var(--black); border-radius: 50%; }
.calendar { padding: 110px 0; color: var(--offwhite); background: #554b4b; }.calendar .eyebrow { color: #d9cdca; }.calendar-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; }.calendar-layout > div > p:last-child { max-width: 380px; margin: 25px 0 0; color: #e1d5d2; }.calendar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: stretch; }.day { min-height: 260px; display: grid; align-content: start; gap: 9px; padding: 15px; border: 1px solid #9b8f8d; }.day span { margin-bottom: 15px; font-family: "DM Mono", monospace; font-size: 11px; }.day button { border: 1px solid #b8aaa7; border-radius: 3px; padding: 8px; color: var(--offwhite); background: transparent; text-align: left; font-size: 12px; }.day.active { color: var(--black); background: var(--rose); }.day.active button { border-color: #6f423b; color: var(--black); }
.words { padding: 104px 0; }.words p { max-width: 875px; margin: 0; font-family: "Space Grotesk", "DM Sans", Arial, sans-serif; font-size: clamp(35px, 5.4vw, 69px); font-weight: 500; line-height: .98; }.words span { display: block; margin-top: 26px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 11px; }
.booking { padding: 94px 0; background: var(--stone); }.booking-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 100px; }.booking form { display: grid; gap: 13px; padding: 25px; color: var(--offwhite); background: var(--black); }.booking label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; }.booking input, .booking select { width: 100%; border: 1px solid #8a8883; border-radius: 3px; padding: 10px; color: var(--offwhite); background: transparent; }.booking select option { color: var(--black); background: white; }.booking .button { border-color: var(--rose); background: var(--rose); }.form-message { min-height: 20px; margin: 0; color: #c9c5be; font-size: 12px; }
footer { padding: 26px 0; color: #cfcbc3; background: var(--black); font-size: 12px; } footer .wrap { display: flex; justify-content: space-between; gap: 16px; }
@media (max-width: 760px) { .wrap { width: min(100% - 32px, 1180px); }.demo-note { padding: 0 16px; }.site-header nav { display: none; }.hero, .hero-layout { min-height: 620px; }.hero-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 36px; }.hero-mark { margin: 0; }.hero-panel { max-width: 300px; }.services > .wrap, .calendar-layout, .booking-grid { grid-template-columns: 1fr; gap: 43px; }.services, .calendar, .words { padding: 75px 0; }.calendar-grid { grid-template-columns: 1fr; }.day { min-height: auto; }.service-list article { grid-template-columns: 40px 1fr 28px; }.service-list p { grid-column: 2; }.booking { padding: 75px 0; } footer .wrap { display: grid; } }