/* ============================================================
   Explorer — modern design layer (2026)
   A clean, minimal photography-portfolio refresh over the
   existing markup. Loaded LAST so it wins. No markup changes.
   Palette: near-monochrome slate + one muted bronze accent.
   ============================================================ */

:root {
  --bg: #ffffff;
  --text: #111827;                 /* slate near-black */
  --muted: #4b5563;                /* body / secondary */
  --faint: #9ca3af;                /* meta / captions */
  --line: #ececf0;
  --line-strong: #dfe1e6;
  --accent: #b08442;               /* muted bronze — the single accent */
  --accent-dark: #8a6631;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.07);
  --shadow-hover: 0 18px 40px rgba(16,24,40,.16);
  --maxw: 1140px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  color: var(--text);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.container { max-width: var(--maxw); }

/* ---------- header ---------- */
.probootstrap-header {
  background: var(--bg) !important;
  padding: 26px 0 !important;
  border-bottom: 1px solid var(--line);
}
.probootstrap-logo,
.probootstrap-logo:hover,
.probootstrap-logo:focus,
.probootstrap-logo:active {
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .18em;
}
.probootstrap-logo span { color: var(--accent); }
.probootstrap-nav { margin-top: 4px; }

/* nav links + animated accent underline */
.probootstrap-main-nav li a {
  position: relative;
  color: var(--muted);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 2px;
  margin: 0 8px;
}
.probootstrap-main-nav li a:hover,
.probootstrap-main-nav li.active a,
.probootstrap-main-nav li.active a:hover { color: var(--text); }
.probootstrap-main-nav li a::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease;
}
.probootstrap-main-nav li a:hover::after,
.probootstrap-main-nav li.active a::after { transform: scaleX(1); }

/* ---------- section rhythm + intro headings ---------- */
.probootstrap-section { padding: 4.5em 0 3.5em; }
.probootstrap-section h2 {
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 .5em;
}
.probootstrap-section .text-center h2 { letter-spacing: -.015em; }
.probootstrap-section p { color: var(--muted); }
.probootstrap-section a:not(.img-bg):not(.btn):hover { color: var(--accent-dark); }

/* ---------- PHOTO GRID TILES (index) — the "featured" surface ----------
   Scoped to .img-bg / .probootstrap-photo-details, which exist ONLY on the
   homepage grid. Inner pages reuse .probootstrap-section for BODY text and
   never use .img-bg, so this dark/white treatment cannot leak onto them. */
.img-bg {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background-color: #0b0d11;
  transition: box-shadow .3s ease, transform .3s ease;
}
/* zooming image layer (inherits the inline background-image) */
.img-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform .7s cubic-bezier(.2,.6,.2,1);
}
/* dark gradient scrim so white captions stay readable on any photo */
.img-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(9,11,15,.82) 0%,
    rgba(9,11,15,.30) 42%,
    rgba(9,11,15,0) 68%);
  transition: opacity .3s ease;
}
.img-bg:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.img-bg:hover::before { transform: scale(1.07); }
.img-bg .probootstrap-photo-details {
  z-index: 2;
  left: 24px;
  bottom: 22px;
  right: 24px;
}
.img-bg .probootstrap-photo-details h2 {
  color: #ffffff;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 2px;
}
.img-bg .probootstrap-photo-details p {
  color: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- inner-page images (about / single-page) ---------- */
.probootstrap-section img.img-fluid {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  display: block;
}
.probootstrap-section .image-popup {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
}
.probootstrap-section .image-popup img { box-shadow: none; transition: transform .6s ease; }
.probootstrap-section .image-popup:hover img { transform: scale(1.04); }

/* ---------- services ---------- */
.probootstrap-lg-service { margin-bottom: 64px !important; }
.probootstrap-lg-service .icon i { color: var(--text); }
@media (max-width: 992px) { .probootstrap-lg-service { margin-bottom: 40px !important; } }

.service.left-icon {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px !important;
  box-sizing: border-box;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.service.left-icon:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
  border-color: transparent;
}
.service .icon i,
.service.left-icon .icon i { color: var(--accent); }
.service.left-icon .heading,
.service.left-icon h3 { color: var(--text); font-weight: 600; }

/* ---------- contact form + buttons ---------- */
.probootstrap-form label {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.probootstrap-form .form-control {
  height: 48px;
  font-size: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
}
.probootstrap-form textarea.form-control { height: auto; min-height: 160px; }
.probootstrap-form .form-control:focus,
.probootstrap-form .form-control:active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(176,132,66,.16);
}
.btn.btn-primary,
.btn.btn-primary:focus {
  background: var(--text);
  border: 2px solid var(--text);
  color: #fff;
  border-radius: 999px;
  padding: 12px 30px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn.btn-primary:hover,
.btn.btn-primary:active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}
.with-icon.colored i { color: var(--accent); }

/* ---------- footer (polished dark) ---------- */
.probootstrap-footer {
  background: #0f1115;
  border-top: 0;
  padding: 3.2em 0;
  color: #aeb4bf;
}
.probootstrap-footer .probootstrap-copyright { color: #8b93a0; font-size: 14px; }
.probootstrap-footer .probootstrap-copyright a { color: #e5e7eb; }
.probootstrap-footer .probootstrap-copyright a:hover { color: var(--accent); }
.probootstrap-footer .probootstrap-social li a { color: #8b93a0; transition: color .15s ease; }
.probootstrap-footer .probootstrap-social li a:hover { color: #fff; }

/* ---------- back-to-top ---------- */
.gototop a {
  width: 46px;
  height: 46px;
  background: var(--text);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  transition: background .2s ease;
}
.gototop a:hover,
.gototop a:active,
.gototop a:focus { background: var(--accent); }

/* ---------- responsive ---------- */
@media (max-width: 767.98px) {
  .probootstrap-section h2 { font-size: 24px; }
  .img-bg .probootstrap-photo-details h2 { font-size: 18px; }
  .probootstrap-main-nav li a { margin: 0 5px; letter-spacing: .1em; }
}