@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   PLASTO CHEM GROUP — premium engineering design system
   Authored in _import/site.css, deployed to generated_sites/<slug>/custom.css
   (the server injects custom.css into every served page, after the theme CSS).
   Everything is scoped to `body.pc` so a platform re-render can't inherit it.
   ========================================================================== */

:root {
  --pc-ink:      #0A0D1C;
  --pc-i950:     #080519;
  --pc-i900:     #120A33;
  --pc-i800:     #1B0F4D;
  --pc-i700:     #2B1A66;   /* brand indigo, sampled from the logo */
  --pc-i600:     #3A2488;
  --pc-i500:     #4C33A8;
  --pc-i300:     #9083DC;
  --pc-i100:     #E8E4FA;

  --pc-cy:       #3FC1F0;
  --pc-cy-deep:  #0E86C4;
  --pc-cy-glow:  rgba(63,193,240,.35);

  --pc-steel:    #7A839C;
  --pc-slate:    #4A5268;
  --pc-line:     #E3E6F0;
  --pc-paper:    #F7F8FC;
  --pc-white:    #FFFFFF;

  --pc-metal: linear-gradient(135deg, #B9C0D2 0%, #F4F6FB 42%, #9AA3B8 78%, #E8ECF5 100%);
  --pc-grad:  linear-gradient(120deg, var(--pc-i700) 0%, var(--pc-i500) 48%, var(--pc-cy-deep) 100%);

  --pc-display: 'Sora', 'Segoe UI', sans-serif;
  --pc-body:    'Inter', 'Segoe UI', sans-serif;
  --pc-mono:    'JetBrains Mono', ui-monospace, monospace;

  --pc-shell:   min(1280px, 100% - 2.5rem);
  --pc-radius:  18px;
  --pc-hdr-h:   78px;

  --pc-sh-1: 0 1px 2px rgba(11,13,28,.05), 0 4px 14px rgba(11,13,28,.05);
  --pc-sh-2: 0 12px 34px rgba(11,13,28,.10), 0 2px 8px rgba(11,13,28,.05);
  --pc-sh-3: 0 28px 70px rgba(11,13,28,.16), 0 6px 18px rgba(11,13,28,.07);
}

/* ---------- base ---------------------------------------------------------
   The scope itself is wrapped in :where() too, otherwise `body.pc` contributes
   (0,1,1) and these resets outrank every single-class component rule. */
:where(body.pc) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(body.pc) :where(h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl, dd) { margin: 0; }
:where(body.pc) :where(ul, ol) { padding: 0; list-style: none; }
:where(body.pc) :where(img, svg, video) { display: block; max-width: 100%; height: auto; }
:where(body.pc) :where(a) { color: inherit; text-decoration: none; }
:where(body.pc) :where(button, input, select, textarea) { font: inherit; color: inherit; }

body.pc {
  margin: 0;
  font-family: var(--pc-body);
  font-size: 16px;
  line-height: 1.72;
  color: var(--pc-slate);
  background: var(--pc-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.pc ::selection { background: var(--pc-i700); color: #fff; }

body.pc :focus-visible {
  outline: 2px solid var(--pc-cy);
  outline-offset: 3px;
  border-radius: 6px;
}

/* skip link */
.pc-skip {
  position: fixed; top: -100px; left: 1rem; z-index: 3000;
  background: var(--pc-i700); color: #fff; padding: .7rem 1.15rem;
  border-radius: 0 0 10px 10px; font-weight: 600; transition: top .18s;
}
.pc-skip:focus { top: 0; }

/* ---------- typography --------------------------------------------------- */
.pc-shell { width: var(--pc-shell); margin-inline: auto; }
.pc-shell--tight { width: min(980px, 100% - 2.5rem); }

.pc-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--pc-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--pc-cy-deep); margin-bottom: 1.1rem;
}
.pc-eyebrow::before {
  content: ""; width: 2rem; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, currentColor);
}
.pc-eyebrow--light { color: var(--pc-cy); }

.pc-h1 {
  font-family: var(--pc-display); font-weight: 700;
  font-size: clamp(2.4rem, 1.35rem + 3.5vw, 4.15rem);
  line-height: 1.05; letter-spacing: -.035em; color: var(--pc-white);
}
.pc-h2 {
  font-family: var(--pc-display); font-weight: 700;
  font-size: clamp(1.95rem, 1.25rem + 2.5vw, 3.05rem);
  line-height: 1.12; letter-spacing: -.028em; color: var(--pc-ink);
}
.pc-h3 {
  font-family: var(--pc-display); font-weight: 600;
  font-size: clamp(1.18rem, 1.02rem + .58vw, 1.5rem);
  line-height: 1.28; letter-spacing: -.018em; color: var(--pc-ink);
}
.pc-lead {
  font-size: clamp(1.02rem, .96rem + .3vw, 1.19rem);
  line-height: 1.78; color: var(--pc-slate);
}
.pc-on-dark .pc-h2, .pc-on-dark .pc-h3 { color: #fff; }
.pc-on-dark, .pc-on-dark .pc-lead { color: rgba(226,231,244,.82); }

.pc-ttl-sub { color: var(--pc-steel); font-size: .97rem; }

/* gradient text accent used once per page, on the hero */
.pc-grad-txt {
  background: linear-gradient(100deg, #CFC8F6 0%, #9083DC 38%, #3FC1F0 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- buttons ------------------------------------------------------ */
.pc-btn {
  position: relative; display: inline-flex; align-items: center; gap: .62rem;
  padding: .92rem 1.7rem; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--pc-display); font-weight: 600; font-size: .95rem;
  letter-spacing: -.01em; cursor: pointer; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .3s, color .3s, border-color .3s;
}
.pc-btn svg { width: 17px; height: 17px; flex: none; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pc-btn:hover { transform: translateY(-2px); }
.pc-btn:hover svg { transform: translateX(3px); }

.pc-btn--primary {
  background: var(--pc-grad); color: #fff;
  box-shadow: 0 10px 30px rgba(43,26,102,.32);
  isolation: isolate;   /* so the shine below can sit under the label */
}
/* z-index:-1 inside an isolated element paints ABOVE its own background but
   BELOW its text content - without it the sweep washes out the label. */
.pc-btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.pc-btn--primary:hover::after { transform: translateX(120%); }
.pc-btn--primary:hover { box-shadow: 0 18px 44px rgba(43,26,102,.42); }

.pc-btn--ghost { border-color: rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.pc-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }

.pc-btn--outline { border-color: var(--pc-line); color: var(--pc-i700); background: #fff; box-shadow: var(--pc-sh-1); }
.pc-btn--outline:hover { border-color: var(--pc-i500); box-shadow: var(--pc-sh-2); }

.pc-btn--sm { padding: .62rem 1.15rem; font-size: .86rem; }

/* text link with animated rule */
.pc-tlink {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--pc-display); font-weight: 600; font-size: .92rem;
  color: var(--pc-i600);
}
.pc-tlink svg { width: 15px; height: 15px; transition: transform .3s; }
.pc-tlink:hover svg { transform: translateX(4px); }

/* ==========================================================================
   LOADER — animated logo mark, drawn ring, metallic sweep
   ========================================================================== */
.pc-loader {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center;
  background: radial-gradient(120% 100% at 50% 0%, #1B0F4D 0%, #080519 62%);
  transition: opacity .7s ease, visibility .7s;
}
.pc-loader__in { display: grid; justify-items: center; gap: 1.5rem; }
.pc-loader__ring { position: relative; width: 148px; height: 148px; display: grid; place-items: center; }
.pc-loader__ring svg { position: absolute; inset: 0; width: 148px; height: 148px; transform: rotate(-90deg); }
.pc-loader__ring circle { fill: none; stroke-width: 1.6; }
.pc-loader__trk { stroke: rgba(255,255,255,.10); }
.pc-loader__arc {
  stroke: url(#pcArc); stroke-linecap: round;
  stroke-dasharray: 452; stroke-dashoffset: 452;
  animation: pc-draw 1.9s cubic-bezier(.5,0,.2,1) infinite;
}
@keyframes pc-draw {
  0%   { stroke-dashoffset: 452; transform: rotate(0deg); }
  55%  { stroke-dashoffset: 90; }
  100% { stroke-dashoffset: 452; transform: rotate(360deg); }
}
.pc-loader__ring svg { transform-origin: 50% 50%; }
.pc-loader__mark {
  width: 78px; height: 78px; object-fit: contain;
  border-radius: 12px; background: #fff; padding: 7px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 18px 44px rgba(0,0,0,.45);
  animation: pc-breathe 2.6s ease-in-out infinite;
}
@keyframes pc-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.pc-loader__wm {
  font-family: var(--pc-display); font-weight: 300; font-size: .78rem;
  letter-spacing: .42em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  background: linear-gradient(100deg, rgba(255,255,255,.35) 20%, #fff 50%, rgba(255,255,255,.35) 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pc-sweep 2.4s linear infinite;
}
@keyframes pc-sweep { to { background-position: -220% 0; } }
body.pc-loaded .pc-loader { opacity: 0; visibility: hidden; pointer-events: none; }
html.no-js .pc-loader { display: none; }

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Every page opens on a dark hero, so the header starts transparent with a
   white lockup and flips to white glass once the page scrolls. */
.pc-hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 1200;
  height: var(--pc-hdr-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s, box-shadow .4s, border-color .4s, backdrop-filter .4s;
}
.pc-hdr__in { width: var(--pc-shell); margin-inline: auto; display: flex; align-items: center; gap: 1.4rem; }
.pc-hdr.is-stuck {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-bottom-color: rgba(227,230,240,.9);
  box-shadow: 0 8px 28px rgba(11,13,28,.09);
}

.pc-brand { position: relative; display: flex; align-items: center; flex: none; }
.pc-brand img { height: 42px; width: auto; transition: opacity .35s; }
.pc-brand img + img { position: absolute; inset: 0 auto 0 0; }
.pc-hdr .pc-brand__on-dark  { opacity: 1; }
.pc-hdr .pc-brand__on-light { opacity: 0; }
.pc-hdr.is-stuck .pc-brand__on-dark  { opacity: 0; }
.pc-hdr.is-stuck .pc-brand__on-light { opacity: 1; }

/* nav colours follow the header state */
.pc-hdr .pc-nav__a { color: rgba(255,255,255,.82); }
.pc-hdr .pc-nav__a:hover { color: #fff; background: rgba(255,255,255,.12); }
.pc-hdr .pc-nav__a.is-on { color: #fff; }
.pc-hdr.is-stuck .pc-nav__a { color: var(--pc-slate); }
.pc-hdr.is-stuck .pc-nav__a:hover { color: var(--pc-i700); background: rgba(43,26,102,.055); }
.pc-hdr.is-stuck .pc-nav__a.is-on { color: var(--pc-i700); }
/* prefixed with body.pc so these outrank the `body.pc #menuBtn` base rule */
body.pc .pc-hdr #menuBtn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.26); box-shadow: none; }
body.pc .pc-hdr #menuBtn span { background: #fff; }
body.pc .pc-hdr.is-stuck #menuBtn { background: #fff; border-color: var(--pc-line); box-shadow: var(--pc-sh-1); }
body.pc .pc-hdr.is-stuck #menuBtn span { background: var(--pc-i700); }

.pc-nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.pc-nav__a {
  position: relative; padding: .58rem .82rem; border-radius: 10px;
  font-family: var(--pc-display); font-weight: 500; font-size: .92rem;
  color: var(--pc-slate); white-space: nowrap;
  transition: color .25s, background .25s;
}
.pc-nav__a:hover { color: var(--pc-i700); background: rgba(43,26,102,.055); }
.pc-nav__a.is-on { color: var(--pc-i700); font-weight: 600; }
.pc-nav__a.is-on::after {
  content: ""; position: absolute; left: .82rem; right: .82rem; bottom: .24rem;
  height: 2px; border-radius: 2px; background: var(--pc-grad);
}
.pc-nav__cta { margin-left: .6rem; }

/* products mega dropdown */
.pc-drop { position: relative; }
.pc-drop__btn { display: inline-flex; align-items: center; gap: .38rem; border: 0; background: none; cursor: pointer; }
.pc-drop__btn svg { width: 13px; height: 13px; transition: transform .3s; }
.pc-drop:hover .pc-drop__btn svg { transform: rotate(180deg); }
.pc-mega {
  position: absolute; top: calc(100% + 14px); left: 50%;
  width: min(720px, 84vw); transform: translateX(-50%) translateY(10px);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--pc-line); border-radius: 20px;
  box-shadow: var(--pc-sh-3); padding: 1.15rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .2rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s, transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s;
}
/* hover-intent hitbox so the pointer can cross the 14px gap */
.pc-drop::after { content: ""; position: absolute; inset: 100% 0 auto 0; height: 18px; }
.pc-drop:hover .pc-mega, .pc-drop:focus-within .pc-mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.pc-mega__a {
  display: flex; align-items: center; gap: .7rem;
  padding: .62rem .75rem; border-radius: 12px;
  font-size: .89rem; font-weight: 500; color: var(--pc-slate);
  transition: background .22s, color .22s, transform .22s;
}
.pc-mega__a:hover { background: var(--pc-i100); color: var(--pc-i700); transform: translateX(3px); }
.pc-mega__a i {
  width: 7px; height: 7px; border-radius: 2px; flex: none;
  background: var(--pc-grad); opacity: .55;
}
.pc-mega__all { grid-column: 1 / -1; margin-top: .35rem; padding-top: .85rem; border-top: 1px solid var(--pc-line); text-align: center; }

/* mobile trigger — id/class chosen so the platform's nav injector stands down,
   and so the theme's own script.js (which owns the drawer) binds it for us */
body.pc #menuBtn {
  display: none; margin-left: auto; flex: none;
  width: 46px; height: 46px; border-radius: 13px; cursor: pointer;
  border: 1px solid var(--pc-line); background: #fff;
  align-items: center; justify-content: center; gap: 5px; flex-direction: column;
  box-shadow: var(--pc-sh-1);
}
body.pc #menuBtn span { display: block; width: 19px; height: 1.8px; border-radius: 2px; background: var(--pc-i700); transition: transform .3s, opacity .3s; }

/* backdrop element that script.js injects (it carries Tailwind class names that
   don't resolve on these hand-built pages, so style it here) */
body.pc > div.fixed.inset-0.z-40 {
  position: fixed; inset: 0; z-index: 2300;
  background: rgba(6,4,18,.58); backdrop-filter: blur(3px);
}

/* drawer */
body.pc #mobileMenu {
  position: fixed; inset: 0 0 0 auto; width: min(390px, 88vw); z-index: 2400;
  background: linear-gradient(170deg, #150C3B 0%, #080519 100%);
  transform: translateX(100%); transition: transform .48s cubic-bezier(.2,.85,.25,1);
  display: flex; flex-direction: column; padding: 1.5rem 1.5rem 2.2rem;
  overflow-y: auto; box-shadow: -30px 0 80px rgba(0,0,0,.4);
}
body.pc #mobileMenu.open { transform: translateX(0); }
body.pc #mobileMenu .pc-mm__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.7rem; }
body.pc #mobileMenu .pc-mm__logo { height: 38px; width: auto; }
body.pc #menuClose {
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  color: #fff; display: grid; place-items: center; font-size: 1.35rem; line-height: 1;
}
body.pc #mobileMenu a {
  display: block; padding: .82rem .2rem; color: rgba(226,231,244,.86);
  font-family: var(--pc-display); font-weight: 500; font-size: 1.02rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
body.pc #mobileMenu a:hover { color: #fff; }
body.pc #mobileMenu .pc-mm__sub { padding-left: .9rem; }
body.pc #mobileMenu .pc-mm__sub a { font-size: .9rem; font-weight: 400; color: rgba(226,231,244,.62); padding: .55rem .2rem; }
body.pc #mobileMenu .pc-mm__lbl {
  font-family: var(--pc-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pc-cy); margin: 1.4rem 0 .3rem;
}
body.pc #mobileMenu .pc-btn { margin-top: 1.6rem; justify-content: center; }
/* belt-and-braces: never show the injected fallback nav on our pages */
body.pc .wlk-mnav-btn, body.pc .wlk-mnav, body.pc .wlk-mnav-bd { display: none !important; }

/* ==========================================================================
   HERO
   ========================================================================== */
.pc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 940px);
  display: flex; align-items: center;
  padding: calc(var(--pc-hdr-h) + 5rem) 0 5.5rem;
  background: radial-gradient(120% 110% at 78% 8%, #2B1A66 0%, #120A33 46%, #080519 100%);
}
.pc-hero__grid {
  position: absolute; inset: -10%; z-index: -3; 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: 74px 74px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 25%, transparent 78%);
}
.pc-hero__glow {
  position: absolute; z-index: -2; border-radius: 50%; filter: blur(90px);
  pointer-events: none;
}
.pc-hero__glow--a { width: 44vw; height: 44vw; top: -12%; right: -8%; background: rgba(63,193,240,.20); }
.pc-hero__glow--b { width: 38vw; height: 38vw; bottom: -18%; left: -10%; background: rgba(76,51,168,.30); }
/* component collage — real product photography, no legacy baked-in captions */
.pc-collage { position: relative; display: none; aspect-ratio: 1 / 1; min-height: 0; }
@media (min-width: 1080px) { .pc-collage { display: block; } }
.pc-collage figure {
  position: absolute; margin: 0; overflow: hidden; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 34px 74px rgba(0,0,0,.52);
  background: rgba(255,255,255,.05);
}
.pc-collage img { width: 100%; height: 100%; object-fit: cover; }
.pc-collage__a { inset: 2% 6% 28% 20%; }
.pc-collage__b { width: 46%; aspect-ratio: 4 / 3; left: -2%; bottom: 4%; }
.pc-collage__c { width: 38%; aspect-ratio: 4 / 3; right: 1%; bottom: 14%; }
.pc-collage__ring {
  position: absolute; inset: 8% 4% 12% 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(63,193,240,.28), transparent 62%);
  filter: blur(46px);
}
.pc-collage__badge {
  position: absolute; z-index: 3; left: 2%; top: 8%;
  padding: .62rem 1rem; border-radius: 14px;
  background: rgba(8,5,25,.62); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.18);
  font-family: var(--pc-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; line-height: 1.7;
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
}
.pc-collage__badge b { color: var(--pc-cy); font-weight: 500; }
/* floating technical graphics */
/* kept in the outer gutters so they never sit behind the headline */
.pc-hero__fig { position: absolute; z-index: -1; opacity: .22; pointer-events: none; color: var(--pc-cy); }
.pc-hero__fig--1 { top: 11%; left: 1%;  width: 96px; animation: pc-float 13s ease-in-out infinite; }
.pc-hero__fig--2 { bottom: 6%; right: 1.5%; width: 150px; animation: pc-float 17s ease-in-out infinite reverse; }
.pc-hero__fig--3 { top: 72%; left: .5%; width: 70px; animation: pc-float 11s ease-in-out infinite 1.5s; }
@media (max-width: 1400px) { .pc-hero__fig--1, .pc-hero__fig--3 { display: none; } }
@keyframes pc-float {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%      { transform: translate3d(0,-26px,0) rotate(8deg); }
}

.pc-hero__in { position: relative; display: grid; gap: 2.6rem; align-items: center; }
.pc-hero__copy { display: grid; gap: 2.1rem; }
@media (min-width: 1080px) { .pc-hero__in { grid-template-columns: 1.14fr .86fr; gap: 3.2rem; } }
.pc-hero__tag {
  display: inline-flex; align-items: center; gap: .7rem; justify-self: start;
  padding: .48rem 1.05rem .48rem .55rem; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  font-family: var(--pc-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(226,231,244,.9);
}
.pc-hero__tag b {
  padding: .2rem .55rem; border-radius: 999px; background: var(--pc-grad);
  color: #fff; font-weight: 600; letter-spacing: .1em;
}
.pc-hero__sub { max-width: 61ch; color: rgba(226,231,244,.78); font-size: clamp(1.02rem, .95rem + .38vw, 1.24rem); }
.pc-hero__promise {
  font-family: var(--pc-display); font-style: italic; font-weight: 300;
  color: var(--pc-cy); font-size: 1.02rem; letter-spacing: .01em;
}
.pc-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; }

/* line-by-line headline reveal */
.pc-rl { display: block; overflow: hidden; }
.pc-rl > span { display: block; }
html.js .pc-rl > span { transform: translateY(115%); opacity: 0; }
html.js .pc-hero.is-in .pc-rl > span {
  transform: translateY(0); opacity: 1;
  transition: transform 1.05s cubic-bezier(.16,.84,.28,1), opacity .9s ease;
  transition-delay: calc(var(--i, 0) * 130ms);
}

/* scroll cue */
.pc-hero__cue {
  position: absolute; left: 50%; bottom: 1.9rem; transform: translateX(-50%);
  display: grid; justify-items: center; gap: .55rem;
  font-family: var(--pc-mono); font-size: .64rem; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(226,231,244,.44);
}
.pc-hero__cue i { display: block; width: 1px; height: 44px; background: linear-gradient(to bottom, var(--pc-cy), transparent); animation: pc-cue 2.2s ease-in-out infinite; }
@keyframes pc-cue { 0%, 100% { opacity: .25; transform: scaleY(.5); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* inner-page hero */
.pc-phero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--pc-hdr-h) + 5.2rem) 0 4.2rem;
  background: radial-gradient(115% 130% at 82% 0%, #2B1A66 0%, #120A33 52%, #080519 100%);
}
.pc-phero__grid {
  position: absolute; inset: 0; z-index: -2; opacity: .42;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(70% 100% at 30% 50%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 100% at 30% 50%, #000, transparent 80%);
}
.pc-phero__art {
  position: absolute; inset: 0 0 0 auto; width: min(52%, 660px); z-index: -2;
  background: no-repeat center / cover; opacity: .3;
  mask-image: linear-gradient(to left, #000 8%, transparent 92%);
  -webkit-mask-image: linear-gradient(to left, #000 8%, transparent 92%);
}
.pc-phero h1 {
  font-family: var(--pc-display); font-weight: 700; color: #fff;
  font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.5rem);
  line-height: 1.08; letter-spacing: -.03em; max-width: 20ch;
}
.pc-phero p { margin-top: 1.05rem; max-width: 58ch; color: rgba(226,231,244,.74); }
.pc-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-family: var(--pc-mono); font-size: .71rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(226,231,244,.45); margin-bottom: 1.15rem;
}
.pc-crumb a:hover { color: var(--pc-cy); }
.pc-crumb span { opacity: .5; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.pc-sec { padding: clamp(3.8rem, 2.9rem + 3.6vw, 6.4rem) 0; position: relative; }
.pc-sec--paper { background: var(--pc-paper); }
.pc-sec--dark {
  background: radial-gradient(110% 120% at 20% 0%, #1B0F4D 0%, #0A0620 60%, #080519 100%);
  color: rgba(226,231,244,.8);
}
.pc-sec--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(75% 80% at 50% 45%, #000, transparent 82%);
  -webkit-mask-image: radial-gradient(75% 80% at 50% 45%, #000, transparent 82%);
}
.pc-sec > .pc-shell { position: relative; }

.pc-sechd { max-width: 62ch; margin-bottom: clamp(2.4rem, 1.8rem + 1.8vw, 3.6rem); }
.pc-sechd--c { margin-inline: auto; text-align: center; }
.pc-sechd--c .pc-eyebrow::before { display: none; }
.pc-sechd p { margin-top: 1rem; }

.pc-split { display: grid; gap: clamp(2.2rem, 1.4rem + 3vw, 4.6rem); align-items: center; }
@media (min-width: 900px) { .pc-split { grid-template-columns: 1fr 1fr; } .pc-split--wide { grid-template-columns: 1.15fr .85fr; } }

/* ---------- stat counters ------------------------------------------------ */
.pc-stats {
  display: grid; gap: 1px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1); border-radius: 22px; overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .pc-stats { grid-template-columns: repeat(4, 1fr); } }
.pc-stat { padding: 2rem 1.5rem; background: rgba(9,6,28,.55); backdrop-filter: blur(6px); text-align: center; }
.pc-stat__n {
  font-family: var(--pc-display); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem); line-height: 1;
  background: linear-gradient(120deg, #fff 10%, var(--pc-i300) 55%, var(--pc-cy) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pc-stat__l {
  margin-top: .7rem; font-family: var(--pc-mono); font-size: .69rem;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(226,231,244,.55);
  line-height: 1.5;
}

/* ---------- cards -------------------------------------------------------- */
.pc-grid { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 274px), 1fr)); }
.pc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
/* wide enough that the image + copy split inside .pc-item always has room */
.pc-grid--items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 530px), 1fr)); }

.pc-card {
  position: relative; isolation: isolate; overflow: hidden;
  background: #fff; border: 1px solid var(--pc-line); border-radius: var(--pc-radius);
  padding: 1.9rem 1.7rem; box-shadow: var(--pc-sh-1);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s;
}
.pc-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 1;
  background: var(--pc-grad); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.pc-card:hover { transform: translateY(-6px); box-shadow: var(--pc-sh-3); border-color: #D3D8E8; }
.pc-card:hover::before { transform: scaleX(1); }
.pc-card__n {
  font-family: var(--pc-mono); font-size: .72rem; letter-spacing: .16em;
  color: var(--pc-i300); margin-bottom: .95rem;
}
.pc-card p { margin-top: .6rem; font-size: .93rem; line-height: 1.7; }

.pc-card--glass {
  background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.11);
  backdrop-filter: blur(14px) saturate(1.3); box-shadow: none; color: rgba(226,231,244,.74);
}
.pc-card--glass .pc-h3 { color: #fff; }
.pc-card--glass:hover { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.22); box-shadow: 0 26px 60px rgba(0,0,0,.35); }

.pc-ico {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 1.15rem; flex: none;
  background: linear-gradient(140deg, var(--pc-i100), #fff);
  border: 1px solid var(--pc-line); color: var(--pc-i600);
}
.pc-ico svg { width: 23px; height: 23px; }
.pc-card--glass .pc-ico { background: rgba(63,193,240,.12); border-color: rgba(63,193,240,.25); color: var(--pc-cy); }

/* ---------- category cards (image-led) ----------------------------------- */
.pc-cat {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--pc-line); border-radius: var(--pc-radius);
  box-shadow: var(--pc-sh-1);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s;
}
.pc-cat:hover { transform: translateY(-7px); box-shadow: var(--pc-sh-3); border-color: #D3D8E8; }
.pc-cat__img { position: relative; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: #EEF1F7; }
.pc-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.pc-cat:hover .pc-cat__img img { transform: scale(1.07); }
.pc-cat__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,5,25,.42), transparent 58%);
  opacity: 0; transition: opacity .45s;
}
.pc-cat:hover .pc-cat__img::after { opacity: 1; }
.pc-cat__bd { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.pc-cat__bd p {
  font-size: .89rem; line-height: 1.65; color: var(--pc-steel);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.pc-cat__go { margin-top: auto; padding-top: .9rem; }
.pc-cat__cnt {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  padding: .3rem .68rem; border-radius: 999px;
  background: rgba(8,5,25,.62); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  font-family: var(--pc-mono); font-size: .67rem; letter-spacing: .1em; color: #fff;
}

/* ---------- component (product detail) cards ----------------------------- */
/* Percentage columns, not a viewport media query - these cards sit inside a
   grid cell that is far narrower than the viewport. */
.pc-item {
  display: grid; gap: 1.4rem; align-items: start;
  grid-template-columns: minmax(0, 1fr);
  padding: 1.5rem; border-radius: var(--pc-radius);
  background: #fff; border: 1px solid var(--pc-line); box-shadow: var(--pc-sh-1);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s;
}
@media (min-width: 560px) { .pc-item { grid-template-columns: minmax(130px, 31%) minmax(0, 1fr); gap: 1.6rem; } }
.pc-item:hover { transform: translateY(-4px); box-shadow: var(--pc-sh-2); border-color: #D3D8E8; }
.pc-item__fig {
  position: relative; overflow: hidden; border-radius: 13px;
  aspect-ratio: 4 / 3; min-height: 0; background: #F1F3F9;
  border: 1px solid var(--pc-line);
}
.pc-item__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.pc-item:hover .pc-item__fig img { transform: scale(1.06); }
.pc-item__zoom {
  position: absolute; right: .55rem; bottom: .55rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.86); backdrop-filter: blur(6px);
  border: 1px solid var(--pc-line); color: var(--pc-i600);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.pc-item:hover .pc-item__zoom { opacity: 1; transform: translateY(0); }
.pc-item__zoom svg { width: 15px; height: 15px; }
.pc-item__kicker {
  font-family: var(--pc-mono); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pc-cy-deep); margin-bottom: .6rem;
}
.pc-item__lead { font-family: var(--pc-display); font-weight: 600; color: var(--pc-i700); margin-bottom: .5rem; }

/* ---------- spec tables -------------------------------------------------- */
.pc-spec { border: 1px solid var(--pc-line); border-radius: var(--pc-radius); overflow: hidden; background: #fff; box-shadow: var(--pc-sh-1); }
.pc-spec__hd { padding: 1.15rem 1.5rem; background: linear-gradient(100deg, var(--pc-i700), var(--pc-i500)); color: #fff; }
.pc-spec__hd h3 { font-family: var(--pc-display); font-weight: 600; font-size: 1.05rem; color: #fff; }
.pc-spec__blurb { padding: 1.2rem 1.5rem 0; font-size: .92rem; }
.pc-spec table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.pc-spec caption {
  caption-side: top; text-align: left; padding: 1.2rem 1.5rem .5rem;
  font-family: var(--pc-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pc-steel);
}
.pc-spec th, .pc-spec td { padding: .78rem 1.5rem; text-align: left; vertical-align: top; border-top: 1px solid var(--pc-line); }
.pc-spec th { width: 34%; font-weight: 600; color: var(--pc-ink); background: #FAFBFE; font-family: var(--pc-display); font-size: .85rem; }
.pc-spec tr:hover td, .pc-spec tr:hover th { background: #F5F7FC; }

/* ---------- process timeline --------------------------------------------- */
.pc-tl { position: relative; display: grid; gap: 0; }
.pc-tl::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 27px; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--pc-i300) 8%, var(--pc-i300) 92%, transparent);
  opacity: .45;
}
.pc-tl__i { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.4rem; padding: 0 0 2.1rem; }
.pc-tl__i:last-child { padding-bottom: 0; }
.pc-tl__d {
  width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--pc-line); box-shadow: var(--pc-sh-1);
  font-family: var(--pc-mono); font-size: .82rem; font-weight: 500; color: var(--pc-i600);
  position: relative; z-index: 1;
}
.pc-tl__i:hover .pc-tl__d { background: var(--pc-grad); color: #fff; border-color: transparent; }
.pc-tl__d { transition: background .35s, color .35s, border-color .35s; }
.pc-tl__b { padding-top: .35rem; }
.pc-tl__b p { margin-top: .4rem; font-size: .93rem; }
@media (min-width: 900px) { .pc-tl { grid-template-columns: 1fr 1fr; column-gap: 2.4rem; } .pc-tl::before { display: none; } }

/* ---------- checklist ---------------------------------------------------- */
.pc-list { display: grid; gap: .85rem; }
.pc-list li { display: grid; grid-template-columns: 22px 1fr; gap: .85rem; align-items: start; font-size: .96rem; }
.pc-list svg { width: 22px; height: 22px; margin-top: .28rem; color: var(--pc-cy-deep); flex: none; }
.pc-on-dark .pc-list svg, .pc-sec--dark .pc-list svg { color: var(--pc-cy); }

/* ---------- clients marquee + directory ---------------------------------- */
.pc-mq { position: relative; overflow: hidden; padding: .35rem 0; }
.pc-mq::before, .pc-mq::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none;
}
.pc-mq::before { left: 0;  background: linear-gradient(to right, var(--pc-paper), transparent); }
.pc-mq::after  { right: 0; background: linear-gradient(to left,  var(--pc-paper), transparent); }
.pc-mq__t { display: flex; width: max-content; gap: .8rem; animation: pc-marq 52s linear infinite; }
.pc-mq:hover .pc-mq__t { animation-play-state: paused; }
@keyframes pc-marq { to { transform: translateX(-50%); } }
.pc-chip {
  flex: none; padding: .72rem 1.25rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--pc-line);
  font-family: var(--pc-display); font-weight: 500; font-size: .88rem; color: var(--pc-slate);
  white-space: nowrap; box-shadow: var(--pc-sh-1);
}

.pc-cli { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 252px), 1fr)); }
.pc-cli li {
  padding: .95rem 1.15rem; border-radius: 13px; background: #fff;
  border: 1px solid var(--pc-line); transition: border-color .3s, transform .3s, box-shadow .3s;
}
.pc-cli li:hover { border-color: var(--pc-i300); transform: translateY(-2px); box-shadow: var(--pc-sh-1); }
.pc-cli b { display: block; font-family: var(--pc-display); font-weight: 600; font-size: .92rem; color: var(--pc-ink); line-height: 1.4; }
.pc-cli span { font-size: .81rem; color: var(--pc-steel); }

/* ---------- gallery ------------------------------------------------------ */
.pc-gal { columns: 4 236px; column-gap: 1.05rem; }
.pc-gal figure {
  break-inside: avoid; margin: 0 0 1.05rem; position: relative; overflow: hidden;
  border-radius: 15px; border: 1px solid var(--pc-line); background: #fff;
  box-shadow: var(--pc-sh-1); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.pc-gal figure:hover { transform: translateY(-5px); box-shadow: var(--pc-sh-3); }
.pc-gal img { width: 100%; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.pc-gal figure:hover img { transform: scale(1.06); }
.pc-gal figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.9rem .95rem .85rem;
  background: linear-gradient(to top, rgba(8,5,25,.86), transparent);
  color: #fff; font-size: .82rem; font-weight: 500; line-height: 1.45;
  opacity: 0; transform: translateY(10px); transition: opacity .38s, transform .38s;
}
.pc-gal figure:hover figcaption { opacity: 1; transform: translateY(0); }

/* lightbox */
.pc-lb {
  position: fixed; inset: 0; z-index: 3200; display: none;
  place-items: center; padding: 4vmin;
  background: rgba(6,4,18,.9); backdrop-filter: blur(10px);
}
.pc-lb.open { display: grid; }
.pc-lb img { max-width: 100%; max-height: 84vh; border-radius: 14px; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.pc-lb__cap { margin-top: 1rem; text-align: center; color: rgba(226,231,244,.8); font-size: .9rem; }
.pc-lb__x {
  position: absolute; top: 1.4rem; right: 1.4rem; width: 46px; height: 46px;
  border-radius: 13px; border: 1px solid rgba(255,255,255,.2); cursor: pointer;
  background: rgba(255,255,255,.08); color: #fff; font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center;
}

/* ---------- certificates ------------------------------------------------- */
.pc-cert { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pc-cert__c {
  background: #fff; border: 1px solid var(--pc-line); border-radius: var(--pc-radius);
  overflow: hidden; box-shadow: var(--pc-sh-1); display: flex; flex-direction: column;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.pc-cert__c:hover { transform: translateY(-5px); box-shadow: var(--pc-sh-3); }
.pc-cert__c img { width: 100%; aspect-ratio: 3 / 4; min-height: 0; object-fit: contain; background: #F4F6FB; padding: .9rem; }
.pc-cert__bd { padding: 1.15rem 1.35rem 1.4rem; display: grid; gap: .55rem; }

/* ---------- contact ------------------------------------------------------ */
.pc-ci { display: grid; gap: .3rem; }
.pc-ci__r {
  display: grid; grid-template-columns: 46px 1fr; gap: 1rem; align-items: start;
  padding: 1.05rem 0; border-bottom: 1px solid var(--pc-line);
}
.pc-ci__r:last-child { border-bottom: 0; }
.pc-ci__ic {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--pc-i100), #fff); border: 1px solid var(--pc-line);
  color: var(--pc-i600);
}
.pc-ci__ic svg { width: 20px; height: 20px; }
.pc-ci__k {
  font-family: var(--pc-mono); font-size: .68rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--pc-steel); margin-bottom: .2rem;
}
.pc-ci__v { font-size: .99rem; color: var(--pc-ink); font-weight: 500; line-height: 1.6; }
.pc-ci__v a:hover { color: var(--pc-i600); }

.pc-map { border-radius: var(--pc-radius); overflow: hidden; border: 1px solid var(--pc-line); box-shadow: var(--pc-sh-1); }
.pc-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------- forms (markup + wiring come from the platform) --------------- */
.pc-formwrap {
  background: #fff; border: 1px solid var(--pc-line); border-radius: 22px;
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); box-shadow: var(--pc-sh-2);
}
body.pc .wlk-form { display: grid; gap: 1.05rem; }
body.pc .wlk-form .pc-fr { display: grid; gap: 1.05rem; }
@media (min-width: 680px) { body.pc .wlk-form .pc-fr--2 { grid-template-columns: 1fr 1fr; } }
body.pc .wlk-form label { display: grid; gap: .42rem; }
body.pc .wlk-form label > span {
  font-family: var(--pc-mono); font-size: .69rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pc-steel);
}
body.pc .wlk-form label > span em { font-style: normal; color: var(--pc-cy-deep); }
body.pc .wlk-form input,
body.pc .wlk-form textarea,
body.pc .wlk-form select {
  width: 100%; padding: .88rem 1.05rem; border-radius: 12px;
  border: 1px solid var(--pc-line); background: #FBFCFE; color: var(--pc-ink);
  font-size: .96rem; transition: border-color .25s, box-shadow .25s, background .25s;
}
body.pc .wlk-form textarea { resize: vertical; min-height: 132px; }
body.pc .wlk-form input:focus,
body.pc .wlk-form textarea:focus,
body.pc .wlk-form select:focus {
  outline: 0; background: #fff; border-color: var(--pc-i500);
  box-shadow: 0 0 0 4px rgba(76,51,168,.13);
}
body.pc .wlk-form button[type="submit"] {
  justify-self: start; margin-top: .35rem;
  position: relative; display: inline-flex; align-items: center; gap: .62rem;
  padding: .95rem 1.9rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--pc-grad); color: #fff;
  font-family: var(--pc-display); font-weight: 600; font-size: .95rem;
  box-shadow: 0 10px 30px rgba(43,26,102,.32);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
body.pc .wlk-form button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(43,26,102,.42); }
body.pc .wlk-form button[type="submit"]:disabled { opacity: .7; transform: none; cursor: wait; }
body.pc .wlk-form-status { border-radius: 12px; padding: .85rem 1.1rem; font-size: .9rem; }
body.pc .wlk-form-status.hidden { display: none; }

/* ---------- CTA band ----------------------------------------------------- */
.pc-cta {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 28px; padding: clamp(2.6rem, 2rem + 3vw, 4.6rem);
  background: radial-gradient(120% 150% at 85% 10%, #3A2488 0%, #1B0F4D 48%, #080519 100%);
  color: rgba(226,231,244,.8);
}
.pc-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(65% 90% at 22% 50%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(65% 90% at 22% 50%, #000, transparent 78%);
}
.pc-cta::after {
  content: ""; position: absolute; z-index: -1; width: 30rem; height: 30rem;
  right: -6rem; top: -10rem; border-radius: 50%; filter: blur(80px);
  background: rgba(63,193,240,.22);
}
.pc-cta h2 { color: #fff; max-width: 20ch; }
.pc-cta p { margin-top: 1rem; max-width: 54ch; }
.pc-cta__row { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- footer ------------------------------------------------------- */
.pc-ftr {
  position: relative; background: #06040F; color: rgba(226,231,244,.62);
  padding: clamp(3.4rem, 2.6rem + 2.6vw, 5rem) 0 0; margin-top: 0 !important;
}
.pc-ftr::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--pc-grad); }
.pc-ftr__top { display: grid; gap: 2.6rem; padding-bottom: 3rem; }
@media (min-width: 900px) { .pc-ftr__top { grid-template-columns: 1.5fr 1fr 1fr 1.25fr; } }
.pc-ftr__logo { height: 46px; width: auto; margin-bottom: 1.3rem; }
.pc-ftr p { font-size: .9rem; line-height: 1.75; max-width: 40ch; }
.pc-ftr h4 {
  font-family: var(--pc-mono); font-size: .69rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--pc-cy); margin-bottom: 1.15rem; font-weight: 500;
}
.pc-ftr__l { display: grid; gap: .62rem; }
.pc-ftr__l a { font-size: .9rem; transition: color .25s, transform .25s; display: inline-block; }
.pc-ftr__l a:hover { color: #fff; transform: translateX(3px); }
.pc-ftr__bot {
  border-top: 1px solid rgba(255,255,255,.08); padding: 1.5rem 0;
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; justify-content: space-between;
  font-size: .82rem;
}
/* keep the last line clear of the floating Enquire button */
.pc-ftr__bot > :last-child { padding-right: 10rem; }
@media (max-width: 640px) { .pc-ftr__bot > :last-child { padding-right: 0; } .pc-ftr__bot { padding-bottom: 4.5rem; } }
.pc-ftr__bot a:hover { color: #fff; }

/* ---------- floating enquire button -------------------------------------- */
.pc-fab {
  position: fixed; right: 1.35rem; bottom: 1.35rem; z-index: 1100;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .82rem 1.3rem; border-radius: 999px;
  background: var(--pc-grad); color: #fff;
  font-family: var(--pc-display); font-weight: 600; font-size: .88rem;
  box-shadow: 0 14px 38px rgba(43,26,102,.44);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.pc-fab:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(43,26,102,.55); }
.pc-fab svg { width: 17px; height: 17px; }
/* stand clear of the platform's "Update with AI" pill */
:root:has(.wluai-btn) .pc-fab { display: none; }

/* ---------- scroll reveal (visible by default — JS opts in) -------------- */
html.js body.pc .r { opacity: 0; transform: translateY(26px); }
html.js body.pc .r--l { transform: translateX(-30px); }
html.js body.pc .r--r { transform: translateX(30px); }
html.js body.pc .r--s { transform: scale(.955); }
html.js body.pc .r.in {
  opacity: 1; transform: none;
  transition: opacity .85s cubic-bezier(.16,.84,.28,1), transform .95s cubic-bezier(.16,.84,.28,1);
  transition-delay: calc(var(--d, 0) * 85ms);
}

/* parallax layer */
.pc-plx { will-change: transform; }

/* ==========================================================================
   RESPONSIVE — media queries last so they win on equal specificity
   ========================================================================== */
@media (max-width: 1080px) {
  .pc-nav__a { padding: .55rem .62rem; font-size: .88rem; }
  .pc-mega { width: min(600px, 88vw); }
}
/* 1023px matches script.js, which force-closes the drawer at >= 1024 */
@media (max-width: 1023px) {
  :root { --pc-shell: min(1280px, 100% - 2rem); --pc-hdr-h: 70px; }
  .pc-nav { display: none; }
  body.pc #menuBtn { display: flex; }
  .pc-brand img { height: 36px; }
  .pc-gal { columns: 3 200px; }
}

/* ==========================================================================
   LIGHT + COMPACT LAYER  (client brief: "compact, professional and light
   colour theme based. Add some animated graphics ... in entire site.")

   Appended deliberately rather than rewritten in place: everything above is
   the original dark-hero system, and every rule below either re-tints a dark
   surface to light or tightens spacing. Same specificity + later source order
   = it wins, so the two halves stay readable and this layer stays revertible.

   The dark surfaces this has to neutralise are: .pc-hero, .pc-phero,
   .pc-sec--dark / .pc-on-dark, .pc-cta, .pc-ftr, .pc-loader, #mobileMenu,
   plus the components that only ever sit on them (.pc-stats, .pc-card--glass,
   .pc-btn--ghost, .pc-collage).

   NOTE ON ORDER: the responsive block above is now *before* this layer, so the
   mobile values it sets (--pc-hdr-h, --pc-shell, .pc-brand img, .pc-gal) are
   re-stated in the responsive tail at the very bottom of this file.
   ========================================================================== */

:root {
  /* light surface ramp */
  --pc-paper:   #F6F8FD;
  --pc-mist:    #EDF2FB;
  --pc-sky:     #E4F1FB;
  --pc-lav:     #ECE9F8;
  --pc-line:    #E2E7F2;
  --pc-line-2:  #D6DDEC;

  --pc-slate:   #495168;
  --pc-steel:   #78819B;

  /* on a light page the ink gradient carries the brand, not the pale one */
  --pc-grad-ink: linear-gradient(112deg, #2B1A66 0%, #4C33A8 46%, #0E86C4 100%);

  /* compact */
  --pc-shell:   min(1200px, 100% - 2.4rem);
  --pc-radius:  14px;
  --pc-hdr-h:   66px;

  /* lighter shadows — heavy drop shadows read as "dark theme" even on white */
  --pc-sh-1: 0 1px 2px rgba(11,13,28,.04), 0 3px 10px rgba(11,13,28,.045);
  --pc-sh-2: 0 8px 24px rgba(11,13,28,.07), 0 2px 6px rgba(11,13,28,.04);
  --pc-sh-3: 0 18px 46px rgba(11,13,28,.10), 0 4px 12px rgba(11,13,28,.05);
}

body.pc { line-height: 1.62; color: var(--pc-slate); background: var(--pc-white); }

/* ---------- shared animation keyframes ----------------------------------- */
/* Blueprint grids drift by exactly one cell, so the loop is seamless. */
@keyframes pc-drift-74 { to { background-position: 74px 74px; } }
@keyframes pc-drift-58 { to { background-position: 58px 58px; } }
@keyframes pc-drift-62 { to { background-position: 62px 62px; } }
@keyframes pc-drift-52 { to { background-position: 52px 52px; } }
@keyframes pc-dots-26  { to { background-position: 26px 26px; } }
@keyframes pc-spin     { to { transform: rotate(360deg); } }
@keyframes pc-aura {
  0%, 100% { transform: translate3d(0,0,0) scale(1);    opacity: .8; }
  50%      { transform: translate3d(-3%,4%,0) scale(1.14); opacity: 1; }
}
@keyframes pc-shine { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
@keyframes pc-rule  { 0%, 100% { transform: scaleX(.5); opacity: .55; } 50% { transform: scaleX(1); opacity: 1; } }

/* ---------- typography: tighter scale ------------------------------------ */
.pc-h1 { font-size: clamp(2.05rem, 1.35rem + 2.4vw, 3.15rem); line-height: 1.07; color: var(--pc-ink); }
.pc-h2 { font-size: clamp(1.58rem, 1.18rem + 1.55vw, 2.3rem); line-height: 1.14; }
.pc-h3 { font-size: clamp(1.06rem, .99rem + .3vw, 1.24rem); line-height: 1.3; }
.pc-lead { font-size: clamp(.97rem, .93rem + .22vw, 1.08rem); line-height: 1.68; color: var(--pc-slate); }
.pc-ttl-sub { font-size: .9rem; }

.pc-eyebrow { font-size: .67rem; letter-spacing: .2em; margin-bottom: .75rem; color: var(--pc-cy-deep); }
.pc-eyebrow--light { color: var(--pc-cy-deep); }
.pc-eyebrow::before { width: 1.7rem; transform-origin: left; animation: pc-rule 3.6s ease-in-out infinite; }

/* the hero wordmark gradient has to darken now that it sits on white */
.pc-grad-txt {
  background: linear-gradient(100deg, #2B1A66 0%, #4C33A8 40%, #0E86C4 94%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* "on dark" blocks are now light bands — same class names, inverted palette */
.pc-on-dark .pc-h2, .pc-on-dark .pc-h3 { color: var(--pc-ink); }
.pc-on-dark, .pc-on-dark .pc-lead { color: var(--pc-slate); }

/* ---------- buttons: smaller, lighter ------------------------------------ */
.pc-btn { padding: .72rem 1.34rem; font-size: .9rem; }
.pc-btn--sm { padding: .52rem 1rem; font-size: .82rem; }
.pc-btn--primary { box-shadow: 0 6px 18px rgba(43,26,102,.22); }
.pc-btn--primary:hover { box-shadow: 0 12px 30px rgba(43,26,102,.3); }
/* ghost used to be a white outline on a dark hero; it now needs the opposite */
.pc-btn--ghost {
  background: #fff; border-color: var(--pc-line-2); color: var(--pc-i700);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--pc-sh-1);
}
.pc-btn--ghost:hover { background: #fff; border-color: var(--pc-i500); color: var(--pc-i600); box-shadow: var(--pc-sh-2); }
.pc-tlink { font-size: .88rem; }

/* ---------- loader: white, indigo ---------------------------------------- */
.pc-loader { background: radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, #EDF2FB 58%, #E5EDF9 100%); }
.pc-loader__in { gap: 1.15rem; }
.pc-loader__ring, .pc-loader__ring svg { width: 124px; height: 124px; }
.pc-loader__trk { stroke: rgba(43,26,102,.11); }
.pc-loader__mark {
  width: 66px; height: 66px;
  box-shadow: 0 0 0 1px rgba(43,26,102,.07), 0 14px 34px rgba(11,13,28,.13);
}
.pc-loader__wm {
  background: linear-gradient(100deg, rgba(43,26,102,.3) 20%, #2B1A66 50%, rgba(43,26,102,.3) 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- header: light at rest, not just when stuck ------------------- */
.pc-hdr {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom-color: rgba(226,231,242,.85);
}
.pc-hdr.is-stuck {
  background: rgba(255,255,255,.95);
  border-bottom-color: var(--pc-line);
  box-shadow: 0 6px 22px rgba(11,13,28,.07);
}
/* the white knockout lockup would disappear on a light header — always show
   the colour one (build.py now carries the alt text on that img) */
.pc-hdr .pc-brand__on-dark  { opacity: 0; }
.pc-hdr .pc-brand__on-light { opacity: 1; }
.pc-brand img { height: 34px; }

.pc-hdr .pc-nav__a { color: var(--pc-slate); }
.pc-hdr .pc-nav__a:hover { color: var(--pc-i700); background: rgba(43,26,102,.06); }
.pc-hdr .pc-nav__a.is-on { color: var(--pc-i700); }
.pc-nav__a { padding: .5rem .72rem; font-size: .89rem; border-radius: 8px; }
body.pc .pc-hdr #menuBtn { background: #fff; border-color: var(--pc-line-2); box-shadow: var(--pc-sh-1); }
body.pc .pc-hdr #menuBtn span { background: var(--pc-i700); }
body.pc #menuBtn { width: 42px; height: 42px; border-radius: 11px; }

/* animated graphic 1 — a slow light sweep along the header rule */
.pc-hdr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent, rgba(63,193,240,.75), rgba(43,26,102,.55), transparent);
  background-size: 38% 100%; background-repeat: no-repeat;
  animation: pc-hdrscan 9s linear infinite;
}
@keyframes pc-hdrscan { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }

.pc-mega { border-radius: 16px; padding: .9rem; }
.pc-mega__a { padding: .52rem .68rem; font-size: .87rem; }

/* ---------- mobile drawer: light ----------------------------------------- */
body.pc #mobileMenu {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FD 100%);
  box-shadow: -20px 0 60px rgba(11,13,28,.16);
  padding: 1.2rem 1.3rem 2rem;
}
body.pc #mobileMenu .pc-mm__top { margin-bottom: 1.2rem; }
body.pc #mobileMenu a { color: var(--pc-slate); border-bottom-color: var(--pc-line); padding: .7rem .2rem; font-size: .97rem; }
body.pc #mobileMenu a:hover { color: var(--pc-i700); }
body.pc #mobileMenu .pc-mm__sub a { color: var(--pc-steel); }
body.pc #mobileMenu .pc-mm__lbl { color: var(--pc-cy-deep); margin: 1.05rem 0 .25rem; }
body.pc #menuClose { background: #fff; border-color: var(--pc-line-2); color: var(--pc-i700); width: 38px; height: 38px; border-radius: 11px; }
body.pc > div.fixed.inset-0.z-40 { background: rgba(16,20,38,.34); }

/* ==========================================================================
   HERO — light, shorter, and carrying most of the animated graphics
   ========================================================================== */
.pc-hero {
  min-height: min(84svh, 760px);
  padding: calc(var(--pc-hdr-h) + 3.2rem) 0 3.6rem;
  background: linear-gradient(178deg, #FFFFFF 0%, #F5F8FD 38%, #EAF1FB 76%, #E9EDF9 100%);
}
/* animated graphic 2 — drifting blueprint grid */
.pc-hero__grid {
  opacity: 1;
  background-image:
    linear-gradient(rgba(43,26,102,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,26,102,.055) 1px, transparent 1px);
  animation: pc-drift-74 30s linear infinite;
}
/* animated graphic 3 — breathing aurora glows */
.pc-hero__glow { filter: blur(80px); }
.pc-hero__glow--a { background: rgba(63,193,240,.3);  animation: pc-aura 17s ease-in-out infinite; }
.pc-hero__glow--b { background: rgba(76,51,168,.18); animation: pc-aura 23s ease-in-out infinite reverse; }
/* animated graphic 4 — a slow conic sweep behind the collage */
.pc-hero::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  width: 34rem; height: 34rem; right: -10rem; top: -12rem; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(63,193,240,.2), rgba(76,51,168,.13) 30%, rgba(63,193,240,0) 58%, rgba(63,193,240,.2));
  filter: blur(46px); animation: pc-spin 44s linear infinite;
}

.pc-hero__in { gap: 2rem; }
.pc-hero__copy { gap: 1.35rem; }
.pc-hero__cta { gap: .7rem; }
.pc-hero__tag {
  background: #fff; border-color: var(--pc-line-2); color: var(--pc-slate);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: var(--pc-sh-1); font-size: .68rem;
}
.pc-hero__sub { color: var(--pc-slate); font-size: clamp(.99rem, .94rem + .28vw, 1.12rem); max-width: 58ch; }
.pc-hero__promise { color: var(--pc-cy-deep); font-size: .96rem; }
.pc-hero__cue { color: var(--pc-steel); bottom: 1.3rem; }
.pc-hero__cue i { height: 34px; background: linear-gradient(to bottom, var(--pc-cy-deep), transparent); }
/* floating technical line-art, now indigo on white */
.pc-hero__fig { color: var(--pc-i500); opacity: .17; }

.pc-collage figure { border-radius: 15px; border-color: #fff; background: #fff; box-shadow: 0 16px 40px rgba(11,13,28,.13); }
.pc-collage__ring { background: radial-gradient(circle, rgba(63,193,240,.3), transparent 62%); animation: pc-aura 19s ease-in-out infinite; }
.pc-collage__badge {
  background: rgba(255,255,255,.92); border-color: var(--pc-line-2);
  color: var(--pc-ink); box-shadow: var(--pc-sh-2); font-size: .65rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pc-collage__badge b { color: var(--pc-cy-deep); }

/* ---------- inner-page hero ---------------------------------------------- */
.pc-phero {
  padding: calc(var(--pc-hdr-h) + 2.7rem) 0 2.5rem;
  background: linear-gradient(172deg, #FFFFFF 0%, #F4F8FD 50%, #EAF0FA 100%);
  border-bottom: 1px solid var(--pc-line);
}
.pc-phero__grid {
  opacity: 1;
  background-image:
    linear-gradient(rgba(43,26,102,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,26,102,.05) 1px, transparent 1px);
  animation: pc-drift-58 26s linear infinite;
}
/* the page-hero photograph has to sit far back on a light ground */
.pc-phero__art { opacity: .16; mask-image: linear-gradient(to left, #000 0%, transparent 86%); -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 86%); }
/* animated graphics 5 + 6 — a slowly rotating rule ring and a soft glow, so
   every interior page gets movement too, not just the homepage */
.pc-phero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 21rem; height: 21rem; right: -6.5rem; top: -7.5rem; border-radius: 50%;
  border: 1px dashed rgba(43,26,102,.15);
  animation: pc-spin 70s linear infinite;
}
.pc-phero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 13rem; height: 13rem; right: 5rem; bottom: -6rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(63,193,240,.24), transparent 66%);
  filter: blur(32px); animation: pc-aura 21s ease-in-out infinite;
}
.pc-phero h1 { color: var(--pc-ink); font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.65rem); }
.pc-phero p { color: var(--pc-slate); margin-top: .8rem; font-size: .99rem; }
.pc-crumb { color: var(--pc-steel); margin-bottom: .8rem; font-size: .68rem; }
.pc-crumb a:hover { color: var(--pc-i600); }

/* ==========================================================================
   SECTIONS — compact rhythm, and the dark band becomes a tinted light band
   ========================================================================== */
.pc-sec { padding: clamp(2.5rem, 1.95rem + 2.1vw, 4.1rem) 0; }
/* explicit stacking so the decorative pseudo-elements below can never cover
   the content that follows them in the DOM */
.pc-sec > .pc-shell { position: relative; z-index: 1; }

.pc-sec--dark {
  background: linear-gradient(155deg, #F2F6FD 0%, #EBF1FB 46%, #EEEBF9 100%);
  color: var(--pc-slate);
  border-top: 1px solid var(--pc-line); border-bottom: 1px solid var(--pc-line);
}
.pc-sec--dark::before {
  background-image:
    linear-gradient(rgba(43,26,102,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,26,102,.05) 1px, transparent 1px);
  animation: pc-drift-62 36s linear infinite;
}
.pc-on-dark .pc-list svg, .pc-sec--dark .pc-list svg { color: var(--pc-cy-deep); }

/* animated graphics 7 + 8 — a drifting dot mesh and a drifting glow on every
   paper section, which is what puts subtle motion on all 22 pages */
.pc-sec--paper::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(43,26,102,.1) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(58% 68% at 88% 4%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(58% 68% at 88% 4%, #000, transparent 72%);
  animation: pc-dots-26 24s linear infinite;
}
.pc-sec--paper::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 17rem; height: 17rem; left: -6rem; bottom: -7rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(63,193,240,.17), transparent 66%);
  filter: blur(34px); animation: pc-aura 25s ease-in-out infinite;
}

.pc-sechd { max-width: 58ch; margin-bottom: clamp(1.7rem, 1.3rem + 1.2vw, 2.5rem); }
.pc-sechd p { margin-top: .7rem; }
.pc-split { gap: clamp(1.7rem, 1.2rem + 2.2vw, 3.4rem); }

/* ---------- stat counters: white cards, animated ink gradient ------------- */
.pc-stats { background: var(--pc-line); border-color: var(--pc-line); border-radius: 16px; box-shadow: var(--pc-sh-1); }
.pc-stat { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 1.35rem 1rem; }
.pc-stat__n {
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  background: linear-gradient(115deg, #2B1A66 6%, #4C33A8 46%, #0E86C4 100%);
  background-size: 210% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pc-shine 10s ease-in-out infinite;
}
.pc-stat__l { color: var(--pc-steel); margin-top: .45rem; font-size: .66rem; }

/* ---------- cards: tighter, with a hover sheen --------------------------- */
.pc-grid { gap: 1rem; }
.pc-card { padding: 1.35rem 1.3rem; }
.pc-card p { margin-top: .45rem; font-size: .9rem; line-height: 1.62; }
.pc-card__n { margin-bottom: .7rem; font-size: .68rem; color: var(--pc-i500); }
.pc-card:hover { transform: translateY(-4px); border-color: var(--pc-line-2); }
/* animated graphic 9 — the card is already isolated, so z-index:-1 paints
   over its background but under its text (same trick as .pc-btn--primary) */
.pc-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(63,193,240,.14) 50%, transparent 68%);
  transform: translateX(-125%); transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.pc-card:hover::after { transform: translateX(125%); }

/* the glass card only ever appears on the old dark band — re-frost it light */
.pc-card--glass {
  background: rgba(255,255,255,.8); border-color: rgba(255,255,255,.9);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: var(--pc-sh-1); color: var(--pc-slate);
}
.pc-card--glass .pc-h3 { color: var(--pc-ink); }
.pc-card--glass:hover { background: #fff; border-color: var(--pc-line-2); box-shadow: var(--pc-sh-2); }
.pc-card--glass .pc-ico { background: linear-gradient(140deg, var(--pc-i100), #fff); border-color: var(--pc-line); color: var(--pc-i600); }

.pc-ico {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: .85rem;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s;
}
.pc-ico svg { width: 20px; height: 20px; }
/* animated graphic 10 — icon tilt on card hover */
.pc-card:hover .pc-ico { transform: translateY(-2px) rotate(-5deg); box-shadow: 0 8px 20px rgba(43,26,102,.16); border-color: var(--pc-i300); }

/* ---------- category / component cards ----------------------------------- */
.pc-cat:hover { transform: translateY(-5px); border-color: var(--pc-line-2); }
.pc-cat__bd { padding: 1.05rem 1.15rem 1.25rem; gap: .38rem; }
.pc-cat__bd p { font-size: .86rem; line-height: 1.58; }
.pc-cat__go { padding-top: .65rem; }
.pc-cat__cnt {
  background: rgba(255,255,255,.92); border-color: var(--pc-line-2); color: var(--pc-i700);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: .65rem;
}
.pc-item { padding: 1.15rem; gap: 1.1rem; }
.pc-item__kicker { margin-bottom: .45rem; font-size: .67rem; }
.pc-item__lead { margin-bottom: .35rem; font-size: .95rem; }

/* ---------- spec tables --------------------------------------------------- */
.pc-spec__hd { padding: .9rem 1.2rem; }
.pc-spec__hd h3 { font-size: 1rem; }
.pc-spec__blurb { padding: .95rem 1.2rem 0; font-size: .89rem; }
.pc-spec caption { padding: .95rem 1.2rem .35rem; font-size: .67rem; }
.pc-spec th, .pc-spec td { padding: .58rem 1.2rem; }
.pc-spec table { font-size: .85rem; }

/* ---------- timeline: tighter, with a flowing line ----------------------- */
.pc-tl__i { grid-template-columns: 46px 1fr; gap: 1.05rem; padding-bottom: 1.5rem; }
.pc-tl__d { width: 46px; height: 46px; border-radius: 14px; font-size: .76rem; }
.pc-tl__b p { font-size: .9rem; }
/* animated graphic 11 — light travelling down the connector (mobile only:
   the >=900px rule above hides this line entirely) */
.pc-tl::before {
  left: 23px; opacity: .55;
  background: linear-gradient(to bottom, transparent, var(--pc-i300) 6%, var(--pc-cy) 50%, var(--pc-i300) 94%, transparent);
  background-size: 100% 220%;
  animation: pc-flow 7s linear infinite;
}
@keyframes pc-flow { to { background-position: 0 -220%; } }

/* ---------- lists, marquee, clients, gallery ----------------------------- */
.pc-list { gap: .6rem; }
.pc-list li { grid-template-columns: 20px 1fr; gap: .7rem; font-size: .92rem; }
.pc-list svg { width: 20px; height: 20px; margin-top: .22rem; }
.pc-chip { padding: .58rem 1.05rem; font-size: .84rem; }
.pc-cli li { padding: .78rem 1rem; border-radius: 11px; }
.pc-cli b { font-size: .89rem; }
.pc-gal { columns: 4 210px; column-gap: .85rem; }
.pc-gal figure { margin-bottom: .85rem; border-radius: 12px; }
.pc-cert { gap: 1rem; }
.pc-cert__bd { padding: .95rem 1.15rem 1.15rem; gap: .4rem; }

/* ---------- contact + forms ---------------------------------------------- */
.pc-ci__r { grid-template-columns: 40px 1fr; gap: .85rem; padding: .8rem 0; }
.pc-ci__ic { width: 40px; height: 40px; border-radius: 12px; }
.pc-ci__ic svg { width: 18px; height: 18px; }
.pc-ci__v { font-size: .95rem; }
.pc-map iframe { height: 340px; }
.pc-formwrap { padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); border-radius: 16px; }
body.pc .wlk-form { gap: .85rem; }
body.pc .wlk-form .pc-fr { gap: .85rem; }
body.pc .wlk-form input,
body.pc .wlk-form textarea,
body.pc .wlk-form select { padding: .72rem .9rem; border-radius: 10px; font-size: .93rem; }
body.pc .wlk-form textarea { min-height: 108px; }
body.pc .wlk-form button[type="submit"] { padding: .78rem 1.5rem; font-size: .9rem; box-shadow: 0 6px 18px rgba(43,26,102,.22); }

/* ---------- CTA band: light, with a drifting grid ------------------------ */
.pc-cta {
  border-radius: 20px; padding: clamp(1.9rem, 1.5rem + 2.2vw, 3.4rem);
  background: linear-gradient(125deg, #F3F6FD 0%, #EAF1FB 44%, #EDEAF9 100%);
  color: var(--pc-slate);
  border: 1px solid var(--pc-line); box-shadow: var(--pc-sh-1);
}
.pc-cta::before {
  background-image:
    linear-gradient(rgba(43,26,102,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,26,102,.055) 1px, transparent 1px);
  animation: pc-drift-52 32s linear infinite;
}
.pc-cta::after {
  width: 22rem; height: 22rem; right: -5rem; top: -8rem;
  background: rgba(63,193,240,.22); filter: blur(58px);
  animation: pc-aura 20s ease-in-out infinite;
}
.pc-cta h2 { color: var(--pc-ink); }
.pc-cta p { margin-top: .75rem; }
.pc-cta__row { margin-top: 1.5rem; gap: .7rem; }

/* ---------- footer: light ------------------------------------------------ */
.pc-ftr {
  background: linear-gradient(180deg, #F5F8FD 0%, #EDF2FB 100%);
  color: var(--pc-slate);
  border-top: 1px solid var(--pc-line);
  padding: clamp(2.4rem, 2rem + 1.6vw, 3.4rem) 0 0;
}
.pc-ftr__top { gap: 1.9rem; padding-bottom: 2rem; }
.pc-ftr__logo { height: 38px; margin-bottom: .95rem; }
.pc-ftr p { font-size: .87rem; line-height: 1.65; }
.pc-ftr h4 { color: var(--pc-cy-deep); margin-bottom: .85rem; font-size: .66rem; }
.pc-ftr__l { gap: .45rem; }
.pc-ftr__l a { font-size: .87rem; }
.pc-ftr__l a:hover { color: var(--pc-i700); }
.pc-ftr__bot { border-top-color: var(--pc-line); padding: 1.15rem 0; color: var(--pc-steel); font-size: .8rem; }
.pc-ftr__bot a:hover { color: var(--pc-i700); }

/* ---------- floating enquire button: pulsing halo ------------------------ */
.pc-fab { padding: .68rem 1.15rem; font-size: .84rem; animation: pc-fabpulse 3.4s ease-in-out infinite; }
@keyframes pc-fabpulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(43,26,102,.32), 0 0 0 0 rgba(63,193,240,.45); }
  65%      { box-shadow: 0 10px 26px rgba(43,26,102,.32), 0 0 0 13px rgba(63,193,240,0); }
}

/* ---------- accessibility: honour reduced-motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.pc *, body.pc *::before, body.pc *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   PRODUCT DETAIL PAGES  (client brief: "need to redesign more nicely of every
   product details page", 2026-09-05)

   Every selector below is a NEW class, so this extends the light layer above
   rather than overriding any of it, and the RESPONSIVE TAIL still comes after.
   The design problem it solves: two thirds of the twelve ranges hold only one
   or two components, so the old wide two-up card grid left a single stranded
   card on a very empty page. Now the first component is a full spotlight, the
   crawled comma-separated part lists render as pills instead of a run-on
   sentence, and the page carries on into capability and sibling ranges.
   ========================================================================== */

/* ---------- hero credential chips ---------------------------------------- */
.pc-hmeta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.15rem; }
.pc-hmeta__i {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .82rem; border-radius: 999px;
  background: rgba(255,255,255,.74); border: 1px solid var(--pc-line);
  box-shadow: var(--pc-sh-1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--pc-mono); font-size: .67rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--pc-i700);
}
.pc-hmeta__i svg { width: 15px; height: 15px; flex: none; color: var(--pc-cy-deep); }

/* ---------- shared photo plate ------------------------------------------- */
/* The legacy photographs are only 465-545px wide, so they are always framed
   inside a padded panel and capped in width - blown up full-bleed they go soft. */
.pc-fig {
  position: relative; z-index: 1; display: block; overflow: hidden;
  width: 100%; aspect-ratio: 4 / 3; min-height: 0; border-radius: 12px;
  background: #F1F3F9; border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--pc-sh-2);
}
.pc-fig img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.pc-fig:hover img { transform: scale(1.05); }
.pc-fig__zoom {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 2;
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.9); border: 1px solid var(--pc-line-2);
  color: var(--pc-i700); box-shadow: var(--pc-sh-1);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.pc-fig__zoom svg { width: 15px; height: 15px; }

/* ---------- featured component ------------------------------------------- */
.pc-spot {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: #fff; border: 1px solid var(--pc-line);
  border-radius: calc(var(--pc-radius) + 6px); box-shadow: var(--pc-sh-2);
}
.pc-spot::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
  background: var(--pc-grad-ink);
}
.pc-spot__media {
  position: relative; display: grid; place-items: center;
  padding: clamp(1rem, .8rem + .7vw, 1.7rem);
  background: linear-gradient(150deg, #EEF3FB 0%, #E6EDFA 52%, #EFEAF9 100%);
}
/* the same drifting blueprint grid the rest of the site uses */
.pc-spot__media::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(43,26,102,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,26,102,.05) 1px, transparent 1px);
  background-size: 52px 52px; animation: pc-drift-52 34s linear infinite;
}
.pc-spot__link { position: relative; z-index: 1; display: block; width: 100%; max-width: 520px; }
.pc-spot__link:hover .pc-fig__zoom { opacity: 1; transform: translateY(0); }
/* centred, not top-aligned: six of the twelve ranges hold a single component,
   and pinned to the top the copy left a tall hole beside the photograph */
.pc-spot__bd { padding: clamp(1.35rem, 1rem + 1.2vw, 2.2rem); display: flex; flex-direction: column; justify-content: center; }
.pc-spot__bd .pc-h2 { font-size: clamp(1.3rem, 1.1rem + .95vw, 1.85rem); }
.pc-spot__lead { margin-top: .65rem; font-size: .95rem; line-height: 1.72; }
.pc-spot__row { margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.pc-lbl {
  margin-top: 1.3rem; margin-bottom: .6rem;
  font-family: var(--pc-mono); font-size: .66rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--pc-steel);
}

/* ---------- part pills ---------------------------------------------------- */
.pc-parts { display: flex; flex-wrap: wrap; gap: .42rem; margin: 0; }
.pc-parts li {
  /* max-width keeps a long part name ("Multipurpose Stationary Boxes") wrapping
     inside its pill instead of running off a 412px phone */
  display: inline-flex; align-items: center; gap: .45rem; max-width: 100%;
  padding: .38rem .74rem .38rem .6rem; border-radius: 9px;
  background: var(--pc-paper); border: 1px solid var(--pc-line);
  font-size: .83rem; font-weight: 500; color: var(--pc-slate); line-height: 1.35;
  transition: background .25s, border-color .25s, color .25s;
}
.pc-parts li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--pc-cy-deep); opacity: .85;
}
.pc-parts li:hover { background: #fff; border-color: var(--pc-i300); color: var(--pc-i700); }
.pc-parts--sm li { padding: .28rem .6rem .28rem .5rem; font-size: .775rem; border-radius: 7px; }

/* ---------- the rest of the range ---------------------------------------- */
/* auto-FILL, not auto-fit: four of the ranges have exactly one card left after
   the spotlight, and auto-fit would stretch that one card the full 1200px and
   blow its 465px-wide legacy photograph up to mush. --few narrows the whole
   grid instead, so a lone card reads as a deliberate column. */
.pc-cmpgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); }
.pc-cmpgrid--few { max-width: 760px; }
.pc-cmp {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--pc-line); border-radius: var(--pc-radius);
  box-shadow: var(--pc-sh-1);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s;
}
.pc-cmp:hover { transform: translateY(-4px); box-shadow: var(--pc-sh-2); border-color: var(--pc-line-2); }
.pc-cmp:hover .pc-fig__zoom { opacity: 1; transform: translateY(0); }
.pc-cmp__media { position: relative; padding: .7rem; background: linear-gradient(150deg, #F1F5FC, #E9EFFA 60%, #F1EDFA); }
.pc-cmp__media a { display: block; }
.pc-cmp .pc-fig { border-radius: 10px; box-shadow: var(--pc-sh-1); }
.pc-cmp__no {
  position: absolute; top: 1.05rem; left: 1.05rem; z-index: 3;
  min-width: 27px; height: 24px; padding: 0 .42rem; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.93); border: 1px solid var(--pc-line-2);
  font-family: var(--pc-mono); font-size: .65rem; color: var(--pc-i700);
}
.pc-cmp__bd { padding: .95rem 1.05rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.pc-cmp__bd .pc-h3 { font-size: .99rem; }
.pc-cmp__k {
  font-family: var(--pc-mono); font-size: .64rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pc-cy-deep);
}
.pc-cmp__bd p { font-size: .85rem; line-height: 1.6; color: var(--pc-slate); }

/* ---------- capability strip ---------------------------------------------- */
.pc-caps { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 162px), 1fr)); }
.pc-cap {
  display: flex; align-items: center; gap: .7rem;
  padding: .82rem .9rem; border-radius: 12px;
  background: #fff; border: 1px solid var(--pc-line); box-shadow: var(--pc-sh-1);
  font-family: var(--pc-display); font-weight: 600; font-size: .855rem; color: var(--pc-ink);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s;
}
.pc-cap svg { width: 19px; height: 19px; flex: none; color: var(--pc-i600); transition: transform .4s, color .4s; }
.pc-cap:hover { transform: translateY(-3px); border-color: var(--pc-i300); box-shadow: var(--pc-sh-2); }
.pc-cap:hover svg { transform: rotate(-8deg); color: var(--pc-cy-deep); }

/* ---------- sibling ranges (pictures, not bare chips) --------------------- */
.pc-relgrid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 178px), 1fr)); }
.pc-rel {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px; background: #fff; border: 1px solid var(--pc-line);
  box-shadow: var(--pc-sh-1);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;
}
.pc-rel:hover { transform: translateY(-4px); box-shadow: var(--pc-sh-2); border-color: var(--pc-line-2); }
.pc-rel__img { position: relative; aspect-ratio: 16 / 10; min-height: 0; overflow: hidden; background: #EEF1F7; }
.pc-rel__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.pc-rel:hover .pc-rel__img img { transform: scale(1.07); }
.pc-rel__n {
  padding: .62rem .8rem .78rem; display: block;
  font-family: var(--pc-display); font-weight: 600; font-size: .82rem; line-height: 1.35;
  color: var(--pc-ink);
}
.pc-rel:hover .pc-rel__n { color: var(--pc-i700); }
.pc-rel--all {
  align-items: center; justify-content: center; text-align: center; min-height: 120px;
  background: linear-gradient(150deg, #F2F6FD, #EAF0FA 60%, #EFEAF9);
}
.pc-rel--all .pc-rel__n { display: flex; align-items: center; gap: .45rem; color: var(--pc-i700); padding: 1rem .9rem; }
.pc-rel--all svg { width: 16px; height: 16px; transition: transform .3s; }
.pc-rel--all:hover svg { transform: translateX(4px); }

/* ---------- responsive (own block only; the file's tail still follows) ---- */
@media (min-width: 760px) {
  /* fixed columns, not auto-fit: there are always eight processes and eight
     sibling tiles, so 4 + 4 beats the ragged 6 + 2 auto-fit produces at 1200px */
  .pc-caps { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  .pc-spot { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: stretch; }
  .pc-relgrid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px) {
  .pc-hmeta__i { font-size: .62rem; padding: .36rem .68rem; letter-spacing: .09em; }
  .pc-caps { grid-template-columns: 1fr 1fr; }
  .pc-cap { padding: .7rem .75rem; font-size: .8rem; gap: .55rem; }
}

/* ==========================================================================
   HOME BANNER  (client: "add this somewhere in home page and adjust",
   2026-09-05, attaching a screenshot of the old plastochem.in header band)

   The artwork is the company's own banner, cropped straight out of the legacy
   header image by assets.py -> home-banner.jpg. All new class names, so this
   overrides nothing above it and the RESPONSIVE TAIL still comes after.

   It is CAPPED at its natural 1001px rather than stretched to the shell: the
   two taglines and the script line are burnt into the pixels at that size and
   there is no larger original anywhere in the crawl, so any upscale softens
   the type first. The inset that leaves inside a 1200px shell is why the plate
   is framed and shadowed - it has to read as a deliberate plate, not a short
   image. It heads the quality section because the banner's script line and
   that section's headline are the same sentence.
   ========================================================================== */
.pc-osb {
  position: relative; z-index: 1;
  max-width: 1001px;
  margin: 0 auto clamp(1.9rem, 1.4rem + 1.8vw, 3.2rem);
  border-radius: var(--pc-radius); overflow: hidden;
  background: var(--pc-white);
  border: 1px solid var(--pc-line); box-shadow: var(--pc-sh-2);
}
.pc-osb img { display: block; width: 100%; height: auto; }
/* brand rule along the foot, to tie the legacy artwork to the new palette */
.pc-osb::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--pc-grad-ink);
}

/* Below 760px the full 4.2:1 strip would shrink the burnt-in wording to about
   7px, so the plate crops to the right of the artwork instead - the portrait
   and the "Committed to Provide / Quality Products" script. 21/10 shows the
   rightmost 50.1% (from x=500 of 1001); the script starts at x=536, so it
   stays inside the crop. Both taglines are already set as live text in the
   hero above, so nothing is lost. */
@media (max-width: 760px) {
  .pc-osb img { aspect-ratio: 21 / 10; object-fit: cover; object-position: 100% 50%; }
}

/* ==========================================================================
   RESPONSIVE TAIL — must stay last in the file (media queries add no
   specificity, so anything above would otherwise win on source order)
   ========================================================================== */
@media (max-width: 1080px) {
  .pc-nav__a { padding: .46rem .58rem; font-size: .86rem; }
  .pc-mega { width: min(580px, 88vw); }
}
@media (max-width: 1023px) {
  :root { --pc-shell: min(1200px, 100% - 1.8rem); --pc-hdr-h: 60px; }
  .pc-brand img { height: 31px; }
  .pc-gal { columns: 3 180px; }
  .pc-hero { min-height: auto; padding: calc(var(--pc-hdr-h) + 2.6rem) 0 2.8rem; }
  .pc-phero { padding: calc(var(--pc-hdr-h) + 2.2rem) 0 2rem; }
}
@media (max-width: 640px) {
  .pc-sec { padding: 2.1rem 0; }
  .pc-gal { columns: 2 150px; }
  .pc-cta { border-radius: 16px; }
  .pc-ftr__top { gap: 1.5rem; }
}
@media (min-width: 1024px) {
  body.pc > div.fixed.inset-0.z-40 { display: none; }
}
@media (max-width: 640px) {
  :root { --pc-shell: min(1280px, 100% - 1.6rem); }
  body.pc { font-size: 15.5px; }
  .pc-hero { min-height: auto; padding: calc(var(--pc-hdr-h) + 3.4rem) 0 4rem; }
  .pc-hero__cue { display: none; }
  .pc-hero__fig { display: none; }
  .pc-btn { padding: .82rem 1.4rem; font-size: .9rem; }
  .pc-stats { grid-template-columns: repeat(2, 1fr); }
  .pc-gal { columns: 2 140px; column-gap: .7rem; }
  .pc-gal figure { margin-bottom: .7rem; }
  .pc-cta { border-radius: 20px; }
  .pc-spec th, .pc-spec td { padding: .7rem 1rem; }
  .pc-spec th { width: 40%; }
  .pc-fab { right: .9rem; bottom: .9rem; padding: .72rem 1.05rem; font-size: .82rem; }
}

/* ==========================================================================
   DEVICE PASS  (client: "fix the mobile view and other device sized",
   2026-09-05)

   Still inside the responsive tail and still ahead of the reduced-motion and
   print blocks — those two have to stay the very last thing in the file, or
   `html.js body.pc .r--r` below would out-order the reduced-motion reset at
   equal specificity and re-apply a transform for people who opted out.

   Measured with _import/respaudit.py at 320 / 390 / 768 / 1024px across all
   22 pages before and after.
   ========================================================================== */

/* 1. Horizontal overflow. The from-the-side reveals translated a flat 30px,
      which is wider than half the page gutter at every width below ~1400px
      (12.8px each side on a phone, 10px at 1024px), so index / about /
      services / contact / enquiry measured 11-17px wider than the viewport
      until each element had scrolled into view. Scaling the offset with the
      viewport keeps the same motion and can never exceed the gutter. */
:root { --pc-rev: clamp(6px, .8vw, 30px); }
html.js body.pc .r--l { transform: translateX(calc(var(--pc-rev) * -1)); }
html.js body.pc .r--r { transform: translateX(var(--pc-rev)); }

/* 2. Tablet gutters. Everything from 641px to 1023px was sharing the phone's
      14.4px margin, so a 768px or 1024px tablet ran text edge to edge. */
@media (min-width: 641px) and (max-width: 1023px) {
  :root { --pc-shell: min(1200px, 100% - clamp(2rem, 5.4vw, 3.6rem)); }
}

/* 3. The scroll cue is anchored to the bottom of the hero, but the hero drops
      to min-height:auto below 1024px, so it landed on top of the buttons.
      It only means anything on a tall viewport anyway. */
@media (max-width: 1023px) { .pc-hero__cue { display: none; } }

/* 4. The hero collage only appeared at 1080px, which left every tablet in
      landscape and the 1024px iPad with a half-empty hero. It carries fine
      from 960px on a slightly evener split. */
@media (min-width: 960px) {
  .pc-collage { display: block; }
  .pc-hero__in { grid-template-columns: 1.06fr .94fr; gap: 2.4rem; }
}
@media (min-width: 1080px) {
  .pc-hero__in { grid-template-columns: 1.14fr .86fr; gap: 3.2rem; }
}

/* 5. Footer: four columns at 900px, one below it — so a 768px tablet stacked
      the whole footer into the left third and left the right two-thirds
      blank. Two-up across the tablet range. */
@media (min-width: 560px) and (max-width: 899px) {
  .pc-ftr__top { grid-template-columns: 1fr 1fr; column-gap: 2.2rem; }
}

/* 6. The capability cards are an icon and a two-word title, so full-width
      rows wasted most of a phone screen — eight of them ran to 1,100px on
      the homepage alone. Two-up and tighter below 640px. */
@media (max-width: 639px) {
  .pc-grid--ico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .pc-grid--ico .pc-card { padding: 1rem .95rem 1.05rem; }
  .pc-grid--ico .pc-ico { width: 38px; height: 38px; border-radius: 11px; margin-bottom: .65rem; }
  .pc-grid--ico .pc-ico svg { width: 19px; height: 19px; }
  .pc-grid--ico .pc-card__n { margin-bottom: .4rem; }
  .pc-grid--ico .pc-h3 { font-size: .92rem; line-height: 1.32; }
}

/* 7. The menu button is white on a header that goes near-solid white on
      scroll, so on a phone the only navigation control faded to three bare
      lines as soon as the page moved. Tint it so it stays a button. */
body.pc .pc-hdr #menuBtn { background: #F3F6FD; border-color: #C7D2E8; }
body.pc .pc-hdr.is-stuck #menuBtn { background: #EDF2FB; border-color: #BFCCE6; }

@media (prefers-reduced-motion: reduce) {
  body.pc *, body.pc *::before, body.pc *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  html.js body.pc .r { opacity: 1; transform: none; }
  html.js .pc-rl > span { opacity: 1; transform: none; }
}

@media print {
  .pc-hdr, .pc-fab, .pc-loader, #mobileMenu, .pc-hero__cue { display: none !important; }
  body.pc { color: #000; }
}