/* =========================================================================
   California Landing Page — dedicated stylesheet
   Independent from the USA and Australia/city landing pages. Only the
   shared, site-wide base (css/landing/style.css) and footer
   (css/utils/footer.css) are reused here — nothing from
   css/landing/australia.css, city.css, mobile.css, or the USA page's own
   style.css/usa-responsive.css is linked or copied.

   Built as a sibling of the USA page rather than a shared "state base" —
   every class here is prefixed .ca- and scoped under .ca-landing, so a
   future Florida/Texas/New York page can be created by literally copying
   this folder and this file, then renaming the .ca- prefix (and swapping
   copy/images) throughout. Measurements (max-widths, paddings, gaps, card
   sizes) intentionally match the USA page's own numbers wherever a
   section is meant to look identical — see each section's comment for
   which USA section it mirrors.
   ========================================================================= */

.ca-landing .highlight {
  color: #3cac62;
}

/* ===== Section width fixes =====
   css/landing/style.css's generic `.landing-page section { max-width: 750px }`
   is meant for narrow text sections; wider California sections need to
   line up with the 1400px services grid instead of being clipped. */
.landing-page.ca-landing .ca-trusted {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* ===== Hero =====
   Mirrors the USA hero exactly: a single full-bleed banner image (heading,
   subtitle and feature icons are baked into the banner graphic itself,
   same as the USA page) with just the two CTA buttons absolutely
   positioned on top. Same 1446px outer container and 91px top padding
   (clearing the fixed header) as the USA hero. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.landing-page.ca-landing .ca-hero {
  max-width: 1446px;
  width: 100%;
  margin: 0 auto;
  padding: 91px 0 0;
}

/* california-banner.png is the same 5760x2444 export as the USA banner,
   with the same ~164px of fully-transparent dead canvas tacked onto the
   bottom (real content only fills the first ~2280px) — trimmed with the
   same negative margin-bottom trick (164/5760 of the image's own width). */
.ca-hero-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ca-hero-banner img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: -2.8472%;
}

.ca-hero-ctas {
  position: absolute;
  left: 7%;
  bottom: 12%;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.ca-hero-btn-primary {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

.ca-hero-btn-outline {
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.2));
}

.ca-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* ===== Trusted By =====
   Same 48-91px natural-height logo treatment as the USA page. */
.ca-trusted .landing-trusted-logos {
  gap: 60px;
}

.ca-trusted .landing-trusted-logos img {
  height: auto;
  max-height: 50px;
}

/* ===== Your Trusted Offshore Accounting Partner =====
   New section (not on the USA page). Sydney's "partner-intro" was used
   only as a layout reference (centered heading/paragraph + a supporting
   icon) — this is a fresh build, not a copy of css/landing/city.css. */
.landing-page.ca-landing .ca-partner-intro {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 70px 60px;
}

.ca-partner-intro-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 16px;
}

.ca-partner-intro-body .landing-section-subtitle {
  max-width: 720px;
  margin: 0;
}

.ca-partner-intro-icon {
  flex-shrink: 0;
  width: 103px;
}

.ca-partner-intro-icon img {
  display: block;
  width: 103px;
  height: auto;
}

/* ===== Comprehensive Offshore Accounting Services =====
   Same card spec as the USA page (170x229, white, radius 13.45px). Reuses
   the shared .landing-services / .landing-services-inner classes directly
   since this section is unchanged content-wise between USA and California
   other than copy — no ca-specific override needed beyond background. */
.ca-landing .landing-services {
  background: rgba(250, 250, 250, 1);
}

.ca-landing .landing-services-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0px 60px;
}

.ca-landing .landing-service-card {
  border: none;
  border-radius: 13.45px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.ca-landing .landing-service-title {
  font-size: 14px;
  min-height: 0;
  margin-bottom: 12px;
}

.ca-landing .landing-view-all .landing-btn-outline {
  color: #000000;
}

/* ===== Why California Businesses Choose MoneyMate ? =====
   Same measurements as the USA page's "Why Us A" section (1446px outer,
   1246px inner, 48px gap, icon-left/value-right stat cards) — only the
   illustration and copy differ. */
.landing-page.ca-landing .ca-why-section {
  max-width: 1446px;
  width: 100%;
  margin: 0 auto;
  padding: 90px 60px;
  background: rgba(250, 250, 250, 1);
}

.ca-why-container {
  max-width: 1246px;
  width: 100%;
  min-height: 729px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.ca-why-left {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* margin-top:35px pushes the image down to start level with the
   "Why California Businesses Choose MoneyMate ?" heading line (matching
   .ca-why-stats's own 35px offset below), instead of the eyebrow label
   above it — measured directly off the rendered layout. */
.ca-why-illustration {
  flex: 1 1 380px;
  min-width: 0;
  margin-top: 35px;
}

.ca-why-illustration img {
  width: 493px;
  max-width: 100%;
  height: 592px;
  border-radius: 12px;
  display: block;
  object-fit: cover;
}

/* left:-60px pulls the card column left so it overlaps the image's
   right edge (per the approved design), instead of sitting in its own
   clear column with a ~40px gap. A positional offset (not margin) is
   used deliberately — .ca-why-illustration has flex-grow, so a negative
   margin here gets silently absorbed by that sibling growing to fill
   the freed space, canceling the shift out visually. left: on a
   position:relative element moves it without touching the flex-sizing
   calculation at all. z-index keeps the (now-overlapping) cards
   rendered on top of the image. */
.ca-why-stats {
  flex: 0 0 126px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 35px;
  position: relative;
  left: -60px;
  z-index: 2;
}

/* icon-left / value+label-right, matching the USA page's stat card layout */
.ca-why-stat {
  width: 126px;
  min-height: 116px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 18px 14px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
}

.ca-why-stat-icon {
  grid-column: 1;
  grid-row: 1;
  width: 24px;
  height: 24px;
}

.ca-why-stat-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.ca-why-stat-value {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: break-word;
  font-family: 'Inter-Regular';
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #000000;
  margin-bottom: 2px;
}

.ca-why-stat-label {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow-wrap: break-word;
  font-family: 'Inter-Regular';
  font-weight: 400;
  font-size: 11px;
  line-height: 15px;
  color: #000000;
}

.ca-why-right {
  flex: 1 1 45%;
  min-width: 0;
  margin-top: -24px;
}

.ca-why-label {
  display: inline-block;
  background: #ffffff;
  box-shadow: inset 2.6px 2.6px 5.2px rgba(0, 0, 0, 0.1);
  border-radius: 12.14px;
  padding: 10px 3px;
  margin-bottom: 16px;
  font-family: 'Inter-Regular';
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #3cac62;
}

.ca-why-heading {
  font-family: 'Inter-Regular';
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  color: #000000;
  margin-bottom: 24px;
}

.ca-why-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ca-why-feature {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}

.ca-why-feature-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f2f9f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ca-why-feature-text {
  font-family: 'Inter-Regular';
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #000000;
}

.ca-why-feature-text strong {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 6px;
}

/* ===== Industries We Support =====
   Same card spec as the USA page (172.45x146.62, radius 10.22px). */
.ca-industries {
  background: #ffffff;
}

.ca-landing .ca-industries {
  background: #ffffff;
}

.ca-industries-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 37px;
  margin-top: 32px;
}

.ca-industry-card {
  border: none;
  border-radius: 10.22px;
  padding: 18px 10px;
  text-align: center;
  background: #ffffff;
  box-shadow: 1.52px 1.52px 4.56px rgba(0, 0, 0, 0.1), inset 1.52px 1.52px 3.04px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ca-industry-card:hover {
  transform: translateY(-4px);
}

.ca-industry-icon {
  width: 100%;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.ca-industry-icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ca-industry-card span {
  font-family: 'Inter-Regular';
  font-size: 14px;
  font-weight: 600;
  color: #000000;
}

/* ===== Why Outsource =====
   Same checklist spec as the USA page (20px/24px medium weight, 23px gap). */
.landing-page.ca-landing .ca-outsource {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  background: rgba(250, 250, 250, 1);
}

.ca-outsource-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-top: 40px;
  text-align: left;
}

.ca-outsource-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 280px;
  max-width: 340px;
}

.ca-outsource-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Inter-Regular';
  font-size: 20px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 23px;
  line-height: 24px;
}

.ca-outsource-list .landing-check-icon {
  margin-top: 4px;
}

.ca-outsource-visual {
  flex: 1 1 320px;
  max-width: 360px;
}

.ca-outsource-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  min-height: 240px;
  object-fit: cover;
}

/* ===== Our Process =====
   Same spec as the USA page (single wide illustration, green divider
   under each step title instead of per-step circle icons). */
.landing-page.ca-landing .ca-process {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
}

.ca-process-visual {
  max-width: 1132px;
  margin: 40px auto 0;
}

.ca-process-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  aspect-ratio: 1132 / 232;
  background: linear-gradient(135deg, #eafaf1 0%, #d7e7f3 100%);
  object-fit: cover;
}

.ca-process-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.ca-process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 260px;
  max-width: 100%;
  text-align: center;
}

.ca-process-step h3 {
  font-family: 'Inter-Regular';
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 12px;
}

.ca-process-divider {
  display: block;
  width: 31px;
  height: 0;
  border-top: 2px solid #3cac62;
  margin-bottom: 18px;
}

.ca-process-step p {
  font-family: 'Inter-Regular';
  max-width: 184px;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  color: #000000;
}

/* ===== CTA Banner ===== */
.ca-landing .landing-cta-banner-title {
  text-transform: capitalize;
}

.ca-cta-btn.landing-btn-primary {
  color: #3cac62;
}

/* ===== Responsive =====
   All @media rules for this page live in the dedicated
   california-responsive.css (loaded right after this file). */