/*
 * Unit17 design system — tokens and shared components.
 *
 * Loaded before every other u17-*.css file. Page and template stylesheets
 * consume these tokens and components; they should not define their own
 * colours, type sizes or buttons. See DESIGN-SYSTEM.md in the theme root.
 */

/* Moved here from u17-home.css (2026-09-27) so every page can use it.
   Until Kanit arrives, text is set in Arial scaled to Kanit's measurements, so
   lines break in the same places and nothing moves when the font swaps in.
   Figures measured from Kanit v17 (latin) against Arial with fontTools:
   size = Kanit's average glyph width ÷ Arial's — uppercase text for 500–700
   (headings, labels and buttons are uppercase here), mixed case for 300–400
   (body copy); ascent 1.100 and descent 0.395 em (Kanit's own) ÷ size. */
@font-face {
	font-family: "Kanit Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo");
	font-weight: 300;
	size-adjust: 98.21%;
	ascent-override: 112.01%;
	descent-override: 40.22%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Kanit Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo");
	font-weight: 400;
	size-adjust: 99.59%;
	ascent-override: 110.45%;
	descent-override: 39.66%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Kanit Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo");
	font-weight: 500;
	size-adjust: 88.94%;
	ascent-override: 123.68%;
	descent-override: 44.41%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Kanit Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold");
	font-weight: 600;
	size-adjust: 88.57%;
	ascent-override: 124.20%;
	descent-override: 44.60%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Kanit Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold");
	font-weight: 700;
	size-adjust: 89.14%;
	ascent-override: 123.40%;
	descent-override: 44.31%;
	line-gap-override: 0%;
}

/* u17_perf_b1: every page uses the metric-matched fallback while Kanit loads (the home page already did),
   so category/make headings and intros keep their size and the grid below does not move. */
body.u17-perf-b1 {
	--u17-font: "Kanit", "Kanit Fallback", sans-serif;
}

/* ============================================================ tokens */
:root {
	/* ---- brand ---- */
	--u17-teal: #57c5bb;          /* fills, rules, accents, text on dark */
	--u17-teal-hover: #4bb3a9;
	--u17-teal-text: #267a73;     /* teal TEXT on light backgrounds (5.1:1 on white) */

	/* ---- neutrals: light ---- */
	--u17-black: #000;
	--u17-ink: #0b0b0b;           /* headings on light; dark section background */
	--u17-text: #3a3a3a;          /* body copy on light */
	--u17-muted: #6b6b6b;         /* secondary copy on light (5.3:1) */
	--u17-line: #e6e6e6;
	--u17-line-on-paper: #dcdcd8; /* rules inside --u17-paper cards */
	--u17-paper: #f5f5f3;         /* alternate light section background */
	--u17-white: #fff;
	--u17-field-border: #8f8f8f;  /* form field borders: 3.2:1 on white (WCAG 1.4.11 needs 3:1) */
	--u17-field-border-strong: #767676; /* field borders on --u17-paper panels (4.1:1 there) */
	--u17-danger: #b3261e;        /* errors: 6.5:1 on white */
	--u17-danger-bg: #fdecea;
	--u17-success-bg: #edf8f6;

	/* ---- neutrals: dark (surfaces used on black) ---- */
	--u17-surface: #111;
	--u17-surface-2: #141414;
	--u17-surface-3: #161616;
	--u17-edge: #1f1f1f;
	--u17-edge-2: #222;
	--u17-edge-3: #2a2a2a;
	--u17-on-dark: #f4f4f2;
	--u17-on-dark-2: #e4e4e1;
	--u17-on-dark-muted: #8a8a8a;
	--u17-on-dark-dim: #6e6e6e;

	/* ---- type ---- */
	--u17-font: "Kanit", sans-serif;                       /* brand + desktop */
	--u17-font-ui: "Barlow", sans-serif;                   /* mobile chrome UI */
	--u17-font-ui-display: "Barlow Condensed", sans-serif; /* mobile chrome titles */

	--u17-fs-display: clamp(38px, 6.4vw, 88px);  /* page hero title */
	--u17-fs-h1: clamp(40px, 5.6vw, 76px);       /* closing / feature titles */
	--u17-fs-h2: clamp(30px, 3.6vw, 48px);       /* section titles */
	--u17-fs-h3: 20px;                           /* card / step titles */
	--u17-fs-title: clamp(22px, 2vw, 28px);      /* product page title (long names) */
	--u17-fs-price: clamp(26px, 2.2vw, 32px);    /* product page price */
	--u17-fs-lead: clamp(17px, 1.5vw, 20px);
	--u17-fs-body: 17px;
	--u17-fs-small: 15.5px;
	--u17-fs-label: 13px;                        /* kickers, stat labels */

	--u17-tracking-label: 3px;
	--u17-tracking-button: 2.5px;

	/* ---- layout + space ---- */
	--u17-wrap: 1350px;
	--u17-gutter: clamp(20px, 4vw, 40px);
	--u17-section: clamp(64px, 9vw, 128px);      /* vertical section padding */
	--u17-space-1: 6px;
	--u17-space-2: 12px;
	--u17-space-3: 18px;
	--u17-space-4: 24px;
	--u17-space-5: 36px;
	--u17-space-6: 64px;

	/* ---- motion ---- */
	--u17-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--u17-fast: 0.2s;
	--u17-slow: 0.8s;
}

/* ============================================================ components
   Class names: .u17-{component}[--modifier]. Page files add layout only. */

/* ---- layout ---- */
.u17-container {
	max-width: calc(var(--u17-wrap) + 2 * var(--u17-gutter));
	margin-inline: auto;
	padding-inline: var(--u17-gutter);
}

.u17-section {
	padding-block: var(--u17-section);
}

.u17-section--paper {
	background: var(--u17-paper);
}

.u17-section--dark {
	background: var(--u17-ink);
	color: rgba(255, 255, 255, 0.78);
}

/* ---- type ---- */
.u17-kicker {
	margin: 0 0 14px;
	font-family: var(--u17-font);
	font-size: var(--u17-fs-label);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--u17-tracking-label);
	text-transform: uppercase;
	color: var(--u17-teal-text);
}

.u17-section--dark .u17-kicker,
.u17-on-dark .u17-kicker {
	color: var(--u17-teal);
}

.u17-heading {
	margin: 0 0 28px;
	font-family: var(--u17-font);
	font-size: var(--u17-fs-h2);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--u17-ink);
}

.u17-heading--display {
	font-size: var(--u17-fs-display);
	font-weight: 700;
	line-height: 0.98;
}

.u17-heading--feature {
	font-size: var(--u17-fs-h1);
	font-weight: 700;
	line-height: 1;
}

.u17-heading--card {
	margin-bottom: 12px;
	font-size: var(--u17-fs-h3);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 1.5px;
}

.u17-section--dark .u17-heading,
.u17-on-dark .u17-heading {
	color: var(--u17-white);
}

.u17-heading em {
	font-style: normal;
	color: var(--u17-teal);
}

/* body copy only — labelled paragraphs (kickers, leads) keep their own styles */
.u17-prose p:not([class]) {
	margin: 0 0 1.1em;
	font-family: var(--u17-font);
	font-size: var(--u17-fs-body);
	font-weight: 300;
	line-height: 1.7;
}

.u17-lead {
	font-size: var(--u17-fs-lead);
	line-height: 1.6;
}

/* ---- buttons ---- */
/* :is(a, button) lifts these above the theme's own button[type=submit] rules,
   which load later and would otherwise win on <button> elements. */
:is(a, button).u17-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	border: 1px solid var(--u17-teal);
	font-family: var(--u17-font);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: var(--u17-tracking-button);
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 0;
	cursor: pointer;
	transition: background-color var(--u17-fast), color var(--u17-fast), border-color var(--u17-fast);
}

:is(a, button).u17-btn--primary {
	background: var(--u17-teal);
	color: var(--u17-black);
}

/* ink on hover reads on light cards and on photos alike */
:is(a, button).u17-btn--primary:hover,
:is(a, button).u17-btn--primary:focus-visible {
	background: var(--u17-ink);
	border-color: var(--u17-ink);
	color: var(--u17-white);
}

/* outline button for photos and dark sections */
:is(a, button).u17-btn--ghost {
	border-color: rgba(255, 255, 255, 0.7);
	background: transparent;
	color: var(--u17-white);
}

:is(a, button).u17-btn--ghost:hover,
:is(a, button).u17-btn--ghost:focus-visible {
	border-color: var(--u17-teal);
	color: var(--u17-teal);
}

/* outline button for light backgrounds */
:is(a, button).u17-btn--outline {
	border-color: var(--u17-ink);
	background: transparent;
	color: var(--u17-ink);
}

:is(a, button).u17-btn--outline:hover,
:is(a, button).u17-btn--outline:focus-visible {
	background: var(--u17-ink);
	color: var(--u17-white);
}

/* ---- chips (filters, toggles) ---- */
:is(a, button).u17-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--u17-field-border);
	border-radius: 999px;
	background: var(--u17-white);
	font-family: var(--u17-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--u17-ink);
	cursor: pointer;
	transition: background-color var(--u17-fast), border-color var(--u17-fast), color var(--u17-fast);
}

:is(a, button).u17-chip:hover,
:is(a, button).u17-chip:focus-visible {
	border-color: var(--u17-ink);
	background: var(--u17-white);
	color: var(--u17-ink);
}

:is(a, button).u17-chip.is-active,
:is(a, button).u17-chip[aria-pressed="true"] {
	border-color: var(--u17-ink);
	background: var(--u17-ink);
	color: var(--u17-white);
}

.u17-chip__count {
	font-weight: 300;
	letter-spacing: 0;
	opacity: 0.75;
}

/* ---- scrolling, zoom and motion (site-wide) ---- */
html {
	/* In-page jumps (links to #…, scrollIntoView) stop below whatever is
	   pinned to the top of the screen — the phone header while it's pinned.
	   u17-mobile.js measures it into --u17-sticky-top (0 when nothing is
	   pinned); the phone value stands in until the script has run. */
	scroll-padding-top: var(--u17-sticky-top, 0px);
	/* no automatic text enlarging (iOS in landscape, Android font boosting) */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media (max-width: 1023px) {
	html {
		scroll-padding-top: var(--u17-sticky-top, 105px);
	}
}

/* smooth in-page jumps, unless the visitor asked for less motion */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	html * {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
	}
}

/* Touch: controls don't zoom the page on a double tap (quick taps on +/−,
   chips or arrows zoomed in on iOS). Pinch-zoom still works everywhere. */
a,
button,
input,
select,
textarea,
label,
summary,
[role="button"] {
	touch-action: manipulation;
}


/* ---- accessibility ---- */
.u17-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

:where(.u17-contact, .u17-about, .u17-gallery, .u17-co, .u17-home) :focus-visible {
	outline: 2px solid var(--u17-teal-text);
	outline-offset: 2px;
}

.u17-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.u17-link-arrow {
	display: inline-flex;
	gap: 10px;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	font-family: var(--u17-font);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--u17-teal-text);
}

.u17-section--dark .u17-link-arrow,
.u17-on-dark .u17-link-arrow {
	color: var(--u17-teal);
}

.u17-link-arrow:hover {
	color: var(--u17-ink);
}

.u17-section--dark .u17-link-arrow:hover,
.u17-on-dark .u17-link-arrow:hover {
	color: var(--u17-white);
}

/* ---- card ---- */
.u17-card {
	padding: 34px 28px;
	border: 1px solid var(--u17-line);
	background: var(--u17-white);
	transition: border-color var(--u17-fast), transform var(--u17-fast);
}

.u17-card:hover {
	border-color: var(--u17-teal);
	transform: translateY(-4px);
}

.u17-card p {
	margin: 0;
	font-size: var(--u17-fs-small);
	line-height: 1.65;
	color: var(--u17-muted);
}

/* ---- full-bleed photo with overlay (hero, bands) ---- */
.u17-photo-band {
	position: relative;
	display: flex;
	align-items: center;
	isolation: isolate;
	color: var(--u17-white);
}

.u17-photo-band > img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.u17-photo-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--u17-photo-scrim, linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.25)));
}

/* ---- forms (inc/forms.php) ---- */
.u17-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 20px;
}

.u17-field {
	grid-column: 1 / -1;
	min-width: 0;
}

.u17-field--half {
	grid-column: auto;
}

.u17-field__label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--u17-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--u17-ink);
}

.u17-field__req {
	color: var(--u17-teal-text);
}

.u17-field__opt {
	margin-left: 4px;
	font-weight: 300;
	letter-spacing: 0.5px;
	text-transform: none;
	color: var(--u17-muted);
}

.u17-field__hint {
	margin: -2px 0 8px;
	font-family: var(--u17-font);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--u17-muted);
}

.u17-field__input {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 13px 16px;
	border: 1px solid var(--u17-field-border);
	border-radius: 0;
	background: var(--u17-white);
	box-shadow: none;
	font-family: var(--u17-font);
	font-size: 16px; /* 16px stops iOS zooming into the field */
	font-weight: 300;
	line-height: 1.5;
	color: var(--u17-ink);
	transition: border-color var(--u17-fast), box-shadow var(--u17-fast);
}

textarea.u17-field__input {
	min-height: 140px;
	resize: vertical;
}

.u17-field__input:hover {
	border-color: var(--u17-ink);
}

.u17-field__input:focus {
	outline: none;
	border-color: var(--u17-teal-text);
	box-shadow: 0 0 0 3px rgba(87, 197, 187, 0.35);
}

.u17-field.is-invalid .u17-field__input {
	border-color: var(--u17-danger);
}

.u17-field__error {
	margin: 6px 0 0;
	font-family: var(--u17-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--u17-danger);
}

.u17-field__error:empty {
	display: none;
}

/* honeypot: off-screen for people, still in the form for bots */
.u17-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.u17-form__captcha {
	margin-top: 18px;
}

.u17-form__captcha:empty {
	display: none;
}

.u17-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	margin-top: 26px;
}

button.u17-form__submit[disabled],
button.u17-form__submit[disabled]:hover {
	background: var(--u17-teal);
	border-color: var(--u17-teal);
	color: var(--u17-black);
	opacity: 0.6;
	cursor: progress;
}

.u17-form__legal {
	margin: 0;
	font-family: var(--u17-font);
	font-size: 14px;
	font-weight: 300;
	color: var(--u17-muted);
}

.u17-form__status {
	margin-top: 14px;
	font-family: var(--u17-font);
	font-size: 15px;
	color: var(--u17-ink);
}

.u17-form__status:empty {
	display: none;
}

.u17-form__status.is-error {
	color: var(--u17-danger);
}

/* ---- notices ---- */
.u17-notice {
	padding: 18px 20px;
	border-left: 4px solid var(--u17-teal);
	background: var(--u17-success-bg);
	font-family: var(--u17-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--u17-ink);
}

.u17-notice:focus {
	outline: 2px solid var(--u17-teal-text);
	outline-offset: 2px;
}

.u17-notice--error {
	margin-bottom: 22px;
	border-left-color: var(--u17-danger);
	background: var(--u17-danger-bg);
}

@media (max-width: 600px) {
	.u17-form__grid {
		grid-template-columns: 1fr;
	}

	.u17-form__footer .u17-btn {
		width: 100%;
	}

	.u17-actions {
		flex-direction: column;
	}

	.u17-actions .u17-btn {
		width: 100%;
	}

	.u17-prose p:not([class]) {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.u17-btn,
	.u17-card,
	.u17-link-arrow {
		transition: none;
	}

	.u17-card:hover {
		transform: none;
	}
}