/* Miracle Events brand layer — loaded last, on top of the exported Bricks styles.
   Source: Brand Guidelines 2026 (Oxblood / Ivory Lace / Armor Wash, Anton + Helvetica, spark motif). */

@font-face {
  font-family: "Anton";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(Anton-Regular.woff2) format("woff2");
}

:root {
  /* Primary colours, straight from the guide. */
  --mir-oxblood: #5E1E2B;
  --mir-ivory: #F8F6F2;
  --mir-armor: #030303;
  /* The guide's own page colour: Oxblood sunk into Armor Wash (sampled from its backgrounds). */
  --mir-deep: #260F12;
  --mir-header: rgba(38, 15, 18, 0.96);
  --mir-line: rgba(248, 246, 242, 0.2);
  --mir-muted: rgba(248, 246, 242, 0.72);
  --mir-accent: var(--mir-ivory);
  --mir-headline: "Anton", "Arial Narrow", Impact, sans-serif;
  --mir-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mir-edge: clamp(20px, 4vw, 56px);

  /* Miracle gradient: Oxblood with the light sweeping in from two corners. */
  --mir-gradient:
    radial-gradient(70% 120% at 0% 100%, rgba(173, 101, 116, 0.75) 0%, rgba(173, 101, 116, 0) 60%),
    radial-gradient(45% 110% at 100% 0%, rgba(173, 101, 116, 0.7) 0%, rgba(173, 101, 116, 0) 60%),
    linear-gradient(100deg, #5E1E2B 0%, #501722 55%, #5E1E2B 100%);

  /* Brand shapes. */
  --mir-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cpath d='M50 0C53 62 64 92 100 100C64 108 53 138 50 200C47 138 36 108 0 100C36 92 47 62 50 0Z'/%3E%3C/svg%3E");
  --mir-flare: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='none'%3E%3Cpath d='M200 0C204 400 280 690 400 800L0 800C120 690 196 400 200 0Z'/%3E%3C/svg%3E");
  /* Brand patterns: rounded blocks whose gaps form sparks (both variations from the guide). */
  --mir-pattern-oxblood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23C2A2A7'/%3E%3Cpath fill='%235E1E2B' d='M50 0C88 0 100 12 100 50C100 88 88 100 50 100C12 100 0 88 0 50C0 12 12 0 50 0Z'/%3E%3C/svg%3E");
  --mir-pattern-armor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%235E1E2B'/%3E%3Cpath fill='%23030303' d='M50 0C88 0 100 12 100 50C100 88 88 100 50 100C12 100 0 88 0 50C0 12 12 0 50 0Z'/%3E%3C/svg%3E");
  /* Paper grain, as on the guide's pages. */
  --mir-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Map the theme's own tokens onto the palette. */
  --white: #F8F6F2;
  --black: #030303;
  --primary: var(--mir-ivory);
  --primary-hover: var(--mir-muted);
  --primary-dark: var(--mir-oxblood);
  --link-color: var(--mir-ivory);
  --link-color-hover: var(--mir-muted);
}

html,
body {
  background-color: var(--mir-deep);
}

body {
  font-family: var(--mir-body);
  color: var(--mir-ivory);
}

h1,
h2 {
  font-family: var(--mir-headline);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

::selection {
  background: var(--mir-ivory);
  color: var(--mir-oxblood);
}

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

.skip-link {
  background-color: var(--mir-oxblood);
  color: var(--mir-ivory);
}

/* ---------- Page surfaces: deep Oxblood with grain, Armor Wash kept for contrast bands ---------- */

#brx-content > .brxe-section,
#brx-content > .brxe-block:not(.shft),
#brx-content > .brxe-div,
#brx-content > .brxe-container,
.portfolio-wrapper {
  background-color: var(--mir-deep) !important;
  background-image: var(--mir-grain);
}

/* Inner panels sit flat on the page colour instead of forming black boxes. */
#brxe-igoibd {
  background-color: transparent !important;
}

/* The client wall stays Armor Wash so the white logos sit on pure dark. */
#brx-content > #brxe-mwzpmv {
  background-color: var(--mir-armor) !important;
  background-image: none;
}

/* ---------- Header ---------- */

#brxe-jjlpsz {
  padding-left: var(--mir-edge);
  padding-right: var(--mir-edge);
}

#brxe-amlbgo .bricks-site-logo {
  width: 168px;
  height: auto;
}

/* No backdrop blur here: it would trap the full-screen mobile menu inside the header bar. */
#brx-header.brx-sticky.scrolling > .brxe-section {
  border-bottom: 1px solid var(--mir-line);
}

/* Full-screen mobile menu. */
#brx-header .brxe-nav-nested.brx-open .brx-nav-nested-items {
  background-color: var(--mir-deep);
}

#brx-header .brxe-toggle {
  color: var(--mir-ivory);
}

/* ---------- Buttons ---------- */

.bricks-button {
  font-family: var(--mir-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ---------- Hero and page-header photography: Oxblood tint, as in the guide ---------- */

.bricks-background-video-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(94, 30, 43, 0.6) 0%, rgba(60, 16, 26, 0.45) 55%, rgba(38, 15, 18, 0.95) 100%);
  pointer-events: none;
}

.about-background {
  filter: grayscale(1) contrast(1.08);
}

.about-overlay {
  background: linear-gradient(180deg, rgba(94, 30, 43, 0.78) 0%, rgba(60, 16, 26, 0.72) 40%, rgba(38, 15, 18, 0.97) 100%) !important;
}

/* ---------- Dividers carry the spark ---------- */

.brxe-divider.horizontal {
  position: relative;
}

.brxe-divider.horizontal .line {
  border-top-color: var(--mir-line) !important;
}

.brxe-divider.horizontal::before,
.brxe-divider.horizontal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.brxe-divider.horizontal::before {
  width: 56px;
  height: 8px;
  background-color: var(--mir-deep);
}

.brxe-divider.horizontal::after {
  width: 16px;
  height: 32px;
  background-color: var(--mir-ivory);
  -webkit-mask: var(--mir-spark) center / contain no-repeat;
  mask: var(--mir-spark) center / contain no-repeat;
}

/* A divider that closes the page sits right on the footer's spark: keep only the footer's. */
#brx-content > :last-child .brxe-divider.horizontal::before,
#brx-content > :last-child .brxe-divider.horizontal::after {
  display: none;
}

/* ---------- Milestones: Anton numerals with the label beneath ---------- */

.stat-item {
  flex-direction: column;
  gap: 0.75rem;
}

.stat-item .stat-number {
  position: static;
  transform: none;
  font-family: var(--mir-headline);
  font-weight: 400;
  color: var(--mir-ivory);
  font-size: clamp(3.5rem, 9vw, 7rem);
}

.stat-item .stat-label {
  color: var(--mir-muted);
  font-family: var(--mir-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.stat-item::after {
  background-color: var(--mir-line);
}

@media (max-width: 768px) {
  .stat-item {
    border-bottom-color: var(--mir-line);
  }
}

/* ---------- Home: brand pattern band before the client wall ---------- */

#brx-content > #brxe-qgoakw {
  height: 72px !important;
  min-height: 72px;
  padding: 0;
  background: var(--mir-pattern-oxblood) center / 72px 72px repeat-x !important;
}

/* ---------- Services ---------- */

.service-title {
  font-family: var(--mir-headline);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

#prevBtn,
#nextBtn {
  background-color: var(--mir-ivory);
  color: var(--mir-oxblood);
}

/* ---------- Portfolio index ---------- */

.portfolio-hero-background {
  background: var(--mir-gradient);
  overflow: hidden;
}

/* The hero photo was hosted on a server that no longer exists. */
.portfolio-hero-image {
  display: none;
}

.portfolio-hero-background::after {
  content: "";
  position: absolute;
  right: 6%;
  bottom: 0;
  width: min(34vw, 420px);
  height: 92%;
  background-color: var(--mir-armor);
  -webkit-mask: var(--mir-flare) center bottom / 100% 100% no-repeat;
  mask: var(--mir-flare) center bottom / 100% 100% no-repeat;
}

.portfolio-hero-overlay {
  background: linear-gradient(180deg, rgba(38, 15, 18, 0) 55%, rgba(38, 15, 18, 1) 100%) !important;
}

.portfolio-hero-title {
  text-shadow: none !important;
}

.portfolio-item-overlay {
  opacity: 1 !important;
  background: linear-gradient(180deg, rgba(94, 30, 43, 0.62) 0%, rgba(38, 15, 18, 0.92) 100%) !important;
  transition: background 0.4s ease;
}

.portfolio-item:hover .portfolio-item-overlay,
.portfolio-item:focus-within .portfolio-item-overlay {
  background: linear-gradient(180deg, rgba(38, 15, 18, 0.1) 0%, rgba(38, 15, 18, 0.88) 100%) !important;
}

.portfolio-item-button {
  background-color: var(--mir-ivory) !important;
  color: var(--mir-oxblood) !important;
}

/* Cards rest in the brand's Oxblood monochrome and return to full colour when pointed at. */
@media (hover: hover) {
  .portfolio-item-image {
    filter: grayscale(1) contrast(1.05);
    transition: filter 0.4s ease;
  }

  .portfolio-item:hover .portfolio-item-image,
  .portfolio-item:focus-within .portfolio-item-image {
    filter: none;
  }
}

/* ---------- Project pages ---------- */

.brxe-post-title {
  font-family: var(--mir-headline) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

/* ---------- Contact ---------- */

/* The page photo takes the Oxblood hue (duotone), then darkens toward the form. */
#brx-content > .brxe-block.shft {
  background-color: var(--mir-oxblood) !important;
  background-blend-mode: luminosity;
}

.brxe-block.shft::before {
  background: linear-gradient(180deg, rgba(38, 15, 18, 0.6) 0%, rgba(38, 15, 18, 0.94) 100%) !important;
}

.brxe-block.shft h3 {
  font-family: var(--mir-headline);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.shft__caption {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mir-muted);
}

.shft__form {
  background-color: rgba(3, 3, 3, 0.78) !important;
  border: 1px solid var(--mir-line);
}

.shft__form input,
.shft__form textarea {
  background-color: rgba(248, 246, 242, 0.06) !important;
  border: 1px solid var(--mir-line) !important;
  color: var(--mir-ivory) !important;
  font-family: var(--mir-body);
}

.shft__form input::placeholder,
.shft__form textarea::placeholder {
  color: var(--mir-muted);
  opacity: 1;
}

.shft__form input:focus,
.shft__form textarea:focus {
  border-color: var(--mir-ivory) !important;
}

.shft__form .bricks-button {
  background-color: var(--mir-oxblood) !important;
  color: var(--mir-ivory) !important;
}

.shft__form .bricks-button:hover {
  background-color: var(--mir-ivory) !important;
  color: var(--mir-oxblood) !important;
}

.mir-form-note {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--mir-muted);
}

/* ---------- Footer: Miracle gradient, flare, spark and pattern strip ---------- */

#brx-footer {
  position: relative;
  overflow: hidden;
  padding-bottom: 28px;
  background:
    var(--mir-pattern-armor) left bottom / 28px 28px repeat-x,
    var(--mir-gradient);
  color: var(--mir-ivory);
}

#brx-footer::before {
  content: "";
  position: absolute;
  right: 9%;
  bottom: 28px;
  width: min(30vw, 300px);
  height: 125%;
  background-color: var(--mir-armor);
  opacity: 0.55;
  -webkit-mask: var(--mir-flare) center bottom / 100% 100% no-repeat;
  mask: var(--mir-flare) center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

#brx-footer::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 50%;
  width: 22px;
  height: 44px;
  transform: translateX(-50%);
  background-color: var(--mir-ivory);
  -webkit-mask: var(--mir-spark) center / contain no-repeat;
  mask: var(--mir-spark) center / contain no-repeat;
  pointer-events: none;
}

#brx-footer > * {
  position: relative;
  background-color: transparent;
}

#brx-footer .shftfot__wrapper {
  padding-left: var(--mir-edge);
  padding-right: var(--mir-edge);
}

#brx-footer .bricks-button {
  background-color: var(--mir-ivory);
  color: var(--mir-oxblood);
}

#brx-footer .bricks-button:hover {
  background-color: var(--mir-armor);
  color: var(--mir-ivory);
}

#brx-footer a:hover {
  color: var(--mir-ivory);
  opacity: 0.75;
}

@media (max-width: 767px) {
  #brx-footer {
    padding-top: 72px;
  }

  #brx-footer::before {
    display: none;
  }
}