/* Synedica. One family, one accent, no rounded corners, no ornament. */

@font-face {
	font-family: "Archivo";
	src: url("font/archivo-latin.woff2") format("woff2");
	font-weight: 400 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Archivo";
	src: url("font/archivo-latin-ext.woff2") format("woff2");
	font-weight: 400 900;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ------------------------------------------------------------ */
/* Committed to a single light palette, on purpose.

   A laboratory supply site is read by someone deciding whether to trust the
   material in front of them. A dark ground reads as consumer tech in that
   context, not as a bench, so there is no dark variant here and none is
   coming. Every colour is painted explicitly, so the page holds its own
   appearance whatever ground it is placed on.

   The neutrals are COLD. That is what does the clinical work and what keeps
   this away from the warm-paper look. The brass is the only warm value on the
   page, and it appears in one place, where it carries meaning. */

:root {
	--bg: #fcfcfd;
	--panel: #ffffff;
	--ink: #14161a;
	--ink-soft: #5b6270;
	--line: #e0e3e9;
	--line-strong: #14161a;

	/* Brass, not yellow. The brand is named Gold, so the accent is fixed by
	   the brief. The job here is keeping it dark enough to read as metal
	   rather than as a highlighter: 4.9:1 on the page ground. */
	--accent: #8a6a12;
	--accent-flat: #8a6a12;

	/* One radius for the whole site, and it is zero. Nothing here is soft. */
	--r: 0;

	--wrap: 74rem;
	--rail: 13rem;
	--gap: clamp(1.5rem, 4vw, 4rem);
	--band: clamp(3.5rem, 8vw, 7rem);

	--fam: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

/* --- Base -------------------------------------------------------------- */

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

html {
	background: var(--bg);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--fam);
	font-size: 1rem;
	line-height: 1.6;
	/* Figures line up in columns wherever a number sits next to another. */
	font-variant-numeric: tabular-nums lining-nums;
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

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

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

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* The signature structure: the heading sits in a narrow left column and the
   content runs in the wide one. Not a decorative label column, the real
   heading lives there. Collapses to one column below 860px. */
.rail {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem var(--gap);
}

.rail > h1,
.rail > h2 {
	margin: 0 0 .25rem;
}

@media (min-width: 860px) {
	.rail {
		grid-template-columns: var(--rail) minmax(0, 1fr);
		gap: 0 var(--gap);
	}
	.rail > h1,
	.rail > h2 { margin: 0; }

	/* A coluna do titulo abre quando ele e um h1: uma palavra de 44px nao
	   cabe em 13rem sem quebrar num lugar feio. */
	.rail:has(> h1) { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
}

.band { padding-block: var(--band); }
.band + .band { border-top: 1px solid var(--line); }

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

h1, h2, h3 {
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-wrap: balance;
	margin: 0;
}

h1 { font-size: clamp(2.3rem, 4.6vw, 3.65rem); }
.rail > h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
h3 { font-size: 1.05rem; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); }
.soft { color: var(--ink-soft); }

.small {
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--ink-soft);
}

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

.top {
	border-bottom: 1px solid var(--line);
	background: var(--bg);
}

.top-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	min-height: 86px;

	/* Wraps only on narrow screens. The one-line rule is a desktop rule, and
	   a header that overflows on a phone is worse than one that takes two
	   rows there. */
	flex-wrap: wrap;
	padding-block: .5rem;
}

.mark {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 900;
	font-size: 1.0625rem;
	letter-spacing: -0.03em;
	text-decoration: none;
	white-space: nowrap;
}

.mark img {
	height: 2.5rem;
	width: auto;
	flex: none;
}

.mark span { font-weight: 500; color: var(--ink-soft); }

.nav {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 2.4vw, 1.9rem);
	font-size: .875rem;
	font-weight: 600;
}

@media (max-width: 460px) {
	.mark span { display: none; }
	.nav { font-size: .8125rem; }
}

.nav a {
	text-decoration: none;
	padding-block: .5rem;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.nav a[aria-current="page"] { border-bottom-color: var(--line-strong); }

@media (hover: hover) and (pointer: fine) {
	.nav a:hover { border-bottom-color: var(--accent-flat); }
}

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

.btn {
	display: inline-block;
	padding: .85rem 1.6rem;
	background: var(--accent);
	color: #ffffff;
	font-weight: 800;
	font-size: .875rem;
	letter-spacing: .02em;
	text-decoration: none;
	border: 1px solid var(--accent);
	border-radius: var(--r);
	white-space: nowrap;
	transition: transform .12s ease, background-color .12s ease;
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line-strong);
}

@media (hover: hover) and (pointer: fine) {
	.btn:hover { transform: translateY(-1px); }
}

.btn:active { transform: translateY(1px); }

/* --- Hero ------------------------------------------------------------- */
/* The one dark band on the site. Full bleed, text sitting on the image, with
   a scrim underneath the words so contrast never depends on which part of the
   picture happens to be behind them. */

.hero {
	position: relative;
	background: #0a1c3a url("img/q8fx-2000.jpg") center / cover no-repeat;
	padding-block: clamp(4rem, 11vw, 8rem);
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(4,14,32,.92) 0%, rgba(4,14,32,.78) 42%, rgba(4,14,32,.35) 100%);
}

.hero-in { position: relative; }

.hero h1 { color: #ffffff; max-width: 15ch; }
.hero .lede { color: #c3d3ea; margin-top: 1.5rem; max-width: 46ch; }
.hero .acts { margin-top: 2.25rem; display: flex; gap: .75rem; flex-wrap: wrap; }

/* On the dark band the outline button has to invert: the ink-coloured border
   of the light theme is invisible here. */
.btn-claro {
	background: transparent;
	color: #ffffff;
	border-color: rgba(255,255,255,.55);
}

@media (hover: hover) and (pointer: fine) {
	.btn-claro:hover { border-color: #ffffff; background: rgba(255,255,255,.08); }
}

.hero :focus-visible { outline-color: #ffffff; }

/* --- Facts strip ------------------------------------------------------- */
/* Hairline-separated columns, not cards. Elevation would be a lie here:
   these three things are peers. */

.facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid var(--line);
}

.facts > div {
	padding-block: 1.6rem;
	border-bottom: 1px solid var(--line);
}

@media (min-width: 760px) {
	.facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		border-bottom: 1px solid var(--line);
	}
	.facts > div {
		border-bottom: 0;
		padding: 1.9rem var(--gap) 1.9rem 0;
	}
	.facts > div + div {
		border-left: 1px solid var(--line);
		padding-left: var(--gap);
	}
}

.facts h3 { margin-bottom: .5rem; }
.facts p { font-size: .9375rem; color: var(--ink-soft); }

/* --- Questions --------------------------------------------------------- */

.qa { margin: 0; }
.qa > div + div { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.qa dt { font-weight: 700; margin-bottom: .4rem; }
.qa dd { margin: 0; color: var(--ink-soft); max-width: 66ch; }

/* --- Legal ------------------------------------------------------------- */
/* Deliberately plain and always visible. This is the part of the site that
   has to be read, so it gets contrast, not styling. */

.legal {
	border: 1px solid var(--line-strong);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.legal h2 { margin-bottom: .75rem; }
.legal p { font-size: .9375rem; }

.doc h2 { margin-top: 2.75rem; margin-bottom: .85rem; }
.doc h2:first-child { margin-top: 0; }
.doc ul { max-width: 66ch; padding-left: 1.1rem; color: var(--ink-soft); }
.doc li { margin-bottom: .5rem; }
.doc a { color: var(--accent-flat); }

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

.foot {
	border-top: 1px solid var(--line);
	padding-block: 2.5rem 3rem;
	font-size: .875rem;
}

.foot-in {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	align-items: baseline;
}

.foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot a { text-decoration: none; border-bottom: 1px solid transparent; padding-block: .35rem; }

@media (hover: hover) and (pointer: fine) {
	.foot a:hover { border-bottom-color: var(--line-strong); }
}

.foot-note {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	max-width: 78ch;
}

/* --- Motion ------------------------------------------------------------ */
/* There is no scroll animation on this site by design: nothing here needs to
   be revealed, and a page that hides its own content until it is scrolled to
   fails whenever the observer does. Only pointer feedback moves. */

/* One authored moment, on load, and nothing else moves on this site.
   It animates FROM a hidden state into the element's own resting style, so
   if the animation never runs the content is simply there. That is the whole
   reason it is a load animation and not a scroll one: a reveal that depends
   on an observer is a reveal that can fail to arrive, and then the page has
   hidden its own content for good. */
@media (prefers-reduced-motion: no-preference) {
	.hero-in > * { animation: gp-settle .65s cubic-bezier(.16, 1, .3, 1) backwards; }
	.hero-in > * + * { animation-delay: .1s; }
}

@keyframes gp-settle {
	from { opacity: 0; transform: translateY(12px); }
}

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