.odak-light,
body {
  background: #eef1f2;
}

:root {
  --bg: #eef1f2;
  --bg-soft: #f7f8f8;
  --fg: #1c1e3e;
  --fg-dim: #66707c;
  --accent: #52aece;
  --rule: rgba(28, 30, 62, 0.13);
}

html,
body {
  background: #eef1f2;
  color: #1c1e3e;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
  width: 100%;
}

.grain {
  opacity: 0.035;
  mix-blend-mode: multiply;
}

.nav {
  align-items: center;
  background: rgba(238, 241, 242, 0.78);
  border-bottom: 1px solid rgba(28, 30, 62, 0.1);
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
  mix-blend-mode: normal;
  padding-bottom: 16px;
  padding-top: 16px;
  backdrop-filter: blur(18px);
}

.nav__menu {
  justify-self: center;
}

.nav__mark {
  align-items: center;
  display: inline-flex;
  height: 52px;
  min-width: 148px;
}

.bundled-logo,
.custom-logo {
  display: block;
  max-height: 58px;
  max-width: 178px;
  object-fit: contain;
  width: auto;
}

.nav__links a,
.nav__status {
  color: #348fcb;
  font-weight: 900;
  opacity: 0.92;
  transition: transform 0.22s ease, color 0.22s ease, opacity 0.22s ease;
}

.nav__links a:hover,
.nav__status:hover {
  color: #1c1e3e;
  opacity: 1;
  transform: scale(1.08) translateY(-1px);
}

.nav__links a {
  display: inline-block;
}

.nav__status {
  display: inline-flex;
  justify-self: end;
}

.nav__dot {
  background: #52aece;
}

.nav__toggle {
  align-items: center;
  background: #348fcb;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(52, 143, 203, 0.22);
  cursor: pointer;
  display: none;
  height: 42px;
  justify-content: center;
  padding: 0;
  width: 42px;
}

.nav__toggle span:not(.screen-reader-text) {
  background: #ffffff;
  border-radius: 999px;
  display: block;
  height: 2px;
  margin: 3px 0;
  width: 19px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.hero {
  background:
    radial-gradient(circle at 52% 45%, rgba(82, 174, 206, 0.16), transparent 38%),
    linear-gradient(180deg, #f8f9f9 0%, #eef1f2 58%, #e5e9ea 100%);
}

.hero::after {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(238, 241, 242, 0.25) 72%, rgba(238, 241, 242, 0.72) 100%),
    linear-gradient(to bottom, rgba(238, 241, 242, 0.3) 0%, transparent 24%, transparent 70%, rgba(238, 241, 242, 0.88) 100%);
}

.nav__links.menu {
  display: none;
}

@media (min-width: 860px) {
  .nav__links.menu {
    display: flex;
  }
}

@media (max-width: 859px) {
  .nav {
    align-items: center;
    display: flex;
    gap: 14px;
    min-height: 74px;
  }

  .nav__mark {
    min-width: 120px;
  }

  .bundled-logo,
  .custom-logo {
    max-height: 48px;
    max-width: 142px;
  }

  .nav__toggle {
    display: inline-flex;
    flex-direction: column;
    margin-left: auto;
  }

  .nav__menu {
    background: rgba(238, 241, 242, 0.97);
    border-bottom: 1px solid rgba(28, 30, 62, 0.1);
    box-shadow: 0 18px 40px rgba(28, 30, 62, 0.08);
    display: none;
    left: 0;
    padding: 18px var(--gutter) 22px;
    position: absolute;
    right: 0;
    top: 74px;
  }

  .nav__menu.is-open {
    display: block;
  }

  .nav__menu .nav__links,
  .nav__menu .menu {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .nav__status {
    margin-left: 0;
  }
}

.hero__canvas {
  background:
    radial-gradient(circle at 50% 42%, rgba(82, 174, 206, 0.18), transparent 34%),
    radial-gradient(circle at 30% 72%, rgba(28, 30, 62, 0.08), transparent 32%);
  filter: none;
}

.hero__canvas--ready {
  opacity: 1;
}

.hero-gallery {
  inset: 0;
  overflow: hidden;
  perspective: 1200px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.hero-gallery::after {
  background:
    radial-gradient(ellipse at center, transparent 24%, rgba(238, 241, 242, 0.08) 62%, rgba(238, 241, 242, 0.62) 95%),
    linear-gradient(to bottom, rgba(238, 241, 242, 0.2), transparent 42%, rgba(238, 241, 242, 0.38));
  content: "";
  inset: 0;
  position: absolute;
}

.hero-gallery__orbit {
  animation: heroOrbit 28s ease-in-out infinite alternate;
  height: min(70vh, 720px);
  left: 50%;
  position: absolute;
  top: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(-3deg);
  width: min(82vw, 1120px);
}

@keyframes heroOrbit {
  0% {
    transform: translate(-50%, -50%) rotateX(-3deg) rotateY(-5deg);
  }
  50% {
    transform: translate(-50%, -50%) rotateX(1deg) rotateY(4deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(-4deg) rotateY(8deg);
  }
}

.hero-gallery__panel {
  background: #ffffff;
  border: 1px solid rgba(28, 30, 62, 0.12);
  box-shadow: 0 24px 70px rgba(28, 30, 62, 0.14);
  height: clamp(150px, 29vh, 340px);
  left: 50%;
  margin: 0;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform-style: preserve-3d;
  width: clamp(150px, 19vw, 270px);
}

.hero-gallery__panel img {
  display: block;
  filter: saturate(0.98) contrast(1.02);
  height: 100%;
  object-fit: contain;
  padding: 12px;
  width: 100%;
}

.hero-gallery__panel--1 {
  animation: heroFloatA 12s ease-in-out infinite;
  transform: translate3d(-560px, -248px, -120px) rotateY(34deg) rotateZ(-2deg);
}

.hero-gallery__panel--2 {
  animation: heroFloatB 14s ease-in-out infinite;
  transform: translate3d(-390px, -218px, 30px) rotateY(16deg);
}

.hero-gallery__panel--3 {
  animation: heroFloatC 13s ease-in-out infinite;
  height: clamp(220px, 39vh, 440px);
  transform: translate3d(-155px, -180px, 120px) rotateY(-3deg);
  width: clamp(185px, 24vw, 340px);
}

.hero-gallery__panel--4 {
  animation: heroFloatA 15s ease-in-out infinite reverse;
  transform: translate3d(160px, -138px, 28px) rotateY(-20deg);
}

.hero-gallery__panel--5 {
  animation: heroFloatB 11s ease-in-out infinite reverse;
  transform: translate3d(410px, -228px, -80px) rotateY(-34deg);
}

.hero-gallery__panel--6 {
  animation: heroFloatC 12.5s ease-in-out infinite reverse;
  transform: translate3d(500px, 42px, -40px) rotateY(-34deg);
}

.hero-gallery__panel--7 {
  animation: heroFloatB 13.5s ease-in-out infinite;
  transform: translate3d(-440px, 128px, -10px) rotateY(28deg);
}

.hero-gallery__panel--8 {
  animation: heroFloatA 16s ease-in-out infinite;
  transform: translate3d(-150px, 154px, 85px) rotateY(4deg);
}

.hero-gallery__panel--9 {
  animation: heroFloatC 14.5s ease-in-out infinite;
  transform: translate3d(170px, 172px, 18px) rotateY(-16deg);
}

.hero-gallery__panel--10 {
  animation: heroFloatB 15.5s ease-in-out infinite reverse;
  transform: translate3d(410px, 118px, -140px) rotateY(-38deg);
}

@keyframes heroFloatA {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -22px; }
}

@keyframes heroFloatB {
  0%, 100% { margin-top: 0; }
  50% { margin-top: 18px; }
}

@keyframes heroFloatC {
  0%, 100% { margin-left: 0; margin-top: 0; }
  50% { margin-left: 14px; margin-top: -12px; }
}

.hero__topbar,
.hero__core,
.hero__bottom {
  z-index: 3;
}

.hero__title {
  color: #1c1e3e;
  text-shadow: 0 12px 45px rgba(238, 241, 242, 0.92);
}

.hero__line--italic,
.section__label,
.contact__email:hover,
.contact__col a:hover {
  color: #52aece;
}

.hero__eyebrow,
.hero__topbar,
.hero__caption,
.hero__scroll,
.hero__signoff,
.section__body,
.contact__label,
.contact__col p:not(.contact__label),
.footer {
  color: #66707c;
}

.page-stack {
  background: #eef1f2;
  border-top-color: rgba(28, 30, 62, 0.1);
}

.section {
  border-bottom-color: rgba(28, 30, 62, 0.1);
}

.work-grid {
  display: grid;
  gap: clamp(18px, 2.2vw, 34px);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.work-card {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(28, 30, 62, 0.12);
  cursor: zoom-in;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.work-card:hover {
  border-color: rgba(82, 174, 206, 0.65);
  transform: translateY(-4px);
}

.work-card img {
  background: #ffffff;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: contain;
  padding: 18px;
  width: 100%;
}

.work-grid--web .work-card img,
.work-grid--banner .work-card img,
.work-grid--corporate .work-card img,
.work-grid--label .work-card img {
  aspect-ratio: 16 / 10;
}

.work-grid--banner {
  grid-template-columns: 1fr;
}

.work-grid--banner .work-card img {
  aspect-ratio: 16 / 7;
}

@media (min-width: 900px) {
  .work-grid--banner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hero-gallery__panel img[src$=".svg"],
.work-card img[src$=".svg"] {
  background: transparent;
}

.reference-lightbox {
  align-items: center;
  background: rgba(238, 243, 244, 0.88);
  backdrop-filter: blur(16px);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding: clamp(18px, 4vw, 54px);
  pointer-events: none;
  position: fixed;
  transition: opacity 0.25s ease;
  z-index: 9999;
}

.reference-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.reference-lightbox__inner {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(28, 30, 62, 0.12);
  box-shadow: 0 28px 80px rgba(28, 30, 62, 0.18);
  max-height: 88vh;
  max-width: min(1180px, 94vw);
  padding: clamp(12px, 2vw, 22px);
  position: relative;
  transform: scale(0.96);
  transition: transform 0.25s ease;
  width: fit-content;
}

.reference-lightbox.is-open .reference-lightbox__inner {
  transform: scale(1);
}

.reference-lightbox img {
  display: block;
  max-height: calc(88vh - 82px);
  max-width: min(1120px, 88vw);
  object-fit: contain;
  width: auto;
}

.reference-lightbox__caption {
  color: #66707c;
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  margin-top: 14px;
  text-align: center;
  text-transform: uppercase;
}

.reference-lightbox__close {
  align-items: center;
  background: #52aece;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(82, 174, 206, 0.32);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 25px;
  height: 42px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: -14px;
  top: -14px;
  width: 42px;
}

body.reference-lightbox-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .reference-lightbox {
    padding: 14px;
  }

  .reference-lightbox__inner {
    max-width: 94vw;
    padding: 10px;
  }

  .reference-lightbox img {
    max-height: 78vh;
    max-width: calc(94vw - 20px);
  }

  .reference-lightbox__close {
    right: 8px;
    top: 8px;
  }
}

.testimonial-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 56px;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(28, 30, 62, 0.12);
  padding: clamp(22px, 3vw, 34px);
}

.testimonial-card p {
  color: #1c1e3e;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.16;
  margin: 0 0 24px;
}

.testimonial-card span {
  color: #66707c;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

.work-card span {
  color: #66707c;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-references .section__inner {
  overflow: hidden;
}

.reference-slider {
  margin-top: clamp(28px, 4vw, 54px);
}

.reference-slider + .reference-slider {
  margin-top: clamp(34px, 5vw, 72px);
}

.reference-slider__head {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.reference-slider__head h3 {
  color: #1c1e3e;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 520;
  line-height: 1;
  margin: 0;
}

.reference-slider__head a {
  color: #66707c;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.reference-slider__viewport {
  margin-inline: calc(clamp(18px, 4vw, 58px) * -1);
  overflow: hidden;
  padding: 8px clamp(18px, 4vw, 58px) 18px;
  position: relative;
}

.reference-slider__viewport::before,
.reference-slider__viewport::after {
  display: none;
}

.reference-slider__viewport::before {
  background: linear-gradient(90deg, var(--bg), rgba(238, 243, 244, 0));
  left: 0;
}

.reference-slider__viewport::after {
  background: linear-gradient(270deg, var(--bg), rgba(238, 243, 244, 0));
  right: 0;
}

.reference-slider__track {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  width: max-content;
  will-change: transform;
}

.reference-slider.is-marquee .reference-slider__track {
  animation: referenceMarquee 64s linear infinite;
  animation-play-state: paused;
}

.reference-slider.is-marquee.is-in-view .reference-slider__track {
  animation-play-state: running;
}

.reference-slider.is-static .reference-slider__track {
  flex-wrap: wrap;
  width: 100%;
}

.reference-slider.is-marquee.is-in-view:hover .reference-slider__track {
  animation-play-state: paused;
}

.reference-slider.is-marquee:nth-of-type(even) .reference-slider__track {
  animation-direction: reverse;
  animation-duration: 74s;
}

.reference-slider__card {
  flex: 0 0 clamp(230px, 27vw, 380px);
  transform-origin: center;
}

.reference-slider__card:hover {
  transform: translateY(-6px) scale(1.015);
}

.reference-slider--banner .reference-slider__card,
.reference-slider--web .reference-slider__card,
.reference-slider--corporate .reference-slider__card,
.reference-slider--label .reference-slider__card {
  flex-basis: clamp(290px, 38vw, 560px);
}

@keyframes referenceMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 760px) {
  .reference-slider__head {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }

  .reference-slider__viewport {
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .reference-slider.is-marquee .reference-slider__track {
    animation-duration: 88s;
  }

  .reference-slider__card {
    flex-basis: min(78vw, 330px);
    scroll-snap-align: start;
  }

  .reference-slider--banner .reference-slider__card,
  .reference-slider--web .reference-slider__card,
  .reference-slider--corporate .reference-slider__card,
  .reference-slider--label .reference-slider__card {
    flex-basis: min(86vw, 430px);
  }
}

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

.empty-reference {
  align-items: center;
  background: rgba(255, 255, 255, 0.48);
  border: 1px dashed rgba(28, 30, 62, 0.18);
  color: #66707c;
  display: flex;
  font-family: var(--font-mono);
  font-size: 11px;
  justify-content: center;
  letter-spacing: 0.14em;
  min-height: 220px;
  padding: 32px;
  text-align: center;
  text-transform: uppercase;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 38px;
}

.tab-button,
.request-form button,
.editorial-button {
  background: transparent;
  border: 1px solid rgba(28, 30, 62, 0.16);
  color: #1c1e3e;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  min-height: 44px;
  padding: 12px 16px;
  text-transform: uppercase;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.tab-button.is-active,
.tab-button:hover,
.request-form button:hover,
.editorial-button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

.contact-layout {
  display: grid;
  gap: clamp(36px, 6vw, 80px);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.form-panel {
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(28, 30, 62, 0.12);
  padding: clamp(22px, 4vw, 42px);
}

.request-form {
  display: grid;
  gap: 18px;
}

.request-form label {
  color: #66707c;
  display: grid;
  font-family: var(--font-mono);
  font-size: 11px;
  gap: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.request-form input,
.request-form textarea {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(28, 30, 62, 0.14);
  color: #1c1e3e;
  font: 16px/1.5 var(--font-body);
  padding: 13px 14px;
  width: 100%;
}

.request-form textarea {
  resize: vertical;
}

.form-notice {
  border: 1px solid rgba(82, 174, 206, 0.55);
  color: #1c1e3e;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  padding: 14px 16px;
}

.wp-page-content {
  max-width: 960px;
}

.wp-page-content .section__body > * + * {
  margin-top: 1.2em;
}

.featured-frame {
  border: 1px solid rgba(28, 30, 62, 0.12);
  margin-bottom: 34px;
  padding: 14px;
}

.featured-frame img {
  display: block;
  width: 100%;
}

.pagination,
.nav-links {
  color: var(--fg-dim);
  display: flex;
  gap: 14px;
  margin-top: 34px;
}

@media (max-width: 760px) {
  .hero-gallery__orbit {
    height: 64vh;
    width: 100vw;
  }

  .hero-gallery__panel {
    opacity: 0.78;
    width: clamp(92px, 28vw, 150px);
    height: clamp(130px, 34vh, 230px);
  }

  .hero-gallery__panel--1,
  .hero-gallery__panel--5,
  .hero-gallery__panel--10 {
    display: none;
  }

  .hero-gallery__panel--2 { transform: translate3d(-220px, -190px, -20px) rotateY(24deg); }
  .hero-gallery__panel--3 { transform: translate3d(-80px, -155px, 90px) rotateY(-4deg); }
  .hero-gallery__panel--4 { transform: translate3d(92px, -120px, 10px) rotateY(-24deg); }
  .hero-gallery__panel--6 { transform: translate3d(145px, 74px, -40px) rotateY(-26deg); }
  .hero-gallery__panel--7 { transform: translate3d(-190px, 82px, -20px) rotateY(26deg); }
  .hero-gallery__panel--8 { transform: translate3d(-54px, 112px, 50px) rotateY(4deg); }
  .hero-gallery__panel--9 { transform: translate3d(62px, 126px, -10px) rotateY(-18deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-gallery__orbit,
  .hero-gallery__panel {
    animation: none;
  }
}

/* Odak v1.0.3: cleaner hero, smaller title, transparent carousel shifted right. */
.hero {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  min-height: 100vh;
  padding-top: 86px;
}

.hero__topbar,
.hero__eyebrow,
.hero__core,
.hero__title,
.hero__caption,
.hero__signoff {
  display: none !important;
}

.hero-headline {
  left: 50%;
  max-width: min(92vw, 1320px);
  position: absolute;
  text-align: center;
  top: clamp(108px, 15vh, 150px);
  transform: translateX(-50%);
  width: 100%;
  z-index: 4;
}

.hero-headline h1 {
  color: #1c1e3e;
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 104px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.96;
  margin: 0;
  white-space: nowrap;
}

.hero-headline em {
  color: #52aece;
  font-style: italic;
  font-weight: 500;
}

.hero-gallery {
  perspective: 1800px;
}

.hero-gallery__orbit {
  animation: odakCarouselSpin 34s linear infinite;
  height: 520px;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%) rotateX(-7deg);
  transform-style: preserve-3d;
  width: 980px;
}

.hero-gallery__panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  height: 260px;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  width: 360px;
}

.hero-gallery__panel img {
  filter: saturate(1.02) contrast(1.03);
  height: 100%;
  object-fit: contain;
  padding: 0;
  width: 100%;
}

.hero-gallery__panel img[src*="logo-raster"] {
  transform: scale(0.82);
  transform-origin: center;
}

.hero-gallery__panel--1 {
  animation: none;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(520px);
}

.hero-gallery__panel--2 {
  animation: none;
  transform: translate(-50%, -50%) rotateY(30deg) translateZ(520px);
}

.hero-gallery__panel--3 {
  animation: none;
  height: 260px;
  transform: translate(-50%, -50%) rotateY(60deg) translateZ(520px);
  width: 360px;
}

.hero-gallery__panel--4 {
  animation: none;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(520px);
}

.hero-gallery__panel--5 {
  animation: none;
  transform: translate(-50%, -50%) rotateY(120deg) translateZ(520px);
}

.hero-gallery__panel--6 {
  animation: none;
  transform: translate(-50%, -50%) rotateY(150deg) translateZ(520px);
}

.hero-gallery__panel--7 {
  animation: none;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(520px);
}

.hero-gallery__panel--8 {
  animation: none;
  transform: translate(-50%, -50%) rotateY(210deg) translateZ(520px);
}

.hero-gallery__panel--9 {
  animation: none;
  transform: translate(-50%, -50%) rotateY(240deg) translateZ(520px);
}

.hero-gallery__panel--10 {
  animation: none;
  transform: translate(-50%, -50%) rotateY(270deg) translateZ(520px);
}

.hero-gallery__panel--11 {
  animation: none;
  transform: translate(-50%, -50%) rotateY(300deg) translateZ(520px);
}

.hero-gallery__panel--12 {
  animation: none;
  transform: translate(-50%, -50%) rotateY(330deg) translateZ(520px);
}

@keyframes odakCarouselSpin {
  from {
    transform: translate(-50%, -50%) rotateX(-7deg) rotateY(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-360deg);
  }
}

.project-counter {
  align-items: center;
  bottom: clamp(24px, 4.5vh, 54px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  left: 50%;
  pointer-events: auto;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  transition: transform 220ms ease, filter 220ms ease;
  width: min(58vw, 360px);
  z-index: 8;
}

.project-counter:hover {
  filter: drop-shadow(0 18px 34px rgba(82, 174, 206, 0.18));
  transform: translateX(-50%) scale(1.07);
}

.project-counter__label {
  align-self: flex-start;
  color: #52aece;
  filter: drop-shadow(0 0 10px rgba(82, 174, 206, 0.28));
  font-family: var(--font-mono);
  font-size: clamp(16px, 2.1vw, 24px);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  margin-left: 10px;
  text-transform: uppercase;
}

.project-counter__bar {
  background: rgba(255, 255, 255, 0.42);
  border: 2px solid #52aece;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.62) inset,
    0 0 18px rgba(82, 174, 206, 0.42),
    0 0 34px rgba(82, 174, 206, 0.18);
  height: 18px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.project-counter__bar span {
  animation: projectBarFill 2.2s cubic-bezier(.22,.9,.25,1) forwards;
  background: linear-gradient(90deg, #52aece, #39d6ef, #348fcb);
  border-radius: inherit;
  box-shadow: 0 0 16px rgba(82, 174, 206, 0.7);
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  width: 100%;
}

.project-counter__bar::after {
  animation: projectBarShine 1.35s ease-in-out 0.35s 2;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(-100%);
}

.project-counter__value {
  align-items: baseline;
  color: #52aece;
  display: inline-flex;
  filter: drop-shadow(0 0 11px rgba(82, 174, 206, 0.34));
  font-family: var(--font-mono);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 900;
  justify-content: center;
  letter-spacing: 0.03em;
  line-height: 1;
}

.project-counter__plus {
  color: #52aece;
  font-size: 0.72em;
  font-weight: 900;
  margin-left: 3px;
}

@keyframes projectBarFill {
  to { transform: scaleX(1); }
}

@keyframes projectBarShine {
  to { transform: translateX(100%); }
}

@media (min-width: 1200px) {
  .hero-gallery__orbit {
    height: 560px;
    left: 50%;
    width: 1180px;
  }

  .hero-gallery__panel {
    height: 280px;
    width: 390px;
  }

  .hero-gallery__panel--1 { transform: translate(-50%, -50%) rotateY(0deg) translateZ(620px); }
  .hero-gallery__panel--2 { transform: translate(-50%, -50%) rotateY(30deg) translateZ(620px); }
  .hero-gallery__panel--3 { transform: translate(-50%, -50%) rotateY(60deg) translateZ(620px); height: 280px; width: 390px; }
  .hero-gallery__panel--4 { transform: translate(-50%, -50%) rotateY(90deg) translateZ(620px); }
  .hero-gallery__panel--5 { transform: translate(-50%, -50%) rotateY(120deg) translateZ(620px); }
  .hero-gallery__panel--6 { transform: translate(-50%, -50%) rotateY(150deg) translateZ(620px); }
  .hero-gallery__panel--7 { transform: translate(-50%, -50%) rotateY(180deg) translateZ(620px); }
  .hero-gallery__panel--8 { transform: translate(-50%, -50%) rotateY(210deg) translateZ(620px); }
  .hero-gallery__panel--9 { transform: translate(-50%, -50%) rotateY(240deg) translateZ(620px); }
  .hero-gallery__panel--10 { transform: translate(-50%, -50%) rotateY(270deg) translateZ(620px); }
  .hero-gallery__panel--11 { transform: translate(-50%, -50%) rotateY(300deg) translateZ(620px); }
  .hero-gallery__panel--12 { transform: translate(-50%, -50%) rotateY(330deg) translateZ(620px); }
}

@media (max-width: 760px) {
  .hero-gallery__orbit {
    animation-duration: 82s;
    height: 430px;
    left: 50%;
    width: 620px;
  }

  .hero-gallery__panel {
    display: block;
    height: 210px;
    opacity: 0.86;
    width: 290px;
  }

  .hero-gallery__panel--1 { transform: translate(-50%, -50%) rotateY(0deg) translateZ(360px); }
  .hero-gallery__panel--2 { transform: translate(-50%, -50%) rotateY(45deg) translateZ(360px); }
  .hero-gallery__panel--3 { transform: translate(-50%, -50%) rotateY(90deg) translateZ(360px); height: 210px; width: 290px; }
  .hero-gallery__panel--4 { transform: translate(-50%, -50%) rotateY(135deg) translateZ(360px); }
  .hero-gallery__panel--5 { transform: translate(-50%, -50%) rotateY(180deg) translateZ(360px); }
  .hero-gallery__panel--6 { transform: translate(-50%, -50%) rotateY(225deg) translateZ(360px); }
  .hero-gallery__panel--7 { transform: translate(-50%, -50%) rotateY(270deg) translateZ(360px); }
  .hero-gallery__panel--8 { transform: translate(-50%, -50%) rotateY(315deg) translateZ(360px); }
  .hero-gallery__panel--9,
  .hero-gallery__panel--10 {
    display: none;
  }

  .project-counter {
    bottom: 34px;
    gap: 9px;
    width: min(78vw, 270px);
  }

  .project-counter__label {
    font-size: 15px;
  }

  .project-counter__value {
    font-size: clamp(25px, 7.4vw, 35px);
  }
}

@media (max-width: 760px) {
  .hero__title {
    font-size: clamp(42px, 14vw, 76px);
    max-width: 9.5ch;
  }

  .hero-headline {
    top: 132px;
  }

  .hero-headline h1 {
    font-size: clamp(30px, 8.6vw, 50px);
    white-space: normal;
  }
}

/* Odak v1.3.6: balanced mobile hero rhythm without logo/text collision. */
@media (max-width: 760px) {
  .hero {
    min-height: 72vh;
    min-height: 72svh;
  }

  .hero-gallery__orbit {
    top: 49%;
  }

  .hero-gallery__panel {
    height: 176px;
    opacity: 0.72;
    width: 246px;
  }
}

.satisfaction-strip-section {
  overflow: hidden;
}

.review-marquee {
  margin-top: 16px;
  overflow: hidden;
  width: 100%;
}

.review-marquee__track {
  animation: reviewMarquee 34s linear infinite;
  display: flex;
  gap: 18px;
  padding: 8px var(--gutter) 22px;
  width: max-content;
}

.review-pill {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(28, 30, 62, 0.1);
  min-height: 190px;
  padding: 26px;
  width: clamp(290px, 30vw, 460px);
}

.review-pill p {
  color: #1c1e3e;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 42px);
  line-height: 1.08;
  margin: 0 0 24px;
}

.review-pill span {
  color: #52aece;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

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

/* Odak v1.0.8: Google-style satisfaction cards with hover focus. */
.satisfaction-strip-section {
  overflow: hidden;
}

.review-marquee {
  overflow: visible;
  padding: 8px 0 28px;
}

.review-marquee__track {
  animation: reviewMarquee 58s linear infinite;
  align-items: stretch;
}

.review-marquee:hover .review-marquee__track {
  animation-play-state: paused;
}

.review-pill {
  background: #ffffff;
  border: 1px solid #dbe1e7;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(28, 30, 62, 0.06);
  color: #0f172a;
  min-height: 168px;
  padding: 20px 22px;
  position: relative;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
  width: clamp(430px, 46vw, 720px);
  z-index: 1;
}

.review-pill:hover {
  border-color: rgba(82, 174, 206, 0.62);
  box-shadow: 0 22px 60px rgba(28, 30, 62, 0.17);
  transform: scale(1.045) translateY(-6px);
  z-index: 20;
}

.review-pill__meta {
  align-items: baseline;
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}

.review-pill__meta strong {
  color: #020617;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
}

.review-pill__meta span {
  color: #64748b;
  font-family: var(--font-body);
  font-size: 14px;
}

.review-pill__service {
  color: #64748b !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  margin: 0 0 8px !important;
}

.review-pill__stars {
  color: #f6b40f;
  font-family: Arial, sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 1;
  margin: 0 0 14px;
}

.review-pill__text {
  color: #020617 !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.52 !important;
  margin: 0 !important;
}

.review-card-grid {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 56px;
}

.review-pill--static {
  width: auto;
}

@media (max-width: 860px) {
  .review-card-grid {
    grid-template-columns: 1fr;
  }

  .review-pill {
    width: min(86vw, 560px);
  }
}

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

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

.footer__links a {
  color: #348fcb;
  font-weight: 800;
  text-decoration: none;
  transition: color 0.22s ease, transform 0.22s ease;
}

.footer__links a:hover {
  color: #1c1e3e;
  transform: scale(1.06) translateY(-1px);
}

.contact__columns--seo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 30px;
}

.seo-hero {
  padding-top: clamp(140px, 17vw, 230px);
}

.seo-hero__inner {
  max-width: 1120px;
}

.seo-hero__intro {
  color: #64748b;
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.55;
  margin: 26px 0 0;
  max-width: 780px;
}

.seo-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.button-link {
  align-items: center;
  background: #348fcb;
  border: 1px solid #348fcb;
  color: #ffffff;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0.18em;
  min-height: 46px;
  padding: 0 22px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.button-link:hover {
  background: #1c1e3e;
  border-color: #1c1e3e;
  transform: scale(1.045) translateY(-2px);
}

.button-link--light {
  background: rgba(255, 255, 255, 0.62);
  color: #1c1e3e;
}

.seo-grid {
  display: grid;
  gap: clamp(28px, 5vw, 78px);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr);
}

.seo-copy .section__body + .section__body {
  margin-top: 18px;
}

.seo-card {
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(28, 30, 62, 0.1);
  box-shadow: 0 18px 48px rgba(28, 30, 62, 0.08);
  padding: 28px;
}

.seo-points {
  color: #1c1e3e;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.seo-points li {
  border-top: 1px solid rgba(28, 30, 62, 0.08);
  padding: 13px 0;
}

.seo-points li::before {
  color: #348fcb;
  content: "•";
  font-weight: 900;
  margin-right: 10px;
}

.seo-related__links {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 26px;
}

.seo-related__links a {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(28, 30, 62, 0.1);
  color: #1c1e3e;
  font-family: var(--font-body);
  font-weight: 800;
  padding: 18px;
  text-decoration: none;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.seo-related__links a:hover {
  border-color: rgba(52, 143, 203, 0.55);
  box-shadow: 0 18px 44px rgba(28, 30, 62, 0.1);
  transform: scale(1.035) translateY(-2px);
}

@media (max-width: 900px) {
  .footer,
  .footer__brand,
  .footer__links {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact__columns--seo,
  .seo-grid,
  .seo-related__links {
    grid-template-columns: 1fr;
  }
}

.packages-page {
  overflow: hidden;
}

.section {
  position: relative;
}

.section > .section__inner {
  position: relative;
  z-index: 2;
}

.rotating-brand-icon {
  pointer-events: none;
  position: absolute;
  transform-style: preserve-3d;
  z-index: 0;
}

.rotating-brand-icon::after {
  background: radial-gradient(circle, rgba(28, 30, 62, 0.16), transparent 68%);
  border-radius: 999px;
  content: "";
  filter: blur(18px);
  height: 18%;
  left: 22%;
  opacity: 0.34;
  position: absolute;
  top: 78%;
  transform: rotateX(72deg);
  width: 58%;
}

.rotating-brand-icon img {
  animation: odak-icon-spin 8.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  display: block;
  filter: drop-shadow(0 28px 42px rgba(28, 30, 62, 0.18));
  height: auto;
  opacity: 0.18;
  transform-origin: 50% 50%;
  width: 100%;
}

.rotating-brand-icon--products {
  right: clamp(32px, 8vw, 150px);
  top: clamp(120px, 16vw, 220px);
  width: clamp(220px, 27vw, 440px);
}

.rotating-brand-icon--products img {
  opacity: 0.2;
}

.rotating-brand-icon--home {
  right: clamp(20px, 7vw, 110px);
  top: clamp(20px, 4vw, 70px);
  width: clamp(140px, 18vw, 280px);
}

.rotating-brand-icon--home img {
  opacity: 0.12;
}

@keyframes odak-icon-spin {
  0% {
    transform: perspective(900px) rotateY(0deg) rotateX(10deg) translateZ(0);
  }

  50% {
    transform: perspective(900px) rotateY(180deg) rotateX(-8deg) translateZ(26px);
  }

  100% {
    transform: perspective(900px) rotateY(360deg) rotateX(10deg) translateZ(0);
  }
}

.packages-hero {
  padding-bottom: 32px;
  padding-top: clamp(135px, 16vw, 220px);
  position: relative;
}

.packages-hero__inner {
  max-width: 1120px;
  position: relative;
  z-index: 2;
}

.packages-hero__copy {
  color: #64748b;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.8vw, 24px);
  line-height: 1.58;
  margin: 28px 0 0;
  max-width: 820px;
}

.package-marquee {
  margin-top: clamp(36px, 6vw, 72px);
  overflow: visible;
  position: relative;
}

.package-marquee::before,
.package-marquee::after {
  content: "";
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 14vw;
  z-index: 3;
}

.package-marquee::before {
  background: linear-gradient(90deg, #eef1f2, rgba(238, 241, 242, 0));
  left: 0;
}

.package-marquee::after {
  background: linear-gradient(270deg, #eef1f2, rgba(238, 241, 242, 0));
  right: 0;
}

.package-marquee__track {
  animation: package-slide 34s linear infinite;
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
}

.package-marquee:hover .package-marquee__track {
  animation-play-state: paused;
}

.package-ticker {
  align-items: center;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(28, 30, 62, 0.11);
  box-shadow: 0 18px 46px rgba(28, 30, 62, 0.08);
  color: #1c1e3e;
  display: grid;
  gap: 6px;
  min-height: 156px;
  padding: 22px;
  text-decoration: none;
  transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
  width: clamp(260px, 24vw, 390px);
}

.package-ticker:hover {
  border-color: rgba(52, 143, 203, 0.62);
  box-shadow: 0 24px 70px rgba(28, 30, 62, 0.15);
  transform: scale(1.045) translateY(-6px);
  z-index: 8;
}

.package-ticker span,
.package-ticker em,
.package-card__no,
.package-card__tag,
.package-card__meta span {
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.package-ticker span {
  color: #348fcb;
  font-size: 12px;
  font-weight: 900;
}

.package-ticker strong {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 44px);
  font-weight: 500;
  line-height: 0.98;
}

.package-ticker em {
  color: #64748b;
  font-size: 10px;
  font-style: normal;
}

@keyframes package-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 9px));
  }
}

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

.package-card {
  background:
    radial-gradient(circle at 85% 12%, rgba(82, 174, 206, 0.13), transparent 34%),
    rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(28, 30, 62, 0.1);
  box-shadow: 0 18px 48px rgba(28, 30, 62, 0.07);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(22px, 2.6vw, 34px);
  position: relative;
  transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.package-card:hover {
  border-color: rgba(52, 143, 203, 0.58);
  box-shadow: 0 28px 78px rgba(28, 30, 62, 0.15);
  transform: scale(1.025) translateY(-8px);
  z-index: 5;
}

.package-card__top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.package-card__no {
  color: #348fcb;
  font-size: 12px;
  font-weight: 900;
}

.package-card__tag {
  color: #64748b;
  font-size: 10px;
}

.package-card h2 {
  color: #1c1e3e;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 58px);
  font-weight: 500;
  line-height: 0.96;
  margin: 34px 0 18px;
}

.package-card__summary {
  color: #475569;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}

.package-card__meta {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.package-card__meta div {
  border-top: 1px solid rgba(28, 30, 62, 0.08);
  padding-top: 14px;
}

.package-card__meta span {
  color: #348fcb;
  display: block;
  font-size: 10px;
  font-weight: 900;
  margin-bottom: 6px;
}

.package-card__meta p {
  color: #1c1e3e;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.package-card__items {
  color: #1c1e3e;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.package-card__items li {
  padding-left: 18px;
  position: relative;
}

.package-card__items li::before {
  color: #348fcb;
  content: "•";
  font-weight: 900;
  left: 0;
  position: absolute;
}

.package-card__button {
  margin-top: auto;
  width: fit-content;
}

@media (max-width: 1100px) {
  .package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .rotating-brand-icon--products {
    opacity: 0.72;
    right: -72px;
    top: 126px;
    width: 230px;
  }

  .rotating-brand-icon--home {
    right: -44px;
    top: 24px;
    width: 150px;
  }

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

  .package-ticker {
    width: min(82vw, 340px);
  }

  .package-card:hover {
    transform: translateY(-5px);
  }
}

#services {
  display: none;
}

.service-materials-section {
  overflow: hidden;
}

.service-materials {
  display: grid;
  gap: 0;
  margin-top: clamp(46px, 6vw, 84px);
}

.service-material {
  align-items: center;
  border-top: 1px solid rgba(28, 30, 62, 0.13);
  color: #1c1e3e;
  display: grid;
  gap: clamp(24px, 5vw, 80px);
  grid-template-columns: minmax(220px, 0.75fr) minmax(320px, 1fr);
  min-height: clamp(320px, 34vw, 500px);
  padding: clamp(34px, 5vw, 74px) 0;
  text-decoration: none;
  transform-style: preserve-3d;
}

.service-material:hover .material-stage {
  transform: scale(1.035) translateY(-8px);
}

.service-material__copy {
  max-width: 410px;
}

.service-material__no {
  color: rgba(28, 30, 62, 0.42);
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 26px;
}

.service-material h3 {
  color: #1c1e3e;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 74px);
  font-weight: 500;
  line-height: 0.98;
  margin: 0;
}

.service-material p {
  color: #66707c;
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1.38;
  margin: 28px 0 0;
}

.material-stage {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: clamp(250px, 30vw, 430px);
  perspective: 1100px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.35s ease;
}

.material-shadow {
  background: radial-gradient(ellipse, rgba(28, 30, 62, 0.22), transparent 68%);
  bottom: clamp(10px, 3vw, 44px);
  filter: blur(18px);
  height: 34px;
  left: 50%;
  opacity: 0.42;
  position: absolute;
  transform: translateX(-50%);
  width: min(360px, 58%);
}

.brand-sheet,
.brand-card,
.laptop-mockup,
.box-mockup {
  transform-style: preserve-3d;
}

.brand-sheet {
  align-items: center;
  animation: brand-sheet-float 7s ease-in-out infinite;
  background: linear-gradient(145deg, #ffffff, #e8edf0);
  box-shadow: 0 24px 55px rgba(28, 30, 62, 0.14);
  display: flex;
  height: clamp(165px, 21vw, 280px);
  justify-content: center;
  position: absolute;
  transform: rotateY(-18deg) rotateX(9deg) translateZ(-20px);
  width: clamp(145px, 18vw, 250px);
}

.brand-sheet img {
  width: 58%;
}

.brand-card {
  align-items: center;
  animation: brand-card-float 6.4s ease-in-out infinite;
  border-radius: 12px;
  box-shadow: 0 20px 38px rgba(28, 30, 62, 0.22);
  display: flex;
  height: clamp(82px, 9vw, 126px);
  justify-content: center;
  position: absolute;
  width: clamp(128px, 15vw, 210px);
}

.brand-card img {
  max-height: 58%;
  max-width: 68%;
}

.brand-card--dark {
  background: #101936;
  transform: translate3d(-92px, 78px, 70px) rotateY(-22deg) rotateX(7deg);
}

.brand-card--blue {
  animation-delay: -1.6s;
  background: linear-gradient(135deg, #52aece, #1c8ec9);
  transform: translate3d(98px, 70px, 90px) rotateY(18deg) rotateX(9deg);
}

.brand-card--blue img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.laptop-mockup {
  animation: laptop-material-float 7.4s ease-in-out infinite;
  position: relative;
  transform: rotateX(10deg) rotateY(-18deg);
  width: clamp(300px, 38vw, 560px);
}

.laptop-screen {
  background: #0e1326;
  border: clamp(10px, 1.2vw, 16px) solid #121827;
  border-radius: 16px 16px 9px 9px;
  box-shadow: 0 28px 60px rgba(28, 30, 62, 0.2);
  min-height: clamp(190px, 21vw, 310px);
  overflow: hidden;
  padding: clamp(22px, 2.7vw, 42px);
  position: relative;
}

.laptop-screen::before {
  background: linear-gradient(135deg, #ffffff, #eef1f2);
  content: "";
  inset: 0;
  position: absolute;
}

.laptop-logo,
.laptop-icon,
.laptop-screen strong,
.laptop-screen span {
  position: relative;
  z-index: 1;
}

.laptop-logo {
  display: block;
  width: clamp(54px, 6vw, 86px);
}

.laptop-screen strong {
  color: #1c1e3e;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.7vw, 42px);
  font-weight: 600;
  line-height: 0.98;
  margin-top: 28px;
}

.laptop-screen span {
  background: #348fcb;
  border-radius: 999px;
  display: block;
  height: 16px;
  margin-top: 18px;
  width: 76px;
}

.laptop-icon {
  bottom: 28px;
  opacity: 0.96;
  position: absolute;
  right: 32px;
  width: clamp(78px, 10vw, 140px);
}

.laptop-base {
  background: linear-gradient(180deg, #d8dee3, #9fa9b1);
  border-radius: 0 0 30px 30px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 auto;
  padding: 12px 28px 18px;
  transform: perspective(500px) rotateX(64deg) translateY(-12px);
  width: 86%;
}

.laptop-base i {
  background: rgba(28, 30, 62, 0.34);
  border-radius: 4px;
  height: 8px;
}

.box-mockup {
  animation: box-material-spin 9s ease-in-out infinite;
  height: clamp(230px, 27vw, 390px);
  position: relative;
  transform: rotateX(-8deg) rotateY(-28deg);
  width: clamp(210px, 24vw, 340px);
}

.box-face {
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(28, 30, 62, 0.08);
  position: absolute;
  transform-style: preserve-3d;
}

.box-face--front {
  align-items: flex-start;
  background: linear-gradient(135deg, #ffffff, #eef1f2);
  display: flex;
  height: 100%;
  inset: 0;
  justify-content: center;
  padding-top: 42px;
  transform: translateZ(clamp(58px, 7vw, 100px));
  width: 100%;
}

.box-face--front img {
  width: 44%;
}

.box-face--front span {
  background: #348fcb;
  border-radius: 999px 0 0 0;
  bottom: 0;
  height: 38%;
  left: 0;
  position: absolute;
  width: 48%;
}

.box-face--side {
  align-items: center;
  background: #101936;
  color: #ffffff;
  display: grid;
  gap: 18px;
  height: 100%;
  left: 100%;
  padding: 30px 22px;
  top: 0;
  transform: rotateY(90deg);
  transform-origin: left center;
  width: clamp(116px, 14vw, 200px);
}

.box-face--side img {
  filter: brightness(0) invert(1);
  opacity: 0.82;
  width: 54px;
}

.box-face--side p {
  color: #ffffff;
  font-size: clamp(13px, 1.3vw, 18px);
  line-height: 1.25;
  margin: 0;
}

.box-face--top {
  background: linear-gradient(135deg, #f9fbfc, #d5dce1);
  height: clamp(116px, 14vw, 200px);
  left: 0;
  top: 0;
  transform: rotateX(90deg);
  transform-origin: top center;
  width: 100%;
}

@keyframes brand-sheet-float {
  0%, 100% { transform: rotateY(-18deg) rotateX(9deg) translate3d(0, 0, -20px); }
  50% { transform: rotateY(-8deg) rotateX(4deg) translate3d(0, -18px, 20px); }
}

@keyframes brand-card-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -18px; }
}

@keyframes laptop-material-float {
  0%, 100% { transform: rotateX(10deg) rotateY(-18deg) translateY(0); }
  50% { transform: rotateX(7deg) rotateY(-8deg) translateY(-18px); }
}

@keyframes box-material-spin {
  0%, 100% { transform: rotateX(-8deg) rotateY(-28deg) translateY(0); }
  50% { transform: rotateX(-4deg) rotateY(18deg) translateY(-20px); }
}

@media (max-width: 860px) {
  .hero,
  .hero-gallery,
  .page-stack,
  .section,
  .packages-page,
  .packages-hero,
  .service-materials-section,
  .satisfaction-strip-section,
  .review-marquee,
  .package-marquee {
    max-width: 100vw;
    overflow-x: clip;
  }

  @supports not (overflow: clip) {
    .hero,
    .hero-gallery,
    .page-stack,
    .section,
    .packages-page,
    .packages-hero,
    .service-materials-section,
    .satisfaction-strip-section,
    .review-marquee,
    .package-marquee {
      overflow-x: hidden;
    }
  }

  .hero-gallery__orbit {
    max-width: 100vw;
    width: 100vw;
  }

  .review-marquee {
    overflow: hidden;
  }

  .package-marquee {
    overflow: hidden;
  }

  .package-marquee__track,
  .review-marquee__track {
    will-change: transform;
  }

  .service-material,
  .material-stage,
  .laptop-mockup,
  .box-mockup {
    max-width: 100%;
  }

  .service-material {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .material-stage {
    min-height: 280px;
  }
}

@media (max-width: 760px) {
  .section {
    padding: 58px 0;
  }

  .section__label {
    margin-bottom: 18px;
  }

  .section__heading {
    margin-bottom: 34px;
  }

  .seo-related {
    padding-bottom: 46px;
  }

  .seo-related__links {
    gap: 14px;
    margin-top: 18px;
  }

  .seo-related__links a {
    padding: 16px;
  }

  .service-materials {
    margin-top: 28px;
  }

  .service-material {
    gap: 20px;
    min-height: 0;
    padding: 28px 0;
  }

  .service-material__no {
    margin-bottom: 14px;
  }

  .service-material p {
    margin-top: 16px;
  }

  .material-stage {
    min-height: 220px;
  }

  .reference-slider {
    margin-top: 24px;
  }

  .reference-slider + .reference-slider {
    margin-top: 34px;
  }

  .reference-slider__head {
    margin-bottom: 10px;
  }

  .reference-slider__viewport {
    padding-bottom: 8px;
  }
}

/* CookieAdmin: sade Türkçe KVKK görünümü */
[class*="cookie" i],
[id*="cookie" i] {
  font-family: var(--font-body);
}

[class*="cookie" i] button,
[id*="cookie" i] button {
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
}

[class*="cookie" i] button:not([aria-label]),
[id*="cookie" i] button:not([aria-label]) {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

[class*="cookie" i] button:hover,
[id*="cookie" i] button:hover {
  transform: translateY(-1px);
}

[class*="cookie" i] h1,
[class*="cookie" i] h2,
[class*="cookie" i] h3,
[id*="cookie" i] h1,
[id*="cookie" i] h2,
[id*="cookie" i] h3 {
  color: #1c1e3e !important;
  font-family: var(--font-body) !important;
  font-weight: 900 !important;
}

[class*="cookie" i] p,
[id*="cookie" i] p {
  color: #334155 !important;
  line-height: 1.5 !important;
}

[class*="cookie" i] a,
[id*="cookie" i] a {
  color: #348fcb !important;
}

@media (max-width: 760px) {
  [class*="cookie" i][role="dialog"],
  [id*="cookie" i][role="dialog"],
  [class*="cookie" i] [role="dialog"],
  [id*="cookie" i] [role="dialog"] {
    max-height: calc(100dvh - 28px) !important;
    max-width: calc(100vw - 24px) !important;
    overflow: auto !important;
  }
}

.whatsapp-chat {
  animation: whatsappWidgetIn 0.72s ease both, whatsappWidgetFloat 4.5s ease-in-out 0.9s infinite;
  background: #f2eadf;
  border-radius: 10px 10px 18px 18px;
  bottom: 24px;
  box-shadow: 0 22px 55px rgba(17, 24, 39, 0.2);
  color: #1f2937;
  display: block;
  font-family: var(--font-body);
  overflow: visible;
  position: fixed;
  right: 24px;
  text-decoration: none;
  width: min(278px, calc(100vw - 32px));
  z-index: 2147483000;
}

body .whatsapp-chat {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  visibility: visible !important;
}

.whatsapp-chat:hover {
  color: #1f2937;
  transform: translateY(-4px);
}

.whatsapp-chat__head {
  align-items: center;
  background: #006d5b;
  border-radius: 10px 10px 0 0;
  color: #ffffff;
  display: flex;
  gap: 9px;
  min-height: 54px;
  padding: 8px 12px;
}

.whatsapp-chat__avatar {
  background:
    radial-gradient(circle at 50% 30%, #777 0 22%, transparent 23%),
    radial-gradient(circle at 50% 108%, #777 0 48%, transparent 49%),
    #f8fafc;
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
  height: 38px;
  position: relative;
  width: 38px;
}

.whatsapp-chat__avatar::after {
  background: #27d35f;
  border: 2px solid #006d5b;
  border-radius: 999px;
  bottom: -1px;
  content: "";
  height: 8px;
  position: absolute;
  right: -1px;
  width: 8px;
}

.whatsapp-chat__person {
  display: grid;
  gap: 1px;
  line-height: 1.05;
}

.whatsapp-chat__person strong {
  font-size: 14px;
  font-weight: 900;
}

.whatsapp-chat__person small {
  color: #d7fff2;
  font-size: 11px;
  font-weight: 700;
}

.whatsapp-chat__close {
  color: rgba(255, 255, 255, 0.82);
  font-size: 22px;
  font-weight: 800;
  margin-left: auto;
  line-height: 1;
}

.whatsapp-chat__body {
  background:
    radial-gradient(circle at 14px 14px, rgba(255,255,255,0.5) 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(255,255,255,0.38), rgba(255,255,255,0.08));
  display: block;
  padding: 16px 16px 22px;
}

.whatsapp-chat__bubble {
  background: #ffffff;
  border-radius: 4px 10px 10px 10px;
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.16);
  color: #374151;
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  max-width: 205px;
  padding: 12px 13px 22px;
  position: relative;
}

.whatsapp-chat__bubble small {
  bottom: 7px;
  color: #9ca3af;
  font-size: 10px;
  font-style: italic;
  position: absolute;
  right: 12px;
}

.whatsapp-chat__icon {
  align-items: center;
  animation: whatsappPulse 2.2s ease-in-out infinite;
  background: #20c664;
  border: 4px solid #ffffff;
  border-radius: 999px;
  bottom: -27px;
  box-shadow: 0 14px 26px rgba(32, 198, 100, 0.34);
  display: inline-flex;
  height: 58px;
  justify-content: center;
  position: absolute;
  right: -2px;
  width: 58px;
}

.whatsapp-chat__icon svg {
  fill: #ffffff;
  height: 32px;
  width: 32px;
}

@keyframes whatsappWidgetIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes whatsappWidgetFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes whatsappPulse {
  0%, 100% {
    box-shadow: 0 14px 26px rgba(32, 198, 100, 0.34), 0 0 0 0 rgba(32, 198, 100, 0.28);
  }
  50% {
    box-shadow: 0 18px 34px rgba(32, 198, 100, 0.42), 0 0 0 11px rgba(32, 198, 100, 0);
  }
}

@media (max-width: 760px) {
  .whatsapp-chat {
    align-items: center;
    animation: whatsappWidgetIn 0.5s ease both;
    background: transparent;
    border-radius: 999px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: none;
    display: inline-flex !important;
    gap: 8px;
    overflow: visible;
    right: 14px !important;
    width: auto;
  }

  .whatsapp-chat__head {
    background: #ffffff;
    border: 1px solid rgba(28, 30, 62, 0.1);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.14);
    min-height: 0;
    order: 1;
    padding: 9px 14px;
  }

  .whatsapp-chat__avatar {
    display: none;
  }

  .whatsapp-chat__person {
    display: block;
  }

  .whatsapp-chat__person strong {
    color: #006d5b;
    display: none;
  }

  .whatsapp-chat__person small {
    color: #006d5b;
    display: block;
    font-size: 0;
    line-height: 1;
  }

  .whatsapp-chat__person small::before {
    content: "Sohbet";
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
  }

  .whatsapp-chat__close,
  .whatsapp-chat__body {
    display: none;
  }

  .whatsapp-chat__icon {
    border: 3px solid #ffffff;
    bottom: auto;
    box-shadow: 0 12px 28px rgba(32, 198, 100, 0.38);
    flex: 0 0 auto;
    height: 54px;
    order: 2;
    position: static;
    right: auto;
    width: 54px;
  }

  .whatsapp-chat__icon svg {
    height: 29px;
    width: 29px;
  }
}