/* site.css: every custom stylesheet for index.html, in one file so the page
   waits for one download instead of nine before it can paint. Each section
   below was a separate css/<feature>.css until 2026-10-13. Add new
   features as a new section here, in load order. */

/* ============================================================
   client-showcase
   ============================================================ */
/* Admin-managed client project showcase.
   Kept fully separate from the existing "header_gallery" marquee so that
   gallery's images/animation/mouse behavior are never touched. */

.client-showcase {
  background-color: var(--background-color--background-primary, #060606);
  padding: 4rem 0;
}

/* The template's own demo partner-logo wall (5four, Radial Path, Underbelly,
   etc.) sits right after this section — hidden per client request, they only
   want their own added clients shown. */
.section_logo {
  display: none !important;
}

.client-showcase_heading {
  text-align: center;
  margin-bottom: 2.5rem;
}

.client-showcase_heading h2 {
  font-family: Brockmann, Arial, sans-serif;
  color: var(--text-color--text-primary, #f0f0f0);
  font-size: 2.5rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.client-showcase_heading p {
  color: var(--text-color--text-secondary, #aaa);
  font-size: 1rem;
  margin: 0;
}

/* Text-link wall: 4 per row on wide screens, wraps to a new row once full.
   Flexbox (not grid) so each row — including a lone item, or a partial
   final row — is genuinely centered, not just left-aligned in a centered
   track set. */
.client-showcase_grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem 3rem;
  max-width: 992px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.client-showcase_item {
  flex: 0 0 200px;
  font-family: Brockmann, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-color--text-primary, #f0f0f0);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  text-align: center;
}

@media (max-width: 700px) {
  .client-showcase_item {
    flex-basis: 45%;
  }
}

.client-showcase_item:hover {
  opacity: 1;
  text-decoration: underline;
}

.client-showcase_empty {
  text-align: center;
  color: var(--text-color--text-secondary, #aaa);
  font-size: 0.9rem;
}

/* ============================================================
   hero-gallery
   ============================================================ */
/* Admin-managed hero gallery: a horizontal 3D perspective carousel showing
   only what's been added via the admin dashboard. Replaces the template's
   fixed-size demo masonry (.header_gallery-list-wrapper) once real items
   exist. Cards continuously drift left-to-right with volumetric depth and
   a mouse-parallax tilt; each card links to the live client site. */

/* The template's demo masonry is never shown — hero-gallery.js always replaces
   it. Hiding it here rather than in JS matters: the JS only ran after the
   Supabase round-trip, so until then the empty grid still occupied layout and
   the whole section shifted when it finally collapsed. */
.header_gallery-list-wrapper {
  display: none;
}

.hero-carousel_viewport {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: clamp(220px, 26vw, 380px);
  margin: 2rem auto 0;
  padding: 0 1.5rem;
  perspective: 1350px;
  overflow: hidden;
}

/* No items (or a failed load): give the reserved space back smoothly instead
   of snapping it shut. */
.hero-carousel_viewport.is-empty {
  height: 0;
  margin-top: 0;
  transition: height 0.45s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    margin-top 0.45s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.hero-carousel_viewport.is-empty::before {
  opacity: 0;
}

/* Soft spotlight glow behind the centered card so the scene doesn't feel
   like flat photos pasted on black. */
.hero-carousel_viewport::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  background: radial-gradient(
    ellipse 45% 60% at 50% 50%,
    rgba(255, 255, 255, 0.07),
    transparent 70%
  );
  pointer-events: none;
}

/* Cards fade in once they exist. The viewport box is already in the layout
   from first paint, so this is purely opacity — nothing moves. */
.hero-carousel_stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  opacity: 0;
  transition: opacity 0.55s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.hero-carousel_viewport.is-ready .hero-carousel_stage {
  opacity: 1;
}

.hero-carousel_card {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.hero-carousel_layer {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: var(--background-color--background-tertiary, #0f0f0f);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    inset 0 -12px 24px rgba(0, 0, 0, 0.35),
    0 30px 60px -20px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

.hero-carousel_layer--mid {
  background: linear-gradient(180deg, #d4d4d4 0%, #8c8c8c 45%, #565656 100%);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
}

.hero-carousel_layer--front,
.hero-carousel_layer--back {
  backface-visibility: hidden;
  filter: brightness(var(--focus-brightness, 1)) saturate(var(--focus-saturate, 1));
  transition: filter 0.25s ease;
}

/* Glossy top sheen on the front face for a premium, "under a showroom light"
   feel instead of a flat photo pasted on a rounded rectangle. */
.hero-carousel_layer--front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.04) 18%,
    transparent 40%
  );
  pointer-events: none;
}

.hero-carousel_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-carousel_img-wrap--blur {
  position: absolute;
  inset: 0;
  filter: blur(16px) brightness(0.6);
  transform: scale(1.15);
}

.hero-carousel_overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem 1.1rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.35) 32%,
    transparent 60%
  );
  z-index: 1;
}

.hero-carousel_overlay span {
  color: var(--text-color--text-primary, #f8f8f8);
  font-family: Brockmann, Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.hero-carousel_back-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1rem;
}

.hero-carousel_back-content .name {
  color: var(--text-color--text-primary, #f8f8f8);
  font-family: Brockmann, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.hero-carousel_back-content .cta {
  color: rgba(255, 255, 255, 0.7);
  font-family: Brockmann, Arial, sans-serif;
  font-size: 0.75rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* Section label above the carousel. The template shipped this as a single
   `.text-size-tiny` line (11px, muted grey) that read as a caption and was
   easy to miss entirely. Split into a brand-blue eyebrow plus a real heading
   so the section announces itself. */
.hero-gallery_eyebrow {
  margin: 0 0 0.5rem;
  color: #3d6eff;
  font-family: Brockmann, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-gallery_heading {
  margin: 0;
  color: var(--text-color--text-primary, #f8f8f8);
  font-family: Brockmann, Arial, sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ============================================================
   lead-modal
   ============================================================ */
/* Lead-capture modal, opened from the site's existing "Hire me / Let's
   talk / Start a project / Inquire for retainer" buttons in place of the
   dead /project-inquiry link they used to point to. Matches the site's
   dark theme, font, and entrance-easing rather than introducing a new
   visual language. */

.lead-modal_overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-expo, cubic-bezier(0.78, 0, 0.22, 1));
}

.lead-modal_overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lead-modal_dialog {
  width: 100%;
  max-width: 460px;
  background: var(--background-color--background-secondary, #0f0f0f);
  border: 1px solid var(--border-color--border-primary, #222);
  border-radius: 0.75rem;
  padding: 2rem;
  transform: translateY(1.5rem) scale(0.97);
  opacity: 0;
  transition: transform 0.35s var(--ease-expo, cubic-bezier(0.78, 0, 0.22, 1)),
    opacity 0.35s var(--ease-expo, cubic-bezier(0.78, 0, 0.22, 1));
  max-height: 90vh;
  overflow-y: auto;
}

.lead-modal_overlay.is-open .lead-modal_dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.lead-modal_close {
  position: absolute;
  top: 1.75rem;
  right: 1.75rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-color--border-primary, #222);
  color: var(--text-color--text-secondary, #aaa);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.lead-modal_close:hover {
  color: var(--text-color--text-primary, #f0f0f0);
  border-color: var(--text-color--text-secondary, #aaa);
}

.lead-modal_dialog h2 {
  font-family: Brockmann, Arial, sans-serif;
  color: var(--text-color--text-primary, #f0f0f0);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  /* Keep clear of the absolutely-positioned close button (2rem wide), or a
     long title like "Calculate your budget" runs under it on phones. */
  padding-right: 2.5rem;
}

.lead-modal_dialog p.lead-modal_subtitle {
  color: var(--text-color--text-secondary, #aaa);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}

.lead-modal_field {
  margin-bottom: 1rem;
}

.lead-modal_field label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-color--text-secondary, #aaa);
  margin-bottom: 0.35rem;
  font-family: Brockmann, Arial, sans-serif;
}

.lead-modal_field input,
.lead-modal_field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: #000;
  border: 1px solid var(--border-color--border-primary, #222);
  border-radius: 0.4rem;
  color: var(--text-color--text-primary, #f0f0f0);
  font-family: Brockmann, Arial, sans-serif;
  font-size: 0.92rem;
  transition: border-color 0.15s ease;
}

.lead-modal_field input:focus,
.lead-modal_field textarea:focus {
  outline: none;
  border-color: var(--text-color--text-secondary, #aaa);
}

.lead-modal_field textarea {
  resize: vertical;
  min-height: 90px;
}

.lead-modal_submit {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.8rem 1.25rem;
  border: none;
  border-radius: 0.4rem;
  background: var(--text-color--text-primary, #f0f0f0);
  color: #060606;
  font-family: Brockmann, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.lead-modal_submit:hover {
  opacity: 0.88;
}

.lead-modal_submit:active {
  transform: scale(0.98);
}

.lead-modal_submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lead-modal_message {
  font-size: 0.82rem;
  margin-top: 0.75rem;
  min-height: 1em;
}

.lead-modal_message.is-error {
  color: #e5484d;
}

.lead-modal_message.is-success {
  color: #4ade80;
}

.lead-modal_success {
  text-align: center;
  padding: 1.5rem 0;
}

.lead-modal_success svg {
  margin-bottom: 1rem;
}

.lead-modal_success h3 {
  font-family: Brockmann, Arial, sans-serif;
  color: var(--text-color--text-primary, #f0f0f0);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.lead-modal_success p {
  color: var(--text-color--text-secondary, #aaa);
  font-size: 0.9rem;
  margin: 0;
}

/* ============================================================
   budget-modal
   ============================================================ */
/* Budget-calculator modal reuses all of lead-modal.css's overlay/dialog/
   field/button chrome (same class names) since the visual language is
   identical. This file only adds the slider-specific pieces that modal
   doesn't have. */

.budget-modal_slider-value {
  font-family: Brockmann, Arial, sans-serif;
  color: var(--text-color--text-primary, #f0f0f0);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.budget-modal_slider {
  width: 100%;
  accent-color: var(--text-color--text-primary, #f0f0f0);
  margin: 0.25rem 0;
}

.budget-modal_slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-color--text-secondary, #aaa);
  margin-top: 0.25rem;
}

/* ============================================================
   team-profiles
   ============================================================ */
/* "Meet the Founders" card — replaces the old Relume/Contra pitch card.
   Framed outer/inner nesting mirrors this site's own .pricing_card-border /
   .pricing_card-content pattern so it reads as a native section, not a
   bolted-on widget. */
.team-founders_card {
  background-color: var(--background-color--background-tertiary);
  border-radius: 1.5rem;
  padding: 0.5rem;
}

.team-founders_inner {
  background-color: var(--background-color--background-primary);
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.team-founders_header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.team-founders_icon-wrapper {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.5rem;
  background-color: var(--background-color--background-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.team-founders_logo {
  width: 1.85rem;
  height: 1.85rem;
  object-fit: contain;
}

.team-founders_heading h2 {
  margin: 0 0 0.3rem;
}

.team-founders_heading p {
  margin: 0;
}

/* Founder / Co-Founder cards — a fixed 2-up grid (there are only ever these
   two people) that stretches to fill the full card width, rather than a
   pair of small thumbnails floating in a mostly-empty row. */
.team-profiles_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  border-top: 1px solid var(--border-color--border-primary);
  padding-top: 1.75rem;
}

.team-profiles_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  background-color: var(--background-color--background-tertiary);
  border: 1px solid var(--border-color--border-primary);
  border-radius: 1.15rem;
  padding: 1.25rem;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.55);
  transition: transform 0.35s var(--ease-expo), box-shadow 0.35s var(--ease-expo);
}

.team-profiles_card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.6);
}

/* Each founder gets a soft glow in a different brand color — both stand
   out, neither reads as "more important" via a heavier badge/border. */
.team-profiles_card.is-founder {
  box-shadow: 0 8px 24px -6px rgba(243, 200, 77, 0.35);
}

.team-profiles_card.is-founder:hover {
  box-shadow: 0 14px 32px -8px rgba(243, 200, 77, 0.45);
}

.team-profiles_card.is-co_founder {
  box-shadow: 0 8px 24px -6px rgba(61, 110, 255, 0.35);
}

.team-profiles_card.is-co_founder:hover {
  box-shadow: 0 14px 32px -8px rgba(61, 110, 255, 0.45);
}

.team-profiles_photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.85rem;
  overflow: hidden;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-profiles_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-profiles_photo-placeholder {
  width: 40%;
  height: 40%;
  opacity: 0.35;
}

.team-profiles_label {
  text-align: center;
  line-height: 1.35;
  max-width: 100%;
}

.team-profiles_name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-profiles_role {
  display: block;
  font-size: 0.72rem;
  color: var(--text-color--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
}

/* No real name set yet (admin hasn't customized it) — show the role alone,
   styled like a name instead of a tiny muted caption under nothing. */
.team-profiles_role:only-child {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color--text-primary);
  text-transform: none;
  letter-spacing: normal;
  margin-top: 0;
}

@media (max-width: 767px) {
  .team-founders_inner { padding: 1.5rem; gap: 1.5rem; }
  .team-founders_header { gap: 0.85rem; }
  .team-founders_icon-wrapper { width: 3rem; height: 3rem; }
  .team-founders_logo { width: 1.6rem; height: 1.6rem; }
  .team-profiles_grid { gap: 0.85rem; padding-top: 1.5rem; }
  .team-profiles_card { padding: 0.9rem; gap: 0.7rem; }
  .team-profiles_photo { border-radius: 0.7rem; }
  .team-profiles_name { font-size: 0.85rem; }
  .team-profiles_role { font-size: 0.62rem; }
  .team-profiles_role:only-child { font-size: 0.85rem; }
}

/* ============================================================
   cursor-mobile-fix
   ============================================================ */
/* The Webflow export hides .cursor-wrap (the smoke-cursor canvas + dot)
   below 991px. That stays the rule for phones and tablets: they have no
   cursor, and smoke-cursor.js no longer runs on touch-only devices (running
   the fluid sim on phones froze the page for ~26 s in PageSpeed, and the
   unused dot sat as a stray circle in the top-left corner).
   Only a narrow desktop window — a real mouse — gets the wrapper back. */
@media screen and (max-width: 991px) and (hover: hover) and (pointer: fine) {
  .cursor-wrap {
    display: block;
    /* mix-blend-mode: difference on a fixed-position wrapper around a
       GPU-composited WebGL canvas is a known WebKit compositor bug — Safari
       renders the whole blended layer invisible instead of blending it.
       Normal blending keeps it visible. */
    mix-blend-mode: normal;
  }

  /* Safari needs the WebGL canvas forced onto its own compositor layer or
     it can fail to show it at all. */
  .cursor-canvas {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* ============================================================
   globe-mobile-fix
   ============================================================ */
/* Globe section stays hidden until globe-testimonials.js finds at least one
   published testimonial and adds .has-pins — no empty planet, and no layout
   jump when the fetch comes back empty. */
.section_testimonial:not(.has-pins) {
  display: none;
}

/* The Webflow export shrinks the "Who I work with" globe's team-photo pins
   drastically at this breakpoint (2.5rem -> 0.75rem ring, 2.4rem -> 0.5rem
   photo), which makes them illegible dots on a phone. Restore a size closer
   to desktop's proportions so the photos are actually recognizable. */
@media screen and (max-width: 767px) {
  .fs-globe-pin-square-wrapper {
    width: 1.8rem;
    height: 1.8rem;
  }
  .fs-globe-pin-square {
    width: 1.5rem;
    height: 1.5rem;
  }
  .pin-center-square {
    width: 1.4rem;
    height: 1.4rem;
  }

  /* Webflow blows the globe up to 170% width (!important) and crops it,
     leaving only a small, heavily-cropped arc of the sphere visible. 120%
     keeps the whole globe on screen while still filling the width. */
  .fs-3dglobe-container {
    width: 120% !important;
  }
}

/* ============================================================
   pricing-grid-fix
   ============================================================ */
/* The pricing grid defaults to 2 columns (Webflow's .w-layout-grid default),
   which was fine for the original 2-card layout (Full Website + Retainer)
   but wraps awkwardly now that there are 3 cards. Scoped to the desktop
   breakpoint only, above where Webflow's own mobile override already
   collapses the grid to a single column (max-width:991px) — this must not
   fight that rule. */
@media screen and (min-width: 992px) {
  .pricing_grid-list {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* The 3-column layout leaves narrower cards than this button's text was
     sized for ("Calculate your budget" clips at the original 16px). The
     text uses white-space:nowrap for Webflow's character-stagger animation,
     so it must shrink to fit rather than wrap. */
  .pricing_plan .btn-animate-chars__text {
    font-size: 0.8rem;
  }
}

/* ============================================================
   capability-cards
   ============================================================ */
/* Capability cards — the slider in section #Testimonials.
   The cards reuse the Webflow testimonial styles as-is (.testimonial_content,
   .trust_content-right, .trust_image-wrapper, .trust_image). Nothing here
   restyles the card itself; this file only covers the two things the original
   markup had no class for. */

/* 1. The eyebrow that replaced the client logo in the top slot. */
.capability_eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--base-color-neutral--neutral);
}

/* 2. The right-hand panel is now an inline <svg> instead of an <img>.
   .trust_image gives it aspect-ratio/width/height already; object-fit does
   nothing on a non-replaced element, so the SVG covers via
   preserveAspectRatio="xMidYMid slice" instead. */
.trust_image.is-capability {
  display: block;
}

/* Below 991px .testimonial_content collapses to one column and the text block
   is pulled above the visual via order:-9999. Webflow only emitted that rule
   for the 2nd–4th slides at this breakpoint, so the 1st slide rendered visual-
   first while the others rendered text-first. Normalise all five. */
@media screen and (max-width: 991px) {
  #w-node-f2521634-5100-a746-4b0d-5e6408fc2b43-82728ef2,
  #w-node-eow-capability-05-82728ef2 {
    order: -9999;
  }
}

@media screen and (max-width: 767px) {
  #w-node-eow-capability-05-82728ef2 {
    order: -9999;
  }
}

/* ============================================================
   local-services (2026-10-26)
   Plain-text "Website developer in Srikakulam" block after the FAQ,
   linking to the four service pages. Static markup in index.html (no JS),
   so the words are in the HTML Google reads first.
   ============================================================ */
.section_local {
  background-color: var(--background-color--background-primary, #060606);
  padding: 2rem 0 6rem;
}

.local_inner {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}

.local_heading {
  font-family: Brockmann, Arial, sans-serif;
  color: var(--text-color--text-primary, #f0f0f0);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.local_text {
  color: var(--text-color--text-secondary, #aaa);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 44rem;
  margin: 0 auto 2.5rem;
}

.local_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: left;
}

.local_card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--border-color--border-primary, #222);
  background: #0d0d0d;
  color: var(--text-color--text-primary, #f0f0f0);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.local_card:hover {
  border-color: #444;
  transform: translateY(-2px);
}

.local_card-title {
  font-family: Brockmann, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
}

.local_card-text {
  color: var(--text-color--text-secondary, #aaa);
  font-size: 0.9rem;
  line-height: 1.5;
  flex: 1;
}

.local_card-more {
  font-size: 0.85rem;
  color: #3d6eff;
}

@media screen and (max-width: 991px) {
  .local_grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 479px) {
  .local_heading { font-size: 1.6rem; }
  .local_grid { grid-template-columns: 1fr; }
}