/* ===========================================================
   ATLAS PRECISION CONTAINERS — Design System
   Signature element: the "data plate" — styled after the real
   stenciled ID plates riveted to every shipping container
   (MAX GROSS / TARE / PAYLOAD), used as a recurring motif for
   specs, stats, and structure throughout the site.
   =========================================================== */

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

:root{
  /* Color tokens */
  --navy-deep:   #0B2547;
  --navy-mid:    #14375E;
  --navy-soft:   #1F4970;
  --brand-blue:  #2F8FD6;
  --brand-blue-light: #7CC4F2;
  --sand:        #E4D9BB;
  --sand-dark:   #C9B98C;
  --steel:       #4B5A66;
  --paper:       #F7F5F0;
  --paper-dim:   #EFEBE2;
  --ink:         #181F28;
  --ink-soft:    #4A5560;
  --hazard:      #E8A93A;
  --white: #fff;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --max-w: 1180px;
  --radius: 4px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0 0 .5em;
  line-height:1.1;
  letter-spacing:-0.01em;
  color:var(--navy-deep);
}
p{margin:0 0 1em;}
.container{max-width:var(--max-w); margin:0 auto; padding:0 24px;}

:focus-visible{
  outline:3px solid var(--brand-blue);
  outline-offset:2px;
}

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

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.95rem;
  padding:13px 26px;
  border-radius:var(--radius);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--brand-blue); color:var(--white);}
.btn-primary:hover{background:var(--brand-blue-light); color:var(--navy-deep);}
.btn-outline{background:transparent; border-color:var(--white); color:var(--white);}
.btn-outline:hover{background:var(--white); color:var(--navy-deep);}
.btn-outline-dark{background:transparent; border-color:var(--navy-deep); color:var(--navy-deep);}
.btn-outline-dark:hover{background:var(--navy-deep); color:var(--white);}
.btn-block{width:100%; justify-content:center;}

/* ---------- Header ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid rgba(11,37,71,0.1);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  max-width:var(--max-w); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:42px; width:auto;}
.brand-text{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:var(--navy-deep); line-height:1.05;
}
.brand-text span{display:block; font-size:0.62em; font-weight:600; letter-spacing:0.08em; color:var(--brand-blue);}

nav.main-nav{display:flex; align-items:center; gap:28px;}
nav.main-nav a{
  font-family:var(--font-display); font-weight:600; font-size:0.92rem;
  color:var(--navy-mid);
  padding:6px 0;
  border-bottom:2px solid transparent;
}
nav.main-nav a:hover, nav.main-nav a.active{border-color:var(--brand-blue);}
.nav-cta{display:flex; align-items:center; gap:18px;}
.nav-toggle{display:none;}

@media (max-width:860px){
  nav.main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; padding:24px;
    gap:18px; transform:translateX(100%); transition:transform .25s ease;
    border-top:1px solid rgba(11,37,71,0.1);
  }
  nav.main-nav.open{transform:translateX(0);}
  .nav-toggle{
    display:inline-flex; background:none; border:none; cursor:pointer;
    flex-direction:column; gap:5px; padding:6px;
  }
  .nav-toggle span{width:24px; height:2px; background:var(--navy-deep);}
  .nav-cta .btn{display:none;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:86vh;
  display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(11,37,71,0.25) 0%, rgba(11,37,71,0.55) 60%, rgba(11,37,71,0.88) 100%), var(--navy-deep);
  background-size:cover;
  overflow:hidden;
}
.hero img.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,37,71,0.15) 0%, rgba(11,37,71,0.5) 55%, rgba(7,22,42,0.92) 100%);
}
.hero-content{position:relative; z-index:2; padding:80px 24px 56px; max-width:var(--max-w); margin:0 auto; width:100%;}
.eyebrow{
  font-family:var(--font-mono); color:var(--brand-blue-light);
  letter-spacing:0.18em; text-transform:uppercase; font-size:0.78rem;
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:28px; height:2px; background:var(--brand-blue-light); display:inline-block;}
.hero h1{
  color:var(--white); font-size:clamp(2.1rem, 5vw, 3.6rem);
  max-width:760px; margin-bottom:18px;
}
.hero p.lead{color:#D7E4F2; font-size:1.15rem; max-width:560px; margin-bottom:30px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- Data plate (signature element) ---------- */
.plate-strip{
  background:var(--navy-deep);
  border-top:1px solid rgba(255,255,255,0.08);
}
.plate-strip .container{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0;
}
.plate-stat{
  padding:22px 20px;
  border-right:1px solid rgba(255,255,255,0.12);
  position:relative;
}
.plate-stat:last-child{border-right:none;}
.plate-stat::before, .plate-stat::after{
  content:''; position:absolute; width:10px; height:10px;
  background:repeating-linear-gradient(45deg, var(--hazard) 0 3px, var(--navy-deep) 3px 6px);
  opacity:0.0;
}
.plate-label{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.12em;
  color:#7FA8CE; text-transform:uppercase; margin-bottom:6px;
}
.plate-value{
  font-family:var(--font-mono); font-weight:600; font-size:1.15rem; color:var(--white);
}
@media (max-width:760px){
  .plate-strip .container{grid-template-columns:repeat(2,1fr);}
  .plate-stat:nth-child(2){border-right:none;}
}

.data-card{
  background:var(--navy-deep);
  border-radius:6px;
  padding:26px 24px;
  position:relative;
  color:var(--white);
}
.data-card::before{
  content:'';
  position:absolute; top:10px; left:10px; right:10px; bottom:10px;
  border:1px solid rgba(255,255,255,0.15);
  pointer-events:none;
}
.data-card .corner{
  position:absolute; width:18px; height:18px;
  background:repeating-linear-gradient(45deg, var(--hazard) 0 4px, var(--navy-deep) 4px 8px);
}
.data-card .corner.tl{top:0; left:0;}
.data-card .corner.tr{top:0; right:0;}
.data-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.12);
  font-family:var(--font-mono); font-size:0.9rem;
}
.data-row:last-child{border-bottom:none;}
.data-row .k{color:#86ABCE; letter-spacing:0.05em;}
.data-row .v{color:var(--white); font-weight:600;}

/* ---------- Sections ---------- */
section{padding:84px 0;}
section.tight{padding:56px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head .eyebrow{color:var(--brand-blue);}
.section-head .eyebrow::before{background:var(--brand-blue);}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);}
.section-head p{color:var(--ink-soft); font-size:1.05rem;}

.bg-navy{background:var(--navy-deep); color:var(--white);}
.bg-navy h2, .bg-navy h3{color:var(--white);}
.bg-navy p{color:#C9DBEC;}
.bg-sand{background:var(--paper-dim);}

/* ---------- Two-path cards ---------- */
.path-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.path-card{
  background:var(--white);
  border:1px solid rgba(11,37,71,0.1);
  border-radius:8px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.path-card:hover{box-shadow:0 18px 40px rgba(11,37,71,0.14); transform:translateY(-3px);}
.path-card img{height:230px; object-fit:cover; width:100%;}
.path-card-body{padding:26px 26px 28px; flex:1; display:flex; flex-direction:column;}
.path-card .tag{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em;
  color:var(--brand-blue); text-transform:uppercase; margin-bottom:10px;
}
.path-card h3{font-size:1.4rem; margin-bottom:10px;}
.path-card p{color:var(--ink-soft); flex:1;}
@media (max-width:760px){.path-grid{grid-template-columns:1fr;}}

/* ---------- Process steps ---------- */
.process-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.process-step{position:relative;}
.process-step img{border-radius:6px; height:190px; object-fit:cover; margin-bottom:18px;}
.step-num{
  font-family:var(--font-mono); font-weight:600; color:var(--brand-blue);
  font-size:0.85rem; letter-spacing:0.05em; margin-bottom:8px; display:block;
}
.process-step h3{font-size:1.15rem; margin-bottom:8px;}
.process-step p{color:var(--ink-soft); font-size:0.96rem;}
@media (max-width:860px){.process-grid{grid-template-columns:1fr; gap:36px;}}

/* ---------- About teaser / split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.split img{border-radius:8px;}
@media (max-width:860px){.split{grid-template-columns:1fr;}}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--navy-deep); color:#B9CEE3; padding:56px 0 28px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:40px;}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.footer-brand img{height:38px;}
.footer-brand-text{font-family:var(--font-display); font-weight:700; color:var(--white);}
footer h4{color:var(--white); font-family:var(--font-display); font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:14px;}
footer ul{list-style:none; padding:0; margin:0;}
footer li{margin-bottom:10px; font-size:0.92rem;}
footer a:hover{color:var(--white);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--font-mono); font-size:0.78rem; color:#82A0C0;
}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr; gap:28px;}}

/* ---------- Forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-grid .full{grid-column:1 / -1;}
label{
  display:block; font-family:var(--font-mono); font-size:0.74rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--navy-mid);
  margin-bottom:7px;
}
input, select, textarea{
  width:100%; font-family:var(--font-body); font-size:1rem;
  padding:12px 14px; border:1.5px solid #C9D2DA; border-radius:4px;
  background:var(--white); color:var(--ink);
}
input:focus, select:focus, textarea:focus{border-color:var(--brand-blue); outline:none;}
.field{margin-bottom:18px;}
textarea{resize:vertical; min-height:110px;}
@media (max-width:760px){.form-grid{grid-template-columns:1fr;}}

.form-note{font-size:0.85rem; color:var(--ink-soft); margin-top:10px;}
.form-success{
  display:none; background:#173A28; color:#9FE6B8; padding:18px 20px;
  border-radius:6px; font-family:var(--font-mono); font-size:0.92rem;
}

/* ---------- Empty state ---------- */
.empty-state{
  text-align:center; padding:70px 24px; background:var(--white);
  border:1.5px dashed #C9D2DA; border-radius:8px;
}
.empty-state h3{margin-bottom:10px;}
.empty-state p{color:var(--ink-soft); max-width:440px; margin:0 auto 24px;}

/* ---------- Inventory grid ---------- */
.inventory-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media (max-width:960px){.inventory-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.inventory-grid{grid-template-columns:1fr;}}
.listing-card{
  background:var(--white); border:1px solid rgba(11,37,71,0.1); border-radius:8px;
  overflow:hidden; display:flex; flex-direction:column;
}
.listing-photo{height:200px; background:var(--paper-dim); position:relative; overflow:hidden;}
.listing-photo img{width:100%; height:100%; object-fit:cover;}
.listing-body{padding:20px; flex:1; display:flex; flex-direction:column;}
.listing-body h3{font-size:1.1rem; margin-bottom:6px;}
.listing-meta{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;
}
.chip{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.04em;
  background:var(--paper-dim); color:var(--navy-mid);
  padding:4px 9px; border-radius:3px; text-transform:uppercase;
}
.listing-desc{color:var(--ink-soft); font-size:0.92rem; flex:1; margin-bottom:14px;}
.listing-price{
  font-family:var(--font-mono); font-weight:600; color:var(--navy-deep); font-size:1.2rem;
  margin-bottom:14px;
}

.loading-row{text-align:center; padding:50px; color:var(--ink-soft); font-family:var(--font-mono); font-size:0.9rem;}

/* ---------- Page hero (non-home) ---------- */
.page-hero{
  background:var(--navy-deep); color:var(--white); padding:64px 0 56px; position:relative; overflow:hidden;
}
.page-hero h1{color:var(--white); font-size:clamp(1.9rem,4vw,2.8rem); max-width:680px;}
.page-hero p{color:#C9DBEC; max-width:560px; font-size:1.05rem;}

/* ---------- Misc ---------- */
.tag-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--brand-blue); background:rgba(47,143,214,0.1);
  padding:6px 12px; border-radius:20px; margin-bottom:16px;
}
.divider{height:1px; background:rgba(11,37,71,0.1); margin:0;}