/* A private company workspace, in the filmed application's visual language.
   Section-level typography and rails are owned by home-foundation.css. */
.os-section { padding: 24px 0 88px; }
.os-section__intro { display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: 60px; margin-bottom: 38px; }
.os-section__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; color: var(--steel); margin-bottom: 18px; }
.os-section__intro h2 { font-size: clamp(34px, 4.1vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }
.os-section__intro > p { max-width: 38ch; font-size: 17px; line-height: 1.65; color: var(--steel); }

.company-os {
  --os-surface: #fff;
  --os-platinum: #f5f6f5;
  --os-shim: #e9edeb;
  --os-border: #d5dcda;
  --os-text: #5e6a6c;
  --os-moss: #2f4a48;
  --os-line: #2f4a48;
  margin: 0;
}
.company-os__private {
  border: 1px solid var(--os-border);
  background: var(--os-surface);
  color: var(--ink);
}
.company-os__heading {
  padding: 26px 24px 23px;
  border-bottom: 1px solid var(--os-border);
  background: var(--os-platinum);
  text-align: center;
}
.company-os__heading h3 {
  font-size: clamp(25px, 2.3vw, 30px);
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.15;
}
.company-os__privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--os-text);
  font-size: 13px;
  line-height: 1.5;
}
.company-os__privacy svg { width: 16px; height: 16px; flex: none; }
.company-os__cycle { position: relative; margin: 0 24px; padding-top: 28px; padding-bottom: 17px; }
.company-os__workspaces { list-style: none; display: flex; justify-content: center; }
.company-os__workspace {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% / 7);
  min-width: 0;
  padding: 0 3px;
  color: var(--ink);
  text-align: center;
}
.company-os__workspace-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 80px;
  aspect-ratio: 1906 / 1675;
  margin-bottom: 12px;
  color: var(--os-moss);
}
/* Exact flat-top/flat-bottom logo geometry. Full SVG stroke, never clip-path. */
.company-os__hex { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.company-os__hex polygon { fill: var(--os-platinum); stroke: #aebfba; stroke-width: 1.2; stroke-linejoin: miter; }
.company-os__workspace-icon .company-os__department-symbol { position: relative; display: block; width: 32px; height: 32px; }
.company-os__workspace--first .company-os__workspace-icon { color: #fdfdfb; }
.company-os__workspace--first .company-os__hex polygon { fill: var(--os-moss); stroke: var(--os-moss); }
.company-os__workspace-label { display: block; }
.company-os__workspace strong { font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: -.015em; }
.company-os__forward {
  position: absolute;
  left: calc(50% + 43px);
  top: 30px;
  width: calc(100% - 86px);
  height: 10px;
  fill: none;
  stroke: #a7b5b0;
  stroke-width: 1.25;
  overflow: visible;
}
.company-os__forward path { vector-effect: non-scaling-stroke; }
.company-os__forward-signal { stroke: var(--os-moss); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 118; stroke-dashoffset: 18; opacity: 0; }
.company-os__learning { position: relative; height: 60px; margin-top: 8px; }
.company-os__feedback { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; }
.company-os__feedback--compact { display: none; }
.company-os__wire { fill: none; stroke: var(--os-line); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.company-os__signal { fill: none; stroke: var(--os-moss); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 7 107; stroke-dashoffset: 7; opacity: 0; }
.company-os__learning p { position: relative; padding-top: 25px; color: var(--os-moss); font-size: 14px; font-weight: 500; line-height: 1.5; text-align: center; }
.company-os__learning p span { padding-inline: 16px; background: var(--os-surface); }
.company-os__connection { display: flex; justify-content: center; height: 32px; }
.company-os__connection svg { display: block; width: 40px; height: 32px; overflow: visible; }
.company-os__connection .company-os__wire { stroke: #9eafaa; }
.company-os__foundation { background: var(--os-platinum); border: 1px solid var(--os-border); }
.company-os__foundation-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 13px 24px; border-bottom: 1px solid var(--os-border); }
.company-os__foundation h4 { color: var(--ink); font-size: 13px; font-weight: 550; }
.company-os__foundation-heading p { color: var(--os-text); font-size: 12px; line-height: 1.5; }
.company-os__systems { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 20px 12px; row-gap: 16px; }
.company-os__systems li { padding: 0 12px; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.5; text-align: center; }
.company-os__systems li + li { border-left: 1px solid #c6d0cd; }
.company-os__caption { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 12px; }
.company-os__caption p { color: var(--os-text); font-size: 13px; line-height: 1.6; text-wrap: pretty; }
.company-os__caption strong { color: var(--ink); font-weight: 550; }
/* The same order advances through seven workspaces; feedback follows Service.
   One 4.85s sequence. Department names and arrows also read without motion. */
.company-os.is-flowing .company-os__hex { animation: os-order-received .55s ease-out calc(var(--step) * .55s) 1; }
.company-os.is-flowing .company-os__forward-signal { animation: os-order-handoff .2s linear calc(var(--step) * .55s + .35s) 1; }
.company-os.is-flowing .company-os__signal { animation: os-data-flow 1s ease-in-out 3.85s 1; }
@keyframes os-order-received { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.06); } }
@keyframes os-order-handoff { 0% { opacity: 0; stroke-dashoffset: 18; } 15%, 85% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -100; } }
@keyframes os-data-flow { 0% { opacity: 0; stroke-dashoffset: 7; } 15%, 85% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -100; } }
.os-section__outcomes { display: flex; justify-content: space-between; gap: 24px; padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--line); }
.os-section__outcomes h3 { color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.os-section__product { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; min-height: 44px; font-size: 13px; font-weight: 550; color: var(--moss); text-decoration: underline; text-decoration-color: #a3aea8; text-underline-offset: 5px; }
.os-section__product:hover { text-decoration-color: var(--moss); }
.os-section__product:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; }

@media (max-width: 1100px) {
  .company-os__cycle { margin-inline: 16px; }
  .company-os__workspace strong { font-size: 13px; }
}
@media (max-width: 899px) {
  .os-section { padding-top: 8px; padding-bottom: 60px; }
  .os-section__intro { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
  .os-section__intro > p { max-width: 52ch; font-size: 16px; }
  .os-section__outcomes { gap: 20px; }
  .os-section__outcomes h3 { font-size: 14px; }
}
@media (max-width: 859px) {
  /* Seven 64px rows, six 16px gaps. The 512px return joins the hexagon centers.
     Fixed rail coordinates (16/48px) keep the return separate from the labels. */
  .company-os__cycle { width: calc(100% - 24px); max-width: 360px; margin: 24px auto 0; padding: 0 0 16px; }
  .company-os__workspaces { flex-direction: column; gap: 16px; margin-left: 48px; }
  .company-os__workspace { flex-direction: row; align-items: center; gap: 12px; width: 100%; height: 64px; padding: 0; }
  .company-os__workspace-icon { width: 64px; margin: 0; }
  .company-os__workspace-icon .company-os__department-symbol { width: 28px; height: 28px; }
  .company-os__workspace-label { flex: 1; text-align: center; }
  .company-os__workspace strong { font-size: 14px; }
  .company-os__forward { top: 65px; left: 25px; width: 14px; height: 10px; transform: rotate(90deg); }
  .company-os__learning { position: static; height: 52px; margin-top: 0; }
  .company-os__feedback--wide { display: none; }
  .company-os__feedback--compact { display: block; height: 512px; }
  .company-os__learning p { padding-top: 22px; font-size: 13px; }
  .company-os__learning p span { padding-inline: 8px; }
  .company-os__systems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .company-os__systems li { padding-inline: 4px; }
  .company-os__systems li:nth-child(4) { border-left: 0; }
}
@media (max-width: 599px) {
  .company-os__heading { padding: 24px 16px 21px; }
  .company-os__heading h3 { max-width: 16ch; margin-inline: auto; font-size: 25px; }
  .company-os__privacy { display: block; max-width: 28ch; margin-inline: auto; font-size: 12px; text-wrap: balance; }
  .company-os__privacy svg { display: inline-block; margin-right: 6px; vertical-align: -3px; }
  .company-os__foundation-heading { flex-direction: column; align-items: center; gap: 3px; padding: 12px; }
  .company-os__foundation-heading p { font-size: 11px; }
  .company-os__systems li { font-size: 12px; }
  .company-os__caption { flex-direction: column; text-align: center; padding-top: 16px; }
  .company-os__caption p { max-width: 46ch; }
  .os-section__outcomes { flex-direction: column; align-items: center; gap: 12px; margin-top: 25px; padding-top: 25px; text-align: center; }
  .os-section__outcomes h3 { font-size: 15px; }
}
@media (max-width: 359px) {
  .company-os__cycle { width: calc(100% - 16px); }
  .company-os__workspace strong { font-size: 13px; }
  .company-os__learning p { font-size: 12px; }
  .company-os__systems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-os__systems li:nth-child(4) { border-left: 1px solid #c6d0cd; }
  .company-os__systems li:nth-child(2n + 1) { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .company-os *, .company-os *::before, .company-os *::after { animation: none !important; transition: none !important; }
}