/* Namaste Overseas — Apple 2026 / iOS liquid glass
   Light grouped surfaces, SF-style type, continuous corners, and translucent materials.
   Brand tint stays the cover blue. Type uses the system face, then Helvetica. */

:root {
  --md-sys-color-primary: #1500ff;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: rgba(21, 0, 255, 0.1);
  --md-sys-color-on-primary-container: #1500ff;
  --icon-color: #1201f5;
  --icon-base: #e8eefd;
  --md-sys-color-surface: #f5f5f7;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f5f5f7;
  --md-sys-color-surface-container: #e8e8ed;
  --md-sys-color-surface-container-high: #dcdcE2;
  --md-sys-color-on-surface: #1d1d1f;
  --md-sys-color-on-surface-variant: #6e6e73;
  --md-sys-color-outline: rgba(60, 60, 67, 0.29);
  --md-sys-color-outline-variant: rgba(60, 60, 67, 0.12);
  --md-sys-color-inverse-surface: #1d1d1f;
  --md-sys-color-inverse-on-surface: #f5f5f7;
  --md-sys-color-error: #ff3b30;
  --md-sys-shape-corner-extra-small: 12px;
  --md-sys-shape-corner-small: 16px;
  --md-sys-shape-corner-medium: 22px;
  --md-sys-shape-corner-large: 28px;
  --md-sys-shape-corner-full: 999px;
  --md-sys-elevation-1: 0 10px 30px rgba(0, 0, 0, 0.06);
  --md-ref-typeface: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --header: 64px;
  --page: 1220px;
  --gutter: 40px;
  --header-line: linear-gradient(100deg, #0a0092 0%, #1500ff 32%, #3a4bff 58%, #1500ff 80%, #0a0092 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--md-ref-typeface);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
}
/* overflow-x: hidden above makes html and body scroll containers, which stops
   the sticky header from pinning to the viewport. clip blocks the same sideways
   overflow without creating a scroll container, so the header stays put. */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
::selection { background: var(--md-sys-color-primary-container); }

.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 80;
  padding: 10px 16px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.wrap { width: min(var(--page), calc(100% - var(--gutter))); margin-inline: auto; }
body[data-page="home"] main > .section .wrap:not(.wrap-narrow),
body[data-page="home"] .site-footer .wrap {
  /* Left edge lines up with the Namaste Overseas wordmark, and the right
     inset matches it. 40px is the logo's margin plus the icon beside the type. */
  width: min(1139px, calc(100% - 121px));
}
.wrap-narrow { width: min(720px, calc(100% - var(--gutter))); margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #1d1d1f;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1d1d1f;
  -webkit-text-fill-color: currentColor;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.eyebrow:hover {
  color: #1500ff;
  border-color: #1500ff;
}
.lede, .section-lead {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 17px;
  line-height: 1.47;
  max-width: 40rem;
}
h1, h2, h3, .serif { font-family: var(--md-ref-typeface); font-weight: 500; letter-spacing: -0.022em; }
h1 { font-size: clamp(2.5rem, 4.4vw, 3.25rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 2.8vw, 2.35rem); line-height: 1.15; }
/* Section titles are medium and black. Only the marked word carries the blue gradient. */
h1, h2 {
  color: #000;
  font-weight: 500;
  background-image: none;
  -webkit-text-fill-color: currentColor;
}
.hl {
  background-image: var(--header-line);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
h3 { font-size: 1.125rem; line-height: 1.35; font-weight: 500; letter-spacing: -0.014em; }

.section { padding: 88px 0; }
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(14rem, 0.8fr);
  align-items: center;
  justify-items: start;
  column-gap: 48px;
  row-gap: 10px;
  text-align: left;
  width: 100%;
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #c7c7cc;
}
.section-head h1,
.section-head h2 { grid-column: 1; margin: 0; text-align: left; }
.section-head p {
  grid-column: 2;
  justify-self: end;
  margin: 0;
  max-width: 34rem;
  text-align: right;
  color: var(--md-sys-color-on-surface-variant);
}
.section-head .eyebrow {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: none;
  margin: 0;
  text-align: left;
  color: #1d1d1f;
  border-color: #1d1d1f;
  background: transparent;
}
.section-head .eyebrow:hover {
  color: #1500ff;
  border-color: #1500ff;
}
.india-copy .eyebrow {
  margin: 0 0 14px;
  padding: 5px 12px;
  text-align: left;
  max-width: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.47;
  letter-spacing: 0.08em;
}
.section-head:has(#make-title) {
  grid-template-columns: 1fr;
}
.section-head:has(#make-title) p {
  grid-column: 1;
  justify-self: stretch;
  max-width: none;
  text-align: left;
}
.who-intro {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 16px;
  width: min(40rem, 100%);
  margin-inline: auto;
}
.who-intro h1,
.who-intro h2 { max-width: 16em; font-size: clamp(1.75rem, 2.8vw, 2.35rem); line-height: 1.15; }
.who-intro p { margin: 0; color: var(--md-sys-color-on-surface-variant); }
.who-intro .eyebrow { margin-bottom: 0; max-width: none; color: #1d1d1f; }
.who-intro .eyebrow:hover { color: #1500ff; border-color: #1500ff; }
.who-intro a:not(.btn) { color: var(--md-sys-color-primary); }
.paper { background: var(--md-sys-color-surface-container-low); }
/* Quiet break between sections: white, then a cool wash. The hero and the
   blue make band keep their own backgrounds. */
main > .section:not(.make-band):nth-of-type(odd) {
  background: #ffffff;
}
main > .section:not(.make-band):nth-of-type(even) {
  background: #f3f5fb;
}
main > .section.is-tint:not(.make-band) {
  background: #f2f4fe;
}
.section.make-band {
  position: relative;
  margin-top: -72px;
  padding-top: 160px;
  background:
    radial-gradient(640px 420px at 22% 58%, rgba(255, 255, 255, 0.34), transparent 62%),
    radial-gradient(520px 380px at 78% 70%, rgba(210, 220, 255, 0.7), transparent 64%),
    linear-gradient(165deg, #0e00c4 0%, #1500ff 46%, #5c6cff 100%);
  color: #fff;
}
.section.make-band::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  height: 148px;
  background: linear-gradient(to bottom, var(--md-sys-color-surface), transparent);
  pointer-events: none;
}
.section.make-band > .wrap { position: relative; z-index: 1; }
.make-band .section-head p { color: rgba(255, 255, 255, 0.86); }
/* Closing line beneath the category accordion. Deliberately plain black rather
   than the usual muted body colour, so it reads as a statement and not as a
   caption for the cards above it. */
.make-note {
  width: min(46rem, 100%);
  margin: 56px auto 0;
  text-align: center;
  color: #000;
}
/* Body copy under the categories stays solid black, separate from the heading gradient. */
.make-note p {
  margin: 0;
  color: #000;
  -webkit-text-fill-color: #000;
  font-family: var(--md-ref-typeface);
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.012em;
  line-height: 1.47;
}
.collection-board {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr);
  gap: 28px;
  align-items: stretch;
  padding: 18px 18px 18px 22px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.06), 0 0 0 1px rgba(29, 29, 31, 0.06);
}
.collection-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 8px 8px 8px 4px;
}
.collection-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 4px;
  border-top: 1px solid rgba(60, 60, 67, 0.1);
  color: inherit;
  text-decoration: none;
}
.collection-row:first-child { border-top: 0; }
.collection-index {
  color: #1500ff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.collection-text h3 {
  margin: 0;
  color: #1d1d1f;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  transition: color 0.35s ease;
}
.collection-text p {
  margin: 4px 0 0;
  color: #6e6e73;
  font-size: 13.5px;
  line-height: 1.4;
}
.collection-row:hover h3,
.collection-row:focus-visible h3 { color: #1500ff; }
.collection-row:hover .cover-go,
.collection-row:focus-visible .cover-go {
  background: #1500ff;
  border-color: #1500ff;
  color: #fff;
}
.collection-row:hover .cover-go svg,
.collection-row:focus-visible .cover-go svg { transform: rotate(-45deg); }
.collection-photos {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.9fr;
  grid-template-rows: 1fr 1fr 0.92fr;
  gap: 10px;
  height: 100%;
  min-height: 460px;
}
.collection-photos a {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
}
.collection-photos a:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.collection-photos a:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
.collection-photos a:nth-child(3) { grid-column: 2; grid-row: 2; }
.collection-photos a:nth-child(4) { grid-column: 3; grid-row: 2 / 4; }
.collection-photos a:nth-child(5) { grid-column: 1 / 3; grid-row: 3; }
.collection-photos img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.collection-photos a:hover img,
.collection-photos a:focus-visible img { transform: scale(1.06); }
.collection-board:has(.collection-row:nth-child(1):hover) .collection-photos a:nth-child(1) img,
.collection-board:has(.collection-row:nth-child(2):hover) .collection-photos a:nth-child(2) img,
.collection-board:has(.collection-row:nth-child(3):hover) .collection-photos a:nth-child(3) img,
.collection-board:has(.collection-row:nth-child(4):hover) .collection-photos a:nth-child(4) img,
.collection-board:has(.collection-row:nth-child(5):hover) .collection-photos a:nth-child(5) img { transform: scale(1.06); }

/* Two across on the first row, three across on the second. A six-column
   track lets the first pair take half each and the last three take a third. */
.make-cluster {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-inline: auto;
  align-items: stretch;
}
.make-cluster > .cover-card:nth-child(-n + 2) { grid-column: span 3; }
.make-cluster > .cover-card:nth-child(n + 3) { grid-column: span 2; }
.cover-card {
  min-width: 0;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.06), 0 0 0 1px rgba(29, 29, 31, 0.06);
  overflow: hidden;
}
.cover-card a {
  display: block;
  height: 100%;
  padding: 12px;
  color: inherit;
  text-decoration: none;
}
.cover-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
}
.cover-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.cover-card:hover img,
.cover-card:focus-within img {
  transform: scale(1.06);
}
.cover-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 14px 6px 4px;
}
.cover-card h3 {
  margin: 0;
  color: #1d1d1f;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: color 0.35s ease;
}
.cover-copy p {
  margin: 4px 0 0;
  color: #6e6e73;
  font-size: 13.5px;
  line-height: 1.4;
}
.cover-copy .cover-sub {
  margin-top: 2px;
  color: #1500ff;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cover-go {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(29, 29, 31, 0.28);
  background: #fff;
  color: #1d1d1f;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.cover-go svg {
  display: block;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.cover-card:hover h3,
.cover-card:focus-within h3 {
  color: #1500ff;
}
.cover-card:hover .cover-go,
.cover-card:focus-within .cover-go {
  background: #1500ff;
  border-color: #1500ff;
  color: #fff;
}
.cover-card:hover .cover-go svg,
.cover-card:focus-within .cover-go svg {
  transform: rotate(-45deg);
}
.catalogue {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.catalogue:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
.catalogue .cover-frame { aspect-ratio: 1; }
.catalogue .cover-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.catalogue .cover-frame.is-pack {
  background: radial-gradient(ellipse at 50% 58%, #ffffff 0%, #e6e2f8 78%);
}
.catalogue .cover-frame.is-pack img {
  object-fit: contain;
  padding: 0;
  mix-blend-mode: multiply;
  transform: scale(1.18);
}
.catalogue .cover-card:hover .cover-frame.is-pack img,
.catalogue .cover-card:focus-within .cover-frame.is-pack img {
  transform: scale(1.24);
}
.catalogue .cover-frame.is-zoom img { transform: scale(1.62); }
.catalogue .cover-card:hover .cover-frame.is-zoom img,
.catalogue .cover-card:focus-within .cover-frame.is-zoom img {
  transform: scale(1.68);
}
.catalogue .cover-copy p { display: none; }
.spec-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.spec-points li {
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(21, 0, 255, 0.14);
  color: #1d1d1f;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cover-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 6px 16px rgba(20, 20, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: #1d1d1f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}
.stack-card {
  position: relative;
  min-width: 0;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.06), 0 0 0 1px rgba(29, 29, 31, 0.06);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
.stack-card:hover,
.stack-card:focus-within {
  z-index: 3;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(20, 20, 40, 0.1), 0 0 0 1px rgba(29, 29, 31, 0.06);
}
.stack-card a {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  min-height: 280px;
  padding: 18px 8px 18px 22px;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}
.stack-copy {
  position: relative;
  z-index: 4;
  flex: 1;
  min-width: 0;
  padding: 8px 4px 8px 0;
}
.stack-card .kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(21, 0, 255, 0.12);
  color: #1500ff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  overflow: visible;
}
.stack-card h3 {
  margin: 10px 0 6px;
  color: #1d1d1f;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
}
.stack-card .stack-copy p:not(.kicker) {
  margin: 0;
  color: #6e6e73;
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.photo-stack {
  position: relative;
  flex: 0 0 46%;
  align-self: stretch;
  min-height: 230px;
  margin: 0;
}
.photo-stack .shot {
  position: absolute;
  left: 12%;
  top: 50%;
  width: 74%;
  height: 148px;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(20, 20, 40, 0.16);
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease;
}
.photo-stack .shot:nth-child(1) {
  z-index: 1;
  transform: translate(-16px, calc(-50% + 12px)) rotate(-16deg);
}
.photo-stack .shot:nth-child(2) {
  z-index: 2;
  transform: translate(18px, calc(-50% + 16px)) rotate(14deg);
}
.photo-stack .shot:nth-child(3) {
  z-index: 3;
  left: 9%;
  width: 80%;
  height: 158px;
  transform: translate(0, -50%) rotate(-3deg);
}
.photo-stack .shot.shot-fit {
  left: 20%;
  width: 56%;
  height: 196px;
  object-fit: cover;
  object-position: center center;
}
.photo-stack .shot.shot-square {
  left: 16%;
  width: 66%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.stack-card:hover .shot:nth-child(1),
.stack-card:focus-within .shot:nth-child(1) {
  transform: translate(-34px, calc(-50% - 18px)) rotate(-22deg);
  box-shadow: 0 18px 32px rgba(20, 20, 40, 0.2);
}
.stack-card:hover .shot:nth-child(2),
.stack-card:focus-within .shot:nth-child(2) {
  transform: translate(36px, calc(-50% - 10px)) rotate(18deg);
  box-shadow: 0 18px 32px rgba(20, 20, 40, 0.2);
}
.stack-card:hover .shot:nth-child(3),
.stack-card:focus-within .shot:nth-child(3) {
  transform: translate(0, calc(-50% - 28px)) rotate(0deg) scale(1.05);
  box-shadow: 0 22px 36px rgba(20, 20, 40, 0.22);
}

.make-band .section-head { margin-bottom: 16px; }
.make-band .product-card {
  position: relative;
  padding: 12px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.1) 28%, rgba(255, 255, 255, 0.16) 100%);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-bottom-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 18px 40px rgba(6, 0, 70, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -18px 28px rgba(21, 0, 255, 0.16);
  backdrop-filter: blur(28px) saturate(1.85);
  -webkit-backdrop-filter: blur(28px) saturate(1.85);
  transition: flex-grow 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s, box-shadow 0.35s;
}
.make-band .product-card a {
  display: flex;
  align-items: stretch;
  gap: 14px;
  height: 100%;
  min-height: 0;
}
.make-band .card-split a { flex-direction: row-reverse; }
.make-band .card-stack a { flex-direction: column; }
.make-band .product-card-media {
  overflow: hidden;
  aspect-ratio: auto;
  min-height: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);
}
.make-band .card-split .product-card-media {
  flex: 0 0 46%;
  width: 46%;
  height: auto;
  align-self: stretch;
}
.make-band .card-stack .product-card-media {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
}
.make-band .product-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 4px 4px 6px;
  text-align: left;
}
.make-band .card-stack .product-card-body { flex: 0 0 auto; padding: 10px 6px 2px; }
.make-band .product-card:hover {
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 24px 48px rgba(6, 0, 70, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -18px 28px rgba(21, 0, 255, 0.12);
}
.make-band .product-card-media img[src*="heritage"] {
  background: transparent;
  object-fit: cover;
}
.make-band .product-card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.make-band .product-card h3,
.make-band .card-link { color: #fff; }
.make-band .product-card p,
.make-band .kicker { color: rgba(255, 255, 255, 0.78); }
.make-band h2 {
  background-image: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.make-band .hl {
  background-image: linear-gradient(135deg, #ffffff 0%, #d7dcff 100%);
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ink {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}
.ink p, .ink .process-step p { color: var(--md-sys-color-on-surface-variant); }
.ink .eyebrow {
  color: #1d1d1f;
  background: transparent;
}
main > section.section.ink:has(.cta-band) .eyebrow {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.72);
}
main > section.section.ink:has(.cta-band) .eyebrow:hover {
  color: #fff;
  border-color: #fff;
}
.ink .process-step { border-top-color: var(--md-sys-color-outline-variant); }
.ink .step-index { color: var(--md-sys-color-primary); }

.btn, .btn-primary, .btn-line, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 45px;
  height: 45px;
  min-width: 190px;
  padding: 0 30px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
  border-radius: var(--md-sys-shape-corner-full);
}
.nav-btn { width: auto; }
.btn-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: 0;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-line, .btn-ghost {
  border: 0;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
}
.btn-line:hover, .btn-ghost:hover { background: rgba(21, 0, 255, 0.16); }
.btn-metal,
.hero-cover .btn-metal,
.site-header .nav-btn.btn-metal,
.site-header--on-cover:not(.is-on-light) .nav-btn.btn-metal,
.mobile-menu-actions .btn-metal {
  --metal-fill: #1500ff;
  position: relative;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--metal-fill), var(--metal-fill)) padding-box,
    conic-gradient(from var(--metal-angle), #1500ff, #8ea0ff, #ffffff, #3a28ff, #1500ff, #6d7cff, #ffffff, #1500ff) border-box;
  color: #fff;
  box-shadow: 0 0 18px rgba(21, 0, 255, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.16);
  animation: metal-spin 5s linear infinite;
}
.hero-cover .btn-metal {
  --metal-fill: #ffffff;
  color: #1500ff;
}
.hero-cover .btn-metal:hover {
  --metal-fill: #f4f4ff;
  color: #1500ff;
}
.btn-metal:hover,
.site-header .nav-btn.btn-metal:hover {
  --metal-fill: #2a16ff;
  filter: none;
  color: #fff;
}
@property --metal-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes metal-spin {
  to { --metal-angle: 360deg; }
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions:has(> .btn + .btn) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: max-content;
  max-width: 100%;
}
.page-hero .actions:has(> .btn + .btn) { margin-inline: auto; }
@media (max-width: 560px) {
  .actions:has(> .btn + .btn) { grid-auto-flow: row; }
}

.site-header {
  position: sticky;
  top: 18px;
  z-index: 50;
  width: min(var(--page), calc(100% - var(--gutter)));
  margin: 18px auto 0;
  color: #1d1d1f;
}
.site-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 14px 0 14px;
  gap: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.site-header.is-on-light .site-bar,
.site-header:not(.site-header--on-cover) .site-bar {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(32px) saturate(1.7);
  -webkit-backdrop-filter: blur(32px) saturate(1.7);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.site-header--on-cover:not(.is-on-light) .site-bar {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.logo {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.logo::after,
.footer-logo::after {
  content: "™";
  position: absolute;
  left: 100%;
  color: #1500ff;
  font-size: 8px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}
.logo::after { top: 15px; }
.logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #1500ff;
  pointer-events: none;
  -webkit-mask: url("Assets/LOGOS%20/NA-%20white.svg") center / contain no-repeat;
  mask: url("Assets/LOGOS%20/NA-%20white.svg") center / contain no-repeat;
}
.site-header--on-cover:not(.is-on-light) .logo::before,
.site-header.is-on-dark .logo::before { background: #fff; }
.site-header--on-cover:not(.is-on-light) .logo::after,
.site-header.is-on-dark .logo::after { color: #fff; }
.logo img {
  height: 34px;
  width: auto;
  display: block;
  opacity: 0;
}
.site-header--on-cover .logo {
  margin-left: 3px;
}
.nav-desktop { display: none; align-items: center; gap: 8px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  color: #1500ff;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link[aria-current="page"],
.nav-link.is-section { background: rgba(21, 0, 255, 0.08); color: #1500ff; }
.site-header--on-cover:not(.is-on-light) .nav-desktop .nav-link,
.site-header.is-on-dark .nav-desktop .nav-link { color: #fff; }
.site-header--on-cover:not(.is-on-light) .nav-desktop .nav-link:hover,
.site-header--on-cover:not(.is-on-light) .nav-desktop .nav-link[aria-current="page"],
.site-header--on-cover:not(.is-on-light) .nav-desktop .nav-link.is-section,
.site-header.is-on-dark .nav-desktop .nav-link:hover,
.site-header.is-on-dark .nav-desktop .nav-link[aria-current="page"],
.site-header.is-on-dark .nav-desktop .nav-link.is-section {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.nav-link-sub { padding-left: 22px; color: #6e6e73; }
.nav-btn { min-height: 45px; height: 45px; min-width: 0; padding: 0 26px; }
.site-header .nav-btn.btn-line {
  border: 0;
  color: #1500ff;
  background: rgba(21, 0, 255, 0.08);
}
.site-header .nav-btn.btn-primary:not(.btn-metal) {
  background: #1500ff;
  color: #fff;
  border: 0;
}
.site-header--on-cover:not(.is-on-light) .nav-btn.btn-line {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.site-header--on-cover:not(.is-on-light) .nav-btn.btn-primary:not(.btn-metal) {
  background: #fff;
  color: #1500ff;
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 999px;
  border: 1px solid rgba(21, 0, 255, 0.18);
  background: rgba(21, 0, 255, 0.06);
  color: #1500ff;
}
.site-header--on-cover:not(.is-on-light) .nav-toggle,
.site-header.is-on-dark .nav-toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
}
.site-header--on-cover,
.site-header--on-cover.is-scrolled {
  top: 28px;
  width: min(var(--page), calc(100% - var(--gutter)));
}
.site-header--on-cover .site-bar,
.site-header--on-cover.is-on-light .site-bar {
  position: relative;
  height: auto;
  padding: 0;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header--on-cover .site-bar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -4px -6px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(32px) saturate(1.7);
  -webkit-backdrop-filter: blur(32px) saturate(1.7);
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, border-color 0.35s ease;
  pointer-events: none;
}
.site-header--on-cover:not(.is-on-light) .site-bar::before {
  border: 0;
  background: rgba(8, 6, 36, 0.46);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
body[data-page="home"] .site-header--on-cover:not(.is-on-light) .nav-btn.btn-line {
  background: #001aff;
  color: #fff;
}
.site-header--on-cover .logo::before,
.site-header--on-cover .logo::after,
.site-header--on-cover .nav-desktop .nav-link {
  transition: color 0.35s ease, background-color 0.35s ease;
}
.site-header--on-cover.is-scrolled .site-bar::before {
  opacity: 1;
  transform: scale(1);
}
.site-header--on-cover .nav-desktop .nav-link {
  color: #353535;
  font-size: 15px;
  font-weight: 400;
  background: transparent;
}
.site-header--on-cover .nav-desktop .nav-link[aria-current="page"],
.site-header--on-cover .nav-desktop .nav-link.is-section {
  background: transparent;
  color: #001aff;
}
.site-header--on-cover .nav-desktop .nav-link:hover {
  background: rgba(21, 0, 255, 0.08);
  color: #1500ff;
}
.site-header--on-cover .nav-btn.btn-line {
  min-height: 45px;
  height: 45px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #001aff;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.site-header--on-cover .nav-desktop .nav-btn.btn-metal { display: none; }
.nav-metal { display: inline-flex; align-items: center; height: 45px; }
.nav-metal .metal-fx-root,
.nav-metal .metal-fx-root[data-theme="dark"],
.nav-metal .metal-fx-root[data-theme="light"] {
  background: transparent;
  color: #fff;
  border-radius: 999px;
}
/* The ring's visible thickness is the gap between the metal canvas and this
   inner fill, which the library pins at 3px inline and in its own injected
   stylesheet — hence the overrides. Keep this in step with the ringCssPx passed
   in src/quote-metal.tsx, or the stroke and the fill leave a gap between them. */
.nav-metal .metal-fx-inner {
  background: #001aff;
  inset: 1px !important;
  border-radius: calc(var(--mfx-radius, 22px) - 1px) !important;
}
.nav-metal .metal-fx-content > a {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.menu-toggle-icon { display: grid; width: 18px; gap: 5px; }
.menu-toggle-icon span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .3s ease;
}
.nav-toggle[aria-expanded="true"] .menu-toggle-icon span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .menu-toggle-icon span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu {
  display: none;
  position: fixed;
  inset: 84px 0 0;
  z-index: 50;
  border-radius: 28px 28px 0 0;
  background: rgba(245, 245, 247, 0.72);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  overflow: auto;
}
.site-header.is-open .mobile-menu { display: block; }
.mobile-menu-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 100%;
  padding: 16px;
}
.mobile-menu-links, .mobile-menu-actions { display: grid; gap: 8px; }
.mobile-menu-links .nav-link { height: 44px; color: #1500ff; }
.mobile-menu-links .nav-link-sub { color: #6e6e73; }
.mobile-menu-links .nav-link:hover,
.mobile-menu-links .nav-link[aria-current="page"],
.mobile-menu-links .nav-link.is-section { background: rgba(21, 0, 255, 0.08); color: #1500ff; }
.mobile-menu-actions .btn-line {
  border: 0;
  color: #1500ff;
  background: rgba(21, 0, 255, 0.1);
}
.mobile-menu-actions .btn-primary:not(.btn-metal) {
  background: #1500ff;
  color: #fff;
  border: 0;
}
.mobile-menu-actions .btn { width: 100%; }

.hero { padding: 56px 0 40px; }
.hero-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  margin-top: calc((var(--header) + 18px) * -1);
  padding: calc(var(--header) + 88px) 16px 12px;
  overflow: visible;
  color: #353535;
  background: #ffffff;
}
.hero-cover:not(.about-banner) {
  justify-content: center;
}
/* Leave the scrolling bar inside the first screen, under the header.
   The content box starts at the nav pill and ends at the ticker, so the
   headline and the quote button get the same gap on either side. */
body[data-page="home"] .hero-cover {
  /* The cover starts 18px above the window, so it has to be that much
     taller than the screen for its bottom edge to land on the fold. */
  min-height: calc(100svh + 18px);
  padding-top: calc(var(--header) + 52px);
  padding-bottom: 176px;
  background: #ffffff;
}
.stat-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  font-family: var(--md-ref-typeface);
}
.stat-bar ul {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background:
    linear-gradient(180deg, rgba(228, 232, 255, 0.35) 0%, rgba(255, 255, 255, 0.96) 38%, #fff 100%);
  border-bottom: 1px solid rgba(60, 60, 67, 0.06);
}
.stat-bar ul::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(21, 0, 255, 0.28), transparent);
}
.stat-bar li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 112px;
  padding: 18px 20px 16px;
  text-align: center;
}
.stat-bar li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  height: auto;
  transform: none;
  background: linear-gradient(to bottom, transparent, rgba(21, 0, 255, 0.22), transparent);
}
.stat-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--icon-color);
  background: var(--icon-base);
}
.stat-icon svg { display: block; width: 20px; height: 20px; }
.stat-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.stat-figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin: 0;
  color: #1500ff;
  font-family: var(--md-ref-typeface);
  font-size: clamp(1.7rem, 2.1vw, 2.05rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}
.stat-figure strong,
.stat-figure small { font-weight: 600; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .stat-figure,
  .stat-figure strong,
  .stat-figure small {
    background-image: linear-gradient(100deg, #0a0092 0%, #1500ff 46%, #4d5cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.stat-figure small {
  font-size: 0.46em;
  letter-spacing: -0.02em;
}
.stat-copy > span {
  color: #6e6e73;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}
.hero-cover::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 86%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 88% 100% at 50% 0%, #c9d0ff 0%, rgba(228, 232, 255, 0.78) 48%, rgba(255, 255, 255, 0) 92%);
}
body[data-page="home"] .hero-cover::before {
  background:
    linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.6) 22%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(ellipse 88% 100% at 50% 0%, #dfe3ff 0%, rgba(236, 239, 255, 0.7) 48%, rgba(255, 255, 255, 0) 92%);
}
.hero-cover .wrap {
  position: relative;
  z-index: 2;
  width: min(var(--page), 100%);
  max-width: var(--page);
  margin: 0 auto;
  text-align: center;
}
.about-banner .crumbs { padding-top: 0; margin-bottom: 18px; }
.about-banner .crumbs ol { justify-content: center; }
.about-banner h1 {
  max-width: 14em;
  margin-inline: auto;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
}
.about-banner .lede {
  max-width: 38rem;
  margin: 16px auto 0;
  color: #353535;
  font-size: 17px;
  line-height: 1.5;
}
.hero-cover.about-banner h1 { margin-inline: auto; }
.hero-cover.about-banner {
  margin-top: calc((var(--header) + 18px) * -1);
  padding-top: calc(var(--header) + 72px);
}
@media (max-width: 720px) {
  .hero-cover.about-banner { padding-top: calc(var(--header) + 52px); }
}
.about-jump { margin-top: 22px; }
.hero-globe-crop {
  position: relative;
  z-index: 1;
  --globe: min(1080px, 94vw);
  width: var(--globe);
  height: calc(var(--globe) / 2);
  margin: calc(2px - var(--globe) * 0.09) auto 0;
  overflow: hidden;
  cursor: move;
  touch-action: none;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .hero-globe-crop.has-move-cursor,
  .hero-globe-crop.has-move-cursor canvas { cursor: none; }
}
.hero-globe-cursor {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 84px;
  height: 60px;
  margin: -30px 0 0 -42px;
  color: #1500ff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hero-globe-cursor svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 2px #fff);
}
.hero-globe-cursor b {
  padding: 4px 8px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(21, 0, 255, 0.1);
  transition: scale 0.2s ease;
}
.hero-globe-cursor.is-on { opacity: 1; }
.hero-globe-crop.is-grabbing .hero-globe-cursor b { scale: 0.9; }
.hero-globe-crop::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 78%);
  pointer-events: none;
}
.hero-globe-crop.is-backdrop {
  --span: min(var(--page), calc(100vw - var(--gutter)));
  --globe: calc(var(--span) * 1.4);
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  pointer-events: none;
  cursor: default;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.5) 18%, #000 42%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.5) 18%, #000 42%);
}
.hero-globe-crop.is-backdrop::after {
  top: 0;
  z-index: 3;
  height: auto;
  background:
    radial-gradient(ellipse 46% 42% at 50% 34%, rgba(242, 244, 255, 0.9) 0%, rgba(242, 244, 255, 0.62) 55%, rgba(242, 244, 255, 0) 100%),
    linear-gradient(to bottom, rgba(242, 244, 255, 0.35), rgba(242, 244, 255, 0) 70%);
}
.hero-globe-crop.is-backdrop::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -18%;
  width: calc(var(--span) * 1.15);
  height: 110%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 168, 255, 0.55), rgba(190, 202, 255, 0.32) 55%, rgba(220, 226, 255, 0) 100%);
  filter: blur(48px);
  pointer-events: none;
}
.hero-globe-crop.is-backdrop .hero-globe { z-index: 1; }
.hero-globe-crop.is-backdrop canvas { cursor: default; }
.hero-globe-crop.is-backdrop .hero-globe {
  width: var(--globe);
  margin-left: calc((100% - var(--globe)) / 2);
  margin-top: 64px;
}
.hero-globe-crop.is-backdrop .hero-globe.is-ready canvas { opacity: 0.85; }
.hero-globe-dot {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: url("Assets/LOGOS%20/na-mark-blue.svg") center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-globe-dot.is-on { opacity: 0.4; }
.hero-globe {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  perspective: 980px;
}
.hero-globe > div { z-index: 1; }
.hero-globe canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: move;
  opacity: 0;
  transition: opacity 0.6s ease;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 62%, rgba(0, 0, 0, 0.55) 78%, transparent 98%);
  mask-image: radial-gradient(circle closest-side, #000 62%, rgba(0, 0, 0, 0.55) 78%, transparent 98%);
}
.hero-globe.is-ready canvas { opacity: 1; }
.hero-globe > .hero-globe-mark,
.hero-globe > .hero-globe-place { display: none; }
.hero-globe-pin {
  position: absolute;
  z-index: 2;
  width: min(32px, 7%);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.35s ease;
}
.hero-globe-pin.is-on { opacity: 1; }
.hero-globe-pin.is-label { z-index: 3; }
.hero-globe-pin img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 8px rgba(21, 0, 255, 0.16));
}
.hero-globe-flag {
  position: absolute;
  top: 0;
  right: -7px;
  font-style: normal;
  font-size: 11px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.9));
}
.hero-globe-pin span {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 3px 8px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #1500ff;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--tag-x, 0px), var(--tag-y, 0px));
  box-shadow: 0 6px 16px rgba(21, 0, 255, 0.08);
  transition: opacity 0.35s ease;
}
.hero-globe-pin.is-label span { opacity: 1; }
.hero-cover h1 {
  margin: 0;
  color: #000;
  font-weight: 500;
  font-size: clamp(2.15rem, 4.5vw, 4.15rem);
  letter-spacing: 0.01em;
  line-height: 1.16;
  background-image: none;
  -webkit-text-fill-color: currentColor;
}
body[data-page="home"] .hero-cover h1 {
  width: fit-content;
  margin-inline: auto;
  font-size: clamp(1.95rem, 6.9vw, 2.85rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.94;
  background-image: linear-gradient(120deg, #000000 0%, #000f99 42%, #001aff 100%);
}
@media (min-width: 721px) {
  body[data-page="home"] .hero-cover h1 {
    font-size: clamp(3.75rem, 6.6vw, 6.15rem);
  }
}
/* Guarded so the headline falls back to solid brand blue rather than
   disappearing where background-clip: text is unsupported. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  body[data-page="home"] .hero-cover h1 {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}
@property --glow-x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: -40%;
}
@property --glow-y {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
body[data-page="home"] .hero-cover h1 {
  background-image:
    radial-gradient(circle 11rem at var(--glow-x) var(--glow-y), rgba(110, 140, 255, 0.95), rgba(110, 140, 255, 0) 70%),
    linear-gradient(120deg, #000000 0%, #000f99 42%, #001aff 100%);
  transition: --glow-x 0.5s cubic-bezier(0.22, 1, 0.36, 1), --glow-y 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hero-glow-sweep {
  from { --glow-x: -40%; --glow-y: 30%; }
  to { --glow-x: 140%; --glow-y: 70%; }
}
.hero-cover .hero-sub {
  margin: 12px 0 0;
  color: #353535;
  font-weight: 300;
  font-size: clamp(1.7rem, 3.6vw, 3.4rem);
  letter-spacing: -0.014em;
  line-height: 1.22;
}
body[data-page="home"] .hero-cover .hero-sub {
  margin-top: 12px;
  font-size: clamp(1.56rem, 3.3vw, 3.1rem);
}
body[data-page="home"] .hero-cta {
  margin-top: 44px;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 22px auto 0;
  box-sizing: border-box;
  height: 45px;
  padding: 0 4px 0 18px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--metal-angle), #d5deff, #ffffff, #001aff, #9eb4ff, #ffffff, #d5deff) border-box;
  color: #001aff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(120, 150, 255, 0.45);
  animation: metal-spin 4.5s linear infinite;
}
.hero-cta:hover {
  box-shadow: 0 12px 32px rgba(90, 130, 255, 0.55);
}
.hero-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #001aff;
  color: #fff;
  transition: transform 0.25s ease, background 0.25s ease;
}
.hero-cta:hover .hero-cta-icon {
  background: #1500ff;
  transform: translateX(3px);
}
.hero-cta svg { display: block; }

.sr-only {
  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;
}

/* Hero category rotator. Words share one grid cell so the box is sized by the
   longest phrase and the headline above it never shifts between words. */
.hero-rotator-stack {
  display: inline-grid;
  grid-template-areas: "word";
  vertical-align: top;
}
.hero-word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
  grid-area: word;
  justify-self: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(5px);
  /* Idle and outgoing words clear quickly... */
  transition:
    opacity 0.28s ease-in,
    transform 0.28s ease-in,
    filter 0.28s ease-in;
  will-change: opacity, transform, filter;
}
.hero-word-frame {
  display: block;
  width: 1.55em;
  height: 1.55em;
  flex: none;
  padding: 0.11em;
  border-radius: 0.46em;
  background: #fff;
  box-shadow: 0 8px 16px rgba(40, 40, 80, 0.16);
  overflow: hidden;
}
.hero-word-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0.34em;
  display: block;
}
/* ...and the incoming word waits for that to finish, so only one phrase is
   ever legible at a time. */
.hero-word.is-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
    filter 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
/* The outgoing word leaves upward so the sequence reads as one moving line. */
.hero-word.is-leaving {
  transform: translateY(-0.4em);
}

@media (prefers-reduced-motion: reduce) {
  .hero-word,
  .hero-word.is-active,
  .hero-word.is-leaving {
    transform: none;
    filter: none;
    transition: opacity 0.2s linear;
  }
  .hero-word.is-active { transition-delay: 0.2s; }
  .hero-cta-icon { transition: none; }
  .cover-card img,
  .case-card img,
  .case-grid .case-card { transition: none; transform: none; }
  .case-copy h3 { transition: none; }
  .cover-card h3,
  .cover-go,
  .cover-go svg { transition: none; }
  .cover-go svg,
  .cover-card:hover .cover-go svg,
  .cover-card:focus-within .cover-go svg { transform: rotate(0deg); }
}

.page-hero + .ticker {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.ticker {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 32s linear infinite;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker ul {
  display: flex;
  align-items: center;
  gap: 48px;
  margin: 0;
  padding: 16px 24px;
  list-style: none;
}
.ticker li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
}
.ticker svg {
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: 999px;
  background: #e4e9ff;
  flex: none;
  color: #001aff;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* One continuous line of tags. The mask fades both ends so tags enter and leave
   without a hard cut at the section edge. */
.tag-marquee {
  margin: 18px 0 0;
  padding: 10px 0 16px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.tag-marquee-track {
  display: flex;
  width: max-content;
  animation: tag-marquee 44s linear infinite;
}
.tag-marquee:hover .tag-marquee-track,
.tag-marquee:focus-within .tag-marquee-track { animation-play-state: paused; }
/* The side padding is half the gap, so the join between the two copies keeps the
   same spacing as the tags within a copy. */
.tag-marquee ul {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 6px;
  list-style: none;
}
.tag-marquee li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  border: 1px solid #c5d4ff;
  background: #fff;
  box-shadow: 0 6px 16px rgba(20, 30, 80, 0.08);
  font-size: 14px;
  line-height: 1.3;
  color: var(--md-sys-color-on-surface);
}
.tag-marquee svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 999px;
  background: var(--icon-base);
  box-sizing: border-box;
  flex: none;
  color: var(--icon-color);
}
@keyframes tag-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.hero-grid, .split, .contact-grid, .about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.hero h1 { margin-bottom: 16px; }
.hero .lede { margin-bottom: 24px; }
.hero-cover .lede { margin-bottom: 28px; }
.hero-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  max-width: 38rem;
}
.mosaic { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 8px; }
.mosaic a { text-decoration: none; min-height: 112px; }
.mosaic-photo {
  grid-row: span 3;
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container);
}
.mosaic-photo img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
.mosaic-photo span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  font-size: 12px;
  font-weight: 500;
}
.tone-tile, .product-card-media.tone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  padding: 16px;
  min-height: 112px;
  text-decoration: none;
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-surface);
}
.tone-sand, .tone-clay, .tone-stone, .tone-glass,
.product-card-media.tone-sand, .product-card-media.tone-clay,
.product-card-media.tone-stone, .product-card-media.tone-glass {
  background: var(--md-sys-color-surface-container);
}
.tone-ink, .product-card-media.tone-ink {
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
}
.tone-tile strong { font-size: 1rem; line-height: 1.3; font-weight: 500; }
.tone-tile em {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

.card-grid, .cap-grid, .case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.card-grid > * {
  flex: 0 0 calc((100% - 32px) / 3);
  width: calc((100% - 32px) / 3);
}
.card-grid.cards-2 > * {
  flex-basis: calc((100% - 16px) / 2);
  width: calc((100% - 16px) / 2);
}
.product-card, .capability-card, .case-card, .insight-card {
  background: #fff;
  border: 0;
  border-radius: 26px;
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.06), 0 0 0 1px rgba(29, 29, 31, 0.06);
  min-width: 0;
  overflow: hidden;
}
.product-card a, .insight-card a { display: block; height: 100%; text-decoration: none; }
.product-card a {
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.product-card-media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  background: #f2f2f7;
  overflow: hidden;
}
.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover img,
.product-card:focus-within img { transform: scale(1.06); }
.product-card-media img[src*="heritage"],
.product-card-media img[src*="vase%20images"],
.product-card-media img[src*="vase images"] { object-fit: contain; background: #fff; }
.page-hero:has(+ .category-photo) { padding-bottom: 64px; }
.category-photo {
  position: relative;
  z-index: 1;
  width: min(1040px, calc(100% - 80px));
  margin: -40px auto 0;
  padding: 10px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(20, 20, 40, 0.12), 0 0 0 1px rgba(29, 29, 31, 0.05);
}
.category-photo img {
  display: block;
  width: 100%;
  height: min(460px, 48vw);
  border-radius: 18px;
  object-fit: cover;
}
.category-photo img[src*="salabhanjika-mobile"] {
  object-fit: contain;
  object-position: center;
  height: min(520px, 56vw);
  background: linear-gradient(90deg, #c79d79, #d0a87e);
}
.product-card-media img[src*="salabhanjika-mobile"] {
  object-fit: contain;
  background: linear-gradient(90deg, #c79d79, #d0a87e);
}
.product-card-media.tone span,
.product-card-media span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-small);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  text-shadow: none;
}
.product-card-media.tone-ink span {
  color: var(--md-sys-color-inverse-on-surface);
  background: transparent;
}
.product-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  padding: 14px 6px 4px;
}
.capability-card { padding: 22px; }
.insight-card { padding: 0; }
.case-card { padding: 16px; }
.kicker {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1500ff;
}
.product-card .kicker { grid-column: 1 / -1; margin: 0; }
.product-card h3, .insight-card h3, .case-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0;
  transition: color 0.35s ease;
}
.product-card h3 { grid-column: 1; }
.product-card:hover h3,
.product-card:focus-within h3,
.insight-card:hover h3,
.insight-card:focus-within h3 { color: #1500ff; }
.product-card p, .capability-card p, .case-card p, .insight-card p {
  color: #6e6e73;
  font-size: 13.5px;
  line-height: 1.4;
}
.product-card p { grid-column: 1; margin: 0; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1500ff;
}
.product-card .card-link {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(29, 29, 31, 0.28);
  background: #fff;
  color: #1d1d1f;
  font-size: 0;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.product-card .card-link::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover .card-link,
.product-card:focus-within .card-link {
  background: #1500ff;
  border-color: #1500ff;
  color: #fff;
}
.product-card:hover .card-link::after,
.product-card:focus-within .card-link::after { transform: rotate(-45deg); }
.page-hero:has(+ .insights-board) { padding-bottom: 28px; }
.insights-board { padding-top: 28px; }
.section > .wrap.insights-wrap { display: block; }
.insights-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-bottom: 22px;
}
.insights-toolbar h2 {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}
.insights-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.insights-tags button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(21, 0, 255, 0.16);
  border-radius: 999px;
  background: #fff;
  color: #1500ff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.insights-tags button.is-active {
  background: #1500ff;
  border-color: #1500ff;
  color: #fff;
}
.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.insight-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: 0;
  color: inherit;
}
.insight-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f2f2f7;
}
.insight-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.insight-card:hover img,
.insight-card:focus-within img { transform: scale(1.06); }
.insight-media img[src*="cushion"] { transform: scale(1.24); }
.insight-card:hover .insight-media img[src*="cushion"],
.insight-card:focus-within .insight-media img[src*="cushion"] { transform: scale(1.3); }
.insight-media .kicker {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #1500ff;
  letter-spacing: 0.06em;
}
.insight-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}
.insight-card h3 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.insight-body p { margin: 0; }
.insight-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  color: #6e6e73;
  font-size: 13px;
  font-weight: 500;
}
.insight-card .card-link { margin-top: 0; }
.insights-empty {
  margin: 28px 0 0;
  color: #6e6e73;
  text-align: center;
}
.insights-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}
.insights-pager > button,
.insights-pages button {
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(21, 0, 255, 0.16);
  border-radius: 999px;
  background: #fff;
  color: #1500ff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.insights-pages { display: flex; gap: 8px; }
.insights-pages button.is-active {
  background: #1500ff;
  border-color: #1500ff;
  color: #fff;
}
.insights-pager > button:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (max-width: 979px) {
  .catalogue,
  .catalogue:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
  .insights-toolbar { align-items: flex-start; flex-direction: column; }
  .insights-tags { justify-content: flex-start; }
  .insights-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .catalogue,
  .catalogue:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
  .insights-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .insight-media img { transition: none; }
  .insight-card:hover img,
  .insight-card:focus-within img { transform: none; }
}
.capability-card {
  padding: 22px;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.05), 0 0 0 1px rgba(29, 29, 31, 0.06);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.capability-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(20, 30, 80, 0.08);
}
.capability-card:hover h3 { color: #1500ff; }
.capability-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.cap-index {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1500ff 0%, #5c6cff 100%);
  box-shadow: 0 6px 14px rgba(21, 0, 255, 0.25);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background 0.35s ease, color 0.35s ease;
}
.capability-card:hover .cap-index { background: #1500ff; color: #fff; }
.cap-models { grid-column: span 2; }
.cap-model-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.cap-model-list li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  border-radius: 14px;
  background: #f5f7ff;
  transition: background-color 0.3s ease;
}
.cap-model-list li:hover { background: #ebf0ff; }
.cap-model-head { display: flex; align-items: center; gap: 10px; }
.cap-model-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #fff;
  color: #1500ff;
  box-shadow: 0 1px 2px rgba(20, 30, 80, 0.06);
}
.cap-model-icon svg { width: 17px; height: 17px; }
.cap-model-list strong { font-size: 14px; font-weight: 600; color: #1d1d1f; }
.cap-model-list span { font-size: 13px; line-height: 1.45; color: var(--md-sys-color-on-surface-variant); }
@media (max-width: 760px) {
  .cap-models { grid-column: auto; }
  .cap-model-list { grid-auto-flow: row; }
}
.case-grid .case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(20, 20, 40, 0.08);
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.case-grid .case-card:hover {
  z-index: 1;
  transform: scale(1.035);
  box-shadow: 0 18px 40px rgba(20, 20, 40, 0.12);
}
.case-frame {
  position: relative;
  display: block;
  height: 220px;
  overflow: hidden;
}
.case-grid .case-frame::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 6px 16px rgba(20, 20, 40, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.case-grid .case-card:hover .case-frame::after {
  background-color: #1500ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  box-shadow: 0 8px 20px rgba(21, 0, 255, 0.35);
}
@media (min-width: 980px) {
  .case-grid:not(.is-row):has(> .case-card:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .case-grid:not(.is-row):has(> .case-card:nth-child(4)) .case-frame { height: 200px; }
}
.case-scroller { position: relative; min-width: 0; max-width: 100%; }
.case-grid.is-row {
  display: flex;
  gap: 16px;
  margin: -16px 0 -32px;
  padding: 16px 0 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.case-grid.is-row::-webkit-scrollbar { display: none; }
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.case-grid.is-row {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  transition: --fade-l 0.35s ease, --fade-r 0.35s ease;
}
.case-scroller:has(.range-arrow.is-prev:not(:disabled)) .case-grid.is-row { --fade-l: 90px; }
.case-scroller:has(.range-arrow.is-next:not(:disabled)) .case-grid.is-row { --fade-r: 90px; }
.case-grid.is-row > .case-card {
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}
.case-grid.is-row > .case-card:hover { transform: translateY(-4px); }
.case-scroller .range-arrow { top: 50%; }
.case-scroller .range-arrow.is-prev { left: -14px; }
.case-scroller .range-arrow.is-next { right: -14px; }
@media (max-width: 980px) {
  .case-grid.is-row > .case-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 560px) {
  .case-grid.is-row > .case-card { flex-basis: 84%; }
  .case-scroller .range-arrow.is-prev { left: 4px; }
  .case-scroller .range-arrow.is-next { right: 4px; }
}
.case-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-copy { padding: 16px 18px 18px; }
.case-copy .kicker {
  display: inline-block;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(21, 0, 255, 0.08);
  border: 1px solid rgba(21, 0, 255, 0.16);
  color: #1500ff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.case-copy h3 {
  margin: 8px 0 6px;
  transition: color 0.35s ease;
}
.case-card:hover h3 { color: #1500ff; }
.case-copy h3 a { color: inherit; text-decoration: none; }
.case-copy h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.case-copy h3 a:focus-visible { outline: none; }
.case-card:has(h3 a:focus-visible) { outline: 2px solid #1500ff; outline-offset: 3px; }
.case-copy p { margin: 0; text-wrap: pretty; hyphens: manual; }
.case-copy h3 { text-wrap: balance; }

.page-hero.case-hero {
  display: flex;
  align-items: center;
  min-height: min(640px, 82vh);
  padding: calc(var(--header) + 40px) 0 48px;
  text-align: left;
  background: var(--case-bg, #fff);
}
.page-hero.case-hero::before { display: none; }
.case-hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: 56%;
  object-fit: cover;
  object-position: right center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%);
  mask-image: linear-gradient(to right, transparent 0, #000 14%);
}
@media (min-width: 901px) {
  .case-hero.is-dark .case-hero-bg {
    top: calc(var(--header) + 12px);
    height: calc(100% - var(--header) - 12px);
  }
  .case-hero.is-light .case-hero-bg {
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 22%, #000 46%);
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 22%, #000 46%);
  }
  .case-hero.is-duo .case-hero-bg {
    left: 40%;
    width: 60%;
    max-width: none;
    object-position: 40% center;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%);
  }
}
@media (min-width: 1200px) {
  .case-hero.is-duo .case-hero-bg {
    left: auto;
    right: max(0px, calc((100% - min(var(--page), 100% - var(--gutter))) / 2 - 60px));
    width: 800px;
    object-position: 0 center;
  }
}
.case-hero .wrap { width: min(var(--page), calc(100% - var(--gutter))); }
.case-hero .wrap:has(.case-poster) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 40px;
}
.case-hero .wrap:has(.case-poster) .case-hero-copy { max-width: 520px; }
.case-hero .wrap:has(.case-poster) .case-facts div { background: #f5f5f7; box-shadow: none; }
.case-poster {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  aspect-ratio: 10 / 7.4;
}
.case-poster figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #f1e2d4;
}
.case-poster .is-main { grid-row: 1 / -1; }
.case-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-poster .is-main img { object-position: center 30%; }
.case-poster figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #1d1d1f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.case-hero-copy { max-width: min(520px, 42%); }
.case-hero .eyebrow { margin: 0 0 14px; }
.case-hero.is-dark,
.case-hero.is-dark .lede { color: rgba(255, 255, 255, 0.82); }
.case-hero.is-dark h1 { color: #fff; }
.page-hero.case-hero.is-dark h1 .hl {
  background-image: linear-gradient(100deg, #4f5dff 0%, #2f3bff 35%, #6573ff 65%, #3a4bff 100%);
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.case-hero.is-dark .eyebrow { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.case-hero.is-dark .case-facts div {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 24px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.case-hero.is-dark .case-facts dt { color: #6f7cff; }
.case-hero.is-dark .case-facts dd { color: #fff; }
.case-hero.is-warm h1,
.case-hero.is-warm .lede { color: #1d1d1f; }
.page-hero.case-hero.is-warm h1 .hl {
  background: none;
  color: #1d1d1f;
  -webkit-text-fill-color: #1d1d1f;
}
.case-hero.is-warm .eyebrow { color: #1d1d1f; border-color: #1d1d1f; }
.case-hero.is-warm .wrap:has(.case-poster) .case-facts div { background: #fff; }
.case-hero.is-warm.is-white .wrap:has(.case-poster) .case-facts div { background: #f5f5f7; }
.case-hero h1,
.case-hero .wrap h1 {
  max-width: 13em;
  margin: 0 0 14px;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.06;
}
.case-hero .lede { max-width: 34rem; margin: 0 0 22px; }
.case-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.case-facts div {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(20, 20, 40, 0.05);
}
.case-facts dt {
  margin-bottom: 3px;
  color: #1500ff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.case-facts dd { margin: 0; color: #1d1d1f; font-size: 14px; font-weight: 500; line-height: 1.35; }

.case-body { padding: 64px 0; background: #fff; }
.case-steps:has(+ .case-compare-figure) { margin-bottom: 0; }
.case-compare-figure { margin: 72px 0; }
.case-compare-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 6px 24px;
  margin-bottom: 14px;
}
.case-compare-figure h3 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.case-compare-figure + .case-steps li:first-child { border-top: 1px solid rgba(20, 20, 40, 0.1); }
.case-compare-figure:has(.case-split) {
  display: grid;
  grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr);
  column-gap: 40px;
  align-items: center;
}
.case-compare-figure:has(.case-split) figcaption {
  grid-column: 1 / 3;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}
.case-split {
  position: relative;
  grid-column: 3;
  justify-self: center;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(20, 20, 40, 0.08);
}
.case-split img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.case-split[data-compare] { cursor: ew-resize; touch-action: pan-y; user-select: none; }
.case-split .case-split-before {
  position: absolute;
  inset: 0;
  height: 100%;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.case-split-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 2;
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(20, 20, 40, 0.12);
  outline: none;
}
.case-split-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(20, 20, 40, 0.18);
  color: #1500ff;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
.case-split-knob svg { width: 16px; height: 16px; }
.case-split.is-dragging .case-split-knob,
.case-split-handle:focus-visible .case-split-knob { transform: translate(-50%, -50%) scale(1.1); }
.case-split-handle:focus-visible .case-split-knob { box-shadow: 0 0 0 3px rgba(21, 0, 255, 0.35), 0 4px 12px rgba(20, 20, 40, 0.18); }
.case-split-tag { z-index: 1; transition: opacity 0.2s ease; pointer-events: none; }
.case-split-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1d1d1f;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.case-split-tag.is-made { left: auto; right: 10px; color: #1500ff; }
.case-body-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: 20px;
}
.case-body h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.case-note {
  max-width: 30rem;
  margin: 0;
  color: #6e6e73;
  font-size: 13px;
  line-height: 1.45;
}
.case-steps {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.case-steps li,
.case-closing {
  display: grid;
  grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr);
  column-gap: 40px;
  align-items: start;
}
.case-steps li {
  padding: 32px 0;
  border-top: 1px solid rgba(20, 20, 40, 0.1);
}
.case-steps li:last-child { border-bottom: 1px solid rgba(20, 20, 40, 0.1); }
.case-step-num {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ecebff 0%, #e2e0ff 100%);
  box-shadow: 0 4px 12px rgba(21, 0, 255, 0.08), inset 0 0 0 1px rgba(21, 0, 255, 0.06);
  color: #1500ff;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.case-steps h3 { margin: 0; font-size: 24px; letter-spacing: -0.02em; line-height: 1.25; }
.case-steps p { margin: 0; color: #3a3a40; font-size: 17px; line-height: 1.6; }
.case-steps li > div > p + p { margin-top: 14px; }
.case-steps .case-step-label {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 12px;
  padding: 5px 12px;
  border: 1px solid #1d1d1f;
  border-radius: 999px;
  color: #1d1d1f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.case-closing { margin: 8px 0 0; padding-top: 8px; }
.case-closing h3 { grid-column: 2; margin: 0; font-size: 24px; letter-spacing: -0.02em; line-height: 1.25; }
.case-closing > div { grid-column: 3; }
.case-closing p { margin: 0; color: #3a3a40; font-size: 17px; line-height: 1.6; }
.case-closing blockquote {
  grid-column: 2 / -1;
  margin: clamp(64px, 9vw, 112px) 0 clamp(40px, 6vw, 80px);
  padding: 0;
  color: #1d1d1f;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.case-closing > .case-closing-cta {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: clamp(64px, 9vw, 112px) 0 clamp(40px, 6vw, 80px);
  text-align: center;
}
.case-closing-cta blockquote { max-width: 56ch; margin: 0 0 24px; text-wrap: balance; }
.case-intro { margin: 0 0 32px; }
.case-intro p { margin: 0; color: #3a3a40; font-size: 17px; line-height: 1.6; }
.case-intro p + p { margin-top: 14px; }
.case-body-head.is-sub { margin-top: clamp(48px, 6vw, 72px); }
.case-steps.is-unnumbered li > header { grid-column: 2; }
.case-steps.is-unnumbered li > div { grid-column: 3; }
.case-steps .case-list {
  margin: 14px 0 0;
  padding-left: 1.25em;
  color: #3a3a40;
  font-size: 17px;
  line-height: 1.6;
}
.case-steps ul.case-list { list-style-type: disc; }
.case-steps .case-list li { display: list-item; padding: 0; border: 0; }
.case-steps .case-list li + li { margin-top: 6px; }
.case-steps .case-list strong { color: #1d1d1f; font-weight: 600; }
.case-steps li > div > .case-list + p { margin-top: 14px; }
.case-steps .case-sub {
  margin: 26px 0 8px;
  color: #1d1d1f;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.case-steps .case-sub + .case-list { margin-top: 0; }
.case-steps li > div > .case-list + .case-sub { margin-top: 26px; }
.case-steps li > div > .case-fit {
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #f3f5ff;
  box-shadow: inset 0 0 0 1px rgba(21, 0, 255, 0.08);
}
.case-steps .case-fit > strong:first-child { color: #1500ff; font-weight: 600; }
.case-steps p > strong:first-child { color: #1d1d1f; font-weight: 600; }
.case-table-wrap {
  overflow-x: auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.06), 0 0 0 1px rgba(29, 29, 31, 0.06);
}
.case-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.case-table th, .case-table td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(60, 60, 67, 0.1);
  text-align: left;
  vertical-align: top;
}
.case-table tbody tr:last-child th, .case-table tbody tr:last-child td { border-bottom: 0; }
.case-table thead th {
  background: #f3f5ff;
  color: #1500ff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.case-table tbody th { width: 22%; color: #1d1d1f; font-weight: 600; }
.case-table td { color: #3a3a40; }
.case-table-note { margin: 16px 0 40px; color: #6e6e73; font-size: 14px; line-height: 1.5; }
.case-faq { margin: 0; }
.case-faq-band { padding: clamp(56px, 7vw, 80px) 0; background: #f8f8fa; }
.case-faq-band h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.case-cta-band {
  padding: clamp(56px, 8vw, 96px) 0;
  background: #eef1ff;
}
.case-cta-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.case-cta-panel h2 {
  max-width: 40ch;
  margin: 0 0 16px;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}
.case-cta-panel p strong { color: #1d1d1f; font-weight: 600; }
.case-cta-panel p { max-width: 84ch; margin: 0 0 28px; color: #3a3a40; font-size: 17px; line-height: 1.6; }
.case-cta-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: clamp(36px, 5vw, 52px);
}
.case-cta-logo {
  display: block;
  width: 150px;
  aspect-ratio: 193.17 / 49.59;
  background: #1500ff;
  -webkit-mask: url("Assets/LOGOS%20/NA-%20white.svg") center / contain no-repeat;
  mask: url("Assets/LOGOS%20/NA-%20white.svg") center / contain no-repeat;
}
.case-cta-panel .case-cta-sign p {
  margin: 0;
  color: #1500ff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.case-more-wrap { padding: clamp(56px, 7vw, 88px) 0 72px; background: var(--md-sys-color-surface); }
.case-more-wrap h2 {
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: -0.03em;
}
.case-bento {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px;
}
.case-bento-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 40px;
  border-radius: 22px;
  background:
    radial-gradient(90% 70% at 30% 115%, rgba(21, 0, 255, 0.9), transparent 60%),
    radial-gradient(60% 55% at 90% 0%, rgba(110, 128, 255, 0.45), transparent 62%),
    linear-gradient(165deg, #050022 0%, #0a0092 50%, #1500ff 100%);
  color: #fff;
}
.case-bento-cta .eyebrow { margin-bottom: 20px; color: #fff; border-color: rgba(255, 255, 255, 0.72); }
.case-bento-cta .eyebrow:hover { color: #fff; border-color: #fff; }
.case-more-wrap .case-bento-cta h2 {
  margin: 0;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: clamp(1.75rem, 2.6vw, 2.3rem);
  line-height: 1.12;
}
.case-bento-cta .hl {
  background-image: linear-gradient(135deg, #ffffff 0%, #d5dcff 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.case-bento-cta p:not(.eyebrow) { margin: 16px 0 0; color: rgba(255, 255, 255, 0.82); font-size: 16px; line-height: 1.6; }
.case-bento-cta .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.case-bento-cta .btn { width: auto; }
.case-bento-cta .btn-metal { --metal-fill: #ffffff; color: #1500ff; }
.case-bento-cta .btn-metal:hover { --metal-fill: #f4f4ff; color: #1500ff; }
.case-bento-cta .btn-ghost { background: rgba(255, 255, 255, 0.16); color: #fff; }
.case-bento-cta .btn-ghost:hover { background: rgba(255, 255, 255, 0.28); }
.case-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-bento .case-more li:last-child { grid-column: 1 / -1; }
.case-bento .case-more li:last-child a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.case-bento .case-more li:last-child img { height: 188px; aspect-ratio: auto; }
.case-more a {
  display: block;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(21, 0, 255, 0.16);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(20, 20, 40, 0.05);
  color: #1d1d1f;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.case-more a:hover { transform: translateY(-3px); border-color: rgba(21, 0, 255, 0.4); box-shadow: 0 14px 30px rgba(20, 20, 40, 0.1); }
.case-more img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.case-more img[src*="adi-varaha"] { object-fit: contain; background: #000; }
.case-more a { position: relative; }
.case-more .case-more-text {
  display: block;
  padding: 16px 112px 20px 18px;
}
.case-more-copy { display: grid; justify-items: start; min-width: 0; }
.case-more-tag {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(21, 0, 255, 0.08);
  border: 1px solid rgba(21, 0, 255, 0.16);
  color: #1500ff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.case-more strong {
  display: block;
  margin: 8px 0 6px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  transition: color 0.35s ease;
}
.case-more a:hover strong { color: #1500ff; }
.case-more-sub { color: var(--md-sys-color-on-surface-variant); font-size: 15px; line-height: 1.45; }
.case-more-read {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  height: 45px;
  padding: 0 20px;
  border-radius: 999px;
  background: #1500ff;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.25s ease;
}
.case-more a:hover .case-more-read { background: #1100cc; }

@media (max-width: 900px) {
  .case-bento { grid-template-columns: 1fr; }
  .case-bento-cta { padding: 32px 28px; }
  .page-hero.case-hero { display: block; min-height: 0; padding: 0 0 40px; }
  .case-hero-bg {
    position: static;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 60vh;
    object-position: center;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, #000 72%, transparent);
  }
  .page-hero.case-hero.is-dark { padding-top: calc(var(--header) + 8px); }
  .case-hero-copy { max-width: none; margin-top: -8px; }
  .page-hero.case-hero:has(.case-poster) { padding: calc(var(--header) + 32px) 0 40px; }
  .case-hero .wrap:has(.case-poster) { grid-template-columns: 1fr; gap: 28px; }
  .case-poster { order: -1; width: min(100%, 520px); margin-inline: auto; }
  .case-compare-figure:has(.case-split) { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 20px; }
  .case-compare-figure:has(.case-split) > *,
  .case-compare-figure:has(.case-split) figcaption { grid-column: 1 / -1; }
  .case-steps li, .case-closing { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 12px; }
  .case-step-num { width: 40px; height: 40px; border-radius: 12px; font-size: 14px; }
  .case-steps li > :not(.case-step-num), .case-closing > *, .case-closing > div, .case-closing blockquote { grid-column: 2; }
  .case-steps li > header { position: static; }
  .case-steps.is-unnumbered li > header, .case-steps.is-unnumbered li > div { grid-column: 1 / -1; }
  .case-closing > .case-closing-cta { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .case-steps li { grid-template-columns: 40px minmax(0, 1fr); padding: 20px 0; }
  .case-steps h3 { font-size: 19px; }
  .case-steps p, .case-closing p, .case-intro p, .case-steps .case-list { font-size: 16px; }
  .case-more { grid-template-columns: 1fr; }
  .case-bento .case-more li:last-child a { display: block; }
  .case-bento .case-more li:last-child img { height: auto; aspect-ratio: 16 / 10; min-height: 0; }
  .case-facts dd { font-size: 13px; }
}

.process-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.process-step {
  padding: 22px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.05), 0 0 0 1px rgba(29, 29, 31, 0.06);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(20, 30, 80, 0.08);
}
.process-step:hover h3 { color: #1500ff; }
.step-index {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: #dfe6ff;
  color: #1500ff;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background 0.35s ease, color 0.35s ease;
}
.process-step:hover .step-index { background: #1500ff; color: #fff; }
.process-step h3 { margin-bottom: 6px; }
.process-step p { color: var(--md-sys-color-on-surface-variant); font-size: 14px; line-height: 20px; }

/* Zigzag progress timeline. Odd steps sit above the rail and even steps below,
   so each step's copy can run two columns wide without overlapping the step
   next to it. The track declares one column more than there are steps, giving
   the last step the same width to spill into as every other step. */
.journey-timeline {
  position: relative;
  margin-top: 30px;
}
.journey-track {
  display: grid;
  grid-template-columns: repeat(calc(var(--steps) + 1), minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  height: clamp(340px, 30vw, 420px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.journey-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.journey-item.is-up {
  grid-row: 1;
  justify-content: flex-end;
}
.journey-item.is-down {
  grid-row: 2;
  justify-content: flex-start;
}
/* The marker is first in the DOM so the dot and stem stay adjacent; the copy is
   pulled above it for the steps that sit over the rail. */
.journey-item.is-up .journey-copy { order: -1; }

.journey-marker {
  display: flex;
  align-items: center;
  width: 10px;
  flex: none;
}
/* Both variants put the dot at the rail end of the stem. */
.journey-item.is-up .journey-marker {
  flex-direction: column;
  margin-bottom: -5px;
}
.journey-item.is-down .journey-marker {
  flex-direction: column-reverse;
  margin-top: -5px;
}
.journey-stem {
  width: 1px;
  height: 34px;
  flex: none;
  background: rgba(21, 0, 255, 0.32);
}
.journey-item.is-up .journey-stem { transform-origin: bottom center; }
.journey-item.is-down .journey-stem { transform-origin: top center; }
.journey-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 999px;
  background: var(--md-sys-color-primary);
  box-shadow: 0 0 0 4px rgba(21, 0, 255, 0.12);
}

.journey-copy { width: calc(200% - 22px); }
.journey-item.is-up .journey-copy { margin-bottom: 12px; }
.journey-item.is-down .journey-copy { margin-top: 12px; }
.journey-copy h3 {
  margin: 4px 0 5px;
  font-size: 1rem;
}
.journey-copy p {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
  line-height: 18px;
}

/* Spans from the first dot's centre to the last dot's centre: the dots sit 5px
   into their column, and the final step leaves one column spare on the right. */
.journey-rail {
  position: absolute;
  left: 5px;
  top: 50%;
  width: calc(100% * (var(--steps, 8) - 1) / (var(--steps, 8) + 1));
  height: 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--md-sys-color-outline-variant);
  overflow: hidden;
}
.journey-rail-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0a0092, #1500ff);
}

/* The scroll-linked class is added by site.js, so without JS the timeline
   renders complete rather than blank. */
.journey-timeline.is-scroll-linked .journey-rail-fill {
  width: calc(var(--progress, 0) * 100%);
}
.journey-timeline.is-scroll-linked .journey-copy {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease-out, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-timeline.is-scroll-linked .journey-dot,
.journey-timeline.is-scroll-linked .journey-stem {
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-timeline.is-scroll-linked .journey-stem { transform: scaleY(0); }
.journey-timeline.is-scroll-linked .is-active .journey-copy {
  opacity: 1;
  transform: none;
}
.journey-timeline.is-scroll-linked .is-active .journey-dot { transform: scale(1); }
.journey-timeline.is-scroll-linked .is-active .journey-stem { transform: scaleY(1); }
/* The copy waits for its own stem to finish drawing. */
.journey-timeline.is-scroll-linked .is-active .journey-copy { transition-delay: 0.12s; }

/* Pinned journey: one point is reached per scroll segment, so the pin needs a
   segment of height for each step after the first. */
.journey-pin.is-journey-paged {
  height: calc((var(--steps, 8) - 1) * 46vh + 100svh);
}
.section:has(.journey-pin.is-journey-paged) {
  padding-top: 0;
  padding-bottom: 48px;
}
.journey-pin.is-journey-paged .journey-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
}
/* The logo puck straddles the first point, which sits at the very start of the
   track, so the clip box is widened to the left by half of it and the content is
   pushed back by the same amount to keep the dots under the heading. */
.journey-stage {
  overflow: hidden;
  margin-left: -44px;
  padding-left: 44px;
}
/* Only the horizontal axis should be clipped. Clipping both cut the descriptions
   off the lower steps on a short window, where the track loses height but the
   copy does not. `clip` is used rather than `hidden` so the visible vertical axis
   does not turn this into a scroll container. */
@supports (overflow-x: clip) {
  .journey-stage {
    overflow-x: clip;
    overflow-y: visible;
  }
}
.journey-timeline.is-paged {
  width: calc(var(--steps) * 100% / var(--visible, 4));
  transform: translate3d(calc(var(--shift, 0) * -100% / var(--steps)), 0, 0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-timeline.is-paged .journey-track {
  grid-template-columns: repeat(var(--steps, 8), minmax(0, 1fr)) !important;
  /* Tall enough for a three-line description either side of the rail. */
  height: clamp(380px, 46vh, 460px);
}
.journey-timeline.is-paged .journey-copy {
  width: min(300px, 86%);
  opacity: 0.4;
  transition: opacity 0.45s ease;
}
.journey-timeline.is-paged .is-reached .journey-copy { opacity: 1; }
/* The pop sits on the children rather than the block, so the number, title and
   description land in quick succession as the logo arrives instead of all at
   once. The easing overshoots slightly, which is what gives it the pop. */
.journey-timeline.is-paged .journey-copy > * {
  transform: translateY(12px);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.journey-timeline.is-paged .journey-copy .step-index {
  transform: translateY(12px) scale(0.82);
}
.journey-timeline.is-paged .is-reached .journey-copy > *,
.journey-timeline.is-paged .is-reached .journey-copy .step-index {
  transform: none;
}
.journey-timeline.is-paged .is-reached .journey-copy h3 { transition-delay: 0.07s; }
.journey-timeline.is-paged .is-reached .journey-copy p { transition-delay: 0.14s; }
.journey-timeline.is-paged .journey-stem {
  background: rgba(29, 29, 31, 0.16);
  transition: background 0.45s ease;
}
.journey-timeline.is-paged .is-reached .journey-stem { background: rgba(21, 0, 255, 0.5); }
.journey-timeline.is-paged .journey-dot {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(29, 29, 31, 0.28);
  transform: scale(0.82);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease, box-shadow 0.45s ease;
}
.journey-timeline.is-paged .is-reached .journey-dot {
  background: #1500ff;
  box-shadow: 0 0 0 4px rgba(21, 0, 255, 0.12);
  transform: scale(1);
}
/* The logo sits on the current point, so that point's disc stays out of sight. */
.journey-timeline.is-paged .is-current .journey-dot {
  opacity: 0;
  box-shadow: none;
  transform: none;
}
/* Rail and fill run between measured dot centres, which site.js writes out as
   pixel values; the track is wider than the strip it scrolls inside, so column
   arithmetic lands short of the dots. */
.journey-timeline.is-paged .journey-rail {
  left: var(--rail-x, 5px);
  width: var(--rail-w, 0);
  background: rgba(29, 29, 31, 0.12);
}
.journey-timeline.is-paged .journey-rail-fill {
  display: block;
  width: var(--fill-w, 0);
  background: var(--md-sys-color-primary);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The logo rides the rail, parked on the point currently reached — the same
   measured centre the coloured fill stops at. */
.journey-walker {
  position: absolute;
  top: 50%;
  left: var(--walker-x, 5px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 58px;
  height: 66px;
  margin: -33px 0 0 -29px;
  background: none;
  transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Invisible plate around the mark. Corners stay shallow so it reads as a
   rounded rectangle, not a disc. It grows a little on hover and when the
   mark lands on a point; the image itself does not scale on its own. */
.journey-walker-frame {
  display: grid;
  place-items: center;
  width: 58px;
  height: 66px;
  border-radius: 10px;
  background: transparent;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-walker.is-zoomed .journey-walker-frame,
.journey-walker:hover .journey-walker-frame {
  transform: scale(1.16);
}
.journey-walker img {
  width: auto;
  height: 40px;
}
/* Without the paged layout there is no single active point for it to sit on. */
.journey-timeline:not(.is-paged) .journey-walker { display: none; }

/* Light blue disc behind each step number. Scoped to the timeline so the
   process-step cards elsewhere keep their plain numerals. */
.journey-copy .step-index {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #dfe6ff;
  color: var(--md-sys-color-primary);
  font-variant-numeric: tabular-nums;
}

.pill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.pill-list li {
  padding: 8px 14px;
  border-radius: var(--md-sys-shape-corner-full);
  background: rgba(21, 0, 255, 0.08);
  color: #1d1d1f;
  font-size: 15px;
  font-weight: 500;
}

/* Evens the two lines out, rather than leaving "partner." alone on the second. */
#partner-title { text-wrap: balance; }

/* The four engagement models on the homepage. These were a row of bare tags,
   which said nothing about the difference between them and left the widest tag
   three times the width of the narrowest. Equal cards with a line of copy each
   carry the actual distinction; the full descriptions live on the custom
   manufacturing page. */
/* Three across so the six steps fall into two even rows. */
.model-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.model-row > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  border-radius: 8px;
  /* Flat: white against the section's pale grey is enough to read the four
     shapes, so they sit on the page rather than floating above it. */
  background: #fff;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.model-row > li:hover,
.model-row > li:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(20, 30, 80, 0.08);
}
.model-row > li:hover h3,
.model-row > li:focus-visible h3 { color: var(--md-sys-color-primary); }
@media (prefers-reduced-motion: reduce) {
  .model-row > li { transition: none; }
  .model-row > li:hover,
  .model-row > li:focus-visible { transform: none; }
}
/* Same pale blue numeral as the journey timeline, so the two numbered sequences
   on the page read as one system. */
.model-row .model-index {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: #dfe6ff;
  color: var(--md-sys-color-primary);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background 0.35s ease, color 0.35s ease;
}
.model-row > li:hover .model-index,
.model-row > li:focus-visible .model-index {
  background: var(--md-sys-color-primary);
  color: #fff;
}
.model-row h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
}
.model-row p {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13.5px;
  line-height: 19px;
}
@media (max-width: 979px) {
  .model-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .model-row { grid-template-columns: 1fr; }
}

.why-grid, .model-grid, .start-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-top: 0;
}
.why-grid article, .model-grid article, .start-grid li {
  padding: 22px;
  border-bottom: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--md-sys-elevation-1);
}
.why-grid article:nth-child(odd), .model-grid article:nth-child(odd) { padding-right: 22px; }
.why-grid h3, .model-grid h3 { margin-bottom: 6px; }
.model-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.model-grid article,
.model-grid article:nth-child(odd),
.capability-card.layer-card {
  position: relative;
  isolation: isolate;
  display: flex;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(21, 0, 255, 0.12);
  background: linear-gradient(135deg, rgba(232, 238, 253, 0.7), rgba(232, 238, 253, 0.25)), #fff;
  box-shadow: 0 8px 16px rgba(20, 30, 80, 0.06);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.model-inner,
.layer-inner {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px;
  border-radius: 22px;
  border: 0;
  background: linear-gradient(135deg, #f7f9ff, #fff 70%);
  box-shadow: 0 1px 2px rgba(20, 30, 80, 0.04);
}
.model-inner::before,
.layer-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, #e8eefd, #f4f7ff 80%);
  opacity: 0.35;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.model-inner > *, .layer-inner > * { position: relative; }
.model-grid article:hover,
.capability-card.layer-card:hover { transform: none; border-color: rgba(21, 0, 255, 0.14); box-shadow: 0 12px 24px rgba(20, 30, 80, 0.09); }
.model-grid article:hover .model-inner::before,
.layer-card:hover .layer-inner::before { opacity: 1; }
.model-grid article:hover h3 { color: var(--md-sys-color-primary); }
.model-grid h3 { transition: color 0.25s ease; }
.model-grid article:hover .model-icon { background: #fff; }
.capability-card.layer-card { border-radius: 22px; }
.layer-inner { padding: 20px; }
.layer-inner .cap-index { transition: background-color 0.3s ease, color 0.3s ease; }
.capability-card .cap-index { color: #fff; }
.capability-card.layer-card:hover .cap-index { background: #1500ff; color: #fff; box-shadow: 0 8px 18px rgba(21, 0, 255, 0.35); }
.layer-inner .cap-model-list li { background: rgba(255, 255, 255, 0.7); }
.layer-inner .cap-model-list li:hover { background: #fff; }
.model-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--icon-base);
  color: var(--icon-color);
}
.model-icon svg { width: 20px; height: 20px; }
@media (max-width: 979px) {
  .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.model-grid.leader-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.leader-mono {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.leader-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: 64px;
  margin-top: 48px;
}
.leader-portrait {
  position: relative;
  overflow: hidden;
  width: min(100%, 520px);
  aspect-ratio: 1632 / 1560;
  margin: 0 auto;
  border-radius: 12px;
  background: #2a2a30;
  box-shadow: 0 18px 40px rgba(20, 20, 40, 0.14);
}
.leader-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1);
  transform-origin: 50% 22%;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.leader-portrait figcaption {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(20, 20, 40, 0.18);
  color: var(--md-sys-color-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 861px) {
  .leader-feature { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
  .leader-portrait {
    align-self: stretch;
    justify-self: end;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
  }
}
.leader-feature:hover .leader-portrait img { transform: scale(1.03); }
.leader-tag {
  margin: 0 0 10px;
  color: #1500ff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.leader-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.leader-copy h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.014em; }
.leader-role { margin-top: 2px; color: var(--md-sys-color-on-surface-variant); font-size: 15px; }
.leader-prev {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 10px 18px 10px 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 30, 80, 0.06), 0 6px 16px rgba(20, 30, 80, 0.05);
}
.leader-logos { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.leader-logos img {
  width: auto;
  height: 46px;
  padding: 4px;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
}
.leader-logos img + img { padding-left: 10px; border-left: 1px solid #e5e5ea; border-radius: 0; }
.leader-prev p { display: flex; flex-direction: column; font-size: 13px; line-height: 1.4; color: var(--md-sys-color-on-surface-variant); }
.leader-prev strong { font-size: 15px; font-weight: 600; color: #1d1d1f; }
.leader-prev-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-sys-color-primary);
}
.leader-intro {
  max-width: 34rem;
  margin: 0 0 24px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 16px;
  line-height: 1.55;
}
.leader-quote { margin: 0 0 16px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.022em; color: #1d1d1f; }
.leader-pullquote {
  margin: 128px auto 48px;
  max-width: 46rem;
  text-align: center;
}
.leader-pullquote blockquote { margin: 0; }
.leader-pullquote p {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.022em;
  color: #1d1d1f;
  text-wrap: balance;
}
.leader-pullquote .magic-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}
.magic-text-word { position: relative; margin-right: 0.26em; }
.magic-text-word:last-child { margin-right: 0; }
.magic-text-ghost { position: absolute; inset: 0 auto auto 0; opacity: 0.2; }
.magic-text-word.is-hl > span {
  background-image: var(--header-line);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.leader-pullquote figcaption {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
@media (prefers-reduced-motion: reduce) {
  .leader-portrait img { transition: none; }
  .leader-feature:hover .leader-portrait img { transform: scale(1); }
}
@media (max-width: 860px) {
  #lead-title + p br { display: none; }
  .leader-feature { grid-template-columns: 1fr; gap: 28px; }
  .leader-portrait { order: -1; }
}
.why-grid p, .model-grid p { color: var(--md-sys-color-on-surface-variant); font-size: 14px; line-height: 20px; }
.setup-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.setup-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(21, 0, 255, 0.06);
  box-shadow: 0 12px 32px rgba(20, 30, 80, 0.05);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.setup-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(20, 30, 80, 0.09);
}
.setup-visual {
  position: relative;
  height: 168px;
  border-radius: 16px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(255, 255, 255, 0.7) 64px 65px),
    linear-gradient(180deg, #f8faff 0%, #eef3ff 100%);
}
.setup-visual svg {
  display: block;
  width: 100%;
  height: 100%;
  font-family: var(--md-ref-typeface);
}
.setup-index {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #7aa2f2;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.setup-copy { padding: 16px 8px 8px; }
.setup-card h3 {
  margin-bottom: 6px;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  transition: color 0.25s ease;
}
.setup-card:hover h3 { color: var(--md-sys-color-primary); }
.setup-card p {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}
.setup-visual svg > * {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.setup-index { transition: background-color 0.3s ease, color 0.3s ease; }
.setup-card:nth-of-type(2) svg > :nth-child(-n+4) { transform-origin: 50% 100%; }
.setup-card:nth-of-type(3) svg > :nth-child(n+5) { transition-delay: 0.06s; }
.setup-card:nth-of-type(3) svg > :nth-child(n+9) { transition-delay: 0.12s; }
@media (hover: hover) and (pointer: fine) {
  .setup-card:hover .setup-index { background: var(--icon-color); color: #fff; }

  .setup-card:nth-of-type(1):hover svg > :nth-child(n+2):nth-child(-n+4) { transform: scale(1.15); }
  .setup-card:nth-of-type(1):hover svg > :nth-child(n+5):nth-child(-n+9) { transform: translateY(-5px); }
  .setup-card:nth-of-type(1):hover svg > :nth-child(n+10) { transform: translateX(6px); }

  .setup-card:nth-of-type(2):hover svg > :nth-child(n+2):nth-child(-n+4) { transform: scaleY(1.08); }
  .setup-card:nth-of-type(2):hover svg > :nth-child(5) { transform: translateY(-8px); }
  .setup-card:nth-of-type(2):hover svg > :nth-child(6) { transform: translateY(-2px); }
  .setup-card:nth-of-type(2):hover svg > :nth-child(7) { transform: translateY(-4px); }
  .setup-card:nth-of-type(2):hover svg > :nth-child(n+8) { transform: translateY(-6px); }

  .setup-card:nth-of-type(3):hover svg > * { transform: translateX(6px); }

  .setup-card:nth-of-type(4):hover svg > :nth-child(-n+4) { transform: scale(0.94); }
  .setup-card:nth-of-type(4):hover svg > :nth-child(5) { transform: scale(1.05); }
  .setup-card:nth-of-type(4):hover svg > :nth-child(6) { transform: rotate(90deg) scale(1.08); }
  .setup-card:nth-of-type(4):hover svg > :nth-child(7) { transform: rotate(90deg) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .setup-visual svg > * { transition: none; }
}
/* Small cards, icon above the label, flowing as many per row as fit. */
.start-grid {
  list-style: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 32px;
}
.start-grid li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(60, 60, 67, 0.12);
  background: transparent;
  box-shadow: none;
  color: #1d1d1f;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
.start-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--icon-base);
  color: var(--icon-color);
}
.start-icon svg { width: 18px; height: 18px; }
.start-split {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  gap: 64px;
  align-items: center;
  margin-top: 28px;
}
.start-split .start-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}
.start-split .start-grid li { padding: 24px 0; }
.start-visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-extra-large, 28px);
  background: #f3f2f7;
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.06), 0 0 0 1px rgba(29, 29, 31, 0.06);
}
.start-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 55%;
}
.start-tag {
  position: absolute;
  bottom: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.06);
  color: #1d1d1f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.start-tag-sketch { left: 16px; }
.start-tag-sample { right: 16px; }
.start-grid li { position: relative; }
.start-grid li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--icon-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.start-grid li > span:last-child,
.start-icon,
.start-visual img,
.start-tag {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .start-grid li:hover::after { transform: scaleX(1); }
  .start-grid li:hover > span:last-child { transform: translateX(4px); }
  .start-grid li:hover .start-icon {
    background: var(--icon-color);
    color: #fff;
    transform: scale(1.06) rotate(-4deg);
  }
  .start-visual:hover img { transform: scale(1.03); }
  .start-visual:hover .start-tag { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .start-grid li::after,
  .start-grid li > span:last-child,
  .start-icon,
  .start-visual img,
  .start-tag { transition: none; }
}
@media (max-width: 820px) {
  .start-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .start-split .start-grid li { padding: 14px 0; }
}

.custom-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
  list-style: none;
}
.custom-grid li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--md-sys-elevation-1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.custom-grid li:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20, 30, 80, 0.1);
}
.custom-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--icon-base);
  color: var(--icon-color);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.custom-grid li:hover .custom-icon { background: var(--icon-color); color: #fff; }
.custom-icon svg { width: 22px; height: 22px; }
.custom-copy { display: grid; gap: 2px; min-width: 0; }
.custom-copy strong { font-size: 15px; font-weight: 600; color: #1d1d1f; line-height: 1.3; }
.custom-copy span { font-size: 13px; line-height: 1.35; color: var(--md-sys-color-on-surface-variant); }
@media (max-width: 1080px) {
  .custom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .custom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .custom-grid li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .custom-grid li, .custom-icon { transition: none; }
  .custom-grid li:hover { transform: none; }
}

.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  align-items: start;
}
.faq-item {
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(60, 60, 67, 0.12);
  padding: 0 16px 0 18px;
  transition: border-color 0.25s ease;
}
.faq-item:hover,
.faq-item[open] { border-color: rgba(21, 0, 255, 0.35); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  cursor: pointer;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.35;
  list-style: none;
  color: #1d1d1f;
  transition: color 0.25s ease;
}
.faq-item[open] summary { color: #1500ff; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background-color: #eef1ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.3 6 8l3.8-3.7' fill='none' stroke='%231500ff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  transform: none;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.faq-item[open] summary::after {
  background-color: #e4e9ff;
  transform: rotate(180deg);
}
.faq-answer {
  padding: 0 40px 16px 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
  line-height: 1.45;
}
.faq-answer p { margin: 0; }

.fact-pending {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  border-radius: 4px;
  padding: 0 0.25em;
}
body[data-page="toys"] .fact-pending,
body[data-page="rugs"] .fact-pending,
body[data-page="vases"] .fact-pending,
body[data-page="sculptures"] .fact-pending,
body[data-page="products"] .range-specs .fact-pending,
body[data-page="home-lifestyle"] .fact-pending {
  background: none;
  padding: 0;
  font-size: 0;
  line-height: 0;
}
body[data-page="toys"] .fact-pending::after,
body[data-page="rugs"] .fact-pending::after,
body[data-page="vases"] .fact-pending::after,
body[data-page="sculptures"] .fact-pending::after,
body[data-page="products"] .range-specs .fact-pending::after,
body[data-page="home-lifestyle"] .fact-pending::after {
  content: "Confirmed per enquiry";
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: #6e6e73;
}
.fact-note {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

.page-hero + .section:has(.range-list) { padding-top: 24px; }
.section > .wrap.range-list:not(.prose):not(.split):not(.cta-band) {
  display: block;
}
.range-item + .range-item { margin-top: 28px; }
.range-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
.range-item {
  min-width: 0;
  scroll-margin-top: calc(var(--header) + 24px);
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(21, 0, 255, 0.22);
  background: #fff;
  box-shadow: 0 16px 40px rgba(21, 0, 255, 0.12);
}
.range-spec .kicker {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #f2f3ff;
  color: #1500ff;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: none;
  box-shadow: 0 10px 28px rgba(21, 0, 255, 0.14), 0 2px 8px rgba(21, 0, 255, 0.06);
}
.range-item:nth-child(even) .range-photo { order: 2; }
.range-spec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  box-sizing: border-box;
  padding-block: clamp(22px, 3vw, 40px);
}
.range-item:nth-child(even) .range-spec { padding-left: 28px; }
.range-photo {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  height: auto;
  aspect-ratio: 11 / 10;
  align-self: center;
  border-radius: var(--md-sys-shape-corner-large);
  background: #f2f2f7;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.06), 0 0 0 1px rgba(29, 29, 31, 0.06);
  transition: box-shadow 0.55s ease;
}
.range-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.32s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (pointer: fine) {
  .range-photo:hover {
    box-shadow: 0 18px 40px rgba(20, 20, 40, 0.1), 0 0 0 1px rgba(29, 29, 31, 0.06);
  }
}
.range-photo img.is-pack,
.range-photo img[src*="vases.webp"] { object-fit: contain; background: #fff; }
.range-photo.is-fit::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: var(--fit-bg) center / cover no-repeat;
  filter: blur(28px) saturate(1.1);
  opacity: 0.7;
}
.range-photo img.is-fit { object-fit: contain; }
.range-spec h2 { margin: 0 0 12px; }
.range-spec > p:not(.kicker) {
  color: #6e6e73;
  font-size: 15px;
  line-height: 1.5;
  max-width: 34rem;
}
.range-specs {
  margin: 28px 0 0;
  border-top: 1px solid rgba(60, 60, 67, 0.1);
}
.range-specs > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(60, 60, 67, 0.1);
}
.range-specs dt {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.8;
  text-transform: uppercase;
}
.range-specs dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
.range-specs.is-cats > div {
  grid-template-columns: minmax(11.5rem, 0.9fr) minmax(0, 1.2fr);
  align-items: baseline;
}
.range-specs.is-cats dt {
  color: #1d1d1f;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.35;
  text-transform: none;
}
.range-specs.is-cats dd { color: #6e6e73; }
.range-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.range-actions .btn { width: auto; }
.range-scroller {
  position: relative;
  margin-top: 36px;
}
.range-arrow {
  position: absolute;
  top: calc(50% - 6px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
  color: #1500ff;
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: 0 10px 24px rgba(21, 0, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transform: translateY(-50%);
  cursor: pointer;
}
.range-arrow.is-prev { left: 10px; }
.range-arrow.is-next { right: 10px; }
.range-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.range-strip {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
}
.range-strip li {
  position: relative;
  flex: 0 0 auto;
  width: clamp(132px, 15vw, 176px);
  aspect-ratio: 4 / 5;
  border-radius: var(--md-sys-shape-corner-small);
  background: #fff;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.06);
}
.range-strip li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.08);
  pointer-events: none;
  transition: box-shadow 0.2s ease;
}
.range-strip li:hover::after { box-shadow: inset 0 0 0 1.5px rgba(21, 0, 255, 0.45); }
.range-strip li.is-selected::after { box-shadow: inset 0 0 0 2px #1500ff; }
.range-thumb {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.range-thumb:focus-visible {
  outline: 2px solid #1500ff;
  outline-offset: -4px;
}
.range-strip.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.range-strip.is-dragging .range-thumb { cursor: grabbing; }
@media (pointer: fine) { .range-strip { cursor: grab; } }
.range-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: scale(1);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (pointer: fine) {
  .range-strip li:hover img { transform: scale(1.045); }
  .range-strip li:hover img[src*="/vases/"],
  .range-strip li:hover img[src*="/sculptures/"] { transform: none; }
}
.range-strip img[src*="/vases/"],
.range-strip img[src*="/sculptures/"] { object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .range-photo,
  .range-photo img,
  .range-strip img,
  .range-strip li::after { transition: none; }
  .range-photo img,
  .range-strip img { transform: none; }
}
@media (max-width: 820px) {
  .range-item + .range-item { margin-top: 20px; }
  .range-item { padding: 16px; }
  .range-scroller { margin-top: 24px; }
  .range-strip { margin-top: 0; }
  .range-banner { grid-template-columns: minmax(0, 1fr); }
  .range-item:nth-child(even) .range-photo { order: 0; }
  .range-spec { min-height: 0; padding-block: 20px 0; }
  .range-photo { height: auto; aspect-ratio: 11 / 10; }
  .range-specs > div { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .range-specs.is-cats > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.spec-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.06), 0 0 0 1px rgba(29, 29, 31, 0.06);
}
.spec-table caption { text-align: left; padding: 18px 20px 0; }
.spec-table th, .spec-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(60, 60, 67, 0.1);
}
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table th {
  width: 34%;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crumbs { padding-top: 20px; }
/* The cover hero tucks under the fixed header, so a breadcrumb above it is
   hidden anyway and only pushes the hero down, leaving a strip at the top. */
main > .crumbs:has(+ .page-hero) { display: none; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.crumbs a { color: var(--md-sys-color-primary); text-decoration: none; }

/* Inner pages use the same cover as the home hero: a pale blue wash, a large
   headline, and the pill quote button. Shorter than the home screen so the
   page content still starts on the first scroll. */
.page-hero {
  position: relative;
  margin-top: calc((var(--header) + 18px) * -1);
  padding: calc(var(--header) + 72px) 0 80px;
  overflow: hidden;
  text-align: center;
  background: #fff;
  color: #353535;
}
.page-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 88% 100% at 50% 0%, #c9d0ff 0%, rgba(228, 232, 255, 0.78) 48%, rgba(255, 255, 255, 0) 92%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .crumbs { padding-top: 0; margin-bottom: 22px; }
.page-hero .crumbs ol { justify-content: center; }
.page-hero .eyebrow { margin-inline: auto; margin-bottom: 18px; }
.page-hero h1 {
  max-width: 14em;
  margin: 0 auto 16px;
  font-size: clamp(2.45rem, 4.8vw, 4.35rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.page-hero h1.h1-wide { max-width: 20em; text-wrap: balance; }
.page-hero .wrap-narrow h1 {
  max-width: 16em;
  font-size: clamp(2.1rem, 3.8vw, 3.35rem);
  line-height: 1.08;
}
.page-hero .lede,
.page-hero .hero-note { margin-inline: auto; }
.page-hero .lede {
  max-width: 38rem;
  color: #353535;
  font-size: 17px;
  line-height: 1.5;
}
.page-hero .hero-note {
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
  max-width: 36rem;
  color: #6e6e73;
  font-size: 15px;
}
.page-hero .hero-note a { color: #1500ff; font-weight: 600; text-decoration: none; }
.page-hero .hero-note a:hover { text-decoration: underline; }
.page-hero .actions { justify-content: center; margin-top: 28px; }
.page-hero .actions .btn { width: auto; }
.page-hero .actions .btn-primary:not(.btn-metal) {
  gap: 12px;
  padding: 4px 4px 4px 18px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--metal-angle), #d5deff, #ffffff, #001aff, #9eb4ff, #ffffff, #d5deff) border-box;
  color: #001aff;
  box-shadow: 0 10px 28px rgba(120, 150, 255, 0.45);
  animation: metal-spin 4.5s linear infinite;
}
.page-hero .actions .btn-primary:not(.btn-metal):hover {
  filter: none;
  box-shadow: 0 12px 32px rgba(90, 130, 255, 0.55);
}
.page-hero .actions .btn-primary:not(.btn-metal)::after {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #001aff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h12M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 0.25s ease;
}
.page-hero .actions .btn-primary:not(.btn-metal):hover::after { transform: translateX(3px); }
.section > .wrap:not(.prose):not(.split):not(.cta-band) {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(14rem, 0.8fr);
  column-gap: 48px;
  row-gap: 12px;
  align-items: center;
}
.section > .wrap:not(.prose):not(.split):not(.cta-band) > * { grid-column: 1 / -1; }
.section > .wrap:not(.prose) > h2,
.section > .wrap:not(.prose) > .eyebrow:first-child,
.section > .wrap:not(.prose) > .eyebrow:first-child + h2 { text-align: left; }
.section > .wrap:not(.prose):not(.split):not(.cta-band) > h2:has(+ p:not(.fact-note)) { grid-column: 1; }
.section > .wrap:not(.prose) > h2 + p,
.section > .wrap:not(.prose) > .eyebrow:first-child + h2 + p {
  text-align: right;
  max-width: 34rem;
  margin-left: auto;
  margin-right: 0;
}
.section > .wrap:not(.prose):not(.split):not(.cta-band) > h2 + p:not(.fact-note) {
  grid-column: 2;
  max-width: none;
  margin: 0;
  justify-self: end;
}
/* The concept line is one wide measure: the heading keeps its own width and
   the description takes the rest, so it sits on the two lines it was written as. */
.section:has(#partner-title) > .wrap {
  grid-template-columns: max-content minmax(0, 1fr);
}
#partner-title + p {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}
/* A hairline under the section title and its description. It takes the row
   after that pair so it cannot land above them. An eyebrow, when there is
   one, occupies the row before the title. */
.section > .wrap:not(.prose):not(.split):not(.cta-band):not(.contact-grid):not(.india-split):has(> h2)::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: 2;
  height: 1px;
  margin-top: 8px;
  background: #c7c7cc;
  pointer-events: none;
}
.section > .wrap:not(.prose):not(.split):not(.cta-band):not(.contact-grid):not(.india-split):has(> .eyebrow:first-child + h2)::after {
  grid-row: 3;
}
.section > .wrap::after {
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.section > .wrap:has(> h2.reveal-pending)::after { transform: scaleX(0); transition: none; }
.section > .wrap.prose > h2 {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #c7c7cc;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .section-head,
  .section > .wrap.prose > h2 { border-bottom-width: 0.5px; }
  .section > .wrap:not(.prose):not(.split):not(.cta-band):not(.contact-grid):not(.india-split):has(> h2)::after {
    height: 0.5px;
  }
}
.section > .wrap:not(.prose) > h2 + .pill-list,
.section > .wrap:not(.prose) > p + .pill-list { justify-content: flex-start; }
.section.section-center > .wrap:not(.prose) > h2 { text-align: center; }
.section > .wrap:not(.prose) > h2 + .pill-list.audience-pills { justify-content: center; }
.audience-pills { gap: 10px; margin-top: 22px; }
.audience-pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 6px;
  border: 1px solid #c5d4ff;
  background: #fff;
  box-shadow: 0 6px 16px rgba(20, 30, 80, 0.08);
  color: #1d1d1f;
}
.audience-pills svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 999px;
  background: var(--icon-base);
  box-sizing: border-box;
  flex: none;
  color: var(--icon-color);
}
.why-grid { margin-top: 28px; }
.why-grid article {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
}
.why-icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--icon-base);
  color: var(--icon-color);
}
.why-icon svg { width: 22px; height: 22px; }
.why-grid h3 { margin: 2px 0 0; }
.cta-band {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 20px;
}
.cta-band .actions { justify-content: center; }
/* Dark brand-blue band. Beats the alternating section wash. */
main > section.section.ink:has(.cta-band) {
  position: relative;
  overflow: hidden;
  padding-top: 128px;
  padding-bottom: 128px;
  background:
    radial-gradient(70% 80% at 50% 115%, rgba(21, 0, 255, 0.9), transparent 58%),
    radial-gradient(42% 55% at 82% 0%, rgba(110, 128, 255, 0.45), transparent 62%),
    linear-gradient(165deg, #050022 0%, #0a0092 46%, #1500ff 100%);
  color: #fff;
}
main > section.section.ink:has(.cta-band) h2 {
  background-image: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
main > section.section.ink:has(.cta-band) h2 + p {
  margin-top: 18px;
}
.cta-band > div:not(.actions) { display: grid; justify-items: center; }
.cta-band > div > .eyebrow { margin-bottom: 22px; }
main > section.section.ink:has(.cta-band) .cta-band > div > p:not(.eyebrow) {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
}
.cta-band .actions { margin-top: 18px; }
main > section.section.ink:has(.cta-band) .hl {
  background-image: linear-gradient(135deg, #ffffff 0%, #d5dcff 100%);
  color: transparent;
  -webkit-text-fill-color: transparent;
}
main > section.section.ink:has(.cta-band) p {
  color: rgba(255, 255, 255, 0.82);
}
main > section.section.ink:has(.cta-band) .btn-metal {
  --metal-fill: #ffffff;
  color: #1500ff;
}
main > section.section.ink:has(.cta-band) .btn-metal:hover {
  --metal-fill: #f4f4ff;
  color: #1500ff;
}
main > section.section.ink:has(.cta-band) .btn-ghost {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
main > section.section.ink:has(.cta-band) .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.28);
}
@media (max-width: 860px) {
  main > section.section.ink:has(.cta-band) { padding-top: 80px; padding-bottom: 80px; }
}

.enquiry-form {
  display: grid;
  gap: 16px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px;
  box-shadow: var(--md-sys-elevation-1);
}
.enquiry-form h2 { font-size: 1.5rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.phone-box {
  display: flex;
  align-items: stretch;
  min-height: 48px;
  border-radius: 12px;
  background: #f2f2f7;
}
.phone-box:focus-within {
  outline: 2px solid var(--md-sys-color-primary);
  background: #fff;
}
.phone-code {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 14px;
  border-right: 1px solid rgba(60, 60, 67, 0.18);
  margin: 10px 0;
  white-space: nowrap;
}
.phone-code::after {
  content: "";
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.3 6 8l3.8-3.7' fill='none' stroke='%231d1d1f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field .phone-code select {
  position: absolute;
  inset: -10px 0;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.field .phone-box input,
.field .phone-box input:focus {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: transparent;
  outline: none;
}
.field.pair-field { align-content: start; }
.field.pair-field textarea,
.field.pair-field .upload-drop { height: 104px; min-height: 104px; }
.field.pair-field .upload-drop { align-content: center; }
.field label { font-size: 12px; font-weight: 500; color: var(--md-sys-color-on-surface-variant); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: #f2f2f7;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-color: #f2f2f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.3 6 8l3.8-3.7' fill='none' stroke='%231d1d1f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 0;
  background-color: #fff;
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--md-sys-color-error);
  box-shadow: inset 0 0 0 1.5px rgba(215, 0, 21, 0.55);
}
.phone-box:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px rgba(215, 0, 21, 0.55); }
.form-error {
  margin: 0;
  color: #d70015;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.form-error[hidden] { display: none; }
.field-note, .form-status { color: var(--md-sys-color-on-surface-variant); font-size: 13px; }
.form-status:not(:empty) {
  padding: 12px 14px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.form-submit { justify-self: start; min-width: 190px; border: 0; cursor: pointer; }
.form-submit[disabled] { opacity: 0.6; cursor: progress; }

.upload-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 20px 16px;
  border: 1.5px dashed rgba(60, 60, 67, 0.28);
  border-radius: 12px;
  background: #f2f2f7;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.upload-drop:hover,
.upload-drop.is-dragging { border-color: var(--md-sys-color-primary); background: #fff; }
.upload-drop:focus-within { outline: 2px solid var(--md-sys-color-primary); outline-offset: 0; }
.upload-icon { color: var(--icon-color); line-height: 0; }
.upload-title { font-size: 14px; color: #1d1d1f; }
.upload-title strong { font-weight: 600; color: var(--md-sys-color-primary); }
.upload-hint, .upload-help { font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.upload-hint { font-size: 8px; line-height: 1.4; }
.upload-help { margin: 0; }
.upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.upload-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.upload-list:empty { display: none; }
.upload-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border-radius: 10px;
  background: #f2f2f7;
  font-size: 13px;
}
.upload-list .upload-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1d1d1f; }
.upload-list .upload-size { color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }
.upload-remove {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.upload-remove:hover { background: rgba(60, 60, 67, 0.12); color: #1d1d1f; }
.brief-head {
  margin-bottom: 28px;
  border-bottom: 0;
  padding-bottom: 0;
}
.brief-head .eyebrow { grid-row: 1; }
.brief-head h2 { grid-row: 2; align-self: start; }
.brief-side {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  max-width: 28rem;
  text-align: right;
}
.brief-side p {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 17px;
  line-height: 1.47;
}
.brief-side img {
  width: 120px;
  height: auto;
}
main > .section#start { background: #ffffff; }
main > .section:not(.make-band)[aria-labelledby="models"] {
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}
.brief-form {
  width: 100%;
  margin-inline: auto;
  gap: 0;
  padding: 32px 36px 28px;
  border-radius: 28px;
  background: #fff;
  border-color: rgba(21, 0, 255, 0.07);
  box-shadow: 0 28px 72px -16px rgba(21, 0, 255, 0.16), 0 8px 28px rgba(80, 110, 255, 0.08);
}
.brief-form-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(60, 60, 67, 0.1);
}
.brief-form-head h2 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; }
.brief-form-title {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.brief-time {
  display: inline-flex;
  width: fit-content;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(21, 0, 255, 0.08);
  color: #1500ff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.brief-form-mark {
  width: 56px;
  height: auto;
  margin: 0;
}

.brief-group {
  display: grid;
  gap: 18px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(60, 60, 67, 0.1);
}
.brief-group-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 12px;
  align-content: start;
}
.brief-step {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--icon-base);
  color: var(--icon-color);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.brief-group-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: #1d1d1f; }
.brief-group-head p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--md-sys-color-on-surface-variant); }

.brief-form .form-grid { gap: 18px 16px; align-items: start; }
.brief-form .field { gap: 8px; }
.brief-form .field label { font-size: 13px; color: #3a3a3c; }
.brief-form .field input,
.brief-form .field select,
.brief-form .field textarea { min-height: 46px; padding: 11px 14px; font-size: 15px; }
.brief-form .field ::placeholder { color: #a1a1a6; }
.brief-form .field textarea { min-height: 140px; }
.brief-form .upload-drop { min-height: 140px; align-content: center; padding: 18px 14px; }
.brief-form .upload-help { margin-top: 2px; }

.brief-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-top: 24px;
}
.brief-form-foot .form-error { order: -1; flex-basis: 100%; margin-bottom: -6px; color: #d70015; text-align: right; }
.brief-form-foot p { margin: 0; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.brief-form-foot .form-submit { justify-self: auto; }
.brief-form .form-status:not(:empty) { margin-top: 16px; }

@media (min-width: 980px) {
  .brief-group { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .brief-group-head { grid-template-columns: 1fr; gap: 10px; }
  .brief-step { grid-row: auto; }
  .brief-form .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brief-form .field.span-2 { grid-column: span 2; }
  .brief-form .upload-field { grid-column: span 1; }
  .brief-form .form-grid-halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 979px) {
  .brief-form .field.span-2 { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .brief-form { padding: 24px 18px 20px; border-radius: 22px; }
  .brief-form-foot { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .brief-form-foot .form-submit { width: 100%; min-width: 0; }
  .brief-form-foot .form-error { order: 1; flex-basis: auto; margin-bottom: 0; text-align: center; }
}

.prose { display: grid; gap: 16px; color: #1d1d1f; }
.prose h2 {
  color: #000;
  margin-top: 18px;
  font-size: clamp(1.75rem, 2.8vw, 2.35rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.prose p { max-width: 40rem; font-size: 17px; line-height: 1.55; }
.prose a { color: #1500ff; font-weight: 600; text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose ul, .prose ol { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.prose li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(20, 20, 40, 0.05);
  font-weight: 500;
}
.prose li a::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.article-cta { margin-top: 8px; }
.article-cta .btn { width: auto; }
.contact-grid > :first-child h2 {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}
@media (min-width: 980px) {
  .contact-grid > :first-child:not(.enquiry-intro)::after {
    content: "";
    display: block;
    width: 148px;
    height: 166px;
    margin-top: 28px;
    background: url("Assets/Crystal%20Logo/cover-mark.webp") center / contain no-repeat;
  }
}

.site-footer {
  background: #fff;
  color: #1d1d1f;
  padding: 76px 0 64px;
}
.footer-grid { display: grid; grid-template-columns: minmax(18rem, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 28px; }
.footer-grid > div:nth-child(n + 3):nth-child(-n + 5) { position: relative; }
.footer-grid > div:nth-child(n + 3):nth-child(-n + 5)::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(220, 232, 255, 0) 0,
    #dce8ff 28px,
    #dce8ff calc(100% - 28px),
    rgba(220, 232, 255, 0) 100%
  );
}
.footer-brand { padding-right: 20px; }
.footer-brand > p { max-width: 36ch; }
.site-footer a { color: #1d1d1f; text-decoration: none; }
.site-footer a:hover { color: var(--md-sys-color-primary); }
.site-footer h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  background-image: none;
  color: #6e6e73;
  -webkit-text-fill-color: #6e6e73;
}
.footer-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--icon-base);
  color: var(--icon-color);
  -webkit-text-fill-color: var(--icon-color);
  flex: none;
}
.footer-icon svg { width: 15px; height: 15px; display: block; stroke-width: 1.7; }
.site-footer ul { list-style: none; display: grid; gap: 8px; font-size: 15px; }
.site-footer ul li:not(:has(a)) { color: #1d1d1f; }
.site-footer p { color: #6e6e73; font-size: 15px; line-height: 1.45; }
.footer-logo {
  position: relative;
  display: block;
  width: 148px;
  height: 38px;
  margin-bottom: 12px;
}
.footer-logo::after { top: 17px; }
.footer-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #1500ff;
  -webkit-mask: url("Assets/LOGOS%20/NA-%20white.svg") center / contain no-repeat;
  mask: url("Assets/LOGOS%20/NA-%20white.svg") center / contain no-repeat;
}
.footer-logo img {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}
.site-footer .footer-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 2px;
  padding: 0;
  list-style: none;
}
.footer-marks li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 6px 8px;
  background: #fff;
  border-radius: 10px;
}
.footer-marks img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
}
.footer-marks li.is-dgft {
  height: 48px;
  padding: 0 2px;
  overflow: hidden;
}
.footer-marks li.is-dgft img {
  height: 60px;
  width: auto;
  max-width: none;
}
.contact-lines { display: grid; gap: 10px; margin-top: 14px; }
.site-footer .contact-lines {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
}
.site-footer .contact-emails {
  align-items: flex-start;
}
.site-footer .contact-email-list {
  display: grid;
  gap: 10px;
  padding-top: 3px;
}
.site-footer .contact-line { white-space: nowrap; }
.contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1d1d1f;
}
.contact-line .icon-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--icon-base);
  color: var(--icon-color);
}
.contact-line svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-footer .contact-line,
.site-footer .contact-line a { color: #1d1d1f; }
.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(60, 60, 67, 0.12);
  font-size: 10px;
  color: #6e6e73;
}
.footer-base p {
  font-size: 10px;
  line-height: 1.35;
}

.mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 35;
  grid-template-columns: 1fr;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid rgba(60, 60, 67, 0.12);
}
.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 8px;
}
.mobile-bar a:first-child { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

@media (min-width: 980px) {
  .site-header { top: 20px; margin-top: 20px; }
  .hero-cover { margin-top: calc((var(--header) + 20px) * -1); }
  .site-header.is-scrolled:not(.site-header--on-cover) { width: min(var(--page), calc(100% - var(--gutter))); }
  .nav-desktop { display: flex; }
  .nav-toggle, .mobile-menu { display: none; }
  .site-header.is-open .mobile-menu { display: none; }
  .site-header--on-cover,
  .site-header--on-cover.is-scrolled {
    top: 28px;
    width: min(var(--page), calc(100% - var(--gutter)));
  }
  .site-header--on-cover .site-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 32px;
    min-height: 46px;
  }
  .site-header--on-cover .nav-desktop { display: contents; }
  .site-header--on-cover .nav-links {
    justify-content: flex-end;
    gap: 8px;
  }
}
@media (min-width: 980px) {
  .section-head:has(#journey-title) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .section-head:has(#journey-title) > p:not(.eyebrow) {
    white-space: nowrap;
    max-width: none;
  }
}
@media (max-width: 979px) {
  .footer-brand { padding-right: 0; }
  .footer-grid > div:nth-child(n + 3):nth-child(-n + 5)::before { display: none; }
  .site-footer .contact-lines { grid-column: 1 / -1; }
  .section-head, .hero-grid, .split, .contact-grid, .about-grid, .cta-band, .footer-grid,
  .section > .wrap:not(.prose):not(.split):not(.cta-band) { grid-template-columns: minmax(0, 1fr); }
  .section-head h1,
  .section-head h2,
  .section-head p,
  .section-head .eyebrow,
  .section > .wrap:not(.prose):not(.split):not(.cta-band) > h2:has(+ p:not(.fact-note)),
  .section > .wrap:not(.prose):not(.split):not(.cta-band) > h2 + p:not(.fact-note) { grid-column: 1 / -1; }
  .brief-head h2,
  .brief-side { grid-row: auto; }
  .brief-side {
    grid-column: 1;
    justify-self: start;
    align-items: flex-start;
    max-width: none;
    text-align: left;
  }
  .brief-side p { text-align: left; }
  .collection-board { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .collection-photos { min-height: 420px; }
  /* The title and description stack, so the hairline moves down with them. */
  .section > .wrap:not(.prose):not(.split):not(.cta-band):not(.contact-grid):not(.india-split):has(> h2 + p)::after {
    grid-row: 3;
  }
  .section > .wrap:not(.prose):not(.split):not(.cta-band):not(.contact-grid):not(.india-split):has(> .eyebrow:first-child + h2 + p)::after {
    grid-row: 4;
  }
  #partner-title + p br,
  .enquiry-intro .lede br { display: none; }
  .cap-grid, .case-grid { grid-template-columns: 1fr 1fr; }
  .card-grid > * {
    flex-basis: calc((100% - 16px) / 2);
    width: calc((100% - 16px) / 2);
  }
  .process-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .wrap, .wrap-narrow,
  body[data-page="home"] main > .section .wrap:not(.wrap-narrow),
  body[data-page="home"] .site-footer .wrap { width: min(var(--page), calc(100% - 32px)); }
  .cap-grid, .case-grid, .process-steps, .form-grid, .why-grid, .model-grid, .model-grid.leader-grid, .mosaic, .faq-list { grid-template-columns: 1fr; }
  .card-grid > * { flex-basis: 100%; width: 100%; }
  .page-hero { padding: calc(var(--header) + 52px) 0 48px; }
  .page-hero h1 { font-size: clamp(2rem, 9vw, 2.7rem); }
  .page-hero .wrap-narrow h1 { font-size: clamp(1.85rem, 8vw, 2.35rem); }
  .page-hero .actions { flex-direction: column; align-items: center; }
  .category-photo {
    width: calc(100% - 32px);
    margin-top: -24px;
    padding: 8px;
    border-radius: 22px;
  }
  .category-photo img,
  .category-photo img[src*="salabhanjika-mobile"] { height: min(280px, 62vw); }
  /* Eight columns will not fit a phone, so the timeline turns on its side: the
     rail runs down the left and every step reads top to bottom. The inline
     grid-column from the generator stops applying once the track is a flex
     column, so the zigzag simply collapses. */
  .journey-pin,
  .journey-pin.is-journey-paged { height: auto; }
  .journey-pin.is-journey-paged .journey-sticky {
    position: static;
    height: auto;
    display: block;
  }
  .journey-stage {
    overflow: visible;
    margin-left: 0;
    padding-left: 0;
  }
  .journey-timeline.is-paged {
    width: auto;
    transform: none;
  }
  .journey-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
  }
  .journey-item,
  .journey-item.is-up,
  .journey-item.is-down {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
  }
  .journey-item.is-up .journey-copy,
  .journey-item.is-down .journey-copy {
    order: 0;
    width: auto;
    flex: 1 1 auto;
    margin: 0;
    padding-bottom: 2px;
  }
  .journey-item.is-up .journey-marker,
  .journey-item.is-down .journey-marker {
    flex-direction: column-reverse;
    margin: 0;
    align-self: stretch;
  }
  .journey-item .journey-stem {
    flex: 1 1 auto;
    height: auto;
    transform-origin: top center;
  }
  .journey-rail {
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    transform: none;
  }
  .journey-timeline.is-scroll-linked .journey-rail-fill {
    width: 100%;
    height: calc(var(--progress, 0) * 100%);
  }
  .start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .card-grid > *, .card-grid.cards-2 > * {
    flex-basis: 100%;
    width: 100%;
  }
  .why-grid article, .model-grid article { padding-right: 0; }
  .setup-grid { grid-template-columns: 1fr; }
  .setup-visual { height: 180px; }
  .mosaic-photo { grid-row: auto; min-height: 240px; }
  .mobile-bar { display: grid; }
  body { padding-bottom: 52px; }
  .footer-base { flex-direction: column; }
  .section { padding: 48px 0; }
  .section.make-band {
    margin-top: -36px;
    padding-top: 96px;
    padding-bottom: 48px;
  }
  .section.make-band::before { height: 88px; }
  /* One across on a phone: half a phone's width is smaller than the quarter of a
     desktop this change was made to get away from. */
  .make-cluster {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .collection-photos { min-height: 280px; grid-template-rows: 120px 110px 110px; }
  .collection-row { padding: 14px 2px; }
  .make-cluster > .cover-card:nth-child(-n + 2),
  .make-cluster > .cover-card:nth-child(n + 3) { grid-column: auto; }
  .cover-meta { margin: 12px 4px 2px; gap: 12px; }
  .cover-card h3 { font-size: 1.08rem; }
  .cover-go { width: 36px; height: 36px; }
  .make-cluster > .stack-card:nth-child(1),
  .make-cluster > .stack-card:nth-child(2),
  .make-cluster > .stack-card:nth-child(3),
  .make-cluster > .stack-card:nth-child(4) { grid-column: auto; }
  .stack-card a { min-height: 220px; padding: 14px 4px 14px 16px; }
  .photo-stack { flex-basis: 42%; min-height: 190px; }
  .stack-card h3 { font-size: 1.08rem; }
  .make-band .card-split .product-card-media {
    flex: 0 0 40%;
    width: 40%;
    height: auto;
    min-height: 140px;
  }
  .make-band .card-stack .product-card-media {
    flex: none;
    width: 100%;
    height: 168px;
  }
  .hero-cover,
  body[data-page="home"] .hero-cover {
    min-height: 0;
    padding: calc(var(--header) + 28px) 20px 8px;
  }
  body[data-page="home"] .hero-cover { padding-bottom: 148px; }
  .stat-bar li {
    gap: 8px;
    min-height: 0;
    padding: 16px 8px 14px;
  }
  .stat-bar li + li::before { top: 16%; bottom: 16%; }
  .stat-icon { width: 34px; height: 34px; }
  .stat-icon svg { width: 16px; height: 16px; }
  .stat-figure { font-size: 1.05rem; }
  .stat-copy > span { font-size: 11px; white-space: normal; }
  .hero-globe-crop {
    --globe: min(720px, 94vw);
  }
}

@media (max-width: 400px) {
  .stat-figure { font-size: 0.86rem; letter-spacing: -0.04em; }
  .stat-bar li { padding-left: 4px; padding-right: 4px; }
  .stat-copy > span { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .ticker ul[aria-hidden="true"] { display: none; }
  .tag-marquee-track { animation: none; }
  .tag-marquee ul[aria-hidden="true"] { display: none; }
  /* Without the loop the row has to wrap, or the tags past the fold are
     unreachable. */
  .tag-marquee ul { flex-wrap: wrap; }
  .btn-metal,
  .hero-cover .btn-metal,
  .site-header .nav-btn.btn-metal,
  .hero-cta,
  .page-hero .actions .btn-primary:not(.btn-metal) {
    animation: none;
  }
  .product-card-media img,
  .product-card h3,
  .product-card .card-link,
  .product-card .card-link::after,
  .capability-card,
  .process-step { transition: none; }
  .product-card:hover .card-link::after,
  .product-card:focus-within .card-link::after { transform: none; }
  .site-header--on-cover .site-bar::before,
  .hero-globe-pin,
  .hero-globe-pin span,
  .photo-stack .shot,
  .stack-card,
  .setup-card { transition: none; }
}

.section:has(.india-split) { padding: 64px 0; }
.section > .wrap.india-split:not(.prose):not(.split):not(.cta-band) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  align-items: center;
  column-gap: 64px;
}
.section > .wrap.india-split:not(.prose):not(.split):not(.cta-band) > .india-copy { grid-column: 1; }
.section > .wrap.india-split:not(.prose):not(.split):not(.cta-band) > .india-photo { grid-column: 2; }
.india-copy { max-width: none; }
.india-copy h2 {
  margin: 0;
  max-width: none;
  text-align: left;
  font-size: clamp(2rem, 2.7vw, 2.5rem);
  line-height: 1.12;
  text-wrap: pretty;
}
.india-copy p:not(.eyebrow) {
  margin: 18px 0 0;
  max-width: none;
  text-align: left;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 16px;
  line-height: 1.5;
}
.india-photo { margin: 0; }
.india-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 24px;
}
@media (max-width: 979px) {
  .section > .wrap.india-split:not(.prose):not(.split):not(.cta-band) {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .section > .wrap.india-split:not(.prose):not(.split):not(.cta-band) > .india-photo { grid-column: 1; }
  .india-photo img { aspect-ratio: 4 / 3; }
}

/* The supporting line in the What we make head keeps the two-column split so it
   reads right-aligned against the edge of the wrap. Appended here because an
   earlier rule collapses this one head to a single left-aligned column; same
   specificity, so source order decides. Phones keep the stacked default. */
@media (min-width: 721px) {
  .section-head:has(#make-title) {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 42rem);
  }
  .section-head:has(#make-title) > p:not(.eyebrow) {
    grid-column: 2;
    justify-self: end;
    max-width: 42rem;
    text-align: right;
  }
}

.enquiry-mark { display: none; }
/* The enquiry sections pair the brief on the left with the form on the right.
   .contact-grid already asks for two columns, but every direct child of a section
   wrap is set to span both, so the halves stacked. Repeating the wrap's own
   :not() chain here is what makes the columns hold. */
@media (min-width: 980px) {
  .section > .wrap.contact-grid:not(.prose):not(.split):not(.cta-band) {
    grid-template-columns: minmax(0, 0.78fr) minmax(360px, 1.22fr);
    column-gap: 56px;
    align-items: start;
  }
  .section > .wrap.contact-grid:not(.prose):not(.split):not(.cta-band) > :first-child { grid-column: 1; }
  .section > .wrap.contact-grid:not(.prose):not(.split):not(.cta-band) > :nth-child(2) { grid-column: 2; }
  .contact-grid .lede { max-width: none; }
  .section:has(#home-form-title) > .wrap.contact-grid { align-items: stretch; }
  .enquiry-intro {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .enquiry-mark {
    display: block;
    width: min(280px, 76%);
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: -96px;
    align-self: center;
    transform: translateX(-32px);
  }
}
/* Paired fields are too narrow to read in the side column until the window has
   the room for them, so they run one per row through that band. */
@media (min-width: 980px) and (max-width: 1150px) {
  .contact-grid .form-grid { grid-template-columns: 1fr; }
}

/* Insights index follows a magazine listing: two lead stories, a topic filter,
   then a card grid. Colour, type, and card shape stay with the rest of the site. */
.insights-recent { padding-top: 36px; }
.insights-feature,
.insights-grid {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.insights-feature { grid-template-columns: 1fr 1fr; }
.insights-feature.is-single { grid-template-columns: 1fr; }
.insights-feature.is-empty { display: none; }
.insights-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insight-post {
  min-width: 0;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.06), 0 0 0 1px rgba(29, 29, 31, 0.06);
  overflow: hidden;
}
.insight-post a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.insight-post-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f2f2f7;
}
.insights-feature .insight-post-media { aspect-ratio: 16 / 10; }
.insights-feature.is-single .insight-post-media {
  aspect-ratio: 21 / 9;
  max-height: 420px;
}
.insight-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.insight-post:hover img,
.insight-post:focus-within img { transform: scale(1.06); }
.insight-post-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 18px 18px 20px;
}
.insights-feature .insight-post-body { padding: 22px 24px 24px; }
.insight-post .kicker { margin: 0; }
.insight-post h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  transition: color 0.35s ease;
}
.insights-feature .insight-post h3 {
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1.12;
}
.insight-post:hover h3,
.insight-post:focus-within h3 { color: #1500ff; }
.insight-post-body > p:not(.kicker):not(.insight-byline) {
  margin: 0;
  color: #6e6e73;
  font-size: 14.5px;
  line-height: 1.45;
}
.insight-byline {
  margin: 0;
  margin-top: auto;
  padding-top: 14px;
  color: #1d1d1f;
  font-size: 13px;
  font-weight: 600;
}
.insights-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 22px;
}
.insights-toolbar-label {
  margin: 0;
  color: #6e6e73;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.insights-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.insights-filters button {
  appearance: none;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(29, 29, 31, 0.16);
  border-radius: 999px;
  background: #fff;
  color: #1d1d1f;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.insights-filters button:hover { border-color: #1500ff; color: #1500ff; }
.insights-filters button.is-on {
  border-color: #1500ff;
  background: #1500ff;
  color: #fff;
}
.insights-filters button:focus-visible {
  outline: 2px solid #1500ff;
  outline-offset: 2px;
}
.insights-empty {
  margin: 22px 0 0;
  color: #6e6e73;
}
@media (max-width: 980px) {
  .insights-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .insights-recent { padding-top: 12px; }
  .insights-feature,
  .insights-grid { grid-template-columns: 1fr; }
  .insights-feature.is-single .insight-post-media { aspect-ratio: 3 / 2; max-height: none; }
}
.enquiry-popup {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background: rgba(20, 20, 40, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: enquiry-fade 0.35s ease;
}
.enquiry-popup[hidden] { display: none; }
body.enquiry-open { overflow: hidden; }
.enquiry-popup-frame {
  position: relative;
  width: min(1120px, 100%);
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(20, 20, 60, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.8);
  overflow: hidden;
  animation: enquiry-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.enquiry-popup-scroll { overflow: auto; }
.enquiry-popup-sheet.section { padding: 24px 32px; background: transparent; }
.enquiry-popup-sheet .enquiry-mark {
  width: min(200px, 70%);
  margin-left: 0;
  transform: none;
}
.enquiry-popup-sheet .enquiry-form { gap: 12px; padding: 20px 22px; }
.enquiry-popup-sheet .enquiry-form h2 { font-size: 1.3rem; margin-bottom: 0; }
.enquiry-popup-sheet .enquiry-form > p { margin: 0; }
.enquiry-popup-sheet .form-grid { gap: 10px 14px; }
.enquiry-popup-sheet .field { gap: 4px; }
.enquiry-popup-sheet .field input,
.enquiry-popup-sheet .field select { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.enquiry-popup-sheet .phone-box { min-height: 40px; }
.enquiry-popup-sheet .phone-code { margin: 8px 0; }
.enquiry-popup-sheet .field.pair-field textarea,
.enquiry-popup-sheet .field.pair-field .upload-drop { height: 92px; min-height: 92px; resize: none; }
.enquiry-popup-sheet .upload-drop { gap: 2px; padding: 10px 12px; }
.enquiry-popup-sheet .upload-help { font-size: 11px; line-height: 1.35; }
.enquiry-popup-sheet .upload-hint { font-size: 10px; line-height: 1.35; }
.enquiry-popup-sheet .form-submit { min-height: 44px; }
@media (min-width: 821px) and (max-height: 660px) {
  .enquiry-popup { padding-block: 16px; }
  .enquiry-popup-frame { max-height: calc(100vh - 32px); }
  .enquiry-popup-sheet.section { padding-block: 16px; }
  .enquiry-popup-sheet .enquiry-form { gap: 10px; padding-block: 16px; }
  .enquiry-popup-sheet .field.pair-field textarea,
  .enquiry-popup-sheet .field.pair-field .upload-drop { height: 68px; min-height: 68px; }
  .enquiry-popup-sheet .upload-hint { display: none; }
}
.enquiry-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #1500ff;
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: 0 10px 24px rgba(21, 0, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  cursor: pointer;
}
.enquiry-popup-close:focus-visible {
  outline: 2px solid #1500ff;
  outline-offset: 2px;
}
@keyframes enquiry-fade { from { opacity: 0; } }
@keyframes enquiry-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
}
@media (max-width: 820px) {
  .enquiry-popup { padding: 12px; }
  .enquiry-popup-sheet.section { padding: 48px 16px 20px; }
  .enquiry-popup-sheet .enquiry-mark { width: min(180px, 52%); margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .enquiry-popup,
  .enquiry-popup-frame { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .insight-post-media img { transition: none; }
  .insight-post:hover img,
  .insight-post:focus-within img { transform: none; }
}

.models-ready {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 40px;
  margin-top: 104px;
  padding-bottom: 40px;
  text-align: center;
}
.models-ready h2 { margin: 0; }
.models-ready .btn { width: auto; }

.reveal-pending { opacity: 0; }
.is-revealing { animation: scroll-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@keyframes scroll-reveal {
  from { opacity: 0; translate: 0 18px; }
}
@media print {
  .reveal-pending { opacity: 1; }
}

.crumbs { animation: hero-fade 0.6s ease backwards; }
.page-hero .wrap > *,
.case-hero-copy > *,
.hero-cover-copy > *,
.hero-cover .stat-bar {
  animation: hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.08s backwards;
}
.page-hero .wrap > .case-hero-copy { animation: none; }
:is(.page-hero .wrap, .case-hero-copy, .hero-cover-copy) > :nth-child(2) { animation-delay: 0.18s; }
:is(.page-hero .wrap, .case-hero-copy, .hero-cover-copy) > :nth-child(3) { animation-delay: 0.28s; }
:is(.page-hero .wrap, .case-hero-copy, .hero-cover-copy) > :nth-child(4) { animation-delay: 0.38s; }
:is(.page-hero .wrap, .case-hero-copy, .hero-cover-copy) > :nth-child(n+5) { animation-delay: 0.48s; }
.page-hero .wrap > .case-poster { animation-delay: 0.35s; }
.hero-cover .stat-bar { animation-delay: 0.5s; }
.hero-cover-copy > .hero-cta {
  animation: hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.28s backwards, metal-spin 4.5s linear infinite;
}
body[data-page="home"] .hero-cover-copy > h1 {
  animation: hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.08s backwards, hero-glow-sweep 1.8s cubic-bezier(0.45, 0, 0.25, 1) 0.7s;
}
@keyframes hero-in {
  from { opacity: 0; translate: 0 20px; }
}
@keyframes hero-fade {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .crumbs,
  .page-hero .wrap > *,
  .case-hero-copy > *,
  .hero-cover-copy > *,
  .hero-cover .stat-bar,
  .hero-cover-copy > .hero-cta,
  body[data-page="home"] .hero-cover-copy > h1 { animation: none; }
  body[data-page="home"] .hero-cover h1 { transition: none; }
}