/* ===========================================================
   Vale Powder Coatings, SPECTRUM variation
   Colour-forward, light editorial. Non-critical styles.
   =========================================================== */

/* nav hover, desktop only */
@media (hover:hover){
  .island-link:hover{color:var(--teal);background:rgba(0,103,103,.08)}
  .island-cta:hover{background:var(--teal-deep);box-shadow:0 12px 24px -8px rgba(0,59,59,.75)}
  .island-toggle:hover{background:rgba(49,49,49,.06)}
  .island-panel a:hover{background:rgba(0,103,103,.08);color:var(--teal)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,103,103,.34)}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
}


/* sections */
.sec{padding:clamp(56px,8vw,108px) 0}
.kicker{display:inline-block;font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.kicker.light{color:#7fdede}
.sec-head{max-width:720px;margin-bottom:clamp(34px,5vw,58px)}
.sec-head h2{font-size:clamp(1.9rem,4vw,3rem)}
.sec-sub{margin-top:18px;font-size:1.04rem;color:#555;max-width:60ch}

/* marquee */
.marquee{overflow:hidden;border-top:1px solid rgba(49,49,49,.1);border-bottom:1px solid rgba(49,49,49,.1);background:var(--white);padding:16px 0}
.marquee-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:scroll-x 34s linear infinite}
.marquee-track span{font-family:var(--display);font-weight:600;font-size:clamp(1rem,2vw,1.5rem);color:var(--charcoal);padding:0 6px;letter-spacing:-0.01em}
.marquee-track i{color:var(--crimson);padding:0 4px;font-style:normal;font-size:1.2rem}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (hover:hover){.marquee:hover .marquee-track{animation-play-state:paused}}
/* pause button for the moving colour names and the hero swirl (touch and keyboard users too) */
.marquee{position:relative}
.motion-toggle{position:absolute;right:max(12px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(49,49,49,.22);background:#fff;color:var(--charcoal);font:600 13px/1 var(--body);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.08);-webkit-tap-highlight-color:transparent}
.motion-toggle[hidden]{display:none}
/* main.js: while the Prices bar covers the Pause button (phones, first view) it waits out of sight; it never shows half hidden */
.motion-toggle{transition:opacity .2s ease}
.motion-toggle.mt-tucked{opacity:0;pointer-events:none}
.motion-toggle.mt-tucked:focus-visible{opacity:1;pointer-events:auto}
.motion-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
html.motion-paused .marquee-track,html.motion-paused .swirl-spin{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.motion-toggle{display:none}}

/* about */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
.about-grid h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.about-body p{font-size:1.06rem;color:#4a4a4a;margin-bottom:18px}
.badge-row{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.badge-row li{font-family:var(--display);font-weight:600;font-size:13px;padding:9px 16px;border-radius:40px;background:rgba(0,103,103,.08);color:var(--teal);border:1px solid rgba(0,103,103,.18)}
.badge-row li:nth-child(2){background:rgba(200,16,46,.07);color:var(--crimson);border-color:rgba(200,16,46,.18)}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{position:relative;background:var(--white);border:1px solid rgba(49,49,49,.08);border-radius:18px;padding:30px 26px 28px;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.svc::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--crimson),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.svc-no{font-family:var(--display);font-weight:700;font-size:13px;color:#6a6a6a;letter-spacing:.1em}
.svc h3{font-size:1.32rem;margin:14px 0 10px}
.svc p{font-size:.97rem;color:#5a5a5a}
@media (hover:hover){
  .svc:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(49,49,49,.12)}
  .svc:hover::before{transform:scaleX(1)}
  .svc:hover h3{color:var(--accent)}
}

/* colour tools */
.colour-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.finish-toggle{display:inline-flex;align-items:center;gap:6px;background:var(--white);border:1px solid rgba(49,49,49,.12);border-radius:46px;padding:6px}
.finish-label{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6a6a6a;padding:0 10px 0 8px}
.finish-btn{font-family:var(--display);font-weight:600;font-size:14px;color:var(--charcoal);background:none;border:none;cursor:pointer;padding:10px 18px;min-height:44px;border-radius:40px;transition:background .25s ease,color .25s ease}
.finish-btn.is-on{background:var(--accent);color:#fff}
@media (hover:hover){.finish-btn:not(.is-on):hover{background:rgba(0,103,103,.08);color:var(--accent)}}
.accent-note{font-size:13px;color:#666}

/* swatch wall */
.swatch-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.swatch{position:relative;aspect-ratio:1;border-radius:14px;cursor:pointer;overflow:hidden;border:none;padding:0;background:var(--sw);min-height:44px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;isolation:isolate}
.swatch .meta{position:absolute;left:0;right:0;bottom:0;padding:9px 10px;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));color:#fff;text-align:left;opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}
.swatch .meta .nm{display:block;font-family:var(--display);font-weight:600;font-size:12.5px;line-height:1.15}
.swatch .meta .cd{display:block;font-size:10.5px;opacity:.85;letter-spacing:.04em}
.swatch.light .meta{background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0))}
.swatch .sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 62%);transform:translateX(-130%);transition:transform .6s ease;opacity:0}
.swatch .glosslayer{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(120% 60% at 30% 12%,rgba(255,255,255,.42),rgba(255,255,255,0) 55%)}

/* finish states applied to wall */
.finish-matt .swatch{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.finish-matt .swatch .glosslayer{opacity:0}
.finish-satin .swatch .glosslayer{opacity:.5}
.finish-gloss .swatch .glosslayer{opacity:1}
.finish-gloss .swatch{box-shadow:0 8px 20px rgba(0,0,0,.14)}

.swatch.is-active{outline:3px solid var(--charcoal);outline-offset:2px}

@media (hover:hover){
  .swatch:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 18px 36px rgba(0,0,0,.22);z-index:3}
  .swatch:hover .meta{opacity:1;transform:translateY(0)}
  .finish-gloss .swatch:hover .sheen,.finish-satin .swatch:hover .sheen{transform:translateX(130%);opacity:1}
}
.swatch:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.swatch:focus-visible .meta{opacity:1;transform:translateY(0)}

.swatch-foot{margin-top:20px;font-size:13px;color:#5f5f5f;max-width:62ch}

/* why */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.why-card{background:var(--white);border:1px solid rgba(49,49,49,.08);border-radius:18px;padding:28px 24px;transition:transform .3s ease,box-shadow .3s ease}
.why-num{font-family:var(--display);font-weight:700;font-size:3rem;color:var(--accent);line-height:1}
.why-plus{font-family:var(--display);font-weight:700;font-size:2rem;color:var(--crimson)}
.why-tag{display:inline-block;font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--accent);background:rgba(0,103,103,.08);border-radius:12px;padding:8px 14px;margin-bottom:14px}
.why-card p{font-size:.96rem;color:#5a5a5a;margin-top:12px}
@media (hover:hover){.why-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(49,49,49,.1)}}

/* image strip */
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ph{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,var(--teal),var(--teal-deep))}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ph figcaption{position:absolute;left:14px;bottom:12px;z-index:2;color:#fff;font-family:var(--display);font-weight:600;font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.32),rgba(0,0,0,0) 55%);z-index:1}
.ph-fail{background:linear-gradient(135deg,var(--crimson),var(--accent) 60%,var(--teal-deep))}
.ph-fail::before{content:"Vale";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:1.6rem;color:rgba(255,255,255,.85);z-index:1}
@media (hover:hover){.ph:hover img{transform:scale(1.07)}}

/* contact */
.contact{background:linear-gradient(150deg,var(--teal-deep),var(--teal));color:#fff;border-radius:0}
.contact h2{color:#fff;font-size:clamp(1.9rem,4vw,2.8rem)}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:start}
.contact-copy p{color:rgba(255,255,255,.82);font-size:1.06rem;max-width:46ch;margin-top:8px}
.contact-list{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:6px}
.contact-list li{display:flex;gap:18px;align-items:baseline;padding:14px 0;border-top:1px solid rgba(255,255,255,.16);min-height:44px}
.contact-list .ci{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#7fdede;min-width:64px}
.contact-list a,.contact-list span:not(.ci){color:#fff;font-size:1.04rem}
.contact-list a{position:relative}
@media (hover:hover){.contact-list a:hover{color:#bff0f0}}

/* form */
.quote-form{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:14px;backdrop-filter:blur(6px)}
.quote-form label{display:flex;flex-direction:column;gap:7px;font-family:var(--display);font-weight:600;font-size:13px;color:rgba(255,255,255,.9)}
.quote-form input,.quote-form select,.quote-form textarea{font-family:var(--body);font-size:15px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:12px 14px;min-height:44px;transition:border-color .25s ease,background .25s ease}
.quote-form textarea{resize:vertical;min-height:74px}
.quote-form select option{color:#1a1a1a}
.quote-form input::placeholder,.quote-form textarea::placeholder{color:rgba(255,255,255,.5)}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:none;border-color:#7fdede;background:rgba(255,255,255,.13)}
.quote-form .btn-primary{background:var(--crimson);box-shadow:0 12px 26px rgba(200,16,46,.34);margin-top:6px;justify-content:center}
@media (hover:hover){.quote-form .btn-primary:hover{background:#e01433;transform:translateY(-2px)}}
.form-note{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:2px}
.form-note.sent{color:#bff0f0}

/* footer */
.foot{background:var(--black);color:#cfcfcf;padding:clamp(48px,6vw,72px) 0 28px}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.foot-logo{height:auto}
.foot-word{font-family:var(--display);font-weight:700;font-size:1.3rem;color:#fff}
.foot-brand p{margin-top:16px;font-size:.95rem;color:#9a9a9a;max-width:38ch}
.foot-col h4{font-family:var(--display);font-size:14px;color:#fff;margin-bottom:14px;letter-spacing:.04em}
.foot-col a,.foot-col span{display:block;font-size:.95rem;color:#9a9a9a;margin-bottom:9px}
.foot-col a span{display:inline;margin:0;font-size:inherit;color:inherit}
.foot-col a{column-gap:.3em}
@media (hover:hover){.foot-col a:hover{color:#7fdede}}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#7a7a7a}

/* reveal */
/* hidden for the animation only once scripts run (html.js, set in <head>); no scripts or a failed main.js = everything shows */
.reveal{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal{opacity:0;transform:translateY(26px)}
.reveal.in,html.no-reveal .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}.swirl-spin{animation:none}.marquee-track{animation:none}}

/* local fallback visibility */
html.is-local .ph img{display:none}
html.is-local .ph{background:linear-gradient(135deg,var(--crimson),var(--accent) 60%,var(--teal-deep))}
html.is-local .ph::before{content:"Concept tile";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:1.2rem;color:rgba(255,255,255,.85);z-index:1}

/* ===================== MOBILE ===================== */
@media (max-width:768px){
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .swatch-wall{grid-template-columns:repeat(2,1fr);gap:10px}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .strip-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:22px}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .foot-in{grid-template-columns:1fr;gap:28px}
  .marquee-track{animation-duration:62s}
  .colour-tools{flex-direction:column;align-items:flex-start}
  .swatch .meta{opacity:1;transform:none;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0))}
  .strip-grid figure:last-child{display:none}
  .svc h3{font-size:1.18rem}
}
@media (max-width:420px){
  .swatch-wall{grid-template-columns:repeat(2,1fr)}
  .hero-meta{gap:18px}
}

/* ===========================================================
   QUOTE: pull-up price list (handle, bottom sheet, drawer)
   =========================================================== */

/* focus, keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.contact a:focus-visible,.contact button:focus-visible,.foot a:focus-visible,.qs-bar button:focus-visible{outline-color:#7fdede}

/* contact card, points at the sheet */
.quote-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:14px;backdrop-filter:blur(6px)}
.qc-kicker{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#7fdede}
.quote-card h3{color:#fff;font-size:clamp(1.35rem,2.6vw,1.7rem);line-height:1.12}
.quote-card > p{color:rgba(255,255,255,.82);font-size:1rem}
.qc-cats{display:grid;gap:10px;margin-top:4px}
.qc-cat{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;text-align:left;font:inherit;transition:background .25s ease,border-color .25s ease,transform .2s ease}
.qc-cat-name{font-family:var(--display);font-weight:600;font-size:1.08rem}
.qc-cat-from{font-size:13.5px;color:#bff0f0;white-space:nowrap}
@media (hover:hover){.qc-cat:hover{background:rgba(255,255,255,.14);border-color:#7fdede;transform:translateY(-2px)}}
.quote-card .qc-open{background:var(--crimson);box-shadow:0 12px 26px rgba(200,16,46,.34);margin-top:6px;justify-content:center;color:#fff}
@media (hover:hover){.quote-card .qc-open:hover{background:#e01433;transform:translateY(-2px)}}

/* handle: phone = bar pinned to bottom, desktop = pill */
.qs-handle{position:fixed;left:0;right:0;bottom:0;z-index:70;display:block;width:100%;margin:0;font:inherit;color:inherit;text-align:left;background:var(--white);border:none;border-top:1px solid rgba(49,49,49,.08);border-radius:22px 22px 0 0;box-shadow:0 -10px 34px rgba(26,26,26,.14);padding:8px var(--pad) calc(10px + env(safe-area-inset-bottom));cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.qs-handle[aria-expanded="true"]{transform:translateY(110%)}
.qs-grab{display:block;width:44px;height:5px;border-radius:5px;background:rgba(49,49,49,.22);margin:0 auto 8px}
.qs-handle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.qs-handle-txt{min-width:0}
.qs-handle-kicker{display:block;font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);line-height:1.3}
.qs-handle-title{display:block;font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--charcoal);line-height:1.15;letter-spacing:-0.01em}
.qs-handle-est{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;font-family:var(--display);font-weight:600;font-size:14px;padding:10px 16px;border-radius:40px;min-height:44px;white-space:nowrap;flex:none}
@media (prefers-reduced-motion:no-preference){
  .qs-handle.nudge{animation:qs-nudge 1.1s cubic-bezier(.3,.7,.2,1) 2}
  @keyframes qs-nudge{0%,100%{transform:none}35%{transform:translateY(-10px)}60%{transform:translateY(0)}78%{transform:translateY(-4px)}}
}
@media (hover:hover){
  .qs-handle:hover .qs-handle-est{background:var(--teal-deep)}
}

/* backdrop */
.qs-backdrop{position:fixed;inset:0;z-index:80;background:rgba(26,26,26,.5);opacity:0;visibility:hidden;transition:opacity .38s ease,visibility 0s linear .38s;-webkit-tap-highlight-color:transparent}
.qs-backdrop.is-on{opacity:1;visibility:visible;transition:opacity .38s ease,visibility 0s}
.qs-backdrop.is-dragging{visibility:visible;transition:none}

/* sheet */
.qs-sheet{position:fixed;left:0;right:0;bottom:0;z-index:90;height:90vh;height:90dvh;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);display:flex;flex-direction:column;background:var(--offwhite);color:var(--charcoal);border-radius:24px 24px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.25);overflow:hidden;transform:translate3d(0,100%,0);visibility:hidden;transition:transform .42s cubic-bezier(.2,.8,.2,1),visibility 0s linear .42s}
.qs-sheet.is-open{transform:none;visibility:visible;transition:transform .42s cubic-bezier(.2,.8,.2,1),visibility 0s}
.qs-sheet.is-dragging{visibility:visible;transition:none}
.qs-sheet [hidden]{display:none !important}

.qs-head{flex:none;background:var(--white);border-bottom:1px solid rgba(49,49,49,.08);padding:10px 20px 14px;touch-action:none;cursor:grab}
.qs-head .qs-grab{margin-bottom:6px}
.qs-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.qs-kicker{display:block;font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:4px}
.qs-title{font-size:1.65rem;line-height:1.05}
.qs-close{flex:none;width:44px;height:44px;border-radius:50%;border:none;background:rgba(49,49,49,.07);color:var(--charcoal);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease}
@media (hover:hover){.qs-close:hover{background:rgba(0,103,103,.12);color:var(--teal)}}
.qs-example{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;line-height:1.4;color:#4a4a4a;background:rgba(200,16,46,.05);border:1px solid rgba(200,16,46,.16);border-radius:12px;padding:9px 12px}
.qs-example .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 4px rgba(200,16,46,.14)}

.qs-pane{flex:1;min-height:0;display:flex;flex-direction:column}
.qs-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 20px 26px}

/* tabs, same pill language as the finish toggle */
.qs-tabs{flex:none;display:flex;gap:4px;margin:14px 20px 0;background:var(--white);border:1px solid rgba(49,49,49,.12);border-radius:46px;padding:5px}
.qs-tab{flex:1 1 0;min-width:0;min-height:44px;border:none;background:none;border-radius:40px;font-family:var(--display);font-weight:600;font-size:15px;color:var(--charcoal);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;white-space:nowrap;transition:background .25s ease,color .25s ease}
.qs-tab[aria-selected="true"]{background:var(--teal);color:#fff}
@media (hover:hover){.qs-tab[aria-selected="false"]:hover{background:rgba(0,103,103,.08);color:var(--teal)}}
.qs-count{display:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--crimson);color:#fff;font-family:var(--body);font-size:11px;font-weight:600;align-items:center;justify-content:center;line-height:1}
.qs-count.has{display:inline-flex}

.qs-intro{font-size:14px;color:#5a5a5a;margin:0 2px 12px}

/* item cards */
.qs-item{background:var(--white);border:1px solid rgba(49,49,49,.08);border-radius:18px;padding:14px 14px 6px;margin-bottom:10px;transition:border-color .25s ease,box-shadow .25s ease}
.qs-item.has-qty{border-color:rgba(0,103,103,.42);box-shadow:0 0 0 3px rgba(0,103,103,.08)}
.qs-item-main{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:8px}
.qs-item-txt{min-width:0}
.qs-item-name{display:block;font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--charcoal);line-height:1.2}
.qs-item-price{display:block;font-size:14px;color:#5a5a5a;margin-top:3px}
.qs-item-price strong{color:var(--teal);font-weight:600}
.qs-line{display:block;font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--crimson);margin-top:3px;min-height:1em}
.qs-line:empty{display:none}

.qs-stepper{flex:none;display:inline-flex;align-items:center;background:var(--offwhite);border:1px solid rgba(49,49,49,.12);border-radius:40px;padding:1px}
.qs-stepper button{width:44px;height:44px;border-radius:50%;border:none;background:none;color:var(--teal);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,opacity .2s ease}
.qs-stepper button:disabled{opacity:.3;cursor:default}
@media (hover:hover){.qs-stepper button:not(:disabled):hover{background:rgba(0,103,103,.1)}}
.qs-stepper input{width:40px;min-height:44px;border:none;background:none;text-align:center;font-family:var(--display);font-weight:700;font-size:16px;color:var(--charcoal);padding:0;-moz-appearance:textfield;appearance:textfield;border-radius:8px}
.qs-stepper input::-webkit-outer-spin-button,.qs-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qs-stepper.wide input{width:64px}

/* sandblasting switch */
.qs-sb{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;border-top:1px dashed rgba(49,49,49,.14);padding:6px 0 2px;cursor:pointer;font-size:14.5px;color:#4a4a4a;-webkit-tap-highlight-color:transparent}
.qs-sb input{font-size:16px;position:absolute;left:0;top:50%;width:44px;height:26px;margin:-11px 0 0;opacity:0;cursor:pointer}
.qs-switch{position:relative;flex:none;width:44px;height:26px;border-radius:26px;background:rgba(49,49,49,.32);box-shadow:inset 0 0 0 1px #7a7a7a;transition:background .25s ease,box-shadow .25s ease}
.qs-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.qs-sb input:checked + .qs-switch{background:var(--teal);box-shadow:none}
.qs-sb input:checked + .qs-switch::after{transform:translateX(18px)}
.qs-sb input:focus-visible + .qs-switch{outline:3px solid var(--teal);outline-offset:3px}
.qs-sb em{font-style:normal;font-weight:600;color:var(--crimson);white-space:nowrap}

/* per m2 */
.qs-area-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:8px}
.qs-area-row label{font-family:var(--display);font-weight:600;font-size:14px;color:var(--charcoal)}
.qs-hint{font-size:13px;color:#7a7a7a;padding-bottom:8px}
.qs-min{font-size:13px;color:#7a7a7a;padding:6px 0 8px}
.qs-min.applied{color:var(--crimson);font-weight:600}

/* bottom bar */
.qs-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(150deg,var(--teal-deep),var(--teal));color:#fff}
.qs-total{min-width:0}
.qs-total-lbl{display:block;font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7fdede;line-height:1.3}
.qs-total strong{display:block;font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:1.08;letter-spacing:-0.01em}
.qs-total-sub{display:block;font-size:12px;color:rgba(255,255,255,.74);line-height:1.3}
.qs-go{flex:none;background:var(--crimson);color:#fff;box-shadow:0 10px 24px rgba(200,16,46,.34);padding:13px 20px;justify-content:center;white-space:nowrap}
.qs-go-light{background:#fff;color:var(--teal-deep);box-shadow:0 10px 24px rgba(0,0,0,.18)}
@media (hover:hover){
  .qs-go:hover{background:#e01433;transform:translateY(-2px)}
  .qs-go-light:hover{background:#e9f7f7}
}

/* enquiry step */
.qs-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 8px;margin:-4px 0 6px -8px;border:none;background:none;border-radius:40px;font-family:var(--display);font-weight:600;font-size:15px;color:var(--teal);cursor:pointer}
@media (hover:hover){.qs-back:hover{background:rgba(0,103,103,.08)}}
.qs-sub{font-size:1.2rem;margin:4px 0 10px;outline:none}
.qs-summary{list-style:none;background:var(--white);border:1px solid rgba(49,49,49,.08);border-radius:16px;padding:4px 14px;margin-bottom:22px}
.qs-summary li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px dashed rgba(49,49,49,.14);font-size:14.5px}
.qs-summary li:last-child{border-bottom:none}
.qs-summary .nm{min-width:0}
.qs-summary .nm small{display:block;font-size:12.5px;color:#7a7a7a}
.qs-summary .amt{font-family:var(--display);font-weight:600;white-space:nowrap}
.qs-summary li.tot{font-family:var(--display);font-weight:700;font-size:1.05rem}
.qs-summary li.tot .amt{color:var(--teal);font-weight:700}
.qs-summary li.empty{display:block;color:#5a5a5a}

.qs-form{display:flex;flex-direction:column;gap:14px}
.qs-form .qs-sub{margin-bottom:0}
.qs-field{display:flex;flex-direction:column;gap:7px;border:none;min-width:0}
.qs-field > label,.qs-field legend{font-family:var(--display);font-weight:600;font-size:14px;color:var(--charcoal)}
.qs-field label span,.qs-field legend span{font-family:var(--body);font-weight:500;font-size:12.5px;color:#666;margin-left:4px}
.qs-field legend{margin-bottom:7px;padding:0}
.qs-field input[type="text"],.qs-field textarea{font-family:var(--body);font-size:16px;color:var(--charcoal);background:var(--white);border:1px solid rgba(49,49,49,.2);border-radius:12px;padding:12px 14px;min-height:48px;width:100%;transition:border-color .2s ease,box-shadow .2s ease;-webkit-appearance:none;appearance:none}
.qs-field textarea{resize:vertical;min-height:88px}
.qs-field input[type="text"]:focus,.qs-field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,103,103,.16)}
.qs-field input[aria-invalid="true"],.qs-field textarea[aria-invalid="true"]{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.qs-err{font-size:13px;color:var(--crimson);font-weight:500}
.qs-err:empty{display:none}

.qs-seg{display:flex;gap:4px;background:var(--white);border:1px solid rgba(49,49,49,.12);border-radius:46px;padding:4px}
.qs-seg label{position:relative;flex:1 1 0;min-width:0}
.qs-seg input{font-size:16px;position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.qs-seg span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:40px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--charcoal);white-space:nowrap;transition:background .25s ease,color .25s ease;pointer-events:none}
.qs-seg input:checked + span{background:var(--teal);color:#fff}
.qs-seg input:focus-visible + span{outline:3px solid var(--teal);outline-offset:2px}

.qs-swatches{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 2px 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.qs-sw{flex:none;width:44px;height:44px;border-radius:12px;border:none;background:var(--sw);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .2s ease}
.qs-sw[aria-pressed="true"]{outline:3px solid var(--charcoal);outline-offset:2px}
@media (hover:hover){.qs-sw:hover{transform:translateY(-3px)}}

.qs-demo{font-size:12.5px;color:#6a6a6a}

/* success */
.qs-done-icon{width:64px;height:64px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;margin:8px 0 14px;box-shadow:0 0 0 8px rgba(0,103,103,.12)}
.qs-done-title{font-size:1.6rem;outline:none}
.qs-done-lead{color:#4a4a4a;margin:8px 0 16px;font-size:15px}
.qs-sent{background:var(--white);border:1px solid rgba(49,49,49,.08);border-radius:16px;padding:6px 14px;margin-bottom:16px}
.qs-sent div{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:10px 0;border-bottom:1px dashed rgba(49,49,49,.14)}
.qs-sent div:last-child{border-bottom:none}
.qs-sent dt{font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);padding-top:2px}
.qs-sent dd{font-size:14.5px;min-width:0;overflow-wrap:anywhere;white-space:pre-line}
.qs-done-note{font-size:14px;color:#4a4a4a;margin-bottom:14px}
.qs-done-note a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.qs-restart{min-height:44px;padding:10px 20px;border-radius:40px;border:1.5px solid rgba(49,49,49,.22);background:none;font-family:var(--display);font-weight:600;font-size:15px;color:var(--charcoal);cursor:pointer}
@media (hover:hover){.qs-restart:hover{border-color:var(--teal);color:var(--teal)}}

/* phones: keep the footer clear of the pinned handle */
@media (max-width:899px){
  .foot{padding-bottom:calc(28px + 84px + env(safe-area-inset-bottom))}
  .foot-col a{display:flex;align-items:center;min-height:44px;margin-bottom:0}
}
@media (max-width:380px){
  .qs-go{padding:12px 14px;font-size:14px}
  .qs-total strong{font-size:1.45rem}
  .qs-tab{font-size:14px}
}

/* desktop: pill bottom right, sheet becomes a right side drawer */
@media (min-width:900px){
  .qs-handle{left:auto;right:24px;bottom:24px;width:auto;border-radius:46px;border:none;padding:6px 6px 6px 22px;background:var(--charcoal);border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 40px rgba(26,26,26,.28);cursor:pointer}
  .qs-handle .qs-grab{display:none}
  .qs-handle-row{gap:18px}
  .qs-handle-kicker{color:#7fdede;font-size:10px}
  .qs-handle-title{color:#fff;font-size:1.1rem}
  .qs-handle[aria-expanded="true"]{transform:translateY(160%)}
  .qs-sheet{left:auto;top:0;bottom:0;width:min(520px,100vw);height:100vh;height:100dvh;max-height:none;border-radius:24px 0 0 24px;transform:translate3d(100%,0,0)}
  .qs-head{cursor:default;touch-action:auto;padding-top:22px}
  .qs-head .qs-grab{display:none}
  .qs-scroll{padding:16px 26px 28px}
  .qs-tabs{margin:16px 26px 0}
  .qs-bar{padding:16px 26px 18px}
  .qs-head{padding-left:26px;padding-right:26px}
  /* keep the last footer line clear of the Prices pill (24px from the bottom, about 58px tall) */
  .foot{padding-bottom:124px}
}

@media (prefers-reduced-motion:reduce){
  .qs-sheet,.qs-sheet.is-open,.qs-backdrop,.qs-backdrop.is-on,.qs-handle{transition:none}
}

/* keep the contact email on one line on small phones */
.contact-list .ci{flex:none}
.contact-list a,.contact-list span:not(.ci){min-width:0;overflow-wrap:anywhere}
.contact-list a[href^="mailto"]{font-size:clamp(.9rem,4vw,1.04rem);overflow-wrap:normal}

/* QA 2026-10-19: contact rows, 44px tap targets on phone and email links */
.contact-list a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}

/* pages-build:start (written by pages-src/build_pages.py, do not edit by hand) */
.sec-more{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-family:var(--display);font-weight:600;font-size:16px;color:var(--teal);min-height:44px;border-bottom:2px solid rgba(0,103,103,.25);transition:border-color .3s ease,gap .3s ease}
@media (hover:hover){.sec-more:hover{border-color:var(--teal);gap:12px}}
.foot-col .foot-h{font-family:var(--display);font-size:14px;color:#fff;margin-bottom:14px;letter-spacing:.04em;line-height:1.2;font-weight:700}
.foot-brand p{color:#a3a3a3}
.foot-col a,.foot-col span{color:#a3a3a3}
.foot-base{color:#949494;font-size:13px}
.ph.ph-real{background:#dfe6e6}
html.is-local .ph.ph-real img{display:block}
html.is-local .ph.ph-real::before{content:none}
@media (max-width:768px){
  .strip-grid figure.ph-real:last-child{display:block}
  .strip-grid .ph-real:first-child{grid-column:1/-1;aspect-ratio:16/10}
}
/* pages-build:end */

/* ===========================================================
   Mobile fixes, 21 October 2026
   =========================================================== */

/* spam trap field from vale-cms.js: never visible (also hidden inline by the script) */
.vale-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* accent colour from the colour wall: readable text on pale swatches */
.btn-primary{color:var(--accent-on,#fff)}
.finish-btn.is-on{color:var(--accent-on,#fff)}
.why-num,.why-tag{color:var(--accent-text,var(--accent))}
@media (hover:hover){
  .svc:hover h3{color:var(--accent-text,var(--accent))}
  .btn-ghost:hover{border-color:var(--accent-text,var(--accent));color:var(--accent-text,var(--accent))}
  .finish-btn:not(.is-on):hover{color:var(--accent-text,var(--accent))}
}

/* swatch names: dark text on light colours, larger code text */
.swatch .meta .cd{font-size:12px}
.swatch.light .meta{background:linear-gradient(to top,rgba(255,255,255,.6),rgba(255,255,255,0));color:#1A1A1A}

/* small labels up to 12px */
.qs-handle-kicker,.qs-total-lbl,.qs-count{font-size:12px}

/* safe areas (notch and Dynamic Island in landscape, Home Screen app) */
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.island-wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.qs-handle{padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
@media (max-width:899px){
  .qs-head,.qs-scroll,.qs-bar{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .qs-tabs{margin-left:max(20px,env(safe-area-inset-left,0px));margin-right:max(20px,env(safe-area-inset-right,0px))}
}

/* the bottom Prices bar: a swipe on the words scrolls the page; the grab line and the pill still pull the list up */
@media (max-width:899px){
  .qs-handle{touch-action:pan-y}
  .qs-handle .qs-grab,.qs-handle-est{touch-action:none}
  .qs-handle .qs-grab{position:relative;width:56px}
  .qs-handle .qs-grab::before{content:"";position:absolute;left:-60px;right:-60px;top:-10px;bottom:-6px}
}

/* price list: the example note only on the list step; the send and done steps get a short header */
.qs-sheet:not([data-step="list"]) .qs-example,.qs-sheet:not([data-step="list"]) .qs-kicker{display:none}

/* price list on short phone screens (small iPhones, and any phone in landscape) */
@media (max-width:899px) and (max-height:740px){
  .qs-sheet{height:calc(100vh - 24px);height:calc(100dvh - 24px);max-height:none}
  .qs-head{padding-top:8px;padding-bottom:10px}
  .qs-head .qs-grab{margin-bottom:4px}
  .qs-kicker{display:none}
  .qs-title{font-size:1.4rem}
  .qs-example{margin-top:8px;padding:5px 10px;font-size:12.5px;line-height:1.35}
  .qs-tabs{margin-top:10px}
  .qs-scroll{padding-top:12px}
  .qs-bar{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .qs-total strong{font-size:1.4rem}
}
@media (max-width:899px) and (max-height:500px){
  .qs-sheet{height:100vh;height:100dvh;border-radius:0}
  .qs-head .qs-grab{display:none}
  .qs-head-row{align-items:center}
  .qs-title{font-size:1.25rem}
  .qs-example{margin-top:6px;white-space:nowrap}
  .qs-example > span:not(.dot){min-width:0;overflow:hidden;text-overflow:ellipsis}
  .qs-tabs{margin-top:8px;padding:3px}
  .qs-tab{min-height:40px}
  .qs-bar{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .qs-total-sub{display:none}
  .qs-go{min-height:44px;padding-top:10px;padding-bottom:10px}
}

/* tap targets */
.qs-stepper input{width:44px}
.qs-done-note a{display:inline-flex;align-items:center;min-height:44px}

/* narrow phones (320 to 360px): nothing wider than the screen */
.contact-grid > *{min-width:0}
@media (max-width:420px){
  .colour-tools{width:100%}
  .finish-toggle{display:flex;width:100%;max-width:100%}
  .finish-label{padding:0 6px 0 8px;letter-spacing:.1em}
  .finish-btn{flex:1 1 0;min-width:0;padding:10px 6px}
}
@media (max-width:360px){
  .contact-list li{flex-direction:column;gap:2px}
}

/* home on phones: services, why and colour wall */
@media (max-width:520px){
  .svc-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .svc{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;padding:20px}
  .svc h3{margin:0;font-size:1.15rem}
  .svc p{grid-column:1/-1;margin-top:8px}
  .why-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .why-card{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:16px;align-items:center;padding:18px 20px}
  .why-num{grid-column:1;grid-row:1;justify-self:end;margin-right:18px;font-size:2.4rem}
  .why-plus{grid-column:1;grid-row:1;justify-self:end;align-self:start;font-size:1.7rem;line-height:1.2}
  .why-plus[hidden]{display:none}
  .why-tag{grid-column:1;grid-row:1;margin:0;width:100%;padding:8px 0;text-align:center;font-size:1.3rem}
  .why-card p{grid-column:2;grid-row:1;margin-top:0;min-width:0}
}
@media (max-width:768px){
  .swatch-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .swatch .meta{padding:7px 8px}
  .swatch:not(.light) .meta{background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0))}
  .swatch .meta .nm{font-size:12px}
}
@media (min-width:560px) and (max-width:768px){
  .swatch-wall{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* hero on phones */
@media (max-width:600px){
  .eyebrow{align-items:flex-start;letter-spacing:.14em;line-height:1.5}
  .eyebrow .dot{flex:none;margin-top:5px}
  .hero-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .hero-meta strong{font-size:clamp(1.05rem,5vw,1.3rem)}
  .hero-meta span{display:block;line-height:1.35;margin-top:4px}
}
@media (max-width:385px){.eyebrow{letter-spacing:.1em}}
@media (max-width:768px) and (max-height:700px){
  .hero{padding-top:calc(var(--island-space) + 12px);padding-bottom:32px}
  .eyebrow{margin-bottom:14px}
  .hero h1{margin-bottom:14px}
  .hero p.lead{margin-bottom:20px}
  .hero-meta{margin-top:24px}
}

/* phones: the Pause button stays inside the colour strip (the strip clips anything outside it, which used to cut
   the button in half). At first view the Prices bar can cover it, so main.js fades it out until the strip scrolls clear. */

/* price list on short wide screens (a big phone held sideways uses the side panel) */
@media (min-width:900px) and (max-height:560px){
  .qs-head{padding-top:10px;padding-bottom:10px}
  .qs-kicker{display:none}
  .qs-head-row{align-items:center}
  .qs-title{font-size:1.25rem}
  .qs-example{margin-top:6px;padding:4px 10px;font-size:12.5px;line-height:1.35;white-space:nowrap}
  .qs-example > span:not(.dot){min-width:0;overflow:hidden;text-overflow:ellipsis}
  .qs-tabs{margin-top:8px;padding:3px}
  .qs-tab{min-height:40px}
  .qs-scroll{padding-top:10px}
  .qs-bar{padding-top:8px;padding-bottom:8px}
  .qs-total-sub{display:none}
  .qs-go{min-height:44px;padding-top:10px;padding-bottom:10px}
  .qs-handle{right:16px;bottom:12px}
}

/* no JavaScript (or main.js failed): the price list cannot open, so its bar is not shown */
html:not(.js) .qs-handle,html.no-reveal .qs-handle{display:none}
/* very short screens (phones held sideways): a smaller intro so more of the list shows */
@media (max-height:500px){
  .qs-intro{font-size:14px;line-height:1.45;margin-bottom:10px}
  .qs-head{padding-top:8px}
}