/* Basic fallback styles and small tweaks */
header { background-color: rgba(255,255,255,0.95); }
.container { padding-left: 1rem; padding-right: 1rem; }

/* Nudge the brand slightly to the left */
.site-brand {
	/* keep the brand slightly left via margin, animate entrance with transform */
	margin-left: -6px;
	transform: translateX(40px);
	opacity: 0;
	animation: brand-slide-in 600ms cubic-bezier(.2,.9,.3,1) 120ms forwards;
}

@media (min-width: 768px) {
	.site-brand { margin-left: -12px; }
}

@keyframes brand-slide-in {
	from { transform: translateX(40px); opacity: 0; }
	to   { transform: translateX(0);  opacity: 1; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.site-brand { animation: none; transform: none; opacity: 1; }
}

body {
font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif;
}

/* Make the page full-height so full-screen hero works reliably */
html, body { height: 100%; }

/* Scrolling hero should fill viewport and center content */
.scrolling-hero {
	min-height: 100vh; /* full viewport height */
	display: flex;
	align-items: center; /* vertical center */
	justify-content: center; /* horizontal center */
	overflow: hidden;
	padding: 2rem 0; /* breathing room on small screens */
}

/* Scrolling Animation Hero Section */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll {
	/* duration will be adjusted via CSS variable if needed */
	animation: scroll var(--scroll-duration, 28s) linear infinite;
		/* Make sure the track is wide enough for seamless loop; container controls overflow */
		width: max(200%, calc(100% + 40vw));
}

#scrolling-track:hover {
  animation-play-state: paused;
}

/* Each scrolling item should flex-shrink:0 and be sized relative to viewport */
.scroll-item {
	flex: 0 0 auto; /* don't shrink */
	width: min(36vw, 420px); /* responsive width: up to 420px or ~36% of viewport */
	display: flex; align-items: center; gap: 1rem;
}

/* Make inner images a bit smaller on very small screens */
@media (max-width: 420px) {
	.scroll-item { width: 80vw; }
	.scroll-item img { height: 56px; width: 56px; }
}


/* Mobile-specific responsive tweaks (phones) */
@media (max-width: 640px) {
	/* Header: reduce padding and center brand */
	header .container { padding-left: 0.75rem; padding-right: 0.75rem; }
	.site-brand { margin-left: 0; transform: none; }

	/* Carousel: smaller padding, full-height minus header, stack content */
	.scrolling-hero { padding-top: 1rem; padding-bottom: 1rem; }
	.carousel { width: 100%; }
	.carousel .slide { padding: 1rem; min-height: calc(100vh - 64px); }
	.slide-inner { flex-direction: column; gap: .6rem; }
	.slide-inner img { height: 64px; width: 64px; }
	.slide-cta { display: block; width: 100%; text-align: center; padding: .6rem; font-size: 1rem; }

	/* Bigger touch targets for prev/next */
	.carousel-prev, .carousel-next { width:48px; height:48px; font-size:1.6rem; }
	.carousel-prev { left: 8px; }
	.carousel-next { right: 8px; }

	/* Dots larger and above footer level */
	.carousel-dots button { width:12px; height:12px; }

	/* Footer and content stacking */
	.container .grid { grid-template-columns: 1fr !important; }
	footer .container { padding-left: 1rem; padding-right: 1rem; }
	footer picture { display: none; } /* reduce visual clutter on small screens */

	/* Make forms and inputs easier to tap */
	input[type="email"], button[type="submit"] { font-size: 1rem; padding: .6rem .75rem; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.animate-scroll { animation: none; }
}

/* Carousel styles (slide-based hero) */
.carousel { position: relative; width: 100%; max-width: none; margin: 0; overflow: hidden; }
.carousel .slides { display: flex; width: 100%; }
.carousel .slide { 
	flex: 0 0 100%;
	box-sizing: border-box;
	padding: 0; /* we'll position content inside */
	display: flex;
	align-items: flex-start; /* place text toward top */
	justify-content: center;
	text-align: center;
	min-height: 100vh; /* full viewport height */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative; /* for overlay */
}

.carousel .slide::before {
	/* subtle dark overlay to keep text readable */
	content: "";
	position: absolute;
	inset: 0;
	/* background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.1)); */
	z-index: 1;
}

.slide-inner { display:flex; align-items: center; justify-content: center; gap: 1rem; position: relative; z-index: 2; width: 100%; padding-top: 6vh; padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; 
	/* gentle horizontal sway to give life to the overlayed content */
	--slide-sway-distance: 6px; /* horizontal travel each way */
	--slide-sway-duration: 6s; /* one-way duration */
	animation: slide-sway var(--slide-sway-duration) ease-in-out infinite alternate;
}
.slide-cta { margin-top: 1rem; display: inline-block; background: #fff; color: #0369a1; padding: .6rem 1rem; border-radius: .5rem; font-weight: 600; }

.carousel-prev, .carousel-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgb(133 133 133 / 85%); border: none; width: 44px; height: 44px; border-radius: 999px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; cursor:pointer; }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
.carousel-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; display:flex; gap:8px; }
.carousel-dots button { width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,0.6); border:none; padding:0; }
.carousel-dots button.active { background: #fff; }

/* slide transition handled by JS via transform on .slides */

@media (max-width: 768px) {
	.carousel { padding: 0 12px; }
	.carousel .slide { padding: 1rem; }
	.slide-inner { flex-direction: column; gap: .75rem; }
	.slide-inner img { height: 72px; width: 72px; }
	.slide-cta { align-self: center; padding: .5rem .9rem; }
	.carousel-prev, .carousel-next { width:38px; height:38px; }
	.carousel-dots { bottom: 12px; }
	.carousel-reminder { padding: .4rem 0; }

    .carousel-dots button { width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,0.6); border:none; padding:0; }
    .carousel-prev, .carousel-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.85); border: none; width: 44px; height: 44px; border-radius: 999px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; cursor:pointer; }

    ;
}

@media (max-width: 420px) {
	.slide-inner img { height: 56px; width: 56px; }
	.slide h3 { font-size: 1.15rem; }
	.slide p { font-size: .98rem; }
	.slide-inner { padding-top: 10vh; }
}

/* Keyframes for the gentle left-right slide of overlay content */
@keyframes slide-sway {
	from { transform: translateX(calc(var(--slide-sway-distance) * -1)); }
	to   { transform: translateX(var(--slide-sway-distance)); }
}

/* Disable motion on small screens and respect reduced-motion */
@media (max-width: 640px) {
	.slide-inner { animation: none !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.slide-inner { animation: none !important; }
}

/* Reminder banner styles */
/* reminder banner removed */



.banner-images {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0; /* behind overlay and content */
}

.banner-images img {
	/* fill the slide area so every slide image has the same visible width */
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;  /* crop where necessary so visuals are consistent */
	object-position: center center;
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
	/* visual blur for background images so overlay text is easier to read */
	--banner-blur: 0px; /* tweak this value (px) to increase/decrease blur */
	filter: blur(var(--banner-blur));
	transform: scale(1.03); /* scale slightly to avoid visible edges after blur */
	will-change: filter, transform;
	transition: filter 240ms ease, transform 240ms ease;
    padding-top: 300px;
}

@media (prefers-reduced-motion: reduce) {
	.banner-images img { filter: none !important; transform: none !important; transition: none !important; }
}