/* ============================================================
   PIONEER — COMPONENTS v4  (shared inner pages)
   Burgundy titles, fixed padding, correct product card layout
   ============================================================ */

/* ── PAGE HERO (inner pages) ── */
.page-hero{position:relative;min-height:240px;display:flex;align-items:flex-end;overflow:hidden;}
.page-hero .hero-bg{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.78) 40%,rgba(0,0,0,.35));z-index:1;}
.page-hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.page-hero .hero-content{position:relative;z-index:2;color:var(--white);padding:var(--sp-10) 0;width:100%;}
.page-hero h1{font-size:clamp(22px,4vw,38px);font-weight:var(--w-black);text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px;}
.page-hero p{font-size:var(--text-base);color:rgba(255,255,255,.85);max-width:600px;}

/* ── INNER PAGE LAYOUT CONTAINER ── */
.inner-page-section{padding:var(--sp-16) 0;}
.inner-page-section .wrap{max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-6);}

/* ── SECTION TITLES ── */
.section-head-split{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--sp-8);flex-wrap:wrap;gap:var(--sp-4);}
.section-head-split h2{font-size:clamp(20px,2.5vw,28px);font-weight:var(--w-bold);color:var(--burgundy);}
.section-head-center{text-align:center;margin-bottom:var(--sp-8);}
.section-head-center h2{font-size:clamp(20px,2.5vw,28px);font-weight:var(--w-bold);color:var(--burgundy);margin-bottom:var(--sp-2);}
.section-head-center p{font-size:var(--text-base);color:var(--grey-600);max-width:620px;margin:0 auto;}

/* ── PRODUCT CARDS (3-col grid, correct layout) ── */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);}
.img-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--ease),transform var(--ease);}
.img-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.img-card .card-img{height:200px;overflow:hidden;flex-shrink:0;}
.img-card .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.img-card:hover .card-img img{transform:scale(1.04);}
.img-card .card-body{padding:var(--sp-5);flex:1;display:flex;flex-direction:column;}
.img-card .card-tag{font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--red);margin-bottom:6px;}
.img-card h4{font-size:17px;font-weight:var(--w-bold);color:var(--black);margin-bottom:8px;}
.img-card p{font-size:var(--text-sm);color:var(--grey-600);flex:1;margin-bottom:var(--sp-4);line-height:1.6;}
.img-card .btn{width:100%;justify-content:center;border-radius:var(--radius-sm);}

/* News cards */
.news-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--ease),transform var(--ease);}
.news-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.news-card .card-img{height:220px;overflow:hidden;}
.news-card .card-img img{width:100%;height:100%;object-fit:cover;}
.news-card .card-body{padding:var(--sp-5);flex:1;display:flex;flex-direction:column;}
.news-card h4{font-size:17px;font-weight:var(--w-bold);color:var(--red);margin-bottom:var(--sp-2);}
.news-card .excerpt{font-size:var(--text-sm);color:var(--grey-600);flex:1;margin-bottom:var(--sp-3);line-height:1.6;}
.news-card .meta{display:flex;justify-content:space-between;font-size:12px;color:var(--grey-400);margin-bottom:var(--sp-4);}
.news-card .btn{width:100%;justify-content:center;border-radius:var(--radius-sm);}

/* ── PILL TABS (dark pill: board, mgmt tabs) ── */




.tab-pane{display:none;}
.tab-pane.active{display:block;}

/* ── TEAM CARDS ── */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);}
.team-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);overflow:hidden;}
.team-card .photo{aspect-ratio:1/1;background:var(--grey-100);overflow:hidden;}
.team-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center;}
.team-card .info{padding:var(--sp-3) var(--sp-3) 0;}
.team-card .name{font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--burgundy);text-transform:uppercase;letter-spacing:.02em;margin-bottom:2px;}
.team-card .role{font-size:11px;color:var(--grey-600);text-transform:uppercase;letter-spacing:.03em;margin-bottom:var(--sp-3);}
.team-card .view-btn{margin:0 var(--sp-3) var(--sp-3);width:calc(100% - 24px);display:flex;justify-content:center;}

/* Profile expanded */
.profile-expanded{display:none;margin-bottom:var(--sp-5);}
.profile-expanded.open{display:grid;grid-template-columns:260px 1fr;border:1px solid var(--grey-200);border-radius:var(--radius-lg);overflow:hidden;background:var(--white);}
.profile-expanded .profile-photo{aspect-ratio:1/1;}
.profile-expanded .profile-photo img{width:100%;height:100%;object-fit:cover;object-position:center;}
.profile-expanded .profile-body{padding:var(--sp-8);}
.p-name{font-size:clamp(18px,2.5vw,26px);font-weight:var(--w-black);color:var(--burgundy);margin-bottom:4px;}
.p-role{font-size:var(--text-sm);font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:.03em;color:var(--black);margin-bottom:var(--sp-5);}
.p-bio{font-size:var(--text-sm);color:var(--grey-600);line-height:1.8;}

/* ── ABOUT / STORY ── */
.story-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--sp-12);align-items:center;}
.story-img{border-radius:var(--radius-lg);overflow:hidden;}
.story-img img{width:100%;display:block;}
.sub-head{color:var(--red);font-size:clamp(18px,2.5vw,24px);font-weight:var(--w-bold);margin-bottom:var(--sp-4);}
.story-body p{font-size:var(--text-sm);color:var(--grey-600);line-height:1.8;margin-bottom:var(--sp-4);}
.mvv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);}
.mvv-card{border:1px solid var(--grey-200);border-radius:var(--radius);overflow:hidden;}
.mvv-card .ci{aspect-ratio:3/2;}
.mvv-card .ci img{width:100%;height:100%;object-fit:cover;}
.mvv-card .cb{padding:var(--sp-5);}
.mvv-card .cb h4{color:var(--red);font-weight:var(--w-bold);margin-bottom:var(--sp-2);}
.mvv-card .cb p{font-size:var(--text-sm);color:var(--grey-600);}

/* Leadership CTA */
.leadership-cta{border:1px solid var(--grey-200);border-radius:var(--radius-xl);display:grid;grid-template-columns:1fr 1.5fr;overflow:hidden;}
.leadership-cta .lc-img{aspect-ratio:4/3;align-self:center;}
.leadership-cta .lc-img img{width:100%;height:100%;object-fit:cover;}
.leadership-cta .lc-body{padding:var(--sp-10) var(--sp-12);display:flex;flex-direction:column;justify-content:center;}
.leadership-cta .lc-body h3{color:var(--burgundy);font-size:clamp(18px,2.2vw,24px);font-weight:var(--w-bold);margin-bottom:var(--sp-4);}
.leadership-cta .lc-body p{font-size:var(--text-sm);color:var(--grey-600);margin-bottom:var(--sp-6);line-height:1.8;}
.lc-buttons{display:flex;gap:var(--sp-3);flex-wrap:wrap;}

/* Glance (inner pages version — no bg) */
.glance-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);}
.glance-card{background:var(--white);border-radius:var(--radius-lg);padding:var(--sp-8) var(--sp-5);text-align:center;box-shadow:var(--shadow-xs);}
.glance-icon{width:52px;height:52px;margin:0 auto var(--sp-4);}
.glance-icon svg{width:100%;height:100%;}
.glance-value{font-size:clamp(18px,2.5vw,24px);font-weight:var(--w-black);color:var(--burgundy);margin-bottom:4px;}
.glance-label{font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--black);}

/* Awards section (inner page version — same as home) */


.awards-header h2{font-size:clamp(20px,2.5vw,26px);font-weight:var(--w-bold);color:var(--black);}









.laurel.left{transform:scaleX(-1);}


/* ── BRANCH LOCATOR ── */
.branch-layout{display:grid;grid-template-columns:320px 1fr;gap:var(--sp-6);}
.branch-select-wrap{margin-bottom:var(--sp-4);}
/* FIX (v10 #4): a plain <select> alone doesn't signal "pick your branch
   here" — add a small label above it wherever the branch dropdown appears. */
.branch-select-label{display:block;font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--burgundy);margin-bottom:8px;}
.branch-select-inner{position:relative;}
.branch-select-wrap select{width:100%;padding:10px 36px 10px 14px;border:1px solid var(--grey-200);border-radius:var(--radius-sm);font-size:var(--text-sm);appearance:none;background:var(--white);cursor:pointer;font-family:var(--font);}
.branch-select-inner::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--grey-400);pointer-events:none;}
.branch-card{border:1px solid var(--grey-200);border-radius:var(--radius);padding:var(--sp-5);background:var(--white);}
.branch-name-red{color:var(--burgundy);font-size:var(--text-base);font-weight:var(--w-bold);margin-bottom:4px;}
.branch-sub{font-size:var(--text-sm);color:var(--grey-600);margin-bottom:var(--sp-3);}
.branch-details{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--sp-4);}
.branch-details p{font-size:var(--text-sm);color:var(--grey-600);}
.map-mock{background:var(--grey-100);border-radius:var(--radius);min-height:300px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--sp-3);font-size:var(--text-sm);color:var(--grey-600);}

/* ── FORMS ── */
.form-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:var(--sp-8);}
@media(max-width:640px){
  .form-card{padding:var(--sp-5);}
}
.form-title{color:var(--burgundy);font-size:var(--text-lg);font-weight:var(--w-bold);margin-bottom:var(--sp-6);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-bottom:var(--sp-4);}
.form-group{margin-bottom:var(--sp-3);}
.form-group label{display:block;font-size:var(--text-sm);font-weight:var(--w-semi);margin-bottom:6px;}
.form-group label .req{color:var(--red);}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:11px 14px;border:1px solid var(--grey-200);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--black);background:var(--white);outline:none;transition:border-color var(--ease);font-family:var(--font);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(204,0,0,.08);}
.form-group textarea{min-height:100px;resize:vertical;}
.form-status{font-size:13px;padding:8px 0;}
.form-status.success{color:#1a7a1a;}
.form-status.error{color:var(--red);}
.form-submit{width:100%;padding:14px;font-size:var(--text-base);border-radius:var(--radius-sm);}

/* ── CALCULATOR BOX ── */
.calc-box{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:var(--sp-8);}
.calc-header{color:var(--burgundy);font-size:var(--text-md);font-weight:var(--w-bold);margin-bottom:var(--sp-6);padding-bottom:var(--sp-3);border-bottom:2px solid var(--burgun-lt);}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4);}
.calc-field label{display:block;font-size:var(--text-sm);font-weight:var(--w-semi);margin-bottom:6px;}
.calc-field label span{color:var(--grey-400);font-size:11px;font-weight:var(--w-regular);}
.calc-field select,.calc-field input[type="number"]{width:100%;padding:10px 14px;border:1px solid var(--grey-200);border-radius:var(--radius-sm);font-size:var(--text-sm);appearance:none;background:var(--white);font-family:var(--font);outline:none;transition:border-color var(--ease);}
.calc-field select:focus,.calc-field input:focus{border-color:var(--red);}
.calc-field .select-wrap{position:relative;}
.calc-field .select-wrap::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--grey-400);pointer-events:none;}
.duration-row{margin-bottom:var(--sp-5);}
.duration-row>label{display:block;font-size:var(--text-sm);font-weight:var(--w-semi);margin-bottom:var(--sp-2);}
.duration-opts{display:flex;gap:var(--sp-4);flex-wrap:wrap;}
.duration-opts label{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);cursor:pointer;}
.duration-opts input[type="radio"]{accent-color:var(--red);}
.calc-result{display:none;align-items:center;justify-content:space-between;margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--grey-200);}
.calc-result.show{display:flex;}
.result-label{font-size:var(--text-sm);color:var(--grey-600);font-weight:var(--w-semi);}
.result-value{font-size:var(--text-lg);font-weight:var(--w-black);color:var(--black);}
.result-value span{color:var(--grey-400);font-size:var(--text-sm);font-weight:var(--w-regular);}

/* ── PRODUCT DETAIL PAGE ── */
.product-detail-layout{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-8);align-items:start;}
/* FIX (v9): "Get a Quick Quote" needs to sit at the TOP of the right-hand
   sidebar (above "Need Help?") on desktop, but appear BEFORE "How Can We
   Help?" once everything stacks into one column on mobile. Those are two
   different orderings, so instead of relying on source order we place
   each of the four blocks explicitly on the grid at desktop widths;
   below that breakpoint no placement is set, so they simply stack in
   source order (main info -> Quick Quote -> How Can We Help -> Need Help). */
@media(min-width:641px){
  .pd-main{grid-column:1;grid-row:1;}
  .pd-help{grid-column:1;grid-row:2;}
  .pd-quote{grid-column:2;grid-row:1;}
  .pd-need-help{grid-column:2;grid-row:2;}
}
/* FIX (v8): grid items default to min-width:auto, which means their
   min size is their CONTENT's natural width — so a nowrap element inside
   (like .product-tab-nav below) could force this whole column wider than
   the viewport, silently clipped by body{overflow-x:hidden}. min-width:0
   lets the column actually shrink to the grid track and lets the tab
   nav's own overflow-x:auto do its job instead of blowing out the page. */
.product-detail-layout>*{min-width:0;}




.benefits-list{display:flex;flex-direction:column;}
.benefit-item{display:flex;align-items:center;gap:var(--sp-3);padding:11px 0;border-bottom:1px solid var(--grey-100);font-size:var(--text-sm);}
.benefit-item .check{width:20px;height:20px;background:var(--red-light);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.benefit-item .check svg{width:10px;height:10px;stroke:var(--red);fill:none;stroke-width:3;}

/* Recommended Products (3-col grid, matching homepage) */
.recommended-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);}

/* ── NEWS ARTICLE ── */
.article-layout{display:grid;grid-template-columns:1fr 280px;gap:var(--sp-8);}
.article-body{padding:var(--sp-8);background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);}
.article-body h3{font-size:var(--text-lg);font-weight:var(--w-bold);color:var(--burgundy);margin-bottom:var(--sp-3);margin-top:var(--sp-6);}
.article-body h3:first-child{margin-top:0;}
.article-body p{font-size:var(--text-sm);color:var(--grey-600);line-height:1.8;margin-bottom:var(--sp-3);}
.article-sidebar{position:sticky;top:calc(var(--util-h) + var(--header-h) + 20px);}
.sidebar-meta{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);padding:var(--sp-5);margin-bottom:var(--sp-4);}
.sidebar-meta .meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4);}
.sidebar-meta .meta-label{font-size:var(--text-xs);color:var(--grey-400);margin-bottom:4px;}
.sidebar-meta .meta-value{font-size:var(--text-sm);color:var(--red);font-weight:var(--w-semi);}
.sidebar-more{background:var(--burgundy);border-radius:var(--radius);padding:var(--sp-4);}
.sidebar-more h5{font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--white);margin-bottom:var(--sp-3);}
.sidebar-more ul{display:flex;flex-direction:column;gap:4px;}
.sidebar-more ul li a{font-size:var(--text-sm);color:rgba(255,255,255,.8);padding:5px 0;display:flex;align-items:center;gap:6px;transition:color var(--ease);}
.sidebar-more ul li a::before{content:'·';color:rgba(255,255,255,.5);}
.sidebar-more ul li a:hover{color:var(--white);}

/* ── CONTACT FORM SECTION ── */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:start;}
.contact-info-block h3{color:var(--burgundy);font-size:clamp(18px,2.2vw,24px);font-weight:var(--w-bold);margin-bottom:var(--sp-4);}
.contact-info-block p{font-size:var(--text-sm);color:var(--grey-600);line-height:1.8;margin-bottom:var(--sp-4);}
.contact-info-list{display:flex;flex-direction:column;gap:var(--sp-4);margin-bottom:var(--sp-6);}
.contact-info-item{display:flex;align-items:flex-start;gap:var(--sp-3);}
.contact-info-item .icon{width:36px;height:36px;background:var(--red-light);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-info-item .icon svg{width:18px;height:18px;stroke:var(--red);fill:none;stroke-width:2;}
.contact-info-item .label{font-size:var(--text-xs);color:var(--grey-400);margin-bottom:2px;}
.contact-info-item .value{font-size:var(--text-sm);font-weight:var(--w-semi);color:var(--black);}

/* Feedback grid */
.feedback-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:var(--sp-5);align-items:start;}
.help-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);padding:var(--sp-5);}
.help-img{height:140px;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:var(--sp-4);}
.help-img img{width:100%;height:100%;object-fit:cover;}
.help-card h4{color:var(--red);font-size:var(--text-base);font-weight:var(--w-bold);margin-bottom:var(--sp-4);}
.help-links a{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-sm);color:var(--black);padding:9px 0;border-bottom:1px solid var(--grey-100);transition:color var(--ease);}
.help-links a:hover{color:var(--red);}
.arrow-right{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;flex-shrink:0;}
.feedback-form-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);padding:var(--sp-5);}
.feedback-form-card h4{color:var(--red);font-weight:var(--w-bold);margin-bottom:var(--sp-4);}
/* Right-hand card in the Give Feedback row: USSD strip + direct contact details */
.feedback-contact-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);overflow:hidden;}
.feedback-contact-card p{font-size:var(--text-sm);color:var(--grey-600);line-height:1.6;}


/* ── GENERIC CONTENT PAGES (CSR, Tech, Financials, etc.) ── */
.generic-page-header{text-align:center;padding:var(--sp-12) 0 var(--sp-8);}
.generic-page-header h1{font-size:clamp(24px,3.5vw,40px);font-weight:var(--w-black);color:var(--burgundy);margin-bottom:var(--sp-4);}
.generic-page-header p{font-size:var(--text-base);color:var(--grey-600);max-width:620px;margin:0 auto;line-height:1.7;}

/* ── DEFAULT CONTENT PAGE (v15 #2) ──
   Reusable layout for pages without a bespoke design (Tech Driven,
   Customer Experience Charter, Financials, Gallery, Newsletter, Resource
   Center, and any future page). Intro text -> 3 feature highlights ->
   text+image split -> closing CTA strip. All built from shared classes so
   it's a consistent, professional-looking "default" rather than a bare
   "content coming soon" stub. */
.default-intro{max-width:760px;margin:0 auto 48px;text-align:center;}
.default-intro p{color:var(--grey-600);line-height:1.9;font-size:15px;}
.default-feature{border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:28px 24px;text-align:center;}
.default-feature .icon{width:52px;height:52px;background:var(--red-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:22px;}
.default-feature h4{font-size:15px;font-weight:var(--w-bold);color:var(--burgundy);margin-bottom:8px;}
.default-feature p{font-size:13px;color:var(--grey-600);line-height:1.7;}
.default-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10);align-items:center;margin:56px 0;}
.default-split img{width:100%;border-radius:var(--radius-lg);height:320px;object-fit:cover;}
.default-split h3{color:var(--burgundy);font-size:20px;font-weight:700;margin-bottom:14px;}
.default-split p{color:var(--grey-600);line-height:1.8;font-size:14px;margin-bottom:12px;}
.default-cta{background:var(--offwhite);border-radius:var(--radius-xl);padding:40px;text-align:center;margin-top:48px;}
.default-cta h3{color:var(--burgundy);font-size:20px;font-weight:700;margin-bottom:10px;}
.default-cta p{color:var(--grey-600);font-size:14px;margin-bottom:20px;}
@media(max-width:768px){
  .default-split{grid-template-columns:1fr;gap:24px;}
  .default-split img{height:220px;}
}

/* FAQ accordion */
.faq-item{border:1px solid var(--grey-200);border-radius:var(--radius);margin-bottom:var(--sp-3);overflow:hidden;}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5) var(--sp-6);font-size:var(--text-base);font-weight:var(--w-semi);cursor:pointer;background:var(--white);transition:background var(--ease);}
.faq-question:hover{background:var(--offwhite);}
.faq-item.open .faq-question{background:var(--offwhite);}
.faq-icon{width:18px;height:18px;fill:none;stroke:var(--burgundy);stroke-width:2.5;transition:transform .2s;flex-shrink:0;}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-answer-inner{padding:0 var(--sp-6) var(--sp-5);font-size:var(--text-sm);color:var(--grey-600);line-height:1.8;}

/* ── SITEMAP ── */
.sitemap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-8);}
.sitemap-col h3{font-size:var(--text-base);font-weight:var(--w-bold);color:var(--burgundy);margin-bottom:var(--sp-4);padding-bottom:var(--sp-2);border-bottom:2px solid var(--red);}
.sitemap-col ul{display:flex;flex-direction:column;gap:var(--sp-2);}
.sitemap-col ul li a{font-size:var(--text-sm);color:var(--grey-600);transition:color var(--ease);display:flex;align-items:center;gap:6px;}
.sitemap-col ul li a::before{content:'→';color:var(--red);font-size:11px;}
.sitemap-col ul li a:hover{color:var(--red);}

/* ── RESPONSIVE ──
   NOTE (v7 fix): this used to contain two rule blocks with no @media()
   wrapper (the opening "@media(...){" line had been accidentally deleted
   but the rules + closing "}" were left behind). That made every rule in
   them apply globally, at ALL screen widths — forcing team-grid,
   story-grid, product-detail-layout, article-layout, leadership-cta,
   branch-layout, feedback-grid, calc-row, profile-expanded, sitemap-grid
   and contact-layout into 1–2 columns even on desktop. That was the cause
   of "About/Product/News detail pages showing stacked cards instead of a
   grid" and "Team/Board page showing only 2 columns on desktop". The
   correct, properly-wrapped versions of these same rules already exist
   further down this file (see the real @media(max-width:960px) and
   @media(max-width:640px) blocks near the bottom), so the broken
   duplicate blocks have simply been removed rather than re-wrapped. ── */


/* ── AWARDS (shared across home, about, awards pages) ── */
.awards-section{padding:var(--sp-16) 0;background:var(--white);}
.awards-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--sp-4);flex-wrap:wrap;gap:var(--sp-3);}
.awards-header h2{font-size:clamp(20px,2.5vw,26px);font-weight:var(--w-bold);color:var(--black);}
.awards-desc{font-size:var(--text-base);color:var(--black);line-height:1.7;margin-bottom:var(--sp-6);max-width:900px;}

/* Awards track — horizontal scroll on ALL screen sizes (FIX #7) */
.awards-track-wrap{
  background:var(--burgundy);border-radius:var(--radius-xl);
  padding:var(--sp-6) var(--sp-5);
  display:flex;align-items:center;justify-content:flex-start;
  gap:var(--sp-3);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
/* Explicit outer padding on first/last item so the start of the first
   medal and end of the last medal have the same visual gap from the
   container edge as each other -- justify-content:center handles this
   on wide screens, but on narrower screens where the row scrolls the
   first item was flush-left while the last had natural trailing space. */
.awards-track-wrap>.award-medal:first-child{margin-left:var(--sp-3);}
.awards-track-wrap>.award-medal:last-child{margin-right:var(--sp-3);}
.awards-track-wrap>.award-winner-wrap:first-child{margin-left:var(--sp-3);}
.awards-track-wrap>.award-winner-wrap:last-child{margin-right:var(--sp-3);}
/* FIX (v7 #5): on wide desktop screens the medal row is narrower than the
   card, leaving empty space on the right because content is left-aligned.
   Center it once the screen is wide enough that nothing needs to scroll;
   keep left-aligned below that so touch/scroll behavior is unaffected. */
@media(min-width:901px){
  .awards-track-wrap{justify-content:center;}
}
.awards-track-wrap::-webkit-scrollbar{display:none;}
/* FIX #6: awards-art.png as circle background */
.award-medal{
  flex:0 0 100px;width:100px;height:100px;
  background:url('../images/awards-art.png') center/contain no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:18px 14px;
  scroll-snap-align:start;
}
.award-medal .brand{font-size:9px;font-weight:800;color:#fff;letter-spacing:.03em;margin-bottom:1px;}
.award-medal .award-name{font-size:7.5px;color:rgba(255,255,255,.85);text-align:center;line-height:1.3;overflow-wrap:break-word;max-width:62px;margin:0 auto;}
.award-medal .award-year{font-size:7.5px;color:rgba(255,255,255,.75);margin-top:2px;}
/* Winner in the middle */
.award-winner-wrap{display:flex;align-items:center;gap:12px;flex:0 0 auto;padding:0 8px;scroll-snap-align:start;}
/* FIX #6: laurel images — left uses laurel-left.png, right uses flip */
.laurel{width:44px;height:auto;flex-shrink:0;}
.laurel.flip{transform:scaleX(-1);}
.award-winner-text{
  text-align:center;font-family:var(--font-serif);
  font-size:clamp(16px,2.5vw,26px);font-weight:700;
  color:gold;letter-spacing:.04em;line-height:1.2;
  text-shadow:0 2px 8px rgba(0,0,0,.3);white-space:nowrap;
  flex-shrink:0;
}

/* Awards detail grid */
.awards-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);}
.award-detail-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:var(--sp-6);text-align:center;transition:box-shadow var(--ease),transform var(--ease);}
.award-detail-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.award-detail-card h4{font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--burgundy);margin-bottom:4px;}
.award-detail-card p{font-size:var(--text-xs);color:var(--grey-600);}

/* ── HELP ACTIONS GRID (Request Callback / Portal / Call / Chat) ──
   FIX (v8): was an inline grid-template-columns:1fr 1fr with .btn's
   default white-space:nowrap — "Customer Portal" and "Request a
   Callback" don't fit two-per-row on narrow phones and were getting
   clipped off the right edge. Drop to a single column below 480px and
   let button text wrap as a second safety net. */
.help-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.help-actions-grid .btn{white-space:normal;text-align:center;line-height:1.3;}
@media(max-width:480px){
  .help-actions-grid{grid-template-columns:1fr;}
}
.pill-tabs{display:inline-flex;background:#1a1a1a;border-radius:999px;padding:4px;gap:2px;margin-bottom:var(--sp-8);max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pill-tab{padding:9px 20px;border-radius:999px;font-size:var(--text-sm);font-weight:var(--w-semi);color:#aaa;white-space:nowrap;flex-shrink:0;transition:background var(--ease),color var(--ease);border:none;background:none;cursor:pointer;font-family:var(--font);}
.pill-tab.active{background:var(--red);color:var(--white);}
.pill-tab:hover:not(.active){color:var(--white);}

/* ── PRODUCT TAB NAV — FIX #9: fully scrollable, no overflow ── */
.product-tab-nav{
  display:flex;
  border-bottom:2px solid var(--grey-200);
  margin-bottom:var(--sp-6);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  white-space:nowrap;
  max-width:100%;
  min-width:0;
}
.product-tab-nav::-webkit-scrollbar{display:none;}
.tab-nav-btn{
  padding:10px 16px;font-size:var(--text-base);font-weight:var(--w-semi);
  color:var(--grey-600);border-bottom:3px solid transparent;margin-bottom:-2px;
  white-space:nowrap;border:none;background:none;cursor:pointer;
  font-family:var(--font);transition:color var(--ease),border-color var(--ease);
  flex-shrink:0;
}
.tab-nav-btn.active{color:var(--red);border-bottom-color:var(--red);}
.tab-nav-btn:hover{color:var(--red);}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap;}
.page-btn{min-width:36px;height:36px;padding:0 8px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;border:1px solid var(--grey-200);background:var(--white);cursor:pointer;transition:all var(--ease);}
.page-btn:hover{border-color:var(--burgundy);color:var(--burgundy);}
.page-btn.active{background:var(--burgundy);color:var(--white);border-color:var(--burgundy);}
.page-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .products-grid,.recommended-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .glance-grid{grid-template-columns:repeat(3,1fr);}
  .story-grid{grid-template-columns:1fr;}
  .mvv-grid{grid-template-columns:1fr 1fr;}
  .leadership-cta{grid-template-columns:1fr;}
  .branch-layout{grid-template-columns:1fr;}
  .product-detail-layout{grid-template-columns:1fr;}
  .feedback-grid{grid-template-columns:1fr;}
  .article-layout{grid-template-columns:1fr;}
  .calc-row{grid-template-columns:1fr;}
  .profile-expanded.open{grid-template-columns:1fr;}
  .awards-detail-grid{grid-template-columns:repeat(2,1fr);}
  .sitemap-grid{grid-template-columns:repeat(2,1fr);}
  .contact-layout{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .products-grid,.recommended-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .glance-grid{grid-template-columns:repeat(2,1fr);}
  /* FIX (v17 #2): 5 cards in a 2-column grid leaves 1 orphaned card on
     the last row, sitting flush left instead of centered. Span it across
     both columns and center its own width so it sits in the middle. */
  .glance-grid>:last-child{grid-column:1/-1;padding-left:15%;padding-right:15%;box-sizing:border-box;}
  .mvv-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .awards-detail-grid{grid-template-columns:1fr 1fr;}
  .award-medal{flex:0 0 80px;width:80px;height:80px;padding:14px 11px;}
  .award-medal .award-name{max-width:50px;}
  .laurel{width:32px;}
  .award-winner-text{font-size:14px;}
}

/* FIX (v14 #2): reusable responsive 3-column grid, replacing hardcoded
   inline grid-template-columns:repeat(3,1fr) on how-to-make-a-claim,
   payment-options, and forms-and-downloads — those were fixed 3 columns
   at every screen width with no way to collapse, since an inline style
   can't be overridden by a media query. */
.grid-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:768px){
  .grid-3col{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .grid-3col{grid-template-columns:1fr;}
}

/* ── FILTER BAR (Forms & Downloads, Tenders) ── */
.filter-bar{display:flex;gap:12px;margin-bottom:28px;flex-wrap:wrap;}
.filter-select-wrap{position:relative;flex:0 0 240px;}
.filter-select-wrap select{width:100%;padding:12px 36px 12px 16px;border:1.5px solid var(--grey-200);border-radius:var(--radius-sm);font-size:var(--text-sm);appearance:none;background:var(--white);cursor:pointer;font-family:var(--font);color:var(--black);}
.filter-select-wrap select:focus{border-color:var(--red);outline:none;}
.filter-select-wrap::after{content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--grey-400);pointer-events:none;}
.filter-search-wrap{position:relative;flex:1 1 260px;}
.filter-search-wrap input{width:100%;padding:12px 16px 12px 40px;border:1.5px solid var(--grey-200);border-radius:var(--radius-sm);font-size:var(--text-sm);font-family:var(--font);background:var(--white);}
.filter-search-wrap input:focus{border-color:var(--red);outline:none;}
.filter-search-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--grey-400);fill:none;stroke-width:2;pointer-events:none;}
@media(max-width:640px){
  .filter-bar{flex-direction:column;}
  .filter-select-wrap,.filter-search-wrap{flex:none;width:100%;}
}
.filter-empty{display:none;text-align:center;padding:40px 20px;color:var(--grey-400);font-size:var(--text-sm);}

/* ── EVENTS LIST (Upcoming Events page) ── */
.event-row{display:flex;gap:20px;border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;align-items:center;transition:border-color var(--ease),box-shadow var(--ease);}
.event-row:hover{border-color:var(--burgundy);box-shadow:var(--shadow-sm);}
.event-date-badge{flex-shrink:0;width:72px;height:72px;background:var(--burgun-lt);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.event-date-badge .day{font-size:24px;font-weight:var(--w-black);color:var(--burgundy);line-height:1;}
.event-date-badge .mon{font-size:11px;font-weight:var(--w-bold);color:var(--burgundy);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.event-info{flex:1;min-width:0;}
.event-info h4{font-size:16px;font-weight:var(--w-bold);color:var(--black);margin-bottom:6px;}
.event-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--grey-600);margin-bottom:6px;}
.event-meta span{display:flex;align-items:center;gap:5px;}
.event-meta svg{width:14px;height:14px;stroke:var(--grey-400);fill:none;stroke-width:2;flex-shrink:0;}
.event-desc{font-size:13px;color:var(--grey-600);line-height:1.6;}
.event-cta{flex-shrink:0;}
@media(max-width:640px){
  .event-row{flex-wrap:wrap;}
  .event-date-badge{width:60px;height:60px;}
  .event-date-badge .day{font-size:20px;}
  .event-cta{width:100%;}
  .event-cta .btn{width:100%;justify-content:center;}
}

/* ── TENDERS LIST ── */
.tender-row{border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:16px;transition:border-color var(--ease),box-shadow var(--ease);}
.tender-row:hover{border-color:var(--burgundy);box-shadow:var(--shadow-sm);}
.tender-row-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:10px;flex-wrap:wrap;}
.tender-ref{font-size:12px;color:var(--grey-400);font-weight:var(--w-semi);letter-spacing:.02em;margin-bottom:4px;}
.tender-row h4{font-size:16px;font-weight:var(--w-bold);color:var(--black);}
.tender-status{flex-shrink:0;font-size:11px;font-weight:var(--w-bold);padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;}
.tender-status.open{background:#e6f4ea;color:#1e7e34;}
.tender-status.closed{background:var(--grey-100);color:var(--grey-600);}
.tender-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:12.5px;color:var(--grey-600);margin-bottom:12px;}
.tender-meta span{display:flex;align-items:center;gap:5px;}
.tender-meta svg{width:14px;height:14px;stroke:var(--grey-400);fill:none;stroke-width:2;flex-shrink:0;}
.tender-row-actions{display:flex;gap:10px;flex-wrap:wrap;}
@media(max-width:480px){
  .tender-row-actions .btn{flex:1;justify-content:center;}
}

/* ── DOWNLOAD LIST ROW (used by Forms & Downloads) ── */
.download-row{border:1px solid var(--grey-200);border-radius:var(--radius);padding:18px 20px;display:flex;align-items:center;gap:16px;margin-bottom:12px;transition:border-color var(--ease),box-shadow var(--ease);}
.download-row:hover{border-color:var(--burgundy);box-shadow:var(--shadow-sm);}
.download-row .file-badge{width:40px;height:48px;background:var(--red-light);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:700;color:var(--red);}
.download-row .file-info{flex:1;min-width:0;}
.download-row .file-info p:first-child{font-size:14px;font-weight:600;margin-bottom:4px;}
.download-row .file-meta{font-size:12px;color:var(--grey-400);}
.download-row .file-cat{display:inline-block;font-size:11px;font-weight:700;color:var(--burgundy);background:var(--burgun-lt);padding:2px 8px;border-radius:999px;margin-right:8px;}
@media(max-width:480px){
  .download-row{flex-wrap:wrap;}
  .download-row .btn{width:100%;justify-content:center;}
}

/* "View All Products" link in the mega menu -- desktop and mobile.
   Was missing entirely before; the category title itself linked to the
   archive, but nothing inside the dropdown made that explicit/discoverable.
   Sits directly under the image within their shared .mega-img-col wrapper
   (not spanning the full grid width), so they read as one grouped unit
   instead of ending up on separate rows. */
.mega-view-all{display:block;font-weight:700;color:var(--red);text-decoration:none;font-size:13px;text-align:center;}
.mega-view-all:hover{text-decoration:underline;}
.mob-view-all{display:block;font-weight:700;color:var(--red)!important;margin-top:8px;padding-top:8px;border-top:1px solid var(--grey-200);font-size:13px;}

/* Key Benefits rich content (WYSIWYG editor) -- styles whatever
   structure the admin actually writes (numbered plan options, bold
   category labels with bullet sub-items, plain paragraphs) to match the
   site's look, since the content itself is now flexible rather than
   forced into one fixed line-per-benefit shape. */
.benefits-rich-content{color:var(--grey-700);line-height:1.8;}
.benefits-rich-content p{margin-bottom:14px;}
.benefits-rich-content strong{color:var(--burgundy);}
.benefits-rich-content h1,.benefits-rich-content h2,.benefits-rich-content h3,.benefits-rich-content h4{color:var(--burgundy);margin:20px 0 10px;font-weight:700;}
.benefits-rich-content ol{list-style:decimal;margin:0 0 16px 20px;padding-left:8px;}
.benefits-rich-content ol>li{margin-bottom:14px;padding-left:4px;}
.benefits-rich-content ol>li::marker{color:var(--red);font-weight:700;}
.benefits-rich-content ul{list-style:none;margin:0 0 16px;padding:0;}
.benefits-rich-content ul>li{display:flex;gap:10px;margin-bottom:10px;}
.benefits-rich-content ul>li::before{content:'\2713';color:var(--red);font-weight:700;flex-shrink:0;}