/* Homepage refinement. The shared booking and admin styles stay in style.css. */
html.home-page { scroll-padding-top: 0; }
.homepage {
    --page-gutter: clamp(20px, 6.1vw, 116px);
    --home-space: clamp(64px, 7vw, 104px);
    background: var(--black);
}

.homepage .site-shell { box-shadow: none; }
.homepage .site-shell::before { display: none; }
.homepage [id] { scroll-margin-top: max(104px, var(--header-offset)); }
.homepage main:focus { outline: none; }
.homepage a:focus-visible {
    outline: 2px solid var(--chrome);
    outline-offset: 6px;
}
.homepage p, .homepage address { user-select: text; }

/* Preserve the reference's chrome lettering, navigation and curved section edge. */
.homepage .hero-section {
    min-height: clamp(800px, 100svh, 1000px);
    padding: clamp(220px, 25svh, 300px) var(--page-gutter) 170px;
    isolation: isolate;
}
.homepage .hero-copy { width: min(56%, 760px); animation: none; }
.homepage .hero-copy .chrome-title {
    font-size: clamp(68px, 6.05vw, 112px);
    white-space: nowrap;
}
.homepage .hero-copy .eyebrow { margin-bottom: 58px; color: var(--silver); }
.homepage .hero-copy .lede {
    margin-top: 36px;
    color: #b6b6b6;
    font-size: 18px;
    line-height: 1.6;
}
.homepage .hero-copy .sparkle-button { margin-top: 46px; }
.homepage .hero-atmosphere { inset: 0; z-index: -1; opacity: 1; }
.homepage .hero-atmosphere::before {
    inset: 0;
    background:
        radial-gradient(ellipse 35% 58% at 79% 39%, #ffffff1c 0%, #ffffff08 50%, transparent 88%),
        radial-gradient(ellipse 29% 24% at 73% 0%, #ffffff30, transparent 85%),
        linear-gradient(116deg, transparent 43%, #ffffff08 65%, transparent 85%);
    filter: none;
    animation: none;
}
.homepage .hero-atmosphere::after {
    content: "";
    position: absolute;
    inset: 0 0 8% 42%;
    opacity: .12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='800' viewBox='0 0 600 800'%3E%3Cfilter id='smoke'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009 .014' numOctaves='4' seed='12'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23smoke)'/%3E%3C/svg%3E");
    background-size: cover;
    mask-image: radial-gradient(ellipse 44% 52% at 58% 48%, #000 12%, transparent 88%);
    mix-blend-mode: screen;
    pointer-events: none;
}
.homepage .hero-arc {
    top: 10px;
    right: -12%;
    width: 62%;
    box-shadow: none;
    opacity: .5;
    animation: none;
}
.homepage .hero-haze {
    width: 36%;
    height: 52%;
    background: #ffffff08;
    filter: blur(62px);
    animation: none;
}
.homepage .hero-haze-one { top: 11%; right: 6%; }
.homepage .hero-haze-two { bottom: 16%; right: 16%; opacity: .4; }
.hero-floor {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 46px;
    width: 78%;
    height: clamp(230px, 24vw, 350px);
    pointer-events: none;
    opacity: .72;
    mask-image: radial-gradient(ellipse 62% 75% at 67% 60%, #000 10%, #000c 42%, transparent 79%);
}
.hero-floor img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.hero-chair {
    position: absolute;
    z-index: 1;
    isolation: isolate;
    width: min(43vw, 720px, 67svh);
    right: 7.5%;
    bottom: 92px;
    pointer-events: none;
}
.hero-chair::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 76%;
    height: 3%;
    left: 15%;
    bottom: 5.4%;
    border-radius: 50%;
    background: #000;
    filter: blur(8px);
}
.hero-chair::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 155%;
    height: 12%;
    left: -26%;
    bottom: 1%;
    background: radial-gradient(ellipse at 53% 45%, #b2b2b214, transparent 66%);
    filter: blur(10px);
}
.hero-chair img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    filter: grayscale(1) brightness(.78) contrast(1.28);
    transform: perspective(1400px) rotateX(10deg);
    transform-origin: 50% 100%;
}
.homepage .scroll-cue { bottom: 104px; }
.homepage .spark-button { box-shadow: none; background: #090909; }
.homepage .spark-button::before, .homepage .spark-button::after { display: none; }
.homepage .spark-button:is(:hover, :focus-visible) {
    background: #171717;
    box-shadow: none;
}

.homepage .works-section {
    padding: 100px var(--page-gutter) 32px;
    background: var(--black);
}
.homepage .works-section > section {
    width: min(1320px, 100%);
    margin-inline: auto;
}
.homepage h2, .homepage h3 {
    margin: 0;
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.05;
    text-wrap: balance;
}
.homepage h2 { font-size: clamp(38px, 4.5vw, 68px); }
.homepage h3 { font-size: clamp(23px, 2.1vw, 32px); letter-spacing: -.035em; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
.section-heading p { margin: 0; color: #b6b6b6; font-size: 16px; line-height: 1.6; }

/* An open service menu, with one dominant image rather than three equal cards. */
.service-menu { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px 64px; }
.service-entry { display: grid; grid-template-columns: minmax(140px, .8fr) 1fr; align-items: center; gap: 28px; min-width: 0; }
.service-entry-main { grid-row: span 2; display: block; }
.service-photo { overflow: hidden; background: #080808; }
.service-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) brightness(.95); }
.service-entry-main .service-photo img { aspect-ratio: 1.42; object-position: center 60%; }
.service-entry-main .service-details { margin-top: 26px; }
.service-name { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 16px; }
.service-details > p { max-width: 46ch; margin: 18px 0 0; color: #b6b6b6; font-size: 16px; line-height: 1.65; }
.service-price { margin: 0; color: #b6b6b6; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.service-price strong { font-weight: 500; color: var(--text-primary); }
.service-note { margin: 34px 0 0; color: #b6b6b6; font-size: 14px; line-height: 1.6; }
.homepage .service-note a, .homepage .text-link { color: var(--text-primary); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #777; }
.homepage .service-note a:hover, .homepage .text-link:hover { text-decoration-color: var(--text-primary); }

.studio-section { display: grid; grid-template-columns: 1.25fr 1fr; gap: 80px; align-items: center; padding-block: var(--home-space); }
.studio-statement h2 { font-size: clamp(40px, 5.15vw, 78px); }
.studio-statement > p { max-width: 31ch; margin: 30px 0 0; color: #b6b6b6; font-size: 18px; line-height: 1.6; }
.studio-details { display: grid; gap: 36px; max-width: 42ch; }
.studio-details h3 { font-size: 24px; }
.studio-details p { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: #b6b6b6; }

.visit-section { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.25fr 1fr; gap: 80px; align-items: center; padding-block: 72px; }
.visit-section::before { content: ""; position: absolute; z-index: -1; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #0c0c0c; }
.visit-copy > p { max-width: 49ch; margin: 24px 0 0; color: #b6b6b6; font-size: 16px; line-height: 1.7; }
.visit-copy h3 { margin-top: 36px; font-size: 24px; }
.visit-contact { display: grid; justify-items: start; gap: 20px; padding-left: 24px; }
.visit-contact p { margin: 0; color: #b6b6b6; font-size: 16px; }
.visit-contact .contact-name { color: var(--text-primary); font-size: 28px; letter-spacing: -.04em; }
.visit-contact address { color: #b6b6b6; font-size: 18px; line-height: 1.6; font-style: normal; }
.contact-phone { font-size: clamp(22px, 2.5vw, 36px); letter-spacing: -.035em; padding-block: 6px; font-variant-numeric: tabular-nums; }
.visit-contact .text-link { font-size: 15px; line-height: 1.6; padding-block: 8px; }

.homepage .booking-panel {
    grid-template-columns: 1fr 1.25fr;
    gap: 80px;
    min-height: 0;
    margin-top: 0;
    padding: var(--home-space) 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}
.homepage .sign-visual { aspect-ratio: 4 / 3; min-height: 0; border-radius: 0; background: none; }
.homepage .sign-visual::after { display: none; }
.homepage .sign-visual img { height: auto; min-height: 0; filter: grayscale(1); }
.homepage .booking-copy .lede { max-width: 36ch; color: #b6b6b6; font-size: 16px; margin-top: 24px; }
.homepage .booking-copy .sparkle-button { margin-top: 32px; }
.homepage .booking-panel .sparkle-button { grid-column: auto; }

/* Readable, quiet footer; no repeated badges or outlined panels. */
.homepage .site-footer { width: 100%; margin-top: var(--home-space); padding-top: 0; border: 0; letter-spacing: 0; text-transform: none; }
.homepage .site-footer-main { grid-template-columns: 1fr 1.2fr auto; gap: 28px; }
.homepage .site-footer-center { align-items: start; gap: 12px; }
.homepage .site-footer-local { padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; letter-spacing: 0; font-weight: 400; }
.homepage .site-footer-contact { margin: 0; font-size: 14px; color: #b6b6b6; line-height: 1.6; }
.homepage .site-footer-address { color: #b6b6b6; font-size: 14px; font-weight: 400; line-height: 1.6; }
.homepage .site-footer-contact a { padding-block: 4px; }
.homepage .site-footer-brand strong { font-size: 13px; }
.homepage .site-footer-brand small { font-size: 13px; color: #999; letter-spacing: .04em; }
.homepage .site-footer .site-footer-credit-link { border: 0; padding: 0; border-radius: 0; background: none; }
.homepage .site-footer-credit-link strong { font-size: 13px; color: #999; letter-spacing: 0; font-weight: 400; }
.homepage .site-footer-social { font-size: 14px; letter-spacing: 0; font-weight: 500; }
.homepage .site-footer-bottom { border: 0; margin-top: 32px; padding-top: 0; gap: 24px; align-items: baseline; }
.homepage .site-footer-bottom > p { font-size: 13px; letter-spacing: 0; color: #999; line-height: 1.6; font-weight: 400; }
.homepage .site-footer .site-footer-legal { flex-wrap: wrap; font-size: 13px; letter-spacing: 0; gap: 16px; font-weight: 400; }
.homepage .site-footer .site-footer-legal a { color: #b6b6b6; padding-block: 12px; }

/* The drawn silver stroke is one deliberate type gesture, revealed with the studio. */
.ink-underline { position: relative; display: inline-block; }
.ink-underline svg { position: absolute; left: 0; bottom: -.22em; width: 100%; height: .3em; overflow: visible; }
.ink-underline path { fill: none; stroke: #c3c3c3; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

@keyframes home-copy-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes home-chair-enter { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes home-light-drift { from { opacity: .08; transform: translate3d(-1%, 0, 0); } to { opacity: .14; transform: translate3d(1%, -1%, 0); } }

@media (prefers-reduced-motion: no-preference) {
    .homepage .hero-copy .eyebrow { animation: home-copy-enter 700ms var(--ease) 60ms both; }
    .homepage .hero-copy .chrome-title { animation: home-copy-enter 1050ms var(--ease) 100ms both; }
    .homepage .hero-copy .lede { animation: home-copy-enter 950ms var(--ease) 220ms both; }
    .homepage .hero-copy .sparkle-button { animation: home-copy-enter 950ms var(--ease) 320ms both; }
    .hero-chair img { animation: home-chair-enter 1300ms var(--ease) 120ms both; }
    .homepage .hero-atmosphere::after { animation: home-light-drift 12s ease-in-out infinite alternate; }
    .homepage.motion-ready .reveal .ink-underline path { stroke-dashoffset: 1; }
    .homepage.motion-ready .reveal.is-visible .ink-underline path { stroke-dashoffset: 0; transition: stroke-dashoffset 1300ms cubic-bezier(.22, 1, .36, 1) 350ms; }
}

/* Content stays visible if JavaScript is unavailable. */
.homepage .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
    .homepage.motion-ready .reveal { opacity: 0; transform: translateY(18px); }
    .homepage.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
    .service-menu { gap: 36px; }
    .service-entry:not(.service-entry-main) { grid-template-columns: 120px 1fr; gap: 22px; }
    .studio-section, .visit-section, .homepage .booking-panel { gap: 48px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
    .homepage .hero-section { min-height: 760px; padding-top: 205px; }
    .homepage .hero-copy { width: 58%; }
    .homepage .hero-copy .chrome-title { font-size: clamp(48px, 6.4vw, 64px); }
    .homepage .hero-copy .eyebrow { margin-bottom: 40px; font-size: 10px; }
    .homepage .hero-copy .lede { font-size: 18px; }
    .hero-chair { width: 48vw; right: 2%; bottom: 98px; }
    .homepage .hero-copy .sparkle-button { width: max-content; }
    .service-menu { grid-template-columns: 1fr 1fr; gap: 32px; }
    .service-entry:not(.service-entry-main) { grid-template-columns: 1fr; gap: 20px; }
    .service-entry-main { grid-row: auto; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
    .service-entry-main .service-details { margin: 0; }
    .service-entry-main .service-photo img { aspect-ratio: 1; }
    .service-entry:not(.service-entry-main) .service-photo img { aspect-ratio: 1.6; }
    .section-heading { align-items: start; }
    .studio-section, .visit-section, .homepage .booking-panel { grid-template-columns: 1fr 1fr; gap: 32px; }
    .visit-contact { padding-left: 0; }
    .homepage .site-footer-main { grid-template-columns: 1fr 1fr; }
    .homepage .site-footer-social { grid-column: 2; justify-self: start !important; }
    .homepage .site-footer-bottom { flex-direction: column; align-items: start; }
}
@media (max-width: 700px) {
    .homepage .hero-section { min-height: 930px; padding: 148px var(--page-gutter) 480px; }
    .homepage .hero-copy { width: 100%; }
    .homepage .hero-copy .chrome-title { font-size: clamp(43px, 11.65vw, 68px); }
    .homepage .hero-copy .eyebrow { margin-bottom: 34px; font-size: 10px; letter-spacing: .2em; }
    .homepage .hero-copy .lede { max-width: 100%; margin-top: 26px; font-size: 18px; line-height: 1.55; }
    .homepage .hero-copy .sparkle-button { width: max-content; margin-top: 28px; }
    .homepage .spark-button { width: auto; min-width: 224px; min-height: 56px; }
    .hero-chair { width: 320px; max-width: 88%; right: 50%; transform: translateX(50%); bottom: 76px; }
    .hero-floor { width: 150%; right: -3%; height: 260px; bottom: 40px; opacity: .65; }
    .homepage .hero-atmosphere::before { background: radial-gradient(ellipse 65% 36% at 62% 70%, #ffffff1a, transparent 85%); }
    .homepage .hero-arc { width: 150%; right: -60%; top: 400px; }
    .homepage .hero-haze-one { width: 70%; height: 30%; top: 52%; right: 10%; }
    .homepage .hero-haze-two { display: none; }
    .homepage .scroll-cue { display: none; }
    .homepage .works-section { padding-top: 76px; }
    .section-heading { display: block; margin-bottom: 32px; }
    .section-heading p { margin-top: 22px; }
    .service-menu { grid-template-columns: 1fr; gap: 36px; }
    .service-entry-main { grid-row: auto; }
    .service-entry { grid-template-columns: 112px 1fr; gap: 20px; align-items: start; }
    .service-entry:not(.service-entry-main) { grid-template-columns: 112px 1fr; gap: 20px; }
    .service-entry-main .service-photo img { aspect-ratio: 1.35; }
    .service-entry-main .service-details { margin-top: 22px; }
    .service-details > p { margin-top: 14px; font-size: 15px; }
    .service-name { gap: 10px; }
    .service-note { margin-top: 28px; }
    .studio-section, .visit-section, .homepage .booking-panel { grid-template-columns: 1fr; gap: 36px; }
    .studio-statement > p { margin-top: 24px; font-size: 16px; }
    .studio-details { max-width: 100%; gap: 28px; }
    .visit-section { padding-block: 52px; }
    .visit-contact { padding-left: 0; gap: 16px; }
    .visit-copy h3 { font-size: 23px; }
    .contact-phone { font-size: 28px; }
    .homepage .booking-panel { gap: 32px; }
    .homepage .booking-copy .sparkle-button { width: max-content; }
    .homepage .site-footer-main { grid-template-columns: 1fr; justify-items: start; gap: 28px; }
    .homepage .site-footer-brand, .homepage .site-footer-social { justify-self: start !important; }
    .homepage .site-footer { text-align: left; }
    .homepage .site-footer-bottom { align-items: start; flex-direction: column; gap: 16px; text-align: left; }
    .homepage .site-footer .site-footer-legal { justify-content: start; gap: 6px 18px; }
}