/* ---- copied from brand/colours/grampus-colours.css — do not edit here ----
 * The media kit is the source of these. Change them there (and in the
 * guide), then paste the block again; build/site.sh fails if it drifts. */
:root {
  --grampus-abyss: #0D2B3E;   /* primary: mark, headings, dark backgrounds */
  --grampus-tide: #1E6B80;    /* accent: rules, labels, links */
  --grampus-seafoam: #7FB3C4; /* mark details on dark; not for text on white */
  --grampus-ink: #15202A;     /* body text */
  --grampus-risso: #56646F;   /* secondary text */
  --grampus-mist: #EDF2F5;    /* table headers, panels */
  --grampus-font-display: "Unbounded", Verdana, sans-serif;
  --grampus-font-text: "Manrope", "Segoe UI", Arial, sans-serif;
}
/* ---- end of the copy ---- */

/* Grampus (Pty) Ltd — the company site.
 *
 * Light, like the brand guide: white paper, Abyss for headings and the one
 * dark band, Tide for links and rules, Mist for panels. Seafoam is only ever
 * on Abyss, never text on white (the guide says so, and it fails contrast). */

:root {
	--paper: #ffffff;
	--panel: var(--grampus-mist);
	--ink: var(--grampus-ink);
	--ink-soft: var(--grampus-risso);
	--head: var(--grampus-abyss);
	--accent: var(--grampus-tide);
	--deep: var(--grampus-abyss);
	--on-deep: #ffffff;
	--on-deep-soft: var(--grampus-seafoam);
	--line: #d6e0e6;

	--gutter: clamp(16px, 5vw, 64px);
	--display: var(--grampus-font-display);
	--body: var(--grampus-font-text);

	/* The waterline from the brand guide's page head, in Tide. */
	--wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='12' viewBox='0 0 160 12'%3E%3Cpath d='M0 6 C20 1 40 1 60 6 S100 11 120 6 S150 2 160 6' fill='none' stroke='%231E6B80' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	--wave-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='12' viewBox='0 0 160 12'%3E%3Cpath d='M0 6 C20 1 40 1 60 6 S100 11 120 6 S150 2 160 6' fill='none' stroke='%237FB3C4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

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

html { background: var(--paper); }
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

/* Titles as the guide sets them: Unbounded SemiBold, capitals, +6%. */
h1, h2, h3 {
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.15;
	color: var(--head);
	margin: 0;
}
h1, h2 { text-transform: uppercase; letter-spacing: 0.06em; }
h1 { font-size: clamp(28px, 5vw, 52px); }
h2 { font-size: clamp(18px, 2.2vw, 22px); }
h3 { font-size: 17px; font-family: var(--body); font-weight: 700; letter-spacing: 0; }
p, ul, ol { margin: 0; }
img { max-width: 100%; height: auto; }
strong { font-weight: 700; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--head); }

a:focus-visible, button:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: 820px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
	left: var(--gutter);
	top: 12px;
	z-index: 10;
	padding: 12px 20px;
	background: var(--deep);
	color: var(--on-deep);
	border-radius: 6px;
}

/* Header ------------------------------------------------------------------ */

.site-head .wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px clamp(16px, 4vw, 40px);
	padding-block: 20px;
}
/* The horizontal lockup never below 140px wide (the guide's minimum). */
.site-head .logo img { display: block; height: 44px; width: auto; min-width: 180px; }
.site-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px clamp(16px, 3vw, 32px);
	margin-left: auto;
	font-weight: 600;
	font-size: 16px;
}
.site-nav a { color: var(--ink); text-decoration: none; white-space: nowrap; padding-block: 10px; }
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; }

/* The waterline under the header, as on every page of the guide. */
.rule { height: 12px; background: var(--wave) repeat-x center / 160px 12px; }

@media (max-width: 599px) {
	.site-nav { margin-left: 0; flex-basis: 100%; }
}

/* Hero: the one dark band ------------------------------------------------- */

.hero { background: var(--deep); color: var(--on-deep); }
.hero .wrap {
	display: grid;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
	padding-block: clamp(48px, 8vw, 104px);
}
@media (min-width: 860px) { .hero .wrap { grid-template-columns: 3fr 1fr; } }
.hero h1 { color: var(--on-deep); }
.hero .lede { color: var(--grampus-mist); max-width: 640px; margin-top: 20px; }
.hero-mark { justify-self: center; width: clamp(140px, 22vw, 240px); }
.hero + .rule { background-image: var(--wave-dark); background-color: var(--deep); }

.eyebrow {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}
.hero .eyebrow { color: var(--on-deep-soft); margin-bottom: 14px; }
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--ink-soft); }
.small { font-size: 15px; color: var(--ink-soft); }

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

.band { padding-block: clamp(40px, 6vw, 80px); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack > h2:not(:first-child) { margin-top: 22px; }

.btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 6px;
	background: var(--deep);
	color: var(--on-deep);
	font-weight: 700;
	text-decoration: none;
}
.btn:hover { background: var(--accent); color: var(--on-deep); }

.facts { display: grid; gap: 4px 24px; grid-template-columns: max-content 1fr; font-size: 17px; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 520px) {
	.facts { grid-template-columns: 1fr; }
	.facts dd { margin-bottom: 10px; }
}

/* Legal pages ------------------------------------------------------------- */

.legal h1 { margin-bottom: 4px; }
.legal ul, .legal ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.legal p, .legal li { max-width: 72ch; }
.legal .note {
	background: var(--panel);
	border-left: 4px solid var(--accent);
	border-radius: 6px;
	padding: 16px 20px;
}
.toc { background: var(--panel); border-radius: 8px; padding: 18px 22px; }
.toc ol { margin-top: 8px; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
thead th { background: var(--panel); color: var(--head); font-weight: 700; }
tbody th { font-weight: 700; width: 32%; }

/* The CopyCub page ------------------------------------------------------- */

/* CopyCub's wordmark on its own navy, the way its site shows it. */
.product {
	display: grid;
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}
@media (min-width: 860px) { .product { grid-template-columns: 2fr 3fr; } }
.product-art {
	background: #1c1f2b; /* CopyCub's page colour (copycub-game/design/tokens.css --cc-page) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(28px, 5vw, 56px);
}
.product-art img { width: min(320px, 100%); }
.product-copy { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.links { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

/* Contact ----------------------------------------------------------------- */

.contact-form { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.contact-form label { font-weight: 700; margin-top: 10px; }
.contact-form input, .contact-form select, .contact-form textarea {
	font: inherit;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--ink-soft);
	border-radius: 6px;
	padding: 12px 14px;
	min-height: 48px;
	width: 100%;
}
.contact-form textarea { resize: vertical; min-height: 180px; }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 1px;
}
#turnstile:not(:empty) { margin-top: 14px; }
.contact-form .btn { margin-top: 10px; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-quiet { background: var(--panel); color: var(--head); border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.btn-quiet:hover { background: var(--line); color: var(--head); }
/* The field only bots fill in, kept off-screen rather than display:none,
   which some of them skip. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice {
	background: var(--panel);
	border-left: 4px solid var(--accent);
	border-radius: 6px;
	padding: 14px 18px;
}
.notice-error { border-left-color: #b3261e; color: #8c1d18; }

/* Footer ------------------------------------------------------------------ */

.site-foot { margin-top: auto; background: var(--panel); }
.site-foot .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	align-items: center;
	padding-block: 28px;
	font-size: 15px;
	color: var(--ink-soft);
}
.site-foot a { color: var(--ink); text-decoration: none; }
.site-foot a:hover { color: var(--accent); text-decoration: underline; }
.site-foot a[aria-current="page"] { color: var(--accent); }
.site-foot .grow { flex-grow: 1; }
.ver { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}