/* ======================================================
   THE COMPANY HAIRDRESSING — Shared Stylesheet
   Palette: gold #C8A040 + blush #E8B4BA on noir #14080C
   Fonts: Fraunces (display) + DM Sans (body)
   ====================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --accent:       #C8A040;
  --accent-light: #E2C870;
  --blush:        #E8B4BA;
  --bronze:       #A07828;
  --bg:           #14080C;
  --bg-card:      #1E1014;
  --bg-card2:     #261318;
  --border:       rgba(200,160,64,0.15);
  --border-blush: rgba(232,180,186,0.12);
  --text:         #FAF0F2;
  --muted:        #9B8090;
  --grad:         linear-gradient(135deg,#C8A040 0%,#E2C870 40%,#E8B4BA 100%);
  --radius:       20px;
  --font-d:       'Fraunces', serif;
  --font-b:       'DM Sans', sans-serif;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* ── Noise overlay ── */
body::before {
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.035;
  pointer-events:none;
  z-index:9999;
}

/* ── Scroll progress bar ── */
#scroll-progress {
  position:fixed;
  top:0;left:0;
  height:2px;
  width:0%;
  background:var(--accent);
  z-index:10000;
  transition:width 0.05s linear;
}

/* ── Cursor glow ── */
.cursor-glow {
  pointer-events:none;
  position:fixed;
  width:350px;height:350px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(200,160,64,0.05) 0%,transparent 70%);
  transform:translate(-50%,-50%);
  z-index:0;
  transition:transform 0.06s linear;
  will-change:transform;
}

/* ── NAV ── */
nav {
  position:fixed;
  top:0;left:0;right:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.2rem 2.5rem;
  background:color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  transition:padding 0.3s;
}
nav.scrolled { padding:0.8rem 2.5rem; }

.nav-logo {
  display:flex;
  flex-direction:column;
  line-height:1;
}
.nav-logo-main {
  font-family:var(--font-d);
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:0.12em;
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-transform:uppercase;
}
.nav-logo-sub {
  font-size:0.6rem;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--muted);
}

.nav-links {
  display:flex;
  gap:2rem;
  list-style:none;
}
.nav-links a {
  color:var(--muted);
  text-decoration:none;
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  transition:color 0.2s;
}
.nav-links a:hover { color:var(--text); }

.nav-cta {
  background:var(--accent);
  color:#000;
  padding:0.55rem 1.3rem;
  border-radius:40px;
  text-decoration:none;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  transition:background 0.2s,transform 0.2s,box-shadow 0.2s;
}
.nav-cta:hover {
  background:var(--accent-light);
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(200,160,64,0.3);
}

.nav-hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:4px;
}
.nav-hamburger span {
  display:block;
  width:22px;height:2px;
  background:var(--text);
  border-radius:2px;
  transition:all 0.3s;
}

@media(max-width:720px) {
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .nav-links.open {
    display:flex;
    flex-direction:column;
    position:fixed;
    top:62px;left:0;right:0;
    background:rgba(20,8,12,0.97);
    backdrop-filter:blur(20px);
    padding:1.5rem 2.5rem;
    gap:1.2rem;
    border-bottom:1px solid var(--border);
  }
  .nav-links.open a { font-size:1rem; }
}

/* ── MARQUEE SIGNATURE ELEMENT ── */
.marquee-wrap {
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:0.9rem 0;
  background:var(--bg-card);
}
.marquee-track {
  display:flex;
  gap:0;
  width:max-content;
  animation:marquee 28s linear infinite;
}
.marquee-track.reverse {
  animation-direction:reverse;
}
.marquee-track:hover { animation-play-state:paused; }
.marquee-item {
  display:flex;
  align-items:center;
  gap:0;
  white-space:nowrap;
  padding:0 1.5rem;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.marquee-item span {
  color:var(--accent);
  margin:0 1rem;
  font-size:0.6rem;
}
@keyframes marquee {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left  { opacity:0; transform:translateX(-50px); transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-right { opacity:0; transform:translateX(50px);  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-left.visible,.reveal-right.visible { opacity:1; transform:translateX(0); }
.d1 { transition-delay:0.08s; }
.d2 { transition-delay:0.16s; }
.d3 { transition-delay:0.24s; }
.d4 { transition-delay:0.32s; }
.d5 { transition-delay:0.40s; }

/* ── GRADIENT TEXT ── */
.grad {
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200% 200%;
  animation:gradShift 5s ease-in-out infinite;
}
@keyframes gradShift {
  0%,100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}

/* ── SHARED SECTION ── */
section { padding:6rem 2rem; }

.inner { max-width:1100px; margin:0 auto; }
.inner-sm { max-width:700px; margin:0 auto; }

.kicker {
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:0.8rem;
}
.section-title {
  font-family:var(--font-d);
  font-size:clamp(2.2rem,5vw,3.6rem);
  font-weight:700;
  line-height:1.05;
  margin-bottom:1rem;
  letter-spacing:0.01em;
}
.section-sub {
  color:var(--muted);
  max-width:520px;
  line-height:1.75;
  font-size:0.95rem;
}
.sh { margin-bottom:3.5rem; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.85rem 2rem;
  border-radius:40px;
  text-decoration:none;
  font-family:var(--font-b);
  font-size:0.88rem;
  font-weight:700;
  letter-spacing:0.07em;
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  transition:transform 0.2s,box-shadow 0.2s,background 0.2s;
}
.btn:active { transform:scale(0.97); }
.btn-primary {
  background:var(--accent);
  color:#000;
}
.btn-primary:hover {
  background:var(--accent-light);
  transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(200,160,64,0.35);
}
.btn-secondary {
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
}
.btn-secondary:hover {
  border-color:var(--accent);
  transform:translateY(-2px);
}
.btn-blush {
  background:var(--blush);
  color:#14080C;
}
.btn-blush:hover {
  background:#F0C8CE;
  transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(232,180,186,0.35);
}

/* ── SERVICE CARDS ── */
.cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:1.2rem;
}
.card {
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem;
  cursor:default;
  transition:border-color 0.3s,box-shadow 0.3s,transform 0.15s ease-out;
  transform-style:preserve-3d;
  will-change:transform;
}
.card:hover {
  border-color:rgba(200,160,64,0.35);
  box-shadow:0 24px 64px rgba(0,0,0,0.5),
             0 0 0 1px rgba(200,160,64,0.08);
}
.card-glow {
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(200,160,64,0.1) 0%,transparent 60%);
  pointer-events:none;
  opacity:0;
  transition:opacity 0.3s;
}
.card:hover .card-glow { opacity:1; }

.card-icon {
  width:42px;height:42px;
  color:var(--accent);
  margin-bottom:1.2rem;
}
.card-title {
  font-family:var(--font-d);
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:0.5rem;
  letter-spacing:0.01em;
}
.card-desc {
  font-size:0.88rem;
  color:var(--muted);
  line-height:1.7;
}
.card-price {
  margin-top:1rem;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent);
}

/* ── INNER BORDER (gradient) ── */
.card-featured {
  background:var(--bg-card2);
  border:none;
  position:relative;
}
.card-featured::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  padding:1px;
  background:linear-gradient(135deg,#C8A040,#E8B4BA);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

/* ── ABOUT VISUAL ── */
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
}
@media(max-width:768px) { .about-grid { grid-template-columns:1fr; gap:2.5rem; } }

.about-visual-block {
  position:relative;
}
.about-art {
  width:100%;
  aspect-ratio:4/5;
  border-radius:24px;
  background:var(--bg-card);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.about-art-inner {
  font-family:var(--font-d);
  font-size:clamp(3rem,8vw,6rem);
  font-weight:700;
  color:rgba(200,160,64,0.08);
  text-align:center;
  line-height:1;
  letter-spacing:0.05em;
  text-transform:uppercase;
  user-select:none;
}
.art-gradient {
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 70%, rgba(200,160,64,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 70% 30%, rgba(232,180,186,0.08) 0%, transparent 60%);
}

.corner {
  position:absolute;
  width:28px;height:28px;
  border-color:var(--accent);
  border-style:solid;
  opacity:0.4;
}
.corner-tl { top:12px;left:12px; border-width:2px 0 0 2px; }
.corner-tr { top:12px;right:12px; border-width:2px 2px 0 0; }
.corner-bl { bottom:12px;left:12px; border-width:0 0 2px 2px; }
.corner-br { bottom:12px;right:12px; border-width:0 2px 2px 0; }

.about-badge {
  position:absolute;
  bottom:-1.5rem;right:-1.5rem;
  width:100px;height:100px;
  background:var(--accent);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:var(--font-d);
  color:#000;
  animation:spin-badge 20s linear infinite;
}
.badge-main { font-size:1.5rem;font-weight:700;line-height:1; }
.badge-sub  { font-size:0.52rem;letter-spacing:0.08em;text-transform:uppercase;text-align:center; }
@keyframes spin-badge { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.about-list {
  list-style:none;
  margin-top:1.8rem;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.about-list li {
  display:flex;
  align-items:center;
  gap:0.8rem;
  font-size:0.9rem;
}
.about-list li::before {
  content:'';
  display:block;
  width:18px;height:18px;
  flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%23C8A040' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── MINI-HERO (sub-pages) ── */
.mini-hero {
  padding:8rem 2rem 4rem;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.mini-hero-bg {
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(200,160,64,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 60%, rgba(232,180,186,0.04) 0%, transparent 60%);
}
.mini-hero-content { position:relative;z-index:2; }
.mini-hero .kicker { margin-bottom:0.5rem; }
.mini-hero h1 {
  font-family:var(--font-d);
  font-size:clamp(2.5rem,7vw,5rem);
  font-weight:700;
  line-height:0.95;
  margin-bottom:1rem;
  letter-spacing:0.01em;
}
.mini-hero p {
  color:var(--muted);
  max-width:480px;
  font-size:0.95rem;
  line-height:1.75;
}

/* ── GALLERY CSS ART ── */
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1rem;
}
.gallery-item {
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:4/5;
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border);
  transition:transform 0.3s,box-shadow 0.3s;
}
.gallery-item:hover {
  transform:scale(1.02);
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
.gallery-art {
  position:absolute;
  inset:0;
}
.gallery-label {
  position:absolute;
  bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(20,8,12,0.85));
  padding:2rem 1.2rem 1.2rem;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text);
}

/* ── CONTACT FORM ── */
.contact-form {
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
@media(max-width:540px) { .form-row { grid-template-columns:1fr; } }
.form-field {
  display:flex;
  flex-direction:column;
  gap:0.4rem;
}
.form-field label {
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.form-field input,
.form-field textarea,
.form-field select {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:0.8rem 1rem;
  color:var(--text);
  font-family:var(--font-b);
  font-size:0.9rem;
  outline:none;
  transition:border-color 0.2s,box-shadow 0.2s;
  width:100%;
  appearance:none;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(200,160,64,0.1);
}
.form-field textarea { resize:vertical;min-height:120px; }

.form-status {
  padding:0.8rem 1.2rem;
  border-radius:12px;
  font-size:0.88rem;
  font-weight:600;
  display:none;
}
.form-status.success {
  display:block;
  background:rgba(74,222,128,0.08);
  border:1px solid rgba(74,222,128,0.25);
  color:#4ade80;
}
.form-status.error {
  display:block;
  background:rgba(248,113,113,0.08);
  border:1px solid rgba(248,113,113,0.25);
  color:#f87171;
}

.spinner {
  width:16px;height:16px;
  border:2px solid rgba(0,0,0,0.25);
  border-top-color:#000;
  border-radius:50%;
  animation:spin 0.6s linear infinite;
  display:none;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── FACEBOOK CTA BLOCK ── */
.fb-block {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2.5rem;
  display:flex;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
}
.fb-icon { width:52px;height:52px;flex-shrink:0; }
.fb-block-text h3 {
  font-family:var(--font-d);
  font-size:1.4rem;
  margin-bottom:0.4rem;
}
.fb-block-text p { font-size:0.88rem;color:var(--muted);line-height:1.65; }

/* ── FOOTER ── */
footer {
  border-top:1px solid var(--border);
  padding:2.5rem 2rem;
}
.footer-inner {
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.2rem;
}
.footer-logo-main {
  font-family:var(--font-d);
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.footer-sub {
  font-size:0.6rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:0.15rem;
}
.footer-copy { font-size:0.78rem;color:var(--muted); }
.footer-links { display:flex;gap:1.5rem; }
.footer-links a {
  font-size:0.78rem;
  color:var(--muted);
  text-decoration:none;
  transition:color 0.2s;
}
.footer-links a:hover { color:var(--text); }

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  .reveal,.reveal-left,.reveal-right { opacity:1; transform:none; }
}