/* technology.css: component-owned rules. Shared priority order is declared in tokens.css. */
@layer presentation {
/* technology */
#technology {
  padding: var(--space-58) var(--gutter);
  grid-template-columns: 90px minmax(260px,.7fr) minmax(0,1.55fr);
  gap: var(--space-32);
  background: linear-gradient(125deg,var(--color-e9eef0),var(--color-f6f7f4));
}

#technology>.section-mark {
  padding: var(--space-9) 0 0;
}

#technology>.section-intro {
  grid-column: 2/4;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--space-45);
  align-items: flex-start;
  margin-bottom: var(--space-6);
}

#technology .tech-introduction {
  max-width: 355px;
  padding-top: var(--space-8);
}

#technology .tech-introduction p {
  margin: 0;
  font-size: var(--font-13);
}

#technology .tech-introduction a {
  margin-top: var(--space-14);
}

#technology .machine {
  grid-column: 2;
  grid-row: 2;
  min-height: 530px;
  height: 100%;
  overflow: hidden;
}

#technology .machine img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#technology .machine figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-70) var(--space-26) var(--space-27);
  background: linear-gradient(transparent,var(--color-213b49d9));
  font-size: var(--font-27);
  line-height: 1.7;
}

#technology .machine small {
  font-size: var(--font-9);
}

#technology .machine .tech-photo-note {
  font: var(--font-11)/1.8 var(--sans);
  letter-spacing: .025em;
  margin-top: var(--space-17);
  display: block;
  color: var(--color-fff);
}

#technology .technology-study {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
}

#technology .technology-tabs {
  display: none;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: var(--space-12);
  border-bottom: 1px solid var(--color-a5b7c466);
  padding-bottom: var(--space-15);
}

#technology.tech-enabled .technology-tabs {
  display: grid;
}

#technology .technology-tabs button {
  min-height: 55px;
  text-align: left;
  padding: var(--space-7) var(--space-8);
  position: relative;
  color: var(--color-526974);
  font: var(--font-14)/1.7 var(--serif);
  border-bottom: 1px solid transparent;
}

#technology .technology-tabs button small {
  display: block;
  font: var(--font-10)/1.7 Georgia,serif;
  letter-spacing: .15em;
  margin-bottom: var(--space-3);
}

#technology .technology-tabs button[aria-selected=true] {
  color: var(--color-ink);
  border-bottom-color: var(--color-718b98);
}

#technology .technology-tabs button[aria-selected=true]:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  right: 8px;
  top: 13px;
  background: var(--color-718b98);
}

#technology .technology-tabs button:hover {
  background: var(--color-ffffff66);
}

#technology .technology-panel {
  padding-top: var(--space-18);
}

#technology.tech-enabled .technology-panel[hidden] {
  display: none;
}

#technology .technical-visual {
  height: 285px;
  position: relative;
  background: radial-gradient(ellipse at 50% 60%,var(--color-d7e7ed66),transparent 65%);
  overflow: hidden;
}

#technology .technical-visual svg {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--color-456373);
}

#technology .technical-visual svg text {
  font-family: var(--sans);
  font-size: var(--font-13);
  letter-spacing: .03em;
  fill: var(--color-ink);
}

#technology .technical-visual .svg-small {
  font-size: var(--font-10);
  letter-spacing: .14em;
}

#technology .technical-visual .diagram-stroke {
  stroke: var(--color-7c9aa9);
  stroke-width: 1;
  fill: none;
}

#technology .technical-visual .glass-plane {
  fill: url(#tech-glass);
  stroke: var(--color-7898a8);
  stroke-width: 1.1;
}

#technology .technical-visual .ghost-plane {
  fill: var(--color-faffff35);
  stroke: var(--color-8ea9b7);
  stroke-width: .8;
}

#technology .diagram-index {
  position: absolute;
  top: 0;
  left: 0;
  font: var(--font-10)/1.6 Georgia,serif;
  letter-spacing: .14em;
  color: var(--color-6e8794);
}

#technology .technical-copy {
  border-top: 1px solid var(--color-a5b7c466);
  padding: var(--space-22) 0 0;
  display: grid;
  grid-template-columns: 185px 1fr;
  gap: var(--space-22);
  min-height: 162px;
}

#technology .technical-copy h3 {
  font-size: var(--font-26);
  line-height: 1.6;
  letter-spacing: .08em;
}

#technology .technical-copy .tech-kicker {
  font: var(--font-9)/1.8 Georgia,serif;
  letter-spacing: .15em;
  display: block;
  margin-top: var(--space-8);
}

#technology .technical-copy p {
  font-size: var(--font-13);
  line-height: 1.95;
  letter-spacing: .025em;
}

#technology .technical-copy ul {
  padding: 0;
  margin: var(--space-10) 0 0;
  list-style: none;
  font-size: var(--font-12);
  line-height: 1.95;
}

#technology .technical-copy li:before {
  content: "— ";
  color: var(--color-728d9b);
}

#technology .technology-disclaimer {
  font-size: var(--font-10);
  line-height: 1.8;
  margin-top: var(--space-17);
  color: var(--color-526873);
  letter-spacing: .02em;
}

#technology .research-layer {
  transition: transform 1.5s cubic-bezier(.2,.65,.3,1);
  transform: translateX(0);
}

#technology .is-separated .research-layer:nth-child(1) {
  transform: translateX(-34px);
}

#technology .is-separated .research-layer:nth-child(2) {
  transform: translateX(-12px);
}

#technology .is-separated .research-layer:nth-child(3) {
  transform: translateX(12px);
}

#technology .is-separated .research-layer:nth-child(4) {
  transform: translateX(34px);
}

#technology:not(.tech-enabled) .technology-panel {
  margin-top: var(--space-25);
}

#technology:not(.tech-enabled) .research-layer:nth-child(1) {
  transform: translateX(-34px);
}

#technology:not(.tech-enabled) .research-layer:nth-child(4) {
  transform: translateX(34px);
}

/* technology */
@media(max-width:1150px) {
#technology {
  grid-template-columns: 65px minmax(220px,.7fr) minmax(0,1.6fr);
  gap: var(--space-22);
}

#technology .technical-copy {
  grid-template-columns: 145px 1fr;
  gap: var(--space-15);
  min-height: 190px;
}

#technology .technical-copy h3 {
  font-size: var(--font-23);
}

#technology .technology-tabs button {
  font-size: var(--font-12);
}

#technology .machine {
  min-height: 560px;
}
}

/* technology */
@media(max-width:850px) {
#technology {
  grid-template-columns: 65px 1fr;
  padding: var(--space-45) 5%;
}

#technology>.section-intro {
  grid-column: 2;
  display: block;
}

#technology .tech-introduction {
  margin-top: var(--space-20);
  padding: 0;
  max-width: none;
}

#technology .machine {
  grid-column: 2;
  grid-row: 2;
  height: 290px;
  min-height: 0;
}

#technology .machine img {
  object-position: center 40%;
}

#technology .machine figcaption {
  font-size: var(--font-24);
  padding: var(--space-25);
  background: linear-gradient(transparent,var(--color-213b4999));
}

#technology .machine .tech-photo-note {
  display: none;
}

#technology .technology-study {
  grid-column: 2;
  grid-row: 3;
}

#technology .technical-copy {
  min-height: 175px;
}
}

/* technology */
@media(max-width:560px) {
#technology {
  display: block;
  padding: var(--space-45) 7%;
}

#technology>.section-intro {
  display: block;
  margin: 0;
}

#technology .tech-introduction {
  margin-top: var(--space-20);
}

#technology .machine {
  margin: var(--space-28) 0 var(--space-25);
  height: 265px;
  min-height: 0;
}

#technology .machine figcaption {
  font-size: var(--font-24);
  padding: var(--space-25) var(--space-20);
}

#technology .technology-tabs {
  gap: var(--space-6);
}

#technology .technology-tabs button {
  font-size: var(--font-12);
  padding: var(--space-8) var(--space-3);
  min-height: 60px;
  white-space: nowrap;
}

#technology .technology-tabs button[aria-selected=true]:after {
  right: 3px;
  top: 10px;
  width: 3px;
  height: 3px;
}

#technology .technical-visual {
  height: 255px;
}

#technology .technical-visual svg text {
  font-size: var(--font-22);
}

#technology .technical-visual .svg-small {
  font-size: var(--font-14);
}

#technology .technical-copy {
  display: block;
  min-height: 260px;
  padding-top: var(--space-20);
}

#technology .technical-copy h3 {
  font-size: var(--font-25);
}

#technology .technical-copy .tech-kicker {
  margin: var(--space-4) 0 var(--space-15);
}

#technology .technical-copy p {
  font-size: var(--font-13);
}

#technology .technical-copy ul {
  font-size: var(--font-12);
}

#technology .technology-disclaimer {
  font-size: var(--font-11);
  margin-top: var(--space-13);
}
}

/* technology */
@media(max-width:360px) {
#technology .technology-tabs button {
  font-size: var(--font-11);
}

#technology .technical-copy {
  min-height: 287px;
}
}

/* technology */
@media(prefers-reduced-motion:reduce) {
#technology .research-layer {
  transition: none;
}
}

/* typography */
#technology .tech-introduction p,
#technology .technical-copy p {
  font-size: var(--font-15);
  line-height: 1.95;
  letter-spacing: .02em;
}

#technology .technical-copy ul {
  font-size: var(--font-14);
  line-height: 1.9;
}

#technology .technology-tabs button {
  font-size: var(--font-15);
  letter-spacing: .015em;
}

#technology .technology-tabs button small,
#technology .diagram-index,
#technology .technical-copy .tech-kicker,
#technology .machine small {
  font-size: var(--font-11);
  letter-spacing: .1em;
}

#technology .machine .tech-photo-note,
#technology .technology-disclaimer {
  font-size: var(--font-13);
  line-height: 1.85;
  letter-spacing: .01em;
}

#technology .technical-copy {
  min-height: 210px;
}

/* typography */
@media(max-width:1150px) {
#technology .technology-tabs button {
  font-size: var(--font-14);
}

#technology .technical-copy {
  min-height: 245px;
}
}

/* typography */
@media(max-width:850px) {
#technology .technical-copy {
  min-height: 245px;
}
}

/* typography */
@media(max-width:560px) {
#technology .technology-tabs button {
  font-size: var(--font-13);
  letter-spacing: 0;
}

#technology .technical-copy {
  min-height: 315px;
}

#technology .technology-disclaimer {
  font-size: var(--font-13);
}
}

/* typography */
@media(max-width:360px) {
#technology .technology-tabs button {
  font-size: var(--font-12);
}

#technology .technical-copy {
  min-height: 345px;
}
}

/* final-polish */
#technology .tech-photo-note .note-phrase {
  display: inline-block;
}

/* final-polish */
@media(min-width:851px) and (max-width:1150px) {
#technology .machine figcaption {
  font-size: var(--font-20);
  padding: var(--space-50) var(--space-20) var(--space-24);
}
}

/* final-polish */
@media(max-width:560px) {
#technology .technical-visual svg text {
  font-size: var(--font-24);
}

#technology .technical-visual .svg-small {
  font-size: var(--font-14);
}
}

/* phase2 */
#technology {
  background: var(--color-technology);
  color: var(--color-f4f4ed);
  overflow: hidden;
  isolation: isolate;
  padding-top: var(--space-75);
  padding-bottom: var(--space-75);
}

#technology:before {
  content: "";
  position: absolute;
  width: 1px;
  left: 54%;
  top: -10%;
  bottom: -10%;
  background: var(--color-d5e9e680);
  transform: rotate(24deg);
  box-shadow: 0 0 24px 4px var(--color-c8e5e221);
  pointer-events: none;
  z-index: -1;
}

#technology .section-mark {
  color: var(--color-d2e0e3);
}


#technology h2,
#technology h3,
#technology h4,
#technology p,
#technology a,
#technology .technical-copy ul {
  color: var(--color-f4f4ed);
}

#technology .tech-introduction p {
  color: var(--color-d8e2e2);
}

#technology .technology-tabs {
  border-color: var(--color-9db6bf6b);
}

#technology .technology-tabs button {
  color: var(--color-dce8e9);
  background: transparent;
}

#technology .technology-tabs button small {
  color: var(--color-c1d3d8);
}

#technology .technology-tabs button[aria-selected=true] {
  color: var(--color-fff);
  border-color: var(--color-e1eded);
  background: var(--color-ffffff09);
}

#technology .technical-visual {
  background: var(--color-technology-panel);
  box-shadow: 0 0 38px var(--color-daeae40c);
}

#technology .technical-visual svg text {
  fill: var(--color-edf3ee);
}

#technology .technical-visual svg [stroke] {
  stroke: var(--color-99beca);
}

#technology .technical-visual .glass-plane {
  stroke: var(--color-e7ffff);
  filter: drop-shadow(0 0 4px var(--color-c7e8e56b));
}

#technology .technical-visual:after {
  content: "";
  position: absolute;
  left: 26%;
  right: 14%;
  top: 62%;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--color-e6ffef),transparent);
  box-shadow: 0 0 9px 2px var(--color-cee9e324);
  transform: rotate(-18deg);
  pointer-events: none;
}

#technology .technical-copy {
  background: transparent;
  color: var(--color-f4f4ed);
  padding-top: var(--space-25);
}

#technology .technical-copy .tech-kicker,
#technology .diagram-index {
  color: var(--color-c1d3d8);
}

#technology .machine figcaption {
  color: var(--color-fff);
}

#technology a:focus-visible,
#technology button:focus-visible {
  outline: 2px solid var(--color-f4f4ed);
  outline-offset: var(--space-5);
}


/* phase2 */
@media(max-width:700px) {
#technology {
  padding-top: var(--space-50);
  padding-bottom: var(--space-50);
}

#technology .section-mark {
  display: flex;
  align-items: center;
}


#technology .section-mark:after {
  background: var(--color-91aab4);
}

#technology .technical-visual {
  margin-top: var(--space-20);
}

#technology .machine {
  margin-top: var(--space-27);
}
}
}