@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/Lora-Variable.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Lato-Regular.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/Lato-Semibold.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Lato-Bold.woff2) format('woff2');}

*{box-sizing:border-box;margin:0;padding:0}
:root{--font-head:'Lora',Georgia,'Times New Roman',serif;--font-body:'Lato','Segoe UI',system-ui,-apple-system,sans-serif;--ink:#2E2E2E;--ink2:#6B6B6B;--line:#E4E1DC;--field:#948D80;--fieldbg:#FCFBF9;--accent:#E549A2;--accent2:#F6CF4B;--purple:#A449E5;--purple-soft:#F6F0FE;--bg:#FAF8F5;--green:#4E8C2B;--blue:#50AAE6;--teal:#61B3C5;--teal-deep:#3C6E7A;--red:#C82828}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.62;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Lora carries the display headings. Everything small, uppercase or interactive
   stays in Lato -- a serif at 11px reads as a mistake, not as elegance. */
.hero h1,.sect h2.big,.qform h2,.thanks h2,.qphoto .cap h3,.band h3,
.stephead h3,.sbody h4,.ev h4,.wy h4{font-family:var(--font-head);font-weight:600}
/* min(...,100%) not a bare 1140px: .wrap is a flex item of the body column, and a
   class rule outranks the body>* cap, so without this it inherits the stretched
   line width and ignores the window entirely. */
.wrap{max-width:min(1140px,100%);margin:0 auto;padding:0 24px}
header{background:#fff;color:var(--ink);padding:12px 0;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.lockup{display:flex;flex-direction:column;align-items:center;gap:2px}
.logo img{height:44px;width:auto;display:block}
.lockup em{font-style:normal;font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink);font-weight:700;white-space:nowrap}
.spk{width:58px;height:29px;fill:var(--accent2);flex:none}
/* Taylor, Aug 2026: the sparkles stay at every width. They used to be hidden below
   760px; she wants them, so they shrink instead. */
@media(max-width:760px){.spk{width:34px;height:17px}.lockup em{font-size:8.5px;letter-spacing:.8px}}
@media(max-width:560px){.spk{width:24px;height:12px}}
@media(max-width:400px){.spk{width:18px;height:9px}}
nav a{color:var(--ink2);text-decoration:none;margin-left:22px;font-size:14px;font-weight:600;white-space:nowrap}
nav a:hover{color:var(--accent)}
@media(max-width:760px){
  header .wrap{flex-direction:column;gap:8px;padding-bottom:2px}
  nav{display:flex;gap:16px;overflow-x:auto;max-width:100%;scrollbar-width:none;padding-bottom:2px}
  nav::-webkit-scrollbar{display:none}
  nav a{margin-left:0;font-size:13px}
}
.banner{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;margin:0;border-bottom:1px solid var(--line)}
.btile{position:relative;aspect-ratio:1/1;background-size:cover;background-position:center;background-color:#E4E1DC}
.btile::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(20,17,20,.72))}
.btile span{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:9px 8px;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;text-align:center;line-height:1.25;text-shadow:0 1px 3px rgba(0,0,0,.6)}
@media(max-width:1000px){
  .banner{display:flex;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .banner::-webkit-scrollbar{display:none}
  .btile{flex:0 0 168px;aspect-ratio:auto;height:168px;scroll-snap-align:start}
}
@media(max-width:560px){
  .btile{flex:0 0 132px;height:132px}
  .btile span{font-size:9.5px;padding:7px 6px}
}
.hero{padding:44px 0 26px;text-align:center}
.hero h1{font-size:43px;line-height:1.17;letter-spacing:-.2px;margin-bottom:15px}
.hero p{color:var(--ink2);font-size:16.5px;max-width:680px;margin:0 auto}
.badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
@media(max-width:560px){
  .badges{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding:0 2px}
  .badges::-webkit-scrollbar{display:none}
  .badge{white-space:nowrap;font-size:13.5px;padding:9px 16px}
  .hero{padding:28px 0 22px}
  .hero h1{font-size:26px}
}
.badge{background:#fff;border:2px solid var(--line);border-radius:100px;padding:11px 22px;font-size:15.5px;color:var(--ink2);box-shadow:0 2px 10px rgba(26,23,48,.05)}
.badge b{color:var(--ink);font-weight:700}
.badge:nth-child(1){border-color:var(--accent)}   .badge:nth-child(1) b{color:var(--accent)}
.badge:nth-child(2){border-color:var(--purple)}   .badge:nth-child(2) b{color:#7A2FB0}
.badge:nth-child(3){border-color:var(--blue)}     .badge:nth-child(3) b{color:#1F7FBF}
.badge:nth-child(4){border-color:var(--accent2)}  .badge:nth-child(4) b{color:#B07E10}
.sect{padding:22px 0 64px}
.sect h2.big{font-size:28px;line-height:1.25;letter-spacing:-.1px;margin-bottom:7px}
.sect .lede{color:var(--ink2);font-size:15.5px;margin-bottom:24px}

/* ---- quote card ---- */
.quote{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 14px 44px rgba(26,23,48,.08)}
@media(max-width:900px){.quote{grid-template-columns:minmax(0,1fr)}.hero h1{font-size:30px}}
.left{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
@media(max-width:900px){.left{border-right:none;border-bottom:1px solid var(--line)}}
/* Taylor, Aug 2026. On a phone the left column's service write-up sat above the
   whole form, so adding a second service updated a block that was by then off
   the top of the screen -- you could not read about the service you had just
   picked without scrolling back up. Below 900px the write-up therefore moves
   INSIDE the form, one collapsible panel under each service dropdown, and the
   "Not sure how long to book?" helper moves down to sit with the lengths it is
   about. She chose this from phone-quote-options.html: notes above "How long?",
   open to start, photo first, and the panel headed with the service name.
   Desktop is untouched -- .desc and the helper stay in the left column there.
   Both are rendered from the same D.singles[s] fields, so they cannot drift. */
@media(max-width:900px){.desc{display:none}}
/* The landing note that fills the space under the photo until a service is
   picked. Same look as .desc, but it is NOT phone-hidden -- on a phone the
   write-up moved into the form, so this is the only thing between the photo and
   "Build your quote", and it reads well there. rebuild() swaps the two. */
.intro{padding:20px 24px 24px}
.intro h5{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--ink2);margin-bottom:9px}
.intro .body{font-size:13.5px;color:var(--ink2);line-height:1.6}
.intro .body b{color:var(--ink)}
.qphoto{position:relative;aspect-ratio:1/1;background:linear-gradient(140deg,#A05096,#50AAE6 45%,#E6AA3C);flex:none}
@media(max-width:900px){.qphoto{aspect-ratio:1/1}}
.qphoto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .45s}
.qphoto img.on{opacity:1}
.qphoto .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;letter-spacing:2px;text-transform:uppercase;opacity:.45}
.qphoto .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 16px;background:linear-gradient(transparent,rgba(20,17,38,.9));color:#fff}
.qphoto .cap h3{font-size:21px;line-height:1.3}
.desc{padding:22px 24px 6px}
.desc h5{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--ink2);margin-bottom:9px}
.desc .body{font-size:13.5px;color:var(--ink2);line-height:1.6}
.desc .body b{color:var(--ink)}
.desc .body ul{margin:8px 0 8px 17px}
.desc .body li{margin-bottom:2px}
.gtog{margin-top:14px;width:100%;padding:10px 12px;border:1.5px solid var(--line);background:#fff;border-radius:9px;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;display:flex;justify-content:space-between;gap:8px}
.gtog:hover{border-color:var(--accent);color:var(--accent)}
.gbody{display:none;font-size:12.8px;color:var(--ink2);line-height:1.6;padding:14px 2px 2px}
.gbody.on{display:block}
.gbody h6{font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--ink);margin:13px 0 5px}
.gbody h6:first-child{margin-top:0}
.gbody p{margin-bottom:4px}
.gbody ul{margin:0 0 4px 16px}
.gbody li{margin-bottom:5px}
.gbody b{color:var(--ink)}
.est{margin:16px 24px 22px}
.esth{width:100%;padding:15px 18px;background:var(--purple-soft);border:2px solid var(--purple);border-radius:12px;font-family:inherit;font-size:15.5px;font-weight:700;color:#7A2FB0;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:10px;transition:.15s}
.esth:hover{background:var(--purple);color:#fff}
.est.on .esth{border-radius:12px 12px 0 0;background:var(--purple);color:#fff}
.esthl{display:flex;align-items:center;gap:11px}
.qic{width:23px;height:23px;flex:none}
.estarrow{width:21px;height:21px;flex:none;transition:transform .2s}
.est.on .estarrow{transform:rotate(180deg)}
.estb{display:none;padding:16px 18px 18px;border:2px solid var(--purple);border-top:none;border-radius:0 0 12px 12px;background:var(--purple-soft)}
.est.on .estb{display:block}
.estb label{margin-bottom:7px}
.estout{margin-top:12px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.estout b{color:var(--ink)}

/* ---- right column ---- */
.qform{padding:28px 26px;min-width:0}
.qform h2{font-size:22px;line-height:1.3;margin-bottom:5px}
.qform .sub{color:var(--ink2);font-size:13.5px;margin-bottom:20px}
label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--ink2);margin:0 0 7px}
select,input[type=number]{width:100%;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ink);border:1.5px solid var(--field);border-radius:10px;background:var(--fieldbg)}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
select:focus{outline:none;border-color:var(--accent)}
input:focus{outline:none;border-color:var(--purple)}
.field{margin-bottom:15px}
/* A service's notes, inline under the service they describe. Phone only -- see
   the note beside .left above. Kept in the markup at every width and hidden on
   desktop rather than being built and torn down, so there is nothing to go
   stale and no resize handler to get wrong. */
.npanel{display:none;margin-top:9px;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:#FCFBF9}
@media(max-width:900px){.npanel{display:block}}
.nhead{width:100%;display:flex;justify-content:space-between;align-items:center;gap:9px;padding:10px 12px;background:#FCFBF9;border:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);text-align:left;cursor:pointer;line-height:1.4}
.npanel.on .nhead{border-bottom:1px solid var(--line)}
.narr{flex:none;color:var(--ink2);font-size:11px;transition:transform .18s}
.npanel.on .narr{transform:rotate(180deg)}
.nbody{display:none;padding:12px;font-size:13px;color:var(--ink2);line-height:1.6}
.npanel.on .nbody{display:block}
.nbody b{color:var(--ink)}
.nbody ul{margin:8px 0 8px 17px}
.nbody li{margin-bottom:2px}
/* The helper is MOVED into #helperslot on a phone, not duplicated -- one #est,
   one #guests, so no duplicate ids and no second copy to keep in step. Its left
   column margins have to come off once it is inside the form's own padding. */
#helperslot .est{margin:0 0 4px}
.addbtn{width:100%;padding:11px;border:1.5px dashed #D6D2CB;background:transparent;border-radius:10px;color:var(--ink2);font-size:13.5px;font-family:inherit;font-weight:600;cursor:pointer}
.addbtn:hover{border-color:var(--accent);color:var(--accent);background:#FEF4FA}
#second,#third,#fourth{display:none;border-top:1px solid var(--line);margin-top:18px;padding-top:18px}
#second.on,#third.on,#fourth.on{display:block;animation:fade .3s}
#add3,#add4{margin-top:14px}
.ask{display:none;margin-top:13px;padding:12px 15px;background:var(--purple-soft);border-radius:10px;color:#8630C8;font-weight:600;font-size:14px;line-height:1.5}
.ask.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1}}
.rmv{background:none;border:none;color:var(--ink2);font-size:12.5px;cursor:pointer;text-decoration:underline;padding:0;font-family:inherit}
.price{margin-top:22px;padding:20px;background:#FDF6FA;border-radius:14px;text-align:center}
/* Taylor, Aug 2026: "Your price" over a bare dash read as broken rather than
   empty. The same pink box now carries a light line until a service is picked,
   and swaps to the real price the moment one is. Both live in the markup and
   rebuild() shows one or the other, so the box never changes size or colour --
   only what is inside it. The heading is Lora, like the other display headings;
   the sentence under it is Lato, like all the other small print. */
.waiting{display:none;padding:4px 6px}
.price.empty .waiting{display:block}
.price.empty .real{display:none}
.waiting h4{font-family:var(--font-head);font-weight:600;font-size:19px;line-height:1.3;color:var(--ink);margin-bottom:7px}
.waiting p{font-size:13.5px;color:var(--ink2);line-height:1.6}
.price .lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--ink2);font-weight:700}
.price .amt{font-size:42px;font-weight:700;letter-spacing:-1px;margin:3px 0 2px;color:var(--ink);font-variant-numeric:tabular-nums}
.price .note{font-size:12.5px;color:var(--ink2)}
.save{display:none;margin-top:11px;padding-top:11px;border-top:1px dashed #DCD7D0;font-size:14px;color:var(--green);font-weight:700}
.save.on{display:block}
.save span{font-weight:400;color:var(--ink2);font-size:12px;display:block;margin-top:2px}
.fine{text-align:center;font-size:12px;color:var(--ink2);margin-top:10px;line-height:1.5}
/* Taylor, Aug 2026: option C on desktop, option B on a phone. Same 17.5px type
   either way — only the height and corner radius change, so the button keeps its
   presence on a big screen without eating the top of a small one. */
.cta{display:block;width:100%;margin-top:11px;padding:20px 18px;background:var(--accent);color:#fff;border:none;border-radius:14px;font-size:17.5px;font-weight:700;font-family:inherit;cursor:pointer;line-height:1.35;letter-spacing:.2px;white-space:normal;overflow-wrap:break-word}
.cta:hover{background:#C33E8A}
/* Taylor, Aug 2026: the button may wrap to two lines rather than be shrunk to fit,
   so the phone rule changes height and corner radius only. */
@media(max-width:620px){.cta{padding:15px 18px;border-radius:12px}}

/* ---- services strip ---- */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.scard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.simg{aspect-ratio:1/1;background:linear-gradient(140deg,#A05096,#50AAE6);background-size:cover;background-position:center}
.sbody{padding:13px 15px 15px}
.sbody h4{font-size:16.5px;line-height:1.3;margin-bottom:5px}
.sbody p{font-size:12.5px;color:var(--ink2);line-height:1.5}
.fcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 26px;align-items:start}
@media(max-width:860px){.fcols{grid-template-columns:minmax(0,1fr)}}
.fcat{font-size:12px;text-transform:uppercase;letter-spacing:1.1px;color:var(--ink2);margin:26px 0 10px}
.fcol .fcat:first-child{margin-top:0}
.fgroup{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.fq{border-bottom:1px solid var(--line)}
.fq:last-child{border-bottom:none}
.fq summary{list-style:none;cursor:pointer;padding:14px 44px 14px 17px;font-size:14.5px;font-weight:600;position:relative}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:'+';position:absolute;right:17px;top:12px;font-size:19px;font-weight:400;color:var(--ink2)}
.fq[open] summary::after{content:'\2013'}
.fq summary:hover{color:var(--accent)}
.fq .fa{padding:0 17px 15px;font-size:13.2px;color:var(--ink2);line-height:1.6}
.fq .fa b{color:var(--ink)}
.fq .fa ol{margin:7px 0 0 18px}
.fq .fa ol li{margin-bottom:4px}

.about{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:26px;align-items:start}
@media(max-width:860px){.about{grid-template-columns:minmax(0,1fr)}}
.acard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.aphoto{position:relative;aspect-ratio:1/1;background:linear-gradient(150deg,#50AAE6,#A05096 55%,#C82828)}
.aphoto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.aph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;opacity:.5}
.ameta{padding:16px 17px}
.aname{font-weight:700;font-size:14.5px;margin-bottom:7px}
.arow{font-size:13px;color:var(--ink2);margin-bottom:4px}
.alink{display:inline-block;margin-top:9px;font-size:13px;color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(224,87,74,.35)}
.bio{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:0 12px 12px 0;padding:15px 18px;margin:4px 0 4px}
.bio h5{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--ink2);margin-bottom:6px}
.bio p{font-size:14.5px;color:var(--ink2);line-height:1.65;margin:0}
.astory p{font-size:15px;color:var(--ink2);line-height:1.7;margin-bottom:14px}
.astory p b{color:var(--ink)}
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:20px}
@media(max-width:620px){.why{grid-template-columns:minmax(0,1fr)}}
.wy{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.wy h4{font-size:15.5px;line-height:1.3;margin-bottom:5px}
.wy p{font-size:12.8px;color:var(--ink2);line-height:1.5}
.evgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.evgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.evgrid{grid-template-columns:minmax(0,1fr)}}
.ev{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 17px;border-left:4px solid var(--line)}
.ev:nth-child(6n+1){border-left-color:var(--accent)}
.ev:nth-child(6n+2){border-left-color:var(--purple)}
.ev:nth-child(6n+3){border-left-color:var(--blue)}
.ev:nth-child(6n+4){border-left-color:var(--accent2)}
.ev:nth-child(6n+5){border-left-color:var(--teal)}
.ev:nth-child(6n+6){border-left-color:var(--green)}

.ev h4{font-size:16.5px;line-height:1.3;margin-bottom:5px}
.ev p{font-size:12.8px;color:var(--ink2);line-height:1.5}

.bkwrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:start}
@media(max-width:900px){.bkwrap{grid-template-columns:minmax(0,1fr)}}
.bkquote{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;position:sticky;top:96px}
.bkquote h4{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--ink2);margin-bottom:12px}
.bkline{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:7px 0;border-bottom:1px dashed var(--line)}
.bkline b{font-weight:700}
.bktot{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:12px;border-top:2px solid var(--ink)}
.bktot span{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--ink2);font-weight:700}
.bktot b{font-size:30px;letter-spacing:-1px}
.bknote{margin-top:12px;font-size:12.4px;color:var(--ink2);line-height:1.55;background:#FBF9F6;border-radius:8px;padding:10px 12px}
.bkedit{display:block;margin-top:12px;font-size:13px;color:var(--accent);font-weight:700;text-decoration:none}
.bkform{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px}
.fld{margin-bottom:19px}
.fld label{display:block;font-size:13px;font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0;margin-bottom:3px}
.fld .req{color:var(--accent)}
.fld .hlp{font-size:12.2px;color:var(--ink2);margin-bottom:7px;line-height:1.45}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld input[type=date],.fld input[type=time],.fld textarea,.fld select{
  width:100%;padding:11px 13px;font-size:14.5px;font-family:inherit;color:var(--ink);border:1.5px solid var(--field);border-radius:9px;background:var(--fieldbg)}
/* height comes from each field's own rows= count, so a box's size says how much
   we actually expect someone to write. line-height is pinned so rows= is exact. */
.fld textarea{min-height:0;line-height:1.5;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--accent);border-width:2px;background:#fff}
/* calendar button on the left of the date, since that is where the picker drops */
.fld input[type=date]{position:relative;padding-left:44px}
.fld input[type=date]::-webkit-calendar-picker-indicator{position:absolute;left:12px;top:50%;transform:translateY(-50%);margin:0;padding:0;cursor:pointer;opacity:.65}
.fld input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:1}
.opt{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1.5px solid var(--field);border-radius:9px;margin-bottom:7px;cursor:pointer;font-size:14px;line-height:1.4;background:var(--fieldbg)}
.opt:hover{border-color:var(--accent);background:#FEF7FB}
.opt input{margin-top:2px;accent-color:var(--accent);flex:none}
.opt.on{border-color:var(--accent);background:#FEF4F9}
.chks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px}
@media(max-width:620px){.chks{grid-template-columns:minmax(0,1fr)}}
.chks .opt{margin-bottom:0}
.daybox{display:none;margin-top:9px;padding:12px 14px;background:var(--purple-soft);border:1.5px solid var(--purple);border-radius:9px;font-size:14px}
.daybox.on{display:block}
.daybox b{color:#7A2FB0;font-size:16px}
.endbox{display:none;margin-top:9px;padding:11px 14px;background:#F1F8F3;border:1.5px solid #9CCBA8;border-radius:9px;font-size:13.6px;color:#2C6B3F;line-height:1.6}
.endbox.on{display:block}
.endbox b{color:#1E5230}
.acrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;border:1.5px solid var(--line);border-radius:9px;margin-bottom:7px;font-size:14px}
.acrow select{width:auto;min-width:118px;padding:7px 10px;font-size:14px}
#fld_lengthcheck{margin-top:-12px}



.thanks{display:none;background:#fff;border:1px solid var(--line);border-radius:14px;padding:38px 34px;text-align:center}
.thanks.on{display:block;animation:fade .35s}
.thlogo{height:62px;width:auto;margin:0 auto 18px;display:block}
.thanks h2{font-size:38px;line-height:1.2;letter-spacing:-.2px;margin-bottom:10px}
.thconfirm{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:700;color:var(--green);margin-bottom:22px}
.thtick{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-size:17px}
.thlead{font-size:15.5px;color:var(--ink2);line-height:1.6;max-width:620px;margin:0 auto 8px}
.thnext{max-width:620px;margin:24px auto;padding:18px 20px;background:var(--purple-soft);border:1.5px solid var(--purple);border-radius:12px;text-align:left}
.thnext b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:#7A2FB0;margin-bottom:6px}
.thnext span{display:block;font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.5}
.thnext em{display:block;margin-top:8px;font-style:normal;font-size:13.5px;color:var(--ink2)}
.thsteps{list-style:none;counter-reset:th;max-width:620px;margin:0 auto 24px;padding:0;text-align:left}
.thsteps li{counter-increment:th;position:relative;padding:13px 0 13px 46px;border-bottom:1px solid var(--line)}
.thsteps li:last-child{border-bottom:none}
.thsteps li::before{content:counter(th);position:absolute;left:0;top:12px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.thsteps b{display:block;font-size:15px;margin-bottom:2px}
.thsteps span{font-size:13.6px;color:var(--ink2);line-height:1.55}
.thclose{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}
.thsign{font-size:13.6px;color:var(--ink2)}
.step{display:none;border-top:1px solid var(--line);padding-top:20px;margin-top:20px}
.step:first-child{border-top:none;padding-top:0;margin-top:0}
.step.on{display:block;animation:fade .28s}
.stephead h3{font-size:18px;line-height:1.3;margin-bottom:3px}
.stephead p{font-size:13.2px;color:var(--ink2);margin-bottom:18px}
.stepnext{width:100%;padding:13px;background:var(--purple);color:#fff;border:none;border-radius:11px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer}
.stepnext:hover{background:#8B34C4}
.fld.miss input,.fld.miss textarea,.fld.miss select,.fld.miss .addr input{border-color:#C0392B;background:#FEF6F5}
.missmsg{display:none;margin-top:10px;font-size:13.2px;color:#C0392B;font-weight:700}
.missmsg.on{display:block}
.addr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:11px}
.addr label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ink2)}
.addr label input{width:100%;padding:11px 13px;font-size:14.5px;font-family:inherit;color:var(--ink);border:1.5px solid var(--field);border-radius:9px;background:var(--fieldbg)}
.addr label input:focus{outline:none;border-color:var(--accent);border-width:2px;background:#fff}
.a-street,.a-apt,.a-zip{grid-column:1 / -1}
.asub{font-size:11.5px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink2);margin-top:-1px}
.travelfee{margin-top:10px;font-size:12.2px;color:var(--ink2);line-height:1.5;background:#FBF9F6;border-left:3px solid var(--accent2);border-radius:0 8px 8px 0;padding:9px 12px}
@media(max-width:520px){.addr{grid-template-columns:minmax(0,1fr)}}
.schfields input:focus,.schfields select:focus{outline:none;border-color:var(--accent);border-width:2px;background:#fff}
.schrow{border:1.5px solid var(--field);border-radius:10px;padding:12px 14px;margin-bottom:9px}
.schname{font-weight:700;font-size:14.5px;margin-bottom:9px}
.schfields{display:flex;gap:12px;flex-wrap:wrap}
.schfields label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ink2)}
.trio{display:inline-flex;align-items:stretch;border:1.5px solid var(--field);border-radius:8px;background:var(--fieldbg);overflow:hidden;height:40px}
.trio select{border:none;background:transparent;padding:0 2px;font-size:14.5px;font-family:inherit;color:var(--ink);
  appearance:none;text-align:center;text-align-last:center;cursor:pointer;height:100%}
.trio .th{width:38px;padding-left:8px}
.trio .tm{width:38px}
.trio .tap{width:50px;border-left:1px solid var(--line);margin-left:4px}
.trio select:focus{outline:none;background:#FDF2F8}
/* brief flash when the form fills AM/PM in for them, so they see it happen */
.trio .tap{transition:background-color .55s ease,color .55s ease}
.trio .tap.tflash{background:var(--purple-soft);color:#7A2FB0;font-weight:700;transition:none}
.trio:focus-within{border-color:var(--accent);border-width:2px;background:#fff}
.tsep{display:flex;align-items:center;font-weight:700;color:var(--ink2);font-size:14.5px}
.schdur .nx{color:#7A2FB0;font-weight:700}
.stime em{font-style:normal;color:#2C6B3F;font-weight:700}
.schfields input[type=number]{width:88px;padding:9px 10px;font-size:14.5px;font-family:inherit;border:1.5px solid var(--field);border-radius:8px;background:var(--fieldbg)}
.schdur{margin-top:7px;font-size:13px}
.schdur .ok{color:#2C6B3F;font-weight:700}
.schdur .bad{color:#C0392B;font-weight:700}
.schsum{display:none;margin-top:12px;padding:14px 16px;background:#F1F8F3;border:1.5px solid #9CCBA8;border-radius:10px}
.schsum.on{display:block}
.schhead{font-size:12px;text-transform:uppercase;letter-spacing:.9px;font-weight:700;color:#2C6B3F;margin-bottom:9px}
.schlist{list-style:none;margin:0;padding:0}
.schlist li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:8px 0;border-bottom:1px dashed #B9D9C3;font-size:14.5px;color:#1E5230}
.schlist li:last-child{border-bottom:none}
.ssvc{font-weight:700;color:#123D22;min-width:190px}
.ssvc em{font-style:normal;font-weight:700;color:#2C6B3F}
.stime{font-variant-numeric:tabular-nums}
.sdur{margin-left:auto;font-weight:700;background:#DCEEE2;border-radius:100px;padding:2px 11px;font-size:13px}
.schwarn{margin-top:9px;font-size:13px;color:#C0392B;font-weight:700}
.cond{display:none}
.cond.on{display:block}
.fnote{padding:13px 15px;background:var(--purple-soft);border:1.5px solid var(--purple);border-radius:9px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.fnote b{color:#7A2FB0}
.fld.nolab{margin-top:-8px}
.terms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 26px;align-items:start}
@media(max-width:860px){.terms{grid-template-columns:minmax(0,1fr);gap:0}}
.tsec{break-inside:avoid;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:16px}
.tsec h3{font-size:13.5px;color:var(--accent);margin-bottom:10px;font-weight:700}
.tsec p{font-size:13.4px;color:var(--ink2);line-height:1.65;margin-bottom:11px}
.tsec p:last-child{margin-bottom:0}
.tsec p b{color:var(--ink)}
a.band{display:block;max-width:min(600px,100%);margin:0 auto 64px;background:#D32323;color:#fff;border-radius:16px;padding:20px 28px;text-align:center;text-decoration:none;transition:.15s}
a.band:hover{background:#B81D1D;transform:translateY(-2px);box-shadow:0 10px 28px rgba(211,35,35,.28)}
.ylogo{width:24px;height:24px;fill:#fff;vertical-align:-4px;margin-right:9px}
.bandcta{display:inline-block;margin-top:10px;font-size:14px;font-weight:700;color:#fff;border-bottom:2px solid rgba(255,255,255,.55);padding-bottom:2px}
.band h3{font-size:21px;line-height:1.3;margin-bottom:6px}
.band p{color:#FFE0E0;font-size:14px}
footer{background:var(--teal-deep);color:#CFE6EC;padding:32px 0;font-size:13.5px;text-align:center}footer b{color:#fff}
.flag{background:#FDF7EA;border:1px solid #EBD3A0;border-radius:10px;padding:14px 16px;font-size:13.5px;color:#7A5C10;margin:22px 0 0;line-height:1.6}

/* ---- added by build_site.py: multi-page bits ---- */
nav a.here{color:var(--accent);font-weight:700}
.morelink{display:inline-block;margin-top:16px;padding:12px 20px;border:2px solid var(--purple);
  color:var(--purple);border-radius:11px;font-weight:700;font-size:14.5px;text-decoration:none}
.morelink:hover{background:var(--purple);color:#fff}
.fteaser{max-width:760px}
a.cta{text-decoration:none;text-align:center;box-sizing:border-box}
.pagehead{padding:34px 0 4px}
.pagehead h1{font-size:34px;margin:0 0 8px;letter-spacing:-.5px}
.pagehead p{margin:0;color:var(--ink2);font-size:15.5px;max-width:640px}
/* ---- privacy policy ---- */
/* One column, unlike Terms. Terms is four policies you scan for the one you
   need; this is prose you read top to bottom, so a single measured column at a
   comfortable reading width beats two. */
.privacy{max-width:min(720px,100%);margin:22px 0 10px}
.privacy .tsec{padding:20px 22px;margin-bottom:14px}
.privacy .tsec h3{font-size:15px;margin-bottom:11px}
.privacy .tsec p{font-size:14.2px;line-height:1.7}
.privacy .tsec ul{margin:0 0 11px 19px;font-size:14.2px;color:var(--ink2);line-height:1.7}
.privacy .tsec li{margin-bottom:5px;padding-left:2px}
.privacy .tsec li:last-child{margin-bottom:0}
.privacy .tsec ul+p{margin-top:0}
/* The "what changed" banner at the top of the privacy page. Purple rather than
   pink: pink is the primary action colour on this site and a notice nobody can
   click should not wear it. Same left-bar shape as the purple lines already used
   in the quote box and the caricature paper add-on, so it reads as information
   rather than as a warning. */
.pnotice{background:#F7F1FE;border-left:4px solid var(--purple);border-radius:0 9px 9px 0;
  padding:14px 18px;margin:0 0 18px;font-size:14.2px;line-height:1.65;color:var(--ink2)}
.pnotice b{color:var(--ink)}
.fpsep{opacity:.45;margin:0 9px}
/* ---- service card slideshows ---- */
.simg{position:relative}
.simg{transition:background-image .01s}
.sdots{position:absolute;left:0;right:0;bottom:9px;display:flex;gap:6px;justify-content:center;
  opacity:0;transition:opacity .2s;pointer-events:auto}
.scard:hover .sdots,.simg:focus-within .sdots,.simg.touched .sdots{opacity:1}
.sdot{width:7px;height:7px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.sdot.on{background:#fff;width:8px;height:8px}
/* on touch screens there is no hover, so the dots stay visible */
@media(hover:none){.sdots{opacity:1}}

/* ---- quote box: rotate through the services chosen ---- */
.qdots{position:absolute;left:0;right:0;bottom:8px;z-index:2;display:flex;gap:7px;justify-content:center}
.qdot{width:8px;height:8px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.qdot.on{background:#fff;width:9px;height:9px}
.qphoto .cap h3 small{display:block;font-size:11.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;opacity:.8;margin-bottom:3px}

.toppad{height:26px}
/* Keep the footer at the bottom on short pages.
   The flex column exists only for footer{margin-top:auto}. Its side effect is a trap:
   in a flex column every child is stretched to match the WIDEST child, so one wide
   item (the banner photo strip) drags every section out with it and the whole page
   grows past the window. Taylor hit this in August 2026 - the page measured 921px in
   a 500px window and stayed 921px at 150px, because the width was coming from a
   sibling rather than from the viewport. Capping the children keeps the sticky
   footer and stops the stretching. */
body{min-height:100vh;display:flex;flex-direction:column;width:100%;max-width:100%}
body>*{max-width:100%;min-width:0}
footer{margin-top:auto}
.fineprint{margin-top:12px;font-size:12.5px}
.fineprint a{color:inherit;opacity:.75;text-decoration:underline}
.fineprint a:hover{opacity:1}
@media(max-width:700px){.pagehead h1{font-size:27px}}

/* ---- artist application page ---- */
.artistpage{max-width:min(760px,100%);margin:0 auto;padding-bottom:40px}
.artistpage .lead{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:26px 26px 24px;margin-bottom:20px}
.artistpage .lead h1{font-family:var(--font-head);font-weight:600;font-size:30px;
  line-height:1.22;margin:0 0 10px}
.artistpage .lead p{font-size:15px;line-height:1.62;color:var(--ink2)}
@media(max-width:700px){.artistpage .lead h1{font-size:25px}}
.qhead{margin:26px 0 16px;padding:15px 17px;background:var(--purple-soft);
  border-left:5px solid var(--purple);border-radius:0 12px 12px 0}
.qhead h4{font-family:var(--font-head);font-weight:600;font-size:17px;line-height:1.35;margin:0}
.qhead p{font-size:13px;color:var(--ink2);line-height:1.55;margin:7px 0 0}
/* one row per day -- Taylor's choice over the JotForm grid, August 2026 */
.dgrid{display:flex;flex-direction:column;gap:8px}
.drow{display:grid;grid-template-columns:104px 132px minmax(0,1fr);gap:10px;align-items:center;
  padding:9px 11px;border:1.5px solid var(--line);border-radius:10px;background:var(--fieldbg)}
.drow.off{opacity:.55}
.drow.off .dtimes{visibility:hidden}
.dname{font-size:13.5px;font-weight:700}
.dno{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--ink2);cursor:pointer}
.dno input{accent-color:var(--accent);flex:none}
.dtimes{display:flex;gap:7px;align-items:center;flex-wrap:wrap;min-width:0}
.dlab{font-size:12px;color:var(--ink2);flex:none}
.dsel{padding:7px 8px;font-size:13px;font-family:inherit;color:var(--ink);
  border:1.5px solid var(--field);border-radius:8px;background:#fff;min-width:0}
.dsel:focus{outline:none;border-color:var(--accent);border-width:2px}
/* every grid column is minmax(0,1fr) and text children get min-width:0 -- a bare
   1fr floors at its content width and makes the whole page wider than the
   window. CLAUDE.md section 7; Taylor hit exactly this in August 2026. */
@media(max-width:620px){
  .drow{grid-template-columns:minmax(0,1fr) auto}
  .dtimes{grid-column:1/-1}
}
.up{border:1.5px dashed var(--field);border-radius:11px;padding:16px;text-align:center;
  background:var(--fieldbg)}
.upbtn{padding:11px 20px;background:var(--purple);color:#fff;border:none;border-radius:9px;
  font-size:14px;font-weight:700;font-family:inherit;cursor:pointer}
.upbtn:hover{background:#8B34C4}
.upbtn:disabled{opacity:.55;cursor:default}
.upnote{font-size:12.2px;color:var(--ink2);margin-top:9px;line-height:1.45}
.uplist{font-size:12.5px;color:var(--ink);margin-top:10px;line-height:1.65;text-align:left}
.uplist:empty{margin:0}
.upitem{display:flex;gap:8px;align-items:baseline;padding:3px 0}
.upitem b{font-weight:600;overflow-wrap:anywhere;min-width:0}
.upitem em{font-style:normal;color:var(--ink2);font-size:11.5px;flex:none}
.upbad{color:#C0392B}
.amsg{display:none;margin-top:12px;padding:12px 14px;border-radius:10px;
  font-size:14px;line-height:1.5;background:#FEF6F5;border:1.5px solid #C0392B;color:#8E2A1F}
.amsg.on{display:block}