:root {
	--bg: #ffffff;
	--card: #ffffff;
	--accent: #ffffff;
}

/* Connect-final block uses contact.svg as background with overlay */
#connect-final{
	background-image: url('../assets/contact.svg');
	background-size: cover;
	background-position: center right;
	position:relative;
}
#connect-final::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.6));z-index:0}
#connect-final .connect-inner{position:relative;z-index:1}

/* Keep Contact Now / Career links as simple links in connect-final */
#connect-final .cta{
	color:#ffffff !important;
	background: transparent !important;
	padding: 0 !important;
	min-width: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: underline; /* as before */
	transition: none !important;
}
#connect-final .cta:hover,
#connect-final .cta:focus{
	text-decoration: underline;
	transform: none !important;
	box-shadow: none !important;
}

/* Contact hero with SVG background */
.contact-hero{
	background-image: url('../assets/contact.svg');
	background-size: cover;
	background-position: center right;
	padding:6rem 0;
	position:relative;
}
.contact-hero__overlay{position:relative;background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.6));padding:4rem 0}
.contact-hero__inner{max-width:1400px;margin:0 auto;padding:0 6rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.contact-left h3{font-size:3.5rem;margin:0;color:#fff;line-height:0.95}
.contact-right p{color:#fff;max-width:560px;line-height:1.8}

@media(max-width:900px){
	.contact-hero__inner{grid-template-columns:1fr;padding:0 2rem}
	.contact-left h3{font-size:2.25rem}
}


* {
	box-sizing: border-box;
}

body {
	font-family: Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	margin: 0;
	background: var(--bg);
	color: #0f172a;
}

/* Hide native scrollbars (use custom indicator) */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
body::-webkit-scrollbar { width: 0; height: 0; }

/* Global CTA button style (used by hero, modal, and connect sections) */
.cta{
	display:inline-block;
	background:#ffd300;
	color:#0b1220;
	padding:1.1rem 2rem;
	border-radius:999px;
	border:0;
	font-weight:800;
	font-size:1.125rem;
	min-width:180px;
	text-align:center;
	box-shadow:0 10px 30px rgba(37, 99, 235, 0.12), 0 4px 10px rgba(0,0,0,0.08);
	transition:transform 0.18s ease, box-shadow 0.18s ease;
	cursor:pointer;
	text-decoration:none;
}
.cta:hover,
.cta:focus{
	transform:translateY(-4px);
	box-shadow:0 16px 40px rgba(37, 99, 235, 0.15), 0 6px 18px rgba(0,0,0,0.12);
	text-decoration:none;
}

/* ===== Animations ===== */
@keyframes fadeInUp{
	from{opacity:0; transform: translateY(18px)}
	to{opacity:1; transform: translateY(0)}
}
@keyframes fadeIn{
	from{opacity:0}
	to{opacity:1}
}
@keyframes fadeOut{
	from{opacity:1}
	to{opacity:0}
}
@keyframes fadeOutDown{
	from{opacity:1; transform: translateY(0)}
	to{opacity:0; transform: translateY(18px)}
}
/* Subtle up/down float for scroll arrow */
@keyframes arrowFloat{
	0%{ transform: translateY(0); }
	50%{ transform: translateY(6px); }
	100%{ transform: translateY(0); }
}

/* On-load hero animations */
.animate-init .hero__content{animation: fadeInUp 800ms cubic-bezier(.2,.8,.2,1) 180ms both}
.animate-init .hero__actions .cta{animation: fadeInUp 900ms cubic-bezier(.2,.8,.2,1) 340ms both}

/* Generic scroll reveal for text/content */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; transition-delay: .12s}
.reveal-visible{opacity:1; transform: none}

@media (prefers-reduced-motion: reduce){
	*{animation: none !important; transition: none !important}
}

/* ===== Minimal yellow scroll stick ===== */
#scroll-stick{position:fixed;right:10px;top:96px;bottom:24px;width:4px;pointer-events:auto;z-index:90;opacity:.85;transition:opacity .2s ease;user-select:none;touch-action:none}
#scroll-stick .stick-thumb{position:absolute;left:0;top:0;width:4px;height:60px;background:#ffd300;border-radius:2px;transform:translateY(0);transition:transform .12s linear,height .2s ease;cursor:grab}
#scroll-stick.dragging .stick-thumb{cursor:grabbing}
@media (max-width:700px){#scroll-stick{right:8px;top:80px;bottom:16px}}

/* layout containers */
.container {
	max-width: 720px;
	margin: 6vh auto;
	padding: 2rem;
	background: var(--card);
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
}

.container-card {
	max-width: 900px;
	margin: 2rem auto;
	padding: 2rem;
	background: var(--card);
	border-radius: 10px;
}

/* About section */
/* (about section removed) */

/* Large about layout (split image / yellow panel) */
.about-large{
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 0;
}
.about-large__image img{width:100%;height:100%;object-fit:cover;display:block}
.about-large__panel{background:#ffd300;color:#071025;padding:4rem 6rem;display:flex;flex-direction:column;justify-content:center}
.about-large__panel h2{font-size:3.25rem;margin:0 0 1rem;font-weight:800}
.about-large__panel p{max-width:560px;line-height:1.6}

@media(max-width:900px){
	.about-large{grid-template-columns:1fr;}
	.about-large__panel{padding:2rem}
}

/* connect white block */
.connect-white{
	background:#ffffff; /* keep overall page background white */
	padding:4rem 0;
}
.connect-white .connect-inner{
	/* allow the inner area to flow but keep the same horizontal inset as the about panel */
	max-width:1600px;
	margin:0 auto;
	padding:0 6rem; /* align with .about-large__panel padding */
	background:transparent;
	border-radius:0;
	box-shadow:none;
}

/* connect text grid */
.connect-grid{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:2rem; /* bring columns closer for vertical alignment with About panel */
	align-items:start;
	width:100%;
}
.connect-left{justify-self:start}
.connect-right{justify-self:end;max-width:680px;padding-right: 60px;}
.connect-left h3{font-size:3.25rem;margin:0;color:#071025;line-height:0.95;font-weight:800}
.connect-right p{color:#071025;line-height:1.8;max-width:560px}

.connect-left-contact h3{font-size:3.25rem;margin:0;color:#ffffff;line-height:0.95;font-weight:800}
.connect-right-contact p{color:#ffffff;line-height:1.8;max-width:560px}

@media(max-width:900px){
	.connect-grid{grid-template-columns:1fr}
	.connect-left{margin-bottom:1rem}
	.connect-left h3{font-size:2.25rem}
}

/* hero */
.hero {
	min-height: 72vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-image: url('../assets/background.svg');
	background-size: cover;
	background-position: center center;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.55));
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__content {
	color: #fff;
	text-align: center;
	padding: 6vw 8vw; /* wider horizontal padding so text can spread */
	width: 100%;
	max-width: none; /* allow content to use full width */
}

.hero__content h1 {
	font-size: clamp(2rem, 5.25vw, 4.25rem);
	line-height: 1.03;
	margin: 0 0 0.6rem;
	font-weight: 600; /* slightly less bold */
}

.hero__content .lead {
	font-size: 2rem;
	opacity: 0.95;
	margin: 0 0 1.25rem; /* increased gap below lead */
    padding: 30px;
}

.hero__actions {
	margin-top: 1rem; /* gap between text and actions */
}

.hero__actions .cta {
	display: inline-block;
	background: #ffd300;
	color: #0b1220;
	padding: 1.1rem 2rem; /* larger tappable area */
	border-radius: 999px;
	border: 0;
	font-weight: 800;
	font-size: 1.125rem;
	min-width: 180px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(37, 99, 235, 0.12), 0 4px 10px rgba(0,0,0,0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	cursor: pointer;
	text-decoration: none; /* ensure no underline */
}

.hero__actions .cta:hover,
.hero__actions .cta:focus {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(37, 99, 235, 0.15), 0 6px 18px rgba(0,0,0,0.12);
}

@media (max-width: 700px) {
	.hero__actions .cta {
		padding: 0.9rem 1.6rem;
		font-size: 1rem;
		min-width: 140px;
	}
}

/* header */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	height: 80px; /* increased height */
	background: rgba(0, 0, 0, 0.85);
	z-index: 60;
	display: flex;
	align-items: center;
}

.site-header__inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2.5rem; /* increased horizontal padding */
	width: 100%;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: #fff;
	font-weight: 700;
	font-size: 1.25rem; /* larger branding */
	letter-spacing: 0.6px;
	text-decoration: none;
}

.brand__logo {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
}

.brand__text { color: #fff; }

.site-header__inner a.brand:focus { outline: 3px solid rgba(255, 211, 0, 0.3); border-radius: 8px; }

.brand--accent {
	color: #ffd300;
}

.site-nav{
	display:flex;
	align-items:center;
	gap:3.75rem; /* spacing between nav links */
}

.site-nav a {
	color: #e6eef8;
	text-decoration: none;
	font-size: 1rem; /* slightly larger nav */
}

@media (max-width: 700px) {
	.site-header { height: 64px; }
	.brand { font-size: 1rem; }
	.site-nav { gap: 1rem; }
	.site-nav a { font-size: 0.95rem; }
}

.site-nav a:hover {
	text-decoration: underline;
}

/* scroll indicator */
.scroll-indicator {
	position: absolute;
	right: 48px;
	bottom: 32px;
	border: 2px solid rgba(255, 211, 0, 0.95);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: transparent;
	color: #ffd300;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.scroll-indicator .scroll-text {
	display: none;
	font-size: 0.8rem;
	color: #fff;
	margin-top: 6px;
}

.scroll-indicator .arrow {
	font-size: 1.6rem;
	line-height: 1;
	display: inline-block; /* allow transform */
	animation: arrowFloat 1.8s ease-in-out infinite;
	will-change: transform;
}

button {
	background: var(--accent);
	color: white;
	border: 0;
	padding: 0.6rem 1rem;
	border-radius: 8px;
	cursor: pointer;
}

#counter {
	margin-top: 1rem;
	font-weight: 600;
}

@media (prefers-color-scheme: dark) {
	/* Keep page background white regardless of user color scheme */
	:root {
		--bg: #ffffff;
		--card: #ffffff;
		--accent: #2563eb;
	}

	body {
		color: #0f172a;
	}
}

@media (min-width: 1100px) {
	.hero {
		min-height: 100vh;
	}

	.hero__content h1 {
		font-size: 7.25rem; /* larger on wide screens so it spans more horizontally */
		max-width: 1400px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Why section removed */

/* Emphasize #why lead text */
#why .connect-right p{
	font-size:1.5rem;
	line-height:1.6;
	color:#071025;
	margin:0;
	max-width:720px;
}

@media(max-width:900px){
	#why .connect-right p{font-size:1.125rem}
}

/* Why details (content left, svg right) */
.why-details{padding:0rem 0;background:#fff}
.why-details-inner{max-width:1500px;margin: 0 20px;padding:0 8rem}
.why-details-grid{display:grid;grid-template-columns:50% 50%;gap:10rem;align-items:center}
.why-details-image img{width:100%;height:auto;display:block;border-radius:10px}
.why-details-content h3{font-size:1.9rem;margin:0 0 1.5rem;color:#071025}
.why-details-content ul{margin:0;padding-left:1.5rem;line-height:2;color:#071025}
.why-details-content ul li{margin-bottom:0.75rem}

/* Modifier: image on the left, content on the right (keeps same grid but reverses source order visually if needed) */
.why-left-image .why-details-grid{grid-template-columns:44% 56%;padding:4rem 0;gap:10rem}
.why-left-image .why-details-image{order:0}
.why-left-image .why-details-content{order:1}

@media(max-width:900px){
	.why-details-grid{grid-template-columns:1fr}
	.why-details-inner{padding:0 2rem}
}

/* Why details (image left, content right) */


/* Modal overlay & card */
.modal-overlay[hidden]{display:none}
.modal-overlay{position:fixed;inset:0;background:rgba(2,6,23,0.6);backdrop-filter: blur(6px);display:flex;align-items:center;justify-content:center;z-index:999}
.modal-card{background:#ffffff;color:#fff;max-width:640px;width:92vw;border-radius:16px;padding:2rem 2rem 2.25rem;box-shadow:0 30px 80px rgba(0,0,0,0.3);position:relative}
.modal-card h2{margin:0 0 0.75rem;font-size:1.75rem}
.modal-card p{margin:0 0 1.25rem;line-height:1.7;color:#e5e7eb}
.modal-actions{display:flex;gap:0.75rem;align-items:center;margin-top:0.25rem}
.modal-close{position:absolute;top:10px;right:14px;background:transparent;border:0;color:#000000;font-size:1.5rem;cursor:pointer}

.modal-hero{background:#ffd300;color:#071025;margin:-2rem -2rem 1.5rem -2rem;padding:1.25rem 2rem;border-top-left-radius:14px;border-top-right-radius:14px}
.modal-hero h1{margin:0;font-size:2.25rem;letter-spacing:1px;font-weight:900}
.modal-body h2{margin:0 0 0.75rem;font-size:1.5rem;color:#071025;background:#f9fafb;padding:0.75rem 0rem;border-radius:8px}
.modal-body p{color:#111827}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;margin-top:1rem;position:relative}
.modal-col-left h3{margin:0 0 0.5rem;color:#071025}
.modal-col-left ul{margin:0;padding-left:1.25rem;line-height:1.8;color:#111827}
.modal-col-right p{margin:0 0 0.75rem;color:#111827}
.modal-apply{display:flex;justify-content:center;margin-top:1.5rem}
.modal-apply .cta{background:#ffd300;color:#071025;font-weight:800}

@media(max-width:800px){
	.modal-grid{grid-template-columns:1fr}
}

/* Ease-in animation on modal open */
.modal-overlay:not([hidden]){animation: fadeIn 320ms ease both}
.modal-overlay:not([hidden]) .modal-card{animation: fadeInUp 480ms cubic-bezier(.2,.8,.2,1) 120ms both}
/* Fade-out animation when closing */
.modal-overlay.closing{animation: fadeOut 260ms ease both}
.modal-overlay.closing .modal-card{animation: fadeOutDown 320ms cubic-bezier(.2,.8,.2,1) both}