/* KuarkTek — home page only: the three.js hero, the project route and the
   sections under it. */
/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow-x:clip;          /* clip, not hidden: no scroll container is created */
  z-index:2;
  display:flex;
  width:100%;
  min-height:100vh;
  padding:.38rem;
  border-radius:var(--r-md);
}
.hero-shell{
  flex:1 1 auto;min-width:0;display:flex;
  transform-origin:50% 50%;
  will-change:transform;
}
#gallery canvas{transform-origin:50% 50%;will-change:transform}
/* ---------- WebGL stage (fills the hero) ---------- */
#gallery{
  position:relative;flex:1 1 auto;min-width:0;min-height:0;align-self:stretch;
  overflow:hidden;background:#000;
  border-radius:calc(var(--r-md) - .38rem);
  /* vertical swipes scroll the page, horizontal swipes drag the wall */
  touch-action:pan-y;
  cursor:default;user-select:none;
  opacity:0;transition:opacity var(--dur-intro) var(--ease);
}
#gallery.ready{opacity:1}
#gallery.dragging,#gallery.dragging *{cursor:grabbing}
#gallery canvas{display:block;width:100%;height:100%}
#nowebgl{
  position:absolute;inset:0;z-index:5;display:none;place-items:center;text-align:center;
  padding:40px;font-family:var(--mono);font-size:var(--fs-tag);line-height:var(--lh-body);text-transform:uppercase;color:var(--muted);
}
#nowebgl.show{display:grid}
/* Anchored to the hero, not the viewport: it has to travel up and off with
   the hero, which is what gives the docked menu its entrance. */
.langswitch{
  position:absolute;top:var(--pad);right:calc(var(--pad) + var(--cta-w, 160px) + 26px);
  z-index:30;height:50px;display:flex;align-items:center;gap:var(--gap-2);
  font-size:var(--fs-body);font-weight:var(--fw-bold);letter-spacing:var(--ls-snug);
  color:var(--on-dark-soft);transition:color var(--dur) var(--ease);
}
.langswitch span{display:inline-block}
.langswitch svg{width:19px;height:19px;display:block;flex:0 0 auto}
body.project-open .langswitch{opacity:0;pointer-events:none;transition:opacity var(--dur)}
@media (max-width:900px){.langswitch{display:none}
}
.hero-foot{
  position:absolute;left:var(--hero-gutter);right:var(--hero-gutter);bottom:32px;z-index:30;
  will-change:transform;
  display:flex;align-items:flex-end;gap:var(--space-120);pointer-events:none;
}
.hero-foot > *{pointer-events:auto}
.filter{display:flex;flex:0 0 auto}
.hero-note{
  /* narrower in characters as it grows in size, so the line gets bigger
     without the block reaching any further toward the talk card */
  margin:0 0 2px;max-width:36ch;flex:0 1 auto;
  letter-spacing:var(--ls-snug);text-wrap:pretty;
}
/* One flowing paragraph at a single size — the lead is set apart by colour
   alone, and only the first line steps in. */
.hero-note{
  text-indent:76px;
  font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-body);
  color:var(--on-dark-muted);
}
.hero-note b{font-weight:var(--fw-bold);color:var(--white)}
.hero-note span{color:inherit}
@media (max-width:1380px){.hero-note{text-indent:52px;font-size:var(--fs-h3)}
}
@media (max-width:1180px){
  /* lifted clear of the fixed talk card, which owns the bottom-right corner */
  .hero-foot{bottom:230px;flex-direction:column;align-items:flex-start;gap:var(--gap-4)}
  .hero-note{text-indent:0;font-size:var(--fs-body);max-width:32ch;order:-1}
  .hero-note span{display:none}
}
.filter button{
  background:var(--pill);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-pill);padding:15px 22px;color:var(--ui-ink);
  font-size:var(--fs-ui);line-height:var(--lh-pill);font-weight:var(--fw-bold);transition:background var(--dur) var(--ease);
}
.filter button:hover{background:rgba(255,255,255,.75)}
.filter button.on{background:#fff}
/* ---------- top-edge progressive blur (inside the hero) ---------- */
.hero-blur{position:absolute;left:0;right:0;z-index:20;pointer-events:none}
.hero-blur i{position:absolute;left:0;right:0;display:block}
/* top edge: progressive blur that eases off downward, plus a dark wash */
.hero-blur.top,.hero-blur.top i{top:0}
.hero-blur.top i:nth-child(1){height:130px;backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 100%)}
.hero-blur.top i:nth-child(2){height:92px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 26%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 26%,transparent 100%)}
.hero-blur.top i:nth-child(3){height:56px;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,transparent 100%)}
.hero-blur.top i:nth-child(4){height:170px;
  background:linear-gradient(to bottom,rgba(0,0,0,.92) 0%,rgba(0,0,0,.62) 38%,rgba(0,0,0,0) 100%)}
/* bottom edge: same idea mirrored, and deliberately taller */
.hero-blur.bot,.hero-blur.bot i{top:auto;bottom:0}
.hero-blur.bot i:nth-child(1){height:170px;backdrop-filter:blur(0.8px);-webkit-backdrop-filter:blur(0.8px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 36%,transparent 100%);
          mask-image:linear-gradient(to top,#000 0%,#000 36%,transparent 100%)}
.hero-blur.bot i:nth-child(2){height:112px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 28%,transparent 100%);
          mask-image:linear-gradient(to top,#000 0%,#000 28%,transparent 100%)}
.hero-blur.bot i:nth-child(3){height:62px;backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 100%);
          mask-image:linear-gradient(to top,#000 0%,transparent 100%)}
.hero-blur.bot i:nth-child(4){height:320px;
  background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.70) 34%,rgba(0,0,0,0) 100%)}
@keyframes live{
  0%{transform:scale(.55);opacity:.9}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}
/* ---------- transition curtain ---------- */
#curtain{
  position:fixed;z-index:19000;pointer-events:none;border-radius:var(--r-sm);
  opacity:0;will-change:transform,opacity,border-radius;
}
#curtain.run{opacity:1}
/* ---------- project route ---------- */
/* ---------- page below the hero ---------- */
#below{position:relative;z-index:1;background:#f5f5f5;color:var(--kt-ink)}
#below *,#below *::before,#below *::after{box-sizing:border-box}
/* ---------- filter ---------- */
#filterpanel{
  position:absolute;left:30px;bottom:104px;z-index:40;width:320px;
  background:rgba(14,14,14,.72);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:22px;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);transform-origin:0 100%;
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease),visibility var(--dur-slow);
}
#filterpanel.show{opacity:1;visibility:visible;transform:none}
#filterpanel h3{margin:0 0 12px;font-size:var(--fs-tag);line-height:var(--lh-text);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--on-dark-faint);font-weight:var(--fw-bold)}
#filterpanel h3:not(:first-child){margin-top:22px}
.chips{display:flex;flex-wrap:wrap;gap:var(--gap-2)}
.chip{font-size:var(--fs-tag);font-weight:var(--fw-medium);line-height:var(--lh-none);letter-spacing:var(--ls-caps);text-transform:uppercase;
  padding:8px 11px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.24);
  color:var(--on-dark-soft);transition:all var(--dur) var(--ease)}
.chip:hover{border-color:rgba(255,255,255,.6)}
.chip.on{background:var(--white);color:var(--ui-ink);border-color:var(--white)}
img {
  display: block;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
h2 {
  margin: 0;
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-display);
}
.about {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--gutter);
  min-height: 450px;
  padding-top: var(--space-90);
  padding-bottom: var(--space-90);
}
.about__title {
  grid-column: 4 / 11;
  margin: 0;
}
.about__title span { color: var(--muted); }
.about-paragraph {
  grid-column: 7 / 12;
  align-self: end;
  margin: 0;
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-body);
}
.clients {
  display: flex;
  flex-direction: column;
  gap: var(--space-90);
  padding-top: var(--space-90);
  padding-bottom: var(--space-90);
}
/* every section header runs the same three parts: eyebrow left, spot and
   lede in the wide column */
.clients__header,
.projects__header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}
.clients__intro,
.projects__intro,
.services-section__intro { grid-column: 4 / 12; }
.clients__intro h2,
.projects__intro h2,
.services-section__intro h2 { max-width: var(--measure); }
.clients__intro h2 span,
.projects__intro h2 span,
.services-section__intro h2 span { color: var(--muted); }
.clients__title { color: var(--ink); }
.clients__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-grid);
}
.logo-card {
  position: relative;
  display: flex;
  flex: 0 0 calc((100% - 20px) / 6);
  min-width: 0;
  min-height: clamp(118px, 9.3vw, 178px);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--white);
  transition:opacity var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.logo-card__media {
  position: relative;
  display: grid;
  width: 180px;
  height: 180px;
  max-width: 100%;
  place-items: center;
  overflow: hidden;
}
.logo-card img {
  width: 180px;
  height: 180px;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.logo-card .client-logo {
  filter: grayscale(1);
  transition:opacity var(--dur-fast) var(--ease), filter var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
@media (hover: hover){
  .clients__grid:has(.logo-card:hover) .logo-card:not(:hover) {
    filter: blur(5px);
  }

  .logo-card:hover { transform: scale(1.01); }
  .logo-card:hover .client-logo:not(.project__distortion-layer) { filter: none; transform: scale(1.06); }
}
.logo-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.projects {
  display: flex;
  flex-direction: column;
  gap: var(--space-90);
  padding-top: var(--space-90);
  padding-bottom: var(--space-150);
}
.projects__header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
.projects__header h2 { margin: 0; }
.projects__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-90) var(--gutter);
}
.why {
  display: flex;
  flex-direction: column;
  gap: var(--space-90);
  padding-top: var(--space-90);
  padding-bottom: var(--space-90);
}
.why__header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}
.why__header h2 {
  grid-column: 4 / 12;
  max-width: var(--measure-lg);
}
.why__header h2 span { color: var(--muted); }
.why__main {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  align-items: stretch;
  width: 100%;
}
.why__card {
  width: 100%;
  height: 100%;
  max-width: 360px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--white);
}
.why__card {
  display: grid;
  place-items: center;
  padding: var(--space-30);
}
.why__card img {
  width: 100%;
  max-width: 200px;
  height: auto;
}
.why__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-60);
  width: 100%;
  max-width: 100%;
  justify-content: space-between;
}
.why-paragraph {
  margin: 0;
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-body);
}
.why__blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-grid);
}
/* Two stacked panels rather than one: the number sits in a shallow band of its
   own, the label and the line under it fill the tall panel below. */
/* The band and the panel meet flush, each keeping its own four corners, so the
   joint reads as a knuckle rather than a seam. */
.why__block {
  display: flex;
  min-height: 450px;
  flex-direction: column;
}
.why__block-top {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  padding: var(--space-30);
  border-radius: var(--r-md);
  background: var(--white);
}
.why__block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-4);
}
.why__block-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-30);
  border-radius: var(--r-md);
  background: var(--white);
}
.why__index {
  color: var(--muted);
  font-size: var(--fs-tag);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
}
.why__number {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-display);
}
/* Column one slides between the two documented outcomes; column two holds the
   rating card. Same card, same metrics — only one of them is on screen. */
.why__slider {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  cursor: grab;
  touch-action: pan-y;
}
.why__slider.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.why__slider.is-dragging .why__slider-track { transition: none; }
.why__slider-track {
  display: flex;
  height: 100%;
  transition: transform var(--dur-slower) var(--ease);
}
.why__slider .why__block {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
}
.why__slider .why__block-body p { padding-right: 68px; }
.why__dots {
  position: absolute;
  right: var(--space-30);
  bottom: var(--space-30);
  z-index: 1;
  display: flex;
  gap: var(--gap-2);
}
.why__dots button {
  width: 22px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--line);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.why__dots button[aria-selected="true"] { background: var(--ink); }
.why__block h3 {
  margin: 0;
  letter-spacing: var(--ls-snug);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.why__block p {
  margin: auto 0 0;
  color: var(--muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-text);
}
.why__rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  margin-top: var(--gap-4);
}
.why__stars {
  display: flex;
  align-items: center;
  gap: var(--gap-hair);
  color: var(--accent);
  font-size: var(--fs-sm);
  line-height: var(--lh-none);
}
.why__avatars {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.why__avatars img,
.why__avatars span {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin-left: -10px;
  border: 2.5px solid var(--white);
  border-radius: var(--r-round);
}
.why__avatars img {
  object-fit: cover;
}
.why__avatars img:first-child { margin-left: 0; }
.why__avatars span {
  display: grid;
  place-items: center;
  background: #000;
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.services-section {
  width: calc(100% - 20px);
  margin: 0 10px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-dark);
  color: var(--white);
}
.services-section__inner {
  padding-top: var(--space-90);
  padding-bottom: var(--space-90);
}
.services-section__header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}
.services-accordion { margin-top: var(--space-90); }
.services-accordion { --service-row: 108px; }
.service-item {
  position: relative;
  min-height: var(--service-row);
}
.service-item::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 25%;
  height: 1px;
  background: var(--line-dark);
  content: "";
  transition:left var(--dur-slow) var(--ease);
}
.service-item.is-open::after { left: 0; }
.service-trigger {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  width: 100%;
  height: var(--service-row);
  padding: 0;
  transition:top var(--dur-slower) var(--ease), height var(--dur-slower) var(--ease);
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.service-number {
  grid-column: 1 / 4;
  color: var(--on-dark-faint);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-snug);
}
.service-item.is-open .service-number { color: var(--white); }
.service-title {
  grid-column: 4 / 11;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
  transition:opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.service-item.is-open .service-title {
  visibility: hidden;
  opacity: 0;
}
/* Open, the trigger holds nothing but the number and the toggle, and both sit
   outside the panel's column. So it stops reserving a row of its own and the
   panel starts at the item's top — number, toggle and content on one line. */
/* Open, the number and the toggle drop to the panel's first line and the panel
   takes the same breathing room above as it has below, so the content sits
   evenly between the rule above it and the rule under it. */
.service-item.is-open .service-trigger {
  top: var(--space-60);
  height: auto;
  align-items: start;
}
.service-item.is-open .service-panel__main { padding-top: var(--space-60); }
.service-toggle {
  position: relative;
  grid-column: 12 / 13;
  justify-self: end;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--r-round);
  transition:transform var(--dur-slow) var(--ease);
}
@media (hover: hover){
  .service-item:not(.is-open) .service-trigger:hover .service-toggle { transform: rotate(90deg); }
}
.service-item:not(.is-open) .service-trigger:focus-visible .service-toggle { transform: rotate(90deg); }
.service-toggle::before,
.service-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1px;
  background: var(--white);
  content: "";
  transform: translate(-50%, -50%);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.service-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.service-item.is-open .service-toggle::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
.service-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition:grid-template-rows var(--dur-slower) var(--ease);
}
.service-item.is-open .service-panel { grid-template-rows: 1fr; }
.service-panel__clip { min-height: 0; overflow: hidden; }
.service-panel__main {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1.4fr);
  gap: var(--space-60);
  margin-left: 25%;
  padding: 8px 0 var(--space-60);
}
.service-summary {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: var(--space-30);
  align-items: start;
}
/* the toggle sits at this column's right edge, so the tags keep clear of it */
.service-categories { padding-right: 62px; }
.service-categories > span {
  color: var(--on-dark-faint);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
}
.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  margin-top: 18px;
}
.service-tags button {
  padding: 9px 13px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-tag);
  font-weight: var(--fw-medium);
  line-height: inherit;
  cursor: pointer;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.service-tags button:hover,
.service-tags button:focus-visible {
  background: var(--brand);
  color: var(--white);
}
.service-visual {
  position: relative;
  width: 170px;
  height: 96px;
}
.service-visual__image {
  position: absolute;
  top: 0;
  width: 58%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-sm);
}
.service-visual__image > img:not(.project__distortion-layer) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-visual__image:first-child { left: 0; transform: rotate(-2deg); }
.service-visual__image:last-child { right: 0; transform: rotate(2deg); }
.service-summary__text h3 {
  max-width: 300px;
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-display);
}
.service-summary__text p {
  max-width: 320px;
  margin: 24px 0 0;
  color: var(--on-dark-muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-text);
}
.services-section__footer {
  margin-top: var(--space-90);
  margin-left: 25%;
}
.about-us-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-90);
  padding-top: var(--space-150);
  padding-bottom: var(--space-90);
}
.about-us-section__header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}
.about-us-section__intro { grid-column: 4 / 12; }
.about-us-section__intro h2 { max-width: var(--measure); }
.about-us-section__intro h2 span { color: var(--muted); }
.kuarktek-section__header .about-us-section__intro h2 { max-width: var(--measure-lg); }
.about-us-paragraph,
.section-lede {
  max-width: var(--measure-lg);
  margin: var(--space-30) 0 0;
  color: var(--muted);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-body);
}
.about-us-section > .about-us-section__header .about-us-paragraph { max-width: var(--measure); }
.about-us-section__main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-grid);
}
.about-us-section__blocks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-grid);
  min-height: 250px;
}
.about-us-card {
  display: flex;
  min-width: 0;
  height: 300px;
  flex-direction: column;
  padding: var(--space-30);
  border-radius: var(--r-md);
  background: var(--white);
}
.about-us-card__icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
}
.about-us-card__icon svg { display: block; width: 100%; height: 100%; }
.about-us-card h3 {
  margin: auto 0 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
}
.about-us-card p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-body);
}
.about-us-video {
  position: relative;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--white);
}
.about-us-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-us-video__sound {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-round);
  background: rgba(20, 26, 45, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:opacity var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* same affordance as the talk card: the control appears on hover */
.about-us-video:hover .about-us-video__sound,
.about-us-video:focus-within .about-us-video__sound { opacity: 1; pointer-events: auto; }
@media (hover: none){
  .about-us-video__sound { opacity: 1; pointer-events: auto; }
}
.about-us-video__sound svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-us-video__sound .sound-icon__playing,
.about-us-video__sound:not(.is-muted) .sound-icon__muted { display: none; }
.about-us-video__sound:not(.is-muted) .sound-icon__playing { display: block; }
.about-us-video__sound:hover,
.about-us-video__sound:focus-visible {
  background: rgba(20, 26, 45, .8);
  transform: scale(1.08);
}
.testimonial-stars {
  display: flex;
  align-items: center;
  gap: var(--gap-hair);
  color: var(--accent);
  font-size: var(--fs-sm);
  line-height: var(--lh-none);
}
.kuarktek-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-180);
  padding-top: var(--space-90);
  padding-bottom: var(--space-90);
}
.kuarktek-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--gap-grid);
  min-height: 620px;
}
.kuarktek-bento__case,
.kuarktek-bento__performance,
.kuarktek-bento__score,
.kuarktek-bento__traffic {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-md);
}
.kuarktek-bento__case {
  position: relative;
  grid-column: span 2;
  grid-row: span 2;
  overflow: visible;
  clip-path: inset(-180px 0 0 0);
  padding: var(--space-30);
  color: var(--white);
  isolation: isolate;
}
.kuarktek-bento__case::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .06) 48%, rgba(0, 0, 0, .42));
  content: "";
}
.kuarktek-bento__case-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.kuarktek-bento__portrait {
  position: absolute;
  right: clamp(25px, 5vw, 20px);
  bottom: -40px;
  z-index: 1;
  width: auto;
  height: 110%;
  max-width: none;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  transform: translateY(-32px) scale(1.06);
  transform-origin: center bottom;
  /* on the wrapper, not the img: once the distortion canvas is live the img is
     hidden and the canvas is what shows, so the nudge has to move both */
  margin-right: -30px;
  margin-bottom: -5px;
  will-change: transform;
}
.kuarktek-bento__portrait-source {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transition:opacity var(--dur-fast) var(--ease);
}
.kuarktek-bento__portrait.has-distortion-canvas .kuarktek-bento__portrait-source { opacity: 0; }
.kuarktek-bento__portrait > .project__distortion-canvas { transform: none; }
.kuarktek-bento__case-top,
.kuarktek-bento__case-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: var(--space-30);
}
.kuarktek-bento__case-top { align-items: flex-start; }
.kuarktek-bento__case-bottom {
  position: absolute;
  right: var(--space-30);
  bottom: var(--space-30);
  left: var(--space-30);
  align-items: flex-end;
  justify-content: space-between;
}
.kuarktek-bento__eyebrow {
  display: block;
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-text);
}
.kuarktek-bento__case-top p {
  max-width: 250px;
  margin: 10px 0 0;
  color: var(--on-dark-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
}
.kuarktek-bento__plus {
  position: relative;
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border: 0;
}
.kuarktek-bento__plus::before,
.kuarktek-bento__plus::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background: var(--white);
  content: "";
  transform: translate(-50%, -50%);
}
.kuarktek-bento__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.kuarktek-bento__brand {
  position: absolute;
  top: 50%;
  left: var(--space-30);
  z-index: 2;
  max-width: 350px;
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-none);
  transform: translateY(-50%);
}
.kuarktek-bento__case-bottom > div {
  text-align: right;
}
.kuarktek-bento__explore {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
  white-space: nowrap;
}
.kuarktek-bento__arrow {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  overflow: hidden;
  color: var(--on-dark-muted);
}
.kuarktek-bento__arrow i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-style: normal;
  line-height: var(--lh-none);
  transition:transform var(--dur) var(--ease);
}
.kuarktek-bento__arrow svg {
  display: block;
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kuarktek-bento__arrow i:last-child { transform: translate(-100%, 100%); }
.kuarktek-bento__explore:hover .kuarktek-bento__arrow i:first-child,
.kuarktek-bento__explore:focus-visible .kuarktek-bento__arrow i:first-child { transform: translate(100%, -100%); }
.kuarktek-bento__explore:hover .kuarktek-bento__arrow i:last-child,
.kuarktek-bento__explore:focus-visible .kuarktek-bento__arrow i:last-child { transform: translate(0); }
.kuarktek-bento__case-bottom p {
  margin: 0 0 10px;
  color: var(--white);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
}
.kuarktek-bento__case-bottom strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
  opacity: .7;
}
.kuarktek-bento__performance {
  position: relative;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-30);
  background: var(--white);
  isolation: isolate;
}
.kuarktek-bento__performance::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 90%;
  height: 48%;
  background: repeating-radial-gradient(circle at 8% 3%, rgba(31, 37, 43, 0) 0 42.5px, rgba(31, 37, 43, .12) 44px, rgba(31, 37, 43, 0) 45.5px);
  content: "";
  opacity: .5;
}
.kuarktek-bento__metrics {
  display: flex;
  flex-direction: column;
  gap: var(--gap-10);
}
.kuarktek-bento__metrics strong {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
}
.kuarktek-bento__metrics p {
  margin: 7px 0 0;
  color: var(--ink);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-body);
}
.kuarktek-bento__testimonial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-4);
}
.kuarktek-bento__quote p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
}
.kuarktek-bento__person {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}
/* Only the quote slides; the stars above it are fixed chrome. */
.quote-slider {
  position: relative;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.quote-slider.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.quote-slider.is-dragging .quote-slider__track { transition: none; }
.quote-slider__track {
  display: flex;
  align-items: stretch;
  transition:transform var(--dur-slower) var(--ease);
}
.kuarktek-bento__quote {
  display: flex;
  flex: 0 0 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-4);
  margin: 0;
}
.kuarktek-bento__quote p { margin: 0; }
.kuarktek-bento__quote .kuarktek-bento__person { margin-top: auto; }
.quote-slider__dots {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-2);
  margin-top: var(--gap-4);
}
.quote-slider__dots button {
  width: 22px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--line);
  cursor: pointer;
  transition:background var(--dur) var(--ease);
}
.quote-slider__dots button[aria-selected="true"] { background: var(--muted); }
.kuarktek-bento__person img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;          /* a flex item, so stop it being squeezed to an ellipse */
  aspect-ratio: 1;
  border-radius: var(--r-round);
  object-fit: cover;
}
.kuarktek-bento__who {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.kuarktek-bento__name {
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
}
.kuarktek-bento__role {
  color: var(--muted);
  font-size: var(--fs-tag);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
}
.kuarktek-bento__stack {
  display: grid;
  grid-row: span 2;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--gap-grid);
  min-width: 0;
}
.kuarktek-bento__score,
.kuarktek-bento__traffic {
  display: flex;
  flex-direction: column;
  padding: var(--space-30);
  background: var(--white);
}
.kuarktek-bento__score {
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
.kuarktek-bento__score-number {
  display: grid;
  width: 124px;
  height: 124px;
  flex: 0 0 124px;
  place-items: center;
  border: 15px solid #f1f1f1;
  border-radius: var(--r-round);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
}
.kuarktek-bento__score h3 {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-text);
}
.kuarktek-bento__score p,
.kuarktek-bento__traffic > p {
  margin: 10px auto 0;
  color: var(--muted);
  max-width: 200px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-body);
}
.kuarktek-bento__traffic-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-3);
}
.kuarktek-bento__traffic-top strong {
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-none);
}
.kuarktek-bento__traffic-top span {
  padding: 5px 8px;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
}
.kuarktek-bento__traffic > p { width: 100%; margin-left: 0; }
.kuarktek-bento__chart {
  display: flex;
  height: 180px;
  align-items: flex-end;
  gap: var(--gap-grid);
  margin-top: auto;
  padding-top: 20px;
  padding-bottom: 22px;
}
.kuarktek-bento__chart > span {
  position: relative;
  width: 100%;
  height: var(--bar-height);
  border-radius: var(--r-xs);
  background: var(--surface);
}
.kuarktek-bento__chart > span.is-current { background: var(--ink); }
.kuarktek-bento__chart b {
  position: absolute;
  bottom: 10px;
  left: 50%;
  color: var(--ink);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-none);
  white-space: nowrap;
  transform: translateX(-50%) rotate(-90deg);
}
.kuarktek-bento__chart > span.is-current b { color: var(--white); }
.kuarktek-bento__chart i {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  color: var(--muted);
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: var(--fw-body);
  transform: translateX(-50%);
}
.blog-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-90);
  padding-top: var(--space-90);
  padding-bottom: var(--space-90);
}
.blog-section__header {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--gap-grid);
}
.blog-section__header h2 { max-width: var(--measure); margin: 0; }
.blog-section__header h2 span { color: var(--muted); }
.blog-section__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-30);
}
.blog-section__intro > p {
  max-width: 310px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-text);
}
.blog-section__content,
.blog-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-grid);
  min-width: 0;
}
.blog-card {
  display: flex;
  height: 550px;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
}
.blog-card__top { position: relative; min-height: 0; flex: 1 1 auto; }
.blog-card__image {
  position: relative;
  width: 110px;
  height: 110px;
  overflow: hidden;
  border-radius: var(--r-sm);
  transform-origin: top left;
  transition:width var(--dur-slower) var(--ease), height var(--dur-slower) var(--ease);
}
.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:transform var(--dur-slower) var(--ease);
}
.blog-card__plus,
.blog-feature__plus {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--r-round);
  background: var(--ink);
  transition:transform var(--dur-slow) var(--ease);
}
.blog-card__plus { position: absolute; top: 0; right: 0; }
.blog-card__plus::before,
.blog-card__plus::after,
.blog-feature__plus::before,
.blog-feature__plus::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  border-radius: var(--r-hair);
  background: var(--white);
  content: "";
  transform: translate(-50%, -50%);
}
.blog-card__plus::after,
.blog-feature__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
@media (hover: hover){
  .blog-card:hover .blog-card__plus,
  .blog-feature:hover .blog-feature__plus { transform: rotate(90deg); }
}
.blog-card:focus-visible .blog-card__plus,
.blog-feature:focus-visible .blog-feature__plus { transform: rotate(90deg); }
/* the growing image is absorbed by the slack in .blog-card__top, so these
   gaps stay fixed on hover — shrinking them shoved the date into the title */
.blog-card__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--gap-6);
  padding: 20px;
}
.blog-card time {
  color: var(--muted);
  font-size: var(--fs-tag);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-text);
}
.blog-card__text { display: flex; flex-direction: column; gap: var(--gap-2); }
.blog-card h3 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
}
.blog-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-body);
}
.blog-feature {
  position: relative;
  display: flex;
  height: 550px;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--space-30) var(--space-30) var(--space-60);
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--white);
}
.blog-feature > img:not(.project__distortion-layer) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .78;
  object-fit: cover;
  transition:transform var(--dur-slower) var(--ease);
}
.blog-feature::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .45));
  content: "";
}
.blog-feature__top {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
}
.blog-feature__top { justify-content: flex-end; }
.blog-feature__plus { background: var(--line-dark); }
.blog-feature h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-none);
  text-align: right;
}
@media (hover: hover){
  .blog-card:hover .blog-card__image { width: 170px; height: 170px; }
  .blog-card:hover .blog-card__image img,
  .blog-feature:hover > img:not(.project__distortion-layer) { transform: scale(1.035); }
}
.project {
  position: relative;
  min-width: 0;
  transform-origin: center;
  transition:opacity var(--dur-slower) var(--ease), filter var(--dur-slower) var(--ease), transform var(--dur-slower) var(--ease);
}
.projects__header { transition:opacity var(--dur-slower) var(--ease), filter var(--dur-slower) var(--ease); }
.projects.has-project-hover .projects__header { opacity: .22; filter: blur(4px); }
.projects.has-project-hover .project:not(.is-hovered) { transform: scale(.98); }
.projects.has-project-hover .project:not(.is-hovered) > .project__media,
.projects.has-project-hover .project:not(.is-hovered) > .project__info { filter: blur(7px); }
.projects.has-project-hover .project.is-hovered { transform: scale(1.01); }
.project--large { grid-column: span 7; }
.project--small { grid-column: span 4; }
.project--lower { grid-column: 9 / 13; align-self: end; }
.project--right { grid-column: 6 / 13; }
.project__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #fff;
  transition:filter var(--dur-slower) var(--ease);
}
.project--large .project__media { aspect-ratio: 1.145 / 1; }
.project--small .project__media { aspect-ratio: 0.872 / 1; }
.project__media > img:not(.project__distortion-layer) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.025);
  transition:transform var(--dur-slower) var(--ease);
  will-change: transform;
}
.project.is-hovered .project__media > img:not(.project__distortion-layer) {
  transform: scale(1.04);
  transition-duration: .18s;
}
.project__distortion-layer {
  --distort-position-x: 50%;
  --distort-position-y: 50%;
  --distort-shift-x: 0px;
  --distort-shift-y: 0px;
  position: absolute;
  inset: -4%;
  z-index: 1;
  width: 108%;
  max-width: none;
  height: 108%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--distort-shift-x), var(--distort-shift-y), 0) scale(1.045);
  transition:opacity var(--dur-fast) var(--ease);
  will-change: transform, opacity;
  -webkit-mask-image: radial-gradient(circle 24% at var(--distort-position-x) var(--distort-position-y), #000 0%, rgba(0, 0, 0, .9) 42%, rgba(0, 0, 0, .35) 72%, transparent 100%);
  mask-image: radial-gradient(circle 24% at var(--distort-position-x) var(--distort-position-y), #000 0%, rgba(0, 0, 0, .9) 42%, rgba(0, 0, 0, .35) 72%, transparent 100%);
}
.project__distortion-layer--secondary {
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle 15% at var(--distort-position-x) var(--distort-position-y), #000 0%, rgba(0, 0, 0, .75) 58%, transparent 100%);
  mask-image: radial-gradient(circle 15% at var(--distort-position-x) var(--distort-position-y), #000 0%, rgba(0, 0, 0, .75) 58%, transparent 100%);
}
.project__distortion-layer.is-active { opacity: .92; }
.project__distortion-layer--secondary.is-active { opacity: .62; }
.project__distortion-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.025);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-slower) var(--ease);
  will-change: transform;
}
.project__distortion-canvas.is-ready { opacity: 1; }
.project.is-hovered .project__distortion-canvas {
  transform: scale(1.04);
  transition-duration: .18s;
}
.blog-feature > .project__distortion-layer,
.blog-feature > .project__distortion-canvas { z-index: 0; }
.blog-card:hover .project__distortion-canvas,
.blog-feature:hover > .project__distortion-canvas { transform: scale(1.035); }
.project__tags {
  position: absolute;
  z-index: 2;
  right: clamp(10px, 1.1vw, 21px);
  bottom: clamp(10px, 1.1vw, 21px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--gap-grid);
}
.project__tags span {
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-pill);
  background: rgba(15,18,21,.25);
  color: var(--white);
  font-size: var(--fs-tag);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  backdrop-filter: blur(12px);
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.project__tags span:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}
.project__info {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gap-4) var(--space-30);
  padding-top: 30px;
  transition:filter var(--dur-slower) var(--ease);
}
.project__info h3 {
  margin: 0 0 15px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
}
.project__info p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-text);
}
.project__link {
  display: flex;
  align-items: center;
  align-self: start;
  white-space: nowrap;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  transition:color var(--dur) var(--ease);
}
.project__link-text { display: flex; overflow: hidden; }
.project__link-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateX(-110%);
  transition:opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--char-index) * 10ms);
}
.project.is-hovered .project__link-text .char,
.project__link:focus-visible .project__link-text .char {
  opacity: 1;
  transform: translateX(0);
}
.project__link:hover,
.project__link:focus-visible { color: var(--brand); }
.projects__grid { position: relative; }
.projects__explore {
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (max-width: 1024px){
  .logo-card { flex-basis: calc((100% - 12px) / 4); }
  .about__title { grid-column: 4 / 13; }
  .about-paragraph { grid-column: 6 / 13; }
  .project--large, .project--small, .project--lower, .project--right { grid-column: span 6; align-self: start; }
  .project--small .project__media, .project--large .project__media { aspect-ratio: 1 / 1; }
  .why__header h2 { grid-column: 4 / 13; }
  .why__main {
    grid-template-columns: 1fr 2fr;
    gap: var(--space-60);
  }
  .why__filler { display: none; }
  .services-section__intro { grid-column: 4 / 13; }
  .service-panel__main {
    grid-template-columns: 1fr;
    margin-left: 25%;
  }
  .about-us-section__intro { grid-column: 4 / 13; }
  .about-us-section__blocks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 500px;
  }
  .kuarktek-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    min-height: 0;
  }
  .kuarktek-bento__case {
    grid-column: span 2;
    grid-row: auto;
    min-height: 600px;
  }
  .kuarktek-bento__performance {
    grid-row: auto;
    min-height: 520px;
  }
  .kuarktek-bento__stack {
    grid-row: auto;
    min-height: 520px;
  }
  .blog-section__intro {
    align-items: flex-start;
    flex-direction: column;
  }
  .blog-card { height: 520px; }
  .blog-card__bottom { padding: 15px; }
  .blog-feature { height: 520px; }
}
@media (max-width: 700px){
  .logo-card { flex-basis: calc((100% - 4px) / 2); }
  .about { display: flex; min-height: 620px; flex-direction: column; }
  .about__title { margin-top: 54px; }
  .about-paragraph { margin-top: auto; }
  .clients__header,
  .projects__header { display: block; }
  .clients__intro,
  .projects__intro { margin-top: var(--space-30); }
  .projects__grid { display: flex; flex-direction: column; gap: var(--space-90); }
  .project--small .project__media, .project--large .project__media { aspect-ratio: 1 / 1.05; }
  .project__info { grid-template-columns: minmax(0, 1fr); }
  .project__link-text .char { opacity: 1; transform: translateX(0); }
  .projects__explore {
    position: static;
    margin-top: var(--space-30);
  }
  .why__header { display: block; }
  .why__header h2 { margin-top: var(--space-30); }
  .why__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-30);
  }
  .why__content { order: -1; }
  .why__card {
    /* the same portrait the desktop card is (302x572), full width — it holds
       a vertical video, so it must not collapse to the height of its logo */
    height: auto;
    max-width: 100%;
    aspect-ratio: 9 / 16;
  }
  .why__card video {
    height: auto;
    aspect-ratio: 1 / .82;
  }
  .why__blocks { grid-template-columns: 1fr; }
  .why__block { min-height: 260px; }
  .services-section { border-radius: var(--r-lg); }
  .services-section__header { display: block; }
  .services-section__intro { margin-top: var(--space-30); }
  .services-accordion { margin-top: var(--space-60); }
  .service-trigger {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--gap-4);
    min-height: 92px;
  }
  .service-number,
  .service-title,
  .service-toggle { grid-column: auto; }
  .service-number { font-size: var(--fs-sm); }
  .service-title { font-size: var(--fs-h4); }
  .service-toggle { width: 38px; height: 38px; }
  .service-panel__main {
    gap: var(--space-30);
    margin-left: 0;
    padding-bottom: var(--space-60);
  }
  .service-summary { grid-template-columns: 112px minmax(0, 1fr); gap: var(--gap-5); }
  .service-visual { width: 112px; height: 72px; }
  .service-summary__text h3 { font-size: var(--fs-h3); }
  .service-summary__text p { margin-top: 16px; }
  .service-item::after { left: 0; }
  .services-section__footer {
    margin-top: var(--space-60);
    margin-left: 0;
  }
  .about-us-section__header { display: block; }
  .about-us-section__intro { margin-top: var(--space-30); }
  .about-us-section__main {
    display: flex;
    flex-direction: column;
    gap: var(--gap-grid);
  }
  .about-us-section__blocks { min-height: 520px; }
  .about-us-video {
    min-height: 0;
    aspect-ratio: 1 / .82;
  }
  .kuarktek-bento {
    display: flex;
    flex-direction: column;
  }
  .kuarktek-bento__case { min-height: 500px; }
  .kuarktek-bento__performance { min-height: 480px; }
  .kuarktek-bento__stack {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(300px, auto));
    min-height: 0;
  }
  .blog-section__header {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-30);
  }
  .blog-section__intro {
    gap: var(--space-30);
  }
  .blog-section__content,
  .blog-cards {
    grid-template-columns: 1fr;
  }
  .blog-card { height: 480px; }
  .blog-card__bottom { padding: 20px; }
  .blog-feature { height: 500px; }
  .blog-feature h3 { font-size: var(--fs-display-sm); }
}
@media (max-width:760px){
  footer{padding:0 16px 20px;flex-wrap:wrap;gap:var(--gap-3);justify-content:center}
  .filter{width:auto;order:2} .spacer{display:none}
  #filterpanel{right:16px;left:16px;width:auto;bottom:150px}
}

/* ---------- client logos on a phone ----------
   Three rows of four drifting past, built by assets/js/home.js. The rows
   bleed to both edges of the screen: a marquee that stops inside a gutter
   reads as a broken grid rather than as something moving through. */
@media (max-width: 700px) {
  .clients__grid--drift {
    display: block;
    margin-inline: calc(var(--pad) * -1);
    overflow: hidden;
  }
  .clients__row { overflow: hidden; }
  .clients__row + .clients__row { margin-top: var(--gap-grid); }
  .clients__track {
    display: flex;
    width: max-content;
    animation: clients-drift 38s linear infinite;
  }
  .clients__row[data-dir="rtl"] .clients__track { animation-direction: reverse; }
  /* spacing as a margin, not a gap: it makes the half-width travel exact */
  .clients__grid--drift .logo-card {
    /* three across, not four: at a quarter of a phone the marks were too
       small to recognise */
    flex: 0 0 calc(33.333vw - var(--gap-grid));
    min-height: 0;
    margin-right: var(--gap-grid);
    aspect-ratio: 1;
    border-radius: var(--r-sm);
  }
  .clients__grid--drift .logo-card__media,
  .clients__grid--drift .logo-card img {
    width: 100%;
    height: 100%;
  }
}

@keyframes clients-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; }
}

/* ---------- phone corrections ---------- */
@media (max-width: 700px) {
  /* the hero keeps the same gutter as the page. hero.js reads this token as
     it insets the standfirst to follow the shrinking shell, so the two never
     disagree. */
  :root { --hero-gutter: var(--pad); }
  /* the wash under the hero note. At 320px tall the note's first line sat on
     bare artwork, and white type on a busy wall has nothing to hold it. */
  .hero-blur.bot i:nth-child(4) {
    height: 460px;
    background: linear-gradient(to top, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .9) 34%, rgba(0, 0, 0, .62) 66%, rgba(0, 0, 0, 0) 100%);
  }
  /* a 22x6 bar is a fine mark and a poor target for a thumb. The bar keeps
     its own size and an invisible pad around it takes the touch — painting a
     larger box and clipping it back does not survive the `background`
     shorthand on the selected dot, which drew it as a fat pill instead. */
  .why__dots button,
  .quote-slider__dots button { position: relative; }
  .why__dots button::after,
  .quote-slider__dots button::after {
    content: "";
    position: absolute;
    inset: -15px -4px;
  }
}

/* ---------- process cards on a small phone ----------
   Two columns leaves 106px of text inside a 166px card: three words to a
   line. Below this width they stack and read. */
@media (max-width: 560px) {
  .about-us-section__blocks {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  /* the same box as the video below them, so the column keeps one rhythm
     instead of four ragged cards and then a wider frame */
  .about-us-card {
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / .82;
  }
}

/* ---------- the case card on a phone ----------
   At full height the portrait is wider than the card it stands in and the
   line beside it gets squeezed into 132px. The figure keeps its place on the
   right, at a size the card can hold, and the line runs the full width under
   it. */
@media (max-width: 700px) {
  .kuarktek-bento__case { overflow: hidden; }
  .kuarktek-bento__portrait {
    /* taller against a shorter card: at 64% the head sat well below the
       label and left a band of empty black across the top */
    height: 84%;
    right: 0;
    /* pushed hard against the right edge */
    margin-right: -40px;
  }
  /* the wordmark is on the figure's face at this width, and the card says
     Case study at the top and KuarkTek Digital at the bottom already */
  .kuarktek-bento__brand { display: none; }
  .kuarktek-bento__case-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-4);
  }
  .kuarktek-bento__case-bottom > div { text-align: left; }
}

/* ---------- the hero's own chrome on a phone ---------- */
@media (max-width: 760px) {
  /* the language switch comes back, sized to the smaller CTA it sits beside.
     It rides on --cta-w, which hero.js measures, so it follows the button.
     It stays hero markup and scrolls away with the hero; the header's wash
     only appears once the hero is gone, so the two never meet. */
  .langswitch {
    display: flex;
    height: 34px;
    right: calc(var(--pad) + var(--cta-w, 160px) + 14px);
    font-size: var(--fs-sm);
  }
  .langswitch svg { width: 16px; height: 16px; }
}

@media (max-width: 700px) {
  /* the filter and its 320px panel have nowhere to go on a phone */
  .filter,
  #filterpanel { display: none; }
  /* One row of tags is the whole story on a phone. A second row crowds the
     image and reads as an accident, so it is clipped: 38px is one row —
     12px of type in a 16px line box, 10px of padding either side and the
     hairline border. */
  .project__tags {
    max-height: 38px;
    overflow: hidden;
  }
  /* the standfirst is the one line of copy in the hero: both sentences, at a
     size worth reading, sitting directly above the docked nav */
  .hero-foot { bottom: 92px; }
  .hero-note {
    max-width: none;
    padding-right: 30px;
    font-size: var(--fs-h3);
  }
  .hero-note span { display: inline; }
}