/* ==========================================================================
   Premium layer — refined palette, paver pattern, motion.
   Everything here is additive: remove this file (and premium.js) to go back.
   ========================================================================== */

:root{
  --cp-sand:#f1ebe1;          /* warm beige for calm background sections */
  --cp-sand-line:#e3dacb;
  --cp-sage:#e7ebe3;          /* soft sage, second background tone */
  --cp-sage-deep:#56654f;     /* small accents on the sage/sand tones */
  --cp-ease-out:cubic-bezier(.16,1,.3,1);
  --cp-shadow-soft:0 1px 2px rgba(24,35,51,.04),0 12px 32px -14px rgba(24,35,51,.22);
  --cp-shadow-lift:0 2px 4px rgba(24,35,51,.04),0 28px 48px -22px rgba(24,35,51,.32);
  /* Running-bond paving: the recurring motif of the brand */
  --cp-pavers-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M-48 -19.4C-39.36 -19.4 -32.64 -28.6 -24 -28.6C-15.36 -28.6 -8.64 -19.4 0 -19.4C8.64 -19.4 15.36 -28.6 24 -28.6C32.64 -28.6 39.36 -19.4 48 -19.4C56.64 -19.4 63.36 -28.6 72 -28.6C80.64 -28.6 87.36 -19.4 96 -19.4M-48 -4.6C-39.36 -4.6 -32.64 4.6 -24 4.6C-15.36 4.6 -8.64 -4.6 0 -4.6C8.64 -4.6 15.36 4.6 24 4.6C32.64 4.6 39.36 -4.6 48 -4.6C56.64 -4.6 63.36 4.6 72 4.6C80.64 4.6 87.36 -4.6 96 -4.6M-48 28.6C-39.36 28.6 -32.64 19.4 -24 19.4C-15.36 19.4 -8.64 28.6 0 28.6C8.64 28.6 15.36 19.4 24 19.4C32.64 19.4 39.36 28.6 48 28.6C56.64 28.6 63.36 19.4 72 19.4C80.64 19.4 87.36 28.6 96 28.6M-48 43.4C-39.36 43.4 -32.64 52.6 -24 52.6C-15.36 52.6 -8.64 43.4 0 43.4C8.64 43.4 15.36 52.6 24 52.6C32.64 52.6 39.36 43.4 48 43.4C56.64 43.4 63.36 52.6 72 52.6C80.64 52.6 87.36 43.4 96 43.4M-48 76.6C-39.36 76.6 -32.64 67.4 -24 67.4C-15.36 67.4 -8.64 76.6 0 76.6C8.64 76.6 15.36 67.4 24 67.4C32.64 67.4 39.36 76.6 48 76.6C56.64 76.6 63.36 67.4 72 67.4C80.64 67.4 87.36 76.6 96 76.6M-48 -52.6L-48 -19.4M0 -52.6L0 -19.4M48 -52.6L48 -19.4M96 -52.6L96 -19.4M-24 -28.6L-24 4.6M24 -28.6L24 4.6M72 -28.6L72 4.6M-48 -4.6L-48 28.6M0 -4.6L0 28.6M48 -4.6L48 28.6M96 -4.6L96 28.6M-24 19.4L-24 52.6M24 19.4L24 52.6M72 19.4L72 52.6M-48 43.4L-48 76.6M0 43.4L0 76.6M48 43.4L48 76.6M96 43.4L96 76.6M-24 67.4L-24 100.6M24 67.4L24 100.6M72 67.4L72 100.6'/%3E%3C/svg%3E");
  --cp-pavers-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%23182333' stroke-opacity='.075' stroke-width='1'%3E%3Cpath d='M-48 -19.4C-39.36 -19.4 -32.64 -28.6 -24 -28.6C-15.36 -28.6 -8.64 -19.4 0 -19.4C8.64 -19.4 15.36 -28.6 24 -28.6C32.64 -28.6 39.36 -19.4 48 -19.4C56.64 -19.4 63.36 -28.6 72 -28.6C80.64 -28.6 87.36 -19.4 96 -19.4M-48 -4.6C-39.36 -4.6 -32.64 4.6 -24 4.6C-15.36 4.6 -8.64 -4.6 0 -4.6C8.64 -4.6 15.36 4.6 24 4.6C32.64 4.6 39.36 -4.6 48 -4.6C56.64 -4.6 63.36 4.6 72 4.6C80.64 4.6 87.36 -4.6 96 -4.6M-48 28.6C-39.36 28.6 -32.64 19.4 -24 19.4C-15.36 19.4 -8.64 28.6 0 28.6C8.64 28.6 15.36 19.4 24 19.4C32.64 19.4 39.36 28.6 48 28.6C56.64 28.6 63.36 19.4 72 19.4C80.64 19.4 87.36 28.6 96 28.6M-48 43.4C-39.36 43.4 -32.64 52.6 -24 52.6C-15.36 52.6 -8.64 43.4 0 43.4C8.64 43.4 15.36 52.6 24 52.6C32.64 52.6 39.36 43.4 48 43.4C56.64 43.4 63.36 52.6 72 52.6C80.64 52.6 87.36 43.4 96 43.4M-48 76.6C-39.36 76.6 -32.64 67.4 -24 67.4C-15.36 67.4 -8.64 76.6 0 76.6C8.64 76.6 15.36 67.4 24 67.4C32.64 67.4 39.36 76.6 48 76.6C56.64 76.6 63.36 67.4 72 67.4C80.64 67.4 87.36 76.6 96 76.6M-48 -52.6L-48 -19.4M0 -52.6L0 -19.4M48 -52.6L48 -19.4M96 -52.6L96 -19.4M-24 -28.6L-24 4.6M24 -28.6L24 4.6M72 -28.6L72 4.6M-48 -4.6L-48 28.6M0 -4.6L0 28.6M48 -4.6L48 28.6M96 -4.6L96 28.6M-24 19.4L-24 52.6M24 19.4L24 52.6M72 19.4L72 52.6M-48 43.4L-48 76.6M0 43.4L0 76.6M48 43.4L48 76.6M96 43.4L96 76.6M-24 67.4L-24 100.6M24 67.4L24 100.6M72 67.4L72 100.6'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- Icons: one line weight everywhere */
.cp-icon{stroke-width:1.5}
.cp-lightbox .cp-icon,.cp-search-panel .cp-icon{stroke-width:1.5}

/* ---------------------------------------------------------------- Palette on the home sections */
.cp-solutions{background:var(--cp-sage)}
.cp-solutions .cp-tablist{border-color:#d3dacd}
.cp-solution-card{border-color:#d3dacd!important}
.cp-benefits{background:var(--cp-sand);position:relative;overflow:hidden}
.cp-benefits .cp-disclosure,.cp-benefits .cp-disclosure:first-child{border-color:var(--cp-sand-line)}
.cp-benefits .cp-benefit-mark .cp-icon{color:var(--cp-sage-deep)}
.cp-assurance{background:#fff;border-bottom:1px solid var(--cp-line)}
.cp-about-values{background:var(--cp-sand)}
.cp-page-card{background:var(--cp-sand);border-color:var(--cp-sand-line)}
.cp-page-card.has-media{background:#fff}

/* ---------------------------------------------------------------- Paver pattern: page headings, benefits, footer */
.cp-page-heading,.cp-hero{position:relative;overflow:hidden}
.cp-page-heading::after,.cp-benefits::before,.cp-hero::before{content:"";position:absolute;pointer-events:none;background:var(--cp-pavers-light) 0 0/56px 56px}
.cp-page-heading::after{top:0;right:0;bottom:0;width:min(46vw,640px);-webkit-mask:linear-gradient(90deg,transparent,#000 70%);mask:linear-gradient(90deg,transparent,#000 70%)}
.cp-page-heading>.cp-container{position:relative;z-index:1}
.cp-benefits::before{inset:0 0 0 auto;width:min(40vw,560px);-webkit-mask:radial-gradient(120% 90% at 100% 100%,#000 20%,transparent 70%);mask:radial-gradient(120% 90% at 100% 100%,#000 20%,transparent 70%)}
.cp-benefits>.cp-container{position:relative;z-index:1}
.cp-hero::before{left:0;top:0;width:min(38vw,520px);height:100%;-webkit-mask:radial-gradient(90% 80% at 0 0,#000 15%,transparent 70%);mask:radial-gradient(90% 80% at 0 0,#000 15%,transparent 70%);opacity:.9}
.cp-hero>.cp-container{position:relative;z-index:1}
.cp-footer{position:relative;overflow:hidden}
.cp-footer::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--cp-pavers-dark) 0 0/56px 56px;-webkit-mask:linear-gradient(180deg,#000,transparent 75%);mask:linear-gradient(180deg,#000,transparent 75%)}
.cp-footer>.cp-container{position:relative;z-index:1}
/* A thin orange „kerb” line where the footer starts */
.cp-footer::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--cp-orange),#c9761b 60%,transparent)}

/* ---------------------------------------------------------------- Header: gains depth once the page scrolls */
.cp-header{transition:box-shadow 300ms ease,border-color 300ms ease}
.cp-header.is-scrolled{box-shadow:0 10px 30px -18px rgba(24,35,51,.35);border-bottom-color:transparent}
@media(min-width:901px){
  .cp-navigation>a:not(.cp-nav-extra),.cp-menu-dropdown>summary{position:relative}
  .cp-navigation>a:not(.cp-nav-extra)::after,.cp-menu-dropdown>summary::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--cp-orange);transform:scaleX(0);transform-origin:right;transition:transform 450ms var(--cp-ease-out)}
  .cp-navigation>a:not(.cp-nav-extra):hover::after,.cp-menu-dropdown>summary:hover::after,.cp-menu-dropdown[open]>summary::after{transform:scaleX(1);transform-origin:left}
  .cp-menu-dropdown>summary::after{right:22px}
}

/* ---------------------------------------------------------------- Cards and buttons: quiet, tactile hover */
.cp-button .cp-icon,.cp-text-link .cp-icon,.cp-small-link,.wp-block-button__link::after{transition:transform 450ms var(--cp-ease-out)}
@media(hover:hover){
  .cp-button:hover .cp-icon,.cp-text-link:hover .cp-icon{transform:translateX(5px)}
  .cp-blocks .wp-block-button__link:hover::after{transform:translateX(4px)}

  .cp-category-card,.cp-page-card,.cp-content-blurb,.cp-about-value-grid .cp-content-blurb{transition:transform 600ms var(--cp-ease-out),box-shadow 600ms var(--cp-ease-out),border-color 300ms ease}
  .cp-category-card:hover,.cp-page-card:hover{transform:translateY(-6px);box-shadow:var(--cp-shadow-lift);border-color:transparent}
  .cp-blocks .cp-content-blurb:hover,.cp-about-value-grid .cp-content-blurb:hover{transform:translateY(-4px);box-shadow:var(--cp-shadow-soft)}

  .cp-product-image{transition:box-shadow 600ms var(--cp-ease-out),border-color 300ms ease}
  .cp-product-card:hover .cp-product-image{box-shadow:var(--cp-shadow-soft);border-color:transparent}
  .cp-product-card .cp-product-image>img,.cp-category-visual img{transition:transform 900ms var(--cp-ease-out)!important}
  .cp-product-card:hover .cp-product-image>img{transform:scale(1.06)!important}

  .cp-solution-card .cp-solution-media img{transition:transform 1100ms var(--cp-ease-out)}
  .cp-solution-card:hover .cp-solution-media img{transform:scale(1.07)}
  .cp-solution-card h3{transition:color 250ms ease}
  .cp-solution-card:hover h3{color:#8d5009}

  .cp-page-card-media img{transition:transform 1100ms var(--cp-ease-out)}
  .cp-page-card:hover .cp-page-card-media img{transform:scale(1.05)}
}

/* ---------------------------------------------------------------- Images fade in as they arrive (no jumps: size is reserved) */
.cp-img-fade{opacity:0;transition:opacity 700ms ease}
.cp-img-fade.is-loaded{opacity:1}

/* ---------------------------------------------------------------- Reveal on scroll (only when JS runs and motion is allowed) */
html.cp-anim :is(
  .cp-section-heading,.cp-category-card,.cp-product-card,.cp-solution-card,.cp-benefits-grid>*,.cp-service,
  .cp-assurance .cp-container>div,.cp-page-card,.cp-blocks>*,.cp-blocks .cp-content-blurb,.cp-about-intro>*,
  .cp-about-value-grid>*,.cp-about-stats>*,.cp-footer-top>*,.cp-page-banner,.cp-product-tabs,.cp-fav-list,.cp-shop-results .cp-product-card
):not(.is-in){opacity:0;transform:translateY(28px)}
html.cp-anim .is-in:not(.is-done){transition:opacity 900ms var(--cp-ease-out) var(--cp-d,0ms),transform 1100ms var(--cp-ease-out) var(--cp-d,0ms)}
html.cp-anim .cp-page-banner:not(.is-in){transform:none;clip-path:inset(0 0 12% 0 round 8px)}
html.cp-anim .cp-page-banner.is-in:not(.is-done){clip-path:inset(0 0 0 0 round 8px);transition:opacity 900ms ease,clip-path 1300ms var(--cp-ease-out)}

/* ---------------------------------------------------------------- Hero entrance */
@keyframes cp-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes cp-unveil{from{clip-path:inset(0 0 0 22% round 4px);opacity:.2}to{clip-path:inset(0 0 0 0 round 4px);opacity:1}}
@keyframes cp-settle{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes cp-pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
html.cp-anim .cp-hero-copy>*{animation:cp-rise 1000ms var(--cp-ease-out) both}
html.cp-anim .cp-hero-copy>*:nth-child(2){animation-delay:90ms}
html.cp-anim .cp-hero-copy>*:nth-child(3){animation-delay:180ms}
html.cp-anim .cp-hero-copy>*:nth-child(4){animation-delay:270ms}
html.cp-anim .cp-hero-copy>*:nth-child(5){animation-delay:360ms}
html.cp-anim .cp-hero-visual .cp-hero-photo{animation:cp-unveil 1400ms var(--cp-ease-out) 120ms both}
html.cp-anim .cp-hero-caption{animation:cp-rise 900ms var(--cp-ease-out) 700ms both}
html.cp-anim .cp-experience{animation:cp-pop 900ms var(--cp-ease-out) 850ms both}
html.cp-anim .cp-page-heading>.cp-container>*{animation:cp-rise 900ms var(--cp-ease-out) both}
html.cp-anim .cp-page-heading>.cp-container>*:nth-child(2){animation-delay:70ms}
html.cp-anim .cp-page-heading>.cp-container>*:nth-child(3){animation-delay:140ms}

/* ---------------------------------------------------------------- Page-to-page transition (Chrome, Edge, Safari 18+) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .cp-topbar{view-transition-name:cp-topbar}
  .cp-header{view-transition-name:cp-header}
  ::view-transition-old(root){animation:cp-vt-out 220ms ease both}
  ::view-transition-new(root){animation:cp-vt-in 420ms var(--cp-ease-out) both}
  ::view-transition-group(cp-header),::view-transition-group(cp-topbar){animation:none}
}
@keyframes cp-vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes cp-vt-in{from{opacity:0;transform:translateY(10px)}}

@media(max-width:640px){
  html.cp-anim :is(.cp-section-heading,.cp-category-card,.cp-product-card,.cp-solution-card,.cp-benefits-grid>*,.cp-service,.cp-page-card,.cp-blocks>*,.cp-footer-top>*):not(.is-in){transform:translateY(18px)}
  .cp-page-heading::after{width:60vw;opacity:.7}
}
@media(prefers-reduced-motion:reduce){
  .cp-img-fade{opacity:1;transition:none}
}

/* Benefits → service: the beige fades into white instead of ending on a hard edge, and the service card gets room to breathe. */
.cp-benefits{background:linear-gradient(180deg,#fff 0,var(--cp-sand) 150px,var(--cp-sand) calc(100% - 220px),#fff 100%);padding-bottom:120px}
.cp-benefits::before{-webkit-mask:radial-gradient(90% 70% at 100% 45%,#000 10%,transparent 65%);mask:radial-gradient(90% 70% at 100% 45%,#000 10%,transparent 65%)}
.cp-service-section{padding-top:40px}
.cp-service{box-shadow:0 2px 6px rgba(24,35,51,.05),0 40px 80px -40px rgba(24,35,51,.45);border-radius:6px;overflow:hidden}
@media(max-width:1150px){.cp-benefits{padding-bottom:100px}}
@media(max-width:640px){.cp-benefits{background:linear-gradient(180deg,#fff 0,var(--cp-sand) 90px,var(--cp-sand) calc(100% - 130px),#fff 100%);padding-bottom:80px}.cp-service-section{padding-top:20px}}

/* ==========================================================================
   404 — Page not found
   ========================================================================== */
.cp-404-hero{background:linear-gradient(180deg,var(--cp-paper),var(--cp-sand));position:relative;overflow:hidden;border-bottom:1px solid var(--cp-sand-line)}
.cp-404-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--cp-pavers-light) 0 0/56px 56px;-webkit-mask:radial-gradient(70% 90% at 85% 50%,#000 10%,transparent 70%);mask:radial-gradient(70% 90% at 85% 50%,#000 10%,transparent 70%)}
.cp-404-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:60px;align-items:center;min-height:560px;padding-block:80px}
.cp-404-copy .cp-eyebrow{display:flex;align-items:center;gap:12px;color:#9b5b11}
.cp-studio .cp-404-copy h1{font-size:clamp(40px,5.4vw,72px);line-height:1.02;letter-spacing:-2.8px;margin:22px 0 24px}
.cp-404-copy h1 em{font-style:normal;color:#b0690f}
.cp-404-copy>p{font-size:16px;line-height:1.85;color:var(--cp-muted);max-width:520px;margin:0 0 32px}
.cp-404-search{display:flex;align-items:center;gap:12px;max-width:560px;background:#fff;border:1px solid var(--cp-sand-line);border-radius:6px;padding:8px 8px 8px 18px;box-shadow:var(--cp-shadow-soft);transition:border-color 200ms ease,box-shadow 300ms ease}
.cp-404-search:focus-within{border-color:var(--cp-ink);box-shadow:0 0 0 4px rgba(253,161,43,.25),var(--cp-shadow-soft)}
.cp-404-search>.cp-icon{flex:0 0 20px;width:20px;height:20px;color:var(--cp-muted)}
.cp-404-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--cp-ink);padding:10px 0}
.cp-404-search .cp-button{padding:13px 20px;gap:12px;flex-shrink:0}
.cp-404-actions{margin-top:26px}
.cp-404-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:380px}
/* The number is „paved”: joints of the pavers run through the letters. */
.cp-404-num{display:block;font-size:clamp(150px,21vw,300px);font-weight:800;line-height:.82;letter-spacing:-.07em;padding-right:.05em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none' stroke='%23f1ebe1' stroke-opacity='.55' stroke-width='1.6'%3E%3Cpath d='M0 .8h48M0 12.8h48M.8 0v12M24.8 12v12'/%3E%3C/svg%3E") 0 0/48px 24px,linear-gradient(140deg,#223047 0%,#182333 55%,#0f1826 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 30px 40px rgba(24,35,51,.18))}
.cp-404-stone{position:absolute;top:18%;right:10%;width:74px;height:37px;border-radius:3px;background:linear-gradient(135deg,#ffb54d,var(--cp-orange) 55%,#d98614);box-shadow:0 18px 30px -12px rgba(169,99,14,.55),inset 0 1px 0 rgba(255,255,255,.35);transform:rotate(-14deg);animation:cp-stone-float 6s ease-in-out infinite}
@keyframes cp-stone-float{0%,100%{transform:translateY(0) rotate(-14deg)}50%{transform:translateY(-12px) rotate(-9deg)}}
.cp-404-caption{margin-top:26px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:650;color:#8a7a62}
.cp-404-paths .cp-section-heading{margin-bottom:34px}
.cp-404-path-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cp-404-path{display:flex;flex-direction:column;padding:30px 28px;background:#fff;border:1px solid var(--cp-line);border-radius:6px;color:var(--cp-ink);text-decoration:none;transition:transform 600ms var(--cp-ease-out),box-shadow 600ms var(--cp-ease-out),border-color 300ms ease}
.cp-404-path-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--cp-sand);color:#a3610f;margin-bottom:24px;transition:background-color 300ms ease,color 300ms ease}
.cp-404-path-icon .cp-icon{width:24px;height:24px}
.cp-404-path h3{font-size:20px;letter-spacing:-.4px;margin:0 0 10px}
.cp-404-path p{font-size:13px;line-height:1.75;color:var(--cp-muted);margin:0 0 26px}
.cp-404-path .cp-small-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:650}
.cp-404-path .cp-small-link .cp-icon{width:16px;height:16px;transition:transform 450ms var(--cp-ease-out)}
@media(hover:hover){
  .cp-404-path:hover{transform:translateY(-6px);box-shadow:var(--cp-shadow-lift);border-color:transparent}
  .cp-404-path:hover .cp-404-path-icon{background:var(--cp-ink);color:#fff}
  .cp-404-path:hover .cp-small-link .cp-icon{transform:translateX(5px)}
}
.cp-404-products{padding-top:0}
html.cp-anim .cp-404-path:not(.is-in){opacity:0;transform:translateY(28px)}
html.cp-anim .cp-404-num{animation:cp-rise 1200ms var(--cp-ease-out) 150ms both}
html.cp-anim .cp-404-copy>*{animation:cp-rise 1000ms var(--cp-ease-out) both}
html.cp-anim .cp-404-copy>*:nth-child(2){animation-delay:80ms}
html.cp-anim .cp-404-copy>*:nth-child(3){animation-delay:160ms}
html.cp-anim .cp-404-copy>*:nth-child(4){animation-delay:240ms}
html.cp-anim .cp-404-copy>*:nth-child(5){animation-delay:320ms}
@media(max-width:1150px){.cp-404-path-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.cp-404-grid{grid-template-columns:1fr;gap:10px;min-height:0;padding-block:50px 40px}.cp-404-visual{order:-1;min-height:230px}.cp-404-stone{top:8%;right:18%;width:56px;height:28px}}
@media(max-width:640px){.cp-404-path-grid{grid-template-columns:1fr}.cp-404-search{padding:6px 6px 6px 14px}.cp-404-search .cp-button{padding:12px 14px}.cp-404-search .cp-button .cp-icon{display:none}.cp-studio .cp-404-copy h1{letter-spacing:-1.6px}.cp-404-caption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.cp-404-stone{animation:none}}

/* Benefits: the colour change happens entirely in the empty space above and below the text —
   it continues from the sage section above (no white band, no edge) and fades to white only after the last question. */
.cp-benefits{padding-top:130px;padding-bottom:150px;background:linear-gradient(180deg,var(--cp-sage) 0,var(--cp-sand) 105px,var(--cp-sand) calc(100% - 135px),#fff 100%)}
@media(max-width:1150px){.cp-benefits{padding-top:110px;padding-bottom:130px}}
@media(max-width:640px){.cp-benefits{padding-top:80px;padding-bottom:95px;background:linear-gradient(180deg,var(--cp-sage) 0,var(--cp-sand) 65px,var(--cp-sand) calc(100% - 85px),#fff 100%)}}

/* Benefits start with a clean edge under the sage section (no gradient there); only the end fades into white. */
.cp-benefits{padding-top:110px;background:linear-gradient(180deg,var(--cp-sand) 0,var(--cp-sand) calc(100% - 135px),#fff 100%)}
@media(max-width:1150px){.cp-benefits{padding-top:95px}}
@media(max-width:640px){.cp-benefits{padding-top:60px;background:linear-gradient(180deg,var(--cp-sand) 0,var(--cp-sand) calc(100% - 85px),#fff 100%)}}

/* Hero: the paving pattern reads more clearly. */
.cp-hero::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%23182333' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M-48 -19.4C-39.36 -19.4 -32.64 -28.6 -24 -28.6C-15.36 -28.6 -8.64 -19.4 0 -19.4C8.64 -19.4 15.36 -28.6 24 -28.6C32.64 -28.6 39.36 -19.4 48 -19.4C56.64 -19.4 63.36 -28.6 72 -28.6C80.64 -28.6 87.36 -19.4 96 -19.4M-48 -4.6C-39.36 -4.6 -32.64 4.6 -24 4.6C-15.36 4.6 -8.64 -4.6 0 -4.6C8.64 -4.6 15.36 4.6 24 4.6C32.64 4.6 39.36 -4.6 48 -4.6C56.64 -4.6 63.36 4.6 72 4.6C80.64 4.6 87.36 -4.6 96 -4.6M-48 28.6C-39.36 28.6 -32.64 19.4 -24 19.4C-15.36 19.4 -8.64 28.6 0 28.6C8.64 28.6 15.36 19.4 24 19.4C32.64 19.4 39.36 28.6 48 28.6C56.64 28.6 63.36 19.4 72 19.4C80.64 19.4 87.36 28.6 96 28.6M-48 43.4C-39.36 43.4 -32.64 52.6 -24 52.6C-15.36 52.6 -8.64 43.4 0 43.4C8.64 43.4 15.36 52.6 24 52.6C32.64 52.6 39.36 43.4 48 43.4C56.64 43.4 63.36 52.6 72 52.6C80.64 52.6 87.36 43.4 96 43.4M-48 76.6C-39.36 76.6 -32.64 67.4 -24 67.4C-15.36 67.4 -8.64 76.6 0 76.6C8.64 76.6 15.36 67.4 24 67.4C32.64 67.4 39.36 76.6 48 76.6C56.64 76.6 63.36 67.4 72 67.4C80.64 67.4 87.36 76.6 96 76.6M-48 -52.6L-48 -19.4M0 -52.6L0 -19.4M48 -52.6L48 -19.4M96 -52.6L96 -19.4M-24 -28.6L-24 4.6M24 -28.6L24 4.6M72 -28.6L72 4.6M-48 -4.6L-48 28.6M0 -4.6L0 28.6M48 -4.6L48 28.6M96 -4.6L96 28.6M-24 19.4L-24 52.6M24 19.4L24 52.6M72 19.4L72 52.6M-48 43.4L-48 76.6M0 43.4L0 76.6M48 43.4L48 76.6M96 43.4L96 76.6M-24 67.4L-24 100.6M24 67.4L24 100.6M72 67.4L72 100.6'/%3E%3C/svg%3E") 0 0/64px 64px;width:min(46vw,640px);-webkit-mask:radial-gradient(100% 95% at 0 0,#000 25%,transparent 75%);mask:radial-gradient(100% 95% at 0 0,#000 25%,transparent 75%);opacity:1}
/* Phone and tablet: the paving covers the whole hero behind the text, fading out only at the very bottom. */
@media(max-width:900px){.cp-hero::before{width:100%;height:100%;-webkit-mask:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);mask:linear-gradient(180deg,#000 0,#000 78%,transparent 100%)}}

/* ==========================================================================
   Lightbox — thumbnails never cut off; on phones an immersive dark view
   ========================================================================== */
.cp-lightbox-thumbs{position:relative;justify-content:flex-start;scrollbar-width:none;scroll-padding-inline:16px;overscroll-behavior-x:contain}
.cp-lightbox-thumbs::-webkit-scrollbar{display:none}
.cp-lightbox-thumbs>button:first-child{margin-left:auto}
.cp-lightbox-thumbs>button:last-child{margin-right:auto}
.cp-lightbox-thumbs img{mix-blend-mode:normal;object-fit:cover;border-radius:3px}
.cp-lightbox-thumbs button{padding:3px}
@media(max-width:640px){
  .cp-lightbox-backdrop{background:#0d1522;backdrop-filter:none;-webkit-backdrop-filter:none}
  .cp-lightbox-panel{background:#0d1522;height:100%;height:100dvh;max-height:100dvh;box-shadow:none}
  .cp-lightbox-bar{background:transparent;border-bottom:1px solid rgba(255,255,255,.08);padding:calc(10px + env(safe-area-inset-top)) 12px 10px 18px}
  .cp-lightbox-bar .cp-eyebrow{color:var(--cp-orange)}
  .cp-lightbox-bar strong{color:#fff;font-size:15px;max-width:52vw}
  .cp-lightbox-counter{color:rgba(255,255,255,.7)}
  .cp-lightbox-btn{width:40px;height:40px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
  .cp-lightbox-btn:hover,.cp-lightbox-close:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
  .cp-lightbox-stage{background:#0d1522;flex:1 1 auto;height:auto;min-height:0}
  .cp-lightbox-stage img{mix-blend-mode:normal;width:100%;height:100%;max-height:100%;object-fit:contain}
  .cp-lightbox-nav{width:42px;height:42px;background:rgba(13,21,34,.55);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .cp-lightbox-prev{left:12px}.cp-lightbox-next{right:12px}
  .cp-lightbox-thumbs{background:transparent;border-top:1px solid rgba(255,255,255,.08);padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:8px}
  .cp-lightbox-thumbs button{flex:0 0 58px;height:58px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);opacity:.55}
  .cp-lightbox-thumbs button[aria-current]{opacity:1;border-color:var(--cp-orange);box-shadow:0 0 0 1px var(--cp-orange)}
}
/* Phone lightbox: controls in the brand orange with dark icons, clearly visible on the dark background. */
@media(max-width:640px){
  .cp-lightbox .cp-lightbox-btn,.cp-lightbox .cp-lightbox-nav{background:var(--cp-orange);border:0;color:var(--cp-ink);box-shadow:0 8px 20px -8px rgba(0,0,0,.6);-webkit-backdrop-filter:none;backdrop-filter:none}
  .cp-lightbox .cp-lightbox-btn .cp-icon,.cp-lightbox .cp-lightbox-nav .cp-icon{color:var(--cp-ink);stroke:var(--cp-ink);stroke-width:2}
  .cp-lightbox .cp-lightbox-btn:hover,.cp-lightbox .cp-lightbox-btn:active,.cp-lightbox .cp-lightbox-nav:hover,.cp-lightbox .cp-lightbox-nav:active{background:#ffb449;color:var(--cp-ink)}
  .cp-lightbox .cp-lightbox-counter{color:#fff;font-weight:700}
}

/* Phone only: the paving fades out right under the headline („impecabil.”). premium.js measures where the
   heading ends (--cp-hero-title-bottom), so the fade follows the real line wrapping on every screen. */
@media(max-width:640px){
  .cp-hero::before{width:100%;height:100%;
    -webkit-mask:linear-gradient(180deg,#000 0,#000 calc(var(--cp-hero-title-bottom,420px) - 90px),transparent calc(var(--cp-hero-title-bottom,420px) + 30px));
    mask:linear-gradient(180deg,#000 0,#000 calc(var(--cp-hero-title-bottom,420px) - 90px),transparent calc(var(--cp-hero-title-bottom,420px) + 30px))}
}

/* ==========================================================================
   Studio product photos (files named *-studio): the photo already carries the warm studio
   background and shadow, so it fills its frame edge to edge — no second background, no blend.
   ========================================================================== */
img[src*="-studio"]{mix-blend-mode:normal!important;object-fit:cover!important;padding:0!important}
.cp-product-image:has(img[src*="-studio"]){background:#efeae2;border-color:transparent}
.cp-product-image:has(img[src*="-studio"])>img{width:100%;height:100%}
.woocommerce-product-gallery__image:has(img[src*="-studio"]){background:#efeae2}
.woocommerce-product-gallery__image:has(img[src*="-studio"]) img{width:100%!important;height:100%!important}
.cp-drawer-thumb:has(img[src*="-studio"]),.cp-drawer-pick img[src*="-studio"],.cp-fav-thumb:has(img[src*="-studio"]){background:#efeae2;border-color:transparent}
.cp-drawer-pick img[src*="-studio"]{padding:0!important}
/* Home category cards: transparent studio cut-outs sit directly on the card (same look on all three). */
.cp-category-visual img[src*="/assets/img/cat-"]{mix-blend-mode:normal;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(24,35,51,.10))}

/* Home: quiet hover feedback for the secondary CTA and benefit disclosures. */
.cp-hero-actions>.cp-text-link[href="#solutii"]{
  position:relative;border-bottom-color:transparent;
  transition:color 160ms ease;
}
.cp-hero-actions>.cp-text-link[href="#solutii"]::after{
  content:"";position:absolute;left:0;right:28px;bottom:3px;height:2px;
  background:var(--cp-orange);transform:scaleX(0);transform-origin:left;
  transition:transform 180ms var(--cp-ease-out);pointer-events:none;
}
.cp-hero-actions>.cp-text-link[href="#solutii"]>span{
  display:inline-block;transition:transform 180ms var(--cp-ease-out);
}
.cp-benefits .cp-disclosure>summary{
  position:relative;isolation:isolate;transition:color 160ms ease;
}
.cp-benefits .cp-disclosure>summary::before{
  content:"";position:absolute;inset:6px -12px;z-index:-1;border-radius:5px;
  background:rgba(253,161,43,.10);opacity:0;transition:opacity 160ms ease;pointer-events:none;
}
.cp-benefits .cp-disclosure>summary>.cp-icon{
  border-radius:50%;transition:transform 180ms var(--cp-ease-out),color 160ms ease,background-color 160ms ease,box-shadow 160ms ease;
}
@media(hover:hover) and (pointer:fine){
  .cp-hero-actions>.cp-text-link[href="#solutii"]:hover{color:#99580e}
  .cp-hero-actions>.cp-text-link[href="#solutii"]:hover::after{transform:scaleX(1)}
  .cp-hero-actions>.cp-text-link[href="#solutii"]:hover>span{transform:translate(3px,3px)}
  .cp-benefits .cp-disclosure>summary:hover{color:#99580e}
  .cp-benefits .cp-disclosure>summary:hover::before{opacity:1}
  .cp-benefits .cp-disclosure>summary:hover>.cp-icon{
    color:var(--cp-ink);background:var(--cp-orange);box-shadow:0 0 0 5px var(--cp-orange);transform:scale(1.06);
  }
  .cp-benefits .cp-disclosure[open]>summary:hover>.cp-icon{transform:rotate(45deg) scale(1.06)}
}
.cp-hero-actions>.cp-text-link[href="#solutii"]:focus-visible{color:#99580e;transition:none}
.cp-hero-actions>.cp-text-link[href="#solutii"]:focus-visible::after{transform:scaleX(1);transition:none}
.cp-benefits .cp-disclosure>summary:focus-visible{color:#99580e;transition:none}
.cp-benefits .cp-disclosure>summary:focus-visible::before{opacity:1;transition:none}
.cp-benefits .cp-disclosure>summary:focus-visible>.cp-icon{transition:none}
.cp-hero-actions>.cp-text-link[href="#solutii"]:active{color:var(--cp-ink)}
.cp-benefits .cp-disclosure>summary:active::before{opacity:1;background:rgba(253,161,43,.18)}
@media(prefers-reduced-motion:reduce){
  .cp-hero-actions>.cp-text-link[href="#solutii"],
  .cp-hero-actions>.cp-text-link[href="#solutii"]::after,
  .cp-hero-actions>.cp-text-link[href="#solutii"]>span,
  .cp-benefits .cp-disclosure>summary,
  .cp-benefits .cp-disclosure>summary::before,
  .cp-benefits .cp-disclosure>summary>.cp-icon{transition:none}
  .cp-hero-actions>.cp-text-link[href="#solutii"]:hover>span{transform:none}
  .cp-benefits .cp-disclosure>summary:hover>.cp-icon{transform:none}
  .cp-benefits .cp-disclosure[open]>summary:hover>.cp-icon{transform:rotate(45deg)}
}