:root{--navy:#08234a;--blue:#006bb8;--accent:#008fd8;--orange:#c64c00;--muted:#536780}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--navy);line-height:1.6}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #ff7015;outline-offset:5px}header{min-height:88px;padding:16px max(24px,calc((100vw - 1280px)/2));display:flex;align-items:center;gap:32px;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid #e7edf2}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;font-weight:800;font-size:15px}.brand img{width:44px;height:56px;object-fit:contain}.brand small{display:block;color:var(--blue);letter-spacing:3px;font-size:9px}nav{display:flex;align-items:center;gap:22px;font-size:13px}nav>button:not(.button){border:0;padding:0;background:none;color:inherit}nav a:hover,.text-link:hover{color:var(--orange)}.menu{display:none}.wrap{max-width:1280px;margin:auto;padding-left:32px;padding-right:32px}.section{padding-top:72px;padding-bottom:72px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:64px;padding-bottom:64px;align-items:center}.eyebrow{font-size:12px;font-weight:800;letter-spacing:3px;margin-bottom:16px}h1{font-size:clamp(36px,4vw,58px);line-height:1.1;letter-spacing:-2px;margin:0 0 24px}h2{font-size:clamp(30px,3vw,44px);line-height:1.15;letter-spacing:-1px;margin:0 0 16px}h3{font-size:23px;line-height:1.25;margin:10px 0}em{font-style:normal;color:var(--accent)}p{color:var(--muted);margin:0 0 24px}.intro{font-size:19px;max-width:500px}.actions{display:flex;gap:14px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;border:1px solid transparent;padding:13px 21px;border-radius:9px;font-weight:700;font-size:14px;min-height:48px;transition:transform .2s}.button:hover{transform:translateY(-2px)}.outline{background:white;color:var(--blue);border-color:var(--blue)}.warm{background:var(--orange)}.values{display:flex;gap:20px;margin-top:34px;font-size:12px;font-weight:700}.photo{background-image:url('assets/approved-mockup.png');background-repeat:no-repeat;background-color:#e6edf4;position:relative;overflow:hidden}.hero-photo{height:470px;border-radius:22px;background-size:210% auto;background-position:100% 3.2%}.sticker{position:absolute;bottom:28px;left:20px;transform:rotate(-5deg);background:var(--orange);color:white;padding:14px 28px;font-size:24px;font-weight:700;border-radius:10px}.cream{background:#faf7f1}.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding-top:55px;padding-bottom:55px}.school{height:320px;border-radius:14px;background-size:210% auto;background-position:0% 29%}.text-link{border:0;background:none;padding:8px 0;color:var(--blue);font-weight:700;text-align:left}.orange{color:var(--orange)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}.card{border:1px solid #e5eaf0;border-radius:16px;overflow:hidden;background:white;display:flex;flex-direction:column;box-shadow:0 8px 30px #08234a08}.card>.photo{height:235px;background-size:330% auto}.synergy{background-position:5% 46.5%}.ekspresi{background-position:50% 46.5%}.menulis{background-position:95% 46.5%}.badge-logo{position:absolute;width:65px;height:78px;object-fit:contain;background:white;top:14px;left:14px;border-radius:8px}.pill{position:absolute;left:15px;top:15px;background:var(--orange);color:white;font-size:11px;letter-spacing:1px;font-weight:700;padding:7px 12px;border-radius:20px}.pill.blue{background:var(--blue)}.card-body{padding:24px;display:flex;flex-direction:column;flex:1}.card-body p{font-size:15px;flex:1}.card-body button{margin-top:auto}.tag{font-size:10px;letter-spacing:1px;font-weight:800}.pale{background:#eaf7ff}.events{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;align-items:center}.event{border:0;padding:0;border-radius:12px;overflow:hidden;background:white;text-align:left;color:var(--navy)}.event .photo{display:block;height:210px;background-size:460% auto}.school-event{background-position:47% 65%}.reunion{background-position:79% 65%}.event strong{display:block;padding:18px}.hub{background:radial-gradient(ellipse at 80% 0,#074775,var(--navy) 65%);color:white}.hub p{color:#c7dae8}.hub .eyebrow,.hub .tag{color:#02d7f0}.hub .card{background:#092e52;border-color:#1a7894}.hub .card>.photo{height:205px}.mentor{background-position:5% 78%}.talent{background-position:50% 78%}.company{background-position:95% 78%}.cyan{background:#00cdea;color:#052442}.news :is(button,a){border:0;height:230px;border-radius:12px;background-size:330% auto;color:white;text-align:left;display:flex;align-items:flex-end}.news strong{width:100%;padding:32px 20px 18px;background:linear-gradient(transparent,#061a37dd);font-size:21px}.kisah{background-position:5% 94%}.karya{background-position:50% 94%}.personal{background-position:95% 94%}footer{border-top:1px solid #e5eaf0;display:flex;justify-content:space-between;align-items:center;padding-top:32px;padding-bottom:32px}footer p{margin:8px 0;font-size:14px}footer small{color:var(--muted);font-size:11px}dialog{border:0;border-radius:20px;max-width:560px;width:calc(100% - 32px);padding:42px;box-shadow:0 20px 100px #0004}dialog::backdrop{background:#061a37aa}.close{position:absolute;top:10px;right:18px;background:none;border:0;font-size:28px;color:var(--navy)}.notice{font-size:14px;background:#edf7fc;padding:18px;border-radius:10px}@media(max-width:1080px){nav{gap:12px}.brand{font-size:12px}header{gap:15px}.hero{gap:25px}.values{flex-wrap:wrap}}@media(max-width:850px){header{padding:12px 22px}.menu{display:block;border:0;background:none;font-size:24px;color:var(--navy)}nav{display:none;position:absolute;top:100%;left:0;right:0;background:white;padding:24px;box-shadow:0 15px 25px #08234a15;align-items:stretch}nav.open{display:flex;flex-direction:column}nav>button:not(.button){text-align:left;padding:10px 0}nav a{padding:10px 0}.hero,.about{grid-template-columns:1fr}.hero-photo{height:420px}.hero{padding-top:40px}.grid{grid-template-columns:1fr}.events{grid-template-columns:1fr 1fr}.events>div{grid-column:1/-1}.card>.photo{height:260px}.wrap{padding-left:22px;padding-right:22px}.section{padding-top:48px;padding-bottom:48px}footer{gap:24px;align-items:flex-start;flex-direction:column}.about{gap:28px}.card>.photo{background-size:330% auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

/* Photographic mockup already contains its decorative captions. */
.sticker,.badge-logo,.pill{display:none}

/* Keep mockup image regions consistent across responsive widths. */
.hero-photo{height:auto;aspect-ratio:1.2}.school{height:auto;aspect-ratio:1.7;background-position-y:27.5%}.card>.photo{height:auto;aspect-ratio:1.54;background-position-y:47%}.hub .card>.photo{height:auto;aspect-ratio:2.6;background-position-y:77.5%}.event .photo{height:auto;aspect-ratio:1.4;background-position-y:63%}.news :is(button,a){height:auto;aspect-ratio:2.3;background-position-y:94%}

/* Frame the full alumni group from the approved concept visual. */
.hero-photo{background-size:185% auto;background-position:100% 3.8%}

/* Keep the HTML news captions readable over concept-image captions. */
.news :is(button,a){background-size:350% auto;background-position-y:93%}
.news strong{background:#08234a;padding:12px 18px;font-size:19px}
.kisah{background-position-x:6.8%}.karya{background-position-x:50%}.personal{background-position-x:92%}

@media(max-width:360px){header{padding-left:16px;padding-right:16px;gap:10px}.brand{gap:8px;font-size:10px}.brand img{width:36px;height:48px}.brand small{font-size:8px;letter-spacing:2px}}