/* Sofia Barbosa — direção editorial: papel, tinta, silêncio e precisão. */

body {
  letter-spacing: -0.008em;
}

.site-header {
  position: sticky;
  top: 0;
  background: var(--color-base);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: none;
}

.site-header.is-scrolled { border-bottom-color: var(--color-border); }

.site-header__inner { min-height: var(--header-height); }

.site-header__brand {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.1rem;
}

.site-header__name {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.site-header__brand::after {
  content: 'PSICOLOGIA CLÍNICA · PSICANÁLISE';
  color: var(--color-text-secondary);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.3;
}

.site-nav__list { gap: clamp(1rem, 2.5vw, 2rem); }

.site-nav__link {
  color: var(--color-text-primary);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.site-nav__link:hover,
.site-nav__link.is-active { color: var(--color-accent); }

.site-header__cta {
  border: 1px solid var(--color-structure);
  border-radius: 0;
  background: var(--color-structure);
  color: var(--color-text-inverse);
}

.site-header__cta:hover {
  background: transparent;
  color: var(--color-heading);
}

.home-hero {
  display: grid;
  min-height: calc(100svh - var(--header-height));
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

.home-hero__grid {
  display: grid;
  align-items: stretch;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  padding-block: clamp(2.5rem, 5.5vh, 5.5rem);
}

.home-hero__content {
  align-self: center;
  max-width: 48rem;
  padding-left: clamp(1.25rem, 3vw, 3rem);
  border-left: 3px solid var(--color-accent);
}

.eyebrow {
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* 17ch at the display step lands the headline within ~50px of the intro's
   own measure below it, so the two blocks read as one column rather than a
   billboard sitting on a caption. */
.home-hero h1 {
  max-width: 17ch;
  font-size: var(--text-display);
  font-weight: 400;
  letter-spacing: -0.042em;
  line-height: var(--leading-display);
  text-wrap: balance;
}

.home-hero__intro {
  max-width: var(--measure-lead);
  margin-top: clamp(1.4rem, 2.4vh, 2rem);
  color: var(--color-text-secondary);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.home-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  margin-top: clamp(1.75rem, 3.2vh, 2.5rem);
}

.home-hero__actions p {
  max-width: 15rem;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.button--ink {
  min-height: 50px;
  padding: 0.9rem 1.45rem;
  border: 1px solid var(--color-structure);
  border-radius: 0;
  background: var(--color-structure);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
}

.button--ink:hover {
  background: transparent;
  color: var(--color-heading);
  transform: translateY(-2px);
}

/* The dark bar is sized by its contents, not stretched to fill the row.
   That is the whole fix: while it stretched, the portrait's box grew with it
   and object-fit: cover ate the framing from the top and bottom — the books
   the photograph is built around were cropped straight out. */
.home-hero__folio {
  --folio-bleed: 1.35rem;
  position: relative;
  align-self: center;
  display: grid;
  grid-template-rows: auto auto;
  background: var(--color-structure);
  color: var(--color-text-inverse);
}

/* The portrait box carries the crop's own aspect ratio, so object-fit has
   nothing left to cut. It bleeds one step past the bar on the left and stops
   one step short on the right, leaving the sliver the folio index sits in. */
.home-hero__portrait {
  position: relative;
  z-index: 1;
  aspect-ratio: 2825 / 3791;
  margin: 0 var(--folio-bleed) 0 calc(var(--folio-bleed) * -1);
  overflow: hidden;
}

.home-hero__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(0.94) contrast(1.02);
}

.home-hero__folio-index {
  position: absolute;
  top: 1rem;
  right: 0.3rem;
  z-index: 2;
  color: var(--color-text-inverse);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  writing-mode: vertical-rl;
}

.home-hero__folio > p {
  position: relative;
  z-index: 2;
  max-width: 24ch;
  grid-row: 2;
  align-self: end;
  margin: 0;
  padding: 1.5rem 1.6rem 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.6vw + 0.95rem, 1.45rem);
  font-style: italic;
  line-height: 1.32;
}

.home-hero__footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-footer { margin-top: 0; }

/* The right column is capped so the portrait — now free to keep its own
   ratio — cannot grow taller than the fold on a laptop screen. */
@media (min-width: 920px) {
  .home-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.78fr); }
}

@media (max-width: 860px) {
  .site-header__cta { display: none; }
  .site-header__toggle { border-radius: 0; }
}

@media (max-width: 620px) {
  .container { padding-inline: 1.15rem; }
  .home-hero__grid { padding-block: 2.2rem 2.8rem; }
  .home-hero h1 { max-width: none; }   /* the column is already the measure here */
  .home-hero__actions { align-items: flex-start; flex-direction: column; }
  .home-hero__actions .button { width: 100%; }
  .home-hero__folio { --folio-bleed: 0.75rem; }
  .home-hero__folio > p { padding: 1.15rem 1.15rem 1.4rem; }
  .home-hero__folio-index { right: 0.14rem; }
  .home-hero__footer { flex-direction: column; gap: 0.2rem; }
}

/* ---------- Shared editorial sections ---------- */
.section--paper { border-top: 1px solid var(--color-border); }

.section-index {
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.16em;
}

.editorial-intro {
  display: grid;
  gap: 2rem;
}

/* 24ch at the title step puts the heading block and the body measure below
   it within a few dozen pixels of each other, so a section reads as one
   aligned column instead of a wide banner over a narrow paragraph. */
.editorial-intro h2,
.recognition h2,
.split-heading h2,
.profile-teaser h2,
.texts-callout h2,
.service-intro h2,
.modes-section h2,
.practical-section h2,
.language-section h2,
.about-profile__content h2 {
  max-width: 24ch;
  font-size: var(--text-title);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: var(--leading-title);
  text-wrap: balance;
}

.editorial-intro__body {
  display: grid;
  max-width: var(--measure-body);
  gap: 1rem;
  margin-top: 1.75rem;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: 1.75;
}

/* The reader is meant to find themselves in this list, so the items take the
   primary text colour and the lead step — they are the page's own voice here,
   not supporting copy. The rules between them come from the same idiom as
   .principle / .credential so the section belongs to the system. */
.recognition {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.recognition__inner {
  display: grid;
  gap: 2rem;
}

.recognition__list {
  margin: 1.75rem 0 0;
  padding: 0;
  max-width: var(--measure-body);
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.recognition__list li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.recognition__list li:last-child { border-bottom: 0; }

.recognition__close {
  max-width: var(--measure-body);
  margin-top: 1.6rem;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-subtitle);
}

.principles {
  padding-top: 0;
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.principles__grid {
  display: grid;
  padding-top: var(--space-16);
}

.principle {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: clamp(1.6rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--color-border);
}

.principle:last-child { border-bottom: 0; }
.principle > span,
.credential > span,
.service-card__number {
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.13em;
}

.principle h3,
.service-card h3,
.credential h3,
.process-list h3 {
  max-width: 20ch;
  font-size: var(--text-subtitle);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: var(--leading-subtitle);
}

.principle p,
.service-card p,
.credential p {
  max-width: var(--measure-narrow);
  color: var(--color-text-secondary);
  line-height: var(--leading-body);
}

.statement {
  position: relative;
  overflow: hidden;
  background: var(--color-structure);
  color: var(--color-text-inverse);
}

.statement::after {
  content: '“';
  position: absolute;
  right: -0.05em;
  bottom: -0.56em;
  color: color-mix(in srgb, var(--color-text-inverse) 6%, transparent);
  font-family: var(--font-display);
  font-size: clamp(11rem, 22vw, 22rem);
  line-height: 1;
  pointer-events: none;
}

.statement__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
}

.statement blockquote {
  max-width: 22ch;
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: var(--text-quote);
  font-style: italic;
  letter-spacing: -0.032em;
  line-height: var(--leading-quote);
}

.statement__inner > p:last-child {
  max-width: var(--measure-lead);
  color: color-mix(in srgb, var(--color-text-inverse) 68%, transparent);
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
}

.split-heading {
  display: grid;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 5.5rem);
}

.split-heading > p {
  max-width: var(--measure-narrow);
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
}

.service-grid {
  display: grid;
  border-top: 1px solid var(--color-border);
}

.service-card {
  display: grid;
  align-content: start;
  min-height: 16rem;
  gap: 1.1rem;
  padding: clamp(1.75rem, 4vw, 3.5rem) 0;
  border-bottom: 1px solid var(--color-border);
}

/* Two feature cards carry the page here, so they sit a step above the other
   card titles — but on the shared scale, not on a clamp of their own. */
.service-card h3 { max-width: 16ch; font-size: var(--text-3xl); }

.service-card > p,
.service-card address {
  max-width: var(--measure-narrow);
  font-style: normal;
}

.service-card a,
.text-link {
  width: fit-content;
  margin-top: auto;
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-underline-offset: 0.35em;
}

.service-card a:hover,
.text-link:hover { color: var(--color-accent); }

.profile-teaser {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.profile-teaser__grid {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
}

.profile-teaser__photo,
.about-profile__photo { margin: 0; }

.profile-teaser__photo img,
.about-profile__photo img {
  width: 100%;
  background: var(--color-border);
  filter: saturate(0.68) contrast(0.96);
}

.profile-teaser__photo figcaption,
.about-profile__photo figcaption {
  padding-top: 0.75rem;
  color: var(--color-text-secondary);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.profile-teaser__content > p:not(.eyebrow) {
  max-width: var(--measure-body);
  margin-top: 1.6rem;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: 1.76;
}

.profile-teaser__content .text-link { display: inline-block; margin-top: 2rem; }

.texts-callout__inner {
  display: grid;
  align-items: end;
  gap: 2rem;
}

.texts-callout__inner > .section-index { align-self: start; }

.texts-callout h2 { margin-bottom: 1.1rem; }
.texts-callout h2 + p { max-width: var(--measure-body); color: var(--color-text-secondary); font-size: var(--text-lg); line-height: var(--leading-lead); }

.button--outline {
  border: 1px solid var(--color-heading);
  border-radius: 0;
  background: transparent;
  color: var(--color-heading);
}

.button--outline:hover {
  background: var(--color-structure);
  color: var(--color-text-inverse);
}

.closing-cta {
  padding-block: clamp(4.5rem, 10vw, 9rem);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.closing-cta__inner { display: grid; justify-items: start; }
.closing-cta .eyebrow { color: var(--color-on-accent); opacity: 0.72; }
/* The closing line is a statement, so it takes the quote step rather than the
   section-title step — one level of emphasis above every h2 above it. */
.closing-cta h2 {
  max-width: 21ch;
  color: var(--color-on-accent);
  font-size: var(--text-quote);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: var(--leading-quote);
  text-wrap: balance;
}

.closing-cta p:not(.eyebrow) {
  max-width: var(--measure-lead);
  margin-top: 1.4rem;
  font-size: var(--text-lg);
  line-height: var(--leading-lead);
  opacity: 0.84;
}

.button--cream {
  margin-top: 2.2rem;
  border: 1px solid var(--color-on-accent);
  border-radius: 0;
  background: var(--color-on-accent);
  color: var(--color-heading);
}

.button--cream:hover { background: transparent; color: var(--color-on-accent); }

/* ---------- Internal page heroes ---------- */
.page-hero {
  padding-block: clamp(4rem, 10vw, 9.5rem);
  border-bottom: 1px solid var(--color-border);
}

.page-hero__grid { display: grid; gap: 2rem; }

.page-hero h1 {
  max-width: 19ch;
  font-size: var(--text-display);
  font-weight: 400;
  letter-spacing: -0.042em;
  line-height: var(--leading-display);
  text-wrap: balance;
}

.page-hero__lead {
  max-width: var(--measure-lead);
  color: var(--color-text-secondary);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.about-profile { background: var(--color-surface); }
.about-profile__grid { display: grid; gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.about-profile__content { display: grid; gap: 1.5rem; }
.about-profile__content p:not(.section-index) { max-width: var(--measure-body); color: var(--color-text-secondary); font-size: var(--text-lg); line-height: 1.76; }

.credentials__list {
  display: grid;
  border-top: 1px solid var(--color-border);
}

.credential {
  display: grid;
  gap: 0.85rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
}

.credential h3 { font-size: var(--text-2xl); }

.language-section { border-top: 1px solid var(--color-border); }
.language-section__grid { display: grid; gap: 2rem; }
.language-section__grid > div:last-child { display: grid; align-content: start; gap: 1.4rem; max-width: var(--measure-body); color: var(--color-text-secondary); font-size: var(--text-lg); line-height: 1.75; }
.language-section strong { color: var(--color-text-primary); }

/* ---------- Service page ---------- */
.service-intro { background: var(--color-surface); }
.service-intro__grid { display: grid; gap: 2rem; }
.service-intro__copy { display: grid; align-content: end; gap: 1.1rem; max-width: var(--measure-narrow); color: var(--color-text-secondary); font-size: var(--text-lg); line-height: 1.76; }

.process-section { border-block: 1px solid var(--color-border); }
.process-list { list-style: none; padding: 0; border-top: 1px solid var(--color-border); }
.process-list li { display: grid; gap: 1.2rem; padding: 2rem 0; border-bottom: 1px solid var(--color-border); }
.process-list li > span { color: var(--color-accent); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.13em; }
.process-list li > div { display: grid; gap: 0.6rem; }
.process-list p { max-width: var(--measure-body); color: var(--color-text-secondary); line-height: var(--leading-body); }

.modes-section__header { margin-bottom: clamp(2rem, 5vw, 4rem); }
.service-card--large { min-height: 19rem; scroll-margin-top: 2rem; }
.service-card address { color: var(--color-text-primary); font-size: var(--text-base); line-height: 1.75; }
.service-card__note { margin-top: auto; font-size: var(--text-sm); }


/* ---------- O espaço (galeria do consultório) ---------- */
.space-section { border-top: 1px solid var(--color-border); }

/* One band rather than three captioned items: the tiles sit flush and the
   1px gap lets the page ground show through as a hairline — the same way
   .principles and .service-grid separate their cells. background-clip keeps
   that ground off the .container padding, which the background would
   otherwise paint as a stripe down both edges. */
.space-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-border);
  background-clip: content-box;
}

/* Below the three-across breakpoint the last tile takes the full row, so the
   set stays a composition instead of collapsing into a stack. */
.space-gallery__item:last-child { grid-column: 1 / -1; }

.space-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-border);
  /* The room's armchairs are a saturated red that fights the paper-and-
     terracotta palette. Dropping saturation alone turns them pink, which the
     brand direction rules out; the touch of sepia carries them to brick, in
     the same family as --color-accent. Same move the profile portrait makes
     (saturate .68), one step further because this red is much louder. Kept in
     CSS so the source photographs stay untouched and the value stays tunable. */
  filter: saturate(0.38) sepia(0.18) contrast(1.02) brightness(1.02);
}

.practical-section { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.practical-section__grid { display: grid; gap: 2.5rem; }
.practical-list { margin: 0; border-top: 1px solid var(--color-border); }
.practical-list > div { display: grid; gap: 0.35rem; padding: 1.2rem 0; border-bottom: 1px solid var(--color-border); }
.practical-list dt { color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.practical-list dd { margin: 0; color: var(--color-text-primary); }

/* ---------- Blog, legal and 404 ---------- */
.blog-header { padding-block: clamp(4rem, 9vw, 8rem) clamp(2rem, 5vw, 4rem); border-bottom: 1px solid var(--color-border); }
.blog-header h1 { max-width: 18ch; font-size: var(--text-display); font-weight: 400; letter-spacing: -0.042em; line-height: var(--leading-display); text-wrap: balance; }
.blog-header .text-secondary { max-width: var(--measure-lead); font-size: var(--text-lead); line-height: var(--leading-lead); }
.blog-grid { padding-top: var(--space-12); }
.post-card { border-radius: 0; box-shadow: none; }
.post-card:hover { box-shadow: none; transform: translateY(-3px); }
.post-card__title { font-weight: 400; letter-spacing: -0.02em; line-height: var(--leading-subtitle); }
.badge { border-radius: 0; }
.prose { margin-inline: auto; }
.prose h1 { font-size: var(--text-title); }
.prose h1, .prose h2, .prose h3 { font-weight: 400; letter-spacing: -0.022em; }
.prose blockquote { background: transparent; }

.notfound-page { min-height: 72vh; display: grid; align-items: center; padding-block: var(--space-16); }
.notfound-page__inner { display: grid; justify-items: start; gap: 1.5rem; }
.notfound-page h1 { max-width: 16ch; font-size: var(--text-display); font-weight: 400; letter-spacing: -0.042em; line-height: var(--leading-display); text-wrap: balance; }
.notfound-page p:not(.eyebrow) { max-width: var(--measure-lead); color: var(--color-text-secondary); font-size: var(--text-lg); }

/* ---------- Footer ---------- */
.site-footer {
  padding-block: var(--space-16) var(--space-8);
  background: var(--color-structure);
}

.site-footer__top { grid-template-columns: 1.5fr 0.7fr 1fr; }
.site-footer__name { font-size: var(--text-2xl); font-weight: 400; letter-spacing: -0.025em; }
.site-footer__role { margin-top: 0.35rem; color: rgba(255, 255, 255, 0.68); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.site-footer__address { margin-top: 1.5rem; color: rgba(255, 255, 255, 0.62); font-size: var(--text-sm); font-style: normal; line-height: 1.7; }
.site-footer__contact { display: grid; align-content: start; gap: 0.75rem; }

/* ---------- Responsive layout ---------- */
@media (min-width: 760px) {
  .editorial-intro { grid-template-columns: 5rem 1fr; }
  .recognition__inner { grid-template-columns: 5rem 1fr; }
  .principles__grid { grid-template-columns: repeat(3, 1fr); }
  .principle { min-height: 15rem; padding-inline: 2rem; border-right: 1px solid var(--color-border); border-bottom: 0; }
  .principle:first-child { padding-left: 0; }
  .principle:last-child { padding-right: 0; border-right: 0; }
  .statement__inner { grid-template-columns: 5rem minmax(0, 1fr); }
  .statement__inner > p:last-child { grid-column: 2; }
  .split-heading { grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { padding-inline: clamp(2rem, 5vw, 5rem); border-right: 1px solid var(--color-border); border-bottom: 0; }
  .service-card:first-child { padding-left: 0; }
  .service-card:last-child { padding-right: 0; border-right: 0; }
  .profile-teaser__grid { grid-template-columns: minmax(17rem, 0.75fr) minmax(0, 1.25fr); }
  .texts-callout__inner { grid-template-columns: 5rem minmax(0, 1fr) auto; }
  .page-hero__grid { grid-template-columns: 7rem minmax(0, 1fr); }
  .page-hero h1, .page-hero__lead { grid-column: 2; }
  .about-profile__grid { grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1.25fr); }
  .credentials__list { grid-template-columns: repeat(2, 1fr); }
  .credential { padding: 2.25rem; border-right: 1px solid var(--color-border); }
  .credential:nth-child(odd) { padding-left: 0; }
  .credential:nth-child(even) { padding-right: 0; border-right: 0; }
  .language-section__grid { grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr); }
  .service-intro__grid { grid-template-columns: 5rem minmax(0, 1.2fr) minmax(20rem, 0.8fr); }
  .process-list li { grid-template-columns: 5rem 1fr; }
  .practical-section__grid { grid-template-columns: minmax(0, 0.8fr) minmax(24rem, 1.2fr); }
  .practical-list > div { grid-template-columns: 10rem 1fr; gap: 2rem; }
  .space-gallery { grid-template-columns: repeat(3, 1fr); }
  .space-gallery__item:last-child { grid-column: auto; }
}

@media (max-width: 767px) {
  .principles { padding-bottom: 0; }
  .service-card { min-height: auto; }
  .profile-teaser__photo { max-width: 28rem; }
  .texts-callout .button { width: 100%; }
  .page-hero__grid { gap: 1.25rem; }
  .site-footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .site-header__brand::after { font-size: 0.56rem; letter-spacing: 0.09em; }
  .site-header__name { font-size: 1.2rem; }
  .closing-cta .button { width: 100%; }
}