/* ================================================================
   TecEx Global Compliance — Global Design System (COMPREHENSIVE)
   ================================================================
   Scope  : .tgc-page  (add this class to every page wrapper div)
   WordPress : wp_enqueue_style( 'tgc-global', get_template_directory_uri() . '/tgc-global.css', [], '1.0' );
   Local dev : <link rel="stylesheet" href="../global.css">

   This is the SINGLE source of truth for ALL CSS across all TGC pages.
   All page-specific components are consolidated here and scoped to .tgc-page.
   No page should have its own <style> block.

   WHAT LIVES HERE
   • Base reset (html/body)
   • Container reset + CSS design tokens
   • Layout utilities (.wrap, .wrap-narrow)
   • Section backgrounds (.s-navy, .s-white, .s-parchment, .s-navy-mid)
   • Typography system (headings, body, eyebrow, colour modifiers)
   • Spacing utilities (.mb*, .mt*)
   • Buttons (.btn, .btn-gold, .btn-ghost, .btn-outline, .btn-lg, .btn-sm)
   • Flex / grid helpers
   • Gold accent line
   • Fade animation + stagger delays
   • Hero section layouts (all variants)
   • Form fields (fg, fg-row, form-note, form-submit)
   • Card grids (card-grid, card-grid--2, card-item, card-icon)
   • Deliverables list (deliv-row, deliv-row-num, deliv-grid, deliv-card)
   • Process steps (process-steps, step, step-num)
   • Trigger/when grid (trigger-grid, trigger-item)
   • Stats strip (stats-strip, stat-item, stat-num, stat-lbl)
   • Pricing cards (price-grid, price-card, price-table)
   • Market/industry cards (market-grid, market-card)
   • Testimonials (testi, testi-grid, testi-card)
   • FAQ accordion
   • Related services grid
   • CTA band
   • Breadcrumb
   • Pricing selector & cost comparison (expedited page)
   • Sample/audit report panel (expedited page)
   • Classification memo panel (hs-code page)
   • Chemical regulation cards (reg-grid, reg-card, risk-callout, service-list)
   • Full product compliance pillars (pillar-grid, pillar-card)
================================================================ */

/* ================================================================
   1. BROWSER RESET
================================================================ */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  background: #f8f6f0 !important;
  overflow-x: hidden !important;
}

/* ================================================================
   2. PAGE CONTAINER — base reset + design tokens
================================================================ */
.tgc-page {
  all: initial;
  display: block !important;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #0a1826 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;

  /* ── Design tokens ─────────────────────────── */
  --navy: #0a1826;
  --navy-mid: #0f2236;
  --gold: #d3a911;
  --gold-lt: #f0cc5a;
  --gold-pale: rgba(211, 169, 17, 0.1);
  --white: #ffffff;
  --parchment: #f8f6f0;
  --slate: #3d5166;
  --muted: #7a909f;
  --mist: #e8edf2;
  --border: #e2e8ee;
  --border-dk: #21384d;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* ── Transparent / overlay tones (dark-section text) ─── */
  --tmid: rgba(255, 255, 255, 0.8);
  --tmuted: rgba(255, 255, 255, 0.6);

  /* ── Status badge colours ───────────────────────────── */
  --status-pass: #1a7a48;
  --status-pass-bg: rgba(26, 122, 72, 0.13);
  --status-minor: #8a7200;
  --status-minor-bg: rgba(138, 114, 0, 0.13);
  --status-flag: #b56e00;
  --status-flag-bg: rgba(181, 110, 0, 0.13);
  --status-gap: #a03020;
  --status-gap-bg: rgba(160, 48, 32, 0.13);
  --status-major: #6b1208;
  --status-major-bg: rgba(107, 18, 8, 0.13);
}

.tgc-page *,
.tgc-page *::before,
.tgc-page *::after {
  box-sizing: border-box !important;
}

/* WP bleed resets */
.tgc-page a {
  text-decoration: none !important;
  color: inherit !important;
}
.tgc-page img {
  max-width: 100% !important;
  display: block !important;
}
.tgc-page button {
  font-family: inherit !important;
  cursor: pointer !important;
  border: none !important;
  background: none !important;
}
.tgc-page ul,
.tgc-page ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ================================================================
   3. LAYOUT — wrap containers
================================================================ */
.tgc-page .wrap,
.tgc-page .tgc-wrap /* ★ homepage alias */ {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 4vw, 48px) !important;
  width: 100% !important;
}

.tgc-page .wrap-narrow {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 4vw, 48px) !important;
  width: 100% !important;
}

/* ================================================================
   4. SECTION BACKGROUNDS
================================================================ */
.tgc-page .s-navy,
.tgc-page .s-dark /* ★ homepage alias */ {
  background: var(--navy) !important;
  padding: clamp(72px, 8vw, 108px) 0 !important;
  display: block !important;
}

.tgc-page .s-white {
  background: var(--white) !important;
  padding: clamp(72px, 8vw, 108px) 0 !important;
  display: block !important;
}

.tgc-page .s-parchment,
.tgc-page .s-grey /* ★ homepage alias */ {
  background: var(--parchment) !important;
  padding: clamp(72px, 8vw, 108px) 0 !important;
  display: block !important;
}

.tgc-page .s-navy-mid {
  background: var(--navy-mid) !important;
  padding: clamp(72px, 8vw, 108px) 0 !important;
  display: block !important;
}

/* ================================================================
   5. TYPOGRAPHY
================================================================ */

/* Heading base */
.tgc-page h1,
.tgc-page h2,
.tgc-page h3,
.tgc-page h4 {
  font-family: "Sora", sans-serif !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tgc-page p {
  font-family: "DM Sans", sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Eyebrow label */
.tgc-page .ey {
  font-family: "Sora", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  display: block !important;
  margin-bottom: 14px !important;
}

/* Heading scale */
.tgc-page .h1 {
  font-size: clamp(36px, 5vw, 60px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
}
.tgc-page .h2 {
  font-size: clamp(26px, 3vw, 42px) !important;
  line-height: 1.12 !important;
}
.tgc-page .h3 {
  font-size: clamp(17px, 2vw, 22px) !important;
  line-height: 1.25 !important;
}
.tgc-page .h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

/* Alternate heading weights (hero / white variants) */
.tgc-page .h1-w {
  font-size: clamp(36px, 5vw, 60px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  color: var(--white) !important;
}
.tgc-page .h2-w {
  font-size: clamp(26px, 3vw, 42px) !important;
  line-height: 1.12 !important;
  color: var(--white) !important;
}
.tgc-page .h3-w {
  font-size: clamp(17px, 2vw, 22px) !important;
  line-height: 1.25 !important;
  color: var(--white) !important;
}

/* Alias used by chemical-compliance page */
.tgc-page .h-hero {
  font-size: clamp(38px, 5vw, 66px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  color: var(--white) !important;
}

/* Body text scale */
.tgc-page .lead {
  font-size: clamp(16px, 1.4vw, 19px) !important;
  line-height: 1.72 !important;
  color: var(--slate) !important;
}
.tgc-page .body {
  font-size: 15px !important;
  line-height: 1.72 !important;
  color: var(--slate) !important;
}
.tgc-page .body-lg {
  font-size: clamp(16px, 1.4vw, 19px) !important;
  color: var(--slate) !important;
  line-height: 1.7 !important;
}
.tgc-page .sm {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--muted) !important;
}
.tgc-page .body-muted {
  font-size: clamp(13px, 1vw, 15px) !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
}
.tgc-page .body-w {
  font-size: clamp(14px, 1.1vw, 16px) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  line-height: 1.7 !important;
}

/* Colour modifiers */
.tgc-page .white {
  color: var(--white) !important;
}
.tgc-page .gold {
  color: var(--gold) !important;
}
.tgc-page .muted {
  color: var(--muted) !important;
}
.tgc-page .slate {
  color: var(--slate) !important;
}
.tgc-page .navy {
  color: var(--navy) !important;
}

/* Text alignment */
.tgc-page .tc {
  text-align: center !important;
}
.tgc-page .tc p {
  text-align: center !important;
}
.tgc-page .tl {
  text-align: left !important;
}

/* ================================================================
   6. SPACING UTILITIES
================================================================ */
.tgc-page .mb4 {
  margin-bottom: 4px !important;
}
.tgc-page .mb8 {
  margin-bottom: 8px !important;
}
.tgc-page .mb12 {
  margin-bottom: 12px !important;
}
.tgc-page .mb14 {
  margin-bottom: 14px !important;
}
.tgc-page .mb16 {
  margin-bottom: 16px !important;
}
.tgc-page .mb20 {
  margin-bottom: 20px !important;
}
.tgc-page .mb22 {
  margin-bottom: 22px !important;
}
.tgc-page .mb24 {
  margin-bottom: 24px !important;
}
.tgc-page .mb32 {
  margin-bottom: 32px !important;
}
.tgc-page .mb40 {
  margin-bottom: 40px !important;
}
.tgc-page .mb44 {
  margin-bottom: 44px !important;
}
.tgc-page .mb48 {
  margin-bottom: 48px !important;
}
.tgc-page .mb56 {
  margin-bottom: 56px !important;
}
.tgc-page .mt8 {
  margin-top: 8px !important;
}
.tgc-page .mt16 {
  margin-top: 16px !important;
}
.tgc-page .mt24 {
  margin-top: 24px !important;
}
.tgc-page .mt32 {
  margin-top: 32px !important;
}
.tgc-page .mt40 {
  margin-top: 40px !important;
}

/* ================================================================
   7. BUTTONS
================================================================ */
.tgc-page .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 15px 28px !important;
  border-radius: var(--radius-md) !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.tgc-page .btn-gold {
  background: var(--gold) !important;
  color: var(--navy) !important;
  box-shadow: 0 4px 16px rgba(211, 169, 17, 0.22) !important;
}
.tgc-page .btn-gold:hover {
  background: var(--gold-lt) !important;
  transform: translateY(-1px) !important;
}

.tgc-page .btn-ghost {
  background: transparent !important;
  color: var(--white) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}
.tgc-page .btn-ghost:hover {
  border-color: var(--white) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.tgc-page .btn-outline {
  background: transparent !important;
  color: var(--navy) !important;
  border-color: var(--mist) !important;
}
.tgc-page .btn-outline:hover {
  border-color: var(--navy) !important;
}

.tgc-page .btn-lg {
  padding: 18px 36px !important;
  font-size: 16px !important;
}
.tgc-page .btn-sm {
  padding: 10px 20px !important;
  font-size: 13px !important;
}
.tgc-page .btn svg {
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
}

/* ================================================================
   8. FLEX / GRID HELPERS
================================================================ */
.tgc-page .flex {
  display: flex !important;
}
.tgc-page .wrap-r {
  flex-wrap: wrap !important;
}
.tgc-page .aic {
  align-items: center !important;
}
.tgc-page .aifs {
  align-items: flex-start !important;
}
.tgc-page .jcc {
  justify-content: center !important;
}
.tgc-page .jcsb {
  justify-content: space-between !important;
}
.tgc-page .fdc {
  flex-direction: column !important;
}
.tgc-page .g8 {
  gap: 8px !important;
}
.tgc-page .g12 {
  gap: 12px !important;
}
.tgc-page .g16 {
  gap: 16px !important;
}
.tgc-page .g24 {
  gap: 24px !important;
}
.tgc-page .g32 {
  gap: 32px !important;
}
.tgc-page .g48 {
  gap: 48px !important;
}
.tgc-page .g56 {
  gap: 56px !important;
}

/* Two-column layouts */
.tgc-page .two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: start !important;
}

/* Two-column with images */
.tgc-page .two-col-img {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}

.tgc-page .img-block {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 320px !important;
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      black 6%,
      black 94%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      black 6%,
      black 94%,
      transparent 100%
    ) !important;
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      black 6%,
      black 94%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      black 6%,
      black 94%,
      transparent 100%
    ) !important;
  -webkit-mask-composite: destination-in !important;
  mask-composite: intersect !important;
}

.tgc-page .img-block img {
  width: 100% !important;
  object-fit: cover !important;
}

/* Gap aliases used by homepage */
.tgc-page .gap-8 {
  gap: 8px !important;
}
.tgc-page .gap-12 {
  gap: 12px !important;
}
.tgc-page .gap-16 {
  gap: 16px !important;
}
.tgc-page .gap-24 {
  gap: 24px !important;
}
.tgc-page .gap-32 {
  gap: 32px !important;
}

/* ================================================================
   9. GOLD ACCENT LINE
================================================================ */
.tgc-page .gold-line {
  display: block !important;
  width: 48px !important;
  height: 3px !important;
  background: var(--gold) !important;
  border-radius: 2px !important;
  margin-bottom: 24px !important;
}

/* ================================================================
   10. FADE ANIMATION (scroll reveal)
   JS: IntersectionObserver adds .vis when element enters viewport
================================================================ */
.tgc-page .fade {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease !important;
}
.tgc-page .fade.vis {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger delays */
.tgc-page .d1 {
  transition-delay: 0.1s !important;
}
.tgc-page .d2 {
  transition-delay: 0.2s !important;
}
.tgc-page .d3 {
  transition-delay: 0.3s !important;
}
.tgc-page .d4 {
  transition-delay: 0.4s !important;
}
.tgc-page .d5 {
  transition-delay: 0.5s !important;
}

/* ================================================================
   11. HERO (all variants)
================================================================ */
.tgc-page .hero {
  background: var(--navy) !important;
  padding: clamp(24px, 3vw, 40px) 0 clamp(32px, 4vw, 48px) !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

.tgc-page .hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      ellipse 70% 60% at 80% 30%,
      rgba(211, 169, 17, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 50% at 5% 80%,
      rgba(26, 52, 80, 0.5) 0%,
      transparent 55%
    ) !important;
}

.tgc-page .hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 400px !important;
  gap: 56px !important;
  align-items: start !important;
  position: relative !important;
  z-index: 1 !important;
}

.tgc-page .hero-inner {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 48px !important;
  align-items: center !important;
  position: relative !important;
}

.tgc-page .hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(211, 169, 17, 0.13) !important;
  border: 1px solid rgba(211, 169, 17, 0.3) !important;
  border-radius: 100px !important;
  padding: 5px 14px !important;
  margin-bottom: 24px !important;
}

.tgc-page .hero-badge-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  flex-shrink: 0 !important;
}

.tgc-page .hero-badge span {
  font-family: "Sora", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.tgc-page .hero-h1 {
  color: var(--white) !important;
  margin-bottom: 20px !important;
}
.tgc-page .hero-h1 em {
  color: var(--gold) !important;
  font-style: normal !important;
}
.tgc-page .hero-lead {
  color: rgba(255, 255, 255, 0.72) !important;
  margin-bottom: 32px !important;
  max-width: 540px !important;
}
.tgc-page .hero-ctas {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-bottom: 40px !important;
}
.tgc-page .hero-ctas.column {
  flex-direction: column !important;
}

.tgc-page .hero-trust {
  display: flex !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  padding-top: 28px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.tgc-page .hero-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.tgc-page .hero-trust-item strong {
  color: var(--white) !important;
  font-weight: 600 !important;
}
.tgc-page .hero-trust-item svg {
  width: 15px !important;
  height: 15px !important;
  color: var(--gold) !important;
  flex-shrink: 0 !important;
}

/* Hero stat block (chemical page) */
.tgc-page .hero-stat-block {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-md) !important;
  padding: 28px 32px !important;
  text-align: center !important;
  min-width: 200px !important;
}

.tgc-page .hero-stat-num {
  font-family: "Sora", sans-serif !important;
  font-size: clamp(32px, 3.5vw, 48px) !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* ================================================================
   12. FORM FIELDS
================================================================ */
.tgc-page .hero-form {
  background: var(--navy-mid) !important;
  border: 1px solid var(--border-dk) !important;
  border-radius: var(--radius-xl) !important;
  padding: 28px !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4) !important;
}

.tgc-page .hero-form-title {
  font-family: "Sora", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  margin-bottom: 4px !important;
}

.tgc-page .hero-form-sub {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-bottom: 20px !important;
  display: block !important;
}

.tgc-page .fg {
  margin-bottom: 12px !important;
}

.tgc-page .fg-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.tgc-page .fg label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-bottom: 5px !important;
  font-family: "DM Sans", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.tgc-page .fg input,
.tgc-page .fg select,
.tgc-page .fg textarea {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--border-dk) !important;
  border-radius: 7px !important;
  padding: 11px 13px !important;
  color: var(--white) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  cursor: text !important;
  box-sizing: border-box !important;
}

.tgc-page .fg input:focus,
.tgc-page .fg select:focus,
.tgc-page .fg textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(211, 169, 17, 0.15) !important;
}

.tgc-page .fg input::placeholder,
.tgc-page .fg textarea::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
}

.tgc-page .form-submit {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 8px !important;
  cursor: pointer !important;
  background: var(--gold) !important;
  color: var(--navy) !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 0 !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 16px rgba(211, 169, 17, 0.25) !important;
  transition: all 0.2s !important;
  box-sizing: border-box !important;
}

.tgc-page .form-submit:hover {
  background: var(--gold-lt) !important;
  transform: translateY(-1px) !important;
}

.tgc-page .form-note {
  font-size: 11px !important;
  color: var(--muted) !important;
  text-align: center !important;
  margin-top: 8px !important;
  display: block !important;
}

/* ================================================================
   13. CARD GRID (3-col icon cards)
   Standardized names:
   .assess-grid → .card-grid
   .check-grid → .card-grid
   .manage-grid → .card-grid
   All use .card-item and .card-icon
================================================================ */
.tgc-page .card-grid,
.tgc-page .assess-grid,
.tgc-page .check-grid,
.tgc-page .manage-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2px !important;
  background: var(--mist) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--mist) !important;
  margin-top: 48px !important;
}

#tgc-hs .card-grid,
#tgc-fp .card-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

#tgc-about .pillar-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

#tgc-contact .process-steps {
  grid-template-columns: repeat(3, 1fr) !important;
}

.hp-specialist-mobile {
  display: none;
}

/* 5-item symmetrical grid: 3 top, 2 centred bottom */
.tgc-page .check-grid-5 {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 2px !important;
  background: var(--mist) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--mist) !important;
  margin-top: 48px !important;
}

.tgc-page .check-grid-5 .ci-top {
  grid-column: span 2 !important;
}
.tgc-page .check-grid-5 .ci-bot {
  grid-column: span 3 !important;
}

/* 2-column card grid */
.tgc-page .card-grid--2,
.tgc-page .card-grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  margin-top: 48px !important;
}

/* Loose card grid — industry/landing pages: cards with border + 24px gaps (no mosaic bg) */
.tgc-page .card-grid--loose,
.tgc-page .card-grid--3,
.tgc-page .card-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
.tgc-page .card-grid--loose.cols-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

.tgc-page .card-item,
.tgc-page .assess-item,
.tgc-page .check-item,
.tgc-page .manage-item {
  background: var(--white) !important;
  padding: 28px 24px !important;
  transition:
    background 0.22s,
    opacity 0.6s ease,
    transform 0.6s ease !important;
}

.tgc-page .card-item:hover,
.tgc-page .assess-item:hover,
.tgc-page .check-item:hover,
.tgc-page .manage-item:hover {
  background: var(--parchment) !important;
}

.tgc-page .card-icon,
.tgc-page .assess-icon,
.tgc-page .check-icon,
.tgc-page .manage-icon {
  width: 40px !important;
  height: 40px !important;
  background: var(--navy) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
}

.tgc-page .card-icon svg,
.tgc-page .assess-icon svg,
.tgc-page .check-icon svg,
.tgc-page .manage-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--gold) !important;
}

.tgc-page .card-item h3,
.tgc-page .assess-item h3,
.tgc-page .check-item h3,
.tgc-page .manage-item h3 {
  color: var(--navy) !important;
  margin-bottom: 8px !important;
}

.tgc-page .card-item p,
.tgc-page .assess-item p,
.tgc-page .check-item p,
.tgc-page .manage-item p {
  font-size: 14px !important;
  color: var(--slate) !important;
  line-height: 1.65 !important;
}

.tgc-page .card-item ul,
.tgc-page .assess-item ul,
.tgc-page .check-item ul,
.tgc-page .manage-item ul {
  margin-top: 12px !important;
}

.tgc-page .card-item li,
.tgc-page .assess-item li,
.tgc-page .check-item li,
.tgc-page .manage-item li {
  font-size: 12px !important;
  color: var(--muted) !important;
  padding: 3px 0 3px 14px !important;
  position: relative !important;
  line-height: 1.5 !important;
}

.tgc-page .card-item li::before,
.tgc-page .assess-item li::before,
.tgc-page .manage-item li::before {
  content: "-" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
}

/* Light cards on dark backgrounds (chemical page) */
.tgc-page .card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 28px !important;
}

.tgc-page .card-dark {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-md) !important;
  padding: 28px !important;
}

.tgc-page .card h3 {
  font-family: "Sora", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.3 !important;
}

.tgc-page .card-dark h3 {
  font-family: "Sora", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.3 !important;
}

.tgc-page .card p {
  font-size: 14px !important;
  color: var(--slate) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}
.tgc-page .card-dark p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ================================================================
   14. DELIVERABLES LIST
================================================================ */
.tgc-page .deliv-list {
  margin-top: 48px !important;
}

.tgc-page .deliv-row {
  display: grid !important;
  grid-template-columns: 80px 1fr 1fr !important;
  gap: 0 48px !important;
  padding: 36px 0 !important;
  border-bottom: 1px solid var(--mist) !important;
  align-items: start !important;
}

.tgc-page .deliv-row:first-child {
  border-top: 1px solid var(--mist) !important;
}
.tgc-page .deliv-row:hover {
  background: none !important;
}

.tgc-page .deliv-row-num {
  font-family: "Sora", sans-serif !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  opacity: 0.22 !important;
  padding-top: 4px !important;
}

.tgc-page .deliv-row-left h3 {
  font-family: "Sora", sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.02em !important;
}

.tgc-page .deliv-row-left .tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  background: rgba(211, 169, 17, 0.12) !important;
  border: 1px solid rgba(211, 169, 17, 0.25) !important;
  border-radius: 100px !important;
  margin-bottom: 14px !important;
}

.tgc-page .deliv-row-left .tag span {
  font-family: "DM Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.tgc-page .deliv-row-right p {
  font-size: 15px !important;
  color: var(--slate) !important;
  line-height: 1.72 !important;
}

.tgc-page .deliv-row-right .detail-list {
  margin-top: 16px !important;
}

.tgc-page .deliv-row-right .detail-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
  margin-bottom: 8px !important;
}

.tgc-page .deliv-row-right .detail-item::before {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  flex-shrink: 0 !important;
  margin-top: 6px !important;
}

/* Deliverables grid (old card styles) */
.tgc-page .deliv-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin-top: 48px !important;
}

.tgc-page .deliv-card {
  background: var(--navy) !important;
  border-radius: var(--radius-lg) !important;
  padding: 36px !important;
  position: relative !important;
  overflow: hidden !important;
}

.tgc-page .deliv-card::after {
  content: "" !important;
  position: absolute !important;
  bottom: -40px !important;
  right: -40px !important;
  width: 160px !important;
  height: 160px !important;
  border-radius: 50% !important;
  background: radial-gradient(
    circle,
    rgba(211, 169, 17, 0.12) 0%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
}

.tgc-page .deliv-num {
  font-family: "Sora", sans-serif !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  display: block !important;
  opacity: 0.3 !important;
}

.tgc-page .deliv-card h3 {
  color: var(--white) !important;
  margin-bottom: 10px !important;
}
.tgc-page .deliv-card p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  line-height: 1.65 !important;
}

/* ================================================================
   15. PROCESS STEPS
================================================================ */
.tgc-page .process-steps {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2px !important;
  background: var(--mist) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  margin-top: 48px !important;
}

.tgc-page .step {
  background: var(--white) !important;
  padding: 28px 22px !important;
  position: relative !important;
}

.tgc-page .step-num {
  font-family: "Sora", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 12px !important;
  display: block !important;
}

.tgc-page .step h3 {
  color: var(--navy) !important;
  margin-bottom: 8px !important;
  font-size: 16px !important;
}

.tgc-page .step p {
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
}

/* ================================================================
   16. TRIGGER / WHEN GRID
================================================================ */
.tgc-page .trigger-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2px !important;
  background: var(--mist) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--mist) !important;
  margin-top: 48px !important;
}

.tgc-page .trigger-item {
  background: var(--white) !important;
  padding: 28px !important;
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
  transition:
    background 0.2s,
    opacity 0.6s ease,
    transform 0.6s ease !important;
}

.tgc-page .trigger-item:hover {
  background: var(--parchment) !important;
}

.tgc-page .trigger-num {
  font-family: "Sora", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  letter-spacing: 0.06em !important;
  flex-shrink: 0 !important;
  padding-top: 3px !important;
  min-width: 28px !important;
}

.tgc-page .trigger-body h3 {
  color: var(--navy) !important;
  margin-bottom: 8px !important;
}
.tgc-page .trigger-body p {
  font-size: 14px !important;
  color: var(--slate) !important;
  line-height: 1.65 !important;
}

/* ================================================================
   17. STATS STRIP
================================================================ */
.tgc-page .stats-strip {
  background: var(--navy-mid) !important;
  padding: 36px 0 !important;
  display: block !important;
  border-top: 1px solid var(--border-dk) !important;
  border-bottom: 1px solid var(--border-dk) !important;
}

.tgc-page .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
}

.tgc-page .stat-item {
  padding: 8px 24px !important;
  text-align: center !important;
  border-right: 1px solid var(--border-dk) !important;
}

.tgc-page .stat-item:last-child {
  border-right: none !important;
}

.tgc-page .stat-num {
  font-family: "Sora", sans-serif !important;
  font-size: clamp(22px, 2.5vw, 32px) !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  line-height: 1.1 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.tgc-page .stat-lbl {
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.4 !important;
}

/* Stat tiles on light background (chemical page) */
.tgc-page .stat-tiles {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.tgc-page .stat-tile {
  background: var(--parchment) !important;
  border-radius: var(--radius-md) !important;
  padding: 32px 28px !important;
  border-top: 3px solid var(--gold) !important;
}

.tgc-page .stat-tile-num {
  font-family: "Sora", sans-serif !important;
  font-size: clamp(28px, 2.8vw, 40px) !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  line-height: 1.1 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.tgc-page .stat-tile-label {
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  color: var(--slate) !important;
  line-height: 1.5 !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.tgc-page .stat-tile-source {
  font-family: "DM Sans", sans-serif !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}

.tgc-page .stat-tile-source a {
  color: var(--gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ================================================================
   18. PRICING CARDS
================================================================ */
.tgc-page .price-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 48px !important;
}

.tgc-page .price-card {
  background: var(--white) !important;
  border: 1px solid var(--mist) !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px !important;
  position: relative !important;
  overflow: hidden !important;
}

.tgc-page .price-card.featured {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold) !important;
}

.tgc-page .price-card.featured::before {
  content: "Most popular" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  background: var(--gold) !important;
  color: var(--navy) !important;
  font-family: "Sora", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-bottom-left-radius: 10px !important;
}

.tgc-page .price-tier {
  font-family: "Sora", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.tgc-page .price-amount {
  font-family: "Sora", sans-serif !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.tgc-page .price-from {
  font-size: 14px !important;
  color: var(--muted) !important;
  margin-bottom: 20px !important;
  display: block !important;
}

.tgc-page .price-features {
  margin-bottom: 24px !important;
}

.tgc-page .price-feature {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  font-size: 14px !important;
  color: var(--slate) !important;
  margin-bottom: 10px !important;
  line-height: 1.5 !important;
}

.tgc-page .price-feature::before {
  content: "✓" !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.tgc-page .price-cta {
  display: block !important;
  text-align: center !important;
  padding: 13px 0 !important;
  border-radius: 8px !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
}

.tgc-page .price-cta-primary {
  background: var(--gold) !important;
  color: var(--navy) !important;
}

.tgc-page .price-cta-primary:hover {
  background: var(--gold-lt) !important;
}

.tgc-page .price-cta-outline {
  background: transparent !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--mist) !important;
}

.tgc-page .price-cta-outline:hover {
  border-color: var(--navy) !important;
}

/* Pricing table (hs-code page) */
.tgc-page .price-table-wrap {
  background: var(--white) !important;
  border: 1px solid var(--mist) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  margin-top: 48px !important;
}

.tgc-page .price-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: "DM Sans", sans-serif !important;
}

.tgc-page .price-table thead tr {
  background: var(--navy) !important;
}

.tgc-page .price-table th {
  padding: 14px 24px !important;
  text-align: left !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.tgc-page .price-table td {
  padding: 16px 24px !important;
  font-size: 14px !important;
  border-bottom: 1px solid var(--mist) !important;
}

.tgc-page .price-table tbody tr:last-child td {
  border-bottom: none !important;
}
.tgc-page .price-table tbody tr:hover {
  background: var(--parchment) !important;
}

.tgc-page .td-tier {
  font-weight: 600 !important;
  color: var(--navy) !important;
}
.tgc-page .td-price {
  font-family: "Sora", sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: var(--gold) !important;
}
.tgc-page .td-incl {
  color: var(--slate) !important;
  font-size: 13px !important;
}

.tgc-page .price-table-note {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 24px !important;
  background: var(--parchment) !important;
  border-top: 1px solid var(--mist) !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.tgc-page .price-table-note p {
  font-size: 13px !important;
  color: var(--slate) !important;
}

/* ================================================================
   19. MARKET / INDUSTRY CARDS
================================================================ */
.tgc-page .market-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-top: 48px !important;
}

.tgc-page .market-card {
  background: var(--white) !important;
  border: 1px solid var(--mist) !important;
  border-radius: var(--radius-md) !important;
  padding: 24px !important;
}

.tgc-page .market-card h3 {
  font-size: 16px !important;
  color: var(--navy) !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--gold) !important;
  display: inline-block !important;
}

.tgc-page .market-card ul {
  margin-top: 14px !important;
}

.tgc-page .market-card li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.tgc-page .market-card li::before {
  content: "✓" !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

/* Common failures list */
.tgc-page .fail-list {
  margin-top: 48px !important;
}

.tgc-page .fail-item {
  display: flex !important;
  gap: 20px !important;
  padding: 22px 24px !important;
  border-radius: var(--radius-md) !important;
  background: var(--white) !important;
  border: 1px solid var(--mist) !important;
  margin-bottom: 12px !important;
  transition: border-color 0.2s !important;
}

.tgc-page .fail-item:hover {
  border-color: rgba(211, 169, 17, 0.4) !important;
  background: rgba(248, 246, 240, 0.7) !important;
}

.tgc-page .fail-num {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(211, 169, 17, 0.15) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Sora", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  margin-top: 2px !important;
}

.tgc-page .fail-body h4 {
  color: var(--navy) !important;
  margin-bottom: 4px !important;
}
.tgc-page .fail-body p {
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
}

/* ================================================================
   20. TESTIMONIAL
================================================================ */
.tgc-page .testi {
  background: var(--navy-mid) !important;
  border-radius: var(--radius-xl) !important;
  padding: 40px 48px !important;
  margin-top: 48px !important;
}

.tgc-page .testi-quote {
  font-family: "Sora", sans-serif !important;
  font-size: clamp(17px, 2vw, 21px) !important;
  font-weight: 400 !important;
  color: var(--white) !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  font-style: italic !important;
}

.tgc-page .testi-author {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.tgc-page .testi-av {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(211, 169, 17, 0.2) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--gold) !important;
}

.tgc-page .testi-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  display: block !important;
}
.tgc-page .testi-role {
  font-size: 12px !important;
  color: var(--muted) !important;
  display: block !important;
  margin-top: 2px !important;
}

/* Testimonial grid (full-prod page) */
.tgc-page .testi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-top: 48px !important;
}

.tgc-page .testi-card {
  background: var(--navy-mid) !important;
  border-radius: var(--radius-xl) !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.tgc-page .testi-card .testi-quote {
  font-size: 15px !important;
  margin-bottom: 0 !important;
  flex: 1 !important;
}
.tgc-page .testi-card .testi-av {
  width: 40px !important;
  height: 40px !important;
  font-size: 12px !important;
}
.tgc-page .testi-card .testi-name {
  font-size: 13px !important;
}
.tgc-page .testi-card .testi-role {
  font-size: 11px !important;
}

/* ================================================================
   21. FAQ ACCORDION
================================================================ */
.tgc-page .faq-list {
  margin-top: 48px !important;
}

.tgc-page .faq-item {
  border-bottom: 1px solid var(--mist) !important;
}

.tgc-page .faq-item:first-child {
  border-top: 1px solid var(--mist) !important;
}

.tgc-page .faq-q {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 20px 0 !important;
  cursor: pointer !important;
  font-family: "Sora", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  gap: 16px !important;
  text-align: left !important;
}

.tgc-page .faq-q:hover {
  color: var(--gold) !important;
}

.tgc-page .faq-arrow {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  color: var(--gold) !important;
  transition: transform 0.25s !important;
}

.tgc-page .faq-item.open .faq-arrow {
  transform: rotate(180deg) !important;
}

.tgc-page .faq-a {
  font-size: 15px !important;
  color: var(--slate) !important;
  line-height: 1.7 !important;
  padding-bottom: 20px !important;
  display: none !important;
}

.tgc-page .faq-item.open .faq-a {
  display: block !important;
}
.tgc-page .faq-a.open {
  display: block !important;
} /* alternate open pattern (electronics/future pages) */

/* ── FAQ icon (text +/- toggle indicator, alternative to faq-arrow) */
.tgc-page .faq-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 16px !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  font-family: "Sora", sans-serif !important;
}

.tgc-page .faq-a a {
  color: var(--gold) !important;
  text-decoration: underline !important;
}

/* ================================================================
   22. RELATED SERVICES GRID
================================================================ */
.tgc-page .related-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-top: 48px !important;
}

.tgc-page .related-card {
  background: var(--white) !important;
  border: 1px solid var(--mist) !important;
  border-radius: var(--radius-md) !important;
  padding: 24px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition:
    background 0.22s,
    border-color 0.22s,
    opacity 0.6s ease,
    transform 0.6s ease !important;
  display: block !important;
}

.tgc-page .related-card:hover {
  border-color: rgba(211, 169, 17, 0.4) !important;
  background: rgba(248, 246, 240, 0.8) !important;
  transform: translateY(-2px) !important;
}

.tgc-page .related-card .ey {
  margin-bottom: 6px !important;
}
.tgc-page .related-card h3 {
  font-size: 17px !important;
  color: var(--navy) !important;
  margin-bottom: 8px !important;
}
.tgc-page .related-card p {
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
}
.tgc-page .related-card .arrow {
  font-size: 18px !important;
  color: var(--gold) !important;
  margin-top: 16px !important;
  display: block !important;
}

/* ================================================================
   23. CTA BAND
================================================================ */
.tgc-page .cta-band {
  background: var(--navy) !important;
  padding: 72px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

.tgc-page .cta-band::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(
    ellipse 60% 80% at 50% 50%,
    rgba(211, 169, 17, 0.07) 0%,
    transparent 70%
  ) !important;
}

.tgc-page .cta-inner {
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
}
.tgc-page .cta-h2 {
  font-size: clamp(26px, 3.5vw, 42px) !important;
  color: var(--white) !important;
  margin-bottom: 16px !important;
}
.tgc-page .cta-sub {
  font-size: 17px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin-bottom: 36px !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.tgc-page .cta-actions {
  display: flex !important;
  gap: 14px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
.tgc-page .cta-note {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-top: 20px !important;
}

/* CTA section (chemical page) */
.tgc-page .cta-section {
  background: var(--navy) !important;
  padding: clamp(64px, 7vw, 96px) 0 !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}

.tgc-page .cta-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    ellipse 50% 100% at 80% 50%,
    rgba(211, 169, 17, 0.07) 0%,
    transparent 60%
  ) !important;
  pointer-events: none !important;
}

.tgc-page .cta-section .cta-inner {
  max-width: 720px !important;
  text-align: center !important;
  margin: 0 auto !important;
  position: relative !important;
}

.tgc-page .cta-section h2 {
  font-family: "Sora", sans-serif !important;
  font-size: clamp(24px, 3vw, 38px) !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.15 !important;
}

.tgc-page .cta-section p {
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  margin: 0 0 36px 0 !important;
  line-height: 1.65 !important;
}

.tgc-page .cta-btns {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* ================================================================
   24. BREADCRUMB
================================================================ */
.tgc-page .breadcrumb {
  background: var(--navy) !important;
  padding: 12px 0 !important;
  display: block !important;
}

.tgc-page .breadcrumb-inner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}

.tgc-page .breadcrumb-inner a {
  color: var(--muted) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.tgc-page .breadcrumb-inner a:hover {
  color: var(--gold) !important;
}
.tgc-page .breadcrumb-inner .current {
  color: rgba(255, 255, 255, 0.7) !important;
}
.tgc-page .breadcrumb-inner .sep {
  color: var(--border-dk) !important;
}

/* ================================================================
   25. PRICING SELECTOR & COST COMPARISON (expedited page)
================================================================ */
.tgc-page .price-selector {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 32px !important;
  flex-wrap: wrap !important;
}

.tgc-page .psel-btn {
  all: unset !important;
  padding: 12px 20px !important;
  border: 1px solid var(--mist) !important;
  border-radius: var(--radius-md) !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--navy) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  background: var(--white) !important;
}

.tgc-page .psel-btn:hover,
.tgc-page .psel-btn.active {
  border-color: var(--gold) !important;
  background: rgba(211, 169, 17, 0.08) !important;
  color: var(--gold) !important;
}

/* Cost comparison */
.tgc-page .cost-compare {
  text-align: center !important;
  padding: 40px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-xl) !important;
  margin-bottom: 40px !important;
}

.tgc-page .cost-compare-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
  margin-bottom: 28px !important;
}

.tgc-page .cost-compare-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 20px 28px !important;
  border-radius: var(--radius-md) !important;
  min-width: 180px !important;
}

.tgc-page .rci-review {
  background: rgba(211, 169, 17, 0.15) !important;
  border: 1px solid rgba(211, 169, 17, 0.3) !important;
}
.tgc-page .rci-risk {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.tgc-page .rci-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--muted) !important;
}
.tgc-page .rci-review .rci-label {
  color: var(--gold) !important;
}

.tgc-page .rci-price {
  font-family: "Sora", sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--white) !important;
  line-height: 1.2 !important;
}
.tgc-page .rci-review .rci-price {
  color: var(--gold) !important;
}

.tgc-page .rci-sub {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  text-align: center !important;
}

.tgc-page .risk-compare-vs {
  font-family: "Sora", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.3) !important;
}

/* ================================================================
   26. SAMPLE/AUDIT REPORT PANEL (expedited page)
================================================================ */
.tgc-page .sample-panel {
  background: var(--navy-mid) !important;
  border: 1px solid var(--border-dk) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  margin-top: 48px !important;
}

.tgc-page .sample-header {
  padding: 20px 28px !important;
  border-bottom: 1px solid var(--border-dk) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.tgc-page .sample-header-title {
  font-family: "Sora", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
}

.tgc-page .sample-header-sub {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-top: 3px !important;
}

.tgc-page .sample-body {
  padding: 0 !important;
}

.tgc-page .sample-row {
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  border-bottom: 1px solid var(--border-dk) !important;
  padding: 16px 28px !important;
}

.tgc-page .sample-row:last-child {
  border-bottom: none !important;
}

.tgc-page .sample-row-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  border-right: 1px solid var(--border-dk) !important;
  padding-right: 28px !important;
  margin-right: 28px !important;
  display: flex !important;
  align-items: flex-start !important;
}

.tgc-page .sample-row-content {
  font-size: 13px !important;
  color: var(--white) !important;
  line-height: 1.55 !important;
}

.tgc-page .sample-highlight {
  color: var(--gold) !important;
  font-weight: 700 !important;
}

/* Sample panel blur / lead gate */
.tgc-page .sample-gate-wrap {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}

.tgc-page .sample-row-blur-light {
  filter: blur(2px) !important;
  user-select: none !important;
  pointer-events: none !important;
}
.tgc-page .sample-row-blur-medium {
  filter: blur(4px) !important;
  user-select: none !important;
  pointer-events: none !important;
}
.tgc-page .sample-row-blur-heavy {
  filter: blur(6px) !important;
  user-select: none !important;
  pointer-events: none !important;
}

.tgc-page .sample-gate {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 380px !important;
  background: linear-gradient(
    to bottom,
    rgba(15, 34, 54, 0) 0%,
    rgba(15, 34, 54, 0.55) 22%,
    rgba(15, 34, 54, 0.92) 52%,
    rgba(15, 34, 54, 0.98) 100%
  ) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-bottom: 40px !important;
  z-index: 10 !important;
}

.tgc-page .sample-gate-box {
  text-align: center !important;
  max-width: 460px !important;
  padding: 0 24px !important;
}

.tgc-page .sample-gate-eyebrow {
  font-family: "Sora", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.tgc-page .sample-gate-title {
  font-family: "Sora", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}

.tgc-page .sample-gate-sub {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 1.55 !important;
  margin-bottom: 24px !important;
}

.tgc-page .sample-gate-form {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  flex-wrap: wrap !important;
}

.tgc-page .sample-gate-input {
  all: unset !important;
  flex: 1 !important;
  min-width: 200px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
  color: var(--white) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s !important;
}

.tgc-page .sample-gate-input:focus {
  border-color: var(--gold) !important;
  outline: none !important;
}
.tgc-page .sample-gate-input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.tgc-page .sample-gate-btn {
  all: unset !important;
  cursor: pointer !important;
  background: var(--gold) !important;
  color: var(--navy) !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 22px !important;
  border-radius: var(--radius-sm) !important;
  white-space: nowrap !important;
  transition: background 0.2s !important;
  box-sizing: border-box !important;
}

.tgc-page .sample-gate-btn:hover {
  background: var(--gold-lt) !important;
}

.tgc-page .sample-gate-note {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.35) !important;
  margin-top: 10px !important;
  display: block !important;
}

/* ================================================================
   27. CLASSIFICATION MEMO PANEL (hs-code page)
================================================================ */
.tgc-page .memo-panel {
  background: var(--navy-mid) !important;
  border: 1px solid var(--border-dk) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  margin-top: 48px !important;
}

.tgc-page .memo-header {
  padding: 20px 28px !important;
  border-bottom: 1px solid var(--border-dk) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.tgc-page .memo-header-title {
  font-family: "Sora", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
}

.tgc-page .memo-header-sub {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-top: 3px !important;
}

.tgc-page .memo-product-bar {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  border-bottom: 1px solid var(--border-dk) !important;
}

.tgc-page .memo-product-field {
  padding: 14px 24px !important;
  border-right: 1px solid var(--border-dk) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.tgc-page .memo-product-field:last-child {
  border-right: none !important;
}

.tgc-page .memo-field-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.tgc-page .memo-field-val {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--white) !important;
}

.tgc-page .memo-body {
  padding: 0 !important;
}

.tgc-page .memo-row {
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  border-bottom: 1px solid var(--border-dk) !important;
}

.tgc-page .memo-row:last-child {
  border-bottom: none !important;
}

.tgc-page .memo-row-label {
  padding: 16px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  border-right: 1px solid var(--border-dk) !important;
  display: flex !important;
  align-items: flex-start !important;
}

.tgc-page .memo-row-content {
  padding: 16px 28px !important;
  font-size: 13px !important;
  color: var(--white) !important;
  line-height: 1.55 !important;
}

.tgc-page .memo-highlight {
  color: var(--gold) !important;
  font-weight: 700 !important;
}

.tgc-page .memo-conclusion {
  padding: 20px 28px !important;
  background: rgba(211, 169, 17, 0.08) !important;
  border-top: 1px solid var(--border-dk) !important;
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
}

.tgc-page .memo-conclusion-icon {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  background: rgba(211, 169, 17, 0.2) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gold) !important;
}

.tgc-page .memo-conclusion p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  line-height: 1.6 !important;
}
.tgc-page .memo-conclusion strong {
  color: var(--white) !important;
}

/* Memo panel blur / lead gate */
.tgc-page .memo-gate-wrap {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}

.tgc-page .memo-row-blur-light {
  filter: blur(2px) !important;
  user-select: none !important;
  pointer-events: none !important;
}
.tgc-page .memo-row-blur-medium {
  filter: blur(4px) !important;
  user-select: none !important;
  pointer-events: none !important;
}
.tgc-page .memo-row-blur-heavy {
  filter: blur(6px) !important;
  user-select: none !important;
  pointer-events: none !important;
}
.tgc-page .memo-conclusion-blur {
  filter: blur(7px) !important;
  user-select: none !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
}

.tgc-page .memo-gate {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 380px !important;
  background: linear-gradient(
    to bottom,
    rgba(15, 34, 54, 0) 0%,
    rgba(15, 34, 54, 0.55) 22%,
    rgba(15, 34, 54, 0.92) 52%,
    rgba(15, 34, 54, 0.98) 100%
  ) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-bottom: 40px !important;
  z-index: 10 !important;
}

.tgc-page .memo-gate-box {
  text-align: center !important;
  max-width: 460px !important;
  padding: 0 24px !important;
}

.tgc-page .memo-gate-eyebrow {
  font-family: "Sora", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.tgc-page .memo-gate-title {
  font-family: "Sora", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}

.tgc-page .memo-gate-sub {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 1.55 !important;
  margin-bottom: 24px !important;
}

.tgc-page .memo-gate-form {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  flex-wrap: wrap !important;
}

.tgc-page .memo-gate-input {
  all: unset !important;
  flex: 1 !important;
  min-width: 200px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
  color: var(--white) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s !important;
}

.tgc-page .memo-gate-input:focus {
  border-color: var(--gold) !important;
  outline: none !important;
}
.tgc-page .memo-gate-input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.tgc-page .memo-gate-btn {
  all: unset !important;
  cursor: pointer !important;
  background: var(--gold) !important;
  color: var(--navy) !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 22px !important;
  border-radius: var(--radius-sm) !important;
  white-space: nowrap !important;
  transition: background 0.2s !important;
  box-sizing: border-box !important;
}

.tgc-page .memo-gate-btn:hover {
  background: var(--gold-lt) !important;
}

.tgc-page .memo-gate-note {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.35) !important;
  margin-top: 10px !important;
  display: block !important;
}

/* Risk / cost of wrong classification */
.tgc-page .risk-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 40px !important;
}

.tgc-page .risk-item {
  padding: 28px 24px !important;
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: background 0.2s !important;
  cursor: pointer !important;
}

.tgc-page .risk-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.tgc-page .risk-icon {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  background: rgba(211, 169, 17, 0.15) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gold) !important;
  transition: background 0.2s !important;
}

.tgc-page .risk-item:hover .risk-icon {
  background: rgba(211, 169, 17, 0.28) !important;
}

.tgc-page .risk-body h3 {
  color: var(--white) !important;
  margin-bottom: 0 !important;
  font-size: 15px !important;
  transition: color 0.2s !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
}

.tgc-page .risk-body h3::after {
  content: "+" !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  font-family: sans-serif !important;
  line-height: 1 !important;
  color: var(--gold) !important;
  opacity: 0.5 !important;
  flex-shrink: 0 !important;
  transition:
    transform 0.6s ease,
    opacity 0.4s !important;
}

.tgc-page .risk-item:hover .risk-body h3 {
  color: var(--gold) !important;
}

.tgc-page .risk-item:hover .risk-body h3::after {
  transform: rotate(45deg) !important;
  opacity: 1 !important;
}

.tgc-page .risk-body p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.65 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  transition:
    max-height 0.7s ease,
    opacity 0.5s ease 0.1s,
    margin-top 0.5s ease !important;
}

.tgc-page .risk-item:hover .risk-body p {
  max-height: 200px !important;
  opacity: 1 !important;
  margin-top: 8px !important;
}

/* ================================================================
   28. CHEMICAL REGULATION CARDS
================================================================ */
.tgc-page .reg-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}

.tgc-page .reg-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
}

.tgc-page .reg-card-header {
  background: var(--navy) !important;
  padding: 18px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.tgc-page .reg-flag {
  font-size: 22px !important;
  line-height: 1 !important;
}

.tgc-page .reg-card-header h3 {
  font-family: "Sora", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  margin: 0 !important;
}

.tgc-page .reg-card-body {
  padding: 24px !important;
}

.tgc-page .reg-update {
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--border) !important;
}

.tgc-page .reg-update:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.tgc-page .reg-tag {
  display: inline-block !important;
  background: rgba(211, 169, 17, 0.12) !important;
  color: #7a5800 !important;
  font-family: "Sora", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  margin-bottom: 8px !important;
}

.tgc-page .reg-tag.urgent {
  background: rgba(220, 50, 50, 0.1) !important;
  color: #8b1a1a !important;
}

.tgc-page .reg-update h4 {
  font-family: "Sora", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.3 !important;
}

.tgc-page .reg-update p {
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Blog article body — inline source links (exclude buttons) */
.tgc-page .article-body a:not(.btn) {
  color: var(--gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 500 !important;
}
.tgc-page .article-body a:not(.btn):hover {
  opacity: 0.8 !important;
}

/* Blog reg-update-block inline links (exclude buttons) */
.tgc-page .reg-update-block a:not(.btn) {
  color: var(--gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 500 !important;
}
.tgc-page .reg-update-block a:not(.btn):hover {
  opacity: 0.8 !important;
}

.tgc-page .reg-update a {
  color: var(--gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Risk callout (horizontal) */
.tgc-page .risk-callout {
  background: var(--navy) !important;
  border-radius: var(--radius-md) !important;
  padding: 40px 48px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 40px !important;
  align-items: center !important;
  border-left: 4px solid var(--gold) !important;
}

/* Service list */
.tgc-page .service-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.tgc-page .service-row {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  padding: 20px !important;
  background: var(--parchment) !important;
  border-radius: var(--radius-md) !important;
}

.tgc-page .service-check {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  font-size: 12px !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
}

.tgc-page .service-check svg {
  width: 13px !important;
  height: 13px !important;
  color: var(--navy) !important;
  display: block !important;
}

.tgc-page .service-row h4 {
  font-family: "Sora", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  margin: 0 0 4px 0 !important;
}

.tgc-page .service-row p {
  font-size: 14px !important;
  color: var(--slate) !important;
  margin: 0 !important;
}

/* ================================================================
   29. FULL PRODUCT COMPLIANCE — PILLARS
================================================================ */
.tgc-page .pillar-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 48px !important;
}

.tgc-page .pillar-card {
  background: var(--navy-mid) !important;
  border: 1px solid var(--border-dk) !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px !important;
  position: relative !important;
  overflow: hidden !important;
}

.tgc-page .pillar-card::after {
  content: "" !important;
  position: absolute !important;
  bottom: -40px !important;
  right: -40px !important;
  width: 160px !important;
  height: 160px !important;
  border-radius: 50% !important;
  background: radial-gradient(
    circle,
    rgba(211, 169, 17, 0.12) 0%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
}

.tgc-page .pillar-num {
  font-family: "Sora", sans-serif !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  display: block !important;
  opacity: 0.3 !important;
}

.tgc-page .pillar-card h3 {
  color: var(--white) !important;
  margin-bottom: 10px !important;
}
.tgc-page .pillar-card p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  line-height: 1.65 !important;
}

/* ================================================================
   30. SHARED RESPONSIVE BREAKPOINTS
================================================================ */
@media (max-width: 1024px) {
  .tgc-page .two-col {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .two-col-img {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .tgc-page .hero-grid {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .manage-grid {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .pillar-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tgc-page .testi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tgc-page .process-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tgc-page .deliv-row {
    grid-template-columns: 60px 1fr 1fr !important;
    gap: 0 32px !important;
  }
  .tgc-page .check-grid {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .trigger-grid {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .reg-grid {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .card-grid-3 {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .card-grid--loose,
  .tgc-page .card-grid--3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tgc-page .stat-tiles {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .hero-stat-block {
    display: none !important;
  }
  .tgc-page .risk-callout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .tgc-page .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tgc-page .stat-item {
    border-right: none !important;
    border-bottom: 1px solid var(--border-dk) !important;
  }
  .tgc-page .stat-item:last-child {
    border-bottom: none !important;
  }
  .tgc-page .memo-product-bar {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .tgc-page .related-grid {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .testi {
    padding: 28px 24px !important;
  }
  .tgc-page .btn-lg {
    padding: 16px 28px !important;
    font-size: 15px !important;
  }
  .tgc-page .cta-band {
    padding: 56px 0 !important;
  }
  .tgc-page .s-navy,
  .tgc-page .s-dark,
  .tgc-page .s-white,
  .tgc-page .s-parchment,
  .tgc-page .s-grey,
  .tgc-page .s-navy-mid {
    padding: clamp(48px, 6vw, 72px) 0 !important;
  }
  .tgc-page .trigger-grid {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .pillar-grid {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .testi-grid {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .process-steps {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .deliv-row {
    grid-template-columns: 60px 1fr !important;
  }
  .tgc-page .deliv-row-right {
    grid-column: 2 / 3 !important;
    margin-top: 12px !important;
  }
  .tgc-page .memo-product-bar {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .memo-product-field {
    border-right: none !important;
    border-bottom: 1px solid var(--border-dk) !important;
  }
  .tgc-page .memo-row {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .memo-row-label {
    border-right: none !important;
    border-bottom: 1px solid var(--border-dk) !important;
  }
  .tgc-page .risk-compare-inner {
    flex-direction: column !important;
  }
  .tgc-page .card-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .card-grid--loose,
  .tgc-page .card-grid--3 {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .stats-grid {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .hero-ctas {
    flex-direction: column !important;
  }
  .tgc-page .cta-btns {
    flex-direction: column !important;
    align-items: center !important;
  }
  .tgc-page .card-grid,
  .tgc-page .assess-grid,
  .tgc-page .check-grid,
  .tgc-page .manage-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tgc-page .cost-compare {
    padding: 24px 16px !important;
  }
  .tgc-page .cost-compare-inner {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .tgc-page .cost-compare-item {
    min-width: 0 !important;
    width: 100% !important;
    padding: 16px !important;
  }
  .tgc-page .cost-compare-vs {
    padding: 8px 0 !important;
  }
  #tgc-hs .card-grid,
  #tgc-fp .card-grid {
    grid-template-columns: 1fr !important;
  }
  #tgc-about .pillar-grid {
    grid-template-columns: 1fr !important;
  }
  #tgc-contact .process-steps {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .risk-compare-item {
    min-width: 0 !important;
    width: 100% !important;
    padding: 16px !important;
  }
  .tgc-page .cost-compare > .btn {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .tgc-page .price-table thead {
    display: none !important;
  }
  .tgc-page .price-table,
  .tgc-page .price-table tbody,
  .tgc-page .price-table tr {
    display: block !important;
    width: 100% !important;
  }
  .tgc-page .price-table tr {
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--mist) !important;
  }
  .tgc-page .price-table tbody tr:last-child {
    border-bottom: none !important;
  }
  .tgc-page .price-table td {
    display: block !important;
    padding: 3px 16px !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
  }
  .tgc-page .td-tier {
    padding-top: 0 !important;
    font-size: 14px !important;
  }
  .tgc-page .td-price {
    font-size: 20px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  .tgc-page .td-incl {
    padding-bottom: 0 !important;
  }
  .tgc-page .price-table-note {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px 16px !important;
  }
  /* Market cards: horizontal scroll carousel — ID-scoped to beat duplicate base rule */
  #tgc-lr .market-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    margin-top: 32px !important;
    padding-bottom: 8px !important;
  }
  #tgc-lr .market-card {
    flex: 0 0 82% !important;
    scroll-snap-align: start !important;
    min-width: 0 !important;
  }
  /* Price cards: 1 column */
  .tgc-page .price-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 24px !important;
  }
}

@media (max-width: 480px) {
  .tgc-page .cta-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .tgc-page .card-grid,
  .tgc-page .assess-grid,
  .tgc-page .check-grid,
  .tgc-page .manage-grid {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .cta-actions .btn {
    text-align: center !important;
    justify-content: center !important;
  }
  .tgc-page .related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   25. HOMEPAGE-SPECIFIC COMPONENTS
   (hero-creds, form-card, proof strip, services grid, why-TGC,
    industries, TecEx band, case study card, expert profile)
================================================================ */

.tgc-page .hero-creds {
  display: flex !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
  padding-top: 32px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.tgc-page .hero-cred {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.62) !important;
}
.tgc-page .hero-cred strong {
  color: #ffffff !important;
  font-weight: 600 !important;
}
.tgc-page .hero-cred svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--gold) !important;
  flex-shrink: 0 !important;
}

/* ── Form card ──────────────────────────────────────────── */
.tgc-page .form-card {
  background: var(--navy-mid) !important;
  border: 1px solid var(--border-dk) !important;
  border-radius: 22px !important;
  padding: 20px 0 0 0 !important;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.44) !important;
}
.tgc-page .form-card-title {
  font-family: "Sora", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: block !important;
  margin-top: 20px !important;
  margin-bottom: 4px !important;
  padding-left: 40px !important;
}
.tgc-page .form-card-sub {
  font-size: 13px !important;
  color: var(--tmuted) !important;
  display: block !important;
  margin-bottom: 0 !important;
  padding-left: 40px !important;
}
.tgc-page .fg {
  margin-bottom: 13px !important;
}
.tgc-page .fg-row-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
}
.tgc-page .fg label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin-bottom: 6px !important;
  font-family: "DM Sans", sans-serif !important;
}
.tgc-page .fg input,
.tgc-page .fg select,
.tgc-page .fg textarea {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.065) !important;
  border: 1px solid var(--border-dk) !important;
  border-radius: 7px !important;
  padding: 12px 14px !important;
  color: #ffffff !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 15px !important;
  outline: none !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s !important;
  cursor: text !important;
  box-sizing: border-box !important;
}
.tgc-page .fg select {
  cursor: pointer !important;
}
.tgc-page .fg input:focus,
.tgc-page .fg select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(211, 169, 17, 0.18) !important;
}
.tgc-page .fg input::placeholder {
  color: rgba(255, 255, 255, 0.28) !important;
}

.tgc-page .form-submit {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 6px !important;
  cursor: pointer !important;
  background: var(--gold) !important;
  color: var(--navy) !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 22px rgba(211, 169, 17, 0.28) !important;
  transition: all 0.22s !important;
  box-sizing: border-box !important;
}
.tgc-page .form-submit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 30px rgba(211, 169, 17, 0.36) !important;
}
.tgc-page .form-note {
  font-size: 12px !important;
  color: var(--tmuted) !important;
  text-align: center !important;
  margin-top: 10px !important;
  display: block !important;
}
.tgc-page .form-card {
  position: relative !important;
}
.tgc-page .form-card {
  --hsf-background__padding: 0px;
  --hsf-default-background__padding: 0px;
}
.tgc-page .form-card .hsfc-Step__Content,
.tgc-page .form-card .hsfc-Step,
.tgc-page .form-card .hbspt-form,
.tgc-page .form-card .hs-form-private,
.tgc-page .form-card form {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}
.tgc-page .form-card .hsfc-NavigationRow {
  margin-top: 8px !important;
}
/* Reserve height while HubSpot loads (prevents layout shift) */
.tgc-page .form-card:not(.form-loaded) {
  min-height: 700px !important;
}
.tgc-page .form-card {
  transition: min-height 0.2s ease !important;
}
.tgc-page .hs-loader {
  width: 28px !important;
  height: 28px !important;
  margin: 52px auto 0 !important;
  border: 3px solid rgba(255, 255, 255, 0.1) !important;
  border-top-color: var(--gold) !important;
  border-radius: 50% !important;
  animation: hs-spin 0.75s linear infinite !important;
  display: block !important;
}
.tgc-page .form-card.form-loaded .hs-loader {
  display: none !important;
}
@keyframes hs-spin {
  to { transform: rotate(360deg); }
}
.tgc-page .dial-opt {
  padding: 9px 14px !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  font-family: "DM Sans", sans-serif !important;
}
.tgc-page .dial-opt:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ================================================================
   MEMBERSHIP BAR
================================================================ */
.tgc-page .membership-bar {
  background: var(--navy) !important;
  border-top: 1px solid var(--border-dk) !important;
  border-bottom: 1px solid var(--border-dk) !important;
  padding: 20px 0 !important;
}
.tgc-page .membership-inner {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
}
.tgc-page .membership-label {
  font-family: "Sora", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--slate) !important;
  white-space: nowrap !important;
}
.tgc-page .membership-logos {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
.tgc-page .membership-logo {
  height: 40px !important;
  width: auto !important;
  opacity: 0.8 !important;
  filter: brightness(0) invert(1) !important;
  transition: opacity 0.2s !important;
}
.tgc-page .membership-logo:hover {
  opacity: 1 !important;
}

/* ================================================================
   PROOF BAR
================================================================ */
.tgc-page .proof {
  background: var(--navy-mid) !important;
  border-top: 1px solid var(--border-dk) !important;
  border-bottom: 1px solid var(--border-dk) !important;
  display: block !important;
}
.tgc-page .proof-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 4vw, 48px) !important;
  display: flex !important;
  flex-wrap: wrap !important;
}
.tgc-page .proof-item {
  flex: 1 1 180px !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 18px 22px !important;
  border-right: 1px solid var(--border-dk) !important;
}
.tgc-page .proof-item:last-child {
  border-right: none !important;
}
.tgc-page .proof-icon {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  background: rgba(211, 169, 17, 0.14) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.tgc-page .proof-icon svg {
  width: 17px !important;
  height: 17px !important;
  color: var(--gold) !important;
}
.tgc-page .proof-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--tmuted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  display: block !important;
}
.tgc-page .proof-val {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: block !important;
  margin-top: 2px !important;
}

/* ================================================================
   SERVICES GRID
================================================================ */
.tgc-page .svc-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px !important;
  background: var(--border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  margin-top: 48px !important;
}
.tgc-page .svc-tile {
  background: #ffffff !important;
  padding: 30px 24px !important;
  cursor: pointer !important;
  transition: background 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
}
.tgc-page .svc-tile:hover {
  background: var(--navy) !important;
}
.tgc-page .svc-tile:hover .svc-icon {
  background: rgba(211, 169, 17, 0.2) !important;
}
.tgc-page .svc-tile:hover .svc-name {
  color: #ffffff !important;
}
.tgc-page .svc-tile:hover .svc-desc {
  color: rgba(255, 255, 255, 0.65) !important;
}
.tgc-page .svc-tile:hover .svc-chk {
  color: rgba(255, 255, 255, 0.65) !important;
}
.tgc-page .svc-tile:hover .svc-price {
  color: var(--gold) !important;
}
.tgc-page .svc-tile:hover .svc-arrow {
  color: var(--gold) !important;
}
.tgc-page .svc-icon {
  width: 44px !important;
  height: 44px !important;
  background: var(--navy) !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
  flex-shrink: 0 !important;
  transition: background 0.25s !important;
}
.tgc-page .svc-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--gold) !important;
}
.tgc-page .svc-name {
  font-family: "Sora", sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin-bottom: 10px !important;
  transition: color 0.25s !important;
}
.tgc-page .svc-desc {
  font-size: 14px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
  transition: color 0.25s !important;
  flex: 1 !important;
}
.tgc-page .svc-checks {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 18px !important;
  list-style: none !important;
}
.tgc-page .svc-chk {
  display: flex !important;
  gap: 8px !important;
  align-items: flex-start !important;
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.5 !important;
  transition: color 0.25s !important;
}
.tgc-page .svc-chk::before {
  content: "✓" !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
.tgc-page .svc-price {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  transition: color 0.25s !important;
  margin-bottom: 10px !important;
  display: block !important;
}
.tgc-page .svc-arrow {
  font-size: 18px !important;
  color: var(--muted) !important;
  transition: color 0.25s !important;
}

/* ================================================================
   TECEX HERITAGE BAND
================================================================ */
.tgc-page .tecex-band {
  background: linear-gradient(135deg, var(--navy-mid), var(--navy)) !important;
  border-top: 1px solid var(--border-dk) !important;
  border-bottom: 1px solid var(--border-dk) !important;
  padding: 40px 0 !important;
  display: block !important;
}
.tgc-page .tecex-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 4vw, 48px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
}
.tgc-page .tecex-badge {
  background: rgba(211, 169, 17, 0.14) !important;
  border: 1px solid rgba(211, 169, 17, 0.3) !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-family: "Sora", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  flex-shrink: 0 !important;
}
.tgc-page .tecex-div {
  width: 1px !important;
  height: 52px !important;
  background: var(--border-dk) !important;
  flex-shrink: 0 !important;
}
.tgc-page .tecex-txt {
  flex: 1 !important;
  min-width: 240px !important;
}
.tgc-page .tecex-txt h2 {
  font-family: "Sora", sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
}
.tgc-page .tecex-txt p {
  font-size: 14px !important;
  color: var(--tmuted) !important;
  line-height: 1.65 !important;
  max-width: 620px !important;
  margin-bottom: 14px !important;
}
.tgc-page .expert-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--border-dk) !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
}
.tgc-page .expert-av {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(211, 169, 17, 0.2) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: var(--gold) !important;
}
.tgc-page .expert-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  display: block !important;
}
.tgc-page .expert-role {
  font-size: 11px !important;
  color: var(--tmuted) !important;
  display: block !important;
  margin-top: 1px !important;
}

/* ================================================================
   INDUSTRIES
================================================================ */
.tgc-page .ind-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 12px !important;
  margin-top: 44px !important;
}
.tgc-page .ind-pill {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 18px 10px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    opacity 0.6s ease,
    transform 0.6s ease !important;
  text-decoration: none !important;
  display: block !important;
}
.tgc-page .ind-pill:hover {
  border-color: rgba(211, 169, 17, 0.5) !important;
  background: var(--gold-pale) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(211, 169, 17, 0.12) !important;
}
.tgc-page .ind-icon {
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto 14px !important;
  background: var(--navy) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.22s ease !important;
}
.tgc-page .ind-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--gold) !important;
}
.tgc-page .ind-pill:hover .ind-icon {
  background: rgba(211, 169, 17, 0.25) !important;
}
.tgc-page .ind-n {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  line-height: 1.4 !important;
  display: block !important;
}

/* ================================================================
   WHY TGC
================================================================ */
.tgc-page .why-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}
.tgc-page .why-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-top: 32px !important;
}
.tgc-page .why-item {
  display: flex !important;
  gap: 18px !important;
  padding: 18px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  transition:
    background 0.22s,
    border-color 0.22s,
    opacity 0.6s ease,
    transform 0.6s ease !important;
}
.tgc-page .why-item:hover {
  border-color: rgba(211, 169, 17, 0.4) !important;
  background: var(--gold-pale) !important;
}
.tgc-page .why-icon {
  width: 42px !important;
  height: 42px !important;
  flex-shrink: 0 !important;
  background: var(--navy) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.tgc-page .why-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--gold) !important;
}
.tgc-page .why-item h3 {
  font-family: "Sora", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  margin-bottom: 4px !important;
}
.tgc-page .why-item p {
  font-size: 14px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
}

.tgc-page .stats-box {
  background: var(--navy) !important;
  border-radius: 22px !important;
  padding: 40px !important;
  position: relative !important;
  overflow: hidden !important;
}
.tgc-page .stats-box::before {
  content: "" !important;
  position: absolute !important;
  width: 300px !important;
  height: 300px !important;
  bottom: -80px !important;
  right: -80px !important;
  background: radial-gradient(
    circle,
    rgba(211, 169, 17, 0.13) 0%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
}
.tgc-page .stat-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--border-dk) !important;
  position: relative !important;
  z-index: 1 !important;
}
.tgc-page .stat-row:last-child {
  border-bottom: none !important;
}
/* stat-num / stat-lbl scoped to stats-box to avoid overriding stats-strip definitions */
.tgc-page .stats-box .stat-num {
  font-family: "Sora", sans-serif !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
}
.tgc-page .stats-box .stat-lbl {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-top: 6px !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

/* ================================================================
   CASE STUDY + TESTIMONIAL
================================================================ */
.tgc-page .case-card {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 22px !important;
  padding: 48px !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  box-shadow: 0 4px 24px rgba(10, 24, 38, 0.06) !important;
  position: relative !important;
  overflow: hidden !important;
}
.tgc-page .case-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--gold) !important;
}
.tgc-page .case-tag {
  display: inline-block !important;
  background: rgba(211, 169, 17, 0.12) !important;
  border: 1px solid rgba(211, 169, 17, 0.32) !important;
  border-radius: 100px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #7a6000 !important;
  margin-bottom: 18px !important;
}
.tgc-page .case-h3 {
  font-family: "Sora", sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin-bottom: 14px !important;
}
.tgc-page .case-body {
  font-size: 16px !important;
  color: var(--slate) !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}
.tgc-page .case-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin: 28px 0 !important;
  padding: 28px 0 !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
.tgc-page .case-stat {
  text-align: center !important;
}
.tgc-page .case-num {
  font-family: "Sora", sans-serif !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  display: block !important;
}
.tgc-page .case-lbl {
  font-size: 13px !important;
  color: var(--muted) !important;
  margin-top: 4px !important;
  display: block !important;
}

.tgc-page .testimonial {
  background: var(--navy) !important;
  border-radius: 16px !important;
  padding: 36px !important;
  position: relative !important;
  overflow: hidden !important;
  max-width: 820px !important;
  margin: 24px auto 0 !important;
}
.tgc-page .testimonial::before {
  content: "\201C" !important;
  position: absolute !important;
  top: -18px !important;
  left: 20px !important;
  font-size: 160px !important;
  line-height: 1 !important;
  color: rgba(211, 169, 17, 0.12) !important;
  font-family: Georgia, serif !important;
  pointer-events: none !important;
}
.tgc-page .testi-txt {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #ffffff !important;
  font-style: italic !important;
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 22px !important;
}
.tgc-page .testi-author {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
}
.tgc-page .testi-av {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(211, 169, 17, 0.2) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--gold) !important;
}
.tgc-page .testi-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  display: block !important;
}
.tgc-page .testi-role {
  font-size: 12px !important;
  color: var(--tmuted) !important;
  display: block !important;
  margin-top: 1px !important;
}

/* ================================================================
   CTA BAND
================================================================ */
.tgc-page .cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, #0f2a44 100%) !important;
  padding: clamp(72px, 8vw, 100px) 0 !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}
.tgc-page .cta-band::before {
  content: "" !important;
  position: absolute !important;
  width: 600px !important;
  height: 600px !important;
  top: -200px !important;
  right: -100px !important;
  background: radial-gradient(
    circle,
    rgba(211, 169, 17, 0.1) 0%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
}
.tgc-page .cta-inner {
  position: relative !important;
  z-index: 1 !important;
}
.tgc-page .cta-h2 {
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  max-width: 560px !important;
  margin: 0 auto 16px !important;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: 1.12 !important;
}
.tgc-page .cta-sub {
  font-size: clamp(16px, 1.4vw, 19px) !important;
  line-height: 1.72 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  max-width: 460px !important;
  margin: 0 auto !important;
}
.tgc-page .cta-actions {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: 32px !important;
  margin-bottom: 16px !important;
}
.tgc-page .cta-note {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.32) !important;
}

/* ================================================================
   SCROLL ANIMATIONS
================================================================ */
.tgc-page .fade {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.tgc-page .fade.vis {
  opacity: 1 !important;
  transform: none !important;
}
.tgc-page .d1 {
  transition-delay: 0.1s !important;
}
.tgc-page .d2 {
  transition-delay: 0.2s !important;
}
.tgc-page .d3 {
  transition-delay: 0.3s !important;
}
.tgc-page .d4 {
  transition-delay: 0.4s !important;
}

/* ================================================================
   RESPONSIVE
   Breakpoints:
   1080px - tablet landscape / small desktop
    768px - iPad portrait
    600px - large mobile
    480px - standard mobile
    390px - iPhone 14 / small mobile
================================================================ */

/* ── 1080px: tablet landscape ─────────────────────────────── */
@media (max-width: 1080px) {
  /* Hero: stack copy above form */
  .tgc-page .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .tgc-page .form-card {
    max-width: 600px !important;
  }

  /* Services: 2 columns */
  .tgc-page .svc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Industries: 3 columns */
  .tgc-page .ind-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Why TGC: stack, stats box full width */
  .tgc-page .why-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Stats: horizontal row when container is full width */
  .tgc-page .stats-box {
    padding: 32px !important;
  }
  .tgc-page .stat-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    padding: 28px 0 !important;
    border-bottom: none !important;
  }
  .tgc-page .stat-row:not(:last-child) {
    border-bottom: 1px solid var(--border-dk) !important;
  }
  .tgc-page .stats-box .stat-num {
    font-size: 44px !important;
  }
}

/* ── 768px: iPad portrait ─────────────────────────────────── */
@media (max-width: 768px) {
  /* Tighten hero padding */
  .tgc-page .hero {
    padding: clamp(52px, 7vw, 80px) 0 clamp(44px, 6vw, 64px) !important;
  }

  /* Homepage: hide hero form on mobile */
  #tgc-hp #tgc-quote {
    display: none !important;
  }
  /* Swap specialist button: hide scroll-to-form, show contact-us link */
  #tgc-hp .hp-specialist-desktop {
    display: none !important;
  }
  #tgc-hp .hp-specialist-mobile {
    display: inline-flex !important;
  }

  /* Form card: full width, less padding */
  .tgc-page .form-card {
    max-width: 100% !important;
    padding: 24px !important;
    border-radius: 16px !important;
  }
  .tgc-page .form-card-title {
    font-size: 18px !important;
  }

  /* Hero badge: tighten */
  .tgc-page .hero-badge {
    margin-bottom: 20px !important;
  }

  /* Proof bar: 2×3 grid on iPad */
  .tgc-page .proof-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tgc-page .proof-item {
    border-right: none !important;
    border-bottom: 1px solid var(--border-dk) !important;
    padding: 16px 18px !important;
  }
  .tgc-page .proof-item:nth-child(odd) {
    border-right: 1px solid var(--border-dk) !important;
  }
  .tgc-page .proof-item:nth-last-child(-n + 2) {
    border-bottom: none !important;
  }

  /* Services: 2-col already, reduce padding */
  .tgc-page .svc-tile {
    padding: 22px 18px !important;
  }

  /* TecEx band: stack vertically */
  .tgc-page .tecex-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .tgc-page .tecex-div {
    display: none !important;
  }
  .tgc-page .tecex-band svg.tgc-logomark {
    display: none !important;
  }

  /* Industries: 3-col stays */

  /* Why grid already 1-col; stats horizontal row stays */

  /* Case card: reduce padding */
  .tgc-page .case-card {
    padding: 32px 24px !important;
    border-radius: 16px !important;
  }
  .tgc-page .case-h3 {
    font-size: 19px !important;
  }
  .tgc-page .testimonial {
    padding: 28px !important;
  }
  .tgc-page .testi-txt {
    font-size: 15px !important;
  }

  /* CTA band: tighter */
  .tgc-page .cta-h2 {
    font-size: clamp(22px, 3vw, 34px) !important;
  }

  /* Footer: stay 2-col on iPad */
}

/* ── 600px: large mobile ──────────────────────────────────── */
@media (max-width: 600px) {
  /* Hero */
  .tgc-page .hero {
    padding: 48px 0 40px !important;
  }
  .tgc-page .hero-ctas {
    flex-direction: column !important;
  }
  .tgc-page .hero-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .tgc-page .hero-creds {
    gap: 14px !important;
    flex-direction: column !important;
  }

  /* Proof bar: stay 2-col */

  /* Services: single column */
  .tgc-page .svc-grid {
    grid-template-columns: 1fr !important;
  }

  /* Industries: 2-col */
  .tgc-page .ind-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tgc-page .ind-pill {
    padding: 16px 10px !important;
  }
  .tgc-page .ind-icon {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 10px !important;
  }
  .tgc-page .ind-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Stats: revert to single stacked column on mobile */
  .tgc-page .stat-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid var(--border-dk) !important;
  }
  .tgc-page .stat-row:last-child {
    border-bottom: none !important;
  }
  .tgc-page .stats-box .stat-num {
    font-size: 44px !important;
  }

  /* Case stats: tighten gap */
  .tgc-page .case-stats {
    gap: 16px !important;
    padding: 20px 0 !important;
    margin: 20px 0 !important;
  }
  .tgc-page .case-num {
    font-size: 28px !important;
  }
}

/* ── 480px: standard mobile ───────────────────────────────── */
@media (max-width: 480px) {
  /* Form: stack First/Last name and Email/Phone to single column */
  .tgc-page .fg-row-2 {
    grid-template-columns: 1fr !important;
  }

  /* Form card: less padding */
  .tgc-page .form-card {
    padding: 20px 16px !important;
  }
  .tgc-page .form-card-title {
    font-size: 16px !important;
  }
  .tgc-page .form-card-sub {
    font-size: 12px !important;
    margin-bottom: 16px !important;
  }

  /* Proof bar: single column on very small screens */
  .tgc-page .proof-inner {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .proof-item {
    border-right: none !important;
    border-bottom: 1px solid var(--border-dk) !important;
  }
  .tgc-page .proof-item:nth-child(odd) {
    border-right: none !important;
  }
  .tgc-page .proof-item:last-child {
    border-bottom: none !important;
  }
  .tgc-page .proof-item:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--border-dk) !important;
  }
  .tgc-page .proof-item:last-child {
    border-bottom: none !important;
  }

  /* Industries: 2-col stays fine */

  /* Case card */
  .tgc-page .case-card {
    padding: 24px 16px !important;
  }
  .tgc-page .case-h3 {
    font-size: 17px !important;
  }
  .tgc-page .case-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .tgc-page .case-num {
    font-size: 24px !important;
  }
  .tgc-page .case-lbl {
    font-size: 11px !important;
  }

  /* Testimonial */
  .tgc-page .testimonial {
    padding: 22px 18px !important;
    border-radius: 12px !important;
  }
  .tgc-page .testi-txt {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }

  /* CTA band */
  .tgc-page .cta-actions {
    flex-direction: column !important;
    align-items: center !important;
  }
  .tgc-page .cta-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Why items: tighten */
  .tgc-page .why-item {
    padding: 14px !important;
    gap: 14px !important;
  }
  .tgc-page .why-icon {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ── 390px: iPhone / small mobile ────────────────────────── */
@media (max-width: 390px) {
  /* Industries: 2-col stays, but smaller text */
  .tgc-page .ind-n {
    font-size: 11px !important;
  }

  /* Reduce section padding */
  .tgc-page .s-white {
    padding: 52px 0 !important;
  }
  .tgc-page .s-grey {
    padding: 52px 0 !important;
  }
  .tgc-page .s-dark {
    padding: 52px 0 !important;
  }

  /* TecEx band */
  .tgc-page .tecex-band {
    padding: 28px 0 !important;
  }
  .tgc-page .expert-pill {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Stats box */
  .tgc-page .stats-box {
    padding: 24px 20px !important;
  }
  .tgc-page .stats-box .stat-num {
    font-size: 38px !important;
  }
}

/* ================================================================
   WORDPRESS THEME OVERRIDE SAFETY NET
   These rules undo the most common WP theme interference patterns
================================================================ */
.tgc-page .tgc-wrap > * {
  max-width: none !important;
}
.tgc-page section,
.tgc-page div,
.tgc-page footer,
.tgc-page nav {
  word-break: normal !important;
}
/* Prevent WP Twenty-* themes from adding top margin to first-child */
.tgc-page > *:first-child {
  margin-top: 0 !important;
}
/* Kill WP entry-content p spacing if it leaks in */
.tgc-page p + p {
  margin-top: 0 !important;
}

/* ================================================================
   ADDENDUM: Missing classes added after initial build
   (covers all classes used in page HTML not in original global.css)
================================================================ */

/* ── Accessibility ───────────────────────────────────────── */
.tgc-page .skip-link {
  position: absolute !important;
  top: -40px !important;
  left: 0 !important;
  background: var(--navy) !important;
  color: var(--white) !important;
  padding: 8px 16px !important;
  z-index: 9999 !important;
  font-size: 14px !important;
  transition: top 0.2s !important;
}
.tgc-page .skip-link:focus {
  top: 0 !important;
}

/* ── Text / layout utilities ─────────────────────────────── */
.tgc-page .items-center {
  align-items: center !important;
}
.tgc-page .text-center {
  text-align: center !important;
}
.tgc-page .hero-content {
  flex: 1 !important;
}
.tgc-page .h3-gold {
  font-size: clamp(16px, 1.6vw, 20px) !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
}
.tgc-page .urgent {
  color: #c0392b !important;
  font-weight: 700 !important;
}
.tgc-page .arrow {
  display: block !important;
  color: var(--gold) !important;
  font-size: 18px !important;
  margin-top: 16px !important;
}
.tgc-page .tag {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: var(--mist) !important;
  color: var(--slate) !important;
}
.tgc-page .featured {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px rgba(211, 169, 17, 0.3) !important;
}

/* ── Detail list ─────────────────────────────────────────── */
.tgc-page .cost-body h3 {
  color: var(--white) !important;
  margin-bottom: 0 !important;
  transition: color 0.2s !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
}

.tgc-page .cost-body h3::after {
  content: "+" !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  font-family: sans-serif !important;
  line-height: 1 !important;
  color: var(--gold) !important;
  opacity: 0.5 !important;
  flex-shrink: 0 !important;
  transition:
    transform 0.6s ease,
    opacity 0.4s !important;
}

.tgc-page .cost-item:hover .cost-body h3 {
  color: var(--gold) !important;
}

.tgc-page .cost-item:hover .cost-body h3::after {
  transform: rotate(45deg) !important;
  opacity: 1 !important;
}

.tgc-page .cost-body p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.65 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  transition:
    max-height 0.7s ease,
    opacity 0.5s ease 0.1s,
    margin-top 0.5s ease !important;
}

.tgc-page .cost-item:hover .cost-body p {
  max-height: 200px !important;
  opacity: 1 !important;
  margin-top: 8px !important;
}
.tgc-page .cost-compare-audit {
  background: rgba(211, 169, 17, 0.15) !important;
  border: 1px solid rgba(211, 169, 17, 0.3) !important;
}
.tgc-page .cost-compare-audit .cost-compare-label {
  color: var(--gold) !important;
}
.tgc-page .cost-compare-audit .cost-compare-price {
  color: var(--gold) !important;
}
.tgc-page .cost-compare-label {
  font-family: "DM Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--muted) !important;
}
.tgc-page .cost-compare-price {
  font-family: "Sora", sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--white) !important;
  line-height: 1.2 !important;
}
.tgc-page .cost-compare-risk {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.tgc-page .cost-compare-sub {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  line-height: 1.4 !important;
  text-align: center !important;
}
.tgc-page .cost-compare-vs {
  font-family: "Sora", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.3) !important;
}
.tgc-page .cost-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 40px !important;
}
@media (max-width: 768px) {
  .tgc-page .cost-grid {
    display: none !important;
  }
}
.tgc-page .cost-icon {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  background: rgba(211, 169, 17, 0.15) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gold) !important;
  transition: background 0.2s !important;
}
.tgc-page .cost-item:hover .cost-icon {
  background: rgba(211, 169, 17, 0.28) !important;
}
.tgc-page .cost-item {
  padding: 28px 24px !important;
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: background 0.2s !important;
  cursor: pointer !important;
}
.tgc-page .cost-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.tgc-page .price-sel-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.tgc-page .price-sel-label {
  display: block !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 10px !important;
}
.tgc-page .price-selector {
  margin-top: 48px !important;
}
.tgc-page .price-selector-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  margin-bottom: 32px !important;
}
.tgc-page .price-selector-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  margin-bottom: 32px !important;
}
.tgc-page .psel-btn {
  all: unset !important;
  cursor: pointer !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 18px !important;
  border-radius: 100px !important;
  border: 1.5px solid var(--mist) !important;
  color: var(--slate) !important;
  background: var(--white) !important;
  transition: all 0.18s !important;
  box-sizing: border-box !important;
}
.tgc-page .psel-btn:hover {
  border-color: var(--gold) !important;
  color: var(--navy) !important;
}
.tgc-page .psel-btn.active {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
}
.tgc-page .price-table-wrap {
  background: var(--white) !important;
  border: 1px solid var(--mist) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}
.tgc-page .price-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: "DM Sans", sans-serif !important;
}
.tgc-page .price-table thead tr {
  background: var(--navy) !important;
}
.tgc-page .price-table th {
  padding: 14px 24px !important;
  text-align: left !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.tgc-page .price-table td {
  padding: 14px 24px !important;
  font-size: 14px !important;
  border-bottom: 1px solid var(--mist) !important;
}
.tgc-page .price-table tbody tr:last-child td {
  border-bottom: none !important;
}
.tgc-page .price-table tbody tr:hover {
  background: var(--parchment) !important;
}
.tgc-page .price-table .td-tier {
  font-weight: 600 !important;
  color: var(--navy) !important;
}
.tgc-page .price-table .td-price {
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--navy) !important;
}
.tgc-page .price-table .td-price span {
  font-size: 12px !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  margin-left: 4px !important;
}
.tgc-page .price-table tbody tr.highlight-row {
  background: rgba(211, 169, 17, 0.06) !important;
}
.tgc-page .price-table tbody tr.highlight-row .td-price {
  color: var(--gold) !important;
}
.tgc-page .price-table-note {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 24px !important;
  background: var(--parchment) !important;
  border-top: 1px solid var(--mist) !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.tgc-page .price-table-note p {
  font-size: 13px !important;
  color: var(--slate) !important;
  font-weight: 500 !important;
}
.tgc-page .price-table-note {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 24px !important;
  background: var(--parchment) !important;
  border-top: 1px solid var(--mist) !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.tgc-page .price-table-note p {
  font-size: 13px !important;
  color: var(--slate) !important;
  font-weight: 500 !important;
}
.tgc-page .price-table-wrap {
  background: var(--white) !important;
  border: 1px solid var(--mist) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}
.tgc-page .price-vol-icon {
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  color: var(--gold) !important;
}
.tgc-page .price-volume-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 16px !important;
  padding: 14px 18px !important;
  background: var(--parchment) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--mist) !important;
}
.tgc-page .price-volume-note p {
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
}
.tgc-page .price-volume-note a {
  color: var(--gold) !important;
  text-decoration: none !important;
}
/* ── Quote builder (pricing page) ─────────────────────────────────── */
.tgc-page .qb-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  margin-top: 40px !important;
}
.tgc-page .qb-header {
  display: grid !important;
  grid-template-columns: 190px 150px 150px 82px 82px 108px 118px 36px !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.4) !important;
  align-items: center !important;
  min-width: 940px !important;
}
.tgc-page .qb-lines-wrap {
  overflow-x: auto !important;
}
.tgc-page .qb-line {
  display: grid !important;
  grid-template-columns: 190px 150px 150px 82px 82px 108px 118px 36px !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  align-items: center !important;
  min-width: 940px !important;
}
.tgc-page .qb-line:last-child {
  border-bottom: none !important;
}
.tgc-page .qb-sel,
.tgc-page .qb-num {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  padding: 8px 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.tgc-page .qb-sel:focus,
.tgc-page .qb-num:focus {
  outline: none !important;
  border-color: var(--gold) !important;
}
.tgc-page .qb-sel option {
  background: #0a1628 !important;
  color: #fff !important;
}
.tgc-page .qb-cat-hidden {
  visibility: hidden !important;
  pointer-events: none !important;
}
.tgc-page .qb-rate-val {
  font-family: "Sora", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-align: right !important;
}
.tgc-page .qb-ltotal-val {
  font-family: "Sora", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  text-align: right !important;
}
.tgc-page .qb-rm-btn {
  all: unset !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 18px !important;
  line-height: 28px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition:
    background 0.15s,
    color 0.15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.tgc-page .qb-rm-btn:hover {
  background: rgba(255, 80, 80, 0.2) !important;
  color: #ff6868 !important;
}
.tgc-page .qb-add-btn {
  display: block !important;
  width: 100% !important;
  padding: 14px 20px !important;
  background: none !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: var(--gold) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.15s !important;
}
.tgc-page .qb-add-btn:hover {
  background: rgba(211, 169, 17, 0.07) !important;
}
.tgc-page .qb-total-panel {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 32px !important;
  margin-top: 28px !important;
  padding: 32px 40px !important;
  background: rgba(211, 169, 17, 0.08) !important;
  border: 1px solid rgba(211, 169, 17, 0.2) !important;
  border-radius: var(--radius-xl) !important;
}
.tgc-page .qb-total-left {
  flex: 1 !important;
}
.tgc-page .qb-total-label {
  font-family: "DM Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255, 255, 255, 0.4) !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.tgc-page .qb-total-note {
  font-family: "DM Sans", sans-serif !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.28) !important;
  max-width: 420px !important;
  display: block !important;
  line-height: 1.6 !important;
}
.tgc-page .qb-total-price {
  font-family: "Sora", sans-serif !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  display: block !important;
  text-align: right !important;
}
.tgc-page .qb-total-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  flex-shrink: 0 !important;
}
/* ── Service rate cards (pricing page) ────────────────────────────── */
.tgc-page .rc-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}
.tgc-page .rc-card {
  background: #fff !important;
  border-radius: var(--radius-xl) !important;
  padding: 36px 36px 32px !important;
  display: flex !important;
  flex-direction: column !important;
}
.tgc-page .rc-service {
  font-family: "DM Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--gold) !important;
  margin-bottom: 10px !important;
  display: block !important;
}
.tgc-page .rc-title {
  font-family: "Sora", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 0 20px !important;
}
.tgc-page .rc-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}
.tgc-page .rc-from {
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  color: rgba(10, 22, 40, 0.4) !important;
}
.tgc-page .rc-price {
  font-family: "Sora", sans-serif !important;
  font-size: 44px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
}
.tgc-page .rc-unit {
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  color: rgba(10, 22, 40, 0.4) !important;
  margin: 6px 0 0 !important;
  display: block !important;
}
.tgc-page .rc-divider {
  border: none !important;
  border-top: 1px solid var(--mist) !important;
  margin: 24px 0 !important;
}
.tgc-page .rc-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
  flex: 1 !important;
}
.tgc-page .rc-feature {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  color: var(--navy-mid) !important;
  line-height: 1.5 !important;
}
.tgc-page .rc-feature::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  margin-top: 6px !important;
  flex-shrink: 0 !important;
}
.tgc-page .rc-cta {
  display: inline-block !important;
  margin-top: 24px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  text-decoration: none !important;
}
.tgc-page .rc-cta:hover {
  text-decoration: underline !important;
}
.tgc-page .rc-note {
  text-align: center !important;
  margin-top: 32px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  color: rgba(10, 22, 40, 0.45) !important;
  line-height: 1.6 !important;
}
@media (max-width: 900px) {
  .tgc-page .rc-grid {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .rc-price {
    font-size: 36px !important;
  }
  .tgc-page .qb-header {
    display: none !important;
  }
  .tgc-page .qb-line {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 20px !important;
    min-width: unset !important;
  }
  .tgc-page .qb-sel {
    flex: 1 1 140px !important;
    width: auto !important;
  }
  .tgc-page .qb-num {
    flex: 0 0 76px !important;
    width: 76px !important;
  }
  .tgc-page .qb-cat-hidden {
    display: none !important;
  }
  .tgc-page .qb-rate-val,
  .tgc-page .qb-ltotal-val {
    flex: 1 1 auto !important;
    text-align: left !important;
  }
  .tgc-page .qb-rm-btn {
    margin-left: auto !important;
  }
  .tgc-page .qb-total-panel {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 24px 28px !important;
  }
  .tgc-page .qb-total-right {
    align-items: flex-start !important;
  }
  .tgc-page .qb-total-price {
    font-size: 38px !important;
    text-align: left !important;
  }
}
.tgc-page .receive-list {
  margin-top: 48px !important;
}
.tgc-page .receive-row {
  display: grid !important;
  grid-template-columns: 80px 1fr 1fr !important;
  gap: 0 48px !important;
  padding: 36px 0 !important;
  border-bottom: 1px solid var(--mist) !important;
  align-items: start !important;
}
.tgc-page .receive-row:first-child {
  border-top: 1px solid var(--mist) !important;
}
.tgc-page .receive-row-num {
  font-family: "Sora", sans-serif !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  opacity: 0.22 !important;
  padding-top: 4px !important;
}
.tgc-page .receive-row-left h3 {
  font-family: "Sora", sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.02em !important;
}
.tgc-page .receive-row-left .tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  background: rgba(211, 169, 17, 0.12) !important;
  border: 1px solid rgba(211, 169, 17, 0.25) !important;
  border-radius: 100px !important;
  margin-bottom: 14px !important;
}
.tgc-page .receive-row-left .tag span {
  font-family: "DM Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.tgc-page .receive-row-right p {
  font-size: 15px !important;
  color: var(--slate) !important;
  line-height: 1.72 !important;
}
.tgc-page .receive-row-right .detail-list {
  margin-top: 16px !important;
}
.tgc-page .receive-row-right .detail-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
  margin-bottom: 8px !important;
}
.tgc-page .receive-row-right .detail-item::before {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  flex-shrink: 0 !important;
  margin-top: 6px !important;
}
.tgc-page .receive-row {
  grid-template-columns: 60px 1fr 1fr !important;
  gap: 0 32px !important;
}
.tgc-page .receive-row {
  grid-template-columns: 60px 1fr !important;
}
.tgc-page .receive-row-right {
  grid-column: 2 / 3 !important;
  margin-top: 12px !important;
}
.tgc-page .receive-row-left h3 {
  font-family: "Sora", sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.02em !important;
}
.tgc-page .receive-row-left .tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  background: rgba(211, 169, 17, 0.12) !important;
  border: 1px solid rgba(211, 169, 17, 0.25) !important;
  border-radius: 100px !important;
  margin-bottom: 14px !important;
}
.tgc-page .receive-row-left .tag span {
  font-family: "DM Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.tgc-page .receive-row-num {
  font-family: "Sora", sans-serif !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  opacity: 0.22 !important;
  padding-top: 4px !important;
}
.tgc-page .receive-row-right p {
  font-size: 15px !important;
  color: var(--slate) !important;
  line-height: 1.72 !important;
}
.tgc-page .receive-row-right .detail-list {
  margin-top: 16px !important;
}
.tgc-page .receive-row-right .detail-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
  margin-bottom: 8px !important;
}
.tgc-page .receive-row-right .detail-item::before {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  flex-shrink: 0 !important;
  margin-top: 6px !important;
}
.tgc-page .receive-row-right {
  grid-column: 2 / 3 !important;
  margin-top: 12px !important;
}
.tgc-page .status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}
.tgc-page .status-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.tgc-page .status-dot-pass {
  background: var(--status-pass) !important;
}
.tgc-page .status-dot-minor {
  background: var(--status-minor) !important;
}
.tgc-page .status-dot-flag {
  background: var(--status-flag) !important;
}
.tgc-page .status-dot-gap {
  background: var(--status-gap) !important;
}
.tgc-page .status-dot-major {
  background: var(--status-major) !important;
}
.tgc-page .status-minor {
  background: var(--status-minor-bg) !important;
  color: var(--status-minor) !important;
}
.tgc-page .status-flag {
  background: var(--status-flag-bg) !important;
  color: var(--status-flag) !important;
}
.tgc-page .status-major {
  background: var(--status-major-bg) !important;
  color: var(--status-major) !important;
}
.tgc-page .status-gap {
  background: var(--status-gap-bg) !important;
  color: var(--status-gap) !important;
}
.tgc-page .status-pass {
  background: var(--status-pass-bg) !important;
  color: var(--status-pass) !important;
}
.tgc-page .fail-body h4 {
  color: var(--navy) !important;
  margin-bottom: 4px !important;
}
.tgc-page .fail-body p {
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
}
.tgc-page .fail-item {
  display: flex !important;
  gap: 20px !important;
  padding: 22px 24px !important;
  border-radius: var(--radius-md) !important;
  background: var(--white) !important;
  border: 1px solid var(--mist) !important;
  margin-bottom: 12px !important;
  transition: border-color 0.2s !important;
}
.tgc-page .fail-item:hover {
  border-color: rgba(211, 169, 17, 0.4) !important;
  background: rgba(248, 246, 240, 0.7) !important;
}
.tgc-page .fail-list {
  margin-top: 48px !important;
}
.tgc-page .fail-num {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(211, 169, 17, 0.15) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Sora", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  margin-top: 2px !important;
}
.tgc-page .deliv-card {
  background: var(--navy) !important;
  border-radius: var(--radius-lg) !important;
  padding: 36px !important;
  position: relative !important;
  overflow: hidden !important;
}
.tgc-page .deliv-card::after {
  content: "" !important;
  position: absolute !important;
  bottom: -40px !important;
  right: -40px !important;
  width: 160px !important;
  height: 160px !important;
  border-radius: 50% !important;
  background: radial-gradient(
    circle,
    rgba(211, 169, 17, 0.12) 0%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
}
.tgc-page .deliv-card h3 {
  color: var(--white) !important;
  margin-bottom: 10px !important;
}
.tgc-page .deliv-card p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  line-height: 1.65 !important;
}
.tgc-page .deliv-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin-top: 48px !important;
}
.tgc-page .deliv-num {
  font-family: "Sora", sans-serif !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  display: block !important;
  opacity: 0.3 !important;
}
.tgc-page .market-card {
  background: var(--white) !important;
  border: 1px solid var(--mist) !important;
  border-radius: var(--radius-md) !important;
  padding: 24px !important;
}
.tgc-page .market-card h3 {
  font-size: 16px !important;
  color: var(--navy) !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--gold) !important;
  display: inline-block !important;
}
.tgc-page .market-card ul {
  margin-top: 14px !important;
}
.tgc-page .market-card li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}
.tgc-page .market-card li::before {
  content: "✓" !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
.tgc-page .market-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-top: 48px !important;
}
.tgc-page .check-grid-5 {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 2px !important;
  background: var(--mist) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--mist) !important;
  margin-top: 48px !important;
}
.tgc-page .check-grid-5 .ci-top {
  grid-column: span 2 !important;
}
.tgc-page .check-grid-5 .ci-bot {
  grid-column: span 3 !important;
}
.tgc-page .risk-compare {
  text-align: center !important;
  padding: 40px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-xl) !important;
}
.tgc-page .risk-compare-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
  margin-bottom: 28px !important;
}
.tgc-page .risk-compare-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 20px 28px !important;
  border-radius: var(--radius-md) !important;
  min-width: 180px !important;
}
/* ── Detail sub-list (inside deliverables rows) ─────────── */
.tgc-page .detail-list {
  margin-top: 16px !important;
}
.tgc-page .detail-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
  margin-bottom: 8px !important;
}
.tgc-page .detail-item::before {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  flex-shrink: 0 !important;
  margin-top: 6px !important;
}

/* ── Sample actions panel (expedited audit page) ─────────── */
.tgc-page .sample-actions {
  border-top: 1px solid var(--border-dk) !important;
  padding: 0 !important;
}
.tgc-page .sample-actions-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 28px !important;
  background: rgba(211, 169, 17, 0.1) !important;
  border-bottom: 1px solid var(--border-dk) !important;
  font-family: "Sora", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
}
.tgc-page .sample-action-row {
  display: flex !important;
  gap: 16px !important;
  padding: 16px 28px !important;
  border-bottom: 1px solid var(--border-dk) !important;
  align-items: flex-start !important;
}
.tgc-page .sample-action-row:last-child {
  border-bottom: none !important;
}
.tgc-page .sample-action-num {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: rgba(211, 169, 17, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Sora", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
}
.tgc-page .sample-action-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.tgc-page .sample-action-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  line-height: 1.4 !important;
}
.tgc-page .sample-action-note {
  font-size: 12px !important;
  color: var(--muted) !important;
  line-height: 1.5 !important;
}
.tgc-page .sample-actions-blur {
  filter: blur(7px) !important;
  user-select: none !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 33 — Sample Audit Report: table rows & product bar
   (expedited-audit.html — sub-components of .sample-panel)
   ══════════════════════════════════════════════════════════════ */

/* Legend */
.tgc-page .sample-legend {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* Table rows */
.tgc-page .sample-row {
  display: grid !important;
  grid-template-columns: 1fr 180px 1fr !important;
  border-bottom: 1px solid var(--border-dk) !important;
}
.tgc-page .sample-row:last-child {
  border-bottom: none !important;
}

.tgc-page .sample-row-area {
  padding: 16px 28px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: flex-start !important;
}
.tgc-page .sample-row-status {
  padding: 16px 20px !important;
  border-left: 1px solid var(--border-dk) !important;
  border-right: 1px solid var(--border-dk) !important;
  display: flex !important;
  align-items: center !important;
}
.tgc-page .sample-row-finding {
  padding: 16px 28px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.5 !important;
}
.tgc-page .sample-row-critical {
  background: rgba(160, 48, 32, 0.05) !important;
}
.tgc-page .sample-row-critical:hover {
  background: rgba(160, 48, 32, 0.08) !important;
}

/* Blur / lead gate levels */
.tgc-page .sample-row-blur-light {
  filter: blur(2px) !important;
  user-select: none !important;
  pointer-events: none !important;
}
.tgc-page .sample-row-blur-medium {
  filter: blur(4px) !important;
  user-select: none !important;
  pointer-events: none !important;
}
.tgc-page .sample-row-blur-heavy {
  filter: blur(6px) !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* Area name + priority tag (inside .sample-row-area) */
.tgc-page .sample-area-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--white) !important;
}
.tgc-page .sample-priority-tag {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--status-gap) !important;
  background: var(--status-gap-bg) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Product bar (4-column metadata strip at top of sample panel) */
.tgc-page .sample-product-bar {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--border-dk) !important;
}
.tgc-page .sample-product-field {
  padding: 14px 24px !important;
  border-right: 1px solid var(--border-dk) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.tgc-page .sample-product-field:last-child {
  border-right: none !important;
}
.tgc-page .sample-product-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.tgc-page .sample-product-val {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--white) !important;
}

/* Responsive — sample panel */
@media (max-width: 1024px) {
  .tgc-page .sample-row {
    grid-template-columns: 1fr 140px 1fr !important;
  }
  .tgc-page .sample-product-bar {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tgc-page .sample-product-field:nth-child(2) {
    border-right: none !important;
  }
}
@media (max-width: 768px) {
  .tgc-page .sample-row {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .sample-row-status {
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--border-dk) !important;
  }
  .tgc-page .sample-row-finding {
    border-top: 1px solid var(--border-dk) !important;
  }
  .tgc-page .sample-product-bar {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .sample-product-field {
    border-right: none !important;
    border-bottom: 1px solid var(--border-dk) !important;
  }
}

/* ══════════════════════════════════════════════════════
   INDUSTRY PAGE COMPONENTS — shared across all verticals
   Electronics, Cosmetics, Food & Beverage, etc.
   ══════════════════════════════════════════════════════ */

/* ── Directive pills (industry hero badge strip) ─────── */
.tgc-page .directive-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 20px !important;
  margin-bottom: 32px !important;
}
.tgc-page .d-pill {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(211, 169, 17, 0.1) !important;
  border: 1px solid rgba(211, 169, 17, 0.25) !important;
  border-radius: 100px !important;
  padding: 5px 12px !important;
  font-family: "Sora", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  letter-spacing: 0.04em !important;
}
.tgc-page .d-pill-dark {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 100px !important;
  padding: 5px 12px !important;
  font-family: "Sora", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  letter-spacing: 0.04em !important;
}

/* ── Key deadlines timeline ──────────────────────────── */
.tgc-page .deadline-list {
  display: flex !important;
  flex-direction: column !important;
}
.tgc-page .deadline-item {
  display: flex !important;
  gap: 20px !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  align-items: flex-start !important;
}
.tgc-page .deadline-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.tgc-page .deadline-date {
  font-family: "Sora", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  min-width: 120px !important;
  padding-top: 2px !important;
  flex-shrink: 0 !important;
}
.tgc-page .deadline-content h4 {
  font-family: "Sora", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  margin: 0 0 4px 0 !important;
}
.tgc-page .deadline-content p {
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.tgc-page .deadline-content a {
  color: var(--gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ── Comparison / regulation table ──────────────────── */
.tgc-page .table-wrap {
  overflow-x: auto !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
}
.tgc-page .reg-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
  min-width: 700px !important;
}
.tgc-page .reg-table thead tr {
  background: var(--navy) !important;
}
.tgc-page .reg-table thead th {
  font-family: "Sora", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  padding: 14px 18px !important;
  text-align: left !important;
  letter-spacing: 0.04em !important;
  border: none !important;
}
.tgc-page .reg-table tbody tr:nth-child(odd) {
  background: var(--white) !important;
}
.tgc-page .reg-table tbody tr:nth-child(even) {
  background: var(--parchment) !important;
}
.tgc-page .reg-table tbody td {
  padding: 14px 18px !important;
  color: var(--slate) !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: top !important;
  line-height: 1.55 !important;
}
.tgc-page .reg-table tbody td:first-child {
  font-weight: 600 !important;
  color: var(--navy) !important;
}

/* ── Responsive — industry page components ───────────── */
@media (max-width: 768px) {
  .tgc-page .deadline-item {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .tgc-page .deadline-date {
    min-width: unset !important;
  }
}

/* ================================================================
   SITE HEADER  (#tgc-site-header)
   Loaded via fetch('../partials/header.html') on every page.
   Styles live here so they are guaranteed present before render.
================================================================ */
#tgc-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background: #0a1826;
  border-bottom: 1px solid #1e3a52;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}
#tgc-site-header * {
  box-sizing: border-box;
}

/* Inner container */
.tgc-hdr-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(12px, 4vw, 48px);
  height: 80px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Logo */
.tgc-hdr-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 24px;
  align-self: center;
}
.tgc-hdr-logo-text {
  font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

/* Desktop nav */
.tgc-hdr-nav {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 0;
  flex: 1;
  min-width: 0;
}

.tgc-hdr-item {
  position: relative;
  flex-shrink: 0;
}

.tgc-hdr-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #7a909f;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.15s,
    background 0.15s;
  line-height: 1;
}
.tgc-hdr-link:hover,
.tgc-hdr-item:hover > .tgc-hdr-link {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}
.tgc-hdr-link.tgc-hdr-active {
  color: #d3a911 !important;
}

/* Dropdown chevron */
.tgc-hdr-chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  opacity: 0.45;
  transition:
    transform 0.2s,
    opacity 0.2s;
}
.tgc-hdr-item:hover > .tgc-hdr-link .tgc-hdr-chevron {
  transform: rotate(180deg);
  opacity: 0.85;
}

/* Dropdown panel */
.tgc-hdr-drop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: #0f2236;
  border: 1px solid #1e3a52;
  border-radius: 10px;
  padding: 8px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.3);
}
.tgc-hdr-drop::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.tgc-hdr-item:hover > .tgc-hdr-drop {
  display: block;
}

.tgc-hdr-drop-label {
  display: block;
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #d3a911;
  font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
}
.tgc-hdr-drop-link {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #7a909f;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition:
    color 0.12s,
    background 0.12s;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}
.tgc-hdr-drop-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}
.tgc-hdr-drop-link.tgc-hdr-active {
  color: #d3a911 !important;
}
.tgc-hdr-divider {
  height: 1px;
  background: #1e3a52;
  margin: 4px 4px;
}

/* CTA button */
.tgc-hdr-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #d3a911;
  color: #0a1826 !important;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 7px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 12px;
  transition:
    background 0.15s,
    transform 0.1s;
}
.tgc-hdr-cta:hover {
  background: #e8be2a;
  transform: translateY(-1px);
}

/* Hamburger */
.tgc-hdr-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.tgc-hdr-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #7a909f;
  border-radius: 2px;
  transition:
    transform 0.2s,
    opacity 0.15s,
    background 0.15s;
}
.tgc-hdr-burger:hover span {
  background: #fff;
}
.tgc-hdr-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.tgc-hdr-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.tgc-hdr-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu */
.tgc-hdr-mobile {
  display: none;
  background: #0f2236;
  border-top: 1px solid #1e3a52;
  padding: 20px clamp(20px, 3vw, 40px) 28px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.tgc-hdr-mobile.tgc-mob-open {
  display: block !important;
}

.tgc-mob-section {
  margin-bottom: 22px;
}
.tgc-mob-section:last-child {
  margin-bottom: 0;
}
.tgc-mob-heading {
  font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #d3a911;
  margin: 0 0 8px;
  padding: 0 2px;
  display: block;
}
.tgc-mob-link {
  display: block;
  padding: 10px 2px;
  font-size: 14px;
  font-weight: 500;
  color: #7a909f;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: color 0.12s;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}
.tgc-mob-link:last-child {
  border-bottom: none;
}
.tgc-mob-link:hover,
.tgc-mob-link.tgc-hdr-active {
  color: #ffffff;
}
.tgc-mob-cta {
  display: block;
  margin-top: 20px;
  padding: 12px 20px;
  background: #d3a911;
  color: #0a1826 !important;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  text-align: center;
}

/* Breakpoints */
@media (max-width: 900px) {
  .tgc-hdr-nav {
    display: none;
  }
  .tgc-hdr-cta {
    display: none;
  }
  .tgc-hdr-burger {
    display: flex;
  }
}
@media (min-width: 901px) {
  .tgc-hdr-mobile {
    display: none !important;
  }
}

/* ── Footer link colour fix ──────────────────────────────────────────────────
   .tgc-page a { color: inherit !important } would override inline styles on
   footer links when the footer sits inside .tgc-page. The ID selector wins
   the specificity battle even against !important on the class rule.          */
#tgc-site-footer a {
  color: #7a909f !important;
  text-decoration: none !important;
}
#tgc-site-footer a:hover {
  color: #ffffff !important;
}
/* Footer column headings (they're <p> tags, not links, but guard them too) */
#tgc-site-footer p {
  color: inherit;
}

/* ── Logo image ──────────────────────────────────────────────────────────────
   Replaces the placeholder SVG + text in the site header.                    */
.tgc-hdr-logo-img {
  height: auto;
  width: 200px;
  border-radius: 6px;
  display: block;
  object-fit: contain;
}

/* ── Enforcement Facts Row ───────────────────────────────────────────────────
   3-column row of large enforcement numbers on a white panel.                */
.tgc-page .enforce-facts {
  display: flex !important;
  align-items: stretch !important;
  background: #ffffff !important;
  border-radius: var(--radius-md, 12px) !important;
  margin-bottom: 20px !important;
}
.tgc-page .enforce-fact {
  flex: 1 !important;
  padding: 36px 28px !important;
  text-align: center !important;
}
.tgc-page .enforce-num {
  display: block !important;
  font-family: "Sora", sans-serif !important;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--navy, #0f1c3b) !important;
  margin-bottom: 12px !important;
  line-height: 1 !important;
}
.tgc-page .enforce-label {
  font-size: 13px !important;
  color: #556677 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.tgc-page .enforce-rule {
  flex-shrink: 0 !important;
  width: 1px !important;
  background: #e8e3da !important;
  margin: 28px 0 !important;
}

/* ── Case Study Teaser ───────────────────────────────────────────────────────
   Full-width dark clickable banner linking to a case study blog post.        */
.tgc-page .case-teaser {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  background: var(--navy, #0f1c3b) !important;
  border-radius: var(--radius-md, 12px) !important;
  padding: 28px 36px !important;
  text-decoration: none !important;
  transition:
    background 0.2s,
    opacity 0.6s ease,
    transform 0.6s ease !important;
}
.tgc-page .case-teaser:hover {
  background: #162447 !important;
}
.tgc-page .case-teaser-tag {
  flex-shrink: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gold, #c8a96e) !important;
  background: rgba(200, 169, 110, 0.12) !important;
  border: 1px solid rgba(200, 169, 110, 0.25) !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  white-space: nowrap !important;
}
.tgc-page .case-teaser-body {
  flex: 1 !important;
  min-width: 0 !important;
}
.tgc-page .case-teaser-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 6px !important;
  line-height: 1.35 !important;
}
.tgc-page .case-teaser-sub {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.tgc-page .case-teaser-arrow {
  flex-shrink: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gold, #c8a96e) !important;
  white-space: nowrap !important;
}
@media (max-width: 700px) {
  .tgc-page .enforce-facts {
    flex-direction: column !important;
  }
  .tgc-page .enforce-rule {
    width: auto !important;
    height: 1px !important;
    margin: 0 28px !important;
  }
  .tgc-page .case-teaser {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .tgc-page .case-teaser-arrow {
    display: none !important;
  }
}

/* ── Pain Point Tiles ────────────────────────────────────────────────────────
   2-column mosaic grid for "Common Pain Points" sections. Horizontal tile
   layout: icon square left, number + heading + consequence tag right.
   Tight 2px gap on a grey background creates a structured infographic feel. */

.tgc-page .pain-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3px !important;
}
.tgc-page .pain-tile {
  background: #ffffff !important;
  padding: 28px 24px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 18px !important;
  transition:
    background 0.2s,
    opacity 0.6s ease,
    transform 0.6s ease !important;
}
.tgc-page .pain-tile:hover {
  background: #fdfcfa !important;
}

/* Square icon container */
.tgc-page .pain-icon {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  background: rgba(200, 169, 110, 0.1) !important;
  border-radius: var(--radius-sm, 8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gold, #c8a96e) !important;
}
.tgc-page .pain-icon svg {
  width: 22px !important;
  height: 22px !important;
}

/* Text column */
.tgc-page .pain-body {
  flex: 1 !important;
  min-width: 0 !important;
}
.tgc-page .pain-num {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gold, #c8a96e) !important;
  margin-bottom: 6px !important;
}
.tgc-page .pain-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--navy, #0f1c3b) !important;
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
}
.tgc-page .pain-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #7a8899 !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
}
/* Small arrow prefix on the tag */
.tgc-page .pain-tag::before {
  content: "→" !important;
  color: var(--gold, #c8a96e) !important;
  font-size: 12px !important;
}

@media (max-width: 640px) {
  .tgc-page .pain-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Why Pillars ─────────────────────────────────────────────────────────────
   Clean 3-column infographic for "Why TGC" sections on dark industry pages.  */
.tgc-page .why-pillars {
  display: flex !important;
  align-items: stretch !important;
}

.tgc-page .why-pillar {
  flex: 1 !important;
  text-align: center !important;
  padding: 48px 36px !important;
  position: relative !important;
}
/* Large decorative ghost number sits behind icon for depth */
.tgc-page .why-num {
  display: block !important;
  font-size: 88px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  color: rgba(200, 169, 110, 0.09) !important;
  position: absolute !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  user-select: none !important;
  white-space: nowrap !important;
}
/* Icon ring */
.tgc-page .why-icon {
  width: 68px !important;
  height: 68px !important;
  background: rgba(200, 169, 110, 0.12) !important;
  border: 1px solid rgba(200, 169, 110, 0.25) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 24px !important;
  color: var(--gold, #c8a96e) !important;
  position: relative !important;
  z-index: 1 !important;
}
.tgc-page .why-icon svg {
  width: 26px !important;
  height: 26px !important;
}
/* Heading */
.tgc-page .why-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 14px !important;
  line-height: 1.3 !important;
  position: relative !important;
  z-index: 1 !important;
}
/* Short gold tag underneath */
.tgc-page .why-sub {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--gold, #c8a96e) !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
/* Vertical divider rule between pillars */
.tgc-page .why-rule {
  flex-shrink: 0 !important;
  width: 1px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  margin: 40px 0 !important;
}
@media (max-width: 640px) {
  .tgc-page .why-pillars {
    flex-direction: column !important;
  }
  .tgc-page .why-rule {
    width: auto !important;
    height: 1px !important;
    margin: 0 40px !important;
  }
}

/* ── Timeline Carousel ───────────────────────────────────────────────────────
   Horizontal linear timeline with prev/next navigation.                      */

/* Outer wrapper – buttons + scrollable viewport sit side by side */
.tgc-page .tl-carousel {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
.tgc-page .tl-viewport {
  flex: 1 !important;
  overflow: hidden !important;
}

/* Scrolling track */
.tgc-page .tl-track {
  display: flex !important;
  position: relative !important;
  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Individual card column — each item draws its own line segment so the
   continuous line extends into overflow regardless of item count          */
.tgc-page .tl-item {
  flex: 0 0 33.333% !important;
  box-sizing: border-box !important;
  padding: 0 10px !important;
  position: relative !important;
}
.tgc-page .tl-item::before {
  content: "" !important;
  position: absolute !important;
  top: 27px !important; /* centre of 56px node row */
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: #e2dbd0 !important;
  z-index: 0 !important;
}

/* Node row – contains the dot, sits above the card */
.tgc-page .tl-node {
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
}
.tgc-page .tl-dot {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--gold, #c8a96e) !important;
  box-shadow: 0 0 0 5px rgba(200, 169, 110, 0.18) !important;
  display: block !important;
}

/* Card */
.tgc-page .tl-card {
  background: #fff !important;
  border: 1px solid #e8e3da !important;
  border-radius: var(--radius-md, 12px) !important;
  padding: 20px 16px !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s !important;
}
.tgc-page .tl-card:hover {
  border-color: var(--gold, #c8a96e) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07) !important;
}

/* Date */
.tgc-page .tl-date {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #888 !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

/* Region badge */
.tgc-page .tl-region {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 2px 8px !important;
  border-radius: 100px !important;
  margin-bottom: 10px !important;
}
.tgc-page .tl-region-eu {
  background: rgba(0, 60, 140, 0.08) !important;
  color: #003c8c !important;
}
.tgc-page .tl-region-uk {
  background: rgba(180, 0, 0, 0.07) !important;
  color: #b40000 !important;
}
.tgc-page .tl-region-us {
  background: rgba(0, 120, 0, 0.07) !important;
  color: #005a00 !important;
}
.tgc-page .tl-region-kr {
  background: rgba(14, 99, 166, 0.1) !important;
  color: #0e5fa3 !important;
}

/* Card title & body */
.tgc-page .tl-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--navy, #0f1c3b) !important;
  margin: 0 0 8px !important;
  line-height: 1.4 !important;
}
.tgc-page .tl-desc {
  font-size: 13px !important;
  color: #555 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* CTA card (last item) */
.tgc-page .tl-item-cta .tl-dot {
  background: var(--navy, #0f1c3b) !important;
  box-shadow: 0 0 0 5px rgba(15, 28, 59, 0.12) !important;
}
.tgc-page .tl-card-cta {
  background: var(--navy, #0f1c3b) !important;
  border-color: var(--navy, #0f1c3b) !important;
  text-align: center !important;
  padding: 28px 20px !important;
}
.tgc-page .tl-cta-text {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 0 16px !important;
  display: block !important;
}

/* Prev / Next buttons */
.tgc-page .tl-btn {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  background: #fff !important;
  border: 1px solid #e2dbd0 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--navy, #0f1c3b) !important;
  margin-top: 8px !important; /* centres button on dot line (28px dot-centre – 20px half-btn) */
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s !important;
  padding: 0 !important;
}
.tgc-page .tl-btn:hover:not(:disabled) {
  background: var(--navy, #0f1c3b) !important;
  border-color: var(--navy, #0f1c3b) !important;
  color: #fff !important;
}
.tgc-page .tl-btn:disabled {
  opacity: 0.28 !important;
  cursor: not-allowed !important;
}
.tgc-page .tl-prev svg {
  transform: rotate(90deg) !important;
  display: block !important;
}
.tgc-page .tl-next svg {
  transform: rotate(-90deg) !important;
  display: block !important;
}

/* Responsive item widths */
@media (max-width: 820px) {
  .tgc-page .tl-item {
    flex-basis: 50% !important;
  }
}
@media (max-width: 520px) {
  .tgc-page .tl-item {
    flex-basis: 85% !important;
  }
}

/* ── Service Accordion ───────────────────────────────────────────────────────
   Animated accordion for "How TGC Delivers" service rows.                    */
.tgc-page .service-acc-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  gap: 12px !important;
  font-family: inherit !important;
}
.tgc-page .service-acc-trigger > span {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
}
.tgc-page .service-acc-chevron {
  flex-shrink: 0 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  transition: transform 0.35s ease !important;
}
.tgc-page .service-row.open .service-acc-chevron {
  transform: rotate(180deg) !important;
}
.tgc-page .service-acc-body {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.35s ease !important;
}
.tgc-page .service-row.open .service-acc-body {
  max-height: 400px !important;
}

/* ── Blog ────────────────────────────────────────────────────────────────────
   Styles for the blog index and blog post pages.                             */
.tgc-page .blog-hero {
  background: var(--navy);
  padding: 80px 0 64px;
  text-align: center !important;
}
.tgc-page .blog-hero p {
  text-align: center !important;
  margin: 0 auto !important;
  max-width: 600px !important;
  color: #7a909f !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}

/* ============================================================
   BLOG STYLES
   Consolidated from inline <style> blocks across all blog pages.
   Groups: blog-index | shared-post | compliance-dates |
           comparison-table | case-study-stats | chain-of-events
   ============================================================ */

/* ── Blog Index Page ─────────────────────────────────────── */

.blog-hero .ey {
  display: block;
  margin-bottom: 12px;
}

.blog-hero h1 {
  font-family: "Sora", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
}

.blog-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 40px;
}

.blog-filter {
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--mist);
  background: transparent;
  color: var(--slate);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: "DM Sans", sans-serif;
}

.blog-filter.active,
.blog-filter:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #000000;
  font-weight: 1000;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}

.blog-card {
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.blog-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

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

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.blog-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.blog-tag-cosmetics {
  background: #fff3d4;
  color: #a07a00;
}

.blog-tag-chemicals {
  background: #d4eef5;
  color: #005f80;
}

.blog-tag-electronics {
  background: #e8f4f0;
  color: #006b4e;
}

.blog-tag-food {
  background: #f5e8d4;
  color: #7a4400;
}

.blog-tag-supplements {
  background: rgba(16, 140, 120, 0.12);
  color: #0a6b5e;
}

.blog-tag-medical {
  background: #eee4f5;
  color: #5a006b;
}

.blog-tag-case-study {
  background: #fff496;
  color: #696b00;
}

.blog-tag-consumer-goods {
  background: #eaeef5;
  color: #2d4080;
}

.blog-date {
  font-size: 12px;
  color: #7a909f;
}

.blog-card h2 {
  font-family: "Sora", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.35;
}

.blog-card p {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.6;
  margin: 0 0 20px;
  flex: 1;
}

.blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  margin-top: auto;
}

.blog-card-link:hover {
  color: var(--navy);
}

.blog-read-time {
  font-size: 12px;
  color: #7a909f;
  margin-left: auto;
}

/* ── Blog Post — Shared Layout ───────────────────────────── */

.blog-post-hero {
  background: var(--navy);
  padding: 72px 0 56px;
}

.blog-post-hero .wrap {
  max-width: 760px;
}

.blog-post-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.blog-post-hero h1 {
  font-family: "Sora", sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 20px;
  line-height: 1.2;
}

.blog-post-hero .lead {
  color: #7a909f;
  font-size: 18px;
  line-height: 1.6;
  max-width: 680px;
  margin: 0;
}

.blog-meta-item {
  font-size: 13px;
  color: #7a909f;
}

.blog-related-industry {
  background: #f5f7fa;
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  margin: 40px 0;
}

.blog-related-industry p {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--slate);
}

.blog-related-industry a {
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  font-size: 14px;
}

.article-body h2 {
  font-family: "Sora", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  margin: 48px 0 16px;
}

.article-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin: 32px 0 12px;
}

.article-body p {
  font-size: 15px;
  color: #334;
  line-height: 1.7;
  margin: 0 0 18px;
}

.article-body a {
  color: var(--gold);
}

/* ── Blog Post — Reg-Update Blocks, Status Badges & CTA ─── */

.reg-update-block {
  border-left: 3px solid var(--gold);
  padding: 18px 0 18px 20px;
  margin-bottom: 28px;
}

.reg-update-block p {
  font-size: 15px;
  color: #334;
  line-height: 1.7;
  margin: 0 0 10px;
}

.cta-inline {
  background: var(--navy);
  border-radius: 12px;
  padding: 32px;
  margin: 48px 0 64px;
  text-align: center;
}

.cta-inline h3 {
  font-family: "Sora", sans-serif;
  color: #ffffff;
  font-size: 20px;
  margin: 0 0 12px;
}

.cta-inline p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 20px;
  font-size: 15px;
}

.cta-inline .btn {
  margin: 4px;
}

.reg-status-active {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(16, 140, 120, 0.15);
  color: #0a7566;
  margin-bottom: 8px;
}

.reg-status-urgent {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(200, 50, 50, 0.12);
  color: #c44;
  margin-bottom: 8px;
}

.reg-status-monitor {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(211, 169, 17, 0.15);
  color: #b8900e;
  margin-bottom: 8px;
}

.reg-update-block h4 {
  font-family: "Sora", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 8px 0;
}

/* ── Blog Post — Comparison Tables ─────────────────────── */

.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.comp-table th {
  background: var(--navy);
  color: #fff;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  padding: 14px 16px;
  text-align: left;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}

.comp-table td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(10, 24, 38, 0.08);
  vertical-align: top;
  color: #334;
  line-height: 1.6;
  font-size: 14px;
}

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

.comp-table tr:nth-child(even) td {
  background: rgba(10, 24, 38, 0.025);
}

.comp-table td:first-child {
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.juris-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.juris-eu {
  background: rgba(0, 82, 204, 0.12);
  color: #0052cc;
}

.juris-uk {
  background: rgba(180, 20, 20, 0.12);
  color: #b41414;
}

.juris-us {
  background: rgba(30, 100, 180, 0.12);
  color: #1e64b4;
}

.juris-kr {
  background: rgba(14, 99, 166, 0.15);
  color: #0e5fa3;
}

.row-highlight td {
  border-left: 3px solid var(--gold) !important;
  background: rgba(211, 169, 17, 0.04) !important;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comp-table th:first-child {
  width: 160px;
}

.comp-table tr:nth-child(even) td:not(:first-child) {
  background: #faf9f7;
}

.juris-cn {
  background: rgba(180, 30, 0, 0.1);
  color: #8b1500;
}

.row-highlight {
  background: rgba(211, 169, 17, 0.08) !important;
}

.comp-table .row-highlight td:not(:first-child) {
  background: #fff8e6 !important;
  border-left: 3px solid var(--gold);
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.badge-man {
  background: rgba(200, 50, 50, 0.1);
  color: #c44;
}

.badge-vol {
  background: rgba(211, 169, 17, 0.12);
  color: #b8900e;
}

.badge-sep {
  background: rgba(14, 99, 166, 0.1);
  color: #0e5fa3;
}

.comp-table a {
  color: var(--gold);
}

/* ── Blog Post — Case-Study Stats & Timeline ────────────── */

.pull-quote {
  border-left: 4px solid var(--gold);
  margin: 40px 0;
  padding: 20px 28px;
  background: #f8f6f2;
  border-radius: 0 10px 10px 0;
}

.pull-quote p {
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.5;
  margin: 0;
}

.case-stat-row {
  display: flex;
  gap: 24px;
  margin: 32px 0;
  flex-wrap: wrap;
}

.case-stat-num {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
}

.case-stat-lbl {
  display: block;
  font-size: 12px;
  color: #7a909f;
  margin-top: 6px;
  line-height: 1.4;
}

.case-highlight {
  background: rgba(0, 107, 78, 0.06);
  border-left: 3px solid #006b4e;
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  margin: 28px 0;
}

.case-highlight p {
  margin: 0;
  font-size: 15px;
  color: #334;
  line-height: 1.7;
}

.timeline-block {
  border-left: 2px solid var(--gold);
  padding-left: 20px;
  margin: 32px 0;
}

.timeline-item {
  margin-bottom: 24px;
  position: relative;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 6px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
}

.timeline-item h4 {
  font-family: "Sora", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 4px;
}

.timeline-item p {
  font-size: 14px;
  color: #556;
  margin: 0;
  line-height: 1.6;
}

.timeline-item .tl-week {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  display: block;
}

/* ── Blog Post — Chain-of-Events, Cost Table & Prevent List */

.cost-table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 14px;
}

.cost-table th {
  background: var(--navy);
  color: #fff;
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.cost-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e8e3da;
  vertical-align: top;
}

.cost-table tr:last-child td {
  border-bottom: 2px solid var(--gold);
  font-weight: 700;
  color: var(--navy);
}

.cost-table tr:nth-child(even) td {
  background: #faf9f7;
}

.cost-amount {
  text-align: right;
  white-space: nowrap;
}

.chain {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 32px 0;
}

.chain-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #e8e3da;
}

.chain-step:last-child {
  border-bottom: none;
}

.chain-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chain-text {
  flex: 1;
}

.chain-text strong {
  display: block;
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 4px;
}

.chain-text span {
  font-size: 13px;
  color: #556677;
  line-height: 1.5;
}

.prevent-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.prevent-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e8e3da;
  font-size: 14px;
  color: #334;
  line-height: 1.55;
}

.prevent-list li:last-child {
  border-bottom: none;
}

.prevent-list li::before {
  content: "✓";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: rgba(200, 169, 110, 0.15);
  border-radius: 50%;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.chain-step.chain-gap .chain-num {
  background: #c0392b;
}

.cost-table td:last-child {
  font-weight: 600;
  text-align: right;
  font-family: "Sora", sans-serif;
}

/* ── Footer grid ─────────────────────────────────────────────────────────── */
.tgc-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 56px 0;
  border-bottom: 1px solid #1e3a52;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .tgc-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 40px 0;
  }
}

@media (max-width: 480px) {
  .tgc-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 0;
  }
}

/* ================================================================
   30. STANDALONE SAMPLE REPORT (TGC_ExpeditedAudit_SampleReport.html)
================================================================ */

/* Page layout */
.tgc-page#tgc-sample-report {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 20px 80px !important;
}

/* ── Cover ─────────────────────────────────────────────────── */
.tgc-page .sr-cover {
  background: var(--navy) !important;
  border-radius: 0 0 12px 12px !important;
  padding: 48px 48px 44px !important;
  margin-bottom: 32px !important;
  position: relative !important;
  overflow: hidden !important;
}
.tgc-page .sr-cover::before {
  content: "" !important;
  position: absolute !important;
  top: -60px !important;
  right: -60px !important;
  width: 320px !important;
  height: 320px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(211, 169, 17, 0.12) !important;
  pointer-events: none !important;
}
.tgc-page .sr-cover::after {
  content: "" !important;
  position: absolute !important;
  bottom: -80px !important;
  left: -40px !important;
  width: 260px !important;
  height: 260px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(211, 169, 17, 0.07) !important;
  pointer-events: none !important;
}
.tgc-page .sr-cover-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 36px !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.tgc-page .sr-cover-brand {
  font-family: "Sora", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.tgc-page .sr-cover-tag {
  font-family: "Sora", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--navy) !important;
  background: var(--gold) !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
}
.tgc-page .sr-cover-rule {
  height: 1px !important;
  background: var(--border-dk) !important;
  margin-bottom: 32px !important;
}
.tgc-page .sr-cover-title {
  font-family: "Sora", sans-serif !important;
  font-size: clamp(24px, 4vw, 36px) !important;
  font-weight: 800 !important;
  color: var(--white) !important;
  line-height: 1.15 !important;
  margin-bottom: 8px !important;
}
.tgc-page .sr-cover-sub {
  font-size: 15px !important;
  color: var(--muted) !important;
  margin-bottom: 32px !important;
}
.tgc-page .sr-cover-meta {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 32px !important;
}
.tgc-page .sr-cover-meta-field {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border-dk) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
}
.tgc-page .sr-cover-meta-label {
  font-family: "Sora", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--muted) !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.tgc-page .sr-cover-meta-val {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--white) !important;
}
.tgc-page .sr-cover-summary {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.tgc-page .sr-cover-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.tgc-page .sr-cb-gap {
  background: rgba(217, 48, 37, 0.15) !important;
  color: #f08080 !important;
}
.tgc-page .sr-cb-flag {
  background: rgba(212, 138, 0, 0.15) !important;
  color: var(--gold-lt) !important;
}
.tgc-page .sr-cb-pass {
  background: rgba(34, 167, 98, 0.15) !important;
  color: #6fcf97 !important;
}
.tgc-page .sr-cover-badge-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
}
.tgc-page .sr-cbd-gap {
  background: #d93025 !important;
}
.tgc-page .sr-cbd-flag {
  background: var(--gold) !important;
}
.tgc-page .sr-cbd-pass {
  background: #22a762 !important;
}

/* ── Disclaimer banner ─────────────────────────────────────── */
.tgc-page .sr-download-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--navy) !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  margin-bottom: 24px !important;
  gap: 16px !important;
}
.tgc-page .sr-download-bar-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.tgc-page .sr-download-bar-btn {
  background: var(--gold) !important;
  color: var(--navy) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: opacity 0.15s !important;
}
.tgc-page .sr-download-bar-btn:hover {
  opacity: 0.85 !important;
}

.tgc-page .sr-disclaimer {
  background: var(--gold-pale) !important;
  border: 1px solid rgba(211, 169, 17, 0.25) !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
  color: var(--slate) !important;
  margin-bottom: 32px !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
.tgc-page .sr-disclaimer svg {
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  color: var(--gold) !important;
}
.tgc-page .sr-disclaimer strong {
  color: var(--navy) !important;
}

/* ── Section header ────────────────────────────────────────── */
.tgc-page .sr-section-header {
  margin-bottom: 20px !important;
  margin-top: 40px !important;
}
.tgc-page .sr-section-eyebrow {
  font-family: "Sora", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--gold) !important;
  margin-bottom: 6px !important;
}
.tgc-page .sr-section-title {
  font-family: "Sora", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
}

/* ── Audit table ───────────────────────────────────────────── */
.tgc-page .sr-audit-table {
  width: 100% !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
  margin-bottom: 8px !important;
}
.tgc-page .sr-audit-thead {
  display: grid !important;
  grid-template-columns: 180px 148px 1.5fr 1fr !important;
  background: var(--navy) !important;
  padding: 12px 18px !important;
  gap: 16px !important;
}
.tgc-page .sr-audit-thead-cell {
  font-family: "Sora", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--muted) !important;
}
.tgc-page .sr-audit-row {
  display: grid !important;
  grid-template-columns: 180px 148px 1.5fr 1fr !important;
  padding: 18px !important;
  gap: 16px !important;
  border-top: 1px solid var(--border) !important;
  align-items: start !important;
  transition: background 0.15s !important;
}
.tgc-page .sr-audit-row:hover {
  background: #fafaf8 !important;
}
.tgc-page .sr-audit-row-critical {
  background: #fffbf8 !important;
}
.tgc-page .sr-audit-row-critical:hover {
  background: #fdf5ef !important;
}
.tgc-page .sr-audit-area-name {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--navy) !important;
  margin-bottom: 5px !important;
}
.tgc-page .sr-priority-tag {
  display: inline-block !important;
  font-family: "Sora", sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  background: rgba(217, 48, 37, 0.1) !important;
  color: #c0392b !important;
}
.tgc-page .sr-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
.tgc-page .sr-status-pass {
  background: var(--status-pass-bg) !important;
  color: var(--status-pass) !important;
}
.tgc-page .sr-status-flag {
  background: var(--status-flag-bg) !important;
  color: var(--status-flag) !important;
}
.tgc-page .sr-status-gap {
  background: var(--status-gap-bg) !important;
  color: var(--status-gap) !important;
}
.tgc-page .sr-status-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.tgc-page .sr-status-dot-pass {
  background: #22a762 !important;
}
.tgc-page .sr-status-dot-flag {
  background: #d48a00 !important;
}
.tgc-page .sr-status-dot-gap {
  background: #d93025 !important;
}
/* ── 5-tier status extensions ────────────────────────────── */
.tgc-page .sr-status-major {
  background: rgba(139,26,10,0.13) !important;
  color: #8b1a0a !important;
}
.tgc-page .sr-status-substantial {
  background: var(--status-gap-bg) !important;
  color: var(--status-gap) !important;
}
.tgc-page .sr-status-actionable {
  background: var(--status-flag-bg) !important;
  color: var(--status-flag) !important;
}
.tgc-page .sr-status-minor {
  background: rgba(204,165,0,0.12) !important;
  color: #7a6200 !important;
}
.tgc-page .sr-status-dot-major { background: #8b1a0a !important; }
.tgc-page .sr-status-dot-substantial { background: #d93025 !important; }
.tgc-page .sr-status-dot-actionable { background: #d48a00 !important; }
.tgc-page .sr-status-dot-minor { background: #b8990a !important; }
/* Cover badge 5-tier variants */
.tgc-page .sr-cb-major { background: rgba(139,26,10,0.1) !important; color: #8b1a0a !important; }
.tgc-page .sr-cbd-major { background: #8b1a0a !important; }
.tgc-page .sr-cb-substantial { background: var(--status-gap-bg) !important; color: var(--status-gap) !important; }
.tgc-page .sr-cbd-substantial { background: #d93025 !important; }
.tgc-page .sr-cb-actionable { background: var(--status-flag-bg) !important; color: var(--status-flag) !important; }
.tgc-page .sr-cbd-actionable { background: #d48a00 !important; }
.tgc-page .sr-cb-minor { background: rgba(204,165,0,0.12) !important; color: #7a6200 !important; }
.tgc-page .sr-cbd-minor { background: #b8990a !important; }
/* ── Regulatory mandate cell ──────────────────────────────── */
.tgc-page .sr-mandate-law {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: "Sora", sans-serif !important;
  letter-spacing: 0.03em !important;
  color: var(--gold) !important;
  background: var(--gold-pale) !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  margin-bottom: 6px !important;
}
.tgc-page .sr-mandate-text {
  font-size: 12px !important;
  color: var(--slate) !important;
  line-height: 1.55 !important;
}
/* ── Overall assessment box ───────────────────────────────── */
.tgc-page .sr-overall-status {
  background: var(--navy) !important;
  border-radius: 10px !important;
  padding: 24px 28px !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}
.tgc-page .sr-overall-eyebrow {
  font-family: "Sora", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--gold) !important;
  margin-bottom: 10px !important;
}
.tgc-page .sr-overall-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-family: "Sora", sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  margin-bottom: 12px !important;
}
.tgc-page .sr-overall-dot {
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.tgc-page .sr-overall-text {
  font-size: 13px !important;
  color: rgba(255,255,255,0.68) !important;
  line-height: 1.65 !important;
  max-width: 680px !important;
}
/* ── Audit key ────────────────────────────────────────────── */
.tgc-page .sr-audit-key {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.tgc-page .sr-audit-key-header {
  font-family: "Sora", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--slate) !important;
  margin-bottom: 12px !important;
}
.tgc-page .sr-audit-key-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 8px 24px !important;
}
.tgc-page .sr-audit-key-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
.tgc-page .sr-audit-key-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  margin-top: 3px !important;
}
.tgc-page .sr-audit-key-label {
  font-size: 12px !important;
  color: var(--navy) !important;
  line-height: 1.45 !important;
}
.tgc-page .sr-audit-key-label strong {
  font-weight: 600 !important;
  display: inline !important;
}
.tgc-page .sr-audit-key-label span {
  color: var(--slate) !important;
  font-size: 11px !important;
}
/* ── Implementation support table ─────────────────────────── */
.tgc-page .sr-impl-table {
  width: 100% !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
  margin-top: 8px !important;
}
.tgc-page .sr-impl-thead {
  display: grid !important;
  grid-template-columns: 210px 1fr 200px !important;
  background: var(--navy) !important;
  padding: 12px 18px !important;
  gap: 16px !important;
}
.tgc-page .sr-impl-row {
  display: grid !important;
  grid-template-columns: 210px 1fr 200px !important;
  padding: 16px 18px !important;
  gap: 16px !important;
  border-top: 1px solid var(--border) !important;
  align-items: start !important;
  transition: background 0.15s !important;
}
.tgc-page .sr-impl-row:hover {
  background: #fafaf8 !important;
}
.tgc-page .sr-impl-area {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--navy) !important;
  line-height: 1.4 !important;
}
.tgc-page .sr-impl-area-status {
  margin-top: 5px !important;
}
.tgc-page .sr-impl-action {
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
}
.tgc-page .sr-impl-party {
  font-size: 12px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
}
.tgc-page .sr-impl-party strong {
  display: block !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  font-size: 12px !important;
  margin-bottom: 2px !important;
}
.tgc-page .sr-finding-text {
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.65 !important;
}
.tgc-page .sr-reg-ref {
  display: inline-block !important;
  margin-top: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  background: var(--gold-pale) !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  font-family: "Sora", sans-serif !important;
  letter-spacing: 0.03em !important;
}

/* ── Action plan ───────────────────────────────────────────── */
.tgc-page .sr-action-plan {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-top: 8px !important;
}
.tgc-page .sr-action-plan-header {
  background: var(--navy) !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: "Sora", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--gold) !important;
}
.tgc-page .sr-action-row {
  display: flex !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border-top: 1px solid var(--border) !important;
  align-items: flex-start !important;
}
.tgc-page .sr-action-num {
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--navy) !important;
  color: var(--gold) !important;
  font-family: "Sora", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 1px !important;
}
.tgc-page .sr-action-title {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--navy) !important;
  margin-bottom: 4px !important;
}
.tgc-page .sr-action-detail {
  font-size: 12px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
}
.tgc-page .sr-action-tags {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-top: 6px !important;
}
.tgc-page .sr-atag {
  font-family: "Sora", sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
}
.tgc-page .sr-atag-blocker {
  background: rgba(217, 48, 37, 0.1) !important;
  color: #c0392b !important;
}
.tgc-page .sr-atag-flag {
  background: var(--status-flag-bg) !important;
  color: var(--status-flag) !important;
}
.tgc-page .sr-atag-medium {
  background: rgba(61, 81, 102, 0.1) !important;
  color: var(--slate) !important;
}

/* ── CTA box ───────────────────────────────────────────────── */
.tgc-page .sr-cta-box {
  background: var(--navy) !important;
  border-radius: 10px !important;
  padding: 40px 48px !important;
  margin-top: 40px !important;
  text-align: center !important;
}
.tgc-page .sr-cta-eyebrow {
  font-family: "Sora", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--gold) !important;
  margin-bottom: 12px !important;
}
.tgc-page .sr-cta-title {
  font-family: "Sora", sans-serif !important;
  font-size: clamp(20px, 3vw, 28px) !important;
  font-weight: 800 !important;
  color: var(--white) !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
}
.tgc-page .sr-cta-sub {
  font-size: 14px !important;
  color: var(--muted) !important;
  margin-bottom: 28px !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.tgc-page .sr-cta-btns {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* ── Report footer ─────────────────────────────────────────── */
.tgc-page .sr-report-footer {
  margin-top: 40px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.tgc-page .sr-report-footer p {
  font-size: 12px !important;
  color: var(--muted) !important;
}

/* ── Download bar ──────────────────────────────────────────── */
.tgc-page .sr-download-bar {
  background: rgba(211, 169, 17, 0.07) !important;
  border: 1px solid rgba(211, 169, 17, 0.2) !important;
  border-radius: 8px !important;
  padding: 12px 18px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.tgc-page .sr-download-bar-text {
  font-size: 13px !important;
  color: var(--slate) !important;
}
.tgc-page .sr-download-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #d3a911 !important;
  color: #0a1826 !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  transition:
    background 0.15s,
    transform 0.1s !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.tgc-page .sr-download-btn:hover {
  background: #f0cc5a !important;
  transform: translateY(-1px) !important;
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tgc-page .sr-cover {
    padding: 32px 24px !important;
  }
  .tgc-page .sr-audit-thead {
    display: none !important;
  }
  .tgc-page .sr-audit-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .tgc-page .sr-impl-thead {
    display: none !important;
  }
  .tgc-page .sr-impl-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .tgc-page .sr-cta-box {
    padding: 32px 24px !important;
  }
  .tgc-page .sr-download-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ================================================================
   SAMPLE REPORT — MODALS & PRINT
   Not scoped to .tgc-page; these elements live outside the wrapper.
================================================================ */

/* ── Gate overlay (base for both modals) ─────────────────── */
.sr-gate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 24, 38, 0.82);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
}
.sr-gate-overlay.sr-open {
  display: flex;
}

/* ── Email gate box ────────────────────────────────────────── */
.sr-gate-box {
  background: #ffffff;
  border-radius: 14px;
  padding: 44px 40px 36px;
  max-width: 440px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 24px 64px rgba(10, 24, 38, 0.4);
}
.sr-gate-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f0f2f5;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #3d5166;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.sr-gate-close:hover {
  background: #e2e5ea;
}
.sr-gate-eyebrow {
  font-family: "Sora", sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #d3a911;
  margin-bottom: 10px;
}
.sr-gate-title {
  font-family: "Sora", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0a1826;
  margin: 0 0 10px;
  line-height: 1.2;
}
.sr-gate-sub {
  font-size: 14px;
  color: #3d5166;
  margin: 0 0 24px;
  line-height: 1.5;
}
.sr-gate-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sr-gate-input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #e2e8ee;
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  color: #0a1826;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  background: #fff;
}
.sr-gate-input:focus {
  border-color: #d3a911;
}
.sr-gate-input::placeholder {
  color: #7a909f;
}
.sr-gate-submit {
  width: 100%;
  padding: 14px;
  background: #d3a911;
  color: #0a1826;
  border: none;
  border-radius: 8px;
  font-family: "Sora", sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s;
}
.sr-gate-submit:hover {
  background: #f0cc5a;
  transform: translateY(-1px);
}
.sr-gate-note {
  font-size: 12px;
  color: #7a909f;
  text-align: center;
  margin: 10px 0 0;
}

/* ── Report preview modal ──────────────────────────────────── */
.sr-report-overlay {
  background: rgba(10, 24, 38, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10001;
}
.sr-report-pane {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 920px;
  height: 90vh;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.07);
}
.sr-report-toolbar {
  background: #0a1826;
  border-bottom: 1px solid #21384d;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.sr-report-toolbar-title {
  font-family: "Sora", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-report-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.sr-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 6px;
  font-family: "Sora", sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #ffffff;
  transition: all 0.15s;
  white-space: nowrap;
}
.sr-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.sr-toolbar-btn.sr-toolbar-btn-primary {
  background: #d3a911 !important;
  color: #0a1826;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(211, 169, 17, 0.3);
}
.sr-toolbar-btn.sr-toolbar-btn-primary:hover {
  background: #f0cc5a !important;
  transform: translateY(-1px);
}
.sr-report-scroll {
  flex: 1;
  overflow-y: auto;
  background: #f8f6f0;
  padding-bottom: 60px;
}
/* Layout for the cloned report inside the scroll pane */
.sr-report-scroll .tgc-page {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 20px 80px !important;
}
/* Suppress the download bar inside the preview clone */
.sr-report-scroll .sr-download-bar {
  display: none !important;
}

/* ── Print area ────────────────────────────────────────────── */
#sr-print-area,
#sr-hs-print-area {
  display: none;
}

@media print {
  /* Only active when srDownloadPDF() sets this class */
  body.sr-print-mode > * {
    display: none !important;
  }
  body.sr-print-mode #sr-print-area,
  body.sr-print-mode #sr-hs-print-area {
    display: block !important;
    position: static;
    width: 100%;
    background: white;
  }
  body.sr-print-mode #sr-print-area .tgc-page,
  body.sr-print-mode #sr-hs-print-area .tgc-page {
    max-width: 860px !important;
    margin: 0 auto !important;
    padding: 20px !important;
  }
  /* Hide page elements that don't belong in the PDF */
  body.sr-print-mode #sr-print-area .sr-download-bar,
  body.sr-print-mode #sr-print-area .sr-cta-box,
  body.sr-print-mode #sr-print-area .sr-report-footer,
  body.sr-print-mode #sr-hs-print-area .sr-cta-box,
  body.sr-print-mode #sr-hs-print-area .sr-report-footer {
    display: none !important;
  }
}

/* iframe variant of the report scroll area (used on expedited-audit.html) */
.sr-report-iframe {
  flex: 1;
  width: 100%;
  border: none;
  display: block;
  background: #f8f6f0;
  min-height: 0;
}

/* ── Modal mobile ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .sr-gate-box {
    padding: 32px 24px 28px;
  }
  .sr-report-toolbar {
    flex-wrap: wrap;
  }
  .sr-report-toolbar-title {
    font-size: 12px;
  }
}

/* ================================================================
   31. STANDALONE SAMPLE MEMO (TGC_HSCodeReview_SampleMemo.html)
================================================================ */

/* Page layout */
.tgc-page#tgc-hs-sample-memo {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 20px 80px !important;
}

/* ── Cover outcome badge ────────────────────────────────────── */
.tgc-page .sr-cover-outcome {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(34, 167, 98, 0.15) !important;
  border: 1px solid rgba(34, 167, 98, 0.25) !important;
  color: #6fcf97 !important;
  font-family: "Sora", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
}
.tgc-page .sr-cover-outcome-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #22a762 !important;
  flex-shrink: 0 !important;
}

/* ── Memo table (two-column label/content) ─────────────────── */
.tgc-page .sr-hs-memo-table {
  width: 100% !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
}
.tgc-page .sr-hs-memo-row {
  display: grid !important;
  grid-template-columns: 200px 1fr !important;
  border-top: 1px solid var(--border) !important;
  align-items: start !important;
}
.tgc-page .sr-hs-memo-row:first-child {
  border-top: none !important;
}
.tgc-page .sr-hs-memo-row-label {
  padding: 18px 20px !important;
  font-family: "Sora", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--muted) !important;
  background: var(--offwhite) !important;
  border-right: 1px solid var(--border) !important;
}
.tgc-page .sr-hs-memo-row-content {
  padding: 18px 20px !important;
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.7 !important;
}

/* ── Code chip ─────────────────────────────────────────────── */
.tgc-page .sr-code-chip {
  display: inline-block !important;
  font-family: "Sora", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  background: var(--gold-pale) !important;
  border: 1px solid rgba(211, 169, 17, 0.3) !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  margin-right: 8px !important;
  margin-bottom: 4px !important;
}

/* ── Text highlight ────────────────────────────────────────── */
.tgc-page .sr-text-highlight {
  font-weight: 700 !important;
  color: var(--navy) !important;
}

/* ── Note / body text within memo rows ─────────────────────── */
.tgc-page .sr-hs-note-text {
  margin-top: 8px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}
.tgc-page .sr-hs-intro-text {
  margin-bottom: 12px !important;
  font-size: 13px !important;
  color: var(--slate) !important;
}
.tgc-page .sr-hs-body-text {
  margin-top: 10px !important;
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.65 !important;
}
.tgc-page .sr-hs-body-text strong {
  color: var(--navy) !important;
}

/* ── Duty rate chips ───────────────────────────────────────── */
.tgc-page .sr-rate-chip {
  display: inline-block !important;
  font-family: "Sora", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 2px 10px !important;
  border-radius: 4px !important;
}
.tgc-page .sr-rate-zero {
  background: rgba(34, 167, 98, 0.1) !important;
  color: #1a7a4a !important;
}
.tgc-page .sr-rate-low {
  background: rgba(211, 169, 17, 0.1) !important;
  color: #7a5c00 !important;
}
.tgc-page .sr-rate-medium {
  background: rgba(217, 48, 37, 0.08) !important;
  color: #8b2218 !important;
}

/* ── EAR99 chip ────────────────────────────────────────────── */
.tgc-page .sr-ear99-chip {
  display: inline-block !important;
  font-family: "Sora", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1a7a4a !important;
  background: rgba(34, 167, 98, 0.1) !important;
  border: 1px solid rgba(34, 167, 98, 0.2) !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
}

/* ── ECCN classification header ────────────────────────────── */
.tgc-page .sr-eccn-classification {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.tgc-page .sr-eccn-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
}

/* ── Flag items list ───────────────────────────────────────── */
.tgc-page .sr-flag-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
.tgc-page .sr-flag-item {
  display: flex !important;
  gap: 8px !important;
  align-items: flex-start !important;
}
.tgc-page .sr-flag-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  margin-top: 6px !important;
}
.tgc-page .sr-flag-dot-warn {
  background: #d48a00 !important;
}
.tgc-page .sr-flag-dot-clear {
  background: #22a762 !important;
}
.tgc-page .sr-flag-dot-info {
  background: var(--muted) !important;
}
.tgc-page .sr-flag-text {
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
}
.tgc-page .sr-flag-text strong {
  color: var(--navy) !important;
}

/* ── GRI reasoning steps ───────────────────────────────────── */
.tgc-page .sr-gri-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.tgc-page .sr-gri-step {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
.tgc-page .sr-gri-badge {
  font-family: "Sora", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  background: var(--gold-pale) !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
}
.tgc-page .sr-gri-text {
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
}
.tgc-page .sr-gri-text strong {
  color: var(--navy) !important;
}

/* ── Duty exposure rows ────────────────────────────────────── */
.tgc-page .sr-duty-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.tgc-page .sr-duty-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 14px !important;
  background: var(--offwhite) !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
}
.tgc-page .sr-duty-row-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
}
.tgc-page .sr-duty-row-vat {
  font-size: 13px !important;
  color: var(--slate) !important;
}

/* ── BTI status badge ──────────────────────────────────────── */
.tgc-page .sr-bti-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  padding: 6px 14px !important;
  background: rgba(34, 167, 98, 0.08) !important;
  border: 1px solid rgba(34, 167, 98, 0.2) !important;
  border-radius: 6px !important;
}
.tgc-page .sr-bti-status-text {
  font-family: "Sora", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1a7a4a !important;
}

/* ── Conclusion box ────────────────────────────────────────── */
.tgc-page .sr-hs-conclusion {
  background: var(--navy) !important;
  border-radius: 10px !important;
  padding: 28px !important;
  margin-top: 20px !important;
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
}
.tgc-page .sr-hs-conclusion-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(211, 169, 17, 0.15) !important;
  border: 1px solid rgba(211, 169, 17, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gold) !important;
  flex-shrink: 0 !important;
}
.tgc-page .sr-hs-conclusion-body {
  flex: 1 !important;
}
.tgc-page .sr-hs-conclusion-label {
  font-family: "Sora", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--gold) !important;
  margin-bottom: 6px !important;
}
.tgc-page .sr-hs-conclusion-text {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.7 !important;
}
.tgc-page .sr-hs-conclusion-text strong {
  color: var(--white) !important;
}

/* ── Letter-format body ─────────────────────────────────────── */
.tgc-page#tgc-hs-sample-memo .sr-letter-body {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 36px 40px !important;
  margin-top: 24px !important;
}
.tgc-page#tgc-hs-sample-memo .sr-letter-text {
  font-size: 14px !important;
  color: var(--slate) !important;
  line-height: 1.7 !important;
  margin-bottom: 16px !important;
}
.tgc-page#tgc-hs-sample-memo .sr-letter-re {
  font-family: "Sora", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin-bottom: 20px !important;
}
.tgc-page#tgc-hs-sample-memo .sr-product-section {
  margin-top: 28px !important;
}
.tgc-page#tgc-hs-sample-memo .sr-product-heading {
  font-family: "Sora", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  text-decoration: underline !important;
  margin-bottom: 14px !important;
}
.tgc-page#tgc-hs-sample-memo .sr-options-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 16px !important;
}
.tgc-page#tgc-hs-sample-memo .sr-options-table th {
  background: var(--offwhite) !important;
  border: 1px solid var(--border) !important;
  padding: 10px 14px !important;
  font-family: "Sora", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: left !important;
  color: var(--navy) !important;
}
.tgc-page#tgc-hs-sample-memo .sr-options-table td {
  border: 1px solid var(--border) !important;
  padding: 12px 14px !important;
  vertical-align: top !important;
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.6 !important;
}
.tgc-page#tgc-hs-sample-memo .sr-options-table td:first-child {
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  white-space: nowrap !important;
  width: 135px !important;
}
.tgc-page#tgc-hs-sample-memo .sr-recommendation-text {
  font-size: 13px !important;
  color: var(--slate) !important;
  line-height: 1.7 !important;
}
.tgc-page#tgc-hs-sample-memo .sr-recommendation-text strong {
  color: var(--navy) !important;
}
.tgc-page#tgc-hs-sample-memo .sr-letter-closing {
  margin-top: 16px !important;
  font-size: 14px !important;
  color: var(--slate) !important;
  line-height: 1.8 !important;
}
.tgc-page#tgc-hs-sample-memo .sr-letter-sig {
  font-family: "Sora", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
}

/* ── CTA buttons ───────────────────────────────────────────── */
.tgc-page .sr-cta-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--gold) !important;
  color: var(--navy) !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 13px 24px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}
.tgc-page .sr-cta-btn-primary:hover {
  background: var(--gold-lt) !important;
}
.tgc-page .sr-cta-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  color: var(--white) !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 13px 24px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  text-decoration: none !important;
  transition: border-color 0.15s !important;
}
.tgc-page .sr-cta-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* ── Report footer link ────────────────────────────────────── */
.tgc-page .sr-report-footer a {
  color: var(--muted) !important;
  text-decoration: none !important;
}

/* ── Mobile (HS memo) ──────────────────────────────────────── */
@media (max-width: 640px) {
  .tgc-page#tgc-hs-sample-memo {
    padding: 0 12px 60px !important;
  }
  .tgc-page .sr-hs-memo-row {
    grid-template-columns: 1fr !important;
  }
  .tgc-page .sr-hs-memo-row-label {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 12px 16px !important;
  }
  .tgc-page .sr-hs-memo-row-content {
    padding: 14px 16px !important;
  }
  .tgc-page .sr-hs-conclusion {
    flex-direction: column !important;
  }
  .tgc-page#tgc-hs-sample-memo .sr-letter-body {
    padding: 24px 20px !important;
  }
  .tgc-page#tgc-hs-sample-memo .sr-options-table td:first-child {
    white-space: normal !important;
    width: auto !important;
  }
}

@media print {
  .tgc-page#tgc-hs-sample-memo .sr-cta-box,
  .tgc-page#tgc-hs-sample-memo .sr-report-footer {
    display: none !important;
  }
}