/* ============================================================================
   PASHA 3D — main stylesheet
   Colours arrive as CSS variables from the Customizer (see inc/dynamic-css.php),
   so nothing here needs editing to re-skin the site.
   ============================================================================ */

/* ---------------------------------------------------------------- tokens */
:root{
	--bg:#05070E; --bg-rgb:5,7,14;
	--surface:#0B1220; --surface-rgb:11,18,32;
	--accent:#3FE0DA; --accent-rgb:63,224,218;
	--accent-2:#FF7B6E; --accent-2-rgb:255,123,110;
	--accent-3:#A78BFA; --accent-3-rgb:167,139,250;
	--text:#E7EDF7; --text-rgb:231,237,247;
	--muted:#8D9AB2;
	--gold:#E3B23C; --gold-rgb:227,178,60;
	--k:1;

	--line:rgba(var(--text-rgb),.10);
	--line-2:rgba(var(--text-rgb),.18);
	--glass:rgba(var(--text-rgb),.035);
	--glass-2:rgba(var(--text-rgb),.06);

	--display:'Bricolage Grotesque','Trebuchet MS',system-ui,sans-serif;
	--body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
	--mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
	--urdu:'Noto Nastaliq Urdu',serif;

	--wrap:1200px;
	--gut:clamp(20px,5vw,48px);
	--r:16px;
	--r-lg:24px;
	--ease:cubic-bezier(.22,.72,.2,1);
	--spring:cubic-bezier(.34,1.4,.44,1);
	--header-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:var(--body);
	font-size:16.5px;
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:rgba(var(--accent-rgb),.28)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.hide-sm{display:inline-flex}

/* ------------------------------------------------------------ background */
.grid-floor{
	position:fixed;inset:auto 0 0 0;height:52vh;z-index:0;pointer-events:none;
	perspective:280px;perspective-origin:50% 0;opacity:.5;
}
.grid-floor-plane{
	position:absolute;inset:-60% -40% -40% -40%;
	transform:rotateX(74deg);
	background-image:
		linear-gradient(rgba(var(--accent-rgb),.16) 1px,transparent 1px),
		linear-gradient(90deg,rgba(var(--accent-rgb),.13) 1px,transparent 1px);
	background-size:78px 78px;
	animation:floor 12s linear infinite;
}
.grid-floor-fade{
	position:absolute;inset:0;
	background:linear-gradient(to top,rgba(var(--bg-rgb),.2),var(--bg) 78%);
}
@keyframes floor{to{background-position:0 78px,78px 0}}

.orb{display:none}
.orb--1{
	width:44vw;height:44vw;left:-12vw;top:-8vw;
	background:radial-gradient(circle,rgba(var(--accent-rgb),.30),transparent 68%);
	animation:drift1 22s var(--ease) infinite alternate;
}
.orb--2{
	width:38vw;height:38vw;right:-10vw;top:32vh;
	background:radial-gradient(circle,rgba(var(--accent-2-rgb),.22),transparent 68%);
	animation:drift2 26s var(--ease) infinite alternate;
}
@keyframes drift1{to{transform:translate3d(9vw,7vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-7vw,-9vh,0) scale(1.1)}}

/* ------------------------------------------------------------- typography */
.eyebrow{
	font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
	color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;
}
.eyebrow::before{content:'';width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.pulse-dot{
	width:7px;height:7px;border-radius:50%;background:var(--accent);
	box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6);animation:pulse 2.4s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}

.s-title{
	font-family:var(--display);font-weight:800;letter-spacing:-.032em;line-height:1.03;
	font-size:clamp(30px,5vw,58px);margin:0 0 18px;
}
.s-title--sm{font-size:clamp(24px,3.4vw,38px)}
.s-title .ln{display:block;overflow:hidden}
.p3-js .s-title .ln>span{
	display:block;transform:translate3d(0,110%,0) rotateX(-40deg);opacity:0;
	transform-origin:top center;
	transition:transform .9s var(--ease),opacity .7s var(--ease);
	transition-delay:calc(var(--i,0) * 90ms);
}
.s-title .ln.is-in>span,.is-in .ln>span{transform:none;opacity:1}

.s-lede{max-width:60ch;color:var(--muted);font-size:clamp(15px,1.5vw,18px);margin:0}

.grad{
	background:linear-gradient(102deg,var(--accent) 0%,#fff 38%,var(--accent-2) 72%,var(--accent-3) 100%);
	-webkit-background-clip:text;background-clip:text;color:transparent;
	background-size:220% 100%;animation:shine 9s linear infinite;
}
@keyframes shine{to{background-position:220% 0}}

/* --------------------------------------------------------------- surfaces */
.glass{
	background:linear-gradient(160deg,rgba(var(--text-rgb),.06),rgba(var(--surface-rgb),.5));
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}

/* ------------------------------------------------------------------ tilt */
.tilt{
	position:relative;
	transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
	transform-style:preserve-3d;
	transition:box-shadow .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease);
	will-change:transform;
}
.tilt.is-hover{transition:box-shadow .4s var(--ease),border-color .4s var(--ease)}
.tilt [data-depth]{transform:translateZ(var(--z,0));transform-style:preserve-3d}

/* --------------------------------------------------------------- buttons */
.btn{
	position:relative;display:inline-flex;align-items:center;gap:10px;
	padding:14px 24px;border-radius:999px;border:1px solid transparent;
	font-weight:600;font-size:15px;letter-spacing:-.01em;cursor:pointer;
	transition:transform .35s var(--spring),box-shadow .35s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
	transform-style:preserve-3d;
}
.btn svg{transition:transform .35s var(--spring)}
.btn:hover svg{transform:translate3d(3px,0,0)}
.btn--sm{padding:10px 17px;font-size:14px}

.btn--solid{
	background:linear-gradient(120deg,var(--accent),var(--accent-3));
	color:#04121a;
	box-shadow:0 8px 26px -10px rgba(var(--accent-rgb),.75),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--solid:hover{box-shadow:0 16px 40px -12px rgba(var(--accent-rgb),.9),inset 0 1px 0 rgba(255,255,255,.55)}

.btn--ghost{
	background:var(--glass);border-color:var(--line-2);color:var(--text);
	backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{border-color:rgba(var(--accent-rgb),.55);color:var(--accent);background:rgba(var(--accent-rgb),.07)}

.btn.is-disabled{opacity:.42;pointer-events:none}

/* ---------------------------------------------------------------- pointer */
/* The normal arrow is never hidden — these only add light around it. */
.p3-cursor{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .4s}
.p3-cursor.is-on{opacity:1}
.p3-cursor-light,.p3-cursor-ring,.p3-cursor-dot{position:absolute;top:0;left:0;border-radius:50%}

/* a soft studio light drifting behind the pointer */
.p3-cursor-light{
	width:420px;height:420px;margin:-210px 0 0 -210px;
	background:radial-gradient(circle,rgba(var(--accent-rgb),.10),transparent 62%);
	transition:opacity .4s,background .4s;
}
.p3-cursor.is-hot .p3-cursor-light{background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 60%)}

/* a precise ring that keeps up with it */
.p3-cursor-ring{
	width:30px;height:30px;margin:-15px 0 0 -15px;
	border:1px solid rgba(var(--accent-rgb),.5);
	transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),border-color .3s,background .3s,opacity .3s;
}
.p3-cursor.is-hot .p3-cursor-ring{
	width:46px;height:46px;margin:-23px 0 0 -23px;
	border-color:rgba(var(--accent-rgb),.9);background:rgba(var(--accent-rgb),.07);
}
.p3-cursor.is-down .p3-cursor-ring{width:22px;height:22px;margin:-11px 0 0 -11px}

/* the dot is only used by the ring style */
.p3-cursor-dot{
	width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--accent);
	box-shadow:0 0 10px rgba(var(--accent-rgb),.9);opacity:0;
}
.p3-cursor--ring .p3-cursor-dot{opacity:.9}
.p3-cursor--ring .p3-cursor-light{opacity:.35}
.p3-cursor--light .p3-cursor-ring{opacity:.55}
.p3-cursor--light.is-hot .p3-cursor-ring{opacity:1}

@media (hover:none),(pointer:coarse){.p3-cursor{display:none}}

/* -------------------------------------------------------------- preloader */
html:not(.p3-js) .p3-loader{display:none}
.p3-loader{
	position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
	animation:loaderFail .5s ease 6s forwards;
	background:var(--bg);transition:opacity .8s var(--ease),visibility .8s;
}
.p3-loader.is-done{opacity:0;visibility:hidden}
@keyframes loaderFail{to{opacity:0;visibility:hidden}}
.p3-loader-inner{display:grid;justify-items:center;gap:26px}
.p3-loader-cube{width:64px;height:64px;position:relative;transform-style:preserve-3d;animation:cube 5s linear infinite}
.p3-loader-cube span{
	position:absolute;inset:0;border:1px solid rgba(var(--accent-rgb),.55);
	background:rgba(var(--accent-rgb),.06);
}
.p3-loader-cube span:nth-child(1){transform:translateZ(32px)}
.p3-loader-cube span:nth-child(2){transform:rotateY(180deg) translateZ(32px)}
.p3-loader-cube span:nth-child(3){transform:rotateY(90deg) translateZ(32px)}
.p3-loader-cube span:nth-child(4){transform:rotateY(-90deg) translateZ(32px)}
.p3-loader-cube span:nth-child(5){transform:rotateX(90deg) translateZ(32px)}
.p3-loader-cube span:nth-child(6){transform:rotateX(-90deg) translateZ(32px)}
@keyframes cube{to{transform:rotateX(360deg) rotateY(720deg)}}
.p3-loader-name{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:19px}
.p3-loader-bar{width:180px;height:2px;background:var(--line);overflow:hidden;border-radius:2px}
.p3-loader-bar i{display:block;height:100%;width:40%;background:var(--accent);animation:load 1.4s var(--ease) infinite}
@keyframes load{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

/* ----------------------------------------------------------------- header */
.site-header{
	position:fixed;top:0;left:0;right:0;z-index:900;
	transition:transform .45s var(--ease),background .35s,border-color .35s,backdrop-filter .35s;
	border-bottom:1px solid transparent;
}
.site-header.is-stuck{
	background:rgba(var(--bg-rgb),.72);border-bottom-color:var(--line);
	backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
}
.site-header.is-hidden{transform:translateY(-104%)}
.site-header-inner{display:flex;align-items:center;gap:20px;height:var(--header-h)}
.header-progress{
	position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
	background:linear-gradient(90deg,var(--accent),var(--accent-3),var(--accent-2));
}

.brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto}
.brand-mark{width:44px;height:44px;perspective:400px;display:block}
.brand-mark-inner{
	display:grid;place-items:center;width:100%;height:100%;border-radius:13px;
	background:linear-gradient(150deg,rgba(var(--text-rgb),.10),rgba(var(--surface-rgb),.85));
	border:1px solid var(--line-2);transform-style:preserve-3d;
	transition:transform .7s var(--spring),box-shadow .5s var(--ease);
}
.brand:hover .brand-mark-inner{transform:rotateY(180deg) rotateX(8deg);box-shadow:0 12px 30px -12px rgba(var(--accent-rgb),.8)}
.brand-mark img{width:30px;height:30px;object-fit:contain}
.brand-text{display:grid;line-height:1.15}
.brand-name{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em}
.brand-sub{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.site-nav{margin-left:auto}
.site-nav .menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.site-nav a{
	position:relative;display:block;padding:9px 14px;border-radius:999px;font-size:14.5px;font-weight:500;
	color:rgba(var(--text-rgb),.78);transition:color .3s,background .3s;
}
.site-nav a::after{
	content:'';position:absolute;left:14px;right:14px;bottom:5px;height:1px;
	background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease);
}
.site-nav a:hover{color:var(--text)}
.site-nav a:hover::after,.site-nav a.is-current::after{transform:scaleX(1)}
.site-nav a.is-current{color:var(--accent)}

.header-actions{display:flex;align-items:center;gap:10px}
.burger{
	display:none;width:44px;height:44px;border-radius:13px;background:var(--glass);
	border:1px solid var(--line-2);cursor:pointer;padding:0;place-items:center;
}
.burger span{display:block;width:18px;height:1.6px;background:var(--text);margin:3px auto;transition:transform .4s var(--ease),opacity .3s}
[aria-expanded="true"].burger span:nth-child(1){transform:translateY(4.6px) rotate(45deg)}
[aria-expanded="true"].burger span:nth-child(2){opacity:0}
[aria-expanded="true"].burger span:nth-child(3){transform:translateY(-4.6px) rotate(-45deg)}

.drawer{
	position:fixed;inset:var(--header-h) 0 0 0;z-index:880;
	background:rgba(var(--bg-rgb),.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
	opacity:0;transition:opacity .35s var(--ease);
}
.drawer.is-open{opacity:1}
.drawer-inner{padding:30px var(--gut);display:grid;gap:24px}
.menu--drawer{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.menu--drawer a{
	display:block;padding:14px 4px;font-family:var(--display);font-weight:600;font-size:24px;
	border-bottom:1px solid var(--line);transform:translateY(14px);opacity:0;
	animation:drawerIn .5s var(--ease) forwards;
}
.drawer.is-open .menu--drawer li:nth-child(1) a{animation-delay:.04s}
.drawer.is-open .menu--drawer li:nth-child(2) a{animation-delay:.08s}
.drawer.is-open .menu--drawer li:nth-child(3) a{animation-delay:.12s}
.drawer.is-open .menu--drawer li:nth-child(4) a{animation-delay:.16s}
.drawer.is-open .menu--drawer li:nth-child(5) a{animation-delay:.2s}
.drawer.is-open .menu--drawer li:nth-child(6) a{animation-delay:.24s}
.drawer.is-open .menu--drawer li:nth-child(7) a{animation-delay:.28s}
@keyframes drawerIn{to{transform:none;opacity:1}}
.drawer-social{display:flex;gap:12px}
.drawer-social a{
	width:44px;height:44px;display:grid;place-items:center;border-radius:14px;
	background:var(--glass);border:1px solid var(--line-2);color:var(--muted);transition:.3s;
}
.drawer-social a:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.5);transform:translateY(-3px)}
body.drawer-open{overflow:hidden}

.skip-link:focus{z-index:10001}

/* ------------------------------------------------------------------- hero */
.site-main{position:relative;z-index:1}
.hero{
	position:relative;min-height:100svh;display:flex;align-items:center;
	padding:calc(var(--header-h) + 40px) 0 90px;overflow:hidden;
}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-vignette{
	position:absolute;inset:0;z-index:1;pointer-events:none;
	background:
		radial-gradient(120% 80% at 50% 10%,transparent 40%,rgba(var(--bg-rgb),.75) 100%),
		linear-gradient(to bottom,transparent 60%,var(--bg) 98%);
}
.hero-inner{
	position:relative;z-index:2;display:grid;gap:clamp(30px,5vw,64px);
	grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;
}
.hero-urdu{font-family:var(--urdu);font-size:clamp(20px,2.6vw,30px);color:var(--muted);margin:0 0 4px;line-height:2.1}
.hero-name{
	font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.92;
	font-size:clamp(58px,11vw,132px);margin:0 0 12px;
}
.hero-name .ln{display:block;overflow:hidden;perspective:600px}
.hero-name .ln>span{
	display:block;transform:translate3d(0,110%,0) rotateX(-55deg);transform-origin:top center;
	animation:nameIn 1.1s var(--ease) forwards;animation-delay:calc(.25s + var(--i,0) * .12s);
}
@keyframes nameIn{to{transform:none}}

.hero-roles{display:flex;align-items:center;gap:12px;margin:0 0 20px;font-size:clamp(17px,2vw,23px)}
.roles-static{color:var(--muted)}
.roles{position:relative;display:inline-block;height:1.5em;min-width:9ch;perspective:500px}
.role{
	position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--display);font-weight:700;
	color:var(--accent);opacity:0;transform:rotateX(90deg) translateY(.3em);transform-origin:50% 0;
	transition:transform .7s var(--ease),opacity .5s var(--ease);
}
.role.is-on{opacity:1;transform:none}
.role.is-out{opacity:0;transform:rotateX(-90deg) translateY(-.3em)}

.hero-intro{max-width:56ch;color:rgba(var(--text-rgb),.8);font-size:clamp(15.5px,1.6vw,18px);margin:0 0 30px}
.hero-intro b{color:var(--text);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px}

.hero-stats{display:flex;flex-wrap:wrap;gap:12px}
.stat{
	flex:1 1 120px;padding:16px 18px;border-radius:var(--r);
	background:linear-gradient(150deg,rgba(var(--text-rgb),.055),rgba(var(--surface-rgb),.35));
	border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.stat:hover{border-color:rgba(var(--accent-rgb),.4)}
.stat-num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em}
.stat-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* portrait */
.hero-visual{position:relative;display:grid;place-items:center}
.portrait-stage{position:relative;width:min(100%,392px);margin-left:auto;perspective:1200px}
.portrait-card{
	position:relative;border-radius:28px;overflow:visible;
	animation:float 8s var(--ease) infinite alternate;
}
@keyframes float{to{translate:0 -16px}}
.portrait-img{
	width:100%;border-radius:26px;display:block;position:relative;z-index:1;
	max-height:min(70vh,620px);object-fit:cover;object-position:50% 18%;
	filter:saturate(1.05) contrast(1.04);
	box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}
.portrait-frame{
	position:absolute;inset:-10px;border-radius:34px;z-index:0;
	border:1px solid rgba(var(--accent-rgb),.35);
	background:linear-gradient(150deg,rgba(var(--accent-rgb),.12),transparent 55%);
	transform:translateZ(-30px);
}
.portrait-glow{
	position:absolute;inset:-14%;z-index:-1;border-radius:50%;
	background:radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.4),transparent 62%);
	filter:blur(46px);
}
.portrait-badge{
	position:absolute;left:-10px;bottom:34px;z-index:3;display:flex;align-items:center;gap:9px;
	padding:10px 15px;border-radius:14px;font-size:12.5px;font-weight:600;max-width:230px;
	background:rgba(var(--bg-rgb),.82);border:1px solid rgba(var(--accent-rgb),.35);
	backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
	box-shadow:0 18px 40px -22px rgba(0,0,0,.95);
}
.portrait-badge svg{color:var(--accent);flex:0 0 auto}
.portrait-chip{
	position:absolute;z-index:3;padding:8px 13px;border-radius:999px;
	font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
	background:rgba(var(--bg-rgb),.8);border:1px solid var(--line-2);color:var(--muted);
	backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.portrait-chip--1{right:-16px;top:44px;color:var(--accent);border-color:rgba(var(--accent-rgb),.4)}
.portrait-chip--2{right:8px;bottom:-14px;color:var(--accent-2);border-color:rgba(var(--accent-2-rgb),.4)}
.portrait-shadow{
	position:absolute;left:8%;right:8%;bottom:-30px;height:40px;border-radius:50%;
	background:radial-gradient(ellipse,rgba(0,0,0,.75),transparent 70%);filter:blur(14px);
}

.scroll-cue{
	position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
	display:grid;justify-items:center;gap:8px;color:var(--muted);
	font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
}
.scroll-cue-line{width:1px;height:44px;background:linear-gradient(var(--accent),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ----------------------------------------------------------------- ticker */
.ticker{
	position:relative;z-index:2;border-block:1px solid var(--line);
	background:rgba(var(--surface-rgb),.4);overflow:hidden;padding:16px 0;
	mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-row{display:flex;align-items:center;gap:26px;width:max-content;animation:marquee 42s linear infinite}
.ticker:hover .ticker-row{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.ticker-item{
	font-family:var(--display);font-weight:700;font-size:clamp(16px,2vw,22px);
	letter-spacing:-.02em;color:rgba(var(--text-rgb),.55);white-space:nowrap;
	transition:color .3s;
}
.ticker-item:hover{color:var(--accent)}
.ticker-sep{color:var(--accent);opacity:.6;display:grid;place-items:center}

/* ---------------------------------------------------------------- section */
.section{position:relative;z-index:1;padding:clamp(64px,9vw,124px) 0}
.section--tint{
	background:
		radial-gradient(90% 60% at 12% 0%,rgba(var(--accent-rgb),.055),transparent 60%),
		rgba(var(--surface-rgb),.42);
	border-block:1px solid var(--line);
}
.s-head{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(30px,4vw,52px)}
.s-head-side{display:grid;gap:16px;justify-items:start;max-width:46ch}

.p3-js .rv{opacity:0;translate:0 26px;transition:opacity .8s var(--ease),translate .8s var(--ease);transition-delay:var(--rv-delay,0ms)}
.p3-js .rv.is-in{opacity:1;translate:none}

.prose p{margin:0 0 18px;color:rgba(var(--text-rgb),.8)}
.prose p:first-child{font-size:1.06em;color:var(--text)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.pull{
	position:relative;margin:26px 0;padding:20px 22px 20px 56px;border-radius:var(--r);
	background:linear-gradient(140deg,rgba(var(--accent-rgb),.09),transparent);
	border:1px solid rgba(var(--accent-rgb),.22);border-left:2px solid var(--accent);
	font-family:var(--display);font-size:clamp(17px,2vw,21px);font-weight:600;line-height:1.45;
}
.pull svg{position:absolute;left:20px;top:20px;color:var(--accent);opacity:.65}
.pull p{margin:0}

.chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:22px 0 0}
.chip{
	display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
	font-size:12.5px;font-family:var(--mono);letter-spacing:.05em;
	background:var(--glass);border:1px solid var(--line-2);color:var(--muted);
}
.chip--sm{padding:4px 10px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.chip--3d{
	transition:transform .45s var(--spring),color .3s,border-color .3s,box-shadow .3s;
	transform-style:preserve-3d;
}
.chip--3d:hover{
	transform:translateY(-4px) rotateX(12deg) scale(1.04);color:var(--accent);
	border-color:rgba(var(--accent-rgb),.5);box-shadow:0 10px 24px -14px rgba(var(--accent-rgb),.9);
}

/* ------------------------------------------------------------------ about */
.about-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,70px);align-items:center}
.about-visual{position:relative;perspective:1100px}
.frame3d{position:relative;border-radius:var(--r-lg)}
.frame3d-inner{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);transform-style:preserve-3d}
.frame3d-inner img{width:100%;display:block}
.frame3d-sheen{
	position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
	background:radial-gradient(closest-side at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 70%);
}
.frame3d.is-hover .frame3d-sheen{opacity:1}
.frame3d-edge{
	position:absolute;inset:-12px;border-radius:30px;pointer-events:none;transform:translateZ(-40px);
	border:1px solid rgba(var(--accent-rgb),.28);
	background:linear-gradient(150deg,rgba(var(--accent-rgb),.1),transparent 60%);
}
.about-quote-badge{
	position:absolute;right:-14px;bottom:-14px;width:58px;height:58px;border-radius:20px;display:grid;place-items:center;
	background:linear-gradient(140deg,var(--accent),var(--accent-3));color:#04121a;
	box-shadow:0 20px 40px -18px rgba(var(--accent-rgb),.9);
}

/* ---------------------------------------------------------------- company */
.company-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,64px);align-items:center}
.company-seal{display:grid;justify-items:center;gap:26px;text-align:center}
.seal{
	--size:min(78vw,280px);
	--thick:26px;
	position:relative;width:var(--size);height:var(--size);
	perspective:1100px;transform-style:preserve-3d;
}
.seal-spin{
	position:absolute;inset:0;transform-style:preserve-3d;
	animation:coin 16s linear infinite;
	transition:animation-duration .4s;
}
.seal:hover .seal-spin{animation-duration:4.5s}
@keyframes coin{
	0%{transform:rotateX(-14deg) rotateY(0deg)}
	100%{transform:rotateX(-14deg) rotateY(360deg)}
}
.seal-face{
	position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
	backface-visibility:hidden;
	background:
		radial-gradient(circle at 32% 26%,rgba(var(--text-rgb),.16),transparent 55%),
		radial-gradient(circle at 70% 80%,rgba(var(--accent-rgb),.18),transparent 60%),
		linear-gradient(150deg,#131E33,#070C16);
	border:1px solid rgba(var(--accent-rgb),.4);
	box-shadow:inset 0 0 46px rgba(var(--accent-rgb),.2),inset 0 0 0 6px rgba(var(--text-rgb),.04);
}
.seal-face--front{transform:translateZ(calc(var(--thick) / 2))}
.seal-face--back{transform:rotateY(180deg) translateZ(calc(var(--thick) / 2))}
.seal-face img{width:60%;height:60%;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,.7))}

/* 36 strips around the edge make the coin genuinely thick. */
.seal-rim{
	position:absolute;left:50%;top:50%;
	width:calc(var(--size) * 0.0885);height:var(--thick);
	margin-left:calc(var(--size) * -0.04425);margin-top:calc(var(--thick) / -2);
	background:linear-gradient(90deg,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),.14) 40%,rgba(10,16,28,.95));
	transform:rotateZ(calc(var(--r) * 10deg)) translateY(calc(var(--size) / -2)) rotateX(90deg);
	transform-origin:50% 50%;
}
.seal-halo{
	position:absolute;inset:-18%;border-radius:50%;pointer-events:none;
	background:radial-gradient(circle,rgba(var(--accent-rgb),.28),transparent 62%);
	filter:blur(26px);
}
.seal-orbit{
	position:absolute;border-radius:50%;pointer-events:none;
	border:1px dashed rgba(var(--accent-rgb),.32);
}
.seal-orbit--1{inset:-26px;animation:ring 24s linear infinite}
.seal-orbit--2{
	inset:-46px;border-style:solid;border-color:rgba(var(--accent-2-rgb),.2);
	animation:ring 34s linear infinite reverse;
}
@keyframes ring{to{transform:rotate(360deg)}}
.seal-shadow{position:absolute;left:12%;right:12%;bottom:-26px;height:26px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.85),transparent 70%);filter:blur(11px)}

.company-name{font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,32px);letter-spacing:-.03em;margin:0}
.company-slogan{color:var(--accent);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:6px 0 0}
.company-prop{margin:16px 0 0;font-size:14px;color:var(--muted)}
.company-prop span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.company-prop b{color:var(--text);font-weight:600}

.mv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:28px}
.mv{
	padding:22px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);
	transform-style:preserve-3d;
}
.mv:hover{border-color:rgba(var(--accent-rgb),.4)}
.mv-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;margin-bottom:14px;
	background:rgba(var(--accent-rgb),.12);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.25)}
.mv h4{font-family:var(--display);font-size:16px;margin:0 0 8px;letter-spacing:-.01em}
.mv p{margin:0;color:var(--muted);font-size:14.5px}

/* ------------------------------------------------------------------ cards */
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

.card{
	position:relative;border-radius:var(--r-lg);overflow:hidden;
	background:linear-gradient(160deg,rgba(var(--text-rgb),.055),rgba(var(--surface-rgb),.55));
	border:1px solid var(--line);
	transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .4s,box-shadow .4s;
}
.card.is-hover{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 30px 60px -34px rgba(var(--accent-rgb),.55)}
.card[data-accent="accent-2"].is-hover{border-color:rgba(var(--accent-2-rgb),.45);box-shadow:0 30px 60px -34px rgba(var(--accent-2-rgb),.55)}
.card[data-accent="accent-3"].is-hover{border-color:rgba(var(--accent-3-rgb),.45);box-shadow:0 30px 60px -34px rgba(var(--accent-3-rgb),.55)}
.card[data-accent="gold"].is-hover{border-color:rgba(var(--gold-rgb),.45);box-shadow:0 30px 60px -34px rgba(var(--gold-rgb),.55)}
.card.is-out{opacity:0;scale:.94;pointer-events:none;position:absolute;visibility:hidden}

.card-link{position:absolute;inset:0;z-index:4}
.card-glow{
	position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
	background:radial-gradient(closest-side at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb),.16),transparent 72%);
}
.card[data-accent="accent-2"] .card-glow{background:radial-gradient(closest-side at var(--mx,50%) var(--my,50%),rgba(var(--accent-2-rgb),.16),transparent 72%)}
.card[data-accent="accent-3"] .card-glow{background:radial-gradient(closest-side at var(--mx,50%) var(--my,50%),rgba(var(--accent-3-rgb),.16),transparent 72%)}
.card[data-accent="gold"] .card-glow{background:radial-gradient(closest-side at var(--mx,50%) var(--my,50%),rgba(var(--gold-rgb),.16),transparent 72%)}
.card.is-hover .card-glow{opacity:1}

.card-corner{
	position:absolute;right:0;top:0;width:78px;height:78px;pointer-events:none;opacity:.5;
	background:linear-gradient(225deg,rgba(var(--accent-rgb),.35),transparent 62%);
}
.card-body{position:relative;z-index:2;padding:24px}
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:rgba(var(--surface-rgb),.7)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .6s}
.card.is-hover .card-media img{transform:scale(1.07)}
.card-media-fallback{position:absolute;inset:0;display:grid;place-items:center;color:rgba(var(--accent-rgb),.5);
	background:radial-gradient(circle at 50% 40%,rgba(var(--accent-rgb),.12),transparent 65%)}
.card-shine{
	position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
	background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);
}
.card.is-hover .card-shine{opacity:1}

.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:12px}
.card-title{font-family:var(--display);font-weight:700;font-size:clamp(17px,2vw,21px);line-height:1.22;letter-spacing:-.02em;margin:0 0 10px}
.card-text{color:var(--muted);font-size:14.5px;margin:0 0 16px}
.card-text p{margin:0}
.card-more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--accent)}
.card-more svg{transition:transform .35s var(--spring)}
.card.is-hover .card-more svg{transform:translate3d(3px,-3px,0)}

.svc-icon{
	display:grid;place-items:center;width:52px;height:52px;border-radius:16px;margin-bottom:18px;
	background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.28);color:var(--accent);
	transition:transform .5s var(--spring),background .4s;
}
.card[data-accent="accent-2"] .svc-icon{background:rgba(var(--accent-2-rgb),.12);border-color:rgba(var(--accent-2-rgb),.28);color:var(--accent-2)}
.card[data-accent="accent-3"] .svc-icon{background:rgba(var(--accent-3-rgb),.12);border-color:rgba(var(--accent-3-rgb),.28);color:var(--accent-3)}
.card[data-accent="gold"] .svc-icon{background:rgba(var(--gold-rgb),.12);border-color:rgba(var(--gold-rgb),.28);color:var(--gold)}
.card.is-hover .svc-icon{transform:translateZ(30px) rotateY(-14deg) scale(1.06)}

/* -------------------------------------------------------------- downloads */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filter{
	padding:9px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--line-2);
	color:var(--muted);font-size:13.5px;cursor:pointer;transition:.3s;
}
.filter:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.4)}
.filter.is-on{background:rgba(var(--accent-rgb),.14);border-color:rgba(var(--accent-rgb),.5);color:var(--accent)}
.dl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.dl-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
	background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.25);color:var(--accent)}
.card[data-accent="accent-2"] .dl-icon{background:rgba(var(--accent-2-rgb),.12);border-color:rgba(var(--accent-2-rgb),.25);color:var(--accent-2)}
.card[data-accent="accent-3"] .dl-icon{background:rgba(var(--accent-3-rgb),.12);border-color:rgba(var(--accent-3-rgb),.25);color:var(--accent-3)}
.dl-version{font-family:var(--mono);font-size:11px;color:var(--muted);margin:0 0 16px;letter-spacing:.04em}
.dl-btn{width:100%;justify-content:center}

/* ------------------------------------------------------------ pigeon planet */
.fun-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,4vw,52px);align-items:start}
.events{display:grid;gap:12px}
.event{
	position:relative;display:flex;align-items:center;gap:18px;padding:16px 18px;border-radius:var(--r);
	background:var(--glass);border:1px solid var(--line);transform-style:preserve-3d;
	transition:border-color .35s,box-shadow .35s,background .35s;
}
.event:hover{border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.05)}
.event.is-next{
	border-color:rgba(var(--accent-rgb),.5);
	background:linear-gradient(120deg,rgba(var(--accent-rgb),.1),transparent 60%);
	box-shadow:0 0 0 1px rgba(var(--accent-rgb),.12),0 20px 44px -28px rgba(var(--accent-rgb),.8);
}
.event-date{
	flex:0 0 62px;display:grid;justify-items:center;padding:8px 0;border-radius:13px;
	background:rgba(var(--bg-rgb),.6);border:1px solid var(--line-2);
}
.event-date b{font-family:var(--display);font-weight:800;font-size:22px;line-height:1}
.event-date span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.event-body{flex:1 1 auto;min-width:0}
.event-body h3{font-family:var(--display);font-size:16.5px;margin:0 0 3px;letter-spacing:-.015em}
.event-body p{margin:0;font-size:13.5px;color:var(--muted)}
.event-status{
	flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
	padding:6px 11px;border-radius:999px;background:rgba(var(--accent-rgb),.12);color:var(--accent);
	border:1px solid rgba(var(--accent-rgb),.25);
}
.fun-note{display:flex;align-items:center;gap:9px;margin:10px 0 0;font-size:13px;color:var(--muted)}
.fun-note svg{color:var(--accent)}

.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.shot{position:relative;margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:1}
.shot--wide{grid-column:span 2;aspect-ratio:2/1}
.shot--tall{grid-row:span 2;aspect-ratio:1/2}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.shot:hover img{transform:scale(1.08)}
.shot figcaption{
	position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;font-size:12.5px;
	background:linear-gradient(to top,rgba(var(--bg-rgb),.92),transparent);
	transform:translateY(8px);opacity:0;transition:.4s var(--ease);
}
.shot:hover figcaption{transform:none;opacity:1}
.shot-sheen{
	position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
	background:radial-gradient(closest-side at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb),.25),transparent 70%);
}
.shot.is-hover .shot-sheen{opacity:1}

/* ---------------------------------------------------------------- contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(26px,4vw,48px);align-items:start}
.contact-rows{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.contact-row{
	display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);
	background:var(--glass);border:1px solid var(--line);transition:border-color .35s,background .35s;
}
.contact-row:hover{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.05)}
.contact-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;flex:0 0 auto;
	background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.24);color:var(--accent)}
.contact-meta{display:grid;min-width:0}
.contact-meta b{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.contact-meta a,.contact-meta span{font-size:15px;overflow-wrap:anywhere}
.contact-meta a:hover{color:var(--accent)}

.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.social{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:var(--r);
	background:var(--glass);border:1px solid var(--line);transition:.35s}
.social:hover{border-color:rgba(var(--accent-rgb),.45);transform:translateY(-2px)}
.social-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex:0 0 auto;
	background:rgba(var(--accent-rgb),.1);color:var(--accent)}
.social-meta{display:grid;min-width:0}
.social-meta b{font-size:13.5px;font-weight:600}
.social-meta span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}

.p3-form{padding:clamp(20px,3vw,30px)}
.field{display:grid;gap:7px;margin:0 0 16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.p3-search input,.nl-form input{
	width:100%;padding:13px 15px;border-radius:12px;
	background:rgba(var(--bg-rgb),.55);border:1px solid var(--line-2);color:var(--text);
	transition:border-color .3s,box-shadow .3s,background .3s;
}
.field input:focus,.field textarea:focus,.nl-form input:focus{
	outline:none;border-color:rgba(var(--accent-rgb),.6);background:rgba(var(--bg-rgb),.8);
	box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14);
}
.field textarea{resize:vertical;min-height:130px}
.field--submit{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.form-hint{font-size:12.5px;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{padding:12px 16px;border-radius:12px;font-size:14px;margin:0 0 16px}
.form-note--ok{background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.35);color:var(--accent)}
.form-note--bad{background:rgba(var(--accent-2-rgb),.12);border:1px solid rgba(var(--accent-2-rgb),.35);color:var(--accent-2)}

.newsletter{margin-top:18px;padding:22px;display:grid;gap:16px}
.newsletter h3{font-family:var(--display);font-size:18px;margin:0 0 6px;letter-spacing:-.02em}
.newsletter p{margin:0;color:var(--muted);font-size:14.5px}
.nl-form{display:flex;gap:10px;flex-wrap:wrap}
.nl-form input{flex:1 1 200px}

/* ----------------------------------------------------------------- footer */
.site-footer{
	position:relative;z-index:1;padding:clamp(50px,7vw,80px) 0 30px;
	border-top:1px solid var(--line);
	background:linear-gradient(to bottom,transparent,rgba(var(--surface-rgb),.6));
}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;padding-bottom:36px}
.footer-brand .brand{margin-bottom:16px}
.footer-note{max-width:44ch;color:var(--muted);font-size:14.5px;margin:0 0 18px}
.footer-social{display:flex;flex-wrap:wrap;gap:9px}
.social-dot{
	width:40px;height:40px;display:grid;place-items:center;border-radius:13px;color:var(--muted);
	background:var(--glass);border:1px solid var(--line-2);transition:.35s var(--spring);
}
.social-dot:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.5);transform:translateY(-4px) rotate(-6deg)}
.footer-cols{display:grid;gap:20px;align-content:start}
.footer-menu .menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-menu a{color:var(--muted);font-size:14.5px;transition:color .3s}
.footer-menu a:hover{color:var(--accent)}
.footer-contact{display:grid;gap:9px;font-size:14.5px;color:var(--muted)}
.footer-contact a,.footer-contact span{display:inline-flex;align-items:center;gap:9px}
.footer-contact a:hover{color:var(--accent)}
.footer-contact svg{color:var(--accent);opacity:.8}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
	padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.footer-bottom p{margin:0}
.to-top{
	width:42px;height:42px;border-radius:14px;display:grid;place-items:center;cursor:pointer;
	background:var(--glass);border:1px solid var(--line-2);color:var(--text);transition:.35s var(--spring);
}
.to-top svg{transform:rotate(180deg)}
.to-top:hover{border-color:rgba(var(--accent-rgb),.5);color:var(--accent);transform:translateY(-4px)}

/* ----------------------------------------------------------- inner pages */
.page-hero{position:relative;padding:calc(var(--header-h) + clamp(48px,7vw,86px)) 0 clamp(30px,4vw,52px);overflow:hidden}
.page-hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.75}
.page-hero-inner{position:relative;z-index:2;max-width:52rem}
.page-title{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.04;
	font-size:clamp(30px,5.4vw,60px);margin:0 0 14px}
.page-sub{color:var(--muted);font-size:clamp(15px,1.6vw,18px);margin:0;max-width:56ch}
.page-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}

.single-post{padding-bottom:clamp(50px,7vw,90px)}
.single-media{position:relative;margin:0 0 clamp(28px,4vw,46px);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.single-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,56px);align-items:start}
.single-side{display:grid;gap:16px;position:sticky;top:calc(var(--header-h) + 20px)}
.author-card{padding:20px;display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start}
.author-card img{width:64px;height:64px;border-radius:16px;object-fit:cover}
.author-card b{font-family:var(--display);font-size:16px}
.author-card p{margin:6px 0 10px;font-size:13.5px;color:var(--muted)}

.prose--article{font-size:17.5px;line-height:1.78}
.prose--article h2{font-family:var(--display);font-weight:700;letter-spacing:-.025em;font-size:clamp(22px,2.8vw,30px);margin:44px 0 14px}
.prose--article h3{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.2vw,23px);margin:34px 0 12px}
.prose--article p{margin:0 0 20px;color:rgba(var(--text-rgb),.84)}
.prose--article ul,.prose--article ol{margin:0 0 20px;padding-left:22px;color:rgba(var(--text-rgb),.84)}
.prose--article li{margin-bottom:8px}
.prose--article img{border-radius:var(--r);margin:26px 0}
.prose--article blockquote,.wp-block-quote{
	margin:30px 0;padding:20px 24px;border-radius:var(--r);border-left:2px solid var(--accent);
	background:linear-gradient(120deg,rgba(var(--accent-rgb),.08),transparent);
	font-family:var(--display);font-size:clamp(18px,2.2vw,23px);font-weight:600;line-height:1.45;
}
.prose--article blockquote p:last-child,.wp-block-quote p:last-child{margin-bottom:0}
.prose--article code,.wp-block-code{font-family:var(--mono);font-size:.92em;background:rgba(var(--bg-rgb),.7);
	border:1px solid var(--line);border-radius:8px;padding:2px 7px}
.wp-block-code{display:block;padding:18px;overflow-x:auto}
.prose--article a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose--article hr,.wp-block-separator{border:0;border-top:1px solid var(--line);margin:40px 0}
.wp-block-image figcaption,.wp-caption-text{color:var(--muted);font-size:13px;text-align:center}
.wp-block-button__link{border-radius:999px;background:var(--accent);color:#04121a;font-weight:600}
.alignwide{width:min(100%,1100px);margin-inline:auto}
.alignfull{width:100vw;margin-left:calc(50% - 50vw)}

.single-tags{margin:34px 0 0}
.single-tags a{display:inline-flex;padding:7px 14px;border-radius:999px;font-size:12.5px;font-family:var(--mono);
	background:var(--glass);border:1px solid var(--line-2);color:var(--muted);transition:.3s}
.single-tags a:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.45)}

.single-share{margin:36px 0 0;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.single-share b{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.share-links{display:flex;gap:9px}

.related{padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);margin-top:clamp(40px,5vw,64px)}
.related .s-title{margin-bottom:26px}

.comments-area{margin-top:clamp(40px,5vw,60px);padding-top:clamp(30px,4vw,44px);border-top:1px solid var(--line)}
.comment-list{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:16px}
.comment-list ol{list-style:none;padding-left:24px}
.comment-body{padding:18px 20px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line)}
.comment-author{display:flex;align-items:center;gap:10px;font-size:14px}
.comment-author img{border-radius:50%}
.comment-meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:8px}
.comment-form{display:grid;gap:14px;max-width:640px}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{
	width:100%;padding:13px 15px;border-radius:12px;background:rgba(var(--bg-rgb),.55);
	border:1px solid var(--line-2);color:var(--text)}
.comment-form .submit{
	padding:13px 24px;border-radius:999px;border:0;cursor:pointer;font-weight:600;
	background:linear-gradient(120deg,var(--accent),var(--accent-3));color:#04121a}
.comment-reply-link{color:var(--accent);font-size:13px}

.widget{padding:20px;display:grid;gap:12px}
.widget-title{font-family:var(--display);font-size:16px;margin:0;letter-spacing:-.01em}
.widget ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}
.widget a{color:var(--muted);transition:color .3s}
.widget a:hover{color:var(--accent)}

.p3-search{display:flex;gap:9px;max-width:440px}
.p3-search button{
	width:48px;flex:0 0 auto;border-radius:12px;border:1px solid var(--line-2);
	background:var(--glass);cursor:pointer;display:grid;place-items:center;transition:.3s}
.p3-search button:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}
.search-again{margin:0 0 30px}

.navigation.pagination{margin-top:44px;display:flex;justify-content:center}
.nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.page-numbers{
	min-width:42px;height:42px;padding:0 14px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
	background:var(--glass);border:1px solid var(--line-2);color:var(--muted);font-size:14px;transition:.3s}
.page-numbers:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.5)}
.page-numbers.current{background:rgba(var(--accent-rgb),.14);border-color:rgba(var(--accent-rgb),.5);color:var(--accent)}
.page-numbers .flip{transform:rotate(180deg)}

.empty{padding:clamp(30px,5vw,52px);display:grid;gap:16px;justify-items:center;text-align:center}
.empty-ico{display:grid;place-items:center;width:66px;height:66px;border-radius:22px;
	background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.25);color:var(--accent)}
.empty h2{font-family:var(--display);margin:0;font-size:22px}
.empty p{margin:0;color:var(--muted)}

.section--404{position:relative;min-height:76vh;display:grid;align-items:center;overflow:hidden}
.e404{position:relative;z-index:2;display:grid;gap:18px;justify-items:start;max-width:52ch}
.e404-num{
	font-family:var(--display);font-weight:800;font-size:clamp(84px,18vw,190px);line-height:.85;margin:0;
	background:linear-gradient(120deg,var(--accent),var(--accent-3),var(--accent-2));
	-webkit-background-clip:text;background-clip:text;color:transparent;
}

.adslot{margin:34px auto;display:grid;gap:8px;justify-items:center}
.adslot-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);opacity:.6}

/* ------------------------------------------------------------- responsive */
@media (max-width:1080px){
	.hero-inner{grid-template-columns:1fr;gap:44px}
	.hero-visual{order:-1;max-width:340px;margin-inline:auto}
	.hero{min-height:auto;padding-top:calc(var(--header-h) + 56px)}
	.about-grid,.company-grid,.fun-grid,.contact-grid,.single-grid,.footer-top{grid-template-columns:1fr}
	.single-side{position:static}
	.about-visual{max-width:460px}
}
@media (max-width:860px){
	.site-nav{display:none}
	.burger{display:grid}
	.hide-sm{display:none}
	.field-row{grid-template-columns:1fr}
	.scroll-cue{display:none}
}
@media (max-width:560px){
	body{font-size:16px}
	.card-body{padding:20px}
	.gallery{grid-template-columns:1fr}
	.shot--wide,.shot--tall{grid-column:auto;grid-row:auto;aspect-ratio:16/10}
	.event{flex-wrap:wrap}
	.event-status{order:3}
	.orb{display:none}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
	.rv,.s-title .ln>span,.hero-name .ln>span{opacity:1 !important;transform:none !important;translate:none !important}
	.grid-floor,.orb{display:none}
}
.p3-no-anim .rv,.p3-no-anim .s-title .ln>span,.p3-no-anim .hero-name .ln>span{opacity:1;transform:none;translate:none}
.p3-no-anim .orb,.p3-no-anim .grid-floor{display:none}
.p3-no-anim .seal-spin,.p3-no-anim .ticker-row,.p3-no-anim .portrait-card{animation:none}

/* ------------------------------------------------- hero 3D scene (holo) */
.hero-visual--scene,.hero-visual--video{width:100%}
.holo{
	position:relative;width:100%;aspect-ratio:1/1;max-width:560px;margin-inline:auto;
	border-radius:28px;overflow:hidden;
	background:
		radial-gradient(120% 90% at 50% 0%,rgba(var(--accent-rgb),.12),transparent 62%),
		linear-gradient(165deg,rgba(var(--text-rgb),.05),rgba(var(--surface-rgb),.72));
	border:1px solid var(--line-2);
	box-shadow:0 50px 90px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);
	transform-style:preserve-3d;
	animation:float 9s var(--ease) infinite alternate;
}
.holo-canvas{position:absolute;inset:0;width:100%;height:100%}
.holo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.holo-edge{
	position:absolute;inset:0;pointer-events:none;border-radius:28px;
	box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.22),inset 0 -70px 90px -60px rgba(var(--accent-rgb),.5);
}
.holo-scanline{
	position:absolute;left:0;right:0;height:38%;pointer-events:none;opacity:.55;
	background:linear-gradient(to bottom,transparent,rgba(var(--accent-rgb),.09),transparent);
	animation:scan 7s var(--ease) infinite;
}
@keyframes scan{0%{transform:translateY(-45%)}50%{transform:translateY(190%)}100%{transform:translateY(-45%)}}

.holo-hud{
	position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;
	padding:9px 13px;border-radius:12px;font-size:11.5px;font-weight:600;max-width:74%;
	background:rgba(var(--bg-rgb),.78);border:1px solid var(--line-2);
	backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
	box-shadow:0 16px 34px -20px rgba(0,0,0,.95);
	transform:translateZ(var(--z,0));
}
.holo-hud svg{color:var(--accent);flex:0 0 auto}
.holo-hud--tl{left:16px;top:16px;border-color:rgba(var(--accent-rgb),.32);color:var(--text)}
.holo-hud--br{right:16px;bottom:16px;border-color:rgba(var(--accent-2-rgb),.32);
	font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.holo-hud--bl{left:16px;bottom:16px;color:var(--muted);
	font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.holo-live{width:7px;height:7px;border-radius:50%;background:var(--accent-2);
	box-shadow:0 0 0 0 rgba(var(--accent-2-rgb),.6);animation:pulse 2.2s infinite}

@media (max-width:1080px){
	.holo{max-width:440px}
	.hero-visual--scene,.hero-visual--video{order:-1}
}
@media (max-width:560px){
	.holo{max-width:none;aspect-ratio:4/3;border-radius:22px}
	.holo-hud--tl{max-width:60%}
}
.p3-no-anim .holo,.p3-no-anim .holo-scanline{animation:none}

/* -------------------------------------------- social icons, brand colours */
.social-dot[data-net]{color:var(--net,var(--muted));background:rgba(var(--net-rgb,141,154,178),.09);border-color:rgba(var(--net-rgb,141,154,178),.25)}
.social-dot[data-net]:hover{
	color:var(--net,var(--accent));
	background:rgba(var(--net-rgb,63,224,218),.16);
	border-color:rgba(var(--net-rgb,63,224,218),.55);
	box-shadow:0 12px 26px -14px rgba(var(--net-rgb,63,224,218),.9);
}
.social-dot[data-net="facebook"]{--net:#1877F2;--net-rgb:24,119,242}
.social-dot[data-net="instagram"]{--net:#E1306C;--net-rgb:225,48,108}
.social-dot[data-net="linkedin"]{--net:#0A66C2;--net-rgb:10,102,194}
.social-dot[data-net="youtube"]{--net:#FF3D34;--net-rgb:255,61,52}
.social-dot[data-net="twitter"]{--net:#E7EDF7;--net-rgb:231,237,247}
.social-dot[data-net="tiktok"]{--net:#25F4EE;--net-rgb:37,244,238}
.social-dot[data-net="whatsapp"]{--net:#25D366;--net-rgb:37,211,102}
.social-dot[data-net="github"]{--net:#E7EDF7;--net-rgb:231,237,247}
.social-dot.is-empty{opacity:.32;cursor:help;filter:grayscale(.5)}
.social-dot.is-empty:hover{opacity:.6;transform:none;box-shadow:none}

/* the same colours in the contact list and the mobile drawer */
.social[data-net] .social-ico,.drawer-social a[data-net]{color:var(--net,var(--accent))}
.social[data-net]:hover{border-color:rgba(var(--net-rgb,63,224,218),.5)}


/* ------------------------------------------------------- the turning cube */
.cube-stage{
	position:relative;width:180px;height:180px;margin:14px auto 54px;
	perspective:900px;transform-style:preserve-3d;
}
.cube{
	position:absolute;inset:0;transform-style:preserve-3d;
	animation:cubeSpin 18s linear infinite;
}
.cube-stage:hover .cube{animation-duration:6s}
@keyframes cubeSpin{
	0%{transform:rotateX(-22deg) rotateY(0deg)}
	100%{transform:rotateX(-22deg) rotateY(360deg)}
}
.cube-face{
	position:absolute;inset:0;display:grid;place-items:center;gap:8px;align-content:center;
	border-radius:18px;padding:14px;text-align:center;
	background:
		linear-gradient(150deg,rgba(var(--accent-rgb),.16),transparent 55%),
		linear-gradient(#0C1524,#070C17);
	border:1px solid rgba(var(--accent-rgb),.45);
	box-shadow:inset 0 0 30px rgba(var(--accent-rgb),.16),0 20px 40px -26px rgba(0,0,0,.9);
	backface-visibility:hidden;
}
.cube-face img{width:62%;height:62%;object-fit:contain}
.cube-ico{color:var(--accent);display:grid;place-items:center}
.cube-label{
	font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--text);line-height:1.4;
}
.cube-face--front{transform:translateZ(90px)}
.cube-face--back{transform:rotateY(180deg) translateZ(90px)}
.cube-face--right{transform:rotateY(90deg) translateZ(90px);border-color:rgba(var(--accent-2-rgb),.4)}
.cube-face--right .cube-ico{color:var(--accent-2)}
.cube-face--left{transform:rotateY(-90deg) translateZ(90px);border-color:rgba(var(--accent-3-rgb),.4)}
.cube-face--left .cube-ico{color:var(--accent-3)}
.cube-face--top{transform:rotateX(90deg) translateZ(90px);border-color:rgba(var(--gold-rgb),.4)}
.cube-face--top .cube-ico{color:var(--gold)}
.cube-face--bottom{transform:rotateX(-90deg) translateZ(90px)}
.cube-shadow{
	position:absolute;left:-6%;right:-6%;bottom:-34px;height:30px;border-radius:50%;
	background:radial-gradient(ellipse,rgba(0,0,0,.8),transparent 70%);filter:blur(12px);
}
@media (max-width:560px){.cube-stage{width:140px;height:140px}
	.cube-face--front,.cube-face--back,.cube-face--right,.cube-face--left,.cube-face--top,.cube-face--bottom{--t:70px}
	.cube-face--front{transform:translateZ(70px)}
	.cube-face--back{transform:rotateY(180deg) translateZ(70px)}
	.cube-face--right{transform:rotateY(90deg) translateZ(70px)}
	.cube-face--left{transform:rotateY(-90deg) translateZ(70px)}
	.cube-face--top{transform:rotateX(90deg) translateZ(70px)}
	.cube-face--bottom{transform:rotateX(-90deg) translateZ(70px)}
}
.p3-no-anim .cube,.p3-no-anim .seal-spin,.p3-no-anim .seal-orbit{animation:none}

/* ------------------------------------------------------ YouTube button */
.btn--yt{
	background:linear-gradient(120deg,#FF3D34,#FF7B6E);color:#fff;
	box-shadow:0 10px 30px -12px rgba(255,61,52,.8);
}
.btn--yt:hover{box-shadow:0 18px 44px -14px rgba(255,61,52,.95)}
.btn--yt svg:first-child{color:#fff}

/* ---------------------------------------------------- YouTube channel card */
.yt-card{
	display:inline-flex;align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:18px;
	background:linear-gradient(120deg,rgba(255,0,0,.12),rgba(var(--surface-rgb),.6));
	border:1px solid rgba(255,61,52,.35);
	transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
	transform-style:preserve-3d;
}
.yt-card:hover{
	border-color:rgba(255,61,52,.7);
	background:linear-gradient(120deg,rgba(255,0,0,.2),rgba(var(--surface-rgb),.6));
	box-shadow:0 22px 46px -26px rgba(255,0,0,.95);
}
.yt-badge{display:grid;place-items:center;flex:0 0 auto;filter:drop-shadow(0 8px 18px rgba(255,0,0,.55))}
.yt-badge-svg{display:block;transition:transform .4s var(--spring)}
.yt-card:hover .yt-badge-svg{transform:scale(1.08)}
.yt-meta{display:grid;line-height:1.35;min-width:0}
.yt-meta b{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.yt-meta span{font-size:12.5px;color:var(--muted)}
.yt-arrow{color:var(--muted);flex:0 0 auto;transition:transform .35s var(--spring),color .3s}
.yt-card:hover .yt-arrow{color:#FF3D34;transform:translate3d(3px,-3px,0)}
@media (max-width:560px){.yt-card{width:100%}}

/* -------------------------------------------------- empty-state (editors) */
.empty h3{font-family:var(--display);margin:0;font-size:20px;color:var(--text)}
.empty-note{font-size:12.5px;color:var(--muted);opacity:.8;max-width:44ch}

/* --------------------------------------- sections the owner adds themselves */
.block .prose p:first-child{font-size:1em;color:rgba(var(--text-rgb),.8)}
.block[data-accent="accent-2"]{--accent-rgb:var(--accent-2-rgb)}
.block[data-accent="accent-3"]{--accent-rgb:var(--accent-3-rgb)}
.block[data-accent="gold"]{--accent-rgb:var(--gold-rgb)}

.block-card{position:relative;overflow:hidden;padding:clamp(24px,4vw,40px);max-width:940px;margin-inline:auto}
.block-card .card-glow{opacity:0}
.block-card.is-hover .card-glow{opacity:1}
.block-card-body{position:relative;z-index:2}
.block-figure{margin:0 0 22px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.block-figure img{width:100%;display:block}
.block-card .btn{margin-top:20px}

.block-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
.block-split--flip .block-copy{order:2}
.block-split--flip .block-media{order:1}
.block-media{perspective:1100px}

.block-banner{
	position:relative;overflow:hidden;border-radius:var(--r-lg);
	padding:clamp(28px,5vw,52px);text-align:center;
	background:
		radial-gradient(120% 120% at 50% 0%,rgba(var(--accent-rgb),.16),transparent 62%),
		linear-gradient(160deg,rgba(var(--text-rgb),.05),rgba(var(--surface-rgb),.7));
	border:1px solid rgba(var(--accent-rgb),.32);
	box-shadow:0 34px 70px -46px rgba(var(--accent-rgb),.7);
}
.block-banner .eyebrow{justify-content:center}
.block-banner .s-title{margin-inline:auto;max-width:22ch}
.block-banner .prose{max-width:60ch;margin:0 auto 24px}
.block-banner-body{position:relative;z-index:2}

@media (max-width:1080px){
	.block-split{grid-template-columns:1fr}
	.block-split--flip .block-copy,.block-split--flip .block-media{order:initial}
}

/* a service card with a picture: the icon overlaps the image edge */
.card--service.has-media .card-media{aspect-ratio:16/10}
.card--service.has-media .svc-icon{margin-top:-48px;position:relative;z-index:3;
	background:rgba(var(--bg-rgb),.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card--service.has-media .card-body{padding-top:18px}

/* ------------------------------------------------------- values & why us */
.values-grid{margin-bottom:clamp(28px,4vw,48px)}
.value{
	position:relative;overflow:hidden;border-radius:var(--r-lg);padding:24px;
	background:linear-gradient(160deg,rgba(var(--text-rgb),.05),rgba(var(--surface-rgb),.5));
	border:1px solid var(--line);transform-style:preserve-3d;
	transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.value[data-accent="accent-2"]{--accent-rgb:var(--accent-2-rgb)}
.value[data-accent="accent-3"]{--accent-rgb:var(--accent-3-rgb)}
.value.is-hover{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 26px 54px -34px rgba(var(--accent-rgb),.6)}
.value .card-glow{opacity:0}
.value.is-hover .card-glow{opacity:1}
.value-body{position:relative;z-index:2}
.value-num{
	position:absolute;right:0;top:-6px;font-family:var(--display);font-weight:800;font-size:38px;
	color:rgba(var(--accent-rgb),.16);letter-spacing:-.04em;
}
.value-icon{
	display:grid;place-items:center;width:44px;height:44px;border-radius:14px;margin-bottom:14px;
	background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.28);color:var(--accent);
}
.value[data-accent="accent-2"] .value-icon{color:var(--accent-2)}
.value[data-accent="accent-3"] .value-icon{color:var(--accent-3)}
.value h3{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.015em;margin:0 0 8px}
.value p{margin:0;color:var(--muted);font-size:14.5px}

.why-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,48px);align-items:center}
.why-title{font-family:var(--display);font-size:clamp(19px,2.4vw,24px);letter-spacing:-.02em;margin:0 0 16px}
.why-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.why-list li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:rgba(var(--text-rgb),.84)}
.why-tick{
	flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;margin-top:1px;
	background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.3);color:var(--accent);
}
.pull--wide{margin:0}
@media (max-width:1080px){.why-grid{grid-template-columns:1fr}}
.company-group{font-size:13.5px;color:var(--muted);margin:4px 0 0}

/* ------------------------------------------------------- WhatsApp QR card */
.qr-card{
	margin:0 0 22px;padding:18px;border-radius:var(--r-lg);
	background:linear-gradient(160deg,rgba(37,211,102,.10),rgba(var(--surface-rgb),.6));
	border:1px solid rgba(37,211,102,.32);
	transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.qr-card.is-hover{border-color:rgba(37,211,102,.6);box-shadow:0 26px 54px -32px rgba(37,211,102,.7)}
.qr-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.qr-ico{
	display:grid;place-items:center;width:40px;height:40px;border-radius:13px;flex:0 0 auto;
	background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.3);color:#25D366;
}
.qr-meta{display:grid;line-height:1.35;min-width:0}
.qr-meta b{font-family:var(--display);font-size:15.5px;font-weight:700;color:var(--text)}
.qr-meta span{font-size:12.5px;color:var(--muted)}
.qr-image{
	display:block;background:#fff;border-radius:16px;padding:14px;max-width:230px;margin:0 auto;
	transition:transform .4s var(--spring);
}
.qr-card.is-hover .qr-image{transform:translateZ(24px)}
.qr-image img{width:100%;height:auto;display:block;border-radius:6px}
.qr-note{margin:14px 0 0;font-size:12.5px;color:var(--muted);text-align:center}

/* --------------------------------------------- portrait beside the name */
.hero-id{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.hero-avatar{
	position:relative;flex:0 0 auto;width:76px;height:76px;border-radius:50%;
	display:grid;place-items:center;transform-style:preserve-3d;
}
.hero-avatar img{
	width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:50% 22%;
	border:2px solid rgba(var(--accent-rgb),.5);
	box-shadow:0 14px 34px -16px rgba(0,0,0,.95),0 0 0 6px rgba(var(--accent-rgb),.08);
	position:relative;z-index:2;
}
.hero-avatar-ring{
	position:absolute;inset:-9px;border-radius:50%;z-index:1;
	background:conic-gradient(from 0deg,var(--accent),var(--accent-3),var(--accent-2),var(--accent));
	opacity:.5;filter:blur(7px);animation:ring 9s linear infinite;
}
.hero-avatar.is-hover img{border-color:rgba(var(--accent-rgb),.9)}
.hero-id-text{display:grid;gap:4px;min-width:0}
.hero-id-text .eyebrow{margin:0}
.hero-id-role{
	font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--muted);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:560px){
	.hero-avatar,.hero-avatar img{width:62px;height:62px}
	.hero-id{gap:13px}
}

/* the 3D scene when it sits in the About block */
.holo--about{max-width:none;aspect-ratio:1/1;animation:none}
@media (max-width:1080px){.holo--about{max-width:460px}}

/* tournaments with no photo grid yet: give the list the full width */
.fun-grid--single{grid-template-columns:1fr;max-width:760px}
.fun-grid--single .event-body h3{font-size:17.5px}

/* ============================================================
   PHONES — the layout is one column, so every block gets sized
   for a narrow screen rather than shrunk down from the desktop one.
   ============================================================ */
@media (max-width:860px){
	.hero{padding-top:calc(var(--header-h) + 30px);padding-bottom:58px}
	.hero-inner{gap:30px}

	/* On a phone the photo is presented deliberately — as a portrait, a banner
	   or a card — rather than a tall picture squeezed into a narrow column. */
	.hero-visual--photo .portrait-stage{margin-inline:auto}
	.portrait-card{animation:none}

	/* Round portrait: a profile picture with a lit ring around it. */
	.hero-photo-circle .portrait-stage{width:min(50vw,180px)}
	.hero-photo-circle .flip{aspect-ratio:1/1}
	.hero-photo-circle .flip-face{
		border-radius:50%;
		border:2px solid rgba(var(--accent-rgb),.45);
		box-shadow:0 24px 50px -22px rgba(0,0,0,.95);
	}
	.hero-photo-circle .flip-face img{object-position:50% 14%}
	.hero-photo-circle .portrait-frame{
		inset:-10px;border-radius:50%;border:0;
		background:conic-gradient(from 0deg,var(--accent),var(--accent-3),var(--accent-2),var(--accent));
		opacity:.55;filter:blur(9px);animation:ring 10s linear infinite;
	}
	.hero-photo-circle .portrait-glow{inset:-26%}
	.hero-photo-circle .portrait-shadow{left:16%;right:16%;bottom:-14px;height:20px}

	/* Wide banner: the frame runs the width of the screen and fades out. */
	.hero-photo-banner .portrait-stage{width:100%;max-width:none}
	.hero-photo-banner .flip{aspect-ratio:16/11}
	.hero-photo-banner .flip-face{
		border-radius:22px;border:0;
		-webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent);
		mask-image:linear-gradient(to bottom,#000 58%,transparent);
	}
	.hero-photo-banner .portrait-frame,.hero-photo-banner .portrait-shadow{display:none}
	.hero-photo-banner .portrait-glow{inset:-14%}

	/* Rounded card: a compact square. */
	.hero-photo-card .portrait-stage{width:min(56vw,210px)}
	.hero-photo-card .flip{aspect-ratio:1/1}
	.hero-photo-card .flip-face{border-radius:26px}
	.hero-photo-card .portrait-frame{inset:-8px;border-radius:32px}
	.hero-photo-card .portrait-shadow{bottom:-18px;height:26px}

	.hero-name{font-size:clamp(46px,15vw,74px)}
	.hero-roles{font-size:17px;gap:8px}
	.hero-intro{font-size:15.5px;margin-bottom:24px}
	.hero-cta{gap:10px;margin-bottom:28px}
	.hero-cta .btn{flex:1 1 auto;justify-content:center}
	.hero-stats{gap:9px}
	.hero-stats .stat{flex:1 1 calc(50% - 5px);padding:13px 15px}

	.s-head{gap:14px;margin-bottom:26px}
	.s-head-side{max-width:none;width:100%}
	.section{padding:56px 0}

	.company-seal{gap:20px}
	.seal{--size:min(64vw,215px);--thick:20px}
	.mv-grid{gap:12px}
	.value{padding:20px}
	.value-num{font-size:30px}

	.event{gap:13px;padding:14px}
	.event-date{flex-basis:52px}
	.event-status{order:3;width:100%;text-align:center}

	.qr-image{max-width:190px}
	.newsletter{padding:18px}
	.nl-form{gap:8px}
	.nl-form input{flex:1 1 100%}
	.nl-form .btn{width:100%;justify-content:center}

	.footer-top{gap:28px;padding-bottom:28px}
	.footer-social{gap:8px}
	.footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}

	.single-share{flex-direction:column;align-items:flex-start}
	.author-card{grid-template-columns:56px 1fr}
	.author-card img{width:56px;height:56px}
	.page-hero{padding-top:calc(var(--header-h) + 44px)}
}

@media (max-width:480px){
	.wrap{padding-inline:18px}
	.hero-name{font-size:clamp(42px,14.5vw,62px)}
	.hero-cta .btn{width:100%}
	.hero-stats .stat{flex:1 1 100%}
	.btn{padding:13px 20px}
	.card-body{padding:18px}
	.block-card{padding:20px}
	.contact-row{padding:12px 13px;gap:11px}
	.social{padding:11px 12px}
	.filters{gap:6px}
	.filter{padding:8px 13px;font-size:13px}
	.ticker{padding:12px 0}
	.ticker-item{font-size:15px}
}

/* On a phone the coin sways instead of turning all the way round, so it is
   never caught edge-on — which reads as a glitch on a small screen. */
@media (max-width:860px){
	.seal-spin{animation:coinSway 8s ease-in-out infinite alternate}
	.seal:hover .seal-spin{animation-duration:8s}
	@keyframes coinSway{
		from{transform:rotateX(-10deg) rotateY(-38deg)}
		to{transform:rotateX(-10deg) rotateY(38deg)}
	}
	.cube{animation-duration:26s}
}

/* ============================================================
   LIVE STUDIO BACKGROUND
   Colour drifting behind the page, the way a lit room sits behind
   someone on a live stream — rather than a flat black sheet.
   ============================================================ */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient-glow{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.ambient-glow--1{
	width:70vw;height:70vw;left:-18vw;top:-22vw;
	background:radial-gradient(circle,rgba(var(--accent-rgb),.42),transparent 66%);
	animation:amb1 26s var(--ease) infinite alternate;
}
.ambient-glow--2{
	width:58vw;height:58vw;right:-14vw;top:22vh;
	background:radial-gradient(circle,rgba(var(--accent-2-rgb),.32),transparent 66%);
	animation:amb2 32s var(--ease) infinite alternate;
}
.ambient-glow--3{
	width:64vw;height:64vw;left:22vw;bottom:-26vw;
	background:radial-gradient(circle,rgba(var(--accent-3-rgb),.30),transparent 68%);
	animation:amb3 38s var(--ease) infinite alternate;
}
@keyframes amb1{to{transform:translate3d(12vw,10vh,0) scale(1.18)}}
@keyframes amb2{to{transform:translate3d(-10vw,-12vh,0) scale(1.12)}}
@keyframes amb3{to{transform:translate3d(-14vw,-8vh,0) scale(1.2)}}

/* a slow bar of light crossing the room */
.ambient-beam{
	position:absolute;top:-30%;left:-40%;width:60%;height:180%;
	background:linear-gradient(100deg,transparent,rgba(var(--accent-rgb),.10),transparent);
	transform:rotate(14deg);animation:beam 22s linear infinite;
}
@keyframes beam{0%{left:-60%}100%{left:130%}}

/* the faintest texture, so the large flat areas are not dead */
.ambient-haze{
	position:absolute;inset:0;opacity:.5;
	background:
		radial-gradient(80% 55% at 50% 0%,rgba(var(--accent-rgb),.10),transparent 70%),
		radial-gradient(70% 50% at 100% 100%,rgba(var(--accent-2-rgb),.08),transparent 70%),
		linear-gradient(180deg,transparent 40%,rgba(var(--bg-rgb),.6));
}

/* the page sits on the coloured ground, not on black */
body{background:
	radial-gradient(120% 90% at 50% -10%,rgba(var(--accent-rgb),.10),transparent 60%),
	var(--bg);
}
.section--tint{
	background:
		radial-gradient(90% 60% at 12% 0%,rgba(var(--accent-rgb),.08),transparent 62%),
		radial-gradient(70% 60% at 95% 100%,rgba(var(--accent-2-rgb),.06),transparent 62%),
		rgba(var(--surface-rgb),.5);
}
.grid-floor{opacity:.7}

/* the two calmer options */
.p3-bg-deep .ambient-beam,.p3-bg-deep .ambient-glow--3{display:none}
.p3-bg-deep .ambient-glow{filter:blur(110px);opacity:.6}
.p3-bg-flat .ambient,.p3-bg-flat .grid-floor{display:none}
.p3-bg-flat body{background:var(--bg)}

@media (prefers-reduced-motion:reduce){
	.ambient-glow,.ambient-beam{animation:none}
}
@media (max-width:560px){
	.ambient-glow{filter:blur(70px)}
	.ambient-glow--1{width:110vw;height:110vw}
	.ambient-glow--2{width:100vw;height:100vw}
	.ambient-glow--3{display:none}
	.ambient-beam{display:none}
}

/* ------------------------------------------------------------ achievements */
.card--award .award-media{aspect-ratio:4/3;position:relative}
.card--award .award-media img{width:100%;height:100%;object-fit:cover}
.award-year{
	position:absolute;right:12px;top:12px;z-index:3;
	padding:6px 11px;border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
	background:rgba(var(--bg-rgb),.82);border:1px solid rgba(var(--accent-rgb),.4);color:var(--accent);
	backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.award-badge{
	display:grid;place-items:center;width:38px;height:38px;border-radius:12px;margin-bottom:12px;
	background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.3);color:var(--accent);
}
.card--award[data-accent="accent-2"] .award-badge,.card--award[data-accent="accent-2"] .award-year{color:var(--accent-2);border-color:rgba(var(--accent-2-rgb),.4)}
.card--award[data-accent="accent-3"] .award-badge,.card--award[data-accent="accent-3"] .award-year{color:var(--accent-3);border-color:rgba(var(--accent-3-rgb),.4)}
.award-org{margin:0 0 10px;font-size:13.5px;color:var(--muted)}
.card--award .card-text{font-size:14px}

/* --------------------------------------------- the flipping hero photo */
/* The frame owns the shape. Both faces fill it exactly, so a photo can never
   size the frame to its own proportions. */
.portrait-stage.is-flipping{perspective:1400px}
.flip{
	position:relative;width:100%;aspect-ratio:3/4;
	transform-style:preserve-3d;
	transition:transform 1.1s cubic-bezier(.62,.03,.28,1);
	will-change:transform;
}
.flip-face{
	position:absolute;inset:0;border-radius:26px;overflow:hidden;
	backface-visibility:hidden;-webkit-backface-visibility:hidden;
	box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}
.flip-face--b{transform:rotateY(180deg)}
.flip-face img,
.flip-face .portrait-img{
	width:100%;height:100%;display:block;border-radius:inherit;
	object-fit:cover;object-position:50% 16%;max-height:none;
	filter:saturate(1.04) contrast(1.03);
}
.flip-caption{
	position:absolute;left:12px;right:12px;bottom:12px;z-index:4;
	padding:9px 13px;border-radius:12px;font-size:12px;font-weight:600;line-height:1.35;
	background:rgba(var(--bg-rgb),.82);border:1px solid rgba(var(--accent-rgb),.32);
	backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
	opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.flip-caption.is-on{opacity:1;transform:none}
.p3-no-anim .flip{transition:none}
@media (prefers-reduced-motion:reduce){.flip{transition:none}}

/* A photo that must be seen whole sits on a blurred copy of itself, so the
   frame stays full while nobody in the picture is cut off. */
.flip-face.is-contain::before{
	content:'';position:absolute;inset:0;border-radius:inherit;
	background-image:var(--shot);background-size:cover;background-position:50% 35%;
	filter:blur(22px) saturate(.85) brightness(.5);
	transform:scale(1.18);
}
.flip-face.is-contain img{
	position:relative;z-index:2;object-fit:contain;object-position:50% 50%;
	filter:none;
}
.flip-face.is-contain::after{
	content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;
	background:radial-gradient(circle at 50% 40%,transparent 40%,rgba(var(--bg-rgb),.35));
}

/* A circle is the right frame for one portrait. The moment several photos are
   flipping — group shots among them — a phone gets a rounded frame instead,
   because a circle cuts the people standing at the left and right edges. */
@media (max-width:860px){
	.hero-photo-circle.has-many .portrait-stage{width:min(66vw,240px)}
	.hero-photo-circle.has-many .flip{aspect-ratio:1/1}
	.hero-photo-circle.has-many .flip-face{border-radius:26px;border-width:1px}
	.hero-photo-circle.has-many .portrait-frame{
		inset:-8px;border-radius:32px;
		background:conic-gradient(from 0deg,var(--accent),var(--accent-3),var(--accent-2),var(--accent));
		opacity:.45;filter:blur(10px);
	}
	.hero-photo-circle.has-many .portrait-shadow{left:10%;right:10%;bottom:-16px}
}