/* GH STUDIO - index page styles */

.hero-image{
    position:absolute; inset:0;
    background-image:
        linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.72), rgba(0,0,0,.35)),
        url('../img/hero_homepage.webp');
    background-size:cover; background-position:center;
    filter:grayscale(100%);
    transform:scale(1.02);
}
/* =====================================================
   INTRO
===================================================== */
.intro{ padding:150px 0; }
.intro-grid{ display:grid; grid-template-columns:1fr 1.5fr; gap:80px; }
.label{ color:#666; font-size:11px; letter-spacing:3px; text-transform:uppercase; }
.intro h2{ margin-top:20px; font-family:"Playfair Display", serif; font-size:clamp(40px, 5vw, 70px); line-height:1; }
.intro-text{ color:#999; font-size:17px; line-height:1.9; max-width:650px; }
/* =====================================================
   SERVICES
===================================================== */
.services{ padding:100px 0; background:#fff; color:#000; }
.services-heading{ display:flex; justify-content:space-between; align-items:end; margin-bottom:60px; }
.services-heading h2{ font-family:"Playfair Display", serif; font-size:clamp(50px, 7vw, 90px); line-height:.9; }
.services-heading p{ max-width:350px; color:#666; font-size:13px; line-height:1.7; }
.service-list{ border-top:1px solid #ccc; }
.service{
    display:grid; grid-template-columns:70px 1fr auto; gap:30px; align-items:center;
    padding:28px 0; border-bottom:1px solid #ccc; transition:.3s;
}
.service:hover{ padding-left:15px; background:#f7f7f7; }
.service-number{ font-size:12px; color:#888; }
.service-name{ font-size:24px; font-weight:600; }
.service-description{ display:block; margin-top:5px; color:#888; font-size:12px; }
.service-price{ font-weight:800; font-size:15px; }
/* =====================================================
   GALLERY
===================================================== */
.gallery{ padding:140px 0; }
.gallery-heading{ margin-bottom:60px; }
.gallery-heading h2{ font-family:"Playfair Display", serif; font-size:clamp(55px, 8vw, 110px); line-height:.85; letter-spacing:-4px; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0%); transition:transform .8s, filter .8s; }
.gallery-item:hover img{ transform:scale(1.06); filter:grayscale(0%); }
.gallery-caption{
    position:absolute; left:25px; bottom:20px; z-index:2;
    font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
}
/* =====================================================
   HAIR ARTIST / TEAM
===================================================== */
.artists{ padding:130px 0; }
.artists-heading{ margin-bottom:60px; max-width:500px; }
.artists-heading h2{ font-family:"Playfair Display", serif; font-size:clamp(50px,7vw,90px); line-height:.9; letter-spacing:-3px; }
.artists-heading p{ color:#888; font-size:13px; line-height:1.7; margin-top:15px; }
.artists-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:25px; }
.artist-card{ background:#0b0b0b; border:1px solid var(--line); }
.artist-photo{ width:100%; height:280px; object-fit:cover; filter:grayscale(100%); background:#111; }
.artist-info{ padding:20px; }
.artist-name{ font-size:17px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.artist-spec{ color:#666; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; margin-top:6px; }
.artist-bio{ color:#888; font-size:12px; line-height:1.7; margin-top:12px; }
.artist-ig{ display:inline-block; margin-top:14px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#aaa; border-bottom:1px solid #333; padding-bottom:2px; }
/* =====================================================
   EXPERIENCE
===================================================== */
.experience{ padding:130px 0; background:#0b0b0b; }
.experience-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.experience-image{
    height:650px;
    background-image:
        linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.4)),
        url('https://images.unsplash.com/photo-1585747860715-2ba37e788b70?auto=format&fit=crop&w=1200&q=90');
    background-size:cover; background-position:center;
    filter:grayscale(100%);
}
.experience h2{ font-family:"Playfair Display", serif; font-size:clamp(45px, 6vw, 80px); line-height:.95; }
.experience p{ color:#888; margin-top:25px; line-height:1.9; max-width:500px; }
.experience-list{ margin-top:40px; }
.experience-list div{ display:flex; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); font-size:13px; }
.experience-list span{ color:#555; }
/* =====================================================
   CTA
===================================================== */
.cta{ padding:160px 0; text-align:center; }
.cta h2{ font-family:"Playfair Display", serif; font-size:clamp(55px, 9vw, 120px); line-height:.85; letter-spacing:-5px; }
.cta p{ color:#777; max-width:500px; margin:30px auto; line-height:1.7; }
/* =====================================================
   MOBILE (<= 800px)
===================================================== */
@media(max-width:800px){
    body{ background:#050505; }

    .container{ width:calc(100% - 30px); }

    .navbar{
        position:fixed; top:0; left:0; padding:5px 0;
        background:rgba(255,255,255,0);
        border-bottom:1px solid rgba(255,255,255,.1);
        backdrop-filter:blur(18px);
    }
    .nav-inner{ width:calc(100% - 30px); display:flex; justify-content:space-between; align-items:center; }
    .logo img{ height:36px; width:auto; }
    .nav-links{ display:none; }

    .hero{ min-height:760px; align-items:flex-end; padding-bottom:55px; }
    .hero-image{
        background-image:
            linear-gradient(180deg, rgba(0,0,0,.05) 10%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.94) 82%, #050505 100%),
            url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=1200&q=90');
        background-position:center top;
        filter:grayscale(100%);
    }
    .hero-content{ width:calc(100% - 30px); padding-top:0; margin:0 auto; }
    .hero-small{ font-size:9px; letter-spacing:2.5px; margin-bottom:18px; color:#aaa; }
    .hero h1{ font-size:54px; line-height:.9; letter-spacing:-3px; max-width:100%; }
    .hero h1 span{ font-size:43px; line-height:1; letter-spacing:-2px; margin-top:4px; }
    .hero-description{ max-width:100%; margin-top:22px; font-size:13px; line-height:1.7; color:#aaa; }
    .hero-buttons{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:25px; }
    .btn{ width:100%; padding:14px 10px; font-size:9px; letter-spacing:1.2px; text-align:center; }
    .hero-side{ display:none; }

    .marquee{ padding:13px 0; border-top:1px solid #222; border-bottom:1px solid #222; }
    .marquee span{ font-size:9px; letter-spacing:2px; margin-right:30px; }

    .intro{ padding:85px 0; }
    .intro-grid{ display:block; }
    .label{ font-size:9px; letter-spacing:2.5px; }
    .intro h2{ margin-top:15px; font-size:48px; line-height:.95; letter-spacing:-2px; }
    .intro-text{ margin-top:30px; font-size:14px; line-height:1.8; color:#888; }

    .services{ padding:75px 0; }
    .services-heading{ display:block; margin-bottom:35px; }
    .services-heading h2{ font-size:52px; line-height:.85; letter-spacing:-2px; }
    .services-heading p{ margin-top:20px; font-size:12px; line-height:1.7; }
    .service-list{ border-top:1px solid #222; }
    .service{
        display:grid; grid-template-columns:35px 1fr auto; gap:10px; align-items:center;
        padding:22px 0; transition:none;
    }
    .service:hover{ padding-left:0; background:none; }
    .service-number{ font-size:9px; color:#555; }
    .service-name{ font-size:18px; line-height:1.2; }
    .service-description{ margin-top:5px; font-size:9px; color:#777; }
    .service-price{ font-size:10px; white-space:nowrap; }

    .gallery{ padding:85px 0; }
    .gallery-heading{ margin-bottom:35px; }
    .gallery-heading h2{ margin-top:15px; font-size:58px; line-height:.82; letter-spacing:-3px; }
    .gallery-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .gallery-item{ width:100%; height:270px!important; margin:0!important; grid-column:span 1!important; border-radius:0; }
    .gallery-item:first-child{ grid-column:span 2!important; height:430px!important; }
    .gallery-item:last-child{ grid-column:span 2!important; height:430px!important; }
    .gallery-item img{ filter:grayscale(0%); }
    .gallery-caption{ left:14px; bottom:14px; font-size:8px; letter-spacing:1.5px; }

    .artists{ padding:85px 0; }
    .artists-heading h2{ font-size:52px; line-height:.85; letter-spacing:-2px; }
    .artists-grid{ grid-template-columns:1fr 1fr; gap:12px; }
    .artist-photo{ height:200px; }
    .artist-info{ padding:14px; }
    .artist-name{ font-size:13px; }
    .artist-bio{ display:none; }

    .experience{ padding:85px 0; }
    .experience-grid{ display:flex; flex-direction:column; gap:40px; }
    .experience-image{ width:100%; height:450px; order:1; background-position:center; filter:grayscale(100%); }
    .experience-grid > div:last-child{ order:2; }
    .experience h2{ margin-top:15px; font-size:58px; line-height:.84; letter-spacing:-3px; }
    .experience p{ margin-top:22px; font-size:13px; line-height:1.8; }
    .experience-list{ margin-top:30px; }
    .experience-list div{ padding:14px 0; font-size:12px; }

    .cta{ padding:100px 15px; text-align:center; }
    .cta h2{ margin-top:15px; font-size:58px; line-height:.82; letter-spacing:-3px; }
    .cta p{ font-size:13px; line-height:1.7; margin:25px auto; }
    .cta .btn{ display:inline-flex; width:auto; min-width:190px; justify-content:center; }

    footer{ padding:55px 0 25px; }
    .footer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px 20px; }
    .footer-grid > div:first-child{ grid-column:span 2; }
    .footer-logo{ height:38px; }
    .footer-brand{ margin-top:15px; font-size:12px; line-height:1.7; }
    .footer-title{ font-size:8px; letter-spacing:2px; margin-bottom:15px; }
    .footer-links{ gap:10px; }
    .footer-links a{ font-size:11px; }
    .footer-bottom{ display:flex; flex-direction:column; gap:5px; margin-top:45px; padding-top:18px; font-size:8px; line-height:1.8; }

    .floating-book{
        right:15px; bottom:15px; width:auto; height:auto;
        min-width:125px; padding:14px 20px; border-radius:50px;
        font-size:9px; letter-spacing:1px; line-height:1;
    }
}
/* =====================================================
   SMALL PHONE (320–380px)
===================================================== */
@media(max-width:380px){
    .hero{ min-height:720px; padding-bottom:40px; }
    .hero h1{ font-size:46px; letter-spacing:-2.5px; }
    .hero h1 span{ font-size:36px; }
    .hero-description{ font-size:12px; }
    .hero-buttons{ grid-template-columns:1fr; }
    .intro h2{ font-size:42px; }
    .services-heading h2{ font-size:46px; }
    .service{ grid-template-columns:28px 1fr; }
    .service-price{ grid-column:2; margin-top:6px; font-size:10px; }
    .gallery-heading h2{ font-size:49px; }
    .experience h2{ font-size:50px; }
    .cta h2{ font-size:50px; }
}