/* Why PEB Studio page (1.1.18) — loaded only on /why-peb-studio */

/* ---------- Hero: blueprint grid + line-drawn portal frame ---------- */
.wy-hero{position:relative;overflow:hidden;isolation:isolate;background:#050f22;color:#b8c8e0;padding:58px 0 0}
.wy-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(900px 600px at 78% 40%,rgba(33,73,127,.55),transparent 65%),radial-gradient(520px 320px at 8% 100%,rgba(200,16,46,.2),transparent 70%)}
.wy-hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(140,180,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(140,180,255,.05) 1px,transparent 1px),linear-gradient(rgba(140,180,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(140,180,255,.025) 1px,transparent 1px);background-size:96px 96px,96px 96px,24px 24px,24px 24px}
.wy-hero .crumbs{margin-bottom:34px}
.wy-hero-g{display:grid;grid-template-columns:1.02fr 1fr;gap:30px;align-items:center}
.wy-hero .eyebrow{color:#ff6b80}
.wy-hero h1{color:#fff;font-size:clamp(38px,4.6vw,64px);line-height:1;margin:0 0 22px}
.wy-hero .lead{font-size:18px;line-height:1.65;margin:0 0 30px;max-width:560px}
.wy-hero .hero-cta{margin:0}
.wy-art{position:relative}
.wy-pf{width:118%;max-width:none;margin-inline-start:-6%;overflow:visible}
[dir=rtl] .wy-pf{transform:scaleX(-1)}
[dir=rtl] .wy-pf .dt{display:none}
.wy-pf line{stroke-linecap:round}
.wy-pf .gr{stroke:rgba(140,180,255,.14);stroke-width:1;stroke-dasharray:3 5}
.wy-pf .col,.wy-pf .raf{stroke:#cfe0ff;stroke-width:2.4}
.wy-pf .hot{stroke:#ff3b55;stroke-width:3.6;filter:drop-shadow(0 0 8px rgba(255,59,85,.8))}
.wy-pf .pur{stroke:rgba(160,195,255,.45);stroke-width:1}
.wy-pf .br{stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:4 3}
.wy-pf .thin{stroke:rgba(207,224,255,.6);stroke-width:1.2}
.wy-pf .dim{stroke:rgba(255,255,255,.35);stroke-width:1}
.wy-pf .dt{fill:rgba(207,224,255,.6);font:600 12px var(--display);letter-spacing:.14em;text-anchor:middle}
.wy-pf .node{fill:#ff3b55}
.wy-pf .pulse{fill:none;stroke:#ff3b55;stroke-width:1.2;opacity:.55;transform-box:fill-box;transform-origin:center}
.wy-tag{position:absolute;inset-inline-start:calc(var(--tx) * 1.18 - 6%);top:var(--ty);transform:translate(-4%,-130%);background:rgba(6,19,41,.84);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 14px 10px 12px;box-shadow:0 20px 40px rgba(0,0,0,.4);display:flex;gap:10px;align-items:center;white-space:nowrap}
[dir=rtl] .wy-tag{inset-inline-start:auto;inset-inline-end:calc(var(--tx) * 1.18 - 6%);transform:translate(4%,-130%)}
.wy-tag i{width:30px;height:30px;border-radius:8px;background:var(--red);display:grid;place-items:center;color:#fff}
.wy-tag i .ic{width:16px;height:16px}
.wy-tag b{display:block;color:#fff;font:700 14px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase}
.wy-tag span{font-size:12.5px;color:#9fb3d1}
@media (prefers-reduced-motion:no-preference){
  .wy-pf [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:wyDraw 1.4s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:var(--d,0s)}
  .wy-pf .pulse{animation:wyPulse 2.4s ease-out 1.6s infinite}
  .wy-tag{animation:wyTag .6s ease-out 1.6s both}
}
@keyframes wyDraw{to{stroke-dashoffset:0}}
@keyframes wyPulse{from{transform:scale(.5);opacity:.8}to{transform:scale(1.8);opacity:0}}
@keyframes wyTag{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.wy-band{margin-top:30px;border-top:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
.wy-band .wrap{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;padding-block:26px}
.wy-seals{display:flex;gap:12px;list-style:none}
.wy-seals li{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;text-align:center;border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 0 0 5px #050f22,inset 0 0 0 6px rgba(255,255,255,.14);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.1),transparent 60%)}
.wy-seals small{display:block;font:600 9.5px/1.1 var(--display);letter-spacing:.12em;color:#8fa4c4}
.wy-seals b{display:block;font:700 22px/1 var(--display);color:#fff;letter-spacing:.04em;margin-top:3px}
.wy-stats{display:grid;grid-template-columns:repeat(5,1fr);margin:0}
.wy-stats div{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding-inline:18px;border-inline-start:1px solid rgba(255,255,255,.12)}
.wy-stats dd{margin:0;font:700 30px/1 var(--display);color:#fff}
.wy-stats dd::after{content:"";display:block;width:22px;height:2px;background:var(--red);margin:10px 0 8px}
.wy-stats dt{font-size:12.5px;line-height:1.35;color:#8fa4c4}

/* ---------- Shared bits ---------- */
.wy-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--navy);color:#fff;flex:none}
.wy-ic .ic{width:22px;height:22px}
.wy-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font:600 14px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.wy-more .ic{width:16px;height:16px;transition:transform .2s}
a:hover .wy-more .ic{transform:translateX(4px)}
[dir=rtl] a:hover .wy-more .ic{transform:translateX(-4px) scaleX(-1)}

/* ---------- Origin story + flow ---------- */
.wy-story-g{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:start}
.wy-story h2{font-size:clamp(34px,4.2vw,50px);line-height:1.04;margin-bottom:22px}
.wy-story p{font-size:17px;color:var(--text)}
.wy-quote{margin:30px 0 0;padding:26px 28px;border-inline-start:3px solid var(--red);background:var(--bg);border-radius:0 16px 16px 0}
[dir=rtl] .wy-quote{border-radius:16px 0 0 16px}
.wy-quote>.ic{width:28px;height:28px;color:var(--red);margin-bottom:10px}
.wy-quote blockquote{margin:0 0 12px;font:600 21px/1.4 var(--font);color:var(--ink)}
.wy-quote figcaption{font:600 13px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wy-flow{position:relative;background:linear-gradient(160deg,var(--navy-9),var(--navy));border-radius:24px;padding:34px 34px 30px;color:#b8c8e0;box-shadow:var(--sh-3);overflow:hidden;isolation:isolate}
.wy-flow::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(140,180,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(140,180,255,.05) 1px,transparent 1px);background-size:32px 32px}
.wy-flow h3{color:#fff;font:700 24px/1.15 var(--display);letter-spacing:.04em;text-transform:uppercase;margin-bottom:24px}
.wy-flow ol{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.wy-flow ol::before{content:"";position:absolute;inset-inline-start:22px;top:24px;bottom:24px;width:2px;background:linear-gradient(180deg,var(--red),rgba(255,255,255,.16))}
.wy-flow li{position:relative;display:flex;gap:18px;align-items:flex-start;padding:12px 0}
.wy-flow li>i{width:46px;height:46px;border-radius:50%;background:#0b1f3a;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#fff;flex:none}
.wy-flow li:first-child>i{background:var(--red);border-color:var(--red);box-shadow:0 0 0 6px rgba(200,16,46,.18)}
.wy-flow li em{display:block;font:600 11px var(--display);letter-spacing:.16em;color:#ff6b80;font-style:normal}
.wy-flow li b{display:block;color:#fff;font:700 18px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;margin:2px 0 4px}
.wy-flow li span{font-size:14.5px;line-height:1.5}

/* ---------- Reasons bento ---------- */
.wy-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wy-b{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 24px;box-shadow:var(--sh-1);overflow:hidden;transition:transform .25s,box-shadow .25s}
.wy-b:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.wy-b-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.wy-b-h em{font:700 34px/1 var(--display);font-style:normal;color:transparent;-webkit-text-stroke:1px #c7d1df}
.wy-b h3{font:700 21px/1.15 var(--display);letter-spacing:.02em;margin-bottom:10px}
.wy-b p{font-size:15px;line-height:1.6;color:var(--muted);margin:0}
.wy-b:nth-child(3n) .wy-ic{background:var(--red)}
.wy-b1{grid-column:span 2;grid-row:span 2;background:linear-gradient(160deg,var(--navy-9),var(--navy-8));border:0;color:#b8c8e0}
.wy-b1 h3{color:#fff;font-size:clamp(26px,2.6vw,34px)}
.wy-b1 p{color:#b8c8e0;font-size:16.5px;max-width:520px}
.wy-b1 .wy-b-h em,.wy-b6 .wy-b-h em{-webkit-text-stroke-color:rgba(255,255,255,.3)}
.wy-b1 .wy-ic{background:var(--red)}
.wy-b-shot{margin:24px -26px -24px;margin-inline-start:26px;flex:1;min-height:120px;position:relative}
.wy-b-shot img{position:absolute;top:0;inset-inline-start:0;width:100%;max-width:none;height:auto;min-height:100%;object-fit:cover;object-position:left top;border-radius:12px 0 0 0;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
[dir=rtl] .wy-b-shot img{border-radius:0 12px 0 0}
.wy-b6{grid-column:span 2;background:linear-gradient(160deg,#a50d25,var(--red));border:0;color:#ffe4e9}
.wy-b6 h3{color:#fff}.wy-b6 p{color:#ffe4e9}
.wy-b6 .wy-ic{background:rgba(255,255,255,.16)!important}
.wy-b6 .wy-b-shot{display:none}
.wy-b8{background:var(--navy);border:0}
.wy-b8 h3{color:#fff}.wy-b8 p{color:#a9bbd6}
.wy-b8 .wy-b-h em{-webkit-text-stroke-color:rgba(255,255,255,.3)}
.wy-b8 .wy-ic{background:rgba(255,255,255,.12)}

/* ---------- Before / after ---------- */
.wy-cmp-t{max-width:1040px;margin:0 auto;display:grid;gap:10px}
.wy-cmp-r{display:grid;grid-template-columns:1fr 56px 1.15fr;align-items:stretch}
.wy-cmp-hd span{font:600 13px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 22px 6px}
.wy-cmp-hd span:last-child{color:var(--red)}
.wy-old,.wy-new{display:flex;align-items:center;gap:12px;padding:18px 22px;border-radius:14px;font-size:15.5px;line-height:1.45}
.wy-old{background:var(--bg);color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(93,109,133,.45)}
.wy-old .ic{color:#9aa6b8;width:18px;height:18px}
.wy-new{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);color:var(--ink);font-weight:600;border-inline-start:3px solid var(--red)}
.wy-new .ic{color:var(--ok)}
.wy-arr{display:grid;place-items:center;color:var(--red)}

/* ---------- Highlights (dark, numbered) ---------- */
.wy-hl{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(900px 500px at 50% -10%,rgba(200,16,46,.22),transparent 65%),linear-gradient(180deg,var(--navy-9),var(--navy));color:#c4d2e8}
.wy-hl h2{color:#fff}
.wy-hl .eyebrow{color:#ff6b80}
.wy-hl-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.12);border-inline-start:1px solid rgba(255,255,255,.12)}
.wy-hl-g li{padding:30px 26px 34px;border-inline-end:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);transition:background .25s}
.wy-hl-g li:hover{background:rgba(255,255,255,.04)}
.wy-hl-g em{display:block;font:700 42px/1 var(--display);font-style:normal;color:transparent;-webkit-text-stroke:1px #ff6b80;margin-bottom:18px}
.wy-hl-g span{font-size:15.5px;line-height:1.55;color:#dbe5f3}

/* ---------- Standards wall ---------- */
.wy-std-g{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wy-std-g li{display:flex;flex-direction:column;gap:8px;padding:24px 22px;border:1px solid var(--line);border-radius:16px;background:#fff;position:relative;overflow:hidden}
.wy-std-g li::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:90px;height:90px;border-radius:50%;border:14px solid var(--line-2)}
.wy-std-g li>.ic{color:var(--red);width:24px;height:24px}
.wy-std-g b{font:700 19px/1.2 var(--display);letter-spacing:.04em;color:var(--ink)}
.wy-std-g span{font-size:14px;line-height:1.5;color:var(--muted)}

/* ---------- Audiences + deployment ---------- */
.wy-aud-g,.wy-dep-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wy-aud-c,.wy-dep-c{display:flex;flex-direction:column;gap:12px;padding:30px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);color:var(--text);transition:transform .25s,box-shadow .25s,border-color .25s}
a.wy-aud-c:hover,a.wy-dep-c:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:rgba(200,16,46,.35);color:var(--text)}
.wy-aud-c h3,.wy-dep-c h3{font:700 22px/1.15 var(--display);letter-spacing:.02em;margin:6px 0 0}
.wy-aud-c p,.wy-dep-c p{margin:0 0 6px;color:var(--muted);font-size:15.5px}
.wy-dep-glob{background:linear-gradient(160deg,var(--navy-9),var(--navy-7));border:0;color:#b8c8e0}
.wy-dep-glob h3{color:#fff}.wy-dep-glob p{color:#b8c8e0}
.wy-dep-glob .wy-ic{background:var(--red)}
.wy-dep-glob .wy-more{color:#ff8798}
a.wy-dep-glob:hover{color:#b8c8e0}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .wy-band .wrap{grid-template-columns:1fr;gap:24px}
  .wy-bento{grid-template-columns:repeat(2,1fr)}
  .wy-b1{grid-row:auto}
  .wy-b-shot{min-height:220px}
  .wy-hl-g,.wy-std-g{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .wy-hero{padding-top:28px}
  .wy-hero-g{grid-template-columns:1fr}
  .wy-art{order:-1;margin:-6px -14px 0}
  .wy-pf{width:112%}
  .wy-tag{transform:translate(-30%,-125%) scale(.88)}
  [dir=rtl] .wy-tag{transform:translate(30%,-125%) scale(.88)}
  .wy-seals{justify-content:space-between}
  .wy-seals li{width:96px;height:96px}
  .wy-stats{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .wy-stats div:last-child{grid-column:span 2}
  .wy-story-g{grid-template-columns:1fr;gap:40px}
  .wy-aud-g,.wy-dep-g{grid-template-columns:1fr}
  .wy-cmp-r{grid-template-columns:1fr;gap:6px}
  .wy-cmp-hd{display:none}
  .wy-arr{transform:rotate(90deg);height:22px}
  [dir=rtl] .wy-arr{transform:rotate(-90deg)}
  .wy-cmp-t{gap:22px}
}
@media (max-width:600px){
  .wy-bento,.wy-hl-g,.wy-std-g{grid-template-columns:1fr}
  .wy-b1,.wy-b6,.wy-b8{grid-column:auto}
  .wy-flow{padding:26px 22px}
  .wy-quote blockquote{font-size:18px}
}
@media (max-width:600px){
  .wy-b-shot{flex:none;height:210px}
  .wy-hl-g li{display:flex;gap:16px;align-items:flex-start;padding:20px 18px}
  .wy-hl-g em{font-size:30px;margin:0;min-width:42px}
  .wy-std-g li{padding:18px 18px}
  .wy-std-g li::after{display:none}
}