/* The Design Hive — brand palette overrides for the Perspec template */

:root {
  /* Brand surfaces */
  --cream: #FFF8F3;
  --linen: #D9CFC2;
  --ink: #1A1A1A;
  --espresso: #3D3430;
  --text-muted: #6B6B6B;

  /* Logo mark colors — use inside the logo SVG only; avoid as large UI fills */
  --coral: #E85A5A;
  --purple: #8A4FBF;
  --amber: #F5A623;

  /* Template variable remap — every orange-* reference inherits coral */
  --orange-primary: var(--coral);
  --orange-light: #EF7A7A;
  --orange-dark: #C84444;
  --orange-accent: #F2B8B8;
  --dark: var(--ink);
  --dark-brown: var(--espresso);
  --text-light: var(--text-muted);
}

body { background: var(--cream); color: var(--ink); }

/* Header logo — bump from template's 28px cap to a more studio-navbar-appropriate size */
.custom-navbar .logo img { max-height: 48px !important; width: auto; }
@media (max-width: 768px) {
  .custom-navbar .logo img { max-height: 36px !important; }
}

/* Home hero — wide interior panorama backdrop with a dark ink gradient overlay.
   Strong on the left so the headline stays high-contrast; fades toward the
   right where the floating image collage sits. */
.home-hero { position: relative; overflow: hidden; background: var(--ink); }
.home-hero .hero-bg {
  position: absolute; inset: 0;
  background-image: url('/assets/images/panorama/image1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.home-hero .hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(26, 26, 26, 0.92) 0%,
    rgba(26, 26, 26, 0.75) 45%,
    rgba(26, 26, 26, 0.4) 100%
  );
  z-index: 0;
}
.home-hero > .container,
.home-hero > .container-fluid { position: relative; z-index: 1; }

/* Hero text on dark backdrop — keep the highlight word coral. */
.home-hero .hero-text h1,
.home-hero .hero-text h1 span:not(.highlight) { color: var(--cream); }
.home-hero .hero-text h1 .highlight { color: var(--coral); }
.home-hero .hero-text p { color: rgba(255, 248, 243, 0.85); }

/* Outlined CTA on dark — cream border, fills on hover. */
.home-hero .btn-secondary {
  color: var(--cream);
  border: 1px solid var(--cream);
  background: transparent;
}
.home-hero .btn-secondary:hover {
  background: var(--cream);
  color: var(--ink);
}

.site-footer { background: var(--ink); color: var(--cream); }
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--coral); }

/* Footer brand lockup — none of our logo assets ship a cream-on-dark variant,
   so we compose one: the colored square mark + the brand name as cream text. */
.footer-brand .footer-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  margin-bottom: 16px;
}
.footer-brand .footer-lockup img { width: 56px; height: auto; display: block; }
.footer-brand .brand-name {
  color: var(--cream);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* When applied to a <section>, win over template defaults and match the
   `90px 0` rhythm that `.grad`/`.grad-rev` use for full-bleed surfaces. */
section.bg-linen { background: var(--linen); padding: 90px 0; }
.bg-linen { background: var(--linen); }
.bg-ink { background: var(--ink); color: var(--cream); }

/* Services grid: template ships `repeat(3, 1fr)` which orphans the 4th card
   at desktop. Flow 4 cards across without changing the tablet (2-up) and
   mobile (1-up) breakpoints in media-queries.css. */
@media (min-width: 1025px) {
  .services-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}