/* ==========================================================================
   base.css — reset, typography, layout primitives
   --------------------------------------------------------------------------
   Replaces bootstrap.min.css (65 KB) with the ~200 lines this design actually
   uses. The grid is the one piece that had to be reimplemented rather than
   reused: the template's markup is written entirely in `col-12 col-lg-7`
   style classes, so keeping that vocabulary means the markup can stay close
   to the original and the parity screenshots line up.

   Deliberately NOT supported: Bootstrap's full utility set, flex/grid
   helpers beyond what the theme's own templates use, components (modal,
   tooltip, accordion). Anything missing here is something the rebuild does
   not need — if a template file references a class that does not exist, that
   is a bug to fix, not a class to add.
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor jumps must clear the fixed header; without this, clicking
	   "Get in touch" lands with the heading hidden behind the bar. */
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* The template sets `overflow-x: hidden` on body to hide slider overflow.
	   That breaks `position: sticky` in some engines, so the overflow is
	   clipped on a wrapper instead (see .site-clip in components.css). */
}

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

/* Intrinsic ratio boxes: the template ships 1:1, 16:10, 1:1.27 and 1.6:1
   imagery. Declaring the ratio in CSS (not just width/height attributes)
   keeps the layout stable while the image decodes. */
img[width][height] {
	aspect-ratio: attr(width) / attr(height);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	font-weight: 600;
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/* The template's eyebrow labels: small, uppercase, wide tracking. */
h6 {
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
}

p {
	margin: 0 0 1.1em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--brand);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--brand-ink);
}

ul,
ol {
	margin: 0 0 1.1em;
	padding-left: 1.25em;
}

blockquote {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.15em;
	line-height: 1.6;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2rem 0;
}

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

/* keyboard focus, visible and consistent. `:focus-visible` only, so clicking a
   button does not leave a ring behind. */
:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---- Layout primitives ------------------------------------------------- */

/* The template's `.container` is 30px of padding and no max-width cap on the
   inner row; a max-width keeps long Chinese lines readable (CJK has no
   spaces, so an unconstrained line becomes a 200-character slab). */
.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.wrap--wide {
	max-width: var(--wrap-wide);
}

/* Vertical rhythm. Same names as the template's .section* classes so the
   parity machine can compare them directly. */
.section { padding: var(--s) 0; }
.section-xs { padding: var(--s-xs) 0; }
.section-sm { padding: var(--s-xs) 0; }
.section-md { padding: var(--s-md) 0; }
.section-lg { padding: var(--s-lg) 0; }
.section-xl { padding: var(--s-xl) 0; }
.section-2xl { padding: var(--s-2xl) 0; }

.section--tight-top { padding-top: 0; }
.section--line { border-top: 1px solid var(--line); }

/* ---- Grid --------------------------------------------------------------
   A 12-column grid with the same class vocabulary the template's markup
   uses (`col-12`, `col-lg-7`, `g-4`, `order-lg-2`). Written as a plain CSS
   grid: no container queries, no subgrid, nothing that fails on a 2020
   browser, because the whole point of dropping Bootstrap was to stop
   shipping 65 KB of features we do not use. */
.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gap);
	align-items: start;
}

.grid--center { align-items: center; }

/* Mobile-first: every `col-*` spans full width until a breakpoint raises it. */
[class^="col-"],
[class*=" col-"] { grid-column: span 12; min-width: 0; }

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }

.g-0 { gap: 0; }
.g-1 { gap: 0.5rem; }
.g-2 { gap: 0.75rem; }
.g-3 { gap: 1rem; }
.g-4 { gap: 1.5rem; }
.g-5 { gap: 3rem; }

/* The template's breakpoints, exactly (430 / 576 / 768 / 992 / 1200). Getting
   these wrong is the classic way a "pixel perfect" rebuild drifts at one
   viewport and nobody notices until a tablet review. */
@media (min-width: 576px) {
	.col-sm-2 { grid-column: span 2; }
	.col-sm-4 { grid-column: span 4; }
	.col-sm-6 { grid-column: span 6; }
	.col-sm-8 { grid-column: span 8; }
	.col-sm-10 { grid-column: span 10; }
	.grid-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
	.col-md-3 { grid-column: span 3; }
	.col-md-4 { grid-column: span 4; }
	.col-md-6 { grid-column: span 6; }
	.col-md-8 { grid-column: span 8; }
	.col-md-10 { grid-column: span 10; }
	.text-md-center { text-align: center; }
	.text-md-start { text-align: left; }
	.text-md-end { text-align: right; }
}

@media (min-width: 992px) {
	.col-lg-3 { grid-column: span 3; }
	.col-lg-4 { grid-column: span 4; }
	.col-lg-5 { grid-column: span 5; }
	.col-lg-6 { grid-column: span 6; }
	.col-lg-7 { grid-column: span 7; }
	.col-lg-8 { grid-column: span 8; }
	.col-lg-9 { grid-column: span 9; }
	.order-lg-1 { order: 1; }
	.order-lg-2 { order: 2; }
}

@media (min-width: 1200px) {
	.col-xl-6 { grid-column: span 6; }
}

/* ---- Utilities actually used by the templates ------------------------- */
.text-center { text-align: center; }
.text-start { text-align: left; }
.text-end { text-align: right; }
.mx-auto { margin-left: auto; margin-right: auto; }
.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.w-100 { width: 100%; }
.d-none { display: none; }
.d-block { display: block; }
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link. The template has none; keyboard users currently tab through
   six dropdown parents before reaching content. */
.skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--ink);
	color: #fff;
	border-radius: var(--r-sm);
	transition: top var(--t-fast) var(--ease-out);
}

.skip-link:focus {
	top: 1rem;
	color: #fff;
}

/* Print: the template prints the fixed header over the first page and drops
   the content behind it. Strip the chrome. */
@media print {
	.header,
	.scroll-top,
	.page-progress,
	.marquee,
	.cursor,
	.cta-band__play,
	.newsletter {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
	}

	.section,
	.section-lg,
	.section-xl,
	.section-2xl {
		padding: 12pt 0;
	}

	a::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
	}
}