/* Mane Escape Studio, shared polish layer.
   Linked after each page's own <style>, so it wins at equal specificity. The pages keep their own CSS;
   this file only refines it. Sections: 1 tokens and seasons, 2 buttons, 3 surfaces and type,
   4 seasonal flourishes, 5 motion and WebGL hooks, 6 fixes.
   The season is chosen in /assets/js/boot.js (one line). Written by Willow Creek Group. */

/* ---------- 1. tokens ---------- */
:root{
  /* the service pages use --clay and --mocha but never defined them (only the homepage did), so their
     hero breadcrumb fell back to ink on a dark photo and the "more services" underlines vanished */
  --clay:#C9A692; --mocha:#8A7566; --bone:#F9F6F2;
  /* blush reads beautifully as a fill, but as small text on cream it measured 2.1:1. These two keep the
     hue and clear the bar: deep for small text (4.5:1+ on cream and cream-2), em for display type (3:1+) */
  --blush-deep:#80594A;
  --blush-em:#A07762;
  --script-c:var(--blush-em);
  --line:rgba(62,49,42,.10);
  --shadow-1:0 1px 2px rgba(36,28,24,.05),0 8px 22px -12px rgba(36,28,24,.16);
  --shadow-2:0 2px 6px rgba(36,28,24,.05),0 26px 50px -22px rgba(62,49,42,.34);
  --dome:clamp(14px,2.4vw,32px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .21 0 0 0 0 .16 0 0 0 0 .13 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* seasonal slots. With no season they fall back to the salon's own palette */
  --season-1:#C9A692; --season-2:#8A7566; --season-3:#E4CDBE;
  --btn-soft:linear-gradient(135deg,#EAD5C7 0%,#D8B8A4 46%,#C69E87 100%);
  --btn-soft-hover:linear-gradient(135deg,#EDDACD 0%,#DBBCA8 38%,#BE947C 100%);
  --btn-soft-glow:rgba(150,100,75,.42);
  --season-glyph:none;
}

[data-season="autumn"]{
  --season-1:#B4602F;   /* burnt orange */
  --season-2:#8E3A2C;   /* brick */
  --season-3:#C8923F;   /* ochre */
  --script-c:#9E5634;   /* the hero's script line, warmed; 4.9:1 on cream */
  --btn-soft:linear-gradient(135deg,#F3D9BC 0%,#E6B98F 44%,#D39A6B 100%);
  --btn-soft-hover:linear-gradient(135deg,#F5DEC4 0%,#E8BD94 36%,#CC8E5C 100%);
  --btn-soft-glow:rgba(180,96,47,.40);
  --season-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.6 3.2C12.6 3.3 6.5 6.4 5.2 12.8c-.5 2.5.1 4.7 1.3 6.3l-2.4 2.4 1.1 1.1 2.4-2.4c1.6 1.2 3.8 1.8 6.3 1.3 6.4-1.3 9.5-7.4 9.6-15.4l.1-2.7zM8.7 18.2c1.9-4.1 5-7.8 9.1-11.1-3 3.8-5.8 7.4-8 11.9z'/%3E%3C/svg%3E");
}
[data-season="christmas"]{
  --season-1:#9E2B32;   /* cranberry */
  --season-2:#2F5140;   /* evergreen */
  --season-3:#C6A35C;   /* gold */
  --script-c:#8E2A31;
  --btn-soft:linear-gradient(135deg,#F4E8C9 0%,#E2C996 44%,#CDAB66 100%);
  --btn-soft-hover:linear-gradient(135deg,#F6ECD2 0%,#E5CC9A 36%,#C6A25A 100%);
  --btn-soft-glow:rgba(160,120,50,.42);
  --season-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 2.5v19M3.8 7.25l16.4 9.5M3.8 16.75l16.4-9.5M9.7 4.3 12 6.6l2.3-2.3M9.7 19.7 12 17.4l2.3 2.3M4.7 10.4l3.2-.8-.8-3.2M19.3 13.6l-3.2.8.8 3.2M4.7 13.6l3.2.8-.8 3.2M19.3 10.4l-3.2-.8.8-3.2'/%3E%3C/svg%3E");
}

/* ---------- 2. buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;border:0;line-height:1.2;
  padding:.92rem 1.75rem;letter-spacing:.17em;
  background:linear-gradient(180deg,#3D3029 0%,#241C18 60%,#1D1613 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 0 1px rgba(255,255,255,.04),
    0 1px 2px rgba(36,28,24,.2),0 10px 24px -12px rgba(36,28,24,.55);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1),background .35s,color .3s}
/* the sheen: a soft band of light that crosses the pill on hover, painted under the label */
.btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:46%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.2) 50%,transparent 82%);
  transform:translateX(-130%) skewX(-18deg);transition:transform .95s cubic-bezier(.22,1,.36,1)}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(270%) skewX(-18deg)}
.btn:hover{background:linear-gradient(180deg,#47382F 0%,#2B211C 60%,#211915 100%);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 4px rgba(36,28,24,.16),0 18px 34px -14px rgba(36,28,24,.55)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.12s}
.btn:focus-visible{outline:2px solid var(--blush-deep);outline-offset:3px}

/* soft: champagne (or copper in autumn, gold at Christmas) with dark ink text. It used to be cream text
   on blush at 2.1:1; ink on these gradients measures 6:1 or better */
.btn.soft{background:var(--btn-soft);color:var(--ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(90,55,35,.16),
    0 1px 2px rgba(90,55,35,.14),0 10px 24px -12px var(--btn-soft-glow)}
.btn.soft::after{background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.6) 50%,transparent 82%)}
.btn.soft:hover{background:var(--btn-soft-hover);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 4px rgba(90,55,35,.14),0 18px 34px -14px var(--btn-soft-glow)}

/* line: the ink fills up from the bottom on hover */
.btn.line{border:1.5px solid var(--ink);box-shadow:none;
  background:linear-gradient(var(--ink),var(--ink)) 50% 100%/100% 0% no-repeat;
  transition:background-size .5s cubic-bezier(.22,1,.36,1),color .35s,transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.btn.line::after{display:none}
.btn.line:hover{background:linear-gradient(var(--ink),var(--ink)) 50% 100%/100% 100% no-repeat;color:var(--cream)!important;
  box-shadow:0 14px 30px -16px rgba(36,28,24,.5)}

/* on the dark bands: a cream pill with a blush sheen */
.refer-band .btn,.sp-close .btn{background:linear-gradient(180deg,#FFFDFA 0%,#F1E9DF 100%);color:var(--ink)!important;
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(0,0,0,.2),0 14px 30px -14px rgba(0,0,0,.6)}
.refer-band .btn::after,.sp-close .btn::after{background:linear-gradient(105deg,transparent 18%,rgba(201,166,146,.5) 50%,transparent 82%)}
.refer-band .btn:hover,.sp-close .btn:hover{background:linear-gradient(180deg,#FFFFFF 0%,#F6EFE6 100%)}

.wide-cta{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#3D3029 0%,#241C18 60%,#1B1512 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 4px rgba(36,28,24,.18),0 16px 34px -16px rgba(36,28,24,.6);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.wide-cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.14) 50%,transparent 82%);
  transform:translateX(-130%) skewX(-18deg);transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.wide-cta:hover::after{transform:translateX(320%) skewX(-18deg)}
.wide-cta:hover{background:linear-gradient(180deg,#47382F 0%,#2B211C 60%,#1F1815 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 4px rgba(36,28,24,.16),0 22px 40px -16px rgba(36,28,24,.6)}
.dm-cta,.review-cta{position:relative;overflow:hidden;isolation:isolate}
.dm-cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.28) 50%,transparent 82%);
  transform:translateX(-130%) skewX(-18deg);transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.dm-cta:hover::after{transform:translateX(320%) skewX(-18deg)}
.review-cta{box-shadow:var(--shadow-1)}
.review-cta:hover{box-shadow:var(--shadow-2)}
.gbadge a{box-shadow:var(--shadow-1);transition:background .3s,box-shadow .3s,transform .3s}
.gbadge a:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.ba-btn,.lb-btn{box-shadow:0 1px 2px rgba(36,28,24,.08),0 8px 20px -10px rgba(36,28,24,.3);
  transition:background .3s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.ba-btn:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(36,28,24,.08),0 14px 26px -12px rgba(36,28,24,.35)}
.menu-btn{transition:background .3s,border-color .3s}
.menu-btn:hover{background:rgba(201,166,146,.14);border-color:rgba(36,28,24,.32)}
.soc{transition:background .3s,color .3s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.soc:hover{box-shadow:0 12px 24px -12px rgba(36,28,24,.45)}
.soc-btn:hover{box-shadow:0 12px 26px -14px rgba(36,28,24,.45)}
.faq-q{transition:color .3s}
.faq-q:hover{color:var(--blush-deep)}

/* ---------- 3. surfaces and type ---------- */
/* a whisper of paper grain on the light grounds, painted under the content */
.services,.team,.offers,.looks,.reels,.suites,.reviews,.ig,.faq,
.sp-body,.sp-artists,.sp-faq,.sp-nav{background-image:var(--grain)}

/* the salon's arch, used between sections: each light section rises into the one above it */
.team,.looks,.reels,.suites,.reviews,.faq{position:relative}
.team::before,.looks::before,.reels::before,.suites::before,.reviews::before,.faq::before{
  content:"";position:absolute;left:0;right:0;top:calc(var(--dome) * -1);height:calc(var(--dome) + 1px);
  background:inherit;border-radius:50% 50% 0 0 / 100% 100% 0 0;pointer-events:none}

.svc,.card,.offer,.pol,.q-card,.perks,.suite-form,.sp-prod-item,.sp-artistcard{border-color:var(--line);box-shadow:var(--shadow-1)}
.svc{transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s cubic-bezier(.22,1,.36,1),border-color .4s}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:rgba(201,166,146,.6)}
.card{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s,border-color .4s}
.card:hover{box-shadow:var(--shadow-2);border-color:rgba(201,166,146,.6)}
.offer{transition:box-shadow .5s,transform .5s cubic-bezier(.22,1,.36,1)}
.offer:hover{box-shadow:var(--shadow-2)}
.sp-prod-item{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.sp-prod-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}

/* six services sit three by two, not four and two orphans */
@media(min-width:900px){.svc-grid{grid-template-columns:repeat(3,1fr);gap:1.4rem}}

/* small blush text now uses the deeper blush; display type keeps a lighter one */
.label{color:var(--blush-deep)}
.visit .label{color:var(--blush)}
.card .role,.ba-cap .who,.q-card footer,.svc .svc-go,.card .igh a,.sp-prod-n,.offer-who,
.sp-nav a:hover,.sp-refer a:hover{color:var(--blush-deep)}
.sec-head h2 em,.chester-copy h2 em,.sp-faq h2 em{color:var(--blush-em)}
.giant .script{color:var(--script-c)}
.sp-lede::first-letter{color:var(--blush-em)}

.sec-head .label{display:inline-flex;align-items:center;gap:.75rem}
.sec-head .label::before,.sec-head .label::after{content:"";display:block;flex:0 0 auto;width:26px;height:1px;background:currentColor;opacity:.45}

header,.sp-top{transition:box-shadow .45s,background-color .45s}
header.is-scrolled,.sp-top.is-scrolled{background:rgba(249,246,242,.93);box-shadow:0 10px 24px -22px rgba(36,28,24,.45)}

:focus-visible{outline-color:var(--blush-deep)}

/* ---------- 4. seasonal flourishes (all of them key off --season-* and [data-season]) ---------- */
[data-season] .sec-head .label::before,[data-season] .sec-head .label::after{
  width:13px;height:13px;opacity:.95;background:var(--season-1);
  -webkit-mask:var(--season-glyph) center/contain no-repeat;mask:var(--season-glyph) center/contain no-repeat}
[data-season] .sec-head .label::after{transform:scaleX(-1);background:var(--season-3)}

[data-season] .marquee-track span.solid{display:inline-block;width:.6em;height:.6em;color:transparent;overflow:hidden;
  background:var(--season-1);-webkit-mask:var(--season-glyph) center/contain no-repeat;mask:var(--season-glyph) center/contain no-repeat}
[data-season] .marquee-track span.solid:nth-child(4n){background:var(--season-3)}

[data-season] header::after,[data-season] .sp-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--season-3) 20%,var(--season-1) 50%,var(--season-2) 80%,transparent 100%);opacity:.6}

[data-season] .q-card .qm{color:var(--season-1)}
[data-season] .offer li::before,[data-season] .sp-list li::before{background:var(--season-1)}
[data-season] .sp-body h2::before{background:linear-gradient(90deg,var(--season-1),var(--season-3))}
[data-season] .refer-band .rb-laurel{color:var(--season-3)}
[data-season="autumn"] ::selection{background:#E6B98F;color:var(--ink)}
[data-season="christmas"] ::selection{background:#E2C996;color:var(--ink)}

/* ---------- 5. motion and WebGL hooks (GSAP owns these properties when html.motion is set) ---------- */
.motion [data-reveal]{transition:none}
.motion .hero [data-hero]{transition:none}
.motion .marquee-track{animation:none}
.no-intro .intro{display:none}
.motion .sp-hero img{animation:none;transform:scale(1.2)}
.sp-body h2::before{width:var(--rule,42px)}
/* SplitText's line masks clip at the line box; give italic descenders room without moving the layout */
.me-line-mask{padding:.04em 0 .1em;margin:-.04em 0 -.1em}
.motion .visit-bg{top:-10%;bottom:-10%}

.me-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0}
.me-gl.on{opacity:1}
.hero.gl-on .hero-wash{visibility:hidden}
.me-gl-band{transition:opacity 1.2s ease}
.refer-band{position:relative;overflow:hidden}
.refer-band > .wrap{position:relative;z-index:1}

/* ---------- 5b. seasonal still lifes (decor.js), set where no word can reach them ---------- */
.me-decor{position:absolute;bottom:0;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* hero: crisp on the cream floor, above the fade, and sized from the room beside the team photo
   (760px wide from 975px up) so a pumpkin never stands in front of a person. Too little room below 1200px */
.me-decor--hero{z-index:3;bottom:0;width:min(400px,calc((100vw - 760px) / 2 - 16px))}
.me-decor--hero.me-decor--l{left:8px}
.me-decor--hero.me-decor--r{right:8px}
@media(max-width:1199px){.me-decor--hero{display:none}}
/* dark bands: in the side corners on wide screens, one centred under the content on narrow ones */
.me-decor--band{z-index:0;width:clamp(160px,15vw,290px)}
.me-decor--band.me-decor--l{left:clamp(8px,2vw,48px)}
.me-decor--band.me-decor--r{right:clamp(8px,2vw,48px)}
@media(max-width:1279px){
  .visit .me-decor--wide{display:none}
  .visit .me-decor--r{right:auto;left:calc(50% - 90px);width:180px}
  .visit.has-decor{padding-bottom:calc(var(--pad) + 118px)}
}
@media(max-width:999px){
  .sp-close .me-decor--wide{display:none}
  .sp-close .me-decor--r{right:auto;left:calc(50% - 80px);width:160px}
  .sp-close.has-decor{padding-bottom:calc(var(--pad) * .7 + 108px)}
}

/* ---------- 6. fixes ---------- */
/* iOS zooms the page when an input under 16px takes focus */
.suite-form input,.suite-form select{font-size:16px}

@media(prefers-reduced-motion:reduce){
  .btn::after,.wide-cta::after,.dm-cta::after{display:none}
  .svc:hover,.sp-prod-item:hover{transform:none}
}


/* Sept 24 2026, Willow Creek: keep the seasonal decor visible on phones and tablets.
   Small, tucked into the corners, and behind nothing clickable. */
@media (max-width:820px){
  .me-decor--hero{display:block;width:clamp(88px,23vw,170px);z-index:3;bottom:118px}
  .me-decor--hero.me-decor--l{left:2px}
  .me-decor--hero.me-decor--r{right:2px}
}
@media (max-width:1279px){
  .visit .me-decor--wide{display:block;width:clamp(110px,24vw,200px);left:6px;right:auto}
  .visit .me-decor--r{left:auto;right:6px;width:clamp(110px,24vw,200px)}
}
@media (max-width:999px){
  .sp-close .me-decor--wide{display:block;width:clamp(96px,22vw,180px);left:6px;right:auto}
  .sp-close .me-decor--r{left:auto;right:6px;width:clamp(96px,22vw,180px)}
}