/* ============================================================
   PHOENIX SMART SOLUTIONS — Clean Professional Stylesheet
   Inspired by ARISE Salem: large clear images, minimal animation
   ============================================================ */

:root{
  --ink:#0c0c0e;
  --char:#3b3b42;
  --mute:#6b6b75;
  --line:#e8e6e1;
  --paper:#faf8f4;
  --white:#ffffff;
  --fire:#ff5b1f;
  --fire-deep:#e3431a;
  --fire-soft:#ffe9de;
  --ember:#ffb648;
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--char);
  background:var(--white);
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--fire); text-decoration:none }
a:hover{ color:var(--fire-deep) }
h1,h2,h3,h4,h5,h6{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.18;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0 0 .6em;
}
p{ margin:0 0 1em }
.container{ max-width:1240px; margin:0 auto; padding:0 24px }

/* ============================================================
   TOP UTILITY BAR — Google-style auto-running ticker
   ============================================================ */
.top-bar{
  background:linear-gradient(90deg, #0c0c0e 0%, #1a1a1d 100%);
  color:#fff;
  padding:0;
  font-size:0.82rem;
  letter-spacing:0.02em;
  overflow:hidden;
  position:relative;
}
.top-bar-track{
  display:flex;
  align-items:center;
  gap:48px;
  white-space:nowrap;
  padding:9px 0;
  animation:tickerScroll 40s linear infinite;
  width:max-content;
}
.top-bar-track:hover{ animation-play-state:paused }
.top-bar-track span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,0.92);
  padding:4px 0;
}
.top-bar-track a{
  padding:4px 2px;
}
.top-bar-track .tk-sep{
  color:var(--ember);
  font-weight:700;
  margin:0 4px;
}
.top-bar-track a{
  color:rgba(255,255,255,0.92);
  text-decoration:none;
  font-weight:500;
}
.top-bar-track a:hover{ color:var(--ember) }
.top-bar-track svg{ width:14px; height:14px; fill:var(--ember); flex-shrink:0 }

@keyframes tickerScroll{
  0%   { transform:translateX(0) }
  100% { transform:translateX(-50%) }
}

/* On hover or reduced motion, pause */
@media (prefers-reduced-motion: reduce){
  .top-bar-track{ animation:none }
}

/* ============================================================
   NAVBAR (clean horizontal nav with logo)
   ============================================================ */
.navbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:10px 0;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.nav-inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.nav-logo{ height:96px; width:auto; transition:transform .25s ease; flex-shrink:0 }
.nav-brand:hover .nav-logo{ transform:scale(1.04) }
.nav-name{ display:flex; flex-direction:column; line-height:1.1 }
.nav-name strong{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.nav-name span{
  font-size:0.66rem;
  color:var(--mute);
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:500;
}

.nav-menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap:0;
  margin:0;
  padding:0;
}
.nav-menu li{ display:inline-flex; align-items:center }
.nav-menu li.sep{ color:var(--line); margin:0 1px; font-size:0.78rem }
.nav-menu a{
  display:inline-block;
  padding:7px 11px;
  color:var(--char);
  font-size:0.84rem;
  font-weight:500;
  border-radius:6px;
  transition:color .2s, background .2s;
  white-space:nowrap;
}
.nav-menu a:hover{ color:var(--fire); background:var(--paper) }
.nav-menu a.active{ color:var(--fire); font-weight:600 }

.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 18px;
  background:var(--fire);
  color:#fff !important;
  font-weight:600;
  font-size:0.82rem;
  border-radius:6px;
  transition:background .2s;
  white-space:nowrap;
  margin-left:6px;
}
.nav-cta:hover{ background:var(--fire-deep) }

.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  width:40px;
  height:40px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  z-index:101;
  position:relative;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .3s ease, opacity .25s ease;
  transform-origin:center;
}
/* Hamburger → X when open */
.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}
.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

@media (max-width:1024px){
  .nav-toggle{ display:flex }
  .nav-menu{
    position:fixed;
    top:0; right:-100%;
    width:300px;
    max-width:80vw;
    height:100vh;
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    padding:80px 24px 24px;
    gap:4px;
    box-shadow:-12px 0 40px rgba(0,0,0,0.12);
    transition:right .35s ease;
    z-index:99;
  }
  .nav-menu.open{ right:0 }
  .nav-menu li.sep{ display:none }
  .nav-menu li{ width:100% }
  .nav-menu a{
    display:block;
    width:100%;
    padding:14px 16px;
    border-radius:8px;
  }
  .nav-cta{ display:none }
  .nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    z-index:98;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s;
  }
  .nav-overlay.open{ opacity:1; pointer-events:auto }
}

/* ============================================================
   PAGE HERO — Big clean banner with overlaid title
   ============================================================ */
.page-hero{
  position:relative;
  min-height:480px;
  background-size:cover;
  background-position:center;
  background-color:#0a0a0e;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:80px 0;
}
.page-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(12,12,14,0.55) 0%, rgba(12,12,14,0.6) 100%);
}
.page-hero-inner{
  position:relative;
  z-index:2;
  max-width:880px;
  padding:0 24px;
}
.page-hero h1{
  font-size:clamp(2.4rem, 5vw, 3.8rem);
  color:#fff;
  margin-bottom:14px;
  line-height:1.05;
}
.page-hero h1 em{
  font-style:italic;
  color:var(--ember);
}
.page-hero .subtitle{
  font-size:clamp(1rem, 1.2vw, 1.18rem);
  color:rgba(255,255,255,0.92);
  max-width:680px;
  margin:0 auto;
  line-height:1.6;
}
.crumb{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.35);
  border-radius:100px;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.06em;
  color:#fff;
  margin-bottom:22px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.crumb a{ color:#fff; font-weight:600 }
.crumb a:hover{ color:var(--ember) }
.crumb .sep{ color:var(--ember); font-weight:700 }

/* HOMEPAGE HERO variant — taller, with CTA */
.home-hero{
  min-height:620px;
  padding:120px 0 100px;
}
.home-hero h1{
  font-size:clamp(2.6rem, 5.6vw, 4.4rem);
}
.home-hero .subtitle{
  font-size:clamp(1.05rem, 1.3vw, 1.25rem);
  margin-bottom:34px;
}
.home-hero-tag{
  display:inline-block;
  padding:7px 18px;
  background:var(--fire);
  color:#fff;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border-radius:100px;
  margin-bottom:22px;
}
.home-hero-rating{
  font-size:0.9rem;
  color:rgba(255,255,255,0.92);
  margin-bottom:32px;
}
.home-hero-rating strong{ color:#fff; font-weight:700 }
.home-hero-rating .stars{ color:var(--ember); font-size:1.05rem; letter-spacing:2px }
.home-hero-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 32px;
  background:var(--fire);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.02em;
  border-radius:6px;
  text-decoration:none;
  box-shadow:0 12px 30px -8px rgba(255,91,31,0.5);
  transition:all .25s;
}
.home-hero-cta:hover{
  background:var(--fire-deep);
  transform:translateY(-2px);
}

/* ============================================================
   BLOCKS — Standard content sections
   ============================================================ */
.block{ padding:80px 0; background:#fff }
.block-paper{ background:var(--paper) }
.block-dark{ background:var(--ink); color:rgba(255,255,255,0.92) }
.block-dark h2, .block-dark h3{ color:#fff }

.block-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 48px;
}
.block-eyebrow{
  display:inline-block;
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fire);
  margin-bottom:14px;
}
.block-head h2{
  font-size:clamp(2rem, 3.4vw, 2.8rem);
  margin:0 0 16px;
}
.block-head h2 em{
  font-style:italic;
  color:var(--fire);
}
.block-head p{
  font-size:1.06rem;
  color:var(--char);
  line-height:1.65;
  margin:0;
}

/* ============================================================
   QUICK-NAV TILES (the big 4 categories under hero — ARISE style)
   ============================================================ */
.quicknav{
  background:var(--paper);
  padding:60px 0;
}
.quicknav-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.qn-card{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;
  transition:transform .25s, box-shadow .25s;
}
.qn-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px -12px rgba(12,12,14,0.18);
}
.qn-card-img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}
.qn-card-body{
  padding:20px 22px;
}
.qn-card-body h3{
  font-size:1.18rem;
  font-weight:600;
  color:var(--ink);
  margin:0 0 4px;
}
.qn-card-body span{
  font-size:0.85rem;
  color:var(--mute);
}
@media (max-width:1024px){
  .quicknav-grid{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:560px){
  .quicknav-grid{ grid-template-columns:1fr }
  .qn-card-img{ height:180px }
}

/* ============================================================
   SPLIT BLOCK — Image on one side, text on the other (large image)
   ============================================================ */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.split.split-flip{
  grid-template-columns:1fr 1fr;
}
.split-img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:10px;
}
.split-text h2{
  font-size:clamp(1.8rem, 3vw, 2.5rem);
  margin-bottom:18px;
}
.split-text h2 em{ font-style:italic; color:var(--fire) }
.split-text p{
  font-size:1.02rem;
  color:var(--char);
  line-height:1.7;
}
.split-text .eyebrow{
  display:inline-block;
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fire);
  margin-bottom:12px;
}
.split-features{
  list-style:none;
  margin:24px 0 28px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.split-features li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:0.96rem;
  color:var(--char);
}
.split-features li::before{
  content:'✓';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  background:var(--fire-soft);
  color:var(--fire);
  font-weight:700;
  border-radius:50%;
  flex-shrink:0;
  font-size:0.85rem;
}
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  background:var(--ink);
  color:#fff;
  font-weight:600;
  font-size:0.92rem;
  border-radius:6px;
  transition:background .2s, transform .2s;
}
.btn-primary:hover{
  background:var(--fire);
  color:#fff;
  transform:translateY(-2px);
}
.btn-fire{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  background:var(--fire);
  color:#fff;
  font-weight:600;
  font-size:0.92rem;
  border-radius:6px;
  transition:background .2s, transform .2s;
}
.btn-fire:hover{
  background:var(--fire-deep);
  color:#fff;
  transform:translateY(-2px);
}
@media (max-width:880px){
  .split{ grid-template-columns:1fr; gap:40px }
  .split-flip .split-text{ order:-1 }
}

/* ============================================================
   PRODUCT/SERVICE GRID — Big cards with large images
   ============================================================ */
.pgrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.pgrid-2{ grid-template-columns:repeat(2, 1fr); gap:32px }
.p-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .25s, box-shadow .25s;
}
.p-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px -12px rgba(12,12,14,0.15);
}
.p-card-img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}
.pgrid-2 .p-card-img{ height:300px }
.p-card-body{
  padding:24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.p-card-tag{
  display:inline-block;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--fire);
  margin-bottom:8px;
}
.p-card-body h3{
  font-size:1.25rem;
  font-weight:600;
  margin:0 0 10px;
}
.p-card-body p{
  font-size:0.95rem;
  color:var(--char);
  line-height:1.6;
  margin:0 0 16px;
  flex:1;
}
.p-card-link{
  font-size:0.88rem;
  font-weight:600;
  color:var(--fire);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.p-card-link::after{
  content:'→';
  transition:transform .2s;
}
.p-card:hover .p-card-link::after{ transform:translateX(4px) }
@media (max-width:1024px){
  .pgrid{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:560px){
  .pgrid, .pgrid-2{ grid-template-columns:1fr }
}

/* ============================================================
   GALLERY — Big photos in a clean grid
   ============================================================ */
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.gallery-item{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:8px;
  background:var(--paper);
}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
/* gallery hover scale removed for clean look */
.gallery-item-cap{
  position:absolute;
  left:14px; bottom:14px;
  padding:5px 12px;
  background:rgba(255,255,255,0.95);
  color:var(--ink);
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border-radius:100px;
}
@media (max-width:880px){
  .gallery{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:560px){
  .gallery{ grid-template-columns:1fr }
}

/* ============================================================
   STATS BAR — Plain horizontal row
   ============================================================ */
.statsbar{
  background:var(--ink);
  color:#fff;
  padding:60px 0;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:30px;
  text-align:center;
}
.stat-cell{ padding:0 14px }
.stat-num{
  font-family:var(--serif);
  font-size:clamp(2.2rem, 4vw, 3.2rem);
  font-weight:500;
  line-height:1;
  margin-bottom:8px;
  background:linear-gradient(135deg, #fff, var(--ember));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-0.025em;
}
.stat-lbl{
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.7);
}
@media (max-width:768px){
  .stats-grid{ grid-template-columns:repeat(2, 1fr); gap:24px 14px }
}

/* ============================================================
   "WHY US" — Checklist with image
   ============================================================ */
.whyus-list{
  list-style:none;
  margin:24px 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.whyus-list li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  background:#fff;
  border-left:3px solid var(--fire);
  border-radius:6px;
  font-size:0.96rem;
  color:var(--char);
  line-height:1.5;
}
.whyus-list li strong{ color:var(--ink); font-weight:600 }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.test-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.test-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:28px;
  display:flex;
  flex-direction:column;
}
.test-card-stars{
  color:var(--ember);
  font-size:1rem;
  letter-spacing:2px;
  margin-bottom:14px;
}
.test-card-text{
  font-size:0.96rem;
  color:var(--char);
  line-height:1.65;
  margin:0 0 18px;
  flex:1;
  font-style:italic;
}
.test-card-author{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.test-card-avatar{
  width:42px; height:42px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--fire), var(--ember));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  flex-shrink:0;
}
.test-card-name{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.test-card-name strong{
  font-weight:600;
  color:var(--ink);
  font-size:0.95rem;
}
.test-card-name span{ font-size:0.78rem; color:var(--mute) }
@media (max-width:1024px){
  .test-grid{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:560px){
  .test-grid{ grid-template-columns:1fr }
}

/* ============================================================
   BRAND LOGO WALL
   ============================================================ */
.brandwall{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:16px;
}
.brandwall-cell{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  height:130px;
  transition:border-color .25s, transform .25s;
}
.brandwall-cell:hover{
  border-color:var(--fire);
  transform:translateY(-2px);
}
.brandwall-cell img{
  max-width:80%;
  max-height:64px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(0.15);
  transition:filter .25s;
}
.brandwall-cell:hover img{ filter:grayscale(0) }

@media (max-width:560px){
  .brandwall{ grid-template-columns:repeat(2, 1fr); gap:12px }
  .brandwall-cell{ height:110px; padding:18px 12px }
  .brandwall-cell img{ max-height:54px }
}

/* ============================================================
   CTA BAND — Full width orange band with action
   ============================================================ */
.cta-band{
  background:linear-gradient(135deg, var(--fire) 0%, var(--fire-deep) 100%);
  color:#fff;
  padding:70px 0;
  text-align:center;
}
.cta-band h2{
  color:#fff;
  font-size:clamp(2rem, 3.6vw, 2.8rem);
  margin:0 0 14px;
}
.cta-band p{
  color:rgba(255,255,255,0.92);
  font-size:1.08rem;
  max-width:620px;
  margin:0 auto 28px;
}
.cta-band .btn-on-fire{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 36px;
  background:#fff;
  color:var(--fire);
  font-weight:700;
  font-size:1rem;
  border-radius:6px;
  transition:transform .2s, box-shadow .2s;
}
.cta-band .btn-on-fire:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -8px rgba(0,0,0,0.3);
}

/* ============================================================
   CONTACT BLOCK — 3 simple cards
   ============================================================ */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:32px 24px;
  text-align:center;
  transition:transform .25s, border-color .25s;
}
.contact-card:hover{
  border-color:var(--fire);
  transform:translateY(-4px);
}
.contact-card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  background:var(--fire-soft);
  color:var(--fire);
  border-radius:50%;
  font-size:24px;
  margin-bottom:18px;
}
.contact-card h3{
  font-size:1.05rem;
  margin:0 0 6px;
}
.contact-card p{
  font-size:0.95rem;
  color:var(--char);
  margin:0 0 10px;
}
.contact-card a{
  font-weight:600;
  color:var(--ink);
  font-size:1.02rem;
}
.contact-card a:hover{ color:var(--fire) }
@media (max-width:880px){
  .contact-grid{ grid-template-columns:1fr; gap:16px }
}

/* Contact form */
.contact-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:36px;
  max-width:680px;
  margin:0 auto;
}
.contact-form h3{
  font-size:1.5rem;
  margin:0 0 8px;
  text-align:center;
}
.contact-form p{ text-align:center; color:var(--mute); margin-bottom:24px }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px }
.form-field{ display:flex; flex-direction:column; gap:6px }
.form-field label{
  font-size:0.82rem;
  font-weight:600;
  color:var(--ink);
}
.form-field input,
.form-field select,
.form-field textarea{
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:6px;
  font-family:inherit;
  font-size:0.95rem;
  color:var(--ink);
  background:#fff;
  transition:border-color .2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--fire);
  box-shadow:0 0 0 3px rgba(255,91,31,0.1);
}
.form-field textarea{ min-height:120px; resize:vertical }
.form-submit{
  width:100%;
  padding:15px;
  background:var(--fire);
  color:#fff;
  border:none;
  border-radius:6px;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  transition:background .2s;
}
.form-submit:hover{ background:var(--fire-deep) }
@media (max-width:560px){
  .form-row{ grid-template-columns:1fr }
  .contact-form{ padding:24px }
}

/* ============================================================
   FOOTER — Clean white theme
   ============================================================ */
.footer{
  background:#fff;
  color:var(--char);
  padding:64px 0 0;
  font-size:0.92rem;
  border-top:1px solid var(--line);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:40px;
  margin-bottom:36px;
}
.footer h4{
  color:var(--ink);
  font-family:var(--sans);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin:0 0 18px;
  position:relative;
  padding-bottom:8px;
}
.footer h4::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:32px;
  height:2px;
  background:var(--fire);
  border-radius:2px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.footer-brand img{ height:64px; width:auto }
.footer-brand strong{
  font-family:var(--serif);
  font-size:1.18rem;
  color:var(--ink);
  display:block;
  letter-spacing:-0.01em;
  font-weight:600;
}
.footer-brand span{
  font-size:0.7rem;
  color:var(--mute);
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:500;
}
.footer-about{
  line-height:1.65;
  margin-bottom:20px;
  color:var(--char);
}
.footer ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer ul a{
  color:var(--char);
  transition:color .2s, transform .2s;
  font-size:0.95rem;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.footer ul a:hover{
  color:var(--fire);
  transform:translateX(3px);
}
.footer ul a::before{
  content:'›';
  color:var(--fire);
  font-weight:700;
}
.footer-contact-line{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
  font-size:0.92rem;
}
.footer-contact-line .fci{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  background:var(--fire-soft);
  color:var(--fire);
  border-radius:8px;
  flex-shrink:0;
}
.footer-contact-line .fci svg{ width:16px; height:16px; fill:currentColor }
.footer-contact-line strong{
  color:var(--ink);
  font-weight:600;
  font-size:0.95rem;
}
.footer-contact-line span{
  display:block;
  font-size:0.82rem;
  color:var(--mute);
  margin-top:2px;
}
.footer-social{
  display:flex;
  gap:10px;
  margin-top:14px;
}
.footer-social a{
  width:40px; height:40px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .25s;
}
.footer-social a svg{
  width:18px; height:18px;
  fill:var(--char);
  transition:fill .25s;
}
.footer-social a:hover{
  border-color:var(--fire);
  background:var(--fire);
  transform:translateY(-2px);
}
.footer-social a:hover svg{ fill:#fff }

.footer-bottom{
  padding:22px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  font-size:0.85rem;
  color:var(--mute);
}
.footer-bottom strong{ color:var(--ink); font-weight:600 }
.footer-bottom a{ color:var(--char) }
.footer-bottom a:hover{ color:var(--fire) }

@media (max-width:880px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; gap:28px }
  .footer-bottom{ flex-direction:column; text-align:center }
}


/* ============================================================
   PREMIUM GLASS-STYLE WHATSAPP CHATBOT
   ============================================================ */
.wa-fab{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:200;
}

/* Round glass-style button — 56px (smaller) */
.wa-fab-btn{
  position:relative;
  width:56px;
  height:56px;
  background:linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:none;
  box-shadow:
    0 8px 22px -4px rgba(37,211,102,0.45),
    0 4px 10px -2px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.wa-fab-btn:hover{
  transform:scale(1.06);
  box-shadow:
    0 12px 28px -4px rgba(37,211,102,0.6),
    0 6px 14px -2px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.wa-fab-btn:active{ transform:scale(0.98) }
.wa-fab-btn svg{
  width:28px;
  height:28px;
  fill:#fff;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* Subtle pulse halo */
.wa-fab-btn::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:rgba(37,211,102,0.3);
  z-index:1;
  animation:waPulse 2.5s ease-out infinite;
}
@keyframes waPulse{
  0%   { transform:scale(0.92); opacity:0.7 }
  100% { transform:scale(1.45); opacity:0 }
}
@media (prefers-reduced-motion: reduce){
  .wa-fab-btn::before{ animation:none; opacity:0 }
}

/* Close X icon shown when panel is open */
.wa-fab-btn .wa-icon-close{ display:none; width:22px; height:22px }
.wa-fab.is-open .wa-fab-btn .wa-icon-wa{ display:none }
.wa-fab.is-open .wa-fab-btn .wa-icon-close{ display:block }
.wa-fab.is-open .wa-fab-btn{
  background:linear-gradient(135deg, #ff5b1f 0%, #e3431a 100%);
  box-shadow:0 8px 22px -4px rgba(255,91,31,0.5);
}
.wa-fab.is-open .wa-fab-btn::before{ display:none }

/* Tooltip label that shows next to button when closed */
.wa-fab-label{
  position:absolute;
  right:68px;
  top:50%;
  transform:translateY(-50%);
  background:rgba(12,12,14,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;
  padding:7px 12px;
  border-radius:6px;
  font-size:0.78rem;
  font-weight:600;
  white-space:nowrap;
  pointer-events:none;
  letter-spacing:0.01em;
}
.wa-fab-label::after{
  content:'';
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  border:5px solid transparent;
  border-left-color:rgba(12,12,14,0.92);
}
.wa-fab.is-open .wa-fab-label{ display:none }
@media (max-width:768px){
  .wa-fab-label{ display:none }
}

/* ===== Glass-style enquiry panel — smaller, premium ===== */
.wa-fab-panel{
  position:absolute;
  right:0;
  bottom:72px;
  width:320px;
  max-width:calc(100vw - 44px);
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:
    0 20px 48px -10px rgba(12,12,14,0.32),
    0 8px 18px -6px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.7);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px) scale(0.96);
  transform-origin:bottom right;
  transition:opacity .25s, transform .25s, visibility .25s;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.wa-fab.is-open .wa-fab-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

/* Panel header — green glass strip */
.wa-fab-head{
  background:linear-gradient(135deg, rgba(37,211,102,0.95) 0%, rgba(18,140,126,0.95) 100%);
  color:#fff;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,0.22);
}
.wa-fab-avatar{
  width:36px;
  height:36px;
  background:rgba(255,255,255,0.25);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:1.5px solid rgba(255,255,255,0.35);
}
.wa-fab-avatar svg{ width:18px; height:18px; fill:#fff }
.wa-fab-head-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
  flex:1;
  min-width:0;
}
.wa-fab-head-text strong{
  font-size:0.9rem;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wa-fab-head-text span{
  font-size:0.7rem;
  opacity:0.92;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.wa-fab-head-text span::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:#7eff8a;
  display:inline-block;
  box-shadow:0 0 6px #7eff8a;
}

/* Greeting bubble area */
.wa-fab-greeting{
  padding:14px 16px 6px;
  background:rgba(244,246,245,0.5);
}
.wa-fab-greeting-bubble{
  background:#fff;
  padding:10px 12px;
  border-radius:12px 12px 12px 3px;
  font-size:0.82rem;
  color:var(--char);
  line-height:1.45;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
  margin-bottom:3px;
}
.wa-fab-greeting-bubble strong{ color:var(--ink); font-weight:600 }
.wa-fab-greeting-time{
  font-size:0.66rem;
  color:var(--mute);
  margin-bottom:4px;
}

/* Form */
.wa-fab-form{
  padding:10px 16px 16px;
  background:rgba(244,246,245,0.5);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.wa-fab-form input,
.wa-fab-form select,
.wa-fab-form textarea{
  width:100%;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:7px;
  font-family:inherit;
  font-size:0.84rem;
  background:#fff;
  color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.wa-fab-form input::placeholder,
.wa-fab-form textarea::placeholder{ color:var(--mute); opacity:0.85 }
.wa-fab-form input:focus,
.wa-fab-form select:focus,
.wa-fab-form textarea:focus{
  outline:none;
  border-color:#25d366;
  box-shadow:0 0 0 2px rgba(37,211,102,0.15);
}
.wa-fab-form textarea{ min-height:60px; resize:vertical; max-height:120px }
.wa-fab-submit{
  width:100%;
  padding:11px;
  background:linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:700;
  font-size:0.85rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:filter .2s, transform .15s;
  margin-top:2px;
  box-shadow:0 4px 12px -3px rgba(37,211,102,0.4);
}
.wa-fab-submit:hover{ filter:brightness(1.08) }
.wa-fab-submit:active{ transform:scale(0.98) }
.wa-fab-submit svg{ width:14px; height:14px; fill:#fff }

/* Success state */
.wa-fab-success{
  display:none;
  padding:24px 16px;
  text-align:center;
  background:rgba(244,246,245,0.5);
}
.wa-fab.is-success .wa-fab-form{ display:none }
.wa-fab.is-success .wa-fab-success{ display:block }
.wa-fab-success strong{
  color:var(--ink);
  font-size:0.92rem;
  display:block;
}
.wa-fab-success p{
  margin:6px 0 0;
  font-size:0.8rem;
  color:var(--char);
  line-height:1.5;
}
.wa-fab-success-icon{
  width:42px;
  height:42px;
  margin:0 auto 8px;
  background:#25d366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px -2px rgba(37,211,102,0.5);
}
.wa-fab-success-icon svg{ width:22px; height:22px; fill:#fff }

/* ===== Mobile alignment ===== */
@media (max-width:480px){
  .wa-fab{ right:16px; bottom:16px }
  .wa-fab-btn{ width:54px; height:54px }
  .wa-fab-btn svg{ width:26px; height:26px }
  .wa-fab-panel{
    right:0;
    bottom:66px;
    width:calc(100vw - 32px);
    max-width:340px;
  }
}
@media (max-width:380px){
  .wa-fab-panel{ width:calc(100vw - 24px) }
}


/* ============================================================
   404 page
   ============================================================ */
.err-section{
  min-height:60vh;
  display:flex;
  align-items:center;
  text-align:center;
  padding:80px 0;
}
.err-num{
  font-family:var(--serif);
  font-size:8rem;
  font-weight:500;
  line-height:1;
  background:linear-gradient(135deg, var(--fire), var(--ember));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:20px;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center{ text-align:center }
.mt-0{ margin-top:0 }
.mb-0{ margin-bottom:0 }
.show-mobile{ display:none }
@media (max-width:768px){
  .hide-mobile{ display:none }
  .show-mobile{ display:block }
  .block{ padding:60px 0 }
  .block-head{ margin-bottom:36px }
}


/* ============================================================
   COMPREHENSIVE MOBILE RESPONSIVENESS
   ============================================================ */

/* Base typography scaling — readable on small screens */
@media (max-width:768px){
  html{ font-size:15px }
  body{ font-size:15px }
  h1{ font-size:2rem }
  h2{ font-size:1.65rem }
  h3{ font-size:1.18rem }
  .container{ padding:0 18px }
  .block{ padding:48px 0 }
  .block-head{ margin-bottom:30px }
  .block-head h2{ font-size:1.7rem }
}
@media (max-width:480px){
  html{ font-size:14.5px }
  h1{ font-size:1.7rem }
  h2{ font-size:1.45rem }
  .container{ padding:0 16px }
  .block{ padding:40px 0 }
  .block-head h2{ font-size:1.45rem }
  .block-head p{ font-size:0.95rem }
}

/* TOP BAR — stays as ticker, but smaller on mobile */
@media (max-width:560px){
  .top-bar{ font-size:0.74rem }
  .top-bar-track{ gap:30px; padding:7px 0 }
  .top-bar-track svg{ width:12px; height:12px }
}

/* NAVBAR — proper mobile layout */
@media (max-width:1024px){
  .nav-logo{ height:78px }
  .nav-name strong{ font-size:0.98rem }
  .nav-name span{ font-size:0.62rem }
}
@media (max-width:560px){
  .navbar{ padding:8px 0 }
  .nav-inner{ padding:0 14px; gap:10px }
  .nav-logo{ height:60px }
  .nav-name{ display:flex }
  .nav-name strong{ font-size:0.88rem; line-height:1.15 }
  .nav-name span{ font-size:0.58rem; letter-spacing:0.04em }
  .nav-brand{ gap:10px }
  .nav-toggle{ width:36px; height:36px }
  .nav-toggle span{ width:20px }
}
@media (max-width:380px){
  .nav-logo{ height:52px }
  .nav-name strong{ font-size:0.8rem }
  .nav-name span{ font-size:0.55rem; letter-spacing:0.03em }
  .nav-brand{ gap:8px }
  .nav-inner{ padding:0 12px; gap:8px }
}

/* HERO sections — taller on desktop, leaner on mobile */
@media (max-width:768px){
  .page-hero{ min-height:360px; padding:60px 0 }
  .page-hero h1{ font-size:1.9rem; line-height:1.1 }
  .page-hero .subtitle{ font-size:0.96rem }
  .home-hero{ min-height:540px; padding:80px 0 70px }
  .home-hero h1{ font-size:2.2rem }
  .home-hero .subtitle{ font-size:1rem }
  .home-hero-cta{ padding:14px 26px; font-size:0.95rem }
  .crumb{ font-size:0.7rem; padding:6px 14px }
}
@media (max-width:480px){
  .page-hero{ min-height:300px; padding:40px 0 }
  .page-hero h1{ font-size:1.6rem }
  .page-hero-inner{ padding:0 16px }
  .home-hero{ min-height:500px; padding:60px 0 }
  .home-hero h1{ font-size:1.85rem; line-height:1.08 }
  .home-hero .subtitle{ font-size:0.95rem; margin-bottom:24px }
  .home-hero-tag{ padding:6px 14px; font-size:0.7rem; margin-bottom:18px }
  .home-hero-rating{ font-size:0.85rem; margin-bottom:24px }
  .home-hero-cta{ padding:13px 24px; font-size:0.92rem; width:auto }
}

/* QUICK NAV TILES */
@media (max-width:768px){
  .quicknav{ padding:44px 0 }
  .quicknav-grid{ gap:14px }
  .qn-card-img{ height:160px }
  .qn-card-body{ padding:16px 18px }
  .qn-card-body h3{ font-size:1.05rem }
  .qn-card-body span{ font-size:0.8rem }
}
@media (max-width:480px){
  .quicknav-grid{ grid-template-columns:1fr; gap:14px }
  .qn-card-img{ height:170px }
}

/* SPLIT BLOCKS — stack vertically on mobile */
@media (max-width:880px){
  .split{ grid-template-columns:1fr !important; gap:30px }
  .split.split-flip .split-text{ order:2 }
  .split.split-flip .split-img{ order:1 }
  .split-img{ aspect-ratio:16/10; max-height:340px }
}
@media (max-width:480px){
  .split{ gap:24px }
  .split-text h2{ font-size:1.5rem }
  .split-features li{ font-size:0.92rem; gap:10px }
  .split-features li::before{ width:22px; height:22px; font-size:0.78rem }
}

/* PRODUCT GRID */
@media (max-width:1024px){
  .pgrid{ grid-template-columns:repeat(2, 1fr); gap:18px }
}
@media (max-width:560px){
  .pgrid, .pgrid-2{ grid-template-columns:1fr; gap:18px }
  .p-card-img{ height:200px }
  .p-card-body{ padding:18px }
  .p-card-body h3{ font-size:1.12rem }
  .p-card-body p{ font-size:0.9rem }
}

/* GALLERY */
@media (max-width:880px){
  .gallery{ grid-template-columns:repeat(2, 1fr); gap:10px }
}
@media (max-width:480px){
  .gallery{ grid-template-columns:1fr; gap:10px }
  .gallery-item{ aspect-ratio:16/10 }
}

/* STATS BAR */
@media (max-width:768px){
  .statsbar{ padding:44px 0 }
  .stats-grid{ grid-template-columns:repeat(2, 1fr); gap:24px 14px }
  .stat-num{ font-size:2rem }
  .stat-lbl{ font-size:0.72rem; letter-spacing:0.14em }
}
@media (max-width:380px){
  .stats-grid{ gap:20px 10px }
  .stat-num{ font-size:1.7rem }
  .stat-lbl{ font-size:0.66rem }
}

/* TESTIMONIAL CARDS */
@media (max-width:1024px){
  .test-grid{ grid-template-columns:repeat(2, 1fr); gap:18px }
}
@media (max-width:560px){
  .test-grid{ grid-template-columns:1fr; gap:16px }
  .test-card{ padding:22px }
  .test-card-text{ font-size:0.92rem }
}

/* BRAND WALL */
@media (max-width:880px){
  .brandwall{ grid-template-columns:repeat(3, 1fr); gap:12px }
  .brandwall-cell{ height:110px; padding:18px 14px }
  .brandwall-cell img{ max-height:54px }
}
@media (max-width:560px){
  .brandwall{ grid-template-columns:repeat(2, 1fr); gap:10px }
  .brandwall-cell{ height:100px; padding:14px 10px }
  .brandwall-cell img{ max-height:48px; max-width:80% }
}

/* CTA BAND */
@media (max-width:768px){
  .cta-band{ padding:54px 0 }
  .cta-band h2{ font-size:1.65rem }
  .cta-band p{ font-size:0.96rem }
  .cta-band .btn-on-fire{ padding:14px 28px; font-size:0.92rem }
}
@media (max-width:480px){
  .cta-band{ padding:44px 0 }
  .cta-band h2{ font-size:1.4rem }
}

/* CONTACT GRID */
@media (max-width:880px){
  .contact-grid{ grid-template-columns:1fr; gap:14px; max-width:480px; margin:0 auto }
}

/* CONTACT FORM */
@media (max-width:560px){
  .contact-form{ padding:24px 18px }
  .form-row{ grid-template-columns:1fr; gap:12px }
  .contact-form h3{ font-size:1.25rem }
}

/* FOOTER */
@media (max-width:880px){
  .footer{ padding:48px 0 0 }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; gap:32px; margin-bottom:30px }
  .footer-brand{ gap:12px }
  .footer-brand img{ height:54px }
  .footer-brand strong{ font-size:1.05rem }
  .footer-bottom{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    font-size:0.78rem;
    padding:18px 0;
  }
}

/* SERVICES splits — alternate layout reflows on mobile */
@media (max-width:880px){
  .split[style*="margin-bottom:64px"]{ margin-bottom:48px !important }
}
@media (max-width:480px){
  .split[style*="margin-bottom:64px"]{ margin-bottom:36px !important }
}

/* IMAGES — never overflow horizontally */
img{ max-width:100% !important; height:auto }

/* Prevent horizontal overflow site-wide */
html, body{ overflow-x:hidden }


/* Final safety: prevent any hidden element bleeding past viewport */
.nav-toggle{ flex-shrink:0 }
.nav-brand{ min-width:0; flex:1 }
.nav-brand .nav-name{ min-width:0; overflow:hidden }
.nav-brand .nav-name strong, .nav-brand .nav-name span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}