:root { --ink:#0b2033; --ink2:#173a53; --paper:#f7f5f0; --cream:#efede6; --white:#fff; --gold:#d2ad58; --gold-dark:#947328; --blue:#2f3fa3; --fresh:#4fc4e8; --mute:#6e7b84; --rule:#d7d2c8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; font-size:18px; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.container { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }
.siteHeader { position:sticky; top:0; z-index:40; display:flex; min-height:108px; align-items:center; justify-content:space-between; gap:30px; padding:14px max(24px, calc((100vw - 1180px)/2)); background:rgba(255,255,255,.97); border-bottom:1px solid var(--rule); box-shadow:0 4px 24px rgba(11,32,51,.06); }
.brand { display:flex; align-items:center; gap:14px; min-width:max-content; }
.brandMark { display:block; width:60px; height:74px; overflow:hidden; }
.brandMark img { width:auto; max-width:none; height:74px; object-fit:contain; }
.brandText { display:flex; flex-direction:column; gap:2px; color:var(--ink); font-family:Georgia, serif; letter-spacing:.08em; }
.brandText b:first-child { font-size:1.1rem; font-weight:600; }
.brandText b:last-child { color:var(--ink); font-size:.86rem; letter-spacing:.28em; }
.desktopNav { display:flex; align-items:center; gap:clamp(18px, 2.2vw, 34px); font-size:.92rem; font-weight:600; }
.desktopNav a { padding:12px 9px; border-bottom:3px solid transparent; border-radius:7px 7px 0 0; transition:color .2s, background-color .2s, border-color .2s; }
.desktopNav a:hover { color:var(--ink); border-color:var(--ink); }
.desktopNav a.active { color:var(--ink); background:#eef9fd; border-color:var(--ink); }
.desktopNav a.contactNav { padding:14px 20px; color:white; background:var(--ink); border:0; border-radius:7px; }
.desktopNav a.contactNav:hover { background:var(--ink2); }
.desktopNav a.contactNav.active { box-shadow:inset 0 0 0 2px var(--gold); }
.mobileMenu { display:none; position:relative; }
.mobileMenu summary { cursor:pointer; list-style:none; padding:15px 18px; border:1px solid var(--ink); border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.12em; }
.mobileMenu nav { position:absolute; top:62px; right:0; width:min(86vw, 330px); padding:12px 20px; background:white; border:1px solid var(--rule); border-radius:16px; box-shadow:0 20px 50px rgba(11,32,51,.18); }
.mobileMenu nav a { display:block; padding:16px 4px; border-bottom:1px solid var(--rule); font-weight:650; }
.mobileMenu nav a.active { color:var(--ink); border-bottom-color:var(--ink); }
.mobileMenu nav a.contactNav { margin:10px 0 4px; padding:15px 16px; color:white; background:var(--ink); border:0; border-radius:7px; text-align:center; }
.darkSection { background:var(--ink); color:white; }
.hero { min-height:calc(100vh - 108px); min-height:calc(100svh - 108px); display:flex; align-items:center; background:radial-gradient(circle at 82% 35%, #174b68 0, transparent 34%), var(--ink); }
.hero .container { padding-block:70px; }
.eyebrow,.kicker { margin:0 0 24px; color:var(--gold); font-size:.9rem; font-weight:700; letter-spacing:.2em; }
.hero h1,.section h2 { margin:0; font-family:Georgia, 'Times New Roman', serif; font-weight:400; line-height:1.08; }
.hero h1 { max-width:980px; font-size:clamp(2.8rem, 5vw, 4.9rem); }
.heroCopy { max-width:780px; margin:28px 0; color:#eef1f2; font-size:clamp(1.02rem, 1.6vw, 1.2rem); line-height:1.65; }
.heroActions { display:flex; flex-wrap:wrap; gap:16px; }
.goldButton,.outlineButton,.navyButton,.callButton,.whatsappButton { display:inline-flex; min-height:58px; align-items:center; justify-content:center; padding:0 28px; border-radius:5px; font-weight:700; }
.goldButton { background:var(--gold); color:var(--ink); }
.outlineButton { border:1px solid var(--gold); color:white; }
.section { padding-block:105px; scroll-margin-top:108px; }
.section h2 { font-size:clamp(2.5rem, 5vw, 4.8rem); }
.aboutSection { background:white; }
.aboutSection h2 { font-size:clamp(2.15rem, 3.6vw, 3.45rem); }
.aboutGrid { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start; }
.aboutCopy > p { margin:8px 0 42px; color:#3d5263; font-size:1.2rem; line-height:1.85; }
.aboutLink { display:inline-flex; align-items:center; gap:28px; padding:0 0 14px; border-bottom:4px solid var(--ink); color:var(--ink); font-size:1.35rem; font-weight:700; }
.aboutLink b { font-size:1.6rem; line-height:1; transition:transform .2s; }
.aboutLink:hover b { transform:translateX(5px); }
.ongoingSection { background:var(--paper); }
.sectionHeading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:48px; }
.sectionHeading .kicker { margin-bottom:14px; }
.ongoingGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.ongoingProjectCard { overflow:hidden; background:white; border:1px solid var(--rule); border-radius:20px; box-shadow:0 22px 55px rgba(11,32,51,.09); }
.ongoingPlaceholder { display:flex; min-height:250px; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:30px; background:radial-gradient(circle at 75% 25%, #235b78 0, transparent 38%), var(--ink); color:white; text-align:center; }
.ongoingPlaceholder span { color:var(--gold); font-size:.76rem; font-weight:800; letter-spacing:.2em; }
.ongoingPlaceholder strong { font-family:Georgia, 'Times New Roman', serif; font-size:clamp(1.8rem,3vw,2.7rem); font-weight:400; }
.ongoingContent { display:flex; flex-direction:column; justify-content:center; padding:56px; }
.ongoingProjectCard .ongoingContent { padding:38px; }
.status { color:var(--gold-dark); font-size:.8rem; font-weight:800; letter-spacing:.12em; }
.status i { display:inline-block; width:10px; height:10px; margin-right:10px; border-radius:50%; background:#45aa6b; }
.location { color:var(--mute); }
.ongoingContent h3,.projectBody h3,.contactHead h3 { margin:14px 0; font-family:Georgia, serif; font-weight:400; }
.ongoingContent h3 { font-size:clamp(2.5rem,5vw,4.3rem); }
.ongoingProjectCard .ongoingContent h3 { font-size:clamp(2rem,3.4vw,3.15rem); }
.ongoingContent > p:not(.status,.location) { color:var(--mute); line-height:1.7; }
.ongoingContent dl { margin:30px 0 0; padding-top:24px; border-top:1px solid var(--rule); }
.ongoingContent dt { color:var(--mute); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
.ongoingContent dd { margin:8px 0 0; font-size:1.3rem; font-weight:700; }
.ongoingDetails { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; padding:24px 0 0; border-top:1px solid var(--rule); list-style:none; }
.ongoingDetails li { padding:9px 13px; background:var(--paper); color:#3d5263; border-radius:999px; font-size:.82rem; font-weight:700; }
.projectsSection { background:var(--cream); }
.projectsGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.projectCard { width:100%; overflow:hidden; padding:0; background:white; color:inherit; border:1px solid var(--rule); border-radius:18px; box-shadow:0 12px 32px rgba(11,32,51,.06); font:inherit; text-align:left; cursor:pointer; transition:transform .25s, box-shadow .25s; }
.projectCard:hover { transform:translateY(-5px); box-shadow:0 22px 48px rgba(11,32,51,.13); }
.projectCard:focus-visible { outline:4px solid var(--gold); outline-offset:4px; }
.projectImage { height:270px; overflow:hidden; background:var(--ink); }
.projectImage img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.projectCard:hover img { transform:scale(1.04); }
.projectBody { padding:27px; }
.projectMeta { display:flex; align-items:center; gap:14px; }
.projectMeta span { padding:8px 11px; border:1px solid var(--gold); color:var(--gold-dark); font-size:.64rem; font-weight:800; letter-spacing:.1em; }
.projectBody h3 { min-height:64px; font-size:1.65rem; }
.projectBody ul { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding:20px 0 0; border-top:1px solid var(--rule); list-style:none; }
.projectBody li { padding:7px 10px; background:var(--paper); color:#3d5263; border-radius:999px; font-size:.76rem; }
.projectBody li.projectArrow { margin-left:auto; padding:4px 0 4px 12px; background:transparent; color:var(--ink); border-radius:0; font-size:1.35rem; line-height:1; }
.projectModalBackdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:28px; background:rgba(4,19,31,.78); backdrop-filter:blur(8px); }
.projectModal { position:relative; display:grid; grid-template-columns:1.15fr .85fr; width:min(1020px, 100%); max-height:min(760px, calc(100vh - 56px)); overflow:auto; background:white; border-radius:22px; box-shadow:0 30px 90px rgba(0,0,0,.35); }
.modalClose { position:absolute; top:18px; right:18px; z-index:2; display:grid; width:48px; height:48px; place-items:center; padding:0; background:white; color:var(--ink); border:1px solid var(--rule); border-radius:50%; box-shadow:0 8px 24px rgba(0,0,0,.16); font-size:2rem; line-height:1; cursor:pointer; }
.modalClose:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.modalImage { display:grid; min-height:560px; max-height:min(760px, calc(100vh - 56px)); place-items:center; overflow:hidden; background:#f3f1eb; }
.modalImage img { width:100%; height:100%; max-height:min(760px, calc(100vh - 56px)); object-fit:contain; }
.modalContent { display:flex; flex-direction:column; justify-content:center; padding:64px 48px 48px; }
.modalContent .kicker { margin-bottom:18px; }
.modalContent h2 { margin:0; font-family:Georgia, 'Times New Roman', serif; font-size:clamp(2.4rem,4vw,4.2rem); font-weight:400; line-height:1.08; }
.modalDetails { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; padding-block:24px; border-block:1px solid var(--rule); }
.modalDetails span { padding:10px 14px; background:var(--paper); border-radius:999px; color:#3d5263; font-size:.88rem; font-weight:700; }
.modalNote { margin:26px 0 0; color:var(--mute); line-height:1.7; }
.contactSection { background:radial-gradient(circle at 90% 20%, #183f56 0, transparent 35%), var(--ink); }
.lightHeading h2 { color:white; }
.contactGrid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.contactCard { padding:38px; background:white; color:var(--ink); border-radius:18px; box-shadow:0 18px 45px rgba(0,0,0,.15); }
.contactHead { display:flex; align-items:center; gap:18px; }
.contactHead > span { display:grid; width:58px; height:58px; flex:0 0 58px; place-items:center; border-radius:50%; background:#ddf4fb; color:var(--blue); font-weight:800; }
.contactHead h3 { margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:1.35rem; font-weight:700; }
.contactHead p { margin:0; color:var(--mute); font-size:.88rem; }
.contactDetails { display:grid; gap:24px; margin-block:30px; padding-block:26px; border-block:1px solid var(--rule); }
.contactDetails a { display:flex; flex-direction:column; gap:8px; }
.contactDetails small { color:var(--mute); font-size:.72rem; letter-spacing:.11em; }
.contactDetails strong { font-size:1.03rem; }
.contactActions { display:grid; grid-template-columns:1fr 1.12fr; gap:12px; }
.callButton { border:2px solid var(--ink); }
.whatsappButton { gap:9px; background:#16864a; color:white; }
.whatsappButton svg { width:1.35rem; height:1.35rem; flex:0 0 auto; }
.locationSection { background:var(--ink); }
.locationCard { display:grid; grid-template-columns:.72fr 1.28fr; gap:50px; align-items:center; padding:34px; background:white; color:var(--ink); border:1px solid var(--rule); border-radius:22px; box-shadow:0 20px 52px rgba(0,0,0,.2); }
.locationCopy h2 { font-size:clamp(2.4rem,4vw,4.1rem); }
.locationCopy address { margin:30px 0; font-style:normal; font-weight:700; line-height:1.75; }
.navyButton { width:max-content; background:var(--gold); color:var(--ink); border-radius:999px; }
.locationCard iframe { width:100%; min-height:500px; border:0; border-radius:16px; }
footer { padding:70px 0 26px; background:var(--cream); color:#67747d; }
.footerGrid { display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:60px; }
.footerGrid strong { color:var(--ink); font-family:Georgia, serif; font-size:1.35rem; font-weight:400; }
.footerGrid p { line-height:1.75; }
.footerGrid nav { display:flex; flex-direction:column; gap:14px; }
.copyright { margin-top:54px; padding-top:26px; border-top:1px solid var(--rule); font-size:.8rem; }
.reveal { animation:reveal .7s both; animation-timeline:view(); animation-range:entry 12% cover 30%; }
@keyframes reveal { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@media (max-width:1080px) { .desktopNav { display:none; } .mobileMenu { display:block; } .projectsGrid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) {
  body { font-size:16px; }
  .container { width:min(100% - 30px, 1180px); }
  .siteHeader { min-height:86px; padding-inline:15px; }
  .brand { gap:10px; }
  .brandMark { width:44px; height:54px; }
  .brandMark img { height:54px; }
  .brandText b:first-child { font-size:.86rem; }
  .brandText b:last-child { font-size:.68rem; }
  .hero { min-height:calc(100vh - 86px); min-height:calc(100svh - 86px); }
  .hero .container { padding-block:56px; }
  .hero h1 { font-size:clamp(2.25rem,10.5vw,3.2rem); }
  .heroActions,.heroActions a { width:100%; }
  .section { padding-block:74px; scroll-margin-top:86px; }
  .aboutGrid,.ongoingGrid,.contactGrid,.locationCard,.footerGrid { grid-template-columns:1fr; }
  .aboutGrid { gap:38px; }
  .aboutLink { gap:16px; font-size:1.08rem; }
  .sectionHeading { align-items:flex-start; flex-direction:column; }
  .ongoingPlaceholder { min-height:210px; }
  .ongoingContent { padding:30px; }
  .projectsGrid { grid-template-columns:1fr; }
  .projectImage { height:310px; }
  .projectBody h3 { min-height:auto; }
  .projectModalBackdrop { padding:14px; }
  .projectModal { grid-template-columns:1fr; max-height:calc(100svh - 28px); }
  .modalImage { min-height:0; height:auto; max-height:none; }
  .modalImage img { width:100%; height:auto; max-height:58vh; object-fit:contain; }
  .modalContent { padding:34px 26px; }
  .modalContent h2 { padding-right:36px; }
  .modalClose { top:12px; right:12px; }
  .contactCard { padding:26px; }
  .contactActions { grid-template-columns:1fr; }
  .locationCard { padding:20px; }
  .locationCard iframe { min-height:360px; }
  .footerGrid { gap:34px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }