/*
Kumari Consultancy — project-specific extensions on top of the Nova theme
(assets/css/style.css). Components here are derived from Nova's own
tokens/sections (see plan) rather than a new visual system:
- .page-hero / .breadcrumb-nav / .error-page  -> derived from hero__v6 + faq__v2 tint
- .cta-band                                    -> derived from stats__v3 solid-bg band
- .blueprint-panel                             -> honest CSS graphic replacing stock photos
- .locations-grid / .badge-chip                -> derived from the base .list-checked / footer badge tokens
*/

/* ===== Shared light gradient (homepage hero + all subpage page-hero) ===== */
:root {
  --hero-gradient: linear-gradient(160deg, #ffffff 0%, #f5faf9 45%, #eaf4f1 100%);
}

/* ===== Generic eyebrow pill (Nova repeats this identically inside every
   section's own scope — about__v4/services__v3/faq__v2/etc — de-scoped here
   once so new sections that don't map to an existing Nova section can use
   it too, e.g. the Locations section). ===== */
.subtitle {
  background-color: rgba(var(--bs-secondary-rgb), 0.2);
  color: var(--bs-primary);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

/* ===== Inner-page hero (About / Services / Service / Contact) — same light
   gradient language as the homepage hero, no decor symbols, no subtitle
   pill, centered composition: breadcrumb, then H1 + intro paragraph. ===== */
.page-hero {
  padding: 90px 0 40px;
  background: var(--hero-gradient);
}
@media (min-width: 992px) {
  .page-hero {
    padding: 140px 0 60px;
  }
}
.page-hero__content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media (min-width: 576px) {
  .page-hero__content {
    width: 90%;
  }
}
@media (min-width: 992px) {
  .page-hero__content {
    width: 80%;
    max-width: 1000px;
  }
}
.page-hero h1 {
  font-size: 40px;
  margin-bottom: 0.75rem;
}
@media (max-width: 991.98px) {
  .page-hero h1 {
    font-size: 28px;
  }
}
.page-hero p {
  margin-left: auto;
  margin-right: auto;
}

/* ===== Breadcrumb — visually distinct from the hero H1/paragraph below it,
   centered to match the new page-hero composition ===== */
.breadcrumb-nav {
  margin-bottom: 1.75rem;
  font-size: 0.8125rem;
}
.breadcrumb-nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.breadcrumb-nav li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(var(--inverse-color-rgb), 0.55);
}
.breadcrumb-nav a {
  color: rgba(var(--inverse-color-rgb), 0.7);
  text-decoration: none;
}
.breadcrumb-nav a:hover {
  color: var(--bs-primary);
}
.breadcrumb-nav li[aria-current="page"] {
  color: var(--inverse-color);
  font-weight: 600;
}
.breadcrumb-separator {
  color: rgba(var(--inverse-color-rgb), 0.35);
}

/* ===== CTA band (derived from stats__v3's solid primary band) ===== */
.cta-band .content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.cta-band h2 {
  color: var(--bs-white);
  max-width: 560px;
  margin-bottom: 0.5rem;
}
.cta-band p {
  color: var(--bs-secondary);
  margin-bottom: 0;
  max-width: 480px;
}
.cta-band .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.cta-band .cta-actions a.text-link-light {
  color: var(--bs-white);
  font-weight: 600;
}

/* ===== Honest CSS graphic panels (replace irrelevant stock photography) ===== */
.blueprint-panel {
  position: relative;
  min-height: 340px;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--bs-primary);
  background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  display: flex;
  align-items: flex-end;
  padding: 1.75rem;
}
.blueprint-panel .blueprint-label {
  display: block;
  color: var(--bs-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.blueprint-panel .blueprint-title {
  color: var(--bs-white);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  margin: 0;
}
@media (max-width: 767.98px) {
  .blueprint-panel {
    min-height: 240px;
  }
}

/* ===== Light variant of Nova's .special-link, for use on dark/primary bands ===== */
.special-link.light {
  color: var(--bs-white);
}
.special-link.light .icons {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--bs-white);
}

/* ===== Locations grid ===== */
.locations-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.locations-grid li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 7px;
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-primary);
  font-weight: 600;
  font-size: 0.9rem;
}
.dark-band .locations-grid li,
.stats__v3 .locations-grid li {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--bs-white);
}

/* ===== Contact info rows: prevent long emails/phone numbers overflowing
   the flex row at narrow widths (icon has flex-shrink-0, text sibling
   needs to be allowed to shrink and break) ===== */
.contact__v2 .d-flex.align-items-start > span {
  min-width: 0;
}
.contact__v2 a {
  overflow-wrap: anywhere;
}

/* ===== 404 ===== */
.error-page {
  text-align: center;
  padding: 130px 0 100px;
}
.error-page .error-code {
  display: block;
  font-size: clamp(4.5rem, 14vw, 9rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(var(--bs-primary-rgb), 0.15);
  margin-bottom: 0.5rem;
}
.error-page .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
}

/* ===== Service detail image (optional, sits above .covers-panel) =====
   Prepared now so future images only need a filename in config/services.php
   — aspect-ratio reserves the box before the image loads (no CLS), so no
   HTML width/height attributes are needed for that purpose. */
.service-detail-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 1.5rem;
}

/* ===== Covers panel (wraps the service check-list) ===== */
.covers-panel {
  padding: 1.75rem;
  border-top: 3px solid var(--bs-primary);
  background-color: rgba(var(--inverse-color-rgb), 0.02);
  border-radius: 10px;
}
.covers-panel > span {
  display: block;
  margin-bottom: 0.75rem;
  color: rgba(var(--inverse-color-rgb), 0.65);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ===== Service check-list (reuses about__v4's icon-badge visual language) ===== */
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(var(--inverse-color-rgb), 0.1);
  font-weight: 600;
  color: var(--inverse-color);
}
.check-list li:first-child {
  border-top: none;
}
.check-list li .icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  display: inline-block;
  background-color: var(--bs-primary);
  color: var(--bs-white);
  font-size: 12px;
  border-radius: 2px;
}

/* ===== Fact panel (About page — factual, non-fabricated practice note) ===== */
.fact-panel {
  padding: 1.75rem;
  border-top: 3px solid var(--bs-primary);
  background-color: rgba(var(--inverse-color-rgb), 0.02);
  border-radius: 10px;
}
.fact-panel span {
  display: block;
  margin-bottom: 0.5rem;
  color: rgba(var(--inverse-color-rgb), 0.65);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fact-panel strong {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--bs-heading-color);
  font-size: 2rem;
}
.fact-panel p {
  margin: 0;
  font-size: 0.875rem;
}

/* ===== Capability cards (About page areas of specialization) ===== */
.capability-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.capability-cards article {
  padding: 1.75rem 1.5rem;
  border: 1px solid rgba(var(--inverse-color-rgb), 0.2);
  border-radius: 14px;
}
.capability-cards article h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.capability-cards article p {
  margin: 0;
  font-size: 0.9rem;
}
@media (max-width: 991.98px) {
  .capability-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .capability-cards {
    grid-template-columns: 1fr;
  }
}

/* ===== Type grid (applicable property types etc.) ===== */
.type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.type-grid div {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(var(--inverse-color-rgb), 0.2);
  border-radius: 10px;
  font-weight: 600;
  color: var(--inverse-color);
}
@media (max-width: 575.98px) {
  .type-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Locations Served band (scoped — do not affect other stats__v3
   usages such as the homepage CTA or services-index consulting band) ===== */
.service-locations-band h2 {
  color: var(--bs-white);
}
.service-locations-band p {
  color: var(--bs-secondary);
}

/* ===== Office cards (Contact page) ===== */
.office-card {
  padding: 1.5rem;
  height: 100%;
  border: 1px solid rgba(var(--inverse-color-rgb), 0.15);
  border-radius: 14px;
  background-color: rgba(var(--inverse-color-rgb), 0.02);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.office-card:hover,
.office-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(var(--bs-primary-rgb), 0.35);
  box-shadow: 0 0.5rem 1.25rem rgba(var(--bs-black-rgb), 0.08);
}
.office-card .office-type {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 3px 10px;
  border-radius: 6px;
  background-color: rgba(var(--bs-secondary-rgb), 0.25);
  color: var(--bs-primary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.office-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}
.office-card address {
  margin-bottom: 0.75rem;
  font-style: normal;
  font-size: 0.875rem;
  color: var(--inverse-color);
}
.office-card .office-line {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.office-card .office-line i {
  margin-top: 0.2rem;
  color: var(--bs-primary);
  flex-shrink: 0;
}
.office-card .office-line a {
  color: var(--inverse-color);
  text-decoration: none;
}
.office-card .office-line a:hover {
  color: var(--bs-primary);
}
@media (prefers-reduced-motion: reduce) {
  .office-card:hover,
  .office-card:focus-within {
    transform: none;
  }
}

/* ===== Contact form honeypot ===== */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== Services dropdown width fix (desktop) =====
   Nova's own style.css fixes the dropdown at a flat 200px (@media min-width:
   992px), which is too narrow for "Building / Structural Stability
   Certification" and "Plan Approval for Corporation and Panchayat" and lets
   their text escape the menu box. Overridden here (loads after style.css,
   same selector/specificity, later source order wins) rather than editing
   the purchased Nova base CSS. Mobile/offcanvas already sizes the menu
   correctly on its own via Bootstrap's built-in navbar+offcanvas responsive
   behavior (position:static, full offcanvas width) — no override needed
   below 992px. */
@media (min-width: 992px) {
  .fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu {
    min-width: 300px;
    width: 320px;
  }
}
.fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu .dropdown-item,
.fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu .nav-link {
  white-space: normal;
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* ===== Header logo (larger, responsive per breakpoint — 6:1 wordmark) ===== */
.fbs__net-navbar .navbar-brand .header-logo {
  width: 155px;
  height: auto;
}
@media (min-width: 576px) {
  .fbs__net-navbar .navbar-brand .header-logo { width: 165px; }
}
@media (min-width: 768px) {
  .fbs__net-navbar .navbar-brand .header-logo { width: 190px; }
}
@media (min-width: 992px) {
  .fbs__net-navbar .navbar-brand .header-logo { width: 220px; }
}
@media (min-width: 1200px) {
  .fbs__net-navbar .navbar-brand .header-logo { width: 235px; }
}
@media (min-width: 1400px) {
  .fbs__net-navbar .navbar-brand .header-logo { width: 250px; }
}
@media (max-width: 359.98px) {
  .fbs__net-navbar .navbar-brand .header-logo { width: 140px; }
}
.fbs__net-navbar .offcanvas-header .offcanvas-logo {
  width: 170px;
  height: auto;
}

/* ===== Homepage hero: full-width light gradient (index only, .hero__v6 is
   never used on inner pages) ===== */
.hero__v6 {
  position: relative;
  overflow-x: hidden;
  background: var(--hero-gradient);
  /* Nova's own style.css fixes this at a flat "10rem 0 !important" (equal
     top/bottom). Top clearance is still needed for the fixed/absolute
     header, but the bottom no longer needs to match now that the bank
     strip sits right above the section's own edge. */
  padding: 10rem 0 2rem 0 !important;
}
.hero__v6 > .container {
  position: relative;
  z-index: 2;
}

/* ===== Homepage hero: subtle decorative engineering graphics =====
   Low-opacity, thin-stroke, pointer-events:none, purely decorative
   (aria-hidden), confined to the hero's outer gutters so they never sit
   under the H1/description/CTA or the existing blueprint panel. Hidden
   below md since there is no safe gutter space at narrow widths. Reduced
   motion is handled by the global rule at the bottom of this file. */
.hero-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .hero-decor { display: none; }
}
.hero-decor__item {
  position: absolute;
  color: var(--bs-primary);
  opacity: 0.12;
}
.hero-decor__item-1 { top: 7%; left: 2%; animation: heroRotate 16s ease-in-out infinite alternate; }
.hero-decor__item-2 { top: 22%; left: 5.5%; animation: heroDriftX 13s ease-in-out infinite alternate; animation-delay: 1.2s; }
.hero-decor__item-3 { bottom: 12%; left: 4%; animation: heroBreathe 11s ease-in-out infinite alternate; animation-delay: 2.4s; }
.hero-decor__item-4 { top: 9%; right: 3%; animation: heroDriftY 15s ease-in-out infinite alternate; animation-delay: 0.6s; }
.hero-decor__item-5 { bottom: 16%; right: 5%; animation: heroDriftX 18s ease-in-out infinite alternate-reverse; animation-delay: 3s; }
.hero-decor__item-6 { top: 44%; right: 2%; animation: heroBreathe 14s ease-in-out infinite alternate; animation-delay: 1.8s; }

/* Nova's container caps at 1140px, so between ~992px and ~1400px the outer
   gutter is too narrow for these two right-side symbols to clear the hero
   image (they only regain clear gutter space once the viewport is wide
   enough that the container has hit its cap and the gutter grows further).
   Hidden rather than merely dimmed, since at this range they'd otherwise
   sit almost on top of the image. */
@media (min-width: 768px) and (max-width: 1399.98px) {
  .hero-decor__item-5,
  .hero-decor__item-6 {
    display: none;
  }
}

@keyframes heroDriftY { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes heroDriftX { from { transform: translateX(0); } to { transform: translateX(10px); } }
@keyframes heroRotate { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes heroBreathe { from { opacity: 0.06; } to { opacity: 0.18; } }

/* ===== Section background rhythm (restrained tint, homepage) ===== */
.section-tint {
  background-color: #F6F8F7;
}

/* ===== Dark footer (theme primary, not a separate dark teal) ===== */
.footer {
  --bs-border-color: rgba(255, 255, 255, 0.15);
  background-color: var(--bs-primary);
  color: rgba(255, 255, 255, 0.85);
}
.footer h2,
.footer h3,
.footer h4 {
  color: var(--bs-white);
}
.footer p,
.footer address {
  color: rgba(255, 255, 255, 0.85);
}
.footer a {
  color: rgba(255, 255, 255, 0.75);
}
.footer a:hover,
.footer a:focus {
  color: var(--bs-secondary);
}
.footer .quick-contact i {
  color: var(--bs-secondary);
}
.footer .quick-contact a,
.footer .quick-contact p {
  min-width: 0;
  overflow-wrap: anywhere;
}
.footer .credits {
  color: rgba(255, 255, 255, 0.6);
}
.footer .footer-logo {
  display: block;
  width: 180px;
  height: auto;
}
@media (min-width: 768px) {
  .footer .footer-logo { width: 205px; }
}
@media (min-width: 992px) {
  .footer .footer-logo { width: 235px; }
}

/* ===== Homepage hero bank strip (replaces the old "Regional service
   presence" note; reuses .hero-subtitle so the label matches "ENGINEERS &
   VALUERS · SINCE 1990" exactly, no new pill styling needed) ===== */
.hero-bank-strip {
  margin-top: 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(var(--inverse-color-rgb), 0.08);
  text-align: center;
}
@media (min-width: 992px) {
  .hero-bank-strip {
    padding-top: 1rem;
  }
}

/* ===== Bank logo card — shared by the homepage carousel and the Bank
   Panel Valuers grid. Equal visual height, grayscale by default, full
   colour + a very light animation on hover. Touch devices simply keep the
   (still recognisable) grayscale default, per the no-hover-required rule. ===== */
.bank-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 0.75rem 1rem;
  background-color: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(var(--inverse-color-rgb), 0.12);
  border-radius: 10px;
}
@media (min-width: 768px) {
  .bank-logo-card { min-height: 88px; }
}
@media (min-width: 992px) {
  .bank-logo-card { min-height: 96px; }
}
.bank-logo-card img {
  width: auto;
  height: auto;
  max-width: 150px;
  max-height: 52px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

/* ===== Homepage carousel presentation: minimal floating logo strip, no
   card box (background/border/padding/shadow removed here only — the
   Bank Panel Valuers grid below keeps the full card treatment). Owl's own
   `margin` option (see main.js) still keeps items apart. ===== */
.hero-bank-strip .bank-logo-card {
  min-height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Homepage carousel: calm, image-level hover only */
.bank-logo-carousel .bank-logo-card:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.02);
}

/* Bank Panel Valuers grid: card-level lift, matches .office-card language */
.bank-logo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 420px) {
  .bank-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 576px) {
  .bank-logo-grid { gap: 1rem; }
}
@media (min-width: 768px) {
  .bank-logo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .bank-logo-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px) {
  .bank-logo-grid { grid-template-columns: repeat(5, 1fr); }
}
.bank-logo-grid .bank-logo-card {
  min-width: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bank-logo-grid .bank-logo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--bs-primary-rgb), 0.35);
  box-shadow: 0 0.5rem 1rem rgba(var(--bs-black-rgb), 0.08);
}
/* Full colour by default on this page — no grayscale, hover only lifts the
   card (never touches saturation/opacity here). */
.bank-logo-grid .bank-logo-card img {
  width: 100%;
  max-width: 150px;
  height: auto;
  filter: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .bank-logo-grid .bank-logo-card:hover {
    transform: none;
  }
}

/* Owl Carousel structural bits not covered by the vendor CSS in this setup */
.bank-logo-carousel .owl-stage {
  display: flex;
  align-items: center;
}
.bank-logo-carousel .owl-nav,
.bank-logo-carousel .owl-dots {
  display: none;
}

/* ===== Homepage hero image (replaces the old blueprint-panel placeholder
   on the right side of the hero). Transparent-background source image, so
   no card/border/shadow — it should blend straight into the hero
   gradient. ===== */
.hero-main-image {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* ===== Homepage About section image (replaces the old blueprint-panel in
   the left column; .mission-statement overlay card is unchanged). ===== */
.home-about-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  box-shadow: 0 0.5rem 1.5rem rgba(var(--bs-black-rgb), 0.06);
}

/* ===== About Us page image (sits above .fact-panel in the right column) ===== */
.about-page-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  margin-bottom: 28px;
}

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