/* Home: partner strip, approach, technology and migration impact sections, after Dilara's mockups (design/reference). */

/* shared by the four sections: the flat panel of the prototype and its hairline separators */

:root {
  --teo-website-home-story-panel: #071225;
  --teo-website-home-story-edge: rgba(143, 183, 235, 0.2);
  --teo-website-home-story-separator: rgba(184, 216, 255, 0.086);
  --teo-website-home-story-copy: #d8e2f3;
  --teo-website-home-story-margin: clamp(10px, 1.7vw, 24px);
  --teo-website-home-story-overlap: 64px;
}

/* the prototype sets these titles in a medium weight, as the product tour mockup does, lighter than the bold base title */
h2.teo-website-home-story-approach-title, h2.teo-website-home-story-impact-title, .teo-website-home-story-heading .teo-website-title {
  font-weight: 500;
}

.teo-website-home-story-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* landing card: the partner strip and the approach form one panel rising after the opening */

.teo-website-home-story-partner, .teo-website-home-story-approach {
  position: relative;
  margin: 0 var(--teo-website-home-story-margin);
  background: var(--teo-website-home-story-panel);
  border: 1px solid var(--teo-website-home-story-edge);
}

/* the card rises over the last of the opening: it starts a little before the journey section ends, so the city goes on
   behind its rounded corners instead of stopping on a straight line at its top edge */
.teo-website-home-story-partner {
  z-index: 1;
  margin-top: calc(-1 * var(--teo-website-home-story-overlap));
  border-bottom-color: var(--teo-website-home-story-separator);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -24px 100px rgba(0, 0, 0, 0.5);
}

/* in the margins beside the card the city fades into the page before the opening ends */
.teo-website-home-story-partner::before, .teo-website-home-story-partner::after {
  content: '';
  position: absolute;
  top: 0;
  width: var(--teo-website-home-story-margin);
  height: var(--teo-website-home-story-overlap);
  background: linear-gradient(180deg, rgba(3, 9, 28, 0), var(--teo-website-background));
  pointer-events: none;
}

/* outside the 1px border: the offsets count from the padding box */
.teo-website-home-story-partner::before {
  right: calc(100% + 1px);
}

.teo-website-home-story-partner::after {
  left: calc(100% + 1px);
}

.teo-website-home-story-partner-row {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.8vw, 40px);
  padding-top: 32px;
  padding-bottom: 32px;
}

.teo-website-home-story-partner-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--teo-website-text-faint);
}

.teo-website-home-story-partner-names {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teo-website-home-story-partner-names li {
  line-height: 1;
  color: var(--teo-website-home-story-copy);
}

.teo-website-home-story-partner-teosoft {
  padding-right: clamp(18px, 2.8vw, 40px);
  font-size: 31px;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.teo-website-home-story-partner-teosoft strong {
  font-weight: 800;
}

.teo-website-home-story-partner-company {
  padding: 4px 0 4px clamp(18px, 2.8vw, 40px);
  border-left: 1px solid rgba(184, 216, 255, 0.24);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* pushed to the right edge, its lines aligned on the left as in the prototype */
.teo-website-home-story-partner-text {
  margin: 0 0 0 auto;
  font-size: 14px;
  line-height: 1.65;
  color: var(--teo-website-text-muted);
}

.teo-website-home-story-approach {
  overflow: hidden;
  isolation: isolate;
  border-top: 0;
  border-radius: 0 0 32px 32px;
}

/* the prototype's panel is flat; only a faint depth stays low on the left */
.teo-website-home-story-approach::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 0% 100%, rgba(12, 50, 103, 0.32), rgba(12, 50, 103, 0) 70%);
}

/* a quiet statement right after the opening: two columns started on one line, centred in a tall panel */
.teo-website-home-story-approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 70px);
  align-items: start;
  align-content: center;
  min-height: 76vh;
  min-height: 76svh;
  padding-top: clamp(64px, 6.3vw, 90px);
  padding-bottom: clamp(64px, 7vw, 100px);
}

.teo-website-home-story-approach-title {
  font-size: clamp(34px, 4vw, 62px);
}

.teo-website-home-story-approach-copy .teo-website-lead {
  max-width: none;
  margin: 0;
  font-size: clamp(16px, 1.2vw, 17px);
  line-height: 1.85;
  color: var(--teo-website-home-story-copy);
}

.teo-website-home-story-approach-text {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--teo-website-text-muted);
}

/* a heading split in two: eyebrow and title on the left, the text on the right */

.teo-website-home-story-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.teo-website-home-story-heading > div {
  max-width: 780px;
}

/* a smaller title than the opening sections, on two lines as in the prototype */
.teo-website-home-story-heading .teo-website-title {
  max-width: 10.5em;
  font-size: clamp(34px, 3.5vw, 50px);
  line-height: 1.12;
}

.teo-website-home-story-heading .teo-website-lead {
  flex: 0 1 380px;
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.7;
}

/* technology: one large card with the recordings, two cards stacked beside it */

.teo-website-home-story-scene {
  isolation: isolate;
}

.teo-website-home-story-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 0% 80%, rgba(12, 50, 103, 0.7), rgba(12, 50, 103, 0) 70%),
    radial-gradient(ellipse 40% 40% at 90% 30%, rgba(42, 107, 255, 0.1), rgba(42, 107, 255, 0) 70%);
}

.teo-website-home-story-scene-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(18px, 2.1vw, 30px);
}

.teo-website-home-story-scene-side {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 20px;
}

.teo-website-home-story-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: 20px;
  background: rgba(7, 21, 42, 0.75);
  border: 1px solid rgba(117, 181, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(200, 225, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.teo-website-home-story-card h3 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: #fff;
}

.teo-website-home-story-card-label {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8fb4e8;
}

.teo-website-home-story-card-label span + span {
  margin-left: 8px;
}

.teo-website-home-story-card-text {
  max-width: 46ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--teo-website-text-muted);
}

/* a plain glyph in the top right corner of the card, as in the prototype */
.teo-website-home-story-card-icon {
  position: absolute;
  top: clamp(20px, 2vw, 26px);
  right: clamp(20px, 2.1vw, 30px);
  font-size: 30px;
  line-height: 1;
  color: #5397ff;
  filter: drop-shadow(0 0 10px rgba(83, 151, 255, 0.45));
}

/* the links close the card, however tall the row makes it */
.teo-website-home-story-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
}

.teo-website-home-story-card-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(140, 190, 255, 0.24);
  background: rgba(42, 107, 255, 0.08);
  font-size: 14px;
  font-weight: 600;
  color: var(--teo-website-text);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.teo-website-home-story-card-links a:hover {
  border-color: var(--teo-website-accent);
  background: rgba(42, 107, 255, 0.2);
}

.teo-website-home-story-card-links i {
  font-size: 11px;
  color: var(--teo-website-accent-light);
}

/* the large card: the recordings of the 3D scene and the street view fill its top edge to edge, where the prototype has
   its picture, the card text follows and the caption of the playing recording closes the card */
.teo-website-home-story-feature {
  align-items: stretch;
  padding: 0;
}

/* the player's wrappers step aside, so its screen, its list and its caption take their own places in the card */
.teo-website-home-story-feature .teo-website-scene-tour, .teo-website-home-story-feature .teo-website-tour,
.teo-website-home-story-feature .teo-website-tour .teo-website-tour-stage {
  display: contents;
}

/* the screen without the laptop around it */
.teo-website-home-story-feature .teo-website-tour .teo-website-laptop {
  order: -1;
}

.teo-website-home-story-feature .teo-website-tour .teo-website-laptop::before,
.teo-website-home-story-feature .teo-website-tour .teo-website-laptop-lid::before,
.teo-website-home-story-feature .teo-website-tour .teo-website-laptop-base {
  display: none;
}

.teo-website-home-story-feature .teo-website-tour .teo-website-laptop-lid {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.teo-website-home-story-feature .teo-website-tour .teo-website-laptop-screen {
  aspect-ratio: 16 / 9;
  border-radius: 0;
  border-bottom: 1px solid rgba(117, 181, 255, 0.14);
}

/* the two recordings: a small switch over the top right corner of the screen, where both recordings show the map and not
   a panel of the application */
.teo-website-home-story-feature .teo-website-tour-compact .teo-website-tour-side {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: auto;
  align-items: flex-start;
}

.teo-website-home-story-feature .teo-website-tour .teo-website-tour-pick {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.teo-website-home-story-feature .teo-website-tour-compact .teo-website-tour-list {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 6px;
}

.teo-website-home-story-feature .teo-website-tour-compact .teo-website-tour-step,
.teo-website-home-story-feature .teo-website-tour-compact .teo-website-tour-step.teo-website-active {
  min-width: 0;
  min-height: 40px;
  padding: 0 10px 0 14px;
  font-size: 15px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.teo-website-home-story-feature .teo-website-tour-compact .teo-website-tour-step:not(.teo-website-active) {
  background: rgba(3, 10, 28, 0.72);
}

.teo-website-home-story-feature .teo-website-tour .teo-website-tour-number {
  flex: 0 0 auto;
  margin-right: 10px;
}

.teo-website-home-story-feature .teo-website-tour .teo-website-tour-play {
  width: 22px;
  height: 22px;
  margin-left: 10px;
  font-size: 13px;
}

.teo-website-home-story-card-body {
  order: 1;
  padding: clamp(22px, 2vw, 28px) clamp(22px, 2.1vw, 30px) 0;
}

/* the caption of the playing recording, under a hairline at the foot of the card */
.teo-website-home-story-feature .teo-website-tour .teo-website-tour-caption {
  order: 2;
  max-width: none;
  margin: 20px clamp(22px, 2.1vw, 30px) 0;
  padding: 18px 0 clamp(22px, 2.1vw, 28px);
  border-top: 1px solid rgba(117, 181, 255, 0.12);
}

.teo-website-home-story-feature .teo-website-tour .teo-website-tour-caption-eyebrow {
  margin-bottom: 8px;
  font-size: 12px;
}

.teo-website-home-story-feature .teo-website-tour .teo-website-tour-caption-title {
  font-size: 18px;
  font-weight: 600;
}

.teo-website-home-story-feature .teo-website-tour .teo-website-tour-caption-text {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.6;
}

/* augmented reality: the text and the phone screen side by side */
.teo-website-home-story-reality {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.teo-website-home-story-reality-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.teo-website-home-story-reality-image {
  width: clamp(112px, 10vw, 148px);
  height: auto;
  aspect-ratio: 373 / 597;
  object-fit: cover;
  padding: 5px;
  border-radius: 22px;
  border: 1px solid rgba(190, 205, 230, 0.32);
  background: #05070b;
  box-shadow: 0 24px 60px -24px rgba(42, 107, 255, 0.7);
}

/* impact: the migration of a live cut-over in figures */

/* a band between two tall sections, so it keeps less air of its own */
.teo-website-section.teo-website-home-story-impact-section {
  padding: clamp(24px, 4vw, 56px) 0;
}

/* a panel as wide as the landing card, its content on the page grid: the title and the text on the left, the two
   figures beside them, as in the prototype */
.teo-website-home-story-impact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 clamp(10px, 1.7vw, 24px);
  border-radius: 32px;
  background: var(--teo-website-home-story-panel);
  border: 1px solid var(--teo-website-home-story-edge);
}

.teo-website-home-story-impact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 45% 90% at 100% 0%, rgba(42, 107, 255, 0.12), rgba(42, 107, 255, 0) 70%),
    radial-gradient(ellipse 50% 90% at 0% 100%, rgba(12, 50, 103, 0.4), rgba(12, 50, 103, 0) 70%);
}

.teo-website-home-story-impact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(24px, 2.2vw, 30px);
  align-items: center;
  padding-top: clamp(48px, 5.9vw, 85px);
  padding-bottom: clamp(48px, 5.9vw, 85px);
}

.teo-website-home-story-impact-head {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}

.teo-website-home-story-impact-copy {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

.teo-website-home-story-impact-head .teo-website-eyebrow {
  margin-bottom: 14px;
}

.teo-website-home-story-impact-title {
  font-size: clamp(28px, 2.4vw, 34px);
  line-height: 1.2;
}

.teo-website-home-story-impact-text {
  max-width: 46ch;
  margin: 18px 0 16px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--teo-website-text-muted);
}

.teo-website-home-story-metric {
  grid-row: 1 / span 2;
  padding-left: clamp(16px, 2.1vw, 30px);
  border-left: 1px solid rgba(89, 125, 171, 0.24);
}

.teo-website-home-story-metric-figure {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: #76a9ff;
}

.teo-website-home-story-metric-number {
  display: block;
  font-size: clamp(44px, 3.9vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.teo-website-home-story-metric-unit {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 500;
}

.teo-website-home-story-metric-label {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--teo-website-text-muted);
}

/* narrow screens */

@media (max-width: 1080px) {
  /* the title and the text take the whole width, the figures share a row under them */
  .teo-website-home-story-impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    row-gap: 28px;
    align-items: start;
  }

  .teo-website-home-story-impact-head, .teo-website-home-story-impact-copy {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .teo-website-home-story-impact-copy {
    margin-top: -28px;
  }

  .teo-website-home-story-metric {
    grid-row: auto;
  }
}

@media (max-width: 900px) {
  .teo-website-home-story-partner-row {
    flex-wrap: wrap;
    gap: 16px 24px;
  }

  .teo-website-home-story-partner-label, .teo-website-home-story-partner-text {
    flex-basis: 100%;
  }

  .teo-website-home-story-partner-text {
    margin: 0;
    text-align: left;
  }

  .teo-website-home-story-approach-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
  }

  .teo-website-home-story-heading {
    display: block;
  }

  .teo-website-home-story-heading .teo-website-lead {
    margin: 18px 0 0;
  }

  .teo-website-home-story-scene-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .teo-website-home-story-scene-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  /* the phone screen becomes a wide picture above the text */
  .teo-website-home-story-reality {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 22px;
  }

  .teo-website-home-story-reality-image {
    order: -1;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-position: 50% 54%;
    padding: 0;
    border-radius: 14px;
  }
}

@media (max-width: 600px) {
  .teo-website-home-story-partner {
    border-radius: 24px 24px 0 0;
  }

  .teo-website-home-story-approach {
    border-radius: 0 0 24px 24px;
  }

  .teo-website-home-story-partner-row {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .teo-website-home-story-partner-teosoft {
    font-size: 26px;
  }

  .teo-website-home-story-partner-company {
    font-size: 21px;
  }

  .teo-website-home-story-scene-side {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .teo-website-home-story-scene-grid {
    gap: 18px;
  }

  /* on a phone the switch would hide most of the small screen, so it sits under it */
  .teo-website-home-story-feature .teo-website-tour-compact .teo-website-tour-side {
    position: static;
    order: 0;
    align-items: stretch;
    padding: 14px 16px 0;
  }

  .teo-website-home-story-feature .teo-website-tour-compact .teo-website-tour-list {
    flex-wrap: wrap;
  }

  .teo-website-home-story-feature .teo-website-tour-compact .teo-website-tour-step,
  .teo-website-home-story-feature .teo-website-tour-compact .teo-website-tour-step.teo-website-active {
    white-space: normal;
  }

  .teo-website-home-story-impact {
    border-radius: 24px;
  }

  .teo-website-home-story-impact-grid {
    column-gap: 16px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .teo-website-home-story-metric {
    padding-left: 14px;
  }

  .teo-website-home-story-metric-number {
    font-size: clamp(36px, 11vw, 48px);
  }

  .teo-website-home-story-metric-unit {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .teo-website-home-story-card-links a {
    transition: none;
  }
}