/* ==========================================================================
   SimpleCode Portfolio — landing page styles
   Design source: "Replica of portfolio page/SimpleCode Portfolio v2.dc.html"
   Plain CSS, no preprocessor, no framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted — no third-party requests)
   Nunito Sans is a variable font: one file per subset covers weights 200-1000.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans-latin-ext.woff2') format('woff2');
  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: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --bg: #120c34;
  --bg-hero: #0c1d49;
  --card-tint: rgba(34, 71, 101, 0.29);
  --accent: #fc7950;
  --accent-hover: #ff9271;
  --text: #ffffff;
  --tab-active: #31789a;
  --tabbar-bg: #140a32;
  --tabbar-border: rgba(255, 255, 255, 0.08);
  --divider: #1a2950;
  --wa: #2bb955;
  --tg: #43a8e6;

  /* Layout */
  --container: 1200px;
  --gutter: 10px;
  --header-h: 110px;
  --hero-h: 1022px;
  --card-radius: 20px;
  --pill-radius: 50px;
  --card-min-h: 470px;
  --stack-gap: 20px;

  /* Marquee durations — from the design's applySpeed(): 140s, x1.13, x1.26 */
  --mq-dur: 140s;
  --mq-dur-2: 158s;
  --mq-dur-3: 176s;

  /* Fluid type scale.
     Each ramp is solved so the preferred value equals the design's phone size
     at exactly 575px and the design's desktop size at exactly 1200px — so the
     rendering matches the mockup at both ends and interpolates in between
     instead of jumping at a breakpoint. */
  --fs-hero-1: clamp(24px, 0.12rem + 3.84vw, 48px);      /* 24  -> 48   */
  --fs-hero-2: clamp(48px, 1.16rem + 5.12vw, 80px);      /* 48  -> 80   */
  --fs-hero-3: clamp(27.2px, -0.416rem + 5.888vw, 64px); /* 27.2 -> 64  */
  --fs-section: clamp(40px, 1.12rem + 3.84vw, 64px);     /* 40  -> 64   */
  --fs-card: clamp(24px, 1.04rem + 1.28vw, 32px);        /* 24  -> 32   */
  --fs-body: clamp(16px, 0.724rem + 0.768vw, 20.8px);    /* 16  -> 20.8 */
  --fs-chip: clamp(16px, 0.816rem + 0.512vw, 19.2px);    /* 16  -> 19.2 */
  --fs-tab: clamp(13.5px, 0.47rem + 1.04vw, 20px);       /* 13.5 -> 20  */
  --fs-btn: clamp(20px, 1.02rem + 0.64vw, 24px);         /* 20  -> 24   */
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Keeps the sticky tab bar from covering the anchor target it scrolls to. */
  scroll-padding-top: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  max-width: 100%;
}

img {
  border: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

h1,
h2,
h3,
p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
}

/* Visible keyboard focus — the design defines none at all. */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Screen-reader-only text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  padding: 12px 22px;
  border-radius: 0 0 12px 12px;
  background: var(--accent);
  color: #120c34;
  font-weight: 700;
  transform: translate(-50%, -120%);
  transition: transform 0.18s ease;
}

.skip-link:focus-visible {
  color: #120c34;
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.page {
  background: var(--bg);
  /* `clip` (not `hidden`) so the sticky tab bar keeps working. */
  overflow-x: clip;
}

.container {
  width: var(--container);
  max-width: 100%;
  margin-inline: auto;
}

/* Decorative dotted rule (single external SVG instead of 15 inline data URIs) */
.dots {
  display: block;
  width: 31px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--dots-color, rgba(255, 255, 255, 0.44));
  -webkit-mask-image: url('../img/dots.svg');
  mask-image: url('../img/dots.svg');
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.dots--wide {
  width: 70%;
  background: var(--divider);
  -webkit-mask-position: center;
  mask-position: center;
}

.dots-rule {
  display: flex;
  justify-content: center;
  padding: 70px 0;
}

/* --------------------------------------------------------------------------
   5. Marquee (CSS-only infinite scroll)
   The track holds the item set twice, so translating by -50% loops seamlessly.
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: mq-left var(--mq-dur) linear infinite;
}

.marquee__track--reverse {
  animation-name: mq-right;
}

.marquee--2 .marquee__track {
  animation-duration: var(--mq-dur-2);
}

.marquee--3 .marquee__track {
  animation-duration: var(--mq-dur-3);
}

/* Pause while a background tab (set from JS) or while hovered/focused. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
body.is-hidden .marquee__track {
  animation-play-state: paused;
}

@keyframes mq-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes mq-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.header {
  position: relative;
  z-index: 5;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.header__logo {
  display: block;
}

.header__logo img {
  display: block;
  height: 44px;
  width: auto;
}

/* Language switcher */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--tabbar-border);
  border-radius: var(--pill-radius);
  background: rgba(20, 10, 50, 0.55);
  backdrop-filter: blur(6px);
}

.lang__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: var(--pill-radius);
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang__item:hover {
  color: var(--text);
}

.lang__item[aria-current='true'] {
  background: var(--tab-active);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Pulls the transparent header on top of the hero artwork. */
  margin-top: calc(-1 * var(--header-h));
  padding: var(--header-h) var(--gutter) 0;
  min-height: var(--hero-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-hero);
  background-image: url('../img/main_bg_fullsize-scaled.webp');
  background-size: cover;
  background-position: 50% 50%;
}

/* Fades the artwork into the page background at the top and bottom. */
.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(18, 12, 52, 0.85) 0%,
    rgba(12, 29, 73, 0.28) 26%,
    rgba(12, 29, 73, 0) 55%,
    rgba(18, 12, 52, 0.62) 84%,
    #120c34 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 60px;
}

.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-wrap: balance;
}

.hero__line {
  display: block;
}

.hero__line--1 {
  font-size: var(--fs-hero-1);
  font-weight: 500;
}

.hero__line--2 {
  font-size: var(--fs-hero-2);
  font-weight: 900;
}

.hero__line--3 {
  font-size: var(--fs-hero-3);
  font-weight: 700;
}

.accent {
  color: var(--accent);
}

.hero__lead {
  width: 960px;
  max-width: 100%;
  text-align: center;
  text-wrap: pretty;
}

/* Client logo strip, pinned to the bottom of the hero */
.hero__clients {
  position: relative;
  z-index: 1;
  width: var(--container);
  max-width: 100%;
  margin: auto auto 0;
  padding: 70px 0 40px;
}

.client-logo {
  display: block;
  height: 100px;
  width: auto;
  margin-right: 36px;
  border-radius: var(--card-radius);
}

/* --------------------------------------------------------------------------
   8. Projects section
   -------------------------------------------------------------------------- */
.projects {
  background: var(--bg);
  padding: 50px var(--gutter) 70px;
}

.projects__inner {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

/* Section heading + tabs stay pinned while the card list scrolls past. */
.projects__sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 0 34px;
  background: linear-gradient(
    180deg,
    #120c34 0%,
    #120c34 62%,
    rgba(18, 12, 52, 0.86) 84%,
    rgba(18, 12, 52, 0) 100%
  );
}

.section-title {
  margin: 0;
  font-size: var(--fs-section);
  line-height: 1;
  font-weight: 900;
  text-align: center;
  text-wrap: balance;
}

.tabs {
  display: flex;
  gap: 8px;
  padding: 8px;
  margin: 10px 0 0;
  background: var(--tabbar-bg);
  border: 1px solid var(--tabbar-border);
  border-radius: var(--pill-radius);
}

.tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-tab);
  font-weight: 700;
  padding: 16px 40px;
  border-radius: var(--pill-radius);
  white-space: nowrap;
  background: transparent;
  color: var(--text);
  transition: background 0.2s ease;
}

.tab:hover {
  background: rgba(49, 120, 154, 0.35);
}

.tab[aria-selected='true'] {
  background: var(--tab-active);
}

.tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

/* An author `display` declaration outranks the UA's `[hidden] { display: none }`,
   so the inactive panel has to be hidden explicitly. */
.tab-panel[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   9. Project cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-gap);
  min-height: var(--card-min-h);
  padding: 30px 30px 0;
  border-radius: var(--card-radius);
  background-color: var(--card-tint);
  isolation: isolate;
  overflow: hidden;
}

/* Card artwork.
   The mockup used `background-image`, but a real <img> gets native
   `loading="lazy"`, so the hidden tab panel's photos are never fetched until
   the panel is opened. Same rendering, ~700 KB less on first load. */
.card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}

.card__bg--top {
  object-position: 50% 0%;
}

/* Where the mockup layered the photo itself as a translucent overlay. */
.card__bg--half {
  opacity: 0.5;
}

.card__bg--faint {
  opacity: 0.2;
}

/* Tint layer between the artwork and the content. */
.card__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--card-radius);
  pointer-events: none;
}

.card__col {
  position: relative;
  z-index: 2;
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 10px;
}

.card__col--tight {
  gap: 10px;
}

.card__media {
  position: relative;
  z-index: 2;
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.card__media--end {
  justify-content: flex-end;
}

.card__media img {
  display: block;
  width: var(--media-w, 80%);
  height: auto;
}

.card__logo {
  display: block;
  width: var(--logo-w, auto);
  max-width: 100%;
  height: 120px;
  object-fit: contain;
  object-position: left center;
}

.card__logo--short {
  height: 80px;
}

.card__title {
  margin: 0;
  font-size: var(--fs-card);
  line-height: 1;
  font-weight: 700;
  color: var(--proj-accent, var(--text));
  text-wrap: pretty;
}

.card__text {
  margin: 0;
  text-wrap: pretty;
}

.card__text--dark {
  color: #000000;
}

/* Per-project accents (heading colour + dotted rule colour) */
.card--sg      { --proj-accent: #f2c94c; --dots-color: rgba(255, 255, 255, 0.44); }
.card--ac      { --proj-accent: #4bed9a; --dots-color: rgba(255, 255, 255, 0.44); }
.card--al      { --proj-accent: #bd3040; --dots-color: rgba(189, 48, 64, 0.44); }
.card--dp      { --proj-accent: #36aae6; --dots-color: rgba(54, 170, 230, 0.44); }
.card--ds      { --proj-accent: #386aed; --dots-color: rgba(54, 170, 230, 0.44); }
.card--wellai  { --proj-accent: #ffffff; --dots-color: rgba(255, 255, 255, 0.44); }
.card--estate  { --proj-accent: #04aa79; --dots-color: rgba(4, 170, 121, 0.44); }
.card--ch      { --proj-accent: #e2893a; --dots-color: rgba(255, 255, 255, 0.44); }
.card--ai      { --proj-accent: #f2c94c; --dots-color: rgba(255, 255, 255, 0.44); }

/* Card base colours (artwork comes from .card__bg images in the markup) */
.card--ac { background-color: #2571be; padding: 30px 0 0 30px; }
.card--al { background-color: #ffffff; }
.card--ch { background-color: #2a2b30; }

/* Colour / gradient tints laid over the artwork */
.card--sg .card__veil,
.card--osint .card__veil {
  background: #081e43;
  opacity: 0.8;
}

.card--estate-ai .card__veil {
  background: linear-gradient(90deg, #000000 0%, rgba(242, 41, 91, 0) 150%);
  opacity: 0.8;
}

.card--kitchen .card__veil {
  background: linear-gradient(90deg, #081e43 0%, rgba(242, 41, 91, 0) 150%);
}

.card--nvc .card__veil {
  background: linear-gradient(90deg, #000000 0%, rgba(242, 41, 91, 0) 100%);
  opacity: 0.8;
}

/* AI cards: copy on the left half, artwork left visible on the right half */
.card--ai {
  display: flex;
  flex-wrap: nowrap;
}

.card--ai .card__col {
  flex: 1 1 50%;
}

.card__spacer {
  flex: 1 1 50%;
}

/* --------------------------------------------------------------------------
   10. Contact section
   -------------------------------------------------------------------------- */
.contact {
  position: relative;
  padding: 30px 20px 100px;
  background-color: var(--bg);
  background-image: url('../img/main_bg_fullsize-scaled.webp');
  background-size: cover;
  background-position: 50% 100%;
}

.contact__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #120c34 0%,
    rgba(18, 12, 52, 0.72) 14%,
    rgba(18, 12, 52, 0.18) 34%,
    rgba(12, 29, 73, 0.35) 100%
  );
}

.contact__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  padding: 0 34px;
  margin-right: 20px;
  border-radius: var(--pill-radius);
  background: var(--chip-bg, #1c426d);
  color: var(--text);
  font-size: var(--fs-chip);
  font-weight: 700;
  white-space: nowrap;
}

.contact__lead {
  text-align: center;
}

.contact__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--stack-gap);
  padding-top: 20px;
}

.contact__cell {
  display: flex;
  padding: 10px;
}

.contact__cell--end {
  justify-content: flex-end;
}

.contact__cell--start {
  justify-content: flex-start;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 30px;
  border-radius: var(--pill-radius);
  color: var(--text);
  font-size: var(--fs-btn);
  line-height: 1;
  font-weight: 400;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  color: var(--text);
  opacity: 0.88;
  transform: translateY(-2px);
}

.btn svg {
  flex: 0 0 auto;
}

.btn--wa {
  background: var(--wa);
}

.btn--tg {
  background: var(--tg);
}

/* --------------------------------------------------------------------------
   11. Footer (an addition to the mockup — see README)
   -------------------------------------------------------------------------- */
.footer {
  background: var(--bg);
  padding: 40px var(--gutter) 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 16px;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer__brand img {
  display: block;
  height: 32px;
  width: auto;
}

.footer__copy {
  color: rgba(255, 255, 255, 0.62);
}

/* ==========================================================================
   12. Responsive tiers
   Design breakpoints (1024 / 900 / 575) are preserved; a laptop tier and a
   small-phone tier are added on top.
   ========================================================================== */

/* --- Laptop / short viewports ------------------------------------------- */
/* The design's 1022px hero is taller than a typical laptop screen (1366x768,
   1440x900, 1280x800), which would push the client logo strip and the whole
   projects section below the fold. The constraint is vertical, not
   horizontal, so this keys off height rather than width.
   `min-height` is only a floor — the hero still grows if its content needs
   more room, so a landscape phone is not squeezed. */
@media (max-height: 920px) {
  :root {
    --hero-h: min(1022px, 100svh);
  }

  .hero__clients {
    padding: 48px 0 32px;
  }
}

/* --- Tablet & below: <=1024px (design breakpoint) ------------------------ */
@media (max-width: 1024px) {
  .card {
    padding-left: 24px;
    padding-right: 24px;
  }

  .card--ac {
    padding-left: 24px;
    padding-right: 0;
  }

  /* Design caps card headings at 28px here; keep the fluid scale under it. */
  .card__title {
    font-size: min(var(--fs-card), 28px);
  }
}

/* --- Tablet portrait / large phone: <=900px (design breakpoint) ---------- */
@media (max-width: 900px) {
  .card {
    min-height: 0;
    padding: 24px 20px 0;
  }

  .card--ac {
    padding: 24px 20px 0;
  }

  .card--ai {
    flex-wrap: wrap;
    padding: 24px 20px 28px;
  }

  /* Stack: copy above, artwork below. */
  .card__col,
  .card__media,
  .card--ai .card__col {
    flex-basis: 100%;
  }

  .card__media img {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
  }

  /* The AI cards' empty half only exists to reveal the artwork on wide
     screens; on a stacked layout it would just add dead space. */
  .card__spacer {
    display: none;
  }

  .hero__title {
    gap: 6px;
  }

  .footer__inner {
    justify-content: center;
    text-align: center;
  }
}

/* --- Phone: <=575px (design breakpoint) --------------------------------- */
@media (max-width: 575px) {
  :root {
    --header-h: 84px;
    --hero-h: 700px;
    --stack-gap: 16px;
  }

  .hero {
    background-position: 100% 50%;
  }

  .hero__inner {
    padding-top: 36px;
  }

  .hero__clients {
    padding: 40px 0 28px;
  }

  .client-logo {
    height: 72px;
    margin-right: 20px;
  }

  .projects {
    padding: 20px 10px 40px;
  }

  .projects__sticky {
    padding: 14px 0 22px;
  }

  /* Two tabs share the row without overflowing; labels may wrap. */
  .tabs {
    width: 100%;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 6px;
  }

  .tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 8px;
    white-space: normal;
  }

  .card {
    padding: 20px 10px 0;
    gap: 0;
  }

  .card--ac {
    padding: 20px 10px 0;
  }

  .card--ai {
    padding: 20px 14px 26px;
  }

  .card__logo {
    height: 80px;
  }

  .chip {
    height: 50px;
    padding: 0 22px;
  }

  .contact {
    padding: 20px 10px 60px;
  }

  .contact__actions {
    grid-template-columns: 1fr;
  }

  .contact__cell,
  .contact__cell--end,
  .contact__cell--start {
    justify-content: center;
  }

  .btn {
    padding: 14px 26px;
  }

  .dots-rule {
    padding: 40px 0;
  }
}

/* --- Small phone: <=380px ----------------------------------------------- */
@media (max-width: 380px) {
  .card__col {
    padding: 10px 4px;
  }

  .chip {
    padding: 0 18px;
  }
}

/* ==========================================================================
   13. Motion & print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marquee__track {
    animation: none;
    /* Without the animation the track sits at 0 and the duplicate half is
       simply cropped, which is exactly what we want. */
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Without JS both project lists must stay readable. */
.no-js .tab-panel[hidden] {
  display: flex;
}

.no-js .tabs {
  display: none;
}

@media print {
  .marquee,
  .hero__veil,
  .contact__veil,
  .skip-link {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}