/* ============================================================
   Emendata — Webflow adaptation layer.
   Loaded AFTER emendata.css. Holds only what Webflow's own
   markup or style engine forces on us. Nothing here is design.
   ============================================================ */

/* --- 1. TOKEN ALIASES ----------------------------------------
   Maps the design system's variable names onto Webflow Variables so
   emendata.css works verbatim and still tracks the Variables panel.
   Declared on `body` because Webflow resolves breakpoint modes there.
   tokens.css is NOT loaded — these declarations replace it. */
body {
  --f-heading: var(--_typography---fonts--primary, "Bahnschrift", sans-serif);
  --f-body: var(--_typography---fonts--secondary, Arial, Helvetica, sans-serif);
  --f-eyebrow: var(--_typography---fonts--decorative, ui-monospace, monospace);
  --w-heading: var(--_typography---font-weight--book, 350);
  --w-body: var(--_typography---font-weight--regular, 400);
  --w-body-bold: var(--_typography---font-weight--bold, 700);
  --wdth-heading: 100%;

  --fs-hero: var(--_typography---typography--h1, 68px);
  --fs-h1: var(--_typography---typography--display-03, 56px);
  --fs-h2: var(--_typography---typography--h2, 44px);
  --fs-h3: var(--_typography---typography--h3, 34px);
  --fs-h4: var(--_typography---typography--h4, 26px);
  --fs-h5: var(--_typography---typography--h5, 22px);
  --fs-h6: var(--_typography---typography--h6, 18px);
  --fs-metric: var(--_typography---typography--metric, 140px);
  --fs-label-l: var(--_typography---body-text--label-l, 24px);
  --fs-label-m: var(--_typography---body-text--label-m, 15px);
  --fs-label-s: var(--_typography---body-text--label-s, 13px);
  --fs-body-l: var(--_typography---body-text--text-m, 18px);
  --fs-body: var(--_typography---body-text--text-xs, 16px);
  --fs-body-s: var(--_typography---body-text--text-xxs, 14px);

  --lh-hero: var(--_typography---line-height--line-height-xxs, 1);
  --lh-h2: var(--_typography---line-height--line-height-h2, 1.06);
  --lh-h4: var(--_typography---line-height--line-height-xs, 1.1);
  --lh-heading: var(--_typography---line-height--line-height-s, 1.2);
  --lh-body: var(--_typography---line-height--line-height-l, 1.4);

  --track-hero: var(--_typography---letter-spacing--letter-spacing-h1, -0.05em);
  --track-h2: var(--_typography---letter-spacing--letter-spacing-h2, -0.5px);
  --track-h4: var(--_typography---letter-spacing--letter-spacing-h4, -0.04em);
  --track-label-m: var(--_typography---letter-spacing--letter-spacing-label-m, 1px);
  --track-label-s: var(--_typography---letter-spacing--letter-spacing-label-s, 1.5px);

  --c-bg: var(--primary--bone, #f2f1eb);
  --c-white: var(--primary--white, #ffffff);
  --c-ink: var(--primary--ink, #292929);
  --c-muted: var(--secondary--gray, #6b6b6b);
  --c-accent: var(--primary--navy, #344b89);
  --c-plate: var(--secondary--plate, #efece7);
  --c-ink-60: var(--secondary--ink-60, rgba(41,41,41,.6));
  --c-ink-80: var(--secondary--ink-80, rgba(41,41,41,.8));
  --c-on-dark-70: var(--secondary--white-70, rgba(255,255,255,.7));
  --c-on-dark-80: var(--secondary--white-80, rgba(255,255,255,.8));
  --c-rule: var(--additional--rule, rgba(71,71,71,.10));
  --c-rule-tick: var(--additional--rule-tick, rgba(71,71,71,.30));
  --c-line: var(--additional--line, rgba(41,41,41,.12));
  --c-line-dark: var(--additional--line-on-dark, rgba(255,255,255,.08));
  --c-border-on-dark: var(--additional--border-on-dark, rgba(255,255,255,.4));

  --container: var(--_spacing-system---containers--base-container, 1330px);
  --container-pad: var(--_spacing-system---spacing--spacing-ml, 15px);
  --grid-gutter: var(--_spacing-system---spacing--spacing-l, 20px);
  --header-h: var(--_spacing-system---containers--header-height, 96px);
  --rule-inset: var(--_spacing-system---spacing--rule-inset, 40px);
  --section-gap: var(--_spacing-system---spacing--section-spacing, 90px);
  --gap-heading-text: var(--_spacing-system---spacing--spacing-ml, 15px);
  --gap-text-button: var(--_spacing-system---spacing--spacing-4xl, 40px);
  --gap-title-content: var(--_spacing-system---spacing--title-content-gap, 60px);

  --r-s: var(--_spacing-system---border-radius--radius-s, 6px);
  --r-m: var(--_spacing-system---border-radius--radius-m, 12px);
  --r-graphic: var(--_spacing-system---border-radius--radius-l, 22px);
  --press-depth: var(--_spacing-system---spacing--spacing-xxs, 4px);
  --press-depth-s: var(--_spacing-system---spacing--spacing-2, 2px);
  --icon-xs: var(--_spacing-system---spacing--spacing-sm, 10px);
  --icon-s: var(--_spacing-system---spacing--spacing-m, 12px);
  --icon-m: var(--_spacing-system---spacing--spacing-26, 26px);
  --icon-spot: var(--_spacing-system---spacing--spacing-68, 68px);

  --t-hover: 350ms;
  --ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
  --t-reveal: 800ms;
}

/* --- 2. Collection List must not break the grid ---------------
   Webflow wraps items in .w-dyn-list > .w-dyn-items > .w-dyn-item.
   Those wrappers sit between .cp-grid and .cp-cell, so the three
   columns land on the wrapper and every card stacks. display:contents
   removes the wrappers from layout, letting each .cp-cell become a
   grid item exactly as in the design markup. */
.cp-grid > .w-dyn-list,
.cp-grid .w-dyn-items,
.cp-grid .w-dyn-item { display: contents; }

/* --- 3. Card number stays on one line -------------------------
   Webflow Text Blocks can only be div-family, never <span>, so the
   number and slash arrive as blocks and break onto separate lines. */
.cp-cell-num, .cp-cell-index, .cp-cell-slash { display: inline; }
/* On the capability template the slash arrives wrapped in one more
   nested Text Block. A block child breaks the line no matter what the
   wrappers say, so flatten anything inside the number. */
.cp-cell-num div, .cp-cell-num span { display: inline; }

/* --- 4. Related cards number themselves -----------------------
   Collection Lists cannot number their items. The design numbers the
   related cards 01, 02, 03 in document order, not by the item's own
   Index, so a counter supplies it. */
.cpd-caps .cp-grid { counter-reset: relcap; }
.cpd-caps .cp-cell { counter-increment: relcap; }
.cpd-caps .cp-cell-index::before { content: counter(relcap, decimal-leading-zero); }

/* --- 5. Webflow's style panel has no ::marker ------------------
   Set a Custom property --bullet on any list class to recolour it. */
li::marker { color: var(--bullet, currentColor); }

/* --- 6. FAQ open/close ---------------------------------------- */
/* 2026-09-15: the answer itself animates (emendatafaqfix 1.1.0); the
   cell-height rules, cpFaqAnswerIn and the 480ms turn were removed.
   Timing lives in emendata.css. */
@media (prefers-reduced-motion: reduce) {
  .cp-faq-item[open] > .cp-faq-a { animation: none; }
  .cp-faq-tick, .cp-faq-mark { transition: none; }
}

/* --- 7. Capability grid dividers under a Collection List -------
   Every divider and tick in the design is selected with
   :nth-of-type on .cp-cell. Webflow wraps each card in its own
   .w-dyn-item, so each .cp-cell becomes an only child and every one
   of those selectors stops matching: the row divider disappears and
   the corner ticks land on the wrong cells. Re-express the same
   rules against the wrapper, which IS the repeated sibling. */

/* 3 columns (base) */
.cp-grid .w-dyn-item:nth-child(3n) .cp-cell { border-right: 0; }
.cp-grid .w-dyn-item:nth-child(n + 4) .cp-cell {
  border-top: 1px solid var(--c-line);
}
.cp-grid .w-dyn-item:not(:nth-child(3n + 1)) .cp-cell::before {
  content: none;
}
.cp-grid .w-dyn-item:nth-child(3n) .cp-cell::after {
  background-size: 2px 8px, 5px 2px;
  background-position: center, left center;
}
.cp-grid .w-dyn-item:nth-child(-n + 2) .cp-cell::after {
  background-size: 2px 5px, 8px 2px;
  background-position: center bottom, center;
}

/* 2 columns */
@media (max-width: 991px) {
  .cp-grid .w-dyn-item:nth-child(2n + 1) .cp-cell {
    border-right: 1px solid var(--c-line);
  }
  .cp-grid .w-dyn-item:nth-child(2n) .cp-cell { border-right: 0; }
  .cp-grid .w-dyn-item:nth-child(n + 3) .cp-cell {
    border-top: 1px solid var(--c-line);
  }
  .cp-grid .w-dyn-item:not(:nth-child(3n + 1)) .cp-cell::before {
    content: "";
  }
  .cp-grid .w-dyn-item:not(:nth-child(2n + 1)) .cp-cell::before {
    content: none;
  }
  .cp-grid .w-dyn-item:nth-child(2n) .cp-cell::after {
    background-size: 2px 8px, 5px 2px;
    background-position: center, left center;
  }
  .cp-grid .w-dyn-item:nth-child(2n + 1) .cp-cell::after {
    background-size: 2px 8px, 8px 2px;
    background-position: center, center;
  }
  .cp-grid .w-dyn-item:first-child .cp-cell::after {
    background-size: 2px 5px, 8px 2px;
    background-position: center bottom, center;
  }
}

/* 1 column */
@media (max-width: 767px) {
  .cp-grid .w-dyn-item:nth-child(n + 2) .cp-cell {
    border-top: 1px solid var(--c-line);
  }
  .cp-grid .w-dyn-item .cp-cell,
  .cp-grid .w-dyn-item:nth-child(2n + 1) .cp-cell { border-right: 0; }
  .cp-grid .w-dyn-item:not(:nth-child(3n + 1)) .cp-cell::before,
  .cp-grid .w-dyn-item:not(:nth-child(2n + 1)) .cp-cell::before {
    content: "";
  }
  .cp-grid .w-dyn-item .cp-cell::after {
    background-size: 2px 8px, 5px 2px;
    background-position: center, left center;
  }
}

/* --- 8. Services list arrives as CMS Rich Text ----------------
   The build is <ul class="cpd-svc-list"> with an inline <svg> mark
   in every <li>. Webflow can only bind a Rich Text field, so it
   renders <div class="cpd-svc-list w-richtext"><ul><li>…</li></ul></div>:
   the two-column grid lands on the wrapper — where the <ul> is its
   only child, so everything stacks into one half-width column — and
   the marks are gone, because CMS rich text carries no SVG.
   Move the grid onto the inner <ul> and redraw the mark on ::before:
   9x9 accent at 30% with a solid 5x5 centred inside it, which is the
   #i-service symbol exactly. */
.cpd-svc-list.w-richtext {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-auto-flow: row;
}
.cpd-svc-list.w-richtext > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  grid-column-gap: var(--grid-gutter);
  grid-row-gap: 0;
}
.cpd-svc-list.w-richtext > ul > li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 5px 5px, 9px 9px;
  background-image:
    linear-gradient(var(--c-accent), var(--c-accent)),
    linear-gradient(rgba(52, 75, 137, .3), rgba(52, 75, 137, .3));
  background-image:
    linear-gradient(var(--c-accent), var(--c-accent)),
    linear-gradient(
      color-mix(in srgb, var(--c-accent) 30%, transparent),
      color-mix(in srgb, var(--c-accent) 30%, transparent));
  transition: transform var(--t-hover) var(--ease-hover);
}
.cpd-svc-list.w-richtext > ul > li:hover::before { transform: rotate(45deg); }

@media (max-width: 767px) {
  .cpd-svc-list.w-richtext > ul {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

/* --- 9. The button component is called primary-button in Webflow ----
   The build's button is `.btn.btn-primary`; the Webflow library class is
   `primary-button`, which reproduces `.btn` exactly (measured: identical
   padding, radius, shadow, type, 198x48). What breaks is every *contextual*
   rule in the build, because they all select `.btn` — so the button loses
   its top margin and sits flush under the paragraph above it. Re-express
   those four rules against the Webflow class name. The last two are inert
   until those sections are ported; they are here so they cannot be missed. */
.cpd-hero-copy .primary-button { margin-top: var(--gap-text-button); }
.ab-team-head .primary-button { margin-top: 24px; }
.cr-intro-center .primary-button { position: relative; z-index: 1; margin-top: 40px; }
.contact-form .primary-button { grid-column: 1 / -1; justify-self: start; margin-top: 12px; }

/* --- 10. Webflow strips an <img>'s width/height ---------------------
   `set_attributes` refuses `width`/`height` on an Image element, so the
   build's `width="357" height="363"` cannot be restored. `.cpd-hero-art img`
   is sized `width:auto;height:100%`, which means it computes to 0 wide until
   the file has decoded — the art pops in and shoves nothing, but it is a
   layout shift and it hides the image from any measurement taken before
   load. Give it the build's intrinsic ratio instead. */
.cpd-hero-art img { aspect-ratio: 357 / 363; }

/* --- 11. Line heights must be UNITLESS -------------------------------
   Webflow's Line Height variables are stored in `em` (1.4em, 1.2em, …).
   On the element that also sets its own font-size an em line-height is
   identical to a ratio, so nothing looks wrong — but it INHERITS as an
   already-computed px value. `.cpd-sec-copy` is 18px and sets no
   line-height of its own, so it inherits body's 1.4em = 22.4px instead
   of 18 x 1.4 = 25.2px, and every block of body copy is a little tight.
   `update_size_variable` refuses a unitless value, so the ratio cannot be
   written into the variable; re-declare the aliases here instead. These
   are the build's own numbers, verbatim from tokens.css. */
body {
  --lh-hero: 1;
  --lh-h2: 1.06;
  --lh-h4: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.4;

  /* Same idea for the font stacks: the Webflow variables keep only the
     first family and a bare generic, which changes what the page falls
     back to if a webfont fails. Restore the build's full stacks. */
  --f-heading: "Bahnschrift", "Segoe UI", sans-serif;
  --f-body: "Arial Web", Arial, Helvetica, sans-serif;
  --f-eyebrow: "Geist Mono", ui-monospace, monospace;
}

/* --- 12. The build's <=567px band has no Webflow breakpoint ----------
   Webflow's `tiny` starts at <=479, so between 480 and 567 the site keeps
   the <=767 values while the build has already stepped down. Do not fold
   these into `tiny` — that moves the boundary. Re-assert the build's
   <=567 block here; below 480 it simply restates what tiny already sets. */
@media (max-width: 567px) {
  body {
    --fs-hero: 36px;
    --fs-h1: 36px;
    --fs-h2: 32px;
    --gap-title-content: 40px;
  }
}

/* --- 13. Logo dimensions ---------------------------------------------
   Webflow strips an <img>'s width/height, so both logos lose their
   intrinsic size. The header logo was rebuilt with a CSS height of 28px
   instead of the build's 31px, which makes it ~10% small on every page;
   the footer logo is `width:auto;height:31px` and collapses to 0 wide
   until the file decodes. Restore the build's numbers and give the
   footer mark its ratio so it reserves the right box before load. */
.foot-logo { aspect-ratio: 203 / 31; }
/* 2026-09-11: the designer's logo ladder (28 / 26 / 24 / 22px tall) for
   BOTH logos, header and burger menu, in both header components (Header,
   Simple Header), so the logo does not jump when the menu opens. */
.header-logo img, .menu-logo img { width: auto; height: 28px; }
@media (max-width: 991px) { .header-logo img, .menu-logo img { height: 26px; } }
@media (max-width: 767px) { .header-logo img, .menu-logo img { height: 24px; } }
@media (max-width: 479px) { .header-logo img, .menu-logo img { height: 22px; } }

/* --- 14. Case study body lists arrive as CMS Rich Text ----------------
   The build's Approach list is <ol class="csd-list"> and Key Expertise is
   <ul class="csd-bullets">; both carry their indent, row gap, size and the
   accent marker on the class. Bound as Rich Text the class cannot reach the
   list, so re-express both against the wrapper: every <ol> inside .csd-rt is
   the numbered list, every <ul> the bulleted one. Numbers verbatim from
   sections.css. */
.csd-rt ol,
.csd-rt ul {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  max-width: 720px;
}
.csd-rt ol {
  margin-top: 20px;
  padding-left: 22px;
  grid-row-gap: 14px;
}
.csd-rt ul {
  margin-top: 16px;
  padding-left: 20px;
  grid-row-gap: 10px;
}
.csd-rt ol li,
.csd-rt ul li {
  padding-left: 6px;
  font-size: var(--fs-body-l);
}
.csd-rt ol li { color: var(--c-ink); }
.csd-rt ul li { color: var(--c-muted); }
.csd-rt ul li::marker { color: var(--c-accent); }

/* --- 15. An HtmlEmbed adds a wrapper the flex layout must not see -----
   Webflow wraps every HtmlEmbed in <div class="w-embed">. Where the build
   puts the embedded element straight into a flex container — the eyebrow
   in a section headline, the arrow in a card's "Read more" — the wrapper
   becomes the flex item instead. It is a block with the parent's 22.4px
   line-height, so the eyebrow's row grows by 4.4px, and the arrow sits on
   a text baseline inside it, which drops "Read more" and makes every card
   12px taller. display:contents removes the wrapper from layout, so the
   embedded element is the flex item exactly as in the build. */
.csd-related-headline > .w-embed,
.cs-grid-headline > .w-embed,
.cs-card-more > .w-embed { display: contents; }
/* Webflow's .w-embed carries a clearfix (::before/::after, display:table).
   display:contents keeps pseudo-elements, so without this they become two
   empty flex items and add two gaps: +32px in the headline column, +20px
   width and a 3px baseline shift in "Read more". */
.csd-related-headline > .w-embed::before,
.csd-related-headline > .w-embed::after,
.cs-grid-headline > .w-embed::before,
.cs-grid-headline > .w-embed::after,
.cs-card-more > .w-embed::before,
.cs-card-more > .w-embed::after { content: none; display: none; }

/* --- 16. Case study grid under a Collection List ---------------------
   The build places cards with `.cs-card:nth-child(…) { grid-column }`:
   3 across, 2 across at <=991, 1 across at <=767. Under a Collection List
   each card is the only child of its .w-dyn-item, and the wrapper — which
   carries a native `span 4` at every width — is the real grid item. So on
   tablet and mobile the site kept three narrow cards (201px wide, 460px
   tall at 768) on /case-studies and in every case study's related
   section. Re-express the build's placement against the wrapper. */
@media (max-width: 991px) {
  .cs-grid > .cs-grid-item:nth-child(2n + 1) { grid-column: 1 / 7; }
  .cs-grid > .cs-grid-item:nth-child(2n) { grid-column: 7 / 13; }
}
@media (max-width: 767px) {
  .cs-grid > .cs-grid-item,
  .cs-grid > .cs-grid-item:nth-child(2n + 1),
  .cs-grid > .cs-grid-item:nth-child(2n) { grid-column: 1 / -1; }
}

/* --- 17. /case-studies hero art collapses to 0 below 992 -------------
   The build's <img> carries width="439" height="296"; Webflow strips
   both and adds loading="lazy". Below 992 the build sizes the art as
   `width:100%` inside a figure that is shrink-to-fit (justify-self), so
   with no intrinsic size the figure shrinks to its padding, the image
   resolves to 0x0, and a zero-area lazy image is never fetched: the
   illustration simply disappears on tablet and mobile. Give the image
   the build's intrinsic width as an explicit length, capped by its box,
   which resolves to exactly the same size once the file is there. */
.cs-hero-art img { aspect-ratio: 439 / 296; }
@media (max-width: 991px) {
  .cs-hero-art img {
    width: 439px;
    max-width: 100%;
    height: auto;
  }
}

/* ---------- 18. Balanced 2-column grids at 768-991 (2026-09-11) ----------
   Designer: no empty cell next to the last card. Collection items are
   wrapped (.cs-grid-item / .w-dyn-item), so the build's
   .cs-card:last-child:nth-child(odd) and .cp-cell:last-child rules cannot
   match here; target the wrappers instead. */
@media (min-width: 768px) and (max-width: 991px) {
  .cs-grid-item:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
  .cp-grid .w-dyn-item:last-child:nth-child(odd) .cp-cell { grid-column: 1 / -1; border-right: 0; }
}

/* ---------- 19. Rich Text / service list reveal from the first frame (2026-09-11) ----------
   Runtime §0b adds data-reveal to these children from the footer script,
   i.e. after the first paint. Anything already on screen was painted at
   full opacity and then "revealed" with no visible animation (designer:
   case study Challenge paragraph had no load animation). Hide them from
   the first frame instead; the [data-reveal] transition from reveal.css
   still runs when main.js adds .is-revealed. No transition is declared
   here, so the service-list hover transitions stay untouched. */
.csd-rt > *:not(.is-revealed),
.cpd-svc-list > li:not(.is-revealed),
.cpd-svc-list > ul > li:not(.is-revealed),
.cpd-svc-list > ol > li:not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, -15px, 0);
}
@media (prefers-reduced-motion: reduce) {
  .csd-rt > *:not(.is-revealed),
  .cpd-svc-list > li:not(.is-revealed),
  .cpd-svc-list > ul > li:not(.is-revealed),
  .cpd-svc-list > ol > li:not(.is-revealed) { opacity: 1; transform: none; }
}

/* ---------- 20. Text-to-button gap 30px from 991 down (2026-09-11) ----------
   Designer: unify the gap between copy and its button to 30px on tablet
   and mobile. The token is aliased above; override it here so every rule
   that uses var(--gap-text-button) follows. */
@media (max-width: 991px) {
  :root, body { --gap-text-button: 30px; }
}

/* ---------- 21. Copy-to-button gaps that do not read the token (2026-09-11) ----------
   Native Webflow styles bind these gaps to the 4XL variable directly (or
   raw 40px), so the §20 token override cannot reach them. */
@media (max-width: 991px) {
  .hero-copy, .cap-head, .careers-copy { grid-row-gap: 30px; row-gap: 30px; }
  .cr-intro-center .primary-button, .cr-intro-center .btn { margin-top: 30px; }
  /* About team CTA: 16px head row-gap + 14px = 30px */
  .ab-team-head .primary-button { margin-top: 14px; }
}