/* ============================================================
   Paeveul v2.0 — Production Stylesheet
   paeveul-v2.css

   Structure:
   1. Google Fonts import
   2. CSS custom properties (:root)
      2a. Colour tokens
      2b. Typography tokens
      2c. Spacing, radius, shadow, motion tokens
      2d. Layout tokens
   3. Global reset and base styles
   4. Component classes (8 components)
      4a. Wordmark
      4b. Button
      4c. SectionLabel
      4d. Card
      4e. Pullquote
      4f. Stat
      4g. Input
      4h. AvailabilityNote
   5. Page shell classes
      5a. Header / nav
      5b. Footer
      5c. Hero (shared inner-page)
      5d. Wrap / content container
      5e. Section bands
   6. Shared utilities
      6a. Browser mock (.pv-bmock)
      6b. Chip component (.pv-chip)
      6c. Divider (.pv-divider)
      6d. Avatar (.pv-avatar)
   7. Responsive breakpoints (mobile-first overrides)
   ============================================================ */


/* ============================================================
   Section 1 — Google Fonts import
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&family=Source+Sans+3:wght@400;500;600&display=swap");


/* ============================================================
   Section 2 — CSS custom properties (:root)
   ============================================================ */

:root {

  /* ── 2a. Colour tokens ─────────────────────────────────────── */

  /* paper surfaces (warm off-white, slightly cream) */
  --pv-paper:        #F6F4EE;  /* page background */
  --pv-paper-alt:    #EFEBE1;  /* alternating section bands */
  --pv-card:         #FFFFFF;  /* card surface — the only true white */

  /* ink (deep navy-black for type, never pure black) */
  --pv-ink:          #11151E;  /* primary text + inverse surfaces */
  --pv-ink-inverse:  #F6F4EE;  /* paper colour on ink */

  /* muted text — slate for active muted, stone for the quietest meta */
  --pv-slate:        #5A6273;  /* sub-copy, captions */
  --pv-stone:        #8A8475;  /* warm muted (under labels, page meta) */

  /* hairlines */
  --pv-hairline:     #DCD7CA;  /* primary 1px divider on paper */
  --pv-hairline-soft:#EFEBE1;  /* 1px divider inside cards */

  /* accent — one ink for the whole system */
  --pv-cobalt:       #1B3A8A;  /* links, focus, the wordmark stop, +sign */
  --pv-cobalt-bright:#4F7CFF;  /* the same accent on ink (inverse) */

  /* cobalt washes — semi-transparent fills */
  --pv-cobalt-wash-04: rgba(27, 58, 138, 0.04);
  --pv-cobalt-wash-06: rgba(27, 58, 138, 0.06);
  --pv-cobalt-wash-08: rgba(27, 58, 138, 0.08);
  --pv-cobalt-wash-16: rgba(27, 58, 138, 0.16);
  --pv-cobalt-wash-35: rgba(27, 58, 138, 0.35);

  /* danger — oxblood, used only for input errors */
  --pv-danger:         #A8341E;
  --pv-danger-wash:    rgba(168, 52, 30, 0.12);

  /* semantic aliases (use these in components) */
  --pv-bg:           var(--pv-paper);
  --pv-bg-alt:       var(--pv-paper-alt);
  --pv-surface:      var(--pv-card);
  --pv-surface-ink:  var(--pv-ink);

  --pv-text:         var(--pv-ink);
  --pv-text-muted:   var(--pv-slate);
  --pv-text-quiet:   var(--pv-stone);
  --pv-text-on-ink:  var(--pv-ink-inverse);
  --pv-text-on-ink-quiet: #9097A8;

  --pv-border:       var(--pv-hairline);
  --pv-border-soft:  var(--pv-hairline-soft);
  --pv-border-strong:var(--pv-ink);

  --pv-accent:       var(--pv-cobalt);
  --pv-accent-on-ink:var(--pv-cobalt-bright);
  --pv-accent-wash:  var(--pv-cobalt-wash-08);
  --pv-accent-quote-wash: var(--pv-cobalt-wash-06);

  --pv-link:               var(--pv-cobalt);
  --pv-link-underline:     var(--pv-cobalt-wash-35);
  --pv-focus-ring:         var(--pv-cobalt);

  --pv-text-danger:        var(--pv-danger);
  --pv-border-danger:      var(--pv-danger);
  --pv-ring-danger:        var(--pv-danger-wash);

  /* ── 2b. Typography tokens ─────────────────────────────────── */

  /* families */
  --pv-font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --pv-font-sans:  "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* role aliases */
  --pv-font-display: var(--pv-font-serif);
  --pv-font-heading: var(--pv-font-serif);
  --pv-font-body:    var(--pv-font-sans);
  --pv-font-ui:      var(--pv-font-sans);
  --pv-font-meta:    var(--pv-font-sans);
  --pv-font-italic:  var(--pv-font-serif);

  /* weights */
  --pv-weight-regular:  400;
  --pv-weight-medium:   500;
  --pv-weight-semibold: 600;

  /* sizes */
  --pv-size-hero:        72px;
  --pv-size-display:     56px;
  --pv-size-h1:          44px;
  --pv-size-h2:          32px;
  --pv-size-h3:          24px;
  --pv-size-h4:          20px;
  --pv-size-lead:        18px;
  --pv-size-body:        16px;
  --pv-size-body-sm:     14px;
  --pv-size-meta:        13px;
  --pv-size-fine:        12px;

  /* line heights */
  --pv-leading-display:  1.02;
  --pv-leading-heading:  1.1;
  --pv-leading-snug:     1.3;
  --pv-leading-body:     1.65;
  --pv-leading-loose:    1.75;

  /* tracking */
  --pv-track-display:   -0.024em;
  --pv-track-heading:   -0.02em;
  --pv-track-body:       0;
  --pv-track-meta:       0;

  /* ── 2c. Spacing, radius, shadow, motion tokens ────────────── */

  /* spacing scale */
  --pv-space-1:   4px;
  --pv-space-2:   8px;
  --pv-space-3:  12px;
  --pv-space-4:  16px;
  --pv-space-5:  20px;
  --pv-space-6:  24px;
  --pv-space-7:  32px;
  --pv-space-8:  40px;
  --pv-space-9:  48px;
  --pv-space-10: 64px;
  --pv-space-11: 80px;
  --pv-space-12: 96px;
  --pv-space-13:112px;

  /* radii */
  --pv-radius-none:  0;
  --pv-radius-sm:    4px;
  --pv-radius-md:    6px;
  --pv-radius-lg:    8px;
  --pv-radius-pill:  999px;

  /* borders */
  --pv-border-w:     1px;
  --pv-border-w-em:  2px;

  /* shadows */
  --pv-shadow-none:   none;
  --pv-shadow-card:   0 1px 2px rgba(17, 21, 30, 0.04);
  --pv-shadow-float:  0 14px 40px rgba(17, 21, 30, 0.08);
  --pv-shadow-board:  0 1px 3px rgba(0, 0, 0, 0.18),
                      0 18px 56px rgba(0, 0, 0, 0.22);

  /* motion */
  --pv-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --pv-duration-1:   120ms;
  --pv-duration-2:   180ms;
  --pv-duration-3:   240ms;

  /* ── 2d. Layout tokens ─────────────────────────────────────── */

  --pv-max-content:  1200px;
  --pv-gutter-lg:    80px;
  --pv-gutter-md:    40px;
  --pv-gutter-sm:    20px;

  --pv-section-y:    96px;
  --pv-section-y-lg: 112px;
}


/* ============================================================
   Section 3 — Global reset and base styles
   ============================================================ */

html, body {
  margin: 0;
  padding: 0;
  background: var(--pv-paper);
  color: var(--pv-ink);
  font-family: var(--pv-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  line-height: var(--pv-leading-body);
}

*, *::before, *::after {
  box-sizing: border-box;
}

a {
  color: var(--pv-cobalt);
  text-decoration: none;
  transition: color var(--pv-duration-2) var(--pv-ease);
}

a:hover {
  color: var(--pv-ink);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--pv-font-serif);
  font-weight: var(--pv-weight-semibold);
  line-height: var(--pv-leading-heading);
  letter-spacing: var(--pv-track-heading);
  color: var(--pv-ink);
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

button {
  font-family: var(--pv-font-sans);
}


/* ============================================================
   Section 4 — Component classes
   ============================================================ */

/* ── 4a. Wordmark ──────────────────────────────────────────── */

.pv-wordmark {
  font-family: var(--pv-font-serif);
  font-size: 22px;
  font-weight: var(--pv-weight-medium);
  color: var(--pv-ink);
  letter-spacing: var(--pv-track-heading);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.pv-wordmark-stop {
  color: var(--pv-cobalt);
}

.pv-wordmark--inverse {
  color: var(--pv-ink-inverse);
}

.pv-wordmark--inverse .pv-wordmark-stop {
  color: var(--pv-cobalt-bright);
}

/* ── 4b. Button ────────────────────────────────────────────── */

.pv-btn {
  display: inline-block;
  font-family: var(--pv-font-sans);
  font-size: var(--pv-size-body-sm);
  font-weight: var(--pv-weight-semibold);
  border-radius: var(--pv-radius-lg);
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition:
    background var(--pv-duration-2) var(--pv-ease),
    color var(--pv-duration-2) var(--pv-ease),
    border-color var(--pv-duration-2) var(--pv-ease),
    transform var(--pv-duration-1) var(--pv-ease);
  border: 1px solid transparent;
}

.pv-btn--primary {
  background: var(--pv-cobalt);
  color: var(--pv-ink-inverse);
  border-color: var(--pv-cobalt);
}

.pv-btn--primary:hover {
  background: #152E70;
  border-color: #152E70;
  color: var(--pv-ink-inverse);
}

.pv-btn--secondary {
  background: transparent;
  color: var(--pv-ink);
  border-color: var(--pv-ink);
}

.pv-btn--secondary:hover {
  background: var(--pv-cobalt-wash-04);
  border-color: var(--pv-ink);
  color: var(--pv-ink);
}

.pv-btn:active {
  transform: translateY(1px);
}

.pv-btn:focus-visible {
  outline: 3px solid var(--pv-cobalt-wash-08);
  outline-offset: 3px;
}

/* ── 4c. SectionLabel ──────────────────────────────────────── */

.pv-section-label {
  font-family: var(--pv-font-serif);
  font-style: italic;
  font-size: var(--pv-size-meta);
  font-weight: var(--pv-weight-regular);
  color: var(--pv-stone);
  line-height: var(--pv-leading-snug);
  letter-spacing: 0;
  margin: 0 0 28px 0;
}

/* ── 4d. Card ──────────────────────────────────────────────── */

.pv-card {
  background: var(--pv-card);
  border: 1px solid var(--pv-hairline);
  border-radius: var(--pv-radius-md);
  transition: border-color var(--pv-duration-2) var(--pv-ease);
}

.pv-card--featured {
  border-color: var(--pv-cobalt);
}

.pv-card--link:hover {
  border-color: var(--pv-cobalt-wash-16);
}

/* ── 4e. Pullquote ─────────────────────────────────────────── */

.pv-pullquote {
  border-left: var(--pv-border-w-em) solid var(--pv-cobalt);
  padding: 20px 20px 20px 20px;
  background: var(--pv-cobalt-wash-06);
  border-radius: var(--pv-radius-md);
  margin: 0;
}

.pv-pullquote p {
  font-family: var(--pv-font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--pv-ink);
  line-height: var(--pv-leading-body);
  margin: 0;
}

/* Pullquote card (testimonials) — extends .pv-card */
.pv-pullquote-card {
  /* visual treatment lives in inner .pv-pullquote-quote; no extra border needed */
}

.pv-pullquote-quote p {
  font-family: var(--pv-font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--pv-ink);
  line-height: 1.55;
  margin: 0;
}

.pv-pullquote-cap {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--pv-hairline-soft);
  display: flex;
  align-items: center;
  gap: 14px;
}

.pv-pullquote-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--pv-radius-pill);
  background: var(--pv-cobalt-wash-06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pv-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--pv-cobalt);
  flex-shrink: 0;
}

.pv-pullquote-name {
  font-family: var(--pv-font-serif);
  font-size: 14px;
  font-weight: var(--pv-weight-medium);
  color: var(--pv-ink);
  display: block;
}

.pv-pullquote-role {
  font-family: var(--pv-font-sans);
  font-size: 12px;
  color: var(--pv-stone);
  display: block;
}

/* ── 4f. Stat ──────────────────────────────────────────────── */

.pv-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pv-stat-value {
  font-family: var(--pv-font-serif);
  font-weight: var(--pv-weight-semibold);
  color: var(--pv-ink);
  line-height: 1;
}

.pv-stat--lg .pv-stat-value {
  font-size: var(--pv-size-h1); /* 44px */
}

.pv-stat--md .pv-stat-value {
  font-size: var(--pv-size-h2); /* 32px */
}

.pv-stat-suffix {
  color: var(--pv-cobalt);
  /* inherits same size as .pv-stat-value */
}

.pv-stat-label {
  font-family: var(--pv-font-sans);
  font-size: var(--pv-size-meta);
  color: var(--pv-slate);
  line-height: var(--pv-leading-body);
}

/* ── 4g. Input ─────────────────────────────────────────────── */

.pv-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pv-input-label {
  font-family: var(--pv-font-serif);
  font-size: var(--pv-size-body-sm);
  font-weight: var(--pv-weight-medium);
  color: var(--pv-ink);
}

.pv-required {
  color: var(--pv-text-danger);
  margin-left: 2px;
  font-weight: inherit;
  line-height: inherit;
  user-select: none;
}

/* Legend-only asterisk: enlarge the glyph for visibility in the small
   "Fields marked * are required" note. Scoped so it never touches the
   field-level .pv-required markers. line-height:1 keeps the enlarged
   glyph inside the note's existing line box — no vertical-rhythm shift. */
.pv-required--legend {
  font-size: 1.35em;
  line-height: 1;
  vertical-align: middle;
}

.pv-input {
  background: var(--pv-card);
  border: 1px solid var(--pv-hairline);
  border-radius: var(--pv-radius-lg);
  padding: 14px 16px;
  font-family: var(--pv-font-sans);
  font-size: 15px;
  color: var(--pv-ink);
  width: 100%;
  outline: none;
  transition:
    border-color var(--pv-duration-2) var(--pv-ease),
    box-shadow var(--pv-duration-2) var(--pv-ease);
}

.pv-input::placeholder {
  color: var(--pv-stone);
}

.pv-input:focus-visible {
  border-color: var(--pv-cobalt);
  outline: 3px solid var(--pv-cobalt-wash-08);
  outline-offset: 3px;
}

.pv-input-wrap--error .pv-input {
  border-color: var(--pv-danger);
  background: var(--pv-danger-wash);
}

.pv-input-error {
  font-family: var(--pv-font-sans);
  font-size: var(--pv-size-fine);
  color: var(--pv-danger);
}

/* ── 4h. AvailabilityNote ──────────────────────────────────── */

.pv-availability-note {
  font-family: var(--pv-font-serif);
  font-style: italic;
  font-size: var(--pv-size-body-sm);
  color: var(--pv-stone);
  margin: 16px 0 0 0;
  line-height: var(--pv-leading-body);
}


/* ============================================================
   Section 5 — Page shell classes
   ============================================================ */

/* ── 5a. Header / nav ──────────────────────────────────────── */

.pg-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(246, 244, 238, 0.92);
  border-bottom: 1px solid var(--pv-hairline);
}

.pg-header-inner {
  max-width: var(--pv-max-content);
  margin-left: auto;
  margin-right: auto;
  padding: 20px var(--pv-gutter-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
}

/* Nav links */
.pg-nav {
  display: flex;
  gap: 28px;
  position: relative;
}

.pg-nav a {
  font-family: var(--pv-font-sans);
  font-size: 14px;
  font-weight: var(--pv-weight-medium);
  text-decoration: none;
  color: var(--pv-slate);
  transition: color var(--pv-duration-2) var(--pv-ease);
  padding: 6px 0;
  position: relative;
}

.pg-nav a:hover {
  color: var(--pv-ink);
}

.pg-nav a.is-active {
  color: var(--pv-cobalt);
}

.pg-nav a.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);   /* deterministic centre, survives any future padding */
  bottom: -21px;
  width: calc(100% - 6px);        /* inset ~3px each side -> bar hugs the ink, not the bearings */
  height: 2px;
  background: var(--pv-cobalt);
  border-radius: 1px;             /* softens the 2px cap on the studio aesthetic */
}

/* Magic line — JS-driven sliding underline */
.pg-nav-line {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--pv-cobalt);
  border-radius: 1px;
  pointer-events: none;
  opacity: 0;
  transition:
    left var(--pv-duration-2, 180ms) var(--pv-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    width var(--pv-duration-2, 180ms) var(--pv-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    opacity var(--pv-duration-1, 120ms) var(--pv-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* When JS magic line is active, suppress the static CSS underline */
.pg-nav--js a.is-active::after {
  display: none;
}

/* Hamburger button */
.pg-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--pv-hairline);
  background: var(--pv-card);
  border-radius: var(--pv-radius-lg);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}

.pg-hamburger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--pv-ink);
  transition: transform var(--pv-duration-2) var(--pv-ease),
              opacity var(--pv-duration-2) var(--pv-ease);
}

/* Mobile menu */
.pg-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--pv-paper);
  border-bottom: 1px solid var(--pv-hairline);
  padding: 16px 20px 24px;
}

.pg-mobile-menu.open {
  display: block;
}

.pg-mobile-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--pv-hairline);
  color: var(--pv-ink);
  text-decoration: none;
  font-family: var(--pv-font-sans);
  font-size: 16px;
  font-weight: var(--pv-weight-medium);
}

.pg-mobile-menu a:last-of-type {
  border-bottom: none;
}

.pg-mobile-menu a:hover {
  color: var(--pv-cobalt);
}

.pg-mobile-menu a.pv-btn--primary {
  color: var(--pv-ink-inverse);
}

/* Header CTA — hidden on mobile */
.pg-header .pv-btn {
  flex-shrink: 0;
}

/* ── 5b. Footer ────────────────────────────────────────────── */

.pg-footer {
  background: var(--pv-ink);
  border-top: none;
  padding: 64px 0 36px;
}

.pg-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.pg-footer-col h4 {
  font-family: var(--pv-font-sans);
  font-size: var(--pv-size-fine);
  font-weight: var(--pv-weight-medium);
  color: var(--pv-text-on-ink-quiet);
  margin: 0 0 16px;
  letter-spacing: 0;
}

.pg-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pg-footer-col a {
  font-family: var(--pv-font-sans);
  font-size: var(--pv-size-body-sm);
  text-decoration: none;
  color: var(--pv-ink-inverse);
  transition: color var(--pv-duration-2) var(--pv-ease);
}

.pg-footer-col a:hover {
  color: var(--pv-cobalt-bright);
}

.pg-footer-tagline {
  font-family: var(--pv-font-serif);
  font-style: italic;
  font-size: var(--pv-size-body-sm);
  color: var(--pv-text-on-ink-quiet);
  margin: 12px 0 0;
  line-height: var(--pv-leading-body);
}

.pg-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(246, 244, 238, 0.1);
  font-family: var(--pv-font-sans);
  font-size: var(--pv-size-fine);
  color: var(--pv-text-on-ink-quiet);
}

/* Footer legal nav */
.pg-legal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pg-legal-nav a {
  font-family: var(--pv-font-sans);
  font-size: var(--pv-size-fine);
  font-weight: 400;
  color: var(--pv-text-on-ink-quiet);
  text-decoration: none;
  transition: color var(--pv-duration-2) var(--pv-ease);
}

.pg-legal-nav a:hover {
  color: var(--pv-ink-inverse);
}

.pg-legal-nav a:focus-visible {
  outline: 2px solid var(--pv-cobalt-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

.pg-legal-sep {
  color: rgba(246, 244, 238, 0.25);
  font-size: var(--pv-size-fine);
  font-family: var(--pv-font-sans);
  user-select: none;
}

/* ── 5c. Hero (shared inner-page) ──────────────────────────── */

.pg-hero {
  padding: 76px 0;
  background: var(--pv-paper);
  border-bottom: 1px solid var(--pv-hairline);
  position: relative;
}

.pg-hero-inner {
  max-width: var(--pv-max-content);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--pv-gutter-lg);
}

.pg-title {
  font-family: var(--pv-font-serif);
  font-size: var(--pv-size-h1); /* 44px on inner pages */
  font-weight: var(--pv-weight-semibold);
  line-height: var(--pv-leading-heading);
  letter-spacing: var(--pv-track-heading);
  color: var(--pv-ink);
  margin: 0;
}

.pg-lede {
  font-family: var(--pv-font-sans);
  font-size: var(--pv-size-lead);
  line-height: var(--pv-leading-body);
  color: var(--pv-slate);
  max-width: 620px;
  margin: 20px 0 0;
}

/* ── 5d. Wrap / content container ──────────────────────────── */

.pg-wrap {
  max-width: var(--pv-max-content);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--pv-gutter-lg);
}

/* ── 5e. Section bands ─────────────────────────────────────── */

.pg-section {
  padding: var(--pv-section-y) 0;
}

.pg-section + .pg-section {
  border-top: 1px solid var(--pv-hairline);
}

.pg-section--alt {
  background: var(--pv-paper-alt);
}

.pg-section--ink {
  background: var(--pv-ink);
  color: var(--pv-ink-inverse);
}


/* ============================================================
   Section 6 — Shared utilities
   ============================================================ */

/* ── 6a. Browser mock (.pv-bmock) ──────────────────────────── */

.pv-bmock {
  border-radius: var(--pv-radius-lg);
  overflow: hidden;
  border: 1px solid var(--pv-hairline);
  background: var(--pv-paper-alt);
  width: 100%;
  box-shadow: var(--pv-shadow-float);
}

.pv-bmock-bar {
  background: var(--pv-paper-alt);
  border-bottom: 1px solid var(--pv-hairline);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pv-bmock-dots {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}

.pv-bmock-dots span {
  width: 7px;
  height: 7px;
  border-radius: var(--pv-radius-pill);
  background: var(--pv-stone);
  opacity: 0.5;
}

.pv-bmock-url {
  font-size: 10px;
  color: var(--pv-stone);
  letter-spacing: 0.02em;
  background: var(--pv-card);
  border: 1px solid var(--pv-hairline);
  border-radius: var(--pv-radius-sm);
  padding: 3px 10px;
  flex: 1;
  font-family: var(--pv-font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv-bmock-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pv-bmock-hero {
  height: 52px;
  border-radius: var(--pv-radius-sm);
  background: var(--pv-hairline);
  margin-bottom: 4px;
}

.pv-bmock-line {
  height: 7px;
  border-radius: 2px;
  background: var(--pv-hairline);
}

.pv-bmock-block {
  height: 34px;
  border-radius: var(--pv-radius-sm);
  background: var(--pv-card);
  border: 1px solid var(--pv-hairline);
  margin-top: 4px;
}

.pv-bmock-row {
  display: flex;
  gap: 7px;
}

.pv-bmock-row .pv-bmock-block {
  flex: 1;
  height: 28px;
  margin-top: 0;
}

/* Cobalt sparkline — the one accent element in the browser mock */
.pv-bmock-sparkline {
  height: 6px;
  border-radius: 2px;
  background: var(--pv-cobalt-wash-16);
}

.pv-bmock-page-nav {
  height: 22px;
  background: var(--pv-card);
  border-bottom: 1px solid var(--pv-hairline);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  margin-bottom: 4px;
}

.pv-bmock-page-nav span {
  display: inline-block;
  height: 5px;
  border-radius: 2px;
  background: var(--pv-hairline);
}

.pv-bmock-cta {
  height: 16px;
  width: 52px;
  border-radius: var(--pv-radius-sm, 4px);
  background: var(--pv-cobalt);
  margin-top: 8px;
}

/* ── 6b. Chip component (.pv-chip) ─────────────────────────── */

.pv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--pv-hairline);
  border-radius: var(--pv-radius-sm);
  font-size: var(--pv-size-body-sm);
  font-family: var(--pv-font-sans);
  font-weight: var(--pv-weight-medium);
  color: var(--pv-slate);
  cursor: pointer;
  transition:
    background var(--pv-duration-2) var(--pv-ease),
    border-color var(--pv-duration-2) var(--pv-ease),
    color var(--pv-duration-2) var(--pv-ease);
  background: transparent;
}

.pv-chip:hover {
  border-color: var(--pv-cobalt);
  color: var(--pv-cobalt);
}

.pv-chip.is-active {
  background: var(--pv-cobalt);
  border-color: var(--pv-cobalt);
  color: var(--pv-ink-inverse);
}

/* ── 6c. Divider (.pv-divider) ─────────────────────────────── */

.pv-divider {
  height: 1px;
  background: var(--pv-hairline);
  border: none;
  margin: 0;
}

/* ── 6d. Avatar (.pv-avatar) ───────────────────────────────── */

.pv-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--pv-radius-pill);
  background: var(--pv-cobalt-wash-06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pv-font-sans);
  font-size: 13px;
  font-weight: var(--pv-weight-semibold);
  color: var(--pv-cobalt);
  flex-shrink: 0;
}

/* ── FAQ accordion ─────────────────────────────────────────── */

.pv-faq-item {
  border-top: 1px solid var(--pv-hairline);
}

.pv-faq-item:last-child {
  border-bottom: 1px solid var(--pv-hairline);
}

.pv-faq-q {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--pv-font-serif);
  padding: 22px 0;
  font-size: 17px;
  font-weight: var(--pv-weight-medium);
  color: var(--pv-ink);
  user-select: none;
}

.pv-faq-q:hover {
  color: var(--pv-cobalt);
}

.pv-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--pv-duration-3) var(--pv-ease);
}

.pv-faq-body p {
  margin: 0;
  padding-bottom: 22px;
  color: var(--pv-slate);
  font-size: 15px;
  line-height: var(--pv-leading-body);
  max-width: 640px;
  font-family: var(--pv-font-sans);
}

/* FAQ icon — text character (+/–) in cobalt */
.pv-faq-icon {
  flex: 0 0 auto;
  font-family: var(--pv-font-sans);
  font-size: 20px;
  font-weight: var(--pv-weight-regular);
  color: var(--pv-cobalt);
  line-height: 1;
  width: 22px;
  text-align: center;
  transition: none;
}

/* ── Article image lightbox ────────────────────────────────── */

.ar-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity var(--pv-duration-2) ease;
}

.ar-lightbox.is-open {
  opacity: 1;
}

.ar-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--pv-radius-lg);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  cursor: default;
}

.ar-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 4px 8px;
}

.ar-lightbox-close:hover {
  opacity: 1;
}

/* ── Blog card grid ────────────────────────────────────────── */

.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.bl-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.bl-card-img {
  padding: 0;
  background: var(--pv-card);
  border-bottom: 1px solid var(--pv-hairline);
  display: block;
  overflow: hidden;
}

.bl-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: var(--pv-radius-sm) var(--pv-radius-sm) 0 0;
  background: var(--pv-card);
}

.bl-featured-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: var(--pv-radius-md);
  background: var(--pv-card);
  max-height: 260px;
}

.bl-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bl-card-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--pv-hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Blog category label — italic serif, stone, quiet */
.bl-cat-label {
  font-family: var(--pv-font-serif);
  font-style: italic;
  font-size: var(--pv-size-fine);
  color: var(--pv-stone);
  display: inline-block;
}

/* ── Article detail pages ──────────────────────────────────── */

.ar-hero {
  padding: 56px 0 48px;
  position: relative;
  border-bottom: 1px solid var(--pv-hairline);
}

.ar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--pv-font-sans);
  font-size: var(--pv-size-fine);
}

.ar-breadcrumb-link {
  color: var(--pv-stone);
  text-decoration: none;
  transition: color var(--pv-duration-2) var(--pv-ease);
}

.ar-breadcrumb-link:hover {
  color: var(--pv-cobalt);
}

.ar-breadcrumb-sep {
  color: var(--pv-hairline);
}

.ar-breadcrumb-current {
  color: var(--pv-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.ar-h1 {
  font-family: var(--pv-font-serif);
  font-size: 48px;
  line-height: 1.08;
  font-weight: var(--pv-weight-semibold);
  letter-spacing: var(--pv-track-heading);
  color: var(--pv-ink);
  margin: 16px 0 0;
  max-width: 820px;
}

.ar-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--pv-font-sans);
  font-size: var(--pv-size-fine);
  color: var(--pv-stone);
}

.ar-meta-dot {
  color: var(--pv-hairline);
}

.ar-body {
  max-width: 740px;
  padding: 64px 0 80px;
}

.ar-body p {
  font-family: var(--pv-font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--pv-leading-loose);
  color: var(--pv-ink);
  margin: 0 0 22px;
}

.ar-body h2 {
  font-family: var(--pv-font-serif);
  font-size: 26px;
  font-weight: var(--pv-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--pv-track-heading);
  color: var(--pv-ink);
  margin: 48px 0 18px;
  padding-top: 20px;
  border-top: 1px solid var(--pv-hairline);
}

.ar-body h3 {
  font-family: var(--pv-font-serif);
  font-size: 19px;
  font-weight: var(--pv-weight-semibold);
  line-height: 1.25;
  letter-spacing: var(--pv-track-heading);
  color: var(--pv-ink);
  margin: 36px 0 12px;
}

.ar-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ar-body ul li {
  padding-left: 20px;
  position: relative;
  font-family: var(--pv-font-sans);
  font-size: 16px;
  line-height: var(--pv-leading-body);
  color: var(--pv-ink);
}

.ar-body ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pv-stone);
}

.ar-body ol {
  padding-left: 0;
  margin: 0 0 22px;
  counter-reset: ar-ol;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ar-body ol li {
  counter-increment: ar-ol;
  padding-left: 28px;
  position: relative;
  font-family: var(--pv-font-sans);
  font-size: 16px;
  line-height: var(--pv-leading-body);
  color: var(--pv-ink);
  list-style: none;
}

.ar-body ol li::before {
  content: counter(ar-ol) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--pv-font-sans);
  font-size: 13px;
  font-weight: var(--pv-weight-semibold);
  color: var(--pv-cobalt);
  line-height: var(--pv-leading-loose);
}

.ar-body strong {
  font-weight: var(--pv-weight-semibold);
  color: var(--pv-ink);
}

.ar-body a {
  color: var(--pv-cobalt);
  text-decoration: none;
  border-bottom: 1px solid var(--pv-cobalt-wash-35);
  transition: border-color var(--pv-duration-2) var(--pv-ease);
}

.ar-body a:hover {
  border-bottom-color: var(--pv-cobalt);
}

.ar-body hr {
  border: none;
  border-top: 1px solid var(--pv-hairline);
  margin: 40px 0;
}

/* Callout box */
.ar-callout {
  background: var(--pv-cobalt-wash-06);
  border: 1px solid var(--pv-cobalt-wash-16);
  border-left: 3px solid var(--pv-cobalt);
  border-radius: var(--pv-radius-md);
  padding: 18px 22px;
  margin: 28px 0;
  font-size: 15px;
  line-height: var(--pv-leading-body);
  color: var(--pv-ink);
}

.ar-callout strong {
  font-family: var(--pv-font-serif);
  font-size: var(--pv-size-body-sm);
  font-weight: var(--pv-weight-medium);
  color: var(--pv-cobalt);
  font-style: italic;
  display: block;
  margin-bottom: 8px;
}

/* Article data table */
.ar-table-wrap {
  overflow-x: auto;
  margin: 28px 0;
  border-radius: var(--pv-radius-lg);
  border: 1px solid var(--pv-hairline);
}

.ar-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pv-size-body-sm);
}

.ar-table-wrap th {
  background: var(--pv-paper-alt);
  font-family: var(--pv-font-sans);
  font-size: var(--pv-size-fine);
  font-weight: var(--pv-weight-medium);
  color: var(--pv-stone);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--pv-hairline);
}

.ar-table-wrap td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--pv-hairline);
  color: var(--pv-ink);
  vertical-align: top;
  line-height: 1.5;
}

.ar-table-wrap tr:last-child td {
  border-bottom: none;
}

.ar-table-wrap tr:hover td {
  background: var(--pv-cobalt-wash-04);
}

/* Article image wrapper */
.ar-img-wrap {
  margin: 28px 0;
  border-radius: var(--pv-radius-lg);
  overflow: hidden;
  border: 1px solid var(--pv-hairline);
  width: 100%;
  transform: translateZ(0);
}

.ar-img-wrap img {
  width: 100%;
  height: 240px;
  max-width: 560px;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  object-position: top;
  cursor: zoom-in;
}

.ar-img-caption {
  padding: 10px 14px;
  font-size: var(--pv-size-fine);
  color: var(--pv-stone);
  font-family: var(--pv-font-sans);
  background: var(--pv-paper-alt);
  border-top: 1px solid var(--pv-hairline);
}

/* Post-article CTA band */
.ar-cta-band {
  border-top: 1px solid var(--pv-hairline);
  background: var(--pv-paper-alt);
  position: relative;
}

.ar-cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 80px 0;
}

.ar-cta-h2 {
  font-family: var(--pv-font-serif);
  font-size: 34px;
  font-weight: var(--pv-weight-semibold);
  line-height: 1.1;
  margin: 12px 0 0;
  letter-spacing: var(--pv-track-heading);
  color: var(--pv-ink);
}

.ar-cta-lede {
  margin-top: 14px;
  font-size: 15px;
  color: var(--pv-slate);
  line-height: var(--pv-leading-body);
  max-width: 460px;
  font-family: var(--pv-font-sans);
}

.ar-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  flex: 0 0 auto;
}

/* Article image lightbox */
.ar-img-wrap img {
  cursor: zoom-in;
}

/* Article prose: no top padding when immediately after hero */
.ar-hero + .pg-section {
  padding-top: 0;
}

/* Article related section — marker class */
.ar-related {}

/* ── Legal pages ───────────────────────────────────────────── */

.lg-hero {
  padding: 56px 0 40px;
  position: relative;
  border-bottom: 1px solid var(--pv-hairline);
  background: var(--pv-paper);
}

.lg-title {
  font-family: var(--pv-font-serif);
  font-size: 48px;
  line-height: 1.1;
  font-weight: var(--pv-weight-semibold);
  letter-spacing: var(--pv-track-heading);
  color: var(--pv-ink);
  margin: 16px 0 0;
}

.lg-updated {
  font-family: var(--pv-font-sans);
  font-size: var(--pv-size-fine);
  font-weight: 400;
  color: var(--pv-stone);
  margin: 10px 0 0;
}

.lg-body {
  max-width: 720px;
  padding: 48px 0 80px;
}

.lg-body p {
  font-family: var(--pv-font-sans);
  font-size: 16px;
  line-height: var(--pv-leading-loose);
  color: var(--pv-ink);
  margin: 0 0 22px;
}

.lg-body h2 {
  font-family: var(--pv-font-serif);
  font-size: 26px;
  font-weight: var(--pv-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--pv-track-heading);
  color: var(--pv-ink);
  margin: 48px 0 18px;
  padding-top: 20px;
  border-top: 1px solid var(--pv-hairline);
}

.lg-body h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.lg-body h3 {
  font-family: var(--pv-font-serif);
  font-size: 19px;
  font-weight: var(--pv-weight-semibold);
  line-height: 1.25;
  letter-spacing: var(--pv-track-heading);
  color: var(--pv-ink);
  margin: 36px 0 12px;
}

.lg-body ul,
.lg-body ol {
  margin: 0 0 22px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lg-body ul li {
  padding-left: 20px;
  position: relative;
  font-family: var(--pv-font-sans);
  font-size: 16px;
  line-height: var(--pv-leading-body);
  color: var(--pv-ink);
  list-style: none;
}

.lg-body ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--pv-stone);
}

.lg-body ol {
  counter-reset: lg-ol;
}

.lg-body ol li {
  counter-increment: lg-ol;
  padding-left: 28px;
  position: relative;
  font-family: var(--pv-font-sans);
  font-size: 16px;
  line-height: var(--pv-leading-body);
  color: var(--pv-ink);
  list-style: none;
}

.lg-body ol li::before {
  content: counter(lg-ol) '.';
  position: absolute;
  left: 0;
  font-family: var(--pv-font-sans);
  font-size: 13px;
  font-weight: var(--pv-weight-semibold);
  color: var(--pv-cobalt);
  line-height: var(--pv-leading-loose);
}

.lg-body strong {
  font-weight: var(--pv-weight-semibold);
  color: var(--pv-ink);
}

.lg-body a {
  color: var(--pv-cobalt);
  text-decoration: none;
  border-bottom: 1px solid var(--pv-cobalt-wash-35);
  transition: border-color var(--pv-duration-2) var(--pv-ease);
}

.lg-body a:hover {
  border-bottom-color: var(--pv-cobalt);
}

.lg-body hr {
  border: none;
  border-top: 1px solid var(--pv-hairline);
  margin: 40px 0;
}


/* ============================================================
   Section 7 — Responsive breakpoints (mobile-first overrides)
   ============================================================ */

/* ── Tablet / narrow desktop (≤1147px) ─────────────────────── */
@media (max-width: 1147px) {

  .pg-wrap {
    padding-left: var(--pv-gutter-sm);
    padding-right: var(--pv-gutter-sm);
  }

  .pg-header-inner {
    padding: 14px var(--pv-gutter-sm);
  }

  .pg-hero {
    padding: 44px 0;
  }

  .pg-hero-inner {
    padding: 0 var(--pv-gutter-sm);
  }

  .pg-title {
    font-size: var(--pv-size-h2); /* 32px on mobile inner heroes */
  }

  .pg-lede {
    font-size: 16px;
  }

  .pg-section {
    padding: 64px 0;
  }

  /* Nav collapses — show hamburger */
  .pg-nav {
    display: none;
  }

  .pg-hamburger {
    display: inline-flex;
  }

  /* Header CTA hidden on mobile — it lives in the burger menu */
  .pg-header .pv-btn {
    display: none;
  }

  /* Footer */
  .pg-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .pg-footer-bottom {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  /* Blog grid */
  .bl-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Article */
  .ar-h1 {
    font-size: clamp(28px, 7vw, 38px);
  }

  .ar-body {
    padding: 48px 0 64px;
  }

  .ar-body p,
  .ar-body ul li,
  .ar-body ol li {
    font-size: 15px;
  }

  .ar-body h2 {
    font-size: 22px;
    margin-top: 40px;
  }

  .ar-body h3 {
    font-size: 17px;
  }

  .ar-cta-inner {
    padding: 56px 0;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .ar-cta-h2 {
    font-size: 26px;
  }

  .ar-cta-actions {
    align-items: stretch;
  }

  .ar-cta-actions a {
    text-align: center;
    display: block;
  }

  /* Legal */
  .lg-hero {
    padding: 40px 0 32px;
  }

  .lg-title {
    font-size: clamp(28px, 7vw, 38px);
  }

  .lg-body {
    padding: 36px 0 56px;
  }

  .lg-body p,
  .lg-body ul li,
  .lg-body ol li {
    font-size: 15px;
  }

  .lg-body h2 {
    font-size: 22px;
    margin-top: 40px;
  }

  .lg-body h3 {
    font-size: 17px;
  }
}

/* ── Tablet portrait (≤768px) ──────────────────────────────── */
@media (max-width: 768px) {
  /* img in article detail */
  .ar-img-wrap img {
    height: 200px;
  }
}

/* ── Mobile (≤700px) ───────────────────────────────────────── */
@media (max-width: 700px) {

  .pg-footer-grid {
    grid-template-columns: 1fr;
  }

  .ar-cta-inner {
    padding: 48px 0;
  }

  .bl-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Small mobile (≤640px) ─────────────────────────────────── */
@media (min-width: 640px) {
  .ar-img-wrap img {
    height: 320px;
  }
}

/* ── Narrow (≤380px) ───────────────────────────────────────── */
@media (max-width: 380px) {

  .pg-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }

  .pg-header-inner {
    padding: 12px 14px;
    gap: 12px;
  }

  .pg-title {
    font-size: clamp(22px, 7vw, 27px);
    line-height: 1.12;
  }

  .pg-lede {
    font-size: 14px;
  }

  .pg-section {
    padding: 48px 0;
  }

  .pg-footer-grid {
    gap: 24px;
  }

  .pg-footer-bottom {
    font-size: 11px;
  }

  .pv-faq-q {
    font-size: 15px;
    padding: 18px 0;
    gap: 10px;
  }

  .pv-faq-body p {
    font-size: 14px;
  }

  .pg-legal-nav a,
  .pg-legal-sep {
    font-size: 11px;
  }

  .ar-h1 {
    font-size: clamp(24px, 7.5vw, 30px);
  }

  .ar-body {
    padding: 36px 0 48px;
  }

  .ar-body p,
  .ar-body ul li,
  .ar-body ol li {
    font-size: 14px;
    line-height: 1.7;
  }

  .ar-body h2 {
    font-size: 20px;
  }

  .ar-body h3 {
    font-size: 16px;
  }

  .bl-card-body {
    padding: 16px 18px 18px;
  }

  .lg-title {
    font-size: clamp(24px, 7.5vw, 28px);
  }

  .lg-body {
    padding: 28px 0 48px;
  }

  .lg-body p,
  .lg-body ul li,
  .lg-body ol li {
    font-size: 14px;
    line-height: 1.7;
  }

  .lg-body h2 {
    font-size: 20px;
  }

  .lg-body h3 {
    font-size: 16px;
  }
}

/* ============================================================
   COOKIE CONSENT BANNER
   Site-wide mechanism, replicated from the alphamatic-aircond
   client build (2026-07-22) — restyled onto Paeveul's own
   design tokens (--pv-*) rather than the client's navy/yellow.
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: var(--pv-ink);
  border-top: 3px solid var(--pv-cobalt-bright);
  padding: 1rem 1.5rem;
  transform: translateY(100%);
  transition: transform var(--pv-duration-3) var(--pv-ease);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.cookie-banner-text {
  font-family: var(--pv-font-sans);
  font-weight: var(--pv-weight-regular);
  font-size: var(--pv-size-body-sm);
  line-height: 1.6;
  color: var(--pv-text-on-ink-quiet);
  margin: 0;
}

.cookie-banner-headline {
  font-family: var(--pv-font-sans);
  font-weight: var(--pv-weight-semibold);
  font-size: var(--pv-size-body);
  color: var(--pv-ink-inverse);
  margin-right: 0.625rem;
}

.cookie-banner-text a {
  color: var(--pv-cobalt-bright);
  font-weight: var(--pv-weight-semibold);
  text-decoration: none;
}
.cookie-banner-text a:hover { text-decoration: underline; }

.cookie-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.cookie-btn {
  font-family: var(--pv-font-sans);
  font-weight: var(--pv-weight-semibold);
  font-size: var(--pv-size-body-sm);
  padding: 0.625rem 1.5rem;
  min-height: 44px;
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: var(--pv-radius-lg);
  transition:
    background var(--pv-duration-2) var(--pv-ease),
    color var(--pv-duration-2) var(--pv-ease),
    border-color var(--pv-duration-2) var(--pv-ease);
  width: 100%;
}

.cookie-btn-accept {
  background: var(--pv-cobalt);
  color: var(--pv-ink-inverse);
  border-color: var(--pv-cobalt);
}
.cookie-btn-accept:hover {
  background: #152E70;
  border-color: #152E70;
}

.cookie-btn-decline {
  background: transparent;
  color: var(--pv-text-on-ink-quiet);
  border-color: rgba(246, 244, 238, 0.25);
}
.cookie-btn-decline:hover {
  color: var(--pv-ink-inverse);
  border-color: rgba(246, 244, 238, 0.55);
}

.cookie-btn:focus-visible {
  outline: 3px solid var(--pv-cobalt-wash-08);
  outline-offset: 3px;
}

@media (min-width: 640px) {
  .cookie-banner {
    padding: 1.125rem 1.5rem;
  }
  .cookie-banner-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
  .cookie-banner-text {
    flex: 1;
  }
  .cookie-banner-actions {
    flex-direction: row;
    gap: 0.75rem;
    flex-shrink: 0;
  }
  .cookie-btn {
    width: auto;
  }
}

body.cookie-banner-visible {
  padding-bottom: 160px;
}
@media (min-width: 640px) {
  body.cookie-banner-visible {
    padding-bottom: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}