/* ==========================================================================
   main.css — ProAds Marketing
   Section and component styles. Structural styles (header, footer, buttons,
   prose, blog) live in base.css; every colour comes from tokens.css.
   Reference: ui-guide/guia-ui-webdesign-proads-marketing.md
   ========================================================================== */

/* ==========================================================================
   1. Dark bands — the signature gradient
   --------------------------------------------------------------------------
   The brand's gradient is dark in BOTH themes, so any section painted with it
   needs the text tokens re-pointed, not the theme flipped. .on-dark is that
   scope: it remaps the roles once, and every component inside it (buttons,
   links, borders, focus ring) follows without a single per-component override.

   Contrast note (guide §13): the gradient's brightest stop, #8AACA8, is only
   2.46:1 against white — text can never sit on it. The ::before scrim below
   darkens the side where text lives while leaving the far corner vivid, which
   takes the worst case from 3.14:1 to 10.15:1. That is why the scrim exists;
   it is not decoration.
   ========================================================================== */
.on-dark {
  --color-heading: #FFFFFF;
  --color-text-primary: rgba(255, 255, 255, 0.92);
  --color-text-secondary: rgba(255, 255, 255, 0.74);
  --color-accent: #FFFFFF;              /* primary button surface + links */
  --color-accent-hover: #C8DAD5;
  --color-on-accent: #00363E;           /* petróleo on the white button */
  --color-accent-soft: rgba(255, 255, 255, 0.10);
  --color-secondary: #C8DAD5;
  --color-border: rgba(255, 255, 255, 0.16);
  --color-border-strong: rgba(255, 255, 255, 0.42);
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-alt: rgba(255, 255, 255, 0.06);
  --shadow-color: rgba(0, 0, 0, 0.35);
  --shadow-color-strong: rgba(0, 0, 0, 0.5);
  position: relative;
  isolation: isolate;
  color: var(--color-text-primary);
  background: var(--gradient-hero);
  background-color: #00232A;            /* if the gradient fails to paint */
}
.on-dark :focus-visible { outline-color: var(--color-focus-on-dark); }
.on-dark > * { position: relative; z-index: 1; }

/* Text-side scrim. Strong where the copy is, gone by the far edge.
   Theme-aware, because the two themes have different problems: the light
   gradient peaks at #8AACA8 (white on it = 2.46:1, unusable), while the dark
   gradient peaks at #4E7873 (white = 4.93:1, already AA on its own). Dialling
   the dark scrim down lets the signature gradient actually be seen — which is
   the point of using it.

   Worst-case white-on-background at the headline's brightest possible
   position, all computed rather than guessed:
     light 0.48 → 7.89:1 · dark 0.20 → 6.4:1 · both far above the 4.5:1 floor. */
.on-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg,
      rgba(0, 5, 4, 0.62) 0%,
      rgba(0, 5, 4, 0.34) 44%,
      rgba(0, 5, 4, 0) 74%);
  background: linear-gradient(100deg,
      light-dark(rgba(0, 5, 4, 0.48), rgba(0, 5, 4, 0.20)) 0%,
      light-dark(rgba(0, 5, 4, 0.26), rgba(0, 5, 4, 0.10)) 44%,
      rgba(0, 5, 4, 0) 74%);
}
/* Centred bands get an even scrim instead of a directional one. */
.on-dark--center::before {
  background: linear-gradient(180deg,
      rgba(0, 5, 4, 0.42) 0%,
      rgba(0, 5, 4, 0.30) 100%);
  background: linear-gradient(180deg,
      light-dark(rgba(0, 5, 4, 0.42), rgba(0, 5, 4, 0.14)) 0%,
      light-dark(rgba(0, 5, 4, 0.30), rgba(0, 5, 4, 0.10)) 100%);
}

@media (max-width: 767px) {
  .on-dark { background-image: var(--gradient-hero-mobile); }
  .on-dark::before {
    background: linear-gradient(180deg,
        rgba(0, 5, 4, 0.50) 0%,
        rgba(0, 5, 4, 0.34) 60%,
        rgba(0, 5, 4, 0.20) 100%);
    background: linear-gradient(180deg,
        light-dark(rgba(0, 5, 4, 0.50), rgba(0, 5, 4, 0.18)) 0%,
        light-dark(rgba(0, 5, 4, 0.34), rgba(0, 5, 4, 0.12)) 60%,
        light-dark(rgba(0, 5, 4, 0.20), rgba(0, 5, 4, 0.06)) 100%);
  }
}

/* ==========================================================================
   1b. Header over the hero
   --------------------------------------------------------------------------
   Guide §7.4: the header is transparent over the signature gradient at the
   top of the page, and only becomes a solid bar once the visitor scrolls
   (main.js toggles .is-scrolled). Opting in per page via body.hero-dark,
   because the blog and the legal pages open on a light surface where a
   transparent header would leave white-on-white.

   Everything inside it has to flip to the dark-band palette too, or the nav
   would keep the light theme's dark text and vanish against the gradient.
   ========================================================================== */
body.hero-dark .site-header:not(.is-scrolled) {
  --color-heading: #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.78);
  --color-accent: #FFFFFF;
  --color-accent-hover: #C8DAD5;
  --color-on-accent: #00363E;
  --color-border: rgba(255, 255, 255, 0.28);
  background: transparent;
  backdrop-filter: none;
}
body.hero-dark .site-header:not(.is-scrolled) :focus-visible {
  outline-color: var(--color-focus-on-dark);
}
/* The sage lockup is the legible one against the gradient, in both themes. */
body.hero-dark .site-header:not(.is-scrolled) .site-header__logo--light { display: none; }
body.hero-dark .site-header:not(.is-scrolled) .site-header__logo--dark  { display: block; }

/* The header is sticky, so it occupies layout space and the gradient would
   start below it, leaving a band of page background above. Pulling the hero up
   by exactly that height puts the gradient behind the header and pads the copy
   back down to where it belongs. */
body.hero-dark .hero {
  margin-top: calc(var(--header-height) * -1);
  padding-top: calc(var(--header-height) + clamp(var(--space-16), 9vw, var(--space-24)));
}
body.hero-dark .hero--page {
  padding-top: calc(var(--header-height) + var(--space-16));
}

/* ==========================================================================
   2. Shared type helpers
   ========================================================================== */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.on-dark .eyebrow { color: var(--color-secondary); }

/* Mixed weight, echoing the wordmark's PRO/ADS contrast (guide §3.1): 700 on
   the phrase carrying the promise, 400 on the rest. Display headlines
   therefore start LIGHT and mark the heavy part with <strong> — the opposite
   of the usual default, and the reason it is spelled out here. */
.hero__title,
.cta-band__title { font-weight: 400; }
.hero__title strong,
.cta-band__title strong { font-weight: 700; }
.thin { font-weight: 400; }

.section-head { max-width: 46rem; margin-bottom: var(--space-12); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--flush { margin-bottom: var(--space-6); }

/* Button row. Same rhythm wherever it appears. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-12);
}
.actions--tight { margin-top: var(--space-8); }
.section-head__title { margin: 0; }
.section-head__support {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

.lead { font-size: var(--text-lg); color: var(--color-text-secondary); }
.section--tight { padding-block: var(--space-12); }
.section--alt { background: var(--color-surface-alt); }

/* ==========================================================================
   3. Hero
   ========================================================================== */
.hero {
  padding-block: clamp(var(--space-16), 9vw, var(--space-24));
  overflow: hidden;
}
.hero__inner { max-width: 52rem; }
.hero__title {
  font-size: var(--text-h1);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero__sub {
  margin-top: var(--space-6);
  max-width: 40rem;
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-primary);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
}
.hero__link {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.hero__signature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}
.hero__signature::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Interior pages: same language, shorter. */
.hero--page { padding-block: var(--space-16) var(--space-16); }
.hero--page .hero__title { font-size: var(--text-h2); }
.hero--page .hero__sub { font-size: var(--text-lg); }

/* ==========================================================================
   4. Credibility strip
   ========================================================================== */
.credbar {
  border-bottom: 1px solid var(--color-divider);
  padding-block: var(--space-8);
}
.credbar__list {
  display: grid;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 768px) {
  .credbar__list { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}
.credbar__item { display: flex; gap: var(--space-3); align-items: baseline; }
.credbar__item::before {
  content: '';
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  transform: translateY(-2px);
}
.credbar__fact {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-heading);
}
.credbar__text { color: var(--color-text-secondary); font-size: var(--text-sm); }

/* ==========================================================================
   5. Grids and cards
   ========================================================================== */
.grid { display: grid; gap: var(--space-6); }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.card__title { font-size: var(--text-xl); margin: 0; }
.card__text { color: var(--color-text-secondary); }

/* ---- Portfolio card ---- */
.work-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.work-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--color-accent);
}
.work-card__media { background: var(--color-surface-alt); }
.work-card__media img { width: 100%; object-fit: cover; }
.work-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
}
.work-card__title { font-size: var(--text-xl); margin: 0; }
/* The whole card is clickable; the visible URL stays readable because it is
   the proof, not a call to action. */
.work-card__title a { color: var(--color-heading); text-decoration: none; }
.work-card__title a::after { content: ''; position: absolute; inset: 0; }
.work-card { position: relative; }
.work-card__title a:hover { color: var(--color-accent); }
.work-card__desc { color: var(--color-text-secondary); font-size: var(--text-sm); }
.work-card__url {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  word-break: break-all;
}
.work-card__url svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   6. Numbered lists — pain diagnosis and process steps
   ========================================================================== */
.numbered { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .numbered--2col { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } }

.numbered__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}
.numbered__n {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  padding-top: 0.15em;
  font-variant-numeric: tabular-nums;
}
.numbered__title { display: block; font-weight: 700; color: var(--color-heading); margin-bottom: var(--space-1); }
.numbered__text { color: var(--color-text-secondary); }

/* Vertical process with a connecting rule */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  position: relative;
}
.steps__item:last-child { padding-bottom: 0; }
.steps__marker {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-accent);
  background: var(--color-base);
}
.steps__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 2.5rem;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}
.steps__title { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.steps__text { color: var(--color-text-secondary); }

/* ==========================================================================
   7. Self-qualification — two columns, deliberately not symmetrical in tone
   ========================================================================== */
.qualify { display: grid; gap: var(--space-6); }
@media (min-width: 860px) { .qualify { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } }

.qualify__col {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.qualify__col--yes { border-color: var(--color-accent); }
.qualify__title { font-size: var(--text-xl); margin: 0 0 var(--space-6); }
.qualify__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.qualify__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.qualify__list li::before {
  content: '';
  width: 20px; height: 20px;
  margin-top: 0.15em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
}
/* Icon + wording carry the meaning together — never colour alone (guide §13). */
.qualify__col--yes .qualify__list li::before {
  color: var(--color-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
}
.qualify__col--no .qualify__list li::before {
  color: var(--color-text-secondary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6 18 18M18 6 6 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6 18 18M18 6 6 18'/%3E%3C/svg%3E");
}
.qualify__foot { margin-top: var(--space-8); color: var(--color-text-secondary); }

/* ==========================================================================
   8. FAQ accordion — native <details>, works with JS off
   ========================================================================== */
.faq { border-top: 1px solid var(--color-divider); max-width: 52rem; }
.faq__item { border-bottom: 1px solid var(--color-divider); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-heading);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-accent); }
.faq__q svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--transition-fast);
}
.faq__item[open] .faq__q svg { transform: rotate(180deg); }
.faq__a { padding-bottom: var(--space-6); color: var(--color-text-secondary); max-width: 46rem; }
.faq__a p + p { margin-top: var(--space-4); }

/* ==========================================================================
   9. Coverage area
   ========================================================================== */
.area { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 860px) { .area { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }
.area__cities { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); padding: 0; list-style: none; }
.area__city {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

/* ==========================================================================
   10. Team — pill badge with avatar, echoing the prototype (guide §3.4)
   ========================================================================== */
.team { display: grid; gap: var(--space-8); }
@media (min-width: 768px)  { .team { grid-template-columns: repeat(3, 1fr); } }
.team__member { display: flex; flex-direction: column; gap: var(--space-4); }
.team__photo { border-radius: var(--radius-lg); overflow: hidden; }
.team__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.team__name { font-size: var(--text-xl); margin: 0; }
.team__role { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); }
.team__text { color: var(--color-text-secondary); font-size: var(--text-sm); }
.team__handle {
  align-self: flex-start;
  margin-top: auto;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ==========================================================================
   11. Services page
   ========================================================================== */
.svc { padding-block: var(--space-12); border-top: 1px solid var(--color-divider); }
.svc:first-of-type { border-top: 0; }
.svc__head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-6); }
.svc__n {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.svc__title { margin: 0; }
.svc__grid { display: grid; gap: var(--space-8); }
@media (min-width: 860px) { .svc__grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-16); } }
.svc__block + .svc__block { margin-top: var(--space-6); }
.svc__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.svc__includes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.svc__includes li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.svc__includes li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 0.6em;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}
.svc__why {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Callout — transparency blocks and explicit limits */
.callout {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}
.callout__title { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.callout__text { color: var(--color-text-secondary); }
.callout--accent { border-color: var(--color-accent); background: var(--color-accent-soft); }

/* ==========================================================================
   12. Contact
   ========================================================================== */
.contact { display: grid; gap: var(--space-12); }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }

.channels { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.channel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast);
}
a.channel:hover { border-color: var(--color-accent); }
.channel__icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  fill: none; stroke: var(--color-accent);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.channel__label { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); }
.channel__value { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-heading); }
.channel__note { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-1); }

/* ---- Form ---- */
.form { display: grid; gap: var(--space-6); }
.form__legend { font-size: var(--text-sm); color: var(--color-text-secondary); }
.field { display: grid; gap: var(--space-2); }
.field__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-heading); }
.field__req { color: var(--color-error); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  /* Control boundaries use --color-border-strong: the decorative border fails
     WCAG 1.4.11 (3:1) — see ui-guide §19.6. */
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.field__hint { font-size: var(--text-xs); color: var(--color-text-secondary); }
.form__note { font-size: var(--text-sm); color: var(--color-text-secondary); }
.form .button { width: 100%; }
@media (min-width: 600px) { .form .button { width: auto; justify-self: start; } }

/* ==========================================================================
   13. CTA band
   ========================================================================== */
.cta-band { padding-block: var(--space-20); text-align: center; }
.cta-band__inner { max-width: 40rem; margin-inline: auto; }
.cta-band__title { font-size: var(--text-h2); margin: 0; text-wrap: balance; }
.cta-band__text { margin-top: var(--space-4); font-size: var(--text-lg); color: var(--color-text-primary); }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }

/* ==========================================================================
   14. Media placeholders
   --------------------------------------------------------------------------
   Deliberately look unfinished: dashed edge, no photographic texture. If one
   reaches production it should be obvious at a glance, never mistaken for a
   design choice.
   ========================================================================== */
.media img { border-radius: var(--radius-md); width: 100%; }

.media-ph {
  margin: 0;
  aspect-ratio: var(--ph-ratio, 16 / 9);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  container-type: inline-size;
}
.media-ph__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  max-width: 30rem;
}
.media-ph__icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--color-text-secondary);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}
.media-ph__body { display: grid; gap: var(--space-2); }
.media-ph__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-heading);
}
.media-ph__note { font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-secondary); }
.media-ph__spec { display: grid; gap: var(--space-1); }
.media-ph__size {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.media-ph__file {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  word-break: break-all;
  opacity: 0.85;
}
/* Small frames only have room for the headline facts. */
@container (max-width: 300px) {
  .media-ph__note, .media-ph__file { display: none; }
}
@container (max-height: 160px) {
  .media-ph__icon { display: none; }
}
.media-ph--dark {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
}
.media-ph--dark .media-ph__label { color: #FFFFFF; }
.media-ph--dark .media-ph__note,
.media-ph--dark .media-ph__file { color: rgba(255, 255, 255, 0.72); }
.media-ph--dark .media-ph__size { color: var(--color-secondary); }
.media-ph--dark .media-ph__icon { stroke: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   14b. Footer additions (project fork — see includes/footer.php)
   ========================================================================== */
.site-footer__tagline {
  margin-top: var(--space-3);
  max-width: 30rem;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
}
.site-footer__legalinfo {
  margin-top: var(--space-6);
  max-width: 30rem;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}
.site-footer__contact { display: grid; gap: var(--space-2); align-content: start; }

/* ==========================================================================
   15. Legal / long-form pages
   ========================================================================== */
.page-prose { padding-block: var(--space-12) var(--space-16); }
.page-prose .prose { margin-inline: auto; }

/* ==========================================================================
   16. 404
   ========================================================================== */
.notfound { padding-block: var(--space-24); text-align: center; }
.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.25;
}
.notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }