/* =====================================================================
   Premier Group — corporate website
   Palette: black · white · green · yellow

   The whole site reads these four families through the tokens below, so the
   scheme is changed here and nowhere else. The older token names (--pg-navy,
   --pg-gold) are kept and re-pointed rather than renamed: every existing rule
   in this file and in the page templates keeps working, and reverting means
   restoring this one block.

   On yellow: --pg-yellow is the bright brand yellow and is only ever used as a
   fill or on black. Yellow text on white is unreadable (roughly 1.5:1), so
   small text and kickers use --pg-yellow-deep, which carries the same hue at a
   contrast ratio that passes WCAG AA.
   ===================================================================*/
:root{
  /* --- black --- */
  --pg-black:#0A0A0A;
  --pg-black-soft:#161616;
  --pg-navy:#141414;             /* was navy — now black, site-wide */
  --pg-navy-dark:#000000;

  /* --- green --- */
  --pg-green:#0E7A3C;
  --pg-green-dark:#06522A;
  --pg-green-soft:#E7F5EC;

  /* --- yellow --- */
  --pg-yellow:#FFD400;           /* bright: fills, bars, accents on black */
  --pg-yellow-deep:#7A5E00;      /* text-safe on white */
  --pg-gold:var(--pg-yellow-deep);
  --pg-gold-light:var(--pg-yellow);
  --pg-gold-soft:#FFF8D6;

  /* --- neutrals --- */
  --pg-ink:#0A0A0A;
  --pg-body:#262B27;
  --pg-muted:#6B7370;
  --pg-line:#E4E7E5;
  --pg-sand:#F6F7F6;

  --pg-radius:16px;
  --pg-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.07);
  --pg-shadow-lift:0 8px 16px rgba(0,0,0,.08), 0 24px 50px rgba(0,0,0,.16);
}

body{
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Noto Sans Sinhala",sans-serif;
  color:var(--pg-body);
  background:#fff;
  font-size:16px;
  line-height:1.65;
}
h1,h2,h3,h4,h5{ color:var(--pg-ink); font-weight:700; letter-spacing:-.02em; }
a{ color:var(--pg-green); text-decoration:none; }
a:hover{ color:var(--pg-green-dark); }
.text-gold{ color:var(--pg-gold); }
.text-green{ color:var(--pg-green); }
.bg-sand{ background:var(--pg-sand); }
.bg-green-soft{ background:var(--pg-green-soft); }

/* ---------- Buttons ---------- */
.btn{ border-radius:999px; font-weight:600; padding:.62rem 1.5rem; }
.btn-pg{ background:var(--pg-green); border-color:var(--pg-green); color:#fff; }
.btn-pg:hover{ background:var(--pg-green-dark); border-color:var(--pg-green-dark); color:#fff; }
.btn-gold{ background:var(--pg-gold); border-color:var(--pg-gold); color:#1a1a1a; }
.btn-gold:hover{ background:var(--pg-gold-light); border-color:var(--pg-gold-light); color:#1a1a1a; }
.btn-outline-pg{ border:2px solid var(--pg-green); color:var(--pg-green); background:transparent; }
.btn-outline-pg:hover{ background:var(--pg-green); color:#fff; }
.btn-outline-light-pg{ border:2px solid rgba(255,255,255,.8); color:#fff; background:transparent; }
.btn-outline-light-pg:hover{ background:#fff; color:var(--pg-green-dark); }

/* =====================================================================
   Navigation — utility strip, sticky bar, pill menu, mobile drawer
   ===================================================================*/
.pg-skip{
  position:absolute; left:-9999px; top:0; z-index:1200; background:var(--pg-navy);
  color:#fff; padding:.7rem 1.2rem; border-radius:0 0 10px 0; font-weight:600;
}
.pg-skip:focus{ left:0; color:#fff; }

/* ---- utility strip ---- */
.pg-topbar{
  background:linear-gradient(100deg, var(--pg-navy-dark), var(--pg-navy) 55%, var(--pg-green-dark));
  color:rgba(255,255,255,.86); font-size:13px; padding:.5rem 0;
}
.pg-topbar a{ color:rgba(255,255,255,.86); }
.pg-topbar a:hover{ color:var(--pg-gold-light); }
.pg-topbar i{ color:var(--pg-gold-light); font-size:12px; }
.pg-topbar-tag{
  font-style:italic; color:var(--pg-gold-light); letter-spacing:.01em;
}

/* ---- main bar ---- */
.pg-nav{
  position:sticky; top:0; z-index:1030; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--pg-line);
  transition:box-shadow .22s ease, padding .22s ease, background .22s ease;
}
.pg-nav.scrolled{
  box-shadow:0 6px 24px rgba(12,40,70,.10); background:rgba(255,255,255,.98);
}
.pg-nav-inner{
  display:flex; align-items:center; gap:1rem; padding:.75rem 0;
  transition:padding .22s ease;
}
.pg-nav.scrolled .pg-nav-inner{ padding:.45rem 0; }

.pg-brand{ display:inline-flex; align-items:center; flex:0 0 auto; }
.pg-brand img{ height:52px; width:auto; transition:height .22s ease; }
.pg-nav.scrolled .pg-brand img{ height:42px; }

/* ---- desktop pill menu ---- */
.pg-menu{
  display:none; list-style:none; margin:0 auto; padding:.3rem;
  background:var(--pg-sand); border:1px solid var(--pg-line); border-radius:999px;
  gap:.15rem;
}
.pg-menu li{ display:block; }
.pg-menu a{
  display:inline-flex; align-items:center; gap:.45rem; position:relative;
  padding:.55rem 1rem; border-radius:999px; font-size:14.5px; font-weight:600;
  color:var(--pg-body); white-space:nowrap; transition:color .16s ease, background .16s ease;
}
.pg-menu a i{ font-size:15px; color:var(--pg-muted); transition:color .16s ease; }
.pg-menu a:hover{ background:#fff; color:var(--pg-navy); box-shadow:var(--pg-shadow); }
.pg-menu a:hover i{ color:var(--pg-gold); }
.pg-menu a.active{
  background:linear-gradient(135deg, var(--pg-navy), var(--pg-green));
  color:#fff; box-shadow:0 6px 16px rgba(12,40,70,.26);
}
.pg-menu a.active i{ color:var(--pg-gold-light); }

.pg-nav-right{ display:flex; align-items:center; gap:.6rem; margin-left:auto; }

/* ---- Corporate Login button ---- */
.btn-corp{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  background:linear-gradient(135deg, var(--pg-navy-dark), var(--pg-navy));
  color:#fff; border:1px solid var(--pg-navy-dark); border-radius:999px;
  padding:.55rem 1.15rem; font-size:14px; font-weight:600;
  box-shadow:0 4px 14px rgba(12,40,70,.22); transition:transform .16s ease, box-shadow .16s ease;
}
.btn-corp:hover{
  color:#fff; transform:translateY(-1px); box-shadow:0 8px 22px rgba(12,40,70,.32);
}
.btn-corp i{ color:var(--pg-gold-light); }

/* ---- burger ---- */
.pg-burger{
  width:44px; height:44px; border:1px solid var(--pg-line); background:#fff;
  border-radius:12px; display:grid; place-content:center; gap:5px; cursor:pointer; padding:0;
}
.pg-burger span{
  display:block; width:20px; height:2px; border-radius:2px; background:var(--pg-navy);
  transition:transform .2s ease, opacity .2s ease;
}
.pg-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.pg-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.pg-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- mobile drawer ---- */
.pg-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(320px, 88vw); z-index:1060;
  background:#fff; transform:translateX(102%); transition:transform .26s ease;
  display:flex; flex-direction:column; box-shadow:-10px 0 40px rgba(12,40,70,.2);
}
.pg-drawer.open{ transform:translateX(0); }
.pg-drawer-head{
  display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem;
  border-bottom:1px solid var(--pg-line);
}
.pg-drawer-head img{ height:42px; }
.pg-drawer-close{ background:none; border:0; font-size:34px; line-height:1; color:var(--pg-muted); cursor:pointer; }
.pg-drawer ul{ list-style:none; margin:0; padding:.6rem; overflow-y:auto; flex:1 1 auto; }
.pg-drawer ul a{
  display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; border-radius:12px;
  font-weight:600; color:var(--pg-body); font-size:15px;
}
.pg-drawer ul a i:first-child{ color:var(--pg-gold); width:20px; }
.pg-drawer ul a .bi-chevron-right{ font-size:12px; color:var(--pg-line); }
.pg-drawer ul a:hover{ background:var(--pg-sand); color:var(--pg-navy); }
.pg-drawer ul a.active{
  background:linear-gradient(135deg, var(--pg-navy), var(--pg-green)); color:#fff;
}
.pg-drawer ul a.active i{ color:var(--pg-gold-light) !important; }
.pg-drawer-foot{ border-top:1px solid var(--pg-line); padding:1.1rem 1.2rem; font-size:14px; }
.pg-drawer-foot a{ display:block; color:var(--pg-body); margin-bottom:.5rem; }
.pg-drawer-foot .btn{ color:#1a1a1a; }
.pg-scrim{
  position:fixed; inset:0; background:rgba(9,20,32,.5); z-index:1050;
  opacity:0; pointer-events:none; transition:opacity .26s ease;
}
.pg-scrim.open{ opacity:1; pointer-events:auto; }

@media (min-width: 992px){
  .pg-menu{ display:flex; }
  .pg-burger{ display:none; }
  .pg-nav-right{ margin-left:0; }
}

/* ---------- Hero ---------- */
.pg-hero{
  position:relative; color:#fff; padding:118px 0 104px;
  background:
    radial-gradient(1100px 460px at 82% -12%, rgba(194,154,32,.34), transparent 62%),
    linear-gradient(140deg, var(--pg-navy-dark) 0%, var(--pg-navy) 34%, var(--pg-green) 100%);
  overflow:hidden;
}
.pg-hero::after{
  content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 1px, transparent 1px 34px);
}
.pg-hero .container{ position:relative; z-index:2; }
.pg-eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pg-gold-light);
  border:1px solid rgba(228,196,83,.45); border-radius:999px; padding:.32rem 1rem;
  margin-bottom:1.35rem;
}
.pg-hero h1{ color:#fff; font-size:clamp(2.1rem, 5vw, 3.7rem); line-height:1.1; margin-bottom:1rem; }
.pg-hero .lead{ color:rgba(255,255,255,.9); max-width:640px; font-size:1.1rem; }
.pg-hero-stats{ border-top:1px solid rgba(255,255,255,.18); margin-top:3rem; padding-top:1.6rem; }
.pg-hero-stats .n{ font-size:2rem; font-weight:800; color:var(--pg-gold-light); line-height:1; }
.pg-hero-stats .l{ font-size:13px; color:rgba(255,255,255,.75); }

/* Compact hero for inner pages */
.pg-hero-sm{ padding:84px 0 66px; }
.pg-hero-sm h1{ font-size:clamp(1.9rem, 4vw, 2.9rem); }

/* ---------- Sections ---------- */
.pg-section{ padding:84px 0; }
.pg-section-sm{ padding:56px 0; }
.pg-kicker{
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--pg-gold); margin-bottom:.6rem;
}
.pg-title{ font-size:clamp(1.6rem, 3vw, 2.3rem); margin-bottom:.85rem; }
.pg-rule{ width:56px; height:4px; border-radius:4px; background:var(--pg-gold); margin-bottom:1.4rem; }
.pg-rule.center{ margin-left:auto; margin-right:auto; }

/* ---------- Cards ---------- */
.pg-card{
  background:#fff; border:1px solid var(--pg-line); border-radius:var(--pg-radius);
  box-shadow:var(--pg-shadow); height:100%; transition:transform .18s ease, box-shadow .18s ease;
}
.pg-card:hover{ transform:translateY(-4px); box-shadow:var(--pg-shadow-lift); }
.pg-card .card-body{ padding:1.7rem; }
.pg-ico{
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background:var(--pg-green-soft); color:var(--pg-green); font-size:24px; margin-bottom:1rem;
}
.pg-card:hover .pg-ico{ background:var(--pg-gold-soft); color:var(--pg-gold); }
.pg-num{
  font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--pg-gold);
  text-transform:uppercase;
}

/* ---------- Division detail ---------- */
.pg-div-block{ border-top:1px solid var(--pg-line); padding:56px 0; }
.pg-div-block:first-of-type{ border-top:0; }
.pg-div-badge{
  width:74px; height:74px; border-radius:20px; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--pg-green), var(--pg-green-dark));
  color:#fff; font-size:30px; box-shadow:var(--pg-shadow);
}
.pg-list{ list-style:none; padding:0; margin:0; }
.pg-list li{ position:relative; padding-left:1.75rem; margin-bottom:.6rem; }
.pg-list li::before{
  content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; top:0;
  color:var(--pg-gold); font-size:14px;
}

/* ---------- Values / leadership ---------- */
.pg-value{ text-align:center; padding:1.6rem 1rem; }
.pg-value .i{ font-size:30px; color:var(--pg-gold); margin-bottom:.6rem; }
.pg-leader{
  background:#fff; border:1px solid var(--pg-line); border-radius:var(--pg-radius);
  box-shadow:var(--pg-shadow); overflow:hidden; height:100%;
}
.pg-leader .top{
  background:linear-gradient(140deg, var(--pg-green-dark), var(--pg-green));
  color:#fff; padding:1.6rem 1.7rem;
}
.pg-leader .top .role{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--pg-gold-light); }
.pg-leader .top h3{ color:#fff; margin:.25rem 0 0; font-size:1.35rem; }
.pg-leader .body{ padding:1.7rem; }
.pg-quote{ border-left:3px solid var(--pg-gold); padding-left:1.1rem; font-style:italic; color:var(--pg-body); }

/* ---------- Investment ---------- */
.pg-plan{
  background:#fff; border:1px solid var(--pg-line); border-radius:var(--pg-radius);
  padding:1.9rem 1.5rem; text-align:center; height:100%; position:relative;
  box-shadow:var(--pg-shadow); transition:transform .18s ease, box-shadow .18s ease;
}
.pg-plan:hover{ transform:translateY(-5px); box-shadow:var(--pg-shadow-lift); }
.pg-plan.featured{ border:2px solid var(--pg-gold); background:linear-gradient(180deg,#fff,var(--pg-gold-soft)); }
.pg-plan .tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--pg-gold); color:#1a1a1a; font-size:11px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; padding:.28rem .9rem; border-radius:999px;
}
.pg-plan .term{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pg-green); background:var(--pg-green-soft); border-radius:999px;
  padding:.28rem .9rem; display:inline-block; margin-bottom:.9rem;
}
.pg-plan h3{ font-size:1.2rem; margin-bottom:.9rem; }
.pg-plan .redeem{ font-size:1.9rem; font-weight:800; color:var(--pg-green); line-height:1.1; }
.pg-plan .redeem small{ display:block; font-size:12px; font-weight:600; color:var(--pg-muted);
  letter-spacing:.06em; text-transform:uppercase; margin-top:.35rem; }
.pg-plan .bonus{
  margin-top:.9rem; font-weight:700; color:var(--pg-gold);
  border-top:1px dashed var(--pg-line); padding-top:.9rem;
}
.pg-trust{
  display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--pg-line);
  border-radius:999px; padding:.8rem 1.3rem; font-weight:600; box-shadow:var(--pg-shadow);
  justify-content:center; height:100%;
}
.pg-trust i{ color:var(--pg-gold); font-size:20px; }

/* ---------- Timeline / growth vision ---------- */
.pg-step{ display:flex; gap:1.1rem; margin-bottom:1.6rem; }
.pg-step .dot{
  flex:0 0 44px; height:44px; border-radius:50%; background:var(--pg-gold-soft);
  color:var(--pg-gold); display:grid; place-items:center; font-size:20px;
  border:2px solid var(--pg-gold);
}

/* ---------- Careers ---------- */
.pg-job{
  background:#fff; border:1px solid var(--pg-line); border-left:5px solid var(--pg-green);
  border-radius:14px; padding:1.4rem 1.5rem; height:100%; box-shadow:var(--pg-shadow);
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;
}
.pg-job:hover{ transform:translateY(-3px); box-shadow:var(--pg-shadow-lift); border-left-color:var(--pg-gold); }
.pg-job h3{ font-size:1.08rem; margin-bottom:.5rem; }
.pg-job p{ color:var(--pg-muted); font-size:14.5px; flex:1 1 auto; }

/* ---------- Forms ---------- */
.form-control, .form-select{ border-radius:12px; border:1px solid var(--pg-line); padding:.7rem .95rem; }
.form-control:focus, .form-select:focus{
  border-color:var(--pg-green); box-shadow:0 0 0 .2rem rgba(20,101,58,.12);
}
.form-label{ font-weight:600; font-size:14px; color:var(--pg-ink); margin-bottom:.35rem; }

/* ---------- CTA band ---------- */
.pg-cta{
  background:linear-gradient(140deg, var(--pg-ink) 0%, var(--pg-green-dark) 100%);
  color:#fff; border-radius:var(--pg-radius); padding:3rem 2.4rem;
}
.pg-cta h2{ color:#fff; }

/* ---------- Footer ---------- */
.pg-footer{ background:var(--pg-ink); color:#B9C4BC; padding:64px 0 0; }
.pg-footer h5{ color:#fff; font-size:15px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.1rem; }
.pg-footer a{ color:#B9C4BC; }
.pg-footer a:hover{ color:var(--pg-gold-light); }
.pg-footer .list-unstyled li{ margin-bottom:.55rem; font-size:14.5px; }
.pg-footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding:20px 0;
  font-size:13.5px; color:#8A968E;
}

/* ---------- Misc ---------- */
.pg-badge-soft{
  background:var(--pg-green-soft); color:var(--pg-green); font-weight:600;
  border-radius:999px; padding:.3rem .85rem; font-size:13px; display:inline-block;
}
@media (max-width: 767.98px){
  .pg-section{ padding:56px 0; }
  .pg-hero{ padding:84px 0 70px; }
  .pg-cta{ padding:2.2rem 1.4rem; }
}

/* ---------- Careers: one form per vacancy ---------- */
.pg-vacancy{
  background:#fff; border:1px solid var(--pg-line); border-left:5px solid var(--pg-green);
  border-radius:14px; box-shadow:var(--pg-shadow); overflow:hidden;
  transition:box-shadow .18s ease, border-color .18s ease;
}
.pg-vacancy:hover{ box-shadow:var(--pg-shadow-lift); border-left-color:var(--pg-gold); }
.pg-vacancy-head{
  display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; padding:1.35rem 1.6rem;
}
.pg-vacancy-head h3{ margin:0; }
.pg-vacancy-head p{ font-size:14.5px; }
.pg-vacancy-form{
  border-top:1px dashed var(--pg-line); background:var(--pg-sand);
  padding:1.6rem; 
}
.pg-vacancy .collapse.show + .pg-vacancy-head{ border-bottom:0; }
@media (max-width: 575.98px){
  .pg-vacancy-head{ padding:1.1rem 1.1rem; }
  .pg-vacancy-head .btn{ width:100%; }
  .pg-vacancy-form{ padding:1.1rem; }
}


/* =====================================================================
   Imagery — figures, card pictures, leadership portraits, gallery
   ===================================================================*/

/* A framed illustration or photograph */
.pg-figure{
  border-radius:var(--pg-radius); overflow:hidden; background:var(--pg-sand);
  border:1px solid var(--pg-line); box-shadow:var(--pg-shadow); line-height:0;
}
.pg-figure img{ width:100%; height:auto; display:block; }

/* Picture strip at the top of a card */
.pg-card-figure{
  background:var(--pg-sand); border-bottom:1px solid var(--pg-line);
  line-height:0; overflow:hidden;
}
.pg-card-figure img{
  width:100%; height:172px; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.pg-card:hover .pg-card-figure img{ transform:scale(1.05); }
.pg-card{ overflow:hidden; }

/* Home page teaser strip */
.pg-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.pg-strip-item{
  position:relative; border-radius:14px; overflow:hidden; display:block;
  border:1px solid var(--pg-line); box-shadow:var(--pg-shadow); background:#fff;
}
.pg-strip-item img{ width:100%; height:170px; object-fit:cover; display:block; transition:transform .35s ease; }
.pg-strip-item:hover img{ transform:scale(1.06); }
.pg-strip-item span{
  position:absolute; left:0; right:0; bottom:0; padding:.7rem .8rem;
  background:linear-gradient(to top, rgba(12,40,70,.92), rgba(12,40,70,0));
  color:#fff; font-size:12.5px; font-weight:600; line-height:1.3;
}

/* ---------- Leadership ---------- */
.pg-leader .top{
  display:flex; align-items:flex-end; gap:1.2rem; padding:1.4rem 1.6rem .9rem;
  background:linear-gradient(140deg, var(--pg-navy-dark), var(--pg-navy) 60%, var(--pg-green) 160%);
}
.pg-leader .top .portrait{
  flex:0 0 108px; width:108px; height:132px; border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.14); border:2px solid rgba(228,196,83,.55);
  box-shadow:0 10px 24px rgba(0,0,0,.22); align-self:flex-end;
}
.pg-leader .top .portrait img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
}
.pg-leader .top .who{ padding-bottom:.5rem; }

/* ---------- Gallery ---------- */
.pg-gallery-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pg-tab{
  display:inline-flex; align-items:center; gap:.5rem; background:#fff;
  border:1px solid var(--pg-line); border-radius:999px; padding:.5rem 1.1rem;
  font-size:14px; font-weight:600; color:var(--pg-body); box-shadow:var(--pg-shadow);
}
.pg-tab span{
  background:var(--pg-green-soft); color:var(--pg-green); border-radius:999px;
  padding:.05rem .5rem; font-size:12px;
}
.pg-tab:hover{ border-color:var(--pg-green); color:var(--pg-green); }
.pg-tab.active{ background:var(--pg-navy); border-color:var(--pg-navy); color:#fff; }
.pg-tab.active span{ background:rgba(255,255,255,.18); color:var(--pg-gold-light); }

.pg-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:1.1rem;
}
.pg-shot{
  position:relative; margin:0; border-radius:14px; overflow:hidden; cursor:pointer;
  border:1px solid var(--pg-line); background:var(--pg-sand); box-shadow:var(--pg-shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.pg-shot:hover, .pg-shot:focus{ transform:translateY(-4px); box-shadow:var(--pg-shadow-lift); outline:none; }
.pg-shot:focus{ border-color:var(--pg-green); }
.pg-shot img{ width:100%; height:210px; object-fit:cover; display:block; transition:transform .4s ease; }
.pg-shot:hover img{ transform:scale(1.06); }
.pg-shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem .9rem .8rem;
  background:linear-gradient(to top, rgba(12,40,70,.94), rgba(12,40,70,.55) 55%, rgba(12,40,70,0));
  color:#fff;
}
.pg-shot figcaption .al{
  display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pg-gold-light); font-weight:700;
}
.pg-shot figcaption .cp{ display:block; font-size:14px; font-weight:600; line-height:1.35; }

/* ---------- Lightbox ---------- */
.pg-lightbox{
  position:fixed; inset:0; z-index:1080; display:none; place-items:center;
  background:rgba(9,20,32,.94); padding:2.5rem 1rem;
}
.pg-lightbox.open{ display:grid; }
.pg-lightbox figure{ margin:0; max-width:1100px; max-height:100%; text-align:center; }
.pg-lightbox img{
  max-width:100%; max-height:76vh; border-radius:12px; background:#fff;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.pg-lightbox figcaption{ color:#E7EDF3; margin-top:1rem; font-size:14.5px; }
.pg-lb-close{
  position:absolute; top:16px; right:20px; background:none; border:0; color:#fff;
  font-size:40px; line-height:1; cursor:pointer; opacity:.8;
}
.pg-lb-close:hover{ opacity:1; }
.pg-lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12);
  border:0; color:#fff; font-size:24px; width:52px; height:52px; border-radius:50%;
  cursor:pointer; display:grid; place-items:center;
}
.pg-lb-nav:hover{ background:rgba(255,255,255,.24); }
.pg-lb-nav.prev{ left:18px; }
.pg-lb-nav.next{ right:18px; }

@media (max-width: 767.98px){
  .pg-strip{ grid-template-columns:1fr 1fr; }
  .pg-strip-item:last-child{ display:none; }
  .pg-leader .top{ flex-direction:column; align-items:flex-start; }
  .pg-leader .top .portrait{ width:96px; height:116px; flex:none; }
  .pg-shot img{ height:180px; }
  .pg-lb-nav{ width:44px; height:44px; }
}


/* =====================================================================
   Language picker + Sinhala / Tamil typography
   ===================================================================*/
.pg-lang{ display:inline-flex; align-items:center; gap:.15rem; }
.pg-lang > i{ color:var(--pg-gold-light); margin-right:.35rem; font-size:13px; }
.pg-lang a{
  display:inline-block; padding:.16rem .55rem; border-radius:999px;
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,.82); line-height:1.5;
  border:1px solid transparent;
}
.pg-lang a:hover{ color:#fff; border-color:rgba(255,255,255,.35); }
.pg-lang a.active{
  background:var(--pg-gold); color:#1a1a1a; border-color:var(--pg-gold);
}
/* the copy inside the mobile drawer sits on white, not navy */
.pg-lang.drawer{ display:flex; gap:.4rem; }
.pg-lang.drawer a{
  flex:1 1 0; text-align:center; color:var(--pg-body); background:var(--pg-sand);
  border:1px solid var(--pg-line); padding:.45rem .3rem; font-size:13px;
}
.pg-lang.drawer a.active{ background:var(--pg-navy); color:#fff; border-color:var(--pg-navy); }

/* Sinhala and Tamil need a little more line height and a font that has the
   glyphs; without this the letters clip and run together. */
html[lang="si"] body,
html[lang="ta"] body{
  font-family:"Noto Sans Sinhala","Noto Sans Tamil","Iskoola Pota","Latha",
              "Inter","Segoe UI",system-ui,sans-serif;
  line-height:1.85;
}
html[lang="si"] h1, html[lang="ta"] h1,
html[lang="si"] h2, html[lang="ta"] h2,
html[lang="si"] h3, html[lang="ta"] h3{ line-height:1.45; letter-spacing:0; }
html[lang="si"] .pg-hero h1, html[lang="ta"] .pg-hero h1{ font-size:clamp(1.7rem, 4vw, 2.9rem); }
html[lang="si"] .pg-menu a, html[lang="ta"] .pg-menu a{ font-size:13.5px; padding:.5rem .75rem; }
html[lang="si"] .pg-menu a i, html[lang="ta"] .pg-menu a i{ display:none; }
html[lang="si"] .pg-eyebrow, html[lang="ta"] .pg-eyebrow{ letter-spacing:.06em; }
html[lang="si"] .pg-kicker, html[lang="ta"] .pg-kicker{ letter-spacing:.06em; }
html[lang="si"] .btn, html[lang="ta"] .btn{ line-height:1.6; }


/* =====================================================================
   Palette tuning — the few places where bright yellow must sit on black
   rather than inherit the text-safe deep yellow.
   ===================================================================*/
.btn-gold{ background:var(--pg-yellow); border-color:var(--pg-yellow); color:var(--pg-black); }
.btn-gold:hover{ background:#FFDE3D; border-color:#FFDE3D; color:var(--pg-black); }
.pg-rule{ background:var(--pg-yellow); }          /* decorative bar, not text */
.badge-gold{ background:var(--pg-yellow); color:var(--pg-black); }
.text-yellow{ color:var(--pg-yellow); }
.bg-black{ background:var(--pg-black); }

/* Hero base: black into green, with a yellow glow top-right. The slider
   layers photographs over this, so it stays visible while images load and
   shows through wherever a slide has no image. */
.pg-hero{
  background:
    radial-gradient(1100px 460px at 84% -14%, rgba(255,212,0,.30), transparent 62%),
    linear-gradient(140deg, var(--pg-black) 0%, var(--pg-black-soft) 38%, var(--pg-green-dark) 100%);
}
.pg-eyebrow{ color:var(--pg-yellow); border-color:rgba(255,212,0,.45); }