/* ==========================================================================
   GEOGIS SERVICES — DESIGN SYSTEM STYLESHEET
   Single source of truth for colors, type, spacing, components.
   Sections: 1. Tokens 2. Reset 3. Layout 4. Type 5. Buttons 6. Nav
   7. Hero 8. Sections/Cards 9. Forms 10. Footer 11. Utilities 12. Motion
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  --color-obsidian:#0a0a09;
  --color-graphite:#161412;
  --color-brand:#E2711D;
  --color-brand-dark:#B8590F;
  --color-mineral:#F0B429;
  --color-limestone:#161412;
  --color-white:#FFFFFF;
  --color-text:#F5F1E8;
  --color-text-muted:#A79E90;
  --color-border:#2E2A22;
  --color-success:#4CA771;
  --color-warning:#F0B429;
  --color-error:#E2664B;

  --font-sans:'Manrope',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --text-xs:12px; --text-sm:14px; --text-base:17px; --text-lg:20px;
  --text-h4:22px; --text-h3:28px; --text-h2:40px; --text-h1:52px; --text-display:64px;

  --leading-tight:1.05; --leading-heading:1.15; --leading-body:1.65; --leading-small:1.5;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:40px; --space-8:48px; --space-9:64px; --space-10:80px;
  --space-11:96px; --space-12:120px; --space-13:160px;

  --radius-sm:4px; --radius-card:6px; --radius-panel:8px;

  --shadow-floating:0 8px 30px rgba(0,0,0,0.35);
  --shadow-dropdown:0 12px 40px rgba(0,0,0,0.45);

  --container-max:1440px; --content-max:760px;
  --gutter-desktop:80px; --gutter-tablet:48px; --gutter-mobile:20px;

  --duration-fast:150ms; --duration-normal:220ms; --duration-slow:500ms;
  --ease-standard:cubic-bezier(0.2,0,0,1);

  --bg:#0a0a09;
  --bg-panel:#161412;
  --text:var(--color-text);
  --text-muted:var(--color-text-muted);
  --border:var(--color-border);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  font-size:var(--text-base);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block; height:auto;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
input,textarea,select{font-family:inherit; font-size:inherit;}
h1,h2,h3,h4,h5{font-weight:700; line-height:var(--leading-heading); letter-spacing:-0.01em;}

/* Visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--color-mineral); outline-offset:3px;
}

/* Skip link for keyboard users */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--color-brand); color:#fff;
  padding:12px 20px; z-index:1000; border-radius:0 0 6px 0;
}
.skip-link:focus{left:0;}

/* ---------- 3. LAYOUT ---------- */
.container{max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter-desktop);}
@media(max-width:1023px){.container{padding:0 var(--gutter-tablet);}}
@media(max-width:767px){.container{padding:0 var(--gutter-mobile);}}
.content-width{max-width:var(--content-max);}
section{padding:var(--space-12) 0;}
@media(max-width:1023px){section{padding:var(--space-11) 0;}}
@media(max-width:767px){section{padding:var(--space-9) 0;}}
.section-bordered{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-panel);}

/* ---------- 4. TYPE ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; font-weight:500; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--color-brand); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--color-brand);}
.eyebrow.on-dark{color:var(--color-mineral);}
.eyebrow.on-dark::before{background:var(--color-mineral);}
.mono{font-family:var(--font-mono);}
h1{font-size:var(--text-h1);}
h2{font-size:var(--text-h2);}
h3{font-size:var(--text-h3);}
h4{font-size:var(--text-h4);}
p.lead{font-size:var(--text-lg); color:var(--text-muted);}
.text-muted{color:var(--text-muted);}
@media(max-width:767px){
  h1{font-size:36px;} h2{font-size:30px;} h3{font-size:23px;}
}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; height:50px; padding:0 22px;
  border-radius:var(--radius-sm); font-weight:600; font-size:15px; text-decoration:none;
  transition:all var(--duration-normal) var(--ease-standard); white-space:nowrap; border:none;
}
.btn-primary{background:var(--color-brand); color:#fff;}
.btn-primary:hover{background:var(--color-brand-dark); transform:translateY(-1px);}
.btn-primary .arr{transition:transform var(--duration-normal) var(--ease-standard); display:inline-block;}
.btn-primary:hover .arr{transform:translateX(4px);}
.btn-secondary{background:transparent; color:var(--text); border:1px solid var(--border);}
.btn-secondary:hover{border-color:var(--color-brand); color:var(--color-brand);}
.btn-on-dark{border-color:#454c4d; color:#fff;}
.btn-on-dark:hover{border-color:var(--color-mineral); color:var(--color-mineral);}
.btn[disabled]{opacity:0.5; cursor:not-allowed; pointer-events:none;}
.btn-block{width:100%; justify-content:center;}

/* ---------- 6. NAVIGATION ---------- */
header.site-header{
  position:sticky; top:0; z-index:100; background:rgba(10,10,9,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:80px;}
.brand{display:flex; align-items:center; text-decoration:none;}
.brand img{height:42px; width:auto; background:#F5F1E8; border-radius:5px; padding:6px 10px;}
nav.primary-nav{display:flex; gap:36px; font-size:14.5px; font-weight:600;}
nav.primary-nav a{color:var(--text-muted); position:relative; padding:6px 0;}
nav.primary-nav a:hover,nav.primary-nav a[aria-current="page"]{color:var(--text);}
nav.primary-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--color-brand);
}
.nav-right{display:flex; align-items:center; gap:16px;}
.nav-toggle{
  display:none; background:none; border:none; width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:var(--radius-sm);
}
.nav-toggle:hover{background:var(--bg-panel);}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:""; display:block; width:22px; height:2px; background:var(--text); position:relative; transition:all var(--duration-normal);
}
.nav-toggle span::before{position:absolute; top:-7px;}
.nav-toggle span::after{position:absolute; top:7px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg); top:0;}
.nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg); top:0;}

.mobile-menu{
  display:none; position:fixed; inset:80px 0 0 0; background:var(--bg); z-index:99; overflow-y:auto;
  padding:var(--space-6) var(--gutter-mobile) 100px;
}
.mobile-menu.is-open{display:block;}
.mobile-menu a{
  display:block; padding:16px 0; font-size:20px; font-weight:700; border-bottom:1px solid var(--border);
}
.mobile-menu .mm-sub{padding-left:16px;}
.mobile-menu .mm-sub a{font-size:15px; font-weight:600; color:var(--text-muted); padding:12px 0; border-bottom:none;}
.mobile-menu .btn{margin-top:24px;}

@media(max-width:1023px){
  nav.primary-nav{display:none;}
  .nav-toggle{display:flex;}
  .nav-right .btn-primary span.btn-label{display:none;}
}
@media(min-width:1024px){.mobile-menu{display:none !important;}}

/* breadcrumb */
.breadcrumb{font-family:var(--font-mono); font-size:12px; color:var(--text-muted); padding:20px 0 0;}
.breadcrumb a{color:var(--text-muted);}
.breadcrumb a:hover{color:var(--color-brand);}

/* ---------- 7. HERO ---------- */
.hero{padding:64px 0 0;}
.hero-grid{display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:center;}
.hero.hero-narrow .hero-grid{grid-template-columns:1fr; max-width:var(--content-max);}
@media(max-width:1023px){.hero-grid{grid-template-columns:1fr; gap:36px;}}
.hero h1{margin:18px 0 20px;}
.hero p.lead{margin-bottom:32px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-media{position:relative; border-radius:var(--radius-panel); overflow:hidden; box-shadow:var(--shadow-floating);}
.hero-media img{width:100%; height:560px; object-fit:cover;}
@media(max-width:767px){.hero-media img{height:320px;}}
.tech-overlay{
  position:absolute; right:20px; bottom:20px; background:rgba(17,21,22,0.82); backdrop-filter:blur(6px);
  color:#fff; padding:18px 20px; border-radius:var(--radius-sm); min-width:190px;
  font-family:var(--font-mono); font-size:11.5px; line-height:1.9;
}
.tech-overlay .t-eyebrow{color:var(--color-mineral); letter-spacing:0.1em; margin-bottom:6px; font-size:10px;}
.tech-overlay .t-row b{display:block; color:#fff; font-size:13px; margin-bottom:8px;}
.tech-overlay .t-row span{color:#b9c0bc; display:block; margin-bottom:8px;}
@media(max-width:600px){.tech-overlay{position:static; margin-top:12px;}}

/* ---------- 8. SECTIONS / CARDS ---------- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.two-col.align-start{align-items:start;}
@media(max-width:1023px){.two-col{grid-template-columns:1fr; gap:36px;}}

/* editorial service row */
.service-row{
  display:grid; grid-template-columns:80px 1fr; gap:24px; padding:36px 0; border-top:1px solid var(--border);
  align-items:baseline;
}
.service-row:last-child{border-bottom:1px solid var(--border);}
.service-row .num{font-family:var(--font-mono); font-size:14px; color:var(--color-brand); font-weight:500;}
.service-row h3{font-size:23px; margin-bottom:8px;}
.service-row .methods{font-family:var(--font-mono); font-size:13px; color:var(--text-muted);}
.service-row p{color:var(--text-muted); margin-top:8px; max-width:620px; font-size:15.5px;}
.service-row .row-link{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-weight:600; font-size:14px; color:var(--color-brand);}
.service-row .row-link .arr{transition:transform var(--duration-normal);}
.service-row .row-link:hover .arr{transform:translateX(4px);}
@media(max-width:600px){.service-row{grid-template-columns:1fr; gap:8px;}}

/* pillars */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-panel); overflow:hidden;}
.pillar{background:var(--bg-panel); padding:32px 26px;}
.pillar .idx{font-family:var(--font-mono); font-size:12px; color:var(--color-brand); margin-bottom:14px;}
.pillar h4{font-size:17px; margin-bottom:8px;}
.pillar p{font-size:14px; color:var(--text-muted);}
@media(max-width:900px){.pillars{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.pillars{grid-template-columns:1fr;}}

/* workflow */
.workflow{display:flex; flex-direction:column;}
.wf-step{display:grid; grid-template-columns:70px 1fr; gap:22px; padding:22px 0; border-top:1px solid var(--border);}
.wf-step:last-child{border-bottom:1px solid var(--border);}
.wf-step .wnum{font-family:var(--font-mono); color:var(--color-brand); font-size:14px;}
.wf-step h5{font-size:16.5px; margin-bottom:4px;}
.wf-step p{color:var(--text-muted); font-size:14.5px;}

/* dark technology section */
.section-dark{background:var(--color-obsidian); color:#EDEAE2;}
.section-dark h2{color:#fff;}
.tech-gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.tech-gallery figure{margin:0; border-radius:var(--radius-card); overflow:hidden; background:#1b2223;}
.tech-gallery img{width:100%; height:100%; object-fit:cover; aspect-ratio:1;}
.tech-gallery figcaption{font-family:var(--font-mono); font-size:10.5px; color:#9aa3a0; padding:8px 2px 0;}
@media(max-width:900px){.tech-gallery{grid-template-columns:repeat(2,1fr);}}
.tech-flow{
  margin-top:56px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:13px; color:#b9c0bc;
}
.tech-flow .node{border:1px solid #3a4142; padding:10px 16px; border-radius:var(--radius-sm);}
.tech-flow .arrow{color:var(--color-mineral);}

/* evidence / field cards */
.evidence-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:900px){.evidence-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.evidence-grid{grid-template-columns:1fr;}}
.evidence-card{border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; background:var(--bg-panel); transition:border-color var(--duration-normal);}
.evidence-card:hover{border-color:var(--color-brand);}
.evidence-card .ev-img{width:100%; aspect-ratio:16/10; object-fit:cover;}
.evidence-card .ev-body{padding:18px 20px;}
.evidence-card .ev-eyebrow{font-family:var(--font-mono); font-size:10.5px; color:var(--color-brand); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px;}
.evidence-card h4{font-size:16px; margin-bottom:6px;}
.evidence-card .ev-loc{font-family:var(--font-mono); font-size:12px; color:var(--text-muted);}

/* generic content image */
.figure-card{border-radius:var(--radius-card); overflow:hidden; border:1px solid var(--border);}
.figure-card img{width:100%; object-fit:cover;}
.figure-caption{font-size:13px; color:var(--text-muted); margin-top:10px;}

/* credibility */
.cred-list{list-style:none;}
.cred-list li{display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--border); font-size:15px;}
.cred-list li:last-child{border-bottom:1px solid var(--border);}
.cred-list li .chk{color:var(--color-brand); font-family:var(--font-mono);}
.cred-panel{border:1px solid var(--border); border-radius:var(--radius-panel); padding:28px; background:var(--bg-panel);}
.cred-panel .row{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--border); font-size:14.5px;}
.cred-panel .row:first-child{border-top:none;}
.cred-panel .row b{font-family:var(--font-mono); font-weight:500; text-align:right;}

/* needs-input note box */
.note-box{
  border:1px dashed var(--color-mineral); background:#1e1a12; border-radius:var(--radius-card);
  padding:16px 18px; font-size:13.5px; color:var(--text-muted);
}
.note-box b{color:var(--color-warning);}

/* generic numbered scope list */
.scope-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 32px; margin-top:12px;}
.scope-list li{position:relative; padding-left:20px; font-size:15px; color:var(--text-muted);}
.scope-list li::before{content:"—"; position:absolute; left:0; color:var(--color-brand);}
@media(max-width:600px){.scope-list{grid-template-columns:1fr;}}

/* FAQ accordion */
.faq-item{border-top:1px solid var(--border);}
.faq-item:last-child{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:22px 0;
  display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:16.5px; font-weight:600;
  color:var(--text); font-family:var(--font-sans);
}
.faq-q .plus{font-family:var(--font-mono); color:var(--color-brand); font-size:20px; transition:transform var(--duration-normal); flex-shrink:0;}
.faq-item[open] .plus{transform:rotate(45deg);}
.faq-a{padding:0 0 22px; color:var(--text-muted); font-size:15px; max-width:680px;}
.faq-item summary{list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}

/* important callout */
.callout{border-left:3px solid var(--color-brand); background:var(--bg-panel); padding:20px 24px; border-radius:0 var(--radius-card) var(--radius-card) 0;}
.callout p{color:var(--text-muted); font-size:15px;}
.callout p + p{margin-top:10px;}

/* final CTA */
.final-cta{background:var(--color-obsidian); color:#fff; position:relative; overflow:hidden;}
.final-cta::before{
  content:""; position:absolute; inset:0; opacity:0.06; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Cpath d='M0,150 Q100,100 200,150 T400,150' stroke='%23F0B429' fill='none' stroke-width='1'/%3E%3Cpath d='M0,180 Q100,130 200,180 T400,180' stroke='%23F0B429' fill='none' stroke-width='1'/%3E%3Cpath d='M0,210 Q100,160 200,210 T400,210' stroke='%23F0B429' fill='none' stroke-width='1'/%3E%3C/svg%3E");
  background-size:400px 300px;
}
.final-cta-inner{position:relative; text-align:center; max-width:640px; margin:0 auto;}
.final-cta h2{color:#fff; margin:16px 0 14px;}
.final-cta p{color:#b9c0bc; margin-bottom:32px; font-size:16px;}
.final-cta .hero-actions{justify-content:center;}

/* ---------- 9. FORMS ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media(max-width:600px){.form-grid{grid-template-columns:1fr;}}
.field{margin-bottom:20px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--text);}
.field .required{color:var(--color-error);}
.field input,.field textarea,.field select{
  width:100%; height:52px; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:0 16px; background:var(--bg-panel); color:var(--text); transition:border-color var(--duration-fast);
}
.field textarea{height:auto; min-height:120px; padding:14px 16px; resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--color-brand); outline:none; box-shadow:0 0 0 3px rgba(22,72,63,0.15);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--color-error);}
.field .error-msg{display:none; color:var(--color-error); font-size:13px; margin-top:6px;}
.field.has-error .error-msg{display:block;}
.checkbox-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin-top:8px;}
@media(max-width:600px){.checkbox-grid{grid-template-columns:1fr;}}
.checkbox-item{display:flex; align-items:center; gap:10px; font-size:14.5px;}
.checkbox-item input{width:18px; height:18px; accent-color:var(--color-brand);}
.file-upload{
  border:1px dashed var(--border); border-radius:var(--radius-sm); padding:20px; text-align:center;
  font-size:14px; color:var(--text-muted); cursor:pointer; transition:border-color var(--duration-fast);
}
.file-upload:hover,.file-upload.is-dragover{border-color:var(--color-brand); color:var(--color-brand);}
.file-upload input{display:none;}
.file-list{margin-top:10px; font-size:13px; color:var(--text-muted);}
.form-status{
  display:none; padding:16px 18px; border-radius:var(--radius-card); font-size:14.5px; margin-top:20px;
}
.form-status.is-success{display:block; background:#132a1e; color:#6fcf97; border:1px solid #2a5c3f;}
.form-status.is-error{display:block; background:#2e1512; color:#f2a394; border:1px solid #6b2e26;}
fieldset{border:none;}
legend{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); width:100%;}

/* ---------- 10. FOOTER ---------- */
footer.site-footer{background:var(--color-graphite); color:#c7ccc9; padding:72px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid #33393a;}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
footer h5{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#8b938f; margin-bottom:16px;}
footer li{margin-bottom:10px; font-size:14.5px;}
footer a{color:#c7ccc9;}
footer a:hover{color:#fff;}
.footer-brand .name{color:#fff; font-weight:800; font-size:20px;}
.footer-brand .sub{font-family:var(--font-mono); font-size:10.5px; color:#8b938f; letter-spacing:0.08em; text-transform:uppercase; margin:4px 0 16px;}
.footer-brand p{font-size:13.5px; color:#9aa3a0; max-width:280px;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:12.5px; color:#7c847f; flex-wrap:wrap; gap:10px;}
.footer-bottom a{color:#9aa3a0;}

/* ---------- 11. UTILITIES ---------- */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.text-center{text-align:center;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.mobile-cta{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:90; height:60px;
  background:var(--color-obsidian); border-top:1px solid #33393a;
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-cta .inner{display:grid; grid-template-columns:1fr 1fr; height:60px;}
.mobile-cta a{display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:14px; gap:8px;}
.mobile-cta a:first-child{border-right:1px solid #33393a;}
.mobile-cta a.request{background:var(--color-brand);}
@media(max-width:767px){.mobile-cta{display:block;} body{padding-bottom:60px;}}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(12px); transition:opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* 404 page */
.error-page{min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center;}
.error-page .code{font-family:var(--font-mono); font-size:14px; color:var(--color-brand); letter-spacing:0.1em;}
.error-page h1{margin:14px 0 16px;}
.error-page p{color:var(--text-muted); max-width:480px; margin:0 auto 28px;}

/* ---------- 12. MOTION / A11Y ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  .reveal{opacity:1; transform:none;}
}