/* ============================================================
   UI REFINEMENT v9 — typography, color, spacing, hover, mobile
   Layer on top of premium-dark + mobile layers
   ============================================================ */

:root {
  /* Typography scale (modular, balanced — not too big/small) */
  --pd-text-xs: 0.6875rem;   /* 11px — captions, labels */
  --pd-text-sm: 0.8125rem;   /* 13px — secondary */
  --pd-text-base: 0.9375rem; /* 15px — body */
  --pd-text-md: 1rem;        /* 16px — lead */
  --pd-text-lg: 1.0625rem;   /* 17px — card titles */
  --pd-text-xl: clamp(1.25rem, 2.2vw, 1.5rem);
  --pd-text-2xl: clamp(1.375rem, 2.6vw, 1.875rem);
  --pd-text-3xl: clamp(1.625rem, 3.2vw, 2.25rem);
  --pd-text-4xl: clamp(1.875rem, 3.8vw, 2.625rem);

  /* Refined palette */
  --pd-text: rgba(255, 255, 255, 0.94);
  --pd-muted: rgba(255, 255, 255, 0.68);
  --pd-muted-2: rgba(255, 255, 255, 0.46);
  --pd-gold: #E8C400;
  --pd-gold-light: #F5D520;
  --pd-gold-dim: #C4A800;
  --pd-gold-glow: rgba(232, 196, 0, 0.14);
  --pd-border-subtle: rgba(255, 255, 255, 0.1);
  --pd-border: rgba(232, 196, 0, 0.28);

  /* Spacing & shape */
  --pd-radius: 8px;
  --pd-radius-sm: 6px;
  --pd-radius-lg: 12px;
  --pd-section-py: clamp(56px, 7vw, 88px);
  --pd-gap: 20px;
  --pd-gap-lg: 28px;

  /* Motion */
  --pd-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pd-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pd-duration: 0.22s;
  --pd-hover-lift: -3px;
}

/* ---- Base typography ---- */
body.page-premium {
  font-size: var(--pd-text-base);
  line-height: 1.62;
  letter-spacing: 0.008em;
  color: var(--pd-text);
  overflow-x: clip;
}

body.page-premium h1,
body.page-premium h2,
body.page-premium h3,
body.page-premium h4 {
  letter-spacing: 0.025em;
  text-wrap: balance;
}

body.page-premium p {
  color: var(--pd-muted);
  max-width: 68ch;
}

body.page-premium p:last-child {
  margin-bottom: 0;
}

/* ---- Header & nav ---- */
body.page-premium .logo-name {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

body.page-premium .logo-tagline {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--pd-muted-2);
  line-height: 1.3;
}

body.page-premium .main-nav a {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: color var(--pd-duration) var(--pd-ease-out),
    opacity var(--pd-duration) var(--pd-ease-out);
}

@media (hover: hover) {
  body.page-premium .main-nav a:hover {
    color: var(--pd-gold-light);
  }

  body.page-premium .main-nav a.active:hover {
    color: var(--pd-gold);
  }
}

body.page-premium .site-header.scrolled {
  box-shadow: 0 1px 0 rgba(232, 196, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* ---- Buttons (unified) ---- */
body.page-premium .pd-btn,
body.page-premium .btn-primary,
body.page-premium .btn-outline {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--pd-radius-sm);
  transition: transform var(--pd-duration) var(--pd-ease-out),
    box-shadow var(--pd-duration) var(--pd-ease-out),
    background var(--pd-duration) var(--pd-ease-out),
    border-color var(--pd-duration) var(--pd-ease-out),
    filter var(--pd-duration) var(--pd-ease-out);
}

@media (hover: hover) {
  body.page-premium .pd-btn-gold:hover,
  body.page-premium .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(232, 196, 0, 0.22);
    filter: brightness(1.05);
  }

  body.page-premium .pd-btn-outline:hover,
  body.page-premium .btn-outline:hover {
    transform: translateY(-2px);
    border-color: rgba(232, 196, 0, 0.55);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  }
}

body.page-premium .pd-btn:active,
body.page-premium .btn-primary:active {
  transform: translateY(0) scale(0.98);
}

body.page-premium .pd-btn:focus-visible,
body.page-premium .btn-primary:focus-visible,
body.page-premium .main-nav a:focus-visible {
  outline: 2px solid var(--pd-gold);
  outline-offset: 3px;
}

/* ---- Hero (all pages) ---- */
body.page-premium .pd-hero h1 {
  font-size: var(--pd-text-3xl);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: 0.03em;
  margin-bottom: 16px;
}

body.page-home .pd-hero h1 {
  font-size: var(--pd-text-4xl);
}

body.page-premium .pd-hero-sub {
  font-size: var(--pd-text-md);
  font-weight: 500;
  color: var(--pd-muted);
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 36ch;
}

body.page-premium .pd-checklist {
  gap: 10px 24px;
  margin-bottom: 28px;
}

body.page-premium .pd-checklist li {
  font-size: var(--pd-text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
}

/* ---- Section titles & kickers ---- */
body.page-premium .pd-section {
  padding: var(--pd-section-py) 0;
}

body.page-premium .pd-section-title {
  font-size: var(--pd-text-2xl);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
}

body.page-premium .pd-section-title--center {
  text-align: center;
}

body.page-premium .eyebrow,
body.page-premium .pd-kicker,
body.page-premium .pd-page-hero .pd-kicker {
  font-size: var(--pd-text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--pd-gold-dim);
  margin-bottom: 10px;
}

body.page-premium .page-header h1,
body.page-premium .pd-page-hero h1 {
  font-size: var(--pd-text-3xl);
  font-weight: 800;
  line-height: 1.14;
}

body.page-premium .page-header p,
body.page-premium .pd-page-hero p {
  font-size: var(--pd-text-md);
  line-height: 1.6;
  color: var(--pd-muted);
}

/* ---- Cards (stats, services, trust, why) ---- */
body.page-premium .pd-stat-card,
body.page-premium .pd-trust-card,
body.page-premium .pd-whycard,
body.page-premium .pd-srv-card,
body.page-premium .pd-guard-type,
body.page-premium .pd-client-card,
body.page-premium a.pd-service-card {
  border-radius: var(--pd-radius);
  border: 1px solid var(--pd-border-subtle);
  transition: transform var(--pd-duration) var(--pd-ease-out),
    border-color var(--pd-duration) var(--pd-ease-out),
    box-shadow var(--pd-duration) var(--pd-ease-out),
    background var(--pd-duration) var(--pd-ease-out);
}

@media (hover: hover) {
  body.page-premium .pd-stat-card:hover,
  body.page-premium .pd-trust-card:hover,
  body.page-premium .pd-whycard:hover,
  body.page-premium .pd-srv-card:hover,
  body.page-premium .pd-guard-type:hover,
  body.page-premium a.pd-service-card:hover {
    transform: translateY(var(--pd-hover-lift));
    border-color: rgba(232, 196, 0, 0.35);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(232, 196, 0, 0.06);
  }
}

body.page-premium .pd-stat-value {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

body.page-premium .pd-stat-label {
  font-size: var(--pd-text-xs);
  font-weight: 600;
  color: var(--pd-muted);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

body.page-premium .pd-service-card h3,
body.page-premium .pd-srv-card h3,
body.page-premium .pd-trust-card h3 {
  font-size: var(--pd-text-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

body.page-premium .pd-service-card p,
body.page-premium .pd-srv-card p,
body.page-premium .pd-trust-card p {
  font-size: var(--pd-text-sm);
  line-height: 1.65;
  color: var(--pd-muted);
}

/* ---- About / content blocks ---- */
body.page-premium .pd-about-text h3 {
  font-size: var(--pd-text-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
}

body.page-premium .pd-about-text p {
  font-size: var(--pd-text-sm);
  line-height: 1.72;
}

body.page-premium .pd-about-icon-item span {
  font-size: var(--pd-text-xs);
  color: var(--pd-muted);
}

/* ---- Partners ---- */
body.page-premium .pd-partner-name {
  font-size: var(--pd-text-xs);
  color: var(--pd-muted-2);
  letter-spacing: 0.03em;
}

@media (hover: hover) {
  body.page-premium .pd-partner-item:hover .pd-partner-name {
    color: var(--pd-gold-dim);
  }

  body.page-premium .pd-partner-item:hover .pd-partner-logo img {
    transform: scale(1.04);
    transition: transform var(--pd-duration) var(--pd-ease-out);
  }
}

/* ---- Forms (career, partner, contact) ---- */
body.page-premium input,
body.page-premium textarea,
body.page-premium select {
  font-size: var(--pd-text-sm);
  border-radius: var(--pd-radius-sm);
  border: 1px solid var(--pd-border-subtle);
  background: rgba(255, 255, 255, 0.04);
  color: var(--pd-text);
  transition: border-color var(--pd-duration), box-shadow var(--pd-duration), background var(--pd-duration);
}

body.page-premium input:focus,
body.page-premium textarea:focus,
body.page-premium select:focus {
  border-color: rgba(232, 196, 0, 0.5);
  box-shadow: 0 0 0 3px rgba(232, 196, 0, 0.1);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

body.page-premium label {
  font-size: var(--pd-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
}

body.page-premium .pd-form-note,
body.page-premium .form-hint {
  font-size: var(--pd-text-xs);
  color: var(--pd-muted-2);
  line-height: 1.55;
}

body.page-premium .pd-career-section h2,
body.page-premium .pd-jobinfo-grid h3,
body.page-premium .pd-form-section-title {
  font-size: var(--pd-text-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---- Footer ---- */
body.page-premium .pd-footer-grid {
  gap: var(--pd-gap-lg);
}

body.page-premium .pd-footer-links a,
body.page-premium .pd-footer-nav a {
  font-size: var(--pd-text-sm);
  color: var(--pd-muted);
  transition: color var(--pd-duration) var(--pd-ease-out);
}

@media (hover: hover) {
  body.page-premium .pd-footer-links a:hover,
  body.page-premium .pd-footer-nav a:hover {
    color: var(--pd-gold-light);
  }
}

body.page-premium .pd-footer-bottom {
  font-size: var(--pd-text-xs);
  color: var(--pd-muted-2);
}

/* ---- CTA bands ---- */
body.page-premium .pd-cta h2,
body.page-premium .pd-contact-cta h2 {
  font-size: var(--pd-text-2xl);
  line-height: 1.2;
}

body.page-premium .pd-cta p,
body.page-premium .pd-contact-cta p {
  font-size: var(--pd-text-sm);
  line-height: 1.65;
}

/* ---- Links ---- */
@media (hover: hover) {
  body.page-premium a:not(.btn):not(.pd-btn):not(.main-nav a):not(.pd-service-card):hover {
    color: var(--pd-gold-light);
  }
}

/* ---- Certificates / licenses ---- */
body.page-premium .pd-license-card h3 {
  font-size: var(--pd-text-sm);
  font-weight: 700;
  line-height: 1.35;
}

/* ============================================================
   MOBILE & TABLET
   ============================================================ */

html[data-viewport="mobile"] {
  --pd-text-base: 0.875rem;
  --pd-section-py: 44px;
  --pd-gap: 16px;
}

html[data-viewport="tablet"] {
  --pd-section-py: 52px;
}

html[data-viewport="mobile"] body.page-premium .pd-hero h1,
html[data-viewport="tablet"] body.page-premium .pd-hero h1 {
  font-size: clamp(1.5rem, 6.5vw, 2rem);
  line-height: 1.16;
}

html[data-viewport="mobile"] body.page-home .pd-hero h1 {
  font-size: clamp(1.625rem, 7vw, 2.125rem);
}

html[data-viewport="mobile"] body.page-premium .pd-hero-sub {
  font-size: 0.875rem;
  margin-bottom: 20px;
}

html[data-viewport="mobile"] body.page-premium .pd-checklist {
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 100%;
}

html[data-viewport="mobile"] body.page-premium .pd-section-title {
  font-size: clamp(1.25rem, 5.5vw, 1.5rem);
  margin-bottom: 16px;
}

html[data-viewport="mobile"] body.page-premium .pd-hero-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

html[data-viewport="mobile"] body.page-premium .pd-hero-actions .pd-btn {
  justify-content: center;
  min-height: 46px;
  padding-top: 12px;
  padding-bottom: 12px;
}

html[data-viewport="mobile"] body.page-premium .pd-stat-card {
  padding: 18px 16px;
}

html[data-viewport="mobile"] body.page-premium .pd-stat-value {
  font-size: 1.375rem;
}

html[data-viewport="mobile"] body.page-premium input,
html[data-viewport="mobile"] body.page-premium textarea,
html[data-viewport="mobile"] body.page-premium select {
  font-size: 16px; /* prevents iOS zoom on focus */
  min-height: 46px;
}

html[data-viewport="mobile"] body.page-premium textarea {
  min-height: 100px;
}

html[data-viewport="mobile"] body.page-premium .container {
  padding-left: 18px;
  padding-right: 18px;
}

html[data-viewport="mobile"] body.page-premium .pd-about-text p,
html[data-viewport="mobile"] body.page-premium .pd-service-card p {
  font-size: 0.8125rem;
}

html[data-viewport="mobile"] body.page-premium .pd-partner-item {
  width: 132px;
}

html[data-viewport="mobile"] body.page-premium .pd-partner-name {
  font-size: 0.625rem;
  max-width: 120px;
}

/* Home hero — full-width card, balanced type on phone */
html[data-viewport="mobile"] body.page-home .pd-hero > .container {
  width: 100%;
  max-width: 100%;
}

html[data-viewport="mobile"] body.page-home .pd-hero-inner {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: var(--pd-radius-lg);
}

html[data-viewport="mobile"] body.page-home .pd-checklist li {
  font-size: 0.8125rem;
  padding: 10px 12px;
}

html[data-viewport="mobile"] body.page-premium .pd-mobile-bar {
  border-top: 1px solid rgba(232, 196, 0, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Prevent horizontal scroll from wide content */
html[data-viewport="mobile"] body.page-premium table,
html[data-viewport="mobile"] body.page-premium .pd-form-grid,
html[data-viewport="mobile"] body.page-premium .pd-jobinfo-grid {
  max-width: 100%;
}

html[data-viewport="mobile"] body.page-premium .pd-career-form-wrap,
html.page-career .pd-form-section {
  overflow-x: hidden;
}

/* Mobile bottom bar polish */
html[data-viewport="mobile"] body.page-premium .pd-mobile-bar a {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Tablet: 2-col hero checklist ok, tighter sections */
html[data-viewport="tablet"] body.page-premium .pd-section-title {
  font-size: clamp(1.375rem, 3vw, 1.625rem);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.page-premium *,
  body.page-premium *::before,
  body.page-premium *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Contact page ---- */
body.page-premium .pd-contact-item h4 {
  font-size: var(--pd-text-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
}

body.page-premium .pd-contact-item p,
body.page-premium .pd-contact-item a {
  font-size: var(--pd-text-sm);
  line-height: 1.6;
}

body.page-premium .pd-contact-card {
  border-radius: var(--pd-radius);
  transition: transform var(--pd-duration) var(--pd-ease-out),
    border-color var(--pd-duration),
    box-shadow var(--pd-duration);
}

@media (hover: hover) {
  body.page-premium .pd-contact-card:hover {
    transform: translateY(var(--pd-hover-lift));
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.3);
  }
}

body.page-premium .pd-contact-cta h3 {
  font-size: var(--pd-text-xl);
  font-weight: 800;
  line-height: 1.22;
}

/* ---- Why / job info ---- */
body.page-premium .pd-why-content h2 {
  font-size: var(--pd-text-2xl);
  line-height: 1.18;
}

body.page-premium .pd-why-grid li {
  font-size: var(--pd-text-sm);
  line-height: 1.65;
  color: var(--pd-muted);
}

body.page-premium .pd-jobinfo-card {
  border-radius: var(--pd-radius);
  padding: 22px 20px;
}

body.page-premium .pd-jobinfo-card h3 {
  font-size: var(--pd-text-sm);
  font-weight: 700;
  margin-bottom: 8px;
}

body.page-premium .pd-jobinfo-card p,
body.page-premium .pd-jobinfo-card li {
  font-size: var(--pd-text-sm);
  line-height: 1.62;
  color: var(--pd-muted);
}

/* ---- Services grid rhythm ---- */
body.page-premium .pd-services-grid,
body.page-premium .pd-srv-grid {
  gap: var(--pd-gap);
}

body.page-premium a.pd-service-card {
  padding: 22px 20px;
}

/* ---- Career form sections ---- */
body.page-career .pd-form-section {
  border-radius: var(--pd-radius-lg);
}

body.page-career .pd-form-step-label {
  font-size: var(--pd-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
}

html[data-viewport="mobile"] body.page-career .pd-form-grid {
  gap: 14px;
}

html[data-viewport="mobile"] body.page-career .pd-jobinfo-grid {
  gap: 12px;
}

/* ---- Guard / service detail ---- */
body.page-premium .pd-guard-type h3 {
  font-size: var(--pd-text-lg);
}

body.page-premium .pd-guard-type p {
  font-size: var(--pd-text-sm);
  line-height: 1.65;
}

/* ---- Desktop polish ---- */
@media (min-width: 1180px) {
  body.page-premium {
    font-size: 1rem;
  }

  body.page-premium .pd-hero-inner {
    max-width: 520px;
  }

  body.page-premium .container {
    padding-left: clamp(24px, 3vw, 40px);
    padding-right: clamp(24px, 3vw, 40px);
  }
}