/* B "Celá budova, 24 hodin": each floor of the building is a service, then a day in that building on a 24-hour dial */
body { background: #f4f6f9; color: var(--navy-2); }
:focus-visible { outline-color: var(--navy); }

.head { display: flex; align-items: center; gap: 28px; padding: 22px var(--pad); }
.logo { margin-right: auto; }
.logo img { height: 44px; width: auto; }
.nav { display: flex; gap: 28px; font: 650 16px/1 var(--disp); font-stretch: 88%; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.btn { display: inline-flex; align-items: center; padding: 17px 28px; background: var(--navy-2); color: #fff; text-decoration: none; font: 650 16px/1 var(--disp); font-stretch: 90%; letter-spacing: .03em; transition: translate .2s, box-shadow .2s; }
.btn:hover { translate: -3px -3px; box-shadow: 3px 3px 0 var(--navy-2); }
.btn.line { background: none; color: var(--navy-2); box-shadow: inset 0 0 0 2px var(--navy-2); }
.btn.line:hover { box-shadow: inset 0 0 0 2px var(--navy-2), 3px 3px 0 var(--navy-2); }

h1, h2, h3 { font-family: var(--disp); font-weight: 750; font-stretch: 76%; letter-spacing: -.015em; }
h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; text-wrap: balance; }

.hero { padding: clamp(40px, 7vw, 100px) var(--pad) clamp(64px, 8vw, 120px); }
.eyebrow { font-size: 15px; font-weight: 600; margin-bottom: 20px; }
h1 { font-size: clamp(52px, 9.4vw, 150px); line-height: .9; max-width: 15ch; }
.hero-row { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 56px); }
.lead { max-width: 46ch; font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.svc { display: grid; grid-template-columns: 1fr 1fr; background: var(--navy-2); color: #fff; }
.svc :focus-visible { outline-color: var(--yel); }
.stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding: 48px var(--pad); }
.bld { width: min(100%, 460px); height: auto; max-height: 82svh; overflow: visible; }
.bld .body, .bld .cap { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .42); stroke-width: 1.5; transition: fill .45s; }
.bld .det rect, .bld .det circle, .bld .det path { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 1.5; transition: stroke .45s; }
.bld .ant, .bld .ground { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 2; }
.bld .ant-dot { fill: var(--yel); animation: blink 1.6s steps(1) infinite; }
.bld text { font: 700 13px/1 var(--body); fill: rgba(255, 255, 255, .6); transition: fill .45s; }
.bld .base .body { fill: rgba(255, 255, 255, .02); stroke-dasharray: 5 4; }
.bld .floor.on .body, .bld .floor.on .cap { fill: var(--yel); stroke: var(--yel); }
.bld .floor.on .det rect, .bld .floor.on .det circle, .bld .floor.on .det path { stroke: var(--navy-2); }
.bld .floor.on text { fill: var(--navy-2); }
.bld .floor { cursor: pointer; }
@keyframes blink { 50% { opacity: .2; } }

.list { padding: clamp(72px, 9vw, 120px) var(--pad) 32vh 0; }
.list ol { margin-top: 24px; }
.list li { position: relative; min-height: 46svh; display: flex; flex-direction: column; justify-content: center; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .18); }
.list li h3 { color: rgba(255, 255, 255, .5); transition: color .45s; }
.list li.on h3 { color: #fff; }
.list li::before { content: ""; position: absolute; left: -24px; top: 50%; width: 4px; height: 0; background: var(--yel); translate: 0 -50%; transition: height .45s; }
.list li.on::before { height: 60%; }
.list .n { font-size: 14px; font-weight: 600; color: var(--yel); letter-spacing: .04em; }
.list h3 { font-size: clamp(40px, 4.6vw, 72px); line-height: 1; }
.list p { max-width: 42ch; color: rgba(255, 255, 255, .86); }
.list a { font-size: 14px; font-weight: 600; color: var(--yel); text-underline-offset: 4px; width: fit-content; }

.tag { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* family */
.about { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(80px, 10vw, 140px) var(--pad); background: #fff; }
.about figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.about figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.about-txt { display: flex; flex-direction: column; gap: 18px; }
.about-txt > p:not(.tag) { max-width: 48ch; color: var(--ink-2); }
.years { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: clamp(16px, 3vw, 40px); border-top: 3px solid var(--navy-2); }
.years li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 16px 0 0; font-size: 15px; color: var(--ink-2); }
.years li::before { content: ""; position: absolute; top: -9px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--yel); border: 3px solid var(--navy-2); }
.years b { font: 750 36px/1 var(--disp); font-stretch: 76%; color: var(--navy-2); }
.nums { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 0; }
.nums div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 24px; background: var(--yel); }
.nums dd { margin: 0; font: 750 clamp(36px, 4vw, 60px)/1 var(--disp); font-stretch: 76%; white-space: nowrap; }
.nums dt { font-size: 14px; font-weight: 600; }

/* references */
.refs { padding: clamp(80px, 10vw, 140px) var(--pad); background: var(--yel); }
.big { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px; margin-top: 48px; }
.big li { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 3px solid var(--navy-2); }
.big b { font: 750 clamp(34px, 3.8vw, 58px)/1 var(--disp); font-stretch: 76%; }
.big span { font-weight: 700; font-size: 17px; margin-top: 4px; }
.big p { font-size: 15px; }
.more { margin-top: 44px; max-width: 70ch; font-size: 17px; }
.more a { font-weight: 700; text-underline-offset: 4px; }

/* technology */
.tech { padding: clamp(80px, 10vw, 140px) var(--pad); background: var(--navy-2); color: #fff; }
.tech :focus-visible { outline-color: var(--yel); }
.tech .tag { color: var(--yel); margin-bottom: 14px; }
.tech-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.tech-list li { display: flex; flex-direction: column; gap: 12px; }
.tech-list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 8px; filter: saturate(.9); transition: filter .4s; }
.tech-list li:hover img { filter: saturate(1.1); }
.tech-list h3 { font-size: clamp(26px, 2.4vw, 36px); line-height: 1; }
.tech-list p { color: rgba(255, 255, 255, .84); max-width: 38ch; }

/* careers */
.job { display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.job-pics { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; min-height: 520px; }
.job-pics img { width: 100%; height: 100%; object-fit: cover; }
.job-txt { padding: clamp(56px, 7vw, 110px) var(--pad); display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.job-txt > p:not(.tag):not(.hit) { max-width: 46ch; color: var(--ink-2); }
.hit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.hit a { font: 750 clamp(48px, 5.6vw, 88px)/1 var(--disp); font-stretch: 76%; text-decoration-color: var(--yel); text-decoration-thickness: 5px; text-underline-offset: 8px; }
.hit span { font-weight: 700; }
.centres { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.centres li { display: flex; flex-direction: column; }

/* contact */
.contact { padding: clamp(80px, 10vw, 140px) var(--pad); background: var(--yel); }
.contact .lead { margin-top: 20px; }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.ways p { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 3px solid var(--navy-2); font-size: 17px; }
.ways span { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.ways a { font: 750 clamp(24px, 2.4vw, 34px)/1.15 var(--disp); font-stretch: 82%; text-underline-offset: 6px; }

.foot { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 32px var(--pad) 44px; font-size: 15px; background: var(--navy-2); color: rgba(255, 255, 255, .8); }
.foot :focus-visible { outline-color: var(--yel); }
.foot b { color: #fff; }
.foot .note { flex-basis: 100%; }

@media (max-width: 1000px) {
  .big, .nums { grid-template-columns: repeat(2, 1fr); }
  .years { grid-template-columns: repeat(3, 1fr); row-gap: 32px; border-top: 0; }
  .years li { border-top: 3px solid var(--navy-2); }
  .tech-list, .ways { grid-template-columns: 1fr; }
  .tech-list li { display: grid; grid-template-columns: 200px 1fr; column-gap: 20px; align-items: start; }
  .tech-list img { grid-row: span 2; margin: 0; }
  .job { grid-template-columns: 1fr; }
  .job-pics { min-height: 340px; }
}
@media (max-width: 860px) {
  .head { flex-wrap: wrap; gap: 14px; }
  .head .langs { display: none; }
  .nav { order: 9; width: 100%; flex-direction: column; gap: 0; border-top: 2px solid var(--navy-2); }
  .nav a { padding: 15px 0; border-bottom: 1px solid rgba(0, 29, 59, .2); font-size: 19px; }
  .svc { grid-template-columns: 1fr; }
  .stage { top: 0; z-index: 2; height: auto; padding: 14px var(--pad); background: var(--navy-2); border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .bld { width: auto; height: 30svh; }
  .list { padding: 40px var(--pad) 12vh; }
  .list li { min-height: 52svh; }
  .about { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .years { grid-template-columns: 1fr 1fr; }
  .nums div { padding: 18px; }
  .big b { font-size: 32px; }
  .tech-list li { grid-template-columns: 1fr; }
  .tech-list img { grid-row: auto; }
  .job-pics { min-height: 260px; }
  .centres { grid-template-columns: 1fr; }
  .btn { padding: 15px 22px; }
}
@media (max-width: 860px) { .list li::before { left: -10px; } }

/* light hero with a live clock on the monitoring centre */
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-row { display: block; }
.hero .lead { margin-top: 26px; }
.hero .ctas { margin-top: 32px; }
.hero-pic { position: relative; }
.hero-pic img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; }
.hero-pic::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1; background: var(--yel); }
.live { position: absolute; left: 16px; bottom: 16px; right: 16px; width: fit-content; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--navy-2); color: #fff; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.live i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--yel); animation: blink 1.6s steps(1) infinite; }

/* 24 hours: the dial follows the step in the middle of the screen, the section takes the colour of the sky */
[data-sky] { --sky: #0d2142; --ink: #fff; --soft: rgba(255, 255, 255, .82); --acc: var(--yel); background-color: var(--sky); color: var(--ink); transition: background-color .9s ease, color .9s ease; }
[data-sky="dawn"] { --sky: #f4d6b6; --ink: var(--navy-2); --soft: #3a3226; --acc: var(--navy); }
[data-sky="morning"] { --sky: #dbe8f4; --ink: var(--navy-2); --soft: #2e425c; --acc: var(--navy); }
[data-sky="day"] { --sky: #f4f6f9; --ink: var(--navy-2); --soft: #44546a; --acc: var(--navy); }
[data-sky="noon"] { --sky: #f6e3ae; --ink: var(--navy-2); --soft: #3a3622; --acc: var(--navy); }
[data-sky="dusk"] { --sky: #3c3f75; --ink: #fff; --soft: rgba(255, 255, 255, .85); --acc: var(--yel); }
[data-sky="night"] { --sky: #0d2142; --ink: #fff; --soft: rgba(255, 255, 255, .82); --acc: var(--yel); }
[data-sky="deep"] { --sky: #000c19; --ink: #fff; --soft: rgba(255, 255, 255, .8); --acc: var(--yel); }
.day { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.day :focus-visible { outline-color: var(--acc); }
.dial-wrap { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px var(--pad); }
.day-title { font-size: clamp(30px, 3vw, 46px); line-height: 1; text-align: center; }
.dial { width: min(100%, 380px); height: auto; overflow: visible; }
.dial .ring { fill: none; stroke: currentColor; stroke-opacity: .3; stroke-width: 2; }
.dial .arc-day { fill: none; stroke: var(--yel); stroke-width: 6; stroke-opacity: .7; }
.dial .ticks line { stroke: currentColor; stroke-opacity: .45; stroke-width: 2; }
.dial .ticks line.major { stroke-opacity: .9; stroke-width: 3; }
.dial text { fill: currentColor; font: 700 16px/1 var(--disp); text-anchor: middle; opacity: .8; }
.hand { transition: rotate 1s cubic-bezier(.3, .7, .2, 1); }
.hand path { stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.hand .orb { fill: var(--yel); stroke: var(--navy-2); stroke-width: 2; }
.day:is([data-sky="night"], [data-sky="deep"], [data-sky="dusk"]) .orb { fill: #e9edf5; }
.hub { fill: currentColor; }
.clock { font: 750 clamp(64px, 7vw, 112px)/1 var(--disp); font-stretch: 76%; font-variant-numeric: tabular-nums; }
.steps { padding: 18vh var(--pad) 22vh 0; }
.steps li { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; gap: 22px; opacity: .3; transition: opacity .6s; }
.steps li.on { opacity: 1; }
.steps img { width: 100%; max-height: 52svh; aspect-ratio: 4 / 3; object-fit: cover; }
.steps div { display: flex; flex-direction: column; gap: 10px; }
.when { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.steps h3 { font-size: clamp(36px, 3.8vw, 60px); line-height: 1; }
.steps p { max-width: 46ch; color: var(--soft); }
.steps p a { color: inherit; font-weight: 700; text-underline-offset: 4px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-pic::before { inset: 12px -10px -12px 12px; }
  .hero-pic img { aspect-ratio: 4 / 3; }
  .live { font-size: 13px; padding: 10px 12px; }
  .day { grid-template-columns: 1fr; }
  .dial-wrap { top: 0; z-index: 2; height: auto; flex-direction: row; gap: 16px; padding: 10px var(--pad); background-color: var(--sky); transition: background-color .9s; border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
  .day-title { font-size: 20px; text-align: left; flex: 1; order: 3; }
  .dial { width: 64px; }
  .dial text { display: none; }
  .clock { font-size: 44px; }
  .steps { padding: 6vh var(--pad) 12vh; }
  .steps li { min-height: 80svh; }
  .steps img { max-height: 40svh; }
}
@media (max-width: 480px) { .day-title { display: none; } }
.hero h1 { font-size: clamp(46px, 5.8vw, 100px); max-width: 14ch; }