/* Global basics */
html, body { height: 100%; }
body { scroll-behavior: smooth; }

/* Utilities tied to brand vars */
.text-brand { color: var(--brand) !important; }
.bg-darkish { background: var(--dark); }
.bg-lightish { background: var(--light); }

.btn-brand {
  background: var(--brand);
  color: #fff;
  border: none;
}
.btn-brand:hover { filter: brightness(0.95); color: #fff; }

.navbar-brand span { color: var(--brand); }
.nav-link { position: relative; }
.nav-link.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--brand);
}

/* Navbar logo sizing */
.brand-logo{
  height: 34px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* Serif brand text for site name */
.brand-text{
  font-family: "Perpetua Titling MT", Perpetua, "Times New Roman", Times, serif;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
}

/* Hero (reads image from inline CSS var set on <header>) */
.hero{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.65)),
    var(--hero-image, url('https://images.unsplash.com/photo-1501045661006-fcebe0257c3f?q=80&w=2000&auto=format&fit=crop'))
    center/cover no-repeat;
  color:#fff; min-height: 88vh; display:flex; align-items:center;
}
.hero h1{ font-size: clamp(2rem, 5vw, 4rem); font-weight:800; }

/* Small feature/pill icons */
.feature-icon{
  width:54px; height:54px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  display: grid; place-items: center;
  border-radius: 12px;
}

/* Optional pill wrapper behind each feature for readability */
.feature-chip{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 6px 10px;
  color:#fff;
}

/* Emoji icon in services cards */
.feature-emoji{
  width:56px; height:56px; font-size:26px;
  background: color-mix(in oklab, var(--brand) 16%, transparent);
  color: var(--brand);
}

/* Sections */
section{ padding: 80px 0; }
@media (max-width: 991px){ section{ padding: 60px 0; } }

/* Cards + thumbs */
.shadow-soft{ box-shadow: 0 10px 30px rgba(0,0,0,.08); }

.card.service{ border:0; transition: transform .2s ease, box-shadow .2s ease; }
.card.service:hover{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,.12); }

.thumb{ position:relative; overflow:hidden; border-radius:14px; }
.thumb img{ transition: transform .5s ease; display:block; width:100%; height:auto; }
.thumb:hover img{ transform: scale(1.06); }

/* Project badges and caption */
.badge-brand{
  background: var(--brand) !important;
  color: #111 !important;
}
.thumb-caption{
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  color: #fff;
}

/* Counters */
.counter{ font-size: clamp(2rem, 5vw, 3rem); font-weight:800; }

/* Testimonials */
.quote{ font-size: 1.1rem; }

/* Footer */
.footer a{ color:#aaa; text-decoration:none; }
.footer a:hover{ color:#fff; }

/* Process section */
.process-step{
  position:relative; background:#fff; border:1px solid #eee;
  border-radius:16px; padding:28px; height:100%;
}
.process-num{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; font-weight:800;
  background:var(--brand); color:#fff; margin-bottom:14px;
}
.process-title{ font-weight:700; }
.process-line{
  position:absolute; top:44px; right:-12px; width:24px; height:2px;
  background: linear-gradient(90deg,var(--brand),transparent);
}
@media (max-width: 991px){ .process-line{ display:none; } }

/* Rotating hero word */
.rotating-word{ display:inline-block; transition: opacity .35s ease; will-change: opacity; }
.rotating-word.fade{ opacity:0.1; }

/* Image fallback marker */
.img-placeholder{ background: #eee; }

/* Improve hero feature icon contrast */
.hero .feature-icon{
  background: rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.35);
  color:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  width:58px; height:58px;
  font-size:28px;
}

/* Make the tiny labels a bit brighter in the hero */
.hero .small{ color: rgba(255,255,255,.75) !important; }

/* Dark section theming */
.section-dark h2,
.section-dark .fw-bold,
.section-dark .lead,
.section-dark p,
.section-dark .small {
  color: rgba(255,255,255,.88) !important;
}
.section-dark .text-muted { color: rgba(255,255,255,.65) !important; }

/* Optional: subtle separators between sections */
section + section { border-top: 1px solid rgba(0,0,0,.04); }
.section-dark + section { border-top-color: rgba(255,255,255,.08); }