/* =====================================================================
   Shared page kit — Phoenix Bulk
   Hero bands, section headers, feature tiles, media cards, contact blocks.
   Used by product.php, other-services.php, learn-more.php, contact.php
   ===================================================================== */

:root{
    --pb-navy:#233f87;
    --pb-navy-2:#2b51b3;
    --pb-ink:#16224a;
    --pb-body:#5a6377;
    --pb-line:#e6e9f0;
    --pb-panel:#f4f6fa;
    --pb-ground:#fbfcfd;
    --pb-accent:#47aef1;
    --pb-gold:#ffbf00;
    --pb-radius:14px;
}

/* ---------- hero band ---------- */
.pb-hero{
    position:relative; overflow:hidden;
    background-position:center center; background-size:cover;
}
.pb-hero::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(105deg, rgba(19,32,74,.90) 0%, rgba(35,63,135,.78) 45%, rgba(43,81,179,.62) 100%);
}
.pb-hero__inner{
    position:relative; z-index:1;
    padding:52px 0 50px; text-align:center;
}
.pb-hero__eyebrow{
    font-family:'Prompt',sans-serif; font-size:12px; font-weight:500;
    letter-spacing:.22em; text-transform:uppercase; color:var(--pb-gold);
    margin:0 0 10px;
}
.pb-hero__headline{
    font-family:'Prompt',sans-serif; font-weight:600;
    font-size:clamp(26px,4.4vw,40px); line-height:1.22; letter-spacing:-.01em;
    color:#fff; margin:0;
}
.pb-hero__sub{
    font-family:'Prompt',sans-serif !important; color:rgba(255,255,255,.86) !important;
    font-size:16px !important; line-height:1.7 !important;
    max-width:60ch; margin:12px auto 0 !important;
}
.pb-hero__rule{
    width:56px; height:3px; border-radius:2px; background:var(--pb-gold);
    margin:20px auto 0;
}
@media (max-width:575px){
    .pb-hero__inner{ padding:40px 0 38px; }
}

/* ---------- section shells ---------- */
.pb-band{ background:var(--pb-ground); }
.pb-band--white{ background:#fff; }

.pb-sechead{ max-width:70ch; margin:0 0 28px; }
.pb-sechead--center{ margin-left:auto; margin-right:auto; text-align:center; }
.pb-sechead__eyebrow{
    font-family:'Prompt',sans-serif !important; font-size:12px; font-weight:500;
    letter-spacing:.2em; text-transform:uppercase; color:var(--pb-accent) !important;
    margin:0 0 8px !important;
}
.pb-sechead h2{
    font-family:'Prompt',sans-serif; font-weight:600; color:var(--pb-ink);
    font-size:clamp(22px,3vw,30px); line-height:1.28; margin:0;
}
.pb-sechead__lead{
    font-family:'Prompt',sans-serif !important; color:var(--pb-body) !important;
    font-size:16px !important; line-height:1.8 !important; margin:12px 0 0 !important;
}

/* ---------- prose block ---------- */
.pb-prose{ max-width:72ch; }
.pb-prose p{
    font-family:'Prompt',sans-serif !important; color:var(--pb-body) !important;
    font-size:16px !important; line-height:1.85 !important;
}
.pb-prose p + p{ margin-top:14px !important; }

/* ---------- feature tiles (icon + label) ---------- */
.pb-features{
    display:grid; gap:16px; list-style:none; margin:0; padding:0;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.pb-feature{
    display:flex; flex-direction:column; align-items:flex-start; gap:14px;
    background:#fff; border:1px solid var(--pb-line); border-radius:var(--pb-radius);
    padding:24px 22px; height:100%;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pb-feature:hover{
    transform:translateY(-3px); border-color:#d3dced;
    box-shadow:0 14px 30px -20px rgba(22,34,74,.45);
}
.pb-feature__icon{
    width:54px; height:54px; border-radius:16px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--pb-navy) 0%, var(--pb-navy-2) 100%);
    color:#fff; font-size:22px;
    box-shadow:0 8px 18px -10px rgba(35,63,135,.75);
}
.pb-feature__title{
    font-family:'Prompt',sans-serif; font-weight:600; font-size:17px; line-height:1.35;
    color:var(--pb-ink); margin:0;
}
.pb-feature__text{
    font-family:'Prompt',sans-serif !important; color:var(--pb-body) !important;
    font-size:14.5px !important; line-height:1.7 !important; margin:0 !important;
}

/* ---------- media cards (image + caption) ---------- */
.pb-media{
    display:grid; gap:18px; list-style:none; margin:0; padding:0;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.pb-mediacard{
    display:flex; flex-direction:column; height:100%; overflow:hidden;
    background:#fff; border:1px solid var(--pb-line); border-radius:var(--pb-radius);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pb-mediacard:hover{
    transform:translateY(-4px); border-color:#d3dced;
    box-shadow:0 16px 34px -20px rgba(22,34,74,.5);
}
.pb-mediacard__media{
    position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--pb-panel);
}
.pb-mediacard__media img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .45s ease;
}
.pb-mediacard:hover .pb-mediacard__media img{ transform:scale(1.06); }
.pb-mediacard__body{
    padding:16px 17px; display:flex; align-items:flex-start; gap:10px; flex:1 1 auto;
}
.pb-mediacard__tick{ color:var(--pb-accent); font-size:13px; margin-top:5px; flex:none; }
.pb-mediacard__title{
    font-family:'Prompt',sans-serif; font-weight:500; font-size:15.5px; line-height:1.5;
    color:var(--pb-ink); margin:0;
}

/* ---------- contact ---------- */
.pb-contact{
    display:grid; gap:24px;
    grid-template-columns:1fr;
}
@media (min-width:992px){
    .pb-contact{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px; align-items:start; }
}
.pb-panel{
    background:#fff; border:1px solid var(--pb-line); border-radius:var(--pb-radius);
    padding:26px 24px;
}
.pb-panel__title{
    font-family:'Prompt',sans-serif; font-weight:600; font-size:19px; color:var(--pb-ink);
    margin:0 0 4px;
}
.pb-panel__note{
    font-family:'Prompt',sans-serif !important; color:var(--pb-body) !important;
    font-size:14.5px !important; line-height:1.7 !important; margin:0 0 18px !important;
}

.pb-contactlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.pb-contactlist li{
    display:flex; align-items:flex-start; gap:14px;
    padding:14px 0; border-bottom:1px solid var(--pb-line);
}
.pb-contactlist li:first-child{ padding-top:0; }
.pb-contactlist li:last-child{ border-bottom:0; padding-bottom:0; }
.pb-contactlist__icon{
    width:40px; height:40px; border-radius:12px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--pb-panel); color:var(--pb-navy-2); font-size:15px;
}
.pb-contactlist__label{
    font-family:'Prompt',sans-serif; font-size:12px; font-weight:500;
    letter-spacing:.12em; text-transform:uppercase; color:#8d96a8;
    display:block; margin-bottom:1px;
}
.pb-contactlist__value{
    font-family:'Prompt',sans-serif; font-size:16.5px; font-weight:500;
    color:var(--pb-ink); line-height:1.45; word-break:break-word;
}
a.pb-contactlist__value{ text-decoration:none; }
a.pb-contactlist__value:hover{ color:var(--pb-navy-2); text-decoration:underline; }

/* ---------- quick action buttons ---------- */
.pb-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.pb-action{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Prompt',sans-serif; font-size:15px; font-weight:500;
    padding:11px 20px; border-radius:999px; text-decoration:none;
    border:1px solid transparent; transition:all .2s ease;
}
.pb-action--call{ background:linear-gradient(120deg,var(--pb-navy) 0%,var(--pb-navy-2) 100%); color:#fff; }
.pb-action--call:hover{ color:#fff; box-shadow:0 10px 22px -12px rgba(35,63,135,.9); transform:translateY(-1px); }
.pb-action--line{ background:#06C755; color:#fff; }
.pb-action--line:hover{ color:#fff; box-shadow:0 10px 22px -12px rgba(6,199,85,.9); transform:translateY(-1px); }
.pb-action--ghost{ background:#fff; color:var(--pb-navy-2); border-color:var(--pb-line); }
.pb-action--ghost:hover{ border-color:var(--pb-navy-2); color:var(--pb-navy-2); transform:translateY(-1px); }

/* ---------- CTA band ---------- */
.pb-cta{
    background:linear-gradient(115deg, #16224a 0%, var(--pb-navy) 55%, var(--pb-navy-2) 100%);
    border-radius:var(--pb-radius); padding:34px 30px; text-align:center;
}
.pb-cta h2{
    font-family:'Prompt',sans-serif; font-weight:600; color:#fff;
    font-size:clamp(20px,2.6vw,26px); line-height:1.35; margin:0;
}
.pb-cta p{
    font-family:'Prompt',sans-serif !important; color:rgba(255,255,255,.82) !important;
    font-size:15.5px !important; line-height:1.7 !important; margin:10px 0 0 !important;
}
.pb-cta .pb-actions{ justify-content:center; margin-top:22px; }
.pb-cta .pb-action--ghost{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.32); }
.pb-cta .pb-action--ghost:hover{ background:rgba(255,255,255,.18); color:#fff; border-color:#fff; }

/* ---------- form inside a panel ---------- */
.pb-field{ margin-bottom:14px; }
.pb-field label{
    font-family:'Prompt',sans-serif; font-size:13px; font-weight:500;
    letter-spacing:.08em; text-transform:uppercase; color:#778091;
    display:block; margin-bottom:6px;
}
.pb-field .form-control{
    border:1px solid var(--pb-line); border-radius:10px; background:#fff;
    font-family:'Prompt',sans-serif; font-size:15px; color:var(--pb-ink);
    padding:11px 14px; height:auto; box-shadow:none;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.pb-field textarea.form-control{ min-height:120px; resize:vertical; }
.pb-field .form-control:focus{
    border-color:var(--pb-accent); box-shadow:0 0 0 4px rgba(71,174,241,.16); outline:none;
}
.pb-submit{
    display:inline-flex; align-items:center; gap:8px; width:100%; justify-content:center;
    font-family:'Prompt',sans-serif; font-size:16px; font-weight:500;
    padding:13px 26px; border-radius:999px; border:0; cursor:pointer;
    background:linear-gradient(120deg,var(--pb-navy) 0%,var(--pb-navy-2) 100%); color:#fff;
    transition:box-shadow .2s ease, transform .2s ease;
}
.pb-submit:hover{ box-shadow:0 12px 26px -14px rgba(35,63,135,.95); transform:translateY(-1px); }

.pb-alert{
    display:flex; gap:11px; align-items:flex-start;
    border-radius:10px; padding:13px 15px; margin-bottom:18px;
    font-family:'Prompt',sans-serif; font-size:14.5px; line-height:1.6;
}
.pb-alert i{ margin-top:3px; flex:none; }
.pb-alert--ok{ background:#e8f6ee; color:#1c6b41; border:1px solid #bfe4cf; }
.pb-alert--err{ background:#fdeceb; color:#9c2318; border:1px solid #f4c9c5; }

@media (prefers-reduced-motion:reduce){
    .pb-feature, .pb-mediacard, .pb-mediacard__media img, .pb-action, .pb-submit{ transition:none !important; }
    .pb-feature:hover, .pb-mediacard:hover, .pb-action:hover, .pb-submit:hover{ transform:none; }
    .pb-mediacard:hover .pb-mediacard__media img{ transform:none; }
}

/* =====================================================================
   Floating contact button (widget-fab.php)
   ===================================================================== */
.pb-fab{
    position:fixed; right:18px; bottom:18px; z-index:1030;
    display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}

.pb-fab__menu{
    display:flex; flex-direction:column; align-items:flex-end; gap:10px;
    pointer-events:none;
}
.pb-fab__item{
    display:inline-flex; align-items:center; gap:10px;
    text-decoration:none; pointer-events:none;
    opacity:0; transform:translateY(10px) scale(.94);
    transition:opacity .22s ease, transform .22s ease;
    transition-delay:0s;
}
.pb-fab.is-open .pb-fab__item{
    opacity:1; transform:none; pointer-events:auto;
    transition-delay:calc(var(--i,1) * 40ms - 40ms);
}
.pb-fab__item:hover{ text-decoration:none; }

.pb-fab__label{
    font-family:'Prompt',sans-serif; font-size:14px; font-weight:500; line-height:1;
    color:#16224a; background:#fff; white-space:nowrap;
    padding:9px 14px; border-radius:999px;
    border:1px solid rgba(22,34,74,.08);
    box-shadow:0 6px 18px -8px rgba(22,34,74,.45);
}
.pb-fab__dot{
    width:46px; height:46px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:19px;
    box-shadow:0 8px 20px -8px rgba(22,34,74,.6);
    transition:transform .2s ease;
}
.pb-fab__item:hover .pb-fab__dot,
.pb-fab__item:focus-visible .pb-fab__dot{ transform:scale(1.08); }
.pb-fab__item:focus-visible{ outline:none; }
.pb-fab__item:focus-visible .pb-fab__label{ outline:3px solid #47aef1; outline-offset:2px; }

.pb-fab__item--line .pb-fab__dot{ background:#06C755; }
.pb-fab__item--msg  .pb-fab__dot{ background:linear-gradient(135deg,#00B2FF 0%,#006AFF 60%,#A033FF 100%); }
.pb-fab__item--call .pb-fab__dot{ background:linear-gradient(135deg,#233f87 0%,#2b51b3 100%); }
.pb-fab__item--mail .pb-fab__dot{ background:#5a6377; }

.pb-fab__main{
    width:58px; height:58px; border-radius:50%; border:0; cursor:pointer; padding:0;
    position:relative; align-self:flex-end;
    background:linear-gradient(135deg,#233f87 0%,#2b51b3 100%); color:#fff;
    box-shadow:0 10px 26px -8px rgba(35,63,135,.85);
    transition:transform .25s ease, box-shadow .25s ease;
}
.pb-fab__main:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(35,63,135,.95); }
.pb-fab__main:focus-visible{ outline:3px solid #ffbf00; outline-offset:3px; }
.pb-fab__main::after{
    /* soft pulse so the button is noticed without shouting */
    content:''; position:absolute; inset:0; border-radius:50%;
    box-shadow:0 0 0 0 rgba(43,81,179,.45);
    animation:pbFabPulse 2.8s ease-out infinite;
}
.pb-fab.is-open .pb-fab__main::after{ animation:none; }
@keyframes pbFabPulse{
    0%   { box-shadow:0 0 0 0 rgba(43,81,179,.45); }
    70%  { box-shadow:0 0 0 16px rgba(43,81,179,0); }
    100% { box-shadow:0 0 0 0 rgba(43,81,179,0); }
}

.pb-fab__icon{
    position:absolute; top:50%; left:50%; font-size:22px;
    transition:opacity .2s ease, transform .25s ease;
}
.pb-fab__icon--open { transform:translate(-50%,-50%) rotate(0deg);   opacity:1; }
.pb-fab__icon--close{ transform:translate(-50%,-50%) rotate(-90deg); opacity:0; }
.pb-fab.is-open .pb-fab__icon--open { transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.pb-fab.is-open .pb-fab__icon--close{ transform:translate(-50%,-50%) rotate(0deg);  opacity:1; }

@media (max-width:575px){
    .pb-fab{ right:14px; bottom:14px; }
    .pb-fab__main{ width:54px; height:54px; }
    .pb-fab__dot{ width:42px; height:42px; font-size:17px; }
    .pb-fab__label{ font-size:13px; padding:8px 12px; }
}

@media (prefers-reduced-motion:reduce){
    .pb-fab__item, .pb-fab__dot, .pb-fab__main, .pb-fab__icon{ transition:none !important; }
    .pb-fab__main::after{ animation:none !important; }
}

/* =====================================================================
   Home page
   ===================================================================== */

/* ---------- hero ---------- */
.pb-home-hero{
    position:relative; overflow:hidden;
    background-position:center center; background-size:cover;
}
.pb-home-hero::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(100deg, rgba(12,22,52,.94) 0%, rgba(24,44,102,.86) 38%, rgba(35,63,135,.55) 72%, rgba(43,81,179,.28) 100%);
}
.pb-home-hero__inner{ position:relative; z-index:1; padding:104px 0 92px; }
.pb-home-hero__copy{ max-width:62ch; }
.pb-home-hero__eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Prompt',sans-serif !important; font-size:12px; font-weight:500;
    letter-spacing:.2em; text-transform:uppercase; color:var(--pb-gold) !important;
    margin:0 0 14px !important;
}
.pb-home-hero__eyebrow::before{
    content:''; width:26px; height:2px; background:var(--pb-gold); border-radius:2px;
}
.pb-home-hero h1{
    font-family:'Prompt',sans-serif !important; font-weight:600 !important;
    font-size:clamp(30px,5vw,52px) !important; line-height:1.16 !important;
    letter-spacing:-.015em; color:#fff !important; margin:0 !important;
    text-wrap:balance;
}
.pb-home-hero h1 em{ font-style:normal; color:var(--pb-gold); }
.pb-home-hero__sub{
    font-family:'Prompt',sans-serif !important; font-weight:300 !important;
    color:rgba(255,255,255,.88) !important;
    font-size:clamp(16px,1.8vw,19px) !important; line-height:1.75 !important;
    margin:18px 0 0 !important; max-width:56ch;
}
.pb-home-hero .pb-actions{ margin-top:28px; }
.pb-home-hero .pb-action{ font-size:16px; padding:13px 26px; }
.pb-home-hero .pb-action--gold{ background:var(--pb-gold); color:#16224a; }
.pb-home-hero .pb-action--gold:hover{ color:#16224a; box-shadow:0 12px 26px -12px rgba(255,191,0,.9); transform:translateY(-1px); }
.pb-home-hero .pb-action--ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.38); }
.pb-home-hero .pb-action--ghost:hover{ background:rgba(255,255,255,.16); color:#fff; border-color:#fff; }

/* trust strip under the hero copy */
.pb-trust{
    display:flex; flex-wrap:wrap; gap:12px 34px; margin:36px 0 0; padding:24px 0 0;
    list-style:none; border-top:1px solid rgba(255,255,255,.18);
}
.pb-trust li{
    display:flex; align-items:center; gap:10px;
    font-family:'Prompt',sans-serif; font-size:15px; color:rgba(255,255,255,.9);
}
.pb-trust i{ color:var(--pb-gold); font-size:15px; }

@media (max-width:767px){
    .pb-home-hero__inner{ padding:66px 0 58px; }
    .pb-trust{ gap:10px 22px; margin-top:28px; padding-top:20px; }
    .pb-trust li{ font-size:14px; }
}

/* ---------- comparison table ---------- */
.pb-compare{
    background:#fff; border:1px solid var(--pb-line); border-radius:var(--pb-radius);
    overflow:hidden;
}
.pb-compare__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pb-compare table{
    width:100%; min-width:760px; border-collapse:separate; border-spacing:0;
    font-family:'Prompt',sans-serif; margin:0;
}
.pb-compare th, .pb-compare td{
    padding:14px 16px; text-align:center; vertical-align:middle;
    border-bottom:1px solid var(--pb-line); font-size:14.5px; color:var(--pb-ink);
    background:#fff;
}
.pb-compare tbody tr:last-child th,
.pb-compare tbody tr:last-child td{ border-bottom:0; }

.pb-compare thead th{
    background:linear-gradient(135deg,var(--pb-navy) 0%,var(--pb-navy-2) 100%);
    color:#fff; font-weight:600; font-size:16px; letter-spacing:.01em;
    border-bottom:0; padding:16px;
}
.pb-compare thead th:first-child{
    background:#16224a; text-align:left; font-size:13px; font-weight:500;
    letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
/* row label column stays put while the rest scrolls */
.pb-compare th[scope="row"], .pb-compare thead th:first-child{
    position:sticky; left:0; z-index:2; text-align:left;
}
.pb-compare th[scope="row"]{
    background:var(--pb-panel); font-weight:500; font-size:13px;
    letter-spacing:.1em; text-transform:uppercase; color:#6d7688;
    min-width:150px; box-shadow:1px 0 0 var(--pb-line);
}
.pb-compare tbody tr:nth-child(even) td{ background:#fcfdfe; }

.pb-compare__price{
    font-size:20px; font-weight:600; letter-spacing:-.01em;
    font-variant-numeric:tabular-nums; color:var(--pb-ink); display:block;
}
.pb-compare__price .cur{ font-size:13px; font-weight:400; color:var(--pb-body); margin-right:2px; }
.pb-compare__badge{
    display:inline-block; margin-top:6px;
    font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
    color:#8a5a00; background:#fff3d1; border:1px solid #ffe09a;
    padding:2px 9px; border-radius:999px;
}
.pb-compare__spec{ display:block; line-height:1.6; color:var(--pb-body); }
.pb-compare__spec strong{ color:var(--pb-ink); font-weight:500; }
.pb-compare__link{
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
    font-size:14px; font-weight:500; color:var(--pb-navy-2); text-decoration:none;
    padding:7px 14px; border:1px solid var(--pb-line); border-radius:999px;
    transition:all .2s ease;
}
.pb-compare__link:hover{
    color:#fff; background:linear-gradient(120deg,var(--pb-navy) 0%,var(--pb-navy-2) 100%);
    border-color:transparent; text-decoration:none;
}
.pb-compare__hint{
    display:none; font-family:'Prompt',sans-serif; font-size:13px; color:#8d96a8;
    margin:10px 0 0; text-align:center;
}
@media (max-width:820px){ .pb-compare__hint{ display:block; } }

@media (prefers-reduced-motion:reduce){
    .pb-home-hero .pb-action, .pb-compare__link{ transition:none !important; }
    .pb-home-hero .pb-action:hover{ transform:none; }
}