/* Envy Salon — Cape Coral Parkway fascia: taupe stucco, silver letters, neon pink */
:root{
  --stucco:#c4bbb3;
  --paper:#e4dfd9;
  --ink:#161412;
  --muted:#5a554e;
  --line:rgba(22,20,18,.14);
  --accent:#e2186d;
  --accent-ink:#fff8fb;
  --silver:#8a8e94;
  --chair:#141414;
  --f-d:"Syne",system-ui,sans-serif;
  --f-b:"Figtree",system-ui,sans-serif;
  --e:cubic-bezier(.22,1,.36,1);
  --s1:.25rem; --s2:.5rem; --s3:1rem; --s4:1.5rem; --s5:2.5rem; --s6:4rem; --s7:6.5rem;
  --wrap:min(1120px, calc(100% - 2 * max(1.25rem, env(safe-area-inset-left,0px))));
  --hdr:4.25rem;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; background:var(--stucco); color:var(--ink); -webkit-text-size-adjust:100%}
html,body{margin:0; min-height:100%}
body{
  font-family:var(--f-b);
  font-size:clamp(1.02rem, .35vw + 1rem, 1.125rem);
  line-height:1.6;
  background:
    radial-gradient(1200px 520px at 8% -10%, rgba(226,24,109,.08), transparent 55%),
    radial-gradient(900px 480px at 110% 8%, rgba(138,142,148,.28), transparent 50%),
    linear-gradient(180deg, #d2cac2 0%, var(--stucco) 28%, #bdb4ac 100%);
  color:var(--ink);
  overflow-x:clip;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:40; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>");
}
img,svg,video{max-width:100%; height:auto; display:block}
img{object-fit:cover}
button,input,select,textarea{font:inherit; color:inherit}
button{-webkit-appearance:none; appearance:none; border:0; margin:0; background:none; cursor:pointer}
a{color:inherit}
::selection{background:var(--accent); color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.skip{position:absolute; left:.75rem; top:-4rem; background:var(--ink); color:var(--paper); padding:.6rem 1rem; z-index:80}
.skip:focus{top:.75rem}
.wrap{width:var(--wrap); margin-inline:auto}

/* ---------- fascia header ---------- */
.hdr{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  min-height:var(--hdr);
  padding: max(.55rem, env(safe-area-inset-top)) max(1.1rem, env(safe-area-inset-right)) .55rem max(1.1rem, env(safe-area-inset-left));
  background:rgba(196,187,179,.86);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.2) blur(12px);
  -webkit-backdrop-filter:saturate(1.2) blur(12px);
}
.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; min-width:0}
.brand svg{width:28px; height:28px; flex:0 0 28px; color:var(--ink)}
.brand b{
  font-family:var(--f-d); font-weight:800; font-size:1.05rem;
  letter-spacing:.18em; line-height:1; text-transform:uppercase;
}
.nav{display:none; align-items:center; gap:1.35rem}
.nav a{
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); white-space:nowrap;
}
.nav a:hover,.nav a.active{color:var(--ink)}
.hdr__end{display:flex; align-items:center; gap:.55rem}
.hdr__call{
  display:none; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; padding:.55rem .85rem;
  border:1px solid var(--ink); min-height:44px; align-items:center;
}
.hdr__call:hover{background:var(--ink); color:var(--paper)}

/* lang pill — fixed pattern, accent thumb */
.lang{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  width:5.6rem; height:34px; border:1px solid var(--ink);
  background:rgba(255,255,255,.28); flex:0 0 auto;
}
.lang button{
  position:relative; z-index:1; font-size:.68rem; font-weight:800;
  letter-spacing:.08em; color:var(--muted); min-height:32px;
}
.lang[data-lang="en"] button[data-set="en"],
.lang[data-lang="es"] button[data-set="es"]{color:var(--accent-ink)}
.lang__thumb{
  position:absolute; top:2px; left:2px; width:calc(50% - 2px); height:calc(100% - 4px);
  background:var(--accent); transform:translateX(0); transition:transform .28s var(--e); z-index:0;
}
.lang[data-lang="es"] .lang__thumb{transform:translateX(100%)}

.burger{
  width:44px; height:44px; display:grid; place-items:center; color:var(--ink);
}
.burger span,.burger span::before,.burger span::after{
  display:block; width:18px; height:1.5px; background:currentColor; position:relative;
}
.burger span::before,.burger span::after{content:""; position:absolute; left:0}
.burger span::before{top:-6px}
.burger span::after{top:6px}
@media (min-width:880px){
  .nav{display:flex}
  .hdr__call{display:inline-flex}
  .burger{display:none}
}

/* mobile nav */
.mnav{
  border:0; padding:0; width:min(100%, 28rem); max-width:100%; height:100dvh;
  background:var(--paper); color:var(--ink);
}
.mnav::backdrop{background:rgba(22,20,18,.45)}
.mnav[open]{display:flex; flex-direction:column; flex-wrap:nowrap}
.mnav__top{
  display:flex; align-items:center; justify-content:space-between;
  padding: max(.7rem, env(safe-area-inset-top)) 1.1rem .7rem;
  border-bottom:1px solid var(--line);
}
.mnav nav{display:flex; flex-direction:column; flex-wrap:nowrap; padding:1.5rem 1.25rem 2rem; gap:.15rem}
.mnav nav a{
  font-family:var(--f-d); font-weight:800; font-size:clamp(1.6rem, 6vw, 2.1rem);
  letter-spacing:-.03em; line-height:1.15; text-decoration:none; padding:.35rem 0;
  min-height:44px; display:flex; align-items:center;
}
.mnav__close{width:44px; height:44px; font-size:1.6rem; line-height:1}

/* ---------- type + buttons ---------- */
.kicker{
  font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .7rem;
}
h1,h2,h3{font-family:var(--f-d); font-weight:800; letter-spacing:-.04em; line-height:1.02; text-wrap:balance; margin:0}
.lead{font-size:clamp(1.05rem, 1.4vw, 1.2rem); line-height:1.55; color:var(--muted); max-width:38ch; text-wrap:pretty}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:44px; padding:.7rem 1.15rem; text-decoration:none; white-space:nowrap;
  font-weight:700; font-size:.84rem; letter-spacing:.08em; text-transform:uppercase;
  transition:transform .22s var(--e), background .22s, color .22s, border-color .22s;
}
.btn--fill{background:var(--accent); color:var(--accent-ink)}
.btn--fill:hover{filter:brightness(1.06); transform:translateY(-1px)}
.btn--ghost{border:1px solid var(--ink); color:var(--ink); background:transparent}
.btn--ghost:hover{background:var(--ink); color:var(--paper)}
.btn:active{transform:translateY(0)}
.row{display:flex; flex-wrap:wrap; gap:.65rem; align-items:center}

/* ---------- hero: type-first fascia ---------- */
.hero{
  position:relative; padding: clamp(2.2rem, 6vw, 4.5rem) 0 clamp(3rem, 8vw, 6rem);
  --mx:0; --my:0; --px:50%; --py:40%; --spot:0;
}
.hero__grid{
  width:var(--wrap); margin-inline:auto;
  display:grid; gap:clamp(1.6rem, 4vw, 3rem); align-items:start;
}
@media (min-width:900px){
  .hero__grid{grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap:4rem}
}
.hero__word{padding-bottom: clamp(1.2rem, 3vw, 2rem)}
.hero h1{
  font-size:clamp(3.6rem, 14vw, 8.4rem);
  letter-spacing:-.06em; line-height:.86; margin:.1rem 0 .4rem;
}
.hero h1 .ln{display:block}
.hero h1 .ln > span{display:block}
.neon{
  display:block; width:min(12rem, 46%); height:3px; margin: .2rem 0 1.3rem;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--e) .35s;
}
html.loaded .neon{transform:scaleX(1)}
.hero__shot{
  position:relative; margin:0; min-width:0;
  background:var(--chair);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 24px 50px -28px rgba(22,20,18,.55);
}
.hero__shot::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:calc(var(--spot) * .55);
  background:radial-gradient(420px 280px at var(--px) var(--py), rgba(255,220,200,.28), transparent 62%);
  mix-blend-mode:screen; transition:opacity .35s;
}
.hero__shot img{width:100%; aspect-ratio:4/5; height:auto}
@media (min-width:900px){
  .hero__shot img{aspect-ratio:4/5}
}
.hero__shot figcaption{
  position:absolute; left:.7rem; bottom:.7rem; right:.7rem;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:#f3eee8; background:rgba(10,10,12,.55); backdrop-filter:blur(8px);
  padding:.45rem .65rem; width:max-content; max-width:calc(100% - 1.4rem);
}
.statline{
  display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; margin:1.4rem 0 1.6rem;
  font-variant-numeric:tabular-nums; font-size:.92rem; color:var(--muted);
}
.statline b{color:var(--ink); font-weight:700}

/* ---------- sections ---------- */
.sec{padding: clamp(3.4rem, 8vw, 7rem) 0}
.sec--tight{padding-top: clamp(2.2rem, 5vw, 3.5rem)}
.rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, rgba(22,20,18,.28), transparent);
}

/* about: giant quote, photo shifted */
.about__quote{
  font-family:var(--f-d); font-weight:800; letter-spacing:-.045em; line-height:1.04;
  font-size:clamp(1.7rem, 4.6vw, 3.35rem); text-wrap:balance; margin:0 0 1.1rem; max-width:18ch;
}
.about__who{margin:0 0 2.4rem; color:var(--muted); font-size:.92rem}
.about__shift{
  display:grid; gap:1.6rem; align-items:start;
}
@media (min-width:860px){
  .about__shift{grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap:2.5rem}
  .about__shift figure{margin-top:2.8rem}
}
.about__shift figure{margin:0; min-width:0}
.about__shift img{width:100%; aspect-ratio:4/3; height:auto}
.about__copy p{margin:0 0 1rem; max-width:48ch; color:var(--muted); text-wrap:pretty}
.about__copy p strong{color:var(--ink); font-weight:650}

/* services: window vinyl menu */
.menu h2{font-size:clamp(2.1rem, 5vw, 3.6rem); margin-bottom: .3rem}
.menu__intro{max-width:46ch; color:var(--muted); margin:0 0 2rem}
.vinyl{display:flex; flex-direction:column; min-width:0}
.vinyl__row{
  display:grid; gap:.35rem 1.5rem; padding:1.15rem 0;
  border-top:1px solid var(--line); min-width:0;
  grid-template-columns:minmax(0,1fr);
  text-decoration:none;
}
@media (min-width:720px){
  .vinyl__row{grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); align-items:baseline}
}
.vinyl__row:last-child{border-bottom:1px solid var(--line)}
.vinyl__name{
  font-family:var(--f-d); font-weight:800; font-size:clamp(1.35rem, 2.6vw, 1.85rem);
  letter-spacing:-.03em; line-height:1.05;
}
.vinyl__blurb{margin:0; color:var(--muted); max-width:52ch; text-wrap:pretty}
.vinyl__row:hover .vinyl__name,.vinyl__row:focus-visible .vinyl__name{color:var(--accent)}
.menu__side{
  margin-top:2rem; display:grid; grid-template-columns:minmax(0,1fr); gap:.6rem;
}
@media (min-width:720px){
  .menu__side{grid-template-columns:repeat(3, minmax(0,1fr))}
}
.menu__side img{width:100%; aspect-ratio:1; height:auto}

/* gallery: horizontal snap, not 2x2 */
.work h2{font-size:clamp(2.1rem, 5vw, 3.6rem); margin-bottom:.4rem}
.work__intro{color:var(--muted); max-width:46ch; margin:0 0 1.4rem}
.strip{
  display:flex; gap:.7rem; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding: .2rem max(1.25rem, env(safe-area-inset-left)) 1rem;
  -webkit-overflow-scrolling:touch;
}
.strip::-webkit-scrollbar{height:4px}
.strip::-webkit-scrollbar-thumb{background:rgba(22,20,18,.28)}
.tile{
  flex:0 0 min(78vw, 320px); min-width:0; scroll-snap-align:start; position:relative;
}
.tile button{
  display:block; width:100%; padding:0; text-align:left; cursor:pointer; color:inherit;
}
.tile img{width:100%; aspect-ratio:4/5; height:auto}
.tile em{
  display:block; font-style:normal; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; margin-top:.45rem; color:var(--muted);
}

/* lightbox */
.lb{border:0; padding:0; max-width:min(92vw, 920px); width:92vw; background:var(--chair); color:#eee}
.lb::backdrop{background:rgba(14,12,11,.78)}
.lb-in{position:relative}
.lb-in img{width:100%; max-height:78dvh; object-fit:contain; height:auto; margin-inline:auto}
.lb-cap{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 1rem; font-size:.85rem; color:#cfc8c0}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; background:rgba(10,10,12,.55); color:#fff; font-size:1.4rem;
}
.lb-prev{left:.4rem}
.lb-next{right:.4rem}
.lb-close{position:absolute; top:.4rem; right:.4rem; width:44px; height:44px; color:#fff; font-size:1.5rem}

/* contact: phone first, day strip */
.visit{background:rgba(22,20,18,.06); padding: clamp(3.4rem, 8vw, 6.5rem) 0}
.visit h2{font-size:clamp(2.1rem, 5vw, 3.6rem); margin-bottom:.6rem}
.phone{
  font-family:var(--f-d); font-weight:800; letter-spacing:-.05em; line-height:.9;
  font-size:clamp(2.2rem, 8vw, 5.2rem); text-decoration:none; display:inline-block;
  margin:.2rem 0 1.2rem; text-wrap:balance;
}
.phone:hover{color:var(--accent)}
.days{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); margin:0 0 2rem;
}
.day{
  background:var(--paper); padding:.7rem .35rem .8rem; text-align:center; min-width:0;
}
.day b{display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700}
.day span{display:block; font-variant-numeric:tabular-nums; font-size:.78rem; margin-top:.25rem}
.day.is-today{background:var(--ink); color:var(--paper)}
.day.is-today b{color:rgba(255,248,251,.7)}
.status{
  font-weight:700; margin:0 0 1.4rem; font-variant-numeric:tabular-nums;
}
.status[data-open="1"]{color:#1b6b3a}
.status[data-open="0"]{color:var(--muted)}
.visit__grid{
  display:grid; gap:1.6rem;
}
@media (min-width:800px){
  .visit__grid{grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); align-items:start}
}
.addr{margin:0 0 .8rem; color:var(--muted); max-width:36ch}
.maps{display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 1.1rem}
.maps a{
  min-height:44px; display:inline-flex; align-items:center; padding:0 .85rem;
  border:1px solid var(--ink); text-decoration:none; font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.maps a:hover{background:var(--ink); color:var(--paper)}
.socials{display:flex; gap:.55rem; flex-wrap:wrap}
.socials a{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--ink); color:var(--ink);
}
.socials a:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.socials svg{width:18px; height:18px}
.visit figure{margin:0; min-width:0}
.visit figure img{width:100%; aspect-ratio:4/3; height:auto}

/* FAQ */
.faq h2{font-size:clamp(2.1rem, 5vw, 3.6rem); margin-bottom:1.2rem}
.faq details{
  border-top:1px solid var(--line); padding:.2rem 0;
}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; min-height:52px; display:flex; align-items:center;
  font-family:var(--f-d); font-weight:800; font-size:clamp(1.05rem, 2vw, 1.25rem);
  letter-spacing:-.02em; padding:.7rem 1.8rem .7rem 0; position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:0; font-weight:700; color:var(--accent);
}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 1.1rem; max-width:62ch; color:var(--muted); text-wrap:pretty}

/* blog last */
.blog h2{font-size:clamp(2.1rem, 5vw, 3.6rem); margin-bottom:.4rem}
.blog__intro{color:var(--muted); margin:0 0 1.6rem; max-width:46ch}
.posts{
  display:grid; gap:1.1rem; grid-template-columns:minmax(0,1fr);
}
@media (min-width:720px){
  .posts{grid-template-columns:repeat(3, minmax(0,1fr))}
}
.post{
  display:flex; flex-direction:column; text-decoration:none; min-width:0;
  background:rgba(255,255,255,.28); border:1px solid var(--line);
  min-height:100%;
}
.post img{width:100%; aspect-ratio:4/3; height:auto}
.post div{padding:1rem 1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem; flex:1}
.post time{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.post h3{font-size:1.15rem; letter-spacing:-.03em; line-height:1.15}
.post p{margin:0; color:var(--muted); font-size:.95rem}

/* footer */
.ftr{
  padding: 2.4rem 0 max(2.2rem, env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
.ftr__word{
  font-family:var(--f-d); font-weight:800; letter-spacing:-.07em; line-height:.85;
  font-size:clamp(3.4rem, 16vw, 10rem); margin:0 0 1.2rem;
}
.ftr__row{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  color:var(--muted); font-size:.88rem;
}
.ftr a{text-decoration:none; font-weight:650}
.ftr a:hover{color:var(--accent)}

/* mobile action bar */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:flex; gap:1px; background:var(--line);
  padding:0 0 env(safe-area-inset-bottom);
}
.dock a{
  flex:1 1 0; min-width:0; min-height:48px; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper); text-decoration:none;
  font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.dock a:last-child{background:var(--accent); color:var(--accent-ink)}
@media (min-width:880px){
  .dock{display:none}
  body{padding-bottom:0}
}
@media (max-width:879px){
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
}

/* desktop chip — not a FAB */
.chip{
  display:none; position:fixed; right:max(1rem, env(safe-area-inset-right)); left:auto; bottom:1.1rem; z-index:40;
  min-height:44px; padding:.55rem .95rem; text-decoration:none; white-space:nowrap;
  background:var(--paper); color:var(--ink); border:1px solid var(--ink);
  font-weight:700; font-size:.82rem; letter-spacing:.04em;
  box-shadow:0 10px 28px -18px rgba(22,20,18,.5);
}
.chip:hover{background:var(--ink); color:var(--paper)}
@media (min-width:880px){ .chip{display:inline-flex; align-items:center} }

/* page (blog/404) */
.page{padding: clamp(2rem, 6vw, 4rem) 0 4rem}
.page h1{font-size:clamp(2rem, 6vw, 3.4rem); margin:.2rem 0 1rem}
.prose{max-width:66ch}
.prose p,.prose li{color:var(--muted); text-wrap:pretty}
.prose h2{font-size:1.45rem; margin:1.8rem 0 .6rem; letter-spacing:-.03em}
.prose picture,.prose img{margin:1.2rem 0 1.6rem; width:100%}
.prose .btn{margin-top:1.1rem}

/* motion */
.rv{opacity:0; transform:translateY(28px); transition:opacity .9s var(--e), transform .9s var(--e)}
.rv.in{opacity:1; transform:none}
.rv:nth-child(2){transition-delay:.06s}
.rv:nth-child(3){transition-delay:.12s}
html[data-tier="static"] .fx-heavy{display:none}

@media (prefers-reduced-motion: reduce){
  .rv, .neon{opacity:1; transform:none; transition:none}
  .chip,.btn{transition:none}
}
@media (prefers-reduced-motion: no-preference){
  .hero h1 .ln > span{
    opacity:0; transform:translateY(16px);
    transition:opacity 1s var(--e), transform 1s var(--e);
  }
  html.loaded .hero h1 .ln > span{opacity:1; transform:none}
}

@media (max-width:430px){
  .hero h1{font-size:clamp(3.2rem, 18vw, 4.2rem)}
  .day{padding:.55rem .15rem .65rem}
  .day span{font-size:.68rem}
  .phone{font-size:clamp(1.8rem, 11vw, 2.6rem)}
}