@charset "utf-8";

/* /home/headajyj/public_html/headsntail/assets/css/layout.css */
/* GLOBAL LAYOUT ONLY — Header/Footer moved to their own CSS */

/* =========================
   Reset
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Orbitron','Rajdhani',sans-serif;
  background:#0a0a0a;
  color:#ffffff;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =========================
   Global container helper
========================= */

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* =========================
   Section spacing
========================= */

section{
  position:relative;
}

/* =========================
   Main
========================= */

main{
  display:block;
  width:100%;
}

/* =========================
   Images
========================= */

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* =========================
   Links
========================= */

a{
  color:inherit;
  text-decoration:none;
}

/* =========================
   Lists
========================= */

ul,
ol{
  margin:0;
  padding:0;
}

/* =========================
   Form elements
========================= */

input,
textarea,
select,
button{
  font:inherit;
}

button{
  border:none;
  outline:none;
  background:none;
}

/* =========================
   Utility reveal state
========================= */

.service-card,
.process-step,
.focus-point,
.info-card,
.contact-card,
.stat-card{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .45s ease, transform .45s ease;
}

.service-card.is-visible,
.process-step.is-visible,
.focus-point.is-visible,
.info-card.is-visible,
.contact-card.is-visible,
.stat-card.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   Mobile helper
========================= */

@media (max-width:768px){

  body{
    font-size:14px;
  }

  .container{
    padding:0 18px;
  }

}