:root {
    --navy: #0b2d4d;
    --blue: #1266a8;
    --green: #16826a;
    --gold: #c99a32;
    --text: #17212b;
    --muted: #5f6b76;
    --soft: #f4f7f8;
    --white: #ffffff;
    --border: #dfe6ea;
    --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--text);
    background: var(--white);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    line-height: 1.7;
}

a { color: inherit; }
.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.narrow { max-width: 820px; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

.header-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.brand img { display: block; width: auto; height: 64px; max-width: 190px; object-fit: contain; }

.main-nav { display: flex; gap: 26px; font-size: .94rem; font-weight: 600; }
.main-nav a { text-decoration: none; }
.main-nav a:hover { color: var(--blue); }

.hero {
    min-height: 620px;
    display: grid;
    align-items: center;
    background:
        radial-gradient(circle at 80% 20%, rgba(22,130,106,.18), transparent 30%),
        linear-gradient(135deg, #f7fafc 0%, #eaf3f8 52%, #f6faf8 100%);
    border-bottom: 1px solid var(--border);
}

.hero-content { padding: 90px 0; }
.eyebrow, .section-label {
    margin: 0 0 14px;
    color: var(--green);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.hero h1 {
    max-width: 850px;
    margin: 0 0 24px;
    color: var(--navy);
    font-size: clamp(2.7rem, 6vw, 5.5rem);
    line-height: 1.03;
    letter-spacing: -.04em;
}

.hero-lead {
    max-width: 760px;
    margin: 0 0 12px;
    font-size: clamp(1.2rem, 2.2vw, 1.65rem);
}

.hero-copy { max-width: 720px; margin: 0; color: var(--muted); font-size: 1.05rem; }

.section { padding: 100px 0; }

.section h2 {
    margin: 0 0 24px;
    color: var(--navy);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -.025em;
}

.section p { font-size: 1.05rem; }

.section-dark { color: #eaf2f7; background: var(--navy); }
.section-dark h2 { color: var(--white); }
.section-dark .section-label { color: #78c6ad; }
.section-dark .lead { color: #d4e1e9; }

.lead { max-width: 820px; color: var(--muted); font-size: 1.18rem !important; }

.principles-grid {
    margin-top: 45px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.16);
}

.principles-grid article { padding: 30px; background: rgba(255,255,255,.035); }
.principles-grid h3 { margin: 0 0 8px; color: inherit; }
.principles-grid p { margin: 0; color: #c9d7df; font-size: .96rem; }

.dqpt-grid {
    margin-top: 45px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.dqpt-card {
    padding: 34px 28px;
    border: 1px solid var(--border);
    border-top: 4px solid var(--blue);
    background: #fff;
}

.dqpt-letter {
    display: block;
    margin-bottom: 18px;
    color: var(--green);
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
}

.dqpt-card h3 { margin: 0 0 8px; color: var(--navy); }
.dqpt-card p { margin-bottom: 0; color: var(--muted); font-size: .96rem; }

.quality-note {
    margin-top: 35px;
    padding: 24px 28px;
    border-left: 4px solid var(--gold);
    background: #faf8f1;
    color: var(--navy);
}

/* Vision / Mission focus interaction */
.vision-mission-section {
    background:
        linear-gradient(135deg, #f4f7f8 0%, #edf4f5 100%);
}

.vision-mission {
    display: flex;
    align-items: stretch;
    gap: 18px;
    min-height: 390px;
    margin-top: 45px;
}

.vm-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.86);
    transition:
        flex-grow .45s ease,
        transform .45s ease,
        opacity .45s ease,
        box-shadow .45s ease,
        background-color .45s ease;
}

.vm-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5px;
    background: var(--blue);
    transform: scaleX(.35);
    transform-origin: center;
    transition: transform .45s ease, background-color .45s ease;
}

.vm-mission::after { background: var(--green); }

.vm-content { max-width: 760px; }

.vm-kicker {
    display: block;
    margin-bottom: 18px;
    color: var(--green);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .2em;
}

.vm-card h3 {
    margin: 0 0 22px;
    color: var(--navy);
    font-size: clamp(1.45rem, 2.4vw, 2.25rem);
    line-height: 1.2;
}

.vm-card p {
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
}

.vm-focus-label {
    align-self: flex-start;
    padding: 7px 12px;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    opacity: .55;
    transition: opacity .35s ease, color .35s ease, border-color .35s ease;
}

/* When Vision is hovered/focused, Vision becomes dominant */
.vision-mission:has(.vm-vision:hover) .vm-vision,
.vision-mission:has(.vm-vision:focus-visible) .vm-vision {
    flex-grow: 2.2;
    transform: translateY(-4px);
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(11,45,77,.14);
}

.vision-mission:has(.vm-vision:hover) .vm-mission,
.vision-mission:has(.vm-vision:focus-visible) .vm-mission {
    flex-grow: .8;
    opacity: .52;
    transform: scale(.985);
}

.vision-mission:has(.vm-vision:hover) .vm-vision::after,
.vision-mission:has(.vm-vision:focus-visible) .vm-vision::after {
    transform: scaleX(1);
}

.vision-mission:has(.vm-vision:hover) .vm-vision .vm-focus-label,
.vision-mission:has(.vm-vision:focus-visible) .vm-vision .vm-focus-label {
    opacity: 1;
    color: var(--blue);
    border-color: rgba(18,102,168,.35);
}

/* When Mission is hovered/focused, Mission becomes dominant */
.vision-mission:has(.vm-mission:hover) .vm-mission,
.vision-mission:has(.vm-mission:focus-visible) .vm-mission {
    flex-grow: 2.2;
    transform: translateY(-4px);
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(22,130,106,.14);
}

.vision-mission:has(.vm-mission:hover) .vm-vision,
.vision-mission:has(.vm-mission:focus-visible) .vm-vision {
    flex-grow: .8;
    opacity: .52;
    transform: scale(.985);
}

.vision-mission:has(.vm-mission:hover) .vm-mission::after,
.vision-mission:has(.vm-mission:focus-visible) .vm-mission::after {
    transform: scaleX(1);
}

.vision-mission:has(.vm-mission:hover) .vm-mission .vm-focus-label,
.vision-mission:has(.vm-mission:focus-visible) .vm-mission .vm-focus-label {
    opacity: 1;
    color: var(--green);
    border-color: rgba(22,130,106,.35);
}

.contact a { color: var(--blue); font-weight: 600; text-decoration: none; }

.site-footer {
    padding: 28px 0;
    color: #cbd5dc;
    background: #071f35;
    font-size: .88rem;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.footer-inner p { margin: 0; }

@media (max-width: 850px) {
    .main-nav { display: none; }
    .principles-grid { grid-template-columns: repeat(2, 1fr); }
    .dqpt-grid { grid-template-columns: repeat(2, 1fr); }

    .vision-mission {
        flex-direction: column;
        min-height: auto;
    }

    .vm-card,
    .vision-mission:has(.vm-vision:hover) .vm-vision,
    .vision-mission:has(.vm-mission:hover) .vm-mission,
    .vision-mission:has(.vm-vision:focus-visible) .vm-vision,
    .vision-mission:has(.vm-mission:focus-visible) .vm-mission {
        flex: none;
        min-height: 300px;
        transform: none;
    }
}

@media (max-width: 560px) {
    .container { width: min(var(--max), calc(100% - 28px)); }
    .header-inner { min-height: 68px; }
    .brand img { width: auto; height: 56px; max-width: 165px; }
    .hero { min-height: auto; }
    .hero-content { padding: 72px 0; }
    .section { padding: 72px 0; }
    .principles-grid, .dqpt-grid { grid-template-columns: 1fr; }
    .vm-card { padding: 32px 26px; }
    .footer-inner { flex-direction: column; }
}


/* VKEC Homepage refinement */
.hero { padding: 88px 0 92px; overflow: hidden; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); gap:48px; align-items:center; }
.hero-copy .eyebrow, .section-kicker { letter-spacing:.16em; font-size:.75rem; font-weight:800; color:#1f7a70; }
.hero h1 { font-size:clamp(2.8rem,6vw,5.5rem); line-height:.98; margin:.35rem 0 1.35rem; }
.hero h1 span { color:#1f7a70; }
.hero-lead { max-width:760px; font-size:1.18rem; line-height:1.8; }
.hero-dqpt { margin-top:28px; font-size:1rem; }
.hero-mark { position:relative; min-height:300px; display:grid; place-items:center; }
.hero-ring { position:absolute; width:270px; height:270px; border:1px solid rgba(31,122,112,.28); border-radius:50%; animation:heroPulse 5s ease-in-out infinite; }
.hero-ring:after { content:""; position:absolute; inset:22px; border:1px dashed rgba(11,45,77,.2); border-radius:50%; }
.hero-initials { font:700 5rem/1 Georgia,serif; color:#0b2d4d; position:relative; z-index:1; }
.hero-caption { position:absolute; bottom:22px; letter-spacing:.12em; text-transform:uppercase; font-size:.68rem; color:#657585; }
@keyframes heroPulse { 0%,100%{transform:scale(.96);opacity:.7} 50%{transform:scale(1.03);opacity:1} }

.narrow { max-width:920px; }
.center { text-align:center; }
.section-heading { max-width:900px; margin-bottom:42px; }
.section-heading h2 { margin:.4rem 0 1rem; }
.section-heading p:last-child { color:#5d6a76; line-height:1.8; }

.vm-interactive { display:flex; gap:14px; min-height:430px; }
.vm-card { flex:1 1 0; padding:42px; border-radius:24px; background:#fff; border:1px solid rgba(11,45,77,.1); transition:flex .55s cubic-bezier(.2,.8,.2,1), transform .35s ease, box-shadow .35s ease, opacity .35s ease; overflow:hidden; cursor:default; }
.vm-interactive:hover .vm-card:not(:hover), .vm-card:focus:not(:focus-visible) { opacity:.58; }
.vm-card:hover, .vm-card:focus-visible { flex:1.8 1 0; transform:translateY(-4px); box-shadow:0 24px 55px rgba(11,45,77,.12); outline:none; }
.vm-label { display:block; letter-spacing:.15em; font-size:.72rem; font-weight:800; color:#1f7a70; margin-bottom:24px; }
.vm-card h3 { font-size:clamp(1.5rem,2.5vw,2.2rem); line-height:1.15; max-width:480px; }
.vm-detail { max-width:620px; opacity:.85; line-height:1.8; }

.oe-flow {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  position:relative;
  padding:10px 0 18px;
}
.oe-flow:before {
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  top:92px;
  height:1px;
  background:rgba(31,122,112,.28);
  z-index:0;
}
.oe-flow > div {
  position:relative;
  z-index:1;
  width:150px;
  height:150px;
  flex:0 0 150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  border:1px solid rgba(11,45,77,.14);
  border-radius:50%;
  background:#fff;
  box-shadow:0 8px 24px rgba(11,45,77,.06);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.oe-flow > div:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(11,45,77,.12);
  border-color:rgba(31,122,112,.45);
}
.oe-flow > div:not(:last-child):after {
  content:"→";
  position:absolute;
  right:-28px;
  top:50%;
  transform:translateY(-50%);
  color:#1f7a70;
  font-size:1rem;
  font-weight:800;
}
.oe-flow strong {
  display:block;
  font-size:.68rem;
  color:#80909d;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.oe-flow span {
  display:block;
  font-weight:800;
  font-size:.88rem;
  line-height:1.15;
  margin-bottom:5px;
}
.oe-flow small {
  display:block;
  color:#657585;
  line-height:1.25;
  font-size:.66rem;
  max-width:105px;
}

.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.principle-grid > div { padding:25px; border:1px solid rgba(11,45,77,.1); border-radius:18px; }
.principle-grid b { display:block; margin-bottom:8px; }
.principle-grid span { color:#657585; line-height:1.65; font-size:.92rem; }
.closing { padding-bottom:110px; }
.text-link { color:#0b2d4d; font-weight:800; text-decoration:none; border-bottom:1px solid #1f7a70; padding-bottom:3px; }

@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-mark { min-height:180px; }
  .oe-flow { display:grid; grid-template-columns:repeat(3,150px); justify-content:center; }
  .oe-flow:before { left:18%; right:18%; top:92px; }
  .oe-flow > div:nth-child(3n):after { display:none; }
  .principle-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px) {
  .hero { padding:58px 0 70px; }
  .hero h1 { font-size:clamp(2.4rem,12vw,4rem); }
  .vm-interactive, .dqpt-interactive { flex-direction:column; min-height:0; }
  .vm-card, .dqpt-card { flex:auto; }
  .vm-card:hover, .vm-card:focus-visible, .dqpt-card:hover, .dqpt-card:focus-visible { flex:auto; transform:none; }
  .dqpt-content p { opacity:1; transform:none; }
  .oe-flow { grid-template-columns:1fr 1fr; }
  .principle-grid { grid-template-columns:1fr; }
}

@media (max-width:680px) {
  .oe-flow { display:flex; flex-direction:column; align-items:center; gap:12px; }
  .oe-flow:before { left:50%; right:auto; top:0; bottom:0; width:1px; height:auto; }
  .oe-flow > div { width:145px; height:145px; flex:0 0 145px; }
  .oe-flow > div:after,
  .oe-flow > div:nth-child(3n):after { display:none !important; }
}