/* Subtle square-grid atmosphere — shared across sections */

:root {
  --moxie-sq: 28px;
  --moxie-sq-line: rgba(63, 42, 30, 0.045);
  --moxie-sq-line-warm: rgba(240, 90, 20, 0.07);
  --moxie-sq-fill: rgba(240, 90, 20, 0.09);
  --moxie-sq-fill-ink: rgba(63, 42, 30, 0.05);
}

/* Base field */
.moxie-sq-field,
.about-story,
.about-approach,
.section.services,
.event-highlights,
.faq-section,
.why-us-arc,
.moxie-timeline,
.about-story--clients-wrap,
.clients-section,
.cta-band,
.cta-dither,
.contact-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.moxie-sq-field > .container,
.about-story > .container,
.about-approach > .container,
.section.services > .container,
.event-highlights > .container,
.faq-section > .container,
.why-us-arc > .container,
.why-us-arc > .why-us-arc__ring,
.why-us-arc > .why-us-arc__content,
.moxie-timeline > .container,
.moxie-timeline > .moxie-timeline__intro,
.moxie-timeline > .moxie-timeline__body,
.about-story--clients-wrap > .container,
.clients-section > .container,
.cta-band > .container,
.cta-dither .container,
.contact-section > .container {
  position: relative;
  z-index: 1;
}

/* Line grid */
.about-story::before,
.about-approach::before,
.section.services::before,
.event-highlights::before,
.faq-section::before,
.why-us-arc::before,
.moxie-timeline::before,
.about-story--clients-wrap::before,
.clients-section::before,
.contact-section::before,
.moxie-sq-field::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--moxie-sq-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--moxie-sq-line) 1px, transparent 1px);
  background-size: var(--moxie-sq) var(--moxie-sq);
  opacity: 1;
  mask-image: radial-gradient(ellipse 85% 70% at 82% 8%, #000 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 82% 8%, #000 0%, transparent 68%);
}

/* Accent filled squares (sparse) */
.about-story::after,
.about-approach::after,
.section.services::after,
.event-highlights::after,
.faq-section::after,
.why-us-arc::after,
.moxie-timeline::after,
.about-story--clients-wrap::after,
.clients-section::after,
.contact-section::after,
.moxie-sq-field::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: calc(var(--moxie-sq) * 5);
  height: calc(var(--moxie-sq) * 4);
  top: 10%;
  right: 6%;
  opacity: 0.85;
  background-image:
    linear-gradient(var(--moxie-sq-fill), var(--moxie-sq-fill)),
    linear-gradient(var(--moxie-sq-fill-ink), var(--moxie-sq-fill-ink)),
    linear-gradient(var(--moxie-sq-fill), var(--moxie-sq-fill)),
    linear-gradient(var(--moxie-sq-line-warm), var(--moxie-sq-line-warm));
  background-size:
    var(--moxie-sq) var(--moxie-sq),
    var(--moxie-sq) var(--moxie-sq),
    var(--moxie-sq) var(--moxie-sq),
    var(--moxie-sq) var(--moxie-sq);
  background-position:
    0 0,
    calc(var(--moxie-sq) * 2) var(--moxie-sq),
    calc(var(--moxie-sq) * 3) 0,
    var(--moxie-sq) calc(var(--moxie-sq) * 2);
  background-repeat: no-repeat;
  mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
}

/* Placement variants — keep each section slightly different */
.about-story::before {
  mask-image: radial-gradient(ellipse 75% 60% at 12% 18%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 12% 18%, #000 0%, transparent 70%);
}

.about-story::after {
  top: auto;
  bottom: 14%;
  right: auto;
  left: 5%;
  opacity: 0.7;
}

.about-approach::before {
  mask-image: radial-gradient(ellipse 72% 58% at 88% 12%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 88% 12%, #000 0%, transparent 70%);
  background-image:
    linear-gradient(var(--moxie-sq-line-warm) 1px, transparent 1px),
    linear-gradient(90deg, var(--moxie-sq-line) 1px, transparent 1px);
}

.about-approach::after {
  top: 12%;
  right: 7%;
  left: auto;
  opacity: 0.75;
}

.about-story--clients-wrap::before {
  mask-image: radial-gradient(ellipse 70% 55% at 90% 80%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 90% 80%, #000 0%, transparent 72%);
}

.about-story--clients-wrap::after {
  top: auto;
  bottom: 8%;
  right: 8%;
  left: auto;
  opacity: 0.65;
}

.section.services::before {
  mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 10%, transparent 72%);
  background-image:
    linear-gradient(var(--moxie-sq-line-warm) 1px, transparent 1px),
    linear-gradient(90deg, var(--moxie-sq-line) 1px, transparent 1px);
}

.section.services::after {
  top: 6%;
  right: 10%;
}

/* Grid sits on the right — left column stays clear for headline / lede */
.event-highlights::before {
  mask-image: radial-gradient(ellipse 62% 58% at 94% 18%, #000 0%, transparent 66%);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 94% 18%, #000 0%, transparent 66%);
}

.event-highlights::after {
  top: 10%;
  right: 5%;
  left: auto;
  opacity: 0.7;
}

/* Nudge Event Highlights copy right of any residual left edge */
.event-highlights .section__header {
  padding-left: clamp(16px, 2.8vw, 40px);
}

.event-highlights .work-preview__grid {
  padding-left: clamp(12px, 2vw, 28px);
}

.faq-section::before {
  mask-image: radial-gradient(ellipse 90% 50% at 50% 0%, #000 5%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 50% at 50% 0%, #000 5%, transparent 70%);
  opacity: 0.9;
}

.faq-section::after {
  top: 8%;
  right: 12%;
  left: auto;
  opacity: 0.55;
}

.why-us-arc::before {
  mask-image: radial-gradient(ellipse 85% 45% at 50% 100%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 85% 45% at 50% 100%, #000 0%, transparent 70%);
}

.why-us-arc::after {
  top: auto;
  bottom: 6%;
  right: 14%;
  opacity: 0.55;
}

.moxie-timeline::before {
  background-image:
    linear-gradient(rgba(240, 90, 20, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 42, 30, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 1;
  mask-image:
    radial-gradient(ellipse 95% 80% at 50% 20%, #000 0%, transparent 78%),
    linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image:
    radial-gradient(ellipse 95% 80% at 50% 20%, #000 0%, transparent 78%),
    linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.moxie-timeline::after {
  width: calc(var(--moxie-sq) * 8);
  height: calc(var(--moxie-sq) * 6);
  top: 12%;
  right: 6%;
  left: auto;
  opacity: 0.95;
  background-image:
    linear-gradient(var(--moxie-sq-fill), var(--moxie-sq-fill)),
    linear-gradient(var(--moxie-sq-fill-ink), var(--moxie-sq-fill-ink)),
    linear-gradient(var(--moxie-sq-fill), var(--moxie-sq-fill)),
    linear-gradient(var(--moxie-sq-line-warm), var(--moxie-sq-line-warm)),
    linear-gradient(var(--moxie-sq-fill), var(--moxie-sq-fill)),
    linear-gradient(var(--moxie-sq-fill-ink), var(--moxie-sq-fill-ink));
  background-size: var(--moxie-sq) var(--moxie-sq);
  background-position:
    0 0,
    calc(var(--moxie-sq) * 2) var(--moxie-sq),
    calc(var(--moxie-sq) * 4) 0,
    var(--moxie-sq) calc(var(--moxie-sq) * 3),
    calc(var(--moxie-sq) * 5) calc(var(--moxie-sq) * 2),
    calc(var(--moxie-sq) * 3) calc(var(--moxie-sq) * 4);
  background-repeat: no-repeat;
  mask-image: linear-gradient(225deg, #000 25%, transparent 90%);
  -webkit-mask-image: linear-gradient(225deg, #000 25%, transparent 90%);
}

.contact-section::before {
  mask-image: radial-gradient(ellipse 70% 60% at 100% 20%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 100% 20%, #000 0%, transparent 70%);
}

.contact-section::after {
  top: 16%;
  right: 5%;
}

/* Home hero — soft grid behind copy only */
.hero-gallery--parallax::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(63, 42, 30, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 42, 30, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 50% 70% at 18% 45%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 18% 45%, #000 0%, transparent 70%);
}

.hero-gallery--parallax::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 120px;
  height: 96px;
  top: 28%;
  left: 6%;
  background-image:
    linear-gradient(rgba(240, 90, 20, 0.1), rgba(240, 90, 20, 0.1)),
    linear-gradient(rgba(63, 42, 30, 0.05), rgba(63, 42, 30, 0.05)),
    linear-gradient(rgba(240, 90, 20, 0.08), rgba(240, 90, 20, 0.08));
  background-size: 28px 28px;
  background-position: 0 0, 56px 28px, 28px 0;
  background-repeat: no-repeat;
  opacity: 0.75;
}

/* Light page heroes — warmer ink grid + accent squares */
.page-hero:not(.page-hero--dark) .page-hero__grid {
  background-image:
    linear-gradient(rgba(63, 42, 30, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 42, 30, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.7;
}

.page-hero:not(.page-hero--dark) .page-hero__grid::after {
  content: '';
  position: absolute;
  width: 160px;
  height: 120px;
  top: 22%;
  right: 12%;
  background-image:
    linear-gradient(rgba(240, 90, 20, 0.1), rgba(240, 90, 20, 0.1)),
    linear-gradient(rgba(63, 42, 30, 0.05), rgba(63, 42, 30, 0.05)),
    linear-gradient(rgba(240, 90, 20, 0.08), rgba(240, 90, 20, 0.08));
  background-size: 32px 32px;
  background-position: 0 0, 64px 32px, 96px 0;
  background-repeat: no-repeat;
  opacity: 0.8;
}

/* Insights / awards hubs when present */
.insights-section,
.awards-page__intro,
.case-studies-archive {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.insights-section::before,
.case-studies-archive::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--moxie-sq-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--moxie-sq-line) 1px, transparent 1px);
  background-size: var(--moxie-sq) var(--moxie-sq);
  mask-image: radial-gradient(ellipse 80% 55% at 70% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 70% 0%, #000 0%, transparent 70%);
}

@media (max-width: 720px) {
  .about-story::after,
  .about-approach::after,
  .section.services::after,
  .event-highlights::after,
  .faq-section::after,
  .why-us-arc::after,
  .moxie-timeline::after,
  .about-story--clients-wrap::after,
  .contact-section::after,
  .moxie-sq-field::after,
  .hero-gallery--parallax::after,
  .page-hero:not(.page-hero--dark) .page-hero__grid::after {
    opacity: 0.4;
    transform: scale(0.85);
    transform-origin: top right;
  }

  .about-story::before,
  .section.services::before,
  .event-highlights::before,
  .faq-section::before,
  .why-us-arc::before,
  .moxie-timeline::before,
  .hero-gallery--parallax::before {
    opacity: 0.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero:not(.page-hero--dark) .page-hero__grid::after {
    animation: none;
  }
}