/* Nextsoft Labs — "Daylight" */

:root {
	--paper: #f5f7fa;
	--surface: #ffffff;
	--ink: #12233f;
	--body: #46536a;
	--line: #d8dee7;
	--sky: #e3ebf5;
	--sky-line: #c9d6e7;

	--font: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
	--wrap: 74rem;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--measure: 66ch;
	--radius: 6px;
	/* Yellow: "AI" in the home headline, and the service arrows on hover */
	--signal: #ffd23f;
	/* How much navy shows over the greyscale photos in the home service index */
	--tint: .45;
}

@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
}

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

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--body);
	font: 400 1.125rem/1.65 var(--font);
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
	color: var(--ink);
	margin: 0;
	text-wrap: balance;
}

p { margin: 0 0 1.25em; text-wrap: pretty; }

a {
	color: var(--ink);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: rgba(18, 35, 63, .4);
	text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent);
	transition: text-decoration-color .15s, text-decoration-thickness .15s;
}
a:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }

::selection { background: var(--sky-line); color: var(--ink); }

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: 2px;
}

.wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.skip {
	position: absolute;
	left: 1rem;
	top: -4rem;
	background: var(--ink);
	color: #fff;
	padding: .6rem 1rem;
	border-radius: var(--radius);
	z-index: 10;
}
.skip:focus { top: 1rem; }

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

.site-header .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem 2rem;
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
}

.wordmark {
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--ink);
}

.site-header ul {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header nav a {
	font-size: 1rem;
	font-weight: 500;
	text-decoration-color: transparent;
}
.site-header nav a:hover { text-decoration-color: var(--ink); }
.site-header nav a[aria-current] {
	text-decoration-color: var(--ink);
	text-decoration-thickness: 2px;
}

/* ---------- Home hero ---------- */

.hero {
	display: flex;
	flex-direction: column;
	padding-top: clamp(2.5rem, 8vw, 6.5rem);
}

.hero h1 {
	font-size: clamp(2.75rem, 7.4vw, 6.25rem);
	font-weight: 750;
	/* Tall enough that the navy block on line two never overlaps line one,
	   or itself when it wraps on phones */
	line-height: 1.2;
	letter-spacing: -0.04em;
}

/* Second line of the headline: a navy block in the style of the
   "What we do" band, with "AI" marked in a yellow rectangle */
.h-mark {
	background: var(--ink);
	color: #fff;
	padding: 0 .16em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.ai {
	background: var(--signal);
	color: var(--ink);
	padding: 0 .1em;
	margin: 0 .03em;
}


.lede {
	font-size: clamp(1.2rem, 1.6vw, 1.375rem);
	line-height: 1.55;
	color: var(--ink);
	max-width: 52ch;
}

.hero .lede { margin-top: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: 0; }

/* Hero service index: the three services as one ruled strip, using the
   same drawn arrow as the navy service band and the inner-page sidebar.
   Hover and focus fill an entry with the band's navy, as a preview of it.
   Every entry has the same inner padding (--hn-pad); the list is pulled
   out by that amount so the text still lines up with the headline. */
.hero-nav {
	--hn-pad: clamp(1rem, 2.2vw, 1.75rem);
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.hero-nav ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0 calc(-1 * var(--hn-pad));
	padding: 0;
	border-top: 2px solid var(--ink);
	border-bottom: 1px solid var(--line);
}
.hero-nav li + li { border-left: 1px solid var(--line); }

.hero-nav a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title go"
		"sub   sub";
	align-content: start;
	gap: .65rem 1.25rem;
	height: 100%;
	padding: clamp(1.5rem, 2.6vw, 2rem) var(--hn-pad) clamp(1.75rem, 3vw, 2.25rem);
	color: var(--ink);
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.hn-title {
	grid-area: title;
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 750;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
.hn-sub {
	grid-area: sub;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--body);
	transition: color .2s;
}
.hero-nav .go {
	grid-area: go;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: .15em;
	stroke-width: 2.25;
}

.hero-nav a:hover,
.hero-nav a:focus-visible { background: var(--ink); color: #fff; }
.hero-nav a:hover .hn-sub,
.hero-nav a:focus-visible .hn-sub { color: var(--sky-line); }
.hero-nav a:hover .go,
.hero-nav a:focus-visible .go { transform: translateX(.35rem); color: var(--signal); }
.hero-nav a:focus-visible { outline-offset: 3px; border-radius: 0; }

@media (max-width: 52rem) {
	.hero-nav ul { grid-template-columns: minmax(0, 1fr); }
	.hero-nav li + li { border-left: 0; border-top: 1px solid var(--line); }
	.hero-nav a { padding-top: 1.35rem; padding-bottom: 1.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
	.home .hero h1 {
		animation: rise .9s cubic-bezier(.2, .7, .2, 1) both;
	}
	@keyframes rise {
		from { transform: translateY(.35em); }
	}
}

/* ---------- Two-column text block ---------- */

/* Also used by the footer, so both line up in the same two columns */
.split {
	display: grid;
	grid-template-columns: minmax(12rem, 1fr) minmax(0, var(--measure));
	gap: 1.5rem clamp(2rem, 6vw, 6rem);
	padding-top: clamp(3rem, 7vw, 6rem);
	padding-bottom: clamp(3rem, 7vw, 6rem);
}

/* Section headings: About us, What we do, Contacts */
.split > h2,
.services h2 {
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 700; }

@media (max-width: 52rem) {
	.split { grid-template-columns: minmax(0, 1fr); }
	.site-header ul { gap: .25rem 1.25rem; }
	.site-header nav a { font-size: .9375rem; }
}

/* ---------- Services index (the signature element) ----------
   The one dark band on the page: the peak of the scroll. Service names
   run at display size as a typographic index; photos sit back as a
   navy-tinted set until the row is hovered or focused (always in
   colour on touch screens). */

.services {
	background: var(--ink);
	color: var(--sky-line);
	padding-top: clamp(4.5rem, 10vw, 9rem);
	padding-bottom: clamp(4.5rem, 10vw, 9rem);
}

.services h2 {
	color: #fff;
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.services :focus-visible,
.services .svc h3 a:focus-visible::after { outline-color: #fff; }

.svc-list { list-style: none; margin: 0; padding: 0; }

.svc {
	display: grid;
	grid-template-columns: minmax(0, var(--measure)) minmax(14rem, 20rem);
	grid-template-areas:
		"title title"
		"text  img";
	justify-content: space-between;
	align-items: start;
	position: relative;
	gap: 0 clamp(2rem, 6vw, 6rem);
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
}
.svc:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }

.svc h3 {
	grid-area: title;
	font-size: clamp(2.25rem, 6vw, 5.25rem);
	font-weight: 750;
	line-height: 1;
	letter-spacing: -0.04em;
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.svc h3 a {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	color: #fff;
	text-decoration: none;
}
.go {
	flex: none;
	width: .6em;
	height: .6em;
	margin-bottom: .08em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: square;
	transition: transform .25s cubic-bezier(.2, .7, .2, 1), color .2s;
}
.svc:hover .go,
.svc:focus-within .go { transform: translateX(.12em); color: var(--signal); }

/* The heading link is the row's only link; stretch it over the whole row */
.svc h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Above the photo, whose opacity and filter create their own layer */
	z-index: 1;
	border-radius: var(--radius);
}
.svc h3 a:focus-visible { outline: none; }
.svc h3 a:focus-visible::after {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.svc p { grid-area: text; max-width: var(--measure); margin: 0; }

/* Navy shows through a greyscale photo until the row is hovered */
.svc-img {
	grid-area: img;
	margin: .4rem 0 0;
	background: var(--ink);
	border-radius: var(--radius);
	overflow: hidden;
}
.svc-img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	opacity: calc(1 - var(--tint));
	transition: filter .3s, opacity .3s;
}
.svc:hover .svc-img img,
.svc:focus-within .svc-img img { filter: none; opacity: 1; }

/* Touch screens can't hover, so show the photos in full colour there */
@media (hover: none) {
	.svc-img img { filter: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.go, .svc-img img { transition: none; }
}

@media (max-width: 52rem) {
	.svc {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "title" "text" "img";
	}
	.svc-img { max-width: 22rem; margin-top: 1.75rem; }
}

/* ---------- Inner pages ---------- */

.page-head {
	--pad: clamp(2.5rem, 7vw, 5.5rem);
	padding-top: var(--pad);
	font-size: clamp(2.5rem, 6.2vw, 5.25rem);
}

.page-head h1 {
	font-size: 1em;
	font-weight: 750;
	line-height: 1;
	letter-spacing: -0.04em;
	max-width: 16ch;
}

/* Wider screens, where every title fits on two lines: reserve two lines
   and set the title on the last one, so the banner below starts at the
   same height on every page. Phones let titles take the lines they need. */
@media not all and (max-width: 40rem) {
	.page-head {
		display: flex;
		align-items: flex-end;
		min-height: calc(var(--pad) + 2em);
	}
}

.banner { margin: clamp(2rem, 5vw, 3.5rem) auto 0; }
.banner img {
	width: 100%;
	aspect-ratio: 16 / 5;
	object-fit: cover;
	object-position: var(--focus, 50%) 50%;
	border-radius: var(--radius);
}

/* Horizontal subject position of each banner photo, set with focus: in a
   page's front matter (multiples of 5; the build rejects anything else).
   Kept out of inline styles so the Content-Security-Policy can forbid them. */
.banner[data-focus="0"] { --focus: 0%; }
.banner[data-focus="5"] { --focus: 5%; }
.banner[data-focus="10"] { --focus: 10%; }
.banner[data-focus="15"] { --focus: 15%; }
.banner[data-focus="20"] { --focus: 20%; }
.banner[data-focus="25"] { --focus: 25%; }
.banner[data-focus="30"] { --focus: 30%; }
.banner[data-focus="35"] { --focus: 35%; }
.banner[data-focus="40"] { --focus: 40%; }
.banner[data-focus="45"] { --focus: 45%; }
.banner[data-focus="50"] { --focus: 50%; }
.banner[data-focus="55"] { --focus: 55%; }
.banner[data-focus="60"] { --focus: 60%; }
.banner[data-focus="65"] { --focus: 65%; }
.banner[data-focus="70"] { --focus: 70%; }
.banner[data-focus="75"] { --focus: 75%; }
.banner[data-focus="80"] { --focus: 80%; }
.banner[data-focus="85"] { --focus: 85%; }
.banner[data-focus="90"] { --focus: 90%; }
.banner[data-focus="95"] { --focus: 95%; }
.banner[data-focus="100"] { --focus: 100%; }

/* Narrow screens: a taller crop centred on each photo's subject */
@media (max-width: 40rem) {
	.banner img { aspect-ratio: 16 / 9; }
}

/* The sidebar comes after the text in the HTML, so on phones it simply
   follows it (matching tab order). Wide screens place it in the left column. */
.side {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	position: sticky;
	top: 2rem;
}
.side-h {
	font-weight: 700;
	color: var(--ink);
	margin-bottom: .75rem;
}
.side ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1rem;
	border-left: 1px solid var(--line);
}
.side li { margin-bottom: .5rem; }
.side a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: 1rem;
	color: var(--body);
	text-decoration: none;
}
.side a:hover { color: var(--ink); }

/* The drawn arrow from the home service index: hidden until hover, always
   shown on the current page. Shape and stroke come from the shared .go */
.side a span {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: text-decoration-color .15s;
}
.side a:hover span { text-decoration-color: currentColor; }
.side a[aria-current="page"] span { text-decoration: none; }
.side .go {
	width: .9em;
	height: .9em;
	margin-bottom: 0;
	opacity: 0;
	transform: translateX(-.3em);
	transition: opacity .2s, transform .25s cubic-bezier(.2, .7, .2, 1);
}
.side a:hover .go,
.side a[aria-current="page"] .go { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.side .go { transition: none; }
}
.side a[aria-current="page"] {
	color: var(--ink);
	font-weight: 600;
	margin-left: calc(-1rem - 1px);
	padding-left: calc(1rem - 1px);
	border-left: 2px solid var(--ink);
}

@media (max-width: 52rem) {
	.side { grid-column: auto; grid-row: auto; position: static; padding-top: 1rem; }
}

/* Partners: combined capabilities */

.caps-h {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 3rem 0 1rem;
}

.caps { margin: 0; }
.caps > div {
	padding: 1.25rem 0;
	border-top: 1px solid var(--line);
}
.caps dt {
	color: var(--ink);
	font-weight: 700;
	margin-bottom: .25rem;
}
.caps dd { margin: 0; }

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

.site-footer {
	background: var(--surface);
	border-top: 1px solid var(--line);
}

.site-footer .wrap {
	padding-top: clamp(3rem, 6vw, 5rem);
	padding-bottom: 2rem;
}

.site-footer dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.5rem 3rem;
	margin: 0;
}
.site-footer dt { font-size: 1rem; margin-bottom: .35rem; }
.site-footer dd { margin: 0; color: var(--ink); font-size: 1.25rem; line-height: 1.45; }

.fine {
	grid-column: 1 / -1;
	margin: clamp(2rem, 5vw, 4rem) 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	font-size: .875rem;
}