/* ==========================================================================
   Atomic Signs - holding site styles
   ========================================================================== */

@font-face
{
   font-family: "Montserrat";
   font-style: normal;
   font-weight: 400 800;
   font-display: swap;
   src: url("/fonts/montserrat-latin.woff2") format("woff2");
}

:root
{
   --atomic_red: #E1121A;
   --atomic_blue: #1B87C9;
   --atomic_green: #A6C939;
   --atomic_yellow: #F2C300;
   --atomic_purple: #7B2582;
   --atomic_ink: #111111;
   --atomic_grey: #555555;
   --atomic_line: #E6E6E6;
   --atomic_bg: #FFFFFF;
}

*
{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

HTML, BODY { height: 100%; }

BODY
{
   font-family: "Montserrat", Arial, Helvetica, sans-serif;
   color: var(--atomic_ink);
   background: var(--atomic_bg);
   line-height: 1.6;
   position: relative;
   overflow-x: hidden;
}

/* Faint atom watermark behind the content */
.backdrop
{
   position: fixed;
   top: -120px;
   right: -120px;
   width: 520px;
   height: 520px;
   max-width: 70vw;
   max-height: 70vw;
   background: url("/images/atomicsigns-icon.png") no-repeat center / contain;
   opacity: 0.06;
   z-index: 0;
   pointer-events: none;
}

.wrap
{
   position: relative;
   z-index: 1;
   max-width: 1060px;
   margin: 0 auto;
   padding: 50px 24px 40px;
   text-align: center;
}

/* Brand -------------------------------------------------------------------- */
.brand { margin-bottom: 34px; }

.logo
{
   width: 100%;
   max-width: 420px;
   height: auto;
}

/* Intro -------------------------------------------------------------------- */
.tagline
{
   font-size: 1.7rem;
   font-weight: 800;
   line-height: 1.25;
   margin-bottom: 22px;
}

.blurb
{
   font-size: 1.02rem;
   color: var(--atomic_grey);
   max-width: 780px;
   margin: 0 auto 22px;
   text-align: left;
}

.notice
{
   font-size: 1.15rem;
   font-weight: 700;
   color: var(--atomic_ink);
   max-width: 620px;
   margin: 6px auto 0;
}

/* Colour accent bar mirroring the atom electrons */
.intro
{
   position: relative;
   padding-bottom: 34px;
   margin-bottom: 34px;
   border-bottom: 1px solid var(--atomic_line);
}

.intro::after
{
   content: "";
   position: absolute;
   left: 50%;
   bottom: -3px;
   transform: translateX(-50%);
   width: 220px;
   height: 6px;
   border-radius: 6px;
   background: linear-gradient(90deg,
      var(--atomic_red) 0 20%,
      var(--atomic_yellow) 20% 40%,
      var(--atomic_green) 40% 60%,
      var(--atomic_blue) 60% 80%,
      var(--atomic_purple) 80% 100%);
}

/* Services ----------------------------------------------------------------- */
.services { margin-bottom: 38px; }

.services-lead
{
   font-weight: 700;
   font-size: 1.1rem;
   margin-bottom: 16px;
}

.services-list
{
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px 12px;
   max-width: 620px;
   margin: 0 auto;
}

.services-list LI
{
   background: #F6F7F2;
   border: 1px solid var(--atomic_line);
   border-radius: 22px;
   padding: 7px 16px;
   font-size: 0.92rem;
   color: var(--atomic_grey);
}

/* Contact ------------------------------------------------------------------ */
.contact-heading
{
   font-size: 1.35rem;
   font-weight: 800;
   margin-bottom: 6px;
}

.contact-intro
{
   font-size: 1.05rem;
   color: var(--atomic_grey);
   margin-bottom: 24px;
}

.contact-grid
{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   max-width: 820px;
   margin: 0 auto 34px;
   text-align: left;
}

.contact-item
{
   padding-left: 16px;
   border-left: 4px solid var(--atomic_green);
}

.contact-item:nth-child(1) { border-left-color: var(--atomic_red); }
.contact-item:nth-child(2) { border-left-color: var(--atomic_blue); }
.contact-item:nth-child(3) { border-left-color: var(--atomic_green); }
.contact-item:nth-child(4) { border-left-color: var(--atomic_purple); }

.contact-label
{
   display: block;
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.09em;
   text-transform: uppercase;
   color: var(--atomic_grey);
   margin-bottom: 4px;
}

.contact-value
{
   display: block;
   font-size: 1.05rem;
   font-weight: 600;
   color: var(--atomic_ink);
   text-decoration: none;
   white-space: nowrap;
}

A.contact-value:hover { color: var(--atomic_blue); }

/* Call to action ----------------------------------------------------------- */
.button
{
   display: inline-block;
   background: var(--atomic_ink);
   color: #FFFFFF;
   font-weight: 700;
   font-size: 1.02rem;
   text-decoration: none;
   padding: 14px 30px;
   border-radius: 4px;
   transition: background 0.2s ease;
}

.button:hover { background: var(--atomic_blue); }

/* Footer ------------------------------------------------------------------- */
.foot
{
   margin-top: 46px;
   padding-top: 22px;
   border-top: 1px solid var(--atomic_line);
   font-size: 0.8rem;
   color: var(--atomic_grey);
}

.credit { margin-top: 8px; }

.credit-link
{
   color: var(--atomic_grey);
   font-weight: 400;
   text-decoration: none;
}

.credit-link:hover { color: var(--atomic_blue); }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 520px)
{
   .wrap { padding: 34px 18px 30px; }
   .tagline { font-size: 1.35rem; }
   .contact-grid
   {
      grid-template-columns: 1fr;
      gap: 18px;
   }
}