/**
 * Kaliuda homepage — base layer.
 *
 * The Figma export carries its per-element styling inline, so this file only holds the document
 * ground, the design tokens those inline styles are drawn from, and the handful of behaviours a
 * static export cannot express (hover, focus, responsive type).
 *
 * One deliberate departure from the export: every value that has to change with viewport width —
 * section padding, display type sizes, image frame heights — lives here as a class instead of
 * inline, because an inline style cannot be overridden by a media query. Desktop rendering is
 * pixel-identical to the export; below ~900px it stops overflowing.
 */

.kaliuda-home {
	/* Palette, lifted from the export's literal rgb() values. */
	--kal-ground: #F7F4EE;
	--kal-ground-alt: #EFEBE3;
	--kal-ink: #17130F;
	--kal-accent: #B03A2B;
	--kal-accent-light: #C9503F;
	--kal-accent-lighter: #DE6E5D;
	--kal-rule: rgba(23, 19, 15, 0.16);
	--kal-muted: rgba(23, 19, 15, 0.72);
	--kal-body: rgba(23, 19, 15, 0.88);
	--kal-ink-rule: rgba(247, 244, 238, 0.22);

	/* Type stacks — every family has a real fallback so a blocked Google Fonts request
	   degrades to something with the same rhythm rather than to Times. */
	--kal-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--kal-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
	--kal-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--kal-gutter: 56px;
	--kal-max: 1280px;

	margin: 0;
	background: var(--kal-ground);
	color: var(--kal-ink);
	font-family: var(--kal-sans);
	text-wrap: pretty;
	-webkit-text-size-adjust: 100%;
	/* NOT overflow-x: hidden. Hidden makes the body a scroll container, and a sticky descendant
	   then sticks to a box that never scrolls — i.e. it silently stops sticking. `clip` does the
	   same job of guarding against a stray horizontal overflow without that side effect. */
	overflow-x: clip;
	max-width: 100%;

	/* Height of the sticky header, used to keep anchor targets clear of it. */
	--kal-header-h: 57px;
}

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

.kaliuda-home a {
	color: var(--kal-accent);
	text-decoration: none;
	transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

/* Deliberately NOT a blanket colour change: half the links in this design are cream on ink or
   on accent, and darkening those makes them vanish. Each family gets its own hover below. */
.kaliuda-home a:hover {
	color: var(--kal-accent);
}

/* The export has no focus styling at all; without this, keyboard users get nothing on the
   dark-on-dark buttons. */
.kaliuda-home a:focus-visible,
.kaliuda-home button:focus-visible {
	outline: 2px solid var(--kal-accent);
	outline-offset: 3px;
}

.kaliuda-home img {
	max-width: 100%;
}

.kaliuda-home figure {
	margin: 0;
}

/* Cards and project links darken their border on hover instead of changing text colour, which
   would fight the fixed ink/accent pairing inside them. */
.kaliuda-home .kal-card:hover {
	border-color: rgba(23, 19, 15, 0.55);
	color: var(--kal-ink);
}

.kaliuda-home .kal-link-block:hover {
	color: var(--kal-ink);
	opacity: 0.82;
}

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

/* The export sets the header's layout inline, which a media query cannot override — so the
   whole thing lives here instead, desktop values unchanged. */
.kaliuda-home .kal-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--kal-ground);
	border-bottom: 1px solid var(--kal-rule);
}

/* The admin bar is fixed over the top of the viewport for logged-in users, so the header has to
   start below it rather than under it. Below 783px WordPress stops fixing the bar and it scrolls
   away with the page, at which point the header belongs at the very top again. */
.kaliuda-home.admin-bar .kal-header {
	top: 32px;
}

@media (max-width: 782px) {
	.kaliuda-home.admin-bar .kal-header {
		top: 0;
	}
}

/* Every nav link is an in-page anchor; without this the section heading lands underneath the
   header it just scrolled past. */
.kaliuda-home main [id] {
	scroll-margin-top: calc(var(--kal-header-h) + 12px);
}

.kaliuda-home .kal-header-row {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.kaliuda-home .kal-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 32px;
	border-right: 1px solid var(--kal-rule);
	color: var(--kal-ink);
}

.kaliuda-home .kal-header-actions {
	display: flex;
	align-items: stretch;
	flex: 1 1 340px;
	min-width: 0;
	justify-content: flex-end;
}

.kaliuda-home .kal-nav {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: nowrap;
	min-width: 0;
	padding: 0 32px;
	margin-left: auto;
}

.kaliuda-home .kal-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	white-space: nowrap;
	color: var(--kal-ink);
}

.kaliuda-home .kal-nav a.kal-nav-accent {
	color: var(--kal-accent);
}

.kaliuda-home .kal-nav a:hover {
	color: var(--kal-accent);
}

.kaliuda-home .kal-nav a.kal-nav-accent:hover {
	color: var(--kal-ink);
}

.kaliuda-home .kal-header-cta {
	flex: 0 0 auto;
	padding: 14px 30px;
	white-space: nowrap;
}

/* The Menu button. Hidden at every width by default and revealed only inside the compact
   breakpoint, and only once homepage.js has marked the header as enhanced — with JavaScript off
   the nav stays open as a stacked list rather than being locked behind a dead button. */
.kaliuda-home .kal-nav-toggle {
	display: none;
	align-items: center;
	gap: 12px;
	align-self: stretch;
	padding: 0 var(--kal-gutter);
	border: 0;
	border-left: 1px solid var(--kal-rule);
	border-radius: 0;
	background: none;
	color: var(--kal-ink);
	cursor: pointer;
}

.kaliuda-home .kal-nav-toggle:hover {
	color: var(--kal-accent);
}

.kaliuda-home .kal-nav-toggle__icon {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 17px;
	flex: 0 0 auto;
}

.kaliuda-home .kal-nav-toggle__icon span {
	display: block;
	height: 1.5px;
	background: currentColor;
	transition: transform 160ms ease, opacity 120ms ease;
}

/* Open state: the three bars fold into a close cross. */
.kaliuda-home .kal-nav-toggle[aria-expanded="true"] .kal-nav-toggle__icon span:first-child {
	transform: translateY(5.5px) rotate(45deg);
}

.kaliuda-home .kal-nav-toggle[aria-expanded="true"] .kal-nav-toggle__icon span:nth-child(2) {
	opacity: 0;
}

.kaliuda-home .kal-nav-toggle[aria-expanded="true"] .kal-nav-toggle__icon span:last-child {
	transform: translateY(-5.5px) rotate(-45deg);
}

/* --- Buttons and link families ----------------------------------------------------------- */

.kaliuda-home .kal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 22px;
	white-space: nowrap;
}

.kaliuda-home .kal-btn--ink {
	background: var(--kal-ink);
	color: var(--kal-ground);
}

.kaliuda-home .kal-btn--ink:hover {
	background: var(--kal-accent);
	color: var(--kal-ground);
}

.kaliuda-home .kal-btn--accent {
	background: var(--kal-accent);
	color: var(--kal-ground);
}

.kaliuda-home .kal-btn--accent:hover {
	background: var(--kal-ink);
	color: var(--kal-ground);
}

.kaliuda-home .kal-btn--outline {
	border: 1px solid rgba(23, 19, 15, 0.4);
	color: var(--kal-ink);
}

.kaliuda-home .kal-btn--outline:hover {
	background: var(--kal-ink);
	border-color: var(--kal-ink);
	color: var(--kal-ground);
}

/* The one ink button that sits on the accent band; swapping to accent on hover would erase it. */
.kaliuda-home .kal-btn--ink-on-accent {
	display: inline-flex;
	align-items: center;
	background: var(--kal-ink);
	color: var(--kal-ground);
}

.kaliuda-home .kal-btn--ink-on-accent:hover {
	background: var(--kal-ground);
	color: var(--kal-ink);
}

.kaliuda-home .kal-underline {
	color: var(--kal-accent);
	border-bottom: 1px solid rgba(176, 58, 43, 0.5);
	padding-bottom: 3px;
}

.kaliuda-home .kal-underline:hover {
	color: var(--kal-ink);
	border-bottom-color: var(--kal-ink);
}

.kaliuda-home .kal-footer a {
	color: var(--kal-ground);
}

.kaliuda-home .kal-footer a:hover {
	color: var(--kal-accent-lighter);
}

/* --- Process cards ----------------------------------------------------------------------- */

.kaliuda-home .kal-process-step {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--kal-ink-rule);
	padding: 24px 22px;
	min-height: 190px;
}

/* --- Section padding ------------------------------------------------------------------- */

.kaliuda-home .kal-section {
	padding: 96px var(--kal-gutter);
}

.kaliuda-home .kal-section--hero {
	padding: 64px var(--kal-gutter) 0;
}

.kaliuda-home .kal-section--gallery {
	padding: 40px var(--kal-gutter) 0;
}

.kaliuda-home .kal-section--divisions {
	padding: 96px var(--kal-gutter) 0;
}

.kaliuda-home .kal-section--export {
	padding: 72px var(--kal-gutter);
}

.kaliuda-home .kal-section--footer {
	padding: 80px var(--kal-gutter) 0;
}

.kaliuda-home .kal-inner {
	max-width: var(--kal-max);
	margin: 0 auto;
}

/* --- Display type ---------------------------------------------------------------------- */

/* Each of these is fixed-size in the export and overflows well before phone widths. Clamped
   here, keeping the design's size as the upper bound so desktop is unchanged. */
.kaliuda-home .kal-display {
	font-size: clamp(44px, 9.2vw, 124px);
}

.kaliuda-home .kal-h2 {
	font-size: clamp(38px, 6.8vw, 76px);
}

.kaliuda-home .kal-h2--sm {
	font-size: clamp(36px, 6.3vw, 70px);
}

.kaliuda-home .kal-h2--contact {
	font-size: clamp(38px, 6.6vw, 74px);
}

.kaliuda-home .kal-card-title {
	font-size: clamp(34px, 4.6vw, 48px);
}

.kaliuda-home .kal-project-title {
	font-size: clamp(34px, 5.8vw, 66px);
}

.kaliuda-home .kal-project-title--sm {
	font-size: clamp(22px, 2.6vw, 27px);
}

.kaliuda-home .kal-export-title {
	font-size: clamp(30px, 4.2vw, 46px);
}

.kaliuda-home .kal-wordmark {
	font-size: clamp(58px, 19vw, 220px);
}

/* --- Image frames ---------------------------------------------------------------------- */

/* Every frame is a fixed-height box the image cover-fits into, so swapping in a portrait shot
   from wp-admin can never change the page's layout. */
.kaliuda-home .kal-frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: rgba(23, 19, 15, 0.06);
}

/* Pinning the image to the frame rather than relying on height:100% means the frame's own
   height is the only thing that decides the layout — a percentage height would silently fall
   back to intrinsic size wherever the frame's height is not definite. */
.kaliuda-home .kal-frame > img,
.kaliuda-home .kal-frame > div {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kaliuda-home .kal-frame--hero { height: 460px; }
.kaliuda-home .kal-frame--detail { height: 320px; }
.kaliuda-home .kal-frame--division { height: 300px; }
.kaliuda-home .kal-frame--make { height: 250px; }
.kaliuda-home .kal-frame--project { height: 560px; }

.kaliuda-home .kal-frame--thumb {
	display: block;
	width: 152px;
	height: 110px;
	flex: 0 0 auto;
}

/* The one frame the export left free-height, so it sat at the design image's own 4:5 aspect.
   Stated as a ratio instead, it keeps that exact height and cannot be stretched by whatever
   portrait or landscape shot the client uploads in its place. */
.kaliuda-home .kal-frame--visit {
	aspect-ratio: 4 / 5;
	min-height: 440px;
}

/* --- Responsive ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.kaliuda-home {
		--kal-gutter: 24px;
	}

	.kaliuda-home .kal-section {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.kaliuda-home .kal-section--divisions,
	.kaliuda-home .kal-section--hero {
		padding-bottom: 0;
	}

	.kaliuda-home .kal-frame--hero { height: 340px; }
	.kaliuda-home .kal-frame--project { height: 380px; }
	.kaliuda-home .kal-frame--visit { min-height: 360px; }
}

/* The header is a single nowrap row in the export: logo, five links, call to action. On a phone
   that is roughly 900px of content in a 390px window, so it becomes three stacked blocks —
   logo + Menu, the nav panel, then the WhatsApp bar — keeping the design's hard-edged block
   language instead of letting the links wrap into a ragged pile. */
@media (max-width: 780px) {
	.kaliuda-home {
		--kal-header-h: 112px;
	}

	.kaliuda-home .kal-header--js .kal-nav-toggle {
		display: inline-flex;
	}

	/* The collapse is expressed here and nowhere else: the panel is only ever down at a width
	   where the Menu button exists to bring it back. Above this breakpoint the base rule stands
	   and the nav is visible whatever state the script is in. */
	.kaliuda-home .kal-header--js .kal-nav {
		display: none;
	}

	.kaliuda-home .kal-header--js.kal-header--nav-open .kal-nav {
		display: flex;
	}

	/* The row gap would otherwise float the WhatsApp bar away from the logo row; the blocks are
	   meant to butt up against each other. */
	.kaliuda-home .kal-header-row {
		gap: 0;
	}

	.kaliuda-home .kal-logo {
		border-right: 0;
		padding-left: var(--kal-gutter);
		padding-right: var(--kal-gutter);
	}

	.kaliuda-home .kal-header-actions {
		flex: 1 1 100%;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	/* One link per row, on the same hairline rhythm as the spec lists further down the page. */
	.kaliuda-home .kal-nav {
		flex: 1 1 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
		margin-left: 0;
		border-top: 1px solid var(--kal-rule);
	}

	.kaliuda-home .kal-nav a {
		min-height: 52px;
		padding: 0 var(--kal-gutter);
		border-bottom: 1px solid var(--kal-rule);
	}

	.kaliuda-home .kal-nav a:last-child {
		border-bottom: 0;
	}

	.kaliuda-home .kal-header-cta {
		flex: 1 1 100%;
		padding: 16px var(--kal-gutter);
	}
}

@media (max-width: 560px) {
	/* Once the hero eyebrow wraps to two lines the connecting hairline is left dangling at the
	   end of the first one, reading as a stray mark rather than a rule. */
	.kaliuda-home .kal-hairline {
		display: none;
	}

	.kaliuda-home .kal-frame--detail { height: 260px; }
	.kaliuda-home .kal-frame--hero { height: 260px; }
	.kaliuda-home .kal-frame--project { height: 300px; }

	.kaliuda-home .kal-frame--thumb {
		width: 108px;
		height: 84px;
	}

	/* The process cards hang off a left rule that reads as a stray vertical line once they
	   stack; a top rule is the same idea in one column. */
	.kaliuda-home .kal-process-step {
		border-left: 0;
		border-top: 1px solid var(--kal-ink-rule);
		min-height: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kaliuda-home a,
	.kaliuda-home .kal-nav-toggle__icon span {
		transition: none;
	}
}