/* ==========================================================================
   NUMRA — Makeup Studio & Salon
   Design tokens — gold/copper pulled directly from the official logo file
   ========================================================================== */
:root{
  --ink:#1c1515;--cream:#f7f1e8;--wine:#5a1726;--wine2:#2c0b13;
  --gold:#be7f4a;--gold2:#d5ac89;--muted:#776b67;--line:rgba(90,23,38,.16);
  --header-h:82px;--header-h-scrolled:68px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif;font-weight:300;line-height:1.65}
section[id]{scroll-margin-top:var(--header-h)}

/* Skip link */
.skip-link{position:fixed;top:-60px;left:12px;z-index:100;background:var(--wine2);color:#fff;padding:12px 18px;text-decoration:none;font-size:.8rem;letter-spacing:.05em;transition:top .2s}
.skip-link:focus{top:12px}

/* Focus visibility — two-tone ring so it reads on both cream and wine backgrounds */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 5px var(--wine2);border-radius:1px}

.noise{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

h1,h2,h3{font-family:"Cormorant Garamond",serif}
a{color:inherit}

/* ==========================================================================
   Header + navigation
   ========================================================================== */
.site-header{position:fixed;z-index:30;top:0;left:0;right:0;height:var(--header-h);padding:0 5vw;display:flex;align-items:center;justify-content:space-between;color:white;transition:.35s;background:linear-gradient(#16090d99,transparent)}
.site-header.scrolled{background:#241217ee;backdrop-filter:blur(14px);height:var(--header-h-scrolled)}
.logo{text-decoration:none;display:flex;align-items:center;gap:10px}
.logo-mark{height:32px;width:auto;display:block;opacity:.96}
.logo-word{font-family:"Cormorant Garamond",serif;font-size:1.7rem;letter-spacing:.12em;font-weight:500}
.logo-word span{color:var(--gold2)}
.desktop-nav{display:flex;gap:32px;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem}
.desktop-nav a{text-decoration:none;opacity:.84}
.desktop-nav a:hover{color:var(--gold2)}
.header-cta{border:1px solid #e6cf9c99;padding:10px 19px;text-decoration:none;text-transform:uppercase;letter-spacing:.15em;font-size:.67rem}
.header-cta:hover{background:var(--gold2);color:var(--wine2);border-color:var(--gold2)}

.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:5px}
.menu-btn span{display:block;width:22px;height:1.5px;background:#fff;transition:.25s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-nav{position:fixed;inset:0;z-index:29;background:#1d0a10f5;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s}
.mobile-nav.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s,visibility 0s}
.mobile-nav nav{display:flex;flex-direction:column;gap:26px;text-align:center}
.mobile-nav a{color:#fff;text-decoration:none;font-family:"Cormorant Garamond",serif;font-size:2rem}
.mobile-nav-cta{margin-top:14px;font-family:"DM Sans",sans-serif !important;font-size:.72rem !important;text-transform:uppercase;letter-spacing:.15em;border:1px solid #e6cf9c99;padding:12px 26px;display:inline-block}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{min-height:100svh;background:var(--wine2);position:relative;display:flex;align-items:flex-end;overflow:hidden;color:white}
.hero-media,.hero-shade{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:saturate(.85)}
.hero-shade{background:linear-gradient(90deg,#210a12ee 0%,#210a1266 45%,#210a1222 100%),linear-gradient(0deg,#1b080de8 0%,transparent 60%)}
.hero-content{position:relative;z-index:2;width:min(950px,90vw);margin:0 auto 10vh}
.kicker,.eyebrow{font-size:.68rem;text-transform:uppercase;letter-spacing:.24em;font-weight:500}
/* Default eyebrow sits on cream/light backgrounds — wine gives real AA contrast (gold2 does not) */
.eyebrow{color:var(--wine)}
.kicker{color:var(--gold2)}
/* Eyebrows that sit on dark wine backgrounds use the light gold tint instead */
.feature-copy .eyebrow,.book .eyebrow{color:var(--gold2)}
.hero h1{font-size:clamp(4rem,9vw,8.5rem);font-weight:400;line-height:.82;margin:22px 0 30px;letter-spacing:-.02em}
.hero h1 em,h2 em{color:var(--gold2);font-weight:400;font-style:italic}
.hero-copy{max-width:520px;font-size:1rem;color:#fff9efcc}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:34px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:14px 22px;border:1px solid transparent;text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;font-weight:600;cursor:pointer;transition:.2s}
.btn-primary{background:var(--gold2);color:var(--wine2)}
.btn-primary:hover{background:white}
.btn-light{border-color:#ffffff55;color:white}
.btn-light:hover{border-color:white}
.btn-outline{border-color:var(--line);color:var(--wine)}
.btn-outline:hover{background:var(--wine);color:#fff;border-color:var(--wine)}
.hero-proof{display:flex;gap:18px;align-items:center;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;color:#fff9efaa}
.hero-proof strong{font-family:"Cormorant Garamond";font-size:1.5rem;color:white}
.hero-proof i{height:20px;width:1px;background:#fff4}
.hero-scroll{position:absolute;right:5vw;bottom:6vh;writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:.18em;font-size:.58rem;color:#fff8}
.hero-scroll span{display:block;margin-top:10px;color:var(--gold2)}

/* ==========================================================================
   Trust bar — verified facts only
   ========================================================================== */
.trust-bar{background:var(--wine);color:#fff}
.trust-inner{max-width:1250px;margin:auto;padding:26px 5vw;display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;text-align:center}
.trust-inner div{display:flex;flex-direction:column;gap:2px}
.trust-inner strong{font-family:"Cormorant Garamond",serif;font-size:1.5rem;font-weight:500;color:var(--gold2)}
.trust-inner span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#fff9efb0}
.trust-inner i{height:26px;width:1px;background:#ffffff33}
.trust-brands strong{font-size:1rem}

/* ==========================================================================
   Intro / brand story
   ========================================================================== */
.section{padding:120px 5vw}
.intro{max-width:1250px;margin:auto;position:relative;overflow:hidden}
.intro-mark{position:absolute;right:-4vw;top:-6vw;width:34vw;max-width:480px;opacity:.05;pointer-events:none;z-index:0}
.intro-mark img{width:100%;height:auto;display:block}
.intro .eyebrow,.intro-grid{position:relative;z-index:1}
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:10vw;margin-top:30px}
.intro h2,.section-heading h2,.book h2{font-size:clamp(3rem,6vw,5.5rem);font-weight:400;line-height:.95;margin:0}
.intro p{max-width:520px;color:var(--muted)}
.intro .lead{font-size:1.12rem;color:var(--ink)}
.text-link{display:inline-block;margin-top:22px;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;text-decoration:none;border-bottom:1px solid var(--wine);padding-bottom:6px;color:var(--wine)}

/* ==========================================================================
   Bridal feature band
   ========================================================================== */
.feature-image{min-height:650px;background:var(--wine);color:white;display:grid;grid-template-columns:.8fr 1.2fr}
.feature-copy{padding:9vw 7vw;align-self:center}
.feature-copy h2{font-size:clamp(3rem,6vw,5.4rem);line-height:.9;font-weight:400;margin:20px 0}
.feature-copy p:not(.eyebrow){color:#fff9efb5;max-width:420px;margin-bottom:28px}
.feature-photo{min-height:550px;position:relative;overflow:hidden;background:linear-gradient(135deg,#8d5a60,#2d1018)}
.feature-photo picture,.feature-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.service-photo picture,.gallery-item picture,.hero-media picture{display:block;width:100%;height:100%}

/* Generic placeholder tile used only where a real approved photo is still pending */
.photo-slot{position:relative;overflow:hidden;background:linear-gradient(135deg,#b6928d,#4a2028);display:flex;align-items:center;justify-content:center}
.photo-slot span{background:#1d1010bb;color:#fff;padding:8px 12px;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;text-align:center}

/* ==========================================================================
   Services
   ========================================================================== */
.section-heading{max-width:850px;margin-bottom:55px}
.section-heading h2{margin-top:16px}
.section-heading.split{display:flex;justify-content:space-between;gap:50px;align-items:end}
.section-heading.split>p{max-width:360px;color:var(--muted);font-size:.88rem}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.service-grid article{border-right:1px solid var(--line);min-height:280px;padding-bottom:45px}
.service-grid article:last-child{border-right:0}
.service-photo{aspect-ratio:4/3;overflow:hidden;background:#e6d9c9}
.service-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.service-grid article:hover .service-photo img{transform:scale(1.045)}
.service-photo--pending{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#c9a98f,#5a1726)}
.service-photo--pending span{color:#fff9efcc;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;padding:0 18px;text-align:center}
.service-grid h3{font-size:2.3rem;font-weight:400;margin:26px 28px 8px;color:var(--wine)}
.service-grid p{color:var(--muted);max-width:320px;font-size:.88rem;margin:0 28px}
.service-grid a{display:inline-block;margin:15px 28px 0;color:var(--wine);font-size:.67rem;text-transform:uppercase;letter-spacing:.15em;text-decoration:none}

/* ==========================================================================
   Marquee divider
   ========================================================================== */
.marquee{overflow:hidden;background:var(--wine);color:var(--gold2);padding:18px 0;white-space:nowrap;font-family:"Cormorant Garamond";font-size:1.6rem;letter-spacing:.14em}
.marquee div{display:inline-block;animation:marquee 25s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ==========================================================================
   Portfolio gallery
   ========================================================================== */
.work{background:#eee5d9}
.gallery{display:grid;grid-template-columns:1.1fr .9fr .9fr;grid-auto-rows:280px;gap:10px}
.gallery-item{position:relative;overflow:hidden;background:linear-gradient(135deg,#b6928d,#4a2028)}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.gallery-item:hover img{transform:scale(1.045)}
.gallery-item.tall{grid-row:span 2}
.gallery-item.wide{grid-column:span 2}
.gallery-item span{opacity:.85}

/* ==========================================================================
   NUMRA difference — verified differentiators only
   ========================================================================== */
.difference{background:var(--cream)}
.difference-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.difference-list li{background:var(--cream);display:flex;gap:18px;padding:36px 34px;align-items:flex-start}
.difference-list img{width:22px;height:auto;margin-top:8px;flex:none}
.difference-list h3{font-size:1.5rem;font-weight:500;margin:0 0 8px;color:var(--wine)}
.difference-list p{margin:0;color:var(--muted);font-size:.9rem;max-width:380px}

/* ==========================================================================
   Locations
   ========================================================================== */
.locations{background:var(--cream)}
.location-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.location-grid article{background:var(--cream);padding:38px}
.location-grid h3{font-size:2.8rem;color:var(--wine);font-weight:400;margin:12px 0}
.location-grid p:not(.eyebrow):not(.hours){color:var(--muted);min-height:56px}
.location-grid .hours{color:var(--wine);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 18px}
.location-actions{display:flex;gap:18px;margin-bottom:20px}
.location-actions a{text-decoration:none;color:var(--wine);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--line);padding-bottom:4px}
.location-grid .map-link{display:block;text-decoration:none;color:var(--wine);text-transform:uppercase;letter-spacing:.12em;font-size:.65rem}

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews{background:#eee5d9}
.reviews-card{max-width:760px;background:var(--cream);border:1px solid var(--line);padding:48px 5vw}
.reviews-score{display:flex;align-items:center;gap:20px;margin-bottom:18px}
.reviews-score strong{font-family:"Cormorant Garamond",serif;font-size:4rem;font-weight:500;color:var(--wine);line-height:1}
.stars{display:block;color:var(--wine);letter-spacing:.12em}
.reviews-count{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.reviews-card>p{color:var(--muted);max-width:520px}
.reviews-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}

/* ==========================================================================
   Booking
   ========================================================================== */
.book{background:var(--wine2);color:white;padding:100px 5vw}
.book-inner{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:9vw}
.book h2{margin:20px 0}
.book p{color:#fff8efaa;max-width:470px}
.book form{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.book label{font-size:.65rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold2)}
.book input,.book select{width:100%;display:block;margin-top:7px;background:#fff0;border:0;border-bottom:1px solid #ffffff44;color:white;padding:12px 2px;font:inherit;outline:0}
.book input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}
.book option{color:var(--ink)}
.book button{grid-column:1/-1;margin-top:12px}
.book small{grid-column:1/-1;color:#fff8ef66;font-size:.65rem}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{background:#18070c;color:white;padding:70px 5vw 100px}
.footer-top{max-width:1200px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.footer-top p{color:#fff8ef88;font-size:.8rem}
.footer-top a:not(.logo){display:block;text-decoration:none;margin-top:8px;font-size:.78rem}
.footer-bottom{max-width:1200px;margin:60px auto 0;border-top:1px solid #ffffff18;padding-top:18px;display:flex;justify-content:space-between;color:#fff8ef55;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em}

/* ==========================================================================
   Sticky mobile CTA bar
   ========================================================================== */
.mobile-cta-bar{display:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:960px){
  .footer-top{grid-template-columns:1fr 1fr}
}

@media(max-width:800px){
  .desktop-nav,.header-cta{display:none}
  .menu-btn{display:flex}
  .site-header{padding:0 6vw}
  .intro-grid,.feature-image,.book-inner{grid-template-columns:1fr}
  .feature-copy{padding:80px 7vw}
  .feature-photo{min-height:420px}
  .service-grid,.location-grid,.difference-list{grid-template-columns:1fr}
  .service-grid article{border-right:0;border-bottom:1px solid var(--line)}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:220px}
  .gallery-item.tall{grid-row:span 2}
  .gallery-item.wide{grid-column:span 2}
  .section-heading.split{display:block}
  .section-heading.split>p{margin-top:25px}
  .book form{grid-template-columns:1fr}
  .book button,.book small{grid-column:auto}
  .footer-top{grid-template-columns:1fr 1fr}
  .hero h1{font-size:clamp(3.6rem,17vw,6rem)}
  .hero-proof{flex-wrap:wrap}
  .hero-scroll{display:none}
  .trust-inner{gap:22px 28px}
  .intro-mark{width:60vw;top:-10vw;right:-10vw}

  /* Sticky mobile quick-action bar */
  body{padding-bottom:64px}
  .mobile-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:28;display:flex;background:#1d0a10f2;backdrop-filter:blur(10px);border-top:1px solid #ffffff22;padding:10px 4vw calc(10px + env(safe-area-inset-bottom))}
  .mobile-cta-bar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;text-decoration:none;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}
  .mobile-cta-bar span{font-size:1.05rem}
  .mobile-cta-book{background:var(--gold2);color:var(--wine2);border-radius:2px;padding:8px 4px;font-weight:600}
}

@media(max-width:520px){
  .location-actions{gap:14px}
  .reviews-score{flex-wrap:wrap}
}

/* Scroll reveal (progressive enhancement; see script.js) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .marquee div{animation:none}
  .service-photo img,.gallery-item img{transition:none}
}