/* ==========================================================================
   Ad Trust Group — homepage skin
   Port of ~/Studio/adtrust-landing (React+Vite+Tailwind) to plain CSS.
   Tokens, scrims, grading and contrast floors come from PROMPT.md and were
   measured, not guessed. Do not "tidy" the alpha values: body copy inside a
   glass panel must never drop below white/85, labels never below white/70.
   Breakpoints mirror Tailwind: sm 640 / md 768 / lg 1024 / xl 1280.
   ========================================================================== */

.atg-body {
	margin: 0;
	background: #0a0a0a;
	color: #fff;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
.atg-body ::selection { background: rgba(255, 255, 255, .2); }
.atg *, .atg *::before, .atg *::after { box-sizing: border-box; }
.atg img, .atg video, .atg canvas { display: block; max-width: 100%; }
.atg a { text-decoration: none; color: inherit; }
.atg ul, .atg ol { list-style: none; margin: 0; padding: 0; }
.atg p { margin: 0; }
.atg :focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* ---------- responsive padding rhythm ---------- */
.atg-nav__inner, .atg-hero, .atg-section, .atg-beat, .atg-contact {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
@media (min-width: 640px)  { .atg-nav__inner,.atg-hero,.atg-section,.atg-beat,.atg-contact { padding-left:2rem;   padding-right:2rem; } }
@media (min-width: 768px)  { .atg-nav__inner,.atg-hero,.atg-section,.atg-beat,.atg-contact { padding-left:3rem;   padding-right:3rem; } }
@media (min-width: 1024px) { .atg-nav__inner,.atg-hero,.atg-section,.atg-beat,.atg-contact { padding-left:4rem;   padding-right:4rem; } }
@media (min-width: 1280px) { .atg-nav__inner,.atg-hero,.atg-section,.atg-beat,.atg-contact { padding-left:6rem;   padding-right:6rem; } }

/* ==========================================================================
   Scroll video
   ========================================================================== */
.atg-video {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: #0a0a0a;
	overflow: hidden;
	pointer-events: none;
}
/* the source clip is light blue-grey; white type is unreadable over it ungraded */
.atg-video__grade {
	position: absolute;
	inset: 0;
	filter: brightness(0.40) contrast(1.18) saturate(1.3);
}
.atg-video__poster,
.atg-video__el,
.atg-video__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.atg-video__poster { opacity: 1; transition: opacity .5s ease; }
.atg-video__el     { opacity: 0; transition: opacity .3s ease; }
.atg-video__canvas { opacity: 0; transition: opacity .3s ease; }
.atg-video.is-video-ready  .atg-video__el     { opacity: 1; }
.atg-video.is-video-ready  .atg-video__poster { opacity: 0; }
.atg-video.is-canvas-ready .atg-video__canvas { opacity: 1; }
.atg-video.is-canvas-ready .atg-video__el     { opacity: 0; }
.atg-video.is-canvas-ready .atg-video__poster { opacity: 0; }

/* directional scrims so contrast lands where the type actually sits */
.atg-video__scrim { position: absolute; }
.atg-video__scrim--base   { inset: 0; background: rgba(10,10,10,.25); }
.atg-video__scrim--top    { top: 0; left: 0; right: 0; height: 45vh;
	background: linear-gradient(to bottom, rgba(10,10,10,.90), rgba(10,10,10,.45), transparent); }
.atg-video__scrim--bottom { bottom: 0; left: 0; right: 0; height: 60vh;
	background: linear-gradient(to top, rgba(10,10,10,.95), rgba(10,10,10,.60), transparent); }
.atg-video__scrim--left   { top: 0; bottom: 0; left: 0; width: 70vw;
	background: linear-gradient(to right, rgba(10,10,10,.70), rgba(10,10,10,.20), transparent); }

.atg-layer { position: relative; z-index: 10; }

/* ==========================================================================
   Typography tokens
   ========================================================================== */
.atg-mono {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: rgba(255,255,255,.70);   /* contrast floor for labels */
}
@media (min-width: 1280px) { .atg-mono { font-size: 11px; } }

.atg-badge {
	display: inline-block;
	border-left: 2px solid #fff;
	background: rgba(255,255,255,.15);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	padding: .375rem .75rem;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: rgba(255,255,255,.90);
}

.atg-h1 {
	margin: 0;
	font-size: 3rem;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.025em;
	text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
@media (min-width: 640px)  { .atg-h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { .atg-h1 { font-size: 4.5rem; } }
@media (min-width: 1280px) { .atg-h1 { font-size: 6rem; } }

.atg-h2 {
	margin: .75rem 0 0;
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.02em;
}
@media (min-width: 640px)  { .atg-h2 { font-size: 2.75rem; } }
@media (min-width: 1280px) { .atg-h2 { font-size: 3.5rem; } }
.atg-h2--xl { text-shadow: 0 2px 8px rgba(0,0,0,.45); }
@media (min-width: 1280px) { .atg-h2--xl { font-size: 4.5rem; } }

/* ==========================================================================
   Navbar
   ========================================================================== */
.atg-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	border-bottom: 1px solid rgba(255,255,255,.15);
	/* the backdrop is required: on mobile body copy scrolls under a transparent bar */
	background: rgba(10,10,10,.70);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
body.admin-bar .atg-nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .atg-nav { top: 46px; } }

.atg-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 64px;
}
.atg-nav__logo { height: 28px; width: auto; }
@media (min-width: 1280px) { .atg-nav__logo { height: 32px; } }

.atg-nav__links { display: none; gap: 2rem; }
@media (min-width: 768px)  { .atg-nav__links { display: flex; } }
@media (min-width: 1024px) { .atg-nav__links { gap: 2.5rem; } }
.atg-nav__links a {
	font-size: .875rem;
	color: rgba(255,255,255,.85);
	transition: color .2s ease;
}
.atg-nav__links a:hover { color: #fff; }
@media (min-width: 1280px) { .atg-nav__links a { font-size: 1rem; } }
.atg-nav__links sup { font-size: 10px; color: rgba(255,255,255,.75); margin-left: 2px; }

.atg-nav__cta {
	flex: none;
	border-radius: .375rem;
	border: 1px solid rgba(255,255,255,.20);
	background: rgba(255,255,255,.15);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	padding: .5rem .875rem;
	font-size: .8125rem;
	color: #fff;
	white-space: nowrap;
	transition: background .2s ease;
}
.atg-nav__cta:hover { background: rgba(255,255,255,.25); }
@media (max-width: 420px) { .atg-nav__cta { display: none; } }

/* ==========================================================================
   1. Hero — everything a visitor needs, above the fold
   ========================================================================== */
.atg-hero {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2.5rem;
	min-height: 100vh;
	padding-top: 6rem;
	padding-bottom: 3rem;
}
@supports (height: 100svh) { .atg-hero { min-height: 100svh; } }

.atg-hero__top { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 640px) { .atg-hero__top { flex-direction: row; justify-content: space-between; align-items: flex-start; } }

.atg-hero__kicker {
	max-width: 20rem;
	font-size: 1.125rem;
	line-height: 1.5;
	color: rgba(255,255,255,.85);   /* contrast floor for body copy */
	text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
@media (min-width: 640px)  { .atg-hero__kicker { text-align: right; font-size: 1.25rem; } }
@media (min-width: 1280px) { .atg-hero__kicker { max-width: 28rem; font-size: 1.5rem; } }

.atg-hero__cards {
	display: grid;
	gap: .75rem;
	margin-top: 2.5rem;
}
@media (min-width: 640px)  { .atg-hero__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .atg-hero__cards { grid-template-columns: repeat(4, 1fr); } }

/* Below sm the prototype stacks all four cards, which pushes the hero ~260px
   past a 375x812 screen. The section's whole point is that a visitor sees what
   this company does without scrolling, so pair them up and tighten the rhythm
   instead. Everything above 640px is exactly as specified. */
@media (max-width: 639px) {
	.atg-hero { padding-top: 5.25rem; padding-bottom: 2rem; gap: 1.5rem; }
	.atg-hero__top { gap: 1.25rem; }
	.atg-hero__kicker { font-size: 1rem; line-height: 1.45; max-width: 100%; }
	.atg-h1 { font-size: 2.625rem; }
	.atg-hero__cards { grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: 1.5rem; }
	.atg-card--compact { padding: .75rem; border-radius: .625rem; }
	.atg-card__index { margin-bottom: .375rem; }
	.atg-card__title { font-size: .875rem; }
	.atg-card__lead { font-size: .75rem; line-height: 1.4; margin-top: .375rem; }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.atg-card {
	display: block;
	border: 1px solid rgba(255,255,255,.15);
	background: rgba(255,255,255,.10);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: background .25s ease;
	height: 100%;
}
.atg-card--compact { border-radius: .75rem; padding: 1rem; }
.atg-card--compact:hover { background: rgba(255,255,255,.20); }
.atg-card--full {
	border-radius: 1rem;
	background: rgba(255,255,255,.07);
	padding: 1.5rem;
}
@media (min-width: 1280px) { .atg-card--full { padding: 2rem; } }
.atg-card--post { border-radius: 1rem; background: rgba(255,255,255,.07); padding: 1.5rem; }
.atg-card--post:hover { background: rgba(255,255,255,.14); }

.atg-card__index { display: block; margin-bottom: .625rem; }
.atg-card__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.atg-card__title { font-size: 1rem; font-weight: 500; color: #fff; margin: 0; }
.atg-card__title--lg { font-size: 1.375rem; font-weight: 400; margin: 0 0 .75rem; }
.atg-card__title--post { font-size: 1.125rem; font-weight: 500; margin: 0 0 .875rem; line-height: 1.35; }
.atg-card__lead {
	display: block;
	margin-top: .5rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: rgba(255,255,255,.85);
}
.atg-card__body { font-size: .9375rem; line-height: 1.6; color: rgba(255,255,255,.85); }
.atg-card__detail {
	margin-top: .75rem;
	padding-top: .75rem;
	border-top: 1px solid rgba(255,255,255,.10);
	font-size: .9375rem;
	line-height: 1.6;
	color: rgba(255,255,255,.85);
}
.atg-card__meta {
	display: flex;
	align-items: center;
	gap: .375rem;
	font-size: .8125rem;
	color: rgba(255,255,255,.70);
}
.atg-chev { flex: none; transition: transform .25s ease; }
.atg-card:hover .atg-chev { transform: translateX(3px); }

/* ==========================================================================
   Ground — dense copy on near-solid background
   ========================================================================== */
.atg-fade { height: 128px; }
.atg-fade--in  { background: linear-gradient(to bottom, transparent, rgba(10,10,10,.95)); }
.atg-fade--out { background: linear-gradient(to top,    transparent, rgba(10,10,10,.95)); }
.atg-ground { background: rgba(10,10,10,.95); }

.atg-section { padding-top: 6rem; padding-bottom: 3rem; }
@media (min-width: 640px)  { .atg-section { padding-top: 7rem; } }
@media (min-width: 768px)  { .atg-section { padding-bottom: 4rem; } }
@media (min-width: 1280px) { .atg-section { padding-top: 8rem; padding-bottom: 5rem; } }

.atg-section__head { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .atg-section__head { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.atg-section__intro {
	max-width: 26rem;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255,255,255,.85);
}
@media (min-width: 768px) { .atg-section__intro { text-align: right; } }

.atg-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .atg-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* Qualifier */
.atg-qualifier { max-width: 64rem; margin-top: 3rem; }
.atg-qualifier li {
	display: flex;
	gap: 1.5rem;
	align-items: baseline;
	border-bottom: 1px solid rgba(255,255,255,.15);
	padding: 1.5rem 0;
}
.atg-qualifier__index { flex: none; }
.atg-qualifier__text { font-size: 1.125rem; line-height: 1.4; color: #fff; }
@media (min-width: 640px)  { .atg-qualifier__text { font-size: 1.25rem; } }
@media (min-width: 1280px) { .atg-qualifier__text { font-size: 1.875rem; } }

/* Principles */
.atg-principles { display: grid; gap: 2.5rem 4rem; margin-top: 3rem; }
@media (min-width: 640px) { .atg-principles { grid-template-columns: repeat(2, 1fr); } }
.atg-principle { border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.25rem; }
.atg-principle__title { margin: 0 0 .625rem; font-size: 1.125rem; font-weight: 500; color: #fff; }
.atg-principle__body { font-size: .9375rem; line-height: 1.65; color: rgba(255,255,255,.85); }

/* ==========================================================================
   6. Beat + 7. Contact — over the video
   ========================================================================== */
.atg-beat, .atg-contact {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
	min-height: 100vh;
	padding-top: 6rem;
	padding-bottom: 3rem;
}
@supports (height: 100svh) { .atg-beat, .atg-contact { min-height: 100svh; } }
.atg-beat__top { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 640px) { .atg-beat__top { flex-direction: row; justify-content: space-between; align-items: flex-start; } }

.atg-beat__body, .atg-beat__pull {
	max-width: 40rem;
	margin-top: 1.25rem;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255,255,255,.85);
	text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.atg-beat__pull {
	border-left: 2px solid rgba(255,255,255,.35);
	padding-left: 1rem;
	font-style: italic;
}

.atg-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.atg-btn {
	display: inline-block;
	border-radius: 9999px;
	padding: .75rem 1.5rem;
	font-size: .9375rem;
	font-weight: 500;
	transition: background .2s ease;
}
.atg-btn--primary { background: #fff; color: #0a0a0a; }
.atg-btn--primary:hover { background: rgba(255,255,255,.85); }
.atg-btn--glass {
	border: 1px solid rgba(255,255,255,.25);
	background: rgba(255,255,255,.10);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
}
.atg-btn--glass:hover { background: rgba(255,255,255,.20); }
.atg-btn--sm { padding: .5rem 1rem; font-size: .8125rem; }

.atg-contact__grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .atg-contact__grid { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.atg-contact__side { display: flex; flex-direction: column; gap: 1rem; }

.atg-panel {
	border-radius: 1rem;
	border: 1px solid rgba(255,255,255,.15);
	background: rgba(255,255,255,.10);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	padding: 1.25rem;
}
.atg-panel__row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.atg-monogram {
	display: flex; align-items: center; justify-content: center;
	flex: none;
	height: 6rem; width: 5rem;
	border-radius: .75rem;
	border: 1px solid rgba(255,255,255,.20);
	background: rgba(255,255,255,.10);
	font-size: 1.5rem; font-weight: 500; letter-spacing: .05em;
	color: rgba(255,255,255,.90);
}
@media (min-width: 1280px) { .atg-monogram { height: 7rem; width: 6rem; } }
.atg-panel__name { font-size: 1.0625rem; font-weight: 500; color: #fff; }
.atg-panel__role { margin-top: .25rem; font-size: .8125rem; color: rgba(255,255,255,.70); }
.atg-panel__label { margin-bottom: .5rem; }
.atg-panel__addr { font-style: normal; font-size: 1rem; color: rgba(255,255,255,.85); }

.atg-footer {
	display: flex; flex-direction: column; gap: 1rem;
	border-top: 1px solid rgba(255,255,255,.15);
	padding-top: 1.5rem;
	font-size: .8125rem;
	color: rgba(255,255,255,.70);
}
@media (min-width: 640px) { .atg-footer { flex-direction: row; justify-content: space-between; align-items: center; } }
.atg-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.atg-footer__links a { color: rgba(255,255,255,.70); transition: color .2s ease; }
.atg-footer__links a:hover { color: #fff; }

/* ==========================================================================
   Reveal
   ========================================================================== */
/* Visible by default. Only a page that actually runs JS may hide anything,
   otherwise the whole homepage is blank with JS disabled. The .atg-js class
   is set by an inline script in <head> before first paint. */
.atg-js [data-reveal] {
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity .7s ease-out, transform .7s ease-out;
	will-change: transform, opacity;
}
.atg-js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.atg-video__el, .atg-video__canvas { display: none !important; }
	.atg-video__poster { opacity: 1 !important; }
	.atg-chev { transition: none !important; }
}