/* ============================================================
   JIMMY BLENDS — shared styles
   System built from the logo: ink black, porcelain white,
   barbicide mint, deep teal. Expanded caps + signature script.
   Display type = Archivo stretched to 125% (logo's expanded caps).
   Script = Mr Dafoe (the "Blends" signature).
   ============================================================ */
:root{
  --ink:        #212021;
  --porcelain:  #f6f8f7;
  --card:       #ffffff;
  --foam:       #e7f2ef;
  --line:       #d5e2dd;
  --fg:         #212021;
  --fg-dim:     #55605c;
  --fg-faint:   #8da39c;
  --mint:       #6bc3b2;
  --teal:       #0a6250;
  --lite:       #f6f8f7;
  --lite-dim:   rgba(246,248,247,.72);
  --ok:         #0a6250;
  --err:        #b3402e;
  --cut:        14px; /* blade-cut corner size */
  --font-display:"Archivo",Arial,sans-serif;
  --font-script:"Mr Dafoe",cursive;
  --font-body:"Schibsted Grotesk",Helvetica,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--porcelain);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* faint paper grain so the porcelain doesn't read flat */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1}
::selection{background:var(--mint);color:var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---- clipper-fade strip: solid ink dissolving into dots ---- */
.fade-strip{
  height:14px;width:100%;position:relative;z-index:1;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    radial-gradient(circle, var(--ink) 1.5px, transparent 1.6px);
  background-size:12% 100%, 8px 8px;
  background-position:0 0, 0 55%;
  background-repeat:no-repeat, repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 0 22%,rgba(0,0,0,.8) 40%,rgba(0,0,0,.35) 65%,transparent 94%);
          mask-image:linear-gradient(90deg,#000 0 22%,rgba(0,0,0,.8) 40%,rgba(0,0,0,.35) 65%,transparent 94%);
}
.fade-strip--thin{height:8px;background-size:9% 100%, 6px 6px}
.fade-strip--in{transform:scaleX(-1)} /* gathers back to solid, into a dark section */

.wrap{max-width:1128px;margin:0 auto;padding:0 clamp(24px, 5.5vw, 48px)}

/* ============ NAV ============ */
nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.nav-mark{display:flex;align-items:center;text-decoration:none}
.nav-logo{height:62px;width:auto;display:block}
nav .nav-cta{
  font-family:var(--font-display);font-stretch:110%;font-weight:800;
  font-size:.92rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lite);background:var(--ink);
  padding:11px 20px 10px;text-decoration:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
nav .nav-cta:hover{background:var(--mint);color:var(--ink);transform:translateY(-1px)}
nav .nav-back{
  font-size:.85rem;color:var(--fg-dim);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:var(--foam);
  transition:border-color .15s,color .15s;
}
nav .nav-back:hover{border-color:var(--teal);color:var(--teal)}

/* ============ HERO ============ */
.hero{padding-top:64px;padding-bottom:76px;position:relative}
.hero-kicker{
  display:flex;align-items:center;gap:12px;
  color:var(--teal);font-weight:600;font-size:.8rem;
  letter-spacing:.28em;text-transform:uppercase;margin-bottom:20px;
}
.hero-kicker::before{content:"";width:34px;height:1px;background:var(--teal)}
/* the lockup: expanded caps with the signature script cutting across,
   echoing the logo's layered-print treatment */
.hero h1{
  font-family:var(--font-display);font-stretch:125%;font-weight:900;
  font-size:clamp(3.4rem, 12vw, 9.2rem);
  line-height:.9;letter-spacing:.005em;text-transform:uppercase;
  margin-left:-4px;position:relative;z-index:1;
}
.hero h1 .l2{
  display:block;font-family:var(--font-script);font-weight:400;
  text-transform:none;color:var(--mint);
  font-size:.5em;line-height:1;
  margin:-.42em 0 0 34%;transform:rotate(-4deg);
  text-shadow:.045em .045em 0 var(--ink);
}
.hero-sub{
  font-size:clamp(1.15rem, 2.6vw, 1.5rem);font-weight:500;
  color:var(--fg-dim);margin:30px 0 10px;
}
.hero-copy{max-width:520px;color:var(--fg-dim);margin-bottom:34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-block;position:relative;font-family:var(--font-display);font-stretch:110%;font-weight:800;
  font-size:1.02rem;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  padding:15px 28px 13px;text-decoration:none;cursor:pointer;border:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-ink{background:var(--ink);color:var(--lite)}
.btn-ink:hover{background:var(--mint);color:var(--ink);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--fg);clip-path:none}
.btn-ghost:hover{color:var(--teal)}
/* outlined buttons draw their notched border as one even-odd ring,
   so the cut corner and the edges are a single shape and can't misalign */
.btn-ghost::before{
  content:"";position:absolute;inset:0;background:currentColor;pointer-events:none;
  clip-path:polygon(evenodd,
    0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 0,
    1.5px 1.5px, calc(100% - 1.5px) 1.5px, calc(100% - 1.5px) calc(100% - 12.6px),
    calc(100% - 12.6px) calc(100% - 1.5px), 1.5px calc(100% - 1.5px), 1.5px 1.5px);
}
.hero-hours{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px}
.hour-chip{
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;
  font-size:.82rem;color:var(--fg-dim);background:var(--foam);
}
.hour-chip b{color:var(--ink);font-weight:600}

/* big script word in the hero background */
.hero-ghost{
  position:absolute;right:0;top:6%;pointer-events:none;user-select:none;
  font-family:var(--font-script);font-size:clamp(7rem,17vw,12rem);
  line-height:1;color:var(--mint);opacity:.24;transform:rotate(-9deg);
}

/* ============ SECTIONS ============ */
section{padding:76px 0}
.sec-head{margin-bottom:42px}
.sec-head .sec-script{
  display:block;font-family:var(--font-script);color:var(--teal);
  font-size:1.7rem;line-height:1.1;margin:0 0 4px 2px;
}
.sec-head h2{
  font-family:var(--font-display);font-stretch:125%;font-weight:900;text-transform:uppercase;
  font-size:clamp(2.2rem,5.4vw,3.6rem);line-height:.95;letter-spacing:.005em;
}

/* ---- price list ---- */
.menu{border-top:1px solid var(--line)}
.menu-row{
  display:flex;align-items:baseline;gap:14px;padding:24px 4px;
  border-bottom:1px solid var(--line);
}
.menu-row .name{
  font-family:var(--font-display);font-stretch:110%;font-weight:800;font-size:1.4rem;
  text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;
}
.menu-row .dots{flex:1;border-bottom:2px dotted var(--fg-faint);transform:translateY(-6px)}
.menu-row .price{
  font-family:var(--font-display);font-stretch:125%;font-weight:900;
  font-size:1.8rem;color:var(--teal);white-space:nowrap;
}
.menu-row .desc{display:block;font-family:var(--font-body);font-size:.86rem;color:var(--fg-dim);font-weight:400;text-transform:none;letter-spacing:0;white-space:normal;margin-top:2px;font-stretch:100%}
.menu-note{margin-top:18px;color:var(--fg-dim);font-size:.9rem}
.menu-note b{color:var(--ink)}
.menu-cta{margin-top:30px}

/* after hours — the ink panel */
.afterhours{
  margin-top:44px;background:var(--ink);color:var(--lite);
  padding:32px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
.afterhours h3{
  font-family:var(--font-display);font-stretch:115%;font-weight:800;font-size:1.8rem;
  text-transform:uppercase;letter-spacing:.02em;
}
.afterhours h3 .moon{color:var(--mint)}
.afterhours p{color:var(--lite-dim);max-width:480px;font-size:.94rem}
.afterhours .price-tag{
  font-family:var(--font-display);font-stretch:125%;font-weight:900;
  font-size:2.6rem;color:var(--mint);
}
.afterhours .btn-ghost{color:var(--lite)}
.afterhours .btn-ghost:hover{color:var(--mint)}

/* ============ BOOKING PAGE ============ */
.page-head{padding-top:48px;padding-bottom:34px}
.page-head .hero-kicker{margin-bottom:12px}
.page-head h2{
  font-family:var(--font-display);font-stretch:125%;font-weight:900;text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,4.4rem);line-height:.95;
}
.page-head .hero-hours{margin-top:22px}
.book-zone{padding-top:10px;padding-bottom:90px}

.booker{
  background:var(--card);border:1px solid var(--line);
  overflow:hidden;box-shadow:0 24px 60px rgba(10,98,80,.10);
}
.steps{display:flex;border-bottom:1px solid var(--line);background:var(--foam)}
.step-tab{
  flex:1;padding:16px 8px;text-align:center;font-family:var(--font-display);
  font-stretch:110%;font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:.92rem;
  color:var(--fg-faint);border-bottom:3px solid transparent;transition:color .2s,border-color .2s;
  cursor:pointer;user-select:none;
}
.step-tab .n{
  color:var(--teal);margin-right:8px;font-family:var(--font-script);
  font-weight:400;font-stretch:100%;font-size:1.15em;text-transform:none;letter-spacing:0;
}
.step-tab.active{color:var(--ink);border-bottom-color:var(--mint)}
.step-tab.done{color:var(--teal)}
.step-tab:not(.locked):not(.active):hover{color:var(--ink)}
.step-tab.locked{cursor:not-allowed;opacity:.55}
.booker-body{padding:34px clamp(20px,4vw,44px) 40px}
.pane{display:none;animation:rise .35s ease both}
.pane.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pane-title{
  font-family:var(--font-script);font-size:1.55rem;
  color:var(--teal);margin-bottom:22px;line-height:1.2;
}

/* service cards */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.svc{
  --ring:var(--line);
  text-align:left;position:relative;background:var(--porcelain);border:none;
  padding:21px 19px;cursor:pointer;color:var(--fg);
  font-family:var(--font-body);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:background .15s, transform .15s;
}
.svc::before{
  content:"";position:absolute;inset:0;background:var(--ring);pointer-events:none;
  transition:background .15s;
  clip-path:polygon(evenodd,
    0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 0,
    1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 13.4px),
    calc(100% - 13.4px) calc(100% - 1px), 1px calc(100% - 1px), 1px 1px);
}
.svc:hover{--ring:var(--mint);transform:translateY(-2px)}
.svc.selected{--ring:var(--teal);background:var(--foam)}
.svc .svc-name{
  font-family:var(--font-display);font-stretch:110%;font-weight:800;font-size:1.25rem;
  text-transform:uppercase;letter-spacing:.02em;display:block;
}
.svc .svc-desc{color:var(--fg-dim);font-size:.84rem;display:block;margin:4px 0 12px}
.svc .svc-price{
  font-family:var(--font-display);font-stretch:125%;font-weight:900;
  font-size:1.65rem;color:var(--teal);
}

/* calendar + time */
.picker{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:32px;align-items:start}
@media (max-width:820px){.picker{grid-template-columns:1fr}}
.cal{
  border:1px solid var(--line);
  background:var(--porcelain);padding:18px 18px 14px;
}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}
.cal-title{
  font-family:var(--font-display);font-stretch:115%;font-weight:800;font-size:1.4rem;
  text-transform:uppercase;letter-spacing:.04em;line-height:1;
}
.cal-title .yr{color:var(--teal);font-family:var(--font-script);font-weight:400;font-size:1.1rem;margin-left:8px;text-transform:none;letter-spacing:0;font-stretch:100%}
.cal-nav{display:flex;gap:8px}
.cal-btn{
  width:36px;height:36px;border:1px solid var(--line);
  background:var(--card);color:var(--fg);cursor:pointer;font-size:1.05rem;line-height:1;
  transition:border-color .15s,color .15s;
}
.cal-btn:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.cal-btn:disabled{opacity:.3;cursor:not-allowed}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{
  text-align:center;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-faint);padding:6px 0 8px;
}
.cal-day{
  position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:transparent;
  color:var(--fg);font-family:var(--font-body);font-size:.95rem;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.cal-day:hover:not(:disabled):not(.selected){border-color:var(--mint);background:var(--foam)}
.cal-day.selected{background:var(--mint);color:var(--ink);font-weight:700;border-color:var(--teal)}
.cal-day.today::after{
  content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--teal);
}
.cal-day.selected.today::after{background:var(--ink)}
.cal-day:disabled{color:var(--fg-faint);opacity:.35;cursor:not-allowed}
.cal-hint{margin-top:12px;font-size:.76rem;color:var(--fg-faint);text-align:center}
.slot-zone{min-width:0}
.slot-label{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:12px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.slot{
  padding:11px 6px;border:1px solid var(--line);background:var(--porcelain);
  color:var(--fg);cursor:pointer;font-family:var(--font-body);font-size:.92rem;font-weight:500;
  transition:border-color .15s, background .15s;
}
.slot:hover{border-color:var(--teal)}
.slot.selected{border-color:var(--teal);background:var(--mint);color:var(--ink);font-weight:700}
.slot:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.slot-empty{color:var(--fg-dim);font-size:.92rem;padding:10px 0}

/* form */
.frm{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim)}
.field input,.field textarea{
  background:var(--porcelain);border:1px solid var(--line);
  padding:13px 14px;color:var(--fg);font-family:var(--font-body);font-size:1rem;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(107,195,178,.25)}
.field textarea{resize:vertical;min-height:72px}
.field .ferr{color:var(--err);font-size:.8rem;display:none}
.field.invalid input,.field.invalid textarea{border-color:var(--err)}
.field.invalid .ferr{display:block}

/* review + nav */
.review{
  border:1px solid var(--line);
  padding:20px 22px;margin-top:26px;background:var(--foam);
}
.review-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:.95rem;flex-wrap:wrap}
.review-row .k{color:var(--fg-dim)}
.review-row .v{font-weight:600;text-align:right}
.review-row .v.total{color:var(--teal);font-family:var(--font-display);font-stretch:125%;font-weight:900;font-size:1.35rem}
.deposit-note{
  margin-top:14px;font-size:.86rem;color:var(--fg-dim);
  display:flex;gap:8px;align-items:flex-start;
}
.deposit-note .tick{color:var(--ok)}
.booker-nav{display:flex;justify-content:space-between;align-items:center;margin-top:32px;gap:12px}
.booker-nav .hintline{font-size:.84rem;color:var(--fg-faint)}
.booker-nav .hintline a{color:var(--teal)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.form-error{
  display:none;margin-top:18px;border:1px solid var(--err);
  padding:12px 16px;color:var(--err);font-size:.9rem;background:rgba(179,64,46,.07);
}
.form-error.show{display:block}

/* success */
.success{text-align:center;padding:26px 0 10px}
.success .scissors{
  font-size:3rem;display:inline-block;color:var(--teal);transform:rotate(-20deg);
  animation:snip .8s ease both .2s;
}
@keyframes snip{0%{transform:rotate(-90deg) scale(.4);opacity:0}60%{transform:rotate(-8deg) scale(1.15)}100%{transform:rotate(-20deg) scale(1);opacity:1}}
.success h3{
  font-family:var(--font-display);font-stretch:125%;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.9rem,5vw,3rem);margin:10px 0 6px;color:var(--ink);
}
.success p{color:var(--fg-dim);max-width:460px;margin:0 auto}
.success .review{text-align:left;max-width:460px;margin:26px auto 0}

/* spinner */
.spin{
  display:inline-block;width:16px;height:16px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:whirl .7s linear infinite;vertical-align:-3px;margin-right:8px;
}
@keyframes whirl{to{transform:rotate(360deg)}}

/* ============ HOW IT WORKS ============ */
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.how{
  border:none;position:relative;padding:27px 23px;background:var(--card);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.how::before{
  content:"";position:absolute;inset:0;background:var(--line);pointer-events:none;
  clip-path:polygon(evenodd,
    0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 0,
    1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 15.4px),
    calc(100% - 15.4px) calc(100% - 1px), 1px calc(100% - 1px), 1px 1px);
}
.how .big-no{
  font-family:var(--font-script);font-size:2.6rem;color:var(--teal);line-height:1;
}
.how h3{
  font-family:var(--font-display);font-stretch:110%;font-weight:800;text-transform:uppercase;
  font-size:1.25rem;margin:12px 0 8px;letter-spacing:.02em;
}
.how p{color:var(--fg-dim);font-size:.92rem}

/* ============ FOOTER — the ink block ============ */
footer{padding:52px 0 60px;background:var(--ink);color:var(--lite)}
.foot{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.foot .fmark{margin-bottom:6px}
.foot-logo{height:92px;width:auto;display:block}
.foot .ftag{font-family:var(--font-script);font-size:1.25rem;color:var(--mint)}
.foot-col h4{
  font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mint);margin-bottom:12px;
}
.foot-col p, .foot-col a{color:var(--lite-dim);font-size:.9rem;text-decoration:none;display:block;line-height:1.9}
.foot-col a:hover{color:var(--mint)}
.fine{margin-top:36px;color:rgba(246,248,247,.45);font-size:.78rem}

@media (max-width:640px){
  .nav-logo{height:48px}
  .hero-kicker{font-size:.7rem;letter-spacing:.2em}
  .foot-logo{height:72px}
  .frm{grid-template-columns:1fr}
  .hero{padding-top:44px;padding-bottom:56px}
  .hero-ghost{display:none}
  .menu-row .name{font-size:1.1rem}
  .menu-row .price{font-size:1.4rem}
  .step-tab{font-size:.76rem;padding:13px 4px}
  .step-tab .n{display:none}
  .afterhours{flex-direction:column;align-items:flex-start}
  section{padding:56px 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}