:root {
  --navy: #07131f;
  --navy-2: #0d2232;
  --navy-3: #15354a;
  --cream: #f5f0e7;
  --paper: #fbf8f2;
  --white: #ffffff;
  --gold: #d8b56b;
  --gold-2: #f1d18c;
  --copper: #b7783f;
  --ink: #10202b;
  --muted: #65717a;
  --line: rgba(16, 32, 43, .13);
  --shadow: 0 30px 80px rgba(4, 17, 27, .14);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
body::selection { background: var(--gold); color: var(--navy); }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
.wrap { width: min(1280px, calc(100% - 72px)); margin-inline: auto; }

.topline { height: 3px; background: linear-gradient(90deg, transparent, var(--gold), var(--gold-2), var(--gold), transparent); }
.header { position: sticky; top: 0; z-index: 60; background: rgba(7, 19, 31, .92); border-bottom: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(22px); }
.nav { height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img { width: 178px; height: 66px; object-fit: contain; object-position: left center; filter: drop-shadow(0 4px 14px rgba(0,0,0,.24)); }
.links { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.links a { position: relative; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; padding: 39px 0; transition: color .25s; }
.links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 28px; height: 1px; background: var(--gold); transition: right .3s; }
.links a:hover, .links a.active { color: white; }
.links a:hover::after, .links a.active::after { right: 0; }
.navButton { border: 1px solid rgba(216,181,107,.72)!important; color: var(--gold-2)!important; background: rgba(216,181,107,.05); }
.menu { display: none; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: white; font-size: 22px; }

.hero { min-height: 760px; height: calc(100vh - 95px); position: relative; color: white; overflow: hidden; background: var(--navy); }
.hero > img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center; animation: heroZoom 15s cubic-bezier(.2,.7,.2,1) both; }
.hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(4,13,22,.98) 0%, rgba(4,16,26,.87) 38%, rgba(4,16,26,.32) 72%, rgba(4,16,26,.18)), linear-gradient(0deg, rgba(4,14,23,.92), transparent 48%); }
.hero::after { content: ""; position: absolute; z-index: 1; width: 560px; height: 560px; right: -150px; top: -170px; border: 1px solid rgba(216,181,107,.26); border-radius: 50%; box-shadow: 0 0 0 80px rgba(216,181,107,.025), 0 0 0 160px rgba(216,181,107,.018); }
.heroContent { position: relative; z-index: 2; padding-top: clamp(100px, 14vh, 160px); max-width: 900px; }
.kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; color: var(--gold-2); font-size: 10px; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; }
.kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.hero h1, .pageHero h1, .headline { font-family: var(--serif); font-weight: 400; letter-spacing: -.05em; margin: 0; }
.hero h1 { max-width: 880px; font-size: clamp(64px, 7.3vw, 112px); line-height: .92; text-wrap: balance; }
.hero h1 em, .pageHero h1 em, .headline em { color: var(--gold); font-weight: 400; }
.heroCopy { max-width: 650px; margin: 30px 0 36px; color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.8; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 16px 24px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; transition: transform .3s, box-shadow .3s, background .3s; }
.button:hover { transform: translateY(-4px); }
.primary { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--navy); box-shadow: 0 18px 44px rgba(216,181,107,.22); }
.primary:hover { box-shadow: 0 22px 50px rgba(216,181,107,.36); }
.outline { border: 1px solid rgba(255,255,255,.44); color: white; background: rgba(255,255,255,.035); backdrop-filter: blur(8px); }
.heroStats { position: absolute; z-index: 3; left: 50%; bottom: 0; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4,1fr); background: rgba(5,17,27,.76); border: 1px solid rgba(255,255,255,.12); border-bottom: 0; backdrop-filter: blur(18px); }
.heroStat { padding: 25px 28px; border-right: 1px solid rgba(255,255,255,.12); }
.heroStat:last-child { border-right: 0; }
.heroStat strong { display: block; color: var(--gold-2); font: 34px var(--serif); margin-bottom: 5px; }
.heroStat span { color: rgba(255,255,255,.56); font-size: 9px; text-transform: uppercase; letter-spacing: .16em; }

.section { position: relative; padding: 125px 0; }
.section:nth-of-type(odd):not(.hero):not(.pageHero):not(.dark):not(.cta) { background: linear-gradient(135deg, rgba(216,181,107,.04), transparent 42%); }
.sectionIntro { display: grid; grid-template-columns: 1.08fr .92fr; gap: 100px; align-items: end; margin-bottom: 68px; }
.headline { font-size: clamp(46px, 5.2vw, 76px); line-height: 1.02; text-wrap: balance; }
.lead { color: var(--muted); font-size: 16px; line-height: 1.85; }
.textLink { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding-bottom: 7px; border-bottom: 1px solid var(--gold); color: #8b5d2f; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.storyGrid, .featureSplit, .contactGrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(60px, 7vw, 105px); align-items: center; }
.photo { position: relative; margin: 0; overflow: visible; }
.photo::before { content: ""; position: absolute; z-index: -1; inset: 24px -24px -24px 24px; border: 1px solid rgba(183,120,63,.35); }
.photo img { height: 610px; object-fit: cover; box-shadow: var(--shadow); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s; }
.photo:hover img { transform: translateY(-8px) scale(1.015); filter: saturate(1.08); }
.photo span { position: absolute; left: -18px; bottom: 30px; padding: 15px 20px; background: var(--navy); color: var(--gold-2); box-shadow: 0 14px 35px rgba(4,17,27,.24); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }

.dark { overflow: hidden; background: radial-gradient(circle at 100% 0, rgba(31,75,100,.4), transparent 36%), var(--navy); color: white; }
.dark::before { content: "SG"; position: absolute; right: -35px; top: 15px; color: rgba(255,255,255,.018); font: 260px/1 var(--serif); letter-spacing: -.09em; }
.dark .lead { color: rgba(255,255,255,.58); }
.businessGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.businessCard { position: relative; min-height: 420px; overflow: hidden; background: var(--navy-2); border: 1px solid rgba(255,255,255,.1); isolation: isolate; }
.businessCard img { position: absolute; inset: 0; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s; }
.businessCard::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgba(3,12,20,.98) 0%, rgba(3,12,20,.7) 40%, rgba(3,12,20,.05) 76%); transition: background .4s; }
.businessCard::before { content: "↗"; position: absolute; z-index: 3; right: 22px; top: 22px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.35); color: white; opacity: 0; transform: translateY(8px); transition: .35s; }
.businessCard:hover img { transform: scale(1.08); filter: saturate(1.08); }
.businessCard:hover::before { opacity: 1; transform: none; }
.businessCard .content { position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 28px; }
.businessCard .num { color: var(--gold-2); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.businessCard h3 { margin: 10px 0; font: 29px/1.08 var(--serif); }
.businessCard p { margin: 0; color: rgba(255,255,255,.64); font-size: 12px; line-height: 1.7; }
.values { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.025); }
.value { position: relative; min-height: 300px; padding: 38px 30px; border-right: 1px solid rgba(255,255,255,.13); transition: background .35s; }
.value:last-child { border-right: 0; }
.value:hover { background: rgba(216,181,107,.08); }
.value b { display: block; color: rgba(216,181,107,.75); font: 58px var(--serif); margin-bottom: 42px; }
.value h3 { margin: 0 0 12px; font: 24px var(--serif); }
.value p { color: rgba(255,255,255,.57); font-size: 12px; line-height: 1.7; }
.quote { position: relative; padding: 80px 74px; background: white; border-top: 3px solid var(--gold); box-shadow: var(--shadow); }
.quote::before { content: "“"; position: absolute; left: 34px; top: 6px; color: rgba(216,181,107,.24); font: 145px var(--serif); }
.quote p { position: relative; margin: 0 0 28px; font: 28px/1.6 var(--serif); }
.quote cite { color: #8b5d2f; font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }

.pageHero { height: 620px; position: relative; display: flex; align-items: end; overflow: hidden; background: var(--navy); color: white; }
.pageHero > img { position: absolute; inset: 0; height: 100%; object-fit: cover; animation: heroZoom 13s cubic-bezier(.2,.7,.2,1) both; }
.pageHero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,14,23,.96), rgba(4,14,23,.58) 50%, rgba(4,14,23,.16)), linear-gradient(0deg, rgba(4,14,23,.82), transparent 60%); }
.pageHero .wrap { position: relative; z-index: 2; padding-bottom: 78px; }
.pageHero .wrap::after { content: ""; position: absolute; left: 0; bottom: 48px; width: 90px; height: 1px; background: var(--gold); }
.pageHero h1 { max-width: 1000px; font-size: clamp(58px, 6.5vw, 94px); line-height: .96; }
.pageHero p:last-child { max-width: 650px; margin: 22px 0 0; color: rgba(255,255,255,.7); line-height: 1.75; }

.cards3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.dark .infoCard { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); color: white; }
.infoCard { position: relative; min-height: 330px; padding: 38px; background: white; border: 1px solid var(--line); overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s; }
.infoCard::after { content: ""; position: absolute; width: 130px; height: 130px; right: -65px; bottom: -65px; border: 1px solid rgba(216,181,107,.3); border-radius: 50%; }
.infoCard:hover { transform: translateY(-10px); border-color: rgba(216,181,107,.55); box-shadow: var(--shadow); }
.infoCard .icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 36px; border: 1px solid var(--gold); color: var(--gold-2); font: 19px var(--serif); }
.infoCard h3 { margin: 0 0 14px; font: 28px var(--serif); }
.infoCard p { color: var(--muted); font-size: 13px; line-height: 1.75; }
.dark .infoCard p { color: rgba(255,255,255,.58); }
.timeline { position: relative; max-width: 920px; margin-left: auto; border-left: 1px solid rgba(183,120,63,.4); }
.moment { position: relative; padding: 0 0 54px 58px; }
.moment::before { content: ""; position: absolute; left: -8px; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 8px rgba(216,181,107,.14); }
.moment b { color: #98602f; font-size: 10px; letter-spacing: .18em; }
.moment h3 { margin: 8px 0 10px; font: 29px var(--serif); }
.moment p { max-width: 700px; color: var(--muted); line-height: 1.75; }
.newsGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.newsCard { overflow: hidden; background: white; border: 1px solid var(--line); box-shadow: 0 14px 35px rgba(4,17,27,.06); transition: transform .4s, box-shadow .4s; }
.newsCard:hover { transform: translateY(-9px); box-shadow: var(--shadow); }
.newsCard img { height: 265px; object-fit: cover; transition: transform .6s; }
.newsCard:hover img { transform: scale(1.055); }
.newsCard > div { padding: 29px; }
.newsCard small { color: #94602f; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.newsCard h3 { margin: 13px 0; font: 26px/1.17 var(--serif); }
.newsCard .lead { margin-bottom: 0; font-size: 13px; }

.contactPanel { position: relative; padding: 58px; background: radial-gradient(circle at 100% 0, var(--navy-3), transparent 42%), var(--navy); color: white; box-shadow: var(--shadow); }
.contactPanel::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(216,181,107,.2); pointer-events: none; }
.contactItem { position: relative; z-index: 1; padding: 21px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.contactItem b { display: block; margin-bottom: 7px; color: var(--gold-2); font: 18px var(--serif); }
.contactItem p, .contactItem a { color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.65; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { color: var(--ink); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; }
.form input, .form textarea, .form select { width: 100%; margin-top: 9px; padding: 16px 14px; border: 1px solid #d8d2c8; outline: none; background: white; color: var(--ink); font: 14px var(--sans); transition: border-color .25s, box-shadow .25s; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(216,181,107,.12); }
.form textarea { min-height: 145px; resize: vertical; }
.full { grid-column: span 2; }
.form button { border: 0; cursor: pointer; }
.notice { display: none; color: #7d552d; }
.notice.show { display: block; }

.cta { position: relative; overflow: hidden; padding: 125px 0; background: linear-gradient(90deg, rgba(4,14,23,.96), rgba(4,14,23,.75)), url('assets/hero-architecture.jpg') center/cover fixed; color: white; text-align: center; }
.cta::before { content: ""; position: absolute; width: 360px; height: 360px; left: -160px; top: -150px; border: 1px solid rgba(216,181,107,.25); border-radius: 50%; }
.cta .wrap { position: relative; }
.cta .kicker { justify-content: center; }
.cta .headline { max-width: 900px; margin: auto; }
.cta p:not(.kicker) { max-width: 620px; margin: 25px auto 32px; color: rgba(255,255,255,.66); line-height: 1.75; }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }
.businessCard.reveal:nth-child(2), .infoCard.reveal:nth-child(2), .newsCard.reveal:nth-child(2) { transition-delay: .1s; }
.businessCard.reveal:nth-child(3), .infoCard.reveal:nth-child(3), .newsCard.reveal:nth-child(3) { transition-delay: .2s; }
.progress { position: fixed; z-index: 100; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); box-shadow: 0 0 12px rgba(216,181,107,.55); }

footer { padding: 82px 0 26px; background: #040d15; color: white; }
.footerGrid { display: grid; grid-template-columns: 1.35fr .65fr 1fr 1fr; gap: 55px; }
.footerLogo img { width: 178px; height: 78px; object-fit: contain; object-position: left; }
.footerGrid p, .footerGrid a { color: rgba(255,255,255,.54); font-size: 12px; line-height: 1.75; }
.footerGrid a { transition: color .25s, transform .25s; }
.footerGrid > div > a:hover { color: var(--gold-2); transform: translateX(4px); }
.footerGrid h4 { margin: 0 0 22px; color: var(--gold-2); font: 19px var(--serif); }
.copyright { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.34); font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }

@keyframes heroZoom { from { transform: scale(1.1); } to { transform: scale(1); } }

@media (max-width: 1050px) {
  .links { position: absolute; display: none; top: 92px; left: 0; right: 0; padding: 22px 36px 30px; background: rgba(7,19,31,.98); border-top: 1px solid rgba(255,255,255,.08); flex-direction: column; align-items: stretch; gap: 0; }
  .links.open { display: flex; }
  .links a { padding: 14px 0; }
  .links a::after { bottom: 7px; }
  .menu { display: block; }
  .nav > .navButton { display: none; }
  .heroStats { grid-template-columns: repeat(2,1fr); }
  .sectionIntro, .storyGrid, .featureSplit, .contactGrid { grid-template-columns: 1fr; gap: 48px; }
  .businessGrid, .newsGrid { grid-template-columns: repeat(2,1fr); }
  .values { grid-template-columns: repeat(2,1fr); }
  .value:nth-child(2) { border-right: 0; }
  .value:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.13); }
  .cards3, .footerGrid { grid-template-columns: 1fr 1fr; }
  .photo img { height: 540px; }
}

@media (max-width: 680px) {
  .wrap { width: min(100% - 34px, 1280px); }
  .nav { height: 78px; }
  .links { top: 78px; padding-inline: 17px; }
  .logo img { width: 145px; height: 58px; }
  .hero { height: 790px; min-height: 0; }
  .heroContent { padding-top: 86px; }
  .hero h1 { font-size: clamp(51px, 14vw, 67px); }
  .heroCopy { font-size: 15px; line-height: 1.7; }
  .heroStats { width: calc(100% - 34px); }
  .heroStat { padding: 15px 13px; }
  .heroStat strong { font-size: 26px; }
  .heroStat span { font-size: 8px; }
  .section { padding: 82px 0; }
  .sectionIntro { margin-bottom: 42px; }
  .headline { font-size: 43px; }
  .pageHero { height: 540px; }
  .pageHero .wrap { padding-bottom: 62px; }
  .pageHero h1 { font-size: 49px; }
  .pageHero .wrap::after { bottom: 38px; }
  .businessGrid, .newsGrid, .cards3, .footerGrid { grid-template-columns: 1fr; }
  .businessCard { min-height: 410px; }
  .values { grid-template-columns: 1fr; }
  .value, .value:nth-child(2) { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); }
  .value b { margin-bottom: 22px; }
  .photo::before { inset: 14px -10px -14px 12px; }
  .photo img { height: 420px; }
  .photo span { left: -8px; bottom: 18px; }
  .quote { padding: 60px 28px 42px; }
  .quote p { font-size: 23px; }
  .contactPanel { padding: 42px 28px; }
  .form { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
  .copyright { flex-direction: column; gap: 9px; }
  .cta { padding: 90px 0; background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
  .reveal { opacity: 1; transform: none; }
}