/* ===================================================================
   Alpha Health Group — Premium service-page design system (2026)
   Scope: everything lives under .pmx so it never fights legacy style.css.
   Neutral base (#f7f7f7 / #fff / near-black ink) + one accent per cluster.
   Cluster themes set --accent only; the rest of the system is shared.
   =================================================================== */
.pmx{
  /* neutral foundation */
  --bg:#f7f7f7;
  --surface:#ffffff;
  --ink:#15181d;
  --ink-2:#3d434c;
  --ink-3:#6b7178;
  --line:#e6e8eb;
  --line-2:#d9dce1;
  /* accent (overridden per cluster) */
  --accent:#066d77;
  --accent-ink:#04565e;
  --accent-tint:rgba(6,109,119,.08);
  --accent-tint-2:rgba(6,109,119,.14);
  /* rhythm */
  --maxw:1180px;
  --pad:clamp(1.15rem,4vw,2rem);
  --gap:clamp(1.5rem,3vw,2.5rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --radius:16px;
  --radius-sm:12px;

  background:var(--bg);
  color:var(--ink-2);
  font-family:'Google Sans','Segoe UI',Roboto,Arial,sans-serif;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
}

/* ---- cluster themes (accent only; all in the teal/green brand family) ---- */
.pmx--engineering{ --accent:#0f6e78; --accent-ink:#0a545c; --accent-tint:rgba(15,110,120,.08); --accent-tint-2:rgba(15,110,120,.14); }
.pmx--facilities { --accent:#066d77; --accent-ink:#04565e; --accent-tint:rgba(6,109,119,.08);  --accent-tint-2:rgba(6,109,119,.14); }
.pmx--investor   { --accent:#0b5d54; --accent-ink:#084a43; --accent-tint:rgba(11,93,84,.08);   --accent-tint-2:rgba(11,93,84,.14); }
.pmx--products   { --accent:#276b83; --accent-ink:#1e5468; --accent-tint:rgba(39,107,131,.08); --accent-tint-2:rgba(39,107,131,.14); }
.pmx--licensing  { --accent:#066d77; --accent-ink:#04565e; --accent-tint:rgba(6,109,119,.08);  --accent-tint-2:rgba(6,109,119,.14); }
.pmx--marketing  { --accent:#128a8f; --accent-ink:#0d6e72; --accent-tint:rgba(18,138,143,.08); --accent-tint-2:rgba(18,138,143,.14); }
.pmx--training   { --accent:#0e7a6b; --accent-ink:#0a6155; --accent-tint:rgba(14,122,107,.08); --accent-tint-2:rgba(14,122,107,.14); }

/* ---- scoped resets so legacy CSS doesn't leak in ---- */
.pmx *,.pmx *::before,.pmx *::after{ box-sizing:border-box; }
.pmx img{ max-width:100%; height:auto; display:block; }
.pmx a{ color:var(--accent); text-decoration:none; transition:color .18s ease; }
.pmx a:hover{ color:var(--accent-ink); }
.pmx p{ margin:0 0 1rem; }
.pmx h1,.pmx h2,.pmx h3,.pmx h4{ margin:0 0 .6rem; color:var(--ink); line-height:1.18; font-family:inherit; font-weight:700; letter-spacing:normal; }
.pmx :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

.pmx-container{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.pmx-section{ padding:clamp(3rem,7vw,5.5rem) 0; }
.pmx-section--tight{ padding:clamp(2rem,5vw,3.5rem) 0; }
.pmx-section--surface{ background:var(--surface); }

/* one restrained signature: eyebrow with a short accent keyline (used once at top of a section, not on every heading) */
.pmx-eyebrow{
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.04em;
  color:var(--accent); margin:0 0 .9rem;
}

.pmx-h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); text-wrap:balance; }
.pmx-h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); text-wrap:balance; }
.pmx-lede{ font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.6; color:var(--ink-2); max-width:62ch; }
.pmx-measure{ max-width:66ch; }

/* ---- hero (editorial, asymmetric) ---- */
.pmx-hero{ background:var(--surface); border-bottom:1px solid var(--line); overflow:hidden; }
.pmx-hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  padding-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:clamp(2.5rem,6vw,4.5rem); }
.pmx-hero__title{ font-size:clamp(2.3rem,5vw,3.6rem); }
.pmx-hero__media{ position:relative; }
.pmx-hero__media img{ width:100%; border-radius:var(--radius); box-shadow:0 40px 80px -40px rgba(16,24,40,.35); }
/* bare variant for transparent / pre-shaped hero images (no card, no shadow) */
.pmx-hero__media--bare img{ border-radius:0; box-shadow:none; display:block; height:auto; }
.pmx-hero__eyebrow-logo{ height:54px; width:auto; margin-bottom:1.1rem; }
.pmx-hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem; }

/* ---- buttons ---- */
.pmx-btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem;
  padding:.8rem 1.4rem; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:all .2s var(--ease); }
.pmx a.pmx-btn,.pmx .pmx-btn{ text-decoration:none; }
.pmx a.pmx-btn--primary,.pmx .pmx-btn--primary{ background:var(--accent); color:#fff; }
.pmx a.pmx-btn--primary:hover,.pmx .pmx-btn--primary:hover{ background:var(--accent-ink); color:#fff; transform:translateY(-1px); box-shadow:0 12px 24px -12px var(--accent); }
.pmx a.pmx-btn--ghost,.pmx .pmx-btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.pmx a.pmx-btn--ghost:hover,.pmx .pmx-btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.pmx-btn__arrow{ transition:transform .2s var(--ease); }
.pmx-btn:hover .pmx-btn__arrow{ transform:translateX(4px); }

/* ---- section head ---- */
.pmx-head{ max-width:64ch; margin-bottom:clamp(1.8rem,4vw,2.8rem); }

/* ---- card grid (services) ---- */
.pmx-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; }
.pmx-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.6rem 1.5rem;
  display:flex; flex-direction:column; transition:border-color .2s ease, transform .25s var(--ease), box-shadow .25s var(--ease); }
.pmx-card:hover{ border-color:var(--accent); transform:translateY(-4px); box-shadow:0 24px 48px -28px rgba(16,24,40,.28); }
.pmx-card__k{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem; }
.pmx-card h3{ font-size:1.12rem; margin-bottom:.5rem; }
.pmx-card p{ color:var(--ink-2); font-size:.95rem; line-height:1.55; margin:0; }
.pmx-card__link{ margin-top:auto; padding-top:1rem; font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:.4rem; }
.pmx-card__link::after{ content:"\2192"; transition:transform .2s var(--ease); }
.pmx-card:hover .pmx-card__link::after{ transform:translateX(4px); }

/* ---- feature split (media + text) ---- */
.pmx-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.pmx-split--rev .pmx-split__media{ order:2; }
.pmx-split__media img{ border-radius:var(--radius); box-shadow:0 30px 60px -36px rgba(16,24,40,.3); }

/* ---- checklist ---- */
.pmx-list{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.7rem; }
.pmx-list li{ position:relative; padding-left:1.9rem; color:var(--ink-2); line-height:1.5; }
.pmx-list li::before{ content:""; position:absolute; left:0; top:.15em; width:1.15rem; height:1.15rem; border-radius:50%;
  background:var(--accent-tint); }
.pmx-list li::after{ content:""; position:absolute; left:.36rem; top:.42em; width:.42rem; height:.24rem;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }

/* ---- portfolio ---- */
.pmx-portfolio{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.1rem; }
.pmx-work{ position:relative; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line); }
.pmx-work img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .4s var(--ease); }
.pmx-work:hover img{ transform:scale(1.04); }
.pmx-work__cap{ padding:1rem 1.1rem; background:var(--surface); }
.pmx-work__cap h4{ font-size:1rem; margin:0 0 .2rem; }
.pmx-work__cap span{ font-size:.85rem; color:var(--ink-3); }

/* ---- narrative + aside ---- */
.pmx-narrative{ display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.pmx-narrative__body p{ color:var(--ink-2); line-height:1.7; }
.pmx-aside{ background:var(--accent-tint); color:var(--ink-2); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.2rem); position:sticky; top:1.5rem; }
.pmx-aside h3{ color:var(--ink); }
.pmx-aside p{ color:var(--ink-2); font-size:.95rem; line-height:1.6; }
.pmx-aside__contact{ margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--line-2); display:grid; gap:.4rem; font-size:.92rem; }
.pmx-aside__contact span{ color:var(--ink-3); font-weight:600; }
.pmx-aside__contact a{ color:var(--accent); font-weight:600; }
.pmx-aside .pmx-btn{ margin-top:1.2rem; width:100%; justify-content:center; }

/* ---- quiet CTA band ---- */
.pmx-cta{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.8rem,4vw,3rem); display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between; }
.pmx-cta__text h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin-bottom:.35rem; }
.pmx-cta__text p{ margin:0; color:var(--ink-2); }

/* ---- tab / pill chips (from the old tab strip, restyled as quiet index) ---- */
.pmx-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pmx a.pmx-chip,.pmx .pmx-chip{ font-size:.85rem; font-weight:600; color:var(--ink-2); background:var(--surface);
  border:1px solid var(--line-2); border-radius:999px; padding:.5rem .95rem; transition:all .18s ease; }
.pmx a.pmx-chip:hover,.pmx .pmx-chip:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- trust strip (hero stats) ---- */
.pmx-trust{ display:flex; flex-wrap:wrap; gap:1.4rem 2.6rem; margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.pmx-trust strong{ display:block; font-size:1.3rem; color:var(--ink); font-weight:700; line-height:1.2; }
.pmx-trust span{ font-size:.85rem; color:var(--ink-3); }
/* hero trust row spans the full hero width and centres */
.pmx-hero__grid > .pmx-trust{ grid-column:1 / -1; justify-content:center; text-align:center; margin-top:0; }

/* ---- FAQ (native details/summary, no JS) ---- */
.pmx-faq{ max-width:840px; }
.pmx-faq details{ border-bottom:1px solid var(--line); }
.pmx-faq details:first-child{ border-top:1px solid var(--line); }
.pmx-faq summary{ list-style:none; cursor:pointer; padding:1.15rem 0; font-weight:600; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:1.2rem; }
.pmx-faq summary::-webkit-details-marker{ display:none; }
.pmx-faq summary::after{ content:""; flex:0 0 auto; width:.58rem; height:.58rem; margin-right:.2rem;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg);
  transition:transform .2s var(--ease); }
.pmx-faq details[open] summary::after{ transform:rotate(-135deg); }
.pmx-faq details p{ margin:0 0 1.25rem; color:var(--ink-2); line-height:1.65; max-width:74ch; }
.pmx-faq details p:first-of-type{ margin-top:-.2rem; }

/* ---- two-up highlight cards with action ---- */
.pmx-duo{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.pmx-duo .pmx-card{ padding:1.9rem 1.7rem; }
.pmx-duo .pmx-btn{ margin-top:1.2rem; align-self:flex-start; }
@media (max-width:760px){ .pmx-duo{ grid-template-columns:1fr; } }

/* ---- authority logo strip ---- */
.pmx-logos{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.6rem,4vw,3.2rem); }
.pmx-logos img{ height:56px; width:auto; opacity:.85; filter:saturate(.9); transition:opacity .2s ease, filter .2s ease; }
.pmx-logos a:hover img,.pmx-logos img:hover{ opacity:1; filter:none; }
.pmx-logos--sm img{ height:44px; }

/* ---- entrance (subtle, content is visible by default) ---- */
@keyframes pmxUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.pmx-hero__grid > *{ animation:pmxUp .6s var(--ease) both; }
.pmx-hero__grid > *:nth-child(2){ animation-delay:.08s; }

/* ---- responsive ---- */
@media (max-width:900px){
  .pmx-hero__grid, .pmx-split, .pmx-narrative{ grid-template-columns:1fr; }
  .pmx-split--rev .pmx-split__media{ order:0; }
  .pmx-aside{ position:static; }
  .pmx-hero__media--bare{ text-align:center; }
  .pmx-hero__media--bare img{ max-width:440px; margin-inline:auto; }
}
@media (prefers-reduced-motion:reduce){
  .pmx *{ animation:none !important; transition:none !important; }
}
