/* ===========================================================
   PHK GROUP — Corporate Site Design System
   Distinct from the flagship phkgroup.in site: institutional,
   photography-led, multi-page. Same brand ownership (navy +
   brass, from the PHK emblem), different structural language.
   =========================================================== */

:root{
  --ink:#10151f;
  --ink-soft:#454f5e;
  --paper:#f6f5f2;
  --panel:#ffffff;
  --line:#dfe2e6;
  --navy:#0b1b33;
  --navy-mid:#16294a;
  --navy-tint:#eef1f6;
  --brass:#ad8a3d;
  --brass-deep:#8a6d2c;
  --slate:#5c6b7a;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  font-size:16.5px; line-height:1.62;
}
h1,h2,h3,h4{
  font-family:'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  font-weight:800; line-height:1.14; margin:0; color:var(--navy);
  letter-spacing:-0.01em;
}
h1{font-size:clamp(34px,4.6vw,58px); font-weight:800;}
h2{font-size:clamp(26px,3vw,38px);}
h3{font-size:19px; font-weight:700;}
p{margin:0 0 16px;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 32px;}

section{padding:76px 0;}
section.tight{padding:52px 0;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:14px 26px; font-weight:700; font-size:15px;
  border-radius:3px; border:1.5px solid transparent; cursor:pointer;
  font-family:'Source Sans 3', sans-serif;
}
.btn-primary{background:var(--brass); color:var(--navy); border-color:var(--brass);}
.btn-primary:hover{background:var(--brass-deep); border-color:var(--brass-deep);}
.btn-outline{border-color:rgba(255,255,255,0.4); color:#fff;}
.btn-outline:hover{border-color:#fff; background:rgba(255,255,255,0.08);}
.btn-outline-dark{border-color:var(--navy); color:var(--navy);}
.btn-outline-dark:hover{background:var(--navy); color:#fff;}

/* ---------- Header / Nav ---------- */
header{background:var(--navy); border-bottom:1px solid rgba(255,255,255,0.08); position:sticky; top:0; z-index:40;}
header .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 32px;}
.brand{display:flex; align-items:center; gap:12px; color:#fff; font-family:'Libre Franklin',sans-serif; font-weight:800; font-size:18px; letter-spacing:0.01em;}
.brand img{height:38px; width:auto;}
.brand span{color:var(--brass);}
nav.primary{display:flex; align-items:center; gap:2px;}
nav.primary > a, .has-dropdown > button{
  color:#cfd6e2; font-size:14.5px; font-weight:600; padding:10px 14px;
  background:none; border:none; cursor:pointer; font-family:'Source Sans 3',sans-serif;
  display:flex; align-items:center; gap:5px;
}
nav.primary > a:hover, .has-dropdown > button:hover, nav.primary > a.active{color:#fff;}
.has-dropdown{position:relative;}
.dropdown-panel{
  position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--line);
  box-shadow:0 16px 32px rgba(11,27,51,0.16); min-width:280px; padding:10px;
  display:none; border-radius:4px; margin-top:6px;
}
.has-dropdown:hover .dropdown-panel, .has-dropdown:focus-within .dropdown-panel{display:block;}
.dropdown-panel a{display:block; padding:9px 12px; color:var(--ink); font-size:14px; border-radius:3px;}
.dropdown-panel a:hover{background:var(--navy-tint); color:var(--navy);}
.dropdown-panel .dd-heading{font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); padding:8px 12px 4px;}
.nav-toggle{display:none; flex-direction:column; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer;}
.nav-toggle span{width:22px; height:2px; background:#fff; border-radius:2px;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{background:var(--navy-tint); border-bottom:1px solid var(--line); padding:12px 0; font-size:13.5px; color:var(--slate);}
.breadcrumb a{color:var(--slate);}
.breadcrumb a:hover{color:var(--navy); text-decoration:underline;}

/* ---------- Hero (photography-led) ---------- */
.page-hero{background:var(--navy); color:#fff; padding:64px 0 56px;}
.page-hero h1{color:#fff;}
.page-hero p.lede{color:#c3cbdb; font-size:18px; max-width:640px; margin-top:14px;}

.home-hero{background:var(--navy); color:#fff; padding:0;}
.home-hero .grid{display:grid; grid-template-columns:1.05fr 0.95fr; align-items:stretch; min-height:520px;}
.home-hero .copy{padding:80px 56px 80px 32px; display:flex; flex-direction:column; justify-content:center;}
.home-hero .copy .kicker{color:var(--brass); font-size:14.5px; font-weight:700; margin-bottom:14px;}
.home-hero h1{color:#fff; margin-bottom:18px;}
.home-hero p.lede{color:#c3cbdb; font-size:18px; max-width:520px;}
.home-hero .cta-row{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- Photo placeholders ---------- */
.photo-placeholder{
  background:repeating-linear-gradient(135deg, #1c2c47, #1c2c47 12px, #223354 12px, #223354 24px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#c3cbdb; text-align:center; padding:28px; min-height:260px;
  border:1px solid rgba(255,255,255,0.12);
}
.photo-placeholder.light{
  background:repeating-linear-gradient(135deg, #e9ecf1, #e9ecf1 12px, #dfe4ec 12px, #dfe4ec 24px);
  color:var(--slate); border:1px solid var(--line);
}
.photo-placeholder svg{width:40px; height:40px; margin-bottom:12px; opacity:0.8;}
.photo-placeholder .ph-label{font-weight:700; font-size:14px; margin-bottom:4px;}
.photo-placeholder .ph-path{font-family:monospace; font-size:11.5px; opacity:0.75; word-break:break-all;}
.photo-placeholder.square{aspect-ratio:1/1; min-height:0;}
.photo-placeholder.portrait{aspect-ratio:3/4; min-height:0;}
.photo-placeholder.wide{aspect-ratio:16/9; min-height:0;}

/* ---------- Stat band ---------- */
.stat-band{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat-band .wrap{display:flex; flex-wrap:wrap;}
.stat-item{flex:1; min-width:180px; padding:36px 28px; border-left:1px solid var(--line);}
.stat-item:first-child{border-left:none;}
.stat-item .num{font-family:'Libre Franklin',sans-serif; font-weight:800; font-size:38px; color:var(--navy);}
.stat-item .lbl{color:var(--ink-soft); font-size:14.5px; margin-top:4px;}

/* ---------- Section head ---------- */
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{margin-bottom:14px;}
.section-head p{color:var(--ink-soft); font-size:16.5px;}

/* ---------- Sector cards (pillars) ---------- */
.sector-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.sector-card{background:var(--panel); padding:32px 28px; border-left:4px solid var(--brass);}
.sector-card h3{margin-bottom:10px;}
.sector-card p{color:var(--ink-soft); font-size:15px; margin-bottom:14px;}
.sector-card a.more{font-size:14px; font-weight:700; color:var(--navy);}
.sector-card a.more:hover{color:var(--brass-deep);}

/* ---------- Company directory ---------- */
.dir-toolbar{display:flex; gap:12px; margin-bottom:32px; flex-wrap:wrap;}
.dir-toolbar input, .dir-toolbar select{
  font-family:'Source Sans 3',sans-serif; font-size:14.5px; padding:11px 14px;
  border:1px solid var(--line); border-radius:3px; background:#fff; color:var(--ink);
}
.dir-toolbar input{flex:1; min-width:220px;}
.company-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.company-card{background:var(--panel); padding:22px 20px; display:flex; flex-direction:column; gap:8px;}
.company-card.hidden{display:none;}
.company-card img.logo{width:44px; height:44px; object-fit:contain; margin-bottom:4px;}
.company-card .sector-tag{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--brass-deep); font-weight:700;}
.company-card h4{font-family:'Libre Franklin',sans-serif; font-weight:700; font-size:16px; color:var(--navy); margin:0;}
.company-card p{font-size:13.5px; color:var(--ink-soft); margin:0;}

/* ---------- Leadership ---------- */
.leader-block{display:grid; grid-template-columns:320px 1fr; gap:48px; align-items:start;}
.leader-block .quote{border-left:3px solid var(--brass); padding-left:22px; font-size:19px; color:var(--navy); font-style:italic; margin:26px 0;}
.leader-block .cite{font-size:14px; color:var(--ink-soft); font-style:normal;}
.credential-list{list-style:none; margin:0; padding:0;}
.credential-list li{padding:9px 0; border-top:1px solid var(--line); font-size:15px; color:var(--ink-soft);}
.credential-list li:first-child{border-top:none;}

/* ---------- CSR program cards ---------- */
.csr-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px;}
.csr-card{background:var(--panel); border:1px solid var(--line);}
.csr-card .body{padding:22px 22px 26px;}
.csr-card h3{margin-bottom:8px;}
.csr-card p{color:var(--ink-soft); font-size:14.5px; margin:0;}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:6px;}

/* ---------- Timeline ---------- */
.timeline{border-left:2px solid var(--line); padding-left:32px; margin-left:6px;}
.timeline-item{position:relative; padding-bottom:36px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:''; position:absolute; left:-38px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--brass); border:2px solid var(--panel); box-shadow:0 0 0 2px var(--brass);}
.timeline-item .yr{font-family:'Libre Franklin',sans-serif; font-weight:800; color:var(--navy); font-size:15px; margin-bottom:4px;}
.timeline-item p{color:var(--ink-soft); font-size:15px; margin:0;}

/* ---------- Values ---------- */
.values-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.value-card{background:var(--panel); padding:26px 24px;}
.value-card h3{font-size:16px; margin-bottom:8px;}
.value-card p{font-size:14px; color:var(--ink-soft); margin:0;}

/* ---------- Form ---------- */
.corp-form{display:grid; gap:16px; max-width:560px;}
.corp-form label{font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:5px; display:block;}
.corp-form input, .corp-form select, .corp-form textarea{
  width:100%; font-family:'Source Sans 3',sans-serif; font-size:15px; padding:12px 14px;
  border:1px solid var(--line); border-radius:3px; background:#fff; color:var(--ink);
}
.corp-form textarea{min-height:120px; resize:vertical;}
.form-status{font-size:14px; padding:12px 14px; display:none;}
.form-status.show{display:block;}
.form-status.success{background:#eaf3ea; color:#2b5c33; border:1px solid #b9d9bc;}
.form-status.error{background:#f8e9e5; color:#8a3b24; border:1px solid #e3bdae;}

/* ---------- Footer ---------- */
footer{background:var(--navy); color:#c3cbdb; padding:60px 0 26px; margin-top:0;}
footer .foot-grid{display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:32px;}
footer h5{color:#fff; font-family:'Libre Franklin',sans-serif; font-size:13.5px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px;}
footer .brand{margin-bottom:14px;}
footer p{font-size:14px; color:#9aa6bb;}
footer ul{list-style:none; margin:0; padding:0;}
footer li{margin-bottom:10px; font-size:14px;}
footer a:hover{color:#fff;}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.1); margin-top:44px; padding-top:22px; font-size:13px; color:#8291a8; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ---------- Accessibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}
.skip-link{position:absolute; left:-9999px; background:var(--navy); color:#fff; padding:12px 20px; z-index:100;}
.skip-link:focus{left:16px; top:16px;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .home-hero .grid{grid-template-columns:1fr;}
  .home-hero .copy{padding:56px 24px 40px;}
  .leader-block{grid-template-columns:1fr;}
  footer .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  nav.primary{display:none; position:absolute; top:100%; left:0; right:0; background:var(--navy); flex-direction:column; padding:10px 0; border-top:1px solid rgba(255,255,255,0.1);}
  nav.primary.open{display:flex;}
  nav.primary > a, .has-dropdown{width:100%;}
  .has-dropdown > button{width:100%; justify-content:space-between;}
  .dropdown-panel{position:static; box-shadow:none; border:none; display:none; margin:0; background:var(--navy-mid);}
  .dropdown-panel.open{display:block;}
  .dropdown-panel a{color:#cfd6e2;}
  .dropdown-panel a:hover{background:rgba(255,255,255,0.06); color:#fff;}
  .nav-toggle{display:flex;}
  header .wrap{position:relative; flex-wrap:wrap;}
  section{padding:52px 0;}
  .stat-item{flex:1 1 50%;}
  footer .foot-grid{grid-template-columns:1fr;}
}