/* =========================================================================
   SUMBRA design system — v1.1 Phase 1 Calibration Pass
   Tokens are locked in the SUMBRA Development Handoff — do not introduce
   additional colours, typefaces or visual devices (gradients, glass,
   shadows, gold, rounded-card UI) without an explicit spec change.
   This pass recalibrates typographic/media scale and hierarchy only —
   section architecture is unchanged from Phase 1.
   ========================================================================= */

:root {
	/* Colour tokens (SUMBRA Development Handoff §3) */
	--sumbra-carbon:  #1A1A1A;
	--sumbra-piedra:  #5A5651;
	--sumbra-arena:   #B7AA9A;
	--sumbra-lino:    #D8D2C6;
	--sumbra-marfil:  #F2EEE8;
	--sumbra-blanco:  #FFFFFF;

	/*
	 * Defensive override: Elementor ships its own Global Colors as CSS
	 * custom properties at :root (--e-global-color-primary/secondary/
	 * text/accent), and its default starter kit's accent is NOT a SUMBRA
	 * colour — that mismatched default is the most common real-world
	 * cause of a stray pink/red tone appearing on plain links and
	 * WordPress/Elementor default components. Redefining the same
	 * variable names here means anything that reads them — including
	 * markup we don't directly control — resolves to the locked SUMBRA
	 * palette instead. This is a root-level fix, not a per-link override.
	 */
	--e-global-color-primary: var(--sumbra-carbon);
	--e-global-color-secondary: var(--sumbra-piedra);
	--e-global-color-text: var(--sumbra-piedra);
	--e-global-color-accent: var(--sumbra-arena);

	/* Typography */
	--sumbra-font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
	--sumbra-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Layout */
	--sumbra-container-max: 1320px;
	--sumbra-gutter: 24px;

	/* Spacing scale. This is the single source of truth for vertical
	   rhythm — sections use these deliberately rather than one universal
	   padding-block value. "Within a thought" spacing uses xs–sm; "between
	   thoughts" uses md–lg; "between chapters" uses xl–section. */
	--sumbra-space-3xs: 4px;
	--sumbra-space-2xs: 8px;
	--sumbra-space-xs: 12px;
	--sumbra-space-sm: 20px;
	--sumbra-space-md: 32px;
	--sumbra-space-lg: 48px;
	--sumbra-space-xl: 64px;
	--sumbra-space-section: 48px;   /* standard chapter (Recognition/Projects/Ideas) */
	--sumbra-space-hero-top: 40px;  /* deliberately tight — hero sits right under the header */

	/* Inset used by internal panels that sit one level inside .sumbra-container
	   (Process, Point of View) — a token, not a magic number, equal on both
	   panels so their text edges relate to each other exactly. */
	--sumbra-panel-pad: 40px;

	/* Motion (kept near-zero; static-first per the handoff) */
	--sumbra-transition: 150ms ease;
}

/* Component-specific tablet transition (Projects/Ideas asymmetry needs to
   resolve before the main 900px nav breakpoint, or the compositions get
   cramped between ~901–1100px). Nav/header breakpoint stays at 900px. */
@media (max-width: 1100px) {
	:root { --sumbra-gutter: 22px; }
}

@media (max-width: 782px) {
	:root {
		--sumbra-gutter: 20px;
		--sumbra-space-section: 40px;
		--sumbra-space-hero-top: 24px;
		--sumbra-panel-pad: var(--sumbra-gutter);
	}
}

/* -------------------------------------------------------------------------
   Reset-lite + base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--sumbra-marfil);
	color: var(--sumbra-carbon);
	font-family: var(--sumbra-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a, a:link, a:visited, a:hover, a:active, a:focus { color: inherit; text-decoration: none; }

/* Belt-and-braces: some WordPress/Elementor defaults specifically target
   article/entry content links with their own colour; make sure ordinary
   post content (e.g. an Ideas article body) also stays on the palette. */
.entry-content a, .entry-content a:visited, article a, article a:visited {
	color: var(--sumbra-carbon);
	text-decoration: underline;
	text-decoration-color: var(--sumbra-lino);
}
.entry-content a:hover, article a:hover { color: var(--sumbra-piedra); }

ul { margin: 0; padding: 0; list-style: none; }

button {
	font-family: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
}

/* Visible keyboard focus everywhere — accessibility is not optional. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--sumbra-carbon);
	outline-offset: 3px;
}

.sumbra-skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	top: 0;
	left: 0;
	background: var(--sumbra-carbon);
	color: var(--sumbra-blanco);
	z-index: 1000;
}
.sumbra-skip-link:focus {
	width: auto;
	height: auto;
	padding: 12px 20px;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	left: var(--sumbra-gutter);
	top: var(--sumbra-gutter);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* -------------------------------------------------------------------------
   Grid / container
   ------------------------------------------------------------------------- */
.sumbra-container {
	max-width: var(--sumbra-container-max);
	margin-inline: auto;
	padding-inline: var(--sumbra-gutter);
}

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

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */
.sumbra-h1, .sumbra-h2, .sumbra-h3, .sumbra-display {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	line-height: 1.05;
	margin: 0 0 24px;
	color: var(--sumbra-carbon);
	letter-spacing: -0.01em;
}
/* Hero — the largest voice on the page. */
.sumbra-h1 { font-size: clamp(2.75rem, 2rem + 3.6vw, 5rem); } /* 5.9.15: was 3rem–5.75rem; hero stacked to 5 lines */
/* A very long word (e.g. "electrodomésticos") at the 3rem minimum is wider than a 320–360px
   screen; let it break instead of overflowing. No effect when every word fits. */
.sumbra-h1, .sumbra-h2, .sumbra-display { overflow-wrap: break-word; }
/* Grid items default to min-width:auto, which lets one long word widen the whole track. */
.sumbra-hero__grid > * { min-width: 0; }

/* "Major interruption" scale — Point of View statement and the Final CTA
   headline are narrative beats, not section labels, so they read close to
   H1 scale rather than as ordinary section copy. */
.sumbra-display { font-size: clamp(2.4rem, 1.9rem + 3.4vw, 4.5rem); line-height: 1.08; }

/* Ordinary section heads (Recognition, Projects, Process, Ideas). */
.sumbra-h2 { font-size: clamp(2.1rem, 1.7rem + 2.2vw, 3.4rem); }

.sumbra-h2--light, .sumbra-h1--light, .sumbra-display--light { color: var(--sumbra-marfil); }

.sumbra-eyebrow {
	font-family: var(--sumbra-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sumbra-piedra);
	margin: 0 0 12px;
}
.sumbra-eyebrow--light { color: var(--sumbra-lino); }

.sumbra-lead {
	max-width: 46ch;
	color: var(--sumbra-piedra);
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.55;
	margin: 0 0 32px;
}
.sumbra-body {
	max-width: 62ch;
	color: var(--sumbra-piedra);
	margin: 0 0 24px;
}
.sumbra-body--light { color: var(--sumbra-lino); }

.sumbra-accent-line {
	font-family: var(--sumbra-font-display);
	font-style: italic;
	font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
	color: var(--sumbra-piedra);
	margin: 0 0 24px;
	line-height: 1.3;
}

.sumbra-wordmark {
	font-family: var(--sumbra-font-display);
	font-size: 1.55rem;
	letter-spacing: 0.13em;
	color: var(--sumbra-carbon);
}
.sumbra-wordmark--light { color: var(--sumbra-marfil); }

/* -------------------------------------------------------------------------
   Buttons / links
   ------------------------------------------------------------------------- */
.sumbra-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	font-family: var(--sumbra-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 12px 28px;
	border-radius: 0; /* square corners per spec */
	transition: opacity var(--sumbra-transition);
	box-sizing: border-box;
}
/* !important is used deliberately on this component only, and only on
   colour: our own rules are correct in isolation (verified), so a
   real-world invisible label can only mean an external stylesheet
   (most likely Elementor's own global-colour CSS) is winning purely
   because it uses !important — which always beats a normal-weight rule
   regardless of specificity or load order. Matching it here is the
   reliable fix; everything else on this component stays !important-free. */
/* Maximum-specificity fallback: an ID selector outranks any class-based
   rule regardless of !important on either side, short of another
   ID+!important rule (vanishingly unlikely from a third-party plugin
   targeting generic links/buttons). Applied via unique IDs on every
   primary CTA instance, as the final guarantee layer above the class
   rules already in place. */
#sumbra-cta-header, #sumbra-cta-header-mobile, #sumbra-cta-hero, #sumbra-cta-fallback,
#sumbra-cta-header:link, #sumbra-cta-header-mobile:link, #sumbra-cta-hero:link, #sumbra-cta-fallback:link,
#sumbra-cta-header:visited, #sumbra-cta-header-mobile:visited, #sumbra-cta-hero:visited, #sumbra-cta-fallback:visited,
#sumbra-cta-header:hover, #sumbra-cta-header-mobile:hover, #sumbra-cta-hero:hover, #sumbra-cta-fallback:hover,
#sumbra-cta-header:focus, #sumbra-cta-header-mobile:focus, #sumbra-cta-hero:focus, #sumbra-cta-fallback:focus,
#sumbra-cta-header:active, #sumbra-cta-header-mobile:active, #sumbra-cta-hero:active, #sumbra-cta-fallback:active {
	background-color: #1A1A1A !important;
	color: #F2EEE8 !important;
}
#sumbra-cta-final,
#sumbra-cta-final:link, #sumbra-cta-final:visited, #sumbra-cta-final:hover, #sumbra-cta-final:focus, #sumbra-cta-final:active {
	background-color: #F2EEE8 !important;
	color: #1A1A1A !important;
}

a.sumbra-btn.sumbra-btn--primary,
button.sumbra-btn.sumbra-btn--primary {
	background: var(--sumbra-carbon) !important;
	color: var(--sumbra-blanco) !important;
	border: none;
	cursor: pointer;
}
a.sumbra-btn.sumbra-btn--primary:link,
a.sumbra-btn.sumbra-btn--primary:visited,
a.sumbra-btn.sumbra-btn--primary:hover,
a.sumbra-btn.sumbra-btn--primary:focus,
a.sumbra-btn.sumbra-btn--primary:active,
button.sumbra-btn.sumbra-btn--primary:hover,
button.sumbra-btn.sumbra-btn--primary:focus,
button.sumbra-btn.sumbra-btn--primary:focus-visible,
button.sumbra-btn.sumbra-btn--primary:active {
	color: var(--sumbra-blanco) !important;
}
.sumbra-btn--primary:hover { opacity: 0.85; }
button.sumbra-btn.sumbra-btn--primary:focus-visible {
	outline: 2px solid var(--sumbra-carbon);
	outline-offset: 2px;
}

/* The Final CTA sits on a Carbón section, so its button must invert
   (light button, dark text) to stay visible — declared with the same
   !important weight and after .sumbra-btn--primary in source order, so
   it correctly wins on elements carrying both classes. */
a.sumbra-btn.sumbra-btn--on-dark,
a.sumbra-btn.sumbra-btn--on-dark:link,
a.sumbra-btn.sumbra-btn--on-dark:visited,
a.sumbra-btn.sumbra-btn--on-dark:hover,
a.sumbra-btn.sumbra-btn--on-dark:focus,
a.sumbra-btn.sumbra-btn--on-dark:active,
button.sumbra-btn.sumbra-btn--on-dark,
button.sumbra-btn.sumbra-btn--on-dark:hover,
button.sumbra-btn.sumbra-btn--on-dark:focus,
button.sumbra-btn.sumbra-btn--on-dark:active {
	background: var(--sumbra-marfil) !important;
	color: var(--sumbra-carbon) !important;
}

.sumbra-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sumbra-carbon);
	white-space: nowrap;
	padding: 6px 0;
}

/* Long owner-entered link labels (e.g. the conversion-bridge link, homepage
   labels) must wrap instead of pushing the page wider than the screen. Only
   below 900px: the desktop tile/card layouts were designed around nowrap. */
@media (max-width: 900px) {
	/* --light links live inside padded tiles/panels, where the label already fits
	   by using the panel's spare padding; wrapping there changed an approved layout. */
	.sumbra-link-arrow:not(.sumbra-link-arrow--light) { white-space: normal; text-align: left; }
}
.sumbra-link-arrow--light { color: var(--sumbra-marfil); }
.sumbra-link-arrow span { transition: transform var(--sumbra-transition); }
.sumbra-link-arrow:hover span { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   Media / placeholders
   ------------------------------------------------------------------------- */
.sumbra-media, .sumbra-media__img { width: 100%; }
img.sumbra-media__img { object-fit: cover; height: 100%; }

.sumbra-placeholder,
.sumbra-temp-photo {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	background: var(--sumbra-lino);
}
.sumbra-temp-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sumbra-placeholder svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Static tree-shadow motif: a quiet, low-opacity dappled-light texture.
   Purely decorative (aria-hidden via role on containers where used),
   no motion in Phase 1, respects prefers-reduced-motion by having none. */
.sumbra-tree-shadow {
	position: relative;
	background-image: url("../images/tree-shadow-overlay.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.sumbra-header {
	background: var(--sumbra-marfil);
	border-bottom: 1px solid var(--sumbra-lino);
	position: relative;
	z-index: 100;
}
.sumbra-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sumbra-space-md);
	min-height: 76px;
}
.sumbra-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
}
.sumbra-nav__link,
.sumbra-hamburger,
.sumbra-mobile-nav__toggle,
.sumbra-mobile-nav__list a {
	-webkit-tap-highlight-color: transparent;
}
.sumbra-nav__link {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 0;
	background: transparent;
	color: var(--sumbra-carbon);
	border: none;
	font-family: var(--sumbra-font-body);
	cursor: pointer;
}
.sumbra-nav__link:hover,
.sumbra-nav__link:focus,
.sumbra-nav__link:active,
.sumbra-nav__link[aria-expanded="true"] {
	background: transparent;
	color: var(--sumbra-carbon);
}
.sumbra-nav__link:focus-visible {
	outline: 2px solid var(--sumbra-carbon);
	outline-offset: 2px;
}
.sumbra-nav__item--has-dropdown { position: relative; }
.sumbra-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--sumbra-marfil);
	border-top: 2px solid var(--sumbra-carbon);
	box-shadow: none;
	padding: 12px 0;
	display: none;
}
.sumbra-dropdown li a {
	display: block;
	padding: 10px 20px;
	font-size: 0.85rem;
}
.sumbra-dropdown li a:hover { background: var(--sumbra-lino); }

.sumbra-nav__item--has-dropdown:hover .sumbra-dropdown,
.sumbra-nav__item--has-dropdown:focus-within .sumbra-dropdown,
.sumbra-nav__item--has-dropdown .sumbra-dropdown.is-open {
	display: block;
}

.sumbra-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	padding: 11px;
	min-width: 44px;
	min-height: 44px;
	background: transparent;
	border: none;
	cursor: pointer;
}
.sumbra-hamburger:hover,
.sumbra-hamburger:focus,
.sumbra-hamburger:active,
.sumbra-hamburger[aria-expanded="true"] { background: transparent; }
.sumbra-hamburger:focus-visible { outline: 2px solid var(--sumbra-carbon); outline-offset: 2px; }
.sumbra-hamburger span { width: 22px; height: 2px; background: var(--sumbra-carbon); }

.sumbra-mobile-nav { display: none; }

/* 5.9.30 */
@media (min-width: 1181px) and (max-width: 1279px) {
	.sumbra-nav__list { gap: 20px; }
}
.sumbra-nav__link, .sumbra-header__cta { white-space: nowrap; }

/* 5.9.30: the one-row header needs ~1160px; below 1181px the menu button takes over
   (was 900px, which let the CTA and nav overflow the viewport at 901–999px). */
@media (max-width: 1180px) {
	.sumbra-nav, .sumbra-header__cta { display: none; }
	.sumbra-hamburger { display: flex; }
	.sumbra-mobile-nav {
		border-top: 1px solid var(--sumbra-lino);
		padding: 20px var(--sumbra-gutter) 28px;
	}
	.sumbra-mobile-nav[hidden] { display: none; }
	.sumbra-mobile-nav:not([hidden]) { display: block; }
	.sumbra-mobile-nav__list > li { border-bottom: 1px solid var(--sumbra-lino); }
	.sumbra-mobile-nav__toggle, .sumbra-mobile-nav__list > li > a {
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding: 16px 0;
		font-size: 0.9rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		min-height: 44px;
		align-items: center;
		background: transparent;
		color: var(--sumbra-carbon);
		border: none;
		font-family: var(--sumbra-font-body);
		cursor: pointer;
		text-align: left;
	}
	.sumbra-mobile-nav__toggle:hover,
	.sumbra-mobile-nav__toggle:focus,
	.sumbra-mobile-nav__toggle:active,
	.sumbra-mobile-nav__toggle[aria-expanded="true"] {
		background: transparent;
		color: var(--sumbra-carbon);
	}
	.sumbra-mobile-nav__toggle:focus-visible { outline: 2px solid var(--sumbra-carbon); outline-offset: -2px; }
	.sumbra-mobile-nav__sub { padding-left: 12px; }
	.sumbra-mobile-nav__sub[hidden] { display: none; }
	/* min-height was 36px but the rows rendered ~37px (their padding + one line already
	   exceeded it), below the 44px comfort target the trigger and main links meet.
	   Only the minimum changes: same font, padding and alignment. */
	.sumbra-mobile-nav__sub li a { display: block; padding: 7px 0; font-size: 0.9rem; min-height: 44px; display: flex; align-items: center; }
	.sumbra-mobile-nav__cta { display: block; text-align: center; margin-top: 20px; }
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.sumbra-hero { padding-top: var(--sumbra-space-hero-top); padding-bottom: var(--sumbra-space-lg); }
.sumbra-hero__grid {
	display: grid;
	grid-template-columns: 9fr 11fr;
	gap: var(--sumbra-space-xl);
	align-items: start;
}
.sumbra-hero__copy { max-width: 540px; }
.sumbra-hero .sumbra-h1 { max-width: 14ch; margin-bottom: var(--sumbra-space-sm); } /* 5.9.15: was 10ch */
.sumbra-hero__ctas { display: flex; align-items: center; gap: var(--sumbra-space-md); flex-wrap: wrap; margin-bottom: var(--sumbra-space-lg); }
.sumbra-hero__context {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--sumbra-piedra);
	text-transform: uppercase;
	border-top: 1px solid var(--sumbra-lino);
	padding-top: var(--sumbra-space-sm);
}
.sumbra-hero__media { align-self: stretch; }
.sumbra-hero__media .sumbra-media__img,
.sumbra-hero__media .sumbra-placeholder,
.sumbra-hero__media .sumbra-temp-photo { height: 100%; min-height: 460px; aspect-ratio: auto; }

@media (max-width: 1100px) and (min-width: 901px) {
	.sumbra-hero__grid { grid-template-columns: 6fr 6fr; gap: 32px; }
}

@media (max-width: 900px) {
	.sumbra-hero__grid { grid-template-columns: 1fr; }
	.sumbra-hero__grid { gap: var(--sumbra-space-md); } /* 5.9.20: was 64px between copy and image on phones */
	.sumbra-hero__copy { max-width: none; }
	.sumbra-hero__ctas:last-child { margin-bottom: 0; } /* 5.9.20: the grid gap already separates it from the image */
	.sumbra-hero .sumbra-h1 { max-width: none; }
	.sumbra-hero__media .sumbra-media__img,
	.sumbra-hero__media .sumbra-placeholder,
	.sumbra-hero__media .sumbra-temp-photo { min-height: 340px; }
}

/* -------------------------------------------------------------------------
   Recognition
   ------------------------------------------------------------------------- */
.sumbra-recognition__grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--sumbra-space-xl);
	align-items: center;
}
.sumbra-recognition__copy .sumbra-h2 { max-width: 11ch; }
.sumbra-recognition__options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sumbra-space-md) var(--sumbra-space-lg);
	border-top: 1px solid var(--sumbra-lino);
	padding-top: var(--sumbra-space-md);
	margin-top: 0;
}
.sumbra-recognition__options li {
	font-family: var(--sumbra-font-display);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
	font-weight: 500;
	line-height: 1.25;
	border-left: 2px solid var(--sumbra-carbon);
	padding-left: var(--sumbra-space-sm);
}
@media (max-width: 1100px) and (min-width: 901px) {
	.sumbra-recognition__grid { gap: 32px; }
}
@media (max-width: 900px) {
	.sumbra-recognition__grid { grid-template-columns: 1fr; }
	.sumbra-recognition__copy .sumbra-h2 { max-width: none; }
	.sumbra-recognition__options { grid-template-columns: 1fr; gap: 20px; }
}

/* -------------------------------------------------------------------------
   Section head (eyebrow/title + link, shared pattern)
   ------------------------------------------------------------------------- */
.sumbra-section__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--sumbra-space-md);
	margin-bottom: var(--sumbra-space-lg);
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Projects
   ------------------------------------------------------------------------- */
/* Asymmetric/editorial composition (handoff §6): one featured project
   carries the section, two secondary projects establish a quieter rhythm
   beside it — never three identical cards. */
.sumbra-projects__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--sumbra-space-xl);
	align-items: start;
}
.sumbra-projects__secondary {
	display: grid;
	gap: var(--sumbra-space-lg);
}
.sumbra-project-card--featured .sumbra-media__img,
.sumbra-project-card--featured .sumbra-placeholder { aspect-ratio: 5/6; }
.sumbra-project-card--secondary .sumbra-media__img,
.sumbra-project-card--secondary .sumbra-placeholder { aspect-ratio: 4/3; }

.sumbra-project-card__title {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 2rem);
	margin: var(--sumbra-space-sm) 0 var(--sumbra-space-3xs);
	color: var(--sumbra-carbon);
}
.sumbra-project-card--secondary .sumbra-project-card__title { font-size: 1.25rem; margin-top: var(--sumbra-space-xs); }
.sumbra-project-card__location { color: var(--sumbra-piedra); font-size: 0.95rem; margin: 0 0 var(--sumbra-space-3xs); }
.sumbra-project-card__systems {
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sumbra-piedra);
}
/* 5.6.0 — honest states: one genuine project, or entries without a real
   photograph, read as text-led editorial entries under a hairline (never an
   empty image frame or a borrowed picture). */
.sumbra-projects__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.sumbra-projects__grid--solo .sumbra-project-card--featured .sumbra-media__img { aspect-ratio: 4/3; }
.sumbra-project-card--text { display: block; border-top: 1px solid var(--sumbra-lino); padding-top: var(--sumbra-space-sm); }
.sumbra-project-card--text .sumbra-project-card__title { margin-top: 0; }

@media (max-width: 1100px) and (min-width: 901px) {
	.sumbra-projects__grid { grid-template-columns: 1.2fr 1fr; gap: 28px; }
	.sumbra-projects__secondary { gap: 28px; }
}
@media (max-width: 900px) {
	.sumbra-projects__grid, .sumbra-projects__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: none; gap: 32px; }
	.sumbra-project-card--featured .sumbra-media__img,
	.sumbra-project-card--featured .sumbra-placeholder,
	.sumbra-project-card--secondary .sumbra-media__img,
	.sumbra-project-card--secondary .sumbra-placeholder { aspect-ratio: 4/5; }
}

/* -------------------------------------------------------------------------
   Solutions
   ------------------------------------------------------------------------- */
.sumbra-solutions { padding-block: 0; }
.sumbra-solutions__grid {
	display: grid;
	grid-template-columns: 1.4fr 1.4fr 1fr;
	gap: 4px;
}
.sumbra-solution-tile {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: flex-end;
	background: var(--sumbra-carbon);
	overflow: hidden;
}
/* 5.9.40: a real photo set in the homepage fields (not only the placeholder / temp wrappers)
   fills the tile as a cover background; without this it fell back to its own intrinsic size. */
.sumbra-solution-tile > .sumbra-media__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.sumbra-solution-tile .sumbra-placeholder,
.sumbra-solution-tile .sumbra-temp-photo {
	position: absolute;
	inset: 0;
	height: 100%;
	z-index: 0;
}
/* Flat, single-colour scrim for text legibility — sits between the
   full-richness photo (z-index 0) and the text content (z-index 2).
   This is not a gradient: one solid colour at one fixed opacity, applied
   as a separate layer so the photo itself is never desaturated the way
   a direct opacity reduction on the image would be. */
.sumbra-solution-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sumbra-carbon);
	opacity: 0.45;
	z-index: 1;
}
/* 5.9.38: on the tiles that carry a photo, the scrim is bottom-weighted
   (owner-approved) so the title and "Ver soluciones" link sit on ~73% carbon while
   the upper part of the photograph keeps more of its light. The dark
   (Automatización) tile has no photo and keeps the rule above. Contrast measured
   under the real text rects at 360-1418px: >= 4.9:1 (small text) / well above 3:1 (titles). */
.sumbra-solution-tile:not(.sumbra-solution-tile--dark)::after {
	background: linear-gradient(to bottom, rgba(26, 26, 26, 0.10) 0%, rgba(26, 26, 26, 0.12) 16%, rgba(26, 26, 26, 0.73) 40%, rgba(26, 26, 26, 0.73) 100%);
	opacity: 1;
}
.sumbra-solution-tile__content {
	position: relative;
	z-index: 2;
	padding: 28px;
}
.sumbra-solution-tile__title {
	overflow-wrap: break-word; /* a long word (e.g. Automatización) wraps instead of being clipped by the tile */
	font-family: var(--sumbra-font-display);
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
	color: var(--sumbra-marfil);
	margin: 0 0 20px;
}
.sumbra-solution-tile { min-height: 380px; }
.sumbra-solution-tile__content { padding: 36px; }
/* 5.9.42: on the narrow 3-column desktop tile the Automatización photo (5:4) is cropped to ~70% of its
   width; anchor it right so the wall keypad stays in frame. Desktop only (>= 901px, the 3-column layout);
   tablet/phone keep the centred crop. Scoped to this tile; other tiles untouched. */
@media (min-width: 901px) {
	.sumbra-solution-tile--automation > .sumbra-media__img { object-position: 100% 50%; }
}
@media (max-width: 900px) {
	.sumbra-solutions__grid { grid-template-columns: 1fr; }
	.sumbra-solution-tile { min-height: 300px; }
}

/* -------------------------------------------------------------------------
   Process + Point of View
   ------------------------------------------------------------------------- */
.sumbra-process-pov { padding-block: 0; margin-top: var(--sumbra-space-lg); }
.sumbra-process-pov__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 0;
}
.sumbra-process {
	background: var(--sumbra-lino);
	padding: 56px var(--sumbra-panel-pad);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sumbra-process .sumbra-h2 { max-width: 12ch; }
.sumbra-process__steps { display: flex; flex-direction: column; gap: var(--sumbra-space-sm); margin-top: var(--sumbra-space-md); max-width: 22ch; }
.sumbra-process__steps li {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: var(--sumbra-space-md);
	padding-bottom: var(--sumbra-space-sm);
	border-bottom: 1px solid var(--sumbra-lino);
}
.sumbra-process__steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.sumbra-process__num { font-family: var(--sumbra-font-display); font-size: 1.5rem; color: var(--sumbra-piedra); min-width: 2ch; }
.sumbra-process__steps li span:last-child {
	/* 5.4.5: an unusually long editable label wraps instead of widening the page. */
	min-width: 0;
	overflow-wrap: anywhere;
	font-family: var(--sumbra-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sumbra-carbon);
}

/* Point of View: a deliberate narrative interruption, not section copy —
   near-hero display scale, generous padding, statement given room to be
   read as a single held breath rather than skimmed. */
.sumbra-pov {
	background-color: var(--sumbra-carbon);
	color: var(--sumbra-marfil);
	padding: 56px var(--sumbra-panel-pad);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sumbra-pov .sumbra-display { max-width: 11ch; margin-bottom: var(--sumbra-space-sm); }
.sumbra-pov .sumbra-body--light { max-width: 42ch; margin-bottom: var(--sumbra-space-sm); }

@media (max-width: 900px) {
	.sumbra-process-pov__grid { grid-template-columns: 1fr; }
	.sumbra-pov { padding: 40px var(--sumbra-panel-pad); }
}

/* -------------------------------------------------------------------------
   Ideas
   ------------------------------------------------------------------------- */
.sumbra-ideas__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--sumbra-space-xl);
	align-items: start;
}
.sumbra-ideas__grid--solo { grid-template-columns: 1fr; max-width: 760px; }

.sumbra-idea-card--featured .sumbra-media__img,
.sumbra-idea-card--featured .sumbra-placeholder { aspect-ratio: 4/3; }
.sumbra-idea-card__title {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem);
	line-height: 1.15;
	margin: 20px 0 10px;
}

/* 5.6.0 — an article without a real featured image is a text-led entry. */
.sumbra-idea-card--text { display: block; border-top: 1px solid var(--sumbra-lino); padding-top: var(--sumbra-space-sm); }
.sumbra-idea-card--text .sumbra-idea-card__title { margin-top: 10px; }

/* Secondary readings: real cards (image + title), not thumbnail rows —
   sized to genuinely balance the dominant feature rather than reading as
   a thin sidebar list. Still visually secondary: smaller title scale,
   no eyebrow-to-arrow chrome, quieter than the dominant treatment. */
.sumbra-ideas__secondary { display: flex; flex-direction: column; gap: var(--sumbra-space-lg); }
.sumbra-idea-card--secondary {
	display: block;
}
.sumbra-idea-card--secondary .sumbra-media__img,
.sumbra-idea-card--secondary .sumbra-placeholder,
.sumbra-idea-card--secondary .sumbra-temp-photo { aspect-ratio: 16/10; }
.sumbra-idea-card--secondary .sumbra-idea-card__title {
	font-size: 1.35rem;
	line-height: 1.2;
	font-weight: 500;
	margin: var(--sumbra-space-sm) 0 4px;
}

/* 5.9.43: removed the CSS demo-photo fallbacks (temp-photography project-1/2) that sat under the two
   secondary Idea images; if a real image ever fails, nothing from the demo set can show. */

@media (max-width: 1100px) and (min-width: 901px) {
	.sumbra-ideas__grid { grid-template-columns: 1.2fr 1fr; gap: 36px; }
}
@media (max-width: 900px) {
	.sumbra-ideas__grid, .sumbra-ideas__grid--solo { grid-template-columns: 1fr; max-width: none; gap: 32px; }
}

/* -------------------------------------------------------------------------
   Final CTA
   ------------------------------------------------------------------------- */
.sumbra-final-cta { background-color: var(--sumbra-carbon); padding-block: var(--sumbra-space-xl); }
.sumbra-final-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.sumbra-final-cta .sumbra-display { margin-bottom: 0; max-width: 14ch; }
@media (max-width: 600px) {
	.sumbra-final-cta { padding-block: var(--sumbra-space-lg); }
	.sumbra-final-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.sumbra-footer { background: var(--sumbra-carbon); color: var(--sumbra-lino); padding-block: var(--sumbra-space-lg) var(--sumbra-space-md); }
.sumbra-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--sumbra-space-md);
}
.sumbra-footer h2 {
	font-family: var(--sumbra-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sumbra-arena);
	margin: 0 0 var(--sumbra-space-sm);
}
.sumbra-footer ul li { margin-bottom: var(--sumbra-space-3xs); font-size: 0.9rem; line-height: 1.4; }
.sumbra-footer ul li a { display: inline-block; padding: 4px 0; }
.sumbra-footer a:hover { color: var(--sumbra-marfil); }
.sumbra-footer__tagline { font-size: 0.85rem; margin-top: var(--sumbra-space-xs); max-width: 32ch; }
.sumbra-footer__legal {
	grid-column: 1 / -1;
	border-top: 1px solid rgba(216,210,198,0.2);
	margin-top: var(--sumbra-space-md);
	padding-top: var(--sumbra-space-sm);
	display: flex;
	justify-content: space-between;
	gap: var(--sumbra-space-2xs);
	flex-wrap: wrap;
	font-size: 0.75rem;
}
@media (max-width: 900px) {
	.sumbra-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------------------
   Generic prose fallback (Solution stub pages, etc.)
   ------------------------------------------------------------------------- */
.sumbra-prose { max-width: 68ch; color: var(--sumbra-piedra); }
.sumbra-note { color: var(--sumbra-piedra); }

/* "Ver todas las soluciones" — set apart from the five individual solutions. */
.sumbra-dropdown__all { border-top: 1px solid var(--sumbra-lino); margin-top: 4px; padding-top: 4px; }
.sumbra-mobile-nav__all { border-top: 1px solid var(--sumbra-lino); margin-top: 4px; }

/* 5.9.6: visible label for illustrative / demonstration imagery. */
:is(.sumbra-media, .sumbra-nos-case__media, .sumbra-sol-image-text__media, .sumbra-proj-hero__media, .sumbra-proj-decision__media, .sumbra-proj-gallery__item, .sumbra-proj-gallery__single, .sumbra-proj-gallery__pair):has(> .sumbra-illustrative) { position: relative; }
.sumbra-illustrative {
	position: absolute; left: .75rem; bottom: .75rem; z-index: 2;
	padding: .25rem .6rem; font: 500 .75rem/1.2 var(--sumbra-font-body);
	letter-spacing: .04em; text-transform: uppercase;
	background: rgba(255,255,255,.88); color: #2b2b2b;
}

/* 5.9.10 — a single highlighted project on the homepage: image and text side by side, no empty half. */
@media (min-width: 901px) {
	.sumbra-projects__grid--solo { max-width: none; }
	.sumbra-projects__grid--solo .sumbra-project-card:not(.sumbra-project-card--text) {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		column-gap: var(--sumbra-space-xl);
		align-content: center;
		align-items: center;
	}
	.sumbra-projects__grid--solo .sumbra-project-card:not(.sumbra-project-card--text) .sumbra-media { grid-column: 1; grid-row: 1 / span 4; }
	.sumbra-projects__grid--solo .sumbra-project-card:not(.sumbra-project-card--text) > p { grid-column: 2; }
	.sumbra-projects__grid--solo .sumbra-project-card--featured .sumbra-media__img { aspect-ratio: 3/2; }
}

/* 5.9.11 — one-line description on homepage project cards (the project's own statement). */
.sumbra-project-card__desc { margin: 0.5rem 0 0; max-width: 42ch; font-size: 0.95rem; line-height: 1.5; color: var(--sumbra-piedra); }

/* 5.9.14 — footer links: comfortable tap targets on touch screens. */
@media (max-width: 900px) {
	.sumbra-footer ul li { margin-bottom: 0; }
	.sumbra-footer ul li a { display: flex; align-items: center; min-height: 44px; padding: 0; }
	.sumbra-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 5.9.46 — ergonomics: uppercase micro-labels from 11.5–12px to 13px, and
   arrow links get a 44px touch height without moving the layout (padding is
   offset by negative margin). */
.sumbra-eyebrow,
.sumbra-footer h2,
.sumbra-sol-guide__cols,
.sumbra-sol-guide__label,
.sumbra-nos-lenses__item dt,
.sumbra-proj-details__label { font-size: 0.8125rem; }
.sumbra-link-arrow { padding: 11px 0; margin-block: -5px; }

/* 5.9.47 — footer legal line from 12px to 13px. */
.sumbra-footer__legal, .sumbra-footer__legal a { font-size: 0.8125rem; }