/* Wallcraft Paints — static redesign concept
   No framework/runtime dependencies. */
:root {
  --ink:#151513; --paper:#f4f1eb; --cream:#fbf8f2; --muted:#68665f;
  --line:rgba(21,21,19,.14); --blue:#1958d1; --blue-dark:#123d91;
  --lime:#d7ff4f; --terracotta:#c96a4a; --sage:#78927e; --violet:#7756cc;
  --radius:28px; --radius-sm:16px; --max:1480px; --shadow:0 26px 70px rgba(20,20,18,.12);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;overflow-x:hidden}
body.menu-open{overflow:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} ::selection{background:var(--lime);color:var(--ink)}
.skip-link{position:fixed;left:12px;top:-60px;z-index:9999;background:#fff;padding:12px 16px;border-radius:12px;transition:.2s}.skip-link:focus{top:12px}
.shell{width:min(calc(100% - 48px),var(--max));margin-inline:auto}.section{padding:110px 0;position:relative}.section-tight{padding:1px 0}.eyebrow{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800}.muted{color:var(--muted)}
.display{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.055em;line-height:.92;font-size:clamp(3.2rem,8vw,8rem);margin:.15em 0}.h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.6rem,5vw,5.6rem);line-height:.95;letter-spacing:-.045em;font-weight:400;margin:.15em 0}.h3{font-size:clamp(1.35rem,2vw,2rem);line-height:1.05;margin:.2em 0}.lede{font-size:clamp(1.05rem,1.7vw,1.4rem);max-width:760px}.body-lg{font-size:1.14rem}.kicker-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border:1px solid var(--ink);border-radius:999px;background:transparent;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s}.btn:hover{transform:translateY(-2px);background:var(--ink);color:#fff}.btn-solid{background:var(--ink);color:#fff}.btn-solid:hover{background:var(--blue);border-color:var(--blue)}.btn-light{border-color:rgba(255,255,255,.5);color:#fff}.btn-light:hover{background:#fff;color:var(--ink)}
.pill{display:inline-flex;padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-size:.82rem}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:#F4F1EB;transition:box-shadow .35s ease,border-color .35s ease;}
.site-header.scrolled,.site-header.is-scrolled{background:#F4F1EB;box-shadow:0 8px 30px rgba(21,21,19,.07);border-bottom-color:rgba(21,21,19,.12);}
.header-inner{display:grid;grid-template-columns:250px 1fr 220px;align-items:center;gap:24px}.brand{display:flex;align-items:center;font-weight:900;letter-spacing:-.025em}.brand img{width:168px;height:auto;display:block;object-fit:contain}.brand small{display:none}.main-nav{display:flex;justify-content:center;gap:18px;position:relative;align-items:center}.nav-link{--liquid:#2167d5;font-weight:700;font-size:.93rem;position:relative;padding:12px 15px;z-index:2;isolation:isolate;transition:color .3s ease;white-space:nowrap}.nav-link:after{display:none}.nav-label{position:relative;z-index:3}.nav-liquid{position:absolute;z-index:1;left:50%;top:50%;width:calc(100% + 16px);height:42px;transform:translate(-50%,-50%) scale(.25);opacity:0;pointer-events:none;transition:transform .52s cubic-bezier(.2,.82,.2,1),opacity .28s ease;filter:drop-shadow(0 5px 8px color-mix(in srgb,var(--liquid) 25%,transparent))}.nav-liquid span{position:absolute;inset:0;background:var(--liquid);opacity:.96;transform-origin:center;border-radius:42% 58% 54% 46% / 52% 43% 57% 48%;animation:nav-liquid-turn 5.2s linear infinite;animation-play-state:paused}.nav-liquid span:nth-child(2){inset:2px -4px -1px 3px;opacity:.88;border-radius:56% 44% 46% 54% / 42% 58% 42% 58%;animation-duration:6.1s;animation-direction:reverse}.nav-liquid span:nth-child(3){inset:-2px 4px 3px -3px;opacity:.72;border-radius:48% 52% 62% 38% / 60% 44% 56% 40%;animation-duration:4.4s}.nav-liquid span:nth-child(4){inset:3px 1px -3px -1px;opacity:.58;border-radius:62% 38% 48% 52% / 46% 61% 39% 54%;animation-duration:7.2s;animation-direction:reverse}.nav-link:hover,.nav-link:focus-visible,.nav-link.is-liquid-active{color:#fff}.nav-link:hover .nav-liquid,.nav-link:focus-visible .nav-liquid,.nav-link.is-liquid-active .nav-liquid{opacity:1;transform:translate(-50%,-50%) scale(1)}.nav-link:hover .nav-liquid span,.nav-link:focus-visible .nav-liquid span,.nav-link.is-liquid-active .nav-liquid span{animation-play-state:running}.nav-link.is-liquid-leaving .nav-liquid{transform:translate(-50%,-50%) scale(.65,.22);opacity:0}.nav-link:focus-visible{outline:none}.nav-link:focus-visible .nav-label{outline:2px solid currentColor;outline-offset:5px;border-radius:3px}@keyframes nav-liquid-turn{to{transform:rotate(360deg)}}.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px}.menu-toggle{display:none;width:48px;height:48px;border:1px solid var(--line);background:rgba(255,255,255,.35);border-radius:50%;position:relative}.menu-toggle span,.menu-toggle:before{content:"";position:absolute;left:14px;right:14px;height:1.5px;background:currentColor;transition:.3s}.menu-toggle:before{top:19px}.menu-toggle span{top:27px}.menu-open .menu-toggle:before{transform:translateY(4px) rotate(45deg)}.menu-open .menu-toggle span{transform:translateY(-4px) rotate(-45deg)}
.mega-panel{position:fixed;z-index:990;top:76px;left:50%;transform:translate(-50%,-18px);width:min(calc(100% - 48px),1080px);padding:24px;background:rgba(251,248,242,.98);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:.3s var(--ease)}.mega-panel.open{opacity:1;visibility:visible;transform:translate(-50%,0)}.mega-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}.mega-feature{background:var(--blue);color:#fff;border-radius:20px;padding:28px;min-height:210px;position:relative;overflow:hidden}.mega-feature:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:var(--lime);right:-50px;bottom:-80px;filter:blur(1px)}.mega-list{display:grid;align-content:start;gap:8px}.mega-list a{padding:10px 0;border-bottom:1px solid var(--line)}
.mobile-panel{position:fixed;inset:0;z-index:980;background:var(--paper);padding:105px 24px 30px;display:grid;align-content:start;gap:0;transform:translateY(-105%);transition:.65s var(--ease);overflow:auto}.menu-open .mobile-panel{transform:none}.mobile-panel a{font-family:Georgia,serif;font-size:clamp(2.4rem,12vw,4.6rem);line-height:1;border-bottom:1px solid var(--line);padding:17px 0}.mobile-panel .mobile-meta{font-family:inherit;font-size:.9rem;border:0;margin-top:22px;line-height:1.5}

/* Hero */
.hero{min-height:100svh;padding:125px 0 40px;display:grid;align-items:end;position:relative;overflow:hidden;background:#ece9e2}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end}.hero-copy{position:relative;z-index:3}.hero-copy .display{max-width:950px}.hero-copy .accent{color:var(--blue);font-style:italic}.hero-copy-bottom{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-top:32px}.hero-copy-bottom p{max-width:600px}.hero-visual{height:min(72vh,760px);min-height:540px;position:relative;border-radius:40px;overflow:hidden;box-shadow:var(--shadow);transform:rotate(1.4deg)}.hero-visual img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(.97)}.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,12,10,.4))}.paint-orb{position:absolute;z-index:4;width:210px;aspect-ratio:1;border-radius:43% 57% 61% 39% / 42% 39% 61% 58%;background:var(--lime);right:18%;top:18%;mix-blend-mode:multiply;filter:blur(.2px);animation:blob 12s ease-in-out infinite alternate;will-change:transform}.paint-orb:after{content:"colour / chemistry";position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;font-weight:900;transform:rotate(-12deg)}@keyframes blob{to{border-radius:61% 39% 39% 61% / 55% 59% 41% 45%;transform:rotate(20deg) scale(1.08)}}
.scroll-cue{position:absolute;left:24px;bottom:24px;z-index:4;color:#fff;display:flex;align-items:center;gap:9px;font-size:.82rem}.scroll-cue i{width:34px;height:34px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;font-style:normal}

/* Marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--cream)}.marquee-track{display:flex;width:max-content;animation:marquee 28s linear infinite;padding:18px 0}.marquee-track span{font-family:Georgia,serif;font-size:1.35rem;white-space:nowrap;padding:0 24px}.marquee-track span:after{content:"✦";margin-left:48px;color:var(--blue)}@keyframes marquee{to{transform:translateX(-50%)}}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.card-media{aspect-ratio:4/3;overflow:hidden}.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}.card:hover .card-media img{transform:scale(1.035)}.card-body{padding:24px}.card .arrow{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;margin-top:14px}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}

/* Project chooser */
.finder{background:var(--ink);color:#fff;overflow:hidden}.finder:before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,var(--blue),transparent 65%);right:-150px;top:-200px;opacity:.7}.finder-inner{position:relative;z-index:2}.choice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:38px}.choice{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#fff;border-radius:22px;padding:23px;text-align:left;min-height:132px;transition:.3s}.choice:hover,.choice.active{background:var(--lime);color:var(--ink);border-color:var(--lime);transform:translateY(-3px)}.choice b{display:block;font-size:1.15rem;margin-bottom:24px}.choice span{font-size:.85rem;opacity:.75}.finder-result{margin-top:22px;padding:24px;border-radius:24px;background:#fff;color:var(--ink);display:none;grid-template-columns:1fr auto;gap:24px;align-items:center}.finder-result.show{display:grid;animation:up .45s var(--ease)}

/* Colour wall */
.colour-stage{border-radius:40px;min-height:690px;background:#c9bbad;position:relative;overflow:hidden;transition:background 1s var(--ease);display:grid;align-items:end;padding:40px}.colour-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.44),transparent 35%,rgba(0,0,0,.05))}.colour-stage-copy{position:relative;z-index:2;background:rgba(251,248,242,.88);backdrop-filter:blur(10px);padding:28px;border-radius:24px;max-width:520px}.swatch-rail{position:absolute;z-index:3;right:28px;top:50%;transform:translateY(-50%);display:grid;gap:10px}.swatch{width:62px;height:62px;border-radius:50%;border:5px solid rgba(255,255,255,.72);box-shadow:0 5px 18px rgba(0,0,0,.14);transition:transform .25s}.swatch:hover,.swatch[aria-pressed=true]{transform:scale(1.16)}

/* Split editorial */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.image-stack{position:relative;min-height:640px}.image-stack .big{position:absolute;inset:0 12% 8% 0;border-radius:34px;object-fit:cover;width:88%;height:92%}.image-stack .small{position:absolute;right:0;bottom:0;width:48%;aspect-ratio:4/5;object-fit:cover;border:10px solid var(--paper);border-radius:30px}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}.stat{border-top:1px solid var(--line);padding-top:14px}.stat b{display:block;font-family:Georgia,serif;font-size:2.3rem;font-weight:400}

/* Product stripe */
.product-feature{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:36px;overflow:hidden;background:#d9e7ef;min-height:560px}.product-shot{display:grid;place-items:center;padding:40px;background:radial-gradient(circle at 50% 55%,#fff 0 24%,transparent 25%),linear-gradient(140deg,#d4f1ff,#b8d5e7)}.product-shot img{max-height:450px;filter:drop-shadow(0 30px 28px rgba(0,0,0,.16))}.product-copy{padding:60px;display:flex;flex-direction:column;justify-content:center}.benefits{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}

/* Advice */
.advice-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.advice-card{min-height:380px;border-radius:30px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);background:var(--cream)}.advice-card:nth-child(2){background:var(--blue);color:#fff}.advice-card:nth-child(3){background:var(--lime)}.big-num{font-family:Georgia,serif;font-size:4rem;line-height:1}

/* Footer */
.footer{background:var(--ink);color:#fff;padding:80px 0 30px;border-radius:40px 40px 0 0}.footer-grid{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:40px}.footer h2{font-family:Georgia,serif;font-size:clamp(2.8rem,5vw,5rem);font-weight:400;line-height:.95;margin:0 0 24px}.footer-nav{display:grid;gap:10px}.footer-nav a{color:rgba(255,255,255,.75)}.footer-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid rgba(255,255,255,.16);padding-top:22px;margin-top:60px;color:rgba(255,255,255,.6);font-size:.82rem}

/* Interior pages */
.page-hero{padding:160px 0 70px;min-height:66svh;display:grid;align-items:end;position:relative}.page-hero .display{max-width:1150px}.page-hero .lede{max-width:700px}.page-hero-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:end}.page-orb{width:220px;aspect-ratio:1;border-radius:50%;background:var(--lime);justify-self:end;display:grid;place-items:center;text-align:center;padding:30px;font-weight:750;transform:rotate(7deg)}
.filterbar{position:sticky;top:75px;z-index:20;padding:12px 0;background:rgba(244,241,235,.92);backdrop-filter:blur(16px);border-block:1px solid var(--line)}.filter-inner{display:flex;gap:8px;align-items:center;overflow:auto}.filter-btn{white-space:nowrap;border:1px solid var(--line);background:transparent;border-radius:999px;padding:10px 15px}.filter-btn.active{background:var(--ink);color:#fff}.search-input{margin-left:auto;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 15px}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product-card{background:var(--cream);border:1px solid var(--line);border-radius:22px;padding:22px;min-height:250px;display:flex;flex-direction:column;justify-content:space-between;transition:.3s}.product-card:hover{transform:translateY(-4px);box-shadow:0 15px 40px rgba(0,0,0,.08)}.product-card[hidden]{display:none}.product-card .category{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.product-card h3{font-family:Georgia,serif;font-size:1.9rem;font-weight:400;margin:.5em 0}.product-card .product-mark{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,var(--blue),var(--lime));margin-bottom:30px}.product-card:nth-child(3n) .product-mark{background:linear-gradient(135deg,var(--terracotta),#f5c2a6)}.product-card:nth-child(4n) .product-mark{background:linear-gradient(135deg,var(--sage),#dfe7d8)}
.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px; cursor: pointer}
.collection-card{min-height:440px;border-radius:30px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative
;background-color: var(--card-colour);transition:background-color 0.35s ease,transform 0.35s ease;}
.collection-card:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-40px;bottom:-60px;background:rgba(255,255,255,.2)}
.collection-card > *{position:relative;z-index:2}
.collection-card:hover {background-color:color-mix(in srgb, var(--card-colour) 80%, black 20%);}
.collection-card h3{font-family:Georgia,serif;font-size:2.4rem;font-weight:400
;transition:transform 0.3s ease,color 0.3s ease;transform-origin: left center;}
.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.palette i{height:90px;border-radius:999px;display:block;border:1px solid rgba(0,0,0,.08)}


/* Heading */
.collection-card:hover h3 {
    transform: scale(1.2);
    color: #ffffff;
}

/* Each individual colour swatch */
.collection-card .palette i {
    transform-origin: center;
    will-change: transform;
}

/* Start a separate animation on EACH swatch */
.collection-card:hover .palette i {
    animation: paletteWave 0.32s ease-in-out both;
}

/*
   Each swatch waits until the previous swatch has
   stretched AND returned to normal.
*/
.collection-card:hover .palette i {animation: paletteWave 0.4s cubic-bezier(.45, 0, .25, 1) both;}
.collection-card:hover .palette i:nth-child(1) {animation-delay: 0s;}
.collection-card:hover .palette i:nth-child(2) {animation-delay: 0.16s;}
.collection-card:hover .palette i:nth-child(3) {animation-delay: 0.32s;}
.collection-card:hover .palette i:nth-child(4) {animation-delay: 0.48s;}
.collection-card:hover .palette i:nth-child(5) {animation-delay: 0.64s;}

@keyframes paletteWave {
    0% {transform: scaleX(1) scaleY(1);}
    20% {transform: scaleX(0.97) scaleY(1.08);}
    45% {transform: scaleX(0.92) scaleY(1.22);}
    70% {transform: scaleX(0.97) scaleY(1.08);}
    100% {transform: scaleX(1) scaleY(1);}
}


/* Calculator / forms */
.tool{display:grid;grid-template-columns:1fr 1fr;gap:50px;background:var(--ink);color:#fff;border-radius:36px;padding:50px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:.8rem;color:inherit;opacity:.72}.field input,.field select,.field textarea{width:100%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:inherit;border-radius:14px;padding:14px 15px;outline:none}.field option{color:#111}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(215,255,79,.15)}.calculator-result{border:1px solid rgba(255,255,255,.2);border-radius:26px;padding:28px;display:flex;flex-direction:column;justify-content:center;min-height:320px;background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.02))}.calculator-result strong{font-family:Georgia,serif;font-size:clamp(4rem,8vw,8rem);font-weight:400;line-height:.8;color:var(--lime)}
.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}.contact-panel{background:var(--ink);color:#fff;border-radius:30px;padding:32px}.contact-form{background:var(--cream);border-radius:30px;padding:32px;border:1px solid var(--line)}.contact-form .field input,.contact-form .field select,.contact-form .field textarea{background:#fff;color:var(--ink);border-color:var(--line)}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.reveal.in{opacity:1;transform:none}.reveal-delay{transition-delay:.12s}@keyframes up{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}

/* Responsive */
@media(max-width:1080px){.header-inner{grid-template-columns:1fr auto}.main-nav,.header-actions .btn{display:none}.menu-toggle{display:block}.hero-grid{grid-template-columns:1fr}.hero{padding-top:140px}.hero-visual{height:52vh;min-height:420px}.paint-orb{right:8%;top:44%}.product-grid{grid-template-columns:repeat(3,1fr)}.collection-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2}.page-hero-grid{grid-template-columns:1fr}.page-orb{justify-self:start}.tool{grid-template-columns:1fr}.contact-layout{grid-template-columns:1fr}}
@media(max-width:780px){.shell{width:min(calc(100% - 28px),var(--max))}.section{padding:78px 0}.site-header{padding:10px 0}.brand img{width:132px;height:auto}.brand small{display:none}.display{font-size:clamp(3.1rem,16vw,5.7rem)}.h2{font-size:clamp(2.8rem,13vw,4.8rem)}.hero{padding-top:115px}.hero-copy-bottom{display:grid;align-items:start}.hero-visual{border-radius:24px;min-height:390px}.paint-orb{width:130px;top:47%;right:5%}.card-grid{display:grid;grid-template-columns:1fr}.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:auto}.choice-grid{grid-template-columns:1fr 1fr}.choice{min-height:110px;padding:18px}.colour-stage{min-height:620px;padding:18px;border-radius:26px;align-items:end}.colour-stage-copy{padding:20px;margin-right:0;margin-bottom:82px}.swatch-rail{top:auto;right:18px;left:18px;bottom:18px;transform:none;display:flex;overflow:auto}.swatch{min-width:54px;width:54px;height:54px}.split{grid-template-columns:1fr;gap:32px}.image-stack{min-height:480px}.stat-row{grid-template-columns:1fr}.product-feature{grid-template-columns:1fr}.product-copy{padding:30px}.product-shot{min-height:400px}.advice-grid{grid-template-columns:1fr}.footer{border-radius:28px 28px 0 0}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid>div:last-child{grid-column:auto}.footer-bottom{display:grid}.page-hero{padding-top:130px}.page-orb{width:150px}.filter-inner{padding-bottom:2px}.search-input{display:none}.product-grid{grid-template-columns:1fr 1fr}.collection-grid{grid-template-columns:1fr}.tool{padding:24px;border-radius:25px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.contact-panel,.contact-form{padding:24px}.finder-result{grid-template-columns:1fr}}
@media(max-width:520px){.choice-grid,.product-grid{grid-template-columns:1fr}.hero-visual{min-height:350px}.product-shot{min-height:330px}.product-shot img{max-height:300px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}}
@view-transition{navigation:auto}

/* Homepage interactive colour-swatch hero */
.colour-card-hero{
  height:66svh;
  min-height:0;
  padding:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#d8d5cb;
  isolation:isolate;
}
.hero-colour-wall{
  position:absolute;
  inset:0;
  z-index:0;
  display:grid;
  grid-template-columns:repeat(14,minmax(0,1fr));
  grid-template-rows:repeat(4,1fr);
  gap:2px;
  overflow:hidden;
  background:rgba(244,241,235,.92);
}
/* Each grid cell is the opening of a colour-card rack. The pseudo-element is
   deliberately taller than the opening. Its upper 69% is the resting shade,
   while the lower 31% is a lighter companion shade hidden below the rack. */
.hero-colour-card{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:color-mix(in srgb,var(--card) 68%,white);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  isolation:isolate;
  cursor:default;
}
.hero-colour-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:145%;
  z-index:2;
  background:linear-gradient(
    to bottom,
    var(--card) 0%,
    var(--card) 69%,
    color-mix(in srgb,var(--card) 62%,white) 69%,
    color-mix(in srgb,var(--card) 62%,white) 100%
  );
  box-shadow:inset 0 -1px rgba(255,255,255,.18);
  transform:translateY(0);
  transition:transform .56s cubic-bezier(.16,1,.3,1),filter .3s ease;
  will-change:transform;
}
/* This very subtle slot shadow stays stationary. There is no white backing. */
.hero-colour-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 -8px 12px rgba(25,20,18,.035);
}
.hero-colour-card:hover,
.hero-colour-card.is-raised{
  z-index:8;
}
.hero-colour-card:hover::before,
.hero-colour-card.is-raised::before{
  /* Move the ENTIRE long card upward. The lighter lower portion now enters
     the slot, which creates the impression that the swatch is being pulled
     out of the rack rather than one coloured tile floating away. */
  transform:translateY(-31%);
  filter:saturate(1.035) brightness(1.01);
}
.hero-colour-card:hover::after,
.hero-colour-card.is-raised::after{
  box-shadow:inset 0 1px rgba(255,255,255,.18),inset 0 -8px 12px rgba(25,20,18,.03),0 8px 15px rgba(25,20,18,.09);
}
.hero-colour-copy{
  position:relative;
  z-index:20;
  display:flex;
  min-height:66svh;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:86px 24px 30px;
  text-align:center;
  pointer-events:none;
  color:#fff;
  text-shadow:0 8px 26px rgba(48,24,34,.28);
}
.hero-colour-copy .eyebrow{display:none}
.hero-colour-copy h1{
  max-width:1080px;
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(3rem,6.4vw,7rem);
  font-weight:950;
  line-height:.84;
  letter-spacing:-.065em;
  text-wrap:balance;
}
.hero-colour-copy h2{
  max-width:850px;
  margin:26px 0 0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(1rem,1.8vw,2rem);
  font-weight:650;
  line-height:1.08;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.hero-colour-cta{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:13px;
  margin-top:28px;
  padding:10px 16px 10px 19px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:999px;
  background:rgba(20,18,18,.12);
  backdrop-filter:blur(8px);
  color:#fff;
  font-weight:750;
  text-shadow:none;
  transition:background .3s ease,transform .3s var(--ease);
}
.hero-colour-cta span{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--ink);
}
.hero-colour-cta:hover{background:rgba(20,18,18,.3);transform:translateY(-2px)}

@media(max-width:1080px){
  /* Tablet: simplify the rack from 4 rows to 3 while preserving the 14-colour spectrum. */
  .hero-colour-wall{grid-template-columns:repeat(14,minmax(0,1fr));grid-template-rows:repeat(3,1fr)}
  .hero-colour-card:nth-child(n+43){display:none}
  .hero-colour-copy h1{font-size:clamp(3rem,8vw,6rem)}
}
@media(max-width:780px){
  .colour-card-hero{height:66svh}
  /* Phone / small tablet: only two swatch rows remain visible. */
  .hero-colour-wall{grid-template-columns:repeat(14,minmax(0,1fr));grid-template-rows:repeat(2,1fr)}
  .hero-colour-card:nth-child(n+29){display:none}
  .hero-colour-copy{min-height:66svh;padding:92px 18px 26px}
  .hero-colour-copy h1{font-size:clamp(2.35rem,11.5vw,4.7rem);line-height:.88}
  .hero-colour-copy h2{max-width:620px;margin-top:20px;font-size:clamp(.95rem,4.3vw,1.35rem)}
  .hero-colour-cta{margin-top:24px}
}
@media(max-width:520px){
  /* Keep two rows on narrow phones, but reduce the number of columns so each card remains substantial. */
  .hero-colour-wall{grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(2,1fr)}
  .hero-colour-card:nth-child(n+21){display:none}
  .hero-colour-copy h1{font-size:clamp(2.1rem,11vw,3.8rem)}
  .hero-colour-copy h2{font-size:clamp(.88rem,4vw,1.15rem)}
}
@media(prefers-reduced-motion:reduce){
  .hero-colour-card:hover::before,.hero-colour-card.is-raised::before{transform:none}
}


@media(prefers-reduced-motion:reduce){.nav-liquid span{animation:none!important}.nav-liquid{transition:none!important}}

/* Gooey shared navigation paint bubble — replaces the rotating per-link blobs. */
@media (min-width:1081px){
  .main-nav{isolation:isolate;overflow:visible}
  .nav-link{z-index:2;color:var(--ink);transition:color .18s ease;isolation:auto}
  .nav-link .nav-label{position:relative;z-index:2}
  .nav-link.is-goo-active{color:#fff}
  .nav-liquid{display:none!important}
  .nav-goo-layer{
    --goo-colour:#2167D5;
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:visible;
    opacity:0;
    filter:url("#nav-goo");
    transition:opacity .16s ease;
  }
  .nav-goo-layer.is-visible{opacity:1}
  .nav-goo-blob{
    position:absolute;
    left:0;
    top:0;
    display:block;
    border-radius:999px;
    background:var(--goo-colour);
    transform:translate3d(0,0,0);
    transform-origin:center;
    will-change:transform,width,height;
  }
  .nav-goo-lead{
    transition:transform .34s cubic-bezier(.22,.72,.22,1),width .28s ease,height .28s ease,background-color .22s ease;
  }
  .nav-goo-trail{
    opacity:.96;
    transition:transform .42s cubic-bezier(.2,.7,.16,1),width .32s ease,height .32s ease,background-color .22s ease;
  }
  .nav-goo-blob.no-transition{transition:none!important}
}
@media (max-width:1080px){.nav-goo-layer{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .nav-goo-blob{transition:none!important}
  .nav-goo-layer{filter:none!important}
}


/* Menu text preference: grey uppercase by default; white over the active paint bubble. */
@media (min-width:1081px){
  .nav-link{color:#7d7d7d!important;text-transform:uppercase}
  .nav-link.is-goo-active{color:#fff!important}
}