/* =========================================================
 *  20/80 Custom Widgets — shared front-end styles
 *  Colors/spacing that are editable live in Elementor controls.
 *  This file holds structural rules only.
 * ========================================================= */

/* ---------- Widget 1: Tooltip Button ---------- */
.cw-tt-wrap{position:relative;display:inline-block;
	font-family:'Heebo','Assistant',Arial,sans-serif;}

.cw-tt-trigger {
	cursor:pointer;box-sizing:border-box;width:44px;height:44px;
	border-radius:50%;background:rgba(255,255,255,.14);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	border: none;
	box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.10);
	display:flex;align-items:center;justify-content:center;padding:0;
}
.cw-tt-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1px;

  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1) 12%, 
    rgba(255, 255, 255, 0) 25%,  
    rgba(255, 255, 255, 0) 75%,  
    rgba(255, 255, 255, 1) 88%   
  );
  
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  
  pointer-events: none; 
}

.cw-tt-pill{display:block;width:9px;height:24px;border-radius:6px;
	background:#f3ece2;}

.cw-tt-box{display:none;position:absolute;top:0;
	width:235px;z-index:9999;
	border-radius:16px;padding:18px 16px;text-align:right;--cw-arrow:#2a211b;backdrop-filter: blur(3px);}
.cw-tt-box::before {
	content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 1px;
	z-index: -1;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.5) 12%, 
    rgba(255, 255, 255, 0) 25%,  
    rgba(255, 255, 255, 0) 75%,  
    rgba(255, 255, 255, 0.5) 88%   
  );
  
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.cw-tt-box.cw-tt-open{display:block;}
.cw-tt-box p{font-size:14px;line-height:1.6;margin:0 0 14px;font-weight:400;color:#ece2d6;}

/* side positioning */
.cw-tt-box.cw-tt-left{right:calc(100% + 16px);left:auto;}
.cw-tt-box.cw-tt-right{left:calc(100% + 16px);right:auto;}

/* action button */
/* gradient "glass" ring on the action button — same treatment as the
   trigger circle. Off unless the widget adds .cw-tt-action-ring. */
.cw-tt-action-ring{position:relative;}
.cw-tt-action-ring::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;

  background: linear-gradient(135deg,
    var(--cw-ring-c, rgba(255,255,255,1)) 12%,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0) 75%,
    var(--cw-ring-c, rgba(255,255,255,1)) 88%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
  transition: transform .5s ease;
}
.cw-tt-action-ring:hover::before{ transform: rotate(180deg); }

.cw-tt-action{cursor:pointer;display:inline-flex;align-items:center;gap:8px;
	background:#ece3d6;color:#3a322b;font-size:14px;font-weight:500;
	padding:9px 22px;border-radius:30px;text-decoration:none;}
.cw-tt-glyph{font-size:16px;}
.cw-tt-glyph svg {width: 16px;}
/* arrow (points toward the icon, color follows --cw-arrow) */
.cw-tt-arrow{position:absolute;top:50%;transform:translateY(-50%);width:0;height:0;
	border-top:9px solid transparent;border-bottom:9px solid transparent;}
.cw-tt-box.cw-tt-left  .cw-tt-arrow{right:-9px;border-left:10px solid var(--cw-arrow);}
.cw-tt-box.cw-tt-right .cw-tt-arrow{left:-9px;border-right:10px solid var(--cw-arrow);}

/* Fill-parent / stick-to-bottom layout */
.cw-tt-parent{position:relative;}          /* add this class to the parent container */
.cw-tt-wrap-fill{position:static;}         /* let the box anchor to the parent, not the icon */
.cw-tt-box.cw-tt-fill{top:auto;bottom:0;left:0;right:0;width:auto;
	transform:none;text-align:right;}
.cw-tt-box.cw-tt-fill .cw-tt-arrow{display:none;}
.cw-tt-box.cw-tt-fill{min-width:0;width:96%;margin: auto;}
.cw-tt-wrap-fill{position:static !important;} /* never let the wrap become the anchor */
.cw-tt-wrap-fill .cw-tt-trigger{position:absolute;top:45%;right:24px;z-index:6;}
.cw-tt-trigger, .cw-tt-action{touch-action:manipulation;}

/* ---------- Widget 2: Before / After ---------- */
.cw-ba{position:relative;width:100%;margin:0 auto;overflow:hidden;
	border-radius:14px;touch-action:none;user-select:none;line-height:0;}
.cw-ba-img{position:absolute;top:0;left:0;width:100%;height:100%;}
.cw-ba-after{position:relative;}            /* sets the natural height */
.cw-ba-img img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio: 4 / 5;
	pointer-events:none;}
.cw-ba-after img{height:auto;}              /* drive container height from this image */
.cw-ba-before{will-change:clip-path;}
.cw-ba-handle{position:absolute;top:0;bottom:0;left:50%;width:0;
	transform:translateX(-50%);z-index:5;cursor:ew-resize;}
.cw-ba-line{position:absolute;top:0;bottom:0;left:50%;width:1px;
	transform:translateX(-50%);background:#fff;}
.cw-ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:40px;height:40px;border-radius:50%;background: rgba(247, 245, 245, 0.15);backdrop-filter: blur(4px);color:#a8927f;
	display:flex;align-items:center;justify-content:center;font-size:20px;
	box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1);}
.cw-ba-grip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1px;

  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1) 12%, 
    rgba(255, 255, 255, 0) 25%,  
    rgba(255, 255, 255, 0) 75%,  
    rgba(255, 255, 255, 1) 88%   
  );
  
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  
  pointer-events: none; 	
}
.cw-ba-label{position:absolute;bottom:14px;border-radius:20px;
	font-size:14px;font-weight:500;line-height:1.2; z-index: 1;
	background:rgba(58,50,43,.55);color:#fff;pointer-events:none;}
/* opposite sides — each label sits inside its own layer, so the wipe
   clips the "before" text and the before layer covers the "after" text,
   both exactly in step with the image */
.cw-ba-labels-opposite .cw-ba-label-before{left:18px;right:auto;}
.cw-ba-labels-opposite .cw-ba-label-after{right:18px;left:auto;}
.cw-ba-before{z-index:2;}
.cw-ba-after{z-index:1;}

/* stacked: both labels share one spot, so the wipe slices through the text
   exactly as it does through the image */
.cw-ba-labels-right .cw-ba-label{right:18px;left:auto;}
.cw-ba-labels-left  .cw-ba-label{left:18px;right:auto;}
.cw-ba-labels-center .cw-ba-label{left:50%;right:auto;transform:translateX(-50%);}

/* ---------- Widget 3: Before / After (click to toggle) ---------- */
.cw-fc{width:100%;font-family:'Heebo','Assistant',Arial,sans-serif;height: 100%;flex: 1 1 auto;display: flex;flex-direction: column;}
.cw-fc-stage{position:relative;width:100%;border-radius:14px;
	user-select:none;cursor:pointer;line-height:0;}
.cw-fc-before{display:block;width:100%;height:auto;}
.cw-fc-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	opacity:0;transition:opacity .35s ease;pointer-events:none;}
.cw-fc.is-after .cw-fc-after{opacity:1;}
.cw-fc-pill{position:absolute;left:16px;bottom:10%;width:18px;height:34px;
	border-radius:10px;background:#6e9b8d;
	pointer-events:none;z-index:3;}
.cw-fc-meta{padding:46px 20px 20px;text-align:right;margin-top:-32px;background:rgba(244,244,244,0.2);backdrop-filter:blur(1px) saturate(150%);box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.1), inset -6px -6px 10px rgba(255, 255, 255, 0.9);display: flex; flex-direction: column;border-top: 1px solid rgba(255,255,255,0.2);}
.cw-fc-name{margin:0 0 8px;font-size:18px;font-weight:600;color:#2b2b2b;line-height:1.2;}
.cw-fc-quote{margin:0;font-size:15px;line-height:1.7;color:#6a6a6a;}
.cw-fc-dots{display:flex;justify-content:center;gap:12px;padding-top:24px;margin-top: auto;direction:ltr;flex-direction: row-reverse;}
.cw-fc-dot{width:45px;height:2px;border-radius:2px;background:#cfcac4;transition:background .25s;}
.cw-fc-dot.is-active{background:#2b2b2b;}
/* ---------- Widget 4: Video Carousel ---------- */
.cw-vc{--cw-vc-per:3;--cw-vc-gap:18px;--cw-vc-offset:0px;position:relative;width:100%;
	font-family:'Heebo','Assistant',Arial,sans-serif;}

.cw-vc-viewport{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
	scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
	scrollbar-width:none;-ms-overflow-style:none;
	padding-inline:var(--cw-vc-offset);
	scroll-padding-inline-start:var(--cw-vc-offset);}
.cw-vc-viewport::-webkit-scrollbar{display:none;}

.cw-vc-track{display:flex;gap:var(--cw-vc-gap);}
.cw-vc-slide{scroll-snap-align:start;
	flex:0 0 calc((100% - var(--cw-vc-offset) * 2 - (var(--cw-vc-per) - 1) * var(--cw-vc-gap)) / var(--cw-vc-per));}

.cw-vc-card{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;
	border-radius:6px;background:#e9e6e2;}
.cw-vc-poster,.cw-vc-card video,.cw-vc-card iframe{position:absolute;inset:0;
	width:100%;height:100%;object-fit:cover;border:0;display:block;}
.cw-vc-card.is-playing .cw-vc-poster,
.cw-vc-card.is-playing .cw-vc-play{opacity:0;pointer-events:none;}

/* glass play button */
.cw-vc-play{position:absolute;top:14px;left:14px;z-index:3;width:30px;height:30px;
	display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
	border-radius:50%;color:#fff;background:rgba(255,255,255,.28);
	border:1px solid rgba(255,255,255,.55);
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
	box-shadow:0 2px 10px rgba(0,0,0,.18);transition:opacity .25s,transform .2s;}
.cw-vc-play:hover{transform:scale(1.08);}

/* glass gradient ring on the play button */
.cw-vc-play{border-color:transparent;}
.cw-vc-play::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	padding:1px;
	background:linear-gradient(135deg,
		rgba(255,255,255,1) 12%,
		rgba(255,255,255,0) 25%,
		rgba(255,255,255,0) 75%,
		rgba(255,255,255,1) 88%);
	-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events:none;
	transition:transform .5s ease;
}
.cw-vc-play:hover::before{transform:rotate(180deg);}

/* floating note card */
.cw-vc-note{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;
	display:block;text-decoration:none;text-align:right;
	padding:14px 16px 10px;border-radius:4px;
	background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.6);
	-webkit-backdrop-filter:blur(4px) saturate(140%);backdrop-filter:blur(4px) saturate(140%);
	box-shadow:0 6px 18px rgba(0,0,0,.10);}
.cw-vc-title{margin:0 0 6px;font-size:14px;font-weight:600;color:#2b2b2b;line-height:1.3;}
.cw-vc-text{margin:0;font-size:12.5px;line-height:1.6;color:#6a6a6a;
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.cw-vc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;justify-content:flex-start;}
.cw-vc-tag{display:inline-block;padding:3px 12px;border-radius:20px;
	font-size:11px;line-height:1.5;background:rgba(0,0,0,.05);color:#5a5a5a;}

/* arrows */
.cw-vc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
	width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	background:#fff;color:#5a5a5a;box-shadow:0 2px 10px rgba(0,0,0,.18);
	opacity:0;transition:opacity .2s;}
.cw-vc:hover .cw-vc-arrow{opacity:1;}
.cw-vc-arrow[disabled]{opacity:0 !important;pointer-events:none;}
.cw-vc-prev{right:-8px;}
.cw-vc-next{left:-8px;}

/* pagination */
.cw-vc-dots{display:flex;justify-content:center;gap:10px;padding-top:16px;direction:ltr;}
.cw-vc-dot{width:34px;height:2px;border-radius:2px;background:#cfcac4;
	cursor:pointer;transition:background .25s;}
.cw-vc-dot.is-active{background:#2b2b2b;}

@media (max-width:767px){
	.cw-vc-arrow{display:none;}
}

/* ---------- Widget 5: Story Gallery (Before / After) ---------- */
.cw-sg{position:relative;width:100%;font-family:'Heebo','Assistant',Arial,sans-serif;}

.cw-sg-stage{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
	cursor:pointer;user-select:none;background:#e9e6e2;line-height:0;
	-webkit-tap-highlight-color:transparent;}

.cw-sg-item{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;
	pointer-events:none;}
.cw-sg-item.is-active{opacity:1;}
.cw-sg-item img{width:100%;height:100%;object-fit:cover;display:block;}
.cw-sg-instant .cw-sg-item{transition:none;}

.cw-sg-label{position:absolute;top:18px;right:18px;z-index:3;
	font-size:15px;font-weight:600;line-height:1;color:#fff;
	text-shadow:0 1px 6px rgba(0,0,0,.45);pointer-events:none;}

.cw-sg-bars{display:flex;align-items:center;gap:14px;padding-inline:18px;
	direction:ltr;pointer-events:none;}
.cw-sg-bars-inside{position:absolute;left:0;right:0;bottom:18px;z-index:4;}
.cw-sg-bars-below{padding-top:14px;}
.cw-sg-bar{flex:1 1 0;height:2px;border-radius:2px;
	background:rgba(255,255,255,.55);transition:background .25s;}
.cw-sg-bar.is-active{background:#2b2b2b;}
/* optional stories-style: keep earlier segments filled */
.cw-sg-fill .cw-sg-bar.is-done{background:#2b2b2b;}

/* ---------- Widget 5: mobile overlay (lightbox) ---------- */
.cw-sg-thumb,.cw-sg-close{display:none;}
.cw-sg-shell{--cw-sg-ovl-bg:#fff;--cw-sg-ovl-pad:0px;}

/* thumbnail trigger */
.cw-sg-thumb{width:100%;aspect-ratio:1/1;padding:0;border:0;cursor:pointer;
	overflow:hidden;border-radius:2px;background:#e9e6e2;line-height:0;
	-webkit-tap-highlight-color:transparent;}
.cw-sg-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

/* close button */
.cw-sg-close{position:absolute;top:14px;inset-inline-end:14px;z-index:10;
	width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;
	align-items:center;justify-content:center;padding:0;
	color:#2b2b2b;background:transparent;}

/*  The overlay is PARKED fixed and full-screen from the start and only
 *  faded in. Switching position on open caused a one-frame flash at the
 *  element's in-flow position, which read as a jump from the bottom. */
.cw-sg-ovl-always .cw-sg-thumb{display:block;}
.cw-sg-ovl-always .cw-sg-shell{position:fixed;top:0;left:0;right:0;bottom:0;
	width:100%;height:100%;height:100dvh;z-index:99999;
	display:flex;flex-direction:column;justify-content:center;
	background:var(--cw-sg-ovl-bg);padding:var(--cw-sg-ovl-pad);
	opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity .22s ease,visibility 0s linear .22s;
	overscroll-behavior:contain;}
.cw-sg-ovl-always.is-open .cw-sg-shell{opacity:1;visibility:visible;
	pointer-events:auto;transition:opacity .22s ease;}
.cw-sg-ovl-always.is-open .cw-sg-close{display:flex;}

@media (max-width:1024px){
	.cw-sg-ovl-tablet .cw-sg-thumb{display:block;}
	.cw-sg-ovl-tablet .cw-sg-shell{position:fixed;top:0;left:0;right:0;bottom:0;
		width:100%;height:100%;height:100dvh;z-index:99999;
		display:flex;flex-direction:column;justify-content:center;
		background:var(--cw-sg-ovl-bg);padding:var(--cw-sg-ovl-pad);
		opacity:0;visibility:hidden;pointer-events:none;
		transition:opacity .22s ease,visibility 0s linear .22s;
		overscroll-behavior:contain;}
	.cw-sg-ovl-tablet.is-open .cw-sg-shell{opacity:1;visibility:visible;
		pointer-events:auto;transition:opacity .22s ease;}
	.cw-sg-ovl-tablet.is-open .cw-sg-close{display:flex;}
}

@media (max-width:767px){
	.cw-sg-ovl-mobile .cw-sg-thumb{display:block;}
	.cw-sg-ovl-mobile .cw-sg-shell{position:fixed;top:0;left:0;right:0;bottom:0;
		width:100%;height:100%;height:100dvh;z-index:99999;
		display:flex;flex-direction:column;justify-content:center;
		background:var(--cw-sg-ovl-bg);padding:var(--cw-sg-ovl-pad);
		opacity:0;visibility:hidden;pointer-events:none;
		transition:opacity .22s ease,visibility 0s linear .22s;
		overscroll-behavior:contain;}
	.cw-sg-ovl-mobile.is-open .cw-sg-shell{opacity:1;visibility:visible;
		pointer-events:auto;transition:opacity .22s ease;}
	.cw-sg-ovl-mobile.is-open .cw-sg-close{display:flex;}
}

.cw-sg-ovl.is-open .cw-sg-stage{aspect-ratio:auto;max-height:100%;}
.cw-sg-ovl.is-open .cw-sg-stage img{max-height:100vh;max-height:100dvh;}

/* stop the page behind the overlay from scrolling */
body.cw-sg-locked{overflow:hidden;overscroll-behavior:contain;}

/* ---------- Widget 6: Cases by Category ---------- */
.cw-cc{--cw-cc-cols:4;--cw-cc-gap:10px;width:100%;
	font-family:'Heebo','Assistant',Arial,sans-serif;}

/* tabs */
.cw-cc-tabs{margin-bottom:40px;}
.cw-cc-tabs-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.cw-cc-tab{cursor:pointer;border:0;padding:7px 18px;border-radius:20px;
	background:#f2f0ee;color:#5a5a5a;font-size:13px;line-height:1.4;
	font-family:inherit;white-space:nowrap;transition:background .2s,color .2s;
	background-size:cover;background-position:center;}
.cw-cc-tab.is-active{background-color:#3a3a3a;color:#fff;}

/* extra tab rows, revealed by the toggle */
.cw-cc-tab-extra{display:none;}
.cw-cc.tabs-open .cw-cc-tab-extra{display:inline-block;}
.cw-cc-tabs-toggle{order:99;}

/* sections */
.cw-cc-sections{display:flex;flex-direction:column;gap:56px;}
.cw-cc-section{scroll-margin-top:100px;}
.cw-cc-inner{width:100%;}

.cw-cc-head{display:flex;align-items:flex-start;justify-content:space-between;
	gap:24px;margin-bottom:22px;}
.cw-cc-head-text{flex:1 1 auto;min-width:0;}
.cw-cc-title{margin:0 0 10px;font-size:22px;font-weight:600;color:#2b2b2b;line-height:1.3;}
.cw-cc-desc{font-size:15px;line-height:1.7;color:#6a6a6a;}
.cw-cc-desc p{margin:0 0 .6em;}
.cw-cc-desc p:last-child{margin-bottom:0;}

/* the two description variants */
.cw-cc.is-all .cw-cc-desc-single{display:none;}
.cw-cc.is-term .cw-cc-desc-all{display:none;}

/* per-view show/hide */
.cw-cc-no-title-all.is-all .cw-cc-title{display:none;}
.cw-cc-no-desc-all.is-all .cw-cc-desc-all{display:none;}
.cw-cc-no-title-single.is-term .cw-cc-title{display:none;}
.cw-cc-no-desc-single.is-term .cw-cc-desc-single{display:none;}

/* more button */
.cw-cc-more{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
	padding:6px 16px;border:1px solid #d8d4d0;border-radius:20px;
	font-size:13px;color:#5a5a5a;text-decoration:none;background:transparent;
	transition:background .2s,color .2s,border-color .2s;}
.cw-cc-more-icon{display:inline-flex;align-items:center;line-height:1;
	transition:transform .2s ease;}
.cw-cc-more-icon svg{width:15px;height:15px;fill:currentColor;}

/* editor-only notice when a template can't render */
.cw-cc-tplnote{padding:10px 12px;border:1px dashed #d33;border-radius:4px;
	color:#d33;font-size:12px;line-height:1.5;background:#fff5f5;}

/* grid */
.cw-cc-grid{display:grid;gap:var(--cw-cc-gap);
	grid-template-columns:repeat(var(--cw-cc-cols),minmax(0,1fr));}
.cw-cc-item{min-width:0;}

/* view: show all */
.cw-cc.is-all .cw-cc-extra{display:none;}

/* view: single category */
.cw-cc.is-term .cw-cc-section{display:none;}
.cw-cc.is-term .cw-cc-section.is-active{display:block;}
.cw-cc.is-term .cw-cc-head{flex-direction:column;align-items:stretch;}
.cw-cc.is-term .cw-cc-more{display:none;}

@media (max-width:767px){
	.cw-cc-tab{flex:0 0 auto;min-width:max-content;}

	/* default: wrap onto as many lines as needed — every tab always reachable */
	.cw-cc-tabs-wrap .cw-cc-tabs-row{flex-wrap:wrap;overflow:visible;}

	/* single swipeable line — default on mobile */
	.cw-cc-tabs-scroll .cw-cc-tabs-row{flex-wrap:nowrap;overflow-x:auto;
		scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;
		scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
		scroll-padding-inline:12px;
		/* breathing room so the last pill isn't flush against the edge */
		padding-inline:2px;
		/* keep the row from being squeezed by a narrow parent */
		width:100%;max-width:100%;
		/* centring a scroller makes the overflow unreachable — never centre here */
		justify-content:flex-start !important;}
	.cw-cc-tabs-scroll .cw-cc-tabs-row::-webkit-scrollbar{display:none;}

	/* When the row swipes there is no reason to hide tabs behind a toggle —
	   show them all and drop the "more" button. */
	.cw-cc-tabs-scroll .cw-cc-tab-extra{display:inline-block;}
	.cw-cc-tabs-scroll .cw-cc-tabs-toggle{display:none;}

	/* tabs must never shrink, or long labels collapse and look clipped */
	.cw-cc-tabs-scroll .cw-cc-tab{flex:0 0 auto;min-width:max-content;}
	.cw-cc-head{flex-direction:column;align-items:stretch;}
	.cw-cc-more{align-self:flex-start;}

	/* ===== "show all" view: swipeable full cards, playing inline ===== */
	.cw-cc-mob-carousel.is-all .cw-cc-grid{
		display:flex;grid-template-columns:none;
		overflow-x:auto;overflow-y:hidden;
		scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
		scrollbar-width:none;-ms-overflow-style:none;
		padding-inline:var(--cw-cc-mpeek,16px);
		scroll-padding-inline-start:var(--cw-cc-mpeek,16px);}
	.cw-cc-mob-carousel.is-all .cw-cc-grid::-webkit-scrollbar{display:none;}
	.cw-cc-mob-carousel.is-all .cw-cc-item{
		flex:0 0 var(--cw-cc-mcard,78%);scroll-snap-align:start;}

	/* swipe through every loaded case, not just the visible few */
	.cw-cc-mob-carousel.cw-cc-mob-all.is-all .cw-cc-extra{display:block;}

	/* full gallery inline — no thumbnail, no popup, no close button */
	.cw-cc-mob-carousel.is-all .cw-sg-ovl-mobile .cw-sg-thumb{display:none;}
	.cw-cc-mob-carousel.is-all .cw-sg-ovl-mobile .cw-sg-shell{
		display:block;position:static;inset:auto;width:auto;height:auto;
		padding:0;background:none;z-index:auto;
		opacity:1;visibility:visible;pointer-events:auto;transition:none;}
	.cw-cc-mob-carousel.is-all .cw-sg-ovl-mobile .cw-sg-close{display:none;}

	/* ===== inside a category tab: small squares that open the popup ===== */
	.cw-cc.is-term .cw-cc-grid{
		display:grid;
		grid-template-columns:repeat(var(--cw-cc-mcols,4),minmax(0,1fr));}
	.cw-cc.is-term .cw-sg-thumb{aspect-ratio:var(--cw-cc-mratio,1/1);}
}

/* editor-only notice when a story gallery resolves to nothing */
.cw-sg-note{padding:10px 12px;border:1px dashed #d33;border-radius:4px;
	color:#d33;font-size:12px;line-height:1.5;background:#fff5f5;
	font-family:'Heebo','Assistant',Arial,sans-serif;}

/* ---------- Widget 6: featured products block ---------- */
.cw-cc-products{margin-top:48px;}
.cw-cc-products-title{margin:0 0 20px;font-size:18px;font-weight:600;
	color:#2b2b2b;line-height:1.3;text-align:center;}
.cw-cc-products-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));}
.cw-cc-product{min-width:0;}

/* only inside single-category tabs when that option is chosen */
.cw-cc.is-all .cw-cc-products-single{display:none;}

/* fallback card when no template is picked */
.cw-cc-product-fallback{display:block;text-decoration:none;color:inherit;}
.cw-cc-product-fallback img{width:100%;height:auto;display:block;border-radius:4px;}
.cw-cc-product-fallback span{display:block;padding-top:8px;font-size:14px;
	line-height:1.4;text-align:center;}

@media (max-width:767px){
	.cw-cc-products-grid{grid-template-columns:1fr;}
}

/* ---------- Widget 6: built-in card text ---------- */
.cw-cc-card{position:relative;width:100%;}
.cw-cc-card-body{display:block;padding:12px;text-decoration:none;color:inherit;
	text-align:right;}
.cw-cc-card-title{margin:0 0 6px;font-size:15px;font-weight:600;
	color:#2b2b2b;line-height:1.3;}
.cw-cc-card-text{font-size:13px;line-height:1.6;color:#6a6a6a;
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* text laid over the image instead of below it */
.cw-cc-card-over{overflow:hidden;}
.cw-cc-card-body-over{position:absolute;left:0;right:0;bottom:0;z-index:4;
	background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));}
.cw-cc-card-body-over .cw-cc-card-title{color:#fff;}
.cw-cc-card-body-over .cw-cc-card-text{color:rgba(255,255,255,.85);}

/* ---------- Widget 6: mobile single product + CTA ---------- */
.cw-cc-products-grid{position:relative;}
.cw-cc-products-cta{display:none;}

@media (max-width:767px){
	/* only the first product shows */
	.cw-cc-prod-first .cw-cc-products-grid{grid-template-columns:1fr;}
	.cw-cc-prod-first .cw-cc-product:nth-child(n+2){display:none;}

	/* CTA pill floating over it */
	.cw-cc-prod-first .cw-cc-products-cta{
		display:flex;align-items:center;justify-content:center;gap:10px;
		position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);
		z-index:5;width:78%;box-sizing:border-box;
		padding:11px 22px;border-radius:40px;
		background:#f3ece2;color:#3a322b;
		font-size:15px;font-weight:500;line-height:1.2;
		text-decoration:none;white-space:nowrap;
		box-shadow:0 3px 12px rgba(60,40,30,.25);}
	.cw-cc-products-cta-icon{font-size:17px;line-height:1;}
}

.cw-fc-stage{box-sizing:border-box;}
.cw-fc-stage img{border-radius:inherit;}

/* fade widget — indicators are clickable */
.cw-fc-dot{cursor:pointer;border:0;padding:0;appearance:none;
	position:relative;background-clip:padding-box;}
/* larger tap target without changing the visible bar */
.cw-fc-dot::after{content:"";position:absolute;top:-12px;bottom:-12px;
	left:0;right:0;}
.cw-fc-dot:focus-visible{outline:2px solid currentColor;outline-offset:4px;}

/* ring highlight stays put when rotation is switched off */
.cw-tt-action-ring.cw-tt-no-spin:hover::before{transform:none;}

/* Any SVG inside the action button follows the button's text colour,
   including on hover, and regardless of fill/stroke attributes baked
   into the markup (CSS beats presentation attributes). */
.cw-tt-action svg,
.cw-tt-action svg * { fill: currentColor; }
.cw-tt-action svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.cw-tt-action svg [fill="none"] { fill: none; }
.cw-tt-glyph{display:inline-flex;align-items:center;line-height:1;}
.cw-tt-glyph svg{width:1em;height:1em;display:block;}

/* ---------- Widget 7: Product Tooltips (banner hotspots) ---------- */
/* The widget fills its container so the dots can be placed by percentage.
   Set the banner container to Position: Relative, or add cw-pt-parent. */
.cw-pt-parent{position:relative;}
.elementor-widget-cw_product_tooltips{position:absolute;inset:0;width:100%;height:100%;
	pointer-events:none;}
/* nothing to show -> take the empty wrapper out of the page entirely,
   so it can never sit invisibly over the banner */
.elementor-widget-cw_product_tooltips:not(:has(.cw-pt-overlay)){display:none;}
.elementor-widget-cw_product_tooltips > .elementor-widget-container{height:100%;}
.cw-pt-overlay{position:absolute;inset:0;pointer-events:none;z-index:5;
	--cw-dot:34px;}
/* only the dots take clicks — the space between stays click-through */
/* NB: centred with negative margins, never transform. A transformed
   ancestor becomes the containing block for position:fixed, which would
   pin the mobile panel to the dot instead of the viewport. */
.cw-pt-overlay .cw-tt-wrap{position:absolute;pointer-events:auto;z-index:1;
	margin-top:calc(var(--cw-dot) / -2);
	margin-right:calc(var(--cw-dot) / -2);}
.cw-pt-overlay.cw-pt-from-left .cw-tt-wrap{
	margin-right:0;
	margin-left:calc(var(--cw-dot) / -2);}

/* an open dot and its box must clear every other dot */
.cw-pt-overlay .cw-tt-wrap.is-open{z-index:60;}
.cw-pt-overlay .cw-tt-box{z-index:61;}

/* ---------- Cases by Category — case story card ---------- */
/* split slide: two halves, each showing one image */
.cw-cs-split{position:absolute;inset:0;display:flex;gap:0;}
.cw-cs-split > span{flex:1 1 50%;min-width:0;min-height:0;
	background-size:cover;background-position:center;display:block;}
.cw-cs-split-h{flex-direction:column;}

/* details slide */
.cw-cs-info{position:absolute;inset:0;overflow-y:auto;
	background:#f2f1ef;padding:18px 16px;text-align:left;line-height:1.4;
	font-family:'Heebo','Assistant',Arial,sans-serif;
	display:flex;flex-direction:column;}
.cw-cs-row{margin-bottom:8px;}
.cw-cs-k{font-weight:700;font-size:13px;color:#2b2b2b;letter-spacing:.02em;}
.cw-cs-v{font-size:13px;color:#4a4a4a;}
.cw-cs-row-prods{margin-bottom:10px;}

/* product packshots */
.cw-cs-prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
	gap:10px;align-items:end;}
.cw-cs-prod{display:block;aspect-ratio:3/4;text-decoration:none;}
.cw-cs-prod img{width:100%;height:100%;object-fit:contain;display:block;}

/* the story stage holds non-image slides too */
.cw-cs .cw-sg-item{background:transparent;}

/* ---------- Product Tooltips — mobile ---------- */
/*  The box stays beside its dot; JS nudges it back inside the viewport if it
 *  would hang off an edge. All that is needed here is to stop it being wider
 *  than the screen, otherwise no nudge could ever make it fit. */
@media (max-width:767px){

	/* a transform on the wrap would make any fixed child resolve against the
	   dot rather than the viewport — the dot is centred with margins instead */
	.cw-pt-overlay .cw-tt-wrap{transform:none !important;}

	.cw-pt-overlay .cw-tt-box{
		max-width:calc(100vw - 20px) !important;
	}
}

/* optional full-screen panel: add cw-pt-mob-panel to the overlay */
@media (max-width:767px){
	.cw-pt-mob-panel .cw-tt-box{
		position:fixed !important;
		top:50% !important;left:50% !important;right:auto !important;bottom:auto !important;
		transform:translate(-50%,-50%) !important;
		width:min(86vw,360px) !important;max-width:none !important;
		max-height:80vh;overflow-y:auto;z-index:100000 !important;margin:0 !important;
	}
	.cw-pt-mob-panel .cw-tt-wrap.is-open::after{
		content:"";position:fixed;inset:0;
		background:var(--cw-pt-backdrop,rgba(0,0,0,.35));
		z-index:99999;pointer-events:auto;
	}
	.cw-pt-mob-panel .cw-tt-wrap.is-open .cw-tt-trigger{position:relative;z-index:100001;}
}

/* the pointer triangle is not used by the product tooltips */
.cw-pt-overlay .cw-tt-arrow{display:none;}

/* ---------- Widget 8: Before / After Carousel ---------- */
/* The cards reuse the .cw-fc styles above; this adds the row around them. */
.cw-bac{--cw-bac-per:3.75;--cw-bac-gap:16px;position:relative;width:100%;
	font-family:'Heebo','Assistant',Arial,sans-serif;}
.cw-bac-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
	scrollbar-width:none;-ms-overflow-style:none;}
.cw-bac-viewport::-webkit-scrollbar{display:none;}
.cw-bac[data-drag="1"] .cw-bac-viewport{cursor:grab;}
.cw-bac-viewport.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;}
.cw-bac-track{display:flex;gap:var(--cw-bac-gap);}
.cw-bac-slide{flex:0 0 calc((100% - var(--cw-bac-gap) * (var(--cw-bac-per) - 1)) / var(--cw-bac-per));
	min-width:0;display:flex;scroll-snap-align:start;}
.cw-bac-slide .cw-fc{width:100%;height:auto;}
.cw-bac .cw-fc-before{width:100%;aspect-ratio:333 / 472;object-fit:cover;}
.cw-bac .cw-fc-stage img{-webkit-user-drag:none;user-select:none;}
.cw-bac .cw-fc-meta{flex:1 1 auto;}

/* text defaults follow the site's global styles */
.cw-bac .cw-fc-name{font-family:var(--e-global-typography-b5b444e-font-family,'Simpler Pro'),sans-serif;
	font-size:var(--e-global-typography-b5b444e-font-size,20px);
	font-weight:var(--e-global-typography-b5b444e-font-weight,600);
	line-height:var(--e-global-typography-b5b444e-line-height,1.26em);}
.cw-bac .cw-fc-quote{font-family:var(--e-global-typography-28ee3ab-font-family,'Simpler Pro'),sans-serif;
	font-size:var(--e-global-typography-28ee3ab-font-size,16px);
	line-height:var(--e-global-typography-28ee3ab-line-height,1.3em);}

/* icon in place of the colored pill */
.cw-bac .cw-fc-pill.has-icon{background:transparent !important;border-radius:0;
	display:flex;align-items:center;justify-content:center;color:#60523D;}
.cw-bac .cw-fc-pill.has-icon svg{width:100%;height:100%;display:block;fill:currentColor;}
.cw-bac .cw-fc-pill.has-icon svg [fill]:not([fill="none"]){fill:currentColor;}
.cw-bac .cw-fc-pill.has-icon svg [stroke]:not([stroke="none"]){stroke:currentColor;}
.cw-bac .cw-fc-pill.has-icon i{font-size:20px;line-height:1;}
