/* Home part 2 pictures; their style and motion are pic.css.
   One clock for every picture: --ds-motion-loop-long. Loaded after art.css, which carries the carousel. */

/* ---- part 2 figures on the PAGE surface (day and night) ----
   Ink is the page's primary text colour, the accent is the logo bar (petrol by day, the lighter petrol at night). Petrol stays on the static
   key; every moving part is the neutral ink. Every picture always runs (no script pauses one that is out of view); the picture style and
   its motion are pic.css; under prefers-reduced-motion the global rule of components.css stills it. */
.fig{--el-ink:var(--ds-text-primary);--el-accent:var(--ds-logo-bar);color:var(--ds-text-primary);margin:0}
.fig svg.mt{display:block;inline-size:100%;block-size:auto;overflow:visible}
.hf{transform-box:fill-box;transform-origin:0 50%}
.fig svg.il-svg{display:block;inline-size:100%;block-size:auto}

/* the fine grid on a light section: ONE class, remove it from the section to take the background away. SOURCE: design-system/surfaces/
   (fine-grid: step 8.75 px, line 1 px, major every 5), drawn here in the page's ink, static, behind the section's content. */
.fine-grid{position:relative;isolation:isolate}

/* the overline of a block (brand v5, AGREED 5): one quiet caption line above the block, in the secondary ink; on the carousel's brand surface the on-brand ink,
   aligned with the slides' text by the .wrap it stands in */
.overline{margin:0 0 var(--ds-spacing-md);font-size:var(--ds-type-caption-size);line-height:1.5;font-weight:var(--ds-type-ui-weight);color:var(--ds-text-secondary)}
.carousel .wrap{padding-top:var(--ds-spacing-lg)}
.carousel .overline{margin:0;color:var(--ds-text-on-brand)}
.sec-values .wrap > .overline{margin-bottom:var(--ds-spacing-sm)}

/* who it is for: the heading, then four audiences 2 by 2, each a calm pictogram, a title, its lines; a before and after pair stands apart under a rule */
.aud{display:grid;gap:var(--ds-spacing-xl);margin-top:var(--ds-spacing-xl);align-items:stretch}
@media (min-width:900px){.aud{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-spacing-2xl) var(--ds-spacing-2xl)}}
.au{border-top:var(--ds-border-width-decision) solid var(--ds-border-strong);padding-top:var(--ds-spacing-lg)}
.au h3{margin:0 0 var(--ds-spacing-md);max-width:var(--ds-size-measure-text)}
.au p{max-width:var(--ds-size-measure-text)}
.au p + p{margin-top:var(--ds-spacing-md)}
.au .au-lead{font-size:var(--ds-type-subtitle-size);line-height:var(--ds-font-leading-heading)}
.au .ba{padding-inline-start:var(--ds-spacing-md);border-inline-start:var(--ds-border-width-decision) solid var(--ds-border-strong);color:var(--ds-text-primary)}

/* how it is built: the thesis is the block heading; five cards, 2 by 2 and the fifth across, each an animated isometric picture in one 3:2 window */
.sec-values .vgrid{margin-top:var(--ds-spacing-xl)}
.vt .fig-tile{padding:var(--ds-spacing-md) var(--ds-spacing-md) 0}
.vt .fig-tile svg{max-inline-size:none;margin-inline:0}
@media (min-width:768px){.vt .fig-tile{padding:var(--ds-spacing-lg) var(--ds-spacing-lg) 0}}
@media (min-width:900px){.vt-wide .fig-tile{padding:var(--ds-spacing-lg)}}

/* how open, and with whom: a calm pictogram heads each of the two cells; the groups below lie in the same tiles */
.cell-ic{background:var(--ds-bg-surface);padding:var(--ds-spacing-lg) var(--ds-spacing-lg) 0}
.cell-ic .il-svg{display:block;inline-size:100%;max-inline-size:360px;block-size:auto;margin-inline:auto}
@media (min-width:768px){.cell-ic{padding:var(--ds-spacing-xl) var(--ds-spacing-xl) 0}}
.cells-2{grid-template-columns:1fr}
@media (min-width:768px){.cells-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sec-open h2 + .cells{margin-top:var(--ds-spacing-xl)}
.cell .tile{padding-top:var(--ds-spacing-md)}
.sec-open .own,.sec-open .tiles-models{margin-top:var(--ds-spacing-md)}
.sec-open .sub-head + .own{margin-top:0}

/* the pictures of the walls and of the partners: one animated isometric picture and its caption, beside the tiles */
.fig-own{padding:var(--ds-spacing-md);align-self:stretch;flex-direction:column;align-items:stretch;justify-content:center;gap:var(--ds-spacing-md)}
.own .tiles{grid-auto-rows:1fr}
.fig-own svg{inline-size:100%;block-size:auto}
.fig-own .caption{margin:0}
@media (min-width:900px){.own-walls .fig-own{order:-1}.own-partners{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

/* the state word of the roadmap beside a thing that is not built yet, and a statement inside the corner marks of a wall */
.state-label{display:inline-block;margin:0 0 var(--ds-spacing-sm);padding:var(--ds-spacing-3xs) var(--ds-spacing-sm);border:var(--ds-border-width-hairline) solid var(--ds-border-strong);
  font-family:var(--ds-font-family-mono);font-size:var(--ds-font-size-xs);line-height:1.5;white-space:nowrap;color:var(--ds-text-secondary)}
.sec-open .wall{position:relative;padding:var(--ds-spacing-lg) var(--ds-spacing-md);--c:color-mix(in srgb,var(--ds-text-primary) 70%,transparent);
  background:
    linear-gradient(var(--c),var(--c)) top left/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top left/1.5px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top right/1.5px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1.5px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1.5px 16px no-repeat}
.sec-open .tile-wall{display:flex;align-items:center}
.sec-open .tile-wall .wall{inline-size:100%}
.fine-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:var(--ds-text-primary);opacity:0.015;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='540' viewBox='0 0 960 540'%3E%3Cdefs%3E%3Cpattern id='p' patternUnits='userSpaceOnUse' x='458.125' y='248.125' width='43.75' height='43.75' fill='none' stroke='black'%3E%3Cpath stroke-width='1' d='M4.375 0V43.75M0 4.375H43.75M13.125 0V43.75M0 13.125H43.75M30.625 0V43.75M0 30.625H43.75M39.375 0V43.75M0 39.375H43.75'/%3E%3Cpath stroke-width='1.6' d='M21.875 0V43.75M0 21.875H43.75'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='960' height='540' fill='url(%23p)'/%3E%3C/svg%3E") center/cover no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='540' viewBox='0 0 960 540'%3E%3Cdefs%3E%3Cpattern id='p' patternUnits='userSpaceOnUse' x='458.125' y='248.125' width='43.75' height='43.75' fill='none' stroke='black'%3E%3Cpath stroke-width='1' d='M4.375 0V43.75M0 4.375H43.75M13.125 0V43.75M0 13.125H43.75M30.625 0V43.75M0 30.625H43.75M39.375 0V43.75M0 39.375H43.75'/%3E%3Cpath stroke-width='1.6' d='M21.875 0V43.75M0 21.875H43.75'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='960' height='540' fill='url(%23p)'/%3E%3C/svg%3E") center/cover no-repeat}
html[data-theme="dark"] .fine-grid::before{opacity:0.03}