/*
 * impeccable.css — Bimasketch VX
 * Applied per Impeccable design skill: polish + bolder pass
 * Scope: buttons, typography details, micro-interactions, form states,
 *        hover transitions, focus rings, tags, badges, social icons.
 * Constraint: zero layout changes, zero color palette changes.
 */

/* ─────────────────────────────────────────────
   0. DESIGN TOKENS (CSS custom properties)
   ───────────────────────────────────────────── */
:root {
  --thm-color:        #e8a317;
  --thm-dark:         #c78a0f;   /* darkened amber for hover/active */
  --thm-glow:         rgba(232, 163, 23, 0.25);
  --ink:              #ffffff;
  --ink-muted:        rgba(255, 255, 255, 0.58);
  --ink-dim:          rgba(255, 255, 255, 0.35);
  --surface-2:        #111111;
  --surface-3:        #1a1a1a;
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:         150ms;
  --dur-mid:          240ms;
  --dur-slow:         360ms;
  --radius-btn:       3px;
}


/* ─────────────────────────────────────────────
   1. BUTTONS — transition, hover, focus, active
   ───────────────────────────────────────────── */

/* Base transition for all theme buttons */
.thm-btn,
.mini-btn,
a.thm-btn,
button.thm-btn,
.price-body3 > a,
.price-body4-btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    color            var(--dur-fast) var(--ease-out-quart),
    box-shadow       var(--dur-mid)  var(--ease-out-quart),
    transform        var(--dur-fast) var(--ease-out-quart);
  letter-spacing: 0.08em;
  will-change: transform, box-shadow;
}

/* Shimmer sweep on hover */
.thm-btn::after,
a.thm-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out-expo);
  pointer-events: none;
}

.thm-btn:hover::after,
a.thm-btn:hover::after {
  transform: translateX(100%);
}

/* Hover: darken + lift */
.thm-btn:hover,
.thm-btn:focus,
a.thm-btn:hover,
a.thm-btn:focus,
button.thm-btn:hover,
button.thm-btn:focus {
  background-color: var(--thm-dark) !important;
  box-shadow: 0 6px 20px var(--thm-glow), 0 2px 8px rgba(0,0,0,0.35);
  transform: translateY(-2px);
  outline: none;
}

/* Active: press down */
.thm-btn:active,
a.thm-btn:active,
button.thm-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px var(--thm-glow);
}

/* Keyboard focus ring — visible, branded */
.thm-btn:focus-visible,
a.thm-btn:focus-visible,
button.thm-btn:focus-visible {
  outline: 2px solid var(--thm-color);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--thm-glow);
}

/* Filter buttons (portfolio isotope) */
.fltr-btns > li > a,
.fltr-btns.style2 > li > a {
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    color            var(--dur-fast) var(--ease-out-quart),
    border-color     var(--dur-fast) var(--ease-out-quart),
    box-shadow       var(--dur-mid)  var(--ease-out-quart);
}

.fltr-btns.style2 > li > a:focus-visible {
  outline: 2px solid var(--thm-color);
  outline-offset: 2px;
}

/* P2 fix: ensure filter items have visible gap so labels don't run together */
.fltr-btns.style2 ul {
  gap: 0.5rem 2rem;
}

.fltr-btns.style2 > li {
  margin: 0.25rem 1rem !important;
}


/* ─────────────────────────────────────────────
   2. NAVIGATION — link transitions, active underline
   ───────────────────────────────────────────── */

/* Off-canvas menu links */
.menu-wrap ul li > a {
  transition: color var(--dur-fast) var(--ease-out-quart);
  position: relative;
}

/* Sticky header nav links — animated underline */
.menu-wrap2 > ul > li > a {
  position: relative;
  transition: color var(--dur-fast) var(--ease-out-quart);
}

.menu-wrap2 > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--thm-color);
  transition: width var(--dur-mid) var(--ease-out-expo);
  border-radius: 1px;
}

.menu-wrap2 > ul > li:hover > a::after,
.menu-wrap2 > ul > li.active > a::after,
.menu-wrap2 > ul > li > a:focus::after {
  width: 100%;
}

/* Search + menu icon buttons */
.menu-btns > a {
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    border-color     var(--dur-fast) var(--ease-out-quart),
    transform        var(--dur-fast) var(--ease-out-quart),
    box-shadow       var(--dur-mid)  var(--ease-out-quart);
}

.menu-btns > a:hover {
  transform: scale(1.08);
  box-shadow: 0 0 12px var(--thm-glow);
}

.menu-btns > a:active {
  transform: scale(0.96);
}

.menu-btns > a:focus-visible {
  outline: 2px solid var(--thm-color);
  outline-offset: 3px;
}


/* ─────────────────────────────────────────────
   3. PORTFOLIO CARDS — smoother hover overlay
   ───────────────────────────────────────────── */

.port-box3 {
  transition: transform var(--dur-mid) var(--ease-out-quart),
              box-shadow var(--dur-mid) var(--ease-out-quart);
}

.port-box3:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* Overlay transition */
.port-box3 > i {
  transition: opacity var(--dur-mid) var(--ease-out-quart),
              transform var(--dur-mid) var(--ease-out-quart);
}

/* Portfolio info text fade-up */
.port-info3 {
  transition: opacity var(--dur-mid) var(--ease-out-quart),
              transform var(--dur-mid) var(--ease-out-quart);
}

/* Image zoom on hover */
.port-box3 img {
  transition: transform var(--dur-slow) var(--ease-out-quart);
  will-change: transform;
}

.port-box3:hover img {
  transform: scale(1.04);
}

/* Portfolio info link circle */
.port-info3 > a {
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    transform        var(--dur-fast) var(--ease-out-quart),
    box-shadow       var(--dur-mid)  var(--ease-out-quart);
}

.port-info3 > a:hover,
.port-info3 > a:focus {
  transform: scale(1.12);
  box-shadow: 0 4px 16px var(--thm-glow);
}


/* ─────────────────────────────────────────────
   4. BLOG CARDS — image zoom, meta pill
   ───────────────────────────────────────────── */

.post-style2 {
  transition: transform var(--dur-mid) var(--ease-out-quart);
}

.post-style2:hover {
  transform: translateY(-3px);
}

/* Image zoom */
.post-img2 img {
  transition: transform var(--dur-slow) var(--ease-out-quart);
  will-change: transform;
}

.post-img2:hover img {
  transform: scale(1.05);
}

/* Post meta pill */
.post-meta {
  transition: box-shadow var(--dur-mid) var(--ease-out-quart);
}

.post-style2:hover .post-meta {
  box-shadow: 0 4px 14px var(--thm-glow);
}

/* Blog title link underline on hover */
.post-info2 > h3 > a {
  background-image: linear-gradient(var(--thm-color), var(--thm-color));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-mid) var(--ease-out-expo);
  text-decoration: none;
}

.post-info2 > h3 > a:hover,
.post-info2 > h3 > a:focus {
  background-size: 100% 1px;
  color: inherit;
}


/* ─────────────────────────────────────────────
   5. FORM INPUTS — focus states, placeholder, transitions
   ───────────────────────────────────────────── */

/* All inputs and textareas */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select,
.form-control {
  transition:
    border-color var(--dur-fast) var(--ease-out-quart),
    box-shadow   var(--dur-fast) var(--ease-out-quart),
    background   var(--dur-fast) var(--ease-out-quart);
  outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--thm-color) !important;
  box-shadow: 0 0 0 3px var(--thm-glow) !important;
  outline: none;
}

/* Placeholder contrast — WCAG AA on dark backgrounds */
::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

/* Dark-bg forms (contact strip, newsletter, search) */
.cont-wrap input::placeholder,
.widget form input::placeholder,
.search-wrap input::placeholder,
.uc-notify input::placeholder {
  color: var(--ink-dim);
}

/* Search input */
.search-wrap > form > input {
  transition:
    border-color var(--dur-fast) var(--ease-out-quart),
    box-shadow   var(--dur-fast) var(--ease-out-quart);
  border-bottom: 1px solid var(--ink-dim);
}

.search-wrap > form > input:focus {
  border-bottom-color: var(--thm-color);
  box-shadow: 0 2px 0 var(--thm-color);
}

/* Search submit button */
.search-wrap > form > button {
  transition:
    color      var(--dur-fast) var(--ease-out-quart),
    transform  var(--dur-fast) var(--ease-out-quart);
}

.search-wrap > form > button:hover {
  color: var(--thm-color);
  transform: scale(1.1);
}


/* ─────────────────────────────────────────────
   6. SOCIAL ICONS — hover lift + glow
   ───────────────────────────────────────────── */

.scl2 > a,
.scl > a,
.scl4 > a,
.port-scl > a,
.uc-social > a {
  transition:
    color            var(--dur-fast) var(--ease-out-quart),
    background-color var(--dur-fast) var(--ease-out-quart),
    border-color     var(--dur-fast) var(--ease-out-quart),
    transform        var(--dur-fast) var(--ease-out-quart),
    box-shadow       var(--dur-mid)  var(--ease-out-quart);
}

.scl2 > a:hover,
.scl2 > a:focus,
.scl4 > a:hover,
.scl4 > a:focus {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.scl4 > a:hover,
.scl4 > a:focus {
  transform: translateY(-3px) scale(1.06);
}


/* ─────────────────────────────────────────────
   7. TAGS & BADGES — polish
   ───────────────────────────────────────────── */

.tagcloud > a,
.tags > a {
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    color            var(--dur-fast) var(--ease-out-quart),
    border-color     var(--dur-fast) var(--ease-out-quart),
    transform        var(--dur-fast) var(--ease-out-quart),
    box-shadow       var(--dur-mid)  var(--ease-out-quart);
  letter-spacing: 0.04em;
}

.tagcloud > a:hover,
.tagcloud > a:focus,
.tags > a:hover,
.tags > a:focus {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px var(--thm-glow);
}

/* Post category meta */
.post-meta a {
  transition: opacity var(--dur-fast) var(--ease-out-quart);
}

.post-meta a:hover {
  opacity: 0.85;
}


/* ─────────────────────────────────────────────
   8. PAGINATION — hover states
   ───────────────────────────────────────────── */

.pagination > li > a,
.pagination > li > span {
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    color            var(--dur-fast) var(--ease-out-quart),
    box-shadow       var(--dur-mid)  var(--ease-out-quart),
    transform        var(--dur-fast) var(--ease-out-quart);
}

.pagination > li > a:hover,
.pagination > li > a:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--thm-glow);
}


/* ─────────────────────────────────────────────
   9. BREADCRUMB — spacing + transitions
   ───────────────────────────────────────────── */

.breadcrumb {
  letter-spacing: 0.04em;
  font-size: 13px;
}

.breadcrumb-item + .breadcrumb-item::before {
  opacity: 0.4;
}

.breadcrumb-item a {
  transition: color var(--dur-fast) var(--ease-out-quart),
              opacity var(--dur-fast) var(--ease-out-quart);
  opacity: 0.7;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
  opacity: 1;
}


/* ─────────────────────────────────────────────
   10. TESTIMONIALS — avatar hover ring
   ───────────────────────────────────────────── */

.testi-thumb img {
  transition:
    box-shadow var(--dur-mid) var(--ease-out-quart),
    transform  var(--dur-fast) var(--ease-out-quart);
}

.testi-item:hover .testi-thumb img {
  box-shadow: 0 0 0 3px var(--thm-color), 0 8px 24px rgba(0,0,0,0.35);
  transform: scale(1.04);
}


/* ─────────────────────────────────────────────
   11. BACK-TO-TOP BUTTON
   ───────────────────────────────────────────── */

.back-top {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
  bottom: 28px;
  right: 28px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity      var(--dur-mid) var(--ease-out-quart),
    transform    var(--dur-mid) var(--ease-out-quart),
    background   var(--dur-fast) var(--ease-out-quart),
    box-shadow   var(--dur-mid) var(--ease-out-quart);
  z-index: 999;
  text-decoration: none;
  font-size: 16px;
}

.back-top.visible,
.back-top:not([style*="display: none"]) {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-top:hover,
.back-top:focus {
  background: color-mix(in srgb, var(--theme-color) 80%, #000 20%);
  box-shadow: 0 8px 24px rgba(238, 51, 100, 0.3), 0 2px 8px rgba(0,0,0,0.4);
  transform: translateY(-3px);
  outline: none;
}

.back-top:active {
  transform: translateY(0);
}

.back-top:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 3px;
}


/* ─────────────────────────────────────────────
   12. TYPOGRAPHY — detail refinements
   ───────────────────────────────────────────── */

/* Cap body prose line length for readability */
.blog-detail p,
.about-info p,
.about-me-info p,
.get-info p,
.port-detail-info p {
  max-width: 68ch;
  text-wrap: pretty;
}

/* Balance headings so they don't orphan */
h1, h2, h3 {
  text-wrap: balance;
}

/* Slight tracking improvement on hero h2 */
.feat-cap h2 {
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Section headings — tighten tracking at large sizes */
.sec-title h2,
.page-title h1 {
  letter-spacing: -0.01em;
}

/* Skill bar labels — better contrast */
.prog-wrap2 span {
  letter-spacing: 0.04em;
  font-size: 13px;
}

/* Fun facts counter — tighten */
.fact-box h2 {
  letter-spacing: -0.03em;
}

/* Blog post meta line spacing */
.pst-dtl-mta {
  letter-spacing: 0.03em;
}


/* ─────────────────────────────────────────────
   13. SKILL BARS — animated fill refinement
   ───────────────────────────────────────────── */

.progress {
  border-radius: 100px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}

.progress-bar {
  background: linear-gradient(
    90deg,
    var(--thm-color) 0%,
    color-mix(in srgb, var(--thm-color) 85%, #fff 15%) 100%
  );
  border-radius: 100px;
  box-shadow: 0 0 8px var(--thm-glow);
  transition: width 1s var(--ease-out-expo);
}


/* ─────────────────────────────────────────────
   14. PRICING CARDS — hover lift
   ───────────────────────────────────────────── */

.price-box3 {
  transition:
    transform  var(--dur-mid) var(--ease-out-quart),
    box-shadow var(--dur-mid) var(--ease-out-quart);
}

.price-box3:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.price-box4 {
  transition:
    transform  var(--dur-mid) var(--ease-out-quart),
    box-shadow var(--dur-mid) var(--ease-out-quart);
}

.price-box4:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

/* Pricing CTA link */
.price-body3 > a {
  position: relative;
  display: inline-block;
  letter-spacing: 0.08em;
  transition:
    color        var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart),
    background   var(--dur-fast) var(--ease-out-quart),
    transform    var(--dur-fast) var(--ease-out-quart);
}

.price-body3 > a:hover,
.price-body3 > a:focus {
  transform: translateY(-1px);
}


/* ─────────────────────────────────────────────
   15. MARK / HIGHLIGHT (search results)
   ───────────────────────────────────────────── */

mark {
  background-color: var(--thm-color);
  color: #0d0d0d;
  padding: 1px 3px;
  border-radius: 2px;
  font-weight: 600;
}


/* ─────────────────────────────────────────────
   16. FOOTER NEWSLETTER INPUT
   ───────────────────────────────────────────── */

.ftr-widget .input-group {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  overflow: visible; /* allow full placeholder to show */
  flex-wrap: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              box-shadow   var(--dur-mid)  var(--ease-out-quart);
}

.ftr-widget .input-group:focus-within {
  border-color: var(--thm-color);
  box-shadow: 0 0 0 3px var(--thm-glow);
}

.ftr-widget .input-group input.form-control {
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  color: #fff;
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
}

.ftr-widget .input-group .thm-btn {
  flex-shrink: 0;
  border-radius: 0;
  white-space: nowrap;
}


/* ─────────────────────────────────────────────
   17. STICKY HEADER — refined shadow on scroll
   ───────────────────────────────────────────── */

.sticky-header {
  transition:
    background-color var(--dur-mid) var(--ease-out-quart),
    box-shadow       var(--dur-mid) var(--ease-out-quart);
}

.sticky-header.sticky {
  box-shadow: 0 2px 24px rgba(0,0,0,0.18);
}


/* ─────────────────────────────────────────────
   18. PORTFOLIO DETAIL SIDEBAR LINKS
   ───────────────────────────────────────────── */

.port-ord-info > li > span {
  letter-spacing: 0.06em;
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0.55;
}

.port-ord-info > li > a,
.port-ord-info > li {
  transition: color var(--dur-fast) var(--ease-out-quart);
}

.port-scl > a {
  transition:
    color     var(--dur-fast) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart);
}

.port-scl > a:hover,
.port-scl > a:focus {
  color: var(--thm-color);
  transform: translateY(-2px);
}


/* ─────────────────────────────────────────────
   19. PREFERS-REDUCED-MOTION
   All transitions and transforms become instant.
   ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .thm-btn::after,
  a.thm-btn::after {
    display: none;
  }
}


/* ─────────────────────────────────────────────
   20. FOCUS VISIBLE — global safe default
   ───────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--thm-color);
  outline-offset: 2px;
}

/* Suppress outline for mouse users on elements that have custom states */
:focus:not(:focus-visible) {
  outline: none;
}


/* ─────────────────────────────────────────────
   21. SELECTION COLOR
   ───────────────────────────────────────────── */

::selection {
  background: var(--thm-color);
  color: #0d0d0d;
}


/* ─────────────────────────────────────────────
   22. UNDER CONSTRUCTION PAGE — extra polish
   ───────────────────────────────────────────── */

.uc-wrap .thm-btn,
.uc-notify button {
  letter-spacing: 0.1em;
}


/* ═══════════════════════════════════════════════
   UIUX OVERHAUL — Typography & Hierarchy Fixes
   (from uiux-report.md — applied 2026-06-29)
   ═══════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   23. HERO HEADING — reduce from 172px to sane scale
   ───────────────────────────────────────────── */

.feat-cap > h2 {
  font-size: clamp(52px, 8vw, 96px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}

/* Hero span (tag line above heading) */
.feat-cap > span {
  font-size: clamp(11px, 1.2vw, 16px) !important;
  letter-spacing: 0.3em !important;
}

/* Hero sub-paragraph */
.feat-cap > p {
  font-size: clamp(14px, 1.5vw, 20px) !important;
  color: rgba(255,255,255,0.75) !important;
}


/* ─────────────────────────────────────────────
   24. PAGE TITLE h1 — reduce from 70px to 48px
   ───────────────────────────────────────────── */

.page-title > h1 {
  font-size: clamp(32px, 5vw, 48px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

.dark-layer3 .page-title > h1 {
  color: #fff;
}


/* ─────────────────────────────────────────────
   25. SECTION TITLES — reduce from 60px to 40px
   ───────────────────────────────────────────── */

/* sec-title.style2 used on About portfolio section */
.sec-title.style2 .sec-title-inner > h2 {
  font-size: clamp(28px, 4vw, 40px) !important;
  letter-spacing: -0.01em !important;
}

/* sec-title watermark background text */
.sec-title-inner > h2 i {
  font-size: clamp(48px, 9vw, 96px) !important;
}


/* ─────────────────────────────────────────────
   26. PORTFOLIO CARD TITLES — cap at 22px
   ───────────────────────────────────────────── */

/* Large variant (full-width col) */
.port-info3 > h3,
.col-md-6 .col-md-6 .port-info3 > h3,
.col-lg-3 .port-info3 > h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
}


/* ─────────────────────────────────────────────
   27. PRICING CARDS (style: basic / price-box3)
   Plan name h3: 60px → 22px
   Price h2: fine at ~33px
   GET STARTED button: white-on-white → fix
   ───────────────────────────────────────────── */

.price-head3 > h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

.price-head3 > h2 {
  font-size: clamp(28px, 3vw, 36px) !important;
  font-weight: 900 !important;
  margin-top: 8px !important;
}

/* GET STARTED: was white text on white bg — give it the theme red */
.price-body3 > a {
  background-color: var(--theme-color) !important;
  color: #fff !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  padding: 0.75rem 2rem !important;
}

.price-body3 > a:hover,
.price-body3 > a:focus {
  background-color: color-mix(in srgb, var(--theme-color) 80%, #000 20%) !important;
  color: #fff !important;
}


/* ─────────────────────────────────────────────
   28. PRICING CARDS (style: featured / price-box4)
   Plan name h3: fix from default h3 size
   Subtitle span: 55px → 14px
   BOOK NOW button: 27px → 14px
   ───────────────────────────────────────────── */

/* Plan name inside featured card */
.price-body4-inner > h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
}

/* Subtitle (was 55px!) */
.price-body4-inner > span {
  font-size: 13px !important;
  font-weight: 400 !important;
  opacity: 0.7 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

/* Price in featured card (keep prominent) */
.price-body4-inner > h2 {
  font-size: clamp(28px, 3vw, 36px) !important;
  font-weight: 900 !important;
  margin-top: 10px !important;
}

/* BOOK NOW CTA — was 27px */
.price-box4 > a {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: 1rem 2rem !important;
}


/* ─────────────────────────────────────────────
   29. FUN FACTS — reduce counter numbers 66px → 48px
   ───────────────────────────────────────────── */

.fact-box > h2 {
  font-size: clamp(36px, 5vw, 48px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Fun facts label — darken from #6c6c6c for contrast */
.fact-box > h6 {
  color: #999 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}


/* ─────────────────────────────────────────────
   30. FOOTER H4 — reduce from 24px to 18px
   ───────────────────────────────────────────── */

footer h4,
.ftr-widget > h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}


/* ─────────────────────────────────────────────
   31. BREADCRUMB CONTRAST — #888 → #555 (5:1 ratio)
   ───────────────────────────────────────────── */

.breadcrumb > li.breadcrumb-item {
  color: #555 !important;
}

.breadcrumb > li.breadcrumb-item a {
  color: #555 !important;
  opacity: 1 !important;
}

.breadcrumb > li.breadcrumb-item a:hover,
.breadcrumb > li.breadcrumb-item a:focus {
  color: var(--theme-color) !important;
}

/* breadcrumb.style2 on parallax pages */
.breadcrumb.style2 > li.breadcrumb-item {
  color: rgba(255,255,255,0.75) !important;
}

.breadcrumb.style2 > li.breadcrumb-item a {
  color: rgba(255,255,255,0.75) !important;
  opacity: 1 !important;
}

.breadcrumb.style2 > li.breadcrumb-item a:hover,
.breadcrumb.style2 > li.breadcrumb-item a:focus {
  color: #fff !important;
  opacity: 1 !important;
}


/* ─────────────────────────────────────────────
   32. PORTFOLIO GRID GUTTERS — 0px → 12px
   Scoped to the filterable portfolio page only (#portfolio-grid)
   ───────────────────────────────────────────── */

#portfolio-grid.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

#portfolio-grid.row > .fltr-itm {
  padding: 0 !important;
  flex: 0 0 calc(25% - 9px) !important;
  max-width: calc(25% - 9px) !important;
  margin: 0 !important;
}

@media (max-width: 991px) {
  #portfolio-grid.row > .fltr-itm {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
}

@media (max-width: 575px) {
  #portfolio-grid.row > .fltr-itm {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


/* ─────────────────────────────────────────────
   33. BLOG POST TITLE — 34px → 22px
   ───────────────────────────────────────────── */

.post-info2 > h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
}


/* ─────────────────────────────────────────────
   34. SKIP TO CONTENT — accessibility
   ───────────────────────────────────────────── */

.skip-to-content {
  position: fixed;          /* fixed so it works outside <main> */
  top: -999px;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  padding: 10px 24px;
  background: var(--thm-color);
  color: #0d0d0d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0 0 6px 6px;
  z-index: 100000;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: top 180ms cubic-bezier(0.25, 1, 0.5, 1),
              outline-color 120ms;
}

.skip-to-content:focus {
  top: 0;
  outline-color: #0d0d0d;
}


/* ─────────────────────────────────────────────
   35. SECTION VERTICAL RHYTHM — reduce excess spacing
   ───────────────────────────────────────────── */

/* Contact + Pricing: hero-to-content gap too large */
.get-touch-wrap.style2 {
  padding-top: 40px;
}

/* Standardise section max-padding on all pages */
@media (min-width: 992px) {
  .pt-130 { padding-top: 80px !important; }
  .pt-155 { padding-top: 100px !important; }
  .pb-120 { padding-bottom: 80px !important; }
}


/* ─────────────────────────────────────────────
   36. DESKTOP HORIZONTAL NAV (G2)
   On ≥992px: sticky-header always visible at top.
   Hamburger button still present for mobile.
   ───────────────────────────────────────────── */

@media (min-width: 992px) {
  /* Always show sticky-header on desktop — it's the horizontal nav */
  .sticky-header {
    opacity: 1 !important;
    visibility: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #111 !important;
    padding: 0 2.5rem !important;
    height: 68px !important;
    z-index: 99999 !important;
    box-shadow: 0 2px 24px rgba(0,0,0,0.35) !important;
  }

  /* Desktop: hide hamburger button */
  .menu-btn {
    display: none !important;
  }

  /* Desktop: keep search button visible but relocate in header */
  .menu-btns > a.search-btn {
    display: none; /* search accessible via sticky-header if needed */
  }

  /* Push page content down so sticky nav doesn't overlap hero */
  main > header.style1 {
    top: 68px !important;
  }

  /* Sticky header logo — size down slightly */
  .sticky-header .logo img {
    max-height: 38px;
    width: auto;
  }

  /* Desktop nav links — tighter padding */
  .menu-wrap2 > ul > li > a {
    padding: 0 1.1rem !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.85) !important;
    line-height: 68px !important;
    display: block !important;
    transition: color var(--dur-fast) var(--ease-out-quart) !important;
  }

  .menu-wrap2 > ul > li:hover > a,
  .menu-wrap2 > ul > li.active > a {
    color: var(--thm-color) !important;
  }

  .menu-wrap2 > ul > li > a::after {
    bottom: 0;
  }

  /* Add a search icon to sticky header nav */
  .sticky-header .menu-wrap2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

@media (max-width: 991px) {
  /* Mobile: keep hamburger, hide sticky header */
  .sticky-header {
    display: none !important;
  }
}


/* ─────────────────────────────────────────────
   37. BACK-TO-TOP — amber accent (fixes G10: yellow clash)
   ───────────────────────────────────────────── */

.back-top {
  background: var(--thm-color) !important;
  color: #0d0d0d !important;
}

.back-top:hover,
.back-top:focus {
  background: var(--thm-dark) !important;
  box-shadow: 0 8px 24px var(--thm-glow), 0 2px 8px rgba(0,0,0,0.4) !important;
}


/* ─────────────────────────────────────────────
   38. BREADCRUMB SEPARATOR (G14)
   Add '/' between items for clarity
   ───────────────────────────────────────────── */

/* Default breadcrumb (light bg) */
.breadcrumb-item + .breadcrumb-item::before {
  content: "/" !important;
  padding-right: 0.5rem !important;
  opacity: 0.5 !important;
}

/* Style2 breadcrumb (parallax/dark bg) */
.breadcrumb.style2 .breadcrumb-item + .breadcrumb-item::before {
  content: "/" !important;
  color: rgba(255,255,255,0.5) !important;
  opacity: 1 !important;
}


/* ─────────────────────────────────────────────
   39. STICKY HEADER (G9) — ensure main header also sticky-ish
   Mobile: original absolute header behaviour preserved.
   ───────────────────────────────────────────── */

/* No change needed; covered by rule 36 above (sticky-header always fixed on desktop) */


/* ─────────────────────────────────────────────
   40. CONTACT FORM LABELS (C2)
   ───────────────────────────────────────────── */

.form-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
  margin-top: 4px;
}

/* On light-bg pages (contact page has light form) */
.form-wrap .form-field-label {
  color: #444;
}

/* Remove the extra mb-20 from inputs now that we have labels */
.form-wrap input.brd-rd3,
.form-wrap textarea.brd-rd3 {
  margin-bottom: 4px !important;
}

/* Visually-hidden utility */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ─────────────────────────────────────────────
   41. PRICING — text overflow fix (R3) + Most Popular badge
   ───────────────────────────────────────────── */

.price-head3 > h3,
.price-body4-inner > h3 {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Most Popular badge */
.price-box3 {
  position: relative;
}

.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--thm-color);
  color: #0d0d0d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 100px;
  white-space: nowrap;
  z-index: 1;
  box-shadow: 0 4px 12px var(--thm-glow);
}

/* Popular card: amber top border accent */
.price-box3--popular {
  border-top: 3px solid var(--thm-color) !important;
  padding-top: 16px !important;
}


/* ─────────────────────────────────────────────
   42. PORTFOLIO FILTER SPACING (P2) — reinforce
   ───────────────────────────────────────────── */

.fltr-btns.style2 > ul {
  gap: 0 !important;
}

.fltr-btns.style2 > ul > li,
.fltr-btns.style2 li {
  margin: 0.35rem 1.2rem !important;
}

.fltr-btns.style2 li a {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}


/* ═══════════════════════════════════════════════
   PRICING CARDS — full visual overhaul
   (gradient cards + black/featured cards)
   ═══════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   43. GRADIENT CARDS (price-box3)
   ─ Remove clutter border (::before white stroke)
   ─ Fix plan-name h3 size (was 60px / 3.75rem)
   ─ Fix CTA button — visible dark text on white
   ─ Better internal padding
   ───────────────────────────────────────────── */

/* Kill the inner white border frame — clutters the card */
.price-box3::before {
  display: none !important;
}

/* More breathing room; ::before removal frees space */
.price-box3 {
  padding: 2.5rem 2rem 2.5rem !important;
}

/* Plan name: 60px → 20px, contained */
.price-head3 > h3 {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  color: rgba(255,255,255,0.75) !important;
  margin-bottom: 0.5rem !important;
}

/* Price h2 — scale down slightly */
.price-head3 > h2 {
  font-size: clamp(26px, 3vw, 34px) !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

/* Subtitle span */
.price-head3 > span {
  font-size: 12px !important;
  color: rgba(255,255,255,0.6) !important;
  letter-spacing: 0.04em !important;
}

/* Feature list */
.price-body3 > ul li {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.85) !important;
}

/* CTA button — white bg, dark text, readable */
.price-body3 > a,
.price-body3 a.thm-btn {
  background-color: #fff !important;
  color: #1a1a1a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 2rem !important;
  border-radius: 3px !important;
  display: inline-block !important;
  position: relative !important;
  z-index: 1 !important;
  transition: background-color var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-mid) var(--ease-out-quart) !important;
}

.price-body3 > a:hover,
.price-body3 a.thm-btn:hover,
.price-body3 > a:focus,
.price-body3 a.thm-btn:focus {
  background-color: var(--thm-color) !important;
  color: #0d0d0d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}


/* ─────────────────────────────────────────────
   44. BLACK/FEATURED CARDS (price-box4 / price-body4)
   ─ Fix name h3 text overflow
   ─ Fix subtitle span overflow (was 3.4rem)
   ─ Fix dead space: use flex column, push CTA to bottom
   ─ Fix BOOK NOW button font size (was 27px)
   ───────────────────────────────────────────── */

/* Card: flex column so CTA sticks to bottom */
.price-box4 {
  display: flex !important;
  flex-direction: column !important;
}

/* price-body4 fills available space, min-height reduced */
.price-body4 {
  flex: 1 !important;
  min-height: 0 !important;         /* was 51.875rem — enormous */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 2.5rem 1.75rem !important;
}

/* Inner wrapper — full width, text left */
.price-body4-inner {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

/* Plan name h3: text overflow fix */
.price-body4-inner > h3 {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  color: rgba(255,255,255,0.7) !important;
  margin-bottom: 0.4rem !important;
}

/* Subtitle span: was 3.4rem — fix */
.price-body4-inner > span {
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  color: rgba(255,255,255,0.5) !important;
}

/* Price in black card */
.price-body4-inner > h2 {
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/* Feature list items */
.price-body4-inner > ul li {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.8) !important;
}

/* BOOK NOW / CTA button — was 27px font */
.price-box4 > a {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 1rem 2rem !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}


/* ═══════════════════════════════════════════════
   FOOTER — contrast + newsletter input visibility
   ═══════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   45. FOOTER BODY TEXT — lighten for readability
   #151515 bg needs ≥4.5:1 contrast
   ───────────────────────────────────────────── */

/* General paragraph text in dark footer */
.drk-bg4 p,
.drk-bg4 .ftr-widget > p {
  color: rgba(255,255,255,0.62) !important;
}

/* Quick Links, Contact list items */
.drk-bg4 .ftr-widget ul li,
.drk-bg4 .ftr-list li,
.drk-bg4 .get-info-list > li,
.drk-bg4 .get-info-list > li p {
  color: rgba(255,255,255,0.62) !important;
}

/* All links in footer */
.drk-bg4 .ftr-widget a,
.drk-bg4 .ftr-list a,
.drk-bg4 .get-info-list a {
  color: rgba(255,255,255,0.62) !important;
  transition: color var(--dur-fast) var(--ease-out-quart);
  text-decoration: none;
}

.drk-bg4 .ftr-widget a:hover,
.drk-bg4 .ftr-widget a:focus,
.drk-bg4 .ftr-list a:hover,
.drk-bg4 .ftr-list a:focus,
.drk-bg4 .get-info-list a:hover,
.drk-bg4 .get-info-list a:focus {
  color: var(--thm-color) !important;
}

/* Footer section headings (h4) */
.drk-bg4 .ftr-widget > h4,
.drk-bg4 h4 {
  color: #fff !important;
}

/* ─────────────────────────────────────────────
   46. NEWSLETTER INPUT — visible on dark bg
   Dark text on dark bg → light input bg
   ───────────────────────────────────────────── */

.ftr-widget .input-group {
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  flex-wrap: nowrap !important;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-mid) var(--ease-out-quart) !important;
  background: rgba(255,255,255,0.07) !important;
}

.ftr-widget .input-group:focus-within {
  border-color: var(--thm-color) !important;
  box-shadow: 0 0 0 3px var(--thm-glow) !important;
}

.ftr-widget .input-group input.form-control {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  padding: 0.65rem 0.85rem !important;
  font-size: 13px !important;
}

.ftr-widget .input-group input.form-control::placeholder {
  color: rgba(255,255,255,0.45) !important;
  opacity: 1 !important;
}

/* Subscribe button */
.ftr-widget .input-group .thm-btn {
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  padding: 0 1.2rem !important;
}


/* ═══════════════════════════════════════════════
   UIUX FIX PASS — June 2026
   ═══════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   A. PORTFOLIO FILTER BUTTONS — gap between tags
   The style2 list uses flex but items run together.
   ───────────────────────────────────────────── */

/* The direct child of .fltr-btns.style2 IS the <ul> */
.fltr-btns.style2 {
  display: block !important;
}

.fltr-btns.style2 ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.5rem 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.fltr-btns.style2 ul li {
  margin: 0 !important;  /* gap handles spacing */
  padding: 0.4rem 0 !important;
}

.fltr-btns.style2 ul li a {
  position: relative;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #444 !important;
  padding: 0.3rem 0 !important;
  transition: color var(--dur-fast) var(--ease-out-quart) !important;
}

.fltr-btns.style2 ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--thm-color);
  border-radius: 2px;
  transition: width var(--dur-mid) var(--ease-out-quart);
}

.fltr-btns.style2 ul li.active a,
.fltr-btns.style2 ul li a:hover,
.fltr-btns.style2 ul li a:focus {
  color: var(--thm-color) !important;
}

.fltr-btns.style2 ul li.active a::after,
.fltr-btns.style2 ul li a:hover::after,
.fltr-btns.style2 ul li a:focus::after {
  width: 100%;
}


/* ─────────────────────────────────────────────
   B. CONTACT PAGE — remove excess blank gap
   between breadcrumb section and Get-in-Touch
   ───────────────────────────────────────────── */

/* The large blank space comes from empty section padding */
.get-touch-wrap {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* Remove double top-padding from the contact section wrapper */
.contact-page-section .w-100.pt-100 {
  padding-top: 60px !important;
}


/* ─────────────────────────────────────────────
   C. FOOTER NEWSLETTER — fix input overflow
   "Your Email Ad" clipped because input is too narrow
   ───────────────────────────────────────────── */

/* Ensure the input-group stretches full width */
.ftr-widget form.w-100 .input-group {
  width: 100% !important;
}

.ftr-widget .input-group input[type="email"] {
  min-width: 0 !important;
  width: 100% !important;
}


/* ─────────────────────────────────────────────
   D. PRICING CARD CTA BUTTON — text contrast
   White button on pink/purple gradient → readable
   ───────────────────────────────────────────── */

/* Ensure CTA link inside price-body3 always shows dark text */
.price-body3 a,
.price-body3 > a,
.price-body3 .thm-btn {
  color: #1a1a1a !important;
  background-color: #fff !important;
}

.price-body3 a:hover,
.price-body3 > a:hover,
.price-body3 .thm-btn:hover,
.price-body3 a:focus,
.price-body3 > a:focus,
.price-body3 .thm-btn:focus {
  background-color: var(--thm-color) !important;
  color: #0d0d0d !important;
}


/* ─────────────────────────────────────────────
   E. PRICING FEATURED CARD (price-box4)
   CTA button a.thm-btn w-100 — readable text
   ───────────────────────────────────────────── */

.price-box4 > a.thm-btn {
  color: #0d0d0d !important;
}

.price-box4 > a.thm-btn:hover,
.price-box4 > a.thm-btn:focus {
  color: #0d0d0d !important;
}


/* ─────────────────────────────────────────────
   F. PAGE TITLE HERO — text legibility on empty bg
   When parallax image fails to load the title
   text must remain readable
   ───────────────────────────────────────────── */

.page-title h1 {
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}


/* ─────────────────────────────────────────────
   G. BACK-TO-TOP BUTTON — z-index safe
   Keep above sticky header
   ───────────────────────────────────────────── */

.back-top {
  z-index: 99998 !important;
}


/* ─────────────────────────────────────────────
   H. GENERAL FOCUS RING — keyboard nav polish
   ───────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--thm-color) !important;
  outline-offset: 3px !important;
}

/* Suppress the default focus ring on mouse clicks (only show for keyboard) */
:focus:not(:focus-visible) {
  outline: none;
}



/* ═══════════════════════════════════════════════
   CRITICAL LAYOUT FIXES — 2026-06-29
   ═══════════════════════════════════════════════ */

/* FIX 1. main { display: flex } overrides — 
   style.css sets: main, section, footer, .gap { display: flex }
   We override main to block so #page-content fills width */
main {
  display: block !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

/* FIX 2. #page-content must fill full width */
#page-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  overflow-x: hidden !important;
}

/* FIX 3. sections inside #page-content: keep flex but full width */
#page-content > section {
  display: block !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

/* FIX 4. Hero section inline style override — 
   The hero <section> has id="hero-section" + inline style.
   Force slick/feat-wrap to correct vw. */
#hero-section,
#hero-section > div {
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

.feat-wrap,
.feat-caro {
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

.feat-img {
  width: 100% !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 480px !important;
  max-height: 900px !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  z-index: 0 !important;
}

.feat-item {
  position: relative !important;
  height: 100vh !important;
  min-height: 480px !important;
  max-height: 900px !important;
  overflow: hidden !important;
}

.feat-item .container {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  z-index: 2 !important;
}

.feat-cap {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 2 !important;
  max-width: 700px !important;
  padding: 0 1rem !important;
}

.feat-cap > span,
.feat-cap > h2,
.feat-cap > p {
  color: #fff !important;
}

/* Dark overlay on hero so text is readable */
.feat-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* FIX 5. Portfolio grid on home — port-wrap3 needs container */
.port-wrap3 {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.port-wrap3 .row.mrg {
  margin: 0 !important;
}

.port-box3 {
  overflow: hidden !important;
}

.port-box3 img {
  width: 100% !important;
  height: auto !important;
  max-height: 600px !important;
  object-fit: cover !important;
  display: block !important;
}

/* FIX 6. Duplicate logo — hide original header on desktop */
@media (min-width: 992px) {
  header.stick.style1 {
    display: none !important;
  }
  #page-content {
    padding-top: 68px !important;
  }
}

@media (max-width: 991px) {
  .sticky-header {
    display: none !important;
  }
  header.stick.style1 {
    display: flex !important;
  }
  #page-content {
    padding-top: 0 !important;
  }
}

/* FIX 7. Pricing price-body4 min-height explosion */
.price-body4 {
  min-height: 0 !important;
  padding: 2.5rem 1.75rem !important;
}

.price-box4 {
  height: auto !important;
}

/* FIX 8. Section overflow safety */
section {
  overflow-x: hidden !important;
}