/* =====================================================================
   MY WORK / PROJECTS  -  redesigned cards and grid
   ---------------------------------------------------------------------
   This file ADDS styling for the "My Work" section. It does not change
   any existing Webflow styles. All class names start with "jw-" so they
   will not clash with the rest of the site.

   Design direction (from Refero + Mobbin research):
   - Editorial, gallery-style cards on a light canvas.
   - Soft rounded corners, hairline border, gentle lift + shadow on hover.
   - Image area zooms slightly on hover with a "View project" affordance.
   - Year shown as a small pill on the image; role shown as tag chips.
   - Missing images show a tasteful colored gradient with initials,
     instead of a flat gray box.
   - All motion respects "reduce motion" and cards are ALWAYS visible.
   ===================================================================== */

/* ---- About me section: match eyebrow + paragraph size/weight ----------
   Targets ONLY the two elements that carry the dedicated "about-me-line"
   class on the homepage (the "About me" eyebrow and the "And coffee..."
   paragraph). It does not touch the shared .uppercase-text / .paragraph-1
   base rules, so headings/paragraphs elsewhere are unaffected. */
.uppercase-text.about-me-line,
.paragraph-1._2.cnt.about-me-line {
  font-size: 20px;
  font-weight: 400;
}

/* ---- Hide hero "Hey, I'm Jalissa" eyebrow on mobile -------------------
   Targets ONLY the homepage hero greeting via its dedicated class, so the
   shared .uppercase-text rule (used by other eyebrows site-wide) is left
   untouched. Hidden at the mobile breakpoints (767px and below). */
@media screen and (max-width: 767px) {
  .jw-hero-eyebrow {
    display: none;
  }
}

/* ---- Hero Stake mark above the title on very small phones -------------
   On screens narrower than 450px, move the spinning Stake logo mark (the
   bolt.png shown via .text-span) onto its own line ABOVE the hero title.
   Scoped to the homepage hero via dedicated jw- classes so the shared
   .title-1 / .text-span styles used elsewhere are untouched. Only the
   visual order changes, so the h1's existing opacity fade-in still runs. */
@media screen and (max-width: 449px) {
  .jw-hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .jw-hero-title .jw-hero-mark {
    order: -1;
    margin-bottom: 6px;
  }
}

/* ---- Hero title -> subhead gap = 16px on mobile ----------------------
   On mobile the only in-flow space between the hero title and the subhead
   is the .margin-30px wrapper's 30px top margin (the title has no bottom
   margin and the <p> subhead has no top margin). Scoped to the top hero
   only (.max-hero.more-top + the unique .jw-hero-title) so the other
   .max-hero._2 sections on this page and subheads/margins on other pages
   are untouched. Competing margins are zeroed so the total is exactly
   16px (not 16px on top of an existing margin). */
@media screen and (max-width: 767px) {
  .jw-hero-title {
    margin-bottom: 0;
  }
  .max-hero.more-top .margin-30px.centre {
    margin-top: 16px;
  }
  .max-hero.more-top .margin-30px.centre .subhead {
    margin-top: 0;
  }
}

/* ---- Performance card screenshot --------------------------------------
   The "Performance chart" card centres a portrait phone screenshot, with the
   label sitting to its right. Scaled to 540px tall with a 24px
   corner radius; width is automatic so the phone keeps its true proportions
   (object-fit: contain prevents any cropping/distortion). Absolutely
   positioned to match the other recents cards' visuals. */
.recents-performance-img {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  height: 540px;
  width: auto;
  object-fit: contain;
  border-radius: 24px;
  transform: translate(-50%, -50%);
}

/* ---- Recents gallery: mobile layout -----------------------------------
   On phones every card in the recents gallery (Performance chart, SpaceX IPO,
   Trade activity, Hide balances) gets one consistent treatment: full-bleed
   edge-to-edge, its label pulled to the TOP with a 12px gap above the asset,
   and the cards stacked flush against one another.

   Why each piece:
   - Full bleed: cards are normally min(900px, 92vw) centred in the gallery,
     leaving a ~4vw gutter each side. width:100vw + symmetric negative margins
     (calc(50% - 50vw)) break each card out to the screen edges regardless of
     parent padding; border-radius:0 squares the corners.
   - Label on top: the asset/image comes BEFORE the label in the DOM for every
     card, so order:-1 pulls the label to the top of the flex column and
     margin-bottom:12px sets the gap between the label and the asset.
   - Stacked flow: the assets are absolutely positioned on desktop, so they are
     dropped back into normal flow to sit below the label without overlap. The
     .recents-shot figures stay position:relative so they remain the containing
     block for their absolutely-positioned (scaled) <iframe> embeds.
   - Flush stacking: the gallery's inter-card gap and vertical padding are
     removed so the card backgrounds sit directly against one another. */
@media screen and (max-width: 767px) {
  .recents-gallery {
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .recents-gallery .recents-card {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Hug content: drop the fixed 640px desktop height so each card is exactly
       tall enough for 32px + label + 12px gap + asset + 32px. */
    height: auto;
    min-height: 0;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .recents-gallery .recents-label {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    text-align: center;
    order: -1;
    margin: 0 0 12px;
  }

  /* Performance label stays on a single line (its <br> is hidden on mobile). */
  .recents-label--performance {
    white-space: nowrap;
  }
  .recents-label--performance .jw-perf-break {
    display: none;
  }

  /* Drop the asset figures into normal flow under the label. They keep
     position:relative so their scaled <iframe> embeds stay in their slot. */
  .recents-gallery .recents-shot {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  /* The performance card uses a plain <img>, not a .recents-shot figure.
     Cap with a pixel max-height (a percentage can't resolve now the card height
     is auto, which would let the image balloon to its intrinsic size). */
  .recents-performance-img {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    height: auto;
    max-height: 460px;
    max-width: 70%;
    width: auto;
    border-radius: 16px;
  }

  /* Balances prototype: fill the screen width with a 24px gutter each side.
     The embed is scaled by transform: scale(100cqw / 434px) and the figure is a
     container-type: size query container, so 100cqw tracks the figure's width.
     Widening the figure to calc(100vw - 48px) therefore scales the iframe up to
     match automatically, and aspect-ratio: 434/315 (kept from the base rule)
     drives the height so the embed exactly fills the figure with no cropping. */
  .recents-gallery .recents-shot--balances {
    width: calc(100vw - 48px);
  }
}

/* ---- Heading spacing fix (keeps the "My Work" title fully visible) ---- */
.jw-work-section {
  padding-top: 32px;
}
.jw-work-section .title-1 {
  line-height: 1.06;
  padding-top: 0.06em;
  overflow: visible;
}

/* --------------------------- The grid --------------------------------- */
.jw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column-gap: 40px;
  grid-row-gap: 56px;
  width: 100%;
  margin: 0 auto;
}

/* --------------------------- The card --------------------------------- */
.jw-card {
  position: relative;
}

.jw-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--black, #111);
  text-decoration: none;
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.45s ease, border-color 0.45s ease;
  will-change: transform;
}

.jw-card-link:hover,
.jw-card-link:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(17, 17, 17, 0.14);
  border-color: rgba(17, 17, 17, 0.16);
}

.jw-card-link:focus-visible {
  outline: 2px solid var(--black, #111);
  outline-offset: 3px;
}

/* --------------------------- Media area ------------------------------- */
.jw-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f3f3;
}

.jw-media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.jw-card:hover .jw-media-img,
.jw-card-link:focus-visible .jw-media-img {
  transform: scale(1.05);
}

/* Tasteful placeholder when no image is set yet (colored gradient + initials) */
.jw-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    hsl(var(--jw-hue, 220) 68% 92%) 0%,
    hsl(calc(var(--jw-hue, 220) + 38) 60% 83%) 100%
  );
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.jw-card:hover .jw-media-placeholder,
.jw-card-link:focus-visible .jw-media-placeholder {
  transform: scale(1.05);
}
.jw-media-initials {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: hsl(var(--jw-hue, 220) 38% 38%);
  letter-spacing: 0.01em;
}

/* Soft overlay that fades in on hover to lift the affordance */
.jw-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(17, 17, 17, 0.42) 0%,
    rgba(17, 17, 17, 0) 55%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.jw-card:hover .jw-media-overlay,
.jw-card-link:focus-visible .jw-media-overlay {
  opacity: 1;
}

/* Year pill, top-left of the image */
.jw-year {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 11px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
}

/* "View project" affordance, bottom-left of the image */
.jw-view {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.jw-card:hover .jw-view,
.jw-card-link:focus-visible .jw-view {
  opacity: 1;
  transform: translateY(0);
}
.jw-view svg {
  width: 14px;
  height: 14px;
}

/* --------------------------- Card body -------------------------------- */
.jw-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 26px;
}

.jw-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--black, #111);
}

.jw-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: #5b5b5b;
}

/* Role / skill tag chips (derived from each project's subtitle) */
.jw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.jw-tag {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  color: #2c2c2c;
  background: #F5F6FC;
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
}

/* --------------------------- Entrance reveal -------------------------- */
/* Cards are visible by default. The fade-up only applies when JS adds
   "jw-animate" to the grid, so a JS failure can never hide the cards. */
.jw-grid.jw-animate .jw-card {
  opacity: 0;
  transform: translateY(18px);
}
.jw-grid.jw-animate .jw-card.jw-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.jw-grid.jw-animate .jw-card.jw-in:nth-child(2) { transition-delay: 0.07s; }
.jw-grid.jw-animate .jw-card.jw-in:nth-child(3) { transition-delay: 0.14s; }
.jw-grid.jw-animate .jw-card.jw-in:nth-child(4) { transition-delay: 0.21s; }
.jw-grid.jw-animate .jw-card.jw-in:nth-child(5) { transition-delay: 0.28s; }
.jw-grid.jw-animate .jw-card.jw-in:nth-child(n + 6) { transition-delay: 0.35s; }

/* --------------------------- Responsive ------------------------------- */
/* Tablet only (768px-991px): inset the projects grid 32px from each edge.
   Scoped to the tablet range so it never touches the mobile single-column
   rule below (<=767px) or the desktop layout (>=992px). The base .jw-grid is
   width:100% with margin:0 auto, so left/right margin alone would overflow
   (100% + 64px). Switching to width:auto lets the grid size to its container
   MINUS the 32px margins, giving a true 32px inset with no horizontal scroll.
   The parent .container/.section/.margin-100px add no side padding on tablet,
   so this is the only side spacing in play (no double-up). */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .jw-grid {
    width: auto;
    margin-left: 32px;
    margin-right: 32px;
  }
}

@media screen and (max-width: 767px) {
  .jw-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 36px;
  }
  .jw-title {
    font-size: 26px;
  }
  .jw-media-initials {
    font-size: 46px;
  }
}

/* ------------- "Where I've worked" logos -> 2x2 grid on mobile -------- */
/* The four partner logos (STAKE, zip, amber, PELIKIN) live in a single
   .most-recent-grid inside the quick-stack node #w-node-af5fe49c... On
   desktop that grid is a flex row of four; on phones it gets squeezed to
   ~300px wide so the logos shrink. Here we scope to that ONE node id so the
   "Collabs with…" grid (a different node, also .most-recent-grid) is left
   alone, switch it to a real 2-column / 2-row grid, and let the logos grow
   into the extra room. Mobile only (<=767px); desktop/tablet untouched. */
@media screen and (max-width: 767px) {
  #w-node-af5fe49c-25e5-c283-5f8b-cc55b2647b69-5eb788d3 .most-recent-grid {
    display: grid;
    grid-template-areas: none;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    grid-auto-flow: row;
    grid-column-gap: 16px;
    grid-row-gap: 12px;
    place-items: center;
    width: 100%;
    max-width: 360px;
    padding: 12px 0 16px;
  }

  /* Let each logo scale up to fill its cell now that it has room. */
  #w-node-af5fe49c-25e5-c283-5f8b-cc55b2647b69-5eb788d3 .filter-image {
    width: auto;
    height: auto;
    max-width: 78%;
    max-height: 68px;
    padding: 8px;
    margin: 0 auto;
    overflow: visible;
  }
}

/* --------------------------- Reduced motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .jw-card-link,
  .jw-media-img,
  .jw-media-placeholder,
  .jw-media-overlay,
  .jw-view,
  .jw-grid.jw-animate .jw-card.jw-in {
    transition: none !important;
  }
  .jw-card-link:hover,
  .jw-card-link:focus-visible {
    transform: none;
  }
  .jw-card:hover .jw-media-img,
  .jw-card:hover .jw-media-placeholder {
    transform: none;
  }
  /* Always show the affordance when motion is reduced */
  .jw-view {
    opacity: 1;
    transform: none;
  }
  .jw-grid.jw-animate .jw-card {
    opacity: 1;
    transform: none;
  }
}

/* ----------------- "Recents from Stake" heading (mobile) -------------- */
/* Scoped to this one heading via the dedicated jw-recents-title class so no
   other heading (e.g. the hero title-1) is affected. On mobile only: shrink
   the title to 24px and centre it horizontally. .heading-4 is a flex
   container, so justify-content keeps the text node centred; text-align and
   auto margins are belt-and-braces for any non-flex fallback. */
@media screen and (max-width: 767px) {
  .jw-recents-title {
    font-size: 24px;
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Smaller hero heading on phones. */
  .jw-hero-lede {
    font-size: 18px;
    font-weight: 500;
  }

  /* Smaller, lighter hero body copy on phones. */
  .jw-hero-body {
    font-size: 14px;
    font-weight: 300;
  }

  /* Breathing room below the hero buttons before the next section on phones. */
  .jw-hero-actions {
    margin-bottom: 48px;
  }

  /* The base .button-flex switches to inline-block at this width, which drops
     the flex gap, so restore a flex row with a 20px gap between the buttons. */
  .jw-hero-actions.button-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
}

/* NOTE: the footer left-alignment fix now lives in the globally-loaded
   css/jalissa.webflow.css (scoped to .footer, all breakpoints), so it applies
   on every page rather than just index.html. The earlier mobile-only block
   that used to live here has been removed to avoid duplicate/conflicting
   rules. */

/* =====================================================================
   HERO  -  sticky left, scrolling right (homepage)
   ---------------------------------------------------------------------
   Two-column hero: a pinned (sticky) intro on the left and the
   "Recents from Stake" cards scrolling on the right. The left column
   stays put while you scroll the taller right column past it, then the
   whole hero releases and the next section pushes up - all with pure CSS
   sticky positioning (no scroll hijacking, no JavaScript).

   Built mobile-first: by default it's a single centred column with no
   pinning; the two-column sticky layout switches on at >= 992px. All
   class names are jw- prefixed so nothing else on the site is affected.
   ===================================================================== */

/* Outer wrapper. Top padding clears the fixed top navigation bar. */
.jw-hero {
  padding: 116px 5% 0;
}

.jw-hero-grid {
  width: 100%;
}

/* Left intro block - centred and in normal flow on small screens. */
.jw-hero-left {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.jw-hero-lede {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium, 500);
  font-size: clamp(26px, 6vw, 36px);
  line-height: 1.2;
  color: #000;
}

/* The "Stake" link inside the lede keeps a light hairline underline. */
.jw-hero-lede .link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #e3e3e3;
  text-underline-offset: 2px;
}

.jw-hero-body {
  max-width: 565px;
  margin: 20px auto 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.2;
  color: #707070;
}

/* Buttons row (reuses .button-flex for layout). */
.jw-hero-actions {
  margin-top: 28px;
  gap: 20px;
}

/* The shared .horizontal-divider spacer adds extra width between the hero
   buttons on top of the 20px gap; hide it here only so other usages of the
   divider elsewhere on the site are unaffected. */
.jw-hero-actions .horizontal-divider {
  display: none;
}

/* Hero buttons render medium weight (base sheet sets them to 700). The
   Resumé label sits in a child div, so cascade the weight down to it too. */
.jw-hero-actions .button-primary,
.jw-hero-actions .button-line,
.jw-hero-actions .button-line div {
  font-weight: var(--font-weight-medium, 500);
}

.jw-hero-actions .button-line,
.jw-hero-actions .button-line div {
  color: #707070;
}

.jw-hero-actions .button-primary {
  padding: 12px 24px;
}

.jw-hero-right {
  min-width: 0;
}

/* In the stacked layout, keep the recents heading centred with its column. */
.jw-hero-right .jw-recents-title {
  justify-content: center;
  text-align: center;
  margin: 0 auto 24px;
}

/* Desktop: real two-column layout with the sticky left column. */
@media screen and (min-width: 992px) {
  .jw-hero {
    padding-top: 132px;
    padding-right: 0;
    padding-bottom: 0;
  }

  .jw-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(1000px, 50vw);
    column-gap: 56px;
    align-items: start;
    max-width: none;
    margin: 0;
  }

  /* Pinned intro: stays put while the right column scrolls past it, now
     vertically centred in the viewport. The column fills the height available
     below the fixed nav - calc keeps the 132px nav clearance so nothing hides
     behind it - and justify-content centres the heading/body/buttons within
     that space. 100dvh (dynamic viewport height) prevents clipping when mobile
     browser chrome shows/hides; the 100vh line above is the fallback.
     min-height (not height) lets unusually tall content grow and scroll.
     translateY(-60px) lifts the block ~60px above dead-centre so it reads as
     optically (visually) centred rather than mathematically centred. */
  .jw-hero-left {
    position: sticky;
    top: 132px;
    align-self: start;
    min-height: calc(100vh - 132px);
    min-height: calc(100dvh - 132px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(-60px);
    max-width: 565px;
    margin: 0;
    text-align: left;
  }

  .jw-hero-body {
    margin-left: 0;
    margin-right: 0;
  }

  .jw-hero-actions.button-flex {
    justify-content: flex-start;
  }

  /* Pull the right gallery column up to the top edge of the page, cancelling
     the hero's 132px top padding so it reaches top: 0 while the left intro
     column keeps its offset. */
  .jw-hero-right {
    margin-top: -132px;
  }

  /* Recents heading sits top-left of the scrolling column. */
  .jw-hero-right .jw-recents-title {
    justify-content: flex-start;
    text-align: left;
    margin: 0 0 28px;
  }

  /* Size the recents cards to the right column. --rc-w still drives internal
     measurements (card heights stay tied to it), but the cards themselves now
     fill the full column width, stack flush with no gap, and have square
     corners - so they read as one continuous edge-to-edge strip. */
  .jw-hero-right .recents-gallery {
    --rc-w: min(620px, 42vw);
    align-items: stretch;
    gap: 0;
    padding-bottom: 0;
  }

  /* Full column width, flush, no rounding (covers all four card variants).
     A 3-column grid (1fr | screen | 1fr) centres the screen in the card: the
     two equal side columns do the centring, so no width constants are needed.
     The label drops into the 3rd column, 12px to the screen's right. */
  .jw-hero-right .recents-card {
    width: 100%;
    border-radius: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  /* The activity card carries its own narrower width rule in the base sheet;
     force it to full width here too. */
  .jw-hero-right .recents-card--activity {
    width: 100%;
  }

  /* Drop the screens/assets back into normal flow and seat them in the centre
     (auto) column so they sit dead-centre in the card. The figures keep
     position:relative so they stay the containing block for their
     absolutely-positioned (scaled) iframe/img embeds. */
  .jw-hero-right .recents-performance-img,
  .jw-hero-right .recents-shot {
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
    transform: none;
    grid-column: 2;
  }

  /* Fixed-size mockups: 40px corner radius at desktop. */
  .jw-hero-right .recents-performance-img,
  .jw-hero-right .recents-shot--spacex,
  .jw-hero-right .recents-shot--activity {
    border-radius: 40px;
    corner-shape: superellipse(1.75);
    overflow: hidden;
  }

  /* Balances screen matches the other three with the same fixed 40px radius. */
  .jw-hero-right .recents-shot--balances {
    border-radius: 40px;
    corner-shape: superellipse(1.75);
    overflow: hidden;
  }

  /* Labels sit in the 3rd grid column, 12px to the right of the centred
     screen, vertically centred. */
  .jw-hero-right .recents-label {
    position: static;
    transform: none;
    text-align: left;
    grid-column: 3;
    justify-self: start;
    align-self: center;
    margin-left: 12px;
  }

  /* Balances stacks vertically instead: label on top, screen below, both
     inside the block. */
  .jw-hero-right .recents-card--balances {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .jw-hero-right .recents-card--balances .recents-label {
    order: -1;
    margin-left: 0;
    text-align: center;
  }
}

/* =====================================================================
   TABLET (768px-991px): mirror the MOBILE layout, keep the larger fonts
   ---------------------------------------------------------------------
   Below 992px the hero already drops out of the desktop two-column sticky
   layout, but the recents gallery falls back to its BASE styles (centred
   ~92vw cards, 62px gaps, rounded corners, absolutely-positioned labels) -
   which does NOT match the mobile treatment. This block re-applies the same
   LAYOUT decisions the phone uses (full-bleed cards, square corners, flush
   stacking, label-on-top, mobile gaps/spacing) at tablet width.

   It deliberately copies only the LAYOUT rules from the <=767px blocks and
   leaves every font-size rule out, so the recents labels, hero lede and hero
   body stay at their larger base sizes here - bigger than phone, mobile
   layout. Desktop (>=992px) and phone (<=767px) are untouched. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* Breathing room below the hero buttons before the recents, like mobile. */
  .jw-hero-actions {
    margin-bottom: 48px;
  }

  .jw-hero-actions.button-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }

  /* Recents gallery: flush stacking, no inter-card gap or vertical padding. */
  .recents-gallery {
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Big blocks go full-bleed edge-to-edge with squared corners, hug content
     height, and stack the label on top of the asset - same as phone. */
  .recents-gallery .recents-card {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 0;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .recents-gallery .recents-label {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    text-align: center;
    order: -1;
    margin: 0 0 12px;
  }

  .recents-label--performance {
    white-space: nowrap;
  }
  .recents-label--performance .jw-perf-break {
    display: none;
  }

  /* Drop the asset figures into normal flow under the label; they keep
     position:relative so their scaled embeds stay in their slot. */
  .recents-gallery .recents-shot {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  /* Performance card uses a plain <img>; cap its height in flow (small inner
     screenshot keeps its 16px radius, matching mobile). */
  .recents-performance-img {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    height: auto;
    max-height: 460px;
    max-width: 70%;
    width: auto;
    border-radius: 16px;
  }

  /* Balances prototype fills the screen width with a 24px gutter each side, but
     is capped at 450px wide on tablet. Because the embed scales to the figure's
     width (container-query units), capping the width scales the whole prototype
     down proportionally; the card centres it. */
  .recents-gallery .recents-shot--balances {
    width: calc(100vw - 48px);
    max-width: 450px;
  }
}

/* ---- Transparent-over-hero nav -------------------------------------------
   The .nav--overlay marker is added by JS only on the homepage (where the
   recents gallery exists). It starts transparent over the hero/recents and
   gains a solid white fill once scrolled past the bottom of .recents-gallery. */
.navigation-wrapper.nav--overlay {
  background-color: transparent !important;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

.navigation-wrapper.nav--overlay.nav--solid {
  background-color: #fff !important;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .navigation-wrapper.nav--overlay {
    transition: none;
  }
}

/* Testimonials section type weights. The quote body copy reads lighter, while
   the names and roles drop to medium. Scoped to .testimonials-grid so the
   shared .paragraph-1 / .testimonials-name classes are untouched elsewhere. */
.testimonials-grid .paragraph-1 {
  font-weight: 300;
}

.testimonials-grid .testimonials-name,
.testimonials-grid .testimonials-name strong {
  font-weight: 500;
}

/* Footer link weights. Site links and the contact/docs links read regular.
   Scoped to .footer so shared classes aren't affected elsewhere. */
.footer .footer-1,
.footer .paragraph-link-1 {
  font-weight: 400;
}

/* Work (case-study) pages: render body / paragraph copy as light (300).
   Scoped to the .work-page marker class on <body> of each project/*.html
   page so the shared base p / paragraph styles stay untouched on the
   homepage and other pages. Headings and field labels keep their weights. */
.work-page p,
.work-page .subhead,
.work-page .w-richtext li {
  font-weight: 300;
}