/* OMT V09 — unified Creative Agency typography system
   Display: Clash Display Bold / Semibold / Medium
   Editorial body: Inter
   Giant section titles share one exact type scale and one reveal choreography. */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  --omt-font-display-bold: 'ClashDisplay-Bold', sans-serif;
  --omt-font-display-semibold: 'ClashDisplay-Semibold', sans-serif;
  --omt-font-display-medium: 'ClashDisplay-Medium', sans-serif;
  --omt-font-body: 'Inter', Arial, sans-serif;

  /* Reconnect the imported sections to the Creative Agency typography system. */
  --tp-ff-body: var(--omt-font-body);
  --tp-ff-heading: var(--omt-font-display-bold);
  --tp-ff-inter: var(--omt-font-body);
  --tp-ff-p: var(--omt-font-body);
  --tp-ff-clash-medium: var(--omt-font-display-medium);
  --tp-ff-clash-semibold: var(--omt-font-display-semibold);
  --tp-ff-clash-bold: var(--omt-font-display-bold);
  --tp-ff-dirtyline: var(--omt-font-display-bold);
  --tp-ff-platform: var(--omt-font-display-bold);
  --tp-ff-grotesk: var(--omt-font-body);
  --tp-ff-besley: var(--omt-font-display-semibold);
  --tp-ff-teko: var(--omt-font-display-semibold);
  --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: var(--omt-font-display-medium);
  --tp-ff-mango-semibold: var(--omt-font-display-semibold);
  --tp-ff-mango-bold: var(--omt-font-display-bold);
  --tp-ff-playfair: var(--omt-font-body);
  --tp-ff-satisfy: var(--omt-font-display-medium);
  --tp-ff-phudu: var(--omt-font-display-semibold);
  --tp-ff-poppins: var(--omt-font-body);
  --tp-ff-onest: var(--omt-font-body);
}

/* Body copy / information typography. Do NOT force <span> or <a> to a separate
   face: they must inherit the surrounding heading/body hierarchy. */
html, body,
body,
p, li, label, input, textarea, select,
.design-project-title-box p,
.design-project-content > span,
.tp-work-item p,
.creative-work-item p,
.studio-team-title-box p,
.design-testimonial-author h4,
.design-testimonial-author span,
.design-testimonial-item > p,
.design-choose-title-box p,
.design-choose-item p,
.design-award-title-box p,
.design-award-content span,
.tp-footer-widget-title,
.tp-footer-widget-title-sm,
.tp-footer-widget-menu a,
.tp-footer-widget-content p,
.tp-copyright-left p,
.tp-copyright-right a,
.omt-project-modal__category,
.omt-project-modal__copy,
.omt-project-modal__hint {
  font-family: var(--omt-font-body) !important;
}

/* Inheritance fixes the V08 mismatch where heading spans/links became Regular. */
span, a { font-family: inherit !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--omt-font-display-bold) !important;
}

/* Hero remains compositionally unique, but uses the same display family. */
.omt-typography-hero .mxd-hero-02__intro h1 {
  font-family: var(--omt-font-display-bold) !important;
  font-weight: 700 !important;
}
.omt-typography-hero .mxd-hero-02__outro p {
  font-family: var(--omt-font-display-medium) !important;
  font-weight: 500 !important;
}
.omt-typography-hero .mxd-hero-02__scroll span,
.omt-typography-hero .mxd-hero-02__scroll a {
  font-family: var(--omt-font-body) !important;
  font-weight: 500;
}

/* Large opening narrative: supporting display typography, not a competing
   headline family. Existing line-color reveal remains untouched. */
.omt-intro-statement,
.omt-intro-statement > div {
  font-family: var(--omt-font-display-medium) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
}

/* --------------------------------------------------------------------------
   SHARED GIANT SECTION TITLE
   OMT display-title system: Clash Bold, 130 base, 115 at the
   1400–1599 desktop breakpoint, .79 line-height, -.03em tracking.
   -------------------------------------------------------------------------- */
.omt-major-title,
.omt-major-title a,
.omt-major-title span,
.omt-major-title .tp_text_invert_2,
.omt-major-title .tp_text_invert_2 > div {
  font-family: var(--omt-font-display-bold) !important;
  font-weight: 700 !important;
}
.omt-major-title {
  margin: 0;
  font-size: 130px !important;
  line-height: .79 !important;
  letter-spacing: -.03em !important;
  text-transform: uppercase;
  color: var(--omt-yellow) !important;
}
.omt-major-title > span,
.omt-major-title > a > span { display: inline-block; }
.omt-major-title a { color: inherit !important; }

/* Reveal colors remain OMT-specific while the movement behavior remains the
   existing Recent Work behavior from main.js. */
.omt-major-title .tp_text_invert_2 > div,
.omt-supporting-section-title .tp_text_invert_2 > div {
  background-image: linear-gradient(to right, var(--omt-yellow) 50%, #4E5D71 50%) !important;
}

@media only screen and (min-width: 1801px) and (max-width: 1850px),
       only screen and (min-width: 1701px) and (max-width: 1800px) {
  .omt-major-title { font-size: 120px !important; }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .omt-major-title { font-size: 115px !important; }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .omt-major-title { font-size: 110px !important; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .omt-major-title { font-size: 100px !important; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .omt-major-title { font-size: 85px !important; }
}
@media (max-width: 767px) {
  .omt-major-title {
    font-size: 48px !important;
    line-height: .88 !important;
    letter-spacing: -.015em !important;
  }
}

/* Eyebrows / labels / UI labels: Creative Agency supporting face. */
.omt-eyebrow,
.tp-section-subtitle,
.tp-section-subtitle-clash,
.tp-showcase-slider-subtitle {
  font-family: var(--omt-font-display-semibold) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}
button,
.omt-ui-label,
.tp-btn,
.tp-btn-red,
.tp-btn-border,
.tp-btn-red-border,
.tp-btn-sky-border,
.tp-btn-black,
.tp-header-menu a,
.tp-offcanvas-menu a {
  font-family: var(--omt-font-display-semibold) !important;
  font-weight: 600 !important;
}

/* Supporting section heading (Creative Work): same heading reveal movement,
   but intentionally a smaller supporting scale rather than a giant title. */
.omt-supporting-section-title,
.omt-supporting-section-title span,
.omt-supporting-section-title .tp_text_invert_2 > div {
  font-family: var(--omt-font-display-semibold) !important;
  font-weight: 600 !important;
}
.omt-supporting-section-title {
  font-size: 40px !important;
  line-height: 1.18 !important;
  letter-spacing: -.03em !important;
  color: var(--omt-yellow) !important;
}

/* Studio About: remove the old first-word indent because major headings now
   obey a single shared system. */
#omt-studio-about .clash-subtitle-space-1 { padding-left: 0 !important; }
#omt-studio-about .studio-about-content p {
  font-family: var(--omt-font-body) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

/* Moving-text remains a dedicated display device, but stays inside the same
   Clash Bold family. */
#omt-moving-text .des-text-item span {
  font-family: var(--omt-font-display-bold) !important;
  font-weight: 700 !important;
}

/* Recent Work — Creative Agency project-title hierarchy. */
.design-project-title {
  font-family: var(--omt-font-display-semibold) !important;
  font-weight: 600 !important;
  font-size: 50px !important;
  line-height: .9 !important;
  letter-spacing: -.02em !important;
  margin-bottom: 10px !important;
}
.design-project-title-box p {
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em !important;
}
.design-project-content > span {
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
}

/* How We Work cards. */
.omt-how-we-work .tp-work-title {
  font-family: var(--omt-font-display-semibold) !important;
  font-weight: 600 !important;
  font-size: 30px !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
}
.omt-how-we-work .tp-work-item p {
  font-family: var(--omt-font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}
.omt-how-we-work .tp-work-number span,
.omt-how-we-work .tp-work-number i {
  font-family: var(--omt-font-display-semibold) !important;
  font-weight: 600 !important;
}

/* Creative Work supporting copy. */
.omt-creative-work .creative-work-item p {
  font-family: var(--omt-font-body) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Team hierarchy from Creative Agency. */
.omt-team-members .studio-team-title-box p {
  font-family: var(--omt-font-body) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
  letter-spacing: -.02em !important;
}
.omt-team-members .studio-team-title-sm,
.omt-team-members .studio-team-title-sm a {
  font-family: var(--omt-font-display-semibold) !important;
  font-weight: 600 !important;
  font-size: 34px !important;
  line-height: .95 !important;
  letter-spacing: 0 !important;
}
.omt-team-members .studio-team-content > span {
  font-family: var(--omt-font-display-semibold) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
}

/* Reviews deliberately use Inter throughout, matching the Creative Agency
   testimonial typography instead of inheriting the display font. */
#omt-reviews .design-testimonial-author h4 {
  font-family: var(--omt-font-body) !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 30px !important;
  letter-spacing: -.02em !important;
}
#omt-reviews .design-testimonial-author span {
  font-family: var(--omt-font-body) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 30px !important;
  letter-spacing: -.02em !important;
}
#omt-reviews .design-testimonial-review h4 {
  font-family: var(--omt-font-body) !important;
  font-weight: 500 !important;
  font-size: 100px !important;
  line-height: 1 !important;
  letter-spacing: -.08em !important;
}
#omt-reviews .design-testimonial-item > p {
  font-family: var(--omt-font-body) !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 1.42 !important;
  letter-spacing: -.02em !important;
}

/* Video / narrative section: readable editorial body, marquee remains display. */
.st-video-area p,
.st-video-area h4 {
  font-family: var(--omt-font-body) !important;
}
.st-video-area p {
  font-weight: 500 !important;
  letter-spacing: -.03em !important;
}
.st-video-area .st-video-text-title {
  font-family: var(--omt-font-display-bold) !important;
  font-weight: 700 !important;
}

/* Stats: numbers are display; explanations are Inter. */
.design-choose-item > span,
.design-choose-item > span i {
  font-family: var(--omt-font-display-bold) !important;
  font-weight: 700 !important;
}
.design-choose-title-box p,
.design-choose-item p {
  font-family: var(--omt-font-body) !important;
}

/* Awards supporting hierarchy. */
#omt-awards .design-award-title-box p {
  font-family: var(--omt-font-display-semibold) !important;
  font-weight: 600 !important;
  font-size: 32px !important;
  line-height: 1.19 !important;
  letter-spacing: -.02em !important;
}
#omt-awards .design-award-content h4 {
  font-family: var(--omt-font-display-semibold) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}
#omt-awards .design-award-content span {
  font-family: var(--omt-font-body) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Footer follows the Creative Agency split: Inter editorial footer text,
   with the giant OMT wordmark retaining its own brand scale/color. */
.tp-footer-widget-title {
  font-family: var(--omt-font-body) !important;
  font-weight: 700 !important;
}
.tp-footer-widget-title-sm,
.tp-footer-widget-menu a,
.tp-footer-widget-content p,
.tp-copyright-left p,
.tp-copyright-right a {
  font-family: var(--omt-font-body) !important;
}
.tp-copyright-big-text {
  font-family: var(--omt-font-body) !important;
  font-weight: 800 !important;
}

/* Modal typography follows the same hierarchy. */
.omt-project-modal__eyebrow {
  font-family: var(--omt-font-display-semibold) !important;
  font-weight: 600 !important;
}
.omt-project-modal__content h3 {
  font-family: var(--omt-font-display-bold) !important;
  font-weight: 700 !important;
}

@media only screen and (max-width: 1199px) {
  .design-project-title { font-size: 46px !important; }
}
@media (max-width: 767px) {
  .omt-supporting-section-title { font-size: 30px !important; line-height: 1.18 !important; }
  .design-project-title { font-size: 40px !important; }
  .design-project-title-box p { font-size: 18px !important; }
  #omt-awards .design-award-title-box p { font-size: 24px !important; }
  #omt-reviews .design-testimonial-review h4 { font-size: 72px !important; }
  #omt-reviews .design-testimonial-item > p { font-size: 20px !important; line-height: 1.45 !important; }
}