/* Stratum's product-led design: open space, clear type, original Meridian artwork. */
:root {
  --bg: #fff; --bg-2: #f7f7f7; --surface: #fff; --surface-2: #f1f1f1; --surface-3: #e9e9e9;
  --text: #111; --text-2: #555; --text-3: #666;
  --line: #00000012; --line-2: #00000020; --line-3: #00000055;
  --green: #111; --green-hi: #333; --signal: #333; --signal-soft: #00000006; --signal-line: #00000040;
  --gutter: clamp(22px, 2.5vw, 40px); --container: 1440px; --header: 74px;
}
body { letter-spacing: -.015em; }
.site-header { background: #fffffffa; border-bottom: 0; }
.brand { font-weight: 650; font-size: 1.15rem; letter-spacing: -.045em; }
.nav-shell { gap: clamp(2rem, 5vw, 5rem); }
.nav-links { justify-content: center; }
.nav-contact { margin-inline-start: auto; }
.nav-contact, .button { background: #111; color: #fff; border-radius: 999px; border-color: transparent; }
.nav-contact:hover, .button:hover { background: #333; color: #fff; }
.button { min-height: 46px; padding: .85rem 1.45rem; }
.nav-contact { min-height: 40px; }
.eyebrow { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: .8rem; color: #555; }
.text-link { border: 0; font-size: .88rem; }
.text-link:hover { color: #666; }
.status-pill { color: #555; background: #f4f4f4; border: 0; font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: .72rem; padding: .35rem .65rem; }
.meridian-hero { text-align: center; padding-block: clamp(4rem, 7vw, 7.5rem) clamp(3rem, 5vw, 5rem); }
.meridian-kicker { display: flex; justify-content: center; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: .83rem; margin-bottom: 1.5rem; }
.meridian-hero h1 { font-size: clamp(3rem, 6.6vw, 6.4rem); font-weight: 600; line-height: 1.05; letter-spacing: -.07em; max-width: 16ch; margin-inline: auto; }
.meridian-hero h1 span { position: relative; color: #111; }
.meridian-hero-description { max-width: 56ch; margin: 1.75rem auto 0; font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.7; color: #444; text-wrap: pretty; }
.meridian-hero .hero-actions { justify-content: center; margin-top: 1.7rem; gap: 1.5rem; }
.meridian-release-note { max-width: 65ch; margin: 1.5rem auto 0; color: #666; font-size: .76rem; line-height: 1.6; }
.meridian-feature { scroll-margin-top: 90px; }
.meridian-feature-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.7rem; }
.meridian-feature-heading h2 { font-size: clamp(1.5rem, 2.2vw, 2.3rem); line-height: 1.15; letter-spacing: -.05em; }
.meridian-feature-heading p { color: #555; max-width: 40ch; font-size: .9rem; }
.meridian-stage { display: grid; grid-template-columns: 1fr 1fr; background: #f5f5f5; border-radius: 8px; overflow: hidden; }
.meridian-art { min-height: 540px; position: relative; display: grid; place-items: center; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 10% 5%, #ffdbce, transparent 65%), linear-gradient(145deg, #ffd9ce, #ff9b7f 45%, #d94c40); }
.meridian-art::before { content: ''; position: absolute; width: 75%; aspect-ratio: 1; border-radius: 50%; bottom: -48%; background: #502326; filter: blur(80px); opacity: .45; }
.meridian-sphere { position: relative; width: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 24%, #dbffff 0%, #9bebf3 15%, #4a9fff 42%, #1663dc 64%, #152866 86%); box-shadow: inset -18px -16px 30px #041f6833, 20px 36px 55px #512d4540; }
.meridian-sphere::after { content: ''; position: absolute; inset: 13%; border: 1px solid #ffffff60; border-radius: 50%; transform: rotate(-35deg) scaleX(.42); }
.meridian-orbit { position: absolute; width: 85%; aspect-ratio: 1; border: 1px solid #ffffff70; border-radius: 50%; transform: rotate(-28deg) scaleY(.42); z-index: 1; }
.meridian-orbit::after { content: ''; position: absolute; width: 15px; height: 15px; background: #eafffa; border-radius: 50%; top: 22%; right: 8%; box-shadow: 0 0 24px #fff; }
.meridian-art-word { position: absolute; bottom: 1.8rem; inset-inline-start: 2rem; font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 500; letter-spacing: -.06em; color: #421e24; }
.meridian-solar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.meridian-story { padding: clamp(1.5rem, 3.6vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.meridian-story > .eyebrow { color: #555; margin-bottom: 1.2rem; }
.meridian-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 2rem; }
.meridian-tabs button { font: inherit; font-size: .75rem; padding: .55rem .7rem; min-height: 44px; border: 1px solid transparent; color: #555; background: transparent; border-radius: 999px; cursor: pointer; }
.meridian-tabs button:hover { background: #e8e8e8; color: #111; }
.meridian-tabs button[aria-selected="true"] { background: #111; color: #fff; }
.meridian-role-panel { min-height: 270px; }
.meridian-role-panel[hidden] { display: none; }
.meridian-role-panel h3 { font-size: clamp(1.65rem, 2.8vw, 2.75rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.15; }
.meridian-role-panel > p { font-size: .9rem; line-height: 1.7; color: #555; max-width: 46ch; margin-top: 1.25rem; }
.meridian-steps { list-style: none; margin-top: 1.5rem; display: grid; gap: .8rem; padding: 0; }
.meridian-steps li { display: flex; align-items: center; gap: .85rem; font-size: .82rem; }
.meridian-steps span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #ccc; border-radius: 50%; font-size: .62rem; flex-shrink: 0; }
.meridian-feature-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.2rem; font-size: .75rem; color: #666; }
.scale-products { background: #fff; }
.scale-section-heading h2 { font-size: clamp(2rem, 3.7vw, 3.5rem); font-weight: 500; }
.scale-section-heading > div { gap: .9rem; }
.meridian-product-index { margin-top: 2rem; display: flex; align-items: center; justify-content: space-between; padding: 1.7rem 0; border-block: 1px solid var(--line-2); gap: 2rem; }
.meridian-product-index h3 { font-size: 1.7rem; margin-top: .5rem; }
.meridian-product-index p { color: #555; margin-top: .35rem; font-size: .9rem; }
.meridian-product-index:hover h3 { color: #555; }
.scale-product-grid { margin-top: 2rem; gap: 1.5rem; }
.scale-product { background: #fff; border: 0; }
.scale-product-art { border-radius: 6px; background: #e9edeb; }
.scale-product-crm .scale-product-art { background: #eae8e5; }
.scale-product-body { padding: 1.4rem 0 0; }
.scale-product-title h3 { font-size: 1.35rem; }
.scale-product-body > p { font-size: .9rem; max-width: 47ch; margin-top: .8rem; }
.scale-product-body .text-link { padding-top: 1.1rem; }
.scale-services { background: #f7f7f7; }
.scale-intro h2, .scale-approach-head h2 { font-weight: 500; }
.scale-intro h2 em, .scale-approach-head h2 em { font-family: var(--body); font-style: normal; color: inherit; }
.scale-capability:hover h3 { color: #555; }
.scale-approach { background: #fff; color: #111; }
.scale-approach .eyebrow, .scale-process .index { color: #666; }
.scale-approach-head .text-link { color: #111; }
.scale-process li { border-color: #ddd; }
.scale-process p { color: #555; }
.page-home .recent-work .frame { background: #f3f3f3; border-radius: 6px; }
.page-home .work-card:nth-child(2) .frame { background: #f3f3f3; }
.contact-section { background: #f7f7f7; }
.form-row input, .form-row textarea { background: #fff; border-radius: 6px; }
.site-footer { background: #fff; }
.footer-signature { color: #111; }
.panel-bar, .vg-chrome { background: #eee; }
.flow-visual { background: #f7f7f7; }
.flow-visual::after { background: radial-gradient(ellipse at center, transparent 42%, #f7f7f7 92%); }
.meridian-editorial { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 5vw, 6rem); }
.meridian-editorial h2, .meridian-closing h2 { font-size: clamp(2rem, 3.9vw, 4rem); line-height: 1.13; letter-spacing: -.055em; font-weight: 500; }
.meridian-editorial p:not(.eyebrow) { max-width: 60ch; line-height: 1.8; color: #555; margin-top: 1.5rem; }
.meridian-principles { background: #f7f7f7; }
.meridian-principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 3rem; }
.meridian-principle-grid article { border-top: 1px solid #ccc; padding-top: 1.25rem; }
.meridian-principle-grid h3 { font-size: 1.5rem; margin-top: 1.5rem; }
.meridian-principle-grid p { color: #555; font-size: .9rem; line-height: 1.8; margin-top: 1rem; }
.meridian-faq details { border-bottom: 1px solid #ddd; }
.meridian-faq summary { cursor: pointer; padding-block: 1.4rem; font-size: 1rem; }
.meridian-faq details p { margin-top: 0; padding-bottom: 1.5rem; font-size: .9rem; }
.meridian-closing { text-align: center; background: #f7f7f7; }
.meridian-closing .eyebrow { margin-bottom: 1.5rem; }
.meridian-closing p:not(.eyebrow) { margin-top: 1.5rem; color: #555; }
.meridian-closing .button { margin-top: 1.75rem; }
.locale-ar .meridian-hero h1 { letter-spacing: -.035em; line-height: 1.35; max-width: 22ch; }
.locale-ar .meridian-art-word { letter-spacing: -.06em; }

/* A distinct chapter break between Meridian and the other Stratum products. */
.stratum-product-divider { text-align: center; padding-block: 1rem 3rem; }
.stratum-product-divider h2 { color: #000; font-size: clamp(3rem, 7.6vw, 7.5rem); letter-spacing: -.065em; font-weight: 600; line-height: 1.08; }
.stratum-product-divider p { max-width: 58ch; margin: 1.7rem auto 0; color: #555; font-size: .95rem; line-height: 1.8; }
.scale-products .scale-product-grid { margin-top: 0; }
.meridian-hero h1 { max-width: 22ch; }
.locale-es .meridian-hero h1 { font-size: clamp(2.55rem, 5.7vw, 5.5rem); max-width: 26ch; }
.meridian-rotating-line { display: block; min-height: 1.1em; }
[data-rotating-role] { display: inline; transition: opacity 220ms ease, filter 220ms ease; }
[data-rotating-role].is-changing { opacity: 0; filter: blur(3px); }
.meridian-motion-control { display: flex; justify-content: center; margin-top: .8rem; }
.meridian-motion-toggle { display: inline-flex; gap: .45rem; align-items: center; justify-content: center; min-height: 44px; font: inherit; font-size: .68rem; color: #666; border: 0; background: transparent; cursor: pointer; padding: .5rem .8rem; border-radius: 999px; }
.meridian-motion-toggle[hidden] { display: none; }
.meridian-motion-toggle:hover { color: #111; background: #f5f5f5; }
.motion-icon { height: 9px; width: 8px; border-inline: 2px solid currentColor; }
[aria-pressed="true"] .motion-icon { width: 0; height: 0; border: 5px solid transparent; border-inline-start: 7px solid currentColor; border-inline-end: 0; }
.meridian-motion-enabled .meridian-art.is-in-view .meridian-sphere { animation: meridian-float 7s ease-in-out infinite; }
.meridian-motion-enabled .meridian-art.is-in-view .meridian-orbit { animation: meridian-orbit 12s ease-in-out infinite; }
.meridian-motion-enabled .meridian-art.is-in-view .meridian-solar-image { animation: meridian-image-drift 12s ease-in-out infinite; }
@keyframes meridian-image-drift { 0%,100% { transform: scale(1.015) translateY(0); } 50% { transform: scale(1.04) translateY(-3px); } }
@keyframes meridian-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes meridian-orbit { 0%,100% { transform: rotate(-28deg) scaleY(.42); } 50% { transform: rotate(-14deg) scaleY(.48); } }

/* A visual handoff from the first conversation to the rest of the work. */
.meridian-workflow-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 3rem; }
.meridian-workflow-copy h2 { font-size: clamp(2rem, 3.7vw, 3.6rem); line-height: 1.15; letter-spacing: -.055em; margin-top: 1rem; }
.meridian-workflow-copy > p:not(.eyebrow) { color: #555; font-size: .9rem; line-height: 1.8; margin-top: 1.25rem; }
.meridian-network { position: relative; width: 100%; aspect-ratio: 1.65; min-height: 360px; border-radius: 12px; background: radial-gradient(ellipse at center, #fff 0%, #eaf3fc 75%); }
.meridian-network-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.meridian-network-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; gap: .5rem; z-index: 2; }
.network-core-mark { display: grid; place-items: center; width: 82px; height: 82px; background: radial-gradient(circle at 25% 20%, #b6f8fa, #518ef1 65%, #244aae); color: #fff; border-radius: 50%; font-size: 2.2rem; font-weight: 500; box-shadow: 0 0 0 12px #528dec0c, 0 0 0 26px #528dec06; }
.meridian-network-core > strong { font-size: .8rem; font-weight: 600; }
.meridian-network-node { position: absolute; width: 155px; min-height: 96px; padding: .8rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .6rem; text-align: center; transform: translate(-50%,-50%); border: 1px solid #d7e0ea; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px #284e7008; transition: border-color 500ms ease, background 500ms ease, box-shadow 500ms ease; z-index: 3; }
.meridian-network-node strong { font-size: .71rem; line-height: 1.5; font-weight: 500; max-width: 22ch; }
.network-call { top: 22%; left: 22%; } .network-book { top: 22%; left: 78%; } .network-record { top: 78%; left: 22%; } .network-follow { top: 78%; left: 78%; }
.network-icon { display: grid; place-items: center; width: 28px; height: 28px; color: #62809b; }
.network-icon svg { width: 24px; height: 24px; }
.meridian-network-node.is-current { background: #fff2eb; border-color: #edb49b; box-shadow: 0 8px 25px #dc805419; }
.meridian-network-node.is-current .network-icon { color: #b86943; }
.meridian-motion-enabled .meridian-network.is-in-view .network-travel { animation: meridian-travel 5s linear infinite; }
@keyframes meridian-travel { to { stroke-dashoffset: -120; } }
.meridian-mini-art { height: 150px; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 8px; overflow: hidden; margin-bottom: 1.5rem; background: #e8eff7; }
.meridian-context-art i { position: absolute; width: 100px; height: 70px; background: #fff; border: 1px solid #c7d5e4; border-radius: 8px; transform: rotate(-10deg); box-shadow: 0 10px 18px #38639014; }
.meridian-context-art i:nth-child(2) { transform: rotate(12deg); } .meridian-context-art i:nth-child(3) { transform: rotate(0); }
.meridian-context-art b { z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #538de6; color: #fff; font-weight: 500; }
.meridian-model-art { background: #f8e8e0; gap: .7rem; }
.meridian-model-art i { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #e5c6b5; }
.meridian-model-art i:nth-child(2) { background: #edaa88; } .meridian-model-art i:nth-child(3) { background: #733f32; }
.meridian-model-art b { position: absolute; color: #733f32; top: 30px; right: 30px; font-weight: 400; }
.meridian-control-art { flex-direction: column; gap: .65rem; background: #eceaf4; }
.meridian-control-art i { display: flex; align-items: center; width: 90px; height: 16px; border-radius: 999px; background: #d6cfe7; padding-inline: 3px; }
.meridian-control-art i:nth-child(2) { width: 65px; background: #b2a0d0; }
.meridian-control-art i:nth-child(3) { width: 110px; }
.meridian-control-art b { display: block; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.meridian-motion-enabled .meridian-mini-art.is-in-view { animation: meridian-color-breathe 8s ease-in-out infinite; }
@keyframes meridian-color-breathe { 0%,100% { filter: saturate(1); } 50% { filter: saturate(1.3); } }
.meridian-motion-paused .meridian-art *, .meridian-motion-paused .meridian-network *, .meridian-motion-paused .meridian-mini-art { animation-play-state: paused !important; }
@media (max-width: 960px) { .meridian-workflow-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .meridian-network { min-width: 0; max-width: 820px; margin-inline: auto; } }
@media (max-width: 720px) {
  .stratum-product-divider { padding-bottom: 2rem; } .stratum-product-divider h2 { font-size: clamp(2.7rem, 11vw, 4rem); max-width: 12ch; margin-inline: auto; }
  .meridian-rotating-line { min-height: 2.25em; } .locale-ar .meridian-rotating-line { min-height: 2.65em; }
  .meridian-network { aspect-ratio: 1; min-height: 360px; }
  .meridian-network-node { width: 118px; min-height: 97px; padding: .7rem .6rem; }
  .meridian-network-node strong { font-size: .67rem; } .network-core-mark { width: 64px; height: 64px; font-size: 1.8rem; }
  .meridian-mini-art { height: 150px; } .meridian-motion-control { margin-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) { [data-rotating-role] { transition: none; } }
@media (max-width: 1100px) { .meridian-stage { grid-template-columns: .9fr 1.1fr; } .meridian-story { padding: 2rem; } }
@media (max-width: 960px) {
  .site-header { backdrop-filter: none; } .nav-links { justify-content: start; } .nav-contact { margin-inline-start: 0; }
  .meridian-art { min-height: 520px; } .meridian-tabs { margin-bottom: 1.3rem; }
  .meridian-story { padding: 1.5rem; } .meridian-principle-grid { gap: 1.5rem; }
}
@media (max-width: 720px) {
  :root { --header: 70px; } .meridian-hero { padding-top: 3.5rem; padding-bottom: 3rem; }
  .meridian-hero h1 { font-size: clamp(2.55rem, 10.5vw, 4.5rem); } .meridian-hero-description { margin-top: 1.3rem; font-size: .95rem; }
  .meridian-hero .hero-actions { flex-direction: column; align-items: center; gap: 1.2rem; }
  .meridian-feature-heading { flex-direction: column; align-items: start; gap: .8rem; }
  .meridian-feature-heading h2 { font-size: 1.6rem; } .meridian-feature-heading p { font-size: .85rem; }
  .meridian-stage { grid-template-columns: 1fr; } .meridian-art { min-height: 300px; } .meridian-sphere { width: 47%; max-width: 240px; }
  .meridian-orbit { width: 70%; max-width: 380px; } .meridian-art-word { bottom: 1rem; inset-inline-start: 1.5rem; font-size: 2rem; }
  .meridian-story { padding: 1.5rem; } .meridian-role-panel { min-height: 285px; } .meridian-role-panel h3 { font-size: 1.9rem; }
  .meridian-tabs { gap: .2rem; } .meridian-tabs button { font-size: .71rem; padding-inline: .6rem; }
  .meridian-feature-footer { flex-direction: column; align-items: start; gap: .6rem; }
  .meridian-editorial, .meridian-principle-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .meridian-product-index { gap: 1rem; } .meridian-product-index p { max-width: 28ch; }
  .meridian-principle-grid { margin-top: 2rem; gap: 2rem; } .meridian-principle-grid h3 { margin-top: 1rem; }
  .meridian-faq .meridian-editorial { gap: 1rem; }
}