/* Frotcom Child Theme — Main Stylesheet */


:root {
  --red:#CF0A2C; --red-dark:#a80823; --dark-blue:#263646;
  --dark-blue-80:#4D5A66; --dark-blue-60:#76808A; --dark-blue-40:#A2A8AF;
  --dark-blue-20:#D0D2D6; --dark-blue-10:#EDEDED; --light-blue:#0081C9; --white:#ffffff;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Lato',sans-serif;background:var(--white);color:var(--dark-blue);line-height:1.65;padding-top:68px;}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 3rem;height:68px;background:var(--white);border-bottom:2px solid var(--red);}
.nav-logo{text-decoration:none;display:flex;flex-direction:column;}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none;}
.nav-links a{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-blue);text-decoration:none;transition:color .2s;}
.nav-links a:hover{color:var(--red);}
.nav-cta{background:var(--red);color:var(--white)!important;padding:10px 22px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .2s;}
.nav-cta:hover{background:var(--red-dark)!important;}

/* ── OFFER BAND ── */
.offer-band{background:var(--dark-blue);color:var(--white);text-align:center;padding:10px 2rem;font-size:13px;font-weight:300;}
.offer-band strong{color:var(--red);font-weight:700;text-transform:uppercase;}
.offer-band a{color:var(--light-blue);text-decoration:none;}
.offer-band a:hover{text-decoration:underline;}

/* ── BUTTONS ── */
.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:var(--white);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:16px 32px;text-decoration:none;transition:background .2s,transform .15s;}
.btn-primary:hover{background:var(--red-dark);transform:translateY(-1px);}
.btn-secondary{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--dark-blue);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:16px 32px;text-decoration:none;border:2px solid var(--dark-blue-20);transition:border-color .2s;}
.btn-secondary:hover{border-color:var(--dark-blue);}
.btn-white{display:inline-flex;align-items:center;gap:10px;background:var(--white);color:var(--red);font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:16px 36px;text-decoration:none;transition:background .2s,transform .15s;}
.btn-white:hover{background:var(--dark-blue-10);transform:translateY(-1px);}
.btn-white-outline{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--white);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:16px 28px;text-decoration:none;border:2px solid rgba(255,255,255,.45);transition:border-color .2s;}
.btn-white-outline:hover{border-color:var(--white);}

/* ── HERO ── */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 108px);}

.hero-left{
  padding:6rem 5rem;
  border-left:4px solid var(--red);
  display:flex;flex-direction:column;justify-content:center;
  animation:fadeUp .6s ease both;
}
.hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:1.25rem;}
.hero-headline{
  font-size:clamp(2.8rem,4.5vw,4.8rem);
  font-weight:900;text-transform:uppercase;line-height:1.0;
  color:var(--dark-blue);margin-bottom:1.5rem;
  animation:fadeUp .6s .05s ease both;
}
.hero-headline span{color:var(--red);}
.hero-sub{
  font-size:17px;font-weight:300;color:var(--dark-blue-80);
  line-height:1.7;max-width:460px;margin-bottom:1.5rem;
  animation:fadeUp .6s .1s ease both;
}
.hero-sub2{
  font-size:15px;font-weight:300;color:var(--dark-blue-80);
  line-height:1.7;max-width:460px;margin-bottom:2rem;
  animation:fadeUp .6s .15s ease both;
}
.hero-consult{
  font-size:14px;font-weight:300;color:var(--dark-blue-60);
  line-height:1.6;max-width:440px;margin-bottom:2.5rem;
  border-left:3px solid var(--dark-blue-20);padding-left:1rem;
  animation:fadeUp .6s .2s ease both;
}
.hero-consult strong{color:var(--dark-blue);font-weight:700;}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;animation:fadeUp .6s .25s ease both;}

/* Trust row */
.hero-trust{
  display:flex;gap:0;margin-top:2.5rem;
  border-top:1px solid var(--dark-blue-20);padding-top:1.75rem;
  flex-wrap:wrap;row-gap:.5rem;
  animation:fadeUp .6s .3s ease both;
}
.trust-item{
  display:flex;align-items:center;gap:.5rem;
  padding-right:1.25rem;margin-right:1.25rem;
  border-right:1px solid var(--dark-blue-20);
  font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--dark-blue-80);
}
.trust-item:last-child{border-right:none;margin-right:0;padding-right:0;}
.trust-item::before{content:'✓';color:var(--red);font-weight:900;font-size:14px;}

/* Hero right — dark stats panel */
.hero-right{
  background:var(--dark-blue);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:60px 60px;
  padding:5rem 4rem;
  display:flex;flex-direction:column;justify-content:center;gap:1.5rem;
  animation:fadeUp .6s .1s ease both;
}
.hero-right-label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.35);}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.hero-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:1.75rem 1.5rem;}
.hero-stat-number{font-weight:900;font-size:2.6rem;color:var(--red);line-height:1;}
.hero-stat-label{font-size:12px;color:rgba(255,255,255,.5);font-weight:300;margin-top:.4rem;line-height:1.4;}
.hero-footnote{font-size:11px;font-weight:300;color:rgba(255,255,255,.25);margin-top:-.5rem;}

/* Camera tracking band */
.camera-band{background:var(--dark-blue-10);padding:2rem 5rem;border-top:1px solid var(--dark-blue-20);}
.camera-band-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:2rem;}
.camera-band-label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);white-space:nowrap;flex-shrink:0;}
.camera-band-img{flex:1;overflow:hidden;border:1px solid var(--dark-blue-20);}
.camera-band-img img{width:100%;display:block;}

/* ── SECTIONS ── */
section{padding:6rem 5rem;}
.section-inner{max-width:1200px;margin:0 auto;}
.section-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:1rem;display:block;}
.section-h2{font-size:clamp(1.9rem,3vw,2.8rem);font-weight:900;text-transform:uppercase;color:var(--dark-blue);line-height:1.1;margin-bottom:1.2rem;}
.section-h2 span{color:var(--red);}
.section-intro{font-size:16px;font-weight:300;color:var(--dark-blue-80);line-height:1.7;max-width:680px;margin-bottom:3rem;}

/* ── WHY FROTCOM — 3 challenges ── */
.challenges-section{background:var(--white);}
.challenges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--dark-blue-20);border:1px solid var(--dark-blue-20);margin-top:3.5rem;}
.challenge-card{background:var(--white);padding:2.5rem 2rem;}
.challenge-num{width:36px;height:36px;background:var(--red);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:var(--white);margin-bottom:1.25rem;}
.challenge-title{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--dark-blue);margin-bottom:.75rem;line-height:1.3;}
.challenge-problem{font-size:13.5px;font-weight:300;color:var(--dark-blue-80);line-height:1.65;margin-bottom:1rem;}
.challenge-fix{background:#f4f6f8;border-left:3px solid var(--red);padding:.85rem 1rem;font-size:13px;color:var(--dark-blue-80);line-height:1.55;}
.challenge-fix strong{color:var(--red);font-weight:700;}

/* ── TESTIMONIALS ── */
.testimonials-section{background:var(--dark-blue-10);}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3.5rem;}
.testimonial-card{background:var(--white);border-top:3px solid var(--red);padding:2rem;}
.testimonial-quote{font-size:14px;font-weight:300;color:var(--dark-blue-80);line-height:1.7;font-style:italic;margin-bottom:1.5rem;}
.testimonial-quote::before{content:'\201C';font-size:2rem;color:var(--red);font-weight:900;line-height:0;vertical-align:-.4em;margin-right:.15rem;}
.testimonial-author{font-size:13px;font-weight:700;color:var(--dark-blue);text-transform:uppercase;letter-spacing:.06em;}
.testimonial-role{font-size:12px;font-weight:300;color:var(--dark-blue-60);margin-top:.2rem;}

/* ── CTA ── */
.cta-section{background:var(--red);padding:6rem 5rem;text-align:center;}
.cta-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:1rem;display:block;}
.cta-h2{font-size:clamp(1.9rem,3vw,2.8rem);font-weight:900;text-transform:uppercase;color:var(--white);margin-bottom:.75rem;line-height:1.1;}
.cta-sub{font-size:16px;font-weight:300;color:rgba(255,255,255,.8);max-width:540px;margin:0 auto 1.75rem;}
.cta-trust{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:center;margin-bottom:2rem;}
.cta-trust span{display:flex;align-items:center;gap:.5rem;font-size:13px;font-weight:700;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:.08em;}
.cta-trust span::before{content:'✓';color:var(--white);font-weight:900;}
.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* ── CONTACT STRIP ── */
.contact-strip{background:var(--dark-blue-10);border-top:1px solid var(--dark-blue-20);padding:2rem 5rem;}
.contact-strip-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;}
.contact-strip-label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dark-blue-60);}
.contact-strip-links{display:flex;gap:2rem;flex-wrap:wrap;align-items:center;}
.contact-strip-links a{display:flex;align-items:center;gap:.5rem;font-size:13px;font-weight:700;color:var(--dark-blue);text-decoration:none;transition:color .2s;}
.contact-strip-links a:hover{color:var(--red);}

/* ── FOOTER ── */
footer{background:var(--dark-blue);padding:4rem 5rem;}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:3rem;flex-wrap:wrap;}
.footer-brand{flex:1;min-width:200px;}
.footer-brand p{font-size:13px;font-weight:300;color:rgba(255,255,255,.4);line-height:1.7;max-width:280px;margin-top:1rem;}
.footer-col{flex:1;min-width:150px;}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:1rem;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;}
.footer-col a{font-size:13px;font-weight:300;color:rgba(255,255,255,.6);text-decoration:none;}
.footer-col a:hover{color:var(--white);}
.footer-bottom{max-width:1200px;margin:3rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);font-size:12px;font-weight:300;color:rgba(255,255,255,.3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;}

/* ── ANIMATION ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  nav{padding:0 1.5rem;}
  .nav-links{display:none;}
  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero-left{padding:4rem 2rem;border-left:none;border-top:4px solid var(--red);}
  .hero-right{padding:3rem 2rem;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .camera-band{padding:2rem;}.camera-band-inner{flex-direction:column;}
  section{padding:4rem 2rem;}
  .challenges-grid,.testimonials-grid{grid-template-columns:1fr;}
  .cta-section{padding:4rem 2rem;}
  .contact-strip{padding:2rem;}
  footer{padding:4rem 2rem;}.footer-inner{flex-direction:column;}
}

/* ── CTA SECTION — ensure white text on bare elements ── */
.cta-section h2 {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white) !important;
  margin-bottom: 1rem;
  line-height: 1.1;
}
.cta-section p {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,.8) !important;
  max-width: 560px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}
.cta-section .section-eyebrow {
  color: rgba(255,255,255,.6) !important;
}

/* ── SECTION H2 — ensure dark blue on white/light sections ── */
.section-h2 { color: var(--dark-blue); }

/* ── TESTIMONIALS — white bg cards ── */
.testimonial-card {
  background: var(--white);
  border-top: 3px solid var(--red);
  padding: 2rem;
}

/* ── BLOG CARD — fix border top ── */
.blog-card-body { border-top: 2px solid var(--red); }

/* ══════════════════════════════════════════════
   BENEFITS PAGE — three card grid
   ══════════════════════════════════════════════ */
.benefits-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 3rem;
}
.benefit-panel-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-top: 3px solid var(--red);
}
.benefit-panel-img {
  height: 240px;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: auto;
}
.benefit-panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .4s;
}
.benefit-panel-card:hover .benefit-panel-img img { transform: scale(1.04); }
.benefit-panel-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.benefit-panel-title {
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dark-blue);
  margin-bottom: .75rem;
}
.benefit-panel-text {
  font-size: 14px;
  font-weight: 300;
  color: var(--dark-blue-80);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════
   SAVINGS TWO-COLUMN LAYOUT
   (used on Save on Costs, Enhance Security, Simplify)
   ══════════════════════════════════════════════ */
.savings-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 5rem;
  margin-top: 2.5rem;
}
.savings-col { display: flex; flex-direction: column; }
.saving-block {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1rem;
  border-top: 1px solid var(--dark-blue-20);
  padding: 1.75rem 0;
  align-items: start;
}
.saving-block-num {
  font-weight: 900;
  font-size: 2rem;
  color: var(--red);
  line-height: 1;
  padding-top: .25rem;
}
.saving-block-title {
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dark-blue);
  margin-bottom: .5rem;
}
.saving-block-list {
  margin: .4rem 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.saving-block-list li {
  font-size: 14px;
  font-weight: 300;
  color: var(--dark-blue-80);
  line-height: 1.6;
}
.saving-block-body {
  font-size: 14px;
  font-weight: 300;
  color: var(--dark-blue-80);
  line-height: 1.65;
  margin-bottom: .4rem;
}

/* ── Final thought box ── */
.final-thought {
  background: var(--dark-blue-10);
  border-left: 4px solid var(--red);
  padding: 1.5rem 2rem;
  margin-top: 3rem;
  font-size: 15px;
  font-weight: 300;
  color: var(--dark-blue-80);
  line-height: 1.7;
}
.final-thought strong { color: var(--dark-blue); font-weight: 700; }

/* ── CTA white text — maximum specificity ── */
section.cta-section h2,
.cta-section h2 { 
  color: #ffffff !important; 
  font-weight: 900 !important;
  text-transform: uppercase !important;
}
section.cta-section p,
.cta-section p { 
  color: rgba(255,255,255,.85) !important; 
}
section.cta-section .section-eyebrow,
.cta-section .section-eyebrow { 
  color: rgba(255,255,255,.6) !important; 
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .benefits-cards-grid { grid-template-columns: 1fr; }
  .savings-two-col { grid-template-columns: 1fr; gap: 0; }
  .benefit-panel-img { height: 200px; }
}

/* ══════════════════════════════════════════════
   SERVICES HUB PAGE
   ══════════════════════════════════════════════ */
.services-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}
.service-hub-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-top: 3px solid var(--red);
  box-shadow: 0 2px 12px rgba(38,54,70,.08);
}
.service-hub-img {
  height: 240px;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: auto;
}
.service-hub-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .4s;
}
.service-hub-card:hover .service-hub-img img { transform: scale(1.04); }
.service-hub-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.service-hub-title {
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dark-blue);
  margin-bottom: .75rem;
}
.service-hub-text {
  font-size: 14px;
  font-weight: 300;
  color: var(--dark-blue-80);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 1.5rem;
}
@media (max-width: 960px) {
  .services-hub-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   AI SERVICES PAGE
   ══════════════════════════════════════════════ */

/* ── Three Stages — dark full-width section ── */
.ai-stages-section {
  background: var(--dark-blue);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  padding: 6rem 5rem;
}
.ai-stages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
}
.ai-stage-card {
  background: rgba(38,54,70,.95);
  padding: 2.5rem 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.ai-stage-card.active {
  background: rgba(207,10,44,.12);
  border-top: 4px solid var(--red);
}
.ai-stage-active-tag {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: .75rem;
  align-self: flex-start;
}
.ai-stage-number {
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(255,255,255,.35);
  line-height: 1;
  font-style: italic;
  margin-bottom: -.5rem;
}
.ai-stage-card.active .ai-stage-number { color: rgba(207,10,44,.5); }
.ai-stage-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.ai-stage-card.active .ai-stage-label { color: rgba(207,10,44,.7); }
.ai-stage-title {
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--white);
  margin-bottom: .6rem;
}
.ai-stage-body {
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
}

/* ── Product sections (AI Cameras + Assistant) ── */
.ai-product-section {
  background: var(--white);
  padding: 6rem 5rem;
}
.ai-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.ai-product-grid-reverse { direction: rtl; }
.ai-product-grid-reverse > * { direction: ltr; }

.ai-product-image {
  position: relative;
  background: var(--dark-blue);
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 32px 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.ai-product-image img {
  width: 100%;
  display: block;
}
.ai-product-tag {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 5px 12px;
  z-index: 1;
}

/* AI Assistant panel extras */
.ai-assistant-panel {
  padding: 2.5rem;
  justify-content: flex-start;
  gap: 1.5rem;
}
.ai-assistant-panel img { flex-shrink: 0; }
.ai-john-badge {
  border-left: 4px solid var(--red);
  padding-left: 1rem;
}
.ai-john-meet {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: .3rem;
}
.ai-john-name {
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
}
.ai-john-sub {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.55);
  margin-top: .3rem;
}

/* Capability list */
.ai-capability-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2rem;
}
.ai-capability {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 1rem;
  border-top: 1px solid var(--dark-blue-20);
  padding: 1.25rem 0;
  align-items: start;
}
.ai-capability-num {
  width: 32px;
  height: 32px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  color: var(--white);
  flex-shrink: 0;
  margin-top: 2px;
}
.ai-capability-title {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dark-blue);
  margin-bottom: .3rem;
}
.ai-capability-body {
  font-size: 13px;
  font-weight: 300;
  color: var(--dark-blue-80);
  line-height: 1.6;
}

/* ── API Grid — dark section ── */
.ai-api-section {
  background: var(--dark-blue);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  padding: 6rem 5rem;
}
.ai-api-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}
.ai-api-card {
  background: rgba(38,54,70,.9);
  padding: 2rem 1.75rem;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 40px 40px;
}
.ai-api-num {
  width: 36px;
  height: 36px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  color: var(--white);
  margin-bottom: 1.25rem;
}
.ai-api-title {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--white);
  margin-bottom: .6rem;
}
.ai-api-body {
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .ai-stages-section { padding: 4rem 2rem; }
  .ai-stages-grid { grid-template-columns: 1fr; }
  .ai-product-section { padding: 4rem 2rem; }
  .ai-product-grid { grid-template-columns: 1fr; gap: 2.5rem; direction: ltr !important; }
  .ai-api-section { padding: 4rem 2rem; }
  .ai-api-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   AI SERVICES PAGE — clean editorial redesign
   ══════════════════════════════════════════════ */

/* ── Intro section — white bg, wide image+prose ── */
.ais-intro-section {
  background: var(--white);
  padding: 6rem 5rem;
}
.ais-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: start;
}
.ais-intro-image {
  position: relative;
  background: var(--dark-blue);
  overflow: hidden;
}
.ais-intro-image img {
  width: 100%;
  display: block;
}
.ais-intro-image-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(38,54,70,.7));
  padding: 1.5rem;
}
.ais-image-tag {
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 5px 12px;
  display: inline-block;
}

/* Prose body */
.ais-prose {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.ais-prose p {
  font-size: 15px;
  font-weight: 300;
  color: var(--dark-blue-80);
  line-height: 1.75;
}
.ais-prose p strong {
  font-weight: 700;
  color: var(--dark-blue);
}

/* Three stages — inline horizontal ── */
.ais-stages-inline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 2.5rem;
  border-top: 1px solid var(--dark-blue-20);
  padding-top: 2rem;
}
.ais-stage-inline {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  flex: 1;
}
.ais-stage-inline-arrow {
  flex: 0;
  font-size: 1.5rem;
  color: var(--dark-blue-20);
  padding: 0 1rem;
  align-self: center;
  font-weight: 300;
}
.ais-stage-inline-active .ais-stage-inline-num {
  background: var(--red) !important;
  color: var(--white) !important;
}
.ais-stage-inline-num {
  width: 32px;
  height: 32px;
  background: var(--dark-blue-10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  color: var(--dark-blue-60);
  flex-shrink: 0;
  margin-top: 2px;
}
.ais-stage-inline-title {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dark-blue);
  margin-bottom: .25rem;
}
.ais-stage-inline-active .ais-stage-inline-title { color: var(--red); }
.ais-stage-inline-body {
  font-size: 12px;
  font-weight: 300;
  color: var(--dark-blue-60);
  line-height: 1.5;
}
.ais-cta-pair {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── AI Assistant — dark section ── */
.ais-assistant-section {
  background: var(--dark-blue);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  padding: 6rem 5rem;
}
.ais-assistant-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5rem;
  align-items: start;
}
.ais-assistant-intro {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,.75);
  line-height: 1.75;
  margin-bottom: .85rem;
}
.ais-assistant-currently {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--white);
  margin: 1.75rem 0 1rem;
}
.ais-assistant-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.ais-assistant-feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.7);
  line-height: 1.65;
}
.ais-assistant-feature strong {
  font-weight: 700;
  color: var(--white);
}
.ais-feature-dot {
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.ais-assistant-footer {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.55);
  line-height: 1.65;
  font-style: italic;
  margin-bottom: 2rem;
}

/* John image panel */
.ais-assistant-image-panel {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ais-john-header {
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-left: 4px solid var(--red);
  padding-left: calc(2rem - 4px);
}
.ais-john-meet-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: .25rem;
}
.ais-john-name {
  font-size: 2.2rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  margin-bottom: .4rem;
}
.ais-john-tagline {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
}
.ais-assistant-image-panel img {
  width: 100%;
  display: block;
  padding: 1.5rem;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .ais-intro-section { padding: 4rem 2rem; }
  .ais-intro-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ais-stages-inline { flex-direction: column; gap: 1rem; }
  .ais-stage-inline-arrow { display: none; }
  .ais-assistant-section { padding: 4rem 2rem; }
  .ais-assistant-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ais-cta-pair { flex-direction: column; }
}

/* ── Driver card image — show face (top of image) ── */
.services-hub-grid .service-hub-card:first-child .service-hub-img img {
  object-position: center 15%;
}

/* ── HOMEPAGE SECTION FIXES ── */
/* Camera band */
.camera-band { 
  background: var(--dark-blue-10) !important;
  padding: 2rem 5rem !important;
  border-top: 1px solid var(--dark-blue-20) !important;
  display: block !important;
  width: 100% !important;
}
.camera-band-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 2rem !important;
}
.camera-band-img { flex: 1 !important; }
.camera-band-img img { width: 100% !important; display: block !important; }

/* Challenges grid — force 3 columns */
.challenges-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background: var(--dark-blue-20) !important;
  border: 1px solid var(--dark-blue-20) !important;
  margin-top: 3.5rem !important;
}

/* Testimonials grid — force 3 columns */
.testimonials-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  margin-top: 3.5rem !important;
}

@media (max-width: 960px) {
  .camera-band { padding: 2rem !important; }
  .camera-band-inner { flex-direction: column !important; }
  .challenges-grid { grid-template-columns: 1fr !important; }
  .testimonials-grid { grid-template-columns: 1fr !important; }
}

/* ── Hero camera band — inside hero-right below stats ── */
.hero-camera-band {
  margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1rem;
}
.hero-camera-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: .5rem;
}
.hero-camera-band a { display: block; }
.hero-camera-band img {
  width: 100% !important;
  display: block !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  transition: opacity .2s;
}
.hero-camera-band a:hover img { opacity: .85; }

/* ── Footer column heading links ── */
.footer-col h4 a {
  color: rgba(255,255,255,.3) !important;
  text-decoration: none !important;
  transition: color .2s;
}
.footer-col h4 a:hover {
  color: var(--white) !important;
}

/* ══════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════ */

.contact-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 108px);
}

/* Left — info panel */
.contact-hero-left {
  padding: 6rem 5rem;
  border-left: 4px solid var(--red);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
}

/* Tagline block */
.contact-tagline {
  margin: 2rem 0 3rem;
  border-left: 4px solid var(--red);
  padding-left: 1.5rem;
}
.contact-tagline-main {
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--dark-blue);
  letter-spacing: .03em;
  line-height: 1.2;
  margin-bottom: .6rem;
}
.contact-tagline-sub {
  font-size: 15px;
  font-weight: 300;
  color: var(--dark-blue-80);
  line-height: 1.7;
}

/* Detail cards */
.contact-detail-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.contact-detail-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border-top: 1px solid var(--dark-blue-20);
  padding: 1.25rem 0;
}
.contact-detail-icon {
  width: 40px;
  height: 40px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}
.contact-detail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .3rem;
}
.contact-detail-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-blue);
  text-decoration: none;
  display: block;
  margin-bottom: .2rem;
}
.contact-detail-value:hover { color: var(--red); }
.contact-detail-note {
  font-size: 12px;
  font-weight: 300;
  color: var(--dark-blue-60);
  line-height: 1.5;
}

/* Right — form panel */
.contact-hero-right {
  background: var(--dark-blue);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  padding: 5rem 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-form-wrap {
  width: 100%;
  max-width: 480px;
}
.contact-form-tag {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 5px 12px;
  margin-bottom: 1.25rem;
}
.contact-form-title {
  font-size: 1.6rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: .6rem;
}
.contact-form-sub {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.6);
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Form elements */
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form-group { display: flex; flex-direction: column; gap: .4rem; }
.contact-form-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.contact-form-label span { color: var(--red); }
.contact-form-input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--white);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 300;
  padding: .85rem 1rem;
  outline: none;
  transition: border-color .2s;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.contact-form-input::placeholder { color: rgba(255,255,255,.25); }
.contact-form-input:focus { border-color: var(--red); }
.contact-form-select option { background: var(--dark-blue); color: var(--white); }
.contact-form-textarea { resize: vertical; min-height: 110px; }

.contact-form-consent {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: 12px;
  font-weight: 300;
  color: rgba(255,255,255,.5);
  line-height: 1.55;
}
.contact-form-consent input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; accent-color: var(--red); }
.contact-form-consent a { color: var(--light-blue); }

.contact-form-submit {
  width: 100%;
  justify-content: center;
  margin-top: .5rem;
  font-size: 14px;
  padding: 18px;
  border: none;
  cursor: pointer;
}

/* Why cards section */
.contact-why-section {
  background: var(--dark-blue-10);
  padding: 5rem 5rem;
}
.contact-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--dark-blue-20);
  border: 1px solid var(--dark-blue-20);
  margin-top: 0;
}
.contact-why-card {
  background: var(--white);
  padding: 2rem 1.75rem;
}
.contact-why-num {
  font-weight: 900;
  font-size: 2rem;
  color: var(--red);
  line-height: 1;
  margin-bottom: .75rem;
}
.contact-why-title {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dark-blue);
  margin-bottom: .6rem;
}
.contact-why-body {
  font-size: 13px;
  font-weight: 300;
  color: var(--dark-blue-80);
  line-height: 1.65;
}

/* Responsive */
@media (max-width: 960px) {
  .contact-hero { grid-template-columns: 1fr; min-height: auto; }
  .contact-hero-left { padding: 4rem 2rem; border-left: none; border-top: 4px solid var(--red); }
  .contact-hero-right { padding: 3rem 2rem; }
  .contact-form-row { grid-template-columns: 1fr; }
  .contact-why-section { padding: 4rem 2rem; }
  .contact-why-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Contact page headline — smaller to fit on one line ── */
.contact-headline {
  font-size: clamp(2rem, 3.5vw, 3.2rem) !important;
  white-space: nowrap;
}
@media (max-width: 960px) {
  .contact-headline { white-space: normal !important; }
}

/* ── Contact page — WPForms white text on dark background ── */
.contact-hero-right .wpforms-container,
.contact-hero-right .wpforms-form {
  color: var(--white) !important;
}
.contact-hero-right .wpforms-field-label,
.contact-hero-right .wpforms-field-sublabel,
.contact-hero-right .wpforms-field-description,
.contact-hero-right label {
  color: rgba(255,255,255,.6) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.contact-hero-right .wpforms-field input,
.contact-hero-right .wpforms-field textarea,
.contact-hero-right .wpforms-field select,
.contact-hero-right input[type="text"],
.contact-hero-right input[type="email"],
.contact-hero-right input[type="tel"],
.contact-hero-right textarea,
.contact-hero-right select {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--white) !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: .85rem 1rem !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  border-radius: 0 !important;
}
.contact-hero-right input::placeholder,
.contact-hero-right textarea::placeholder {
  color: rgba(255,255,255,.25) !important;
}
.contact-hero-right input:focus,
.contact-hero-right textarea:focus,
.contact-hero-right select:focus {
  border-color: var(--red) !important;
  outline: none !important;
}
.contact-hero-right .wpforms-field-checkbox label,
.contact-hero-right .wpforms-field-radio label,
.contact-hero-right .wpforms-field-gdpr-checkbox label {
  color: rgba(255,255,255,.55) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.contact-hero-right .wpforms-field-gdpr-checkbox a,
.contact-hero-right .wpforms-field a {
  color: var(--light-blue) !important;
}
.contact-hero-right .wpforms-submit-container .wpforms-submit,
.contact-hero-right button[type="submit"] {
  background: var(--red) !important;
  color: var(--white) !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 16px 32px !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
  border-radius: 0 !important;
  transition: background .2s !important;
}
.contact-hero-right .wpforms-submit-container .wpforms-submit:hover {
  background: var(--red-dark) !important;
}
.contact-hero-right .wpforms-error-container,
.contact-hero-right .wpforms-field .wpforms-error {
  color: #ff6b6b !important;
  font-size: 12px !important;
}
/* WPForms confirmation message */
.contact-hero-right .wpforms-confirmation-container-full {
  color: var(--white) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  padding: 2rem !important;
}

/* ══════════════════════════════════════════════
   BLOG GRID — 3-column across all service pages
   ══════════════════════════════════════════════ */
.blog-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  margin-top: 2.5rem !important;
}
.blog-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--white) !important;
}
.blog-card-img {
  height: 200px !important;
  overflow: hidden !important;
}
.blog-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .4s !important;
}
.blog-card:hover .blog-card-img img { transform: scale(1.04) !important; }
.blog-card-body {
  padding: 1.5rem !important;
  border-top: 2px solid var(--red) !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.blog-card-cat {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  margin-bottom: .6rem !important;
}
.blog-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--dark-blue) !important;
  line-height: 1.4 !important;
  margin-bottom: .75rem !important;
  text-decoration: none !important;
  display: block !important;
}
.blog-card-title:hover { color: var(--red) !important; }
.blog-card-excerpt {
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--dark-blue-80) !important;
  line-height: 1.6 !important;
  flex: 1 !important;
}
@media (max-width: 960px) {
  .blog-grid { grid-template-columns: 1fr !important; }
}

/* ── Blog card placeholder — holds 3-col grid shape when fewer cards ── */
.blog-card-placeholder {
  visibility: hidden;
  pointer-events: none;
}