/* Inteliace Research — design system
   Carries the existing identity forward: the navy and the two blues are taken
   from the logo and the legacy stylesheet. What changes is the space, the type
   scale and the structure. */

:root {
  /* Brand — inherited */
  --ink:        #14232b;   /* logo wordmark navy */
  --ink-2:      #33474f;
  --blue:       #0f6fb0;   /* legacy #1071b1, nudged for contrast on white */
  --blue-deep:  #0a5588;
  --sky:        #5eb0e5;   /* logo mark */
  --sky-wash:   #edf5fc;   /* legacy tint */
  --red:        #ac1a2f;   /* legacy accent — used sparingly, for emphasis only */

  /* Neutrals.
     The page is a pale blue tint rather than white, drawn from the same family as
     the logo. --card is what sits *above* it: cards, panels and inputs stay white
     so they read as raised, which is the whole point of tinting the page. Keep the
     three tones in this order — card lighter than paper, paper lighter than
     surface — or the depth inverts and panels look like holes. */
  --paper:      #e9f0f7;   /* the page */
  --card:       #ffffff;   /* raised above the page */
  --surface:    #dde8f2;   /* recessed below it — the alternating bands */
  --line:       #ccdae8;
  --line-strong:#adc1d4;
  --muted:      #56646e;   /* legacy grey, darkened to hold contrast on the tint */

  --radius:     10px;
  --radius-lg:  16px;
  --shadow:     0 1px 2px rgba(20,35,43,.06), 0 4px 16px rgba(20,35,43,.06);
  --shadow-lg:  0 2px 4px rgba(20,35,43,.06), 0 12px 40px rgba(20,35,43,.10);

  --wrap:       1180px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* A fluid type scale: readable on a phone, authoritative on a desktop. */
  --t-hero: clamp(2rem, 1.3rem + 2.9vw, 3.5rem);
  --t-h2:   clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --t-h3:   1.125rem;
  --t-body: 1.0625rem;
  --t-sm:   .875rem;
  --t-xs:   .78125rem;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: var(--t-hero); letter-spacing: -.03em; }
h2 { font-size: var(--t-h2); letter-spacing: -.02em; }
h3 { font-size: var(--t-h3); }

a { color: var(--blue); text-decoration-color: rgba(15,111,176,.3); text-underline-offset: 3px; }
a:hover { color: var(--blue-deep); text-decoration-color: currentColor; }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.muted { color: var(--muted); }

/* ---------- Header ---------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(233,240,247,.90);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 2rem; min-height: 76px; }
.logo { flex: none; display: block; }
.logo img { width: 190px; height: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nav > a {
  padding: .5rem .8rem; border-radius: 7px;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.nav > a:hover { background: var(--sky-wash); color: var(--blue-deep); }
.nav > a[aria-current="page"] { color: var(--blue); background: var(--sky-wash); }

.nav-toggle { display: none; }

/* Language switch: shows the flag of the language you would switch TO.
   It lives in the top bar rather than inside .nav, so it survives the mobile
   menu collapsing. */
.lang-switch {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  margin-left: .75rem; padding: .35rem .6rem .35rem .45rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.lang-switch:hover { background: var(--sky-wash); border-color: var(--sky); color: var(--blue-deep); }
.lang-switch svg { width: 22px; height: 14px; border-radius: 2px; display: block; flex: none; }

/* Says plainly that the reports are written in English. Shown on Polish pages only. */
.notice {
  display: flex; gap: .65rem;
  padding: .9rem 1.15rem; margin-bottom: 1.75rem;
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  font-size: var(--t-sm); color: var(--ink-2);
}
.notice::before { content: "i"; flex: none; font-weight: 700; color: var(--blue); }

/* Key/value panel reused on the homepage and in the asides. */
.panel {
  list-style: none; padding: 1.5rem; margin: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.panel li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.panel li:last-child { border-bottom: 0; }
.panel .k { color: var(--muted); }
.panel .v { color: var(--ink); font-weight: 600; text-align: right; }

/* ---------- Buttons --------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 8px; border: 1px solid transparent;
  background: var(--blue); color: #fff;
  font: inherit; font-weight: 600; font-size: var(--t-sm);
  text-decoration: none; cursor: pointer;
  transition: background .15s, transform .05s, box-shadow .15s;
}
.btn:hover { background: var(--blue-deep); color: #fff; box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .5rem 1rem; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-2); }
.btn-on-dark { background: #fff; color: var(--ink); }
.btn-on-dark:hover { background: var(--sky-wash); color: var(--ink); }

/* ---------- Hero ------------------------------------------------------ */

/* The photograph sits under a scrim in the page tint — not white — so the hero
   dissolves into the page above and below it instead of sitting on it as a panel.
   The scrim stays near-opaque across the left half, where the copy is, and thins
   out to the right so the city shows. .hero-copy is capped at 34rem so the text
   can never reach the thin part, whatever the viewport width — that cap is what
   keeps it legible, not luck. Earlier layers paint on top, so the gradients
   precede the image. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--paper);            /* holds the space while the image loads */
  border-bottom: 1px solid var(--line);
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 5vw, 4.5rem);
}

/* Photograph, then clouds, then scrim, then copy — in that order front to back.
   The clouds have to be above the photograph but below the scrim, which is why
   this is real elements rather than one background stack. */
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: hero-drift var(--hero-drift, 36s) ease-in-out infinite;
  will-change: transform;
}

/* The drift never returns to 1:1 — it stays zoomed and swings through the middle
   of the range. Holding the image above its natural size the whole way keeps the
   window grids from crossing the pixel grid, which is what made the earlier
   scale-from-1 version shimmer rather than move. */
@keyframes hero-drift {
  0%, 100% { transform: scale(1.08) translate(-1.2%, -0.6%) rotate(-0.35deg); }
  50%      { transform: scale(1.13) translate( 1.2%,  0.8%) rotate( 0.35deg); }
}

/* Drawn, not photographed: soft white blobs drifting across the sky. Placed to
   the right of centre because everything left of ~55% sits under the opaque part
   of the scrim, where they would be invisible. */
.cloud {
  position: absolute;
  background: #fff;
  pointer-events: none;
}
.cloud-1 {
  top: 4%; left: 62%; width: 52px; height: 13px;
  border-radius: 40% 60% 50% 50% / 60% 50% 50% 40%;
  box-shadow: 14px -8px 0 -1px #fff, 26px -3px 0 -3px #fff, 8px 2px 0 -2px #fff, -10px 1px 0 -3px #fff;
  opacity: .38; filter: blur(4px);
  animation: cloud-drift 45s ease-in-out infinite alternate;
}
.cloud-2 {
  top: 9%; left: 84%; width: 78px; height: 20px;
  border-radius: 50% 40% 60% 50% / 50% 60% 40% 50%;
  box-shadow: 18px -9px 0 -2px #fff, 34px -2px 0 -4px #fff, -14px 3px 0 -4px #fff, 6px 6px 0 -5px #fff;
  opacity: .32; filter: blur(6px);
  animation: cloud-drift-2 55s ease-in-out infinite alternate -20s;
}
.cloud-3 {
  top: 2%; left: 73%; width: 36px; height: 9px;
  border-radius: 50%;
  box-shadow: 8px -3px 0 -1px #fff, -7px 2px 0 -2px #fff;
  opacity: .26; filter: blur(3px);
  animation: cloud-drift 60s ease-in-out infinite alternate -35s;
}
@keyframes cloud-drift   { from { transform: translateX(0); } to { transform: translateX(8%);  } }
@keyframes cloud-drift-2 { from { transform: translateX(0); } to { transform: translateX(10%); } }

.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(93deg,
      rgba(233,240,247,.97) 0%,
      rgba(233,240,247,.95) 50%,
      rgba(233,240,247,.60) 68%,
      rgba(233,240,247,.16) 88%,
      rgba(233,240,247,.04) 100%),
    radial-gradient(900px 420px at 92% -15%, rgba(94,176,229,.20), transparent 62%);
}

.hero-copy { max-width: 34rem; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: center; }
.eyebrow {
  display: inline-block; margin-bottom: 1.1rem;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue);
}
.hero p.lead { font-size: 1.1875rem; color: var(--ink-2); margin-top: 1.25rem; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Proof strip */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
.stat { border-left: 3px solid var(--sky); padding-left: 1rem; }
.stat b { display: block; font-size: 1.75rem; color: var(--ink); line-height: 1.1; letter-spacing: -.02em; }
.stat span { font-size: var(--t-sm); color: var(--muted); }


/* ---------- Sections -------------------------------------------------- */

.section { padding: clamp(3.5rem, 6vw, 5.5rem) 0; }

/* About and Services open straight into prose, where the section's padding and
   the first heading's own 2.5rem margin stack — the margin cannot collapse out
   through the padding — leaving a gap under the banner half again as deep as it
   looks in the stylesheet. This halves the pair: the first child gives up its
   margin and the padding absorbs it, at half the combined height. */
.section-tight { padding-top: calc(clamp(3.5rem, 6vw, 5.5rem) / 2 + 1.25rem); }
.section-tight .prose > :first-child { margin-top: 0; }

/* The grey bands carry the logo tile as a faint texture. The flat --surface
   colour stays underneath, so the band still reads as a band if the SVG fails. */
.section-alt {
  background-color: var(--surface);
  background-image: url("../img/pattern-tiles.svg");
  border-block: 1px solid var(--line);
}
.section-head { max-width: 42em; margin-bottom: 2.5rem; }
.section-head p { margin-top: .75rem; color: var(--muted); }
.section-head.center { margin-inline: auto; text-align: center; }

.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }

/* ---------- Report cards ---------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }

.card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.card-cover { position: relative; aspect-ratio: 16 / 11; background: var(--sky-wash); overflow: hidden; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.card-body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: 1rem; line-height: 1.35; margin-bottom: .5rem; }
.card:hover h3 { color: var(--blue-deep); }
.card p { font-size: var(--t-sm); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: auto; padding-top: 1rem;
}
.card-price { font-weight: 700; color: var(--ink); font-size: var(--t-sm); }

/* Meta line: topic · year · pages */
.meta { display: flex; flex-wrap: wrap; gap: .4rem .6rem; font-size: var(--t-xs); color: var(--muted); margin-bottom: .6rem; }
.meta > * + *::before { content: "·"; margin-right: .6rem; color: var(--line-strong); }

.badge {
  display: inline-block; padding: .2rem .55rem; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em;
  background: var(--sky-wash); color: var(--blue-deep);
}
.badge-free { background: #e7f6ed; color: #146c3a; }
.badge-new  { background: #fdecef; color: var(--red); }
.badge-float { position: absolute; top: .75rem; left: .75rem; z-index: 2; box-shadow: var(--shadow); background: #fff; }

/* ---------- Filters (reports index) ----------------------------------- */

.filters {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: 1rem 1.15rem; margin-bottom: 2rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.filters select, .filters input[type=search] {
  font: inherit; font-size: var(--t-sm); color: var(--ink);
  padding: .55rem .75rem; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--card);
}
.filters input[type=search] { flex: 1; min-width: 200px; }
.filters .count { margin-left: auto; font-size: var(--t-sm); color: var(--muted); }

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 999px; font-size: var(--t-xs); font-weight: 600;
  background: var(--sky-wash); color: var(--blue-deep); text-decoration: none;
}
.chip:hover { background: #ddebf8; color: var(--blue-deep); }

/* ---------- Report detail --------------------------------------------- */

.report-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 2.5rem 0 3rem; }

/* The same treatment as the homepage hero, one step quieter: every section has its
   own cut of Warsaw behind its heading. The scrim is heavier than the hero's
   because these bands are shallow — the text occupies most of their height, so
   there is far less room for the photograph to breathe without getting under it.
   The image itself comes from --head-photo, set per page, so the scrim is written
   once here rather than repeated six times. */
.report-head.photo {
  background-color: var(--surface);
  background-image:
    linear-gradient(93deg,
      rgba(233,240,247,.97) 0%,
      rgba(233,240,247,.94) 48%,
      rgba(233,240,247,.70) 66%,
      rgba(233,240,247,.32) 86%,
      rgba(233,240,247,.18) 100%),
    var(--head-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Keeps the heading out of the thin part of the scrim, as .hero-copy does. */
.report-head.photo > .wrap > * { max-width: 36rem; }
.report-grid { display: grid; grid-template-columns: 1fr 340px; gap: 3.5rem; align-items: start; }

.crumbs { font-size: var(--t-sm); color: var(--muted); margin-bottom: 1.25rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.report-head h1 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem); }
.report-head .lead { margin-top: 1rem; font-size: 1.0625rem; color: var(--ink-2); max-width: 44em; }

/* Buy panel — the commercial anchor, sticky on desktop */
.buy {
  position: sticky; top: 100px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.buy-cover { border-bottom: 1px solid var(--line); background: var(--sky-wash); }
.buy-body { padding: 1.4rem; }
.buy .price { font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.buy .price-alt { font-size: var(--t-sm); color: var(--muted); margin-top: .35rem; }
.buy .btn { width: 100%; margin-top: 1.15rem; }
.buy .facts { list-style: none; padding: 0; margin: 1.25rem 0 0; border-top: 1px solid var(--line); }
.buy .facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; font-size: var(--t-sm); border-bottom: 1px solid var(--line); }
.buy .facts dt, .buy .facts .k { color: var(--muted); }
.buy .facts .v { color: var(--ink); font-weight: 600; text-align: right; }

/* Prose with no sidebar beside it to set the measure, so it sets its own —
   otherwise it runs the full 1180px of the wrap and becomes hard to read. */
.prose.measure { max-width: 46rem; }

.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.5rem; }

/* Table of contents */
.toc { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.toc-section {
  background: var(--sky-wash); color: var(--ink); font-weight: 700; font-size: var(--t-sm);
  padding: .7rem 1.1rem; border-top: 1px solid var(--line);
}
.toc-section:first-child { border-top: 0; }
.toc-line { padding: .5rem 1.1rem; font-size: var(--t-sm); color: var(--ink-2); border-top: 1px solid var(--line); }
.toc-line:nth-of-type(even) { background: #fbfcfd; }

.toc-more { display: block; width: 100%; padding: .85rem; border: 0; border-top: 1px solid var(--line);
  background: var(--surface); font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--blue); cursor: pointer; }
.toc-more:hover { background: var(--sky-wash); }
.toc[data-collapsed="true"] .toc-line:nth-of-type(n+13),
.toc[data-collapsed="true"] .toc-section:nth-of-type(n+13) { display: none; }

/* ---------- CTA band -------------------------------------------------- */

.cta {
  background-color: var(--ink);
  background-image:
    url("../img/pattern-tiles-light.svg"),
    linear-gradient(135deg, var(--ink), #1d3b48);
  color: #fff; border-radius: var(--radius-lg); padding: clamp(2.25rem, 4vw, 3.25rem);
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
.cta h2 { color: #fff; }
.cta p { color: #c7d5dc; margin-top: .6rem; max-width: 46em; }

/* ---------- Forms ----------------------------------------------------- */

.form { max-width: 40rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.field .req { color: var(--red); font-weight: 400; }

.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea {
  width: 100%; font: inherit; font-size: var(--t-body); color: var(--ink);
  padding: .7rem .85rem;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.form textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.form ::placeholder { color: #97a3ab; }
.form :is(input, textarea):focus-visible {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(15,111,176,.15);
}

.field.has-error :is(input, textarea) { border-color: var(--red); }
.field .err { display: block; font-size: var(--t-sm); color: var(--red); margin-top: .35rem; }

/* The consent tick: label wraps the box so the text is part of the hit area. */
.field.check label { display: flex; gap: .6rem; font-weight: 400; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.field.check input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .12rem; accent-color: var(--blue); }

/* Honeypot — off-screen rather than display:none, which bots know to skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice-ok  { background: #e9f7ef; border-color: #bfe4cd; border-left-color: #146c3a; color: #14532c; }
.notice-ok::before  { content: "\2713"; color: #146c3a; }
.notice-bad { background: #fdecef; border-color: #f3c9d1; border-left-color: var(--red); color: #7c1424; }
.notice-bad::before { content: "!"; color: var(--red); }

/* The report being ordered, restated above the form. */
.order-ref {
  display: flex; gap: 1.25rem; align-items: center;
  padding: 1.15rem; margin-bottom: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.order-ref img { width: 84px; flex: none; border: 1px solid var(--line); border-radius: 6px; }
.order-ref h2 { font-size: 1.0625rem; line-height: 1.35; margin: .25rem 0 .3rem; }
.order-ref h2 a { color: inherit; text-decoration: none; }
.order-ref h2 a:hover { color: var(--blue); }
.order-ref p { font-size: var(--t-sm); }

.contact-line { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); padding: .4rem 0; }
.contact-line .k { color: var(--muted); }

/* ---------- Legal pages ----------------------------------------------- */

/* Long prose read start to finish: a narrower measure and more air between
   sections than the report pages, which are skimmed rather than read. */
.legal { max-width: 40rem; }
.legal h2 { font-size: 1.25rem; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal ul { padding-left: 1.25rem; margin-top: 1rem; }
.legal li { margin-bottom: .5rem; color: var(--ink-2); }
.legal p { color: var(--ink-2); }
.legal .notice { margin-bottom: 2rem; }

.legal-nav { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .5rem; }
.legal-nav a {
  padding: .5rem .7rem; border-radius: 8px; font-size: var(--t-sm);
  color: var(--ink-2); text-decoration: none;
}
.legal-nav a:hover { background: var(--sky-wash); color: var(--blue-deep); }
.legal-nav a[aria-current="page"] { background: var(--sky-wash); color: var(--blue); font-weight: 600; }

/* ---------- Footer ---------------------------------------------------- */

.site-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 5rem; padding-top: 3.5rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.footer-grid h3 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin-bottom: .9rem; }
.footer-grid a { display: block; font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; padding: .28rem 0; }
.footer-grid a:hover { color: var(--blue); }
.footer-grid p { font-size: var(--t-sm); margin-top: 1rem; }
.footer-logo { opacity: .85; }
.footer-base { border-top: 1px solid var(--line); padding-block: 1.5rem; }
.footer-base p { font-size: var(--t-xs); }

/* ---------- Responsive ------------------------------------------------ */

@media (max-width: 960px) {
  .hero-grid, .report-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .buy { position: static; }

  /* One column: the copy now spans the full width, so a left-to-right scrim
     would no longer protect it. Turn the scrim vertical instead.

     It has to stay near-opaque for the whole height of the copy — the stats sit
     right at the bottom of it in --muted grey, which is the least contrasty text
     on the page and the first thing to become unreadable over glass. The extra
     bottom padding is what buys the photograph somewhere to be seen, below the
     text rather than behind it. */
  .hero { padding-bottom: 10rem; }
  .hero-media img { object-position: center bottom; }
  .hero::after {
    background-image:
      linear-gradient(180deg,
        rgba(233,240,247,.97) 0%,
        rgba(233,240,247,.96) 68%,
        rgba(233,240,247,.89) 80%,
        rgba(233,240,247,.28) 91%,
        rgba(233,240,247,.08) 100%);
  }
  /* The vertical scrim is near-opaque across the whole sky here, so the clouds
     would only ever be a faint smear. Not worth the paint. */
  .cloud { display: none; }
  .hero-copy { max-width: none; }

  /* Same reasoning for the section bands: one column means the heading spans the
     full width, so the scrim goes flat and the photograph becomes texture rather
     than a picture. There is no room here for a band below the text. */
  .report-head.photo {
    background-image:
      linear-gradient(180deg,
        rgba(233,240,247,.96) 0%,
        rgba(233,240,247,.93) 70%,
        rgba(233,240,247,.84) 100%),
      var(--head-photo);
  }
  .report-head.photo > .wrap > * { max-width: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .cta { grid-template-columns: 1fr; }

  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px;
    background: none; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

  /* The nav is taken out of flow on mobile, so the switch is what pushes the
     hamburger to the right edge. */
  .lang-switch { margin-left: auto; margin-right: .6rem; }

  .nav {
    display: none; position: absolute; inset: 76px 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--card); border-bottom: 1px solid var(--line); padding: .75rem 1.5rem 1.25rem;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav > a { padding: .8rem .5rem; font-size: 1rem; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; gap: .9rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .filters .count { margin-left: 0; width: 100%; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .order-ref img { display: none; }
}

/* The pseudo-element selectors matter: `*` matches elements only, so an animation
   living on a ::before or ::after would keep running for exactly the people who
   asked it not to. Nothing animates there today, but the next thing that does
   will be covered. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}