/* =============================================================================
   Our Work — ported from two Figma frames, one per breakpoint:

     · desktop — file uH7Mitm4GF53rGZGa6URrr, page "Our Work - Desktop [Nacho]",
       frame 961:4985 (1440x4784). Ported 2026-09-10.
     · mobile  — file v4zuHnfQeDWmJsqAyNqiDq, page "Our Work — Mobile",
       frame 1795:106 (392x4776). Ported 2026-09-14.

   Every selector is prefixed .page-ourwork so nothing leaks to another page.
   Sections are numbered to match the numbered comments in our-work/index.html.

   ON HARD-CODED VALUES. Same split as pages/home.css, for the same reason:

     · colours and font sizes are tokens, with no exceptions. Three colours and
       three type steps the desktop frame needed were added to tokens.css rather
       than written here, and the mobile frame needed one more (--grid-tile-sm);
       see the notes there.

     · layout offsets are literal pixels. These are pixel-accurate ports of
       frames whose spacing does not sit on a 4px scale — 46/43/51/70px card
       padding and a 91px media gap on desktop, 26.5/29.5px padding and a 21px
       media gap on mobile. Minting a token used once each would document
       nothing and hide the measurement. Where a value IS structural — band
       width, radii, grid tile, header height — it is a token.

   WHAT IS DESIGNED AND WHAT IS NOT. Two frames exist, at 1440 and at 392, and
   nothing in between. So:

     · at 1100 and up      the desktop frame.
     · 768 .. 1099         DERIVED. One block, below, that stacks the case cards
                           and steps the quote grid down. It exists so a tablet
                           window is usable rather than horizontally scrolling,
                           and it carries no authority. When a tablet frame
                           arrives, re-derive it rather than extending it.
     · 767 and below       the mobile frame.

   The shared header, footer and chat teaser have their own responsive rules in
   base.css and components/, so they behave correctly at every width regardless.

   WHAT IS NOT IN THIS FILE. "What our clients say" is
   components/quote-carousel.css — it stops being a grid of flip cards and
   becomes a swipeable strip of stacked panels on mobile, which is a change of
   component rather than a change of width, and two pages could want it. All
   that is left here is the section's own framing.
   ========================================================================== */

.page-ourwork {
  font: var(--body-l);
  color: var(--color-carbon);
  background: var(--color-cream);
}

.page-ourwork .site-footer {
  margin-top: 0;
}

/* The content band. Every section on the desktop frame spans roughly
   x 187..1246, which is narrower than the home page's --content-max: this page
   is a reading column, not a full-bleed composition. The hero is 15px wider
   because its two photos overhang; both are centred here.

   Local to the page rather than a token, because one frame is not evidence of a
   site-wide measure. If a second designed page lands on 1054, promote it. */
.page-ourwork {
  --ow-band: 1054px;
  --ow-band-hero: 1069px;

  /* The lattice, as four values so the mobile block can restate it without
     repeating the rule. See the block itself for what each one does. */
  --ow-lattice-image: url(../../media/our-work/grid-tile.svg);
  --ow-lattice-tile: var(--grid-tile);
  --ow-lattice-offset: var(--header-offset);
  --ow-lattice-tail: 101px;
}

/* No horizontal padding at the design width: the band's own 193px margins are
   the gutter. Padding only appears in the narrow blocks below, where the band
   goes to 100%. */
.page-ourwork .ourwork-hero__inner,
.page-ourwork .ourwork-marquee__eyebrow,
.page-ourwork .ourwork-cases,
.page-ourwork .ourwork-quotes {
  max-width: var(--ow-band);
  margin-inline: auto;
}

.page-ourwork .ourwork-hero__inner {
  max-width: var(--ow-band-hero);
}

/* Section eyebrows: Label/Intermedio, orange, centred. This is the token that
   did not exist before this page — Figma names the style and nothing referenced
   it. `.eyebrow` in base.css already supplies the family, weight, uppercasing
   and tracking; only size and colour are set here. Brackets are content.

   The mobile frame keeps all three at the same 20px — measured off a 26px line
   pitch on the two that wrap — so there is no size override further down. */
.page-ourwork .ourwork-marquee__eyebrow,
.page-ourwork .ourwork-cases__eyebrow,
.page-ourwork .ourwork-quotes__eyebrow {
  /* margin-block, not margin: the marquee eyebrow is a band element and needs
     to keep its auto inline margins. */
  margin-block: 0;
  font: var(--label-int);
  letter-spacing: var(--ls-label);
  color: var(--color-brand);
  text-align: center;
}

/* --- The decorative lattice ---------------------------------------------- */
/* A full uniform grid of rounded squares running behind the header and the
   hero, then nothing. In Figma it is 650 individual rectangles on desktop
   (node 961:4986) and 104 on mobile (node 1815:1208); here it is one tiled SVG,
   because 650 elements would buy nothing.

   ITS HEIGHT IS DERIVED FROM THE HERO, not fixed, and that is the whole point
   of this rule. It used to be a flat 683px — the desktop frame's number — which
   was correct at exactly one viewport width and wrong everywhere else: as soon
   as the hero stacked and grew taller than 683 the lattice stopped part-way up
   the headline, which reads as a rendering fault rather than a design. The
   frames agree on the shape of the rule rather than on the number: the lattice
   ends a fixed distance below the hero, 101px on desktop and 74px on mobile.
   So that distance is what is written down, and the height follows the content.

   round() is what keeps it landing on a tile boundary, so the bottom edge is
   always a row of whole squares rather than a row sliced through the middle. It
   rounds to nearest, so the tail above is a target and not a floor. The plain
   calc() before it is the fallback for a browser without round(): the same
   height, un-snapped.

   Two consequences of the change worth knowing, both deliberate. The desktop
   lattice is now 680 rather than 683, and its phase is 0 rather than the -10px
   that used to reproduce Figma's fractional grid origin — 10px of vertical
   offset on a decorative lattice that sits under a fixed header, in exchange
   for a bottom edge that is never cut at any width. */
.page-ourwork .ourwork-top {
  position: relative;
}

.page-ourwork .ourwork-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* <body> reserves the fixed header's height; this pulls the lattice back up
     under it. The mobile block restates the offset because the header is
     shorter there — without that the lattice starts 35px above the page. */
  top: calc(-1 * var(--ow-lattice-offset));
  height: calc(100% + var(--ow-lattice-offset) + var(--ow-lattice-tail));
  height: round(
    calc(100% + var(--ow-lattice-offset) + var(--ow-lattice-tail)),
    var(--ow-lattice-tile)
  );
  background-image: var(--ow-lattice-image);
  background-size: var(--ow-lattice-tile) var(--ow-lattice-tile);
  z-index: -1;
  pointer-events: none;
}

/* --- 1. Hero ------------------------------------------------------------- */

.page-ourwork .ourwork-hero {
  /* Frame: header 39..126, hero art starts at 222. body already reserves
     --header-offset (114), so 108 lands the art on 222. */
  padding: 108px 0 0;
}

.page-ourwork .ourwork-hero__inner {
  display: grid;
  grid-template-columns: 465px 1fr;
  gap: 50px;
  align-items: center;
}

/* The two photos overlap, so the column is a positioning context rather than a
   flow: 360 square at the right of the column, 207 square overlapping its left
   edge and dropped 76px. */
.page-ourwork .ourwork-hero__art {
  position: relative;
  height: 360px;
}

.page-ourwork .ourwork-hero__photo {
  position: absolute;
  border-radius: 30px;
  object-fit: cover;
  /* Figma draws a 20%-black rectangle behind each photo carrying this shadow,
     which is how Figma expresses a drop shadow on a masked image. */
  box-shadow: 0 4px 4px color-mix(in srgb, var(--color-black) 20%, transparent);
}

.page-ourwork .ourwork-hero__photo--back {
  top: 0;
  right: 0;
  width: 360px;
  height: 360px;
}

.page-ourwork .ourwork-hero__photo--front {
  top: 76px;
  left: 0;
  width: 207px;
  height: 207px;
}

/* Display/L. The only place on the site that uses it — the home hero is 64px on
   a documented exception, and no other page has a display heading this size. */
.page-ourwork .ourwork-hero__title {
  margin: 0;
  max-width: 534px;
  font: var(--display-l);
  letter-spacing: var(--ls-display);
  color: var(--color-black);
}

.page-ourwork .ourwork-hero__title-accent {
  color: var(--color-brand);
}

/* --- 2. Companies we've worked with -------------------------------------- */

.page-ourwork .ourwork-marquee {
  /* The shared component — components/marquee.css, at the site's one speed.
     Figma offsets the second row by 1092px of a 2483px strip: 44% of the
     loop, which at 32s is -14.07s. */
  --marquee-offset: -14.07s;
  --marquee-row-gap: 12px;
  padding: 123px 0 0;
}

.page-ourwork .ourwork-marquee__viewport {
  margin-top: 18px;
}

/* --- 3. Case studies ----------------------------------------------------- */

.page-ourwork .ourwork-cases {
  padding: 62px 0 0;
}

.page-ourwork .ourwork-cases__list {
  margin-top: 41px;
  display: flex;
  flex-direction: column;
  gap: 40.7px;
}

.page-ourwork .case-card {
  display: flex;
  align-items: flex-end;
  gap: 91px;
  min-height: 496.5px;
  padding: 46px 43px 51px 70px;
  background: var(--color-black);
  border: 1.5px solid var(--color-sand);
  border-radius: 30px;
  box-shadow: var(--shadow-card);
}

/* One geometry for all four cards, which the frame does not have: its auto-layout
   hugged each card's own copy, so the media runs 400-445 wide and the text/media
   gap runs 46-91. Averaging to the widest card's gap and the commonest media
   width makes the list read as a list. The mobile frame does the same thing at
   its own size — 321 and 323 wide for the same four cards — and gets the same
   treatment. */
.page-ourwork .case-card__body {
  flex: 1;
  min-width: 0;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  gap: 52px;
}

.page-ourwork .case-card__head {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.page-ourwork .case-card__title {
  margin: 0;
  /* Display/S. Composed here rather than through --display-s, which resolves to
     30px — see the type note in tokens.css. */
  font: 700 var(--text-display-s) / 1 var(--font-sans);
  letter-spacing: var(--ls-display);
  color: var(--color-cream);
}

.page-ourwork .case-card__labels {
  margin: 0;
  font: var(--label-m);
  letter-spacing: var(--ls-label);
  color: var(--color-sand-soft);
}

.page-ourwork .case-card__lead {
  margin: 0;
  max-width: 425px;
  font: 400 var(--text-base) / 1.35 var(--font-sans);
  color: var(--color-cream);
}

/* Only two of the four cards carry a stat, so the CTA is pushed to the bottom
   rather than positioned after it — a card without a stat then keeps the same
   overall height and the same baseline for its button. */
.page-ourwork .case-card__stat {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  color: var(--color-brand);
}

.page-ourwork .case-card__stat-value {
  font: var(--display-xl);
  letter-spacing: var(--ls-display);
}

.page-ourwork .case-card__stat-label {
  max-width: 170px;
  font: var(--label-int);
  letter-spacing: var(--ls-label);
  /* Figma sets this two lines high ("APPS / UPDATED"); the max-width does the
     breaking so the copy stays one string in the data file. */
  padding-bottom: 0.35em;
}

/* UNUSED since 2026-09-25: the "Read Case Study" button was removed until
   case-study pages exist. Kept on purpose, for when it comes back. */
.page-ourwork .case-card__cta {
  margin-top: auto;
  align-self: flex-start;
  /* Figma: 32px horizontal padding, which is what gives the button its width. */
  padding-inline: var(--space-8);
}

.page-ourwork .case-card__media {
  flex: none;
  width: 400px;
  height: 400px;
}

.page-ourwork .case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}

/* --- 4. What our clients say --------------------------------------------- */
/* The tiles, the grid and the mobile carousel are all
   components/quote-carousel.css. This is only the section around them. */

.page-ourwork .ourwork-quotes {
  padding: 66px 0 0;
}

/* --- 5. Final CTA -------------------------------------------------------- */

/* The band is components/final-cta.css; this page owns only the space above
   it. Bottom 0: the contact panel follows and supplies the gap to the footer. */
.page-ourwork .final-cta {
  padding-top: 152px;
}

/* =============================================================================
   768 .. 1099 — DERIVED, NOT DESIGNED

   No frame exists between 392 and 1440. Everything in this block is here so a
   window in that range is usable instead of scrolling horizontally, and nothing
   in it should be cited as the design. The mobile block below IS designed and
   overrides whatever it needs to.
   ========================================================================== */

@media (max-width: 1100px) {
  .page-ourwork {
    --ow-band: 100%;
    --ow-band-hero: 100%;
  }

  .page-ourwork .ourwork-hero__inner,
  .page-ourwork .ourwork-marquee__eyebrow,
  .page-ourwork .ourwork-cases,
  .page-ourwork .ourwork-quotes {
    padding-inline: var(--space-6);
  }

  /* Hero: art above the title, centred on the page (no designed frame here). */
  .page-ourwork .ourwork-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Explicit width, not max-width: the photos inside are absolutely positioned,
     so the block has no in-flow content to give it a width — it stretched to the
     column before. With a definite width the auto margins can centre it (a bare
     max-width + auto margins collapses it to zero). */
  .page-ourwork .ourwork-hero__art {
    width: min(465px, 100%);
    margin-inline: auto;
  }

  .page-ourwork .ourwork-hero__title {
    max-width: none;
    font-size: var(--text-display-sm-1);
    text-align: center;
  }

  /* Case studies: media above the copy, and the fixed heights come off so the
     card can grow with its text. */
  .page-ourwork .case-card {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 40px;
    min-height: 0;
    padding: 40px;
  }

  .page-ourwork .case-card__body,
  .page-ourwork .case-card__media {
    min-height: 0;
    width: auto;
    height: auto;
  }

  .page-ourwork .case-card__media {
    aspect-ratio: 1;
    max-width: 400px;
  }

  .page-ourwork .case-card__lead {
    max-width: none;
  }

  /* UNUSED since 2026-09-25: the "Read Case Study" button was removed until
     case-study pages exist. Kept on purpose, for when it comes back. */
  .page-ourwork .case-card__cta {
    margin-top: 0;
  }

  /* Quotes: two columns. That rule moved to components/quote-carousel.css with
     the rest of the section — the grid is the carousel's track now, and it
     steps down to two columns at this same 1100 cut. */

  /* Tablet spacing, per the tablet frame (Francisco, 2026-09-24): 178px top
     lands the band 154px below the quote carousel's swipe hint, which overlaps
     the section top by 24px; the collapsed panel's 154px margin is the gap
     down to the footer. The band itself is components/final-cta.css. */
  .page-ourwork .final-cta {
    padding-top: 178px;
  }

  .page-ourwork .contact-modal:where(:not(.is-overlay)) {
    margin-bottom: 154px;
  }
}

/* =============================================================================
   767 and below — DESIGNED.
   Figma v4zuHnfQeDWmJsqAyNqiDq, page "Our Work — Mobile", frame 1795:106.

   Measured off that frame at 392. Where a value is expressed as a min() rather
   than the frame's literal, the first argument reproduces the frame at 392 and
   the cap is what stops a 767px window rendering a 700px-wide card — the frame
   says nothing about that width, so the cap is the one derived number in here
   and is marked where it appears.

   Type, all measured off the frame's own render rather than read from a style,
   because this file defines no text styles beyond the seven the desktop frame
   uses: hero 32/1.0, case title 24, case labels 11, case body 14/1.35,
   stat 34, section eyebrows 20 (unchanged from desktop), CTA title 20.
   ========================================================================== */

@media (max-width: 767px) {
  .page-ourwork {
    /* The lattice, restated for the mobile frame: eight 49.11px tiles across
       the 392 viewport rather than 68px ones, the shorter header to pull back
       under, and a 74px tail below the hero instead of 101. */
    --ow-lattice-image: url(../../media/our-work/grid-tile-sm.svg);
    --ow-lattice-tile: var(--grid-tile-sm);
    --ow-lattice-offset: var(--header-offset-sm);
    --ow-lattice-tail: 74px;

    /* Thirteen logos, all reduced by the same factor. Derived from three
       independent marks on the frame — till 43.96 -> 28, Forrester 135.8 -> 85,
       BBVA 100.14 -> 63 — which agree to within half a percent. */
    --marquee-logo-scale: 0.63;
  }

  /* The sections stop padding themselves and hand that job to the things
     inside them, because the frame gives each band a different inset: 25px for
     the case studies, 47 for a quote slide, 54 for the CTA. */
  .page-ourwork .ourwork-cases,
  .page-ourwork .ourwork-quotes {
    padding-inline: 0;
  }

  /* The frame wraps two of the three eyebrows onto two lines — "[COMPANIES
     WE'VE / WORKED WITH]" and "[WHAT OUR / CLIENTS SAY]" — and leaves "[CASE
     STUDIES]" on one. That is a measure, not a coincidence: the two long ones
     are drawn 229 and 209 wide. 232 is the only value that puts all three
     breaks where the frame does — "[COMPANIES WE'VE" needs 228 and "[WHAT OUR
     CLIENTS" must not fit at 239. Measured in a browser with the real
     Eurostile, because uppercasing happens after the font is chosen and a
     width computed from the source string is 10% short. */
  .page-ourwork .ourwork-marquee__eyebrow,
  .page-ourwork .ourwork-cases__eyebrow,
  .page-ourwork .ourwork-quotes__eyebrow {
    max-width: min(232px, 100% - 50px);
    margin-inline: auto;
    padding-inline: 0;
  }

  /* --- 1. Hero ---------------------------------------------------------- */
  /* Frame: header 18..79, art 129..362, title 398..565. */

  .page-ourwork .ourwork-hero {
    padding-top: 50px;
  }

  .page-ourwork .ourwork-hero__inner {
    padding-inline: 0;
    gap: 36px;
  }

  /* The photos stay overlapped, but everything inside is a percentage of the
     art block so the composition holds its shape at any width instead of
     breaking apart at one. At 392 the arithmetic lands on the frame: 309 wide,
     a 259x233 photo at the right and a 140.5 square at the left, dropped 50. */
  .page-ourwork .ourwork-hero__art {
    width: min(100% - 46px, 309px);
    max-width: none;
    height: auto;
    aspect-ratio: 309 / 233;
    margin-inline: auto;
  }

  .page-ourwork .ourwork-hero__photo {
    border-radius: var(--radius-card-sm);
  }

  .page-ourwork .ourwork-hero__photo--back {
    width: 83.8%;
    height: 100%;
  }

  .page-ourwork .ourwork-hero__photo--front {
    top: 21.3%;
    width: 45.5%;
    height: auto;
    aspect-ratio: 1;
  }

  /* Centred here, left-aligned on desktop. The max-width is the frame's own
     text column, which is what puts the line breaks where it draws them. */
  .page-ourwork .ourwork-hero__title {
    max-width: 262px;
    margin-inline: auto;
    font-size: var(--text-display-s);
    line-height: 1;
    text-align: center;
  }

  /* --- 2. Companies we've worked with ------------------------------------ */

  /* 106 is the frame's gap from the hero's bottom to this eyebrow. The 7 on top
     of it is the difference between five 32px line boxes (160) and the frame's
     text node (166.67) — Figma leaves leading below the last line that a
     line-height of 1 does not. Added here rather than as a line-height, because
     the rendered line pitch on the frame IS 32 and changing it would move four
     line breaks to fix one gap. */
  .page-ourwork .ourwork-marquee {
    padding-top: 113px;
  }

  .page-ourwork .ourwork-marquee__viewport {
    --marquee-gap: 32px;
    margin-top: 12px;
  }

  /* --- 3. Case studies --------------------------------------------------- */

  /* 50 on the frame, plus 11 for the marquee above: a row here is as tall as its
     tallest logo (42.3 with the scale applied) and the frame's row frames are
     48.18 and 47.33, which is height the strip itself does not use. */
  .page-ourwork .ourwork-cases {
    padding-top: 61px;
  }

  /* 322 is the frame's card width; the 520 cap is DERIVED — it is what stops a
     767px window rendering one 697px-wide card, which the frame says nothing
     about. */
  .page-ourwork .ourwork-cases__list {
    max-width: min(100% - 70px, 520px);
    margin-top: 12px;
    margin-inline: auto;
    gap: 15px;
  }

  /* No shadow at this width. The frame's render goes from the card's sand
     border straight to page cream in a single antialiasing pixel — sampled 14px
     down from the first card's bottom edge and again in the 15px gap between
     cards, both clean. The desktop frame does cast one, so this is a width
     difference rather than a correction to the desktop port. */
  .page-ourwork .case-card {
    gap: 21px;
    padding: 25px 28px;
    /* 30, not the 26 card radius: this frame draws the mobile case card at 30
       and its photo at 20 (Figma 85:1953 / 85:1955). Literal like blog.css's
       own 30, rather than minting a token used twice. */
    border-radius: 30px;
    box-shadow: none;
  }

  /* The frame's own gaps, which only a flow layout can express: 12 from the
     copy to the stat and 29 from the stat to the button on the two cards that
     have one, 22 straight from the copy to the button on the two that do not.
     Hence gap: 0 and three margins rather than one flex gap. */
  .page-ourwork .case-card__body {
    gap: 0;
  }

  .page-ourwork .case-card__head {
    gap: 9px;
  }

  .page-ourwork .case-card__media {
    aspect-ratio: 264 / 190;
    max-width: none;
  }

  .page-ourwork .case-card__media img {
    border-radius: 20px;
  }

  /* Body/L — a NAMED style on the frame (20/1.1, no tracking), not a guess.
     This used to be --text-xl (24) with the display tracking, fitted off a PNG
     render back when the Figma MCP was rate-limited; the frame's own text box
     is 22 tall, which is 20 x 1.1 and confirms the style. */
  .page-ourwork .case-card__title {
    font-size: var(--text-lg);
    line-height: 1.1;
    letter-spacing: normal;
  }

  .page-ourwork .case-card__labels {
    font-size: var(--text-4xs);
    line-height: 1.2; /* Label/XS */
  }

  .page-ourwork .case-card__lead {
    font-size: var(--text-sm);
  }

  .page-ourwork .case-card__stat {
    margin-top: 12px;
  }

  /* Display/S (32) and Label/XS (10), both named styles on the frame. Were 34
     and 11 from the same PNG fitting as the title; the frame's boxes (33.64 for
     the value, 24 for the two-line label) corroborate 32 and 10. */
  .page-ourwork .case-card__stat-value {
    font-size: var(--text-display-s);
  }

  .page-ourwork .case-card__stat-label {
    max-width: 100px;
    font-size: var(--text-4xs);
    line-height: 1.2;
  }

  /* UNUSED since 2026-09-25: the "Read Case Study" button was removed until
     case-study pages exist. Kept on purpose, for when it comes back. */
  /* The frame's button is 33 tall with the full label tracking; the shared .btn
     renders 35.9 at 0.12em. Page-scoped, like the blog card's, rather than
     touching .btn under every page. */
  .page-ourwork .case-card__cta {
    margin-top: 22px;
    height: 33px;
    letter-spacing: var(--ls-label);
  }

  .page-ourwork .case-card__stat + .case-card__cta {
    margin-top: 29px;
  }

  /* --- 4. What our clients say ------------------------------------------- */
  /* The carousel itself is components/quote-carousel.css. */

  .page-ourwork .ourwork-quotes {
    padding-top: 54px;
  }

  /* --- Final CTA --------------------------------------------------------- */
  /* The 284px mobile band is components/final-cta.css. Kept from frame 85:1913:
     it sits 82px below the quote carousel's swipe hint (106px section top). */
  .page-ourwork .final-cta {
    padding-top: 106px;
  }

  /* Footer social row (mobile frame): the icons sit on the page cream in
     sand-soft, no grid, 40px clear of the CTA band above and the black footer
     below. The row's background is transparent and the footer's black is painted
     from below the row with a hard-stop gradient — an opaque cream band stacked
     on the cream page left a hairline seam at its top edge. The stop is the row's
     height: 40px padding each side plus the 27px icon. */
  .page-ourwork .site-footer {
    background: linear-gradient(
      to bottom,
      transparent calc(2 * 40px + 27px),
      var(--color-black) calc(2 * 40px + 27px)
    );
  }

  .page-ourwork .site-footer__social {
    background: none;
    padding: 40px 37px;
  }

  .page-ourwork .site-footer__social a {
    background-color: var(--color-sand-soft);
  }

  /* --- Mr. Orange --------------------------------------------------------- */
  /* The frame (node 1821:2339) draws the chat teaser as a 56px black disc with
     the face inside and no speech bubble — sensible at 392, where the bubble was
     178px of the screen parked over the content, saying something nothing can
     answer yet.

     PAGE-SCOPED, and deliberately not in components/chat-teaser.css even though
     that is where the widget lives and where its other breakpoint rules are. The
     component is shared with the home page, whose own mobile frame nobody has
     checked, and putting this there would restyle the home page for a decision
     taken about this one. The component keeps owning the widget's size and
     position everywhere else; this overrides it here and nowhere else.

     Sized as the disc with object-fit rather than as the artwork with padding,
     so the box is square to the pixel — the artwork is 39.26 x 31.79 and letting
     it drive both axes leaves the circle half a pixel taller than it is wide.
     8 and 12 are the frame's own insets. */
  .page-ourwork .chat-teaser__avatar {
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    padding: 12px 8px;
    margin: 0;
    object-fit: contain;
    background: var(--color-black);
    border-radius: var(--radius-pill);
  }

  .page-ourwork .chat-teaser__bubble {
    display: none;
  }
}