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

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

.io-page-flow {
  position: relative;
  z-index: 10;
  margin-top: calc(-1 * var(--io-after-overlap));
  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(-14px);
}

.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: 34px;
}

.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(30px, 2.35vw, 42px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.02em;
  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: 22.5%;
  transform: translateY(38px) rotate(-1.4deg) rotateX(10deg) scale(.96);
}

.io-wow-card-2 {
  left: 53%;
  top: 2%;
  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);
}

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

.io-wow-card-5 {
  right: 13.5%;
  bottom: 4.5%;
  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-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--io-wine);
  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%);
  transition: transform .42s cubic-bezier(.22,1,.36,1), background .42s ease;
}

.io-wow-card.active .io-wow-number,
.io-wow-card:hover .io-wow-number {
  transform: rotate(45deg) scale(1.05);
  background: linear-gradient(135deg, #fff8ec, #d5ad7d);
}

.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 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: 10%; }
  .io-wow-card-5 { right: 10%; }
}

@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;
}

.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;
  background:
    linear-gradient(118deg, rgba(255,255,255,1), rgba(255,255,255,.76)),
    linear-gradient(145deg, #fffefa 0%, #efd8bb 100%);
  box-shadow:
    18px 21px 0 rgba(213,173,125,.16),
    0 36px 76px rgba(61,39,24,.18),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.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;
  }
}