/* about.php - Vision / Mission / Values, styled like the IT department's
   poster slides: near-black blue, faint cyan grid, corner brackets, mono labels.
   Loaded only by about.php (via ih_head's $css param), on top of style.css. */
.dash{--cyan:#27c5e8;--bg-dk:#0a1019;--ink-lt:#f4f7fb;--mute-lt:#a3b2c2;--line-lt:rgba(255,255,255,.1);
      --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace}

.poster{position:relative;overflow:hidden;color:var(--ink-lt);border-radius:16px;padding:26px 34px 32px;
        box-shadow:var(--shadow);
        background:
          radial-gradient(800px 360px at 50% -12%,rgba(39,197,232,.11),transparent 70%),
          linear-gradient(rgba(39,197,232,.05) 1px,transparent 1px) 0 0/34px 34px,
          linear-gradient(90deg,rgba(39,197,232,.05) 1px,transparent 1px) 0 0/34px 34px,
          var(--bg-dk)}

/* four corner brackets */
.cb{position:absolute;width:22px;height:22px;border:0 solid var(--cyan);opacity:.55;pointer-events:none}
.cb.tl{top:14px;left:14px;border-top-width:1.5px;border-left-width:1.5px}
.cb.tr{top:14px;right:14px;border-top-width:1.5px;border-right-width:1.5px}
.cb.bl{bottom:14px;left:14px;border-bottom-width:1.5px;border-left-width:1.5px}
.cb.br{bottom:14px;right:14px;border-bottom-width:1.5px;border-right-width:1.5px}

/* "MISSION ........ 02 / 03" header row */
.p-head{position:relative;display:flex;justify-content:space-between;align-items:baseline;
        padding:6px 6px 14px;border-bottom:1px solid var(--line-lt);margin:0 0 26px}
.p-head::after{content:"";position:absolute;left:6px;bottom:-1px;width:44px;height:2px;background:var(--cyan)}
.p-label{font:700 .88rem var(--mono);letter-spacing:.4em;color:var(--cyan)}
.p-num{font:400 .8rem var(--mono);letter-spacing:.22em;color:#6f8196}

/* vision */
.poster.vision{margin:0 0 16px;padding-bottom:46px}
.vision-body{text-align:center;padding:30px 0 6px}
.vision-title{font-size:clamp(2.1rem,5.2vw,3.5rem);font-weight:800;line-height:1.08;letter-spacing:-.01em}
.vision-rule{width:90px;height:2px;background:var(--cyan);margin:26px auto 22px}
.vision-sub{font-size:clamp(1.2rem,2.6vw,1.7rem);color:var(--cyan);font-weight:500}

/* mission */
.mission-intro{font-size:1.1rem;line-height:1.65;margin:0 0 28px}
.p-sub{font:400 .78rem var(--mono);letter-spacing:.3em;word-spacing:.5em;color:var(--cyan);
       padding-bottom:10px;border-bottom:1px solid var(--line-lt)}
.commit{display:grid;grid-template-columns:34px 1fr;gap:0 12px;padding:16px 0;border-bottom:1px solid var(--line-lt)}
.commit:last-child{border-bottom:0}
.commit .n{font:400 .9rem var(--mono);color:var(--cyan);padding-top:3px}

/* shared title/description pair for commitments + values */
.commit h3,.value h3{margin:0 0 4px;font-size:1.15rem;font-weight:700;line-height:1.25;color:var(--ink-lt)}
.commit p,.value p{margin:0;color:var(--mute-lt);font-size:.95rem;line-height:1.55}

/* values */
.value{position:relative;padding:15px 0 15px 24px;border-bottom:1px solid var(--line-lt)}
.value:last-child{border-bottom:0}
.value::before{content:"";position:absolute;left:2px;top:23px;width:8px;height:8px;background:var(--cyan)}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.dash-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;
           border-top:1px solid var(--line);font:400 .74rem var(--mono);letter-spacing:.2em;color:var(--muted)}
.dash-foot .sq{display:block;width:8px;height:8px;background:var(--cyan)}

@media (max-width:1100px){ .dash-grid{grid-template-columns:1fr} }
@media (max-width:760px){
  .poster{padding:22px 20px 28px}
  .dash-foot{letter-spacing:.1em;font-size:.68rem;gap:10px}
}