/* ==========================================================================
   20. FUNCTIONAL LAYER (v4) — quiz engine, forms, booking, blog, legal
   Purely additive. No existing selector is overridden.
   ========================================================================== */

/* ---------- skip link ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--terracotta);color:#fff;
  padding:12px 20px;border-radius:0 0 12px 12px;font-size:13px;font-weight:600;transition:top .2s var(--ease)}
.skip:focus{top:0}

/* ---------- QUIZ ENGINE ---------- */
.qhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.qhead .step{font-size:10.5px;font-weight:600;letter-spacing:var(--track);text-transform:uppercase;color:var(--violet)}
.qhead .pct{font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
#quiz-body .qbar{margin-bottom:20px}
#quiz-body .qbar i{transition:width .45s var(--ease)}
.qcard.picked{background:var(--plum);color:var(--ivory);border-color:var(--plum)}
.qcard.picked span{opacity:1;color:var(--ivory)}
.qcard{margin-bottom:9px}
.qcard:last-of-type{margin-bottom:0}
.qnav{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.qback{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:8px 2px;
  font-size:12.5px;font-weight:600;color:var(--violet);letter-spacing:.02em}
.qback:hover{color:var(--terracotta)}
.qback svg{transition:transform .25s var(--ease)}
.qback:hover svg{transform:translateX(-4px)}
.qnav .spacer{margin-left:auto}
.qnote{font-size:12px;color:var(--muted);font-style:italic;margin:14px 0 0;text-align:center}

/* result screen */
.rescard{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);
  padding:24px 24px 22px;box-shadow:var(--sh-1);margin-bottom:16px}
.rescard .ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.rescard .ico svg{width:24px;height:24px}
.rescard h3{margin-bottom:8px}
.rescard .kick{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);
  font-weight:600;margin-bottom:14px}
.rescard p{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:0}
.res-second{display:flex;align-items:flex-start;gap:13px;border:1px dashed var(--line-strong);
  border-radius:var(--r-sm);padding:15px 17px;margin-bottom:18px;background:rgba(238,226,234,.42)}
.res-second .ic2{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;background:var(--white);color:var(--mulberry)}
.res-second .ic2 svg{width:17px;height:17px}
.res-second b{display:block;font-size:13.5px;color:var(--plum);margin-bottom:2px}
.res-second span{font-size:12.5px;color:var(--muted);line-height:1.55}
.res-answers{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.res-answers summary{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--violet);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.res-answers summary::-webkit-details-marker{display:none}
.res-answers summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-left:auto;transition:transform .25s var(--ease)}
.res-answers[open] summary::after{transform:rotate(-135deg)}
.res-answers ol{margin:14px 0 0;padding-left:18px}
.res-answers li{font-size:12.5px;color:var(--muted);margin-bottom:8px;line-height:1.55}
.res-answers li b{color:var(--plum);font-weight:600}
.qstack{display:flex;flex-direction:column;gap:9px}
.qstack .btn{width:100%;justify-content:center}

/* ---------- FORM STATES ---------- */
.fld .err{display:none;font-size:11.5px;color:#B4432B;margin-top:6px;font-weight:600;letter-spacing:.01em}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:#C0563A;background:rgba(200,107,66,.05)}
.fld.bad .err{display:block}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.formnote{font-size:11.5px;color:var(--muted);line-height:1.6;margin:14px 0 0}
.formnote a{color:var(--mulberry);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.btn[aria-busy="true"]{opacity:.65;pointer-events:none}
.btn .spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);
  border-top-color:currentColor;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.done{text-align:center;padding:16px 4px 6px;animation:fade .4s var(--ease)}
.done .tick{width:64px;height:64px;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(140deg,var(--lilac-lt),#E7D7E1);color:var(--plum)}
.done .tick svg{width:30px;height:30px}
.done h3{margin-bottom:10px}
.done p{font-size:14px;color:var(--muted);max-width:44ch;margin-inline:auto}
.done .btn{margin-top:6px}
.on-dark .done p{color:rgba(243,233,230,.82)}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:1200;
  background:var(--night);color:var(--ivory);padding:13px 22px;border-radius:100px;font-size:13px;
  font-weight:600;box-shadow:0 18px 44px -18px rgba(0,0,0,.7);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- BOOKING ---------- */
.bookwrap{position:relative;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);
  background:var(--white);min-height:min(640px,74vh)}
.bookwrap iframe{width:100%;height:min(640px,74vh);border:0;display:block}
.bookload{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:var(--cream);color:var(--muted);font-size:13px;text-align:center;padding:24px}
.bookload .spin2{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--lilac);
  border-top-color:var(--terracotta);animation:spin .8s linear infinite}
.bookwrap.ready .bookload{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.bookmeta{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted);font-style:italic;margin-top:16px;text-align:center}
.bookmeta b{color:var(--plum);font-style:normal;font-weight:600}
.bookalt{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}

/* ---------- BLOG ARTICLE MODAL ---------- */
.artbody{max-width:66ch}
.artbody h4{font-family:'Fraunces',Georgia,serif;font-size:21px;font-weight:500;color:var(--plum);
  margin:30px 0 12px;letter-spacing:-.015em;line-height:1.25}
.artbody h4:first-child{margin-top:0}
.artbody p{font-size:15px;line-height:1.78;color:var(--ink);margin-bottom:1.15em}
.artbody ul{margin:0 0 1.15em;padding-left:20px}
.artbody li{font-size:15px;line-height:1.7;color:var(--ink);margin-bottom:9px}
.artbody blockquote{margin:26px 0;padding:20px 24px;border-left:3px solid var(--terracotta);
  background:var(--lilac-lt);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-family:'Fraunces',Georgia,serif;font-size:18px;font-style:italic;color:var(--plum);line-height:1.5}
.artmeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;
  color:rgba(216,193,207,.85);margin-top:14px;position:relative}
.artshare{display:flex;gap:8px;align-items:center;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.artshare span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);font-weight:600;margin-right:4px}
.artshare a,.artshare button{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--line-strong);background:var(--white);color:var(--mulberry);
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.artshare a:hover,.artshare button:hover{background:var(--plum);color:var(--ivory);border-color:var(--plum);transform:translateY(-2px)}

/* ---------- LEGAL MODAL ---------- */
.legal h4{font-family:'Montserrat';font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--plum);margin:26px 0 10px}
.legal h4:first-child{margin-top:0}
.legal p,.legal li{font-size:13.5px;line-height:1.75;color:var(--muted)}
.legal ul{padding-left:19px;margin-bottom:1.1em}
.legal li{margin-bottom:7px}
.legal .upd{font-size:11.5px;font-style:italic;color:var(--violet);margin-bottom:22px}

/* ---------- EMPTY STATE ---------- */
.empty{text-align:center;padding:56px 24px;border:1px dashed var(--line-strong);border-radius:var(--r);
  background:var(--white)}
.empty b{display:block;font-family:'Fraunces',serif;font-size:21px;color:var(--plum);margin-bottom:8px;font-weight:500}
.empty p{font-size:13.5px;color:var(--muted);margin-bottom:18px;max-width:40ch;margin-inline:auto}

/* ---------- COMING SOON ---------- */
.soon{position:fixed;inset:0;z-index:2000;background:var(--night);color:var(--ivory);
  display:none;align-items:center;overflow-y:auto}
body.soon-on .soon{display:flex}
body.soon-on>header,body.soon-on>main,body.soon-on>footer,body.soon-on>.progress,body.soon-on>.mobile{display:none}
.soon-in{position:relative;z-index:3;max-width:760px;margin:auto;padding:clamp(48px,8vw,80px) var(--gut);width:100%}
.soon h1{font-size:clamp(38px,6.4vw,76px);margin-bottom:18px}
.soon .sub2{font-family:'Fraunces',serif;font-size:clamp(19px,2.6vw,28px);font-style:italic;
  color:var(--lilac);margin-bottom:22px}
.soon p{max-width:52ch;color:rgba(243,233,230,.82)}
.soon .logo{margin-bottom:clamp(30px,5vw,46px);align-items:flex-start}
.soon .logo .m{font-size:40px}
.soon .logo-img{height:76px}
.soon .nform{margin-top:26px;max-width:470px}
.soon-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(216,193,207,.16);font-size:13px}
.soon-links a{color:rgba(216,193,207,.85);display:inline-flex;align-items:center;gap:8px;font-weight:600}
.soon-links a:hover{color:var(--terracotta)}
.soon .tex{z-index:1}

/* ---------- misc ---------- */
.nav a[aria-current="page"]{color:var(--terracotta)}
.pill-count{font-size:10px;opacity:.6;margin-left:5px;font-weight:600}
.post{cursor:pointer}
.feat{cursor:pointer}
.mod:focus{outline:none}
@media (max-width:700px){
  .bookwrap,.bookwrap iframe{min-height:0;height:min(560px,68vh)}
  .rescard{padding:20px 20px 18px}
  .artbody p,.artbody li{font-size:15px}
  .soon .logo .m{font-size:32px}
  .soon .logo-img{height:60px}
}