/* =========================================================
   CLASSIC HAIR STUDIO
   PREMIUM DARK PINK + CHAMPAGNE GOLD
   "Your Hair Is Your Pride."
   ========================================================= */

/* =========================================================
   ROOT / COLOUR SYSTEM
   ========================================================= */

:root{
  --bg:#35121f;
  --bg-deep:#250b15;
  --bg-dark:#2b0d19;

  --surface:#421626;
  --surface-2:#4d1b2d;
  --surface-3:#592038;

  --pink:#7d304d;
  --pink-light:#a94d70;
  --rose:#c56b8c;

  --gold:#d4a24c;
  --gold-light:#f1c875;
  --gold-bright:#ffe0a0;
  --gold-soft:#efd49b;

  --white:#fff8fb;
  --text:#fff4f7;
  --text-soft:#ead4dc;
  --muted:#c4a8b2;
  --muted-dark:#9d7b87;

  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);
  --line-gold:rgba(212,162,76,.38);

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   RESET
   ========================================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}

body{
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(197,107,140,.13),
      transparent 27%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(212,162,76,.09),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #35121f 0%,
      #421626 45%,
      #2b0d19 100%
    );

  color:var(--text);
  font-family:var(--sans);
  overflow-x:hidden;
  min-height:100vh;
}

body.menu-open{
  overflow:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font-family:inherit;
}

img{
  display:block;
  max-width:100%;
}

::selection{
  background:var(--gold);
  color:#28100e;
}


/* =========================================================
   PREMIUM SCROLLBAR
   ========================================================= */

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-track{
  background:#250b15;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(
    180deg,
    var(--gold),
    #8e5b25
  );

  border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
  background:var(--gold-light);
}


/* =========================================================
   PAGE LOADER
   ========================================================= */

.page-loader{
  position:fixed;
  inset:0;

  background:
    radial-gradient(
      circle at center,
      #5a2039 0%,
      #35121f 45%,
      #200913 100%
    );

  z-index:9999;

  display:grid;
  place-items:center;

  transition:
    opacity .8s var(--ease),
    visibility .8s;
}

.page-loader::before{
  content:"";

  position:absolute;

  width:220px;
  height:220px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(212,162,76,.15),
      transparent 68%
    );

  filter:blur(10px);

  animation:loaderGlow 2.5s ease-in-out infinite;
}

.page-loader span{
  width:52px;
  height:52px;

  border:1px solid rgba(212,162,76,.22);

  border-top-color:var(--gold-light);

  border-right-color:var(--gold);

  border-radius:50%;

  animation:
    spin 1s linear infinite;

  box-shadow:
    0 0 35px rgba(212,162,76,.15);
}

.page-loader.hide{
  opacity:0;
  visibility:hidden;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

@keyframes loaderGlow{
  50%{
    transform:scale(1.15);
    opacity:.6;
  }
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:fixed;

  z-index:1000;

  top:0;
  left:0;

  width:100%;
  height:88px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 5vw;

  background:
    linear-gradient(
      180deg,
      rgba(37,9,20,.97) 0%,
      rgba(53,18,31,.88) 70%,
      transparent 100%
    );

  transition:
    height .4s var(--ease),
    background .4s var(--ease),
    box-shadow .4s var(--ease);

  border-bottom:1px solid transparent;
}

.site-header.scrolled{
  height:72px;

  background:
    rgba(43,13,25,.91);

  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);

  border-bottom:
    1px solid var(--line-gold);

  box-shadow:
    0 12px 45px rgba(0,0,0,.24);
}


/* =========================================================
   LOGO
   ========================================================= */

.brand{
  position:relative;
  display:flex;
  align-items:center;
}

.brand::after{
  content:"";

  position:absolute;

  width:65px;
  height:65px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(212,162,76,.12),
      transparent 70%
    );

  filter:blur(10px);

  z-index:-1;
}

.brand img{
  width:150px;
  height:auto;

  object-fit:contain;

  filter:
    drop-shadow(
      0 5px 15px rgba(0,0,0,.25)
    )
    drop-shadow(
      0 0 12px rgba(212,162,76,.08)
    );
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav{
  display:flex;

  align-items:center;

  gap:31px;

  font-size:11px;

  letter-spacing:.14em;

  text-transform:uppercase;
}

.nav a{
  position:relative;

  color:var(--text-soft);

  opacity:.82;

  transition:
    color .3s ease,
    opacity .3s ease;
}

.nav a::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-8px;

  width:0;
  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--gold-light)
    );

  transition:
    width .35s var(--ease);
}

.nav a:hover{
  color:var(--gold-light);
  opacity:1;
}

.nav a:hover::after{
  width:100%;
}


/* =========================================================
   NAV BOOK BUTTON
   ========================================================= */

.nav-book{
  border:
    1px solid var(--gold);

  padding:13px 19px;

  color:var(--gold-light)!important;

  background:
    linear-gradient(
      135deg,
      rgba(212,162,76,.12),
      rgba(255,255,255,.025)
    );

  opacity:1!important;

  box-shadow:
    inset 0 0 20px rgba(212,162,76,.035),
    0 8px 30px rgba(0,0,0,.12);

  transition:
    .35s var(--ease);
}

.nav-book::after{
  display:none;
}

.nav-book:hover{
  background:
    linear-gradient(
      135deg,
      var(--gold),
      #b67e2f
    );

  color:#2b1015!important;

  transform:translateY(-2px);

  box-shadow:
    0 10px 30px rgba(212,162,76,.2);
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.menu-toggle{
  display:none;

  background:none;

  border:0;

  width:44px;
  height:44px;

  position:relative;

  z-index:1001;

  cursor:pointer;
}

.menu-toggle span{
  display:block;

  width:25px;
  height:1px;

  background:var(--gold-light);

  position:absolute;

  left:9px;

  transition:
    .35s var(--ease);
}

.menu-toggle span:first-child{
  top:17px;
}

.menu-toggle span:last-child{
  top:26px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  min-height:100vh;

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items:center;

  gap:4vw;

  padding:
    140px 8vw 90px;

  position:relative;

  isolation:isolate;

  overflow:hidden;
}


/* HERO BACKGROUND */

.hero::before{
  content:"";

  position:absolute;

  inset:0;

  background:
    radial-gradient(
      circle at 75% 45%,
      rgba(212,162,76,.14),
      transparent 28%
    ),
    radial-gradient(
      circle at 18% 75%,
      rgba(197,107,140,.18),
      transparent 35%
    ),
    linear-gradient(
      110deg,
      rgba(43,13,25,.98) 15%,
      rgba(53,18,31,.89) 58%,
      rgba(43,13,25,.67)
    ),
    url("images/hero-bg.jpg")
    center/cover no-repeat;

  opacity:.98;

  z-index:-3;

  transform:scale(1.02);
}


/* HERO VIGNETTE */

.hero::after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(38,10,21,.95) 0%,
      rgba(53,18,31,.66) 48%,
      rgba(43,13,25,.15) 100%
    );

  z-index:-2;
}


/* =========================================================
   HERO GLOW
   ========================================================= */

.hero-glow{
  position:absolute;

  border-radius:50%;

  filter:blur(85px);

  pointer-events:none;

  z-index:-1;
}

.glow-one{
  width:320px;
  height:320px;

  right:5%;
  top:25%;

  background:
    radial-gradient(
      circle,
      rgba(212,162,76,.26),
      rgba(212,162,76,0)
    );

  animation:
    luxuryGlow 7s ease-in-out infinite;
}

.glow-two{
  width:230px;
  height:230px;

  left:-4%;
  bottom:4%;

  background:
    radial-gradient(
      circle,
      rgba(197,107,140,.24),
      transparent 70%
    );

  animation:
    luxuryGlow 9s ease-in-out infinite reverse;
}

@keyframes luxuryGlow{
  50%{
    transform:scale(1.18) translateY(-12px);
    opacity:.7;
  }
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-content{
  max-width:720px;

  position:relative;

  z-index:2;
}

.eyebrow{
  color:var(--gold-light);

  font-size:10px;

  letter-spacing:.28em;

  text-transform:uppercase;

  display:flex;

  gap:13px;

  align-items:center;

  margin-bottom:25px;
}

.eyebrow span{
  width:28px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold)
    );
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2{
  font-family:var(--serif);

  font-weight:500;

  line-height:.84;

  letter-spacing:-.035em;
}

h1{
  font-size:
    clamp(74px,9.2vw,150px);

  color:var(--white);

  text-shadow:
    0 10px 40px rgba(0,0,0,.28);
}

h1 em,
h2 em{
  font-style:italic;

  color:var(--gold-light);

  text-shadow:
    0 0 25px rgba(212,162,76,.12);
}

.hero-copy{
  max-width:510px;

  color:var(--text-soft);

  font-size:15px;

  line-height:1.85;

  margin:34px 0 30px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.hero-actions,
.contact-buttons{
  display:flex;

  flex-wrap:wrap;

  gap:12px;
}

.btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:22px;

  padding:16px 21px;

  font-size:10px;

  text-transform:uppercase;

  letter-spacing:.15em;

  transition:
    .4s var(--ease);

  min-height:52px;

  position:relative;

  overflow:hidden;
}

.btn::before{
  content:"";

  position:absolute;

  top:0;
  left:-110%;

  width:80%;
  height:100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.20),
      transparent
    );

  transform:skewX(-20deg);

  transition:
    left .7s var(--ease);
}

.btn:hover::before{
  left:130%;
}


/* GOLD BUTTON */

.btn-gold{
  background:
    linear-gradient(
      135deg,
      #e1b45d 0%,
      #c58d37 50%,
      #a96f25 100%
    );

  color:#28100f;

  font-weight:600;

  box-shadow:
    0 12px 35px rgba(212,162,76,.18);
}

.btn-gold:hover{
  background:
    linear-gradient(
      135deg,
      #f3cf82,
      #d4a24c
    );

  transform:
    translateY(-4px);

  box-shadow:
    0 18px 45px rgba(212,162,76,.28);
}


/* GHOST BUTTON */

.btn-ghost,
.btn-outline{
  border:
    1px solid rgba(212,162,76,.42);

  color:var(--gold-soft);

  background:
    rgba(255,255,255,.025);

  backdrop-filter:blur(10px);
}

.btn-ghost:hover,
.btn-outline:hover{
  border-color:var(--gold-light);

  color:var(--gold-light);

  background:
    rgba(212,162,76,.08);

  transform:
    translateY(-4px);

  box-shadow:
    0 10px 30px rgba(0,0,0,.15);
}


/* =========================================================
   HERO META
   ========================================================= */

.hero-meta{
  display:flex;

  gap:45px;

  margin-top:65px;

  border-top:
    1px solid var(--line);

  padding-top:22px;
}

.hero-meta div{
  display:flex;

  flex-direction:column;

  gap:5px;
}

.hero-meta strong{
  font:
    600 22px
    var(--serif);

  color:var(--gold-light);
}

.hero-meta span{
  font-size:9px;

  text-transform:uppercase;

  letter-spacing:.13em;

  color:var(--muted-dark);
}


/* =========================================================
   HERO IMAGE / ART
   ========================================================= */

.hero-art{
  position:relative;

  min-height:580px;

  display:grid;

  place-items:center;
}

.portrait-ring{
  position:absolute;

  width:min(37vw,490px);
  height:min(37vw,490px);

  border:
    1px solid rgba(212,162,76,.48);

  border-radius:50%;

  transform:rotate(-18deg);

  box-shadow:
    0 0 70px rgba(212,162,76,.08);
}

.portrait-ring::after{
  content:"";

  position:absolute;

  inset:-12px;

  border:
    1px solid rgba(212,162,76,.08);

  border-radius:50%;

  animation:
    ringRotate 20s linear infinite;
}

.portrait-ring::before{
  content:"";

  position:absolute;

  inset:15px;

  border:
    1px dashed rgba(212,162,76,.23);

  border-radius:50%;
}

@keyframes ringRotate{
  to{
    transform:rotate(360deg);
  }
}


/* =========================================================
   PORTRAIT CARD
   ========================================================= */

.portrait-card{
  width:min(27vw,360px);

  height:min(39vw,510px);

  min-height:400px;

  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #67243e,
      #3c1425
    );

  box-shadow:
    0 35px 90px rgba(0,0,0,.42),
    0 0 0 1px rgba(212,162,76,.18);

  transform:rotate(4deg);

  border:
    1px solid rgba(212,162,76,.28);

  transition:
    transform .8s var(--ease);
}

.portrait-card:hover{
  transform:
    rotate(1deg)
    translateY(-8px);
}

.portrait-card::after{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.10),
      transparent 25%,
      transparent 70%,
      rgba(212,162,76,.08)
    );
}

.portrait-card img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform 1.2s var(--ease);

  filter:
    saturate(.92)
    contrast(1.04);
}

.portrait-card:hover img{
  transform:scale(1.07);

  filter:
    saturate(1.05)
    contrast(1.06);
}


/* =========================================================
   IMAGE FALLBACK
   ========================================================= */

.image-fallback{
  position:absolute;

  inset:0;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  background:
    radial-gradient(
      circle at center,
      #6c2944,
      #34111f 75%
    );

  text-align:center;
}

.image-fallback span{
  font:
    italic 100px
    var(--serif);

  color:var(--gold-light);

  text-shadow:
    0 8px 30px rgba(212,162,76,.18);
}

.image-fallback small{
  color:#d3b2bd;

  text-transform:uppercase;

  letter-spacing:.16em;

  font-size:9px;

  max-width:160px;

  line-height:1.6;
}


/* =========================================================
   FLOATING NOTES
   ========================================================= */

.floating-note{
  position:absolute;

  background:
    linear-gradient(
      135deg,
      rgba(77,27,45,.90),
      rgba(43,13,25,.88)
    );

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  border:
    1px solid rgba(212,162,76,.30);

  padding:14px 17px;

  min-width:125px;

  display:grid;

  grid-template-columns:26px 1fr;

  gap:0 8px;

  animation:
    float 5s ease-in-out infinite;

  box-shadow:
    0 18px 45px rgba(0,0,0,.25);
}

.floating-note span{
  grid-row:span 2;

  color:var(--gold);

  font-size:11px;
}

.floating-note b{
  font:
    600 15px
    var(--serif);

  color:var(--white);
}

.floating-note small{
  font-size:8px;

  text-transform:uppercase;

  letter-spacing:.13em;

  color:var(--muted-dark);
}

.note-top{
  top:17%;
  right:2%;
}

.note-bottom{
  bottom:15%;
  left:0;

  animation-delay:-2.2s;
}

@keyframes float{
  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-10px);
  }
}


/* =========================================================
   MARQUEE
   ========================================================= */

.marquee{
  overflow:hidden;

  border-top:
    1px solid var(--line-gold);

  border-bottom:
    1px solid var(--line-gold);

  padding:17px 0;

  background:
    linear-gradient(
      90deg,
      #2b0d19,
      #4d1b2d,
      #35121f
    );

  box-shadow:
    inset 0 8px 30px rgba(0,0,0,.08),
    inset 0 -8px 30px rgba(0,0,0,.08);
}

.marquee-track{
  display:flex;

  width:max-content;

  align-items:center;

  gap:28px;

  animation:
    marquee 28s linear infinite;
}

.marquee span{
  font:
    600 12px
    var(--serif);

  color:var(--text-soft);

  letter-spacing:.18em;

  white-space:nowrap;
}

.marquee i{
  color:var(--gold);

  font-style:normal;
}

@keyframes marquee{
  to{
    transform:translateX(-50%);
  }
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section{
  padding:150px 8vw;

  position:relative;
}

.section::before{
  content:"";

  position:absolute;

  width:260px;
  height:260px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(197,107,140,.08),
      transparent 70%
    );

  filter:blur(15px);

  pointer-events:none;
}

.section-label{
  font-size:9px;

  letter-spacing:.24em;

  text-transform:uppercase;

  color:var(--gold);

  margin-bottom:28px;
}

.about-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:8vw;
}

.about h2,
.section-head h2{
  font-size:
    clamp(55px,6.4vw,100px);

  color:var(--white);

  text-shadow:
    0 8px 30px rgba(0,0,0,.18);
}

.about-copy{
  max-width:480px;

  padding-top:55px;
}

.about-copy p{
  font-size:15px;

  line-height:1.9;

  color:var(--text-soft);

  margin-bottom:18px;
}

.text-link{
  display:inline-flex;

  gap:25px;

  color:var(--gold-light);

  font-size:10px;

  text-transform:uppercase;

  letter-spacing:.15em;

  margin-top:18px;

  border-bottom:
    1px solid rgba(212,162,76,.38);

  padding-bottom:9px;

  transition:
    .35s var(--ease);
}

.text-link:hover{
  color:var(--gold-bright);

  gap:32px;
}


/* =========================================================
   SERVICES
   ========================================================= */

.services{
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(212,162,76,.07),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #421626 0%,
      #4d1b2d 52%,
      #35121f 100%
    );

  border-top:
    1px solid rgba(212,162,76,.14);

  border-bottom:
    1px solid rgba(212,162,76,.14);
}

.section-head{
  display:flex;

  justify-content:space-between;

  gap:50px;

  align-items:end;

  margin-bottom:65px;
}

.section-head>p{
  max-width:330px;

  color:var(--muted);

  font-size:13px;

  line-height:1.8;
}


/* =========================================================
   SERVICE GRID
   ========================================================= */

.service-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid var(--line-gold);

  border-left:
    1px solid var(--line-gold);

  box-shadow:
    0 25px 60px rgba(0,0,0,.10);
}

.service-card{
  min-height:350px;

  border-right:
    1px solid var(--line-gold);

  border-bottom:
    1px solid var(--line-gold);

  padding:25px;

  position:relative;

  transition:
    .5s var(--ease);

  overflow:hidden;

  background:
    rgba(255,255,255,.025);
}

.service-card::before{
  content:"";

  position:absolute;

  width:1px;
  height:0;

  left:0;
  top:0;

  background:
    linear-gradient(
      180deg,
      var(--gold-light),
      transparent
    );

  transition:
    height .6s var(--ease);
}

.service-card:hover::before{
  height:100%;
}

.service-card::after{
  content:"";

  position:absolute;

  width:180px;
  height:180px;

  background:
    radial-gradient(
      circle,
      var(--gold),
      transparent 70%
    );

  border-radius:50%;

  filter:blur(60px);

  opacity:0;

  right:-70px;
  bottom:-70px;

  transition:
    .6s var(--ease);
}

.service-card:hover{
  background:
    linear-gradient(
      135deg,
      rgba(212,162,76,.08),
      rgba(255,255,255,.035)
    );

  transform:
    translateY(-7px);

  box-shadow:
    0 25px 55px rgba(0,0,0,.20);
}

.service-card:hover::after{
  opacity:.13;
}

.service-card>span{
  font-size:9px;

  color:var(--gold);

  letter-spacing:.12em;
}

.service-icon{
  font-size:33px;

  color:var(--gold-light);

  margin:48px 0 35px;

  filter:
    drop-shadow(
      0 6px 15px rgba(212,162,76,.16)
    );

  transition:
    .45s var(--ease);
}

.service-card:hover .service-icon{
  transform:
    translateY(-5px)
    scale(1.08);

  color:var(--gold-bright);
}

.service-card h3{
  font:
    600 28px
    var(--serif);

  color:var(--white);

  margin-bottom:14px;
}

.service-card p{
  font-size:12px;

  line-height:1.8;

  color:var(--muted);

  max-width:245px;
}

.service-card a{
  position:absolute;

  bottom:25px;

  color:var(--gold-light);

  font-size:9px;

  text-transform:uppercase;

  letter-spacing:.15em;

  transition:
    .3s ease;
}

.service-card a:hover{
  color:var(--gold-bright);

  letter-spacing:.2em;
}


/* =========================================================
   GALLERY
   ========================================================= */

.gallery{
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(197,107,140,.08),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #2b0d19,
      #35121f 50%,
      #250b15
    );
}

.gallery-grid{
  display:grid;

  grid-template-columns:
    repeat(12,1fr);

  grid-auto-rows:120px;

  gap:13px;
}

.gallery-item{
  grid-column:span 4;

  grid-row:span 3;

  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #592038,
      #2b0d19
    );

  border:
    1px solid rgba(212,162,76,.18);

  box-shadow:
    0 12px 30px rgba(0,0,0,.12);

  cursor:pointer;
}

.gallery-item.tall{
  grid-row:span 5;
}

.gallery-item.wide{
  grid-column:span 8;

  grid-row:span 4;
}

.gallery-item img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    1s var(--ease);

  filter:
    saturate(.92)
    contrast(1.02);
}

.gallery-item::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:1;

  border:
    1px solid transparent;

  transition:
    .5s ease;

  pointer-events:none;
}

.gallery-item:hover::before{
  border-color:
    rgba(212,162,76,.55);

  box-shadow:
    inset 0 0 35px rgba(212,162,76,.10);
}

.gallery-item::after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      transparent 45%,
      rgba(30,7,16,.82)
    );

  opacity:.58;

  z-index:1;
}

.gallery-item:hover img{
  transform:scale(1.08);

  filter:
    saturate(1.08)
    contrast(1.06);
}

.gallery-item figcaption{
  position:absolute;

  bottom:15px;

  left:17px;
  right:17px;

  z-index:2;

  font:
    500 17px
    var(--serif);

  color:#fff;

  display:flex;

  justify-content:space-between;

  transform:
    translateY(3px);

  transition:
    .4s var(--ease);
}

.gallery-item:hover figcaption{
  transform:none;
}

.gallery-item figcaption span{
  font:
    9px
    var(--sans);

  letter-spacing:.15em;

  color:var(--gold-soft);
}


/* =========================================================
   QUOTE / BRAND STATEMENT
   ========================================================= */

.quote-section{
  padding:150px 8vw;

  text-align:center;

  border-top:
    1px solid var(--line-gold);

  border-bottom:
    1px solid var(--line-gold);

  background:
    radial-gradient(
      circle at center,
      rgba(212,162,76,.14),
      transparent 32%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(197,107,140,.10),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #4d1b2d,
      #35121f 50%,
      #421626
    );

  position:relative;

  overflow:hidden;
}

.quote-section::before{
  content:"";

  position:absolute;

  width:400px;
  height:400px;

  border:
    1px solid rgba(212,162,76,.08);

  border-radius:50%;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  pointer-events:none;
}

.quote-mark{
  font:
    100px
    var(--serif);

  height:70px;

  color:var(--gold);

  opacity:.75;

  text-shadow:
    0 0 30px rgba(212,162,76,.15);
}

.quote-section blockquote{
  font:
    clamp(42px,5vw,75px)
    var(--serif);

  color:var(--white);

  line-height:.9;

  letter-spacing:-.03em;

  position:relative;

  z-index:2;
}

.quote-section blockquote em{
  color:var(--gold-light);
}

.quote-section p{
  margin-top:35px;

  font-size:9px;

  letter-spacing:.25em;

  color:var(--muted-dark);

  text-transform:uppercase;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact{
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(212,162,76,.08),
      transparent 27%
    ),
    linear-gradient(
      135deg,
      #421626,
      #2b0d19 52%,
      #3d1424
    );
}

.contact-card{
  display:grid;

  grid-template-columns:
    1.5fr .7fr;

  border:
    1px solid var(--line-gold);

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.045),
      rgba(0,0,0,.12)
    );

  min-height:540px;

  box-shadow:
    0 30px 80px rgba(0,0,0,.20);

  position:relative;

  overflow:hidden;
}

.contact-card::before{
  content:"";

  position:absolute;

  width:300px;
  height:300px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(212,162,76,.08),
      transparent 70%
    );

  right:-100px;
  top:-100px;

  pointer-events:none;
}

.contact-main{
  padding:75px;

  position:relative;

  z-index:2;
}

.contact-main h2{
  font-size:
    clamp(55px,6vw,90px);

  color:var(--white);
}

.contact-main>p{
  max-width:570px;

  color:var(--text-soft);

  line-height:1.8;

  font-size:13px;

  margin:30px 0;
}

.contact-side{
  border-left:
    1px solid var(--line-gold);

  padding:55px 40px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  background:
    rgba(255,255,255,.018);
}

.contact-row{
  padding:24px 0;

  border-bottom:
    1px solid var(--line);

  display:flex;

  flex-direction:column;

  gap:9px;
}

.contact-row span{
  font-size:8px;

  letter-spacing:.2em;

  color:var(--gold);

  text-transform:uppercase;
}

.contact-row b{
  font:
    500 18px/1.3
    var(--serif);

  color:var(--text-soft);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
  padding:32px 8vw;

  display:flex;

  align-items:center;

  justify-content:space-between;

  border-top:
    1px solid var(--line-gold);

  background:
    linear-gradient(
      135deg,
      #250b15,
      #35121f
    );

  font-size:9px;

  color:var(--muted-dark);

  letter-spacing:.08em;
}

.footer-brand{
  max-width:130px;
}

.footer-brand img{
  width:115px;

  max-height:55px;

  object-fit:contain;
}

footer a{
  transition:
    .3s ease;
}

footer a:hover{
  color:var(--gold-light);
}


/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */

.floating-wa{
  position:fixed;

  z-index:900;

  right:22px;
  bottom:22px;

  display:flex;

  align-items:center;

  gap:12px;

  background:
    linear-gradient(
      135deg,
      rgba(77,27,45,.96),
      rgba(37,9,20,.96)
    );

  border:
    1px solid rgba(212,162,76,.55);

  padding:13px 16px;

  border-radius:40px;

  box-shadow:
    0 15px 45px rgba(0,0,0,.30);

  font-size:10px;

  color:var(--text-soft);

  text-transform:uppercase;

  letter-spacing:.1em;

  transition:
    .4s var(--ease);

  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
}

.floating-wa::before{
  content:"";

  position:absolute;

  inset:-5px;

  border-radius:50px;

  border:
    1px solid rgba(212,162,76,.12);

  animation:
    waPulse 2.5s ease-out infinite;
}

.floating-wa:hover{
  transform:
    translateY(-5px)
    scale(1.02);

  border-color:var(--gold-light);

  box-shadow:
    0 20px 55px rgba(212,162,76,.18);
}

.wa-dot{
  width:7px;
  height:7px;

  flex-shrink:0;

  border-radius:50%;

  background:#5bd47b;

  box-shadow:
    0 0 0 5px rgba(91,212,123,.10),
    0 0 15px rgba(91,212,123,.35);
}

.floating-wa b{
  font-size:15px;

  color:var(--gold-light);
}

@keyframes waPulse{
  0%{
    transform:scale(.95);

    opacity:.7;
  }

  70%{
    transform:scale(1.06);

    opacity:0;
  }

  100%{
    opacity:0;
  }
}


/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */

.reveal{
  opacity:0;

  transform:
    translateY(35px);

  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease);
}

.reveal.visible{
  opacity:1;

  transform:none;
}

.delay-1{
  transition-delay:.1s;
}

.delay-2{
  transition-delay:.2s;
}

.delay-3{
  transition-delay:.3s;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.lightbox{
  position:fixed;

  inset:0;

  background:
    radial-gradient(
      circle at center,
      rgba(76,26,46,.82),
      rgba(20,5,12,.97)
    );

  z-index:2000;

  display:none;

  align-items:center;

  justify-content:center;

  padding:40px;

  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
}

.lightbox.open{
  display:flex;

  animation:
    lightboxIn .35s ease;
}

@keyframes lightboxIn{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

.lightbox img{
  max-height:88vh;

  max-width:88vw;

  object-fit:contain;

  border:
    1px solid rgba(212,162,76,.40);

  box-shadow:
    0 30px 100px rgba(0,0,0,.55);
}

.lightbox button{
  position:absolute;

  border:0;

  background:none;

  color:white;

  font-size:42px;

  cursor:pointer;

  transition:
    .3s ease;

  z-index:5;
}

.lightbox button:hover{
  color:var(--gold-light);

  transform:scale(1.1);
}

.lightbox-close{
  top:20px;
  right:30px;
}

.lightbox-prev{
  left:25px;
}

.lightbox-next{
  right:25px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

  .nav{
    gap:18px;
  }

  .hero{
    padding-left:6vw;
    padding-right:6vw;
  }

  .section{
    padding-left:6vw;
    padding-right:6vw;
  }

  .service-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .contact-main{
    padding:50px;
  }

  .contact-card{
    grid-template-columns:1fr;
  }

  .contact-side{
    border-left:0;

    border-top:
      1px solid var(--line-gold);

    padding:
      20px 50px;
  }

  .portrait-card{
    width:300px;
    height:440px;
  }

  .portrait-ring{
    width:400px;
    height:400px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  html{
    scroll-padding-top:70px;
  }

  .site-header{
    height:70px;

    padding:
      0 22px;
  }

  .brand img{
    width:125px;
  }

  .menu-toggle{
    display:block;
  }


  /* MOBILE NAV */

  .nav{
    position:fixed;

    inset:0;

    background:
      radial-gradient(
        circle at center,
        rgba(89,32,56,.98),
        rgba(37,9,20,.99)
      );

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:27px;

    font-size:16px;

    transform:
      translateX(100%);

    transition:
      .55s var(--ease);
  }

  .nav.open{
    transform:none;
  }

  .nav a{
    opacity:1;

    color:var(--text);

    font-size:15px;

    letter-spacing:.18em;
  }

  .nav-book{
    padding:
      15px 25px;
  }

  .menu-toggle.active span:first-child{
    top:21px;

    transform:
      rotate(45deg);
  }

  .menu-toggle.active span:last-child{
    top:21px;

    transform:
      rotate(-45deg);
  }


  /* HERO */

  .hero{
    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:
      130px 22px 70px;

    min-height:auto;
  }

  .hero-content{
    width:100%;
  }

  h1{
    font-size:
      clamp(62px,19vw,100px);

    line-height:.86;
  }

  .hero-copy{
    font-size:13px;

    margin:
      25px 0;
  }

  .hero-actions{
    width:100%;
  }

  .btn{
    width:100%;
  }

  .hero-meta{
    gap:25px;

    margin-top:45px;
  }

  .hero-meta strong{
    font-size:19px;
  }

  .hero-meta span{
    font-size:8px;
  }


  /* HERO ART */

  .hero-art{
    width:100%;

    min-height:470px;

    margin-top:30px;
  }

  .portrait-card{
    width:250px;

    height:360px;

    min-height:0;
  }

  .portrait-ring{
    width:310px;

    height:310px;
  }

  .note-top{
    right:0;

    top:10%;
  }

  .note-bottom{
    left:0;

    bottom:8%;
  }


  /* SECTIONS */

  .section{
    padding:
      90px 22px;
  }

  .about-grid{
    grid-template-columns:1fr;

    gap:15px;
  }

  .about-copy{
    padding-top:0;
  }

  .about h2,
  .section-head h2{
    font-size:
      clamp(51px,15vw,75px);
  }

  .section-head{
    display:block;

    margin-bottom:40px;
  }

  .section-head>p{
    margin-top:25px;
  }


  /* SERVICES */

  .service-grid{
    grid-template-columns:1fr;
  }

  .service-card{
    min-height:300px;
  }


  /* GALLERY */

  .gallery-grid{
    display:grid;

    grid-template-columns:
      1fr 1fr;

    grid-auto-rows:180px;

    gap:8px;
  }

  .gallery-item,
  .gallery-item.tall,
  .gallery-item.wide{
    grid-column:span 1;

    grid-row:span 1;
  }

  .gallery-item:nth-child(1),
  .gallery-item:nth-child(6),
  .gallery-item:nth-child(9){
    grid-row:span 2;
  }

  .gallery-item figcaption{
    font-size:14px;

    left:12px;
    right:12px;
    bottom:12px;
  }


  /* QUOTE */

  .quote-section{
    padding:
      95px 22px;
  }

  .quote-section blockquote{
    font-size:43px;
  }

  .quote-section::before{
    width:280px;
    height:280px;
  }


  /* CONTACT */

  .contact-card{
    min-height:0;
  }

  .contact-main{
    padding:
      45px 25px;
  }

  .contact-side{
    padding:
      10px 25px 35px;
  }

  .contact-buttons{
    margin-top:25px;
  }


  /* WHATSAPP */

  .floating-wa{
    right:15px;

    bottom:15px;

    padding:
      12px 14px;
  }

  .floating-wa span:not(.wa-dot){
    display:none;
  }


  /* FOOTER */

  footer{
    padding:
      25px 22px;

    flex-wrap:wrap;

    gap:20px;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media(max-width:420px){

  .hero{
    padding-top:115px;
  }

  h1{
    font-size:
      clamp(55px,18vw,80px);
  }

  .hero-art{
    min-height:430px;
  }

  .portrait-card{
    width:220px;
    height:325px;
  }

  .portrait-ring{
    width:275px;
    height:275px;
  }

  .floating-note{
    min-width:110px;

    padding:
      11px 12px;
  }

  .floating-note b{
    font-size:13px;
  }

  .floating-note small{
    font-size:7px;
  }

  .note-top{
    right:-4px;
  }

  .note-bottom{
    left:-4px;
  }

  .gallery-grid{
    grid-auto-rows:150px;
  }

  .quote-section blockquote{
    font-size:38px;
  }

  .contact-main h2{
    font-size:54px;
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible{
  outline:
    2px solid var(--gold-light);

  outline-offset:4px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }

  .reveal{
    opacity:1;

    transform:none;

    transition:none;
  }

  .marquee-track,
  .floating-note,
  .glow-one,
  .glow-two,
  .portrait-ring::after,
  .floating-wa::before{
    animation:none;
  }

  .page-loader{
    display:none;
  }
}
/* Classic Hair Studio — Trading Hours */
.contact-row {
  padding: 20px 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
}

.contact-row span {
  display: block;
  color: #d4af37;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.contact-row b {
  display: block;
  color: #f5f0e8;
  font-size: 0.95rem;
  line-height: 1.8;
  font-weight: 500;
}