/* OMT V08 — visual system, spacing, interaction and performance refinements */
:root {
  --omt-yellow: #F8C800;
  --omt-yellow-soft: #FFD83D;
  --omt-navy: #061426;
  --omt-navy-deep: #04101F;
  --omt-navy-card: #0A1D33;
  --omt-navy-card-2: #0D243D;
  --omt-muted: #66778F;
  --omt-section-gap: 136px;

  /* Use the Studio About heading family everywhere: Clash Display. */
  --tp-ff-body: 'ClashDisplay-Regular', sans-serif;
  --tp-ff-heading: 'ClashDisplay-Bold', sans-serif;
  --tp-ff-inter: 'ClashDisplay-Regular', sans-serif;
  --tp-ff-p: 'ClashDisplay-Regular', sans-serif;
  --tp-ff-mango-thin: 'ClashDisplay-Light', sans-serif;
  --tp-ff-mango-light: 'ClashDisplay-Light', sans-serif;
  --tp-ff-mango: 'ClashDisplay-Regular', sans-serif;
  --tp-ff-mango-medium: 'ClashDisplay-Medium', sans-serif;
  --tp-ff-mango-semibold: 'ClashDisplay-Semibold', sans-serif;
  --tp-ff-mango-bold: 'ClashDisplay-Bold', sans-serif;
  --tp-ff-dirtyline: 'ClashDisplay-Bold', sans-serif;
  --tp-ff-grotesk: 'ClashDisplay-Regular', sans-serif;
  --tp-ff-platform: 'ClashDisplay-Bold', sans-serif;

  /* Replace the inherited red / green accents with OMT yellow. */
  --tp-common-red: var(--omt-yellow);
  --tp-common-red-2: var(--omt-yellow);
  --tp-common-red-3: var(--omt-yellow);
  --tp-common-green-light: var(--omt-yellow);
  --tp-common-green-regular: var(--omt-yellow);
  --tp-common-green-1: var(--omt-yellow);
  --tp-theme-green: var(--omt-yellow);
  --tp-theme-yellow: var(--omt-yellow);

  /* OMT universe background family. */
  --tp-common-black: #07182B;
  --tp-common-black-2: #091B30;
  --tp-common-black-3: #04101F;
  --tp-common-black-4: #061426;
  --tp-common-black-5: #07172A;
  --tp-common-black-6: #0A1D33;
  --tp-common-black-7: #061426;
  --tp-common-black-8: #0A1D33;
  --tp-common-black-9: #0D2741;
  --tp-common-black-10: #0B2037;
  --tp-common-cream: #FFFFFF;
}

html,
body {
  background: var(--omt-navy) !important;
}

body,
button,
input,
textarea,
select,
a,
p,
span,
li,
label {
  font-family: 'ClashDisplay-Regular', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.tp-section-title,
.tp-section-title-clash,
.tp-section-title-dirtyline,
.design-project-title,
.tp-showcase-slider-title {
  font-family: 'ClashDisplay-Bold', sans-serif !important;
}

/* Preserve icon-font rendering. */
i[class*="fa-"],
[class^="fa-"],
[class*=" fa-"] {
  font-family: "Font Awesome 6 Pro" !important;
}

/* Deep-blue universe instead of black/charcoal page surfaces. */
.black-bg,
.black-bg-2,
.black-bg-3,
.black-bg-4,
.black-bg-5,
.black-bg-6,
.black-bg-7,
.black-bg-8,
.black-bg-9,
.black-bg-10,
.omt-how-we-work,
.studio-showcase-area,
.studio-about-area,
.des-text-moving-area,
.design-project-area,
.studio-team-area,
.design-testimonial-area,
.st-video-area,
.design-choose-area,
.design-award-area,
.design-footer-area {
  background-color: var(--omt-navy) !important;
}

/* Static, very light celestial texture — no fixed layer and no GPU-heavy blur. */
#smooth-content {
  background-color: var(--omt-navy);
  background-image:
    radial-gradient(circle at 12% 7%, rgba(54, 96, 177, .12) 0, transparent 23%),
    radial-gradient(circle at 86% 38%, rgba(20, 65, 126, .13) 0, transparent 25%),
    radial-gradient(rgba(255,255,255,.055) 0.7px, transparent 0.8px);
  background-size: auto, auto, 88px 88px;
}

.tp-header-area,
.tp-header-2-area,
.tp-offcanvas-2-area,
.tp-offcanvas-2-bg,
.tp-footer-area,
.tp-copyright-area {
  background-color: #07182B !important;
}

/* OMT yellow is the secondary / heading accent. */
.tp-section-title-clash,
.tp-section-title-dirtyline,
.omt-animated-section-title,
.design-award-title-box .tp-section-title-dirtyline,
.design-footer-top-text .tp-section-title-dirtyline,
.mxd-hero-02__intro h1,
.mxd-hero-02__outro p {
  color: var(--omt-yellow) !important;
}

/* Existing text-invert animation now resolves from muted blue-grey to OMT yellow. */
.tp_text_invert_2 > div {
  background-image: linear-gradient(to right, var(--omt-yellow) 50%, #4E5D71 50%) !important;
}

/* About introduction remains white, only the family changes. */
.tp_text_invert_3 > div {
  background-image: linear-gradient(to right, #FFFFFF 50%, #4E5D71 50%) !important;
}

/* Any inherited green/red CTA treatment becomes OMT yellow. */
.btn-green-light-bg,
.tp-btn-red-border:hover,
.tp-work-number span,
.tp-work-number i,
.creative-work-btn .tp-btn-black,
.tp-btn-black.btn-green-light-bg {
  background-color: var(--omt-yellow) !important;
}

.tp-work-number i,
.tp-btn-black.btn-green-light-bg,
.creative-work-btn .tp-btn-black,
.tp-btn-black.btn-green-light-bg * {
  color: #071426 !important;
}

.tp-btn-red-border {
  color: var(--omt-yellow) !important;
  border-color: var(--omt-yellow) !important;
}

/* Moving text: four disciplined rows, same scroll movement, OMT yellow separators. */
#omt-moving-text {
  padding-top: 90px !important;
  padding-bottom: 72px !important;
  overflow: hidden;
}
#omt-moving-text .moving-text {
  overflow: hidden;
  transform: none !important;
  margin-bottom: 18px;
}
#omt-moving-text .moving-text:last-child { margin-bottom: 0; }
#omt-moving-text .des-text-item span {
  font-family: 'ClashDisplay-Bold', sans-serif !important;
  font-weight: 700;
  font-size: clamp(84px, 12vw, 220px);
  line-height: .86;
  letter-spacing: -.045em;
}
#omt-moving-text .des-text-item span::after {
  background: var(--omt-yellow) !important;
}

/* Section rhythm. Avoid the former 300px+ transition between ticker and work. */
.design-project-area {
  padding-top: 86px !important;
  padding-bottom: 82px !important;
}
.design-project-title-wrap { margin-bottom: 105px !important; }
.omt-how-we-work {
  padding-top: var(--omt-section-gap) !important;
  padding-bottom: var(--omt-section-gap) !important;
}
.omt-creative-work {
  padding-top: var(--omt-section-gap) !important;
  padding-bottom: 0 !important;
}
.omt-team-members {
  padding-top: var(--omt-section-gap) !important;
  margin-bottom: 0 !important;
}
#omt-reviews {
  padding-top: var(--omt-section-gap) !important;
  padding-bottom: var(--omt-section-gap) !important;
}
#omt-awards {
  padding-top: var(--omt-section-gap) !important;
  padding-bottom: 96px !important;
}
.design-footer-area { padding-top: var(--omt-section-gap) !important; }

/* No rounded cards/panels in the OMT visual language. */
.design-project-thumb,
.design-project-thumb img,
.tp-work-item,
.creative-work-bg,
.creative-work-item,
.studio-team-thumb,
.studio-team-thumb img,
.design-testimonial-item,
.design-testimonial-item-wrap,
.tp-testimonial-ratting-box,
.design-choose-item,
.tp-showcase-slider-bg,
.st-video-thumb,
.st-video-thumb img,
.tp-footer-widget,
.omt-project-modal__panel,
.omt-project-modal__media,
.omt-project-modal__media img {
  border-radius: 0 !important;
}

.tp-work-item,
.creative-work-bg,
.creative-work-item,
.design-testimonial-item,
.design-choose-item {
  background-color: var(--omt-navy-card) !important;
}

/* Recent Work cards are the interaction target. */
.omt-project-card {
  cursor: pointer;
  outline: none;
}
.omt-project-card .design-project-thumb {
  overflow: hidden;
  background: var(--omt-navy-card);
}
.omt-project-card .design-project-thumb img {
  transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .45s ease;
  will-change: transform;
}
.omt-project-card:hover .design-project-thumb img,
.omt-project-card:focus-visible .design-project-thumb img {
  transform: scale(1.025);
  filter: brightness(1.06);
}
.omt-project-card:focus-visible {
  box-shadow: inset 0 0 0 1px var(--omt-yellow);
}
.omt-project-card .design-project-title {
  color: #FFFFFF !important;
}

/* Creative Work source panel: square edges and yellow CTA. */
.creative-work-bg {
  padding-top: 105px !important;
  padding-bottom: 95px !important;
}
.creative-work-item { border-color: rgba(255,255,255,.11) !important; }
.creative-work-btn .tp-btn-black,
.tp-btn-black.btn-green-light-bg {
  background: var(--omt-yellow) !important;
}

/* Team heading uses the same reveal choreography as Review. */
.omt-team-members .studio-team-title-box { margin-bottom: 90px !important; }
.omt-team-members .tp-section-title-clash {
  line-height: .82 !important;
}

/* One portfolio showcase only. It scrolls with the page, never traps wheel input. */
.omt-single-showcase-section {
  position: relative;
  margin-bottom: var(--omt-section-gap) !important;
  overflow: hidden;
  background: var(--omt-navy) !important;
}
.omt-single-showcase,
.omt-single-showcase .swiper-wrapper,
.omt-single-showcase .swiper-slide {
  width: 100% !important;
  height: 100% !important;
  min-height: 84vh;
  transform: none !important;
}
.omt-single-showcase .swiper-wrapper {
  display: block !important;
}
.omt-single-showcase .swiper-slide {
  display: block !important;
}
.omt-single-showcase .tp-showcase-slider-bg {
  min-height: 84vh;
  will-change: transform;
  transform: translate3d(0, 6%, 0) scale(1.055);
}
.omt-single-showcase .tp-showcase-slider-content {
  will-change: transform, opacity;
}
.omt-single-showcase .tp-showcase-slider-title {
  color: var(--omt-yellow) !important;
}

/* Project detail modal */
.omt-project-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 36px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}
.omt-project-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.omt-project-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 10, 22, .84);
  backdrop-filter: blur(10px);
}
.omt-project-modal__panel {
  position: relative;
  z-index: 1;
  width: min(1180px, 94vw);
  max-height: min(760px, 88vh);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  overflow: hidden;
  background: #081B30;
  border: 1px solid rgba(248, 200, 0, .48);
  box-shadow: 0 32px 90px rgba(0,0,0,.38);
  transform: translateY(32px) scale(.985);
  transition: transform .32s cubic-bezier(.2,.75,.2,1);
}
.omt-project-modal.is-open .omt-project-modal__panel { transform: translateY(0) scale(1); }
.omt-project-modal__media { min-height: 520px; background: #0B223B; overflow: hidden; }
.omt-project-modal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.omt-project-modal__content {
  padding: clamp(38px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.omt-project-modal__eyebrow {
  color: var(--omt-yellow);
  font-family: 'ClashDisplay-Semibold', sans-serif !important;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.omt-project-modal__content h3 {
  color: #fff;
  font-size: clamp(42px, 5vw, 78px);
  line-height: .92;
  letter-spacing: -.04em;
  margin: 0 0 22px;
}
.omt-project-modal__category { color: var(--omt-yellow); font-size: 17px; margin-bottom: 28px; }
.omt-project-modal__copy { color: rgba(255,255,255,.75); font-size: 18px; line-height: 1.55; max-width: 430px; }
.omt-project-modal__rule { width: 100%; height: 1px; background: rgba(255,255,255,.14); margin: 34px 0 18px; }
.omt-project-modal__hint { color: rgba(255,255,255,.42); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.omt-project-modal__close {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 0;
  background: rgba(6,20,38,.72);
}
.omt-project-modal__close span {
  position: absolute;
  width: 20px;
  height: 1px;
  top: 23px;
  left: 13px;
  background: #fff;
}
.omt-project-modal__close span:first-child { transform: rotate(45deg); }
.omt-project-modal__close span:last-child { transform: rotate(-45deg); }
html.omt-modal-open, html.omt-modal-open body { overflow: hidden !important; }

/* Footer colors and large wordmark. */
.tp-footer-style-6,
.tp-copyright-style-6 { background: #07182B !important; }
.tp-copyright-big-text { color: var(--omt-yellow) !important; }

/* Header / action accents. */
.tp-header-btn .tp-btn,
.tp-header-btn .tp-btn-red,
.tp-offcanvas-2-btn .tp-btn,
.tp-offcanvas-2-btn .tp-btn-red {
  background-color: var(--omt-yellow) !important;
  color: #071426 !important;
}

@media (max-width: 991px) {
  :root { --omt-section-gap: 100px; }
  .omt-project-modal { padding: 18px; }
  .omt-project-modal__panel { grid-template-columns: 1fr; overflow-y: auto; max-height: 90vh; }
  .omt-project-modal__media { min-height: 300px; max-height: 42vh; }
  .omt-project-modal__content { padding: 34px 28px; }
}

@media (max-width: 767px) {
  :root { --omt-section-gap: 76px; }
  #omt-moving-text { padding-top: 60px !important; padding-bottom: 50px !important; }
  .design-project-area { padding-top: 64px !important; }
  .design-project-title-wrap { margin-bottom: 70px !important; }
  .omt-single-showcase,
  .omt-single-showcase .swiper-wrapper,
  .omt-single-showcase .swiper-slide,
  .omt-single-showcase .tp-showcase-slider-bg { min-height: 70vh; }
}

/* V08 verification refinements */
@media only screen and (min-width: 1200px) {
  .mxd-hero-02__intro,
  .mxd-hero-02__outro { width: 74% !important; max-width: 1180px; }
  .mxd-hero-02__intro h1,
  .mxd-hero-02__outro p { font-size: clamp(84px, 6.4vw, 104px) !important; line-height: .96 !important; letter-spacing: -.045em !important; }
}

.tp-btn-sky-border {
  color: var(--omt-yellow) !important;
  border-color: var(--omt-yellow) !important;
}
.tp-btn-sky-border:hover,
.tp-btn-sky-border.solid-bg {
  color: #071426 !important;
  background-color: var(--omt-yellow) !important;
  border-color: var(--omt-yellow) !important;
}
.tp-btn-sky-border.solid-bg:hover {
  color: var(--omt-yellow) !important;
  background-color: transparent !important;
}

.omt-project-modal__backdrop {
  background: rgba(2, 10, 22, .92) !important;
  backdrop-filter: none !important;
}
.omt-project-modal__media,
.omt-project-modal__content { position: relative; z-index: 2; }