/* Iconic Software — site styles.
   Replaces the inline styles of the Claude Design export. Colour, type and
   spacing values that exist as design tokens are referenced from
   _ds/.../tokens/*.css; the rest are the literal values from the design. */

/* ---------------------------------------------------------------- base -- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--ink, #0a0a0a);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink, #0a0a0a); }
a:hover { color: var(--brand-pink, #ff4d8b); }

img { max-width: 100%; }

/* Anchor targets stop just under the sticky header (92px, 70px on phones),
   so a jump to a section lands on its content rather than on empty space. */
section[id], main[id] { scroll-margin-top: 108px; }

/* ---------------------------------------------------------- animations -- */

@keyframes hero-word { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes bg-wash   { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes aurora-1 { 0%, 100% { transform: translate3d(0,0,0) scale(1);    } 33% { transform: translate3d(11vw,7vh,0) scale(1.26);   } 66% { transform: translate3d(4vw,-6vh,0) scale(0.9);   } }
@keyframes aurora-2 { 0%, 100% { transform: translate3d(0,0,0) scale(1.1);  } 35% { transform: translate3d(-14vw,10vh,0) scale(0.86); } 70% { transform: translate3d(-6vw,-7vh,0) scale(1.24); } }
@keyframes aurora-3 { 0%, 100% { transform: translate3d(0,0,0) scale(0.95); } 40% { transform: translate3d(10vw,-11vh,0) scale(1.3);  } 75% { transform: translate3d(-7vw,-3vh,0) scale(1.04); } }
@keyframes aurora-4 { 0%, 100% { transform: translate3d(0,0,0) scale(1.15); } 30% { transform: translate3d(-10vw,-8vh,0) scale(0.88); } 65% { transform: translate3d(8vw,6vh,0) scale(1.22);  } }

/* --------------------------------------------------------- background -- */

.bg-wash {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: linear-gradient(115deg, #fff5f8 0%, #f7f2ff 30%, #fdf7f4 55%, #f6f1ff 78%, #fff5f8 100%);
  background-size: 300% 300%;
  background-position: 0% 50%;
  animation: bg-wash 40s ease-in-out infinite;
}

.aurora {
  position: fixed;
  inset: -20vh -10vw;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.7;
}

.aurora__cell {
  position: absolute;
  transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.aurora__cell--1 { top: 2%;  left: -6%;   width: 52vw; height: 52vw; transform: translate3d(calc(var(--mx, 0) * 90px),  calc(var(--my, 0) * 60px),  0); }
.aurora__cell--2 { top: 18%; right: -10%; width: 46vw; height: 46vw; transform: translate3d(calc(var(--mx, 0) * -70px), calc(var(--my, 0) * 46px),  0); }
.aurora__cell--3 { bottom: 6%; left: 12%; width: 44vw; height: 44vw; transform: translate3d(calc(var(--mx, 0) * 52px),  calc(var(--my, 0) * -74px), 0); }
.aurora__cell--4 { top: 46%; left: 40%;   width: 38vw; height: 38vw; transform: translate3d(calc(var(--mx, 0) * -120px), calc(var(--my, 0) * -86px), 0); }

.aurora__blob { width: 100%; height: 100%; border-radius: 50%; filter: blur(60px); }
.aurora__blob--1 { background: radial-gradient(circle, rgba(255,77,139,0.6) 0%,  rgba(255,77,139,0) 68%);  animation: aurora-1 42s ease-in-out infinite; }
.aurora__blob--2 { background: radial-gradient(circle, rgba(184,164,237,0.6) 0%, rgba(184,164,237,0) 68%); animation: aurora-2 54s ease-in-out infinite; }
.aurora__blob--3 { background: radial-gradient(circle, rgba(164,212,197,0.55) 0%, rgba(164,212,197,0) 68%); animation: aurora-3 62s ease-in-out infinite; }
.aurora__blob--4 { background: radial-gradient(circle, rgba(232,185,74,0.4) 0%,  rgba(232,185,74,0) 68%);  animation: aurora-4 48s ease-in-out infinite; }

/* ------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  transition: background-color 0.35s ease;
}

.site-header--scrolled { background-color: rgba(255,255,255,0.94); }

.site-header__inner {
  max-width: 1320px; /* room for the LV menu (~1304px) */
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.site-header__logo { display: flex; align-items: center; text-decoration: none; padding: 12px 4px; flex: none; }
.site-header__logo img { height: 32px; width: auto; display: block; }
.site-header__spacer { flex: 1 1 auto; }

.nav { display: flex; align-items: center; gap: 2px; padding: 5px; flex: none; }
.site-header__aside { display: flex; align-items: center; gap: 2px; padding: 5px; margin-left: 18px; flex: none; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--nav-link-size, 14px);
  font-weight: var(--nav-link-weight, 500);
  text-decoration: none;
  white-space: nowrap;
  padding: 9px 11px;
  border-radius: var(--rounded-pill, 999px);
}

.nav__link:hover {
  background-image: linear-gradient(100deg, #ff4d8b 0%, #b078ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav__icon { width: 16px; height: 16px; flex: none; color: var(--ink, #0a0a0a); }

.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(10,10,10,0.14);
  border-radius: var(--rounded-pill, 999px);
  flex: none;
  margin-right: 10px;
}

.lang__opt {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  padding: 5px 10px;
  border-radius: var(--rounded-pill, 999px);
  background: transparent;
  color: rgba(10,10,10,0.55);
  transition: background 0.3s ease, color 0.3s ease;
}

.lang__opt--on { background: var(--ink, #0a0a0a); color: #ffffff; }
.lang__opt--on:hover { color: #ffffff; }

.site-header__cta {
  font-size: 14px;
  padding: 9px 16px 9px 11px;
  background-color: transparent;
  backdrop-filter: none;
}

/* --------------------------------------------------------- menu panel -- */

/* The toggle appears exactly when the menu collapses (same rules as .nav),
   and opens a panel with everything the header then hides. */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--rounded-pill, 999px);
  color: var(--ink, #0a0a0a);
  cursor: pointer;
}

.nav-toggle__bars { position: relative; display: block; width: 20px; height: 11px; }

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-toggle__bars span:first-child { top: 0; }
.nav-toggle__bars span:last-child { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { transform: translateY(4.7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child { transform: translateY(-4.7px) rotate(-45deg); }

.site-menu {
  position: fixed;
  top: var(--header-h, 92px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 19;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px) saturate(140%);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-menu--open { opacity: 1; transform: none; }

.site-menu__inner { max-width: 1320px; margin: 0 auto; padding: 8px 24px 48px; }

.site-menu__list { list-style: none; margin: 0; padding: 0; }

.site-menu__link {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline-soft, #f0f0f0);
  font-family: 'Figtree', var(--font-body, 'Inter'), sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 6.5vw, 34px);
  letter-spacing: -0.9px;
  text-decoration: none;
}

.site-menu__list--sub { margin-top: 10px; }
.site-menu__list--sub .site-menu__link { font-size: 19px; font-weight: 500; letter-spacing: -0.3px; color: var(--body, #3a3a3a); border-bottom: 0; padding: 9px 0; }

.site-menu__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 26px; }
.site-menu__foot .eyebrow { margin-bottom: 2px; }
.site-menu__contact { font-size: 16px; text-decoration: none; }
.site-menu__contact--muted { color: var(--muted, #6a6a6a); }
.site-menu__cta { margin-top: 14px; }

/* Each row arrives just after the panel, in the order it is read. */
.site-menu__link, .site-menu__foot > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-menu--open .site-menu__link, .site-menu--open .site-menu__foot > * { opacity: 1; transform: none; }
.site-menu--open .site-menu__list:first-child .site-menu__link { transition-delay: calc(0.04s * var(--i, 0) + 0.06s); }
.site-menu--open .site-menu__list--sub .site-menu__link,
.site-menu--open .site-menu__foot > * { transition-delay: 0.26s; }

/* Locking the page scroll takes away the header's scrollport, and a sticky
   header without one falls back to the top of the document — out of sight,
   with the close button, whenever the menu is opened part way down the page.
   So it is pinned for as long as the menu is open. */
html.is-menu-open, html.is-menu-open body { overflow: hidden; }
html.is-menu-open .site-header { position: fixed; top: 0; left: 0; right: 0; }

/* ------------------------------------------------------------ buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--rounded-pill, 999px);
  padding: 12px 24px 12px 14px;
  white-space: nowrap;
}

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

.btn__ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.2px solid currentColor;
  opacity: 0.55;
  flex: none;
}

.btn__ring--light { border-color: rgba(255,255,255,0.5); opacity: 1; }
.btn__ring--dark  { border-color: rgba(10,10,10,0.22);  opacity: 1; }

.btn__icons {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.btn__ico {
  position: absolute;
  transition: opacity 0.25s ease, transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn__ico--rest  { width: 14px; height: 14px; opacity: 1; transform: none; }
.btn__ico--hover { width: 15px; height: 15px; opacity: 0; transform: translate(-7px, 7px) scale(0.7); }

.btn:hover .btn__ico--rest  { opacity: 0; transform: translateX(9px) scale(0.7); }
.btn:hover .btn__ico--hover { opacity: 1; transform: none; transition-delay: 0.06s; }

.btn--primary {
  color: #ffffff;
  border: 1px solid var(--ink, #0a0a0a);
  background-image: linear-gradient(100deg, #ff4d8b 0%, #b078ff 100%), linear-gradient(#0a0a0a, #0a0a0a);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  background-position: left center, left center;
  background-size: 0% 100%, 100% 100%;
  transition: background-size 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn--primary:hover {
  color: #ffffff;
  background-size: 100% 100%, 100% 100%;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255,77,139,0.35);
}

.btn--ghost {
  color: var(--ink, #0a0a0a);
  background-color: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(10,10,10,0.16);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.btn--ghost:hover { color: var(--ink, #0a0a0a); transform: translateY(-2px); border-color: var(--ink, #0a0a0a); }

.btn--light {
  color: var(--ink, #0a0a0a);
  background-color: #ffffff;
  border: 1px solid #ffffff;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn--light:hover { color: var(--ink, #0a0a0a); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.22); }

/* ------------------------------------------------------------- layout -- */

.band { max-width: 1180px; margin: 0 auto; padding: 0 32px 110px; }
.band--hero { padding: 150px 32px 130px; }

.eyebrow {
  font-size: var(--caption-upper-size, 12px);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted, #6a6a6a);
}

.eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 34px;
  color: var(--body, #3a3a3a);
}

.eyebrow__rule { width: 40px; height: 1px; background: var(--ink, #0a0a0a); }

.sec-head {
  border-left: 1px solid rgba(10,10,10,0.18);
  padding-left: 28px;
  margin-bottom: 52px;
  max-width: 720px;
}

#cases .sec-head, #services .sec-head, #stack .sec-head { margin-bottom: 44px; }

.sec-head .eyebrow { display: block; margin-bottom: 14px; }
.sec-head--flush { margin-bottom: 0; max-width: none; }
.sec-head--flush .eyebrow { letter-spacing: 1.4px; margin-bottom: 18px; }

.h1 {
  font-family: 'Figtree', var(--font-body, 'Inter'), sans-serif;
  font-weight: 700;
  font-size: 124px;
  line-height: 0.92;
  letter-spacing: -5.5px;
  margin: 0 0 34px;
  max-width: 15ch;
}

.h1__accent {
  background-image: linear-gradient(100deg, #ff4d8b 0%, #b078ff 45%, #ff4d8b 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hero-word 18s ease-in-out 5s infinite;
  display: inline-block;
  padding-right: 0.08em;
  margin-right: -0.06em;
  /* line-height 0.92 nogriež "j" astīti, jo teksts tiek izgriezts no fona laukuma */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

.h2 {
  font-family: 'Figtree', var(--font-body, 'Inter'), sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -1.6px;
  margin: 0;
}

.h2--tight { line-height: 1.06; text-wrap: pretty; }

.hero__sub {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: #4a4a4a;
  max-width: 640px;
  margin: 0 0 44px;
}

.hero__sub-accent { color: var(--ink, #0a0a0a); }

/* Desktop: the hero buttons fit the first screen from 768px-tall windows and
   1366x768 laptops (about 657px visible) up, EN and LV. On short screens the
   headline follows the window height; from ~800px tall it is the full 124px. */
@media (min-width: 1021px) {
  .band--hero { padding-top: 64px; }
  .eyebrow--ruled { margin-bottom: 24px; }
  .h1 { font-size: min(124px, 15.5vh); letter-spacing: -0.044em; margin-bottom: 28px; }
  .hero__sub { margin-bottom: 36px; }
}

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

.card {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(10,10,10,0.09);
  border-radius: 2px;
  padding: 34px;
}

.card--focus { display: flex; flex-direction: column; gap: 22px; }
.card--focus-1:hover { box-shadow: 0 14px 44px rgba(255,77,139,0.16); }
.card--focus-2:hover { box-shadow: 0 14px 44px rgba(26,58,58,0.16); }
.card--focus-3:hover { box-shadow: 0 14px 44px rgba(184,164,237,0.24); }
.card--focus-4:hover { box-shadow: 0 14px 44px rgba(255,176,132,0.28); }

.card__title { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; margin: 0; }
.card__body { font-size: 15px; line-height: 1.65; color: var(--body, #3a3a3a); margin: 0; }

iconic-service-anim { display: block; width: 100%; }


/* ----------------------------------------------------------- approach -- */

.approach {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}

.approach .sec-head { border-left: 1px solid rgba(10,10,10,0.18); padding-left: 28px; }
.approach__body { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.approach__lead { font-size: 20px; line-height: 1.55; color: var(--body, #3a3a3a); margin: 0; text-wrap: pretty; }
.approach__note { font-size: 15px; line-height: 1.7; color: var(--muted, #6a6a6a); margin: 0; text-wrap: pretty; }

/* -------------------------------------------------------------- cases -- */

.cases { overflow: hidden; }

.cases__track {
  display: flex;
  align-items: stretch;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.case {
  flex: 0 0 100%;
  min-width: 100%;
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: 44px;
  align-items: center;
}

.case__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.case__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.case__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

.case__title {
  font-family: 'Figtree', var(--font-body, 'Inter'), sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -1.1px;
  margin: 0;
}

.case__text { font-size: 16px; line-height: 1.65; color: var(--body, #3a3a3a); margin: 0; max-width: 52ch; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.tag { font-size: 13px; font-weight: 500; padding: 6px 12px; border: 1px solid rgba(10,10,10,0.12); border-radius: 2px; }

.cases__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(10,10,10,0.1);
}

.cases__nav-left { display: flex; align-items: center; gap: 20px; }
.cases__nav-right { display: flex; align-items: center; gap: 10px; }

.cases__counter {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--muted, #6a6a6a);
  font-variant-numeric: tabular-nums;
}

.cases__dots { display: flex; align-items: center; }

/* The button is a 24px tap target (WCAG 2.2 minimum); the visible dot is its
   ::before, inset by the padding. With no gap between buttons the dots sit
   16px apart. */
.dot {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 8px;
  border: none;
  background: none;
  cursor: pointer;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.dot::before {
  content: '';
  display: block;
  height: 100%;
  border-radius: var(--rounded-pill, 999px);
  background: rgba(10,10,10,0.2);
  transition: background 0.35s ease;
}

.dot--on { width: 42px; }
.dot--on::before { background: var(--ink, #0a0a0a); }

.icon-btn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(10,10,10,0.16);
  border-radius: var(--rounded-pill, 999px);
  color: var(--ink, #0a0a0a);
  cursor: pointer;
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.icon-btn:hover { border-color: var(--ink, #0a0a0a); transform: translateY(-2px); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------- expertise -- */

.exp-card {
  border-radius: 2px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 230px;
}

.exp-card__title {
  font-family: 'Figtree', var(--font-body, 'Inter'), sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -0.9px;
  margin: 0 0 16px;
}

.exp-card__body { font-size: 14px; line-height: 1.6; margin: 0; }

.exp-card--1 { background-image: linear-gradient(145deg, #ff4d8b 0%, #b078ff 100%); }
.exp-card--2 { background-image: linear-gradient(145deg, #12312f 0%, #1f6f63 100%); }
.exp-card--3 { background-image: linear-gradient(145deg, #b8a4ed 0%, #dcd0fb 100%); }
.exp-card--4 { background-image: linear-gradient(145deg, #ffb084 0%, #ffd7b0 100%); }
.exp-card--5 { background-image: linear-gradient(145deg, #e8b94a 0%, #f7dc8c 100%); }
.exp-card--6 { background-image: linear-gradient(145deg, #a4d4c5 0%, #d2ece0 100%); }

.exp-card--1 .exp-card__title, .exp-card--2 .exp-card__title { color: #ffffff; }
.exp-card--1 .exp-card__body { color: rgba(255,255,255,0.82); }
.exp-card--2 .exp-card__body { color: rgba(255,255,255,0.78); }

.exp-card--3 .exp-card__title, .exp-card--4 .exp-card__title,
.exp-card--5 .exp-card__title, .exp-card--6 .exp-card__title { color: var(--ink, #0a0a0a); }
.exp-card--3 .exp-card__body, .exp-card--4 .exp-card__body,
.exp-card--5 .exp-card__body, .exp-card--6 .exp-card__body { color: rgba(10,10,10,0.72); }

/* ----------------------------------------------------------- services -- */

.svc { display: flex; flex-direction: column; }

.svc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 28px;
  border-top: 1px solid rgba(10,10,10,0.1);
}

.svc__row:last-child { border-bottom: 1px solid rgba(10,10,10,0.1); }

.svc__name {
  font-family: 'Figtree', var(--font-body, 'Inter'), sans-serif;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -1px;
}

.svc__detail { font-size: 15px; color: var(--muted, #6a6a6a); }

/* -------------------------------------------------------------- stack -- */

.stack-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.stack-card__dot { width: 10px; height: 10px; border-radius: 50%; }
.stack-card__dot--1 { background: #ff4d8b; box-shadow: 0 0 14px rgba(255,77,139,0.8); }
.stack-card__dot--2 { background: #1a3a3a; box-shadow: 0 0 14px rgba(26,58,58,0.6); }
.stack-card__dot--3 { background: #b8a4ed; box-shadow: 0 0 14px rgba(184,164,237,0.9); }
.stack-card__dot--4 { background: #e8b94a; box-shadow: 0 0 14px rgba(232,185,74,0.9); }

.stack-card__headline {
  font-family: 'Figtree', var(--font-body, 'Inter'), sans-serif;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -1px;
  margin-bottom: 18px;
}

/* ----------------------------------------------------------- cta panel -- */

.cta-panel {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(145deg, #0d2b2a 0%, #1f6f63 58%, #4fa38c 100%);
  border-radius: 2px;
  padding: 96px 64px;
  box-shadow: 0 30px 90px rgba(31,111,99,0.28);
}

.cta-panel__glow { position: absolute; filter: blur(40px); }
.cta-panel__glow--a {
  top: -40%; right: -10%; width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(164,212,197,0.5) 0%, rgba(164,212,197,0) 62%);
  animation: aurora-1 34s ease-in-out infinite;
}
.cta-panel__glow--b {
  bottom: -60%; left: -5%; width: 50%; height: 180%;
  background: radial-gradient(circle, rgba(13,43,42,0.55) 0%, rgba(13,43,42,0) 62%);
  animation: aurora-3 40s ease-in-out infinite;
}

.cta-panel__inner { position: relative; }

.cta-panel__title {
  font-family: 'Figtree', var(--font-body, 'Inter'), sans-serif;
  font-weight: 600;
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -2px;
  color: #ffffff;
  margin: 0 0 18px;
  max-width: 18ch;
}

.cta-panel__body { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0 0 38px; max-width: 520px; }
.cta-panel__actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.cta-panel__contacts { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; flex-wrap: wrap; }
.cta-panel__contacts a { color: #ffffff; text-decoration: none; white-space: nowrap; }
.cta-panel__contacts a:hover { color: #ffffff; text-decoration: underline; }
.cta-panel__sep { color: rgba(255,255,255,0.4); }

/* ------------------------------------------------------------- footer -- */

.footer { padding-bottom: 56px; }
.footer__inner { border-top: 1px solid rgba(10,10,10,0.1); padding-top: 48px; }
.footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.footer__heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted, #6a6a6a); /* --muted-soft is 2.8:1 on white; small text needs 4.5:1 */
}

.footer__link { font-size: 14px; text-decoration: none; }
.footer__link--muted { color: var(--body, #3a3a3a); line-height: 1.6; }
.footer__base { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 64px; }
.footer__copy { font-size: 13px; color: var(--muted, #6a6a6a); }

/* ---------------------------------------------------------- responsive -- */

/* One switch point for both languages, so changing language never adds or
   removes the menu: below 1320px, the width the longer LV menu needs, it
   collapses. header.php also collapses it whenever it still does not fit,
   in case edited copy ever needs more room. */
@media (max-width: 1319px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Support and Contact live in the panel while the menu is collapsed. */
  .site-header__aside { display: none; }
  .site-header__inner { gap: 8px; }
  .site-header__aside { margin-left: 8px; }
}

.site-header--collapsed .nav { display: none; }
.site-header--collapsed .nav-toggle { display: inline-flex; }
.site-header--collapsed .site-header__aside { display: none; }
.site-header--collapsed .site-header__aside { margin-left: 8px; }

@media (max-width: 1020px) {
  .h1 { font-size: 76px; letter-spacing: -3px; }
  .hero__sub { font-size: 22px; }
  .grid--2, .grid--3, .approach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones. Everything below 641px is laid out for one hand and one column:
   tighter vertical rhythm, headings at full width, and each section's key
   element (the hero CTA, one case study) fitting a single screen. */
@media (max-width: 640px) {
  .site-header__inner { padding: 12px 14px; }
  /* Logo, language switch and the menu toggle, and they must fit: when they
     did not, the page grew wider than the screen and phones zoomed out. The
     CTA is in the menu panel and in the hero. */
  .site-header__logo img { height: 26px; }
  .lang { margin-right: 0; }
  .site-header__cta { display: none; }

  section[id], main[id] { scroll-margin-top: 86px; }
  .band { padding-left: 20px; padding-right: 20px; padding-bottom: 72px; }
  .band--hero { padding-top: 40px; padding-bottom: 64px; }

  /* Hero: both buttons stay visible above the open cookie banner on current
     phones, as first loaded with the browser's bars showing (390x664 Safari,
     360x700 Chrome and up; EN and LV). The headline scales with the width,
     keeping "Remarkable / web solutions." to two lines. Check the fit after
     changing hero or banner copy. */
  .eyebrow--ruled { margin-bottom: 14px; }
  .h1 { font-size: clamp(48px, 14.4vw, 62px); letter-spacing: -0.035em; margin-bottom: 14px; }
  .hero__sub { font-size: 19px; line-height: 1.45; letter-spacing: -0.3px; margin-bottom: 20px; }
  .btn-row { gap: 10px; }
  .btn-row .btn { padding: 11px 18px 11px 11px; gap: 8px; }

  /* Section heads use the full width: no indent behind the rule. */
  .sec-head, .approach .sec-head { border-left: 0; padding-left: 0; margin-bottom: 28px; }
  #cases .sec-head, #services .sec-head, #stack .sec-head { margin-bottom: 28px; }
  .sec-head .eyebrow { margin-bottom: 10px; }
  .sec-head--flush { margin-bottom: 0; }
  .sec-head--flush .eyebrow { margin-bottom: 12px; }
  .h2 { font-size: 30px; line-height: 1.12; letter-spacing: -0.9px; }

  .grid--2, .grid--3, .approach { grid-template-columns: 1fr; }
  .grid { gap: 14px; }
  .card { padding: 22px; }
  .card--focus { gap: 16px; }
  .card__title { font-size: 20px; }

  /* Focus cards as a pinned stack: each one holds under the header while the
     next slides over it, so its illustration gets the screen to itself. The
     8px steps leave the edge of the card underneath showing. Cards are near
     opaque here, since they now overlap each other rather than the page. */
  #focus .grid { gap: 0; }
  #focus .card--focus {
    position: sticky;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 -10px 34px rgba(10,10,10,0.07);
  }
  #focus .card--focus-1 { top: 86px; }
  #focus .card--focus-2 { top: 94px; margin-top: 18px; }
  #focus .card--focus-3 { top: 102px; margin-top: 18px; }
  #focus .card--focus-4 { top: 110px; margin-top: 18px; }

  .approach { gap: 20px; }
  .approach .sec-head { margin-bottom: 0; }
  .approach__lead { font-size: 18px; }

  /* Case studies: one slide and its controls fit a single screen. */
  .case { grid-template-columns: 1fr; gap: 14px; align-items: start; align-content: start; }
  .case__body { gap: 8px; }
  .case__title { font-size: 23px; letter-spacing: -0.6px; }
  .case__text { font-size: 15px; line-height: 1.55; }
  .tags { gap: 6px; margin-top: 2px; }
  .tag { font-size: 12px; padding: 4px 9px; }

  /* The controls sit on the bottom edge of the image instead of in a row of
     their own below the slide: the case and its controls share one screen.
     .cases and .cases__nav share a grid cell; the offset is the image height
     (full band width at 4:3, the band padding being 20px a side) less the
     controls' own height. The case images all have light backgrounds. */
  #cases { display: grid; grid-template-columns: minmax(0, 1fr); }
  #cases .cases, #cases .cases__nav { grid-row: 2; grid-column: 1; }
  .cases__nav {
    align-self: start;
    z-index: 1;
    margin: calc((100vw - 40px) * 0.75 - 54px) 0 0;
    padding: 0 12px;
    border-top: 0;
    gap: 12px;
    pointer-events: none;
  }
  .cases__nav-left > *, .cases__nav-right > * { pointer-events: auto; }
  .cases__counter { display: none; }
  .cases__dots {
    padding: 1px 4px;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(10px);
    border-radius: var(--rounded-pill, 999px);
  }
  .icon-btn { width: 42px; height: 42px; background: rgba(255,255,255,0.78); }

  .exp-card { min-height: 0; padding: 22px; }
  .exp-card__title { font-size: 22px; letter-spacing: -0.6px; margin-bottom: 10px; }

  .svc__row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 0; }
  .svc__name { font-size: 23px; letter-spacing: -0.6px; }
  .svc__detail { font-size: 14px; }

  .stack-card__headline { font-size: 23px; letter-spacing: -0.6px; margin-bottom: 14px; }

  .cta-panel { padding: 36px 22px; }
  .cta-panel__title { font-size: 30px; letter-spacing: -1px; }
  .cta-panel__body { font-size: 16px; margin-bottom: 28px; }
  .cta-panel__contacts { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cta-panel__sep { display: none; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__base { margin-top: 40px; }
}

@media (max-width: 400px) {
  .site-header__inner { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .site-header__logo img { height: 22px; }
  /* Without the arrow ring, both hero buttons fit one row at 360px. */
  .btn-row .btn { padding: 12px 18px; }
  .btn-row .btn__ring { display: none; }
}

/* ----------------------------------------------------- reduced motion -- */

/* ------------------------------------------------------------ consent -- */

/* Both answers get the same button, so declining is as easy as accepting. */
/* Bottom right, away from the left-aligned hero buttons (phones override). */
.consent {
  position: fixed;
  right: var(--space-lg, 24px);
  bottom: var(--space-lg, 24px);
  z-index: 30;
  max-width: 460px;
  padding: var(--space-lg, 24px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 16px);
  background: var(--on-primary, #ffffff);
  border: 1px solid var(--hairline, #e5e5e5);
  border-radius: var(--rounded-lg, 16px);
  box-shadow: 0 18px 50px rgba(10,10,10,0.14);
}

.consent__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--body, #3a3a3a); }
.consent__title { color: var(--ink, #0a0a0a); font-weight: 600; }

.consent__actions { display: flex; gap: var(--space-xs, 8px); flex-wrap: wrap; }

.consent__btn {
  flex: 1 1 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #0a0a0a);
  background: transparent;
  border: 1px solid var(--ink, #0a0a0a);
  border-radius: var(--rounded-pill, 999px);
  padding: 10px 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.consent__btn:hover, .consent__btn:focus-visible { background: var(--ink, #0a0a0a); color: var(--on-primary, #ffffff); }

/* The footer's "cookie settings" link: a button, styled as the text beside it. */
.consent-link {
  font: inherit;
  font-size: 14px;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__copy.consent-link { font-size: 13px; }

@media (max-width: 640px) {
  /* Compact, so it leaves the hero buttons visible (see the hero rules). */
  .consent { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 16px 18px; gap: 12px; }
  .consent__text { font-size: 13px; line-height: 1.5; }
  .consent__btn { padding: 9px 12px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-menu, .site-menu__link, .site-menu__foot > *, .nav-toggle__bars span { transition: none; }
  .site-menu { transform: none; }
  .site-menu__link, .site-menu__foot > * { opacity: 1; transform: none; }
  .bg-wash, .aurora__blob, .h1__accent, .cta-panel__glow { animation: none; }
  .aurora__cell, .cases__track, .btn, .btn__ico, .dot, .dot::before, .icon-btn { transition: none; }
}

/* ====================================================== support page == */

/* .save-panel__actions is display:flex, which would beat the hidden
   attribute — support.js reveals it once it can actually do the work. */
[hidden] { display: none !important; }

/* The support page uses the same aurora, three blobs, faster and without
   the pointer parallax. */
.aurora--still .aurora__cell { transform: none; }
.aurora__blob--fast.aurora__blob--1 { animation-duration: 19s; }
.aurora__blob--fast.aurora__blob--2 { animation-duration: 24s; }
.aurora__blob--fast.aurora__blob--3 { animation-duration: 27s; }

.support { max-width: 1180px; margin: 0 auto; padding: 72px 32px 96px; }
.support__head { margin-bottom: 48px; }
.support__eyebrow { letter-spacing: 1.4px; margin-bottom: 16px; }

.support__title {
  font-family: 'Figtree', var(--font-body, 'Inter'), sans-serif;
  font-weight: 600;
  font-size: 62px;
  line-height: 1.02;
  letter-spacing: -2.6px;
  margin: 0 0 20px;
}

.support__intro {
  font-size: 18px;
  line-height: 1.6;
  color: var(--body, #3a3a3a);
  max-width: calc(100% - 412px);
  margin: 0 0 12px;
}

.support__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  align-items: start;
}

.support__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.fact {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(10,10,10,0.09);
  border-radius: 2px;
  padding: 24px;
}

.fact--wide { grid-column: 1 / -1; }

.fact__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted, #6a6a6a);
  margin-bottom: 8px;
}

.fact__value { font-size: 18px; font-weight: 600; color: var(--ink, #0a0a0a); }
.fact__ua { font-size: 14px; line-height: 1.6; color: var(--body, #3a3a3a); word-break: break-all; }

.support__note { grid-column: 1 / -1; padding: 8px 24px 0; display: flex; flex-direction: column; gap: 4px; }
.support__note--how { padding: 16px 24px 0; }
.support__note .fact__label { margin-bottom: 0; }
.support__note-body { font-size: 13px; line-height: 1.6; color: var(--muted, #6a6a6a); margin: 0; }

.save-panel {
  position: sticky;
  top: 24px;
  background: var(--brand-pink, #ff4d8b);
  border-radius: 2px;
  padding: 32px;
  color: #ffffff;
}

.save-panel__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 16px;
}

.save-panel__title {
  font-family: 'Figtree', var(--font-body, 'Inter'), sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin: 0 0 12px;
}

.save-panel__body { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.75); margin: 0 0 24px; }
.save-panel__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.save-panel__note { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.55); margin: 0; }

/* Matches the design system's Button, variant "onColor". */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height, 44px);
  padding: 0 20px;
  border: none;
  border-radius: var(--rounded-md, 12px);
  background: #ffffff;
  color: var(--ink, #0a0a0a);
  font-family: inherit;
  font-size: var(--button-size, 14px);
  font-weight: var(--button-weight, 600);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.ds-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }

.mini-footer { border-top: 1px solid rgba(10,10,10,0.1); }

.mini-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mini-footer__copy { font-size: 14px; color: var(--muted, #6a6a6a); }
.mini-footer__contacts { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.mini-footer__contacts a { text-decoration: none; }
.mini-footer__sep { color: var(--muted, #6a6a6a); }

@media (max-width: 960px) {
  .support__grid { grid-template-columns: 1fr; }
  .save-panel { position: static; }
  .support__intro { max-width: 100%; }
}

@media (max-width: 640px) {
  .support { padding: 40px 20px 64px; }
  .support__title { font-size: 38px; letter-spacing: -1px; }
  .support__cards { grid-template-columns: 1fr; }
  .save-panel { padding: 24px; }
  .mini-footer__inner { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-btn { transition: none; }
}

/* ========================================================= meet page == */

/* /meet-mairis/: photo beside the name and the "Save contact" button, then
   the details and the QR code. On phones the button has to be on the first
   screen, so the photo shrinks to a thumbnail above the name. */

.meet { max-width: 1180px; margin: 0 auto; padding: 72px 32px 110px; }

.meet__hero {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  margin-bottom: 72px;
}

.meet__photo { display: block; }
.meet__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid rgba(10,10,10,0.09);
  box-shadow: 0 30px 80px rgba(176,120,255,0.22), 0 10px 30px rgba(255,77,139,0.14);
}

.meet__name {
  font-family: 'Figtree', var(--font-body, 'Inter'), sans-serif;
  font-weight: 700;
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.044em;
  margin: 0 0 20px;
}

.meet__role {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ink, #0a0a0a);
  margin: 0 0 14px;
}

.meet__lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--body, #3a3a3a);
  max-width: 520px;
  margin: 0 0 34px;
  text-wrap: pretty;
}

.meet__save { font-size: 17px; padding: 15px 30px 15px 16px; gap: 12px; }
.meet__save .btn__ring { width: 28px; height: 28px; }
.meet__save .btn__icons, .meet__save .btn__ico--rest { width: 16px; height: 16px; }
.meet__save .btn__ico--hover { width: 16px; height: 16px; }

.meet__save-note { font-size: 13px; line-height: 1.5; color: var(--muted, #6a6a6a); margin: 12px 0 28px; max-width: 420px; }

.meet__more {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
}

.meet__details .eyebrow { display: block; margin-bottom: 10px; }
.meet__list { margin: 0; }
.meet__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(10,10,10,0.1);
}
.meet__row:last-child { border-bottom: 0; padding-bottom: 0; }
.meet__row dt { font-size: 13px; color: var(--muted, #6a6a6a); }
.meet__row dd { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.2px; overflow-wrap: anywhere; }
.meet__row a { text-decoration: none; }

.meet__qr { display: flex; align-items: center; gap: 28px; }
.meet__qr-code {
  flex: none;
  width: 168px;
  height: 168px;
  padding: 12px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid rgba(10,10,10,0.09);
}
.meet__qr-title {
  font-family: 'Figtree', var(--font-body, 'Inter'), sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
}
.meet__qr-body { font-size: 14px; line-height: 1.6; color: var(--body, #3a3a3a); margin: 0; }

@media (max-width: 1020px) {
  .meet__hero { grid-template-columns: 280px minmax(0, 1fr); gap: 44px; }
  .meet__name { font-size: 68px; }
  .meet__more { grid-template-columns: 1fr; }
}

/* Below 861px the text column beside the photo gets too narrow — the name
   breaks and the buttons wrap — so the hero stacks, as on phones: a centred
   photo, then the name and a full-width "Save contact". */
@media (max-width: 860px) {
  .meet { padding-top: 40px; }
  .meet__hero { grid-template-columns: 1fr; gap: 18px; margin-bottom: 44px; }
  .meet__photo { width: 176px; justify-self: center; }
  .meet__photo img { box-shadow: 0 14px 36px rgba(176,120,255,0.22); }
  .meet__intro .eyebrow--ruled { margin-bottom: 8px; }
  .meet__name { font-size: clamp(46px, 14vw, 60px); letter-spacing: -0.035em; margin-bottom: 8px; }
  .meet__role { font-size: 19px; margin-bottom: 6px; }
  .meet__lead { font-size: 15px; line-height: 1.5; margin-bottom: 18px; max-width: none; }
  .meet__save { display: flex; justify-content: center; width: 100%; padding-top: 13px; padding-bottom: 13px; }
  .meet__save-note { margin-bottom: 20px; max-width: none; }
  .meet__quick .btn { flex: 1 1 0; justify-content: center; padding: 11px 12px; }
  .meet__quick .btn__ring { display: none; }
}

@media (max-width: 640px) {
  /* Spacing is tight on purpose: "Save contact" stays on the first screen
     (390x664 and up). Check it after changing copy. */
  .meet { padding: 16px 20px 72px; }
  .meet__row { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .meet__row dd { font-size: 17px; }
  /* Text first, so the code sits last and alone at the bottom of the card. */
  .meet__qr { flex-direction: column-reverse; align-items: flex-start; gap: 18px; }
  /* Shown to someone across the table: as wide as the card allows, so a
     phone camera picks it up from arm's length. */
  .meet__qr-code { width: 100%; max-width: 340px; height: auto; aspect-ratio: 1; padding: 16px; align-self: center; }
}