/* Approved editorial layout. Identity and functional components use the base layer. */
:root { --editorial-line: #5C896133; }
body { font-family: Arial, Helvetica, sans-serif; }
.section { padding-block: 96px; }
.section-label { color: var(--forest); letter-spacing: .13em; }
.section-heading { align-items: end; gap: 48px; margin-bottom: 40px; }
.section-heading h2 { font-size: clamp(38px, 4.2vw, 60px); }
.section-heading > p, .heading-aside > p { font-size: 14px; max-width: 40ch; }
.button { border-radius: 4px; }
.site-header { background: var(--perla); }

/* A broad photograph anchors the introduction; the copy stays first in reading order. */
.hero { background: radial-gradient(ellipse at 95% 10%, #B6E2C12E, transparent 55%); }
.hero-grid { display: block; padding-block: 52px 0; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; gap: 0 54px; padding: 0; }
.hero-copy > .eyebrow { grid-column: 1 / -1; margin-bottom: 28px; }
.hero h1 { font-size: clamp(64px, 6.7vw, 96px); line-height: 1.02; letter-spacing: -.065em; margin: 0; }
.hero-intro { padding-bottom: 5px; }
.hero-subtitle { margin: 0 0 12px; font-size: 22px; letter-spacing: -.035em; }
.hero-description { margin: 0; font-size: 14px; line-height: 1.8; max-width: 40ch; }
.hero-visual { width: 100%; max-width: none; margin: 36px 0 0; padding: 0; }
.hero-image-frame { border-radius: 76px 8px 8px 8px; }
.hero-visual picture { aspect-ratio: 2.32; min-height: 260px; border-radius: inherit; }
.hero-image { object-position: center 56%; }
.hero-visual picture::after { inset: 30% 0 0; background: linear-gradient(transparent, #14251BA6); }
.image-coordinate { display: none; }
.hero-image-label { z-index: 2; left: 30px; right: 28px; bottom: 26px; font-size: 13px; }
.hero-axis { z-index: 2; inset: 22px 22px auto auto; writing-mode: horizontal-tb; font-size: 9px; letter-spacing: .1em; border: 1px solid #B6E2C15C; border-radius: 30px; padding: 6px 12px; background: #20362AC2; color: var(--menta); }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 25px; }
.hero-footnote { margin: 0; flex-wrap: wrap; font-size: 11px; gap: 10px; }
.hero-actions { margin: 0; gap: 24px; }
.hero-actions .button { background: var(--forest); }
.hero-actions .text-link { font-size: 11px; }
.capability-strip { padding-block: 22px; flex-wrap: wrap; font-size: 11px; gap: 14px 24px; border-color: var(--editorial-line); }
.capability-strip span { gap: 14px; }
.capability-strip span::before { content: "+"; color: var(--prado); }

/* Asymmetric cards retain every description, tag and original texture. */
.solutions { background: #F7F7F3; }
.solutions-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; border: 0; }
.solution-card { display: flex; flex-direction: column; align-items: stretch; grid-column: span 2; grid-row: auto; border: 1px solid #5C89611F; border-radius: 8px; padding: 30px; background: var(--perla); transition: translate 400ms var(--motion-ease), box-shadow 400ms ease, background-color 300ms ease; }
.solution-card:nth-child(1) { grid-column: span 3; grid-row: span 2; background: var(--forest); color: var(--perla); padding: 300px 36px 36px; justify-content: end; min-height: 620px; }
.solution-card:nth-child(2), .solution-card:nth-child(3) { grid-column: span 3; }
.solution-card:nth-child(1) .card-top { position: absolute; left: 36px; right: 36px; top: 30px; }
.solution-card:nth-child(1)::before { opacity: .18; filter: brightness(2); }
.solution-card h3 { min-height: 0; max-width: 100%; font-size: 24px; line-height: 1.2; letter-spacing: -.035em; }
.solution-card:nth-child(1) h3 { max-width: 20ch; font-size: 38px; }
.solution-card > p { line-height: 1.85; margin: 17px 0 26px; }
.solution-card:nth-child(1) > p { color: #D0DACC; max-width: 48ch; }
.solution-card > .tags { margin-top: auto; align-self: auto; }
.solution-card:nth-child(1) > .tags { margin-top: 0; }
.solution-card:nth-child(1) :is(.card-top > span, .icon) { color: var(--menta); }
.solution-card:nth-child(1) .tags span { color: var(--menta); background: #B6E2C110; }
.card-top { margin-bottom: 24px; }
.solution-card::before { height: 180px; background-position: right -20px top -20px; opacity: .4; }
.solution-accent { background: var(--arandano); border-color: var(--arandano); color: var(--perla); }
.solution-accent > p { color: #E0E8EF; }
.service-network { position: absolute; top: 66px; right: -10px; width: 98%; height: 230px; fill: none; stroke: var(--menta); stroke-width: 1.1; opacity: .65; pointer-events: none; }
.service-network path { stroke-dasharray: 5 6; animation: editorial-network-flow 30s linear infinite; animation-play-state: paused; }
.service-network circle { fill: var(--forest); }
.service-network circle:last-child { fill: var(--menta); stroke: none; }
.motion-in-view .service-network path { animation-play-state: running; }
@keyframes editorial-network-flow { to { stroke-dashoffset: -110; } }
@media (hover: hover) and (pointer: fine) {
  .solution-card:hover { translate: 0 -4px; box-shadow: 0 12px 30px #2C353E0C; background: #E9EEE6; }
  .solution-card:nth-child(1):hover { background: var(--forest); }
  .solution-accent:hover { background: var(--arandano); }
}

/* Related sections share the quieter surfaces without losing their interactions. */
.industry-panel { border-radius: 8px 64px 8px 8px; overflow: hidden; }
.industry-tabs > button { min-height: 49px; }
.industry-tabs > button[aria-selected="true"] { color: var(--perla); background: var(--forest); border-color: var(--forest); }
.technology { background: var(--acero); padding-bottom: 0; }
.technology::before { opacity: .18; }
.technology-grid { gap: 64px; }
.technology h2 { font-size: clamp(38px, 3.8vw, 54px); }
.technology h2 em { color: var(--menta); }
.technology-copy > p { max-width: 40ch; }
.ecosystem { min-width: 0; }
.eco-node { min-height: 80px; border-color: #B6E2C128; border-radius: 6px; }
.eco-node .icon { color: var(--menta); }
.ecosystem-detail { border-radius: 6px; }
.about::before { opacity: .24; }
.about-grid { gap: 70px; }
.founder-card { border-radius: 8px; }
.principles > span { border-color: var(--editorial-line); }
.methodology { background-color: #E4EBDD; }
.methodology::before { opacity: .55; }
.impact-outcomes article { border-color: #B6E2C133; }
.project-card { border-radius: 8px; overflow: hidden; }
.project-image { border-radius: 8px 48px 0 0; overflow: hidden; }
.contact { background: var(--perla); }
.contact::before { opacity: .32; }
.contact-grid { gap: 70px; }
.form-wrap { border: 1px solid var(--editorial-line); border-radius: 8px 48px 8px 8px; padding: 38px; }
.site-footer { background: var(--acero); }

@media (max-width: 1100px) {
  .hero-copy { gap: 0 35px; }
  .hero h1 { font-size: clamp(60px, 7.1vw, 78px); }
  .hero-subtitle { font-size: 19px; }
  .hero-description { font-size: 13px; }
  .hero-bottom { align-items: start; }
  .hero-footnote { max-width: 45%; }
  .hero-actions { justify-content: end; }
  .solution-card { padding: 26px; }
  .solution-card:nth-child(1) { padding: 300px 30px 30px; }
  .solution-card:nth-child(1) .card-top { inset-inline: 30px; }
  .solution-card h3 { font-size: 23px; }
  .solution-card:nth-child(1) h3 { font-size: 34px; }
  .technology-grid, .about-grid, .contact-grid { gap: 40px; }
}
@media (max-width: 760px) {
  .section { padding-block: 70px; }
  .section-heading { gap: 24px; margin-bottom: 32px; }
  .hero-grid { padding-top: 36px; }
  .hero-copy { grid-template-columns: 1fr; gap: 24px; }
  .hero-copy > .eyebrow { margin: 0; }
  .hero h1 { font-size: clamp(44px, 8.5vw, 65px); }
  .hero-subtitle { font-size: 19px; margin-bottom: 8px; }
  .hero-description { font-size: 13px; max-width: 52ch; }
  .hero-visual { margin-top: 30px; }
  .hero-image-frame { border-top-left-radius: 58px; }
  .hero-visual picture { aspect-ratio: 1.65; min-height: 220px; }
  .hero-image-label { left: 22px; right: 20px; bottom: 20px; font-size: 12px; }
  .hero-axis { top: 16px; right: 16px; font-size: 7px; padding: 5px 9px; letter-spacing: .06em; }
  .hero-bottom { flex-direction: column; align-items: stretch; gap: 22px; }
  .hero-footnote { max-width: none; font-size: 10px; }
  .hero-actions { justify-content: space-between; gap: 18px; }
  .capability-strip { justify-content: start; font-size: 10px; gap: 12px 20px; }
  .solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .solution-card, .solution-card:nth-child(2), .solution-card:nth-child(3) { grid-column: span 1; grid-row: auto; padding: 23px; }
  .solution-card:nth-child(1) { grid-column: 1 / -1; grid-row: auto; min-height: 490px; padding: 250px 28px 28px; }
  .solution-card:nth-child(1) .card-top { left: 28px; right: 28px; top: 26px; }
  .solution-card:last-child { grid-column: 1 / -1; }
  .solution-card h3 { font-size: 21px; }
  .solution-card:nth-child(1) h3 { font-size: 33px; }
  .solution-card > p { font-size: 12px; }
  .solution-card .tags { gap: 5px; }
  .solution-card .tags span { white-space: normal; }
  .service-network { height: 190px; top: 55px; }
  .industry-tabs > button { min-height: 44px; }
  .industry-panel { border-top-right-radius: 48px; }
  .technology { padding-block: 70px 0; }
  .technology-grid { gap: 36px; }
  .technology h2 { font-size: clamp(36px, 7.5vw, 52px); }
  .ecosystem { width: 100%; max-width: 540px; }
  .technology-bottom { margin-top: 36px; }
  .about-grid, .contact-grid { gap: 36px; }
  .form-wrap { padding: 28px; border-top-right-radius: 38px; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 43px; }
  .hero-actions { align-items: start; flex-direction: column; gap: 17px; }
  .hero-visual picture { aspect-ratio: 1.4; }
  .hero-axis { max-width: calc(100% - 40px); font-size: 6px; }
  .solutions-grid { grid-template-columns: minmax(0, 1fr); }
  .solution-card:nth-child(n) { grid-column: 1; }
  .solution-card:nth-child(1) { min-height: 500px; }
  .solution-card h3 { font-size: 25px; }
  .solution-card:nth-child(1) h3 { font-size: 31px; }
  .service-network { top: 62px; height: 170px; }
  .form-wrap { padding: 25px 20px; }
}
html.motion-paused .service-network path, html.motion-document-hidden .service-network path { animation-play-state: paused; }
html.motion-paused .solution-card { translate: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .service-network path { animation: none; }
  .solution-card { translate: none; transition: none; }
}