/* ==========================================================================
   R SAHDEV & ASSOCIATES — Home Page Stylesheet
   Design concept: a financial statement / ledger, rendered as a website.
   Palette: ink navy, paper, muted brass, deep ledger-green.
   ========================================================================== */

:root {
  --ink:        #12233B;   /* deep navy — primary dark */
  --ink-2:      #0D1A2C;   /* darker navy for depth/gradients */
  --paper:      #F7F5EF;   /* warm paper, not cream-terracotta cliché */
  --paper-2:    #FFFFFF;
  --brass:      #B98B4E;   /* muted brass accent */
  --brass-dark: #8F6A38;
  --ledger-green: #1F4D3D; /* secondary accent, "growth" tone */
  --charcoal:   #1B1D22;
  --rule:       #D8D2C4;   /* hairline rule color on paper */
  --rule-dark:  rgba(247,245,239,0.18);
  --muted:      #24262B;   /* near-black body copy on light backgrounds — no washed-out grey */
  --muted-light: rgba(247,245,239,0.82);

  --font-display: 'Fraunces', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------------- Layout helpers ---------------- */
.section { padding: 5.5rem 0; }
@media (max-width: 767.98px) { .section { padding: 3.5rem 0; } }

.section-light  { background: var(--paper); }
.section-paper  { background: var(--paper-2); }
.section-ink    { background: var(--ink); color: var(--muted-light); }
.section-cta    {
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--paper);
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--brass);
  display: inline-block;
}
.section-label--light { color: var(--brass); }
.section-label--light::before { background: var(--brass); }

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 1rem;
}
.section-title--light { color: var(--paper); }

.lead-text {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 400;
}
.body-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}
.body-text--light { color: var(--muted-light); }

/* ---------------- Navbar ---------------- */
.site-nav {
  /* Solid white (not the warm-paper tint used elsewhere) so the logo's own
     white background blends into the bar instead of showing as a boxed-in tile. */
  background: var(--paper-2);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  padding: 0.85rem 0;
  transition: box-shadow 0.25s ease;
}
/* Keep the bar itself from ever wrapping/squashing its own row at desktop
   widths — the brand, nav, and CTA are flex siblings and should negotiate
   space via their own rules below, not by the navbar collapsing in on
   itself. Left unscoped below lg so the mobile hamburger/collapse markup
   (which relies on wrapping) is untouched. */
@media (min-width: 992px) {
  .site-nav > .container,
  .site-nav > .container-fluid {
    flex-wrap: nowrap;
  }
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0; /* logo/name never get compressed by the nav or CTA next to them */
}
.brand-mark {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--brass);
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px;
}
/* Uploaded logo image (replaces .brand-mark when a real logo is set).
   Shows the full, unmodified logo — sized to the navbar's height with
   object-fit:contain so nothing is ever cropped or cut off. The source file
   has built-in white padding around the mark, so the visible logo will look
   a little smaller than the box; that's a property of the source image, not
   something CSS cropping should fight — see note below if you want it bigger. */
.brand-logo-crop {
  height: 56px;
  width: auto;
  display: flex;
  align-items: center;
  transform: scale(1.3);
}
.brand-logo-crop img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 991.98px) {
  .brand-logo-crop { height: 44px; }
}
@media (max-width: 575.98px) {
  .brand-logo-crop { height: 36px; }
}
/* Footer sits on a dark background — the logo keeps its own white square
   but shown smaller, with rounded corners, so it reads as an intentional badge. */
.footer-brand-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  background: var(--paper-2);
  border-radius: 4px;
  padding: 3px;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}
.nav-link {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink) !important;
  padding: 0.5rem 0.85rem !important;
  position: relative;
}
/* Underline-on-hover uses ::before, leaving ::after free for the
   dropdown caret below — the two pseudo-elements were colliding before. */
.nav-link::before {
  content: "";
  position: absolute;
  left: 0.85rem; right: 0.85rem; bottom: 0.35rem;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-link:hover::before { transform: scaleX(1); }
/* Current page: underline stays on permanently, not just on hover */
.nav-link.active {
  color: var(--brass-dark) !important;
}
.nav-link.active::before { transform: scaleX(1); }

/* Services dropdown */
.dropdown-menu {
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 18px 32px -18px rgba(18,35,59,0.25);
  padding: 0.5rem;
  margin-top: 0.5rem;
  max-height: 70vh;
  overflow-y: auto;
}
.dropdown-item {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  border-radius: 2px;
  padding: 0.55rem 0.9rem;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--paper);
  color: var(--brass-dark);
}
.dropdown-item.active {
  background: var(--paper);
  color: var(--brass-dark);
  font-weight: 600;
}
/* Explicit visible caret so "Services" clearly reads as a submenu trigger */
.dropdown-toggle::after {
  display: inline-block;
  content: "";
  margin-left: 0.4em;
  vertical-align: 0.2em;
  border-top: 0.32em solid var(--brass);
  border-right: 0.28em solid transparent;
  border-left: 0.28em solid transparent;
  border-bottom: 0;
  transition: transform 0.2s ease;
}
.dropdown-toggle[aria-expanded="true"]::after,
.dropdown:hover .dropdown-toggle::after {
  transform: rotate(180deg);
}

/* ---------------- Navbar: prevent squeeze at tablet-landscape / mid-desktop
   widths (the zone right after the mobile menu expands into a full inline
   bar, where the logo, every nav link, and the CTA button are all fighting
   for the same row). Nav text and spacing scale down first; nothing wraps,
   overlaps, or crowds the logo out of its own space. ---------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .nav-link { font-size: 0.85rem; padding: 0.5rem 0.55rem !important; }
  .brand-name { font-size: 0.95rem; }
  .btn-cta, .btn-outline-cta { padding: 0.55rem 1.05rem; font-size: 0.85rem; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .nav-link { padding: 0.5rem 0.7rem !important; }
}

/* ---------------- Buttons ---------------- */
.btn-cta {
  background: var(--brass);
  color: var(--ink) !important;
  border: 1px solid var(--brass);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.65rem 1.5rem;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-cta:hover { background: var(--brass-dark); border-color: var(--brass-dark); transform: translateY(-1px); }

.btn-outline-cta {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.65rem 1.5rem;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease;
}
.section-ink .btn-outline-cta,
.section-cta .btn-outline-cta { color: var(--paper); }
.btn-outline-cta:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  padding: 8.5rem 0 0;
  background:
    radial-gradient(ellipse 900px 560px at 14% 8%, rgba(185,139,78,0.16), transparent 62%),
    var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.hero-inner { position: relative; z-index: 1; padding-bottom: 3.5rem; }
@media (max-width: 767.98px) {
  .hero { padding-top: 7rem; }
  .hero-inner { padding-bottom: 2.5rem; }
}

/* Hero visual: a balance scale standing on an open ledger book —
   the literal image behind "balances your books". Line-art only,
   no fills, so it reads as a mark rather than a stock illustration. */
.hero-visual {
  width: 100%;
  max-width: 320px;
}
.hero-visual svg { width: 100%; height: auto; display: block; }

.hv-halo {
  fill: rgba(185,139,78,0.05);
  stroke: rgba(185,139,78,0.28);
  stroke-width: 1;
}
.hv-line {
  fill: none;
  stroke: var(--paper);
  stroke-width: 3;
  stroke-linecap: round;
}
.hv-line.hv-thin { stroke-width: 2; opacity: 0.85; }
.hv-pivot { fill: var(--brass); }
.hv-pan {
  fill: none;
  stroke: var(--brass);
  stroke-width: 3;
  stroke-linecap: round;
}
.hv-book {
  fill: rgba(185,139,78,0.12);
  stroke: var(--brass);
  stroke-width: 1.5;
}
.hv-growth {
  fill: none;
  stroke: var(--ledger-green);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
.hv-dot { fill: var(--ledger-green); }

@media (max-width: 991.98px) {
  .hero-visual { max-width: 220px; opacity: 0.9; }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.2rem;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.9rem);
  line-height: 1.14;
  color: var(--paper);
  max-width: 15ch;
  margin-bottom: 1.6rem;
}

.underline-wrap {
  position: relative;
  display: inline-block;
  color: var(--brass);
  font-style: italic;
}
.balance-svg {
  position: absolute;
  left: 0; bottom: -0.28em;
  width: 100%;
  height: 0.4em;
  overflow: visible;
}
.balance-line {
  fill: none;
  stroke: var(--brass);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: draw-line 0.9s ease-out forwards;
}
.balance-line--top { animation-delay: 0.5s; }
.balance-line--bottom { animation-delay: 0.75s; }
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

.hero-sub {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--muted-light);
  max-width: 56ch;
  margin-bottom: 2rem;
}

.statement-strip {
  position: relative;
  z-index: 1;
  margin-top: 3.5rem;
  border-top: 1px solid var(--rule-dark);
}
.stat-cell {
  padding: 1.5rem 1.25rem;
  border-right: 1px solid var(--rule-dark);
}
.stat-cell:last-child { border-right: none; }
@media (max-width: 767.98px) {
  .stat-cell { border-bottom: 1px solid var(--rule-dark); padding: 1.25rem 0.75rem; }
  .stat-cell:nth-child(2n) { border-right: none; }
  .stat-cell:nth-last-child(-n+2) { border-bottom: none; }
}
.stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.4rem;
}
.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--paper);
}

/* ---------------- Service cards ---------------- */
.service-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2rem 1.75rem;
  height: 100%;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px -18px rgba(0,0,0,0.35);
}
.service-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--brass-dark);
  display: block;
  margin-bottom: 0.8rem;
}
.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.65rem;
}
.service-card p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.service-card--cta {
  background: var(--ledger-green);
  border-color: var(--ledger-green);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.service-card--cta h3 { color: var(--paper); }
.service-card--cta p { color: var(--muted-light); }

/* Service card that links out to its own dedicated page */
a.service-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.service-card-more {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--brass-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
a.service-card:hover .service-card-more { color: var(--brass); }
a.service-card:hover .service-card-more svg { transform: translateX(3px); }
.service-card-more svg { transition: transform 0.2s ease; }

/* Standalone "read more" link used outside card contexts (e.g. About section) */
.inline-read-more {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--brass-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s ease;
}
.inline-read-more:hover { color: var(--brass); }
.inline-read-more svg { transition: transform 0.2s ease; }
.inline-read-more:hover svg { transform: translateX(3px); }

/* ---------------- About page: credentials + pull-quote ---------------- */
.credentials-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
.credentials-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.5;
}
.credentials-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}
.credentials-check svg { width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 2.5; }

.founder-quote {
  border-left: 3px solid var(--brass);
  padding: 0.5rem 0 0.5rem 1.75rem;
  margin: 0;
}
.founder-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--paper);
  margin: 0;
}
.career-highlight-item {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.career-highlight-item:first-child { padding-top: 0; }
.career-highlight-item:last-child { border-bottom: none; }
.career-highlight-item h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.career-highlight-item p {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0;
}

/* ---------------- Who we work with ---------------- */
.who-card {
  border-top: 2px solid var(--brass);
  padding: 1.4rem 0.25rem 0;
  height: 100%;
}
.who-card h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.who-card p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ---------------- Why us ---------------- */
.why-list { border-top: 1px solid var(--rule); }
.why-row {
  display: flex;
  gap: 1.25rem;
  padding: 1.6rem 1rem;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  height: 100%;
}
.col-md-6:nth-child(odd) .why-row { border-left: 1px solid var(--rule); }
@media (max-width: 767.98px) {
  .col-md-6:nth-child(odd) .why-row { border-left: 1px solid var(--rule); }
  .why-row { border-right: 1px solid var(--rule); }
}
.why-index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--brass);
  line-height: 1;
  flex-shrink: 0;
}
.why-row h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.why-row p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ---------------- Problem statements ---------------- */
.problem-card {
  background: rgba(247,245,239,0.05);
  border-left: 2px solid var(--brass);
  padding: 1.5rem 1.25rem;
  height: 100%;
}
.problem-q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--paper);
  margin: 0;
}

/* ---------------- About photo ---------------- */
.about-photo {
  position: relative;
  max-width: 300px;
  margin: 0 auto;
}
.about-photo::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  right: -16px;
  bottom: -16px;
  border: 1px solid var(--brass);
  border-radius: 2px;
  z-index: 0;
}
.about-photo-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: 2px;
  filter: grayscale(12%);
  box-shadow: 0 22px 44px rgba(18, 35, 59, 0.22);
}
.about-photo-caption {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}
.about-photo-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
.about-photo-role {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-dark);
}
@media (max-width: 991.98px) {
  .about-photo { max-width: 240px; }
}

.exec-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 300px;
  margin: 1.75rem auto 0;
  background: var(--ink);
  border-radius: 3px;
  padding: 1rem 1.25rem;
}
.exec-badge-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--brass);
  line-height: 1;
}
.exec-badge-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  line-height: 1.45;
}
.exec-contact {
  max-width: 300px;
  margin: 1.25rem auto 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--ink);
  text-align: center;
}
.exec-contact a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.exec-contact a:hover { color: var(--brass-dark); border-bottom-color: var(--brass); }

.positioning-disclaimer {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--muted-light);
  max-width: 62ch;
  margin-top: 1.5rem;
}
.positioning-tagline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 2rem;
  margin-bottom: 0;
}
.positioning-contact {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--paper);
  margin-top: 0.5rem;
}

/* ---------------- Founder ---------------- */
.founder-plate {
  aspect-ratio: 1 / 1;
  max-width: 260px;
  background: var(--ink);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brass);
}
.founder-initials {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--brass);
}

/* ---------------- Contact CTA ---------------- */
.contact-sub { max-width: 46ch; font-size: 1.05rem; }
.justify-content-center::before { margin-left: 0; }

.contact-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.25rem;
}
.contact-detail-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.2rem;
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.contact-detail-link:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
}
.contact-detail-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}
.contact-detail-value {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  color: inherit;
  word-break: break-word;
}
.contact-detail-divider {
  width: 1px;
  height: 34px;
  background: var(--rule-dark);
}
@media (max-width: 575.98px) {
  .contact-detail-divider { display: none; }
  .contact-details { gap: 1.25rem; }
}

/* ---------------- Footer ---------------- */
.site-footer {
  background: var(--ink-2);
  color: var(--muted-light);
  padding: 4rem 0 0;
  border-top: 1px solid var(--rule-dark);
}
.footer-brand-mark {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--brass);
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px;
}
.footer-brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--paper);
}
.footer-about {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted-light);
  max-width: 32ch;
  margin: 1rem 0 1.5rem;
}
.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.1rem;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.footer-links a {
  color: var(--muted-light);
  font-size: 0.92rem;
  transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--brass); }
.footer-contact-item {
  font-size: 0.92rem;
  color: var(--muted-light);
  margin-bottom: 0.7rem;
  line-height: 1.55;
}
.footer-contact-item a { color: inherit; }
.footer-contact-item a:hover { color: var(--brass); }

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.footer-social a {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-dark);
  border-radius: 2px;
  color: var(--muted-light);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.footer-social a:hover {
  border-color: var(--brass);
  color: var(--ink);
  background: var(--brass);
}
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }

.footer-general-disclaimer {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule-dark);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--muted-light);
  opacity: 0.75;
  max-width: 90ch;
}

.footer-bottom {
  border-top: 1px solid var(--rule-dark);
  margin-top: 1.4rem;
  padding: 1.4rem 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted-light);
}
.footer-tag { color: var(--brass); }

/* ---------------- Inner page hero (service pages) ---------------- */
.page-hero {
  position: relative;
  padding: 9rem 0 3.5rem;
  background:
    radial-gradient(ellipse 800px 460px at 12% 0%, rgba(185,139,78,0.14), transparent 60%),
    var(--ink);
  color: var(--paper);
}
.breadcrumb-trail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 1.75rem;
}
.breadcrumb-trail a {
  color: var(--muted-light);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.breadcrumb-trail a:hover { color: var(--brass); border-bottom-color: var(--brass); }
.breadcrumb-trail .sep {
  color: var(--brass);
  margin: 0 0.6rem;
  font-size: 0.9em;
}
.breadcrumb-trail .current { color: var(--brass); font-weight: 600; }
.page-hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.16;
  color: var(--paper);
  max-width: 20ch;
  margin-bottom: 1.2rem;
}
.page-hero-sub {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--muted-light);
  max-width: 62ch;
}
@media (max-width: 767.98px) {
  .page-hero { padding: 6.5rem 0 2.75rem; }
}

/* Numbered service-detail rows (Virtual CFO page etc.) */
.service-detail-row {
  display: flex;
  gap: 1.75rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}
.service-detail-row:first-child { padding-top: 0; }
.service-detail-row:last-child { border-bottom: none; }
.service-detail-index {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--brass-dark);
  flex-shrink: 0;
  width: 2.5rem;
  padding-top: 0.2rem;
}
.service-detail-row h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.service-detail-row p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0;
  max-width: 62ch;
}

/* Process strip */
.process-step {
  border-top: 2px solid var(--brass);
  padding-top: 1.2rem;
  height: 100%;
}
.process-step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--brass);
  display: block;
  margin-bottom: 0.5rem;
}
.process-step h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--paper);
  margin-bottom: 0.4rem;
}
.process-step p {
  font-size: 0.92rem;
  color: var(--muted-light);
  line-height: 1.6;
  margin: 0;
}
/* ---------------- Comparison cards (Why Us page) ---------------- */
.comparison-card {
  height: 100%;
  padding: 2rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
}
.comparison-card--highlight {
  background: var(--ink);
  border-color: var(--ink);
}
.comparison-heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--brass);
}
.comparison-heading--muted {
  color: var(--ink);
  border-bottom-color: var(--rule-dark);
}
.comparison-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.comparison-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--paper);
}
.comparison-list--muted li {
  color: var(--muted);
  padding-left: 1.4rem;
  position: relative;
}
.comparison-list--muted li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--muted-light);
}
.comparison-list .credentials-check {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/* ---------------- Service accordions (Virtual CFO areas of support) ---------------- */
.service-accordion-list {
  border-top: 1px solid var(--rule);
}
.service-accordion {
  border-bottom: 1px solid var(--rule);
  padding: 1.6rem 0;
}
.service-accordion summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.service-accordion summary::-webkit-details-marker { display: none; }
.service-accordion-index {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--brass);
  flex-shrink: 0;
  width: 2rem;
}
.service-accordion-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  flex-grow: 1;
}
.service-accordion summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--brass);
  transition: transform 0.2s ease;
}
.service-accordion[open] summary::after { transform: rotate(45deg); }
.service-accordion-body {
  margin-top: 1.1rem;
  padding-left: 3.25rem;
}
.service-accordion-body > p {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 68ch;
  margin: 0 0 1rem;
}
.service-accordion-note {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--muted);
  opacity: 0.75;
  font-style: italic;
  max-width: 68ch;
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}
.service-accordion-checklist,
.deliverables-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}
.service-accordion-checklist li,
.deliverables-checklist li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--muted);
}
.service-accordion-checklist li::before,
.deliverables-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
}
.deliverables-checklist {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
}
@media (max-width: 576px) {
  .deliverables-checklist { grid-template-columns: 1fr; }
  .service-accordion-body { padding-left: 0; }
}

/* ---------------- Important information note ---------------- */
.important-info-section { padding-top: 0; }
.important-info-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: 0.6rem;
}
.important-info-text {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--muted);
  opacity: 0.8;
  max-width: 80ch;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
  margin: 0;
}

/* ---------------- FAQ accordion ---------------- */
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 1.4rem 0;
}
.faq-item:first-of-type { padding-top: 0; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brass);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin: 0.9rem 0 0;
  max-width: 68ch;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------------- Contact page: enquiry form ---------------- */
.contact-info-card {
  background: var(--ink);
  color: var(--paper);
  border-radius: 3px;
  padding: 2.5rem;
  height: 100%;
}
.contact-info-item {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule-dark);
}
.contact-info-item:first-of-type { padding-top: 0; }
.contact-info-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--brass);
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brass);
}
.contact-info-icon svg { width: 18px; height: 18px; fill: currentColor; }
.contact-info-item h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.35rem;
}
.contact-info-item p, .contact-info-item a {
  font-size: 0.98rem;
  color: var(--paper);
  margin: 0;
  line-height: 1.55;
}
.contact-info-item a:hover { color: var(--brass); }

.contact-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.btn-whatsapp {
  background: #25D366;
  border: 1px solid #25D366;
  color: #06210f !important;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.65rem 1.4rem;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: filter 0.2s ease;
}
.btn-whatsapp:hover { filter: brightness(0.92); }
.btn-whatsapp svg { width: 18px; height: 18px; fill: currentColor; }

/* Enquiry form */
.enquiry-form { background: var(--paper2, var(--paper)); }
.form-field { margin-bottom: 1.4rem; }
.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: 0.5rem;
}
.form-control,
.form-select {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper2);
}
textarea.form-control { resize: vertical; min-height: 130px; }
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(185,139,78,0.15);
}
.form-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.75rem;
}
.form-success {
  display: none;
  background: rgba(31,77,61,0.08);
  border: 1px solid var(--ledger-green);
  color: var(--ledger-green);
  border-radius: 2px;
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
}
.form-success.is-visible { display: block; }

.form-error {
  display: none;
  background: rgba(178,34,34,0.06);
  border: 1px solid #b22222;
  color: #8f1c1c;
  border-radius: 2px;
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
}
.form-error.is-visible { display: block; }
.form-error p { margin: 0 0 0.4rem; }
.form-error p:last-child { margin-bottom: 0; }

/* Honeypot field — present in the DOM for bots to fill, invisible and
   unreachable for real visitors (off-screen, not display:none, since
   some bots skip fields hidden that way). */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Map embed */
.map-embed {
  position: relative;
  width: 100%;
  padding-bottom: 46%;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 767.98px) {
  .contact-info-card { padding: 1.75rem; }
  .map-embed { padding-bottom: 65%; }
}
/* ---------------- Responsive tightening ---------------- */
@media (max-width: 575.98px) {
  .hero { padding-top: 7rem; }
  .hero-title { max-width: none; }
  .section-title { font-size: 1.65rem; }
}

/* Very small phones (older/small Android, iPhone SE) — extra breathing room
   so nothing set with a fixed em/px width overflows the viewport. */
@media (max-width: 380px) {
  .hero-sub, .lead-text { font-size: 1rem; }
  .btn-cta, .btn-outline-cta { width: 100%; text-align: center; }
  .hero-cta { flex-direction: column; }
}

/* ---------------- Container: bounded, centered — scales continuously ----------------
   Below 1400px, Bootstrap's own stepped .container breakpoints are left
   untouched. From 1400px up, instead of the container freezing at a fixed
   1320px (or jumping between fixed steps, which still freezes in between
   and lets the side gap balloon on anything bigger than the nearest step),
   the max-width now scales continuously with the viewport via clamp() —
   90% of viewport width, floored at 1320px and ceilinged at 2200px. That
   ceiling is what keeps this a genuine bounded container rather than
   .container-fluid: it always has a real, fixed max-width number, it just
   doesn't stop growing until well past ordinary monitor sizes. At 1600px
   viewport this resolves to ~1440px (matching what already looked right);
   at 2880px it resolves to the 2200px ceiling — a much smaller, more
   proportional side gap than a frozen 1320–1760px box would leave. */
@media (min-width: 1400px) {
  .container {
    max-width: clamp(1320px, 90vw, 2200px);
  }
}
/* ---------------- Scroll to top ---------------- */
.scroll-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1050;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--brass);
  border: 1px solid var(--brass);
  border-radius: 50%;
  font-size: 0.95rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease, visibility 0.25s ease;
  box-shadow: 0 10px 24px -10px rgba(18,35,59,0.45);
}
.scroll-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-to-top:hover {
  background: var(--brass);
  color: var(--ink);
}
.scroll-to-top svg {
  width: 18px;
  height: 18px;
  color: #FFFFFF; /* always white/bold regardless of the button's hover color state below */
  flex-shrink: 0;
}
.scroll-to-top:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}
@media (max-width: 575.98px) {
  .scroll-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 42px;
    height: 42px;
    font-size: 0.85rem;
  }
}