/* =====================================================================
   Joy Musical Studio – style.css
   1. Reset / Base
   2. Variables
   3. Typography
   4. Buttons
   5. Header (top bar, main header, navigation)
   6. Hero slider
   7. Home sections
   8. About
   9. Services
   10. Gallery
   11. Contact
   12. Footer
   13. Utilities
   ===================================================================== */

/* ---------------------------------------------------------------
   1. RESET / BASE
   --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-light);
    background-color: var(--bg-dark);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
figure { margin: 0; }
iframe { border: 0; }

:focus-visible {
    outline: 2px solid var(--brand-amber);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--brand-orange);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------
   2. VARIABLES
   --------------------------------------------------------------- */
:root {
    /* LIGHT THEME – warm off-white surfaces, ink-dark text */
    --bg-dark: #ffffff;
    --bg-alt: #f8f5f1;
    --bg-deep: #f1ece5;
    --bg-card: #ffffff;
    --bg-card-2: #fdfbf9;

    /* Brand palette sampled directly from the Joy Musical Studio logo */
    --brand-orange: #c6531a;   /* rust orange of the "JOY" lettering */
    --brand-copper: #7d2b0a;   /* deep rust / maroon edge of the lettering */
    --brand-amber: #e5762f;    /* bright orange highlight */
    --brand-eyebrow: #f0994f;  /* readable tint of the logo orange */
    --brand-purple: #6a35e0;   /* violet of the music note */
    --brand-blue: #2f3ad0;     /* blue of the music note */
    --brand-magenta: #b0307f;  /* magenta of the music note */
    --brand-maroon: #731801;   /* "MUSICAL STUDIO" deep red */
    --whatsapp: #25d366;

    --text-light: #201a15;
    --text-muted: #5f584f;
    --border-soft: rgba(32, 26, 21, 0.09);
    --border-strong: rgba(32, 26, 21, 0.18);

    --font-head: "Poppins", "Segoe UI", Arial, sans-serif;
    --font-body: "Inter", "Segoe UI", Arial, sans-serif;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow-soft: 0 18px 45px rgba(32, 26, 21, 0.12);
    --shadow-glow: 0 10px 30px rgba(198, 83, 26, 0.28);

    --container: 1200px;
    --gutter: 20px;
}

/* ---------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 600;
    line-height: 1.22;
    margin: 0 0 0.7em;
    color: var(--text-light);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
h4 { font-size: 1rem; margin-bottom: 0.35em; }

p { margin: 0 0 1.1em; color: var(--text-muted); }
p:last-child { margin-bottom: 0; }
strong { color: var(--text-light); font-weight: 600; }

.eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-eyebrow);
    margin: 0 0 0.9em;
}

.section-head {
    max-width: 760px;
    margin: 0 auto 34px;
    text-align: center;
}
.section-head--left { margin-left: 0; text-align: left; }
.section-head__text { font-size: 1.02rem; }
.section-foot { text-align: center; margin-top: 30px; }
.section-foot .btn + .btn { margin-left: 12px; }
.section-footnote {
    max-width: 780px;
    margin: 34px auto 0;
    text-align: center;
    font-size: 0.92rem;
    color: var(--text-muted);
    background: rgba(32, 26, 21, 0.04);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
}

/* ---------------------------------------------------------------
   LAYOUT HELPERS
   --------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.container--narrow { max-width: 900px; }

.section { padding: clamp(32px, 5vw, 64px) 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-deep); }
/* Decorative audio-wave backdrop for the production/process section –
   no colour veil, so the photo stays fully visible behind the cards.
   Fixed attachment keeps the background image sticky while the section scrolls. */
.process.section--dark {
    background: var(--bg-deep) url("../images/gallery/audio-wave-background.jpg") center / cover no-repeat fixed;
}
@media (max-width: 900px) {
    /* fixed attachment is unreliable on small screens – fall back to normal scrolling */
    .process.section--dark { background-attachment: scroll; }
}

/* Music production highlight strip */
.highlight-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 36px;
}
.highlight-strip__item {
    position: relative;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.highlight-strip__item:hover { transform: translateY(-6px); border-color: rgba(229, 118, 47, 0.45); }
.highlight-strip__item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.highlight-strip__item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 14px 11px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(180deg, rgba(6, 6, 8, 0), rgba(6, 6, 8, 0.88));
}

/* Opportunities section – cultural program backdrop, shown with no colour veil */
/* Cultural backdrop stays fixed in place while the section scrolls over it */
.section.opportunities {
    background: var(--bg-alt) url("../images/opportunities/cultural-katcheri.jpg") center / cover no-repeat fixed;
}
@media (max-width: 900px) {
    /* fixed attachment is unreliable on small screens – fall back to normal scrolling */
    .section.opportunities { background-attachment: scroll; }
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}
.grid-2--center { align-items: center; }

.prose { max-width: 780px; margin: 40px auto 0; }

/* ---------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: 15px 26px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn .icon { width: 17px; height: 17px; flex: none; transition: transform 0.25s ease; }

.btn--primary {
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-copper));
    color: #fff;
    box-shadow: 0 8px 22px rgba(198, 83, 26, 0.28);
}
.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}
.btn--primary:hover .icon { transform: translateX(4px); }

.btn--ghost {
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-light);
    border-color: rgba(32, 26, 21, 0.3);
    backdrop-filter: blur(4px);
}
.btn--ghost:hover {
    background: rgba(32, 26, 21, 0.06);
    border-color: var(--brand-amber);
    transform: translateY(-2px);
}

.btn--outline {
    background: transparent;
    color: var(--text-light);
    border-color: var(--border-strong);
}
.btn--outline:hover {
    border-color: var(--brand-amber);
    color: var(--brand-orange);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(32, 26, 21, 0.14);
}

.btn--whatsapp {
    background: var(--whatsapp);
    color: #07321c;
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.22);
}
.btn--whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37, 211, 102, 0.35); }

.btn--sm { padding: 11px 20px; font-size: 0.88rem; }
.btn--block { width: 100%; }

/* Clear hover states for the ghost buttons used on photo backgrounds:
   "See Production Services" (production section) and "Send an Enquiry" (CTA) */
.process .btn--ghost,
.final-cta .btn--ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.14);
}
.process .btn--ghost:hover,
.final-cta .btn--ghost:hover {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
}

/* ---------------------------------------------------------------
   5. HEADER
   --------------------------------------------------------------- */
.topbar {
    /* Top bar uses the "Step Into The Studio" brand colour, shaded through the bar */
    background: linear-gradient(90deg, #7d2b0a, #c6531a 48%, #9a3a10);
    border-bottom: 1px solid rgba(60, 20, 6, 0.45);
    font-size: 0.78rem;
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 30px;
    flex-wrap: wrap;
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.92); }
.topbar__item:hover { color: #ffe3cd; }
.topbar__label { color: rgba(255, 255, 255, 0.75); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.68rem; }
.topbar__right a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.topbar__right a:hover { background: #2a1a12; color: #fff; transform: translateY(-2px); }
.topbar .icon { width: 13px; height: 13px; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-soft);
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.site-header.is-stuck {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 30px rgba(32, 26, 21, 0.12);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 78px;
    position: relative;
}

.brand { display: inline-flex; align-items: center; gap: 13px; min-width: 0; }
.brand__logo {
    position: relative;
    width: 86px;
    height: 86px;
    flex: none;
    display: grid;
    place-items: center;
}
.brand__fallback {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    color: var(--brand-eyebrow);
}
.brand__logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
}
.brand__logo img.is-broken { opacity: 0; }
.brand__logo.is-loaded .brand__fallback { display: none; }

.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
    font-family: var(--font-head);
    font-size: 1.42rem;
    font-weight: 600;
    color: var(--text-light);
    line-height: 1.2;
    white-space: nowrap;
}
.brand__tagline {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.main-nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.main-nav__list { display: flex; align-items: center; gap: 4px; }
.main-nav__link {
    display: block;
    position: relative;
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 10px 14px;
    border-radius: 8px;
    transition: color 0.25s ease, background-color 0.25s ease;
}
.main-nav__link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-orange), var(--brand-magenta), var(--brand-purple));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.main-nav__link:hover { color: var(--text-light); }
.main-nav__link:hover::after,
.main-nav__link.is-active::after { transform: scaleX(1); }
.main-nav__link.is-active { color: var(--brand-orange); }
.main-nav__cta { display: none; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 44px;
    padding: 10px;
    background: rgba(32, 26, 21, 0.05);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
}
.nav-toggle__bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--text-light);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.site-header.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------
   6. HERO SLIDER
   --------------------------------------------------------------- */
.hero {
    position: relative;
    height: min(86vh, 780px);
    min-height: 540px;
    background: var(--bg-deep);
    overflow: hidden;
}
.hero__slides { position: absolute; inset: 0; }

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s ease;
    background-color: #0d0d0f;
}
.hero__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hero-img), var(--hero-fallback);
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 9s ease-out;
}
.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.hero__slide.is-active::before { transform: scale(1.08); }

/* No overlay on the hero photograph – the image stays fully bright.
   Only the content box below carries a background, so the text reads
   clearly while the studio photo is never darkened. */
.hero__slide--right .hero__inner { justify-content: flex-end; }
.hero__slide--right .hero__panel {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-right: 3px solid var(--brand-orange);
}

.hero__inner {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
}

.hero__panel {
    max-width: 640px;
    padding: clamp(24px, 3vw, 40px) clamp(22px, 3.4vw, 44px);
    /* Highly transparent glass – the hero photo stays clearly visible
       through the box; only a very light tint keeps the text readable. */
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-left: 3px solid var(--brand-orange);
    border-radius: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    color: #ffffff;
}
.hero__panel h1,
.hero__panel h2 { color: #ffffff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
.hero__panel p { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
/* Hero copy stays visible at all times – the animation only enhances it,
   so text is never lost if animations are skipped or unsupported. */
.hero__panel > * { opacity: 1; transform: none; }
.hero__slide.is-active .hero__panel > * { animation: hero-reveal 0.75s cubic-bezier(0.22, 0.68, 0.35, 1) backwards; }
.hero__slide.is-active .hero__panel > *:nth-child(1) { animation-delay: 0.15s; }
.hero__slide.is-active .hero__panel > *:nth-child(2) { animation-delay: 0.28s; }
.hero__slide.is-active .hero__panel > *:nth-child(3) { animation-delay: 0.40s; }
.hero__slide.is-active .hero__panel > *:nth-child(4) { animation-delay: 0.50s; }
.hero__slide.is-active .hero__panel > *:nth-child(5) { animation-delay: 0.62s; }

@keyframes hero-reveal {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero__eyebrow {
    font-family: var(--font-head);
    font-size: 1.18rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--brand-eyebrow);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.78), 0 1px 3px rgba(0, 0, 0, 0.65);
    margin-bottom: 0.7em;
}
.hero__title { margin-bottom: 0.28em; }
/* First slide uses an <h1> – keep it smaller so it fits one/two tidy lines */
h1.hero__title { font-size: clamp(1.85rem, 3.8vw, 2.9rem); }
.hero__tagline {
    font-family: var(--font-head);
    font-size: clamp(1rem, 1.7vw, 1.3rem);
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.6em;
}
.hero__text { font-size: clamp(0.97rem, 1.3vw, 1.08rem); color: #e6e6e9; margin-bottom: 1.5em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(8, 8, 10, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    backdrop-filter: blur(6px);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.hero__arrow:hover { background: var(--brand-orange); border-color: var(--brand-orange); transform: translateY(-50%) scale(1.06); }
.hero__arrow .icon { width: 22px; height: 22px; }
.hero__arrow--prev { left: clamp(8px, 2vw, 26px); }
.hero__arrow--next { right: clamp(8px, 2vw, 26px); }

.hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 6;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.hero__dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.25s ease, width 0.3s ease, border-radius 0.3s ease;
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.6); }
.hero__dot.is-active {
    width: 30px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--brand-orange), var(--brand-magenta), var(--brand-purple));
    border-color: transparent;
}

/* ---------------------------------------------------------------
   7. HOME SECTIONS
   --------------------------------------------------------------- */

/* --- About / introduction --- */
.about-intro__media { position: relative; padding-bottom: 60px; }
.about-intro__media .img-frame--tall { border-radius: 20px; overflow: hidden; }
.about-intro__media .img-frame--small {
    position: absolute;
    right: -8px;
    bottom: 0;
    width: 46%;
    border-radius: 16px;
    overflow: hidden;
    border: 4px solid var(--bg-dark);
    box-shadow: var(--shadow-soft);
}
.about-intro__badge {
    position: absolute;
    left: -10px;
    bottom: 26px;
    display: grid;
    place-items: center;
    padding: 14px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-copper));
    box-shadow: var(--shadow-glow);
    text-align: center;
}
.about-intro__badge strong { font-family: var(--font-head); font-size: 1.3rem; color: #fff; line-height: 1; }
.about-intro__badge small { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); }

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0 30px;
}
.metric {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 16px 12px;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.metric:hover { transform: translateY(-5px); border-color: rgba(229, 118, 47, 0.5); box-shadow: var(--shadow-glow); }
.metric__icon { display: block; color: var(--brand-eyebrow); margin-bottom: 8px; }
.metric__icon .icon { width: 24px; height: 24px; margin: 0 auto; }
.metric__value { display: block; font-family: var(--font-head); font-size: 1rem; color: var(--text-light); line-height: 1.3; }
.metric__label { display: block; font-size: 0.76rem; color: var(--text-muted); }

/* --- Service cards --- */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.service-card {
    position: relative;
    background: linear-gradient(160deg, var(--bg-card-2), var(--bg-card));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 28px 26px 24px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.service-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-orange), var(--brand-magenta), var(--brand-purple), var(--brand-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.service-card:hover { transform: translateY(-7px); border-color: rgba(229, 118, 47, 0.45); box-shadow: var(--shadow-soft); }
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: rgba(198, 83, 26, 0.14);
    border: 1px solid rgba(229, 118, 47, 0.35);
    color: var(--brand-eyebrow);
}
.service-card__icon .icon { width: 27px; height: 27px; }
.service-card h3 { margin-bottom: 0.55em; }

/* Service category image (bleeds to the card edges) */
.service-card__media {
    margin: -28px -26px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-deep);
}
.service-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.service-card:hover .service-card__media img { transform: scale(1.05); }

.tick-list { display: grid; gap: 8px; margin-bottom: 18px; }
.tick-list li {
    position: relative;
    padding-left: 26px;
    font-size: 0.95rem;
    color: var(--text-muted);
}
.tick-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 15px;
    height: 8px;
    border-left: 2px solid var(--brand-amber);
    border-bottom: 2px solid var(--brand-amber);
    transform: rotate(-45deg);
}
.tick-list--lg { gap: 10px; margin-bottom: 22px; }
.tick-list--lg li { font-size: 1rem; }

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-head);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-eyebrow);
}
.card-link .icon { width: 15px; height: 15px; transition: transform 0.25s ease; }
.card-link:hover .icon { transform: translateX(5px); }

/* --- Academy --- */
.academy { background: linear-gradient(160deg, #fdfaf6, #f4efe8 55%); position: relative; }
.academy__sub {
    font-family: var(--font-head);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    color: var(--text-light);
    margin-bottom: 1em;
}
.chip-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 24px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(32, 26, 21, 0.05);
    border: 1px solid var(--border-strong);
    font-size: 0.87rem;
    color: var(--text-light);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.chip .icon { width: 15px; height: 15px; color: var(--brand-eyebrow); }
.chip:hover { background: rgba(198, 83, 26, 0.16); border-color: rgba(229, 118, 47, 0.5); transform: translateY(-3px); }

.note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(229, 118, 47, 0.09);
    border: 1px solid rgba(229, 118, 47, 0.32);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-size: 0.92rem;
    color: var(--text-muted);
    margin-bottom: 26px;
}
.note .icon { width: 18px; height: 18px; flex: none; color: var(--brand-eyebrow); margin-top: 3px; }
.note--block { max-width: none; }

.academy__media { position: relative; }
.academy__media .img-frame--tall { border-radius: 20px; overflow: hidden; }
.academy__media .img-frame--offset {
    position: absolute;
    left: -14px;
    bottom: -34px;
    width: 48%;
    border: 4px solid var(--bg-dark);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.academy__float {
    position: absolute;
    top: 22px;
    right: -14px;
    display: grid;
    gap: 2px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-soft);
    max-width: 230px;
}
.academy__float .icon { width: 24px; height: 24px; color: var(--brand-eyebrow); }
.academy__float strong { font-family: var(--font-head); font-size: 0.94rem; }
.academy__float small { color: var(--text-muted); font-size: 0.78rem; }

/* --- Process / production --- */
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    counter-reset: step;
}
.process-step {
    position: relative;
    background: linear-gradient(170deg, var(--bg-card-2), var(--bg-card));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 30px 24px 26px;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.process-step:hover { transform: translateY(-6px); border-color: rgba(229, 118, 47, 0.45); box-shadow: var(--shadow-soft); }
.process-step__num {
    position: absolute;
    top: 14px;
    right: 18px;
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(32, 26, 21, 0.12);
}
.process-step__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgba(229, 118, 47, 0.35), rgba(198, 83, 26, 0.12));
    border: 1px solid rgba(229, 118, 47, 0.4);
    color: var(--brand-eyebrow);
}
.process-step__icon .icon { width: 28px; height: 28px; }
.process-step h3 { margin-bottom: 0.45em; }
.process-step p { font-size: 0.93rem; }

/* --- Opportunities --- */
.opp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.opp-card {
    /* Near-opaque card so copy stays readable over the now-uncovered photo */
    background:
        linear-gradient(160deg, rgba(106, 53, 224, 0.14), rgba(106, 53, 224, 0) 58%),
        rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 28px 24px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.opp-card:hover {
    transform: translateY(-6px);
    border-color: rgba(176, 48, 127, 0.55);
    box-shadow: 0 18px 40px rgba(32, 26, 21, 0.14);
}
.opp-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 13px;
    background: rgba(106, 53, 224, 0.12);
    border: 1px solid rgba(106, 53, 224, 0.35);
    color: var(--brand-purple);
}
.opp-card__icon .icon { width: 25px; height: 25px; }
.opp-card p { font-size: 0.93rem; }

/* --- Gallery grid --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.gallery-grid--preview .gallery-item { min-height: 210px; }

.gallery-item {
    position: relative;
    min-width: 0;   /* keep grid track width (aspect-ratio + min-height must not force overflow) */
    width: 100%;    /* definite width = grid track, never ratio-derived from min-height */
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(145deg, #f0ebe5, #eadfd4 55%, #ece4f4);
    border: 1px solid var(--border-soft);
    aspect-ratio: 4 / 3;
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.gallery-item img.is-broken { opacity: 0; }
.gallery-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: rgba(229, 118, 47, 0.45); }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 16px 14px;
    background: linear-gradient(180deg, transparent, rgba(5, 5, 6, 0.78));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.gallery-item:hover figcaption,
.gallery-item:focus-within figcaption { opacity: 1; transform: translateY(0); }
.gallery-item figcaption span {
    font-family: var(--font-head);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}
.gallery-item__zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(8, 8, 10, 0.6);
    color: #fff;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.gallery-item__zoom .icon { width: 18px; height: 18px; }
.gallery-item:hover .gallery-item__zoom,
.gallery-item:focus-within .gallery-item__zoom { opacity: 1; transform: scale(1); }
.gallery-item__zoom:hover { background: var(--brand-orange); }
.gallery-item.is-hidden { display: none; }

.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 34px;
}
.filter-btn {
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-head);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.filter-btn:hover { color: var(--brand-orange); border-color: var(--brand-amber); transform: translateY(-2px); }
.filter-btn.is-active {
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-copper));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px rgba(198, 83, 26, 0.3);
}

/* --- FAQ accordion --- */
.accordion { display: grid; gap: 12px; }
.accordion__item {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.accordion__item:hover,
.accordion__item.is-open { border-color: rgba(229, 118, 47, 0.45); box-shadow: 0 12px 30px rgba(32, 26, 21, 0.1); }
.accordion__heading { margin: 0; font-size: inherit; }
.accordion__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
    padding: 18px 22px;
    background: transparent;
    border: 0;
    color: var(--text-light);
    font-family: var(--font-head);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.5;
}
.accordion__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(32, 26, 21, 0.05);
    border: 1px solid var(--border-strong);
    color: var(--brand-eyebrow);
    transition: transform 0.35s ease, background 0.35s ease;
}
.accordion__icon .icon { width: 16px; height: 16px; }
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); background: var(--brand-orange); color: #fff; }
.accordion__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.accordion__panel p {
    padding: 0 22px 20px;
    font-size: 0.97rem;
    margin: 0;
}

/* --- Final CTA --- */
.final-cta {
    position: relative;
    padding: clamp(34px, 4.5vw, 58px) 0;
    background: var(--bg-alt) url("../images/gallery/music-journey-cta.jpg") center / cover no-repeat;
    overflow: hidden;
    border-top: 1px solid var(--border-soft);
}
.final-cta__inner { position: relative; z-index: 2; text-align: center; max-width: 780px; }
.final-cta__inner p { font-size: 1.05rem; }
.final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
}
.final-cta__wave,
.site-footer__wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 130px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    padding: 0 12px;
    opacity: 0.35;
    pointer-events: none;
}
.final-cta__wave span,
.site-footer__wave span {
    flex: 1;
    min-width: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, rgba(229, 118, 47, 0.9), rgba(106, 53, 224, 0.05));
    animation: wave-bar 2.4s ease-in-out infinite;
}
.site-footer__wave span { background: linear-gradient(180deg, rgba(229, 118, 47, 0.85), rgba(229, 118, 47, 0)); }

@keyframes wave-bar {
    0%, 100% { height: 22%; }
    50% { height: 92%; }
}
.final-cta__wave span:nth-child(2n) { animation-duration: 1.9s; }
.final-cta__wave span:nth-child(3n) { animation-duration: 2.9s; }
.final-cta__wave span:nth-child(4n) { animation-duration: 3.4s; }
.site-footer__wave span:nth-child(2n) { animation-duration: 2.1s; }
.site-footer__wave span:nth-child(3n) { animation-duration: 3.1s; }

/* --- Reviews (hidden placeholder component) --- */
.testimonials { display: none; }

/* ---------------------------------------------------------------
   8. ABOUT
   --------------------------------------------------------------- */
.page-banner {
    position: relative;
    padding: clamp(54px, 8vw, 92px) 0;
    /* dark fallback only – no gradient veil, the photo itself is the background */
    background-color: #17110d;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--border-soft);
    overflow: hidden;
}
/* No overlay wash – the banner photo (a dark studio shot) stays fully visible,
   so the title and breadcrumb are styled to read on top of the photo. */
.page-banner__inner { position: relative; z-index: 2; }
.page-banner__title {
    margin-bottom: 0.35em;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    font-family: var(--font-head);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.breadcrumb a { color: var(--brand-eyebrow); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-current] { color: #ffffff; }

.timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 4%;
    right: 4%;
    height: 2px;
    background: linear-gradient(90deg, rgba(229, 118, 47, 0.1), rgba(229, 118, 47, 0.65), rgba(176, 48, 127, 0.55), rgba(106, 53, 224, 0.5), rgba(106, 53, 224, 0.1));
}
.timeline__item {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 22px 22px 24px;
    margin-top: 54px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.timeline__item::before {
    content: "";
    position: absolute;
    top: -34px;
    left: 26px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--brand-amber);
    border: 3px solid var(--bg-alt);
    box-shadow: 0 0 0 3px rgba(229, 118, 47, 0.35);
}
.timeline__item:hover { transform: translateY(-6px); border-color: rgba(229, 118, 47, 0.45); box-shadow: var(--shadow-soft); }
.timeline__year {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-eyebrow);
    margin-bottom: 8px;
}
.timeline__item h3 { font-size: 1.1rem; margin-bottom: 0.4em; }
.timeline__item p { font-size: 0.92rem; }

.vm-card {
    background: linear-gradient(160deg, var(--bg-card-2), var(--bg-card));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: clamp(26px, 3vw, 38px);
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.vm-card__media {
    margin: -38px -38px 22px;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border-soft);
}
.vm-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.vm-card__media + .vm-card__icon { margin-top: 2px; }
.vm-card:hover { transform: translateY(-6px); border-color: rgba(106, 53, 224, 0.45); box-shadow: var(--shadow-soft); }
.vm-card__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(198, 83, 26, 0.22), rgba(106, 53, 224, 0.2));
    border: 1px solid var(--border-strong);
    color: var(--brand-eyebrow);
}
.vm-card__icon .icon { width: 27px; height: 27px; }

.positioning {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(18px, 3vw, 40px);
    margin-top: 34px;
    padding: clamp(24px, 3vw, 36px);
    background: rgba(32, 26, 21, 0.04);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}
.positioning__item h3 { color: var(--brand-eyebrow); }
.positioning__divider {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(198, 83, 26, 0.16);
    border: 1px solid rgba(229, 118, 47, 0.4);
    color: var(--brand-eyebrow);
}
.positioning__divider .icon { width: 26px; height: 26px; }

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.why-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 26px 24px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.why-card:hover { transform: translateY(-6px); border-color: rgba(229, 118, 47, 0.42); box-shadow: var(--shadow-soft); }
.why-card__icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    border-radius: 13px;
    background: rgba(198, 83, 26, 0.14);
    border: 1px solid rgba(229, 118, 47, 0.34);
    color: var(--brand-eyebrow);
}
.why-card__icon .icon { width: 24px; height: 24px; }
.why-card p { font-size: 0.93rem; }

/* No colour veil – the music-note photo stays fully visible behind the glass card */
.philosophy {
    background: var(--bg-alt) url("../images/gallery/music-note-background.jpg") center / cover no-repeat;
    text-align: center;
    /* compact section – the Artist Development Philosophy block needs less height */
    padding-top: clamp(30px, 3.5vw, 46px);
    padding-bottom: clamp(30px, 3.5vw, 46px);
}
.philosophy .note { text-align: left; display: inline-flex; margin-top: 18px; }

/* ---------------------------------------------------------------
   9. SERVICES
   --------------------------------------------------------------- */
.service-block {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: clamp(26px, 4vw, 56px);
    align-items: center;
    padding: clamp(28px, 4vw, 46px) 0;
    border-bottom: 1px solid var(--border-soft);
    scroll-margin-top: 110px;
}
.service-block:last-child { border-bottom: 0; }
.service-block--reverse .service-block__media { order: 2; }

.service-block__media { position: relative; }
.service-block__media .img-frame { border-radius: 20px; overflow: hidden; }
.service-block__icon {
    position: absolute;
    left: -16px;
    bottom: -16px;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-copper));
    color: #fff;
    box-shadow: var(--shadow-glow);
    border: 4px solid var(--bg-dark);
}
.service-block--reverse .service-block__icon { left: auto; right: -16px; }
.service-block__icon .icon { width: 28px; height: 28px; }

.benefit {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(32, 26, 21, 0.04);
    border-left: 3px solid var(--brand-amber);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 13px 16px;
    font-size: 0.94rem;
    margin-bottom: 22px;
}
.benefit .icon { width: 18px; height: 18px; flex: none; color: var(--brand-eyebrow); margin-top: 3px; }
.service-block__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------
   10. GALLERY LIGHTBOX
   --------------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    background: rgba(4, 4, 6, 0.94);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox__figure { max-width: min(1100px, 92vw); text-align: center; }
.lightbox__img {
    max-width: 100%;
    max-height: 76vh;
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
    background: linear-gradient(145deg, #1a1a1f, #241610);
}
.lightbox__caption { margin-top: 14px; color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; }
.lightbox__close,
.lightbox__nav {
    position: static;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-strong);
    color: #fff;
    font-size: 1.2rem;
    transition: background 0.25s ease, transform 0.25s ease;
    flex: none;
}
.lightbox__close { position: absolute; top: 20px; right: 24px; font-size: 1.7rem; }
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--brand-orange); transform: scale(1.07); }

/* ---------------------------------------------------------------
   11. CONTACT
   --------------------------------------------------------------- */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(26px, 4vw, 52px);
    align-items: start;
}
.contact-info {
    background: linear-gradient(165deg, var(--bg-card-2), var(--bg-card));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: clamp(26px, 3vw, 36px);
}
.contact-info__media {
    margin: 0 0 22px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-deep);
}
.contact-info__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.contact-info__text { margin-bottom: 24px; }
.contact-list { display: grid; gap: 18px; margin-bottom: 26px; }
.contact-list__item { display: flex; gap: 15px; align-items: flex-start; }
.contact-list__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 13px;
    background: rgba(198, 83, 26, 0.16);
    border: 1px solid rgba(229, 118, 47, 0.36);
    color: var(--brand-eyebrow);
}
.contact-list__icon .icon { width: 21px; height: 21px; }
.contact-list__item h4 { color: var(--text-muted); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.contact-list__item a,
.contact-list__item span:not(.contact-list__icon) { display: block; color: var(--text-light); font-size: 0.98rem; }
.contact-list__item a:hover { color: var(--brand-eyebrow); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.contact-social {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border-soft);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.contact-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(32, 26, 21, 0.05);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.contact-social a:hover { background: var(--brand-orange); color: #fff; transform: translateY(-3px); }
.contact-social .icon { width: 18px; height: 18px; }

.contact-form-wrap {
    background: linear-gradient(165deg, var(--bg-card-2), var(--bg-card));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: clamp(26px, 3vw, 36px);
    scroll-margin-top: 110px;
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-field { margin-bottom: 18px; }
.form-field label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-head);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-light);
}
.form-field label span { color: var(--brand-eyebrow); }
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 0.97rem;
    color: var(--text-light);
    background: #ffffff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: #7e7e88; }
.form-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--brand-eyebrow) 50%), linear-gradient(135deg, var(--brand-eyebrow) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.form-field select option { background: #ffffff; color: var(--text-light); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--brand-amber);
    box-shadow: 0 0 0 3px rgba(229, 118, 47, 0.22);
}
.form-field input.is-invalid,
.form-field select.is-invalid,
.form-field textarea.is-invalid { border-color: #ff6b6b; }

.form-msg {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    margin-bottom: 20px;
}
.form-msg--success { background: rgba(37, 211, 102, 0.14); border: 1px solid rgba(37, 211, 102, 0.5); color: #0f7a45; }
.form-msg--error { background: rgba(255, 107, 107, 0.12); border: 1px solid rgba(255, 107, 107, 0.5); color: #b02a20; }
.form-error {
    background: rgba(255, 107, 107, 0.12);
    border: 1px solid rgba(255, 107, 107, 0.5);
    color: #b02a20;
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    margin-bottom: 16px;
}
.form-note { font-size: 0.87rem; margin-top: 14px; text-align: center; }

.map-frame {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    background: var(--bg-card);
}
.map-frame iframe { display: block; width: 100%; height: 420px; filter: grayscale(0.15); }

/* ---------------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------------- */
.site-footer {
    position: relative;
    background: var(--bg-deep);
    border-top: 1px solid var(--border-soft);
    padding-top: clamp(52px, 6vw, 78px);
    overflow: hidden;
}
.site-footer__wave { top: 0; bottom: auto; height: 110px; transform: scaleY(-1); opacity: 0.25; }
.site-footer__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: clamp(26px, 3vw, 44px);
    padding-bottom: clamp(36px, 4vw, 54px);
}
.brand--footer { margin-bottom: 18px; }
.footer-brand__text { font-size: 0.95rem; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(32, 26, 21, 0.05);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.footer-social a:hover { background: var(--brand-orange); color: #fff; transform: translateY(-3px); }
.footer-social .icon { width: 18px; height: 18px; }

.footer-col__title {
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-eyebrow);
    margin-bottom: 18px;
}
.footer-links { display: grid; gap: 10px; }
.footer-links a {
    color: var(--text-muted);
    font-size: 0.95rem;
    transition: color 0.25s ease, transform 0.25s ease, display 0.25s ease;
}
.footer-links a:hover { color: var(--brand-eyebrow); }
.footer-contact { display: grid; gap: 14px; margin-bottom: 20px; }
.footer-contact li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; color: var(--text-muted); font-size: 0.95rem; }
.footer-contact .icon { grid-row: span 3; width: 17px; height: 17px; color: var(--brand-eyebrow); margin-top: 5px; }
.footer-contact a { color: var(--text-muted); }
.footer-contact a:hover { color: var(--brand-eyebrow); }

.site-footer__bottom { border-top: 1px solid var(--border-soft); position: relative; z-index: 2; }
.site-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 9px;
    padding-bottom: 9px;
}
.site-footer__bottom p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }
.site-footer__credit { color: #6f675e !important; }
.site-footer__by { color: var(--brand-eyebrow); font-weight: 700; }

/* ---------------------------------------------------------------
   13. UTILITIES / GLOBAL COMPONENTS
   --------------------------------------------------------------- */
.icon { width: 20px; height: 20px; }
.icon-sm { width: 16px; height: 16px; }

.img-frame {
    position: relative;
    background: linear-gradient(145deg, #efe9e3, #e7dcd1 65%, #ece4f4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, opacity 0.3s ease;
}
.img-frame img.is-broken { opacity: 0; }
.img-frame--tall { aspect-ratio: 4 / 5; }
.img-frame--small { aspect-ratio: 4 / 3; }

/* Floating WhatsApp button – circular icon-only pill (right edge, like the reference) */
.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    background: var(--whatsapp);
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.whatsapp-float:hover {
    transform: translateY(-4px);
    background: #1fbb5a;
    box-shadow: 0 16px 36px rgba(37, 211, 102, 0.6);
}
.whatsapp-float__text { display: none; }
.whatsapp-float__icon { width: 28px; height: 28px; }

.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 88px;
    z-index: 1150;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border-strong);
    color: var(--text-light);
    box-shadow: 0 10px 26px rgba(32, 26, 21, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.25s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--brand-orange); }
.back-to-top .icon { width: 19px; height: 19px; }

/* Scroll reveal – only when JS is available */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.75s ease, transform 0.75s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------
/* ---------------------------------------------------------------
   HERO PANEL – TRANSPARENT GLASS CARD (wins the cascade)
   Very light tint only: the studio photo shows through the box,
   a hairline white border and soft shadow keep it legible.
   --------------------------------------------------------------- */
.hero .hero__panel {
    color: #ffffff;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-left: 3px solid var(--brand-orange);
    border-radius: 20px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.hero .hero__panel h1,
.hero .hero__panel h2 {
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.hero .hero__eyebrow { color: var(--brand-eyebrow); }
.hero .hero__title { color: #ffffff; }
.hero .hero__tagline { color: var(--brand-eyebrow); }
.hero .hero__text { color: rgba(255, 255, 255, 0.93); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.hero .btn--ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.12);
}
.hero .btn--ghost:hover { background: #ffffff; color: #14100d; border-color: #ffffff; }
.hero .hero__slide--right .hero__panel {
    border-left: 1px solid rgba(255, 255, 255, 0.45);
    border-right: 3px solid var(--brand-orange);
}

/* ---------------------------------------------------------------
   GLASS PANELS – no white fill, no border, no shadow: the card is
   fully transparent so the section's background photo shows through
   (softly blurred), and the copy itself is light for readability.
   --------------------------------------------------------------- */
.process .section-head,
.section.opportunities .section-head,
.philosophy .container,
.final-cta__inner {
    background: transparent;
    border: none;
    border-radius: 18px;
   /* backdrop-filter: blur(10px); */
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none;
}
.process .section-head,
.section.opportunities .section-head {
    max-width: 820px;
    padding: clamp(20px, 4vw, 28px) clamp(18px, 4vw, 32px);
}
.philosophy .container,
.final-cta__inner { padding: clamp(12px, 2vw, 18px) clamp(20px, 4vw, 34px); }

/* Text on the transparent panels: light colour + soft shadow so it reads over the photo */
.process .section-head h2,
.section.opportunities .section-head h2,
.philosophy .container h2,
.final-cta__inner h2 {
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.process .section-head p,
.section.opportunities .section-head p,
.philosophy .container p,
.final-cta__inner p {
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 9px rgba(0, 0, 0, 0.75);
}
.process .section-head .eyebrow,
.section.opportunities .section-head .eyebrow,
.philosophy .container .eyebrow,
.final-cta__inner .eyebrow {
    color: #ffbf96;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.philosophy .container h2 strong,
.philosophy .container strong { color: #ffffff; }
/* Disclaimer note stays readable without a white box */
.philosophy .note {
    background: rgba(18, 12, 9, 0.55);
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.section.opportunities .section-footnote {
    background: rgba(255, 255, 255, 0.88);
    border: 1px dashed rgba(32, 26, 21, 0.3);
    text-shadow: none;
}

/* ---------------------------------------------------------------
   MOTION PREFERENCES
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .js .reveal { opacity: 1; transform: none; }
    .hero__panel > * { opacity: 1; transform: none; }
}