/* ==========================================================================
   Geospatial World — Awards Nomination Module
   Reusable stylesheet: header, hero, stepper, form, footer, animations.

   To reuse on another award project:
   1. Edit the CSS variables in :root below (colors, radii, fonts stay as-is
      unless the new brand needs different type).
   2. Swap images/logo.png.
   3. Edit copy directly in the HTML — structure/classes stay the same.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Brand colors */
  --primary:#1F3A5F;
  --primary-600:#1A3150;
  --primary-700:#152C45;
  --primary-100:#e8eef6;
  --accent:#D4AF37;
  --accent-600:#b8942b;
  --accent-100:#f9f1d3;

  /* Neutrals */
  --ink:#152238;
  --ink-soft:#5c6b7a;
  --ink-faint:#8c98a4;
  --line:#e3e8ee;
  --bg:#f2f6fa;
  --white:#ffffff;

  /* Surface */
  --radius-lg:16px;
  --radius:10px;
  --radius-sm:6px;
  --shadow-sm:0 1px 2px rgba(15,35,55,.06);
  --shadow-md:0 10px 28px rgba(15,35,55,.08);
  --shadow-lg:0 24px 60px rgba(15,35,55,.14);

  /* Type */
  --font-display:'Plus Jakarta Sans', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--primary);}

/* ---- top brand strip ---- */
.brand-strip{
  height:4px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease), padding .3s var(--ease);
}
.site-header.scrolled{
  box-shadow:var(--shadow-md);
}
.header-inner{
  max-width:1180px;
  margin:0 auto;
  padding:16px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  transition:padding .3s var(--ease);
}
.site-header.scrolled .header-inner{padding:11px 28px;}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--ink);
}
.brand .logo-img{
  height:38px;
  width:auto;
  transition:height .3s var(--ease);
}
.site-header.scrolled .brand .logo-img{height:32px;}
.brand .logo-fallback{
  font-family:var(--font-display);
  font-weight:800;
  font-size:17px;
  letter-spacing:-.01em;
  color:var(--ink);
}
.brand .logo-fallback span{color:var(--primary);}
.brand-tagline{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-left:12px;
  margin-left:2px;
  border-left:1px solid var(--line);
  display:none;
}

.header-status{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--primary-700);
  background:var(--primary-100);
  padding:7px 14px;
  border-radius:999px;
  white-space:nowrap;
}
.status-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--accent);
  animation:pulseDot 1.8s ease-in-out infinite;
  flex:none;
}

@keyframes pulseDot{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(227,108,76,.5);}
  50%{transform:scale(1.15);box-shadow:0 0 0 5px rgba(227,108,76,0);}
}

@media (min-width:640px){
  .brand-tagline{display:inline-block;}
}

/* ==========================================================================
   Hero — full-bleed band
   ========================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, #081b30 0%, #0c2a45 28%, var(--primary-700) 62%, var(--primary) 100%);
}
.hero-pattern{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 30%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 80% 90% at 50% 30%, #000 0%, transparent 75%);
}
.hero-inner{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:72px 28px 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.hero-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.45;
  z-index:0;
  animation:floatBlob 12s ease-in-out infinite;
}
.hero-blob.b1{
  width:380px;height:380px;
  background:#4bb6e6;
  top:-180px; left:-140px;
}
.hero-blob.b2{
  width:320px;height:320px;
  background:var(--accent);
  top:-120px; right:-100px;
  animation-delay:-6s;
}
.hero-blob.b3{
  width:300px;height:300px;
  background:#2fd6c0;
  opacity:.22;
  bottom:-200px; left:38%;
  animation-delay:-3s;
}
.hero-spotlight{
  position:absolute;
  z-index:0;
  inset:0;
  background:
    radial-gradient(38% 60% at 78% 45%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(30% 50% at 18% 30%, rgba(255,255,255,.08), transparent 70%);
  pointer-events:none;
}
.hero-glow{
  position:absolute;
  inset:auto 0 -60% 0;
  height:220px;
  background:radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.14), transparent 70%);
  z-index:0;
  pointer-events:none;
}
@keyframes floatBlob{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(20px,26px) scale(1.08);}
}

/* ---- confetti / sparkle particle field ---- */
.hero-particles{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.particle{position:absolute;}
.particle.dot{
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 8px 2px rgba(255,255,255,.7);
  animation:twinkle 3.2s ease-in-out infinite;
}
.particle.star{
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:twinkle 3.2s ease-in-out infinite, spinSlow 7s linear infinite;
}
@keyframes spinSlow{to{transform:rotate(360deg);}}

.hero-content{position:relative;z-index:1;max-width:800px;}
.eyebrow-badge{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 20px;
}
.hero-content .brand .logo-img {height:100px; margin-bottom:20px;}
.laurel{
  width:26px;height:42px;
  color:rgba(255,255,255,.7);
  flex:none;
}
.laurel-r{transform:scaleX(-1);}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  padding:7px 14px;
  border-radius:999px;
  margin:0;
}
.eyebrow-icon{width:14px;height:14px;color:var(--accent);flex:none;}
h1.title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(28px,4vw,36px);
  line-height:1.14;
  letter-spacing:-.02em;
  margin:0 0 14px;
  color:#fff;
}
h1.title .accent{color:var(--accent);}
.subtitle{
  color:rgba(255,255,255,.78);
  font-size:15.5px;
  margin:0;
  max-width:52ch;
}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:26px;
  font-size:13px;
  color:rgba(255,255,255,.72);
}
.hero-meta span{display:flex;align-items:center;gap:7px;}
.hero-meta b{color:#fff;font-weight:600;}
.meta-dot{
  width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;
}

/* ---- award trophy illustration ---- */
.hero-award{
  position:relative;
  z-index:1;
  flex:none;
  width:200px;
  height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-award .trophy{
  width:100%;
  height:100%;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.25));
  animation:trophyFloat 4.5s ease-in-out infinite;
}
.hero-award .t-outline{opacity:.92;}
.hero-award .t-star{
  transform-origin:100px 60px;
  animation:starPulse 2.4s ease-in-out infinite;
}
@keyframes trophyFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-10px) rotate(-1.5deg);}
}
@keyframes starPulse{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.18);opacity:.85;}
}
.sparkle{
  position:absolute;
  width:7px;height:7px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 8px 2px rgba(255,255,255,.8);
  animation:twinkle 2.6s ease-in-out infinite;
}
.sparkle.sp1{top:12%; left:6%; animation-delay:0s;}
.sparkle.sp2{top:60%; right:2%; width:5px;height:5px; animation-delay:.8s;}
.sparkle.sp3{bottom:14%; left:18%; width:5px;height:5px; animation-delay:1.6s;}
@keyframes twinkle{
  0%,100%{opacity:0; transform:scale(.4);}
  50%{opacity:1; transform:scale(1);}
}

@media (max-width:900px){
  .hero-award{display:none;}
}

/* ==========================================================================
   Stepper
   ========================================================================== */
.stepper-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}
.stepper{
  display:flex;
  align-items:flex-start;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px 28px;
  box-shadow:var(--shadow-sm);
  position:relative;
}
.step-node{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  cursor:pointer;
  background:none;
  border:none;
  font-family:inherit;
  padding:0;
}
.step-node::before{
  content:'';
  position:absolute;
  top:16px;
  left:calc(-50% + 16px);
  width:calc(100% - 32px);
  height:2px;
  background:var(--line);
  z-index:0;
}
.step-node:first-child::before{display:none;}
.step-node:first-child::after{display:none;}
.step-node::after{
  content:'';
  position:absolute;
  top:16px;
  left:calc(-50% + 16px);
  width:0%;
  height:2px;
  background:var(--primary);
  z-index:1;
  transition:width .5s var(--ease);
}
.step-node.done::after,
.step-node.active::after{width:calc(100% - 32px);}

.step-circle{
  position:relative;
  z-index:2;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  color:var(--ink-faint);
  transition:all .35s var(--ease-spring);
}
.step-node.active .step-circle{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff;
  transform:scale(1.12);
  box-shadow:0 0 0 6px var(--primary-100);
}
.step-node.done .step-circle{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff;
}
.step-node.done .step-circle .num{display:none;}
.step-node.done .step-circle .check{display:block;}
.step-circle .check{display:none;width:14px;height:14px;}

.step-label-group{margin-top:10px;}
.step-node .st-eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.step-node .st-title{
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  margin-top:2px;
}
.step-node.active .st-title{color:var(--primary);}
.step-node.done .st-title{color:var(--ink);}

@media (max-width:640px){
  .step-label-group{display:none;}
  .stepper{padding:18px 16px;}
}

/* ==========================================================================
   Main / Card / Form
   ========================================================================== */
main.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:28px 28px 90px;
}

.step-panel{display:none;}
.step-panel.active{
  display:block;
  animation:panelIn .45s var(--ease);
}
@keyframes panelIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
.step-panel.leaving{
  animation:panelOut .25s var(--ease);
}
@keyframes panelOut{
  from{opacity:1;transform:translateY(0);}
  to{opacity:0;transform:translateY(-10px);}
}

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:40px 44px;
  box-shadow:var(--shadow-sm);
}

.section-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 30px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.section-head .num-badge{
  font-family:var(--font-display);
  font-weight:800;
  font-size:14px;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary-700));
  width:34px;height:34px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
h2.step-title{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.01em;
  margin:0;
  color:var(--ink);
}
.step-desc{
  margin:2px 0 0;
  font-size:13px;
  color:var(--ink-soft);
}

.field-group{margin-bottom:22px;}
.field-group:last-child{margin-bottom:0;}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
label{
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:7px;
  color:var(--ink);
}
label .req{color:var(--accent);margin-left:2px;}
.hint{
  font-size:12px;
  color:var(--ink-soft);
  margin:6px 0 0;
}

input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=number], select, textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:14px;
  color:var(--ink);
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  padding:11px 13px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}
input:hover, select:hover, textarea:hover{border-color:#c7d0da;}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-100);
}
textarea{resize:vertical; min-height:110px; line-height:1.6;}

fieldset{border:none;margin:0;padding:0;}
legend{font-size:13px;font-weight:600;margin-bottom:8px;padding:0;}

/* toggle buttons */
.toggle-group{display:flex;gap:8px;flex-wrap:wrap;}
.toggle-btn{
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:500;
  padding:9px 20px;
  border:1.5px solid var(--line);
  background:var(--white);
  border-radius:8px;
  cursor:pointer;
  color:var(--ink-soft);
  transition:all .2s var(--ease);
}
.toggle-btn:hover{border-color:var(--primary);color:var(--primary);}
.toggle-btn.selected{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff;
  font-weight:600;
  box-shadow:var(--shadow-sm);
  animation:pop .3s var(--ease-spring);
}

/* chips */
.chip-group{display:flex;flex-wrap:wrap;gap:9px;}
.chip{
  font-size:13px;
  font-weight:500;
  padding:8px 16px;
  border:1.5px solid var(--line);
  background:var(--white);
  border-radius:999px;
  cursor:pointer;
  color:var(--ink-soft);
  transition:all .2s var(--ease);
}
.chip:hover{border-color:var(--accent);color:var(--accent-600);}
.chip.selected{
  border-color:var(--accent);
  background:var(--accent-100);
  color:var(--accent-600);
  font-weight:600;
  animation:pop .3s var(--ease-spring);
}
@keyframes pop{
  0%{transform:scale(1);}
  40%{transform:scale(1.08);}
  100%{transform:scale(1);}
}

/* conditional reveal */
.conditional{
  margin-top:16px;
  padding:0 20px;
  background:var(--primary-100);
  border-left:3px solid var(--primary);
  border-radius:0 8px 8px 0;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease);
}
.conditional.show{
  max-height:400px;
  opacity:1;
  padding:18px 20px;
}

.counter{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-faint);
  text-align:right;
  margin-top:5px;
  transition:color .2s var(--ease);
}
.counter.warn{color:var(--accent-600);font-weight:600;}

.metric-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:10px;
}

.checkline{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.checkline:last-of-type{border-bottom:none;}
.checkline input{
  margin-top:3px;
  width:17px;height:17px;
  accent-color:var(--primary);
  cursor:pointer;
  flex:none;
}
.checkline .ctext{font-size:13.5px;color:var(--ink);cursor:pointer;}
.checkline a{color:var(--primary);font-weight:500;}

.upload-box{
  border:1.5px dashed var(--line);
  border-radius:var(--radius);
  padding:26px 20px;
  text-align:center;
  background:var(--bg);
  margin-bottom:10px;
  cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.upload-box:hover,
.upload-box.drag-over,
.upload-box:focus-visible{
  border-color:var(--primary);
  background:var(--primary-100);
}
.upload-box .up-icon{
  width:26px;height:26px;
  margin:0 auto 8px;
  color:var(--primary);
}
.upload-box p{margin:2px 0 0;font-size:12.5px;color:var(--ink-soft);}

/* ==========================================================================
   Footer nav (Back / Next)
   ========================================================================== */
.form-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:36px;
  padding-top:26px;
  border-top:1px solid var(--line);
  gap:12px;
}
.step-indicator{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-faint);
}
button.nav{
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  padding:12px 26px;
  border-radius:9px;
  cursor:pointer;
  border:1.5px solid var(--line);
  background:var(--white);
  color:var(--ink);
  transition:all .2s var(--ease);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
button.nav:hover:not(:disabled){border-color:var(--ink-soft);transform:translateY(-1px);}
button.nav.primary{
  background:linear-gradient(135deg, var(--primary), var(--primary-600));
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 6px 16px rgba(0,128,191,.28);
}
button.nav.primary:hover:not(:disabled){
  box-shadow:0 10px 22px rgba(0,128,191,.36);
  transform:translateY(-1px);
}
button.nav.submit{
  background:linear-gradient(135deg, var(--accent), var(--accent-600));
  border-color:var(--accent);
  box-shadow:0 6px 16px rgba(227,108,76,.32);
}
button.nav.submit:hover:not(:disabled){
  box-shadow:0 10px 22px rgba(227,108,76,.4);
}
button.nav:disabled{opacity:.45;cursor:not-allowed;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--white);
  padding:22px 28px;
  text-align:center;
}
.site-footer p{
  margin:0;
  font-size:12.5px;
  color:var(--ink-faint);
}

/* ==========================================================================
   Scroll reveal utility
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in{opacity:1;transform:translateY(0);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:820px){
  .header-inner{padding:14px 20px;}
  .hero-inner{padding:40px 20px 28px;}
  main.wrap{padding:20px 20px 70px;}
  .stepper-wrap{padding:0 20px;}
  .card{padding:26px 22px;}
  .field-row, .metric-row{grid-template-columns:1fr;}
  h1.title{font-size:26px;}
  .form-foot{flex-wrap:wrap;}
  .step-indicator{order:3;width:100%;text-align:center;}
}

@media (max-width:480px){
  .header-status span.label-full{display:none;}
  .card{padding:22px 16px;}
  button.nav{padding:11px 18px;font-size:13.5px;}
}