/* ==========================================================================
   Polygram – components
   Reusable content blocks. Each block is independent, so new pages can be
   assembled from them (see README.md).
   ========================================================================== */

/* ---- Headings ---------------------------------------------------------- */
/* <div class="heading heading--center"><p class="eyebrow">…</p><h2 class="title-xl">…</h2></div> */
.heading--center { text-align: center; }
.title-xl { font-size: 58px; font-weight: 800; line-height: 1.15; }  /* section titles */
.title-lg { font-size: 48px; font-weight: 800; line-height: 1.2; }   /* home feature rows */
.title-md { font-size: 36px; font-weight: 600; line-height: 1.2; }   /* panels, cards */
.title-sm { font-size: 22px; font-weight: 600; line-height: 1; }     /* small sub titles */
.title-lg--tall { line-height: 96px; }                               /* "Elastic data import", "Explore" */

/* ---- Home feature rows (text + illustration) ---------------------------- */
.feature-row { padding-top: 34px; padding-bottom: 34px; }
.copy-lg--spaced { padding-top: 24px; padding-bottom: 24px; }
.feature-row--wider { column-gap: 60px; padding: 54px 30px 64px; }
.feature-row__img { width: 450px; }
.feature-row--gap { padding-top: 58px; padding-bottom: 58px; }

/* ---- Products / services band -------------------------------------------
   Light blue area with rounded ends, split into blocks by a hazy slanted
   divider (svg.shape); cards in a grid.                                   */
.products {
  position: relative;
  margin: 0 10px;
  padding: 24px 0;
}
.products__arrow {
  position: absolute;
  top: -6px;
  left: 50%;
  z-index: 1;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  padding: 6px;
  border-radius: 32px;
  background: #fff;
  color: var(--ink);
}
.products__arrow svg { display: block; width: 48px; height: 48px; }
.products__block { position: relative; padding: 85px 24px 85px; background: var(--tint-blue); }
.products__block--first { padding-top: 130px; border-radius: 40px 40px 0 0; }
.products__block--last { padding-bottom: 150px; border-radius: 0 0 40px 40px; }
.products__head { padding: 10px 15px 21px 25px; }
.products__head h2 { margin-left: 8px; font-size: 52px; line-height: 1; }
.products__head h3 { margin: 10px 10px 0; font-size: 36px; line-height: 1.2; }
.products__head p { margin: 30px 10px 30.6px; }
.products__head h3 + p { margin-top: 20px; }
.products__head strong { font-weight: 500; }

/* hazy slanted divider between product blocks */
.shape {
  position: absolute;
  left: 50%;
  z-index: 0;
  display: block;
  width: calc(100% + 1.3px);
  height: 72px;
  fill: var(--tint-haze);
  transform: translateX(-50%);
  pointer-events: none;
}
.shape--top { top: -1px; }
.shape--bottom { bottom: -1px; transform: translateX(-50%) rotate(180deg); }
.products__head, .card-grid { position: relative; z-index: 1; }

/* ---- Cards -------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 346px));
  gap: 30px;
  max-width: 1140px;
  margin: 0 auto 30px;
  padding: 0 15px;
}
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 540px)); }
.card {
  padding: 54px 35px 30px 40px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #fff;
  transition: border-color .3s;
}
.card:hover { border-color: var(--ink); }
.card h3 { margin: 38px 0 22px; font-size: 36px; line-height: 1; }
.card h3 a { color: inherit; }
.card p { margin-bottom: 30.6px; }

/* round pastel icon holder: add a .tint-* class for the colour */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--tint-grey);
  color: var(--ink);
}
.icon-circle svg { width: 22px; height: 22px; fill: currentColor; }
.icon-circle--flip svg { transform: rotate(180deg); }

.tint-grey { background-color: var(--tint-grey); }
.tint-blue { background-color: var(--tint-blue); }
.tint-sky { background-color: var(--tint-sky); }
.tint-cream { background-color: var(--tint-cream); }
.tint-peach { background-color: var(--tint-peach); }
.tint-orange { background-color: var(--tint-orange); }
.tint-mint { background-color: var(--tint-mint); }
.tint-rose { background-color: var(--tint-rose); }
.tint-lilac { background-color: var(--tint-lilac); }
.tint-pink { background-color: var(--tint-pink); }
.tint-lime { background-color: var(--tint-lime); }
.tint-ice { background-color: var(--tint-ice); }

/* ---- Icon lists ---------------------------------------------------------- */
/* default: vertical list, icon + text */
.icon-list { list-style: none; }
.icon-list li { display: flex; align-items: center; line-height: 36px; color: var(--ink); }
.icon-list svg { flex: none; width: 16px; height: 16px; margin-right: 5px; fill: var(--text); }

/* file formats on the home page (cream box, monospace) */
.format-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.7em;
  padding: 16px 0;
  border-radius: 10px;
  background: var(--tint-cream);
  list-style: none;
}
.format-list li {
  display: flex;
  align-items: center;
  margin: 0 16px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
  color: var(--grey);
}
.format-list svg { width: 25px; height: 20px; margin-right: 8px; fill: var(--grey); }

/* industries on the home page (big, centred) */
.industry-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 34px 0 24px;
  list-style: none;
}
.industry-list li {
  display: flex;
  align-items: center;
  margin: 0 20px;
  font-size: 32px;
  line-height: 64px;
  color: var(--ink);
}
.industry-list svg { width: 36px; height: 36px; margin: -4px 9.5px 0 4.5px; fill: var(--ink); }
.industries { padding-top: 58px; padding-bottom: 34px; }
.industries__img { display: block; width: 90%; margin: 0 auto; }

/* filter types on Explore: two lists side by side */
.icon-lists { display: flex; flex-wrap: wrap; }
.icon-lists .icon-list { padding: 24px; }
.icon-lists li + li { margin-top: 8px; }
.icon-lists svg { margin: 0 23px 0 2px; }

/* granularity levels on Explore: inline, grey box */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 12px 0 12px 12px;
  border-radius: 24px;
  background: var(--tint-grey);
  list-style: none;
}
.chip-list li { display: flex; align-items: center; margin-right: 32px; line-height: 36px; }
.chip-list svg { width: 24px; height: 24px; margin: 0 12px 0 3px; fill: var(--text); }

/* check marks (Insight case study) */
.check-list svg { width: 14px; height: 14px; margin: 0 9px 0 2px; }

/* ---- Panels (Explore chart rows) -----------------------------------------
   Rounded tinted box with two columns. Add .panel--flip to show the media
   on the left on desktop (text stays first in the markup = first on mobile). */
.panel {
  margin: 24px 0;
  padding: 39px 30px;
  border-radius: 24px;
  column-gap: 30px;
  align-items: start;
}
.panel h3 { margin-bottom: 24px; }
.panel .media img { width: 100%; border-radius: 24px; }
.panel--flip > .media { order: -1; }
.panel .media--narrow img { max-width: 400px; }

/* 1/3 + 2/3 variant (Explore "Fields") */
.panel--third { grid-template-columns: minmax(0, 350px) minmax(0, 730px); }
.panel--third .media img { max-width: 300px; border-radius: 0; }
.panel--third h3 { margin-top: 2px; }

/* panel variants: no outer margin / no background */
.panel--flush { margin: 0; }
.panel--plain { margin: 0; padding: 15px 30px; }
.panel .media--shadow { padding: 4px; }
.panel .media--shadow img { border-radius: 16px; box-shadow: 0 0 24px -12px rgba(0, 0, 0, .5); }

/* section heading block (eyebrow + title + optional lead) */
.section-head { padding-bottom: 10px; }
.section-head .heading { padding: 24px; }
.section-head--spaced { padding-bottom: 34px; }
.section-head--spaced .heading { margin: 24px 0; }
.section--video { padding-bottom: 45px; }

/* small sub titles with copy (Explore "Hide / Show particular series") */
.sub-copy { margin: 24px 0; }

/* Explore: format / currency block (text + small screenshot) */
.currency { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); margin-top: 24px; }
.currency__text { margin-right: 12px; }
.currency__img { justify-self: center; max-width: 160px; border-radius: 12px; }
.note { margin-top: 24px; font-size: 14px; color: var(--text); text-align: justify; }
.features { margin-bottom: 24px; padding: 15px 30px; }

/* ---- Rotating headline ("Charts in motion") ---------------------------- */
.motion { margin-top: 48px; padding-top: 34px; }
.motion > p.text-black { margin: 44px 0 0; }
.motion__toggles { padding-top: 20px; padding-bottom: 35px; }
.rotator { font-size: 43px; font-weight: 800; line-height: 1.2; text-align: center; overflow-x: clip; }
.rotator__words {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  text-align: left;
  perspective: 300px;
  transition: width .6s;
}
.rotator__word {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  white-space: nowrap;
  color: var(--coral);
  opacity: 0;
  transform: rotateX(180deg);
  transform-origin: 50% 100%;
}
.rotator__word.is-active {
  position: relative;
  opacity: 1;
  transform: rotateX(0deg);
  animation: flip-in 1.2s;
}
.rotator__word.is-leaving { animation: flip-out 1.2s; }
@keyframes flip-in {
  0% { opacity: 0; transform: rotateX(180deg); }
  35% { opacity: 0; transform: rotateX(120deg); }
  65% { opacity: 0; }
  100% { opacity: 1; transform: rotateX(360deg); }
}
@keyframes flip-out {
  0% { opacity: 1; transform: rotateX(0deg); }
  35% { opacity: 1; transform: rotateX(-40deg); }
  65% { opacity: 0; }
  100% { opacity: 0; transform: rotateX(180deg); }
}

/* ---- Toggle (accordion; several items can be open) --------------------- */
.toggle__item { border-bottom: 1px solid #d5d8dc; }
.toggle__title {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 15px;
  border: 0;
  background: none;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  color: var(--text);
}
.toggle__title svg { width: 18px; height: 18px; flex: none; margin-right: 0; fill: currentColor; }
.toggle__title .icon-open { display: none; }
.toggle__title[aria-expanded="true"] .icon-open { display: block; }
.toggle__title[aria-expanded="true"] .icon-closed { display: none; }
.toggle__panel { overflow: hidden; transition: height .3s ease; }
.toggle__panel[hidden] { display: none; }
.toggle__body { padding: 15px; border-top: 1px solid #d5d8dc; }

/* ---- Videos ------------------------------------------------------------- */
.video { display: block; width: 100%; height: auto; }

/* ---- Export features (icon + title + text) ----------------------------- */
.feature { display: grid; grid-template-columns: 16% 1fr; }
.feature > div { padding: 10px; }
.feature__icon { text-align: left; }
.feature__icon svg { width: 50px; height: 50px; fill: var(--ink); }
.feature h3 { margin-bottom: 12px; font-size: 24px; font-weight: 700; line-height: 1; color: var(--ink); }
.feature p { color: var(--ink); text-align: justify; }

/* ---- Framed screenshots + decorative threads (Insight) ----------------- */
.frame { position: relative; z-index: 6; padding: 8px; border-radius: 12px; background: var(--tint-grey); }
.frame img { display: block; width: 100%; }
.frame--lg { padding: 12px; }
.frame--lg img, .rounded { border-radius: 12px; }
.thread { position: absolute; z-index: 1; pointer-events: none; }
.thread--1 { right: -100px; top: 236px; width: 369px; }
.thread--2 { left: -170px; bottom: -235px; width: 320px; }
.thread--3 { right: 140px; bottom: -245px; width: 384px; }

/* Insight rows: 55% / 45% columns */
.row-55 {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  margin-top: 96px;
  padding: 0 15px;
}
.row-55--rev { grid-template-columns: 45fr 55fr; }
.row-55--first { margin-top: 24px; }
.row-55__media { position: relative; }
.row-55__media--padded { padding: 30px; }
.row-55__media .rounded { position: relative; z-index: 5; display: block; width: 100%; }
.row-55__text { padding: 24px; }
.row-55__text--flush { padding: 0; }
.row-55 .eyebrow { margin-top: 5px; }
.row-55 h3 { margin-bottom: 30px; }

/* intro text (Insight) */
.intro { margin-top: 24px; padding-top: 10px; padding-bottom: 10px; line-height: 1.8; color: var(--ink); text-align: justify; }

/* centred block: heading, wide screenshot, text (Insight "Overview") */
.overview { margin-top: 96px; padding: 10px 25px; text-align: center; }
.overview .heading { margin: 5px 0; }
.overview__img { margin: 24px auto; }
.overview__text { width: 90%; margin: 0 auto 30.6px; color: var(--ink); }

/* zig-zag divider with "OR" */
.divider-or {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  padding: 16px 0;
  font-size: 15px;
  line-height: 1;
}
.divider-or::before, .divider-or::after {
  content: "";
  flex: 1;
  height: 20px;
  background: var(--grey);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' overflow='visible' height='100%25' viewBox='0 0 120 26' fill='black' stroke='none'%3E%3Cpolygon points='0,14.4 0,21 11.5,12.4 21.3,20 30.4,11.1 40.3,20 51,12.4 60.6,20 69.6,11.1 79.3,20 90.1,12.4 99.6,20 109.7,11.1 120,21 120,14.4 109.7,5 99.6,13 90.1,5 79.3,14.5 71,5.7 60.6,12.4 51,5 40.3,14.5 31.1,5 21.3,13 11.5,5'/%3E%3C/svg%3E") repeat-x left center / auto 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' overflow='visible' height='100%25' viewBox='0 0 120 26' fill='black' stroke='none'%3E%3Cpolygon points='0,14.4 0,21 11.5,12.4 21.3,20 30.4,11.1 40.3,20 51,12.4 60.6,20 69.6,11.1 79.3,20 90.1,12.4 99.6,20 109.7,11.1 120,21 120,14.4 109.7,5 99.6,13 90.1,5 79.3,14.5 71,5.7 60.6,12.4 51,5 40.3,14.5 31.1,5 21.3,13 11.5,5'/%3E%3C/svg%3E") repeat-x left center / auto 100%;
}
.divider-or span { margin: 0 10px; }

/* ---- Case studies (Insight) -------------------------------------------- */
.case { margin-top: 54px; }
.section-head + .case { margin-top: 6px; }
.case > h3 { padding: 15px 25px; text-align: center; }
.case__media { padding-top: 34px; padding-bottom: 34px; }
.case__media img { display: block; margin: 0 auto; }
.case__pie { padding: 24px; }
.case__body { padding: 10px 25px; color: var(--ink); }
.case__lead { margin: 0; }
.case__text { margin: 10px 25px; padding-bottom: 27px; text-align: center; color: var(--ink); }
.case__yoy { max-width: 70vw; }
.case ol { margin-bottom: 16px; padding-left: 0; line-height: 36px; }
.cta-band--spaced { margin-top: 79px; }

/* ---- Lightbox ------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: rgba(0, 0, 0, .87);
  opacity: 0;
  transition: opacity .3s;
}
.lightbox.is-open { opacity: 1; }
.lightbox img { max-width: 100%; max-height: 100%; box-shadow: 0 0 30px rgba(0, 0, 0, .3); }
.lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  padding: 13px;
  border: 0;
  background: none;
  color: rgba(238, 238, 238, .9);
}
.lightbox__close:hover { color: #fff; }
.lightbox__close svg { display: block; width: 24px; height: 24px; fill: currentColor; }
a[data-lightbox] { cursor: zoom-in; }

/* ---- Contact ------------------------------------------------------------- */
.contact { padding-top: 92px; padding-bottom: 120px; }
.contact__body { margin-top: 44px; }
.contact__details { align-self: center; }
.contact__details .copy-lg { margin-bottom: 45px; }
.contact__details .btn-outline { margin-top: 10px; }

/* label + value pairs styled like the old form fields */
.contact-list { margin: 0; }
.contact-list div { position: relative; margin-bottom: 35px; }
.contact-list dt { font-size: 14px; line-height: 1.7; color: #bfbfbf; }
.contact-list dd {
  margin: 0;
  padding: 4px 4px 6px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-alt);
  font-size: 23px;
  line-height: 1.4;
  color: var(--heading);
}
.contact-list dd a { color: inherit; }
.contact-list dd a:hover { color: var(--coral); }

/* uppercase outlined button (was the form's "SEND MESSAGE") */
.btn-outline {
  display: inline-block;
  padding: 0 50px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  line-height: 55px;
  letter-spacing: 1.14px;
  text-transform: uppercase;
  color: var(--ink);
  transition: all .3s var(--ease);
}
.btn-outline:hover, .btn-outline:focus-visible { color: #fff; background: var(--ink); }

/* ---- 404 ----------------------------------------------------------------- */
.error-page { display: flex; align-items: center; min-height: 100vh; padding: 0; }
.error-page__text { width: 50%; padding: 50px 20px 50px 5%; }
.error-page h1 { font-size: 65px; font-weight: 600; line-height: 1.21; }
.error-page p {
  margin: 0;
  padding: 55px 15% 60px 0;
  font-family: var(--font-alt);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.66;
  color: var(--ink);
}
.back-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  padding: 0 20px;
  font-family: var(--font-alt);
  font-size: 17px;
  line-height: 55px;
  color: #fff;
  background: var(--ink);
  transition: all .3s var(--ease);
}
.back-home:hover, .back-home:focus-visible { color: #fff; background: #655c97; }
.back-home svg { width: 21px; height: 10px; margin-right: 12px; transform: rotate(180deg); }
.error-page__art { position: relative; order: 2; width: 50%; height: 100vh; overflow: hidden; }
.error-page__art .illustration { width: 100%; min-height: 100vh; object-fit: cover; object-position: top center; }
.error-page__art .question { position: absolute; top: 34%; left: 15%; width: 13%; animation: fade-pulse 1s linear infinite; }
@keyframes fade-pulse { 0%, 100% { opacity: .7; } 40% { opacity: 1; } }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1199px) {
  .card-grid { max-width: 960px; }
}
@media (max-width: 1023px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
}
@media (max-width: 1024px) {
  .title-lg { font-size: 36px; }
  .title-lg--tall { line-height: 48px; }
  .industry-list li { font-size: 28px; }
  .industry-list svg { width: 28px; height: 28px; }
}
@media (max-width: 991px) {
  .error-page { display: block; }
  .error-page__art, .error-page__text { width: 100%; }
  .error-page__art { height: auto; }
  .error-page__art .illustration { min-height: 0; }
  .error-page__text { padding: 50px 15px; text-align: center; }
  .error-page h1 { font-size: 40px; }
  .error-page p { padding: 30px 0 40px; font-size: 20px; }
  .thread { display: none; }
}
@media (max-width: 767px) {
  .title-xl { font-size: 36px; }
  .products { margin: 0 10px; }
  .products__block { padding: 35px 4px 64px; }
  .products__block--first { padding-top: 48px; }
  .products__head h2 { text-align: center; }
  .products__head h2 { margin-left: 0; font-size: 36px; }
  .products__head h3 { text-align: left; }
  .card-grid, .card-grid--2 { grid-template-columns: minmax(0, 1fr); padding: 0 8px; }
  .feature-row--wider { column-gap: 20px; padding-left: 10px; padding-right: 10px; }
  .feature-row__media { order: -1; }
  .industry-list li { font-size: 24px; }
  .industry-list svg { width: 24px; height: 24px; }
  .panel { padding: 24px 15px; }
  .panel--flip > .media { order: 0; }
  .panel--third { grid-template-columns: minmax(0, 1fr); }
  .panel--third > .media { order: -1; }
  .rotator { font-size: 2em; white-space: nowrap; }
  .feature { grid-template-columns: minmax(0, 1fr); text-align: center; row-gap: 12px; }
  .feature p, .feature__icon { text-align: center; }
  .row-55, .row-55--rev { grid-template-columns: minmax(0, 1fr); margin-top: 24px; row-gap: 12px; }
  .row-55 { padding: 0; }
  .row-55__text, .row-55__text--flush { padding: 12px; }
  .row-55 .eyebrow, .row-55 h3 { text-align: center; }
  .row-55__media--padded { padding: 0; }
  .row-55--rev .row-55__media { order: 2; }
  .case ol { padding-left: 1.2em; }
  .case__body { padding: 12px 10px; }
}