/*
 * Junnect design system.
 * Tokens, base, layout primitives, containers, the band and the components every block shares.
 * Source of truth: the approved homepage design v2 (brandbook v1.0 p.14-15).
 * Rules: green is the ink, beige the base, no black. No eyebrow labels above headings.
 */

/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face { font-family: "Junnect Serif"; src: url("../fonts/JunnectSansSerif-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Junnect Sans"; src: url("../fonts/JunnectSans-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Junnect Sans"; src: url("../fonts/JunnectSans-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Junnect Sans"; src: url("../fonts/JunnectSans-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	/* Colour. Green is the ink, beige the base; service colours only where that service is meant. */
	--green: #073B30;
	--green-tint: #12463B;
	--beige: #F5EFEA;
	--beige-tint: #F7F4F1;
	--cream: #FBF6F0;               /* page background */
	--band: #F4EEE8;               /* the diagonal band, one step darker than the page */
	--beige-deep: #ECE4DC;
	--line: #DED4CA;
	--ink-soft: #4C6A62;
	--ink-on-green: #A9C0B9;
	--ink-faded-on-green: #648A80;

	--web: #F9C3B2;      --web-tint: #FBD6CA;
	--dm: #C9E1F6;       --dm-tint: #D8EAFA;
	--camp: #FFF3A6;     --camp-tint: #FEF6C5;
	--culture: #E3DAED;  --culture-tint: #ECE6F3;

	/* Fonts */
	--serif: "Junnect Serif", "Iowan Old Style", Georgia, serif;
	--sans: "Junnect Sans", "Helvetica Neue", Arial, sans-serif;

	/* Layout: near full bleed, 24px gutters, a right-hand column that lines up with the nav. */
	--g: 24px;
	--gap: 24px;
	--col-gap: 48px;
	--rail: 26%;
	--col-a: 74fr;
	--col-b: 26fr;

	/* Radii */
	--radius: 14px;
	--radius-l: 20px;               /* containers: panels, services, footer */
	--radius-s: 12px;

	/* Spacing */
	--sp-section: clamp(96px, 10vw, 152px);
	--sp-block: clamp(48px, 5vw, 72px);

	/* Type */
	--t-display: clamp(50px, 7.7vw, 116px);   /* hero only */
	--t-closer: clamp(48px, 6.6vw, 104px);
	--fs-h2: clamp(36px, 4.6vw, 72px);
	--fs-h3: clamp(24px, 2.1vw, 30px);
	--fs-body: 17px;
	--fs-small: 15px;
	--fs-micro: 13px;

	/* The band: a wide, soft parallelogram leaning ~9deg. */
	--band-skew: -9deg;

	color-scheme: light;
}

@media (max-width: 1180px) {
	:root { --rail: 30%; --col-gap: 36px; }
}
@media (max-width: 900px) {
	:root { --g: 20px; --gap: 20px; }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--cream);
	color: var(--green);
	font-family: var(--sans);
	font-weight: 300;
	font-size: var(--fs-body);
	line-height: 1.55;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
	font-family: var(--serif);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.02;
	margin: 0;
	text-wrap: balance;
}
p { margin: 0; }
img, svg, video { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--web); color: var(--green); }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.gutter { padding-inline: var(--g); }

/* 74fr / 26fr. The right column lines up with the header nav column. */
.split {
	display: grid;
	grid-template-columns: minmax(0, var(--col-a)) minmax(0, var(--col-b));
	column-gap: var(--gap);
}

/* 1fr + rail. Used inside panels and for text-led rows. */
.b-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--rail);
	column-gap: var(--col-gap);
}

@media (max-width: 900px) {
	.split, .b-split { grid-template-columns: 1fr; row-gap: 28px; }
}

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

/* Section head row: heading left, short muted text right. Works alone or combined with .split. */
.head {
	display: grid;
	grid-template-columns: minmax(0, var(--col-a)) minmax(0, var(--col-b));
	column-gap: var(--gap);
	row-gap: 24px;
	align-items: end;
	margin-bottom: var(--sp-block);
}
.head h2 { font-size: var(--fs-h2); max-width: 12em; }
.head .side { display: grid; gap: 18px; align-content: end; }
.head .side { color: var(--ink-soft); }
@media (max-width: 900px) {
	.head { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Containers: rounded, with the page margin on both sides
   ========================================================================== */
.panel,
.panel--green {
	margin-inline: var(--g);
	border-radius: var(--radius-l);
	padding: var(--sp-block) clamp(0px, 2vw, 24px);
	position: relative;
	overflow: hidden;
}
.panel { background: var(--beige); }
.panel--green { background: var(--green); color: var(--beige); }
.panel--green :focus-visible { outline-color: var(--beige); }
.panel-inner { padding-inline: var(--g); }

/* ==========================================================================
   The band: the brand's background element. Always wide, and it lives inside a shape:
   - In a container (card, panel, the closer) it runs from the container's top edge to its bottom
     edge and is clipped by the radius. Colour pair: the container colour with its tint
     (beige + beige tint, service colour + service tint).
   - In the open page it may only start at the top edge of the page (hero, page head) and ends
     behind the media or in open space: never flat against another surface. The next surface keeps
     at least --sp-block of air (see the rule under the band).
   Put <span class="band" aria-hidden="true"></span> as a direct child of a positioned parent.
   Tune with --bl (left), --bw (width), --bc (colour) on the band or its parent.
   ========================================================================== */
.band {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--bl, 46%);
	width: var(--bw, 40%);
	background: var(--bc, var(--band));
	transform: skewX(var(--band-skew));
	transform-origin: 0 0;
	pointer-events: none;
	z-index: -1;
}
.has-band { position: relative; isolation: isolate; }
:has(> .band) { isolation: isolate; }

/* Inside a beige container the band takes the beige tint. */
.panel { --bc: var(--beige-tint); }

/* An open-page band ends flat at the bottom of its section: a container right under it would read
   as the band being chopped off, so the container keeps --sp-block of air. */
:is(.hero-top, .page-head, .case-hero) + :is(.panel, .panel--green) { margin-top: var(--sp-block); }

/* ==========================================================================
   Shared components
   ========================================================================== */
.icon { display: inline-block; width: 14px; height: 14px; flex: none; }

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: 999px;
	font: 400 16px/1 var(--sans);
	text-decoration: none;
	border: 1px solid var(--green);
	background: transparent;
	color: var(--green);
	cursor: pointer;
	transition: background .2s, color .2s;
}
.btn svg { width: 14px; height: 14px; }
.btn-primary { background: var(--green); color: var(--beige); }
.btn-primary:hover { background: var(--green-tint); }
.panel--green .btn-primary, .panel--green .btn { border-color: var(--beige); }
.panel--green .btn-primary { background: var(--beige); color: var(--green); }
.panel--green .btn-primary:hover { background: var(--beige-tint); }

/* Round icon button. Colour it where it is used; .textlink supplies the default. */
.arrow {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
	flex: none;
}
.arrow svg { width: 14px; height: 14px; }

.textlink {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	font-weight: 400;
	font-size: 16px;
}
.textlink .arrow { background: var(--green); color: var(--beige); transition: transform .2s; }
.textlink:hover .arrow { transform: translateX(3px); }
.panel--green .textlink .arrow { background: var(--beige); color: var(--green); }

.logo-svg { display: block; width: 100%; height: auto; fill: currentColor; }

/* ==========================================================================
   Type helpers
   ========================================================================== */
.t-display { font-family: var(--serif); font-weight: 300; font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.025em; }
.t-closer { font-family: var(--serif); font-weight: 300; font-size: var(--t-closer); line-height: 0.98; letter-spacing: -0.025em; }
.t-h2 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.02em; }
.t-h3 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; }
.t-small { font-size: var(--fs-small); }
.t-micro { font-size: var(--fs-micro); }
.muted { color: var(--ink-soft); }
.panel--green .muted { color: var(--ink-on-green); }