/* =========================================================
   HAMERS — Fire Detection & Alarm Systems
   Design system: "Signal" — graphite + ember, datasheet grid
   ========================================================= */

:root{
  /* Color tokens */
  --ink:        #14181C;   /* graphite — headers, footer, primary text on light */
  --ink-soft:   #3E4A52;   /* steel blue-grey — secondary text, rules on dark */
  --paper:      #F6F3EE;   /* warm paper — page background */
  --paper-dim:  #EDE8DF;   /* slightly deeper paper — alternating sections */
  --ember:      #C4432B;   /* primary accent — CTAs, active states */
  --ember-dark: #9E3320;   /* ember hover/pressed */
  --amber:      #E2A83D;   /* secondary accent — highlights, tags */
  --line:       rgba(20,24,28,0.14);      /* hairline rule on paper */
  --line-dark:  rgba(246,243,238,0.16);   /* hairline rule on ink */
  --white:      #FFFFFF;

  /* Type */
  --font-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', Tahoma, sans-serif;

  /* Scale (major third-ish, tuned) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 2.9rem);
  --step-4:  clamp(2.8rem, 2.1rem + 3.5vw, 4.4rem);

  --container: 1180px;
  --gutter: 24px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
p{ margin:0 0 1em; color: var(--ink-soft); max-width: 62ch; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--font-body);
  font-weight:600;
  font-size: var(--step--1);
  padding: 0.85em 1.5em;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background: var(--ember); color: var(--white); }
.btn-primary:hover{ background: var(--ember-dark); }
.btn-ghost{ border-color: currentColor; color: var(--ink); background:transparent; }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }
.btn-ghost-light{ border-color: rgba(246,243,238,0.5); color: var(--paper); background:transparent; }
.btn-ghost-light:hover{ background: var(--paper); color: var(--ink); }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 84px;
}
.logo{ display:flex; align-items:center; gap:.6em; }
.logo img{ height: 30px; width:auto; }
.logo-word{
  font-family: var(--font-display); font-weight:800; font-size:1.28rem;
  letter-spacing:-0.02em; color: var(--ink);
}
.logo-word span{ color: var(--ember); }

.main-nav ul{ display:flex; gap: 2.1rem; }
.main-nav a{
  font-size: var(--step--1); font-weight:600; color: var(--ink-soft);
  padding: 6px 0; position:relative;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color: var(--ink); }
.main-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background: var(--ember);
}
.header-actions{ display:flex; align-items:center; gap:1.2rem; }
.header-tel{ font-size: var(--step--1); font-weight:600; color: var(--ink); white-space:nowrap; }
.header-tel small{ display:block; font-weight:500; color: var(--ink-soft); font-size:0.72rem; }

.nav-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{
  border-bottom: 1px solid var(--line);
}
.hero .wrap{
  display:grid; grid-template-columns: 1.1fr 0.9fr;
  align-items:stretch; gap: 0;
  min-height: 560px;
}
.hero-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding-block: 4rem; padding-inline-end: 4rem;
}
.eyebrow{
  font-size: var(--step--1); font-weight:600; color: var(--ember);
  margin-bottom: 1rem; display:block;
}
.hero h1{ font-size: var(--step-4); max-width: 14ch; }
.hero p.lede{ font-size: var(--step-1); color: var(--ink-soft); max-width: 42ch; margin-top:1rem; }
.hero-actions{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }
.hero-figure{
  position:relative; overflow:hidden; background: var(--ink);
  margin-inline-end: calc(var(--gutter) * -1);
}
.hero-figure img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Stat strip ---------- */
.stat-strip{ border-bottom:1px solid var(--line); background: var(--paper-dim); }
.stat-strip .wrap{
  display:grid; grid-template-columns: repeat(4,1fr);
}
.stat{
  padding: 2.2rem 1.6rem;
  border-inline-start: 1px solid var(--line);
}
.stat:first-child{ border-inline-start:none; }
.stat b{
  display:block; font-family: var(--font-display); font-size: var(--step-3);
  color: var(--ink); font-weight:800; letter-spacing:-0.02em;
}
.stat span{ font-size: var(--step--1); color: var(--ink-soft); }

/* ---------- Sections ---------- */
.section{ padding-block: 6rem; }
.section-alt{ background: var(--paper-dim); }
.section-head{ max-width: 640px; margin-bottom: 3rem; }
.section-head .eyebrow{ margin-bottom:.6rem; }
.section-head h2{ font-size: var(--step-3); }

.row-feature{
  display:grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items:center;
}
.row-feature + .row-feature{ margin-top: 5.5rem; }
.row-feature.reverse .rf-figure{ order:2; }
.rf-figure img{ border-radius:2px; }
.rf-copy h3{ font-size: var(--step-2); }
.rf-list{ margin-top:1.4rem; }
.rf-list li{
  padding-block: .7rem; border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size: var(--step--1);
  display:flex; gap:.7em;
}
.rf-list li:last-child{ border-bottom: 1px solid var(--line); }
.rf-list li::before{ content:"—"; color: var(--ember); flex-shrink:0; }

/* ---------- Product rows (datasheet list) ---------- */
.product-list{ border-top:1px solid var(--line); }
.product-row{
  display:grid; grid-template-columns: 140px 1.3fr 1.7fr auto;
  gap: 2rem; align-items:center;
  padding-block: 1.8rem;
  border-bottom: 1px solid var(--line);
}
.product-row .p-thumb{
  width:140px; height:100px; background: var(--ink); overflow:hidden; border-radius:2px;
}
.product-row .p-thumb img{ width:100%; height:100%; object-fit:cover; }
.product-row h3{ font-size: var(--step-1); margin-bottom:.3em; }
.product-row .p-tag{
  display:inline-block; font-size:0.72rem; font-weight:700; color: var(--ember);
  border:1px solid var(--ember); border-radius:2px; padding:.15em .6em; margin-bottom:.5em;
}
.product-row p{ font-size: var(--step--1); margin:0; }
.product-row .p-specs{ font-size: var(--step--1); color: var(--ink-soft); }
.product-row .p-specs div{ padding-block:.15rem; }
.product-row .p-specs b{ color: var(--ink); }

/* ---------- Cards (used sparingly: blog, team) ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2.4rem; }
.blog-card figure{ margin:0 0 1.1rem; aspect-ratio: 4/3; overflow:hidden; background:var(--ink); }
.blog-card img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.blog-card:hover img{ transform: scale(1.04); }
.blog-card .meta{ font-size:0.78rem; color: var(--ember); font-weight:700; margin-bottom:.5rem; }
.blog-card h3{ font-size: var(--step-1); }
.blog-card p{ font-size: var(--step--1); }

.team-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }
.team-card figure{ aspect-ratio:1; overflow:hidden; margin-bottom:1rem; background:var(--ink); }
.team-card img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.team-card h4{ font-size: var(--step-0); margin-bottom:.1em; }
.team-card span{ font-size:0.82rem; color: var(--ink-soft); }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--ink); color: var(--paper); }
.cta-band .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding-block: 3.6rem; flex-wrap:wrap;
}
.cta-band h2{ font-size: var(--step-2); color: var(--paper); max-width: 20ch; margin:0; }
.cta-band p{ color: rgba(246,243,238,0.7); }

/* ---------- Logos strip ---------- */
.logo-strip{ border-top:1px solid var(--line); padding-block:2.6rem; }
.logo-strip .wrap{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.logo-strip img{ height:26px; opacity:.55; filter:grayscale(1); }

/* ---------- Page header (interior pages) ---------- */
.page-head{ padding-block: 3.6rem 3rem; border-bottom:1px solid var(--line); }
.page-head .eyebrow{ margin-bottom:.6rem; }
.page-head h1{ font-size: var(--step-3); max-width: 20ch; }
.breadcrumb{ font-size:0.8rem; color: var(--ink-soft); margin-bottom:1.4rem; }
.breadcrumb a{ color: var(--ink-soft); }
.breadcrumb a:hover{ color: var(--ember); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:0.82rem; font-weight:600; color: var(--ink); }
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size:var(--step-0);
  padding:.85em 1em; border:1px solid var(--line); background: var(--white);
  border-radius:2px; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--ember);
}
.field textarea{ resize:vertical; min-height:130px; }

.contact-info-list li{
  display:flex; gap:1rem; padding-block:1.1rem; border-top:1px solid var(--line);
}
.contact-info-list li:last-child{ border-bottom:1px solid var(--line); }
.contact-info-list b{ display:block; color:var(--ink); }
.contact-info-list span{ font-size:var(--step--1); color: var(--ink-soft); }
.ico{ width:22px; height:22px; flex-shrink:0; color: var(--ember); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(246,243,238,0.75); }
.footer-top{
  padding-block: 4.2rem 2.6rem;
  display:grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap: 2.5rem;
}
.footer-top .logo-word{ color: var(--paper); }
.footer-about p{ font-size: var(--step--1); color: rgba(246,243,238,0.6); margin-top:1rem; }
.footer-col h5{
  font-family: var(--font-body); font-size:0.78rem; font-weight:700; letter-spacing:0.02em;
  color: var(--paper); margin-bottom:1.1rem;
}
.footer-col li{ margin-bottom:.7rem; font-size: var(--step--1); }
.footer-col a:hover{ color: var(--amber); }
.footer-bottom{
  border-top:1px solid var(--line-dark);
  padding-block:1.6rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  font-size:0.78rem; color: rgba(246,243,238,0.5);
}
.social-links{ display:flex; gap:.9rem; }
.social-links a{
  width:32px; height:32px; border:1px solid var(--line-dark); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
}
.social-links a:hover{ border-color: var(--amber); color: var(--amber); }

/* ---------- One signature moment: hero reveal ---------- */
.hero-copy, .hero-figure{
  animation: rise .7s cubic-bezier(.2,.7,.2,1) both;
}
.hero-figure{ animation-delay:.12s; }
@keyframes rise{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-copy,.hero-figure{ animation:none; }
}

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
.divider{ height:1px; background:var(--line); border:0; margin: 5rem 0; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .row-feature{ grid-template-columns:1fr; gap:2rem; }
  .row-feature.reverse .rf-figure{ order:0; }
  .card-grid{ grid-template-columns: repeat(2,1fr); }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .footer-about{ grid-column: 1 / -1; }
  .stat-strip .wrap{ grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(3){ border-inline-start:none; }

  .product-row{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .product-row .p-thumb{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .product-row .p-specs, .product-row > a{
    grid-column: 1;
  }
  .product-row > a{ align-self:flex-start; }
}

@media (max-width: 760px){
  .main-nav, .header-tel{ display:none; }
  .nav-toggle{
    display:flex; width:40px; height:40px; align-items:center; justify-content:center;
    background:none; border:1px solid var(--line); border-radius:2px; color:var(--ink);
  }
  .site-header.nav-open .main-nav{
    display:block; position:absolute; left:0; right:0; top:84px;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding: 1rem var(--gutter) 1.6rem;
  }
  .site-header.nav-open .main-nav ul{ flex-direction:column; gap:0; }
  .site-header.nav-open .main-nav li{ border-top:1px solid var(--line); }
  .site-header.nav-open .main-nav li:first-child{ border-top:none; }
  .site-header.nav-open .main-nav a{ display:block; padding:.9rem 0; }
  .site-header{ position:relative; }
  .hero .wrap{ grid-template-columns:1fr; min-height:auto; }
  .hero-copy{ padding-block:2.6rem 1.6rem; padding-inline-end:0; }
  .hero-figure{ margin-inline-end:0; height:280px; order:-1; }
  .hero h1{ font-size: var(--step-3); max-width:none; }
  .card-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .cta-band .wrap{ flex-direction:column; align-items:flex-start; }
}