/* Fine Line Henna · concept site by Brand Evolution */
:root{
  --paper:#F6EDE1;
  --paper-2:#EFE1CF;
  --ink:#2E1A12;
  --ink-soft:#553A2C;
  --muted:#6E5546;
  --henna:#7A2E14;
  --rust:#A9461F;
  --leaf:#56662E;
  --gold:#C59A45;
  --dark:#2A140D;
  --line:rgba(46,26,18,.15);
  --display:"Gloock", "Didot", Georgia, serif;
  --body:"Albert Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden}
svg{display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400;font-family:var(--display)}
em{font-style:normal;color:var(--henna)}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 14px}
.skip:focus{left:8px}
button,input,select{font:inherit;color:inherit}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;font-weight:700;font-size:15.5px;text-decoration:none;border:0;border-radius:999px;cursor:pointer;transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--henna);color:#FBF3E8}
.btn-solid:hover{background:#61230F}
.btn-line{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--dark);width:100%}
.btn-light:hover{background:var(--gold)}
.btn.sm{padding:10px 18px;font-size:14px}

/* NAV: glass tinted to the section below */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--gutter);color:var(--ink);transition:background .35s,box-shadow .35s,padding .35s,color .35s}
.nav.solid{background:rgba(246,237,225,.84);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line);padding-top:10px;padding-bottom:10px}
.nav.solid.on-dark{background:rgba(42,20,13,.82);color:var(--paper);box-shadow:0 1px 0 rgba(246,237,225,.14)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:22px}
.brand i{font-style:normal;color:var(--henna)}
.nav.on-dark .brand i{color:var(--gold)}
.brand svg{width:32px;height:32px;color:var(--henna)}
.nav.on-dark .brand svg{color:var(--gold)}
.nav nav{display:flex;gap:28px;font-size:15px;font-weight:600}
.nav nav a{text-decoration:none;opacity:.8}
.nav nav a:hover{opacity:1}
.nav-cta{font-weight:700;font-size:14px;text-decoration:none;padding:9px 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px currentColor}
.nav-cta:hover{background:var(--henna);color:#FBF3E8;box-shadow:none}
@media (max-width:860px){.nav nav{display:none}}

/* HERO: pinned hand */
.hand-scroll{position:relative;height:440vh;background:radial-gradient(55% 60% at 75% 50%,#F3DCC4,transparent 70%),var(--paper)}
.pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,4vw,64px);align-items:center;padding:88px var(--gutter) 28px;overflow:hidden}
.hero-copy{animation:heroIn .7s var(--ease) both;max-width:600px}
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kicker{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rust)}
.hero-copy h1{font-size:clamp(38px,5.2vw,74px);line-height:1.02;letter-spacing:-.01em;margin:14px 0 18px;text-wrap:balance}
.lede{font-size:clamp(16px,1.3vw,19px);color:var(--ink-soft);max-width:44ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.now{margin-top:28px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--line);max-width:460px}
.now-top{display:flex;align-items:baseline;gap:12px}
.now-no{font-family:var(--display);font-size:26px;color:var(--henna);line-height:1}
.now-name{font-weight:700}
.now-hint{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.now-line{font-size:14.5px;color:var(--muted);margin-top:4px;min-height:3em}
.now-bar{height:3px;border-radius:2px;background:var(--line);margin-top:10px;overflow:hidden}
.now-bar i{display:block;height:100%;background:var(--henna);transform-origin:0 50%;transform:scaleX(0)}
.hand-wrap{height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.hand{height:min(100%,780px);width:auto;max-width:100%;-webkit-mask-image:linear-gradient(to bottom,#000 93%,transparent);mask-image:linear-gradient(to bottom,#000 93%,transparent);overflow:visible}
.henna{--paste:#3E2A17;stroke:var(--paste)}
.henna .fill{fill:var(--paste)}
.henna .dot{fill:var(--paste);stroke:none}
.henna *{transition:stroke .9s,fill .9s}
@media (max-width:820px){
  .hand-scroll{height:380vh}
  .pin{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:72px var(--gutter) 18px;gap:6px}
  .hand-wrap{order:-1}
  .hand{height:100%;max-height:50svh}
  .hero-copy h1{font-size:clamp(28px,7.6vw,40px);margin:6px 0 8px}
  .lede{display:none}
  .hero-actions{margin-top:10px}
  .hero-actions .btn{padding:11px 18px;font-size:14.5px}
  .now{margin-top:12px;padding:10px 14px}
  .now-line{min-height:0;font-size:13.5px}
}
@media (max-width:820px) and (max-height:700px){.kicker,.hero-actions .btn-line{display:none}}

/* SECTION HEADS */
.sec-no{font-family:var(--display);font-size:20px;color:var(--rust)}
.sec-no.light{color:var(--gold)}
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;align-items:end;margin-bottom:38px}
.sec-head h2,.story h2{font-size:clamp(36px,5vw,66px);line-height:1.02;text-wrap:balance}
.sec-note{grid-column:2;color:var(--muted);max-width:58ch}
@media (max-width:620px){.sec-head{grid-template-columns:1fr}.sec-note{grid-column:1}}

/* STORY */
.story{padding:110px var(--gutter)}
.story h2{max-width:20ch;margin:10px 0 34px}
.story-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);font-size:clamp(17px,1.4vw,20px);color:var(--ink-soft)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:16px}
.ticks li{padding-left:28px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:50% 0 50% 50%;background:var(--leaf);transform:rotate(-45deg)}
.ticks b{color:var(--ink)}
@media (max-width:820px){.story-grid{grid-template-columns:1fr}}

/* PACKAGES (dark) */
.packages{background:var(--dark);color:var(--paper);padding:110px var(--gutter)}
.packages .sec-note{color:rgba(246,237,225,.72)}
.packages h2{color:var(--paper)}
.pk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px}
.pk{display:flex;flex-direction:column;gap:10px;padding:26px 22px;border-radius:24px;background:rgba(246,237,225,.06);box-shadow:inset 0 0 0 1px rgba(246,237,225,.14);transition:transform .4s var(--ease),background .4s}
.pk:hover{transform:translateY(-6px);background:rgba(246,237,225,.1)}
.pk.feature{background:linear-gradient(160deg,#7A2E14,#4A1A0B);box-shadow:none}
.pk-tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.pk h3{font-size:30px;line-height:1.1}
.pk-price{font-family:var(--display);font-size:40px;line-height:1;color:#FBF3E8}
.pk-price span{display:inline-block;transition:transform .3s var(--ease)}
.pk-price span.tick{animation:tick .4s var(--ease)}
@keyframes tick{40%{transform:translateY(-6px);color:var(--gold)}}
.pk-sub{font-size:14.5px;color:rgba(246,237,225,.78)}
.pk-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:600;padding:10px 0;border-top:1px solid rgba(246,237,225,.14);border-bottom:1px solid rgba(246,237,225,.14)}
.toggle{justify-content:flex-start;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--gold);flex:none}
.stepper{display:flex;align-items:center;gap:4px}
.stepper button{width:34px;height:34px;border-radius:50%;border:0;background:rgba(246,237,225,.12);color:var(--paper);cursor:pointer;font-size:18px}
.stepper button:hover{background:var(--gold);color:var(--dark)}
.stepper output{min-width:32px;text-align:center;font-weight:700}
.pk-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px;font-size:14.5px;color:rgba(246,237,225,.85);flex:1}
.pk-list li::before{content:"·";color:var(--gold);font-weight:800;margin-right:8px}

/* GALLERY */
.gallery{padding:110px var(--gutter)}
.gal-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-bottom:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;cursor:pointer;font-weight:600;font-size:14px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:transparent;transition:background .25s,color .25s,border-color .25s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.gal-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:18px}
.gcard{border-radius:22px;background:#FBF4EA;box-shadow:inset 0 0 0 1px var(--line);padding:14px 14px 16px;animation:gIn .6s var(--ease) both;animation-delay:calc(var(--i,0)*60ms);outline-offset:3px}
@keyframes gIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.gcard svg{width:100%;height:auto;aspect-ratio:1/1;border-radius:14px;background:radial-gradient(circle at 50% 45%,#F3DCC4,#ECCFB0)}
.gcard svg *{stroke:#5A2410}
.gcard svg .dot{fill:#5A2410;stroke:none}
.gcard svg .fill{fill:#5A2410;fill-opacity:.85}
.gcard h3{font-size:19px;margin-top:12px}
.gcard p{font-size:13.5px;color:var(--muted)}
.gcard svg [pathLength]{stroke-dasharray:1 1;stroke-dashoffset:0}
.gcard.redraw path,.gcard.redraw circle:not(.dot){animation:redraw 1.6s var(--ease) both}
@keyframes redraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* BOOKING */
.book{padding:110px var(--gutter);background:var(--paper-2)}
.book-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
.cal{background:#FBF4EA;border-radius:26px;padding:clamp(16px,2.4vw,28px);box-shadow:0 1px 0 var(--line)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-title{font-family:var(--display);font-size:26px}
.cal-nav{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:transparent;cursor:pointer;font-size:18px}
.cal-nav:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-dow,.cal-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-dow span{text-align:center;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);padding-bottom:4px}
.day{aspect-ratio:1/1;border:0;border-radius:12px;background:#fff;cursor:pointer;font-weight:600;font-size:15px;position:relative;transition:background .2s,color .2s,transform .2s}
.day:hover:not(:disabled){background:var(--gold)}
.day.few::after{content:"";position:absolute;left:50%;bottom:6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--rust)}
.day:disabled{background:transparent;color:rgba(46,26,18,.32);cursor:not-allowed}
.day.full:disabled{text-decoration:line-through}
.day[aria-pressed="true"]{background:var(--henna);color:#FBF3E8;transform:scale(1.06)}
.day.blank{visibility:hidden}
.cal-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px;font-size:13px;color:var(--muted)}
.k{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:-8px;vertical-align:middle}
.k.free{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}.k.few{background:var(--rust);border-radius:50%}.k.full{background:rgba(46,26,18,.18)}
.book-form fieldset{border:0;margin:0;padding:0;display:grid;gap:16px}
.book-form legend{font-family:var(--display);font-size:28px;margin-bottom:8px}
.picked{font-weight:700;color:var(--henna)}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{appearance:none;cursor:pointer;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:14px}
.slot[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.slot:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.book-form label{display:grid;gap:6px;font-weight:600;font-size:14.5px}
.book-form select,.book-form input[type=text]{padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-size:16px}
.estimate{font-size:16px}
.estimate b{font-family:var(--display);font-size:30px;font-weight:400;color:var(--henna);margin-left:6px}
.form-msg{font-size:14.5px;min-height:1.4em}
.form-msg.err{color:#A3261A}
.form-msg.ok{color:var(--leaf);font-weight:600}
@media (max-width:860px){.book-grid{grid-template-columns:1fr}}
@media (max-width:400px){.cal-dow,.cal-days{gap:3px}.day{font-size:13.5px;border-radius:9px}}

/* AFTERCARE */
.aftercare{padding:110px var(--gutter)}
.ac-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,60px);align-items:center}
.stain-art{width:min(100%,340px);margin:0 auto 18px;height:auto}
.stain-g{--st:#E07B2A;stroke:var(--st);transition:stroke .8s}
.stain-g .dot{fill:var(--st);stroke:none;transition:fill .8s}
.stain-g .fill{fill:var(--st);transition:fill .8s}
.stain-label{display:block;font-weight:600;margin-bottom:10px}
.stain-label b{color:var(--henna)}
#stain{width:100%;appearance:none;-webkit-appearance:none;height:12px;border-radius:999px;background:linear-gradient(90deg,#E07B2A,#C2521E,#9C3418,#7A2414,#5C1C0E);outline-offset:6px}
#stain::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);cursor:grab}
#stain::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);cursor:grab}
.stain-ticks{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--muted);margin-top:8px}
.ac-tip{padding:24px;border-radius:22px;background:#FBF4EA;box-shadow:inset 0 0 0 1px var(--line);margin-bottom:20px}
.ac-stage{font-family:var(--display);font-size:30px;color:var(--henna);margin-bottom:6px}
.tips{margin:0;padding:0 0 0 22px;display:grid;gap:10px;color:var(--ink-soft)}
.tips b{color:var(--ink)}
.ac-right{min-width:0}
@media (max-width:820px){.ac-grid{grid-template-columns:1fr}}

/* FOOTER */
.foot{background:var(--dark);color:var(--paper);padding:70px var(--gutter) 90px;overflow:hidden}
.foot-big{font-family:var(--display);font-size:clamp(40px,9.4vw,150px);line-height:.95;color:var(--gold);white-space:nowrap}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;margin-top:30px;font-size:15px}
.foot address{font-style:normal;opacity:.85}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot nav a{text-decoration:none;opacity:.8}
.foot nav a:hover{opacity:1;color:var(--gold)}

.concept-badge{position:fixed;left:14px;bottom:14px;z-index:60;font-size:12px;font-weight:700;text-decoration:none;background:rgba(42,20,13,.9);color:var(--paper);padding:8px 12px;border-radius:999px}
.concept-badge:hover{background:var(--henna)}

.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hand-scroll{height:auto}
  .pin{position:relative;height:auto;min-height:100svh}
  .hero-copy,.gcard{animation:none}
  .gcard.redraw path,.gcard.redraw circle{animation:none!important}
  .btn,.pk,.henna *{transition:none}
  .now-hint{display:none}
}
/* phone: keep the hero step card clear of the concept badge */
@media (max-width:820px){.pin{padding-bottom:62px}}

/* story photos */
.story-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,20px);margin-top:clamp(36px,5vw,60px)}
.story-photos img{display:block;width:100%;height:auto;aspect-ratio:9/7;object-fit:cover;border-radius:14px;background:#efe6d6}
@media (max-width:820px){.story-photos{grid-template-columns:1fr 1fr}.story-photos img:first-child{grid-column:1/-1}}

/* aftercare: photo of a real stain, one frame per stage, crossfaded */
.stain-photo{position:relative;aspect-ratio:1;border-radius:24px;overflow:hidden;box-shadow:0 18px 40px -26px rgba(46,26,18,.45);background:#F3E6CB}
.stain-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.stain-photo img.on{opacity:1}
@media (prefers-reduced-motion:reduce){.stain-photo img{transition:none}}
.gcard.pre path,.gcard.pre circle:not(.dot){stroke-dashoffset:1}  /* phones: blank until the card scrolls in and draws */