/* =========================================================
   IMAGE ORIGAMI - PAGE CSS
   Clean post-hero handoff + highlighted service domains
   No right note. No background origami clutter.
   ========================================================= */

:root {
  --io-after-overlap: 0dvh;
}

.io-page-flow {
  position: relative;
  z-index: 10;
  margin-top: 0;
  background: #fff8ee;
}

.io-after-hero {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  padding: clamp(64px, 7.2dvh, 82px) 6.6vw clamp(148px, 16dvh, 190px);
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.76) 0 1px, transparent 1px),
    linear-gradient(135deg, #fff8ee 0%, #f7ead9 58%, #fffdf8 100%);
  background-size: 24px 24px, auto;
}

.io-after-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(123,20,56,.045), transparent 36%),
    linear-gradient(26deg, transparent 64%, rgba(184,132,67,.09));
  z-index: 0;
}

.io-after-inner {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.io-after-head {
  max-width: 910px;
  margin: 0 auto;
}

.io-after-title-block {
  min-width: 0;
}

.io-eyebrow {
  margin: 0 0 12px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #7b1438;
  font-weight: 700;
}

.io-after-hero h2,
.io-content-band h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 4.8vw, 66px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.043em;
  color: #201a17;
}

.io-after-hero h2 {
  white-space: nowrap;
}

.io-after-subtitle {
  max-width: 1080px;
  margin: 18px auto 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  color: #58483d;
  white-space: nowrap;
}

.io-after-intro {
  max-width: 690px;
  margin: 14px auto 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.72;
  color: #51463e;
}

.io-after-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.4vw, 32px);
  max-width: 1120px;
  margin: clamp(40px, 5.4dvh, 58px) auto 0;
}

.io-after-grid article {
  position: relative;
  min-height: 226px;
  padding: clamp(28px, 2.5vw, 34px) clamp(24px, 2.35vw, 32px) clamp(26px, 2.4vw, 32px);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.12) 42%),
    linear-gradient(145deg, #fffaf1 0%, #f4e4cf 52%, #e9cda9 100%);
  border: 0;
  box-shadow:
    0 24px 52px rgba(68, 43, 24, .12),
    0 8px 20px rgba(68, 43, 24, .07),
    inset 0 1px 0 rgba(255,255,255,.86);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  backdrop-filter: blur(2px);
  overflow: visible;
  isolation: isolate;
  transform: translateY(18px);
  opacity: 0;
  transition:
    transform .48s cubic-bezier(.22, 1, .36, 1),
    box-shadow .48s cubic-bezier(.22, 1, .36, 1),
    background .48s cubic-bezier(.22, 1, .36, 1),
    opacity .48s ease;
}

body.io-service-domain-inview .io-after-grid article,
body.io-final-transition-active .io-after-grid article {
  transform: translateY(0);
  opacity: 1;
}

body.io-service-domain-inview .io-after-grid article:nth-child(2),
body.io-final-transition-active .io-after-grid article:nth-child(2) {
  transition-delay: 70ms;
}

body.io-service-domain-inview .io-after-grid article:nth-child(3),
body.io-final-transition-active .io-after-grid article:nth-child(3) {
  transition-delay: 140ms;
}

.io-after-grid article::before {
  content: "";
  position: absolute;
  inset: 12px -10px -12px 14px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(196, 157, 108, .34), rgba(104, 73, 46, .16));
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  box-shadow: 0 20px 38px rgba(55, 34, 20, .14);
  opacity: .86;
  transition:
    transform .48s cubic-bezier(.22, 1, .36, 1),
    opacity .48s ease;
}

.io-after-grid article::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  z-index: 1;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(184,132,67,.24));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-left: 1px solid rgba(123,92,58,.10);
  border-bottom: 1px solid rgba(123,92,58,.08);
}

.io-after-grid article:hover {
  transform: translateY(-9px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.12) 42%),
    linear-gradient(145deg, #fffdf8 0%, #f4dfc2 52%, #e5c08e 100%);
  box-shadow:
    0 34px 76px rgba(68, 43, 24, .18),
    0 12px 26px rgba(68, 43, 24, .10),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.io-after-grid article:hover::before {
  transform: translate(5px, 5px);
  opacity: 1;
}

.io-card-title-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

.io-card-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fffdf8, #e7cba5);
  border: 1px solid rgba(184,132,67,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 8px 18px rgba(88,58,30,.10);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1), background .42s ease;
}

.io-after-grid article:hover .io-card-icon {
  transform: rotate(45deg) scale(1.05);
  background: linear-gradient(135deg, #fff8ec, #d6aa6d);
}

.io-card-icon svg {
  width: 22px;
  height: 22px;
  overflow: visible;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}

.io-after-grid article:hover .io-card-icon svg {
  transform: rotate(-45deg);
}

.io-card-icon path,
.io-card-icon circle {
  fill: none;
  stroke: #7b1438;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.io-after-grid h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(25px, 2vw, 30px);
  line-height: 1;
  font-weight: 500;
  color: #201a17;
}

.io-after-grid p,
.io-content-band p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #57483e;
  font-size: 13.8px;
  line-height: 1.72;
}

.io-after-grid a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 20px;
  color: #7b1438;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
}

.io-after-grid a::after {
  content: "";
  width: 22px;
  height: 1px;
  background: #b88443;
  transition: width .24s ease;
}

.io-after-grid a:hover::after {
  width: 38px;
}

/* Button folding overlay during hero handoff */
.io-tabs-fold {
  position: absolute;
  z-index: 70;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(74px, 10.5dvh, 92px);
  pointer-events: none;
  opacity: 0;
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow: visible;
}

.io-tabs-fold-strip {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 25%;
  opacity: 0;
  transform-origin: top center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  border: 1px solid rgba(90,70,48,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    0 12px 26px rgba(42,27,16,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,0) 42%),
    linear-gradient(145deg, #fff8ec 0%, #e3d1b9 100%);
}

.io-tabs-fold-strip:nth-child(1) {
  top: 0;
  clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 86%);
}

.io-tabs-fold-strip:nth-child(2) {
  top: 25%;
  clip-path: polygon(2% 0, 98% 12%, 100% 100%, 0 84%);
  filter: brightness(.94);
}

.io-tabs-fold-strip:nth-child(3) {
  top: 50%;
  clip-path: polygon(0 15%, 100% 0, 97% 86%, 3% 100%);
  filter: brightness(1.04);
}

.io-tabs-fold-strip:nth-child(4) {
  top: 75%;
  clip-path: polygon(3% 0, 96% 14%, 100% 100%, 0 100%);
  filter: brightness(.88);
}

.io-content-band {
  min-height: 76dvh;
  padding: 96px 7vw;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 54px;
  align-items: start;
  background: #fffdf8;
  border-top: 1px solid rgba(123, 92, 58, .13);
}

@media (max-width: 1180px) {
  .io-after-head {
    max-width: 820px;
  }

  .io-after-grid {
    gap: 18px;
  }

  .io-after-grid article {
    padding: 23px 22px 24px;
  }
}

@media (max-width: 980px) {
  .io-page-flow {
    margin-top: 0;
  }

  .io-after-hero {
    padding: 72px 24px 92px;
    min-height: auto;
  }

  .io-after-hero h2 {
    white-space: normal;
  }

  .io-after-grid,
  .io-content-band {
    grid-template-columns: 1fr;
  }

  .io-after-grid article {
    min-height: auto;
    transform: none;
    opacity: 1;
  }

  .io-tabs-fold {
    display: none;
  }
}

/* =========================================================
   SECTION #3 - WHY IMAGE ORIGAMI
   White editorial section + larger crane image + scroll handoff
   ========================================================= */

.io-why-section {
  position: relative;
  z-index: 22;
  overflow: hidden;
  background: #ffffff;
  margin-top: -76px;
  padding: 94px 0 0;
  color: #161312;
  box-shadow: 0 -34px 90px rgba(38, 26, 18, .10);
  border-top: 1px solid rgba(142, 118, 152, .12);
  --io-why-scroll: 0;
  --io-why-rise: 0;
  transform: translateY(calc((1 - var(--io-why-rise)) * 54px));
  will-change: transform;
}

.io-why-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .52;
  background:
    linear-gradient(115deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 48%, rgba(255,255,255,.92) 100%),
    radial-gradient(circle at 82% 44%, rgba(204, 176, 218, .18), transparent 34%);
}

.io-why-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  opacity: calc(.72 + (var(--io-why-scroll) * .18));
}

.io-geo,
.io-dot-grid {
  position: absolute;
  opacity: .52;
  will-change: transform, opacity;
}

.io-geo {
  width: 160px;
  height: 120px;
  border: 1px solid rgba(163, 132, 171, .14);
  clip-path: polygon(0 38%, 36% 0, 100% 14%, 82% 100%, 18% 82%);
  transform-origin: center;
}

.io-geo::before,
.io-geo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(163, 132, 171, .10);
  clip-path: inherit;
}

.io-geo::before {
  transform: scale(.72) translate(12px, 4px);
}

.io-geo::after {
  transform: rotate(18deg) scale(.48) translate(26px, 12px);
}

.io-geo-1 { top: 22px; left: -12px; transform: translateY(calc(var(--io-why-scroll) * -18px)) rotate(-8deg); }
.io-geo-2 { top: 40px; right: 24px; transform: translateY(calc(var(--io-why-scroll) * 12px)) rotate(14deg); width: 122px; height: 92px; }
.io-geo-3 { bottom: 82px; left: 210px; transform: translateY(calc(var(--io-why-scroll) * -14px)) rotate(-2deg); width: 110px; height: 86px; }
.io-geo-4 { bottom: 26px; right: -18px; transform: translateY(calc(var(--io-why-scroll) * -20px)) rotate(-18deg); width: 182px; height: 124px; }
.io-geo-5 { top: 320px; right: 120px; transform: translateY(calc(var(--io-why-scroll) * -12px)) rotate(22deg); width: 32px; height: 32px; }
.io-geo-6 { top: 50px; left: 420px; transform: translateY(calc(var(--io-why-scroll) * 8px)) rotate(45deg); width: 18px; height: 18px; }

.io-dot-grid {
  width: 42px;
  height: 42px;
  background-image: radial-gradient(circle, rgba(172, 133, 181, .38) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
}

.io-dot-grid-1 { top: 66px; left: 468px; }
.io-dot-grid-2 { bottom: 62px; left: 548px; }

.io-why-inner {
  position: relative;
  z-index: 2;
}

.io-why-main {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 76px 44px;
  display: grid;
  grid-template-columns: .95fr .80fr 1.28fr;
  align-items: center;
  column-gap: 40px;
  transform: translateY(calc((1 - var(--io-why-scroll)) * 42px));
  opacity: calc(.86 + (var(--io-why-scroll) * .14));
  transition: opacity .22s linear;
}

.io-why-left {
  padding-top: 0;
  transform: translateY(-8px);
}

.io-why-eyebrow {
  margin: 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #7b1438;
}

.io-why-mini-line {
  display: block;
  width: 42px;
  height: 2px;
  margin: 16px 0 28px;
  background: #c58a3d;
}

.io-why-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(68px, 5.8vw, 92px);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.05em;
  color: #161312;
}

.io-why-title span {
  color: #7b1438;
}

.io-why-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.io-why-divider span {
  width: 102px;
  height: 1.5px;
  background: rgba(197, 138, 61, .72);
}

.io-why-divider i {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  border: 1.4px solid #c58a3d;
  transform: rotate(45deg);
}

.io-why-divider i::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(197, 138, 61, .75);
}

.io-why-right {
  max-width: 465px;
  padding-top: 58px;
}

.io-why-subtitle {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 2.45vw, 44px);
  font-weight: 500;
  line-height: 1.10;
  letter-spacing: -.024em;
  color: #7b1438;
}

.io-why-mini-line-alt {
  margin: 22px 0 24px;
}

.io-why-right p {
  margin: 0 0 24px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.82;
  color: #2d2725;
}

.io-why-right p:last-child {
  margin-bottom: 0;
}

.io-why-crane {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transform: translateY(calc((1 - var(--io-why-scroll)) * 38px));
  will-change: transform;
}

.io-crane-img {
  display: block;
  width: min(860px, 122%);
  max-width: none;
  height: auto;
  object-fit: contain;
  margin-left: -92px;
  margin-right: -42px;
  filter: drop-shadow(0 34px 54px rgba(102, 81, 116, .18));
  transform-origin: center;
  animation: ioCraneFloat 6.8s ease-in-out infinite;
  will-change: transform;
  mix-blend-mode: multiply;
}

.io-why-principles {
  position: relative;
  z-index: 3;
  border-top: 1px solid rgba(142, 118, 152, .16);
  background: rgba(255,255,255,.98);
  max-width: 100%;
  padding: 42px 82px 54px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 36px;
  box-shadow: 0 -10px 38px rgba(34, 24, 18, .035);
}

.io-why-principle {
  position: relative;
  padding: 0 30px 0 18px;
}

.io-why-principle:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -18px;
  width: 1px;
  height: 100%;
  background: rgba(197, 138, 61, .44);
}

.io-why-principle-head {
  display: flex;
  align-items: center;
  gap: 18px;
}

.io-why-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.io-why-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #c58a3d;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.io-why-principle h4 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #7b1438;
}

.io-why-principle-line {
  display: block;
  width: 46px;
  height: 2px;
  margin: 18px 0 18px 58px;
  background: rgba(197, 138, 61, .74);
}

.io-why-principle p {
  margin: 0;
  max-width: 360px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: #262120;
}

@keyframes ioCraneFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(-1deg);
  }
}

@keyframes ioGeoDriftA {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-8px) rotate(-4deg); }
}

@keyframes ioGeoDriftB {
  0%, 100% { transform: translateY(0) rotate(14deg); }
  50% { transform: translateY(7px) rotate(18deg); }
}

@keyframes ioDotsPulse {
  0%, 100% { opacity: .4; transform: translateY(0); }
  50% { opacity: .72; transform: translateY(-4px); }
}

.io-dot-grid-1,
.io-dot-grid-2 { animation: ioDotsPulse 6s ease-in-out infinite; }

@media (max-width: 1320px) {
  .io-why-main {
    grid-template-columns: .94fr .78fr 1.15fr;
    padding-left: 54px;
    padding-right: 54px;
    column-gap: 32px;
  }

  .io-crane-img {
    width: min(760px, 122%);
    margin-left: -70px;
    margin-right: -46px;
  }
}

@media (max-width: 1120px) {
  .io-why-main {
    grid-template-columns: 1fr 1fr;
    row-gap: 34px;
  }

  .io-why-right {
    padding-top: 18px;
  }

  .io-why-crane {
    grid-column: 2 / 3;
  }

  .io-crane-img {
    width: min(680px, 112%);
    margin-left: -40px;
  }
}

@media (max-width: 980px) {
  .io-why-section {
    margin-top: 0;
    padding: 76px 0 0;
    transform: none;
  }

  .io-why-main {
    padding: 0 24px 34px;
    grid-template-columns: 1fr;
    row-gap: 28px;
    transform: none;
    opacity: 1;
  }

  .io-why-left {
    transform: none;
  }

  .io-why-right,
  .io-why-crane {
    max-width: 100%;
    padding-top: 0;
  }

  .io-why-title {
    font-size: 58px;
  }

  .io-why-subtitle {
    font-size: 34px;
  }

  .io-crane-img {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }

  .io-why-principles {
    grid-template-columns: 1fr;
    row-gap: 28px;
    padding: 34px 24px 42px;
  }

  .io-why-principle {
    padding: 0;
  }

  .io-why-principle:not(:last-child)::after {
    display: none;
  }

  .io-why-principle-line {
    margin-left: 58px;
  }
}

/* =========================================================
   V15 FIX - SERVICE DOMAINS TO WHY IMAGE ORIGAMI HANDOFF
   Makes Section 3 rise over Section 2, like Section 2 rises over the hero.
   ========================================================= */

@media (min-width: 981px) {
  :root {
    --io-service-to-why-overlap: 74dvh;
  }

  .io-after-hero {
    z-index: 12 !important;
    min-height: calc(100dvh + var(--io-service-to-why-overlap)) !important;
    padding-bottom: calc(clamp(72px, 8dvh, 96px) + var(--io-service-to-why-overlap)) !important;
    transform: translateY(calc(var(--io-service-back, 0) * -26px)) scale(calc(1 - (var(--io-service-back, 0) * .025))) !important;
    filter: brightness(calc(1 - (var(--io-service-back, 0) * .035))) !important;
    transform-origin: top center !important;
    will-change: transform, filter !important;
  }

  .io-after-inner {
    transform: translateY(calc(var(--io-service-back, 0) * -18px)) !important;
    opacity: calc(1 - (var(--io-service-back, 0) * .14)) !important;
    will-change: transform, opacity !important;
  }

  .io-why-section {
    z-index: 34 !important;
    margin-top: calc(-1 * var(--io-service-to-why-overlap)) !important;
    transform: translateY(calc((1 - var(--io-why-handoff, 0)) * 130px)) !important;
    box-shadow:
      0 -54px 110px rgba(38, 26, 18, .14),
      0 -1px 0 rgba(142, 118, 152, .12) !important;
    will-change: transform !important;
  }

  .io-why-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 90px;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,0));
  }

  .io-why-main {
    transform: translateY(calc((1 - var(--io-why-scroll, 0)) * 32px)) !important;
  }
}

@media (max-width: 980px) {
  .io-after-hero {
    transform: none !important;
    filter: none !important;
  }

  .io-after-inner {
    transform: none !important;
    opacity: 1 !important;
  }

  .io-why-section {
    margin-top: 0 !important;
    transform: none !important;
  }
}

/* =========================================================
   V16 FINAL FIX - REAL SECTION 2 TO SECTION 3 OVERLAY HANDOFF
   Section 2 is now a sticky journey. Section 3 rises over it,
   matching the Hero -> Service Domains handoff behaviour.
   ========================================================= */

@media (min-width: 981px) {
  :root {
    --io-service-to-why-overlap: 92dvh;
  }

  .io-service-journey {
    position: relative !important;
    z-index: 18 !important;
    min-height: calc(100dvh + var(--io-service-to-why-overlap)) !important;
    background: #fff8ee !important;
    isolation: isolate !important;
  }

  .io-service-sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: #fff8ee !important;
    transform-origin: top center !important;
    transform:
      translateY(calc(var(--io-service-back, 0) * -32px))
      scale(calc(1 - (var(--io-service-back, 0) * .025))) !important;
    filter: brightness(calc(1 - (var(--io-service-back, 0) * .055))) !important;
    will-change: transform, filter !important;
  }

  .io-service-sticky::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    opacity: calc(var(--io-service-back, 0) * .28);
    background:
      linear-gradient(180deg, rgba(255,248,238,0), rgba(48,32,20,.10)),
      radial-gradient(circle at 50% 22%, rgba(255,255,255,0), rgba(50,33,22,.12));
  }

  .io-after-hero {
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding-top: clamp(78px, 9dvh, 108px) !important;
    padding-bottom: clamp(86px, 10dvh, 124px) !important;
    display: flex !important;
    align-items: center !important;
    transform: none !important;
    filter: none !important;
  }

  .io-after-inner {
    transform: translateY(calc(var(--io-service-back, 0) * -24px)) !important;
    opacity: calc(1 - (var(--io-service-back, 0) * .18)) !important;
    will-change: transform, opacity !important;
  }

  .io-why-section {
    position: relative !important;
    z-index: 42 !important;
    margin-top: calc(-1 * var(--io-service-to-why-overlap)) !important;
    min-height: 100dvh !important;
    transform: translateY(calc((1 - var(--io-why-handoff, 0)) * 18dvh)) !important;
    box-shadow:
      0 -72px 130px rgba(38, 26, 18, .18),
      0 -1px 0 rgba(142, 118, 152, .14) !important;
    will-change: transform !important;
  }

  .io-why-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 118px;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0));
  }

  .io-crane-img {
    width: min(920px, 128%) !important;
    margin-left: -120px !important;
    margin-right: -48px !important;
  }
}

@media (max-width: 980px) {
  .io-service-journey {
    min-height: auto !important;
  }

  .io-service-sticky {
    position: relative !important;
    height: auto !important;
    transform: none !important;
    filter: none !important;
  }

  .io-service-sticky::after {
    display: none !important;
  }

  .io-why-section {
    margin-top: 0 !important;
    transform: none !important;
  }
}
/* =========================================================
   SECTION #4 - OUR PROCESS
   Interactive folded journey section
   ========================================================= */

.io-process-section {
  position: relative;
  overflow: hidden;
  padding: clamp(92px, 10dvh, 128px) 6.6vw clamp(96px, 11dvh, 138px);
  background:
    linear-gradient(135deg, #fff8ee 0%, #f1dfcb 52%, #d8b68f 100%);
  color: #201a17;
  isolation: isolate;
}
.io-process-section {
  --io-process-back: 0;
}

.io-process-section::after {
  opacity: calc(var(--io-process-back) * .18);
}

.io-process-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 16%, rgba(255,255,255,.75) 0 1px, transparent 1px),
    linear-gradient(120deg, rgba(255,255,255,.42), transparent 34%),
    linear-gradient(28deg, transparent 62%, rgba(123,20,56,.10));
  background-size: 24px 24px, auto, auto;
}

.io-process-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.io-process-bg-svg {
  position: absolute;
  fill: rgba(255, 255, 255, .16);
  stroke: rgba(123, 20, 56, .18);
  stroke-width: 1.4;
  filter: drop-shadow(0 20px 34px rgba(76, 46, 25, .08));
}

.io-process-bg-svg line {
  stroke: rgba(123, 20, 56, .16);
}

.io-process-bg-svg-1 {
  width: 230px;
  height: auto;
  top: 58px;
  right: 7vw;
  opacity: .58;
  animation: ioProcessDriftOne 9s ease-in-out infinite;
}

.io-process-bg-svg-2 {
  width: 260px;
  height: auto;
  bottom: 36px;
  left: 4vw;
  opacity: .38;
  animation: ioProcessDriftTwo 11s ease-in-out infinite;
}

.io-process-bg-svg-3 {
  width: 170px;
  height: auto;
  top: 44%;
  right: -42px;
  opacity: .34;
  animation: ioProcessDriftThree 10s ease-in-out infinite;
}

.io-process-dot-grid {
  position: absolute;
  width: 56px;
  height: 56px;
  background-image: radial-gradient(circle, rgba(123, 20, 56, .24) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  opacity: .52;
  animation: ioProcessDots 7s ease-in-out infinite;
}

.io-process-dot-grid-1 {
  top: 102px;
  left: 12vw;
}

.io-process-dot-grid-2 {
  right: 15vw;
  bottom: 94px;
  animation-delay: -2s;
}

.io-process-inner {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto;
}

.io-process-heading {
  max-width: 800px;
  margin: 0 auto 62px;
  text-align: center;
}

.io-process-heading .io-eyebrow {
  margin-bottom: 14px;
}

.io-process-heading h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(44px, 4.9vw, 74px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.046em;
  color: #201a17;
}

.io-process-heading p {
  max-width: 720px;
  margin: 24px auto 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 15.5px;
  line-height: 1.78;
  color: #5b473a;
}

.io-process-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(420px, 1.05fr);
  gap: clamp(34px, 4.5vw, 64px);
  align-items: center;
}

.io-process-path {
  position: absolute;
  left: 8px;
  top: 50%;
  width: calc(50% - 38px);
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(123,20,56,0), rgba(123,20,56,.30), rgba(184,132,67,.45));
  pointer-events: none;
}

.io-process-path span {
  position: absolute;
  left: 0;
  top: -1px;
  width: var(--io-process-progress, 0%);
  height: 3px;
  background: linear-gradient(90deg, #7b1438, #b88443);
  transition: width .42s cubic-bezier(.22, 1, .36, 1);
}

.io-process-steps {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
}

.io-process-step {
  appearance: none;
  border: 0;
  position: relative;
  width: 100%;
  min-height: 74px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.28)),
    linear-gradient(145deg, #fffaf1, #ead8c4);
  box-shadow:
    0 16px 34px rgba(60, 38, 23, .07),
    inset 0 1px 0 rgba(255,255,255,.82);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
  transform: translateX(0);
  transition:
    transform .38s cubic-bezier(.22, 1, .36, 1),
    background .38s ease,
    box-shadow .38s ease;
}

.io-process-step::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(184,132,67,.20));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.io-process-step:hover {
  transform: translateX(8px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.22)),
    linear-gradient(145deg, #fffdf8, #eacba4);
  box-shadow:
    0 22px 46px rgba(60, 38, 23, .12),
    inset 0 1px 0 rgba(255,255,255,.88);
}

.io-process-step.active {
  color: #fff8ee;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    linear-gradient(145deg, #8a173f, #4b0b21);
  box-shadow:
    0 24px 56px rgba(86, 13, 38, .24),
    inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateX(14px);
}

.io-process-step-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #7b1438;
  background: rgba(255,255,255,.74);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), color .38s ease;
}

.io-process-step:hover .io-process-step-mark {
  transform: rotate(45deg);
}

.io-process-step.active .io-process-step-mark {
  color: #fff8ee;
  background: rgba(184,132,67,.88);
}

.io-process-step-title {
  position: relative;
  z-index: 2;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.03em;
  color: #201a17;
}

.io-process-step.active .io-process-step-title {
  color: #fff8ee;
}

.io-process-panel {
  position: relative;
  min-height: 0;
  padding: clamp(38px, 4vw, 56px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.18) 44%),
    linear-gradient(145deg, #fffaf1 0%, #ead7c1 54%, #d5ad7d 100%);
  box-shadow:
    0 34px 86px rgba(58, 36, 20, .18),
    inset 0 1px 0 rgba(255,255,255,.86);
  clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 0 100%);
  overflow: hidden;
  isolation: isolate;
}

.io-process-panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  z-index: 4;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(184,132,67,.28));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-left: 1px solid rgba(123,92,58,.12);
  border-bottom: 1px solid rgba(123,92,58,.10);
}

.io-process-panel-paper {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.io-process-fold-face {
  position: absolute;
  display: block;
  opacity: .42;
  background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(123,20,56,.08));
  clip-path: polygon(0 0, 100% 16%, 88% 100%, 12% 84%);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.io-process-fold-face-1 {
  width: 220px;
  height: 160px;
  right: -40px;
  bottom: 18px;
  transform: rotate(-14deg);
}

.io-process-fold-face-2 {
  width: 150px;
  height: 122px;
  left: -34px;
  top: 36px;
  transform: rotate(22deg);
  opacity: .22;
}

.io-process-fold-face-3 {
  width: 94px;
  height: 82px;
  right: 24%;
  top: 26px;
  transform: rotate(45deg);
  opacity: .20;
}

.io-process-panel:hover .io-process-fold-face-1 {
  transform: translate(-8px, -8px) rotate(-9deg);
}

.io-process-panel:hover .io-process-fold-face-2 {
  transform: translate(8px, 4px) rotate(17deg);
}

.io-process-panel:hover .io-process-fold-face-3 {
  transform: translateY(-6px) rotate(52deg);
}

.io-process-copy {
  position: relative;
  z-index: 3;
  display: none;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .38s ease,
    transform .42s cubic-bezier(.22, 1, .36, 1);
}

.io-process-copy.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.io-process-kicker {
  margin: 0 0 18px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #7b1438;
}

.io-process-copy h3 {
  max-width: 560px;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 3.6vw, 58px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.043em;
  color: #201a17;
}

.io-process-copy > p:not(.io-process-kicker) {
  max-width: 540px;
  margin: 24px 0 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 15.5px;
  line-height: 1.78;
  color: #514237;
}

.io-process-callout {
  width: fit-content;
  max-width: 520px;
  margin-top: 30px;
  padding: 18px 22px 19px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #3c312c;
  background:
    linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.28));
  border-left: 3px solid #b88443;
  box-shadow: 0 14px 30px rgba(60,38,23,.08);
}

.io-process-callout span {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7b1438;
}

@keyframes ioProcessDriftOne {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(3deg);
  }
}

@keyframes ioProcessDriftTwo {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(12px) rotate(-6deg);
  }
}

@keyframes ioProcessDriftThree {
  0%, 100% {
    transform: translateY(0) rotate(4deg);
  }

  50% {
    transform: translateY(-8px) rotate(9deg);
  }
}

@keyframes ioProcessDots {
  0%, 100% {
    opacity: .42;
    transform: translateY(0);
  }

  50% {
    opacity: .72;
    transform: translateY(-6px);
  }
}

@media (max-width: 1100px) {
  .io-process-stage {
    grid-template-columns: 1fr;
  }

  .io-process-path {
    display: none;
  }

  .io-process-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }

  .io-process-step {
    min-height: 76px;
    padding: 14px 12px;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }

  .io-process-step.active,
  .io-process-step:hover {
    transform: translateY(-5px);
  }

  .io-process-step-title {
    font-size: 24px;
  }
}

@media (max-width: 760px) {
  .io-process-section {
    padding: 78px 24px 86px;
  }

  .io-process-heading {
    text-align: left;
    margin-bottom: 42px;
  }

  .io-process-heading h2 {
    font-size: 42px;
  }

  .io-process-heading p {
    margin-left: 0;
    margin-right: 0;
  }

  .io-process-steps {
    grid-template-columns: 1fr;
  }

  .io-process-step {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }

  .io-process-panel {
    padding: 30px 24px;
  }

  .io-process-copy h3 {
    font-size: 38px;
  }

  .io-process-callout {
    width: 100%;
  }
}
/* =========================================================
   SECTION #5 - SERVICES SNAPSHOT
   Overlay transition + 3D irregular paper service blocks
   ========================================================= */

.io-services-snapshot {
  position: relative;
  z-index: 36;
  overflow: hidden;
  margin-top: -72px;
  padding: clamp(74px, 7vw, 96px) 6.5vw clamp(82px, 7.5vw, 108px);
  background:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,.95), transparent 28%),
    radial-gradient(circle at 84% 20%, rgba(234,215,193,.30), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #fffaf4 48%, #f8efe4 100%);
  color: #201a17;
  box-shadow: 0 -36px 90px rgba(47, 31, 20, .12);
  border-top: 1px solid rgba(184,132,67,.13);
}
.io-services-snapshot {
  --io-services-rise: 0;
  transform: translateY(calc((1 - var(--io-services-rise)) * 84px));
  will-change: transform;
}

.io-services-snapshot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.72) 38%, rgba(255,248,238,.88));
  z-index: 0;
}

.io-services-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.io-services-fold {
  position: absolute;
  border: 1px solid rgba(184,132,67,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(234,215,193,.13));
  clip-path: polygon(0 32%, 38% 0, 100% 18%, 78% 100%, 18% 84%);
  opacity: .58;
}

.io-services-fold::before,
.io-services-fold::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(123,20,56,.075);
  clip-path: inherit;
}

.io-services-fold-1 {
  width: 210px;
  height: 148px;
  top: 38px;
  left: -64px;
  transform: rotate(-16deg);
}

.io-services-fold-2 {
  width: 160px;
  height: 118px;
  top: 82px;
  right: 8%;
  transform: rotate(18deg);
}

.io-services-fold-3 {
  width: 240px;
  height: 164px;
  bottom: 42px;
  left: 7%;
  transform: rotate(11deg);
}

.io-services-fold-4 {
  width: 190px;
  height: 138px;
  right: -54px;
  bottom: 82px;
  transform: rotate(-22deg);
}

.io-services-dot {
  position: absolute;
  width: 54px;
  height: 54px;
  background-image: radial-gradient(circle, rgba(184,132,67,.24) 1.3px, transparent 1.3px);
  background-size: 13px 13px;
  opacity: .72;
}

.io-services-dot-1 {
  top: 190px;
  left: 13%;
}

.io-services-dot-2 {
  right: 17%;
  bottom: 136px;
}

.io-services-inner {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto;
}

.io-services-head {
  max-width: 820px;
  margin: 0 auto clamp(36px, 4vw, 48px);
  text-align: center;
}

.io-services-head h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(44px, 4.8vw, 66px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
  color: #201a17;
}

.io-services-head p {
  max-width: 720px;
  margin: 16px auto 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #5b4d43;
}

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

.io-service-box {
  position: relative;
  min-height: 210px;
  padding: 24px 24px 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.60)),
    linear-gradient(145deg, #fffdf8 0%, #f4e4cf 100%);
  border: 1px solid rgba(184,132,67,.18);
  box-shadow:
    14px 18px 0 rgba(213,173,125,.16),
    0 24px 48px rgba(64,39,23,.13),
    0 8px 18px rgba(64,39,23,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
  transform: translateY(44px) rotateX(5deg);
  opacity: 0;
  transition:
    transform .7s cubic-bezier(.22, 1, .36, 1),
    opacity .7s ease,
    box-shadow .42s cubic-bezier(.22, 1, .36, 1),
    background .42s ease;
}

body.io-services-inview .io-service-box {
  transform: translateY(0) rotateX(0);
  opacity: 1;
}

body.io-services-inview .io-service-box:nth-child(2) { transition-delay: 70ms; }
body.io-services-inview .io-service-box:nth-child(3) { transition-delay: 140ms; }
body.io-services-inview .io-service-box:nth-child(4) { transition-delay: 60ms; }
body.io-services-inview .io-service-box:nth-child(5) { transition-delay: 130ms; }
body.io-services-inview .io-service-box:nth-child(6) { transition-delay: 200ms; }

.io-service-box::before {
  content: "";
  position: absolute;
  inset: 12px -10px -12px 14px;
  z-index: -1;
  background: linear-gradient(145deg, rgba(123,20,56,.10), rgba(184,132,67,.18));
  clip-path: inherit;
  filter: blur(.2px);
}

.io-service-box::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #ffffff, #ead7c1);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-left: 1px solid rgba(184,132,67,.22);
  border-bottom: 1px solid rgba(184,132,67,.18);
}

.io-service-box-a {
  clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 96% 100%, 0 100%);
}

.io-service-box-b {
  clip-path: polygon(4% 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 0 96%, 0 8%);
}

.io-service-box-c {
  clip-path: polygon(0 8%, 6% 0, calc(100% - 38px) 0, 100% 38px, 96% 100%, 0 100%);
}

.io-service-box-d {
  clip-path: polygon(0 0, 96% 0, 100% 38px, 100% 94%, 94% 100%, 0 100%);
}

.io-service-box-e {
  clip-path: polygon(5% 0, calc(100% - 38px) 0, 100% 38px, 98% 100%, 0 96%, 0 0);
}

.io-service-box-f {
  clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 6% 100%, 0 92%);
}

.io-service-box:hover {
  transform: translateY(-8px) rotateX(0);
  background:
    linear-gradient(135deg, rgba(255,255,255,1), rgba(255,255,255,.64)),
    linear-gradient(145deg, #fffdf8 0%, #efd9bb 100%);
  box-shadow:
    18px 22px 0 rgba(213,173,125,.20),
    0 34px 72px rgba(64,39,23,.18),
    0 12px 24px rgba(64,39,23,.10),
    inset 0 1px 0 rgba(255,255,255,.94);
}

.io-service-title-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 15px;
}

.io-service-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fffaf3, #ead7c1);
  border: 1px solid rgba(184,132,67,.36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 8px 16px rgba(88,58,30,.10);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.io-service-icon svg {
  width: 22px;
  height: 22px;
  overflow: visible;
}

.io-service-icon path,
.io-service-icon circle {
  fill: none;
  stroke: #7b1438;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.io-service-box h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(23px, 1.8vw, 28px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: #201a17;
}

.io-service-box p {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.66;
  color: #5a4b41;
}

.io-service-box a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 10.3px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: #7b1438;
}

.io-service-box a::after {
  content: "";
  width: 24px;
  height: 1px;
  background: #b88443;
  transition: width .24s ease;
}

.io-service-box a:hover::after {
  width: 42px;
}

@media (max-width: 1020px) {
  .io-services-snapshot {
    margin-top: 0;
  }

  .io-services-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .io-service-box {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 680px) {
  .io-services-snapshot {
    padding: 72px 22px 84px;
  }

  .io-services-matrix {
    grid-template-columns: 1fr;
  }

  .io-service-box {
    min-height: auto;
  }
}

/* =========================================================
   FINAL FIX - SECTION #4 HEIGHT + SECTION #5 OVERLAY
   Process is NOT sticky. It stays fully visible. Services rises over it.
   ========================================================= */

@media (min-width: 981px) {
  .io-process-section {
    position: relative !important;
    z-index: 32 !important;
    min-height: auto !important;
    overflow: hidden !important;
    padding-top: clamp(132px, 14dvh, 168px) !important;
    padding-bottom: clamp(210px, 25dvh, 280px) !important;
    transform: translateY(calc(var(--io-process-back, 0) * -18px)) scale(calc(1 - (var(--io-process-back, 0) * .012))) !important;
    filter: brightness(calc(1 - (var(--io-process-back, 0) * .035))) !important;
    transform-origin: top center !important;
    will-change: transform, filter !important;
  }

  .io-process-section::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    opacity: calc(var(--io-process-back, 0) * .22) !important;
    background:
      linear-gradient(180deg, rgba(255,248,238,0), rgba(58,36,20,.13)),
      radial-gradient(circle at 50% 18%, rgba(255,255,255,0), rgba(71,45,28,.11)) !important;
  }

  .io-process-inner {
    position: relative !important;
    z-index: 4 !important;
  }

  .io-process-heading {
    margin-bottom: clamp(58px, 6dvh, 74px) !important;
  }

  .io-process-stage {
    align-items: center !important;
  }

  .io-services-snapshot {
    --io-services-rise: 0;
    position: relative !important;
    z-index: 50 !important;
    margin-top: -24dvh !important;
    transform: translateY(calc((1 - var(--io-services-rise)) * 124px)) !important;
    will-change: transform !important;
    box-shadow:
      0 -64px 120px rgba(47, 31, 20, .18),
      0 -1px 0 rgba(184,132,67,.14) !important;
  }

  .io-services-snapshot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 112px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,0));
  }
}

@media (max-width: 980px) {
  .io-process-section {
    transform: none !important;
    filter: none !important;
  }

  .io-services-snapshot {
    margin-top: 0 !important;
    transform: none !important;
  }
}

/* =========================================================
   IMAGE ORIGAMI - WOW FACTORS PENTAGON SECTION
   Integrated final desktop fit: centre lowered, top card shifted right
   ========================================================= */

.io-wow-section {
  position: relative;
  z-index: 50;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(34px, 4.5svh, 52px) 4.8vw clamp(34px, 4.5svh, 52px);
  background:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,.92), transparent 28%),
    radial-gradient(circle at 88% 88%, rgba(213,173,125,.22), transparent 30%),
    linear-gradient(135deg, #fffdf8 0%, #fff8ee 48%, #f2dfc8 100%);
  isolation: isolate;
}

.io-wow-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.io-wow-bg-fold {
  position: absolute;
  border: 1px solid rgba(184,132,67,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.48), rgba(213,173,125,.12));
  clip-path: polygon(0 38%, 36% 0, 100% 15%, 82% 100%, 16% 82%);
  opacity: .42;
  filter: drop-shadow(0 24px 38px rgba(87,54,31,.08));
}

.io-wow-bg-fold::before,
.io-wow-bg-fold::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(123,20,56,.07);
  clip-path: inherit;
}

.io-wow-bg-fold-1 {
  width: 220px;
  height: 150px;
  top: -32px;
  left: -70px;
  transform: rotate(-18deg);
  animation: ioWowFloatA 9s ease-in-out infinite;
}

.io-wow-bg-fold-2 {
  width: 175px;
  height: 122px;
  right: 5vw;
  top: 88px;
  transform: rotate(18deg);
  animation: ioWowFloatB 11s ease-in-out infinite;
}

.io-wow-bg-fold-3 {
  width: 230px;
  height: 155px;
  right: -62px;
  bottom: 42px;
  transform: rotate(-15deg);
  animation: ioWowFloatC 10s ease-in-out infinite;
}

.io-wow-dot {
  position: absolute;
  width: 58px;
  height: 58px;
  background-image: radial-gradient(circle, rgba(184,132,67,.26) 1.2px, transparent 1.2px);
  background-size: 13px 13px;
  opacity: .5;
}

.io-wow-dot-1 { top: 34px; left: 14vw; }
.io-wow-dot-2 { bottom: 70px; right: 17vw; }

.io-wow-gloss {
  position: absolute;
  top: -40%;
  left: -44%;
  width: 42%;
  height: 185%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: rotate(18deg);
  animation: ioWowBigSweep 8s ease-in-out infinite;
}

.io-wow-inner {
  position: relative;
  z-index: 3;
  max-width: 1160px;
  margin: 0 auto;
}

.io-wow-head {
  max-width: 860px;
  margin: 0 auto clamp(12px, 1.8svh, 20px);
  text-align: center;
}

.io-eyebrow {
  margin: 0 0 10px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--io-wine);
  font-weight: 700;
}

.io-wow-head h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.047em;
  color: var(--io-ink);
}

.io-wow-stage {
  position: relative;
  height: min(690px, calc(100svh - 155px));
  min-height: 555px;
  max-width: 1140px;
  margin: 0 auto;
  perspective: 1600px;
  transform-style: preserve-3d;
}

.io-wow-ring {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 56%;
  width: min(830px, 76vw);
  height: auto;
  transform: translate(-50%, -50%);
  overflow: visible;
  opacity: .72;
  pointer-events: none;
}

.io-wow-ring-path {
  fill: none;
  stroke: rgba(123,20,56,.24);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 9 15;
  filter: drop-shadow(0 8px 12px rgba(123,20,56,.08));
  animation: ioWowRingDash 18s linear infinite;
}

.io-wow-ring-spark {
  fill: none;
  stroke: rgba(184,132,67,.35);
  stroke-width: 1.2;
  stroke-dasharray: 1 28;
  animation: ioWowRingDashReverse 13s linear infinite;
}

.io-wow-center {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 57%;
  width: clamp(178px, 18vw, 224px);
  height: clamp(178px, 18vw, 224px);
  transform: translate(-50%, -50%) translateZ(38px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fffaf3;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(145deg, #8b1741 0%, #4b0b21 100%);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  box-shadow:
    0 36px 70px rgba(75,11,33,.28),
    inset 0 1px 0 rgba(255,255,255,.25);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}

.io-wow-center::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 14px;
  height: 1px;
  background: rgba(255,250,243,.34);
}

.io-wow-center-shine {
  position: absolute;
  inset: -35% auto -35% -72%;
  width: 52%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: rotate(18deg);
  animation: ioWowPentagonShine 4.8s ease-in-out infinite;
}

.io-wow-center-kicker {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,250,243,.78);
}

.io-wow-center h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(39px, 4vw, 52px);
  font-weight: 500;
  line-height: .83;
  letter-spacing: -.045em;
}

.io-wow-center-note {
  position: relative;
  z-index: 2;
  max-width: 150px;
  margin: 12px auto 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.25;
  text-transform: uppercase;
  color: #d5ad7d;
}

.io-wow-card {
  position: absolute;
  z-index: 6;
  width: clamp(275px, 29vw, 340px);
  min-height: 138px;
  padding: 22px 23px 22px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.98), rgba(255,255,255,.62) 52%, rgba(255,248,238,.82)),
    linear-gradient(145deg, #fffdf8 0%, #f4e5d3 100%);
  border: 1px solid rgba(184,132,67,.20);
  box-shadow:
    12px 16px 0 rgba(213,173,125,.12),
    0 22px 45px rgba(64,39,23,.12),
    inset 0 1px 0 rgba(255,255,255,.94);
  clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 97% 100%, 4% 100%, 0 92%);
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(38px) rotateX(10deg) scale(.96);
  transform-origin: center;
  transition:
    transform .68s cubic-bezier(.22,1,.36,1),
    opacity .68s ease,
    box-shadow .42s cubic-bezier(.22,1,.36,1),
    background .42s ease,
    filter .42s ease;
}

.io-wow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.75) 44%, transparent 58%);
  transform: translateX(-135%);
  opacity: 0;
  pointer-events: none;
}

.io-wow-card::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #ffffff, #ead7c1);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-left: 1px solid rgba(184,132,67,.24);
  border-bottom: 1px solid rgba(184,132,67,.18);
  transition: transform .42s cubic-bezier(.22,1,.36,1), filter .42s ease;
}

body.io-wow-inview .io-wow-card {
  opacity: 1;
}

body.io-wow-inview .io-wow-card-1 { transition-delay: 70ms; }
body.io-wow-inview .io-wow-card-2 { transition-delay: 150ms; }
body.io-wow-inview .io-wow-card-3 { transition-delay: 230ms; }
body.io-wow-inview .io-wow-card-4 { transition-delay: 310ms; }
body.io-wow-inview .io-wow-card-5 { transition-delay: 390ms; }

.io-wow-card-1 {
  left: 0;
  top: calc(22.5% - 14px);
  transform: translateY(38px) rotate(-1.4deg) rotateX(10deg) scale(.96);
}

.io-wow-card-2 {
  left: 53%;
  top: calc(2% - 20px);
  transform: translate(-50%, 38px) rotate(.4deg) rotateX(10deg) scale(.96);
}

.io-wow-card-3 {
  right: 0;
  top: 20.5%;
  transform: translateY(38px) rotate(1.6deg) rotateX(10deg) scale(.96);
}

/* Clockwise order: 1 left, 2 top, 3 right, 4 bottom-right, 5 bottom-left. */
.io-wow-card-4 {
  right: calc(13.5% - 30px);
  bottom: 0;
  transform: translateY(38px) rotate(1deg) rotateX(10deg) scale(.96);
}

.io-wow-card-5 {
  left: calc(13.5% - 30px);
  bottom: 0;
  transform: translateY(38px) rotate(-1deg) rotateX(10deg) scale(.96);
}

body.io-wow-inview .io-wow-card-1 {
  transform: translateY(0) rotate(-1.4deg) rotateZ(var(--io-wow-tilt, 0deg)) scale(1);
}

body.io-wow-inview .io-wow-card-2 {
  transform: translate(-50%, 0) rotate(.4deg) rotateZ(var(--io-wow-tilt, 0deg)) scale(1);
}

body.io-wow-inview .io-wow-card-3 {
  transform: translateY(0) rotate(1.6deg) rotateZ(var(--io-wow-tilt, 0deg)) scale(1);
}

body.io-wow-inview .io-wow-card-4 {
  transform: translateY(0) rotate(1deg) rotateZ(var(--io-wow-tilt, 0deg)) scale(1);
}

body.io-wow-inview .io-wow-card-5 {
  transform: translateY(0) rotate(-1deg) rotateZ(var(--io-wow-tilt, 0deg)) scale(1);
}

.io-wow-card.active,
.io-wow-card:hover {
  z-index: 10;
  background:
    linear-gradient(115deg, rgba(255,255,255,1), rgba(255,255,255,.68) 48%, rgba(255,247,235,.90)),
    linear-gradient(145deg, #fffdf8 0%, #efd8ba 100%);
  box-shadow:
    18px 22px 0 rgba(213,173,125,.17),
    0 34px 72px rgba(64,39,23,.18),
    inset 0 1px 0 rgba(255,255,255,.98);
  filter: saturate(1.03);
}

body.io-wow-inview .io-wow-card-1.active,
body.io-wow-inview .io-wow-card-1:hover {
  transform: translateY(-8px) rotate(-1.4deg) rotateZ(var(--io-wow-tilt, 0deg)) scale(1.035);
}

body.io-wow-inview .io-wow-card-2.active,
body.io-wow-inview .io-wow-card-2:hover {
  transform: translate(-50%, -8px) rotate(.4deg) rotateZ(var(--io-wow-tilt, 0deg)) scale(1.035);
}

body.io-wow-inview .io-wow-card-3.active,
body.io-wow-inview .io-wow-card-3:hover {
  transform: translateY(-8px) rotate(1.6deg) rotateZ(var(--io-wow-tilt, 0deg)) scale(1.035);
}

body.io-wow-inview .io-wow-card-4.active,
body.io-wow-inview .io-wow-card-4:hover {
  transform: translateY(-8px) rotate(1deg) rotateZ(var(--io-wow-tilt, 0deg)) scale(1.035);
}

body.io-wow-inview .io-wow-card-5.active,
body.io-wow-inview .io-wow-card-5:hover {
  transform: translateY(-8px) rotate(-1deg) rotateZ(var(--io-wow-tilt, 0deg)) scale(1.035);
}

.io-wow-card.active::before,
.io-wow-card:hover::before {
  opacity: 1;
  animation: ioWowCardSweep .86s ease forwards;
}

.io-wow-card.active::after,
.io-wow-card:hover::after {
  transform: translate(-6px, 6px) rotate(-3deg);
  filter: brightness(1.05);
}

.io-wow-number {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 0;
  color: transparent;
  background: transparent;
  border: 0;
  box-shadow: none;
  clip-path: none;
  isolation: isolate;
  overflow: visible;
}

/* The paper tile and its number animate independently. This lets the tile
   turn into a small square while the number settles back to a straight line. */
.io-wow-number::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, #fffaf3, #ead7c1);
  border: 1px solid rgba(184,132,67,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 18px rgba(88,58,30,.10);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transform: rotate(0deg) scale(1);
  transform-origin: center;
  transition:
    transform .52s cubic-bezier(.22,1,.36,1),
    background .42s ease,
    box-shadow .42s ease;
}

.io-wow-number::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--io-wine);
  transform: translate3d(0,0,0) rotate(0deg);
  transform-origin: center;
}

.io-wow-card-1 .io-wow-number::after { content: "01"; }
.io-wow-card-2 .io-wow-number::after { content: "02"; }
.io-wow-card-3 .io-wow-number::after { content: "03"; }
.io-wow-card-4 .io-wow-number::after { content: "04"; }
.io-wow-card-5 .io-wow-number::after { content: "05"; }

.io-wow-card.active .io-wow-number::before,
.io-wow-card:hover .io-wow-number::before,
.io-wow-card:focus-within .io-wow-number::before {
  transform: rotate(45deg) scale(.96);
  background: linear-gradient(135deg, #fff8ec, #d5ad7d);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 12px 22px rgba(88,58,30,.14);
}

.io-wow-card.active .io-wow-number::after,
.io-wow-card:hover .io-wow-number::after,
.io-wow-card:focus-within .io-wow-number::after {
  animation: ioWowNumberOscillate .72s cubic-bezier(.22,1,.36,1) both;
}

.io-wow-card-copy {
  position: relative;
  z-index: 2;
}

.io-wow-card-copy h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.028em;
  color: var(--io-ink);
}

.io-wow-card-copy span {
  display: block;
  width: 42px;
  height: 2px;
  margin: 12px 0 11px;
  background: linear-gradient(90deg, var(--io-wine), var(--io-gold));
  transition: width .35s cubic-bezier(.22,1,.36,1);
}

.io-wow-card.active .io-wow-card-copy span,
.io-wow-card:hover .io-wow-card-copy span {
  width: 104px;
}

.io-wow-card-copy p {
  margin: 0;
  font-size: 13.1px;
  line-height: 1.55;
  color: #57483f;
}

@keyframes ioWowNumberOscillate {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  24%  { transform: translate3d(-2px,-1px,0) rotate(-11deg); }
  48%  { transform: translate3d(2px,0,0) rotate(8deg); }
  68%  { transform: translate3d(-1px,0,0) rotate(-4deg); }
  84%  { transform: translate3d(1px,0,0) rotate(2deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}

@keyframes ioWowCardSweep {
  0% { transform: translateX(-135%); }
  100% { transform: translateX(135%); }
}

@keyframes ioWowBigSweep {
  0%, 35% { transform: translateX(-20%) rotate(18deg); opacity: 0; }
  48% { opacity: .48; }
  68%, 100% { transform: translateX(340%) rotate(18deg); opacity: 0; }
}

@keyframes ioWowPentagonShine {
  0%, 40% { transform: translateX(0) rotate(18deg); opacity: 0; }
  55% { opacity: .56; }
  80%, 100% { transform: translateX(310%) rotate(18deg); opacity: 0; }
}

@keyframes ioWowRingDash {
  to { stroke-dashoffset: -240; }
}

@keyframes ioWowRingDashReverse {
  to { stroke-dashoffset: 220; }
}

@keyframes ioWowFloatA {
  0%, 100% { transform: translateY(0) rotate(-18deg); }
  50% { transform: translateY(-11px) rotate(-13deg); }
}

@keyframes ioWowFloatB {
  0%, 100% { transform: translateY(0) rotate(18deg); }
  50% { transform: translateY(9px) rotate(23deg); }
}

@keyframes ioWowFloatC {
  0%, 100% { transform: translateY(0) rotate(-15deg); }
  50% { transform: translateY(-9px) rotate(-20deg); }
}

@media (max-width: 1120px) and (min-width: 981px) {
  .io-wow-stage {
    max-width: 1040px;
  }

  .io-wow-card {
    width: 305px;
  }

  .io-wow-card-4 { left: auto; right: calc(10% - 30px); }
  .io-wow-card-5 { right: auto; left: calc(10% - 30px); }
}

@media (max-width: 980px) {
  .io-wow-section {
    min-height: auto;
    padding: 74px 22px 86px;
  }

  .io-wow-stage {
    height: auto;
    min-height: 0;
    display: grid;
    gap: 18px;
  }

  .io-wow-ring {
    display: none;
  }

  .io-wow-center,
  .io-wow-card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    transform: none !important;
  }

  .io-wow-center {
    width: 230px;
    height: 230px;
    margin: 0 auto 10px;
  }

  .io-wow-card {
    min-height: auto;
  }
}
/* =========================================================
   MEET SHIKHA MALHOTRA
   Founder / principal consultant section
   ========================================================= */

.io-founder-section {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 9vw, 132px) 6.5vw clamp(106px, 10vw, 146px);
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.98), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #fff8ee 52%, #f4e4cf 100%);
  color: #201a17;
  isolation: isolate;
}

.io-founder-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.io-founder-fold {
  position: absolute;
  border: 1px solid rgba(184,132,67,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.46), rgba(213,173,125,.12));
  clip-path: polygon(0 38%, 36% 0, 100% 15%, 82% 100%, 16% 82%);
  opacity: .52;
}

.io-founder-fold-1 {
  width: 260px;
  height: 180px;
  top: 54px;
  left: -70px;
  transform: rotate(-18deg);
}

.io-founder-fold-2 {
  width: 180px;
  height: 126px;
  right: 7vw;
  top: 84px;
  transform: rotate(20deg);
}

.io-founder-fold-3 {
  width: 240px;
  height: 160px;
  right: -64px;
  bottom: 72px;
  transform: rotate(-14deg);
}

.io-founder-dots {
  position: absolute;
  width: 58px;
  height: 58px;
  background-image: radial-gradient(circle, rgba(184,132,67,.24) 1.3px, transparent 1.3px);
  background-size: 13px 13px;
  opacity: .7;
}

.io-founder-dots-1 {
  left: 12vw;
  bottom: 98px;
}

.io-founder-dots-2 {
  right: 22vw;
  top: 170px;
}

.io-founder-inner {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.05fr);
  gap: clamp(54px, 6vw, 86px);
  align-items: center;
}

.io-founder-portrait-wrap {
  position: relative;
  perspective: 1400px;
}

.io-founder-portrait-card {
  position: relative;
  width: min(430px, 100%);
  aspect-ratio: 4 / 5;
  background: #fffdf8;
  padding: 16px;
  box-shadow:
    18px 22px 0 rgba(213,173,125,.16),
    0 38px 78px rgba(64,39,23,.16),
    inset 0 1px 0 rgba(255,255,255,.95);
  border: 1px solid rgba(184,132,67,.18);
  clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 0 100%);
  transform: rotate(-2deg);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s ease;
}

.io-founder-portrait-card:hover {
  transform: rotate(0deg) translateY(-8px);
  box-shadow:
    22px 26px 0 rgba(213,173,125,.20),
    0 48px 92px rgba(64,39,23,.20),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.io-founder-portrait-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #ffffff, #ead7c1);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.io-founder-portrait-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.96) contrast(1.02);
}

.io-founder-nameplate {
  position: absolute;
  right: 0;
  bottom: 36px;
  min-width: 260px;
  padding: 20px 24px;
  background: #7b1438;
  color: #fff8ee;
  box-shadow: 0 24px 50px rgba(75,11,33,.28);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}

.io-founder-nameplate span {
  display: block;
  margin-bottom: 7px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #d5ad7d;
  font-weight: 700;
}

.io-founder-nameplate strong {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 500;
}

.io-founder-copy h2 {
  max-width: 600px;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.05em;
  color: #201a17;
}

.io-founder-copy > p:not(.io-eyebrow) {
  max-width: 640px;
  margin: 24px 0 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 15.4px;
  line-height: 1.82;
  color: #57483f;
}

.io-founder-quote {
  position: relative;
  max-width: 610px;
  margin: 34px 0 0;
  padding: 26px 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,248,238,.72)),
    #fffdf8;
  border: 1px solid rgba(184,132,67,.18);
  box-shadow:
    10px 14px 0 rgba(213,173,125,.13),
    0 22px 48px rgba(64,39,23,.10);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(27px, 2.45vw, 36px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #7b1438;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}

.io-founder-quote::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #ffffff, #ead7c1);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.io-founder-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  color: #7b1438;
  font-family: "Lato", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}

.io-founder-link::after {
  content: "";
  width: 36px;
  height: 1px;
  background: #b88443;
  transition: width .28s ease;
}

.io-founder-link:hover::after {
  width: 62px;
}

@media (max-width: 900px) {
  .io-founder-inner {
    grid-template-columns: 1fr;
  }

  .io-founder-nameplate {
    right: 18px;
  }
}

/* =========================================================
   TRANSFORMATION STORIES
   Irregular testimonial notes on a soft white paper field
   ========================================================= */
.io-stories-section {
  position: relative;
  z-index: 58;
  overflow: hidden;
  padding: clamp(82px, 8vw, 112px) 6.5vw clamp(84px, 8vw, 116px);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.98), transparent 30%),
    radial-gradient(circle at 82% 88%, rgba(234,215,193,.22), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #fffdf9 48%, #faf3ea 100%);
  color: #201a17;
  isolation: isolate;
}

.io-stories-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.io-stories-fold {
  position: absolute;
  border: 1px solid rgba(184,132,67,.11);
  background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(213,173,125,.08));
  clip-path: polygon(0 34%, 38% 0, 100% 18%, 78% 100%, 17% 83%);
  opacity: .48;
}

.io-stories-fold::before,
.io-stories-fold::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(123,20,56,.055);
  clip-path: inherit;
}

.io-stories-fold-1 { width: 230px; height: 160px; top: 52px; left: -64px; transform: rotate(-17deg); }
.io-stories-fold-2 { width: 170px; height: 122px; top: 92px; right: 8%; transform: rotate(19deg); }
.io-stories-fold-3 { width: 250px; height: 170px; bottom: 48px; right: -76px; transform: rotate(-14deg); }

.io-stories-dots {
  position: absolute;
  width: 56px;
  height: 56px;
  background-image: radial-gradient(circle, rgba(184,132,67,.23) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  opacity: .58;
}

.io-stories-dots-1 { left: 11%; bottom: 84px; }
.io-stories-dots-2 { right: 20%; top: 146px; }

.io-stories-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
}

.io-stories-head {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.io-stories-head h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(44px, 4.9vw, 70px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
  color: #201a17;
}

.io-stories-head > p:last-child {
  margin: 16px auto 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #5a4b42;
}

.io-stories-stage {
  position: relative;
  min-height: 660px;
  max-width: 1160px;
  margin: 0 auto;
}

.io-story-card {
  --io-story-rotate: 0deg;
  position: absolute;
  width: min(350px, 31vw);
  min-height: 190px;
  padding: 28px 28px 26px;
  background:
    linear-gradient(118deg, rgba(255,255,255,.98), rgba(255,255,255,.70)),
    linear-gradient(145deg, #fffefa 0%, #f4e6d6 100%);
  border: 1px solid rgba(184,132,67,.17);
  box-shadow:
    13px 16px 0 rgba(213,173,125,.12),
    0 24px 48px rgba(61,39,24,.11),
    inset 0 1px 0 rgba(255,255,255,.96);
  clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 97% 100%, 4% 100%, 0 91%);
  transform: translateY(36px) rotate(var(--io-story-rotate)) scale(.97);
  opacity: 0;
  overflow: hidden;
  transition:
    transform .7s cubic-bezier(.22,1,.36,1),
    opacity .7s ease,
    box-shadow .42s cubic-bezier(.22,1,.36,1),
    background .42s ease,
    border-color .42s ease;
}

.io-story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.72) 44%, transparent 58%);
  transform: translateX(-140%);
  opacity: 0;
}

.io-story-card::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ffffff, #ead7c1);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-left: 1px solid rgba(184,132,67,.22);
  border-bottom: 1px solid rgba(184,132,67,.16);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}

body.io-stories-inview .io-story-card {
  opacity: 1;
  transform: translateY(0) rotate(var(--io-story-rotate)) scale(1);
}
body.io-stories-inview .io-story-card:nth-child(2) { transition-delay: 80ms; }
body.io-stories-inview .io-story-card:nth-child(3) { transition-delay: 160ms; }
body.io-stories-inview .io-story-card:nth-child(4) { transition-delay: 240ms; }
body.io-stories-inview .io-story-card:nth-child(5) { transition-delay: 320ms; }

.io-story-card:hover,
.io-story-card:focus-visible {
  z-index: 8;
  transform: translateY(-9px) rotate(0deg) scale(1.025);
  outline: none;
  border-color: rgba(123,20,56,.28);
  background:
    linear-gradient(118deg, rgba(255,252,250,1), rgba(250,235,234,.94)),
    linear-gradient(145deg, #fff9f6 0%, #ead6d3 100%);
  box-shadow:
    18px 21px 0 rgba(213,173,125,.14),
    0 36px 76px rgba(86,27,48,.18),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 0 0 1px rgba(123,20,56,.035);
}

.io-story-card:hover::before,
.io-story-card:focus-visible::before {
  opacity: 1;
  animation: ioStorySweep .9s ease forwards;
}

.io-story-card:hover::after,
.io-story-card:focus-visible::after {
  transform: translate(-5px, 5px) rotate(-3deg);
}

.io-story-service {
  display: inline-block;
  margin-bottom: 16px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7b1438;
}

.io-story-card blockquote {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(23px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.018em;
  color: #201a17;
}

.io-story-person {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(184,132,67,.28);
  font-family: "Lato", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .08em;
  color: #6a584c;
}

.io-story-card-1 { left: 0; top: 34px; --io-story-rotate: -2.2deg; }
.io-story-card-2 { left: 50%; top: 0; transform-origin: top center; --io-story-rotate: 1.4deg; translate: -50% 0; }
.io-story-card-3 { right: 0; top: 56px; --io-story-rotate: 2.1deg; }
.io-story-card-4 { left: 15%; bottom: 22px; --io-story-rotate: 1.6deg; }
.io-story-card-5 { right: 14%; bottom: 0; --io-story-rotate: -1.8deg; }

.io-stories-privacy {
  max-width: 660px;
  margin: 22px auto 0;
  text-align: center;
  font-family: "Lato", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #74665c;
}

@keyframes ioStorySweep {
  from { transform: translateX(-140%); }
  to { transform: translateX(140%); }
}

@media (max-width: 980px) {
  .io-stories-stage {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .io-story-card,
  .io-story-card-1,
  .io-story-card-2,
  .io-story-card-3,
  .io-story-card-4,
  .io-story-card-5 {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 0;
    translate: none;
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 660px) {
  .io-stories-section { padding: 72px 22px 52px; }
  .io-stories-stage { grid-template-columns: 1fr; }
  .io-story-card { padding: 25px 22px; }
}


/* =========================================================
   INSIGHTS
   Five WordPress-style post excerpts, three visible on desktop
   ========================================================= */

.io-insights-section {
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 8vw, 116px) 6.5vw clamp(92px, 9vw, 126px);
  background:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,.98), transparent 30%),
    radial-gradient(circle at 88% 84%, rgba(213,173,125,.17), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #fffaf4 50%, #f7ecdf 100%);
  color: #201a17;
  isolation: isolate;
}

.io-insights-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.io-insights-fold {
  position: absolute;
  border: 1px solid rgba(184,132,67,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.52), rgba(213,173,125,.08));
  clip-path: polygon(0 36%, 38% 0, 100% 18%, 80% 100%, 16% 82%);
  opacity: .48;
}

.io-insights-fold::before,
.io-insights-fold::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(123,20,56,.065);
  clip-path: inherit;
}

.io-insights-fold-1 {
  width: 240px;
  height: 164px;
  top: 56px;
  left: -62px;
  transform: rotate(-17deg);
  animation: ioInsightsFloatOne 9s ease-in-out infinite;
}

.io-insights-fold-2 {
  width: 210px;
  height: 146px;
  right: -54px;
  bottom: 70px;
  transform: rotate(18deg);
  animation: ioInsightsFloatTwo 11s ease-in-out infinite;
}

.io-insights-dots {
  position: absolute;
  width: 58px;
  height: 58px;
  opacity: .56;
  background-image: radial-gradient(circle, rgba(184,132,67,.26) 1.2px, transparent 1.2px);
  background-size: 13px 13px;
}

.io-insights-dots-1 { left: 13vw; bottom: 78px; }
.io-insights-dots-2 { right: 16vw; top: 102px; }

.io-insights-inner {
  position: relative;
  z-index: 3;
  max-width: 1220px;
  margin: 0 auto;
}

.io-insights-head {
  position: relative;
  display: block;
  margin-bottom: clamp(34px, 4vw, 50px);
  text-align: center;
}

.io-insights-title-block {
  max-width: 930px;
  margin: 0 auto;
}

.io-insights-head .io-eyebrow {
  text-align: center;
}

.io-insights-head h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.047em;
  color: #201a17;
  text-align: center;
}

.io-insights-intro {
  max-width: 760px;
  margin: 17px auto 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.72;
  color: #5a4b42;
  text-align: center;
}

.io-insights-controls {
  position: absolute;
  right: 0;
  bottom: 2px;
  display: flex;
  gap: 10px;
}

.io-insights-arrow {
  appearance: none;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(184,132,67,.28);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 26px rgba(65,40,23,.08);
  color: #7b1438;
  cursor: pointer;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: transform .3s cubic-bezier(.22,1,.36,1), background .3s ease, color .3s ease, opacity .3s ease;
}

.io-insights-arrow:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.04);
  background: #7b1438;
  color: #fff8ee;
}

.io-insights-arrow:disabled {
  opacity: .34;
  cursor: default;
}

.io-insights-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.io-insights-viewport {
  overflow: hidden;
  margin: -18px -18px -34px;
  padding: 18px 18px 34px;
}

.io-insights-track {
  --io-insights-gap: 24px;
  display: flex;
  gap: var(--io-insights-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
}

.io-insights-track::-webkit-scrollbar { display: none; }
.io-insights-track.io-is-dragging { cursor: grabbing; scroll-behavior: auto; }

.io-insight-card {
  position: relative;
  flex: 0 0 calc((100% - (var(--io-insights-gap) * 2)) / 3);
  min-width: 0;
  scroll-snap-align: start;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,250,244,.80)),
    #fffdf9;
  border: 1px solid rgba(184,132,67,.16);
  box-shadow:
    12px 16px 0 rgba(213,173,125,.12),
    0 24px 52px rgba(64,39,23,.11),
    inset 0 1px 0 rgba(255,255,255,.96);
  clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 96%, 96% 100%, 0 100%);
  overflow: hidden;
  opacity: 0;
  transform: translateY(38px) rotateX(5deg);
  transform-origin: center bottom;
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.22,1,.36,1),
    box-shadow .4s cubic-bezier(.22,1,.36,1);
}

body.io-insights-inview .io-insight-card {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

body.io-insights-inview .io-insight-card:nth-child(2) { transition-delay: 80ms; }
body.io-insights-inview .io-insight-card:nth-child(3) { transition-delay: 160ms; }
body.io-insights-inview .io-insight-card:nth-child(4) { transition-delay: 240ms; }
body.io-insights-inview .io-insight-card:nth-child(5) { transition-delay: 320ms; }

.io-insight-card:hover {
  transform: translateY(-8px) rotateX(0);
  box-shadow:
    17px 21px 0 rgba(213,173,125,.17),
    0 36px 74px rgba(64,39,23,.16),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.io-insight-card::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
  background: linear-gradient(135deg, #ffffff, #ead7c1);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-left: 1px solid rgba(184,132,67,.20);
  border-bottom: 1px solid rgba(184,132,67,.14);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}

.io-insight-card:hover::after { transform: translate(-4px, 4px); }

.io-insight-image {
  position: relative;
  display: block;
  height: 190px;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}

.io-insight-image::before,
.io-insight-image::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: transform .65s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}

.io-insight-image::before {
  background:
    linear-gradient(130deg, rgba(255,255,255,.74), transparent 42%),
    linear-gradient(145deg, var(--io-insight-a), var(--io-insight-b));
}

.io-insight-image::after {
  inset: -20% -10%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.62) 47%, transparent 62%);
  transform: translateX(-110%) rotate(10deg);
  opacity: 0;
}

.io-insight-card:hover .io-insight-image::before { transform: scale(1.045); }
.io-insight-card:hover .io-insight-image::after {
  opacity: 1;
  transform: translateX(110%) rotate(10deg);
}

.io-insight-image-1 { --io-insight-a: #ead7c1; --io-insight-b: #9a4967; }
.io-insight-image-2 { --io-insight-a: #f0dfc8; --io-insight-b: #b88443; }
.io-insight-image-3 { --io-insight-a: #f5dfdf; --io-insight-b: #7b1438; }
.io-insight-image-4 { --io-insight-a: #e8ddd4; --io-insight-b: #6d5444; }
.io-insight-image-5 { --io-insight-a: #eee0d2; --io-insight-b: #956f7f; }

.io-insight-image-fold {
  position: absolute;
  z-index: 2;
  width: 150px;
  height: 118px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  border: 1px solid rgba(255,255,255,.52);
  background: rgba(255,255,255,.16);
  clip-path: polygon(0 36%, 38% 0, 100% 16%, 82% 100%, 18% 82%);
  box-shadow: 0 20px 38px rgba(51,28,22,.16);
  transition: transform .65s cubic-bezier(.22,1,.36,1);
}

.io-insight-image-fold::before,
.io-insight-image-fold::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(255,255,255,.40);
  clip-path: inherit;
}

.io-insight-card:hover .io-insight-image-fold {
  transform: translate(-50%, -50%) rotate(-2deg) scale(1.06);
}

.io-insight-content {
  padding: 24px 24px 25px;
}

.io-insight-category {
  display: inline-block;
  margin-bottom: 14px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #7b1438;
}

.io-insight-content h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(25px, 2vw, 31px);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -.025em;
}

.io-insight-content h3 a {
  color: #201a17;
  text-decoration: none;
  transition: color .25s ease;
}

.io-insight-content h3 a:hover { color: #7b1438; }

.io-insight-content > p {
  margin: 16px 0 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 13.4px;
  line-height: 1.68;
  color: #5a4c42;
}

.io-insight-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px solid rgba(184,132,67,.16);
}

.io-insight-meta time,
.io-insight-meta a {
  font-family: "Lato", Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.io-insight-meta time { color: #8a786b; }
.io-insight-meta a { color: #7b1438; text-decoration: none; }

.io-insight-meta a::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-left: 8px;
  vertical-align: middle;
  background: #b88443;
  transition: width .25s ease;
}

.io-insight-meta a:hover::after { width: 30px; }

.io-insights-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
}

.io-insights-dots-nav {
  display: flex;
  align-items: center;
  gap: 9px;
}

.io-insights-dot-button {
  appearance: none;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(123,20,56,.25);
  cursor: pointer;
  transition: width .28s ease, border-radius .28s ease, background .28s ease;
}

.io-insights-dot-button.active {
  width: 28px;
  border-radius: 999px;
  background: #7b1438;
}

.io-insights-view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #7b1438;
}

.io-insights-view-all::after {
  content: "";
  width: 28px;
  height: 1px;
  background: #b88443;
  transition: width .28s ease;
}

.io-insights-view-all:hover::after { width: 46px; }

@keyframes ioInsightsFloatOne {
  0%,100% { transform: translateY(0) rotate(-17deg); }
  50% { transform: translateY(-10px) rotate(-12deg); }
}

@keyframes ioInsightsFloatTwo {
  0%,100% { transform: translateY(0) rotate(18deg); }
  50% { transform: translateY(10px) rotate(23deg); }
}

@media (max-width: 980px) {
  .io-insight-card { flex-basis: calc((100% - 20px) / 2); }
  .io-insights-track { --io-insights-gap: 20px; }
}

@media (max-width: 680px) {
  .io-insights-section { padding: 72px 22px 84px; }
  .io-insights-head { text-align: center; }
  .io-insights-controls { display: none; }
  .io-insight-card { flex-basis: 100%; }
  .io-insights-track { --io-insights-gap: 16px; }
  .io-insight-image { height: 180px; }
  .io-insights-footer { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .io-insight-card,
  .io-insight-image::before,
  .io-insight-image::after,
  .io-insight-image-fold,
  .io-insights-track,
  .io-insights-fold {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   INSIGHTS IMAGE ASSETS
   blog1.jpg and blog2.jpg alternate across five posts.
   ========================================================= */
.io-insight-image {
  position: relative;
  overflow: hidden;
  background: #ead7c1;
}

.io-insight-image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .7s ease;
}

.io-insight-card:hover .io-insight-image > img {
  transform: scale(1.055);
  filter: saturate(1.03) contrast(1.02);
}

.io-insight-image::before,
.io-insight-image::after,
.io-insight-image-fold {
  z-index: 2;
}

/* =========================================================
   FINAL CTA - ORIGAMI CONSULTATION FORM
   ========================================================= */
.io-contact-section {
  position: relative;
  z-index: 58;
  overflow: hidden;
  padding: clamp(88px, 9vw, 126px) 6.5vw clamp(94px, 9.5vw, 132px);
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.38), transparent 30%),
    radial-gradient(circle at 88% 86%, rgba(213,173,125,.16), transparent 32%),
    linear-gradient(138deg, #5d0d2b 0%, #7b1438 48%, #4b0b21 100%);
  color: #fff8ee;
  isolation: isolate;
}

.io-contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .58;
  background:
    linear-gradient(120deg, rgba(255,255,255,.10), transparent 30%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 26px);
}

.io-contact-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.io-contact-origami {
  position: absolute;
  fill: rgba(255,255,255,.035);
  stroke: rgba(234,215,193,.18);
  stroke-width: 1.25;
  filter: drop-shadow(0 20px 40px rgba(31,5,17,.18));
  will-change: transform;
}

.io-contact-origami line { stroke: rgba(213,173,125,.20); }
.io-contact-origami-1 { width: 300px; top: 26px; left: -72px; transform: rotate(-16deg); }
.io-contact-origami-2 { width: 260px; right: -42px; top: 104px; transform: rotate(18deg); }
.io-contact-origami-3 { width: 220px; left: 41%; bottom: -62px; transform: rotate(-9deg); }

.io-contact-dot-grid {
  position: absolute;
  width: 70px;
  height: 70px;
  opacity: .42;
  background-image: radial-gradient(circle, rgba(234,215,193,.56) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
}

.io-contact-dot-grid-1 { left: 8vw; bottom: 80px; }
.io-contact-dot-grid-2 { right: 9vw; top: 74px; }

.io-contact-inner {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,.90fr) minmax(480px,1.10fr);
  gap: clamp(58px, 7vw, 100px);
  align-items: center;
}

.io-contact-copy { max-width: 540px; }
.io-contact-copy .io-eyebrow { color: #d5ad7d; margin-bottom: 18px; }

.io-contact-copy h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(50px, 5.2vw, 78px);
  font-weight: 500;
  line-height: .93;
  letter-spacing: -.052em;
  color: #fffaf3;
}

.io-contact-intro {
  max-width: 520px;
  margin: 25px 0 0;
  font-size: 15.5px;
  line-height: 1.82;
  color: rgba(255,248,238,.78);
}

.io-contact-promises {
  display: grid;
  gap: 16px;
  margin-top: 34px;
}

.io-contact-promise {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 14px;
  align-items: start;
}

.io-contact-promise > span {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  color: #4b0b21;
  background: linear-gradient(135deg,#fff8ee,#d5ad7d);
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  box-shadow: 0 9px 20px rgba(26,3,12,.20);
}

.io-contact-promise p {
  margin: 0;
  font-size: 13.2px;
  line-height: 1.58;
  color: rgba(255,248,238,.68);
}

.io-contact-promise strong {
  display: block;
  margin-bottom: 3px;
  color: #fff8ee;
  font-size: 13.8px;
  font-weight: 700;
}

.io-contact-small {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(234,215,193,.18);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,248,238,.60);
}

.io-contact-form-wrap {
  position: relative;
  perspective: 1400px;
}

.io-contact-paper-shadow {
  position: absolute;
  inset: 18px -16px -18px 18px;
  z-index: 0;
  background: linear-gradient(145deg, rgba(213,173,125,.34), rgba(46,5,21,.26));
  clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 0 100%);
  filter: blur(.2px);
  transform: rotate(1.1deg);
}

.io-contact-form {
  position: relative;
  z-index: 2;
  padding: clamp(34px, 3.4vw, 48px);
  background:
    linear-gradient(130deg, rgba(255,255,255,.96), rgba(255,255,255,.50) 46%, rgba(248,240,229,.82)),
    linear-gradient(145deg,#fffdf8,#f0dfc8);
  color: #201a17;
  border: 1px solid rgba(213,173,125,.42);
  box-shadow:
    0 42px 90px rgba(28,3,13,.34),
    0 12px 30px rgba(28,3,13,.18),
    inset 0 1px 0 rgba(255,255,255,.96);
  clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%);
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease;
}

.io-contact-form:hover {
  transform: translateY(-5px) rotateX(.35deg);
  box-shadow:
    0 54px 110px rgba(28,3,13,.40),
    0 16px 36px rgba(28,3,13,.20),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.io-contact-paper-fold {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 52px;
  height: 52px;
  z-index: 4;
  background: linear-gradient(135deg,#fff,#d5ad7d);
  clip-path: polygon(0 0,100% 0,100% 100%);
  border-left: 1px solid rgba(184,132,67,.26);
  border-bottom: 1px solid rgba(184,132,67,.22);
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}

.io-contact-form:hover .io-contact-paper-fold { transform: translate(-6px,6px) rotate(-2deg); }

.io-contact-form-head p {
  margin: 0 0 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .23em;
  text-transform: uppercase;
  color: #7b1438;
}

.io-contact-form-head h3 {
  margin: 0 0 28px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(34px,3vw,44px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
  color: #201a17;
}

.io-contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 19px 18px;
}

.io-contact-field { display: grid; gap: 8px; }
.io-contact-field-wide { grid-column: 1 / -1; }

.io-contact-field > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #6a584c;
}

.io-contact-field input,
.io-contact-field select,
.io-contact-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(123,20,56,.24);
  border-radius: 0;
  padding: 11px 2px 12px;
  background: transparent;
  color: #201a17;
  font-family: "Lato", Arial, sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color .24s ease, box-shadow .24s ease;
}

.io-contact-field textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.io-contact-field select { cursor: pointer; }

.io-contact-field input:focus,
.io-contact-field select:focus,
.io-contact-field textarea:focus {
  border-color: #7b1438;
  box-shadow: 0 2px 0 rgba(123,20,56,.08);
}

.io-contact-field input.io-invalid,
.io-contact-field select.io-invalid { border-color: #a22b37; }

.io-contact-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 28px;
}

.io-contact-submit {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 15px 20px 15px 22px;
  background: linear-gradient(135deg,#7b1438,#4b0b21);
  color: #fff8ee;
  font-family: "Lato", Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(75,11,33,.24);
  clip-path: polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}

.io-contact-submit:hover { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(75,11,33,.30); }
.io-contact-submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.io-contact-form-foot > p { max-width: 175px; margin: 0; font-size: 9.5px; line-height: 1.55; color: #857368; }

.io-contact-status {
  min-height: 20px;
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: #7b1438;
}

.io-contact-status.is-success {
  padding: 11px 14px;
  background: rgba(184,132,67,.12);
  border-left: 2px solid #b88443;
}

@media (max-width: 1020px) {
  .io-contact-inner { grid-template-columns: 1fr; gap: 52px; }
  .io-contact-copy { max-width: 760px; }
  .io-contact-form-wrap { max-width: 720px; }
}

@media (max-width: 680px) {
  .io-contact-section { padding: 74px 22px 84px; }
  .io-contact-form { padding: 32px 22px 28px; }
  .io-contact-form-grid { grid-template-columns: 1fr; }
  .io-contact-field-wide { grid-column: auto; }
  .io-contact-form-foot { align-items: flex-start; flex-direction: column; }
  .io-contact-form-foot > p { max-width: 100%; }
  .io-contact-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .io-contact-form,
  .io-contact-paper-fold,
  .io-contact-submit,
  .io-contact-origami { transition: none !important; }
}

/* =========================================================
   FINAL FIX - INSIGHTS IMAGES
   Real image assets remain visible above decorative layers.
   ========================================================= */
.io-insight-image {
  background: #ead7c1;
}

.io-insight-image > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  visibility: visible;
}

.io-insight-image::before {
  content: none !important;
  display: none !important;
}

.io-insight-image::after {
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.30) 48%, transparent 66%);
}

.io-insight-image-fold {
  display: none !important;
}

/* =========================================================
   DARK ORIGAMI FOOTER
   Matches the sticky navigation.
   ========================================================= */
.io-footer {
  position: relative;
  z-index: 60;
  overflow: hidden;
  padding: 72px 6.5vw 0;
  background: #2d2825;
  color: #fff8ee;
  border-top: 1px solid rgba(184,132,67,.26);
  isolation: isolate;
}

.io-footer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.io-footer-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(184,132,67,.10), transparent 26%),
    radial-gradient(circle at 88% 76%, rgba(123,20,56,.18), transparent 30%),
    linear-gradient(125deg, rgba(255,255,255,.025), transparent 40%);
}

.io-footer-fold {
  position: absolute;
  width: 240px;
  height: auto;
  fill: rgba(255,248,238,.025);
  stroke: rgba(184,132,67,.16);
  stroke-width: 1.2;
}

.io-footer-fold line {
  stroke: rgba(184,132,67,.12);
}

.io-footer-fold-1 {
  left: -46px;
  top: 34px;
  transform: rotate(-12deg);
}

.io-footer-fold-2 {
  right: -50px;
  bottom: 14px;
  transform: rotate(16deg);
}

.io-footer-dot-grid {
  position: absolute;
  right: 20%;
  top: 40px;
  width: 60px;
  height: 60px;
  opacity: .35;
  background-image: radial-gradient(circle, rgba(184,132,67,.48) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
}

.io-footer-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr 1fr;
  gap: clamp(42px, 6vw, 84px);
  padding-bottom: 58px;
}

.io-footer-logo {
  display: inline-block;
  color: #fff8ee;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 31px;
  font-weight: 500;
  letter-spacing: .055em;
  text-decoration: none;
}

.io-footer-brand p {
  max-width: 390px;
  margin: 20px 0 0;
  color: rgba(255,248,238,.68);
  font-size: 13.5px;
  line-height: 1.75;
}

.io-footer-links {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 32px;
}

.io-footer-links h3,
.io-footer-contact .io-footer-kicker {
  margin: 0 0 18px;
  color: #d5ad7d;
  font-family: "Lato", Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.io-footer-links a {
  display: block;
  width: fit-content;
  margin: 0 0 12px;
  color: rgba(255,248,238,.76);
  font-size: 12.5px;
  line-height: 1.5;
  text-decoration: none;
  transition: color .25s ease, transform .25s ease;
}

.io-footer-links a:hover {
  color: #fff8ee;
  transform: translateX(4px);
}

.io-footer-contact h3 {
  max-width: 340px;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(31px, 3vw, 43px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
}

.io-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 25px;
  color: #fff8ee;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
}

.io-footer-cta::after {
  content: "";
  width: 38px;
  height: 1px;
  background: #b88443;
  transition: width .25s ease;
}

.io-footer-cta:hover::after {
  width: 64px;
}

.io-footer-bottom {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(255,248,238,.10);
}

.io-footer-bottom p {
  margin: 0;
  color: rgba(255,248,238,.48);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .06em;
}

@media (max-width: 900px) {
  .io-footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .io-footer-contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .io-footer {
    padding: 58px 22px 0;
  }

  .io-footer-inner,
  .io-footer-links {
    grid-template-columns: 1fr;
  }

  .io-footer-contact {
    grid-column: auto;
  }

  .io-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   FINAL HOMEPAGE CORRECTIONS - JULY 2026
   Why Image Origami + Sampark-style Image Difference carousel
   ========================================================= */

/* WHY IMAGE ORIGAMI: soft shade on the left, full white after the copy */
.io-why-section {
  position: relative !important;
  min-height: auto !important;
  height: auto !important;
  margin-top: 0 !important;
  padding: clamp(82px, 8vw, 120px) 0 0 !important;
  overflow: visible !important;
  transform: none !important;
  background:
    linear-gradient(90deg,
      #f6e8e6 0%,
      #faf1ee 27%,
      #fff9f6 48%,
      #ffffff 61%,
      #ffffff 100%) !important;
}

.io-why-section::before,
.io-why-section::after {
  display: none !important;
}

.io-why-bg {
  opacity: .22 !important;
  pointer-events: none;
}

.io-why-inner,
.io-why-main,
.io-why-left,
.io-why-right,
.io-why-crane,
.io-why-principles,
.io-why-principle,
.io-why-principle p {
  overflow: visible !important;
  max-height: none !important;
}

.io-why-main {
  display: grid !important;
  grid-template-columns: minmax(280px, .95fr) minmax(340px, .95fr) minmax(250px, .62fr) !important;
  align-items: center !important;
  gap: clamp(34px, 4vw, 68px) !important;
  padding-bottom: clamp(46px, 5vw, 72px) !important;
  transform: none !important;
  opacity: 1 !important;
}

.io-why-left,
.io-why-right {
  position: relative;
  z-index: 3;
}

.io-why-crane {
  position: relative !important;
  inset: auto !important;
  z-index: 2;
  display: flex !important;
  align-items: center;
  justify-content: flex-end !important;
  width: 100% !important;
  min-height: 330px;
  padding-right: clamp(20px, 3vw, 54px);
  transform: none !important;
  opacity: 1 !important;
}

.io-why-crane .io-crane-img,
.io-crane-img {
  display: block !important;
  width: min(100%, 325px) !important;
  max-width: 325px !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
  opacity: 1 !important;
  animation: none !important;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 18px 26px rgba(78, 39, 43, .12));
}

.io-why-right p {
  font-size: clamp(17px, 1.25vw, 19px) !important;
  line-height: 1.75 !important;
}

.io-why-principles {
  position: relative !important;
  z-index: 3;
  min-height: auto !important;
  margin-top: 0 !important;
  padding: 42px clamp(28px, 5vw, 76px) 48px !important;
  background: linear-gradient(180deg, rgba(246,241,238,.96), rgba(240,234,230,.99)) !important;
  border-top: 1px solid rgba(180,130,78,.22);
  border-bottom: 1px solid rgba(180,130,78,.18);
}

/* Process is removed by JavaScript; this is a no-flash fallback. */
.io-process-section {
  display: none !important;
}

/* SAMARK-STYLE IMAGE DIFFERENCE CAROUSEL */
.io-services-snapshot.io-difference-stage {
  --io-accent: #ddb16e;
  --io-visible-start: 0;
  position: relative !important;
  z-index: 50;
  isolation: isolate;
  width: 100vw !important;
  max-width: none !important;
  height: 720px !important;
  min-height: 720px !important;
  margin: 0 calc(50% - 50vw) 0 calc(50% - 50vw) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  background: #24191c !important;
  transform: none !important;
}

/* Remove the former Services section's white overlay and top separator. */
.io-services-snapshot.io-difference-stage::before,
.io-services-snapshot.io-difference-stage::after {
  content: none !important;
  display: none !important;
}

.io-difference-stage,
.io-difference-stage * {
  box-sizing: border-box;
}

.io-difference-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #24191c;
}

.io-difference-bg-current,
.io-difference-bg-next {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: brightness(.94) contrast(1.03) saturate(.96);
  transform: scale(1.02);
  transition: opacity 520ms ease, transform 900ms ease, filter 520ms ease;
  will-change: opacity, transform;
}

.io-difference-bg-current {
  z-index: 1;
  opacity: 1;
}

.io-difference-bg-next {
  z-index: 2;
  opacity: 0;
}

.io-difference-bg-next.show {
  opacity: 1;
  transform: scale(1.06);
}

.io-difference-bg-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,8,12,.14), rgba(20,8,12,.48)),
    linear-gradient(90deg, rgba(24,10,15,.34), rgba(24,10,15,.07) 48%, rgba(24,10,15,.30));
}

.io-difference-head {
  position: absolute;
  z-index: 6;
  top: 54px;
  left: clamp(34px, 5.6vw, 106px);
  max-width: min(760px, 74vw);
  pointer-events: none;
  user-select: none;
}

.io-difference-eyebrow {
  margin: 0 0 12px;
  color: var(--io-accent);
  font-family: "Lato", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-shadow: 0 3px 16px rgba(0,0,0,.34);
}

.io-difference-head h2 {
  margin: 0;
  color: #fffaf5;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(52px, 5.2vw, 82px);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.055em;
  text-shadow: 0 5px 24px rgba(0,0,0,.34);
}

.io-difference-grid {
  position: relative;
  z-index: 4;
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(calc(var(--io-visible-start) * -33.333333%));
  transition: transform 560ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.io-difference-card {
  position: relative;
  flex: 0 0 33.333333%;
  min-width: 33.333333%;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.28);
  color: #ffffff;
  cursor: pointer;
  outline: none;
  background: transparent;
}

.io-difference-card:first-child {
  border-left: 1px solid rgba(255,255,255,.20);
}

.io-difference-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(25,10,15,.24);
  transition: background 320ms ease;
}

.io-difference-card.active::before {
  background: rgba(25,10,15,.03);
}

.io-difference-card:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255,250,245,.78);
}

.io-difference-content {
  position: absolute;
  z-index: 2;
  left: clamp(34px, 4.8vw, 80px);
  right: clamp(28px, 3.5vw, 64px);
  bottom: 72px;
  color: #ffffff;
  transition: bottom 360ms ease;
}

.io-difference-card.active .io-difference-content {
  bottom: 108px;
}

.io-difference-title {
  margin: 0;
  color: #ffffff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(42px, 3.8vw, 58px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
  text-shadow: 0 4px 22px rgba(0,0,0,.46);
  transform: translateY(0);
  transition: transform 360ms ease;
}

.io-difference-hidden {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: max-height 500ms ease, opacity 360ms ease, transform 420ms ease;
}

.io-difference-card.active .io-difference-title {
  transform: translateY(-10px);
}

.io-difference-card.active .io-difference-hidden {
  max-height: 190px;
  opacity: 1;
  transform: translateY(0);
}

.io-difference-text {
  max-width: 470px;
  margin: 0;
  color: rgba(255,255,255,.95);
  font-family: "Lato", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  text-shadow: 0 3px 14px rgba(0,0,0,.38);
}

.io-difference-controls {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.io-difference-arrow {
  position: absolute;
  top: 43%;
  width: 56px;
  height: 56px;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.50);
  border-radius: 16px;
  background: rgba(255,255,255,.11);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0 0 5px;
  font-family: Arial, sans-serif;
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.14);
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.io-difference-arrow:hover,
.io-difference-arrow:focus-visible {
  color: #ffffff;
  background: rgba(123,20,56,.76);
  border-color: rgba(255,255,255,.80);
  transform: translateY(-50%) scale(1.06);
  outline: none;
}

.io-difference-prev {
  left: 28px;
}

.io-difference-next {
  right: 28px;
}

/* WOW Factors must remain light against the dark pentagon. */
.io-wow-center,
.io-wow-center h3,
.io-wow-center .io-wow-center-kicker,
.io-wow-center .io-wow-center-note {
  color: #fffaf5 !important;
  opacity: 1 !important;
  text-shadow: 0 2px 10px rgba(46,6,20,.28);
}

@media (max-width: 1280px) {
  .io-services-snapshot.io-difference-stage {
    height: 660px !important;
    min-height: 660px !important;
  }

  .io-difference-head {
    top: 48px;
  }

  .io-difference-head h2 {
    font-size: clamp(48px, 5vw, 70px);
  }

  .io-difference-content {
    left: 48px;
    right: 34px;
    bottom: 62px;
  }

  .io-difference-card.active .io-difference-content {
    bottom: 92px;
  }

  .io-difference-title {
    font-size: clamp(38px, 3.8vw, 50px);
  }

  .io-difference-text {
    font-size: 17px;
  }
}

@media (max-width: 1024px) {
  .io-why-main {
    grid-template-columns: 1fr 1fr !important;
  }

  .io-why-crane {
    grid-column: 1 / -1;
    min-height: 270px;
    justify-content: center !important;
    padding-right: 0;
  }

  .io-why-crane .io-crane-img,
  .io-crane-img {
    max-width: 300px !important;
  }

  .io-difference-card {
    flex-basis: 50%;
    min-width: 50%;
  }

  .io-difference-grid {
    transform: translateX(calc(var(--io-visible-start) * -50%));
  }

  .io-difference-head {
    left: 28px;
    max-width: 76vw;
  }

  .io-difference-head h2 {
    font-size: clamp(46px, 7vw, 64px);
  }

  .io-difference-prev {
    left: 18px;
  }

  .io-difference-next {
    right: 18px;
  }
}

@media (max-width: 760px) {
  .io-why-section {
    padding-top: 64px !important;
    background: linear-gradient(180deg, #f7e9e7 0%, #fff9f6 48%, #ffffff 72%) !important;
  }

  .io-why-main {
    grid-template-columns: 1fr !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .io-why-crane {
    grid-column: auto;
    min-height: 220px;
  }

  .io-why-crane .io-crane-img,
  .io-crane-img {
    max-width: 235px !important;
  }

  .io-why-principles {
    padding: 30px 22px 36px !important;
  }

  .io-services-snapshot.io-difference-stage {
    height: auto !important;
    min-height: 0 !important;
    background: #351c23 !important;
  }

  .io-difference-bg-wrap,
  .io-difference-controls {
    display: none;
  }

  .io-difference-head {
    position: relative;
    top: auto;
    left: auto;
    max-width: none;
    padding: 44px 24px 30px;
    background: #351c23;
  }

  .io-difference-head h2 {
    max-width: 520px;
    font-size: clamp(42px, 13vw, 58px);
  }

  .io-difference-grid {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    transform: none !important;
  }

  .io-difference-card {
    min-width: 100%;
    height: 390px;
    border-right: 0;
    border-top: 1px solid rgba(255,255,255,.18);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image:
      linear-gradient(180deg, rgba(23,8,13,.18), rgba(23,8,13,.67)),
      var(--io-mobile-img);
  }

  .io-difference-card:first-child {
    border-left: 0;
  }

  .io-difference-card::before,
  .io-difference-card.active::before {
    background: rgba(20,7,12,.16);
  }

  .io-difference-content,
  .io-difference-card.active .io-difference-content {
    left: 26px;
    right: 26px;
    bottom: 34px;
  }

  .io-difference-title,
  .io-difference-card.active .io-difference-title {
    font-size: 36px;
    white-space: normal;
    transform: none;
  }

  .io-difference-hidden,
  .io-difference-card.active .io-difference-hidden {
    max-height: 240px;
    opacity: 1;
    transform: none;
  }

  .io-difference-text {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .io-difference-bg-current,
  .io-difference-bg-next,
  .io-difference-grid,
  .io-difference-content,
  .io-difference-title,
  .io-difference-hidden,
  .io-difference-arrow {
    transition: none !important;
  }
}

/* =========================================================
   CAROUSEL VISIBILITY + SERVICE/WHY SECTION HANDOFF FIX
   ========================================================= */

/* Desktop/tablet: keep the upper image clear. Only the bottom 30%
   of inactive panels receives a graduated text-readability shadow. */
@media (min-width: 761px) {
  .io-difference-card::before {
    inset: auto 0 0 !important;
    width: auto !important;
    height: 30% !important;
    background: linear-gradient(
      180deg,
      rgba(25, 10, 15, 0) 0%,
      rgba(25, 10, 15, .02) 42%,
      rgba(25, 10, 15, .20) 70%,
      rgba(25, 10, 15, .58) 100%
    ) !important;
  }

  .io-difference-card.active::before {
    background: linear-gradient(
      180deg,
      rgba(25, 10, 15, 0) 0%,
      rgba(25, 10, 15, 0) 55%,
      rgba(25, 10, 15, .08) 76%,
      rgba(25, 10, 15, .22) 100%
    ) !important;
  }
}

/* Remove the old sticky handoff spacer and the pale double band below
   the three service-domain cards. The Why section now starts cleanly
   after the cards with its own background and spacing. */
@media (min-width: 981px) {
  .io-service-journey {
    min-height: auto !important;
    height: auto !important;
    background: transparent !important;
    isolation: auto !important;
  }

  .io-service-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    transform: none !important;
    filter: none !important;
  }

  .io-service-sticky::after {
    content: none !important;
    display: none !important;
  }

  .io-after-hero {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    padding-bottom: clamp(34px, 3.2vw, 52px) !important;
    transform: none !important;
    filter: none !important;
  }

  .io-after-inner {
    transform: none !important;
    opacity: 1 !important;
  }

  .io-why-section {
    margin-top: 0 !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   CAROUSEL INACTIVE-PANEL GLASS LABELS
   ========================================================= */
@media (min-width: 761px) {
  /* The image is continuous, so full-height vertical separators are removed. */
  .io-difference-card,
  .io-difference-card:first-child {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* Inactive panels no longer darken the full lower strip behind the image. */
  .io-difference-card:not(.active)::before {
    background: none !important;
  }

  /* A restrained translucent label box keeps the title readable without
     visually dividing the photograph into three vertical blocks. */
  .io-difference-card::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 28%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
      145deg,
      rgba(75, 43, 52, .38) 0%,
      rgba(49, 25, 34, .64) 72%,
      rgba(35, 17, 24, .72) 100%
    );
    border-top: 1px solid rgba(221, 177, 110, .72);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .14),
      0 14px 32px rgba(16, 7, 10, .16);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    clip-path: polygon(
      28px 0,
      calc(100% - 28px) 0,
      100% 28px,
      100% 100%,
      0 100%,
      0 28px
    );
    transition: opacity 280ms ease, transform 360ms ease;
    transform: translateY(8px);
  }

  .io-difference-card:not(.active)::after {
    opacity: 1;
    transform: translateY(0);
  }

  /* Short horizontal accent beside inactive titles replaces the old
     full-height panel rules. */
  .io-difference-card:not(.active) .io-difference-title {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .io-difference-card:not(.active) .io-difference-title::after {
    content: "";
    display: block;
    flex: 0 0 clamp(34px, 4vw, 58px);
    height: 1px;
    margin-top: .12em;
    background: linear-gradient(
      90deg,
      rgba(221, 177, 110, .92),
      rgba(221, 177, 110, .18)
    );
  }

  .io-difference-card.active .io-difference-title::after {
    content: none;
  }
}

/* =========================================================
   WHY IMAGE ORIGAMI - IRREGULAR EDITORIAL COLLAGE
   Replaces the former crane without changing the section HTML source.
   ========================================================= */

/* Hide the old crane immediately; JavaScript replaces its container. */
.io-why-crane > .io-crane-img {
  display: none !important;
}

.io-why-main {
  grid-template-columns:
    minmax(350px, 1.00fr)
    minmax(300px, .84fr)
    minmax(420px, 1.12fr) !important;
  gap: clamp(28px, 2.8vw, 46px) !important;
  align-items: center !important;
  max-width: 1540px !important;
}

.io-why-right {
  max-width: 430px !important;
  padding: 10px 0 10px clamp(26px, 2.2vw, 38px) !important;
  border-left: 1px solid rgba(197, 138, 61, .42);
  transform: none !important;
}

.io-why-right p {
  margin-top: 22px !important;
  max-width: 390px;
  font-size: clamp(16px, 1.08vw, 17.5px) !important;
  line-height: 1.72 !important;
}

.io-why-collage-host {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 520px !important;
  padding: 8px 0 6px !important;
  overflow: visible !important;
  transform: none !important;
  opacity: 1 !important;
}

.io-why-collage-shell {
  position: relative;
  isolation: isolate;
  width: min(104%, 575px);
  height: clamp(480px, 39vw, 555px);
  min-height: 470px;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.io-why-collage-shell::before {
  content: "";
  position: absolute;
  inset: 8% 7%;
  z-index: -1;
  pointer-events: none;
  opacity: .08;
  background-image: radial-gradient(circle, rgba(123,20,56,.18) 1px, transparent 1.2px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(135deg, transparent 8%, #000 34%, #000 68%, transparent 92%);
  mask-image: linear-gradient(135deg, transparent 8%, #000 34%, #000 68%, transparent 92%);
}

.io-collage-fold,
.io-collage-spark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  fill: none;
  stroke: rgba(123, 20, 56, .18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.io-collage-fold-a {
  top: 5%;
  left: 5%;
  width: 54px;
  transform: rotate(-14deg);
  opacity: .28;
}

.io-collage-fold-b {
  right: 3%;
  bottom: 5%;
  width: 44px;
  transform: rotate(18deg);
  opacity: .22;
}

.io-collage-spark {
  right: 9%;
  top: 8%;
  width: 24px;
  stroke: rgba(197, 138, 61, .30);
  opacity: .34;
}

.io-collage-card {
  --io-collage-rotate: 0deg;
  --io-collage-move-x: 0px;
  --io-collage-move-y: 0px;
  --io-collage-preview-x: 0px;
  --io-collage-preview-y: 0px;
  --io-collage-preview-scale: 1;

  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 5px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow:
    0 14px 30px rgba(52, 29, 34, .12),
    0 3px 8px rgba(52, 29, 34, .07);
  transform:
    translate3d(var(--io-collage-move-x), var(--io-collage-move-y), 0)
    rotate(var(--io-collage-rotate));
  transform-origin: center;
  transition:
    transform 420ms cubic-bezier(.2,.75,.2,1),
    opacity 280ms ease,
    filter 280ms ease,
    box-shadow 320ms ease;
  will-change: transform;
  cursor: pointer;
  outline: none;
}

.io-collage-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 520ms cubic-bezier(.2,.75,.2,1), filter 280ms ease;
}

/* Deliberately irregular, overlapping composition. */
.io-collage-card-1 {
  top: 4%;
  left: 10%;
  width: 24%;
  z-index: 4;
  --io-collage-rotate: -4deg;
}

.io-collage-card-2 {
  top: -1%;
  left: 38%;
  width: 21%;
  z-index: 2;
  --io-collage-rotate: 2.4deg;
}

.io-collage-card-3 {
  top: 8%;
  right: 5%;
  width: 25%;
  z-index: 5;
  --io-collage-rotate: -2deg;
}

.io-collage-card-4 {
  top: 31%;
  left: 0;
  width: 22%;
  z-index: 3;
  --io-collage-rotate: 3.2deg;
}

.io-collage-card-5 {
  top: 23%;
  left: 27%;
  width: 31%;
  z-index: 7;
  --io-collage-rotate: -1.4deg;
}

.io-collage-card-6 {
  top: 34%;
  right: 0;
  width: 23%;
  z-index: 4;
  --io-collage-rotate: 3.8deg;
}

.io-collage-card-7 {
  bottom: 17%;
  left: 8%;
  width: 25%;
  z-index: 5;
  --io-collage-rotate: -3.2deg;
}

.io-collage-card-8 {
  bottom: 14%;
  left: 39%;
  width: 22%;
  z-index: 3;
  --io-collage-rotate: 2.2deg;
}

.io-collage-card-9 {
  right: 8%;
  bottom: 17%;
  width: 26%;
  z-index: 6;
  --io-collage-rotate: -2.4deg;
}

.io-why-collage-shell.is-engaged .io-collage-card:not(.is-active) {
  opacity: .46;
  filter: saturate(.64) brightness(.90) blur(.35px);
}

.io-collage-card.is-active,
.io-collage-card:hover,
.io-collage-card:focus-visible {
  z-index: 30 !important;
  opacity: 1 !important;
  filter: none !important;
  transform:
    translate3d(
      calc(var(--io-collage-move-x) + var(--io-collage-preview-x)),
      calc(var(--io-collage-move-y) + var(--io-collage-preview-y)),
      0
    )
    rotate(0deg)
    scale(var(--io-collage-preview-scale)) !important;
  box-shadow:
    0 34px 72px rgba(52, 29, 34, .28),
    0 10px 24px rgba(52, 29, 34, .14);
}

.io-collage-card.is-active img,
.io-collage-card:hover img,
.io-collage-card:focus-visible img {
  transform: scale(1.025);
  filter: contrast(1.025) saturate(1.04);
}

.io-collage-card:focus-visible {
  outline: 2px solid rgba(197, 138, 61, .82);
  outline-offset: 4px;
}

.io-collage-card.is-missing {
  background:
    linear-gradient(135deg, rgba(247,235,232,.96), rgba(255,255,255,.98));
}

.io-collage-card.is-missing img {
  opacity: 0;
}

@media (max-width: 1240px) {
  .io-why-main {
    grid-template-columns:
      minmax(320px, .98fr)
      minmax(260px, .72fr)
      minmax(350px, 1.02fr) !important;
    gap: 20px !important;
    padding-left: 42px !important;
    padding-right: 42px !important;
  }

  .io-why-collage-host {
    min-height: 470px !important;
  }

  .io-why-collage-shell {
    height: 460px;
    min-height: 460px;
  }
}

@media (max-width: 1080px) {
  .io-why-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 38px !important;
  }

  .io-why-right {
    padding-left: 0 !important;
    border-left: 0;
  }

  .io-why-right {
    max-width: 470px !important;
    transform: none;
  }

  .io-why-collage-host {
    grid-column: 1 / -1 !important;
    min-height: 500px !important;
    padding-top: 4px !important;
  }

  .io-why-collage-shell {
    width: min(100%, 720px);
    height: 500px;
    min-height: 500px;
  }
}

@media (max-width: 760px) {
  .io-why-main {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .io-why-right {
    transform: none;
    padding-top: 0 !important;
  }

  .io-why-right p {
    margin-top: 20px !important;
  }

  .io-why-collage-host {
    grid-column: auto !important;
    min-height: 470px !important;
    margin-top: 4px;
  }

  .io-why-collage-shell {
    width: 100%;
    height: 455px;
    min-height: 455px;
  }

  .io-collage-card {
    padding: 4px;
    --io-collage-preview-x: 0px !important;
    --io-collage-preview-y: 0px !important;
    --io-collage-preview-scale: 1.12 !important;
  }

  .io-collage-card.is-active,
  .io-collage-card:hover,
  .io-collage-card:focus-visible {
    transform:
      translate3d(0, 0, 0)
      rotate(var(--io-collage-rotate))
      scale(1.12) !important;
  }
}

@media (max-width: 430px) {
  .io-why-collage-host {
    min-height: 420px !important;
  }

  .io-why-collage-shell {
    height: 410px;
    min-height: 410px;
  }

  .io-collage-card-5 {
    width: 32%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .io-collage-card,
  .io-collage-card img {
    transition: none !important;
  }
}

/* =========================================================
   CORPORATE WORKSHOPS
   Image-led corporate training section
   ========================================================= */

.io-workshops-section {
  position: relative;
  z-index: 24;
  overflow: hidden;
  padding: clamp(86px, 8vw, 126px) 0;
  background:
    radial-gradient(circle at 13% 18%, rgba(229, 204, 198, .28), transparent 31%),
    radial-gradient(circle at 88% 82%, rgba(197, 138, 61, .09), transparent 28%),
    linear-gradient(115deg, #fffaf6 0%, #fbf5f1 54%, #fffdfa 100%);
  color: #211b19;
}

.io-workshops-section * {
  box-sizing: border-box;
}

.io-workshops-decor,
.io-workshops-fold,
.io-workshops-dots {
  position: absolute;
  pointer-events: none;
}

.io-workshops-decor {
  inset: 0;
  overflow: hidden;
}

.io-workshops-fold {
  fill: none;
  stroke: rgba(123, 20, 56, .09);
  stroke-width: 1.2;
}

.io-workshops-fold-1 {
  width: 210px;
  height: 170px;
  top: 28px;
  right: -34px;
  transform: rotate(8deg);
}

.io-workshops-fold-2 {
  width: 170px;
  height: 170px;
  left: -48px;
  bottom: -36px;
  transform: rotate(-14deg);
}

.io-workshops-dots {
  width: 54px;
  height: 54px;
  opacity: .28;
  background-image: radial-gradient(circle, rgba(123, 20, 56, .32) 1px, transparent 1.2px);
  background-size: 12px 12px;
}

.io-workshops-dots-1 {
  right: 7%;
  bottom: 10%;
}

.io-workshops-dots-2 {
  left: 4%;
  top: 12%;
}

.io-workshops-inner {
  position: relative;
  z-index: 2;
  width: min(1460px, calc(100% - 88px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(68px, 6vw, 112px);
  align-items: center;
}

.io-workshops-media {
  position: relative;
  min-height: 730px;
}

.io-workshops-main-image,
.io-workshops-support {
  margin: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 26px 62px rgba(58, 35, 30, .16);
}

.io-workshops-main-image {
  position: relative;
  width: min(100%, 610px);
  border-radius: 30px;
}

.io-workshops-main-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 68%, rgba(35, 22, 19, .10));
}

.io-workshops-main-image img,
.io-workshops-support img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.io-workshops-main-image img {
  aspect-ratio: 1122 / 1402;
}

.io-workshops-support {
  position: absolute;
  right: -18px;
  width: clamp(210px, 18vw, 278px);
  padding: 7px;
  border: 1px solid rgba(123, 20, 56, .08);
  border-radius: 22px;
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    box-shadow .42s ease;
}

.io-workshops-support img {
  aspect-ratio: 561 / 701;
  border-radius: 16px;
}

.io-workshops-support-speaker {
  top: 118px;
  transform: rotate(1.2deg);
}

.io-workshops-support-group {
  bottom: 42px;
  transform: rotate(-1.5deg);
}

.io-workshops-support:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.035);
  box-shadow: 0 34px 72px rgba(58, 35, 30, .21);
  z-index: 4;
}

.io-workshops-content {
  max-width: 750px;
}

.io-workshops-eyebrow {
  margin: 0;
  color: #7b1438;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.io-workshops-heading-line {
  display: block;
  width: 46px;
  height: 2px;
  margin: 18px 0 26px;
  background: #c58a3d;
}

.io-workshops-content h2 {
  max-width: 740px;
  margin: 0;
  color: #7b1438;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 4.35vw, 74px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}

.io-workshops-intro {
  max-width: 680px;
  margin: 26px 0 32px;
  color: #403735;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.72;
}

.io-workshops-accordion {
  display: grid;
  gap: 12px;
}

.io-workshops-item {
  overflow: hidden;
  border: 1px solid rgba(123, 20, 56, .13);
  border-radius: 16px;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 8px 22px rgba(58, 35, 30, .035);
  transition:
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}

.io-workshops-item:hover {
  border-color: rgba(123, 20, 56, .25);
  background: rgba(255, 251, 248, .94);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(58, 35, 30, .07);
}

.io-workshops-item.is-active {
  border-color: rgba(123, 20, 56, .26);
  background: linear-gradient(100deg, rgba(123, 20, 56, .98) 0 76px, rgba(249, 228, 228, .94) 76px 100%);
  box-shadow: 0 18px 34px rgba(92, 34, 50, .12);
}

.io-workshops-trigger {
  width: 100%;
  min-height: 70px;
  padding: 0 22px 0 16px;
  border: 0;
  background: transparent;
  color: #241e1c;
  font: inherit;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 18px;
  text-align: left;
  cursor: pointer;
}

.io-workshops-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(123, 20, 56, .06);
  transition: background .3s ease;
}

.io-workshops-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: #7b1438;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .3s ease;
}

.io-workshops-item.is-active .io-workshops-icon {
  background: transparent;
}

.io-workshops-item.is-active .io-workshops-icon svg {
  stroke: #fff;
}

.io-workshops-label {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 1.65vw, 28px);
  font-weight: 500;
  line-height: 1.12;
  color: #2a2220;
}

.io-workshops-item.is-active .io-workshops-label {
  color: #7b1438;
}

.io-workshops-chevron {
  width: 10px;
  height: 10px;
  border-right: 1.5px solid #7b1438;
  border-bottom: 1.5px solid #7b1438;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .28s ease;
}

.io-workshops-item.is-active .io-workshops-chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.io-workshops-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.22, 1, .36, 1);
}

.io-workshops-panel > div {
  overflow: hidden;
}

.io-workshops-panel p {
  margin: 0;
  padding: 0 28px 0 92px;
  color: #594947;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 14.5px;
  line-height: 1.68;
  opacity: 0;
  transform: translateY(-5px);
  transition:
    padding .34s ease,
    opacity .26s ease,
    transform .34s ease;
}

.io-workshops-item.is-active .io-workshops-panel {
  grid-template-rows: 1fr;
}

.io-workshops-item.is-active .io-workshops-panel p {
  padding-bottom: 20px;
  opacity: 1;
  transform: translateY(0);
}

.io-workshops-action {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.io-workshops-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 15px 28px;
  border-radius: 9px;
  color: #fff;
  background: #7b1438;
  box-shadow: 0 12px 28px rgba(123, 20, 56, .18);
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition:
    transform .28s ease,
    background .28s ease,
    box-shadow .28s ease;
}

.io-workshops-button:hover {
  color: #fff;
  background: #64102d;
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(123, 20, 56, .24);
}

.io-workshops-button span {
  font-size: 21px;
  line-height: 1;
}

.io-workshops-action p {
  max-width: 330px;
  margin: 0;
  color: #655956;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .io-workshops-inner {
    width: min(100% - 56px, 980px);
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .io-workshops-media {
    width: min(760px, 100%);
    min-height: 720px;
    margin: 0 auto;
  }

  .io-workshops-main-image {
    width: min(610px, calc(100% - 120px));
  }

  .io-workshops-support {
    right: 0;
    width: 240px;
  }

  .io-workshops-content {
    max-width: 820px;
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  .io-workshops-section {
    padding: 76px 0 68px;
  }

  .io-workshops-inner {
    width: calc(100% - 32px);
    gap: 42px;
  }

  .io-workshops-media {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .io-workshops-main-image {
    grid-column: 1 / -1;
    width: 100%;
    border-radius: 22px;
  }

  .io-workshops-support {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 5px;
    border-radius: 16px;
    transform: none;
  }

  .io-workshops-support img {
    border-radius: 12px;
  }

  .io-workshops-content h2 {
    font-size: clamp(42px, 12vw, 56px);
  }

  .io-workshops-intro {
    font-size: 15.5px;
    line-height: 1.65;
  }

  .io-workshops-trigger {
    min-height: 66px;
    padding-right: 16px;
    grid-template-columns: 40px minmax(0, 1fr) 14px;
    gap: 12px;
  }

  .io-workshops-icon {
    width: 38px;
    height: 38px;
  }

  .io-workshops-label {
    font-size: 21px;
  }

  .io-workshops-panel p {
    padding-left: 68px;
    padding-right: 18px;
    font-size: 13.5px;
  }

  .io-workshops-action {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .io-workshops-button {
    width: 100%;
    justify-content: center;
  }
}


/* Corporate Workshops refinement: on-brand active state and aligned support images */
.io-workshops-item.is-active {
  overflow: hidden;
  background: linear-gradient(90deg, #7b1438 0 76px, #f8e9e8 76px 100%);
  border-color: rgba(123, 20, 56, .26);
}

.io-workshops-item .io-workshops-trigger,
.io-workshops-item .io-workshops-trigger:hover,
.io-workshops-item .io-workshops-trigger:focus,
.io-workshops-item .io-workshops-trigger:active,
.io-workshops-item.is-active .io-workshops-trigger,
.io-workshops-item.is-active .io-workshops-trigger:hover,
.io-workshops-item.is-active .io-workshops-trigger:focus,
.io-workshops-item.is-active .io-workshops-trigger:active {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0;
  clip-path: none !important;
}

.io-workshops-item.is-active .io-workshops-label,
.io-workshops-item.is-active .io-workshops-chevron {
  color: #7b1438;
  border-color: #7b1438;
}

.io-workshops-support {
  right: -8px;
  width: clamp(190px, 15vw, 220px);
  transform: none;
}

.io-workshops-support-speaker {
  top: 84px;
  transform: none;
}

.io-workshops-support-group {
  bottom: 36px;
  transform: none;
}

.io-workshops-support:hover {
  transform: translateY(-6px) scale(1.025);
}

@media (max-width: 1200px) and (min-width: 761px) {
  .io-workshops-support {
    width: clamp(190px, 24vw, 220px);
    right: 18px;
  }

  .io-workshops-support-speaker {
    top: 72px;
  }

  .io-workshops-support-group {
    bottom: 28px;
  }
}

/* =========================================================
   CORPORATE WORKSHOPS - SUPPORT IMAGE POSITION REFINEMENT
   Both cards sit farther outside the main image; lower card raised.
   ========================================================= */
@media (min-width: 1201px) {
  .io-workshops-support {
    right: -38px;
  }

  .io-workshops-support-speaker {
    top: 84px;
  }

  .io-workshops-support-group {
    bottom: 82px;
  }
}

@media (max-width: 1200px) and (min-width: 761px) {
  .io-workshops-support {
    right: -14px;
  }

  .io-workshops-support-speaker {
    top: 72px;
  }

  .io-workshops-support-group {
    bottom: 64px;
  }
}

/* =========================================================
   WHY IMAGE ORIGAMI - EDITORIAL PROLOGUE + WARM COLOUR FIELD
   Adds a literary transition while keeping the collage on white.
   ========================================================= */

.io-why-section {
  padding-top: clamp(52px, 5.2vw, 78px) !important;
  background:
    radial-gradient(circle at 13% 12%, rgba(123, 20, 56, .055), transparent 27%),
    linear-gradient(
      90deg,
      #f2ddda 0%,
      #f6e7df 29%,
      #fbf2eb 48%,
      #ffffff 65%,
      #ffffff 100%
    ) !important;
}

.io-why-prologue {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(48px, 1fr) minmax(0, 720px) minmax(48px, 1fr);
  align-items: center;
  gap: clamp(20px, 2.5vw, 38px);
  width: min(1080px, calc(100% - 152px));
  margin: 0 auto clamp(38px, 4vw, 58px);
  opacity: calc(.42 + (var(--io-why-scroll, 0) * .58));
  transform: translateY(calc((1 - var(--io-why-scroll, 0)) * 24px));
  transition: opacity 360ms ease, transform 560ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.io-why-prologue p {
  margin: 0;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(31px, 2.55vw, 43px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: #17243a;
}

.io-why-prologue-line {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 138, 61, .82));
}

.io-why-prologue-line-right {
  background: linear-gradient(90deg, rgba(197, 138, 61, .82), transparent);
}

.io-why-collage-host {
  isolation: isolate;
}

.io-why-collage-host::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -76px -8vw -70px -42px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .74) 14%,
    #ffffff 34%,
    #ffffff 100%
  );
}

.io-why-collage-shell {
  z-index: 1;
}

@media (max-width: 1080px) {
  .io-why-section {
    background:
      radial-gradient(circle at 12% 10%, rgba(123, 20, 56, .05), transparent 25%),
      linear-gradient(180deg, #f3dfdc 0%, #faf0e9 48%, #ffffff 78%, #ffffff 100%) !important;
  }

  .io-why-prologue {
    width: min(820px, calc(100% - 84px));
    margin-bottom: 42px;
  }

  .io-why-collage-host::before {
    inset: -34px -42px -42px;
    background: linear-gradient(180deg, rgba(255,255,255,.55), #ffffff 22%, #ffffff 100%);
  }
}

@media (max-width: 760px) {
  .io-why-section {
    padding-top: 46px !important;
  }

  .io-why-prologue {
    grid-template-columns: 1fr;
    gap: 17px;
    width: calc(100% - 44px);
    margin-bottom: 34px;
  }

  .io-why-prologue p {
    max-width: 520px;
    margin: 0 auto;
    font-size: clamp(29px, 8.5vw, 38px);
  }

  .io-why-prologue-line {
    width: 58px;
    margin: 0 auto;
    background: rgba(197, 138, 61, .82);
  }

  .io-why-prologue-line-right {
    display: none;
  }

  .io-why-collage-host::before {
    inset: -24px -22px -34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .io-why-prologue {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   FINAL CAROUSEL ARROW STATE FIX
   Prevent theme/browser button states from turning arrows blue.
   ========================================================= */

.image-origami-home .io-difference-stage .io-difference-arrow:hover,
.image-origami-home .io-difference-stage .io-difference-arrow:focus,
.image-origami-home .io-difference-stage .io-difference-arrow:focus-visible,
.image-origami-home .io-difference-stage .io-difference-arrow:active {
  background: rgba(123, 20, 56, 0.88) !important;
  background-color: rgba(123, 20, 56, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.80) !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

.image-origami-home .io-difference-stage .io-difference-arrow:focus:not(:hover) {
  background: rgba(255, 255, 255, 0.11) !important;
  background-color: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.50) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  transform: translateY(-50%) !important;
}