/* 3. THE SUITE: her mural turned into the website. Painted walls, rainbow
   paint drips hanging into every room, mushrooms, a ringed planet with its
   rainbow trail, hand lettering. */
:root{--ink:#2a0f4f;--soft:#4c2f72;--pink:#ff3d8f;--orange:#ff7a1f;--sun:#ffd23d;--green:#43d14b;--aqua:#18b8e0;--violet:#8d50df;--lime:#ccfd21;--alien:#69d215;
  --drip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V14C232 14 230 22 230 30C230 38 224 40 222 32C220 22 216 16 206 16C196 16 196 26 194 44C193 54 184 54 183 44C181 26 180 18 166 18C150 18 152 28 150 34C148 40 142 40 141 34C139 22 132 14 118 14C104 14 104 24 102 38C101 50 92 50 91 38C89 22 86 16 72 16C60 16 58 24 56 30C55 36 48 36 47 30C45 20 40 14 28 14C16 14 16 26 14 52C13 60 4 60 3 52C2 30 2 14 0 14Z'/%3E%3C/svg%3E")}
body{color:var(--ink);font-family:"Nunito",system-ui,sans-serif;font-size:17px;background:#f6ecff}

.head{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;padding:12px clamp(16px,4vw,48px);background:#fffaf0;border-bottom:3px solid var(--ink)}
.brand{font:400 1.3rem/1 "Righteous",system-ui;text-decoration:none;color:var(--ink);margin-right:auto}
.brand__text span{color:var(--pink)}
.nav-links{display:flex;gap:20px}
.nav-links a{text-decoration:none;font-weight:700}
.nav-links a:hover{color:var(--pink)}
.menu-btn{background:var(--sun);color:var(--ink);border:2.5px solid var(--ink)}
@media (max-width:820px){
  .head{flex-wrap:wrap}
  .nav-links.open{order:5;flex-basis:100%;flex-direction:column;gap:2px;padding:6px 0}
  .nav-links.open a{padding:10px 2px;font-size:1.1rem}
}


.btn{display:inline-block;text-decoration:none;font:400 1.05rem/1 "Righteous",system-ui;padding:14px 22px;border-radius:40px 34px 44px 30px;border:3px solid var(--ink);cursor:pointer}
.btn--main{background:var(--lime);color:var(--ink);box-shadow:0 5px 0 var(--ink)}
.btn--main:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
.btn--ghost{background:#fff;color:var(--ink)}
.todo{display:inline-block;font:800 .72rem/1 "Nunito",sans-serif;background:var(--sun);border:2px solid var(--ink);padding:3px 6px;border-radius:6px;vertical-align:middle}
.hand{font:700 clamp(1.3rem,2vw,1.6rem)/1.2 "Caveat",cursive;color:var(--violet);transform:rotate(-2deg);display:inline-block}

/* every room is a painted wall with drips hanging from the one above */
.wall{position:relative;padding:clamp(90px,10vw,140px) clamp(16px,5vw,72px) clamp(56px,7vw,100px)}
.wall > *{max-width:1280px;margin-left:auto;margin-right:auto}
.drips{position:absolute;left:0;right:0;top:0;height:clamp(46px,6vw,74px);max-width:none;-webkit-mask:var(--drip) 0 0/240px 100% repeat-x;mask:var(--drip) 0 0/240px 100% repeat-x;z-index:1}
.wall--hero{background:#fff7e8;padding-top:clamp(70px,8vw,110px);min-height:min(90vh,820px);display:grid;align-items:center;overflow:hidden}
.wall--hero .drips{background:linear-gradient(90deg,#ff3d8f,#ff7a1f 18%,#ffd23d 34%,#43d14b 50%,#18b8e0 66%,#8a4dff 82%,#ff3d8f)}
.wall--mint{background:#dcfbe8}.wall--mint .drips{background:#fff7e8}
.wall--lilac{background:#efe2ff}.wall--lilac .drips{background:#dcfbe8}
.wall--peach{background:#ffe6d6}.wall--peach .drips{background:#efe2ff}
.wall--sky{background:#d9f3ff}.wall--sky .drips{background:#ffe6d6}
.wall--pink{background:#ffe0f0}.wall--pink .drips{background:#d9f3ff}

.wall h2{font:400 clamp(2.2rem,4.8vw,3.8rem)/1 "Righteous",system-ui;text-shadow:3px 3px 0 #fff,6px 6px 0 var(--sun)}
.wall__copy{position:relative;z-index:2;max-width:640px;margin-left:0}
.kicker{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.86rem;color:var(--violet);margin-bottom:12px}
.title{font:400 clamp(3rem,8vw,7rem)/.9 "Righteous",system-ui;color:var(--ink);margin-bottom:22px;text-shadow:4px 4px 0 #fff,8px 8px 0 var(--pink)}
.title span{display:block;color:var(--pink);text-shadow:4px 4px 0 #fff,8px 8px 0 var(--aqua)}
.lede{font-size:clamp(1.05rem,1.45vw,1.22rem);max-width:34em}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 18px}
.status{display:inline-flex;align-items:center;gap:10px;font-weight:800;background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:7px 14px}
.status__dot{width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--ink)}
.wall__copy .hand{margin-top:18px}

/* the painted mural, all CSS so it stays sharp at any size */
.paint{position:absolute;inset:0;max-width:none;pointer-events:none}
.paint > span{position:absolute;display:block}
.paint__planet{right:9%;top:16%;width:clamp(150px,20vw,280px);aspect-ratio:1;isolation:isolate;--ring-w:150%;--ring-h:30%;--ring-tilt:-16deg;--ring-line:6px solid var(--ink);--ring-glow:inset 0 0 0 4px var(--sun),inset 0 0 0 6.5px var(--ink)}
.paint__planet .planet__body{background:radial-gradient(circle at 34% 30%,#ffd6f0,#ff3d8f 46%,#b0156f);border:4px solid var(--ink);box-shadow:inset -18px -14px 0 rgba(42,15,79,.18)}

.paint__shroom{width:clamp(90px,10vw,140px);aspect-ratio:1/1.1;bottom:0;background:
  radial-gradient(circle at 30% 30%,#fff 0 7%,transparent 8%),radial-gradient(circle at 62% 22%,#fff 0 6%,transparent 7%),radial-gradient(circle at 75% 42%,#fff 0 5%,transparent 6%),
  radial-gradient(ellipse 50% 46% at 50% 46%,var(--orange) 98%,transparent 100%) top/100% 52% no-repeat,
  linear-gradient(#fff3d6,#ffd6a8) center 70%/30% 54% no-repeat}
.m1{right:30%}.m2{right:4%;transform:scale(.7);transform-origin:bottom;filter:hue-rotate(-30deg)}
.paint__flower{width:clamp(56px,6vw,90px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--sun) 0 22%,transparent 23%),conic-gradient(var(--violet) 0 12.5%,var(--aqua) 0 25%,var(--violet) 0 37.5%,var(--aqua) 0 50%,var(--violet) 0 62.5%,var(--aqua) 0 75%,var(--violet) 0 87.5%,var(--aqua) 0);-webkit-mask:radial-gradient(circle,#000 0 48%,transparent 49%),conic-gradient(#000 0 100%);mask:radial-gradient(circle,#000 0 48%,transparent 49%)}
.f1{right:22%;bottom:18%}.f2{right:42%;top:22%;transform:scale(.6)}
@media (max-width:860px){
  .wall--hero{min-height:0;padding-top:clamp(300px,80vw,360px)}
  .paint__planet{right:auto;left:11%;bottom:auto;top:120px;width:110px;--ring-w:142%}
  .paint__shroom,.f1{display:none}
  .f2{display:none}
}

/* menu painted by the sink */
#services{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(20px,4vw,60px);align-items:start}
#services>*{max-width:none;margin:0}
#services .note{grid-column:2}
.panel--left .hand{margin-top:10px}
.svc-menu{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
.svc{border-bottom:3px dotted var(--ink);padding:6px 0 16px;display:grid;grid-template-rows:auto 1fr auto;gap:6px}
.svc h3{font:400 1.35rem/1.15 "Righteous",system-ui}
.svc:nth-child(6n+1) h3{color:#c4155f}.svc:nth-child(6n+2) h3{color:#b54d00}.svc:nth-child(6n+3) h3{color:#1d7d24}
.svc:nth-child(6n+4) h3{color:#0b6e8a}.svc:nth-child(6n+5) h3{color:#6a2fd6}.svc:nth-child(6n) h3{color:#c4155f}
.svc__price{font-weight:800}
@media (max-width:860px){#services{grid-template-columns:1fr}#services .note{grid-column:auto}}
@media (max-width:560px){.svc-menu{grid-template-columns:1fr}}

/* gallery wall: painted frames hung on one rail */
#work h2{margin-bottom:6px}
#work .hand{margin-bottom:26px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filters button{background:#fff;border:2.5px solid var(--ink);border-radius:30px 24px 32px 22px;padding:8px 15px;font-weight:800;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff}
.grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px}
.tile{padding:12px;border-radius:14px;background:
  linear-gradient(#fff,#fff) padding-box,
  linear-gradient(135deg,#ff3d8f,#ff7a1f,#ffd23d,#43d14b,#18b8e0,#8a4dff) border-box;border:7px solid transparent;box-shadow:0 10px 0 -4px rgba(42,15,79,.18)}
.tile::before{content:"";position:absolute;left:50%;top:-24px;width:2px;height:20px;background:var(--ink);transform:translateX(-50%)}
.tile .ph{aspect-ratio:4/5;border-radius:6px}
.tile__beam{top:8px;height:calc(100% - 16px)}
.grid-empty{padding:30px 0}
.beam-hint{margin-top:22px;color:var(--violet)}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* steps run along a painted rainbow trail */
#how{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(20px,4vw,56px);align-items:start}
#how>*{max-width:none;margin:0}
#how h2{margin-bottom:26px}
.trail{list-style:none;counter-reset:t;padding:0 0 0 34px;margin:0;display:grid;gap:22px;position:relative}
.trail::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:12px;border-radius:12px;background:linear-gradient(180deg,#ff3d8f,#ff7a1f,#ffd23d,#43d14b,#18b8e0,#8a4dff)}
.trail li{counter-increment:t;position:relative;padding-left:24px}
.trail li::before{content:counter(t);position:absolute;left:-36px;top:-2px;width:40px;height:40px;border-radius:50%;background:#fff;border:3px solid var(--ink);display:grid;place-items:center;font:400 1.2rem/1 "Righteous",system-ui}
.trail h3{font:400 1.25rem/1.2 "Righteous",system-ui;margin-bottom:4px}
.reviews{background:#fff;border:3px solid var(--ink);border-radius:30px 22px 34px 24px;padding:22px;box-shadow:6px 6px 0 var(--ink)}
.reviews__stars{font-size:1.7rem;color:#e6a400;letter-spacing:.08em;-webkit-text-stroke:1px var(--ink)}
.reviews__line{font-size:1.15rem}
.reviews__more{margin-top:6px}
.reviews__more a{font-weight:800}
@media (max-width:860px){#how{grid-template-columns:1fr}}

#about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center}
#about>*{max-width:none;margin:0}
#about h2{margin-bottom:18px}
#about .lede,#about p{margin-bottom:12px}
.credit a{font-weight:800}
.suite-ph{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.suite-ph .ph{aspect-ratio:3/4;border-radius:120px 120px 14px 14px;border:4px solid var(--ink)}
@media (max-width:860px){#about{grid-template-columns:1fr}}

#consult{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(20px,4vw,48px);align-items:start}
#consult>*{max-width:none;margin:0}
.panel--form{background:#fffaf0;border:3px solid var(--ink);border-radius:40px 30px 44px 34px;padding:clamp(20px,3vw,40px);box-shadow:8px 8px 0 var(--ink)}
.panel--form h2{margin-bottom:12px}
.panel--form>p{margin-bottom:22px;max-width:40em}
.panel--wait{background:#fff;border:3px dashed var(--ink);border-radius:30px;padding:22px}
.panel--wait h3{font:400 1.3rem/1.2 "Righteous",system-ui;margin-bottom:6px}
.panel--wait p{margin-bottom:12px}
@media (max-width:900px){#consult{grid-template-columns:1fr}}

.cform{--field-bg:#fff;--field-line:var(--ink);--field-ink:var(--ink)}
.cform input[type=file]{padding:9px}
.cform .check{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.cform .check input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--pink)}
.cform [aria-invalid="true"]{border-color:var(--pink);background:#fff0f6}
.cform__steer{background:#fff3c4;border:2.5px solid var(--ink)}
.cform__err{color:#c4155f}
.cform .btn--main{justify-self:start;font-size:1.15rem}
.cform__done{background:#fff;border:3px solid var(--ink)}
.cform__done h3{font:400 clamp(1.5rem,3.6vw,2.3rem)/1.1 "Righteous",system-ui;color:#c4155f}
.wform{display:grid;gap:10px}
.wform label{display:grid;gap:4px;font-weight:700}
.wform input{width:100%;padding:10px 12px;border-radius:12px;border:2.5px solid var(--ink);background:#fff}
.wform .btn{justify-self:start}
.wform__msg{font-weight:800}

.foot{background:var(--ink);color:#fff;text-align:center;padding:44px 16px 50px;display:grid;gap:8px}
.foot__brand{font:400 1.7rem/1 "Righteous",system-ui;color:var(--sun)}
.foot a{color:#9fe9ff}
.foot__credit{font-size:.9rem}
.code{--code-bg:#fffaf0;--code-ink:#2a0f4f;--code-line:3px solid #2a0f4f;--code-font:"Righteous",system-ui;box-shadow:8px 8px 0 #2a0f4f}
.code h2{color:#c4155f}
.title .title__pre{text-shadow:2px 2px 0 #fff,4px 4px 0 var(--pink)}

/* the "Choose files" button, in this direction's style */
.cform input[type=file]::file-selector-button{margin-right:12px;padding:9px 16px;border:2.5px solid var(--ink);border-radius:30px 24px 32px 22px;background:var(--pink);color:#fff;font:400 .95rem/1 "Righteous",system-ui;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.cform input[type=file]::file-selector-button:hover{transform:translateY(-1px)}

.paint__logo{right:6%;top:10%;width:clamp(220px,23vw,340px);padding:10px;z-index:1;background:linear-gradient(135deg,#ff3d8f,#ff7a1f,#ffd23d,#43d14b,#18b8e0,#8a4dff);border:4px solid var(--ink);border-radius:44px 34px 48px 38px;box-shadow:8px 8px 0 var(--ink);transform:rotate(-3deg)}
.paint__logo .hero-logo{border-radius:34px 26px 38px 30px;border:3px solid var(--ink)}
@media (min-width:861px){.paint__planet{right:calc(6% + clamp(220px,23vw,340px) - 60px);top:15%;bottom:auto;width:clamp(110px,12vw,180px);z-index:0}}
@media (max-width:860px){.paint__logo{right:7%;top:56px;width:150px;padding:7px}}

/* screen-size tuning: the headline stays clear of the logo on small laptops
   and the buttons stay above the fold on short screens */
@media (min-width:861px){
  .wall__copy{max-width:min(640px,calc(94vw - clamp(220px,23vw,340px) - 120px))}
  .wall--hero{padding-top:clamp(48px,7vh,110px);padding-bottom:clamp(40px,6vh,100px)}
  .title{font-size:clamp(2.8rem,min(8vw,10.5vh),7rem)}
  .paint__logo{width:clamp(200px,min(23vw,44vh),340px)}
  .paint__planet{right:calc(6% + clamp(200px,min(23vw,44vh),340px) - 60px)}
}

/* dropdowns */
.cform{--dd-arrow:var(--pink);--dd-bg:#fff;--dd-hover-bg:var(--pink);--dd-hover-ink:#fff}
.cform .dd__btn{border-width:2.5px}
.dd__list{border:2.5px solid var(--ink);border-radius:24px 18px 26px 16px;box-shadow:6px 6px 0 var(--ink)}
.dd__opt{border-radius:18px 14px 20px 12px}
.dd__opt[aria-selected="true"]{background:#fff3c4}
.dd__opt.is-active{background:var(--pink);color:#fff}
.cform .dd__btn[aria-invalid="true"]{border-color:var(--pink);background:#fff0f6}