/* ---------- App case studies ---------- */
    .app-cover { aspect-ratio: 1 / 1; }
    .app-cover img { object-position: center; }
    .case-hero .cta { margin-top: 24px; }
    .case-hero .btn { margin-top: 32px; }
    .private-tag { margin-top: 20px; display: inline-block; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rosewood-ink); border: 1px solid rgba(154, 116, 116, 0.5); padding: 6px 12px; }

    /* Screens: real app screens in a slim phone frame, with a caption */
    .screens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 16px; margin-top: 40px; }
    .screen { margin: 0; }
    .phone-frame { background: #1c1418; padding: 6px; border-radius: 26px; box-shadow: 0 24px 44px -30px rgba(26, 8, 18, 0.55); }
    .phone-frame img, .phone-frame video { display: block; width: 100%; height: auto; aspect-ratio: 6 / 11; object-fit: cover; border-radius: 20px; background: #1c1418; }
    .screen figcaption { margin-top: 14px; }
    .screen h3 { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; line-height: 1.3; }
    .screen p { margin-top: 4px; font-size: 14px; color: #4a3942; line-height: 1.6; }
    @media (min-width: 700px) { .screens { grid-template-columns: repeat(3, 1fr); gap: 48px 28px; } .phone-frame { border-radius: 32px; padding: 8px; } .phone-frame img, .phone-frame video { border-radius: 25px; } }
    @media (min-width: 1024px) { .screens { grid-template-columns: repeat(4, 1fr); gap: 56px 32px; } }
    /* Six or nine screens: three across, so the rows come out even */
    @media (min-width: 1024px) { .screens.three { grid-template-columns: repeat(3, 1fr); gap: 64px 56px; max-width: 900px; } }

    /* Demos: desktop apps, each clip in a browser frame beside its caption */
    .demos { display: grid; gap: 56px; margin-top: 40px; }
    .demo { margin: 0; display: grid; gap: 20px; align-items: center; }
    .demo .browser { max-width: none; }
    .demo video, .demo .browser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #e9e4de; }
    .demo h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.3; }
    .demo p { margin-top: 8px; font-size: 15px; color: #4a3942; line-height: 1.7; max-width: 30em; }
    @media (min-width: 1024px) {
      .demos { gap: 88px; }
      .demo { grid-template-columns: 8fr 4fr; gap: 48px; }
      .demo:nth-child(even) { grid-template-columns: 4fr 8fr; }
      .demo:nth-child(even) .browser { order: 2; }
    }
    .section.rosewood .points .cta { color: var(--white); display: inline-block; margin-top: 14px; }
    .demo .browser { border-radius: 8px; }
    .demo .browser-bar { height: 20px; gap: 5px; padding: 0 10px; }
    .demo .browser-bar span { width: 6px; height: 6px; }

    /* Apps overview: device mockups sit square, so show them whole */
    .apps-index .feature-pic { aspect-ratio: 1 / 1; }
    .apps-index .feature-pic img { object-position: center; }
    @media (min-width: 700px) { .apps-index .feature-pic { aspect-ratio: 5 / 4; } }

    /* ---------- Portfolio landing: each side is a photo beside a solid colour panel ---------- */
    .pf-intro { padding-bottom: 32px; }
    .pf-split { display: flex; flex-direction: column; gap: 16px; padding: 0 var(--gutter) 72px; max-width: 1440px; margin: 0 auto; }
    .pf-panel { display: grid; grid-template-rows: 260px auto; overflow: hidden; }
    .pf-photo { display: block; overflow: hidden; }
    .pf-photo img { display: block; width: 100%; height: 100%; object-fit: cover;
      filter: saturate(0.82) sepia(0.08) contrast(1.02); transition: transform 1.4s var(--ease); }
    .pf-text { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 32px 28px; }
    .pf-plum .pf-text { background: var(--plum); }
    .pf-sage .pf-text { background: #454733; }
    .pf-stone .pf-text { background: #717169; }
    .pf-rose .pf-text { background: #8a6465; }
    .pf-plum .pf-text, .pf-sage .pf-text, .pf-stone .pf-text, .pf-rose .pf-text { color: var(--white); }
    .pf-plum .eyebrow { color: var(--taupe); }
    .pf-sage .eyebrow, .pf-stone .eyebrow, .pf-rose .eyebrow { color: rgba(255, 255, 255, 0.82); }
    .pf-plum .pf-count, .pf-sage .pf-count, .pf-stone .pf-count, .pf-rose .pf-count { color: rgba(255, 255, 255, 0.78); }
    .pf-plum .cta, .pf-sage .cta, .pf-stone .cta, .pf-rose .cta { color: var(--white); }
    .pf-taupe .pf-text { background: var(--taupe); color: var(--plum); }
    .pf-taupe .eyebrow { color: var(--plum); opacity: 0.8; }
    .pf-taupe .pf-count { color: var(--plum); opacity: 0.75; }
    .pf-title { font-family: var(--serif); font-size: 2.4rem; line-height: 1.05; }
    .pf-count { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
    .pf-text .cta { align-self: flex-start; margin-top: 6px; }
    .pf-panel:hover .pf-photo img, .pf-panel:focus-visible .pf-photo img { transform: scale(1.04); }
    @media (min-width: 900px) {
      .pf-split { flex-direction: row; height: min(62vh, 520px); }
      .pf-panel { grid-template-rows: none; grid-template-columns: 1fr 1fr; flex: 1 1 0; transition: flex-grow 0.9s var(--ease); }
      .pf-panel:hover, .pf-panel:focus-visible { flex-grow: 1.35; }
      .pf-text { padding: 36px; }
      .pf-title { font-size: 2.8rem; }
    }
    @media (prefers-reduced-motion: reduce) { .pf-panel, .pf-photo img { transition: none; } }
    .pf-more .feature-pic { aspect-ratio: 5 / 4; }
    .pf-more .feature-pic img { object-position: center; }
    .pf-more .features { margin-top: 20px; }
    .pf-taupe .pf-text, .pf-stone .pf-text { background-image: url(images/linen.svg); background-size: 360px 360px; }

    .pf-plum .pf-text { background-image: url(images/linen-dark.svg); background-size: 360px 360px; }

    /* An app with its own brand: its board on white, two pictures side by side */
    .brand-sec { background: var(--white); }
    .brand-pics { display: grid; gap: 20px; margin: 36px 0 12px; }
    .brand-pics img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid rgba(65, 28, 50, 0.1); }
    @media (min-width: 900px) { .brand-pics { grid-template-columns: 1.15fr 1fr; align-items: start; } }