/* ==========================================================================
   Digital Streak theme. Brand guidelines v1.3.
   Colour p.08-09, type p.10-11, logo p.05-07, descriptor p.12.
   ========================================================================== */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
	src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
	src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap;
	src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

:root {
	/* Palette (p.08) */
	--charcoal: #212934;
	--streak: #7623C4;
	--lit: #B972FF;
	--slate: #5E6977;
	--paper: #F4F5F6;
	--white: #FFFFFF;
	/* Text roles (p.09), solid hex only */
	--ink: #3A4553;
	--fog: #C9CFD6;
	--slate-light: #A3ACB8;
	--red: #C4453A;
	--coral: #E8877D;

	--plex: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--gutter: 20px;
	--wrap: 1280px;
	--header-h: 68px;
	--section-y: 88px;
	--radius: 8px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 768px)  { :root { --gutter: 40px; --header-h: 76px; --section-y: 120px; } }
@media (min-width: 1280px) { :root { --gutter: 64px; --section-y: 160px; } }

/* Grounds: every section declares light or dark, and text roles follow. */
.ground-light { --bg: var(--white); --c-head: var(--charcoal); --c-body: var(--ink); --c-sub: var(--slate); --c-accent: var(--streak); --c-line: var(--fog); }
.ground-paper { --bg: var(--paper); --c-head: var(--charcoal); --c-body: var(--ink); --c-sub: var(--slate); --c-accent: var(--streak); --c-line: var(--fog); }
/* Purple ground (logo "on purple", p.08). Text roles checked on #7623C4:
   white 7.5:1, lilac 6.3:1, lavender 4.8:1. Lines are decorative. */
.ground-purple { --bg: var(--streak); --c-head: var(--white); --c-body: #F1E8FC; --c-sub: #DCC6F7; --c-accent: var(--white); --c-line: #9A4BE6; }
.ground-dark  { --bg: var(--charcoal); --c-head: var(--white); --c-body: var(--fog); --c-sub: var(--slate-light); --c-accent: var(--lit); --c-line: var(--ink); }
.ground-light, .ground-paper, .ground-dark, .ground-purple { background: var(--bg); color: var(--c-body); }

/* --------------------------------------------------------------------------
   Base
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--plex);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; color: var(--c-head, var(--charcoal)); font-weight: 600; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--c-accent, var(--streak)); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--lit); color: var(--charcoal); }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--white); color: var(--charcoal); padding: 10px 14px; }
.skip:focus { left: 8px; }

/* --------------------------------------------------------------------------
   Type scale by screen (p.11). Small is the base; Medium and Large step up.
   ----------------------------------------------------------------------- */
.display { font-size: 34px; line-height: 1.1;  letter-spacing: -0.035em; }
.h1      { font-size: 24px; line-height: 1.2;  letter-spacing: -0.03em; }
.h2      { font-size: 18px; line-height: 1.3;  letter-spacing: -0.02em; }
.h3      { font-size: 16px; line-height: 1.4;  letter-spacing: -0.01em; }
.caption { font-size: 13px; line-height: 1.5; color: var(--c-sub, var(--slate)); }
.label   { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-sub, var(--slate)); }
.label--accent { color: var(--c-accent); }
.lede    { font-size: 16px; line-height: 1.6; max-width: 34rem; }

@media (min-width: 768px) {
	.display { font-size: 44px; line-height: 1.05; }
	.h1 { font-size: 28px; line-height: 1.18; }
	.h2 { font-size: 19px; line-height: 1.3; }
	.h3 { font-size: 17px; line-height: 1.4; }
	.caption { font-size: 14px; }
	body, .lede { font-size: 16px; line-height: 1.62; }
}
@media (min-width: 1280px) {
	.display { font-size: 64px; line-height: 1.02; }
	.h1 { font-size: 40px; line-height: 1.12; }
	.h2 { font-size: 24px; line-height: 1.28; }
	.h3 { font-size: 20px; line-height: 1.35; }
	.label { font-size: 12px; }
	body, .lede { font-size: 18px; line-height: 1.6; }
}

/* Headings rendered at section scale need room under them. */
.section__head { margin-bottom: 56px; }
.section__head .h1, .who .h1 { margin-bottom: 20px; }
@media (min-width: 1280px) { .section__head { margin-bottom: 88px; } }

/* --------------------------------------------------------------------------
   Buttons and links
   ----------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 24px;
	font: 600 16px/1 var(--plex); letter-spacing: -0.01em;
	text-decoration: none; border-radius: 6px; border: 0; cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.btn--light { background: var(--white); color: var(--charcoal); }
.btn--light:hover { background: var(--fog); }
.btn--dark { background: var(--charcoal); color: var(--white); }
.btn--dark:hover { background: var(--ink); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 15px; }

/* Purple button for key actions. The fill runs left to right from Streak Purple
   into a lighter purple, the same direction as the ramp. On hover the gradient
   slides further towards Lit Purple. White text stays above 4.5:1 across the
   whole fill (darkest stop 7.5:1, lightest 4.6:1). */
.btn--purple {
	background-color: #7623C4;
	background-image: linear-gradient(90deg, #7623C4 0%, #8A3BDA 50%, #9A4BE6 100%);
	background-size: 200% 100%;
	background-position: 0% 0;
	color: var(--white);
	border-radius: 6px;
	transition: background-position .5s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.btn--purple:hover {
	background-position: 100% 0;
	box-shadow: 0 8px 24px rgba(118, 35, 196, .35);
	transform: translateY(-1px);
}
.btn--purple:active { transform: translateY(0); box-shadow: none; }
.btn--purple:focus-visible { outline: 2px solid var(--lit); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn--purple, .btn--purple:hover { transition: none; transform: none; } }

.link {
	display: inline-flex; align-items: center; min-height: 44px;
	font-weight: 600; color: var(--c-head, var(--charcoal));
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
	text-decoration-color: var(--c-sub, var(--slate));
	transition: text-decoration-color .2s var(--ease);
}
.link:hover { text-decoration-color: currentColor; }
.link--light { color: var(--white); text-decoration-color: var(--slate-light); }

/* --------------------------------------------------------------------------
   Logo (outlined SVG). Wordmark x = 28px in header and footer, so the rule
   lands on the 4px screen floor (p.06-07).
   ----------------------------------------------------------------------- */
.ds-logo { color: var(--white); overflow: visible; }
.site-header__logo .ds-logo,
.site-footer__logo .ds-logo { width: 199px; height: auto; }

/* --------------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------- */
.site-header {
	position: fixed; inset: 0 0 auto 0; z-index: 50;
	background: var(--charcoal); color: var(--white);
	transition: transform .35s var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }

/* --hdr: the space the header takes right now. Pinned content sits below it and
   slides up with the header when it hides on scroll down. Registered so it animates
   with the header; browsers without @property just jump. */
@property --hdr { syntax: '<length>'; inherits: true; initial-value: 0px; }
:root { --hdr: var(--header-h); transition: --hdr .35s var(--ease); }
html.header-hidden { --hdr: 0px; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.site-header__logo { display: block; padding: 6px 0; }
body { padding-top: var(--header-h); }

.nav { display: none; align-items: center; gap: 40px; }
.nav .nav__list { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.nav .nav__list a { font-size: 15px; color: var(--fog); text-decoration: none; padding: 8px 0; transition: color .2s var(--ease); }
.nav .nav__list a:hover, .nav .nav__list .current-menu-item a { color: var(--white); }
@media (min-width: 1024px) { .nav { display: flex; } .menu-toggle { display: none !important; } }

.menu-toggle {
	display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 0 0 12px;
	background: none; border: 0; color: var(--white); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.menu-toggle__bars { display: grid; gap: 6px; width: 22px; }
.menu-toggle__bars span { display: block; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; background: var(--charcoal); overflow-y: auto; padding: 32px 0 48px; }
.mobile-menu .nav__list { list-style: none; margin: 0 0 40px; padding: 0; }
.mobile-menu .nav__list a { display: block; padding: 14px 0; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: var(--white); text-decoration: none; border-bottom: 1px solid var(--ink); }
.mobile-menu .btn { width: 100%; }
.mobile-menu__email { display: inline-block; margin-top: 28px; color: var(--fog); text-decoration: none; padding: 10px 0; }
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }
body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Intro (homepage, first view in a session)
   ----------------------------------------------------------------------- */
.intro { display: none; }
html.js:not(.no-intro) .intro {
	display: flex; align-items: center; justify-content: center;
	position: fixed; inset: 0; z-index: 60; background: var(--charcoal);
	animation: ds-intro-failsafe .01s 4s forwards;  /* never trap the page if JS stalls */
}
html.ds-motion .intro { animation: none; }
.intro__svg { width: min(62vw, 360px); }
html.js:not(.no-intro) .intro .ds-logo__word { opacity: 0; }
html.js:not(.no-intro) .intro .ds-logo__ramp { transform: scaleX(0); }
.intro .ds-logo__ramp { transform-box: fill-box; transform-origin: left center; }
/* Arriving from another page: the loader is already closed with the full logo, then lifts. */
html.js.ds-arrive .intro .ds-logo__word { opacity: 1; }
html.js.ds-arrive .intro .ds-logo__ramp { transform: none; }
@keyframes ds-intro-failsafe { to { opacity: 0; visibility: hidden; } }

/* --------------------------------------------------------------------------
   Reveal states. Hidden only when JS is on, with a failsafe if it stalls.
   ----------------------------------------------------------------------- */
html.js [data-reveal], html.js [data-split], html.js [data-hero-fade] {
	opacity: 0;
	animation: ds-reveal-failsafe .4s 2.5s forwards;
}
html.ds-motion [data-reveal], html.ds-motion [data-split], html.ds-motion [data-hero-fade] { animation: none; }
/* SplitText clips each line to its own box while it slides up. Tight display
   line-heights would cut descenders (g, y, p), so each mask gets extra room
   below that takes no space in the layout. */
.ds-line-mask { padding-bottom: .18em; margin-bottom: -.18em; }
.contact__title:focus, .section [tabindex="-1"]:focus { outline: none; }
@keyframes ds-reveal-failsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	html.js [data-reveal], html.js [data-split], html.js [data-hero-fade] { opacity: 1; animation: none; }
}

/* --------------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------- */
.hero__inner {
	display: flex; flex-direction: column; justify-content: flex-end; gap: 48px;
	min-height: calc(100svh - var(--header-h));
	padding-top: 64px; padding-bottom: 56px;
}
.hero__inner { position: relative; }
.hero__title { max-width: 15ch; text-wrap: balance; }
.hero__line { text-wrap: balance; }
.hero__text { display: grid; gap: 32px; }
.hero__foot { display: grid; gap: 32px; }
.hero__lede { max-width: 34rem; margin: 0; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
@media (min-width: 768px) {
	.hero__title { max-width: none; }
	.hero__line { display: block; }
}
@media (min-width: 1024px) {
	/* Text on the left, visual on the right, both centred on the same line. */
	.hero__inner {
		display: grid; grid-template-columns: minmax(0, 1fr) min(38vw, 500px);
		column-gap: 64px; align-items: center; align-content: center;
		padding-top: 48px; padding-bottom: 64px;
	}
	.hero-vis { grid-column: 2; grid-row: 1; }
	.hero__text { grid-column: 1; grid-row: 1; gap: 36px; }

}


/* --------------------------------------------------------------------------
   Hero visual: brand, then product, then business. Greys only; the active
   step label is the one accent (p.09). No ramp outside the logo (p.05).
   ----------------------------------------------------------------------- */
.hero-vis { width: 100%; max-width: 440px; margin: 0 0 auto; }
.hero-vis__steps { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hv-step { color: var(--slate-light); transition: color .4s var(--ease); white-space: nowrap; }
.hv-step.is-active { color: var(--lit); }
.hv-step__rule { flex: 1; height: 1px; background: var(--ink); min-width: 12px; }
.hero-vis__stage { position: relative; aspect-ratio: 4 / 3; container-type: inline-size; }
.hv-frame {
	position: absolute; left: 4%; top: 6%; width: 92%; height: 86%;
	border: 1.5px solid var(--ink); border-radius: 1.2cqw;
}
.hv-frame::before {   /* window dots */
	content: ""; position: absolute; left: 2.6%; top: 3.4%; width: 1.4cqw; height: 1.4cqw; border-radius: 50%;
	background: var(--ink); box-shadow: 2.4cqw 0 0 var(--ink), 4.8cqw 0 0 var(--ink);
}
.hv-frame::after { content: ""; position: absolute; left: 0; right: 0; top: 10%; height: 1.5px; background: var(--ink); }
.hv-frame--app { left: 33%; top: 4%; width: 34%; height: 92%; border-radius: 4.5cqw; }
.hv-frame--app::before { left: 50%; top: 3%; width: 8cqw; height: 1.2cqw; margin-left: -4cqw; border-radius: 1cqw; box-shadow: none; }
.hv-frame--app::after { display: none; }
.hv-el { position: absolute; display: block; border-radius: .6cqw; }
.hv-mark { background: var(--white); border-radius: 50%; }
.hv-bar1, .hv-bar2 { background: var(--fog); }
.hv-b1, .hv-b2 { background: var(--white); }
.hv-b3, .hv-b4 { background: var(--slate-light); }
.hv-sw1 { background: var(--white); }
.hv-sw2 { background: var(--slate-light); }
.hv-sw3 { background: var(--fog); }
.hv-type { font-size: 15cqw; line-height: 1; font-weight: 600; letter-spacing: -0.035em; color: var(--white); border-radius: 0; }
.hv-card {
	position: absolute; right: 2%; top: 74%;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 10px 14px; border-radius: 6px; background: var(--white); color: var(--charcoal);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.hv-card__check { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--charcoal); flex: none; }
.hv-card__check::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid var(--white); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.hv-card__msg { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.hv-card__n { font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: -0.01em; }
@media (min-width: 1024px) {
	.hero-vis { width: 100%; max-width: none; margin: -30px 0 0; } /* centre the stage, not its step labels, on the text */
}
@media (min-width: 1280px) { .hv-card__msg { font-size: 12px; } }

/* --------------------------------------------------------------------------
   How we work: four steps, one visual that changes as you read.
   Light ground: Streak Purple on the active labels only (p.09).
   ----------------------------------------------------------------------- */
.process__grid { display: grid; }
.process__visual {
	position: sticky; top: var(--hdr); z-index: 2;   /* pins just below the header, and moves up when the header hides */
	margin: 0 calc(var(--gutter) * -1); padding: 16px var(--gutter) 20px;
	background: var(--paper);
}
.pv { width: 100%; max-width: 340px; margin: 0 auto; }
.pv__steps { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pv__step { color: var(--slate); transition: color .4s var(--ease); white-space: nowrap; }
.pv__step.is-active { color: var(--streak); }
.pv__rule { flex: 1; min-width: 8px; height: 1px; background: var(--fog); }
.pv__stage { position: relative; aspect-ratio: 4 / 3; container-type: inline-size; background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius); overflow: hidden; }
.pv-el { position: absolute; display: block; border-radius: .6cqw; }
.pv-frame { border: 1.5px solid var(--fog); border-radius: 1.2cqw; }
.pv-frame::before { content: ""; position: absolute; left: 2.6%; top: 3.4%; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--fog); box-shadow: 2.4cqw 0 0 var(--fog), 4.8cqw 0 0 var(--fog); }
.pv-frame::after { content: ""; position: absolute; left: 0; right: 0; top: 10%; height: 1.5px; background: var(--fog); }
.pv-axis { background: var(--fog); border-radius: 0; min-height: 1px; min-width: 1px; }
.pv-ring { border-radius: 50%; border: 1.5px solid var(--charcoal); background: transparent; }
.pv-r2 { border-color: var(--slate-light); }
.pv-r3 { border-color: var(--fog); }
.pv-dot { border-radius: 50%; background: var(--slate-light); }
.pv-you { border-radius: 50%; background: var(--charcoal); }
.pv-tag { display: flex; align-items: center; color: var(--charcoal); font-size: 11px; border-radius: 0; white-space: nowrap; }
.pv-bar1, .pv-bar2, .pv-b3, .pv-b4 { background: var(--slate-light); }
.pv-b1, .pv-b2, .pv-sw1 { background: var(--charcoal); }
.pv-sw2 { background: var(--slate-light); }
.pv-sw3 { background: var(--fog); }
.pv-type { font-size: 15cqw; line-height: 1; font-weight: 600; letter-spacing: -0.035em; color: var(--charcoal); border-radius: 0; }
.pv-card {
	position: absolute; right: 3%; top: 76%;
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px;
	background: var(--charcoal); color: var(--white); box-shadow: 0 10px 24px rgba(33, 41, 52, .22);
}
.pv-card__check { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--white); flex: none; }
.pv-card__check::after { content: ""; position: absolute; left: 4.5px; top: 2.5px; width: 3.5px; height: 6px; border: solid var(--charcoal); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.pv-card__msg { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.pv-card__n { font-weight: 600; font-size: 14px; line-height: 1; }

.process__steps { display: grid; }
.pstep { padding: 48px 0; min-height: 52vh; border-top: 1px solid var(--fog); }
.pstep:first-child { border-top: 0; }
.pstep__num { margin-bottom: 14px; }
.pstep__title { margin-bottom: 12px; }
.pstep__body { max-width: 34rem; }
.pstep__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pstep__tags li { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 8px 10px; border: 1px solid var(--fog); border-radius: 4px; background: var(--white); }
/* Inactive steps step back; colour only, never opacity (p.09). */
html.ds-motion .pstep { color: var(--slate); }
html.ds-motion .pstep .pstep__title { color: var(--slate); transition: color .4s var(--ease); }
html.ds-motion .pstep .pstep__num { color: var(--slate); }
html.ds-motion .pstep.is-active { color: var(--ink); }
html.ds-motion .pstep.is-active .pstep__title { color: var(--charcoal); }
html.ds-motion .pstep.is-active .pstep__num { color: var(--streak); }

@media (min-width: 768px) {
	.pv { max-width: 420px; }
}
@media (min-width: 1024px) {
	.process__grid { grid-template-columns: 6fr 5fr; gap: 72px; align-items: start; }
	.process__visual { top: calc(var(--hdr) + 56px); margin: 0; padding: 0; background: none; }
	.pv { max-width: none; }
	.pstep { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 64px 0; }
	.pv-card__msg { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Selected work: the streak
   ----------------------------------------------------------------------- */
.streak { position: relative; padding-left: 32px; }
.streak__track { position: absolute; left: 5px; top: 6px; bottom: 0; width: 2px; background: var(--c-line); }
.streak__fill { position: absolute; inset: 0; background: var(--fog); transform-origin: top center; transform: scaleY(1); }
html.ds-motion .streak__fill { transform: scaleY(0); }

.work__list { display: grid; gap: 72px; }
.work__item { position: relative; }
.streak__mark {
	position: absolute; left: -32px; top: 0; width: 12px; height: 12px;
	background: var(--charcoal); border: 2px solid var(--ink);
	transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.work__item.is-reached .streak__mark, html:not(.ds-motion) .streak__mark { background: var(--white); border-color: var(--white); }

.work__card { display: grid; gap: 24px; }
.work__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.work__media img, .work__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Website projects: the homepage on a laptop, the mobile view on a phone in front,
   over a flat colour from the client's own brand (--tint). Drawn in CSS, so the
   devices stay sharp at any size; sized in cqw so they scale with the card. */
.work__media--device { container-type: inline-size; display: grid; place-items: center; background: var(--tint, var(--ink)); }
.device { position: relative; width: 76cqw; margin-top: 3cqw; }
.device__laptop { position: relative; }
.device__lid {
	position: relative; width: 84%; margin: 0 auto;
	padding: 1.3cqw 1.3cqw 1.7cqw;
	background: #121316; border-radius: 2cqw 2cqw .4cqw .4cqw;
	box-shadow: inset 0 0 0 .22cqw #3A3C42;
}
.device__lid::before {   /* camera */
	content: ""; position: absolute; left: 50%; top: .45cqw; width: .45cqw; height: .45cqw; margin-left: -.225cqw;
	border-radius: 50%; background: #2C2E34;
}
.device__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .3cqw; background: var(--white); }
.work__media--device .device__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.device__base {
	position: relative; height: 2.1cqw;
	background: linear-gradient(180deg, #E4E6EA 0%, #C9CCD2 45%, #9EA2AA 100%);
	border-radius: .2cqw .2cqw 2.2cqw 2.2cqw / .2cqw .2cqw 1.4cqw 1.4cqw;
	box-shadow: 0 2.4cqw 3.6cqw -1.2cqw rgba(0, 0, 0, .45);
}
.device__base::before {  /* thumb notch */
	content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: .75cqw; transform: translateX(-50%);
	background: linear-gradient(180deg, #A7ABB3, #C3C6CC); border-radius: 0 0 .9cqw .9cqw;
}
.device__phone {
	position: absolute; right: -3%; bottom: -1.2cqw; width: 15.5cqw;
	padding: .7cqw; background: #121316; border-radius: 2.6cqw;
	box-shadow: inset 0 0 0 .2cqw #3A3C42, 0 2.4cqw 4cqw -1cqw rgba(0, 0, 0, .5);
}
.device__phone-screen { aspect-ratio: 600 / 1300; overflow: hidden; border-radius: 2cqw; background: var(--white); }
.device__phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Screen loops (community centre): frames stacked over the still image. Hidden until
   main.js runs the loop, so without JS or with reduced motion the still image shows. */
.device__screen, .device__phone-screen { position: relative; }
.device__loop { position: absolute; inset: 0; pointer-events: none; }
.work__media--device .device__loop .device__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; }
.device__tap {
	position: absolute; left: 50%; top: 50%; width: 5.5%; aspect-ratio: 1; border-radius: 50%;
	background: rgba(118, 35, 196, .22); border: 2px solid #7623C4; opacity: 0;
}
.device__phone .device__tap { width: 22%; }

/* Apps (BIND): two phones, no laptop. The front phone carries the loop; the
   one behind shows a still screen, a little smaller and lower. */
.device--phones { position: absolute; inset: 0; width: auto; margin: 0; }
.device--phones .device__phone { bottom: auto; right: auto; }
.device--phones .device__phone--main { left: 50%; top: 8cqw; width: 21cqw; padding: .9cqw; border-radius: 3.2cqw; }
.device--phones .device__phone--main .device__phone-screen { border-radius: 2.5cqw; }
.device--phones .device__phone--side { left: 29cqw; top: 15cqw; width: 18cqw; z-index: 0; box-shadow: inset 0 0 0 .2cqw #3A3C42, 0 2cqw 3.4cqw -1cqw rgba(0, 0, 0, .35); }
.device--phones .device__phone--main { z-index: 1; }

.work__placeholder { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 24px; background: var(--ink); }
.work__placeholder .label { color: var(--slate-light); }
.work__body .label { margin-bottom: 12px; }
.work__title { margin-bottom: 4px; }
.work__title a { text-decoration: none; }
.work__title a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.work__sector { margin-bottom: 16px; }
.work__summary { max-width: 34rem; }
.work__more { margin-top: 72px; padding-left: 32px; }

@media (min-width: 768px) {
	.streak { padding-left: 56px; }
	.streak__mark { left: -56px; }
	.work__more { padding-left: 56px; }
	.work__list { gap: 104px; }
}
@media (min-width: 1024px) {
	.work__card { grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
	.work__list { gap: 128px; }
}

/* --------------------------------------------------------------------------
   Who we work with: two audience cards, each with a small animation.
   ----------------------------------------------------------------------- */
/* Stacking cards. The title stays pinned under the header; each card sticks a
   little lower than the one before, so the card underneath keeps its top edge
   showing. Sticking is plain CSS; GSAP adds the shrink on the card underneath
   and fades the title once the section is done. */
.who { --who-title-h: 72px; --stack-step: 20px; }
.who__head {
	position: sticky; top: var(--header-h); z-index: 4;   /* keeps the header's space, so the title never shifts and the stack stays put */
	display: flex; align-items: center; height: var(--who-title-h);
}
.who__head .h1 { margin: 0; }
.who__stack {
	--stack-top: calc(var(--header-h) + var(--who-title-h) + 8px);
	display: grid; gap: 32px; margin-top: 16px;
	padding-bottom: 14vh;   /* holds the last card in place for a moment before the section moves on */
}
.aud {
	position: sticky; top: calc(var(--stack-top) + var(--i, 0) * var(--stack-step));
	display: flex; flex-direction: column;
	background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius); overflow: hidden;
	box-shadow: 0 -10px 30px rgba(33, 41, 52, .06), 0 2px 6px rgba(33, 41, 52, .04);
	transform-origin: 50% 0;
	will-change: transform;
}
.aud__shade { position: absolute; inset: 0; z-index: 3; background: var(--charcoal); opacity: 0; pointer-events: none; }
.aud__media { padding: 20px 20px 0; }
.aud__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 28px 24px 28px; }
.aud__body .h2 { margin-bottom: 12px; }
.aud__body p { max-width: 34rem; margin-bottom: 28px; }
.aud__body .btn { margin-top: auto; }
@media (min-width: 768px) {
	.who { --who-title-h: 88px; --stack-step: 24px; }
	.who__stack { gap: 40px; }
	.aud__media { padding: 28px 28px 0; }
	.aud__body { padding: 32px 32px 36px; }
}
@media (min-width: 1024px) {
	/* Full-width cards: visual on the left, words on the right, centred in the space under the header. */
	.who { --who-title-h: 104px; --stack-step: 28px; }
	.who__stack {
		--card-h: min(540px, calc(100svh - var(--header-h) - var(--who-title-h) - var(--stack-step) - 40px));
		gap: 64px;
	}
	.aud { flex-direction: row; align-items: stretch; height: var(--card-h); }
	.aud__media { flex: 0 0 56%; display: flex; align-items: center; padding: 40px; }
	.aud__media .mini { width: 100%; }
	.aud__body { justify-content: center; padding: 48px 56px 48px 16px; }
	.aud__body .btn { margin-top: 0; }
}

.mini { position: relative; aspect-ratio: 16 / 10; container-type: inline-size; background: transparent; border-radius: 6px; overflow: hidden; }
.mini__tag { position: absolute; left: 4%; top: 6%; color: var(--slate); }
.mini__tag--on { color: var(--streak); }
html.ds-motion .mini__tag[data-mini-tag="a"] { opacity: 0; }
html:not(.ds-motion) .mini__tag[data-mini-tag="a"] { display: none; }
.mini__group { position: absolute; inset: 0; }
.mini-el { position: absolute; display: block; border-radius: .5cqw; }
/* Business owners: outlines for the shop, solid fills for the website. */
.mini-facade { border: 1.5px solid var(--charcoal); border-radius: .8cqw; }
.mini-topbar { background: var(--charcoal); border-radius: 0; }
.mini-awning { background: repeating-linear-gradient(90deg, var(--charcoal) 0 12.5%, var(--white) 12.5% 25%); border: 1.5px solid var(--charcoal); border-radius: .4cqw; }
.mini-win, .mini-win2, .mini-door { border: 1.5px solid var(--charcoal); background: transparent; }
.mini-nav, .mini-h1, .mini-btn { background: var(--charcoal); }
.mini-h2, .mini-img { background: var(--slate-light); }
/* Founders: dashed sketch, then the finished app. */
.mini-pdash { border: 1.5px dashed var(--slate); border-radius: 3cqw; }
.mini-phone { border: 1.5px solid var(--charcoal); border-radius: 3cqw; }
.mini-s1, .mini-s2, .mini-s3, .mini-s4 { border: 1.5px dashed var(--slate-light); background: transparent; }
.mini-f1, .mini-f3 { background: var(--charcoal); }
.mini-f2 { background: var(--slate-light); }
.mini-f4 { background: var(--charcoal); }
.mini__card {
	position: absolute; right: 4%; bottom: 7%;
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px;
	background: var(--charcoal); color: var(--white); box-shadow: 0 10px 24px rgba(33, 41, 52, .22);
}
.mini__check { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--white); flex: none; }
.mini__check::after { content: ""; position: absolute; left: 4.5px; top: 2.5px; width: 3.5px; height: 6px; border: solid var(--charcoal); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.mini__msg { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.mini__n { font-weight: 600; font-size: 14px; line-height: 1; }
@media (max-width: 767px) { .mini__card { padding: 6px 10px; gap: 6px; right: 3%; bottom: 5%; } }

/* --------------------------------------------------------------------------
   Contact (homepage and /contact/), on purple
   ----------------------------------------------------------------------- */
.contact { padding: var(--section-y) 0; }
.contact__grid { display: grid; gap: 48px; }
.contact__title { max-width: 12ch; margin-bottom: 24px; }
.contact__alt { margin-top: 40px; display: grid; gap: 6px; }
.contact__alt .label { color: var(--c-sub); }
.contact__email { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--white); text-decoration: underline; text-decoration-color: var(--c-sub); text-underline-offset: 6px; text-decoration-thickness: 1px; }
.contact__email:hover { text-decoration-color: var(--white); }
@media (min-width: 1024px) {
	.contact__grid { grid-template-columns: 5fr 7fr; gap: 96px; align-items: start; }
	.contact__intro { position: sticky; top: calc(var(--hdr) + 40px); }
}

.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__row { display: grid; gap: 0 32px; }
@media (min-width: 768px) { .cform__row { grid-template-columns: 1fr 1fr; } }
.cfield { margin: 0 0 32px; padding: 0; border: 0; min-width: 0; }
.cfield__label { display: block; margin-bottom: 6px; color: var(--c-sub); }
.cfield__opt { text-transform: none; letter-spacing: 0; font-family: var(--plex); font-weight: 400; }
.cfield__input {
	width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1.5px solid var(--c-sub); border-radius: 0;
	background: transparent; color: var(--white); font: 400 18px/1.4 var(--plex);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cfield__input::placeholder { color: var(--c-sub); }
.cfield__input:focus { outline: none; border-color: var(--white); box-shadow: 0 1.5px 0 var(--white); }
.cfield__input--area { min-height: 120px; resize: vertical; }
.cfield__input[aria-invalid="true"] { border-color: #FFD3CC; }
.cfield__error { display: block; min-height: 0; margin-top: 6px; font-size: 14px; color: #FFD3CC; }
.cfield__error:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
	border: 1.5px solid var(--c-sub); border-radius: 999px;
	font-size: 15px; font-weight: 600; color: var(--white);
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover span { border-color: var(--white); }
.chip input:checked + span { background: var(--white); border-color: var(--white); color: var(--streak); }
.chip input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 3px; }

.cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
.cform__submit[disabled] { opacity: .7; cursor: progress; }
.cform__note { margin: 0; font-size: 14px; color: var(--c-body); }
.cform__note a { color: var(--white); text-underline-offset: 4px; }
.cform__status { margin: 20px 0 0; font-size: 15px; color: var(--white); }
.cform__status:empty { display: none; }

.contact__done { outline: none; }
.contact__done p { color: var(--c-body); max-width: 30rem; }
.contact__done-title { margin: 32px 0 12px; }
.contact__card {
	display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 8px;
	background: var(--white); color: var(--charcoal); box-shadow: 0 18px 40px rgba(33, 41, 52, .28);
}
.contact__check { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--charcoal); flex: none; }
.contact__check::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.contact__card-msg { font: 500 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.contact__card-n { font-weight: 600; font-size: 20px; line-height: 1; }

/* --------------------------------------------------------------------------
   Footer, on purple. The descriptor keeps four cap heights clear of the
   wordmark (p.12): cap height is 0.73x and the lockup is 7.1x wide, so four
   cap heights is 0.41 of the logo's width.
   Phones: links, the logo, then the descriptor below it.
   600px and up (tablets, iPad, desktop): the descriptor sits beside the logo, at the far right.
   ----------------------------------------------------------------------- */
.site-footer { padding: 56px 0 32px; border-top: 1px solid var(--c-line); }
.site-footer__grid { --flogo: calc(100vw - 2 * var(--gutter)); display: grid; grid-template-areas: "nav" "logo" "desc" "legal"; }
.site-footer__nav { grid-area: nav; }
.site-footer__nav .nav__list { display: flex; flex-wrap: wrap; gap: 4px 28px; list-style: none; margin: 0; padding: 0; }
.site-footer__nav a { display: inline-block; padding: 8px 0; color: var(--white); text-decoration: none; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.site-footer__nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

.descriptor { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-sub, var(--slate-light)); white-space: nowrap; }
.site-footer__descriptor { grid-area: desc; margin-top: calc(var(--flogo) * 0.412); }   /* phones: below the logo, four cap heights clear */

.site-footer__logo { grid-area: logo; display: block; width: var(--flogo); max-width: 100%; margin-top: 72px; }
.site-footer__logo .ds-logo { width: 100%; height: auto; color: var(--white); }
.site-footer__logo .ds-logo__ramp { transform-box: fill-box; transform-origin: left center; }

.site-footer__legal { grid-area: legal; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--c-line); font-size: 14px; color: var(--c-body); }
.site-footer__legal a { color: var(--c-body); text-decoration: none; }
.site-footer__legal a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 600px) {
	/* Tablets and up: the descriptor sits beside the logo, at the far right, on the
	   logo's ramp line. Below 1024px the logo is sized so logo + four cap heights
	   (0.412 x logo width) + descriptor (about 190px) fill the row exactly. */
	.site-footer__grid {
		container-type: inline-size;
		--flogo: min(480px, calc((100cqw - 190px) / 1.412));
		grid-template-columns: auto 1fr;
		grid-template-areas: "nav nav" "logo desc" "legal legal";
	}
	.site-footer__logo { margin-top: 96px; }
	.site-footer__descriptor { margin: 0; align-self: end; justify-self: end; padding-left: calc(var(--flogo) * 0.412); }
	.site-footer__legal { margin-top: 40px; }
}
@media (min-width: 768px) {
	.site-footer { padding-top: 72px; }
}
@media (min-width: 1024px) {
	.site-footer__grid { --flogo: 480px; }
	.site-footer__logo { margin-top: 128px; }
}
@media (min-width: 1280px) {
	.site-footer__grid { --flogo: 600px; }
	.descriptor { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Generic page and blog
   ----------------------------------------------------------------------- */
.page-head { padding: 72px 0 40px; }
.page-head .display { max-width: 18ch; }
.page-head .lede { margin-top: 20px; }
@media (min-width: 1280px) { .page-head { padding: 120px 0 64px; } }

/* Long-form text: blog posts, Privacy, Terms. Comfortable measure, clear rhythm. */
.prose { max-width: 42rem; padding-bottom: var(--section-y); font-size: 17px; line-height: 1.75; color: var(--ink); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; margin-top: 2.2em; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; margin-top: 1.8em; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h4 { font-size: 17px; margin-top: 1.6em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose a { color: var(--streak); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { color: var(--charcoal); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose ul li::marker { color: var(--streak); }
.prose ol li::marker { color: var(--streak); font-weight: 600; }
.prose img, .prose video { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figcaption, .prose .wp-element-caption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--slate); }
.prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--streak); color: var(--charcoal); font-size: 19px; line-height: 1.55; }
.prose blockquote p { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--fog); margin: 2.4em 0; }
.prose code { font-family: var(--mono); font-size: .88em; padding: 2px 6px; border-radius: 4px; background: var(--paper); }
.prose pre { overflow-x: auto; padding: 16px 18px; border-radius: var(--radius); background: var(--charcoal); color: var(--fog); font-size: 14px; line-height: 1.6; }
.prose pre code { padding: 0; background: none; color: inherit; }
.prose pre.wp-block-code { white-space: pre-wrap; overflow-wrap: anywhere; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.prose .wp-block-table { overflow-x: auto; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--fog); text-align: left; vertical-align: top; }
.prose th { font-weight: 600; color: var(--charcoal); background: var(--paper); }
@media (min-width: 1024px) { .prose { font-size: 18px; } }
@media (min-width: 1280px) { .prose h2 { font-size: 32px; line-height: 1.15; } .prose h3 { font-size: 22px; } }

.post-list { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.post-list__item { padding: 28px 0; border-top: 1px solid var(--c-line); }
.post-list__item:last-child { border-bottom: 1px solid var(--c-line); }
.post-list__item a { display: block; text-decoration: none; }
.post-list__item .label { margin-bottom: 8px; }
.post-list__item a:hover .h2 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.post-list__item .caption { margin: 8px 0 0; max-width: 40rem; }
.post-list__item.has-thumb a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.post-list__thumb { display: block; order: -1; overflow: hidden; border-radius: var(--radius); background: var(--paper); }
.post-list__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
.post-list__item a:hover .post-list__img { transform: scale(1.03); }
@media (min-width: 768px) {
	.post-list__item.has-thumb a { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 40px; align-items: center; }
	.post-list__thumb { order: 0; }
}

/* Comments ------------------------------------------------------------- */
.post-author:has(+ .comments) { margin-bottom: 56px; }
.comments { max-width: 42rem; margin-bottom: var(--section-y); }
.comments__title { font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; color: var(--charcoal); }
.comments__empty { margin: 12px 0 0; color: var(--slate); }
.comments__list, .comments__list .children { list-style: none; margin: 0; padding: 0; }
.comments .comments__list { margin-top: 28px; }
.comments__list > .comment { border-top: 1px solid var(--fog); }
.comments__list > .comment:last-child { border-bottom: 1px solid var(--fog); }
.comments__list .children { margin-left: 22px; padding-left: 20px; border-left: 2px solid var(--fog); }
.comment__body { padding: 22px 0; }
.comment__meta { display: flex; gap: 12px; align-items: center; }
.comment__mark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); color: var(--charcoal); font-size: 13px; font-weight: 600; }
.comment__mark.is-author { background: var(--charcoal); color: var(--white); }
.comment__who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 15px; }
.comment__who strong { color: var(--charcoal); font-weight: 600; }
.comment__badge { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--streak); }
.comment__date { font-size: 13px; color: var(--slate); text-decoration: none; }
.comment__date:hover { text-decoration: underline; }
.comment__pending { margin: 12px 0 0; font-size: 14px; color: var(--streak); }
.comment__text { margin-top: 10px; padding-left: 48px; font-size: 16px; line-height: 1.7; color: var(--ink); }
.comment__text p { margin: 0; }
.comment__text p + p { margin-top: .8em; }
.comment__text a { color: var(--streak); }
.comment__reply { margin-top: 8px; padding-left: 48px; }
.comment__reply a { font-size: 14px; font-weight: 600; color: var(--streak); text-decoration: none; }
.comment__reply a:hover { text-decoration: underline; }

.cmt { margin-top: 40px; }
.comments__list .cmt { margin: 8px 0 24px; padding: 20px; border-radius: var(--radius); background: var(--paper); }
.cmt__title { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; color: var(--charcoal); }
.cmt__title small a { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--streak); }
.cmt-note, .logged-in-as { margin: 8px 0 0; font-size: 14px; color: var(--slate); }
.logged-in-as a { color: var(--slate); }
.cmt-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 20px; }
.cmt-field { display: grid; gap: 8px; margin: 0; }
.cmt-field .label { color: var(--slate); }
.cmt-field__hint { margin-left: 6px; color: var(--slate-light); }
.cmt-field input, .cmt-field textarea {
	width: 100%; padding: 12px 14px; border: 1px solid var(--fog); border-radius: var(--radius);
	background: var(--white); color: var(--charcoal); font: 400 16px/1.5 var(--plex);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cmt-field textarea { min-height: 140px; resize: vertical; }
.cmt-field input:focus, .cmt-field textarea:focus { outline: none; border-color: var(--streak); box-shadow: 0 0 0 3px rgba(118, 35, 196, .15); }
.cmt-check { display: flex; gap: 10px; align-items: center; margin: 0; font-size: 14px; color: var(--slate); }
.cmt-check input { width: 18px; height: 18px; accent-color: var(--streak); }
.cmt-submit { margin: 4px 0 0; }
@media (min-width: 640px) {
	.cmt-form { grid-template-columns: 1fr 1fr; }
	.cmt-field--full, .cmt-check, .cmt-submit, .cmt-note, .logged-in-as { grid-column: 1 / -1; }
}
@media (min-width: 1280px) { .comments__title { font-size: 28px; } }
.post-meta { margin-top: 16px; }

/* Blog (/blog/) */
.blog-hero { padding: 56px 0 72px; }
.blog-hero__title { margin: 12px 0 20px; max-width: 16ch; }
.blog-feature { display: grid; gap: 28px; margin-bottom: 72px; }
.blog-feature__media { display: block; overflow: hidden; border-radius: var(--radius); text-decoration: none; }
.blog-feature__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
.blog-feature__media:hover .blog-feature__img { transform: scale(1.03); }
.blog-feature__panel { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; aspect-ratio: 16 / 10; padding: 8% 7%; background: var(--charcoal); color: var(--white); }
.blog-feature__panel .label { color: var(--slate-light); }
.blog-feature__panel-title { font-size: clamp(26px, 4.4vw, 44px); line-height: 1.08; font-weight: 600; letter-spacing: -0.035em; max-width: 16ch; }
.blog-feature__title { margin: 10px 0 14px; }
.blog-feature__title a { color: inherit; text-decoration: none; }
.blog-feature__title a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.blog-feature__excerpt { max-width: 34rem; margin-bottom: 20px; }
.blog-list__more { margin-bottom: 8px; }
.blog-list .nav-links { display: flex; gap: 16px; margin-top: 32px; }

/* Blog post */
.post-hero { padding: 48px 0 72px; }
.post-hero__title { margin: 14px 0 20px; max-width: 20ch; }
.post-hero__lede { max-width: 40rem; }
.post-hero__by { margin-top: 24px; font-size: 14px; color: var(--c-sub); }
.post-hero__media { margin-top: 48px; margin-bottom: calc(min(12vw, 150px) * -1); position: relative; z-index: 1; }
.post-hero__img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: cover; border-radius: var(--radius); }
.post-body { padding-top: 56px; }
.post-body.has-media { padding-top: calc(min(12vw, 150px) + 56px); }
.post-body__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.post-toc__box { border: 1px solid var(--fog); border-radius: var(--radius); padding: 14px 18px; }
.post-toc__box summary { cursor: pointer; list-style: none; color: var(--slate); }
.post-toc__box summary::-webkit-details-marker { display: none; }
.post-toc__list { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: toc; }
.post-toc__list li { counter-increment: toc; }
.post-toc__list a { display: grid; grid-template-columns: 28px 1fr; padding: 7px 0; font-size: 14px; line-height: 1.4; color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
.post-toc__list a::before { content: counter(toc, decimal-leading-zero); font: 500 11px/1.9 var(--mono); color: var(--slate); }
.post-toc__list a:hover, .post-toc__list a.is-active { color: var(--streak); }
.post-toc__list a.is-active::before { color: var(--streak); }
.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 24px 0; border-top: 1px solid var(--fog); }
.post-share .label { margin-right: 6px; }
.post-share__link { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 10px 12px; border: 1px solid var(--fog); border-radius: 4px; background: var(--white); text-decoration: none; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.post-share__link:hover { border-color: var(--streak); color: var(--streak); }
.post-author { display: flex; gap: 16px; align-items: center; margin-bottom: var(--section-y); padding: 20px; border-radius: var(--radius); background: var(--paper); }
.post-author__mark { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--charcoal); color: var(--white); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; }
.post-author p { margin: 0; font-size: 15px; line-height: 1.55; }
.post-author a { color: var(--streak); }
.post-body__main .prose { padding-bottom: 40px; }

@media (min-width: 768px) {
	.blog-hero { padding: 64px 0 96px; }
	.post-hero { padding: 64px 0 96px; }
}
@media (min-width: 1024px) {
	.blog-feature { grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; margin-bottom: 104px; }
	.post-body__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 56px; align-items: start; }
	.post-toc { position: sticky; top: calc(var(--hdr) + 32px); }
	.post-toc__box { border: 0; padding: 0; }
	.post-toc__box summary { pointer-events: none; }
	.post-body__main { max-width: 46rem; }
}


/* --------------------------------------------------------------------------
   Case study (/work/<project>/)
   The project's own colour (--tint) carries from the hero into every screen panel.
   ----------------------------------------------------------------------- */
.case { --overlap: min(12vw, 150px); }
.case-hero { padding-top: 48px; }
.case-back { display: inline-flex; gap: 8px; margin-bottom: 48px; text-decoration: none; color: var(--c-sub); transition: color .2s var(--ease); }
.case-back:hover { color: var(--white); }
.case-hero__title { margin: 12px 0 20px; max-width: 16ch; }
.case-hero__intro { color: var(--c-body); max-width: 40rem; }
.case-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--c-line); }
.case-facts dt { margin-bottom: 6px; }
.case-facts dd { margin: 0; color: var(--white); font-size: 15px; line-height: 1.45; }
.case-hero__media { position: relative; z-index: 1; padding-top: 56px; margin-bottom: calc(var(--overlap) * -1); }
.case-hero__media .work__media { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .45); }
.case-brief { padding-top: calc(var(--section-y) + var(--overlap)); }

.case-split { display: grid; gap: 16px; }
.case-split__label { padding-top: 4px; }
.case-text { margin-top: 20px; max-width: 40rem; }
.case-split__body > .case-text:first-of-type { margin-top: 24px; }

.case-steps__list { list-style: none; margin: 0; padding: 0; }
.case-step { display: grid; gap: 12px; padding: 32px 0; border-top: 1px solid var(--c-line); }
.case-step:last-child { border-bottom: 1px solid var(--c-line); }
.case-step .case-text { margin-top: 12px; }

.case-decision__title { max-width: 18ch; }

.case-gallery__list { display: grid; gap: 72px; }
.case-fig { margin: 0; }
.case-fig__caption { margin-top: 16px; }
.case-panel { container-type: inline-size; position: relative; padding: 7% 8%; border-radius: var(--radius); background: var(--tint, var(--ink)); overflow: hidden; }
.case-browser { overflow: hidden; border-radius: 10px; background: var(--white); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .4); }
.case-browser__bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; background: #EEF0F3; }
.case-browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--fog); }
.case-browser img { display: block; width: 100%; height: auto; }

/* Full page scrolling inside the browser and the phone as you read past it. */
.case-scroll { padding-right: 22%; }
.case-scroll__browser .case-browser__view { aspect-ratio: 16 / 10; overflow: hidden; }
.case-scroll__browser .case-browser__view img { will-change: transform; }
.case .case-scroll__phone { position: absolute; right: 7%; bottom: 7%; width: 19cqw; padding: 1cqw; border-radius: 3.4cqw; }
.case .case-scroll__screen { border-radius: 2.6cqw; }
.case .case-scroll__screen img { height: auto; object-fit: initial; will-change: transform; }

.case-pair { display: grid; gap: 4cqw; }

.case-phones { display: grid; gap: 5cqw; padding: 7% 10%; --pw: 22cqw; grid-template-columns: repeat(var(--n), 1fr); }
.case-phones[style*="--n:4"] { --pw: 36cqw; grid-template-columns: repeat(2, 1fr); }
.case .case-phones__phone { position: relative; right: auto; bottom: auto; width: auto; padding: calc(var(--pw) * .045); border-radius: calc(var(--pw) * .17); box-shadow: inset 0 0 0 .2cqw #3A3C42, 0 3cqw 5cqw -2cqw rgba(0, 0, 0, .45); }
.case .case-phones__phone .device__phone-screen { border-radius: calc(var(--pw) * .13); }

.case-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.case-chips li { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 10px 12px; border: 1px solid var(--fog); border-radius: 4px; background: var(--white); }

.case-more__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 48px; }
.case-more__grid { display: grid; gap: 56px 24px; }
.case-more__card { position: relative; display: grid; gap: 20px; align-content: start; }
.case-more__body .label { margin-bottom: 10px; }
.case-more__title { margin-bottom: 4px; }
.case-more__title a { color: inherit; text-decoration: none; }
.case-more__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }   /* the whole card opens the case study */
.case-more__card.is-case:hover .case-more__title a { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.case-more__cta { display: inline-flex; gap: 8px; margin-top: 14px; font-weight: 600; color: var(--white); }
.case-more__arrow { color: var(--lit); transition: transform .35s var(--ease); }
.case-more__card.is-case:hover .case-more__arrow { transform: translateX(6px); }
.case-more__live { display: inline-block; margin-top: 14px; position: relative; z-index: 3; }
/* About: three case studies in one row on wide screens, one per row below that. */
.case-more__grid.about-work__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .case-more__grid.about-work__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-work__grid .case-more__card.is-case { grid-column: auto; } }

@media (min-width: 600px) {
	.case-phones[style*="--n:4"] { --pw: 17cqw; grid-template-columns: repeat(4, 1fr); }
	.case-pair { grid-template-columns: 1fr 1fr; }
	.case-more__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
	.case-facts { grid-template-columns: repeat(4, 1fr); }
	.case-hero { padding-top: 64px; }
	.case-step { padding: 40px 0; }
}
@media (min-width: 1024px) {
	.case-split { grid-template-columns: 4fr 8fr; gap: 56px; }
	.case-step { grid-template-columns: 4fr 8fr; gap: 56px; padding: 48px 0; }
	.case-step .case-text { margin-top: 14px; }
	.case-gallery__list { gap: 104px; }
	/* Case studies two across, the other projects three across below them. */
	.case-more__grid { grid-template-columns: repeat(6, 1fr); gap: 72px 32px; }
	.case-more__card { grid-column: span 2; }
	.case-more__card.is-case { grid-column: span 3; }
	.case-browser__bar { height: 32px; padding: 0 16px; gap: 8px; }
	.case-browser__bar i { width: 11px; height: 11px; }
}

/* --------------------------------------------------------------------------
   Services (/services/)
   ----------------------------------------------------------------------- */
.svc-hero { padding: 56px 0 72px; }
.svc-hero__title { margin: 12px 0 20px; max-width: 14ch; }
.svc-hero__lede { max-width: 36rem; }
.svc-jump { display: grid; gap: 0; margin-top: 48px; border-top: 1px solid var(--c-line); }
.svc-jump__link { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; padding: 18px 0; border-bottom: 1px solid var(--c-line); text-decoration: none; }
.svc-jump__link .label { grid-row: span 2; padding-top: 4px; color: var(--c-accent); }
.svc-jump__name { color: var(--white); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; transition: color .2s var(--ease); }
.svc-jump__link:hover .svc-jump__name { color: var(--lit); }

.svc { scroll-margin-top: 0; }
.svc__grid { display: grid; gap: 48px; }
.svc__title { margin: 12px 0 16px; }
.svc__intro { max-width: 36rem; }
.svc__sub { margin: 32px 0 12px; color: var(--c-sub); font-weight: 500; }
.svc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); max-width: 36rem; }
.svc__list li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--c-line); color: var(--c-head); }
.svc__list li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 2px; background: var(--streak); }
.svc__note { margin-top: 12px; max-width: 34rem; }
.svc__cta { margin-top: 32px; }
.svc__proof { margin: 0; }
.svc__proof-cap { display: grid; gap: 4px; margin-top: 16px; }
.svc__proof-cap .label { color: var(--c-accent); }
.svc__proof-title { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--c-head); }
.svc__proof-title a { color: inherit; text-decoration: none; }
.svc__proof-title a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.svc__proof-link { justify-self: start; margin-top: 8px; }

.svc-split { display: grid; gap: 16px; }
.svc-brand__text { margin-top: 20px; max-width: 40rem; }

.svc-basics__list { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.svc-basics__item { padding: 28px 0; border-top: 1px solid var(--c-line); }
.svc-basics__item .label { margin-bottom: 12px; }
.svc-basics__item .h2 { margin-bottom: 8px; }
.svc-basics__item p:last-child { max-width: 30rem; }

@media (min-width: 768px) {
	.svc-hero { padding: 64px 0 96px; }
	.svc-jump { grid-template-columns: repeat(3, 1fr); gap: 0 24px; border-top: 0; }
	.svc-jump__link { grid-template-columns: 1fr; border-top: 1px solid var(--c-line); border-bottom: 0; padding: 20px 0 0; }
	.svc-jump__link .label { grid-row: auto; padding: 0; }
	.svc-basics__list { grid-template-columns: 1fr 1fr; gap: 0 40px; }
}
@media (min-width: 1024px) {
	.svc__grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
	.svc__proof { position: sticky; top: calc(var(--hdr) + 40px); }
	.ground-paper.svc .svc__text { order: 2; }   /* alternate sides */
	.ground-paper.svc .svc__grid { grid-template-columns: 7fr 5fr; }
	.svc-split { grid-template-columns: 4fr 8fr; gap: 56px; }
	.svc-basics__list { grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
}

/* --------------------------------------------------------------------------
   About (/about/)
   ----------------------------------------------------------------------- */
.about-hero { padding: 56px 0 72px; }
.about-hero__title { margin: 12px 0 20px; max-width: 16ch; }
.about-hero__lede { max-width: 40rem; }

.about-timeline { display: grid; gap: 0; list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.about-timeline__item { display: grid; grid-template-columns: 64px 1fr; gap: 2px 16px; padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.about-timeline__year { grid-row: span 2; font: 500 12px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
.about-timeline__item .caption { max-width: 30rem; }

.about-founder__grid { display: grid; gap: 40px; }
.about-photo { margin: 0; max-width: 420px; }
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.about-photo__placeholder { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--charcoal); overflow: hidden; }
.about-photo__initials { font-size: 96px; font-weight: 600; letter-spacing: -0.04em; color: var(--white); }
.about-photo__placeholder .label { position: absolute; top: 20px; left: 20px; color: var(--slate-light); }
.about-founder__role { margin-top: 6px; }

@media (min-width: 768px) {
	.about-hero { padding: 64px 0 96px; }
	.about-timeline { grid-template-columns: repeat(3, 1fr); gap: 0 32px; border-top: 0; }
	.about-timeline__item { grid-template-columns: 1fr; border-top: 1px solid var(--c-line); border-bottom: 0; padding: 20px 0 0; }
	.about-timeline__year { grid-row: auto; }
}
@media (min-width: 1024px) {
	.about-founder__grid { grid-template-columns: 4fr 8fr; gap: 56px; align-items: start; }
	.about-photo { position: sticky; top: calc(var(--hdr) + 40px); }
}

/* --------------------------------------------------------------------------
   Also worked with: client logos, one colour, sized by area
   ----------------------------------------------------------------------- */
.clients { --logo-cut: var(--bg); border-top: 1px solid var(--c-line); }
.clients__head { margin-bottom: 40px; }
.clients__head .label { margin-bottom: 12px; }
.clients__head .h1 { max-width: 22ch; }
.clients__grid { display: grid; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.clients__item { display: flex; align-items: center; justify-content: center; height: 112px; padding: 16px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); color: var(--fog); transition: color .25s var(--ease); }
.clients__item:hover { color: var(--white); }
.clients__item svg { display: block; height: calc(var(--lh) * .78); width: auto; max-width: 100%; }
@media (min-width: 768px) {
	.clients__grid { grid-template-columns: repeat(3, 1fr); }
	.clients__item { height: 136px; }
	.clients__item svg { height: calc(var(--lh) * .9); }
}
@media (min-width: 1024px) {
	.clients__head { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; align-items: baseline; margin-bottom: 56px; }
	.clients__head .label { margin: 0; }
	.clients__grid { grid-template-columns: repeat(6, 1fr); }
	.clients__item { height: 152px; padding: 20px; }
	.clients__item svg { height: var(--lh); }
}

.work-index .work__list { gap: 72px; }
@media (min-width: 1024px) { .work-index .work__list { gap: 104px; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}