/* Kanana Maritime | Version 1.5.0 | Updated 2026-11-01 */
@font-face{font-family:Tajawal;src:url('../assets/fonts/tajawal-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Tajawal;src:url('../assets/fonts/tajawal-bold.ttf') format('truetype');font-weight:700 900;font-style:normal;font-display:swap}
:root{--navy:#0b2e5b;--dark:#081f32;--gold:#c9a968;--teal:#0f9d8c;--blue:#1e88b5;--paper:#f5f7fa;--ink:#132f46;--muted:#66747d;--line:#dce2e5;--font:Tajawal,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;font-family:var(--font);color:var(--ink);background:white;line-height:1.8}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%;display:block}svg{width:48px;height:48px}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:6px}[hidden]{display:none!important}.container{width:min(1200px,calc(100% - 112px));margin-inline:auto}.skip-link{position:fixed;top:-90px;right:15px;background:var(--gold);color:var(--dark);padding:12px;z-index:100}.skip-link:focus{top:12px}.header{height:98px;background:var(--dark);color:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid #ffffff14}.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:32px}.brand{display:flex;gap:13px;align-items:center;flex-shrink:0}.brand strong{font-size:27px;line-height:1.15;display:block}.brand-sub{font-size:12px;display:block;letter-spacing:0;font-weight:400;margin-top:5px}.brand small{display:block;font-family:Arial,sans-serif;letter-spacing:2.3px;font-size:8px;margin-top:8px;color:#c6d0d8}.navigation{display:flex;gap:34px;align-items:center}.navigation a{font-size:14px;padding:14px 0;position:relative;color:#dce3e9;transition:color .2s}.navigation a:hover,.navigation a.active{color:var(--gold)}.navigation a.active:after{content:"";width:18px;height:2px;background:var(--gold);position:absolute;bottom:3px;right:0}.button{display:inline-flex;align-items:center;justify-content:center;gap:35px;background:var(--gold);color:var(--dark);padding:14px 28px;font-weight:700;font-size:15px;border:1px solid var(--gold);transition:background .2s,transform .2s;min-height:48px}.button:hover{background:#ddc38e;transform:translateY(-2px)}.button span{font-family:Arial,sans-serif;font-size:21px;font-weight:400}.button-small{padding:9px 22px;gap:24px;font-size:13px}.menu-toggle{display:none}.hero{height:min(740px,calc(100svh - 98px));min-height:620px;position:relative;background:var(--dark);overflow:hidden;color:#fff}.hero-image,.hero-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-image{transform:scaleX(-1);object-position:50% 55%}.hero-overlay{background:linear-gradient(270deg,rgba(6,28,45,.98) 0%,rgba(6,28,45,.85) 29%,rgba(6,28,45,.15) 73%),linear-gradient(0deg,rgba(5,26,42,.7),transparent 40%)}.hero-content{position:relative;padding-top:74px;z-index:1}.eyebrow{font-size:13px;font-weight:700;letter-spacing:.2px;display:flex;gap:13px;align-items:center;color:#6e5932;margin:0 0 24px}.eyebrow>span{width:31px;height:1px;background:var(--gold)}.eyebrow.light{color:#d9bd88}.hero h1{font-size:clamp(42px,4.1vw,63px);line-height:1.35;margin:0 0 10px;font-weight:700;letter-spacing:-1.5px}.hero-tagline{font-size:28px;margin:0 0 14px;font-weight:400}.hero-tagline span{color:#d9bd88}.hero-description{max-width:460px;font-size:17px;line-height:1.95;color:#ccd7df;margin:0 0 30px}.hero-buttons{display:flex;align-items:center;gap:33px}.text-link{display:inline-flex;gap:25px;align-items:center;font-size:15px;border-bottom:1px solid #ffffff50;padding-block:8px}.text-link:hover{color:var(--gold)}.hero-bottom{position:absolute;bottom:28px;right:0;left:0;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#c3cdd5;z-index:1}.scroll-link{display:flex;align-items:center;gap:12px}.scroll-link>span{border:1px solid #ffffff4a;width:30px;height:40px;display:grid;place-items:center;font-size:18px}.hero-location{display:flex;align-items:center;gap:15px}.hero-location i{width:30px;height:1px;background:var(--gold)}.hero-bottom small{font-size:10px}.hero-side{position:absolute;left:23px;top:100px;writing-mode:vertical-rl;letter-spacing:3px;font:9px Arial,sans-serif;color:#ffffff85}.values-strip{background:#f4f3ef;border-bottom:1px solid #e8e7e1}.values-strip>.container{display:flex;align-items:center;justify-content:space-between;padding-block:23px;font-size:14px}.values-strip b{font-size:19px;color:#a88b51;font-weight:400}.values-strip span:last-child{font:10px Arial,sans-serif;letter-spacing:2.3px}.values-strip i{display:inline-block;background:var(--teal);width:6px;height:6px;border-radius:50%;margin-left:10px;vertical-align:middle}.section{padding:110px 0}h2{font-size:43px;line-height:1.45;letter-spacing:-.9px;font-weight:700;margin:0 0 24px}h2 em{font-style:normal;color:#5d7985}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:95px;align-items:center}.about-copy>p:not(.eyebrow){color:var(--muted);font-size:16px;line-height:1.95;margin:0 0 17px}.about-note{display:flex;gap:19px;align-items:center;border-top:1px solid var(--line);padding-top:22px;margin-top:26px}.about-note svg{color:#9d824c;width:41px;height:41px;flex-shrink:0}.about-note h3{font-size:16px;margin:0}.about-note p{font-size:13px;color:var(--muted);margin:2px 0 0}.inline-link{display:inline-flex;gap:35px;align-items:center;font-size:14px;color:var(--navy);font-weight:700;border-bottom:1px solid #bcc9d0;margin-top:27px;padding-bottom:6px}.inline-link:hover{color:#08796d}.about-visual{height:490px;position:relative;margin-left:22px}.about-visual>img{width:100%;height:100%;object-fit:cover;object-position:60% center}.image-frame{position:absolute;inset:-15px 20px 20px -15px;border:1px solid #c9a96888;z-index:-1}.image-label{background:var(--dark);color:white;position:absolute;bottom:24px;right:-26px;display:flex;align-items:center;gap:16px;padding:23px 30px;box-shadow:0 8px 24px #06233718;font-size:15px;line-height:1.7}.image-label strong{color:#d6b97d;font-weight:400}.vertical-caption{position:absolute;left:-28px;top:40px;writing-mode:vertical-rl;letter-spacing:3px;font:9px Arial,sans-serif;color:#71808b}.activities{background:var(--paper)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:44px}.section-heading h2{margin-bottom:0;font-size:38px}.section-heading>p{color:var(--muted);font-size:15px;margin-bottom:8px}.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.activity-card{background:#fff;padding:32px 30px 25px;border:1px solid #e6eaed;transition:transform .25s,border-color .25s,box-shadow .25s}.activity-card:hover{transform:translateY(-6px);border-color:#b7c9ce;box-shadow:0 12px 30px #0b2e5b08}.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.card-top svg{color:#418180;width:47px;height:47px}.card-top>span{font:12px Arial,sans-serif;color:#919ba2}.activity-card h3{font-size:23px;margin:0 0 13px}.activity-card p{font-size:14px;color:var(--muted);margin:0 0 26px;min-height:83px;line-height:1.9}.activity-card>a{border-top:1px solid #e7ecef;padding-top:19px;display:flex;justify-content:space-between;font-size:13px;font-weight:700}.activity-card>a span{color:#7a8f9a;font:22px Arial,sans-serif}.showcase{position:relative;overflow:hidden;min-height:470px;padding:83px 0;color:white;background:var(--dark)}.showcase>img,.showcase-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 66%}.showcase-overlay{background:linear-gradient(270deg,#082c43e8,#092b4190)}.showcase>.container{position:relative;z-index:2}.showcase h2{font-size:46px;margin-bottom:14px}.showcase h2>span{color:#dfc48f}.showcase p:not(.eyebrow){color:#d2e0e7;font-size:15px;line-height:1.9}.showcase .text-link{margin-top:9px}.showcase-word{position:absolute;bottom:-68px;left:40px;font:180px/1.3 Arial,sans-serif;letter-spacing:12px;color:#ffffff09;font-weight:700}.contact{background:var(--dark);color:white;position:relative}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:110px}.contact h2{font-size:44px}.contact h2 em{color:var(--gold)}.contact p{color:#aabdc9;font-size:15px}.contact-decoration{color:#c9a96888;font:70px Arial,sans-serif;margin-top:20px}.contact-details{padding-top:5px}.contact-row{display:flex;align-items:center;gap:20px;border-bottom:1px solid #ffffff1a;padding:19px 0}.contact-row>svg{width:25px;height:25px;color:var(--gold);flex-shrink:0}.contact-icon{color:var(--gold);font:29px Arial;width:25px}.contact-row h3{font-size:12px;font-weight:400;color:#aabdc9;margin:0 0 7px}.contact-row div>span,.contact-row div>a{font-size:16px}.contact-row a:hover{color:var(--gold)}.contact-arrow{margin-right:auto;color:var(--gold)}.contact-status{font-size:12px!important;line-height:1.8;margin-top:24px}.whatsapp{margin-top:22px}.footer{background:#061a2b;color:#d3dde5}.footer-top{display:flex;align-items:center;justify-content:space-between;padding-top:38px;padding-bottom:34px;border-bottom:1px solid #ffffff13}.footer .brand strong{font-size:22px}.footer .brand small{font-size:8px;letter-spacing:.5px}.footer nav{display:flex;gap:27px;font-size:12px}.footer nav a:hover{color:var(--gold)}.back-top{width:40px;height:40px;border:1px solid #ffffff30;display:grid;place-items:center;color:var(--gold);font-size:22px}.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-block:20px;color:#8ea1b0;font-size:11px}.footer-bottom p{margin:0}.footer-bottom>span{font:8px Arial,sans-serif;letter-spacing:1.4px}.reveal{opacity:1}.animate-ready .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}.animate-ready .reveal.visible{opacity:1;transform:translateY(0)}
@media(min-width:1550px){.hero-content{padding-top:92px}.hero h1{font-size:66px}}
@media(max-width:1050px){.container{width:calc(100% - 64px)}.navigation{gap:22px}.header-inner{gap:20px}.hero{min-height:620px}.hero h1{font-size:52px}.hero-side{left:12px}.about-grid{gap:50px}.about-visual{height:470px}h2{font-size:37px}.section-heading h2{font-size:34px}.activity-card{padding:25px 22px}.contact-grid{gap:70px}.section{padding:85px 0}}
@media(max-width:760px){html{scroll-padding-top:80px}.container{width:calc(100% - 40px)}.header{height:80px}.header-inner{gap:16px}.brand img{width:43px;height:43px}.brand strong{font-size:23px}.brand-sub{font-size:10px}.brand small{font-size:7px;letter-spacing:1.7px}.header-cta{margin-right:auto;padding:7px 13px;font-size:12px;gap:13px;min-height:40px}.menu-toggle{display:flex;width:38px;height:42px;border:0;background:none;flex-direction:column;justify-content:center;gap:7px;color:white;padding:6px;order:3}.menu-toggle span{display:block;width:25px;height:1px;background:currentColor;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.navigation{display:none;position:absolute;top:80px;right:0;left:0;background:var(--dark);padding:15px 24px 24px;box-shadow:0 20px 25px #00142233}.navigation.is-open{display:flex;flex-direction:column;gap:3px;align-items:stretch}.navigation a{padding:12px}.navigation a.active:after{right:12px;bottom:7px}.hero{height:720px;min-height:0;max-height:none}.hero-image{object-position:68% center;opacity:.68}.hero-overlay{background:linear-gradient(270deg,#061c2dee,#061c2d7a),linear-gradient(0deg,#061c2d88,transparent)}.hero-content{padding-top:62px}.hero h1{font-size:43px;letter-spacing:-1px}.hero-tagline{font-size:23px;margin-top:14px}.hero-description{font-size:16px;max-width:390px;line-height:1.95}.hero-buttons{gap:24px;margin-top:28px}.hero-buttons .button{padding:12px 23px;gap:30px}.hero-side{display:none}.hero-bottom{bottom:22px}.hero-location{display:none}.hero-bottom small{font-size:9px}.eyebrow{font-size:12px;margin-bottom:22px}.values-strip>.container{padding-block:19px;font-size:12px;gap:12px}.values-strip span:last-child,.values-strip b:nth-last-child(2){display:none}.section{padding:68px 0}.about-grid{grid-template-columns:1fr;gap:52px}.about-copy h2{font-size:36px}.about-copy>p:not(.eyebrow){font-size:15px}.about-visual{height:385px;margin:0 14px 0 10px}.image-label{right:-14px;padding:17px 24px}.section-heading{display:block;margin-bottom:30px}.section-heading h2{font-size:33px}.section-heading>p{margin-top:20px;font-size:14px}.activity-grid{grid-template-columns:1fr;gap:16px}.activity-card{padding:27px}.card-top{margin-bottom:22px}.activity-card p{min-height:0;max-width:440px;margin-bottom:23px}.activity-card h3{font-size:22px}.showcase{min-height:440px;padding:65px 0}.showcase h2{font-size:35px}.showcase-word{font-size:90px;bottom:-30px;left:5px;letter-spacing:4px}.contact-grid{grid-template-columns:1fr;gap:24px}.contact h2{font-size:36px}.contact-decoration{display:none}.contact-row{padding-block:19px}.contact-row div>span,.contact-row div>a{font-size:14px}.footer-top{flex-wrap:wrap;gap:28px}.footer .brand{flex:1}.footer nav{order:3;width:100%;justify-content:space-between;gap:12px}.footer-bottom{display:block;font-size:10px;padding-block:22px}.footer-bottom>span{display:block;margin-top:12px;font-size:7px}.footer .brand small{font-size:7px}}
@media(max-width:370px){.container{width:calc(100% - 32px)}.header-cta{display:none}.menu-toggle{margin-right:auto}.hero h1{font-size:37px}.hero-tagline{font-size:21px}.hero-buttons{gap:20px}.hero-buttons .button{padding-inline:18px;gap:20px}.hero-description{font-size:15px}}
/* Identity board: light header, maritime monogram and flowing ribbons. */
@font-face{font-family:Montserrat;src:url('../assets/fonts/montserrat-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
[lang=en],.brand small{font-family:Montserrat,Arial,sans-serif}
.header{background:#f9fbfdf5;color:var(--navy);border-bottom:1px solid #0b2e5b12;backdrop-filter:blur(12px)}
.brand{gap:10px}.brand>img{width:81px;height:57px;object-fit:contain}.brand strong{font-size:30px}.brand-sub{font-weight:700;font-size:12px}.brand small{color:var(--navy);letter-spacing:1.5px}.navigation a{color:var(--navy)}.navigation a:hover,.navigation a.active{color:#8b6b30}.navigation a.active:after{width:100%}.button{border-radius:28px;background:linear-gradient(110deg,#b8914d,#dcc18a);border-color:#c9a968}.hero{isolation:isolate}.hero:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:65px;background:url('../assets/icons/waves.svg') center bottom/100% 100% no-repeat;z-index:2;pointer-events:none}.hero-bottom{bottom:78px}.hero-content{padding-top:58px}.hero h1{font-size:clamp(42px,4vw,61px)}.hero-description{margin-bottom:22px}.values-strip{background:var(--paper);border-bottom-color:#0b2e5b0d}.about{background:linear-gradient(135deg,#fff 65%,#f0f6fb)}.about-note svg,.card-top svg{color:#087d87}.image-label{border-bottom:3px solid var(--gold)}.image-label>img{width:64px;height:46px;background:white;border-radius:5px;padding:4px}.activities{background:linear-gradient(130deg,#f5f7fa,#eef4f8)}.activity-card{border-radius:5px;border-top:3px solid #1e88b51f}.activity-card:hover{border-top-color:var(--teal)}.showcase:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:35px;background:url('../assets/icons/waves.svg') center/100% 100% no-repeat;opacity:.65}.footer .brand>img{background:#f5f7fa;border-radius:6px;padding:5px;width:75px;height:53px}.footer .brand small{color:#c6d0d8}.contact{border-top:1px solid #c9a96866}.footer .brand strong{color:white}
@media(max-width:1050px) and (min-width:761px){.header-inner{gap:17px}.navigation{gap:18px}.brand>img{width:65px}.brand strong{font-size:25px}.brand-sub{font-size:11px}.brand small{font-size:7px}.header-cta{padding-inline:17px;gap:15px}}
@media(max-width:760px){.brand>img{width:59px;height:45px}.brand strong{font-size:25px}.brand-sub{font-size:10px}.brand small{font-size:6.5px;letter-spacing:1px}.menu-toggle{color:var(--navy)}.navigation{background:#f9fbfd;border-bottom:1px solid #dce2e5}.navigation a.active:after{width:22px}.hero-content{padding-top:50px}.hero h1{font-size:42px}.hero:after{height:43px}.hero-bottom{bottom:59px}.hero{height:735px}.hero-tagline{font-size:23px}.image-label>img{width:58px;height:42px}.footer .brand>img{width:66px;height:47px}}
@media(max-width:370px){.hero h1{font-size:37px}.hero-tagline{font-size:21px}.hero-buttons{gap:20px}.hero-buttons .button{padding-inline:18px;gap:20px}}
/* Language-specific layout; keep the photographic focal point clear of the copy. */
.language-switch{flex-shrink:0;font-size:12px;font-weight:700;color:var(--navy);border:1px solid #0b2e5b30;border-radius:20px;padding:5px 13px;line-height:1.8;white-space:nowrap}
.language-switch:hover{background:#eaf2f7}.header-inner{gap:22px}
html[dir=ltr] body{font-family:Montserrat,Arial,sans-serif}
html[dir=ltr] .brand strong{font-size:24px;letter-spacing:.6px}
html[dir=ltr] .brand-sub{font-size:10px;letter-spacing:0;line-height:1.5}
html[dir=ltr] .brand small{font-size:7px;letter-spacing:1.3px}
html[dir=ltr] .hero-image{transform:none}
html[dir=ltr] .hero-overlay{background:linear-gradient(90deg,rgba(6,28,45,.98),rgba(6,28,45,.85) 29%,rgba(6,28,45,.15) 73%),linear-gradient(0deg,rgba(5,26,42,.7),transparent 40%)}
html[dir=ltr] .hero h1{font-size:44px;max-width:650px;line-height:1.25;letter-spacing:-1.4px}
html[dir=ltr] .hero-tagline{font-size:24px;max-width:550px;margin-top:18px}
html[dir=ltr] .hero-description{font-size:14px;line-height:1.9;max-width:470px}
html[dir=ltr] .hero-side{left:auto;right:23px}
html[dir=ltr] .navigation a.active:after{left:0;right:auto}
html[dir=ltr] .about-visual{margin-left:0;margin-right:22px}
html[dir=ltr] .image-label{left:-26px;right:auto}
html[dir=ltr] .vertical-caption{left:auto;right:-28px}
html[dir=ltr] .contact-arrow{margin-right:0;margin-left:auto}
html[dir=ltr] .values-strip i{margin-left:0;margin-right:10px}
html[dir=ltr] .contact h2,html[dir=ltr] .showcase h2{font-size:39px}
html[dir=ltr] h2{font-size:35px;line-height:1.45}
html[dir=ltr] .section-heading h2{font-size:31px}
html[dir=ltr] .section-heading>p{font-size:12px;max-width:380px}
html[dir=ltr] .activity-card h3{font-size:20px;line-height:1.5}
html[dir=ltr] .activity-card p{font-size:13px;min-height:125px}
html[dir=ltr] .contact-row div>span,html[dir=ltr] .contact-row div>a{font-size:13px}
html[dir=ltr] .footer .brand strong{font-size:22px}
@media(max-width:1050px) and (min-width:761px){.header-inner{gap:14px}.navigation{gap:17px}.header-cta{padding-inline:15px;gap:12px}html[dir=ltr] .brand>img{width:55px}html[dir=ltr] .brand strong{font-size:20px}html[dir=ltr] .navigation a{font-size:12px}html[dir=ltr] .header-cta{font-size:11px;padding-inline:12px;gap:8px}.language-switch{padding-inline:10px;font-size:11px}}
@media(max-width:760px){.header-inner{gap:10px}.header-cta{display:none}.language-switch{margin-inline-start:auto;padding-inline:10px;font-size:11px}.menu-toggle{margin:0}html[dir=ltr] .brand strong{font-size:20px}html[dir=ltr] .brand-sub{font-size:9px}html[dir=ltr] .brand small{font-size:6px}html[dir=ltr] .hero h1{font-size:32px;max-width:355px}html[dir=ltr] .hero-tagline{font-size:21px}html[dir=ltr] .hero-description{font-size:13px;max-width:360px}html[dir=ltr] .hero-buttons{gap:22px}html[dir=ltr] .hero-buttons .button{padding-inline:19px;gap:20px}html[dir=ltr] .hero-buttons a{font-size:12px}html[dir=ltr] .hero-overlay{background:linear-gradient(90deg,#061c2dee,#061c2d7a),linear-gradient(0deg,#061c2d88,transparent)}html[dir=ltr] .hero-content{padding-top:44px}html[dir=ltr] .about-visual{margin:0 10px 0 14px}html[dir=ltr] .image-label{left:-14px;right:auto}html[dir=ltr] h2,html[dir=ltr] .about-copy h2,html[dir=ltr] .contact h2,html[dir=ltr] .showcase h2{font-size:29px}html[dir=ltr] .section-heading h2{font-size:27px}html[dir=ltr] .activity-card p{min-height:0}html[dir=ltr] .footer nav{font-size:11px}.navigation a.active:after{inset-inline-start:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.animate-ready .reveal{opacity:1;transform:none}}

/* New supplied compass-and-sailboat identity: square mark with transparent background. */
.brand>img{width:68px;height:68px;object-fit:contain}.image-label>img{width:57px;height:57px;padding:4px}.footer .brand>img{width:67px;height:67px;padding:5px}
@media(max-width:1050px) and (min-width:761px){.brand>img,html[dir=ltr] .brand>img{width:58px;height:58px}}
@media(max-width:760px){.brand>img{width:54px;height:54px}.image-label>img{width:48px;height:48px}.footer .brand>img{width:59px;height:59px}}