@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  --navy:#102b43;--navy-deep:#0b2135;--navy-mid:#183c58;
  --teal:#397b77;--teal-bright:#49aaa2;--sand:#d7b47d;--sand-light:#ead0a4;
  --ivory:#f7f5ef;--ivory-2:#efede5;--white:#fff;--ink:#18334a;
  --muted:#596c78;--line:#d6d8d2;--shadow:0 18px 45px rgba(11,33,53,.12);
  --container:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:"Manrope",Arial,sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}
.topbar{background:var(--navy-deep);color:#f7f5ef;font-size:.76rem}
.topbar-inner{min-height:34px;display:flex;align-items:center;gap:28px}
.topbar a:hover{color:var(--sand-light)}
.topbar-motto{margin-left:auto;letter-spacing:.07em}
.topbar i,.site-footer i{font-style:normal;color:var(--sand);padding:0 7px}
.site-header{position:sticky;top:0;z-index:20;background:rgba(247,245,239,.97);border-bottom:1px solid rgba(16,43,67,.1);backdrop-filter:blur(14px)}
.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{width:285px;flex-shrink:0}
.brand img{width:100%;max-height:62px;object-fit:contain;object-position:left center}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.3vw,34px);font-size:.88rem}
.nav-links>a:not(.button){padding:9px 0;position:relative}
.nav-links>a:not(.button):after{content:"";height:2px;position:absolute;left:0;right:100%;bottom:0;background:var(--teal);transition:right .2s}
.nav-links>a:hover:after,.nav-links>a.active:after{right:0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;border:1px solid transparent;border-radius:999px;padding:12px 22px;font:600 .9rem "DM Sans",Arial,sans-serif;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.button:hover{transform:translateY(-2px)}
.button span{font-size:1.12rem}
.button-sand{background:var(--sand);color:var(--navy-deep)}
.button-sand:hover{background:var(--sand-light)}
.button-outline{border-color:var(--teal);color:var(--navy);background:transparent}
.button-outline:hover{background:var(--teal);color:var(--white)}
.menu-toggle{display:none}
.hero{min-height:380px;position:relative;isolation:isolate;overflow:hidden;background:var(--navy-deep);color:var(--ivory)}
.hero:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(100deg,var(--navy-deep) 0%,var(--navy) 43%,rgba(16,43,67,.88) 51%,rgba(16,43,67,.42) 66%,rgba(16,43,67,.08) 82%,transparent 100%)}
.hero-art{position:absolute;z-index:-2;inset:0 0 0 44%;overflow:hidden;background:linear-gradient(145deg,#aab7a9 0%,#d9c39e 42%,#6d8173 100%)}
.hero-sun{position:absolute;right:17%;top:12%;width:110px;aspect-ratio:1;border-radius:50%;background:#f3d9a9;box-shadow:0 0 70px #f0d3a2}
.hero-hill{position:absolute;bottom:-35%;width:120%;height:75%;border-radius:50% 50% 0 0}
.hill-a{left:-12%;background:#6b8378;transform:rotate(-9deg)}
.hill-b{left:25%;bottom:-48%;background:#314f4e;transform:rotate(8deg)}
.hero-building{position:absolute;bottom:9%;left:20%;width:47%;height:56%;background:#d5d0c3;clip-path:polygon(0 20%,60% 0,100% 15%,100% 100%,0 100%);box-shadow:0 20px 40px #132c3c55}
.hero-building:before{content:"";position:absolute;inset:22% 8% 0;background:repeating-linear-gradient(90deg,transparent 0 21%,#8d9a95 21% 23%),repeating-linear-gradient(0deg,transparent 0 24%,#a7b2ad 24% 27%)}
.hero-building span{position:absolute;bottom:0;width:17%;height:37%;background:#6e8b88}
.hero-building span:nth-child(1){left:12%}.hero-building span:nth-child(2){left:42%}.hero-building span:nth-child(3){left:72%}
.survey-pole{position:absolute;right:18%;bottom:0;width:90px;height:85%;filter:drop-shadow(7px 7px 6px #102b4355)}
.survey-head{position:absolute;top:0;left:0;width:90px;height:27px;border-radius:12px 12px 8px 8px;background:var(--navy);border:5px solid var(--sand);z-index:2}
.survey-stem{position:absolute;top:25px;left:41px;height:72%;width:8px;background:#233e4b}
.survey-tripod{position:absolute;bottom:-2px;left:42px;width:5px;height:130px;background:#243b47;transform-origin:top}
.survey-tripod:before,.survey-tripod:after{content:"";position:absolute;top:0;width:5px;height:130px;background:#243b47;transform-origin:top}
.survey-tripod:before{transform:rotate(20deg)}.survey-tripod:after{transform:rotate(-20deg)}
.hero-content{position:relative;z-index:2;padding-top:40px;padding-bottom:36px;max-width:var(--container)}
.hero-content>*{max-width:560px}
.eyebrow{margin:0 0 12px;color:var(--teal);font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase}
.eyebrow-light{color:var(--teal-bright)}
.hero h1{font-size:clamp(2.45rem,4.1vw,4.05rem);line-height:1.08;letter-spacing:-.045em;margin:0 0 16px;color:var(--ivory)}
.hero h1 span{color:var(--sand)}
.hero-copy{font-size:1rem;color:#e2e8e9;max-width:460px;margin:0 0 22px}
.hero-specialties{position:absolute;left:min(56%,650px);bottom:32px;padding-left:16px;border-left:2px solid var(--sand);font-size:.82rem;line-height:1.55;color:white}
/* Separación diagonal inspirada en la referencia visual: banda verde amplia,
   acento arena que nace a media altura y un filo marfil muy sutil. */
   .hero-accent{position:absolute;z-index:1;inset:0;pointer-events:none;opacity:1}
   .hero-accent:before,.hero-accent:after{content:"";position:absolute;inset:0}
   .hero-accent:before{
    background:rgba(57,123,119,.50);
    clip-path:polygon(51.3% 0, 55% 0, 44% 100%, 40.7% 100%);
  }
  .hero-accent:after{
    background:rgba(215,180,125,.65);
    clip-path:polygon(51.3% 0%, 53.5% 0%, 42.5% 100%, 40.7% 100%)
  }

  .service-strip{background:var(--ivory);padding:28px 0 30px}
  .services-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  .service-card{padding:0 28px;border-right:1px solid #c8ccc8;min-height:155px}
  .service-card:first-child{padding-left:10px}
  .service-card:last-child{border-right:0}
  .service-icon{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;transform:rotate(45deg);margin:0 0 14px 5px;font-size:1.5rem;color:white}
  .service-icon i,
  .service-icon svg {
    transform: rotate(-45deg);
  }
  .navy-icon{background:var(--navy)}.teal-icon{background:var(--teal)}.sand-icon{background:var(--sand);color:var(--navy)}
  .service-card h2{font-size:1.08rem;line-height:1.2;margin:0 0 8px;color:var(--navy);max-width:260px}
  .service-card p{font-size:.83rem;color:#425a6a;margin:0 0 9px;max-width:285px}
  .service-card>a{color:#147a77;font-weight:700;font-size:.83rem}
  .service-card>a span{margin-left:8px}
  .about-section{background:linear-gradient(100deg,#f9f7f1,#f0eee7);padding:34px 0;overflow:hidden}
  .about-grid{display:grid;grid-template-columns:.85fr 1fr 1.25fr;align-items:center;gap:30px}
  .about-heading{padding-left:2px}
  .about-heading h2,.projects-heading h2{font-size:clamp(1.65rem,2.4vw,2.3rem);line-height:1.18;letter-spacing:-.035em;margin:0;color:var(--navy)}
  .about-heading h2 span,.projects-heading h2 span{color:#c6a16a}
  .about-copy{border-left:1px solid #cbd0cb;padding-left:30px;color:#354f62;font-size:.87rem}
  .about-copy>p{margin:0 0 18px}
  .values{display:flex;flex-wrap:wrap;gap:18px;font-size:.75rem;color:var(--navy)}
  .values div{display:flex;align-items:center;gap:7px}
  .value-symbol{font-size:1.3rem;color:var(--teal)}
  .survey-visual{height:170px;position:relative;overflow:hidden;background:linear-gradient(135deg,#526c5d,#b8c3a8 45%,#e0c89c);clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
  
  .contour{position:absolute;border:2px solid #e9dfc4;border-radius:48%;transform:rotate(-20deg)}
  .contour-one{width:320px;height:190px;left:10%;top:8%}.contour-two{width:210px;height:120px;left:24%;top:28%}
  .map-label{position:absolute;bottom:14px;right:14px;background:var(--navy);color:var(--ivory);font-size:.62rem;letter-spacing:.15em;padding:8px 10px}
  .projects-section{padding:34px 0;background:var(--ivory)}
  .projects-layout{display:grid;grid-template-columns:.8fr .9fr 1.7fr;gap:26px;align-items:center}
  .projects-heading h2{font-size:1.8rem}
  .projects-intro{border-left:1px solid #cbd0cb;padding-left:28px;font-size:.82rem;color:#425a6a}
  .projects-intro p{margin:0 0 14px}
  .projects-intro .button{padding:8px 16px;font-size:.78rem}
  .project-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .project-card{overflow:hidden;border-radius:5px;background:white;box-shadow:0 5px 15px #102b4310}
  .project-card h3{font-size:.8rem;color:white;background:var(--navy);padding:8px 11px;margin:0}
  .project-card p{font-size:.72rem;padding:7px 11px 10px;margin:0;color:#536675}
  
  .project-art {
    height: 120px;
    position: relative;
    overflow: hidden;
  }

  .project-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
  }

  .project-card:hover .project-art img {
    transform: scale(1.04);
  }
  .art-building{background:linear-gradient(#8caeb9 0 42%,#d2c3a1 42% 54%,#687d68 54%)}
  .art-house{position:absolute;bottom:0;left:17%;width:68%;height:70%;background:#d9d4c8;clip-path:polygon(0 20%,55% 0,100% 16%,100% 100%,0 100%)}
  .art-house:after{content:"";position:absolute;inset:35% 8% 0;background:repeating-linear-gradient(90deg,#718b8b 0 16%,#e0d8c7 16% 21%)}
  .art-survey{background:linear-gradient(#b5c5b3,#718a69)}
  .art-tripod{position:absolute;left:55%;top:15%;width:5px;height:85px;background:var(--navy)}
  .art-tripod:before,.art-tripod:after{content:"";position:absolute;top:0;width:3px;height:90px;background:var(--navy);transform-origin:top}
  .art-tripod:before{transform:rotate(18deg)}.art-tripod:after{transform:rotate(-18deg)}
  .art-person{position:absolute;left:35%;bottom:0;width:20px;height:52px;border-radius:9px 9px 0 0;background:var(--teal)}
  .art-person:before{content:"";position:absolute;top:-13px;left:3px;width:15px;height:15px;border-radius:50%;background:#c89a70;border-top:5px solid var(--sand)}
  .art-map{background:linear-gradient(145deg,#b5c7a5,#e0d4b4)}
  .map-blocks{position:absolute;inset:-20px;background:repeating-linear-gradient(20deg,transparent 0 22px,#f6f0df 23px 25px),repeating-linear-gradient(110deg,transparent 0 35px,#557e73 36px 38px);transform:rotate(-8deg)}
  .project-note{grid-column:1/-1;margin:-10px 0 0;color:#7a8589;font-size:.7rem}
  .contact-section{background:var(--navy);color:var(--ivory);padding:54px 0}
  .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;align-items:center}
  .contact-section h2{font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.12;margin:0 0 16px;color:white;letter-spacing:-.04em}
  .contact-section>div>div>p:not(.eyebrow){color:#cbd7dc;max-width:420px}
  .contact-email{display:inline-block;color:var(--sand-light);font-weight:700;margin-top:12px}
  .contact-location{font-size:.85rem}
  #contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--ivory);padding:24px;border-radius:12px;color:var(--ink)}
  .field{display:flex;flex-direction:column;gap:6px}.field-full{grid-column:1/-1}
  label{font-size:.78rem;font-weight:700;color:var(--navy)}
  input,select,textarea{font:inherit;font-size:.88rem;padding:11px 12px;border:1px solid #d1d8d6;border-radius:6px;background:white;color:var(--ink);width:100%}
  input:focus,select:focus,textarea:focus{outline:2px solid #397b7733;border-color:var(--teal)}
  textarea{min-height:95px;resize:vertical}
  .submit-button{width:100%;border:0}
  .form-note{grid-column:1/-1;margin:0;color:#65727a;font-size:.72rem}
  .site-footer{background:#091d2e;color:#dbe1e1;padding:18px 0}
  .footer-inner{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
  .footer-brand{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:700;color:white}
  .footer-brand img{width:38px;height:34px;object-fit:contain;filter:grayscale(1) brightness(0) invert(1)}
  .footer-brand b{font-weight:400}
  .footer-inner>p{font-size:.72rem;letter-spacing:.16em;margin:0;border-left:1px solid #496171;padding-left:30px}
  .copyright{margin-left:auto;font-size:.7rem;color:#b9c5ca}
  @media(max-width:1000px){
   .container{width:min(var(--container),calc(100% - 36px))}
   .brand{width:235px}.nav-links{gap:15px;font-size:.82rem}.nav-cta{padding:10px 14px;gap:8px}
   .hero-specialties{left:60%;font-size:.75rem}.services-grid{grid-template-columns:repeat(2,1fr);row-gap:25px}
   .service-card:nth-child(2){border-right:0}.service-card:nth-child(3){padding-left:10px}
   .about-grid{grid-template-columns:.8fr 1fr}.survey-visual{grid-column:1/-1;clip-path:none}
   .projects-layout{grid-template-columns:1fr 1fr}.project-cards{grid-column:1/-1}.projects-intro{border-left:0;padding-left:0}
 }
 @media(max-width:700px){
   .container{width:calc(100% - 32px)}
   .topbar-inner{min-height:30px;justify-content:center;gap:14px;font-size:.68rem}.topbar-motto{display:none}
   .nav-wrap{min-height:68px;flex-wrap:wrap;gap:8px}.brand{width:210px}.brand img{max-height:54px}
   .menu-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid #ccd5d4;border-radius:6px;background:transparent;padding:9px 12px;color:var(--navy);font-weight:700}
   .nav-links{display:none;flex-basis:100%;padding:5px 0 16px;align-items:stretch;flex-direction:column;gap:3px}
   .nav-links.is-open{display:flex}.nav-links>a:not(.button){padding:10px 5px}.nav-cta{align-self:flex-start;margin-top:5px}
   .hero{min-height:470px}.hero-art{left:0;opacity:.42}.hero:before{background:linear-gradient(90deg,var(--navy-deep) 0%,rgba(11,33,53,.94) 48%,rgba(11,33,53,.62) 100%)}
   .hero-content{padding-top:48px;padding-bottom:38px}.hero h1{font-size:clamp(2.45rem,10vw,3.5rem)}.hero-copy{font-size:.94rem;max-width:440px}
   .hero-specialties{position:relative;left:auto;bottom:auto;margin-top:24px;font-size:.76rem}
   .hero-accent:before{clip-path:polygon(84% 0,100% 0,91% 100%,75% 100%);background:rgba(57,123,119,.62)}
   .hero-accent:after{clip-path:polygon(84% 55%,90% 55%,81% 100%,75% 100%);background:rgba(215,180,125,.94)}
   .hero-accent .accent-ivory{clip-path:polygon(99.1% 0,99.35% 0,90.35% 100%,90.1% 100%);background:rgba(247,245,239,.82)}
   .service-strip{padding:28px 0}.services-grid{grid-template-columns:1fr;gap:0}
   .service-card,.service-card:first-child,.service-card:nth-child(3){padding:18px 4px;border-right:0;border-bottom:1px solid #c8ccc8;min-height:0}
   .service-card:last-child{border-bottom:0}.service-icon{margin-bottom:12px}
   .about-grid{grid-template-columns:1fr;gap:18px}.about-copy{padding-left:18px}.survey-visual{grid-column:auto;height:150px}
   .projects-layout{grid-template-columns:1fr;gap:18px}.projects-intro{padding:0}.project-cards{grid-column:auto;grid-template-columns:1fr;gap:12px}.project-art{height:145px}
   .project-note{grid-column:auto;margin:0}
   .contact-grid{grid-template-columns:1fr;gap:28px}#contact-form{padding:18px}
   .footer-inner{gap:12px}.footer-inner>p{border-left:0;padding-left:0}.copyright{margin-left:0;flex-basis:100%}
   .hero-accent:before, .hero-accent:after{
    display: none;
  }
}
@media(max-width:420px){.topbar-inner span{display:none}.topbar-inner a{display:block}.brand{width:185px}.hero h1{font-size:2.35rem}.values{gap:12px}#contact-form{grid-template-columns:1fr}.field-full{grid-column:auto}}
.hero-image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.survey-visual {
  position: relative;
  overflow: hidden;
}

.survey-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Marco diagonal color arena */
.survey-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--sand);
  opacity: 0.9;
  clip-path: polygon(
    14% 0,
    20% 0,
    6% 100%,
    0 100%
  );
}