/* Threading by Ranna Salon & Spa
   Fonts: Cormorant (display) · Jost (body/label) · Pinyon Script (signature)
   Design: editorial beauty. Plum ink + blush plaster + brass thread motif. */

:root{
  /* color. semantic token contract */
  --surface:#F3E6DC;       /* warm plaster blush */
  --surface-2:#FBF4ED;     /* lighter card / panels */
  --ink:#34202E;           /* deep aubergine text */
  --ink-soft:#7E6271;      /* muted mauve secondary */
  --accent:#B07A3B;        /* brass */
  --accent-deep:#8A5A24;   /* deep brass, hovers */
  --line:#E3CFC1;          /* hairlines */
  /* type */
  --font-display:'Cormorant', Georgia, serif;
  --font-body:'Jost', system-ui, -apple-system, sans-serif;
  --font-label:'Jost', system-ui, sans-serif;
  /* brand extras */
  --plum:#2A1622;          /* deep panels */
  --plum-2:#3C2333;
  --rose:#D9A39C;          /* dusty rose */
  --brass-light:#D6A968;
  --cream:#FBF4ED;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{font-size:17px;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.04;margin:0;letter-spacing:.005em;}

/* paper grain for atmosphere */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,52px);}

/* labels / kickers */
.label{
  font-family:var(--font-label);font-weight:500;
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--accent-deep);
}

/* ============ utility bar ============ */
.util{
  position:relative;z-index:5;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.util .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:52px;
}
.util .u-l,.util .u-c,.util .u-r{
  font-family:var(--font-label);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:400;white-space:nowrap;
}
.util .u-c{flex:1;text-align:center;}
.util .u-r{display:flex;align-items:center;gap:18px;}
.util a.u-book{
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);
  padding-bottom:2px;transition:color .2s,border-color .2s;
}
.util a.u-book:hover{color:var(--accent-deep);border-color:var(--accent-deep);}
@media (max-width:760px){
  .util .u-l,.util .u-c{display:none;}
  .util .wrap{justify-content:space-between;}
  .util .u-r{width:100%;justify-content:space-between;}
}

/* ============ hero ============ */
.hero{
  position:relative;z-index:2;
  text-align:center;
  padding:clamp(54px,9vw,108px) 0 clamp(40px,6vw,72px);
  overflow:hidden;
}
.hero .h-kicker{
  font-family:var(--font-label);font-weight:500;
  font-size:.74rem;letter-spacing:.4em;text-transform:uppercase;color:var(--accent-deep);
  margin:0 0 26px;
}
.hero .wordmark{position:relative;display:inline-block;}
.hero .wm-top,.hero .wm-bot{
  font-family:var(--font-display);font-weight:300;font-style:italic;
  color:var(--ink-soft);
  font-size:clamp(1.3rem,4vw,2.1rem);line-height:1;letter-spacing:.02em;
  display:block;
}
.hero .wm-bot{margin-top:.45em;font-style:normal;letter-spacing:.42em;text-transform:uppercase;
  font-family:var(--font-label);font-weight:400;font-size:clamp(.7rem,2vw,.92rem);color:var(--ink-soft);}
.hero .wm-name{
  font-family:'Pinyon Script', cursive;
  font-size:clamp(4.6rem,17vw,11rem);
  line-height:.78;color:var(--ink);
  margin:.04em 0;display:block;font-weight:400;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
/* the brass thread arc that sweeps under the name */
.hero .thread-arc{
  display:block;width:min(560px,80vw);height:auto;margin:6px auto 0;color:var(--accent);
}
.hero .h-sub{
  max-width:34ch;margin:30px auto 0;
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.35;color:var(--ink);
}
.hero .h-sub .amp{color:var(--accent);font-style:normal;}
.hero .h-cta{margin:38px auto 0;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;}

/* buttons (not pills) */
.btn{
  font-family:var(--font-label);font-weight:500;
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:0;
  transition:transform .18s ease, background .2s ease, color .2s ease;
}
.btn-solid{
  background:var(--ink);color:var(--cream);
  padding:17px 34px;
  box-shadow:0 10px 30px rgba(42,22,34,.22);
}
.btn-solid:hover{background:var(--plum);transform:translateY(-2px);}
.btn-line{
  color:var(--ink);padding:6px 2px;border-bottom:1.5px solid var(--accent);
}
.btn-line:hover{color:var(--accent-deep);border-color:var(--accent-deep);}
.btn-line .num{font-family:var(--font-body);letter-spacing:.06em;}

/* ============ stat ribbon ============ */
.ribbon{
  position:relative;z-index:2;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.ribbon .wrap{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(14px,3vw,40px);
  padding:20px 0;
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:400;text-align:center;
}
.ribbon b{color:var(--ink);font-weight:600;}
.ribbon .star{color:var(--accent);}
.ribbon .sep{color:var(--accent);opacity:.6;}
@media (max-width:620px){.ribbon .sep{display:none;}.ribbon .wrap{gap:8px 18px;}}

/* ============ section scaffold ============ */
.section{position:relative;z-index:2;padding:clamp(64px,10vw,118px) 0;}
.s-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:clamp(34px,5vw,58px);}
.s-head .label{order:-1;}
.s-head h2{font-size:clamp(2.4rem,6vw,4.4rem);color:var(--ink);max-width:16ch;}
.s-head h2 em{font-style:italic;color:var(--accent);}

/* thread divider between sections */
.divider{position:relative;z-index:2;color:var(--accent);line-height:0;}
.divider svg{display:block;width:100%;height:auto;}

/* ============ craft intro ============ */
.craft{background:var(--surface);}
.craft .craft-grid{
  display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(34px,6vw,84px);align-items:start;
}
@media (max-width:840px){.craft .craft-grid{grid-template-columns:1fr;}}
.craft .craft-lead h2{font-size:clamp(2.2rem,5.4vw,3.8rem);color:var(--ink);}
.craft .craft-lead h2 em{font-style:italic;color:var(--accent);}
.craft .craft-lead .label{margin-bottom:20px;}
.craft .craft-body p{
  font-size:1.12rem;line-height:1.78;color:var(--ink);margin:0 0 22px;font-weight:300;
}
.craft .craft-body p:first-child::first-letter{
  font-family:var(--font-display);font-weight:500;font-style:italic;
  font-size:3.6em;line-height:.78;float:left;margin:.04em .12em 0 0;color:var(--accent);
}
.craft .craft-body p.byline{
  font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--ink-soft);margin-top:30px;
}

/* ============ services menu ============ */
.menu{background:var(--plum);color:var(--cream);}
.menu .label{color:var(--brass-light);}
.menu .s-head h2{color:var(--cream);}
.menu .s-head h2 em{color:var(--brass-light);}
.menu .menu-note{color:#d9c6cf;font-style:italic;font-family:var(--font-display);
  font-size:1.18rem;max-width:46ch;margin:-22px 0 46px;}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,80px);}
@media (max-width:780px){.menu-cols{grid-template-columns:1fr;gap:42px;}}
.menu-group{margin-bottom:38px;}
.menu-group:last-child{margin-bottom:0;}
.menu-group h3{
  font-family:var(--font-label);font-weight:500;font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brass-light);margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid rgba(214,169,104,.3);
}
.menu-item{
  display:flex;align-items:baseline;gap:10px;padding:9px 0;
}
.menu-item .m-name{font-family:var(--font-display);font-size:1.32rem;color:var(--cream);white-space:nowrap;}
.menu-item .m-dots{flex:1;border-bottom:1px dotted rgba(251,244,237,.32);transform:translateY(-4px);min-width:18px;}
.menu-item .m-price{font-family:var(--font-label);font-weight:400;font-size:.95rem;letter-spacing:.06em;color:var(--brass-light);white-space:nowrap;}
.menu-item .m-name small{font-family:var(--font-body);font-size:.78rem;color:#c8b3bd;letter-spacing:.02em;margin-left:8px;}
.menu-more{
  margin-top:8px;font-family:var(--font-display);font-style:italic;font-size:1.18rem;color:#d9c6cf;
}
.menu-more b{font-style:normal;color:var(--brass-light);font-family:var(--font-body);font-weight:400;}

/* ============ proof / why Ranna ============ */
.proof{background:var(--surface-2);overflow:hidden;}
.proof .proof-top{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,66px);}
.proof .proof-score{display:flex;align-items:baseline;gap:14px;}
.proof .proof-score .num{font-family:var(--font-display);font-weight:500;font-size:clamp(3.4rem,8vw,5.4rem);line-height:.9;color:var(--ink);}
.proof .proof-score .stars{color:var(--accent);font-size:1.2rem;letter-spacing:.1em;}
.proof .proof-score .of{font-family:var(--font-label);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);max-width:14ch;}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);}
@media (max-width:820px){.quotes{grid-template-columns:1fr;}}
.quote{position:relative;padding-top:36px;}
.quote::before{
  content:"\201C";position:absolute;top:-18px;left:-6px;
  font-family:var(--font-display);font-size:6rem;line-height:1;color:var(--accent);opacity:.34;
}
.quote p{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,3vw,2rem);line-height:1.4;color:var(--ink);margin:0 0 18px;
}
.quote cite{font-family:var(--font-label);font-style:normal;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);}
.quote cite b{color:var(--accent-deep);font-weight:600;}

/* ============ locations ============ */
.loc{background:var(--surface);}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);}
@media (max-width:820px){.loc-grid{grid-template-columns:1fr;}}
.loc-card{
  background:var(--surface-2);border:1px solid var(--line);
  padding:clamp(28px,4vw,42px);position:relative;
}
.loc-card .loc-tag{font-family:var(--font-label);font-weight:500;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-deep);}
.loc-card h3{font-family:var(--font-display);font-size:clamp(1.7rem,3.4vw,2.3rem);color:var(--ink);margin:12px 0 4px;}
.loc-card .addr{font-size:1.02rem;color:var(--ink);margin:0 0 4px;font-weight:300;}
.loc-card .addr a{color:var(--accent-deep);text-decoration:none;border-bottom:1px solid var(--line);}
.loc-card .addr a:hover{border-color:var(--accent);}
.loc-card .hours{margin:22px 0 0;border-top:1px solid var(--line);padding-top:18px;}
.loc-card .hours .hrow{display:flex;justify-content:space-between;gap:14px;padding:3px 0;font-size:.96rem;color:var(--ink-soft);}
.loc-card .hours .hrow b{color:var(--ink);font-weight:400;}
.loc-card .hours .hnote{font-family:var(--font-display);font-style:italic;font-size:.98rem;color:var(--ink-soft);margin-top:12px;}
.loc-card .loc-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;align-items:center;}
.loc-card a.loc-call{font-family:var(--font-label);font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:3px;}
.loc-card a.loc-call:hover{color:var(--accent-deep);}
.loc-card a.loc-map{font-family:var(--font-label);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;}
.loc-card a.loc-map:hover{color:var(--accent-deep);}

/* ============ final CTA ============ */
.close{background:var(--plum);color:var(--cream);text-align:center;position:relative;overflow:hidden;}
.close .thread-arc{width:min(620px,82vw);margin:0 auto 30px;color:var(--brass-light);}
.close .label{color:var(--brass-light);}
.close h2{font-size:clamp(2.6rem,7vw,5rem);color:var(--cream);margin:18px auto 0;max-width:18ch;}
.close h2 em{font-style:italic;color:var(--brass-light);}
.close .c-sub{font-family:var(--font-display);font-style:italic;font-size:clamp(1.2rem,2.6vw,1.6rem);color:#e7d6dd;max-width:40ch;margin:24px auto 0;}
.close .c-cta{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:40px;}
.close .btn-solid{background:var(--accent);color:var(--plum);box-shadow:0 10px 34px rgba(0,0,0,.3);}
.close .btn-solid:hover{background:var(--brass-light);}
.close .btn-line{color:var(--cream);border-color:var(--brass-light);}
.close .btn-line:hover{color:var(--brass-light);}

/* ============ footer ============ */
.foot{background:var(--plum-2);color:#d8c5cf;position:relative;z-index:2;padding:clamp(54px,7vw,84px) 0 36px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,5vw,56px);align-items:start;}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:34px;}}
.foot .f-mark .nm{font-family:'Pinyon Script',cursive;font-size:3.2rem;line-height:.8;color:var(--cream);}
.foot .f-mark .sub{font-family:var(--font-label);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--brass-light);margin-top:10px;}
.foot .f-mark p{font-size:.96rem;color:#bda9b4;margin:16px 0 0;max-width:30ch;font-weight:300;}
.foot h4{font-family:var(--font-label);font-weight:500;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-light);margin:0 0 16px;}
.foot a{color:#e7d6dd;text-decoration:none;}
.foot a:hover{color:var(--cream);}
.foot .f-col p{margin:0 0 9px;font-size:.97rem;font-weight:300;}
.foot-base{border-top:1px solid rgba(214,169,104,.22);margin-top:clamp(40px,5vw,60px);padding-top:24px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.08em;color:#a892a0;}
.foot-base a{color:#bda9b4;border-bottom:1px solid rgba(214,169,104,.4);}
.foot-base a:hover{color:var(--brass-light);}

/* ============ sticky mobile action bar ============ */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  background:var(--cream);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(42,22,34,.12);
}
.mbar a{
  flex:1;text-align:center;padding:15px 8px;text-decoration:none;
  font-family:var(--font-label);font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
}
.mbar .m-book{background:var(--ink);color:var(--cream);}
.mbar .m-call{color:var(--ink);}
@media (max-width:760px){
  .mbar{display:flex;}
  body{padding-bottom:54px;}
}

/* ============ reveal animation ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
.thread-draw path{stroke-dasharray:1;stroke-dashoffset:1;}
.thread-draw.in path{animation:draw 1.8s ease forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .thread-draw path{stroke-dashoffset:0;animation:none;}
}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}