/* =========================================================
   MONTRA SYSTEMS – PREMIUM OVERRIDES (CUSTOM.CSS)
   Keep main.css untouched. This file loads last.
   ========================================================= */

/* ---------- Global tone: calmer + more premium ---------- */

body {
  color: #3e3e3e;
}

a:hover {
  color: #222 !important; /* reduce template pink */
}

/* Subtle selection styling */
::selection {
  background: rgba(0,0,0,0.08);
}

/* ---------- Header (logo only, larger, premium) ---------- */

#header {
  padding: 2.25em 0 1.25em 0 !important;
}

/* Remove title text if it exists */
#header .logo .title {
  display: none !important;
}

/* Remove spacing meant for text */
#header .logo .symbol {
  margin-right: 0 !important;
}

/* Force logo size (wins against template) */
#header .logo img,
#header .logo .symbol img {
  height: 110px !important;
  width: auto !important;
  max-height: none !important;
  display: block !important;
  transition: transform 260ms ease, opacity 260ms ease !important;
}

#header .logo:hover img,
#header .logo:hover .symbol img {
  transform: translateY(-2px) !important;
  opacity: 0.92 !important;
}

@media screen and (max-width: 736px) {
  #header {
    padding: 1.75em 0 0.75em 0 !important;
  }

  #header .logo img,
  #header .logo .symbol img {
    height: 72px !important;
  }
}

/* ---------- Hero: make it feel like a designed “card” ---------- */
/* Phantom uses: #main > .inner > header (your hero block) */

#main > .inner > header {
  position: relative;
  padding: 3.25em 3em !important;
  border-radius: 14px;
  overflow: hidden;
  background: #0f1217; /* dark base */
  color: rgba(255,255,255,0.90);
  margin-bottom: 3em !important;
}

/* Gradient overlay */
#main > .inner > header:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.08), transparent 45%),
              radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06), transparent 40%),
              linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25));
  pointer-events: none;
}

/* Keep text above overlay */
#main > .inner > header > * {
  position: relative;
  z-index: 1;
}

/* Hero typography */
#main > .inner > header h1 {
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 0.6em !important;
}

#main > .inner > header p {
  color: rgba(255,255,255,0.82);
  max-width: 46rem;
  margin-bottom: 0 !important;
}

/* Mobile hero spacing */
@media screen and (max-width: 736px) {
  #main > .inner > header {
    padding: 2.25em 1.6em !important;
    border-radius: 12px;
  }
}

/* ---------- Section headings: less “shouty template” ---------- */

#main h2 {
  letter-spacing: 0.22em;
}

#main section:not(.tiles) {
  margin-top: 2.5em;
}

/* ---------- Tiles: neutral, premium, consistent ---------- */

/* Remove bright tile colours by forcing a neutral overlay */
.tiles article > .image:before {
  background-color: #111 !important;
  opacity: 0.30 !important;
}

/* Force ALL style variants to the same neutral overlay */
.tiles article.style1 > .image:before,
.tiles article.style2 > .image:before,
.tiles article.style3 > .image:before,
.tiles article.style4 > .image:before,
.tiles article.style5 > .image:before,
.tiles article.style6 > .image:before {
  background-color: #111 !important;
  opacity: 0.30 !important;
}

/* Quiet the diagonal “X” pattern (almost invisible) */
.tiles article > .image:after {
  opacity: 0.06 !important;
}

/* Make tiles feel less template-y */
.tiles article {
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: transform 380ms ease, box-shadow 380ms ease !important;
  will-change: transform !important;
}

/* Image motion */
.tiles article > .image {
  transition: transform 520ms ease !important;
}

.tiles article > .image img {
  transition: transform 520ms ease, filter 520ms ease !important;
}

/* Content reveal: control max-height (template uses this) */
.tiles article > a .content {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transform: translateY(10px) !important;
  transition: max-height 420ms ease, opacity 420ms ease, transform 420ms ease !important;
}

/* Tile typography */
.tiles article > a h2 {
  letter-spacing: 0.20em !important;
  font-size: 0.95em !important;
}

.tiles article > a .content p {
  margin: 0 !important;
}

/* Hover behaviour (desktop/mouse — works on iPad with mouse too) */
body:not(.is-touch) .tiles article:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 28px 60px rgba(0,0,0,0.32) !important;
}

body:not(.is-touch) .tiles article:hover > .image {
  transform: scale(1.05) !important;
}

body:not(.is-touch) .tiles article:hover > .image img {
  transform: scale(1.06) !important;
  filter: saturate(1.05) contrast(1.05) !important;
}

body:not(.is-touch) .tiles article:hover > .image:before {
  background-color: #000 !important;
  opacity: 0.50 !important;
}

body:not(.is-touch) .tiles article:hover > a .content {
  max-height: 15em !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Touch devices: show content without hover */
body.is-touch .tiles article > a .content {
  max-height: 15em !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Tap feedback */
.tiles article:active {
  transform: scale(0.985) !important;
}

/* ---------- Footer: quieter, more premium ---------- */

#footer {
  background-color: #f7f7f7;
}

#footer h2 {
  letter-spacing: 0.22em;
}
/* === Force uniform tile image sizing === */
.tiles article > .image {
  height: 260px;              /* controls tile height */
  overflow: hidden;
}

.tiles article > .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* crops, never stretches */
}