/*
 * Peacocks design tokens — taken verbatim from the client's design system
 * (01-design/client-drive/design-system/tokens/*.css, received 2026-10-01).
 * The client's variable names are kept as-is so their design docs, UI kit and
 * this theme speak the same language. The --pk-* names below are aliases the
 * agents' standards refer to. Mirror colours and fonts into the Elementor Site
 * Kit globals so the client edits the same values from the editor.
 */

/* ---- Fonts (self-hosted woff2, no CDN) --------------------------------- */
@font-face {
	font-family: 'Karla';
	src: url('../fonts/karla.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Karla';
	src: url('../fonts/karla-italic.woff2') format('woff2');
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}
/* PENDING: Fraunces 600 is the brand's STAND-IN display face until the approved
   wordmark font file is supplied. Swap these two files + the family name then.
   The latin file also carries the te reo Māori macron vowels (Ā ā Ē ē Ī ī Ō ō
   Ū ū, copied from the latin-ext subset, +0.25 KB), so a headline with a macron
   never waits on the 32 KB latin-ext file (web-quality, home r1). */
@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces-600-latin.woff2?v=2') format('woff2'); /* ?v=2: now with macrons; keep in step with the preload in functions.php */
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-0101, U+0112-0113, U+012A-012B, U+014C-014D, U+016A-016B, 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: 'Fraunces';
	src: url('../fonts/fraunces-600-latin-ext.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0102-0111, U+0114-0129, U+012C-014B, U+014E-0169, U+016C-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

:root {
	/* ---- Colour ---------------------------------------------------------- */
	--color-green: #286B5B;
	--color-ochre: #E7A72E;
	--color-coral: #D9765B;
	--color-cream: #F7F0E4;
	--color-ink: #252821;
	--color-green-dark: #1E5245;
	--color-coral-deep: #A8452B;
	--color-cream-deep: #E3D8C4;
	--surface-page: var(--color-cream);
	--surface-accent: var(--color-green);
	--surface-accent-hover: var(--color-green-dark);
	--surface-warm: var(--color-ochre);
	--surface-soft: var(--color-coral);
	--surface-dark: var(--color-ink);
	--surface-white: #FFFFFF;
	--text-primary: var(--color-ink);
	--text-on-green: var(--color-cream);
	--text-on-ink: var(--color-cream);
	--text-on-ochre: var(--color-ink);
	--text-on-coral: var(--color-ink);
	--text-error: var(--color-coral-deep);
	--border-subtle: var(--color-cream-deep);
	--border-strong: var(--color-ink);

	/* ---- Type ------------------------------------------------------------ */
	--font-body: 'Karla', system-ui, sans-serif;
	--font-display: 'Fraunces', Georgia, serif; /* stand-in, see above */
	--weight-display: 600;
	--weight-body: 400;
	--weight-body-medium: 500;
	--weight-body-bold: 700;
	--text-h1: clamp(44px, 6vw, 76px);
	--text-h2: clamp(32px, 4vw, 48px);
	--text-h3: 20px;
	--text-body: 18px;
	--text-caption: 14px;
	--tracking-display: -.02em;
	--tracking-eyebrow: .12em;
	--leading-display: 1.05;
	--leading-body: 1.55;

	/* ---- Space, shape, layout ------------------------------------------- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--radius-sm: 8px;
	--radius-md: 14px;   /* fields, photos inside cards */
	--radius-lg: 20px;   /* cards */
	--radius-xl: 24px;   /* large blocks */
	--radius-pill: 999px; /* every button */
	--shadow-soft: 0 2px 12px rgba(37, 40, 33, .08);
	--shadow-raised: 0 6px 20px rgba(37, 40, 33, .12);
	--border-width: 1px;
	--focus-ring: 0 0 0 3px color-mix(in oklch, var(--color-green) 45%, transparent);
	--content-width-text: 640px;
	--content-width-page: 1120px;
	--content-width-wide: 1320px;
	--gutter: 24px;
	/* Breakpoints (reference only — CSS vars can't drive @media): mobile 480,
	   tablet 768, desktop 1024 (UI kit switches nav at 980), wide 1280. */

	/* ---- Motion ---------------------------------------------------------- */
	--ease-standard: cubic-bezier(.3, 0, .2, 1);
	--duration-fast: 120ms;
	--duration-base: 200ms;

	/* ---- Aliases used by docs/design-standards.md ------------------------ */
	/* Container + side margin as the UI kit actually builds them (site.css `.w`). */
	--pk-container: 1440px;
	--pk-gutter: clamp(16px, 3.4vw, 56px);
	--pk-measure: var(--content-width-text);
	--pk-space-section: clamp(var(--space-8), 8vw, var(--space-9));
	--pk-font-display: var(--font-display);
	--pk-font-body: var(--font-body);
	--pk-radius: var(--radius-lg);

	/* ---- Type scale: the client's brand guidelines v3.0, slide 05 ------- */
	/* Desktop values from 1200px, mobile values below 768px, a straight line
	   between (tablets, small laptops). Display face only for the name and
	   short titles; anything longer than a line is Karla (01-design/brand-rules.md). */
	--pk-fs-display: clamp(44px, calc(6.4815vw - 5.78px), 72px);  /* Display 72/1.0 · 44/1.05: hero H1, step numerals, menu links */
	--pk-fs-h2: clamp(30px, calc(3.2407vw + 5.11px), 44px);      /* Heading 44/1.1 · 30/1.15: every section headline */
	--pk-fs-quote: clamp(24px, calc(1.8519vw + 9.78px), 32px);   /* Quote (Karla 500) 32/1.3 · 24/1.3: the statement */
	--pk-fs-sub: clamp(19px, calc(.6944vw + 13.67px), 22px);     /* Subheading (Karla 700) 22/1.3 · 19/1.3: card, step, FAQ titles; leads */
	--pk-fs-body: 18px;                                          /* Body 18/1.55 · 17/1.55 */
	--pk-fs-small: 14px;                                         /* LABEL 14 · 13, +8% tracking */
	--pk-fs-h3: var(--pk-fs-sub);
	--pk-fs-lead: var(--pk-fs-sub);
	--pk-lh-display: 1;
	--pk-lh-h2: 1.1;
	--pk-lh-quote: 1.3;
	--pk-lh-sub: 1.3;
	--pk-lh-h3: var(--pk-lh-sub);
	--pk-lh-lead: var(--pk-lh-sub);
	--pk-tracking-label: .08em;                                  /* v3.0: +8% (the kit's tokens say .12em) */

	/* ---- Page rhythm: the UI kit's (site.css) -------------------------- */
	/* A cream page; every section is one or two rounded colour blocks inside
	   the container, with the kit's gap between sections. */
	--pk-header-h: 84px;                            /* kit .hd: 84px, 72px below 980px */
	--pk-sec-gap: clamp(72px, 10vw, 152px);         /* kit: main > section + section, and above the footer */
	--pk-hero-top: 20px;                            /* kit .hero padding-top */
	--pk-block-radius: 32px;                        /* kit .block / .ph / .panel; brand: blocks 24–32px, Plinth 32px */
	--pk-block-pad: clamp(32px, 5.5vw, 88px);       /* kit .block padding (28px below 561px) */
	--pk-head-gap: 18px;                            /* kit: label to headline */

	/* ---- Motion ----------------------------------------------------------- */
	--pk-ease-out: cubic-bezier(.16, 1, .3, 1);     /* expo-out */
	--pk-dur-reveal: 600ms;
}

@media (max-width: 979px) {
	:root {
		--pk-header-h: 72px;
		--pk-sec-gap: 72px;
	}
}

@media (max-width: 767px) {
	:root {
		--pk-fs-body: 17px;
		--pk-fs-small: 13px;
		--pk-lh-display: 1.05;
		--pk-lh-h2: 1.15;
	}
}

@media (max-width: 560px) {
	:root {
		--pk-block-pad: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
		--pk-dur-reveal: 0ms;
	}
}

/* Base: cream page, Karla body — the brand's defaults before any section styles. */
body {
	background: var(--surface-page);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--pk-fs-body);
	line-height: var(--leading-body);
}