/*
Theme Name: PMG
Theme URI: https://paperboymediagroup.com/
Author: PMG
Author URI: https://paperboymediagroup.com/
Description: Custom PMG Theme with Commercials and Case Study CPT
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: pmg
*/


:root {
  /* =========================
     Brand / Color Styles (Figma)
  ========================== */
  --bg-body: #0C0C0C;     /* rgba(12, 12, 12, 1) */
  --color-primary: #1a1a1a;      /* rgba(26, 26, 26, 1) */
  --color-light-grey: #f2f2f2;   /* rgba(242, 242, 242, 1) */
  --color-light-yellow: #fffae6; /* rgba(255, 250, 230, 1) */
  --body-text-color: rgba(255, 255, 255, 0.8);   /* rgba(255, 255, 255, 8) */

  --color-accent-1: #1d6ce9;     /* rgba(29, 108, 233, 1) */
  --color-accent-2: #2e3bb6;     /* rgba(46, 59, 182, 1) */
  --color-accent-3: #00e5c6;     /* rgba(0, 229, 198, 1) */
  --color-accent-4: #b069f8;     /* rgba(176, 105, 248, 1) */

  --gradient: linear-gradient(90deg, var(--color-accent-3) 0%, var(--color-accent-1) 53.37%, var(--color-accent-4) 100%);

  /* =========================
     Semantic Aliases (use these in components)
     (Still based on your palette — no new colors)
  ========================== */
  --color-bg: #ffffff;
  --color-text: var(--color-primary);
  --color-muted-bg: var(--color-light-grey);
  --color-highlight-bg: var(--color-light-yellow);

  --color-link: var(--color-accent-1);
  --color-link-hover: var(--color-accent-2);

/* =========================
   Typography (Adobe Kit)
========================== */
--font-primary: "avenir-lt-pro", sans-serif;

/* Font Weights (Mapped Correctly) */
--fw-light: 200;   /* 35 Light */
--fw-regular: 400; /* 55 Roman */
--fw-medium: 500;  /* 65 Medium */
--fw-bold: 700;    /* 85 Bold */
--fw-black: 800;   /* 95 Black */

  /* Optional helpers */
  --lh-tight: 1.15;
  --lh-normal: 1.5;

  /* =========================
     Layout
  ========================== */
  --frame-width: 1440px;       /* Figma frame width reference */
  --container-width: 1140px;   /* content/container max width */
  --container-pad: 20px;       /* safe padding on smaller screens */

  /* If you want a global section padding token (minimal) */
  --section-pad-y: 80px;
}

/* Container utility (recommended) */
.container {
  width: min(100% - (var(--container-pad) * 2), var(--container-width));
  margin-inline: auto;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  margin: 0;
  color: var(--body-text-color);
  background-color: var(--bg-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--fw-black); /* 800 */
  margin: 0;
}

.text-center { text-align: center; }

/* =========================
   Primary Button
========================== */

.pmg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 13px 40px 10px 40px;
  border-radius: 50px;
  min-height: 20px;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;

  text-decoration: none;
  border: none;
  cursor: pointer;

  transition: all 200ms ease;
}

/* Primary Variant */
.pmg-btn--primary {
  background: var(--color-accent-1);
  color: #fff;
}

/* Hover */
.pmg-btn--primary:hover {
  background: var(--color-accent-2);
}

/* Focus */
.pmg-btn--primary:focus-visible {
  outline: 2px solid var(--color-accent-3);
  outline-offset: 3px;
}

/* =========================
   Text Link (Primary Accent)
========================== */

.pmg-text-link {
  display: inline-block;

  color: #00E5C6; /* Accent 3 */
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;

  text-decoration: none;
  transition: color 200ms ease, opacity 200ms ease;
}

/* Hover */
.pmg-text-link:hover {
  color: var(--color-accent-4);
}

/* Focus */
.pmg-text-link:focus-visible {
  outline: 2px solid #00E5C6;
  outline-offset: 4px;
}

/* Optional subtle underline animation */
.pmg-text-link::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 250ms ease;
  margin-top: 4px;
}

.pmg-text-link:hover::after {
  width: 100%;
}


/* =========================
   PMG Grid System (12 Col)
   - CSS Grid based
   - 3 gutter sizes: 32 / 24 / 16
   - no-gutter supported
   - responsive spans + offsets
========================== */

/* Tokens (add to :root if you prefer) */
:root {
  --grid-columns: 12;

  --gutter-lg: 32px;
  --gutter-md: 24px;
  --gutter-sm: 16px;

  /* default grid gutter */
  --grid-gutter: var(--gutter-md);

    --space-0: 0;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 80px;
    --space-8: 120px;
}

/* Grid container */
.pmg-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

/* Gutter modifiers */
.pmg-grid.gutter-32 { --grid-gutter: var(--gutter-lg); }
.pmg-grid.gutter-24 { --grid-gutter: var(--gutter-md); }
.pmg-grid.gutter-16 { --grid-gutter: var(--gutter-sm); }

/* No gutter */
.pmg-grid.no-gutter { --grid-gutter: 0px; }

/* Helpful alignment utilities */
.pmg-grid.align-start { align-items: start; }
.pmg-grid.align-center { align-items: center; }
.pmg-grid.align-end { align-items: end; }
.pmg-grid.justify-start { justify-items: start; }
.pmg-grid.justify-center { justify-items: center; }
.pmg-grid.justify-end { justify-items: end; }

/* =========================
   Column spans (desktop default)
========================== */
.pmg-col { min-width: 0; } /* prevents overflow in grids */

.pmg-col-1  { grid-column: span 1; }
.pmg-col-2  { grid-column: span 2; }
.pmg-col-3  { grid-column: span 3; }
.pmg-col-4  { grid-column: span 4; }
.pmg-col-5  { grid-column: span 5; }
.pmg-col-6  { grid-column: span 6; }
.pmg-col-7  { grid-column: span 7; }
.pmg-col-8  { grid-column: span 8; }
.pmg-col-9  { grid-column: span 9; }
.pmg-col-10 { grid-column: span 10; }
.pmg-col-11 { grid-column: span 11; }
.pmg-col-12 { grid-column: span 12; }

/* =========================
   Offsets (desktop default)
========================== */
.pmg-offset-0  { grid-column-start: auto; }
.pmg-offset-1  { grid-column-start: 2; }
.pmg-offset-2  { grid-column-start: 3; }
.pmg-offset-3  { grid-column-start: 4; }
.pmg-offset-4  { grid-column-start: 5; }
.pmg-offset-5  { grid-column-start: 6; }
.pmg-offset-6  { grid-column-start: 7; }
.pmg-offset-7  { grid-column-start: 8; }
.pmg-offset-8  { grid-column-start: 9; }
.pmg-offset-9  { grid-column-start: 10; }
.pmg-offset-10 { grid-column-start: 11; }
.pmg-offset-11 { grid-column-start: 12; }

/* =========================
   Responsive breakpoints
   - Mobile first: default 12 col available
   - We override spans per breakpoint with prefixes:
     .sm-col-*, .md-col-*, .lg-col-*
========================== */

/* Mobile (default): you can use .col-* as-is.
   Optional: force stacking by default if you want:
   .pmg-col { grid-column: span 12; }
*/

/* Tablet */
@media (min-width: 768px) {
  .md-col-1  { grid-column: span 1; }
  .md-col-2  { grid-column: span 2; }
  .md-col-3  { grid-column: span 3; }
  .md-col-4  { grid-column: span 4; }
  .md-col-5  { grid-column: span 5; }
  .md-col-6  { grid-column: span 6; }
  .md-col-7  { grid-column: span 7; }
  .md-col-8  { grid-column: span 8; }
  .md-col-9  { grid-column: span 9; }
  .md-col-10 { grid-column: span 10; }
  .md-col-11 { grid-column: span 11; }
  .md-col-12 { grid-column: span 12; }

  .md-offset-0  { grid-column-start: auto; }
  .md-offset-1  { grid-column-start: 2; }
  .md-offset-2  { grid-column-start: 3; }
  .md-offset-3  { grid-column-start: 4; }
  .md-offset-4  { grid-column-start: 5; }
  .md-offset-5  { grid-column-start: 6; }
  .md-offset-6  { grid-column-start: 7; }
  .md-offset-7  { grid-column-start: 8; }
  .md-offset-8  { grid-column-start: 9; }
  .md-offset-9  { grid-column-start: 10; }
  .md-offset-10 { grid-column-start: 11; }
  .md-offset-11 { grid-column-start: 12; }
}

/* Desktop */
@media (min-width: 1024px) {
  .lg-col-1  { grid-column: span 1; }
  .lg-col-2  { grid-column: span 2; }
  .lg-col-3  { grid-column: span 3; }
  .lg-col-4  { grid-column: span 4; }
  .lg-col-5  { grid-column: span 5; }
  .lg-col-6  { grid-column: span 6; }
  .lg-col-7  { grid-column: span 7; }
  .lg-col-8  { grid-column: span 8; }
  .lg-col-9  { grid-column: span 9; }
  .lg-col-10 { grid-column: span 10; }
  .lg-col-11 { grid-column: span 11; }
  .lg-col-12 { grid-column: span 12; }

  .lg-offset-0  { grid-column-start: auto; }
  .lg-offset-1  { grid-column-start: 2; }
  .lg-offset-2  { grid-column-start: 3; }
  .lg-offset-3  { grid-column-start: 4; }
  .lg-offset-4  { grid-column-start: 5; }
  .lg-offset-5  { grid-column-start: 6; }
  .lg-offset-6  { grid-column-start: 7; }
  .lg-offset-7  { grid-column-start: 8; }
  .lg-offset-8  { grid-column-start: 9; }
  .lg-offset-9  { grid-column-start: 10; }
  .lg-offset-10 { grid-column-start: 11; }
  .lg-offset-11 { grid-column-start: 12; }
}

/* Optional: reduce gutter on small screens automatically */
@media (max-width: 767px) {
  .pmg-grid { --grid-gutter: var(--gutter-sm); }
}

/* Margins */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-7 { margin: var(--space-7); }
.m-8 { margin: var(--space-8); }

/* Margins Top */
.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }

/* Margins Bottom */
.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }

/* Margin Left */
.ml-0 { margin-left: var(--space-0); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }
.ml-7 { margin-left: var(--space-7); }
.ml-8 { margin-left: var(--space-8); }

/* Margin Right */
.mr-0 { margin-right: var(--space-0); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }
.mr-7 { margin-right: var(--space-7); }
.mr-8 { margin-right: var(--space-8); }

/* Margin left/right */
.mx-auto { margin-left: auto; margin-right: auto; }

.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }

.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }

/* Padding Utilities */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-7 { padding: var(--space-7); }
.p-8 { padding: var(--space-8); }

/* Padding Top */
.pt-0 { padding-top: var(--space-0); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }

/* Padding Bottom */
.pb-0 { padding-bottom: var(--space-0); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }

/* Padding Left */
.pl-0 { padding-left: var(--space-0); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }

/* Padding Right */
.pr-0 { padding-right: var(--space-0); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }

/* Padding Left/Right */
.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }

/* Padding Top/Bottom */
.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }



/* Website css starts */

/* Splash */
/* Prevent scroll while splash is visible */
body.pmg-splash-active {
  overflow: hidden;
}

/* Splash overlay */
#pmg-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg-body);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pmg-splash__inner {
  text-align: center;
  display: grid;
  gap: 14px;
  place-items: center;
}

.pmg-splash__gif {
  width: 300px;           /* adjust */
  height: auto;
  display: block;
}

.pmg-splash__percent {
  font-size: 28px;       /* adjust */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.85);
  line-height: 1;
}

.pmg-splash__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.45);
}

/* Optional: fade-in for page content after splash */
body.pmg-splash-active #page,
body.pmg-splash-active main {
  visibility: hidden;
}

/* =========================
   Header
========================== */

.site-header {
  background: #000; 
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Container already defined earlier */

.header-inner { 
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
.header-logo img {
  height: 40px; /* adjust to match Figma */
  width: auto;
  display: block;
}

/* Hamburger */
.header-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  width: 26px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}

.header-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  transition: 0.3s ease;
}

.header-toggle.is-active span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}

.header-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.header-toggle.is-active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

.gradient-line--bottom::after{
    content: '';
    display: block;
    width: 100% ;
    height: 1px;
    background: var(--gradient);
}

/* PMG hero video */
:root {
  --header-height: 72px;
}

.pmg-hero-video {
  width: 100%;
}

.pmg-hero-video__wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height));
  max-height: calc(100svh - var(--header-height)); /* better on mobile */
  overflow: hidden;
  background: #000;
}

/* video covers area, never exceeds container */
.pmg-hero-video__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom-to-top overlay covering 50% height */
.pmg-hero-video__overlay {
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.00) 100%
  );
  z-index: 2;
}

/* Sound toggle bottom-right */
.pmg-hero-video__sound {
  position: absolute;
  right: 50px;
  bottom: 50px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.35);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;

  backdrop-filter: blur(6px);
}

.pmg-hero-video__sound:focus-visible {
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
}

.pmg-hero-video__icon {
  line-height: 1;
  font-size: 18px;
}

.pmg-hero-video__icon img {
    padding-top: 4px;
}

/* =========================
   Featured Case Studies
========================== */
.pmg-case-studies {
  background: #000;
  padding: 60px 0;
}

.pmg-section-title {
  text-align: center;
  color: #fff;
  font-family: var(--font-primary);
  font-weight: var(--fw-bold); 
  text-transform: uppercase;
  font-size: 24px;
  margin: 0 0 30px;
  color: #FFF; 
  line-height: 100%; /* 24px */
  text-transform: uppercase;
}

/* use your grid; this adds the special rule */
.pmg-case-studies__grid > *:nth-child(3n) {
  grid-column: 1 / -1; /* every 3rd spans full width */
}

/* Card */
.pmg-case-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.pmg-case-card__media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  height: 400px; /* fixed as per Figma */
}

@media (min-width: 1024px) {
  .pmg-case-card__media { min-height: 280px; }
}

.pmg-case-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* blur “disabled” look by default */
  filter: blur(6px);
  transform: scale(1.03); /* hides blur edges */
  transition: filter 250ms ease, transform 250ms ease;
}

.pmg-case-card__video:hover{
    filter: blur(0px); 
}

/* veil = black overlay + optional extra blur via backdrop */
.pmg-case-card__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Dark overlay like screenshot */
  background: rgba(0, 0, 0, 0.5);

  /* Adds the “disabled glass” vibe */
  backdrop-filter: blur(6px);
  transition: all 250ms ease;
}

/* Title & Logo */
.pmg-case-card__meta {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  z-index: 2;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;

  color: #fff;
}

.pmg-case-card__name {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-size: 24px;
}

.pmg-case-card__logo {
  /* max-height: 30px; */
  max-width: 160px;
  width: 100%;
  display: block;
  opacity: 1;
}

/* Gradient Border Layer */
.pmg-case-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px; /* border width */

  background: linear-gradient(
    90deg,
    #00E5C6 0%,
    #1D6CE9 53.37%,
    #B069F8 100%
  );

  /* This creates the "border only" effect */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}

/* Activate on hover */
.pmg-case-card:hover .pmg-case-card__media::after,
.pmg-case-card:focus-visible .pmg-case-card__media::after {
  opacity: 1;
}

/* Hover: enable feel */
.pmg-case-card:hover .pmg-case-card__video,
.pmg-case-card:focus-visible .pmg-case-card__video {
  filter: blur(0px);
  /* transform: scale(1.01); */
}

.pmg-case-card:hover .pmg-case-card__veil,
.pmg-case-card:focus-visible .pmg-case-card__veil {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
}

.pmg-case-card:focus-visible {
  outline: 2px solid rgba(255,255,255,0.75);
  outline-offset: 4px;
  border-radius: 12px;
}

/* =========================
   Our Story
========================== */
.pmg-our-story {
  background: #000 url("assets/images/Our-Story-bg.jpg") center/cover no-repeat;
  padding: 50px 0 0;
  position: relative;
  color: #fff;
  border-top: 1px solid rgba(255, 250, 230, 0.20);
}

/* If your CSS file is in theme root, use absolute path like:
   background-image: url("./assets/images/Our-Story-bg.jpg");
*/

.pmg-our-story__content {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 50px;
}

.pmg-our-story__text {
  margin: 0 0 30px;
  opacity: 0.8; /* as requested */
  font-family: var(--font-primary);
  font-weight: var(--fw-light); 
  color: #FFF;
  text-align: center; 
  font-size: 20px; 
  line-height: 140%; /* 28px */
}

/* Ticker container */
.pmg-our-story__ticker {
  background: var(--color-primary); 
}

/* Marquee */
.pmg-ticker {
  overflow: hidden;
  width: 100%;
}

.pmg-ticker__track {
  display: flex;
  gap: 40px;
  align-items: center;
  width: max-content;
  padding: 30px 0;
  animation: pmg-marquee 22s linear infinite;
}

.pmg-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  white-space: nowrap;
  color: rgba(255,255,255,1);
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 15px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

.pmg-ticker__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}

/* Smooth continuous loop (track duplicated in markup) */
@keyframes pmg-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause on hover (nice UX) */
.pmg-our-story__ticker:hover .pmg-ticker__track {
  animation-play-state: paused;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .pmg-ticker__track {
    animation: none;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    padding: 24px 20px;
  }
}

/* =========================
   Our Services
========================== */
.pmg-services {
  background: #000;
  padding: 50px 0;
  color: #fff;
}

/* left aligned section title variant */
.pmg-section-title--left {
  text-align: left; 
}

.pmg-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
} 

/* Right image */
.pmg-services__image-wrap {
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-body);
}

.pmg-services__image {
  width: 100%;
  height: auto;
  display: block;
}

/* Accordion */
.pmg-accordion {
  border-top: 1px solid rgba(255,255,255,0.30);
}

.pmg-acc-item {
  border-bottom: 1px solid rgba(255,255,255,0.30);
  padding: 20px 0;
}

.pmg-acc-trigger {
  width: 100%;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-size: 18px; 
  padding: 0;
}

.pmg-acc-icon {
  width: 22px;
  text-align: right;
  font-size: 22px;
  line-height: 1;
  opacity: 0.9;
  user-select: none;
}

.pmg-acc-panel {
  padding-top: 18px;
}

.pmg-services__desc {
  margin: 0 0 16px;
  opacity: 0.8;
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.4;
}

/* Badges row */
.pmg-services__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  /* margin-bottom: 16px; */
}

/* Gradient outline badge */
.pmg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;

  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* Gradient border technique (mask) */
.pmg-badge--grad {
  color: #fff;
  background: rgba(0,0,0,1);
  position: relative;
}

.pmg-badge--grad::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, #00E5C6 0%, #1D6CE9 53.37%, #B069F8 100%);

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
  opacity: 0.5;
}

/* Learn more link spacing */
.pmg-services__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pmg-arrow {
  transition: transform 200ms ease;
}

.pmg-services__link:hover .pmg-arrow {
  transform: translateX(4px);
}


/* =========================
   Our Partners
========================== */
.pmg-partners{
  background:var(--color-primary);
  padding:60px 0;
  overflow:hidden;

  /* tune */
  --partner-card-w: 250px;
  --partner-card-h: 120px;
  --partner-gap: 32px;
  --marquee-speed: 28s; /* change speed here */
}

.pmg-partners__stage{
  margin-top: 28px;
  display:grid;
  gap: 22px;
}

.pmg-partners__row{
  overflow:hidden;
  width:100%;
}

.pmg-partners__track{
  display:flex;
  gap: var(--partner-gap);
  width:max-content;
  will-change: transform;
  padding: 0 var(--partner-gap);
}

/* cards */
.pmg-partners__card{
  width: var(--partner-card-w);
  height: var(--partner-card-h);
  border-radius: 12px;
  background: rgba(0,0,0,1);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}

.pmg-partners__card img{
  max-width:70%;
  max-height:45%;
  opacity:0.92;
  display:block;
}

/* animations */
.pmg-partners__row--ltr .pmg-partners__track{
  animation: pmg-marquee-ltr var(--marquee-speed) linear infinite;
}

.pmg-partners__row--rtl .pmg-partners__track{
  animation: pmg-marquee-rtl calc(var(--marquee-speed) * 1.05) linear infinite;
}

/* move by 1/3 of the track content that we duplicated (we duplicated 3x)
   so shifting -33.333% loops seamlessly */
@keyframes pmg-marquee-ltr{
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

@keyframes pmg-marquee-rtl{
  from { transform: translateX(-33.333%); }
  to   { transform: translateX(0); }
}

/* pause on hover */
.pmg-partners__row:hover .pmg-partners__track{
  animation-play-state: paused;
}

/* responsive card sizing */
@media (max-width: 768px){
  .pmg-partners{ padding:56px 0; --partner-card-w: 180px; --partner-card-h: 82px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .pmg-partners__track{ animation: none !important; flex-wrap: wrap; width: 100%; justify-content: center; }
}

.pmg-partners__track{ animation-play-state: paused; }
.pmg-partners.is-inview .pmg-partners__track{ animation-play-state: running; }






/* Responsive breakpoints */

@media screen and (min-width:1199px) {
  .px-lg-5{
    padding-left: 50px;
    padding-right: 50px;
  }
  .pb-lg-2{
    padding-bottom: 16px;
  }
}

@media (min-width: 1024px) {
  .pmg-services__grid {
    grid-template-columns: 60% 40%;
    align-items: start;
    gap: 40px;
  }
}

 
@media (max-width: 767px) {
  .pmg-case-card__media {
    height: 280px;
  }
}