:root{
  --white:#FFFFFF; --primer:#E5E3DF; --ink:#231B33; --ink-2:#4B4360;
  --cobalt:#2140C4; --cobalt-d:#16309E;
  --marigold:#F5B83D; --sky:#8EC5F2; --blush:#F5B3C3; --fern:#A7CF9B; --lilac:#C3B3F0; --pool:#6FD3C7;
  --accent:var(--marigold);
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --gut:clamp(16px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.6 "Work Sans",system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:700;margin:0;line-height:1.02;letter-spacing:-.02em;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144}
p{margin:0}
a{color:inherit}
svg{display:block}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:8px}
.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border-radius:999px;background:var(--cobalt);color:#fff;font:600 17px/1 "Work Sans",sans-serif;text-decoration:none;border:2px solid var(--cobalt);cursor:pointer;
  transition:transform 160ms var(--ease-out),background-color 200ms var(--ease-out),color 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn--ghost{background:rgba(255,255,255,.7);color:var(--ink);border-color:var(--ink)}
.btn--sm{min-height:42px;padding:0 18px;font-size:15px}
.btn--block{width:100%}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--cobalt-d);border-color:var(--cobalt-d)}
  .btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
}

/* header */
.top{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:2px solid var(--ink)}
.top__in{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 24px/1 "Fraunces",serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;letter-spacing:-.02em}
.logo svg{width:42px;height:30px}
.nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav ul a:not(.btn){text-decoration:none;font-weight:500;font-size:16px;background:linear-gradient(var(--accent),var(--accent)) 0 92%/0 6px no-repeat;transition:background-size 260ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav ul a:not(.btn):hover{background-size:100% 6px}}
.nav .tel{font-weight:700!important;font-variant-numeric:tabular-nums}
.nav__btn{display:none}

/* hero: the wall */
.hero{position:relative;min-height:calc(100svh - 72px);display:flex;align-items:stretch;overflow:hidden;
  background:var(--primer) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  border-bottom:2px solid var(--ink)}
.wall{position:absolute;inset:0;width:100%;height:100%}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--gut);align-items:end;width:100%;padding-top:clamp(48px,8vh,110px);padding-bottom:clamp(32px,6vh,72px);pointer-events:none}
.hero__in a,.hero__in button{pointer-events:auto}
.hero h1{font-size:clamp(46px,7.2vw,112px);font-weight:800;line-height:.95;letter-spacing:-.035em;max-width:11ch}
.lede{margin-top:24px;font-size:clamp(17px,1.5vw,21px);max-width:31em;color:var(--ink)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__fine{margin-top:14px;font-size:14px;color:var(--ink-2)}
.palette{background:var(--white);border:2px solid var(--ink);border-radius:20px;padding:18px;box-shadow:6px 6px 0 var(--ink);align-self:end;pointer-events:auto}
.palette__l{font-size:14px;font-weight:600;margin-bottom:12px}
.hint-touch{display:none}
.palette__chips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pc{appearance:none;cursor:pointer;border:2px solid var(--ink);border-radius:10px;background:var(--c);height:64px;padding:0;font-size:0;color:transparent;position:relative;
  transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.pc::after{content:"";position:absolute;left:50%;bottom:7px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--ink);opacity:0;transform:scale(.6);transition:opacity 180ms var(--ease-out),transform 220ms var(--ease-out)}
.pc[aria-pressed="true"]{transform:translateY(-4px);box-shadow:0 4px 0 var(--ink)}
.pc[aria-pressed="true"]::after{opacity:1;transform:none}
.pc:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.pc[aria-pressed="false"]:hover{transform:translateY(-2px)}}
.paintmode{display:none}
.coat{margin-top:12px;font-size:14px;color:var(--ink-2);min-height:1.6em}
.coat b{color:var(--ink)}

.roller{position:absolute;left:0;top:0;z-index:3;width:140px;pointer-events:none;opacity:0;transform:translate(-200px,-200px);transition:opacity 200ms var(--ease-out);will-change:transform}
.roller.on{opacity:1}
.roller__nap{fill:var(--accent);stroke:#231B33;stroke-width:5}
.hero.painting{cursor:none}
.hero.painting a,.hero.painting button{cursor:pointer}

/* facts */
.facts{background:var(--ink);color:#fff}
.facts__in{display:grid;grid-template-columns:repeat(5,1fr)}
.facts p{padding:22px 16px 24px 0;display:grid;gap:2px}
.facts p+p{padding-left:20px;border-left:1px solid rgba(255,255,255,.18)}
.facts b{font:700 26px/1.1 "Fraunces",serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;color:var(--accent);transition:color 400ms var(--ease-out)}
.facts span{font-size:14px;color:#D9D4E6}

/* shared intro */
.intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gut);align-items:end;margin-bottom:48px}
.intro h2,.colours h2,.promise h2,.steps h2,.est h2{font-size:clamp(36px,4.6vw,68px)}
.intro p{font-size:18px;color:var(--ink-2)}

/* services deck */
.services{padding:clamp(80px,10vw,140px) 0}
.deck{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.chip{border:2px solid var(--ink);border-radius:6px;background:var(--white);display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform 260ms var(--ease-out),box-shadow 260ms var(--ease-out)}
.chip::before{content:"";display:block;height:130px;background:var(--c);border-bottom:2px solid var(--ink)}
.chip::after{content:"";position:absolute;right:18px;top:18px;width:18px;height:18px;border-radius:50%;background:var(--white);border:2px solid var(--ink)}
.chip__code{position:absolute;left:18px;top:16px;font-size:13px;font-weight:600;letter-spacing:.02em}
.chip h3{font-size:30px;padding:20px 22px 0}
.chip__price{padding:6px 22px 0;font-size:15px;color:var(--ink-2)}
.chip__price b{font:800 34px/1 "Fraunces",serif;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;color:var(--ink);letter-spacing:-.02em}
.chip p:last-child{padding:12px 22px 24px;font-size:15.5px;color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){
  .chip:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:6px 8px 0 var(--ink)}
  .chip:nth-child(even):hover{transform:translateY(-4px) rotate(.6deg)}
}

/* colour room */
.colours{background:#F4F1FA;padding:clamp(80px,10vw,140px) 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.colours__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.colours__text>p{margin-top:18px;font-size:18px;color:var(--ink-2)}
.swatches{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
.swatches button{display:flex;align-items:center;gap:12px;text-align:left;font:500 16px/1.2 "Work Sans",sans-serif;color:var(--ink);background:var(--white);border:2px solid transparent;border-radius:14px;padding:8px 12px 8px 8px;cursor:pointer;
  transition:border-color 180ms var(--ease-out),transform 160ms var(--ease-out)}
.swatches button:active{transform:scale(.97)}
.swatches [aria-checked="true"]{border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.swatches [aria-checked="false"]:hover{border-color:#B9B2CC}}
.sw{width:40px;height:40px;border-radius:9px;background:var(--c);flex:none;box-shadow:inset 0 0 0 1.5px rgba(35,27,51,.25)}
.room{margin:0;border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:var(--white);box-shadow:8px 8px 0 var(--ink)}
.room svg{width:100%;height:auto}
.room__wall{fill:var(--wall,#E9E4DA);transition:fill 600ms var(--ease-in-out)}
.room__tray{fill:var(--wall,#E9E4DA);transition:fill 600ms var(--ease-in-out)}
.room figcaption{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:14px 18px;border-top:2px solid var(--ink);font-size:15px;color:var(--ink-2)}
.room figcaption b{font:700 20px/1.2 "Fraunces",serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;color:var(--ink)}

/* promise */
.promise{padding:clamp(80px,10vw,140px) 0}
.promise__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gut);align-items:start}
.tape{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:34px 28px}
.tape li{position:relative;padding:26px 22px 22px;border:2px solid var(--ink);border-radius:4px;font-size:16px;color:var(--ink-2);background:var(--white)}
.tape li::before{content:"";position:absolute;left:20px;top:-13px;width:84px;height:24px;background:rgba(245,184,61,.82);transform:rotate(-3deg);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.tape li:nth-child(3n+2)::before{background:rgba(142,197,242,.85);transform:rotate(2deg);left:auto;right:28px}
.tape li:nth-child(3n)::before{background:rgba(167,207,155,.88);transform:rotate(-1.5deg);left:40%}
.tape b{display:block;font:700 22px/1.15 "Fraunces",serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;color:var(--ink);margin-bottom:6px}

/* reviews */
.reviews{padding:0 0 clamp(80px,10vw,140px)}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{margin:0;padding:28px;border-radius:24px 24px 24px 4px;background:var(--c);display:flex;flex-direction:column;justify-content:space-between;gap:28px;border:2px solid var(--ink)}
.rev:nth-child(2){border-radius:24px 24px 4px 24px;transform:translateY(24px)}
.rev blockquote{margin:0;font:500 21px/1.38 "Fraunces",serif;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 24;letter-spacing:-.005em}
.rev figcaption{font-size:14px;font-weight:600}
.area{margin-top:72px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gut);padding-top:28px;border-top:2px solid var(--ink)}
.area h3{font-size:28px}
.area p{font-size:19px;color:var(--ink-2)}

/* steps */
.steps{background:var(--ink);color:#fff;padding:clamp(80px,10vw,130px) 0}
.steps ol{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:8px;align-content:start;padding-top:20px;border-top:8px solid var(--c)}
.steps li::before{content:counter(s);font:800 54px/1 "Fraunces",serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;color:var(--c)}
.steps b{font-size:19px;font-weight:600}
.steps span{color:#D9D4E6;font-size:15.5px}

/* estimate */
.est{padding:clamp(80px,10vw,140px) 0}
.est__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start}
.est__card{border:2px solid var(--ink);border-radius:24px;background:var(--accent);padding:clamp(22px,3.4vw,44px);box-shadow:10px 10px 0 var(--ink);min-height:540px;transition:background-color 500ms var(--ease-out)}
.est__card>p{margin-top:10px;font-size:18px}
#eform{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.f{display:grid;gap:6px;min-width:0}
.f label{font-size:15px;font-weight:600}
.f input,.f select{font:inherit;font-size:16px;color:var(--ink);min-height:52px;border:2px solid var(--ink);border-radius:12px;padding:0 14px;background:var(--white);width:100%;transition:box-shadow 160ms var(--ease-out)}
.f input:focus,.f select:focus{outline:none;box-shadow:4px 4px 0 var(--ink)}
.f.bad input{border-color:#A3112B;box-shadow:0 0 0 3px rgba(163,17,43,.25)}
.err{color:#7D0C20;font-size:13px;font-weight:600;min-height:1em}
#eform .btn{grid-column:1/-1;margin-top:6px;background:var(--ink);border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){#eform .btn:hover{background:var(--cobalt);border-color:var(--cobalt)}}
#eform,.thanks{transition:opacity 260ms var(--ease-out),transform 300ms var(--ease-out)}
#eform.out{opacity:0;transform:translateY(-8px)}
.thanks{opacity:0;transform:translateY(10px);padding-top:30px}
.thanks.in{opacity:1;transform:none}
.thanks:focus{outline:none}
.thanks__chips{display:flex;gap:8px}
.thanks__chips i{width:44px;height:60px;border:2px solid var(--ink);border-radius:6px;background:var(--c);opacity:0;transform:translateY(12px) rotate(-6deg);transition:opacity 300ms var(--ease-out),transform 420ms var(--ease-out)}
.thanks.in .thanks__chips i{opacity:1;transform:none}
.thanks.in .thanks__chips i:nth-child(2){transition-delay:60ms}
.thanks.in .thanks__chips i:nth-child(3){transition-delay:120ms}
.thanks.in .thanks__chips i:nth-child(4){transition-delay:180ms}
.thanks h3{font-size:44px;margin-top:24px}
.thanks p{margin-top:12px;font-size:19px;max-width:26em}

.faq h2{font-size:clamp(32px,3vw,44px);margin-bottom:16px}
details{border-bottom:2px solid var(--ink)}
summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font-weight:600;font-size:18px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:2px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M8 13h10M13 8v10' stroke='%23231B33' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/26px no-repeat;border:2px solid var(--ink);transition:transform 240ms var(--ease-out),background-color 400ms var(--ease-out)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 40px 22px 0;color:var(--ink-2)}

.foot{border-top:2px solid var(--ink);padding:48px 0 56px;font-size:15px;color:var(--ink-2)}
.foot__in{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot__logo{font:700 26px/1.2 "Fraunces",serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;color:var(--ink);margin-bottom:8px}
.foot__fine{max-width:28em;font-size:13px}
.mbar{display:none}

/* responsive */
@media (max-width:1100px){
  .hero__in{grid-template-columns:1fr;align-content:end}
  .palette{max-width:460px}
  .deck{grid-template-columns:1fr 1fr}
  .colours__in,.est__in{grid-template-columns:1fr}
  .promise__in{grid-template-columns:1fr}
  .facts__in{grid-template-columns:repeat(3,1fr)}
  .facts p:nth-child(4){padding-left:0;border-left:0}
  .facts p:nth-child(n+4){border-top:1px solid rgba(255,255,255,.18)}
}
@media (max-width:900px){
  .nav__btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--ink);background:var(--accent);font:600 15px/1 "Work Sans",sans-serif;color:var(--ink);cursor:pointer;transition:transform 160ms var(--ease-out),background-color 400ms var(--ease-out)}
  .nav__btn:active{transform:scale(.97)}
  .nav ul{position:absolute;left:0;right:0;top:72px;flex-direction:column;align-items:stretch;gap:0;background:var(--white);border-bottom:2px solid var(--ink);padding:6px var(--gut) 20px;
    opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity 200ms var(--ease-out),transform 240ms var(--ease-out),visibility 0s 240ms}
  .nav.open ul{opacity:1;transform:none;visibility:visible;transition:opacity 200ms var(--ease-out),transform 240ms var(--ease-out)}
  .nav li{border-bottom:1px solid #DDD8E8}
  .nav li:last-child{border:0;padding-top:16px}
  .nav ul a:not(.btn){display:block;padding:14px 0;font-size:18px;background:none}
  .nav .btn{width:100%}
  .intro{grid-template-columns:1fr}
  .revs{grid-template-columns:1fr}
  .rev:nth-child(2){transform:none}
  .steps ol{grid-template-columns:1fr 1fr;row-gap:36px}
  .area{grid-template-columns:1fr}
}
@media (hover:none),(pointer:coarse){
  .hint-fine{display:none}.hint-touch{display:inline}
  .paintmode{display:inline-flex;align-items:center;gap:8px;margin-top:12px;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--ink);background:var(--white);font:600 15px/1 "Work Sans",sans-serif;color:var(--ink);cursor:pointer;transition:transform 160ms var(--ease-out),background-color 200ms var(--ease-out),color 200ms var(--ease-out)}
  .paintmode:active{transform:scale(.97)}
  .paintmode[aria-pressed="true"]{background:var(--ink);color:#fff}
  .hero.touchpaint .wall{touch-action:none}
  .hero.touchpaint .hero__copy{opacity:.35;transition:opacity 240ms var(--ease-out)}
}
@media (max-width:600px){
  body{font-size:16px}
  .hero{min-height:auto}
  .hero__in{padding-top:40px;padding-bottom:28px}
  .hero h1{font-size:clamp(42px,12.4vw,60px)}
  .hero__cta .btn{flex:1 1 100%}
  .palette{padding:14px;box-shadow:4px 4px 0 var(--ink)}
  .pc{height:52px}
  .facts__in{grid-template-columns:1fr 1fr}
  .facts p,.facts p+p{padding:16px 12px 16px 0;border-left:0}
  .facts p:nth-child(even){padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}
  .facts p:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18)}
  .facts p:last-child{grid-column:1/-1;padding-left:0;border-left:0}
  .facts b{font-size:22px}
  .deck{grid-template-columns:1fr}
  .chip::before{height:90px}
  .colours__in{gap:20px}
  .colours__text{display:contents}
  .room{order:2}
  .swatches{order:3;margin-top:0;grid-template-columns:1fr 1fr;gap:8px}
  .swatches button{font-size:14px;padding:6px 8px 6px 6px;gap:8px}
  .sw{width:32px;height:32px}
  .tape{grid-template-columns:1fr}
  .steps ol{grid-template-columns:1fr}
  #eform{grid-template-columns:1fr}
  .est__card{box-shadow:6px 6px 0 var(--ink)}
  .room{box-shadow:5px 5px 0 var(--ink)}
  .mbar{display:grid;grid-template-columns:1fr 2fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--white);border-top:2px solid var(--ink)}
  .mbar a{min-height:50px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:600;text-decoration:none;border:2px solid var(--ink);transition:transform 160ms var(--ease-out)}
  .mbar a:active{transform:scale(.97)}
  .mbar__go{background:var(--cobalt);border-color:var(--cobalt)!important;color:#fff}
  .foot{padding-bottom:150px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms!important;transition-delay:0ms!important;animation:none!important}
}