.hero { position: relative; min-height: 52rem; padding: 8.5rem 0 4rem; overflow: hidden; }
.hero::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 12, 12, 0.85), transparent 58%), repeating-linear-gradient(90deg, transparent 0 5.5rem, rgba(255,255,255,0.018) 5.5rem calc(5.5rem + 1px)); content: ""; pointer-events: none; }
.hero-glow { position: absolute; top: -20%; right: -10%; width: 65vw; height: 70rem; background: radial-gradient(ellipse, rgba(173, 138, 86, 0.14), transparent 65%); }
.hero-grid { position: relative; display: grid; gap: 3rem; }
.hero-copy { position: relative; z-index: 2; padding-top: 2rem; }
.hero h1 { max-width: 10ch; margin-bottom: 1.5rem; }
.hero-intro { max-width: 37rem; margin-bottom: 2.2rem; color: rgba(243, 237, 226, 0.72); font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.35rem); }
.hero-note { display: flex; margin-top: 3rem; color: #b9afa4; align-items: center; gap: 0.7rem; font-size: 0.7rem; letter-spacing: 0.06em; }
.hero-note span { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--color-brass); box-shadow: 0 0 0 0.3rem rgba(173, 138, 86, 0.12); }
.hero-visual { position: relative; width: min(100%, 32rem); margin-left: auto; }
.image-placeholder-hero { min-height: 32rem; box-shadow: var(--shadow-image); }
.hero-caption { display: flex; padding-top: 0.8rem; color: #aaa095; font-size: 0.62rem; letter-spacing: 0.14em; justify-content: space-between; text-transform: uppercase; }
.scroll-cue { position: absolute; right: 1.25rem; bottom: 2rem; display: none; color: #aaa095; font-size: 0.58rem; letter-spacing: 0.18em; text-decoration: none; text-transform: uppercase; writing-mode: vertical-rl; }
.scroll-cue i { display: block; width: 1px; height: 3.5rem; margin-top: 0.8rem; background: var(--color-brass); }

.introduction { padding: var(--space-8) 0; }
.intro-grid { display: grid; gap: 3rem; }
.intro-portrait { max-width: 28rem; }
.image-placeholder-portrait { min-height: 28rem; background-color: var(--color-wood); box-shadow: var(--shadow-image); }
.image-note { margin: 0.7rem 0 0; color: var(--color-muted); font-family: var(--font-display); font-size: 0.78rem; font-style: italic; }
.intro-copy h2 { max-width: 11ch; margin-bottom: 1.8rem; }
.intro-copy .lead { max-width: 38rem; color: #4e4741; font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.55rem); }
.intro-aside { padding-top: 1rem; border-top: 1px solid var(--color-line); }
.intro-aside .aside-number { display: block; margin-bottom: 1.5rem; color: var(--color-brass); font-family: var(--font-display); font-size: 2rem; }
.intro-aside p { margin-bottom: 0.45rem; color: var(--color-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }

.showcase { padding: var(--space-8) 0; overflow: hidden; }
.showcase-heading { display: grid; gap: 2rem; margin-bottom: 3.5rem; }
.showcase-heading h2 { max-width: 12ch; }
.showcase-heading > p { max-width: 30rem; color: rgba(243, 237, 226, 0.64); }
.instrument-composition { display: grid; gap: 2rem; }
.instrument-feature, .instrument-tile { color: inherit; text-decoration: none; }
.image-placeholder-instrument { min-height: 30rem; background-color: #171413; transition: transform 400ms ease; }
.instrument-feature:hover .image-placeholder-instrument, .instrument-tile:hover .image-placeholder { transform: scale(0.99); }
.instrument-index { display: block; margin-top: 0.9rem; color: var(--color-brass-soft); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; }
.instrument-title { display: flex; margin-top: 0.3rem; border-bottom: 1px solid rgba(243, 237, 226, 0.2); font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); justify-content: space-between; }
.instrument-title i { color: var(--color-brass); font-style: normal; }
.instrument-secondary { display: grid; gap: 2rem; }
.image-placeholder-detail { min-height: 18rem; background-color: #251d1c; transition: transform 400ms ease; }
.instrument-tile > span { display: flex; padding-top: 0.7rem; border-top: 1px solid rgba(243, 237, 226, 0.18); flex-direction: column; }
.instrument-tile strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; }
.instrument-tile small { color: #b9afa4; font-size: 0.65rem; text-transform: uppercase; }
.section-action { margin-top: 3rem; }

.services { padding: var(--space-8) 0; }
.services-grid { display: grid; gap: 3rem; }
.services-heading h2 { max-width: 10ch; }
.service-list { border-top: 1px solid var(--color-line); }
.service-list a { display: grid; padding: 1.45rem 0; border-bottom: 1px solid var(--color-line); align-items: center; grid-template-columns: 2.25rem 1fr auto; color: inherit; text-decoration: none; transition: padding var(--transition), color var(--transition); }
.service-list a:hover { padding-inline: 0.6rem; color: var(--color-wine); }
.service-list span { color: #866334; font-size: 0.65rem; }
.service-list strong { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 400; }
.service-list small { display: none; color: var(--color-muted); }
.service-list i { font-style: normal; }

.video-section { padding: var(--space-8) 0; }
.video-heading { display: grid; gap: 2rem; margin-bottom: 3.5rem; }
.video-heading h2 { margin-bottom: 0; }
.video-heading > div:last-child { max-width: 32rem; color: rgba(243, 237, 226, 0.65); }
.video-layout { display: grid; gap: 2rem; }
.video-layout .collection-empty { grid-template-columns: 1fr; }
.video-layout .collection-empty .text-link { color: var(--color-ivory); }
.video-layout .content-grid { grid-template-columns: 1fr; }
.featured-video-placeholder { position: relative; display: grid; min-height: 24rem; border: 1px solid rgba(194, 168, 120, 0.25); background: radial-gradient(circle at center, rgba(86, 31, 42, 0.3), transparent 24%), repeating-linear-gradient(135deg, #1a1817 0 1rem, #171514 1rem 2rem); place-items: center; color: #b9afa4; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.play-symbol { display: grid; width: 4rem; height: 4rem; margin-bottom: -5rem; padding-left: 0.2rem; border: 1px solid var(--color-brass); border-radius: 50%; place-items: center; color: var(--color-brass-soft); font-size: 1rem; }
.video-topics { counter-reset: topics; }
.video-topics p { display: grid; margin: 0; padding: 1.2rem 0; border-bottom: 1px solid rgba(243, 237, 226, 0.14); grid-template-columns: 2.5rem 1fr; font-family: var(--font-display); font-size: 1.2rem; }
.video-topics span { color: var(--color-brass); font-family: var(--font-body); font-size: 0.6rem; }

.craft { padding: var(--space-8) 0; }
.craft-grid { display: grid; gap: 3rem; }
.craft-copy h2 { max-width: 11ch; }
.craft-copy > p:not(.eyebrow):not(.content-needed) { max-width: 34rem; color: var(--color-muted); font-family: var(--font-display); font-size: 1.2rem; }
.craft-visual { position: relative; display: flow-root; overflow: hidden; background: #171412; }
.craft-visual .image-placeholder-craft { aspect-ratio: 4 / 3; background-size: contain; background-color: #171412; }
.craft-visual .image-placeholder-craft > span { bottom: 0.25rem; }
/* Reserve room for the skewed keys below the artwork and its branding label. */
.craft-lines { display: flex; width: 55%; height: 5rem; margin: 3rem 1.5rem 1.5rem auto; gap: 0.45rem; transform: skewY(-7deg); transform-origin: left bottom; }
.craft-lines span { flex: 1; border-right: 1px solid rgba(173, 138, 86, 0.5); border-left: 1px solid rgba(173, 138, 86, 0.5); background: var(--color-wine-dark); }

.local-presence { padding: 4.5rem 0; border-top: 1px solid var(--color-line); }
.local-grid { display: grid; gap: 1.5rem; }
.local-kicker { color: #866334; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.local-grid h2 { max-width: 16ch; font-size: clamp(2rem, 4vw, 3.5rem); }
.local-grid > div:nth-child(2) p { max-width: 38rem; color: var(--color-muted); }
.local-action { display: flex; padding: 1.5rem; border: 1px dashed rgba(23, 20, 18, 0.25); align-items: center; gap: 1rem; color: var(--color-muted); font-size: 0.74rem; font-style: italic; }
.map-pin { display: block; width: 1.4rem; height: 1.4rem; border: 1px solid var(--color-wine); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }

.closing-cta { position: relative; padding: var(--space-8) 0; overflow: hidden; }
.closing-cta::after { position: absolute; right: -8rem; bottom: -15rem; width: 30rem; height: 30rem; border: 1px solid rgba(194, 168, 120, 0.16); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(194, 168, 120, 0.03), 0 0 0 6rem rgba(194, 168, 120, 0.02); content: ""; }
.closing-grid { position: relative; z-index: 1; display: grid; gap: 2rem; }
.closing-grid h2 { max-width: 12ch; margin-bottom: 0; }
.closing-action { max-width: 29rem; align-self: end; }
.closing-action p { margin-bottom: 2rem; color: rgba(243, 237, 226, 0.68); }

@media (min-width: 48rem) {
    .hero-grid { grid-template-columns: 1.08fr 0.92fr; align-items: center; }
    .hero-copy { padding-top: 4rem; }
    .hero-visual { margin-top: 1.5rem; }
    .image-placeholder-hero { min-height: 39rem; }
    .scroll-cue { display: flex; align-items: center; }
    .intro-grid { grid-template-columns: 0.8fr 1.15fr 0.35fr; align-items: center; }
    .intro-copy { padding-left: 2rem; }
    .showcase-heading, .video-heading, .closing-grid { grid-template-columns: 1.25fr 0.75fr; align-items: end; }
    .instrument-composition { grid-template-columns: 1.35fr 0.65fr; align-items: start; }
    .instrument-secondary { padding-top: 5rem; }
    .instrument-tile-offset { margin-left: -2rem; transform: translateY(2rem); }
    .services-grid { grid-template-columns: 0.8fr 1.2fr; gap: 6rem; }
    .service-list a { grid-template-columns: 3rem minmax(12rem, 0.7fr) 1fr auto; }
    .service-list small { display: block; }
    .video-layout { grid-template-columns: 1.4fr 0.6fr; align-items: end; }
    .featured-video-placeholder { min-height: 34rem; }
    .craft-grid { grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: 6rem; }
    .craft-visual { margin-right: 2rem; }
    .local-grid { grid-template-columns: 0.45fr 1.1fr 0.6fr; align-items: center; }
}

@media (min-width: 75rem) {
    .hero { min-height: 100svh; padding-top: 7rem; }
    .hero-grid { min-height: calc(100svh - 11rem); }
    .hero-visual { margin-right: 3rem; }
    .image-placeholder-hero { min-height: min(44rem, 70vh); }
}