:root {
  /* Brand palette: edit these three values to retheme the website. */
  --color-primary: #fe9a20;
  --color-secondary: #fe9a20;
  --color-accent: #fe8d03;
  --color-primary-dark: #e97900;
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 12%, white);
  --color-secondary-soft: color-mix(in srgb, var(--color-secondary) 12%, white);
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 12%, white);
  --color-gradient: linear-gradient(135deg, var(--color-accent), var(--color-primary));

  /* Semantic interface colors */
  --color-dark: #17191e;
  --color-text: #151515;
  --color-text-muted: #6f6b67;
  --color-surface: #ffffff;
  --color-surface-soft: #fffaf6;
  --color-surface-muted: #f7f8fb;
  --color-border: #ece6e0;
  --color-on-brand: #ffffff;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #d4d0cb;
  --color-shadow: rgba(46, 33, 17, .08);

  /* Global typography */
  --font-body: "DM Sans", Arial, sans-serif;
  --font-heading: Manrope, "DM Sans", Arial, sans-serif;
  --text-h1: clamp(2.5rem, 5vw, 3rem);
  --text-h2: clamp(2rem, 3.5vw, 2.75rem);
  --text-h3: 1.25rem;
  --text-h4: 1.125rem;
  --text-h5: 1rem;
  --text-h6: .875rem;
  --text-body: 1rem;
  --text-button: .875rem;
  --radius: 12px;
  --shadow: 0 16px 36px var(--color-shadow)
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  background: var(--color-surface);
  overflow-x: hidden
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0 .6em;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance
}

h1 {
  font-size: var(--text-h1);
  letter-spacing: -.045em
}

h2 {
  font-size: var(--text-h2);
  letter-spacing: -.035em
}

h3 {
  font-size: var(--text-h3);
  letter-spacing: -.025em
}

h4 {
  font-size: var(--text-h4);
  letter-spacing: -.015em
}

h5 {
  font-size: var(--text-h5)
}

h6 {
  font-size: var(--text-h6)
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit
}

p {
  margin-block: 0 1em;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-text-muted)
}

.text-primary {
  color: var(--color-primary)
}

.text-secondary {
  color: var(--color-secondary)
}

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

.bg-primary {
  background: var(--color-primary)
}

.bg-secondary {
  background: var(--color-secondary)
}

.bg-accent {
  background: var(--color-accent)
}

.bg-gradient {
  background: var(--color-gradient)
}

.container {
  width: min(1190px, calc(100% - 48px));
  margin-inline: auto
}

.section-pad {
  padding: 92px 0
}

.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 3px;
  background: transparent
}

.page-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-accent);
  transition: width .08s linear
}

.site-header {
  height: 78px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .91);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid transparent;
  transition: .3s
}

.site-header.scrolled {
  box-shadow: 0 4px 25px rgba(29, 25, 20, .06);
  border-color: var(--color-border)
}

.nav-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 20px;
  letter-spacing: -1px
}

.brand strong span {
  color: var(--color-accent)
}

.main-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 27px
}

.main-nav a,
.login-link {
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  transition: color .2s
}

.main-nav a:hover,
.login-link:hover {
  color: var(--color-accent)
}

.has-caret:after {
  content: "⌄";
  font-size: 11px;
  margin-left: 3px
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 14px
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  background: var(--color-accent);
  color: var(--color-on-brand);
  text-decoration: none;
  border: 1px solid var(--color-accent);
  font-size: 13px;
  font-weight: 700;
  padding: 14px 19px;
  border-radius: 5px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 16%, transparent);
  transition: transform .25s, box-shadow .25s, background .25s
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px color-mix(in srgb, var(--color-accent) 26%, transparent);
  background: var(--color-primary-dark)
}

.button span {
  font-size: 17px;
  line-height: 0
}

.button-small {
  padding: 11px 15px;
  font-size: 12px
}

.button-ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: none
}

.button-ghost:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: none
}

.wide {
  width: 100%
}

.menu-toggle {
  display: none
}

.hero {
  padding-top: 62px;
  padding-bottom: 55px;
  background: linear-gradient(110deg, var(--color-surface) 51%, var(--color-primary-soft))
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.04fr;
  gap: 44px;
  align-items: center
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--color-primary-dark);
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .75px
}

.eyebrow span {
  width: 28px;
  display: inline-block;
  vertical-align: middle;
  border-top: 2px solid currentColor;
  margin-right: 7px
}

.eyebrow.light {
  color: var(--color-accent)
}

.hero h1,
.section-heading h2,
.why-intro h2,
.cta-section h2,
.why-quote h2 {
  letter-spacing: -2.2px;}

.hero h1 {
  margin: 0
}

.hero h1 em,
.why-quote em,
.cta-section h2 em {
  font-style: normal;
  color: var(--color-accent)
}

.hero-text {
  max-width: 518px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 20px 0
}

.hero-actions {
  display: flex;
  gap: 13px;
  margin-bottom: 21px
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--color-text-muted);
  font-size: 11px
}

.avatars {
  display: flex
}

.avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-surface);
  margin-left: -8px
}

.avatars img:first-child {
  margin-left: 0
}

.stars {
  letter-spacing: 2px;
  color: var(--color-accent);
  font-size: 13px
}

.rating-row strong {
  color: var(--color-text)
}

.hero-art {
  height: 430px;
  position: relative
}

.hero-window {
  position: absolute;
  right: 24px;
  top: 10px;
  width: 437px;
  height: 309px;
  border-radius: 5px;
  background: var(--color-surface);
  box-shadow: 0 18px 35px rgba(32, 25, 16, .15);
  padding: 15px;
  z-index: 2
}

.window-top {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-size: 8px
}

.window-top span {
  width: 5px;
  height: 5px;
  background: #ddd6ce;
  border-radius: 50%
}

.window-top b {
  font-weight: 600;
  margin-left: auto
}

.natura-card {
  height: 255px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(110deg, #e5e6d0, #b1c39c);
  padding: 42px 35px
}

.natura-copy {
  position: relative;
  z-index: 1;
  width: 190px
}

.natura-copy small {
  font-size: 7px;
  letter-spacing: 1px
}

.natura-copy h3 {
  margin: 7px 0;
  letter-spacing: -1px
}

.natura-copy p {
  max-width: 120px
}

.natura-bottle {
  position: absolute;
  right: 25px;
  bottom: -3px;
  width: 150px;
  height: 250px
}

.bottle {
  position: absolute;
  right: 34px;
  bottom: 0;
  width: 73px;
  height: 183px;
  border-radius: 14px 14px 8px 8px;
  background: linear-gradient(90deg, #636638, #adb180 43%, #717846);
  box-shadow: inset 11px 0 rgba(255, 255, 255, .1), inset -7px 0 rgba(0, 0, 0, .12)
}

.bottle:after {
  content: "Natura";
  position: absolute;
  top: 68px;
  left: 12px;
  width: 49px;
  height: 45px;
  background: #dddcbf;
  color: #54563d;
  font-size: 10px;
  text-align: center;
  padding-top: 12px;
}

.bottle-cap {
  position: absolute;
  right: 45px;
  bottom: 181px;
  width: 51px;
  height: 43px;
  background: #292c29;
  border-radius: 7px 7px 2px 2px
}

.leaf {
  position: absolute;
  background: #4e7a44;
  border-radius: 100% 0 100% 0;
  transform: rotate(20deg)
}

.leaf-1 {
  width: 83px;
  height: 38px;
  right: 83px;
  top: 30px
}

.leaf-2 {
  width: 98px;
  height: 43px;
  right: 87px;
  top: 78px;
  transform: rotate(-9deg)
}

.leaf-3 {
  width: 61px;
  height: 28px;
  right: 8px;
  top: 10px;
  transform: rotate(102deg)
}

.orange-scribble {
  position: absolute;
  border: 6px solid var(--color-accent);
  border-left: 0;
  border-radius: 50%;
  height: 190px;
  width: 133px;
  opacity: .85
}

.scribble-a {
  right: -6px;
  top: 13px;
  transform: rotate(-8deg)
}

.scribble-b {
  right: 0;
  top: 42px;
  transform: rotate(12deg);
  height: 163px
}

.floating-project {
  position: absolute;
  z-index: 3;
  box-shadow: 0 14px 22px rgba(34, 25, 15, .16);
  overflow: hidden
}

.project-dark {
  left: 30px;
  bottom: 43px;
  width: 150px;
  height: 114px;
  background: radial-gradient(circle at 22% 30%, #61472a 1px, transparent 1px), linear-gradient(145deg, #0d1b21, #253436);
  padding: 23px;
  color: var(--color-accent)
}

.project-dark small {
  font-size: 8px;
  color: #eee
}

.project-dark b {
  display: block;
  font-size: 13px;
  margin-top: 27px;
  letter-spacing: .7px
}

.project-dark i {
  position: absolute;
  top: 31px;
  right: 21px;
  font-style: normal;
  font-size: 23px
}

.project-beer {
  left: 167px;
  bottom: 28px;
  width: 117px;
  height: 137px;
  background: #efddbd;
  padding: 17px 11px;
  color: #2b693c;
  font-size: 10px;
  line-height: 1.1
}

.project-beer span {
  width: 42px;
  height: 62px;
  display: block;
  position: absolute;
  left: 41px;
  bottom: 6px;
  border-radius: 2px 2px 13px 13px;
  background: linear-gradient(#fff1c3 15%, #d88914 16%, #f2b841);
  border: 2px solid #fff6d4
}

.project-coffee {
  right: 5px;
  bottom: 7px;
  width: 149px;
  height: 126px;
  background: linear-gradient(130deg, #d3b589, #7d512a);
  color: #21130a;
  padding: 25px 19px
}

.project-coffee small {
  font-size: 16px;
  letter-spacing: 4px
}

.project-coffee b {
  display: block;
  font-size: 18px;
  letter-spacing: 2px
}

.project-coffee i {
  position: absolute;
  bottom: 14px;
  left: 19px;
  font-size: 6px;
  font-style: normal;
  letter-spacing: 1px
}

.trusted-strip {
  padding: 60px 0 ;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center
}

.trusted-strip p {
  color: var(--color-text-muted);
  margin: 0 0 16px
}

.trusted-strip p strong {
  color: var(--color-text)
}

.logo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  overflow: auto;
  scrollbar-width: none
}

.logo-row::-webkit-scrollbar {
  display: none
}

.logo-row span {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text);
  opacity: .9
}

.logo-row .shopify {
  font-size: 16px
}

.logo-row .canva {
  font-size: 24px
}

.stats-section {
  padding: 26px 0;
  background: #fffcf9
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center
}

.stats-grid article {
  text-align: center;
  border-right: 1px solid var(--color-border);
  padding: 6px 10px
}

.stats-grid article:last-child {
  border: 0
}

.stat-icon {
  color: var(--color-accent);
  font-size: 25px;
  height: 50px
}

.stats-grid strong {
  display: block;
  font-size: 27px;
  letter-spacing: -1px
}

.stats-grid span {
  color: var(--color-text-muted)
}

.section-heading {
  margin-bottom: 34px
}

.section-heading h2,
.why-intro h2 {
  margin: 0;}

.split-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px
}

.text-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  border-radius: 3px;
  transition: .2s
}

.text-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent)
}

.services {
  padding-bottom: 83px
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px
}

.service-card {
  min-height: 120px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 15px 14px;
  background: var(--color-surface);
  transition: transform .28s, box-shadow .28s, border-color .28s
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--color-border)
}

.service-icon {
  height: 27px;
  color: #b8894e;
}

.service-card h3 {
  margin: 6px 0 4px;
  letter-spacing: -.4px
}

.service-card p {
  color: var(--color-text-muted);
  margin: 0
}

.process-section {
  background: radial-gradient(circle at 18% 27%, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 19%), var(--color-dark);
  color: white;
  padding: 46px 0 51px;
  overflow: hidden
}

.process-heading h2 {
  margin: 0
}

.process-steps {
  position: relative;
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px
}

.process-steps:before {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary-dark), var(--color-accent));
  position: absolute;
  left: 9%;
  right: 9%;
  top: 31px
}

.process-item {
  text-align: center;
  position: relative;
  z-index: 1
}

.process-number {
  position: absolute;
  top: 8px;
  left: calc(50% - 31px);
  background: var(--color-accent);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-size: 10px;
  display: grid;
  place-items: center;
  color: var(--color-surface)
}

.process-icon {
  width: 62px;
  height: 62px;
  margin: auto;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 25px;
  border: 5px solid var(--color-accent);
  box-shadow: 0 0 0 8px var(--color-dark)
}

.process-icon img {
  display: block;
  width: 72%;
  height: 72%;
  max-width: 100%;
  object-fit: contain
}

.process-item h3 {
  margin: 15px 0 7px
}

.process-item p {
  color: var(--color-on-dark-muted);
  margin: 0
}

.portfolio {
  padding-top: 76px
}

.section-heading.centered {
  text-align: center
}

.section-heading.centered h2 {
  margin-bottom: 20px
}

.filters {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap
}

.filters button {
  border: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: .2s
}

.filters button.active,
.filters button:hover {
  background: var(--color-accent);
  color: white
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 13px
}

.web-work-card {
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.web-work-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}

.web-work-card:hover > img,
.web-work-card:focus-visible > img {
  transform: scale(1.04);
}

.work-card {
  height: 184px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(37, 25, 15, .1);
  transition: transform .3s, box-shadow .3s
}

.work-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 14px 25px rgba(37, 25, 15, .18)
}

.work-card.hidden {
  display: none
}

.work-art {
  height: 100%;
  position: relative;
  overflow: hidden
}

.crypto {
  background: radial-gradient(circle at 68% 36%, #253e4c 0 1px, transparent 1px), linear-gradient(140deg, #0d2837, #10202c);
  color: #d9a959;
  display: grid;
  place-items: center;
  font-size: 45px
}

.crypto>span {
  position: absolute;
  bottom: 35px;
  color: var(--color-surface);
  font-size: 17px;
  letter-spacing: 3px
}

.crypto>span span {
  color: var(--color-accent)
}

.interior {
  background: linear-gradient(145deg, rgba(7, 14, 15, .3), rgba(255, 255, 255, .05)), url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=700&q=80') center/cover
}

.interior span {
  position: absolute;
  left: 15px;
  top: 17px;
  color: var(--color-surface);
  font-size: 11px;
  line-height: 1.25
}

.interior b {
  font-size: 16px
}

.avora {
  background: #7d988d;
  color: #f7f2e8;
  display: grid;
  place-items: center;
  font-size: 27px;
  letter-spacing: 4px
}

.avora:before,
.avora:after {
  content: "";
  position: absolute;
  background: #ece7dc;
  width: 34px;
  height: 100px;
  bottom: -15px;
  box-shadow: 50px 12px 0 #dbd6ca, -52px 6px 0 #d8d6cc
}

.avora i {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid #d7d8c6
}

.avora b {
  position: absolute;
  bottom: 24px;
  right: 16px;
  font-size: 8px;
  letter-spacing: 1px
}

.burger {
  background: linear-gradient(140deg, #a8371c, #f78f22);
  color: #ffe7af;
  padding: 17px
}

.burger small {
  font-weight: 800;
  font-size: 17px;
  line-height: .85
}

.burger strong {
  display: block;
  margin-top: 7px;
  font-size: 23px;
  line-height: .85
}

.burger>span {
  position: absolute;
  right: 4px;
  bottom: -6px;
  font-size: 92px;
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, .25))
}

.pinkbox {
  background: linear-gradient(120deg, #f6c7ce, #f2d9df)
}

.pinkbox:before {
  content: "";
  position: absolute;
  width: 150px;
  height: 113px;
  left: 25px;
  top: 38px;
  transform: rotate(-14deg);
  background: linear-gradient(145deg, #f9e8eb, #efb2be);
  box-shadow: 0 9px 16px rgba(124, 54, 67, .15)
}

.pinkbox span {
  position: absolute;
  left: 48px;
  top: 73px;
  z-index: 1;
  color: #c9798a;
  font-size: 13px;
  transform: rotate(-14deg);
}

.work-overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 20px 13px 12px;
  background: linear-gradient(transparent, rgba(8, 9, 10, .78));
  color: var(--color-surface);
  transform: translateY(100%);
  transition: .3s
}

.work-card:hover .work-overlay {
  transform: translateY(0)
}

.work-overlay h3 {
  margin: 0;
  color: #f0ddd0;
}

.work-overlay p {
  margin: 2px 0 0;
  color: #f0ddd0
}

.center-action {
  text-align: center;
  margin-top: 25px
}

.why-section {
  padding-top: 57px;
  padding-bottom: 73px
}

.why-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr .9fr;
  gap: 22px;
  align-items: stretch
}

.why-intro {
  grid-column: 1/-1
}

.comparison {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 16px 20px
}

.comparison h3 {
  text-align: center;
  margin: 0 0 11px
}

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

.comparison li {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.8
}

.comparison-muted li:before {
  content: "×";
  font-weight: bold;
  margin-right: 12px;
  color: var(--color-text-muted)
}

.comparison-brand {
  border-color: var(--color-border);
  box-shadow: 0 10px 24px rgba(191, 123, 19, .08)
}

.mini-brand {
  text-align: center;
  font-size: 14px;
  color: var(--color-primary-dark);
  margin-bottom: 11px;
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center
}

.mini-brand .brand-mark {
  transform: scale(.77)
}

.comparison-brand li:before {
  content: "✓";
  font-weight: bold;
  margin-right: 12px;
  color: var(--color-accent)
}

.why-quote {
  padding: 17px 0 0 8px;
  position: relative
}

.why-quote em {
  font-size: 31px;
  letter-spacing: -1px
}

.doodle-arrow {
  font-size: 78px;
  color: var(--color-text);
  transform: rotate(42deg);
  position: absolute;
  bottom: -14px;
  left: 38px
}

.testimonials {
  background: var(--color-surface-soft);
  padding-top: 55px;
  padding-bottom: 68px
}

.testimonial-shell {
  display: flex;
  align-items: center;
  gap: 13px
}

.slider-arrow {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 22px;
  padding: 0 2px;
  cursor: pointer;
  transition: .2s
}

.slider-arrow:hover {
  color: var(--color-accent);
  transform: scale(1.15)
}

.testimonial-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  flex: 1
}

.testimonial {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 17px 18px;
  border-radius: 3px;
  min-height: 169px;
  transition: .3s
}

.testimonial:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow)
}

.testimonial .stars {
  font-size: 12px
}

.testimonial>p {
  margin: 10px 0 16px;
  color: var(--color-text-muted)
}

.person {
  display: flex;
  align-items: center;
  gap: 9px
}

.person img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover
}

.person b {
  display: block;
}

.person span {
  display: block;
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px
}

.pricing-section {
  padding-top: 58px;
  padding-bottom: 70px
}

.billing-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 10px;
  white-space: nowrap
}

.billing-toggle small {
  color: var(--color-accent);
  font-weight: bold
}

.billing-toggle input {
  position: absolute;
  opacity: 0
}

.billing-toggle i {
  display: inline-block;
  width: 35px;
  height: 18px;
  background: var(--color-border);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: .2s
}

.billing-toggle i:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background: var(--color-surface);
  border-radius: 50%;
  transition: .2s
}

.billing-toggle input:checked+i {
  background: var(--color-accent)
}

.billing-toggle input:checked+i:after {
  transform: translateX(17px)
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
  align-items: stretch
}

.pricing-card {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 25px 25px 21px;
  background: var(--color-surface);
  position: relative;
  transition: .3s
}

.pricing-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow)
}

.pricing-card.featured {
  border: 2px solid var(--color-accent);
  box-shadow: 0 9px 28px rgba(250, 151, 0, .12)
}

.popular {
  position: absolute;
  right: -2px;
  top: 14px;
  background: var(--color-accent);
  color: white;
  border-radius: 3px 0 0 3px;
  font-size: 9px;
  font-weight: bold;
  padding: 6px 10px
}

.pricing-card h3 {
  margin: 0 0 3px
}

.pricing-card>p {
  color: var(--color-text-muted);
  margin: 0
}

.price {
  margin: 13px 0 11px;
  display: flex;
  align-items: baseline
}

.price span {
  font-size: 20px;
  font-weight: bold
}

.price strong {
  font-size: 37px;
  letter-spacing: -2px
}

.price em {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: 11px;
  margin-left: 4px
}

.pricing-card ul {
  margin: 0 0 19px;
  list-style: none;
  padding: 0
}

.pricing-card li {
  font-size: 10px;
  color: var(--color-text-muted);
  line-height: 2.05
}

.pricing-card li:before {
  content: "✓";
  color: var(--color-accent);
  font-weight: bold;
  margin-right: 8px
}

.cta-section {
  background: linear-gradient(90deg, rgba(15, 17, 20, .95), rgba(18, 20, 24, .88)), url('https://images.unsplash.com/photo-1454496522488-7a8e488e8606?auto=format&fit=crop&w=1600&q=80') center/cover;
  color: white;
  padding: 56px 0 37px;
  overflow: hidden
}

.cta-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: end
}

.cta-section h2 {
  margin: 0;}

.cta-section>p,
.cta-grid>div>p:not(.eyebrow) {
  color: var(--color-on-dark-muted);
  margin: 14px 0 19px
}

.bear-wrap {
  height: 248px;
  position: relative
}

.ink-splash {
  position: absolute;
  right: 28px;
  bottom: 12px;
  width: 250px;
  height: 186px;
  background: radial-gradient(circle at 15% 45%, var(--color-accent) 0 4px, transparent 5px), radial-gradient(circle at 28% 24%, var(--color-accent) 0 7px, transparent 8px), radial-gradient(circle at 87% 71%, var(--color-accent) 0 9px, transparent 10px), radial-gradient(circle at 61% 44%, var(--color-accent) 0 9px, transparent 10px), linear-gradient(118deg, transparent 12%, var(--color-accent) 13% 28%, transparent 29% 34%, var(--color-accent) 35% 64%, transparent 65%);
  filter: blur(.2px);
  transform: rotate(-9deg);
  opacity: .85
}

.bear {
  position: absolute;
  right: 69px;
  bottom: -15px;
  width: 216px;
  height: 260px;
  filter: drop-shadow(0 15px 11px rgba(0, 0, 0, .4))
}

.bear .body {
  position: absolute;
  width: 156px;
  height: 142px;
  border-radius: 56% 52% 42% 45%;
  bottom: 0;
  left: 28px;
  background: linear-gradient(140deg, #242321, #4a4841 66%, #141412)
}

.head {
  position: absolute;
  width: 154px;
  height: 148px;
  left: 31px;
  top: 15px;
  border-radius: 44% 48% 42% 46%;
  background: linear-gradient(135deg, #242321, #5d594f 68%, #141412);
  z-index: 1
}

.ear {
  position: absolute;
  width: 54px;
  height: 52px;
  border-radius: 50%;
  top: 2px;
  background: #2d2c28;
  z-index: 0
}

.ear.left {
  left: 25px
}

.ear.right {
  right: 20px
}

.snout {
  position: absolute;
  width: 82px;
  height: 58px;
  border-radius: 50%;
  background: #756e60;
  z-index: 2;
  top: 91px;
  left: 66px
}

.eye {
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 10px;
  background: #111;
  border-radius: 50%;
  top: 80px
}

.e1 {
  left: 74px
}

.e2 {
  right: 74px
}

.nose {
  position: absolute;
  z-index: 4;
  width: 25px;
  height: 17px;
  background: var(--color-dark);
  border-radius: 50% 50% 62% 62%;
  top: 95px;
  left: 94px
}

.nose:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 14px;
  background: var(--color-dark);
  top: 13px;
  left: 12px
}

.site-footer {
  background: var(--color-dark);
  color: #a8a49e;
  padding: 18px 0;
  font-size: 10px
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  gap: 10px
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .75, .3, 1)
}

.reveal.visible {
  opacity: 1;
  transform: none
}

.gsap-ready .reveal{opacity:1;transform:none;transition:none}
.gsap-ready .hero-art{transform-style:preserve-3d;will-change:transform}
.gsap-ready .reveal.motion-ready{transition:transform .35s cubic-bezier(.2,.75,.3,1),box-shadow .35s ease,border-color .35s ease,background-color .35s ease,color .25s ease}
.gsap-ready .service-card.motion-ready:hover{transform:translateY(-6px)}
.gsap-ready .work-card.motion-ready:hover{transform:translateY(-6px) scale(1.015)}
.gsap-ready .testimonial.motion-ready:hover{transform:translateY(-5px)}
.gsap-ready .pricing-card.featured.motion-ready{transform:scale(1.03)}
.gsap-ready .pricing-card.featured.motion-ready:hover{transform:translateY(-4px) scale(1.03)}

.delay-1 {
  transition-delay: .1s
}

.delay-2 {
  transition-delay: .2s
}

.delay-3 {
  transition-delay: .3s
}

.delay-4 {
  transition-delay: .4s
}

.nav-dropdown {
  position: relative
}

.dropdown-menu {
  position: absolute;
  left: -20px;
  top: calc(100% + 18px);
  width: 310px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(35, 25, 15, .13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .22s;
  display: grid;
  z-index: 20
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: none
}

.dropdown-menu a {
  padding: 9px 11px;
  border-radius: 5px;
  font-size: 12px
}

.dropdown-menu a:hover {
  background: var(--color-primary-soft)
}

.button {
  cursor: pointer
}

.inner-hero {
  padding: 88px 0 80px;
  background: radial-gradient(circle at 82% 28%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 23%), linear-gradient(120deg, var(--color-surface) 52%, var(--color-primary-soft))
}

.inner-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 70px;
  align-items: center
}

.breadcrumb {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 20px
}

.breadcrumb a {
  color: var(--color-primary-dark);
  text-decoration: none
}

.inner-hero h1 {
  letter-spacing: -2.7px;
  margin: 0
}

.inner-hero h1 em {
  font-style: normal;
  color: var(--color-accent)
}

.inner-hero p {
  color: var(--color-text-muted);
  max-width: 650px
}

.hero-panel {
  background: var(--color-dark);
  color: var(--color-surface);
  padding: 34px;
  border-radius: 14px;
  box-shadow: 18px 18px 0 var(--color-accent)
}

.hero-panel small {
  color: var(--color-primary);
  font-weight: 800;
  letter-spacing: 1px
}

.hero-panel h2 {
  color: #fff;
  margin: 10px 0 20px
}

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

.hero-panel li {
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-on-dark) 18%, transparent);
  font-size: 13px
}

.hero-panel li:before {
  content: '✓';
  color: var(--color-accent);
  margin-right: 10px
}

.content-section {
  padding: 82px 0
}

.content-section.tint {
  background: var(--color-surface-soft)
}

.content-lead {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 42px
}

.content-lead h2 {
  letter-spacing: -1.7px;
  margin: 0 0 12px
}

.content-lead p {
  color: var(--color-text-muted);}

.feature-grid,
.service-directory {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.feature-card,
.service-directory a {
  padding: 27px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-surface)
}

.feature-card .feature-num {
  color: var(--color-accent);
  font-weight: 800
}

.feature-card h3 {
  margin: 10px 0 7px
}

.feature-card p,
.service-directory p {
  color: var(--color-text-muted);
  margin: 0
}

.service-directory a {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  transition: .25s
}

.service-directory a:hover {
  transform: translateY(-5px);
  border-color: var(--color-border);
  box-shadow: var(--shadow)
}

.service-directory span {
  display: block;
  color: var(--color-accent);
  font-size: 24px;
  margin-bottom: 13px
}

.service-directory strong {
  font-weight: 700; font-size: 17px;
}

.service-directory p {
  margin-top: 7px
}

.page-cta {
  padding: 65px 0;
  background: var(--color-dark);
  color: var(--color-surface);
  text-align: center
}

.page-cta h2 {
  letter-spacing: -1.5px;
  margin: 0 0 12px
}

.page-cta p {
  color: var(--color-on-dark-muted);
  margin: 0 0 22px
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px
}

.step-card {
  padding: 25px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px
}

.step-card b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-surface)
}

.step-card p {
  color: var(--color-text-muted)
}

.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  place-items: center;
  padding: 20px
}

.lead-modal.open {
  display: grid
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 13, 16, .72);
  backdrop-filter: blur(5px)
}

.modal-card {
  position: relative;
  width: min(570px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--color-surface);
  border-radius: 14px;
  padding: 34px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3)
}

.modal-close {
  position: absolute;
  right: 15px;
  top: 13px;
  border: 0;
  background: var(--color-surface-muted);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer
}

.modal-card h2 {
  margin: 0 0 7px
}

.modal-card>p {
  color: var(--color-text-muted);}

.lead-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.lead-form label {
  font-size: 11px;
  font-weight: 700
}

.lead-form label.full {
  grid-column: 1/-1
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  font-size: 13px
}

.lead-form textarea {
  min-height: 90px;
  resize: vertical
}

.lead-form .button,
.form-note {
  grid-column: 1/-1
}

.form-note {
  font-size: 10px;
  color: var(--color-text-muted)
}

.form-success {
  display: none;
  padding: 35px 0;
  text-align: center
}

.form-success.show {
  display: block
}

.form-success strong {
  font-weight: 700; font-size: 24px;
  display: block
}

/* Brighter productized-agency visual system */
.service-card {
  text-decoration: none;
  color: var(--color-text)
}

.site-header {
  height: 76px;
  border-bottom: 1px solid var(--color-border)
}

.brand {
  font-size: 22px
}

.brand-mark:before {
  background: linear-gradient(135deg, var(--color-accent), var(--color-secondary))
}

.main-nav {
  gap: 31px
}

.main-nav a {
  color: var(--color-text)
}

.nav-actions .button {
  border-radius: 9px
}

.has-caret:after {
  content: '▴';
  font-size: 9px;
  margin-left: 7px;
  color: var(--color-accent)
}

.mega-menu {
  left: -65px;
  top: calc(100% + 25px);
  width: min(720px, 90vw);
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 22px;
  border: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 22px 45px rgba(31, 20, 60, .14)
}

.mega-menu>a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 10px
}

.mega-menu>a:hover {
  background: var(--color-secondary-soft)
}

.mega-menu a span {
  min-width: 0
}

.mega-menu a b {
  display: block;
  font-weight: 700; font-size: 14px;
  color: var(--color-text)
}

.mega-menu a small {
  display: block;
  color: var(--color-text-muted);
  font-size: 10px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.menu-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 21px;
  flex: 0 0 44px
}

.menu-icon.purple {
  color: var(--color-secondary);
  background: var(--color-secondary-soft)
}

.menu-icon.violet {
  color: var(--color-secondary);
  background: var(--color-secondary-soft)
}

.menu-icon.pink {
  color: var(--color-accent);
  background: var(--color-accent-soft)
}

.menu-icon.mint {
  color: var(--color-secondary);
  background: var(--color-secondary-soft)
}

.menu-icon.cyan {
  color: var(--color-secondary);
  background: var(--color-secondary-soft)
}

.menu-icon.yellow {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft)
}

.mega-footer {
  grid-column: 1/-1;
  margin: 12px -22px -22px;
  padding: 17px 22px;
  background: var(--color-secondary-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border)
}

.mega-footer span b,
.mega-footer span small {
  display: block
}

.mega-footer span b {
  font-size: 12px
}

.mega-footer span small {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px
}

.mega-footer>a {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
  font-size: 12px
}

.hero {
  background: radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 20%), radial-gradient(circle at 67% 78%, color-mix(in srgb, var(--color-secondary) 15%, transparent), transparent 22%), linear-gradient(120deg, var(--color-surface) 48%, var(--color-secondary-soft))
}

.hero-window,
.service-card,
.pricing-card,
.testimonial,
.comparison {
  border-radius: 14px
}

.orange-scribble {
  border-color: var(--color-accent)
}

.process-section,
.page-cta {
  background: radial-gradient(circle at 80% 30%, color-mix(in srgb, var(--color-secondary) 22%, transparent), transparent 24%), var(--color-dark)
}

.process-icon {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 8px var(--color-dark)
}

.trusted-strip {
  background: var(--color-surface)
}

.stats-section,
.testimonials {
  background: var(--color-secondary-soft)
}

.services-grid {
  gap: 15px
}

.service-card {
  border: 0;
  background: var(--color-secondary-soft);
  padding: 20px
}

.service-card:nth-child(3n+2) {
  background: var(--color-accent-soft)
}

.service-card:nth-child(3n) {
  background: var(--color-secondary-soft)
}

.service-icon {
  color: var(--color-accent)
}

.filters button.active,
.filters button:hover {
  background: var(--color-accent)
}

.inner-hero {
  padding: 105px 0 95px;
  background: radial-gradient(circle at 87% 25%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 20%), radial-gradient(circle at 70% 88%, color-mix(in srgb, var(--color-secondary) 18%, transparent), transparent 23%), linear-gradient(125deg, var(--color-surface) 50%, var(--color-secondary-soft))
}

.hero-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-dark) 82%, var(--color-secondary)), var(--color-dark));
  border-radius: 24px;
  box-shadow: 18px 18px 0 var(--color-secondary)
}

.hero-panel:after {
  content: '✦';
  position: absolute;
  right: -22px;
  bottom: -45px;
  color: rgba(255, 255, 255, .08);
  font-size: 150px
}

.hero-panel small {
  color: var(--color-secondary)
}

.content-section.tint {
  background: var(--color-secondary-soft)
}

.feature-card,
.service-directory a,
.step-card {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(52, 30, 104, .06)
}

.feature-card:nth-child(3n+2),
.service-directory a:nth-child(3n+2) {
  background: var(--color-accent-soft)
}

.feature-card:nth-child(3n),
.service-directory a:nth-child(3n) {
  background: var(--color-secondary-soft)
}

.feature-card {
  padding: 32px
}

.feature-card .feature-num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--color-secondary-soft)
}

.service-directory span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--color-secondary-soft);
  border-radius: 10px
}

.button {
  border-radius: 9px
}

.modal-card {
  border-radius: 22px
}

/* Designizzly brand palette: warm white, ink and signature orange */
.brand-mark:before {
  background: var(--color-primary)
}

.main-nav a {
  color: var(--color-text)
}

.mega-menu {
  box-shadow: 0 22px 45px rgba(35, 25, 15, .14)
}

.mega-menu>a:hover {
  background: var(--color-primary-soft)
}

.mega-menu a b {
  color: var(--color-text)
}

.mega-menu a small {
  color: var(--color-text-muted)
}

.menu-icon.purple,
.menu-icon.violet {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft)
}

.menu-icon.pink {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft)
}

.menu-icon.mint,
.menu-icon.cyan {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft)
}

.menu-icon.yellow {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft)
}

.mega-footer {
  background: var(--color-primary-soft);
  border-color: var(--color-border)
}

.hero {
  background: linear-gradient(110deg, var(--color-surface) 51%, var(--color-primary-soft))
}

.orange-scribble {
  border-color: var(--color-accent)
}

.process-section,
.page-cta {
  background: radial-gradient(circle at 18% 27%, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 19%), var(--color-dark)
}

.process-icon {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 8px var(--color-dark)
}

.stats-section,
.testimonials {
  background: var(--color-surface-soft)
}

.service-card {
  background: var(--color-surface-soft)
}

.service-card:nth-child(3n+2) {
  background: var(--color-primary-soft)
}

.service-card:nth-child(3n) {
  background: var(--color-surface-soft)
}

.inner-hero {
  background: radial-gradient(circle at 84% 24%, color-mix(in srgb, var(--color-accent) 17%, transparent), transparent 22%), linear-gradient(125deg, var(--color-surface) 50%, var(--color-primary-soft))
}

.hero-panel {
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-dark) 88%, var(--color-primary)), var(--color-dark));
  box-shadow: 18px 18px 0 var(--color-primary)
}

.hero-panel small {
  color: var(--color-primary)
}

.content-section.tint {
  background: var(--color-surface-soft)
}

.feature-card:nth-child(3n+2),
.service-directory a:nth-child(3n+2) {
  background: var(--color-primary-soft)
}

.feature-card:nth-child(3n),
.service-directory a:nth-child(3n) {
  background: var(--color-surface-soft)
}

.feature-card .feature-num,
.service-directory span {
  background: var(--color-primary-soft)
}

.inner-trust {
  padding: 25px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface)
}

.inner-trust .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px
}

.inner-trust span {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  font-weight: 800
}

.inner-trust div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  flex: 1
}

.inner-trust b {
  font-weight: 700; font-size: 15px;
  color: var(--color-text-muted);
  white-space: nowrap
}

.service-outcomes .content-lead {
  margin-bottom: 60px
}

.outcome-list {
  display: grid;
  gap: 78px
}

.outcome-list article {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 70px;
  align-items: center
}

.outcome-list article:nth-child(even) .outcome-art {
  order: 2
}

.outcome-list article>div:last-child {
  max-width: 470px
}

.outcome-list small {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px
}

.outcome-list h3 {
  letter-spacing: -1.5px;
  margin: 10px 0 13px
}

.outcome-list p {
  color: var(--color-text-muted);}

.outcome-art {
  height: 330px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden
}

.outcome-art:before,
.outcome-art:after {
  content: '';
  position: absolute;
  border-radius: 25px;
  transform: rotate(-12deg)
}

.outcome-art:before {
  width: 55%;
  height: 62%;
  background: var(--color-surface);
  box-shadow: 0 18px 40px rgba(52, 32, 8, .14)
}

.outcome-art:after {
  width: 25%;
  height: 42%;
  right: 13%;
  bottom: 9%;
  background: var(--color-dark);
  transform: rotate(11deg)
}

.outcome-art span {
  z-index: 2;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 13px 18px;
  border-radius: 5px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1)
}

.art-one {
  background: linear-gradient(135deg, var(--color-primary-soft), var(--color-primary))
}

.art-two {
  background: linear-gradient(135deg, var(--color-dark), color-mix(in srgb, var(--color-dark) 82%, var(--color-surface)))
}

.art-two span {
  color: var(--color-primary-dark)
}

.art-two:after {
  background: var(--color-primary)
}

.art-three {
  background: linear-gradient(135deg, var(--color-primary-soft), var(--color-primary))
}

.art-three:after {
  background: var(--color-primary-dark)
}

.service-stats {
  padding: 52px 0;
  background: var(--color-dark);
  color: var(--color-surface)
}

.service-stats .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.service-stats .container>div {
  text-align: center;
  border-right: 1px solid color-mix(in srgb, var(--color-on-dark) 18%, transparent)
}

.service-stats .container>div:last-child {
  border: 0
}

.service-stats strong {
  display: block;
  font-weight: 800; font-size: 32px;
  color: var(--color-accent)
}

.service-stats span {
  display: block;
  color: var(--color-on-dark-muted);
  font-size: 11px;
  margin-top: 5px
}

.service-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative
}

.service-flow article {
  padding: 27px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface)
}

.service-flow b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-surface)
}

.service-flow h3 {
  margin: 18px 0 8px
}

.service-flow p {
  color: var(--color-text-muted)
}

.service-compare .container {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 70px;
  align-items: center
}

.compare-copy h2,
.faq-wrap h2 {
  letter-spacing: -1.8px;
  margin: 0 0 15px
}

.compare-copy>p:not(.eyebrow),
.faq-wrap>div:first-child>p:not(.eyebrow) {
  color: var(--color-text-muted);
  margin-bottom: 22px
}

.compare-table {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden
}

.compare-table>div {
  display: grid;
  grid-template-columns: 1.3fr .8fr .8fr 1fr;
  border-bottom: 1px solid var(--color-border)
}

.compare-table>div:last-child {
  border: 0
}

.compare-table>div>* {
  padding: 15px 13px;
  font-size: 11px;
  text-align: center
}

.compare-table>div>*:first-child {
  text-align: left
}

.compare-table>div:first-child {
  background: var(--color-dark);
  color: var(--color-on-dark)
}

.compare-table strong {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft)
}

.faq-wrap {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 80px
}

.faq-list details {
  border-top: 1px solid var(--color-border)
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--color-border)
}

.faq-list summary {
  list-style: none;
  padding: 20px 0;
  font-weight: 700; font-size: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between
}

.faq-list summary::-webkit-details-marker {
  display: none
}

.faq-list summary span {
  color: var(--color-accent);
  font-size: 21px
}

.faq-list details[open] summary span {
  transform: rotate(45deg)
}

.faq-list details p {
  margin: 0 0 20px;
  color: var(--color-text-muted);}

/* Responsive image guardrails */
.brand img {
  display: block;
  width: 225px;
  height: auto;
  object-fit: contain
}

.logo-row img {
  display: block;
  width: auto;
  height: 30px;
  max-width: 125px;
  object-fit: contain;
  flex: 0 0 auto
}

.stat-icon img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-inline: auto
}

.button {
  font-size: var(--text-button);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Eyebrows are labels rather than body paragraphs. */
.eyebrow {
  font-size: .75rem;
  color: var(--color-accent)
}

.eyebrow.light {
  color: var(--color-primary)
}

/* Centralized inverse colors for dark sections. */
.process-section h1,
.process-section h2,
.process-section h3,
.process-section h4,
.process-section h5,
.process-section h6,
.cta-section h1,
.cta-section h2,
.cta-section h3,
.cta-section h4,
.cta-section h5,
.cta-section h6,
.page-cta h1,
.page-cta h2,
.page-cta h3,
.page-cta h4,
.page-cta h5,
.page-cta h6,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
  color: var(--color-on-dark)
}

.process-section p,
.cta-section p,
.page-cta p,
.site-footer p {
  color: var(--color-on-dark-muted)
}

/* Site footer */
.site-footer{background:var(--color-surface);color:var(--color-text);padding:50px 24px 28px;font-size:inherit}
.footer-main{display:grid;grid-template-columns:2.25fr repeat(4,1fr);gap:42px;align-items:start;padding-bottom:70px}
.footer-brand{display:inline-flex;align-items:flex-start;width:max-content}
.footer-brand img{display:block;width:268px;height:auto}
.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.footer-column h3{margin:0 0 9px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
.footer-column h3:not(:first-child){margin-top:12px}
.footer-column h4{margin:0 0 9px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
.footer-column h4:not(:first-child){margin-top:12px}
.footer-column a,.footer-column span{font-size:.875rem;line-height:1.35;color:var(--color-text);text-decoration:none}
.footer-column a{transition:color .2s,transform .2s}
.footer-column a:hover{color:var(--color-accent);transform:translateX(2px)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid var(--color-border);padding-top:34px}
.footer-legal,.footer-socials{display:flex;align-items:center;gap:38px}
.footer-legal span,.footer-legal a{font-size:.875rem;color:var(--color-text-muted);text-decoration:none}
.footer-legal a:hover{color:var(--color-accent)}
.footer-socials{gap:22px}
.footer-socials a{display:grid;place-items:center;min-width:22px;height:28px;color:var(--color-text);text-decoration:none;font-size:1rem;font-weight:800;transition:color .2s,transform .2s}
.footer-socials a:hover{color:var(--color-accent);transform:translateY(-2px)}

/* Trust, recognition and FAQ */
.brand-wall{background:var(--color-surface-muted);text-align:center}.brand-wall-heading{max-width:1040px;margin:0 auto 42px}.brand-wall-heading h2{margin-bottom:8px}.brand-wall-heading p{margin:0;color:var(--color-text);font-weight:800;}.brand-logo-grid{display:grid;grid-template-columns:repeat(5,1fr);background:var(--color-surface);border:1px solid var(--color-border);border-radius:22px;overflow:hidden}.brand-logo-slot{display:grid;place-items:center;min-height:138px;padding:24px;border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.brand-logo-slot:nth-child(5n){border-right:0}.brand-logo-slot:nth-last-child(-n+5){border-bottom:0}.brand-logo-slot span{display:grid;place-items:center;width:112px;height:56px;border:1px dashed var(--color-border);border-radius:10px;color:var(--color-text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.recognition-section{position:relative;background:linear-gradient(110deg,rgba(13,18,31,.96),rgba(29,35,49,.88)),url('../../assets/img/designizzly_logo_dark.webp') center/cover;color:var(--color-surface);text-align:center}.recognition-section h2{color:var(--color-surface);margin-bottom:48px}.recognition-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:950px;margin:auto}.recognition-grid article{display:flex;align-items:center;text-align:left;gap:18px;padding:24px;background:rgba(255,255,255,.96);border-radius:16px;color:var(--color-dark);box-shadow:0 14px 35px rgba(0,0,0,.18)}.recognition-icon{display:grid;place-items:center;flex:0 0 58px;height:58px;border-radius:14px;background:var(--color-gradient);color:var(--color-surface);font-weight:800;font-size:1.5rem}.recognition-grid strong,.recognition-grid small{display:block}.recognition-grid strong{font-size:1.05rem}.recognition-grid small{margin-top:4px;color:var(--color-text-muted)}.faq-section{background:var(--color-surface-muted)}.faq-heading{text-align:center;margin-bottom:42px}.faq-heading .eyebrow{justify-content:center}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 24px}.faq-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;overflow:hidden}.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px;padding:22px 24px;cursor:pointer;list-style:none;font-weight:700;color:var(--color-text)}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:'+';display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:50%;background:var(--color-accent);color:var(--color-surface);font-size:1.4rem;line-height:1;transition:transform .2s}.faq-item[open] summary::after{content:'-';transform:rotate(180deg)}.faq-item p{margin:0;padding:0 24px 24px;color:var(--color-text-muted)}

/* Working responsive testimonial carousel */
.testimonial-track{display:flex;gap:16px;overflow:hidden;min-width:0}
.testimonial{flex:0 0 calc((100% - 32px)/3);transition:transform .4s ease}

/* Responsive client logo wall */
.brand-logo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--color-border)}
.brand-logo-slot,.brand-logo-slot:nth-child(n){min-width:0;min-height:132px;border:0;background:var(--color-surface)}
.brand-logo-slot a{display:grid;place-items:center;width:100%;height:100%;min-width:0}
.brand-logo-slot img{display:block;width:auto;max-width:100%;height:auto;max-height:72px;object-fit:contain}

/* Services page */
.services-page {
  background: var(--color-surface)
}

.services-hero {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  background: linear-gradient(120deg, var(--color-surface) 52%, var(--color-primary-soft))
}

.services-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -180px;
  top: -220px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 15%, transparent)
}
.services-hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  left: -180px;
  bottom: -220px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 15%, transparent)
}

.services-hero-grid,
.services-growth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  align-items: center;
  gap: 72px
}

.services-hero-copy>p:not(.eyebrow) {
  max-width: 670px;
  margin: 22px 0 28px
}

.services-hero-actions {
  display: flex;
  align-items: center;
  gap: 26px
}

.services-proof {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: 6px 12px;
  max-width: 560px;
  margin-top: 38px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border)
}

.services-proof strong {
  color: var(--color-primary-dark)
}

.services-proof span {
  color: var(--color-text-muted);
  font-size: .75rem
}

.services-hero-visual {
  display: grid;
  place-items: center;
  min-height: 460px
}

.services-orbit {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-surface) 0 28%, transparent 29%), radial-gradient(circle, transparent 0 48%, var(--color-border) 49% 49.4%, transparent 50%), var(--color-surface-soft);
  box-shadow: var(--shadow)
}

.orbit-core,
.orbit-item {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: var(--shadow)
}

.orbit-core {
  inset: 50% auto auto 50%;
  width: 112px;
  height: 112px;
  transform: translate(-50%, -50%);
  background: var(--color-gradient);
  color: var(--color-on-brand);
  font-weight: 800
}

.orbit-item {
  min-width: 86px;
  height: 86px;
  padding: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .75rem;
  font-weight: 800
}

.orbit-brand { left: 5%; top: 22% }
.orbit-web { right: 4%; top: 15% }
.orbit-growth { right: -1%; bottom: 19% }
.orbit-mobile { left: 13%; bottom: 5% }
.orbit-motion { left: 39%; top: -5% }

.services-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  align-items: end;
  gap: 60px;
  margin-bottom: 46px
}

.services-section-heading>p {
  margin: 0
}

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

.services-offer-card {
  position: relative;
  min-height: 330px;
  padding: 30px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: transform .25s, border-color .25s, box-shadow .25s
}

.services-offer-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow);
  background: var(--color-primary-soft);
}
/* .services-offer-card:hover p, .services-offer-card:hover h3, .services-offer-card:hover b {
  color: var(--color-surface)
  } */
  .services-offer-card:hover .offer-icon {
    background: var(--color-surface);
    color: var(--color-primary-dark)
  }

.offer-number {
  position: absolute;
  top: 30px;
  right: 30px;
  color: var(--color-text-muted);
  font-size: .7rem;
  font-weight: 800
}

.offer-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 56px;
  border-radius: 14px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark)
}

.services-offer-card p {
  margin: 10px 0 24px
}

.services-offer-card b {
  color: var(--color-primary-dark);
  font-size: .78rem
}

.services-offer-card-accent {
  background: var(--color-primary) !important;
  color: var(--color-on-dark)  !important
}
.services-offer-card-accent b{
  color: var(--color-surface)
}

.services-offer-card-accent h3,
.services-offer-card-accent p {
  color: inherit
}

.services-offer-card-accent .offer-number {
  color: var(--color-on-dark-muted)
}

.services-growth {
  position: relative;
  overflow: hidden;
  padding: 78px 0;
}

.services-growth .container {
  width: min(1460px, calc(100% - 48px))
}

.services-growth-grid {
  grid-template-columns: minmax(0, 1.16fr) minmax(440px, .84fr);
  gap: 64px
}

.services-growth-visual {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: -32px 0 -78px -24px
}

.services-growth-visual img {
  display: block;
  width: min(760px, 100%);
  height: auto;
  object-fit: contain;
  object-position: center bottom
}

.services-growth-copy {
  padding: 28px 0
}

.services-growth-copy>p:not(.eyebrow) {
  max-width: 650px;
  margin: 22px 0 0
}

.services-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px
}

.services-result-grid>div {
  min-height: 162px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 26%, var(--color-border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-surface) 74%, transparent)
}

.services-result-grid strong,
.services-result-grid span {
  display: block
}

.services-result-grid strong {
  margin-top: 13px;
  color: var(--color-primary-dark);
  font-size: 1.5rem;
  line-height: 1
}

.services-result-grid span {
  margin-top: 9px;
  color: var(--color-text-muted);
  font-size: .82rem
}

.services-stat-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark)
}

.services-why,
.services-partnership {
  background: var(--color-dark);
  color: var(--color-on-dark)
}

.services-why h2,
.services-why h3,
.services-partnership h2 {
  color: var(--color-on-dark)
}

.services-why p,
.services-partnership p {
  color: var(--color-on-dark-muted)
}

.services-why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid color-mix(in srgb, var(--color-on-dark) 18%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--color-on-dark) 18%, transparent)
}

.services-why-grid article {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 20px;
  padding: 34px;
  border-right: 1px solid color-mix(in srgb, var(--color-on-dark) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-dark) 18%, transparent)
}

.services-why-grid article>span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-brand);
  font-size: .7rem;
  font-weight: 800
}

.services-why-grid p {
  margin-bottom: 0
}

.services-plans {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-soft);
  color: var(--color-text)
}

.services-plans::before {
  content: "";
  position: absolute;
  left: -150px;
  bottom: -210px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  filter: blur(45px)
}

.services-pricing-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(0, 2.3fr);
  align-items: center;
  gap: 90px
}

.services-pricing-intro h2 {
  color: var(--color-text);
  text-transform: uppercase
}

.services-pricing-intro>p:not(.eyebrow) {
  max-width: 340px;
  color: var(--color-text-muted)
}

.services-pricing-intro .button {
  min-width: 210px;
  margin-top: 18px;
  text-transform: uppercase
}

.services-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 86px;
  padding-left: 48px
}

.services-plan-card {
  position: relative;
  z-index: 1;
  overflow: visible;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 20px 55px var(--color-shadow)
}

.services-plan-tab {
    position: absolute;
    z-index: 2;
    left: -40px;
    top: 32px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 200px;
    border-radius: 20px 0 0 20px;
    background: var(--color-primary);
    color: var(--color-on-brand);
    font-weight: 800;
    letter-spacing: .06em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.services-plan-price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-height: 124px;
  padding: 28px 20px 20px;
  color: var(--color-text)
}

.services-plan-price sup {
  margin-top: 9px;
  font-size: 1.2rem
}

.services-plan-price strong {
  font-size: 2.7rem;
  font-weight: 500;
  line-height: 1
}

.services-plan-price span {
  align-self: flex-end;
  margin-bottom: 8px;
  color: var(--color-text-muted);
  font-size: .7rem
}

.services-plan-card ul {
  min-height: 310px;
  margin: 0;
  padding: 0;
  list-style: none
}

.services-plan-card li {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  color: var(--color-text);
  font-size: .8rem
}

.services-plan-card li:nth-child(odd) {
  background: var(--color-primary-soft)
}

.services-plan-action {
  padding: 30px 46px;
  text-align: center
}

.services-plan-action button {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-transform: uppercase;
  transition: background .2s, color .2s
}

.services-plan-action button:hover {
  background: var(--color-primary);
  color: var(--color-on-brand)
}

.services-partnership .container {
  display: block
}

.services-partnership-header {
  max-width: 780px;
  margin: 0 auto;
  text-align: center
}

.services-partnership-header h2 {
  margin-bottom: 22px
}

.services-partnership-header h2 em {
  color: var(--color-primary);
  font-style: normal
}

.services-partnership-header p {
  max-width: 680px;
  margin: 0 auto
}

.services-partnership-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 1120px;
  margin: 56px auto 0
}

.services-partnership-list article {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 150px;
  padding: 14px 24px;
  text-align: center
}

.services-partnership-list article+article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: color-mix(in srgb, var(--color-primary) 42%, transparent)
}

.services-partnership-list i {
  color: var(--color-primary);
  font-size: 2.65rem
}

.services-partnership-list h3 {
  margin: 18px 0 0;
  color: var(--color-on-dark)
}

/* Portfolio page */
.portfolio-hero {
  padding: 92px 0 84px;
  background: radial-gradient(circle at 82% 25%, var(--color-primary-soft), transparent 27%), var(--color-surface-soft)
}

.portfolio-hero-inner {
  max-width: 900px;
  text-align: center
}

.portfolio-hero .breadcrumb {
  margin-bottom: 24px
}

.portfolio-hero .eyebrow {
  display: flex;
  align-items: center;
  justify-content: center
}

.portfolio-hero h1 {
  margin: 0
}

.portfolio-hero h1 em {
  color: var(--color-primary-dark);
  font-style: normal
}

.portfolio-hero-inner>p:last-child {
  max-width: 680px;
  margin: 22px auto 0;
  color: var(--color-text-muted)
}

.portfolio-showcase {
  background: var(--color-surface)
}

.portfolio-showcase-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 42px;
  margin-bottom: 42px
}

.portfolio-showcase-heading h2 {
  margin-bottom: 0
}

.portfolio-showcase-heading>p {
  max-width: 470px;
  margin: 0;
  color: var(--color-text-muted)
}

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

.portfolio-web-card {
  --portfolio-card-height: 410px;
  position: relative;
  height: var(--portfolio-card-height);
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-muted);
  box-shadow: 0 12px 32px var(--color-shadow);
  cursor: zoom-in;
  isolation: isolate
}

.portfolio-web-card img {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  transform: translateY(0);
  transition: transform 5s linear;
  will-change: transform
}

.portfolio-card-shade {
  position: absolute;
  z-index: 1;
  inset: 45% 0 0;
  background: linear-gradient(transparent, color-mix(in srgb, var(--color-dark) 82%, transparent));
  pointer-events: none;
  transition: opacity .3s
}

.portfolio-card-label {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 22px;
  color: var(--color-on-dark);
  text-align: left;
  pointer-events: none;
  transition: opacity .3s, transform .3s
}

.portfolio-card-label b {
  font-size: .92rem
}

.portfolio-card-label small {
  color: var(--color-on-dark-muted);
  white-space: nowrap
}

.portfolio-card-label i {
  margin-left: 5px;
  color: var(--color-primary)
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-web-card:hover img,
  .portfolio-web-card:focus-visible img {
    transform: translateY(calc(-100% + var(--portfolio-card-height)))
  }

  .portfolio-web-card:hover .portfolio-card-shade,
  .portfolio-web-card:hover .portfolio-card-label,
  .portfolio-web-card:focus-visible .portfolio-card-shade,
  .portfolio-web-card:focus-visible .portfolio-card-label {
    opacity: 0;
    transform: translateY(12px)
  }
}

.portfolio-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  padding: 24px;
  background: color-mix(in srgb, var(--color-dark) 90%, transparent)
}

.portfolio-lightbox.open {
  display: block
}

.portfolio-lightbox-backdrop {
  position: absolute;
  inset: 0
}

.portfolio-lightbox-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1480px, 100%);
  height: 100%;
  margin: auto;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 0 28px 80px color-mix(in srgb, var(--color-dark) 55%, transparent)
}

.portfolio-lightbox-bar {
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 10px 16px 10px 22px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface)
}

.portfolio-lightbox-bar div {
  display: flex;
  align-items: baseline;
  gap: 13px
}

.portfolio-lightbox-bar span {
  color: var(--color-text-muted);
  font-size: .75rem
}

.portfolio-lightbox-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-soft);
  color: var(--color-text);
  cursor: pointer
}

.portfolio-lightbox-stage {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: auto;
  padding: 24px;
  overscroll-behavior: contain;
  background: var(--color-surface-muted)
}

.portfolio-lightbox-stage img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  cursor: zoom-in;
  box-shadow: 0 14px 45px var(--color-shadow)
}

.portfolio-lightbox.is-zoomed .portfolio-lightbox-stage {
  align-items: flex-start
}

.portfolio-lightbox.is-zoomed .portfolio-lightbox-stage img {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  max-height: none;
  cursor: zoom-out
}

body.portfolio-lightbox-open {
  overflow: hidden
}

/* Pricing catalog */
.pricing-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 62px;
  background: radial-gradient(circle at 86% 18%, var(--color-primary-soft), transparent 26%), linear-gradient(120deg, var(--color-surface) 46%, var(--color-surface-soft))
}

.pricing-hero::before {
  content: "";
  position: absolute;
  left: -130px;
  bottom: -220px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  filter: blur(30px)
}

.pricing-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  align-items: center;
  gap: 50px
}

.pricing-hero-copy {
  max-width: 620px
}

.pricing-hero-copy h1 {
  margin: 0;
  letter-spacing: -.055em
}

.pricing-hero-copy h1 em {
  color: var(--color-primary-dark);
  font-style: normal
}

.pricing-hero-copy>p:not(.eyebrow) {
  max-width: 570px;
  margin: 20px 0 24px;
  color: var(--color-text-muted)
}

.pricing-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none
}

.pricing-hero-points li {
  color: var(--color-text-muted);
  font-size: .76rem;
  font-weight: 600
}

.pricing-hero-points i {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: .6rem
}

.pricing-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0
}

.pricing-hero-visual>img {
  display: block;
  width: min(100%, 650px);
  height: auto;
  filter: drop-shadow(0 24px 30px color-mix(in srgb, var(--color-dark) 15%, transparent))
}

.pricing-hero-badge {
  position: absolute;
  left: 3%;
  bottom: 5%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 17px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: 0 14px 34px var(--color-shadow);
  backdrop-filter: blur(10px)
}

.pricing-hero-badge>i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark)
}

.pricing-hero-badge span,
.pricing-hero-badge b,
.pricing-hero-badge small {
  display: block
}

.pricing-hero-badge b {
  font-size: .78rem
}

.pricing-hero-badge small {
  margin-top: 1px;
  color: var(--color-text-muted);
  font-size: .68rem
}

.pricing-catalog {
  background: var(--color-surface-soft)
}

.pricing-catalog-heading {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center
}

.pricing-catalog-heading .eyebrow {
  display: flex;
  justify-content: center
}

.pricing-catalog-heading>p:last-child,
.pricing-panel-heading+p {
  color: var(--color-text-muted)
}

.pricing-tab-system {
  position: relative;
  z-index: 3;
  margin-bottom: 52px
}

.pricing-primary-tabs {
  display: grid;
  grid-template-columns: 1.45fr 1fr .8fr 1fr .8fr .7fr;
  gap: 5px;
  padding: 7px;
  border-radius: 16px;
  background: var(--color-gradient);
}

.pricing-primary-tabs button,
.pricing-secondary-tabs button {
  position: relative;
  min-height: 48px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--color-on-brand);
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  font-weight: 800;
  line-height: 1.25;
  transition: background .2s, color .2s, transform .2s
}

.pricing-primary-tabs button:hover,
.pricing-primary-tabs button:focus-visible {
  background: var(--color-surface);
  color: var(--color-primary-dark)
}

/* .pricing-primary-tabs button.active {
  box-shadow: 0 7px 18px color-mix(in srgb, var(--color-dark) 12%, transparent)
} */

.pricing-primary-tabs button.active::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: -19px;
  width: 17px;
  height: 17px;
  border-radius: 3px;
  background: var(--color-primary-dark);
  box-shadow: 0 0 0 5px var(--color-surface-soft);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none
}

.pricing-secondary-area {
  min-height: 62px
}

.pricing-secondary-tabs {
  position: relative;
  display: flex;
  width: max-content;
  max-width: calc(100% - 40px);
  gap: 4px;
  margin: 14px 0 0 20px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: 0 10px 28px var(--color-shadow)
}

.pricing-secondary-tabs::before {
  display: none
}

.pricing-secondary-tabs button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 18px;
  color: var(--color-text-muted)
}

.pricing-secondary-tabs button:hover,
.pricing-secondary-tabs button:focus-visible,
.pricing-secondary-tabs button.active {
  /* background: var(--color-primary); */
  color: var(--color-primary)
}
/* .pricing-secondary-tabs button:hover,
.pricing-secondary-tabs button:focus-visible,
.pricing-secondary-tabs button.active {
  background: var(--color-primary);
  color: var(--color-on-brand)
} */

.pricing-panel[hidden],
.pricing-secondary-tabs[hidden] {
  display: none
}

.pricing-panel-heading {
  margin-bottom: 28px
}

.pricing-panel-heading h2 {
  margin-bottom: 0
}

.pricing-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch
}

.pricing-package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 14px 38px var(--color-shadow);
  transition: transform .25s, border-color .25s, box-shadow .25s
}

.pricing-package-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--color-primary) 14%, transparent)
}

.pricing-package-card.featured {
  border: 2px solid var(--color-primary)
}

.pricing-popular {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase
}

.pricing-tier-label {
  margin: 0 0 6px;
  color: var(--color-primary-dark) !important;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase
}

.pricing-package-card h3 {
  margin-bottom: 8px
}

.pricing-package-card>p:not(.pricing-tier-label) {
  min-height: 52px;
  margin: 0;
  color: var(--color-text-muted)
}

.pricing-package-price {
  display: flex;
  align-items: baseline;
  margin: 24px 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border)
}

.pricing-package-price small {
  align-self: center;
  margin-right: 8px;
  color: var(--color-text-muted)
}

.pricing-package-price span {
  color: var(--color-primary-dark);
  font-size: 1.25rem;
  font-weight: 800
}

.pricing-package-price strong {
  font-size: 2.55rem;
  line-height: 1;
  letter-spacing: -.06em
}

.pricing-package-card ul {
  flex: 1;
  margin: 0 0 26px;
  padding: 0;
  list-style: none
}

.pricing-package-card li {
  position: relative;
  padding: 8px 0 8px 24px;
  color: var(--color-text-muted);
  font-size: .83rem
}

.pricing-package-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary-dark);
  font-weight: 800
}

/* Complete branding package */
.branding-solution {
  position: relative;
  overflow: hidden;
  padding: 48px 0;
  background: var(--color-surface)
}

.branding-solution::before {
  content: "";
  position: absolute;
  top: 8%;
  left: -180px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  filter: blur(55px)
}

.branding-solution-stage {
  position: relative;
  min-height: 570px
}

.branding-solution-visual {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: -85px;
  width: 31%;
  min-width: 340px;
  translate: 0 -50%
}

.branding-solution-visual>img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 35px color-mix(in srgb, var(--color-dark) 18%, transparent))
}

.branding-visual-orbit {
  position: absolute;
  top: 16%;
  left: -6%;
  width: 104%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-primary-soft), transparent 68%)
}

.branding-visual-stat {
  position: absolute;
  z-index: 3;
  top: 3%;
  right: auto;
  left: -134px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px)
}

.branding-visual-stat i {
  color: var(--color-primary-dark);
  font-size: 1.25rem
}

.branding-visual-stat span,
.branding-visual-stat b,
.branding-visual-stat small {
  display: block
}

.branding-visual-stat b {
  font-size: .72rem
}

.branding-visual-stat small {
  color: var(--color-text-muted);
  font-size: .62rem
}

.branding-solution-card {
  position: relative;
  z-index: 1;
  margin-left: 15%;
  padding: 28px 28px 28px 125px;
  border: 1px solid var(--color-primary);
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-surface-soft) 88%, var(--color-surface));
  box-shadow: 0 24px 60px var(--color-shadow)
}

.branding-solution-card>h2 {
  margin: 0 0 20px;
  color: var(--color-primary-dark);
  text-align: center
}

.branding-solution-grid {
  display: grid;
  grid-template-columns: .88fr 1.08fr .95fr 1fr;
  align-items: start;
  gap: 20px
}

.branding-feature-group+ .branding-feature-group {
  margin-top: 15px
}

.branding-feature-group h3 {
  margin: 0 0 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--color-gradient);
  color: var(--color-on-brand);
  font-size: .78rem;
  text-align: center
}

.branding-feature-group ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.branding-feature-group li {
  position: relative;
  padding: 4px 0 4px 17px;
  color: var(--color-text-muted);
  font-size: .68rem;
  line-height: 1.35
}

.branding-feature-group li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--color-primary-dark);
  font-size: .5rem
}

.branding-feature-ungrouped {
  padding-top: 35px
}

.branding-solution-offer-column {
  grid-column: 3 / 5;
  display: grid;
  grid-template-columns: .95fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 15px 18px
}

.branding-solution-offer-column .branding-feature-group+ .branding-feature-group {
  margin-top: 0
}

.branding-solution-offer-column .branding-solution-price {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 34px
}

.branding-solution-price {
  position: relative;
  margin-top: 0;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  text-align: center
}

.branding-solution-price .button {
  gap: 8px;
  padding-inline: 12px;
  white-space: nowrap
}

.branding-old-price {
  display: block;
  color: var(--color-text-muted);
  font-weight: 700;
  text-decoration: line-through
}

.branding-solution-price>div:not(.branding-guarantee) small {
  display: block;
  margin-top: 4px;
  color: var(--color-primary-dark);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase
}

.branding-solution-price strong {
  display: block;
  margin: 5px 0 14px;
  color: var(--color-text);
  font-size: 2.65rem;
  line-height: 1
}

.branding-solution-price sup {
  color: var(--color-primary-dark);
  font-size: 1.1rem
}

.branding-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100px;
  height: 100px;
  margin: 14px auto 0;
  border: 3px dashed var(--color-primary-dark);
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  flex-direction: column;
  line-height: 1.15
}

.branding-guarantee b {
  font-size: 1.25rem
}

.branding-guarantee span {
  font-size: .59rem;
  font-weight: 800;
  text-transform: uppercase
}