.about-custom-tab { width: 100%; max-width: none; } .about-rich-body, .rich-content, .about-letter-copy { width: 100%; max-width: none; color: #334155; font-size: 1rem; line-height: 1.85; } .about-rich-body::after, .rich-content::after, .about-letter-copy::after { content: ""; display: table; clear: both; } .about-rich-body p, .rich-content p { margin: 0 0 1.2rem; text-align: justify; line-height: 1.85; color: #334155; } .about-rich-body p:last-child, .rich-content p:last-child { margin-bottom: 0; } /* Image High-End Styling */ .about-rich-body img, .rich-content img, .about-letter-copy img { height: auto; border-radius: 0.85rem; box-shadow: 0 6px 20px rgba(0, 34, 68, 0.1); border: 1px solid rgba(218, 170, 94, 0.28); transition: transform 0.3s ease, box-shadow 0.3s ease; } .about-rich-body img:hover, .rich-content img:hover, .about-letter-copy img:hover { transform: scale(1.015); box-shadow: 0 10px 28px rgba(0, 34, 68, 0.16); } /* Float Left (Chữ ôm quanh ảnh bên phải) */ .about-rich-body .img-float-left, .about-rich-body img[style*="float: left"], .about-rich-body img[style*="float:left"], .about-rich-body img.alignleft, .about-rich-body img[align="left"], .rich-content .img-float-left, .rich-content img[style*="float: left"], .rich-content img[style*="float:left"], .rich-content img.alignleft, .about-letter-copy .img-float-left, .about-letter-copy img[style*="float: left"], .about-letter-copy img[style*="float:left"], .about-letter-copy img.alignleft { float: left !important; margin: 0.35rem 1.75rem 1.25rem 0 !important; max-width: 45% !important; display: inline-block !important; clear: left; } /* Float Right (Chữ ôm quanh ảnh bên trái) */ .about-rich-body .img-float-right, .about-rich-body img[style*="float: right"], .about-rich-body img[style*="float:right"], .about-rich-body img.alignright, .about-rich-body img[align="right"], .rich-content .img-float-right, .rich-content img[style*="float: right"], .rich-content img[style*="float:right"], .rich-content img.alignright, .about-letter-copy .img-float-right, .about-letter-copy img[style*="float: right"], .about-letter-copy img[style*="float:right"], .about-letter-copy img.alignright { float: right !important; margin: 0.35rem 0 1.25rem 1.75rem !important; max-width: 45% !important; display: inline-block !important; clear: right; } /* Center Image (Căn giữa độc lập) */ .about-rich-body .img-center, .about-rich-body img.aligncenter, .about-rich-body img[style*="margin-left: auto"], .rich-content .img-center, .rich-content img.aligncenter, .about-letter-copy .img-center, .about-letter-copy img.aligncenter { display: block !important; float: none !important; margin: 1.75rem auto !important; max-width: 85% !important; } /* Full Width (Tràn viền 100%) */ .about-rich-body .img-full, .rich-content .img-full, .about-letter-copy .img-full { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; margin: 1.75rem 0 !important; } /* Smart Auto-Float: If an inline img in a paragraph is followed by text without explicit center/full, float left nicely */ .about-rich-body p > img:not(.img-center):not(.img-full):not([style*="margin-left: auto"]):not([style*="float: right"]):not([style*="float:right"]):not([style*="display: block"]), .about-letter-copy p > img:not(.img-center):not(.img-full):not([style*="margin-left: auto"]):not([style*="float: right"]):not([style*="float:right"]):not([style*="display: block"]) { float: left; margin: 0.35rem 1.75rem 1.25rem 0; max-width: 45%; display: inline-block; clear: left; } /* Figures & Captions */ .about-rich-body figure, .rich-content figure { margin: 1.5rem auto; text-align: center; max-width: 100%; } .about-rich-body figure.align-left, .about-rich-body figure[style*="float: left"] { float: left; margin: 0.35rem 1.75rem 1.25rem 0; max-width: 45%; clear: left; } .about-rich-body figure.align-right, .about-rich-body figure[style*="float: right"] { float: right; margin: 0.35rem 0 1.25rem 1.75rem; max-width: 45%; clear: right; } .about-rich-body figure.align-center { display: block; margin: 1.75rem auto; text-align: center; } .about-rich-body figcaption, .rich-content figcaption { font-size: 0.85rem; color: #64748b; font-style: italic; margin-top: 0.45rem; text-align: center; } .about-letter-tab { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1.5rem; align-items: start; padding: 2.5rem 3rem; border: 1px solid #dce5ee; border-radius: 1rem; background: linear-gradient(135deg, #f3f7fa, #fff); box-shadow: 0 14px 30px rgba(15,23,42,.07); } .about-letter-mark { color: var(--gold); font: 800 6rem/ .75 Georgia, serif; } .about-tab-kicker { color: #b47715; font: 700 .68rem Montserrat, sans-serif; letter-spacing: .12em; } .about-letter-copy h3, .about-history-heading h3 { margin: .45rem 0 .8rem; color: var(--navy); font: 800 clamp(1.35rem, 2.4vw, 2rem) / 1.2 Montserrat, sans-serif; } .about-letter-copy strong { display: block; margin-top: 1.5rem; color: var(--navy); font-size: .85rem; } .about-history-tab { display: grid; grid-template-columns: minmax(15rem, .75fr) minmax(0, 1.25fr); gap: 3rem; padding: 2.3rem 2.5rem; border: 1px solid #dce5ee; border-radius: 1rem; background: #fff; box-shadow: 0 14px 30px rgba(15,23,42,.06); } .about-history-heading { align-self: start; padding-top: .5rem; } .about-history-timeline { position: relative; display: grid; gap: 1.2rem; padding-left: 1.5rem; } .about-history-timeline::before { position: absolute; top: .55rem; bottom: .55rem; left: .22rem; width: 1px; background: #dce5ee; content: ''; } .about-history-timeline article { position: relative; display: grid; grid-template-columns: 3.2rem 1fr; gap: .9rem; } .about-history-timeline article::before { position: absolute; top: .35rem; left: -1.5rem; width: .48rem; height: .48rem; border: 3px solid #fff; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px var(--gold); content: ''; } .about-history-timeline article > span { color: #b47715; font: 800 .9rem Montserrat, sans-serif; } .about-history-timeline h4 { margin: 0; color: var(--navy); font: 700 .95rem Montserrat, sans-serif; } .about-history-timeline p { margin-top: .3rem; color: #718399; font-size: .78rem; line-height: 1.6; } @media (max-width: 768px) { .about-letter-tab, .about-history-tab { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem; } .about-letter-mark { font-size: 4rem; } .about-history-timeline { margin-top: .5rem; } .about-rich-body img, .rich-content img, .about-letter-copy img, .about-rich-body p > img, .about-letter-copy p > img, .about-rich-body .img-float-left, .about-rich-body .img-float-right, .rich-content .img-float-left, .rich-content .img-float-right { float: none !important; margin: 1.25rem auto !important; max-width: 100% !important; width: 100% !important; display: block !important; } } .project-detail-modern .project-spec-panel { align-self: start; padding: 1.1rem 1.25rem; } .project-detail-modern .project-panel-heading { padding-bottom: .7rem; } .project-detail-modern .project-panel-heading h2 { margin-top: .2rem; } .project-detail-modern .project-spec-panel dl { gap: .35rem; margin-top: .15rem; } .project-detail-modern .project-spec-panel dl div { padding: .6rem 0; } .project-document-download { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding: .8rem; border: 1px solid rgba(218,170,94,.45); border-radius: .55rem; background: linear-gradient(120deg, #fffaf0, #fff); color: var(--navy); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .project-document-download:hover { border-color: var(--gold); box-shadow: 0 8px 18px rgba(15,23,42,.1); transform: translateY(-2px); } .project-document-icon { display: grid; width: 2.35rem; height: 2.65rem; place-items: center; flex: 0 0 auto; border-radius: .3rem; background: #b84e43; color: #fff; font: 800 .62rem Montserrat, sans-serif; box-shadow: 0 3px 8px rgba(184,78,67,.2); } .project-document-download span:nth-child(2) { display: grid; min-width: 0; gap: .18rem; } .project-document-download strong { font-size: .78rem; } .project-document-download small { color: #718399; font-size: .66rem; } .project-document-download > b { margin-left: auto; color: #b47715; font-size: 1.15rem; } .values-intro { position: relative; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 1.75rem; overflow: hidden; margin-bottom: 2rem; padding: 1.6rem 2.25rem; border-radius: 1.25rem; border: 1px solid rgba(218,170,94,.3); background: radial-gradient(circle at 90% 15%, rgba(218,170,94,.18) 0%, transparent 45%), radial-gradient(circle at 10% 85%, rgba(13,71,161,.25) 0%, transparent 45%), linear-gradient(135deg, #011833 0%, #002d5a 50%, #021a36 100%); box-shadow: 0 16px 36px rgba(0,34,68,.14), inset 0 1px 0 rgba(255,255,255,.08); } .values-intro::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #DAAA5E 0%, #FAF3E6 50%, #C29548 100%); } .values-intro-copy { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; } .values-kicker { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 9999px; border: 1px solid rgba(218,170,94,.38); background: rgba(218,170,94,.12); color: #DAAA5E; font-family: 'Montserrat', sans-serif !important; font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,0,0,.15); margin-bottom: .6rem; } .values-intro h3 { margin: 0; color: #fff !important; font-family: 'Montserrat', sans-serif !important; font-weight: 800; font-size: clamp(1rem, 1.45vw, 1.55rem) !important; line-height: 1.25 !important; letter-spacing: -.02em; white-space: nowrap !important; } .values-intro-desc { position: relative; z-index: 1; flex: 0 0 22rem; max-width: 22rem; padding: .95rem 1.25rem; border-radius: .85rem; background: rgba(255,255,255,.05); border: 1px solid rgba(218,170,94,.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgba(0,0,0,.1); } .values-intro-desc p { margin: 0; color: #d6e3ee; font-family: 'Inter', sans-serif; font-size: .86rem; line-height: 1.6; } .values-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.15rem; } .value-card { position: relative; min-height: 14.5rem; display: flex; flex-direction: column; align-items: flex-start; padding: 1.6rem 1.35rem 1.4rem; border: 1px solid #e2eaf2; border-radius: 1.1rem; background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%); text-align: left; transition: all .28s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 16px rgba(0,51,102,.03); overflow: hidden; } .value-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #DAAA5E 30%, #F5D79E 50%, #DAAA5E 70%, transparent); opacity: .7; transition: opacity .3s ease, height .3s ease; } .value-card:hover { border-color: rgba(218,170,94,.75); box-shadow: 0 16px 36px rgba(0,51,102,.1), 0 0 0 1px rgba(218,170,94,.25); transform: translateY(-5px); background: #fff; } .value-card:hover::before { opacity: 1; height: 4px; background: linear-gradient(90deg, #DAAA5E, #F5D79E, #DAAA5E); } .value-card-header { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: .95rem; } .value-number { display: inline-flex; width: 2.35rem; height: 2.35rem; align-items: center; justify-content: center; border-radius: .65rem; background: linear-gradient(135deg, #FFF9ED 0%, #F6E9D2 100%); border: 1px solid rgba(218,170,94,.4); color: #946110 !important; font-family: 'Montserrat', sans-serif !important; font-weight: 800; font-size: .88rem; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(218,170,94,.12); transition: all .25s ease; } .value-card:hover .value-number { background: linear-gradient(135deg, #DAAA5E 0%, #C29548 100%); border-color: #DAAA5E; color: #002244 !important; box-shadow: 0 4px 12px rgba(218,170,94,.35); } .value-icon-box { display: inline-flex; width: 2.35rem; height: 2.35rem; align-items: center; justify-content: center; border-radius: .65rem; background: #f1f6fa; color: #003366; transition: all .25s ease; } .value-icon-box svg { width: 1.25rem; height: 1.25rem; } .value-card:hover .value-icon-box { background: #003366; color: #DAAA5E; } .value-card h3 { margin: 0 0 .5rem; color: #002b54 !important; font-family: 'Montserrat', sans-serif !important; font-weight: 800; font-size: 1.15rem; line-height: 1.3; letter-spacing: -.015em; position: relative; z-index: 1; } .value-card p { margin: 0; color: #4b5e73 !important; font-family: 'Inter', sans-serif !important; font-size: .88rem; line-height: 1.65; position: relative; z-index: 1; } .value-card-watermark { position: absolute; right: .4rem; bottom: -.4rem; font-family: 'Montserrat', sans-serif !important; font-weight: 900; font-size: 4rem; line-height: 1; color: #003366; opacity: .035; pointer-events: none; user-select: none; transition: all .3s ease; } .value-card:hover .value-card-watermark { opacity: .07; color: #DAAA5E; transform: scale(1.05); } @media (max-width: 1100px) { .values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .values-intro { flex-direction: column; align-items: flex-start; padding: 1.5rem 1.4rem; }.values-intro h3 { white-space: normal !important; }.values-intro-desc { max-width: 100%; width: 100%; flex: 1 1 auto; }.values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 540px) { .values-grid { grid-template-columns: 1fr; } } .project-detail-modern .project-detail-hero-copy { padding-left: 2.5rem; } @media (max-width: 700px) { .news-lead-layout { grid-template-columns: 1fr; }.news-side-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.news-side-card > a { grid-template-columns: 6.5rem minmax(0, 1fr); } } @media (max-width: 560px) { .news-side-list { grid-template-columns: 1fr; }.news-side-card > a { grid-template-columns: 7.5rem minmax(0, 1fr); }.news-lead-image { min-height: 15rem; }.news-lead-body { padding: 1.15rem; } } .news-lead-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(22rem, .9fr); gap: 1.25rem; margin-bottom: 2rem; }.news-lead-card { overflow: hidden; border: 1px solid #dce5ee; border-radius: .8rem; background: white; box-shadow: 0 8px 24px rgba(15,23,42,.06); }.news-lead-card > a { display: grid; grid-template-rows: minmax(20rem, 1fr) auto; height: 100%; }.news-lead-image { position: relative; min-height: 20rem; overflow: hidden; background: #e8eef4; }.news-lead-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }.news-lead-card:hover .news-lead-image img { transform: scale(1.04); }.news-lead-image > span { position: absolute; top: 1.25rem; left: 1.25rem; padding: .4rem .7rem; border-radius: .25rem; background: rgba(0,34,68,.9); color: var(--gold); font: 700 .7rem Montserrat, sans-serif; letter-spacing: .06em; text-transform: uppercase; }.news-lead-body { display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem 1.6rem 1.7rem; }.news-lead-body small { color: #9a6b1d; font-size: .72rem; }.news-lead-body h2 { max-width: 44rem; margin: .6rem 0 .7rem; color: var(--navy); font: 700 clamp(1.45rem, 2.4vw, 2.1rem)/1.2 Montserrat, sans-serif; }.news-lead-body p { max-width: 42rem; color: #64748b; line-height: 1.65; }.news-lead-body .news-read-more { margin-top: 1.2rem; }.news-side-list { display: grid; grid-template-rows: repeat(4, 1fr); gap: .75rem; }.news-side-card { min-width: 0; overflow: hidden; border: 1px solid #dce5ee; border-radius: .65rem; background: white; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }.news-side-card:hover { transform: translateX(-3px); border-color: rgba(218,170,94,.7); box-shadow: 0 8px 20px rgba(0,51,102,.09); }.news-side-card > a { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); height: 100%; }.news-side-image { min-height: 7rem; overflow: hidden; background: #e8eef4; }.news-side-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }.news-side-card:hover .news-side-image img { transform: scale(1.05); }.news-side-card > a > div:last-child { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: .85rem 1rem; }.news-side-card small { color: #9a6b1d; font-size: .65rem; }.news-side-card h3 { display: -webkit-box; overflow: hidden; margin: .35rem 0; color: var(--navy); font: 700 .9rem/1.35 Montserrat, sans-serif; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.news-side-card .news-read-more { margin-top: auto; padding-top: .25rem; font-size: .7rem; }.news-secondary-grid { margin-top: 0; } @media (max-width: 800px) { .news-list-toolbar { align-items: flex-start; flex-direction: column; gap: 1rem; }.news-category-tabs { width: 100%; }.news-card-image { height: 12rem; } } .news-list-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid #dce5ee; }.news-list-toolbar > div:first-child p { margin-top: .35rem; color: #8193a5; font-size: .8rem; }.news-results-label { color: var(--navy); font: 700 1.25rem Montserrat, sans-serif; }.news-category-tabs { margin-bottom: 0; }.news-public-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }.news-public-card:hover { transform: translateY(-5px); border-color: rgba(218,170,94,.7); box-shadow: 0 16px 32px rgba(0,51,102,.12); }.news-card-image { position: relative; height: 13rem; overflow: hidden; background: #e8eef4; }.news-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }.news-public-card:hover .news-card-image img { transform: scale(1.05); }.news-card-image > span { position: absolute; top: 1rem; left: 1rem; padding: .35rem .6rem; border-radius: .25rem; background: rgba(0,34,68,.88); color: var(--gold); font: 700 .65rem Montserrat, sans-serif; letter-spacing: .05em; text-transform: uppercase; }.news-card-image-empty { display: grid; place-items: center; background: linear-gradient(135deg, #003366, #0b4d80); }.news-card-image-empty > span { position: static; }.news-public-card-body { min-height: 14rem; display: flex; flex-direction: column; align-items: flex-start; }.news-public-card-body small { color: #9a6b1d; font-size: .7rem; }.news-public-card-body h2 { line-height: 1.3; }.news-public-card-body p { line-height: 1.65; }.news-read-more { display: inline-flex; gap: .4rem; margin-top: auto; padding-top: 1rem; color: var(--navy); font-size: .8rem; }.news-read-more span { color: var(--gold); font-size: 1.1rem; transition: transform .2s ease; }.news-public-card:hover .news-read-more span { transform: translateX(4px); }.news-empty-state { grid-column: 1 / -1; padding: 4rem 1rem; border: 1px dashed #cbd8e4; border-radius: .75rem; background: #fbfcfe; text-align: center; }.news-empty-icon { display: block; color: var(--gold); font-size: 2.3rem; }.news-empty-state h2 { margin: .7rem 0 .35rem; color: var(--navy); font: 700 1.25rem Montserrat, sans-serif; }.news-empty-state p { margin-bottom: 1.25rem; color: #718399; font-size: .9rem; }.news-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; color: #8193a5; font-size: .75rem; }.news-breadcrumb a:hover { color: var(--gold); }.news-breadcrumb strong { color: var(--navy); font-weight: 600; } .consultation-button { align-items: center; gap: .5rem; white-space: nowrap; } .menu-dropdown-trigger { display: inline-flex; align-items: center; gap: .5rem; } .menu-dropdown-chevron { width: .45rem; height: .45rem; margin-top: -.2rem; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg); transition: transform .2s ease, margin-top .2s ease; } .menu-dropdown:hover .menu-dropdown-chevron { margin-top: .15rem; transform: rotate(225deg); } .site-logo { max-height: 4.25rem; } svg.consultation-icon { display: inline-block !important; width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; min-width: 16px !important; min-height: 16px !important; flex: 0 0 16px; color: #09244c; line-height: 1; stroke-width: 1.6; vertical-align: middle; } :root { --navy: #003366; --navy-dark: #002244; --gold: #DAAA5E; } .btn-gold { display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1.25rem; border-radius: .75rem; font-weight: 700; background: var(--gold); color: var(--navy); transition: .2s ease; text-decoration: none; } .btn-gold:hover { background: #C29548; color: #fff; } .contact-inline { display: inline-flex; align-items: center; gap: .4rem; }.contact-inline img { width: .9rem; height: .9rem; object-fit: contain; }.contact-inline:hover { color: var(--gold); } .contact-list { display: grid; gap: 1.1rem; color: #dbe5ef; }.contact-row { display: flex; align-items: flex-start; gap: .8rem; line-height: 1.65; }.contact-row img { width: 1.35rem; height: 1.35rem; flex: 0 0 1.35rem; margin-top: .15rem; }.contact-row a { color: var(--gold); font-weight: 700; }.contact-row a:hover { text-decoration: underline; } .home-contact-bar { display: block; } .eyebrow { color: var(--gold); font: 700 .75rem Montserrat, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .section-title { color: var(--navy); font: 700 clamp(1.8rem, 4vw, 2.7rem) Montserrat, sans-serif; margin-top: .4rem; } .page-shell { background: linear-gradient(180deg, #f6f9fc 0%, #f7f5f1 100%); } .about-page-breadcrumb { margin-bottom: 0.75rem !important; } .about-section-gap { margin-bottom: clamp(2rem, 3vw, 2.5rem); } .about-page-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); gap: 1.5rem; margin-top: 0; padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid rgba(13, 45, 77, 0.08); border-radius: 1.5rem; background: linear-gradient(135deg, rgba(0, 51, 102, 0.98), rgba(4, 42, 79, 0.94)); box-shadow: 0 24px 50px rgba(0, 34, 68, 0.12); } .about-page-hero-copy { padding: 0.5rem 0; } .about-page-hero-copy .eyebrow { color: #e4b66b; } .about-page-hero-copy h1 { margin: 0.8rem 0 1rem; color: #fff; } .about-page-hero-copy p { max-width: 34rem; color: rgba(255,255,255,0.82); font-size: 1rem; line-height: 1.75; } .about-page-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem; } .about-page-primary, .about-page-cta .btn-gold { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0.8rem 1.6rem; border-radius: 0.8rem; border: 1px solid #DAAA5E; background: linear-gradient(135deg, #DAAA5E 0%, #C29548 100%); color: #002244 !important; font-family: 'Montserrat', sans-serif !important; font-size: 0.95rem; font-weight: 700; box-shadow: 0 4px 14px rgba(218, 170, 94, 0.3); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none; } .about-page-primary:hover, .about-page-cta .btn-gold:hover { background: linear-gradient(135deg, #E5BA6F 0%, #D4A350 100%); color: #001833 !important; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(218, 170, 94, 0.45); } .about-page-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0.8rem 1.6rem; border: 1px solid rgba(228, 182, 107, 0.7); border-radius: 0.8rem; color: #fff !important; font-family: 'Montserrat', sans-serif !important; font-size: 0.95rem; font-weight: 700; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(4px); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none; } .about-page-secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: #DAAA5E; color: #fff !important; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); } .about-page-hero-panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 1.4rem; border: 1px solid rgba(228, 182, 107, 0.28); border-radius: 1.2rem; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(6px); } .about-page-hero-badge { display: inline-flex; align-self: flex-start; padding: 0.45rem 0.7rem; border-radius: 999px; background: rgba(218, 170, 94, 0.15); color: #e4b66b; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .about-page-mini-grid { display: grid; gap: 0.8rem; margin-top: 1rem; } .about-page-mini-grid > div { padding: 0.8rem 0.9rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 0.8rem; background: rgba(255,255,255,0.03); } .about-page-mini-grid strong { display: block; color: #fff; font: 800 1.4rem/1.2 Montserrat, sans-serif; } .about-page-mini-grid span { color: rgba(255,255,255,0.78); font-size: 0.75rem; line-height: 1.5; } @media (max-width: 767px) { .about-page-hero { grid-template-columns: 1fr; } .about-page-hero-copy p { font-size: 0.92rem; } } .form-input { width: 100%; border: 1px solid #d1d5db; border-radius: .5rem; padding: .75rem 1rem; outline: none; } .form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(218,170,94,.2); } .slider-control { position: absolute; top: 50%; z-index: 20; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(0,34,68,.65); color: #fff; font-size: 2rem; line-height: 1; } .slider-control:hover { background: var(--gold); color: var(--navy); } .slider-mobile-navigation { display: none; } @keyframes sliderProgress { from { width: 0; } to { width: 100%; } } .mobile-menu-button { border: 1px solid #e5e7eb; border-radius: .5rem; padding: .55rem .7rem; color: var(--navy); font-size: 1.25rem; } .mobile-menu a { border-bottom: 1px solid #f1f5f9; } .project-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,34,68,.8); backdrop-filter: blur(8px); } .project-modal.is-open { display: flex; animation: fadeIn .25s ease both; } .project-modal-card { position: relative; width: min(56rem, 100%); max-height: 90vh; overflow-y: auto; border-radius: 1rem; background: white; box-shadow: 0 25px 60px rgba(0,0,0,.3); } .project-modal-image { display: block; width: 100%; max-height: 20rem; object-fit: cover; } .project-modal-body { padding: 2rem 2.25rem 2.25rem; }.project-modal-body h2 { margin-top: .55rem; }.project-modal-description { max-width: 46rem; margin-top: .8rem; color: #64748b; line-height: 1.75; }.project-modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }.project-modal-consult { color: var(--navy); font-weight: 700; }.project-modal-consult:hover { color: var(--gold); } .project-modal-close { position: absolute; z-index: 2; top: .75rem; right: .75rem; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: rgba(255,255,255,.88); color: var(--navy); font-size: 1.7rem; line-height: 1; box-shadow: 0 3px 10px rgba(0,0,0,.12); }.project-modal-close:hover { background: var(--gold); color: white; } .section-rule { width: 4rem; height: .25rem; margin: 1rem auto 0; border-radius: 999px; background: var(--gold); } .card-hover, .feature-card, .project-card, .news-card { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .feature-card { position: relative; min-height: 41rem; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(218,170,94,.26); border-radius: 1.8rem; background: #003b70; color: white; box-shadow: 0 18px 35px rgba(0,34,68,.18); } .feature-bg, .feature-overlay { position: absolute; inset: 0; width: 100%; height: 100%; } .feature-bg { object-fit: cover; opacity: .42; filter: saturate(.75) brightness(.68); } .feature-overlay { z-index: 1; background: linear-gradient(180deg, rgba(0,47,91,.7) 0%, rgba(0,34,68,.9) 72%, rgba(0,27,55,.98) 100%); transition: background .35s ease; } .feature-card-navy .feature-overlay { background: linear-gradient(180deg, rgba(0,51,102,.68) 0%, rgba(0,34,68,.9) 72%, rgba(0,27,55,.98) 100%); } .feature-card:hover .feature-bg { opacity: .55; filter: saturate(.9) brightness(.76); } .feature-card:hover .feature-overlay { background: linear-gradient(180deg, rgba(0,57,111,.62) 0%, rgba(0,34,68,.86) 72%, rgba(0,27,55,.97) 100%); } .feature-content { position: relative; z-index: 2; padding: 3.1rem 3rem 2.2rem; } .feature-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .feature-pillar { padding: .55rem 1.1rem; border: 1px solid rgba(218,170,94,.65); border-radius: 999px; color: var(--gold); font: 700 .85rem Montserrat, sans-serif; letter-spacing: .08em; } .feature-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: .45rem; background: var(--gold); transition: width .35s ease; } .feature-card-navy::before { background: var(--navy); } .feature-card:hover { transform: translateY(-6px); box-shadow: 0 18px 35px rgba(0,51,102,.14); } .feature-card:hover::before { width: .7rem; } .feature-card h3 { color: white; font: 800 2.25rem/1.15 Montserrat, sans-serif; margin: 2.4rem 0 1.3rem; max-width: 90%; text-transform: none; } .feature-card p { color: #d8e3ef; line-height: 1.7; font-size: 1.05rem; } .feature-icon { width: 5rem; height: 5rem; display: grid; place-items: center; border-radius: 1.15rem; background: rgba(218,170,94,.16); border: 1px solid rgba(218,170,94,.55); color: var(--gold); font-size: 2rem; box-shadow: 0 12px 28px rgba(0,27,55,.2); } .feature-card-navy .feature-icon { background: rgba(116,166,211,.22); border-color: rgba(170,204,235,.5); color: white; } .feature-link { display: inline-flex; gap: .5rem; margin-top: 1.5rem; color: var(--gold); font-weight: 700; font-size: .875rem; } .feature-card-navy .feature-link { color: white; } .feature-list { display: grid; gap: .85rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.18); color: #f0f5fa; font-size: .95rem; } .feature-list li { display: flex; align-items: flex-start; gap: .8rem; line-height: 1.45; } .feature-list li::before { content: '✓'; flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 999px; background: rgba(218,170,94,.2); color: var(--gold); font-weight: 800; } .feature-footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding: 1rem 3rem; border-top: 1px solid rgba(255,255,255,.18); background: rgba(0,23,48,.42); font-size: .8rem; letter-spacing: .04em; } .feature-footer strong { color: var(--gold); }.feature-card-navy .feature-footer strong { color: #e6edf5; }.feature-footer a { color: white; font-weight: 700; letter-spacing: 0; }.feature-footer a span { color: var(--gold); font-size: 1.3rem; margin-left: .4rem; } .feature-link span { transition: transform .25s ease; }.feature-link:hover span { transform: translateX(4px); } .img-hover-container { position: relative; overflow: hidden; } .img-hover-container::after { content: ''; position: absolute; top: 0; left: -130%; width: 70%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent); transform: skewX(-25deg); transition: left .85s cubic-bezier(.4,0,.2,1); z-index: 4; pointer-events: none; } .img-hover-container:hover::after { left: 160%; } .img-hover-zoom { transition: transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease; will-change: transform, filter; } .group:hover .img-hover-zoom, .img-hover-container:hover .img-hover-zoom { transform: scale(1.08); filter: brightness(1.06) contrast(1.03); } .img-glow-gold { transition: box-shadow .5s ease, transform .5s ease; }.img-glow-gold:hover { box-shadow: 0 15px 35px -5px rgba(218,170,94,.4), 0 0 20px rgba(218,170,94,.25); transform: translateY(-4px) scale(1.01); } .img-hover-badge { position: absolute; z-index: 6; left: 50%; bottom: 1.25rem; transform: translate(-50%, 12px) scale(.95); opacity: 0; padding: .65rem 1.2rem; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(255,255,255,.2); color: white; font: 700 .75rem Montserrat, sans-serif; letter-spacing: .06em; backdrop-filter: blur(8px); transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease; } .group:hover .img-hover-badge, .img-hover-container:hover .img-hover-badge { opacity: 1; transform: translate(-50%, 0) scale(1); }.img-hover-badge:hover { background: var(--gold); color: var(--navy); } .project-card, .news-card { overflow: hidden; border: 1px solid #e5e7eb; border-radius: 1rem; background: white; box-shadow: 0 5px 15px rgba(15,23,42,.06); }.project-card:hover, .news-card:hover { transform: translateY(-6px); box-shadow: 0 18px 35px rgba(0,51,102,.14); } .image-shade { position: absolute; inset: 0; background: rgba(0,34,68,.16); transition: background .3s ease; z-index: 2; }.group:hover .image-shade { background: rgba(0,34,68,.34); } .project-badge { position: absolute; z-index: 5; top: 1rem; left: 1rem; padding: .4rem .7rem; border-radius: .4rem; background: rgba(0,34,68,.9); color: var(--gold); font: 700 .65rem Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .08em; } .project-meta { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid #f1f5f9; margin-top: 1.25rem; padding-top: 1rem; color: #64748b; font-size: .8rem; }.project-meta strong { color: var(--navy); }.group:hover .project-meta strong { color: var(--gold); } .news-badge { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; padding: 0; bottom: auto; top: 50%; left: 50%; font-size: 1.2rem; } .image-frame { position: relative; overflow: hidden; border: 4px solid white; border-radius: 1rem; box-shadow: 0 12px 25px rgba(15,23,42,.12); }.image-caption { position: absolute; z-index: 5; left: 1rem; right: 1rem; bottom: 1rem; padding: .75rem; border: 1px solid rgba(218,170,94,.35); border-radius: .75rem; background: rgba(0,34,68,.8); color: white; backdrop-filter: blur(8px); }.image-caption strong, .image-caption span { display: block; }.image-caption strong { color: var(--gold); font: 700 .8rem Montserrat, sans-serif; }.image-caption span { color: #cbd5e1; font-size: .7rem; margin-top: .2rem; } .about-tabs { display: flex; justify-content: center; gap: .35rem; overflow-x: auto; border: 1px solid #dfe8ef; border-radius: 1rem; background: #f8fafc; padding: .45rem .55rem; margin-bottom: 2.25rem; box-shadow: 0 2px 8px rgba(15,23,42,.03); }.about-tab { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; white-space: nowrap; border: 1px solid transparent; border-radius: .75rem; background: transparent; color: #334d6e; padding: .75rem 1rem; font: 700 .95rem/1.2 'Montserrat', sans-serif !important; cursor: pointer; transition: all .2s ease; }.about-tab:hover { background: rgba(218,170,94,.1); color: var(--navy); }.about-tab.is-active { background: linear-gradient(135deg, #FFF9ED 0%, #F5E8D0 100%); color: #002B54 !important; border-color: #DAAA5E; box-shadow: 0 4px 12px rgba(218,170,94,.22); font-weight: 800; }.about-panel { display: none; animation: fadeIn .45s ease both; }.about-panel.is-active { display: block; }.about-highlight { padding: 1rem; border-left: 4px solid var(--gold); border-radius: .75rem; background: #f0f4f8; color: var(--navy); font-weight: 600; line-height: 1.7; }.stat-chip { padding: 1rem .5rem; border: 1px solid #f1f5f9; border-radius: .75rem; background: #f8fafc; text-align: center; }.stat-chip strong { display: block; color: var(--navy); font: 800 1.6rem Montserrat, sans-serif; }.stat-chip span { display: block; color: #64748b; font-size: .7rem; margin-top: .25rem; } .about-panel[data-panel="general"] > .grid { align-items: start; } .about-panel[data-panel="general"] > .grid > .image-frame { order: initial; } .vision-card { display: flex; min-height: 20rem; flex-direction: column; justify-content: center; padding: 2.2rem 2.5rem; border-radius: 2rem; box-shadow: 0 18px 36px rgba(15,23,42,.08); }.about-panel[data-panel="vision"] .grid { gap: 1.5rem; }.vision-card h3 { margin: 1.2rem 0 1rem; font: 800 clamp(1.4rem, 1.9vw, 2.5rem) Montserrat, sans-serif; letter-spacing: -.04em; line-height: 1.1; }.vision-card p { max-width: 32rem; color: inherit; font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.65; }.navy-panel { background: linear-gradient(135deg, #042f5a 0%, #042a4f 100%); color: white; }.navy-panel h3 { color: #e0b876; }.gold-panel { background: #f3ead8; color: #0d2743; border: 1px solid rgba(218,170,94,.35); }.vision-icon { display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--gold); font-size: 1.25rem; box-shadow: inset 0 0 0 1px rgba(224,184,118,.4); }.gold-panel .vision-icon { background: rgba(255,255,255,.5); color: #b8832f; box-shadow: inset 0 0 0 1px rgba(184,131,47,.25); }.about-history-tab { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(12rem, 1.2fr); align-items: center; min-height: 25rem; padding: 2.2rem 2.4rem; border: 1px solid #dfe8ef; border-radius: 1.4rem; background: rgba(247,248,249,.9); overflow: hidden; }.about-history-tab::before { position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 1px; background: rgba(62,88,111,.18); content: ''; }.about-history-heading { position: relative; z-index: 1; padding-right: 2.2rem; border-right: 1px solid rgba(62,88,111,.14); }.about-history-heading .about-tab-kicker { display: inline-block; margin-bottom: .8rem; color: #b9832d; font: 700 .74rem Montserrat, sans-serif; letter-spacing: .15em; text-transform: uppercase; }.about-history-heading h3 { margin: 0 0 1.2rem; color: #0d2d4d; font: 800 clamp(2.2rem, 4.2vw, 4.5rem)/0.98 Montserrat, sans-serif; letter-spacing: -.06em; max-width: 12ch; }.about-history-heading p { max-width: 30rem; color: #5f7389; font-size: 1.06rem; line-height: 1.7; }.about-history-space { min-height: 1rem; } .hero-slide { isolation: isolate; overflow: hidden; }.hero-slide > img { transform: scale(1.045); filter: saturate(.92) contrast(1.02); transition: transform 1.2s ease, filter 1.2s ease; }.hero-slide:before { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 78% 38%, rgba(218,170,94,.18), transparent 24%), linear-gradient(115deg, rgba(0,34,68,.18), transparent 48%); content: ''; pointer-events: none; }.hero-slide:after { position: absolute; top: -20%; left: -35%; z-index: 2; width: 24%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); content: ''; opacity: 0; pointer-events: none; transform: skewX(-18deg); }.hero-slide.is-current > img { animation: heroKenBurns 8s ease-out both; filter: saturate(1.04) contrast(1.05); }.hero-slide.is-current:after { animation: heroLightSweep 5.5s 1.1s ease-in-out both; }.hero-slide.is-current .relative.z-10 > div { animation: heroContentIn .8s .12s cubic-bezier(.16,1,.3,1) both; }.hero-slide.is-current .relative.z-10 > div > * { animation: heroItemIn .65s cubic-bezier(.16,1,.3,1) both; }.hero-slide.is-current .relative.z-10 > div > *:nth-child(1) { animation-delay: .18s; }.hero-slide.is-current .relative.z-10 > div > *:nth-child(2) { animation-delay: .3s; }.hero-slide.is-current .relative.z-10 > div > *:nth-child(3) { animation-delay: .42s; }.hero-slide.is-current .relative.z-10 > div > *:nth-child(4) { animation-delay: .54s; } .hero-slide.is-current.hero-slide-fade img { animation: heroFade .8s ease both, heroKenBurns 8s .1s ease-out both; } .hero-slide.is-current.hero-slide-zoom img { animation: heroZoom 5s ease both; } .hero-slide.is-current.hero-slide-slide img { animation: heroSlide .8s ease both, heroKenBurns 8s .1s ease-out both; } .hero-text-wave.is-current .relative.z-10 > div > span, .hero-text-wave.is-current .relative.z-10 > div > h1, .hero-text-wave.is-current .relative.z-10 > div > p { animation: heroWaveIn 1.8s cubic-bezier(.16,1,.3,1) both; } .hero-text-wave.is-current .relative.z-10 > div > span { animation-delay: .1s; } .hero-text-wave.is-current .relative.z-10 > div > h1 { animation-delay: .22s; } .hero-text-wave.is-current .relative.z-10 > div > p { animation-delay: .34s; } .hero-text-wave.is-current .relative.z-10 > div > span, .hero-text-wave.is-current .relative.z-10 > div > h1, .hero-text-wave.is-current .relative.z-10 > div > p { transform-origin: left center; will-change: transform, opacity, filter; } @keyframes heroFade { from { opacity: .35; } to { opacity: 1; } } @keyframes heroZoom { from { transform: scale(1.1); } to { transform: scale(1.02); } } @keyframes heroSlide { from { transform: translateX(4%) scale(1.06); } to { transform: translateX(0) scale(1.02); } } @keyframes heroKenBurns { 0% { transform: scale(1.045) translate3d(0, 0, 0); } 50% { transform: scale(1.085) translate3d(-.5%, -.35%, 0); } 100% { transform: scale(1.06) translate3d(.25%, -.15%, 0); } } @keyframes heroLightSweep { 0% { left: -35%; opacity: 0; } 18% { opacity: 1; } 52% { left: 120%; opacity: .3; } 100% { left: 120%; opacity: 0; } } @keyframes heroContentIn { from { opacity: 0; transform: translate3d(0, 1.25rem, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes heroItemIn { from { opacity: 0; transform: translate3d(0, .7rem, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes heroWaveIn { 0% { opacity: 0; filter: blur(5px); transform: translate3d(-4.5rem, 1.3rem, 0) rotate(-2deg) skewX(-11deg); } 22% { opacity: .72; filter: blur(1.5px); transform: translate3d(2.2rem, -.65rem, 0) rotate(1.4deg) skewX(7deg); } 46% { opacity: 1; filter: blur(0); transform: translate3d(-1.15rem, .3rem, 0) rotate(-.65deg) skewX(-3.5deg); } 70% { transform: translate3d(.42rem, -.08rem, 0) rotate(.18deg) skewX(1deg); } 88% { transform: translate3d(-.12rem, 0, 0) rotate(-.05deg) skewX(-.25deg); } 100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) rotate(0) skewX(0); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero-slide > img, .hero-slide:after, .hero-slide.is-current .relative.z-10 > div, .hero-slide.is-current .relative.z-10 > div > * { animation: none !important; transition: none !important; }.hero-slide > img { transform: none; } } @media (max-width: 768px) { .home-contact-bar { display: none; } #heroSlider { width: 100% !important; min-width: 0; } .hero-slide { width: 100vw !important; min-width: 100vw !important; } .hero-slide > .relative.z-10 { width: 100%; } .hero-slide > .relative.z-10 > div { width: 100%; } .hero-slide h1 { max-width: 100%; font-size: clamp(1.75rem, 8vw, 2.7rem) !important; line-height: 1.12; overflow-wrap: anywhere; } .hero-slide p { max-width: 100%; font-size: clamp(.9rem, 3.8vw, 1rem) !important; line-height: 1.5; } .hero-slide span { font-size: clamp(.62rem, 2.5vw, .78rem) !important; line-height: 1.3; } .hero-slide a { max-width: 100%; padding: .7rem 1rem; font-size: clamp(.78rem, 3.2vw, .95rem) !important; white-space: normal; text-align: center; } } @media (max-width: 768px) { .values-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.about-tabs { justify-content: flex-start; gap: .35rem; padding: .4rem; margin-bottom: 1.5rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(35,74,114,.35) transparent; }.about-tabs::-webkit-scrollbar { height: .3rem; }.about-tabs::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(35,74,114,.35); }.about-tab { flex: 0 0 auto; min-width: max-content; padding: .7rem .9rem; font-size: .78rem; line-height: 1.25; }.about-tab.is-active { box-shadow: inset 0 0 0 1px rgba(218,170,94,.85); }.project-meta { flex-direction: column; gap: .4rem; }.feature-card { min-height: 35rem; border-radius: 1.25rem; }.feature-content { padding: 2rem 1.5rem 1.5rem; }.feature-card h3 { font-size: 1.7rem; max-width: 100%; }.feature-pillar { font-size: .68rem; padding: .45rem .7rem; }.feature-footer { padding: 1rem 1.5rem; font-size: .68rem; }.slider-control { display: none; }.slider-mobile-navigation { position: absolute; z-index: 20; right: 1rem; bottom: 1rem; left: 1rem; display: flex; align-items: center; gap: .7rem; width: max-content; max-width: calc(100% - 2rem); padding: .5rem .65rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(0,34,68,.62); backdrop-filter: blur(10px); }.slider-mobile-dots { display: flex; align-items: center; gap: .4rem; }.slider-mobile-dot { width: .42rem; height: .42rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.5); cursor: pointer; transition: width .25s ease, background .25s ease; }.slider-mobile-dot.is-active { width: 1.2rem; background: var(--gold); }.slider-mobile-progress { display: block; width: 3.2rem; height: .15rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.25); }.slider-mobile-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--gold); } } .news-public-hero { padding: 4.5rem 0 3.5rem; background: #f0f4f8; border-bottom: 1px solid #dce5ee; }.news-public-hero p { max-width: 40rem; margin-top: .8rem; color: #64748b; }.news-public-page { max-width: 78rem; margin: 0 auto; padding: 2rem 1rem 5rem; }.news-category-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }.news-category-tabs a { border: 1px solid #dce5ee; border-radius: .4rem; color: #526b82; padding: .55rem .8rem; font-size: .8rem; }.news-category-tabs a.is-active, .news-category-tabs a:hover { border-color: var(--gold); background: #faf3e6; color: var(--navy); }.news-public-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }.news-public-card { overflow: hidden; border: 1px solid #e5e7eb; border-radius: .75rem; background: white; box-shadow: 0 5px 15px rgba(15,23,42,.06); }.news-public-card img { width: 100%; height: 12rem; object-fit: cover; }.news-public-card-body { padding: 1.1rem; }.news-public-card-body > span { color: #b47715; font-size: .72rem; }.news-public-card-body h2 { margin: .5rem 0; color: var(--navy); font-size: 1.1rem; font-weight: 700; }.news-public-card-body p { color: #64748b; font-size: .85rem; line-height: 1.55; }.news-public-card-body small { display: block; margin-top: .8rem; color: #94a3b8; font-size: .72rem; }.news-detail-page { max-width: 78rem; margin: 0 auto; padding: 3rem 1rem 5rem; }.news-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 3rem; }.news-detail-article h1 { margin: .8rem 0 1rem; color: var(--navy); font: 700 clamp(2rem, 4vw, 3.5rem)/1.12 Montserrat, sans-serif; }.news-detail-meta { display: flex; flex-wrap: wrap; gap: .7rem; color: #b47715; font-size: .78rem; }.news-detail-excerpt { color: #64748b; font-size: 1.1rem; line-height: 1.7; }.news-detail-cover { width: 100%; max-height: 32rem; margin: 2rem 0; border-radius: .75rem; object-fit: cover; }.news-detail-content { color: #334155; font-size: 1rem; line-height: 1.85; }.news-detail-content img { max-width: 100%; height: auto; margin: 1.5rem auto; border-radius: .5rem; }.news-detail-content h2, .news-detail-content h3 { margin: 2rem 0 .75rem; color: var(--navy); }.news-related { align-self: start; padding: 1rem; border: 1px solid #dce5ee; border-radius: .65rem; background: #f8fafc; }.news-related h2 { margin: 0 0 1rem; color: var(--navy); font-size: 1.05rem; }.news-related a { display: grid; gap: .3rem; padding: .8rem 0; border-bottom: 1px solid #e5e7eb; }.news-related a:last-child { border-bottom: 0; }.news-related span { color: #b47715; font-size: .7rem; }.news-related strong { color: #29415d; font-size: .85rem; line-height: 1.4; }.news-related small { color: #94a3b8; font-size: .7rem; }.news-back-link { display: inline-block; margin-top: 2rem; color: #b47715; font-weight: 600; } @media (max-width: 800px) { .news-public-grid, .news-detail-layout { grid-template-columns: 1fr; }.news-related { order: 2; } } .news-breadcrumb span { font-size: .75rem; }.news-breadcrumb span::before { content: none; }.news-index-breadcrumb { max-width: 78rem; margin: 0 auto; padding: 1rem 1rem 0; } .news-detail-content .news-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }.news-detail-content .news-gallery figure { margin: 0; overflow: hidden; border-radius: .65rem; background: #f0f4f8; }.news-detail-content .news-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }.news-detail-content .news-gallery figcaption { padding: .55rem .7rem; color: #8193a5; font-size: .75rem; }.news-detail-content .news-gallery p { margin: 0; } .news-detail-content img.is-gallery-image { cursor: zoom-in; }.news-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 3rem 5rem; background: rgba(2,15,30,.9); opacity: 0; pointer-events: none; transition: opacity .2s ease; }.news-lightbox.is-open { opacity: 1; pointer-events: auto; }.news-lightbox figure { max-width: min(76rem, 90vw); max-height: 88vh; margin: 0; text-align: center; }.news-lightbox figure img { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; margin: auto; object-fit: contain; }.news-lightbox figcaption { margin-top: .7rem; color: white; font-size: .85rem; }.news-lightbox-close, .news-lightbox-prev, .news-lightbox-next { position: absolute; border: 0; background: rgba(255,255,255,.12); color: white; cursor: pointer; }.news-lightbox-close { top: 1rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.8rem; }.news-lightbox-prev, .news-lightbox-next { top: 50%; width: 3rem; height: 4rem; margin-top: -2rem; border-radius: .35rem; font-size: 2.5rem; line-height: 1; }.news-lightbox-prev { left: 1rem; }.news-lightbox-next { right: 1rem; }.news-lightbox-close:hover, .news-lightbox-prev:hover, .news-lightbox-next:hover { background: var(--gold); color: var(--navy); }.news-lightbox-counter { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: #dbe5ef; font-size: .8rem; } .news-inline-slider { position: relative; margin: 1.8rem 0; overflow: hidden; border-radius: .8rem; background: #e8eef4; }.news-inline-slider-viewport { overflow: hidden; }.news-inline-slider-track { display: flex; transition: transform .4s ease; }.news-inline-slider-track figure { min-width: 100%; margin: 0; }.news-inline-slider-track img { display: block; width: 100%; height: min(34rem, 62vw); object-fit: cover; }.news-inline-slider-prev, .news-inline-slider-next { position: absolute; top: 50%; z-index: 2; width: 2.7rem; height: 3.2rem; margin-top: -1.6rem; border: 0; border-radius: .35rem; background: rgba(0,34,68,.68); color: white; cursor: pointer; font-size: 2rem; line-height: 1; }.news-inline-slider-prev { left: .8rem; }.news-inline-slider-next { right: .8rem; }.news-inline-slider-prev:hover, .news-inline-slider-next:hover { background: var(--gold); color: var(--navy); }.news-inline-slider-dots { position: absolute; right: 0; bottom: .8rem; left: 0; display: flex; justify-content: center; gap: .4rem; }.news-inline-slider-dots button { width: .55rem; height: .55rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.65); cursor: pointer; }.news-inline-slider-dots button.is-active { background: var(--gold); transform: scale(1.2); } .news-inline-slider--fade .news-inline-slider-track { position: relative; display: block; min-height: min(34rem, 62vw); }.news-inline-slider--fade .news-inline-slider-track figure { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }.news-inline-slider--fade .news-inline-slider-track figure.is-active { opacity: 1; }.news-inline-slider--fade .news-inline-slider-track img { height: min(34rem, 62vw); }.news-inline-slider--cards .news-inline-slider-track { gap: 1rem; }.news-inline-slider--cards .news-inline-slider-track figure { min-width: 86%; overflow: hidden; border-radius: .8rem; box-shadow: 0 14px 28px rgba(15,23,42,.18); }.news-inline-slider--cards .news-inline-slider-track img { height: min(30rem, 54vw); } @media (max-width: 640px) { .news-detail-content .news-gallery { grid-template-columns: 1fr; } } @media (max-width: 640px) { .news-lightbox { padding: 3rem 2.8rem; }.news-lightbox-prev, .news-lightbox-next { width: 2.2rem; }.news-lightbox-prev { left: .35rem; }.news-lightbox-next { right: .35rem; } } .site-back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70; display: grid; width: 3.75rem; height: 3.75rem; place-items: center; padding: 0; border: 1px solid #e4e8ed; border-radius: 50%; background: #fff; color: #18334f; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(.75rem); box-shadow: 0 8px 22px rgba(15,23,42,.16); transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease; }.site-back-to-top svg { width: 1.65rem; height: 1.65rem; }.site-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }.site-back-to-top:hover { background: #cda052; color: #fff; }.site-back-to-top:focus-visible { outline: 3px solid rgba(205,160,82,.4); outline-offset: 3px; } .floating-contact-actions { position: fixed; right: 1.1rem; bottom: 5.5rem; z-index: 65; display: grid; gap: .65rem; } .floating-contact { position: relative; display: inline-flex; align-items: center; gap: .55rem; min-height: 2.8rem; padding: .35rem .75rem .35rem .35rem; border-radius: 999px; color: #fff; text-decoration: none; box-shadow: 0 10px 22px rgba(9,36,76,.2); transition: transform .2s ease, box-shadow .2s ease; } .floating-contact::before { position: absolute; inset: -.28rem; z-index: -1; border: 2px solid currentColor; border-radius: inherit; content: ''; opacity: .35; animation: contactPulse 2.4s ease-out infinite; } .floating-contact:hover, .floating-contact:focus-visible { color: #fff; transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 26px rgba(9,36,76,.28); } .floating-contact-phone { background: #148a67; }.floating-contact-zalo { background: #0879d1; }.floating-contact-icon { display: grid; width: 2.1rem; height: 2.1rem; flex: 0 0 2.1rem; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); }.floating-contact-icon svg { width: 1.05rem; }.floating-contact-zalo-mark { font: 800 1rem/1 Inter, sans-serif; }.floating-contact-label { max-width: 0; overflow: hidden; white-space: nowrap; font-size: .72rem; font-weight: 700; opacity: 0; transition: max-width .25s ease, opacity .2s ease; }.floating-contact:hover .floating-contact-label, .floating-contact:focus-visible .floating-contact-label { max-width: 8rem; opacity: 1; } @keyframes contactPulse { 0% { transform: scale(.92); opacity: .42; } 70%, 100% { transform: scale(1.18); opacity: 0; } } @media (max-width: 640px) { .site-back-to-top { right: .85rem; bottom: .85rem; width: 3.25rem; height: 3.25rem; font-size: 1.75rem; } } @media (max-width: 640px) { .floating-contact-actions { right: .8rem; bottom: 4.8rem; gap: .5rem; }.floating-contact { min-height: 2.6rem; padding-right: .4rem; }.floating-contact-label { display: none; }.floating-contact-icon { width: 2.2rem; height: 2.2rem; flex-basis: 2.2rem; } } .site-footer { background: #062f61; color: #dbe7f4; }.site-footer-contact { background: #06386f; }.site-footer-contact-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem); gap: 4rem; max-width: 78rem; margin: 0 auto; padding: 4rem 1rem 3rem; }.site-footer-eyebrow { color: #e4b66b; font: 700 .65rem Montserrat, sans-serif; letter-spacing: .14em; }.site-footer-company h2 { margin: .8rem 0 .9rem; color: #fff; font: 800 1.45rem Montserrat, sans-serif; }.site-footer-rule { display: block; width: 2.4rem; height: .18rem; margin-bottom: 1.1rem; background: #d6a95e; }.site-footer-company h3 { max-width: 34rem; color: #e4b66b; font: 700 .95rem/1.45 Montserrat, sans-serif; }.site-footer-details { display: grid; gap: .85rem; margin-top: 1.4rem; }.site-footer-details p { display: grid; grid-template-columns: 1.2rem 1fr; gap: .55rem; margin: 0; color: #dbe7f4; font-size: .78rem; line-height: 1.55; }.site-footer-details p > b { color: #e4b66b; }.site-footer-details strong { display: block; color: #fff; font-size: .72rem; }.site-footer-details a { color: #e4b66b; font-weight: 700; }.site-footer-form-card { align-self: start; padding: 1.5rem 1.35rem; border-radius: .7rem; background: #fff; color: #29415d; box-shadow: 0 18px 35px rgba(0,20,55,.2); }.site-footer-form-card h2 { margin: 0; color: #073b70; font: 800 1.05rem Montserrat, sans-serif; }.site-footer-form-card p { margin: .5rem 0 1rem; color: #718399; font-size: .7rem; line-height: 1.5; }.site-footer-form-card form { display: grid; gap: .65rem; }.site-footer-form-card input, .site-footer-form-card textarea { width: 100%; padding: .7rem .75rem; border: 1px solid #d8e1eb; border-radius: .3rem; color: #29415d; font-size: .76rem; }.site-footer-form-card button { padding: .75rem; border: 0; border-radius: .3rem; background: #d6a95e; color: #073b70; cursor: pointer; font-weight: 800; }.site-footer-map { height: 15rem; background: #dce5ee; }.site-footer-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(.95); }.site-footer-links { display: flex; justify-content: center; gap: 5rem; max-width: 78rem; margin: 0 auto; padding: 1.7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.12); }.site-footer-links strong { display: block; margin-bottom: .55rem; color: #e4b66b; font-size: .7rem; letter-spacing: .1em; }.site-footer-links a { display: inline-block; margin: .15rem .9rem .15rem 0; color: #dbe7f4; font-size: .74rem; }.site-footer-bottom { display: flex; justify-content: space-between; gap: 1rem; max-width: 78rem; margin: 0 auto; padding: 1.1rem 1rem; color: #9fb4ca; font-size: .65rem; }.site-footer-bottom span:last-child { color: #d6a95e; } @media (max-width: 760px) { .site-footer-contact-inner { grid-template-columns: 1fr; gap: 2rem; padding: 2.7rem 1rem; }.site-footer-map { height: 12rem; }.site-footer-links { justify-content: flex-start; gap: 2rem; }.site-footer-bottom { align-items: flex-start; flex-direction: column; } } .news-public-grid { align-items: stretch; }.news-public-grid .news-public-card { display: flex; min-height: 100%; }.news-public-grid .news-public-card > a { display: flex; flex: 1; flex-direction: column; }.news-public-grid .news-card-image { aspect-ratio: 16 / 10; height: auto; flex: 0 0 auto; }.news-public-grid .news-public-card-body { display: flex; flex: 1; min-height: 15rem; flex-direction: column; }.news-public-grid .news-public-card-body .news-read-more { margin-top: auto; } .news-list-toolbar { align-items: center; } @media (max-width: 800px) { .news-list-toolbar { align-items: flex-start; } } .news-detail-article h1 { font-size: clamp(1.7rem, 3.2vw, 2.9rem); } .project-detail-modern .project-detail-hero-copy h1 { font-size: clamp(1.45rem, 2.3vw, 2.35rem); } @media (max-width: 800px) { .project-detail-modern .project-detail-hero-copy h1 { font-size: 1.55rem; } } .home-main > section:not(:first-child) { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }.home-main > section:not(:first-child) .section-title { margin-top: .25rem; }.home-main > section:not(:first-child) .eyebrow { line-height: 1.2; }.home-main > section:not(:first-child) .mb-12 { margin-bottom: 1.5rem !important; }.home-main > section:not(:first-child) .mb-10 { margin-bottom: 1.25rem !important; }.home-main > section:not(:first-child) .mt-10 { margin-top: 1.5rem !important; } .news-public-page.is-filter-loading { opacity: .55; pointer-events: none; transition: opacity .2s ease; } .news-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #dce5ee; }.news-pagination-summary { color: #8193a5; font-size: .78rem; }.news-pagination-links { display: flex; gap: .5rem; }.news-pagination-links a, .news-pagination-links span { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .45rem .8rem; border: 1px solid #dce5ee; border-radius: .35rem; color: #526b82; font-size: .8rem; }.news-pagination-links a:hover { border-color: var(--gold); background: #faf3e6; color: var(--navy); }.news-pagination-links .is-disabled { color: #b7c2cc; background: #f8fafc; } .project-catalogue-link { display: flex; justify-content: flex-end; max-width: 78rem; margin: 0 auto; padding: 1.2rem 1rem 0; background: #f8fafc; }.project-catalogue-link a { color: var(--navy); font-size: .85rem; font-weight: 700; }.project-catalogue-link a span { color: var(--gold); margin-left: .3rem; } .projects-page, .project-detail-page { max-width: 78rem; margin: 0 auto; padding: 1rem 1rem 5rem; }.projects-heading { max-width: 48rem; padding: 4rem 0 3rem; }.projects-heading h1 { margin: .6rem 0 1rem; color: var(--navy); font: 800 clamp(2.2rem, 5vw, 4.5rem)/1.06 Montserrat, sans-serif; }.projects-heading p { color: #64748b; font-size: 1.05rem; line-height: 1.75; }.projects-showcase { display: grid; gap: 1.5rem; }.project-showcase-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); overflow: hidden; border: 1px solid #dce5ee; border-radius: 1rem; background: white; box-shadow: 0 12px 30px rgba(15,23,42,.07); transition: transform .3s ease, box-shadow .3s ease; }.project-showcase-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,51,102,.13); }.project-showcase-card > div { position: relative; min-height: 20rem; }.project-showcase-card img { width: 100%; height: 100%; object-fit: cover; }.project-showcase-card > div span { position: absolute; top: 1.25rem; left: 1.25rem; padding: .45rem .75rem; border-radius: .25rem; background: var(--navy-dark); color: var(--gold); font-size: .7rem; font-weight: 700; text-transform: uppercase; }.project-showcase-card section { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 2.5rem; }.project-showcase-card small { color: #9a6b1d; }.project-showcase-card h2 { margin: .6rem 0 .8rem; color: var(--navy); font: 800 1.7rem/1.2 Montserrat, sans-serif; }.project-showcase-card p { color: #64748b; line-height: 1.7; }.project-showcase-card strong { margin-top: 2rem; color: var(--navy); }.project-showcase-card strong b { color: var(--gold); margin-left: .4rem; }.project-detail-breadcrumb { padding-top: 1rem; }.project-detail-hero { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: stretch; min-height: 32rem; margin: 1rem 0 4rem; overflow: hidden; border-radius: 1rem; background: var(--navy); color: white; }.project-detail-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 3.5rem; }.project-detail-hero-copy h1 { margin: .8rem 0 1rem; font: 800 clamp(2rem, 4vw, 3.6rem)/1.08 Montserrat, sans-serif; }.project-detail-hero-copy p { color: #dbe5ef; line-height: 1.75; }.project-detail-location { margin-top: 2rem; color: var(--gold); font-weight: 700; }.project-detail-hero-image { min-height: 24rem; }.project-detail-hero-image img { width: 100%; height: 100%; object-fit: cover; }.project-detail-main { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 4rem; }.project-detail-content { display: grid; gap: 3.5rem; }.project-detail-section h2, .project-related h2 { margin: .5rem 0 1rem; color: var(--navy); font: 800 clamp(1.5rem, 3vw, 2.2rem)/1.2 Montserrat, sans-serif; }.project-detail-section > p { color: #526b82; line-height: 1.9; font-size: 1.05rem; }.project-progress-card { padding: 1.5rem; border: 1px solid #e5eaf0; border-radius: .8rem; background: #f8fafc; }.project-progress-head { display: flex; justify-content: space-between; gap: 1rem; color: var(--navy); }.project-progress-head b { color: var(--gold); font-size: 1.4rem; }.project-progress-track { height: .55rem; margin: 1rem 0 .8rem; overflow: hidden; border-radius: 999px; background: #e1e8ef; }.project-progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--gold); }.project-progress-card p { color: #718399; font-size: .85rem; }.project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }.project-gallery img { width: 100%; aspect-ratio: 4 / 3; border-radius: .6rem; object-fit: cover; }.project-map-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem; border: 1px solid #dce5ee; border-radius: .8rem; background: #f8fafc; }.project-map-card strong { color: var(--navy); }.project-map-card p { margin-top: .3rem; color: #718399; font-size: .85rem; }.project-spec-panel { position: sticky; top: 6rem; padding: 1.5rem; border-top: 4px solid var(--gold); background: #f0f4f8; }.project-spec-panel h2 { margin: .5rem 0 1.2rem; color: var(--navy); font: 800 1.35rem Montserrat, sans-serif; }.project-spec-panel dl { display: grid; gap: 1rem; }.project-spec-panel dl div { padding-bottom: .8rem; border-bottom: 1px solid #dce5ee; }.project-spec-panel dt { color: #8193a5; font-size: .75rem; }.project-spec-panel dd { margin-top: .2rem; color: var(--navy); font-weight: 700; }.project-consult-cta { display: grid; gap: .6rem; margin-top: 1.2rem; padding: 1.4rem; background: var(--navy); color: white; }.project-consult-cta strong { font: 700 1.15rem Montserrat, sans-serif; }.project-consult-cta > span:last-child { color: #dbe5ef; font-size: .8rem; line-height: 1.5; }.project-related { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid #dce5ee; }.project-related > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }.project-related a { overflow: hidden; border: 1px solid #dce5ee; background: white; }.project-related img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }.project-related strong, .project-related small { display: block; padding: .8rem 1rem 0; }.project-related strong { color: var(--navy); }.project-related small { padding-top: .25rem; padding-bottom: 1rem; color: #8193a5; }.project-detail-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 4rem max(1rem, calc((100% - 76rem) / 2)); background: var(--navy-dark); color: white; }.project-detail-contact h2 { margin-top: .6rem; font: 800 2rem Montserrat, sans-serif; }.project-detail-contact form { display: grid; gap: .7rem; }.project-detail-contact input, .project-detail-contact textarea { width: 100%; padding: .8rem 1rem; border: 0; border-radius: .3rem; }.project-detail-contact button { padding: .8rem 1rem; border: 0; font-weight: 700; } @media (max-width: 800px) { .project-showcase-card, .project-detail-hero, .project-detail-main, .project-detail-contact { grid-template-columns: 1fr; }.project-showcase-card > div { min-height: 14rem; }.project-showcase-card section, .project-detail-hero-copy { padding: 1.7rem; }.project-detail-hero { min-height: 0; }.project-detail-hero-image { min-height: 17rem; }.project-detail-main { gap: 2.5rem; }.project-spec-panel { position: static; }.project-related > div { grid-template-columns: 1fr; }.project-map-card { align-items: flex-start; flex-direction: column; } } .news-lead-card { align-self: start; } /* Project detail refresh */ .project-detail-page { max-width: 82rem; padding-bottom: 6rem; }.project-detail-breadcrumb { margin-bottom: 1.25rem; }.project-detail-hero { position: relative; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); min-height: 34rem; margin: 0 0 0; border-radius: 1.5rem; background: #062b4c; box-shadow: 0 24px 50px rgba(0,34,68,.16); }.project-detail-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 4.5rem; }.project-kicker { color: #e4b66b; font-size: .72rem; font-weight: 800; letter-spacing: .14em; }.project-kicker i { display: inline-block; width: 2rem; height: 1px; margin: 0 .65rem .2rem; background: rgba(255,255,255,.45); }.project-detail-hero-copy h1 { max-width: 34rem; margin: 1rem 0 1.2rem; color: #fff; font: 800 clamp(2.3rem, 4.8vw, 4.8rem)/1.02 Montserrat, sans-serif; letter-spacing: 0; }.project-detail-hero-copy p { max-width: 30rem; color: rgba(255,255,255,.75); font-size: 1.08rem; line-height: 1.75; }.project-hero-link { align-self: flex-start; margin-top: 2rem; padding: .85rem 1.1rem; border: 1px solid rgba(228,182,107,.6); border-radius: .35rem; color: #fff; font-weight: 700; }.project-hero-link b { margin-left: .8rem; color: #e4b66b; }.project-detail-hero-image { position: relative; min-height: 34rem; }.project-detail-hero-image:after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,43,76,.22), transparent 35%); content: ''; }.project-detail-hero-image img { width: 100%; height: 100%; object-fit: cover; }.project-image-caption { position: absolute; right: 1.5rem; bottom: 1.5rem; z-index: 1; padding: .55rem .8rem; background: rgba(6,43,76,.78); color: #fff; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }.project-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: -2rem 2.5rem 4rem; position: relative; z-index: 2; border: 1px solid #e8edf1; border-radius: .6rem; background: #fff; box-shadow: 0 18px 38px rgba(15,23,42,.1); }.project-stat { min-height: 8rem; padding: 1.35rem 1.5rem; border-right: 1px solid #e8edf1; }.project-stat:last-child { border-right: 0; }.project-stat > span { display: block; margin-bottom: .55rem; color: #c79548; font-size: 1.35rem; }.project-stat small { display: block; color: #8193a5; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.project-stat strong { display: block; margin-top: .35rem; color: var(--navy); font: 700 1rem/1.35 Montserrat, sans-serif; }.project-detail-main { grid-template-columns: minmax(0, 1fr) 20rem; gap: 5rem; }.project-content-section { padding: 0 0 3.25rem; margin-bottom: 3.25rem; border-bottom: 1px solid #e8edf1; }.project-content-section h2, .project-video-section h2, .project-detail-contact h2 { max-width: none; margin: .65rem 0 1.2rem; color: var(--navy); font: 800 clamp(1.7rem, 3vw, 2.6rem)/1.15 Montserrat, sans-serif; }.rich-content { color: #536577; font-size: 1.04rem; line-height: 1.9; }.project-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 2rem; padding: 0; list-style: none; }.project-highlights li { position: relative; padding: .9rem 1rem .9rem 2rem; border-left: 2px solid #e4b66b; background: #f7f9fb; color: #536577; line-height: 1.6; }.project-highlights li:before { position: absolute; left: .8rem; color: #c79548; content: '✓'; font-weight: 800; }.project-spec-table { overflow: hidden; border: 1px solid #e8edf1; }.project-spec-table div { display: flex; justify-content: space-between; gap: 2rem; padding: 1rem 1.2rem; border-bottom: 1px solid #e8edf1; }.project-spec-table div:last-child { border-bottom: 0; }.project-spec-table b { color: var(--navy); }.project-spec-table span { color: #64748b; text-align: right; }.project-spec-panel { top: 7rem; padding: 1.7rem; border: 1px solid #e2e9ee; border-radius: .65rem; box-shadow: 0 15px 32px rgba(15,23,42,.06); }.project-panel-heading { padding-bottom: 1rem; border-bottom: 1px solid #e8edf1; }.project-panel-heading h2 { margin: .45rem 0 0; color: var(--navy); font: 800 1.35rem Montserrat, sans-serif; }.project-spec-panel dl div { padding: .9rem 0; border-bottom: 1px solid #eef2f5; }.project-spec-panel dt { color: #8193a5; font-size: .72rem; text-transform: uppercase; }.project-spec-panel dd { margin-top: .25rem; color: var(--navy); font-weight: 700; }.project-progress { margin-top: 1.3rem; }.project-progress > div { display: flex; justify-content: space-between; color: var(--navy); font-size: .85rem; }.project-progress > div b { color: #c79548; }.project-progress > span { display: block; height: .45rem; margin: .7rem 0 .55rem; overflow: hidden; border-radius: 99px; background: #e8edf1; }.project-progress i { display: block; height: 100%; border-radius: inherit; background: #d6a95e; }.project-progress small { color: #8193a5; }.project-map-card { margin-top: 1.4rem; }.project-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }.project-gallery figure { position: relative; min-height: 13rem; margin: 0; overflow: hidden; background: #e8edf1; }.project-gallery figure:first-child { grid-column: span 2; min-height: 24rem; }.project-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }.project-gallery figure:hover img { transform: scale(1.04); }.project-gallery figcaption { position: absolute; right: .7rem; bottom: .7rem; left: .7rem; padding: .5rem .7rem; background: rgba(6,43,76,.75); color: #fff; font-size: .7rem; }.project-video-section { margin: 1rem 0 4rem; }.project-video { overflow: hidden; aspect-ratio: 16 / 8; background: #062b4c; }.project-video iframe { width: 100%; height: 100%; border: 0; }.project-detail-contact { margin-top: 2rem; padding: 3.5rem; border-radius: .8rem; background: #eef5f7; }.project-detail-contact h2 { margin-top: .6rem; }.project-detail-contact p { max-width: 34rem; color: #64748b; line-height: 1.75; }.project-contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.5rem; }.project-contact-form input:last-of-type, .project-contact-form button { grid-column: span 2; } @media (max-width: 800px) { .project-detail-hero-copy { padding: 2.2rem 1.7rem; }.project-detail-hero-image { min-height: 19rem; }.project-stats { grid-template-columns: repeat(2, 1fr); margin: -1rem 1rem 2.5rem; }.project-stat:nth-child(2) { border-right: 0; }.project-stat:nth-child(-n+2) { border-bottom: 1px solid #e8edf1; }.project-detail-main { gap: 2rem; }.project-highlights { grid-template-columns: 1fr; }.project-contact-form { grid-template-columns: 1fr; }.project-contact-form input:last-of-type, .project-contact-form button { grid-column: auto; }.project-detail-contact { padding: 2rem 1.4rem; } } .project-detail-hero { min-height: 25rem; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }.project-detail-hero-copy { padding: 3rem 3.5rem; }.project-detail-hero-copy h1 { font-size: clamp(2rem, 4vw, 3.8rem); }.project-detail-hero-image { min-height: 25rem; }.project-slider { overflow: hidden; }.project-slider-track { display: flex; height: 100%; transition: transform .45s ease; }.project-slider-track figure { min-width: 100%; height: 100%; margin: 0; }.project-slider-track img { display: block; width: 100%; height: 100%; object-fit: cover; }.project-slider-button { position: absolute; top: 50%; z-index: 2; width: 2.6rem; height: 2.6rem; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(6,43,76,.7); color: #fff; font-size: 1.8rem; line-height: 1; transform: translateY(-50%); }.project-slider-button:hover { background: #d6a95e; color: #062b4c; }.project-slider-prev { left: 1rem; }.project-slider-next { right: 1rem; }.project-slider-dots { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; z-index: 3; display: flex; justify-content: center; gap: .4rem; }.project-slider-dots button { width: .45rem; height: .45rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); }.project-slider-dots button.is-active { width: 1.3rem; border-radius: 1rem; background: #e4b66b; }.project-stats { margin-top: -1.25rem; margin-bottom: 3rem; }.project-stat { display: flex; align-items: center; gap: .85rem; min-height: 6.25rem; padding: 1rem 1.2rem; }.project-stat > span { display: grid; flex: 0 0 2.4rem; place-items: center; width: 2.4rem; height: 2.4rem; margin: 0; border-radius: .45rem; background: #f8f0e2; font-size: 1rem; }.project-stat small { font-size: .62rem; }.project-stat strong { margin-top: .2rem; font-size: .88rem; }.project-image-caption { bottom: 1rem; }.project-gallery-section .project-gallery { grid-template-columns: repeat(3, 1fr); }.project-gallery-section .project-gallery figure:first-child { grid-column: span 2; grid-row: span 2; min-height: 27rem; }.project-gallery-section .project-gallery figure { min-height: 13rem; } .project-slider-thumbs { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; z-index: 4; display: flex; gap: .45rem; justify-content: flex-end; }.project-slider-thumbs button { width: 3rem; height: 2.1rem; padding: 0; border: 2px solid rgba(255,255,255,.55); border-radius: .25rem; background-position: center; background-size: cover; opacity: .75; }.project-slider-thumbs button.is-active { border-color: #e4b66b; opacity: 1; }.project-slider-thumbs + .project-slider-dots { right: 10rem; justify-content: flex-start; } .project-detail-hero { min-height: 0; height: 24rem; }.project-detail-hero-image { min-height: 0; height: 24rem; }.project-detail-hero-copy { min-height: 0; }.project-slider-track, .project-slider-track figure { height: 24rem; } @media (max-width: 800px) { .project-detail-hero { grid-template-columns: 1fr; height: auto; min-height: 0; }.project-detail-hero-copy { padding: 2.2rem 1.7rem; }.project-detail-hero-image, .project-slider-track, .project-slider-track figure { height: 17rem; min-height: 17rem; }.project-stats { margin: -1rem .75rem 2.5rem; }.project-gallery-section .project-gallery { grid-template-columns: repeat(2, 1fr); }.project-gallery-section .project-gallery figure:first-child { grid-column: span 2; grid-row: auto; min-height: 16rem; }.project-gallery-section .project-gallery figure { min-height: 10rem; } } /* Modern project detail direction */ .project-detail-modern { max-width: 80rem; padding-top: .75rem; color: #31465a; }.project-detail-modern .project-detail-breadcrumb { margin-bottom: 1.75rem; }.project-detail-modern .project-detail-hero { height: 27rem; min-height: 0; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; overflow: hidden; border: 1px solid #dfe8ed; border-radius: .9rem; background: #fff; box-shadow: 0 18px 45px rgba(24,49,69,.09); }.project-detail-modern .project-detail-hero-copy { min-height: 0; padding: 3.25rem 3.5rem; background: #f7f3ec; }.project-detail-modern .project-kicker { color: #a67837; font-size: .66rem; letter-spacing: .13em; }.project-detail-modern .project-kicker i { background: #a67837; }.project-detail-modern .project-detail-hero-copy h1 { max-width: 27rem; margin: .9rem 0 1rem; color: #123b61; font: 800 clamp(2rem, 3.4vw, 3.45rem)/1.06 Montserrat, sans-serif; letter-spacing: -.02em; }.project-detail-modern .project-detail-hero-copy p { max-width: 27rem; color: #5d6f7d; font-size: .98rem; line-height: 1.7; }.project-detail-modern .project-hero-link { margin-top: 1.65rem; border-color: #c99b55; background: #c99b55; color: #123b61; font-size: .8rem; }.project-detail-modern .project-hero-link b { color: #123b61; }.project-detail-modern .project-detail-hero-image, .project-detail-modern .project-slider-track, .project-detail-modern .project-slider-track figure { height: 27rem; min-height: 0; }.project-detail-modern .project-detail-hero-image:after { background: linear-gradient(90deg, rgba(7,42,72,.12), transparent 45%); }.project-detail-modern .project-image-caption { right: 1.25rem; bottom: 1.25rem; padding: .45rem .7rem; background: rgba(12,45,72,.82); font-size: .62rem; }.project-detail-modern .project-slider-button { width: 2.25rem; height: 2.25rem; font-size: 1.45rem; }.project-detail-modern .project-slider-prev { left: 1.25rem; }.project-detail-modern .project-slider-next { right: 1.25rem; }.project-detail-modern .project-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: -1.35rem 2.5rem 4.5rem; border: 0; border-radius: .55rem; background: #123b61; box-shadow: 0 14px 28px rgba(18,59,97,.2); }.project-detail-modern .project-stat { min-height: 5.6rem; border-right: 1px solid rgba(255,255,255,.15); }.project-detail-modern .project-stat:last-child { border-right: 0; }.project-detail-modern .project-stat > span { background: rgba(213,169,94,.15); color: #e5b86c; }.project-detail-modern .project-stat small { color: rgba(255,255,255,.6); }.project-detail-modern .project-stat strong { color: #fff; font-size: .82rem; }.project-detail-modern .project-detail-main { grid-template-columns: minmax(0, 1fr) 18.5rem; gap: 4.5rem; align-items: start; }.project-detail-modern .project-content-section { padding-bottom: 2.5rem; margin-bottom: 2.5rem; }.project-detail-modern .project-content-section h2, .project-detail-modern .project-video-section h2, .project-detail-modern .project-detail-contact h2 { max-width: none; margin: .55rem 0 1rem; color: #123b61; font-size: clamp(1.45rem, 2.4vw, 2.15rem); line-height: 1.2; letter-spacing: -.01em; }.project-detail-modern .eyebrow { color: #b2833f; font-size: .64rem; letter-spacing: .13em; }.project-detail-modern .rich-content { width: 100%; max-width: none; color: #5c6d7b; font-size: .98rem; line-height: 1.85; }.project-detail-modern .project-spec-panel { top: 6rem; padding: 1.4rem; border: 1px solid #dfe8ed; border-radius: .55rem; background: #fff; box-shadow: 0 12px 30px rgba(24,49,69,.07); }.project-detail-modern .project-panel-heading h2 { font-size: 1.15rem; }.project-detail-modern .project-spec-panel dt { font-size: .62rem; letter-spacing: .08em; }.project-detail-modern .project-spec-panel dd { font-size: .86rem; }.project-detail-modern .project-highlights { gap: .6rem 1rem; }.project-detail-modern .project-highlights li { padding: .8rem .8rem .8rem 1.9rem; background: #f6f8f9; font-size: .88rem; }.project-detail-modern .project-spec-table div { padding: .8rem 1rem; font-size: .88rem; }.project-detail-modern .project-detail-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 1rem; padding: 2.75rem 3rem; border-radius: .65rem; background: #123b61; }.project-detail-modern .project-detail-contact h2, .project-detail-modern .project-detail-contact p { color: #fff; }.project-detail-modern .project-detail-contact p { color: rgba(255,255,255,.7); font-size: .9rem; }.project-detail-modern .project-contact-form { align-content: center; }.project-detail-modern .project-contact-form .form-input { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.95); }.project-detail-modern .project-related { margin-top: 4rem; }.project-detail-modern .project-related h2 { color: #123b61; font-size: 2rem; } @media (max-width: 800px) { .project-detail-modern .project-detail-hero { height: auto; grid-template-columns: 1fr; }.project-detail-modern .project-detail-hero-copy { padding: 1.55rem .75rem 1.7rem; }.project-detail-modern .project-detail-hero-copy h1 { margin: .65rem 0 .7rem; font-size: 2.15rem; }.project-detail-modern .project-detail-hero-copy p { font-size: .86rem; line-height: 1.55; }.project-detail-modern .project-hero-link { margin-top: 1rem; padding: .7rem .85rem; font-size: .72rem; }.project-detail-modern .project-detail-hero-image, .project-detail-modern .project-slider-track, .project-detail-modern .project-slider-track figure { height: 13rem; min-height: 13rem; }.project-detail-modern .project-stats { grid-template-columns: repeat(2, 1fr); margin: -1rem .75rem 2.5rem; }.project-detail-modern .project-stat { min-height: 4.4rem; padding: .75rem; border-bottom: 1px solid rgba(255,255,255,.15); }.project-detail-modern .project-stat:nth-child(2) { border-right: 0; }.project-detail-modern .project-stat > span { flex-basis: 2rem; width: 2rem; height: 2rem; font-size: .8rem; }.project-detail-modern .project-stat strong { font-size: .72rem; }.project-detail-modern .project-detail-main { grid-template-columns: 1fr; gap: 1rem; }.project-detail-modern .project-spec-panel { position: static; }.project-detail-modern .project-detail-contact { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 1.4rem; } } .project-detail-modern .project-slider-dots { bottom: 2.35rem; }.project-detail-modern .project-slider-thumbs { bottom: 2.15rem; } @media (max-width: 800px) { .project-detail-modern .project-detail-hero-copy { padding-left: 0; }.project-detail-modern .project-stats { margin-left: 0; margin-right: 0; }.project-detail-modern .project-slider-dots { bottom: 2.1rem; }.project-detail-modern .project-slider-thumbs { bottom: 1.9rem; } } @media (max-width: 800px) { .project-detail-modern .project-detail-hero { margin-left: -1rem; margin-right: -1rem; border-radius: 0; }.project-detail-modern .project-stats { margin-left: -1rem; margin-right: -1rem; border-radius: 0; }.project-detail-modern .project-detail-hero-copy { width: 100%; margin-left: 0; padding-left: .75rem; } } .project-detail-modern .project-image-caption { top: 1.25rem; right: 1.25rem; bottom: auto; } .project-detail-modern .project-panel-heading .eyebrow { display: none; } .project-detail-modern .project-spec-panel dl { margin-top: .25rem; }.project-detail-modern .project-spec-panel dl:empty { display: none; }.project-detail-modern .project-spec-panel dl div { padding: .75rem 0; }.project-detail-modern .project-spec-panel .project-map-card { margin-top: 1rem; } .project-detail-modern .project-related { padding-top: 1rem; }.project-detail-modern .project-related > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.project-detail-modern .project-related > div > a { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #dfe8ed; border-radius: .6rem; background: #fff; box-shadow: 0 8px 20px rgba(24,49,69,.06); transition: transform .25s ease, box-shadow .25s ease; }.project-detail-modern .project-related > div > a:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(24,49,69,.12); }.project-detail-modern .project-related > div > a > img { width: 100%; height: 10.5rem; object-fit: cover; transition: transform .4s ease; }.project-detail-modern .project-related > div > a:hover > img { transform: scale(1.04); }.project-detail-modern .project-related > div > a > small { order: 2; padding: .8rem 1rem 0; color: #b2833f; font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.project-detail-modern .project-related > div > a > h3 { order: 3; display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .35rem 1rem 1rem; color: #123b61; font: 700 .95rem/1.35 Montserrat, sans-serif; }.project-detail-modern .project-related > div > a > h3:after { flex: 0 0 auto; color: #cda052; content: '↗'; font-size: 1rem; }.project-detail-modern .project-related > div > a:after { position: absolute; }.project-detail-modern .project-related > div > a { position: relative; } @media (max-width: 800px) { .project-detail-modern .project-related > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .project-detail-modern .project-related > div { grid-template-columns: 1fr; }.project-detail-modern .project-related > div > a > img { height: 11rem; } } .project-catalogue-modern { max-width: 76rem; padding-top: .75rem; }.project-catalogue-modern .project-detail-breadcrumb { margin-bottom: 1rem; }.project-catalogue-modern .projects-heading { max-width: 42rem; padding: 1.75rem 0 2rem; }.project-catalogue-modern .projects-heading h1 { margin: .45rem 0 .65rem; color: #123b61; font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.12; }.project-catalogue-modern .projects-heading p { max-width: 36rem; font-size: .9rem; line-height: 1.6; }.project-catalogue-modern .projects-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.project-catalogue-modern .project-showcase-card { display: flex; flex-direction: column; border-radius: .6rem; box-shadow: 0 8px 22px rgba(15,23,42,.06); }.project-catalogue-modern .project-showcase-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,51,102,.12); }.project-catalogue-modern .project-showcase-card > div { min-height: 0; height: 12rem; }.project-catalogue-modern .project-showcase-card > div span { top: .75rem; left: .75rem; padding: .35rem .55rem; font-size: .58rem; }.project-catalogue-modern .project-showcase-card section { min-height: 10.8rem; padding: 1.1rem 1.15rem; }.project-catalogue-modern .project-showcase-card small { font-size: .68rem; }.project-catalogue-modern .project-showcase-card h2 { margin: .4rem 0 .5rem; font-size: 1.1rem; line-height: 1.25; }.project-catalogue-modern .project-showcase-card p { display: -webkit-box; overflow: hidden; margin: 0; font-size: .78rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.project-catalogue-modern .project-showcase-card strong { margin-top: auto; padding-top: .8rem; font-size: .75rem; }.project-catalogue-modern .project-showcase-card strong b { margin-left: .25rem; } .project-detail-modern .project-kicker { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .45rem; }.project-detail-modern .project-kicker:after { display: inline-block; width: .48rem; height: .48rem; margin-left: .2rem; border-radius: 50%; background: #35c982; box-shadow: 0 0 0 0 rgba(53,201,130,.55); content: ''; animation: projectStatusPulse 1.8s infinite; }.project-detail-modern .project-kicker i { margin-right: .2rem; }.project-detail-modern .project-kicker { text-shadow: 0 0 0 transparent; } @keyframes projectStatusPulse { 0% { box-shadow: 0 0 0 0 rgba(53,201,130,.55); opacity: 1; } 70% { box-shadow: 0 0 0 .45rem rgba(53,201,130,0); opacity: .82; } 100% { box-shadow: 0 0 0 0 rgba(53,201,130,0); opacity: 1; } } .project-detail-modern .project-detail-main { gap: 3rem; }.project-detail-modern .project-detail-content { min-width: 0; gap: .5rem; }.project-detail-modern .project-content-section { padding-bottom: .9rem; margin-bottom: .9rem; }.project-detail-modern .project-content-section h2, .project-detail-modern .project-video-section h2, .project-detail-modern .project-detail-contact h2 { margin: .45rem 0 .75rem; font-size: clamp(1.35rem, 2.1vw, 1.95rem); line-height: 1.18; }.project-detail-modern .rich-content { width: 100%; max-width: none; font-size: .92rem; line-height: 1.7; }.project-detail-modern .project-highlights { margin-top: .8rem; }.project-detail-modern .project-spec-table { margin-top: .75rem; }.project-detail-modern .project-spec-table div { padding: .68rem .9rem; }.project-detail-modern .project-gallery-section { margin-bottom: 1.5rem; }.project-detail-modern .project-video-section { margin: 1.5rem 0 2.5rem; }.project-detail-modern .project-detail-contact { margin-top: 1.5rem; padding: 2.25rem 2.5rem; }.project-detail-modern .project-related { margin-top: 2.75rem; }.project-detail-modern .project-related h2 { margin: .45rem 0 1rem; font-size: 1.7rem; }.project-detail-modern .project-related > div { gap: .8rem; }.project-detail-modern .project-related h3 { font-size: .9rem; }.project-detail-modern .project-related small { font-size: .68rem; } .project-empty-content { margin-top: .8rem; padding: .85rem 1rem; border-left: 2px solid #d6a95e; background: #f7f9fa; color: #8193a5; font-size: .88rem; } .project-detail-modern .project-kicker.status-running:after { background: #35c982; box-shadow: 0 0 0 0 rgba(53,201,130,.55); }.project-detail-modern .project-kicker.status-complete:after { background: #2b9b68; animation: none; box-shadow: none; }.project-detail-modern .project-kicker.status-planned:after { background: #e0a33a; animation: none; box-shadow: none; }.project-detail-modern .project-kicker.status-neutral:after { background: #94a3b8; animation: none; box-shadow: none; }.project-catalogue-modern .project-showcase-card > div > span.status-running { background: #123b61; color: #72e0ad; }.project-catalogue-modern .project-showcase-card > div > span.status-complete { background: #eaf7f0; color: #27875e; }.project-catalogue-modern .project-showcase-card > div > span.status-planned { background: #fff4dc; color: #a67837; }.project-catalogue-modern .project-showcase-card > div > span.status-neutral { background: #eef2f5; color: #64748b; } @media (max-width: 800px) { .project-detail-modern .project-detail-main { gap: 1.5rem; }.project-detail-modern .project-content-section { padding-bottom: .75rem; margin-bottom: .75rem; }.project-detail-modern .project-detail-contact { margin-top: 1rem; padding: 1.6rem 1.2rem; } } @media (max-width: 900px) { .project-catalogue-modern .projects-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .project-catalogue-modern .projects-heading { padding: 1.2rem 0 1.5rem; }.project-catalogue-modern .projects-heading h1 { font-size: 2rem; }.project-catalogue-modern .projects-showcase { grid-template-columns: 1fr; gap: .85rem; }.project-catalogue-modern .project-showcase-card { display: grid; grid-template-columns: 8.5rem 1fr; }.project-catalogue-modern .project-showcase-card > div { height: 100%; min-height: 10rem; }.project-catalogue-modern .project-showcase-card section { min-height: 10rem; padding: .9rem; }.project-catalogue-modern .project-showcase-card h2 { font-size: .95rem; } } .project-filter-bar { display: flex; align-items: flex-end; gap: .7rem; margin: .5rem 0 1rem; padding: .8rem; border: 1px solid #dfe8ed; border-radius: .55rem; background: #f7f9fa; }.project-filter-bar label { display: grid; gap: .3rem; min-width: 12rem; }.project-filter-bar label span { color: #8193a5; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.project-filter-bar select { min-height: 2.4rem; padding: .5rem .7rem; border: 1px solid #d5e0e7; border-radius: .35rem; background: #fff; color: #29415d; font-size: .78rem; }.project-filter-submit, .project-filter-reset { min-height: 2.4rem; padding: .5rem .85rem; border-radius: .35rem; font-size: .75rem; font-weight: 700; }.project-filter-submit { border: 1px solid #123b61; background: #123b61; color: #fff; }.project-filter-submit b { margin-left: .4rem; color: #e4b66b; }.project-filter-reset { display: inline-flex; align-items: center; color: #8193a5; }.project-filter-reset:hover { color: #b2833f; }.project-results-heading { display: flex; justify-content: space-between; margin: 1rem 0 .7rem; color: #8193a5; font-size: .72rem; }.project-results-heading strong { color: #b2833f; font-weight: 600; }.project-pagination { display: flex; justify-content: center; margin-top: 1.8rem; }.project-pagination nav { display: block; }.project-pagination nav > div:first-child { display: none; }.project-pagination nav > div:last-child > span, .project-pagination nav > div:last-child > a { display: inline-flex; min-width: 2.1rem; height: 2.1rem; align-items: center; justify-content: center; margin: 0 .15rem; border: 1px solid #dfe8ed; border-radius: .3rem; color: #526b82; font-size: .75rem; text-decoration: none; }.project-pagination nav > div:last-child > span[aria-current="page"] { border-color: #123b61; background: #123b61; color: #fff; }.project-pagination nav > div:last-child > a:hover { border-color: #cda052; color: #b2833f; } @media (max-width: 600px) { .project-filter-bar { align-items: stretch; flex-direction: column; }.project-filter-bar label { min-width: 0; }.project-filter-submit, .project-filter-reset { justify-content: center; }.project-results-heading { align-items: flex-start; flex-direction: column; gap: .25rem; } } .news-lead-card > a { height: auto; } .news-lead-image { min-height: 0; aspect-ratio: 16 / 8; } .news-side-image { min-height: 0; aspect-ratio: 4 / 3; } .news-public-hero { display: none; } .project-pagination { align-items: center; justify-content: space-between; gap: 1rem; } .project-pagination nav { flex: 0 0 auto; } .project-detail-modern .project-detail-hero-copy h1 { font-size: clamp(1.45rem, 2.3vw, 2.35rem); } @media (max-width: 800px) { .project-detail-modern .project-detail-hero-copy h1 { font-size: 1.55rem; } } .project-pagination nav > div { align-items: center; } .project-pagination nav > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .project-pagination nav > div:last-child > div { display: flex; align-items: center; } .project-pagination nav p { min-height: 2.1rem; margin: 0; display: flex; align-items: center; white-space: nowrap; } .project-pagination nav > div:last-child > span, .project-pagination nav > div:last-child > a { margin: 0 .1rem; } @media (max-width: 600px) { .project-pagination { align-items: flex-start; flex-direction: column; gap: .7rem; } } .project-pagination nav > div:last-child > div:first-child p { display: flex !important; align-items: center; min-height: 37.6px; margin: 0; line-height: 20px; } .project-pagination nav > div:last-child > div:last-child > span[aria-disabled="true"] { display: inline-flex !important; align-items: center; justify-content: center; min-height: 37.6px; line-height: 20px; } .project-pagination [aria-disabled="true"] { display: inline-flex !important; align-items: center; justify-content: center; min-height: 37.6px; line-height: 20px; } .navy-panel { background-image: linear-gradient(115deg, rgba(4,47,90,.94), rgba(4,42,79,.82)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1400&q=80'); background-position: center; background-size: cover; } .gold-panel { background-image: linear-gradient(115deg, rgba(243,234,216,.94), rgba(243,234,216,.78)), url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1400&q=80'); background-position: center; background-size: cover; } .about-tabs [data-tab="vision"], .about-panel[data-panel="vision"] { display: none !important; } .about-tabs, .about-tabs button { font-family: 'Montserrat', sans-serif !important; } .about-panel h2, .about-panel h3, .about-panel h4, .about-panel .value-number, .about-panel .stat-chip strong, .about-panel .values-kicker { font-family: 'Montserrat', sans-serif !important; } .about-panel p, .about-panel .values-intro-desc p, .about-panel .value-card p { font-family: 'Inter', sans-serif !important; } .partners-editor { display: grid; gap: .8rem; grid-column: 1 / -1; padding: .9rem; border: 1px dashed #d5e0ea; border-radius: .45rem; background: #fbfcfe; } .partners-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .partners-editor-heading > div { display: grid; gap: .2rem; }.partners-editor-heading strong { color: #526b82; font-size: .8rem; }.partners-editor-heading small { color: #8193a5; font-size: .68rem; } .partners-editor-list { display: grid; gap: .75rem; }.partner-editor-card { position: relative; min-width: 0; margin: 0; padding: 1rem; border: 1px solid #dce5ee; border-radius: .5rem; background: #fff; }.partner-editor-card legend { padding: 0 .35rem; color: #294760; font-size: .78rem; font-weight: 800; }.partner-editor-remove { position: absolute; top: .65rem; right: .75rem; border: 0; background: transparent; color: #b04f45; cursor: pointer; font-size: .7rem; font-weight: 700; }