/* ==========================================================================
   Home page sections. Loaded only by Views/Public/Home.cshtml.
   Theme tokens (colours, fonts, buttons, script / brush helpers) come from challenge.css.
   ========================================================================== */

/* ---------------------------------------------------------------- shared */
.nic-heading { position: relative; z-index: 1; margin-bottom: 30px; text-align: center; }
.nic-body .nic-heading h2 { margin: 0 0 6px; font-size: clamp(1.65rem, 2.6vw, 2.25rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.nic-heading p { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--nic-navy); }

.nic-side-note { position: absolute; top: 28px; z-index: 1; font-size: 1.55rem; }
.nic-side-note--left { left: var(--nic-gutter); }
.nic-side-note--right { right: var(--nic-gutter); }
@media (max-width: 1239.98px) { .nic-side-note { display: none; } }

/* ---------------------------------------------------------------- 1. hero */
.nic-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--nic-sky) 0%, #fff 62%); }
.nic-sketch--hero { left: 38%; top: 10px; width: 300px; opacity: .25; }
.nic-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
    align-items: end;
    padding-left: var(--nic-gutter);
}
.nic-hero-copy { position: relative; z-index: 2; align-self: center; padding: 48px 28px 44px 0; }
.nic-hero-kicker { margin: 0 0 16px; font-size: 14px; font-weight: 600; line-height: 1.6; letter-spacing: .34em; text-transform: uppercase; color: var(--nic-navy); }
.nic-hero-kicker span { display: block; }
.nic-body .nic-hero-title { margin: 0 0 22px; font-size: clamp(2.4rem, 4.3vw, 4.1rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.nic-hero-title span { display: block; }
.nic-hero-title .is-accent { color: var(--nic-orange); }
.nic-hero-lead { max-width: 470px; margin: 0 0 28px; font-size: 17px; line-height: 1.55; color: #3c4768; }
.nic-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
.nic-hero-features { display: flex; flex-wrap: wrap; row-gap: 16px; margin: 0; padding: 0; list-style: none; }
.nic-hero-features li { display: flex; align-items: center; gap: 12px; padding: 0 22px; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--nic-navy); }
.nic-hero-features li:first-child { padding-left: 0; }
.nic-hero-features li + li { border-left: 1px solid #cfd7e6; }
.nic-hero-features i { font-size: 28px; color: var(--nic-navy); }
.nic-hero-features span span { display: block; }

.nic-hero-media { position: relative; }
/* Fade the photo's left and top edges into the hero background. */
.nic-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%), linear-gradient(to bottom, transparent 0, #000 10%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 9%), linear-gradient(to bottom, transparent 0, #000 10%);
    mask-composite: intersect;
}
/* Positions are % of the photo, so they stay put as it scales. */
.nic-hero-note { position: absolute; top: 5%; right: 5%; font-size: clamp(1.15rem, 2vw, 1.95rem); }
.nic-hero-values { position: absolute; top: 31%; right: 2%; margin: 0; padding: 0; list-style: none; font-size: clamp(9px, .8vw, 11px); font-weight: 500; line-height: 2.05; letter-spacing: .24em; text-transform: uppercase; color: var(--nic-navy); }
/* Sized to also cover the badge painted into the placeholder photo. */
.nic-hero-badge { position: absolute; right: -1.5%; bottom: -1.5%; width: 25%; aspect-ratio: 1.2; font-size: clamp(.75rem, 1.35vw, 1.3rem); }

@media (max-width: 991.98px) {
    .nic-hero-grid { grid-template-columns: 1fr; padding-left: 0; }
    .nic-hero-copy { padding: 36px 16px 8px; }
    .nic-sketch--hero { display: none; }
    .nic-hero-media img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }
}
@media (max-width: 575.98px) {
    .nic-hero-kicker { font-size: 12px; letter-spacing: .26em; }
    .nic-hero-actions .nic-btn { flex: 1 1 100%; }
    .nic-hero-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
    .nic-hero-features li, .nic-hero-features li:first-child { padding: 0; }
    .nic-hero-features li + li { border-left: 0; }
    .nic-hero-features i { font-size: 22px; }
    .nic-hero-values { display: none; }
}

/* ---------------------------------------------------------------- 2. why (dark band, slanted panels) */
.nic-why { --nic-skew: 12deg; --nic-why-h: 400px; position: relative; overflow: hidden; background: linear-gradient(90deg, #052d66 0%, #083a80 45%, #0b3f86 100%); color: #fff; }
.nic-why-grid { display: grid; grid-template-columns: minmax(320px, 32%) minmax(0, 1fr); min-height: var(--nic-why-h); }
.nic-why-intro { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 44px 44px 44px var(--nic-gutter); }
.nic-sketch--why { right: 0; bottom: 0; width: 360px; background-color: #fff; opacity: .07; }
.nic-why-kicker { position: relative; margin: 0 0 12px; font-size: 11px; font-weight: 500; line-height: 1.75; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.nic-why-kicker span { display: block; }
.nic-body .nic-why-title { position: relative; max-width: 360px; margin: 0 0 16px; font-size: clamp(1.9rem, 2.7vw, 2.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; color: #fff; }
.nic-why-text { position: relative; max-width: 380px; margin: 0 0 22px; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.nic-why-note { position: relative; color: var(--nic-orange); font-size: 1.85rem; }

.nic-why-panels { display: flex; margin: 0 -90px 0 0; padding: 0; list-style: none; }
.nic-why-panel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-left: 2px solid rgba(255, 255, 255, .8);
    transform: skewX(calc(var(--nic-skew) * -1));
}
.nic-why-panel:last-child { flex-grow: 1.45; }
.nic-why-inner {
    position: absolute;
    inset: 0 -90px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 100px 30px;
    text-align: center;
    transform: skewX(var(--nic-skew));
}
.nic-why-panel:last-child .nic-why-inner { padding-right: 180px; }
.nic-why-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(6, 48, 106, 0) 26%, rgba(8, 52, 114, .72) 52%, #0a3b82 68%);
}
.nic-why-img { position: absolute; top: 0; left: 0; width: 100%; height: 68%; object-fit: cover; object-position: center 25%; transition: transform .6s; }
.nic-why-panel:hover .nic-why-img { transform: scale(1.05); }
/* Nudge the text toward the middle of the slanted strip at that height. */
.nic-why-body { position: relative; z-index: 2; transform: translateX(-6.5%); }
.nic-why-body i { display: block; margin-bottom: 12px; font-size: 32px; }
.nic-body .nic-why-body h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; line-height: 1.2; color: #fff; }
.nic-why-body p { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.nic-why-body p span { display: block; }

@media (max-width: 1199.98px) {
    .nic-why { --nic-why-h: 360px; }
    .nic-why-grid { grid-template-columns: 1fr; }
    .nic-why-intro { padding: 40px var(--nic-gutter) 32px; }
    .nic-why-title { max-width: none; }
    .nic-why-panels { height: var(--nic-why-h); }
}
@media (max-width: 767.98px) {
    .nic-why-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: auto; margin: 0; padding: 0 16px 32px; }
    .nic-why-panel { height: 250px; border: 0; border-radius: 12px; transform: none; }
    .nic-why-panel:last-child { grid-column: 1 / -1; }
    .nic-why-inner, .nic-why-panel:last-child .nic-why-inner { inset: 0; padding: 0 12px 18px; transform: none; }
    .nic-why-img { height: 62%; }
    .nic-why-body { transform: none; }
}

/* ---------------------------------------------------------------- 3. two ways */
.nic-paths { position: relative; overflow: hidden; padding: 44px 0 56px; background: linear-gradient(180deg, #fff 0%, var(--nic-cream) 100%); }
.nic-sketch--left, .nic-sketch--right { bottom: 0; width: 380px; opacity: .3; }
.nic-sketch--left { left: -90px; }
.nic-sketch--right { right: -90px; transform: scaleX(-1); }
.nic-paths-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; margin: 0 auto; }
.nic-path-card {
    position: relative;
    display: grid;
    grid-template-columns: 45% minmax(0, 1fr);
    min-height: 250px;
    overflow: hidden;
    border-radius: var(--nic-radius);
    color: #fff;
    box-shadow: var(--nic-shadow);
    transition: transform .25s, box-shadow .25s;
}
.nic-path-card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -22px rgba(11, 31, 92, .6); }
.nic-path-card--blue { background: linear-gradient(135deg, #0a52a3 0%, #063f87 100%); }
.nic-path-card--orange { background: linear-gradient(135deg, #f7952a 0%, #f36a05 100%); }
.nic-path-media { position: relative; }
.nic-path-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 70%;
    -webkit-mask-image: linear-gradient(to right, #000 70%, transparent);
    mask-image: linear-gradient(to right, #000 70%, transparent);
}
.nic-path-body { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 24px 24px 6px; }
.nic-path-body > i { margin-bottom: 14px; font-size: 30px; }
.nic-body .nic-path-body h3 { margin: 0 0 12px; font-size: 21px; font-weight: 600; line-height: 1.2; color: #fff; }
.nic-path-body p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.nic-body .nic-path-link { display: inline-flex; align-items: center; gap: 12px; margin-top: auto; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; }
.nic-path-link::after { content: ""; position: absolute; inset: 0; } /* whole card is clickable */
.nic-arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--nic-navy-700); font-size: 14px; transition: transform .2s; }
.nic-path-card--orange .nic-arrow { color: var(--nic-orange-600); }
.nic-path-card:hover .nic-arrow { transform: translateX(3px); }

@media (max-width: 767.98px) {
    .nic-paths-grid { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 420px) {
    .nic-path-card { grid-template-columns: 1fr; }
    .nic-path-media { height: 200px; }
    .nic-path-media img { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
    .nic-path-body { padding: 8px 20px 22px; }
}

/* ---------------------------------------------------------------- 4. journey */
.nic-journey { position: relative; overflow: hidden; padding: 40px 0 56px; border-top: 1px solid #eef1f7; background: #fff; }
.nic-journey .nic-sketch--right { top: 10px; bottom: auto; width: 320px; opacity: .22; }
.nic-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1000px; margin: 34px auto 0; padding: 0; list-style: none; }
.nic-steps::before { content: ""; position: absolute; top: 30px; left: 10%; right: 10%; border-top: 2px dashed #aab6cf; }
.nic-step { position: relative; padding: 0 10px; text-align: center; }
.nic-step-icon {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    width: 60px; height: 60px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--nic-orange);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 0 0 6px #fff, 0 12px 22px -10px rgba(244, 106, 10, .8);
    transition: transform .25s;
}
.nic-step:nth-child(even) .nic-step-icon { background: var(--nic-navy-700); box-shadow: 0 0 0 6px #fff, 0 12px 22px -10px rgba(13, 47, 115, .8); }
.nic-step:hover .nic-step-icon { transform: translateY(-4px); }
.nic-body .nic-step h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.nic-step p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--nic-muted); }
.nic-step p span { display: block; }

@media (max-width: 767.98px) {
    .nic-steps { grid-template-columns: 1fr; max-width: 420px; }
    .nic-steps::before { top: 10px; bottom: 40px; left: 29px; right: auto; border-top: 0; border-left: 2px dashed #aab6cf; }
    .nic-step { display: grid; grid-template-columns: 60px 1fr; column-gap: 18px; align-items: center; padding: 0 0 22px; text-align: left; }
    .nic-step-icon { grid-row: span 2; margin: 0; }
    .nic-step h3 { align-self: end; }
    .nic-step p { align-self: start; }
    .nic-step p span { display: inline; }
    .nic-journey .nic-sketch--right { display: none; }
}

/* ---------------------------------------------------------------- 5. impact */
.nic-impact { position: relative; min-height: 460px; overflow: hidden; background: #f6e7da; color: var(--nic-navy); }
.nic-impact-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.nic-impact-grid {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.65fr) minmax(0, .5fr);
    gap: 28px;
    width: min(100% - 32px, var(--nic-container));
    margin-inline: auto;
    padding: 34px 0 200px;
}
.nic-impact-kicker { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; line-height: 1.7; letter-spacing: .28em; text-transform: uppercase; }
.nic-impact-kicker span { display: block; }
.nic-body .nic-impact h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 2.8vw, 2.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.nic-impact h2 .is-accent { color: var(--nic-orange); }
.nic-impact-text { max-width: 380px; margin: 0; font-size: 14.5px; line-height: 1.55; color: #33405f; }
.nic-impact-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.nic-impact-item { padding: 0 18px; text-align: center; }
.nic-impact-item + .nic-impact-item { border-left: 1px solid rgba(11, 31, 92, .22); }
.nic-impact-icon { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 50%; background: var(--nic-navy-700); color: #fff; font-size: 24px; box-shadow: 0 12px 22px -12px rgba(13, 47, 115, .9); }
.nic-impact-icon.is-accent { background: var(--nic-orange); box-shadow: 0 12px 22px -12px rgba(244, 106, 10, .9); }
.nic-body .nic-impact-item h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.25; }
.nic-impact-item p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #33405f; }
.nic-impact-item p span { display: block; }
.nic-impact-note { justify-self: end; align-self: start; font-size: 1.5rem; }
.nic-impact-badge { position: absolute; right: var(--nic-gutter); bottom: 26px; z-index: 1; width: 140px; aspect-ratio: 1.05; font-size: 1.05rem; }

@media (max-width: 1199.98px) {
    .nic-impact-grid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 190px; }
    .nic-impact-note { display: none; }
    .nic-impact::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(255, 247, 239, .9) 0%, rgba(255, 247, 239, .78) 62%, rgba(255, 247, 239, 0) 82%); }
}
@media (max-width: 767.98px) {
    .nic-impact-items { grid-template-columns: 1fr; gap: 22px; }
    .nic-impact-item + .nic-impact-item { border-left: 0; }
    .nic-impact-item p span { display: inline; }
    .nic-impact-badge { width: 110px; font-size: .9rem; }
}