/* ============================================================
   SAMALA — WAVE DESIGN SYSTEM
   Matching: colorful wave hero, white nav, floating cards
   ============================================================ */

/* Product Sans (local) */
@font-face {
    font-family: 'Product Sans';
    src: url('/assets/fonts/Product%20Sans%20Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Product Sans';
    src: url('/assets/fonts/Product%20Sans%20Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Product Sans';
    src: url('/assets/fonts/Product%20Sans%20Italic.ttf') format('truetype');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Product Sans';
    src: url('/assets/fonts/Product%20Sans%20Bold%20Italic.ttf') format('truetype');
    font-weight: 700; font-style: italic; font-display: swap;
}

/* ── TOKENS ────────────────────────────────────────────────── */
:root {
    /* Brand colors extracted from screenshot */
    --olive:        #5a6600;      /* dark olive for text on light bg */
    --olive-mid:    #7a8c00;
    --lime:         #b6cc2f;      /* logo green-yellow */
    --lime-bright:  #d4e829;
    --lime-pale:    #f0f6c8;
    --yellow:       #f5d800;      /* bright yellow accent in bg */
    --teal:         #0097a7;      /* teal accent in bg wave */
    --ink:          #2a2e1e;      /* very dark olive-black for headlines */
    --ink-2:        #3d4320;
    --text:         #4a4e3a;
    --text-muted:   #7a7e6a;
    --white:        #ffffff;
    --off-white:    #fafaf7;
    --border:       rgba(90,102,0,.12);
    --card-shadow:  0 8px 40px rgba(0,0,0,.10);
    --card-shadow-hover: 0 16px 56px rgba(0,0,0,.16);

    /* Font */
    --font: 'Product Sans', 'Segoe UI', system-ui, sans-serif;

    /* Layout */
    --max-w: 1280px;
    --pad-x: 48px;

    /* Radius */
    --r-sm:  10px;
    --r-md:  16px;
    --r-lg:  24px;
    --r-xl:  32px;

    /* Motion */
    --ease: cubic-bezier(.4,0,.2,1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body {
    font-family: var(--font);
    color: var(--text);
    background: var(--off-white);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
html, body { min-height:100vh; display:flex; flex-direction:column; }
main { flex:1; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img, video { max-width:100%; height:auto; display:block; }
button { border:none; background:none; cursor:pointer; font-family:inherit; }
input, textarea { font-family:inherit; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    position: relative;
}

/* ── TOP BAR ────────────────────────────────────────────────── */
.top-info-bar {
    background: #f5f5f0;
    border-bottom: 1px solid #e8e8df;
    padding: 9px 0;
    font-size: 13px;
    color: var(--text-muted);
    position: fixed; top:0; left:0; right:0; z-index:1002;
    transition: transform .3s var(--ease);
}
.top-info-bar.hidden { transform: translateY(-100%); }
.top-info-content {
    display: flex; align-items: center; justify-content: space-between; gap:16px;
}
.contact-info { display:flex; align-items:center; gap:20px; }
.contact-info span { display:flex; align-items:center; gap:7px; font-size:13px; }
.contact-info i { color: var(--olive-mid); font-size:12px; }
.contact-info a { color: var(--text-muted); transition:color .2s; }
.contact-info a:hover { color: var(--olive); }
.social-icons { display:flex; gap:10px; }
.social-icons a {
    width:26px; height:26px; border-radius:6px;
    border:1px solid #ddddd5;
    display:grid; place-items:center;
    font-size:11px; color:var(--text-muted);
    transition:all .2s;
}
.social-icons a:hover { background:var(--lime); border-color:var(--lime); color:var(--ink); }

/* ── NAVIGATION ─────────────────────────────────────────────── */
.main-navigation {
    position: fixed;
    top: 37px; left:0; right:0; z-index:1001;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1.5px solid #ebebdf;
    transition: top .3s var(--ease), box-shadow .3s;
}
.main-navigation.scrolled { top:0; box-shadow:0 2px 20px rgba(0,0,0,.08); }
.nav-container {
    display: flex; align-items: center; height: 70px; gap:0;
}

/* Logo */
.logo { display:flex; align-items:center; flex-shrink:0; }
.logo-img { height:48px; width:auto; object-fit:contain; }

/* Nav links */
.nav-menu { flex:1; display:flex; justify-content:center; }
.nav-links { display:flex; align-items:center; gap:0; }
.nav-item { position:relative; }
.nav-link {
    display:flex; align-items:center; gap:5px;
    padding: 10px 18px;
    font-size: 14.5px; font-weight:600;
    color: var(--text);
    border-radius: var(--r-sm);
    transition: color .18s, background .18s;
    white-space: nowrap;
    letter-spacing: .01em;
    text-transform: uppercase;
    font-size: 13px;
}
.nav-link:hover { color: var(--olive); }
.nav-link.active {
    color: var(--olive);
    position: relative;
}
.nav-link.active::after {
    content:'';
    position:absolute; bottom:-1px; left:18px; right:18px;
    height:2.5px; background:var(--lime); border-radius:2px;
}

/* Dropdown */
.has-dropdown { position:relative; }
.has-dropdown > .nav-link::after {
    content:'▾';
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 2px;
    display: inline-block;
    transition: transform .2s;
}
.has-dropdown.active > .nav-link::after { content:''; }
/* Override active bottom border for dropdown parent */
.has-dropdown > .nav-link.active::after { bottom: auto; left:auto; right:auto; height:auto; background:none; border-radius:0; }
.nav-dropdown {
    position:absolute; top:calc(100% + 10px); left:50%;
    transform:translateX(-50%) translateY(8px);
    background:var(--white);
    border:1px solid #ebebdf;
    border-radius: var(--r-lg);
    box-shadow:0 20px 60px rgba(0,0,0,.12);
    padding:10px;
    min-width:580px;
    opacity:0; pointer-events:none;
    transition:opacity .18s var(--ease), transform .18s var(--ease);
    z-index:100;
}
.has-dropdown:hover .nav-dropdown {
    opacity:1; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}
.submenu-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.submenu-card {
    display:flex; flex-direction:column; gap:3px;
    padding:13px 16px;
    border-radius:var(--r-md);
    transition:background .15s;
}
.submenu-card:hover { background:var(--lime-pale); }
.submenu-title { font-size:13.5px; font-weight:700; color:var(--ink); }
.submenu-desc  { font-size:12px; color:var(--text-muted); }

/* Baze Music pill */
.baze-nav-wrapper { padding:0; }
.baze-logo-container {
    display:flex; align-items:center; gap:6px;
    padding:5px 14px 5px 8px;
    border:2px solid #e0e0d0;
    border-radius:999px;
    transition:border-color .2s;
}
.baze-logo-container:hover { border-color:var(--lime); }
.baze-circles { display:flex; gap:2px; }
.b-circle {
    width:22px; height:22px; border-radius:50%;
    font-size:10px; font-weight:700;
    display:grid; place-items:center;
}
.bc1 { background:#4CAF50; color:#fff; }
.bc2 { background:#FFC107; color:#fff; }
.bc3 { background:#FF5722; color:#fff; }
.bc4 { background:#2196F3; color:#fff; }
.baze-text-bottom { font-size:13px; font-weight:700; color:var(--ink); }

/* Mobile toggle */
.mobile-toggle {
    display:none; width:42px; height:42px;
    border-radius:var(--r-sm); border:1.5px solid #ddddd5;
    align-items:center; justify-content:center;
    font-size:16px; color:var(--text);
    transition:background .15s;
}
.mobile-toggle:hover { background:var(--lime-pale); }

/* CTA button */
.nav-cta { flex-shrink:0; margin-left:16px; }
.cta-button {
    display:flex; align-items:center; gap:8px;
    padding:11px 22px;
    background:var(--lime);
    color:var(--ink);
    font-size:13px; font-weight:700;
    border-radius:999px;
    transition:background .18s, transform .15s, box-shadow .18s;
    white-space:nowrap;
    text-transform:uppercase; letter-spacing:.03em;
    box-shadow: 0 4px 16px rgba(182,204,47,.35);
}
.cta-button:hover {
    background:var(--lime-bright);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(182,204,47,.5);
}
.cta-button i { font-size:13px; }

/* ── MOBILE MENU ────────────────────────────────────────────── */
.mobile-menu {
    position:fixed; inset:0; z-index:2000;
    background:var(--white);
    transform:translateX(100%);
    transition:transform .3s var(--ease);
    display:flex; flex-direction:column; overflow-y:auto;
}
.mobile-menu.active { transform:translateX(0); }
.mobile-menu-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 24px; border-bottom:1px solid #ebebdf;
}
.mobile-logo-img { height:40px; }
.mobile-close {
    width:36px; height:36px; border-radius:var(--r-sm);
    border:1.5px solid #ddddd5; display:grid; place-items:center;
    font-size:15px; color:var(--text);
}
.mobile-nav-links { padding:12px 16px; flex:1; }
.mobile-nav-links li { border-bottom:1px solid #ebebdf; }
.mobile-nav-links li:last-child { border-bottom:none; }
.mobile-nav-link {
    display:block; padding:15px 12px;
    font-size:15px; font-weight:600; color:var(--text);
    text-transform:uppercase; font-size:13px; letter-spacing:.04em;
    transition:color .15s;
}
.mobile-nav-link:hover, .mobile-nav-link.active { color:var(--olive); }
.mobile-submenu-toggle {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:15px 12px; font-size:13px; font-weight:600;
    color:var(--text); text-transform:uppercase; letter-spacing:.04em;
}
.mobile-submenu-toggle i { font-size:11px; color:var(--text-muted); transition:transform .2s; }
.mobile-submenu.open .mobile-submenu-toggle i { transform:rotate(180deg); }
.mobile-submenu-links { display:none; padding:6px 12px 12px 24px; }
.mobile-submenu.open .mobile-submenu-links { display:block; }
.mobile-submenu-links a {
    display:block; padding:9px 0;
    font-size:14px; color:var(--text-muted);
    border-bottom:1px solid #ebebdf;
    transition:color .15s;
}
.mobile-submenu-links a:last-child { border-bottom:none; }
.mobile-submenu-links a:hover { color:var(--olive); }
.mobile-contact-info {
    padding:20px 24px; border-top:1px solid #ebebdf;
    display:flex; flex-direction:column; gap:14px;
}
.mobile-phone {
    display:flex; align-items:center; gap:10px;
    font-size:16px; font-weight:700; color:var(--ink);
}
.mobile-phone i { color:var(--lime); }
.mobile-social { display:flex; gap:10px; }
.mobile-social a {
    width:36px; height:36px; border-radius:var(--r-sm);
    border:1.5px solid #ddddd5; display:grid; place-items:center;
    font-size:13px; color:var(--text-muted); transition:all .2s;
}
.mobile-social a:hover { background:var(--lime); color:var(--ink); border-color:var(--lime); }
body.menu-open { overflow:hidden; }

/* ── MAIN OFFSET ────────────────────────────────────────────── */
main { padding-top: 107px; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; gap:9px;
    padding:14px 28px;
    font-family:var(--font);
    font-size:14px; font-weight:700;
    border-radius:999px;
    transition:all .2s var(--ease);
    cursor:pointer; white-space:nowrap;
    border:2px solid transparent;
    text-transform:uppercase; letter-spacing:.04em;
}
.btn-primary {
    background:var(--lime);
    color:var(--ink);
    border-color:var(--lime);
    box-shadow:0 4px 20px rgba(182,204,47,.4);
}
.btn-primary:hover {
    background:var(--lime-bright);
    border-color:var(--lime-bright);
    transform:translateY(-2px);
    box-shadow:0 8px 28px rgba(182,204,47,.55);
}
.btn-secondary {
    background:rgba(255,255,255,.85);
    color:var(--ink);
    border-color:rgba(255,255,255,.6);
    backdrop-filter:blur(8px);
}
.btn-secondary:hover {
    background:var(--white);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.btn-outline {
    background:transparent;
    color:var(--olive);
    border-color:var(--lime);
}
.btn-outline:hover { background:var(--lime); color:var(--ink); }
.btn-dark {
    background:var(--ink);
    color:var(--white);
    border-color:var(--ink);
}
.btn-dark:hover {
    background:var(--ink-2);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* ── SECTION HEADER ─────────────────────────────────────────── */
.section-header {
    text-align:center; max-width:640px;
    margin:0 auto 60px;
}
.section-header.align-left { text-align:left; margin:0 0 48px; max-width:none; }
.section-eyebrow {
    display:inline-block;
    background:var(--lime-pale);
    color:var(--olive);
    font-size:11.5px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    padding:6px 16px; border-radius:999px;
    margin-bottom:14px;
    border:1px solid rgba(182,204,47,.3);
}
.section-header h2 {
    font-size:clamp(28px,3.5vw,42px);
    font-weight:700; color:var(--ink);
    line-height:1.18; letter-spacing:-.02em;
    margin-bottom:12px;
}
.section-header p { font-size:16px; color:var(--text-muted); line-height:1.72; }

/* ── HERO ────────────────────────────────────────────────────── */
.hero-section {
    position:relative; overflow:hidden;
    padding: 72px 0 80px;
    min-height: 560px;
    /* Wave background image */
    background:
        url('/assets/images/hero-bg-wave.png') center center / cover no-repeat;
}
/* Subtle light overlay so text stays readable */
.hero-section::before {
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(
        105deg,
        rgba(255,255,255,.82) 0%,
        rgba(255,255,255,.65) 45%,
        rgba(255,255,255,.08) 100%
    );
    pointer-events:none;
}
.hero-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px; align-items:center;
    position:relative; z-index:1;
}

/* Left: content */
.hero-eyebrow {
    display:inline-block;
    background:rgba(255,255,255,.82);
    color:var(--olive);
    font-size:11px; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase;
    padding:7px 18px; border-radius:999px;
    margin-bottom:20px;
    border:1.5px solid rgba(182,204,47,.4);
    backdrop-filter:blur(8px);
}
.hero-content h1 {
    font-size:clamp(36px,4.5vw,62px);
    font-weight:700; line-height:1.08;
    letter-spacing:-.025em;
    margin-bottom:20px;
    color:var(--ink);
}
.hero-content h1 span {
    color:var(--olive);         /* olive-green for "Communication" */
    display:block;
}
.hero-content > p {
    font-size:17px; color:var(--text);
    line-height:1.72; margin-bottom:36px;
    max-width:54ch;
}
.hero-buttons {
    display:flex; flex-wrap:wrap; gap:14px;
    margin-bottom:40px;
}
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; }
.hero-tags span {
    display:inline-block;
    padding:7px 16px;
    background:rgba(255,255,255,.75);
    border:1.5px solid rgba(182,204,47,.35);
    border-radius:999px;
    font-size:12.5px; font-weight:600; color:var(--ink);
    backdrop-filter:blur(6px);
    transition:all .18s;
}
.hero-tags span:hover {
    background:var(--lime);
    border-color:var(--lime);
    color:var(--ink);
    transform:translateY(-1px);
}

/* Right: floating cards */
.hero-visual {
    display:flex; flex-direction:column; gap:14px;
}
.hero-stack { display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
.hero-panel {
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.9);
    border-radius:var(--r-xl);
    padding:26px 30px;
    box-shadow:var(--card-shadow);
    backdrop-filter:blur(16px);
    transition:transform .25s var(--ease), box-shadow .25s;
}
.hero-panel:hover {
    transform:translateY(-4px);
    box-shadow:var(--card-shadow-hover);
}
.panel-label {
    display:flex; align-items:center; gap:7px;
    font-size:10.5px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--olive-mid); margin-bottom:9px;
}
.panel-label i { font-size:12px; color:var(--lime); }
.hero-panel h3 {
    font-size:22px; font-weight:700;
    color:var(--ink); letter-spacing:-.015em;
    margin-bottom:6px;
}
.hero-panel p { font-size:14px; color:var(--text-muted); line-height:1.58; }

/* Metric cards */
.hero-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.metric {
    background:rgba(255,255,255,.88);
    border:1px solid rgba(255,255,255,.9);
    border-radius:var(--r-lg);
    padding:18px 16px;
    text-align:center;
    backdrop-filter:blur(12px);
    box-shadow:var(--card-shadow);
    transition:transform .2s, box-shadow .2s;
}
.metric:hover { transform:translateY(-3px); box-shadow:var(--card-shadow-hover); }
.metric-value {
    display:block;
    font-size:28px; font-weight:700;
    color:var(--olive);
    letter-spacing:-.02em; line-height:1.1;
    margin-bottom:4px;
}
.metric-label {
    font-size:10px; font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.08em;
}

/* ── ABOUT SECTION ──────────────────────────────────────────── */
.about-section {
    padding:96px 0;
    background:var(--white);
}
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.about-content p {
    font-size:15.5px; color:var(--text); line-height:1.8;
    margin-bottom:18px;
}
.about-actions { display:flex; gap:12px; margin-top:32px; }
.about-card {
    background:var(--white);
    border:1.5px solid #ebebdf;
    border-radius:var(--r-xl);
    overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,.07);
}
.about-image { width:100%; height:240px; object-fit:cover; }
.about-points { padding:28px; display:flex; flex-direction:column; gap:18px; }
.about-point { display:flex; gap:14px; align-items:flex-start; }
.about-point i {
    width:38px; height:38px;
    background:var(--lime-pale); color:var(--olive);
    border-radius:var(--r-sm);
    display:grid; place-items:center; font-size:15px;
    flex-shrink:0; border:1px solid rgba(182,204,47,.25);
}
.about-point h4 { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.about-point p  { font-size:13px; color:var(--text-muted); line-height:1.55; margin:0; }

/* ── CONTACT BAR ────────────────────────────────────────────── */
.contact-bar {
    background:linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
    padding:52px 0;
    position:relative; overflow:hidden;
}
.contact-bar::before {
    content:'';
    position:absolute; top:-80px; right:-80px;
    width:360px; height:360px;
    background:radial-gradient(circle, rgba(182,204,47,.12) 0%, transparent 65%);
    border-radius:50%;
}
.contact-content {
    display:flex; align-items:center; justify-content:space-between; gap:40px;
    margin-bottom:28px;
}
.contact-text h3 {
    font-size:26px; font-weight:700; color:var(--white);
    letter-spacing:-.015em; margin-bottom:7px;
}
.contact-text p { font-size:15px; color:rgba(255,255,255,.5); line-height:1.65; max-width:52ch; }
.contact-phone a {
    display:inline-flex; align-items:center; gap:10px;
    background:var(--lime); color:var(--ink);
    padding:14px 26px; border-radius:999px;
    font-size:14px; font-weight:700;
    white-space:nowrap;
    box-shadow:0 4px 20px rgba(182,204,47,.4);
    transition:all .18s;
}
.contact-phone a:hover {
    background:var(--lime-bright); transform:translateY(-2px);
    box-shadow:0 8px 28px rgba(182,204,47,.55);
}
.contact-strip { display:flex; gap:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); }
.strip-item { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,.4); }
.strip-item i { color:var(--lime); font-size:12px; }

/* ── SERVICES ───────────────────────────────────────────────── */
.services-overview { padding:96px 0; background:var(--off-white); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card {
    background:var(--white);
    border:1.5px solid #ebebdf;
    border-radius:var(--r-xl);
    padding:36px 30px;
    display:flex; flex-direction:column; gap:14px;
    position:relative; overflow:hidden;
    transition:border-color .22s, box-shadow .22s, transform .22s;
}
.service-card::before {
    content:attr(data-number);
    position:absolute; top:20px; right:22px;
    font-size:52px; font-weight:700; color:#f0f0e8;
    line-height:1; letter-spacing:-.03em;
    pointer-events:none; transition:color .2s;
}
.service-card:hover {
    border-color:var(--lime);
    box-shadow:0 0 0 4px var(--lime-pale), 0 12px 40px rgba(0,0,0,.08);
    transform:translateY(-5px);
}
.service-card:hover::before { color:rgba(182,204,47,.25); }
.service-icon {
    width:46px; height:46px;
    background:var(--lime-pale);
    border-radius:var(--r-md);
    display:grid; place-items:center;
    font-size:19px; color:var(--olive);
    border:1px solid rgba(182,204,47,.25);
}
.service-card h3 { font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.01em; line-height:1.3; }
.service-card p  { font-size:14px; color:var(--text-muted); line-height:1.67; flex:1; }
.service-link {
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; font-weight:700; color:var(--olive);
    margin-top:6px; transition:gap .18s, color .18s;
}
.service-link i { font-size:11px; transition:transform .18s; }
.service-card:hover .service-link { color:var(--olive-mid); gap:10px; }
.service-card:hover .service-link i { transform:translateX(3px); }

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.testimonials-section { padding:96px 0; background:var(--white); }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.testimonial-card {
    background:var(--off-white);
    border:1.5px solid #ebebdf;
    border-radius:var(--r-xl);
    padding:36px 30px;
    display:flex; flex-direction:column; gap:18px;
    transition:transform .22s, box-shadow .22s, border-color .22s;
}
.testimonial-card:hover {
    transform:translateY(-5px);
    box-shadow:0 12px 40px rgba(0,0,0,.08);
    border-color:var(--lime);
}
.testimonial-stars { display:flex; gap:3px; color:var(--lime); font-size:14px; }
.testimonial-card > p { font-size:15px; color:var(--text); line-height:1.75; flex:1; font-style:italic; }
.testimonial-author {
    display:flex; align-items:center; gap:12px;
    padding-top:16px; border-top:1px solid #ebebdf;
}
.author-avatar {
    width:44px; height:44px; border-radius:50%;
    background:var(--lime); color:var(--ink);
    font-size:13px; font-weight:700;
    display:grid; place-items:center; flex-shrink:0;
}
.testimonial-author strong { display:block; font-size:14px; font-weight:700; color:var(--ink); }
.testimonial-author span  { font-size:12px; color:var(--text-muted); }

/* ── CTA SECTION ────────────────────────────────────────────── */
.cta-section {
    padding:96px 0;
    background:url('/assets/images/hero-bg-wave.png') center bottom / cover no-repeat;
    position:relative;
}
.cta-section::before {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.7) 60%, rgba(255,255,255,.3) 100%);
}
.cta-content { text-align:center; position:relative; z-index:1; max-width:600px; margin:0 auto; }
.cta-content h2 {
    font-size:clamp(28px,4vw,46px); font-weight:700;
    color:var(--ink); letter-spacing:-.025em; line-height:1.12;
    margin-bottom:14px;
}
.cta-content p { font-size:16px; color:var(--text); line-height:1.7; margin-bottom:36px; }
.cta-buttons { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.footer {
    background:var(--ink);
    padding:72px 0 0;
    margin-top:auto;
}
.footer-grid {
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:48px; padding-bottom:56px;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-col h3 {
    font-size:11.5px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase;
    color:rgba(255,255,255,.3); margin-bottom:20px;
}
.contact-details p {
    display:flex; align-items:flex-start; gap:10px;
    font-size:13.5px; color:rgba(255,255,255,.5);
    margin-bottom:10px; line-height:1.55;
}
.contact-details i { color:var(--lime); font-size:12px; margin-top:3px; flex-shrink:0; }
.contact-details a { color:rgba(255,255,255,.5); transition:color .15s; }
.contact-details a:hover { color:var(--lime); }
.footer .social-icons { display:flex; gap:8px; margin-top:18px; }
.footer .social-icons a {
    width:32px; height:32px; border-radius:var(--r-sm);
    border:1px solid rgba(255,255,255,.1);
    display:grid; place-items:center;
    font-size:12px; color:rgba(255,255,255,.4);
    transition:all .2s;
}
.footer .social-icons a:hover { background:var(--lime); border-color:var(--lime); color:var(--ink); }
.faq-links li, .quick-links li { margin-bottom:10px; }
.faq-links a, .quick-links a {
    font-size:13.5px; color:rgba(255,255,255,.45); transition:color .15s;
}
.faq-links a:hover, .quick-links a:hover { color:var(--lime); }

/* Footer form */
.contact-form { display:flex; flex-direction:column; gap:10px; }
.contact-form input,
.contact-form textarea {
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--r-md);
    padding:11px 15px; font-size:13.5px;
    color:rgba(255,255,255,.8);
    transition:border-color .2s, background .2s; outline:none; resize:vertical;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color:rgba(255,255,255,.25); }
.contact-form input:focus,
.contact-form textarea:focus { border-color:var(--lime); background:rgba(182,204,47,.06); }
.contact-form .btn {
    background:var(--lime); color:var(--ink);
    border-color:var(--lime); font-size:13px;
    border-radius:999px;
}
.contact-form .btn:hover { background:var(--lime-bright); }

.footer-bottom {
    padding:20px 0;
    display:flex; align-items:center; justify-content:space-between;
    font-size:13px; color:rgba(255,255,255,.22);
}

/* ── INNER PAGE HERO ────────────────────────────────────────── */
.page-hero {
    background:url('/assets/images/hero-bg-wave.png') center top / cover no-repeat;
    position:relative; padding:64px 0 72px;
}
.page-hero::before {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(105deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.6) 60%, rgba(255,255,255,.2) 100%);
}
.page-hero-content { position:relative; z-index:1; max-width:680px; }
.page-hero-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.85); color:var(--olive);
    font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    padding:5px 14px; border-radius:999px; margin-bottom:14px;
    border:1.5px solid rgba(182,204,47,.35);
}
.page-hero-content h1 {
    font-size:clamp(28px,4vw,48px); font-weight:700; color:var(--ink);
    letter-spacing:-.025em; line-height:1.1; margin-bottom:14px;
}
.page-hero-content p { font-size:17px; color:var(--text); line-height:1.72; }

/* ── SERVICE DETAIL PAGES ───────────────────────────────────── */
.service-detail { padding:80px 0; background:var(--white); }
.service-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.service-detail-copy h2 {
    font-size:clamp(24px,3vw,36px); font-weight:700; color:var(--ink);
    letter-spacing:-.02em; line-height:1.2; margin-bottom:14px;
}
.service-detail-copy p { font-size:15px; color:var(--text); line-height:1.8; margin-bottom:14px; }
.service-detail-image { border-radius:var(--r-xl); overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.10); }
.service-detail-image img { width:100%; height:320px; object-fit:cover; }
.feature-list { display:flex; flex-direction:column; gap:12px; margin-top:28px; }
.feature-item {
    display:flex; gap:12px; align-items:flex-start;
    padding:16px 18px;
    background:var(--off-white); border:1.5px solid #ebebdf; border-radius:var(--r-md);
    transition:border-color .2s;
}
.feature-item:hover { border-color:var(--lime); }
.feature-item i {
    width:34px; height:34px; border-radius:var(--r-sm);
    background:var(--lime-pale); color:var(--olive);
    display:grid; place-items:center; font-size:13px; flex-shrink:0;
}
.feature-item h4 { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.feature-item p  { font-size:13px; color:var(--text-muted); margin:0; line-height:1.5; }

/* ── FAQ PAGE ───────────────────────────────────────────────── */
.faq-section { padding:80px 0; background:var(--off-white); }
.faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.faq-item {
    background:var(--white); border:1.5px solid #ebebdf;
    border-radius:var(--r-lg); overflow:hidden; transition:border-color .2s;
}
.faq-item:hover { border-color:var(--lime); }
.faq-question {
    padding:20px 24px; display:flex; align-items:center; justify-content:space-between;
    font-size:15px; font-weight:700; color:var(--ink); cursor:pointer; gap:16px;
}
.faq-question i { color:var(--text-muted); font-size:12px; transition:transform .2s; flex-shrink:0; }
.faq-item.open .faq-question i { transform:rotate(180deg); color:var(--olive); }
.faq-item.open { border-color:var(--lime); }
.faq-answer { display:none; padding:0 24px 20px; font-size:14.5px; color:var(--text-muted); line-height:1.72; }
.faq-item.open .faq-answer { display:block; }

/* ── CONTACT PAGE ───────────────────────────────────────────── */
.contact-page { padding:80px 0; background:var(--off-white); }
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:32px; }
.contact-card {
    background:var(--white); border:1.5px solid #ebebdf;
    border-radius:var(--r-xl); padding:36px;
}
.contact-card h3 {
    font-size:22px; font-weight:700; color:var(--ink);
    letter-spacing:-.015em; margin-bottom:20px;
}
.contact-detail-item {
    display:flex; gap:12px; align-items:flex-start;
    padding:14px 0; border-bottom:1px solid #ebebdf;
}
.contact-detail-item:last-child { border-bottom:none; }
.contact-detail-item i {
    width:38px; height:38px; background:var(--lime-pale); color:var(--olive);
    border-radius:var(--r-sm); display:grid; place-items:center; font-size:14px; flex-shrink:0;
}
.contact-detail-item h4 { font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:3px; letter-spacing:.04em; text-transform:uppercase; }
.contact-detail-item p  { font-size:14.5px; color:var(--ink); }
.contact-form-card {
    background:var(--white); border:1.5px solid #ebebdf;
    border-radius:var(--r-xl); padding:36px;
}
.contact-form-card h3 {
    font-size:22px; font-weight:700; color:var(--ink);
    letter-spacing:-.015em; margin-bottom:24px;
}
.contact-form-card .contact-form input,
.contact-form-card .contact-form textarea {
    background:var(--off-white); border-color:#ebebdf; color:var(--ink);
}
.contact-form-card .contact-form input::placeholder,
.contact-form-card .contact-form textarea::placeholder { color:var(--text-muted); }
.contact-form-card .contact-form input:focus,
.contact-form-card .contact-form textarea:focus { border-color:var(--lime); background:var(--lime-pale); }
.contact-form-card .contact-form .btn { background:var(--ink); color:var(--white); border-color:var(--ink); }
.contact-form-card .contact-form .btn:hover { background:var(--ink-2); }

/* ── ABOUT PAGE ─────────────────────────────────────────────── */
.about-page { padding:80px 0; background:var(--off-white); }
.about-page-copy p { font-size:15.5px; color:var(--text); line-height:1.8; margin-bottom:16px; }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
.value-card {
    background:var(--white); border:1.5px solid #ebebdf;
    border-radius:var(--r-xl); padding:32px 28px;
    transition:border-color .2s, box-shadow .2s, transform .2s;
}
.value-card:hover { border-color:var(--lime); box-shadow:0 8px 32px rgba(0,0,0,.07); transform:translateY(-3px); }
.value-card i {
    width:46px; height:46px; background:var(--lime-pale); color:var(--olive);
    border-radius:var(--r-md); display:grid; place-items:center;
    font-size:19px; margin-bottom:16px; border:1px solid rgba(182,204,47,.25);
}
.value-card h3 { font-size:16px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.value-card p  { font-size:13.5px; color:var(--text-muted); line-height:1.65; }

/* ── BAZE MUSIC PAGE ────────────────────────────────────────── */
.baze-page { padding:80px 0; background:var(--off-white); }
.baze-hero {
    background:var(--ink); border-radius:var(--r-xl);
    padding:64px 56px; margin-bottom:48px;
    position:relative; overflow:hidden;
}
.baze-hero::before {
    content:''; position:absolute; top:-100px; right:-100px;
    width:400px; height:400px;
    background:radial-gradient(circle, rgba(182,204,47,.12) 0%, transparent 65%);
    border-radius:50%;
}
.baze-copy h2 {
    font-size:clamp(24px,3.5vw,42px); font-weight:700;
    color:var(--white); letter-spacing:-.025em; margin-bottom:14px;
}
.baze-copy p { font-size:16px; color:rgba(255,255,255,.5); line-height:1.72; margin-bottom:16px; }
.baze-gallery { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.baze-gallery img { width:100%; height:280px; object-fit:cover; border-radius:var(--r-xl); }

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity:0; transform:translateY(22px); }
    to   { opacity:1; transform:translateY(0); }
}
.hero-eyebrow      { animation:fadeUp .55s .05s both; }
.hero-content h1   { animation:fadeUp .6s  .12s both; }
.hero-content > p  { animation:fadeUp .6s  .2s  both; }
.hero-buttons      { animation:fadeUp .6s  .28s both; }
.hero-tags         { animation:fadeUp .6s  .36s both; }
.hero-visual       { animation:fadeUp .7s  .1s  both; }

.reveal {
    opacity:0; transform:translateY(22px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:1100px) {
    :root { --pad-x:32px; }
    .hero-grid { gap:40px; }
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:880px) {
    .hero-grid { grid-template-columns:1fr; }
    .hero-visual { display:none; }
    .about-grid { grid-template-columns:1fr; gap:40px; }
    .service-detail-grid { grid-template-columns:1fr; gap:40px; }
    .testimonials-grid { grid-template-columns:1fr; gap:12px; }
    .contact-grid { grid-template-columns:1fr; }
    .values-grid { grid-template-columns:1fr 1fr; }
    .nav-menu { display:none; }
    .mobile-toggle { display:flex; }
    .nav-cta { display:none; }
}
@media (max-width:640px) {
    :root { --pad-x:20px; }
    .services-grid { grid-template-columns:1fr; }
    .hero-buttons { flex-direction:column; }
    .hero-metrics { grid-template-columns:repeat(3,1fr); gap:8px; }
    .contact-content { flex-direction:column; gap:24px; }
    .contact-strip { flex-direction:column; gap:12px; }
    .values-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; gap:32px; }
    .baze-hero { padding:36px 28px; }
    .baze-gallery { grid-template-columns:1fr; }
    .hero-metrics { gap:6px; }
    .metric-value { font-size:22px; }
}

/* ── UTILITY ────────────────────────────────────────────────── */
::selection { background:var(--lime); color:var(--ink); }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--off-white); }
::-webkit-scrollbar-thumb { background:#ddddd5; border-radius:999px; border:2px solid var(--off-white); }
::-webkit-scrollbar-thumb:hover { background:var(--lime); }