/* ==========================================================================
   The Paradigm — page-specific styles.
   This is a normal flowing content page (no scroll-snap, no 100dvh-locked
   sections) — .pg-scroll-root/.pg-sec from home.css are homepage-only.
   Shared button/nav/footer/cookie styles live in components.css; global
   .pg-col/.pg-title/.pg-headline/.pg-body type-scale primitives in base.css.
   ========================================================================== */

.pdg-sec {
  background: linear-gradient(var(--colour-bg), var(--colour-bg)) center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: min(56px, 8dvh) 20px;
}

.pdg-sec--accent {
  background: linear-gradient(var(--colour-accent), var(--colour-accent)) center / 100% 100% no-repeat;
}

/* box-shadow spillover (footer only, see home.css for full rationale):
   paint-only, doesn't add scrollable height, just backstops a possible
   dvh-drift gap below the footer with matching accent colour. */
.pdg-sec--accent#the-footer {
  box-shadow: 0 150px 0 0 var(--colour-accent);
}

.pdg-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.8rem, 3.6cqw, 2.1dvh);
  letter-spacing: 0.08em;
  color: var(--colour-ink);
  text-transform: uppercase;
}

.pdg-back:hover { color: var(--colour-accent); }

.pdg-eyebrow {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.95rem, 4.2cqw, 2.5dvh);
  letter-spacing: 0.12em;
  color: var(--colour-accent);
  text-transform: uppercase;
}

/* Bold body-text sub-title used for optional titles inserted ABOVE a
   paragraph within a section (Thesis paragraph 2, Framework closing
   paragraph) — deliberately NOT styled like .pdg-eyebrow: these read as
   part of the running body copy, just emphasised, not a new section label. */
.pdg-subtitle {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: min(0.95rem, 4.4cqw, 2.6dvh);
  line-height: 1.4;
  color: var(--colour-ink);
}

/* Thesis section (Screen 2): gorilla mark stacked ABOVE the eyebrow (fixed
   300px width, height:auto keeps its own aspect ratio). */
.pdg-thesis-mark {
  display: block;
  width: 300px;
  height: auto;
  margin-top: calc(var(--size-page-title) * 1.15 - 30px);
}

/* sg monogram, shown after the "The Proof" description — fixed width with
   height:auto to preserve its natural ratio. */
.pdg-monogram {
  display: block;
  width: 150px;
  height: auto;
  margin-top: min(20px, 2.4dvh);
}

.pdg-framework-grid {
  display: flex;
  flex-direction: column;
  gap: min(18px, 2.2dvh);
  margin-top: min(18px, 2dvh);
}

.pdg-card {
  background: var(--colour-card);
  border-radius: 16px;
  padding: min(18px, 2dvh) 18px;
  box-shadow: 0 6px 18px rgba(58, 63, 67, 0.05);
}

.pdg-card-title {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: min(1.15rem, 5.2cqw, 2.8dvh);
  color: var(--colour-ink);
}

.pdg-card-body {
  margin: 8px 0 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.9rem, 4cqw, 2.3dvh);
  line-height: 1.3;
  color: #5C646B;
}

.pdg-cta-body {
  margin: min(16px, 1.8dvh) 0 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.95rem, 4.4cqw, 2.6dvh);
  line-height: 1.4;
  color: var(--colour-bg);
}

.pdg-cta-actions {
  display: flex;
  flex-direction: column;
  gap: min(10px, 1.2dvh);
  margin-top: min(28px, 3.4dvh);
}

/* "Explore The Marks" sits on the accent-coloured CTA section; its fill
   is the page (cream) background instead of the standard dusty-blue tone
   so it reads as the primary action against the accent block. Hover/active
   motion + shadow are untouched, inherited from .pg-btn. */
.pdg-btn-bg { background: var(--colour-bg); }

/* "Begin Inquiry" keeps the standard dusty-blue fill but its label/icon
   (currentColor) switches to the page (cream) background colour for
   contrast against the accent fill. */
.pdg-btn-text-bg { color: var(--colour-bg); }

@media (min-width: 760px) {
  .pdg-sec { background-size: 100% 100%; padding-bottom: min(40px, 5dvh); /* padding-top intentionally NOT overridden here (v29) -- keeps the base min(56px, 8dvh) so this page's title sits at the same vertical position as Thoughts/Cookie Policy, which never had this reduction */ }
  .pdg-sec .pg-col { max-width: min(1200px, calc(100vw - 48px)); }
  .pdg-sec .pg-title { font-size: min(16pt, 3dvh); }
  .pdg-sec .pg-headline { font-size: min(44px, 5.2dvh); max-width: 900px; }
  .pdg-sec .pg-cta-head { font-size: min(44px, 5.2dvh); max-width: 820px; }
  .pdg-eyebrow { font-size: min(12pt, 2.4dvh); }
  .pdg-sec .pg-body { font-size: min(12pt, 2.4dvh); line-height: 1.35; max-width: 820px; }
  .pdg-sec .pdg-subtitle { font-size: min(12pt, 2.4dvh); line-height: 1.35; }
  .pdg-cta-body { font-size: min(12pt, 2.4dvh); line-height: 1.35; max-width: 820px; }
  .pdg-cta-actions { flex-direction: row; gap: 14px; max-width: 820px; }
  .pdg-cta-actions .pg-btn { font-size: min(12pt, 2.4dvh); flex: 1 1 0; }
  .pdg-framework-grid { flex-direction: row; align-items: stretch; }
  .pdg-framework-grid .pdg-card { flex: 1 1 0; }
}

/* Mobile-only "< Home" back-link — wide screens use the disabled self-link
   in the nav bar instead, so this is hidden there. */
@media (min-width: 760px) {
  .pdg-back { display: none; }
}