/* ==========================================================================
   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;
}

.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);
}

.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-top: min(40px, 5dvh); padding-bottom: min(40px, 5dvh); }
  .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; }
}