/* ============================================================
   PULSEGRID DIGITAL — GLOBAL DESIGN SYSTEM
   Colours sampled directly from the official PulseGrid logo.
   Load order: pulsegrid-global.css -> pulsegrid-forms.css -> pulsegrid-responsive.css
   ============================================================ */

:root{
  /* --- Brand accents (sampled from logo) --- */
  --pg-magenta:#EC008C;
  --pg-coral:#EF3124;
  --pg-amber:#F7C400;
  --pg-green:#06C755;
  --pg-ink:#191629;

  /* --- Dark surface ramp --- */
  --pg-void:#08070D;
  --pg-base:#0D0B14;
  --pg-surface:#12101A;
  --pg-elevated:#181522;

  /* --- Neutrals --- */
  --pg-white:#FFFFFF;
  --pg-text:#F5F5F7;
  --pg-muted:#C5C3CC;
  --pg-dim:#8E8B98;

  /* --- Lines & glass --- */
  --pg-line:rgba(255,255,255,.09);
  --pg-line-strong:rgba(255,255,255,.16);
  --pg-glass:rgba(255,255,255,.035);
  --pg-glass-2:rgba(255,255,255,.055);

  /* --- Signature gradients --- */
  --pg-grad:linear-gradient(96deg,var(--pg-magenta) 0%,var(--pg-coral) 34%,var(--pg-amber) 68%,var(--pg-green) 100%);
  --pg-grad-soft:linear-gradient(96deg,rgba(236,0,140,.9),rgba(239,49,36,.9) 40%,rgba(247,196,0,.9) 72%,rgba(6,199,85,.9));
  --pg-grad-2:linear-gradient(140deg,var(--pg-magenta),var(--pg-coral));

  /* --- Type --- */
  --pg-display:"Space Grotesk","Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pg-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* --- Fluid type scale --- */
  --pg-h1:clamp(2.55rem,1.05rem + 6.1vw,5.75rem);   /* 41 -> 92px */
  --pg-h2:clamp(2.05rem,1.05rem + 4.0vw,4.5rem);    /* 33 -> 72px */
  --pg-h3:clamp(1.55rem,1.05rem + 1.9vw,2.5rem);
  --pg-h4:clamp(1.2rem,1.02rem + .72vw,1.5rem);
  --pg-body-size:clamp(1rem,.96rem + .2vw,1.125rem);
  --pg-lead:clamp(1.06rem,.98rem + .42vw,1.3rem);
  --pg-small:.875rem;
  --pg-micro:.75rem;

  /* --- Layout --- */
  --pg-max:1320px;
  --pg-narrow:820px;
  --pg-gutter:clamp(20px,4.4vw,64px);
  --pg-sec-y:clamp(60px,9vw,150px);
  --pg-header-h:82px;

  /* --- Radii --- */
  --pg-r-sm:10px;
  --pg-r:18px;
  --pg-r-lg:26px;
  --pg-r-pill:999px;

  /* --- Motion --- */
  --pg-ease:cubic-bezier(.22,1,.36,1);
  --pg-ease-io:cubic-bezier(.65,.05,.36,1);
  --pg-fast:.22s;
  --pg-med:.45s;
  --pg-slow:.8s;
}

/* ============================================================
   1. RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.pg-site{
  margin:0;
  background:var(--pg-base);
  color:var(--pg-text);
  font-family:var(--pg-body);
  font-size:var(--pg-body-size);
  line-height:1.65;
  font-weight:400;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Ambient page field: radial brand light + fine grid, fixed behind everything */
body.pg-site::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(720px 460px at 12% -6%,rgba(236,0,140,.16),transparent 62%),
    radial-gradient(620px 440px at 92% 4%,rgba(6,199,85,.10),transparent 60%),
    radial-gradient(900px 700px at 50% 108%,rgba(239,49,36,.09),transparent 66%);
}
/* Grain */
body.pg-site::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.pg-site > *{position:relative;z-index:2}

::selection{background:var(--pg-magenta);color:#fff}
::-moz-selection{background:var(--pg-magenta);color:#fff}

.pg-site ::-webkit-scrollbar{width:11px;height:11px}
.pg-site ::-webkit-scrollbar-track{background:var(--pg-void)}
.pg-site ::-webkit-scrollbar-thumb{background:#2a2537;border-radius:999px;border:3px solid var(--pg-void)}
.pg-site ::-webkit-scrollbar-thumb:hover{background:#3b3450}

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

/* Inline brand-mark rows. The global `height:auto` above would otherwise
   override an <img height> attribute and let a viewBox-only SVG expand
   to the full column width. */
.pg-marks{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 22px}
.pg-marks img,.pg-marks svg{height:20px;width:auto;flex:none;opacity:.9}
.pg-marks img.pg-mark-mono{filter:invert(1);opacity:.75}

a{color:inherit;text-decoration:none}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--pg-amber);
  outline-offset:3px;
  border-radius:4px;
}

/* The hidden attribute must win over any display rule we set later
   (a .pg-error is display:flex, which would otherwise override it). */
[hidden]{display:none!important}

.pg-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pg-skip{
  position:absolute;left:16px;top:-70px;z-index:999;
  background:var(--pg-white);color:var(--pg-ink);
  padding:12px 20px;border-radius:var(--pg-r-sm);font-weight:700;
  transition:top var(--pg-fast) var(--pg-ease);
}
.pg-skip:focus{top:16px}

/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4,h5,h6,.pg-display{
  font-family:var(--pg-display);
  font-weight:600;
  line-height:1.03;
  letter-spacing:-.032em;
  margin:0 0 .5em;
  color:var(--pg-white);
  text-wrap:balance;
}
h1,.pg-h1{font-size:var(--pg-h1);font-weight:700;letter-spacing:-.042em}
h2,.pg-h2{font-size:var(--pg-h2);font-weight:700;letter-spacing:-.038em}
h3,.pg-h3{font-size:var(--pg-h3)}
h4,.pg-h4{font-size:var(--pg-h4);line-height:1.25;letter-spacing:-.02em}

p{margin:0 0 1.15em;max-width:68ch}
p:last-child{margin-bottom:0}

.pg-lead{font-size:var(--pg-lead);line-height:1.6;color:var(--pg-muted);max-width:56ch;font-weight:400}
.pg-muted{color:var(--pg-muted)}
.pg-dim{color:var(--pg-dim)}

/* Eyebrow — a thin pulse dot + tracked label */
.pg-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--pg-display);font-size:var(--pg-micro);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--pg-dim);
  margin:0 0 22px;
}
.pg-eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--pg-magenta);
  box-shadow:0 0 0 0 rgba(236,0,140,.55);
  animation:pgPulse 2.6s var(--pg-ease-io) infinite;
  flex:none;
}
@keyframes pgPulse{
  0%{box-shadow:0 0 0 0 rgba(236,0,140,.5)}
  70%{box-shadow:0 0 0 11px rgba(236,0,140,0)}
  100%{box-shadow:0 0 0 0 rgba(236,0,140,0)}
}

/* Gradient text */
.pg-gradient-text{
  background:var(--pg-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:220% 100%;
  animation:pgGradSlide 9s linear infinite;
  padding-right:.06em;
}
@keyframes pgGradSlide{to{background-position:220% 0}}

/* Outline (stroked) display type for tickers */
.pg-outline-text{
  color:transparent;
  -webkit-text-stroke:1.4px rgba(255,255,255,.26);
  text-stroke:1.4px rgba(255,255,255,.26);
}

/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */
.pg-section{padding:var(--pg-sec-y) 0;position:relative}
/* Consecutive sections must not stack their padding into a 300px void —
   the preceding section's bottom padding already sets the rhythm. */
.pg-section + .pg-section{padding-top:0}
.pg-section--tight{padding:clamp(44px,5.5vw,84px) 0}
.pg-section--tight + .pg-section{padding-top:0}
.pg-shell{width:100%;max-width:var(--pg-max);margin:0 auto;padding:0 var(--pg-gutter)}
.pg-shell--narrow{max-width:var(--pg-narrow)}

.pg-grid{display:grid;gap:clamp(16px,2vw,28px)}
.pg-grid--2{grid-template-columns:repeat(2,1fr)}
.pg-grid--3{grid-template-columns:repeat(3,1fr)}
.pg-grid--4{grid-template-columns:repeat(4,1fr)}

/* Section head: heading left, supporting copy right (asymmetric) */
.pg-sechead{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px,4vw,72px);align-items:end;
  margin-bottom:clamp(38px,5vw,74px);
}
.pg-sechead h2{margin-bottom:0}
.pg-sechead__aside{padding-bottom:6px}

/* Hairline rule that draws in on scroll */
.pg-rule{height:1px;background:var(--pg-line);border:0;margin:0;transform-origin:left;}

/* ============================================================
   4. BUTTON SYSTEM
   ============================================================ */
.pg-btn{
  --pg-btn-pad:16px 30px;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--pg-display);font-weight:600;font-size:.94rem;letter-spacing:-.01em;
  padding:var(--pg-btn-pad);border-radius:var(--pg-r-pill);
  border:1px solid transparent;cursor:pointer;position:relative;isolation:isolate;
  transition:transform var(--pg-fast) var(--pg-ease),box-shadow var(--pg-med) var(--pg-ease),
             background-color var(--pg-fast) var(--pg-ease),border-color var(--pg-fast) var(--pg-ease),
             color var(--pg-fast) var(--pg-ease);
  text-align:center;line-height:1.2;
}
.pg-btn__arrow{
  width:15px;height:15px;flex:none;
  transition:transform var(--pg-med) var(--pg-ease);
}
.pg-btn:hover .pg-btn__arrow{transform:translateX(5px)}
.pg-btn:active{transform:translateY(1px)}

/* PRIMARY — brand gradient */
.pg-btn--primary{
  color:#0B0912;
  background:var(--pg-grad);
  background-size:180% 100%;
  background-position:0% 0;
  font-weight:700;
  box-shadow:0 8px 26px -12px rgba(236,0,140,.6);
}
.pg-btn--primary:hover{
  background-position:100% 0;
  box-shadow:0 14px 38px -14px rgba(236,0,140,.75);
  transform:translateY(-2px);
}
.pg-btn--primary .pg-btn__arrow{stroke:#0B0912}

/* SECONDARY — outline */
.pg-btn--secondary{
  color:var(--pg-white);
  border-color:var(--pg-line-strong);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px);
}
.pg-btn--secondary:hover{
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.06);
  transform:translateY(-2px);
}

/* TEXT button */
.pg-btn--text{
  padding:6px 0;border-radius:0;color:var(--pg-white);
  border-bottom:1px solid var(--pg-line-strong);
  gap:9px;
}
.pg-btn--text:hover{border-bottom-color:var(--pg-magenta);color:var(--pg-white)}

.pg-btn--sm{--pg-btn-pad:11px 22px;font-size:.85rem}
.pg-btn--block{width:100%}

.pg-btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* Header CTA — animated gradient border + magnetic */
.pg-cta-nav{
  --pg-btn-pad:12px 26px;
  color:var(--pg-white);
  background:rgba(255,255,255,.03);
  font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:0;
}
.pg-cta-nav::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;z-index:-1;
  background:var(--pg-grad);background-size:230% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:pgGradSlide 6s linear infinite;
}
.pg-cta-nav::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;
  background:var(--pg-grad);filter:blur(15px);opacity:0;
  transition:opacity var(--pg-med) var(--pg-ease);
}
.pg-cta-nav:hover::after{opacity:.42}
.pg-cta-nav:hover{background:rgba(255,255,255,.07)}

/* ============================================================
   5. CARDS
   ============================================================ */
.pg-card{
  position:relative;
  background:linear-gradient(168deg,var(--pg-glass-2),var(--pg-glass) 55%,rgba(255,255,255,.015));
  border:1px solid var(--pg-line);
  border-radius:var(--pg-r-lg);
  padding:clamp(22px,2.6vw,34px);
  overflow:hidden;
  transition:transform var(--pg-med) var(--pg-ease),border-color var(--pg-med) var(--pg-ease),
             background-color var(--pg-med) var(--pg-ease);
}
/* top inner highlight */
.pg-card::before{
  content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  opacity:.8;
}
/* cursor-following glow (set via JS custom props) */
.pg-card--glow::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity var(--pg-med) var(--pg-ease);
  background:radial-gradient(280px circle at var(--pg-mx,50%) var(--pg-my,50%),
             rgba(236,0,140,.16),transparent 68%);
}
.pg-card--glow:hover::after{opacity:1}
.pg-card:hover{border-color:var(--pg-line-strong);transform:translateY(-4px)}

.pg-card__num{
  font-family:var(--pg-display);font-size:.78rem;font-weight:600;letter-spacing:.2em;
  color:var(--pg-dim);display:block;margin-bottom:16px;
}
.pg-card__title{font-size:var(--pg-h4);margin:0 0 10px;color:var(--pg-white)}
.pg-card__body{font-size:.95rem;color:var(--pg-muted);margin:0}

/* Card arrow that reveals on hover */
.pg-card__arrow{
  position:absolute;top:26px;right:26px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--pg-line);
  opacity:0;transform:translate(-6px,6px);
  transition:opacity var(--pg-med) var(--pg-ease),transform var(--pg-med) var(--pg-ease),
             border-color var(--pg-med) var(--pg-ease);
}
.pg-card:hover .pg-card__arrow{opacity:1;transform:none;border-color:var(--pg-line-strong)}
.pg-card__arrow svg{width:13px;height:13px;stroke:var(--pg-white)}

/* Accent variants — used sparingly, one accent per card */
.pg-a-magenta{--pg-accent:var(--pg-magenta)}
.pg-a-coral{--pg-accent:var(--pg-coral)}
.pg-a-amber{--pg-accent:var(--pg-amber)}
.pg-a-green{--pg-accent:var(--pg-green)}
[class*="pg-a-"] .pg-card__num,[class*="pg-a-"] .pg-accent-dot{color:var(--pg-accent)}

/* ============================================================
   6. HEADER
   ============================================================ */
.pg-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--pg-header-h);
  display:flex;align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color var(--pg-med) var(--pg-ease),backdrop-filter var(--pg-med) var(--pg-ease),
             border-color var(--pg-med) var(--pg-ease),height var(--pg-med) var(--pg-ease),
             box-shadow var(--pg-med) var(--pg-ease);
}
.pg-header.is-stuck{
  height:70px;
  background:rgba(9,8,14,.82);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--pg-line);
  box-shadow:0 10px 40px -24px rgba(0,0,0,.9);
}
.pg-header__inner{
  width:100%;max-width:var(--pg-max);margin:0 auto;padding:0 var(--pg-gutter);
  display:flex;align-items:center;gap:26px;
}
.pg-logo{display:flex;align-items:center;flex:none;margin-right:auto}
.pg-logo img{height:38px;width:auto}

.pg-nav{display:flex;align-items:center;gap:6px}
.pg-nav a{
  position:relative;padding:10px 15px;font-size:.92rem;font-weight:500;
  color:var(--pg-muted);transition:color var(--pg-fast) var(--pg-ease);
}
.pg-nav a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:1.5px;
  background:var(--pg-grad);transform:scaleX(0);transform-origin:left;
  transition:transform var(--pg-med) var(--pg-ease);
}
.pg-nav a:hover{color:var(--pg-white)}
.pg-nav a:hover::after,.pg-nav a[aria-current="page"]::after{transform:scaleX(1)}
.pg-nav a[aria-current="page"]{color:var(--pg-white)}

.pg-header__cta{flex:none;margin-left:10px}

/* Burger */
.pg-burger{
  /* Flex, not grid: grid distributes free space between the three rows,
     which pushes the bars ~18px apart and turns the "X" into a ">". */
  display:none;width:44px;height:44px;border:1px solid var(--pg-line);
  border-radius:12px;background:rgba(255,255,255,.03);cursor:pointer;
  padding:0;flex-direction:column;align-items:center;justify-content:center;flex:none;
}
.pg-burger span{
  display:block;width:19px;height:1.6px;background:var(--pg-white);border-radius:2px;
  transition:transform var(--pg-med) var(--pg-ease),opacity var(--pg-fast) var(--pg-ease);
}
.pg-burger span+span{margin-top:5px}
.pg-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.pg-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.pg-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* Mobile panel */
.pg-mobilenav{
  position:fixed;inset:0;z-index:190;
  background:rgba(8,7,13,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  padding:calc(var(--pg-header-h) + 30px) var(--pg-gutter) 40px;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .58s var(--pg-ease),opacity .3s var(--pg-ease),visibility .58s;
  overflow-y:auto;
}
.pg-mobilenav.is-open{opacity:1;visibility:visible;clip-path:inset(0 0 0 0)}
.pg-mobilenav a.pg-mobilenav__link{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-family:var(--pg-display);font-size:clamp(1.9rem,9vw,2.9rem);font-weight:600;
  letter-spacing:-.04em;color:var(--pg-white);
  padding:15px 0;border-bottom:1px solid var(--pg-line);
  opacity:0;transform:translateY(22px);
}
.pg-mobilenav.is-open a.pg-mobilenav__link{
  animation:pgNavIn .55s var(--pg-ease) forwards;
}
.pg-mobilenav.is-open a.pg-mobilenav__link:nth-child(1){animation-delay:.1s}
.pg-mobilenav.is-open a.pg-mobilenav__link:nth-child(2){animation-delay:.16s}
.pg-mobilenav.is-open a.pg-mobilenav__link:nth-child(3){animation-delay:.22s}
.pg-mobilenav.is-open a.pg-mobilenav__link:nth-child(4){animation-delay:.28s}
.pg-mobilenav.is-open a.pg-mobilenav__link:nth-child(5){animation-delay:.34s}
@keyframes pgNavIn{to{opacity:1;transform:none}}
.pg-mobilenav__idx{font-size:.72rem;letter-spacing:.2em;color:var(--pg-dim);font-family:var(--pg-display)}
.pg-mobilenav__foot{margin-top:auto;padding-top:34px;display:grid;gap:18px}
.pg-mobilenav__meta{font-size:.9rem;color:var(--pg-dim);display:grid;gap:4px}

body.pg-lock{overflow:hidden}

/* ============================================================
   7. HERO SHARED
   ============================================================ */
.pg-hero{
  position:relative;
  padding-top:calc(var(--pg-header-h) + clamp(48px,7vw,110px));
  padding-bottom:clamp(60px,8vw,120px);
  overflow:hidden;
}
.pg-hero__meta{
  display:flex;align-items:center;gap:12px;
  font-size:.84rem;color:var(--pg-dim);margin-top:34px;
}
.pg-hero__meta .pg-node{width:6px;height:6px;border-radius:50%;background:var(--pg-green);flex:none}

/* Hero canvas / svg stage */
.pg-stage{position:relative;width:100%}
.pg-stage canvas{display:block;width:100%;height:100%}

/* ============================================================
   8. REVEAL SYSTEM (works with or without JS)
   ============================================================ */
.pg-reveal{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--pg-ease),transform .85s var(--pg-ease)}
.pg-reveal.is-in{opacity:1;transform:none}
.no-js .pg-reveal,html:not(.pg-js) .pg-reveal{opacity:1;transform:none}

/* word-by-word headline reveal */
.pg-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.pg-word > span{display:inline-block;transform:translateY(105%);
  transition:transform .95s var(--pg-ease)}
.is-in .pg-word > span,.pg-word.is-in > span{transform:none}
html:not(.pg-js) .pg-word > span{transform:none}

/* blur reveal */
.pg-blur-in{filter:blur(12px);opacity:0;transition:filter 1s var(--pg-ease),opacity 1s var(--pg-ease)}
.pg-blur-in.is-in{filter:none;opacity:1}
html:not(.pg-js) .pg-blur-in{filter:none;opacity:1}

/* line draw */
.pg-line-draw{stroke-dasharray:var(--pg-len,1000);stroke-dashoffset:var(--pg-len,1000);
  transition:stroke-dashoffset 1.6s var(--pg-ease)}
.pg-line-draw.is-in{stroke-dashoffset:0}

/* ============================================================
   9. MARQUEE / TICKER
   ============================================================ */
.pg-marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.pg-marquee__track{display:flex;width:max-content;will-change:transform;
  animation:pgMarquee var(--pg-mq-dur,42s) linear infinite}
.pg-marquee:hover .pg-marquee__track,.pg-marquee.is-paused .pg-marquee__track{animation-play-state:paused}
@keyframes pgMarquee{to{transform:translate3d(-50%,0,0)}}

.pg-platform{
  display:flex;align-items:center;gap:12px;
  padding:0 clamp(26px,3.4vw,52px);height:74px;flex:none;
  color:var(--pg-muted);
  font-family:var(--pg-display);font-weight:500;font-size:1rem;letter-spacing:-.01em;
  opacity:.62;transition:opacity var(--pg-med) var(--pg-ease),color var(--pg-med) var(--pg-ease);
}
.pg-platform:hover{opacity:1;color:var(--pg-white)}
.pg-platform svg,.pg-platform img{height:24px;width:auto;flex:none}

/* Big process ticker */
.pg-ticker{padding:clamp(30px,4vw,56px) 0;border-block:1px solid var(--pg-line)}
.pg-ticker .pg-marquee__track{--pg-mq-dur:34s}
.pg-ticker__item{
  display:flex;align-items:center;gap:clamp(24px,3vw,46px);padding-right:clamp(24px,3vw,46px);
  font-family:var(--pg-display);font-weight:700;
  font-size:clamp(2rem,6.2vw,5rem);line-height:1;letter-spacing:-.045em;
  text-transform:uppercase;white-space:nowrap;
}
.pg-ticker__sep{width:clamp(9px,1.1vw,15px);height:clamp(9px,1.1vw,15px);border-radius:2px;
  background:var(--pg-accent,var(--pg-magenta));transform:rotate(45deg);flex:none}

/* ============================================================
   10. BENTO GRID (Home services)
   ============================================================ */
.pg-bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(12px,1.35vw,18px);
}
.pg-bento > *{min-width:0}
.pg-b-4{grid-column:span 4}
.pg-b-3{grid-column:span 3}
.pg-b-2{grid-column:span 2}
.pg-b-6{grid-column:span 6}

.pg-bento .pg-card{display:flex;flex-direction:column;min-height:230px}
.pg-bento .pg-card__head{position:relative;z-index:2}
.pg-bento .pg-card__viz{margin-top:auto;padding-top:26px;position:relative;z-index:1}

/* --- Bento micro-visualisations (pure CSS/SVG) --- */
/* Campaign bars (Meta) */
.pg-viz-bars{display:flex;align-items:flex-end;gap:7px;height:74px}
.pg-viz-bars i{
  flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--pg-magenta),rgba(236,0,140,.16));
  height:22%;transform-origin:bottom;animation:pgBar 3.4s var(--pg-ease-io) infinite;
}
.pg-viz-bars i:nth-child(2){animation-delay:.18s}
.pg-viz-bars i:nth-child(3){animation-delay:.36s}
.pg-viz-bars i:nth-child(4){animation-delay:.54s}
.pg-viz-bars i:nth-child(5){animation-delay:.72s}
.pg-viz-bars i:nth-child(6){animation-delay:.9s}
.pg-viz-bars i:nth-child(7){animation-delay:1.08s}
@keyframes pgBar{0%,100%{height:20%}45%{height:96%}}

/* Search field (Google Ads) */
.pg-viz-search{
  border:1px solid var(--pg-line);border-radius:12px;padding:13px 16px;
  display:flex;align-items:center;gap:11px;background:rgba(0,0,0,.28);
  font-size:.86rem;color:var(--pg-muted);font-family:var(--pg-display);
}
.pg-viz-search .pg-caret{width:1.5px;height:15px;background:var(--pg-amber);animation:pgBlink 1.05s steps(2) infinite}
@keyframes pgBlink{50%{opacity:0}}
.pg-viz-search__q{overflow:hidden;white-space:nowrap;border-right:0}

/* Ranking rows (SEO) */
.pg-viz-rank{display:grid;gap:8px}
.pg-viz-rank div{
  height:11px;border-radius:3px;background:rgba(255,255,255,.075);position:relative;overflow:hidden;
}
.pg-viz-rank div::after{
  content:"";position:absolute;inset:0;width:var(--w,40%);
  background:linear-gradient(90deg,var(--pg-green),rgba(6,199,85,.2));border-radius:3px;
  animation:pgRank 4.5s var(--pg-ease-io) infinite;
}
.pg-viz-rank div:nth-child(2)::after{animation-delay:.4s}
.pg-viz-rank div:nth-child(3)::after{animation-delay:.8s}
@keyframes pgRank{0%,100%{width:24%}50%{width:var(--w,80%)}}

/* Floating content cards (Social) */
.pg-viz-float{position:relative;height:80px}
.pg-viz-float i{
  position:absolute;width:46px;height:56px;border-radius:8px;
  border:1px solid var(--pg-line-strong);background:rgba(255,255,255,.05);
  animation:pgFloat 5.4s var(--pg-ease-io) infinite;
}
.pg-viz-float i:nth-child(1){left:2%;bottom:6px;transform:rotate(-8deg)}
.pg-viz-float i:nth-child(2){left:32%;bottom:14px;animation-delay:.5s;border-color:rgba(247,196,0,.4)}
.pg-viz-float i:nth-child(3){left:62%;bottom:2px;transform:rotate(7deg);animation-delay:1s}
@keyframes pgFloat{0%,100%{translate:0 0}50%{translate:0 -11px}}

/* Browser window (Web) */
.pg-viz-browser{
  border:1px solid var(--pg-line);border-radius:11px;overflow:hidden;background:rgba(0,0,0,.3);
  transition:transform var(--pg-med) var(--pg-ease);
}
.pg-viz-browser__bar{display:flex;gap:5px;padding:9px 11px;border-bottom:1px solid var(--pg-line)}
.pg-viz-browser__bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2)}
.pg-viz-browser__bar i:nth-child(1){background:var(--pg-coral)}
.pg-viz-browser__bar i:nth-child(2){background:var(--pg-amber)}
.pg-viz-browser__bar i:nth-child(3){background:var(--pg-green)}
.pg-viz-browser__body{padding:13px;display:grid;gap:7px}
.pg-viz-browser__body span{height:8px;border-radius:3px;background:rgba(255,255,255,.09)}
.pg-viz-browser__body span:nth-child(1){width:62%;background:rgba(236,0,140,.4)}
.pg-viz-browser__body span:nth-child(2){width:88%}
.pg-viz-browser__body span:nth-child(3){width:44%}

/* Line graph (Analytics) */
.pg-viz-graph{width:100%;height:78px;overflow:visible}
.pg-viz-graph path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Video timeline */
.pg-viz-timeline{position:relative;height:56px;display:grid;gap:7px;align-content:center}
.pg-viz-timeline i{height:13px;border-radius:3px;background:rgba(255,255,255,.08)}
.pg-viz-timeline i:nth-child(1){width:72%;background:linear-gradient(90deg,rgba(239,49,36,.55),rgba(239,49,36,.12))}
.pg-viz-timeline i:nth-child(2){width:48%}
.pg-viz-timeline__head{
  position:absolute;top:-4px;bottom:-4px;width:1.6px;background:var(--pg-white);left:8%;
  animation:pgPlayhead 5s linear infinite;
}
.pg-viz-timeline__head::before{content:"";position:absolute;top:-4px;left:-3.2px;width:8px;height:8px;border-radius:50%;background:var(--pg-white)}
@keyframes pgPlayhead{0%{left:4%}100%{left:88%}}

/* Cart flow (Shopify) */
.pg-viz-flow{display:flex;align-items:center;gap:9px}
.pg-viz-flow span{
  flex:1;padding:9px 0;text-align:center;border-radius:8px;font-size:.7rem;
  font-family:var(--pg-display);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--pg-line);color:var(--pg-dim);
  animation:pgFlowStep 4.2s var(--pg-ease-io) infinite;
}
.pg-viz-flow span:nth-child(2){animation-delay:.55s}
.pg-viz-flow span:nth-child(3){animation-delay:1.1s}
@keyframes pgFlowStep{
  0%,72%,100%{border-color:var(--pg-line);color:var(--pg-dim);background:transparent}
  22%,50%{border-color:rgba(6,199,85,.5);color:var(--pg-white);background:rgba(6,199,85,.09)}
}

/* Brand swatches */
.pg-viz-swatch{display:flex;gap:9px}
.pg-viz-swatch i{
  width:34px;height:34px;border-radius:9px;flex:none;
  animation:pgSwatch 4.6s var(--pg-ease-io) infinite;
}
.pg-viz-swatch i:nth-child(1){background:var(--pg-magenta)}
.pg-viz-swatch i:nth-child(2){background:var(--pg-coral);animation-delay:.25s}
.pg-viz-swatch i:nth-child(3){background:var(--pg-amber);animation-delay:.5s}
.pg-viz-swatch i:nth-child(4){background:var(--pg-green);animation-delay:.75s}
@keyframes pgSwatch{0%,100%{border-radius:9px}50%{border-radius:50%}}

/* ============================================================
   11. STICKY SCROLL STORY
   ============================================================ */
.pg-story{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,90px);align-items:start}
.pg-story__sticky{
  position:sticky;top:calc(var(--pg-header-h) + 44px);
  aspect-ratio:1/1;border-radius:var(--pg-r-lg);
  border:1px solid var(--pg-line);overflow:hidden;
  background:radial-gradient(90% 90% at 50% 40%,rgba(255,255,255,.05),rgba(0,0,0,.34));
}
.pg-story__stages{display:grid;gap:clamp(14px,2vw,22px);padding:clamp(20px,5vw,80px) 0}
.pg-stage-item{
  padding:clamp(22px,2.6vw,32px);border-radius:var(--pg-r);
  border:1px solid var(--pg-line);background:rgba(255,255,255,.02);
  opacity:.4;transition:opacity var(--pg-med) var(--pg-ease),border-color var(--pg-med) var(--pg-ease),
             background-color var(--pg-med) var(--pg-ease),transform var(--pg-med) var(--pg-ease);
}
.pg-stage-item.is-active{opacity:1;border-color:var(--pg-line-strong);background:rgba(255,255,255,.045)}
.pg-stage-item__idx{
  font-family:var(--pg-display);font-size:.78rem;letter-spacing:.2em;color:var(--pg-dim);
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.pg-stage-item.is-active .pg-stage-item__idx{color:var(--pg-accent,var(--pg-magenta))}
.pg-stage-item h3{font-size:clamp(1.35rem,2.4vw,2rem);margin-bottom:8px}
.pg-stage-item p{color:var(--pg-muted);font-size:.97rem;margin:0}

/* Story SVG scene */
.pg-scene{position:absolute;inset:0;display:grid;place-items:center}
.pg-scene__layer{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  transform:scale(.94);transition:opacity .6s var(--pg-ease),transform .6s var(--pg-ease)}
.pg-scene__layer.is-active{opacity:1;transform:none}

/* ============================================================
   12. NUMBERED REASONS / COUNTERS
   ============================================================ */
.pg-reason{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,38px);
  padding:clamp(24px,3vw,38px) 0;border-top:1px solid var(--pg-line);
  align-items:start;
}
.pg-reason__num{
  font-family:var(--pg-display);font-weight:700;
  font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:.9;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.3px rgba(255,255,255,.3);
  transition:color .6s var(--pg-ease),-webkit-text-stroke-color .6s var(--pg-ease);
}
.pg-reason:hover .pg-reason__num,.pg-reason.is-in .pg-reason__num{
  -webkit-text-stroke-color:transparent;
  background:var(--pg-grad);-webkit-background-clip:text;background-clip:text;
}
.pg-reason h3{font-size:clamp(1.25rem,2.2vw,1.8rem);margin-bottom:8px}
.pg-reason p{color:var(--pg-muted);margin:0;font-size:.98rem}

.pg-metric{display:grid;gap:4px}
.pg-metric__val{
  font-family:var(--pg-display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(2rem,3.6vw,3.1rem);line-height:1;color:var(--pg-white);
}
.pg-metric__label{font-size:.83rem;color:var(--pg-dim);letter-spacing:.04em}

/* Placeholder flag — must be replaced before publishing */
.pg-placeholder{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pg-amber);background:rgba(247,196,0,.1);
  border:1px dashed rgba(247,196,0,.42);border-radius:var(--pg-r-pill);
  padding:4px 11px;margin-top:10px;
}

/* ============================================================
   13. BLOG
   ============================================================ */
.pg-post{
  display:flex;flex-direction:column;height:100%;
  border-radius:var(--pg-r-lg);overflow:hidden;
  border:1px solid var(--pg-line);background:rgba(255,255,255,.022);
  transition:border-color var(--pg-med) var(--pg-ease),transform var(--pg-med) var(--pg-ease);
}
.pg-post:hover{border-color:var(--pg-line-strong);transform:translateY(-4px)}
.pg-post__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--pg-elevated)}
.pg-post__media img,.pg-post__media svg{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--pg-ease)}
.pg-post:hover .pg-post__media img,.pg-post:hover .pg-post__media svg{transform:scale(1.035)}
.pg-post__cat{
  position:absolute;left:14px;top:14px;
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--pg-r-pill);
  background:rgba(8,7,13,.72);backdrop-filter:blur(8px);border:1px solid var(--pg-line-strong);
  color:var(--pg-white);transition:transform var(--pg-med) var(--pg-ease);
}
.pg-post:hover .pg-post__cat{transform:translateY(-3px)}
.pg-post__body{padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:11px;flex:1}
.pg-post__title{font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.22;margin:0}
.pg-post__excerpt{font-size:.93rem;color:var(--pg-muted);margin:0}
.pg-post__meta{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--pg-line);
  display:flex;align-items:center;gap:9px;font-size:.79rem;color:var(--pg-dim);
}
.pg-post__meta .pg-dot{width:3px;height:3px;border-radius:50%;background:currentColor;flex:none}
.pg-post__meta .pg-post__go{margin-left:auto;transition:transform var(--pg-med) var(--pg-ease)}
.pg-post:hover .pg-post__go{transform:translateX(4px)}

/* Featured (asymmetric) post */
.pg-post--featured{flex-direction:row;align-items:stretch}
.pg-post--featured .pg-post__media{flex:0 0 54%;aspect-ratio:auto}
.pg-post--featured .pg-post__body{justify-content:center;padding:clamp(24px,3.6vw,52px);gap:14px}
.pg-post--featured .pg-post__title{font-size:clamp(1.5rem,3vw,2.4rem)}

/* Category filter */
.pg-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(28px,3.5vw,48px)}
.pg-chip{
  padding:9px 18px;border-radius:var(--pg-r-pill);border:1px solid var(--pg-line);
  font-size:.85rem;color:var(--pg-muted);background:transparent;cursor:pointer;
  font-family:var(--pg-body);
  transition:all var(--pg-fast) var(--pg-ease);
}
.pg-chip:hover{border-color:var(--pg-line-strong);color:var(--pg-white)}
.pg-chip.is-active{background:var(--pg-white);color:var(--pg-ink);border-color:var(--pg-white);font-weight:600}

/* Single post */
.pg-article{font-size:1.08rem;line-height:1.78;color:var(--pg-muted)}
.pg-article h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:1.9em 0 .55em;color:var(--pg-white)}
.pg-article h3{font-size:clamp(1.25rem,2vw,1.55rem);margin:1.6em 0 .5em}
.pg-article p{max-width:none}
.pg-article ul,.pg-article ol{padding-left:1.25em;margin:0 0 1.3em}
.pg-article li{margin-bottom:.5em}
.pg-article blockquote{
  margin:1.9em 0;padding:4px 0 4px 26px;border-left:2px solid var(--pg-magenta);
  font-family:var(--pg-display);font-size:1.28rem;line-height:1.45;color:var(--pg-white);
  letter-spacing:-.02em;
}
.pg-article a{color:var(--pg-white);border-bottom:1px solid var(--pg-magenta)}

/* Table of contents */
.pg-toc{
  position:sticky;top:calc(var(--pg-header-h) + 34px);
  border-left:1px solid var(--pg-line);padding-left:22px;
}
.pg-toc__label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pg-dim);
  font-family:var(--pg-display);margin-bottom:16px}
.pg-toc ol{list-style:none;padding:0;margin:0;display:grid;gap:11px;counter-reset:toc}
.pg-toc a{
  display:block;font-size:.9rem;color:var(--pg-dim);line-height:1.4;
  transition:color var(--pg-fast) var(--pg-ease),transform var(--pg-fast) var(--pg-ease);
}
.pg-toc a:hover,.pg-toc a.is-active{color:var(--pg-white);transform:translateX(3px)}
.pg-toc a.is-active{font-weight:600}

/* Reading progress bar */
.pg-progress{
  position:fixed;left:0;top:0;height:2px;z-index:210;
  background:var(--pg-grad);width:0;
  transition:width .12s linear;
}

/* ============================================================
   14. TEAM
   ============================================================ */
.pg-member{position:relative;display:grid;gap:0}
.pg-member__photo{
  position:relative;aspect-ratio:3/4;border-radius:var(--pg-r);overflow:hidden;
  border:1px solid var(--pg-line);
  background:linear-gradient(160deg,var(--pg-elevated),var(--pg-void));
}
.pg-member__photo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:filter .7s var(--pg-ease),transform .9s var(--pg-ease)}
.pg-member:hover .pg-member__photo img{filter:none;transform:scale(1.03)}
.pg-member__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,7,13,.85),transparent 52%);
}
.pg-member__body{padding:18px 2px 0}
.pg-member__name{font-size:1.22rem;margin:0 0 3px}
.pg-member__role{font-size:.86rem;color:var(--pg-dim);margin:0 0 10px;letter-spacing:.02em}
.pg-member__bio{font-size:.9rem;color:var(--pg-muted);margin:0 0 12px}
.pg-member__links{display:flex;gap:10px}
.pg-member__links a{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--pg-line);color:var(--pg-muted);
  transition:all var(--pg-fast) var(--pg-ease);
}
.pg-member__links a:hover{border-color:var(--pg-line-strong);color:var(--pg-white);background:rgba(255,255,255,.05)}
.pg-member__links svg{width:15px;height:15px}

/* connective lines behind the team grid */
.pg-constellation{position:absolute;inset:0;pointer-events:none;z-index:0}
.pg-constellation line{stroke:rgba(255,255,255,.13);stroke-width:1}

/* ============================================================
   15. SPLIT / SERVICE ROWS
   ============================================================ */
.pg-srow{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,5vw,80px);align-items:center;
  padding:clamp(48px,7vw,110px) 0;border-top:1px solid var(--pg-line);
  scroll-margin-top:calc(var(--pg-header-h) + 24px);
}
.pg-srow:nth-child(even) .pg-srow__viz{order:-1}
.pg-srow__idx{
  font-family:var(--pg-display);font-size:.8rem;font-weight:600;letter-spacing:.2em;
  color:var(--pg-accent,var(--pg-magenta));margin-bottom:14px;display:block;
}
.pg-srow h2{font-size:clamp(1.8rem,3.6vw,2.9rem);margin-bottom:16px}
.pg-caps{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px;padding:0;list-style:none}
.pg-caps li{
  font-size:.82rem;padding:7px 14px;border-radius:var(--pg-r-pill);
  border:1px solid var(--pg-line);color:var(--pg-muted);background:rgba(255,255,255,.02);
}
.pg-srow__viz{
  aspect-ratio:4/3;border-radius:var(--pg-r-lg);border:1px solid var(--pg-line);
  background:radial-gradient(85% 85% at 50% 35%,rgba(255,255,255,.05),rgba(0,0,0,.32));
  display:grid;place-items:center;overflow:hidden;position:relative;padding:clamp(20px,3vw,40px);
}

/* ============================================================
   16. CTA BAND + FOOTER
   ============================================================ */
.pg-ctaband{
  position:relative;overflow:hidden;
  padding:clamp(64px,9vw,140px) 0;
  border-top:1px solid var(--pg-line);
  background:
    radial-gradient(80% 130% at 50% 118%,rgba(236,0,140,.2),transparent 62%),
    radial-gradient(60% 100% at 82% 0%,rgba(6,199,85,.11),transparent 60%);
  text-align:center;
}
.pg-ctaband__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
  mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
}
/* scanning light sweep */
.pg-ctaband__scan{
  position:absolute;top:0;bottom:0;width:34%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  animation:pgScan 7.5s var(--pg-ease-io) infinite;
}
@keyframes pgScan{0%{left:-40%}100%{left:106%}}
.pg-ctaband h2{font-size:clamp(1.9rem,4.6vw,4rem);max-width:17ch;margin:0 auto .6em}
.pg-ctaband .pg-btn-row{justify-content:center}

.pg-footer{
  border-top:1px solid var(--pg-line);
  background:var(--pg-void);
  padding:clamp(54px,6.5vw,88px) 0 34px;
}
.pg-footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,.75fr)) minmax(0,1.15fr);
  gap:clamp(26px,3.4vw,52px);
}
/* width:auto is essential — without it the img width="279" attribute wins
   and the logo renders stretched at 279px wide. Matches .pg-logo img. */
.pg-footer__logo{display:inline-block}
.pg-footer__logo img{height:38px;width:auto;margin-bottom:18px}
.pg-footer__desc{font-size:.93rem;color:var(--pg-dim);max-width:34ch;margin:0}
.pg-footer__title{
  font-family:var(--pg-display);font-size:.73rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pg-dim);margin:0 0 18px;
}
.pg-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.pg-footer ul a{
  font-size:.94rem;color:var(--pg-muted);position:relative;display:inline-block;
  transition:color var(--pg-fast) var(--pg-ease),transform var(--pg-fast) var(--pg-ease);
}
.pg-footer ul a:hover{color:var(--pg-white);transform:translateX(3px)}
.pg-footer__contact{display:grid;gap:9px;font-size:.94rem;color:var(--pg-muted)}
.pg-footer__contact a:hover{color:var(--pg-white)}
.pg-footer__loc{display:grid;gap:3px;margin-top:6px;font-size:.9rem;color:var(--pg-dim)}
.pg-social{display:flex;gap:10px;margin-top:20px}
.pg-social a{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--pg-line);color:var(--pg-muted);
  transition:all var(--pg-fast) var(--pg-ease);
}
.pg-social a:hover{color:var(--pg-white);border-color:var(--pg-line-strong);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.pg-social svg{width:17px;height:17px}
.pg-footer__bar{
  margin-top:clamp(38px,4.4vw,64px);padding-top:26px;border-top:1px solid var(--pg-line);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  font-size:.83rem;color:var(--pg-dim);
}
.pg-footer__bar nav{display:flex;gap:20px;flex-wrap:wrap}

/* ============================================================
   17. LEGAL / DOCUMENT PAGES
   ============================================================ */
.pg-doc{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.pg-doc__body h2{
  font-size:clamp(1.3rem,2.1vw,1.7rem);margin:2.3em 0 .6em;
  padding-top:1.1em;border-top:1px solid var(--pg-line);
  scroll-margin-top:calc(var(--pg-header-h) + 26px);
}
.pg-doc__body h2:first-child{margin-top:0;border-top:0;padding-top:0}
.pg-doc__body p,.pg-doc__body li{color:var(--pg-muted);font-size:1rem;line-height:1.75}
.pg-doc__body ul{padding-left:1.2em;margin:0 0 1.2em}
.pg-doc__body li{margin-bottom:.45em}
.pg-doc__note{
  border:1px dashed rgba(247,196,0,.4);background:rgba(247,196,0,.06);
  border-radius:var(--pg-r);padding:20px 24px;margin:0 0 40px;
  font-size:.93rem;color:var(--pg-muted);
}
.pg-doc__note strong{color:var(--pg-amber)}
/* calm background for legal pages */
body.pg-page-legal::before{
  background:radial-gradient(700px 420px at 78% -4%,rgba(255,255,255,.05),transparent 62%);
}

/* ============================================================
   18. FREE AUDIT — SCANNER
   ============================================================ */
.pg-scanner{position:relative;border-radius:var(--pg-r-lg);overflow:hidden;
  border:1px solid var(--pg-line);background:rgba(0,0,0,.28);padding:clamp(18px,2.4vw,30px)}
.pg-scanner__beam{
  position:absolute;left:0;right:0;height:130px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,transparent,rgba(6,199,85,.14) 46%,rgba(6,199,85,.5) 50%,rgba(6,199,85,.14) 54%,transparent);
  animation:pgBeam 6s var(--pg-ease-io) infinite;
}
@keyframes pgBeam{0%{top:-130px}100%{top:100%}}
.pg-scanner__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.pg-scanpanel{
  border:1px solid var(--pg-line);border-radius:var(--pg-r);padding:16px;
  background:rgba(255,255,255,.025);min-height:118px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .5s var(--pg-ease),background-color .5s var(--pg-ease);
}
.pg-scanpanel__label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pg-dim);font-family:var(--pg-display)}
.pg-scanpanel__status{
  margin-top:auto;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  font-family:var(--pg-display);color:var(--pg-dim);
}
.pg-scanpanel.is-scanning{border-color:rgba(6,199,85,.42);background:rgba(6,199,85,.055)}
.pg-scanpanel.is-scanning .pg-scanpanel__status{color:var(--pg-green)}

/* Audit process steps */
.pg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);position:relative}
.pg-steps::before{
  content:"";position:absolute;top:19px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,var(--pg-magenta),var(--pg-coral),var(--pg-amber),var(--pg-green));
  opacity:.35;
}
.pg-step{position:relative;padding-top:52px}
.pg-step__dot{
  position:absolute;top:8px;left:0;width:23px;height:23px;border-radius:50%;
  border:1px solid var(--pg-line-strong);background:var(--pg-base);
  display:grid;place-items:center;font-size:.66rem;font-weight:700;font-family:var(--pg-display);
  color:var(--pg-white);
}
.pg-step h3{font-size:1.06rem;margin-bottom:7px}
.pg-step p{font-size:.9rem;color:var(--pg-muted);margin:0}

/* ============================================================
   19. CAREER
   ============================================================ */
.pg-role{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:clamp(22px,2.6vw,32px);border:1px solid var(--pg-line);
  border-radius:var(--pg-r);background:rgba(255,255,255,.022);
  transition:border-color var(--pg-med) var(--pg-ease),background-color var(--pg-med) var(--pg-ease);
}
.pg-role:hover{border-color:var(--pg-line-strong);background:rgba(255,255,255,.045)}
.pg-role__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pg-role__meta span{
  font-size:.78rem;padding:5px 12px;border-radius:var(--pg-r-pill);
  border:1px solid var(--pg-line);color:var(--pg-dim);
}
.pg-empty{
  border:1px dashed var(--pg-line-strong);border-radius:var(--pg-r-lg);
  padding:clamp(34px,5vw,64px);text-align:center;
}
.pg-empty h3{font-size:clamp(1.4rem,2.6vw,2rem)}

/* ============================================================
   20. CONTACT
   ============================================================ */
.pg-contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4.5vw,72px);align-items:start}
.pg-contact__item{padding:22px 0;border-top:1px solid var(--pg-line)}
.pg-contact__item:first-of-type{border-top:0;padding-top:0}
.pg-contact__label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pg-dim);
  font-family:var(--pg-display);margin:0 0 8px}
.pg-contact__val{font-family:var(--pg-display);font-size:clamp(1.05rem,1.8vw,1.35rem);
  color:var(--pg-white);letter-spacing:-.02em;display:inline-block;
  transition:color var(--pg-fast) var(--pg-ease)}
a.pg-contact__val:hover{color:var(--pg-magenta)}

/* Dhaka <-> California link visual */
.pg-geo{position:relative;height:clamp(150px,20vw,220px);margin-top:8px}
.pg-geo svg{width:100%;height:100%;overflow:visible}
.pg-geo__pulse{fill:var(--pg-magenta)}

/* ============================================================
   21. MISC UTILITIES
   ============================================================ */
.pg-tag{
  display:inline-flex;align-items:center;gap:8px;padding:7px 15px;
  border:1px solid var(--pg-line);border-radius:var(--pg-r-pill);
  font-size:.78rem;color:var(--pg-muted);background:rgba(255,255,255,.025);
}
.pg-divider{height:1px;background:var(--pg-line);border:0;margin:0}
.pg-center{text-align:center}
.pg-mt-sm{margin-top:18px}.pg-mt{margin-top:32px}.pg-mt-lg{margin-top:clamp(38px,5vw,64px)}
.pg-stack{display:grid;gap:clamp(14px,1.8vw,22px)}

/* Value list (culture / audit) */
.pg-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--pg-line);border:1px solid var(--pg-line);border-radius:var(--pg-r-lg);overflow:hidden}
.pg-value{background:var(--pg-base);padding:clamp(24px,3vw,36px);transition:background-color var(--pg-med) var(--pg-ease)}
.pg-value:hover{background:var(--pg-surface)}
.pg-value h3{font-size:1.1rem;letter-spacing:.03em;margin-bottom:9px}
.pg-value p{font-size:.92rem;color:var(--pg-muted);margin:0}

/* ============================================================
   22. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .pg-reveal,.pg-blur-in{opacity:1!important;transform:none!important;filter:none!important}
  .pg-word > span{transform:none!important}
  .pg-line-draw{stroke-dashoffset:0!important}
  .pg-marquee__track{animation:none!important;transform:none!important}
  .pg-ctaband__scan,.pg-scanner__beam{display:none}
  .pg-stage-item{opacity:1!important}
}

/* ============================================================
   23. HERO CANVAS MASKING
   Keeps the animated grid from competing with the fixed header
   or the copy that sits on top of it.
   ============================================================ */
.pg-grid-animation{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 78%,transparent 100%);
  opacity:.85;
}
.pg-hero .pg-shell::before{
  content:"";position:absolute;inset:-10% -20% -20% -25%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 22% 45%,rgba(8,7,13,.86),transparent 70%);
}
@media (max-width:768px){
  .pg-grid-animation{opacity:.6}
}

/* ============================================================
   24. PAGE-SPECIFIC HERO VISUALS
   Every page gets its own motif. They share the colour, line
   weight and easing language but never repeat a composition.
   ============================================================ */

/* --- SERVICES: orbital ecosystem --- */
.pg-orbit{position:relative;width:100%;aspect-ratio:1/1;max-width:520px;margin-inline:auto}
.pg-orbit__ring{
  position:absolute;inset:0;border:1px solid var(--pg-line);border-radius:50%;
  animation:pgSpin var(--pg-dur,38s) linear infinite;
}
.pg-orbit__ring:nth-child(2){inset:13%;--pg-dur:28s;animation-direction:reverse}
.pg-orbit__ring:nth-child(3){inset:26%;--pg-dur:20s}
.pg-orbit__ring:nth-child(4){inset:39%;--pg-dur:15s;animation-direction:reverse}
@keyframes pgSpin{to{transform:rotate(360deg)}}
.pg-orbit__sat{
  position:absolute;top:-21px;left:50%;translate:-50% 0;
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(13,11,20,.9);border:1px solid var(--pg-line-strong);
  backdrop-filter:blur(8px);
  animation:pgSpinBack var(--pg-dur,38s) linear infinite;
}
@keyframes pgSpinBack{to{transform:rotate(-360deg)}}
.pg-orbit__sat img,.pg-orbit__sat svg{width:21px;height:21px}
.pg-orbit__sat--b{top:auto;bottom:-21px}
.pg-orbit__sat--l{top:50%;left:-21px;translate:0 -50%}
.pg-orbit__sat--r{top:50%;left:auto;right:-21px;translate:0 -50%}
.pg-orbit__core{
  position:absolute;inset:0;display:grid;place-items:center;
}
.pg-orbit__core img{width:33%;filter:drop-shadow(0 0 34px rgba(236,0,140,.45))}
.pg-orbit__core::before{
  content:"";position:absolute;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(236,0,140,.25),transparent 68%);
  animation:pgCorePulse 3.6s var(--pg-ease-io) infinite;
}
@keyframes pgCorePulse{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.12);opacity:1}}

/* --- BLOG: floating editorial panels --- */
.pg-panels{position:relative;height:clamp(220px,32vw,380px)}
.pg-panels__card{
  position:absolute;border-radius:var(--pg-r);overflow:hidden;
  border:1px solid var(--pg-line);background:rgba(255,255,255,.035);
  backdrop-filter:blur(6px);
  animation:pgDrift var(--pg-dur,13s) var(--pg-ease-io) infinite;
  padding:16px;display:grid;gap:9px;align-content:start;
}
.pg-panels__card span{height:8px;border-radius:3px;background:rgba(255,255,255,.12);display:block}
.pg-panels__card span:first-child{width:44%;background:var(--pg-accent,var(--pg-magenta));opacity:.8}
@keyframes pgDrift{0%,100%{transform:translateY(0) rotate(var(--pg-rot,0deg))}50%{transform:translateY(-18px) rotate(var(--pg-rot,0deg))}}

/* --- TEAM: profile constellation --- */
.pg-team-viz{position:relative;height:clamp(200px,26vw,300px)}
.pg-team-viz svg{width:100%;height:100%;overflow:visible}
.pg-team-viz circle.pg-node-dot{fill:var(--pg-base);stroke:var(--pg-line-strong);stroke-width:1}
.pg-team-viz circle.pg-node-live{animation:pgNodeGlow 3.4s var(--pg-ease-io) infinite}
@keyframes pgNodeGlow{0%,100%{opacity:.35;r:4}50%{opacity:1;r:6}}

/* --- CONTACT: Dhaka <-> California signal --- */
.pg-geo__line{stroke:url(#pgGeoGrad);stroke-width:1.6;fill:none;stroke-dasharray:6 8;
  animation:pgGeoFlow 3s linear infinite}
@keyframes pgGeoFlow{to{stroke-dashoffset:-28}}
.pg-geo__city{font-family:var(--pg-display);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;fill:var(--pg-dim)}
.pg-geo__ping{animation:pgPing 2.8s var(--pg-ease-io) infinite}
.pg-geo__ping:nth-of-type(2){animation-delay:1.4s}
@keyframes pgPing{0%{r:5;opacity:.9}70%{r:24;opacity:0}100%{r:24;opacity:0}}

/* --- CAREER: trajectory paths --- */
.pg-paths{position:relative;height:clamp(200px,26vw,320px)}
.pg-paths svg{width:100%;height:100%;overflow:visible}
.pg-paths path{fill:none;stroke-width:1.6;stroke-linecap:round}
.pg-paths .pg-trace{stroke-dasharray:10 400;animation:pgTrace 5.5s var(--pg-ease-io) infinite}
.pg-paths .pg-trace:nth-of-type(2){animation-delay:1.1s}
.pg-paths .pg-trace:nth-of-type(3){animation-delay:2.2s}
@keyframes pgTrace{0%{stroke-dashoffset:410}100%{stroke-dashoffset:-30}}

/* --- LEGAL: quiet document grid --- */
.pg-docviz{
  height:clamp(120px,16vw,200px);border-radius:var(--pg-r);overflow:hidden;
  border:1px solid var(--pg-line);position:relative;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:38px 38px;
}
.pg-docviz::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);
  background-size:280% 100%;
  animation:pgDocSweep 11s linear infinite;
}
@keyframes pgDocSweep{to{background-position:-280% 0}}

/* --- PRIVACY: secure data flow --- */
.pg-secure{height:clamp(130px,17vw,210px);position:relative;overflow:hidden;
  border-radius:var(--pg-r);border:1px solid var(--pg-line)}
.pg-secure i{
  position:absolute;width:3px;height:3px;border-radius:50%;background:var(--pg-green);
  animation:pgStream var(--pg-dur,7s) linear infinite;opacity:.8;
}
@keyframes pgStream{0%{transform:translateX(-20px);opacity:0}12%{opacity:.9}88%{opacity:.9}100%{transform:translateX(105vw);opacity:0}}

/* --- SERVICES orbital breakout on scroll --- */
@media (max-width:768px){
  .pg-orbit{max-width:300px}
  .pg-orbit__sat{width:34px;height:34px;border-radius:11px}
}

/* ============================================================
   25. ELEMENTOR CONTENT AREA
   Pages built with Elementor keep the PulseGrid header and footer,
   so the content needs to clear the fixed header the same way a
   coded hero does.
   ============================================================ */
.pg-elementor-content{
  padding-top:calc(var(--pg-header-h) + clamp(28px,4vw,56px));
  padding-bottom:clamp(40px,6vw,90px);
}
/* Give Elementor's own containers the PulseGrid gutter and max width
   unless the section is explicitly set to full width. */
.pg-elementor-content .elementor-section.elementor-section-boxed > .elementor-container,
.pg-elementor-content .e-con.e-con-boxed > .e-con-inner{
  max-width:var(--pg-max);
}
/* Elementor's editor injects a white background on the preview body;
   keep our dark surface so the design reads correctly while editing. */
body.elementor-editor-active.pg-site,
body.elementor-editor-preview.pg-site{background:var(--pg-base)}

/* ============================================================
   26. PORTFOLIO
   ============================================================ */
.pg-work{
  display:flex;flex-direction:column;height:100%;
  border-radius:var(--pg-r-lg);overflow:hidden;
  border:1px solid var(--pg-line);background:rgba(255,255,255,.022);
  transition:border-color var(--pg-med) var(--pg-ease),transform var(--pg-med) var(--pg-ease);
}
.pg-work:hover{border-color:var(--pg-line-strong);transform:translateY(-4px)}
.pg-work__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--pg-elevated)}
.pg-work__media img,.pg-work__media svg{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--pg-ease)}
.pg-work:hover .pg-work__media img{transform:scale(1.035)}
.pg-work__industry{
  position:absolute;left:14px;top:14px;
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--pg-r-pill);
  background:rgba(8,7,13,.72);backdrop-filter:blur(8px);
  border:1px solid var(--pg-line-strong);color:var(--pg-white);
  transition:transform var(--pg-med) var(--pg-ease);
}
.pg-work:hover .pg-work__industry{transform:translateY(-3px)}
.pg-work__body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:12px;flex:1}
.pg-work__title{font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.2;margin:0}
.pg-work__excerpt{font-size:.94rem;color:var(--pg-muted);margin:0}
.pg-work__channels{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px}
.pg-work__channels li{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.76rem;padding:5px 11px;border-radius:var(--pg-r-pill);
  border:1px solid var(--pg-line);color:var(--pg-muted);background:rgba(255,255,255,.02);
}
.pg-work__channels img,.pg-work__channels svg{width:13px;height:13px;flex:none}
.pg-work__go{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--pg-line);
  display:flex;align-items:center;gap:9px;font-size:.85rem;
  font-family:var(--pg-display);font-weight:600;color:var(--pg-white);
}
.pg-work__go svg{transition:transform var(--pg-med) var(--pg-ease)}
.pg-work:hover .pg-work__go svg{transform:translateX(4px)}

/* Featured variant on the home page */
.pg-work--featured .pg-work__media{aspect-ratio:16/9}

/* Archive hero lines */
.pg-worklines{height:clamp(150px,20vw,210px)}
.pg-worklines svg{width:100%;height:100%;overflow:visible}

/* Single: meta strip */
.pg-workmeta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--pg-line);border:1px solid var(--pg-line);
  border-radius:var(--pg-r);overflow:hidden;margin:0;
}
.pg-workmeta > div{background:var(--pg-base);padding:18px 20px}
.pg-workmeta dt{
  font-family:var(--pg-display);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pg-dim);margin:0 0 7px;
}
.pg-workmeta dd{margin:0;font-size:.98rem;color:var(--pg-white)}
.pg-workmeta dd a{border-bottom:1px solid var(--pg-magenta)}

/* Single: screenshots */
.pg-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,20px)}
.pg-shot{margin:0;border-radius:var(--pg-r);overflow:hidden;border:1px solid var(--pg-line);
  background:var(--pg-elevated)}
.pg-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pg-shot--lead{grid-column:1/-1}

/* Single: closing CTA block */
.pg-workcta{
  border:1px solid var(--pg-line);border-radius:var(--pg-r-lg);
  padding:clamp(28px,4vw,56px);text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(70% 120% at 50% 118%,rgba(236,0,140,.16),transparent 62%),
    linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
}
.pg-workcta .pg-lead,.pg-workcta .pg-muted{margin-left:auto;margin-right:auto;max-width:60ch}
.pg-workcta .pg-btn-row{justify-content:center}

@media (max-width:768px){
  .pg-shots{grid-template-columns:1fr}
  .pg-shot--lead{grid-column:auto}
  .pg-workmeta{grid-template-columns:1fr}
}


/* ============================================================
   27. TEAM — LEADERSHIP vs SPECIALISTS
   Two deliberately different treatments so the page has a
   hierarchy rather than one repeated card.
   ============================================================ */

/* --- Leadership: large portrait, social row on a hairline --- */
.pg-member--lead .pg-member__photo{aspect-ratio:3/4;border-radius:var(--pg-r-lg)}
.pg-member--lead .pg-member__body{padding:20px 4px 0}
.pg-member--lead .pg-member__name{font-size:clamp(1.2rem,1.7vw,1.45rem);margin-bottom:5px}
.pg-member--lead .pg-member__role{
  font-size:.86rem;color:var(--pg-dim);margin:0 0 14px;letter-spacing:.02em;
}
.pg-member--lead .pg-member__links{
  padding-top:14px;border-top:1px solid var(--pg-line);margin-top:0;
}

/* --- Specialists: compact, specialisation carries the weight --- */
.pg-member--spec{
  border:1px solid var(--pg-line);border-radius:var(--pg-r-lg);
  background:linear-gradient(168deg,var(--pg-glass-2),var(--pg-glass) 60%,rgba(255,255,255,.012));
  padding:14px;overflow:hidden;
  transition:border-color var(--pg-med) var(--pg-ease),transform var(--pg-med) var(--pg-ease);
}
.pg-member--spec:hover{border-color:var(--pg-line-strong);transform:translateY(-4px)}
.pg-member--spec .pg-member__photo{aspect-ratio:1/1;border-radius:var(--pg-r);border:0}
.pg-member--spec .pg-member__photo::after{
  background:linear-gradient(to top,rgba(8,7,13,.6),transparent 55%);
}
.pg-member--spec .pg-member__body{padding:16px 4px 4px}
.pg-member--spec .pg-member__name{font-size:1.05rem;margin-bottom:3px}
.pg-member--spec .pg-member__role{
  font-size:.8rem;color:var(--pg-dim);margin:0 0 12px;
}
/* The field of specialisation, in bold as requested */
.pg-member__spec{
  margin:0;padding-top:12px;border-top:1px solid var(--pg-line);
  font-family:var(--pg-display);font-weight:700;font-size:.9rem;
  line-height:1.35;letter-spacing:-.01em;
  background:var(--pg-grad);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
@media (prefers-reduced-motion:reduce){
  .pg-member__spec{-webkit-text-fill-color:var(--pg-white);color:var(--pg-white);background:none}
}

@media (max-width:768px){
  .pg-member--spec .pg-member__photo{aspect-ratio:4/5}
}

/* ============================================================
   28. HOME — LEADERSHIP RAIL
   A different motion treatment from the Team page so the two
   never read as the same block twice.
   ============================================================ */
.pg-leadrail{
  position:relative;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(14px,2vw,26px);
  padding-bottom:34px;
}
.pg-leadrail__line{
  position:absolute;left:0;right:0;bottom:0;height:40px;width:100%;
  pointer-events:none;opacity:.5;
}

.pg-leadcard{position:relative}
.pg-leadcard__frame{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--pg-r-lg);border:1px solid var(--pg-line);
  background:linear-gradient(160deg,var(--pg-elevated),var(--pg-void));
  transition:border-color var(--pg-med) var(--pg-ease),transform var(--pg-med) var(--pg-ease);
}
.pg-leadcard__frame img,.pg-leadcard__frame svg{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:filter .7s var(--pg-ease),transform 1s var(--pg-ease);
}
.pg-leadcard__frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,7,13,.9),transparent 55%);
}
.pg-leadcard:hover .pg-leadcard__frame{
  border-color:rgba(236,0,140,.5);transform:translateY(-6px);
}
.pg-leadcard:hover .pg-leadcard__frame img{filter:none;transform:scale(1.05)}

/* A pulse of brand light sweeps each portrait, staggered per card */
.pg-leadcard__scan{
  position:absolute;left:0;right:0;height:45%;top:-45%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(236,0,140,.16) 45%,rgba(247,196,0,.2) 55%,transparent);
  animation:pgLeadScan 5.5s var(--pg-ease-io) infinite;
  animation-delay:calc(var(--pg-i,0) * .55s);
}
@keyframes pgLeadScan{
  0%{top:-45%;opacity:0}
  12%{opacity:1}
  55%{top:100%;opacity:0}
  100%{top:100%;opacity:0}
}

.pg-leadcard__meta{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:18px 18px 20px;
  transform:translateY(10px);opacity:0;
  transition:transform .55s var(--pg-ease),opacity .55s var(--pg-ease);
}
.pg-reveal.is-in .pg-leadcard__meta,
.pg-leadcard.is-in .pg-leadcard__meta{transform:none;opacity:1}
.pg-leadcard__meta h3{
  font-size:clamp(1rem,1.4vw,1.2rem);margin:0 0 3px;line-height:1.2;
}
.pg-leadcard__meta p{
  margin:0;font-size:.8rem;color:var(--pg-muted);
  position:relative;padding-top:8px;
}
.pg-leadcard__meta p::before{
  content:"";position:absolute;top:0;left:0;width:26px;height:2px;border-radius:2px;
  background:var(--pg-grad);background-size:200% 100%;
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--pg-ease) .15s;
}
.pg-reveal.is-in .pg-leadcard__meta p::before{transform:scaleX(1)}
.pg-leadcard:hover .pg-leadcard__meta p::before{width:52px}

@media (prefers-reduced-motion:reduce){
  .pg-leadcard__scan{display:none}
  .pg-leadcard__meta{opacity:1;transform:none}
}
@media (max-width:768px){
  .pg-leadrail{grid-template-columns:repeat(2,1fr)}
  .pg-leadrail__line{display:none}
}

/* ============================================================
   29. JOB CARD — EXPANDABLE DESCRIPTION
   The Career page card opens in place so candidates can read
   the full posting without leaving the page.
   ============================================================ */
.pg-role{grid-template-columns:minmax(0,1fr) auto;row-gap:0}
.pg-role__actions{display:flex;align-items:center;gap:12px}

.pg-role__details{grid-column:1/-1;margin-top:20px}
.pg-role__details summary{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px;border-radius:var(--pg-r-pill);
  border:1px solid var(--pg-line);background:rgba(255,255,255,.03);
  font-family:var(--pg-display);font-size:.86rem;font-weight:600;
  color:var(--pg-white);cursor:pointer;list-style:none;
  transition:border-color var(--pg-fast) var(--pg-ease),background-color var(--pg-fast) var(--pg-ease);
}
.pg-role__details summary::-webkit-details-marker{display:none}
.pg-role__details summary:hover{border-color:var(--pg-line-strong);background:rgba(255,255,255,.07)}
.pg-role__details summary svg{transition:transform var(--pg-med) var(--pg-ease)}
.pg-role__details[open] summary svg{transform:rotate(180deg)}

/* Swap the label depending on state */
.pg-role__summary-close{display:none}
.pg-role__details[open] .pg-role__summary-open{display:none}
.pg-role__details[open] .pg-role__summary-close{display:inline}

.pg-role__body{
  margin-top:22px;padding-top:22px;
  border-top:1px solid var(--pg-line);
  animation:pgRoleOpen .45s var(--pg-ease) both;
}
@keyframes pgRoleOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.pg-role__body h2{font-size:clamp(1.2rem,2vw,1.5rem);margin:1.4em 0 .5em}
.pg-role__body h3{font-size:clamp(1.05rem,1.7vw,1.25rem)}
.pg-role__body ul,.pg-role__body ol{padding-left:1.2em}

@media (prefers-reduced-motion:reduce){
  .pg-role__body{animation:none}
  .pg-role__details summary svg{transition:none}
}
@media (max-width:768px){
  .pg-role__actions{width:100%}
  .pg-role__actions .pg-btn{width:100%}
}

/* ============================================================
   30. THANK YOU
   ============================================================ */
.pg-thanks{text-align:center;max-width:44rem;margin-inline:auto}
.pg-thanks .pg-eyebrow{justify-content:center}
.pg-thanks .pg-lead{margin-inline:auto}

.pg-thanks__tick{
  display:grid;place-items:center;
  width:78px;height:78px;margin:0 auto 26px;
  border-radius:50%;
  color:var(--pg-green);
  background:radial-gradient(circle at 50% 40%,rgba(6,199,85,.22),rgba(6,199,85,.05));
  border:1px solid rgba(6,199,85,.45);
  box-shadow:0 0 0 10px rgba(6,199,85,.06),0 24px 60px -30px rgba(6,199,85,.6);
  animation:pgTickPop .7s var(--pg-ease) both;
}
.pg-thanks__tick svg{
  width:34px;height:34px;
  stroke-dasharray:32;stroke-dashoffset:32;
  animation:pgTickDraw .55s .25s var(--pg-ease) forwards;
}
@keyframes pgTickPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes pgTickDraw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .pg-thanks__tick{animation:none}
  .pg-thanks__tick svg{animation:none;stroke-dashoffset:0}
}