/* ═══════════════════════════════════════════════════════════
   SAUDI UNITED — inner-page components
   Loaded after style.css; inherits the same design tokens.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ PAGE HERO (inner pages) ═══════════ */
.phero{position:relative;overflow:hidden;background:var(--b-900);padding-block:96px 88px}
.phero-media{position:absolute;inset:0}
.phero-media img{width:100%;height:100%;object-fit:cover;opacity:.34}
.phero-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,var(--b-900) 4%,rgba(7,20,56,.72) 60%,rgba(5,13,36,.8) 100%),
             radial-gradient(110% 80% at 80% 20%,rgba(32,56,138,.42),transparent 62%)}
.phero .wrap{position:relative;z-index:3}
.phero h1{color:#fff;max-width:900px}
.phero-sub{font-size:17.5px;line-height:1.95;color:rgba(233,238,248,.72);max-width:640px;margin-top:20px;font-weight:300}
.crumb{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(233,238,248,.6);margin-bottom:22px;flex-wrap:wrap}
.crumb a{transition:.2s}
.crumb a:hover{color:#fff}

/* ═══════════ VISION / MISSION / VALUES ═══════════ */
.vm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vm{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:38px 32px;transition:.3s var(--ease)}
.vm:hover{box-shadow:var(--e3);transform:translateY(-4px);border-color:var(--b-200)}
.vm-ico{width:60px;height:60px;border-radius:17px;margin-bottom:24px;
  background:linear-gradient(145deg,var(--b-050),var(--b-100));border:1px solid var(--b-100);
  color:var(--b-500);display:flex;align-items:center;justify-content:center}
.vm-ico svg{width:29px;height:29px}
.vm h3{font-size:21px;margin-bottom:13px}
.vm p{font-size:15px;color:var(--body);line-height:1.95}
@media(max-width:900px){.vm-grid{grid-template-columns:1fr}}

/* ═══════════ WHY US ═══════════ */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.why{background:var(--s-050);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 32px;position:relative;transition:.3s var(--ease)}
.why:hover{background:var(--white);box-shadow:var(--e2);border-color:var(--b-200)}
.wn{position:absolute;inset-block-start:26px;inset-inline-end:30px;font-size:40px;font-weight:900;
  color:var(--s-200);line-height:1;letter-spacing:-.04em;transition:.3s}
.why:hover .wn{color:var(--b-100)}
.why h4{font-size:19px;margin-bottom:12px;max-width:76%}
.why p{font-size:14.8px;color:var(--body);line-height:1.95}
@media(max-width:820px){.why-grid{grid-template-columns:1fr}}

/* ═══════════ SERVICE DETAIL ═══════════ */
.svc-detail .sd-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.svc-detail.flip .sd-ph{order:-1}
.svc-detail .eyebrow .num{font-size:15px;font-weight:900;letter-spacing:0}
.sd-ph{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e4);aspect-ratio:16/11;background:var(--b-900)}
.sd-ph img{width:100%;height:100%;object-fit:cover;transition:1s var(--ease-out)}
.sd-ph:hover img{transform:scale(1.04)}
.sd-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin-top:26px}
.sd-list li{font-size:14.5px;color:var(--body);display:flex;gap:10px;align-items:flex-start;line-height:1.7}
.sd-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--b-400);flex-shrink:0;margin-top:9px}
@media(max-width:900px){
  .svc-detail .sd-grid{grid-template-columns:1fr;gap:40px}
  .svc-detail.flip .sd-ph{order:0}
  .sd-list{grid-template-columns:1fr}
}

/* ═══════════ CLASSIFICATION CARDS ═══════════ */
.class-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.class-card{background:var(--blue-g);color:#fff;border-radius:var(--r-lg);padding:34px 32px;
  position:relative;overflow:hidden;box-shadow:var(--e-blue)}
.class-card::before{content:'';position:absolute;inset:0;background-image:var(--lattice);opacity:.55}
.class-card.wide{grid-column:1/-1;background:var(--white);color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--e1)}
.class-card.wide::before{display:none}
.class-card>*{position:relative;z-index:2}
.cc-top{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-bottom:12px}
.class-card.wide .cc-top{color:var(--b-500)}
.class-card h3{font-size:23px;margin-bottom:22px}
.cc-rows{display:grid;gap:1px;background:rgba(255,255,255,.18);border-radius:10px;overflow:hidden}
.class-card.wide .cc-rows{background:var(--line)}
.cc-rows>div{background:rgba(255,255,255,.08);padding:14px 18px;display:flex;
  justify-content:space-between;gap:16px;font-size:14.5px}
.class-card.wide .cc-rows>div{background:var(--s-050)}
.cc-rows>div span{opacity:.84}
.cc-rows>div b{font-weight:800}
@media(max-width:820px){.class-grid{grid-template-columns:1fr}}

/* ═══════════ CERTIFICATE ITEM (clickable) ═══════════ */
.cert-item{cursor:zoom-in;margin:0}
.cert-item .pv{position:relative}
.cert-item .pv::after{content:'\2922';position:absolute;inset-block-start:12px;inset-inline-end:12px;
  width:32px;height:32px;border-radius:8px;background:rgba(13,21,38,.62);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  opacity:0;transition:.25s var(--ease)}
.cert-item:hover .pv::after{opacity:1}
.cert-item figcaption{display:block}

/* ═══════════ ORG CHART ═══════════ */
.org{display:flex;flex-direction:column;align-items:center;padding:14px 0}
.org-lvl{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;width:100%}
.org-lvl.wrap4{max-width:1000px}
.org-line{width:2px;height:30px;background:linear-gradient(var(--b-300),var(--line-2))}
.org-box{background:var(--white);border:1.5px solid var(--line-2);border-radius:var(--r);
  padding:15px 26px;font-size:15px;font-weight:700;color:var(--ink);
  box-shadow:var(--e1);transition:.26s var(--ease);text-align:center}
.org-box:hover{border-color:var(--b-400);color:var(--b-500);transform:translateY(-2px);box-shadow:var(--e2)}
.org-box.top{background:var(--blue-g);color:#fff;border-color:transparent;
  font-size:17px;padding:18px 40px;box-shadow:var(--e-blue)}
.org-box.mid{background:var(--b-050);border-color:var(--b-200);color:var(--b-600)}
.org-box.sm{font-size:13.5px;font-weight:600;padding:12px 18px}
@media(max-width:620px){
  .org-box{font-size:13.5px;padding:12px 16px}
  .org-box.top{font-size:15px;padding:14px 24px}
}

/* ═══════════ TEAM EXTRAS ═══════════ */
.team-grid.lead{grid-template-columns:repeat(3,1fr);max-width:1000px;margin-inline:auto}
.member .mq{font-size:13.8px;color:var(--muted);line-height:1.85;margin-top:12px;font-style:italic}
@media(max-width:900px){.team-grid.lead{grid-template-columns:1fr}}

/* ═══════════ CONTACT ═══════════ */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start}
.ci-list{display:grid;gap:12px;margin-top:32px}
.ci{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--white);transition:.26s var(--ease)}
a.ci:hover{border-color:var(--b-300);background:var(--b-050)}
.ci-ico{width:44px;height:44px;border-radius:12px;flex-shrink:0;background:var(--b-050);
  color:var(--b-500);display:flex;align-items:center;justify-content:center;border:1px solid var(--b-100)}
.ci-ico svg{width:21px;height:21px}
.ci-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.ci-tx .k{font-size:12.5px;color:var(--muted);font-weight:600}
.ci-tx .v{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.6;word-break:break-word}
.ci-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:38px 34px;box-shadow:var(--e3)}
.form-card form{display:grid;gap:16px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-card label{display:grid;gap:7px;font-size:13.5px;font-weight:600;color:var(--s-700)}
.form-card input,.form-card select,.form-card textarea{
  font-family:inherit;font-size:15px;color:var(--ink);
  padding:13px 15px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--s-050);transition:.22s var(--ease);width:100%}
.form-card textarea{resize:vertical;line-height:1.75}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{
  outline:none;border-color:var(--b-400);background:var(--white);box-shadow:0 0 0 4px rgba(54,81,181,.11)}
.form-card input::placeholder,.form-card textarea::placeholder{color:var(--s-400)}
.f-note{margin-top:4px;text-align:center;line-height:1.7}
@media(max-width:980px){.contact-grid{grid-template-columns:1fr;gap:48px}}
@media(max-width:560px){.f-row{grid-template-columns:1fr}.form-card{padding:28px 22px}}

/* ═══════════ MAP ═══════════ */
.map-card{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--e3);height:440px;background:var(--s-100)}
.map-card iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.18)}
@media(max-width:620px){.map-card{height:320px}}

/* ═══════════ NAV CTA ═══════════ */
.nav-cta{height:40px;padding-inline:22px;font-size:14px}
@media(max-width:1180px){.nav-cta{display:none}}

/* ═══════════ ABOUT: RECORDS TABLE ═══════════ */
table.data tbody td:first-child.name{width:38%;min-width:200px}

/* ═══════════ EXECUTION CAPABILITIES ═══════════ */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cap{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;transition:.28s var(--ease)}
.cap:hover{box-shadow:var(--e2);border-color:var(--b-200);transform:translateY(-3px)}
.cap-ico{width:48px;height:48px;border-radius:13px;margin-bottom:18px;
  background:var(--b-050);border:1px solid var(--b-100);color:var(--b-500);
  display:flex;align-items:center;justify-content:center}
.cap-ico svg{width:24px;height:24px}
.cap h4{font-size:17px;margin-bottom:9px}
.cap p{font-size:14px;color:var(--body);line-height:1.9}
@media(max-width:900px){.cap-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cap-grid{grid-template-columns:1fr}}

/* ═══════════ BRAND LOGO (official lockup) ═══════════ */
.brand{gap:0}
.brand-logo{height:46px;width:auto;object-fit:contain;flex-shrink:0;display:block}
.foot .brand-logo{height:52px;opacity:.95}
.drawer .brand-logo{height:42px}
@media(max-width:820px){.brand-logo{height:38px}}

/* ═══════════ DEPARTMENT CARDS (no portrait) ═══════════ */
.dept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dept{
  display:flex;align-items:center;gap:16px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;transition:.26s var(--ease);
}
.dept:hover{border-color:var(--b-200);box-shadow:var(--e2);transform:translateY(-3px)}
.dept-mono{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:var(--blue-g);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;letter-spacing:.02em;
  box-shadow:var(--e-blue);
}
.dept-tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.dept-tx .role{
  font-size:11.5px;font-weight:700;color:var(--b-500);
  letter-spacing:.06em;text-transform:uppercase;
}
.dept-tx .nm{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.4}
@media(max-width:900px){.dept-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dept-grid{grid-template-columns:1fr}}