/* ==========================================================================
   Inner page styles (About, Services, Education, Contact)
   ========================================================================== */

/* ----- Page hero ----- */
.page-hero {
  background:
    radial-gradient(900px 380px at 90% -20%, rgba(212,162,58,0.16), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-700));
  color: var(--blue-100); padding-block: clamp(3rem, 7vw, 4.6rem);
}
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero p { color: #cdd9e8; max-width: 56ch; margin-top: 1rem; font-size: 1.1rem; }
.crumbs { font-size: 0.85rem; color: #9fb1c8; margin-bottom: 1rem; }
.crumbs a { color: var(--gold-300); }

/* ----- Generic section header ----- */
.sec-head { max-width: 56ch; margin-bottom: 2.6rem; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .eyebrow { display: block; margin-bottom: 0.7rem; }
.sec-head p { color: var(--ink-500); margin-top: 0.7rem; }

/* ----- Value / split blocks ----- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media {
  border-radius: var(--radius-lg); min-height: 320px; box-shadow: var(--shadow);
  background: linear-gradient(160deg, var(--navy-700), var(--blue-500));
  display: grid; place-items: center; color: rgba(255,255,255,0.9); padding: 2rem; text-align: center;
}
.split__media .big { font-family: var(--font-head); font-size: clamp(2.4rem, 5vw, 3.6rem); }
.split h2 { margin-bottom: 0.8rem; }
.split p { color: var(--ink-600, var(--ink-700)); }
.split ul.checks { margin-top: 1.2rem; display: grid; gap: 0.7rem; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* ----- Checklist ----- */
ul.checks li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--ink-700); }
ul.checks li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: var(--blue-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231d4e89' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ----- Stats ----- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stats .stat strong { display: block; font-family: var(--font-head); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--navy-900); }
.stats .stat span { color: var(--ink-500); font-size: 0.95rem; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ----- Service detail rows ----- */
.svc { display: grid; grid-template-columns: 64px 1fr; gap: 1.4rem; padding: 1.9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.svc__icon { width: 64px; height: 64px; border-radius: 16px; background: var(--blue-100); display: grid; place-items: center; }
.svc__icon svg { width: 30px; height: 30px; stroke: var(--navy-600); fill: none; stroke-width: 2; }
.svc h3 { margin-bottom: 0.4rem; }
.svc p { color: var(--ink-500); }
.svc ul.checks { margin-top: 0.9rem; }

/* ----- Education / learning cards ----- */
.topic-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; }
.topic-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.topic-card__top { padding: 1.4rem 1.6rem; background: linear-gradient(160deg, var(--navy-800), var(--navy-600)); color: #fff; }
.topic-card__tag { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-300); font-weight: 700; }
.topic-card__top h3 { color: #fff; margin-top: 0.4rem; font-size: 1.2rem; }
.topic-card__body { padding: 1.4rem 1.6rem; flex: 1; }
.topic-card__body p { color: var(--ink-500); font-size: 0.97rem; }
.topic-card__body .read { display: inline-block; margin-top: 1rem; font-weight: 600; font-size: 0.9rem; }

/* ----- FAQ ----- */
.faq { max-width: 760px; margin-inline: auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem 1.4rem; margin-bottom: 0.9rem; box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; font-family: var(--font-head); font-size: 1.1rem; color: var(--navy-900); padding: 1rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); color: var(--gold-600); font-size: 1.5rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-500); padding-bottom: 1.1rem; }

/* ----- Contact ----- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.6rem; align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.form { display: grid; gap: 1.1rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 540px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; font-size: 0.9rem; color: var(--navy-800); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink-900);
  padding: 0.8rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(47,111,176,0.15); }
.field textarea { resize: vertical; min-height: 130px; }
.form-note { background: var(--blue-100); color: var(--navy-800); padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.95rem; border: 1px solid #cfe0f2; }

.contact-card { background: var(--navy-900); color: var(--blue-100); border-radius: var(--radius-lg); padding: 2rem; }
.contact-card h3 { color: #fff; margin-bottom: 1.2rem; }
.contact-item { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: 1.3rem; }
.contact-item svg { width: 22px; height: 22px; stroke: var(--gold-300); fill: none; stroke-width: 2; flex: none; margin-top: 3px; }
.contact-item a, .contact-item span { color: #d7e2f0; }
.contact-item strong { display: block; color: #fff; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; color: var(--gold-300); }
.contact-card .socials a { background: rgba(255,255,255,0.1); }

/* ----- Mission / values strip ----- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 820px) { .values { grid-template-columns: 1fr; } }
.value h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.value h3 .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gold-500); flex: none; }
.value p { color: var(--ink-500); font-size: 0.98rem; }