/* ============================================================
   SEBASTIAN BARBER BEAUTY SALON — Ontario, CA
   Elegant black & champagne-gold. Beauty + barber, unisex.
   High-contrast, editorial, mobile-first. Español (toggle EN).
   ============================================================ */
:root{
  --bg:#08080a; --bg-2:#0f0f12; --surface:#151519; --surface-2:#1e1e24;
  --bone:#f6f1e7; --muted:#a9a49c; --dim:#7c7871;
  --gold:#d4b062; --gold-2:#f1dca6;
  --red:#c98f9b; --red-2:#dcb0b8;
  --line:rgba(246,241,231,.09); --line-2:rgba(212,176,98,.34);
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Jost", system-ui, -apple-system, sans-serif;
  --wrap:80rem; --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-anchor:none}
body{font-family:var(--body);color:var(--bone);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--gold-2)}

/* ---- shared ---- */
.eyebrow{font-weight:700;font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.eyebrow--gold{color:var(--gold)}
.section-head{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,5vw,3rem)}
.section-title{font-family:var(--display);font-weight:500;
  font-size:clamp(2.4rem,7.5vw,4.6rem);line-height:1.02;letter-spacing:-.012em;margin-top:.6rem}
.section-title em,.section-title .hl{font-style:italic;color:var(--gold)}
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--body);font-weight:700;
  font-size:1rem;letter-spacing:.01em;padding:.9rem 1.5rem;border-radius:3px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s;line-height:1}
.btn .ico{width:1.15em;height:1.15em;fill:currentColor;flex:0 0 auto}
.btn--gold{background:var(--gold);color:#1b1608;box-shadow:0 6px 22px rgba(212,176,98,.26)}
.btn--gold:hover{background:var(--gold-2);transform:translateY(-2px)}
.btn--outline{background:transparent;border-color:var(--line-2);color:var(--bone)}
.btn--outline:hover{border-color:var(--gold);color:var(--gold-2);transform:translateY(-2px)}
.btn--lg{padding:1.05rem 1.8rem;font-size:1.08rem}

/* ============ HEADER ============ */
.site-head{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:1rem;
  padding:.7rem clamp(1.1rem,5vw,3rem);
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:.55rem;margin-right:auto;color:var(--bone)}
.brand__mark{width:1.9rem;height:1.9rem;color:var(--gold);flex:0 0 auto}
.brand__logo{height:2.15rem;width:auto;flex:0 0 auto;border-radius:5px}
.brand__word{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:.03em}
.nav{display:none;gap:1.7rem}
.nav a{font-weight:600;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.nav a:hover{color:var(--gold)}
.head-cta{padding:.58rem 1rem;font-size:.9rem}
.lang-toggle{background:transparent;border:1.5px solid var(--line-2);color:var(--bone);font-family:var(--body);
  font-weight:800;font-size:.78rem;letter-spacing:.08em;padding:.5rem .7rem;border-radius:3px;cursor:pointer;
  transition:border-color .25s,color .25s}
.lang-toggle:hover{border-color:var(--gold);color:var(--gold)}

/* ============ HERO ============ */
.hero{position:relative;min-height:clamp(580px,92svh,900px);display:flex;align-items:flex-end;
  color:var(--bone);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg picture{display:block;width:100%;height:100%}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:contrast(1.06) saturate(1.02)}
.hero__video{display:none}
.hero__bg .hero__video{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:contrast(1.06) saturate(1.02)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.5) 0%,rgba(8,8,10,.04) 26%,rgba(8,8,10,.5) 58%,rgba(8,8,10,.97) 100%),
             radial-gradient(75% 55% at 78% 8%,rgba(212,176,98,.15),transparent 70%)}
.hero__inner{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(1.4rem,5vw,3rem) clamp(1.1rem,5vw,3rem) clamp(2.6rem,7vw,4.6rem)}
.hero__title{font-family:var(--display);font-weight:500;
  font-size:clamp(2.9rem,11vw,5.8rem);line-height:1.0;letter-spacing:-.017em;text-shadow:0 2px 34px rgba(0,0,0,.55)}
.hero__title .hl{color:var(--gold);font-style:italic}
.hero__lede{max-width:36ch;margin-top:1.1rem;font-size:clamp(1.02rem,2.6vw,1.24rem);color:#e9dfce;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.hero__lede strong{color:#fff;font-weight:700}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.7rem 0 1rem}
.hero__trust{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--dim);letter-spacing:.04em}
.dot-live{width:.5rem;height:.5rem;border-radius:50%;background:#39d353;box-shadow:0 0 0 3px rgba(57,211,83,.2)}
.hero__figure{position:relative}
.hero__frame{position:relative;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.5);aspect-ratio:4/3}
.hero__frame img{width:100%;height:100%;object-fit:cover;object-position:70% 30%;filter:contrast(1.05) saturate(1.03)}
.hero__frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,0) 45%),
             linear-gradient(0deg,rgba(8,8,10,.8) 0%,rgba(8,8,10,0) 40%)}
.hero__badge{position:absolute;left:1rem;bottom:1rem;z-index:2;display:flex;flex-direction:column;
  line-height:1.05;background:rgba(8,8,10,.6);backdrop-filter:blur(6px);border:1px solid var(--line-2);
  border-left:3px solid var(--gold);padding:.5rem .8rem;border-radius:3px}
.hero__badge b{font-family:var(--display);font-size:1.15rem;letter-spacing:.02em;text-transform:uppercase}
.hero__badge{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* ============ MARQUEE ============ */
.marquee{background:var(--gold);color:#1b1608;overflow:hidden;padding:.6rem 0}
.marquee__track{display:inline-flex;align-items:center;gap:1.3rem;white-space:nowrap;
  font-weight:800;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;
  animation:marq 28s linear infinite;will-change:transform}
.marquee__track i{opacity:.5;font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============ OFFERS ============ */
.offers{padding:clamp(3rem,9vw,6rem) 0}
.offer-grid{max-width:var(--wrap);margin:2.2rem auto 0;padding:0 clamp(1.1rem,5vw,3rem);
  display:grid;gap:1.2rem;grid-template-columns:1fr}
.offer{position:relative;background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:6px;
  display:flex;flex-direction:column;overflow:hidden}
.offer--red{border-top-color:var(--red)}
.offer__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a0908}
.offer__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.offer:hover .offer__img{transform:scale(1.04)}
.offer__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,0) 42%,rgba(8,8,10,.62) 100%)}
.offer__body{display:flex;flex-direction:column;gap:.55rem;flex:1;
  padding:clamp(1.4rem,3.6vw,2.2rem)}
.offer__addr{display:flex;align-items:center;gap:.55rem;margin-top:auto;padding-top:.85rem;
  border-top:1px solid var(--line);color:var(--muted);font-size:.82rem;line-height:1.35}
.offer__addr strong{color:var(--bone);font-weight:700}
.offer__pin{width:1rem;height:1rem;flex:none;color:var(--gold)}
.offer--red .offer__pin{color:var(--red-2)}
.offer__flag{position:absolute;top:0;right:0;z-index:2;background:var(--gold);color:#1b1608;font-size:.7rem;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .7rem}
.offer--red .offer__flag{background:var(--red);color:var(--bone)}
.offer__kicker{font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;color:var(--gold)}
.offer--red .offer__kicker{color:var(--red-2)}
.offer__title{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,4.5vw,2.4rem);
  line-height:.98;letter-spacing:.01em;max-width:14ch;margin-top:.2rem}
.offer__desc{color:var(--muted);max-width:42ch}
.offer__price{display:flex;align-items:flex-start;gap:.1rem;margin:.5rem 0 1.1rem;color:var(--gold)}
.offer--red .offer__price{color:var(--red-2)}
.offer__cur{font-family:var(--display);font-size:1.8rem;margin-top:.5rem}
.offer__amt{font-family:var(--display);font-size:clamp(3.6rem,13vw,5rem);line-height:.8}
.offer .btn{align-self:flex-start;margin-top:.2rem}

/* ============ SERVICES ============ */
.services{padding:clamp(2.5rem,7vw,5rem) 0;background:var(--bg-2);border-block:1px solid var(--line)}
.svc-list{max-width:var(--wrap);margin:2rem auto 0;padding:0 clamp(1.1rem,5vw,3rem);list-style:none}
.svc{display:flex;gap:clamp(1rem,4vw,2.4rem);align-items:baseline;padding:1.5rem 0;border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc__no{font-family:var(--display);font-size:clamp(1.5rem,5vw,2.6rem);color:transparent;
  -webkit-text-stroke:1.4px var(--gold);flex:0 0 auto}
.svc h3{font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,4vw,1.95rem);
  letter-spacing:.01em;margin-bottom:.3rem}
.svc p{color:var(--muted);max-width:54ch}
/* services as elegant card grid (distinct from a plain list) */
.svc-grid{max-width:var(--wrap);margin:2.2rem auto 0;padding:0 clamp(1.1rem,5vw,3rem);
  display:grid;gap:1rem;grid-template-columns:1fr}
.svc-card{position:relative;background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);border-radius:9px;padding:1.7rem 1.5rem 1.8rem;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.svc-card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent 72%);opacity:.5;transition:opacity .35s}
.svc-card:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 20px 44px rgba(0,0,0,.45)}
.svc-card:hover::before{opacity:1}
.svc-card__no{font-family:var(--display);font-style:italic;font-size:2rem;color:var(--gold);
  line-height:1;display:block;margin-bottom:.7rem}
.svc-card h3{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,3vw,1.62rem);margin-bottom:.45rem;letter-spacing:.005em}
.svc-card p{color:var(--muted);font-size:.98rem;line-height:1.62}
@media (min-width:640px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.svc-grid{grid-template-columns:repeat(3,1fr)}}

/* ============ ABOUT ============ */
.about{max-width:var(--wrap);margin:0 auto;padding:clamp(3rem,9vw,6.5rem) clamp(1.1rem,5vw,3rem);
  display:grid;gap:clamp(1.6rem,5vw,3.5rem);grid-template-columns:1fr;align-items:center}
.about__media{position:relative;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.45);max-width:22rem}
.about__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 -80px 60px -40px rgba(8,8,10,.7)}
.about__media img{width:100%;object-fit:cover;aspect-ratio:3/4;filter:contrast(1.04)}
.about__body p{margin-top:1.05rem;color:var(--muted);font-size:1.06rem;max-width:48ch}
.about__body p strong{color:var(--bone)}
.pill-row{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin-top:1.6rem}
.pill-row li{border:1px solid var(--line-2);border-radius:2rem;padding:.42rem .95rem;font-size:.84rem;
  font-weight:600;color:var(--muted)}

/* ============ WORK ============ */
.work{padding:clamp(2.5rem,7vw,5rem) 0}
.gallery{max-width:var(--wrap);margin:2rem auto 0;padding:0 clamp(1.1rem,5vw,3rem);
  display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;grid-auto-flow:dense}
.g{overflow:hidden;border-radius:5px;border:1px solid var(--line);background:var(--surface)}
.g img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03);transition:transform .6s var(--ease)}
.g:hover img{transform:scale(1.06)}
.g--tall{grid-row:span 2}
.g--wide{grid-column:span 2}

/* ============ VISIT ============ */
.visit{background:linear-gradient(180deg,var(--bg),#050506);padding:clamp(3rem,8vw,6rem) 0;
  display:grid;gap:2rem;grid-template-columns:1fr}
.visit>*{max-width:var(--wrap);margin-inline:auto;width:100%}
.visit__body{padding:0 clamp(1.1rem,5vw,3rem)}
.visit__addr{font-style:normal;margin-top:1.2rem;font-size:1.15rem;line-height:1.7;color:var(--muted)}
.visit__addr strong{color:var(--bone);font-weight:700}
.visit__hours{margin-top:1rem;color:var(--dim);letter-spacing:.04em}
.visit__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.visit__media{padding:0 clamp(1.1rem,5vw,3rem)}
.visit__media img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line-2);border-radius:6px}

/* ============ MAP ============ */
.mapband{position:relative;border-top:1px solid var(--line);line-height:0}
.mapband__frame{display:block;width:100%;height:clamp(320px,42vw,460px);border:0}
.mapband__chip{position:absolute;left:clamp(1rem,4vw,2.4rem);bottom:clamp(1rem,4vw,2rem);z-index:2;line-height:1.4;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line-2);
  border-left:3px solid var(--gold);border-radius:5px;padding:.85rem 1.1rem;max-width:min(84vw,340px)}
.mapband__eyebrow{font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:var(--gold)}
.mapband__addr{color:var(--bone);font-size:.95rem;font-weight:600;margin-top:.15rem}
.mapband__dir{display:inline-block;margin-top:.4rem;color:var(--gold);font-weight:700;font-size:.85rem}
.mapband__dir:hover{color:var(--gold-2)}
.visit__inside{display:inline-block;margin-top:.25rem;font-size:.85rem;color:var(--dim)}

/* ============ FOOTER ============ */
.site-foot{background:#050506;padding:clamp(2.6rem,6vw,4rem) clamp(1.1rem,5vw,3rem);display:grid;gap:1.4rem}
.foot__brand p{margin-top:.5rem;color:var(--dim)}
.foot__social{display:flex;gap:1.5rem;font-weight:600}
.foot__social a{color:var(--muted)}
.foot__social a:hover{color:var(--gold)}
.foot__legal{font-size:.8rem;color:var(--dim);border-top:1px solid var(--line);padding-top:1.2rem}

/* ============ STICKY MOBILE CTA (Call + WhatsApp) ============ */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.4);transform:translateY(120%);transition:transform .4s var(--ease)}
.cta-bar.show{transform:none}
.cta-bar__btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem;font-weight:800;letter-spacing:.02em}
.cta-bar__btn .ico{width:1.25em;height:1.25em;fill:currentColor}
.cta-bar__call{background:var(--gold);color:#1b1608}
.cta-bar__wa{background:#1f9d5b;color:#fff}

/* ============ RESPONSIVE ============ */
@media (min-width:760px){
  .hero__video{display:block}
  .hero__pic{display:none}
  .hero::after{background:linear-gradient(90deg,rgba(8,8,10,.93) 0%,rgba(8,8,10,.5) 42%,rgba(8,8,10,.06) 74%),
    linear-gradient(180deg,rgba(8,8,10,.35) 0%,transparent 44%,rgba(8,8,10,.92) 100%),
    radial-gradient(55% 60% at 88% 12%,rgba(212,176,98,.15),transparent 70%)}
  .offer-grid{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:minmax(17rem,23rem) 1fr}
  .about__media{max-width:none}
  .visit{grid-template-columns:1fr 1fr;align-items:center}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:920px){
  .nav{display:flex}
  .cta-bar{display:none}
}

/* ============ MOTION SAFETY ============ */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .js .reveal{opacity:1!important;transform:none!important;transition:none}
  .marquee__track{animation:none}
  .g:hover img{transform:none}
}