:root {
    --bg: #000000;
    --card: #14171b;
    --fg: #f5f6f7;
    --muted: #b9bec2;
    --cyan: #2bc4d6;
    --cyan-soft: #a8dee6;
    --pill1: #3a3a3a;
    --pill2: #202020;
    /* 1920px design canvas scaled down to fit narrower desktop widths, floor at 1280px; stays 1 (untouched) above 1920 so ultrawide screens just show more background */
    --stage-scale: clamp(0.667, calc(100vw / 1920px), 1);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; overflow-x: auto; }
  body {
    margin: 0;
    min-width: 1280px;
    background: var(--bg);
    color: var(--fg);
    font-family: 'Unbounded', sans-serif;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* ---------- HERO ----------
     1:1 with Figma "JRB" > frame IVC (9391:321), 1920x1080.
     Every offset below is a raw Figma coordinate inside .hero-stage.
     ------------------------------------------------------------- */
  .hero {
    position: relative;
    width: 100%;
    height: calc(1080px * var(--stage-scale));
    background: #000;
    overflow: hidden;
  }
  .hero-stage {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(var(--stage-scale));
    transform-origin: top center;
    width: 1920px;
    height: 1080px;
    letter-spacing: normal;
  }

  /* background image + "Rectangle 16" (2070x1063 @ -97,0, blur 60) as an alpha mask */
  .hero-bg-mask {
    position: absolute;
    left: 0;
    top: -13px;
    width: 1920px;
    height: 1080px;
    -webkit-mask-image: url(../images/hero-bg-mask.svg);
            mask-image: url(../images/hero-bg-mask.svg);
    -webkit-mask-size: 2310px 1303px;
            mask-size: 2310px 1303px;
    -webkit-mask-position: -217px -107px;
            mask-position: -217px -107px;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    mask-mode: alpha;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ----- Cases / Portfolio toggle (766,45 · 344x60) -----
     Markup comes from build.js ({{NAV_TOGGLE_MARKER}}), so the two pages can
     never disagree about where the tabs point or which half is filled. The
     filled half is always the page you are on: Cases page = left half (frame
     IVC 9391:321), Portfolio page = right half (10334:3273/3274/3275). The two
     frames use different label sizes for the same tab, so label rules are
     scoped per page rather than shared. */
  .hero-toggle {
    position: absolute;
    left: 766px;
    top: 45px;
    width: 344px;
    height: 60px;
  }
  .ht-tab {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 172px;
    height: 60px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
  }
  .ht-cases { left: 0; border-radius: 50px 0 0 50px; }
  .ht-portfolio { left: 172px; border-radius: 0 50px 50px 0; }
  /* stays a positioned box (not just an in-flow flex item) so it keeps
     painting above the ::before fill below, same as before centring */
  .ht-label { position: relative; line-height: 20px; }

  /* filled half — the current page. Verified against Figma node 12138:2
     ("Header"): a single 180deg gradient fills the whole tab, no inset ring
     or shadow. */
  .ht-tab.is-active {
    background: linear-gradient(180deg, #71DBE2 0%, #A4F9FF 100%);
  }
  .ht-tab.is-active .ht-label { color: #000000; }

  /* outlined half — the other page */
  .ht-tab:not(.is-active) {
    background: rgba(217, 217, 217, 0);
    border: 1px solid #71DBE2;
    transition: background-color .25s ease;
  }
  .ht-tab:not(.is-active):hover { background: rgba(113, 219, 226, 0.12); }

  /* Cases page (frame IVC 9391:321). Labels are centred in their tab rather
     than pinned to the English text's Figma offset, so translated labels of
     any width stay centred too. */
  .hero-toggle--cases .ht-cases .ht-label { font-size: 25px; }
  .hero-toggle--cases .ht-portfolio .ht-label { font-size: 25px; color: #FFFFFF; }

  /* Portfolio page (frame IVC 10334:3255) */
  .hero-toggle--portfolio .ht-cases .ht-label { font-size: 25px; color: #FFFFFF; }
  .hero-toggle--portfolio .ht-portfolio .ht-label { font-size: 25px; }

  /* The Portfolio frame renders the whole language chip in solid accent, not
     at the 20% alpha its fill reports. */
  .pf-hero .hero-lang {
    background: #71DBE2;
    box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.45);
  }

  /* ----- language chip (1749,55 · 80x40) ----- */
  .hero-lang {
    position: absolute;
    left: 1749px;
    top: 55px;
    width: 80px;
    height: 40px;
    background: linear-gradient(180deg, #71DBE2 0%, #3E787C 100%);
    border-radius: 20px;
  }
  .hero-lang-label {
    position: absolute;
    left: 23px;
    top: 10px;
    font-size: 19px;
    line-height: 20px;
    font-weight: 400;
    color: #000000;
  }
  .hero-lang { cursor: pointer; z-index: 60; }
  .hero-lang-menu {
    position: absolute;
    right: 0;
    top: 48px;
    min-width: 96px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: #0c0d0f;
    border: 1px solid rgba(113, 219, 226, 0.35);
    border-radius: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 61;
  }
  .hero-lang:hover .hero-lang-menu,
  .hero-lang:focus-within .hero-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .lang-option {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: #EEEEEE;
    white-space: nowrap;
  }
  .lang-option:hover,
  .lang-option:focus-visible {
    background: rgba(113, 219, 226, 0.15);
    color: #fff;
  }
  .lang-option.is-active {
    background: #71DBE2;
    color: #000000;
  }

  /* ----- brandmark: rule (174,187 · 228x1) + text (409,163) ----- */
  .hero .brandmark-rule {
    position: absolute;
    left: 174px;
    top: 187px;
    width: 228px;
    height: 1px;
    background: #FFFFFF;
  }
  .hero .brandmark {
    position: absolute;
    left: 409px;
    top: 163px;
    font-size: 20px;
    line-height: 48px;
    color: #71DBE2;
    white-space: nowrap;
  }
  .hero .brandmark b { font-weight: 500; }
  .hero .brandmark span { font-weight: 300; }

  /* ----- headline ----- */
  .hero h1 {
    margin: 0;
    font-family: 'Unbounded', sans-serif;
  }
  .h1-line {
    position: absolute;
    left: 170px;
    top: 212px;
    font-size: 50px;
    line-height: 70px;
    font-weight: 700;
    color: #FFFFFF;
    white-space: nowrap;
  }
  .h1-accent {
    position: absolute;
    left: 170px;
    top: 368px;
    font-size: 60px;
    line-height: 70px;
    font-weight: 500;
    color: #71DBE2;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* ----- lead (174,466 · 550x52) ----- */
  .hero .lead {
    position: absolute;
    left: 174px;
    top: 466px;
    width: 550px;
    margin: 0;
    font-size: 20px;
    line-height: 25px;
    font-weight: 400;
    color: #FFFFFF;
  }

  /* ----- tag pills (row starts 162,577 · h47, 12px gaps) ----- */
  .tag-row {
    position: absolute;
    left: 162px;
    top: 577px;
    display: flex;
    gap: 12px;
  }
  .tag-pill {
    display: flex;
    align-items: center;
    height: 47px;
    padding-left: 12px;
    border-radius: 20px;
    background: rgba(217, 217, 217, 0.2);
    font-size: 25px;
    line-height: 25px;
    font-weight: 300;
    color: #FFFFFF;
  }
  .tag-row .tag-pill:nth-child(1) { width: 182px; }
  .tag-row .tag-pill:nth-child(2) { width: 97px; }
  .tag-row .tag-pill:nth-child(3) { width: 142px; }
  .tag-row .tag-pill:nth-child(4) { width: 65px; }

  /* ----- CTA (181,703.26 · 528x100) ----- */
  /* Canonical CTA pill style, per Figma "get started" node 9393:367 — every
     CTA button on the site (hero + footer, both pages) shares this exact
     gradient/shape. See also .footer-cta, .pf-cta, .pf-footer-cta below. */
  .hero .cta-pill {
    position: absolute;
    left: 181px;
    top: 703.26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 528px;
    height: 100px;
    border: none;
    border-radius: 60px;
    background: linear-gradient(116.519deg, #71DBE2 36.523%, #68DBF0 93.454%);
    color: #000000;
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 0.52px;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .hero .cta-pill:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -6px rgba(43,196,214,.5); }

  /* ---------- PROJECT SECTIONS (legacy structure; still used by sections not yet rebuilt) ---------- */
  .project {
    position: relative;
    padding: 100px 0 40px;
    overflow: hidden;
  }
  .project-stripes {
    position: absolute;
    top: -10%; right: -6%;
    width: 60%; height: 130%;
    background: repeating-linear-gradient(
      115deg,
      var(--accent) 0px, var(--accent) 2px,
      transparent 2px, transparent 46px
    );
    opacity: .12;
    -webkit-mask-image: linear-gradient(115deg, transparent 20%, black 45%, transparent 75%);
    mask-image: linear-gradient(115deg, transparent 20%, black 45%, transparent 75%);
    pointer-events: none;
  }
  .project-head { position: relative; margin-bottom: 42px; }
  .eyebrow {
    color: var(--accent);
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 6px;
  }
  .project-title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    line-height: 1.05;
    margin: 0;
    text-transform: uppercase;
  }
  .hero-shot {
    position: relative;
    overflow: hidden;
    margin-bottom: 46px;
  }
  .hero-shot img { width: 100%; }

  .project-body { position: relative; }

  /* ---------- NEW full-bleed case layout (Anchor Minds now; rolling out to remaining projects next) ----------
     1:1 with Figma "JRB" > frame Anchor (9323:3), 1920x1080.
     Every offset below is a raw Figma coordinate inside .case-stage.
     ------------------------------------------------------------- */
  .case { position: relative; padding: 0; overflow: hidden; background: #000; height: calc(1080px * var(--stage-scale)); }
  .section-glow {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 3px;
    margin: calc(60px * var(--stage-scale)) 0;   /* breathing room above and below each case's top line */
    background: var(--glow-color);
    box-shadow: 0 0 100px 10px var(--glow-shadow);
  }
  .case-stage {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1920px;
    height: 1080px;
    letter-spacing: normal;
    transform: translateX(-50%) scale(var(--stage-scale));
    transform-origin: top center;
  }
  .case-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 1917px;
    height: 728px;
    overflow: hidden;
  }
  .case-bg img { width: 100%; height: 100%; object-fit: cover; }

  .case-title {
    position: absolute;
    left: 170px;
    top: 45px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 45px;
    line-height: 48px;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
  }
  .case-sub {
    position: absolute;
    left: 181px;
    top: 151px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    color: #71dbe2;
    margin: 0;
    white-space: nowrap;
  }

  /* ---------- shared components (info card / description / galleries) ---------- */
  .info-card {
    display: flex;
    gap: 20px;
    background: var(--card);
    border: 1px solid #22262a;
    border-radius: 18px;
    padding: 18px;
    max-width: 560px;
    margin-bottom: 34px;
  }
  .info-icon {
    width: 96px; height: 96px;
    flex: none;
    border-radius: 12px;
    overflow: hidden;
    background: #0c0d0f;
    display: flex; align-items: center; justify-content: center;
  }
  .info-icon img { width: 100%; height: 100%; object-fit: contain; }
  .info-meta { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
  .meta-label {
    display: block;
    color: var(--fg);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    opacity: .85;
  }
  .palette { display: flex; gap: 6px; }
  .swatch {
    width: 30px; height: 46px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
  }
  .type-specimen { display: flex; align-items: baseline; gap: 12px; }
  .font-name { font-weight: 700; font-size: 14px; color: #e7e9ea; }
  .font-sample { font-size: 1.8rem; color: #7d8489; line-height: 1; }

  .desc {
    max-width: 640px;
    font-size: 1.1rem;
    line-height: 1.55;
    margin: 0 0 36px;
  }
  .desc-head {
    display: block;
    color: var(--fg);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--accent);
  }
  .desc-tail { display: block; color: var(--accent); }

  .gallery-block { margin-bottom: 40px; }
  .gallery-label {
    font-size: .95rem;
    font-weight: 700;
    color: var(--fg);
    margin: 0 0 16px;
  }

  .strip { display: flex; gap: 14px; }
  .strip img { height: 74px; width: auto; }

  .banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
  .banner-cell {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #22262a;
    aspect-ratio: 4/5;
    background: #0c0d0f;
    transition: transform .25s ease, border-color .25s ease;
  }
  /* fill the cell's width and pin to the top, so a taller-than-cell banner (9:16 stories) is only cut at the bottom */
  .banner-cell img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
  .banner-cell:hover { transform: translateY(-4px); border-color: var(--accent); }

  .tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
  }
  .tile-cell {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #22262a;
    background: #0c0d0f;
  }
  .tile-cell img { width: 100%; height: 100%; object-fit: cover; }

  .banner-row-wide { display: flex; gap: 14px; margin-bottom: 40px; }
  .banner-wide-cell {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #22262a;
    background: #0c0d0f;
  }
  .banner-wide-cell img { width: 100%; height: 100%; object-fit: cover; }

  /* ---------- #anchor: exact Figma coordinates for the shared components above ---------- */
  #anchor .info-card {
    position: absolute;
    left: 170px;
    top: 220px;
    width: 286px;
    height: 144px;
    background: linear-gradient(180deg, #373737, #000);
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: none;
    margin-bottom: 0;
  }
  #anchor .info-icon {
    position: absolute;
    left: 18px;
    top: 13px;
    width: 86px;
    height: 110px;
    background: none;
    border-radius: 0;
  }
  #anchor .info-icon img { object-fit: contain; }
  #anchor .info-meta, #anchor .meta-block { display: contents; }
  #anchor .meta-label {
    position: absolute;
    left: 143px;
    font-size: 10px;
    line-height: 25px;
    font-weight: 400;
    color: #71dbe2;
    opacity: 1;
    margin-bottom: 0;
  }
  #anchor .meta-block:nth-child(1) .meta-label { top: 10px; }
  #anchor .meta-block:nth-child(2) .meta-label { top: 81px; }
  #anchor .palette {
    position: absolute;
    left: 143px;
    top: 34px;
    width: 126px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(107, 206, 214, .5);
    border-radius: 2px;
  }
  #anchor .type-specimen { position: absolute; left: 143px; top: 103px; }
  #anchor .font-name { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 25px; color: #fff; }
  #anchor .font-sample { font-size: 25px; font-weight: 700; color: #929194; line-height: 1; }

  #anchor .desc {
    position: absolute;
    left: 170px;
    top: 390px;
    width: 494px;
    font-size: 20px;
    line-height: 25px;
    margin: 0;
  }
  #anchor .desc-head { color: #fff; padding-bottom: 5px; margin-bottom: 6px; border-bottom: none; }
  #anchor .desc-tail { color: #71dbe2; }
  #anchor .case-divider { position: absolute; left: 172px; top: 445px; width: 454px; height: 1px; background: #71dbe2; }

  #anchor .gallery-block { position: absolute; left: 170px; margin-bottom: 0; }
  #anchor .gallery-block--strip { top: 527px; }
  #anchor .gallery-block--banners { top: 669px; }
  #anchor .gallery-label { width: max-content; font-size: 20px; font-weight: 400; color: #fff; margin: 0 0 26px; }
  #anchor .gallery-block--strip .gallery-label { margin-bottom: 16px; }
  #anchor .strip { width: 362px; height: 57px; }
  #anchor .strip img { width: 100%; height: 100%; object-fit: contain; }
  #anchor .banner-grid { display: flex; gap: 13px; }
  #anchor .banner-cell {
    width: 220px;
    height: 275px;
    flex: none;
    aspect-ratio: auto;
    border: none;
    border-radius: 15px;
    background: none;
  }

  /* ---------- #fpcrm: exact Figma coordinates for the shared components above ---------- */
  #fpcrm .case-sub {
    left: 181px;
    top: 121px;
    color: #04fd0d;
  }

  #fpcrm .info-card {
    position: absolute;
    left: 170px;
    top: 220px;
    width: 286px;
    height: 144px;
    background: linear-gradient(180deg, #373737, #000);
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: none;
    margin-bottom: 0;
  }
  #fpcrm .info-icon {
    position: absolute;
    left: 11px;
    top: 16px;
    width: 103px;
    height: 103px;
    background: none;
    border-radius: 15px;
  }
  #fpcrm .info-icon img { object-fit: cover; mix-blend-mode: plus-lighter; }
  #fpcrm .info-meta, #fpcrm .meta-block { display: contents; }
  #fpcrm .meta-label {
    position: absolute;
    left: 143px;
    font-size: 10px;
    line-height: 25px;
    font-weight: 400;
    color: #04fd0d;
    opacity: 1;
    margin-bottom: 0;
  }
  #fpcrm .meta-block:nth-child(1) .meta-label { top: 10px; }
  #fpcrm .meta-block:nth-child(2) .meta-label { top: 81px; }
  #fpcrm .palette {
    position: absolute;
    left: 143px;
    top: 34px;
    width: 126px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 2px;
  }
  #fpcrm .type-specimen { position: absolute; left: 143px; top: 103px; }
  #fpcrm .font-name { font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 25px; color: #fff; }
  #fpcrm .font-sample { font-size: 25px; font-weight: 700; color: #929194; line-height: 1; }

  #fpcrm .desc {
    position: absolute;
    left: 170px;
    top: 390px;
    width: 494px;
    font-size: 20px;
    line-height: 25px;
    margin: 0;
  }
  #fpcrm .desc-head { color: #fff; padding-bottom: 0; margin-bottom: 8px; border-bottom: none; }
  #fpcrm .desc-tail { color: #04fd0d; }
  #fpcrm .case-divider { position: absolute; left: 172px; top: 445px; width: 410px; height: 1px; background: #04fd0d; }

  #fpcrm .gallery-label { width: max-content; font-size: 20px; font-weight: 400; color: #fff; margin: 0 0 26px; }
  #fpcrm .gallery-label--strip { position: absolute; left: 170px; top: 540px; margin: 0; }
  #fpcrm .strip {
    position: absolute;
    left: 60px;
    top: 586px;
    width: 587px;
    height: 58px;
  }
  #fpcrm .strip img { width: 100%; height: 100%; object-fit: contain; }

  #fpcrm .gallery-block--banners { position: absolute; left: 170px; top: 669px; margin-bottom: 0; }
  #fpcrm .banner-grid { display: flex; gap: 13px; }
  #fpcrm .banner-cell {
    width: 220px;
    height: 275px;
    flex: none;
    aspect-ratio: auto;
    border: none;
    border-radius: 15px;
    background: none;
  }

  /* ---------- #vibero: exact Figma coordinates for the shared components above ---------- */
  #vibero .case-sub { color: #ff8041; }

  #vibero .info-card {
    position: absolute;
    left: 170px;
    top: 220px;
    width: 286px;
    height: 144px;
    background: linear-gradient(180deg, #373737, #000);
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: none;
    margin-bottom: 0;
  }
  #vibero .info-icon {
    position: absolute;
    left: 4px;
    top: 41px;
    width: 128px;
    height: 64px;
    background: none;
    border-radius: 0;
  }
  #vibero .info-icon img { object-fit: contain; }
  #vibero .info-meta, #vibero .meta-block { display: contents; }
  #vibero .meta-label {
    position: absolute;
    left: 143px;
    font-size: 10px;
    line-height: 25px;
    font-weight: 400;
    color: #ff8041;
    opacity: 1;
    margin-bottom: 0;
  }
  #vibero .meta-block:nth-child(1) .meta-label { top: 10px; }
  #vibero .meta-block:nth-child(2) .meta-label { top: 81px; }
  #vibero .palette {
    position: absolute;
    left: 143px;
    top: 34px;
    width: 126px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 2px;
  }
  #vibero .type-specimen { position: absolute; left: 143px; top: 103px; }
  #vibero .font-name { font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 25px; color: #fff; }
  #vibero .font-sample { font-size: 25px; font-weight: 700; color: #929194; line-height: 1; }

  #vibero .desc {
    position: absolute;
    left: 170px;
    top: 390px;
    width: 494px;
    font-size: 20px;
    line-height: 25px;
    margin: 0;
  }
  #vibero .desc-head { color: #fff; padding-bottom: 0; margin-bottom: 8px; border-bottom: none; }
  #vibero .desc-tail { color: #ff8041; }
  #vibero .case-divider { position: absolute; left: 172px; top: 445px; width: 386px; height: 1px; background: #ff8041; }

  #vibero .gallery-block { margin-bottom: 0; }
  #vibero .gallery-label { position: absolute; left: 170px; top: 527px; width: max-content; font-size: 20px; font-weight: 400; color: #fff; margin: 0; }
  #vibero .banner-row-wide { position: absolute; left: 170px; top: 564px; gap: 13px; margin-bottom: 0; }
  #vibero .banner-wide-cell { width: 338px; height: 190px; border: none; border-radius: 15px; background: none; }
  #vibero .banner-grid { position: absolute; left: 170px; top: 770px; display: flex; gap: 13px; }
  #vibero .banner-cell {
    width: 220px;
    height: 275px;
    flex: none;
    aspect-ratio: auto;
    border: none;
    border-radius: 15px;
    background: none;
  }

  /* ---------- #astoria: exact Figma coordinates for the shared components above ---------- */
  #astoria .case-sub { color: #ff7197; }

  #astoria .info-card {
    position: absolute;
    left: 170px;
    top: 220px;
    width: 310px;
    height: 144px;
    background: linear-gradient(180deg, #373737, #000);
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: none;
    margin-bottom: 0;
  }
  #astoria .info-icon {
    position: absolute;
    left: 6px;
    top: 31px;
    width: 129px;
    height: 86px;
    background: none;
    border-radius: 0;
  }
  #astoria .info-icon img { object-fit: contain; }
  #astoria .info-meta, #astoria .meta-block { display: contents; }
  #astoria .meta-label {
    position: absolute;
    left: 143px;
    font-size: 10px;
    line-height: 25px;
    font-weight: 400;
    color: #ff7197;
    opacity: 1;
    margin-bottom: 0;
  }
  #astoria .meta-block:nth-child(1) .meta-label { top: 10px; }
  #astoria .meta-block:nth-child(2) .meta-label { top: 81px; }
  #astoria .palette {
    position: absolute;
    left: 143px;
    top: 34px;
    width: 126px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 2px;
  }
  #astoria .type-specimen { position: absolute; left: 143px; top: 103px; }
  #astoria .font-name { font-size: 15px; line-height: 25px; color: #fff; }
  #astoria .font-sample { font-size: 25px; font-weight: 700; color: #929194; line-height: 1; }

  #astoria .desc {
    position: absolute;
    left: 170px;
    top: 390px;
    width: 494px;
    font-size: 20px;
    line-height: 25px;
    margin: 0;
  }
  #astoria .desc-head { color: #fff; padding-bottom: 0; margin-bottom: 8px; border-bottom: none; }
  #astoria .desc-tail { color: #ff7197; }
  #astoria .case-divider { position: absolute; left: 172px; top: 445px; width: 425px; height: 1px; background: #ff7197; }

  #astoria .gallery-block { margin-bottom: 0; }
  #astoria .gallery-label { position: absolute; left: 170px; width: max-content; font-size: 20px; font-weight: 400; color: #fff; margin: 0; }
  #astoria .gallery-label--slides { top: 521px; }
  #astoria .gallery-label--linkedin { top: 756px; }

  #astoria .slide-row { position: absolute; left: 170px; top: 572px; display: flex; gap: 8px; }
  #astoria .slide-window {
    position: relative;
    width: 258px;
    height: 158px;
    border-radius: 20px;
    overflow: hidden;
    background: #d9d9d9;
  }
  #astoria .slide-window img { position: absolute; width: 313px; height: 1136px; max-width: none; }
  #astoria .slide-window:nth-child(1) img { left: -28px; top: -256px; }
  #astoria .slide-window:nth-child(2) img { left: -28px; top: -418px; }
  #astoria .slide-window:nth-child(3) img { left: -28px; top: -607px; }
  #astoria .slide-window:nth-child(4) img { left: -28px; top: -946px; }

  #astoria .linkedin-shot { position: absolute; left: 170px; top: 808px; width: 1389px; height: 235px; border-radius: 25px; overflow: hidden; }
  #astoria .linkedin-shot img { width: 100%; height: 100%; object-fit: cover; }

  /* ---------- #horror: exact Figma coordinates for the shared components above ---------- */
  #horror .case-sub { color: #ff2c24; }

  #horror .info-card {
    position: absolute;
    left: 170px;
    top: 220px;
    width: 286px;
    height: 144px;
    background: linear-gradient(180deg, #373737, #000);
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: none;
    margin-bottom: 0;
  }
  #horror .info-icon {
    position: absolute;
    left: 6px;
    top: 14px;
    width: 109px;
    height: 109px;
    background: none;
    border-radius: 0;
  }
  #horror .info-icon img { object-fit: cover; mix-blend-mode: plus-lighter; }
  #horror .info-meta, #horror .meta-block { display: contents; }
  #horror .meta-label {
    position: absolute;
    left: 143px;
    font-size: 10px;
    line-height: 25px;
    font-weight: 400;
    color: #ff2c24;
    opacity: 1;
    margin-bottom: 0;
  }
  #horror .meta-block:nth-child(1) .meta-label { top: 10px; }
  #horror .meta-block:nth-child(2) .meta-label { top: 81px; }
  #horror .palette {
    position: absolute;
    left: 143px;
    top: 34px;
    width: 126px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 2px;
  }
  #horror .type-specimen { position: absolute; left: 143px; top: 103px; }
  #horror .font-name { font-family: 'Forum', serif; font-weight: 400; font-size: 19px; line-height: 25px; color: #fff; }
  #horror .font-sample { font-size: 25px; font-weight: 400; line-height: 25px; color: #929194; }

  #horror .desc {
    position: absolute;
    left: 170px;
    top: 390px;
    width: 509px;
    font-size: 20px;
    line-height: 25px;
    margin: 0;
  }
  #horror .desc-head { color: #fff; padding-bottom: 0; margin-bottom: 8px; border-bottom: none; }
  #horror .desc-tail { color: #ff2c24; }
  #horror .case-divider { position: absolute; left: 172px; top: 445px; width: 494px; height: 1px; background: #ff2c24; }

  #horror .gallery-label--strip { position: absolute; left: 170px; top: 527px; width: max-content; font-size: 20px; font-weight: 400; color: #fff; margin: 0; }
  #horror .strip { position: absolute; left: 60px; top: 568px; width: 587px; height: 58px; }
  #horror .strip img { width: 100%; height: 100%; object-fit: contain; }

  #horror .gallery-block--banners { position: absolute; left: 170px; top: 669px; margin-bottom: 0; }
  #horror .gallery-block--banners .gallery-label { width: max-content; font-size: 20px; font-weight: 400; color: #fff; margin: 0 0 26px; }
  #horror .banner-grid { display: flex; gap: 13px; }
  #horror .banner-cell {
    width: 220px;
    height: 275px;
    flex: none;
    aspect-ratio: auto;
    border: none;
    border-radius: 15px;
    background: none;
  }

  /* ---------- #wehunt: exact Figma coordinates for the shared components above ---------- */
  #wehunt .case-title { top: 68px; text-transform: none; }
  #wehunt .case-sub { left: 183px; top: 136px; font-size: 25px; color: #ffe41b; }

  #wehunt .info-card {
    position: absolute;
    left: 170px;
    top: 200px;
    width: 286px;
    height: 144px;
    background: linear-gradient(180deg, #373737, #000);
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: none;
    margin-bottom: 0;
  }
  #wehunt .info-icon {
    position: absolute;
    left: 17px;
    top: 22px;
    width: 88.07px;
    height: 96px;
    background: none;
    border-radius: 0;
  }
  #wehunt .info-icon img { object-fit: contain; }
  #wehunt .info-meta, #wehunt .meta-block { display: contents; }
  #wehunt .meta-label {
    position: absolute;
    left: 143px;
    font-size: 10px;
    line-height: 25px;
    font-weight: 400;
    color: #ffe41b;
    opacity: 1;
    margin-bottom: 0;
  }
  #wehunt .meta-block:nth-child(1) .meta-label { top: 10px; }
  #wehunt .meta-block:nth-child(2) .meta-label { top: 81px; }
  #wehunt .palette {
    position: absolute;
    left: 143px;
    top: 34px;
    width: 126px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 2px;
  }
  #wehunt .type-specimen { position: absolute; left: 143px; top: 103px; }
  #wehunt .font-name { font-family: 'Poppins', sans-serif; font-size: 15px; line-height: 25px; color: #fff; }
  #wehunt .font-sample { font-size: 25px; font-weight: 700; color: #929194; line-height: 1; }

  #wehunt .desc {
    position: absolute;
    left: 170px;
    top: 390px;
    width: 494px;
    font-size: 20px;
    line-height: 25px;
    margin: 0;
  }
  #wehunt .desc-head { color: #fff; padding-bottom: 0; margin-bottom: 10px; border-bottom: none; }
  #wehunt .desc-tail { color: #ffe41b; }
  #wehunt .case-divider { position: absolute; left: 172px; top: 445px; width: 337px; height: 1px; background: #ffe41b; }

  #wehunt .gallery-block { margin-bottom: 0; }
  #wehunt .gallery-label { position: absolute; left: 170px; top: 557px; width: max-content; font-size: 40px; line-height: 25px; font-weight: 400; color: #fff; margin: 0; }
  #wehunt .linkedin-shot { position: absolute; border-radius: 25px; overflow: hidden; }
  #wehunt .linkedin-shot img { width: 100%; height: 100%; object-fit: cover; }
  #wehunt .linkedin-shot--1 { left: 172px; top: 646px; width: 1018px; height: 172px; }
  #wehunt .linkedin-shot--2 { left: 738px; top: 863px; width: 1018px; height: 172px; }

  /* ---------- #feelgood: exact Figma coordinates for the shared components above ---------- */
  #feelgood .case-sub { color: #E9C9AA; }

  #feelgood .info-card {
    position: absolute;
    left: 170px;
    top: 220px;
    width: 286px;
    height: 144px;
    background: linear-gradient(180deg, #373737, #000);
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: none;
    margin-bottom: 0;
  }
  #feelgood .info-icon {
    position: absolute;
    left: 0;
    top: 48px;
    width: 137px;
    height: 49px;
    background: #fff;
    border-radius: 0 10px 10px 0;
    overflow: hidden;
  }
  #feelgood .info-icon img { position: absolute; left: 2px; top: 0; width: 135px; height: 47px; object-fit: contain; }
  #feelgood .info-meta, #feelgood .meta-block { display: contents; }
  #feelgood .meta-label {
    position: absolute;
    left: 143px;
    font-size: 10px;
    line-height: 25px;
    font-weight: 400;
    color: #E9C9AA;
    opacity: 1;
    margin-bottom: 0;
  }
  #feelgood .meta-block:nth-child(1) .meta-label { top: 10px; }
  #feelgood .meta-block:nth-child(2) .meta-label { top: 81px; }
  #feelgood .palette {
    position: absolute;
    left: 143px;
    top: 34px;
    width: 126px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 2px;
  }
  #feelgood .type-specimen { position: absolute; left: 143px; top: 103px; }
  #feelgood .font-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px; line-height: 25px; color: #fff; }
  #feelgood .font-sample { font-size: 25px; font-weight: 400; color: #929194; line-height: 25px; }

  #feelgood .desc {
    position: absolute;
    left: 170px;
    top: 390px;
    width: 494px;
    font-size: 20px;
    line-height: 25px;
    margin: 0;
  }
  #feelgood .desc-head { color: #fff; padding-bottom: 0; margin-bottom: 8px; border-bottom: none; }
  #feelgood .desc-tail { color: #e9c9aa; }
  #feelgood .case-divider { position: absolute; left: 172px; top: 445px; width: 435px; height: 1px; background: #E9C9AA; }

  #feelgood .gallery-block--banners { position: absolute; left: 170px; top: 649px; margin-bottom: 0; }
  #feelgood .gallery-label { width: max-content; font-size: 35px; line-height: 25px; font-weight: 400; color: #fff; margin: 0 0 46px; }
  #feelgood .banner-grid { display: flex; gap: 13px; }
  #feelgood .banner-cell {
    width: 220px;
    height: 275px;
    flex: none;
    aspect-ratio: auto;
    border: none;
    border-radius: 15px;
    background: none;
  }

  /* ---------- #nexum: exact Figma coordinates for the shared components above ---------- */
  #nexum .case-stage { height: 1150px; }
  #nexum { height: calc(1150px * var(--stage-scale)); }
  #nexum .case-title { top: 75px; }
  #nexum .case-sub { left: 181px; top: 141px; width: 151px; height: 50px; white-space: normal; color: #C7A5FF; }

  #nexum .info-card {
    position: absolute;
    left: 170px;
    top: 220px;
    width: 286px;
    height: 144px;
    background: linear-gradient(180deg, #373737, #000);
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: none;
    margin-bottom: 0;
  }
  #nexum .info-icon {
    position: absolute;
    left: 5px;
    top: 8px;
    width: 126px;
    height: 126px;
    background: none;
    border-radius: 0;
  }
  #nexum .info-icon img { object-fit: contain; }
  #nexum .info-meta, #nexum .meta-block { display: contents; }
  #nexum .meta-label {
    position: absolute;
    left: 143px;
    font-size: 10px;
    line-height: 25px;
    font-weight: 400;
    color: #C7A5FF;
    opacity: 1;
    margin-bottom: 0;
  }
  #nexum .meta-block:nth-child(1) .meta-label { top: 10px; }
  #nexum .meta-block:nth-child(2) .meta-label { top: 81px; }
  #nexum .palette {
    position: absolute;
    left: 143px;
    top: 34px;
    width: 126px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 2px;
  }
  #nexum .type-specimen { position: absolute; left: 143px; top: 101px; }
  #nexum .font-name { font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 25px; color: #fff; }
  #nexum .font-sample { font-size: 25px; font-weight: 700; color: #929194; line-height: 1; }

  #nexum .desc {
    position: absolute;
    left: 170px;
    top: 390px;
    width: 540px;
    font-size: 20px;
    line-height: 25px;
    margin: 0;
  }
  #nexum .desc-head { color: #fff; padding-bottom: 0; margin-bottom: 8px; border-bottom: none; }
  #nexum .desc-tail { color: #c7a5ff; }
  #nexum .case-divider { position: absolute; left: 172px; top: 445px; width: 510px; height: 1px; background: #C7A5FF; }

  #nexum .gallery-block { margin-bottom: 0; }
  #nexum .gallery-label { width: max-content; font-size: 20px; line-height: 25px; font-weight: 400; color: #fff; margin: 0; }

  #nexum .gallery-block--tiles { position: absolute; left: 170px; top: 527px; }
  #nexum .tile-grid {
    position: absolute;
    left: 0;
    top: 57px;
    display: grid;
    grid-template-columns: repeat(2, 377px);
    gap: 28px 10px;
  }
  #nexum .tile-cell { width: 377px; height: 212px; border-radius: 15px; border: none; background: #0c0d0f; }

  #nexum .gallery-block--banners { position: absolute; left: 959px; top: 769px; }
  #nexum .banner-grid { position: absolute; left: 0; top: 51px; display: flex; gap: 13px; }
  #nexum .banner-cell {
    width: 220px;
    height: 275px;
    flex: none;
    aspect-ratio: auto;
    border: none;
    border-radius: 15px;
    background: none;
  }

  /* ---------- #keepcall: exact Figma coordinates for the shared components above ---------- */
  #keepcall .case-sub { color: #ffe41b; }

  #keepcall .info-card {
    position: absolute;
    left: 170px;
    top: 220px;
    width: 286px;
    height: 144px;
    background: linear-gradient(180deg, #373737, #000);
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: none;
    margin-bottom: 0;
  }
  #keepcall .info-icon {
    position: absolute;
    left: -22px;
    top: 16px;
    width: 175px;
    height: 116px;
    background: none;
    border-radius: 0;
  }
  #keepcall .info-icon img { object-fit: cover; }
  #keepcall .info-meta, #keepcall .meta-block { display: contents; }
  #keepcall .meta-label {
    position: absolute;
    left: 143px;
    font-size: 10px;
    line-height: 25px;
    font-weight: 400;
    color: #ffe41b;
    opacity: 1;
    margin-bottom: 0;
  }
  #keepcall .meta-block:nth-child(1) .meta-label { top: 10px; }
  #keepcall .meta-block:nth-child(2) .meta-label { top: 81px; }
  #keepcall .palette {
    position: absolute;
    left: 143px;
    top: 34px;
    width: 126px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 2px;
  }
  #keepcall .type-specimen { position: absolute; left: 143px; top: 103px; }
  #keepcall .font-name { font-family: 'Poppins', sans-serif; font-size: 15px; line-height: 25px; color: #fff; }
  #keepcall .font-sample { font-size: 25px; font-weight: 700; color: #929194; line-height: 1; }

  #keepcall .desc {
    position: absolute;
    left: 170px;
    top: 390px;
    width: 494px;
    font-size: 20px;
    line-height: 25px;
    color: #fff;
    margin: 0;
  }
  #keepcall .desc-head { color: #fff; padding-bottom: 0; margin-bottom: 8px; border-bottom: none; }
  #keepcall .desc-tail { color: #fad704; }
  #keepcall .case-divider { position: absolute; left: 172px; top: 445px; width: 376px; height: 1px; background: #ffe41b; }

  #keepcall .gallery-block { position: absolute; left: 170px; margin-bottom: 0; }
  #keepcall .gallery-block--strip { top: 527px; }
  #keepcall .gallery-block--banners { top: 669px; }
  #keepcall .gallery-label { width: max-content; font-size: 20px; font-weight: 400; color: #fff; margin: 0 0 26px; }
  #keepcall .gallery-block--strip .gallery-label { margin-bottom: 16px; }
  #keepcall .strip { width: 362px; height: 57px; }
  #keepcall .strip img { width: 100%; height: 100%; object-fit: contain; }
  #keepcall .banner-grid { display: flex; gap: 13px; }
  #keepcall .banner-cell {
    width: 220px;
    height: 275px;
    flex: none;
    aspect-ratio: auto;
    border: none;
    border-radius: 15px;
    background: none;
  }

  /* ---------- #predicthub: exact Figma coordinates for the shared components above ---------- */
  #predicthub .case-title { text-transform: none; }
  #predicthub .case-sub { color: #6b98ff; }

  #predicthub .info-card {
    position: absolute;
    left: 170px;
    top: 220px;
    width: 286px;
    height: 144px;
    background: linear-gradient(180deg, #373737, #000);
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: none;
    margin-bottom: 0;
  }
  #predicthub .info-icon {
    position: absolute;
    left: 4px;
    top: 15px;
    width: 114px;
    height: 112px;
    background: none;
    border-radius: 0;
  }
  #predicthub .info-icon img { object-fit: contain; }
  #predicthub .info-meta, #predicthub .meta-block { display: contents; }
  #predicthub .meta-label {
    position: absolute;
    left: 143px;
    font-size: 10px;
    line-height: 25px;
    font-weight: 400;
    color: #6b98ff;
    opacity: 1;
    margin-bottom: 0;
  }
  #predicthub .meta-block:nth-child(1) .meta-label { top: 10px; }
  #predicthub .meta-block:nth-child(2) .meta-label { top: 81px; }
  #predicthub .palette {
    position: absolute;
    left: 143px;
    top: 34px;
    width: 126px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 2px;
  }
  #predicthub .type-specimen { position: absolute; left: 143px; top: 103px; }
  #predicthub .font-name { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 25px; color: #fff; }
  #predicthub .font-sample { font-family: 'Inter', sans-serif; font-size: 25px; font-weight: 700; color: #929194; line-height: 1; }

  #predicthub .desc {
    position: absolute;
    left: 170px;
    top: 381px;
    width: 494px;
    font-size: 20px;
    line-height: 25px;
    margin: 0;
  }
  #predicthub .desc-head { color: #fff; padding-bottom: 0; margin-bottom: 8px; border-bottom: none; }
  #predicthub .desc-tail { color: #6b98ff; }
  #predicthub .case-divider { position: absolute; left: 172px; top: 436px; width: 435px; height: 1px; background: #6b98ff; }

  #predicthub .gallery-label { position: absolute; left: 169px; width: max-content; font-size: 20px; font-weight: 400; color: #fff; margin: 0; }
  #predicthub .gallery-label--slides { top: 507px; }
  #predicthub .gallery-label--banners { top: 724px; }

  #predicthub .slide-grid { position: absolute; left: 170px; top: 558px; display: flex; gap: 12px; max-width: none; }
  #predicthub .slide-cell { width: 263px; height: 147px; border-radius: 10px; border: none; }
  #predicthub .slide-cell img { width: 100%; height: 100%; object-fit: cover; }

  #predicthub .banner-grid { position: absolute; left: 170px; top: 770px; display: flex; gap: 13px; }
  #predicthub .banner-cell {
    width: 220px;
    height: 275px;
    flex: none;
    aspect-ratio: auto;
    border: none;
    border-radius: 15px;
    background: none;
  }

  /* ---------- #jrbmetal: exact Figma coordinates for the shared components above ---------- */
  #jrbmetal .case-title { text-transform: none; }
  #jrbmetal .case-sub { left: 181px; top: 151px; width: 139px; height: 40px; white-space: nowrap; color: #34abff; }

  #jrbmetal .info-card {
    position: absolute;
    left: 170px;
    top: 220px;
    width: 286px;
    height: 144px;
    background: linear-gradient(180deg, #373737, #000);
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: none;
    margin-bottom: 0;
  }
  #jrbmetal .info-icon {
    position: absolute;
    left: -30px;
    top: 26px;
    width: 181px;
    height: 90px;
    background: none;
    border-radius: 0;
  }
  #jrbmetal .info-icon img { object-fit: contain; }
  #jrbmetal .info-meta, #jrbmetal .meta-block { display: contents; }
  #jrbmetal .meta-label {
    position: absolute;
    left: 143px;
    font-size: 10px;
    line-height: 25px;
    font-weight: 400;
    color: #34abff;
    opacity: 1;
    margin-bottom: 0;
  }
  #jrbmetal .meta-block:nth-child(1) .meta-label { top: 10px; }
  #jrbmetal .meta-block:nth-child(2) .meta-label { top: 81px; }
  #jrbmetal .palette {
    position: absolute;
    left: 143px;
    top: 34px;
    width: 126px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 2px;
  }
  #jrbmetal .type-specimen { position: absolute; left: 143px; top: 103px; }
  #jrbmetal .font-name { font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 25px; color: #fff; }
  #jrbmetal .font-sample { font-family: 'Montserrat', sans-serif; font-size: 25px; font-weight: 700; color: #929194; line-height: 1; }

  #jrbmetal .desc {
    position: absolute;
    left: 170px;
    top: 390px;
    width: 534px;
    font-size: 20px;
    line-height: 25px;
    margin: 0;
  }
  #jrbmetal .desc-head { color: #fff; padding-bottom: 0; margin-bottom: 8px; border-bottom: none; }
  #jrbmetal .desc-tail { color: #34abff; }
  #jrbmetal .case-divider { position: absolute; left: 172px; top: 445px; width: 465px; height: 1px; background: #34abff; }

  .wide-shot, .tall-shot {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #22262a;
    max-width: 640px;
  }
  .tall-shot { max-width: 320px; }
  .stack { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }

  .screens-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap: 14px;
    max-width: 700px;
  }
  .screen-shot {
    border-radius: 12px; overflow: hidden; border: 1px solid #22262a;
  }

  .slide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 700px;
  }
  .slide-cell { border-radius: 10px; overflow: hidden; border: 1px solid #22262a; }

  /* ---------- info card internals shared by every case: Figma's 126x40 palette box, swatches inset 1px on every side ---------- */
  .case .info-card .palette { padding: 1px; gap: 3px; }
  .case .info-card .swatch { box-sizing: border-box; width: 22px; height: 36px; border-radius: 2px; border: none; }
  .case .info-card .type-specimen { gap: 8px; }
  .case .info-card .font-sample { flex: none; }

  /* ---------- FOOTER ----------
     1:1 with Figma "JRB" page > "Cases ukr" frame (fileKey xhcULTSTsjTUVoNz4cTxOW),
     footer group anchored on node 10224:278 "get started" + its siblings (heading
     10224:283, trust line 10224:285, tagline 10224:284) and beams 10328:1808/1810/1812/1813
     (Rectangle 28-31). Coordinates verified live via the Figma plugin API
     (node.x/y/width/height/rotation). The beams reuse the Portfolio footer's .pf-beam
     build; their tops (102/232) are the Figma boxes' offsets from the heading (-526/-396).
     Local origin (.footer-stage top:0) = absolute Figma y 13556, estimated from the
     screenshot's aspect ratio as this group's frame top — there is no explicit frame
     node wrapping just the footer, so this one offset is estimated, not read from Figma;
     every element's own position below (Δ from that origin) is exact. ------------- */
  .footer {
    position: relative;
    background: #000;
    text-align: center;
    padding-bottom: 48px;
  }
  .footer-visual {
    position: relative;
    width: 100%;
    height: calc(1315px * var(--stage-scale));
    overflow: hidden;
  }
  .footer-stage {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1920px;
    height: 1315px;
    letter-spacing: normal;
    transform: translateX(-50%) scale(var(--stage-scale));
    transform-origin: top center;
  }

  /* diagonal glow beams, Figma "Rectangle 28-31": built with the shared .pf-beam rules (see the Portfolio footer) */

  /* ----- heading (554,628 · 813x160) -----
     Every locale's Figma box is a different width but centred on x 960
     (RU is 490 · 941 wide), and the lines don't wrap — so the box spans the
     stage and centres the text, rather than using the English 813px box,
     which a longer line would overflow to the right and look left-aligned. */
  .footer-heading {
    position: absolute;
    left: 0;
    top: 628px;
    width: 1920px;
    height: 160px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 600;
    font-size: 65px;
    line-height: 80px;
    text-align: center;
    letter-spacing: 0.52px;
    margin: 0;
  }
  .footer-heading .fh-accent,
  .footer-heading .fh-line { display: block; white-space: nowrap; }
  .footer-heading .fh-accent { color: #71DBE2; }
  .footer-heading .fh-line { color: #fff; }

  /* ----- CTA: Rectangle 6 (649,847 · 622.13x113.68) ----- */
  /* Same canonical gradient as .hero .cta-pill (Figma node 9393:367) — the
     separate darker "-inner" layer this used to have is retired in favour of
     one flat pill fill. */
  .footer-cta {
    position: absolute;
    left: 649px;
    top: 847px;
    width: 622.13px;
    height: 113.68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 60px;
    background: linear-gradient(116.519deg, #71DBE2 36.523%, #68DBF0 93.454%);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .footer-cta-inner { display: none; }
  .footer-cta-label {
    position: relative;
    z-index: 1;
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 40px;
    letter-spacing: 0.52px;
    color: #000000;
    white-space: nowrap;
  }
  .footer-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -6px rgba(43,196,214,.5); }

  /* ----- trust line (643,974 · 634x42) — full-width box, same reason as the heading ----- */
  .footer-trust {
    position: absolute;
    left: 0;
    top: 974px;
    width: 1920px;
    height: 42px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 42px;
    letter-spacing: 0.52px;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
    margin: 0;
  }

  /* ----- tagline (578,1074 · 762x84) ----- */
  .footer-lead {
    position: absolute;
    left: 0;
    top: 1074px;
    width: 1920px;
    white-space: nowrap; /* lines are set with <br>, per Figma */
    height: 84px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 42px;
    text-align: center;
    letter-spacing: 0.52px;
    color: #FFFFFF;
    margin: 0;
  }

  /* not part of the Figma frame — kept as plain flow content below the stage */
  .footer-copyright { display: block; margin-top: 24px; color: #5c6266; font-size: 12.5px; }

  /* =====================================================================
     PORTFOLIO PAGE
     1:1 with Figma "JRB (Copy)" > frame Portfolio (10334:3107), 1920x7343.
     The whole page is one stage, so every offset below is a raw Figma
     coordinate inside .pf-stage and the contract's y is the document's y.
     ===================================================================== */
  .pf-shell {
    position: relative;
    width: 100%;
    height: calc(7343px * var(--stage-scale));
    background: #000;
    overflow: hidden;
  }
  .pf-stage {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1920px;
    height: 7343px;
    letter-spacing: normal;
    overflow: hidden;              /* the Figma frame clips the beams and the rails */
    transform: translateX(-50%) scale(var(--stage-scale));
    transform-origin: top center;
  }

  /* ---------- hero, frame "IVC" (10334:3255) ---------- */
  .pf-hero {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    background: #000;
    overflow: hidden;
  }
  /* same mask + photo as the Cases hero; this frame sits 10px lower (10334:3258) */
  .pf-hero .hero-bg-mask { top: -3px; }

  .pf-eyebrow-rule {
    position: absolute;
    left: 174px;
    top: 187px;
    width: 224px;
    height: 1px;
    background: #FFFFFF;
  }
  .pf-eyebrow {
    position: absolute;
    left: 405px;
    top: 163px;
    height: 48px;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 48px;
    color: #71DBE2;
    white-space: nowrap;
  }

  .pf-h1 {
    position: absolute;
    left: 170px;
    top: 212px;
    height: 140px;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-size: 50px;
    line-height: 70px;
    white-space: nowrap;
  }
  .pf-h1-line { display: block; font-weight: 700; color: #FFFFFF; }
  .pf-h1-accent { display: block; font-weight: 500; color: #71DBE2; }

  .pf-lead {
    position: absolute;
    left: 170px;
    top: 377px;
    width: 676px;
    height: 52px;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 36px;
    color: #FFFFFF;
  }
  .pf-lead-em { font-weight: 400; }
  .pf-lead-name { font-weight: 400; color: #71DBE2; }

  .pf-pill {
    position: absolute;
    top: 527px;
    height: 47px;
    border-radius: 20px;
    background: rgba(217, 217, 217, 0.2);
  }
  /* one text run across all four pills in the source (10334:3267) */
  .pf-tags {
    position: absolute;
    left: 174px;
    top: 538px;
    height: 25px;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-weight: 300;
    font-size: 25px;
    line-height: 25px;
    color: #FFFFFF;
    white-space: pre;
  }

  /* Same canonical gradient as .hero .cta-pill (Figma node 9393:367) — the
     darkened "-inner" layer this used to have is retired in favour of one
     flat pill fill. */
  .pf-cta {
    position: absolute;
    left: 170px;
    top: 661.26px;
    width: 491px;
    height: 104px;
    border: none;
    border-radius: 60px;
    background: linear-gradient(116.519deg, #71DBE2 36.523%, #68DBF0 93.454%);
    cursor: pointer;
    padding: 0;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .pf-cta-inner { display: none; }
  /* line-height, not flex centring: Figma top-aligns the line box inside a
     53px node, which puts the glyphs 35.2px down — a 70.4px line reproduces it.
     Horizontally the label centres on the pill in every locale: the Figma
     box (left 101px, 302px wide) was sized for the old "VIEW MY WORK" copy. */
  .pf-cta-label {
    position: absolute;
    left: 0;
    top: 17.74px;
    width: 100%;
    height: 53px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 70.4px;
    letter-spacing: 0.52px;
    color: #000000;
    text-align: center;
    white-space: nowrap;
  }
  .pf-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -6px rgba(43, 196, 214, .5); }

  /* ---------- section rules and headers ---------- */
  .pf-rule {
    position: absolute;
    left: 0;
    width: 1920px;
    height: 3px;
    background: #71DBE2;
    box-shadow: 0 0 100px 10px #71DBE2;
  }
  .pf-num {
    position: absolute;
    left: 162px;
    height: 71px;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 45px;
    line-height: 70.4px;
    letter-spacing: 0.52px;
    color: #FFFFFF;
    white-space: nowrap;
  }
  .pf-title {
    position: absolute;
    left: 266px;
    height: 71px;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 50px;
    line-height: 70.4px;
    letter-spacing: 0.52px;
    color: #FFFFFF;
    white-space: nowrap;
  }
  .pf-desc {
    position: absolute;
    left: 269px;
    height: 56px;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.52px;
    color: #FFFFFF;
    white-space: nowrap;
  }

  /* ---------- horizontal rails ----------
     The source rows are 4372-12595px wide inside a 1920 frame, i.e. clipped by
     it. In the browser they become drag/scroll carousels: the track keeps the
     Figma gaps and card widths, so at scrollLeft 0 every card sits at its
     contract coordinate. */
  .pf-rail {
    position: absolute;
    width: 1758px;                 /* 1920 frame minus the 162px left margin */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    cursor: grab;
  }
  .pf-rail::-webkit-scrollbar { display: none; }
  .pf-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .pf-rail.is-dragging * { pointer-events: none; }
  .pf-track {
    display: flex;
    align-items: flex-start;
    width: max-content;
    height: 100%;
  }
  .pf-card { flex: none; scroll-snap-align: start; }
  .pf-card > img,
  .pf-card--ban > img,
  .pf-card--link > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
  }
  .pf-card--ban { height: 475px; border-radius: 25px; }
  .pf-card--link { border-radius: 25px; }

  /* web cards (10837:4031): 845x475 shot, 4x61 bar, title, subtitle */
  .pf-card--web { position: relative; width: 845px; height: 575px; }
  .pf-web-shot {
    position: absolute;
    left: 0;
    top: 0;
    width: 845px;
    height: 475px;
    border-radius: 25px;
    overflow: hidden;
  }
  .pf-web-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;   /* the source crops these from the top */
  }
  .pf-web-bar {
    position: absolute;
    left: 88px;
    top: 509px;
    width: 4px;
    height: 61px;
    background: #FFFFFF;
  }
  .pf-web-title {
    position: absolute;
    left: 104px;
    top: 509px;
    height: 28px;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 28px;
    letter-spacing: 0.52px;
    color: #FFFFFF;
    white-space: nowrap;
  }
  .pf-web-sub {
    position: absolute;
    left: 104px;
    top: 547px;
    height: 28px;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-weight: 300;
    font-size: 25px;
    line-height: 28px;
    letter-spacing: 0.52px;
    color: #FFFFFF;
    white-space: nowrap;
  }

  /* ---------- motion / 3D grids ----------
     Geometry only: these tiles carry no artwork in the Figma source, so they
     ship as styled placeholders until the footage lands. */
  .pf-tile {
    position: absolute;
    border-radius: 25px;
    background: rgba(217, 217, 217, 0.05);
    border: 1px solid rgba(113, 219, 226, 0.18);
  }

  /* Motion grid (02): the tile clips a cover-fitted YouTube iframe injected by
     pf-video.js, which also sets the poster thumbnail and the iframe's px size.
     isolation makes the radius clip the iframe in Safari. */
  .pf-tile--video {
    overflow: hidden;
    isolation: isolate;
    background-color: #000;
    background-size: cover;
    background-position: center;
    cursor: pointer;
  }
  .pf-tile--video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 0;
    /* slight overscan hides YouTube's 1px edge line */
    transform: translate(-50%, -50%) scale(1.01);
    pointer-events: none;   /* no hover title bar, logo or "watch on YouTube" */
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  .pf-tile--video.is-playing iframe { opacity: 1; }

  .pf-tile-sound {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 1;
    width: 48px;
    height: 48px;
    padding: 12px;
    border: 1px solid rgba(113, 219, 226, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, border-color 0.2s ease;
  }
  .pf-tile--video:hover .pf-tile-sound,
  .pf-tile-sound:focus-visible,
  .pf-tile-sound[aria-pressed="true"] { opacity: 1; border-color: rgba(113, 219, 226, 0.8); }
  .pf-tile-sound svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .pf-tile-sound .spk { fill: currentColor; }
  .pf-tile-sound .on,
  .pf-tile-sound[aria-pressed="true"] .off { display: none; }
  .pf-tile-sound[aria-pressed="true"] .on { display: inline; }

  /* ---------- footer ---------- */
  /* Each beam is the 1359.77px square the source uses (10334:3524-3527) with a
     1920x3 bar rotated inside it, so the measured box matches the contract node. */
  .pf-beam {
    position: absolute;
    width: 1359.766px;
    height: 1359.766px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  /* the source's own x for the mirrored right pair decomposes from a reflected
     (negative-determinant) transform and does not land symmetrically, so the
     right pair is built as a true CSS mirror of the left one instead */
  .pf-beam--l { left: -609.88px; }
  .pf-beam--r { right: -609.88px; }
  .pf-beam > i {
    flex: none;
    display: block;
    width: 1920px;
    height: 3px;
    background: #71DBE2;
    box-shadow: 0 0 100px 10px #71DBE2;
  }
  .pf-beam--l > i { transform: rotate(45deg); }
  /* mirror of the left pair; the source composes rotate(135deg) with scaleY(-1),
     which on a 3px bar is the same line as a plain 135deg rotation */
  .pf-beam--r > i { transform: rotate(135deg); }

  /* Heading, trust line and tagline span the stage and centre their text:
     Figma's boxes for these are centred on x 960 in every locale, and a
     translated line wider than the English box would otherwise overflow it
     to the right (see .footer-heading). */
  .pf-footer-heading {
    position: absolute;
    left: 0;
    top: 6718px;
    width: 1920px;
    height: 160px;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-size: 65px;
    line-height: 80px;
    letter-spacing: 0.52px;
    text-align: center;
  }
  .pf-fh-accent { display: block; font-weight: 600; color: #71DBE2; white-space: nowrap; }
  .pf-fh-line { display: block; font-weight: 400; color: #FFFFFF; white-space: nowrap; }

  /* Same canonical gradient as .hero .cta-pill (Figma node 9393:367) — the
     darkened "-inner" layer this used to have is retired in favour of one
     flat pill fill. */
  .pf-footer-cta {
    position: absolute;
    left: 649px;
    top: 6927px;
    width: 622.13px;
    height: 113.68px;
    border: none;
    border-radius: 60px;
    background: linear-gradient(116.519deg, #71DBE2 36.523%, #68DBF0 93.454%);
    cursor: pointer;
    padding: 0;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .pf-footer-cta-inner { display: none; }
  .pf-footer-cta-label {
    position: absolute;
    left: 89.06px;
    top: 22.95px;
    width: 447px;
    height: 57px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 70.4px;
    letter-spacing: 0.52px;
    color: #000000;
    text-align: left;
    white-space: nowrap;
  }
  .pf-footer-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -6px rgba(43, 196, 214, .5); }

  .pf-footer-trust {
    position: absolute;
    left: 0;
    top: 7051px;
    width: 1920px;
    height: 42px;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 42px;
    letter-spacing: 0.52px;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
  }
  .pf-footer-lead {
    position: absolute;
    left: 0;
    top: 7154px;
    width: 1920px;
    white-space: nowrap; /* lines are set with <br> */
    height: 84px;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 42px;
    letter-spacing: 0.52px;
    color: #FFFFFF;
    text-align: center;
  }

  /* ---------- localisation ----------
     Every box above is the English frame's exact geometry, including labels
     that start at their Figma text node's left edge. Translated labels are
     wider than that and would run out of their pill, so for other locales the
     label centres on the pill instead, and the toggle drops to the same 20px
     the Cases frame uses for its longer tab. Measured against all four
     dictionaries: the widest label now clears its pill in every locale. */
  html:not([lang="en"]) .pf-footer-cta-label {
    left: 12.83px;
    width: 600.75px;
    text-align: center;
  }
  html:not([lang="en"]) .hero-toggle .ht-label {
    font-size: 20px;
  }

  /* Cases: each locale has its own Figma frame ("JRB (Copy)" file
     cvWh6sylCW4j2gJh2nczBH — Cases eng 10238:297, Cases ukr 9393:364,
     Cases ru 10334:2667, Cases fr 10334:2245). The per-case rules above are
     the English frame; these are the boxes that differ in the other frames.
     Line breaks live in the i18n strings as <br>, so a description only
     wraps where its Figma text node does. Every desc_head is fully broken
     with <br>s, so it never wraps: browser Unbounded runs a pixel or two
     wider than Figma's, enough to push a line that just fits onto a third
     line (UA/RU WeHunt) and shove the tail into the gallery label. */
  .case .desc-head { white-space: nowrap; }
  html[lang="uk"] #anchor .desc-head,
  html[lang="ru"] #anchor .desc-head { padding-bottom: 0; margin-bottom: 8px; }
  html[lang="uk"] #wehunt .desc-head,
  html[lang="ru"] #wehunt .desc-head { margin-bottom: 8px; }
  html[lang="uk"] #horror .desc,
  html[lang="ru"] #horror .desc { width: 494px; }
  html[lang="uk"] #anchor .case-divider,
  html[lang="uk"] #horror .case-divider,
  html[lang="uk"] #keepcall .case-divider,
  html[lang="uk"] #jrbmetal .case-divider,
  html[lang="ru"] #anchor .case-divider,
  html[lang="ru"] #horror .case-divider,
  html[lang="ru"] #keepcall .case-divider,
  html[lang="ru"] #jrbmetal .case-divider { width: 410px; }
  html[lang="uk"] #astoria .case-divider { width: 387px; }
  html[lang="uk"] #wehunt .case-divider { width: 395px; }
  html[lang="uk"] #feelgood .case-divider { width: 407px; }
  html[lang="uk"] #nexum .case-divider { width: 444px; }
  html[lang="uk"] #predicthub .case-divider { width: 405px; }

  html[lang="ru"] #vibero .desc { width: 500px; }
  html[lang="ru"] #astoria .desc { width: 532px; }
  html[lang="ru"] #feelgood .desc { width: 517px; }
  html[lang="ru"] #astoria .case-divider { width: 415px; }
  html[lang="ru"] #wehunt .case-divider { width: 391px; }
  html[lang="ru"] #feelgood .case-divider { width: 392px; }
  html[lang="ru"] #nexum .case-divider { width: 452px; }
  html[lang="ru"] #predicthub .case-divider { width: 414px; }

  html[lang="fr"] #wehunt .case-sub { top: 125px; line-height: 28px; }
  html[lang="fr"] #anchor .desc { width: 635px; }
  html[lang="fr"] #fpcrm .desc { width: 543px; }
  html[lang="fr"] #vibero .desc { width: 570px; }
  html[lang="fr"] #astoria .desc { width: 542px; }
  html[lang="fr"] #horror .desc { width: 538px; }
  html[lang="fr"] #nexum .desc { width: 527px; font-size: 19px; }
  html[lang="fr"] #keepcall .desc { width: 581px; }
  html[lang="fr"] #predicthub .desc { width: 474px; }
  html[lang="fr"] #anchor .case-divider { width: 439px; }
  html[lang="fr"] #vibero .case-divider { width: 423px; }
  html[lang="fr"] #wehunt .case-divider { width: 321px; }
  html[lang="fr"] #nexum .case-divider { width: 498px; }
  html[lang="fr"] #keepcall .case-divider { width: 416px; }
  html[lang="fr"] #predicthub .case-divider { width: 464px; }
  html[lang="fr"] #jrbmetal .case-divider { width: 457px; }

  /* not part of the Figma frame — plain flow content below the stage */
  .pf-copyright {
    display: block;
    text-align: center;
    padding: 24px 0 48px;
    color: #5c6266;
    font-size: 12.5px;
  }

  /* Click-to-expand lightbox for case banner/gallery images (public/assets/js/lightbox.js) */
  body.lightbox-locked { overflow: hidden; }
  .lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(0, 0, 0, 0.88);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
  }
  .lightbox-overlay.is-open { opacity: 1; visibility: visible; }
  .lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6);
  }
  .lightbox-close {
    position: fixed;
    top: 24px;
    right: 32px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .lightbox-close:hover, .lightbox-close:focus { background: rgba(255, 255, 255, 0.2); }
  .case-bg img, .banner-cell img, .banner-wide-cell img, .tile-cell img { cursor: pointer; }

  /* ---------- contact form modal (public/assets/js/contact-modal.js) ----------
     Opened by every CTA pill (hero + footer, both pages). Card style follows
     Figma "reg" node 14005:2 — white-to-cyan gradient card, rounded 35px,
     soft shadow, X close, gray email pill, teal gradient submit pill. */
  body.contact-modal-locked { overflow: hidden; }
  .contact-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
  }
  .contact-modal.is-open { opacity: 1; visibility: visible; }
  .contact-modal-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    padding: 56px 48px 48px;
    border: 1px solid #ffffff;
    border-radius: 35px;
    background: linear-gradient(180deg, #ffffff 0%, #a1f1ff 100%);
    box-shadow: 0 4px 55px rgba(0, 0, 0, 0.25);
    transform: translateY(12px);
    transition: transform 0.25s ease;
  }
  .contact-modal.is-open .contact-modal-card { transform: translateY(0); }
  .contact-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
  }
  .contact-modal-close::before,
  .contact-modal-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: #9aa0a3;
    transition: background 0.2s ease;
  }
  .contact-modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .contact-modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .contact-modal-close:hover::before,
  .contact-modal-close:hover::after { background: #000000; }
  .contact-modal-title {
    margin: 0 0 32px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.3;
    color: #0d0d0d;
    text-align: center;
  }
  .contact-modal-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .contact-modal-form[hidden] { display: none; }
  .contact-modal-input {
    width: 100%;
    height: 64px;
    border: none;
    border-radius: 32px;
    background: rgba(0, 0, 0, 0.35);
    padding: 0 28px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
  }
  .contact-modal-input::placeholder { color: rgba(255, 255, 255, 0.75); }
  .contact-modal-input:focus-visible { outline: 2px solid #00abb7; outline-offset: 2px; }
  .contact-modal-submit {
    align-self: center;
    min-width: 220px;
    height: 64px;
    padding: 0 40px;
    border: none;
    border-radius: 32px;
    background: linear-gradient(90deg, #006d74, #00abb7);
    color: #ffffff;
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .contact-modal-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -6px rgba(43, 196, 214, .5); }
  .contact-modal-turnstile { display: flex; justify-content: center; max-width: 100%; }
  .contact-modal-submit:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
  .contact-modal-error {
    margin: 16px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #b3261e;
    text-align: center;
  }
  .contact-modal-error[hidden] { display: none; }
  .contact-modal-success {
    margin: 20px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #0d0d0d;
    text-align: center;
  }
  @media (max-width: 480px) {
    .contact-modal-card { padding: 48px 28px 32px; }
    .contact-modal-title { font-size: 22px; }
  }