/* Public homepage redesign based on the composition of the supplied reference template.
   Scoped to .portal-template-home so other public/admin pages remain untouched. */

.portal-template-home {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: #f7faf8;
    color: #153226;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.portal-template-home .template-home-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.portal-template-home .template-header {
    position: relative;
    z-index: 20;
    height: 78px;
    padding: 0 clamp(22px, 4.5vw, 76px);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid rgba(20, 70, 45, .08);
    box-shadow: 0 5px 22px rgba(27, 63, 44, .04);
}

.portal-template-home .template-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-decoration: none;
}

.portal-template-home .template-brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transition: transform .28s ease;
}

.portal-template-home .template-brand:hover img,
.portal-template-home .template-brand:focus-visible img {
    transform: translateY(-2px) scale(1.03);
}

.portal-template-home .template-brand > span {
    display: grid;
    line-height: 1;
}

.portal-template-home .template-brand strong {
    color: #165437;
    font-size: 21px;
    letter-spacing: .015em;
}

.portal-template-home .template-brand small {
    margin-top: 6px;
    color: #64766c;
    font-size: 11px;
    font-weight: 500;
}

.portal-template-home main {
    flex: 1;
}

.portal-template-home .template-hero {
    position: relative;
    min-height: clamp(520px, 68vh, 680px);
    overflow: hidden;
    background: #eff5f1;
    isolation: isolate;
}

.portal-template-home .template-hero-media,
.portal-template-home .template-hero-wash {
    position: absolute;
    inset: 0;
}

.portal-template-home .template-hero-media {
    z-index: -3;
    background: #dfe9e2;
}

.portal-template-home .template-hero-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 70% center;
    transform: scale(1.015);
    animation: templateHeroZoom 8s ease-out both;
}

.portal-template-home .template-hero-wash {
    z-index: -2;
    background:
        linear-gradient(90deg,
            rgba(250, 252, 250, 1) 0%,
            rgba(250, 252, 250, .98) 25%,
            rgba(250, 252, 250, .88) 40%,
            rgba(250, 252, 250, .43) 58%,
            rgba(250, 252, 250, .08) 78%,
            rgba(250, 252, 250, .02) 100%),
        linear-gradient(0deg, rgba(17, 57, 38, .08), transparent 35%);
}

.portal-template-home .template-hero-inner {
    width: min(1380px, calc(100% - 9vw));
    min-height: inherit;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 44px 0 105px;
}

.portal-template-home .template-hero-copy {
    width: min(650px, 48vw);
    animation: templateHeroIn .72s cubic-bezier(.2,.8,.2,1) both;
}

.portal-template-home .template-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 5px;
    background: #e7f4ea;
    color: #1a6a46;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .105em;
}

.portal-template-home .template-hero h1 {
    max-width: 620px;
    margin: 20px 0 20px;
    color: #123425;
    font-size: clamp(48px, 5vw, 74px);
    font-weight: 750;
    line-height: 1.02;
    letter-spacing: -.052em;
}

.portal-template-home .template-hero p {
    max-width: 510px;
    margin: 0;
    color: #425b4d;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.68;
}

.portal-template-home .template-service-wrap {
    position: relative;
    z-index: 8;
    width: min(1120px, calc(100% - 44px));
    margin: -74px auto 0;
    animation: templateCardsIn .76s .12s cubic-bezier(.2,.8,.2,1) both;
}

.portal-template-home .template-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 22px 55px rgba(20, 58, 39, .17);
}

.portal-template-home .template-service-card {
    position: relative;
    min-height: 230px;
    padding: 31px 38px 30px;
    display: flex;
    flex-direction: column;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    outline: none;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease;
}

.portal-template-home .template-service-card::before,
.portal-template-home .template-service-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}

.portal-template-home .template-service-card::before {
    width: 230px;
    height: 230px;
    top: -155px;
    right: -40px;
    background: rgba(255,255,255,.09);
}

.portal-template-home .template-service-card::after {
    width: 160px;
    height: 160px;
    right: 70px;
    bottom: -128px;
    border: 1px solid rgba(255,255,255,.12);
}

.portal-template-home .template-service-card--student {
    background: linear-gradient(135deg, #16865c 0%, #1f7a55 100%);
}

.portal-template-home .template-service-card--lecturer {
    background: linear-gradient(135deg, #1e5947 0%, #174638 100%);
}

.portal-template-home .template-service-card:hover,
.portal-template-home .template-service-card:focus-visible {
    transform: translateY(-5px);
    filter: brightness(1.035);
}

.portal-template-home .template-service-card:hover::before,
.portal-template-home .template-service-card:focus-visible::before {
    transform: translate(-12px, 15px) scale(1.1);
}

.portal-template-home .template-service-card:hover::after,
.portal-template-home .template-service-card:focus-visible::after {
    transform: translateX(-10px) scale(1.18);
}

.portal-template-home .template-service-number {
    align-self: flex-end;
    color: rgba(255,255,255,.52);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

.portal-template-home .template-service-copy {
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.portal-template-home .template-service-copy strong {
    font-size: clamp(27px, 2.2vw, 34px);
    line-height: 1.05;
    letter-spacing: -.03em;
}

.portal-template-home .template-service-copy > span {
    max-width: 330px;
    color: rgba(255,255,255,.79);
    font-size: 13px;
    line-height: 1.55;
}

.portal-template-home .template-service-link {
    margin-top: auto;
    padding-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    width: max-content;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.portal-template-home .template-service-link > span:first-child {
    position: relative;
}

.portal-template-home .template-service-link > span:first-child::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 26px;
    height: 2px;
    background: rgba(255,255,255,.72);
    transition: width .28s ease;
}

.portal-template-home .template-service-arrow {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #1a6847;
    font-size: 17px;
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
}

.portal-template-home .template-service-card:hover .template-service-link > span:first-child::after,
.portal-template-home .template-service-card:focus-visible .template-service-link > span:first-child::after {
    width: 100%;
}

.portal-template-home .template-service-card:hover .template-service-arrow,
.portal-template-home .template-service-card:focus-visible .template-service-arrow {
    transform: translateX(5px);
}

.portal-template-home .template-info {
    width: min(1120px, calc(100% - 44px));
    margin: 84px auto 70px;
    padding: 34px 38px;
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(0, 1.45fr);
    gap: 58px;
    align-items: start;
    border-top: 1px solid #dce8df;
    border-bottom: 1px solid #dce8df;
    background: transparent;
}

.portal-template-home .template-info-heading > span {
    display: block;
    margin-bottom: 10px;
    color: #23815a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.portal-template-home .template-info-heading h2 {
    margin: 0;
    color: #17392a;
    font-size: clamp(24px, 2vw, 31px);
    line-height: 1.18;
    letter-spacing: -.035em;
}

.portal-template-home .template-info-copy {
    display: grid;
    gap: 0;
}

.portal-template-home .template-info-copy p {
    margin: 0;
    padding: 11px 0;
    color: #5a6e62;
    font-size: 13px;
    line-height: 1.58;
    border-bottom: 1px solid rgba(28, 84, 55, .08);
}

.portal-template-home .template-info-copy p:first-child {
    padding-top: 0;
}

.portal-template-home .template-info-copy p:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.portal-template-home .template-info-copy strong {
    color: #284b39;
}

.portal-template-home .template-footer {
    min-height: 62px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #86938b;
    font-size: 10px;
    border-top: 1px solid rgba(26, 78, 51, .06);
    background: #fbfcfb;
}

/* V126 - responsive campus contact and official channel section. */
.portal-template-home .template-contact {
    position:relative;
    overflow:hidden;
    padding:64px clamp(40px,4.5vw,86px);
    color:#edf8f2;
    background:linear-gradient(135deg,#0d5037 0%,#123f30 56%,#0b3327 100%);
}
.portal-template-home .template-contact-inner {
    position:relative;
    z-index:1;
    width:100%;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(580px,720px) minmax(430px,540px);
    justify-content:space-between;
    gap:32px;
}
.portal-template-home .template-contact-eyebrow {
    display:block;
    margin-bottom:8px;
    color:#88d6b0;
    font-size:11px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.portal-template-home .template-contact h2 {
    margin:0 0 28px;
    color:#fff;
    font-size:clamp(25px,3vw,34px);
    letter-spacing:-.025em;
}
.portal-template-home .template-contact-address { width:100%; justify-self:end; }
.portal-template-home .template-contact-links { padding-top:69px; }
.portal-template-home .template-campus-list { display:grid; gap:22px; margin-left:24px; }
.portal-template-home .template-campus-item {
    display:grid;
    gap:10px;
}
.portal-template-home .template-contact-row {
    display:grid;
    grid-template-columns:23px minmax(0,1fr);
    gap:12px;
    align-items:start;
}
.portal-template-home .template-contact-row svg { width:21px; height:21px; margin-top:1px; fill:#9ae1bd; }
.portal-template-home .template-campus-item strong { color:#fff; font-size:13px; }
.portal-template-home .template-campus-item p { margin:0; color:#c8d9d0; font-size:13px; line-height:1.6; }
.portal-template-home .template-campus-item a,
.portal-template-home .template-contact-email { color:#9ae1bd; text-decoration:none; font-size:12px; font-weight:700; }
.portal-template-home .template-campus-item a:hover,
.portal-template-home .template-contact-email:hover { color:#fff; }
.portal-template-home .template-campus-item p > span { color:#789b89; }
.portal-template-home .template-contact-email {
    width:max-content;
    max-width:100%;
    margin:24px 0 0 24px;
}
.portal-template-home .template-contact-email svg { fill:currentColor; }
.portal-template-home .template-contact-address > .template-contact-email {
    width:100%;
    margin-left:0;
    margin-right:0;
}
.portal-template-home .template-social-grid {
    width:686px;
    max-width:100%;
    display:grid;
    grid-template-columns:390px 130px 130px;
    grid-template-rows:repeat(2,62px);
    align-items:center;
    gap:8px 18px;
}
.portal-template-home .template-social-grid > a {
    min-height:62px;
    padding:4px 0;
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
    border:0;
    border-radius:0;
    background:transparent;
    transition:transform .2s ease,color .2s ease;
}
.portal-template-home .template-institute-card { order:1; }
.portal-template-home .template-social-grid > a:nth-child(4) { order:2; }
.portal-template-home .template-social-grid > a:nth-child(1) { order:3; }
.portal-template-home .template-social-grid > a:nth-child(2) { order:4; }
.portal-template-home .template-social-grid > a:nth-child(5) { order:5; }
.portal-template-home .template-institute-card {
    min-width:0;
    height:100%;
    margin-right:0;
    padding-right:26px;
    border-right:1px solid rgba(154,225,189,.24);
    grid-column:1;
    grid-row:1 / span 2;
    position:relative;
    display:block;
}
.portal-template-home .template-institute-main {
    display:block;
    min-height:18px;
    padding-left:55px;
    color:#fff;
    text-decoration:none;
}
.portal-template-home .template-institute-main:hover > strong { color:#9ae1bd; }
.portal-template-home .template-institute-main > strong {
    font-size:13px;
    line-height:1.35;
    white-space:nowrap;
    transition:color .2s ease;
}
.portal-template-home .template-social-grid > a:hover {
    transform:translateX(4px);
    color:#9ae1bd;
}
.portal-template-home .template-social-icon {
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    flex:none;
    color:#0d5037;
    border-radius:12px;
    background:#fff;
}
.portal-template-home .template-social-icon svg { width:21px; height:21px; fill:currentColor; }
.portal-template-home .template-social-icon--youtube { color:#e5322d; }
.portal-template-home .template-social-icon--instagram { color:#bd2c79; }
.portal-template-home .template-social-icon--tiktok { color:#111; }
.portal-template-home .template-social-icon--academy { padding:7px; }
.portal-template-home .template-social-icon--academy img,
.portal-template-home .template-social-icon--instiper img { width:100%; height:100%; object-fit:contain; }
.portal-template-home .template-social-icon--instiper { padding:6px; }
.portal-template-home .template-institute-main .template-social-icon--instiper {
    position:absolute;
    top:0;
    left:0;
}
.portal-template-home .template-social-grid strong { display:block; }
.portal-template-home .template-social-grid strong { font-size:13px; }
.portal-template-home .template-institute-units {
    display:grid;
    gap:7px;
    margin-top:7px;
    color:#fff;
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    margin-left:55px;
}
.portal-template-home .template-faculty-link {
    display:block;
    width:max-content;
    max-width:100%;
    cursor:default;
}

@media (max-width:900px) {
    .portal-template-home .template-contact { padding:52px 24px; }
    .portal-template-home .template-contact-inner { grid-template-columns:1fr; gap:48px; justify-content:stretch; }
    .portal-template-home .template-contact-links,
    .portal-template-home .template-contact-address { width:100%; max-width:620px; margin-inline:auto; }
    .portal-template-home .template-contact-links { padding-top:0; }
    .portal-template-home .template-social-grid {
        width:100%;
        grid-template-columns:minmax(300px,1fr) 110px 110px;
        column-gap:10px;
    }
    .portal-template-home .template-campus-list,
    .portal-template-home .template-contact-email { margin-left:0; }
}

/* V141 - Kampus I map beside the address. */
.portal-template-home .template-contact-inner {
    grid-template-columns:minmax(300px,360px) minmax(230px,270px) minmax(650px,820px);
    gap:clamp(20px,2vw,36px);
}
.portal-template-home .template-location-group {
    min-width:0;
    display:grid;
    grid-template-columns:minmax(360px,1.35fr) minmax(260px,1fr);
    gap:24px;
    align-items:start;
}
.portal-template-home .template-campus-map {
    width:100%;
    overflow:hidden;
    align-self:start;
    border:1px solid rgba(255,255,255,.14);
    border-radius:16px;
    background:rgba(255,255,255,.06);
}
.portal-template-home .template-campus-map iframe {
    width:100%;
    height:198px;
    display:block;
    border:0;
    filter:saturate(.82) contrast(.96);
}
@media (min-width:901px) and (max-width:1280px) {
    .portal-template-home .template-contact-inner {
        grid-template-columns:minmax(300px,1fr) minmax(220px,260px);
        gap:36px 28px;
    }
    .portal-template-home .template-location-group {
        grid-column:1 / -1;
        grid-template-columns:minmax(360px,1fr) minmax(280px,.8fr);
    }
}

@media (max-width:900px) {
    .portal-template-home .template-contact-inner { grid-template-columns:1fr; }
    .portal-template-home .template-location-group {
        width:100%;
        max-width:620px;
        margin-inline:auto;
        grid-template-columns:minmax(0,1fr) minmax(230px,.85fr);
        gap:18px;
    }
    .portal-template-home .template-campus-map iframe { height:clamp(180px,48vw,280px); }
}

@media (max-width:620px) {
    .portal-template-home .template-location-group { grid-template-columns:1fr; }
}

/* V143 - equal, controlled spacing between all footer groups. */
.portal-template-home .template-contact-inner {
    width:100%;
    max-width:1600px;
    margin-inline:auto;
    grid-template-columns:390px 280px minmax(650px,820px);
    column-gap:52px;
    justify-content:center;
}

@media (min-width:1281px) and (max-width:1500px) {
    .portal-template-home .template-contact-inner {
        max-width:1320px;
        grid-template-columns:330px 240px minmax(600px,1fr);
        column-gap:32px;
    }
    .portal-template-home .template-social-grid {
        grid-template-columns:repeat(2,minmax(105px,115px));
        column-gap:8px;
    }
    .portal-template-home .template-location-group {
        grid-template-columns:minmax(330px,1.25fr) minmax(240px,.9fr);
        gap:20px;
    }
}

@media (min-width:901px) and (max-width:1280px) {
    .portal-template-home .template-contact-inner {
        max-width:100%;
        grid-template-columns:minmax(300px,1fr) minmax(220px,260px);
        column-gap:28px;
        justify-content:stretch;
    }
}

@media (max-width:900px) {
    .portal-template-home .template-contact-inner {
        max-width:620px;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:34px 24px;
        justify-content:stretch;
    }
    .portal-template-home .template-institute-card {
        grid-column:1;
        grid-row:1;
    }
    .portal-template-home .template-contact-links {
        grid-column:2;
        grid-row:1;
    }
    .portal-template-home .template-location-group {
        grid-column:1 / -1;
        grid-row:2;
        grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
        gap:18px;
    }
}

@media (max-width:620px) {
    .portal-template-home .template-contact {
        padding-right:max(16px,env(safe-area-inset-right));
        padding-left:max(16px,env(safe-area-inset-left));
    }
    .portal-template-home .template-contact-inner { gap:28px 14px; }
    .portal-template-home .template-institute-main {
        min-height:14px;
        padding-left:36px;
    }
    .portal-template-home .template-institute-main .template-social-icon--instiper {
        width:30px;
        height:30px;
        padding:4px;
        border-radius:8px;
    }
    .portal-template-home .template-institute-main > strong,
    .portal-template-home .template-institute-units {
        font-size:clamp(7.5px,2.15vw,10px);
        line-height:1.3;
    }
    .portal-template-home .template-institute-units {
        gap:4px;
        margin-top:4px;
        margin-left:36px;
    }
    .portal-template-home .template-social-grid {
        width:100%;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:repeat(2,42px);
        gap:5px;
    }
    .portal-template-home .template-social-grid > a {
        min-height:42px;
        gap:6px;
        padding:1px 0;
    }
    .portal-template-home .template-social-icon {
        width:30px;
        height:30px;
        padding:5px;
        border-radius:8px;
    }
    .portal-template-home .template-social-icon svg { width:16px; height:16px; }
    .portal-template-home .template-social-grid strong { font-size:9px; }
    .portal-template-home .template-location-group {
        grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
        gap:10px;
    }
    .portal-template-home .template-campus-list { gap:13px; }
    .portal-template-home .template-campus-item { gap:6px; }
    .portal-template-home .template-contact-row {
        grid-template-columns:15px minmax(0,1fr);
        gap:6px;
    }
    .portal-template-home .template-contact-row svg { width:14px; height:14px; }
    .portal-template-home .template-campus-item p,
    .portal-template-home .template-campus-item strong,
    .portal-template-home .template-campus-item a { font-size:8.5px; line-height:1.45; }
    .portal-template-home .template-contact-email {
        grid-template-columns:15px minmax(0,1fr);
        margin-top:13px;
        font-size:8px;
    }
    .portal-template-home .template-campus-map iframe { height:150px; }
}

/* V145 - final narrow-mobile containment: two rows, no clipping. */
@media (max-width:620px) {
    .portal-template-home .template-contact {
        overflow:hidden;
        padding:34px 12px;
    }
    .portal-template-home .template-contact-inner {
        width:100%;
        min-width:0;
        max-width:none;
        margin:0;
        grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
        grid-template-rows:auto auto;
        gap:26px 10px;
    }
    .portal-template-home .template-contact-inner > *,
    .portal-template-home .template-institute-card,
    .portal-template-home .template-contact-links,
    .portal-template-home .template-location-group,
    .portal-template-home .template-contact-address,
    .portal-template-home .template-campus-map {
        width:100%;
        min-width:0;
        max-width:none;
        margin:0;
    }
    .portal-template-home .template-institute-card {
        grid-column:1;
        grid-row:1;
        padding:0;
    }
    .portal-template-home .template-contact-links {
        grid-column:2;
        grid-row:1;
        padding:0;
    }
    .portal-template-home .template-location-group {
        grid-column:1 / -1;
        grid-row:2;
        display:grid;
        grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
        gap:10px;
    }
    .portal-template-home .template-institute-main {
        min-height:12px;
        padding-left:31px;
    }
    .portal-template-home .template-institute-main .template-social-icon--instiper {
        width:26px;
        height:26px;
        padding:3px;
        border-radius:7px;
    }
    .portal-template-home .template-institute-main > strong,
    .portal-template-home .template-institute-units {
        font-size:clamp(6.8px,1.95vw,8.5px);
        line-height:1.35;
    }
    .portal-template-home .template-institute-units {
        gap:4px;
        margin:4px 0 0 31px;
    }
    .portal-template-home .template-social-grid {
        width:100%;
        min-width:0;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:repeat(2,36px);
        gap:4px;
    }
    .portal-template-home .template-social-grid > a {
        width:100%;
        min-width:0;
        min-height:36px;
        gap:4px;
        padding:0;
    }
    .portal-template-home .template-social-icon {
        width:26px;
        height:26px;
        padding:4px;
        border-radius:7px;
    }
    .portal-template-home .template-social-icon svg { width:14px; height:14px; }
    .portal-template-home .template-social-grid strong {
        min-width:0;
        font-size:clamp(7px,2vw,8.5px);
        white-space:nowrap;
    }
    .portal-template-home .template-campus-list { width:100%; gap:11px; }
    .portal-template-home .template-campus-item { min-width:0; gap:5px; }
    .portal-template-home .template-contact-row {
        min-width:0;
        grid-template-columns:12px minmax(0,1fr);
        gap:5px;
    }
    .portal-template-home .template-contact-row svg {
        width:12px;
        height:12px;
    }
    .portal-template-home .template-campus-item p,
    .portal-template-home .template-campus-item strong,
    .portal-template-home .template-campus-item a {
        overflow-wrap:anywhere;
        font-size:clamp(6.8px,1.9vw,8px);
        line-height:1.4;
    }
    .portal-template-home .template-contact-email {
        grid-template-columns:12px minmax(0,1fr);
        gap:5px;
        margin-top:11px;
        font-size:clamp(6.5px,1.8vw,7.5px);
    }
    .portal-template-home .template-campus-map {
        overflow:hidden;
        border-radius:10px;
    }
    .portal-template-home .template-campus-map iframe {
        width:100%;
        height:145px;
    }
}

@media (min-width:901px) and (max-width:1280px) {
    .portal-template-home .template-contact-inner {
        grid-template-columns:minmax(450px,1fr) minmax(390px,470px);
        gap:24px;
    }
    .portal-template-home .template-social-grid {
        width:100%;
        grid-template-columns:minmax(300px,1fr) 110px 110px;
        gap:8px 10px;
    }
}

@media (max-width:620px) {
    .portal-template-home .template-contact {
        padding-top:42px;
        padding-right:max(20px,env(safe-area-inset-right));
        padding-bottom:42px;
        padding-left:max(20px,env(safe-area-inset-left));
    }
    .portal-template-home .template-contact-inner { gap:40px; }
    .portal-template-home .template-contact h2 { margin-bottom:23px; font-size:25px; }
    .portal-template-home .template-campus-item p { font-size:12px; }
    .portal-template-home .template-contact-row { grid-template-columns:21px minmax(0,1fr); gap:10px; }
    .portal-template-home .template-contact-row svg { width:19px; height:19px; }
    .portal-template-home .template-contact-email { font-size:11px; }
    .portal-template-home .template-social-grid {
        width:100%;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:auto repeat(2,56px);
        gap:8px 14px;
    }
    .portal-template-home .template-institute-card {
        width:100%;
        min-width:0;
        margin:0 0 4px;
        padding:0 0 13px;
        border-right:0;
        border-bottom:1px solid rgba(154,225,189,.24);
        grid-column:1 / -1;
        grid-row:1;
    }
    .portal-template-home .template-social-grid > a { width:100%; }
    .portal-template-home .template-institute-main > strong,
    .portal-template-home .template-institute-units { font-size:12px; }
    .portal-template-home .template-social-grid > a { min-height:56px; padding:3px 0; gap:9px; }
    .portal-template-home .template-social-icon { width:38px; height:38px; border-radius:10px; }
    .portal-template-home .template-social-grid strong { font-size:12px; }
}

@keyframes templateHeroIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes templateCardsIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes templateHeroZoom {
    from { transform: scale(1.045); }
    to { transform: scale(1.015); }
}

@media (max-width: 900px) {
    .portal-template-home .template-header {
        height: 70px;
        padding-inline: 18px;
    }

    .portal-template-home .template-brand img {
        width: 43px;
        height: 43px;
    }

    .portal-template-home .template-brand strong {
        font-size: 18px;
    }

    .portal-template-home .template-hero {
        min-height: 540px;
    }

    .portal-template-home .template-hero-media img {
        object-position: 64% center;
    }

    .portal-template-home .template-hero-wash {
        background:
            linear-gradient(90deg,
                rgba(250,252,250,.99) 0%,
                rgba(250,252,250,.96) 38%,
                rgba(250,252,250,.72) 58%,
                rgba(250,252,250,.14) 100%),
            linear-gradient(0deg, rgba(17,57,38,.08), transparent 35%);
    }

    .portal-template-home .template-hero-inner {
        width: calc(100% - 38px);
        padding-bottom: 100px;
    }

    .portal-template-home .template-hero-copy {
        width: min(540px, 62vw);
    }

    .portal-template-home .template-hero h1 {
        font-size: clamp(42px, 7vw, 58px);
    }

    .portal-template-home .template-service-wrap,
    .portal-template-home .template-info {
        width: calc(100% - 28px);
    }

    .portal-template-home .template-service-card {
        min-height: 210px;
        padding: 26px 28px;
    }

    .portal-template-home .template-info {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 70px;
    }
}

@media (max-width: 620px) {
    .portal-template-home .template-header {
        height: 64px;
        padding-inline: 12px;
    }

    .portal-template-home .template-brand {
        gap: 8px;
    }

    .portal-template-home .template-brand img {
        width: 39px;
        height: 39px;
    }

    .portal-template-home .template-brand strong {
        font-size: 16px;
    }

    .portal-template-home .template-brand small {
        margin-top: 4px;
        font-size: 9px;
    }

    .portal-template-home .template-hero {
        min-height: 470px;
    }

    .portal-template-home .template-hero-media img {
        object-position: 68% center;
    }

    .portal-template-home .template-hero-wash {
        background:
            linear-gradient(90deg,
                rgba(250,252,250,.99) 0%,
                rgba(250,252,250,.92) 52%,
                rgba(250,252,250,.40) 78%,
                rgba(250,252,250,.18) 100%),
            linear-gradient(0deg, rgba(17,57,38,.12), transparent 48%);
    }

    .portal-template-home .template-hero-inner {
        width: calc(100% - 24px);
        align-items: flex-start;
        padding: 70px 0 88px;
    }

    .portal-template-home .template-hero-copy {
        width: 78%;
        max-width: 340px;
    }

    .portal-template-home .template-kicker {
        min-height: 23px;
        padding-inline: 8px;
        font-size: 8.5px;
    }

    .portal-template-home .template-hero h1 {
        margin: 14px 0 13px;
        font-size: clamp(31px, 9.1vw, 42px);
        line-height: 1.02;
    }

    .portal-template-home .template-hero p {
        max-width: 290px;
        font-size: 11.5px;
        line-height: 1.55;
    }

    .portal-template-home .template-service-wrap {
        width: calc(100% - 14px);
        margin-top: -58px;
    }

    .portal-template-home .template-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 14px;
    }

    .portal-template-home .template-service-card {
        min-height: 178px;
        padding: 15px 13px 14px;
    }

    .portal-template-home .template-service-card::before {
        width: 125px;
        height: 125px;
        top: -88px;
        right: -26px;
    }

    .portal-template-home .template-service-card::after {
        width: 88px;
        height: 88px;
        right: 20px;
        bottom: -70px;
    }

    .portal-template-home .template-service-number {
        font-size: 9px;
    }

    .portal-template-home .template-service-copy {
        gap: 6px;
        margin-top: 16px;
    }

    .portal-template-home .template-service-copy strong {
        font-size: clamp(16px, 4.8vw, 20px);
        line-height: 1.08;
    }

    .portal-template-home .template-service-copy > span {
        max-width: 145px;
        font-size: 9.5px;
        line-height: 1.35;
    }

    .portal-template-home .template-service-link {
        gap: 7px;
        padding-top: 14px;
        font-size: 9px;
        white-space: nowrap;
    }

    .portal-template-home .template-service-link > span:first-child::after {
        bottom: -4px;
        height: 1px;
    }

    .portal-template-home .template-service-arrow {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    .portal-template-home .template-info {
        width: calc(100% - 20px);
        margin: 58px auto 45px;
        padding: 24px 4px;
        gap: 18px;
    }

    .portal-template-home .template-info-heading > span {
        font-size: 9px;
    }

    .portal-template-home .template-info-heading h2 {
        font-size: 23px;
    }

    .portal-template-home .template-info-copy p {
        font-size: 11px;
        line-height: 1.52;
    }

    .portal-template-home .template-footer {
        min-height: 54px;
        font-size: 9px;
    }
}

/* V111 - balanced header navigation and uppercase identity. */
.portal-template-home .template-brand-title {
    font-weight: 800;
    letter-spacing: .055em;
}

.portal-template-home .template-home-nav {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
}

.portal-template-home .template-home-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #fff;
    border-radius: 999px;
    background: #fff;
    color: #165b3d;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.portal-template-home .template-home-nav a:hover,
.portal-template-home .template-home-nav a:focus-visible {
    background: #165b3d;
    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .portal-template-home .template-home-nav { left: 12px; }
    .portal-template-home .template-home-nav a { min-height: 38px; padding: 0 12px; font-size: 15px; }
}

@media (max-width: 620px) {
    .portal-template-home .template-brand-title { font-size: 13px; letter-spacing: .025em; }
    .portal-template-home .template-home-nav { left: 8px; }
    .portal-template-home .template-home-nav a { min-height: 35px; padding: 0 9px; font-size: 13px; }
    .portal-template-home .template-home-nav a span { display: none; }
}

/* V107 - 40% white copy area and 60% campus photograph. */
.portal-template-home .template-hero-media img {
    width: 60%;
    height: 100%;
    right: 0;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.24) 10%, rgba(0,0,0,.72) 22%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.24) 10%, rgba(0,0,0,.72) 22%, #000 34%);
}

.portal-template-home .template-hero-wash {
    background:
        linear-gradient(90deg, #fafcfa 0%, #fafcfa 28%, rgba(250,252,250,.94) 36%, rgba(250,252,250,.56) 45%, rgba(250,252,250,.14) 55%, transparent 64%),
        linear-gradient(0deg, rgba(17,57,38,.055), transparent 38%);
}

@media (max-width: 620px) {
    .portal-template-home .template-hero-media img {
        width: 64%;
        right: 0;
        object-fit: cover;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 12%, rgba(0,0,0,.68) 29%, #000 43%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 12%, rgba(0,0,0,.68) 29%, #000 43%);
    }
}

/* V108 - concise hero typography, institutional marks, and spacing. */
.portal-template-home .template-hero h1 {
    max-width: 540px;
    font-size: clamp(31px, 3.25vw, 43px);
    line-height: 1.08;
    letter-spacing: -.032em;
}

.portal-template-home .template-hero p {
    font-size: 14px;
    line-height: 1.55;
}

.portal-template-home .template-hero-partners {
    display: flex;
    align-items: center;
    gap: 16px;
    width: max-content;
    margin-top: 20px;
    padding: 9px 14px;
    border: 1px solid rgba(22,98,69,.11);
    border-radius: 13px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 8px 24px rgba(24,72,49,.07);
    backdrop-filter: blur(5px);
}

.portal-template-home .template-hero-partners > span {
    width: 1px;
    height: 38px;
    background: rgba(22,98,69,.16);
}

.portal-template-home .template-partner-logo {
    display: block;
    width: auto;
    object-fit: contain;
}

.portal-template-home .template-partner-logo--instiper { height: 48px; }
.portal-template-home .template-partner-logo--academy { height: 52px; }

@media (max-width: 900px) {
    .portal-template-home .template-hero h1 { font-size: clamp(27px, 4.8vw, 37px); }
    .portal-template-home .template-hero p { font-size: 12.5px; }
    .portal-template-home .template-hero-partners { gap: 11px; margin-top: 15px; padding: 7px 10px; }
    .portal-template-home .template-partner-logo--instiper { height: 38px; }
    .portal-template-home .template-partner-logo--academy { height: 42px; }
}

@media (max-width: 620px) {
    .portal-template-home .template-hero h1 { font-size: clamp(23px, 6.7vw, 29px); }
    .portal-template-home .template-hero p { max-width: 260px; font-size: 11px; }
    .portal-template-home .template-hero-partners { gap: 8px; margin-top: 12px; padding: 6px 8px; border-radius: 10px; }
    .portal-template-home .template-hero-partners > span { height: 28px; }
    .portal-template-home .template-partner-logo--instiper { height: 29px; }
    .portal-template-home .template-partner-logo--academy { height: 32px; }
}

@media (max-width: 390px) {
    .portal-template-home .template-service-card {
        min-height: 170px;
        padding-inline: 11px;
    }

    .portal-template-home .template-service-copy strong {
        font-size: 16px;
    }

    .portal-template-home .template-service-copy > span {
        font-size: 9px;
    }

    .portal-template-home .template-service-link {
        font-size: 8.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-template-home *,
    .portal-template-home *::before,
    .portal-template-home *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* V118 - mobile hero uses the full campus photo. */
.portal-template-home .template-title-mobile { display: none; }

@media (max-width: 620px) {
    .portal-template-home .template-hero {
        min-height: 430px;
        background: #234c39;
    }

    .portal-template-home .template-hero-media img {
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 64% center;
        transform: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .portal-template-home .template-hero-wash {
        background: linear-gradient(180deg, rgba(9,37,25,.14) 0%, rgba(9,37,25,.25) 58%, rgba(9,37,25,.42) 100%);
    }

    .portal-template-home .template-hero-inner {
        width: 100%;
        align-items: flex-start;
        justify-content: center;
        padding: 58px 14px 96px;
    }

    .portal-template-home .template-hero-copy {
        width: 100%;
        max-width: none;
        margin: 0;
        text-align: center;
    }

    .portal-template-home .template-title-desktop,
    .portal-template-home .template-hero-copy > p { display: none; }
    .portal-template-home .template-title-mobile { display: block; }

    .portal-template-home .template-hero h1 {
        max-width: none;
        margin: 0;
        color: #fff;
        font-size: clamp(18px, 5.7vw, 24px);
        line-height: 1.1;
        letter-spacing: -.015em;
        white-space: nowrap;
        text-shadow: 0 2px 12px rgba(0,0,0,.34);
    }

    .portal-template-home .template-hero-partners {
        margin: 28px auto 0;
        padding: 9px 12px;
        gap: 14px;
        background: rgba(255,255,255,.88);
        border-color: rgba(255,255,255,.72);
        box-shadow: 0 12px 30px rgba(0,0,0,.17);
    }

    .portal-template-home .template-hero-partners > span { height: 34px; }
    .portal-template-home .template-partner-logo--instiper { height: 39px; }
    .portal-template-home .template-partner-logo--academy { height: 43px; }
}

/* =========================================================
   V85 - HOME STUDENT DROPDOWN + HERO IMAGE COMPOSITION
   Homepage only. Existing public destination pages unchanged.
   ========================================================= */

/* Show the supplied campus photo more completely instead of cropping it
   to fill the whole hero width. */
.portal-template-home .template-hero-media img {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: right center;
    transform: none;
    animation: templateHeroReveal .75s ease-out both;
}

.portal-template-home .template-hero-copy {
    padding-top: 0;
}

.portal-template-home .template-hero h1 {
    margin-top: 0;
}

/* Student service is now an expandable control, not a link to an
   intermediate page. */
.portal-template-home .template-service-card--toggle {
    padding: 0;
}

.portal-template-home .template-service-trigger {
    width: 100%;
    min-height: 230px;
    padding: 31px 38px 30px;
    display: flex;
    flex-direction: column;
    color: inherit;
    background: transparent;
    border: 0;
    text-align: left;
    font: inherit;
    cursor: pointer;
    outline: none;
}

.portal-template-home .template-service-card--toggle:focus-within {
    transform: translateY(-5px);
    filter: brightness(1.035);
}

.portal-template-home .template-service-plus {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #1a6847;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s ease;
}

.portal-template-home .is-student-open .template-service-plus {
    transform: rotate(45deg);
}

.portal-template-home .template-service-card--toggle:hover .template-service-link > span:first-child::after,
.portal-template-home .template-service-card--toggle:focus-within .template-service-link > span:first-child::after {
    width: 100%;
}

.portal-template-home .template-service-card--toggle:hover .template-service-plus,
.portal-template-home .template-service-card--toggle:focus-within .template-service-plus {
    transform: translateX(3px) scale(1.04);
}

.portal-template-home .is-student-open .template-service-card--toggle:hover .template-service-plus,
.portal-template-home .is-student-open .template-service-card--toggle:focus-within .template-service-plus {
    transform: rotate(45deg) translate(2px, -2px) scale(1.04);
}

/* The menu is a full-width extension of the two reference-style service
   cards, so it stays readable on desktop and mobile. */
.portal-template-home .template-student-menu {
    grid-column: 1 / -1;
    max-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    border-top: 0 solid rgba(25, 93, 61, .10);
    transition:
        max-height .38s cubic-bezier(.2,.8,.2,1),
        opacity .24s ease,
        visibility .24s ease,
        border-top-width .2s ease;
}

.portal-template-home .template-service-grid.is-student-open .template-student-menu {
    max-height: 118px;
    opacity: 1;
    visibility: visible;
    border-top-width: 1px;
}

.portal-template-home .template-student-menu a {
    position: relative;
    min-height: 96px;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    color: #173b2b;
    text-decoration: none;
    background: #fff;
    transition: background .24s ease, color .24s ease;
}

.portal-template-home .template-student-menu a:not(:last-child) {
    border-right: 1px solid rgba(25, 93, 61, .10);
}

.portal-template-home .template-student-menu a > span {
    color: #70a58c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.portal-template-home .template-student-menu a strong {
    font-size: 15px;
    letter-spacing: -.01em;
}

.portal-template-home .template-student-menu a b {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #1b7652;
    background: #eef7f1;
    font-size: 15px;
    font-weight: 600;
    transition: transform .24s ease, background .24s ease, color .24s ease;
}

.portal-template-home .template-student-menu a:hover,
.portal-template-home .template-student-menu a:focus-visible {
    color: #0f5b3b;
    background: #f4faf6;
    outline: none;
}

.portal-template-home .template-student-menu a:hover b,
.portal-template-home .template-student-menu a:focus-visible b {
    transform: translateX(4px);
    color: #fff;
    background: #1b7652;
}

@keyframes templateHeroReveal {
    from { opacity: .82; transform: scale(1.01); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 900px) {
    .portal-template-home .template-service-trigger {
        min-height: 210px;
        padding: 26px 28px;
    }
}

@media (max-width: 620px) {
    .portal-template-home .template-hero-media img {
        right: -4%;
        height: 100%;
        object-fit: contain;
        object-position: right center;
    }

    .portal-template-home .template-service-trigger {
        min-height: 178px;
        padding: 15px 13px 14px;
    }

    .portal-template-home .template-service-plus {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }

    .portal-template-home .template-student-menu {
        grid-template-columns: 1fr;
    }

    .portal-template-home .template-service-grid.is-student-open .template-student-menu {
        max-height: 210px;
    }

    .portal-template-home .template-student-menu a {
        min-height: 62px;
        padding: 12px 14px;
        gap: 9px;
    }

    .portal-template-home .template-student-menu a:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid rgba(25, 93, 61, .09);
    }

    .portal-template-home .template-student-menu a > span {
        font-size: 8px;
    }

    .portal-template-home .template-student-menu a strong {
        font-size: 12px;
    }

    .portal-template-home .template-student-menu a b {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    .portal-template-home .template-service-trigger {
        min-height: 170px;
        padding-inline: 11px;
    }
}


/* =========================================================
   V86 - USER-SUPPLIED RECTORATE HERO + STUDENT MENU POLISH
   Homepage only. No route/controller/admin changes.
   ========================================================= */

/* The user-supplied rectorate photo is shown in full proportion on the
   right side of the hero. No cover-crop and no zoom transform. */
.portal-template-home .template-hero-media {
    overflow: hidden;
    background: #f4f7f4;
}

.portal-template-home .template-hero-media img {
    position: absolute;
    top: 50%;
    right: 0;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: right center;
    transform: translateY(-50%);
    animation: templateHeroPhotoIn .7s ease-out both;
}

/* Keep the reference-template white-to-photo transition, while exposing
   more of the new building photo than the previous hero composition. */
.portal-template-home .template-hero-wash {
    background:
        linear-gradient(90deg,
            rgba(250,252,250,1) 0%,
            rgba(250,252,250,.99) 25%,
            rgba(250,252,250,.91) 37%,
            rgba(250,252,250,.63) 49%,
            rgba(250,252,250,.22) 61%,
            rgba(250,252,250,.04) 75%,
            rgba(250,252,250,0) 100%),
        linear-gradient(0deg, rgba(17,57,38,.055), transparent 38%);
}

/* Student card: a clear + control. The whole student card remains the
   accessible button, while this circular mark supplies the visual cue. */
.portal-template-home .template-service-plus {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    font-size: 21px;
    font-weight: 500;
    transform: rotate(0deg);
    transform-origin: center;
    transition:
        transform .36s cubic-bezier(.2,.8,.2,1),
        background .24s ease,
        color .24s ease;
}

.portal-template-home .template-service-grid.is-student-open .template-service-plus {
    transform: rotate(45deg);
}

.portal-template-home .template-service-card--toggle:hover .template-service-plus,
.portal-template-home .template-service-card--toggle:focus-within .template-service-plus {
    transform: rotate(0deg) scale(1.07);
}

.portal-template-home .template-service-grid.is-student-open .template-service-card--toggle:hover .template-service-plus,
.portal-template-home .template-service-grid.is-student-open .template-service-card--toggle:focus-within .template-service-plus {
    transform: rotate(45deg) scale(1.07);
}

/* Three schedule choices form one horizontal extension of the cards,
   matching the user's reference sketch. */
.portal-template-home .template-student-menu {
    background: #fff;
}

.portal-template-home .template-service-grid.is-student-open .template-student-menu {
    max-height: 112px;
}

.portal-template-home .template-student-menu a {
    min-height: 98px;
    padding: 18px 24px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px;
}

.portal-template-home .template-student-menu a > span {
    min-width: 18px;
}

.portal-template-home .template-student-menu a strong {
    white-space: nowrap;
}

.portal-template-home .template-student-menu a b {
    flex: 0 0 auto;
}

@keyframes templateHeroPhotoIn {
    from { opacity: .72; transform: translateY(-50%); }
    to { opacity: 1; transform: translateY(-50%); }
}

@media (max-width: 900px) {
    .portal-template-home .template-hero-media img {
        right: -4%;
        height: 100%;
    }
}

@media (max-width: 620px) {
    /* Main Mahasiswa/Dosen cards remain side-by-side. The three student
       destinations stack below them so labels stay readable/tappable. */
    .portal-template-home .template-hero-media img {
        right: -19%;
        height: 100%;
        width: auto;
        object-fit: contain;
    }

    .portal-template-home .template-service-plus {
        width: 25px;
        height: 25px;
        font-size: 16px;
    }

    .portal-template-home .template-service-grid.is-student-open .template-student-menu {
        max-height: 210px;
    }

    .portal-template-home .template-student-menu a {
        min-height: 62px;
        padding: 11px 13px;
    }

    .portal-template-home .template-student-menu a strong {
        white-space: normal;
    }
}


/* =========================================================
   V87 - Split cards + left branch navigation for mahasiswa
   Only homepage composition refined per latest discussion.
   ========================================================= */
.portal-template-home .template-service-wrap {
    width: min(1220px, calc(100% - 44px));
}

.portal-template-home .template-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    align-items: start;
}

.portal-template-home .template-student-column {
    position: relative;
}

.portal-template-home .template-service-card {
    border-radius: 18px;
    box-shadow: 0 22px 55px rgba(20, 58, 39, .17);
}

.portal-template-home .template-service-card--toggle {
    box-shadow: 0 22px 55px rgba(20, 58, 39, .17);
    border-radius: 18px;
}

.portal-template-home .template-service-trigger {
    min-height: 230px;
    padding: 28px 40px 30px 42px;
}

.portal-template-home .template-service-card--lecturer {
    min-height: 230px;
}

.portal-template-home .template-service-card--toggle:hover,
.portal-template-home .template-service-card--toggle:focus-within {
    transform: translateY(-5px);
    filter: brightness(1.035);
}

.portal-template-home .template-service-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.portal-template-home .template-service-heading strong {
    flex: 1 1 auto;
}

.portal-template-home .template-service-triangle {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    margin-top: 8px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 19px solid rgba(255,255,255,.98);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.10));
    transform-origin: 35% 50%;
    transition: transform .36s cubic-bezier(.2,.8,.2,1), filter .28s ease;
}

.portal-template-home .template-student-column.is-open .template-service-triangle {
    transform: rotate(90deg);
}

.portal-template-home .template-service-card--toggle:hover .template-service-triangle,
.portal-template-home .template-service-card--toggle:focus-within .template-service-triangle {
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.14));
}

.portal-template-home .template-service-card--toggle .template-service-link,
.portal-template-home .template-service-card--toggle .template-service-plus,
.portal-template-home .template-service-card--toggle .template-student-menu {
    display: none !important;
}

.portal-template-home .template-student-branch {
    position: relative;
    margin-top: 16px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height .48s cubic-bezier(.2,.8,.2,1), opacity .3s ease, margin-top .3s ease;
}
.portal-template-home .template-student-branch-inner { background:transparent; }

.portal-template-home .template-student-column.is-open .template-student-branch {
    max-height: 360px;
    opacity: 1;
    pointer-events: auto;
}

.portal-template-home .template-student-branch::before,
.portal-template-home .template-student-branch::after {
    content: "";
    position: absolute;
    left: -48px;
    background: #279966;
    border-radius: 999px;
    opacity: 0;
}

.portal-template-home .template-student-branch::before {
    top: -110px;
    width: 2px;
    height: calc(100% - 20px);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .34s ease .06s, opacity .18s ease .06s;
}

.portal-template-home .template-student-branch::after {
    top: -92px;
    width: 48px;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease, opacity .15s ease;
}

.portal-template-home .template-student-column.is-open .template-student-branch::before,
.portal-template-home .template-student-column.is-open .template-student-branch::after {
    opacity: 1;
}

.portal-template-home .template-student-column.is-open .template-student-branch::before {
    transform: scaleY(1);
}

.portal-template-home .template-student-column.is-open .template-student-branch::after {
    transform: scaleX(1);
}

.portal-template-home .template-student-link {
    position: relative;
    min-height: 78px;
    width: 100%;
    margin-top: 12px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    color: #173b2b;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(30, 97, 66, .10);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(20, 58, 39, .08);
    transition: transform .24s ease, box-shadow .24s ease, background .24s ease, color .24s ease;
}

.portal-template-home .template-student-link:first-child {
    margin-top: 0;
}

.portal-template-home .template-student-link::before {
    content: "";
    position: absolute;
    left: -48px;
    top: 50%;
    width: 48px;
    height: 2px;
    background: #279966;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    transition: transform .22s ease, opacity .15s ease;
}

.portal-template-home .template-student-link::after {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #279966;
    border-right: 2px solid #279966;
    opacity: 0;
    transform: translateY(-50%) rotate(45deg) scale(.7);
    transition: transform .22s ease, opacity .15s ease;
}

.portal-template-home .template-student-column.is-open .template-student-link::before,
.portal-template-home .template-student-column.is-open .template-student-link::after {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
}

.portal-template-home .template-student-column.is-open .template-student-link::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

.portal-template-home .template-student-link:nth-child(1)::before,
.portal-template-home .template-student-link:nth-child(1)::after,
.portal-template-home .template-student-link:nth-child(1) {
    transition-delay: .08s;
}

.portal-template-home .template-student-link:nth-child(2)::before,
.portal-template-home .template-student-link:nth-child(2)::after,
.portal-template-home .template-student-link:nth-child(2) {
    transition-delay: .14s;
}

.portal-template-home .template-student-link:nth-child(3)::before,
.portal-template-home .template-student-link:nth-child(3)::after,
.portal-template-home .template-student-link:nth-child(3) {
    transition-delay: .20s;
}

.portal-template-home .template-student-link > span {
    color: #70a58c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.portal-template-home .template-student-link strong {
    font-size: 16px;
    letter-spacing: -.01em;
}

.portal-template-home .template-student-link b {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #1b7652;
    background: #eef7f1;
    font-size: 16px;
    font-weight: 600;
    transition: transform .24s ease, background .24s ease, color .24s ease;
}

.portal-template-home .template-student-link:hover,
.portal-template-home .template-student-link:focus-visible {
    color: #0f5b3b;
    background: #f4faf6;
    box-shadow: 0 14px 30px rgba(20, 58, 39, .10);
    transform: translateX(4px);
    outline: none;
}

.portal-template-home .template-student-link:hover b,
.portal-template-home .template-student-link:focus-visible b {
    transform: translateX(4px);
    color: #fff;
    background: #1b7652;
}

.portal-template-home .template-info {
    margin: 40px auto 70px;
}

@media (max-width: 900px) {
    .portal-template-home .template-service-wrap,
    .portal-template-home .template-info {
        width: calc(100% - 28px);
    }

    .portal-template-home .template-service-grid {
        gap: 16px;
    }

    .portal-template-home .template-service-trigger,
    .portal-template-home .template-service-card--lecturer {
        min-height: 210px;
    }

    .portal-template-home .template-service-trigger {
        padding: 24px 26px 26px 28px;
    }

    .portal-template-home .template-student-branch::before,
    .portal-template-home .template-student-branch::after,
    .portal-template-home .template-student-link::before {
        left: -30px;
    }

    .portal-template-home .template-student-branch::after,
    .portal-template-home .template-student-link::before {
        width: 30px;
    }

    .portal-template-home .template-student-link::after {
        left: -6px;
    }
}

@media (max-width: 620px) {
    .portal-template-home .template-service-wrap {
        width: calc(100% - 14px);
        margin-top: -58px;
    }

    .portal-template-home .template-service-grid {
        gap: 8px;
    }

    .portal-template-home .template-service-card,
    .portal-template-home .template-service-card--toggle {
        border-radius: 14px;
    }

    .portal-template-home .template-service-trigger,
    .portal-template-home .template-service-card--lecturer {
        min-height: 184px;
    }

    .portal-template-home .template-service-trigger {
        padding: 15px 13px 15px 15px;
    }

    .portal-template-home .template-service-card--lecturer {
        padding: 15px 13px 14px;
    }

    .portal-template-home .template-service-copy {
        gap: 6px;
        margin-top: 16px;
    }

    .portal-template-home .template-service-heading {
        gap: 10px;
    }

    .portal-template-home .template-service-triangle {
        margin-top: 6px;
        border-top-width: 9px;
        border-bottom-width: 9px;
        border-left-width: 14px;
    }

    .portal-template-home .template-student-branch {
        margin-top: 10px;
    }

    .portal-template-home .template-student-branch::before,
    .portal-template-home .template-student-branch::after,
    .portal-template-home .template-student-link::before,
    .portal-template-home .template-student-link::after {
        display: none;
    }

    .portal-template-home .template-student-column.is-open .template-student-branch {
        max-height: 240px;
    }

    .portal-template-home .template-student-link {
        min-height: 62px;
        margin-top: 8px;
        padding: 0 10px;
        gap: 8px;
        border-radius: 12px;
    }

    .portal-template-home .template-student-link > span {
        font-size: 8px;
    }

    .portal-template-home .template-student-link strong {
        font-size: 12px;
    }

    .portal-template-home .template-student-link b {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .portal-template-home .template-info {
        width: calc(100% - 20px);
        margin: 28px auto 45px;
        padding: 24px 4px;
    }
}


/* =========================================================
   V88 - visible thick green left branch connector
   Fix clipped connector by separating visible outer branch
   from collapsible inner content.
   ========================================================= */
.portal-template-home .template-student-branch {
    position: relative;
    margin-top: 16px;
    max-height: none;
    opacity: 1;
    overflow: visible;
    pointer-events: none;
}

.portal-template-home .template-student-branch-inner {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .48s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}

.portal-template-home .template-student-column.is-open .template-student-branch {
    pointer-events: auto;
}

.portal-template-home .template-student-column.is-open .template-student-branch-inner {
    max-height: 360px;
    opacity: 1;
}

.portal-template-home .template-student-branch::before,
.portal-template-home .template-student-branch::after {
    content: "";
    position: absolute;
    left: -42px;
    background: #1aa05f;
    border-radius: 999px;
    opacity: 0;
}

.portal-template-home .template-student-branch::before {
    top: -92px;
    bottom: 42px;
    width: 4px;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .34s ease .06s, opacity .18s ease .06s;
}

.portal-template-home .template-student-branch::after {
    top: -76px;
    width: 42px;
    height: 4px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease, opacity .15s ease;
}

.portal-template-home .template-student-column.is-open .template-student-branch::before,
.portal-template-home .template-student-column.is-open .template-student-branch::after {
    opacity: 1;
}

.portal-template-home .template-student-column.is-open .template-student-branch::before {
    transform: scaleY(1);
}

.portal-template-home .template-student-column.is-open .template-student-branch::after {
    transform: scaleX(1);
}

.portal-template-home .template-student-link {
    overflow: visible;
}

.portal-template-home .template-student-link::before {
    left: -42px;
    width: 42px;
    height: 4px;
    background: #1aa05f;
}

.portal-template-home .template-student-link::after {
    left: -6px;
    width: 10px;
    height: 10px;
    border-top: 4px solid #1aa05f;
    border-right: 4px solid #1aa05f;
}

.portal-template-home .template-student-column.is-open .template-student-link::before,
.portal-template-home .template-student-column.is-open .template-student-link::after {
    opacity: 1;
}

.portal-template-home .template-student-column.is-open .template-student-link::before {
    transform: translateY(-50%) scaleX(1);
}

.portal-template-home .template-student-column.is-open .template-student-link::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

@media (max-width: 900px) {
    .portal-template-home .template-student-branch::before,
    .portal-template-home .template-student-branch::after,
    .portal-template-home .template-student-link::before {
        left: -28px;
    }

    .portal-template-home .template-student-branch::after,
    .portal-template-home .template-student-link::before {
        width: 28px;
    }

    .portal-template-home .template-student-link::after {
        left: -5px;
    }
}

@media (max-width: 620px) {
    .portal-template-home .template-student-branch {
        margin-top: 10px;
    }

    .portal-template-home .template-student-branch-inner {
        transition-duration: .36s;
    }

    .portal-template-home .template-student-column.is-open .template-student-branch-inner {
        max-height: 240px;
    }

    .portal-template-home .template-student-branch::before,
    .portal-template-home .template-student-branch::after,
    .portal-template-home .template-student-link::before,
    .portal-template-home .template-student-link::after {
        display: none;
    }
}


/* =========================================================
   V89 - complete thick green branch lines to 01/02/03
   Keep V88 layout, add visible full horizontal branches.
   ========================================================= */
.portal-template-home .template-student-branch::before {
    width: 5px;
    background: #179b5b;
    left: -46px;
    top: -92px;
    bottom: 39px;
}

.portal-template-home .template-student-branch::after {
    left: -46px;
    width: 46px;
    height: 5px;
    top: -76px;
    background: #179b5b;
}

.portal-template-home .template-student-connectors {
    position: absolute;
    left: -46px;
    top: 0;
    width: 46px;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}

.portal-template-home .template-student-column.is-open .template-student-connectors {
    opacity: 1;
}

.portal-template-home .template-student-connectors > span {
    position: absolute;
    left: 0;
    width: 46px;
    height: 5px;
    background: #179b5b;
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .24s ease, opacity .15s ease;
}

.portal-template-home .template-student-connectors > span::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-top: 5px solid #179b5b;
    border-right: 5px solid #179b5b;
    transform: translateY(-50%) rotate(45deg) scale(.76);
    transform-origin: center;
    transition: transform .24s ease;
}

.portal-template-home .template-student-connectors > span:nth-child(1) { top: 39px; transition-delay: .08s; }
.portal-template-home .template-student-connectors > span:nth-child(1)::after { transition-delay: .08s; }
.portal-template-home .template-student-connectors > span:nth-child(2) { top: 129px; transition-delay: .15s; }
.portal-template-home .template-student-connectors > span:nth-child(2)::after { transition-delay: .15s; }
.portal-template-home .template-student-connectors > span:nth-child(3) { top: 219px; transition-delay: .22s; }
.portal-template-home .template-student-connectors > span:nth-child(3)::after { transition-delay: .22s; }

.portal-template-home .template-student-column.is-open .template-student-connectors > span {
    transform: scaleX(1);
}

.portal-template-home .template-student-column.is-open .template-student-connectors > span::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

.portal-template-home .template-student-link::before,
.portal-template-home .template-student-link::after {
    display: none;
}

@media (max-width: 900px) {
    .portal-template-home .template-student-branch::before {
        left: -32px;
        bottom: 37px;
    }

    .portal-template-home .template-student-branch::after {
        left: -32px;
        width: 32px;
    }

    .portal-template-home .template-student-connectors {
        left: -32px;
        width: 32px;
    }

    .portal-template-home .template-student-connectors > span {
        width: 32px;
        height: 4px;
    }

    .portal-template-home .template-student-connectors > span::after {
        width: 10px;
        height: 10px;
        border-top-width: 4px;
        border-right-width: 4px;
    }

    .portal-template-home .template-student-connectors > span:nth-child(1) { top: 39px; }
    .portal-template-home .template-student-connectors > span:nth-child(2) { top: 129px; }
    .portal-template-home .template-student-connectors > span:nth-child(3) { top: 219px; }
}

@media (max-width: 620px) {
    .portal-template-home .template-student-connectors {
        display: none;
    }
}


/* =========================================================
   V90 - finalize connector cleanup + remove numbers + centered submenu
   Fix top excess, fully connect third branch, enlarge branch, add gap,
   remove all 01/02/03 labels, and center submenu labels.
   ========================================================= */
.portal-template-home .template-service-number,
.portal-template-home .template-student-link > span {
    display: none !important;
}

.portal-template-home .template-service-trigger {
    min-height: 214px;
}

.portal-template-home .template-service-card--lecturer {
    min-height: 214px;
}

.portal-template-home .template-student-branch {
    margin-top: 20px;
}

.portal-template-home .template-student-branch::before {
    left: -54px;
    top: -72px;
    width: 6px;
    height: 296px;
    bottom: auto;
    background: #169959;
}

.portal-template-home .template-student-branch::after {
    left: -54px;
    top: -72px;
    width: 54px;
    height: 6px;
    background: #169959;
}

.portal-template-home .template-student-connectors {
    left: -54px;
    width: 54px;
}

.portal-template-home .template-student-connectors > span {
    left: 0;
    width: 30px;
    height: 6px;
    background: #169959;
}

.portal-template-home .template-student-connectors > span::after {
    right: -1px;
    width: 14px;
    height: 14px;
    border-top: 6px solid #169959;
    border-right: 6px solid #169959;
}

.portal-template-home .template-student-connectors > span:nth-child(1) { top: 37px; }
.portal-template-home .template-student-connectors > span:nth-child(2) { top: 129px; }
.portal-template-home .template-student-connectors > span:nth-child(3) { top: 221px; }

.portal-template-home .template-student-link {
    min-height: 76px;
    padding: 0 62px 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.portal-template-home .template-student-link strong {
    flex: 1 1 auto;
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
    text-align: center;
}

.portal-template-home .template-student-link b {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    font-size: 17px;
}

.portal-template-home .template-student-link:hover,
.portal-template-home .template-student-link:focus-visible {
    transform: translateX(0);
}

.portal-template-home .template-student-link:hover b,
.portal-template-home .template-student-link:focus-visible b {
    transform: translateY(-50%) translateX(4px);
}

@media (max-width: 900px) {
    .portal-template-home .template-student-branch::before {
        left: -38px;
        height: 296px;
    }

    .portal-template-home .template-student-branch::after {
        left: -38px;
        width: 38px;
    }

    .portal-template-home .template-student-connectors {
        left: -38px;
        width: 38px;
    }

    .portal-template-home .template-student-connectors > span {
        width: 22px;
        height: 5px;
    }

    .portal-template-home .template-student-connectors > span::after {
        width: 12px;
        height: 12px;
        border-top-width: 5px;
        border-right-width: 5px;
    }

    .portal-template-home .template-student-link {
        padding: 0 56px 0 22px;
    }
}

@media (max-width: 620px) {
    .portal-template-home .template-service-trigger,
    .portal-template-home .template-service-card--lecturer {
        min-height: 184px;
    }

    .portal-template-home .template-student-branch {
        margin-top: 10px;
    }

    .portal-template-home .template-student-link {
        min-height: 62px;
        padding: 0 42px 0 12px;
    }

    .portal-template-home .template-student-link strong {
        font-size: 12px;
    }

    .portal-template-home .template-student-link b {
        right: 10px;
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}


/* =========================================================
   V91 - title alignment and larger triangle/arrow on main cards
   Center title for mahasiswa, single-line headings on desktop,
   remove bottom lecturer CTA, move arrow beside title.
   ========================================================= */
.portal-template-home .template-service-trigger,
.portal-template-home .template-service-card--lecturer {
    min-height: 206px;
}

.portal-template-home .template-service-trigger {
    padding-top: 30px;
}

.portal-template-home .template-service-card--lecturer {
    padding: 30px 38px 28px;
    display: flex;
    align-items: center;
}

.portal-template-home .template-service-card--toggle .template-service-copy,
.portal-template-home .template-service-card--lecturer .template-service-copy {
    width: 100%;
    display: grid;
    gap: 10px;
}

.portal-template-home .template-service-card--toggle .template-service-copy {
    justify-items: center;
    text-align: center;
}

.portal-template-home .template-service-card--lecturer .template-service-copy {
    justify-items: center;
    text-align: center;
}

.portal-template-home .template-service-heading {
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.portal-template-home .template-service-heading strong,
.portal-template-home .template-service-card--lecturer .template-service-copy > strong,
.portal-template-home .template-service-heading--lecturer strong {
    white-space: nowrap;
    line-height: 1.05;
}

.portal-template-home .template-service-card--toggle .template-service-heading strong {
    text-align: center;
}

.portal-template-home .template-service-card--toggle .template-service-copy > span:last-child,
.portal-template-home .template-service-card--lecturer .template-service-copy > span:last-child {
    text-align: center;
}

.portal-template-home .template-service-triangle {
    margin-top: 0;
    border-top-width: 15px;
    border-bottom-width: 15px;
    border-left-width: 24px;
}

.portal-template-home .template-service-heading--lecturer {
    justify-content: center;
    align-items: center;
    gap: 22px;
}

.portal-template-home .template-service-link {
    display: none !important;
}

.portal-template-home .template-service-arrow--title {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: rgba(255,255,255,.98);
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    transform: translateX(0);
    transition: transform .24s ease;
}

.portal-template-home .template-service-card--lecturer:hover .template-service-arrow--title,
.portal-template-home .template-service-card--lecturer:focus-visible .template-service-arrow--title {
    transform: translateX(6px);
}

.portal-template-home .template-service-card--lecturer .template-service-copy > span:last-child,
.portal-template-home .template-service-card--toggle .template-service-copy > span:last-child {
    font-size: 15px;
}

@media (max-width: 1100px) {
    .portal-template-home .template-service-heading strong,
    .portal-template-home .template-service-heading--lecturer strong {
        white-space: normal;
    }
}

@media (max-width: 900px) {
    .portal-template-home .template-service-trigger,
    .portal-template-home .template-service-card--lecturer {
        min-height: 196px;
    }

    .portal-template-home .template-service-card--lecturer {
        padding: 24px 24px 24px;
    }

    .portal-template-home .template-service-heading {
        gap: 14px;
    }

    .portal-template-home .template-service-triangle {
        border-top-width: 12px;
        border-bottom-width: 12px;
        border-left-width: 20px;
    }

    .portal-template-home .template-service-arrow--title {
        font-size: 34px;
    }
}

@media (max-width: 620px) {
    .portal-template-home .template-service-trigger,
    .portal-template-home .template-service-card--lecturer {
        min-height: 176px;
    }

    .portal-template-home .template-service-heading {
        gap: 8px;
    }

    .portal-template-home .template-service-heading strong,
    .portal-template-home .template-service-heading--lecturer strong {
        white-space: normal;
    }

    .portal-template-home .template-service-triangle {
        border-top-width: 10px;
        border-bottom-width: 10px;
        border-left-width: 16px;
    }

    .portal-template-home .template-service-arrow--title {
        font-size: 26px;
    }

    .portal-template-home .template-service-card--lecturer .template-service-copy > span:last-child,
    .portal-template-home .template-service-card--toggle .template-service-copy > span:last-child {
        font-size: 12px;
    }
}


/* =========================================================
   V92 - larger title icons + wider title spacing + equal card size
   Keep current layout, refine only two main cards.
   ========================================================= */
.portal-template-home .template-service-grid {
    align-items: stretch;
}

.portal-template-home .template-student-column,
.portal-template-home .template-service-card--lecturer {
    min-width: 0;
}

.portal-template-home .template-student-column > .template-service-card,
.portal-template-home .template-service-card--lecturer {
    width: 100%;
    min-height: 210px;
}

.portal-template-home .template-service-trigger,
.portal-template-home .template-service-card--lecturer {
    min-height: 210px;
}

.portal-template-home .template-service-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-template-home .template-service-card--lecturer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-template-home .template-service-heading {
    gap: 32px;
}

.portal-template-home .template-service-heading--lecturer {
    gap: 34px;
}

.portal-template-home .template-service-triangle {
    border-top-width: 18px;
    border-bottom-width: 18px;
    border-left-width: 29px;
}

.portal-template-home .template-service-arrow--title {
    font-size: 54px;
}

@media (max-width: 900px) {
    .portal-template-home .template-student-column > .template-service-card,
    .portal-template-home .template-service-card--lecturer,
    .portal-template-home .template-service-trigger,
    .portal-template-home .template-service-card--lecturer {
        min-height: 196px;
    }

    .portal-template-home .template-service-heading {
        gap: 22px;
    }

    .portal-template-home .template-service-heading--lecturer {
        gap: 24px;
    }

    .portal-template-home .template-service-triangle {
        border-top-width: 15px;
        border-bottom-width: 15px;
        border-left-width: 24px;
    }

    .portal-template-home .template-service-arrow--title {
        font-size: 42px;
    }
}

@media (max-width: 620px) {
    .portal-template-home .template-student-column > .template-service-card,
    .portal-template-home .template-service-card--lecturer,
    .portal-template-home .template-service-trigger,
    .portal-template-home .template-service-card--lecturer {
        min-height: 176px;
    }

    .portal-template-home .template-service-heading {
        gap: 12px;
    }

    .portal-template-home .template-service-heading--lecturer {
        gap: 12px;
    }

    .portal-template-home .template-service-triangle {
        border-top-width: 11px;
        border-bottom-width: 11px;
        border-left-width: 18px;
    }

    .portal-template-home .template-service-arrow--title {
        font-size: 28px;
    }
}


/* =========================================================
   V93 - isolate submenu height and lock both main cards equal
   Fix V92 stretch: dosen card must never grow with student submenu.
   ========================================================= */
.portal-template-home .template-service-grid {
    align-items: start;
}

.portal-template-home .template-student-column {
    align-self: start;
    width: 100%;
}

.portal-template-home .template-service-card--toggle,
.portal-template-home .template-service-card--lecturer {
    width: 100%;
    height: 210px;
    min-height: 210px;
    max-height: 210px;
}

.portal-template-home .template-service-trigger {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
}

.portal-template-home .template-service-card--lecturer {
    align-self: start;
}

@media (max-width: 900px) {
    .portal-template-home .template-service-card--toggle,
    .portal-template-home .template-service-card--lecturer {
        height: 196px;
        min-height: 196px;
        max-height: 196px;
    }

    .portal-template-home .template-service-trigger {
        height: 100%;
        min-height: 0;
    }
}

@media (max-width: 620px) {
    .portal-template-home .template-service-card--toggle,
    .portal-template-home .template-service-card--lecturer {
        height: 176px;
        min-height: 176px;
        max-height: 176px;
    }

    .portal-template-home .template-service-trigger {
        height: 100%;
        min-height: 0;
    }
}


/* =========================================================
   V96 - Fixed extended header with contact + centered logo + live clock
   Plus equal non-moving main cards.
   ========================================================= */
.portal-template-home .template-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: 132px;
    padding: 14px 24px 12px;
    display: grid;
    grid-template-columns: minmax(320px, 1.25fr) auto minmax(220px, 1fr);
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(20, 70, 45, .10);
    box-shadow: 0 8px 24px rgba(27, 63, 44, .05);
}

.portal-template-home main {
    padding-top: 132px;
}

.portal-template-home .template-header-contact {
    display: grid;
    gap: 7px;
    align-self: center;
    color: #446355;
    font-size: 12px;
    line-height: 1.45;
}

.portal-template-home .template-header-contact p {
    margin: 0;
}

.portal-template-home .template-header-contact strong {
    color: #1a5d3f;
}

.portal-template-home .template-brand {
    justify-self: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.portal-template-home .template-brand img {
    width: 72px;
    height: 72px;
}

.portal-template-home .template-brand > span,
.portal-template-home .template-brand strong,
.portal-template-home .template-brand small {
    display: none;
}

.portal-template-home .template-brand-title {
    display: block;
    color: #165437;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
}

.portal-template-home .template-header-clock {
    justify-self: end;
    display: grid;
    gap: 4px;
    text-align: right;
    color: #147a4e;
}

.portal-template-home .template-header-clock-line {
    display: inline-flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
}

.portal-template-home #templateHeaderDay.is-sunday {
    color: #d93434;
}

.portal-template-home .template-header-time {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
}

.portal-template-home .template-service-grid {
    align-items: start;
}

.portal-template-home .template-student-column > .template-service-card,
.portal-template-home .template-service-card--lecturer,
.portal-template-home .template-service-trigger {
    min-height: 210px;
}

.portal-template-home .template-service-card--toggle,
.portal-template-home .template-service-card--lecturer {
    transform: none !important;
}

.portal-template-home .template-service-card--toggle:hover,
.portal-template-home .template-service-card--toggle:focus-within,
.portal-template-home .template-service-card--lecturer:hover,
.portal-template-home .template-service-card--lecturer:focus-visible {
    transform: none !important;
    filter: brightness(1.035);
}

@media (max-width: 1100px) {
    .portal-template-home .template-header {
        grid-template-columns: minmax(250px, 1.2fr) auto minmax(180px, .9fr);
        height: 124px;
        padding-inline: 18px;
    }

    .portal-template-home main {
        padding-top: 124px;
    }

    .portal-template-home .template-header-contact {
        font-size: 11px;
    }

    .portal-template-home .template-brand img {
        width: 64px;
        height: 64px;
    }

    .portal-template-home .template-brand-title {
        font-size: 20px;
    }

    .portal-template-home .template-header-clock-line {
        font-size: 14px;
    }

    .portal-template-home .template-header-time {
        font-size: 24px;
    }
}

@media (max-width: 900px) {
    .portal-template-home .template-header {
        grid-template-columns: 1fr;
        justify-items: center;
        height: auto;
        padding: 14px 14px 12px;
        gap: 10px;
    }

    .portal-template-home main {
        padding-top: 196px;
    }

    .portal-template-home .template-header-contact,
    .portal-template-home .template-header-clock {
        justify-self: center;
        text-align: center;
    }

    .portal-template-home .template-header-clock-line {
        justify-content: center;
    }

    .portal-template-home .template-service-trigger,
    .portal-template-home .template-service-card--lecturer,
    .portal-template-home .template-student-column > .template-service-card {
        min-height: 196px;
    }
}

@media (max-width: 620px) {
    .portal-template-home .template-header {
        padding: 12px 10px 10px;
        gap: 8px;
    }

    .portal-template-home main {
        padding-top: 182px;
    }

    .portal-template-home .template-header-contact {
        gap: 5px;
        font-size: 9.5px;
        line-height: 1.35;
    }

    .portal-template-home .template-brand {
        gap: 6px;
    }

    .portal-template-home .template-brand img {
        width: 56px;
        height: 56px;
    }

    .portal-template-home .template-brand-title {
        font-size: 17px;
    }

    .portal-template-home .template-header-clock-line {
        gap: 4px;
        font-size: 12px;
    }

    .portal-template-home .template-header-time {
        font-size: 19px;
    }

    .portal-template-home .template-service-trigger,
    .portal-template-home .template-service-card--lecturer,
    .portal-template-home .template-student-column > .template-service-card {
        min-height: 176px;
    }
}


/* =========================================================
   V97 - remove contact block and restore exact centered logo
   Keep fixed header and live clock only.
   ========================================================= */
.portal-template-home .template-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: 132px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-template-home .template-header-contact {
    display: none !important;
}

.portal-template-home .template-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-self: auto;
    margin: 0;
}

.portal-template-home .template-header-clock {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    justify-self: auto;
}

@media (max-width: 1100px) {
    .portal-template-home .template-header {
        height: 124px;
        padding-inline: 18px;
    }

    .portal-template-home .template-header-clock {
        right: 20px;
    }
}

@media (max-width: 900px) {
    .portal-template-home .template-header {
        height: 112px;
        padding: 10px 12px;
    }

    .portal-template-home main {
        padding-top: 112px;
    }

    .portal-template-home .template-brand img {
        width: 58px;
        height: 58px;
    }

    .portal-template-home .template-brand-title {
        font-size: 17px;
    }

    .portal-template-home .template-header-clock {
        right: 12px;
    }

    .portal-template-home .template-header-clock-line {
        font-size: 11px;
    }

    .portal-template-home .template-header-time {
        font-size: 18px;
    }
}

@media (max-width: 620px) {
    .portal-template-home .template-header {
        height: 100px;
    }

    .portal-template-home main {
        padding-top: 100px;
    }

    .portal-template-home .template-brand img {
        width: 52px;
        height: 52px;
    }

    .portal-template-home .template-brand-title {
        font-size: 14px;
    }

    .portal-template-home .template-header-clock-line {
        font-size: 9px;
        gap: 4px;
    }

    .portal-template-home .template-header-time {
        font-size: 15px;
    }
}


/* =========================================================
   V98 - larger centered logo + refined concise hero copy
   Enlarge logo slightly, keep title under logo, and make hero
   headline/subheadline smaller, greener, more left, and cleaner.
   ========================================================= */
.portal-template-home .template-brand {
    gap: 10px;
}

.portal-template-home .template-brand img {
    width: 82px;
    height: 82px;
}

.portal-template-home .template-brand-title {
    display: block;
    color: #165c3c;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
}

.portal-template-home .template-hero-inner {
    width: min(1180px, calc(100% - 56px));
    justify-content: flex-start;
}

.portal-template-home .template-hero-copy {
    width: min(520px, 46vw);
    margin-left: 6px;
}

.portal-template-home .template-hero h1 {
    margin: 0 0 10px;
    color: #166245;
    font-size: clamp(32px, 3.4vw, 46px);
    line-height: 1.08;
    letter-spacing: -.035em;
    max-width: 500px;
}

.portal-template-home .template-hero p {
    margin: 0;
    color: #2c7252;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    max-width: 430px;
}

@media (max-width: 1100px) {
    .portal-template-home .template-brand img {
        width: 74px;
        height: 74px;
    }

    .portal-template-home .template-brand-title {
        font-size: 19px;
    }

    .portal-template-home .template-hero-copy {
        width: min(500px, 50vw);
        margin-left: 2px;
    }

    .portal-template-home .template-hero h1 {
        font-size: clamp(30px, 3.8vw, 40px);
    }

    .portal-template-home .template-hero p {
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    .portal-template-home .template-brand img {
        width: 66px;
        height: 66px;
    }

    .portal-template-home .template-brand-title {
        font-size: 18px;
    }

    .portal-template-home .template-hero-inner {
        width: calc(100% - 34px);
    }

    .portal-template-home .template-hero-copy {
        width: min(430px, 60vw);
        margin-left: 0;
    }

    .portal-template-home .template-hero h1 {
        font-size: clamp(28px, 5.2vw, 36px);
        max-width: 420px;
    }

    .portal-template-home .template-hero p {
        font-size: 13px;
        max-width: 360px;
    }
}

@media (max-width: 620px) {
    .portal-template-home .template-brand img {
        width: 58px;
        height: 58px;
    }

    .portal-template-home .template-brand-title {
        font-size: 16px;
    }

    .portal-template-home .template-hero-copy {
        width: 78%;
        max-width: 300px;
    }

    .portal-template-home .template-hero h1 {
        margin-bottom: 8px;
        font-size: clamp(24px, 7vw, 30px);
        line-height: 1.08;
    }

    .portal-template-home .template-hero p {
        font-size: 11.5px;
        line-height: 1.5;
        max-width: 270px;
    }
}


/* =========================================================
   V99 - restore logo title and shift hero copy left
   Remove “portal” wording, improve concise schedule copy,
   show INSTIPER Yogyakarta under logo, enlarge logo slightly.
   ========================================================= */
.portal-template-home .template-brand {
    gap: 8px;
}

.portal-template-home .template-brand img {
    width: 90px;
    height: 90px;
}

.portal-template-home .template-brand > .template-brand-title {
    display: block !important;
}

.portal-template-home .template-brand-title {
    color: #165b3d;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    text-align: center;
}

.portal-template-home .template-hero-inner {
    width: min(1380px, calc(100% - 64px));
    justify-content: flex-start;
}

.portal-template-home .template-hero-copy {
    width: min(600px, 45vw);
    margin-left: -28px;
}

.portal-template-home .template-hero h1 {
    max-width: 560px;
    margin: 0 0 12px;
    color: #176244;
    font-size: clamp(34px, 3.6vw, 48px);
    line-height: 1.1;
    letter-spacing: -.038em;
}

.portal-template-home .template-hero p {
    max-width: 500px;
    color: #2c7252;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .portal-template-home .template-brand img {
        width: 82px;
        height: 82px;
    }

    .portal-template-home .template-brand-title {
        font-size: 17px;
    }

    .portal-template-home .template-hero-copy {
        width: min(560px, 50vw);
        margin-left: -12px;
    }

    .portal-template-home .template-hero h1 {
        font-size: clamp(31px, 4vw, 42px);
        max-width: 520px;
    }
}

@media (max-width: 900px) {
    .portal-template-home .template-brand img {
        width: 72px;
        height: 72px;
    }

    .portal-template-home .template-brand-title {
        font-size: 15px;
    }

    .portal-template-home .template-hero-inner {
        width: calc(100% - 36px);
    }

    .portal-template-home .template-hero-copy {
        width: min(460px, 62vw);
        margin-left: 0;
    }

    .portal-template-home .template-hero h1 {
        font-size: clamp(28px, 5.1vw, 36px);
        max-width: 430px;
    }

    .portal-template-home .template-hero p {
        font-size: 13px;
        max-width: 370px;
    }
}

@media (max-width: 620px) {
    .portal-template-home .template-brand img {
        width: 60px;
        height: 60px;
    }

    .portal-template-home .template-brand-title {
        font-size: 13px;
    }

    .portal-template-home .template-hero-copy {
        width: 80%;
        max-width: 310px;
    }

    .portal-template-home .template-hero h1 {
        font-size: clamp(24px, 7vw, 30px);
        margin-bottom: 8px;
    }

    .portal-template-home .template-hero p {
        font-size: 11.5px;
        max-width: 280px;
    }
}


/* =========================================================
   V100 - hero copy further left/up + one-line desktop subcopy
   Homepage hero text only.
   ========================================================= */
.portal-template-home .template-hero-inner {
    align-items: flex-start;
    padding-top: 92px;
}

.portal-template-home .template-hero-copy {
    width: min(760px, 58vw);
    margin-left: -54px;
}

.portal-template-home .template-hero h1 {
    max-width: 620px;
}

.portal-template-home .template-hero p {
    max-width: none;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .portal-template-home .template-hero-inner {
        padding-top: 82px;
    }

    .portal-template-home .template-hero-copy {
        width: min(700px, 62vw);
        margin-left: -30px;
    }

    .portal-template-home .template-hero p {
        font-size: 13.5px;
    }
}

@media (max-width: 900px) {
    .portal-template-home .template-hero-inner {
        padding-top: 72px;
    }

    .portal-template-home .template-hero-copy {
        width: min(520px, 68vw);
        margin-left: 0;
    }

    .portal-template-home .template-hero p {
        white-space: normal;
    }
}

@media (max-width: 620px) {
    .portal-template-home .template-hero-inner {
        padding-top: 56px;
    }
}

/* V106 - remove the visible left edge of the rectorate photograph. */
.portal-template-home .template-hero-media img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 10%, rgba(0,0,0,.28) 24%, rgba(0,0,0,.68) 42%, #000 62%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 10%, rgba(0,0,0,.28) 24%, rgba(0,0,0,.68) 42%, #000 62%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.portal-template-home .template-hero-wash {
    background:
        linear-gradient(90deg, #fafcfa 0%, #fafcfa 31%, rgba(250,252,250,.98) 40%, rgba(250,252,250,.82) 51%, rgba(250,252,250,.42) 64%, rgba(250,252,250,.10) 78%, transparent 100%),
        linear-gradient(0deg, rgba(17,57,38,.055), transparent 38%);
}

@media (max-width: 620px) {
    .portal-template-home .template-hero-media img {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 12%, rgba(0,0,0,.30) 30%, rgba(0,0,0,.72) 51%, #000 72%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 12%, rgba(0,0,0,.30) 30%, rgba(0,0,0,.72) 51%, #000 72%);
    }
}

/* V107 final override: 40% white, 60% photograph, seamless transition. */
.portal-template-home .template-hero-media img {
    width: 60%;
    height: 100%;
    right: 0;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.24) 10%, rgba(0,0,0,.72) 22%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.24) 10%, rgba(0,0,0,.72) 22%, #000 34%);
}

.portal-template-home .template-hero-wash {
    background:
        linear-gradient(90deg, #fafcfa 0%, #fafcfa 28%, rgba(250,252,250,.94) 36%, rgba(250,252,250,.56) 45%, rgba(250,252,250,.14) 55%, transparent 64%),
        linear-gradient(0deg, rgba(17,57,38,.055), transparent 38%);
}

@media (max-width: 620px) {
    .portal-template-home .template-hero-media img {
        width: 64%;
        right: 0;
        object-fit: cover;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 12%, rgba(0,0,0,.68) 29%, #000 43%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 12%, rgba(0,0,0,.68) 29%, #000 43%);
    }
}

/* V108 final placement. */
.portal-template-home .template-hero-inner { padding-top: 132px; }
.portal-template-home .template-hero h1 {
    max-width: 540px;
    font-size: clamp(31px, 3.25vw, 43px);
    line-height: 1.08;
    letter-spacing: -.032em;
}
.portal-template-home .template-hero p { font-size: 17px; line-height: 1.55; }
.portal-template-home .template-hero-partners { display:flex; align-items:center; gap:18px; width:max-content; margin-top:46px; padding:10px 16px; border:1px solid rgba(22,98,69,.11); border-radius:13px; background:rgba(255,255,255,.76); box-shadow:0 8px 24px rgba(24,72,49,.07); backdrop-filter:blur(5px); }
.portal-template-home .template-hero-partners > span { width:1px; height:38px; background:rgba(22,98,69,.16); }
.portal-template-home .template-partner-logo { display:block; width:auto; object-fit:contain; }
.portal-template-home .template-partner-logo--instiper { height:56px; }
.portal-template-home .template-partner-logo--academy { height:61px; }

@media (max-width: 900px) {
    .portal-template-home .template-hero-inner { padding-top: 108px; }
    .portal-template-home .template-hero h1 { font-size:clamp(27px,4.8vw,37px); }
    .portal-template-home .template-hero p { font-size:15px; }
    .portal-template-home .template-hero-partners { gap:12px; margin-top:34px; padding:8px 11px; }
    .portal-template-home .template-partner-logo--instiper { height:44px; }
    .portal-template-home .template-partner-logo--academy { height:48px; }
}
@media (max-width: 620px) {
    .portal-template-home .template-hero-inner { padding-top: 78px; }
    .portal-template-home .template-hero h1 { font-size:clamp(23px,6.7vw,29px); }
    .portal-template-home .template-hero p { max-width:280px; font-size:13px; }
    .portal-template-home .template-hero-partners { gap:9px; margin-top:27px; padding:7px 9px; border-radius:10px; }
    .portal-template-home .template-hero-partners > span { height:28px; }
    .portal-template-home .template-partner-logo--instiper { height:34px; }
    .portal-template-home .template-partner-logo--academy { height:37px; }
}

/* V113 - clean dropdown surface and high-contrast green hover. */
.portal-template-home .template-student-branch,
.portal-template-home .template-student-branch-inner {
    border: 0;
    background: #f7faf8;
    box-shadow: none;
}

.portal-template-home .template-student-link {
    box-shadow: none;
}

.portal-template-home .template-student-link:hover,
.portal-template-home .template-student-link:focus-visible {
    border-color: #16784f;
    background: #16784f;
    color: #fff;
    box-shadow: 0 14px 30px rgba(20,88,58,.20);
}

.portal-template-home .template-student-link:hover strong,
.portal-template-home .template-student-link:focus-visible strong,
.portal-template-home .template-student-link:hover > span,
.portal-template-home .template-student-link:focus-visible > span {
    color: #fff;
}

.portal-template-home .template-student-link:hover b,
.portal-template-home .template-student-link:focus-visible b {
    background: rgba(255,255,255,.16);
    color: #fff;
}

/* V115 - subtle zoom for the two primary schedule cards. */
.portal-template-home .template-service-card--toggle,
.portal-template-home .template-service-card--lecturer {
    transform-origin: center;
    transition: transform .24s cubic-bezier(.2,.8,.2,1), filter .24s ease, box-shadow .24s ease;
}

.portal-template-home .template-service-card--toggle:hover,
.portal-template-home .template-service-card--lecturer:hover {
    transform: scale(1.055) !important;
    filter: brightness(1.04);
    box-shadow: 0 26px 60px rgba(20,58,39,.22);
    z-index: 3;
}

.portal-template-home .template-service-card--toggle:focus-within:not(:hover),
.portal-template-home .template-service-card--lecturer:focus-visible:not(:hover) {
    transform: none !important;
}

.portal-template-home .template-service-card--toggle::before,
.portal-template-home .template-service-card--toggle::after,
.portal-template-home .template-service-card--lecturer::before,
.portal-template-home .template-service-card--lecturer::after {
    display: none !important;
    content: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .portal-template-home .template-service-card--toggle:hover,
    .portal-template-home .template-service-card--lecturer:hover {
        transform: none !important;
    }
}

/* V118 final mobile placement. */
.portal-template-home .template-title-mobile { display:none; }
@media (max-width:620px) {
    .portal-template-home .template-hero { min-height:430px; background:#234c39; }
    .portal-template-home .template-hero-media img {
        top:0; right:0; width:100%; height:100%; object-fit:cover; object-position:64% center;
        transform:none; -webkit-mask-image:none; mask-image:none;
    }
    .portal-template-home .template-hero-wash { background:linear-gradient(180deg,rgba(9,37,25,.14) 0%,rgba(9,37,25,.25) 58%,rgba(9,37,25,.42) 100%); }
    .portal-template-home .template-hero-inner { width:100%; align-items:flex-start; justify-content:center; padding:58px 14px 96px; }
    .portal-template-home .template-hero-copy { width:100%; max-width:none; margin:0; text-align:center; }
    .portal-template-home .template-title-desktop,
    .portal-template-home .template-hero-copy > p { display:none; }
    .portal-template-home .template-title-mobile { display:block; }
    .portal-template-home .template-hero h1 {
        max-width:none; margin:0; color:#fff; font-size:clamp(18px,5.7vw,24px); line-height:1.1;
        letter-spacing:-.015em; white-space:nowrap; text-shadow:0 2px 12px rgba(0,0,0,.34);
    }
    .portal-template-home .template-hero-partners {
        margin:28px auto 0; padding:9px 12px; gap:14px; background:rgba(255,255,255,.88);
        border-color:rgba(255,255,255,.72); box-shadow:0 12px 30px rgba(0,0,0,.17);
    }
    .portal-template-home .template-hero-partners > span { height:34px; }
    .portal-template-home .template-partner-logo--instiper { height:39px; }
    .portal-template-home .template-partner-logo--academy { height:43px; }
}

/* V119 - show more of the building and remove excess mobile hero space. */
@media (max-width:620px) {
    .portal-template-home .template-hero {
        height:clamp(285px,75vw,350px);
        min-height:0;
    }
    .portal-template-home .template-hero-media,
    .portal-template-home .template-hero-wash { inset:0; height:100%; }
    .portal-template-home .template-hero-media img {
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center center;
        animation:none !important;
        transform:none !important;
    }
    .portal-template-home .template-hero-inner { min-height:0; height:100%; padding:38px 12px 58px; }
    .portal-template-home .template-hero h1 {
        color:#087442;
        text-shadow:0 1px 2px rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.78);
    }
    .portal-template-home .template-hero-partners { margin-top:22px; }
}

/* V121 - keep the footer visually anchored after the info section removal. */
.portal-template-home .template-service-wrap { margin-bottom:110px; }
@media (max-width:900px) {
    .portal-template-home .template-service-wrap { margin-bottom:86px; }
}
@media (max-width:620px) {
    .portal-template-home .template-service-wrap { margin-bottom:68px; }
}

/* V122 - reserve submenu height so opening/closing never moves the footer. */
.portal-template-home .template-student-branch {
    height:252px;
    min-height:252px;
    background:transparent;
}
.portal-template-home .template-service-wrap { margin-bottom:58px; }

@media (max-width:620px) {
    .portal-template-home .template-student-branch {
        height:202px;
        min-height:202px;
        background:transparent;
    }
    .portal-template-home .template-service-wrap { margin-bottom:44px; }
}

/* Keep the hero copy inside narrower desktop viewports (for example DevTools docked). */
.portal-template-home .template-hero-copy {
    margin-left:0;
}

@media (min-width:901px) and (max-width:1280px) {
    .portal-template-home .template-hero-inner {
        width:calc(100% - 48px);
    }

    .portal-template-home .template-hero-copy {
        width:min(620px, 54vw);
    }

    .portal-template-home .template-hero h1 {
        max-width:560px;
        font-size:clamp(34px, 3.6vw, 43px);
    }

    .portal-template-home .template-hero p {
        white-space:normal;
    }
}

/* V139 - three balanced contact columns without a divider. */
.portal-template-home .template-contact-inner {
    grid-template-columns:minmax(330px,390px) minmax(260px,300px) minmax(430px,540px);
    gap:clamp(28px,3vw,54px);
    justify-content:space-between;
}
.portal-template-home .template-institute-card {
    order:initial;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    grid-column:auto;
    grid-row:auto;
}
.portal-template-home .template-contact-links {
    width:100%;
    padding-top:0;
    justify-self:center;
}
.portal-template-home .template-campus-item p,
.portal-template-home .template-campus-item strong,
.portal-template-home .template-campus-item a,
.portal-template-home .template-contact-email,
.portal-template-home .template-campus-item p > span {
    color:#fff;
}
.portal-template-home .template-contact-row svg,
.portal-template-home .template-contact-email svg {
    fill:#fff;
}
.portal-template-home .template-social-grid {
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(110px,130px));
    grid-template-rows:repeat(2,62px);
    justify-content:center;
    gap:8px 12px;
}
.portal-template-home .template-social-grid > a {
    width:100%;
    min-width:0;
    margin:0;
    padding:3px 0;
    border:0;
    grid-column:auto;
    grid-row:auto;
}
.portal-template-home .template-social-grid > a:nth-child(3) { order:1; }
.portal-template-home .template-social-grid > a:nth-child(1) { order:2; }
.portal-template-home .template-social-grid > a:nth-child(2) { order:3; }
.portal-template-home .template-social-grid > a:nth-child(4) { order:4; }

@media (min-width:901px) and (max-width:1280px) {
    .portal-template-home .template-contact-inner {
        grid-template-columns:minmax(300px,1fr) 245px minmax(390px,450px);
        gap:20px;
    }
    .portal-template-home .template-social-grid {
        grid-template-columns:repeat(2,minmax(105px,115px));
        column-gap:8px;
    }
}

@media (max-width:900px) {
    .portal-template-home .template-contact-inner {
        grid-template-columns:1fr;
        gap:40px;
    }
    .portal-template-home .template-institute-card,
    .portal-template-home .template-contact-links,
    .portal-template-home .template-contact-address {
        width:100%;
        max-width:620px;
        margin-inline:auto;
    }
    .portal-template-home .template-contact-links {
        padding-top:0;
        justify-self:stretch;
    }
    .portal-template-home .template-social-grid {
        width:min(280px,100%);
        grid-template-columns:repeat(2,minmax(0,1fr));
        justify-content:start;
    }
}

/* V147 - authoritative compact layout; keep this block last. */
@media (max-width:900px) {
    .portal-template-home .template-contact {
        padding:32px 14px;
        overflow:hidden;
    }
    .portal-template-home .template-contact-inner {
        display:grid;
        width:100%;
        min-width:0;
        max-width:none;
        margin:0;
        grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
        grid-template-rows:auto auto;
        gap:28px 12px;
        align-items:start;
    }
    .portal-template-home .template-contact-inner > *,
    .portal-template-home .template-institute-card,
    .portal-template-home .template-contact-links,
    .portal-template-home .template-location-group,
    .portal-template-home .template-contact-address,
    .portal-template-home .template-campus-map {
        width:100%;
        min-width:0;
        max-width:none;
        margin:0;
    }
    .portal-template-home .template-institute-card {
        grid-column:1;
        grid-row:1;
        padding:0;
    }
    .portal-template-home .template-contact-links {
        grid-column:2;
        grid-row:1;
        padding:0;
        justify-self:stretch;
    }
    .portal-template-home .template-location-group {
        grid-column:1 / -1;
        grid-row:2;
        display:grid;
        grid-template-columns:minmax(0,1.22fr) minmax(180px,.78fr);
        gap:18px;
        align-items:start;
    }
    .portal-template-home .template-institute-main {
        min-height:34px;
        padding-left:40px;
    }
    .portal-template-home .template-institute-main .template-social-icon--instiper {
        width:34px;
        height:34px;
        padding:4px;
        border-radius:9px;
    }
    .portal-template-home .template-institute-main > strong,
    .portal-template-home .template-institute-units {
        font-size:clamp(8px,2.2vw,10px);
        line-height:1.35;
    }
    .portal-template-home .template-institute-main > strong { white-space:nowrap; }
    .portal-template-home .template-institute-units {
        margin:4px 0 0 40px;
        gap:5px;
    }
    .portal-template-home .template-social-grid {
        display:grid;
        width:100%;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:repeat(2,40px);
        gap:6px 4px;
    }
    .portal-template-home .template-social-grid > a {
        width:100%;
        min-width:0;
        min-height:40px;
        margin:0;
        padding:0;
        gap:5px;
    }
    .portal-template-home .template-social-icon {
        flex:0 0 30px;
        width:30px;
        height:30px;
        padding:5px;
        border-radius:8px;
    }
    .portal-template-home .template-social-icon svg { width:16px; height:16px; }
    .portal-template-home .template-social-grid strong {
        min-width:0;
        font-size:clamp(7.5px,2.1vw,9px);
        white-space:nowrap;
    }
    .portal-template-home .template-campus-list { width:100%; gap:14px; }
    .portal-template-home .template-campus-item { min-width:0; gap:7px; }
    .portal-template-home .template-contact-row,
    .portal-template-home .template-contact-email {
        display:grid;
        min-width:0;
        grid-template-columns:16px minmax(0,1fr);
        gap:7px;
        align-items:start;
    }
    .portal-template-home .template-contact-row svg,
    .portal-template-home .template-contact-email svg { width:15px; height:15px; }
    .portal-template-home .template-campus-item p,
    .portal-template-home .template-campus-item strong,
    .portal-template-home .template-campus-item a,
    .portal-template-home .template-contact-email {
        font-size:clamp(8px,2.15vw,9.5px);
        line-height:1.45;
        overflow-wrap:normal;
        word-break:normal;
    }
    .portal-template-home .template-contact-email { margin-top:14px; }
    .portal-template-home .template-contact-email span { min-width:0; overflow-wrap:anywhere; }
    .portal-template-home .template-campus-map { border-radius:12px; }
    .portal-template-home .template-campus-map iframe {
        display:block;
        width:100%;
        height:210px;
        border:0;
    }
}

@media (max-width:620px) {
    .portal-template-home .template-contact-inner {
        grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
        gap:28px 12px;
    }
    .portal-template-home .template-location-group {
        grid-template-columns:minmax(0,1.3fr) minmax(130px,.7fr);
        gap:12px;
    }
    .portal-template-home .template-campus-map iframe { height:190px; }
}

/* V148 - consolidated responsive rules after multi-viewport audit. */
.portal-template-home,
.portal-template-home .template-home-wrapper {
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

@media (min-width:901px) and (max-width:1200px) {
    .portal-template-home .template-contact-inner {
        display:grid;
        width:100%;
        max-width:1040px;
        grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
        grid-template-rows:auto auto;
        gap:34px 30px;
    }
    .portal-template-home .template-institute-card {
        grid-column:1;
        grid-row:1;
    }
    .portal-template-home .template-contact-links {
        grid-column:2;
        grid-row:1;
    }
    .portal-template-home .template-location-group {
        grid-column:1 / -1;
        grid-row:2;
        display:grid;
        width:100%;
        max-width:none;
        grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
        gap:28px;
    }
}

@media (max-width:620px) {
    .portal-template-home .template-service-wrap {
        width:100%;
        padding-inline:12px;
    }
    .portal-template-home .template-service-grid {
        display:grid;
        width:100%;
        min-width:0;
        grid-template-columns:minmax(0,1fr);
        gap:16px;
    }
    .portal-template-home .template-student-column,
    .portal-template-home .template-service-card--lecturer {
        width:100%;
        min-width:0;
        max-width:none;
    }
    .portal-template-home .template-service-card {
        width:100%;
        min-width:0;
        transform:none !important;
    }
    .portal-template-home .template-service-card:hover {
        transform:scale(1.015) !important;
    }
    .portal-template-home .template-hero h1 {
        max-width:100%;
        font-size:clamp(17px,5.4vw,22px);
        white-space:normal;
    }
}

@media (max-width:520px) {
    .portal-template-home .template-contact {
        padding:30px 16px;
    }
    .portal-template-home .template-contact-inner {
        display:grid;
        grid-template-columns:minmax(0,1fr);
        grid-template-rows:auto auto auto;
        gap:24px;
    }
    .portal-template-home .template-institute-card,
    .portal-template-home .template-contact-links,
    .portal-template-home .template-location-group {
        grid-column:1;
        width:100%;
        min-width:0;
    }
    .portal-template-home .template-institute-card { grid-row:1; }
    .portal-template-home .template-contact-links { grid-row:2; }
    .portal-template-home .template-location-group {
        grid-row:3;
        display:grid;
        grid-template-columns:minmax(0,1fr);
        gap:20px;
    }
    .portal-template-home .template-institute-main {
        min-height:38px;
        padding-left:46px;
    }
    .portal-template-home .template-institute-main .template-social-icon--instiper {
        width:38px;
        height:38px;
    }
    .portal-template-home .template-institute-main > strong,
    .portal-template-home .template-institute-units {
        font-size:10px;
    }
    .portal-template-home .template-institute-units {
        margin-left:46px;
        gap:6px;
    }
    .portal-template-home .template-social-grid {
        width:100%;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:repeat(2,44px);
        gap:8px 18px;
    }
    .portal-template-home .template-social-grid > a {
        min-height:44px;
        justify-content:flex-start;
    }
    .portal-template-home .template-social-icon {
        flex-basis:34px;
        width:34px;
        height:34px;
    }
    .portal-template-home .template-social-grid strong { font-size:10px; }
    .portal-template-home .template-campus-item p,
    .portal-template-home .template-campus-item strong,
    .portal-template-home .template-campus-item a,
    .portal-template-home .template-contact-email {
        font-size:10px;
        line-height:1.5;
    }
    .portal-template-home .template-campus-map iframe {
        width:100%;
        height:180px;
    }
    .portal-template-home .template-hero-inner,
    .portal-template-home .template-hero-copy {
        width:100%;
        max-width:100%;
        margin-inline:0;
    }
    .portal-template-home .template-hero h1,
    .portal-template-home .template-title-mobile {
        display:block;
        width:100%;
        max-width:100%;
        margin-inline:auto;
        text-align:center;
        white-space:normal;
        overflow-wrap:normal;
    }
}

/* V150 - keep the two primary schedule buttons side by side on mobile. */
@media (max-width:620px) {
    .portal-template-home .template-service-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        align-items:start;
    }
    .portal-template-home .template-student-column,
    .portal-template-home .template-service-card--lecturer {
        width:100%;
        min-width:0;
    }
    .portal-template-home .template-service-card,
    .portal-template-home .template-service-trigger {
        width:100%;
        min-width:0;
        min-height:176px;
    }
    .portal-template-home .template-service-trigger,
    .portal-template-home .template-service-card--lecturer {
        padding:18px 10px;
    }
    .portal-template-home .template-service-number {
        display:none;
    }
    .portal-template-home .template-service-copy {
        width:100%;
        max-width:100%;
        margin:0;
        gap:8px;
    }
    .portal-template-home .template-service-heading,
    .portal-template-home .template-service-heading--lecturer {
        width:100%;
        display:grid;
        grid-template-columns:minmax(0,1fr) 22px;
        gap:5px;
        align-items:center;
    }
    .portal-template-home .template-service-copy strong,
    .portal-template-home .template-service-heading--lecturer strong {
        min-width:0;
        font-size:clamp(14px,4vw,17px);
        line-height:1.08;
        white-space:normal;
        text-align:center;
    }
    .portal-template-home .template-service-copy > span:last-child {
        width:100%;
        max-width:none;
        font-size:9px;
        line-height:1.4;
        text-align:center;
    }
    .portal-template-home .template-service-triangle {
        width:0;
        height:0;
        border-top:10px solid transparent;
        border-bottom:10px solid transparent;
        border-left:15px solid #fff;
    }
    .portal-template-home .template-service-arrow--title {
        font-size:23px;
    }
}

/* V151 - polished contact section for phones only. */
@media (max-width:520px) {
    .portal-template-home .template-contact {
        padding:36px 22px 34px;
    }
    .portal-template-home .template-contact-inner {
        display:flex;
        flex-direction:column;
        width:100%;
        gap:30px;
    }
    .portal-template-home .template-institute-card,
    .portal-template-home .template-contact-links,
    .portal-template-home .template-location-group {
        width:100%;
        min-width:0;
        max-width:100%;
        margin:0;
    }
    .portal-template-home .template-institute-card {
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }
    .portal-template-home .template-institute-main {
        display:inline-flex;
        width:auto;
        min-height:42px;
        margin:0 auto;
        padding:0;
        gap:11px;
        align-items:center;
        justify-content:center;
    }
    .portal-template-home .template-institute-main .template-social-icon--instiper {
        position:static;
        inset:auto;
        flex:0 0 42px;
        width:42px;
        height:42px;
        padding:5px;
        transform:none;
        border-radius:10px;
    }
    .portal-template-home .template-institute-main > strong {
        font-size:11px;
        line-height:1.3;
        white-space:nowrap;
        text-align:left;
    }
    .portal-template-home .template-institute-units {
        display:flex;
        flex-direction:column;
        width:100%;
        margin:15px 0 0;
        gap:8px;
        align-items:center;
        font-size:10px;
        line-height:1.35;
        text-align:center;
    }
    .portal-template-home .template-faculty-link {
        display:block;
        width:100%;
    }
    .portal-template-home .template-contact-links {
        display:block;
        padding:0;
    }
    .portal-template-home .template-social-grid {
        display:grid;
        width:min(300px,100%);
        margin:0 auto;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-auto-rows:46px;
        gap:12px 20px;
    }
    .portal-template-home .template-social-grid > a {
        display:flex;
        width:100%;
        min-width:0;
        min-height:46px;
        padding:0;
        gap:9px;
        align-items:center;
        justify-content:flex-start;
    }
    .portal-template-home .template-social-icon {
        flex:0 0 38px;
        width:38px;
        height:38px;
        padding:6px;
        border-radius:10px;
    }
    .portal-template-home .template-social-icon svg {
        width:19px;
        height:19px;
    }
    .portal-template-home .template-social-grid strong {
        font-size:10.5px;
        line-height:1.2;
        white-space:nowrap;
    }
    .portal-template-home .template-location-group {
        display:flex;
        flex-direction:column;
        gap:24px;
    }
    .portal-template-home .template-contact-address {
        width:min(340px,100%);
        margin:0 auto;
    }
    .portal-template-home .template-campus-list {
        gap:18px;
    }
    .portal-template-home .template-campus-item {
        gap:9px;
    }
    .portal-template-home .template-contact-row,
    .portal-template-home .template-contact-email {
        grid-template-columns:18px minmax(0,1fr);
        gap:10px;
    }
    .portal-template-home .template-contact-row svg,
    .portal-template-home .template-contact-email svg {
        width:17px;
        height:17px;
        margin-top:1px;
    }
    .portal-template-home .template-campus-item p,
    .portal-template-home .template-campus-item strong,
    .portal-template-home .template-campus-item a,
    .portal-template-home .template-contact-email {
        font-size:10.5px;
        line-height:1.55;
        text-align:left;
    }
    .portal-template-home .template-contact-email {
        margin:18px auto 0;
    }
    .portal-template-home .template-campus-map {
        width:100%;
        margin:0;
        border-radius:14px;
    }
    .portal-template-home .template-campus-map iframe {
        width:100%;
        height:190px;
    }
}

/* V152 - align faculty names with the institute title on phones. */
@media (max-width:520px) {
    .portal-template-home .template-institute-card {
        width:min(310px,100%);
        margin-inline:auto;
        align-items:stretch;
        text-align:left;
    }
    .portal-template-home .template-institute-main {
        width:100%;
        margin:0;
        justify-content:flex-start;
    }
    .portal-template-home .template-institute-units {
        width:auto;
        margin:15px 0 0 53px;
        align-items:flex-start;
        text-align:left;
    }
    .portal-template-home .template-faculty-link {
        width:auto;
        text-align:left;
    }
}

/* V153 - one consistent INSTIPER green across the public homepage. */
.portal-template-home {
    --template-uniform-green:#16865c;
}

.portal-template-home .template-service-card--student,
.portal-template-home .template-service-card--toggle,
.portal-template-home .template-service-card--lecturer,
.portal-template-home .template-contact {
    background:var(--template-uniform-green) !important;
}

.portal-template-home .template-home-nav a,
.portal-template-home .template-brand-title,
.portal-template-home .template-header-clock,
.portal-template-home .template-header-clock-line,
.portal-template-home .template-header-time,
.portal-template-home .template-hero h1,
.portal-template-home .template-hero-copy > p,
.portal-template-home .template-title-mobile {
    color:var(--template-uniform-green) !important;
}

.portal-template-home .template-student-link:hover,
.portal-template-home .template-student-link:focus-visible {
    border-color:var(--template-uniform-green);
    background:var(--template-uniform-green);
}

.portal-template-home .template-service-card--toggle:hover,
.portal-template-home .template-service-card--toggle:focus-within,
.portal-template-home .template-service-card--lecturer:hover,
.portal-template-home .template-service-card--lecturer:focus-visible {
    background:var(--template-uniform-green) !important;
}

/* V154 - unified green copyright footer. */
.portal-template-home .template-footer {
    border-top:1px solid rgba(255,255,255,.16);
    background:var(--template-uniform-green) !important;
    color:#fff !important;
}

.portal-template-home .template-footer span {
    color:#fff !important;
}

/* V155 - keep the animated circle, remove its arrow glyph. */
.portal-template-home .template-student-link b,
.portal-template-home .template-student-link:hover b,
.portal-template-home .template-student-link:focus-visible b {
    border-radius:50%;
    background:#fff !important;
    color:transparent !important;
    font-size:0 !important;
}

/* V156 - lecturer uses the same triangle with a quick click spin. */
.portal-template-home .template-service-triangle--lecturer {
    margin-top:0;
    transform-origin:50% 50%;
}

.portal-template-home .template-service-card--lecturer:hover .template-service-triangle--lecturer,
.portal-template-home .template-service-card--lecturer:focus-visible .template-service-triangle--lecturer {
    filter:drop-shadow(0 6px 16px rgba(0,0,0,.14));
}

.portal-template-home .template-service-card--lecturer.is-navigating {
    pointer-events:none;
}

.portal-template-home .template-service-card--lecturer.is-navigating .template-service-triangle--lecturer {
    animation:template-lecturer-triangle-spin .32s cubic-bezier(.3,.7,.25,1) both;
}

@keyframes template-lecturer-triangle-spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@media (prefers-reduced-motion:reduce) {
    .portal-template-home .template-service-card--lecturer.is-navigating .template-service-triangle--lecturer {
        animation-duration:.08s;
    }
}