body {
    font-family: var(--font-family);
    font-size: var(--text--body-font-size);
    font-weight: var(--text--body-font-weight);
    line-height: var(--text--body-line-height);
    color: var(--color--text-primary);
    background: var(--color--background);
}

/* Pointer cursor for interactive elements — !important to override custom cursor JS */
.home-header-nav a,
.home-signature,
.home-signature *,
.cs-callout,
.cs-callout * {
    cursor: pointer !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a {
    color: var(--color--text-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--color--accent);
}

.accent {
    color: var(--color--accent);
}

.hero-context {
    font-family: var(--font-family);
    font-size: var(--text--hero-context-font-size);
    font-weight: var(--text--hero-context-font-weight);
    line-height: var(--text--hero-context-line-height);
    color: var(--color--hero-context-text);
}

.photo-caption {
    font-family: var(--text--photo-caption-font-family);
    font-size: var(--text--photo-caption-font-size);
    font-weight: var(--text--photo-caption-font-weight);
    line-height: var(--text--photo-caption-line-height);
    color: var(--color--photo-caption-text);
}

.image-with-caption {
    display: flex;
    flex-direction: column;
    gap: var(--size--8);
    margin: 0;
    width: 100%;
    min-width: 0;
}

.image-with-caption__frame {
    display: block;
    position: relative;
    line-height: 0;
    width: 100%;
    min-width: 0;
}

.image-with-caption__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--color--secondary-gray);
    box-sizing: border-box;
    pointer-events: none;
}

.image-with-caption__image {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
}

.image-with-caption__caption {
    margin: 0;
    text-align: right;
    font-family: var(--font-family);
    font-size: var(--size--12);
    font-weight: var(--text--body-font-weight);
    line-height: var(--text--body-line-height);
    color: var(--color--text-secondary);
}

.quote {
    font-family: var(--font-family);
    font-size: var(--text--quote-body-font-size);
    font-weight: var(--text--quote-body-font-weight);
    line-height: var(--text--quote-body-line-height);
    color: var(--color--quote-body-text);
}

.hero-title {
    font-family: var(--font-family);
    font-size: var(--text--hero-title-font-size);
    font-weight: var(--text--hero-title-font-weight);
    line-height: var(--text--hero-title-line-height);
    color: var(--color--hero-title-text);
}

.tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family);
    font-size: var(--text--tag-font-size);
    font-weight: var(--text--tag-font-weight);
    line-height: var(--text--tag-line-height);
    color: var(--color--tag-text);
    padding: var(--tag--padding-y) var(--tag--padding-x);
    border-radius: var(--tag--border-radius);
    white-space: nowrap;
}

.tag-list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tag--gap);
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: baseline;
}

ul.tag-list {
    display: flex;
}

ul.tag-list li {
    display: inline-flex;
    line-height: 1;
}

.tag--gray {
    background: var(--tag--gray-background);
}

.tag--brown {
    background: var(--tag--brown-background);
}

.tag--yellow {
    background: var(--tag--yellow-background);
}

.tag--blue {
    background: var(--tag--blue-background);
}

.tag--purple {
    background: var(--tag--purple-background);
}

.tag--pink {
    background: var(--tag--pink-background);
}

.tag--green {
    background: var(--tag--green-background);
}

.tag--b2b {
    background: var(--tag--b2b-background);
}

.tag--b2c {
    background: var(--tag--b2c-background);
}

.tag--for-fun {
    background: var(--tag--for-fun-background);
}

.tag--internal {
    background: var(--tag--internal-background);
}

.tag--external {
    background: var(--tag--external-background);
}

.tag--design-system {
    background: var(--tag--design-system-background);
}

.tag--feature {
    background: var(--tag--feature-background);
}

.tag--sales-prototype {
    background: var(--tag--sales-prototype-background);
}

.entry {
    font-family: var(--font-family);
    font-size: var(--text--entry-font-size);
    font-weight: var(--text--entry-font-weight);
    line-height: var(--text--entry-line-height);
    color: var(--color--entry-text);
}

.entry-metadata {
    color: var(--color--entry-metadata-text);
}

.entry .entry-metadata {
    line-height: inherit;
}

.entry-right .entry-metadata {
    line-height: var(--text--entry-line-height);
}

.section-footnote {
    font-family: var(--font-family);
    font-size: var(--text--section-footnote-font-size);
    font-weight: var(--text--section-footnote-font-weight);
    line-height: var(--text--section-footnote-line-height);
    color: var(--color--section-footnote-text);
    margin: 0;
}

.entry-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--entry--left-gap);
    width: 100%;
}

.entry-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--entry--left-gap);
    min-width: 0;
}

.entry-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    flex-shrink: 0;
}

.entry .tag-list {
    margin-left: 4px;
    position: relative;
    top: 0.5px;
}

.profile-section {
    display: flex;
    flex-direction: column;
    gap: var(--profile-section--title-gap);
}

.profile-section > .section-title {
    margin: 0;
}

.profile-section-entries {
    display: flex;
    flex-direction: column;
    gap: var(--profile-section--entries-gap);
    margin: 0;
    padding: 0;
}

.quote-title {
    font-family: var(--font-family);
    font-size: var(--text--quote-title-font-size);
    font-weight: var(--text--quote-title-font-weight);
    line-height: var(--text--quote-title-line-height);
    color: var(--color--quote-title-text);
}

.quote-author-name {
    font-family: var(--font-family);
    font-size: var(--text--quote-author-name-font-size);
    font-weight: var(--text--quote-author-name-font-weight);
    line-height: var(--text--quote-author-name-line-height);
    color: var(--color--quote-author-name-text);
}

.quote-author-role {
    font-family: var(--font-family);
    font-size: var(--text--quote-author-role-font-size);
    font-weight: var(--text--quote-author-role-font-weight);
    line-height: var(--text--quote-author-role-line-height);
    color: var(--color--quote-author-role-text);
}

.quote-author-title {
    color: var(--color--quote-author-title-text);
}

.quote-block {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--quote--padding);
    border-radius: var(--quote--border-radius);
    background: var(--quote--background);
}

.quote-block .quote-title,
.quote-block .quote {
    margin: 0;
}

.quote-block .quote-title {
    margin-bottom: var(--quote--section-gap);
}

.quote p {
    margin: 0;
}

.quote p + p {
    margin-top: var(--quote--body-paragraph-gap);
}

.quote-block .quote-attribution {
    display: flex;
    align-items: center;
    gap: var(--quote--attribution-gap);
    margin: var(--size--24) 0 0;
}

.quote-avatar {
    display: block;
    height: var(--quote--avatar-height);
    width: auto;
    flex-shrink: 0;
}

.quote-author {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.quote-author-name,
.quote-author-role {
    margin: 0;
}

.section-title {
    font-family: var(--font-family);
    font-size: var(--text--section-title-font-size);
    font-weight: var(--text--section-title-font-weight);
    line-height: var(--text--section-title-line-height);
    color: var(--color--section-title-text);
    text-transform: uppercase;
}

.text-content {
    display: flex;
    flex-direction: column;
    gap: var(--text-content--gap);
    margin: 0;
}

.text-content-title,
.text-content-body {
    font-family: var(--font-family);
    font-size: var(--text--body-font-size);
    font-weight: var(--text--body-font-weight);
    line-height: var(--text--body-line-height);
    color: var(--color--text-primary);
    margin: 0;
}

.text-content-title {
    font-weight: 600;
}

/* ─── Eyebrow ───────────────────────────────────────────────────────────────
   Small uppercase pre-title label, used above section headings.
   ────────────────────────────────────────────────────────────────────────── */
.eyebrow {
    font-family: var(--font-family);
    font-size: var(--text--eyebrow-font-size);
    font-weight: var(--text--eyebrow-font-weight);
    line-height: var(--text--eyebrow-line-height);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color--accent);
    margin: 0;
}

/* ─── Case study heading ─────────────────────────────────────────────────────
   Narrative section heading for case studies and prose pages. Italic for
   typographic contrast against the upright, bold surrounding text.
   ────────────────────────────────────────────────────────────────────────── */
.cs-heading {
    font-family: var(--font-family);
    font-size: var(--text--cs-heading-font-size);
    font-weight: var(--text--cs-heading-font-weight);
    font-style: italic;
    line-height: var(--text--cs-heading-line-height);
    color: var(--color--text-primary);
    margin: 0;
}

.cs-heading--hero {
    font-size: var(--text--cs-hero-heading-font-size);
    line-height: var(--text--cs-hero-heading-line-height);
}

/* ─── Case study body ────────────────────────────────────────────────────────
   Reading-focused body text with slightly more generous line-height.
   ────────────────────────────────────────────────────────────────────────── */
.cs-body {
    font-family: var(--font-family);
    font-size: var(--text--body-font-size);
    font-weight: var(--text--body-font-weight);
    line-height: var(--text--cs-body-line-height);
    color: var(--color--text-primary);
    margin: 0;
}

/* ─── Case study meta ────────────────────────────────────────────────────────
   Horizontal list of metadata items (role, scope, team, etc.).
   ────────────────────────────────────────────────────────────────────────── */
.cs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size--32);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cs-meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--size--4);
}

.cs-meta-label {
    font-size: var(--text--eyebrow-font-size);
    font-weight: var(--text--eyebrow-font-weight);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color--eyebrow-text);
    margin: 0;
}

.cs-meta-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--color--text-primary);
    margin: 0;
}

/* ─── Outcome card ───────────────────────────────────────────────────────────
   Card used in outcomes grids to surface a key result or metric.
   ────────────────────────────────────────────────────────────────────────── */
.cs-outcome-card {
    background: var(--cs-outcome-card--background);
    border-radius: var(--cs-outcome-card--border-radius);
    padding: var(--cs-outcome-card--padding);
}

.cs-outcome-card-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--color--text-primary);
    line-height: 1.3;
    margin: 0 0 var(--size--4);
}

.cs-outcome-card-label {
    font-size: 13px;
    color: var(--color--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.cs-outcomes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--size--8);
}

/* ─── Visual slot ────────────────────────────────────────────────────────────
   Dashed placeholder for images or screen recordings not yet available.
   ────────────────────────────────────────────────────────────────────────── */
.cs-visual-slot {
    border: 1.5px dashed var(--color--secondary-gray);
    border-radius: var(--size--8);
    padding: var(--size--16);
}

.cs-visual-slot-label {
    font-size: var(--text--eyebrow-font-size);
    font-weight: var(--text--eyebrow-font-weight);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color--eyebrow-text);
    margin: 0 0 var(--size--4);
}

.cs-visual-slot-desc {
    font-size: 14px;
    font-style: italic;
    color: var(--color--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ─── Team grid ──────────────────────────────────────────────────────────────
   Two-column layout for listing team members by region or function.
   ────────────────────────────────────────────────────────────────────────── */
.cs-team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size--32);
}

.cs-team-col {
    display: flex;
    flex-direction: column;
}

.cs-team-col-label {
    font-size: var(--text--eyebrow-font-size);
    font-weight: var(--text--eyebrow-font-weight);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color--eyebrow-text);
    margin: 0 0 var(--size--12);
}

.cs-team-col-label + .cs-team-col-label,
.cs-team-member + .cs-team-col-label {
    margin-top: var(--size--24);
}

.cs-team-member {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--size--8);
}

.cs-team-member:last-child {
    margin-bottom: 0;
}

.cs-team-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color--text-primary);
    margin: 0;
}

.cs-team-role {
    font-size: 13px;
    color: var(--color--text-secondary);
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 560px) {
    .cs-team-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── External link button ───────────────────────────────────────────────────
   Bordered pill button for linking to prototypes, demos, or external tools.
   ────────────────────────────────────────────────────────────────────────── */
.ext-link {
    display: inline-flex;
    align-items: center;
    gap: var(--size--8);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    color: var(--color--text-primary);
    text-decoration: none;
    padding: var(--ext-link--padding-y) var(--ext-link--padding-x);
    border: 1px solid var(--ext-link--border-color);
    border-radius: var(--ext-link--border-radius);
    transition: background 0.15s, border-color 0.15s;
}

.ext-link:hover {
    color: var(--color--text-primary);
    background: var(--color--background-secondary);
    border-color: #bbb;
}

.ext-link svg {
    flex-shrink: 0;
    display: block;
}