/* ===========================================================
   Gladiator Fence Palm Coast
   Palette: steel/black + bronze-gold, matched to the real
   gladiatorfencecompany.com logo (distressed black wordmark with
   a tan/bronze offset) and its live site CSS. See NOTES.md for
   the 2026-07-29 branding update details.
   Type: condensed bold sans headings (Oswald-alt), clean grotesk body
   Layout: asymmetric bordered blocks, sharp corners, no rounded/soft shapes
   =========================================================== */

:root{
  --steel-950:   #14181c;
  --steel-900:   #1c2126;
  --steel-800:   #262c33;
  --steel-700:   #3a424b;
  --steel-500:   #6b7580;
  --steel-300:   #aab2ba;
  --steel-100:   #e7e9eb;
  --crimson:     #926829;
  --crimson-dark:#493414;
  --crimson-light:#c99d5b;
  --paper:       #f4f2ee;
  --white:       #ffffff;
  --ink:         #1a1d20;
  --line:        rgba(20,24,28,0.14);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', Arial, Helvetica, sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 20px; }

h1,h2,h3,h4,.brand,.stat-num{
  font-family:'Oswald', 'Arial Narrow', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.015em;
  line-height:1.1;
  color:var(--steel-950);
}
h1{ font-size:clamp(2.2rem, 7.5vw, 3.8rem); }
h2{ font-size:clamp(1.7rem, 5vw, 2.5rem); }
h3{ font-size:1.2rem; }

.eyebrow{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.78rem;
  color:var(--crimson);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.eyebrow::before{
  content:"";
  width:24px; height:2px;
  background:var(--crimson);
  display:inline-block;
}

.section{ padding:68px 0; }
.section-dark{ background:var(--steel-950); color:var(--steel-100); }
.section-dark h2{ color:var(--white); }
.section-dark .eyebrow{ color:var(--crimson-light); }
.section-tint{ background:var(--steel-100); }

/* ---------- top utility bar ---------- */
.util-bar{
  background:var(--steel-950);
  color:var(--steel-300);
  font-size:0.84rem;
  font-weight:500;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.util-bar .wrap{
  display:flex; flex-wrap:wrap; gap:8px 20px;
  align-items:center; justify-content:space-between;
  padding-top:9px; padding-bottom:9px;
}
.util-bar a{ color:var(--steel-100); font-weight:600; }
.util-bar .util-left{ display:flex; flex-wrap:wrap; gap:6px 20px; }
.util-bar .util-left span{ opacity:0.95; }
.util-bar .badge-veteran{
  color:var(--crimson-light);
  font-weight:700;
  letter-spacing:0.04em;
}

/* ---------- header ---------- */
header{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:60;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  gap:16px;
}
.brand{
  color:var(--steel-950); font-size:1.5rem; display:flex; flex-direction:column; line-height:1.05;
}
.brand .brand-sub{
  font-family:'Inter', sans-serif;
  text-transform:none;
  font-weight:600;
  letter-spacing:0.02em;
  font-size:0.72rem;
  color:var(--steel-500);
  margin-top:3px;
}
.brand span.accent{ color:var(--crimson); }

.logo{
  display:block;
  height:auto;
  max-height:38px;
  width:auto;
  max-width:100%;
}
.logo-footer{
  max-height:40px;
  background:var(--white);
  padding:10px 16px;
  margin-bottom:14px;
  display:inline-block;
}

@media (max-width:420px){
  .logo{ max-height:30px; }
  .brand .brand-sub{ font-size:0.6rem; }
  .header-inner{ padding:12px 14px; gap:8px; }
  .btn-call{ padding:10px 12px; font-size:0.78rem; }
}

@media (min-width:900px){
  .logo{ max-height:46px; }
}

nav.primary-nav{ display:none; }
nav.primary-nav a{
  color:var(--steel-700);
  font-family:'Oswald', sans-serif;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-size:0.9rem;
  padding:10px 4px;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
nav.primary-nav a:hover, nav.primary-nav a.active{ color:var(--crimson); border-bottom-color:var(--crimson); }

.header-actions{ display:flex; align-items:center; gap:12px; }
.btn-call{
  background:var(--crimson);
  color:#fff;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:0.88rem;
  padding:12px 18px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  transition:background .15s;
}
.btn-call:hover{ background:var(--crimson-dark); }

.menu-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  background:var(--steel-950);
  border:none;
  cursor:pointer;
}
.menu-toggle span{ display:block; height:2px; width:22px; background:#fff; margin:0 auto; }

.mobile-nav{
  display:none;
  flex-direction:column;
  background:var(--steel-950);
  border-top:1px solid rgba(255,255,255,0.1);
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{
  color:var(--steel-300);
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  min-height:44px;
  display:flex;
  align-items:center;
}
.mobile-nav a:hover{ color:var(--crimson-light); background:rgba(255,255,255,0.03); }

@media (min-width: 900px){
  nav.primary-nav{ display:flex; gap:30px; align-items:center; }
  .menu-toggle{ display:none; }
  .mobile-nav{ display:none !important; }
}

/* ---------- hero: bordered block, no diagonal gimmick ---------- */
.hero{
  position:relative;
  background:var(--steel-950);
  color:#fff;
  border-bottom:6px solid var(--crimson);
}
.hero-inner{
  position:relative;
  padding:64px 20px 56px;
  max-width:1200px;
  margin:0 auto;
  display:grid;
  gap:36px;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .hero-inner{ grid-template-columns:1.15fr 0.85fr; align-items:end; }
}
.hero h1{
  color:#fff;
  max-width:18ch;
}
.hero h1 .accent{ color:var(--crimson-light); }
.hero p.lede{
  font-size:1.08rem;
  max-width:52ch;
  margin-top:18px;
  color:var(--steel-300);
}
.hero-ctas{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:30px;
}
.btn-primary{
  background:var(--crimson);
  color:#fff;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:16px 28px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:background .15s;
  border:2px solid var(--crimson);
}
.btn-primary:hover{ background:var(--crimson-dark); border-color:var(--crimson-dark); }
.btn-secondary{
  background:transparent;
  color:#fff;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:16px 28px;
  border:2px solid var(--steel-500);
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:border-color .15s, color .15s;
}
.btn-secondary:hover{ border-color:var(--crimson-light); color:var(--crimson-light); }

.hero-panel{
  border:1px solid rgba(255,255,255,0.14);
  padding:26px 24px;
  background:rgba(255,255,255,0.03);
}
.hero-panel .stat-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.hero-panel .stat-row:first-child{ padding-top:0; }
.hero-panel .stat-row:last-child{ border-bottom:none; padding-bottom:0; }
.hero-panel .stat-num{
  color:var(--crimson-light);
  font-size:1.5rem;
}
.hero-panel .stat-label{
  font-family:'Inter', sans-serif;
  color:var(--steel-300);
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-weight:600;
}

/* ---------- intro / trust strip ---------- */
.trust-strip{
  display:grid; gap:1px;
  grid-template-columns:1fr;
  margin-top:36px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (min-width:700px){
  .trust-strip{ grid-template-columns:repeat(4,1fr); }
}
.trust-item{
  background:var(--white);
  padding:26px 22px;
}
.trust-item .trust-num{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  color:var(--crimson);
  font-size:0.85rem;
  letter-spacing:0.1em;
  display:block;
  margin-bottom:10px;
}
.trust-item h3{ margin-bottom:6px; font-size:1.02rem; }
.trust-item p{ color:var(--steel-700); font-size:0.92rem; }

/* ---------- two column layout ---------- */
.split{
  display:grid; gap:32px;
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:860px){
  .split{ grid-template-columns:1fr 1fr; gap:56px; }
  .split.reverse .split-media{ order:2; }
}
.split-media{
  background:var(--steel-800);
  border:1px solid var(--steel-950);
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.split-media .placeholder-graphic{
  width:100%; height:100%;
  background:
    repeating-linear-gradient(90deg, var(--steel-700) 0 4px, var(--steel-800) 4px 46px);
  opacity:0.95;
}
.split-media .ph-label{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:#fff;
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.05em;
  background:rgba(20,24,28,0.6);
  padding:20px;
  font-size:0.95rem;
}
.split-copy p{ margin-top:14px; color:var(--steel-700); }
.split-copy ul{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.split-copy li{
  padding-left:26px; position:relative; color:var(--ink); font-weight:500;
}
.split-copy li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:12px; height:12px;
  background:var(--crimson);
}

/* ---------- services grid ---------- */
.services-grid{
  display:grid; gap:1px;
  grid-template-columns:1fr;
  margin-top:40px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (min-width:640px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .services-grid{ grid-template-columns:repeat(4,1fr); } }

.service-card{
  background:var(--white);
  padding:28px 24px;
  position:relative;
  transition:background .15s;
}
.service-card:hover{ background:var(--steel-100); }
.service-card .num{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  color:var(--crimson);
  font-size:0.85rem;
  letter-spacing:0.1em;
  margin-bottom:10px;
  display:block;
}
.service-card h3{ margin-bottom:8px; }
.service-card p{ color:var(--steel-700); font-size:0.94rem; }

/* ---------- testimonials (react carousel) ---------- */
.tc-wrap{
  max-width:760px;
  margin:36px auto 0;
  background:var(--steel-900);
  border-top:4px solid var(--crimson);
  padding:40px 32px;
}
.tc-quote p{
  font-size:1.2rem;
  color:var(--steel-100);
  line-height:1.55;
}
.tc-quote footer{
  margin-top:20px;
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-size:0.82rem;
  color:var(--crimson-light);
}
.tc-controls{
  display:flex; align-items:center; justify-content:center;
  gap:20px;
  margin-top:28px;
}
.tc-btn{
  width:44px; height:44px;
  background:transparent;
  border:1px solid var(--steel-500);
  color:var(--steel-100);
  font-size:1.3rem;
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
.tc-btn:hover{ border-color:var(--crimson-light); color:var(--crimson-light); }
.tc-dots{ display:flex; gap:10px; }
.tc-dot{
  width:11px; height:11px;
  border-radius:50%;
  background:var(--steel-700);
  border:none;
  cursor:pointer;
  padding:0;
}
.tc-dot-active{ background:var(--crimson); }

/* no-js fallback for testimonial root (hidden once react mounts, shown if it doesn't) */
.tc-noscript{
  max-width:760px; margin:36px auto 0;
  background:var(--steel-900); border-top:4px solid var(--crimson);
  padding:40px 32px; color:var(--steel-100); text-align:center;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--crimson);
  color:#fff;
  padding:52px 0;
  text-align:center;
}
.cta-band h2{ color:#fff; }
.cta-band p{ margin-top:10px; color:rgba(255,255,255,0.9); font-size:1.05rem; }
.cta-band .hero-ctas{ justify-content:center; margin-top:26px; }
.cta-band .btn-secondary{ border-color:#fff; }
.cta-band .btn-secondary:hover{ color:#fff; border-color:var(--steel-950); background:rgba(0,0,0,0.15); }
.cta-band .btn-primary{ background:var(--steel-950); border-color:var(--steel-950); }
.cta-band .btn-primary:hover{ background:var(--steel-900); }

/* ---------- map ---------- */
.map-embed{
  border:1px solid var(--steel-950);
  aspect-ratio:16/9;
  width:100%;
}
.map-embed iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- contact ---------- */
.contact-grid{
  display:grid; gap:1px;
  grid-template-columns:1fr;
  margin-top:36px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (min-width:900px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.contact-card{
  background:var(--white);
  padding:30px 28px;
}
.contact-card h3{ margin-bottom:16px; }
.contact-line{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:0.98rem;
}
.contact-line:last-child{ border-bottom:none; }
.contact-line .label{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  font-size:0.72rem;
  letter-spacing:0.08em;
  color:var(--crimson);
  min-width:70px;
  padding-top:2px;
}
.contact-line a{ color:var(--steel-950); font-weight:600; }
.contact-line a:hover{ color:var(--crimson); }

form.quote-form{ display:flex; flex-direction:column; gap:16px; }
form.quote-form label{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  font-size:0.78rem;
  letter-spacing:0.06em;
  color:var(--steel-950);
  margin-bottom:6px;
  display:block;
}
form.quote-form input, form.quote-form select, form.quote-form textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--steel-500);
  background:#fff;
  font-family:'Inter', sans-serif;
  font-size:1rem;
}
form.quote-form input:focus, form.quote-form select:focus, form.quote-form textarea:focus{
  outline:2px solid var(--crimson);
  outline-offset:1px;
}
form.quote-form textarea{ resize:vertical; min-height:120px; }
form.quote-form .form-note{ font-size:0.82rem; color:var(--steel-500); }
form.quote-form button{
  background:var(--crimson);
  color:#fff;
  font-family:'Oswald',sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:16px;
  border:none;
  cursor:pointer;
  min-height:48px;
  transition:background .15s;
}
form.quote-form button:hover{ background:var(--crimson-dark); }

/* ---------- team ---------- */
.team-grid{
  display:grid; gap:1px;
  grid-template-columns:1fr;
  margin-top:36px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (min-width:640px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
.team-card{
  background:var(--white);
  padding:26px 24px;
  display:flex;
  gap:18px;
  align-items:flex-start;
}
.team-avatar{
  width:56px; height:56px;
  min-width:56px;
  background:var(--steel-800);
  color:var(--crimson-light);
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:1.1rem;
}
.team-card h3{ font-size:1rem; margin-bottom:4px; }
.team-card .role{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  font-size:0.7rem;
  letter-spacing:0.08em;
  color:var(--crimson);
  margin-bottom:10px;
  display:block;
}
.team-card p{ color:var(--steel-700); font-size:0.92rem; }

/* ---------- footer ---------- */
footer{
  background:var(--steel-950);
  color:var(--steel-300);
  padding:52px 0 24px;
  border-top:6px solid var(--crimson);
}
.footer-grid{
  display:grid; gap:32px;
  grid-template-columns:1fr;
}
@media (min-width:700px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } }
footer h4{
  color:#fff; font-size:0.92rem; margin-bottom:14px;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.06em;
}
footer .brand{ margin-bottom:12px; color:#fff; }
footer .brand span.accent{ color:var(--crimson-light); }
footer p{ font-size:0.9rem; color:var(--steel-300); }
footer ul li{ margin-bottom:10px; }
footer ul a{ font-size:0.92rem; color:var(--steel-300); min-height:44px; display:inline-flex; align-items:center; }
footer ul a:hover{ color:var(--crimson-light); }
.footer-bottom{
  margin-top:36px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:0.82rem; color:var(--steel-500);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
}

/* ---------- misc ---------- */
.center{ text-align:center; }
.section-head{ max-width:70ch; }
.section-head.center{ margin:0 auto; text-align:center; }
.mt-lg{ margin-top:48px; }