/* ===================================================================
   SIBAGEO GEOMATICS PRACTITIONERS — glass design system (brand: blue #11698D, orange #F69220)
   Display: Barlow Condensed | Body: Work Sans | Data: IBM Plex Mono
   Surfaces: frosted glass over soft teal + gold light
=================================================================== */
:root{
  --ink:        #0F4A67;
  --ink-deep:   #071F2B;
  --teal:       #11698D;
  --gold:       #F69220;
  --gold-dim:   #B25F08;   /* gold for text on light glass (readable) */
  --paper:      #F4F7F5;
  --paper-dim:  #E6EEEB;
  --ink-text:   #16211F;
  --line:       rgba(7,31,43,0.12);
  --glass:      rgba(255,255,255,0.55);
  --glass-edge: rgba(255,255,255,0.78);
  --radius:     14px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --shadow:     0 1px 0 rgba(255,255,255,0.85) inset, 0 22px 44px -24px rgba(7,31,43,0.38);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background-color:#EAF0ED;
  color:var(--ink-text);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* soft colour light the glass sits on */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 520px at 6% -4%,  rgba(17,105,141,0.30), transparent 62%),
    radial-gradient(700px 520px at 100% 34%, rgba(246,146,32,0.24), transparent 62%),
    radial-gradient(820px 620px at 18% 104%, rgba(17,105,141,0.22), transparent 62%);
}
h1,h2,h3,h4{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin:0 0 0.4em 0;
  color:var(--ink-deep);
  line-height:1.05;
}
.mono, .plate, .tag, .refno{font-family:'IBM Plex Mono', monospace;}
p{margin:0 0 1em 0;}
a{color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1180px;margin:0 auto;padding:0 28px;}
.section{padding:88px 0;}
.section-tight{padding:56px 0;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--gold-dim);
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:currentColor;display:inline-block;}
.lead{font-size:19px;max-width:640px;color:#34423F;}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;letter-spacing:0.06em;text-transform:uppercase;
  padding:14px 26px;border:1px solid var(--ink-deep);
  background:var(--ink-deep);color:var(--paper);
  text-decoration:none;border-radius:999px;cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-2px);background:var(--ink);box-shadow:0 12px 26px -12px rgba(7,31,43,0.6);}
.btn-ghost{
  background:rgba(255,255,255,0.08);color:var(--ink-deep);border-color:rgba(7,31,43,0.35);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn-ghost:hover{background:rgba(255,255,255,0.22);}
.btn-gold{
  background:linear-gradient(180deg,#F9A540,#F69220);border-color:rgba(255,255,255,0.35);color:var(--ink-deep);
  box-shadow:0 10px 26px -12px rgba(246,146,32,0.9), 0 1px 0 rgba(255,255,255,0.55) inset;
}
.btn-gold:hover{background:linear-gradient(180deg,#FBB153,#F8A030);box-shadow:0 16px 30px -12px rgba(246,146,32,1), 0 1px 0 rgba(255,255,255,0.6) inset;}

/* ============ NAV (floating glass bar) ============ */
header.site{
  position:sticky;top:12px;z-index:50;
  margin:12px 14px 0;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.75);
  box-shadow:0 12px 32px -16px rgba(7,31,43,0.4);
  transition:box-shadow .25s ease;
}
/* blur lives on a pseudo-element so it never traps the fixed mobile menu */
header.site::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:rgba(244,247,245,0.62);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
}
header.site.scrolled{box-shadow:0 16px 38px -14px rgba(7,31,43,0.5);}
.navwrap{
  max-width:1180px;margin:0 auto;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;
  height:68px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink-deep);position:relative;z-index:3;}
.brand-mark{width:42px;height:42px;flex:none;object-fit:contain;}
.brand-name{font-family:'Barlow Condensed';font-weight:700;font-size:22px;letter-spacing:0.03em;line-height:1;color:#11698D;}
.brand-name b{color:#F69220;font-weight:700;}
.brand-name span{display:block;font-family:'IBM Plex Mono';font-size:9.5px;letter-spacing:0.18em;color:var(--gold-dim);font-weight:400;text-transform:uppercase;margin-top:3px;}
nav.mainnav{display:flex;gap:6px;align-items:center;z-index:2;}
nav.mainnav a{
  text-decoration:none;color:var(--ink-text);
  font-family:'IBM Plex Mono';font-size:13px;letter-spacing:0.04em;
  text-transform:uppercase;position:relative;padding:8px 14px;border-radius:999px;
  transition:background .2s ease,color .2s ease;
}
nav.mainnav a:hover{background:rgba(255,255,255,0.65);color:var(--ink);}
nav.mainnav a.active{background:rgba(7,31,43,0.9);color:var(--paper);}
.navcta{display:flex;align-items:center;gap:20px;position:relative;z-index:3;}
.navphone{font-family:'IBM Plex Mono';font-size:13px;color:var(--ink);text-decoration:none;display:none;}
@media(min-width:1000px){.navphone{display:block;}}
.hamburger{display:none;background:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.8);border-radius:12px;cursor:pointer;padding:9px 10px;}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink-deep);margin:4px 0;border-radius:2px;}
@media(max-width:860px){
  nav.mainnav{
    position:fixed;inset:0;padding:112px 28px 40px;gap:8px;
    flex-direction:column;align-items:flex-start;
    background:rgba(244,247,245,0.9);
    backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  nav.mainnav.open{opacity:1;transform:none;pointer-events:auto;}
  nav.mainnav a{font-size:18px;padding:12px 18px;}
  .hamburger{display:block;}
  .navphone{display:none;}
}
@media(max-width:720px){
  .navcta .btn{display:none;}
  .navwrap{padding:0 16px;}
  .brand-name span{white-space:nowrap;letter-spacing:0.12em;}
}

/* ============ HERO (dark glass panel) ============ */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  margin:14px 14px 0;border-radius:var(--radius-xl);
  background:linear-gradient(145deg,#06202C 0%,#0B3A52 52%,#11698D 100%);
  color:var(--paper);
  padding:104px 0 84px;
}
.hero::before,.band-dark::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  width:560px;height:560px;right:-140px;top:-190px;
  background:radial-gradient(circle at 40% 40%, rgba(246,146,32,0.55), rgba(246,146,32,0) 68%);
}
.hero::after,.band-dark::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  width:640px;height:640px;left:-200px;bottom:-300px;
  background:radial-gradient(circle at 50% 50%, rgba(60,165,215,0.38), rgba(60,165,215,0) 68%);
}
.hero .contour-bg{position:absolute;inset:0;width:100%;height:100%;opacity:0.55;pointer-events:none;}
.hero-inner{position:relative;z-index:2;}
.hero h1{
  color:var(--paper);
  font-size:clamp(40px,6vw,74px);
  max-width:900px;margin-bottom:22px;
}
.hero h1 em{font-style:normal;color:var(--gold);}
.hero .lead{color:#C9D9D6;font-size:19px;max-width:560px;}
.hero-actions{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;}

/* Beacon plates — glass tiles modelled on a survey reference plate */
.plate-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:56px;background:none;border:none;
}
.plate{
  position:relative;padding:20px 18px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--radius-lg);
  box-shadow:0 1px 0 rgba(255,255,255,0.12) inset;
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
}
.plate::before{
  content:'';position:absolute;top:12px;right:12px;width:6px;height:6px;
  border-radius:50%;border:1px solid var(--gold);
}
.plate .val{font-size:22px;color:var(--gold);display:block;margin-bottom:4px;word-break:break-word;}
.plate .lab{font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:#A9BDB9;}
@media(max-width:900px){.plate-row{grid-template-columns:repeat(2,1fr);}}

/* hero with the logo on a frosted white card */
.hero-split{display:grid;grid-template-columns:1.3fr 0.7fr;gap:48px;align-items:center;}
.hero-logo{
  justify-self:end;width:min(100%,290px);
  background:rgba(255,255,255,0.94);
  border:1px solid rgba(255,255,255,0.9);border-radius:var(--radius-xl);
  padding:28px 30px;
  box-shadow:0 34px 60px -30px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,1) inset;
}
.hero-logo img{width:100%;height:auto;}
@media(max-width:820px){
  .hero-split{grid-template-columns:1fr;gap:32px;}
  .hero-logo{justify-self:start;width:190px;padding:20px 22px;border-radius:22px;}
}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.foot-brand img{width:44px;height:44px;flex:none;}
.foot-brand h4{margin:0;}

/* ============ GRID / GLASS CARDS ============ */
.grid{display:grid;gap:18px;background:none!important;border:none!important;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}
@media(max-width:1100px){.grid-5{grid-template-columns:repeat(3,1fr);}}
@media(max-width:820px){.grid-3{grid-template-columns:1fr;}}
@media(max-width:700px){.grid-5{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid-2{grid-template-columns:1fr;}}
@media(max-width:440px){.grid-5{grid-template-columns:1fr;}}

.card{
  background:var(--glass);
  border:1px solid var(--glass-edge);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  padding:32px 28px;
  transition:transform .25s ease, box-shadow .25s ease;
}
@media(hover:hover){.card:hover{transform:translateY(-4px);}}
.card .num{font-family:'IBM Plex Mono';font-size:12px;color:var(--gold-dim);letter-spacing:0.1em;margin-bottom:14px;display:block;}
.card h3{font-size:24px;margin-bottom:10px;}
.card p{color:#3A4845;font-size:15px;margin-bottom:0;}

.card-dark{
  background:linear-gradient(150deg,rgba(7,31,43,0.9),rgba(15,74,103,0.82));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 1px 0 rgba(255,255,255,0.1) inset, 0 24px 44px -24px rgba(7,31,43,0.7);
  color:var(--paper);
}
.card-dark h3{color:var(--paper);}
.card-dark p{color:#B9CAC7;}
.card-dark .num{color:var(--gold);}
.band-dark .card-dark{background:rgba(255,255,255,0.07);box-shadow:0 1px 0 rgba(255,255,255,0.12) inset;}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:46px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(30px,4vw,46px);max-width:640px;}

/* crosshair markers as glass rows */
.mk-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.mk-list li{
  display:flex;gap:16px;align-items:flex-start;
  padding:22px 0;
  padding-left:26px!important;padding-right:26px!important;
  background:var(--glass);
  border:1px solid var(--glass-edge)!important;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
}
.mk-list .mk{
  flex:none;width:16px;height:16px;margin-top:5px;
  border:1px solid var(--gold-dim);border-radius:50%;position:relative;
}
.mk::before,.mk::after{content:'';position:absolute;background:var(--gold-dim);}
.mk::before{left:50%;top:-4px;bottom:-4px;width:1px;transform:translateX(-50%);}
.mk::after{top:50%;left:-4px;right:-4px;height:1px;transform:translateY(-50%);}

/* ============ BANDS ============ */
.band-dark{
  position:relative;overflow:hidden;isolation:isolate;
  margin:0 14px;border-radius:var(--radius-xl);
  background:linear-gradient(150deg,#06202C 0%,#0B3A52 60%,#10587A 100%);
  color:var(--paper);
}
.band-dark::before{width:460px;height:460px;right:-120px;top:-170px;}
.band-dark::after{width:520px;height:520px;left:-180px;bottom:-260px;}
.band-dark > .container{position:relative;z-index:1;}
.band-dark h2, .band-dark h3{color:var(--paper);}
.band-dark p{color:#B9CAC7;}
.band-dark .eyebrow{color:var(--gold);}
.band-paper-dim{
  background:rgba(255,255,255,0.38);
  border-top:1px solid rgba(255,255,255,0.75);border-bottom:1px solid rgba(255,255,255,0.75);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

/* ============ FOOTER ============ */
footer.site{
  position:relative;overflow:hidden;
  margin:14px;border-radius:var(--radius-xl);
  background:linear-gradient(150deg,#06202C,#0B3A52);
  color:#B9CAC7;padding:64px 0 30px;
}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
footer.site h4{color:var(--paper);font-size:16px;margin-bottom:16px;}
footer.site a{text-decoration:none;color:#B9CAC7;font-size:14px;display:block;margin-bottom:8px;}
footer.site a:hover{color:var(--gold);}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.14);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;font-family:'IBM Plex Mono';color:#869B97;}

/* ============ PROJECT REGISTER ============ */
.proj{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:20px;align-items:baseline;
  padding:20px 26px;margin-bottom:10px;
  background:var(--glass);
  border:1px solid var(--glass-edge);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:transform .2s ease;
}
@media(hover:hover){.proj:hover{transform:translateX(4px);}}
.proj .pname{font-family:'Barlow Condensed';font-weight:700;font-size:20px;text-transform:uppercase;color:var(--ink-deep);}
.proj .ploc{font-size:14px;color:#46534F;}
.proj .pperiod, .proj .pref{font-family:'IBM Plex Mono';font-size:12.5px;color:#4F5E5A;}
@media(max-width:760px){.proj{grid-template-columns:1fr;gap:6px;}}

/* ============ CONTACT / FORM ============ */
form.enquiry{display:grid;gap:16px;}
form.enquiry label{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:#47554F;margin-bottom:6px;display:block;}
form.enquiry input, form.enquiry select, form.enquiry textarea{
  width:100%;padding:13px 16px;
  border:1px solid rgba(7,31,43,0.16);background:rgba(255,255,255,0.65);
  font-family:'Work Sans';font-size:15px;color:var(--ink-text);border-radius:12px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
form.enquiry input:focus, form.enquiry select:focus, form.enquiry textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(255,255,255,0.9);
  box-shadow:0 0 0 4px rgba(246,146,32,0.25);
}
form.enquiry textarea{resize:vertical;min-height:120px;}
.form-status{margin:4px 0 0;font-size:14px;border-radius:12px;padding:0;}
.form-status:empty{display:none;}
.form-status.ok,.form-status.error,.form-status.info{padding:12px 16px;border:1px solid transparent;}
.form-status.ok{background:rgba(46,160,95,0.14);border-color:rgba(46,160,95,0.4);color:#14532d;}
.form-status.error{background:rgba(200,60,50,0.12);border-color:rgba(200,60,50,0.4);color:#7f1d1d;}
.form-status.info{background:rgba(17,105,141,0.1);border-color:rgba(17,105,141,0.3);color:#0b3a52;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:600px){.row2{grid-template-columns:1fr;}}

.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.badge{
  font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:0.05em;text-transform:uppercase;
  border:1px solid rgba(7,31,43,0.18);padding:7px 14px;color:#47554F;border-radius:999px;
  background:rgba(255,255,255,0.35);
}
.band-dark .badge,.card-dark .badge{background:rgba(255,255,255,0.06);}

/* ============ SCROLL REVEAL (only when JS is running) ============ */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.js .reveal.in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;}
  .js .reveal{opacity:1;transform:none;}
}
/* no blur support: fall back to solid-ish surfaces so text stays readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.proj,.mk-list li{background:rgba(255,255,255,0.85);}
  header.site::before{background:rgba(244,247,245,0.95);}
}

/* WhatsApp quick-chat */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;text-decoration:none;font-family:'Work Sans',sans-serif;font-weight:600;font-size:14px;padding:13px 18px;border-radius:999px;box-shadow:0 10px 28px rgba(7,94,84,.35),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .2s,box-shadow .2s}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(7,94,84,.45)}
@media(max-width:560px){.wa-float{right:14px;bottom:14px;padding:14px}.wa-float span{display:none}}
.btn-wa{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;text-decoration:none;font-weight:600;padding:12px 20px;border-radius:999px;margin-top:4px}
.btn-wa:hover{filter:brightness(1.05)}