/*
Theme Name: Atlas PDF 1:1 Landing
Theme URI: https://atlasnow.com/
Author: ChatGPT
Description: Classic one-page WordPress theme built to match the provided Atlas PDF layout (pixel-style, hazard stripes, split hero, split supplies, about, project tiles, rebar footer).
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: atlas-pdf-1to1
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700;800&family=Cinzel:wght@500;600&family=Inter:wght@400;500;600&display=swap');

:root{
  --black:#0b0f14;
  --white:#ffffff;
  --gold:#caa55a;
  --yellow:#f4cf2f;
  --max:1200px;
  --header-h:76px;
}

html{scroll-behavior:smooth; scroll-padding-top: var(--header-h);}
*{box-sizing:border-box;}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#0b1220; background:#fff;}
.container{max-width:var(--max); margin:0 auto; padding:0 22px;}
a{color:inherit;}

.header{
  position:sticky; top:0; z-index:1000;
  background:rgba(15,15,15,.92);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.header-inner{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  color:#fff; text-decoration:none;
  font-family:Oswald, sans-serif; font-weight:700;
  letter-spacing:.7px;
}
.brand img{height:36px; width:auto; display:block;}
.nav{display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-family:Oswald, sans-serif; text-transform:uppercase; letter-spacing:.7px; font-size:13px;}
.nav a{color:rgba(255,255,255,.86); text-decoration:none;}
.nav a:hover{color:var(--gold);}
.nav a.cta{background:var(--gold); color:#000; padding:10px 14px; border-radius:2px;}

.stripe{
  height:14px;
  background: repeating-linear-gradient(135deg, var(--yellow) 0, var(--yellow) 14px, #000 14px, #000 28px);
}

/* HERO (match PDF) */
.hero{background:#fff;}
.hero-grid{
  display:grid;
  grid-template-columns: 45% 55%;
  gap:0;
}
.hero-left{padding:24px 0 0;}
.hero-left .left-pad{padding:0 22px;}
.hero-left .logo{max-width:320px; width:100%; height:auto; display:block; margin:0 auto 8px;}
.hero-left h1{
  margin:0;
  text-align:center;
  font-family:Cinzel, serif;
  font-weight:600;
  letter-spacing:.4px;
  font-size:22px;
}
.hero-left .line1{
  margin:10px 0 0;
  text-align:center;
  font-family:Oswald, sans-serif;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:14px;
}
.hero-left .line2{
  margin:4px 0 0;
  text-align:center;
  font-family:Oswald, sans-serif;
  text-transform:uppercase;
  letter-spacing:.9px;
  font-size:10px;
}
.hero-left .panel{
  margin-top:10px;
  background:#000;
  color:#fff;
  padding:16px 18px 18px;
}
.hero-left .panel p{
  margin:0;
  text-align:center;
  color:rgba(255,255,255,.86);
  line-height:1.65;
  font-size:12px;
}
.hero-left .panel .tel{
  margin-top:12px;
  text-align:center;
  font-family:Oswald, sans-serif;
  letter-spacing:.8px;
  font-size:12px;
  text-transform:uppercase;
}
.btn-yellow{
  display:inline-block;
  margin:10px auto 0;
  background:var(--yellow);
  color:#000;
  font-family:Oswald, sans-serif;
  text-transform:uppercase;
  letter-spacing:.7px;
  font-weight:800;
  font-size:11px;
  padding:10px 16px;
  border-radius:2px;
  text-decoration:none;
}
.hero-right{
  background:#fff;
}
.hero-right img{
  width:100%;
  height: 418px;
  object-fit:cover;
  display:block;
  filter: grayscale(100%) contrast(1.05);
}

/* SUPPLIES */
.supplies{background:#fff;}
.sup-grid{display:grid; grid-template-columns:50% 50%; gap:0;}
.sup-head{
  display:grid; grid-template-columns:50% 50%;
}
.sup-head .left, .sup-head .right{
  padding:16px 22px 10px;
}
.sup-head .left{
  background:#0000;
}
.sup-head .left h2{
  margin:0;
  font-family:Oswald, sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#fff;
  font-size:44px;
  text-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.sup-head .right h2{
  margin:0;
  font-family:Oswald, sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#111;
  font-size:44px;
}
.sup-left{
  position:relative;
  background:#111;
  min-height: 360px;
  overflow:hidden;
}
.sup-left img{
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
}
.sup-left .logo-btm{
  position:absolute;
  left:18px;
  bottom:10px;
  width:160px;
  height:auto;
}
.sup-right{
  padding:18px 22px 18px;
  background:#fff;
}
.bullets{
  margin:0;
  padding:0 0 0 0;
  list-style:none;
  display:grid;
  gap:8px;
  font-size:12px;
}
.bullets li{
  font-family:Oswald, sans-serif;
  text-transform:uppercase;
  letter-spacing:.7px;
  font-weight:700;
  color:#111;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.bullets li:before{
  content:"•";
  font-size:18px;
  line-height:1;
  margin-top:-2px;
}
.actions{margin-top:16px; display:flex; gap:14px; flex-wrap:wrap;}
.actions a{background:var(--yellow); color:#000; text-decoration:none; font-family:Oswald, sans-serif; text-transform:uppercase; letter-spacing:.7px; font-weight:800; font-size:11px; padding:10px 14px; border-radius:2px;}

/* ABOUT */
.about{padding:46px 0 54px;}
.about h3{
  margin:0 0 10px;
  font-family:Cinzel, serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.about-grid{display:grid; grid-template-columns: 42% 58%; gap:20px; align-items:start;}
.about-grid img{width:100%; height:190px; object-fit:cover; display:block;}
.about p{margin:0 0 12px; line-height:1.9; font-size:12px; color:#1f2937;}

/* PROJECTS */
.projects{background:#000; color:#fff; padding:60px 0 62px;}
.projects h2{
  margin:0;
  text-align:center;
  font-family:Oswald, sans-serif;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-weight:700;
  font-size:20px;
}
.projects .sub{
  text-align:center;
  max-width:900px;
  margin:10px auto 22px;
  color:rgba(255,255,255,.78);
  font-size:12px;
  line-height:1.7;
}
.tile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.tile{
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background:#000;
}
.tile img{width:100%; height:120px; object-fit:cover; display:block;}
.tile .cap{
  padding:10px 10px 12px;
  text-align:center;
  color:var(--gold);
  font-family:Cinzel, serif;
  text-transform:uppercase;
  letter-spacing:.9px;
  font-weight:600;
  font-size:12px;
}

/* FOOTER */
.footer-hero{
  background: url("assets/img/rebar.png") center / cover no-repeat;
  padding:80px 0 86px;
  color:#fff;
  position:relative;
}
.footer-hero:before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
.footer-hero .container{position:relative; z-index:1;}
.footer-box{
  background:rgba(0,0,0,.78);
  padding:22px;
  max-width:520px;
}
.footer-box h2{
  margin:0 0 12px;
  font-family:Cinzel, serif;
  font-weight:600;
  font-size:18px;
}
.footer-box .cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  font-size:12px;
  color:rgba(255,255,255,.86);
}
.footer-box a{color:#fff;}
.footer-bottom{
  background:#000;
  color:rgba(255,255,255,.75);
  padding:18px 0;
  text-align:center;
  font-family:Oswald, sans-serif;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:11px;
}

/* Responsive */
@media (max-width: 980px){
  :root{--header-h:92px;}
  .hero-grid, .sup-grid, .sup-head, .about-grid, .tile-grid{grid-template-columns:1fr;}
  .hero-right img{height:340px;}
  .sup-left img{height:320px;}
  .sup-head .left h2, .sup-head .right h2{font-size:40px;}
  .footer-box .cols{grid-template-columns:1fr;}
}