/* =========================================================
   NAGE — North America Geomatics Experts Inc.
   Corporate / photography-driven layout
   ========================================================= */
:root{
  --green:      #1F5C3E;   /* deep geomatics green, primary brand */
  --green-dark: #143F2A;
  --green-pale: #E7F0EA;
  --orange:     #E0752A;   /* secondary accent */
  --orange-dim: #BD5F1F;
  --ink:        #1B211D;   /* near-black, text */
  --ink-70:     rgba(27,33,29,0.7);
  --ink-45:     rgba(27,33,29,0.45);
  --paper:      #FFFFFF;
  --paper-2:    #F4F6F4;
  --line:       #E1E6E2;
  --line-dark:  rgba(255,255,255,0.16);

  --font-head:  'Manrope', 'Poppins', sans-serif;
  --font-body:  'Inter', sans-serif;

  --max: 1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-head);
  margin:0;
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.12;
}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

/* -------------------- placeholder photo tiles -------------------- */
/* Swap the background-image on .ph-* classes for real project photos
   when available. Sized and cropped the way a real photo would sit. */
.ph{
  position:relative;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.ph::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(20,63,42,0.85), rgba(20,63,42,0.35));
}
.ph.tone-orange::after{background:linear-gradient(160deg, rgba(189,95,31,0.82), rgba(27,33,29,0.4));}
.ph.tone-ink::after{background:linear-gradient(160deg, rgba(27,33,29,0.85), rgba(27,33,29,0.35));}
.ph-1{background-image:repeating-linear-gradient(115deg, #1F5C3E 0 40px, #24693F 40px 80px);}
.ph-2{background-image:repeating-linear-gradient(115deg, #BD5F1F 0 40px, #D06B27 40px 80px);}
.ph-3{background-image:repeating-linear-gradient(115deg, #143F2A 0 40px, #1B4E33 40px 80px);}
.ph-4{background-image:repeating-linear-gradient(115deg, #2E4034 0 40px, #37503F 40px 80px);}
.ph-icon{
  position:relative; z-index:2;
  color:#fff; opacity:0.9;
}

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  background:var(--paper);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; padding-bottom:18px;
  gap:24px;
}
.brand{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--font-head);
  font-weight:800;
  font-size:20px;
  text-decoration:none;
  color:var(--ink);
}
.brand .mark{color:var(--green);}
nav.primary{display:flex; align-items:center; gap:30px;}
nav.primary a{
  text-decoration:none;
  font-size:14.5px;
  font-weight:600;
  color:var(--ink-70);
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
nav.primary a:hover, nav.primary a[aria-current="page"]{
  color:var(--ink);
  border-color:var(--orange);
}
.nav-cta{
  background:var(--green);
  color:#fff !important;
  padding:11px 20px !important;
  border-radius:3px;
  border-bottom:none !important;
}
.nav-cta:hover{background:var(--green-dark);}
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line); color:var(--ink);
  padding:8px 10px; border-radius:3px;
}
@media (max-width: 900px){
  nav.primary{
    position:fixed; inset:62px 0 0 0;
    background:var(--paper);
    flex-direction:column; align-items:flex-start;
    padding:24px 32px; gap:18px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    border-top:1px solid var(--line);
  }
  nav.primary.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .nav-toggle{display:block;}
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  font-size:14.5px; font-weight:700;
  text-decoration:none;
  border-radius:3px;
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--orange); color:#fff;}
.btn-primary:hover{background:var(--orange-dim);}
.btn-green{background:var(--green); color:#fff;}
.btn-green:hover{background:var(--green-dark);}
.btn-outline{border-color:#fff; color:#fff;}
.btn-outline:hover{background:#fff; color:var(--ink);}
.btn-outline-ink{border-color:var(--ink); color:var(--ink);}
.btn-outline-ink:hover{background:var(--ink); color:#fff;}
.btn-text{
  color:var(--green); font-weight:700; font-size:14.5px;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.btn-text:hover{color:var(--green-dark);}

/* =========================================================
   Full-bleed photo hero (GeoVerra-style)
   ========================================================= */
.hero-photo{
  position:relative;
  min-height:640px;
  display:flex; align-items:flex-end;
  color:#fff;
}
.hero-photo .wrap{
  position:relative; z-index:2;
  padding-bottom:72px; padding-top:120px;
}
.hero-photo h1{
  font-size:clamp(38px, 5.4vw, 64px);
  max-width:16ch;
}
.hero-photo .lede{
  margin-top:20px;
  font-size:18px;
  max-width:48ch;
  color:rgba(255,255,255,0.88);
}
.hero-photo .cta-row{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap;}
.scroll-cue{
  position:absolute; left:32px; bottom:28px; z-index:2;
  font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:rgba(255,255,255,0.75);
  display:flex; align-items:center; gap:8px;
}
.scroll-cue::after{content:""; width:26px; height:1px; background:rgba(255,255,255,0.6);}

/* =========================================================
   Intro split (GeoVerra "Boots on the ground" pattern)
   ========================================================= */
.intro-split{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:56px;
  align-items:start;
}
.intro-split .kicker{
  font-size:13px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--orange);
  margin-bottom:16px;
}
.intro-split h2{font-size:clamp(28px, 3.4vw, 38px);}
.intro-split .body p{
  color:var(--ink-70); font-size:16.5px; max-width:56ch;
}
.intro-split .body p + p{margin-top:16px;}
.intro-split .body .btn-text{margin-top:24px;}
@media (max-width:860px){
  .intro-split{grid-template-columns:1fr; padding:56px 0;}
}

/* =========================================================
   Sector tiles (photo cards)
   ========================================================= */
.sector-tiles{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2px;
  background:var(--ink);
}
.sector-tile{
  aspect-ratio:4/3;
  position:relative;
  display:flex; align-items:flex-end;
  padding:26px;
  color:#fff;
  text-decoration:none;
}
.sector-tile h3{
  position:relative; z-index:2;
  font-size:20px;
}
.sector-tile p{
  position:relative; z-index:2;
  font-size:13.5px;
  color:rgba(255,255,255,0.85);
  margin-top:6px;
}
.sector-tile .arrow{
  position:absolute; top:22px; right:22px; z-index:2;
  width:34px; height:34px;
  border:1px solid rgba(255,255,255,0.5);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  transition:background .15s ease;
}
.sector-tile:hover .arrow{background:rgba(255,255,255,0.18);}
@media (max-width:860px){
  .sector-tiles{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .sector-tiles{grid-template-columns:1fr;}
}

/* =========================================================
   Section basics
   ========================================================= */
section{padding:88px 0;}
.section-tight{padding:56px 0;}
.section-head{
  max-width:640px;
  margin-bottom:48px;
}
.section-head .kicker{
  font-size:13px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--orange); margin-bottom:14px;
}
.section-head h2{font-size:clamp(28px, 3.4vw, 38px);}
.section-head .desc{margin-top:16px; color:var(--ink-70); font-size:16px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

.panel-alt{background:var(--paper-2);}
.panel-green{background:var(--green); color:#fff;}
.panel-green .section-head .desc{color:rgba(255,255,255,0.85);}
.panel-green .kicker{color:#fff; opacity:0.85;}
.panel-ink{background:var(--ink); color:#fff;}
.panel-ink .section-head .desc{color:rgba(255,255,255,0.75);}

/* =========================================================
   Services: equipped-for-anything list (GeoVerra style)
   ========================================================= */
.services-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
}
.services-list li{
  display:flex; align-items:flex-start; gap:16px;
  padding:18px 0;
  border-top:1px solid var(--line);
}
.services-list li:last-child{border-bottom:1px solid var(--line);}
.services-list .num{
  font-family:var(--font-head);
  font-weight:800;
  color:var(--orange);
  font-size:14px;
  padding-top:2px;
}
.services-list h4{font-size:17px;}
.services-list p{font-size:14.5px; color:var(--ink-70); margin-top:6px;}
@media (max-width:860px){.services-split{grid-template-columns:1fr;}}

/* =========================================================
   Project / case-study grid (Caltech resources pattern)
   ========================================================= */
.resource-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:26px;
}
.resource-card{text-decoration:none; color:var(--ink); display:block;}
.resource-card .thumb{
  aspect-ratio:4/3;
  border-radius:4px;
  margin-bottom:16px;
}
.resource-card .cat{
  font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--orange);
}
.resource-card h4{font-size:16px; margin-top:8px;}
.resource-card .read{
  margin-top:10px; font-size:13.5px; font-weight:700; color:var(--green);
}
@media (max-width:980px){.resource-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.resource-grid{grid-template-columns:1fr;}}

/* Bigger project grid variant (3-up, larger photos) */
.project-grid-big{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.project-card-big{
  text-decoration:none; color:inherit;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  display:block;
}
.project-card-big .thumb{aspect-ratio:16/11;}
.project-card-big .body{padding:22px 22px 26px;}
.project-card-big .cat{
  font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--orange);
}
.project-card-big h3{font-size:19px; margin-top:8px;}
.project-card-big p{font-size:14.5px; color:var(--ink-70); margin-top:8px;}
.project-card-big .loc{margin-top:14px; font-size:13px; color:var(--ink-70); font-weight:600;}
@media (max-width:940px){.project-grid-big{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.project-grid-big{grid-template-columns:1fr;}}

/* =========================================================
   Testimonial slab (GeoVerra style, one big quote)
   ========================================================= */
.testimonial-slab{
  background:var(--green);
  color:#fff;
  padding:80px 0;
}
.testimonial-slab .wrap{max-width:820px;}
.testimonial-slab q{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(22px, 2.6vw, 30px);
  line-height:1.35;
  quotes:none;
  display:block;
}
.testimonial-slab .who{
  margin-top:26px;
  font-size:14.5px;
  color:rgba(255,255,255,0.85);
}
.testimonial-nav{
  margin-top:32px;
  display:flex; gap:10px;
}
.testimonial-nav .dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.35);
}
.testimonial-nav .dot.active{background:#fff;}

/* =========================================================
   About / credentials
   ========================================================= */
.about-grid{display:grid; grid-template-columns:0.95fr 1.05fr; gap:56px;}
.stat-row{display:flex; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:36px;}
.stat-row .stat{flex:1 1 150px; padding:20px 20px 0 0;}
.stat-row .num{font-family:var(--font-head); font-weight:800; font-size:30px; color:var(--green);}
.stat-row .lbl{font-size:13.5px; color:var(--ink-70); margin-top:4px;}
.credential-list li{
  padding:16px 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:130px 1fr; gap:16px;
}
.credential-list li:last-child{border-bottom:1px solid var(--line);}
.credential-list .k{font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--orange); padding-top:2px;}
.credential-list .v{font-size:14.5px;}
.credential-list .v small{display:block; color:var(--ink-70); margin-top:4px;}
@media (max-width:820px){.about-grid{grid-template-columns:1fr;}}

/* =========================================================
   Equipment rental table
   ========================================================= */
.equip-table{width:100%; border-collapse:collapse; font-size:14.5px;}
.equip-table th, .equip-table td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line);}
.equip-table th{font-weight:700; font-size:12.5px; color:var(--ink-70); border-bottom:2px solid var(--ink);}

/* =========================================================
   Contact / form
   ========================================================= */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px;}
.contact-info li{padding:18px 0; border-top:1px solid var(--line);}
.contact-info li:last-child{border-bottom:1px solid var(--line);}
.contact-info .k{font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--orange); display:block; margin-bottom:6px;}
.contact-info a{text-decoration:none; font-size:16px;}
.contact-info a:hover{color:var(--green);}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-grid .full{grid-column:1/-1;}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-70); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.03em;}
.field input, .field select, .field textarea{
  width:100%; background:var(--paper-2); border:1px solid var(--line); border-radius:4px;
  padding:12px 14px; font-family:var(--font-body); font-size:14.5px; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--green); outline:none;}
.field textarea{resize:vertical; min-height:110px;}
.form-note{margin-top:16px; font-size:12.5px; color:var(--ink-70);}
.form-status{margin-top:14px; font-size:13.5px; display:none; color:var(--green); font-weight:600;}
.form-status.show{display:block;}

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{background:var(--orange); color:#fff;}
.cta-band .wrap{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
  padding:56px 0;
}
.cta-band h2{font-size:28px;}
.cta-band p{margin-top:8px; color:rgba(255,255,255,0.9);}

/* =========================================================
   Page intro band (non-home pages)
   ========================================================= */
.page-intro{
  position:relative;
  min-height:340px;
  display:flex; align-items:flex-end;
  color:#fff;
}
.page-intro .wrap{position:relative; z-index:2; padding-bottom:52px; padding-top:100px;}
.page-intro .kicker{font-size:13px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:#fff; opacity:0.85; margin-bottom:14px;}
.page-intro h1{font-size:clamp(32px,4vw,48px); max-width:22ch;}
.page-intro .desc{margin-top:16px; color:rgba(255,255,255,0.85); max-width:58ch; font-size:16px;}

/* =========================================================
   Footer (GeoVerra style: big wordmark + nav columns)
   ========================================================= */
footer{background:var(--ink); color:rgba(255,255,255,0.72);}
footer .wrap{padding-top:64px; padding-bottom:36px;}
.footer-word{
  font-family:var(--font-head); font-weight:800; font-size:30px; color:#fff;
  margin-bottom:44px;
}
.footer-word .mark{color:var(--orange);}
.footer-cols{display:grid; grid-template-columns:1.3fr 0.7fr 0.7fr 0.9fr; gap:32px;}
footer h5{font-size:12.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#fff; margin-bottom:16px;}
footer li{margin-bottom:10px; font-size:14.5px;}
footer a{text-decoration:none;}
footer a:hover{color:var(--orange);}
.footer-tag{margin-top:8px; font-size:14px; max-width:34ch;}
.footer-bottom{
  border-top:1px solid var(--line-dark);
  padding:20px 32px;
  font-size:12.5px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
@media (max-width:820px){.footer-cols{grid-template-columns:1fr 1fr;}}

/* =========================================================
   Service pillars (Caltech-style: two-tone wordmark, bullet list, colored CTA)
   ========================================================= */
.pillar-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:36px;
}
.pillar-card{
  background:var(--paper-2);
  border-radius:8px;
  padding:34px 30px 32px;
}
.pillar-card .word{
  font-family:var(--font-head);
  font-weight:800;
  font-size:26px;
  line-height:1.05;
  color:var(--ink);
}
.pillar-card .word span{display:block; font-size:26px;}
.pillar-card.tone-blue .word span{color:#2E93C7;}
.pillar-card.tone-green .word span{color:var(--green);}
.pillar-card.tone-orange .word span{color:var(--orange);}
.pillar-card p.intro{margin-top:16px; font-size:14.5px; color:var(--ink-70);}
.pillar-card ul{margin-top:18px;}
.pillar-card li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px;
  padding:6px 0;
}
.pillar-card li::before{
  content:"+";
  font-weight:800;
  color:var(--orange);
  line-height:1.4;
}
.pillar-card .btn{margin-top:22px;}
@media (max-width:940px){.pillar-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.pillar-grid{grid-template-columns:1fr;}}

/* =========================================================
   Misc
   ========================================================= */
.text-center{text-align:center;}
.mt-large{margin-top:64px;}