/* Additive business-services presentation. Original styles and carousel stay intact. */
.inside-work { padding-bottom: clamp(4rem, 8vw, 7rem); }
.inside-intro { padding-bottom: clamp(2rem, 5vw, 4rem); }
.report-preview, .system-card, .data-chart, .insight-panel { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.report-preview { overflow: hidden; }
.report-preview-copy { max-width: 820px; padding: clamp(1.5rem, 4vw, 3rem); }
.report-preview-copy h3 { font-size: clamp(2rem, 4vw, 3.2rem); }
.report-preview-copy > p:not(.eyebrow), .system-card > p:not(.eyebrow):not(.card-number) { color: var(--muted); }
.chart-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-width: 0; }
.report-preview > .chart-pair { padding: 0 clamp(1rem, 3vw, 2rem); }
.data-chart { min-width: 0; margin: 0; padding: clamp(1rem, 2.5vw, 2rem); background: var(--bg-deep); }
.data-chart h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.025em; }
.data-chart .eyebrow { font-size: .65rem; letter-spacing: .1em; }
.data-chart figcaption > p { margin: .65rem 0 1.4rem; color: var(--muted); font-size: .84rem; }
.generation-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.generation-bars li { display: grid; grid-template-columns: 3rem 1fr 1.7rem; align-items: center; gap: .8rem; font-size: .85rem; }
.generation-bars strong { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.bar-track { height: .62rem; border-radius: 99px; background: rgba(184,186,209,.13); }
.bar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #008fc2, #00e5d1); }
.generation-bars li:nth-child(n+4) .bar-fill { background: linear-gradient(90deg, #008b83, #20f343); }
.trend-chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid line { stroke: rgba(184,186,209,.15); }
.chart-grid text, .chart-labels { fill: var(--muted); font: 13px ui-sans-serif, system-ui, sans-serif; }
.chart-line { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linejoin: round; }
.chart-area { fill: rgba(0,229,255,.08); }
.chart-points { fill: var(--green); stroke: var(--bg-deep); stroke-width: 2; }
.timeline-plot { position: relative; margin: 1.7rem 0 1rem; padding-left: 2.8rem; }
.timeline-plot .trend-chart { aspect-ratio: 470 / 210; }
.timeline-y { position: absolute; top: 0; right: calc(100% - 2.2rem); bottom: 1.9rem; left: 0; color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.timeline-y span { position: absolute; right: 0; transform: translateY(-50%); }
.timeline-x { display: flex; justify-content: space-between; height: 1.9rem; padding-top: .7rem; color: var(--muted); font-size: .72rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.timeline-note { color: var(--muted); font-size: .8rem; line-height: 1.6; margin: 1rem 0 0; }
.feature-window rect { fill: rgba(255, 212, 246, .16); }
.feature-window line { stroke: var(--pink); stroke-width: 1; stroke-dasharray: 3 3; }
.feature-swatch { display: inline-block; width: .8rem; height: .8rem; margin-right: .4rem; border: 1px dashed var(--pink); background: rgba(255, 212, 246, .16); vertical-align: -.05rem; }
.snapshot-table { overflow-x: auto; }
.snapshot-table:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.referral-figure { grid-column: 1 / -1; }
.referral-figure .timeline-plot { max-width: 850px; margin-inline: auto; }
.referral-context { max-width: 88ch; color: var(--muted); font-size: .9rem; }
.referral-context strong { color: var(--text); }
.referral-context a { color: var(--cyan); text-underline-offset: .2em; }

/* One section-rule length, while retaining the existing full-bleed artwork. */
:root { --section-rule-inset: max(1rem, calc((100vw - var(--max)) / 2)); }
.section-index { justify-content: flex-start; min-height: 0; gap: 1rem; }
.experiences-heading { align-items: start; }
.proof-grid { position: relative; gap: 0; border-bottom: 0; background: transparent; }
.proof-card, .feature-panel, .contact { position: relative; }
.feature-panel, .contact { border-block: 0; }
.proof-grid::after, .proof-card + .proof-card::before, .feature-panel::after, .contact::before {
  content: ""; position: absolute; z-index: 2; right: var(--section-rule-inset); left: var(--section-rule-inset); height: 1px; background: var(--line); pointer-events: none;
}
.proof-grid::after, .feature-panel::after { bottom: 0; }
.proof-card + .proof-card::before, .contact::before { top: 0; }
@media (min-width: 901px) { .experience-card h3 { min-height: 2.04em; } }
.source-note { margin: 1.3rem 0 0; color: var(--muted); font-size: .79rem; line-height: 1.6; }
.report-preview > .source-note { padding: 0 clamp(1rem, 3vw, 2rem) 1.5rem; }
.systems-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.system-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 4vw, 3rem); min-width: 0; }
.system-card .card-number { margin-bottom: 2rem; }
.system-card h3 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.12; }
.system-card .text-link { margin-top: auto; padding-top: 1rem; }
.section-outro { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2rem; }
.section-outro p { color: var(--muted); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .7rem; padding-top: 2rem; color: var(--muted); font-size: .8rem; }
.breadcrumbs a { text-decoration-thickness: 1px; text-underline-offset: .25em; }
.business-hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); }
.business-hero h1 { max-width: 1100px; font-size: clamp(3rem, 7.3vw, 6.6rem); }
.business-lede { max-width: 820px; margin-top: 1.7rem; color: var(--muted); font-size: clamp(1.15rem, 2vw, 1.5rem); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
.service-grid .system-card { padding: clamp(1.3rem, 2.6vw, 2.2rem); }
.service-grid h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.case-section { padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid var(--line); }
.section-divider { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--line); }
.case-section > h2 { max-width: 970px; font-size: clamp(2.4rem, 5.3vw, 4.5rem); }
.case-section > p:not(.eyebrow):not(.source-note):not(.measurement-note) { max-width: 860px; color: var(--muted); }
.case-lede { font-size: clamp(1.08rem, 1.8vw, 1.3rem); margin: 1.8rem 0 2.5rem; }
.three-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3rem; }
.three-notes h3, .decision-grid h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.15; }
.three-notes p, .decision-grid p:not(.eyebrow) { color: var(--muted); }
.case-links { margin-top: 2.5rem; }
.case-links > a { display: grid; grid-template-columns: minmax(160px, .65fr) minmax(0, 1.4fr) auto; gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); text-decoration: none; align-items: center; }
.case-links > a:hover strong { color: var(--cyan); }
.case-links span { color: var(--muted); font-size: .85rem; }
.case-links strong { font-size: clamp(1.2rem, 2.4vw, 1.8rem); letter-spacing: -.025em; line-height: 1.25; }
.case-links span:last-child { color: var(--cyan); font-size: 1.7rem; }
.inquiry-panel { padding: clamp(2rem, 5vw, 4rem); margin: 1rem 0 4rem; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 90% 10%, rgba(0,217,120,.1), transparent 25rem),var(--panel); }
.inquiry-panel h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
.inquiry-panel p:not(.eyebrow) { max-width: 720px; color: var(--muted); margin: 1.5rem 0 2rem; }
.inquiry-panel .text-link { display: inline-block; margin: 1.2rem 0 0 1.3rem; }
.metric-strip { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 1.5rem; margin: 2.5rem 0; }
.metric-strip > div { border-left: 2px solid var(--cyan); padding-left: 1rem; }
.metric-strip strong { display: block; font-size: clamp(1.8rem, 3.6vw, 2.9rem); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.metric-strip span { display: block; color: var(--muted); font-size: .8rem; }
.chart-data { margin-top: 1.5rem; padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: .9rem; }
.chart-data summary { color: var(--cyan); cursor: pointer; font-weight: 750; }
.chart-data summary:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.chart-data table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; font-size: .87rem; }
.chart-data th, .chart-data td { padding: .65rem .4rem; text-align: left; border-bottom: 1px solid var(--line); }
.chart-data caption { text-align: left; color: var(--text); font-weight: 750; padding-bottom: .6rem; }
.insight-panel { padding: clamp(1.5rem, 4vw, 3rem); margin-block: clamp(2rem, 5vw, 4rem); background: linear-gradient(135deg, rgba(0,217,120,.05), transparent),var(--panel); }
.insight-equations { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; margin-block: 2rem; }
.insight-equations > div { display: grid; gap: .5rem; }
.insight-equations strong { color: var(--text); font-size: clamp(1.3rem, 3vw, 2rem); font-variant-numeric: tabular-nums; }
.insight-equations span { color: var(--muted); font-size: .85rem; }
.insight-equations .equation-arrow { color: var(--cyan); font-size: 2rem; }
.case-section > .insight-question { color: var(--cyan) !important; font-size: 1.2rem; font-weight: 750; border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.5rem; }
.measurement-note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.measurement-note a { color: var(--cyan); text-underline-offset: .2em; }
.decision-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.decision-grid > article { padding: 1.6rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.example-split { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); align-items: center; gap: clamp(2rem,5vw,4rem); margin-top: 3rem; }
.example-split img { border: 1px solid var(--line); border-radius: 16px; width: 100%; height: auto; }
.example-split p { color: var(--muted); font-size: 1.1rem; }
.workflow-stages { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.workflow-stages li { padding: clamp(1.4rem,2.8vw,2.4rem); background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--cyan); border-radius: 0 0 16px 16px; }
.workflow-stages h3 { font-size: clamp(1.8rem,3vw,2.4rem); line-height: 1.1; }
.workflow-stages p:not(.eyebrow) { color: var(--muted); }
.workflow-stages .checkpoint { padding-top: 1rem; border-top: 1px solid var(--line); font-size: .88rem; }
@media (max-width: 1000px) {
  .service-grid, .decision-grid, .workflow-stages { grid-template-columns: 1fr; }
  .three-notes { gap: 1.5rem; }
}
@media (max-width: 760px) {
  .chart-pair, .systems-grid, .three-notes, .example-split { grid-template-columns: 1fr; }
  .section-outro { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .case-links > a { grid-template-columns: 1fr auto; gap: .6rem 1rem; }
  .case-links > a > span:first-child { grid-column: 1 / -1; }
  .case-links > a strong { grid-column: 1; }
  .metric-strip { grid-template-columns: 1fr; gap: 1.5rem; }
  .inquiry-panel .text-link { display: block; margin-left: 0; }
}
@media (max-width: 420px) {
  .site-header .brand { width: 105px; flex-shrink: 0; }
  .site-header nav { max-width: 165px; column-gap: .7rem; }
  .site-header nav a { font-size: .73rem; }
  .insight-equations { grid-template-columns: 1fr; gap: 1rem; }
  .insight-equations .equation-arrow { transform: rotate(90deg); justify-self: start; }
}

/* Jamal's dated counter comparison; the primary reporting charts stay intact. */
.jamal-growth-chart { margin: 2rem 0; padding: clamp(1rem, 2.5vw, 2rem); border: 1px solid var(--line); border-radius: 12px; background: var(--bg-deep); }
.jamal-growth-chart h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.2; }
.jamal-growth-chart figcaption > p { color: var(--muted); font-size: .9rem; }
.jamal-growth-chart .jamal-messages { stroke: var(--cyan); }
.jamal-growth-chart .jamal-creations { stroke: var(--green); stroke-dasharray: 7 4; }
.jamal-growth-chart .jamal-message-points { fill: var(--cyan); }
.jamal-growth-chart .jamal-creation-points { fill: var(--green); }
.jamal-baseline { stroke: var(--muted); opacity: .4; stroke-dasharray: 2 4; }
.jamal-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; color: var(--muted); font-size: .85rem; }
.jamal-key { display: inline-block; width: 1.5rem; margin-right: .4rem; border-top: 2px solid var(--cyan); vertical-align: .2em; }
.jamal-key.creations { border-top-color: var(--green); border-top-style: dashed; }
.jamal-phases { margin-bottom: 2.5rem; }
.insight-panel > h3 { margin-top: 2rem; font-size: clamp(1.4rem, 2.3vw, 1.8rem); line-height: 1.2; }

/* The homepage summary leads the referral chart; supporting charts remain on Reporting. */
.metric-strip.referral-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.report-preview > .referral-summary { margin: 0 0 2rem; padding-inline: clamp(1rem, 3vw, 2rem); }
@media (max-width: 1000px) { .metric-strip.referral-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .metric-strip.referral-summary { grid-template-columns: 1fr; } }

/* Keep the two reviewed image-and-copy pairs centered in the studio content column. */
.proof-card.centered { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); min-height: 0; padding-block: clamp(3rem, 6vw, 5rem); }
.proof-card.centered > .proof-media { width: 100%; max-width: 480px; min-height: 0; aspect-ratio: 1; justify-self: center; }
.proof-card.centered > .proof-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.proof-card.centered > .proof-media:hover img { transform: none; }
.proof-card.centered > .proof-copy { width: 100%; max-width: 690px; min-width: 0; justify-self: center; padding: 0; }
.experience-card { grid-template-rows: 1fr auto; }
@media (max-width: 900px) { .proof-card.centered { grid-template-columns: 1fr; gap: 2rem; } }

/* Experiences now follows the reporting section and leads into the inquiry. */
.experiences { border-top: 1px solid var(--line); }

/* The optional-route statement keeps its wording without a separating rule. */
.case-section[aria-labelledby="project-question"] > .measurement-note { border-top: 0; }

/* Only Night Signal and Runtime Hex Already Happened use these right-hand frames. */
.proof-card.compact { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); min-height: 0; padding-block: clamp(3rem, 6vw, 5rem); }
.proof-card.compact::before { left: 0; right: 0; }
.proof-card.compact > .proof-media { order: 2; width: 100%; max-width: 480px; min-height: 0; aspect-ratio: 1; justify-self: center; }
.proof-card.compact > .proof-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.proof-card.compact > .proof-media:hover img { transform: none; }
.proof-card.compact > .proof-copy { order: 1; width: 100%; max-width: 690px; min-width: 0; justify-self: center; padding: 0; }
@media (max-width: 900px) { .proof-card.compact { grid-template-columns: 1fr; gap: 2rem; } .proof-card.compact > .proof-media { order: 0; } }

/* R9: navigation destinations and the owner's explicit homepage order. */
.site-header { gap: 1rem; }
.site-header nav[aria-label="Primary navigation"] { min-width: 0; justify-content: flex-end; }
.homepage-reorganized .single-feature::after { display: none; }
.homepage-reorganized .kindroids::before, .homepage-reorganized .studio-stories::before, .homepage-reorganized .music-feature::before {
  content: ""; position: absolute; z-index: 2; top: 0; right: var(--section-rule-inset); left: var(--section-rule-inset); height: 1px; background: var(--line); pointer-events: none;
}
@media (max-width: 680px) {
  .site-header { flex-wrap: wrap; }
  .site-header nav[aria-label="Primary navigation"] { width: 100%; max-width: none; justify-content: flex-start; gap: .65rem 1rem; }
  .site-header nav[aria-label="Primary navigation"] a { font-size: .8rem; }
}

/* R10: keep the restored project-inquiry button visible at every header width. */
.site-header nav[aria-label="Primary navigation"] .nav-contact { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1rem; border: 1px solid var(--cyan); border-radius: 999px; color: var(--text); line-height: 1.2; white-space: nowrap; }