/* ===== styles.css ===== */
@font-face {
  font-family: Manrope;
  src: url("assets/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --paper: #f5f5ef;
  --ink: #23251f;
  --muted: #77796f;
  --line: #dcded4;
  --lime: #d0f861;
  --dark: #242720;
  --radius: 16px;
  --font: Manrope, Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.dialog-open {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
}
button:disabled {
  cursor: default;
}
button {
  border: 0;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid #63872c;
  outline-offset: 6px;
}
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
::selection {
  background: var(--lime);
  color: var(--ink);
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: 1.07;
  letter-spacing: -0.055em;
  font-weight: 600;
}
h2 {
  font-size: clamp(40px, 4.8vw, 68px);
}
.shell {
  width: min(1280px, calc(100% - 112px));
  margin-inline: auto;
}
.section-space {
  padding-block: 110px;
}
.eyebrow {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.105em;
  font-weight: 700;
}
.section-kicker {
  margin-bottom: 25px;
}
.muted {
  color: #898d7e;
}
.button {
  min-height: 52px;
  padding: 14px 23px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 29px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  transition:
    background 0.2s,
    transform 0.2s;
}
.button > span {
  font-size: 21px;
  line-height: 1;
}
.button-dark {
  color: #fff;
  background: var(--ink);
}
.button-dark:hover {
  background: #414736;
  transform: translateY(-2px);
}
.button-lime {
  background: var(--lime);
  color: var(--ink);
}
.button-lime:hover {
  background: #e1ff95;
  transform: translateY(-2px);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  font-weight: 700;
  min-height: 44px;
}
.text-link > span {
  font-size: 22px;
  transition: transform 0.2s;
}
.text-link:hover > span {
  transform: translate(3px, -3px);
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 20px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 20px;
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
[hidden] {
  display: none !important;
}
.site-header {
  height: 104px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 30;
  background: var(--paper);
}
.header-inner {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand {
  display: flex;
  align-items: center;
  gap: 26px;
}
.brand img {
  width: 76px;
  height: 44px;
  object-fit: contain;
}
.brand > span {
  padding-left: 24px;
  border-left: 1px solid var(--line);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.desktop-nav {
  display: flex;
  gap: 33px;
  padding-left: 15px;
}
.desktop-nav > a {
  font-size: 12px;
  position: relative;
  padding-block: 10px;
}
.desktop-nav > a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 5px;
  height: 1px;
  background: var(--ink);
  transition: right 0.2s;
}
.desktop-nav > a:hover:after {
  right: 0;
}
.header-cta {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 12px;
  gap: 33px;
}
.menu-toggle,
.mobile-menu {
  display: none;
}
.hero {
  padding-top: 40px;
}
.hero-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 35px;
}
.hero-topline .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
}
.status-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: #638b32;
  box-shadow: 0 0 0 4px #638b3212;
  flex-shrink: 0;
}
.hero-location {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 35px;
  align-items: center;
}
.hero-copy {
  padding-block: 8px 25px;
  position: relative;
  z-index: 2;
}
h1 {
  font-size: clamp(64px, 7.25vw, 105px);
  font-weight: 500;
  letter-spacing: -0.072em;
  line-height: 1.07;
  white-space: nowrap;
}
.highlight {
  position: relative;
}
.highlight svg {
  position: absolute;
  bottom: -14px;
  left: 0;
  width: 100%;
  height: 23px;
  overflow: visible;
  z-index: -1;
  stroke: var(--lime);
  stroke-width: 12;
  stroke-linecap: round;
  fill: none;
}
.lime-period {
  color: #80a634;
}
.hero-intro {
  max-width: 470px;
  color: #64695d;
  font-size: 14px;
  line-height: 1.85;
  margin-top: 32px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 27px;
  margin-top: 29px;
}
.hero-actions .text-link {
  font-size: 12px;
  gap: 13px;
}
.hero-note {
  font-size: 10px;
  color: var(--muted);
  margin-top: 14px;
}
.hero-art {
  background: #e9ebe2;
  min-height: 390px;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.art-top,
.art-bottom {
  position: absolute;
  left: 23px;
  right: 23px;
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.11em;
  z-index: 3;
}
.art-top {
  top: 22px;
}
.art-top > span:last-child {
  font-size: 16px;
}
.art-bottom {
  bottom: 20px;
  border-top: 1px solid #cbd0c0;
  padding-top: 14px;
}
.hero-sculpture {
  position: absolute;
  top: -2%;
  left: -6%;
  width: 110%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 28px 15px #363f2529);
  animation: sculpture-float 7s ease-in-out infinite;
}
.art-orbit {
  position: absolute;
  width: 330px;
  height: 330px;
  border: 1px solid #cbd0c0;
  border-radius: 50%;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}
.orbit-two {
  width: 410px;
  height: 410px;
  border-style: dashed;
  border-color: #cbd0c078;
}
.art-label {
  position: absolute;
  bottom: 68px;
  left: 24px;
  z-index: 3;
  line-height: 1.45;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.tiny-cross {
  font-size: 20px;
  vertical-align: middle;
  margin-right: 5px;
}
.art-label-indent {
  padding-left: 25px;
  color: #797f6c;
}
.hero-proof {
  display: flex;
  align-items: center;
  gap: 65px;
  padding-block: 33px 32px;
  margin-top: 34px;
}
.personal-intro {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-right: 10px;
}
.personal-intro > img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #dce1d3;
}
.personal-intro > div {
  display: flex;
  flex-direction: column;
}
.personal-intro strong {
  font-size: 13px;
  font-weight: 700;
}
.personal-intro span {
  font-size: 10px;
  color: var(--muted);
}
.proof-stat {
  display: flex;
  align-items: center;
  gap: 14px;
}
.proof-stat > strong {
  font-size: 38px;
  letter-spacing: -0.06em;
  font-weight: 500;
  line-height: 1;
}
.proof-stat > strong > span {
  font-size: 23px;
  margin-left: 2px;
}
.proof-stat > span {
  font-size: 10px;
  color: #777c6d;
  max-width: 70px;
  line-height: 1.5;
}
.scroll-cue {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 8px;
  letter-spacing: 0.09em;
  margin-left: auto;
}
.scroll-cue > span {
  font-size: 22px;
}
.client-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 29px;
  display: flex;
  align-items: center;
  gap: 55px;
}
.client-strip > .eyebrow {
  font-size: 8px;
  color: #818577;
  flex-shrink: 0;
}
.client-logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex: 1;
}
.client-logos img {
  max-width: 100px;
  width: 14%;
  height: 36px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.74;
}
.client-logos img:nth-child(2) {
  max-width: 65px;
}
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 45px;
}
.section-intro {
  font-size: 13px;
  line-height: 1.85;
  color: #787d6e;
  max-width: 330px;
  padding-bottom: 4px;
}
.work-section {
  padding-bottom: 100px;
}
.work-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 27px;
}
.work-toolbar > p {
  font-size: 11px;
  color: #7b806f;
}
.filters {
  display: flex;
  gap: 6px;
}
.filter {
  padding: 9px 15px;
  min-height: 38px;
  border-radius: 100px;
  background: transparent;
  font-size: 10px;
  border: 1px solid var(--line);
  transition:
    background 0.2s,
    color 0.2s;
}
.filter.active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.filter:not(.active):hover {
  background: #e6e9dd;
}
.filter > span {
  opacity: 0.55;
  font-size: 8px;
  margin-left: 6px;
}
.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 26px;
}
.project-card {
  min-width: 0;
}
.project-visual {
  display: block;
  position: relative;
  width: 100%;
  height: 390px;
  overflow: hidden;
  border-radius: 12px;
  text-align: left;
  padding: 0;
  isolation: isolate;
}
.visual-sellme {
  background: #e0e5d7;
}
.visual-bdtrims {
  background: #d5d4c9;
}
.visual-prnews {
  background: #eae2dc;
}
.visual-hiccpet {
  background: #e6e1f2;
}
.visual-apple {
  background: #dfe6e8;
}
.project-visual-top {
  position: absolute;
  top: 23px;
  left: 25px;
  right: 25px;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  z-index: 2;
}
.browser-frame {
  position: absolute;
  top: 67px;
  left: 10.5%;
  width: 79%;
  background: #fff;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  box-shadow: 0 18px 35px #252c1d25;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.browser-chrome {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 10px;
  background: #f8f8f6;
  color: #8d9184;
  border-bottom: 1px solid #e4e5de;
  font-size: 6px;
}
.browser-chrome i {
  width: 4px;
  height: 4px;
  border: 1px solid #b4b8ac;
  border-radius: 50%;
  display: block;
}
.browser-chrome > span:first-of-type {
  margin: auto;
  transform: translateX(-8px);
  font-size: 6px;
  letter-spacing: 0.02em;
}
.browser-frame > img {
  width: 100%;
  height: auto;
}
.project-open {
  position: absolute;
  bottom: 21px;
  right: 21px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  font-size: 23px;
  display: grid;
  place-items: center;
  transition:
    transform 0.2s,
    background 0.2s;
  box-shadow: 0 3px 6px #00000005;
}
.project-visual:hover .browser-frame {
  transform: translateY(-10px) rotate(-1.5deg);
}
.project-visual:hover .project-open {
  transform: rotate(45deg);
  background: var(--lime);
}
.project-visual:focus-visible {
  outline-offset: 3px;
}
.project-info {
  padding-top: 17px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.project-info h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.project-info h3 button {
  padding: 0;
  background: transparent;
  letter-spacing: inherit;
  font-weight: inherit;
}
.project-info h3 button:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.project-info p {
  font-size: 10px;
  color: #7b806f;
  margin-top: 7px;
}
.project-tag {
  font-size: 8px;
  border: 1px solid var(--line);
  padding: 4px 8px;
  border-radius: 30px;
  margin-top: 2px;
  white-space: nowrap;
}
.work-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.work-bottom > span {
  font-size: 11px;
  color: #7b806f;
}
#more-work {
  background: transparent;
  padding: 0;
  font-size: 12px;
}
.services-section {
  background: var(--dark);
  color: var(--paper);
  border-radius: 30px;
  margin-inline: 15px;
  padding-block: 95px;
}
.services-section .section-intro {
  color: #b5b9aa;
}
.services-section .section-kicker {
  color: #bdc2b0;
}
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.service-card {
  padding: 35px 37px 0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.development {
  background: #33372c;
  color: #f3f5eb;
}
.growth {
  background: var(--lime);
  color: var(--ink);
}
.service-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  margin-bottom: 30px;
}
.service-symbol {
  font-size: 35px;
  font-weight: 500;
  letter-spacing: -0.08em;
  line-height: 1;
}
.development .service-symbol {
  color: var(--lime);
}
.growth .service-symbol {
  font-size: 47px;
  font-weight: 400;
}
.service-card h3 {
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.055em;
}
.service-card > p {
  font-size: 12px;
  line-height: 1.85;
  margin-top: 20px;
  max-width: 370px;
  opacity: 0.7;
}
.service-list {
  list-style: none;
  margin: 24px 0 30px;
  padding: 0;
  font-size: 11px;
}
.service-list > li {
  padding-block: 10px;
  border-bottom: 1px solid #ffffff19;
  display: flex;
  align-items: center;
  gap: 11px;
}
.service-list > li:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("assets/arrow-ne.svg") center / contain no-repeat;
  mask: url("assets/arrow-ne.svg") center / contain no-repeat;
  font-size: 14px;
  color: var(--lime);
}
.growth .service-list > li {
  border-color: #26331520;
}
.growth .service-list > li:before {
  color: #52682e;
}
.service-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  margin-top: auto;
  min-height: 65px;
  border-top: 1px solid #ffffff35;
}
.service-link > span {
  font-size: 24px;
  transition: transform 0.2s;
}
.growth .service-link {
  border-color: #26331535;
}
.service-link:hover > span {
  transform: translate(4px, -4px);
}
.services-footnote {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 35px;
}
.small-star {
  font-size: 38px;
  line-height: 1;
  color: var(--lime);
}
.services-footnote > p {
  font-size: 11px;
  color: #b7bdab;
}
.services-footnote strong {
  color: #f4f5ef;
  font-weight: 500;
}
.services-footnote > .text-link {
  margin-left: auto;
  font-size: 11px;
  white-space: nowrap;
}
.services-footnote > .text-link > span {
  color: var(--lime);
}
.about-section {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 95px;
  align-items: center;
  padding-top: 125px;
  padding-bottom: 100px;
}
.about-portrait {
  position: relative;
  padding-right: 10px;
}
.about-portrait > img {
  border-radius: 12px;
  aspect-ratio: 1/1.12;
  object-fit: cover;
  filter: saturate(0.65);
}
.portrait-caption {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-top: 14px;
}
.portrait-sticker {
  position: absolute;
  bottom: 45px;
  right: -20px;
  background: var(--lime);
  width: 136px;
  height: 136px;
  transform: rotate(8deg);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.04em;
  box-shadow: 0 8px 14px #00000009;
}
.portrait-sticker > span {
  font-size: 35px;
  line-height: 1.1;
  margin-top: 4px;
}
.about-copy h2 {
  font-size: 53px;
}
.about-copy > p {
  font-size: 12px;
  line-height: 1.9;
  color: #777c6e;
  max-width: 470px;
  margin-top: 18px;
}
.about-copy > .eyebrow {
  font-size: 10px;
  margin: 0 0 25px;
  color: var(--ink);
}
.about-copy > .about-lead {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
  margin-top: 25px;
}
.about-copy > .text-link {
  margin-top: 24px;
  font-size: 12px;
}
.process-section {
  padding-bottom: 110px;
}
.process-heading {
  border-top: 1px solid var(--line);
  padding-top: 38px;
  display: flex;
  align-items: center;
  gap: 65px;
  margin-bottom: 40px;
}
.process-heading > .eyebrow {
  font-size: 9px;
  color: #7b806f;
}
.process-heading h2 {
  font-size: 29px;
  letter-spacing: -0.04em;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.step-number {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  font-size: 11px;
  color: #929785;
}
.step-number > span {
  font-size: 17px;
  color: var(--ink);
}
.process-grid h3 {
  font-size: 20px;
  margin-top: 22px;
  letter-spacing: -0.04em;
}
.process-grid p {
  font-size: 11px;
  line-height: 1.9;
  color: #777c6e;
  margin-top: 14px;
  max-width: 300px;
}
.testimonials-section {
  background: #eceedf;
  padding-block: 90px;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.testimonial {
  margin: 0;
  background: var(--paper);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.testimonial-logo {
  height: 32px;
  object-fit: contain;
  object-position: left center;
  width: 115px;
}
.quote-mark {
  font-size: 60px;
  height: 40px;
  margin-top: 18px;
  line-height: 1;
  letter-spacing: -0.08em;
  font-family: Georgia, serif;
  color: #8d9a6d;
}
.testimonial blockquote {
  margin: 6px 0 25px;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.025em;
}
.testimonial figcaption {
  margin-top: auto;
  padding-top: 18px;
  width: 100%;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.testimonial figcaption > strong {
  font-size: 11px;
  font-weight: 700;
}
.testimonial figcaption > span {
  font-size: 9px;
  color: #7d8271;
}
.testimonial-note {
  font-size: 9px;
  color: #7e8471;
  margin-top: 14px;
}
.recognition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 62px;
  padding-top: 35px;
  border-top: 1px solid #cfd3bf;
}
.recognition > .eyebrow {
  font-size: 8px;
  color: #798165;
  max-width: 120px;
  flex-shrink: 0;
}
.recognition-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.recognition-item > img {
  width: 60px;
  height: 48px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.recognition-item > span {
  font-size: 8px;
  line-height: 1.55;
  max-width: 100px;
  color: #7f866e;
}
.recognition-item strong {
  font-size: 9px;
  font-weight: 600;
  color: #444a39;
}
.faq-section {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: 100px;
  padding-block: 110px 120px;
}
.faq-section h2 {
  font-size: 53px;
}
.faq-section > div > p:not(.eyebrow) {
  color: #7c8270;
  font-size: 12px;
  line-height: 1.9;
  margin-top: 25px;
}
.inline-link {
  color: var(--ink);
  display: inline-block;
  margin-top: 3px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.faq-list {
  padding-top: 5px;
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list details:first-child {
  border-top: 1px solid var(--line);
}
.faq-list summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding-block: 24px;
  line-height: 1.65;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary > span {
  font-size: 20px;
  font-weight: 400;
  transition: transform 0.2s;
  line-height: 1;
}
.faq-list details[open] summary > span {
  transform: rotate(45deg);
}
.faq-list details > p {
  font-size: 11px;
  color: #7b826e;
  line-height: 1.9;
  padding: 0 35px 24px 0;
}
.contact-section {
  background: var(--dark);
  color: var(--paper);
  border-radius: 30px 30px 0 0;
  padding: 65px 0 0;
  margin: 0 15px;
}
.contact-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.contact-heading > .eyebrow {
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #bfc5b3;
}
.contact-heading .status-dot {
  background: var(--lime);
}
.contact-spark {
  font-size: 55px;
  line-height: 1;
  color: var(--lime);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: start;
  padding-bottom: 75px;
}
.contact-copy h2 {
  font-size: 59px;
  line-height: 1.1;
  letter-spacing: -0.06em;
}
.contact-copy h2 > span {
  color: var(--lime);
}
.contact-copy > p {
  font-size: 12px;
  color: #a8af9b;
  margin-top: 26px;
  line-height: 1.9;
  max-width: 320px;
}
.email-link {
  display: inline-flex;
  gap: 20px;
  align-items: center;
  font-size: 18px;
  letter-spacing: -0.035em;
  margin-top: 25px;
  border-bottom: 1px solid #5c6450;
  padding-bottom: 7px;
  max-width: 100%;
}
.email-link > span {
  color: var(--lime);
  font-size: 23px;
}
.contact-person {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 38px;
}
.contact-person > img {
  width: 43px;
  height: 43px;
  border-radius: 50%;
}
.contact-person > p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
}
.contact-person strong {
  font-weight: 500;
}
.contact-person p > span {
  font-size: 8px;
  color: #969e89;
}
.contact-form {
  background: #30352a;
  border: 1px solid #ffffff09;
  border-radius: 14px;
  padding: 30px;
}
.contact-form h3 {
  font-size: 24px;
  letter-spacing: -0.04em;
  font-weight: 500;
}
.form-intro {
  font-size: 10px;
  color: #a8b098;
  margin-top: 8px;
  margin-bottom: 26px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field {
  min-width: 0;
}
.field > label,
.service-choices > legend {
  display: block;
  font-size: 10px;
  margin-bottom: 10px;
  color: #e4e8dc;
  font-weight: 500;
}
.field > label > span {
  color: #aeb79b;
  font-size: 9px;
}
.field > input,
.field > textarea {
  width: 100%;
  background: #ffffff04;
  border: 1px solid #626b524f;
  border-radius: 6px;
  padding: 12px;
  color: var(--paper);
  font-size: 11px;
  transition: border 0.2s;
}
.field > input {
  height: 45px;
}
.field > textarea {
  resize: vertical;
  min-height: 100px;
  max-height: 300px;
  line-height: 1.7;
}
.field > input::placeholder,
.field > textarea::placeholder {
  color: #969f87;
  opacity: 1;
}
.service-choices {
  border: 0;
  padding: 0;
  margin: 23px 0;
}
.service-choices > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.service-choices label {
  position: relative;
  display: block;
  cursor: pointer;
  max-width: 100%;
}
.service-choices input {
  position: absolute;
  left: 8px;
  top: 8px;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.service-choices label > span {
  padding: 9px 11px;
  min-height: 36px;
  display: block;
  border: 1px solid #626b524f;
  border-radius: 50px;
  color: #aab49a;
  font-size: 8px;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.service-choices input:checked + span {
  border-color: var(--lime);
  background: #d0f86110;
  color: var(--lime);
}
.service-choices input:focus-visible + span {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
.submit-button {
  margin-top: 18px;
  width: 100%;
  justify-content: space-between;
  min-height: 48px;
  font-size: 11px;
  padding-inline: 20px;
}
.form-note {
  font-size: 8px;
  line-height: 1.7;
  color: #a0ab8f;
  margin-top: 13px;
  max-width: 320px;
}
.form-status {
  font-size: 10px;
  line-height: 1.8;
  color: var(--lime);
  margin-top: 15px;
}
.copy-enquiry {
  background: transparent;
  padding: 10px 0 0;
  min-height: 44px;
  font-size: 10px;
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-footer {
  border-top: 1px solid #ffffff1a;
  padding-block: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 9px;
  color: #a4ac95;
}
.footer-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #e7ebdf;
}
.footer-name > span {
  font-size: 8px;
  color: #838e73;
  font-weight: 400;
  letter-spacing: 0;
}
.site-footer > p {
  font-size: 9px;
  color: #828d72;
}
.site-footer > div {
  display: flex;
  gap: 27px;
}
.site-footer a:hover {
  color: var(--lime);
}
.mobile-contact {
  display: none;
}
.case-dialog {
  width: min(860px, calc(100% - 40px));
  max-height: 90dvh;
  max-height: 90vh;
  border: 0;
  padding: 0;
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  box-shadow: 0 20px 100px #0003;
}
.case-dialog::backdrop {
  background: #151a13a6;
  backdrop-filter: blur(7px);
}
.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  background: var(--paper);
  font-size: 25px;
  z-index: 2;
  box-shadow: 0 2px 12px #0001;
}
.dialog-image {
  height: 330px;
  overflow: hidden;
  background: #e7e9e1;
  padding: 32px 15% 0;
}
.dialog-image > img {
  width: 100%;
  box-shadow: 0 8px 35px #0002;
  border-radius: 4px;
}
.dialog-content {
  padding: 34px;
}
.dialog-content h2 {
  font-size: 43px;
  margin-top: 12px;
}
.dialog-content > p:not(.eyebrow) {
  font-size: 13px;
  color: #777e6b;
  line-height: 1.9;
  max-width: 600px;
  margin-top: 20px;
}
.dialog-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 25px;
}
.dialog-actions > .text-link {
  font-size: 11px;
}
.noscript-note {
  padding: 20px;
  background: var(--lime);
}
@keyframes sculpture-float {
  0%,
  100% {
    transform: translateY(-5px) rotate(-3deg);
  }
  50% {
    transform: translateY(8px) rotate(3deg);
  }
}
@media (min-width: 1600px) {
  .hero {
    padding-top: 50px;
  }
  .hero-art {
    min-height: 410px;
  }
  h1 {
    font-size: 108px;
  }
  .hero-grid {
    gap: 50px;
  }
  .hero-proof {
    padding-block: 40px;
  }
}
@media (max-width: 1150px) {
  .shell {
    width: calc(100% - 72px);
  }
  .hero-grid {
    gap: 20px;
    grid-template-columns: 1.65fr 1fr;
  }
  h1 {
    font-size: 7.3vw;
  }
  .hero-art {
    min-height: 370px;
  }
  .hero-intro {
    font-size: 13px;
    max-width: 400px;
  }
  .hero-actions {
    gap: 20px;
  }
  .hero-actions .button {
    font-size: 11px;
    padding-inline: 17px;
    gap: 17px;
  }
  .hero-proof {
    gap: 35px;
  }
  .personal-intro {
    margin: 0;
  }
  .scroll-cue {
    display: none;
  }
  .hero-proof .proof-stat {
    margin-left: auto;
  }
  .client-strip {
    gap: 35px;
  }
  .client-logos {
    gap: 18px;
  }
  .project-visual {
    height: 330px;
  }
  .section-space {
    padding-block: 85px;
  }
  .about-section {
    gap: 55px;
  }
  .about-copy h2,
  .faq-section h2 {
    font-size: 45px;
  }
  .service-card {
    padding: 30px 28px 0;
  }
  .service-card h3 {
    font-size: 33px;
  }
  .services-footnote {
    gap: 17px;
  }
  .services-footnote > p {
    max-width: 470px;
  }
  .process-section {
    padding-bottom: 85px;
  }
  .testimonial {
    padding: 22px;
  }
  .testimonial blockquote {
    font-size: 13px;
  }
  .recognition {
    gap: 16px;
  }
  .recognition-item {
    gap: 7px;
  }
  .recognition-item > img {
    width: 48px;
  }
  .recognition-item > span {
    font-size: 7px;
  }
  .recognition-item strong {
    font-size: 8px;
  }
  .faq-section {
    gap: 55px;
  }
  .contact-grid {
    gap: 40px;
  }
  .contact-copy h2 {
    font-size: 50px;
  }
  .contact-form {
    padding: 25px;
  }
  .form-row {
    gap: 10px;
  }
  .email-link {
    font-size: 17px;
  }
  .site-footer > p {
    display: none;
  }
}
@media (max-width: 850px) {
  .shell {
    width: calc(100% - 48px);
  }
  .brand {
    gap: 15px;
  }
  .brand > span {
    padding-left: 15px;
  }
  .desktop-nav {
    gap: 22px;
    padding: 0;
  }
  .desktop-nav a {
    font-size: 10px;
  }
  .hero-location {
    display: none;
  }
  .hero-grid {
    grid-template-columns: 1fr 0.7fr;
    gap: 20px;
  }
  h1 {
    font-size: 7.2vw;
  }
  .hero-intro {
    font-size: 12px;
    max-width: 340px;
  }
  .hero-art {
    min-height: 340px;
  }
  .hero-actions {
    flex-wrap: wrap;
    gap: 8px 20px;
  }
  .hero-actions .button {
    font-size: 10px;
    min-height: 47px;
  }
  .hero-note {
    font-size: 8px;
  }
  .art-label {
    font-size: 9px;
  }
  .art-top,
  .art-bottom {
    font-size: 5px;
    left: 15px;
    right: 15px;
  }
  .art-orbit {
    width: 250px;
    height: 250px;
  }
  .orbit-two {
    width: 310px;
    height: 310px;
  }
  .hero-proof {
    gap: 18px;
    margin-top: 20px;
    padding-block: 25px;
  }
  .personal-intro strong {
    font-size: 12px;
  }
  .personal-intro span {
    font-size: 8px;
  }
  .proof-stat {
    gap: 10px;
  }
  .proof-stat > strong {
    font-size: 30px;
  }
  .proof-stat > span {
    font-size: 8px;
  }
  .client-strip {
    gap: 25px;
  }
  .client-strip > .eyebrow {
    font-size: 6px;
  }
  .client-logos {
    gap: 15px;
  }
  .client-logos img {
    height: 25px;
  }
  .section-heading {
    gap: 20px;
  }
  .section-intro {
    font-size: 11px;
    max-width: 255px;
  }
  .project-visual {
    height: 280px;
  }
  .project-visual-top {
    font-size: 6px;
    left: 18px;
    right: 18px;
    top: 18px;
  }
  .browser-frame {
    top: 52px;
  }
  .project-info {
    flex-direction: column;
    gap: 9px;
  }
  .project-info h3 {
    font-size: 20px;
  }
  .project-info p {
    font-size: 9px;
  }
  .project-tag {
    font-size: 7px;
  }
  .projects-grid {
    gap: 28px 18px;
  }
  .work-toolbar > p {
    display: none;
  }
  .work-toolbar {
    justify-content: flex-end;
  }
  .services-section,
  .contact-section {
    margin-inline: 8px;
  }
  .service-card {
    padding: 25px 23px 0;
  }
  .service-card h3 {
    font-size: 28px;
  }
  .service-card > p {
    font-size: 11px;
  }
  .service-list {
    font-size: 10px;
  }
  .service-link {
    font-size: 10px;
  }
  .services-footnote {
    align-items: flex-start;
  }
  .services-footnote > p {
    font-size: 10px;
  }
  .services-footnote > .text-link {
    font-size: 10px;
  }
  .about-section {
    gap: 40px;
  }
  .about-copy h2 {
    font-size: 35px;
  }
  .about-copy > .about-lead {
    font-size: 14px;
  }
  .about-copy > p {
    font-size: 10px;
  }
  .about-copy > .text-link {
    font-size: 10px;
  }
  .portrait-sticker {
    width: 105px;
    height: 105px;
    font-size: 10px;
    right: -15px;
  }
  .portrait-caption {
    font-size: 6px;
  }
  .process-grid {
    gap: 25px;
  }
  .process-grid h3 {
    font-size: 17px;
  }
  .process-grid p {
    font-size: 10px;
  }
  .process-heading {
    gap: 40px;
  }
  .process-heading h2 {
    font-size: 26px;
  }
  .testimonials-grid {
    gap: 12px;
  }
  .testimonial {
    padding: 20px;
  }
  .testimonial blockquote {
    font-size: 12px;
  }
  .testimonial-logo {
    width: 95px;
    height: 28px;
  }
  .testimonial figcaption > strong {
    font-size: 9px;
  }
  .testimonial figcaption > span {
    font-size: 8px;
  }
  .recognition {
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 30px;
    row-gap: 20px;
  }
  .recognition > .eyebrow {
    width: 100%;
    max-width: none;
  }
  .recognition-item {
    gap: 10px;
  }
  .recognition-item > img {
    width: 45px;
    height: 40px;
  }
  .recognition-item > span {
    max-width: 85px;
  }
  .faq-section {
    gap: 40px;
    grid-template-columns: 0.7fr 1fr;
  }
  .faq-section h2 {
    font-size: 37px;
  }
  .faq-list summary {
    font-size: 11px;
  }
  .contact-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 30px;
  }
  .contact-copy h2 {
    font-size: 40px;
  }
  .contact-copy > p {
    font-size: 11px;
  }
  .email-link {
    font-size: 14px;
    gap: 15px;
  }
  .contact-form {
    padding: 22px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .contact-person > p {
    font-size: 8px;
  }
  .contact-person p > span {
    font-size: 7px;
  }
  .contact-form h3 {
    font-size: 21px;
  }
}
@media (max-width: 640px) {
  html {
    scroll-padding-top: 30px;
  }
  .shell {
    width: calc(100% - 40px);
  }
  .site-header {
    height: 78px;
  }
  .brand img {
    width: 69px;
    height: 40px;
  }
  .brand > span {
    font-size: 7px;
    padding-left: 13px;
  }
  .desktop-nav,
  .header-cta {
    display: none;
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ink);
  }
  .menu-toggle > span {
    width: 17px;
    height: 1px;
    background: var(--paper);
    transition: transform 0.2s;
  }
  .menu-toggle[aria-expanded="true"] > span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] > span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }
  .mobile-menu:not([hidden]) {
    display: flex;
  }
  .mobile-menu {
    position: absolute;
    top: 77px;
    left: 0;
    right: 0;
    padding: 15px 25px 25px;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 24px #23251f0e;
  }
  .mobile-menu > a {
    display: flex;
    justify-content: space-between;
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
    font-size: 22px;
    letter-spacing: -0.045em;
  }
  .mobile-menu > a > span {
    font-size: 10px;
    align-self: center;
    color: var(--muted);
  }
  .mobile-menu > a:last-child {
    border: 0;
  }
  .hero {
    padding-top: 29px;
  }
  .hero-topline {
    margin-bottom: 28px;
  }
  .hero-topline .eyebrow {
    font-size: 7px;
    letter-spacing: 0.07em;
    gap: 9px;
  }
  .status-dot {
    width: 6px;
    height: 6px;
  }
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .hero-copy {
    padding: 0;
  }
  h1 {
    font-size: clamp(41px, 10vw, 65px);
    line-height: 1.13;
    letter-spacing: -0.065em;
    white-space: normal;
  }
  .highlight {
    white-space: nowrap;
  }
  .highlight svg {
    height: 16px;
    bottom: -9px;
    stroke-width: 13px;
  }
  .hero-intro {
    font-size: 13px;
    line-height: 1.9;
    max-width: 100%;
    margin-top: 29px;
  }
  .hero-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    align-items: center;
    margin-top: 24px;
  }
  .hero-actions .button {
    min-height: 51px;
    padding: 13px 18px;
    font-size: 10px;
    gap: 17px;
  }
  .hero-actions .text-link {
    font-size: 10px;
    gap: 9px;
    white-space: nowrap;
  }
  .hero-actions .text-link > span {
    font-size: 17px;
  }
  .hero-note {
    font-size: 8px;
    line-height: 1.7;
    margin-top: 12px;
    max-width: 260px;
  }
  .hero-art {
    min-height: 260px;
    height: 260px;
    align-self: auto;
    border-radius: 12px;
  }
  .hero-sculpture {
    width: 320px;
    max-width: none;
    height: 300px;
    top: -26px;
    left: auto;
    right: 2%;
    object-fit: contain;
  }
  .art-top,
  .art-bottom {
    font-size: 6px;
    left: 19px;
    right: 19px;
  }
  .art-top {
    top: 18px;
  }
  .art-bottom {
    bottom: 16px;
    padding-top: 10px;
  }
  .art-label {
    font-size: 9px;
    bottom: 50px;
    left: 19px;
  }
  .art-orbit {
    width: 250px;
    height: 250px;
    left: 62%;
    top: 42%;
  }
  .orbit-two {
    width: 320px;
    height: 320px;
  }
  .art-label-indent {
    padding-left: 23px;
  }
  .tiny-cross {
    font-size: 17px;
  }
  .hero-proof {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    padding-block: 25px 30px;
    margin-top: 0;
  }
  .personal-intro {
    grid-column: 1/-1;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--line);
  }
  .personal-intro > img {
    width: 45px;
    height: 45px;
  }
  .personal-intro strong {
    font-size: 12px;
  }
  .personal-intro span {
    font-size: 10px;
  }
  .hero-proof .proof-stat {
    margin: 0;
  }
  .proof-stat {
    gap: 12px;
  }
  .proof-stat > strong {
    font-size: 36px;
  }
  .proof-stat > span {
    font-size: 9px;
    max-width: 80px;
  }
  .client-strip {
    display: block;
    padding-block: 24px;
  }
  .client-strip > .eyebrow {
    font-size: 7px;
    line-height: 1.7;
  }
  .client-strip > .eyebrow br {
    display: none;
  }
  .client-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px 24px;
    margin-top: 26px;
    justify-items: center;
  }
  .client-logos img {
    width: 85px;
    max-width: 95px;
    height: 29px;
  }
  .client-logos img:nth-child(2) {
    max-width: 55px;
  }
  .section-space {
    padding-block: 68px;
  }
  .section-kicker {
    font-size: 8px;
    margin-bottom: 19px;
  }
  h2 {
    font-size: 43px;
    letter-spacing: -0.06em;
  }
  .section-heading {
    display: block;
    margin-bottom: 28px;
  }
  .section-intro {
    font-size: 12px;
    max-width: 320px;
    line-height: 1.8;
    padding: 0;
    margin-top: 23px;
  }
  .section-intro br {
    display: none;
  }
  .work-toolbar {
    margin-bottom: 21px;
    justify-content: flex-start;
  }
  .filters {
    gap: 5px;
    flex-wrap: wrap;
  }
  .filter {
    font-size: 9px;
    min-height: 40px;
    padding: 10px 14px;
  }
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .project-visual {
    height: 320px;
    border-radius: 10px;
  }
  .project-visual-top {
    font-size: 7px;
    top: 22px;
    left: 22px;
    right: 22px;
  }
  .browser-frame {
    left: 9%;
    width: 82%;
    top: 58px;
  }
  .browser-chrome {
    height: 22px;
  }
  .project-open {
    width: 41px;
    height: 41px;
    bottom: 17px;
    right: 17px;
  }
  .project-info {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding-top: 15px;
  }
  .project-info h3 {
    font-size: 21px;
  }
  .project-info p {
    font-size: 9px;
    margin-top: 6px;
    max-width: 225px;
  }
  .project-tag {
    font-size: 6px;
    padding: 4px 7px;
    margin-top: 3px;
  }
  .work-bottom {
    margin-top: 28px;
    padding-top: 17px;
    align-items: flex-start;
    gap: 20px;
  }
  .work-bottom > span {
    font-size: 9px;
    max-width: 155px;
    line-height: 1.8;
  }
  #more-work {
    font-size: 10px;
    gap: 10px;
    min-height: 34px;
    text-align: right;
    line-height: 1.6;
  }
  .services-section {
    border-radius: 20px;
    margin-inline: 7px;
    padding-block: 58px;
  }
  .services-section .shell,
  .contact-section .shell {
    width: calc(100% - 34px);
  }
  .services-section h2 {
    font-size: 42px;
  }
  .services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .service-card {
    padding: 27px 25px 0;
    border-radius: 12px;
  }
  .service-top {
    margin-bottom: 24px;
  }
  .service-symbol {
    font-size: 33px;
  }
  .service-card h3 {
    font-size: 34px;
  }
  .service-card > p {
    font-size: 12px;
    line-height: 1.9;
  }
  .service-list {
    font-size: 11px;
    margin-block: 22px 24px;
  }
  .service-list > li {
    padding-block: 10px;
  }
  .service-link {
    font-size: 11px;
    min-height: 64px;
  }
  .services-footnote {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 14px;
    margin-top: 29px;
  }
  .small-star {
    font-size: 30px;
  }
  .services-footnote > p {
    font-size: 10px;
    line-height: 1.85;
  }
  .services-footnote strong {
    display: block;
    margin-bottom: 4px;
  }
  .services-footnote > .text-link {
    grid-column: 2;
    margin: 0;
    font-size: 11px;
    justify-self: start;
  }
  .about-section {
    display: flex;
    flex-direction: column;
    gap: 39px;
    padding-bottom: 60px;
  }
  .about-portrait {
    width: 100%;
    padding-right: 14px;
  }
  .about-portrait > img {
    aspect-ratio: 1.15;
    object-position: center 43%;
  }
  .portrait-sticker {
    width: 112px;
    height: 112px;
    font-size: 10px;
    right: -1px;
    bottom: 35px;
  }
  .portrait-caption {
    font-size: 7px;
  }
  .about-copy h2 {
    font-size: 42px;
  }
  .about-copy > .eyebrow {
    font-size: 8px;
    margin-bottom: 18px;
  }
  .about-copy > .about-lead {
    font-size: 17px;
    margin-top: 23px;
  }
  .about-copy > p {
    font-size: 12px;
    line-height: 1.9;
    margin-top: 17px;
  }
  .about-copy > .text-link {
    font-size: 11px;
    margin-top: 20px;
  }
  .process-section {
    padding-bottom: 65px;
  }
  .process-heading {
    display: block;
    padding-top: 27px;
    margin-bottom: 30px;
  }
  .process-heading > .eyebrow {
    font-size: 8px;
    margin-bottom: 12px;
  }
  .process-heading h2 {
    font-size: 28px;
    line-height: 1.2;
  }
  .process-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .process-grid article {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 4px 15px;
  }
  .step-number {
    grid-row: 1/3;
    border: 0;
    padding: 2px 0 0;
    font-size: 11px;
  }
  .step-number > span {
    display: none;
  }
  .process-grid h3 {
    font-size: 21px;
    margin: 0;
    line-height: 1.4;
  }
  .process-grid p {
    grid-column: 2;
    font-size: 12px;
    max-width: none;
    margin-top: 6px;
  }
  .testimonials-section {
    padding-block: 62px;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .testimonial {
    padding: 27px;
  }
  .testimonial-logo {
    width: 110px;
    height: 31px;
  }
  .quote-mark {
    font-size: 63px;
    margin-top: 20px;
    height: 35px;
  }
  .testimonial blockquote {
    font-size: 17px;
    line-height: 1.7;
    margin-top: 10px;
    margin-bottom: 24px;
  }
  .testimonial figcaption > strong {
    font-size: 11px;
  }
  .testimonial figcaption > span {
    font-size: 9px;
  }
  .testimonial-note {
    font-size: 8px;
    margin-top: 16px;
  }
  .recognition {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 27px 12px;
    margin-top: 38px;
    padding-top: 26px;
  }
  .recognition > .eyebrow {
    grid-column: 1/-1;
    font-size: 7px;
  }
  .recognition > .eyebrow br {
    display: none;
  }
  .recognition-item {
    gap: 9px;
    align-items: center;
  }
  .recognition-item > img {
    width: 45px;
    height: 44px;
  }
  .recognition-item > span {
    font-size: 7px;
    max-width: 100px;
  }
  .recognition-item strong {
    font-size: 8px;
  }
  .faq-section {
    display: block;
    padding-block: 65px;
  }
  .faq-section h2 {
    font-size: 43px;
  }
  .faq-section > div > p:not(.eyebrow) {
    font-size: 12px;
    margin-top: 20px;
  }
  .faq-list {
    margin-top: 30px;
    padding: 0;
  }
  .faq-list summary {
    font-size: 12px;
    padding-block: 22px;
    gap: 20px;
  }
  .faq-list details > p {
    font-size: 12px;
    padding: 0 20px 22px 0;
  }
  .contact-section {
    border-radius: 20px 20px 0 0;
    margin-inline: 7px;
    padding-top: 35px;
  }
  .contact-heading {
    margin-bottom: 27px;
  }
  .contact-heading > .eyebrow {
    font-size: 7px;
    gap: 9px;
  }
  .contact-spark {
    font-size: 37px;
  }
  .contact-grid {
    display: block;
    padding-bottom: 38px;
  }
  .contact-copy h2 {
    font-size: 47px;
    line-height: 1.13;
    letter-spacing: -0.06em;
  }
  .contact-copy > p {
    font-size: 12px;
    max-width: 315px;
    margin-top: 25px;
  }
  .email-link {
    font-size: 20px;
    gap: 20px;
    margin-top: 22px;
  }
  .contact-person {
    margin-top: 26px;
  }
  .contact-person > p {
    font-size: 10px;
  }
  .contact-person p > span {
    font-size: 8px;
  }
  .contact-form {
    margin-top: 35px;
    padding: 25px 22px;
    border-radius: 12px;
  }
  .contact-form h3 {
    font-size: 25px;
  }
  .form-intro {
    font-size: 10px;
    margin-bottom: 25px;
  }
  .form-row {
    gap: 21px;
  }
  .field > label,
  .service-choices > legend {
    font-size: 11px;
    margin-bottom: 10px;
  }
  .field > input,
  .field > textarea {
    font-size: 16px;
    padding: 13px 12px;
    border-color: #69745b7a;
    border-radius: 7px;
  }
  .field > input {
    height: 50px;
  }
  .field > input::placeholder,
  .field > textarea::placeholder {
    font-size: 12px;
  }
  .field > textarea {
    min-height: 115px;
    line-height: 1.6;
  }
  .service-choices {
    margin-block: 23px;
  }
  .service-choices > div {
    gap: 8px;
  }
  .service-choices label > span {
    font-size: 9px;
    min-height: 44px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
  }
  .submit-button {
    font-size: 11px;
    min-height: 52px;
    margin-top: 18px;
  }
  .form-note {
    font-size: 9px;
    margin-top: 14px;
    line-height: 1.8;
  }
  .form-status {
    font-size: 11px;
  }
  .copy-enquiry {
    font-size: 11px;
  }
  .site-footer {
    flex-wrap: wrap;
    gap: 18px;
    padding-block: 25px 90px;
  }
  .footer-name {
    width: 100%;
    font-size: 12px;
    justify-content: space-between;
  }
  .footer-name > span {
    font-size: 9px;
  }
  .site-footer > div {
    width: 100%;
    justify-content: space-between;
    font-size: 11px;
  }
  .mobile-contact {
    display: flex;
    position: fixed;
    z-index: 20;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 20px;
    right: 20px;
    padding: 14px 21px;
    background: var(--lime);
    color: var(--ink);
    border: 1px solid #2a341827;
    border-radius: 100px;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    min-height: 51px;
    box-shadow: 0 5px 25px #24272020;
    transition:
      opacity 0.2s,
      transform 0.2s;
  }
  .mobile-contact > span {
    font-size: 21px;
    font-weight: 400;
  }
  .mobile-contact.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(90px);
  }
  .case-dialog {
    width: calc(100% - 24px);
    max-height: 88dvh;
    border-radius: 13px;
  }
  .dialog-image {
    height: 235px;
    padding: 30px 10% 0;
  }
  .dialog-content {
    padding: 26px;
  }
  .dialog-content h2 {
    font-size: 34px;
  }
  .dialog-content > p:not(.eyebrow) {
    font-size: 12px;
  }
  .dialog-actions {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    margin-top: 23px;
  }
  .dialog-actions > .button {
    font-size: 12px;
  }
  .dialog-actions > .text-link {
    justify-content: center;
    font-size: 11px;
  }
  .dialog-close {
    width: 44px;
    height: 44px;
  }
  .dialog-open .mobile-contact {
    display: none;
  }
}
@media (max-width: 375px) {
  .shell {
    width: calc(100% - 32px);
  }
  .hero-actions {
    gap: 13px;
  }
  .hero-actions .button {
    font-size: 9px;
    gap: 10px;
    padding-inline: 15px;
  }
  .hero-actions .text-link {
    font-size: 9px;
    gap: 7px;
  }
  h1 {
    font-size: 10vw;
  }
  .hero-topline .eyebrow {
    font-size: 6.5px;
  }
  .project-info {
    flex-direction: column;
    gap: 7px;
  }
  .contact-copy h2 {
    font-size: 40px;
  }
  .email-link {
    font-size: 17px;
  }
  .contact-form {
    padding: 23px 18px;
  }
  .service-card {
    padding-inline: 22px;
  }
  .service-card h3 {
    font-size: 31px;
  }
  .about-copy h2,
  .services-section h2 {
    font-size: 37px;
  }
  .project-visual {
    height: 285px;
  }
  .client-logos {
    gap: 22px 18px;
  }
  .brand > span {
    font-size: 6px;
  }
  .work-bottom > span {
    max-width: 130px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .hero-sculpture {
    transform: none;
  }
}

/* Touch targets, readable mobile copy, and short-screen layouts. */
@media (max-width: 640px) {
  h1 {
    font-size: clamp(37px, 11.5vw, 72px);
  }
  .hero-intro {
    font-size: 14px;
    line-height: 1.85;
  }
  .hero-actions {
    flex-wrap: wrap;
    gap: 12px 22px;
  }
  .hero-actions .button {
    font-size: 12px;
    min-height: 52px;
    padding-inline: 20px;
    gap: 23px;
  }
  .hero-actions .text-link {
    font-size: 12px;
    min-height: 44px;
  }
  .hero-note {
    font-size: 10px;
    max-width: 100%;
  }
  .hero-art {
    margin-top: 0;
  }
  .hero-sculpture {
    width: 300px;
    height: 280px;
    top: -20px;
    right: 0;
  }
  .personal-intro span {
    font-size: 11px;
  }
  .proof-stat > span {
    font-size: 10px;
  }
  .section-intro,
  .faq-section > div > p:not(.eyebrow) {
    font-size: 14px;
  }
  .project-info p {
    font-size: 11px;
    line-height: 1.7;
  }
  .project-tag {
    font-size: 8px;
  }
  .filter {
    min-height: 44px;
    font-size: 11px;
  }
  .work-bottom > span {
    font-size: 11px;
    max-width: 170px;
  }
  #more-work {
    font-size: 11px;
    min-height: 44px;
  }
  .service-card > p {
    font-size: 14px;
    line-height: 1.85;
  }
  .service-list {
    font-size: 12px;
  }
  .service-link {
    font-size: 13px;
  }
  .services-footnote > p {
    font-size: 12px;
  }
  .services-footnote > .text-link {
    font-size: 12px;
  }
  .about-copy > p {
    font-size: 14px;
    line-height: 1.85;
  }
  .about-copy > .about-lead {
    font-size: 18px;
  }
  .about-copy > .text-link {
    font-size: 12px;
  }
  .process-grid p {
    font-size: 13px;
    line-height: 1.85;
  }
  .testimonial blockquote {
    font-size: 18px;
  }
  .testimonial figcaption > strong {
    font-size: 12px;
  }
  .testimonial figcaption > span {
    font-size: 10px;
  }
  .faq-list summary {
    font-size: 14px;
    line-height: 1.7;
  }
  .faq-list details > p {
    font-size: 13px;
  }
  .contact-copy > p {
    font-size: 14px;
  }
  .form-intro {
    font-size: 12px;
    line-height: 1.8;
  }
  .field > label,
  .service-choices > legend {
    font-size: 12px;
  }
  .submit-button {
    font-size: 12px;
  }
  .service-choices label > span {
    font-size: 11px;
  }
  .mobile-contact {
    font-size: 12px;
  }
  .dialog-content > p:not(.eyebrow) {
    font-size: 14px;
  }
}
@media (max-width: 375px) {
  h1 {
    font-size: 11.4vw;
  }
  .hero-actions {
    gap: 7px;
    align-items: flex-start;
    flex-direction: column;
  }
  .hero-actions .button {
    font-size: 12px;
    min-height: 52px;
    gap: 25px;
    padding-inline: 20px;
  }
  .hero-actions .text-link {
    font-size: 12px;
    padding-inline: 2px;
  }
  .hero-art {
    height: 245px;
    min-height: 245px;
  }
  .hero-note {
    font-size: 9px;
  }
  .hero-intro {
    font-size: 14px;
  }
  .contact-copy h2 {
    font-size: 39px;
  }
}

.hero-showcase {
  background: #dfe4d7;
  display: block;
  transition: background 0.25s;
}
.showcase-top {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 23px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 7px;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.showcase-top > span:last-child {
  font-size: 6px;
  color: #7c856d;
}
.showcase-window {
  position: absolute;
  width: 74%;
  border: 1px solid #d2d8c9;
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 16px 25px #27351d26;
  transition: transform 0.5s;
}
.showcase-chrome {
  height: 23px;
  background: #f3f4ee;
  display: flex;
  align-items: center;
  padding: 0 9px;
  gap: 3px;
  font-size: 6px;
  color: #7c856d;
  border-bottom: 1px solid #e0e4d8;
}
.showcase-chrome > i {
  width: 4px;
  height: 4px;
  border: 1px solid #aab39b;
  border-radius: 50%;
}
.showcase-chrome > span {
  margin: auto;
  transform: translateX(-7px);
}
.showcase-window > img {
  width: 100%;
  height: auto;
}
.showcase-back {
  left: 35%;
  top: 65px;
  transform: rotate(9deg);
  height: 300px;
  background: #202124;
}
.showcase-front {
  left: 5%;
  top: 129px;
  transform: rotate(-7deg);
  height: 265px;
}
.hero-showcase:hover .showcase-front {
  transform: translateY(-7px) rotate(-9deg);
}
.hero-showcase:hover .showcase-back {
  transform: translateY(-4px) rotate(12deg);
}
.showcase-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: -0.02em;
  line-height: 1.5;
}
.showcase-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-size: 22px;
}
.client-logos img {
  mix-blend-mode: multiply;
  opacity: 0.72;
  max-width: 105px;
  height: 28px;
  filter: grayscale(1);
}
.client-logos img:nth-child(2) {
  max-width: 55px;
  height: 40px;
}
@media (max-width: 1150px) {
  .showcase-back {
    height: 240px;
  }
  .showcase-front {
    height: 220px;
    top: 120px;
  }
  .showcase-caption {
    font-size: 10px;
    bottom: 20px;
  }
  .showcase-top {
    font-size: 6px;
    gap: 14px;
  }
  .showcase-top > span:last-child {
    display: none;
  }
}
@media (max-width: 850px) {
  .showcase-window {
    width: 80%;
  }
  .showcase-back {
    top: 58px;
    left: 30%;
    height: 200px;
  }
  .showcase-front {
    top: 108px;
    height: 180px;
  }
  .showcase-caption {
    font-size: 9px;
    left: 18px;
    right: 18px;
  }
  .showcase-top {
    left: 18px;
    right: 18px;
    font-size: 5px;
  }
  .showcase-arrow {
    width: 30px;
    height: 30px;
    font-size: 19px;
  }
}
@media (max-width: 640px) {
  .hero-showcase {
    height: 310px;
    min-height: 310px;
  }
  .showcase-top {
    top: 20px;
    left: 22px;
    right: 22px;
    font-size: 7px;
  }
  .showcase-top > span:last-child {
    display: inline;
    font-size: 6px;
  }
  .showcase-window {
    width: 68%;
  }
  .showcase-front {
    top: 93px;
    left: 6%;
    height: 158px;
  }
  .showcase-back {
    top: 52px;
    left: 37%;
    height: 180px;
  }
  .showcase-caption {
    font-size: 11px;
    bottom: 19px;
    left: 22px;
    right: 22px;
  }
  .showcase-chrome {
    height: 19px;
    font-size: 5px;
  }
  .showcase-arrow {
    width: 36px;
    height: 36px;
    font-size: 21px;
  }
  .client-logos img {
    height: 25px;
    width: 90px;
  }
  .client-logos img:nth-child(2) {
    height: 33px;
    max-width: 43px;
  }
}

/* SVG directions cannot be replaced with emoji on mobile operating systems. */
svg.direction-icon {
  display: inline-block;
  width: 1em !important;
  height: 1em !important;
  flex: none;
  vertical-align: -0.12em;
  pointer-events: none;
}

/* SVG directions cannot be replaced with emoji on mobile operating systems. */
svg.symbol-icon {
  display: inline-block;
  width: 1em !important;
  height: 1em !important;
  flex: none;
  vertical-align: -0.12em;
  pointer-events: none;
}


/* ===== refined.css ===== */
:root {
  --paper: #fff;
  --ink: #1c2028;
  --muted: #68717d;
  --line: #dfe3e9;
  --dark: #191e27;
  --lime: #c6d7ff;
  --accent: #365df5;
  --soft: #f2f4f7;
  --soft-accent: #eaf0ff;
}
body {
  background: var(--paper);
  color: var(--ink);
}
.site-header {
  background: var(--paper);
}
.muted,
.section-intro,
.hero-intro,
.about-copy > p,
.process-grid p,
.faq-list details > p {
  color: #656d79;
}
.hero-note,
.work-toolbar > p,
.project-info p,
.work-bottom > span,
.faq-section > div > p:not(.eyebrow) {
  color: #68717d;
}
.lime-period,
.status-dot {
  color: var(--accent);
}
.status-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px #365df50a;
}
.hero-showcase {
  background: #eef0f4;
}
.showcase-top > span:last-child {
  color: #737e8e;
}
.showcase-chrome {
  background: #f7f8fa;
  color: #7a8595;
  border-color: #e4e8ed;
}
.showcase-window {
  border-color: #d7dde7;
  box-shadow: 0 18px 32px #151e3420;
}
.showcase-caption {
  color: var(--ink);
}
.highlight svg {
  stroke: #c6d7ff;
}
.client-strip > .eyebrow,
.personal-intro span,
.proof-stat > span {
  color: #737d8a;
}
.visual-sellme {
  background: #edf0f5;
}
.visual-bdtrims {
  background: #e6e8ec;
}
.visual-prnews {
  background: #f0eeee;
}
.visual-hiccpet {
  background: #efedf7;
}
.visual-apple {
  background: #ebeff5;
}
.services-section,
.contact-section {
  background: var(--dark);
}
.development {
  background: #282e39;
}
.growth {
  background: var(--soft-accent);
}
.growth .service-symbol,
.growth .service-list > li:before {
  color: var(--accent);
}
.development .service-symbol {
  color: var(--lime);
}
.services-section .section-intro,
.services-footnote > p,
.contact-copy > p {
  color: #b5bdcc;
}
.service-list > li {
  border-color: #ffffff1f;
}
.growth .service-list > li,
.growth .service-link {
  border-color: #1a315522;
}
.services-footnote strong {
  color: #fff;
}
.testimonials-section {
  background: var(--soft);
}
.testimonial {
  background: var(--paper);
}
.quote-mark {
  color: var(--accent);
}
.recognition {
  border-color: var(--line);
}
.recognition > .eyebrow,
.recognition-item > span,
.testimonial-note {
  color: #7a8492;
}
.recognition-item strong {
  color: var(--ink);
}
.contact-form {
  background: #252c38;
  border-color: #ffffff0a;
}
.contact-copy h2 > span,
.contact-spark,
.email-link > span {
  color: var(--lime);
}
.contact-person p > span,
.form-intro,
.form-note {
  color: #b0bacb;
}
.field > input,
.field > textarea {
  border-color: #66778f80;
}
.field > input::placeholder,
.field > textarea::placeholder {
  color: #a7b3c7;
}
.field > label,
.service-choices > legend {
  color: #e4e9f2;
}
.service-choices label > span {
  border-color: #66778f70;
  color: #bbc4d5;
}
.service-choices input:checked + span {
  border-color: var(--lime);
  background: #c6d7ff12;
  color: var(--lime);
}
.button-lime,
.mobile-contact {
  background: var(--accent);
  color: #fff;
}
.button-lime:hover {
  background: #2147dd;
}
.button-dark:hover {
  background: #353e50;
}
.mobile-contact {
  border-color: #244bdf;
  box-shadow: 0 6px 25px #17328a2e;
}
.portrait-sticker {
  background: var(--soft-accent);
  color: var(--accent);
}
.testimonial figcaption > span {
  color: #68717d;
}
.email-link {
  border-color: #5f6c81;
}
.site-footer {
  color: #b0b9ca;
}
.footer-name > span,
.site-footer > p {
  color: #a2aec3;
}
.filter:not(.active):hover {
  background: #eef1f6;
}
.filter.active {
  background: var(--ink);
}
.contact-heading > .eyebrow,
.services-section .section-kicker {
  color: #c0c8d5;
}
.theme-toggle {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #eef1f7;
  border: 1px solid #d9e0ec;
  display: grid;
  place-items: center;
  margin-right: 16px;
  margin-left: auto;
}
.theme-toggle > span {
  width: 19px;
  height: 19px;
  display: block;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b58e8 50%, #d1f354 50%);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #1c202825;
}
.desktop-nav {
  margin-inline: auto;
}
.nav-current {
  font-weight: 800;
}
.nav-current:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 7px;
  vertical-align: middle;
}
.all-portfolio-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-weight: 700;
  min-height: 50px;
  font-size: 15px;
}
.all-portfolio-link > span {
  font-size: 25px;
}
.all-portfolio-link:hover {
  color: var(--accent);
}
.project-visual-top {
  display: none;
}
.browser-frame {
  top: 40px;
}
.browser-chrome {
  background: #fafbfc;
  border-color: #e2e5ea;
  color: #7c8590;
}
@media (min-width: 900px) {
  .shell {
    width: min(1760px, calc(100% - 128px));
  }
  .site-header {
    height: 115px;
  }
  .brand img {
    width: 98px;
    height: 54px;
  }
  .brand > span {
    font-size: 10px;
    padding-left: 24px;
  }
  .desktop-nav {
    gap: 38px;
  }
  .desktop-nav > a {
    font-size: 16px;
  }
  .header-cta {
    font-size: 15px;
    min-height: 50px;
    padding: 12px 23px;
  }
  .theme-toggle {
    margin-right: 22px;
  }
  .hero {
    padding-top: 45px;
  }
  .hero-topline {
    margin-bottom: 40px;
  }
  .hero-topline .eyebrow {
    font-size: 12px;
  }
  .hero-location {
    display: none;
  }
  .hero-grid {
    grid-template-columns: 1.55fr 1fr;
    gap: 55px;
  }
  .hero-copy {
    padding-block: 8px 20px;
  }
  h1 {
    font-size: clamp(72px, 7.8vw, 142px);
    line-height: 1.06;
    letter-spacing: -0.07em;
  }
  .highlight svg {
    bottom: -17px;
    height: 24px;
  }
  .hero-intro {
    font-size: clamp(17px, 1.3vw, 21px);
    line-height: 1.75;
    max-width: 650px;
    margin-top: 40px;
  }
  .hero-actions {
    margin-top: 30px;
    gap: 28px;
  }
  .hero-actions .button {
    font-size: 16px;
    gap: 30px;
    min-height: 62px;
    padding-inline: 27px;
  }
  .hero-actions .text-link {
    font-size: 15px;
  }
  .hero-note {
    font-size: 12px;
    margin-top: 16px;
  }
  .hero-showcase {
    min-height: 480px;
  }
  .showcase-top {
    font-size: 10px;
    top: 28px;
    left: 28px;
    right: 28px;
  }
  .showcase-top > span:last-child {
    display: none;
  }
  .showcase-window {
    width: 76%;
  }
  .showcase-back {
    top: 13%;
    height: 66%;
    left: 35%;
  }
  .showcase-front {
    top: 29%;
    height: 53%;
    left: 4%;
  }
  .showcase-caption {
    font-size: 17px;
    left: 28px;
    right: 28px;
    bottom: 28px;
  }
  .showcase-arrow {
    width: 48px;
    height: 48px;
    font-size: 28px;
  }
  .showcase-chrome {
    height: 30px;
    font-size: 8px;
  }
  .hero-proof {
    margin-top: 30px;
    padding-block: 34px 39px;
    gap: 65px;
  }
  .personal-intro {
    gap: 17px;
  }
  .personal-intro > img {
    width: 62px;
    height: 62px;
  }
  .personal-intro strong {
    font-size: 18px;
  }
  .personal-intro span {
    font-size: 13px;
  }
  .proof-stat {
    gap: 18px;
  }
  .proof-stat > strong {
    font-size: 51px;
  }
  .proof-stat > span {
    font-size: 13px;
    max-width: 95px;
  }
  .proof-stat > strong > span {
    font-size: 32px;
  }
  .scroll-cue {
    display: none;
  }
  .client-strip {
    padding-block: 35px;
    gap: 55px;
  }
  .client-strip > .eyebrow {
    font-size: 10px;
  }
  .client-logos {
    gap: 34px;
  }
  .client-logos img {
    max-width: 135px;
    height: 33px;
  }
  .client-logos img:nth-child(2) {
    max-width: 65px;
    height: 47px;
  }
  .section-space {
    padding-block: 110px;
  }
  .section-kicker {
    font-size: 12px;
    margin-bottom: 28px;
  }
  h2 {
    font-size: clamp(62px, 5.25vw, 90px);
    line-height: 1.04;
    letter-spacing: -0.06em;
  }
  .section-heading {
    gap: 50px;
    margin-bottom: 44px;
  }
  .section-intro {
    font-size: 18px;
    max-width: 430px;
    line-height: 1.75;
  }
  .section-intro br {
    display: none;
  }
  .work-toolbar {
    margin-bottom: 30px;
  }
  .work-toolbar > p {
    display: none;
  }
  .work-toolbar {
    justify-content: flex-end;
  }
  .filter {
    font-size: 14px;
    min-height: 47px;
    padding: 11px 21px;
  }
  .filter > span {
    font-size: 11px;
  }
  .filters {
    gap: 9px;
  }
  .projects-grid {
    gap: 44px 32px;
  }
  .project-visual {
    height: clamp(370px, 28vw, 550px);
    border-radius: 15px;
  }
  .browser-frame {
    left: 8%;
    width: 84%;
    top: 36px;
  }
  .browser-chrome {
    height: 29px;
    font-size: 8px;
  }
  .browser-chrome > span:first-of-type {
    font-size: 8px;
  }
  .browser-chrome i {
    width: 5px;
    height: 5px;
  }
  .project-open {
    width: 52px;
    height: 52px;
    font-size: 28px;
    bottom: 23px;
    right: 23px;
  }
  .project-info {
    padding-top: 20px;
    gap: 15px;
  }
  .project-info h3 {
    font-size: 30px;
  }
  .project-info p {
    font-size: 15px;
    margin-top: 9px;
  }
  .project-tag {
    font-size: 11px;
    padding: 6px 12px;
  }
  .work-bottom {
    margin-top: 42px;
    padding-top: 27px;
  }
  .work-bottom > span {
    font-size: 16px;
  }
  .all-portfolio-link {
    font-size: 17px;
  }
  .services-section {
    padding-block: 100px;
    border-radius: 25px;
    margin-inline: 18px;
  }
  .services-grid {
    gap: 30px;
  }
  .service-card {
    padding: 40px 42px 0;
  }
  .service-top {
    margin-bottom: 36px;
    font-size: 12px;
  }
  .service-symbol {
    font-size: 48px;
  }
  .growth .service-symbol {
    font-size: 60px;
  }
  .service-card h3 {
    font-size: clamp(38px, 3.5vw, 59px);
    letter-spacing: -0.055em;
  }
  .service-card > p {
    font-size: 18px;
    max-width: 620px;
    line-height: 1.8;
    margin-top: 26px;
  }
  .service-list {
    font-size: 16px;
    margin-block: 30px 34px;
  }
  .service-list > li {
    padding-block: 14px;
    gap: 16px;
  }
  .service-list > li:before {
    font-size: 20px;
  }
  .service-link {
    font-size: 17px;
    min-height: 84px;
  }
  .service-link > span {
    font-size: 30px;
  }
  .services-footnote {
    margin-top: 38px;
    gap: 25px;
    align-items: center;
  }
  .services-footnote > p {
    font-size: 15px;
    max-width: 780px;
  }
  .services-footnote > .text-link {
    font-size: 15px;
  }
  .small-star {
    font-size: 45px;
  }
  .about-section {
    gap: 100px;
    padding-block: 125px 100px;
    grid-template-columns: 0.85fr 1fr;
  }
  .about-copy h2 {
    font-size: clamp(49px, 4.35vw, 76px);
  }
  .about-copy > .eyebrow {
    font-size: 12px;
  }
  .about-copy > .about-lead {
    font-size: 24px;
    line-height: 1.65;
    max-width: 740px;
    margin-top: 31px;
  }
  .about-copy > p {
    font-size: 18px;
    line-height: 1.8;
    max-width: 740px;
    margin-top: 22px;
  }
  .about-copy > .text-link {
    font-size: 16px;
    margin-top: 25px;
  }
  .portrait-sticker {
    width: 160px;
    height: 160px;
    font-size: 16px;
    right: -25px;
    bottom: 60px;
  }
  .portrait-sticker > span {
    font-size: 43px;
  }
  .portrait-caption {
    font-size: 10px;
    margin-top: 18px;
  }
  .about-portrait > img {
    aspect-ratio: 1/1.06;
  }
  .process-section {
    padding-bottom: 110px;
  }
  .process-heading {
    padding-top: 40px;
    margin-bottom: 40px;
    gap: 70px;
  }
  .process-heading > .eyebrow {
    font-size: 11px;
  }
  .process-heading h2 {
    font-size: 38px;
  }
  .process-grid {
    gap: 55px;
  }
  .step-number {
    font-size: 14px;
    padding-bottom: 20px;
  }
  .step-number > span {
    font-size: 23px;
  }
  .process-grid h3 {
    font-size: 27px;
    margin-top: 26px;
  }
  .process-grid p {
    font-size: 17px;
    max-width: 470px;
    line-height: 1.8;
    margin-top: 17px;
  }
  .testimonials-section {
    padding-block: 100px;
  }
  .testimonials-grid {
    grid-template-columns: 1.25fr 1fr;
    gap: 22px;
  }
  .testimonial {
    padding: 34px 38px;
  }
  .testimonial:first-child {
    grid-row: span 2;
    padding: 44px;
    justify-content: center;
  }
  .testimonial-logo {
    height: 39px;
    width: 150px;
  }
  .testimonial:first-child .testimonial-logo {
    height: 47px;
    width: 175px;
  }
  .quote-mark {
    font-size: 64px;
    height: 40px;
    margin-top: 24px;
  }
  .testimonial blockquote {
    font-size: 22px;
    line-height: 1.7;
    margin: 14px 0 30px;
  }
  .testimonial:first-child blockquote {
    font-size: clamp(28px, 2.4vw, 42px);
    line-height: 1.5;
    letter-spacing: -0.04em;
    margin-top: 25px;
  }
  .testimonial figcaption {
    padding-top: 23px;
    gap: 5px;
  }
  .testimonial figcaption > strong {
    font-size: 15px;
  }
  .testimonial figcaption > span {
    font-size: 13px;
  }
  .testimonial-note {
    font-size: 11px;
    margin-top: 18px;
  }
  .recognition {
    margin-top: 55px;
    padding-top: 36px;
    gap: 25px;
    flex-wrap: nowrap;
  }
  .recognition > .eyebrow {
    font-size: 10px;
    max-width: 140px;
    width: auto;
  }
  .recognition-item {
    gap: 17px;
  }
  .recognition-item > img {
    width: 85px;
    height: 62px;
  }
  .recognition-item > span {
    font-size: 11px;
    max-width: 145px;
  }
  .recognition-item strong {
    font-size: 12px;
  }
  .faq-section {
    padding-block: 110px;
    gap: 100px;
    grid-template-columns: 0.75fr 1fr;
  }
  .faq-section h2 {
    font-size: clamp(57px, 4.9vw, 82px);
  }
  .faq-section > div > p:not(.eyebrow) {
    font-size: 17px;
    margin-top: 30px;
  }
  .faq-list summary {
    font-size: 18px;
    padding-block: 25px;
    gap: 30px;
  }
  .faq-list summary > span {
    font-size: 27px;
  }
  .faq-list details > p {
    font-size: 17px;
    line-height: 1.8;
    padding-bottom: 27px;
  }
  .contact-section {
    padding-top: 65px;
    margin-inline: 18px;
    border-radius: 25px 25px 0 0;
  }
  .contact-heading {
    margin-bottom: 36px;
  }
  .contact-heading > .eyebrow {
    font-size: 12px;
  }
  .contact-spark {
    font-size: 65px;
  }
  .contact-grid {
    gap: 70px;
    padding-bottom: 75px;
    grid-template-columns: 1fr 1fr;
  }
  .contact-copy h2 {
    font-size: clamp(58px, 5vw, 85px);
  }
  .contact-copy > p {
    font-size: 18px;
    max-width: 500px;
    line-height: 1.8;
    margin-top: 30px;
  }
  .email-link {
    font-size: 26px;
    margin-top: 30px;
    gap: 25px;
  }
  .email-link > span {
    font-size: 30px;
  }
  .contact-person {
    gap: 16px;
    margin-top: 35px;
  }
  .contact-person > img {
    width: 56px;
    height: 56px;
  }
  .contact-person > p {
    font-size: 14px;
    gap: 5px;
  }
  .contact-person p > span {
    font-size: 12px;
  }
  .contact-form {
    padding: 38px;
  }
  .contact-form h3 {
    font-size: 32px;
  }
  .form-intro {
    font-size: 15px;
    margin: 13px 0 29px;
  }
  .form-row {
    gap: 20px;
    grid-template-columns: 1fr 1fr;
  }
  .field > label,
  .service-choices > legend {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .field > label > span {
    font-size: 12px;
  }
  .field > input,
  .field > textarea {
    font-size: 16px;
    padding: 14px;
  }
  .field > input {
    height: 54px;
  }
  .field > textarea {
    min-height: 128px;
  }
  .service-choices {
    margin-block: 27px;
  }
  .service-choices > div {
    gap: 9px;
  }
  .service-choices label > span {
    font-size: 12px;
    min-height: 45px;
    padding: 11px 15px;
  }
  .submit-button {
    font-size: 16px;
    min-height: 58px;
    padding-inline: 25px;
    margin-top: 23px;
  }
  .form-note {
    font-size: 12px;
    max-width: 100%;
    line-height: 1.75;
    margin-top: 16px;
  }
  .form-status {
    font-size: 14px;
  }
  .copy-enquiry {
    font-size: 13px;
  }
  .site-footer {
    padding-block: 30px;
    font-size: 13px;
  }
  .footer-name {
    font-size: 16px;
    gap: 16px;
  }
  .footer-name > span {
    font-size: 12px;
  }
  .site-footer > p {
    font-size: 13px;
    display: block;
  }
  .site-footer > div {
    gap: 35px;
  }
  .case-dialog {
    width: min(1000px, calc(100% - 60px));
  }
  .dialog-image {
    height: 430px;
  }
  .dialog-content {
    padding: 42px;
  }
  .dialog-content h2 {
    font-size: 55px;
  }
  .dialog-content > .eyebrow {
    font-size: 12px;
  }
  .dialog-content > p:not(.eyebrow) {
    font-size: 18px;
    max-width: 780px;
  }
  .dialog-actions > .button {
    font-size: 16px;
    min-height: 57px;
  }
  .dialog-actions > .text-link {
    font-size: 15px;
  }
}
@media (min-width: 900px) and (max-width: 1150px) {
  .shell {
    width: calc(100% - 72px);
  }
  .brand > span {
    display: none;
  }
  .desktop-nav {
    gap: 25px;
  }
  .desktop-nav > a {
    font-size: 14px;
  }
  .hero-grid {
    gap: 30px;
    grid-template-columns: 1.4fr 1fr;
  }
  h1 {
    font-size: 7.5vw;
  }
  .hero-actions {
    align-items: flex-start;
    gap: 12px;
    flex-direction: column;
  }
  .hero-intro {
    font-size: 17px;
  }
  .hero-actions .button {
    font-size: 14px;
    min-height: 55px;
  }
  .hero-showcase {
    min-height: 475px;
  }
  .hero-proof {
    gap: 30px;
  }
  .hero-proof .proof-stat {
    margin-left: auto;
  }
  .personal-intro span {
    font-size: 11px;
  }
  .personal-intro strong {
    font-size: 16px;
  }
  .proof-stat > strong {
    font-size: 43px;
  }
  .proof-stat > span {
    font-size: 11px;
  }
  .project-info {
    flex-wrap: wrap;
  }
  .services-footnote {
    flex-wrap: wrap;
  }
  .services-footnote > .text-link {
    margin-left: 70px;
  }
  .service-card {
    padding: 32px 30px 0;
  }
  .service-card > p {
    font-size: 17px;
  }
  .service-list {
    font-size: 14px;
  }
  .about-section {
    gap: 60px;
  }
  .about-copy > .about-lead {
    font-size: 21px;
  }
  .about-copy > p {
    font-size: 16px;
  }
  .recognition {
    flex-wrap: wrap;
  }
  .recognition > .eyebrow {
    width: 100%;
    max-width: none;
  }
  .recognition-item > img {
    width: 65px;
  }
  .recognition-item > span {
    font-size: 10px;
  }
  .recognition-item strong {
    font-size: 11px;
  }
  .faq-section {
    gap: 60px;
  }
  .contact-grid {
    gap: 35px;
  }
  .contact-copy h2 {
    font-size: 54px;
  }
  .contact-form {
    padding: 29px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .site-footer > p {
    display: none;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  h1 {
    font-size: 7.2vw;
  }
  .hero-intro {
    font-size: 16px;
  }
  .hero-actions {
    gap: 8px;
    align-items: flex-start;
    flex-direction: column;
  }
  .hero-actions .button {
    font-size: 12px;
  }
  .hero-actions .text-link {
    font-size: 12px;
  }
  .hero-note {
    font-size: 10px;
  }
  .hero-showcase {
    min-height: 410px;
  }
  .showcase-caption {
    font-size: 12px;
  }
  .section-intro {
    font-size: 15px;
  }
  .service-card > p,
  .about-copy > p,
  .process-grid p {
    font-size: 14px;
  }
  .service-list {
    font-size: 12px;
  }
  .service-link {
    font-size: 13px;
  }
  .about-copy > .about-lead {
    font-size: 18px;
  }
  .testimonial blockquote {
    font-size: 17px;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .testimonial {
    padding: 30px;
  }
  .testimonial-logo {
    width: 120px;
    height: 35px;
  }
  .testimonial figcaption > strong {
    font-size: 12px;
  }
  .testimonial figcaption > span {
    font-size: 10px;
  }
  .faq-list summary {
    font-size: 14px;
  }
  .faq-list details > p {
    font-size: 14px;
  }
  .contact-grid {
    display: block;
  }
  .contact-copy h2 {
    font-size: 65px;
  }
  .contact-copy > p {
    font-size: 16px;
    max-width: 450px;
  }
  .contact-form {
    margin-top: 35px;
    padding: 35px;
  }
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .field > input,
  .field > textarea {
    font-size: 16px;
  }
  .field > label,
  .service-choices > legend {
    font-size: 13px;
  }
  .submit-button {
    font-size: 14px;
  }
  .form-intro {
    font-size: 13px;
  }
  .form-note {
    font-size: 11px;
  }
  .email-link {
    font-size: 23px;
  }
  .personal-intro strong {
    font-size: 15px;
  }
  .personal-intro span {
    font-size: 10px;
  }
  .proof-stat > strong {
    font-size: 40px;
  }
  .proof-stat > span {
    font-size: 10px;
  }
  .project-info p {
    font-size: 12px;
  }
  .project-tag {
    font-size: 10px;
  }
  .all-portfolio-link {
    font-size: 13px;
  }
}
@media (max-width: 640px) {
  .theme-toggle {
    margin-left: auto;
    margin-right: 10px;
    width: 40px;
    height: 40px;
  }
  .brand {
    flex: 1;
  }
  .brand > span {
    display: none;
  }
  .showcase-top {
    font-size: 7px;
  }
  .work-bottom {
    display: block;
  }
  .work-bottom > span {
    display: block;
    max-width: none;
    font-size: 13px;
    margin-bottom: 10px;
  }
  .all-portfolio-link {
    font-size: 14px;
    gap: 22px;
  }
  .hero-intro {
    font-size: 16px;
    line-height: 1.8;
  }
  .hero-actions .button {
    font-size: 13px;
    min-height: 54px;
  }
  .hero-actions .text-link {
    font-size: 13px;
  }
  .hero-note {
    font-size: 10px;
  }
  .section-intro {
    font-size: 16px;
  }
  .service-card > p,
  .about-copy > p {
    font-size: 15px;
  }
  .process-grid p {
    font-size: 14px;
  }
  .faq-list summary {
    font-size: 15px;
  }
  .faq-list details > p {
    font-size: 14px;
  }
  .contact-copy > p {
    font-size: 16px;
  }
  .contact-copy h2 {
    font-size: 45px;
  }
  .contact-form {
    padding: 27px 23px;
  }
  .submit-button {
    font-size: 13px;
  }
  .mobile-contact {
    font-size: 13px;
  }
  .project-visual {
    height: 310px;
  }
  .project-info {
    flex-direction: column;
    gap: 10px;
  }
  .project-info h3 {
    font-size: 25px;
  }
  .project-info p {
    font-size: 13px;
  }
  .project-tag {
    font-size: 9px;
  }
  .browser-frame {
    top: 25px;
  }
  .hero-proof {
    padding-top: 25px;
  }
  .hero-note {
    font-size: 10px;
  }
  .services-footnote > p {
    font-size: 13px;
  }
  .section-intro br {
    display: none;
  }
  .site-footer a {
    font-size: 12px;
  }
  .service-choices label > span {
    font-size: 12px;
  }
  .form-note {
    font-size: 11px;
  }
  .testimonial figcaption > strong {
    font-size: 13px;
  }
  .testimonial figcaption > span {
    font-size: 11px;
  }
  .recognition-item > span {
    font-size: 9px;
  }
  .recognition-item strong {
    font-size: 10px;
  }
  .recognition-item > img {
    width: 45px;
  }
  .hero-note {
    max-width: 290px;
  }
}
@media (max-width: 375px) {
  .contact-copy h2 {
    font-size: 39px;
  }
  .hero-intro {
    font-size: 15px;
  }
  .hero-actions .button {
    font-size: 12px;
  }
  .all-portfolio-link {
    font-size: 13px;
  }
  .hero-showcase {
    min-height: 285px;
    height: 285px;
  }
}
html[data-theme="original"] {
  --paper: #f6f6f9;
  --ink: #1e1e22;
  --muted: #72727e;
  --line: #e2e1e9;
  --dark: #202023;
  --lime: #d1f34f;
  --accent: #6c58e5;
  --soft: #ededf4;
  --soft-accent: #ede8ff;
}
html[data-theme="original"] .highlight svg {
  stroke: var(--lime);
}
html[data-theme="original"] .hero-showcase {
  background: #e9e6f1;
}
html[data-theme="original"] .growth {
  background: var(--lime);
}
html[data-theme="original"] .growth .service-symbol,
html[data-theme="original"] .growth .service-list > li:before {
  color: #333e18;
}
html[data-theme="original"] .development {
  background: #303035;
}
html[data-theme="original"] .contact-form {
  background: #303036;
}
html[data-theme="original"] .button-lime,
html[data-theme="original"] .mobile-contact {
  background: var(--lime);
  color: var(--ink);
  border-color: #bdce50;
}
html[data-theme="original"] .button-lime:hover {
  background: #e0ff72;
}
html[data-theme="original"] .theme-toggle > span {
  background: #365df5;
}
html[data-theme="original"] .visual-sellme {
  background: #e5e0f1;
}
html[data-theme="original"] .visual-bdtrims {
  background: #e1e0e4;
}
.shell {
  max-width: 1400px;
}
.client-logos img {
  max-width: 100%;
}
@media (min-width: 900px) {
  .shell {
    width: calc(100% - 96px);
    max-width: 1400px;
  }
  h1 {
    font-size: clamp(72px, 7.8vw, 112px);
  }
  h2 {
    font-size: clamp(62px, 5.25vw, 76px);
  }
  .hero-intro {
    font-size: 20px;
    max-width: 630px;
  }
  .hero-grid {
    gap: 45px;
  }
  .hero-showcase {
    min-height: 480px;
  }
  .project-visual {
    height: clamp(370px, 28vw, 430px);
  }
  .service-card h3 {
    font-size: clamp(38px, 3.5vw, 49px);
  }
  .about-copy h2 {
    font-size: clamp(49px, 4.35vw, 61px);
  }
  .contact-copy h2 {
    font-size: clamp(54px, 5vw, 66px);
  }
  .faq-section h2 {
    font-size: clamp(57px, 4.9vw, 67px);
  }
  .hero-proof {
    gap: 55px;
  }
  .portfolio-hero h1 {
    font-size: clamp(66px, 6.6vw, 98px);
  }
}
@media (min-width: 900px) and (max-width: 1150px) {
  h1 {
    font-size: 7.3vw;
  }
  .shell {
    width: calc(100% - 72px);
  }
  .hero-intro {
    font-size: 17px;
  }
  .hero-grid {
    gap: 28px;
  }
  .hero-proof {
    gap: 30px;
  }
  .portfolio-hero h1 {
    font-size: 7vw;
  }
}

.brand img {
  width: 175px;
  height: 64px;
  object-fit: contain;
}
@media (max-width: 640px) {
  .brand img {
    width: 155px;
    height: 55px;
  }
  .brand {
    gap: 0;
  }
  .theme-toggle {
    margin-right: 10px;
  }
}
@media (max-width: 375px) {
  .brand img {
    width: 145px;
    height: 53px;
  }
}

/* A compact contemporary name mark. */
.brand img {
  width: 178px;
  height: 45px;
}
@media (max-width: 640px) {
  .brand img {
    width: 151px;
    height: 40px;
  }
}
@media (max-width: 375px) {
  .brand img {
    width: 140px;
    height: 38px;
  }
}

.brand img {
  width: 200px;
  height: 58px;
}
.brand > span {
  display: none;
}
@media (max-width: 640px) {
  .brand img {
    width: 171px;
    height: 50px;
  }
}
@media (max-width: 375px) {
  .brand img {
    width: 153px;
    height: 47px;
  }
}

.brand img {
  width: 142px;
  height: 58px;
}
.brand > span {
  display: none;
}
@media (max-width: 640px) {
  .brand img {
    width: 126px;
    height: 50px;
  }
}
@media (max-width: 375px) {
  .brand img {
    width: 117px;
    height: 48px;
  }
}

.brand img {
  width: 120px;
  height: 46px;
}
@media (max-width: 640px) {
  .brand img {
    width: 108px;
    height: 42px;
  }
}
@media (max-width: 375px) {
  .brand img {
    width: 100px;
    height: 40px;
  }
}

.project-info h3 > a,
.archive-card-info h2 > a {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.project-info h3 > a:hover,
.archive-card-info h2 > a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Original signature from illiahaidar.com. */
.brand img {
  width: 96px;
  height: 50px;
}
@media (max-width: 640px) {
  .brand img {
    width: 84px;
    height: 44px;
  }
}
@media (max-width: 375px) {
  .brand img {
    width: 80px;
    height: 42px;
  }
}

/* Final accessibility adjustments. */
.proof-stat > span,
.personal-intro > div > span,
.client-strip > .eyebrow,
.process-heading > .eyebrow,
.testimonial-note {
  color: #626b78;
}
.filter > span {
  color: #626b78;
  opacity: 1;
}
.filter.active > span {
  color: #dcdae7;
}

/* A desktop conversation button sits beside the content; mobile keeps its bar. */
.floating-contact-icon,
.floating-contact-hint {
  display: none;
}
.mobile-contact > .floating-contact-label {
  font-size: 13px;
  font-weight: 700;
}
.mobile-contact > .floating-contact-arrow {
  font-size: 24px;
}
@media (min-width: 641px) {
  html[data-theme="original"] .mobile-contact {
    display: flex;
    position: fixed;
    z-index: 25;
    top: 50%;
    right: max(18px, calc((100vw - 1600px) / 2));
    width: 82px;
    height: 82px;
    border: 1px solid #ffffff45;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    background: #6951dc;
    color: #fff;
    box-shadow: 0 8px 30px #39207930;
    transform: translateY(-50%);
    transition:
      opacity 250ms ease,
      transform 350ms ease,
      box-shadow 250ms ease;
  }
  .floating-contact-icon {
    display: block;
    line-height: 0;
  }
  .mobile-contact > .floating-contact-label {
    font-size: 11px;
    line-height: 1;
  }
  .floating-contact-arrow {
    display: none;
  }
  .mobile-contact > .floating-contact-hint {
    display: block;
    position: absolute;
    right: calc(100% + 14px);
    width: max-content;
    padding: 10px 15px;
    background: #24222d;
    color: white;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0;
    pointer-events: none;
    transform: translateX(6px);
    transition:
      opacity 200ms ease,
      transform 200ms ease;
  }
  .mobile-contact:hover,
  .mobile-contact:focus-visible {
    box-shadow: 0 12px 38px #39207950;
  }
  .mobile-contact:hover .floating-contact-hint,
  .mobile-contact:focus-visible .floating-contact-hint {
    opacity: 1;
    transform: translateX(0);
  }
  html[data-theme="original"] .mobile-contact.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(130px, -50%);
  }
}
@media (max-width: 899px) {
  html[data-theme="original"] .ai-service {
    display: block;
  }
}

/* Compact service cards keep the overview easy to scan. */
.services-section {
  padding-block: 64px 42px;
}
.services-section .section-heading {
  margin-bottom: 30px;
}
.services-grid {
  gap: 22px;
  align-items: stretch;
}
.services-grid .service-card {
  min-height: 0;
  padding: 28px 30px 0;
  border-radius: 18px;
}
.services-grid .service-top {
  margin-bottom: 22px;
}
.services-grid .service-symbol {
  font-size: 32px;
  line-height: 1;
}
.services-grid .service-card h3 {
  font-size: clamp(27px, 2.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -1.2px;
  margin: 0 0 17px;
}
.services-grid .service-card > p {
  font-size: 15px;
  line-height: 1.7;
  max-width: 100%;
  margin: 0;
}
.services-grid .service-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  margin: 22px 0 0;
  font-size: 13px;
}
.services-grid .service-list > li {
  padding-block: 12px;
  line-height: 1.5;
}
.services-grid .service-link {
  border-top: 0;
  margin-top: 22px;
  min-height: 62px;
  padding-block: 17px;
  font-size: 14px;
}
.services-footnote {
  margin-top: 23px;
}
.ai-section {
  margin-block: 32px 0;
}
.ai-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  padding: 36px 40px;
  background: #ebe7fc;
  border: 1px solid #ded7f4;
  border-radius: 22px;
}
.ai-copy > .eyebrow {
  font-size: 11px;
  color: #65509e;
  margin-bottom: 20px;
}
.ai-copy h2 {
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.12;
  letter-spacing: -1.6px;
}
.ai-copy > p:not(.eyebrow) {
  margin: 18px 0 23px;
  font-size: 15px;
  line-height: 1.75;
  color: #555267;
  max-width: 530px;
}
.ai-copy .button {
  min-height: 47px;
  padding: 12px 19px;
  font-size: 13px;
  gap: 22px;
}
.ai-offerings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 28px;
  align-content: center;
}
.ai-offerings article {
  border-top: 1px solid #cfc7e7;
  padding-top: 14px;
}
.ai-offerings article > span {
  color: #65509e;
  font-size: 11px;
}
.ai-offerings h3 {
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.4px;
  margin: 7px 0;
}
.ai-offerings p {
  color: #59566a;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 899px) {
  .services-grid .service-card {
    padding: 24px 24px 0;
  }
  .services-grid .service-list {
    display: block;
  }
  .ai-panel {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 30px;
  }
}
@media (max-width: 640px) {
  .services-section {
    padding-block: 45px 28px;
  }
  .services-grid .service-card h3 {
    font-size: 29px;
  }
  .services-grid .service-card > p {
    font-size: 14px;
  }
  .ai-section {
    margin-block: 25px 0;
  }
  .ai-panel {
    padding: 27px 23px;
    gap: 28px;
  }
  .ai-copy h2 {
    font-size: 34px;
  }
  .ai-offerings {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Reserve a clear gutter for the desktop conversation button. */
@media (min-width: 1100px) {
  .shell {
    width: min(1400px, calc(100% - 240px));
  }
  main .shell:not(.hero):not(.portfolio-hero) {
    width: min(1400px, calc(100% - 304px));
  }
  html[data-theme="original"] .mobile-contact {
    right: max(16px, calc((100vw - 1688px) / 2));
  }
}
@media (min-width: 641px) and (max-width: 1099px) {
  /* Give the button its own right-hand rail on smaller desktop windows. */
  main .shell:not(.hero):not(.portfolio-hero) {
    width: calc(100% - 188px);
    margin-left: 24px;
    margin-right: 164px;
  }
  .section-heading {
    flex-wrap: wrap;
    row-gap: 20px;
  }
  html[data-theme="original"] .mobile-contact {
    top: auto;
    bottom: 22px;
    right: 20px;
    transform: none;
  }
  html[data-theme="original"] .mobile-contact.is-hidden {
    transform: translateX(130px);
  }
}
@media (max-width: 640px) {
  .floating-contact-label::after {
    content: " about your project";
  }
}

/* Keep the AI-to-about transition compact. */
.ai-section + .about-section {
  padding-top: 60px;
}
@media (max-width: 640px) {
  .ai-section + .about-section {
    padding-top: 40px;
  }
}


/* ===== motion.css ===== */
/* Motion is progressive enhancement: all content is visible in the source HTML. */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header {
  transition: box-shadow 350ms ease;
}

.site-header.has-scrolled {
  box-shadow: 0 8px 30px rgb(30 30 40 / 6%);
}

.button,
.text-link > span,
.service-link > span,
.project-open,
.archive-open,
.email-link > span {
  transition:
    transform 350ms var(--ease-out),
    background-color 250ms ease,
    box-shadow 250ms ease;
}

.button:active {
  transform: scale(0.98);
}

.button:disabled {
  cursor: wait;
  opacity: 0.78;
}

.project-visual img,
.archive-visual img,
.about-portrait img {
  transition: transform 750ms var(--ease-out);
}

.project-visual,
.archive-visual {
  isolation: isolate;
}

.project-visual::after,
.archive-visual::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgb(255 255 255 / 14%) 45%,
    transparent 65%
  );
  transform: translateX(-130%);
  transition: transform 900ms var(--ease-out);
}

.service-card,
.hero-showcase {
  position: relative;
  isolation: isolate;
}

.service-card::after,
.hero-showcase::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  content: "";
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    380px circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
    rgb(255 255 255 / 13%),
    transparent 75%
  );
  transition: opacity 400ms ease;
}

.motion-pending {
  opacity: 0;
  transform: translateY(24px);
}

.motion-visible {
  animation: section-arrive 700ms var(--ease-out) both;
}

.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-status {
  line-height: 1.65;
  padding: 12px 15px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 10px;
}

.form-status[data-state="success"] {
  color: #e2ffa0;
  background: rgb(200 255 100 / 7%);
}

.form-status[data-state="error"] {
  color: #ffcece;
  background: rgb(255 100 100 / 7%);
}

.sending-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sending-spin 800ms linear infinite;
}

@keyframes section-arrive {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-arrive {
  from {
    transform: translateY(15px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes underline-arrive {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes sending-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy h1,
  .hero-intro,
  .hero-actions,
  .hero-showcase {
    animation: hero-arrive 800ms var(--ease-out) both;
  }

  .hero-intro {
    animation-delay: 90ms;
  }
  .hero-actions {
    animation-delay: 150ms;
  }
  .hero-showcase {
    animation-delay: 180ms;
  }

  .highlight svg {
    transform-origin: left center;
    animation: underline-arrive 850ms 250ms var(--ease-out) both;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgb(30 30 40 / 12%);
  }

  .text-link:hover > span,
  .service-link:hover > span,
  .email-link:hover > span {
    transform: translate(3px, -3px);
  }

  .project-visual:hover img,
  .archive-visual:hover img {
    transform: translateY(-5px) scale(1.025);
  }

  .project-visual:hover::after,
  .archive-visual:hover::after {
    transform: translateX(130%);
  }

  .project-visual:hover .project-open,
  .archive-visual:hover .archive-open {
    transform: rotate(-10deg) scale(1.08);
  }

  .service-card:hover::after,
  .hero-showcase:hover::after {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .motion-pending {
    transform: translateY(16px);
  }
  .motion-visible {
    animation-duration: 500ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .motion-pending {
    opacity: 1;
    transform: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ===== portfolio.css ===== */
.portfolio-hero {
  padding-block: 65px 70px;
}
.portfolio-hero > .eyebrow {
  font-size: 12px;
  margin-bottom: 34px;
}
.portfolio-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: 80px;
}
.portfolio-hero h1 {
  font-size: clamp(66px, 6.6vw, 120px);
  white-space: normal;
}
.portfolio-hero-grid > div > p {
  font-size: 21px;
  line-height: 1.8;
  max-width: 520px;
  color: #68717d;
}
.portfolio-hero .text-link {
  font-size: 16px;
  margin-top: 23px;
}
.portfolio-catalog {
  padding-bottom: 95px;
}
.catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding-block: 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.catalog-filters {
  display: flex;
  gap: 10px;
}
.catalog-filter {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 40px;
  background: transparent;
  padding: 11px 19px;
  font-size: 15px;
  white-space: nowrap;
}
.catalog-filter.active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.catalog-filter > span {
  margin-left: 8px;
  font-size: 11px;
  opacity: 0.6;
}
.catalog-controls {
  display: flex;
  gap: 14px;
}
.catalog-search {
  position: relative;
}
.catalog-search > input {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 40px;
  min-height: 48px;
  padding: 10px 42px 10px 20px;
  font-size: 15px;
  width: 260px;
}
.catalog-search > span[aria-hidden] {
  position: absolute;
  right: 17px;
  top: 6px;
  font-size: 26px;
  pointer-events: none;
  color: #778291;
}
.catalog-sort > select {
  border: 1px solid var(--line);
  border-radius: 40px;
  min-height: 48px;
  font: inherit;
  font-size: 14px;
  padding: 10px 32px 10px 15px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.catalog-status {
  font-size: 13px;
  color: #737f90;
  margin-block: 23px;
}
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px 28px;
}
.archive-card {
  min-width: 0;
}
.archive-visual {
  width: 100%;
  height: auto;
  aspect-ratio: 1.13;
  overflow: hidden;
  border: 1px solid #1d2b4209;
  border-radius: 12px;
  position: relative;
  display: block;
  background: #f0f2f6;
  padding: 0;
}
.archive-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.55s;
}
.archive-visual:hover > img {
  transform: scale(1.04);
}
.archive-open {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 25px;
  box-shadow: 0 3px 20px #00000012;
}
.archive-card-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 17px;
}
.archive-card-info h2 {
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.04em;
}
.archive-card-info h2 > button {
  background: transparent;
  padding: 0;
  text-align: left;
  font: inherit;
  letter-spacing: inherit;
}
.archive-card-info h2 > button:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.archive-details {
  background: transparent;
  font-size: 12px;
  padding: 6px 0;
  white-space: nowrap;
  color: #6d788a;
  min-height: 44px;
}
.archive-details > span {
  margin-left: 7px;
  color: var(--ink);
}
.catalog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 55px;
}
.catalog-pagination > .button {
  font-size: 15px;
  min-height: 56px;
}
.catalog-pagination > .text-link {
  font-size: 14px;
  background: transparent;
}
#catalog-progress {
  width: 100%;
  font-size: 13px;
  text-align: center;
  color: #748092;
  margin-top: 3px;
}
.catalog-empty {
  padding: 60px 20px;
  text-align: center;
}
.catalog-empty h2 {
  font-size: 40px;
}
.catalog-empty p {
  font-size: 17px;
  color: #748092;
  margin-top: 20px;
}
.catalog-empty .button {
  margin-top: 25px;
}
.archive-note {
  max-width: 850px;
  margin: 50px auto 0;
  text-align: center;
  font-size: 13px;
  color: #7a8494;
  line-height: 1.8;
}
@media (max-width: 1150px) {
  .portfolio-hero-grid {
    gap: 45px;
  }
  .portfolio-hero-grid > div > p {
    font-size: 18px;
  }
  .portfolio-hero h1 {
    font-size: 7vw;
  }
  .catalog-search > input {
    width: 220px;
  }
  .catalog-filter {
    font-size: 13px;
    padding-inline: 16px;
  }
  .catalog-sort > select {
    max-width: 160px;
    font-size: 12px;
  }
  .catalog-toolbar {
    gap: 20px;
  }
  .archive-card-info {
    gap: 12px;
    flex-wrap: wrap;
  }
  .archive-card-info h2 {
    font-size: 23px;
  }
  .archive-details {
    font-size: 11px;
  }
  .archive-grid {
    gap: 35px 22px;
  }
  .portfolio-hero > .eyebrow {
    font-size: 10px;
  }
}
@media (max-width: 899px) {
  .portfolio-hero {
    padding-block: 48px;
  }
  .portfolio-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .portfolio-hero h1 {
    font-size: 70px;
  }
  .portfolio-hero-grid > div > p {
    font-size: 18px;
    max-width: 600px;
  }
  .catalog-toolbar {
    flex-wrap: wrap;
  }
  .catalog-controls {
    width: 100%;
  }
  .catalog-search {
    flex: 1;
  }
  .catalog-search > input {
    width: 100%;
  }
  .archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .archive-card-info {
    display: block;
  }
  .archive-card-info h2 {
    font-size: 24px;
  }
  .archive-details {
    font-size: 12px;
  }
  .portfolio-hero .text-link {
    font-size: 14px;
  }
  .portfolio-catalog {
    padding-bottom: 65px;
  }
}
@media (max-width: 640px) {
  .portfolio-hero {
    padding-block: 36px 40px;
  }
  .portfolio-hero > .eyebrow {
    font-size: 8px;
    margin-bottom: 24px;
  }
  .portfolio-hero h1 {
    font-size: clamp(37px, 10.5vw, 65px);
    line-height: 1.1;
    letter-spacing: -0.065em;
  }
  .portfolio-hero-grid {
    gap: 22px;
  }
  .portfolio-hero-grid > div > p {
    font-size: 16px;
    line-height: 1.8;
  }
  .portfolio-hero .text-link {
    font-size: 13px;
    margin-top: 16px;
  }
  .catalog-toolbar {
    padding-block: 23px;
    gap: 19px;
  }
  .catalog-filters {
    width: 100%;
    gap: 8px;
  }
  .catalog-filter {
    min-height: 46px;
    font-size: 12px;
    padding-inline: 17px;
  }
  .catalog-controls {
    flex-wrap: wrap;
    gap: 12px;
  }
  .catalog-search {
    flex-basis: 100%;
  }
  .catalog-search > input {
    font-size: 16px;
    min-height: 49px;
  }
  .catalog-sort {
    width: 100%;
  }
  .catalog-sort > select {
    max-width: none;
    width: 100%;
    font-size: 14px;
    min-height: 46px;
  }
  .catalog-status {
    font-size: 12px;
    margin-block: 20px;
  }
  .archive-grid {
    grid-template-columns: 1fr;
    gap: 29px;
  }
  .archive-visual {
    border-radius: 10px;
    aspect-ratio: 1.08;
  }
  .archive-card-info {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-top: 12px;
  }
  .archive-card-info h2 {
    font-size: 24px;
    max-width: 70%;
  }
  .archive-details {
    font-size: 11px;
    min-height: 44px;
  }
  .archive-open {
    width: 42px;
    height: 42px;
    right: 14px;
    bottom: 14px;
  }
  .catalog-pagination {
    flex-direction: column;
    gap: 12px;
    margin-top: 35px;
  }
  .catalog-pagination > .button {
    width: 100%;
    font-size: 14px;
    min-height: 53px;
  }
  .catalog-pagination > .text-link {
    font-size: 13px;
  }
  .archive-note {
    font-size: 11px;
    text-align: left;
    margin-top: 30px;
  }
  .catalog-empty {
    padding: 40px 0;
  }
  .catalog-empty h2 {
    font-size: 33px;
  }
  .catalog-empty p {
    font-size: 15px;
  }
  .catalog-empty .button {
    font-size: 13px;
  }
}

/* Keep small interface labels readable on the light background. */
.catalog-status,
#catalog-progress,
.archive-details,
.catalog-pagination > p,
.archive-note {
  color: #606b7a;
}


/* ===== content.css ===== */
/* Service pages, project stories and compact, progressively enhanced interactions. */
.nav-services {
  position: relative;
}
.nav-services > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
}
.nav-services > summary::-webkit-details-marker {
  display: none;
}
.nav-services > summary > span {
  color: #78688f;
  transition: transform 0.2s;
}
.nav-services[open] > summary > span {
  transform: rotate(180deg);
}
.services-dropdown {
  position: absolute;
  z-index: 100;
  top: calc(100% + 10px);
  left: -30px;
  width: 330px;
  padding: 10px;
  border: 1px solid #e3dfef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 15px 50px #20173118;
}
.services-dropdown > a {
  display: block;
  padding: 14px 16px;
  border-radius: 10px;
}
.services-dropdown > a:hover,
.services-dropdown > a:focus-visible {
  background: #f0ecfc;
}
.services-dropdown strong {
  display: block;
  font-size: 14px;
  font-weight: 650;
}
.services-dropdown a > span {
  display: block;
  color: #6d687a;
  font-size: 11px;
  margin-top: 5px;
}
.service-detail-link,
.inline-service-link,
.ai-detail-link,
.archive-case-link {
  color: inherit;
  text-underline-offset: 5px;
}
.service-detail-link {
  align-self: start;
  font-size: 14px;
  font-weight: 650;
  margin-top: 12px;
}
.inline-service-link {
  font-size: inherit;
}
.inline-service-link > span {
  display: none;
}
.ai-detail-link {
  display: block;
  font-size: 13px;
  margin-top: 16px;
}
.archive-case-link {
  display: inline-flex;
  gap: 16px;
  margin: 4px 0 18px;
  font-size: 13px;
}
.footer-services {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  padding-block: 32px;
  border-top: 1px solid #ffffff25;
}
.footer-services a {
  color: #e2e2e7;
  font-size: 14px;
}
.analytics-settings {
  border: 0;
  padding: 4px 0;
  color: inherit;
  background: none;
  font: inherit;
  cursor: pointer;
}
.footer-services + .site-footer {
  margin-top: 0;
}

/* A single testimonial at a time, with native scroll snapping and no autoplay. */
.testimonials-section {
  padding-block: 64px !important;
}
.testimonials-section .section-heading {
  margin-bottom: 30px;
}
.testimonial-track {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #cbc5ea transparent;
  border-radius: 18px;
  overscroll-behavior-x: contain;
}
.testimonial-track .testimonial,
.testimonial-track .testimonial:first-child {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) 2fr;
  gap: 40px;
  flex: 0 0 100%;
  margin: 0;
  min-width: 0;
  padding: 32px 36px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #fff;
  grid-row: auto;
  justify-content: start;
  align-content: center;
}
.testimonial-track .testimonial-logo,
.testimonial-track .testimonial:first-child .testimonial-logo {
  width: 130px;
  height: 34px;
  object-fit: contain;
  object-position: left;
}
.testimonial-track .testimonial blockquote,
.testimonial-track .testimonial:first-child blockquote {
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.55;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
}
.testimonial-track .testimonial figcaption {
  border: 0;
  padding-top: 25px;
  margin-top: 0;
}
.testimonial-track .testimonial figcaption > strong {
  font-size: 14px;
}
.testimonial-track .testimonial figcaption > span {
  font-size: 12px;
}
.testimonial-quote .text-link {
  color: #654bc9;
  font-size: 13px;
}
.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.testimonial-controls[hidden] {
  display: none;
}
.testimonial-controls > p {
  font-size: 12px;
  color: #626775;
  font-variant-numeric: tabular-nums;
}
.testimonial-controls > div {
  display: flex;
  gap: 8px;
}
.testimonial-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid #d6d0eb;
  border-radius: 50%;
  background: transparent;
  color: #27232e;
  cursor: pointer;
  font-size: 21px;
  transition:
    background 0.2s,
    transform 0.2s;
}
.testimonial-controls button:hover {
  background: #fff;
  transform: translateY(-2px);
}
.testimonial-controls button:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}
.testimonials-section .recognition {
  margin-top: 30px;
  padding-top: 30px;
}
.testimonials-section .testimonial-note {
  margin-top: 8px;
}

/* The demo is deliberately an illustration, using no model or remote API. */
.workflow-demo {
  margin-top: 18px;
  border: 1px solid #dedbea;
  border-radius: 16px;
  background: #fff;
}
.workflow-demo > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.workflow-demo > summary::-webkit-details-marker {
  display: none;
}
.workflow-demo > summary > span {
  font-size: 25px;
  color: #6d51d9;
  transition: transform 0.2s;
}
.workflow-demo[open] > summary > span {
  transform: rotate(45deg);
}
.demo-body {
  padding: 8px 24px 22px;
}
.demo-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.demo-heading h3 {
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: -0.04em;
  max-width: 500px;
  margin: 12px 0 20px;
}
.demo-heading > p {
  max-width: 260px;
  font-size: 12px;
  color: #68717d;
  line-height: 1.7;
}
.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 8px 20px;
}
.demo-tabs button {
  padding: 10px 14px;
  min-height: 44px;
  font: inherit;
  font-size: 13px;
  color: #555267;
  border: 1px solid #dedbea;
  background: transparent;
  border-radius: 24px;
  cursor: pointer;
}
.demo-tabs button[aria-pressed="true"] {
  background: #6b50d8;
  color: #fff;
  border-color: #6b50d8;
}
.demo-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.demo-flow > div {
  padding: 20px;
  border-radius: 12px;
  background: #f5f3fc;
}
.demo-flow > div:last-child {
  background: #edf4e2;
}
.demo-flow span {
  display: block;
  color: #625982;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 750;
}
.demo-flow p {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
}
.demo-note {
  margin: 16px 0 0;
  color: #68717d;
  font-size: 12px;
}
.demo-flow.is-changing {
  animation: workflow-change 0.3s ease-out;
}
@keyframes workflow-change {
  from {
    transform: translateY(6px);
    opacity: 0.65;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* Editorial layouts use the same restrained palette and original identity. */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #656c78;
  font-size: 12px;
  margin-bottom: 42px;
}
.breadcrumbs a {
  color: inherit;
  text-underline-offset: 4px;
}
.service-hero,
.case-hero {
  padding-top: 34px;
  padding-bottom: 60px;
}
.service-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 60px;
}
.content-page h1 {
  white-space: normal;
  margin: 20px 0 26px;
  max-width: 1000px;
  font-size: clamp(44px, 4.8vw, 78px);
  line-height: 1.06;
  letter-spacing: -0.065em;
  font-weight: 650;
}
.content-page h2 {
  font-size: clamp(29px, 3vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.05em;
  font-weight: 600;
}
.page-lead {
  font-size: clamp(17px, 1.5vw, 21px);
  color: #656c78;
  max-width: 790px;
  line-height: 1.75;
}
.page-author {
  font-size: 12px;
  color: #666e7a;
  margin: 22px 0 0;
}
.service-hero-visual {
  border-radius: 20px;
  padding: 24px 24px 18px;
  background: #e9e5f5;
  transform: rotate(2deg);
}
.service-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
  box-shadow: 0 15px 30px #26223d18;
}
.service-hero-visual p {
  font-size: 12px;
  margin: 20px 0 0;
  color: #575165;
}
.content-page .hero-actions {
  margin-top: 26px;
}
.content-page .button {
  font-size: 14px;
  min-height: 48px;
}
.service-scope,
.service-process,
.proof-section,
.service-demo,
.related-services {
  padding-block: 54px;
}
.content-page .section-heading {
  gap: 45px;
  margin-bottom: 30px;
  align-items: flex-end;
}
.content-page .section-heading h2 {
  margin-top: 16px;
  max-width: 630px;
}
.content-page .section-heading > p {
  max-width: 370px;
  color: #656c78;
  font-size: 16px;
}
.scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.scope-grid > article {
  padding: 28px;
  border: 1px solid #e3e1ec;
  border-radius: 16px;
  background: #fff;
}
.scope-grid > article > span {
  font-size: 12px;
  color: #6b50d8;
}
.scope-grid h3 {
  font-size: 22px;
  letter-spacing: -0.04em;
  line-height: 1.3;
  margin: 30px 0 14px;
}
.scope-grid p {
  margin: 0;
  color: #656c78;
  font-size: 15px;
  line-height: 1.85;
}
.service-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 60px;
  padding-block: 44px;
  border-top: 1px solid #dfdfe7;
}
.service-detail h2 {
  margin: 18px 0 22px;
}
.service-detail > div > p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.9;
  color: #656c78;
}
.service-detail aside {
  padding: 28px;
  background: #ece8fc;
  border-radius: 16px;
  align-self: start;
}
.service-detail aside h3 {
  margin: 0 0 20px;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.service-detail aside ul {
  margin: 0;
  padding-left: 20px;
}
.service-detail aside li {
  padding: 8px 0;
  font-size: 15px;
}
.service-detail aside p {
  color: #655f79;
  font-size: 12px;
  margin-top: 20px;
}
.proof-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e5e2ee;
}
.proof-card > a {
  background: #e9e5f5;
  padding: 28px;
}
.proof-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.25;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
}
.proof-card > div {
  padding: 36px;
  align-self: center;
}
.proof-card h3 {
  font-size: 34px;
  letter-spacing: -0.05em;
  margin: 14px 0;
}
.proof-card > div > p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.8;
  color: #656c78;
  margin-bottom: 24px;
}
.service-process > h2 {
  max-width: 700px;
  margin: 20px 0 40px;
}
.content-page .process-grid h3 {
  font-size: 22px;
}
.content-page .process-grid p {
  font-size: 15px;
}
.content-page .faq-section {
  padding-block: 55px 70px;
}
.content-page .faq-section .button {
  margin-top: 26px;
}
.related-services {
  border-top: 1px solid #dfdfe7;
  padding-bottom: 70px;
}
.related-services h2 {
  margin: 16px 0 28px;
}
.related-services > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.related-service {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid #e4e1ed;
  border-radius: 12px;
  font-size: 15px;
}
.related-service:hover {
  border-color: #6b50d8;
}
.ai-hero-map {
  background: #232329;
  color: #fff;
  padding: 30px;
  border-radius: 22px;
}
.ai-hero-map > span {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #c8c1e4;
}
.ai-hero-map > div {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
.ai-hero-map b {
  display: block;
  padding: 16px;
  border: 1px solid #ffffff30;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 500;
}
.ai-hero-map b:last-child {
  background: #d3f548;
  color: #262626;
  border-color: transparent;
}
.ai-hero-map i {
  text-align: center;
  font-style: normal;
  color: #a99adf;
}
.ai-hero-map > p {
  margin-top: 30px;
  font-size: 12px;
  color: #c0bdcb;
}
.case-hero h1 {
  max-width: 1100px;
}
.case-facts {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1fr;
  gap: 30px;
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid #dfdfe7;
}
.case-facts span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #68717d;
}
.case-facts strong {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
}
.case-cover {
  margin-top: 0;
  margin-bottom: 0;
  padding: 34px;
  border-radius: 20px;
  background: #e9e5f5;
}
.case-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.75;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  box-shadow: 0 12px 35px #29243c15;
}
.case-cover figcaption {
  font-size: 11px;
  color: #635d72;
  margin-top: 22px;
}
.case-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding-block: 64px 44px;
}
.case-story h2 {
  margin: 20px 0;
}
.case-story p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.85;
  color: #656c78;
}
.case-decisions {
  padding-block: 30px 55px;
}
.case-decisions > h2 {
  max-width: 650px;
  margin: 20px 0 32px;
}
.case-outcome {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  border-top: 1px solid #dfdfe7;
  padding-block: 48px;
  align-items: start;
}
.case-outcome > div:only-child {
  max-width: 780px;
  grid-column: 1/-1;
}
.case-outcome h2 {
  margin: 20px 0;
}
.case-outcome p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.85;
  color: #656c78;
}
.case-outcome-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
  margin-top: 24px;
  font-size: 14px;
}
.case-quote {
  margin: 0;
  padding: 32px;
  background: #ebe6fa;
  border-radius: 16px;
}
.case-quote blockquote {
  margin: 0;
  font-size: 22px;
  line-height: 1.65;
  letter-spacing: -0.035em;
}
.case-quote figcaption {
  margin-top: 24px;
  color: #655e78;
  font-size: 13px;
}
.case-next {
  padding-block: 38px 60px;
}
.case-next h2 {
  margin: 18px 0;
}
.case-next > p:not(.eyebrow) {
  color: #656c78;
  max-width: 650px;
  margin-bottom: 24px;
}

.analytics-notice {
  position: fixed;
  z-index: 80;
  bottom: 24px;
  left: 24px;
  width: min(390px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: #fff;
  color: #262331;
  border: 1px solid #dedbea;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 60px #17112825;
}
.analytics-notice[hidden] {
  display: none;
}
.analytics-notice h2 {
  font-size: 17px;
  margin: 0 0 10px;
}
.analytics-notice p {
  font-size: 12px;
  color: #65616e;
  margin: 0 0 18px;
}
.analytics-notice > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.analytics-notice button {
  border: 1px solid #d7d1e5;
  border-radius: 24px;
  padding: 10px 16px;
  min-height: 44px;
  font: inherit;
  font-size: 12px;
  background: #fff;
  color: #292531;
  cursor: pointer;
}
.analytics-notice button[data-consent="all"] {
  background: #6b50d8;
  border-color: #6b50d8;
  color: #fff;
}

@media (max-width: 1099px) {
  .service-hero-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .service-hero-visual {
    max-width: 520px;
    transform: none;
  }
  .ai-hero-map {
    max-width: 550px;
  }
  .scope-grid {
    gap: 12px;
  }
  .scope-grid > article {
    padding: 22px;
  }
  .service-detail {
    gap: 30px;
    grid-template-columns: 1fr;
  }
  .content-page .section-heading {
    align-items: flex-start;
  }
  .proof-card > div {
    padding: 24px;
  }
  .case-story {
    gap: 30px;
  }
  .case-outcome {
    gap: 25px;
  }
  .testimonial-track .testimonial,
  .testimonial-track .testimonial:first-child {
    gap: 24px;
    padding: 26px;
    grid-template-columns: 170px 1fr;
  }
}
@media (max-width: 760px) {
  .scope-grid {
    grid-template-columns: 1fr;
  }
  .scope-grid h3 {
    margin-top: 18px;
  }
  .proof-card {
    grid-template-columns: 1fr;
  }
  .proof-card > a {
    padding: 22px;
  }
  .content-page .process-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .case-story,
  .case-outcome {
    grid-template-columns: 1fr;
  }
  .demo-flow {
    grid-template-columns: 1fr;
  }
  .demo-heading {
    display: block;
  }
  .demo-heading > p {
    max-width: none;
    margin-bottom: 18px;
  }
  .testimonial-track .testimonial,
  .testimonial-track .testimonial:first-child {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .testimonial-identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px 24px;
  }
  .testimonial-track .testimonial figcaption {
    padding-top: 0;
  }
}
@media (max-width: 640px) {
  .testimonials-section {
    padding-block: 42px !important;
  }
  .testimonials-section .section-heading {
    margin-bottom: 24px;
  }
  .testimonial-track .testimonial,
  .testimonial-track .testimonial:first-child {
    padding: 24px;
    gap: 22px;
  }
  .testimonial-track .testimonial blockquote,
  .testimonial-track .testimonial:first-child blockquote {
    font-size: 20px;
    line-height: 1.6;
  }
  .testimonial-track .testimonial-logo,
  .testimonial-track .testimonial:first-child .testimonial-logo {
    width: 112px;
    height: 30px;
  }
  .testimonial-identity {
    gap: 16px;
  }
  .testimonials-section .recognition {
    margin-top: 24px;
    padding-top: 24px;
  }
  .workflow-demo > summary {
    padding: 16px 18px;
    font-size: 14px;
  }
  .demo-body {
    padding: 8px 18px 20px;
  }
  .demo-heading h3 {
    font-size: 22px;
  }
  .demo-tabs {
    gap: 6px;
  }
  .demo-tabs button {
    font-size: 12px;
    padding: 9px 12px;
  }
  .demo-flow > div {
    padding: 18px;
  }
  .service-hero,
  .case-hero {
    padding-top: 22px;
    padding-bottom: 36px;
  }
  .breadcrumbs {
    margin-bottom: 30px;
    font-size: 11px;
    gap: 8px;
  }
  .content-page h1 {
    white-space: normal;
    font-size: clamp(38px, 10vw, 54px);
    margin: 18px 0 22px;
    line-height: 1.08;
  }
  .page-lead {
    font-size: 17px;
  }
  .page-author {
    font-size: 11px;
  }
  .service-hero-visual {
    padding: 18px;
  }
  .service-scope,
  .service-process,
  .proof-section,
  .service-demo {
    padding-block: 36px;
  }
  .content-page .section-heading {
    display: block;
  }
  .content-page .section-heading > p {
    margin-top: 20px;
  }
  .service-detail {
    padding-block: 32px;
  }
  .service-detail aside {
    padding: 24px;
  }
  .scope-grid > article {
    padding: 24px;
  }
  .content-page .faq-section {
    padding-block: 32px 44px;
    gap: 28px;
  }
  .related-services {
    padding-block: 32px 44px;
  }
  .related-services > div {
    display: grid;
  }
  .related-service {
    padding: 16px 20px;
  }
  .case-facts {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 30px;
    padding-top: 22px;
  }
  .case-facts strong {
    margin-top: 6px;
  }
  .case-cover {
    padding: 18px;
  }
  .case-cover img {
    aspect-ratio: 1.1;
  }
  .case-cover figcaption {
    margin-top: 16px;
  }
  .case-story {
    padding-block: 40px 20px;
    gap: 24px;
  }
  .case-decisions {
    padding-block: 24px 36px;
  }
  .case-outcome {
    padding-block: 32px;
  }
  .case-quote {
    padding: 24px;
  }
  .case-quote blockquote {
    font-size: 20px;
  }
  .case-next {
    padding-block: 24px 40px;
  }
  .footer-services {
    gap: 16px 22px;
    padding-block: 26px;
  }
  .footer-services a {
    font-size: 13px;
  }
  .analytics-notice {
    bottom: 90px;
    max-height: calc(100dvh - 122px);
    left: 16px;
    width: calc(100vw - 32px);
    padding: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-flow.is-changing {
    animation: none;
  }
  .testimonial-controls button,
  .workflow-demo summary > span {
    transition: none;
  }
}
@media (max-width: 640px) {
  .mobile-menu {
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
  }
  .mobile-menu > .nav-services {
    width: 100%;
    border-bottom: 1px solid #dedbe7;
  }
  .mobile-menu .nav-services > summary {
    justify-content: space-between;
    padding: 16px 0;
    font-size: 18px;
  }
  .mobile-menu .services-dropdown {
    position: static;
    width: 100%;
    padding: 0 0 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .mobile-menu .services-dropdown > a {
    padding: 14px 12px;
  }
  .mobile-menu .services-dropdown strong {
    font-size: 14px;
  }
}

/* A shorter heading keeps the testimonial section in proportion to the carousel. */
.testimonials-section .section-heading h2 {
  font-size: clamp(34px, 3.5vw, 50px);
}
.testimonials-section .section-heading > div {
  flex: 1;
}
.testimonials-section .section-heading > p {
  font-size: 15px;
  max-width: 330px;
}
/* Draw the chevron geometrically so it aligns with the menu label. */
.nav-services > summary > span {
  display: block;
  width: 7px;
  height: 7px;
  font-size: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
}
.nav-services[open] > summary > span {
  transform: rotate(225deg);
  margin-top: 4px;
}
/* Each service has a different story and a diagram illustrating its actual scope. */
.service-illustration {
  margin: 0;
  position: relative;
  min-width: 0;
  padding: 26px;
  border: 1px solid #e1dcee;
  border-radius: 22px;
  background: linear-gradient(140deg, #efeafa, #f7f6fc);
  overflow: hidden;
}
.diagram-label {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 9px;
  letter-spacing: 0.08em;
  font-weight: 750;
  color: #65518e;
}
.service-icon {
  flex: 0 0 auto;
  color: #7051cf;
}
.service-illustration > figcaption {
  margin-top: 24px;
  text-align: center;
  color: #746c86;
  letter-spacing: 0.08em;
  font-size: 8px;
}
.diagram-note {
  text-align: center;
  font-size: 11px;
  color: #625a71;
  margin-top: 26px;
}
.browser-diagram {
  margin-top: 30px;
  background: #fff;
  border: 1px solid #e0daee;
  border-radius: 12px;
  box-shadow: 0 18px 40px #3f286011;
  transform: rotate(-2deg);
}
.browser-dots {
  display: flex;
  gap: 4px;
  padding: 11px;
  border-bottom: 1px solid #ece8f3;
}
.browser-dots i {
  width: 4px;
  height: 4px;
  background: #c8c0da;
  border-radius: 50%;
}
.browser-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 10px;
  padding: 22px 18px;
  align-items: center;
}
.browser-layout b {
  display: block;
  font-size: 27px;
  letter-spacing: -0.06em;
  line-height: 1.1;
}
.browser-layout span {
  display: block;
  margin-top: 12px;
  font-size: 10px;
  color: #777180;
}
.browser-layout em {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 12px;
  background: #252329;
  color: #fff;
  font-size: 9px;
  border-radius: 20px;
  font-style: normal;
}
.browser-art {
  height: 138px;
  border-radius: 8px;
  background: #eee9fa;
  position: relative;
  overflow: hidden;
}
.browser-art i {
  display: block;
  position: absolute;
  width: 65px;
  height: 65px;
  border-radius: 14px;
  background: #7355d3;
  transform: rotate(-15deg);
  top: 18px;
  left: 16px;
  box-shadow: 0 6px 20px #452d6a20;
}
.browser-art i:nth-child(2) {
  background: #d4f54d;
  top: 60px;
  left: 44px;
  transform: rotate(20deg);
}
.browser-art i:nth-child(3) {
  background: #fff;
  top: 90px;
  left: -20px;
}
.browser-blocks {
  display: flex;
  gap: 6px;
  padding: 0 18px 18px;
}
.browser-blocks span {
  flex: 1;
  padding: 15px 6px;
  text-align: center;
  background: #f6f3fb;
  font-size: 8px;
  border-radius: 6px;
  color: #6e627e;
}
.shop-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 28px auto;
  width: 160px;
  height: 155px;
  background: #fff;
  border-radius: 26px;
  transform: rotate(-7deg);
  box-shadow: 0 16px 30px #3f286012;
}
.shop-product .service-icon {
  width: 58px;
  height: 58px;
}
.shop-product span {
  font-size: 13px;
  margin-top: 12px;
}
.journey-nodes {
  display: flex;
  justify-content: center;
  gap: 9px;
  align-items: center;
}
.journey-nodes b {
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  border-radius: 20px;
  padding: 9px 13px;
}
.journey-nodes b:last-child {
  background: #d3f34b;
}
.journey-nodes i {
  font-style: normal;
  color: #8b78b6;
}
.phone-diagram {
  position: relative;
  width: 190px;
  margin: 25px auto 8px;
  padding: 28px 16px 19px;
  background: #fff;
  border: 5px solid #28242e;
  border-radius: 32px;
  box-shadow: 12px 20px 30px #3f286014;
  transform: rotate(-5deg);
}
.phone-notch {
  width: 60px;
  height: 7px;
  background: #28242e;
  border-radius: 0 0 10px 10px;
  position: absolute;
  top: -1px;
  left: 60px;
}
.phone-greeting {
  font-size: 7px;
  letter-spacing: 0.1em;
  color: #81778e;
}
.phone-diagram > strong {
  display: block;
  margin: 15px 0 22px;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -0.05em;
}
.phone-task {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #eee8fc;
  padding: 12px 8px;
  margin-top: 8px;
  border-radius: 10px;
}
.phone-task span {
  font-size: 10px;
}
.phone-task .service-icon {
  width: 18px;
  height: 18px;
}
.phone-nav {
  display: flex;
  justify-content: space-around;
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid #ece7f5;
}
.phone-nav i {
  width: 10px;
  height: 10px;
  border-radius: 4px;
  background: #b7accd;
}
.phone-nav i:first-child {
  background: #7657d9;
}
.diagram-float {
  display: block;
  position: absolute;
  right: 12px;
  bottom: 58px;
  padding: 10px 14px;
  background: #d5f54e;
  border-radius: 9px;
  font-size: 10px;
  transform: rotate(6deg);
}
.support-board {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}
.support-board > div {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 20px 14px;
  border: 1px solid #ded6ef;
  border-radius: 12px;
  background: #fff;
}
.support-board > div:last-child {
  background: #26232d;
  color: #fff;
  border: 0;
}
.support-board span {
  flex: 1;
  font-size: 13px;
}
.support-board b {
  font-size: 10px;
  font-weight: 500;
  color: #927eaf;
}
.support-board .service-icon {
  width: 23px;
  height: 23px;
}
.support-board > div:last-child .service-icon {
  color: #d4f449;
}
.seo-diagram {
  position: relative;
  margin-top: 20px;
  height: 265px;
}
.seo-center {
  position: absolute;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #7153ce;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  font-size: 13px;
  z-index: 1;
}
.seo-center strong {
  font-size: 17px;
}
.seo-node {
  position: absolute;
  z-index: 1;
  border: 1px solid #d9cfee;
  background: #fff;
  padding: 10px 15px;
  border-radius: 25px;
  font-size: 10px;
}
.seo-one {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
}
.seo-two {
  bottom: 35px;
  left: 0;
}
.seo-three {
  bottom: 35px;
  right: 0;
  background: #d5f34d;
  border-color: transparent;
}
.seo-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #b8a8d7;
  stroke-width: 1;
  stroke-dasharray: 4 7;
  animation: diagram-flow 12s linear infinite;
}
.ai-transformation-map {
  margin-top: 26px;
  display: grid;
  gap: 8px;
}
.ai-transformation-map > div {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #e3dcef;
}
.ai-transformation-map > div:last-child {
  background: #d5f24c;
  border-color: transparent;
}
.ai-transformation-map span {
  display: block;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #79638d;
}
.ai-transformation-map b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
}
.ai-transformation-map > i {
  font-style: normal;
  text-align: center;
  color: #947fb9;
  font-size: 17px;
}
.mcp-diagram {
  margin-top: 25px;
}
.mcp-client {
  width: fit-content;
  margin: auto;
  background: #fff;
  border: 1px solid #d9cfee;
  border-radius: 25px;
  padding: 12px 24px;
  font-size: 12px;
}
.mcp-wire {
  height: 30px;
  width: 0;
  margin: auto;
  border-left: 1px solid #b6a4ce;
}
.mcp-server {
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #26232d;
  color: #fff;
  padding: 20px;
  border-radius: 15px;
}
.mcp-server .service-icon {
  color: #d5f34e;
  margin-bottom: 12px;
}
.mcp-server strong {
  font-weight: 550;
  font-size: 17px;
}
.mcp-server span {
  color: #b7adca;
  font-size: 9px;
  margin-top: 9px;
}
.mcp-tools {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.mcp-tools span {
  background: #fff;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 10px;
  border: 1px solid #ddd4ed;
}
@keyframes diagram-flow {
  to {
    stroke-dashoffset: -110;
  }
}
.editorial-heading {
  margin-bottom: 32px;
}
.editorial-heading h2 {
  margin-top: 18px;
  max-width: 750px;
}
.web-brief,
.commerce-operations,
.mobile-release,
.support-boundary,
.seo-roadmap,
.ai-adoption,
.mcp-explainer,
.mcp-boundaries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  padding-block: 48px;
}
.web-brief > div > p,
.commerce-operations p,
.mobile-release p,
.support-boundary p,
.seo-roadmap > div > p,
.ai-adoption > div > p,
.mcp-explainer > div > p,
.mcp-boundaries p {
  font-size: 16px;
  color: #656c78;
  line-height: 1.85;
  margin-bottom: 18px;
}
.web-roadmap,
.web-proof,
.web-deliverables,
.commerce-journey,
.commerce-work,
.mobile-audiences,
.mobile-platforms,
.support-triage,
.support-formats,
.seo-pillars,
.seo-measurement,
.ai-opportunities,
.mcp-connections,
.mcp-build {
  padding-block: 44px;
}
.web-roadmap {
  border-top: 1px solid #dfdce8;
}
.web-roadmap ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  gap: 24px;
  list-style: none;
}
.web-roadmap li {
  position: relative;
  border-top: 1px solid #bdb3d4;
  padding-top: 24px;
}
.web-roadmap li > span {
  display: inline-flex;
  padding: 7px 12px;
  background: #e9e2f9;
  color: #6e51b5;
  border-radius: 20px;
  font-size: 11px;
}
.web-roadmap h3,
.integration-timeline h3 {
  font-size: 20px;
  letter-spacing: -0.035em;
  line-height: 1.3;
  margin: 22px 0 12px;
}
.web-roadmap p,
.integration-timeline p {
  font-size: 14px;
  color: #656c78;
  line-height: 1.8;
}
.service-project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e4e0ec;
  overflow: hidden;
}
.project-image-link {
  background: #e9e4f5;
  padding: 24px;
  display: block;
}
.project-image-link > span {
  display: none;
}
.project-image-link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.2;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
}
.service-project > div {
  padding: 30px;
  align-self: center;
}
.service-project h3 {
  font-size: 30px;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
}
.service-project p {
  font-size: 15px;
  color: #656c78;
  line-height: 1.8;
  margin-bottom: 22px;
}
.service-project .text-link {
  font-size: 13px;
}
.service-projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.service-projects .service-project {
  display: block;
}
.buying-steps,
.ai-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.buying-steps article {
  padding: 28px;
  border-top: 3px solid #b6a4e3;
  background: #fff;
  border-radius: 4px 4px 16px 16px;
}
.buying-steps article:last-child {
  border-color: #c7e740;
}
.buying-steps h3,
.ai-usecase-grid h3 {
  font-size: 22px;
  letter-spacing: -0.04em;
  line-height: 1.25;
  margin: 24px 0 14px;
}
.buying-steps p,
.ai-usecase-grid p {
  font-size: 15px;
  color: #656c78;
  line-height: 1.8;
}
.commerce-operations {
  border-top: 1px solid #dfdce8;
}
.commerce-operations aside,
.support-boundary aside {
  align-self: start;
  padding: 30px;
  background: #eee9fb;
  border-radius: 18px;
}
.commerce-operations h3,
.support-boundary h3 {
  font-size: 21px;
  line-height: 1.3;
  margin-bottom: 22px;
}
.commerce-operations ul,
.release-checklist {
  padding-left: 20px;
  margin: 0;
}
.commerce-operations li,
.release-checklist li {
  padding-block: 10px;
  font-size: 15px;
}
.audience-fork,
.platform-comparison,
.support-format-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.audience-fork article {
  padding: 36px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e5dfef;
}
.audience-fork article:last-child {
  background: #eae3f9;
}
.audience-fork span,
.support-format-grid article > span {
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #796292;
}
.audience-fork h3,
.support-format-grid h3 {
  margin: 24px 0 18px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.045em;
}
.audience-fork p,
.platform-comparison p,
.support-format-grid p {
  font-size: 16px;
  color: #656c78;
  line-height: 1.8;
}
.release-graphic {
  display: grid;
  align-self: center;
  gap: 24px;
  text-align: center;
  padding: 32px;
  border-radius: 20px;
  background: #e9e3f6;
}
.release-graphic > span {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #78608d;
}
.release-graphic > div {
  display: grid;
  gap: 12px;
}
.release-graphic b {
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  font-weight: 500;
  font-size: 15px;
}
.release-graphic i {
  font-style: normal;
  color: #8e73b4;
  font-size: 20px;
}
.release-graphic > strong {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.platform-comparison {
  gap: 36px;
}
.platform-comparison article {
  padding-top: 26px;
  border-top: 1px solid #d7cee5;
}
.platform-comparison h3 {
  font-size: 23px;
  margin: 24px 0 16px;
}
.support-issues {
  border-top: 1px solid #dcd4e9;
}
.support-issues details {
  border-bottom: 1px solid #dcd4e9;
}
.support-issues summary {
  padding: 24px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 25px;
  font-size: 24px;
  letter-spacing: -0.04em;
  line-height: 1.3;
}
.support-issues summary::-webkit-details-marker {
  display: none;
}
.support-issues summary > span {
  color: #8063b0;
  font-size: 11px;
  letter-spacing: 0;
}
.support-issues p {
  max-width: 800px;
  color: #656c78;
  font-size: 16px;
  line-height: 1.8;
  padding-bottom: 25px;
}
.support-format-grid article {
  padding: 34px;
  border: 1px solid #e1d9ee;
  border-radius: 20px;
  background: #fff;
}
.support-format-grid .service-icon {
  display: block;
  margin-bottom: 30px;
}
.support-format-grid article:last-child {
  background: #28242e;
}
.support-format-grid article:last-child h3 {
  color: #fff;
}
.support-format-grid article:last-child p,
.support-format-grid article:last-child li {
  color: #c7bfce;
}
.support-format-grid article:last-child .service-icon {
  color: #d4f34d;
}
.support-format-grid ul {
  margin: 22px 0 0;
  padding-left: 18px;
}
.support-format-grid li {
  padding: 6px 0;
  font-size: 14px;
}
.support-boundary {
  background: #eeebf6;
  border-radius: 20px;
  padding: 34px;
}
.support-boundary aside {
  background: #fff;
}
.seo-pillar-list {
  display: grid;
  gap: 12px;
}
.seo-pillar-list article {
  display: grid;
  grid-template-columns: 30px 50px 1fr;
  gap: 24px;
  padding: 30px;
  background: #fff;
  border: 1px solid #e3dceb;
  border-radius: 16px;
  align-items: start;
}
.seo-pillar-list article > span {
  color: #877198;
  font-size: 12px;
}
.seo-pillar-list h3 {
  font-size: 26px;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
}
.seo-pillar-list p {
  max-width: 830px;
  font-size: 16px;
  color: #656c78;
  line-height: 1.8;
}
.seo-roadmap ol {
  margin: 0;
  padding: 0 0 0 28px;
  border-left: 1px solid #c7b8df;
  list-style: none;
}
.seo-roadmap li {
  padding: 0 0 30px 12px;
  position: relative;
}
.seo-roadmap li:last-child {
  padding-bottom: 0;
}
.seo-roadmap li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -34px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7a58cf;
  border: 3px solid #f6f6f9;
}
.seo-roadmap li > span,
.adoption-steps article > span {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #7f6598;
  font-weight: 750;
}
.seo-roadmap h3 {
  margin: 12px 0;
  font-size: 23px;
  line-height: 1.25;
}
.seo-roadmap li p {
  font-size: 15px;
  color: #656c78;
  line-height: 1.8;
}
.seo-measurement {
  background: #eae5f7;
  padding: 34px;
  border-radius: 20px;
}
.seo-measurement > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.seo-measurement article {
  border-top: 1px solid #c9bcde;
  padding-top: 20px;
}
.seo-measurement h3 {
  font-size: 21px;
  margin-bottom: 14px;
}
.seo-measurement p {
  font-size: 14px;
  color: #655b76;
  line-height: 1.8;
}
.ai-usecase-grid article {
  padding: 25px 0;
  border-top: 1px solid #d4c9e6;
}
.adoption-steps article {
  padding: 22px 26px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e4dced;
  margin-bottom: 12px;
}
.adoption-steps h3 {
  margin: 12px 0;
  font-size: 22px;
  line-height: 1.3;
}
.adoption-steps p {
  font-size: 15px;
  color: #656c78;
  line-height: 1.75;
}
.ai-guardrails {
  display: flex;
  gap: 28px;
  padding: 32px;
  background: #eae4f8;
  border-radius: 18px;
}
.ai-guardrails > div {
  max-width: 900px;
}
.ai-guardrails h2 {
  font-size: 30px;
}
.ai-guardrails p {
  margin: 20px 0;
  font-size: 16px;
  color: #655b76;
  line-height: 1.8;
}
.ai-guardrails .text-link {
  font-size: 14px;
}
.operation-table {
  background: #fff;
  padding: 22px;
  border: 1px solid #e3daec;
  border-radius: 18px;
  align-self: start;
}
.operation-table > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border-bottom: 1px solid #ebe5f3;
  padding: 15px 0;
  font-size: 13px;
}
.operation-table > div:first-child {
  padding-top: 0;
  color: #6c538c;
  font-size: 11px;
}
.operation-table p {
  font-size: 11px;
  line-height: 1.7;
  margin: 18px 0 0;
}
.integration-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.integration-timeline article {
  border-top: 1px solid #cfc1df;
  padding-top: 25px;
}
.integration-timeline article > span {
  color: #7854b1;
  font-size: 11px;
}
.service-nudge {
  margin-block: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 32px;
  border: 1px solid #d8cbed;
  border-radius: 18px;
  background: #f0ebfa;
}
.service-nudge h2 {
  font-size: clamp(25px, 2.5vw, 34px);
  max-width: 670px;
}
.service-nudge p {
  font-size: 14px;
  color: #6b5f7b;
  max-width: 630px;
  margin-top: 16px;
}
.service-nudge .button {
  flex: 0 0 auto;
}
.service-faq {
  padding-block: 55px 65px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 55px;
}
.service-faq h2 {
  margin-top: 20px;
}
.service-select-field {
  margin: 22px 0;
}
.service-select-field select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border: 1px solid #ffffff30;
  border-radius: 8px;
  background: #38383e;
  color: #f6f6fa;
  font: inherit;
  font-size: 13px;
}
.service-select-field option {
  background: #38383e;
  color: #fff;
}
.scope-grid .service-icon {
  margin-bottom: 0;
}
.service-illustration:hover .browser-art i:first-child {
  transform: translateY(-5px) rotate(-20deg);
}
.browser-art i {
  transition: transform 0.4s;
}
@media (min-width: 1100px) {
  .service-illustration {
    align-self: center;
  }
}
@media (max-width: 1099px) {
  .service-illustration {
    width: min(100%, 520px);
  }
  .web-roadmap ol {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .web-brief,
  .commerce-operations,
  .mobile-release,
  .support-boundary,
  .seo-roadmap,
  .ai-adoption,
  .mcp-explainer,
  .mcp-boundaries {
    gap: 30px;
  }
  .service-nudge {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }
  .service-faq {
    gap: 30px;
    grid-template-columns: 1fr 1.3fr;
  }
}
@media (max-width: 760px) {
  .web-brief,
  .commerce-operations,
  .mobile-release,
  .support-boundary,
  .seo-roadmap,
  .ai-adoption,
  .mcp-explainer,
  .mcp-boundaries,
  .service-faq {
    grid-template-columns: 1fr;
  }
  .buying-steps,
  .ai-usecase-grid,
  .service-projects,
  .audience-fork,
  .platform-comparison,
  .support-format-grid,
  .integration-timeline {
    grid-template-columns: 1fr;
  }
  .service-project {
    grid-template-columns: 1fr;
  }
  .seo-measurement > div:last-child {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
@media (max-width: 640px) {
  .service-illustration {
    padding: 22px;
  }
  .editorial-heading {
    margin-bottom: 25px;
  }
  .web-brief,
  .commerce-operations,
  .mobile-release,
  .support-boundary,
  .seo-roadmap,
  .ai-adoption,
  .mcp-explainer,
  .mcp-boundaries {
    padding-block: 32px;
    gap: 22px;
  }
  .web-roadmap,
  .web-proof,
  .web-deliverables,
  .commerce-journey,
  .commerce-work,
  .mobile-audiences,
  .mobile-platforms,
  .support-triage,
  .support-formats,
  .seo-pillars,
  .seo-measurement,
  .ai-opportunities,
  .mcp-connections,
  .mcp-build {
    padding-block: 30px;
  }
  .web-roadmap ol {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .web-roadmap li {
    padding-top: 20px;
  }
  .service-project > div {
    padding: 24px;
  }
  .project-image-link {
    padding: 20px;
  }
  .audience-fork article,
  .support-format-grid article {
    padding: 26px;
  }
  .audience-fork h3,
  .support-format-grid h3 {
    font-size: 27px;
  }
  .support-issues summary {
    font-size: 22px;
    padding-block: 22px;
  }
  .support-boundary {
    padding: 24px;
  }
  .support-boundary aside {
    padding: 22px;
  }
  .seo-pillar-list article {
    grid-template-columns: 24px 1fr;
    gap: 16px;
    padding: 24px;
  }
  .seo-pillar-list .service-icon {
    display: none;
  }
  .seo-pillar-list h3 {
    font-size: 24px;
  }
  .seo-measurement {
    padding: 26px;
  }
  .ai-guardrails {
    padding: 25px;
    gap: 15px;
  }
  .ai-guardrails h2 {
    font-size: 26px;
  }
  .ai-guardrails > .service-icon {
    width: 23px;
    height: 23px;
  }
  .operation-table {
    padding: 20px;
  }
  .operation-table > div {
    gap: 15px;
    font-size: 12px;
  }
  .service-nudge {
    padding: 26px;
    gap: 22px;
  }
  .service-nudge .button {
    max-width: 100%;
  }
  .service-faq {
    padding-block: 35px 45px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .seo-orbit {
    animation: none;
  }
  .browser-art i {
    transition: none;
  }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .service-hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 30px;
  }
  .service-hero-grid h1 {
    font-size: clamp(42px, 4.6vw, 52px);
  }
  .service-hero-grid .page-lead {
    font-size: 17px;
  }
  .service-illustration {
    padding: 20px;
  }
  .diagram-label {
    font-size: 8px;
    gap: 10px;
  }
  .diagram-label .service-icon {
    width: 24px;
    height: 24px;
  }
  .journey-nodes {
    gap: 5px;
  }
  .journey-nodes b {
    padding: 8px 10px;
  }
}
.visual-story {
  padding-block: 42px;
}
.visual-story-heading {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  gap: 30px;
  align-items: baseline;
  margin-bottom: 28px;
}
.visual-story-heading h2 {
  font-size: clamp(29px, 3vw, 44px);
}
.visual-story figure {
  margin: 0;
}
.visual-story picture {
  display: block;
  overflow: hidden;
  border-radius: 20px;
}
.visual-story img {
  display: block;
  width: 100%;
  height: auto;
}
.visual-story figcaption {
  color: #746a80;
  font-size: 11px;
  margin-top: 16px;
  max-width: 860px;
}
@media (max-width: 640px) {
  .visual-story {
    padding-block: 30px;
  }
  .visual-story-heading {
    display: block;
    margin-bottom: 24px;
  }
  .visual-story-heading h2 {
    margin-top: 16px;
  }
  .visual-story picture {
    max-width: 480px;
    margin-inline: auto;
  }
  .visual-story img {
    aspect-ratio: 560/815;
  }
  .visual-story figcaption {
    font-size: 11px;
  }
}
/* Verified contrast for small diagram labels and tinted content panels. */
.phone-greeting {
  color: #675d74;
}
.audience-fork article:last-child > span {
  color: #654d7d;
}
.audience-fork article:last-child p {
  color: #565d6a;
}
.support-board b,
.support-issues summary > span {
  color: #705587;
}
.support-board > div:last-child b {
  color: #bda9d1;
}
.support-format-grid article:last-child > span {
  color: #c9b5df;
}
.ai-transformation-map > div:last-child span {
  color: #55465d;
}
/* Large visual stories are native HTML: selectable labels and responsive layouts. */
.html-visual {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 55px);
  border-radius: 22px;
  background: linear-gradient(135deg, #f0e9fb, #faf9fc);
  border: 1px solid #e8e0f1;
}
.visual-overline {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #6b6079;
  margin-bottom: 20px;
  line-height: 1.5;
}
.html-browser {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfd6eb;
  border-radius: 13px;
  min-width: 0;
  box-shadow: 0 14px 30px #4c35650b;
}
.html-browser-bar {
  display: flex;
  gap: 5px;
  height: 30px;
  align-items: center;
  padding-inline: 14px;
  background: #faf8fd;
  border-bottom: 1px solid #eee7f4;
}
.html-browser-bar i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c4b7d5;
}
.visual-web-grid {
  display: grid;
  grid-template-columns: 2fr 0.8fr;
  gap: 50px;
  align-items: center;
}
.visual-web-content {
  padding: 30px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
  align-items: center;
}
.visual-web-content strong {
  display: block;
  font-size: clamp(24px, 2.7vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.05em;
}
.visual-web-content p:not(.visual-overline) {
  font-size: 13px;
  color: #746b80;
  margin-top: 16px;
}
.visual-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  min-height: 44px;
  padding: 11px 17px;
  background: #28242e;
  color: #fff;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 600;
}
.visual-action:hover {
  background: #7051c9;
}
.visual-shapes {
  position: relative;
  height: 170px;
  background: #eee6fa;
  border-radius: 12px;
  overflow: hidden;
}
.visual-shapes i {
  position: absolute;
  width: 95px;
  height: 95px;
  border-radius: 20px;
  background: #7354ce;
  top: 18px;
  left: 22px;
  transform: rotate(-12deg);
}
.visual-shapes i:nth-child(2) {
  width: 80px;
  height: 80px;
  background: #d8f353;
  top: 80px;
  left: 70px;
  transform: rotate(18deg);
}
.visual-shapes i:nth-child(3) {
  width: 70px;
  height: 70px;
  background: #fff;
  top: 110px;
  left: -25px;
  transform: rotate(10deg);
}
.visual-page-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 30px 26px;
}
.visual-page-map span {
  padding: 28px 10px;
  background: #f6f2fc;
  border-radius: 8px;
  font-size: 11px;
  text-align: center;
  color: #6b5d7b;
}
.html-phone {
  position: relative;
  width: 100%;
  max-width: 250px;
  margin-inline: auto;
  padding: 42px 22px 30px;
  background: #fff;
  border: 5px solid #28242e;
  border-radius: 32px;
  box-shadow: 10px 18px 30px #4c356511;
  min-width: 0;
  --phone-angle: 0deg;
}
.html-phone-notch {
  position: absolute;
  top: -1px;
  left: 32%;
  width: 36%;
  height: 10px;
  background: #28242e;
  border-radius: 0 0 10px 10px;
}
.html-phone-home {
  position: absolute;
  bottom: 8px;
  left: 34%;
  width: 32%;
  height: 4px;
  border-radius: 3px;
  background: #b9acc9;
}
.html-phone > strong {
  display: block;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -0.05em;
  margin: 16px 0 22px;
  font-weight: 600;
}
.html-phone .visual-overline {
  font-size: 8px;
}
.visual-phone-card {
  background: #eee7f9;
  padding: 18px;
  border-radius: 12px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d50ab;
  margin: 24px 0 10px;
}
.visual-skeleton {
  display: grid;
  gap: 10px;
  margin-block: 22px;
}
.visual-skeleton i {
  height: 5px;
  width: 100%;
  background: #e2daed;
  border-radius: 3px;
}
.visual-skeleton i:nth-child(2) {
  width: 85%;
}
.visual-skeleton i:nth-child(3) {
  width: 65%;
}
.visual-caption-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.visual-caption-row span {
  padding: 10px 18px;
  background: #fff;
  border-radius: 22px;
  font-size: 11px;
  color: #6c607c;
}
.visual-caption-row span:last-child {
  background: #d8f353;
  color: #333122;
}
.visual-commerce-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 24px;
  align-items: center;
}
.visual-search {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  background: #f5f0fb;
  border-radius: 24px;
  font-size: 11px;
  color: #73667f;
  margin: 16px;
}
.visual-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 18px;
}
.visual-products > div {
  display: grid;
  justify-items: center;
  background: #f6f2fb;
  border-radius: 10px;
  padding: 14px 8px;
}
.visual-products span {
  font-size: 8px;
  color: #786b83;
  margin-top: 14px;
}
.product-shape {
  display: block;
  width: 42px;
  height: 62px;
  border-radius: 10px 10px 16px 16px;
  background: #7958d1;
  box-shadow: inset -10px -8px 0 #0000000c;
}
.product-shape-1,
.product-shape-2 {
  background: #d8f353;
  border-radius: 8px;
  transform: rotate(-7deg);
}
.visual-product-detail {
  display: grid;
  place-items: center;
  padding: 26px;
  margin: 16px;
  background: #ece4f8;
  border-radius: 10px;
}
.visual-product-detail .product-shape {
  width: 70px;
  height: 95px;
  border-radius: 17px;
}
.visual-product-title {
  display: block;
  margin: 22px 20px 14px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.2;
}
.visual-commerce-grid .html-browser > .visual-skeleton {
  margin-inline: 20px;
}
.visual-static-button {
  display: block;
  padding: 12px 16px;
  text-align: center;
  margin: 20px;
  background: #28242e;
  color: #fff;
  border-radius: 22px;
  font-size: 10px;
}
.visual-checkout {
  background: #fff;
  padding: 22px;
  border: 1px solid #dfd6eb;
  border-radius: 14px;
}
.visual-checkout h3 {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin-bottom: 26px;
}
.visual-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 10px;
  margin-top: 8px;
  border-radius: 9px;
  background: #f4eefa;
  font-size: 11px;
  color: #665477;
}
.visual-feature i {
  flex: 0 0 auto;
  font-style: normal;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dfef9e;
  color: #3a4a14;
  font-size: 10px;
}
.visual-checkout .visual-action {
  width: 100%;
  background: #d8f353;
  color: #2e3221;
}
.visual-example-note {
  margin-top: 26px;
  font-size: 11px;
  line-height: 1.7;
  color: #766880;
}
.visual-phones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  align-items: center;
}
.visual-phones .html-phone {
  max-width: 255px;
  min-height: 390px;
}
.phone-discover {
  --phone-angle: -4deg;
}
.phone-follow {
  --phone-angle: 4deg;
}
.phone-feature-panel {
  padding: 24px 15px;
  background: #7554cb;
  color: #fff;
  font-size: 17px;
  border-radius: 12px;
  line-height: 1.3;
}
.phone-feature-panel small {
  display: block;
  margin-top: 14px;
  font-size: 10px;
  color: #f2eaff;
}
.html-phone .visual-static-button {
  margin: 25px 0 4px;
}
.html-phone .visual-feature {
  padding: 15px 10px;
}
.phone-confirmation {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #d8f353;
  font-size: 40px;
  color: #3d4c20;
  margin: 25px auto;
}
.phone-status {
  display: block;
  margin-top: 25px;
  text-align: center;
  padding: 12px;
  background: #f0e9fb;
  font-size: 10px;
  border-radius: 22px;
  color: #7053a1;
}
.visual-support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.visual-support-grid > article {
  background: #fff;
  border: 1px solid #e0d6ed;
  border-radius: 15px;
  padding: 25px;
}
.visual-stage-number {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 24px;
  background: #eee7fa;
  color: #7253ae;
  font-size: 10px;
}
.visual-support-grid h3 {
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  margin: 26px 0 14px;
}
.visual-support-grid > article > p {
  font-size: 12px;
  color: #73667f;
  line-height: 1.7;
}
.visual-task-panel {
  margin-top: 24px;
  padding: 16px;
  border-radius: 12px;
  background: #f6f1fb;
  min-height: 130px;
}
.visual-task-panel > span,
.visual-task-panel > b {
  display: block;
  font-size: 12px;
  line-height: 1.7;
  color: #6f617e;
}
.visual-task-panel > b {
  margin-top: 14px;
  color: #8062b3;
  font-weight: 500;
}
.visual-task-panel .visual-work-tag {
  padding: 8px;
  border-radius: 8px;
  background: #28242e;
  color: #fff;
  font-size: 9px;
  text-align: center;
}
.visual-task-panel .visual-feature {
  padding: 8px 0;
  background: transparent;
  margin-top: 0;
}
.support-progress {
  margin-top: 28px;
  height: 2px;
  background: #d9cbea;
  position: relative;
  overflow: hidden;
}
.support-progress > i {
  position: absolute;
  height: 2px;
  width: 28%;
  left: -28%;
  top: 0;
  background: #7753c9;
}
.visual-search-grid {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
}
.visual-serp {
  background: #fff;
  border: 1px solid #dfd6eb;
  border-radius: 15px;
  padding: 22px;
}
.visual-serp .visual-search {
  margin: 0 0 28px;
  font-size: 12px;
}
.visual-result-url {
  font-size: 11px;
  color: #776b80;
  margin: 16px 0 12px;
}
.visual-serp h3 {
  color: #7050ba;
  font-size: 23px;
  margin-bottom: 16px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.visual-serp > p:not(.visual-result-url) {
  font-size: 13px;
  line-height: 1.8;
  color: #73677f;
}
.visual-search-bridge {
  position: relative;
  border-top: 2px dashed #b7a1d1;
}
.visual-search-bridge i {
  position: absolute;
  top: -4px;
  left: 0;
  width: 6px;
  height: 6px;
  background: #7354ce;
  border-radius: 50%;
}
.visual-landing {
  padding: 28px;
}
.visual-landing h3 {
  font-size: 27px;
  letter-spacing: -0.04em;
  line-height: 1.15;
}
.visual-evidence {
  background: #eee7fa;
  padding: 20px;
  border-radius: 10px;
  color: #745897;
  font-size: 13px;
  line-height: 1.7;
}
.visual-network {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 80px;
  align-items: center;
  padding-block: 22px;
}
.network-side {
  display: grid;
  gap: 35px;
  position: relative;
  z-index: 1;
}
.network-side > span {
  position: relative;
  display: block;
  padding: 24px 18px;
  background: #fff;
  border: 1px solid #ded2ed;
  border-radius: 15px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.network-side > span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 80px;
  border-top: 2px dashed #b19acb;
}
.network-inputs > span::after {
  left: 100%;
}
.network-outputs > span::after {
  right: 100%;
}
.network-inputs > span:first-child::after {
  transform: rotate(20deg);
  transform-origin: left;
}
.network-inputs > span:last-child::after {
  transform: rotate(-20deg);
  transform-origin: left;
}
.network-outputs > span:first-child::after {
  transform: rotate(-20deg);
  transform-origin: right;
}
.network-outputs > span:last-child::after {
  transform: rotate(20deg);
  transform-origin: right;
}
.network-hub {
  z-index: 2;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  min-height: 230px;
  padding: 28px;
  border-radius: 24px;
  background: #28242e;
  color: #fff;
}
.network-hub strong {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}
.network-hub > span:not(.network-orbit) {
  color: #d2c5df;
  font-size: 13px;
  line-height: 1.7;
  margin-top: 5px;
}
.hub-signal {
  display: block;
  margin-top: 22px;
  width: 100%;
  height: 8px;
  border-radius: 10px;
  background: #d8f353;
  transform-origin: left;
}
.visual-permissions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 20px;
  background: #ebe3f7;
  border-radius: 14px;
  margin-top: 30px;
  gap: 15px;
}
.visual-permissions span {
  color: #7355ac;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.visual-ai-network .network-hub {
  min-height: 250px;
  border-radius: 50%;
  align-items: center;
  text-align: center;
  background: #7354ce;
}
.visual-ai-network .network-hub strong {
  font-size: 31px;
}
.visual-ai-network .network-hub > span:not(.network-orbit) {
  color: #f0e8ff;
}
.network-orbit {
  position: absolute;
  inset: -14px;
  border: 1px solid #b8a0da;
  border-radius: 50%;
  pointer-events: none;
}
.network-outputs > span:last-child {
  background: #d8f353;
  color: #383d25;
  border-color: transparent;
}
.visual-approval {
  width: fit-content;
  max-width: 100%;
  padding: 12px 25px;
  margin: 30px auto 0;
  background: #28242e;
  color: #fff;
  border-radius: 24px;
  text-align: center;
  font-size: 12px;
}
/* Animations pause outside the viewport. No layout dimensions are animated. */
[data-animated-visual] .html-phone {
  animation: visual-phone-float 6s ease-in-out infinite;
  animation-play-state: paused;
}
[data-animated-visual] .html-phone:nth-child(2) {
  animation-delay: -2s;
}
[data-animated-visual] .html-phone:nth-child(3) {
  animation-delay: -4s;
}
[data-animated-visual] .visual-shapes i {
  animation: visual-shape-turn 7s ease-in-out infinite;
  animation-play-state: paused;
}
[data-animated-visual] .visual-shapes i:nth-child(2) {
  animation-delay: -3s;
}
[data-animated-visual] .support-progress i {
  animation: visual-progress 4s linear infinite;
  animation-play-state: paused;
}
[data-animated-visual] .visual-search-bridge i {
  animation: visual-travel 3s linear infinite;
  animation-play-state: paused;
}
[data-animated-visual] .hub-signal {
  animation: visual-signal 3s ease-in-out infinite;
  animation-play-state: paused;
}
[data-animated-visual] .network-orbit {
  animation: visual-orbit 4s ease-in-out infinite;
  animation-play-state: paused;
}
[data-animated-visual] .network-side > span {
  animation: visual-node-highlight 5s ease-in-out infinite;
  animation-play-state: paused;
}
[data-animated-visual] .network-side > span:nth-child(2) {
  animation-delay: -1.7s;
}
[data-animated-visual] .network-side > span:nth-child(3) {
  animation-delay: -3.3s;
}
[data-animated-visual].is-in-view * {
  animation-play-state: running;
}
@keyframes visual-phone-float {
  0%,
  100% {
    transform: translateY(0) rotate(var(--phone-angle));
  }
  50% {
    transform: translateY(-7px) rotate(var(--phone-angle));
  }
}
@keyframes visual-shape-turn {
  0%,
  100% {
    transform: translateY(0) rotate(-10deg);
  }
  50% {
    transform: translateY(-5px) rotate(4deg);
  }
}
@keyframes visual-progress {
  to {
    transform: translateX(470%);
  }
}
@keyframes visual-travel {
  to {
    transform: translateX(52px);
  }
}
@keyframes visual-signal {
  0%,
  100% {
    transform: scaleX(0.7);
  }
  50% {
    transform: scaleX(1);
  }
}
@keyframes visual-orbit {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.07);
    opacity: 1;
  }
}
@keyframes visual-node-highlight {
  0%,
  100% {
    border-color: #ded2ed;
  }
  50% {
    border-color: #9672c7;
  }
}
@media (max-width: 1099px) {
  .visual-network {
    gap: 40px;
  }
  .network-side > span {
    padding: 20px 14px;
    font-size: 13px;
  }
  .network-side > span::after {
    width: 40px;
  }
  .network-hub {
    padding: 22px;
  }
  .network-hub strong {
    font-size: 26px;
  }
  .visual-web-grid {
    gap: 25px;
  }
  .visual-web-content {
    padding: 24px;
  }
  .visual-commerce-grid {
    gap: 14px;
  }
  .visual-checkout {
    padding: 18px;
  }
  .visual-phones {
    gap: 20px;
  }
  .html-phone {
    padding-inline: 17px;
  }
}
@media (max-width: 760px) {
  .visual-commerce-grid,
  .visual-support-grid {
    grid-template-columns: 1fr;
  }
  .visual-commerce-grid {
    gap: 28px;
  }
  .visual-commerce-grid .visual-overline {
    margin-bottom: 12px;
  }
  .visual-search-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .visual-search-bridge {
    width: 0;
    height: 25px;
    margin: auto;
    border-top: 0;
    border-left: 2px dashed #b7a1d1;
  }
  .visual-search-bridge i {
    left: -4px;
    top: 0;
    animation-name: visual-travel-down;
  }
  .visual-web-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .visual-web-grid .html-phone {
    max-width: 225px;
  }
  .visual-phones {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .visual-phones .html-phone {
    max-width: 270px;
    min-height: 0;
  }
  .visual-network {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 360px;
    margin: auto;
    padding-block: 8px;
  }
  .network-side {
    gap: 12px;
  }
  .network-side > span {
    text-align: center;
    font-size: 15px;
    padding: 20px;
  }
  .network-side > span::after {
    display: none;
  }
  .network-hub {
    align-items: center;
    text-align: center;
    min-height: 215px;
  }
  .network-hub::before,
  .network-hub::after {
    content: "";
    position: absolute;
    left: 50%;
    height: 32px;
    width: 0;
    border-left: 2px dashed #b19acb;
  }
  .network-hub::before {
    bottom: 100%;
  }
  .network-hub::after {
    top: 100%;
  }
  .visual-ai-network .network-hub {
    max-width: 255px;
    width: 100%;
    margin: auto;
    min-height: 255px;
  }
  .visual-permissions {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    text-align: center;
  }
}
@media (max-width: 640px) {
  .html-visual {
    padding: 22px;
    border-radius: 16px;
  }
  .visual-web-content {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 24px;
  }
  .visual-shapes {
    height: 140px;
  }
  .visual-page-map {
    grid-template-columns: 1fr;
    padding: 0 24px 24px;
  }
  .visual-page-map span {
    padding: 18px;
  }
  .visual-caption-row {
    margin-top: 24px;
    gap: 8px;
  }
  .visual-caption-row span {
    font-size: 11px;
  }
  .visual-serp,
  .visual-landing {
    padding: 22px;
  }
  .visual-serp h3 {
    font-size: 23px;
  }
  .visual-checkout h3 {
    font-size: 24px;
  }
  .visual-example-note {
    font-size: 11px;
  }
  .visual-support-grid > article {
    padding: 23px;
  }
  .visual-support-grid h3 {
    font-size: 24px;
  }
  .visual-task-panel {
    min-height: 0;
  }
  .release-graphic > span {
    color: #664b7c;
  }
  .support-boundary > div > p {
    color: #535b67;
  }
}
@keyframes visual-travel-down {
  to {
    transform: translateY(25px);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-animated-visual] *,
  [data-animated-visual] *::before,
  [data-animated-visual] *::after {
    animation: none !important;
  }
}
[data-animated-visual].visual-ecommerce-development .product-shape {
  animation: visual-product-float 5s ease-in-out infinite;
  animation-play-state: paused;
}
[data-animated-visual].visual-ecommerce-development.is-in-view .product-shape {
  animation-play-state: running;
}
[data-animated-visual].visual-ecommerce-development
  .visual-products
  > div:nth-child(even)
  .product-shape {
  animation-delay: -2.5s;
}
@keyframes visual-product-float {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-5px) rotate(3deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-animated-visual].visual-ecommerce-development .product-shape {
    animation: none;
  }
}
.visual-products span {
  color: #655777;
}
.visual-task-panel > b {
  color: #684d89;
}
/* Visual compositions sit directly on the page; only their internal UI has surfaces. */
.html-visual,
.service-illustration {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.html-visual {
  padding: 18px 0;
}
/* Contrast belongs to the illustrated objects, not an enclosing panel. */
.html-browser,
.visual-checkout,
.visual-serp,
.visual-support-grid > article,
.network-side > span {
  border-color: #d3cadf;
  box-shadow: 0 8px 24px #3022380a;
}
.network-side > span:last-child {
  box-shadow: 0 6px 20px #30223808;
}
.visual-overline,
.visual-example-note {
  color: #685b75;
}
.visual-story figcaption {
  color: #675b75;
}
.visual-story-controls {
  display: none;
}
@media (max-width: 640px) {
  .content-page .contact-copy h2 {
    font-size: 36px;
    line-height: 1.1;
    max-width: 370px;
  }
  .content-page .contact-grid {
    gap: 28px;
  }
  .visual-phones,
  .visual-commerce-grid,
  .visual-support-grid {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #bca8d7 transparent;
    padding-bottom: 14px;
    align-items: stretch;
  }
  .visual-phones > .html-phone,
  .visual-commerce-grid > div,
  .visual-support-grid > article {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    margin: 0;
  }
  .visual-phones {
    padding: 12px 18px 20px;
    gap: 36px;
  }
  .visual-phones > .html-phone {
    min-height: 350px;
    --phone-angle: 0deg;
  }
  .visual-commerce-grid > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .visual-commerce-grid .html-browser {
    flex: 1;
  }
  .visual-commerce-grid .visual-checkout {
    flex: 1;
  }
  .visual-story-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-top: 12px;
  }
  .visual-story-controls p {
    font-size: 12px;
    color: #655575;
    font-variant-numeric: tabular-nums;
  }
  .visual-story-controls > div {
    display: flex;
    gap: 7px;
  }
  .visual-story-controls button {
    width: 44px;
    height: 44px;
    border: 1px solid #d4c8e4;
    border-radius: 50%;
    background: #fff;
    color: #3d2d4a;
    font-size: 19px;
    cursor: pointer;
  }
  .visual-story-controls button:disabled {
    opacity: 0.4;
    cursor: default;
  }
  .visual-web-grid > .html-phone {
    display: none;
  }
  .visual-network {
    gap: 20px;
    padding-block: 5px;
  }
  .network-side {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .network-side > span {
    flex: 1 1 105px;
    padding: 11px 10px;
    font-size: 11px;
    line-height: 1.45;
    border-radius: 10px;
    text-align: center;
  }
  .network-hub {
    min-height: 145px;
    padding: 22px;
    max-width: 260px;
    width: 100%;
    margin: auto;
    border-radius: 17px;
  }
  .network-hub strong {
    font-size: 25px;
    margin-bottom: 10px;
  }
  .network-hub > span:not(.network-orbit) {
    font-size: 12px;
  }
  .network-hub::before,
  .network-hub::after {
    height: 20px;
  }
  .hub-signal {
    margin-top: 14px;
    height: 6px;
  }
  .visual-ai-network .network-hub {
    width: 185px;
    min-height: 185px;
    max-width: 185px;
  }
  .visual-ai-network .network-hub strong {
    font-size: 27px;
  }
  .visual-ai-network .network-hub > span:not(.network-orbit) {
    font-size: 10px;
  }
  .visual-permissions {
    padding: 14px;
    margin-top: 22px;
    gap: 14px;
  }
  .visual-permissions span {
    font-size: 9px;
  }
  .visual-approval {
    margin-top: 22px;
    font-size: 11px;
    padding: 11px 16px;
  }
  .visual-story {
    padding-block: 24px;
  }
  .service-illustration {
    max-width: 370px;
    margin-inline: auto;
    width: 100%;
  }
  .phone-diagram {
    width: 170px;
    padding: 26px 13px 18px;
  }
  .phone-notch {
    width: 55px;
    left: 52px;
  }
  .phone-diagram > strong {
    font-size: 23px;
    margin-bottom: 16px;
  }
  .phone-task {
    padding: 10px 7px;
  }
  .phone-nav {
    margin-top: 18px;
  }
}
/* Restore the first edition's framed hero illustrations. */
.service-hero .service-illustration {
  background: linear-gradient(140deg, #efeafa, #f7f6fc);
  border: 1px solid #e1dcee;
  border-radius: 22px;
}
/* Give the first edition's animated compositions room below their headings. */
.visual-story-heading {
  margin-bottom: 64px;
}
@media (max-width: 640px) {
  .visual-story-heading {
    margin-bottom: 32px;
  }
}

/* Home project overview: three columns, two on tablets and one on phones. */
@media (min-width: 1000px) {
  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 25px;
  }
  .projects-grid .project-visual {
    height: 330px;
  }
  .projects-grid .project-info {
    display: block;
  }
  .projects-grid .project-tag {
    display: block;
    margin-top: 8px;
  }
}
@media (min-width: 641px) and (max-width: 999px) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

.service-benefit {
  margin: 22px 0 0;
  max-width: 680px;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--ink);
}
@media (max-width: 640px) {
  .service-benefit {
    font-size: 22px;
    margin-top: 18px;
  }
}

/* Stop decorative movement when the illustration leaves the viewport. */
[data-animated-visual]:not(.is-in-view) * {
  animation-play-state: paused !important;
}


/* ===== v1-upgrade.css ===== */
/* First edition refinement. Layout ratio 1:1.618; spacing 8/13/21/34/55/89. */
body.refined-v1 {
  --space-xs: 8px;
  --space-sm: 13px;
  --space-md: 21px;
  --space-lg: 34px;
  --space-xl: 55px;
  --space-xxl: 89px;
  font-size: 17px;
}
html:has(body.refined-v1) {
  scroll-padding-top: 97px;
}
html body.refined-v1 .shell {
  max-width: 1400px;
}
html body.refined-v1 .site-header {
  height: 76px;
  min-height: 0;
}
html body.refined-v1 .header-inner {
  height: 76px;
  min-height: 0;
  padding-block: 0;
}
html body.refined-v1 .brand img {
  width: 94px;
  height: 46px;
}
html body.refined-v1 .header-cta {
  min-height: 44px;
  padding: 10px 21px;
  font-size: 14px;
}
html body.refined-v1 .desktop-nav {
  gap: 34px;
}
html body.refined-v1 .desktop-nav > a,
html body.refined-v1 .nav-services > summary {
  font-size: 15px;
}
html body.refined-v1 .desktop-nav > a[aria-current] {
  text-decoration: underline;
  text-underline-offset: 7px;
}
html body.refined-v1 .services-dropdown {
  width: min(600px, calc(100vw - 48px));
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 13px;
  max-height: calc(100dvh - 110px);
  overflow: auto;
}
html body.refined-v1 .services-dropdown > a {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 13px;
  min-height: 68px;
}
html body.refined-v1 .service-menu-icon {
  display: block;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #6d50d3;
  flex: none;
}
html body.refined-v1 .services-dropdown .service-menu-copy {
  margin: 0;
  font-size: inherit;
}
html body.refined-v1 .service-menu-copy strong {
  color: #292631;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 650;
}
html body.refined-v1 .service-menu-copy > span {
  display: block;
  margin-top: 5px;
  color: #62616f;
  font-size: 12px;
  line-height: 1.55;
}
html body.refined-v1 .services-dropdown a[aria-current] {
  background: #ede7fb;
}
html body.refined-v1 .hero {
  padding-top: 34px;
}
html body.refined-v1 .hero-topline {
  margin-bottom: 21px;
}
html body.refined-v1 .hero-grid {
  grid-template-columns: 1.618fr 1fr;
  gap: 55px;
  align-items: center;
}
html body.refined-v1 .hero h1 {
  font-size: clamp(54px, 5.65vw, 84px);
  line-height: 1.06;
  font-weight: 500;
}
html body.refined-v1 .hero-copy {
  padding-block: 0;
}
html body.refined-v1 .hero-intro {
  font-size: 19px;
  line-height: 1.75;
  max-width: 680px;
  margin-top: 26px;
}
html body.refined-v1 .hero-actions {
  margin-top: 26px;
  gap: 26px;
}
html body.refined-v1 .hero-actions .button {
  min-height: 52px;
  font-size: 14px;
}
html body.refined-v1 .hero-note {
  font-size: 12px;
  line-height: 1.7;
  margin-top: 16px;
}
html body.refined-v1 .hero-proof {
  margin-top: 34px;
  padding-block: 26px;
  gap: 55px;
}
html body.refined-v1 .hero-showcase {
  height: 460px;
  min-height: 460px;
  align-self: center;
}
html body.refined-v1 .showcase-scene {
  position: absolute;
  left: 0;
  right: 0;
  top: 55px;
  bottom: 110px;
  overflow: hidden;
}
html body.refined-v1 .showcase-top {
  left: 26px;
  right: 26px;
  top: 24px;
  font-size: 9px;
}
html body.refined-v1 .showcase-top > span:last-child {
  display: none;
}
html body.refined-v1 .showcase-back {
  left: 30%;
  top: 4px;
  width: 66%;
  height: 255px;
}
html body.refined-v1 .showcase-front {
  left: 5%;
  top: 66px;
  width: 78%;
  height: 220px;
}
html body.refined-v1 .showcase-caption {
  left: 26px;
  right: 26px;
  bottom: 26px;
  font-size: 13px;
  line-height: 1.6;
  min-height: 48px;
  gap: 21px;
}
html body.refined-v1 .showcase-caption > span:first-child {
  max-width: calc(100% - 65px);
}
html body.refined-v1 .showcase-arrow {
  width: 44px;
  height: 44px;
  flex: none;
}
html body.refined-v1 .client-strip {
  padding-block: 26px;
}
html body.refined-v1 .section-space {
  padding-block: 76px;
}
html body.refined-v1 .section-heading {
  margin-bottom: 34px;
  gap: 34px;
}
html body.refined-v1 .section-heading h2 {
  font-size: clamp(38px, 3.8vw, 55px);
  line-height: 1.08;
  margin-bottom: 0;
}
html body.refined-v1 .section-kicker {
  margin-bottom: 18px;
}
html body.refined-v1 .section-intro {
  font-size: 17px;
  line-height: 1.75;
  max-width: 430px;
  padding-bottom: 0;
}
html body.refined-v1 .work-heading-side {
  display: grid;
  gap: 21px;
  max-width: 470px;
}
html body.refined-v1 .work-heading-side .section-intro {
  margin: 0;
}
html body.refined-v1 .work-heading-side .work-toolbar {
  display: block;
  margin: 0;
}
html body.refined-v1 .work-heading-side .work-toolbar > p {
  display: none;
}
html body.refined-v1 .work-heading-side .filters {
  flex-wrap: wrap;
  justify-content: flex-start;
}
html body.refined-v1 .filter {
  font-size: 13px;
  min-height: 44px;
  padding: 11px 16px;
}
html body.refined-v1 .filter > span {
  font-size: 12px;
}
html body.refined-v1 .project-info h3 {
  font-size: 25px;
  margin-bottom: 7px;
}
html body.refined-v1 .project-info p {
  font-size: 15px;
  line-height: 1.65;
  max-width: 36ch;
}
html body.refined-v1 .project-tag {
  font-size: 11px;
}
html body.refined-v1 .work-bottom {
  margin-top: 34px;
  padding-top: 21px;
}
html body.refined-v1 .service-card {
  padding: 30px;
}
html body.refined-v1 .service-card h3 {
  font-size: clamp(29px, 2.65vw, 41px);
  line-height: 1.15;
  margin-bottom: 21px;
}
html body.refined-v1 .service-card > p {
  font-size: 17px;
  line-height: 1.7;
}
html body.refined-v1 .service-list li {
  font-size: 14px;
  line-height: 1.6;
}
html body.refined-v1 .service-detail-link {
  font-size: 14px;
  margin-top: 16px;
}
html body.refined-v1 .service-link {
  margin-top: 26px;
  padding-top: 0;
  font-size: 16px;
}
html body.refined-v1 .ai-panel {
  padding: 34px;
  gap: 55px;
}
html body.refined-v1 .ai-copy h2 {
  font-size: clamp(31px, 3vw, 43px);
}
html body.refined-v1 .ai-copy > p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.75;
}
html body.refined-v1 .ai-offerings p {
  font-size: 14px;
  line-height: 1.7;
}
html body.refined-v1 .ai-offerings h3 {
  font-size: 18px;
}
html body.refined-v1 .about-section {
  grid-template-columns: 1fr 1.618fr;
  gap: 55px;
}
html body.refined-v1 .about-copy .about-lead {
  font-size: 21px;
  line-height: 1.6;
}
html body.refined-v1 .about-copy > p:not(.eyebrow):not(.about-lead) {
  font-size: 17px;
  line-height: 1.8;
  max-width: 65ch;
}
html body.refined-v1 .process-grid h3 {
  font-size: 24px;
}
html body.refined-v1 .process-grid p {
  font-size: 16px;
  line-height: 1.75;
}
html body.refined-v1 .faq-list summary {
  font-size: 16px;
  line-height: 1.55;
  padding-block: 20px;
}
html body.refined-v1 .faq-list details > p {
  font-size: 16px;
  line-height: 1.8;
  max-width: 70ch;
  padding-bottom: 21px;
}
html body.refined-v1 .contact-grid {
  grid-template-columns: 1fr 1.2fr;
  gap: 55px;
  align-items: start;
}
html body.refined-v1 .contact-copy > p {
  font-size: 17px;
  line-height: 1.75;
  max-width: 46ch;
}
html body.refined-v1 .contact-form {
  padding: 34px;
  border-color: #ffffff18;
}
html body.refined-v1 .contact-form h3 {
  font-size: 26px;
  line-height: 1.25;
}
html body.refined-v1 .form-intro {
  font-size: 15px;
  line-height: 1.75;
  color: #c8c8d0;
  margin-top: 13px;
  margin-bottom: 26px;
}
html body.refined-v1 .contact-form .field > label {
  font-size: 14px;
  margin-bottom: 9px;
  color: #eeeef2;
}
html body.refined-v1 .contact-form .field > label > span {
  font-size: 13px;
  color: #d0cfd9;
}
html body.refined-v1 .contact-form input,
html body.refined-v1 .contact-form textarea,
html body.refined-v1 .contact-form select {
  font-size: 16px;
  background: #ffffff08;
  border-color: #ffffff35;
  color: #f6f6fa;
  padding: 13px 15px;
}
html body.refined-v1 .contact-form input,
html body.refined-v1 .contact-form select {
  min-height: 50px;
}
html body.refined-v1 .contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("assets/select-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 8px;
  padding: 13px 52px 13px 16px;
  line-height: 1.5;
}
html body.refined-v1 .contact-form textarea {
  min-height: 145px;
  line-height: 1.75;
}
html body.refined-v1 .contact-form input::placeholder,
html body.refined-v1 .contact-form textarea::placeholder {
  color: #bfc0ca;
}
html body.refined-v1 .contact-form option {
  background: #343439;
  color: #fff;
}
html body.refined-v1 .submit-button {
  min-height: 52px;
  font-size: 15px;
  margin-top: 21px;
}
html body.refined-v1 .form-note {
  font-size: 12px;
  line-height: 1.7;
  color: #c6c7d0;
  margin-top: 16px;
}
html body.refined-v1 .enquiry-next {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 12px;
  max-width: 460px;
}
html body.refined-v1 .enquiry-next li {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #d9d9e0;
  font-size: 14px;
  line-height: 1.6;
}
html body.refined-v1 .enquiry-next li > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid #ffffff26;
  border-radius: 50%;
  color: #d1f34f;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  flex: none;
}
html body.refined-v1 .footer-services {
  gap: 8px 26px;
}
html body.refined-v1 .footer-services a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
html
  body.refined-v1
  :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid #8366eb;
  outline-offset: 4px;
}
html
  body.refined-v1
  .contact-section
  :is(a, button, input, textarea, select):focus-visible {
  outline-color: #d1f34f;
}
/* Service pages keep a readable lead and a short route to the relevant detail. */
html body.refined-v1 .service-hero {
  padding-top: 26px;
  padding-bottom: 34px;
}
html body.refined-v1 .service-hero-grid {
  grid-template-columns: 1.2fr 1fr;
  gap: 55px;
}
html body.refined-v1.content-page h1 {
  font-size: clamp(43px, 4.15vw, 66px);
  line-height: 1.09;
  letter-spacing: -0.055em;
  margin: 18px 0 21px;
}
html body.refined-v1 .service-benefit {
  font-size: 25px;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 16px;
  max-width: 640px;
}
html body.refined-v1 .page-lead {
  font-size: 18px;
  line-height: 1.8;
  max-width: 68ch;
}
html body.refined-v1 .page-author {
  font-size: 12px;
  line-height: 1.7;
  margin-top: 18px;
}
html body.refined-v1 .service-hero .service-illustration {
  padding: 26px;
  min-height: 340px;
}
html body.refined-v1 .service-page-guide {
  display: flex;
  gap: 13px 26px;
  flex-wrap: wrap;
  padding-block: 18px;
  margin-bottom: 21px;
  border-top: 1px solid #dedbe9;
  border-bottom: 1px solid #dedbe9;
}
html body.refined-v1 .service-page-guide a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 550;
  text-underline-offset: 5px;
}
html body.refined-v1 .service-page-guide a:last-child {
  margin-left: auto;
  color: #6046c6;
}
html body.refined-v1 .breadcrumbs {
  font-size: 13px;
  flex-wrap: wrap;
  line-height: 1.6;
  margin-bottom: 34px;
}
html body.refined-v1 .editorial-heading {
  margin-bottom: 34px;
}
html body.refined-v1 .editorial-heading h2 {
  margin-top: 18px;
}
html body.refined-v1 .visual-story-heading {
  display: block;
  margin-bottom: 34px;
}
html body.refined-v1 .visual-story-heading h2 {
  margin-top: 21px;
  max-width: 900px;
}
html body.refined-v1 .visual-phones {
  max-width: 1100px;
  margin-inline: auto;
  align-items: stretch;
  gap: 55px;
}
html body.refined-v1 .visual-phones .html-phone {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 260px;
  min-height: 520px;
  aspect-ratio: 1 / 2;
  padding-top: 48px;
}
html body.refined-v1 .visual-phones .visual-static-button,
html body.refined-v1 .visual-phones .phone-status {
  margin-top: auto;
}
html body.refined-v1 .visual-phones .html-phone > strong {
  margin-top: 24px;
}
html body.refined-v1 .html-visual + figcaption {
  margin-top: 26px;
  line-height: 1.75;
  font-size: 12px;
}
html
  body.refined-v1
  :is(
    .web-brief,
    .commerce-operations,
    .mobile-release,
    .support-boundary,
    .seo-roadmap,
    .ai-adoption,
    .mcp-explainer,
    .mcp-boundaries
  )
  p {
  font-size: 17px;
  line-height: 1.85;
}
html
  body.refined-v1
  :is(
    .scope-grid,
    .web-roadmap,
    .integration-timeline,
    .audience-fork,
    .support-format-grid,
    .adoption-steps,
    .ai-usecase-grid,
    .seo-pillar-list
  )
  p {
  font-size: 16px;
  line-height: 1.8;
}
html body.refined-v1 .scope-grid > article {
  padding: 30px;
}
html body.refined-v1 .scope-grid h3 {
  margin-top: 24px;
  line-height: 1.3;
}
html body.refined-v1 .service-project > div {
  padding: 34px;
}
html body.refined-v1 .service-project p {
  font-size: 17px;
  line-height: 1.8;
}
html body.refined-v1 .service-nudge {
  gap: 34px;
  padding: 34px;
  margin-block: 34px;
}
html body.refined-v1 .service-nudge p {
  font-size: 16px;
  line-height: 1.8;
}
html body.refined-v1 .seo-measurement p,
html body.refined-v1 .ai-guardrails p {
  font-size: 16px;
  line-height: 1.8;
}
html body.refined-v1 .operation-table > div {
  font-size: 14px;
  line-height: 1.65;
  gap: 16px;
}
html body.refined-v1 .operation-table p {
  font-size: 13px;
}
html body.refined-v1 .related-service {
  font-size: 15px;
  line-height: 1.6;
  align-items: center;
  min-height: 54px;
}
/* The catalogue opens with the work, with an aligned compact toolbar. */
html body.refined-v1 .portfolio-hero {
  padding-block: 42px 34px;
}
html body.refined-v1 .portfolio-hero > .eyebrow {
  margin-bottom: 21px;
}
html body.refined-v1 .portfolio-hero-grid {
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: center;
}
html body.refined-v1 .portfolio-hero h1 {
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1.08;
  max-width: 700px;
}
html body.refined-v1 .portfolio-hero-grid > div > p {
  font-size: 18px;
  line-height: 1.8;
  margin: 0;
}
html body.refined-v1 .portfolio-hero .text-link {
  font-size: 15px;
  margin-top: 21px;
}
html body.refined-v1 .catalog-toolbar {
  gap: 21px;
  padding-block: 21px;
}
html body.refined-v1 .catalog-status,
html body.refined-v1 .catalog-progress {
  font-size: 14px;
}
html body.refined-v1 .archive-info h2 {
  font-size: 21px;
}
html body.refined-v1 .archive-info p {
  font-size: 14px;
  line-height: 1.7;
}
/* Case studies: real previews, project-specific context and a direct next step. */
html body.refined-v1 .case-hero {
  padding-top: 26px;
  padding-bottom: 34px;
}
html body.refined-v1 .case-hero h1 {
  max-width: 1000px;
}
html body.refined-v1 .case-facts {
  margin-top: 34px;
  padding-top: 21px;
  gap: 26px;
}
html body.refined-v1 .case-facts span {
  font-size: 11px;
}
html body.refined-v1 .case-cover {
  padding: 26px;
}
html body.refined-v1 .case-cover-button {
  position: relative;
  display: block;
  padding: 0;
  width: 100%;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 10px;
}
html body.refined-v1 .case-cover-zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 10px 14px;
  border-radius: 30px;
  background: #fff;
  color: #29252f;
  font-size: 12px;
  border: 1px solid #d9d2e6;
}
html body.refined-v1 .case-cover figcaption {
  font-size: 12px;
  line-height: 1.7;
  margin-top: 18px;
}
html body.refined-v1 .case-story {
  padding-block: 55px;
  gap: 55px;
}
html body.refined-v1 .case-story p:not(.eyebrow),
html body.refined-v1 .case-outcome p:not(.eyebrow) {
  font-size: 18px;
  line-height: 1.8;
  max-width: 68ch;
}
html body.refined-v1 .case-story h2 {
  font-size: 34px;
}
html body.refined-v1 .case-next {
  background: #ebe6f8;
  border: 1px solid #dcd3ee;
  border-radius: 20px;
  padding: 34px;
  margin-block: 21px 55px;
}
html body.refined-v1 .case-next p {
  font-size: 17px;
  line-height: 1.8;
}
html body.refined-v1 .case-lens {
  padding-block: 13px 55px;
}
html body.refined-v1 .case-lens h2 {
  font-size: 34px;
  margin-top: 18px;
  max-width: 760px;
}
html body.refined-v1 .case-lens-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 21px;
  margin-top: 34px;
}
html body.refined-v1 .case-lens-grid article {
  min-width: 0;
  padding: 26px;
  background: #fff;
  border: 1px solid #e0dae9;
  border-radius: 16px;
}
html body.refined-v1 .case-lens-grid article > span {
  color: #6950c3;
  font-size: 12px;
}
html body.refined-v1 .case-lens-grid h3 {
  font-size: 25px;
  line-height: 1.25;
  margin-top: 21px;
  margin-bottom: 13px;
}
html body.refined-v1 .case-lens-grid p {
  font-size: 16px;
  line-height: 1.8;
  color: #5c6370;
}
html body.refined-v1 .case-lens-grid article:nth-child(2) {
  background: #ece7fa;
}
html body.refined-v1 .case-lens-grid article:last-child {
  border-top: 4px solid #b5d83b;
  padding-top: 23px;
}
@media (min-width: 1100px) {
  html body.refined-v1 .shell,
  html body.refined-v1 main .shell:not(.hero):not(.portfolio-hero) {
    width: min(1400px, calc(100% - 288px));
    margin-inline: auto;
  }
  html body.refined-v1 .mobile-contact {
    right: max(16px, calc((100vw - 1688px) / 2));
  }
}
@media (min-width: 641px) and (max-width: 1099px) {
  html body.refined-v1 .shell,
  html body.refined-v1 main .shell:not(.hero):not(.portfolio-hero) {
    width: calc(100% - 64px);
    margin-inline: auto;
  }
  html body.refined-v1 .hero-grid {
    gap: 34px;
  }
  html body.refined-v1 .hero h1 {
    font-size: clamp(48px, 5.8vw, 67px);
  }
  html body.refined-v1 .hero-intro {
    font-size: 17px;
  }
  html body.refined-v1 .service-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
  }
  html body.refined-v1 .service-benefit {
    font-size: 22px;
  }
  html body.refined-v1 .service-hero h1 {
    font-size: 40px;
  }
  html body.refined-v1 .service-hero .service-illustration {
    padding: 21px;
  }
  html body.refined-v1 .about-section,
  html body.refined-v1 .contact-grid {
    gap: 34px;
  }
  html body.refined-v1 .service-list {
    grid-template-columns: 1fr;
  }
  html body.refined-v1 .mobile-contact {
    width: 240px;
    height: 50px;
    border-radius: 30px;
    right: 24px;
    bottom: 18px;
    top: auto;
    flex-direction: row;
    gap: 10px;
  }
  html body.refined-v1 .mobile-contact .floating-contact-icon {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 900px) {
  html body.refined-v1 .contact-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  html body.refined-v1 .contact-copy {
    max-width: 700px;
  }
  html body.refined-v1 .contact-copy h2 br {
    display: none;
  }
  html body.refined-v1 .service-nudge {
    flex-direction: column;
    align-items: flex-start;
  }
  html body.refined-v1 .case-story {
    gap: 34px;
  }
  html body.refined-v1 .case-lens-grid {
    gap: 13px;
  }
  html body.refined-v1 .case-lens-grid article {
    padding: 21px;
  }
  html body.refined-v1 .case-lens-grid h3 {
    font-size: 22px;
  }
}
@media (max-width: 640px) {
  html:has(body.refined-v1) {
    scroll-padding-top: 89px;
  }
  html body.refined-v1 .site-header,
  html body.refined-v1 .header-inner {
    height: 68px;
  }
  html body.refined-v1 .brand img {
    width: 80px;
    height: 42px;
  }
  html body.refined-v1 .mobile-menu {
    top: 67px;
  }
  html body.refined-v1 .mobile-menu .services-dropdown {
    position: static;
    display: grid;
    width: 100%;
    transform: none;
    grid-template-columns: 1fr;
    border: 0;
    padding: 8px 0;
    box-shadow: none;
    max-height: none;
  }
  html body.refined-v1 .mobile-menu .services-dropdown > a {
    min-height: 60px;
  }
  html body.refined-v1 .shell,
  html body.refined-v1 main .shell:not(.hero):not(.portfolio-hero) {
    width: calc(100% - 40px);
    margin-inline: auto;
  }
  html body.refined-v1 .hero {
    padding-top: 26px;
  }
  html body.refined-v1 .hero-topline {
    margin-bottom: 21px;
  }
  html body.refined-v1 .hero-grid {
    display: block;
  }
  html body.refined-v1 .hero h1 {
    font-size: clamp(40px, 10vw, 52px);
    line-height: 1.06;
  }
  html body.refined-v1 .hero-intro {
    font-size: 17px;
    line-height: 1.75;
    margin-top: 24px;
  }
  html body.refined-v1 .hero-actions {
    margin-top: 24px;
    gap: 18px;
  }
  html body.refined-v1 .hero-actions .button {
    min-height: 50px;
    font-size: 13px;
  }
  html body.refined-v1 .hero-note {
    font-size: 11px;
    margin-top: 13px;
  }
  html body.refined-v1 .hero-showcase {
    height: 300px;
    min-height: 300px;
    margin-top: 34px;
  }
  html body.refined-v1 .showcase-top {
    left: 21px;
    right: 21px;
    top: 18px;
    font-size: 8px;
  }
  html body.refined-v1 .showcase-scene {
    top: 38px;
    bottom: 84px;
  }
  html body.refined-v1 .showcase-back {
    top: 0;
    height: 160px;
  }
  html body.refined-v1 .showcase-front {
    top: 36px;
    height: 138px;
  }
  html body.refined-v1 .showcase-caption {
    left: 21px;
    right: 21px;
    bottom: 18px;
    font-size: 11px;
    min-height: 35px;
    gap: 13px;
  }
  html body.refined-v1 .showcase-arrow {
    width: 34px;
    height: 34px;
  }
  html body.refined-v1 .hero-proof {
    gap: 21px;
    margin-top: 21px;
    padding-block: 26px;
    flex-wrap: wrap;
  }
  html body.refined-v1 .personal-intro {
    width: 100%;
  }
  html body.refined-v1 .proof-stat {
    flex: 1;
  }
  html body.refined-v1 .section-space {
    padding-block: 55px;
  }
  html body.refined-v1 .section-heading {
    display: block;
    margin-bottom: 26px;
  }
  html body.refined-v1 .section-heading h2 {
    font-size: 37px;
  }
  html body.refined-v1 .section-intro {
    font-size: 16px;
    margin-top: 21px;
  }
  html body.refined-v1 .work-heading-side {
    gap: 18px;
    margin-top: 21px;
  }
  html body.refined-v1 .work-heading-side .section-intro {
    margin-top: 0;
  }
  html body.refined-v1 .filter {
    min-height: 42px;
    font-size: 11px;
    padding: 10px 13px;
  }
  html body.refined-v1 .filter > span {
    font-size: 10px;
  }
  html body.refined-v1 .project-info h3 {
    font-size: 25px;
  }
  html body.refined-v1 .project-info p {
    font-size: 15px;
  }
  html body.refined-v1 .services-grid {
    gap: 21px;
  }
  html body.refined-v1 .service-card {
    padding: 25px;
  }
  html body.refined-v1 .service-card h3 {
    font-size: 29px;
  }
  html body.refined-v1 .service-card > p {
    font-size: 16px;
  }
  html body.refined-v1 .service-list {
    grid-template-columns: 1fr;
  }
  html body.refined-v1 .ai-panel {
    padding: 25px;
    gap: 26px;
  }
  html body.refined-v1 .ai-copy h2 {
    font-size: 33px;
  }
  html body.refined-v1 .ai-copy > p:not(.eyebrow) {
    font-size: 16px;
  }
  html body.refined-v1 .about-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
  }
  html body.refined-v1 .about-copy .about-lead {
    font-size: 20px;
  }
  html body.refined-v1 .process-grid {
    gap: 26px;
  }
  html body.refined-v1 .contact-section {
    padding-top: 34px;
  }
  html body.refined-v1 .contact-grid {
    gap: 34px;
  }
  html body.refined-v1 .contact-copy h2 {
    font-size: 37px;
  }
  html body.refined-v1 .contact-form {
    padding: 25px 21px;
  }
  html body.refined-v1 .contact-form h3 {
    font-size: 24px;
  }
  html body.refined-v1 .form-intro {
    font-size: 14px;
  }
  html body.refined-v1 .form-row {
    grid-template-columns: 1fr;
    gap: 21px;
  }
  html body.refined-v1 .contact-form input,
  html body.refined-v1 .contact-form select {
    min-height: 50px;
  }
  html body.refined-v1 .enquiry-next {
    margin-top: 21px;
    gap: 10px;
  }
  html body.refined-v1 .enquiry-next li {
    font-size: 13px;
  }
  html body.refined-v1 .footer-services {
    gap: 4px 21px;
  }
  html body.refined-v1 .footer-services a {
    font-size: 13px;
  }
  html body.refined-v1 .service-hero {
    padding-top: 21px;
    padding-bottom: 26px;
  }
  html body.refined-v1 .service-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 34px;
  }
  html body.refined-v1.content-page h1 {
    font-size: clamp(35px, 9.2vw, 43px);
    margin-top: 18px;
    margin-bottom: 21px;
  }
  html body.refined-v1 .service-benefit {
    font-size: 22px;
    line-height: 1.4;
  }
  html body.refined-v1 .page-lead {
    font-size: 17px;
    line-height: 1.8;
  }
  html body.refined-v1 .service-hero .service-illustration {
    width: 100%;
    min-height: 0;
    padding: 21px;
  }
  html body.refined-v1 .service-page-guide {
    gap: 8px 21px;
    padding-block: 13px;
    margin-bottom: 13px;
  }
  html body.refined-v1 .service-page-guide a {
    font-size: 12px;
  }
  html body.refined-v1 .service-page-guide a:last-child {
    margin-left: 0;
  }
  html body.refined-v1 .breadcrumbs {
    font-size: 12px;
    gap: 8px;
    margin-bottom: 26px;
  }
  html body.refined-v1 .visual-story-heading {
    margin-bottom: 26px;
  }
  html body.refined-v1 .visual-story-heading h2 {
    font-size: 31px;
    margin-top: 18px;
  }
  html body.refined-v1 .visual-phones {
    gap: 21px;
    padding-inline: 18px;
  }
  html body.refined-v1 .visual-phones .html-phone {
    max-width: 260px;
    min-height: 480px;
    aspect-ratio: 1 / 2;
    padding-top: 42px;
  }
  html body.refined-v1 .service-nudge {
    padding: 25px;
    gap: 21px;
    margin-block: 26px;
  }
  html body.refined-v1 .service-nudge h2 {
    font-size: 28px;
  }
  html body.refined-v1 .service-nudge p {
    font-size: 16px;
  }
  html body.refined-v1 .service-faq {
    padding-block: 42px;
    gap: 26px;
  }
  html body.refined-v1 .scope-grid > article {
    padding: 25px;
  }
  html body.refined-v1 .scope-grid h3 {
    margin-top: 21px;
  }
  html body.refined-v1 .service-project > div {
    padding: 26px;
  }
  html body.refined-v1 .case-hero {
    padding-bottom: 26px;
  }
  html body.refined-v1 .case-facts {
    gap: 21px;
    margin-top: 26px;
  }
  html body.refined-v1 .case-facts strong {
    font-size: 15px;
    margin-top: 8px;
  }
  html body.refined-v1 .case-cover {
    padding: 16px;
  }
  html body.refined-v1 .case-cover img {
    aspect-ratio: 1.12;
  }
  html body.refined-v1 .case-cover-zoom {
    font-size: 11px;
    right: 10px;
    bottom: 10px;
    padding: 8px 11px;
  }
  html body.refined-v1 .case-story {
    padding-block: 42px;
    gap: 34px;
  }
  html body.refined-v1 .case-story h2 {
    font-size: 30px;
  }
  html body.refined-v1 .case-story p:not(.eyebrow),
  html body.refined-v1 .case-outcome p:not(.eyebrow) {
    font-size: 17px;
  }
  html body.refined-v1 .case-lens-grid {
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 26px;
  }
  html body.refined-v1 .case-lens-grid article {
    padding: 25px;
  }
  html body.refined-v1 .case-lens-grid article:last-child {
    padding-top: 22px;
  }
  html body.refined-v1 .case-lens h2 {
    font-size: 30px;
  }
  html body.refined-v1 .case-lens {
    padding-bottom: 34px;
  }
  html body.refined-v1 .case-next {
    padding: 26px;
    margin-bottom: 42px;
  }
  html body.refined-v1 .case-next h2 {
    font-size: 30px;
  }
  html body.refined-v1 .portfolio-hero {
    padding-block: 28px;
  }
  html body.refined-v1 .portfolio-hero-grid {
    display: block;
  }
  html body.refined-v1 .portfolio-hero h1 {
    font-size: 45px;
  }
  html body.refined-v1 .portfolio-hero-grid > div > p {
    font-size: 17px;
    margin-top: 21px;
  }
  html body.refined-v1 .catalog-toolbar {
    padding-block: 18px;
    gap: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body.refined-v1 .mini-store *,
  html body.refined-v1 .mini-search-window * {
    animation: none !important;
  }
}
/* Icons belong to their heading, never an otherwise empty row. */
html body.refined-v1 .icon-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 16px;
}
html body.refined-v1 .icon-heading > .service-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 3px 0 0;
  flex: none;
}
html body.refined-v1 .icon-heading h2,
html body.refined-v1 .icon-heading h3,
html body.refined-v1 .icon-heading h4 {
  margin: 0;
  line-height: 1.3;
}
html body.refined-v1 .icon-heading > div > span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}
html body.refined-v1 .scope-grid article > .icon-heading + p {
  margin-top: 0;
}
/* Both animated browser windows remain inside the scene at every width. */
html body.refined-v1 .showcase-scene {
  overflow: visible;
}
html body.refined-v1 .showcase-back {
  left: 34%;
  top: 10%;
  width: 58%;
  height: 74%;
}
html body.refined-v1 .showcase-front {
  left: 7%;
  top: 24%;
  width: 74%;
  height: 69%;
}
html body.refined-v1 .hero-showcase:hover .showcase-back {
  transform: translateY(-3px) rotate(9deg);
}
html body.refined-v1 .hero-showcase:hover .showcase-front {
  transform: translateY(-4px) rotate(-7deg);
}
html body.refined-v1 .catalog-section {
  padding-top: 0;
}
html body.refined-v1 .catalog-pagination {
  margin-top: 34px;
}
html body.refined-v1 .archive-note {
  max-width: 80ch;
  margin: 26px auto 0;
  text-align: center;
  line-height: 1.75;
}

/* Native illustrated storefront and search route. */
.mini-store,
.mini-search-window {
  background: #fff;
  border: 1px solid #dedfd9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 30px #2126220c;
  transform: rotate(-1deg);
  margin-top: 24px;
}
.mini-window-top {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  border-bottom: 1px solid #e9e9e4;
  padding: 0 12px;
  color: #5d5f5a;
  font-size: 9px;
}
.mini-window-top i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b9bcb6;
}
.mini-window-top > span {
  margin-inline: auto;
}
.mini-store-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 13px;
  padding: 22px 17px;
}
.mini-caption {
  font-size: 7px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: #62655e;
  line-height: 1.5;
}
.mini-store-catalog > strong {
  display: block;
  font-size: 25px;
  line-height: 1.06;
  letter-spacing: -0.05em;
  margin: 12px 0 20px;
}
.mini-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mini-product-grid > div {
  background: #f0eafa;
  padding: 15px 6px 10px;
  border-radius: 7px;
  text-align: center;
}
.mini-product-grid > div:last-child {
  background: #f4f7df;
}
.mini-product-grid > div > span {
  display: block;
  font-size: 8px;
  color: #4a4a44;
  line-height: 1.5;
  margin-top: 12px;
}
.mini-product-object {
  display: block;
  margin: auto;
  width: 34px;
  height: 48px;
  border-radius: 10px 10px 13px 13px;
  background: #8464dc;
  box-shadow: inset -7px -5px #0000000b;
  transform: rotate(-6deg);
}
.mini-object-coral {
  background: #d0ef4d;
  transform: rotate(7deg);
}
.mini-order {
  padding: 13px;
  background: #f5f2fa;
  border-radius: 8px;
}
.mini-order > strong {
  display: block;
  font-size: 17px;
  letter-spacing: -0.035em;
  margin-top: 7px;
}
.mini-order-line {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-block: 18px;
  font-size: 9px;
  line-height: 1.6;
}
.mini-order-line .mini-product-object {
  width: 22px;
  height: 30px;
  margin: 0;
  border-radius: 6px;
  flex: none;
}
.mini-order-line small {
  font-size: 8px;
  color: #60645b;
}
.mini-order-check {
  display: block;
  font-size: 8px;
  color: #536329;
  border-top: 1px solid #dddfd8;
  padding-block: 9px;
}
.mini-blue-action {
  display: block;
  background: #684dcc;
  color: #fff;
  padding: 10px 7px;
  border-radius: 5px;
  margin-top: 10px;
  font-size: 8px;
  font-weight: 550;
  text-align: center;
}
.mini-query {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  margin: 18px 18px 0;
  padding: 12px;
  border: 1px solid #dadddf;
  border-radius: 6px;
  color: #4b5257;
  font-size: 10px;
}
.mini-query > span {
  font-size: 18px;
  color: #516475;
}
.mini-search-body {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 17px;
  padding: 22px 18px;
}
.mini-result > strong {
  display: block;
  font-size: 23px;
  line-height: 1.14;
  letter-spacing: -0.045em;
  color: #5e42b6;
  margin-top: 12px;
}
.mini-result > p {
  font-size: 10px;
  line-height: 1.65;
  margin-top: 12px;
  color: #555c60;
}
.mini-result-lines {
  display: grid;
  gap: 5px;
  margin-block: 13px;
}
.mini-result-lines i {
  height: 4px;
  border-radius: 3px;
  background: #e2e6e8;
}
.mini-result-lines i:last-child {
  width: 65%;
}
.mini-result-link {
  font-size: 9px;
  color: #5e42b6;
}
.mini-search-pillars {
  display: grid;
  gap: 8px;
}
.mini-search-pillars > span {
  display: grid;
  grid-template-columns: 23px 1fr;
  gap: 3px 5px;
  padding: 12px 8px;
  border-radius: 7px;
  background: #eee7fa;
}
.mini-search-pillars > span:nth-child(2) {
  background: #f4f7df;
}
.mini-search-pillars > span:nth-child(3) {
  background: #efedf5;
}
.mini-search-pillars i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: #fff;
  font-size: 8px;
  font-style: normal;
  border-radius: 50%;
  color: #52594c;
}
.mini-search-pillars b {
  font-size: 10px;
  font-weight: 600;
}
.mini-search-pillars small {
  font-size: 7px;
  color: #5b6258;
}
.is-in-view .mini-store .mini-product-object {
  animation: mini-product-float 5s ease-in-out infinite;
}
.is-in-view .mini-search-pillars > span {
  animation: mini-pillar-pulse 6s ease-in-out infinite;
}
.is-in-view .mini-search-pillars > span:nth-child(2) {
  animation-delay: -2s;
}
.is-in-view .mini-search-pillars > span:nth-child(3) {
  animation-delay: -4s;
}
@keyframes mini-product-float {
  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }
  50% {
    transform: translateY(-5px) rotate(-2deg);
  }
}
@keyframes mini-pillar-pulse {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-3px);
  }
}

html body.refined-v1 .mini-store,
html body.refined-v1 .mini-search-window {
  margin-top: 26px;
  width: 100%;
}
html body.refined-v1 .mini-search-body .mini-result > p {
  font-size: 10px;
  line-height: 1.65;
  margin-top: 12px;
}
html body.refined-v1 .mini-store-body,
html body.refined-v1 .mini-search-body {
  min-height: 240px;
}
@media (max-width: 640px) {
  html body.refined-v1 .icon-heading {
    gap: 11px;
    margin-bottom: 13px;
  }
  html body.refined-v1 .icon-heading > .service-icon {
    width: 21px;
    height: 21px;
    min-width: 21px;
  }
  html body.refined-v1 .mini-store-body {
    padding: 16px 11px;
    gap: 9px;
  }
  html body.refined-v1 .mini-store-catalog > strong {
    font-size: 22px;
  }
  html body.refined-v1 .mini-order {
    padding: 9px;
  }
  html body.refined-v1 .mini-order > strong {
    font-size: 15px;
  }
  html body.refined-v1 .mini-search-body {
    padding: 17px 12px;
    gap: 12px;
  }
  html body.refined-v1 .mini-result > strong {
    font-size: 22px;
  }
  html body.refined-v1 .mini-search-pillars > span {
    padding: 10px 7px;
  }
  html body.refined-v1 .mini-search-pillars b {
    font-size: 9px;
  }
  html body.refined-v1 .mini-search-pillars small {
    font-size: 7px;
  }
  html body.refined-v1 .mini-query {
    margin: 13px 12px 0;
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-in-view .mini-store .mini-product-object,
  .is-in-view .mini-search-pillars > span {
    animation: none;
  }
}
/* Compact profile links and consistent separation before link arrows. */
html body.refined-v1 .person-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
html body.refined-v1 .person-heading > strong {
  margin: 0;
}
html body.refined-v1 .linkedin-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-block: -9px;
  color: #6d50d3;
  border-radius: 8px;
}
html body.refined-v1 .linkedin-profile:hover {
  background: #7554d212;
}
html body.refined-v1 .contact-person .linkedin-profile {
  color: #ded8f3;
}
html body.refined-v1 .contact-person .linkedin-profile:hover {
  background: #ffffff10;
}
html body.refined-v1 .contact-person p > .person-heading {
  color: inherit;
  font-size: inherit;
}
html body.refined-v1 .contact-person p > span:not(.person-heading) {
  margin-top: 7px;
}
html body.refined-v1 .footer-services > a {
  gap: 8px;
  white-space: nowrap;
}
html body.refined-v1 .text-link {
  column-gap: 13px;
}
html body.refined-v1 .inline-service-link {
  column-gap: 8px;
}
html body.refined-v1 .service-card-title {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 21px;
}
html body.refined-v1 .service-card-title h3 {
  margin: 0;
}
html body.refined-v1 .service-card-title .service-symbol {
  flex: none;
  font-size: 22px;
  line-height: 1.5;
  margin-top: 3px;
}
html body.refined-v1 .case-next > p:not(.eyebrow) {
  color: #555b68;
}
html
  body.refined-v1
  .support-format-grid
  article:last-child
  .icon-heading
  > div
  > span {
  color: #d3c9ef;
}
@media (max-width: 640px) {
  html body.refined-v1 .person-heading {
    gap: 4px;
  }
  html body.refined-v1 .contact-person .person-heading > strong {
    font-size: 15px;
  }
  html body.refined-v1 .linkedin-profile {
    min-width: 36px;
    min-height: 36px;
    margin-block: -5px;
  }
  html body.refined-v1 .service-card-title .service-symbol {
    font-size: 20px;
  }
}
/* Small semantic symbols stay beside text; coloured tiles keep their visual weight. */
html body.refined-v1 .diagram-node-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: none;
  vertical-align: middle;
  color: currentColor;
}
html body.refined-v1 .visual-icon-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}
html body.refined-v1 .visual-icon-heading > h3 {
  margin: 0;
}
html body.refined-v1 .visual-icon-heading > .diagram-node-icon {
  color: #7354ce;
}
html body.refined-v1 .visual-network .network-side > span {
  display: flex;
  align-items: center;
  gap: 13px;
}
html body.refined-v1 .network-hub .visual-icon-heading {
  margin-bottom: 13px;
}
html body.refined-v1 .network-hub .visual-icon-heading > .diagram-node-icon {
  color: #fff;
  width: 28px;
  height: 28px;
  min-width: 28px;
}
html body.refined-v1 .network-hub .visual-icon-heading > strong {
  margin: 0;
}
html body.refined-v1 .visual-ai-network .network-hub .visual-icon-heading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  gap: 12px;
  width: 100%;
  margin-bottom: 14px;
}
html
  body.refined-v1
  .visual-ai-network
  .network-hub
  .visual-icon-heading
  > strong {
  text-align: center;
}
@media (max-width: 900px) {
  html body.refined-v1 .visual-ai-network .network-hub {
    width: 100%;
    max-width: 320px;
    min-height: 240px;
  }
}
@media (max-width: 640px) {
  html body.refined-v1 .visual-ai-network .network-hub {
    width: min(280px, 100%);
    max-width: 280px;
    min-height: 220px;
    padding: 24px 18px;
  }
  html body.refined-v1 .visual-ai-network .network-hub .visual-icon-heading {
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    gap: 8px;
    margin-bottom: 12px;
  }
  html
    body.refined-v1
    .visual-ai-network
    .network-hub
    .visual-icon-heading
    > strong {
    font-size: 23px;
    line-height: 1.2;
  }
  html
    body.refined-v1
    .visual-ai-network
    .network-hub
    .visual-icon-heading
    > .diagram-node-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }
  html
    body.refined-v1
    .visual-ai-network
    .network-hub
    > span:not(.network-orbit) {
    font-size: 11px;
  }
}
html body.refined-v1 .visual-page-map > span,
html body.refined-v1 .visual-caption-row > span,
html body.refined-v1 .visual-permissions > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
html body.refined-v1 .visual-caption-row .diagram-node-icon {
  width: 17px;
  height: 17px;
  min-width: 17px;
}
html body.refined-v1 .visual-overline:has(> .diagram-node-icon) {
  display: flex;
  align-items: center;
  gap: 9px;
}
html body.refined-v1 .visual-overline > .diagram-node-icon {
  width: 19px;
  height: 19px;
  min-width: 19px;
}
html body.refined-v1 .visual-feature > .diagram-node-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-right: 8px;
  color: #6b5a9d;
}
html body.refined-v1 .visual-evidence {
  display: flex;
  align-items: center;
  gap: 13px;
}
html body.refined-v1 .visual-search > .diagram-node-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
}
html body.refined-v1 .visual-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
html body.refined-v1 :is(.browser-art, .visual-shapes) > i {
  display: grid;
  place-items: center;
}
html body.refined-v1 .browser-art > i {
  width: 44%;
  max-width: 54px;
  height: auto;
  aspect-ratio: 1;
  top: 14px;
  left: 12%;
  border-radius: 12px;
  transform: rotate(-10deg);
}
html body.refined-v1 .browser-art > i:nth-child(2) {
  width: 42%;
  max-width: 52px;
  top: 58px;
  left: auto;
  right: 10%;
  transform: rotate(12deg);
}
html body.refined-v1 .browser-art > i:nth-child(3) {
  width: 38%;
  max-width: 46px;
  top: auto;
  bottom: 10px;
  left: 10%;
  transform: rotate(-8deg);
}
html body.refined-v1 :is(.browser-art, .visual-shapes) > i > .tile-symbol {
  width: 48%;
  height: 48%;
}
html body.refined-v1 :is(.browser-art, .visual-shapes) > i:first-child {
  color: #fff;
}
html body.refined-v1 :is(.browser-art, .visual-shapes) > i:not(:first-child) {
  color: #383329;
}
html body.refined-v1 .mini-product-object,
html body.refined-v1 .product-shape {
  display: grid;
  place-items: center;
}
html body.refined-v1 .mini-product-object > .tile-symbol,
html body.refined-v1 .product-shape > .tile-symbol {
  width: 76%;
  height: 76%;
  color: #3e345d;
}
html
  body.refined-v1
  .mini-product-object:not(.mini-object-coral)
  > .tile-symbol {
  color: #fff;
}
html body.refined-v1 .phone-feature-panel > .diagram-node-icon {
  margin-right: 8px;
  color: #fff;
}
html body.refined-v1 .phone-example-detail {
  font-size: 12px;
  line-height: 1.75;
  color: #71657f;
  margin-top: 21px;
}
html body.refined-v1 .support-format-grid .support-format-label {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  margin: 0 0 13px;
  color: #625e70;
}
html
  body.refined-v1
  .support-format-grid
  article:last-child
  .support-format-label {
  color: #d3c9ef;
}
html body.refined-v1 .support-format-grid .icon-heading {
  margin-bottom: 13px;
}
html body.refined-v1 .linkedin-profile,
html body.refined-v1 .contact-person .linkedin-profile {
  color: #1e1e22;
}
html body.refined-v1 .contact-person .linkedin-profile > svg {
  box-sizing: content-box;
  background: #f6f6fa;
  border-radius: 3px;
  padding: 2px;
  width: 17px;
  height: 17px;
}
html body.refined-v1 .portrait-sticker .sticker-rocket {
  display: block;
  width: 36px;
  height: 36px;
  margin: 12px auto 0;
}
@media (max-width: 640px) {
  html body.refined-v1 .visual-icon-heading {
    gap: 10px;
    margin-bottom: 13px;
  }
  html body.refined-v1 .visual-network .network-side > span {
    gap: 9px;
  }
  html body.refined-v1 .network-hub .visual-icon-heading > strong {
    font-size: 25px;
  }
  html body.refined-v1 .visual-page-map > span {
    gap: 6px;
  }
  html body.refined-v1 .visual-page-map .diagram-node-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
  }
  html body.refined-v1 .visual-page-map > span {
    font-size: 10px;
  }
  html body.refined-v1 .portrait-sticker .sticker-rocket {
    width: 28px;
    height: 28px;
    margin-top: 9px;
  }
}
/* Align the symbol to the title's actual height instead of a fixed top offset. */
html body.refined-v1 .icon-heading,
html body.refined-v1 .service-card-title {
  align-items: center;
}
html body.refined-v1 .icon-heading > .service-icon,
html body.refined-v1 .service-card-title .service-symbol {
  margin: 0;
}
/* Footer profile mark stays light on the dark contact surface. */
html body.refined-v1 .contact-person .linkedin-profile {
  color: #f2f2f7;
}
html body.refined-v1 .contact-person .linkedin-profile > svg {
  background: transparent;
  padding: 0;
}
/* Product symbols follow the contrast of their actual tile colour. */
html body.refined-v1 .product-shape > .tile-symbol {
  color: #fff;
}
html body.refined-v1 :is(.product-shape-1, .product-shape-2) > .tile-symbol {
  color: #343329;
}
/* Keep the visible profile symbol close to the name with an adequate hit area. */
html body.refined-v1 .person-heading {
  gap: 4px;
}
html body.refined-v1 .linkedin-profile {
  min-width: 24px;
  min-height: 32px;
  margin-block: -3px;
}
html body.refined-v1 .personal-intro .person-heading > strong {
  color: #1e1e22;
}
/* Clean cards without decorative top stripes. */
html body.refined-v1 .buying-steps article,
html body.refined-v1 .buying-steps article:last-child {
  border: 1px solid #ded9e9;
  border-radius: 16px;
}
html body.refined-v1 .service-detail-section {
  padding-block: 34px;
}
html body.refined-v1 .service-detail-section > h2 {
  max-width: 900px;
  margin-top: 16px;
  text-wrap: balance;
}
html body.refined-v1 .service-detail-intro {
  max-width: 76ch;
  font-size: 17px;
  line-height: 1.8;
  color: #5d6572;
  margin-top: 18px;
}
html body.refined-v1 .service-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 21px;
  margin-top: 34px;
}
html body.refined-v1 .service-detail-grid > article {
  background: #fff;
  border: 1px solid #ded9e9;
  border-radius: 16px;
  padding: 26px;
  min-width: 0;
}
html body.refined-v1 .service-detail-title {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}
html body.refined-v1 .service-detail-title > .diagram-node-icon {
  color: #6d50d3;
}
html body.refined-v1 .service-detail-title h3 {
  font-size: 22px;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
html body.refined-v1 .service-detail-grid article > p {
  color: #5d6572;
  font-size: 16px;
  line-height: 1.75;
}
html body.refined-v1 .service-detail-grid ul {
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
html body.refined-v1 .service-detail-grid li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: #424452;
  font-size: 14px;
  line-height: 1.7;
}
html body.refined-v1 .service-detail-grid li::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("assets/check.svg") center / contain no-repeat;
  mask: url("assets/check.svg") center / contain no-repeat;
  font-size: 12px;
  color: #6950bd;
  flex: none;
}
html body.refined-v1 .service-delivery-list {
  margin: 26px 0 0;
  background: #fff;
  border: 1px solid #ded9e9;
  border-radius: 16px;
  padding: 8px 26px;
}
html body.refined-v1 .service-delivery-list > div {
  display: grid;
  grid-template-columns: 1fr 1.618fr;
  gap: 34px;
  padding-block: 21px;
}
html body.refined-v1 .service-delivery-list > div + div {
  border-top: 1px solid #e7e2ee;
}
html body.refined-v1 .service-delivery-list dt {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 650;
}
html body.refined-v1 .service-delivery-list dt > svg {
  color: #6d50d3;
}
html body.refined-v1 .service-delivery-list dd {
  margin: 0;
  color: #5d6572;
  font-size: 16px;
  line-height: 1.8;
}
html body.refined-v1 .service-detail-section + section {
  padding-top: 34px;
}
html body.refined-v1 .phone-diagram .phone-task {
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px;
  white-space: nowrap;
}
html body.refined-v1 .phone-diagram .phone-task > .service-icon {
  width: 17px;
  height: 17px;
  min-width: 17px;
}
@media (max-width: 900px) {
  html body.refined-v1 .service-detail-grid {
    grid-template-columns: 1fr;
  }
  html body.refined-v1 .service-detail-grid article {
    padding: 25px;
  }
}
@media (max-width: 640px) {
  html body.refined-v1 .service-detail-section {
    padding-block: 26px;
  }
  html body.refined-v1 .service-detail-intro {
    font-size: 16px;
  }
  html body.refined-v1 .service-detail-grid {
    gap: 16px;
    margin-top: 26px;
  }
  html body.refined-v1 .service-detail-title h3 {
    font-size: 22px;
  }
  html body.refined-v1 .service-delivery-list {
    padding: 4px 21px;
  }
  html body.refined-v1 .service-delivery-list > div {
    display: block;
    padding-block: 18px;
  }
  html body.refined-v1 .service-delivery-list dd {
    margin-top: 10px;
    font-size: 15px;
  }
  html body.refined-v1 .service-delivery-list dt {
    font-size: 17px;
  }
}
html body.refined-v1 .service-reasons {
  background: #eee9f8;
  border: 1px solid #ded5ed;
  border-radius: 18px;
  padding: 30px;
  margin-block: 34px;
}
html body.refined-v1 .service-reasons > h2 {
  font-size: clamp(28px, 2.5vw, 38px);
  line-height: 1.2;
  margin-top: 14px;
}
html body.refined-v1 .service-reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}
html body.refined-v1 .service-reasons-grid > li {
  min-width: 0;
}
html body.refined-v1 .service-reason-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
html body.refined-v1 .service-reason-title > svg {
  color: #6347bd;
}
html body.refined-v1 .service-reason-title h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.025em;
}
html body.refined-v1 .service-reasons-grid p {
  color: #565669;
  font-size: 15px;
  line-height: 1.8;
}
@media (max-width: 900px) {
  html body.refined-v1 .service-reasons-grid {
    grid-template-columns: 1fr;
    gap: 21px;
  }
}
@media (max-width: 640px) {
  html body.refined-v1 .service-reasons {
    padding: 24px;
    margin-block: 26px;
  }
}

html body.refined-v1 :is(.service-detail-link, .ai-detail-link) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html body.refined-v1 .portrait-sticker {
  color: #5d42c4;
}
html body.refined-v1 .process-grid .step-number {
  color: #626a77;
}
html body.refined-v1 .testimonials-section .section-intro {
  color: #5d6572;
}
html body.refined-v1 .recognition :is(.eyebrow, .recognition-item > span) {
  color: #596270;
}
html body.refined-v1 .support-boundary .editorial-heading > .eyebrow {
  color: #514b64;
  font-size: 12px;
  line-height: 1.5;
}
html body.refined-v1 .release-graphic > span {
  color: #664b7c;
  font-size: 12px;
}
html body.refined-v1 .support-boundary > div > p:not(.eyebrow) {
  color: #535b67;
}
html body.refined-v1 .seo-pillar-list article > span {
  color: #705c82;
}

/* Thumb-sized targets without enlarging the visible icons or covering the page. */
@media (max-width: 640px) {
  html:has(body.refined-v1) {
    scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  html:has(body.refined-v1 .mobile-menu:not([hidden])) {
    overflow: hidden;
  }
  html body.refined-v1 .mobile-menu {
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  html body.refined-v1 :is(.motion-pending, .motion-visible) {
    opacity: 1;
    transform: none;
    animation: none;
  }
  html body.refined-v1 .brand {
    min-height: 44px;
    align-items: center;
  }
  html body.refined-v1 .mobile-contact {
    left: auto;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
    min-width: 148px;
    min-height: 48px;
    height: auto;
    padding: 11px 18px;
    gap: 18px;
  }
  html body.refined-v1 .floating-contact-label::after {
    content: none;
  }
  html body.refined-v1 .mobile-contact > .floating-contact-arrow {
    font-size: 26px;
    line-height: 1;
  }
  html body.refined-v1 .service-page-guide {
    gap: 4px 10px;
  }
  html body.refined-v1 .service-page-guide a {
    min-height: 44px;
    padding-inline: 6px;
    font-size: 13px;
  }
  html
    body.refined-v1
    :is(.inline-service-link, .service-detail-link, .ai-detail-link) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  html body.refined-v1 :is(.filter, .filter-link) {
    min-height: 44px;
  }
  html body.refined-v1 :is(.project-info h3, .archive-card-info h2) a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  html body.refined-v1 .linkedin-profile {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    justify-content: flex-start;
    margin-block: -6px;
  }
  html body.refined-v1 .site-footer :is(a, button) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  html body.refined-v1 .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }
  html body.refined-v1 .recognition .eyebrow {
    font-size: 10px;
  }
  html body.refined-v1 .recognition-item > span {
    font-size: 11px;
    line-height: 1.6;
  }
  html body.refined-v1 main button {
    min-width: 44px;
    min-height: 44px;
  }
  html body.refined-v1 .visual-action {
    min-height: 44px;
  }
  html body.refined-v1 .network-hub .visual-icon-heading {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    gap: 8px;
    width: 100%;
  }
  html body.refined-v1 .network-hub .visual-icon-heading > strong {
    text-align: center;
  }
  html body.refined-v1 .network-hub .visual-icon-heading > .diagram-node-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }
  html body.refined-v1 .service-benefit {
    line-height: 1.4;
  }
  html body.refined-v1 .page-lead {
    line-height: 1.7;
  }
}

/* Service infographics explain the work instead of imitating client interfaces. */
html body.refined-v1 .service-blueprint {
  padding: 26px;
  border: 1px solid #e1dbea;
  border-radius: 28px;
  background: radial-gradient(ellipse at top left, #e8e1f5, #f0edf6 65%);
  color: #28252f;
}
html body.refined-v1 .service-blueprint :is(h3, p, ul) {
  margin: 0;
}
html body.refined-v1 .bp-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
  color: #6849bc;
}
html body.refined-v1 .bp-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5d536d;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
html body.refined-v1 .bp-split {
  display: grid;
  grid-template-columns: 0.9fr 1.5fr;
  gap: 22px;
}
html body.refined-v1 .bp-grid {
  display: grid;
  gap: 18px;
}
html body.refined-v1 .bp-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html body.refined-v1 .bp-node {
  position: relative;
  min-width: 0;
  padding: 26px;
  border: 1px solid #e0d9e9;
  border-radius: 20px;
  background: #fff;
}
html body.refined-v1 .bp-node-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
html body.refined-v1 .bp-node-heading .bp-icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
}
html body.refined-v1 .bp-node h3 {
  min-width: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.035em;
}
html body.refined-v1 .bp-node > p {
  margin-top: 15px;
  color: #625b70;
  font-size: 14px;
  line-height: 1.7;
}
html body.refined-v1 .bp-index {
  display: block;
  width: fit-content;
  margin-bottom: 22px;
  color: #756881;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
html body.refined-v1 .bp-node > ul {
  display: grid;
  gap: 9px;
  padding: 17px 0 0;
  list-style: none;
  color: #4f485f;
  font-size: 13px;
  line-height: 1.6;
}
html body.refined-v1 .bp-node > ul li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
html body.refined-v1 .bp-node > ul li::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: #7959ca;
}
html body.refined-v1 .bp-focus {
  min-width: 0;
  padding: 32px;
  border-radius: 22px;
  background: #6849bc;
  color: #fff;
}
html body.refined-v1 .bp-focus .bp-label,
html body.refined-v1 .bp-focus .bp-icon {
  color: #fff;
}
html body.refined-v1 .bp-focus h3 {
  margin-top: 28px;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.045em;
}
html body.refined-v1 .bp-focus > p:not(.bp-label) {
  margin-top: 20px;
  color: #f0eafb;
  font-size: 14px;
  line-height: 1.75;
}
html body.refined-v1 .bp-checks {
  display: grid;
  gap: 15px;
  padding: 26px 0 0;
  list-style: none;
}
html body.refined-v1 .bp-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
}
html body.refined-v1 .bp-checks .bp-icon {
  width: 20px;
  height: 20px;
  color: #e3f64d;
}
html body.refined-v1 .bp-summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 22px;
  padding: 22px 26px;
  border-radius: 18px;
  background: #e3f64d;
}
html body.refined-v1 .bp-summary > .bp-icon {
  color: #373f19;
}
html body.refined-v1 .bp-summary p {
  display: grid;
  gap: 6px;
  font-size: 14px;
  line-height: 1.65;
}
html body.refined-v1 .bp-summary strong {
  color: #282f10;
  font-size: 16px;
  font-weight: 650;
}
html body.refined-v1 .bp-summary span {
  color: #424a21;
}
html body.refined-v1 .bp-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}
html body.refined-v1 .bp-connector {
  display: grid;
  place-items: center;
  color: #6849bc;
  font-size: 22px;
}
html body.refined-v1 .bp-integration-rail {
  margin-top: 22px;
  padding: 22px 26px;
  border-radius: 18px;
  background: #e4def0;
}
html body.refined-v1 .bp-integration-rail ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding: 18px 0 0;
  list-style: none;
}
html body.refined-v1 .bp-integration-rail li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #494153;
  font-size: 14px;
  line-height: 1.5;
}
html body.refined-v1 .bp-platforms {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
html body.refined-v1 .bp-platforms > span:not(.bp-platform-note) {
  padding: 8px 15px;
  border-radius: 30px;
  background: #fff;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
}
html body.refined-v1 .bp-platform-note {
  margin-left: auto;
  color: #62586f;
  font-size: 12px;
  line-height: 1.6;
}
html body.refined-v1 .bp-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
html body.refined-v1 .bp-pair .bp-node {
  background: #f8f6fc;
}
html body.refined-v1 .bp-stack {
  display: grid;
  gap: 16px;
}
html body.refined-v1 .bp-stack .bp-node {
  padding-left: 68px;
}
html body.refined-v1 .bp-stack .bp-index {
  position: absolute;
  top: 30px;
  left: 24px;
  margin: 0;
}
html body.refined-v1 .bp-split--seo {
  grid-template-columns: 1.3fr 1fr;
}
html body.refined-v1 .bp-network {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.13fr 1fr;
  gap: 22px;
  align-items: stretch;
}
html body.refined-v1 .bp-network > * {
  position: relative;
}
html body.refined-v1 .bp-network-side {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}
html body.refined-v1 .bp-network-side > .bp-label {
  padding-inline: 6px;
}
html body.refined-v1 .bp-network .bp-focus {
  padding: 28px;
}
html body.refined-v1 .bp-network .bp-focus h3 {
  font-size: 30px;
}
@media (min-width: 1001px) {
  html body.refined-v1 .bp-network-side {
    grid-template-rows: auto repeat(2, minmax(auto, 1fr));
    align-content: stretch;
  }
}
@media (max-width: 1000px) {
  html body.refined-v1 .bp-split {
    grid-template-columns: 1fr;
  }
  html body.refined-v1 .bp-network {
    grid-template-columns: 1fr;
  }
  html body.refined-v1 .bp-network-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html body.refined-v1 .bp-network-side > .bp-label {
    grid-column: 1 / -1;
    width: fit-content;
    background: #ede8f5;
  }
}
@media (max-width: 800px) {
  html body.refined-v1 .bp-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  html body.refined-v1 .bp-connector {
    height: 25px;
    font-size: 23px;
    transform: rotate(90deg);
  }
  html body.refined-v1 .bp-index {
    margin-bottom: 16px;
  }
}
@media (max-width: 640px) {
  html body.refined-v1 .service-blueprint {
    padding: 16px;
    border-radius: 22px;
  }
  html body.refined-v1 .bp-grid--two,
  html body.refined-v1 .bp-pair,
  html body.refined-v1 .bp-network-side {
    grid-template-columns: minmax(0, 1fr);
  }
  html body.refined-v1 .bp-grid,
  html body.refined-v1 .bp-split,
  html body.refined-v1 .bp-network,
  html body.refined-v1 .bp-network-side {
    gap: 16px;
  }
  html body.refined-v1 .bp-node {
    padding: 22px;
    border-radius: 16px;
  }
  html body.refined-v1 .bp-node-heading {
    gap: 10px;
  }
  html body.refined-v1 .bp-node h3 {
    font-size: 19px;
  }
  html body.refined-v1 .bp-node > p {
    margin-top: 12px;
  }
  html body.refined-v1 .bp-focus,
  html body.refined-v1 .bp-network .bp-focus {
    padding: 25px;
    border-radius: 18px;
  }
  html body.refined-v1 .bp-focus h3,
  html body.refined-v1 .bp-network .bp-focus h3 {
    margin-top: 22px;
    font-size: 28px;
  }
  html body.refined-v1 .bp-focus > p:not(.bp-label) {
    margin-top: 16px;
  }
  html body.refined-v1 .bp-checks {
    padding-top: 22px;
  }
  html body.refined-v1 .bp-summary,
  html body.refined-v1 .bp-integration-rail {
    padding: 20px;
    margin-top: 16px;
    border-radius: 16px;
  }
  html body.refined-v1 .bp-platforms {
    gap: 10px;
    margin-bottom: 16px;
  }
  html body.refined-v1 .bp-platforms > .bp-label {
    width: 100%;
  }
  html body.refined-v1 .bp-platform-note {
    width: 100%;
    margin: 0;
  }
  html body.refined-v1 .bp-pair {
    gap: 16px;
    margin-top: 16px;
  }
  html body.refined-v1 .bp-stack .bp-node {
    padding-left: 22px;
  }
  html body.refined-v1 .bp-stack .bp-index {
    position: static;
    margin-bottom: 16px;
  }
  html body.refined-v1 .bp-integration-rail ul {
    display: grid;
    gap: 15px;
  }
}

/* Use the golden ratio where text and illustration widths remain readable. */
@media (min-width: 1280px) {
  html body.refined-v1 .service-hero-grid {
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  }
  html body.refined-v1 .contact-grid {
    grid-template-columns: minmax(400px, 1fr) minmax(0, 1.618fr);
  }
}

/* Make the personal delivery model explicit without crowding the first screen. */
html body.refined-v1 .page-author > strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
html body.refined-v1 .page-author > span {
  display: block;
  margin-top: 3px;
}
html body.refined-v1 .hero-note {
  color: #535b67;
  font-size: 13px;
}

/* Keep section links visible, with comfortable mobile tap targets. */
html body.refined-v1 .dialog-toolbar {
  display: contents;
}
html body.refined-v1 .case-dialog {
  overscroll-behavior: contain;
}
@media (max-width: 640px) {
  html body.refined-v1 .service-page-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
    padding-block: 12px;
  }
  html body.refined-v1 .service-page-guide a {
    min-width: 0;
    padding: 8px 6px;
    line-height: 1.5;
  }
  html body.refined-v1:has(#mobile-menu:not([hidden])) .mobile-contact {
    visibility: hidden;
    pointer-events: none;
  }
  html body.refined-v1 .bp-index {
    display: none;
  }
}

/* Keep the close control in view while project details scroll on small screens. */
@media (max-width: 640px), (max-height: 600px) {
  html body.refined-v1 .case-dialog {
    max-height: calc(100vh - 24px);
    max-height: calc(
      100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
    );
  }
  html body.refined-v1 .dialog-toolbar {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 56px;
    padding: 6px 12px;
    border-bottom: 1px solid #dedbe9;
    background: var(--paper);
  }
  html body.refined-v1 .dialog-toolbar .dialog-close {
    position: static;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }
}

/* One consistent type size and tap target throughout mobile navigation. */
@media (max-width: 640px) {
  html body.refined-v1 .mobile-menu > a,
  html body.refined-v1 .mobile-menu .nav-services > summary,
  html body.refined-v1 .mobile-menu .services-dropdown > a {
    box-sizing: border-box;
    min-height: 56px;
    height: 56px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    padding-block: 12px;
    align-items: center;
  }
  html body.refined-v1 .mobile-menu .nav-services > summary {
    display: flex;
    justify-content: space-between;
  }
  html body.refined-v1 .mobile-menu .service-menu-copy strong {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
  }
  html body.refined-v1 .mobile-menu .service-menu-copy > span {
    display: none;
  }
  html body.refined-v1 .mobile-menu .service-menu-icon {
    margin-top: 0;
  }
}

.projects-swipe-hint {
  display: none;
}
@media (max-width: 640px) {
  html body.refined-v1 #work .projects-swipe-hint {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: -10px 0 16px;
    color: #656675;
    font-size: 12px;
  }
  html body.refined-v1 #work .projects-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    align-items: start;
    padding: 0 0 18px;
    scrollbar-width: thin;
    scrollbar-color: #b8accd #ebe6f3;
  }
  html body.refined-v1 #work .project-card {
    flex: 0 0 calc(100% - 40px);
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  html body.refined-v1 #work .project-visual {
    height: clamp(220px, 70vw, 300px);
  }
  html body.refined-v1 #work .projects-grid:focus-visible {
    outline: 2px solid #7050c9;
    outline-offset: 5px;
  }
}

/* The scope stays fully readable on desktop; mobile readers open each detail. */
html body.refined-v1 .mobile-delivery > .delivery-item {
  display: flow-root;
  padding-block: 21px;
}
html body.refined-v1 .delivery-item + .delivery-item {
  border-top: 1px solid #e7e2ee;
}
html body.refined-v1 .delivery-item > summary {
  float: left;
  width: 36%;
  display: flex;
  align-items: center;
  gap: 13px;
  list-style: none;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 650;
}
html body.refined-v1 .delivery-item > summary::-webkit-details-marker {
  display: none;
}
html body.refined-v1 .delivery-item > summary > svg:not(.delivery-chevron) {
  color: #6d50d3;
}
html body.refined-v1 .delivery-description {
  margin-left: 41%;
  color: #5d6572;
  font-size: 16px;
  line-height: 1.8;
}
html body.refined-v1 .delivery-chevron,
.mobile-swipe-hint {
  display: none;
}
@media (max-width: 640px) {
  /* One contained native swipe surface, with a visible preview of the next card. */
  html body.refined-v1 .mobile-swipe-track {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    align-items: stretch;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 14px;
    margin-top: 0;
    scrollbar-width: thin;
    scrollbar-color: #b8accd #ebe6f3;
  }
  html body.refined-v1 .mobile-swipe-track > :not(.bp-connector) {
    flex: 0 0 calc(100% - 32px);
    width: calc(100% - 32px);
    min-width: 0;
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  html body.refined-v1 .mobile-swipe-track > .bp-connector {
    display: none;
  }
  html body.refined-v1 .mobile-swipe-track:focus-visible {
    outline: 2px solid #7050c9;
    outline-offset: 4px;
  }
  html body.refined-v1 .mobile-swipe-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #656675;
  }
  html body.refined-v1 .mobile-swipe-hint > svg {
    flex: none;
    width: 20px;
    height: 20px;
  }
  html body.refined-v1 .services-section .mobile-swipe-hint {
    color: #cac5d6;
  }
  html body.refined-v1 .mobile-swipe-track > article,
  html body.refined-v1 .service-reasons-grid > li {
    padding: 18px;
    border-radius: 16px;
  }
  html body.refined-v1 .service-reasons-grid > li {
    background: #ffffffa8;
  }
  html body.refined-v1 .mobile-swipe-track h3 {
    font-size: 20px;
    line-height: 1.25;
    text-wrap: pretty;
  }
  html body.refined-v1 .mobile-swipe-track p {
    font-size: 15px;
    line-height: 1.6;
  }
  html body.refined-v1 .mobile-swipe-track .icon-heading {
    gap: 10px;
    margin-bottom: 12px;
  }
  html body.refined-v1 .mobile-swipe-track .icon-heading h3 {
    margin: 0;
  }
  html body.refined-v1 .service-detail-title {
    gap: 10px;
    margin-bottom: 12px;
  }
  html body.refined-v1 .service-detail-grid ul {
    margin-top: 12px;
    gap: 6px;
  }
  html body.refined-v1 .service-detail-grid li {
    line-height: 1.55;
  }
  html body.refined-v1 .service-card-title {
    gap: 10px;
    margin-bottom: 14px;
  }
  html body.refined-v1 .service-card h3 {
    font-size: 24px;
    line-height: 1.2;
  }
  html body.refined-v1 .service-card .service-list {
    margin: 14px 0 10px;
  }
  html body.refined-v1 .service-list > li {
    padding-block: 8px;
    min-height: 44px;
    font-size: 14px;
    line-height: 1.5;
  }
  html body.refined-v1 .service-list a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  html body.refined-v1 .service-list > li:has(a) {
    padding-block: 0;
  }
  html body.refined-v1 .service-card .service-detail-link {
    min-height: 44px;
    margin-top: 4px;
  }
  html body.refined-v1 .service-card .service-link {
    display: none;
  }
  html body.refined-v1 .ai-panel {
    padding: 20px;
    gap: 20px;
  }
  html body.refined-v1 .ai-offerings > article {
    background: #ffffff9c;
    border: 1px solid #dcd4ed;
    padding: 18px;
  }
  html body.refined-v1 .ai-offerings article > span {
    margin-bottom: 12px;
  }
  html body.refined-v1 .ai-offerings h3 {
    margin-top: 0;
  }
  html body.refined-v1 .process-grid .step-number {
    padding-bottom: 10px;
    margin-bottom: 14px;
  }
  html body.refined-v1 .process-grid > article {
    background: #fff;
    border: 1px solid #e1dbea;
  }
  html body.refined-v1 .process-grid p {
    margin-top: 10px;
  }
  html body.refined-v1 .audience-fork h3,
  html body.refined-v1 .support-format-grid h3,
  html body.refined-v1 .scope-grid h3 {
    margin: 12px 0;
  }
  html body.refined-v1 .seo-pillar-list article {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
  }
  html body.refined-v1 .seo-pillar-list article > span {
    display: none;
  }
  html body.refined-v1 .seo-pillar-list article > .service-icon {
    grid-column: 1;
  }
  html body.refined-v1 .seo-pillar-list article > div {
    grid-column: 2;
  }
  html body.refined-v1 .service-blueprint {
    padding: 14px;
    border-radius: 18px;
  }
  html body.refined-v1 .bp-node,
  html body.refined-v1 .bp-stack .bp-node,
  html body.refined-v1 .bp-pair .bp-node {
    padding: 16px;
  }
  html body.refined-v1 .bp-node > p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.6;
  }
  html body.refined-v1 .bp-focus,
  html body.refined-v1 .bp-network .bp-focus {
    padding: 20px;
  }
  html body.refined-v1 .bp-focus h3,
  html body.refined-v1 .bp-network .bp-focus h3 {
    font-size: 24px;
    margin-top: 14px;
  }
  html body.refined-v1 .bp-focus > p:not(.bp-label) {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.6;
  }
  html body.refined-v1 .bp-checks {
    padding-top: 14px;
    gap: 10px;
  }
  html body.refined-v1 .bp-network-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
  }
  html body.refined-v1 .bp-summary,
  html body.refined-v1 .bp-integration-rail {
    padding: 16px;
  }
  html body.refined-v1 .bp-summary strong {
    font-size: 16px;
  }
  html body.refined-v1 .bp-summary span {
    font-size: 14px;
    line-height: 1.6;
  }
  html body.refined-v1 .mobile-delivery {
    padding: 0 16px;
  }
  html body.refined-v1 .mobile-delivery > .delivery-item {
    padding: 0;
  }
  html body.refined-v1 .delivery-item > summary {
    float: none;
    width: 100%;
    min-height: 60px;
    padding-block: 14px;
    gap: 10px;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
  }
  html body.refined-v1 .delivery-item > summary > span {
    flex: 1;
    min-width: 0;
  }
  html body.refined-v1 .delivery-item .delivery-chevron {
    display: block;
    width: 18px;
    height: 18px;
    flex: none;
    transition: transform 150ms;
  }
  html body.refined-v1 .delivery-item[open] .delivery-chevron {
    transform: rotate(180deg);
  }
  html body.refined-v1 .delivery-description {
    margin: -2px 0 0;
    padding-bottom: 16px;
    font-size: 15px;
    line-height: 1.6;
  }
  /* A shorter form without reducing input text below iOS's zoom threshold. */
  html body.refined-v1 .contact-form {
    padding: 20px 18px;
    border-radius: 16px;
  }
  html body.refined-v1 .contact-form h3 {
    font-size: 22px;
    line-height: 1.25;
  }
  html body.refined-v1 .contact-form .form-intro {
    margin: 10px 0 18px;
    font-size: 14px;
    line-height: 1.6;
  }
  html body.refined-v1 .form-row {
    gap: 14px;
  }
  html body.refined-v1 .contact-form .field > label {
    margin-bottom: 6px;
    line-height: 1.4;
  }
  html body.refined-v1 .service-select-field {
    margin: 14px 0;
  }
  html body.refined-v1 .contact-form :is(input, select, textarea) {
    font-size: 16px;
    line-height: 1.5;
    padding: 11px 12px;
  }
  html body.refined-v1 .contact-form :is(input, select) {
    height: 48px;
    min-height: 48px;
  }
  html body.refined-v1 .contact-form select {
    padding-right: 46px;
    background-position: right 16px center;
  }
  html body.refined-v1 .contact-form textarea {
    display: block;
    height: 96px;
    min-height: 96px;
    resize: vertical;
  }
  html body.refined-v1 .contact-form .submit-button {
    min-height: 48px;
    margin-top: 16px;
    font-size: 15px;
    padding: 12px 16px;
  }
  html body.refined-v1 .contact-form .form-note {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.6;
  }
  html body.refined-v1 .contact-copy h2 {
    font-size: 32px;
    line-height: 1.15;
  }
  html body.refined-v1 .contact-copy h2 br {
    display: none;
  }
  html body.refined-v1 .contact-copy > p {
    font-size: 15px;
    line-height: 1.65;
    margin-top: 16px;
  }
  html body.refined-v1 .contact-copy > .email-link {
    display: none;
  }
  html body.refined-v1 .contact-person {
    margin-top: 18px;
  }
  html body.refined-v1 .mobile-extra {
    margin-top: 16px;
    border-top: 1px solid #ffffff25;
    border-bottom: 1px solid #ffffff25;
  }
  html body.refined-v1 .mobile-extra > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding-block: 10px;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
  }
  html body.refined-v1 .mobile-extra > summary::-webkit-details-marker {
    display: none;
  }
  html body.refined-v1 .mobile-extra summary svg {
    width: 18px;
    height: 18px;
  }
  html body.refined-v1 .mobile-extra[open] summary svg {
    transform: rotate(180deg);
  }
  html body.refined-v1 .mobile-extra .enquiry-next {
    margin: 10px 0 16px;
  }
  html body.refined-v1.content-page main h2 {
    font-size: 28px;
    line-height: 1.2;
  }
  html body.refined-v1 .service-detail-intro {
    line-height: 1.65;
    margin-top: 14px;
  }
  html body.refined-v1 .service-nudge {
    padding: 20px;
    gap: 16px;
  }
  html body.refined-v1 .service-nudge p {
    font-size: 15px;
    line-height: 1.6;
  }
}
@media (min-width: 641px) {
  .mobile-extra > summary,
  .mobile-hero-preview > summary {
    display: none;
  }
}

html body.refined-v1 .mobile-hero-preview {
  min-width: 0;
  width: 100%;
  align-self: center;
}
@media (max-width: 640px) {
  html body.refined-v1 .service-hero-grid {
    gap: 20px;
  }
  html body.refined-v1 .service-benefit {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  html body.refined-v1 .page-lead {
    font-size: 15px;
    line-height: 1.65;
  }
  html body.refined-v1 .mobile-hero-preview > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid #dcd5e9;
    border-radius: 12px;
    background: #eee9f8;
    font-size: 14px;
    list-style: none;
    cursor: pointer;
  }
  html body.refined-v1 .mobile-hero-preview > summary::-webkit-details-marker {
    display: none;
  }
  html body.refined-v1 .mobile-hero-preview summary svg {
    width: 18px;
    height: 18px;
    flex: none;
  }
  html body.refined-v1 .mobile-hero-preview[open] summary {
    margin-bottom: 14px;
  }
  html body.refined-v1 .mobile-hero-preview[open] summary svg {
    transform: rotate(180deg);
  }
  html body.refined-v1 :is(.web-brief, .mcp-explainer) p:not(.eyebrow),
  html body.refined-v1 :is(.commerce-operations, .mobile-release, .seo-roadmap, .ai-adoption, .mcp-boundaries, .support-boundary) > div > p {
    font-size: 15px;
    line-height: 1.65;
  }
  html body.refined-v1 :is(.commerce-operations, .support-boundary) aside,
  html body.refined-v1 .ai-guardrails,
  html body.refined-v1 .seo-measurement {
    padding: 20px;
  }
  html body.refined-v1 .release-checklist li {
    padding-block: 6px;
    font-size: 14px;
    line-height: 1.5;
  }
  html body.refined-v1 .release-graphic {
    padding: 18px;
    gap: 14px;
  }
  html body.refined-v1 .release-graphic > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
  }
  html body.refined-v1 .release-graphic b {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 6px;
    min-width: 0;
    min-height: 64px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
  }
  html body.refined-v1 .release-graphic i {
    display: none;
  }
  html body.refined-v1 .release-graphic > strong {
    font-size: 15px;
    line-height: 1.4;
  }
  html body.refined-v1 .mobile-step-track {
    border: 0;
    list-style: none;
    padding-left: 0;
  }
  html body.refined-v1 .mobile-step-track > li {
    padding: 18px;
    border: 1px solid #e0d9e9;
    border-radius: 16px;
    background: #fff;
  }
  html body.refined-v1 .mobile-step-track > li::before {
    display: none;
  }
  html body.refined-v1 .mobile-step-track h3 {
    margin: 12px 0;
  }
  html body.refined-v1 .seo-measurement .mobile-swipe-track > article {
    border: 1px solid #d8cfe8;
    background: #ffffffb0;
  }
  html body.refined-v1 .service-delivery-section > .service-detail-intro {
    display: none;
  }
  html body.refined-v1 .service-delivery-section .mobile-delivery {
    margin-top: 20px;
  }
  html body.refined-v1 .bp-integration-rail ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  html body.refined-v1 .bp-integration-rail li {
    font-size: 13px;
    line-height: 1.5;
    gap: 6px;
  }
  html body.refined-v1 .service-faq {
    padding-block: 30px;
    gap: 18px;
  }
  html body.refined-v1 .faq-list summary {
    font-size: 15px;
    line-height: 1.5;
    padding-block: 16px;
  }
  html body.refined-v1 .faq-list details > p {
    font-size: 15px;
    line-height: 1.65;
    padding-bottom: 16px;
  }
  html body.refined-v1 .section-space {
    padding-block: 42px;
  }
  /* A browsable catalogue stays a compact grid instead of a 95-item carousel. */
  html body.refined-v1 .archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }
  html body.refined-v1 .archive-visual {
    aspect-ratio: 1.2;
    height: auto;
    border-radius: 12px;
  }
  html body.refined-v1 .archive-card-info {
    display: block;
    padding: 10px 0 0;
  }
  html body.refined-v1 .archive-card-info h2 {
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
  }
  html body.refined-v1 .archive-card-info h2 a {
    min-height: 0;
  }
  html body.refined-v1 .archive-details {
    justify-content: flex-start;
    min-height: 44px;
    margin: 0;
    font-size: 12px;
    gap: 6px;
  }
  html body.refined-v1 .archive-open {
    width: 30px;
    height: 30px;
    right: 8px;
    bottom: 8px;
    font-size: 16px;
  }
}