/* ===== brand.css (scoped under .pxbrand) ===== */
.pxbrand{--px-orange:      #f68b1f;   
    --px-orange-deep: #ef700e;   
    --px-orange-vec:  #ff9c00;   
    --px-graphite:    #5b5e60;   
    --px-navy:        #020134;   

    
    --ink:      #1c1c22;
    --slate:    #424242;
    --grey:     #58585a;
    --grey-2:   #727272;
    --grey-3:   #888888;
    --line:     #e4e4e0;
    --line-2:   #dddddd;
    --surface:  #ffffff;
    --paper:    #faf8f4;   
    --paper-2:  #f5f3ee;
    --cloud:    #f7f7f7;

    
    --amber-50: #fff6ec;
    --amber-100:#fde8cf;
    --amber-200:#fbcf9c;

    
    --nhs-blue: #005eb8;

    --maxw: 1180px;
    --shadow-sm: 0 1px 2px rgba(2,1,52,.06), 0 4px 12px rgba(2,1,52,.05);
    --shadow-md: 0 6px 24px rgba(2,1,52,.09), 0 2px 6px rgba(2,1,52,.05);
    --shadow-lg: 0 24px 60px -20px rgba(2,1,52,.30);
    --radius: 14px;}
.pxbrand *{box-sizing:border-box}
.pxbrand{scroll-behavior:smooth}
.pxbrand{font-family:"Rubik",system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.6;font-weight:400;}
.pxbrand h1, .pxbrand h2, .pxbrand h3, .pxbrand h4{font-weight:700;color:var(--px-navy);line-height:1.12;letter-spacing:-.01em;margin:0}
.pxbrand .display{font-family:"Archivo Black",sans-serif;font-weight:400;letter-spacing:-.02em;text-transform:none}
.pxbrand p{margin:0 0 1em}
.pxbrand a{color:var(--px-orange-deep)}
.pxbrand .muted{color:var(--grey-2)}
.pxbrand .small{font-size:.82rem}
.pxbrand code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.85em;background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:.12em .45em;color:var(--slate)}
.pxbrand .stripes{display:flex;align-items:flex-end;gap:5px;height:34px}
.pxbrand .stripes i{display:block;width:6px;border-radius:6px;background:var(--px-orange);animation:none}
.pxbrand .stripes i:nth-child(1){height:30%}
.pxbrand .stripes i:nth-child(2){height:48%}
.pxbrand .stripes i:nth-child(3){height:66%}
.pxbrand .stripes i:nth-child(4){height:84%}
.pxbrand .stripes i:nth-child(5){height:100%}
.pxbrand .stripes i:nth-child(6){height:100%}
.pxbrand .stripes i:nth-child(7){height:100%}
.pxbrand .stripes i:nth-child(8){height:84%}
.pxbrand .stripes i:nth-child(9){height:66%}
.pxbrand .stripes i:nth-child(10){height:48%}
.pxbrand section{padding:88px clamp(24px,5vw,90px);border-bottom:1px solid var(--line);scroll-margin-top:0}
.pxbrand section:nth-of-type(even){background:linear-gradient(180deg,#fff,var(--paper))}
.pxbrand .sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:34px}
.pxbrand .sec-num{font-family:"Archivo Black";font-size:.95rem;color:var(--px-orange);letter-spacing:.02em}
.pxbrand .sec-head h2{font-size:clamp(1.6rem,3.2vw,2.5rem)}
.pxbrand .lead{font-size:1.12rem;color:var(--slate);max-width:62ch;font-weight:300}
.pxbrand .wrap{max-width:var(--maxw)}
.pxbrand .badge{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;padding:5px 11px;border-radius:30px;vertical-align:middle;}
.pxbrand .badge.draft{background:repeating-linear-gradient(45deg,var(--amber-50),var(--amber-50) 8px,#fff 8px,#fff 16px);
    color:var(--px-orange-deep);border:1.5px dashed var(--px-orange)}
.pxbrand .badge.real{background:var(--amber-100);color:var(--px-orange-deep)}
.pxbrand .badge.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--px-orange)}
.pxbrand .callout{border:1.5px dashed var(--px-orange);background:var(--amber-50);
    border-radius:var(--radius);padding:18px 22px;margin:22px 0;color:var(--slate);}
.pxbrand .callout strong{color:var(--px-orange-deep)}
.pxbrand .flag{border-left:4px solid var(--px-orange);background:#fff;border:1px solid var(--line);border-left:4px solid var(--px-orange);
    border-radius:10px;padding:16px 20px;margin:18px 0;box-shadow:var(--shadow-sm)}
.pxbrand .grid{display:grid;gap:22px}
.pxbrand .g2{grid-template-columns:repeat(2,1fr)}
.pxbrand .g3{grid-template-columns:repeat(3,1fr)}
.pxbrand .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){
.pxbrand .g3, .pxbrand .g4{grid-template-columns:repeat(2,1fr)}
.pxbrand .g2{grid-template-columns:1fr}
}
.pxbrand .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.pxbrand .card h4{font-size:1.05rem;margin-bottom:8px}
.pxbrand .card .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--amber-50);
    color:var(--px-orange-deep);font-size:1.2rem;margin-bottom:14px;border:1px solid var(--amber-100)}
.pxbrand .cover{position:relative;overflow:hidden;border-bottom:none;
    background:
      radial-gradient(1200px 500px at 88% -10%, var(--amber-50), transparent 60%),
      linear-gradient(180deg,#fff, var(--paper));
    padding-top:64px;padding-bottom:64px;}
.pxbrand .cover .kicker{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.pxbrand .cover .kicker .stripes{height:30px}
.pxbrand .cover .kicker span{font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.74rem;color:var(--grey-2)}
.pxbrand .cover h1{font-family:"Archivo Black";font-size:clamp(2.6rem,7vw,5.4rem);color:var(--px-navy);line-height:.98;letter-spacing:-.03em}
.pxbrand .cover h1 em{font-style:normal;color:var(--px-orange);position:relative}
.pxbrand .cover .sub{font-size:clamp(1.05rem,2.2vw,1.4rem);color:var(--slate);max-width:54ch;margin-top:22px;font-weight:300}
.pxbrand .cover .meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:38px;font-size:.85rem;color:var(--grey-2)}
.pxbrand .cover .meta b{color:var(--px-navy);font-weight:600}
.pxbrand .cover-logo{margin:46px 0 0}
.pxbrand .cover-logo svg{width:min(420px,80%);height:auto;filter:drop-shadow(0 18px 40px rgba(2,1,52,.12))}
.pxbrand .cover::before{content:"";position:absolute;right:-90px;top:40px;width:340px;height:520px;border-radius:200px;
    border:34px solid var(--amber-100);opacity:.5;transform:rotate(24deg);pointer-events:none;z-index:0;}
.pxbrand .cover::after{content:"";position:absolute;right:48px;bottom:32px;width:137px;height:130px;pointer-events:none;z-index:1;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='137' height='130'%3E%3Cg fill='%23f68b1f'%3E%3Crect x='0' y='78' width='11' height='52' rx='5.5'/%3E%3Crect x='21' y='49' width='11' height='81' rx='5.5'/%3E%3Crect x='42' y='26' width='11' height='104' rx='5.5'/%3E%3Crect x='63' y='0' width='11' height='130' rx='5.5'/%3E%3Crect x='84' y='0' width='11' height='130' rx='5.5'/%3E%3Crect x='105' y='29' width='11' height='101' rx='5.5'/%3E%3Crect x='126' y='59' width='11' height='71' rx='5.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;}
.pxbrand .cover .wrap{position:relative;z-index:2}
.pxbrand .cover .sub{max-width:48ch}
@media(max-width:900px){
.pxbrand .cover::before, .pxbrand .cover::after{display:none}
}
.pxbrand .sw{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);cursor:pointer;background:#fff}
.pxbrand .sw .chip{height:104px;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px}
.pxbrand .sw .copy{font-size:.62rem;background:rgba(255,255,255,.85);color:var(--ink);border-radius:20px;padding:3px 9px;opacity:0;transition:.15s;font-weight:600}
.pxbrand .sw:hover .copy{opacity:1}
.pxbrand .sw .meta{padding:12px 14px}
.pxbrand .sw .meta .nm{font-weight:600;color:var(--px-navy);font-size:.92rem}
.pxbrand .sw .meta .hx{font-size:.78rem;color:var(--grey-2);font-variant-numeric:tabular-nums;text-transform:uppercase}
.pxbrand .sw .meta .role{font-size:.74rem;color:var(--grey-3);margin-top:4px}
.pxbrand .ramp{display:flex;border-radius:10px;overflow:hidden;border:1px solid var(--line);margin-top:8px}
.pxbrand .ramp span{flex:1;height:46px;display:grid;place-items:end center;font-size:.6rem;color:rgba(0,0,0,.45);padding-bottom:4px}
.pxbrand .specimen{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pxbrand .specimen .row{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:20px 26px;border-top:1px solid var(--line);align-items:baseline}
.pxbrand .specimen .row:first-child{border-top:none}
.pxbrand .specimen .row .lab{font-size:.74rem;color:var(--grey-3);text-transform:uppercase;letter-spacing:.06em}
.pxbrand .specimen .row .lab b{display:block;color:var(--px-navy);font-size:.9rem;letter-spacing:0;text-transform:none}
.pxbrand .btn{display:inline-flex;align-items:center;gap:9px;font-family:"Rubik";font-weight:600;font-size:.95rem;
    border-radius:999px;padding:13px 26px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:.18s;line-height:1}
.pxbrand .btn-primary{background:var(--px-orange);color:#fff;box-shadow:0 8px 18px -8px rgba(246,139,31,.8)}
.pxbrand .btn-primary:hover{background:var(--px-orange-deep);transform:translateY(-1px)}
.pxbrand .btn-ghost{background:#fff;color:var(--px-orange-deep);border-color:var(--px-orange)}
.pxbrand .btn-ghost:hover{background:var(--amber-50)}
.pxbrand .btn-navy{background:var(--px-navy);color:#fff}
.pxbrand .btn-navy:hover{background:#0a0a55}
.pxbrand .btn-sq{border-radius:8px}
.pxbrand .logo-stage{background:#fff;border:1px solid var(--line);border-radius:var(--radius);display:grid;place-items:center;padding:42px;min-height:200px}
.pxbrand .logo-stage.dark{background:var(--px-navy)}
.pxbrand .logo-stage.orange{background:var(--px-orange)}
.pxbrand .logo-stage svg{width:230px;height:auto}
.pxbrand .logo-stage img{max-width:80%;height:auto}
.pxbrand .dont{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.pxbrand .dont .vis{height:120px;display:grid;place-items:center;background:var(--cloud);position:relative}
.pxbrand .dont .vis svg{width:120px}
.pxbrand .dont .lab{padding:12px 16px;font-size:.84rem;color:var(--slate);border-top:1px solid var(--line)}
.pxbrand .dont .lab b{color:#c0392b}
.pxbrand table.spec{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pxbrand table.spec th, .pxbrand table.spec td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);font-size:.9rem}
.pxbrand table.spec th{background:var(--paper-2);color:var(--px-navy);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.pxbrand table.spec tr:last-child td{border-bottom:none}
.pxbrand ul.clean{list-style:none;padding:0;margin:0}
.pxbrand ul.clean li{position:relative;padding:6px 0 6px 28px}
.pxbrand ul.clean li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:9px;border-radius:3px;background:var(--px-orange)}
.pxbrand .voicegrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.pxbrand .voicegrid .h{padding:14px 20px;font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line)}
.pxbrand .voicegrid .h.we{color:#1d7a4d;background:#f0faf4}
.pxbrand .voicegrid .h.not{color:#b03a2e;background:#fdf3f1}
.pxbrand .voicegrid .c{padding:16px 20px;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--slate)}
.pxbrand .voicegrid .c:nth-child(odd){border-right:1px solid var(--line)}
.pxbrand .qbox{counter-reset:q;display:grid;gap:12px}
.pxbrand .qitem{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow-sm)}
.pxbrand .qitem::before{counter-increment:q;content:"Q" counter(q);font-family:"Archivo Black";color:var(--px-orange);font-size:.85rem;min-width:34px}
.pxbrand .qitem .qt{font-weight:600;color:var(--px-navy)}
.pxbrand .qitem .qd{font-size:.88rem;color:var(--grey-2)}
.pxbrand footer.bookftr{padding:60px clamp(24px,5vw,90px);background:var(--px-navy);color:#cfcfe6}
.pxbrand footer.bookftr .stripes i{background:var(--px-orange)}
.pxbrand footer.bookftr a{color:#fff}
.pxbrand footer.bookftr h3{color:#fff;margin:18px 0 8px}
.pxbrand .hero-sample{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(120deg,var(--px-orange),var(--px-orange-deep));color:#fff;padding:48px;box-shadow:var(--shadow-lg)}
.pxbrand .hero-sample h3{color:#fff;font-family:"Archivo Black";font-size:2rem;max-width:14ch;line-height:1.02}
.pxbrand .hero-sample p{color:rgba(255,255,255,.92);max-width:40ch;margin-top:14px}
.pxbrand .hero-sample .stripes{position:absolute;right:30px;bottom:0;height:160px;gap:9px;opacity:.55}
.pxbrand .hero-sample .stripes i{width:12px;background:#fff;border-radius:12px 12px 0 0}
.pxbrand .hero-sample .btn-row{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:2}
.pxbrand .hero-sample .btn-row .btn-ghost{background:#fff;border-color:#fff}

/* ===== pxhero.css (scoped under .pxbrand) ===== */
.pxbrand{--pxh-orange:#f68b1f;
  --pxh-navy:#020134;
  --pxh-slate:#424242;
  --pxh-grey:#727272;
  --pxh-paper:#faf8f4;
  --pxh-amber:#fff6ec;
  --pxh-line:#e4e4e0;}
.pxbrand{background:var(--pxh-paper);}
.pxbrand .pxhero{position:relative;overflow:hidden;margin:0;
  background:
    radial-gradient(1200px 500px at 88% -10%, var(--pxh-amber), transparent 60%),
    linear-gradient(180deg,#fff,var(--pxh-paper));
  padding:64px clamp(24px,5vw,90px);
  border-bottom:1px solid var(--pxh-line);}
.pxbrand .pxhero .wrap{max-width:1180px;margin:0;padding:0;position:relative;z-index:2}
.pxbrand .pxhero .kicker{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.pxbrand .pxhero .kicker span{font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  font-size:.74rem;color:var(--pxh-grey);}
.pxbrand .pxhero .stripes{display:flex;align-items:flex-end;gap:5px;height:30px}
.pxbrand .pxhero .stripes i{display:block;width:6px;border-radius:6px;background:var(--pxh-orange)}
.pxbrand .pxhero .stripes i:nth-child(1){height:30%}
.pxbrand .pxhero .stripes i:nth-child(2){height:48%}
.pxbrand .pxhero .stripes i:nth-child(3){height:66%}
.pxbrand .pxhero .stripes i:nth-child(4){height:84%}
.pxbrand .pxhero .stripes i:nth-child(5){height:100%}
.pxbrand .pxhero .stripes i:nth-child(6){height:100%}
.pxbrand .pxhero .stripes i:nth-child(7){height:100%}
.pxbrand .pxhero .stripes i:nth-child(8){height:84%}
.pxbrand .pxhero .stripes i:nth-child(9){height:66%}
.pxbrand .pxhero .stripes i:nth-child(10){height:48%}
.pxbrand .pxhero h1{margin:0;
  font-family:"Archivo Black",sans-serif;font-weight:400;
  font-size:clamp(2.6rem,7vw,5.4rem);
  color:var(--pxh-navy);line-height:.98;letter-spacing:-.03em;
  text-transform:none;}
.pxbrand .pxhero .sub{font-size:clamp(1.05rem,2.2vw,1.4rem);color:var(--pxh-slate);
  max-width:48ch;margin:22px 0 0;font-weight:300;line-height:1.5;}
.pxbrand .pxhero::before{content:"";position:absolute;right:-90px;top:40px;width:340px;height:520px;border-radius:200px;
  border:34px solid #fde8cf;opacity:.5;transform:rotate(24deg);pointer-events:none;z-index:0;}
.pxbrand .pxhero::after{content:"";position:absolute;right:48px;bottom:32px;width:137px;height:130px;pointer-events:none;z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='137' height='130'%3E%3Cg fill='%23f68b1f'%3E%3Crect x='0' y='78' width='11' height='52' rx='5.5'/%3E%3Crect x='21' y='49' width='11' height='81' rx='5.5'/%3E%3Crect x='42' y='26' width='11' height='104' rx='5.5'/%3E%3Crect x='63' y='0' width='11' height='130' rx='5.5'/%3E%3Crect x='84' y='0' width='11' height='130' rx='5.5'/%3E%3Crect x='105' y='29' width='11' height='101' rx='5.5'/%3E%3Crect x='126' y='59' width='11' height='71' rx='5.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;}
@media(max-width:880px){
.pxbrand .pxhero{padding-left:20px;padding-right:20px}
.pxbrand .pxhero::before, .pxbrand .pxhero::after{display:none}
}

/* ===== brand-assets.html <style> ===== */
.pxbrand .hub-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
    position:relative;overflow:hidden;}
.pxbrand .hub-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
    background:var(--px-orange);transform:scaleY(0);transform-origin:top;transition:transform .2s ease;}
.pxbrand .hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--amber-200)}
.pxbrand .hub-card:hover::before{transform:scaleY(1)}
.pxbrand .hub-card:focus-visible{outline:3px solid var(--px-orange);outline-offset:3px}
.pxbrand .hub-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pxbrand .hub-num{font-family:"Archivo Black";font-size:.85rem;color:var(--px-orange);
    background:var(--amber-50);border:1px solid var(--amber-100);border-radius:8px;padding:4px 9px;line-height:1}
.pxbrand .hub-card .ministripe{display:flex;align-items:flex-end;gap:3px;height:20px}
.pxbrand .hub-card .ministripe i{display:block;width:5px;border-radius:4px;background:var(--px-orange)}
.pxbrand .hub-card .ministripe i:nth-child(1){height:38%;background:var(--px-graphite)}
.pxbrand .hub-card .ministripe i:nth-child(2){height:64%}
.pxbrand .hub-card .ministripe i:nth-child(3){height:100%}
.pxbrand .hub-card .ministripe i:nth-child(4){height:100%}
.pxbrand .hub-card .ministripe i:nth-child(5){height:60%}
.pxbrand .hub-card .ministripe i:nth-child(6){height:36%;background:var(--px-graphite)}
.pxbrand .hub-card h4{font-size:1.12rem;margin-bottom:7px}
.pxbrand .hub-card p{color:var(--grey-2);font-size:.92rem;margin:0;flex:1}
.pxbrand .hub-cta{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-weight:600;
    font-size:.9rem;color:var(--px-orange-deep)}
.pxbrand .hub-cta .arrow{transition:transform .16s ease}
.pxbrand .hub-card:hover .hub-cta .arrow{transform:translateX(4px)}
.pxbrand .pillrow{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.pxbrand .pillrow .pill{font-size:.82rem;font-weight:600;letter-spacing:.02em;padding:7px 15px;border-radius:999px;
    border:1px solid var(--amber-200);background:var(--amber-50);color:var(--px-orange-deep)}
.pxbrand .pillrow .pill b{color:var(--px-navy)}

/* ===== icons/index.html <style> ns=.pxicons ===== */
.pxbrand.pxicons{--px-orange:#f68b1f; --px-graphite:#5b5e60; --px-navy:#020134;
    --ink:#1c1c22; --slate:#424242; --grey:#727272; --grey-3:#888;
    --line:#e4e4e0; --paper:#faf8f4; --amber-50:#fff6ec; --amber-100:#fde8cf; --amber-200:#fbcf9c;
    --shadow-sm:0 1px 2px rgba(2,1,52,.06), 0 4px 12px rgba(2,1,52,.05);
    --radius:14px;}
.pxbrand.pxicons *{box-sizing:border-box}
.pxbrand.pxicons{font-family:"Rubik",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;}
/* Icons hero now uses the shared .cover hero, and the gallery sits in a real
   <section>, so the page inherits the brand-book width/padding. The old
   .wrap/h1/.sub/.kicker overrides have been removed. */
.pxbrand.pxicons .note{background:#fff;border:1px solid var(--line);border-left:4px solid var(--px-orange);border-radius:10px;padding:14px 18px;color:var(--slate);font-size:.92rem;box-shadow:var(--shadow-sm);margin:0 0 14px}
.pxbrand.pxicons code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;background:var(--amber-50);border:1px solid var(--amber-100);border-radius:5px;padding:.1em .4em;color:var(--slate)}
.pxbrand.pxicons h2{font-family:"Archivo Black",sans-serif;font-weight:400;color:var(--px-navy);font-size:1.15rem;letter-spacing:-.01em;margin:42px 0 4px}
.pxbrand.pxicons .grouptag{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--grey-3);margin-bottom:16px}
.pxbrand.pxicons .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
.pxbrand.pxicons .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px 12px;min-height:118px;transition:.16s}
.pxbrand.pxicons .card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(2,1,52,.09);border-color:var(--amber-200)}
.pxbrand.pxicons .card img{width:48px;height:48px;display:block}
.pxbrand.pxicons .card span{font-size:.78rem;color:var(--slate);text-align:center}
.pxbrand.pxicons .mini{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:14px 0 4px;padding:14px 18px;
    background:#fff;border:1px solid var(--line);border-radius:10px}
.pxbrand.pxicons .mini .lab{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey-3);margin-right:6px}
.pxbrand.pxicons .mini img{width:24px;height:24px;display:block}
.pxbrand.pxicons .dark{margin-top:48px;background:var(--px-navy);border-radius:18px;padding:34px}
.pxbrand.pxicons .dark h3{color:#fff;font-family:"Archivo Black",sans-serif;font-weight:400;font-size:1rem;margin:0 0 4px}
.pxbrand.pxicons .dark .cap{color:#9a9ac4;font-size:.82rem;margin:0 0 20px}
.pxbrand.pxicons .dark .row{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.pxbrand.pxicons .dark .row img{width:32px;height:32px;display:block;opacity:.92}
.pxbrand.pxicons footer{margin-top:50px;color:var(--grey-3);font-size:.82rem}

/* ===== illustration/illustration-style-spec.html <style> ns=.pxillus ===== */
.pxbrand.pxillus{--orange:#f68b1f;
    --orange-soft:#fde3c6;
    --graphite:#5b5e60;
    --navy:#020134;
    --teal:#11a8b0;
    --success:#1d7a4d;
    --warning:#e6a700;
    --error:#c0392b;
    --ink:#020134;
    --paper:#ffffff;
    --paper-2:#f6f7f8;
    --line:#e3e5e7;
    --radius:14px;}
.pxbrand.pxillus *{box-sizing:border-box;}
.pxbrand.pxillus{scroll-behavior:smooth;}
.pxbrand.pxillus{font-family:"Rubik",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:
      radial-gradient(900px 500px at 100% -8%, rgba(246,139,31,.07), transparent 60%),
      radial-gradient(800px 500px at -8% 6%, rgba(17,168,176,.06), transparent 60%),
      var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;}
.pxbrand.pxillus .wrap{max-width:1180px;margin:0 auto;padding:48px 40px 80px;}
.pxbrand.pxillus .display{font-family:"Archivo Black",sans-serif;
    font-weight:400;
    line-height:.98;
    letter-spacing:-.01em;
    text-transform:uppercase;}
.pxbrand.pxillus h1.display{font-size:clamp(40px,6vw,76px);margin:0;}
.pxbrand.pxillus h2.display{font-size:clamp(22px,2.6vw,30px);margin:0 0 4px;}
.pxbrand.pxillus .eyebrow{font-family:"Rubik",sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.22em;
    font-size:12px;
    color:var(--orange);}
.pxbrand.pxillus header.hero{display:grid;
    grid-template-columns:1.25fr .9fr;
    gap:40px;
    align-items:center;
    padding-bottom:36px;
    border-bottom:3px solid var(--navy);}
.pxbrand.pxillus header.hero p.lede{font-size:18px;
    color:var(--graphite);
    max-width:48ch;
    margin:18px 0 0;}
.pxbrand.pxillus .pillars{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.pxbrand.pxillus .pillar{font-family:"Rubik";font-weight:600;font-size:13px;
    padding:7px 14px;border-radius:999px;
    background:var(--navy);color:#fff;letter-spacing:.02em;}
.pxbrand.pxillus .pillar:nth-child(2){background:var(--orange);}
.pxbrand.pxillus .pillar:nth-child(3){background:var(--graphite);}
.pxbrand.pxillus .pillar:nth-child(4){background:var(--teal);}
.pxbrand.pxillus .hero-art{background:var(--navy);
    border-radius:20px;
    padding:26px;
    box-shadow:0 24px 50px -28px rgba(2,1,52,.6);}
.pxbrand.pxillus section{padding-top:54px;}
.pxbrand.pxillus .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;}
.pxbrand.pxillus .sec-num{font-family:"Archivo Black";font-size:14px;color:#fff;
    background:var(--orange);border-radius:8px;
    width:34px;height:34px;display:grid;place-items:center;flex:none;
    transform:translateY(2px);}
.pxbrand.pxillus .sec-head p{margin:4px 0 0;color:var(--graphite);font-size:15px;}
.pxbrand.pxillus .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.pxbrand.pxillus .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pxbrand.pxillus .card{background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;}
.pxbrand.pxillus .card h3{margin:0 0 8px;font-size:17px;font-weight:700;}
.pxbrand.pxillus .card p{margin:0;color:var(--graphite);font-size:14.5px;}
.pxbrand.pxillus .card .lead-strip{margin-bottom:16px;}
.pxbrand.pxillus .swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.pxbrand.pxillus .swatch{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;}
.pxbrand.pxillus .swatch .chip{height:78px;}
.pxbrand.pxillus .swatch .meta{padding:11px 13px;}
.pxbrand.pxillus .swatch .name{font-weight:700;font-size:13.5px;}
.pxbrand.pxillus .swatch .hex{font-size:12px;color:var(--graphite);letter-spacing:.03em;}
.pxbrand.pxillus .swatch .role{font-size:11.5px;color:var(--graphite);margin-top:3px;}
.pxbrand.pxillus .func-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;}
.pxbrand.pxillus .func{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--graphite);}
.pxbrand.pxillus .dot{width:18px;height:18px;border-radius:6px;flex:none;}
.pxbrand.pxillus .construction{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:stretch;}
.pxbrand.pxillus .rules-list{list-style:none;margin:0;padding:0;}
.pxbrand.pxillus .rules-list li{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);
    font-size:14.5px;color:var(--graphite);}
.pxbrand.pxillus .rules-list li:last-child{border-bottom:0;}
.pxbrand.pxillus .rules-list b{color:var(--ink);font-weight:600;}
.pxbrand.pxillus .rk{flex:none;width:30px;height:30px;border-radius:8px;background:var(--paper-2);
    border:1px solid var(--line);display:grid;place-items:center;}
.pxbrand.pxillus .spec-frame{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;}
.pxbrand.pxillus .dodont{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.pxbrand.pxillus .do, .pxbrand.pxillus .dont{border-radius:var(--radius);padding:22px;border:1px solid var(--line);}
.pxbrand.pxillus .do{background:rgba(29,122,77,.06);border-color:rgba(29,122,77,.25);}
.pxbrand.pxillus .dont{background:rgba(192,57,43,.05);border-color:rgba(192,57,43,.22);}
.pxbrand.pxillus .do h3, .pxbrand.pxillus .dont h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:18px;}
.pxbrand.pxillus .badge{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
    color:#fff;font-weight:700;font-size:15px;flex:none;font-family:"Rubik";}
.pxbrand.pxillus .do .badge{background:var(--success);}
.pxbrand.pxillus .dont .badge{background:var(--error);}
.pxbrand.pxillus .checklist{list-style:none;margin:0;padding:0;}
.pxbrand.pxillus .checklist li{position:relative;padding:7px 0 7px 26px;font-size:14px;color:var(--graphite);border-bottom:1px solid rgba(0,0,0,.05);}
.pxbrand.pxillus .checklist li:last-child{border-bottom:0;}
.pxbrand.pxillus .checklist li::before{position:absolute;left:0;top:7px;font-weight:700;}
.pxbrand.pxillus .do .checklist li::before{content:"✓";color:var(--success);}
.pxbrand.pxillus .dont .checklist li::before{content:"✕";color:var(--error);}
.pxbrand.pxillus .scenes{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.pxbrand.pxillus .scene{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;
    display:flex;flex-direction:column;}
.pxbrand.pxillus .scene .art{background:#fbfbfc;border-bottom:1px solid var(--line);padding:6px;}
.pxbrand.pxillus .scene .art svg{display:block;width:100%;height:auto;}
.pxbrand.pxillus .scene .copy{padding:20px 22px 24px;}
.pxbrand.pxillus .scene .tag{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);}
.pxbrand.pxillus .scene h3{margin:6px 0 6px;font-size:19px;font-weight:700;}
.pxbrand.pxillus .scene p{margin:0;color:var(--graphite);font-size:14px;}
.pxbrand.pxillus .motif-strip{display:flex;align-items:flex-end;gap:6px;height:42px;margin:6px 0 0;}
.pxbrand.pxillus .motif-strip span{width:11px;border-radius:6px;background:var(--orange);opacity:.9;}
.pxbrand.pxillus footer{margin-top:64px;padding-top:24px;border-top:3px solid var(--navy);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
    font-size:12.5px;color:var(--graphite);}
.pxbrand.pxillus footer b{font-family:"Archivo Black";color:var(--navy);font-weight:400;letter-spacing:.02em;}
@media (max-width:880px){
.pxbrand.pxillus header.hero, .pxbrand.pxillus .construction, .pxbrand.pxillus .grid-2, .pxbrand.pxillus .dodont, .pxbrand.pxillus .scenes{grid-template-columns:1fr;}
.pxbrand.pxillus .grid-3, .pxbrand.pxillus .swatches{grid-template-columns:1fr 1fr;}
.pxbrand.pxillus .wrap{padding:32px 22px 60px;}
}

/* Asset pages (icons/illustration) had no inter-section borders in their
   standalone design; neutralise the shared .pxbrand section hairline that
   bleeds into them. */
.pxbrand.pxicons section, .pxbrand.pxillus section{border-bottom:0}

/* ---- Hero consistency + keep hero text clear of the bottom-right bar deco ---- */
/* Asset-page heroes (.pxhero in .pxicons/.pxillus) must match the brand-book
   .cover hero: the page's own centered+padded .wrap and the .pxillus section
   padding must not leak into the hero. */
.pxbrand.pxicons .pxhero,
.pxbrand.pxillus .pxhero{padding:64px clamp(24px,5vw,90px)}
.pxbrand.pxicons .pxhero .wrap,
.pxbrand.pxillus .pxhero .wrap{max-width:1180px;margin:0;padding:0 200px 0 0}
/* Brand-book hero text clears the deco too. */
.pxbrand .cover .wrap{padding-right:200px}
@media(max-width:900px){
  .pxbrand .cover .wrap{padding-right:0}
}
@media(max-width:880px){
  .pxbrand.pxicons .pxhero .wrap,
  .pxbrand.pxillus .pxhero .wrap{padding-right:0}
}
/* Icons page defines its own small h1; the hero title must use the big
   brand-book size like every other page. */
.pxbrand.pxicons .pxhero h1,
.pxbrand.pxillus .pxhero h1{font-size:clamp(2.6rem,7vw,5.4rem);line-height:.98;letter-spacing:-.03em}