/* ==========================================================================
   CSL Think Smart — theme styles
   Visual language derived from the CSL logo: the orbital ellipse becomes the
   page's structural motif, the four-point spark its accent glyph.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root{
	--navy:#2C317A;
	--navy-deep:#151A47;
	--navy-ink:#0D1132;
	--blue:#2D5AA8;
	--cyan:#0E93B4;
	--cyan-br:#35C4E0;
	--cyan-pale:#92D6E2;

	--ink:#141838;
	--ink-2:#3A4168;
	--muted:#6A7396;
	--ground:#F4F7FC;
	--ground-2:#E9F0F8;
	--surface:#FFFFFF;
	--line:#DBE4F0;
	--line-soft:#E8EEF6;

	--panel:#151A47;
	--panel-2:#1E2560;
	--on-panel:#EDF3FA;
	--on-panel-mut:#9DAFD2;
	--feat-a:#232C6B;
	--feat-b:#141949;
	--feat-line:transparent;

	--ok:#1E9E6A;
	--warn:#B8791B;
	--err:#C8384B;

	--shadow-sm:0 1px 2px rgba(20,24,56,.06), 0 4px 14px rgba(20,24,56,.05);
	--shadow-md:0 2px 6px rgba(20,24,56,.07), 0 18px 44px rgba(20,24,56,.10);
	--shadow-lg:0 30px 70px rgba(13,17,50,.18);

	--f-display:'Highgate','Outfit',"Segoe UI",system-ui,-apple-system,sans-serif;
	--f-body:'Highgate','Instrument Sans',"Segoe UI",system-ui,-apple-system,sans-serif;
	--f-mono:'IBM Plex Mono',ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

	/* Eased pointer position, -0.5 … 0.5, written by theme.js on a fine
	   pointer only. Zero everywhere else, so these decorations are static
	   on touch devices and under prefers-reduced-motion. */
	--csl-mx:0;
	--csl-my:0;

	--maxw:1200px;
	--pad:clamp(20px,5vw,48px);
	--r:14px;
	--r-lg:22px;
	--ease:cubic-bezier(.2,.8,.3,1);
}
@media (prefers-color-scheme:dark){
	:root:not([data-theme="light"]){
		--ink:#E9EEF9; --ink-2:#C2CCE4; --muted:#8E9AC0;
		--ground:#080B1E; --ground-2:#0E1230; --surface:#101534;
		--line:#242B58; --line-soft:#1B2149;
		--panel:#0E1230; --panel-2:#181F52;
		--feat-a:#26336F; --feat-b:#141B45; --feat-line:rgba(146,214,226,.34);
		--cyan:#3EC2DE; --cyan-pale:#A8DFEA;
		--ok:#3FBF8B; --warn:#D9A244; --err:#E4697A;
		--shadow-sm:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
		--shadow-md:0 2px 6px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.45);
		--shadow-lg:0 30px 70px rgba(0,0,0,.6);
	}
}
:root[data-theme="dark"]{
	--ink:#E9EEF9; --ink-2:#C2CCE4; --muted:#8E9AC0;
	--ground:#080B1E; --ground-2:#0E1230; --surface:#101534;
	--line:#242B58; --line-soft:#1B2149;
	--panel:#0E1230; --panel-2:#181F52;
	--feat-a:#26336F; --feat-b:#141B45; --feat-line:rgba(146,214,226,.34);
	--cyan:#3EC2DE; --cyan-pale:#A8DFEA;
	--ok:#3FBF8B; --warn:#D9A244; --err:#E4697A;
	--shadow-sm:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
	--shadow-md:0 2px 6px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.45);
	--shadow-lg:0 30px 70px rgba(0,0,0,.6);
}

/* ----------------------------------------------------------------- 2. BASE */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.csl{
	margin:0; background:var(--ground); color:var(--ink);
	font-family:var(--f-body); font-size:17px; line-height:1.65;
	-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.csl h1,.csl h2,.csl h3,.csl h4{
	font-family:var(--f-display); margin:0; text-wrap:balance;
	letter-spacing:-.022em; line-height:1.06; font-weight:700; color:var(--ink);
}
.csl h1{font-size:clamp(2.4rem,6.2vw,4.5rem); font-weight:800; letter-spacing:-.035em}
.csl h2{font-size:clamp(1.85rem,3.8vw,2.95rem)}
.csl h3{font-size:clamp(1.1rem,1.7vw,1.34rem); line-height:1.22}
.csl h4{font-size:1.05rem}
.csl p{margin:0}
.csl a{color:inherit; text-decoration:none}
.csl img{max-width:100%; display:block; height:auto}
.csl button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
.csl input,.csl textarea,.csl select{font:inherit; color:inherit}
.csl :focus-visible{outline:2px solid var(--cyan-br); outline-offset:3px; border-radius:6px}
.csl ::selection{background:var(--cyan-pale); color:var(--navy-ink)}

/* Also declared in style.css; repeated here so the skip link is never
   left unstyled if the stylesheets load out of order. */
.csl-screen-reader-text{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.csl-screen-reader-text:focus{
	position:fixed; top:12px; left:12px; z-index:200;
	width:auto; height:auto; clip:auto; margin:0;
	padding:12px 20px; border-radius:100px;
	background:var(--surface); color:var(--ink);
	box-shadow:var(--shadow-md); font-weight:600;
}

.on-panel h2,.on-panel h3,.on-panel h4{color:#fff}

.csl-wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
.csl-wrap--narrow{max-width:820px}
.csl-sec{padding-block:clamp(60px,8.5vw,112px)}
.csl-sec--tight{padding-block:clamp(40px,5vw,64px)}
.csl-sec--flush-top{padding-top:0}

/* eyebrow — hairline orbit arc + label */
.csl-eyebrow{
	display:flex; align-items:center; gap:12px;
	font-family:var(--f-mono); font-size:.7rem; font-weight:500;
	letter-spacing:.20em; text-transform:uppercase; color:var(--cyan);
	margin-bottom:20px;
}
.csl-eyebrow::before{
	content:""; width:34px; height:16px; flex:none;
	border:1px solid currentColor; border-radius:50%;
	transform:rotate(-20deg); opacity:.85;
}
.on-panel .csl-eyebrow{color:var(--cyan-pale)}

.csl-lede{font-size:clamp(1.02rem,1.35vw,1.17rem); color:var(--muted); max-width:62ch}
.on-panel .csl-lede{color:var(--on-panel-mut)}
.csl-prose p + p{margin-top:1.1em}
.csl-prose{max-width:68ch}

.csl-sec-head{
	display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
	gap:clamp(24px,4vw,60px); align-items:end; margin-bottom:clamp(34px,4.5vw,54px);
}
.csl-sec-head--single{grid-template-columns:1fr}
.csl-sec-head .aside{padding-bottom:6px}

/* -------------------------------------------------------------- 3. BUTTONS */
.csl-btn{
	display:inline-flex; align-items:center; gap:9px;
	padding:13px 22px; border-radius:100px;
	font-family:var(--f-display); font-weight:600; font-size:.95rem; letter-spacing:-.01em;
	transition:transform .22s var(--ease), box-shadow .22s, background .22s, color .22s, border-color .22s;
	white-space:nowrap; text-align:center;
}
.csl-btn:hover{transform:translateY(-2px)}
.csl-btn--primary{
	background:linear-gradient(105deg,var(--cyan-br),var(--cyan) 42%,var(--navy));
	color:#fff; box-shadow:0 6px 20px rgba(14,147,180,.32);
}
.csl-btn--primary:hover{box-shadow:0 12px 32px rgba(14,147,180,.42); color:#fff}
.csl-btn--ghost{border:1.5px solid var(--line); color:var(--ink); background:var(--surface)}
.csl-btn--ghost:hover{border-color:var(--cyan); color:var(--cyan)}
.on-panel .csl-btn--ghost{border-color:rgba(146,214,226,.4); color:var(--on-panel); background:rgba(255,255,255,.04)}
.on-panel .csl-btn--ghost:hover{border-color:var(--cyan-pale); color:#fff; background:rgba(146,214,226,.1)}
.csl-btn--block{width:100%; justify-content:center}
.csl-btn .arw{transition:transform .22s}
.csl-btn:hover .arw{transform:translateX(4px)}
.csl-btn-row{display:flex; gap:12px; flex-wrap:wrap}

.csl-dot{width:6px; height:6px; border-radius:50%; background:var(--cyan-br); box-shadow:0 0 0 3px rgba(53,196,224,.22); flex:none}

/* ------------------------------------------------------- 4. ORBIT GEOMETRY */
.csl-orbits{position:absolute; inset:0; pointer-events:none; z-index:0}
.csl-orbit{
	position:absolute; border-radius:50%;
	border:1px solid rgba(146,214,226,.20);
	left:64%; top:34%; translate:-50% -50%;
	transform:rotate(-19deg); will-change:transform;
}
.csl-orbit.o1{width:min(560px,86vw); aspect-ratio:2.3/1; border-color:rgba(146,214,226,.34)}
.csl-orbit.o2{width:min(880px,128vw); aspect-ratio:2.45/1}
.csl-orbit.o3{width:min(1240px,180vw); aspect-ratio:2.6/1; border-color:rgba(146,214,226,.13)}
.csl-orbit.o4{width:min(1640px,235vw); aspect-ratio:2.75/1; border-color:rgba(146,214,226,.08)}
.csl-glow{
	will-change:transform;
	position:absolute; left:64%; top:34%; translate:-50% -50%;
	width:min(640px,90vw); aspect-ratio:1/1; border-radius:50%;
	background:radial-gradient(circle,rgba(53,196,224,.20),transparent 62%);
	filter:blur(12px); pointer-events:none; z-index:0;
}
.csl-spark{position:absolute; z-index:1; opacity:.9; pointer-events:none}
.csl-spark svg{display:block; filter:drop-shadow(0 0 12px rgba(53,196,224,.55))}
.csl-spark.s1{left:78%; top:19%; width:42px}
.csl-spark.s2{left:22%; top:66%; width:22px; opacity:.6}
.csl-spark.s3{left:56%; top:82%; width:16px; opacity:.45}

.csl-gridlines{
	position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
	background-image:
		linear-gradient(to right, rgba(146,214,226,.075) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(146,214,226,.055) 1px, transparent 1px);
	background-size:78px 78px;
	-webkit-mask-image:radial-gradient(120% 100% at 60% 20%,#000 20%,transparent 78%);
	mask-image:radial-gradient(120% 100% at 60% 20%,#000 20%,transparent 78%);
}

/* --------------------------------------------------------------- 5. TOP BAR */
.csl-topbar{
	background:var(--navy-ink); color:var(--on-panel-mut);
	font-size:.78rem; font-family:var(--f-mono); letter-spacing:.02em;
}
.csl-topbar .csl-wrap{display:flex; align-items:center; gap:22px; min-height:38px; flex-wrap:wrap}
.csl-topbar .loc{display:flex; align-items:center; gap:8px; color:var(--cyan-pale)}
.csl-topbar .spacer{flex:1}
.csl-topbar a{transition:color .2s}
.csl-topbar a:hover{color:var(--cyan-pale)}

/* ---------------------------------------------------------------- 6. HEADER */
.csl-header{
	position:sticky; top:0; z-index:60;
	background:color-mix(in srgb, var(--surface) 82%, transparent);
	-webkit-backdrop-filter:saturate(160%) blur(14px);
	backdrop-filter:saturate(160%) blur(14px);
	border-bottom:1px solid transparent;
	transition:border-color .3s, box-shadow .3s;
}
.admin-bar .csl-header{top:32px}
.csl-header.is-stuck{border-bottom-color:var(--line-soft); box-shadow:var(--shadow-sm)}
.csl-header .csl-wrap{display:flex; align-items:center; gap:clamp(14px,2vw,26px); min-height:76px}
.csl-brand img{height:42px; width:auto}
.csl-lg-dark{display:none}
.csl-lg-light{display:block}
@media (prefers-color-scheme:dark){
	:root:not([data-theme="light"]) .csl-lg-light{display:none}
	:root:not([data-theme="light"]) .csl-lg-dark{display:block}
}
:root[data-theme="dark"] .csl-lg-light{display:none}
:root[data-theme="dark"] .csl-lg-dark{display:block}

.csl-nav{
	display:flex; flex-wrap:nowrap; gap:2px; margin-left:auto; align-items:center;
	list-style:none; margin-block:0; padding:0; min-width:0;
}
.csl-nav li{position:relative; flex:none}
.csl-nav a{
	display:block; padding:9px clamp(9px,1vw,14px); border-radius:100px;
	font-weight:500; font-size:clamp(.88rem,.92vw,.94rem); white-space:nowrap;
	color:var(--ink-2); transition:background .2s, color .2s;
}
.csl-nav a:hover,.csl-nav .current-menu-item > a{background:var(--ground-2); color:var(--cyan)}
.csl-nav .sub-menu{
	position:absolute; top:calc(100% + 8px); left:0; min-width:220px;
	background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
	box-shadow:var(--shadow-md); padding:8px; list-style:none; margin:0;
	opacity:0; visibility:hidden; transform:translateY(6px);
	transition:opacity .2s, transform .2s, visibility .2s;
}
.csl-nav li:hover > .sub-menu,.csl-nav li:focus-within > .sub-menu{opacity:1; visibility:visible; transform:none}
.csl-nav .sub-menu a{border-radius:9px; font-size:.92rem}

.csl-hdr-cta{display:flex; align-items:center; gap:10px}
.csl-burger{
	display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line);
	align-items:center; justify-content:center;
}
.csl-burger span{display:block; width:17px; height:1.5px; background:var(--ink); position:relative}
.csl-burger span::before,.csl-burger span::after{
	content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--ink);
}
.csl-burger span::before{top:-5px}
.csl-burger span::after{top:5px}

.csl-drawer{
	display:none; position:fixed; inset:0; z-index:80;
	background:color-mix(in srgb, var(--navy-ink) 88%, transparent);
	-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
	opacity:0; transition:opacity .25s;
}
.csl-drawer.is-open{display:block; opacity:1}
.csl-drawer__panel{
	position:absolute; right:0; top:0; bottom:0; width:min(340px,86vw);
	background:var(--surface); padding:22px var(--pad) 30px;
	display:flex; flex-direction:column; gap:0;
	box-shadow:var(--shadow-lg); overflow-y:auto;
	transform:translateX(14px); transition:transform .3s var(--ease);
}
.csl-drawer.is-open .csl-drawer__panel{transform:none}
.csl-drawer__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.csl-drawer__head img{height:34px; width:auto}
.csl-drawer__close{
	width:38px; height:38px; border-radius:11px; border:1px solid var(--line);
	display:grid; place-items:center; color:var(--ink);
}
.csl-drawer__nav{list-style:none; margin:0; padding:0}
.csl-drawer__nav a{
	display:block; padding:13px 0; border-bottom:1px solid var(--line-soft);
	font-family:var(--f-display); font-weight:600; font-size:1.06rem; color:var(--ink);
}
.csl-drawer__nav a:hover{color:var(--cyan)}
.csl-drawer__panel .csl-btn{margin-top:18px; justify-content:center}
.csl-drawer__mail{margin-top:14px; font-family:var(--f-mono); font-size:.78rem; color:var(--muted)}

/* ------------------------------------------------------------------ 7. HERO */
.csl-hero{
	position:relative; overflow:hidden; color:var(--on-panel); isolation:isolate;
	background:
		radial-gradient(120% 90% at 88% 8%, rgba(45,90,168,.55), transparent 58%),
		radial-gradient(90% 80% at 6% 96%, rgba(14,147,180,.34), transparent 62%),
		linear-gradient(168deg,#1B2158 0%,#141949 52%,#0C1030 100%);
}
.csl-hero__video{
	position:absolute; inset:0; z-index:0; overflow:hidden;
}
.csl-hero__video video,.csl-hero__video img{
	width:100%; height:100%; object-fit:cover; opacity:.34;
	filter:saturate(70%) contrast(105%);
}
.csl-hero__video::after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(168deg,rgba(27,33,88,.72),rgba(12,16,48,.9));
}
.csl-hero__inner{
	position:relative; z-index:2;
	display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
	gap:clamp(32px,5vw,68px); align-items:center;
	padding-block:clamp(56px,8vw,102px);
}
.csl-hero h1{color:#fff}
.csl-hero h1 em,.csl-grad-text{
	font-style:normal;
	background:linear-gradient(96deg,var(--cyan-pale),var(--cyan-br) 45%,#7FB2E8);
	-webkit-background-clip:text; background-clip:text;
	-webkit-text-fill-color:transparent; color:transparent;
}
.csl-hero .csl-lede{margin-top:22px; font-size:clamp(1.04rem,1.4vw,1.2rem); color:#BDCCE6; max-width:52ch}
.csl-hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.csl-hero__note{
	margin-top:30px; display:flex; align-items:center; gap:10px;
	font-family:var(--f-mono); font-size:.74rem; letter-spacing:.06em;
	color:var(--on-panel-mut); text-transform:uppercase;
}

/* page hero — inner pages */
.csl-phero{
	position:relative; overflow:hidden; color:var(--on-panel); isolation:isolate;
	background:
		radial-gradient(110% 100% at 82% 0%, rgba(45,90,168,.5), transparent 60%),
		linear-gradient(168deg,#1A1F55,#12173C 60%,#0C1030);
}
.csl-phero__inner{position:relative; z-index:2; padding-block:clamp(52px,7vw,92px); max-width:900px}
.csl-phero h1{color:#fff; font-size:clamp(2.1rem,5vw,3.6rem)}
.csl-phero .csl-lede{margin-top:20px; color:#BDCCE6}
.csl-crumbs{
	display:flex; gap:9px; align-items:center; flex-wrap:wrap;
	font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em;
	text-transform:uppercase; color:var(--on-panel-mut); margin-bottom:18px;
}
.csl-crumbs a:hover{color:var(--cyan-pale)}

/* ---------------------------------------------- 8. LAPTOP SCROLL ANIMATION */
.csl-laptop{
	position:relative; z-index:2;
	perspective:1600px; perspective-origin:50% 40%;
	will-change:transform;
}
.csl-laptop__body{
	transform-style:preserve-3d;
	transform:rotateX(var(--lx,16deg)) rotateY(var(--ly,-9deg)) rotateZ(var(--lz,1deg));
	transition:transform .1s linear;
}
.csl-laptop__lid{
	position:relative; border-radius:14px 14px 4px 4px;
	background:linear-gradient(160deg,#2A3160,#171C42);
	padding:10px 10px 14px;
	box-shadow:0 40px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(146,214,226,.22);
	border:1px solid rgba(146,214,226,.2);
}
.csl-laptop__cam{
	position:absolute; top:4px; left:50%; translate:-50% 0;
	width:5px; height:5px; border-radius:50%; background:rgba(146,214,226,.45);
}
.csl-laptop__screen{
	position:relative; aspect-ratio:16/10; border-radius:7px; overflow:hidden;
	background:#0A0E22; box-shadow:inset 0 0 0 1px rgba(146,214,226,.14);
}
.csl-laptop__slide{
	position:absolute; inset:0; opacity:0; transform:scale(1.04);
	transition:opacity .55s var(--ease), transform .8s var(--ease);
	display:grid; place-items:center;
}
.csl-laptop__slide.is-active{opacity:1; transform:none}
.csl-laptop__slide img{width:100%; height:100%; object-fit:cover}
.csl-laptop__slide--fallback{
	background:linear-gradient(150deg,#18205A,#0D1130);
	padding:clamp(14px,3vw,26px); place-items:start; align-content:center; gap:10px;
	display:grid;
}
.csl-laptop__slide--fallback .k{
	font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em;
	text-transform:uppercase; color:var(--cyan-pale);
}
.csl-laptop__slide--fallback .h{
	font-family:var(--f-display); font-weight:700; color:#fff; line-height:1.15;
	font-size:clamp(.95rem,2.1vw,1.5rem); letter-spacing:-.02em;
}
.csl-laptop__slide--fallback .m{
	font-family:var(--f-mono); font-size:clamp(1.3rem,3.4vw,2.2rem); color:var(--cyan-br);
	font-variant-numeric:tabular-nums;
}
.csl-laptop__slide--fallback .bars{display:flex; gap:5px; align-items:flex-end; height:38px; margin-top:4px}
.csl-laptop__slide--fallback .bars i{
	display:block; width:9px; border-radius:2px;
	background:linear-gradient(180deg,var(--cyan-br),rgba(53,196,224,.18));
}
.csl-laptop__base{
	height:13px; margin:0 -16px;
	border-radius:0 0 16px 16px;
	background:linear-gradient(180deg,#252C58,#131836);
	box-shadow:0 22px 40px rgba(0,0,0,.5);
	border:1px solid rgba(146,214,226,.16); border-top:0;
	position:relative;
}
.csl-laptop__base::after{
	content:""; position:absolute; top:2px; left:50%; translate:-50% 0;
	width:16%; height:3px; border-radius:0 0 5px 5px; background:rgba(146,214,226,.24);
}
.csl-laptop__dots{
	display:flex; gap:7px; justify-content:center; margin-top:22px;
	position:relative; z-index:3;
}
.csl-laptop__dots button{
	width:26px; height:4px; border-radius:100px; background:rgba(146,214,226,.26);
	transition:background .25s, width .25s;
}
.csl-laptop__dots button[aria-current="true"]{background:var(--cyan-br); width:42px}

/* ---------------------------------------------------------------- 9. FACTS */
.csl-facts{background:var(--surface); border-block:1px solid var(--line-soft)}
.csl-facts__grid{
	display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft);
}
.csl-fact{background:var(--surface); padding:clamp(26px,3.4vw,40px) clamp(20px,3vw,36px)}
.csl-fact .k{
	font-family:var(--f-mono); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:500;
	color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.1;
}
.csl-fact .k span{color:var(--cyan)}
.csl-fact .v{margin-top:8px; font-size:.92rem; color:var(--muted); line-height:1.45}

/* --------------------------------------------------- 10. SERVICE CAROUSEL */
.csl-carousel{position:relative}
.csl-carousel__track{
	display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
	padding:6px 2px 22px; margin:0 -2px;
	scrollbar-width:none; -ms-overflow-style:none;
}
.csl-carousel__track::-webkit-scrollbar{display:none}
.csl-scard{
	scroll-snap-align:start; flex:0 0 clamp(250px,26vw,304px);
	background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
	padding:26px 24px 24px; display:flex; flex-direction:column; gap:13px;
	transition:transform .35s var(--ease), box-shadow .35s, border-color .35s;
	transform-style:preserve-3d; position:relative; overflow:hidden;
}
.csl-scard::after{
	content:""; position:absolute; right:-70px; bottom:-40px;
	width:210px; aspect-ratio:2.3/1; border-radius:50%;
	border:1px solid color-mix(in srgb,var(--cyan) 22%, transparent);
	transform:rotate(-19deg); pointer-events:none; transition:transform .5s var(--ease);
}
.csl-scard:hover{border-color:color-mix(in srgb,var(--cyan) 45%,var(--line)); box-shadow:var(--shadow-md)}
.csl-scard:hover::after{transform:rotate(-19deg) translateX(-14px)}
.csl-scard__ic{
	width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
	background:linear-gradient(140deg,color-mix(in srgb,var(--cyan) 16%,transparent),color-mix(in srgb,var(--navy) 12%,transparent));
	border:1px solid color-mix(in srgb,var(--cyan) 26%,transparent); color:var(--cyan);
	transition:transform .4s var(--ease);
}
.csl-scard:hover .csl-scard__ic{transform:translateZ(24px) scale(1.06)}
.csl-scard p{color:var(--muted); font-size:.94rem}
.csl-scard__more{
	margin-top:auto; padding-top:6px; font-family:var(--f-mono); font-size:.7rem;
	letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
	display:flex; align-items:center; gap:8px;
}
.csl-carousel__ctrl{display:flex; gap:9px; align-items:center; margin-top:6px}
.csl-carousel__ctrl button{
	width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line);
	display:grid; place-items:center; color:var(--ink); background:var(--surface);
	transition:border-color .2s, color .2s, transform .2s;
}
.csl-carousel__ctrl button:hover{border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px)}
.csl-carousel__ctrl button[disabled]{opacity:.35; cursor:not-allowed; transform:none}
.csl-carousel__rail{
	flex:1; height:3px; border-radius:100px; background:var(--line-soft);
	position:relative; overflow:hidden; margin-inline:8px;
}
.csl-carousel__rail i{
	position:absolute; inset-block:0; left:0; border-radius:100px;
	background:linear-gradient(90deg,var(--cyan-br),var(--navy));
	transition:transform .2s linear, width .2s;
}

/* ------------------------------------------------------ 10b. ROUTE CARDS
   The homepage's six doors. Deliberately plain — the job is to be scanned
   and clicked, so the only flourish is the orbit arc that sweeps in on
   hover. */
.csl-routes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.csl-route{
	--card-pad:clamp(24px,2.8vw,32px);
	position:relative; overflow:hidden; transform-style:preserve-3d;
	background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
	padding:var(--card-pad);
	display:flex; flex-direction:column; gap:12px;
	transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.csl-route::after{
	content:""; position:absolute; right:-80px; bottom:-56px;
	width:250px; aspect-ratio:2.3/1; border-radius:50%;
	border:1px solid color-mix(in srgb,var(--cyan) 26%, transparent);
	transform:rotate(-19deg); pointer-events:none;
	transition:transform .55s var(--ease), border-color .3s;
}
.csl-route:hover{
	border-color:color-mix(in srgb,var(--cyan) 48%,var(--line));
	box-shadow:var(--shadow-md);
}
.csl-route:hover::after{
	transform:rotate(-19deg) translate(-22px,-10px);
	border-color:color-mix(in srgb,var(--cyan) 48%, transparent);
}
.csl-route__ic{
	width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
	background:linear-gradient(140deg,color-mix(in srgb,var(--cyan) 16%,transparent),color-mix(in srgb,var(--navy) 12%,transparent));
	border:1px solid color-mix(in srgb,var(--cyan) 26%,transparent); color:var(--cyan);
	transition:transform .4s var(--ease);
}
.csl-route:hover .csl-route__ic{transform:translateZ(26px) scale(1.05)}
.csl-route p{color:var(--muted); font-size:.94rem}
.csl-route__go{
	margin-top:auto; padding-top:8px;
	display:inline-flex; align-items:center; gap:8px;
	font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em;
	text-transform:uppercase; color:var(--cyan);
}
.csl-route__go svg{transition:transform .25s}
.csl-route:hover .csl-route__go svg{transform:translateX(4px)}

/* ----------------------------------------------- 11. VENDOR / BRAND MENU */
/* Four across, so the eight partners fill two complete rows. The container
   is painted in the surface colour, not the rule colour, so a partner list
   of any other length leaves clean empty cells rather than grey blocks. */
.csl-vendors{
	display:grid; grid-template-columns:repeat(4,1fr);
	gap:1px; background:var(--surface); border:1px solid var(--line);
	border-radius:var(--r-lg); overflow:hidden;
	box-shadow:0 0 0 1px var(--line) inset;
}
.csl-vendors > *{box-shadow:0 0 0 1px var(--line)}
.csl-vendor{
	--brand:var(--cyan);
	position:relative; background:var(--surface); padding:26px 22px 24px;
	display:flex; flex-direction:column; gap:9px; overflow:hidden;
	transition:background .35s var(--ease), color .35s;
	isolation:isolate;
}
.csl-vendor::before{
	content:""; position:absolute; inset:0; z-index:-1;
	background:var(--brand);
	transform:translateY(101%); transition:transform .42s var(--ease);
}
.csl-vendor:hover,.csl-vendor:focus-visible{color:#fff}
.csl-vendor:hover::before,.csl-vendor:focus-visible::before{transform:none}
.csl-vendor__name{
	font-family:var(--f-display); font-weight:700; font-size:1.12rem;
	letter-spacing:-.02em; color:var(--ink); transition:color .35s;
}
.csl-vendor:hover .csl-vendor__name{color:#fff}
.csl-vendor__role{
	font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em;
	text-transform:uppercase; color:var(--brand); transition:color .35s;
}
.csl-vendor:hover .csl-vendor__role{color:rgba(255,255,255,.82)}
.csl-vendor__desc{font-size:.88rem; color:var(--muted); transition:color .35s; line-height:1.5}
.csl-vendor:hover .csl-vendor__desc{color:rgba(255,255,255,.9)}
.csl-vendor__mark{
	width:34px; height:3px; border-radius:100px; background:var(--brand);
	transition:background .35s, width .35s var(--ease);
}
.csl-vendor:hover .csl-vendor__mark{background:#fff; width:58px}

.csl-strip{
	position:relative; z-index:2; border-top:1px solid rgba(146,214,226,.16);
	display:flex; align-items:center; gap:clamp(20px,3.6vw,44px); flex-wrap:wrap;
	padding-block:22px;
}
.csl-strip .lbl{
	font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em;
	text-transform:uppercase; color:#8FA3C8;
}
.csl-strip a{
	font-family:var(--f-display); font-weight:600; font-size:1.02rem;
	color:#C4D3EA; opacity:.82; transition:opacity .2s, color .25s;
}
.csl-strip a:hover{opacity:1; color:var(--brand,#fff)}

/* ---------------------------------------------------------------- 12. PLANS */
.csl-plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.csl-plan{
	position:relative; background:var(--surface); border:1px solid var(--line);
	border-radius:var(--r-lg); padding:28px 26px 26px;
	display:flex; flex-direction:column; gap:18px;
	transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
	transform-style:preserve-3d;
}
.csl-plan:hover{border-color:color-mix(in srgb,var(--cyan) 45%,var(--line)); box-shadow:var(--shadow-md)}
.csl-plan.is-featured{
	background:linear-gradient(172deg,var(--feat-a),var(--feat-b));
	border-color:var(--feat-line); color:var(--on-panel); box-shadow:var(--shadow-lg);
}
.csl-plan.is-featured h3,.csl-plan.is-featured .csl-price .amt{color:#fff}
.csl-plan.is-featured .csl-plan__name{color:var(--cyan-pale)}
.csl-plan.is-featured .csl-price .per,.csl-plan.is-featured li,.csl-plan.is-featured .csl-price .cur{color:var(--on-panel-mut)}
.csl-plan.is-featured hr{background:rgba(146,214,226,.2)}
.csl-badge{
	position:absolute; top:-11px; left:26px;
	font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
	padding:5px 11px; border-radius:100px; color:#062733;
	background:linear-gradient(100deg,var(--cyan-pale),var(--cyan-br));
}
.csl-plan__name{
	font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em;
	text-transform:uppercase; color:var(--cyan);
}
.csl-price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.csl-price .amt{
	font-family:var(--f-display); font-size:clamp(2.4rem,4vw,3rem); font-weight:800;
	letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1;
}
.csl-price .cur{font-family:var(--f-mono); font-size:.9rem; color:var(--muted); align-self:flex-start; margin-top:4px}
.csl-price .per{font-size:.9rem; color:var(--muted)}
.csl-plan hr{height:1px; background:var(--line); border:0; margin:0}
.csl-plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:.94rem; color:var(--ink-2)}
.csl-plan li{display:flex; gap:10px; align-items:flex-start}
.csl-plan li svg{flex:none; margin-top:5px; color:var(--cyan)}
.csl-plan .csl-btn{margin-top:auto}

.csl-callout{
	margin-top:20px; display:grid; grid-template-columns:minmax(0,1fr) auto;
	gap:clamp(20px,3vw,44px); align-items:center;
	background:var(--surface); border:1px solid var(--line);
	border-radius:var(--r-lg); padding:clamp(24px,3vw,34px);
	position:relative; overflow:hidden;
}
.csl-callout::after,.csl-callout::before{
	content:""; position:absolute; top:50%; translate:0 -50%; border-radius:50%;
	transform:rotate(-19deg); pointer-events:none;
}
.csl-callout::after{
	right:-90px; width:340px; aspect-ratio:2.4/1;
	border:1px solid color-mix(in srgb,var(--cyan) 34%, transparent);
	translate:calc(var(--csl-mx) * 38px) calc(-50% + var(--csl-my) * 24px);
}
.csl-callout::before{
	right:-40px; width:190px; aspect-ratio:2.2/1;
	border:1px solid color-mix(in srgb,var(--cyan) 22%, transparent);
	translate:calc(var(--csl-mx) * 21px) calc(-50% + var(--csl-my) * 13px);
}
.csl-callout h3{margin-bottom:8px}
.csl-callout p{color:var(--muted); font-size:.96rem; max-width:58ch}
.csl-note{
	margin-top:18px; font-size:.83rem; color:var(--muted);
	display:flex; gap:9px; align-items:flex-start;
	font-family:var(--f-mono); line-height:1.6;
}
.csl-note b{color:var(--cyan); font-weight:500}
.csl-est{
	font-family:var(--f-mono); font-size:.66rem; color:var(--cyan);
	vertical-align:super; margin-left:2px;
}

/* --------------------------------------------------------------- 13. PANELS */
.csl-panel{
	position:relative; overflow:hidden; color:var(--on-panel);
	background:linear-gradient(166deg,#1A1F55,#12173C 60%,#0C1030);
}
.csl-panel::before,.csl-panel::after{
	content:""; position:absolute; border-radius:50%;
	transform:rotate(-19deg); pointer-events:none;
}
.csl-panel::before{
	left:-8%; top:-30%; width:min(900px,110vw); aspect-ratio:2.5/1;
	border:1px solid rgba(146,214,226,.14);
	translate:calc(var(--csl-mx) * 58px) calc(var(--csl-my) * 36px);
}
.csl-panel::after{
	right:-14%; bottom:-40%; width:min(1100px,130vw); aspect-ratio:2.7/1;
	border:1px solid rgba(146,214,226,.10);
	translate:calc(var(--csl-mx) * -40px) calc(var(--csl-my) * -25px);
}
.csl-panel .csl-wrap{position:relative; z-index:1}
.csl-panel h2,.csl-panel h3{color:#fff}

.csl-caps{
	display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
	background:rgba(146,214,226,.16); border:1px solid rgba(146,214,226,.16);
	border-radius:var(--r-lg); overflow:hidden;
}
.csl-cap{
	background:rgba(9,13,38,.55); padding:clamp(24px,2.8vw,32px);
	display:flex; flex-direction:column; gap:12px; transition:background .3s;
}
.csl-cap:hover{background:rgba(45,90,168,.22)}
.csl-cap__ic{
	width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
	background:linear-gradient(140deg,rgba(53,196,224,.22),rgba(45,90,168,.22));
	border:1px solid rgba(146,214,226,.26); color:var(--cyan-pale);
}
.csl-cap h3{font-size:1.1rem}
.csl-cap p{color:#A9BAD8; font-size:.93rem}
.csl-cap__vendors{
	margin-top:4px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em;
	text-transform:uppercase; color:var(--cyan-pale); opacity:.8;
}

/* --------------------------------------------- 14. PARALLAX PHOTO BANDS */
.csl-photoband{
	position:relative; overflow:hidden; border-radius:var(--r-lg);
	min-height:clamp(300px,44vw,540px);
	background:linear-gradient(150deg,var(--panel-2),var(--panel));
	display:grid; align-items:end;
	box-shadow:var(--shadow-lg);
}
.csl-photoband__media{position:absolute; inset:-12% -7%; z-index:0; will-change:transform}
.csl-photoband__media img,.csl-photoband__media video{
	width:100%; height:100%; object-fit:cover;
}
.csl-photoband::after{
	content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
	background:linear-gradient(to top,rgba(9,13,38,.88) 0%,rgba(9,13,38,.28) 48%,rgba(9,13,38,.12) 100%);
}
.csl-photoband__cap{
	position:relative; z-index:2; padding:clamp(24px,4vw,44px);
	color:#fff; max-width:62ch;
}
.csl-photoband__cap h3{color:#fff; margin-bottom:9px}
.csl-photoband__cap p{color:rgba(255,255,255,.86); font-size:.96rem}
.csl-photoband__empty{
	position:relative; z-index:2; margin:auto; padding:clamp(28px,4vw,48px);
	text-align:center; color:var(--on-panel-mut); max-width:46ch;
}
.csl-photoband__empty .ic{
	width:54px; height:54px; margin:0 auto 16px; border-radius:15px; display:grid; place-items:center;
	border:1px dashed rgba(146,214,226,.4); color:var(--cyan-pale);
}
.csl-photoband__empty code{
	font-family:var(--f-mono); font-size:.8rem; color:var(--cyan-pale);
	background:rgba(146,214,226,.1); padding:2px 7px; border-radius:5px;
}

/* --------------------------------------------------------- 15. TILT CARDS */
.csl-tilt{transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; transform-style:preserve-3d}
.csl-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.csl-grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.csl-card{
	--card-pad:clamp(24px,2.8vw,32px);
	background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
	padding:var(--card-pad); display:flex; flex-direction:column; gap:13px;
	position:relative; overflow:hidden;
}
.csl-card:hover{border-color:color-mix(in srgb,var(--cyan) 45%,var(--line)); box-shadow:var(--shadow-md)}
.csl-card p{color:var(--muted); font-size:.94rem}
.csl-card__ic{
	width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
	background:linear-gradient(140deg,color-mix(in srgb,var(--cyan) 16%,transparent),color-mix(in srgb,var(--navy) 12%,transparent));
	border:1px solid color-mix(in srgb,var(--cyan) 26%,transparent); color:var(--cyan);
}
.csl-card__meta{
	font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
	text-transform:uppercase; color:var(--cyan);
}
.csl-card__thumb{
	margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 4px;
	aspect-ratio:16/9; overflow:hidden; background:var(--ground-2);
}
.csl-card__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.csl-card:hover .csl-card__thumb img{transform:scale(1.04)}

/* --------------------------------------------------------------- 16. STEPS */
.csl-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); counter-reset:s}
.csl-step{position:relative; padding-top:26px; border-top:2px solid var(--line)}
.csl-step::before{
	counter-increment:s; content:"0" counter(s);
	position:absolute; top:-1px; left:0; translate:0 -50%;
	font-family:var(--f-mono); font-size:.72rem; font-weight:600; letter-spacing:.1em;
	color:var(--cyan); background:var(--ground); padding-right:12px;
}
.csl-step.is-first{border-top-color:var(--cyan)}
.csl-step h3{margin-bottom:9px}
.csl-step p{color:var(--muted); font-size:.95rem}

/* ------------------------------------------------------------- 17. DOMAINS */
.csl-domain{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
	padding:clamp(28px,4vw,46px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:clamp(26px,4vw,54px); align-items:center; box-shadow:var(--shadow-sm);
}
.csl-ws{
	font-family:var(--f-display); font-weight:800; letter-spacing:-.05em;
	font-size:clamp(3rem,6.5vw,5rem); line-height:.9;
	background:linear-gradient(102deg,var(--cyan-br),var(--cyan) 40%,var(--navy));
	-webkit-background-clip:text; background-clip:text;
	-webkit-text-fill-color:transparent; color:transparent;
}
.csl-dsearch{display:flex; gap:9px; margin-top:22px; flex-wrap:wrap}
.csl-dsearch .fld{
	flex:1 1 220px; display:flex; align-items:center;
	border:1.5px solid var(--line); border-radius:100px; padding:4px 6px 4px 18px;
	background:var(--ground); transition:border-color .2s;
}
.csl-dsearch .fld:focus-within{border-color:var(--cyan)}
.csl-dsearch input{border:0; background:none; outline:none; padding:9px 0; flex:1; min-width:0; font-size:.98rem}
.csl-dsearch .tld{font-family:var(--f-mono); font-weight:500; color:var(--cyan); padding-right:10px}
.csl-ticks{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.csl-ticks li{display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:var(--ink-2)}
.csl-ticks svg{flex:none; margin-top:5px; color:var(--cyan)}

/* ----------------------------------------------------- 18. PORTAL / VACANCY */
.csl-portal{
	position:relative; display:flex; flex-direction:column; gap:14px;
	background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
	padding:clamp(24px,2.8vw,32px); overflow:hidden; transform-style:preserve-3d;
	transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.csl-portal:hover{border-color:color-mix(in srgb,var(--cyan) 48%,var(--line)); box-shadow:var(--shadow-md)}
.csl-portal__url{
	font-family:var(--f-mono); font-size:.76rem; color:var(--cyan);
	word-break:break-all; letter-spacing:.01em;
}
.csl-portal__go{
	margin-top:auto; display:inline-flex; align-items:center; gap:8px;
	font-family:var(--f-display); font-weight:600; font-size:.92rem; color:var(--ink);
}
.csl-portal:hover .csl-portal__go{color:var(--cyan)}

.csl-vacancy{
	display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(18px,3vw,36px);
	align-items:center; background:var(--surface); border:1px solid var(--line);
	border-radius:var(--r-lg); padding:clamp(22px,2.6vw,30px);
	transition:border-color .3s, box-shadow .3s;
}
.csl-vacancy:hover{border-color:color-mix(in srgb,var(--cyan) 42%,var(--line)); box-shadow:var(--shadow-sm)}
.csl-vacancy + .csl-vacancy{margin-top:14px}
.csl-vacancy__meta{
	display:flex; gap:16px; flex-wrap:wrap; margin-top:10px;
	font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; color:var(--muted);
	text-transform:uppercase;
}
.csl-vacancy__meta b{color:var(--ink-2); font-weight:500}
.csl-vacancy p{color:var(--muted); font-size:.95rem; margin-top:10px; max-width:62ch}
.csl-pill{
	display:inline-flex; align-self:flex-start; align-items:center;
	gap:7px; padding:5px 12px; border-radius:100px;
	font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
	border:1px solid currentColor;
}
.csl-pill--open{color:var(--ok)}
.csl-pill--closed{color:var(--muted)}
.csl-pill--soon{color:var(--warn)}
.csl-empty{
	border:1px dashed var(--line); border-radius:var(--r-lg);
	padding:clamp(32px,5vw,58px); text-align:center; color:var(--muted);
	background:var(--surface);
}
.csl-empty h3{margin-bottom:10px}

/* ----------------------------------------------------------------- 19. FORM */
.csl-form{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
	padding:clamp(26px,3.4vw,40px); box-shadow:var(--shadow-sm);
}
.csl-field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.csl-field label{
	font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em;
	text-transform:uppercase; color:var(--muted);
}
.csl-field label .req{color:var(--cyan)}
.csl-field input,.csl-field textarea,.csl-field select{
	border:1.5px solid var(--line); border-radius:12px; background:var(--ground);
	padding:12px 15px; outline:none; transition:border-color .2s, background .2s;
	font-size:1rem; width:100%;
}
.csl-field textarea{min-height:150px; resize:vertical; line-height:1.6}
.csl-field input:focus,.csl-field textarea:focus,.csl-field select:focus{
	border-color:var(--cyan); background:var(--surface);
}
.csl-field.has-error input,.csl-field.has-error textarea{border-color:var(--err)}
.csl-field__err{font-size:.82rem; color:var(--err)}
.csl-form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.csl-form__hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.csl-form__consent{
	display:flex; gap:11px; align-items:flex-start; font-size:.88rem;
	color:var(--muted); margin-bottom:20px;
}
.csl-form__consent input{width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--cyan)}
.csl-alert{
	border-radius:12px; padding:15px 18px; margin-bottom:22px;
	font-size:.94rem; display:flex; gap:11px; align-items:flex-start;
	border:1px solid currentColor;
}
.csl-alert svg{flex:none; margin-top:3px}
.csl-alert--ok{color:var(--ok); background:color-mix(in srgb,var(--ok) 8%,transparent)}
.csl-alert--err{color:var(--err); background:color-mix(in srgb,var(--err) 8%,transparent)}
.csl-alert strong{display:block; color:var(--ink)}

.csl-contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(28px,4vw,54px); align-items:start}
.csl-contact-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.csl-contact-list li{
	display:flex; gap:16px; align-items:flex-start;
	padding-block:20px; border-bottom:1px solid var(--line-soft);
}
.csl-contact-list li:first-child{padding-top:0}
.csl-contact-list .ic{
	width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
	background:color-mix(in srgb,var(--cyan) 12%,transparent);
	border:1px solid color-mix(in srgb,var(--cyan) 26%,transparent); color:var(--cyan);
}
.csl-contact-list li > span:last-child{display:flex; flex-direction:column; gap:3px; min-width:0}
.csl-contact-list .k{
	font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em;
	text-transform:uppercase; color:var(--muted);
}
.csl-contact-list .v{font-size:1rem; color:var(--ink); font-weight:500; word-break:break-word}
.csl-contact-list .v a:hover{color:var(--cyan)}
.csl-map{
	margin-top:24px; border-radius:var(--r-lg); overflow:hidden;
	border:1px solid var(--line); background:var(--ground-2);
	aspect-ratio:16/10;
}
.csl-map iframe{width:100%; height:100%; border:0; display:block}
.csl-map__empty{
	display:grid; place-items:center; height:100%; text-align:center;
	color:var(--muted); font-family:var(--f-mono); font-size:.8rem; padding:20px;
}

/* ------------------------------------------------------------------ 20. CTA */
.csl-cta{
	position:relative; overflow:hidden; border-radius:var(--r-lg);
	background:linear-gradient(104deg,var(--navy) 0%,#23499A 46%,var(--cyan) 100%);
	color:#fff; padding:clamp(38px,5.5vw,68px);
	display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,48px); align-items:center;
}
.csl-cta::after{
	content:""; position:absolute; left:22%; top:120%;
	width:min(1000px,140vw); aspect-ratio:2.6/1; border-radius:50%;
	border:1.5px solid rgba(255,255,255,.22); transform:rotate(-19deg); pointer-events:none;
	translate:calc(var(--csl-mx) * 66px) calc(var(--csl-my) * 38px);
}
.csl-cta h2{color:#fff; max-width:24ch}
.csl-cta p{color:rgba(255,255,255,.86); margin-top:14px; max-width:46ch}
.csl-cta .csl-btn--primary{background:#fff; color:var(--navy); box-shadow:0 10px 30px rgba(0,0,0,.22)}
.csl-cta .csl-btn--primary:hover{color:var(--navy)}
.csl-cta .csl-btn--ghost{border-color:rgba(255,255,255,.5); color:#fff; background:transparent}
.csl-cta .csl-btn--ghost:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff}

/* --------------------------------------------------------------- 21. FOOTER */
.csl-footer{
	background:var(--navy-ink); color:var(--on-panel-mut);
	padding-block:clamp(48px,6vw,74px) 0; margin-top:clamp(52px,7vw,86px);
}
.csl-footer__top{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,48px)}
.csl-footer__brand img{height:54px; width:auto}
.csl-footer__brand p{margin-top:18px; font-size:.93rem; color:#8FA3C8; max-width:34ch}
.csl-social{display:flex; gap:10px; margin-top:22px}
.csl-social a{
	width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
	border:1px solid rgba(146,214,226,.2); color:var(--cyan-pale);
	transition:background .2s, border-color .2s;
}
.csl-social a:hover{background:rgba(146,214,226,.12); border-color:var(--cyan-pale)}
.csl-fcol h4{
	font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
	color:var(--cyan-pale); font-weight:500; margin-bottom:16px;
}
.csl-fcol ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.93rem}
.csl-fcol a{color:#A9B9D6; transition:color .2s}
.csl-fcol a:hover{color:#fff}
.csl-footer__bot{
	margin-top:clamp(36px,5vw,56px); padding-block:22px;
	border-top:1px solid rgba(146,214,226,.14);
	display:flex; gap:18px; flex-wrap:wrap; align-items:center;
	font-family:var(--f-mono); font-size:.74rem; color:#7C8DB4;
}
.csl-footer__bot .spacer{flex:1}
.csl-footer__bot a:hover{color:var(--cyan-pale)}

/* -------------------------------------------------------------- 22. EDITOR */
.csl-entry{max-width:72ch}
.csl-entry h2,.csl-entry h3,.csl-entry h4{margin-top:1.8em; margin-bottom:.5em}
.csl-entry p,.csl-entry ul,.csl-entry ol,.csl-entry figure,.csl-entry blockquote{margin-block:0 1.15em}
.csl-entry ul,.csl-entry ol{padding-left:1.3em}
.csl-entry li{margin-bottom:.45em}
.csl-entry a{color:var(--cyan); text-decoration:underline; text-underline-offset:3px}
.csl-entry img{border-radius:var(--r); margin-block:1.4em}
.csl-entry blockquote{
	border-left:2px solid var(--cyan); padding-left:20px; color:var(--ink-2); font-style:italic;
}
.csl-entry code{
	font-family:var(--f-mono); font-size:.9em; background:var(--ground-2);
	padding:2px 6px; border-radius:5px;
}
.csl-entry pre{
	background:var(--panel); color:var(--on-panel); padding:20px; border-radius:var(--r);
	overflow-x:auto; font-family:var(--f-mono); font-size:.88rem;
}
.csl-entry table{width:100%; border-collapse:collapse; font-size:.94rem; display:block; overflow-x:auto}
.csl-entry th,.csl-entry td{border:1px solid var(--line); padding:10px 13px; text-align:left}
.csl-entry th{background:var(--ground-2); font-family:var(--f-display); font-weight:600}
.csl-pagination{display:flex; gap:9px; flex-wrap:wrap; margin-top:40px}
.csl-pagination .page-numbers{
	padding:9px 15px; border-radius:100px; border:1px solid var(--line);
	font-family:var(--f-mono); font-size:.85rem; transition:border-color .2s, color .2s;
}
.csl-pagination .page-numbers:hover{border-color:var(--cyan); color:var(--cyan)}
.csl-pagination .page-numbers.current{background:var(--cyan); border-color:var(--cyan); color:#fff}

/* -------------------------------------------------------------- 23. REVEALS
   Progressive by design: the hidden state only applies once the inline
   bootstrap script has added .csl-js to <html>. Without JavaScript — or if
   theme.js fails to load — every element renders visible instead of leaving
   a blank page. */
.csl-js .csl-rv{
	opacity:0; transform:translateY(22px);
	transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.csl-js .csl-rv.is-in{opacity:1; transform:none}
.csl-js .csl-rv.d1{transition-delay:.07s}
.csl-js .csl-rv.d2{transition-delay:.14s}
.csl-js .csl-rv.d3{transition-delay:.21s}
.csl-js .csl-rv.d4{transition-delay:.28s}
.csl-js .csl-rv.d5{transition-delay:.35s}

/* ---------------------------------------------------------- 24. RESPONSIVE */
@media (max-width:1080px){
	.csl-caps{grid-template-columns:repeat(2,1fr)}
	.csl-grid-3{grid-template-columns:repeat(2,1fr)}
	.csl-routes{grid-template-columns:repeat(2,1fr)}
	.csl-vendors{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
	.csl-vendors{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1140px){
	.csl-nav,.csl-hdr-cta .csl-btn{display:none}
	.csl-burger{display:flex}
}
@media (max-width:1000px){
	.csl-hero__inner{grid-template-columns:1fr; gap:44px}
	.csl-sec-head{grid-template-columns:1fr; align-items:start}
	.csl-plans{grid-template-columns:1fr}
	.csl-facts__grid{grid-template-columns:1fr 1fr}
	.csl-domain{grid-template-columns:1fr}
	.csl-steps{grid-template-columns:1fr}
	.csl-cta{grid-template-columns:1fr}
	.csl-callout{grid-template-columns:1fr}
	.csl-footer__top{grid-template-columns:1fr 1fr}
	.csl-contact-grid{grid-template-columns:1fr}
	.csl-vacancy{grid-template-columns:1fr}
}
@media (max-width:760px){
	.csl-spark{display:none}
	.csl-caps,.csl-grid-3,.csl-grid-2,.csl-routes{grid-template-columns:1fr}
}
@media (max-width:620px){
	body.csl{font-size:16px}
	.csl-vendors{grid-template-columns:1fr}
	.csl-facts__grid{grid-template-columns:1fr}
	.csl-footer__top{grid-template-columns:1fr}
	.csl-topbar .hide-s{display:none}
	.csl-orbit.o1{left:76%}
	.csl-hero__cta,.csl-cta .csl-btn-row{flex-direction:column; align-items:stretch}
	.csl-hero__cta .csl-btn,.csl-cta .csl-btn-row .csl-btn{justify-content:center}
	.csl-form__row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	.csl *,.csl *::before,.csl *::after{
		animation-duration:.01ms !important; animation-iteration-count:1 !important;
		transition-duration:.01ms !important;
	}
	.csl-js .csl-rv{opacity:1; transform:none}
	.csl-laptop__body{transform:rotateX(12deg) rotateY(-7deg)}
}
@media print{
	.csl-header,.csl-topbar,.csl-footer,.csl-drawer,.csl-cta{display:none}
	body.csl{background:#fff; color:#000}
}

/* ==========================================================================
   25. WOOCOMMERCE
   WooCommerce ships its own markup and its own stylesheet. Rather than fight
   it selector by selector, this section restates its components in the
   theme's own tokens — same surfaces, same radii, same buttons — so the shop,
   basket and checkout read as part of the site instead of a bolted-on store.
   ========================================================================== */

.csl-woo{position:relative}

/* ---- basket link in the utility bar ---- */
.csl-cart-link{display:inline-flex; align-items:center; gap:7px}
.csl-cart-count{
	display:inline-grid; place-items:center; min-width:18px; height:18px;
	padding:0 5px; border-radius:100px;
	background:var(--cyan-br); color:var(--navy-ink);
	font-size:.66rem; font-weight:600; font-variant-numeric:tabular-nums;
}

/* ---- notices ---- */
.csl .woocommerce-notices-wrapper:empty{display:none}
.csl .woocommerce-message,
.csl .woocommerce-info,
.csl .woocommerce-error,
.csl .wc-block-components-notice-banner{
	border:1px solid currentColor; border-radius:12px;
	padding:15px 18px; margin:0 0 22px; list-style:none;
	font-size:.94rem; background:color-mix(in srgb, currentColor 8%, transparent);
	display:flex; gap:11px; align-items:center; flex-wrap:wrap;
}
.csl .woocommerce-message{color:var(--ok)}
.csl .woocommerce-info{color:var(--cyan)}
.csl .woocommerce-error{color:var(--err)}
.csl .woocommerce-message::before,
.csl .woocommerce-info::before,
.csl .woocommerce-error::before{display:none}
.csl .woocommerce-message a,
.csl .woocommerce-info a{margin-left:auto}

/* ---- buttons ---- */
.csl .woocommerce a.button,
.csl .woocommerce button.button,
.csl .woocommerce input.button,
.csl .woocommerce #respond input#submit,
.csl .wc-block-components-button,
.csl .wp-element-button{
	display:inline-flex; align-items:center; justify-content:center; gap:9px;
	padding:13px 22px; border-radius:100px; border:0;
	font-family:var(--f-display); font-weight:600; font-size:.95rem; line-height:1.2;
	letter-spacing:-.01em; white-space:nowrap; text-decoration:none;
	background:linear-gradient(105deg,var(--cyan-br),var(--cyan) 42%,var(--navy));
	color:#fff; box-shadow:0 6px 20px rgba(14,147,180,.32);
	transition:transform .22s var(--ease), box-shadow .22s;
}
.csl .woocommerce a.button:hover,
.csl .woocommerce button.button:hover,
.csl .woocommerce input.button:hover,
.csl .woocommerce #respond input#submit:hover,
.csl .wc-block-components-button:hover,
.csl .wp-element-button:hover{
	transform:translateY(-2px); color:#fff;
	box-shadow:0 12px 32px rgba(14,147,180,.42);
}
.csl .woocommerce a.button.alt,
.csl .woocommerce button.button.alt{background:linear-gradient(105deg,var(--cyan-br),var(--cyan) 42%,var(--navy))}
/* Secondary actions — "update basket", "continue shopping" */
.csl .woocommerce button.button[name="update_cart"],
.csl .woocommerce a.button.wc-backward{
	background:var(--surface); color:var(--ink);
	border:1.5px solid var(--line); box-shadow:none;
}
.csl .woocommerce button.button[name="update_cart"]:hover,
.csl .woocommerce a.button.wc-backward:hover{
	border-color:var(--cyan); color:var(--cyan); box-shadow:none;
}
.csl .woocommerce button.button:disabled,
.csl .woocommerce button.button[disabled]{opacity:.45; transform:none; box-shadow:none}

/* ---- product grid ---- */
.csl .woocommerce ul.products{
	display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
	margin:0; padding:0; list-style:none;
}
.csl .woocommerce ul.products::before,
.csl .woocommerce ul.products::after{display:none}
.csl .woocommerce ul.products li.product{
	width:auto !important; margin:0 !important; float:none !important;
	background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
	padding:0 0 22px; overflow:hidden; text-align:left;
	display:flex; flex-direction:column; gap:9px;
	transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.csl .woocommerce ul.products li.product:hover{
	border-color:color-mix(in srgb,var(--cyan) 45%,var(--line));
	box-shadow:var(--shadow-md); transform:translateY(-3px);
}
.csl .woocommerce ul.products li.product a img{
	margin:0 0 14px; border-radius:0; aspect-ratio:4/3; object-fit:cover;
	background:var(--ground-2); transition:transform .5s var(--ease);
}
.csl .woocommerce ul.products li.product:hover a img{transform:scale(1.03)}
.csl .woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-family:var(--f-display); font-size:1.08rem; font-weight:700;
	letter-spacing:-.02em; color:var(--ink); padding:0 22px; margin:0;
}
.csl .woocommerce ul.products li.product .price{
	padding:0 22px; margin:0; color:var(--ink);
	font-family:var(--f-mono); font-size:1.05rem; font-weight:500;
	font-variant-numeric:tabular-nums;
}
.csl .woocommerce ul.products li.product .price del{color:var(--muted); font-size:.85em; margin-right:6px}
.csl .woocommerce ul.products li.product .price ins{text-decoration:none; color:var(--cyan)}
.csl .woocommerce ul.products li.product .button{margin:auto 22px 0; align-self:flex-start}
.csl .woocommerce ul.products li.product .star-rating{margin:0 22px; font-size:.8em; color:var(--cyan)}
.csl .woocommerce span.onsale{
	position:absolute; top:14px; left:14px; z-index:2; margin:0; padding:5px 11px;
	min-height:0; min-width:0; line-height:1; border-radius:100px;
	font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
	background:linear-gradient(100deg,var(--cyan-pale),var(--cyan-br)); color:#062733;
}
.csl .woocommerce ul.products li.product{position:relative}

/* ---- catalogue toolbar ---- */
.csl .woocommerce .woocommerce-result-count{color:var(--muted); font-size:.9rem; margin:0}
.csl .woocommerce .woocommerce-ordering{margin:0 0 26px}
.csl .woocommerce .woocommerce-ordering select,
.csl .woocommerce-page select.orderby{
	border:1.5px solid var(--line); border-radius:100px; background:var(--surface);
	padding:10px 16px; font-size:.92rem; color:var(--ink);
}

/* ---- single product ---- */
.csl .woocommerce div.product{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start}
.csl .woocommerce div.product .woocommerce-product-gallery{width:auto !important; float:none !important; margin:0}
.csl .woocommerce div.product .woocommerce-product-gallery img{border-radius:var(--r-lg); background:var(--ground-2)}
.csl .woocommerce div.product .summary{width:auto !important; float:none !important; margin:0}
.csl .woocommerce div.product .product_title{
	font-family:var(--f-display); font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800;
	letter-spacing:-.03em; color:var(--ink); margin:0 0 14px;
}
.csl .woocommerce div.product p.price,
.csl .woocommerce div.product span.price{
	font-family:var(--f-mono); font-size:1.7rem; font-weight:500; color:var(--ink);
	font-variant-numeric:tabular-nums; margin:0 0 18px;
}
.csl .woocommerce div.product p.price ins{text-decoration:none; color:var(--cyan)}
.csl .woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted); margin-bottom:22px}
.csl .woocommerce div.product form.cart{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:0 0 24px}
.csl .woocommerce div.product .woocommerce-tabs{grid-column:1 / -1; margin-top:clamp(30px,4vw,50px)}
.csl .woocommerce div.product .woocommerce-tabs ul.tabs{
	padding:0; margin:0 0 22px; display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line);
}
.csl .woocommerce div.product .woocommerce-tabs ul.tabs::before,
.csl .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.csl .woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.csl .woocommerce div.product .woocommerce-tabs ul.tabs li{
	background:none; border:0; border-radius:0; margin:0; padding:0;
}
.csl .woocommerce div.product .woocommerce-tabs ul.tabs li a{
	display:block; padding:11px 16px; border-bottom:2px solid transparent;
	font-family:var(--f-display); font-weight:600; font-size:.94rem; color:var(--muted);
}
.csl .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--cyan); border-bottom-color:var(--cyan)}
.csl .woocommerce .related > h2,
.csl .woocommerce .upsells > h2{
	font-family:var(--f-display); font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:700;
	letter-spacing:-.02em; color:var(--ink); margin:0 0 22px;
}
.csl .woocommerce .related,
.csl .woocommerce .upsells{grid-column:1 / -1; margin-top:clamp(36px,5vw,60px)}

/* quantity ---- */
.csl .woocommerce .quantity .qty{
	width:78px; border:1.5px solid var(--line); border-radius:12px;
	background:var(--ground); padding:12px 10px; text-align:center;
	font-family:var(--f-mono); font-size:1rem; color:var(--ink);
}
.csl .woocommerce .quantity .qty:focus{border-color:var(--cyan); background:var(--surface); outline:none}

/* ---- tables: basket and order review ---- */
.csl .woocommerce table.shop_table{
	border:1px solid var(--line); border-radius:var(--r-lg); border-collapse:separate;
	border-spacing:0; overflow:hidden; background:var(--surface);
	margin:0 0 26px; width:100%;
}
.csl .woocommerce table.shop_table th{
	background:var(--ground-2); color:var(--ink);
	font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
	font-weight:500; padding:14px 18px; text-align:left; border:0;
}
.csl .woocommerce table.shop_table td{
	padding:18px; border:0; border-top:1px solid var(--line-soft);
	color:var(--ink-2); font-size:.95rem; vertical-align:middle;
}
.csl .woocommerce table.shop_table .product-thumbnail img{width:64px; border-radius:10px}
.csl .woocommerce table.shop_table .product-name a{color:var(--ink); font-weight:600}
.csl .woocommerce table.shop_table .product-name a:hover{color:var(--cyan)}
.csl .woocommerce table.shop_table .amount{font-family:var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink)}
.csl .woocommerce table.shop_table .product-remove a.remove{
	display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
	color:var(--muted) !important; background:var(--ground-2); font-size:1rem; line-height:1;
}
.csl .woocommerce table.shop_table .product-remove a.remove:hover{
	background:var(--err); color:#fff !important;
}
.csl .woocommerce table.shop_table td.actions{background:var(--ground-2)}
.csl .woocommerce .cart-collaterals{display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.7fr); gap:clamp(22px,3vw,40px)}
.csl .woocommerce .cart_totals{width:auto !important; float:none !important}
.csl .woocommerce .cart_totals h2,
.csl .woocommerce-checkout h3{
	font-family:var(--f-display); font-size:1.3rem; font-weight:700;
	letter-spacing:-.02em; color:var(--ink); margin:0 0 16px;
}
.csl .woocommerce .cart_totals .order-total .amount{font-size:1.25rem; color:var(--ink)}

/* coupon ---- */
.csl .woocommerce .coupon{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.csl .woocommerce .coupon .input-text{
	border:1.5px solid var(--line); border-radius:100px; background:var(--ground);
	padding:12px 18px; font-size:.95rem; width:auto; min-width:190px;
}

/* ---- checkout ---- */
.csl .woocommerce-checkout .col2-set{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(22px,3vw,40px)}
.csl .woocommerce-checkout .col2-set .col-1,
.csl .woocommerce-checkout .col2-set .col-2{width:auto !important; float:none !important}
.csl .woocommerce form .form-row{
	display:flex; flex-direction:column; gap:7px; margin:0 0 18px; padding:0;
}
.csl .woocommerce form .form-row label{
	font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em;
	text-transform:uppercase; color:var(--muted);
}
.csl .woocommerce form .form-row .required{color:var(--cyan); text-decoration:none; border:0}
.csl .woocommerce form .form-row input.input-text,
.csl .woocommerce form .form-row textarea,
.csl .woocommerce form .form-row select,
.csl .woocommerce .select2-container .select2-selection--single{
	border:1.5px solid var(--line); border-radius:12px; background:var(--ground);
	padding:12px 15px; font-size:1rem; color:var(--ink); width:100%;
	height:auto; line-height:1.5; transition:border-color .2s, background .2s;
}
.csl .woocommerce form .form-row input.input-text:focus,
.csl .woocommerce form .form-row textarea:focus,
.csl .woocommerce form .form-row select:focus{
	border-color:var(--cyan); background:var(--surface); outline:none;
}
.csl .woocommerce form .form-row textarea{min-height:120px; resize:vertical}
.csl .woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:var(--err)}
.csl .woocommerce-checkout #order_review,
.csl .woocommerce-checkout #order_review_heading{width:auto; float:none}
.csl #add_payment_method #payment,
.csl .woocommerce-cart #payment,
.csl .woocommerce-checkout #payment{
	background:var(--ground-2); border:1px solid var(--line); border-radius:var(--r-lg);
	padding:22px;
}
.csl .woocommerce-checkout #payment ul.payment_methods{border:0; padding:0; margin:0 0 16px}
.csl .woocommerce-checkout #payment div.payment_box{
	background:var(--surface); border-radius:12px; color:var(--muted); font-size:.9rem;
}
.csl .woocommerce-checkout #payment div.payment_box::before{display:none}
.csl .woocommerce-checkout #payment .form-row.place-order{margin:0; padding:0}
.csl .woocommerce-checkout #payment #place_order{width:100%}

/* ---- my account ---- */
.csl .woocommerce-account .woocommerce-MyAccount-navigation{
	width:26% !important; float:none !important;
}
.csl .woocommerce-account .woocommerce{display:grid; grid-template-columns:minmax(200px,.3fr) minmax(0,1fr); gap:clamp(24px,3vw,44px); align-items:start}
.csl .woocommerce-account .woocommerce-MyAccount-navigation,
.csl .woocommerce-account .woocommerce-MyAccount-content{width:auto !important; float:none !important}
.csl .woocommerce-account .woocommerce-MyAccount-navigation ul{
	list-style:none; margin:0; padding:0;
	background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.csl .woocommerce-account .woocommerce-MyAccount-navigation li a{
	display:block; padding:13px 18px; font-weight:500; font-size:.94rem; color:var(--ink-2);
	border-bottom:1px solid var(--line-soft);
}
.csl .woocommerce-account .woocommerce-MyAccount-navigation li:last-child a{border-bottom:0}
.csl .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
	background:var(--ground-2); color:var(--cyan); font-weight:600;
}

/* ---- empty basket ---- */
.csl .woocommerce .cart-empty,
.csl .woocommerce .wc-empty-cart-message{
	border:1px dashed var(--line); border-radius:var(--r-lg);
	padding:clamp(32px,5vw,58px); text-align:center; color:var(--muted);
	background:var(--surface); font-size:1.05rem; margin:0 0 20px;
}
.csl .woocommerce .return-to-shop{text-align:center}

/* ---- pagination ---- */
.csl .woocommerce nav.woocommerce-pagination ul{border:0; display:flex; gap:9px; flex-wrap:wrap; justify-content:center}
.csl .woocommerce nav.woocommerce-pagination ul li{border:0; margin:0; overflow:visible}
.csl .woocommerce nav.woocommerce-pagination ul li a,
.csl .woocommerce nav.woocommerce-pagination ul li span{
	padding:9px 15px; border-radius:100px; border:1px solid var(--line);
	font-family:var(--f-mono); font-size:.85rem; color:var(--ink); background:var(--surface);
}
.csl .woocommerce nav.woocommerce-pagination ul li span.current{
	background:var(--cyan); border-color:var(--cyan); color:#fff;
}

/* ---- responsive ---- */
@media (max-width:1000px){
	.csl .woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
	.csl .woocommerce div.product{grid-template-columns:1fr}
	.csl .woocommerce-checkout .col2-set{grid-template-columns:1fr}
	.csl .woocommerce .cart-collaterals{grid-template-columns:1fr}
	.csl .woocommerce-account .woocommerce{grid-template-columns:1fr}
}
@media (max-width:620px){
	.csl .woocommerce ul.products{grid-template-columns:1fr}
	.csl .woocommerce table.shop_table td{padding:13px}
}

/* ---- WooCommerce corrections found while reviewing rendered pages ---- */

/* Woo's lists inherit the browser's bullets once our reset no longer wins. */
.csl .woocommerce nav.woocommerce-pagination ul,
.csl .woocommerce-checkout #payment ul.payment_methods,
.csl .woocommerce ul.order_details,
.csl .woocommerce-account .woocommerce-MyAccount-navigation ul{
	list-style:none; padding-left:0;
}
.csl .woocommerce-checkout #payment ul.payment_methods li{margin:0 0 10px}
.csl .woocommerce-checkout #payment ul.payment_methods label{
	display:inline-flex; align-items:center; gap:9px;
	font-family:var(--f-display); font-weight:600; font-size:.98rem; color:var(--ink);
}
.csl .woocommerce-checkout #payment ul.payment_methods input[type="radio"]{
	width:17px; height:17px; accent-color:var(--cyan);
}
.csl .woocommerce-checkout #payment div.payment_box{
	margin:8px 0 0 26px; padding:13px 16px; width:auto;
}

/* Catalogue toolbar: count left, sorting right. */
.csl .woocommerce .woocommerce-result-count{float:none}
.csl .woocommerce .woocommerce-ordering{float:none}
.csl .csl-woo .woocommerce > .woocommerce-result-count{display:inline-block}
@supports (display:grid){
	.csl .woocommerce-shop .csl-woo .woocommerce,
	.csl .woocommerce .products-toolbar{position:relative}
	.csl .woocommerce .woocommerce-ordering{
		position:absolute; top:0; right:0; margin:0;
	}
	.csl .woocommerce .woocommerce-result-count{margin:10px 0 26px}
}

/* The basket actions row reads better as one line — but the cell keeps
   display:table-cell, because flex on a td destroys its colspan and the
   whole table's columns collapse. */
.csl .woocommerce table.shop_table td.actions{
	display:table-cell; vertical-align:middle; overflow:hidden;
}
.csl .woocommerce table.shop_table td.actions .coupon{
	display:inline-flex; float:left; margin:0;
}
.csl .woocommerce table.shop_table td.actions button[name="update_cart"]{float:right}

/* Cross-sells sit in a narrower column than the main catalogue. */
.csl .woocommerce .cart-collaterals ul.products,
.csl .woocommerce .up-sells ul.products{grid-template-columns:repeat(2,1fr)}
.csl .woocommerce .cart-collaterals ul.products li.product .woocommerce-loop-product__title{font-size:.98rem}

/* The plan's data allowance, directly under the price. */
.csl-plan__data{
	font-family:var(--f-mono); font-size:.86rem; letter-spacing:.02em;
	color:var(--cyan); margin-top:-6px;
}
.csl-plan.is-featured .csl-plan__data{color:var(--cyan-pale)}

/* ==========================================================================
   26. PROMOTION PHOTOS AND LIGHTBOX
   Promotions usually arrive as posters — a bundle graphic and a terms
   graphic. The card shows the first and says how many there are; the
   lightbox opens them at a size where the small print can be read.
   ========================================================================== */

.csl-card__thumb--button{
	display:block; width:auto; padding:0; border:0; cursor:zoom-in;
	position:relative; background:var(--ground-2); text-align:left;
}
.csl-card__count{
	position:absolute; right:12px; bottom:12px;
	display:inline-flex; align-items:center; gap:6px;
	padding:5px 11px; border-radius:100px;
	background:rgba(13,17,50,.78); color:#fff;
	font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em;
	text-transform:uppercase;
	-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
	transition:background .25s;
}
.csl-card__thumb--button:hover .csl-card__count{background:var(--cyan)}

/* Every photo, stacked, on the single promotion page. */
.csl-promo-photos{display:flex; flex-direction:column; gap:18px; margin-bottom:34px}
.csl-promo-photos img{
	width:100%; border-radius:var(--r-lg); border:1px solid var(--line);
	background:var(--ground-2);
}

/* ---- the lightbox ---- */
.csl-lightbox{
	position:fixed; inset:0; z-index:200; display:none;
	background:rgba(8,11,30,.92);
	-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
	opacity:0; transition:opacity .25s var(--ease);
	padding:clamp(16px,4vw,48px);
}
.csl-lightbox.is-open{display:grid; opacity:1; place-items:center}
.csl-lightbox__inner{
	display:flex; flex-direction:column; align-items:center; gap:16px;
	max-width:min(1100px,100%); max-height:100%; width:100%;
}
.csl-lightbox__stage{
	margin:0; flex:1 1 auto; min-height:0; display:grid; place-items:center; width:100%;
}
.csl-lightbox__stage img{
	max-width:100%; max-height:calc(100vh - 190px);
	width:auto; height:auto; object-fit:contain;
	border-radius:var(--r); box-shadow:0 30px 80px rgba(0,0,0,.5);
	background:#fff;
}
.csl-lightbox__bar{
	display:flex; align-items:center; gap:10px; flex:none;
	padding:7px; border-radius:100px;
	background:rgba(255,255,255,.07);
	box-shadow:0 0 0 1px rgba(146,214,226,.22) inset;
}
.csl-lightbox__nav{
	width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
	color:#fff; background:rgba(146,214,226,.14); transition:background .2s;
}
.csl-lightbox__nav:hover{background:rgba(146,214,226,.18)}
.csl-lightbox__count{
	font-family:var(--f-mono); font-size:.78rem; color:#C4D3EA;
	min-width:62px; text-align:center; font-variant-numeric:tabular-nums;
}
.csl-lightbox__title{
	flex:none; margin:0; text-align:center;
	font-family:var(--f-display); font-weight:600; font-size:1.02rem; color:#fff;
}
.csl-lightbox__title:empty{display:none}
.csl-lightbox__bar[hidden]{display:none}
.csl-lightbox__close{
	position:absolute; top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px);
	width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
	color:#fff; background:rgba(13,17,50,.72);
	box-shadow:0 0 0 1px rgba(146,214,226,.34) inset;
	transition:background .2s, box-shadow .2s;
}
.csl-lightbox__close:hover{background:var(--err)}
@media (prefers-reduced-motion:reduce){
	.csl-lightbox{transition:none}
}