/* Logosalways — rebuilt site (Flash-free)
   Faithful dark aesthetic, modern responsive build */

:root{
  --bg:#000000;
  --bg-soft:#0c0c0d;
  --panel:#141416;
  --line:#2a2a2e;
  --text:#f3f3f3;
  --muted:#9a9aa2;
  --red:#d8232a;       /* drawn from the Logosalways brand mark */
  --red-deep:#a51319;
  --white-card:#ffffff;
  --radius:14px;
  --maxw:1140px;
  --font: "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif;
}

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

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  height:74px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:42px;width:auto}
.brand .word{font-weight:700;letter-spacing:.5px;font-size:1.15rem}
.brand .word b{color:var(--red)}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{
  padding:9px 14px;border-radius:999px;color:var(--muted);
  font-size:.93rem;font-weight:600;letter-spacing:.2px;
  transition:color .2s,background .2s;
}
.nav-links a:hover{color:#fff;background:#1b1b1e}
.nav-links a.active{color:#fff;background:var(--red)}
.nav-cta{
  padding:9px 18px;border-radius:999px;background:var(--red);color:#fff !important;
}
.nav-cta:hover{background:var(--red-deep)!important}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}

/* ---------- Home splash ---------- */
.splash{
  background:#000;
  min-height:calc(100vh - 74px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:40px 24px;
}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:28px}
.splash-mark{
  width:min(440px,72vw);height:auto;
}
.splash-tagline{
  margin:0;color:#fff;font-weight:700;letter-spacing:.3px;
  font-size:clamp(1.05rem,2.6vw,1.6rem);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:110px 0 90px;
  text-align:center;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(560px 320px at 50% -8%, rgba(216,35,42,.28), transparent 70%),
    radial-gradient(700px 500px at 80% 120%, rgba(216,35,42,.10), transparent 70%);
  pointer-events:none;
}
.hero .mark{height:90px;margin:0 auto 26px;width:auto;filter:drop-shadow(0 10px 30px rgba(216,35,42,.35))}
.tagline{
  font-size:clamp(1.9rem,5vw,3.4rem);
  font-weight:800;line-height:1.1;margin:0 0 18px;letter-spacing:-.5px;
}
.tagline .sep{color:var(--red)}
.hero p.lead{
  max-width:640px;margin:0 auto 34px;color:var(--muted);font-size:1.12rem;
}
.btn{
  display:inline-block;padding:14px 30px;border-radius:999px;font-weight:700;
  font-size:1rem;cursor:pointer;border:1px solid transparent;transition:.2s;
}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--line);color:#fff;margin-left:10px}
.btn-ghost:hover{border-color:var(--red);color:#fff}

/* ---------- Sections ---------- */
.section{padding:84px 0}
.section.alt{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{color:var(--red);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.78rem;margin:0 0 12px}
.section h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin:0 0 16px;font-weight:800;letter-spacing:-.4px}
.section .intro{max-width:680px;color:var(--muted);font-size:1.08rem;margin-bottom:8px}
.center{text-align:center}
.center .intro{margin-left:auto;margin-right:auto}

/* ---------- Portfolio grid ---------- */
.logo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;
}
.logo-card{
  background:var(--white-card);border-radius:var(--radius);
  padding:34px 26px 22px;text-align:center;
  border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  min-height:200px;transition:.25s;
}

/* ---------- Lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(0,0,0,.85);backdrop-filter:blur(4px);
}
.lb.open{display:flex}
.lb-panel{
  position:relative;background:#fff;border-radius:16px;
  max-width:760px;width:100%;max-height:90vh;overflow:auto;
  padding:30px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:lbpop .18s ease;
}
@keyframes lbpop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.lb-imgwrap{display:flex;align-items:center;justify-content:center;min-height:240px}
.lb-imgwrap img{max-width:100%;max-height:62vh;width:auto;object-fit:contain}
.lb-caption{margin-top:18px}
.lb-name{color:#111;font-weight:800;font-size:1.2rem}
.lb-desc{color:#666;font-size:.95rem;margin-top:4px;max-width:520px;margin-left:auto;margin-right:auto}
.lb-close{
  position:absolute;top:10px;right:14px;border:0;background:transparent;
  font-size:2rem;line-height:1;color:#999;cursor:pointer;width:40px;height:40px;border-radius:50%;
}
.lb-close:hover{color:#111;background:#f0f0f0}
.logo-card{cursor:pointer}
.logo-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.logo-card:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.logo-card .logo-img{height:90px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.logo-card .logo-img img{max-height:90px;width:auto;object-fit:contain}
.logo-card .client{color:#1a1a1a;font-weight:700;font-size:.95rem}
.logo-card .ctype{color:#7a7a7a;font-size:.8rem;margin-top:2px}

/* feature row on home */
.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}

/* ---------- Cards (generic / flyers) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;transition:.25s;
}
.card:hover{border-color:var(--red);transform:translateY(-4px)}
.card h3{margin:0 0 8px;font-size:1.15rem}
.card p{color:var(--muted);margin:0;font-size:.96rem}
.card .thumb{
  height:170px;border-radius:10px;margin-bottom:18px;overflow:hidden;
  background:#fff;display:flex;align-items:center;justify-content:center;
}
.card .thumb img{height:100%;width:100%;object-fit:cover}

/* attributes / steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.step .num{
  width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:14px;
}
.step h3{margin:0 0 6px;font-size:1.1rem}
.step p{color:var(--muted);margin:0;font-size:.95rem}

/* ---------- Forms ---------- */
.form-wrap{max-width:760px;margin:40px auto 0}
.form-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:36px}
.field{margin-bottom:22px}
.field label{display:block;font-weight:600;margin-bottom:8px;font-size:.95rem}
.field .hint{color:var(--muted);font-weight:400;font-size:.85rem;display:block;margin-top:2px}
.field input,.field textarea{
  width:100%;background:#0a0a0b;border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;color:#fff;font-family:inherit;font-size:1rem;transition:border .2s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.field textarea{min-height:120px;resize:vertical}
.attrs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:6px}
.attr{
  position:relative;
}
.attr input{position:absolute;opacity:0;pointer-events:none}
.attr label{
  display:block;text-align:center;cursor:pointer;
  background:#0a0a0b;border:1px solid var(--line);border-radius:999px;
  padding:10px 6px;font-size:.9rem;font-weight:600;margin:0;transition:.2s;color:var(--muted);
}
.attr input:checked + label{background:var(--red);border-color:var(--red);color:#fff}
.attr label:hover{border-color:var(--red);color:#fff}
.form-note{color:var(--muted);font-size:.9rem;margin-top:6px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:40px;align-items:start}
.contact-info p{margin:0 0 6px}
.contact-info .big{font-size:1.35rem;font-weight:800}
.contact-info a.mail{color:var(--red);font-weight:700;font-size:1.2rem}
.muted{color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);background:#000;padding:50px 0 34px;margin-top:10px}
.footer-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:28px}
.footer-top .brand .word{font-size:1.05rem}
.footer-links{display:flex;gap:26px;flex-wrap:wrap}
.footer-links a{color:var(--muted);font-size:.92rem}
.footer-links a:hover{color:#fff}
.legal{color:#6a6a72;font-size:.8rem;line-height:1.7;border-top:1px solid var(--line);padding-top:22px;max-width:760px}

/* ---------- Notice ---------- */
.notice{
  margin-top:26px;background:#101011;border:1px dashed var(--line);
  border-radius:12px;padding:14px 18px;color:var(--muted);font-size:.86rem;
}
.notice b{color:#cfcfd4}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .nav-links{
    display:none;position:absolute;top:74px;left:0;right:0;
    flex-direction:column;background:#0a0a0b;border-bottom:1px solid var(--line);
    padding:14px 24px;gap:4px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px;border-radius:10px}
  .menu-btn{display:block}
  .logo-grid,.feature-strip,.cards,.steps{grid-template-columns:repeat(2,1fr)}
  .attrs{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:540px){
  .logo-grid,.feature-strip,.cards,.steps{grid-template-columns:1fr}
  .attrs{grid-template-columns:repeat(2,1fr)}
  .hero{padding:70px 0 60px}
  .btn-ghost{margin-left:0;margin-top:10px}
}