/*
 * Breakpoint theme: brand layer (Cinematic front page, Oct 2026).
 *
 * Hand-written, loaded after main.css and layout.css. Ported from the
 * Claude Design UI kit `ui_kits/website/index.html` (Cinematic proposal),
 * which follows guidelines/brand-guide.md in the Breakpoint design system:
 * Oswald 700 caps headlines, Ocean eyebrows with a 48x4 cyan rule, clipped
 * corner buttons, Abyss overlays, and full-bleed layer tiles.
 *
 * Breakpoints match the design: the hero and two-column sections stack
 * below 1000px, phones below 640px. The header (nav.css) collapses below
 * 1100px.
 */

@font-face {
	font-family: "Oswald";
	src: url("../fonts/oswald/Oswald-Bold-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--bp-abyss: #02131b;
	--bp-deep: #022c3f;
	--bp-mist: #cdd6dc;
	--bp-ocean: #0076a9;
	--bp-cyan: #27bbfa;
	--bp-display: "Oswald", "DIN Next LT Pro", Arial, sans-serif;
	--bp-clip: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

/* ----- Type ----- */

.bp-eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--bp-ocean);
}

.bp-dark .bp-eyebrow {
	color: var(--bp-mist);
}

.bp-rule {
	display: block;
	width: 48px;
	height: 4px;
	margin: 16px 0 0;
	background: var(--bp-cyan);
}

.bp-center .bp-rule,
.text-center .bp-rule {
	margin-left: auto;
	margin-right: auto;
}

.bp-display {
	font-family: var(--bp-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: 1.02;
}

.bp-h2 {
	margin: 16px 0 0;
	font-size: clamp(34px, 4.2vw, 48px);
	color: var(--foreground);
}

.bp-lead {
	margin: 20px 0 0;
	font-size: 18px;
	line-height: 1.65;
	color: rgba(23, 23, 23, 0.6);
}

/* ----- Buttons ----- */

.bp-btn,
.bp-btn-outline {
	display: inline-block;
	white-space: nowrap;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	clip-path: var(--bp-clip);
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.bp-btn {
	padding: 14px 28px;
	background: var(--bp-ocean);
	color: #fff;
}

.bp-btn:hover {
	background: rgba(0, 118, 169, 0.9);
	color: #fff;
}

.bp-btn-outline {
	padding: 12px 26px;
	border: 2px solid #fff;
	color: #fff;
}

.bp-btn-outline:hover {
	border-color: var(--bp-cyan);
	color: var(--bp-cyan);
}

/* ----- Store badges ----- */

.bp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.bp-badges img {
	display: block;
	height: 52px;
	width: auto;
}

/* ----- Header -----
   The site header moved to assets/css/nav.css (Oct 2026 navigation). */

/* ----- Cinematic hero ----- */

.bp-hero {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: stretch;
	min-height: min(760px, 100vh);
	background: var(--bp-abyss) url("../img/hero-golden-run.jpg") center 62% / cover no-repeat;
	color: #fff;
}

.bp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(2, 19, 27, 0.55) 0%, rgba(2, 19, 27, 0.3) 38%, rgba(2, 19, 27, 0) 62%),
		linear-gradient(to bottom, rgba(2, 19, 27, 0.6) 0%, rgba(2, 19, 27, 0.12) 30%, rgba(2, 19, 27, 0.12) 55%, rgba(2, 19, 27, 0.55) 80%, #02131b 100%);
}

.bp-hero > .bp-container {
	position: relative;
	padding-top: 140px;
	padding-bottom: 72px;
}

.bp-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: end;
	gap: 40px;
	width: 100%;
	height: 100%;
}

.bp-hero-copy {
	display: grid;
	grid-template-rows: 3fr auto 1fr auto;
	align-self: stretch;
}

.bp-hero-copy h1 {
	grid-row: 2;
	margin: 0;
	font-size: clamp(28px, 4.6vw, 68px);
	color: #fff;
	text-shadow: 0 2px 24px rgba(2, 19, 27, 0.55), 0 1px 3px rgba(2, 19, 27, 0.6);
}

/* Each line stays on one line; main.js shrinks the font when the widest
   line would overflow the column. */
.bp-hero-copy h1 .ln {
	display: block;
	white-space: nowrap;
}

.bp-hero-copy h1 em {
	font-style: normal;
	color: inherit;
}

.bp-hero-copy .bp-badges {
	grid-row: 4;
	margin-top: 32px;
}

.bp-hero-phone {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-self: start;
}

/* CSS iPhone frame around the Fish Intel screenshot. */
.bp-device {
	position: relative;
	width: min(255px, 100%);
	padding: 11px;
	border-radius: 54px;
	background: #0a0d10;
	box-shadow: inset 0 0 0 1.5px #3a4046, 0 0 0 2px #1b1f23, 0 30px 60px rgba(0, 0, 0, 0.55);
}

.bp-device-screen {
	position: relative;
	overflow: hidden;
	border-radius: 43px;
	background: var(--bp-abyss);
}

.bp-device-screen img {
	display: block;
	width: 100%;
	height: auto;
}

.bp-device-island {
	position: absolute;
	top: 8px;
	left: 50%;
	z-index: 2;
	width: 30%;
	height: 24px;
	border-radius: 13px;
	background: #000;
	transform: translateX(-50%);
}

@media (max-width: 1000px) {
	.bp-hero-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bp-hero-phone {
		justify-content: center;
	}

	.bp-device {
		width: min(220px, 60%);
	}
}

@media (max-width: 640px) {
	.bp-hero {
		min-height: auto;
	}

	.bp-hero > .bp-container {
		padding-top: 104px;
		padding-bottom: 40px;
	}

	.bp-hero-grid {
		gap: 28px;
	}

	.bp-hero-copy {
		grid-template-rows: auto auto auto auto;
		padding-top: 24px;
	}

	.bp-badges img {
		height: 44px;
	}
}

/* ----- Sections ----- */

.bp-section {
	padding: 112px 0;
}

@media (max-width: 1000px) {
	.bp-section {
		padding: 80px 0;
	}
}

.bp-light {
	background: #fff;
}

/* Features: Abyss with the navy contour texture. */
.bp-dark {
	position: relative;
	z-index: 1;
	background: var(--bp-abyss) url("../img/features-contours.jpg") center bottom / cover no-repeat;
	color: #fff;
}

.bp-dark .bp-h2 {
	color: #fff;
}

.bp-dark .bp-lead {
	color: var(--bp-mist);
}

.bp-features {
	padding-bottom: 0;
}

.bp-features .bp-center {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.bp-features .bp-h2 .hl {
	display: block;
}

.bp-features .bp-h2 .hl + .hl {
	margin-top: 0.35em;
	font-size: 0.62em;
	color: var(--bp-mist);
}

/* ----- Layer tiles + explainer (wall to wall) -----
 *
 * Desktop (1001px and up): a 4x4 grid. Rows 1-3 are the 12 layer tiles,
 * row 4 is four photos (.bp-tile-photo). Opening a tile places a 2x2
 * explainer (.bp-xp) beside it; the four tiles it covers slide into row 4
 * over the photos (assets/js/layer-grid.js). Mobile (1000px and below): two
 * columns, no photos, and the explainer opens inline under the tile's row.
 */

.bp-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 64px;
}

.bp-tile {
	position: relative;
	z-index: 1;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--bp-abyss);
	font: inherit;
	text-align: center;
	color: #fff;
	cursor: pointer;
}

.bp-tile:focus-visible {
	outline: 2px solid var(--bp-cyan);
	outline-offset: -2px;
}

.bp-tile-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.bp-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(2, 19, 27, 0.62), rgba(2, 19, 27, 0.18) 70%, rgba(2, 19, 27, 0.1));
	transition: background 0.4s ease;
}

.bp-tile:hover .bp-tile-bg,
.bp-tile:focus-visible .bp-tile-bg {
	transform: scale(1.07);
}

.bp-tile:hover::after,
.bp-tile:focus-visible::after {
	background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(2, 19, 27, 0.45), rgba(2, 19, 27, 0) 75%);
}

.bp-tile.is-on::after {
	background: rgba(2, 19, 27, 0.08);
}

.bp-tile-title {
	position: relative;
	isolation: isolate;
	display: block;
	max-width: 92%;
	padding: 0 20px;
	font-family: var(--bp-display);
	font-weight: 700;
	font-size: clamp(17px, 1.55vw, 26px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-shadow: 0 0 2px rgba(2, 19, 27, 0.9), 0 2px 6px rgba(2, 19, 27, 0.85), 0 4px 24px rgba(2, 19, 27, 0.75);
	text-wrap: balance;
}

/* Soft Abyss scrim behind each label so white type reads over busy maps. */
.bp-tile-title::before {
	content: "";
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: -14%;
	right: -14%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(2, 19, 27, 0.78), rgba(2, 19, 27, 0.45) 55%, rgba(2, 19, 27, 0));
}

.bp-tile-title::after {
	content: "";
	display: block;
	width: 0;
	height: 3px;
	margin: 12px auto 0;
	background: var(--bp-cyan);
	transition: width 0.4s ease;
}

.bp-tile:hover .bp-tile-title::after,
.bp-tile:focus-visible .bp-tile-title::after,
.bp-tile.is-on .bp-tile-title::after {
	width: 48px;
}

/* The photo row exists on desktop only; the explainer stays hidden until
   a tile opens it. */
.bp-tile-photo,
.bp-xp {
	display: none;
}

@media (min-width: 1001px) {
	.bp-tile-photo {
		position: relative;
		z-index: 0;
		display: block;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		transition: opacity 0.35s ease;
	}

	.bp-tile-photo img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bp-tile-photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(2, 19, 27, 0.25);
	}

	.bp-tiles.is-open .bp-tile-photo {
		opacity: 0;
	}

	.bp-xp {
		position: relative;
		z-index: 2;
		display: block;
		overflow: hidden;
		background: var(--bp-abyss) url("../img/features-contours.jpg") center / cover no-repeat;
		color: #fff;
		opacity: 0;
		transform: scale(0.97);
		transition: opacity 0.35s ease 0.18s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
	}

	.bp-xp[hidden] {
		display: none;
	}

	.bp-xp.is-shown {
		opacity: 1;
		transform: none;
	}

	.bp-xp::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(2, 19, 27, 0.38);
	}

	.bp-xp-wrap {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow-y: auto;
		padding: clamp(28px, 3.4vw, 56px);
		scrollbar-width: none;
	}

	.bp-xp-wrap::-webkit-scrollbar {
		display: none;
	}
}

.bp-xp-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(2, 19, 27, 0.6);
	color: #fff;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.bp-xp-close:hover,
.bp-xp-close:focus-visible {
	border-color: var(--bp-cyan);
	color: var(--bp-cyan);
}

.bp-xp-body {
	position: relative;
}

.bp-xp-body h3 {
	margin: 0;
	padding-right: 56px;
	font-family: var(--bp-display);
	font-weight: 700;
	font-size: clamp(26px, 2.9vw, 46px);
	line-height: 1.02;
	text-transform: uppercase;
	color: #fff;
}

.bp-xp-rule {
	display: block;
	width: 56px;
	height: 4px;
	margin: clamp(12px, 1.2vw, 18px) 0 clamp(18px, 2vw, 30px);
	background: var(--bp-cyan);
}

.bp-xp-body dl {
	display: grid;
	gap: clamp(14px, 1.5vw, 26px);
	margin: 0;
}

.bp-xp-body dt {
	font-size: clamp(12px, 0.95vw, 15px);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bp-cyan);
}

.bp-xp-body dd {
	max-width: 640px;
	margin: 6px 0 0;
	font-size: clamp(15px, 1.32vw, 22px);
	line-height: 1.42;
	color: #fff;
}

@media (min-width: 1001px) and (max-width: 1180px) {
	.bp-xp-wrap {
		padding: 24px 26px;
	}

	.bp-xp-body h3 {
		font-size: 24px;
	}

	.bp-xp-rule {
		margin: 10px 0 14px;
	}

	.bp-xp-body dl {
		gap: 12px;
	}

	.bp-xp-body dt {
		font-size: 11px;
	}

	.bp-xp-body dd {
		margin-top: 3px;
		font-size: 14px;
		line-height: 1.38;
	}
}

/* Mobile (1000px and below): the panel opens inline as a full-width row
   under the tapped tile; a cyan caret points up at the tile (--cx is set
   to 25% or 75% by layer-grid.js). */
@media (max-width: 1000px) {
	.bp-xp {
		position: relative;
		z-index: 2;
		display: block;
		grid-column: 1 / -1;
		background: var(--bp-abyss) url("../img/features-contours.jpg") center / cover no-repeat;
		color: #fff;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 0.35s ease 0.12s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
	}

	.bp-xp[hidden] {
		display: none;
	}

	.bp-xp.is-shown {
		opacity: 1;
		transform: none;
	}

	.bp-xp::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(2, 19, 27, 0.38);
	}

	.bp-xp::after {
		content: "";
		position: absolute;
		top: -1px;
		left: var(--cx, 25%);
		border: 10px solid transparent;
		border-top-color: var(--bp-cyan);
		border-bottom: 0;
		transform: translateX(-50%);
	}

	.bp-xp-wrap {
		position: relative;
		padding: 30px 22px 32px;
	}

	.bp-xp-close {
		top: 12px;
		right: 12px;
	}

	.bp-xp-body h3 {
		padding-right: 52px;
		font-size: 26px;
	}

	.bp-xp-rule {
		margin: 12px 0 18px;
	}

	.bp-xp-body dl {
		gap: 16px;
	}

	.bp-xp-body dt {
		font-size: 12px;
	}

	.bp-xp-body dd {
		margin-top: 4px;
		font-size: 16px;
		line-height: 1.5;
	}
}

@media (max-width: 1000px) {
	.bp-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.bp-tiles {
		margin-top: 40px;
	}

	.bp-tile {
		aspect-ratio: 1 / 1;
	}

	.bp-tile-title {
		max-width: 100%;
		padding: 0 10px;
		font-size: clamp(15px, 4.4vw, 19px);
	}

	.bp-tile-title::after {
		margin-top: 8px;
	}
}

/* ----- Parallax CTA ----- */

.bp-cta-overlay {
	position: absolute;
	inset: 0;
	background: rgba(2, 19, 27, 0.72);
}

@media (prefers-reduced-motion: reduce) {
	.bp-tile-bg,
	.bp-tile::after,
	.bp-tile-title::after,
	.bp-tile-photo,
	.bp-xp {
		transition: none;
	}
}

/* ----- Odds and ends ----- */

.bp-h2-on-dark {
	margin-top: 0;
	color: #fff;
}

.bp-footer-logo {
	display: block;
	height: 52px;
	width: auto;
}