/* Corbin Guitar — home page
   Two modes:
   - default (phones, tablets, short screens): a normal scrolling page
   - body.snap (desktop): a 900-unit-tall stage scaled to the window, one section per scroll */

/* ======================= Shared structure ======================= */
.home-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: 72px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.home-header.is-solid { background: rgba(244, 237, 224, 0.95); border-bottom-color: rgba(205, 191, 166, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.home-header .brand { position: relative; display: flex; align-items: center; flex-grow: 1; }
.home-header .brand .burger { order: 2; margin-left: auto; }
.home-header .hn { display: none; }
.home-header .burger { display: block; margin-right: -9px; }

.hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--parchment); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.hero-shield { position: absolute; inset: 0; background: rgba(250, 246, 239, 0.74); }
.hero-logo { position: relative; width: min(78vw, 640px); }
.hero-logo img { width: 100%; height: auto; }

.screen-inner { width: 100%; max-width: 1120px; margin: 0 auto; }

/* About (home) */
.h-about { padding: 96px 24px 88px; }
.about-stage { display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 560px; margin: 0 auto; }
.about-photo { width: 100%; height: auto; aspect-ratio: 512 / 600; object-fit: cover; object-position: center top; border-radius: 4px; }
.about-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.about-head h2 { font-size: 52px; }
.about-lines { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.about-lines p { min-height: 1.25em; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.3; }
.caret { display: inline-block; width: 2px; height: 0.9em; margin-left: 4px; vertical-align: -0.1em; background: var(--maroon); animation: blink 1s steps(1) infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.about-actions { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; transition: opacity 0.6s ease, transform 0.6s var(--ease-out); }
.js .about-actions:not(.is-in) { opacity: 0; transform: translateY(16px); pointer-events: none; }

/* Intro */
.h-intro { padding: 96px 24px; display: flex; flex-direction: column; justify-content: center; }
.intro-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.h-intro h2 { font-size: clamp(44px, 6vw, 68px); max-width: 900px; }
.h-intro .lede { max-width: 680px; font-size: 20px; line-height: 1.65; }
.points { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 1000px; margin-top: 32px; }
.point { display: flex; flex-direction: column; gap: 10px; padding: 22px 16px; }
.js .points:not(.is-in) .point { opacity: 0; }
.point + .point { border-top: 1px solid var(--rule); }
.point h3 { font-weight: 600; font-size: 28px; color: var(--maroon); }
.point p { font-size: 18px; line-height: 1.5; }
.points.is-in .point { animation: rise 0.75s var(--ease-out) both; }
.points.is-in .point:nth-child(2) { animation-delay: 0.13s; }
.points.is-in .point:nth-child(3) { animation-delay: 0.26s; }
@keyframes rise { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }

/* Approach (home) */
.h-approach { padding: 96px 24px; }
.ap { display: flex; flex-direction: column; align-items: center; gap: 44px; }
.ap-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.ap-title { display: flex; flex-direction: column; align-items: center; font-size: clamp(52px, 8vw, 88px); line-height: 1; }
.ap-title span { display: block; }
.ap-title .l2 { font-style: italic; color: var(--maroon); }
.ap-copy { display: grid; max-width: 640px; }
.ap-copy p { grid-row: 1; grid-column: 1; font-size: 20px; line-height: 1.65; }
.slider { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.slider-labels { display: flex; justify-content: space-between; }
.slider-labels button { background: none; border: none; padding: 12px 0; min-height: 44px; font-family: var(--body); font-size: 16px; letter-spacing: 0.3em; text-transform: uppercase; cursor: pointer; color: var(--muted); transition: color 0.3s ease; }
.slider-labels button.is-on { color: var(--maroon); }
.track { position: relative; height: 40px; }
.track-base { position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: var(--rule); }
.track-fill { position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: var(--maroon); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.track-pick { position: absolute; top: 1px; left: 0; width: 32px; height: 38px; will-change: transform; filter: drop-shadow(0 2px 4px rgba(46, 34, 38, 0.25)); }
.panels { position: relative; width: 100%; display: grid; }
.panel { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; will-change: transform, opacity; }
.panel .tag { font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--tan-text); }
.panel.is-write .tag { color: var(--maroon); }
.panel h3 { font-size: 40px; line-height: 1.1; }
.panel.is-write h3 { font-style: italic; color: var(--maroon); }
.words { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; font-family: var(--serif); font-weight: 500; font-size: 26px; }
.words i { width: 5px; height: 5px; border-radius: 50%; background: var(--tan); }
.text-link { font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--maroon); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--maroon); }
.text-link--light { color: var(--parchment); border-bottom-color: var(--tan-light); }
.text-link--light:hover { color: var(--tan-light); }
/* animated toggles (tap mode) */
.ap.is-tap .l1, .ap.is-tap .l2, .ap.is-tap .ap-copy p, .ap.is-tap .panel { transition: opacity 0.6s ease, transform 0.8s var(--ease-out); }
.ap.is-tap .track-fill, .ap.is-tap .track-pick { transition: transform 0.8s var(--ease-io); }

/* How it works (home) */
.h-how { background: var(--maroon); color: var(--parchment); padding: 96px 24px; }
.h-how .inner { display: flex; flex-direction: column; gap: 56px; }
.h-how .head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.h-how .eyebrow { color: var(--tan-light); }
.h-how h2 { color: var(--parchment); font-size: clamp(48px, 6vw, 68px); }
.steps { position: relative; display: grid; grid-template-columns: 1fr; gap: 40px; }
.step { position: relative; display: flex; flex-direction: column; gap: 14px; transition: opacity 0.6s ease, transform 0.8s var(--ease-out); }
.js .steps:not(.is-in) .step { opacity: 0; transform: translateY(22px); }
.step .num { font-size: 15px; letter-spacing: 0.3em; line-height: 24px; color: var(--tan-light); }
.step h3 { margin-top: 8px; font-weight: 600; font-size: 36px; color: var(--parchment); }
.step p { font-size: 19px; line-height: 1.6; color: var(--cream-soft); }
.step .link { position: absolute; left: 46px; top: 12px; height: 1px; background: var(--tan-light); opacity: 0.7; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.55s cubic-bezier(.45, 0, .35, 1); display: none; }
.steps.is-in .step:nth-child(1) { transition-delay: 0.05s; }
.steps.is-in .step:nth-child(2) { transition-delay: 0.6s; }
.steps.is-in .step:nth-child(3) { transition-delay: 1.15s; }
.h-how .more { align-self: center; }

/* Contact (home) */
.h-contact { display: flex; flex-direction: column; }
.contact-body { padding: 96px 24px 64px; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.contact-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.contact-intro h2 { font-size: clamp(48px, 6vw, 60px); }
.contact-intro > p { font-size: 20px; line-height: 1.6; }
.pricing { width: 100%; margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--rule); }
.pricing { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: baseline; column-gap: 14px; row-gap: 2px; }
.pricing div { display: contents; }
.pricing strong { text-align: right; }
.pricing span { text-align: left; }
.pricing strong { font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1.1; color: var(--ink); }
.pricing div:first-child strong { color: var(--maroon); }
.pricing span { font-size: 18px; }
.area { font-size: 16px; color: var(--muted); }

.jump-veil { position: fixed; inset: 0; z-index: 60; background: var(--parchment); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

@media (max-width: 699px) {
  .words i { display: none; }
  .words { gap: 6px 18px; }
  .hero-img { object-position: 22% center; }
  .eyebrow { font-size: 13px; letter-spacing: 0.22em; }
  .h-about { padding-top: 88px; }
  .about-head h2 { font-size: 46px; }
  .about-lines p { font-size: 24px; }
}
@media (max-width: 959px) {
  .step { align-items: center; text-align: center; }
  .steps { gap: 48px; }
  .step + .step { padding-top: 40px; border-top: 1px solid rgba(201, 167, 126, 0.35); }
}
@media (min-width: 700px) {
  .home-header { padding: 0 40px; }
  .points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .point { padding: 8px 32px; }
  .point + .point { border-top: none; border-left: 1px solid var(--rule); }
  .h-about, .h-intro, .h-approach, .h-how { padding-left: 48px; padding-right: 48px; }
}
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px; }
  .step .link { display: block; right: -56px; }
  .step:last-child .link { right: 0; }
  .steps.is-in .step .link { transform: scaleX(1); }
  .steps.is-in .step:nth-child(1) .link { transition-delay: 0.15s; }
  .steps.is-in .step:nth-child(2) .link { transition-delay: 0.7s; }
  .steps.is-in .step:nth-child(3) .link { transition-delay: 1.25s; }
  .contact-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; }
  .contact-body { padding: 110px 48px 72px; }
}
@media (min-width: 1100px) {
  .home-header { padding: 0 80px; }
  .home-header .brand { flex-grow: 0; }
  .home-header .hn { display: flex; }
  .home-header .burger { display: none; }
  .home-header.is-solid .hn { display: flex; }
}

/* ======================= Desktop stage (body.snap) ======================= */
body.snap { overflow: hidden; }
body.snap .stage { position: fixed; top: 0; left: 0; height: 900px; transform-origin: 0 0; overflow: hidden; background: var(--parchment); }
body.snap .scroller { position: absolute; inset: 0; overflow: hidden; }
body.snap .screen { height: 900px; flex-shrink: 0; }
body.snap .tall { height: 1800px; position: relative; }
body.snap .sticky { position: sticky; top: 0; height: 900px; overflow: hidden; }
body.snap .jump-veil { position: absolute; }
body.snap .menu-backdrop, body.snap .menu-panel { position: absolute; }

/* header inside the stage */
body.snap .home-header { position: absolute; height: 96px; padding: 0 80px; background: none; border-bottom: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
body.snap .home-header .brand, body.snap .home-header .hn { pointer-events: auto; }
body.snap .home-header .hn { display: flex; }
body.snap .home-header .brand { flex-grow: 0; }
body.snap .home-header .burger { display: block; position: absolute; left: -49px; top: -22px; margin: 0; opacity: 0; pointer-events: none; transition: opacity 0.35s linear 0.55s, color 0.4s ease; }
body.snap .home-header .burger span { width: 0; transition: width 0.5s var(--ease-out), transform 0.5s var(--ease-out), opacity 0.3s ease, background 0.4s ease; }
body.snap .home-header .burger span:nth-child(1) { transition-delay: 0.6s, 0s, 0s, 0s; }
body.snap .home-header .burger span:nth-child(2) { transition-delay: 0.7s, 0s, 0s, 0s; }
body.snap .home-header .burger span:nth-child(3) { transition-delay: 0.8s, 0s, 0s, 0s; }
body.snap .home-header.is-collapsed .burger { opacity: 1; pointer-events: auto; }
body.snap .home-header.is-collapsed .burger span { width: 26px; }
body.snap.menu-open .home-header .burger span { transition-delay: 0s; }
body.snap.menu-open .home-header .burger span:nth-child(2) { width: 0; }
body.snap .home-header .nav-item { display: inline-block; transform-origin: left center; transition: color 0.4s ease, background 0.4s ease, opacity 0.6s linear var(--od, 0s), transform 0.95s var(--ease-io) var(--d, 0s); }
body.snap .home-header.is-collapsed .nav-item { opacity: 0; transform: translateX(-360px) scale(0.6); pointer-events: none; }
body.snap .home-header.is-dark .wordmark, body.snap .home-header.is-dark .hn a:not(.btn), body.snap .home-header.is-dark .burger { color: var(--parchment); }
body.snap .home-header.is-dark .hn .btn { background: var(--parchment); border-color: var(--parchment); color: var(--maroon); }

body.snap .hero { min-height: 0; }
body.snap .hero-logo { width: 640px; }

/* About stage */
body.snap .h-about { padding: 0; }
body.snap .about-stage { position: relative; display: block; max-width: none; width: 1120px; height: 900px; margin: 0 auto; }
body.snap .about-photo { position: absolute; left: 0; top: 150px; width: 512px; height: 600px; aspect-ratio: auto; will-change: transform, opacity; }
body.snap .about-head { position: absolute; left: 608px; top: 0; width: 512px; height: 900px; justify-content: center; gap: 22px; will-change: transform; }
body.snap .about-head h2 { font-size: 64px; }
body.snap .about-lines { position: absolute; left: 0; top: 430px; width: 1120px; gap: 18px; opacity: 0; }
body.snap .about-lines p { font-size: 32px; min-height: 40px; }
body.snap .about-actions { margin-top: 26px; }

/* Intro */
body.snap .h-intro { padding: 0 160px; }
body.snap .intro-inner { gap: 28px; }
body.snap .h-intro h2 { font-size: 68px; }
body.snap .h-intro .lede { font-size: 21px; }
body.snap .points { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
body.snap .point { padding: 8px 32px; }
body.snap .point + .point { border-top: none; border-left: 1px solid var(--rule); }
body.snap .point p { font-size: 18px; }

/* Approach */
body.snap .h-approach { padding: 0; }
body.snap .h-approach .sticky { display: flex; align-items: center; justify-content: center; padding: 0 160px; }
body.snap .ap { width: 100%; gap: 44px; }
body.snap .ap-title { font-size: 88px; }
body.snap .ap-copy p { font-size: 21px; }
body.snap .panels { height: 150px; }
body.snap .panel h3 { font-size: 48px; }
body.snap .words { font-size: 30px; gap: 26px; flex-wrap: nowrap; }

/* How it works */
body.snap .h-how { padding: 0 160px; display: flex; align-items: center; }
body.snap .h-how .inner { width: 100%; gap: 80px; }
body.snap .h-how h2 { font-size: 68px; }
body.snap .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px; }
body.snap .step .link { display: block; right: -56px; }
body.snap .step:last-child .link { right: 0; }
body.snap .steps.is-in .step .link { transform: scaleX(1); }
body.snap .steps.is-in .step:nth-child(1) .link { transition-delay: 0.15s; }
body.snap .steps.is-in .step:nth-child(2) .link { transition-delay: 0.7s; }
body.snap .steps.is-in .step:nth-child(3) .link { transition-delay: 1.25s; }
body.snap .step h3 { font-size: 38px; }

/* Contact */
body.snap .h-contact { height: 900px; }
body.snap .contact-body { flex-grow: 1; min-height: 0; padding: 96px 160px 24px; display: flex; align-items: center; }
body.snap .contact-grid { width: 100%; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 96px; }
body.snap .contact-intro h2 { font-size: 60px; }
body.snap .site-footer { height: 176px; flex-shrink: 0; }
body.snap .site-footer .footer-top { flex-direction: row; text-align: left; }
body.snap .site-footer .footer-contact { flex-direction: row; gap: 18px; }
body.snap .site-footer .footer-contact .dot { display: inline; }
body.snap .site-footer .footer-bottom { flex-direction: row; text-align: left; }
body.snap .site-footer { padding: 34px 80px 26px; gap: 0; justify-content: space-between; }

/* Fade wrappers get GPU hints in snap mode */
body.snap [data-fade] { will-change: transform, opacity; }

body.menu-open:not(.snap) .home-header { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open:not(.snap) .home-header .wordmark, body.menu-open:not(.snap) .home-header .hn { opacity: 0; pointer-events: none; }

/* ======================= Phone / tablet home: a simple page like the others ======================= */
.m-only { display: none; }
body:not(.snap) .d-only { display: none; }
body:not(.snap) .m-only { display: flex; }
body:not(.snap) .home-header { background: rgba(244, 237, 224, 0.96); border-bottom-color: rgba(205, 191, 166, 0.6); }

.m-hero { position: relative; min-height: 82svh; padding: 110px 24px 64px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.m-hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.m-hero-logo { width: min(82vw, 520px); height: auto; }
.m-hero-inner p { max-width: 340px; font-size: 20px; line-height: 1.5; }

.m-about { padding-top: 80px; }
.m-about .m-photo { width: 100%; max-width: 520px; height: auto; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: center top; border-radius: 4px; }
.m-copy { max-width: 560px; display: flex; flex-direction: column; gap: 12px; text-align: center; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.35; }
.m-lede { max-width: 640px; text-align: center; font-size: 20px; line-height: 1.7; }
.band h2 em { display: block; font-style: italic; color: var(--tan-light); }
.band .text-link { margin-top: 6px; }

body:not(.snap) .h-contact { border-top: 1px solid var(--rule); }
body:not(.snap) .contact-body { padding-top: 80px; }
@media (min-width: 700px) {
  .m-hero { min-height: 70vh; }
}