/* Fonts — self-hosted Metropolis */
@font-face {
	font-family: 'Metropolis';
	src: url('../fonts/metropolis/Metropolis-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Metropolis';
	src: url('../fonts/metropolis/Metropolis-RegularItalic.otf') format('opentype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Metropolis';
	src: url('../fonts/metropolis/Metropolis-Medium.otf') format('opentype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Metropolis';
	src: url('../fonts/metropolis/Metropolis-SemiBold.otf') format('opentype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Metropolis';
	src: url('../fonts/metropolis/Metropolis-Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Metropolis';
	src: url('../fonts/metropolis/Metropolis-ExtraBold.otf') format('opentype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* Tokens */
:root {
	--graphite: #57585A;
	--lime: #ACBE38;
	--ink: #242424;
	--paper: #FFFFFF;
	--paper-muted: #F4F4F2;
	--nav-height: 84px;
	--measure: 62ch;
	--font: 'Metropolis', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	margin: 0;
	font-family: var(--font);
	font-weight: 400;
	line-height: 1.6;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 800; line-height: 1.1; margin: 0 0 1rem; text-transform: lowercase; }
p { margin: 0 0 1.25rem; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: var(--font); cursor: pointer; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link {
	position: fixed;
	top: -100px;
	left: 1rem;
	z-index: 1000;
	background: var(--lime);
	color: var(--ink);
	padding: 0.75rem 1.25rem;
	transition: top 0.2s ease;
}
.skip-link:focus {
	position: fixed;
	top: 1rem;
	width: auto;
	height: auto;
	clip: auto;
}

:focus-visible {
	outline: 3px solid var(--lime);
	outline-offset: 3px;
}
.section--paper :focus-visible,
.section--paper-muted :focus-visible,
.acc--paper :focus-visible,
.acc--paper-muted :focus-visible,
.acc--paper.acc__bar:focus-visible,
.acc--paper-muted.acc__bar:focus-visible {
	outline-color: var(--ink);
}

/* Wordmark */
.wordmark {
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: 1.5rem;
	color: var(--paper);
	white-space: nowrap;
}
.wordmark .tick { color: var(--lime); }

/* Header / nav */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--nav-height);
	display: flex;
	align-items: center;
	background: var(--graphite);
	transition: background-color 0.25s ease;
}
.site-header.is-scrolled {
	box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}
/* Home hero carries its own logo — the nav bar only assembles once you scroll past it. */
.home .site-header {
	opacity: 0;
	transform: translateY(-12px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.25s ease;
}
.home .site-header.is-scrolled,
.home .site-header:focus-within {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.home .site-header { transition: opacity 0.2s ease; transform: none; }
}
.site-header__inner {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.primary-nav__list {
	display: flex;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}
.primary-nav__list a {
	color: var(--paper);
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.primary-nav__list a:hover,
.primary-nav__list a.is-active {
	color: var(--lime);
	border-color: var(--lime);
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	padding: 0;
}
.nav-toggle__bar {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--paper);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 900px) {
	.nav-toggle { display: flex; }
	.primary-nav {
		position: fixed;
		inset: var(--nav-height) 0 0 0;
		background: var(--graphite);
		transform: translateY(-8px);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease, transform 0.2s ease;
	}
	.primary-nav.is-open {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.primary-nav__list {
		flex-direction: column;
		padding: 2.5rem clamp(1.25rem, 4vw, 3rem);
		gap: 1.5rem;
	}
	.site-header:has(.primary-nav.is-open) { background-color: var(--graphite); }
}

/* Sections */
.section {
	padding: clamp(6rem, 10vw, 9rem) 0;
	scroll-margin-top: var(--nav-height);
}
.section--lime { background: var(--lime); color: var(--ink); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--paper-muted { background: var(--paper-muted); color: var(--ink); }
.section--solo { min-height: calc(100vh - var(--nav-height)); display: flex; align-items: center; }
.section__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.section__inner--narrow { max-width: 900px; }

.heading-light { font-weight: 400; }

.text-block, .lede { max-width: var(--measure); }

.link-accent {
	color: var(--lime);
	font-weight: 600;
	border-bottom: 2px solid var(--lime);
	padding-bottom: 2px;
}
.section--paper .link-accent,
.section--paper-muted .link-accent,
.acc--paper .link-accent,
.acc--paper-muted .link-accent { color: var(--ink); border-color: var(--lime); }

.btn {
	display: inline-block;
	padding: 1rem 2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.875rem;
	border: 2px solid transparent;
	transition: opacity 0.2s ease;
}
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { opacity: 0.85; }
.section--lime .btn--lime,
.acc--lime .btn--lime { background: var(--ink); color: var(--paper); }

.dot-list li {
	position: relative;
	padding-left: 1.1rem;
	margin-bottom: 0.5rem;
}
.dot-list li::before {
	content: '·';
	color: var(--lime);
	font-weight: 800;
	position: absolute;
	left: 0;
	font-size: 1.2em;
	line-height: 1;
}

/* Hero — logo pinned top-left, text block pinned bottom-left */
.section--hero { min-height: 100vh; display: flex; padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.section--hero-compact { min-height: auto; padding: clamp(6rem, 12vw, 10rem) 0 clamp(3rem, 6vw, 5rem); }
.section--hero .section__inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
}
.hero-foot { max-width: 100%; }
.hero-subtitle {
	font-weight: 700;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	margin-bottom: 1.5rem;
}
#inicio .hero-subtitle { text-transform: lowercase; letter-spacing: 0.02em; font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
.tagline {
	font-size: clamp(1.1rem, 2.2vw, 1.5rem);
	font-weight: 400;
	max-width: 40ch;
	margin-bottom: 2.5rem;
}
.tagline__line { display: block; }

/* Hero entrance: wordmark, subtitle, tagline lines and CTA fade up in sequence */
@media (prefers-reduced-motion: no-preference) {
	#inicio .hero-subtitle,
	#inicio .tagline__line,
	#inicio .btn {
		opacity: 0;
		transform: translateY(16px);
		animation: hero-in 0.7s ease forwards;
	}
	#inicio .hero-subtitle { animation-delay: 0.1s; }
	#inicio .tagline__line:nth-child(1) { animation-delay: 0.35s; }
	#inicio .tagline__line:nth-child(2) { animation-delay: 0.45s; }
	#inicio .tagline__line:nth-child(3) { animation-delay: 0.55s; }
	#inicio .tagline__line:nth-child(4) { animation-delay: 0.65s; }
	#inicio .btn { animation-delay: 0.8s; }
}
@keyframes hero-in {
	to { opacity: 1; transform: none; }
}

/* Scroll reveal — sections fade/rise into place as they enter the viewport.
   Gated behind .js (set synchronously in <head>) so content stays visible
   with no script or no IntersectionObserver support. */
.js .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Estúdio */
.text-block p { margin-bottom: 2rem; }

.bio {
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	margin-top: clamp(3rem, 6vw, 5rem);
	align-items: start;
}
.bio__intro h3 { margin-bottom: 0.25rem; }
.bio__subtitle {
	font-style: italic;
	color: var(--graphite);
	margin-bottom: 0;
}
.bio__text .text-block,
.bio__text p { max-width: var(--measure); }

@media (max-width: 768px) {
	.bio { grid-template-columns: 1fr; }
}

/* Áreas */
.fields {
	display: grid;
	gap: clamp(3rem, 6vw, 5rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.field__divider {
	background: var(--lime);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	margin-bottom: 2rem;
}
.field__title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: 0.75rem;
}
.field__intro { max-width: var(--measure); font-size: 1.1rem; margin-bottom: 0; }
.subareas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: 2rem;
}
.panel-split .subareas { margin-top: 0; }
/* The bio already sits in a half-width column — don't split it again. */
.panel-split .bio { grid-template-columns: 1fr; gap: 0.75rem; margin-top: 2rem; }
.panel-split .bio__intro h3 { margin-bottom: 0; }
.panel-split .subarea p { margin-bottom: 0.9rem; }
.panel-split .lede { margin-bottom: 0; }
.subarea h4 { font-size: 1.15rem; margin-bottom: 0.75rem; }
.subarea p { font-size: 0.95rem; opacity: 0.9; }

/* Contato */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(220px, 380px) 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}
.contact-details a { display: inline-block; margin-bottom: 0.75rem; font-size: 1.15rem; }

@media (max-width: 768px) {
	.contact-grid { grid-template-columns: 1fr; }
}

/* CF7 form */
.wpcf7-form p { margin-bottom: 1.25rem; }
.wpcf7-form label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.9rem; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 2px solid var(--graphite);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: 1rem;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus { border-color: var(--lime); }
.wpcf7-form textarea { min-height: 140px; resize: vertical; }
.wpcf7-form input[type="submit"] {
	background: var(--ink);
	color: var(--paper);
	border: 0;
	padding: 1rem 2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.875rem;
}
.wpcf7-form input[type="submit"]:hover { background: var(--lime); color: var(--ink); }
.wpcf7-not-valid-tip { color: #B3261E; font-size: 0.85rem; margin-top: 0.4rem; }
.wpcf7-response-output {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border: 2px solid var(--lime);
}

/* Portfólio */
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: clamp(3rem, 6vw, 4rem);
}
.filter-chip {
	background: none;
	border: 2px solid var(--graphite);
	color: var(--ink);
	padding: 0.5rem 1.1rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.filter-chip.is-active,
.filter-chip:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }

.area-group { margin-bottom: clamp(3rem, 6vw, 5rem); }
.area-group__title { font-size: clamp(1.5rem, 3vw, 2rem); border-bottom: 3px solid var(--lime); padding-bottom: 1rem; margin-bottom: 2rem; }
.disciplina-group { margin-bottom: 2.5rem; }
.disciplina-group__title {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	color: var(--graphite);
	margin-bottom: 1.25rem;
}
.projeto-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
}
.projeto-card {
	display: block;
	background: var(--paper-muted);
	padding: 1.5rem;
	transition: background-color 0.2s ease;
}
.projeto-card:hover { background: var(--lime); }
.projeto-card__media { margin: -1.5rem -1.5rem 1rem; overflow: hidden; }
.projeto-card__media img { width: 100%; height: 160px; object-fit: cover; }
.projeto-card__title { font-family: var(--font); font-weight: 400; font-style: italic; font-size: 1.1rem; margin-bottom: 0.4rem; text-transform: none; }
.projeto-card__excerpt { font-size: 0.85rem; opacity: 0.75; margin: 0; }

.parcerias-list {
	columns: 4 220px;
	column-gap: 2.5rem;
	margin-top: 2rem;
}
.parcerias-list li {
	position: relative;
	padding: 0.4rem 0 0.4rem 1.1rem;
	break-inside: avoid;
	border-bottom: 1px solid rgba(0,0,0,0.08);
	font-size: 0.95rem;
}
.parcerias-list li::before {
	content: '·';
	color: var(--lime);
	font-weight: 800;
	position: absolute;
	left: 0;
	font-size: 1.2em;
	line-height: 1.3;
}

@media (max-width: 768px) {
	.parcerias-list { columns: 2 160px; }
}

/* Single projeto */
.projeto-title { font-style: italic; font-weight: 400; text-transform: none; font-size: clamp(2rem, 5vw, 3rem); }
.projeto-hero-media { margin-bottom: 2rem; }
.content { max-width: var(--measure); }

/* ==========================================================================
   Home accordion — the whole page is one giant menu.
   The rows are `position: sticky` with BOTH a top and a bottom offset, so a row
   you have passed pins to the top stack and a row still ahead pins to the bottom
   stack. The seven rows therefore always add up to the full screen, framing the
   open panel above and below. At rest each row is 1/7 of the viewport — the menu
   *is* the first screen — and they collapse to compact bars on the first scroll,
   which is what opens the band the panel content lives in.
   ========================================================================== */
.accordion {
	--bar: calc(100svh / var(--rows));
	/* Compact rows are tied to the viewport height so short windows keep a readable
	   band. Every collapsed row is the same height — the open one is marked by type
	   and opacity only. That is deliberate: a row that grew when it opened changed
	   the document's height while you scrolled, which shoved the page under the
	   scroll and made the open row flicker between two candidates. */
	--bar-compact: clamp(26px, 4.4vh, 38px);
	/* Height of the whole stack once collapsed, and the screen left over below it. */
	--stack: calc(var(--rows) * var(--bar-compact));
	--band: calc(100svh - var(--rows) * var(--bar));
}
@media (max-width: 600px) {
	.accordion {
		--bar-compact: clamp(24px, 4vh, 32px);
	}
}
.accordion.is-compact {
	--bar: var(--bar-compact);
	--band: calc(100svh - var(--stack));
	/* How tall a row grows while hovered, and by how much — the neighbours are
	   pushed aside by exactly that much below. */
	--bar-hover: calc(clamp(1.6rem, 4.5vw, 3.5rem) * 1.4);
	--grow: calc(var(--bar-hover) - var(--bar));
}

.acc__bar {
	position: sticky;
	top: calc(var(--i) * var(--bar));
	bottom: calc((var(--rows) - 1 - var(--i)) * var(--bar));
	z-index: calc(10 + var(--i));
	height: var(--bar);
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	padding-inline: max(clamp(1.25rem, 4vw, 3rem), calc((100% - 1400px) / 2 + clamp(1.25rem, 4vw, 3rem)));
	border-top: 1px solid currentColor;
	transition: height 0.45s ease, top 0.45s ease, bottom 0.45s ease;
}
.acc__label {
	font-weight: 800;
	text-transform: lowercase;
	letter-spacing: -0.01em;
	line-height: 1;
	font-size: clamp(1.6rem, 4.5vw, 3.5rem);
	transition: font-size 0.45s ease;
}
.accordion.is-compact .acc__label { font-size: clamp(0.8rem, 1.5vw, 1rem); }
.accordion.is-compact .is-current .acc__label { font-size: clamp(0.95rem, 1.9vw, 1.25rem); }
/* Hovering a collapsed row brings that one row's label back to the size it lands on
   at the entrance. The row grows *inwards* — pinned to the top stack it extends
   downwards, pinned to the bottom stack it extends upwards — so the growth never runs
   off the edge of the screen. Nothing is covered up: every row on the growing side is
   pushed along by the same amount, which for a sticky row means widening the offset
   it is pinned by. Rows after the hovered one belong to the top stack and move down;
   rows before it belong to the bottom stack and move up. */
.accordion.is-compact .acc__bar:hover { height: var(--bar-hover); }
.accordion.is-compact .acc__bar:hover ~ .acc__bar {
	top: calc(var(--i) * var(--bar) + var(--grow));
}
.accordion.is-compact .acc__bar:has( ~ .acc__bar:hover ) {
	bottom: calc((var(--rows) - 1 - var(--i)) * var(--bar) + var(--grow));
}
.accordion.is-compact .acc__bar:hover .acc__label { font-size: clamp(1.6rem, 4.5vw, 3.5rem); }
.accordion.is-compact .acc__bar--brand:hover .acc__logo svg { height: clamp(22px, 4vw, 46px); }

/* Row 01 carries the wordmark instead of a label — it is the sticky logo and the
   link back to the top of the page. */
.acc__logo {
	margin: 0;
	display: flex;
	align-items: center;
}
.acc__logo svg {
	display: block;
	width: auto;
	height: clamp(22px, 4vw, 46px);
	transition: height 0.45s ease;
}
.accordion.is-compact .acc__logo svg { height: clamp(10px, 1.1vw, 14px); }
.accordion.is-compact .is-current .acc__logo svg { height: clamp(13px, 1.4vw, 18px); }
.acc__logo .logo-tick { fill: var(--graphite); }

/* The band left between the top stack and the bottom stack. */
.acc__panel {
	min-height: var(--band);
	scroll-margin-top: calc((var(--i) + 1) * var(--bar-compact));
	display: flex;
	align-items: center;
	padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.acc__panel > .section__inner { width: 100%; }
/* The last row only climbs into the top stack if its panel is at least a full band
   tall — that lands exactly on the last scrollable pixel, so give it a little more.
   It must be min-height, not padding: box-sizing is border-box, so padding alone
   is swallowed. */
.acc__panel:last-of-type { min-height: calc(var(--band) + 2rem); }
/* Before the first scroll the band is zero-height: the menu owns the screen. */
.accordion:not(.is-compact) .acc__panel { padding-block: 0; }

/* "Como atuamos" is one row holding three sub-screens — each still gets a band
   of its own, so the row stays pinned while you scroll through the three. */
.acc__panel--stack { display: block; padding-block: 0; }
.subpanel {
	min-height: var(--band);
	scroll-margin-top: calc((var(--i) + 1) * var(--bar-compact));
	display: flex;
	align-items: center;
	padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.accordion:not(.is-compact) .subpanel { min-height: 0; padding-block: 0; }
.subpanel .panel-split { width: 100%; }

.eyebrow {
	font-size: clamp(0.6rem, 0.9vw, 0.75rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	line-height: 1;
	opacity: 0.5;
	margin: 0 0 0.9rem;
}
.subpanel__phrase {
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	font-weight: 800;
	line-height: 1.2;
	text-transform: lowercase;
	max-width: 24ch;
	margin: -1rem 0 1rem;
}
.subpanel .phrase { margin-bottom: 1.25rem; }
.subpanel .link-accent { display: inline-block; margin-top: 1.5rem; }

/* Tones */
.acc--lime { background: var(--lime); color: var(--ink); }
.acc--paper { background: var(--paper); color: var(--ink); }
.acc--paper-muted { background: var(--paper-muted); color: var(--ink); }
.acc--graphite { background: var(--graphite); color: var(--paper); }
.acc--graphite .btn--lime { background: var(--lime); color: var(--ink); }

/* Swipe between panels. Each panel (and each "como atuamos" sub-screen) snaps to
   the exact landing spot the menu jumps use — its scroll-margin-top clears the
   sticky top stack. `proximity`, not `mandatory`: a panel taller than the band
   still scrolls freely inside itself and only snaps when you come near an edge.
   Snapping is off until the rows collapse, because that first scroll moves every
   panel by a whole screen — nothing to snap to yet. */
html.snap { scroll-snap-type: y proximity; }
.acc__panel, .subpanel {
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

@media (prefers-reduced-motion: reduce) {
	.acc__bar, .acc__label, .acc__logo svg { transition: none; }
}
.accordion.no-transition .acc__bar,
.accordion.no-transition .acc__label,
.accordion.no-transition .acc__logo svg { transition: none; }

/* Big text phrases */
.phrase {
	font-size: clamp(2rem, 5.5vw, 4.5rem);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.025em;
	text-transform: lowercase;
	max-width: 16ch;
	margin: 0 0 2rem;
}
.phrase--hero { max-width: min(15em, 100%); font-size: clamp(1.9rem, 4.2vw, 3.6rem); line-height: 1.08; margin-bottom: 2.5rem; }

/* Two-column panel body: phrase on the left, detail on the right. */
.panel-split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.panel-split > * { min-width: 0; }
.panel-split:has(> :only-child) { grid-template-columns: 1fr; }
@media (max-width: 900px) {
	.panel-split { grid-template-columns: 1fr; }
}

#inicio > .acc__panel { align-items: flex-end; }

/* The stacked rows are the menu on the home page — no floating bar on top of it. */
.home .site-header { display: none; }