/* Visual direction: editorial serif display, precise sans UI, restrained gold. */
:root{--navy:#10243a;--paper:#f7fafc;--teal:#087f8c;--gold:#c8a45c;--ink:#152d40;--muted:#526879;--line:#d6e1e7;--sans:'Segoe UI',Arial,sans-serif;--display:Georgia,'Times New Roman',serif}
body{font-family:var(--sans);letter-spacing:-.005em}
.site-header{height:84px;border-bottom:1px solid rgba(16,36,58,.09);background:#fff}
.brand{font:600 18px/1 var(--display);letter-spacing:-.025em}
.site-nav{font-size:12px;font-weight:600;letter-spacing:.035em;gap:32px}
.site-nav>a{padding:14px 0;position:relative}
.site-nav>a:after{content:"";position:absolute;left:0;right:100%;bottom:7px;height:1px;background:var(--gold);transition:right .2s}
.site-nav>a:hover:after{right:0}
.lang-switch{font-size:11px;letter-spacing:.12em}
.hero{background:#10243a;min-height:calc(100svh - 84px)}
.hero:before{content:"";position:absolute;inset:0 0 0 54%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.018));pointer-events:none}
.hero-inner{max-width:1550px;min-height:760px;padding:92px clamp(26px,7vw,118px) 110px;grid-template-columns:1.1fr .9fr;gap:5.5%}
.hero-copy{padding-bottom:4px}
.hero h1{font:500 clamp(76px,8.5vw,128px)/.91 var(--display);letter-spacing:-.073em;margin:0 0 18px}
.hero .role{font-size:11px;letter-spacing:.23em;color:#d6e2e8;font-weight:700}
.hero-rule{width:84px;margin:37px 0 30px;background:var(--gold)}
.hero h2{font:400 clamp(29px,3.35vw,46px)/1.18 var(--display);letter-spacing:-.048em;margin-bottom:22px;max-width:690px}
.hero h2 em{color:#a5d0cc}
.hero-description{font-size:15px;line-height:1.72;max-width:485px;color:#c9d4db;margin-bottom:30px}
.hero-actions{gap:28px}
.button{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.025em;min-height:56px;padding:0 25px}
.button-primary{background:#0c7f8b;box-shadow:0 8px 24px rgba(0,0,0,.13)}
.text-link{font-size:12px;font-weight:600;letter-spacing:.02em}
.portrait-frame{min-height:520px;max-height:680px;height:min(70vh,680px);background:#dbe7e8;border:10px solid rgba(255,255,255,.045);box-shadow:0 28px 65px rgba(1,12,22,.18)}
.portrait-grid{background-size:64px 64px;background-image:linear-gradient(rgba(16,36,58,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,36,58,.035) 1px,transparent 1px)}
.portrait-frame:after{background:linear-gradient(155deg,rgba(255,255,255,.32),transparent 56%)}
.portrait-silhouette{opacity:.17;inset:16% 11% 0}
.photo-label{top:26px;left:26px;background:#f7fafc;padding:12px 16px;font-size:10px;letter-spacing:.075em;text-transform:uppercase;font-weight:700}
.frame-number{bottom:23px;right:22px;font-family:var(--sans);font-size:9px}
.hero-portrait figcaption{color:#a9bac5;font-size:10px}
.hero-side-note{right:23px;color:#a6b9c4}
.hero-bottom{height:58px}
.section-wrap{max-width:1270px;padding:140px 40px}
.section-number{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.22em;margin-bottom:29px}
.section-heading h2,.gallery-heading h2,.profile h2,.contact-copy h2{font-family:var(--display);font-weight:400;letter-spacing:-.052em;line-height:1.11}
.section-heading h2{font-size:clamp(48px,5.4vw,76px)}
.program{grid-template-columns:.95fr 1.05fr;gap:7% 50px}
.section-intro{font-size:15px;line-height:1.8;max-width:390px;margin-top:28px}
.program-item{grid-template-columns:44px 1fr 22px;gap:16px;padding:29px 0;border-color:#cad8e0}
.program-index,.tile-number,.credential-mark{font-family:var(--sans);font-weight:700;letter-spacing:.13em}
.program-item h3{font:500 25px/1.2 var(--display);letter-spacing:-.03em;margin-bottom:8px}
.program-item p{font-size:13px;line-height:1.75}
.program-arrow{font-size:17px}
.section-footnote{font-size:11px;line-height:1.6}
.gallery-section{background:#eaf2f4;padding:117px 0 128px}
.gallery-wrap{max-width:1270px;padding:0 40px}
.gallery-heading{margin-bottom:50px}
.gallery-heading h2{font-size:clamp(50px,5.4vw,74px)}
.gallery-heading>p{font-size:14px;line-height:1.75}
.gallery-grid{gap:29px 22px}
.gallery-art{background:#cfdfe1;transition:filter .25s,transform .25s}
.gallery-tile:hover .gallery-art{filter:brightness(.975);transform:translateY(-3px)}
.gallery-tile .gallery-art{border:1px solid rgba(16,36,58,.08)}
.art-orbit{width:78%;left:11%;top:5%;border-color:rgba(16,36,58,.12)}
.art-orbit:before,.art-orbit:after{border-color:rgba(16,36,58,.1)}
.art-orbit:after{border-color:rgba(8,127,140,.16)}
.art-shape{opacity:.46;clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}
.tile-caption{padding-top:12px;font-size:11px;font-weight:600;letter-spacing:.015em}
.gallery-note{font-size:11px;margin-top:38px}
.profile{gap:10%}
.profile-photo-inner{height:480px;background:#dce7e6;box-shadow:22px 22px 0 #e4eef0}
.profile-photo-inner:before{background-size:58px 58px}
.profile-silhouette{opacity:.16}
.profile h2{font-size:clamp(49px,5vw,68px);margin-bottom:28px}
.profile-copy .profile-lead{font:400 24px/1.35 var(--display)!important;letter-spacing:-.03em}
.profile-copy>p:not(.section-number){font-size:14px;line-height:1.83}
.profile-placeholder{font-size:12px!important;line-height:1.7!important}
.dark-link{color:var(--teal);font-weight:700}
.credentials{background:#eaf2f4;padding:78px 0 90px}
.credentials-wrap{max-width:1270px;padding:0 40px;grid-template-columns:1fr 1fr;gap:9%}
.credentials-heading h2{font:400 clamp(36px,4.1vw,55px)/1.13 var(--display);letter-spacing:-.05em}
.credentials-list{border-color:#bacdd5}
.credentials-list li{min-height:64px;gap:22px;font:500 21px/1.25 var(--display);letter-spacing:-.018em;border-color:#bacdd5}
.credential-mark{font-size:9px;width:28px}
.contact-section{padding:132px 0 140px}
.contact-wrap{max-width:1270px;padding:0 40px;gap:10%}
.contact-copy h2{font-size:clamp(54px,5.4vw,76px)}
.contact-copy>p:not(.section-number){font-size:15px;line-height:1.8}
.contact-mark{font-size:11px}
.form-row{margin-bottom:24px}
.form-row label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#d9e4e9}
.form-row input,.form-row textarea{font-size:14px;padding:11px 0 15px;border-color:#68808e}
.form-row input::placeholder,.form-row textarea::placeholder{color:#9cadb8}
.button-submit{background:#f7fafc;min-width:238px}
.button-submit:disabled{opacity:.65;cursor:wait;transform:none}
.form-status{min-height:1.5em;margin:.9rem 0 0;color:#e8f4f3;font-size:.9rem;line-height:1.5}
.form-privacy{margin:.35rem 0 0;color:#aebdc8;font-size:.76rem;line-height:1.55}
.site-footer{padding-block:37px;background:#091b2b}
.footer-brand{font:500 21px var(--display)}
.footer-role{font-size:10px}
.site-footer nav{font-size:11px;font-weight:600}
@media(max-width:850px){.hero-inner{min-height:680px;padding:78px 6vw 94px}.hero h1{font-size:clamp(68px,9vw,96px)}.hero h2{font-size:clamp(27px,3.4vw,37px)}.portrait-frame{min-height:420px;height:55vh}.program{gap:7%}.credentials-wrap{gap:6%}}
@media(max-width:640px){.site-header{height:68px}.brand{font-size:17px}.hero{min-height:auto}.hero-inner{min-height:0;padding:56px 23px 80px;gap:38px}.hero h1{font-size:clamp(68px,17.5vw,88px);letter-spacing:-.07em}.hero .role{font-size:10px}.hero-rule{margin:27px 0 24px;width:67px}.hero h2{font-size:clamp(30px,7.9vw,38px);line-height:1.2}.hero-description{font-size:13px}.hero-actions{gap:18px}.button{min-height:52px;padding:0 18px;font-size:11px}.text-link{font-size:11px}.portrait-frame{height:380px;min-height:0;border-width:6px}.photo-label{top:18px;left:18px}.section-wrap{padding:88px 23px}.section-heading h2,.gallery-heading h2{font-size:clamp(45px,12vw,59px)}.section-intro{font-size:14px}.program-item{padding:25px 0;grid-template-columns:27px 1fr 18px;gap:10px}.program-item h3{font-size:23px}.program-item p{font-size:12px}.gallery-section{padding:88px 0 94px}.gallery-wrap{padding:0 23px}.gallery-heading{margin-bottom:31px}.gallery-heading>p{font-size:13px}.gallery-grid{gap:24px}.gallery-tile .gallery-art,.gallery-tile-wide .gallery-art{height:270px}.gallery-tile-large .gallery-art{height:360px}.profile-photo-inner{height:350px;box-shadow:12px 12px 0 #e4eef0}.profile h2{font-size:clamp(46px,11vw,56px)}.profile-copy .profile-lead{font-size:21px!important}.profile-copy>p:not(.section-number){font-size:13px}.credentials{padding:67px 0 76px}.credentials-wrap{display:block;padding:0 23px}.credentials-heading h2{font-size:43px}.credentials-list{margin-top:31px}.credentials-list li{font-size:18px;min-height:66px}.contact-section{padding:92px 0 100px}.contact-wrap{padding:0 23px}.contact-copy h2{font-size:clamp(50px,12vw,61px)}.contact-copy>p:not(.section-number){font-size:13px}.contact-mark{font-size:10px}.form-row label{font-size:10px}.form-row input,.form-row textarea{font-size:13px}.site-footer{padding:29px 23px}.footer-brand{font-size:20px}}

/* Keep the name and all photo placeholders in one consistent brand palette. */
.hero h1 .hero-surname{color:inherit}.hero h1 .gold-dot{color:var(--gold)}
.brand .brand-surname{color:#7b5b20}
.portrait-frame,.profile-photo-inner{background:#d7e6e8}
.art-one{background:#cbdde0}.art-two{background:#d2e1e3}.art-three{background:#c6d9dd}.art-four{background:#d5e4e5}.art-five{background:#c8dadd}.art-six{background:#d0e0e2}
.art-shape,.art-two .art-shape,.art-three .art-shape,.art-four .art-shape,.art-five .art-shape,.art-six .art-shape{background:rgba(8,80,93,.21)}
.label-mark{background:var(--gold)}

/* The edited real portrait replaces both sample photo frames. */
.portrait-image,.profile-image{background:var(--navy);overflow:hidden}
.portrait-image{border:1px solid rgba(255,255,255,.16)}
.portrait-image:after,.profile-image:before{display:none}
.portrait-image img,.profile-image img{display:block;width:100%;height:100%;object-fit:cover}
.portrait-image img{object-position:center 38%}
.profile-image img{object-position:center 31%}

/* Real program photography stays unaltered; only the presentation crop changes. */
.gallery-tile .gallery-art img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-tile-large .gallery-art img{object-position:center 67%}
.gallery-tile[data-gallery="3"] .gallery-art img{object-position:center 69%}
.gallery-tile-wide .gallery-art img{object-position:center 73%}
.tile-caption{align-items:flex-start;line-height:1.45}
.tile-caption span:nth-child(2){max-width:calc(100% - 42px)}
.dialog-image{display:flex;align-items:center;justify-content:center;background:#10243a}
.dialog-photo{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* Eduvibe is a supporting method inside Ashaari's profile, not a second hero brand. */
.vibe-note{border-left:2px solid var(--gold);padding-left:17px;margin:23px 0 27px}
.profile-copy .vibe-note>p:first-child{font-size:12px;line-height:1.65;color:#526879;margin:0 0 12px;max-width:480px}
.vibe-steps{display:flex;flex-wrap:wrap;gap:7px 12px;align-items:center;margin:0;font:600 11px/1.4 var(--sans);color:var(--navy);letter-spacing:.015em}
.vibe-steps strong{font-size:11px;letter-spacing:.16em;color:var(--teal);margin-right:5px}
.vibe-steps span+span:before{content:"·";color:var(--gold);margin-right:12px}
.footer-credit{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-company{color:#a7b8c5}
@media(max-width:640px){.vibe-note{margin:20px 0 25px}.vibe-steps{gap:7px 9px;font-size:10px}.vibe-steps span+span:before{margin-right:9px}.footer-credit{display:block}.footer-company{display:block;margin-top:8px}}
@media(max-width:640px){.profile{gap:34px}}

/* Final visual polish: clearer reading sizes, restrained depth and responsive photography. */
body{line-height:1.6}
::selection{background:#c8a45c;color:#10243a}
.site-header{box-shadow:0 2px 20px rgba(16,36,58,.035)}
.hero h1{letter-spacing:-.06em}
.hero h2{letter-spacing:-.035em}
.section-heading h2,.gallery-heading h2,.profile h2,.contact-copy h2{letter-spacing:-.04em;text-wrap:balance}
.hero-description,.section-intro,.profile-copy>p:not(.section-number){font-size:16px;line-height:1.8}
.program-item p{font-size:14px;line-height:1.8}
.section-number{font-size:11px;letter-spacing:.18em}
.portrait-image{border-radius:4px 4px 56px 4px;border-color:rgba(200,164,92,.28);box-shadow:0 28px 70px rgba(0,0,0,.24)}
.profile-photo-inner{border-radius:3px 3px 34px 3px;box-shadow:14px 14px 0 #e1ecee}
.gallery-art{border-radius:5px;box-shadow:0 8px 24px rgba(16,36,58,.07)}
.gallery-tile .gallery-art img{transition:transform .45s ease}
.gallery-tile-wide .gallery-art img{object-position:center 45%}
.gallery-tile[data-gallery="5"] .gallery-art img{object-position:center 20%}
.gallery-tile:hover .gallery-art{filter:none;transform:none;box-shadow:0 12px 28px rgba(16,36,58,.12)}
.gallery-tile:hover .gallery-art img{transform:scale(1.025)}
.tile-caption{font-size:12px;font-weight:500;line-height:1.6;padding-top:14px}
.tile-open{transition:transform .2s ease}
.gallery-tile:hover .tile-open{transform:translate(2px,-2px)}
.button{border-radius:3px;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.button-primary:hover{background:#096c78;box-shadow:0 10px 28px rgba(0,0,0,.2)}
.text-link{min-height:44px}
.program-item{transition:padding-left .2s ease}
.program-item:hover{padding-left:7px}
.vibe-note{padding:16px 18px;background:#edf3f4;border-radius:0 4px 4px 0}
.profile-copy .vibe-note>p:first-child{font-size:13px;line-height:1.75}
.vibe-steps{font-size:12px;gap:8px 11px}
.form-row input,.form-row textarea{font-size:16px;line-height:1.6}
.form-row input:focus,.form-row textarea:focus{box-shadow:0 2px 0 #a1d0cd}
.field-hint{display:block;margin-top:7px;color:#9cadb8;font-size:11px;line-height:1.5}
.gallery-dialog{border-radius:7px;overflow:hidden}
.gallery-dialog>p{padding:20px 24px 24px;font:500 15px/1.6 var(--sans)}
.dialog-close{box-shadow:0 3px 14px rgba(0,0,0,.16)}
.site-footer nav a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:850px){.hero-actions{flex-wrap:wrap;gap:12px 24px}.hero h2{font-size:clamp(27px,3.1vw,39px)}}
@media(max-width:640px){
  .hero h2{font-size:clamp(27px,7.5vw,35px)}
  .hero-description,.section-intro,.profile-copy>p:not(.section-number){font-size:15px;line-height:1.8}
  .program-item p{font-size:14px}
  .portrait-image{height:auto;aspect-ratio:4/5;border-radius:3px 3px 38px 3px}
  .gallery-tile .gallery-art,.gallery-tile-wide .gallery-art{height:auto;aspect-ratio:4/3}
  .gallery-tile-large .gallery-art{aspect-ratio:3/4}
  .gallery-tile .gallery-art img{object-position:center}
  .profile-photo-inner{box-shadow:10px 10px 0 #e1ecee}
  .tile-caption{font-size:12px}
  .vibe-steps{font-size:11px;gap:7px 8px}
  .vibe-steps span+span:before{margin-right:8px}
  .button{font-size:12px}.menu-toggle{min-height:44px;min-width:70px}
}
@media(prefers-reduced-motion:reduce){.gallery-tile:hover .gallery-art img{transform:none}.program-item:hover{padding-left:0}}