/* ==========================================================================
   iOTA GCC — base
   Reset, design tokens, typography primitives and layout containers.
   Token values (--accent, --ink, --paper, --muted, --scale) are injected from
   iOTA Settings by inc/enqueue.php, so this file never hardcodes brand colour.
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	overflow-x: hidden;
	position: relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.iota-locked { overflow: hidden; }

img,
video,
svg { max-width: 100%; }

img { height: auto; }

a { color: inherit; }

button {
	font: inherit;
	color: inherit;
}

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

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

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

.i-skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 400;
	background: var(--accent);
	color: var(--ink);
	padding: 12px 20px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 12px;
	text-decoration: none;
}

.i-skip-link:focus { inset-inline-start: 0; }

/* --------------------------------------------------------------------------
   Layout containers
   -------------------------------------------------------------------------- */

.i-shell {
	background: var(--paper);
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
}

.i-container {
	max-width: 1600px;
	margin-inline: auto;
	width: 100%;
}

.i-section { padding-inline: 30px; }

/* Standard inner-page shell: clears the fixed header. */
.i-page {
	padding: clamp(120px, 15vh, 180px) 30px clamp(70px, 10vw, 130px);
	max-width: 1600px;
	margin-inline: auto;
}

.i-page--tight { padding-top: clamp(120px, 15vh, 170px); }

/* Dark panel used by Services, Team and Contact. */
.i-panel-dark {
	background: var(--ink);
	color: var(--paper);
}

.i-rule { border-top: 1px solid var(--line); }
.i-rule--light { border-top: 1px solid rgba(243, 239, 230, .18); }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.i-display,
.i-h1,
.i-h2,
.i-h3 {
	font-family: 'Bricolage Grotesque', 'Archivo', sans-serif;
	font-weight: 800;
	margin: 0;
	text-wrap: balance;
}

/* Full-bleed page titles (Work, Industries). */
.i-h1 {
	text-transform: uppercase;
	font-size: calc(clamp(3rem, 13vw, 11rem) * var(--scale));
	line-height: .86;
	letter-spacing: -.04em;
}

/* Slightly restrained page titles (About, Team, Awards, House). */
.i-h1--soft {
	font-size: calc(clamp(2.2rem, 8vw, 7rem) * var(--scale));
	line-height: .9;
	letter-spacing: -.035em;
}

.i-h1--house {
	text-transform: none;
	font-size: calc(clamp(2.4rem, 8vw, 6.6rem) * var(--scale));
	line-height: .92;
	letter-spacing: -.03em;
}

.i-h1--services {
	text-transform: uppercase;
	font-size: calc(clamp(2.6rem, 10vw, 9rem) * var(--scale));
	line-height: .86;
	letter-spacing: -.04em;
}

.i-h1--contact {
	text-transform: uppercase;
	font-size: calc(clamp(3.4rem, 15vw, 15rem) * var(--scale));
	line-height: .82;
	letter-spacing: -.05em;
}

.i-h2 {
	text-transform: uppercase;
	font-size: calc(clamp(2.2rem, 6vw, 5rem) * var(--scale));
	line-height: .92;
	letter-spacing: -.03em;
}

.i-h2--who {
	text-transform: none;
	font-size: calc(clamp(1.9rem, 4.4vw, 3.8rem) * var(--scale));
	line-height: .96;
	letter-spacing: -.035em;
	max-width: 15ch;
}

.i-h3 {
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1rem, 1.5vw, 1.3rem);
	letter-spacing: -.005em;
	line-height: 1.14;
}

/* Eyebrow — accent chip on light backgrounds. */
.i-eyebrow {
	display: inline-block;
	background-color: var(--accent);
	background-image: var(--grain);
	background-size: 120px;
	background-blend-mode: overlay;
	color: var(--ink);
	font-family: 'Archivo', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 5px 11px;
	margin: 0 0 20px;
}

/* Eyebrow — plain accent text on dark backgrounds. */
.i-eyebrow--plain {
	display: block;
	background: none;
	color: var(--accent);
	font-weight: 600;
	letter-spacing: .24em;
	padding: 0;
	margin-bottom: 18px;
}

.i-lede {
	font-family: 'Archivo', sans-serif;
	font-size: clamp(16px, 1.6vw, 20px);
	line-height: 1.5;
	color: #4b4740;
	margin: 0;
	max-width: 680px;
}

.i-lede--light { color: rgba(243, 239, 230, .7); }

.i-body {
	font-family: 'Archivo', sans-serif;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.6;
	color: #3c3830;
	margin: 0;
}

.i-meta {
	font-family: 'Archivo', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   Links and calls to action
   -------------------------------------------------------------------------- */

.i-link-underline {
	cursor: pointer;
	font-family: 'Archivo', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 4px;
	transition: border-color .2s;
	white-space: nowrap;
}

.i-link-underline:hover { border-bottom-color: var(--accent); }

.i-cta {
	display: inline-block;
	cursor: pointer;
	font-family: 'Bricolage Grotesque', 'Archivo', sans-serif;
	font-weight: 700;
	font-size: clamp(1.4rem, 3vw, 2.3rem);
	color: var(--ink);
	text-decoration: none;
	letter-spacing: -.02em;
	padding: 2px 0;
	transition: background .2s, color .2s;
}

.i-cta:hover { background: var(--accent); }

.i-cta--light { color: var(--paper); }
.i-cta--light:hover {
	background: none;
	color: var(--accent);
}

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */

.i-grid { display: grid; }

.i-grid--cards {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(20px, 2.4vw, 36px);
}

.i-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: clamp(18px, 2vw, 30px);
}

.i-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: clamp(24px, 3vw, 40px);
}

.i-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: clamp(36px, 5vw, 64px);
}

@media (min-width: 900px) {
	.i-who-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important; }
}