/* ═══════════════════════════════════════
   HOME PAGE STYLES
═══════════════════════════════════════ */

/* HERO */
.hero {
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  grid-template-columns: 55% 45%;
  border-bottom: 1px solid var(--rule);
}
.hero-left {
  padding: 80px 60px 80px 7%;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--rule);
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange-lt); color: var(--orange);
  font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 7px 14px; margin-bottom: 32px; width: fit-content;
}
.hero-tag-dot { width: 7px; height: 7px; background: var(--orange); border-radius: 50%; animation: blink 1.8s infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }

.hero-btns { display: flex; gap: 12px; align-items: center; margin: 32px 0 52px; flex-wrap: wrap; }

.hero-stats {
  display: flex; gap: 0;
  border-top: 1px solid var(--rule); padding-top: 36px;
}
.hstat { flex: 1; padding-right: 24px; }
.hstat:not(:last-child) { border-right: 1px solid var(--rule); margin-right: 24px; }
.hstat-n { font-family: 'Epilogue', sans-serif; font-weight: 900; font-size: 26px; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.hstat-l { font-size: 11px; color: var(--ink-muted); font-weight: 500; letter-spacing: 0.04em; margin-top: 3px; }

/* HERO RIGHT */
.hero-right { background: var(--dark); display: flex; flex-direction: column; }
.hero-photo-wrap { flex: 1; position: relative; overflow: hidden; min-height: 420px; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero-photo-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,20,0.85) 0%, rgba(20,20,20,0.1) 60%); }
.hero-badges { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; }
.hbadge { padding: 10px 20px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,0.07); background: rgba(20,20,20,0.6); backdrop-filter: blur(4px); }
.hbadge-dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; flex-shrink: 0; }
.hbadge span { font-size: 12px; color: rgba(255,255,255,0.65); font-weight: 500; }

.hero-bar { display: flex; border-top: 1px solid rgba(255,255,255,0.07); }
.hbar-item { flex: 1; padding: 18px 16px; text-align: center; border-right: 1px solid rgba(255,255,255,0.07); }
.hbar-item:last-child { border-right: none; }
.hbar-item strong { display: block; font-family: 'Epilogue', sans-serif; font-weight: 900; font-size: 18px; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.hbar-item small { font-size: 10px; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.1em; }

/* SERVICES GRID */
.svcs-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--rule); }
.svc-card {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  position: relative; overflow: hidden;
  transition: background 0.2s;
  color: var(--ink);
}
.svc-card:nth-child(3n) { border-right: none; }
.svc-card:nth-last-child(-n+3) { border-bottom: none; }
.svc-card:hover { background: var(--paper); }
.svc-card::before { content:''; position: absolute; top:0; left:0; width:0; height:3px; background: var(--orange); transition: width 0.3s; z-index: 1; }
.svc-card:hover::before { width: 100%; }

.svc-photo-wrap { height: 180px; overflow: hidden; }
.svc-photo { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.svc-card:hover .svc-photo { transform: scale(1.06); }

.svc-body { padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; }
.svc-num { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; color: var(--rule-dk); margin-bottom: 10px; font-family: 'Epilogue', sans-serif; }
.svc-title { font-family: 'Epilogue', sans-serif; font-weight: 900; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; }
.svc-desc { font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; flex: 1; }
.svc-link { font-size: 13px; font-weight: 700; color: var(--orange); margin-top: 16px; display: flex; align-items: center; gap: 4px; transition: gap 0.2s; }
.svc-card:hover .svc-link { gap: 8px; }

/* WHY FEATURES */
.why-features { display: flex; flex-direction: column; }
.why-feat { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.why-feat:first-child { border-top: 1px solid var(--rule); }
.feat-icon { width: 44px; height: 44px; background: var(--orange-lt); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.feat-content h3 { font-family: 'Epilogue', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.feat-content p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; }

/* WHY PHOTOS */
.why-photos { display: flex; flex-direction: column; gap: 4px; }
.why-photo-top { height: 320px; overflow: hidden; }
.why-photo-top img { width:100%; height:100%; object-fit:cover; transition: transform 0.5s; }
.why-photo-top:hover img { transform: scale(1.04); }
.why-photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 200px; }
.why-photo-row img { width:100%; height:100%; object-fit:cover; transition: transform 0.5s; }
.why-photo-row img:hover { transform: scale(1.06); }

/* GOOGLE BADGE */
.google-rating-badge { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--rule); padding: 16px 24px; }

/* FADE IN */
.fade-in { animation: fadeUp 0.5s both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero-right { min-height: 400px; }
  .hero-left { padding: 60px 5%; border-right: none; }
}
@media (max-width: 768px) {
  .svcs-grid { grid-template-columns: 1fr; }
  .svc-card { border-right: none !important; }
  .svc-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule) !important; }
  .svc-card:last-child { border-bottom: none !important; }
  .why-photo-row { grid-template-columns: 1fr; height: auto; }
  .why-photo-row img { height: 180px; }
}