/* Inter (variable, 300-700), self-hosted: the latin + latin-ext subsets Google Fonts serves */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-var-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-var-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ==========================================================================
   dreambox.tech, Figma -> HTML
   One shared stylesheet for every page. All values are measured on the
   1440px Figma frames (FINAL_HOME etc.) and hit them exactly at 1440px;
   below that the clamp() values scale down. See tokens.md for the map
   between these classes and the Figma text styles.
   ========================================================================== */

@font-face { font-family: "Aeonik"; src: url("../fonts/Aeonik-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("../fonts/Aeonik-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("../fonts/Aeonik-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("../fonts/Aeonik-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("../fonts/Aeonik-900-normal.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* Figma colours */
  --orange: rgb(255, 67, 0);       /* #FF4300 */
  --ink: rgb(10, 10, 10);          /* #0A0A0A text + footer bg */
  --ink-soft: rgb(30, 30, 30);
  --grey: rgb(110, 110, 115);      /* #6E6E73 body copy, footer links */
  --grey-light: rgb(154, 154, 159);
  --line: rgb(236, 236, 236);
  --line-dark: rgb(107, 107, 107); /* footer rule */
  --stroke-dark: rgb(74, 74, 74);  /* footer pill stroke */
  --surface: rgb(245, 245, 245);
  --white: rgb(255, 255, 255);

  --font-display: "Aeonik", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;

  /* 1440 canvas: 78px side gutter -> 1284px content */
  --maxw: 1284px;
  --gutter: clamp(20px, 5.42vw, 78px);
  --side-base: max(var(--gutter), calc((100vw - var(--maxw)) / 4));
  --side: var(--side-base);

  /* vertical rhythm: every text section has 110px top + bottom padding */
  --section-y: clamp(56px, 7.64vw, 110px);

  /* Figma text styles (value at 1440px = the clamp maximum) */
  --fs-display: clamp(40px, 6.667vw, 96px);   /* Aeonik 700 96/100 -3%   */
  --fs-h2: clamp(30px, 3.889vw, 56px);        /* Aeonik 700 56/60 -2.5%  */
  --fs-h3: clamp(21px, 1.945vw, 28px);        /* Aeonik 700 28/34 -2%    */
  --fs-lead: clamp(18px, 1.667vw, 24px);      /* Inter 400 24/28 -1%     */
  --fs-body: clamp(16px, 1.459vw, 21px);      /* Inter 400 21/27 -0.5%   */
  --fs-small: 15px;                           /* Inter 400 15/24         */
  --fs-meta: 12px;                            /* Inter 400 12/18 +2%     */
}

/* --------------------------------------------------------------- reset --- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--orange); text-decoration: none; transition: color .18s ease, opacity .18s ease; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--ink); } }

h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }

::selection { background: var(--orange); color: var(--white); }

/* ------------------------------------------------------------- layout --- */
.wrap {
  width: 100%;
  margin-inline: auto;
  /* side space: the normal gutter, or on wide screens half of the old
     centring space (was (100% - 1284px) / 2), so the content column grows */
  padding-inline: var(--side);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(32px, 4vw, 56px); }

/* -------------------------------------------------------------- navbar --- */
/* Figma: pill 1188x72 centred (x 126), 16px from the top, radius 36 */
/* only the orange pill sticks: the strip around it is transparent and lets
   clicks through, so no white band follows the page */
.navbar-area {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 16px var(--gutter);
  background: transparent;
  pointer-events: none;
}
@media (min-width: 1025px) {
  /* desktop: page side space 25% wider (user); the navbar keeps its own inset */
  :root { --side: calc(var(--side-base) * 1.25); }
  .navbar-area { padding-inline: calc(var(--side-base) + 22px); }
}
/* scrolled: the pill turns into clear frosted glass (no orange tint) with dark text */
.navbar-area.is-stuck .navbar {
  background: rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
          backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 10px 30px rgba(10, 10, 10, .12), inset 0 0 0 1px rgba(255, 255, 255, .45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar-area.is-stuck .navbar { background: rgba(255, 255, 255, .92); }
}
.navbar__logo,
.navbar__links a,
.navbar__lang,
.navbar__toggle { transition: color .3s ease, background-color .3s ease, opacity .18s ease; }
.navbar-area.is-stuck .navbar__logo,
.navbar-area.is-stuck .navbar__links a,
.navbar-area.is-stuck .navbar__lang,
.navbar-area.is-stuck .navbar__toggle { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .navbar-area.is-stuck .navbar__logo:hover,
.navbar-area.is-stuck .navbar__links a:hover { color: var(--ink); } }
.navbar-area.is-stuck .navbar__toggle { background: rgba(10, 10, 10, .08); }

.navbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
  max-width: none;
  min-height: 72px;
  margin-inline: auto;
  padding: 0 19px 0 36px;
  border-radius: 36px;
  background: var(--orange);
  pointer-events: auto;
  transition: box-shadow .2s ease, background .3s ease;
}

/* logo: images/logo.svg drawn as a mask in the link's text colour (white on
   the orange pill, ink on the scrolled glass); the "dreambox.tech" text stays
   in the markup for screen readers and search, at size 0 */
.navbar__logo {
  justify-self: start;
  display: block;
  width: 152px;
  aspect-ratio: 216 / 22;
  font-size: 0;
  line-height: 0;
  color: var(--white);
  background-color: currentColor;
  -webkit-mask: url("../images/logo.svg") center / contain no-repeat;
          mask: url("../images/logo.svg") center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) { .navbar__logo:hover { color: var(--white); opacity: .8; } }

.navbar__links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.navbar__links a,
.navbar__lang {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .navbar__links a:hover { color: var(--white); opacity: .65; } }
.navbar__links a.is-active { text-decoration: underline; text-underline-offset: 5px; }

/* PRODUCTS / SOLUTIONS dropdowns: white panel under the pill, opens on
   hover or keyboard focus; a transparent bridge keeps it open while the
   pointer travels down to it */
.navbar__dd { position: relative; display: flex; align-items: center; }
.navbar__dd-toggle { display: inline-flex; align-items: center; gap: 7px; }
.navbar__dd-chev { width: 9px; height: 6px; flex: none; transition: transform .2s ease; }

.navbar__dd-panel {
  position: absolute;
  top: calc(100% + 30px);
  left: 50%;
  display: flex;
  flex-direction: column;
  min-width: 270px;
  padding: 10px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 18px 44px rgba(10, 10, 10, .16);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.navbar__dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -32px; height: 32px; }
/* open on hover/focus only on desktop; on tablet/mobile the items are a
   plain list inside the menu and must not react to hover */
@media (min-width: 1025px) {
  .navbar__dd:focus-within .navbar__dd-chev { transform: rotate(180deg); }
  @media (hover: hover) and (pointer: fine) { .navbar__dd:hover .navbar__dd-chev { transform: rotate(180deg); } }
  .navbar__dd:focus-within .navbar__dd-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }
  @media (hover: hover) and (pointer: fine) { .navbar__dd:hover .navbar__dd-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  } }
}
.navbar__links .navbar__dd-panel a {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) { .navbar__links .navbar__dd-panel a:hover { opacity: 1; color: var(--orange); background: var(--surface); } }
.navbar__links .navbar__dd-panel a.is-active { text-decoration: none; color: var(--orange); }

.navbar__right { justify-self: end; display: flex; align-items: center; gap: 18px; }

@media (min-width: 1025px) {
  /* desktop pill: inner spacing 15% tighter (user): height 72 -> 67, sides 36/19 -> 31/16, gaps 36/24/18 -> 31/20/15 */
  .navbar { min-height: 67px; padding: 0 16px 0 31px; column-gap: 20px; }
  .navbar__links { gap: 31px; }
  .navbar__right { gap: 15px; }
  .navbar__dd-panel { top: calc(100% + 28px); }   /* keeps the panel just under the shorter pill */
  .navbar__links > a, .navbar__links .navbar__dd-toggle { font-weight: 440; }   /* menu text 10% heavier (user); Inter is loaded as a variable font */
}

/* mobile menu */
.navbar__toggle {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .16);
  color: var(--white);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* -------------------------------------------------------------- button --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  font-family: "Inter", var(--font-text);
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn__dot {
  display: grid;
  place-items: center;
  border-radius: 50%;
  line-height: 1;
  flex: none;
  transition: background-color .25s ease;
}
/* arrow: Inter Medium U+2192 outline (Figma-exact); 1em = dot font-size */
.btn__dot svg { display: block; width: .9545em; height: 1.2102em; fill: currentColor; transition: transform .25s ease; }
/* hover: the arrow slides right, the button takes the colour of the circle
   behind the arrow (so the circle melts into it) and the label inverts; a
   hairline in the original colour keeps the pill's outline */
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__dot svg { transform: translateX(6px); } }

/* sm, navbar / footer (176x40) */
.btn--sm { height: 40px; padding: 0 19px 0 6px; font-size: 14px; }   /* right space as in the footer button (user) */
.btn--sm .btn__dot { width: 32px; height: 32px; font-size: 15px; }

/* lg, section CTAs (210x58) */
.btn--lg { height: 58px; padding: 0 19px 0 6px; font-size: 18px; }   /* right space as in the footer button (user) */
.btn--lg .btn__dot { width: 46px; height: 46px; font-size: 21px; }

/* colours */
.btn--white { background: var(--white); color: var(--orange); }
.btn--white .btn__dot { background: var(--orange); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn--white:hover { background: var(--orange); color: var(--white); box-shadow: inset 0 0 0 1.5px var(--white); } }

.btn--orange { background: var(--orange); color: var(--white); }
.btn--orange .btn__dot { background: var(--white); color: var(--orange); }
@media (hover: hover) and (pointer: fine) { .btn--orange:hover { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--orange); } }

.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink .btn__dot { background: var(--white); color: var(--orange); }
@media (hover: hover) and (pointer: fine) { .btn--ink:hover { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } }

/* centred button row. Figma: 117px below the last card copy of a section,
   39px below a centred lead (see .copy-center .cta-row) */
.cta-row { display: flex; justify-content: center; margin-top: clamp(56px, 8.125vw, 117px); }

/* ---------------------------------------------------------- typography --- */
/* Figma "display": hero / big statements. Aeonik Bold 96/100, -3% */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.0417;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}
.display--orange { color: var(--orange); }
/* legacy alias: product heroes are also 96px in Figma */
.display--md { font-size: var(--fs-display); }

/* Figma section title: Aeonik Bold 56/60, -2.5% */
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.0714;
  letter-spacing: -.025em;
  color: var(--ink);
}

/* Figma card / case title: Aeonik Bold 28/34, -2% */
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2143;
  letter-spacing: -.02em;
  color: var(--ink);
}
.h3 a, .h2 a { color: inherit; }

/* Figma large body: Inter 24/28, -1%, ink (grey variant for CTA copy) */
.lead {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.1667;
  letter-spacing: -.01em;
  color: var(--ink);
}
.lead--grey { color: var(--grey); }

/* Figma body: Inter 21/27, -0.5%, grey #6E6E73 */
.body {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.2857;
  letter-spacing: -.005em;
  color: var(--grey);
}
.body--ink { color: var(--ink); }

/* small orange caps label above a case hero title (Figma: Inter Medium 16, +3%) */
.eyebrow {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--orange);
}
/* big black caps line above a product hero title (Figma: Inter 48/56, 0) */
.eyebrow--lg {
  font-weight: 400;   /* Figma: Inter Regular (the small eyebrow is Medium) */
  font-size: clamp(14px, 1.334vw, 19.2px);   /* user: 60% smaller than Figma's 48px */
  line-height: 1.1667;
  letter-spacing: 0;
  color: var(--ink);
}

.meta {
  font-size: var(--fs-meta);
  line-height: 18px;
  letter-spacing: .02em;
  color: var(--grey-light);
}

/* ----------------------------------------------------------- hero/copy --- */
/* Home hero: title top 172px below the navbar area, lead 29px below the
   title, 63px to the full-bleed image */
.hero {
  padding-block: clamp(64px, 10.486vw, 151px) clamp(32px, 4.375vw, 63px);   /* 10% less gap under the navbar */
  text-align: center;
}
.hero .display { max-width: 1012px; margin-inline: auto; }
.hero .h1-label { margin-bottom: 2px; }   /* same small label as the product heroes */
.hero .lead { max-width: 820px; margin-inline: auto; margin-top: 29px; }

/* centred statement block (about / final CTA): display + lead 29px below */
.copy-center { text-align: center; }
.copy-center .display,
.copy-center .h2 { max-width: 1012px; margin-inline: auto; }
.copy-center .lead { max-width: 820px; margin-inline: auto; margin-top: 29px; }
.copy-center .lead--wide { max-width: 860px; }
.copy-center .cta-row { margin-top: 39px; }

/* left section intro: h2 + body 20px below, body box 900px (Figma) */
.copy-left { display: flex; flex-direction: column; gap: 20px; }
.copy-left .body { max-width: 900px; }
.copy-left .body--wide { max-width: 1023px; }

/* ------------------------------------------------------------- media --- */
/* full-bleed image, 1440x715 */
.media-bleed {
  width: 100%;
  aspect-ratio: 1440 / 715;
  overflow: hidden;
  background: var(--line);
}
.media-bleed img { width: 100%; height: 100%; object-fit: cover; }
/* homepage "Software and hardware" block: +25% space above and below (user) */
#about { padding-bottom: calc(var(--section-y) * 1.5); }
/* mobile: a taller hero photo (sides cropped) and a tighter gap below it */
@media (max-width: 520px) {
  .media-bleed { aspect-ratio: 3 / 2; }
  .media-bleed + #about { padding-top: 80px !important; }   /* overrides the inline 2.5x section gap */
}

.figure {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: var(--line);
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Figma crops an image beyond "cover": zoom + offset given per image as
   custom properties, all in % of the figure width */
.figure img.crop { width: var(--w, 100%); height: auto; max-width: none; margin-left: var(--x, 0); margin-top: var(--y, 0); object-fit: fill; }
.figure--16x9 { aspect-ratio: 1280 / 715; }
.figure--card { aspect-ratio: 628 / 353; }
.figure--wide { aspect-ratio: 852 / 479; }

/* zoom hover */
.figure--zoom img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
/* zoom only when the photo is an actual link */
@media (hover: hover) and (pointer: fine) { a[href].figure--zoom:hover img { transform: scale(1.03); } }

/* ---------------------------------------- products: centred 852 blocks --- */
/* Figma: stack starts 45px under the intro body; image 852x479 r4;
   title 36px under the image; body (690px box) 7px under the title;
   117px from a block's last line to the next image */
.product-stack { display: flex; flex-direction: column; gap: clamp(56px, 8.125vw, 117px); margin-top: 45px; }

.product-wide {
  width: 100%;
  max-width: 852px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}
.product-wide .h3 { margin-top: 36px; }
.product-wide .body { max-width: 690px; margin-top: 7px; }
.product-wide .body + .body { margin-top: 27px; }

/* ---------------------------------------- solutions: 2-col card grid --- */
/* Figma: 2 x 628 columns, 28px gutter, image 628x353 r4, title 32px under
   the image, 65px from title to the next row */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 65px 28px;
  margin-top: 45px;
}
.product-card { display: flex; flex-direction: column; }
.product-card .h3 { margin-top: 32px; transition: color .18s ease; }
.product-card .body { margin-top: 7px; }


/* -------------------------------------------------------------- cases --- */
/* Figma: list starts 60px under the intro body; photo 1280x715 r4; title
   box 18px under the photo (cap top 25px under it).
   USER DECISION: visible gap title baseline -> subtitle cap top = 50% of
   Figma (28 -> 14px), subtitle baseline -> next photo = 65% of Figma
   (65 -> 42px). Implemented with the 4px subtitle margin and the 37px
   list gap below; page CSS must not override them. */
.case-list { display: flex; flex-direction: column; gap: 37px; margin-top: 60px; }
.case { display: flex; flex-direction: column; width: 100%; max-width: 1280px; margin-inline: auto; }
/* cards stay centred in the column; section intros stay on the column edge */
/* homepage products intro ("Every touchpoint...") is centred above the centred cards */
#products > .copy-left { align-items: center; text-align: center; }
.case > .figure { width: 100%; max-width: 1280px; }
.case > .h3 { margin-top: 18px; }
.case > .h3 + .body { margin-top: 4px; }

/* -------------------------------------------------------------- logos --- */
/* Figma: 6 columns (199 wide, 18 gutter), rows 96 high with 20 between,
   logos centred at their Figma size (width/height attributes), no filter */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px 18px;
  margin-top: 68px;
}
.logo-grid__item {
  display: grid;
  place-items: center;
  height: 96px;
}
.logo-grid__item img { max-width: 100%; height: auto; }

/* scrolling logo rows (clients: 2 rows in opposite directions; partners: 1
   row, greyscale). Each track holds two identical sets and moves by -50%,
   so the loop is seamless. Items use padding (not gap) so both halves match. */
.logo-marquee {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 68px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-marquee__track {
  display: flex;
  width: max-content;
  animation: logo-marquee var(--marquee-dur, 45s) linear infinite;
}
.logo-marquee__row--rev .logo-marquee__track { animation-direction: reverse; }
.logo-marquee__set { display: flex; }
.logo-marquee__item {
  display: flex;
  align-items: center;
  flex: none;
  height: 96px;
  padding-right: 64px;
}
/* every logo trimmed to its ink and shown at the same height, one baseline */
.logo-marquee__item img { width: auto; max-width: none; height: 36px; }
.logo-marquee--partners .logo-marquee__item img {
  filter: grayscale(1);
  /* optical sizing: --h scales each partner logo by its aspect ratio so wide
     wordmarks (Samsung) and compact badges (Epic) carry the same visual weight;
     --y nudges logos whose ink sits high in their box (Amazon's smile) */
  height: calc(36px * var(--h, 1));
  transform: translateY(var(--y, 0));
}
@keyframes logo-marquee { to { transform: translateX(-50%); } }
@media (max-width: 520px) {
  /* phones: logos 20% smaller (28 -> 22.4px) and spacing 10% tighter (user) */
  .logo-marquee { margin-top: 40px; gap: 7px; }
  .logo-marquee__item { height: 52.5px; padding-right: 36px; }   /* 2-row rows 25% closer (50 -> 38px visible) */
  .logo-marquee__item img { height: 22.4px; }
  .logo-marquee--partners .logo-marquee__item img { height: calc(22.4px * var(--h, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
}

/* --------------------------------------------------------------- steps --- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(32px, 3.2vw, 46px);
}
.step { display: flex; flex-direction: column; gap: 12px; }
.step__no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--orange);
}
.step__title { font-weight: 500; font-size: 18px; line-height: 24px; color: var(--ink); }
.step__body { font-size: 15px; line-height: 24px; color: var(--grey); }

/* ------------------------------------------------------ features / lists --- */
.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(28px, 3vw, 44px);
}
.cols-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(28px, 3vw, 44px);
}

.spec-list { display: flex; flex-direction: column; }
.spec {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 24px;
}
.spec__k { color: var(--grey); }
.spec__v { color: var(--ink); font-weight: 500; text-align: right; }

/* pill (footer socials, case-page tags). Figma footer pill: 32 high,
   Inter 12 +1%, 21.5px side padding, 1px stroke */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 21.5px;
  border-radius: 40px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .01em;
  color: var(--grey);
  white-space: nowrap;
}

/* ------------------------------------------------------------- gallery --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 24px);
  margin-top: clamp(28px, 3vw, 44px);
}
.gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery__full { grid-column: 1 / -1; }

/* --------------------------------------------------------- product hero --- */
/* Figma product pages: big black caps line (.eyebrow--lg), orange 96px
   display, centred lead, orange lg button */
.hero--product { text-align: center; padding-block: clamp(64px, 10.486vw, 151px) clamp(32px, 4.4vw, 64px); }
.hero--product .eyebrow { margin-bottom: 2px; }
.hero--product .display { max-width: 1284px; margin-inline: auto; color: var(--orange); text-wrap: wrap; }
.hero--product .lead { max-width: 820px; margin-inline: auto; margin-top: 24px; }
.hero--product .cta-row { margin-top: 36px; }
/* hero photo -> first section: Figma gap ~122px (only the section's own
   top padding) */
.hero-media { padding-bottom: 0; }

/* ------------------------------------------------------ case-study hero --- */
/* Figma case pages: left aligned. Small orange caps eyebrow, orange 96px
   display, "Client · Location" line (Inter 24/28 ink), then a contained
   1284x715 cover with square corners */
.hero--case { text-align: left; padding-block: clamp(64px, 10.486vw, 151px) clamp(32px, 4.4vw, 64px); }   /* same navbar gap as the homepage */
.hero--case .display { max-width: 1284px; margin-top: 22px; color: var(--orange); text-wrap: wrap; }
.hero--case .lead { max-width: 1000px; margin-top: 24px; color: var(--ink); }
/* SEO: the small label above a hero title sits inside the <h1> (so the heading names the product
   or project); it keeps its own classes, colour and spacing */
h1 > .h1-label { display: block; }
.hero--case .display:has(> .h1-label) { margin-top: 0; }
.hero--case .h1-label { margin-bottom: 22px; }
.case-cover { aspect-ratio: 1284 / 715; overflow: hidden; background: var(--line); }
.case-cover img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------- feature row (850 column) --- */
.feature-rows { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 120px); }
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 358px) minmax(0, 1fr);
  gap: clamp(24px, 5.7vw, 82px);
  align-items: start;   /* the text starts level with the top of the photo (user) */
}
/* side by side: lift the title by its line leading so the cap tops line up with the photo's top edge */
@media (min-width: 861px) { .feature-row__title { margin-top: -.2em; } }
.feature-row__text { display: flex; flex-direction: column; gap: 28px; }
/* Figma alternates: every second row puts the photo on the left */
.feature-row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 358px); }
.feature-row--flip .feature-row__text { order: 2; }
/* Figma title boxes are 400px wide: in text-left rows the title may run into the gap */
.feature-row:not(.feature-row--flip) .feature-row__title { margin-right: -42px; }
.feature-row__title {
  text-wrap: wrap;   /* Figma breaks greedily ("From where / to what's / inside") */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.0714;
  letter-spacing: -.025em;
  color: var(--ink);
}
.feature-row__body { font-size: var(--fs-lead); line-height: 1.1667; letter-spacing: -.01em; color: var(--grey); }
.feature-row__media { overflow: hidden; border-radius: 15px; aspect-ratio: 842 / 465; background: var(--line); }
.feature-row__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------- tab blocks --- */
/* product/solution section label ("Explore", "Connect", "Decide"): orange
   Inter 600, sits directly on the centred .h2 below it - identical everywhere */
.kicker {
  display: block;
  font-family: var(--font-text);
  font-weight: 400;                           /* same type as the hero label (.eyebrow--lg) - */
  font-size: clamp(14px, 1.334vw, 19.2px);    /* only the colour differs (user) */
  line-height: 1.1667;
  color: var(--orange);
}
.tab-block > .kicker + .h2 { margin-top: -20px; }   /* cancels the block's 20px gap */
.tab-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 850px;
  margin-inline: auto;
}
.tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 77px;
  background: rgb(217, 217, 217);
  max-width: 100%;
  overflow-x: auto;
}
.tabs__item {
  padding: 6px 20px;
  border-radius: 77px;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
  white-space: nowrap;
  cursor: default;
}
.tabs__item.is-active { background: var(--orange); color: var(--white); }

.figure--850 { aspect-ratio: 842 / 465; border-radius: 15px; }

.dots { display: flex; gap: 6px; justify-content: center; }
.dots__item {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--line);
  font-size: 12px;
  color: var(--grey);
}
.dots__item.is-active { background: var(--orange); color: var(--white); }

/* ------------------------------------------------------------ timeline --- */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: clamp(32px, 3.2vw, 46px) 0 0;
  padding: 0;
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 4px;
  height: 2px;
  background: var(--ink);
}
.timeline__item { position: relative; display: flex; flex-direction: column; gap: 18px; }
.timeline__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.timeline__label { font-size: var(--fs-body); line-height: 1.2857; letter-spacing: -.005em; color: var(--ink); }

/* ----------------------------------------------------------- case page --- */
/* Figma: 3 equal columns (24px gap), 112px below the cover; orange caps label
   (same style as the case eyebrow), value Inter 21/27 ink */
.case-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: clamp(48px, 7.57vw, 109px);
}
.case-meta__k {
  margin-bottom: 8px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--orange);
}
.case-meta__v { font-size: var(--fs-body); line-height: 1.2857; letter-spacing: -.005em; color: var(--ink); }
@media (max-width: 860px) { .case-meta { grid-template-columns: 1fr; gap: 20px; } }

.work-list { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 110px); }
.work { display: flex; flex-direction: column; gap: 24px; }
.work__head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.work__no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--orange);
}
.work__body { max-width: 900px; white-space: pre-line; }

/* -------------------------------------------------------------- footer --- */
/* Figma: #0A0A0A, 110px top / 32px bottom padding. Columns at x 78 / 618 /
   805; headline Aeonik 48/56; links Inter 15/24 every 36px; socials 48px
   under the button row, rule 48px lower, legal 48px under the rule */
.footer {
  background: var(--ink);
  color: var(--white);
  padding: var(--section-y) var(--side) 22px;
}
.footer__inner { margin-inline: auto; display: flex; flex-direction: column; gap: 48px; }
.footer__top { display: grid; grid-template-columns: 540px 187px minmax(0, 1fr); align-items: start; }
.footer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.footer__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 3.334vw, 48px);
  line-height: 1.1667;
  letter-spacing: -.02em;
  color: var(--white);
}
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col a, .footer__col span {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: 24px;
  color: var(--grey);
  white-space: nowrap;
}
.footer__col span { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .footer__col a:hover { color: var(--white); } }

.footer__social { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.footer__social .pill { box-shadow: inset 0 0 0 1px var(--stroke-dark); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .footer__social .pill:hover { box-shadow: inset 0 0 0 1px var(--white); } }

.footer__rule { height: 1px; background: var(--line-dark); }
.footer__legal { font-size: var(--fs-meta); line-height: 18px; letter-spacing: .02em; color: var(--grey); }
/* copyright line: equal space above and below (~24px, 70% of the old 34px bottom) */
.footer__rule + .footer__legal { margin-top: -26px; }
.footer__legal a { color: var(--grey); }
@media (hover: hover) and (pointer: fine) { .footer__legal a:hover { color: var(--white); } }

/* ------------------------------------------------------ scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
/* first screen: the same fade-up, started by CSS on load instead of waiting for
   main.js, so the heading and hero image paint (LCP) straight away */
@keyframes reveal-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
:is(.hero, .hero--product, .hero--case, .ab-hero, .ct-hero, .hero-media) .reveal, .media-bleed.reveal, .case-cover.reveal, .ab-gallery.reveal { animation: reveal-in .7s cubic-bezier(.2, .7, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  :is(.hero, .hero--product, .hero--case, .ab-hero, .ct-hero, .hero-media) .reveal, .media-bleed.reveal, .case-cover.reveal, .ab-gallery.reveal { animation: none; }
  .figure--zoom img { transition: none; }
}

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 1024px) {
  .navbar { padding-left: 28px; }
  .navbar__links { gap: 22px; }
  .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 64px; }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .navbar__links { gap: 15px; }
  .navbar__lang { display: none; }   /* room for CONTACT on narrow desktops */
}

@media (max-width: 1024px) {
  /* mobile/tablet: top row 72px, open menu keeps a 16px bottom inset */
  .navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
    align-content: flex-start;
    padding: 0 10px 0 16px;   /* inner space 35% smaller on tablet/mobile (24/16 -> 16/10) */
    min-height: 61px;
  }
  .navbar__logo,
  .navbar__right {
    display: flex;
    align-items: center;
    min-height: 61px;         /* 16px -> 10px above/below the 40px menu button */
  }
  .navbar__toggle { display: block; }
  .navbar__lang { display: none; }
  .navbar__right { margin-left: auto; }
  .navbar__right .btn { display: none; }

  .navbar__links {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .navbar.is-open { padding-bottom: 10px; }
  .navbar.is-open .navbar__links { max-height: 900px; }
  .navbar__dd { display: block; }
  .navbar__dd-toggle { display: flex; }
  .navbar__dd-chev { display: none; }
  .navbar__dd-panel {
    position: static;
    min-width: 0;
    padding: 0 0 10px 16px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .navbar__dd-panel::before { display: none; }
  .navbar__links .navbar__dd-panel a {
    padding: 9px 0;
    border: 0;
    border-radius: 0;
    font-size: 14px;
    color: var(--white);
    opacity: .85;
  }
  /* no hover effects in the tablet/mobile menu */
  @media (hover: hover) and (pointer: fine) { .navbar__links a:hover { opacity: 1; } }
  @media (hover: hover) and (pointer: fine) { .navbar__links .navbar__dd-panel a:hover { background: none; color: var(--white); opacity: .85; } }
  .navbar__links .navbar__dd-panel a.is-active { color: var(--white); opacity: 1; text-decoration: underline; }
  .navbar-area.is-stuck .navbar__links a { border-top-color: rgba(10, 10, 10, .12); }
  .navbar-area.is-stuck .navbar__links .navbar__dd-panel a,
.navbar-area.is-stuck .navbar__links .navbar__dd-panel a.is-active { color: var(--ink); }
  @media (hover: hover) and (pointer: fine) { .navbar-area.is-stuck .navbar__links .navbar__dd-panel a:hover { color: var(--ink); } }
  .navbar-area.is-stuck .navbar.is-open { background: rgba(255, 255, 255, .9); }
  .navbar__links a {
    padding: 14px 0;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: .04em;
    border-top: 1px solid rgba(255, 255, 255, .22);
  }
  .navbar__links a.is-active { text-decoration: none; opacity: .65; }
}

@media (max-width: 860px) {

  .hero .lead,
  .copy-center .lead { margin-top: 20px; }
  .copy-center .cta-row { margin-top: 32px; }

  .product-stack { margin-top: 32px; }
  .product-wide .h3 { margin-top: 20px; }
  .product-wide .body { max-width: none; }
  .product-wide .body + .body { margin-top: 1.2857em; }

  .product-grid,
  .cols-2,
  .gallery,
  .gallery--3 { grid-template-columns: minmax(0, 1fr); }
  .product-grid { row-gap: 40px; margin-top: 32px; }
  .product-card .h3 { margin-top: 16px; }

  .case-list { margin-top: 36px; gap: 32px; }
  .case > .h3 { margin-top: 14px; }

  .feature-row { grid-template-columns: minmax(0, 1fr); }
  .feature-row--flip .feature-row__text { order: 0; }
  .feature-row:not(.feature-row--flip) .feature-row__title { margin-right: 0; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .timeline::before { display: none; }

  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; column-gap: 24px; }
  /* links column only as wide as its text; visible gap to Contact 40% smaller (112 -> 67px at 390) */
  .footer__top { grid-template-columns: auto minmax(0, 1fr); column-gap: 17.2vw; }
  .footer__cta { grid-column: 1 / -1; }
  .footer__social { justify-content: flex-start; }
  .spec { flex-direction: column; gap: 4px; }
  .spec__v { text-align: left; }
}

@media (max-width: 520px) {
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .logo-grid__item { height: 72px; }
  .btn--lg { height: 52px; font-size: 16px; }
  .btn--lg .btn__dot { width: 40px; height: 40px; font-size: 18px; }
  .footer__col a, .footer__col span { white-space: normal; overflow-wrap: anywhere; }
}

/* ------------------------------------------------ homepage mobile tweaks --- */
@media (max-width: 520px) {
  /* equal gaps between the three product cards (desktop keeps Figma's +12px) */
  #products .product-stack > .product-wide { margin-top: 0 !important; }
  /* Book a Demo: space below = space above (56px) */
  #products { padding-bottom: 0 !important; }
  /* photo -> title 20% closer */
  .product-wide .h3 { margin-top: 16px; }
  .product-card .h3 { margin-top: 13px; }
}

/* "Every touchpoint..." intro: centred on desktop, left-aligned on tablets and phones */
@media (max-width: 1024px) {
  #products > .copy-left { align-items: flex-start; text-align: left; }
}

@media (max-width: 1024px) {
  /* tablet + phone: centred vertical steps - dot on top, title under it (user ref) */
  .timeline { display: flex; flex-direction: column; align-items: center; gap: 24px; row-gap: 24px; width: auto; max-width: none; margin-inline: 0; }
  .timeline::before { display: none; }
  .timeline__item { position: static; display: flex; flex-direction: column; align-items: center; gap: 10px; width: auto; margin: 0; padding: 0; text-align: center; }
  .timeline__dot { position: static; flex: none; margin: 0; }
}


/* photo corners (user): one small radius for every photo on tablet/desktop,
   square on phones. Covers the photo and any box that directly holds it;
   logos and the full-bleed homepage hero are left alone */
main img:not(.logo-marquee img):not(.media-bleed img), main video,
main :has(> img):not(.logo-marquee__item):not(.media-bleed), main :has(> video) { border-radius: 6px !important; }
@media (max-width: 520px) {
  main img:not(.logo-marquee img):not(.media-bleed img), main video,
  main :has(> img):not(.logo-marquee__item):not(.media-bleed), main :has(> video) { border-radius: 0 !important; }   /* same selectors as above so this wins */
}

/* phones: feature rows (title / text / photo) - title closer to its text (-25%),
   more air between rows (+50%) (user) */
@media (max-width: 520px) {
  .feature-row__text { gap: 21px; }
  .feature-rows { gap: 84px; }
}

/* phones: centre the title of the "title / photo / centred text" segments on
   product and solution pages (e.g. "Let them lead the visit") - only these */
@media (max-width: 520px) {
  .section:has(> .h2 + .figure + .lead[style*="text-align: center"]) > .h2 { text-align: center; }
}

/* ------------------------------------------ homepage clickable cards (user) */
/* also the Explore more cards on product and solution pages (.pn, user) */
/* arrow at the right end of the title row, flush with the photo's right edge;
   it sits inside the title link, so it is clickable too */
:is(.is-home, .has-card-arrows, .pn) :is(.product-wide, .product-card, .case) > .h3 > a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
:is(.is-home, .has-card-arrows, .pn) :is(.product-wide, .product-card, .case) > .h3 > a::after {
  content: ""; flex: none; width: .72em; height: .66em;
  background-color: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='352 -1829 2058 1866'%3E%3Cpath transform='scale(1 -1)' d='M1477 -37 1297 141 1922 766H352V1026H1922L1297 1650L1477 1829L2410 896Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='352 -1829 2058 1866'%3E%3Cpath transform='scale(1 -1)' d='M1477 -37 1297 141 1922 766H352V1026H1922L1297 1650L1477 1829L2410 896Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color .25s ease;
}
/* desktop only (not on tablets/phones): letters near the pointer turn orange with a soft radial fade */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  :is(.is-home, .has-card-arrows, .pn) :is(.product-wide, .product-card, .case):hover > .h3 > a::after { background-color: var(--orange); }   /* colour only, the arrow stays put */
  :is(.is-home, .has-card-glow, .pn) :is(.product-wide, .product-card, .case) > :is(.h3, .body) {
    --glow-base: var(--ink);
    background-image: radial-gradient(circle 46px at var(--gx, -300px) var(--gy, -300px), var(--orange) 0%, var(--orange) 32%, var(--glow-base) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  :is(.is-home, .has-card-glow, .pn) :is(.product-wide, .product-card, .case) > .body { --glow-base: var(--grey); }
}

/* tablet + phone: feature-row titles flow naturally (the manual desktop line
   breaks made them wrap far too early on narrow screens) */
@media (max-width: 1024px) {
  .feature-row__title br { display: none; }
}

/* case pages: every numbered section (01 / 02 / 03) uses section 01's type and
   spacing - orange number, display title, ink lead copy (user) */
.cs-no { font-weight: 500; letter-spacing: .03em; }
.cs-title { margin-top: 26px; text-wrap: wrap; }
.cs-copy { max-width: 820px; margin-top: 29px; }
.cs-copy .lead + .lead { margin-top: 1.1667em; }
@media (max-width: 520px) {
  .cs-title { margin-top: 16px; }
  .cs-copy { margin-top: 20px; }
}

/* case pages: related projects at the end - 2 cards side by side on tablet and
   desktop, one column on phones; same card as the homepage solutions grid,
   with the case's services as keywords under the title (user) */
.related { padding-top: 0; }
.related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 48px; margin-top: clamp(28px, 3.1vw, 45px); }
.related__grid .figure { aspect-ratio: 628 / 353; }
.related__grid .figure img { width: 100%; height: 100%; object-fit: cover; }
.related__kw { font-size: var(--fs-small); line-height: 1.5; }
/* product and solution pages: previous / next card pair at the end (same card as related projects);
   a small square-cornered tag says Product or Solution - not a link, no hover (user);
   the two cards stack from tablet down (user) */
.pn__tag { align-self: flex-start; margin-top: 14px; padding: 5px 10px; border: 1px solid rgb(205, 205, 210); border-radius: 0;
  font-family: var(--font-text); font-size: 12px; line-height: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grey); cursor: default; pointer-events: none; user-select: none; }
@media (max-width: 1024px) { .pn .related__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } .pn__tag { margin-top: 12px; } }
@media (max-width: 520px) {
  .related__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
}