@charset "UTF-8";
/* ============================================================
   SECTION RHYTHM + TYPE SCALE (home page)
   Load LAST — after style_home.css, featured-news.css, footer.css.

   1) One shared, symmetric spacing scale for every main section
      (equal top and bottom padding at every breakpoint).
   2) One shared heading scale so equal-role titles share a size.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Vertical section padding — symmetric top/bottom */
  --section-space: 130px;

  /* Heading scale
     xl = big section statement (Who We Are sentence)
     lg = standard section title (Featured News, Careers)      */
  --fs-title-xl: 70px;
  --lh-title-xl: 1.06;
  --fs-title-lg: 50px;
  --lh-title-lg: 1.1;
}

@media only screen and (max-width: 1919px) {
  :root { --section-space: 100px; }
}

@media only screen and (max-width: 1399px) {
  :root {
    --section-space: 80px;
    --fs-title-xl: 56px;
    --fs-title-lg: 44px;
  }
}

@media only screen and (max-width: 1199px) {
  :root {
    --fs-title-xl: 46px;
    --fs-title-lg: 40px;
  }
}

@media only screen and (max-width: 991px) {
  :root { --section-space: 60px; }
}

@media only screen and (max-width: 767px) {
  :root {
    --fs-title-xl: 34px;
    --fs-title-lg: 30px;
  }
}

@media only screen and (max-width: 575px) {
  :root {
    --fs-title-xl: 27px;
    --fs-title-lg: 24px;
  }
}

/* ---------- 1. Symmetric section spacing ---------- */
/* Every main section gets identical top/bottom padding from the
   shared token, overriding the template's mixed utilities
   (.section-spacing 170px, .section-spacing-*-130, about-3 118/116,
   and the one-sided wrapper paddings). Hero (.portfolio) stays
   full-viewport and is intentionally excluded. */

main .featured-news-grid.works-section-12,
main .counter-section-8,
main .about-section-11,
main .about-team.section-spacing,
main .about-3 {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Kill the one-sided internal paddings that made sections lopsided:
   - counter wrapper carried a fixed 108px bottom (never shrank on mobile)
   - about-11 wrapper carried top-only 85/55/40px                       */
.counter-section-8 .counter-section-8__wrapper {
  padding-bottom: 0;
}

.about-section-11 .about-section-11__wrapper {
  padding-top: 0;
}

/* ---------- 2. Unified heading scale ---------- */

/* Section statement (Who We Are) — level "xl" */
.counter-section-8__title {
  font-size: var(--fs-title-xl);
  line-height: var(--lh-title-xl);
}

/* Standard section titles — level "lg" (previously 50px vs 57px) */
.featured-news-grid__title {
  font-size: var(--fs-title-lg);
  line-height: var(--lh-title-lg);
}

.about-3__inner .about-3__content > .title {
  font-size: var(--fs-title-lg);
  line-height: var(--lh-title-lg);
  letter-spacing: -1px;
}

@media only screen and (max-width: 767px) {
  .about-3__inner .about-3__content > .title {
    letter-spacing: -0.5px;
  }
}

/* ---------- 3. Counter numbers as <p class="counter-section-8__num"> ----------
   The numbers were <h2> (styled via an element selector). The markup is
   now semantic (<p>), so the display styling moves to a class here.
   Specificity (0,2,0) beats the label rule `.counter-section-8__item p`. */

.counter-section-8__item .counter-section-8__num {
  margin: 0;
  padding: 0;
  font-size: 170px; /* was 200 */
  font-weight: normal;
  line-height: 1;
  letter-spacing: normal;
  color: var(--white);
  text-transform: uppercase;
  font-family: var(--font_regular);
}

@media only screen and (max-width: 1399px) {
  .counter-section-8__item .counter-section-8__num {
    font-size: 165px;
    letter-spacing: 0;
  }
}

@media only screen and (max-width: 1199px) {
  .counter-section-8__item .counter-section-8__num {
    font-size: 135px;
  }
}

@media only screen and (max-width: 767px) {
  .counter-section-8__item .counter-section-8__num {
    font-size: 112px;
  }
}

@media (max-width: 575px) {
  .counter-section-8__item .counter-section-8__num {
    font-size: 80px;
  }
}

.counter-section-8__item .counter-section-8__num .odometer.odometer-auto-theme,
.counter-section-8__item .counter-section-8__num .odometer.odometer-theme-default {
  font-family: var(--font_sregular);
  line-height: 1;
}

/* ============================================================
   SITE-WIDE UTILITY NORMALIZATION (all pages)
   The template ships several competing spacing scales:
   .section-spacing (170px, with a 190px anomaly at <=1919px),
   .section-spacing-130/-140, and one-sided -top/-bottom variants
   (-100/-130/-140). Each page stylesheet duplicates them.
   These overrides collapse every scale onto the one shared token,
   so section rhythm is identical on every page that links this
   file after its page stylesheet. Specificity (0,1,1) beats the
   template utilities (0,1,0) at every breakpoint.
   ============================================================ */

main .section-spacing,
main .section-spacing-130,
main .section-spacing-140 {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

main .section-spacing-top,
main .section-spacing-top-130,
main .section-spacing-top-140 {
  padding-top: var(--section-space);
}

main .section-spacing-bottom,
main .section-spacing-bottom-100,
main .section-spacing-bottom-130 {
  padding-bottom: var(--section-space);
}

/* Page hero titles (breadcrumb / page-title areas) are now the
   page <h1>; the visual style still comes from their classes in
   each page stylesheet, so nothing to restyle here. */

/* ============================================================
   INNER-PAGE SECTIONS WITH HARD-CODED PADDING
   These sections carry fixed paddings in their component CSS
   instead of the spacing utilities, so the utility normalization
   above never reaches them:
   - .portfolio-search  (listing pages) was 60px top / 140px bottom, fixed
   - .explore-cta       (expertise subpages) was 100px both, fixed
   - .dwn-news-section  (news details) was 100px both, 70px under 576px
   All three now follow the shared responsive token, symmetric.
   ============================================================ */

main .portfolio-search,
main .explore-cta,
main .dwn-news-section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* ---------- 3. Same-color seams: collapse the doubled padding ------
   Adjacent black sections merge into one continuous band, so the two
   full paddings meeting at each seam read as double space (260px)
   while the band's outer edges show a single 130px. Zeroing the top
   of the *following* section makes every seam total exactly one
   --section-space - identical to the edges, restoring the uniform
   rhythm. (Adjacency-based: if the home sections are ever reordered,
   update these pairs to match the new black-on-black neighbours.) */
main .featured-news-grid.works-section-12 + .counter-section-8,
main .counter-section-8 + .about-team.section-spacing,
main .about-team.section-spacing + .counter-section-8--stats {
  padding-top: 0;
}

/* ---------- 4. about-3 (Careers) dark variant - TOGGLE ------------
   ON:  add class "about-3--dark" to the careers <section>
   OFF: remove that class - the original white version returns.
   Selectors mirror the home bundle's chains (with main + the modifier
   prefixed) so they out-rank the originals wherever they load.
   Includes seam handling: with the section black, the black about-team
   above and the black footer below merge with it, so the meeting
   paddings are trimmed to keep every gap at one --section-space. */
main .about-3.about-3--dark {
  background: #000000;
}
main .about-3--dark .about-3__inner .about-3__content .sub-title {
  color: rgba(255, 255, 255, 0.55);
}
main .about-3--dark .about-3__inner .about-3__content > .title {
  color: #ffffff;
}
main .about-3--dark .about-3__inner .about-3__content .rr-underline span {
  color: #ffffff;
}
main .about-3--dark .about-3__inner .about-3__content .rr-underline::before {
  background: #ffffff;
}
main .about-3--dark .about-3__inner .about-3__content-bottom .year span {
  color: rgba(255, 255, 255, 0.55);
}
main .about-3--dark .about-3__inner .about-3__content-bottom .year .title {
  color: #ffffff;
}
main .about-3--dark .about-3__inner .about-3__content-bottom .text .desc {
  color: rgba(255, 255, 255, 0.7);
}

/* seams (active only while dark): about-team above keeps its bottom
   padding as the single gap; the footer's own 48px top padding plus
   this trimmed bottom add up to one --section-space. */
main .about-team.section-spacing + .about-3--dark {
  padding-top: 0;
}
main .about-3.about-3--dark {
  padding-bottom: calc(var(--section-space) - 48px);
}

/* ---------- 5. Shared alignment line (Who We Are / counters / What We Do)
   The counter heading, the counters row, and the What-We-Do list all
   live in the same rr-container-1890, so they now share ONE grid:
   three equal columns, 30px gap - the counters' own grid. Column 2's
   left edge is the alignment line: the statement title, the middle
   counter, and the discipline list all start on it. The image keeps
   its width, pinned to the right edge. Specificity (0,1,1) out-ranks
   the bundle's per-breakpoint layouts, so the stacked mobile layout
   is re-declared here explicitly. */
main .counter-section-8__headding-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
main .counter-section-8__headding-wrap .btn-wrap {
  grid-column: 1;
}
main .counter-section-8__headding-wrap .counter-section-8__title {
  grid-column: 2 / -1;
  max-width: 1100px;
}

main .about-team__wrapper {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
main .about-team__wrapper .about-team__box:nth-child(3) {
  justify-self: end;
  width: 100%;
  max-width: 384px;
}

@media only screen and (max-width: 1199px) {
  main .about-team__wrapper .about-team__box:nth-child(3) {
    max-width: 300px;
  }
}

@media only screen and (max-width: 991px) {
  main .counter-section-8__headding-wrap,
  main .about-team__wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  main .counter-section-8__headding-wrap .counter-section-8__title {
    grid-column: auto;
    max-width: none;
  }
  main .about-team__wrapper .about-team__box:nth-child(3) {
    justify-self: stretch;
    max-width: none;
  }
}

/* ---------- 6. Who We Are image with scroll parallax (per mockup) -----
   Third child of the heading grid: spans columns 2-3 like the title,
   so its left edge sits on the shared alignment line and its right
   edge matches the title block (same max-width). The frame is a
   fixed 16:9 mask; the image inside is 20% taller than the frame and
   carries data-speed="0.85", so ScrollSmoother moves it slightly
   slower than the page and it drifts inside the mask. Below 1025px
   the smoother (and its parallax) is off, so the image sits static. */
main .counter-section-8__headding-wrap .counter-section-8__title {
  padding-bottom: 0;
}
main .counter-section-8__headding-wrap .counter-section-8__media {
  grid-column: 2 / -1;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: clamp(48px, 5vw, 80px) 0 clamp(70px, 9vw, 150px);
  aspect-ratio: 16 / 9;
  background: #9c9c99;
  overflow: hidden;
}
main .counter-section-8__media .counter-section-8__media-img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}

@media only screen and (max-width: 1024px) {
  /* no smoother = no parallax: fill the frame exactly */
  main .counter-section-8__media .counter-section-8__media-img {
    top: 0;
    height: 100%;
  }
}
@media only screen and (max-width: 991px) {
  main .counter-section-8__headding-wrap .counter-section-8__media {
    grid-column: auto;
    max-width: none;
    margin: 32px 0 56px;
  }
}

/* ---------- 7. Edge balance pass (audit, Aug 2026) --------------------
   Section paddings are symmetric via the token; these zero the small
   INTERNAL paddings on first/last elements that leaked extra space
   onto one edge and made a section read heavier at top or bottom. */

/* Featured News: title carried 17px top padding (top edge = 147 vs 136)
   and the last card row a 6px bottom padding. Both zeroed -> 130/130. */
main .featured-news-grid .featured-news-grid__title {
  padding-top: 0;
}
main .featured-news-grid .news-card__content {
  padding-bottom: 0;
}

/* Careers: content column carried a 6px top padding above the kicker. */
main .about-3 .about-3__inner .about-3__content {
  padding-top: 0;
}

/* Who We Are: the heading row's button sits flush with the title's
   cap height rather than floating on its own baseline. */
main .counter-section-8__headding-wrap .btn-wrap {
  align-self: start;
  margin: 0;
}

/* ============================================================
   8. SECTION SPACING UTILITIES (set spacing from the HTML)

   Pick any value from 10 to 300 in steps of 10. The number is the
   DESKTOP value; it scales down automatically through the same
   ladder as --section-space (via --sp-scale), so responsiveness
   adapts to whatever you choose:
        >=1920px  100%   |  <=1919px  77%  |  <=1399px  62%  |  <=991px  46%
   e.g. sp-top-100 = 100px on a large desktop, ~46px on a phone.

     sp-top-N      top only        (N = 10, 20, 30 ... 300)
     sp-bottom-N   bottom only
     sp-N          top and bottom
     sp-top-0 / sp-bottom-0 / sp-0   remove the padding entirely

   Exact or off-scale values: sp-top-custom / sp-bottom-custom with
   an inline variable, e.g. style="--sp-top: 45px; --sp-bottom: 125px"
   (custom values scale too).

   Fixed (non-scaling) spacing on one section: add style="--sp-scale: 1"
   to that section and its utilities keep their exact pixel values.

   !important is deliberate: a spacing class written on a section is
   the final word - it out-ranks the shared rules, the seam rules, and
   the template's utilities in every load order.

   Example:
     <section class="counter-section-8 theme-bg-black sp-top-40 sp-bottom-120">
   ============================================================ */
:root { --sp-scale: 1; }
@media only screen and (max-width: 1919px) { :root { --sp-scale: 0.77; } }
@media only screen and (max-width: 1399px) { :root { --sp-scale: 0.62; } }
@media only screen and (max-width: 991px)  { :root { --sp-scale: 0.46; } }

main .sp-top-0,    main .sp-0 { padding-top: 0 !important; }
main .sp-bottom-0, main .sp-0 { padding-bottom: 0 !important; }

main .sp-top-10, main .sp-10 { padding-top: calc(10px * var(--sp-scale)) !important; }
main .sp-top-20, main .sp-20 { padding-top: calc(20px * var(--sp-scale)) !important; }
main .sp-top-30, main .sp-30 { padding-top: calc(30px * var(--sp-scale)) !important; }
main .sp-top-40, main .sp-40 { padding-top: calc(40px * var(--sp-scale)) !important; }
main .sp-top-50, main .sp-50 { padding-top: calc(50px * var(--sp-scale)) !important; }
main .sp-top-60, main .sp-60 { padding-top: calc(60px * var(--sp-scale)) !important; }
main .sp-top-70, main .sp-70 { padding-top: calc(70px * var(--sp-scale)) !important; }
main .sp-top-80, main .sp-80 { padding-top: calc(80px * var(--sp-scale)) !important; }
main .sp-top-90, main .sp-90 { padding-top: calc(90px * var(--sp-scale)) !important; }
main .sp-top-100, main .sp-100 { padding-top: calc(100px * var(--sp-scale)) !important; }
main .sp-top-110, main .sp-110 { padding-top: calc(110px * var(--sp-scale)) !important; }
main .sp-top-120, main .sp-120 { padding-top: calc(120px * var(--sp-scale)) !important; }
main .sp-top-130, main .sp-130 { padding-top: calc(130px * var(--sp-scale)) !important; }
main .sp-top-140, main .sp-140 { padding-top: calc(140px * var(--sp-scale)) !important; }
main .sp-top-150, main .sp-150 { padding-top: calc(150px * var(--sp-scale)) !important; }
main .sp-top-160, main .sp-160 { padding-top: calc(160px * var(--sp-scale)) !important; }
main .sp-top-170, main .sp-170 { padding-top: calc(170px * var(--sp-scale)) !important; }
main .sp-top-180, main .sp-180 { padding-top: calc(180px * var(--sp-scale)) !important; }
main .sp-top-190, main .sp-190 { padding-top: calc(190px * var(--sp-scale)) !important; }
main .sp-top-200, main .sp-200 { padding-top: calc(200px * var(--sp-scale)) !important; }
main .sp-top-210, main .sp-210 { padding-top: calc(210px * var(--sp-scale)) !important; }
main .sp-top-220, main .sp-220 { padding-top: calc(220px * var(--sp-scale)) !important; }
main .sp-top-230, main .sp-230 { padding-top: calc(230px * var(--sp-scale)) !important; }
main .sp-top-240, main .sp-240 { padding-top: calc(240px * var(--sp-scale)) !important; }
main .sp-top-250, main .sp-250 { padding-top: calc(250px * var(--sp-scale)) !important; }
main .sp-top-260, main .sp-260 { padding-top: calc(260px * var(--sp-scale)) !important; }
main .sp-top-270, main .sp-270 { padding-top: calc(270px * var(--sp-scale)) !important; }
main .sp-top-280, main .sp-280 { padding-top: calc(280px * var(--sp-scale)) !important; }
main .sp-top-290, main .sp-290 { padding-top: calc(290px * var(--sp-scale)) !important; }
main .sp-top-300, main .sp-300 { padding-top: calc(300px * var(--sp-scale)) !important; }

main .sp-bottom-10, main .sp-10 { padding-bottom: calc(10px * var(--sp-scale)) !important; }
main .sp-bottom-20, main .sp-20 { padding-bottom: calc(20px * var(--sp-scale)) !important; }
main .sp-bottom-30, main .sp-30 { padding-bottom: calc(30px * var(--sp-scale)) !important; }
main .sp-bottom-40, main .sp-40 { padding-bottom: calc(40px * var(--sp-scale)) !important; }
main .sp-bottom-50, main .sp-50 { padding-bottom: calc(50px * var(--sp-scale)) !important; }
main .sp-bottom-60, main .sp-60 { padding-bottom: calc(60px * var(--sp-scale)) !important; }
main .sp-bottom-70, main .sp-70 { padding-bottom: calc(70px * var(--sp-scale)) !important; }
main .sp-bottom-80, main .sp-80 { padding-bottom: calc(80px * var(--sp-scale)) !important; }
main .sp-bottom-90, main .sp-90 { padding-bottom: calc(90px * var(--sp-scale)) !important; }
main .sp-bottom-100, main .sp-100 { padding-bottom: calc(100px * var(--sp-scale)) !important; }
main .sp-bottom-110, main .sp-110 { padding-bottom: calc(110px * var(--sp-scale)) !important; }
main .sp-bottom-120, main .sp-120 { padding-bottom: calc(120px * var(--sp-scale)) !important; }
main .sp-bottom-130, main .sp-130 { padding-bottom: calc(130px * var(--sp-scale)) !important; }
main .sp-bottom-140, main .sp-140 { padding-bottom: calc(140px * var(--sp-scale)) !important; }
main .sp-bottom-150, main .sp-150 { padding-bottom: calc(150px * var(--sp-scale)) !important; }
main .sp-bottom-160, main .sp-160 { padding-bottom: calc(160px * var(--sp-scale)) !important; }
main .sp-bottom-170, main .sp-170 { padding-bottom: calc(170px * var(--sp-scale)) !important; }
main .sp-bottom-180, main .sp-180 { padding-bottom: calc(180px * var(--sp-scale)) !important; }
main .sp-bottom-190, main .sp-190 { padding-bottom: calc(190px * var(--sp-scale)) !important; }
main .sp-bottom-200, main .sp-200 { padding-bottom: calc(200px * var(--sp-scale)) !important; }
main .sp-bottom-210, main .sp-210 { padding-bottom: calc(210px * var(--sp-scale)) !important; }
main .sp-bottom-220, main .sp-220 { padding-bottom: calc(220px * var(--sp-scale)) !important; }
main .sp-bottom-230, main .sp-230 { padding-bottom: calc(230px * var(--sp-scale)) !important; }
main .sp-bottom-240, main .sp-240 { padding-bottom: calc(240px * var(--sp-scale)) !important; }
main .sp-bottom-250, main .sp-250 { padding-bottom: calc(250px * var(--sp-scale)) !important; }
main .sp-bottom-260, main .sp-260 { padding-bottom: calc(260px * var(--sp-scale)) !important; }
main .sp-bottom-270, main .sp-270 { padding-bottom: calc(270px * var(--sp-scale)) !important; }
main .sp-bottom-280, main .sp-280 { padding-bottom: calc(280px * var(--sp-scale)) !important; }
main .sp-bottom-290, main .sp-290 { padding-bottom: calc(290px * var(--sp-scale)) !important; }
main .sp-bottom-300, main .sp-300 { padding-bottom: calc(300px * var(--sp-scale)) !important; }

main .sp-top-custom    { padding-top: calc(var(--sp-top, 0px) * var(--sp-scale)) !important; }
main .sp-bottom-custom { padding-bottom: calc(var(--sp-bottom, 0px) * var(--sp-scale)) !important; }

/* What We Do image height */
main .about-team__box .thumb-wrapper .thumb {
  height: 480px;   /* ← HEIGHT dial */
}

/* ============================================================
   9. NATIVE SMOOTH-SCROLL OFF (ScrollTrigger conflict fix)
   The template ships `scroll-behavior: smooth`. ScrollTrigger.refresh()
   (called after any layout change - the disciplines accordion, filters,
   expanding panels) restores the scroll position with an instant
   scrollTo, which the native smooth behavior animates instead: the
   page visibly glides down and up after each click. ScrollSmoother
   already provides all scrolling feel, so the native behavior is
   disabled site-wide. (GSAP's own documented recommendation.)
   ============================================================ */
html,
body {
  scroll-behavior: auto !important;
}

/* ---------- 10. Home "What We Do" list rhythm --------------------------
   Same treatment as the expertise nav: airier line-height and a set gap
   between disciplines (the bundle runs 50px type on a 50px line with
   10px between items). LIST SPACING dial: --home-nav-gap. */
main .about-team .about-team__wrapper .about-team__box .team-list li {
  --home-nav-gap: 18px;
  line-height: 1.1;
}
main .about-team .about-team__wrapper .about-team__box .team-list li:not(:last-child) {
  margin-bottom: var(--home-nav-gap);
}
@media only screen and (max-width: 991px) {
  main .about-team .about-team__wrapper .about-team__box .team-list li {
    --home-nav-gap: 12px;
  }
}

/* ---------- 11. Home "What We Do" items as links ---------------------
   The discipline names are wrapped in <a> so they navigate to the
   expertise pages; the link fills the row and inherits the list's
   colour states (dim -> white on hover / active), so nothing changes
   visually and the hover image swap keeps working. */
main .about-team .team-list li a {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: inherit;
}
main .about-team .team-list li a:hover,
main .about-team .team-list li a:focus-visible {
  color: inherit;
  text-decoration: none;
}

/* ---------- 12. Who We Are image: "VIEW PROJECT" cursor disc -----------
   The frame's image is wrapped in a link; a red disc with black text
   follows the pointer while hovering (it replaces the native cursor
   over the image). Dials: --cursor-size, --cursor-bg, --cursor-ink. */
main .counter-section-8__media .counter-section-8__media-link {
  position: absolute;
  inset: 0;
  display: block;
  cursor: none;
  --cursor-size: 90px;
  --cursor-bg: #000;
  --cursor-ink: #FFF;
}
main .counter-section-8__media .media-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  margin: calc(var(--cursor-size) / -2) 0 0 calc(var(--cursor-size) / -2);
  border-radius: 50%;
  background: var(--cursor-bg);
  color: var(--cursor-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font_medium);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: translate(var(--mx, 0px), var(--my, 0px)); /* GSAP overrides this when present */
  scale: 0.6;
  transition: opacity 0.25s ease, scale 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
main .counter-section-8__media .counter-section-8__media-link.is-hover .media-cursor {
  opacity: 1;
  scale: 1;
}
/* no hover devices: plain link, no disc */
@media (hover: none) {
  main .counter-section-8__media .media-cursor { display: none; }
  main .counter-section-8__media .counter-section-8__media-link { cursor: pointer; }
}

/* ---------- 13. Hard line breaks in the Who We Are statement -----------
   The <br>s set the desktop line breaks. The theme already hides every
   <br> under 768px; this extends that to the tablet band, where the
   statement's smaller type would turn the desktop breaks into ragged
   short lines. (Keep a SPACE before each <br> in the markup so words
   don't run together when the break is hidden.) */
@media only screen and (max-width: 1199px) {
  main .counter-section-8__title br {
    display: none;
  }
}

/* ---------- 14. Counter suffix ("1K+") -------------------------------
   The odometer draws its digits as inline-blocks aligned to the middle
   with a 1.1em line-height; a plain-text suffix beside it sits on the
   baseline and drops ~20px. Mirror the odometer's box so "1" and "K+"
   share one line. --suffix-size is the dial (1 = same size as digits). */
main .odometer + .counter-suffix {
  --suffix-size: 1;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.1em;
  font-size: calc(1em * var(--suffix-size));
  font-family: inherit;
  letter-spacing: -0.02em;
  margin-left: 0.02em;
}

/* ---------- 15. Careers "At a Glance" numbers: same ladder as home ------
   Keeps the two stat rows at identical scale. Edit both places together. */
main .counter-section-11__item h2 {
  font-size: 170px;
  line-height: 1;
}
@media only screen and (max-width: 1399px) { main .counter-section-11__item h2 { font-size: 165px; } }
@media only screen and (max-width: 1199px) { main .counter-section-11__item h2 { font-size: 135px; } }
@media only screen and (max-width: 767px)  { main .counter-section-11__item h2 { font-size: 112px; } }
@media only screen and (max-width: 575px)  { main .counter-section-11__item h2 { font-size: 80px; } }

/* ---------- 16. Firm page: Mission / Vision (editorial pair) ------------
   Two statements side by side under a shared hairline: small tracked
   label in steel, the statement itself set as display type (Magnetik
   Regular, larger, no quotation marks - a declaration reads stronger
   than a quote). Stacks on narrow screens. Dials: --mv-size (statement
   size), --mv-gap (column gap). */
main .firm-feature__content .mv {
  --mv-size: 22px;
  --mv-gap: 56px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--mv-gap);
  margin: 44px 0 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(17, 17, 17, 0.14);
}
main .firm-feature__content .mv__label {
  margin: 0 0 14px;
  font-family: var(--font_medium);
  font-size: 12px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #000;
}
main .firm-feature__content .mv__text {
  margin: 0;
  font-family: var(--font_thin);
  font-size: var(--mv-size);
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: #000;
}
main .firm-feature__content .mv + .dw-btn {
  margin-top: 0;
}
@media only screen and (max-width: 767px) {
  main .firm-feature__content .mv {
    grid-template-columns: 1fr;
    row-gap: 32px;
    --mv-size: 20px;
    margin: 36px 0 48px;
  }
}

/* ---------- 17. Reusable cursor disc: .media-cursor-host -----------------
   Same effect as the home Who We Are image, made generic: put the class
   media-cursor-host on any image box (position/overflow handled here),
   drop a <span class="media-cursor"> inside, and include the follower
   script once per page. Dials: --cursor-size, --cursor-bg, --cursor-ink. */
main .media-cursor-host {
  position: relative;
  overflow: hidden;
  cursor: none;
  --cursor-size: 120px;
  --cursor-bg: #000;
  --cursor-ink: #fff;
}
main .media-cursor-host .media-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  margin: calc(var(--cursor-size) / -2) 0 0 calc(var(--cursor-size) / -2);
  border-radius: 50%;
  background: var(--cursor-bg);
  color: var(--cursor-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font_medium);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  scale: 0.6;
  transition: opacity 0.25s ease, scale 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
main .media-cursor-host.is-hover .media-cursor {
  opacity: 1;
  scale: 1;
}
@media (hover: none) {
  main .media-cursor-host .media-cursor { display: none; }
  main .media-cursor-host { cursor: pointer; }
}