/* Client round-2 updates: hero graphic, certifications, leadership, brochure cover, social icons, nav fixes */

/* One offset only: sections already carry scroll-margin-top, so the extra html padding double-counted it */
html{scroll-padding-top:0}

/* ---------- Nav fit: 7 links need a little more room below 1280px ---------- */
@media (max-width:1279px){
  .px-brochure-mini{display:none}
  .nl{padding:0 .85rem;font-size:16px}
}

/* ---------- Hero graphic ---------- */
.h-art{position:relative;width:100%;max-width:30rem;justify-self:end}
.h-art svg{display:block;width:100%;height:auto;overflow:visible}
.h-route{animation:h-flow 2.4s linear infinite}
.h-plane{animation:h-fly 5s ease-in-out infinite}
.h-ship{animation:h-bob 4.5s ease-in-out infinite}
.h-truck{animation:h-drive 6s ease-in-out infinite alternate}
@keyframes h-flow{to{stroke-dashoffset:-24}}
@keyframes h-fly{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes h-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes h-drive{from{transform:translateX(-8px)}to{transform:translateX(8px)}}
.h-chip{position:absolute;display:flex;align-items:center;gap:.65rem;padding:.7rem 1.6rem .7rem 1.1rem;background:#fff;color:var(--navy-d);
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);box-shadow:0 18px 30px -16px rgba(0,0,0,.5);
  animation:h-rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.5s + var(--i)*.2s)}
.h-chip{top:2%;left:-1%}
.h-chip.or{top:auto;left:auto;bottom:-5%;right:3%}
.h-chip .ic{flex:none;width:1.6rem;height:1.6rem;color:var(--or)}
.h-chip b{display:block;font-size:1.05rem;line-height:1.1;font-weight:700;font-style:italic;color:var(--navy)}
.h-chip span{display:block;margin-top:.1rem;font-size:.8rem;font-weight:600;color:var(--mute)}
@media (max-width:1023px){.h-art{justify-self:center;max-width:26rem}}
@media (max-width:480px){.h-chip{padding:.55rem 1.2rem .55rem .8rem}.h-chip b{font-size:.95rem}}
@media (prefers-reduced-motion:reduce){.h-route,.h-plane,.h-ship,.h-truck,.h-chip{animation:none}}

/* ---------- Certifications band (About) ---------- */
.c-band{display:grid;gap:1.4rem;align-items:center;margin-top:4rem;padding:1.6rem 1.8rem;background:#fff;border-left:6px solid var(--or);
  box-shadow:0 24px 44px -30px rgba(8,35,79,.55),inset 0 0 0 1px rgba(15,58,125,.1)}
.c-head{display:flex;align-items:center;gap:.75rem;font-size:1.3rem;font-style:italic;font-weight:700;color:var(--navy-d)}
.c-cards{display:grid;gap:1rem}
.c-card{display:flex;align-items:center;gap:1rem;padding:.9rem 1.4rem .9rem 1rem;background:#eef3fb;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.c-seal{display:grid;place-items:center;flex:none;width:3rem;height:3rem;border-radius:50%;background:var(--navy);color:#fff}
.c-card.or .c-seal{background:var(--or)}
.c-card strong{display:block;font-size:1.2rem;line-height:1.15;color:var(--navy-d)}
.c-card div>span{display:block;margin-top:.15rem;font-size:.9rem;color:var(--mute)}
@media (min-width:900px){
  .c-band{grid-template-columns:auto 1fr;gap:2.5rem;padding:1.5rem 2.2rem}
  .c-cards{grid-template-columns:1fr 1fr}
}

/* ---------- Leadership ---------- */
#leadership{scroll-margin-top:100px;position:relative;overflow:hidden;background:#f4f7fb}
#leadership::before{content:"";position:absolute;left:-12%;top:0;bottom:0;width:34%;background:#eaf1fb;transform:skewX(-14deg)}
#leadership>.mx-auto{position:relative;z-index:1}
.l-seam{position:absolute;left:0;right:0;bottom:-1px;z-index:2;width:100%;height:52px;overflow:visible;pointer-events:none}
.l-grid{display:grid;gap:1.5rem;margin-top:2.4rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
@media (min-width:1024px){.l-grid{grid-template-columns:repeat(3,1fr)}}
.l-card{position:relative;overflow:hidden;background:#fff;border-top:4px solid var(--or);box-shadow:0 24px 44px -30px rgba(8,35,79,.55),inset 0 0 0 1px rgba(15,58,125,.1);
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%);transition:transform .25s}
.l-card:hover{transform:translateY(-4px)}
.l-photo{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;color:rgba(255,255,255,.55);background:linear-gradient(150deg,var(--navy) 0,var(--navy-d) 100%)}
.l-photo::after{content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:10px;background:var(--or);transform:skewY(-2deg);transform-origin:left bottom}
.l-photo .ic{width:5rem;height:5rem;stroke-width:1.2}
.l-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.l-body{padding:1.3rem 1.5rem 1.6rem}
.l-body h3{font-size:1.3rem;font-weight:700;color:var(--navy-d)}
.l-role{margin-top:.15rem;font-size:.95rem;font-weight:700;color:var(--or)}
.l-bio{margin-top:.7rem;font-size:.95rem;line-height:1.6;color:var(--mute)}
.l-in{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;margin-top:1rem;background:#e6eefb;color:var(--navy);clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);transition:.2s}
.l-in:hover{background:var(--or);color:#fff}
.l-in svg{width:1rem;height:1rem;fill:currentColor}
@media (min-width:1024px){.l-grid-2{grid-template-columns:repeat(2,1fr);max-width:58rem;margin-left:auto;margin-right:auto}}
@media (prefers-reduced-motion:reduce){.l-card{transition:none}}

/* ---------- Brochure: real front page ---------- */
.px-book-stage{height:auto;display:grid;place-items:center;padding:10px 0 44px}
.px-book-shadow{left:50%;right:auto;bottom:28px;width:280px;transform:translateX(-50%) rotate(-3deg)}
.px-cover{position:relative;display:block;width:min(100%,330px);box-shadow:0 35px 70px rgba(0,0,0,.42);transform:perspective(900px) rotateY(-9deg) rotateZ(1.5deg);transition:transform .35s ease}
.px-cover:hover{transform:perspective(900px) rotateY(-3deg) rotateZ(0deg) translateY(-6px)}
.px-cover img{display:block;width:100%;height:auto}
.px-cover-tag{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);padding:.5rem 1.6rem;background:var(--or);color:#fff;font-size:13px;font-weight:700;white-space:nowrap;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
@media (prefers-reduced-motion:reduce){.px-cover{transition:none}}

/* ---------- Social icons + certification chips ---------- */
.u-social{display:flex;align-items:center;gap:.35rem}
.u-social a,.u-social span{display:grid;place-items:center;width:1.9rem;height:1.9rem;color:#c9d8f2;transition:color .2s,background .2s}
.u-social a:hover{color:#fff;background:var(--or)}
.u-social svg{width:1.15rem;height:1.15rem;fill:currentColor}
.f-cert{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.f-cert span{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem;border:1px solid rgba(255,255,255,.22);font-size:12px;font-weight:700;color:#fff}
.f-cert svg{width:.95rem;height:.95rem;fill:none;stroke:var(--or);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#drawer .f-social{margin:.9rem 0 0}

/* ---------- Hero media frame (brochure artwork, animated) ---------- */
.h-media{position:relative;width:100%;max-width:33rem;justify-self:end;filter:drop-shadow(0 28px 34px rgba(3,15,40,.5))}
.h-media::before{content:"";position:absolute;left:-18px;bottom:-14px;width:46%;height:10px;background:var(--or);transform:skewX(-24deg)}
.h-frame{position:relative;overflow:hidden;aspect-ratio:4/3;background:#0b2f6b;clip-path:polygon(30px 0,100% 0,calc(100% - 30px) 100%,0 100%)}
.h-frame img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:72% 62%;animation:h-kb 22s ease-in-out infinite alternate}
.h-jet{position:absolute;left:-300px;top:22%;display:flex;align-items:center;transform:rotate(-8deg);animation:h-jet 17s linear infinite}
.h-jet i{flex:none;width:200px;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8))}
.h-jet svg{flex:none;width:58px;height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.h-tag{position:absolute;left:40px;bottom:18px;padding:.4rem 1rem .4rem .9rem;background:rgba(8,35,79,.82);border-left:4px solid var(--or);color:#fff;font-size:.9rem;font-weight:700;font-style:italic;letter-spacing:.02em}
@keyframes h-kb{from{transform:scale(1)}to{transform:scale(1.1) translate(-2%,-1.5%)}}
@keyframes h-jet{from{left:-300px;top:24%}to{left:105%;top:6%}}
@media (max-width:1023px){.h-media{justify-self:center;max-width:30rem}}
@media (prefers-reduced-motion:reduce){.h-frame img,.h-jet{animation:none}.h-jet{left:58%;top:12%}}