/* ==========================================================================
   WK Growth Matrix — Page-level sections
   ========================================================================== */

/* --- Split content ------------------------------------------------------- */

.split {
    display: grid;
    gap: clamp(2rem, 1.2rem + 4vw, 4.5rem);
    align-items: center;
}
@media (min-width: 920px) {
    .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split--wide-start { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

.split__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(150deg, var(--navy-700), var(--navy-600));
    min-block-size: 320px;
    display: grid;
    place-items: center;
    padding: var(--sp-7);
}
.split__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 54px 54px;
}
.split__media img { position: relative; z-index: 1; max-inline-size: min(78%, 380px); }

/* --- Purpose / vision pair ------------------------------------------------ */

.purpose-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 860px) { .purpose-grid { grid-template-columns: repeat(2, 1fr); } }

.purpose-card {
    position: relative;
    padding: var(--sp-7) var(--sp-6);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.purpose-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 4px;
    background: linear-gradient(90deg, var(--gold-500), transparent);
}
.purpose-card h3 { font-size: var(--step-1); color: var(--accent-ink); }
.purpose-card p  { margin-block-start: var(--sp-4); font-size: var(--step-1); color: var(--navy-600); line-height: 1.75; }

/* --- Challenges list ------------------------------------------------------ */

.challenge-list { display: grid; gap: var(--sp-3); }

.challenge {
    display: grid;
    gap: var(--sp-2) var(--sp-5);
    align-items: center;
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.challenge:hover { border-color: var(--gold-400); transform: translateX(0); }
@media (min-width: 780px) {
    .challenge { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
.challenge__name {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-weight: 700;
    color: var(--navy-700);
}
.challenge__name .mark {
    inline-size: 8px; block-size: 8px;
    background: var(--danger);
    transform: rotate(45deg);
    flex: none;
    opacity: .75;
}
.challenge__impact { color: var(--ink-soft); font-size: var(--step-0); }
@media (min-width: 780px) {
    .challenge__impact { padding-inline-start: var(--sp-5); border-inline-start: 1px solid var(--line); }
}

/* --- Standards grid ------------------------------------------------------- */

.standard {
    padding: var(--sp-5);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .04);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.standard:hover { background: rgba(255, 255, 255, .08); border-color: rgba(201, 162, 39, .5); }
.standard__name { font-family: var(--font-display); font-weight: 700; color: var(--gold-300); font-size: var(--step-1); }
html[dir="rtl"] .standard__name { font-family: var(--font-display); }
.standard__desc { margin-block-start: var(--sp-2); font-size: var(--step--1); color: var(--on-dark-soft); }

/* --- Industries ----------------------------------------------------------- */

.industry {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    padding: var(--sp-5);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
    block-size: 100%;
}
.industry:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.industry--focus { border-color: var(--gold-400); background: linear-gradient(180deg, var(--gold-100), var(--white) 55%); }

.industry__icon {
    inline-size: 40px; block-size: 40px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: var(--navy-700);
    color: var(--gold-400);
    flex: none;
}
.industry--focus .industry__icon { background: var(--gold-500); color: var(--navy-800); }
.industry__icon svg { inline-size: 20px; block-size: 20px; }
.industry h3 { font-size: var(--step-0); }
.industry p  { margin-block-start: var(--sp-1); font-size: var(--step--1); color: var(--ink-muted); }
.industry .pill { margin-block-start: var(--sp-3); }

/* --- Service detail ------------------------------------------------------- */

.service-detail {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 3.5rem);
    align-items: start;
}
@media (min-width: 1000px) {
    .service-detail { grid-template-columns: minmax(0, 1fr) 320px; }
}

.service-aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 1.5rem);
    display: grid;
    gap: var(--sp-5);
}
@media (max-width: 999px) { .service-aside { position: static; } }

.aside-card {
    padding: var(--sp-6);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}
.aside-card h3 { font-size: var(--step-1); }
.aside-card p  { margin-block-start: var(--sp-3); font-size: var(--step--1); color: var(--ink-soft); }
.aside-card .btn { margin-block-start: var(--sp-4); }

.aside-card--dark {
    background: linear-gradient(150deg, var(--navy-700), var(--navy-600));
    border-color: var(--navy-600);
    color: var(--on-dark-soft);
}
.aside-card--dark h3 { color: var(--white); }
.aside-card--dark p  { color: var(--on-dark-soft); }

.service-nav { display: grid; gap: var(--sp-2); }
.service-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--navy-600);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.service-nav a:hover { border-color: var(--gold-400); background: var(--gold-100); }
.service-nav a.is-current { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); }
.service-nav svg { inline-size: 14px; block-size: 14px; opacity: .6; flex: none; }
html[dir="rtl"] .service-nav svg { transform: scaleX(-1); }

.service-hero-image {
    inline-size: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-block-end: var(--sp-6);
}

/* --- Contact page --------------------------------------------------------- */

.contact-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: start; }
@media (min-width: 960px) {
    .contact-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.contact-panel {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.contact-info { display: grid; gap: var(--sp-4); }

.info-item {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: border-color var(--dur) var(--ease);
}
.info-item:hover { border-color: var(--gold-400); }
.info-item__icon {
    inline-size: 44px; block-size: 44px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: var(--gold-100);
    color: var(--gold-700);
    flex: none;
}
.info-item__icon svg { inline-size: 20px; block-size: 20px; }
.info-item__label { font-size: var(--step--1); color: var(--ink-muted); }
.info-item__value { font-weight: 600; color: var(--navy-700); word-break: break-word; }
.info-item__value a:hover { color: var(--accent-ink); }
.info-item__value.numeric { direction: ltr; unicode-bidi: embed; }

.map-frame {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--sand-200);
}
.map-frame iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }

.next-steps { display: grid; gap: var(--sp-4); counter-reset: nstep; }
.next-step {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
}
.next-step__num {
    inline-size: 34px; block-size: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--gold-400);
    color: var(--gold-700);
    font-weight: 700;
    font-size: var(--step--1);
    flex: none;
}
.next-step h4 { font-size: var(--step-0); }
.next-step p  { font-size: var(--step--1); color: var(--ink-soft); margin-block-start: var(--sp-1); }

/* --- Team / credentials --------------------------------------------------- */

.credential-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-4); }

/* --- 404 ------------------------------------------------------------------ */

.error-page {
    min-block-size: 62vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding-block: var(--sp-9);
}
.error-page__code {
    font-family: var(--font-display);
    font-size: clamp(5rem, 3rem + 12vw, 11rem);
    font-weight: 800;
    line-height: 1;
    color: var(--sand-300);
    letter-spacing: -.03em;
}