.ptc-vozes {
	/* Matches --ptc-terracotta (main.css) — the brand mark's own colour. */
	--voz-rust: #974B36;
	--voz-off-white: #fbfbfb;
	--voz-peach: #f5efe9;
	background: #fff;
}

.ptc-vozes h2 {
	color: var(--voz-rust);
	font-style: italic;
	font-weight: 600;
}

/* Hero ---------------------------------------------------------------- */

.ptc-vozes-hero {
	position: relative;
	aspect-ratio: 1920 / 1050;
	min-height: 560px;
	overflow: hidden;
	color: #fff;
}

/* The exported PSD background lost its dark treatment on the way to a
   flat PNG — without this the white title/subtitle can land on the
   brightest part of the photo and become unreadable. A filter on the
   image itself (not a gradient ::before, darkest at the bottom) keeps
   the darkening even across the whole photo — a bottom-heavy gradient
   made the sliver of this photo revealed through .ptc-vozes-how's own
   top-edge notch (see that section below) read as a noticeably darker
   patch poking into the white section beneath it. */
.ptc-vozes-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.72) saturate(1.05);
}

.ptc-vozes-hero__copy {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 38%;
	max-width: 560px;
	transform: translateY(-50%);
	text-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}

.ptc-vozes-hero__copy h1 {
	font-size: clamp(2.3rem, 4.4vw, 5.1rem);
	font-style: italic;
	font-weight: 500;
	line-height: .85;
	letter-spacing: -.02em;
	margin: 0 0 22px;
}

.ptc-vozes-hero__copy p {
	font-family: var(--ptc-font-display);
	font-style: italic;
	font-size: clamp(1rem, 1.5vw, 1.5rem);
	line-height: 1.35;
	margin: 0;
}

/* Como funciona --------------------------------------------------------- */

/* white-bg-1035.svg is a full 1920x1035 sheet with a hump carved into
   its top edge and a notch carved into its bottom edge, but this
   section's real height (padding + cards) is far shorter than that, so
   a single top-anchored background image never reaches the bottom
   notch — it just gets clipped away. Instead, the section gets a flat
   fill matching the sheet's own color, plus two small vw-scaled strips
   (matching the background's own 100%-width scaling) that each show
   only the carved edge they're responsible for. Both strips are pulled
   to negative z-index so the section's actual content still paints
   above them. */
.ptc-vozes-how {
	position: relative;
	z-index: 4;
	margin-top: calc(-3.34vw * var(--ptc-notch-x));
	margin-bottom: calc(-1.98vw * var(--ptc-notch-x));
	padding: 110px 0 75px;
	text-align: center;
}

.ptc-vozes-how::before,
.ptc-vozes-how::after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	background-repeat: no-repeat;
	background-size: var(--ptc-notch-scale) auto;
	pointer-events: none;
}

/* Top hump (depth 64px at the 1920px reference width = 3.34vw). */
.ptc-vozes-how::before {
	top: 0;
	height: clamp(50px, 4.7vw, 100px);
	background-image: url('../images/backgrounds/white-bg-1035.svg');
	background-position: top center;
}

/* Bottom notch (depth 38px at the 1920px reference width = 1.98vw). */
.ptc-vozes-how::after {
	bottom: 0;
	height: clamp(30px, 3vw, 65px);
	background-image: url('../images/backgrounds/white-bg-1035.svg');
	background-position: bottom center;
}

.ptc-vozes-how__logo {
	max-width: 260px;
	margin: 0 auto 36px;
}

.ptc-vozes-how h2 {
	font-size: clamp(2.4rem, 3.9vw, 3.9rem);
	line-height: 1.05;
	margin-bottom: 32px;
}

.ptc-vozes-how__intro {
	max-width: 720px;
	margin: 0 auto 56px;
	color: var(--ptc-ink-soft);
}

/* Flex + wrap (not grid) so a last row with fewer than 3 cards (here,
   2) centers itself instead of sticking to the left columns. */
.ptc-vozes-how__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 48px 32px;
	max-width: 1080px;
	margin: 0 auto;
}

/* Shape 6's own outline (card-mask.svg — a plain fill, no baked-in
   shadow, so it can be stretched to any card size without a margin
   throwing off the padding) replicated as a mask instead of a stretched
   background image — a fixed-canvas image can't grow with editable
   text. The bump at the top is the actual card outline now, not a
   separate white circle glued on top — the number badge (negative
   margin below) sits nested into it, with the section's own background
   showing through around it.
   mask and filter:drop-shadow() go on DIFFERENT elements on purpose —
   Chrome fails to render anything at all when both are set on the same
   element. filter on the card itself still shapes the shadow around
   whatever the card actually renders — which is the masked ::before —
   so the shadow follows the real notch outline either way. */
.ptc-vozes-step {
	position: relative;
	flex: 0 1 calc((100% - 64px) / 3);
	min-width: 280px;
	padding: 64px 34px 40px;
	filter: drop-shadow(8px 13px 16px rgba(3,0,0,.16));
	text-align: center;
}

/* Split into two layers — see the matching (longer) comment on
   .ptc-card in main.css for why: a single mask stretched 100%/100% to
   the card's real height distorted the corners on tall/narrow cards,
   and a plain ::before spanning the full card sat behind ::after's
   masked-away corners and showed through as solid white, erasing the
   wave silhouette entirely. ::before is a plain border-radius rect
   (flat top) starting exactly where ::after's wave ends; ::after is
   just that top slice, masked from its own tightly-cropped svg so
   mask-size: 100% 100% never stretches it, sized with padding-top
   (not aspect-ratio/height, which can't resolve against this box's
   auto/content-driven height) so it scales with card width. */
.ptc-vozes-step::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-top: calc(16.99% - 2px);
	z-index: 0;
	background: #fff;
	border-radius: 0 0 28px 28px;
}

.ptc-vozes-step::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
	padding-top: 16.99%;
	background: #fff;
	-webkit-mask-image: url('../images/decor/card-mask-top.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 50% 0%;
	-webkit-mask-size: 100% 100%;
	mask-image: url('../images/decor/card-mask-top.svg');
	mask-repeat: no-repeat;
	mask-position: 50% 0%;
	mask-size: 100% 100%;
}

.ptc-vozes-step > span {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: -50px auto 20px;
	border-radius: 50%;
	background: var(--voz-rust);
	color: #fff;
	font-family: var(--ptc-font-body);
	font-size: 13px;
	font-weight: 700;
}

.ptc-vozes-step h3 {
	position: relative;
	z-index: 1;
	font-family: var(--ptc-font-body);
	font-size: 1rem;
	font-weight: 700;
	color: var(--voz-rust);
	letter-spacing: .03em;
	margin-bottom: 12px;
}

.ptc-vozes-step p {
	position: relative;
	z-index: 1;
	max-width: 90%;
	margin: 0 auto;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--ptc-ink-soft);
}

/* Quem participa ----------------------------------------------------------- */

/* Sized from Back.svg's own viewBox (1920×1435) instead of a fixed
   min-height, so object-fit:cover never has to crop it — the whole
   image, including its own carved-notch edges, always shows.

   Back.svg is the same paper-card shape as .ptc-vozes-deliverables'
   white-bg-1435.svg, with the photo clipped into it and the notch cut
   into its BOTTOM edge — everything outside the clip (including the
   notch) renders transparent. So this section needs the same
   higher-z-index-and-pulled-down-by-the-notch-depth treatment as
   .ptc-vozes-how for that notch to reveal
   .ptc-vozes-deliverables underneath it, instead of getting painted
   over by it. */
/* aspect-ratio no longer matches the photo's own 1920x2086 — matching
   it exactly made this section as tall as the full photo at any width
   (over 1300px on a common 1280px-wide screen), towering over the
   modest text block it's actually holding. A shorter ratio plus
   object-fit: cover (instead of contain) keeps the section a normal
   banner height and fills it edge to edge, cropping the photo instead
   of stretching the section to match it. */
/* 1920/1391 is the section's real proportion in 02_vozes.psd (it runs
   from y=3583 to y=4974 on that file's 1920px canvas). The old 1920/1100
   made the box ~290px shorter than the reference at desktop width, which
   is why the copy read as squeezed into a strip: the section was cropping
   the photo AND leaving the text nowhere to breathe. */
.ptc-vozes-participants {
	position: relative;
	z-index: 2;
	aspect-ratio: 1920 / 1391;
	overflow: hidden;
	margin-bottom: calc(-1.98vw * var(--ptc-notch-x));
	color: #fff;
}

.ptc-vozes-participants__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overrides .ptc-container's own centered-column width/margin/padding —
   this copy block sits over the left side of the photo like the page's
   other hero-style overlays (left: %, vertically centered via
   top: 50% + translateY), not as a centered content column. */
/* left: 20.3% (was 6% + a 48px indent on __copy, ≈8.5% together). In the
   PSD every line of this block starts at x=389 on the 1920px canvas —
   a fifth of the way in, sitting on the field behind the woman's
   shoulder, not hard against the left edge of the screen. At 8.5% the
   copy was pinned to the very edge of the photo, which is what read as
   "jogado, perdido na esquerda".
   top: 54% rather than 50% for the same reason: the reference centres
   this block a little below the section's midpoint (its content spans
   21%–89% of the section height). */
.ptc-vozes-participants__inner {
	position: absolute;
	z-index: 2;
	top: 54%;
	left: 20.3%;
	right: auto;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
}

/* 30.2vw ≈ the 580px measure the reference uses (x=389 → x=964), so the
   block ends at just past the halfway mark of the screen instead of at
   a third of it. */
.ptc-vozes-participants__copy {
	max-width: clamp(300px, 30.2vw, 600px);
	padding-left: 0;
}

.ptc-vozes-participants__copy h2 {
	color: #fff;
	font-size: clamp(2.5rem, 3.83vw, 4.6rem);
	margin-bottom: clamp(22px, 2.7vw, 56px);
}

/* The body copy in this section was set at .92rem/14.7px flat while the
   heading above it ran to 74px — a 5:1 jump that left the text looking
   like a caption stranded under a title. The PSD sets it at 25.8px on a
   1920px canvas (1.345vw), the same size every other body paragraph in
   the design uses. */
.ptc-vozes-participants__lead,
.ptc-vozes-participants__copy p {
	font-size: clamp(1rem, 1.345vw, 1.62rem);
	line-height: 1.47;
	margin-bottom: clamp(18px, 2.7vw, 56px);
}

.ptc-vozes-participants__lead {
	font-weight: 700;
	margin-bottom: clamp(16px, 3vw, 60px);
}

.ptc-vozes-participants__strong {
	font-weight: 700;
}

/* quote-mark.svg has BOTH the opening 66-mark+rule (top-left) and the
   closing 99-mark+rule (bottom-right) baked into one file. Putting that
   whole image on two background layers on .ptc-vozes-quote itself (one
   pinned top-left, one bottom-right) doubled up every mark: each layer
   still carries the WHOLE image, so the top-left layer's own
   bottom-right corner (the 99-mark) painted too, just clipped by
   whatever the box's height happened to leave visible — and vice versa
   for the bottom-right layer's top-left corner. Fix: put the image on
   two dedicated ::before/::after boxes sized to hold ONLY the ~26px-tall
   band each mark's ink actually lives in (its background is still the
   full-size image, but the extra ~140px of it beyond that band is
   outside the pseudo-element's own box, and CSS never paints a
   background past its element's edges — no clipping trick needed). */
.ptc-vozes-quote {
	position: relative;
	max-width: clamp(280px, 24vw, 470px);
	margin: clamp(28px, 3.5vw, 72px) 0 0;
	padding: clamp(34px, 4.4vw, 90px) 8px;
}

/* quote-mark.svg's ink is ~46px tall out of its 349px native height
   (13.18%) regardless of render width — sized by eye against the text so
   the mark's own ink height (~22px at 175px wide) roughly matches the
   bold line's font-size instead of towering over it. */
/* Both pseudo-elements show the SAME crop of quote-mark.svg (the
   top-left "66" glyph + the start of its rule) — quote-mark.svg has a
   second glyph drawn into its bottom-right corner too, but relying on
   background-position to fish it out for ::after made both ends read as
   the same "66" orientation instead of a mirrored closing mark. Rotating
   ::after 180deg instead turns that same crop upside down (reading as a
   "99") AND flips which side the glyph sits on relative to its rule —
   exactly the closing-quote mirror image, from one crop instead of two. */
.ptc-vozes-quote::before,
.ptc-vozes-quote::after {
	content: '';
	position: absolute;
	width: 175px;
	height: 26px;
	background-image: url('../images/decor/quote-mark.svg');
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 175px auto;
	pointer-events: none;
}

.ptc-vozes-quote::before {
	top: 0;
	left: 0;
}

.ptc-vozes-quote::after {
	bottom: 0;
	transform: rotate(180deg);
}

/* Typography matches the reference mockup exactly (Shape 15 / "O campo
   conhece..." SVG): the lead-in (first two lines) is set smaller and at
   a lighter weight than the rest of the quote, both in IBM Plex Sans
   CONDENSED (not the site's regular Sans) with a very tight line-height —
   this is a deliberate two-tier quote style, not a uniform paragraph.
   Two sibling <p> elements (not a display:block <strong> nested inside
   one <p>) — mixing a block-level element into an otherwise-inline
   paragraph forces the browser to wrap any trailing text/whitespace
   after it in an anonymous block box, which is exactly the kind of edge
   case browsers don't all size the same way; sibling <p>s sidestep it. */
/* :not(__strong) — both the lead-in and the bold line are <p> elements
   (see below for why), so without excluding it here this rule's own
   .ptc-vozes-quote p (1 class + 1 type) outranks .ptc-vozes-quote__strong
   (1 class alone) and silently wins regardless of which is declared
   later, overriding the bold line's own weight/size with these. */
.ptc-vozes-quote p:not(.ptc-vozes-quote__strong) {
	font-family: var(--ptc-font-condensed);
	font-weight: 500;
	/* The vw term already matched the reference (39.2px on its 1920px
	   canvas); the 1.8rem ceiling was the problem — it capped the quote
	   at 28.8px from ~1410px wide up, so it never reached the size the
	   design gives it on a desktop screen. */
	font-size: clamp(1.32rem, 2.04vw, 2.6rem);
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
}

/* Selector is .ptc-vozes-quote p.ptc-vozes-quote__strong (not just the
   bare class) for the same reason as the :not() above — this also
   collides with .ptc-vozes-participants__copy p (its own font-size/
   line-height/margin-bottom), a DIFFERENT ancestor rule that also
   outranks a single class selector; scoping it back through the type
   selector is what wins here, not just against .ptc-vozes-quote p. */
.ptc-vozes-quote p.ptc-vozes-quote__strong {
	font-family: var(--ptc-font-condensed);
	text-transform: uppercase;
	margin: 0;
	font-weight: 700;
	/* The bold tier is a step LARGER than the lead-in in the reference
	   (49.3px vs 39.2px on its 1920px canvas), not the same size — the
	   two-tier quote only reads as two tiers if the sizes differ too,
	   not just the weight. */
	font-size: clamp(1.5rem, 2.57vw, 3.3rem);
	line-height: .97;
}

/* O que o Vozes entrega ------------------------------------------------- */

/* Same idea as .ptc-vozes-how: white-bg-1435.svg's notch is only at
   the bottom, so this section needs to sit above (z-index) and be
   pulled down over (margin-bottom, matching the notch's own 38px depth
   = 1.98vw) the photo section that follows, or that section would just
   paint over the transparent gap instead of showing through it. A
   small vw-scaled bottom strip (rather than the full sheet as the
   section's background) shows just that notch, since the section's
   real height never reaches it on its own.

   The top edge of the sheet is straight (no carved detail) — the
   overlap into this section instead comes from .ptc-vozes-participants'
   own bottom notch (Back.svg, the same card shape), which is the one
   pulled down and given the higher z-index. */
.ptc-vozes-deliverables {
	position: relative;
	z-index: 1;
	margin-bottom: calc(-1.98vw * var(--ptc-notch-x));
	padding: 110px 0;
	text-align: center;
}

.ptc-vozes-deliverables::after {
	content: '';
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
	right: 0;
	height: clamp(30px, 3vw, 65px);
	background: url('../images/backgrounds/white-bg-1435.svg') no-repeat bottom center;
	background-size: var(--ptc-notch-scale) auto;
	pointer-events: none;
}

.ptc-vozes-deliverables h2 {
	font-size: clamp(2.4rem, 3.9vw, 3.9rem);
	margin-bottom: 28px;
}

.ptc-vozes-deliverables__intro {
	max-width: 680px;
	margin: 0 auto 6px;
	font-weight: 700;
	color: var(--ptc-ink);
}

.ptc-vozes-deliverables__intro2 {
	max-width: 760px;
	margin: 0 auto 56px;
	color: var(--ptc-ink-soft);
}

.ptc-vozes-deliverables__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
	max-width: 1140px;
	margin: 0 auto;
}

.ptc-vozes-deliverable {
	position: relative;
	padding: 64px 32px 38px;
	filter: drop-shadow(8px 13px 16px rgba(3,0,0,.16));
}

/* Two-layer shape — see .ptc-card in main.css for the full why. */
.ptc-vozes-deliverable::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-top: calc(16.99% - 2px);
	z-index: 0;
	background: #fff;
	border-radius: 0 0 28px 28px;
}

.ptc-vozes-deliverable::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
	padding-top: 16.99%;
	background: #fff;
	-webkit-mask-image: url('../images/decor/card-mask-top.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 50% 0%;
	-webkit-mask-size: 100% 100%;
	mask-image: url('../images/decor/card-mask-top.svg');
	mask-repeat: no-repeat;
	mask-position: 50% 0%;
	mask-size: 100% 100%;
}

/* Wider than tall (38px, not a fixed square) so wider source icons like
   the handshake or the bank building aren't squeezed narrower than their
   own art — object-fit: contain still keeps every icon's own aspect
   ratio, this just gives the box enough room for the widest of them. */
.ptc-vozes-deliverable__icon {
	position: relative;
	top: 0;
	z-index: 1;
	display: block;
	width: 42px;
	height: 38px;
	margin: -34px auto 16px;
}

.ptc-vozes-deliverable__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ptc-vozes-deliverable h3 {
	position: relative;
	z-index: 1;
	font-family: var(--ptc-font-body);
	font-size: .96rem;
	font-weight: 700;
	color: var(--voz-rust);
	letter-spacing: .03em;
	margin-bottom: 10px;
}

.ptc-vozes-deliverable p {
	position: relative;
	z-index: 1;
	max-width: 90%;
	margin: 0 auto;
	font-style: italic;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--ptc-ink-soft);
}

/* Da escuta ao compromisso público ---------------------------------------- */

/* No aspect-ratio here on purpose — tying height to width meant the
   section could end up shorter than the photo needs at some viewport
   widths, cropping it. A plain min-height (object-fit: cover on __bg
   still fills it exactly) keeps the photo at full height regardless of
   viewport width. */
/* aspect-ratio matches vozes_compromisso.png's own native size (1920x1536)
   exactly, so the box's height always scales in lockstep with its width
   at any viewport — object-fit: cover then never actually needs to crop
   anything (there's no mismatch between the box's and the photo's own
   proportions left to correct), so the full photo shows on any device. */
/* 1920/1454 is the section's real proportion in 02_vozes.psd (y=6299 to
   y=7753 on its 1920px canvas) — 82px shorter than the photo's own
   native ratio, which is the version the reference actually crops to. */
.ptc-vozes-commitment {
	position: relative;
	aspect-ratio: 1920 / 1454;
	overflow: hidden;
	color: #fff;
	text-align: center;
}

.ptc-vozes-commitment__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Anchored to the bottom of the frame, not its middle. cover has to crop
	   somewhere — 82px vertically at desktop, and far more on a phone where a
	   9:16 crop sits in a box driven by the text — and centred it took half of
	   that off the bottom, cutting into the pecuarista and the Congresso
	   behind him. The top of this photo is open sky, so that is where the crop
	   belongs. */
	object-position: center bottom;
}

/* 6.3% (was 9%): the reference starts the heading 121px below the
   section's top edge on its 1920px canvas. Combined with the type sizes
   below — which were running at roughly two thirds of the design's — the
   9% offset plus a small block was what left the enormous dead area the
   client flagged under the text. The copy now occupies 6%–39% of the
   section instead of 11%–30%; what's left below it is the photo of the
   pecuarista in front of the Congresso, which is what the reference has
   there too. */
.ptc-vozes-commitment__inner {
	position: relative;
	z-index: 2;
	padding-top: 6.3%;
}

/* Line sizes come from .ptc-display-line / --lead (main.css), which the
   heading's per-line spans carry: "Da escuta ao" small, "compromisso
   público" large, exactly as in the PSD. Only the colour and the spacing
   below it belong to this section. */
.ptc-vozes-commitment h2 {
	color: #fff;
	margin-bottom: clamp(26px, 3.1vw, 64px);
}

.ptc-vozes-commitment__inner p {
	max-width: clamp(320px, 38.5vw, 760px);
	margin: 0 auto clamp(16px, 1.6vw, 34px);
	font-size: clamp(1rem, 1.35vw, 1.62rem);
	line-height: 1.47;
}

.ptc-vozes-commitment__strong {
	font-weight: 700;
	margin-top: clamp(18px, 1.6vw, 34px);
}

/* Contato ------------------------------------------------------------------ */

/* A flat color tint over the photo (not just the photo alone) — this
   section runs taller than the home version that photo was originally
   framed for. The real cause of the visible seam turned out to be the
   source PNG itself — it has a blank white margin above the actual
   photo (visible by opening the file directly), and a taller box
   centers the crop window further up into that margin than the home
   page's shorter version ever reveals. background-position: bottom
   anchors the crop to the photo itself regardless of box height, so
   the margin never shows. The flat tint (not a gradient) keeps the
   heading readable without depending on exactly where that crop lands. */
.ptc-vozes-contact {
	position: relative;
	padding-top: 1px;
	padding-bottom: 3rem;
	background: linear-gradient(rgba(151,75,54,.6), rgba(151,75,54,.6)), url('../images/home-cta-contact-shared-bg.png') no-repeat bottom center / cover;
}

.ptc-vozes-contact .ptc-contact-form--transparent {
	padding-top: 60px;
}

.ptc-vozes-contact .ptc-contact-form__heading {
	max-width: 720px;
	margin: 0 auto 56px;
	font-size: clamp(2.2rem, 4vw, 3.6rem);
}

/* Section connectors (page-specific bump color) --------------------------- */

.ptc-wave-divider--voz-off-white::before { background: var(--voz-off-white); }
.ptc-wave-divider--voz-off-white .ptc-wave-divider__bump path { fill: var(--voz-off-white); }

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

@media (max-width: 1024px) {
	.ptc-vozes-how__grid,
	.ptc-vozes-deliverables__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 880px) {
	/* Height only — the notch's own depth and this section's overlap now come
	   from --ptc-notch-scale / --ptc-notch-x (main.css). The strip just has to
	   be tall enough to contain the enlarged notch. */
	.ptc-vozes-how::before {
		height: 64px;
	}

	/* Mobile keeps the same photo-with-overlaid-text layout as desktop
	   (an earlier version split these into a stacked photo-then-caption
	   flow instead — rejected, since it no longer read as a background
	   photo at all). The photo (__bg) stays position: absolute; inset: 0
	   with its existing height: 100% — that resolves fine against a
	   content-driven parent height because the CSS percentage-height
	   rule specifically carves out absolutely positioned children (only
	   non-absolute children fall back to "auto" against an auto-height
	   containing block). The copy block becomes a normal in-flow
	   element (instead of also being absolutely positioned) so it can
	   actually establish that parent height, and the section's fixed
	   aspect-ratio is dropped so it can grow to fit. Mobile wraps this
	   copy onto far more lines than desktop ever has to make room for,
	   so the photo now crops tighter to fill the resulting taller,
	   narrower box — the accepted trade-off for keeping the text on
	   the photo instead of below it. */
	.ptc-vozes-hero {
		aspect-ratio: auto;
		/* The banners now carry a 9:16 phone crop (see ptc_section_photo),
		   but the section's height still came only from the copy inside it —
		   about 427px, which squeezed a portrait photo into a letterbox and
		   left no room for the carved notch the scroll-down button sits in.
		   85svh gives the banner its own height: most of the screen, the
		   photo close to its real proportions, and space under the text for
		   that notch. svh (not vh) because on iOS vh measures the viewport
		   with the browser bars collapsed, so a vh-sized banner is always
		   taller than what's actually visible when the page loads. */
		min-height: 85vh;
		min-height: 85svh;
	}

	/* padding-top clears .ptc-site-header, which floats position: absolute
	   over this hero at every width (transparent background, 193px tall
	   on a phone with its nav toggle) — the site-wide 48px this used to
	   inherit left the title rendering underneath/behind it. The base
	   rule's 560px min-height (tuned for desktop's much wider box) also
	   forced cover to scale the photo way up to fill that height on a
	   375px-wide box, cropping most of its width away; this extra top
	   padding, on top of the copy's own text, is usually enough on its
	   own to beat that floor and grow the section past it, so the photo
	   needs less of that scale-up and keeps more of its sides in frame. */
	.ptc-vozes-hero__copy {
		position: relative;
		top: auto;
		left: auto;
		max-width: none;
		margin-bottom: 0;
		padding: 220px 24px 48px;
		transform: none;
	}

	.ptc-vozes-participants {
		aspect-ratio: auto;
	}

	.ptc-vozes-participants__inner {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		padding: 48px 24px;
	}

	.ptc-vozes-participants__copy {
		max-width: none;
		padding-left: 0;
	}

	.ptc-vozes-commitment {
		aspect-ratio: auto;
	}

	.ptc-vozes-commitment__inner {
		padding: 48px 24px;
	}
}

@media (max-width: 760px) {
	/* Single column (not 2) below tablet width for the deliverables
	   grid — at 2-up, each card's own side padding (~64px combined) was
	   eating most of a ~180px column, leaving barely any room for the
	   text before it overflowed. Full width per card actually fits the
	   copy instead of needing to shrink it. (.ptc-vozes-how__grid is a
	   flex row, not this grid — its own min-width: 280px on
	   .ptc-vozes-step already forces it to wrap to one per row well
	   before this breakpoint.) */
	.ptc-vozes-deliverables__grid {
		grid-template-columns: 1fr;
		max-width: 420px;
	}

	.ptc-vozes-deliverable {
		padding: 60px 28px 34px;
	}
}

@media (max-width: 480px) {
	.ptc-vozes-how__grid,
	.ptc-vozes-deliverables__grid {
		grid-template-columns: 1fr;
	}

	/* .ptc-vozes-step's flex-basis is a fraction of a 3-up desktop row,
	   so on a single-column phone layout it was shrinking to its
	   220px floor instead of actually filling the available width. */
	.ptc-vozes-step {
		flex-basis: 100%;
		min-width: 0;
		padding: 64px 24px 36px;
	}

	.ptc-vozes-step > span {
		width: 36px;
		height: 36px;
		font-size: 13px;
	}

	.ptc-vozes-step h3 {
		font-size: .95rem;
	}

	.ptc-vozes-step p {
		font-size: .9rem;
	}

	.ptc-vozes-deliverable {
		padding: 56px 22px 30px;
	}

	.ptc-vozes-deliverable h3 {
		font-size: .92rem;
	}

	.ptc-vozes-deliverable p {
		font-size: .85rem;
	}

	.ptc-vozes-quote__mark {
		font-size: 2.6rem;
	}

	.ptc-vozes-quote__rule {
		width: 70px;
	}
}