/* ==========================================================================
   AMG TECH — Design System
   Every visual value worth changing is a custom property in :root.
   Section order: tokens, reset, typography, layout, components, header,
   footer, page sections, motion, responsive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
	/* Surfaces — Obsidian Black ground, Graphite panels. */
	--amg-bg: #050505;
	--amg-surface: #151515;
	--amg-surface-2: #1b1b1b;
	--amg-surface-3: #232323;

	/* Type */
	--amg-text: #f5f5f2;
	--amg-muted: #8d8d8d;
	/*
	 * Lifted from #5f5f5f to clear WCAG AA on BOTH grounds it appears against:
	 * 5.45:1 on the obsidian page background and 4.89:1 on the graphite card
	 * surface. It carries labels, numerals and form hints, so it is real text,
	 * not decoration, and 3.19:1 was not defensible.
	 */
	--amg-dim: #848484;

	/*
	 * Champagne Gold. The brand ratio is 60% obsidian / 25% light neutral /
	 * 10% graphite / 5% gold, so this appears on rules, numerals, the primary
	 * CTA fill and little else. "Luxury Technology, not Luxury Jewellery."
	 */
	--amg-accent: #c9a45c;
	--amg-accent-soft: #e0b96f;
	--amg-accent-glow: rgba(201, 164, 92, 0.13);

	/*
	 * Metallic ramp sampled from the AMG ribbon in the supplied logo master
	 * (#4b2f12 → #915e25 → #b88f56 → #eabe77 → #fbdb96). Running it light-deep-
	 * light reproduces the sheen rolling across the ribbon rather than reading
	 * as a flat two-stop fade.
	 */
	--amg-gold-gradient: linear-gradient(100deg, #fbdb96 0%, #eabe77 20%, #b88f56 44%, #915e25 58%, #d4a862 78%, #fbdb96 100%);

	/* Lines */
	--amg-border: #292929;
	--amg-border-strong: #3d3d3d;
	--amg-hairline: #1c1c1c;

	/* Geometry — intentionally near-square. Heavy rounding reads as template. */
	--amg-radius: 3px;
	--amg-radius-lg: 6px;

	/* Rhythm */
	--amg-container: 1440px;
	--amg-gutter: clamp(1.25rem, 5vw, 5rem);
	--amg-section-y: clamp(5.5rem, 11vw, 10.5rem);

	/* Type scale */
	--fs-display: clamp(2.9rem, 7.5vw, 7.6rem);
	--fs-h1: clamp(2.4rem, 6.2vw, 5.6rem);
	--fs-h2: clamp(2rem, 4.6vw, 4.1rem);
	--fs-h3: clamp(1.3rem, 2.1vw, 1.9rem);
	--fs-h4: clamp(1.05rem, 1.4vw, 1.25rem);
	--fs-lead: clamp(1.02rem, 1.35vw, 1.3rem);
	--fs-body: clamp(0.97rem, 1.05vw, 1.06rem);
	--fs-small: 0.86rem;
	--fs-label: 0.7rem;

	/*
	 * Manrope is the primary face (headings, body, nav, buttons, UI).
	 * Space Grotesk is reserved for large display headlines, exactly as the
	 * brand guidelines scope it — not used for body or interface text.
	 */
	--ff-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ff-display: "Space Grotesk", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ff-mono: "SFMono-Regular", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Motion — "Smooth. Intelligent. Controlled." */
		--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--dur: 0.75s;
	--dur-fast: 0.35s;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/*
	 * `clip`, not `hidden`. The atmospheric glows are oversized on purpose and
	 * bleed past the viewport edge; they must be clipped or they add hundreds of
	 * pixels of horizontal scroll. `overflow: hidden` would do that too, but it
	 * makes the element a scroll container, which silently breaks every
	 * `position: sticky` column on the site. `clip` suppresses the overflow
	 * without creating one.
	 */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--amg-bg);
	color: var(--amg-text);
	font-family: var(--ff-sans);
	font-size: var(--fs-body);
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* Safari < 16 has no `overflow: clip`; fall back to hidden on the root only,
   which leaves body-level sticky intact. */
@supports not (overflow: clip) {
	html { overflow-x: hidden; }
	body { overflow-x: hidden; }
}

/* Film grain. One data URI, no network request, sits above the background and
   below all content. It is what stops large flat dark areas looking like dead
   pixels on OLED screens. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.028;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
}

::selection { background: var(--amg-accent); color: #050505; }

:focus-visible {
	outline: 2px solid var(--amg-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.amg-skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--amg-accent);
	color: #050505;
	font-size: var(--fs-small);
	transition: top var(--dur-fast) var(--ease);
}
.amg-skip-link:focus { top: 1rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */

.amg-heading {
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.032em;
	text-transform: uppercase;
	text-wrap: balance;
}

.amg-heading--display {
	font-family: var(--ff-display);
	font-size: var(--fs-display);
	line-height: 0.9;
	letter-spacing: -0.042em;
	font-weight: 600;
}

.amg-heading--h1 { font-family: var(--ff-display); font-size: var(--fs-h1); line-height: 0.94; letter-spacing: -0.038em; }
.amg-heading--sm { font-size: var(--fs-h3); letter-spacing: -0.02em; }

/* Each headline line is its own overflow-clipped row so lines rise
   independently on reveal. This is the single most "designed" motion on the
   site, so it is reserved for headings only. */
.amg-heading__line {
	display: block;
	overflow: hidden;
	/*
	 * Each line is clipped so it can slide up on reveal, but at a 0.98 line
	 * height that clip box sits right on the cap line — which decapitates
	 * diacritics like the macrons in "KĀĀNCH". Growing the box upward and
	 * pulling it back with an equal negative margin gives the marks room
	 * without moving the text a pixel.
	 */
	padding-top: 0.14em;
	margin-top: -0.14em;
}
.amg-heading__inner {
	display: block;
	transition: transform 1.05s var(--ease);
	transition-delay: calc(var(--line-index, 0) * 90ms);
}
/* Only hide it if JavaScript is present to bring it back. */
.js .amg-heading__inner { transform: translateY(102%); }
.is-visible .amg-heading__inner,
.amg-heading.is-visible .amg-heading__inner { transform: translateY(0); }

.amg-gradient-text {
	background: var(--amg-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.amg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--amg-muted);
}
.amg-eyebrow__mark {
	width: 22px;
	height: 1px;
	background: var(--amg-gold-gradient);
	flex: none;
}

.amg-label {
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--amg-dim);
}

.amg-lead {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--amg-muted);
	font-weight: 300;
	max-width: 58ch;
	text-wrap: pretty;
}

.amg-body { color: var(--amg-muted); max-width: 62ch; text-wrap: pretty; }
.amg-body + .amg-body { margin-top: 1.15rem; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */

.amg-container {
	width: 100%;
	max-width: var(--amg-container);
	margin-inline: auto;
	padding-inline: var(--amg-gutter);
	position: relative;
	z-index: 2;
}

.amg-section {
	position: relative;
	padding-block: var(--amg-section-y);
	z-index: 2;
}

.amg-section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* Anything an in-page link can target must clear the fixed header. */
.amg-section,
[id] { scroll-margin-top: clamp(5rem, 9vh, 7rem); }
.amg-section--flush-top { padding-top: 0; }

/* Hairline dividers between major sections — an editorial signature that keeps
   the dark page from becoming one undifferentiated void. */
.amg-section--ruled { border-top: 1px solid var(--amg-hairline); }

.amg-grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.75rem);
}

.amg-grid--2 { grid-template-columns: repeat(2, 1fr); }
.amg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.amg-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Asymmetric editorial split: heading left, body right, with air between. */
.amg-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 7rem);
	align-items: start;
}
.amg-split--sticky > :first-child {
	position: sticky;
	top: clamp(6rem, 14vh, 9rem);
}

.amg-section__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

/* A label sitting directly above a heading needs clearance for ascenders. */
.amg-label + .amg-heading { margin-top: 1.15rem; }
.amg-section__head .amg-eyebrow { margin-bottom: 1.4rem; }
.amg-section__head .amg-lead { margin-top: 1.6rem; }

/* Atmospheric glow. Positioned per section, never animated on mobile. */
.amg-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	filter: blur(100px);
	opacity: 0.3;
}
.amg-glow--accent { background: radial-gradient(circle, var(--amg-accent-glow) 0%, transparent 70%); }
.amg-glow--cool { background: radial-gradient(circle, rgba(245, 245, 242, 0.05) 0%, transparent 70%); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.amg-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.02rem 1.6rem;
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border-radius: var(--amg-radius);
	overflow: hidden;
	isolation: isolate;
	white-space: nowrap;
	transition: transform 0.5s var(--ease), border-color var(--dur-fast) var(--ease),
		background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
		box-shadow var(--dur-fast) var(--ease);
	will-change: transform;
}

.amg-btn__label { position: relative; z-index: 2; }

.amg-btn__arrow {
	position: relative;
	z-index: 2;
	display: inline-flex;
	transition: transform 0.45s var(--ease);
}
.amg-btn:hover .amg-btn__arrow { transform: translateX(4px); }

.amg-btn--primary {
	background: var(--amg-accent);
	border: 1px solid var(--amg-accent);
	color: #050505;
	font-weight: 600;
}
/*
 * Hover is a lift to Warm Gold plus a shallow elevation. The brand's UI rules
 * name "subtle gold highlight, border transition, elevation" and explicitly
 * rule out excessive glow, so there is no bloom and no light sweep here.
 */
.amg-btn--primary:hover {
	background: var(--amg-accent-soft);
	border-color: var(--amg-accent-soft);
	box-shadow: 0 10px 26px -16px rgba(201, 164, 92, 0.75);
}

.amg-btn--secondary {
	border: 1px solid var(--amg-border);
	color: var(--amg-text);
}
.amg-btn--secondary:hover {
	border-color: var(--amg-accent);
	color: var(--amg-accent-soft);
}

.amg-btn--ghost {
	padding-inline: 0;
	color: var(--amg-text);
	border-bottom: 1px solid var(--amg-border-strong);
	border-radius: 0;
	padding-bottom: 0.6rem;
}
.amg-btn--ghost:hover { border-bottom-color: var(--amg-accent); }

.amg-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: clamp(2rem, 3.5vw, 3rem);
}

/* --------------------------------------------------------------------------
   6. CARDS
   -------------------------------------------------------------------------- */

.amg-card {
	position: relative;
	padding: clamp(1.75rem, 2.6vw, 2.6rem);
	background: var(--amg-surface);
	border: 1px solid var(--amg-border);
	border-radius: var(--amg-radius);
	overflow: hidden;
	transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), background-color 0.6s var(--ease);
}
/* A soft light source appears in the top-left corner on hover. Cheap, and it
   makes the surface feel lit rather than merely tinted. */
.amg-card::before {
	content: "";
	position: absolute;
	top: -40%;
	left: -20%;
	width: 70%;
	aspect-ratio: 1;
	background: radial-gradient(circle, var(--amg-accent-glow) 0%, transparent 72%);
	opacity: 0;
	transition: opacity 0.7s var(--ease);
	pointer-events: none;
}
.amg-card:hover {
	transform: translateY(-4px);
	border-color: var(--amg-border-strong);
	background: var(--amg-surface-2);
}
.amg-card:hover::before { opacity: 1; }

.amg-card__num {
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	color: var(--amg-dim);
	transition: color 0.5s var(--ease);
}
.amg-card:hover .amg-card__num { color: var(--amg-accent); }

.amg-card__title {
	margin-top: 1.5rem;
	font-size: var(--fs-h4);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1.25;
}
.amg-card__body {
	margin-top: 0.9rem;
	color: var(--amg-muted);
	font-size: var(--fs-small);
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   7. SERVICE ROWS — the editorial alternative to a grid of six boxes.
   -------------------------------------------------------------------------- */

.amg-service-list { border-top: 1px solid var(--amg-border); }

.amg-service-card {
	position: relative;
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(1rem, 3vw, 3rem);
	align-items: start;
	padding-block: clamp(1.75rem, 3vw, 2.6rem);
	border-bottom: 1px solid var(--amg-border);
	transition: background-color 0.6s var(--ease);
}
/* Accent rail grows from the left edge on hover. */
.amg-service-card::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 1px;
	width: 0;
	background: var(--amg-accent);
	transition: width 0.8s var(--ease);
}
.amg-service-card:hover::before { width: 100%; }
.amg-service-card:hover { background: linear-gradient(90deg, rgba(201, 164, 92, 0.045) 0%, transparent 60%); }

.amg-service-card__num {
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	color: var(--amg-dim);
	padding-top: 0.55rem;
	transition: color 0.5s var(--ease);
}
.amg-service-card:hover .amg-service-card__num { color: var(--amg-accent); }

.amg-service-card__title {
	font-size: clamp(1.35rem, 2.5vw, 2.15rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	transition: transform 0.6s var(--ease);
}
.amg-service-card:hover .amg-service-card__title { transform: translateX(10px); }

.amg-service-card__body {
	color: var(--amg-muted);
	font-size: var(--fs-small);
	line-height: 1.75;
	padding-top: 0.35rem;
	max-width: 46ch;
}

/* --------------------------------------------------------------------------
   8. NUMBERED POINT LIST
   -------------------------------------------------------------------------- */

.amg-points { border-top: 1px solid var(--amg-border); }

.amg-point {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2.5rem);
	padding-block: clamp(1.6rem, 2.6vw, 2.3rem);
	border-bottom: 1px solid var(--amg-border);
}
.amg-point__num {
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	color: var(--amg-accent);
	padding-top: 0.4rem;
}
.amg-point__title {
	font-size: var(--fs-h4);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.amg-point__body {
	margin-top: 0.6rem;
	color: var(--amg-muted);
	font-size: var(--fs-small);
	line-height: 1.75;
	max-width: 52ch;
}

/* --------------------------------------------------------------------------
   9. HEADER
   -------------------------------------------------------------------------- */

.amg-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	border-bottom: 1px solid transparent;
	transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease),
		backdrop-filter 0.5s var(--ease), padding 0.5s var(--ease);
	padding-block: 1.35rem;
}
.amg-header.is-scrolled {
	background: rgba(5, 5, 5, 0.74);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border-bottom-color: var(--amg-hairline);
	padding-block: 0.9rem;
}
/* Hide on scroll down, reveal on scroll up — keeps the cinematic hero clean. */
.amg-header.is-hidden { transform: translateY(-100%); }
.amg-header { transition-property: background-color, border-color, padding, transform; }

.amg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.amg-logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	line-height: 0;
}
/*
 * The supplied master is the Premium Dark lockup (gold AMG monogram + white
 * TECH). Its background was keyed to transparency so it sits on the obsidian
 * ground with no plate behind it. Height-driven so the aspect never distorts —
 * the brand's logo don'ts list stretching first.
 */
.amg-logo__img {
	height: 46px;
	width: auto;
	display: block;
	transition: opacity var(--dur-fast) var(--ease);
}
.amg-logo:hover .amg-logo__img { opacity: 0.82; }
.is-scrolled .amg-logo__img { height: 39px; }
.amg-logo img { max-height: 40px; width: auto; }

.amg-nav { display: flex; align-items: center; }
.amg-nav__list,
.amg-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.4vw, 2.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.amg-nav a {
	position: relative;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--amg-muted);
	padding-block: 0.35rem;
	transition: color var(--dur-fast) var(--ease);
	white-space: nowrap;
}
.amg-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--amg-accent);
	transition: width 0.45s var(--ease);
}
.amg-nav a:hover { color: var(--amg-text); }
.amg-nav a:hover::after { width: 100%; }
.amg-nav .current-menu-item > a,
.amg-nav .current_page_item > a { color: var(--amg-text); }
.amg-nav .current-menu-item > a::after,
.amg-nav .current_page_item > a::after { width: 100%; }

.amg-header__cta { display: flex; align-items: center; gap: 1rem; flex: none; }
.amg-header__cta .amg-btn { padding: 0.78rem 1.25rem; font-size: 0.68rem; }

/* Mobile toggle */
.amg-burger {
	display: none;
	width: 40px;
	height: 40px;
	position: relative;
	cursor: pointer;
	flex: none;
}
.amg-burger span {
	position: absolute;
	left: 9px;
	width: 22px;
	height: 1px;
	background: var(--amg-text);
	transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.amg-burger span:nth-child(1) { top: 17px; }
.amg-burger span:nth-child(2) { top: 23px; }
.is-nav-open .amg-burger span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.is-nav-open .amg-burger span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* Fullscreen mobile navigation */
.amg-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: var(--amg-bg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 6rem var(--amg-gutter) 3rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.is-nav-open .amg-mobile-nav { opacity: 1; visibility: visible; }

.amg-mobile-nav a {
	display: block;
	font-size: clamp(1.75rem, 8vw, 2.75rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	line-height: 1.15;
	padding-block: 0.42rem;
	color: var(--amg-text);
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
	transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.is-nav-open .amg-mobile-nav a { opacity: 1; transform: translateY(0); }
.amg-mobile-nav__footer { margin-top: 2.5rem; }

/* Scroll progress */
.amg-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: var(--amg-gold-gradient);
	z-index: 101;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   10. HERO
   -------------------------------------------------------------------------- */

.amg-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding-block: clamp(7rem, 16vh, 10rem) clamp(4rem, 10vh, 7rem);
	overflow: hidden;
}

.amg-3d-wrapper {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.amg-3d-wrapper canvas { width: 100%; height: 100%; display: block; }

/* Scrim keeps headline contrast above the WebGL layer at every viewport size. */
.amg-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, var(--amg-bg) 0%, rgba(5, 5, 5, 0.86) 34%, rgba(5, 5, 5, 0.12) 68%, transparent 100%),
		linear-gradient(0deg, var(--amg-bg) 0%, transparent 32%);
}

/* CSS-only fallback when WebGL is unavailable or motion is reduced. */
.amg-hero__fallback {
	position: absolute;
	top: 50%;
	right: 4%;
	width: min(46vw, 620px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	z-index: 0;
	background:
		radial-gradient(circle at 42% 40%, rgba(224, 185, 111, 0.13) 0%, transparent 46%),
		radial-gradient(circle at 58% 62%, var(--amg-accent-glow) 0%, transparent 56%);
	border-radius: 50%;
	filter: blur(30px);
}
.webgl-active .amg-hero__fallback { display: none; }

/* Wide enough that "BUSINESS FORWARD." holds its own line at desktop, which is
   the composition the brief specifies. */
.amg-hero__content { max-width: 71rem; }
.amg-hero .amg-eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.amg-hero .amg-lead { margin-top: clamp(1.75rem, 3vw, 2.4rem); max-width: 46ch; }

.amg-hero__scroll {
	position: absolute;
	left: var(--amg-gutter);
	bottom: 2.25rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}
.amg-hero__scroll-line {
	display: block;
	width: 48px;
	height: 1px;
	background: var(--amg-border-strong);
	position: relative;
	overflow: hidden;
}
.amg-hero__scroll-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--amg-accent);
	animation: amg-scroll-hint 2.6s var(--ease-inout) infinite;
}
@keyframes amg-scroll-hint {
	0% { transform: translateX(-100%); }
	55%, 100% { transform: translateX(100%); }
}

/* Interior page hero — shorter, no WebGL. */
.amg-page-hero {
	position: relative;
	padding-block: clamp(9rem, 20vh, 14rem) clamp(3.5rem, 7vw, 6rem);
	overflow: hidden;
}
.amg-page-hero .amg-eyebrow { margin-bottom: 1.6rem; }
.amg-page-hero .amg-lead { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   11. VISUALISATIONS (2D canvas / SVG — deliberately not WebGL)
   -------------------------------------------------------------------------- */

.amg-viz {
	position: relative;
	width: 100%;
	border: 1px solid var(--amg-border);
	border-radius: var(--amg-radius);
	background:
		radial-gradient(circle at 50% 50%, rgba(201, 164, 92, 0.055) 0%, transparent 65%),
		var(--amg-surface);
	overflow: hidden;
}
.amg-viz canvas { width: 100%; height: 100%; }
/* The pipeline is a wide, shallow diagram. A 16:9 frame around it is mostly
   empty; these ratios keep the drawing filling its own container. */
.amg-viz--pipeline { aspect-ratio: 1000 / 215; }
.amg-viz--ecosystem { aspect-ratio: 1 / 1; max-width: 680px; margin-inline: auto; }

@media (max-width: 1023px) {
	.amg-viz--pipeline { aspect-ratio: 1000 / 330; }
}

@media (max-width: 767px) {
	/* Below ~560px the diagram flips to a vertical stack (see viz.js). */
	.amg-viz--pipeline { aspect-ratio: 3 / 4; }
}

/* --------------------------------------------------------------------------
   12. INDUSTRY / TECH GRIDS
   -------------------------------------------------------------------------- */

.amg-tech-group__title {
	font-size: var(--fs-h4);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--amg-border);
}
.amg-tech-group__list { margin-top: 1.25rem; display: grid; gap: 0.6rem; }
.amg-tech-group__list li {
	color: var(--amg-muted);
	font-size: var(--fs-small);
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
}
.amg-tech-group__list li::before {
	content: "";
	width: 4px;
	height: 4px;
	background: var(--amg-accent);
	flex: none;
	transform: rotate(45deg);
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
   13. CONTACT
   -------------------------------------------------------------------------- */

.amg-form { display: grid; gap: 1.35rem; }
.amg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }

.amg-field { display: grid; gap: 0.55rem; }
.amg-field label {
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--amg-dim);
}
.amg-field input,
.amg-field select,
.amg-field textarea {
	width: 100%;
	padding: 0.95rem 1.05rem;
	background: var(--amg-surface);
	border: 1px solid var(--amg-border);
	border-radius: var(--amg-radius);
	color: var(--amg-text);
	font-size: var(--fs-small);
	transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.amg-field textarea { min-height: 150px; resize: vertical; }
.amg-field input:focus,
.amg-field select:focus,
.amg-field textarea:focus {
	outline: none;
	border-color: var(--amg-accent);
	background: var(--amg-surface-2);
}
.amg-field input::placeholder,
.amg-field textarea::placeholder { color: var(--amg-dim); }
.amg-field select { appearance: none; cursor: pointer; }
.amg-field--select { position: relative; }
.amg-field--select::after {
	content: "";
	position: absolute;
	right: 1.05rem;
	bottom: 1.25rem;
	width: 7px;
	height: 7px;
	border-right: 1px solid var(--amg-muted);
	border-bottom: 1px solid var(--amg-muted);
	transform: rotate(45deg);
	pointer-events: none;
}
.amg-field select option { background: var(--amg-surface-2); color: var(--amg-text); }

.amg-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.amg-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--amg-radius);
	border: 1px solid var(--amg-border);
	font-size: var(--fs-small);
	background: var(--amg-surface);
}
.amg-notice--sent { border-color: var(--amg-accent); color: var(--amg-accent-soft); }
.amg-notice--error,
.amg-notice--invalid { border-color: rgba(255, 120, 120, 0.4); color: #ffb4b4; }

.amg-contact-line {
	display: grid;
	gap: 0.4rem;
	padding-block: 1.35rem;
	border-bottom: 1px solid var(--amg-border);
}
.amg-contact-line__label {
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--amg-accent);
}
.amg-contact-line__body { color: var(--amg-muted); font-size: var(--fs-small); }

/* Placeholders for details the client has not supplied. Visibly unfinished on
   purpose — an invented phone number would be far worse than an obvious gap. */
.amg-placeholder {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border: 1px dashed rgba(255, 255, 255, 0.25);
	border-radius: 2px;
	font-family: var(--ff-mono);
	font-size: 0.74rem;
	color: var(--amg-dim);
	cursor: help;
}

/* --------------------------------------------------------------------------
   14. CTA BLOCK
   -------------------------------------------------------------------------- */

.amg-cta {
	position: relative;
	text-align: center;
	padding-block: clamp(5rem, 12vw, 9.5rem);
	border-top: 1px solid var(--amg-hairline);
	overflow: hidden;
}
.amg-cta .amg-heading { margin-inline: auto; }
.amg-cta .amg-lead { margin: 1.9rem auto 0; text-align: center; }
.amg-cta .amg-btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */

.amg-footer {
	position: relative;
	z-index: 2;
	border-top: 1px solid var(--amg-border);
	padding-top: clamp(3.5rem, 7vw, 6rem);
	background: var(--amg-bg);
}
.amg-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}
.amg-footer__tagline {
	margin-top: 1.4rem;
	font-size: var(--fs-h4);
	font-weight: 500;
	letter-spacing: -0.01em;
	max-width: 22ch;
}
.amg-footer__desc {
	margin-top: 1.2rem;
	color: var(--amg-muted);
	font-size: var(--fs-small);
	max-width: 42ch;
	line-height: 1.75;
}
.amg-footer__col-title {
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--amg-dim);
	margin-bottom: 1.4rem;
}
.amg-footer__list { display: grid; gap: 0.75rem; }
.amg-footer__list a,
.amg-footer__list li {
	font-size: var(--fs-small);
	color: var(--amg-muted);
	transition: color var(--dur-fast) var(--ease);
}
.amg-footer__list a:hover { color: var(--amg-text); }

.amg-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.85rem;
	border-top: 1px solid var(--amg-border);
	font-size: var(--fs-small);
	color: var(--amg-dim);
}
.amg-footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.amg-footer__legal a:hover { color: var(--amg-text); }

/* --------------------------------------------------------------------------
   16. MOTION
   -------------------------------------------------------------------------- */

[data-reveal] {
	transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
	transition-delay: calc(var(--i, 0) * 75ms);
}
/*
 * Scoped to .js for the same reason as the headings above: without scripting
 * there is nothing to add .is-visible, so an unscoped rule would leave most of
 * the page permanently invisible to anyone browsing with JS off.
 */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(26px);
}
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

[data-reveal="fade"] { transform: none; }

/* Custom cursor — desktop, fine-pointer only. */
.amg-cursor {
	position: fixed;
	top: 0; left: 0;
	z-index: 9999;
	pointer-events: none;
	border-radius: 50%;
	mix-blend-mode: difference;
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}
.amg-cursor--dot { width: 6px; height: 6px; background: #fff; }
.amg-cursor--ring {
	width: 34px; height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	transition: opacity 0.3s var(--ease), width 0.4s var(--ease), height 0.4s var(--ease),
		border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.cursor-ready .amg-cursor { opacity: 1; }
.cursor-hover .amg-cursor--ring {
	width: 58px; height: 58px;
	border-color: var(--amg-accent);
	background: rgba(201, 164, 92, 0.07);
}

@media (pointer: coarse), (max-width: 1023px) {
	.amg-cursor { display: none; }
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */

/* Laptop */
@media (max-width: 1279px) {
	.amg-header__cta .amg-btn { padding: 0.7rem 1rem; }
	.amg-logo__img { height: 40px; }
	.amg-nav__list,
	.amg-nav ul { gap: 1.1rem; }
	.amg-nav a { font-size: 0.74rem; }
}

/* Tablet and below — the desktop nav is swapped for the fullscreen overlay. */
@media (max-width: 1023px) {
	.amg-nav,
	.amg-header__cta .amg-btn { display: none; }
	.amg-burger { display: block; }

	.amg-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.amg-grid--3 { grid-template-columns: repeat(2, 1fr); }

	.amg-split { grid-template-columns: 1fr; gap: 2.25rem; }
	.amg-split--sticky > :first-child { position: static; }

	.amg-service-card { grid-template-columns: 3.5rem minmax(0, 1fr); }
	.amg-service-card__body { grid-column: 2; max-width: none; }
	.amg-service-card:hover .amg-service-card__title { transform: none; }

	.amg-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.amg-hero__scrim {
		background:
			linear-gradient(0deg, var(--amg-bg) 6%, rgba(5, 5, 5, 0.76) 48%, rgba(5, 5, 5, 0.52) 100%);
	}
}

/* Mobile — a rebuilt composition, not a scaled desktop layout. */
@media (max-width: 767px) {
	:root {
		--amg-section-y: clamp(3.75rem, 12vw, 5.5rem);
		--fs-display: clamp(2.55rem, 12.5vw, 4rem);
	}

	.amg-grid--2,
	.amg-grid--3,
	.amg-grid--4 { grid-template-columns: 1fr; }

	.amg-hero { min-height: auto; padding-block: 8.5rem 4.5rem; }
	.amg-hero__scroll { display: none; }
	.amg-hero__fallback { width: 90vw; right: -20%; opacity: 0.75; }

	.amg-point { grid-template-columns: 1fr; gap: 0.5rem; }
	.amg-point__num { padding-top: 0; }

	.amg-service-card { grid-template-columns: 1fr; gap: 0.65rem; }
	.amg-service-card__num { padding-top: 0; }
	.amg-service-card__body { grid-column: 1; }

	.amg-form__row { grid-template-columns: 1fr; }

	.amg-footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
	.amg-footer__bottom { flex-direction: column; align-items: flex-start; }

	.amg-btn { width: 100%; justify-content: space-between; padding-block: 1.1rem; }
	.amg-btn-row { flex-direction: column; }

	/* Glows are the most expensive paint on the page; shrink them on mobile. */
	.amg-glow { filter: blur(60px); opacity: 0.4; }
}

/* --------------------------------------------------------------------------
   18. REDUCED MOTION — full parity, zero movement.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.js [data-reveal],
	[data-reveal] { opacity: 1; transform: none; }
	.js .amg-heading__inner,
	.amg-heading__inner { transform: none; }
	.amg-cursor { display: none; }
	.amg-hero__scroll-line::after { animation: none; }
}

/* --------------------------------------------------------------------------
   19. BRAND LOCKUP — footer and small screens
   -------------------------------------------------------------------------- */

.amg-footer .amg-logo__img { height: 58px; }

.amg-footer__tagline {
	font-family: var(--ff-display);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

@media (max-width: 767px) {
	.amg-logo__img,
	.is-scrolled .amg-logo__img { height: 34px; }
	.amg-footer .amg-logo__img { height: 46px; }
}


/* --------------------------------------------------------------------------
   20. PRODUCT MEDIA
   -------------------------------------------------------------------------- */

.amg-media {
	position: relative;
	border: 1px solid var(--amg-border);
	border-radius: var(--amg-radius);
	overflow: hidden;
	background: var(--amg-surface);
}
.amg-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.amg-media--tall { aspect-ratio: 4 / 5; }
.amg-media--wide { aspect-ratio: 16 / 10; }

.amg-media__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.5rem 1.35rem 1.1rem;
	background: linear-gradient(0deg, rgba(5, 5, 5, 0.92) 12%, transparent 100%);
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--amg-accent-soft);
}

/* Spec strip — a product fact, not a marketing claim. */
.amg-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border-top: 1px solid var(--amg-border);
}
.amg-spec {
	padding: 1.6rem 0 1.4rem;
	border-bottom: 1px solid var(--amg-border);
	padding-right: 1.5rem;
}
.amg-spec__value {
	font-family: var(--ff-display);
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	background: var(--amg-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.amg-spec__label {
	margin-top: 0.7rem;
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--amg-dim);
}

/* --------------------------------------------------------------------------
   21. WHATSAPP ACTION
   -------------------------------------------------------------------------- */

/*
 * Kept in the brand palette rather than WhatsApp green — the guidelines treat
 * off-palette colour as a violation, and a gold-on-obsidian pill still reads
 * instantly because the glyph carries the recognition.
 */
.amg-whatsapp {
	position: fixed;
	right: clamp(1rem, 2.5vw, 2rem);
	bottom: clamp(1rem, 2.5vw, 2rem);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	height: 54px;
	padding: 0 1.05rem;
	border: 1px solid var(--amg-border-strong);
	border-radius: 999px;
	background: rgba(21, 21, 21, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: var(--amg-accent);
	box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.9);
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
		transform 0.5s var(--ease), background-color var(--dur-fast) var(--ease);
}
.amg-whatsapp:hover {
	border-color: var(--amg-accent);
	color: var(--amg-accent-soft);
	background: rgba(28, 28, 28, 0.96);
	transform: translateY(-2px);
}

.amg-whatsapp__icon { display: inline-flex; flex: none; }

.amg-whatsapp__label {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--amg-text);
}

/* Collapse to a circle on small screens so it never covers content. */
@media (max-width: 767px) {
	.amg-whatsapp {
		height: 50px;
		width: 50px;
		padding: 0;
		justify-content: center;
		gap: 0;
	}
	.amg-whatsapp__label {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}
}

/* The fullscreen mobile menu sits above it. */
.is-nav-open .amg-whatsapp { opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------------------
   22. LEADERSHIP
   -------------------------------------------------------------------------- */

.amg-leadership { align-items: center; }

.amg-portrait {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 460px;
	border: 1px solid var(--amg-border);
	border-radius: var(--amg-radius);
	overflow: hidden;
	background: var(--amg-surface);
}
.amg-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	display: block;
}
/* A champagne hairline along the top edge ties the plate to the palette
   without tinting the face, which duotoning a portrait would. */
.amg-portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-top: 1px solid rgba(201, 164, 92, 0.45);
	background: linear-gradient(0deg, rgba(5, 5, 5, 0.5) 0%, transparent 34%);
}

.amg-portrait--empty {
	display: grid;
	place-items: center;
	padding: 2rem;
	text-align: center;
	border-style: dashed;
	border-color: rgba(255, 255, 255, 0.22);
}
.amg-portrait--empty::after { display: none; }

.amg-leader__role {
	margin-top: 1.1rem;
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--amg-accent);
}

@media (max-width: 1023px) {
	.amg-portrait { max-width: 380px; }
}