/* DESIGN.md ? optional dark palette. Replaces all previous styles. */
:root {
 color-scheme: dark;
 --font-sans: Inter, Pretendard, "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
 --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
 --color-bg: #0E141B;
 --color-surface: #0E141B;
 --color-surface-raised: #0E141B;
 --color-text: #F6F8FB;
 --color-text-muted: #AAB7C5;
 --color-border: #374552;
 --color-accent: #53CED3;
 --color-accent-hover: #7BE1E4;
 --color-accent-soft: #0E141B;
 --color-success: #63D6A3;
 --color-warning: #F6BE64;
 --color-danger: #FF8792;
 --color-demo-bg: #0E141B;
 --radius-xs: 4px;
 --radius-sm: 8px;
 --radius-md: 12px;
 --radius-lg: 18px;
 --radius-xl: 24px;
 --shadow-sm: 0 2px 8px rgb(10 25 40 / 5%);
 --shadow-md: 0 12px 36px rgb(10 25 40 / 10%);
 --focus-ring: 0 0 0 3px rgb(19 127 145 / 25%);
 --container: 1200px;
 --section-padding: 96px;
 --motion-fast: 180ms;
 --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
 --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
 --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-28: 112px;
 --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-heavy: 800;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 16px/1.7 var(--font-sans); }
h1,h2,h3,p { margin: 0; }
h1 { font-size: clamp(44px,4.8vw,72px); font-weight: 800; line-height: 1.11; letter-spacing: -.045em; }
h2 { font-size: clamp(32px,3vw,48px); font-weight: 700; line-height: 1.17; letter-spacing: -.035em; }
h3 { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -.035em; }
p { max-width: 65ch; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; box-shadow: var(--focus-ring); }
::selection { background: var(--color-accent-soft); }
section[id] { scroll-margin-top: 88px; }
.wrap { width: min(calc(100% - 48px),var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-padding); }
.muted, article p { color: var(--color-text-muted); }
.accent { color: var(--color-accent); }
.eyebrow,.tier,.step-label,.tag { font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; color: var(--color-accent); }
.header { position: sticky; top: 0; z-index: 20; min-height: 72px; padding: 12px max(24px,calc((100vw - var(--container))/2)); display: flex; align-items: center; gap: 24px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.brand { display: inline-flex; align-items: center; font-size: 24px; font-weight: 800; letter-spacing: -.045em; }
.mark { display: inline-block; width: 24px; height: 28px; margin-right: 8px; }
.brand-dot { display: none; }
.header nav { margin-left: auto; display: flex; gap: 24px; }
.header nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--color-text-muted); }
.header nav a:hover, footer a:hover { color: var(--color-accent); }
.header-cta { min-height: 44px; padding: 0 20px; display: inline-flex; align-items: center; background: var(--color-accent); color: var(--color-bg); font-size: 14px; font-weight: 700; border-radius: var(--radius-sm); }
.menu { display: none; }
.hero { text-align: center; padding-block: 104px 88px; }
.hero .eyebrow { display: inline-block; padding: 5px 9px; border-radius: var(--radius-xs); background: var(--color-accent-soft); margin-bottom: 20px; }
.hero h1 { max-width: 900px; margin: auto; }
.hero-statement { max-width: 650px; margin: 24px auto 0; font-size: 18px; line-height: 1.65; }
.hero-description { max-width: 55ch; margin: 16px auto 0; color: var(--color-text-muted); font-size: 18px; line-height: 1.65; }
.cta-row { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 26px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-bg); font-size: 15px; font-weight: 700; line-height: 1.2; transition: background var(--motion-fast) ease-out,border-color var(--motion-fast) ease-out; }
.button:hover,.header-cta:hover { background: var(--color-accent-hover); }
.button:disabled { opacity: .5; cursor: not-allowed; }
.outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.outline:hover { background: var(--color-surface); border-color: var(--color-accent); }
.hero-bottom { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin-top: 24px; font-size: 12px; color: var(--color-text-muted); }
.hero-bottom span + span::before { content: '\00b7'; margin-right: 24px; }
.demo-section { padding-block: var(--section-padding); background: var(--color-surface); }
.section-heading { margin-bottom: 40px; }
.section-heading .eyebrow { display: block; margin-bottom: 16px; }
.section-heading p { margin-top: 20px; font-size: 18px; line-height: 1.65; }
.centered { text-align: center; max-width: 760px; margin-inline: auto; }
.centered p { margin-inline: auto; }
.flow-panel { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-demo-bg); }
.panel-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--color-border); font: 500 12px/1.5 var(--font-mono); color: var(--color-text-muted); }
.flow { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; align-items: center; gap: 24px; padding: 48px 32px; }
.flow h3 { margin: 16px 0 12px; }
.flow p { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); }
.flow-arrow { font-size: 24px; color: var(--color-accent); }
.flow-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.flow-tags span { border: 1px solid var(--color-border); border-radius: var(--radius-xs); padding: 5px 9px; font: 12px/1.5 var(--font-mono); }
.rule-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.rule-lines i { height: 4px; background: var(--color-accent-soft); width: 80%; }
.rule-lines i:nth-child(2) { width: 55%; }
.rule-lines i:nth-child(3) { width: 65%; }
.panel-bottom { padding: 20px 24px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 14px; }
.dot { display: inline-block; width: 6px; height: 6px; background: var(--color-accent); border-radius: 50%; margin-right: 8px; }
.workflow-list,.problems { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.workflow-list article,.problems article { border: 1px solid var(--color-border); background: var(--color-surface-raised); border-radius: var(--radius-md); padding: 30px; }
.workflow-number,.small-number { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--color-accent-soft); color: var(--color-accent); border-radius: var(--radius-sm); font: 500 13px/1 var(--font-mono); }
.workflow-list h3,.problems h3 { margin: 20px 0 16px; }
.detail { display: block; margin-top: 24px; font: 12px/1.55 var(--font-mono); color: var(--color-text-muted); }
.ai-note { margin-top: 24px; padding: 24px; background: var(--color-accent-soft); border-radius: var(--radius-md); display: flex; align-items: flex-start; gap: 24px; }
.ai-note .tag { flex: 0 0 180px; }
.ai-note p { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); }
#problem { padding-top: 0; }
.metrics { padding-block: 64px; background: var(--color-surface); }
.metrics-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-top: 32px; }
.metrics strong { font-size: clamp(36px,4vw,52px); font-weight: 800; letter-spacing: -.045em; line-height: 1.2; }
.metrics strong span { color: var(--color-accent); font-size: 24px; }
.metrics h3 { font-size: 20px; margin: 16px 0 12px; }
.metrics p { font-size: 14px; line-height: 1.6; }
.metric-footnote { margin-top: 32px; max-width: none; color: var(--color-text-muted); font-size: 12px!important; }
.case-section,.data-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
.case-section .eyebrow,.data-grid .eyebrow { display: block; margin-bottom: 20px; }
.case-section .muted { margin-top: 24px; }
.case-card { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px; transition: border-color var(--motion-fast),box-shadow var(--motion-fast); }
.case-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.case-meta { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: 12px; }
.case-mark { display: block; height: 48px; }
.case-card h3 { font-size: 28px; }
.case-card p { color: var(--color-text-muted); margin: 20px 0 24px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--color-accent); }
.data-section { padding-block: var(--section-padding); background: var(--color-surface); }
.data-details article { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--color-border); }
.data-details article > span { color: var(--color-accent); font: 13px/1.7 var(--font-mono); }
.data-details h3 { font-size: 22px; }
.data-details p { margin-top: 12px; color: var(--color-text-muted); }
.data-details .data-note { font-size: 12px; margin-top: 24px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.price-card { padding: 32px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; }
.price-card h3 { margin: 20px 0 24px; }
.price { font-size: 40px; font-weight: 700; letter-spacing: -.035em; min-height: 64px; line-height: 1.3; margin-bottom: 16px; }
.price span { font-size: 14px; font-weight: 400; letter-spacing: normal; color: var(--color-text-muted); }
.custom-price { font-size: 25px; }
.price-card p { font-size: 14px; line-height: 1.6; }
.price-card ul { margin: 24px 0; padding: 0; list-style: none; font-size: 14px; }
.price-card li { padding-block: 6px; }
.price-card li::before { content: '\2713'; color: var(--color-accent); margin-right: 8px; }
.featured { border-color: var(--color-accent); }
.price-card .button { margin-top: auto; }
.setup { display: flex; flex-direction: column; gap: 8px; font-size: 14px; margin-bottom: 24px; }
.setup span { color: var(--color-accent); }
.setup small { font-size: 12px; color: var(--color-text-muted); }
.launch-note { margin-bottom: 24px; }
.faq-section { padding-top: 0; }
.faq-list { max-width: 800px; margin-inline: auto; }
details { border-bottom: 1px solid var(--color-border); }
summary { min-height: 56px; padding: 20px 40px 20px 0; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 8px; top: 18px; color: var(--color-accent); font-size: 22px; }
details[open] summary::after { content: '\2212'; }
details p { padding: 0 32px 24px 0; color: var(--color-text-muted); }
.contact { padding: 72px 48px; background: var(--color-accent-soft); border-radius: var(--radius-lg); text-align: center; margin-bottom: 80px; }
.contact h2 { margin-top: 20px; }
.contact-bottom { display: flex; flex-direction: column; align-items: center; gap: 32px; margin-top: 24px; }
.contact-bottom p { color: var(--color-text-muted); }
.contact-status { margin: 24px auto 0; font-size: 14px; color: var(--color-text-muted); }
footer { border-top: 1px solid var(--color-border); padding-block: 48px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
footer h3 { font-size: 14px; margin-bottom: 16px; }
footer p { font-size: 14px; color: var(--color-text-muted); margin: 16px 0 24px; }
footer span { font-size: 12px; color: var(--color-text-muted); }
footer a:not(.brand) { display: flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--color-text-muted); }
.skip { position: fixed; top: -100px; left: 20px; z-index: 50; padding: 12px 20px; background: var(--color-accent); color: var(--color-bg); border-radius: var(--radius-sm); }
.skip:focus { top: 12px; }
@media (max-width:1023px) {
 :root { --section-padding: 80px; }
 .wrap { width: min(calc(100% - 64px),var(--container)); }
 .header { padding-inline: 32px; gap: 16px; }
 .header nav { gap: 16px; }
 .header-cta { display: none; }
 .workflow-list,.problems,.metrics-grid,.pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .flow { gap: 16px; padding: 32px 24px; }
 .flow h3 { font-size: 20px; }
 .case-section,.data-grid { gap: 32px; }
}
@media (max-width:767px) {
 :root { --section-padding: 64px; }
 body { font-size: 15px; }
 .wrap { width: calc(100% - 40px); }
 .header { min-height: 64px; padding: 10px 20px; justify-content: space-between; }
 .brand { font-size: 22px; }
 .menu { display: inline-flex; min-height: 44px; align-items: center; padding: 0 16px; background: transparent; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 14px; }
 .header nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 16px 20px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
 .header nav.open { display: flex; flex-direction: column; gap: 4px; }
 .hero { padding-block: 76px 60px; }
 h1 { font-size: clamp(36px,9.5vw,44px); }
 h2 { font-size: 32px; }
 h3 { font-size: 21px; }
 .hero-statement,.hero-description,.section-heading p { font-size: 16px; }
 .eyebrow { font-size: 11px; }
 .cta-row { flex-direction: column; }
 .button { font-size: 14px; width: 100%; }
 .hero-bottom { gap: 8px 16px; }
 .hero-bottom span + span::before { display: none; }
 .section-heading { margin-bottom: 32px; }
 .flow,.workflow-list,.problems,.metrics-grid,.pricing-grid,.case-section,.data-grid,.footer-grid { grid-template-columns: minmax(0,1fr); }
 .flow { gap: 24px; padding: 24px; }
 .flow-arrow { transform: rotate(90deg); justify-self: start; }
 .flow h3 { font-size: 22px; }
 .panel-top,.panel-bottom { padding: 16px 24px; }
 .workflow-list article,.problems article,.case-card,.price-card { padding: 24px; }
 .ai-note { flex-direction: column; gap: 16px; }
 .ai-note .tag { flex-basis: auto; }
 .metrics-grid { gap: 32px; }
 .case-card h3 { font-size: 24px; }
 .data-details h3 { font-size: 21px; }
 .contact { padding: 64px 24px; margin-bottom: 64px; }
 .footer-grid { gap: 32px; }
}
@media (max-width:374px) { .wrap { width: calc(100% - 32px); } .header { padding-inline: 16px; } }
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior: auto; }
 *,*::before,*::after { animation-duration: .01ms!important; transition-duration: .01ms!important; }
}

/* User revision: one continuous background, hero demo, fixed contact rail. */
body { padding-right: 0; }
.header { padding-inline: 24px; }
.header-cta { display: none; }
.hero { padding-bottom: 64px; }
.hero-description { margin-top: 24px; }
.hero-demo { max-width: 880px; margin: 32px auto 0; }
.demo-preview { display: block; position: relative; width: 100%; padding: 0; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-bg); color: var(--color-text); }
.demo-preview picture, .demo-preview img { display: block; width: 100%; height: 100%; }
.demo-preview img { object-fit: cover; }
.demo-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-accent); color: var(--color-bg); font-size: 24px; box-shadow: 0 2px 16px #0008; }
.demo-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: #0e141be8; font-size: 14px; }
.demo-fallback { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--color-text-muted); }
#demo-player { aspect-ratio: 16 / 9; }
#demo-player iframe { width: 100%; height: 100%; border: 1px solid var(--color-border); border-radius: 12px; }
.floating-contact { position: fixed; top: 50%; right: 20px; transform: translateY(calc(-50% + var(--contact-lag, 0px))); width: 224px; z-index: 30; padding: 24px 20px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg); }
.floating-contact h2 { margin-top: 12px; font-size: 28px; }
.floating-contact p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--color-text-muted); }
.floating-contact .button { width: 100%; margin-top: 20px; padding-inline: 12px; font-size: 14px; }
.floating-contact .discord-button { background: #5865F2; color: #fff; }
.floating-contact .discord-button:hover { background: #4752C4; }
.floating-contact .discord-button svg { flex-shrink: 0; }
.floating-contact .button + .button { margin-top: 10px; }
#contact-status { font-size: 12px; }
@media (max-width: 1599px) {
 body { padding-right: 0; padding-bottom: 136px; }
 .floating-contact { top: auto; bottom: 16px; right: 16px; transform: translateY(var(--contact-lag, 0px)); width: 224px; padding: 12px; }
 .floating-contact > .eyebrow, .floating-contact > h2, .floating-contact > p:not(#contact-status) { display: none; }
 .floating-contact .button { margin-top: 0; }
}

@media (min-width: 1600px) {
 body { padding-right: 0; }
 .floating-contact { right: 20px; }
}

[hidden] { display: none !important; }

/* Native YouTube red play treatment. */
.demo-play { width: 88px; height: 62px; border-radius: 14px; background: #FF0000; color: #FFFFFF; font-size: 28px; }
.demo-preview:hover .demo-play { background: #CC0000; }

/* Challenge: common standards -> three problems -> practical consequences. */
#problem.challenge-section { padding-block: var(--section-padding); }
.challenge-context { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); }
.context-label { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--color-text-muted); }
.challenge-context h3 { font-size: clamp(22px,2vw,28px); max-width: 32ch; }
.standards-list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; flex-shrink: 0; max-width: 44%; }
.standards-list li { padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 14px; color: var(--color-text); }
.challenge-branches { height: 64px; position: relative; display: grid; grid-template-columns: repeat(3,1fr); }
.challenge-branches::before { content: ''; position: absolute; top: 0; height: 32px; width: 1px; left: 50%; background: var(--color-border); }
.challenge-branches::after { content: ''; position: absolute; top: 31px; left: 16.666%; right: 16.666%; height: 1px; background: var(--color-border); }
.challenge-branches span { position: relative; }
.challenge-branches span::before { content: ''; position: absolute; top: 32px; bottom: 8px; left: 50%; width: 1px; background: var(--color-border); }
.challenge-branches span::after { content: ''; position: absolute; bottom: 4px; left: calc(50% - 4px); border-top: 6px solid var(--color-text-muted); border-left: 4px solid transparent; border-right: 4px solid transparent; }
.challenge-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.challenge-path { display: flex; flex-direction: column; min-width: 0; }
.challenge-card { padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-md); flex: 1; display: flex; flex-direction: column; background: var(--color-bg); }
.challenge-card h3 { margin: 20px 0 16px; font-size: 23px; }
.challenge-card p { margin-bottom: 24px; font-size: 15px; line-height: 1.7; }
.challenge-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.challenge-tags span:not(.tag-arrow) { padding: 5px 9px; border: 1px solid var(--color-border); border-radius: var(--radius-xs); font-size: 12px; color: var(--color-accent); }
.tag-arrow { color: var(--color-text-muted); }
.challenge-connector { height: 40px; position: relative; }
.challenge-connector::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 10px; width: 1px; background: var(--color-border); }
.challenge-connector::after { content: ''; position: absolute; left: calc(50% - 4px); bottom: 6px; border-top: 6px solid var(--color-text-muted); border-left: 4px solid transparent; border-right: 4px solid transparent; }
.challenge-impact { padding: 24px 28px; border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-bg); min-height: 190px; }
.challenge-impact h4 { margin: 0 0 12px; color: var(--color-text); font-size: 18px; font-weight: 700; line-height: 1.35; }
.challenge-impact p { font-size: 14px; line-height: 1.6; }
@media (max-width: 1023px) {
 .challenge-context { flex-direction: column; align-items: flex-start; gap: 24px; }
 .standards-list { max-width: 100%; flex-shrink: 1; }
 .challenge-card,.challenge-impact { padding: 24px 20px; }
 .challenge-card h3 { font-size: 21px; }
 .challenge-impact { min-height: 230px; }
}
@media (max-width: 767px) {
 .challenge-context { padding: 24px; }
 .challenge-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .challenge-branches { height: 40px; display: block; }
 .challenge-branches::before { height: 30px; }
 .challenge-branches::after { display: none; }
 .challenge-branches span { display: none; }
 .challenge-card,.challenge-impact { padding: 24px; }
 .challenge-impact { min-height: 0; }
}

/* Restored hero subcopy and single-line desktop challenge heading. */
.hero .hero-statement { color: #FFFFFF; font-size: clamp(15px, 1.35vw, 18px); font-weight: 500; line-height: 1.6; max-width: none; margin: 24px auto 0; }
.hero .hero-description { color: var(--color-text-muted); font-size: 16px; line-height: 1.65; margin: 20px auto 0; }
.challenge-section > .section-heading { max-width: none; }
#challenge-title { font-size: clamp(28px, 3.1vw, 44px); }
.challenge-section > .section-heading p { max-width: 65ch; }
@media (min-width: 1024px) {
 .hero .hero-statement, #challenge-title { text-wrap: balance; }
}

/* One workflow box with bookmark-style tabs. */
.workflow-book { max-width: 1080px; margin: 0 auto; }
.bookmark-tabs { display: flex; gap: 8px; padding-left: 24px; position: relative; z-index: 1; }
.bookmark-tabs button { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 16px 28px; border: 1px solid var(--color-border); border-bottom: 0; border-radius: 12px 12px 0 0; color: var(--color-text-muted); background: var(--color-bg); font-size: 16px; font-weight: 600; position: relative; transition: color var(--motion-fast), border-color var(--motion-fast); }
.bookmark-tabs button span { font: 12px/1 var(--font-mono); }
.bookmark-tabs button[aria-selected="true"] { color: var(--color-accent); border-top: 3px solid var(--color-accent); padding-top: 14px; }
.bookmark-tabs button[aria-selected="true"]::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--color-bg); }
.bookmark-tabs button:hover { color: var(--color-accent); }
.workflow-page { border: 1px solid var(--color-border); border-radius: 12px; padding: 48px; background: var(--color-bg); }
.workflow-tab-panel { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; min-height: 360px; align-items: start; }
.workflow-copy h3 { font-size: clamp(26px,2.8vw,36px); margin: 20px 0 24px; }
.workflow-copy p { color: var(--color-text-muted); margin-top: 16px; }
.workflow-capabilities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.workflow-capabilities span { border: 1px solid var(--color-border); border-radius: 4px; padding: 6px 10px; color: var(--color-accent); font-size: 12px; }
.workflow-summary { border-left: 1px solid var(--color-border); padding-left: 32px; }
.summary-label { font: 12px/1.5 var(--font-mono); color: var(--color-text-muted); }
.workflow-summary ol { margin: 24px 0; padding: 0; list-style: none; }
.workflow-summary li { display: flex; flex-direction: column; gap: 4px; position: relative; padding: 0 0 28px 24px; border-left: 1px solid var(--color-border); }
.workflow-summary li:last-child { padding-bottom: 0; }
.workflow-summary li::before { content: ''; position: absolute; left: -4px; top: 8px; width: 7px; height: 7px; background: var(--color-accent); border-radius: 50%; }
.workflow-summary li > span { font-size: 12px; color: var(--color-text-muted); }
.workflow-summary strong { font-size: 17px; font-weight: 600; }
.workflow-summary small, .workflow-summary p { font-size: 12px; line-height: 1.6; color: var(--color-text-muted); }
@media (max-width: 767px) {
 .bookmark-tabs { padding-left: 8px; gap: 4px; }
 .bookmark-tabs button { padding: 12px; gap: 6px; font-size: 14px; min-height: 52px; flex: 1; justify-content: center; }
 .bookmark-tabs button[aria-selected="true"] { padding-top: 10px; }
 .bookmark-tabs button span { font-size: 11px; }
 .workflow-page { padding: 24px; }
 .workflow-tab-panel { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .workflow-summary { border-left: 0; border-top: 1px solid var(--color-border); padding: 24px 0 0; }
}

/* Soft bookmark hover feedback; panel motion is canceled on rapid changes. */
.bookmark-tabs button { transition: color 180ms ease-out, border-color 180ms ease-out, background-color 180ms ease-out; }
.bookmark-tabs button:hover { background-color: var(--color-bg); }
.workflow-tab-panel { min-height: 390px; }
@media (max-width: 767px) { .workflow-tab-panel { min-height: 0; } }

/* Measured results, development context and before/after benchmarks. */
.metrics > .wrap > .eyebrow { display: block; text-align: center; }
.delivery-metric { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 48px; padding: 32px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.delivery-metric h3 { margin: 12px 0; }
.delivery-metric p { max-width: 65ch; }
.delivery-metric > strong { white-space: nowrap; flex-shrink: 0; }
.delivery-metric > strong span { font-size: 20px; }
.benchmark-heading { text-align: center; margin: 48px 0 24px; }
.benchmark-heading h3 { font-size: 26px; margin: 16px 0 12px; }
.benchmark-heading p { margin-inline: auto; color: var(--color-text-muted); }
.benchmark-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.benchmark-grid article { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px; }
.benchmark-grid h3 { margin: 0 0 24px; font-size: 20px; }
.benchmark-values { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-bottom: 24px; }
.benchmark-values > div { display: flex; flex-direction: column; gap: 8px; }
.benchmark-values div > span { font: 12px/1.5 var(--font-mono); color: var(--color-text-muted); }
.benchmark-values strong { font-size: clamp(24px,2.4vw,34px); letter-spacing: -.035em; }
.benchmark-values > div:last-child strong { color: var(--color-accent); }
.benchmark-arrow { color: var(--color-text-muted); font-size: 24px; }
.benchmark-source { display: inline-block; margin-top: 16px; font-size: 12px; color: var(--color-accent); }
@media (max-width: 767px) {
 .delivery-metric { flex-direction: column; align-items: flex-start; padding-block: 24px; gap: 24px; }
 .benchmark-grid { grid-template-columns: minmax(0,1fr); }
 .benchmark-grid article { padding: 24px; }
 .benchmark-values { gap: 12px; }
 .benchmark-values strong { font-size: 25px; }
}

/* Development measurement joins the original figures as the fourth column. */
.metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.metrics-grid strong { font-size: clamp(32px, 3.2vw, 48px); }
.metrics-grid strong span { font-size: 20px; }
.metrics-grid h3 { font-size: 18px; }
@media (max-width: 1023px) { .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .metrics-grid { grid-template-columns: minmax(0, 1fr); } }

/* Concise client identity and illuminated pricing-card outlines. */
.compact-case { gap: 40px; }
.case-intro h2 { font-size: clamp(30px,3vw,42px); }
.case-intro .muted { margin-top: 16px; }
.client-link { display: flex; align-items: center; gap: 28px; padding: 24px; }
.client-logo { display: block; width: 144px; height: 144px; flex: 0 0 144px; object-fit: contain; border-radius: 4px; }
.client-copy { min-width: 0; }
.client-copy .case-meta { font-size: 11px; }
.client-copy h3 { margin-top: 16px; font-size: 24px; overflow-wrap: anywhere; }
.client-copy .text-link { margin-top: 12px; }
.price-card { border-color: var(--color-border); transition: border-color 260ms ease-out, box-shadow 260ms ease-out; }
.price-card:hover, .price-card:focus-within { border-color: var(--color-accent-hover); box-shadow: 0 0 0 1px var(--color-accent-hover), 0 0 24px rgb(83 206 211 / 16%); }
@media (max-width: 1023px) { .client-link { gap: 20px; } .client-logo { width: 112px; height: 112px; flex-basis: 112px; } }
@media (max-width: 767px) { .client-link { padding: 20px; } .client-copy h3 { font-size: 21px; } }
@media (max-width: 374px) { .client-link { flex-direction: column; align-items: flex-start; } }

/* Transparent gray client wordmark; card and CTA share the hover state. */
.client-logo { width: 180px; height: 84px; flex-basis: 180px; border-radius: 0; background: transparent; }
.price-card .button { background: transparent; color: var(--color-text); border-color: var(--color-border); box-shadow: none; transition: background-color 260ms ease-out, color 260ms ease-out, border-color 260ms ease-out, box-shadow 260ms ease-out; }
.price-card:hover .button, .price-card:focus-within .button { background: var(--color-accent-hover); color: var(--color-bg); border-color: var(--color-accent-hover); box-shadow: 0 0 16px rgb(83 206 211 / 14%); }
@media (max-width: 1023px) { .client-logo { width: 144px; height: 67px; flex-basis: 144px; } }
@media (prefers-reduced-motion: reduce) { .price-card, .price-card .button { transition: none; } }

/* Minimal client card: wordmark and destination only. */
.client-link { justify-content: space-between; gap: 24px; min-height: 152px; padding: 24px 32px; }
.client-link > .client-logo { width: 200px; height: auto; flex: 0 1 200px; min-width: 0; }
.client-link > .text-link { flex-shrink: 0; margin: 0; }
@media (max-width: 767px) { .client-link { padding: 24px; min-height: 132px; } }
@media (max-width: 374px) { .client-link { flex-direction: row; align-items: center; gap: 12px; padding: 20px 16px; } .client-link > .text-link { font-size: 13px; } }

/* Centered case story: heading, supporting copy, architect logo, case link. */
.case-section.compact-case { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.compact-case .case-intro { width: 100%; }
.compact-case .case-intro h2 { margin-inline: auto; }
.compact-case .case-intro .muted { margin: 16px auto 0; }
.compact-case > .client-logo-link { display: block; width: 280px; max-width: 100%; margin: 40px auto 24px; }
.compact-case > .client-logo-link .client-logo { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 112 / 36; }
.compact-case > .case-study-link { justify-content: center; margin: 0; }

/* Keep the desktop contact box in its reserved right rail. */
@media (min-width: 1600px) {
 .floating-contact { right: 20px; }
}

#video-status { margin: 12px auto; font-size: 14px; color: var(--color-text-muted); }

/* Three titles merge into one photographic explanation on hover. */
.challenge-stage { position: relative; isolation: isolate; min-height: 340px; }
.challenge-triggers { height: 340px; transition: gap 480ms cubic-bezier(.22,1,.36,1); }
.challenge-trigger { position: relative; text-align: left; padding: 36px 28px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg); color: var(--color-text); transition: border-radius 480ms ease, border-color 350ms ease; }
.challenge-trigger h3 { margin-top: 28px; font-size: 24px; transition: opacity 180ms ease; }
.challenge-trigger .small-number { background: transparent; justify-content: flex-start; transition: opacity 180ms ease; }
.challenge-detail { position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; opacity: 0; transform: translateY(28px) scaleX(.97); transition: opacity 300ms ease, transform 480ms cubic-bezier(.22,1,.36,1); }
.challenge-stage.is-expanded .challenge-triggers { gap: 0; }
.challenge-stage.is-expanded .challenge-trigger { border-color: transparent; border-radius: 0; }
.challenge-stage.is-expanded .challenge-trigger h3, .challenge-stage.is-expanded .challenge-trigger .small-number { opacity: 0; }
.challenge-stage.is-expanded .challenge-detail { opacity: 1; transform: translateY(0) scaleX(1); }
.challenge-photo { position: absolute; top: 0; bottom: 0; width: 56%; background-image: url('assets/challenge-thinking.jpg'); background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 400ms ease, width 480ms ease; }
.photo-left { left: 0; background-position: 32% center; mask-image: linear-gradient(to right,#000 35%,transparent 100%); }
.photo-right { right: 0; background-position: 32% center; mask-image: linear-gradient(to left,#000 35%,transparent 100%); }
.challenge-detail::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(14 20 27 / 28%), rgb(14 20 27 / 12%)); pointer-events: none; }
.challenge-detail-copy { position: relative; z-index: 1; width: 52%; height: 100%; padding: 40px; display: flex; flex-direction: column; justify-content: center; transition: opacity 240ms ease; }
.challenge-detail-copy h3 { font-size: clamp(24px,2.5vw,34px); margin: 20px 0; color: white; }
.challenge-detail-copy p { font-size: 16px; line-height: 1.7; color: var(--color-text-muted); }
.challenge-stage[data-active="0"] .photo-right, .challenge-stage[data-active="2"] .photo-left { opacity: 1; }
.challenge-stage[data-active="2"] .challenge-detail-copy { margin-left: auto; }
.challenge-stage[data-active="1"] .challenge-photo { width: 32%; opacity: 1; background-size: 200% 100%; }
.challenge-stage[data-active="1"] .photo-left { background-position: left center; mask-image: linear-gradient(to right,#000,transparent); }
.challenge-stage[data-active="1"] .photo-right { background-position: right center; mask-image: linear-gradient(to left,#000,transparent); }
.challenge-stage[data-active="1"] .challenge-detail-copy { width: 52%; margin-inline: auto; text-align: center; padding: 32px 16px; }
@media (max-width: 767px) {
 .challenge-triggers { height: auto; gap: 16px; }
 .challenge-trigger { min-height: 180px; padding: 24px; }
 .challenge-trigger h3 { margin-top: 16px; font-size: 22px; }
 .challenge-stage.is-expanded .challenge-triggers { gap: 16px; }
 .challenge-detail-copy, .challenge-stage[data-active="1"] .challenge-detail-copy { width: 100%; padding: 32px; justify-content: center; }
 .challenge-photo { width: 100%; opacity: .25!important; }
 .challenge-stage[data-active="1"] .challenge-photo { width: 50%; }
 .challenge-detail { background: var(--color-bg); }
}
@media (prefers-reduced-motion: reduce) { .challenge-stage *, .challenge-detail { transition: none; } }

/* Correct photo pairing, undistorted crops, stationary card headings. */
.challenge-triggers { position: relative; z-index: 3; }
.challenge-trigger { display: flex; flex-direction: column; justify-content: flex-start; }
.challenge-trigger h3 { flex-shrink: 0; }
.challenge-description { display: block; margin-top: 20px; color: var(--color-text-muted); font-size: 15px; line-height: 1.7; font-weight: 400; opacity: 0; transform: translateY(8px); transition: opacity 280ms ease, transform 360ms cubic-bezier(.22,1,.36,1); pointer-events: none; }
.challenge-stage.is-expanded .challenge-trigger { background: transparent; }
.challenge-stage.is-expanded .challenge-trigger h3, .challenge-stage.is-expanded .challenge-trigger .small-number { opacity: 1; }
.challenge-stage.is-expanded[data-active="0"] .challenge-trigger[data-challenge="0"] .challenge-description,
.challenge-stage.is-expanded[data-active="1"] .challenge-trigger[data-challenge="1"] .challenge-description,
.challenge-stage.is-expanded[data-active="2"] .challenge-trigger[data-challenge="2"] .challenge-description { opacity: 1; transform: translateY(0); }
.challenge-stage[data-active="0"] .challenge-photo { background-image: url('assets/challenge-thinking.jpg'); }
.challenge-stage[data-active="1"] .challenge-photo { background-image: url('assets/challenge-site.jpeg'); }
.challenge-stage[data-active="2"] .challenge-photo { background-image: url('assets/challenge-meeting.jfif'); }
.challenge-stage .challenge-photo { background-size: cover; }
.challenge-stage[data-active="1"] .challenge-photo { background-size: auto max(340px, 100%); width: 32%; }
.challenge-stage[data-active="1"] .photo-left { background-position: left center; }
.challenge-stage[data-active="1"] .photo-right { background-position: right center; }
.challenge-photo { filter: brightness(.45); }
.challenge-stage[data-active="0"] .photo-right { background-position: 28% center; }
.challenge-stage[data-active="2"] .photo-left { background-position: 50% center; }
@media (max-width: 767px) {
 .challenge-stage[data-active="1"] .challenge-photo { background-size: auto 100%; }
 .challenge-stage.is-expanded .challenge-trigger { border-color: var(--color-border); border-radius: 12px; }
 .challenge-description { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .challenge-description { transition: none; transform: none; } }

/* Mobile challenge sequence: each vertical card moves from image to gradient to copy while scrolling. */
@media (max-width: 767px), (orientation: portrait) {
 .challenge-stage { min-height: 0; }
 .challenge-triggers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; height: auto; }
 .challenge-trigger {
  isolation: isolate;
  min-height: max(820px, 120svh);
  overflow: hidden;
  justify-content: flex-end;
  padding: 28px 24px 30px;
  border-color: transparent;
  background: #111820;
  color: #fff;
  text-shadow: 0 1px 12px rgb(0 0 0 / 36%);
  transition: background-color 450ms ease, border-color 450ms ease, color 450ms ease;
 }
 .challenge-trigger::before,
 .challenge-trigger::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
 .challenge-trigger::before {
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: brightness(.92);
  transform: scale(1.02);
  transition: filter 700ms ease, transform 900ms ease;
 }
 .challenge-trigger[data-challenge="0"]::before { background-image: url('assets/challenge-thinking.jpg'); background-position: 42% center; }
 .challenge-trigger[data-challenge="1"]::before { background-image: url('assets/challenge-meeting.jfif'); background-position: center; }
 .challenge-trigger[data-challenge="2"]::before { background-image: url('assets/challenge-site.jpeg'); background-position: center 35%; }
 .challenge-trigger::after { z-index: -1; background: linear-gradient(180deg, transparent 35%, rgb(8 13 18 / 82%) 100%); opacity: 0; transition: opacity 700ms ease; }
 .challenge-trigger .small-number,
 .challenge-trigger h3,
 .challenge-trigger .challenge-description { position: relative; z-index: 1; opacity: 0; transform: translateY(18px); transition: opacity 450ms ease, transform 550ms cubic-bezier(.22,1,.36,1); }
 .challenge-trigger .small-number { color: var(--color-accent); }
 .challenge-trigger h3 { margin-top: 12px; color: #fff; }
 .challenge-trigger .challenge-description { margin-top: 14px; color: rgb(255 255 255 / 78%); }
 .challenge-trigger.mobile-photo::before { filter: brightness(1); }
 .challenge-trigger.mobile-gradient::before { filter: brightness(.58) grayscale(.2); }
 .challenge-trigger.mobile-gradient::after { opacity: .72; }
 .challenge-trigger.mobile-copy::before { filter: brightness(.38) grayscale(.35); }
 .challenge-trigger.mobile-copy::after { opacity: 1; }
 .challenge-trigger.mobile-title::before,
 .challenge-trigger.mobile-copy::before { filter: brightness(.38) grayscale(.35); }
 .challenge-trigger.mobile-title::after,
 .challenge-trigger.mobile-copy::after { opacity: 1; }
 .challenge-trigger.mobile-title .small-number,
 .challenge-trigger.mobile-title h3,
 .challenge-trigger.mobile-copy .small-number,
 .challenge-trigger.mobile-copy h3,
 .challenge-trigger.mobile-copy .challenge-description { opacity: 1; transform: translateY(0); }
 .challenge-trigger.mobile-copy .challenge-description { transition-delay: 180ms; }
 .challenge-trigger:focus-visible { border-color: var(--color-accent); }
 .challenge-detail { display: none; }
 .challenge-stage.is-expanded .challenge-trigger { border-color: transparent; border-radius: 12px; background: #111820; }
}

@media (prefers-reduced-motion: reduce) {
 .challenge-trigger::before,
 .challenge-trigger::after,
 .challenge-trigger .small-number,
 .challenge-trigger h3,
 .challenge-trigger .challenge-description { transition: none; }
}

@media (max-width: 767px), (orientation: portrait) {
 /* Keep the scroll sequence authoritative over the legacy hover/focus rules. */
 .challenge-stage:not(.is-expanded) .challenge-trigger.mobile-title .small-number,
 .challenge-stage:not(.is-expanded) .challenge-trigger.mobile-title h3,
 .challenge-stage:not(.is-expanded) .challenge-trigger.mobile-copy .small-number,
 .challenge-stage:not(.is-expanded) .challenge-trigger.mobile-copy h3,
 .challenge-stage:not(.is-expanded) .challenge-trigger.mobile-copy .challenge-description { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px), (orientation: portrait) {
 /* The bold heading always completes before the smaller supporting copy starts. */
 .challenge-trigger.mobile-title .challenge-description,
 .challenge-trigger.mobile-gradient .challenge-description,
 .challenge-trigger.mobile-photo .challenge-description { opacity: 0 !important; transform: translateY(24px) !important; visibility: hidden; }
 .challenge-trigger.mobile-title .small-number,
 .challenge-trigger.mobile-title h3,
 .challenge-trigger.mobile-copy .small-number,
 .challenge-trigger.mobile-copy h3 { opacity: 1 !important; transform: translateY(0) !important; visibility: visible; }
 .challenge-trigger.mobile-copy .small-number,
 .challenge-trigger.mobile-copy h3 { transition-delay: 0s; }
 .challenge-trigger.mobile-copy .challenge-description { opacity: 1 !important; transform: translateY(0) !important; visibility: visible; transition-delay: 260ms; }
 .challenge-trigger.mobile-photo::after { opacity: 0; }
 .challenge-trigger.mobile-gradient::after,
 .challenge-trigger.mobile-title::after,
 .challenge-trigger.mobile-copy::after { opacity: 1; }
}

/* Mobile metrics sequence: number first, explanation second. */
@media (max-width: 767px), (orientation: portrait) {
 .metrics > .wrap { text-align: center; }
 .metrics .metric-footnote { margin-inline: auto; }
 .metrics-grid > article {
  min-height: max(560px, 76svh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0;
  overflow: hidden;
  padding: 32px 24px;
  border: 1px solid #26313a;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #080d12 0%, #151f28 48%, #080d12 100%);
  box-shadow: 0 -28px 56px rgb(4 8 12 / 75%), 0 28px 56px rgb(4 8 12 / 75%);
  scroll-margin-top: 72px;
 }
 .metrics-grid > article + article { margin-top: 14px; }
 .metrics-grid > article > .metric-value {
  opacity: .16;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 700ms cubic-bezier(.22,1,.36,1);
 }
 .metrics-grid > article > h3,
 .metrics-grid > article > p,
 .metrics-grid > article > .benchmark-source {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 520ms ease, transform 650ms cubic-bezier(.22,1,.36,1);
 }
 .metrics-grid > article.metric-number-phase > .metric-value {
  opacity: .72;
  transform: translateY(0);
 }
 .metrics-grid > article.metric-copy-phase > .metric-value {
  opacity: 1;
 }
 .metrics-grid > article.metric-copy-phase > h3,
 .metrics-grid > article.metric-copy-phase > p,
 .metrics-grid > article.metric-copy-phase > .benchmark-source {
  opacity: 1;
  transform: translateY(0);
 }
 .metrics-grid > article.metric-copy-phase > h3 { transition-delay: 80ms; }
 .metrics-grid > article.metric-copy-phase > p,
 .metrics-grid > article.metric-copy-phase > .benchmark-source { transition-delay: 180ms; }
 .metrics-grid > article > h3 {
  width: 100%;
  margin: 20px auto 0;
  font-size: 16px;
  white-space: nowrap;
  text-align: center;
  text-wrap: balance;
  line-height: 1.35;
 }
 .metrics-grid > article > p {
  width: min(100%, 32ch);
  max-width: none;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
  line-height: 1.55;
 }
 .metrics-grid > article > .metric-value .metric-number { font-size: 112px; line-height: .95; }
 .metrics-grid > article > .metric-value .metric-unit,
 .metrics-grid > article > .metric-value .metric-arrow { font-size: 40px; }
 .metrics-grid > article > .metric-value.metric-comparison .metric-number { font-size: 88px; }
}

@media (max-width: 767px) {
 /* Keep metric descriptions compact and readable instead of forcing narrow four-line wraps. */
 .metrics-grid > article > p {
  width: 100%;
  max-width: none;
  font-size: 14px;
  letter-spacing: -.02em;
  text-wrap: pretty;
 }
 .metrics-grid > article:nth-child(4) > p { font-size: 13px; letter-spacing: -.035em; }
 .workflow-summary > p { font-size: 10px; white-space: nowrap; }
}

/* Keep column widths unchanged while the outer panel merges. */
.challenge-stage.is-expanded .challenge-triggers { gap: 24px; }
@media (max-width: 767px) { .challenge-stage.is-expanded .challenge-triggers { gap: 16px; } }

/* Active challenge keeps only its own index and title. */
.challenge-stage.is-expanded .challenge-trigger[aria-expanded="false"] h3,
.challenge-stage.is-expanded .challenge-trigger[aria-expanded="false"] .small-number { opacity: 0; }
.challenge-stage:not(.is-expanded) .challenge-description { opacity: 0; transform: translateY(8px); }

/* Revised pairing: meeting for card 2, construction worker for card 3. */
.challenge-stage[data-active="1"] .challenge-photo { background-image: url('assets/challenge-meeting.jfif'); }
.challenge-stage[data-active="2"] .challenge-photo { background-image: url('assets/challenge-site.jpeg'); }
/* A single proportional meeting photo, with its center faded behind the text. */
.challenge-stage[data-active="1"] .photo-left { left: 0; width: 100%; background-size: cover; background-position: center 42%; opacity: 1; mask-image: linear-gradient(to right, #000 0%, #000 18%, rgb(0 0 0 / 18%) 40%, rgb(0 0 0 / 18%) 60%, #000 82%, #000 100%); }
.challenge-stage[data-active="1"] .photo-right { opacity: 0 !important; }
.challenge-stage[data-active="2"] .photo-left { background-position: center 35%; }
@media (max-width: 767px) {
 .challenge-stage[data-active="1"] .photo-left { width: 100%; background-size: cover; background-position: center; }
}

/* All six measurements share the same three-by-two layout. */
.metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 48px 32px; }
.metrics-grid > article { min-width: 0; padding: 0; border: 0; border-radius: 0; }
.metrics-grid > article > strong { display: flex; align-items: baseline; gap: 8px; min-height: 60px; font-size: clamp(28px, 3vw, 44px); line-height: 1.2; }
.metrics-grid > .metric-benchmark > strong { font-size: clamp(24px, 2.5vw, 36px); letter-spacing: -.045em; }
.metrics-grid h3 { margin-top: 16px; }
.metrics-grid .benchmark-source { margin-top: 12px; }
@media (max-width: 1023px) { .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } }
@media (max-width: 767px) { .metrics-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 32px; } }

/* Large numerals and quiet units; emphasize measured outcomes. */
.metrics-grid > article > .metric-value { display: flex; align-items: baseline; gap: 12px; min-height: 84px; font-variant-numeric: lining-nums tabular-nums; }
.metrics-grid .metric-value .metric-number { font-size: clamp(46px,4.5vw,64px); line-height: 1.05; font-weight: 800; letter-spacing: -.055em; color: var(--color-text); }
.metrics-grid .metric-value .metric-highlight, .metrics-grid .metric-after .metric-number { color: var(--color-accent); }
.metrics-grid .metric-value .metric-unit { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--color-text-muted); margin-left: 4px; }
.metrics-grid .metric-value .metric-arrow { font-size: 24px; font-weight: 400; color: var(--color-text-muted); }
.metrics-grid .metric-before, .metrics-grid .metric-after { display: inline-flex; align-items: baseline; }
.metrics-grid .metric-comparison .metric-number { font-size: clamp(36px,3.6vw,50px); }
.metrics-grid .metric-after .metric-unit { color: var(--color-accent); }
.metrics-grid h3 { font-size: 18px; margin-top: 12px; margin-bottom: 12px; }
.metrics-grid h3 { white-space: nowrap; letter-spacing: -.04em; }
.metrics-grid p { font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.metric-break { display: block; }
.workflow-summary > p { white-space: nowrap; font-size: 12px; letter-spacing: -.035em; }
@media (max-width:767px) { .metrics-grid > article > .metric-value { min-height:72px; } .metrics-grid .metric-value .metric-number { font-size:56px; } .metrics-grid .metric-comparison .metric-number { font-size:44px; } }

/* Give the centered case study more vertical breathing room. */
.case-section.compact-case { padding-block: 144px; }
.compact-case .case-intro .muted { margin-top: 24px; }
.compact-case > .client-logo-link { margin-top: 64px; margin-bottom: 40px; }
@media (max-width: 1023px) { .case-section.compact-case { padding-block: 112px; } }
@media (max-width: 767px) {
 .case-section.compact-case { padding-block: 88px; }
 .compact-case > .client-logo-link { margin-top: 48px; margin-bottom: 32px; }
}

/* Prevent narrow columns from forcing text outside their containers. */
.workflow-copy, .workflow-summary, .workflow-summary li { min-width: 0; }
.workflow-copy p, .workflow-summary strong, .workflow-summary small, .workflow-summary > p { overflow-wrap: anywhere; }
.workflow-summary > p { white-space: normal; }
.metrics-grid h3 { white-space: normal; }

@media (min-width: 768px) and (max-width: 900px) {
 .challenge-stage { min-height: 0; }
 .challenge-triggers { grid-template-columns: minmax(0, 1fr); height: auto; gap: 16px; }
 .challenge-trigger { min-height: 220px; }
 .challenge-stage.is-expanded .challenge-triggers { gap: 16px; }
}

@media (max-width: 1599px) {
 .floating-contact { width: min(224px, calc(100vw - 32px)); }
}

/* Additional space above the case-study heading. */
.case-section.compact-case { padding-top: 208px; }
@media (max-width: 1023px) { .case-section.compact-case { padding-top: 160px; } }
@media (max-width: 767px) { .case-section.compact-case { padding-top: 120px; } }

/* A neutral desktop monitor with one fixed screen composition for all stages. */
.workflow-monitor { width: min(100%, 1040px); margin: 0 auto 48px; }
.monitor-frame { position: relative; aspect-ratio: 1481 / 1062; }
.monitor-hardware { display: block; width: 100%; height: auto; }
/* Screen bounds measured against the full uncropped monitor photograph. */
.monitor-screen { position: absolute; left: 11.55%; top: 7.9%; width: 77.5%; height: 61.1%; overflow: hidden; background: #000; border-radius: 1px; }
.monitor-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; opacity: 0; transition: opacity 420ms cubic-bezier(.22,1,.36,1); }
.monitor-shot.is-visible { opacity: 1; }
.monitor-idle { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #66717b; font-size: 24px; font-weight: 700; }
.monitor-idle span { font-size: 13px; font-weight: 400; }
@media (max-width:767px) { .workflow-monitor { margin-bottom: 32px; } }
@media (prefers-reduced-motion:reduce) { .monitor-shot { transition: none; } }

/* Product screen left, readable explanation and bookmarks right. */
.workflow-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 40px; align-items: center; }
.workflow-layout .workflow-monitor { width: 100%; margin: 0; }
.workflow-layout .workflow-book { width: 100%; min-width: 0; margin: 0; }
.workflow-layout .workflow-page { padding: 28px; }
.workflow-layout .workflow-tab-panel { grid-template-columns: minmax(0,1fr); gap: 24px; min-height: 0; }
.workflow-layout .workflow-copy h3 { font-size: clamp(24px,2.3vw,32px); margin: 16px 0 20px; }
.workflow-layout .workflow-copy p { font-size: 15px; line-height: 1.65; }
.workflow-layout .workflow-summary { border-left: 0; border-top: 1px solid var(--color-border); padding: 20px 0 0; }
.workflow-layout .workflow-summary ol { display: flex; gap: 16px; margin: 16px 0; }
.workflow-layout .workflow-summary li { flex: 1; min-width: 0; border-left: 0; padding: 0; }
.workflow-layout .workflow-summary li::before { display: none; }
.workflow-layout .workflow-summary strong { font-size: 14px; }
.workflow-layout .bookmark-tabs { padding-left: 12px; gap: 6px; }
.workflow-layout .bookmark-tabs button { padding-inline: 16px; font-size: 14px; gap: 8px; }
@media (max-width:1023px) {
 .workflow-layout { grid-template-columns: minmax(0,1fr); gap: 40px; }
 .workflow-layout .workflow-monitor { max-width: 800px; margin-inline: auto; }
 .workflow-layout .workflow-book { max-width: 800px; margin-inline: auto; }
}
@media (max-width:767px) {
 .workflow-layout .workflow-page { padding: 24px; }
 .workflow-layout .workflow-summary ol { flex-direction: column; }
 .workflow-layout .bookmark-tabs button { padding-inline: 12px; }
}

/* A wider product showcase than the standard content sections. */
.workflow-section.wrap { width: min(calc(100% - 48px), 1520px); }
.workflow-layout { gap: 48px; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); }
@media (max-width:1023px) { .workflow-section.wrap { width: calc(100% - 64px); } .workflow-layout { grid-template-columns: minmax(0,1fr); gap: 40px; } }
@media (max-width:767px) { .workflow-section.wrap { width: calc(100% - 40px); } }
@media (max-width:374px) { .workflow-section.wrap { width: calc(100% - 32px); } }

/* Reserve equal side gutters so the content stays centered in the viewport.
   The right gutter houses the 224px contact card plus its outer/inner gaps. */
@media (min-width: 1600px) {
 .wrap { width: min(calc(100% - 560px), var(--container)); }
 .workflow-section.wrap { width: min(calc(100% - 560px), 1520px); }
}

/* Desktop section paging also supports touchpads, keyboard scrolling and scrollbars. */
@media (min-width: 768px), (orientation: portrait) {
 html { scroll-snap-type: y mandatory; }
 .hero { padding-block: 84px; }
 .case-section.compact-case { padding-block: 144px; }
 .faq-section { padding-block: 96px; }
 main > section {
  min-height: 100svh;
 display: flex;
 flex-direction: column;
 justify-content: center;
  scroll-margin: 0;
  scroll-snap-align: center;
 scroll-snap-stop: always;
 }

 /* FAQ and the site menu are one final, compact landing-page screen. */
 .faq-section {
  padding-block: 24px;
  justify-content: flex-start;
 }
 .faq-section .final-faq-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
 }
 .faq-section .section-heading { margin-bottom: 16px; }
 .faq-section .section-heading .eyebrow { margin-bottom: 8px; }
 .faq-section .section-heading p { margin-top: 8px; font-size: 15px; }
 .faq-section .faq-list { max-width: 900px; }
 .faq-section summary { min-height: 38px; padding-block: 8px; font-size: 14px; }
 .faq-section summary::after { top: 6px; }
 .faq-section details p { padding-bottom: 12px; font-size: 14px; }
 .faq-section > footer {
  width: 100%;
  margin-top: auto;
  padding-block: 16px;
 }
 .faq-section > footer .footer-grid { width: 100%; gap: 32px; }
 .faq-section > footer h3 { margin-bottom: 4px; }
 .faq-section > footer p { margin: 8px 0; line-height: 1.4; }
 .faq-section > footer a:not(.brand) { min-height: 28px; font-size: 13px; }
}

/* Keep the final FAQ/menu composition on upright phone screens as well. */
@media (max-width: 767px) and (orientation: portrait) {
 .faq-section {
  min-height: 100svh;
  padding-block: 20px;
  display: flex;
  flex-direction: column;
 }
 .faq-section .final-faq-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
 }
 .faq-section .section-heading { margin-bottom: 16px; }
 .faq-section .section-heading .eyebrow { margin-bottom: 8px; }
 .faq-section .section-heading p { margin-top: 8px; font-size: 14px; }
 .faq-section summary { min-height: 42px; padding-block: 9px; font-size: 13px; }
 .faq-section summary::after { top: 7px; }
 .faq-section details p { padding-bottom: 12px; font-size: 13px; }
 .faq-section > footer {
  width: 100%;
  margin-top: auto;
  padding-block: 14px;
 }
 .faq-section > footer .footer-grid {
  width: 100%;
  grid-template-columns: 1.35fr .85fr 1fr;
  gap: 10px;
 }
 .faq-section > footer .brand { font-size: 18px; }
 .faq-section > footer h3 { margin-bottom: 2px; font-size: 11px; }
 .faq-section > footer p { margin: 6px 0; font-size: 11px; line-height: 1.35; }
 .faq-section > footer span { font-size: 10px; }
 .faq-section > footer a:not(.brand) { min-height: 24px; font-size: 11px; line-height: 1.2; }

 /* Long portrait sections advance one card at a time. */
 #problem,
 .metrics {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
 }
 #problem .challenge-trigger,
 .metrics .metrics-grid > article {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  scroll-margin-block: 0;
 }
}

/* Upright viewports page through the long card sequences one card at a time.
   This intentionally applies beyond phone widths: aspect ratio, not width,
   determines the presentation. */
@media (orientation: portrait) {
 html { scroll-snap-type: none; }
 #problem,
 .metrics {
  display: block;
  min-height: 0;
 }
 #problem .challenge-triggers {
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  gap: 0;
 }
 #problem .challenge-stage.is-expanded .challenge-triggers { gap: 0; }
 #problem .challenge-trigger {
  min-height: 0;
  height: calc(100dvh - var(--paging-header-height, 72px));
  padding: 24px 24px 88px;
  justify-content: flex-end;
  border-radius: 12px;
 }
 #problem .challenge-detail { display: none; }
 #problem .challenge-trigger::before { transform: none; }
 #problem .challenge-trigger.mobile-gradient::before,
 #problem .challenge-trigger.mobile-title::before,
 #problem .challenge-trigger.mobile-copy::before { transform: none; }
 #problem .challenge-trigger::after { transform: translateY(100%); transition: transform 550ms ease, opacity 550ms ease; }
 #problem .challenge-trigger.mobile-copy::after { transform: translateY(0); }
 #problem .challenge-trigger.mobile-photo h3,
 #problem .challenge-trigger.mobile-gradient h3,
 #problem .challenge-trigger.mobile-photo .small-number,
 #problem .challenge-trigger.mobile-gradient .small-number { opacity: 0; }
 .metrics-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 0;
 }
 .metrics-grid > article + article { margin-top: 0; }
 .metrics-grid > article {
  min-height: 0;
  height: calc(100dvh - var(--paging-header-height, 72px));
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
 }
 .metrics-grid > article > .metric-value { justify-content: center; }
 .metrics-grid > article > .metric-value .metric-number { font-size: clamp(40px, 8vw, 64px); }
 .metrics-grid > article > .metric-value .metric-unit,
 .metrics-grid > article > .metric-value .metric-arrow { font-size: 18px; }
 .metrics-grid > article h3 { white-space: normal; }
 .metrics-grid > article {
  position: relative;
  isolation: isolate;
 }
 .metrics-grid > article::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 12% at 50% 50%, rgb(83 206 211 / 20%), transparent 100%);
  opacity: 0;
  transition: opacity 520ms ease;
 }
 .metrics-grid > article.metric-copy-phase::before {
  opacity: 1;
  transition-delay: 180ms;
 }
 .metrics-grid > article > .metric-value .metric-number { font-weight: 800; }
 .metrics-grid > article.metric-number-phase > .metric-value { opacity: 1; }
}

/* Plans remain a centered vertical list in both orientations. */
.pricing-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 grid-auto-flow: row;
 width: min(100%, 560px);
 margin-inline: auto;
 gap: 32px;
}
#pricing { scroll-snap-align: none; }
#pricing > .section-heading, .pricing-grid > article {
 scroll-snap-align: center;
 scroll-snap-stop: always;
}
.hero h1 { margin: 0 auto; }
main > .hero {
 min-height: calc(100dvh - var(--paging-header-height, 72px));
 display: flex;
 flex-direction: column;
 justify-content: center;
 padding-block: 32px;
}
.hero .hero-statement { margin-top: 20px; }
.hero .hero-description { margin-top: 12px; }
.hero .hero-demo {
 width: min(100%, 880px, max(240px, calc((100dvh - 370px) * 1.7778)));
 margin-top: 24px;
}
.final-faq-content { width: 100%; }
.final-faq-content .faq-list { width: min(100%, 900px); }

/* Responsive editorial wrapping: preserve intentional heading breaks while
   allowing prose to adapt at punctuation and phrase boundaries. */
h1, h2, h3,
.price, .custom-price,
summary, .text-link, .button {
 text-wrap: balance;
 overflow-wrap: normal;
 word-break: normal;
}
p, li, small,
.challenge-description,
.workflow-summary strong,
.workflow-capabilities span {
 text-wrap: pretty;
 overflow-wrap: break-word;
 word-break: normal;
 orphans: 2;
 widows: 2;
}
wbr { display: inline; }

/* Landscape paging uses section centers, without anchor-link offsets. */
@media (orientation: landscape) {
 .challenge-stage:not(.is-expanded) .challenge-description {
  opacity: 1;
  transform: translateY(0);
 }
 body { padding-right: 0; padding-bottom: 136px; }
 .floating-contact {
  top: auto;
  right: 16px;
  bottom: 16px;
  width: 224px;
  padding: 12px;
  transform: translateY(var(--contact-lag, 0px));
 }
 .floating-contact > .eyebrow,
 .floating-contact > h2,
 .floating-contact > p:not(#contact-status) { display: none; }
 .floating-contact .button { margin-top: 0; }
 .wrap,
 .workflow-section.wrap {
  width: min(calc(100% - clamp(48px, 8vw, 144px)), 1440px);
 }
 .metrics-grid {
  gap: clamp(64px, 8vh, 96px) clamp(48px, 4vw, 72px);
  margin-top: clamp(40px, 5vh, 56px);
 }
 .metrics-grid > article > .metric-value {
  min-height: clamp(84px, 10vh, 104px);
 }
 #problem .challenge-stage { min-height: clamp(340px, 44vh, 400px); }
 #problem .challenge-triggers { height: clamp(340px, 44vh, 400px); }
 .case-section.compact-case > .client-logo-link {
  width: clamp(300px, 24vw, 420px);
  margin-top: clamp(48px, 7vh, 72px);
  margin-bottom: clamp(28px, 4vh, 40px);
 }
 .case-section.compact-case .case-intro h2 {
  font-size: clamp(38px, 3.2vw, 52px);
 }
 .data-grid { gap: clamp(56px, 6vw, 96px); }
 .data-details article { padding-block: clamp(28px, 4vh, 40px); }
 main > section[id] { scroll-margin: 0; }
 .pricing-grid {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
 }
 #pricing { scroll-snap-align: center; }
 #pricing > .section-heading, .pricing-grid > article {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
 }
}