/* ============================================================
   MODERN THEME — dark, bold, glassy
   Same class names as style.css so it's a drop-in alternative,
   switched from Admin > Site Settings > Theme.
   Palette driven by the same CSS variables (--red = brand
   primary, --navy = brand dark) so admin color choices still
   apply. In this theme --red becomes the glow/accent color.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --red: #F0821D;              /* brand accent (admin-controlled) */
  --red-dark: #C9660D;
  --navy: #0D0F12;             /* page background (admin-controlled) */
  --surface: #16191E;          /* card background */
  --surface-2: #1D2127;        /* raised card */
  --line: #2A2F37;             /* borders */
  --text: #F2F3F5;
  --muted: #9AA3AF;
  --sun: #F4A825;
  --steel: #9AA3AF;            /* alias so shared markup styles map */
  --warm: #0D0F12;             /* alias: page bg */
  --radius: 18px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 400px at 85% -10%, color-mix(in srgb, var(--red) 22%, transparent), transparent 70%),
    var(--navy);
  line-height:1.65;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:'Sora',sans-serif;font-weight:700;line-height:1.15;letter-spacing:-0.01em;}
.container{max-width:1160px;margin:0 auto;padding:0 24px;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 30px;border-radius:999px;font-weight:600;
  font-size:15px;border:1px solid transparent;cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:var(--red);color:#0B0C0E;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--red) 50%, transparent),
             0 10px 32px color-mix(in srgb, var(--red) 35%, transparent);
}
.btn-primary:hover{background:var(--red-dark);color:#fff;}
.btn-outline{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.03);}
.btn-outline:hover{border-color:var(--red);color:var(--red);}
.btn-navy{background:var(--surface-2);color:var(--text);border-color:var(--line);}
.btn-navy:hover{border-color:var(--red);}

.eyebrow{
  display:inline-block;font-family:'Sora',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:12px;
}

/* ---------- Divider: subtle glow line instead of stripes ---------- */
.stripe-divider{height:1px;background:linear-gradient(90deg, transparent, var(--red), transparent);opacity:.5;margin:0;}
.stripe-divider svg{display:none;}

/* ---------- Header ---------- */
.top-bar{
  background:rgba(255,255,255,.03);color:var(--muted);font-size:13px;
  border-bottom:1px solid var(--line);
}
.top-bar .container{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:6px;
}
.top-bar a{color:var(--red);font-weight:600;}
.site-header{
  background:color-mix(in srgb, var(--navy) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;
}
.logo{
  display:flex;align-items:center;gap:11px;
  font-family:'Sora',sans-serif;font-weight:800;font-size:19px;
  color:var(--text);
}
.logo .mark{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  display:flex;align-items:center;justify-content:center;
  color:#0B0C0E;font-size:17px;
  box-shadow:0 0 20px color-mix(in srgb, var(--red) 40%, transparent);
}
.logo .mark span{display:inline-block;}
.logo small{display:block;font-family:'Inter';font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}
.logo img{border-radius:10px;}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{font-weight:500;font-size:14.5px;color:var(--muted);padding:4px 0;transition:color .15s;}
.nav-links a.active,.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--red);}
.nav-cta{display:flex;align-items:center;gap:16px;}
.nav-phone{font-weight:700;font-size:15px;}
.nav-phone small{display:block;font-weight:500;font-size:11px;color:var(--muted);}
.nav-phone a{color:var(--red);}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;font-size:20px;cursor:pointer;color:var(--text);padding:6px 10px;}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:transparent;color:var(--text);overflow:hidden;
  padding:96px 0 110px;
}
.hero::after{display:none;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative;z-index:2;}
.hero h1{
  font-size:clamp(36px,5vw,60px);margin-bottom:22px;font-weight:800;
  background:linear-gradient(120deg, var(--text) 55%, var(--red));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{font-size:17.5px;color:var(--muted);max-width:540px;margin-bottom:34px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-badges{display:flex;gap:34px;margin-top:48px;flex-wrap:wrap;}
.hero-badges div{font-size:13px;color:var(--muted);}
.hero-badges strong{display:block;font-family:'Sora';font-size:26px;color:var(--red);}
.hero-visual{
  position:relative;z-index:2;
  background:rgba(20,22,26,.55);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  padding:30px;color:var(--text);
  box-shadow:0 24px 70px rgba(0,0,0,.5), 0 0 40px color-mix(in srgb, var(--red) 10%, transparent);
}
.hero-visual h3{font-size:17px;margin-bottom:16px;}
.hero-visual .row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted);}
.hero-visual .row:last-child{border-bottom:none;}
.hero-visual .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);flex-shrink:0;}

/* ---------- Sections ---------- */
section{padding:88px 0;}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;}
.section-head p{color:var(--muted);margin-top:14px;font-size:16px;}

/* Services grid */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.service-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.service-card:hover{
  transform:translateY(-5px);border-color:color-mix(in srgb, var(--red) 55%, var(--line));
  box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 30px color-mix(in srgb, var(--red) 12%, transparent);
}
.service-icon{
  width:48px;height:48px;border-radius:14px;
  background:color-mix(in srgb, var(--red) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--red) 40%, transparent);
  display:flex;align-items:center;justify-content:center;color:var(--red);margin-bottom:20px;
  font-size:20px;
}
.service-card h3{font-size:18px;margin-bottom:10px;color:var(--text);}
.service-card p{color:var(--muted);font-size:14.5px;}
.service-card a{color:var(--red);font-weight:600;font-size:14px;display:inline-block;margin-top:16px;}

/* Why us / stats */
.why-strip{
  background:linear-gradient(180deg, var(--surface), transparent);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  color:var(--text);padding:56px 0;
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.stats-grid strong{display:block;font-family:'Sora';font-size:36px;font-weight:800;color:var(--red);}
.stats-grid span{font-size:13px;color:var(--muted);}

/* Two column feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.split img,.split .imgbox{border-radius:var(--radius);}
.split .imgbox{border:1px solid var(--line);background:var(--surface) !important;}
.checklist li{display:flex;gap:12px;margin-bottom:15px;font-size:15px;align-items:flex-start;color:var(--muted);}
.checklist li::before{
  content:"✓";flex-shrink:0;width:22px;height:22px;border-radius:8px;
  background:color-mix(in srgb, var(--red) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--red) 45%, transparent);
  color:var(--red);font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700;margin-top:2px;
}

/* Testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.testi-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;
}
.testi-stars{color:var(--sun);margin-bottom:14px;font-size:15px;letter-spacing:2px;}
.testi-card p{font-style:normal;color:var(--text);margin-bottom:18px;font-size:15px;}
.testi-name{font-weight:600;font-size:13.5px;color:var(--muted);}

/* CTA band */
.cta-band{
  background:
    radial-gradient(600px 200px at 50% 0%, color-mix(in srgb, var(--red) 30%, transparent), transparent 70%),
    var(--surface);
  border-top:1px solid var(--line);
  color:var(--text);padding:72px 0;text-align:center;
}
.cta-band h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;margin-bottom:14px;}
.cta-band p{margin-bottom:30px;color:var(--muted);}
.cta-band .btn-outline{border-color:var(--red);color:var(--red);}
.cta-band .btn-outline:hover{background:var(--red);color:#0B0C0E;}

/* Careers */
.job-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 28px;margin-bottom:16px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  transition:border-color .2s;
}
.job-card:hover{border-color:color-mix(in srgb, var(--red) 55%, var(--line));}
.job-card h3{font-size:17px;margin-bottom:6px;color:var(--text);}
.job-card p{color:var(--muted);font-size:14.5px;max-width:520px;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;}
.contact-info-card{
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);color:var(--text);border-radius:var(--radius);padding:32px;
}
.contact-info-card .row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);}
.contact-info-card .row:last-child{border-bottom:none;}
.contact-info-card .row b{display:block;font-size:15px;color:var(--text);}
.contact-info-card .row span{font-size:13.5px;color:var(--muted);}
.form-field{margin-bottom:16px;}
.form-field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--muted);}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;
  font-family:'Inter';font-size:14.5px;background:var(--surface);color:var(--text);
}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--red);}
.form-field textarea{min-height:120px;resize:vertical;}
.form-note{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;}

/* Footer */
footer{background:transparent;border-top:1px solid var(--line);color:var(--muted);padding:60px 0 26px;}
.footer-grid{display:flex;flex-wrap:wrap;gap:28px;margin-bottom:38px;}
.footer-grid > div{flex:1;min-width:150px;}
.footer-grid > div:first-child{flex:1.6;min-width:220px;}
.footer-grid h4{color:var(--text);font-size:15px;margin-bottom:16px;}
.footer-grid ul li{margin-bottom:10px;font-size:14px;}
.footer-grid ul li a:hover{color:var(--red);}
.footer-bottom{border-top:1px solid var(--line);padding-top:20px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* Alerts */
.alert{padding:14px 18px;border-radius:12px;margin-bottom:18px;font-size:14.5px;}
.alert-success{background:rgba(46,160,67,.12);color:#5BD778;border:1px solid rgba(46,160,67,.4);}
.alert-error{background:rgba(214,43,39,.12);color:#FF7B77;border:1px solid rgba(214,43,39,.4);}

/* Page content (custom Pages) */
.page-content{color:var(--muted);}
.page-content h1,.page-content h2,.page-content h3{color:var(--text);margin:26px 0 12px;}
.page-content p{margin-bottom:16px;}
.page-content ul,.page-content ol{margin:0 0 16px 22px;}
.page-content ul{list-style:disc;}
.page-content ol{list-style:decimal;}
.page-content img{border-radius:var(--radius);margin:20px 0;}
.page-content a{color:var(--red);text-decoration:underline;}

/* Responsive */
@media(max-width:1150px){
  /* 8 nav items (Home, Services, Areas We Serve, Gallery, About, FAQ,
     Careers, Contact) plus the phone widget and Book button no longer
     fit in one row below this width, so switch to the hamburger menu
     much earlier than a typical 2-3 item nav would need. */
  .nav-links{display:none;}
  .burger{display:block;}
}
@media(max-width:900px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr;}
  .services-grid,.testi-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);row-gap:28px;}
  .footer-grid > div{min-width:45%;}
}
@media(max-width:640px){
  .services-grid,.testi-grid{grid-template-columns:1fr;}
  .footer-grid > div,.footer-grid > div:first-child{min-width:100%;flex:1 1 100%;}
  .job-card{flex-direction:column;align-items:flex-start;}
  .nav-wrap{padding:12px 0;flex-wrap:nowrap;}
  .logo{font-size:15px;gap:8px;}
  .logo .mark{width:32px;height:32px;font-size:14px;flex-shrink:0;}
  .logo small{font-size:9px;}
  .logo img{height:32px !important;}
  .nav-cta{gap:8px;}
  .nav-phone{display:none;}
  .nav-cta .btn-primary{padding:10px 16px;font-size:13px;white-space:nowrap;}
  .burger{flex-shrink:0;}
  .top-bar .container{flex-direction:column;align-items:flex-start;font-size:12px;gap:2px;}
  .hero{padding:64px 0 72px;}
}
@media(max-width:380px){
  .nav-cta .btn-primary{padding:9px 12px;font-size:12px;}
  .logo span > small{display:none;}
}
.service-icon svg{width:22px;height:22px;}

/* Full-bleed hero background wrapper (behind top-bar + header on homepage) */
.hero-bg-wrap{position:relative;background-size:cover;background-position:center top;}
.hero-bg-wrap .top-bar.on-photo{background:rgba(0,0,0,.3);border-bottom-color:rgba(255,255,255,.1);}
.hero-bg-wrap .site-header.on-photo{background:rgba(0,0,0,.22) !important;border-bottom-color:rgba(255,255,255,.1) !important;}

/* Content Blocks (Admin > Content Blocks) - generic sections added to any page */
.page-content-block{padding:60px 0;border-top:1px solid var(--line);}
.page-content-block h2{font-size:clamp(24px,3vw,32px);margin-bottom:18px;color:var(--text);}

/* Optional text color overrides (Admin > Site Settings > Text Colors).
   Defaults to "inherit" so nothing changes unless explicitly set. */
:root{ --heading-color: inherit; --body-color: inherit; }
h1,h2,h3,h4,h5,h6{color:var(--heading-color);}
body{color:var(--body-color);}