/* Ponco public site — base styles.
   Replaces what the Sierra theme + Elementor used to provide. Section/column layout mirrors
   Elementor's container model: .sec = boxed container, .in = its inner (max-width) box,
   .con = nested full-width container, .w = a widget. Spacing is driven by custom props set
   inline where a page needs something other than the defaults. */

/* Brand palette. Each component block below re-exports what it needs as a local
   --accent / --blue / --soft etc; those are the names its rules read, so they stay
   and simply point here. That keeps a single block re-themable. */
:root{--c-blue:#146EF5;--c-coral:#FB6B5B;--c-ink:#141415;--c-ink-2:#1D1F20;
      --c-off:#FAFAFC;--c-soft:#C3C8D2;--c-mute:#8A909C;--c-ok:#7CC4A0;
      /* the one backdrop grid: pitch and line colour. Drawn once on the body of every
         dark page, so it is the same size everywhere and never breaks at a section edge. */
      --grid-pitch:54px;--grid-line:rgba(255,255,255,.05);
      /* Card and tile surfaces. The page backdrop is near-black, so a surface is a
         slightly lifted charcoal and the border draws its edge - a mid-grey slab only
         worked back when each section carried its own photograph behind it. --c-slab and
         --c-panel are the two tones that alternate; --c-slab-hi is the slab on hover. */
      --c-slab:rgba(30,36,48,.72);--c-slab-hi:rgba(38,45,60,.85);--c-panel:rgba(18,22,30,.75)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{--chrome-bg:var(--c-ink);margin:0;font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;font-size:16px;font-weight:400;line-height:1.6;color:rgba(30,30,36,.7);background:#fff;overflow-x:hidden;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
/* One backdrop for the whole dark site: two page-scale brand glows, a slow deepening
   toward the footer, then the grid. It lives on the body, so it is anchored to the
   document, scrolls with the page and runs unbroken from the header to the footer -
   sections paint on top of it and no longer carry backgrounds of their own. */
body.page-home,body.page-about,body.page-contact,body.page-404,body.page-resources,body.page-article{
  --chrome-bg:transparent;
  background-color:var(--c-ink);
  background-image:
    radial-gradient(900px 620px at 14% 0%, rgba(20,110,245,.16), transparent 62%),
    radial-gradient(950px 700px at 88% 100%, rgba(251,107,91,.10), transparent 64%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.22)),
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:100% 100%,100% 100%,100% 100%,
    var(--grid-pitch) var(--grid-pitch),var(--grid-pitch) var(--grid-pitch);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--c-ink-2);text-decoration:none;transition:all .25s ease}
a:hover{color:var(--c-blue)}
h1,h2,h3,h4,h5,h6{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;color:var(--c-ink-2);margin:0 0 calc(.3em + 10px);line-height:1.2;letter-spacing:-.027em}
h1{font-size:44px;line-height:1.18}
h2{font-size:46px}
h3{font-size:36px;line-height:1.25}
h4{font-size:24px}
p{margin:0 0 24px;line-height:1.8}
ul,ol{margin:0 0 24px;padding-inline-start:20px}
@media (max-width:1024px){h1{font-size:34px}h2{font-size:34px}h3{font-size:22px}h4{font-size:20px}}
@media (max-width:767px){h1{font-size:32px}h2{font-size:26px}h3{font-size:20px}h4{font-size:18px}}

/* --- layout primitives --- */
.sec{--px:10px;--pt:10px;--pb:10px;--gap:20px;--maxw:1240px;position:relative;display:flex;width:100%;padding-inline:var(--px)}
.sec>.in{position:relative;width:100%;max-width:min(100%,var(--maxw));margin:0 auto;display:flex;flex-direction:column;gap:var(--gap);padding-block:var(--pt) var(--pb)}
.sec-hero>.in{position:static}                     /* lets the hero backdrop widget stretch full-bleed */
.con{--p:10px;--pt:var(--p);--pb:var(--p);--pl:var(--p);--pr:var(--p);--mt:0px;--mb:0px;--gap:20px;--maxw:none;position:relative;display:flex;flex-direction:column;width:100%;max-width:var(--maxw);gap:var(--gap);padding:var(--pt) var(--pr) var(--pb) var(--pl);margin-top:var(--mt);margin-bottom:var(--mb)}
.w{position:relative;width:100%}
@media (max-width:1024px){.sec{--maxw:1024px}}
@media (max-width:767px){.sec{--maxw:767px}}

/* --- section backgrounds --- */
/* Dark sections carry no background of their own - the one body backdrop shows through.
   Light pages still need the ink band behind the header/footer, hence --chrome-bg. */
.sec-header,.sec-footer{background:var(--chrome-bg)}
@media (max-width:1024px){.sec-footer{--pt:10px;--pb:10px;--px:0}}
/* The single exception: hero-gradient.jpg on a ::before with mix-blend-mode:screen, so its
   black drops out and the grid keeps reading through the blue wave. Masked top and bottom
   so it fades into the page instead of starting on a hard line under the nav. */
.sec-hero::before,.sec-contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(/assets/img/hero-gradient.jpg) center/cover no-repeat;mix-blend-mode:screen;opacity:.45;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 62%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 62%,transparent 100%)}
.sec-contact::before{background-position:top center}
.sec-terms-head{background:var(--c-off)}
.sec-terms>.in{border-bottom:1px solid #E7E7E7}
/* one vertical rhythm for the homepage bands; the sections set 96px inline */
@media (max-width:1024px){
  .sec-approach,.sec-products,.sec-solutions,.sec-engine,.sec-faq{--pt:72px;--pb:72px}
  .sec-resources,.sec-article{--pt:64px;--pb:80px}
  .sec-about,.sec-contact{--pt:60px;--pb:120px}
  .con-contact-card{--pt:40px;--pb:10px;--pl:0;--pr:0}
  .con-contact-info{--pt:60px;--pb:60px}
}
@media (max-width:767px){
  .sec-approach,.sec-products,.sec-solutions,.sec-engine,.sec-faq{--pt:56px;--pb:56px}
  .sec-resources,.sec-article{--pt:48px;--pb:64px}
  .sec-about,.sec-contact{--pt:40px;--pb:60px}
  .con-contact-card{--pb:0}
  .con-contact-info{--pt:30px;--pb:30px}
  .con-explore-head{--p:0}
  .con-approach-head{--gap:20px}
  .con-solutions-head{--pt:10px;--pl:20px;--pr:20px}
}

/* --- section headings (ex ElementsKit heading widget) --- */
.sec-head{text-align:center}
.sec-head.left{text-align:left}
.sec-title{color:#fff;margin:0 0 18px}
.sec-head.glow .sec-title{color:var(--c-off);text-shadow:0 0 5px rgba(9,0,75,.94);margin-bottom:0}
.sec-desc{font-size:16px;line-height:1.8;color:var(--c-off);margin:0 0 10px;max-width:var(--desc-maxw,none)}
.sec-head.left .sec-desc{margin-inline:0}
.sec-head:not(.left) .sec-desc{margin-inline:auto}
.page-title .sec-title{font-size:50px;line-height:1.2}
.page-title .sec-desc{font-size:18px;color:rgba(250,250,250,.6)}
.sec-head.dark .sec-title{color:var(--c-ink-2);margin-bottom:12px}
.sec-head.dark .sec-desc{color:var(--c-ink-2);font-size:16px}
.sec-head.dark strong{font-weight:700}
@media (max-width:1024px){.page-title .sec-title{font-size:34px}.page-title .sec-desc{font-size:16px}}
@media (max-width:767px){.page-title .sec-title{font-size:28px}}

/* --- theme page-title banner (privacy) --- */
.sec-banner{background:var(--c-off);text-align:center}
.banner-title{font-size:50px;line-height:1.2;letter-spacing:-.027em;color:var(--c-ink-2);margin:0;max-width:850px;margin-inline:auto}
@media (max-width:1024px){.sec-banner{--pt:60px;--pb:60px}.banner-title{font-size:34px}}
@media (max-width:767px){.sec-banner{--pt:40px;--pb:40px}.banner-title{font-size:26px}}

/* --- breadcrumb (ex ElementsKit) --- */
.crumbs{display:flex;justify-content:center;align-items:center;list-style:none;margin:0;padding:0;font-size:16px;line-height:1.6;color:#fff;position:relative;z-index:1}
.crumbs li{padding-right:5px}
.crumbs a{color:#fff}
.crumbs a:hover{color:var(--c-blue)}
.crumbs .sep{color:rgba(255,255,255,.75);display:flex;align-items:center}
.crumbs.dark{color:var(--c-ink-2)}
.crumbs.dark a{color:var(--c-ink-2);opacity:.75}
.crumbs.dark a:hover{opacity:1;color:var(--c-ink-2)}
.crumbs.dark .sep{color:rgba(29,31,32,.6)}

/* --- terms page --- */
.sec>.in.terms-cols{flex-direction:row;align-items:flex-start;gap:20px}
.terms-nav{width:25%}
.terms-body{width:75%}
.terms-block{--pt:60px}
.terms-block.first{--pt:90px}
.terms-block .sec-title{font-size:36px;line-height:1.25;letter-spacing:-.027em;color:var(--c-ink-2);margin-bottom:12px}
.terms-block h2.sec-title{scroll-margin-top:120px}
.prose{color:#757575}
.prose p{color:#757575;font-size:16px;line-height:1.8;margin:0 0 24px}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:700}
.spacer{height:70px;border-top:1px solid #E7E7E7}
.toc{list-style:none;margin:0;padding:0;position:sticky;top:175px}
.toc li{margin:0 0 15px}
.toc a{color:var(--c-ink-2);font-weight:500;font-size:16px;transition:color .3s ease-out}
.toc a:hover{color:var(--c-blue)}
@media (max-width:1024px){
  .sec>.in.terms-cols{flex-direction:column}
  .terms-nav{display:none}
  .terms-body{width:100%;--pr:0}
  .terms-block{--pt:20px}
  .terms-block.first{--pt:40px}
  .terms-block .sec-title{font-size:22px}
  .spacer{height:30px}
}
@media (max-width:767px){.terms-block .sec-title{font-size:20px}}
@media (max-width:767px){
  .sec-terms-head{--pt:30px;--pb:30px}
  .sec-terms{--pb:40px;--px:10px}
  .terms-text{--gap:0}
}

/* ============================================================================
   Below: the per-block styles that were embedded in the Elementor HTML widgets, verbatim
   (URLs rewritten to /assets/). Each block is scoped to its own root class.
   ============================================================================ */
/* ---- header ---- */
.w:has(.ponco-hd){width:100%}
  .ponco-hd{--coral:var(--c-coral);--accent:var(--c-blue);width:100%;background:transparent;font-family:inherit;position:relative}
  .ponco-hd *{box-sizing:border-box}
  .ponco-hd .hd-inner{max-width:1200px;margin:0 auto;min-height:100px;padding:0;display:flex;align-items:center;justify-content:space-between;gap:24px}   /* 1200 = the hero DISPLAY width (the map/viewer is 1200, inset 20px inside the theme's 1240 box) so brand.left + nav.right sit hard on the hero's visible edges; the <=1248 query restores a gutter on smaller screens */
  .ponco-hd .hd-brand{display:flex;align-items:center;gap:15px;text-decoration:none;flex:none}
  .ponco-hd .hd-mark{height:64px;width:auto;display:block}
  .ponco-hd .hd-word{color:#fff;font-family:'Jost',sans-serif;font-size:42px;font-weight:750;letter-spacing:-.02em;line-height:1}   /* Jost (Futura-style), weight 750; nav links keep the theme font */

  .ponco-hd .hd-nav{display:flex;align-items:center;gap:30px}
  .ponco-hd .hd-nav a{color:var(--c-soft);font-size:16px;font-weight:600;text-decoration:none;transition:color .15s;white-space:nowrap}
  .ponco-hd .hd-nav a:hover{color:#fff}
  .ponco-hd .hd-nav a[aria-current]{color:#fff}

  /* hamburger */
  .ponco-hd .hd-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:48px;height:48px;background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:11px;cursor:pointer;flex:none;padding:0;transition:border-color .2s}
  .ponco-hd .hd-burger:hover{border-color:rgba(255,255,255,.4)}
  .ponco-hd .hd-burger span{display:block;height:2px;width:23px;margin:0 auto;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
  .ponco-hd .hd-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .ponco-hd .hd-burger.open span:nth-child(2){opacity:0}
  .ponco-hd .hd-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* sleek overlay menu */
  .ponco-hd .hd-menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:60;flex-direction:column;padding:10px 0 18px;
    background:linear-gradient(180deg, rgba(10,13,20,.99), rgba(6,8,14,.99));
    border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 24px 50px -12px rgba(0,0,0,.6);backdrop-filter:blur(10px)}
  .ponco-hd .hd-menu::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg, var(--coral), var(--accent))}   /* coral->blue accent line */
  .ponco-hd .hd-menu.open{display:flex}
  .ponco-hd .hd-menu a{display:flex;align-items:center;justify-content:space-between;
    color:#fff;font-size:20px;font-weight:700;letter-spacing:-.01em;text-decoration:none;padding:17px 26px;
    border-bottom:1px solid rgba(255,255,255,.05);transition:background .15s,padding-left .15s,color .15s}
  .ponco-hd .hd-menu a .chev{width:18px;height:18px;flex:none;color:var(--coral);opacity:.65;transition:transform .15s,opacity .15s}
  .ponco-hd .hd-menu a:active,.ponco-hd .hd-menu a:hover{background:rgba(20,110,245,.10);padding-left:32px}
  .ponco-hd .hd-menu a:active .chev,.ponco-hd .hd-menu a:hover .chev{opacity:1;transform:translateX(3px)}
  .ponco-hd .hd-menu a:last-child{border-bottom:0}
  .ponco-hd .hd-menu a[aria-current]{color:#fff}
  /* cascade-in on open */
  .ponco-hd .hd-menu.open a{animation:hdItemIn .42s cubic-bezier(.2,.7,.2,1) both}
  .ponco-hd .hd-menu.open a:nth-child(1){animation-delay:.04s}
  .ponco-hd .hd-menu.open a:nth-child(2){animation-delay:.09s}
  .ponco-hd .hd-menu.open a:nth-child(3){animation-delay:.14s}
  .ponco-hd .hd-menu.open a:nth-child(4){animation-delay:.19s}
  .ponco-hd .hd-menu.open a:nth-child(5){animation-delay:.25s}
  .ponco-hd .hd-menu.open a:nth-child(6){animation-delay:.30s}
  @keyframes hdItemIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){ .ponco-hd .hd-menu.open a{animation:none} }

  @media(max-width:1248px){ .ponco-hd .hd-inner{padding-left:24px;padding-right:24px} }
  @media(max-width:980px){
    .ponco-hd .hd-nav{display:none}
    .ponco-hd .hd-burger{display:flex}
  }
  @media(max-width:600px){
    .ponco-hd .hd-inner{min-height:78px;padding:0 20px}
    .ponco-hd .hd-brand{gap:12px}
    .ponco-hd .hd-mark{height:50px}
    .ponco-hd .hd-word{font-size:33px}
    .ponco-hd .hd-burger{width:44px;height:44px}
  }
  @media(max-width:360px){
    .ponco-hd .hd-mark{height:44px}
    .ponco-hd .hd-word{font-size:29px}
  }

/* ---- footer ---- */
.w:has(.ponco-ft){width:100%}   /* force the Elementor HTML-widget wrapper to fill its flex container (else it shrink-wraps) */
  .ponco-ft{width:100%;background:transparent;padding:46px 0;color:var(--c-soft);font-family:inherit}   /* flush to 1200 on desktop = aligns with the page content edges */
  .ponco-ft *{box-sizing:border-box}
  .ponco-ft .ft-main{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:34px 56px;max-width:1200px;margin:0 auto}
  .ponco-ft .ft-brand{display:flex;align-items:center;gap:18px;flex:0 1 auto}   /* centre the logo against the text block so it sits IN the band, not protruding above */
  .ponco-ft .ft-mark{flex:none;display:block;height:74px;width:auto}   /* the real brand mark image */
  .ponco-ft .ft-co{color:#fff;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin-bottom:9px}
  .ponco-ft .ft-copy{color:#9aa1ad;font-size:14px;line-height:1.55;margin-bottom:8px}   /* match the About us / email style */
  .ponco-ft .ft-legal a{color:#9aa1ad;font-size:14px;line-height:1.55;text-decoration:none;margin-right:20px;white-space:nowrap}
  .ponco-ft .ft-legal a:hover{color:#fff}
  .ponco-ft .ft-cols{display:flex;gap:64px;flex:0 1 auto}                 /* Company + Get in touch grouped close together */
  .ponco-ft .ft-col h4{color:#fff;font-size:16px;font-weight:700;line-height:1.2;margin:0 0 9px}
  .ponco-ft .ft-col a,.ponco-ft .ft-col .ft-line{display:block;color:#9aa1ad;text-decoration:none;font-size:14px;line-height:1.55;margin-bottom:9px}
  .ponco-ft .ft-col a:hover{color:#fff}
  .ponco-ft .ft-li{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:var(--c-soft);margin-top:4px;transition:background .15s,border-color .15s,color .15s}
  .ponco-ft .ft-li:hover{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
  .ponco-ft .ft-li svg{width:19px;height:19px;fill:currentColor}
  @media(max-width:1248px){ .ponco-ft{padding-left:24px;padding-right:24px} }   /* gutter restored below the 1200 boxed width */
  @media(max-width:760px){
    .ponco-ft{padding:40px 24px}
    .ponco-ft .ft-main{gap:30px}
    .ponco-ft .ft-brand{flex:1 1 100%}
    .ponco-ft .ft-cols{flex:1 1 100%;gap:0;justify-content:space-between}
    .ponco-ft .ft-col{flex:1 1 0;min-width:0}
  }
  @media(max-width:600px){ .ponco-ft .ft-mark{height:62px} }
  .ft-li {
  display: inline-flex;      /* shrink the anchor to the icon, kill baseline gap */
  align-items: center;
  padding: 0;                /* remove any inherited link padding */
}

.ft-li svg {
  display: block;            /* removes the inline baseline whitespace */
  width: 20px;               /* SVGs with only a viewBox default to 300×150 or icon-font sizing */
  height: 20px;
  fill: currentColor;        /* inherits the link colour so it matches the other links */
}

/* ---- hero-backdrop ---- */
/* Hero decoration only: the drifting node/edge network and its glows. The grid this block
   used to carry now lives on the body (see the backdrop rule near the top), which is why
   .pab-field is transparent and the vignette is only a soft edge. */
.w:has(.pab-field){position:absolute;inset:0;z-index:0;pointer-events:none}
  .pab-field{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .pab-sky{position:absolute;left:0;right:0;top:-30%;height:160%;will-change:transform}
  .pab-field::after{content:"";position:absolute;inset:0;z-index:2;
    background:radial-gradient(130% 110% at 50% 35%, transparent 55%, rgba(2,3,6,.45) 100%);}
  .pab-net{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
  .pab-net .edge{stroke:rgba(160,180,210,.16);stroke-width:1;fill:none}
  .pab-net .edge.lit{stroke:rgba(20,110,245,.30)}
  .pab-net .node{fill:rgba(150,170,200,.35)}
  .pab-net .node.blue{fill:rgba(20,110,245,.55)}
  .pab-net .node.coral{fill:var(--c-coral);transform-box:fill-box;transform-origin:center}
  .pab-net .halo{fill:none;stroke:rgba(251,107,91,.4);stroke-width:1.5;transform-box:fill-box;transform-origin:center}
  @media (prefers-reduced-motion:no-preference){
    .pab-net .driftA{animation:pabDrift 38s ease-in-out infinite alternate;transform-origin:center}
    .pab-net .driftB{animation:pabDrift2 46s ease-in-out infinite alternate;transform-origin:center}
    .pab-net .node.coral.pulse{animation:pabPulse 5.5s ease-in-out infinite}
    .pab-net .halo.pulse{animation:pabHalo 5.5s ease-in-out infinite}
  }
  @keyframes pabDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-18px,12px,0)}}
  @keyframes pabDrift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(16px,-14px,0)}}
  @keyframes pabPulse{0%,100%{transform:scale(.72);opacity:.5}50%{transform:scale(1.1);opacity:1}}
  @keyframes pabHalo{0%,100%{transform:scale(.85);opacity:.2}50%{transform:scale(1.25);opacity:.7}}

/* ---- hero ---- */
.ponco-hero-embed{
    --accent:var(--c-blue);--ink:#fff;--ink-soft:var(--c-soft);--ink-mute:var(--c-mute);
    font-family:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif;line-height:1.5;text-align:center;color:var(--ink-soft);
    background:transparent;padding:0 0 8px;
  }
  .ponco-hero-embed *{box-sizing:border-box}
  .ponco-hero-embed .ph-h{color:var(--ink);font-size:clamp(26px,4vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.18;margin:0 0 12px;padding:0 24px}
  .ponco-hero-embed .ph-sub{color:#aeb6c4;font-size:clamp(14px,1.6vw,18px);font-weight:400;line-height:1.5;margin:0 auto 14px;padding:0 16px;max-width:none;white-space:nowrap}
  @media (max-width:900px){ .ponco-hero-embed .ph-sub{white-space:normal} }
  .ponco-hero-embed .ph-slot{position:relative;display:inline-block;text-align:left;vertical-align:baseline}
  .ponco-hero-embed .ph-sizer{visibility:hidden}
  .ponco-hero-embed .ph-stage{position:absolute;left:0;top:0;right:0;bottom:-10px;overflow:hidden}
  .ponco-hero-embed .ph-word{position:absolute;left:0;right:0;top:0;color:#fff;transform:translateX(-100%)}
  .ponco-hero-embed .ph-inner{position:relative;display:inline-block;white-space:nowrap}
  .ponco-hero-embed .ph-txt{display:inline-block}
  .ponco-hero-embed .ph-bar{position:absolute;left:0;right:0;bottom:-7px;height:3px;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left center}
  @keyframes phBarLoad{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes phBarUnload{from{transform:scaleX(1)}to{transform:scaleX(0)}}
  .ponco-hero-embed .ph-viewport{position:relative;width:100%;max-width:1200px;margin:0 auto;aspect-ratio:16/9;border-radius:10px;overflow:hidden;outline:1px solid rgba(255,255,255,.15);box-shadow:0 10px 50px rgba(64,72,82,.12)}
  @media (max-width:600px){ .ponco-hero-embed .ph-viewport{aspect-ratio:1/1} }   /* phones: square crop - MUST stay AFTER the base rule above to win the cascade at <=600 */
  @media (prefers-reduced-motion: no-preference){
    .ponco-hero-embed.gallery-anim .ph-viewport{opacity:0}
    .ponco-hero-embed .ph-viewport.in{animation:phViewFadeUp .75s ease both}
  }
  @keyframes phViewFadeUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
  .ponco-hero-embed .ph-panel{position:absolute;inset:0;transform:translateX(-100%)}
  .ponco-hero-embed .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
  .ponco-hero-embed .ph-img.a{opacity:1}
  .ponco-hero-embed .ph-panel.showB .ph-img.a{opacity:0}
  .ponco-hero-embed .ph-panel.showB .ph-img.b{opacity:1}
  .ponco-hero-embed .ph-panel[data-cat="2"] .ph-img.b{transform:scale(1.55);transform-origin:45% 48%;transition:opacity .7s ease, transform 1s cubic-bezier(.4,0,.2,1)}
  .ponco-hero-embed .ph-panel[data-cat="2"].showB .ph-img.b{transform:scale(1)}

/* ---- explore-cards ---- */
#products,#solutions,#engine{scroll-margin-top:110px}   /* anchor offset - tune to header height; these IDs are set on the .w wrappers in src/pages/index.html */
  html{scroll-behavior:smooth}
  .ponco-explore{--accent:var(--c-blue);--ink:#fff;--mute:var(--c-mute);--line:rgba(255,255,255,.22);
    font-family:inherit;display:flex;gap:24px;width:100%;flex-wrap:wrap}
  .ponco-explore *{box-sizing:border-box}
  .ponco-explore .pe-card{flex:1 1 280px;min-width:260px;text-decoration:none;display:block;
    padding:24px 22px;border:1px solid var(--line);border-radius:14px;background:rgba(18,22,30,.75);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
  .ponco-explore .pe-card:hover{transform:translateY(-4px);border-color:rgba(20,110,245,.55);box-shadow:0 14px 36px rgba(0,0,0,.40)}
  .ponco-explore .pe-head{display:flex;align-items:center;gap:11px;margin-bottom:9px}
  .ponco-explore .pe-ic{flex:none;width:30px;height:30px;color:var(--accent)}
  .ponco-explore .pe-ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ponco-explore .pe-title{color:var(--ink);font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
  .ponco-explore .pe-desc{color:var(--c-off);font-size:15px;line-height:1.55;margin:0}
  @media(max-width:900px){ .ponco-explore .pe-card{flex:1 1 100%} }
  @media(max-width:760px){ .ponco-explore{gap:16px} }

/* ---- approach-steps ---- */
.ponco-steps{font-family:inherit;display:flex;align-items:flex-start;justify-content:center;gap:12px;width:100%;margin:0 auto}
  .ponco-steps *{box-sizing:border-box}
  .ponco-steps .step{flex:none;width:160px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .ponco-steps .step-t{color:var(--c-off);font-size:32px;font-weight:800;letter-spacing:-.01em;line-height:1;margin-bottom:8px;text-shadow:0 1px 8px rgba(9,0,75,.94)}
  .ponco-steps .step-ic{width:90px;height:auto;display:block;margin-bottom:8px}
  .ponco-steps .step-ic.is-bullseye{width:96px;margin-top:-3px;margin-bottom:5px}
  .ponco-steps .step-d{color:var(--c-off);font-size:15px;line-height:1.5;max-width:100%;text-shadow:0 1px 7px rgba(9,0,75,.94)}
  .ponco-steps .step-arrow{flex:none;align-self:flex-start;margin-top:55px;width:60px;height:auto;display:block}
  @media(max-width:760px){
    .ponco-steps{flex-direction:column;align-items:center;gap:6px;max-width:380px}
    .ponco-steps .step{width:100%}
    .ponco-steps .step-arrow{align-self:center;width:46px;margin:4px 0 12px;transform:rotate(90deg)}
  }

/* ---- products-showcase ---- */
.ponco-px{--accent:var(--c-blue);--ink:#fff;--ink-soft:#D6DAE2;--ink-mute:var(--c-mute);
  --card:rgba(20,24,32,.38);          /* glass card fill - raise for more opaque, lower for more see-through */
  --head:var(--c-slab);
  --line:rgba(255,255,255,.14);width:100%;font-family:inherit;line-height:1.5}
.ponco-px *{box-sizing:border-box}
.ponco-px .px-tabs{display:flex;justify-content:center;gap:5px;margin:0;flex-wrap:wrap;position:relative;z-index:4}   /* centered on the viewer (matches the Products heading); no full-width line */
.ponco-px .px-tab{appearance:none;border:1px solid rgba(255,255,255,.22);cursor:pointer;font-family:inherit;font-size:16px;font-weight:600;padding:12px 26px;color:var(--ink-mute);background:rgba(18,22,30,.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:12px 12px 0 0;margin-bottom:-1px;transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent}   /* OUT of focus */
@media(hover:hover){ .ponco-px .px-tab:hover{color:var(--ink-soft);background:rgba(18,22,30,.5)} }   /* hover only on real pointer devices - no sticky touch-hover on mobile */
.ponco-px .px-tab.is-on{color:var(--ink);font-weight:800;letter-spacing:-.01em;background:var(--c-slab);border-bottom-color:transparent}   /* IN focus: the lifted slab, matching the card it sits on. Inactive tab unchanged. */
.ponco-px .px-tab-sm{display:none}   /* short label - swapped in only on phones (<=560) */
.ponco-px .px-panel{display:none}
.ponco-px .px-panel.is-on{display:block}
.ponco-px .px-stage{position:relative}
.ponco-px .px-media-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.22)}
.ponco-px .px-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease;pointer-events:none}
.ponco-px .px-media.is-active{opacity:1}
.ponco-px .px-media-wrap::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 100% 0%, rgba(0,0,0,.58), transparent 62%);pointer-events:none;z-index:1}   /* top-right scrim anchors the glass cards */
.ponco-px .px-play{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.ponco-px .px-media-wrap.is-video .px-play{display:none}   /* play affordance lives on the thumb strip only */
.ponco-px .px-play i{width:72px;height:72px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.ponco-px .px-play i::after{content:"";border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff;margin-left:5px}
.ponco-px .px-overlay{position:absolute;top:0;right:0;z-index:3;padding:clamp(16px,2.4vw,30px);width:min(510px,74%);display:flex;flex-direction:column;align-items:flex-end;gap:12px}   /* TOP-RIGHT: wide/flat main card, callouts beneath, synced width */
.ponco-px .px-glass{background:var(--card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.30)}
.ponco-px .px-head{width:100%;padding:20px 22px;background:var(--head)}
.ponco-px .px-h{color:#fff;font-size:clamp(20px,2.2vw,28px);font-weight:800;line-height:1.16;letter-spacing:-.01em;margin:0 0 9px}
.ponco-px .px-blurb{color:var(--ink-soft);font-size:13.5px;line-height:1.5;margin:0}
.ponco-px .px-callouts{display:flex;flex-direction:column;gap:8px;width:285px;align-items:stretch}   /* fixed width = synced across STO/Rail */
.ponco-px .px-callout{display:flex;align-items:center;gap:11px;padding:11px 15px}
.ponco-px .px-callout:nth-child(odd){background:var(--c-panel);border-color:rgba(255,255,255,.22)}    /* the recessed tone */
.ponco-px .px-callout:nth-child(even){background:var(--c-slab);border-color:rgba(255,255,255,.22)}   /* the lifted tone */
.ponco-px .px-ic{flex:none;width:20px;height:20px;color:var(--accent);display:flex}
.ponco-px .px-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ponco-px .px-callout span:last-child{color:#fff;font-size:14px;font-weight:600;white-space:nowrap}
.ponco-px .px-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}   /* single-row carousel; scrolls when it can't fit (mobile) */
.ponco-px .px-thumbs::-webkit-scrollbar{display:none}
.ponco-px .px-thumb{position:relative;flex:1 1 0;min-width:90px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:8px;overflow:hidden;cursor:pointer;background:none;line-height:0;scroll-snap-align:start}   /* desktop: stretch full width; mobile: carousel items */
.ponco-px .px-thumb img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;opacity:.6;display:block;transition:opacity .2s}
.ponco-px .px-thumb:hover img{opacity:.85}
.ponco-px .px-thumb.is-on{border-color:var(--accent)}
.ponco-px .px-thumb.is-on img{opacity:1}
.ponco-px .px-tp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:rgba(20,110,245,.5);display:flex;align-items:center;justify-content:center}
.ponco-px .px-tp::after{content:"";border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff;margin-left:2px}
@media(max-width:820px){
  /* stacked reorder: tabs -> card stack -> thumbnails -> gallery (media at the bottom) */
  .ponco-px .px-panel.is-on{display:flex;flex-direction:column}
  .ponco-px .px-stage{display:contents}                                    /* dissolve so media-wrap + overlay join the panel's flex alongside thumbs */
  .ponco-px .px-overlay{position:static;order:1;width:100%;padding:0;align-items:stretch}   /* 1) card stack on top */
  .ponco-px .px-media-wrap{order:2;margin-top:14px}                        /* 2) main viewer */
  .ponco-px .px-thumbs{order:3;margin-top:14px}                            /* 3) carousel below the viewer */
  .ponco-px .px-tab{font-size:14px;padding:12px 14px;backdrop-filter:none;-webkit-backdrop-filter:none}   /* kill the blur: on the stacked layout the tab overlaps the card head, and blur-sampling that non-uniform backdrop was causing the two-tone / "2nd wrap" on the active tab */
  .ponco-px .px-tab.is-on{background:var(--head);border-bottom-color:transparent}   /* active tab merges into the card head */
  .ponco-px .px-callouts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;min-width:0}   /* 2x2 instead of 1x4 */
  .ponco-px .px-callout{min-width:0}                                       /* let grid items shrink */
  .ponco-px .px-callout:nth-child(odd),.ponco-px .px-callout:nth-child(even){background:var(--c-panel)}   /* uniform - no alternation in the 2x2 */
  .ponco-px .px-callout span:last-child{white-space:normal;overflow-wrap:break-word}
  .ponco-px .px-head{margin-top:0;border-radius:0 0 14px 14px}   /* SQUARE top so the tab row sits flush on the card (rounded bottom only) */
}
@media(max-width:560px){   /* keep the tabs as a real 2-up ROW (short labels) - the desktop tab look, sized for phones */
  .ponco-px .px-tab{flex:1 1 0;min-width:0;font-size:13px;padding:11px 6px;text-align:center}   /* two equal tabs side by side; active merges into the card head (var(--head) from the 820 rule) */
  .ponco-px .px-tab-lg{display:none}     /* swap the long labels out... */
  .ponco-px .px-tab-sm{display:inline}   /* ...for "PS2 Shutdowns" / "Ponco Rail" */
  .ponco-px .px-callouts{grid-template-columns:1fr}   /* narrow phones: single-column list (2x2 cramps the labels) */
  .ponco-px .px-callout:nth-child(even){background:var(--c-slab)}   /* restore the two-tone alternation in the 1-col list */
}
@media(max-width:600px){ .ponco-px .px-media-wrap{aspect-ratio:1/1} }   /* phones: square crop of the viewer (object-fit:cover centre-crops + scales up) */

/* ---- solutions-cards ---- */
.ponco-cards{--accent:var(--c-blue);--ink:#fff;--line:rgba(255,255,255,.22);
    font-family:inherit;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%}
  .ponco-cards *{box-sizing:border-box}
  .ponco-cards .pc-card{display:block;padding:24px 22px;border:1px solid var(--line);border-radius:14px;
    background:var(--c-slab);transition:border-color .2s ease,background .2s ease}   /* hover HIGHLIGHT only - no lift */
  .ponco-cards .pc-card:hover{border-color:rgba(20,110,245,.70);background:var(--c-slab-hi)}
  .ponco-cards .pc-head{display:flex;align-items:center;gap:11px;margin-bottom:9px}
  .ponco-cards .pc-ic{flex:none;width:30px;height:30px;color:var(--accent)}
  .ponco-cards .pc-ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ponco-cards .pc-title{color:var(--ink);font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
  .ponco-cards .pc-desc{color:var(--c-off);font-size:15px;line-height:1.55;margin:0}
  /* exact Elementor "Fade In Up" + "Fast" - only when motion is allowed; cards stay visible otherwise */
  @media (prefers-reduced-motion: no-preference){
    .ponco-cards.js-anim .pc-card{opacity:0}
    .ponco-cards .pc-card.pc-in{animation:pcFadeInUp .75s ease both}
  }
  @keyframes pcFadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
  @media(max-width:880px){ .ponco-cards{grid-template-columns:1fr 1fr;gap:18px} }
  @media(max-width:560px){ .ponco-cards{grid-template-columns:1fr} }

/* ---- engine ---- */
.ponco-engine{--blue:var(--c-blue);--ink:#fff;--soft:var(--c-off);--line:rgba(255,255,255,.22);
    font-family:inherit;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;width:100%;max-width:800px;margin:0 auto}
  .ponco-engine *{box-sizing:border-box}
  .ponco-engine .eng-tile{border:1px solid var(--line);border-radius:14px;background:var(--c-slab);
    padding:28px 26px;transition:border-color .2s ease,background .2s ease}
  .ponco-engine .eng-tile:hover{border-color:rgba(20,110,245,.55);background:var(--c-slab-hi)}
  .ponco-engine .eng-thead{display:flex;align-items:center;gap:12px;margin-bottom:11px}
  .ponco-engine .eng-ic{flex:none;width:30px;height:30px;color:var(--blue)}
  .ponco-engine .eng-ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ponco-engine .eng-tt{color:var(--ink);font-size:21px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
  .ponco-engine .eng-td{color:var(--soft);font-size:15px;line-height:1.6;margin:0}
  .ponco-engine .eng-logo-cell{display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0}
  @media (prefers-reduced-motion: no-preference){
    .ponco-engine.js-anim > .eng-tile{opacity:0}
    .ponco-engine > .eng-tile.eng-show{animation:engFadeInUp .75s ease both}
  }
  @keyframes engFadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
  @media(max-width:760px){ .ponco-engine{grid-template-columns:1fr;max-width:420px} }

  .ponco-engine .ponco-logo-anim{width:100%;max-width:150px;margin:0 auto;line-height:0}
  .ponco-engine .ponco-logo-anim svg{width:100%;height:auto;overflow:visible;display:block}
  .ponco-engine .ponco-logo-anim .la-e{stroke:var(--c-coral);stroke-width:13;stroke-linecap:round;fill:none}
  .ponco-engine .ponco-logo-anim .la-x{stroke:var(--c-coral);stroke-width:9;stroke-linecap:round;fill:none;opacity:0}
  .ponco-engine .ponco-logo-anim .la-n{fill:var(--c-coral)}
  .ponco-engine .ponco-logo-anim .la-term{transform-box:view-box;transform-origin:445px 250px}
  .ponco-engine .ponco-logo-anim .la-light{opacity:0;transform-box:view-box;transform-origin:445px 250px}
  @media (prefers-reduced-motion: no-preference){
    .ponco-engine .ponco-logo-anim.loop .la-e{stroke-dasharray:1;stroke-dashoffset:1;opacity:.16;transition:stroke-dashoffset 1.4s ease,opacity 1.4s ease}
    .ponco-engine .ponco-logo-anim.loop .la-n{opacity:.20;transition:opacity 1.4s ease}
    .ponco-engine .ponco-logo-anim.loop .la-x{opacity:.34;transition:opacity 1s ease}
    .ponco-engine .ponco-logo-anim.loop.solved .la-e{stroke-dashoffset:0;opacity:1}
    .ponco-engine .ponco-logo-anim.loop.solved .la-n{opacity:1}
    .ponco-engine .ponco-logo-anim.loop.solved .la-x{opacity:0}
    .ponco-engine .ponco-logo-anim.do-pulse .la-term{animation:laPulse .5s ease-out}
    .ponco-engine .ponco-logo-anim.do-pulse .la-light{animation:laOrbit .3s ease-in-out .1s}
  }
  @keyframes laPulse{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}
  @keyframes laOrbit{0%{opacity:0;transform:rotate(-95deg)}40%{opacity:1}60%{opacity:1}100%{opacity:0;transform:rotate(95deg)}}

/* ---- faq-cta ---- */
.ponco-faq{--blue:var(--c-blue);font-family:inherit;width:100%;max-width:1180px;margin:0 auto}
  .ponco-faq *{box-sizing:border-box}
  .ponco-faq .faq-list{display:flex;flex-direction:column;gap:12px}
  .ponco-faq .faq-item{border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.05);overflow:hidden;transition:border-color .2s ease,background .2s ease}
  .ponco-faq .faq-item:nth-child(odd){background:var(--c-slab)}       /* B - the lifted tone */
  .ponco-faq .faq-item:nth-child(even){background:var(--c-panel)}     /* C - the recessed tone */
  .ponco-faq .faq-item.open{border-color:rgba(20,110,245,.45)}
  /* per-item fade-in-up on scroll-into-view (items + CTA card) - identical to the Solutions/Explore/Engine cards (Elementor "Fade In Up" + "Fast") */
  @media (prefers-reduced-motion: no-preference){
    .ponco-faq.js-anim .faq-item,.ponco-faq.js-anim .faq-cta{opacity:0}
    .ponco-faq .faq-item.faq-in,.ponco-faq .faq-cta.faq-in{animation:faqFadeInUp .75s ease both}
  }
  @keyframes faqFadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
  .ponco-faq .faq-q{display:flex;width:100%;align-items:center;gap:14px;padding:19px 24px;cursor:pointer;color:#fff;font-size:16.5px;font-weight:600;line-height:1.3;
    text-align:left;background:none;border:0;font-family:inherit;touch-action:manipulation;-webkit-appearance:none}   /* real <button>: taps reliably on mobile + keyboard-accessible */
  .ponco-faq .faq-q:focus-visible{outline:2px solid rgba(20,110,245,.7);outline-offset:-2px}
  .ponco-faq .faq-ic{flex:none;width:22px;height:22px;color:var(--c-blue)}
  .ponco-faq .faq-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .ponco-faq .faq-qt{flex:1}
  .ponco-faq .faq-chev{flex:none;width:18px;height:18px;color:var(--c-mute);transition:transform .25s ease,color .2s ease}
  .ponco-faq .faq-chev svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ponco-faq .faq-item.open .faq-chev{transform:rotate(180deg);color:var(--c-blue)}
  .ponco-faq .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .ponco-faq .faq-item.open .faq-a{max-height:320px}
  .ponco-faq .faq-a-in{padding:0 24px 20px 60px;color:var(--c-soft);font-size:15px;line-height:1.62}
  .ponco-faq .faq-cta{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
    border:1px solid rgba(255,255,255,.22);border-radius:16px;overflow:hidden;margin-top:30px;
    background:radial-gradient(700px 340px at 26% -30%,rgba(20,110,245,.20),transparent 64%),var(--c-slab);padding:30px 24px}
  .ponco-faq .cta-left{display:flex;align-items:center;gap:14px}
  .ponco-faq .cta-ic{flex:none;width:22px;height:22px;color:var(--c-blue)}
  .ponco-faq .cta-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .ponco-faq .cta-h{color:#fff;font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.2;margin:0}
  .ponco-faq .btn-primary{flex:none;display:inline-block;background:var(--c-blue);color:#fff;font-weight:600;font-size:16px;padding:13px 28px;border-radius:9px;text-decoration:none;transition:filter .15s ease}
  .ponco-faq .btn-primary:hover{filter:brightness(1.08)}
  /* MOBILE: keep the CTA as a ROW - text LHS, button RHS. Type dialled down (16px / 700) and the
     button + gaps tightened so the heading lands on 2 lines instead of spilling to a 3rd. */
  @media(max-width:600px){
    .ponco-faq .faq-cta{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:10px;padding:20px 15px}
    .ponco-faq .cta-left{flex:1 1 auto;min-width:0;gap:8px}      /* text column shrinks + wraps */
    .ponco-faq .cta-ic{width:17px;height:17px}
    .ponco-faq .cta-ic svg{width:17px;height:17px}
    .ponco-faq .cta-h{font-size:16px;font-weight:700;line-height:1.28}
    .ponco-faq .btn-primary{flex:none;padding:10px 15px;font-size:13.5px;border-radius:8px}   /* never shrinks, stays hard RHS */
  }

/* ---- about-founders ---- */
.paf{--white:#fff;--soft:var(--c-soft);--muted:var(--c-mute);--accent:var(--c-blue);
    font-family:inherit;width:100%;max-width:900px;margin:0 auto;line-height:1.5}
  .paf *{box-sizing:border-box}
  .paf .paf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .paf .paf-card{background:var(--c-panel);border:1px solid rgba(255,255,255,.22);border-radius:14px;
    overflow:hidden;display:flex;flex-direction:column;
    transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
  .paf .paf-card:hover{border-color:rgba(20,110,245,.55);transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,.40)}
  .paf .paf-photo{width:100%;aspect-ratio:1/1;display:block;overflow:hidden;position:relative;background:var(--c-panel)}
  .paf .paf-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
  .paf .paf-card:hover .paf-photo img{transform:scale(1.03)}
  .paf .paf-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;
    background:linear-gradient(to top, rgba(18,22,30,.85), transparent);pointer-events:none}
  .paf .paf-body{padding:24px 22px 26px}
  .paf .paf-cf{color:var(--muted);font-size:12.5px;font-weight:600;margin-bottom:8px}
  .paf .paf-name{color:var(--white);font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
  .paf .paf-role{color:var(--accent);font-size:14px;font-weight:600;margin-top:5px}
  .paf .paf-bio{color:var(--soft);font-size:15px;line-height:1.55;margin-top:14px}
  @media(max-width:680px){ .paf .paf-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto} }

/* ---- about-industries ---- */
.pad{--white:#fff;--offwhite:var(--c-off);--soft:var(--c-soft);--accent:var(--c-blue);font-family:inherit;width:100%;max-width:900px;margin:0 auto;line-height:1.5}
  .pad *{box-sizing:border-box}
  .pad .pad-head{text-align:center;max-width:620px;margin:0 auto 28px}
  .pad .pad-head h3{color:var(--white);font-weight:800;letter-spacing:-.01em;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.15}
  .pad .pad-sub{color:var(--soft);font-size:15px;line-height:1.5;margin-top:12px}
  .pad .pad-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:64px}
  .pad .pad-tile{background:var(--c-slab);border:1px solid rgba(255,255,255,.22);border-radius:14px;
    padding:18px 18px;display:flex;align-items:center;gap:13px;
    transition:background .2s ease,border-color .2s ease}
  .pad .pad-tile:hover{background:var(--c-slab-hi);border-color:rgba(20,110,245,.55)}   /* static highlight only - no lift */
  .pad .pad-ico{flex:0 0 auto;width:28px;height:28px;color:var(--accent);display:flex;align-items:center;justify-content:center}
  .pad .pad-ico svg{width:28px;height:28px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .pad .pad-tile h4{color:var(--white);font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1;margin:0}   /* centred against the icon */
  .pad .pad-cta{background:var(--c-panel);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:34px 30px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;transition:border-color .25s ease,box-shadow .25s ease}
  .pad .pad-cta:hover{border-color:rgba(20,110,245,.55);box-shadow:0 14px 36px rgba(0,0,0,.40)}
  .pad .pad-cta-lead{display:flex;align-items:center;gap:20px}
  .pad .pad-logo{flex:0 0 auto;width:52px;height:52px;display:block}
  .pad .pad-cta-txt h3{color:var(--white);font-size:clamp(1.2rem,2.1vw,1.5rem);font-weight:800;letter-spacing:-.01em;line-height:1.18}
  .pad .pad-cta-txt p{color:var(--soft);font-size:14.5px;margin-top:6px}
  .pad .pad-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;font-size:15px;font-weight:700;text-decoration:none;padding:13px 24px;border-radius:999px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap}
  .pad .pad-btn:hover{background:#0f5fd6;transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,110,245,.32)}
  .pad .pad-btn svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  @media(max-width:680px){ .pad .pad-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .pad .pad-cta{flex-direction:column;align-items:flex-start} }
  @media(max-width:440px){ .pad .pad-grid{grid-template-columns:1fr} }

/* ---- contact-card ---- */
.pco{--white:#fff;--soft:var(--c-soft);--muted:var(--c-mute);--accent:var(--c-blue);--coral:var(--c-coral);
    font-family:inherit;line-height:1.5;width:100%;max-width:1200px;margin-left:auto;margin-right:auto}
  .pco *{box-sizing:border-box}
  .pco-grid-l{display:grid;grid-template-columns:1fr 1.05fr;gap:0;align-items:stretch;
    background:rgba(14,18,26,.72);border:1px solid rgba(255,255,255,.22);border-radius:20px;overflow:hidden;backdrop-filter:blur(10px)}

  /* left: form */
  .pco-form-col{padding:46px 44px}
  .pco-h{color:var(--white);font-weight:800;letter-spacing:-.02em;font-size:clamp(2rem,3.6vw,2.7rem);line-height:1.05;margin:0}
  .pco-lead{color:var(--soft);font-size:15.5px;margin:16px 0 28px}
  .pco-lead a{color:var(--white);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(20,110,245,.5)}
  .pco-field{margin-bottom:14px}
  .pco .pco-field input,.pco .pco-field textarea{width:100%;background:rgba(255,255,255,.1) !important;border:1.5px solid rgba(255,255,255,.42) !important;border-radius:10px !important;color:#fff !important;font:inherit;font-size:15px;padding:13px 15px;outline:none;transition:border-color .2s,background .2s}
  .pco .pco-field input::placeholder,.pco .pco-field textarea::placeholder{color:#b0b8c5 !important;opacity:1 !important}
  .pco .pco-field input:focus,.pco .pco-field textarea:focus{border-color:rgba(20,110,245,.6) !important;background:rgba(255,255,255,.13) !important}
  .pco-field textarea{min-height:120px;resize:none;overflow:hidden}   /* auto-grows via JS; min-height is the floor */
  .pco-btn{width:100%;margin-top:6px;background:var(--accent);color:#fff;font-size:15px;font-weight:700;border:0;border-radius:10px;padding:15px 24px;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
  .pco-btn:hover{background:#0f5fd6;transform:translateY(-1px);box-shadow:0 12px 28px rgba(20,110,245,.3)}
  .pco-note{color:var(--muted);font-size:12.5px;margin-top:12px;min-height:1em}
  .pco-count{display:none;color:var(--coral);font-size:12px;text-align:right;margin:-4px 0 8px}   /* only shown by JS within 100 chars of the cap */

  /* right: data video loop + quote */
  .pco-visual{position:relative;min-height:560px;overflow:hidden;background:#06080E}
  .pco-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .pco-video.b{z-index:0}
  .pco-video.a{z-index:1;opacity:0;transition:opacity .8s ease}   /* JS crossfades resload (A) in/out over rail (B); each clip is reset to frame 0 when it becomes visible -> clean, no loop seam, no near-end frame */
  .pco-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(to top, rgba(4,6,11,.94) 0%, rgba(4,6,11,.5) 32%, transparent 58%)}
  .pco-quote{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 36px 32px}
  .pco-quote p{color:var(--white);font-size:clamp(1.05rem,1.7vw,1.4rem);font-weight:700;line-height:1.3;letter-spacing:-.01em;margin:0}
  .pco-quote .by{display:block;margin-top:16px;color:var(--white);font-size:14.5px;font-weight:700}
  .pco-quote .by span{display:block;color:var(--soft);font-size:13px;font-weight:500;margin-top:2px}

  /* MOBILE ONLY (<=600, matches hero + products square breakpoint). 601-1024px keeps the desktop
     2-col grid -> tablet looks like the webpage, not the stacked mobile version. */
  @media(max-width:600px){
    .pco-grid-l{grid-template-columns:minmax(0,1fr)}       /* minmax(0,..) = half the no-blowout guard */
    /* squarify the video block (matches hero .ph-viewport + products .px-media-wrap) */
    .pco-visual{aspect-ratio:1/1;min-height:0;order:-1}
    /* form square-by-DEFAULT via min-height:100vw (a square FLOOR, NOT aspect-ratio). Width stays = viewport,
       so a long message grows the box TALLER into a rectangle - never wider -> zero horizontal scroll/clip. */
    .pco-form-col{min-height:100vw;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:26px 22px}
    .pco-form-col .pco-h{font-size:1.85rem}
    .pco-form-col .pco-lead{margin:10px 0 16px}
    .pco-form-col .pco-field{margin-bottom:10px}
    .pco-form-col .pco-field textarea{min-height:90px}    /* multi-line default so the empty form fills the square */
    .pco-form-col .pco-btn{margin-top:2px}
  }

/* ---- contact-info-cards ---- */
.pci{--white:#fff;--accent:var(--c-blue);font-family:inherit;line-height:1.5;width:100%;max-width:988px;margin:24px auto 0}   /* match this number to the main card's width if it's not exact */
  .pci *{box-sizing:border-box}
  .pci-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .pci-card{background:var(--c-slab);border:1px solid rgba(255,255,255,.22);border-radius:14px;
    padding:26px 24px;backdrop-filter:blur(6px);transition:background .2s ease,border-color .2s ease}
  .pci-card:hover{background:var(--c-slab-hi);border-color:rgba(20,110,245,.5)}
  .pci-head{display:flex;align-items:center;gap:13px;margin-bottom:12px}
  .pci-ico{flex:0 0 auto;width:30px;height:30px;color:var(--accent);display:flex;align-items:center;justify-content:center}
  .pci-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .pci-head h4{color:var(--white);font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.1;margin:0}
  .pci-card p{color:#EDEFF2;font-size:14.5px;line-height:1.55;margin:0}
  @media(max-width:760px){ .pci-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto} }

/* ---- resource-index ---- */
/* The grid, the card shell, the fill, the hover and the scroll reveal all come from
   .ponco-cards (see "solutions-cards") - a res-card IS a pc-card, so site.js picks it up
   with no change. This block only adds what a listing needs on top: the meta line and the
   link treatment. */
  .ponco-cards .res-meta{display:flex;align-items:center;gap:8px;margin-bottom:12px;
    color:var(--c-mute);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
  .ponco-cards .res-kind{color:var(--c-coral)}
  .ponco-cards .res-card .pc-head{margin-bottom:10px}
  .ponco-cards .res-card .pc-title{font-size:20px;line-height:1.25}
  .ponco-cards .res-card:hover .pc-title{color:var(--c-blue)}
  .ponco-cards .res-more{display:inline-block;margin-top:14px;color:var(--c-blue);font-size:14px;font-weight:700}
  /* an empty index still needs to occupy the grid row rather than collapse to nothing */
  .res-grid:empty{display:block;min-height:1px}

/* ---- resource-article ---- */
/* Long-form body copy on the dark backdrop. Deliberately NOT .prose/.toc: those are the
   light terms/privacy styles (ink on off-white) and would be invisible here. */
.ponco-art{--ink:#fff;--soft:var(--c-off);--line:rgba(255,255,255,.14);
    font-family:inherit;max-width:760px;margin:0 auto}   /* ~70 characters a line */
  .ponco-art *{box-sizing:border-box}
  .ponco-art .art-title{text-align:left;font-size:42px;line-height:1.18;margin-bottom:14px}
  .ponco-art .art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:34px;
    color:var(--c-mute);font-size:14px}
  .ponco-art .art-toc{border:1px solid var(--line);border-radius:14px;background:rgba(18,22,30,.6);
    padding:18px 22px 18px 40px;margin:0 0 40px}
  .ponco-art .art-toc li{color:var(--c-mute);margin:0 0 6px}
  .ponco-art .art-toc li:last-child{margin-bottom:0}
  .ponco-art .art-toc a{color:var(--soft)}
  .ponco-art .art-toc a:hover{color:var(--c-blue)}
  .ponco-art .art-body{color:var(--soft)}
  .ponco-art .art-body p,.ponco-art .art-body li{font-size:17px;line-height:1.8}
  .ponco-art .art-body .art-lede{font-size:20px;line-height:1.7;color:#fff}
  /* scroll-margin because html{scroll-behavior:smooth} + the ~100px fixed header would
     otherwise land a contents-list target underneath the nav */
  .ponco-art .art-body h2,.ponco-art .art-body h3{color:var(--ink);scroll-margin-top:110px}
  .ponco-art .art-body h2{font-size:30px;line-height:1.25;margin:48px 0 14px}
  .ponco-art .art-body h3{font-size:22px;line-height:1.3;margin:34px 0 10px}
  .ponco-art .art-body a{color:var(--c-blue);text-decoration:underline;text-underline-offset:3px}
  .ponco-art .art-body a:hover{color:#fff}
  .ponco-art .art-body ul,.ponco-art .art-body ol{padding-inline-start:22px}
  .ponco-art .art-body li{margin-bottom:8px}
  .ponco-art .art-body blockquote{margin:30px 0;padding:2px 0 2px 20px;
    border-left:3px solid var(--c-coral);color:var(--ink);font-size:19px;line-height:1.7}
  .ponco-art .art-body figure{margin:34px 0}
  .ponco-art .art-body figure img{border:1px solid var(--line);border-radius:12px}
  .ponco-art .art-body figcaption{margin-top:10px;color:var(--c-mute);font-size:14px;line-height:1.5}
  .ponco-art .art-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
    background:rgba(255,255,255,.07);border-radius:4px;padding:1px 5px}
  .ponco-art .art-body pre{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:12px;
    padding:18px;overflow-x:auto}
  .ponco-art .art-body pre code{background:none;padding:0}
  .ponco-art .art-body table{width:100%;border-collapse:collapse;margin:30px 0;font-size:15.5px}
  .ponco-art .art-body th,.ponco-art .art-body td{border:1px solid var(--line);padding:10px 14px;text-align:left}
  .ponco-art .art-body th{color:var(--ink);font-weight:700}
  .ponco-art .art-foot{margin-top:52px;padding-top:30px;border-top:1px solid var(--line)}
  .ponco-art .art-foot-h{color:var(--ink);font-size:20px;margin-bottom:12px}
  .ponco-art .art-foot ul{padding-inline-start:22px;color:var(--soft)}
  .ponco-art .art-foot a{color:var(--c-blue)}
  .ponco-art .art-foot a:hover{color:#fff}
  .ponco-art .art-foot-note{margin:18px 0 0;color:var(--c-mute);font-size:15px;line-height:1.6}   /* the "written by" line - .art-foot sets no colour, so a bare <p> here would inherit dark-on-dark */
  .ponco-art .art-back{margin:22px 0 0;color:var(--c-mute)}
  @media(max-width:1024px){
    .ponco-art .art-title{font-size:32px}
    .ponco-art .art-body .art-lede{font-size:18px}
  }
  @media(max-width:767px){
    .ponco-art .art-title{font-size:27px}
    .ponco-art .art-body h2{font-size:24px;margin-top:38px}
    .ponco-art .art-body h3{font-size:19px}
    .ponco-art .art-body p,.ponco-art .art-body li{font-size:16px}
    .ponco-art .art-body .art-lede{font-size:17px}
    .ponco-art .art-toc{padding:16px 18px 16px 36px}
  }