/* Final typography system: Cormorant Garamond for display headings, Inter for everything else. */
:root { --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Inter', Arial, sans-serif; --mono: var(--sans); }
body { font: 400 16px/1.66 var(--sans); letter-spacing: 0; }
.brand-logo { display: block; width: 118px; line-height: 0; }
.brand-logo img { display: block; width: 100%; height: auto; }
.footer-top .wordmark { width: 170px; height: 91px; background: url('assets/square-recovery-logo-gold.png') center/contain no-repeat; font-size: 0; color: transparent; }
.footer-top .wordmark i { font-size: 0; }
/* Display serif: hero, major sections, experiences and statement only. */
.hero h1 { font-size: 72px; line-height: .9; letter-spacing: -.035em; }
h2 { line-height: 1.02; letter-spacing: -.025em; }
h2 em { font-style: normal; }
.hero h1 em, .statement h2 em { font-style: italic; }
.intro-copy h2, .membership-heading h2, .how-heading h2, .visit-content h2 { font-size: 52px; }
.experience-content h2 { font-size: 48px; line-height: 1; margin-bottom: 20px; }
.statement h2 { font-size: 52px; line-height: .98; margin-bottom: 32px; }
.how-heading h2 { line-height: 1.06; }
.visit-content h2 { line-height: 1; margin-bottom: 34px; }
/* Standard sans-serif hierarchy. */
.site-header nav a, .footer-label, .eyebrow, .section-label, .button, .text-link, .hero-location, .price, summary, details strong, .hours { font-family: var(--sans); font-weight: 600; letter-spacing: .035em; }
.footer-label, .eyebrow, .section-label, .hero-location, .price, summary, details strong, .hours { font-size: 11px; }
.site-header nav a { font-size: 11px; letter-spacing: .01em; }
.button, .text-link, .hero .button, .hero .text-link { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .01em; text-transform: none; }
.section-label { gap: 0; }
.section-label span { display: none; }
.section-label p, #membership .section-label p { font: 600 11px/1.25 var(--sans); letter-spacing: .035em; }
.experience-content .eyebrow { display: none; }
.visit-content .eyebrow { font-size: 0; letter-spacing: 0; }
.visit-content .eyebrow::after { content: 'Visit us'; font: 600 11px/1.25 var(--sans); letter-spacing: .035em; text-transform: uppercase; }
.hero-copy, .intro-copy>p, .how-heading>p, .statement>p:last-child { font-size: 16px; line-height: 1.66; font-weight: 400; }
.experience-content h3, .steps h3, .plan h3 { font-family: var(--sans); font-weight: 500; letter-spacing: 0; }
.experience-content h3 { font-size: 18px; line-height: 1.45; margin-bottom: 18px; }
.experience-content>p:not(.price), .plan>p:not(.eyebrow):not(.plan-price), .visit-content>p:not(.eyebrow):not(.hours) { font-size: 16px; line-height: 1.66; }
.plan-price { font-family: var(--sans); font-size: 38px; font-weight: 400; letter-spacing: -.04em; margin: 18px 0 25px; }
.plan-price small { font-family: var(--sans); font-weight: 500; }
.plan h3 { font-size: 18px; line-height: 1.45; margin-bottom: 20px; }
.plan li, .steps p, details div p, details small { font-family: var(--sans); line-height: 1.67; }
.steps h3 { font-size: 18px; line-height: 1.4; margin: 29px 0 13px; }
.steps p { font-size: 16px; }
.visit address { font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.67; }
.footer-top>p, .footer-top>p span, .footer-grid, .footer-bottom { font-family: var(--sans); }
.footer-top>p { font-size: 16px; line-height: 1.6; font-weight: 500; }
.footer-top>p span { font-size: 14px; line-height: 1.6; }
.experience, .experience.reverse { grid-template-columns: 1fr 1fr; }
.experience-content { padding-left: clamp(36px, 5vw, 82px); padding-right: clamp(36px, 5vw, 82px); max-width: none; }
@media (max-width: 800px) { .brand-logo { width: 100px; } .footer-top .wordmark { width: 145px; height: 77px; } .hero h1 { font-size: 48px; } .intro-copy h2, .membership-heading h2, .how-heading h2, .visit-content h2 { font-size: 38px; } .experience-content h2 { font-size: 36px; } .statement h2 { font-size: 38px; } .experience-content h3, .plan h3, .steps h3 { font-size: 17px; } .experience-content>p:not(.price), .plan>p:not(.eyebrow):not(.plan-price), .visit-content>p:not(.eyebrow):not(.hours), .steps p { font-size: 16px; } .footer-label, .eyebrow, .section-label, .hero-location, .price, summary, details strong, .hours, .section-label p, #membership .section-label p, .visit-content .eyebrow::after { font-size: 10px; } .experience, .experience.reverse { grid-template-columns: 1fr; } }