:root {
  --ink:#15121a;
  --muted:#655f69;
  --purple:#4d1688;
  --purple2:#6c22aa;
  --lav:#efe5fb;
  --soft:#f5f1f7;
  --line:#ddd6e0;
  --white:#fff;
  --lime:#d9ff55;
  --radius:24px;
  --shadow:0 22px 60px rgba(41,16,57,.12)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:Arial,"Helvetica Neue",sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.5;
  overflow-x:hidden
}

a {
  color:inherit
}

.skip {
  position:fixed;
  left:12px;
  top:-60px;
  background:#fff;
  padding:12px 18px;
  z-index:999
}

.skip:focus {
  top:12px
}

.shell {
  width:min(1180px,calc(100% - 40px));
  margin:auto
}

.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(32,15,42,.08)
}

.nav-wrap {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.brand {
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none
}

.brand span,.footer-mark {
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--purple);
  color:#fff;
  font-weight:800
}

.brand strong {
  font-size:15px
}

.site-header nav {
  display:flex;
  gap:28px;
  align-items:center
}

.site-header nav a {
  text-decoration:none;
  font-size:14px;
  font-weight:700
}

.nav-cta {
  background:var(--ink);
  color:#fff;
  padding:11px 16px;
  border-radius:4px
}

.menu {
  display:none
}

.hero {
  min-height:760px;
  padding:150px 0 90px;
  background:linear-gradient(135deg,#fff 25%,#f5edf9 100%);
  position:relative
}

.hero:after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:38%;
  height:7px;
  background:var(--purple)
}

.hero-grid {
  display:grid;
  grid-template-columns:1.13fr .87fr;
  gap:70px;
  align-items:center
}

.kicker,.eyebrow {
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:12px;
  font-weight:800;
  color:var(--purple)
}

.availability {
  width:8px;
  height:8px;
  background:#39a65a;
  border-radius:50%;
  display:inline-block;
  margin-right:9px;
  box-shadow:0 0 0 5px rgba(57,166,90,.12)
}

h1 {
  font-size:clamp(50px,6vw,82px);
  line-height:.99;
  letter-spacing:-.055em;
  margin:26px 0 28px;
  max-width:800px
}

h1 em {
  font-style:normal;
  color:var(--purple)
}

.hero-text {
  font-size:20px;
  line-height:1.55;
  max-width:670px;
  color:var(--muted)
}

.actions {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:34px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  text-decoration:none;
  font-weight:800;
  padding:15px 20px;
  border-radius:4px
}

.primary {
  background:var(--purple);
  color:#fff
}

.primary:hover {
  background:var(--purple2)
}

.text-link {
  padding-left:4px
}

.hero-tags {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0;
  margin:40px 0 0;
  list-style:none
}

.hero-tags li,.pills span {
  font-size:12px;
  border:1px solid var(--line);
  padding:7px 11px;
  border-radius:100px;
  background:rgba(255,255,255,.7)
}

.hero-stage {
  height:520px;
  position:relative
}

.orb {
  position:absolute;
  border-radius:50%;
  filter:blur(3px)
}

.orb.one {
  width:360px;
  height:360px;
  background:var(--purple);
  right:20px;
  top:70px
}

.orb.two {
  width:180px;
  height:180px;
  background:var(--lime);
  right:-55px;
  top:15px
}

.stage-card {
  position:absolute;
  z-index:2;
  background:#fff;
  border-radius:14px;
  padding:16px 20px;
  display:flex;
  gap:14px;
  align-items:center;
  box-shadow:var(--shadow);
  animation:float 5s ease-in-out infinite
}

.stage-card small {
  display:block;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em
}

.stage-card b {
  font-size:14px
}

.stage-card .icon {
  width:36px;
  height:36px;
  border-radius:9px;
  background:var(--lav);
  display:grid;
  place-items:center;
  color:var(--purple);
  font-size:20px
}

.insight {
  top:45px;
  left:0
}

.strategy {
  top:210px;
  right:-10px;
  animation-delay:-1.4s
}

.system {
  bottom:32px;
  left:35px;
  animation-delay:-2.6s
}

.impact-panel {
  position:absolute;
  z-index:2;
  left:90px;
  top:135px;
  width:270px;
  height:260px;
  background:#18121d;
  color:#fff;
  border-radius:24px;
  padding:28px;
  box-shadow:var(--shadow);
  transform:rotate(-3deg)
}

.impact-panel p {
  margin:0;
  color:#b9adbfa;
  font-size:13px
}

.impact-panel strong {
  font-size:78px;
  line-height:1.1;
  display:block;
  color:var(--lime)
}

.impact-panel span {
  font-size:13px
}

.mini-chart {
  height:60px;
  display:flex;
  align-items:flex-end;
  gap:9px;
  margin-top:24px
}

.mini-chart i {
  width:27px;
  background:#7c3eb5;
  border-radius:3px 3px 0 0
}

.mini-chart i:nth-child(1) {
  height:20%
}

.mini-chart i:nth-child(2) {
  height:35%
}

.mini-chart i:nth-child(3) {
  height:45%
}

.mini-chart i:nth-child(4) {
  height:70%
}

.mini-chart i:nth-child(5) {
  height:100%;
  background:var(--lime)
}

@keyframes float {
  50% {
  transform:translateY(-12px)
}

}

.outcomes {
  background:#18121d;
  color:#fff
}

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

.outcome {
  padding:42px 28px;
  border-left:1px solid #443948
}

.outcome:last-child {
  border-right:1px solid #443948
}

.outcome strong,.outcome>span {
  font-size:46px;
  line-height:1;
  color:var(--lime);
  font-weight:800
}

.outcome p {
  font-size:13px;
  color:#c7bdca;
  margin:10px 0 0
}

.section {
  padding:120px 0
}

.section-head {
  display:grid;
  grid-template-columns:1fr 400px;
  align-items:end;
  gap:50px;
  margin-bottom:62px
}

.section-head h2,.about-copy h2,.contact-box h2 {
  font-size:clamp(38px,5vw,64px);
  line-height:1.05;
  letter-spacing:-.045em;
  margin:12px 0 0
}

.section-head>p {
  font-size:17px;
  color:var(--muted)
}

.feature-project {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  background:var(--soft);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:28px
}

.project-visual {
  min-height:540px;
  position:relative;
  display:grid;
  place-items:center
}

.commerce-art {
  background:linear-gradient(135deg,#51178d,#7b32b3)
}

.browser {
  width:80%;
  background:#fff;
  border-radius:13px;
  box-shadow:0 30px 70px rgba(0,0,0,.3);
  overflow:hidden;
  transform:rotate(-2deg)
}

.browser-top {
  height:30px;
  background:#ede8ef;
  display:flex;
  gap:5px;
  align-items:center;
  padding:0 10px
}

.browser-top i {
  width:7px;
  height:7px;
  background:#bbb;
  border-radius:50%
}

.screen {
  height:300px;
  display:grid;
  grid-template-columns:90px 1fr
}

.screen aside {
  background:#1f1824;
  color:#fff;
  padding:22px 13px
}

.screen aside b {
  font-size:10px
}

.screen aside span {
  display:block;
  height:6px;
  background:#564b5a;
  margin-top:17px;
  border-radius:5px
}

.catalog {
  padding:22px
}

.search {
  height:22px;
  border-radius:12px;
  background:#ece8ee;
  width:70%
}

.product-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:25px
}

.product-row div {
  height:85px;
  background:linear-gradient(#efe8f4 60%,#d4c9d9 60%);
  border-radius:5px
}

.checkout {
  display:flex;
  justify-content:space-between;
  margin-top:35px
}

.checkout i {
  height:10px;
  width:18%;
  background:#ddd4df;
  border-radius:5px
}

.result-chip {
  position:absolute;
  right:4%;
  bottom:13%;
  background:var(--lime);
  padding:12px 18px;
  border-radius:5px;
  font-weight:800;
  box-shadow:var(--shadow)
}

.project-copy,.card-copy {
  padding:55px
}

.project-type {
  font-size:11px;
  color:var(--purple);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:800
}

.project-copy h3,.card-copy h3 {
  font-size:38px;
  line-height:1.08;
  letter-spacing:-.035em;
  margin:14px 0 20px
}

.project-copy>p,.card-copy>p {
  color:var(--muted)
}

.project-results {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:28px 0;
  padding:20px 0;
  gap:20px
}

.project-results span {
  font-size:12px
}

.project-results b {
  font-size:26px;
  display:block;
  color:var(--purple)
}

.pills {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:22px 0
}

.case-link {
  display:flex;
  justify-content:space-between;
  text-decoration:none;
  font-weight:800;
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:30px
}

.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px
}

.project-card {
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden
}

.card-art {
  height:355px;
  position:relative;
  display:grid;
  place-items:center
}

.ds-art {
  background:#e5f2e9
}

.component {
  width:250px;
  background:#fff;
  border-radius:12px;
  padding:25px;
  box-shadow:var(--shadow);
  position:relative;
  z-index:2
}

.component button {
  border:0;
  background:var(--purple);
  color:#fff;
  padding:12px 24px;
  border-radius:5px
}

.component .input {
  height:38px;
  border:1px solid #bbb;
  border-radius:4px;
  margin:18px 0
}

.component .toggle {
  width:47px;
  height:25px;
  border-radius:20px;
  background:#79b98d
}

.token {
  position:absolute;
  width:70px;
  height:70px;
  border-radius:50%
}

.t1 {
  background:#52158b;
  top:38px;
  left:65px
}

.t2 {
  background:#d8ff55;
  right:70px;
  top:70px
}

.t3 {
  background:#19121e;
  left:110px;
  bottom:25px
}

.bio-art {
  background:#18121d
}

.face {
  width:180px;
  height:220px;
  border:2px solid #9e6bc5;
  border-radius:48% 48% 42% 42%;
  position:relative
}

.face i {
  position:absolute;
  width:13px;
  height:13px;
  border:2px solid var(--lime);
  border-radius:50%;
  top:80px
}

.face i:first-child {
  left:48px
}

.face i:nth-child(2) {
  right:48px
}

.face b {
  position:absolute;
  width:50px;
  height:18px;
  border-bottom:2px solid #9e6bc5;
  left:65px;
  bottom:55px
}

.scan-line {
  position:absolute;
  width:70%;
  height:2px;
  background:var(--lime);
  box-shadow:0 0 12px var(--lime);
  animation:scan 3s infinite
}

.status {
  position:absolute;
  bottom:25px;
  background:#fff;
  padding:10px 15px;
  border-radius:7px;
  font-size:12px
}

.status span {
  color:#38a15a
}

@keyframes scan {
  0%,100% {
  transform:translateY(-90px)
}

50% {
  transform:translateY(95px)
}

}

.compliance-art {
  background:#eee6fb
}

.ai-core {
  width:100px;
  height:100px;
  border-radius:30px;
  background:var(--purple);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:34px;
  font-weight:800;
  z-index:2
}

.doc {
  position:absolute;
  width:65px;
  height:80px;
  background:#fff;
  border-radius:8px;
  display:grid;
  place-items:center;
  font-weight:800;
  box-shadow:var(--shadow);
  z-index:2
}

.d1 {
  left:60px;
  top:55px;
  color:#39a65a
}

.d2 {
  right:65px;
  top:70px;
  color:#d06b24
}

.d3 {
  right:110px;
  bottom:40px;
  color:#39a65a
}

.compliance-art svg {
  position:absolute;
  width:100%;
  height:100%
}

.compliance-art path {
  fill:none;
  stroke:#a98bc0;
  stroke-width:2;
  stroke-dasharray:6 6
}

.config-art {
  background:#e8edf0
}

.config-panel {
  width:70%;
  background:#fff;
  border-radius:15px;
  padding:25px;
  box-shadow:var(--shadow);
  transform:rotate(2deg)
}

.config-panel p {
  font-size:20px;
  font-weight:800
}

.config-panel>div {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #ddd;
  padding:14px 0;
  font-size:12px
}

.config-panel span {
  color:#777
}

.config-panel button {
  width:100%;
  border:0;
  background:#19121e;
  color:#fff;
  padding:13px;
  border-radius:5px
}

.card-copy {
  padding:35px
}

.card-copy h3 {
  font-size:29px
}

.purple {
  background:var(--purple);
  color:#fff
}

.section-head.light p {
  color:#e6d8ef
}

.purple .eyebrow {
  color:var(--lime)
}

.cap-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(255,255,255,.25);
  border-left:1px solid rgba(255,255,255,.25)
}

.cap {
  padding:45px;
  border-right:1px solid rgba(255,255,255,.25);
  border-bottom:1px solid rgba(255,255,255,.25)
}

.cap>span {
  color:var(--lime);
  font-size:12px
}

.cap h3 {
  font-size:28px;
  margin:25px 0 13px
}

.cap p,.cap li {
  color:#e6d8ef
}

.cap ul {
  padding-left:18px;
  columns:2
}

.process {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}

.process>div {
  padding:38px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.process span {
  font-size:12px;
  color:var(--purple)
}

.process b {
  font-size:23px;
  display:block;
  margin:30px 0 8px
}

.process p {
  color:var(--muted);
  font-size:14px
}

.soft {
  background:var(--soft)
}

.about-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px;
  align-items:center
}

.portrait {
  height:520px;
  background:var(--purple);
  border-radius:180px 180px 20px 20px;
  padding:28px
}

.portrait-inner {
  height:100%;
  border:1px solid rgba(255,255,255,.45);
  border-radius:150px 150px 10px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center
}

.portrait-inner span {
  font-size:110px;
  font-weight:800;
  color:var(--lime)
}

.about-copy>p {
  font-size:17px;
  color:var(--muted)
}

.about-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  margin-top:35px
}

.about-facts span {
  padding:20px 0;
  border-bottom:1px solid var(--line);
  font-size:13px
}

.about-facts span:nth-child(odd) {
  border-right:1px solid var(--line);
  padding-right:20px
}

.about-facts span:nth-child(even) {
  padding-left:20px
}

.about-facts b {
  display:block;
  font-size:11px;
  text-transform:uppercase;
  color:var(--purple);
  margin-bottom:5px
}

.testimonials {
  background:#18121d;
  color:#fff
}

.testimonials .eyebrow {
  color:var(--lime)
}

.quote-slider {
  max-width:950px
}

.quote-slider blockquote {
  display:none;
  margin:25px 0 0
}

.quote-slider blockquote.active {
  display:block
}

.quote-slider blockquote>p {
  font-size:clamp(30px,4vw,50px);
  line-height:1.2;
  letter-spacing:-.035em
}

.quote-slider footer {
  display:flex;
  gap:15px;
  align-items:center;
  color:#c8bdcb
}

.quote-slider footer b {
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--purple);
  color:var(--lime)
}

.quote-controls {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:40px
}

.quote-controls button {
  border:1px solid #655b68;
  background:transparent;
  color:#fff;
  width:44px;
  height:44px;
  border-radius:50%;
  cursor:pointer
}

.quote-controls>span {
  display:flex;
  gap:8px
}

.quote-controls i {
  width:30px;
  height:2px;
  background:#574c5b
}

.quote-controls i.active {
  background:var(--lime)
}

.contact {
  padding-bottom:0
}

.contact-box {
  background:var(--purple);
  color:#fff;
  border-radius:var(--radius) var(--radius) 0 0;
  padding:80px
}

.contact-box .eyebrow {
  color:var(--lime)
}

.contact-box h2 {
  max-width:900px
}

.contact-box>p {
  color:#e4d7ed;
  font-size:18px
}

.light-button {
  background:var(--lime);
  color:var(--ink)
}

.outline-light {
  border:1px solid rgba(255,255,255,.5)
}

.contact_text{color: rgba(247,247,245,.58) !important;}

.footer {
  background:#18121d;
  color:#fff;
  padding:24px 0 !important;
}

.footer .shell {
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:60px;
  align-items:end
}

.footer p {
  font-size:12px;
  color:#bfb4c2
}

.footer .shell>div:nth-child(2) {
  display:flex;
  gap:25px
}

.footer a {
  text-decoration:none;
  font-size:13px
}

.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s ease,transform .75s ease
}

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

@media(max-width:900px) {
  .site-header nav {
  position:absolute;
  left:0;
  right:0;
  top:76px;
  background:#fff;
  padding:25px 20px;
  display:none;
  flex-direction:column;
  align-items:flex-start;
  border-bottom:1px solid var(--line)
}

.site-header nav.open {
  display:flex
}

.menu {
  display:block;
  border:0;
  background:none;
  width:36px
}

.menu span {
  display:block;
  height:2px;
  background:#111;
  margin:7px
}

.hero-grid,.feature-project,.section-head,.about-grid {
  grid-template-columns:1fr
}

.hero-stage {
  height:470px
}

.outcome-grid {
  grid-template-columns:1fr 1fr
}

.project-grid {
  grid-template-columns:1fr
}

.section-head {
  gap:10px
}

.section-head>p {
  max-width:650px
}

.project-visual {
  min-height:440px
}

.cap-grid {
  grid-template-columns:1fr
}

.process {
  grid-template-columns:1fr 1fr
}

.footer .shell {
  grid-template-columns:1fr
}

.about-grid {
  gap:45px
}

.portrait {
  max-width:520px
}

.contact-box {
  padding:55px 35px
}

}

@media(max-width:600px) {
  .shell {
  width:min(100% - 28px,1180px)
}

.hero {
  padding-top:120px
}

.hero-text {
  font-size:17px
}

.actions {
  align-items:flex-start;
  flex-direction:column
}

.hero-stage {
  height:400px
}

.orb.one {
  width:290px;
  height:290px
}

.impact-panel {
  left:35px;
  top:110px;
  width:235px;
  height:230px
}

.impact-panel strong {
  font-size:64px
}

.stage-card {
  padding:12px
}

.strategy {
  right:0
}

.system {
  left:0
}

.outcome-grid {
  grid-template-columns:1fr 1fr
}

.outcome {
  padding:30px 17px
}

.outcome strong,.outcome>span {
  font-size:34px
}

.section {
  padding:80px 0
}

.project-copy {
  padding:35px 25px
}

.project-copy h3 {
  font-size:31px
}

.card-art {
  height:300px
}

.card-copy {
  padding:30px 24px
}

.process {
  grid-template-columns:1fr
}

.cap {
  padding:35px 25px
}

.about-facts {
  grid-template-columns:1fr
}

.about-facts span:nth-child(odd) {
  border-right:0;
  padding-right:0
}

.about-facts span:nth-child(even) {
  padding-left:0
}

.portrait {
  height:420px
}

.portrait-inner span {
  font-size:80px
}

.contact-box {
  padding:45px 24px
}

.quote-slider blockquote>p {
  font-size:29px
}

.footer .shell>div:nth-child(2) {
  flex-wrap:wrap
}

.browser {
  width:92%
}

.screen {
  height:245px
}

.result-chip {
  right:2%;
  bottom:7%
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

.stage-card,.scan-line {
  animation:none
}

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

}

/* v3: editorial NZ-market homepage, stacked projects */
:root {
  --purple:#4c1f63;
  --purple-deep:#32133f;
  --purple-soft:#f4eff7;
  --ink:#151217;
  --muted:#635d66;
  --soft:#f6f5f3;
  --line:#ddd9df;
  --white:#fff;
  --radius:24px
}

.image-frame {
  overflow:hidden;
  background:#ece9ee;
  position:relative
}

.image-frame img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .65s cubic-bezier(.2,.7,.2,1)
}

.primary,.light-button {
  background:var(--purple)!important;
  color:#fff
}

.case-link span,.eyebrow,.outcome strong,.outcome>span {
  color:var(--purple)
}

.snapshot-card {
  background:var(--purple-deep);
  color:#fff;
  border-radius:var(--radius);
  padding:52px;
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:50px;
  align-items:center
}

.snapshot-card .eyebrow {
  color:#d7bfdc
}

.snapshot-card h2 {
  font-size:clamp(34px,4vw,56px);
  margin:10px 0 0;
  line-height:1.04
}

.snapshot-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid #6a4d73;
  border-left:1px solid #6a4d73
}

.snapshot-grid span {
  padding:25px;
  border-right:1px solid #6a4d73;
  border-bottom:1px solid #6a4d73;
  color:#ddd2e1;
  font-size:13px
}

.snapshot-grid b {
  display:block;
  color:#fff;
  font-size:18px;
  margin-bottom:6px
}

.compact {
  padding-top:55px;
  padding-bottom:55px
}

.project-stack {
  position:relative;
  margin-top:40px
}

.stack-card {
  position:sticky;
  top:98px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  min-height:570px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 22px 70px rgba(32,19,38,.11);
  margin-bottom:82px;
  transform-origin:center top
}

.stack-card:nth-child(2) {
  top:114px
}

.stack-card:nth-child(3) {
  top:130px
}

.stack-card:nth-child(4) {
  top:146px
}

.stack-card:nth-child(5) {
  top:162px
}

.stack-media {
  min-height:570px
}

.stack-content {
  padding:64px;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.stack-meta {
  display:flex;
  gap:18px;
  align-items:center;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  color:var(--muted)
}

.stack-meta span {
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--purple)
}

.stack-meta p {
  margin:0
}

.stack-content h3 {
  font-size:clamp(34px,4vw,56px);
  line-height:1.05;
  letter-spacing:-.04em;
  margin:24px 0 18px
}

.stack-content>p {
  font-size:17px;
  line-height:1.65;
  color:var(--muted)
}

.stack-card:hover .stack-media img {
  transform:scale(1.025)
}

.diamond-wrap {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:50px;
  position:relative
}

.diamond-wrap:before {
  content:"";
  position:absolute;
  top:35px;
  left:9%;
  right:9%;
  height:1px;
  background:var(--line)
}

.diamond-phase {
  position:relative;
  padding:72px 30px 34px;
  border:1px solid var(--line);
  border-left:0;
  background:#fff
}

.diamond-phase:first-child {
  border-left:1px solid var(--line);
  border-radius:20px 0 0 20px
}

.diamond-phase:last-child {
  border-radius:0 20px 20px 0
}

.diamond-phase:before {
  content:"";
  position:absolute;
  top:23px;
  left:30px;
  width:24px;
  height:24px;
  background:var(--purple);
  transform:rotate(45deg);
  box-shadow:0 0 0 9px var(--purple-soft)
}

.diamond-phase span {
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:11px;
  color:var(--purple);
  font-weight:700
}

.diamond-phase h3 {
  font-size:23px;
  line-height:1.2;
  margin:16px 0 10px
}

.diamond-phase p {
  font-size:14px;
  color:var(--muted);
  line-height:1.6
}

.process-note {
  margin-top:22px;
  color:var(--muted);
  font-size:14px
}

.process-note b {
  color:var(--ink)
}

.portrait {
  height:520px;
  background:var(--purple-deep);
  border-radius:180px 180px 20px 20px;
  padding:22px
}

.portrait-inner {
  overflow:hidden;
  position:relative
}

.portrait-inner img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  border-radius:145px 145px 8px 8px
}

.portrait-inner span {
  font-size:110px;
  font-weight:800;
  color:#ddd2e1
}

.portrait-inner p {
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  margin:0;
  padding:14px;
  background:rgba(30,16,35,.76);
  backdrop-filter:blur(8px);
  border-radius:10px;
  color:#fff;
  font-size:13px
}

.brands {
  background:#fff
}

.logo-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:24px;
  align-items:center;
  margin-top:30px
}

.logo-grid img {
  max-width:125px;
  max-height:42px;
  width:100%;
  object-fit:contain;
  justify-self:center;
  filter:grayscale(1);
  opacity:.72;
  transition:.25s
}

.logo-grid img:hover {
  filter:none;
  opacity:1;
  transform:translateY(-3px)
}

@media(max-width:900px) {
  .snapshot-card {
  grid-template-columns:1fr
}

.stack-card {
  position:relative!important;
  top:auto!important;
  grid-template-columns:1fr;
  min-height:0;
  margin-bottom:28px
}

.stack-media {
  min-height:420px
}

.stack-content {
  padding:42px
}

.diamond-wrap {
  grid-template-columns:1fr 1fr
}

.diamond-wrap:before {
  display:none
}

.diamond-phase,.diamond-phase:first-child,.diamond-phase:last-child {
  border:1px solid var(--line);
  border-radius:0
}

.diamond-phase:first-child {
  border-radius:18px 0 0 0
}

.diamond-phase:nth-child(2) {
  border-radius:0 18px 0 0
}

.diamond-phase:nth-child(3) {
  border-radius:0 0 0 18px
}

.diamond-phase:last-child {
  border-radius:0 0 18px 0
}

.logo-grid {
  grid-template-columns:repeat(4,1fr)
}

}

@media(max-width:600px) {
  .snapshot-card {
  padding:34px 24px
}

.snapshot-grid {
  grid-template-columns:1fr
}

.stack-media {
  min-height:280px
}

.stack-content {
  padding:30px 24px
}

.stack-content h3 {
  font-size:34px
}

.diamond-wrap {
  grid-template-columns:1fr
}

.diamond-phase,.diamond-phase:first-child,.diamond-phase:nth-child(2),.diamond-phase:nth-child(3),.diamond-phase:last-child {
  border-radius:0
}

.diamond-phase:first-child {
  border-radius:18px 18px 0 0
}

.diamond-phase:last-child {
  border-radius:0 0 18px 18px
}

.logo-grid {
  grid-template-columns:repeat(2,1fr)
}

}

/* v4 accessibility and project-card refinement */
.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}

:focus-visible {
  outline:3px solid #8b5da0;
  outline-offset:4px
}

.outcomes {
  background:#18121d;
  color:#fff
}

.outcome-grid {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr)
}

.outcome {
  min-width:0;
  padding:42px 28px;
  border-left:1px solid #514655;
  background:#18121d
}

.outcome:last-child {
  border-right:1px solid #514655
}

.outcome>div {
  display:flex;
  align-items:baseline;
  gap:2px
}

.outcome strong,.outcome>div>span {
  font-size:46px;
  line-height:1;
  color:#fff;
  font-weight:800
}

.outcome p {
  font-size:14px;
  line-height:1.5;
  color:#ded6e0;
  margin:12px 0 0;
  max-width:190px
}

/* Keep the sticky stack, with the cleaner visual style from the first concept. */
.project-stack {
  isolation:isolate
}

.stack-card {
  background:#f7f4f8;
  border:1px solid #ded6e2;
  box-shadow:0 24px 70px rgba(45,22,54,.13);
  transition:box-shadow .35s ease,border-color .35s ease
}

.stack-card:focus-within,.stack-card:hover {
  border-color:#c8b7cf;
  box-shadow:0 30px 85px rgba(45,22,54,.18)
}

.stack-media {
  padding:42px;
  background:linear-gradient(145deg,#4c1f63 0%,#6c3a7d 100%);
  display:grid;
  place-items:center;
  position:relative
}

.stack-media:before {
  content:"";
  position:absolute;
  width:68%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  filter:blur(2px);
  transform:translate(-18%,-12%)
}

.stack-media:after {
  content:"";
  position:absolute;
  inset:22px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  pointer-events:none
}

.stack-media img {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  max-height:485px;
  object-fit:contain;
  border-radius:14px;
  filter:drop-shadow(0 24px 30px rgba(19,8,23,.30));
  transform:translateY(0) scale(1);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease
}

.stack-card:nth-child(even) .stack-media {
  background:linear-gradient(145deg,#e9e1ee 0%,#f6f2f8 100%)
}

.stack-card:nth-child(even) .stack-media:after {
  border-color:rgba(76,31,99,.13)
}

.stack-card:nth-child(even) .stack-media:before {
  background:rgba(76,31,99,.08)
}

.stack-card:hover .stack-media img,.stack-card:focus-within .stack-media img {
  transform:translateY(-10px) scale(1.025);
  filter:drop-shadow(0 34px 38px rgba(19,8,23,.36))
}

.stack-content {
  background:#fff
}

.case-link {
  border-radius:4px
}

.case-link:hover span,.case-link:focus-visible span {
  transform:translate(3px,-3px)
}

.case-link span {
  transition:transform .2s ease
}

@media(max-width:900px) {
  .outcome-grid {
  grid-template-columns:1fr 1fr
}

.outcome:nth-child(2) {
  border-right:1px solid #514655
}

.outcome:nth-child(n+3) {
  border-top:1px solid #514655
}

.stack-media {
  padding:30px;
  min-height:410px
}

.stack-media img {
  max-height:350px
}

}

@media(max-width:600px) {
  .outcome-grid {
  grid-template-columns:1fr
}

.outcome,.outcome:last-child,.outcome:nth-child(2) {
  border-left:1px solid #514655;
  border-right:1px solid #514655;
  border-top:1px solid #514655
}

.outcome:first-child {
  border-top:0
}

.outcome {
  padding:28px 22px
}

.outcome strong,.outcome>div>span {
  font-size:38px
}

.stack-media {
  padding:22px;
  min-height:280px
}

.stack-media:after {
  inset:12px
}

.stack-media img {
  max-height:240px
}

}

@media(prefers-reduced-motion:reduce) {
  .stack-media img,.case-link span,.stack-card {
  transition:none!important
}

.stack-card:hover .stack-media img,.stack-card:focus-within .stack-media img {
  transform:none
}

}

/* v5 — lighter, shorter editorial project stack */
.project-stack {
  margin-top:32px
}

.stack-card {
  top:92px;
  grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);
  min-height:0;
  height:clamp(500px,66vh,570px);
  margin-bottom:42px;
  border-radius:24px;
  border-color:rgba(32,19,38,.08);
  box-shadow:0 4px 12px rgba(32,19,38,.035),0 14px 34px rgba(32,19,38,.05);
  transition:box-shadow .3s ease,border-color .3s ease,transform .3s ease;
}

.stack-card:nth-child(2) {
  top:104px
}

.stack-card:nth-child(3) {
  top:116px
}

.stack-card:nth-child(4) {
  top:128px
}

.stack-card:nth-child(5) {
  top:140px
}

.stack-card:hover,.stack-card:focus-within {
  border-color:rgba(76,31,99,.16);
  box-shadow:0 6px 16px rgba(32,19,38,.045),0 18px 42px rgba(32,19,38,.07);
}

.stack-media {
  min-height:0;
  height:100%;
  padding:30px
}

.stack-media:after {
  inset:16px;
  border-radius:18px
}

.stack-media img {
  max-height:390px;
  filter:drop-shadow(0 12px 18px rgba(19,8,23,.18));
  transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .55s ease;
}

.stack-card:hover .stack-media img,.stack-card:focus-within .stack-media img {
  transform:translateY(-4px) scale(1.015);
  filter:drop-shadow(0 16px 22px rgba(19,8,23,.22));
}

.stack-content {
  padding:38px 42px
}

.stack-meta {
  gap:13px
}

.stack-meta span {
  width:34px;
  height:34px
}

.stack-content h3 {
  font-size:clamp(32px,3.25vw,46px);
  margin:18px 0 13px
}

.stack-content>p {
  font-size:15.5px;
  line-height:1.55;
  margin:0
}

.stack-content .project-results {
  margin:20px 0 14px;
  padding:15px 0
}

.stack-content .project-results b {
  font-size:23px
}

.stack-content .pills {
  margin:15px 0 0
}

.stack-content .case-link {
  margin-top:19px;
  padding-top:15px
}

@media(max-width:1100px) and (min-width:901px) {
  .stack-card {
  height:540px;
  grid-template-columns:.92fr 1.08fr
}

.stack-content {
  padding:32px 34px
}

.stack-content h3 {
  font-size:36px
}

.stack-media {
  padding:24px
}

.stack-media img {
  max-height:350px
}

}

@media(max-width:900px) {
  .stack-card {
  height:auto;
  margin-bottom:24px;
  border-radius:22px
}

.stack-media {
  height:auto;
  min-height:350px;
  padding:26px
}

.stack-content {
  padding:34px
}

}

@media(max-width:600px) {
  .stack-media {
  min-height:240px;
  padding:18px
}

.stack-media img {
  max-height:215px
}

.stack-content {
  padding:27px 22px
}

.stack-content h3 {
  font-size:31px;
  margin-top:16px
}

.stack-content>p {
  font-size:15px
}

}

/* v6 — seamless full-bleed media and overlap-aware stacking */
.stack-card {
  box-shadow:0 3px 10px rgba(32,19,38,.025),0 10px 26px rgba(32,19,38,.04);
}

.stack-card:hover,.stack-card:focus-within {
  box-shadow:0 4px 12px rgba(32,19,38,.03),0 12px 30px rgba(32,19,38,.05);
}

.stack-card.is-covered,
.stack-card.is-covered:hover,
.stack-card.is-covered:focus-within {
  box-shadow:none;
  border-color:rgba(32,19,38,.07);
}

.stack-media,
.stack-card:nth-child(even) .stack-media {
  padding:0;
  overflow:hidden;
  background:#e9e5ed;
  isolation:isolate;
}

.stack-media:before,
.stack-media:after {
  display:none
}

.stack-media img {
  position:absolute;
  inset:-2%;
  z-index:0;
  width:104%;
  height:104%;
  max-height:none;
  border-radius:0;
  object-fit:cover;
  object-position:center;
  filter:none;
  transform:translate3d(0,var(--media-shift,0px),0) scale(1.025);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .45s ease;
}

.stack-card:hover .stack-media img,
.stack-card:focus-within .stack-media img {
  transform:translate3d(0,calc(var(--media-shift,0px) - 3px),0) scale(1.045);
  filter:saturate(1.03) contrast(1.015);
}

.media-chrome {
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  top:18px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:9px;
  background:rgba(20,15,24,.28);
  color:#fff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  pointer-events:none;
}

.media-dots {
  display:flex;
  gap:6px
}

.media-dots i {
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.78)
}

.media-label {
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.28)
}

.media-sheen {
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 49%,transparent 63%);
  transform:translateX(-120%);
  transition:transform .95s cubic-bezier(.2,.7,.2,1);
}

.stack-card:hover .media-sheen,
.stack-card:focus-within .media-sheen {
  transform:translateX(120%)
}

.media-status {
  position:absolute;
  z-index:2;
  left:18px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:8px;
  background:rgba(255,255,255,.88);
  color:#2d2630;
  box-shadow:0 4px 14px rgba(18,10,22,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
}

.media-status:before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#4d1688;
  box-shadow:0 0 0 4px rgba(77,22,136,.12)
}

.stack-card.is-covered .media-chrome,
.stack-card.is-covered .media-status {
  opacity:.72
}

@media(max-width:900px) {
  .stack-media img {
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  min-height:350px;
  object-fit:cover;
  transform:scale(1.02)
}

.stack-card:hover .stack-media img,.stack-card:focus-within .stack-media img {
  transform:scale(1.035)
}

}

@media(max-width:600px) {
  .stack-media img {
  min-height:240px
}

.media-chrome {
  left:12px;
  right:12px;
  top:12px
}

.media-status {
  left:12px;
  bottom:12px
}

}

@media(prefers-reduced-motion:reduce) {
  .stack-media img,.media-sheen {
  transition:none!important;
  transform:none!important
}

}

/* v7 — recruiter-scannable interaction and restrained editorial motion */
.scroll-progress {
  position:fixed;
  inset:0 0 auto 0;
  height:3px;
  z-index:1200;
  pointer-events:none;
  background:transparent
}

.scroll-progress span {
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:#5b2485;
  will-change:transform
}

.section-rail {
  position:fixed;
  z-index:90;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  gap:13px;
  padding:12px 8px;
  border:1px solid rgba(33,22,39,.08);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:0 6px 22px rgba(31,18,38,.045);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)
}

.section-rail a {
  position:relative;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c8bfcd;
  transition:transform .2s ease,background .2s ease
}

.section-rail a span {
  position:absolute;
  right:20px;
  top:50%;
  transform:translate(6px,-50%);
  padding:5px 8px;
  border-radius:6px;
  background:#261b2b;
  color:#fff;
  font-size:10px;
  font-weight:750;
  letter-spacing:.04em;
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
  white-space:nowrap
}

.section-rail a:hover span,.section-rail a:focus-visible span {
  opacity:1;
  transform:translate(0,-50%)
}

.section-rail a.active {
  background:#5b2485;
  transform:scale(1.45)
}

.stage-grid {
  position:absolute;
  inset:0;
  opacity:.26;
  background-image:linear-gradient(rgba(87,38,113,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(87,38,113,.11) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);
  animation:gridDrift 18s linear infinite
}

@keyframes gridDrift {
  to {
  background-position:34px 34px
}

}

.hero-stage {
  --mx:0px;
  --my:0px
}

.hero-stage .stage-card {
  transform:translate3d(var(--mx),var(--my),0);
  transition:transform .35s ease,box-shadow .35s ease
}

.hero-stage .strategy {
  transform:translate3d(calc(var(--mx) * -.55),calc(var(--my) * -.55),0)
}

.hero-stage .system {
  transform:translate3d(calc(var(--mx) * .35),calc(var(--my) * .35),0)
}

.hero-stage .impact-panel {
  transform:translate3d(calc(var(--mx) * -.25),calc(var(--my) * .2),0);
  transition:transform .35s ease
}

.evidence-strip {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:14px 0 2px;
  padding:10px 0;
  border-top:1px solid rgba(39,25,46,.08);
  border-bottom:1px solid rgba(39,25,46,.08)
}

.evidence-strip span {
  font-size:11.5px;
  line-height:1.35;
  color:#665d69
}

.evidence-strip b {
  display:block;
  margin-bottom:2px;
  color:#2d2630;
  font-size:9px;
  letter-spacing:.11em;
  text-transform:uppercase
}

.stack-card.is-current {
  border-color:rgba(91,36,133,.2)
}

.stack-card.is-current .media-status {
  transform:translateY(-2px)
}

.media-status {
  transition:transform .3s ease,opacity .3s ease
}

.stack-content {
  position:relative
}

.stack-content:after {
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:3px;
  height:0;
  background:#5b2485;
  transition:height .65s cubic-bezier(.2,.7,.2,1)
}

.stack-card.is-current .stack-content:after {
  height:100%
}

.process-progress {
  position:relative;
  height:2px;
  margin:34px 0 24px;
  background:rgba(74,40,91,.12);
  overflow:visible
}

.process-progress span {
  display:block;
  height:100%;
  width:var(--process,0%);
  background:#5b2485;
  transition:width .15s linear
}

.process-progress i {
  position:absolute;
  left:var(--process,0%);
  top:50%;
  width:12px;
  height:12px;
  border:3px solid #fff;
  border-radius:50%;
  background:#5b2485;
  box-shadow:0 0 0 1px rgba(91,36,133,.18);
  transform:translate(-50%,-50%);
  transition:left .15s linear
}

.diamond-phase {
  position:relative;
  transition:transform .3s ease,border-color .3s ease,background .3s ease
}

.diamond-phase:before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:#5b2485;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease
}

.diamond-phase:hover,.diamond-phase:focus-within {
  transform:translateY(-4px);
  border-color:rgba(91,36,133,.16);
  background:#fff
}

.diamond-phase:hover:before,.diamond-phase:focus-within:before {
  transform:scaleX(1)
}

.capabilities .cap {
  position:relative;
  overflow:hidden;
  isolation:isolate
}

.capabilities .cap > * {
  position:relative;
  z-index:1
}

.capabilities .cap::after {
  content:"";
  position:absolute;
  right:-18%;
  bottom:-64px;
  width:62%;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.09),transparent 68%);
  transform:translateY(25px);
  transition:transform .45s ease;
  z-index:0;
  pointer-events:none
}

.capabilities .cap:hover::after {
  transform:translateY(0)
}

.logo-grid img {
  transition:filter .25s ease,opacity .25s ease,transform .25s ease
}

.logo-grid:hover img {
  opacity:.48;
  filter:grayscale(1)
}

.logo-grid img:hover {
  opacity:1;
  filter:grayscale(0);
  transform:translateY(-3px)
}

@media(max-width:1180px) {
  .section-rail {
  display:none
}

}

@media(max-width:900px) {
  .evidence-strip {
  grid-template-columns:1fr 1fr
}

.stack-content:after {
  display:none
}

}

@media(max-width:600px) {
  .evidence-strip {
  grid-template-columns:1fr
}

.scroll-progress {
  height:2px
}

}

@media(prefers-reduced-motion:reduce) {
  .stage-grid {
  animation:none
}

.hero-stage .stage-card,.hero-stage .impact-panel,.diamond-phase,.logo-grid img {
  transition:none!important
}

.diamond-phase:hover {
  transform:none
}

.process-progress span,.process-progress i {
  transition:none
}

}

/* v8 refinements */
.scroll-progress {
  display:none!important
}

.snapshot-card,.snapshot-card * {
  animation:none!important;
  transition:none!important
}

.project-stack-wrap {
  position:relative
}

.project-stack-progress {
  position:absolute;
  left:-22px;
  top:10px;
  bottom:10px;
  width:3px;
  background:rgba(77,22,136,.12);
  border-radius:999px;
  overflow:hidden
}

.project-stack-progress span {
  display:block;
  width:100%;
  height:var(--project-progress,0%);
  background:var(--purple);
  border-radius:999px;
  transition:height .15s linear
}

.diamond-phase {
  overflow:hidden;
  isolation:isolate;
  transition:border-color .25s ease,background-color .25s ease
}

.diamond-phase:after {
  content:"";
  position:absolute;
  inset:auto -25% -60% -25%;
  height:70%;
  background:linear-gradient(180deg,transparent,rgba(77,22,136,.08));
  transform:translateY(55%);
  transition:transform .35s ease;
  z-index:-1
}

.diamond-phase:hover,.diamond-phase:focus-within {
  transform:none;
  border-color:rgba(77,22,136,.3);
  background:#fdfbff
}

.diamond-phase:hover:after,.diamond-phase:focus-within:after {
  transform:translateY(0)
}

.portrait-inner img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  border-radius:inherit;
  display:block
}

.portrait-inner {
  overflow:hidden;
  position:relative
}

.portrait-inner p {
  position:absolute;
  left:22px;
  right:22px;
  bottom:22px;
  margin:0;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(24,18,29,.78);
  backdrop-filter:blur(10px);
  font-size:13px
}

@media(max-width:1220px) {
  .project-stack-progress {
  left:-10px
}

}

@media(max-width:900px) {
  .project-stack-progress {
  display:none
}

}

@media(prefers-reduced-motion:reduce) {
  .project-stack-progress span {
  transition:none
}

.diamond-phase:after {
  transition:none
}

}

/* v9 — balanced project imagery, complete capabilities and experience */
.project-stack-progress {
  display:none!important
}

.stack-card {
  grid-template-columns:58% 42%
}

.stack-media,.stack-card:nth-child(even) .stack-media {
  display:grid;
  place-items:center;
  padding:32px;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.82),transparent 26%),
    linear-gradient(145deg,#eee9f3 0%,#e2d8eb 48%,#d9cfdf 100%);
}

.stack-card:nth-child(2) .stack-media {
  background:linear-gradient(145deg,#eaf2ed,#d9e8de)
}

.stack-card:nth-child(3) .stack-media {
  background:linear-gradient(145deg,#23202a,#3a3043)
}

.stack-card:nth-child(4) .stack-media {
  background:linear-gradient(145deg,#f0ebf7,#ded3ec)
}

.stack-card:nth-child(5) .stack-media {
  background:linear-gradient(145deg,#eef1f3,#dce3e7)
}

.stack-media img {
  position:relative;
  inset:auto;
  width:70%;
  height:auto;
  max-height:78%;
  object-fit:contain;
  border-radius:14px;
  filter:drop-shadow(0 16px 26px rgba(27,18,33,.12));
  transform:translate3d(0,var(--media-shift,0px),0) rotate(-1deg) scale(1);
  animation:projectFloat 6.5s ease-in-out infinite;
}

.stack-card:nth-child(even) .stack-media img {
  animation-delay:-2.2s;
  transform:translate3d(0,var(--media-shift,0px),0) rotate(1deg)
}

.stack-card:hover .stack-media img,.stack-card:focus-within .stack-media img {
  transform:translate3d(0,calc(var(--media-shift,0px) - 4px),0) rotate(0) scale(1.025);
  filter:drop-shadow(0 20px 30px rgba(27,18,33,.14))
}

.stack-media:after {
  display:block;
  content:"";
  position:absolute;
  width:54%;
  height:54%;
  border:1px solid rgba(77,22,136,.13);
  border-radius:26px;
  transform:rotate(7deg);
  z-index:-1;
  animation:frameDrift 8s ease-in-out infinite
}

.stack-card:nth-child(3) .stack-media:after {
  border-color:rgba(255,255,255,.16)
}

@keyframes projectFloat {
  0%,100% {
  translate:0 0
}

50% {
  translate:0 -8px
}

}

@keyframes frameDrift {
  0%,100% {
  transform:rotate(7deg) scale(1)
}

50% {
  transform:rotate(4deg) scale(1.035)
}

}

.media-chrome {
  left:22px;
  right:22px;
  top:22px;
  background:rgba(255,255,255,.68);
  color:#34283a;
  border-color:rgba(255,255,255,.65)
}

.stack-card:nth-child(3) .media-chrome {
  background:rgba(24,18,29,.48);
  color:#fff
}

.media-dots i {
  background:currentColor;
  opacity:.5
}

.media-status {
  left:22px;
  bottom:22px
}

.cap-grid {
  grid-template-columns:repeat(3,1fr)
}

.cap {
  min-height:335px
}

.experience {
  background:#fff
}

.experience-list {
  border-top:1px solid var(--line)
}

.experience-row {
  position:relative;
  display:grid;
  grid-template-columns:190px 1fr 56px;
  gap:44px;
  padding:42px 0;
  border-bottom:1px solid var(--line);
  align-items:start
}

.experience-date {
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--purple);
  padding-top:7px
}

.experience-company {
  margin:0 0 5px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted)
}

.experience-main h3 {
  margin:0 0 12px;
  font-size:30px;
  letter-spacing:-.025em
}

.experience-main>p:not(.experience-company) {
  max-width:780px;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.65
}

.experience-main ul {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0 0;
  padding:0;
  list-style:none
}

.experience-main li {
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:11px;
  background:var(--soft)
}

.experience-index {
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--purple);
  font-size:11px;
  font-weight:800
}

@media(max-width:1000px) {
  .cap-grid {
  grid-template-columns:1fr 1fr
}

.experience-row {
  grid-template-columns:150px 1fr 44px;
  gap:26px
}

.stack-card {
  grid-template-columns:54% 46%
}

.stack-media img {
  width:78%
}

}

@media(max-width:900px) {
  .stack-card {
  grid-template-columns:1fr
}

.stack-media {
  min-height:360px
}

.stack-media img {
  width:min(70%,560px);
  max-height:290px
}

.experience-row {
  grid-template-columns:1fr
}

.experience-index {
  position:absolute;
  right:0;
  top:34px
}

}

@media(max-width:650px) {
  .cap-grid {
  grid-template-columns:1fr
}

.experience-row {
  padding:34px 0
}

.experience-main h3 {
  font-size:25px
}

.stack-media {
  padding:22px;
  min-height:285px
}

.stack-media img {
  width:78%;
  max-height:220px
}

.media-chrome {
  left:14px;
  right:14px;
  top:14px
}

.media-status {
  left:14px;
  bottom:14px
}

}

@media(prefers-reduced-motion:reduce) {
  .stack-media img,.stack-media:after {
  animation:none!important
}

}

/* v10 — larger project imagery, refined portrait, carousel and footer */
.stack-media img {
  width:80%;
  max-width:80%;
}

@media(max-width:1000px) {
  .stack-media img {
  width:80%;
  max-width:80%
}

}

@media(max-width:900px) {
  .stack-media img {
  width:min(80%,620px);
  max-width:80%
}

}

@media(max-width:650px) {
  .stack-media img {
  width:84%;
  max-width:84%
}

}

.experience-download {
  margin-top:38px;
  padding:28px 30px;
  border:1px solid rgba(42,29,48,.1);
  border-radius:20px;
  background:#f7f4f8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.experience-download .eyebrow {
  margin-bottom:8px
}

.experience-download h3 {
  margin:0;
  font-size:clamp(20px,2.2vw,28px);
  letter-spacing:-.025em
}

.resume-button {
  flex:0 0 auto
}

.portrait {
  padding:0;
  background:transparent;
  border-radius:28px;
  height:520px;
  overflow:visible
}

.portrait-inner {
  height:100%;
  border-radius:28px;
  overflow:hidden;
  background:#eae4ee;
  box-shadow:none
}

.portrait-inner img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 18%;
  border-radius:0;
  transform:scale(1.01)
}

.portrait-inner p {
  left:20px;
  right:auto;
  bottom:20px;
  max-width:260px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 26px rgba(20,14,24,.12)
}

.quote-slider {
  position:relative;
  overflow:hidden
}

.quote-slider blockquote {
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);
  transform:translateX(18px)
}

.quote-slider blockquote.active {
  transform:translateX(0)
}

.quote-controls i {
  transition:transform .3s ease,background .3s ease
}

.quote-controls i.active {
  transform:scaleX(1.7)
}

.quote-slider.is-paused:after {
  content:"Paused";
  position:absolute;
  right:18px;
  top:18px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(45,32,50,.08);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5e5362
}

.footer .shell {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:40px
}

.footer-brand {
  display:flex;
  align-items:flex-start;
  gap:16px
}

.footer-brand p {
  margin:0
}

.footer-right {
  display:grid;
  justify-items:end;
  gap:18px
}

.footer-menu {
  display:flex;
  align-items:center;
  gap:24px
}

.footer-copy {
  margin:0;
  color:var(--muted);
  font-size:13px
}

@media(max-width:760px) {
  .experience-download {
  align-items:flex-start;
  flex-direction:column
}

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

.portrait {
  height:450px
}

.portrait-inner img {
  object-position:50% 15%
}

.footer .shell {
  grid-template-columns:1fr;
  align-items:start
}

.footer-right {
  justify-items:start
}

.footer-menu {
  flex-wrap:wrap;
  gap:16px 22px
}

}

@media(prefers-reduced-motion:reduce) {
  .quote-slider blockquote,.quote-controls i {
  transition:none!important
}

}

/* v11 — NZ recruiter-led hero and simplified content */
.hero {
  min-height:720px;
  background:linear-gradient(135deg,#fff 18%,#f5f0f7 100%)
}

.hero:after {
  width:24%;
  height:5px
}

.hero-profile {
  height:540px;
  position:relative;
  display:grid;
  place-items:center
}

.hero-profile-card {
  width:min(390px,86%);
  background:#fff;
  border:1px solid rgba(45,28,53,.09);
  border-radius:28px;
  padding:18px;
  box-shadow:0 14px 40px rgba(34,20,41,.08);
  position:relative;
  z-index:2
}

.hero-profile-card img {
  width:100%;
  height:330px;
  object-fit:cover;
  object-position:50% 16%;
  border-radius:20px;
  display:block
}

.hero-profile-card div {
  padding:18px 8px 8px
}

.hero-profile-card p {
  margin:0 0 5px;
  color:var(--purple);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em
}

.hero-profile-card strong {
  display:block;
  font-size:22px;
  line-height:1.2
}

.hero-profile-card span {
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:13px
}

.hero-proof {
  position:absolute;
  background:#fff;
  border:1px solid rgba(45,28,53,.09);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 8px 24px rgba(34,20,41,.06);
  width:205px;
  z-index:3
}

.hero-proof small {
  display:block;
  color:var(--purple);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:800
}

.hero-proof b {
  display:block;
  margin:4px 0 2px;
  font-size:15px
}

.hero-proof span {
  font-size:11px;
  color:var(--muted);
  line-height:1.35;
  display:block
}

.proof-one {
  left:-6px;
  top:48px
}

.proof-two {
  right:-14px;
  top:205px
}

.proof-three {
  left:4px;
  bottom:30px
}

.snapshot-card {
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:none
}

.snapshot-card .eyebrow {
  color:var(--purple)
}

.snapshot-grid {
  border-color:var(--line)
}

.snapshot-grid span {
  border-color:var(--line);
  color:var(--muted)
}

.snapshot-grid b {
  color:var(--ink)
}

.cap>span.cap-accent {
  display:inline-flex;
  width:auto;
  height:auto;
  border-radius:999px;
  padding:6px 10px;
  background:var(--lime);
  color:var(--ink);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800
}

.experience-row {
  grid-template-columns:190px 1fr
}

.experience-index {
  display:none
}

.quote-slider blockquote {
  transition:opacity .38s ease,transform .38s ease;
  transform:translateX(8px)
}

.quote-controls i.active {
  transform:scaleX(1.25)
}

.quote-slider.is-paused:after {
  display:none
}

@media(max-width:900px) {
  .hero-profile {
  height:520px;
  max-width:620px;
  margin:auto
}

.experience-row {
  grid-template-columns:1fr
}

.hero-proof {
  width:190px
}

}

@media(max-width:600px) {
  .hero-profile {
  height:485px
}

.hero-profile-card {
  width:82%
}

.hero-profile-card img {
  height:290px
}

.hero-proof {
  width:165px;
  padding:10px 12px
}

.proof-one {
  left:0;
  top:25px
}

.proof-two {
  right:0;
  top:190px
}

.proof-three {
  left:4px;
  bottom:5px
}

.hero-proof span {
  display:none
}

}

/* Final v11 recruiter-focused hero refinements */
.hero {
  overflow:hidden;
  background:linear-gradient(135deg,#fff 22%,#f7f0fb 100%)
}

.hero:after {
  display:none
}

.hero-checks {
  position:absolute;
  inset:-10% -5%;
  pointer-events:none;
  opacity:.34;
  background-image:linear-gradient(rgba(77,22,136,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(77,22,136,.08) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse at 72% 45%,#000 0%,rgba(0,0,0,.72) 32%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 72% 45%,#000 0%,rgba(0,0,0,.72) 32%,transparent 72%);
  animation:checkDrift 18s ease-in-out infinite alternate
}

.hero-copy,.hero-stage {
  position:relative;
  z-index:2
}

.accent-word {
  position:relative;
  display:inline-block;
  isolation:isolate
}

.accent-word:after {
  content:"";
  position:absolute;
  left:50%;
  bottom:.06em;
  width:52%;
  height:7px;
  background:#d9ff55;
  opacity:.9;
  z-index:-1;
  border-radius:999px;
  transform:translateX(-50%) rotate(-1deg);
  pointer-events:none
}

.hero-flow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:18px 0 0;
  font-size:14px;
  font-weight:800;
  color:var(--ink)
}

.hero-flow:before {
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#d9ff55;
  box-shadow:0 0 0 5px rgba(217,255,85,.2)
}

.primary span {
  transition:color .2s ease,transform .2s ease
}

.primary:hover span {
  color:#d9ff55;
  transform:translate(2px,2px)
}

.hero-workflow {
  height:540px;
  display:grid;
  place-items:center
}

.workflow-board {
  position:relative;
  width:min(100%,500px);
  height:455px;
  border:1px solid rgba(77,22,136,.12);
  border-radius:28px;
  background:rgba(255,255,255,.82);
  box-shadow:0 24px 70px rgba(55,25,72,.1);
  backdrop-filter:blur(10px);
  transform:rotate(1deg)
}

.workflow-head {
  height:52px;
  border-bottom:1px solid rgba(77,22,136,.1);
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 18px;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em
}

.workflow-head span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d8cedd
}

.workflow-head b {
  margin-left:8px
}

.workflow-line {
  position:absolute;
  left:78px;
  top:104px;
  bottom:72px;
  width:2px;
  background:linear-gradient(var(--purple),#d9ff55);
  opacity:.55
}

.workflow-card {
  position:absolute;
  left:54px;
  width:320px;
  min-height:76px;
  padding:14px 18px 13px 54px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(77,22,136,.11);
  box-shadow:0 10px 30px rgba(55,25,72,.07);
  animation:workflowFloat 6s ease-in-out infinite
}

.workflow-card:before {
  content:"";
  position:absolute;
  left:17px;
  top:21px;
  width:20px;
  height:20px;
  border-radius:7px;
  background:var(--lav)
}

.workflow-card small {
  display:block;
  color:var(--purple);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800
}

.workflow-card strong {
  display:block;
  font-size:15px;
  margin-top:2px
}

.workflow-card p {
  margin:2px 0 0;
  color:var(--muted);
  font-size:11px
}

.workflow-card i {
  position:absolute;
  left:16px;
  top:20px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--purple);
  z-index:2
}

.insight-card {
  top:78px
}

.direction-card {
  top:166px;
  left:92px;
  animation-delay:-1.3s
}

.design-card {
  top:254px;
  animation-delay:-2.7s
}

.delivery-card {
  top:342px;
  left:92px;
  animation-delay:-4s
}

.delivery-card i {
  background:#d9ff55;
  box-shadow:0 0 0 5px rgba(217,255,85,.2)
}

.workflow-note {
  position:absolute;
  padding:8px 11px;
  border-radius:99px;
  font-size:10px;
  font-weight:800;
  background:var(--ink);
  color:#fff;
  box-shadow:0 8px 20px rgba(20,15,25,.12)
}

.note-one {
  right:20px;
  top:115px;
  transform:rotate(3deg)
}

.note-two {
  right:12px;
  bottom:24px;
  transform:rotate(-2deg)
}

.stack-meta>p {
  margin-left:0
}

.stack-meta {
  justify-content:flex-start
}

@keyframes workflowFloat {
  50% {
  transform:translateY(-5px)
}

}

@keyframes checkDrift {
  to {
  transform:translate3d(12px,-8px,0)
}

}

@media(max-width:900px) {
  .hero-workflow {
  height:480px
}

.workflow-board {
  height:430px
}

.workflow-card {
  width:285px
}

.direction-card,.delivery-card {
  left:72px
}

}

@media(max-width:640px) {
  .hero-checks {
  opacity:.22
}

.hero-workflow {
  height:420px
}

.workflow-board {
  height:390px;
  border-radius:20px
}

.workflow-card {
  left:28px;
  width:calc(100% - 56px);
  padding-left:48px
}

.direction-card,.delivery-card {
  left:42px;
  width:calc(100% - 70px)
}

.insight-card {
  top:66px
}

.direction-card {
  top:142px
}

.design-card {
  top:218px
}

.delivery-card {
  top:294px
}

.workflow-line {
  left:51px;
  top:92px;
  bottom:55px
}

.workflow-note {
  display:none
}

}

@media(prefers-reduced-motion:reduce) {
  .hero-checks,.workflow-card {
  animation:none!important
}

}

/* v11.1 — minimal hero, open illustration and larger project imagery */
.hero {
  min-height:650px
}

.hero-grid {
  align-items:center
}

.hero-copy h1 {
  max-width:720px
}

.hero-text {
  max-width:520px;
  font-size:17px;
  line-height:1.6
}

.hero-copy .actions {
  margin-top:28px
}

.hero-flow,.hero-tags {
  display:none!important
}

.hero-workflow {
  position:relative;
  height:500px;
  display:block;
  max-width:560px;
  margin-left:auto
}

.workflow-board,.workflow-head,.workflow-note {
  display:none!important
}

.workflow-line {
  position:absolute;
  left:104px;
  top:104px;
  width:310px;
  height:250px;
  background:none;
  opacity:1
}

.workflow-line:before,.workflow-line:after {
  content:"";
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,rgba(77,22,136,.12),rgba(77,22,136,.5),rgba(217,255,85,.9));
  transform-origin:left center
}

.workflow-line:before {
  width:245px;
  left:24px;
  top:44px;
  transform:rotate(20deg)
}

.workflow-line:after {
  width:220px;
  left:230px;
  top:128px;
  transform:rotate(122deg)
}

.workflow-card {
  position:absolute;
  width:250px;
  min-height:112px;
  padding:20px 20px 18px 52px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  animation:workflowFloat 6.5s ease-in-out infinite
}

.workflow-card:before {
  left:14px;
  top:22px;
  width:25px;
  height:25px;
  border-radius:8px;
  background:rgba(77,22,136,.1)
}

.workflow-card i {
  left:23px;
  top:31px;
  width:7px;
  height:7px
}

.workflow-card small {
  font-size:10px
}

.workflow-card strong {
  font-size:19px;
  margin-top:5px
}

.workflow-card p {
  font-size:13px;
  line-height:1.5;
  margin-top:6px
}

.insight-card {
  left:0;
  top:44px
}

.direction-card {
  left:250px;
  top:144px;
  animation-delay:-2.1s
}

.delivery-card {
  left:68px;
  top:326px;
  animation-delay:-4.2s
}

.delivery-card i {
  background:#d9ff55;
  box-shadow:0 0 0 5px rgba(217,255,85,.2)
}

.stack-card {
  grid-template-columns:58% 42%
}

.stack-media,.stack-card:nth-child(even) .stack-media {
  padding:18px
}

.stack-media img,.stack-card:nth-child(even) .stack-media img {
  width:90%;
  max-width:90%;
  max-height:88%
}

.stack-media:after {
  width:66%;
  height:66%;
  opacity:.65
}

.cap ul {
  margin:24px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px
}

.cap li {
  position:relative;
  padding-left:18px;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.82)
}

.cap li:before {
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#d9ff55;
  transform:translateY(-50%)
}

.cap p {
  margin-bottom:0
}

@media(max-width:1000px) {
  .stack-media img,.stack-card:nth-child(even) .stack-media img {
  width:90%;
  max-width:90%
}

}

@media(max-width:900px) {
  .hero-workflow {
  height:450px;
  max-width:520px;
  margin:10px auto 0
}

.workflow-card {
  width:230px
}

.direction-card {
  left:235px
}

.delivery-card {
  left:60px;
  top:310px
}

.stack-media img,.stack-card:nth-child(even) .stack-media img {
  width:min(90%,700px);
  max-width:90%
}

}

@media(max-width:640px) {
  .hero {
  min-height:auto
}

.hero-workflow {
  height:390px
}

.workflow-line {
  left:55px;
  top:78px;
  transform:scale(.78);
  transform-origin:top left
}

.workflow-card {
  width:210px;
  padding:16px 12px 14px 45px
}

.workflow-card strong {
  font-size:17px
}

.workflow-card p {
  font-size:12px
}

.insight-card {
  left:0;
  top:30px
}

.direction-card {
  left:150px;
  top:135px
}

.delivery-card {
  left:25px;
  top:276px
}

.stack-media img,.stack-card:nth-child(even) .stack-media img {
  width:90%;
  max-width:90%
}

}

/* v11.2 — contained hero illustration, AI capability and consulting experience */
.hero-grid {
  grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr);
  gap:44px;
  overflow:visible
}

.hero-stage.hero-workflow {
  width:100%;
  max-width:500px;
  margin:0 auto;
  transform:none;
  overflow:visible
}

.hero-workflow .workflow-line {
  left:72px;
  top:102px;
  transform:scale(.9);
  transform-origin:top left
}

.hero-workflow .insight-card {
  left:0;
  top:46px
}

.hero-workflow .direction-card {
  left:210px;
  top:150px
}

.hero-workflow .delivery-card {
  left:46px;
  top:318px
}

.cap-grid {
  align-items:stretch
}

.cap {
  display:flex;
  flex-direction:column
}

.cap ul {
  margin-top:auto;
  padding-top:24px
}

@media(max-width:1050px) {
  .hero-grid {
  grid-template-columns:minmax(0,1fr) minmax(340px,.82fr);
  gap:28px
}

.hero-stage.hero-workflow {
  max-width:440px
}

.hero-workflow .direction-card {
  left:185px
}

}

@media(max-width:900px) {
  .hero-grid {
  grid-template-columns:1fr
}

.hero-stage.hero-workflow {
  width:min(100%,520px);
  max-width:520px;
  margin:0 auto
}

.hero-workflow .workflow-line {
  left:72px;
  transform:scale(.9)
}

.hero-workflow .direction-card {
  left:220px
}

.hero-workflow .delivery-card {
  left:52px;
  top:310px
}

}

@media(max-width:640px) {
  .hero-stage.hero-workflow {
  width:100%;
  max-width:390px;
  overflow:hidden
}

.hero-workflow .workflow-line {
  left:34px;
  top:82px;
  transform:scale(.68)
}

.hero-workflow .insight-card {
  left:0;
  top:28px
}

.hero-workflow .direction-card {
  left:138px;
  top:136px
}

.hero-workflow .delivery-card {
  left:18px;
  top:274px
}

}

/* v11.3 — full-screen NZ-market hero with animated recruiter cards */
.hero {
  min-height:100svh;
  padding:118px 0 52px;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero-grid {
  width:min(1180px,calc(100% - 40px));
  min-height:calc(100svh - 170px);
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  gap:clamp(42px,6vw,88px);
  align-items:center;
}

.hero-copy {
  align-self:center
}

.hero h1 {
  font-size:clamp(56px,6.4vw,88px);
  max-width:720px;
  margin:20px 0 24px
}

.hero-text {
  font-size:18px;
  line-height:1.65;
  max-width:610px
}

.hero .actions {
  margin-top:30px
}

.hero-stage.hero-workflow {
  width:100%;
  max-width:560px;
  height:540px;
  margin:0 auto;
  overflow:visible;
  position:relative;
  transform:none;
}

.hero-workflow:before {
  content:"";
  position:absolute;
  width:380px;
  height:380px;
  left:50%;
  top:50%;
  transform:translate(-45%,-47%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(77,22,136,.14),rgba(77,22,136,.035) 48%,transparent 70%);
  filter:blur(2px);
}

.hero-workflow .workflow-line {
  left:84px;
  top:95px;
  width:330px;
  height:330px;
  opacity:.42;
  transform:none;
}

.workflow-card {
  width:292px;
  min-height:138px;
  padding:20px 22px 18px 66px;
  border:1px solid rgba(77,22,136,.11);
  border-radius:18px;
  background:rgba(255,255,255,.91);
  box-shadow:0 18px 50px rgba(46,20,62,.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  animation:heroCardFloat 7s ease-in-out infinite;
}

.workflow-card:before {
  display:none
}

.workflow-card .card-icon {
  position:absolute;
  left:20px;
  top:22px;
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--lav);
  color:var(--purple);
  font-weight:900;
  font-size:16px;
}

.workflow-card small {
  font-size:10px;
  color:var(--purple);
  letter-spacing:.12em
}

.workflow-card strong {
  font-size:20px;
  line-height:1.2;
  margin-top:7px
}

.workflow-card p {
  font-size:13px;
  line-height:1.45;
  margin-top:7px;
  max-width:205px
}

.workflow-card i {
  left:auto;
  right:16px;
  top:16px;
  width:8px;
  height:8px;
  background:var(--lime);
  box-shadow:0 0 0 5px rgba(217,255,85,.20)
}

.hero-workflow .insight-card {
  left:12px;
  top:58px;
  transform:rotate(-2deg)
}

.hero-workflow .direction-card {
  left:244px;
  top:198px;
  transform:rotate(2deg);
  animation-delay:-2.1s
}

.hero-workflow .delivery-card {
  left:48px;
  top:356px;
  transform:rotate(-1deg);
  animation-delay:-4.3s
}

@keyframes heroCardFloat {
  0%,100% {
  translate:0 0
}

50% {
  translate:0 -11px
}

}

@media(max-width:1050px) {
  .hero-grid {
  grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);
  gap:34px
}

.hero-stage.hero-workflow {
  max-width:480px;
  transform:scale(.9);
  transform-origin:center
}

.hero-workflow .direction-card {
  left:205px
}

}

@media(max-width:900px) {
  .hero {
  min-height:auto;
  padding:130px 0 72px
}

.hero-grid {
  min-height:auto;
  grid-template-columns:1fr
}

.hero-copy {
  max-width:760px
}

.hero-stage.hero-workflow {
  height:500px;
  max-width:540px;
  transform:none;
  margin-top:8px
}

.hero-workflow .direction-card {
  left:235px
}

}

@media(max-width:600px) {
  .hero {
  padding:112px 0 58px
}

.hero-grid {
  width:min(100% - 28px,1180px)
}

.hero h1 {
  font-size:clamp(46px,15vw,62px)
}

.hero-text {
  font-size:16px
}

.hero .actions {
  align-items:flex-start
}

.hero-stage.hero-workflow {
  height:440px;
  max-width:360px;
  overflow:visible
}

.hero-workflow:before {
  width:280px;
  height:280px
}

.workflow-card {
  width:245px;
  min-height:124px;
  padding:17px 16px 16px 58px
}

.workflow-card .card-icon {
  left:16px;
  top:18px;
  width:29px;
  height:29px
}

.workflow-card strong {
  font-size:18px
}

.workflow-card p {
  font-size:12px
}

.hero-workflow .workflow-line {
  left:28px;
  top:80px;
  transform:scale(.72);
  transform-origin:top left
}

.hero-workflow .insight-card {
  left:0;
  top:28px
}

.hero-workflow .direction-card {
  left:102px;
  top:162px
}

.hero-workflow .delivery-card {
  left:12px;
  top:308px
}

}

@media(prefers-reduced-motion:reduce) {
  .workflow-card {
  animation:none!important
}

}

/* v5 — clearer project evidence and refined hero messaging */
.project-summary {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:22px 0 8px;
}

.project-summary p {
  margin:0;
  padding:15px 0 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.project-summary b {
  display:block;
  margin-bottom:6px;
  color:var(--ink);
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.media-chrome {
  right:auto;
  width:max-content;
  max-width:calc(100% - 36px);
  padding-right:14px;
  gap:22px;
}

.media-label {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.media-status {
  max-width:calc(100% - 36px);
  letter-spacing:.055em;
  text-transform:none;
  font-size:11px;
}

.cap>span.cap-accent {
  width:max-content;
  max-width:100%;
  white-space:nowrap;
  line-height:1;
  padding:7px 11px;
  align-self:flex-start;
}

@media(max-width:650px) {
  .project-summary {
  grid-template-columns:1fr;
  gap:12px
}

.media-chrome {
  max-width:calc(100% - 28px)
}

.media-status {
  max-width:calc(100% - 28px)
}

}

/* v6 — refined local-market hero and project status alignment */
.media-status {
  left:auto;
  right:22px;
  bottom:22px;
  max-width:calc(100% - 44px);
  padding-right:14px;
}

.hero-workflow .insight-card {
  left:8px;
  top:54px
}

.hero-workflow .direction-card {
  left:238px;
  top:198px
}

.hero-workflow .delivery-card {
  left:42px;
  top:356px
}

@media(max-width:900px) {
  .media-status {
  right:18px;
  bottom:18px;
  max-width:calc(100% - 36px)
}

}

@media(max-width:600px) {
  .media-status {
  left:auto;
  right:14px;
  bottom:14px;
  max-width:calc(100% - 28px)
}

}

/* v7 — balanced hero, technical cues, stronger outcomes and project fit */
.hero h1 {
  font-size:clamp(48px,5.25vw,72px);
  line-height:1.02;
  max-width:760px;
  text-wrap:balance;
}

.hero-text {
  max-width:620px
}

.code-backdrop {
  position:absolute;
  inset:28px 8px 22px 10px;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:.32;
}

.code-backdrop span {
  position:absolute;
  font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:rgba(77,22,136,.42);
  letter-spacing:.01em;
  white-space:nowrap;
}

.code-backdrop span:nth-child(1) {
  left:4%;
  top:16%;
  transform:rotate(-4deg)
}

.code-backdrop span:nth-child(2) {
  right:2%;
  top:48%;
  transform:rotate(3deg)
}

.code-backdrop span:nth-child(3) {
  left:20%;
  bottom:10%;
  transform:rotate(-2deg)
}

.code-backdrop b {
  position:absolute;
  font:800 88px/1 Arial,sans-serif;
  color:rgba(77,22,136,.07);
  letter-spacing:-.08em;
}

.code-backdrop b:nth-of-type(1) {
  right:2%;
  top:2%
}

.code-backdrop b:nth-of-type(2) {
  left:2%;
  bottom:0;
  font-size:72px
}

.workflow-card {
  z-index:2
}

.outcomes {
  padding:34px 0;
  background:linear-gradient(135deg,#18121d 0%,#26192d 100%)
}

.outcome-grid {
  gap:14px;
  padding:0;
  margin:0;
  list-style:none
}

.outcome {
  min-height:168px;
  padding:27px 24px 24px;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
}

.outcome:before {
  content:"";
  position:absolute;
  left:24px;
  top:0;
  width:46px;
  height:3px;
  /* background:var(--lime) */
}

.outcome small {
  margin-bottom:auto;
  color:#bfb2c4;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}

.outcome div {
  display:flex;
  align-items:flex-end;
  gap:2px
}

.outcome strong,.outcome>div>span {
  font-size:44px
}

.outcome p {
  font-size:13px;
  line-height:1.35;
  max-width:170px
}

.media-status {
  bottom:30px!important
}

.stack-card {
  height:600px;
  grid-template-columns:1.06fr .94fr
}

.stack-content {
  padding:32px 36px
}

.stack-content h3 {
  font-size:clamp(29px,2.7vw,41px);
  line-height:1.08;
  margin:14px 0 11px
}

.stack-meta {
  font-size:10.5px
}

.evidence-strip {
  margin:11px 0 0;
  padding:9px 0
}

.project-summary {
  gap:14px;
  margin:16px 0 4px
}

.project-summary p {
  font-size:12.5px;
  line-height:1.48;
  padding-top:12px
}

.stack-content .project-results {
  margin:15px 0 8px;
  padding:12px 0
}

.stack-content .project-results b {
  font-size:21px
}

.stack-content .pills {
  margin:11px 0 0
}

.stack-content .pills span {
  font-size:10.5px;
  padding:6px 9px
}

.stack-content .case-link {
  margin-top:14px;
  padding-top:13px;
  font-size:13px
}

@media(max-width:1050px) {
  .stack-card {
  height:580px;
  grid-template-columns:.96fr 1.04fr
}

.stack-content {
  padding:28px 30px
}

.stack-content h3 {
  font-size:34px
}

}

@media(max-width:900px) {
  .outcome-grid {
  grid-template-columns:1fr 1fr
}

.stack-card {
  height:auto
}

.media-status {
  bottom:24px!important
}

}

@media(max-width:600px) {
  .hero h1 {
  font-size:clamp(42px,13vw,58px);
  line-height:1.03
}

.code-backdrop {
  opacity:.22;
  inset:12px 0
}

.code-backdrop b {
  font-size:60px
}

.outcomes {
  padding:22px 0
}

.outcome-grid {
  gap:10px
}

.outcome {
  min-height:146px;
  padding:22px 17px 18px
}

.outcome:before {
  left:17px;
  width:34px
}

.outcome strong,.outcome>div>span {
  font-size:34px
}

.media-status {
  bottom:20px!important
}

.stack-content {
  padding:26px 22px
}

.stack-content h3 {
  font-size:30px
}

.project-summary {
  grid-template-columns:1fr
}

}

/* v8 — abstract code/design backdrop, balanced hero and fade-slide testimonials */
.hero h1 {
  font-size:clamp(42px,4.62vw,63px);
  line-height:1.04;
  max-width:690px;
}

.hero-grid {
  grid-template-columns:1.08fr .92fr;
  gap:58px
}

.hero-workflow {
  height:500px;
  max-width:500px;
  margin-left:auto;
  width:100%
}

.code-backdrop {
  inset:24px 0 16px;
  opacity:1;
  overflow:visible
}

.code-backdrop .code-line {
  position:absolute;
  display:block;
  height:6px;
  border-radius:999px;
  background:rgba(77,22,136,.10);
  transform:none;
}

.code-backdrop .line-a {
  width:116px;
  left:4%;
  top:15%;
  box-shadow:0 15px 0 rgba(77,22,136,.065),0 30px 0 rgba(77,22,136,.04)
}

.code-backdrop .line-b {
  width:88px;
  right:4%;
  top:43%;
  box-shadow:0 15px 0 rgba(77,22,136,.06),0 30px 0 rgba(77,22,136,.035)
}

.code-backdrop .line-c {
  width:132px;
  left:18%;
  bottom:11%;
  box-shadow:0 15px 0 rgba(77,22,136,.055)
}

.code-backdrop .ui-frame {
  position:absolute;
  display:block;
  border:1px solid rgba(77,22,136,.12);
  border-radius:14px;
  background:rgba(255,255,255,.22);
  transform:none;
}

.code-backdrop .ui-frame i {
  position:absolute;
  display:block;
  height:5px;
  border-radius:8px;
  background:rgba(77,22,136,.09)
}

.code-backdrop .frame-a {
  width:124px;
  height:88px;
  right:2%;
  top:9%;
  transform:rotate(4deg)
}

.code-backdrop .frame-a i:nth-child(1) {
  left:14px;
  right:14px;
  top:18px
}

.code-backdrop .frame-a i:nth-child(2) {
  left:14px;
  width:58px;
  top:36px
}

.code-backdrop .frame-a i:nth-child(3) {
  left:14px;
  width:82px;
  top:54px
}

.code-backdrop .frame-b {
  width:105px;
  height:76px;
  left:0;
  bottom:17%;
  transform:rotate(-5deg)
}

.code-backdrop .frame-b i:nth-child(1) {
  left:13px;
  right:13px;
  top:20px
}

.code-backdrop .frame-b i:nth-child(2) {
  left:13px;
  width:54px;
  top:40px
}

.code-backdrop .code-bracket {
  position:absolute;
  font:700 44px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:rgba(77,22,136,.075);
  letter-spacing:-.12em;
  transform:none;
}

.code-backdrop .bracket-a {
  right:9%;
  bottom:8%;
  transform:rotate(5deg)
}

.code-backdrop .bracket-b {
  left:2%;
  top:38%;
  font-size:34px;
  transform:rotate(-6deg)
}

.hero-role-card {
  position:absolute;
  z-index:3;
  right:14px;
  top:18px;
  width:235px;
  padding:14px 16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(77,22,136,.10);
  border-radius:14px;
  box-shadow:0 12px 32px rgba(55,25,72,.08);
  animation:workflowFloat 7s ease-in-out infinite -2s;
}

.hero-role-card small {
  display:block;
  color:var(--purple);
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}

.hero-role-card strong {
  display:block;
  font-size:17px;
  line-height:1.2;
  margin-top:4px
}

.hero-role-card span {
  display:block;
  color:var(--muted);
  font-size:10.5px;
  margin-top:4px
}

.hero-workflow .insight-card {
  left:4px;
  top:98px
}

.hero-workflow .direction-card {
  left:222px;
  top:230px
}

.hero-workflow .delivery-card {
  left:34px;
  top:372px
}

.hero-workflow .workflow-line {
  left:55px;
  top:132px;
  transform:scale(.86);
  transform-origin:top left
}

.quote-slider {
  min-height:310px;
  position:relative;
  overflow:hidden
}

.quote-slider blockquote {
  display:block!important;
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  margin:25px 0 0;
  transform:translateX(28px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s linear .55s;
}

.quote-slider blockquote.active {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
  transition-delay:0s;
}

.quote-controls {
  position:absolute;
  left:0;
  bottom:0
}

@media(max-width:900px) {
  .hero-grid {
  grid-template-columns:1fr;
  gap:18px
}

.hero-workflow {
  height:455px;
  max-width:520px;
  margin:0 auto
}

.hero-role-card {
  right:28px
}

.hero-workflow .direction-card {
  left:235px
}

.hero-workflow .delivery-card {
  left:48px;
  top:326px
}

}

@media(max-width:600px) {
  .hero h1 {
  font-size:clamp(37px,11.5vw,51px)
}

.hero-workflow {
  height:420px;
  max-width:390px
}

.hero-role-card {
  right:8px;
  top:8px;
  width:210px
}

.hero-workflow .insight-card {
  left:0;
  top:92px
}

.hero-workflow .direction-card {
  left:120px;
  top:205px
}

.hero-workflow .delivery-card {
  left:16px;
  top:322px
}

.hero-workflow .workflow-line {
  left:22px;
  top:118px;
  transform:scale(.65)
}

.code-backdrop .frame-a {
  right:0
}

.code-backdrop .bracket-a {
  right:2%
}

.quote-slider {
  min-height:390px
}

}

@media(prefers-reduced-motion:reduce) {
  .hero-role-card {
  animation:none!important
}

.quote-slider blockquote {
  transition:none!important
}

}

/* v9 — wider recruiter-led hero and restrained evidence cards */
.hero-grid {
  grid-template-columns:minmax(0,1.28fr) minmax(380px,.72fr);
  gap:42px;
}

.hero-copy {
  max-width:760px
}

.hero h1 {
  font-size:clamp(44px,4.35vw,60px);
  line-height:1.04;
  max-width:760px;
  text-wrap:balance;
}

.hero-text {
  max-width:650px
}

.hero-workflow {
  max-width:460px;
  height:480px;
  margin-left:auto;
}

.hero-role-card {
  right:18px;
  top:22px;
  animation:none;
}

.hero-workflow .workflow-card {
  animation:recruiterFloat 10s ease-in-out infinite;
}

.hero-workflow .insight-card {
  left:0;
  top:104px;
  animation-delay:0s
}

.hero-workflow .direction-card {
  left:182px;
  top:236px;
  animation-delay:-3.2s
}

.hero-workflow .delivery-card {
  left:24px;
  top:366px;
  animation-delay:-6.4s
}

.hero-workflow .workflow-line {
  left:48px;
  top:138px;
  transform:scale(.8);
  transform-origin:top left;
  opacity:.48
}

.code-backdrop {
  opacity:.72
}

@keyframes recruiterFloat {
  0%,100% {
  translate:0 0
}

50% {
  translate:0 -3px
}

}

@media(max-width:1100px) {
  .hero-grid {
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
  gap:28px
}

.hero h1 {
  font-size:clamp(43px,4.8vw,58px)
}

.hero-workflow {
  max-width:430px;
  transform:scale(.96);
  transform-origin:center right
}

.hero-workflow .direction-card {
  left:166px
}

}

@media(max-width:900px) {
  .hero-grid {
  grid-template-columns:1fr;
  gap:22px
}

.hero-copy {
  max-width:780px
}

.hero h1 {
  max-width:720px
}

.hero-workflow {
  max-width:500px;
  height:460px;
  margin:0 auto;
  transform:none
}

.hero-workflow .direction-card {
  left:205px
}

.hero-workflow .delivery-card {
  left:38px;
  top:340px
}

}

@media(max-width:600px) {
  .hero h1 {
  font-size:clamp(38px,11vw,50px);
  max-width:100%
}

.hero-workflow {
  height:410px;
  max-width:370px
}

.hero-role-card {
  right:4px;
  top:6px
}

.hero-workflow .insight-card {
  left:0;
  top:92px
}

.hero-workflow .direction-card {
  left:104px;
  top:202px
}

.hero-workflow .delivery-card {
  left:12px;
  top:316px
}

}

@media(prefers-reduced-motion:reduce) {
  .hero-workflow .workflow-card {
  animation:none!important
}

}

/* Production refinement — recruiter-led hero and outcomes */
.hero {
  min-height:100svh;
  min-height:760px;
  padding:132px 0 76px;
  display:flex;
  align-items:center;
}

.hero-grid {
  min-height:calc(100svh - 208px);
  grid-template-columns:minmax(0,1.35fr) minmax(370px,.65fr);
  gap:38px;
}

.hero-copy {
  max-width:820px
}

.hero h1 {
  font-size:clamp(46px,4.55vw,66px);
  line-height:1.015;
  max-width:810px;
  margin:20px 0 24px;
  text-wrap:balance;
}

.hero-text {
  max-width:690px;
  font-size:18px;
  line-height:1.65
}

.hero-workflow {
  max-width:445px;
  height:470px
}

.hero-role-card {
  right:10px;
  top:14px;
  width:248px
}

.hero-workflow .workflow-card {
  width:255px;
  animation:none;
  box-shadow:0 14px 36px rgba(55,25,72,.09);
}

.hero-workflow .insight-card {
  left:0;
  top:103px
}

.hero-workflow .direction-card {
  left:158px;
  top:231px
}

.hero-workflow .delivery-card {
  left:20px;
  top:354px
}

.hero-workflow .workflow-line {
  left:45px;
  top:137px;
  opacity:.36;
  transform:scale(.76);
  transform-origin:top left
}

.code-backdrop {
  opacity:.56
}

.workflow-card small {
  color:var(--purple)
}

.workflow-card strong {
  font-size:18px;
  line-height:1.22
}

.workflow-card p {
  font-size:12px;
  line-height:1.45
}

.outcomes {
  padding:86px 0 78px;
  background:linear-gradient(135deg,#18121d 0%,#24182a 100%)
}

.outcomes-shell {
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
  gap:64px;
  align-items:start
}

.outcomes-intro {
  position:sticky;
  top:120px
}

.outcomes-intro .eyebrow {
  color:var(--lime);
  margin:0 0 14px
}

.outcomes-intro h2 {
  font-size:clamp(36px,4vw,54px);
  line-height:1.05;
  letter-spacing:-.045em;
  margin:0 0 20px;
  max-width:430px
}

.outcomes-intro>p:last-child {
  color:#c7bdca;
  font-size:16px;
  line-height:1.65;
  max-width:430px
}

.outcome-grid {
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid rgba(255,255,255,.15)
}

.outcome {
  min-height:250px;
  padding:30px 28px 32px;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.15)!important;
  border-radius:0;
  background:transparent;
  justify-content:flex-start;
}

.outcome:nth-child(odd) {
  border-right:1px solid rgba(255,255,255,.15)!important
}

.outcome:before {
  left:28px;
  top:-1px;
  width:44px;
  height:3px
}

.outcome small {
  margin:0 0 23px;
  color:#bfb2c4
}

.outcome div {
  margin-bottom:12px
}

.outcome strong,.outcome>div>span {
  font-size:52px
}

.outcome h3 {
  font-size:18px;
  line-height:1.25;
  margin:0 0 10px;
  color:#fff
}

.outcome p {
  font-size:13px;
  line-height:1.55;
  max-width:260px;
  margin:0;
  color:#bfb2c4
}

@media(max-width:1050px) {
  .hero-grid {
  grid-template-columns:minmax(0,1.18fr) minmax(350px,.82fr);
  gap:24px
}

.hero h1 {
  font-size:clamp(44px,5.2vw,60px)
}

.hero-workflow {
  transform:scale(.94);
  transform-origin:center right
}

.outcomes-shell {
  grid-template-columns:1fr;
  gap:38px
}

.outcomes-intro {
  position:static;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:end
}

.outcomes-intro .eyebrow {
  grid-column:1/-1;
  margin-bottom:-12px
}

.outcomes-intro h2,.outcomes-intro>p:last-child {
  margin-bottom:0
}

}

@media(max-width:900px) {
  .hero {
  min-height:auto;
  padding:126px 0 70px
}

.hero-grid {
  min-height:auto;
  grid-template-columns:1fr;
  gap:24px
}

.hero-copy {
  max-width:780px
}

.hero h1 {
  max-width:760px
}

.hero-workflow {
  max-width:480px;
  margin:0 auto;
  transform:none
}

.hero-workflow .direction-card {
  left:190px
}

}

@media(max-width:650px) {
  .hero h1 {
  font-size:clamp(39px,11vw,52px);
  line-height:1.03
}

.hero-text {
  font-size:16px
}

.hero-workflow {
  height:420px;
  max-width:365px
}

.hero-role-card {
  width:215px;
  right:0
}

.hero-workflow .workflow-card {
  width:225px
}

.hero-workflow .direction-card {
  left:112px;
  top:205px
}

.hero-workflow .delivery-card {
  left:10px;
  top:316px
}

.outcomes {
  padding:66px 0 56px
}

.outcomes-intro {
  display:block
}

.outcomes-intro .eyebrow {
  margin-bottom:14px
}

.outcomes-intro h2 {
  margin-bottom:16px
}

.outcome-grid {
  grid-template-columns:1fr
}

.outcome {
  min-height:210px;
  padding:26px 20px 28px
}

.outcome:nth-child(odd) {
  border-right:0!important
}

.outcome:before {
  left:20px
}

.outcome strong,.outcome>div>span {
  font-size:46px
}

}

/* Case study system — consistent with the production homepage */
.case-page {
  background:#fbfafc;
  color:#2d2630
}

.case-page .site-header {
  background:rgba(251,250,252,.88)
}

.case-hero {
  position:relative;
  padding:150px 0 70px;
  overflow:hidden;
  background:linear-gradient(180deg,#f6f0f8 0%,#fbfafc 76%)
}

.case-grid-bg {
  position:absolute;
  inset:0;
  opacity:.38;
  background-image:linear-gradient(rgba(91,36,133,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(91,36,133,.08) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,#000,transparent 86%)
}

.back-link {
  position:relative;
  z-index:1;
  display:inline-flex;
  margin-bottom:52px;
  color:#5b2485;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase
}

.case-hero-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);
  gap:80px;
  align-items:end
}

.case-title h1 {
  max-width:900px;
  margin:13px 0 24px;
  font-size:clamp(52px,7.2vw,96px);
  line-height:.96;
  letter-spacing:-.065em
}

.case-title>p:last-child {
  max-width:750px;
  margin:0;
  font-size:clamp(18px,2vw,23px);
  line-height:1.55;
  color:#635968
}

.case-facts {
  display:grid;
  gap:0;
  margin:0;
  border-top:1px solid rgba(49,28,58,.16)
}

.case-facts div {
  padding:18px 0;
  border-bottom:1px solid rgba(49,28,58,.16)
}

.case-facts dt {
  margin-bottom:5px;
  color:#857989;
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase
}

.case-facts dd {
  margin:0;
  font-size:15px;
  font-weight:700
}

.case-cover {
  position:relative;
  z-index:1;
  margin:68px 0 0
}

.case-cover img {
  display:block;
  width:100%;
  max-height:720px;
  object-fit:cover;
  border-radius:28px;
  box-shadow:0 34px 80px rgba(41,20,50,.15)
}

.case-cover figcaption,.case-visual figcaption {
  margin-top:12px;
  color:#827787;
  font-size:12px
}

.case-results {
  padding:0 0 84px
}

.case-results .eyebrow {
  margin-bottom:20px
}

.case-stat-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(49,28,58,.18);
  border-bottom:1px solid rgba(49,28,58,.18)
}

.case-stat-grid li {
  min-height:160px;
  padding:28px 24px;
  border-right:1px solid rgba(49,28,58,.18)
}

.case-stat-grid li:first-child {
  padding-left:0
}

.case-stat-grid li:last-child {
  border:0
}

.case-stat-grid strong {
  display:block;
  margin-bottom:11px;
  color:#5b2485;
  font-size:clamp(35px,4.5vw,58px);
  line-height:1;
  letter-spacing:-.05em
}

.case-stat-grid span {
  display:block;
  max-width:180px;
  color:#635968;
  font-size:13px;
  line-height:1.45
}

.case-section {
  padding:105px 0;
  border-top:1px solid rgba(49,28,58,.09)
}

.case-section-grid {
  display:grid;
  grid-template-columns:minmax(220px,.54fr) minmax(0,1.15fr);
  gap:80px
}

.case-section-title {
  position:sticky;
  top:120px;
  align-self:start
}

.case-section-title h2 {
  margin:12px 0 0;
  font-size:clamp(34px,4vw,55px);
  line-height:1.02;
  letter-spacing:-.05em
}

.case-prose {
  max-width:790px
}

.case-lead {
  margin:0 0 30px;
  font-size:clamp(22px,2.7vw,32px);
  line-height:1.35;
  letter-spacing:-.025em
}

.case-prose>p:not(.case-lead),.case-prose li {
  font-size:16px;
  line-height:1.72;
  color:#655b69
}

.case-prose ul {
  display:grid;
  gap:10px;
  padding-left:20px
}

.case-aside {
  grid-column:2;
  margin-top:34px;
  padding:22px 24px;
  border-left:3px solid #5b2485;
  background:#f3edf5;
  border-radius:0 12px 12px 0
}

.case-aside p {
  margin:6px 0 0;
  color:#655b69;
  line-height:1.6
}

.aside-label {
  font-size:10px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#5b2485
}

.case-visual {
  padding:12px 0 96px
}

.case-visual figure {
  margin:0
}

.case-visual img {
  display:block;
  width:100%;
  max-height:780px;
  object-fit:contain;
  border:1px solid rgba(49,28,58,.08);
  border-radius:24px;
  background:#f1edf3;
  box-shadow:0 20px 50px rgba(41,20,50,.08)
}

.process-list {
  display:grid;
  border-top:1px solid rgba(49,28,58,.15)
}

.process-list span {
  display:grid;
  grid-template-columns:46px 1fr;
  gap:12px;
  padding:18px 0;
  border-bottom:1px solid rgba(49,28,58,.15);
  font-size:16px
}

.process-list b {
  color:#5b2485;
  font-size:12px
}

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

.decision-grid article {
  padding:25px;
  border:1px solid rgba(49,28,58,.1);
  border-radius:15px;
  background:#fff
}

.decision-grid h3 {
  margin:0 0 9px;
  font-size:18px
}

.decision-grid p {
  margin:0;
  color:#655b69;
  line-height:1.6
}

.case-quote {
  margin:36px 0 0;
  padding:30px 0 0;
  border-top:1px solid rgba(49,28,58,.17);
  font-size:clamp(24px,3vw,36px);
  line-height:1.35;
  letter-spacing:-.03em
}

.case-quote cite {
  display:block;
  margin-top:18px;
  color:#7b7180;
  font-size:12px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase
}

.next-case {
  padding:0 0 100px
}

.next-case a {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  padding:42px;
  border-radius:22px;
  background:#eee7f1;
  transition:transform .25s ease,background .25s ease
}

.next-case a:hover {
  transform:translateY(-3px);
  background:#e8dfee
}

.next-case span {
  grid-column:1;
  color:#5b2485;
  font-size:11px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase
}

.next-case strong {
  grid-column:1;
  margin-top:10px;
  font-size:clamp(27px,4vw,47px);
  line-height:1.05;
  letter-spacing:-.045em
}

.next-case i {
  grid-column:2;
  grid-row:1/3;
  font-size:34px;
  font-style:normal;
  color:#5b2485
}

.case-contact {
  padding:100px 0;
  background:#271b2d
}

.case-contact-card {
  max-width:880px
}

.case-contact h2 {
  margin:12px 0 20px;
  color:#fff;
  font-size:clamp(40px,6vw,72px);
  line-height:1;
  letter-spacing:-.06em
}

.case-contact p:not(.eyebrow) {
  max-width:650px;
  color:#cabfd0;
  font-size:18px;
  line-height:1.6
}

.case-contact .eyebrow {
  color:#b999cc
}

@media(max-width:900px) {
  .case-hero {
  padding-top:120px
}

.case-hero-grid {
  grid-template-columns:1fr;
  gap:45px
}

.case-title h1 {
  font-size:clamp(48px,11vw,76px)
}

.case-facts {
  grid-template-columns:repeat(3,1fr)
}

.case-facts div {
  padding:16px;
  border-bottom:0;
  border-right:1px solid rgba(49,28,58,.16)
}

.case-facts div:first-child {
  padding-left:0
}

.case-facts div:last-child {
  border:0
}

.case-cover {
  margin-top:48px
}

.case-cover img {
  border-radius:20px
}

.case-stat-grid {
  grid-template-columns:1fr 1fr
}

.case-stat-grid li:nth-child(2) {
  border-right:0
}

.case-stat-grid li:nth-child(n+3) {
  border-top:1px solid rgba(49,28,58,.18)
}

.case-stat-grid li:nth-child(3) {
  padding-left:0
}

.case-section {
  padding:78px 0
}

.case-section-grid {
  grid-template-columns:1fr;
  gap:35px
}

.case-section-title {
  position:static
}

.case-aside {
  grid-column:1
}

.case-visual {
  padding-bottom:72px
}

}

@media(max-width:600px) {
  .case-hero {
  padding:100px 0 45px
}

.back-link {
  margin-bottom:35px
}

.case-title h1 {
  font-size:43px;
  line-height:1
}

.case-title>p:last-child {
  font-size:17px
}

.case-facts {
  grid-template-columns:1fr
}

.case-facts div,.case-facts div:first-child {
  padding:14px 0;
  border-right:0;
  border-bottom:1px solid rgba(49,28,58,.16)
}

.case-cover {
  margin-top:34px
}

.case-cover img {
  min-height:240px;
  object-fit:cover;
  border-radius:15px
}

.case-results {
  padding-bottom:55px
}

.case-stat-grid {
  grid-template-columns:1fr 1fr
}

.case-stat-grid li,.case-stat-grid li:first-child,.case-stat-grid li:nth-child(3) {
  min-height:130px;
  padding:20px 14px
}

.case-stat-grid strong {
  font-size:34px
}

.case-stat-grid span {
  font-size:12px
}

.case-section {
  padding:62px 0
}

.case-section-title h2 {
  font-size:35px
}

.case-lead {
  font-size:22px
}

.decision-grid {
  grid-template-columns:1fr
}

.case-visual {
  padding:0 0 55px
}

.case-visual img {
  border-radius:14px
}

.next-case {
  padding-bottom:70px
}

.next-case a {
  padding:27px 23px
}

.case-contact {
  padding:74px 0
}

.case-contact h2 {
  font-size:40px
}

.case-contact p:not(.eyebrow) {
  font-size:16px
}

}

/* Expanded visual storytelling */
.case-story {
  padding:92px 0;
  border-top:1px solid rgba(49,28,58,.09)
}

.story-row {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:56px;
  align-items:center;
  margin:0 0 72px
}

.story-row.reverse {
  grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)
}

.story-row.reverse .story-media {
  order:2
}

.story-row.reverse .story-copy {
  order:1
}

.story-media {
  margin:0
}

.story-media img {
  display:block;
  width:100%;
  max-height:720px;
  object-fit:contain;
  background:#f3eef5;
  border:1px solid rgba(49,28,58,.08);
  border-radius:22px;
  box-shadow:0 18px 44px rgba(41,20,50,.07)
}

.story-copy .eyebrow {
  margin-bottom:10px
}

.story-copy h3 {
  font-size:clamp(28px,3.4vw,46px);
  line-height:1.05;
  letter-spacing:-.045em;
  margin:0 0 16px
}

.story-copy p {
  font-size:16px;
  line-height:1.72;
  color:#655b69;
  margin:0
}

.story-copy ul {
  padding-left:20px;
  color:#655b69;
  line-height:1.7
}

.visual-gallery {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:30px
}

.visual-gallery figure {
  margin:0
}

.visual-gallery figure.wide {
  grid-column:1/-1
}

.visual-gallery img {
  width:100%;
  height:100%;
  max-height:620px;
  object-fit:contain;
  background:#f3eef5;
  border:1px solid rgba(49,28,58,.08);
  border-radius:18px
}

.visual-gallery figcaption {
  font-size:12px;
  color:#756a79;
  margin:9px 3px 0;
  line-height:1.5
}

.case-note {
  padding:20px 22px;
  background:#eee7f1;
  border-radius:14px;
  color:#554a59;
  line-height:1.65
}

@media(max-width:900px) {
  .story-row,.story-row.reverse {
  grid-template-columns:1fr;
  gap:28px;
  margin-bottom:56px
}

.story-row.reverse .story-media,.story-row.reverse .story-copy {
  order:initial
}

.visual-gallery {
  grid-template-columns:1fr
}

}

@media(max-width:600px) {
  .case-story {
  padding:62px 0
}

.story-media img,.visual-gallery img {
  border-radius:14px
}

.story-copy h3 {
  font-size:31px
}

}

/* v3 case-study spacing and evidence presentation */
.case-page .shell {
  width:min(1240px,calc(100% - 56px))
}

.case-hero {
  padding-bottom:92px
}

.case-cover {
  margin-top:76px;
  padding:22px;
  background:#f1edf3;
  border:1px solid rgba(49,28,58,.08);
  border-radius:30px
}

.case-cover img {
  max-height:none;
  object-fit:contain;
  border-radius:18px;
  box-shadow:none;
  background:#fff
}

.case-cover figcaption {
  padding:0 4px 2px
}

.case-results {
  padding:14px 0 104px
}

.case-section {
  padding:118px 0
}

.case-section-grid {
  gap:96px
}

.case-prose {
  max-width:820px
}

.case-prose>p:not(.case-lead),.case-prose li {
  font-size:17px
}

.case-story {
  padding:116px 0
}

.story-row {
  grid-template-columns:minmax(0,1.42fr) minmax(290px,.58fr);
  gap:72px;
  margin-bottom:104px;
  align-items:center
}

.story-row.reverse {
  grid-template-columns:minmax(290px,.58fr) minmax(0,1.42fr)
}

.story-media {
  padding:24px;
  background:#f3eef5;
  border:1px solid rgba(49,28,58,.08);
  border-radius:26px;
  overflow:hidden
}

.story-media img {
  max-height:820px;
  border:0;
  border-radius:14px;
  box-shadow:none;
  background:#fff;
  object-fit:contain
}

.story-copy {
  padding:12px 0
}

.story-copy p {
  font-size:17px
}

.visual-gallery {
  gap:30px;
  margin:48px 0 104px
}

.visual-gallery figure {
  padding:18px;
  background:#f3eef5;
  border:1px solid rgba(49,28,58,.08);
  border-radius:22px;
  overflow:hidden
}

.visual-gallery img {
  display:block;
  height:auto;
  max-height:760px;
  object-fit:contain;
  background:#fff;
  border:0;
  border-radius:12px
}

.visual-gallery figcaption {
  margin:13px 4px 2px;
  font-size:13px;
  line-height:1.55
}

.case-visual {
  padding:22px 0 112px
}

.case-visual figure {
  padding:22px;
  background:#f3eef5;
  border:1px solid rgba(49,28,58,.08);
  border-radius:26px
}

.case-visual img {
  max-height:840px;
  border:0;
  border-radius:14px;
  box-shadow:none;
  background:#fff;
  object-fit:contain
}

.case-visual figcaption {
  padding:0 4px 2px;
  font-size:13px;
  line-height:1.55
}

.case-aside {
  margin-top:44px;
  padding:26px 28px
}

.next-case {
  padding-bottom:118px
}

@media(max-width:900px) {
  .case-page .shell {
  width:min(100% - 40px,1240px)
}

.case-cover {
  margin-top:54px;
  padding:16px;
  border-radius:23px
}

.case-section {
  padding:88px 0
}

.case-section-grid {
  gap:42px
}

.case-story {
  padding:86px 0
}

.story-row,.story-row.reverse {
  grid-template-columns:1fr;
  gap:32px;
  margin-bottom:76px
}

.story-media {
  padding:18px;
  border-radius:21px
}

.story-media img {
  max-height:none
}

.visual-gallery {
  grid-template-columns:1fr;
  gap:26px;
  margin-bottom:78px
}

.visual-gallery figure,.visual-gallery figure.wide {
  grid-column:auto;
  padding:15px
}

.visual-gallery img {
  max-height:none
}

.case-visual {
  padding-bottom:82px
}

}

@media(max-width:600px) {
  .case-page .shell {
  width:min(100% - 28px,1240px)
}

.case-hero {
  padding-bottom:54px
}

.case-cover {
  margin-top:36px;
  padding:10px;
  border-radius:18px
}

.case-cover img {
  min-height:0;
  max-height:none;
  object-fit:contain;
  border-radius:11px
}

.case-results {
  padding-bottom:64px
}

.case-section {
  padding:70px 0
}

.case-prose>p:not(.case-lead),.case-prose li,.story-copy p {
  font-size:16px
}

.case-story {
  padding:70px 0
}

.story-row,.story-row.reverse {
  gap:24px;
  margin-bottom:62px
}

.story-media {
  padding:10px;
  border-radius:16px
}

.story-media img {
  border-radius:9px
}

.visual-gallery {
  gap:22px;
  margin:34px 0 64px
}

.visual-gallery figure {
  padding:10px;
  border-radius:16px
}

.visual-gallery img {
  border-radius:8px
}

.visual-gallery figcaption {
  font-size:12px;
  margin-top:10px
}

.case-visual {
  padding-bottom:64px
}

.case-visual figure {
  padding:10px;
  border-radius:16px
}

.case-visual img {
  border-radius:9px;
  max-height:none
}

.next-case {
  padding-bottom:82px
}

}

/* Case study production audit — consistent recruiter narrative and WCAG-focused polish */
:root {
  --case-ink:#251d28;
  --case-muted:#5e5362;
  --case-purple:#4f1f69;
  --case-purple-dark:#321343;
  --case-lilac:#f2edf5;
  --case-line:#d8cedd;
  --case-accent:#d9ff55;
}

.case-page {
  color:var(--case-ink);
  background:#fff
}

.case-page p,.case-page li {
  color:var(--case-muted)
}

.case-page .eyebrow,.case-page .kicker {
  color:var(--case-purple-dark)
}

.case-page a:focus-visible,.case-page button:focus-visible {
  outline:3px solid var(--case-accent);
  outline-offset:4px
}

.case-recruiter-summary {
  padding:clamp(72px,8vw,116px) 0;
  background:linear-gradient(180deg,#fff 0%,#faf8fb 100%);
  border-bottom:1px solid var(--case-line)
}

.summary-intro {
  display:grid;
  grid-template-columns:.34fr 1fr;
  gap:40px;
  align-items:start;
  margin-bottom:42px
}

.summary-intro h2 {
  max-width:920px;
  margin:0;
  font-size:clamp(30px,4vw,52px);
  line-height:1.08;
  letter-spacing:-.035em;
  color:var(--case-ink)
}

.summary-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1.05fr;
  border:1px solid var(--case-line);
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 18px 55px rgba(35,19,43,.055)
}

.summary-grid article {
  padding:32px 32px 34px;
  min-width:0
}

.summary-grid article+article {
  border-left:1px solid var(--case-line)
}

.summary-grid span,.evidence-cards>article>span {
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  background:var(--case-lilac);
  color:var(--case-purple-dark);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}

.summary-grid p {
  margin:18px 0 0;
  font-size:16px;
  line-height:1.7
}

.summary-grid ul {
  margin:18px 0 0;
  padding-left:20px;
  display:grid;
  gap:10px
}

.summary-grid li {
  padding-left:4px;
  line-height:1.55
}

.case-section,.case-story {
  scroll-margin-top:90px
}

.case-section {
  padding:clamp(80px,9vw,136px) 0
}

.case-section-grid {
  gap:clamp(48px,8vw,120px)
}

.case-prose p,.case-prose li,.story-copy p {
  font-size:clamp(16px,1.3vw,18px);
  line-height:1.75
}

.story-row {
  gap:clamp(44px,7vw,100px);
  margin:clamp(84px,10vw,150px) 0;
  align-items:center
}

.story-media {
  padding:clamp(20px,3vw,42px);
  background:#f7f4f8;
  border:1px solid var(--case-line);
  border-radius:24px;
  overflow:hidden
}

.story-media img,.visual-gallery img,.case-cover img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
  border-radius:12px
}

.story-copy {
  max-width:500px
}

.story-copy h3 {
  font-size:clamp(28px,3.2vw,46px);
  line-height:1.1;
  color:var(--case-ink)
}

.visual-gallery {
  gap:32px;
  margin:clamp(88px,10vw,150px) 0
}

.visual-gallery figure {
  padding:clamp(20px,3vw,38px);
  background:#f8f6f9;
  border:1px solid var(--case-line);
  border-radius:24px
}

.visual-gallery figcaption {
  margin-top:18px;
  color:#514655;
  font-size:14px;
  line-height:1.55
}

.case-senior-evidence {
  padding:clamp(86px,10vw,150px) 0;
  background:var(--case-purple-dark);
  color:#fff
}

.evidence-heading {
  display:grid;
  grid-template-columns:.3fr 1fr;
  gap:38px;
  margin-bottom:50px;
  align-items:start
}

.evidence-heading .eyebrow {
  color:var(--case-accent)
}

.evidence-heading h2 {
  margin:0;
  color:#fff;
  font-size:clamp(34px,4.7vw,62px);
  line-height:1.02;
  letter-spacing:-.04em
}

.evidence-heading>p {
  grid-column:2;
  color:#d9cfdd;
  max-width:700px;
  margin:0;
  font-size:17px;
  line-height:1.7
}

.evidence-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.evidence-cards article {
  padding:clamp(28px,4vw,46px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:rgba(255,255,255,.055)
}

.evidence-cards article>span {
  background:var(--case-accent);
  color:#19200a
}

.evidence-cards h3 {
  color:#fff;
  font-size:clamp(23px,2.5vw,34px);
  line-height:1.15;
  margin:22px 0 14px
}

.evidence-cards p {
  color:#ddd3e1;
  font-size:16px;
  line-height:1.72;
  margin:0
}

.evidence-result {
  background:linear-gradient(145deg,rgba(217,255,85,.13),rgba(255,255,255,.04))!important
}

.case-results {
  background:#241b27
}

.case-results .eyebrow {
  color:var(--case-accent)
}

.case-stat-grid li {
  border-color:rgba(255,255,255,.22)
}

.case-stat-grid strong {
  color:#fff
}

.case-stat-grid span {
  color:#d9d0dc
}

.case-cover {
  padding:clamp(18px,3vw,34px);
  background:#efe9f2;
  border:1px solid var(--case-line);
  border-radius:28px
}

.case-cover img {
  max-height:none
}

@media(max-width:900px) {
  .summary-intro,.evidence-heading {
  grid-template-columns:1fr;
  gap:16px
}

.evidence-heading>p {
  grid-column:auto
}

.summary-grid {
  grid-template-columns:1fr
}

.summary-grid article+article {
  border-left:0;
  border-top:1px solid var(--case-line)
}

.evidence-cards {
  grid-template-columns:1fr
}

.story-row,.story-row.reverse {
  grid-template-columns:1fr!important;
  gap:28px;
  margin:76px 0
}

.story-row.reverse .story-media {
  order:0
}

.story-row.reverse .story-copy {
  order:1
}

.story-copy {
  max-width:none
}

}

@media(max-width:600px) {
  .case-recruiter-summary,.case-senior-evidence,.case-section {
  padding:64px 0
}

.summary-grid article {
  padding:25px 22px 28px
}

.summary-intro {
  margin-bottom:28px
}

.story-media,.visual-gallery figure,.case-cover {
  padding:14px;
  border-radius:18px
}

.story-media img,.visual-gallery img,.case-cover img {
  border-radius:9px
}

.visual-gallery {
  gap:20px;
  margin:68px 0
}

.evidence-cards article {
  padding:25px 22px
}

}

/* vNext clean hero — portfolio-specific, recruiter-first */
.clean-hero {
  min-height:calc(100svh - 0px);
  display:grid;
  align-items:center;
  padding:132px 0 74px;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 42%,rgba(94,39,124,.10),transparent 36%),
    linear-gradient(135deg,#fff 18%,#f8f4fa 100%);
}

.clean-hero .hero-grid {
  min-height:calc(100svh - 206px);
  grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr);
  gap:52px;
  align-items:center;
}

.clean-hero .hero-copy {
  max-width:760px
}

.clean-hero h1 {
  max-width:760px;
  margin:20px 0 24px;
  font-size:clamp(48px,5.05vw,72px);
  line-height:1.01;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.clean-hero .hero-text {
  max-width:650px;
  font-size:18px;
  line-height:1.65;
  color:#5f5663
}

.hero-proof-list {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:25px
}

.hero-proof-list span {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid rgba(79,31,105,.14);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:750;
  color:#4b4050
}

.hero-proof-list span:before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 3px rgba(217,255,85,.22)
}

.clean-workspace {
  position:relative;
  height:580px;
  max-width:610px;
  margin-left:auto;
  display:grid;
  place-items:center;
  overflow:visible
}

.clean-workspace>img {
  display:block;
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 32px rgba(44,23,53,.07));
  animation:workspaceEnter .9s cubic-bezier(.2,.72,.2,1) both
}

.workspace-label {
  position:absolute;
  z-index:2;
  width:210px;
  padding:13px 15px;
  border:1px solid rgba(79,31,105,.12);
  border-radius:13px;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 24px rgba(39,20,46,.055);
  backdrop-filter:blur(10px);
  animation:labelSettle .8s cubic-bezier(.2,.72,.2,1) both
}

.workspace-label small {
  display:block;
  margin-bottom:3px;
  color:var(--purple);
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase
}

.workspace-label strong {
  display:block;
  font-size:13px;
  line-height:1.3
}

.label-one {
  left:-6px;
  top:116px;
  animation-delay:.13s
}

.label-two {
  right:-8px;
  top:282px;
  animation-delay:.22s
}

.label-three {
  left:38px;
  bottom:65px;
  animation-delay:.31s
}

@keyframes workspaceEnter {
  from {
  opacity:0;
  transform:translateY(12px) scale(.985)
}

to {
  opacity:1;
  transform:none
}

}

@keyframes labelSettle {
  from {
  opacity:0;
  transform:translateY(10px)
}

to {
  opacity:1;
  transform:none
}

}

.clean-hero .hero-checks {
  opacity:.27;
  background-size:38px 38px;
  animation:none;
  mask-image:radial-gradient(ellipse at 75% 45%,#000 0%,rgba(0,0,0,.52) 40%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 75% 45%,#000 0%,rgba(0,0,0,.52) 40%,transparent 75%)
}

@media(max-width:1080px) {
  .clean-hero .hero-grid {
  grid-template-columns:minmax(0,1.05fr) minmax(370px,.95fr);
  gap:30px
}

.clean-hero h1 {
  font-size:clamp(46px,5.5vw,64px)
}

.clean-workspace {
  height:520px
}

.workspace-label {
  width:190px
}

}

@media(max-width:900px) {
  .clean-hero {
  min-height:auto;
  padding:126px 0 72px
}

.clean-hero .hero-grid {
  min-height:auto;
  grid-template-columns:1fr;
  gap:30px
}

.clean-hero .hero-copy {
  max-width:780px
}

.clean-hero h1 {
  max-width:760px
}

.clean-workspace {
  height:500px;
  max-width:590px;
  margin:0 auto
}

}

@media(max-width:620px) {
  .clean-hero {
  padding-bottom:54px
}

.clean-hero h1 {
  font-size:clamp(40px,11vw,52px);
  line-height:1.035
}

.clean-hero .hero-text {
  font-size:16px
}

.hero-proof-list {
  gap:7px
}

.hero-proof-list span {
  font-size:11px;
  padding:7px 9px
}

.clean-workspace {
  height:380px;
  max-width:390px
}

.workspace-label {
  width:162px;
  padding:10px 11px
}

.workspace-label strong {
  font-size:11.5px
}

.label-one {
  left:0;
  top:70px
}

.label-two {
  right:0;
  top:188px
}

.label-three {
  left:18px;
  bottom:38px
}

}

@media(prefers-reduced-motion:reduce) {
  .clean-workspace>img,.workspace-label {
  animation:none!important
}

}

/* Dedicated About page */
.about-more {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  color:var(--purple);
  font-weight:800;
  text-decoration:none
}

.about-more span {
  transition:transform .2s ease
}

.about-more:hover span,.about-more:focus-visible span {
  transform:translate(3px,-3px)
}

#nav a.active {
  color:var(--purple)
}

.about-hero {
  position:relative;
  overflow:hidden;
  padding:160px 0 110px;
  background:linear-gradient(135deg,#fff 15%,#f7f2fa 100%)
}

.about-grid-bg {
  position:absolute;
  inset:0;
  opacity:.28;
  background-image:linear-gradient(rgba(77,22,136,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(77,22,136,.06) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.45),transparent);
  -webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.45),transparent)
}

.about-hero-grid {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.4fr);
  gap:80px;
  align-items:center
}

.about-hero-copy {
  position:relative;
  z-index:1
}

.about-hero h1 {
  max-width:720px;
  margin:18px 0 26px;
  font-size:clamp(58px,7vw,96px);
  line-height:.97;
  letter-spacing:-.055em
}

.about-hero-lead {
  max-width:720px;
  font-size:clamp(20px,2vw,27px);
  line-height:1.45;
  color:var(--ink);
  margin-bottom:22px
}

.about-hero-copy>p:not(.kicker):not(.about-hero-lead) {
  max-width:690px;
  color:var(--muted);
  font-size:17px;
  line-height:1.75
}

.about-hero-tags {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px
}

.about-hero-tags span {
  padding:9px 13px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(45,28,53,.09);
  font-size:12px;
  font-weight:800;
  color:var(--ink)
}

.about-profile-card {
  position:relative;
  margin:0;
  padding:18px;
  background:#fff;
  border:1px solid rgba(45,28,53,.08);
  border-radius:30px;
  box-shadow:0 18px 60px rgba(45,28,53,.08);
  transform:rotate(1deg)
}

.about-profile-card:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:28px -22px -24px 30px;
  border-radius:30px;
  background:var(--purple)
}

.about-profile-card img {
  display:block;
  width:100%;
  aspect-ratio:1/1.08;
  object-fit:cover;
  object-position:center 18%;
  border-radius:22px;
  filter:grayscale(100%)
}

.about-profile-card figcaption {
  display:grid;
  gap:5px;
  padding:20px 8px 8px
}

.about-profile-card strong {
  font-size:22px
}

.about-profile-card span {
  color:var(--muted);
  font-size:13px
}

.about-value-section {
  background:#fff
}

.about-value-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:44px
}

.about-value-grid article {
  min-height:280px;
  padding:30px;
  border:1px solid rgba(45,28,53,.09);
  border-radius:24px;
  background:#fff;
  transition:transform .25s ease,border-color .25s ease
}

.about-value-grid article:hover {
  transform:translateY(-4px);
  border-color:rgba(77,22,136,.28)
}

.about-value-grid span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#d9ff55;
  color:#1e1523;
  font-size:12px;
  font-weight:900
}

.about-value-grid h3 {
  margin:42px 0 14px;
  font-size:26px
}

.about-value-grid p {
  margin:0;
  color:var(--muted);
  line-height:1.7
}

.about-practice-grid {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:80px;
  align-items:start
}

.about-practice-copy h2 {
  max-width:760px
}

.about-practice-copy>p {
  max-width:760px;
  color:var(--muted);
  line-height:1.8;
  font-size:17px
}

.about-practice-list {
  display:grid;
  gap:12px
}

.about-practice-list div {
  padding:24px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(45,28,53,.08)
}

.about-practice-list small {
  display:block;
  margin-bottom:9px;
  color:var(--purple);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.09em
}

.about-practice-list strong {
  font-size:17px;
  line-height:1.45
}

.personal-section {
  background:#fff
}

.interest-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-flow:dense;
  gap:18px;
  margin-top:46px
}

.interest-card {
  position:relative;
  overflow:hidden;
  min-height:390px;
  border-radius:24px;
  background:#201727
}

.interest-feature {
  grid-column:span 2;
  grid-row:span 2;
  min-height:798px
}

.interest-wide {
  grid-column:span 2
}

.interest-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
  opacity:.9
}

.interest-card:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(21,13,25,.86) 100%)
}

.interest-card div {
  position:absolute;
  z-index:2;
  left:24px;
  right:24px;
  bottom:22px;
  color:#fff
}

.interest-card h3 {
  margin:0 0 7px;
  font-size:23px
}

.interest-card p {
  margin:0;
  color:rgba(255,255,255,.8);
  font-size:14px;
  line-height:1.55
}

.interest-card:hover img {
  transform:scale(1.035)
}

@media(max-width:980px) {
  .about-hero-grid,.about-practice-grid {
  grid-template-columns:1fr;
  gap:52px
}

.about-profile-card {
  width:min(520px,82%);
  margin:auto
}

.about-value-grid {
  grid-template-columns:1fr 1fr
}

.interest-grid {
  grid-template-columns:repeat(2,1fr)
}

.interest-feature {
  grid-column:span 2;
  min-height:640px
}

}

@media(max-width:640px) {
  .about-hero {
  padding:125px 0 76px
}

.about-hero h1 {
  font-size:clamp(52px,16vw,70px)
}

.about-hero-lead {
  font-size:19px
}

.about-profile-card {
  width:calc(100% - 18px);
  padding:12px;
  border-radius:22px
}

.about-profile-card:before {
  inset:18px -10px -14px 20px;
  border-radius:22px
}

.about-profile-card img {
  border-radius:16px
}

.about-value-grid {
  grid-template-columns:1fr
}

.about-value-grid article {
  min-height:auto
}

.about-value-grid h3 {
  margin-top:28px
}

.interest-grid {
  grid-template-columns:1fr
}

.interest-card,.interest-feature,.interest-wide {
  grid-column:auto;
  grid-row:auto;
  min-height:390px
}

.interest-feature {
  min-height:520px
}

}

@media(prefers-reduced-motion:reduce) {
  .about-profile-card,.interest-card img,.about-value-grid article,.about-more span {
  transition:none!important;
  transform:none!important
}

}

/* About page refinements */
.about-profile-card {
  padding:0;
  background:#f5f1f7;
  border:1px solid rgba(45,28,53,.08);
  overflow:hidden;
  box-shadow:0 14px 40px rgba(45,28,53,0);
  transform:none;
  min-height:0
}

.about-profile-card:before {
  display:none!important
}

.about-profile-card img {
  width:100%;
  height:auto;
  aspect-ratio:549/558;
  object-fit:cover;
  object-position:center 16%;
  border-radius:0;
  filter:none;
  background:#f5f1f7
}

.about-profile-card figcaption {
  padding:22px 24px 24px;
  background:#fff
}

.interest-editorial-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:20px;
  margin-top:48px
}

.interest-editorial-card {
  grid-column:span 4;
  position:relative;
  overflow:hidden;
  min-height:420px;
  border-radius:24px;
  background:#201727;
  border:1px solid rgba(45,28,53,.08)
}

.interest-editorial-card.interest-editorial-lead {
  grid-column:span 7;
  min-height:570px
}

.interest-editorial-card.interest-editorial-wide {
  grid-column:span 5;
  min-height:570px
}

.interest-editorial-card img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  background:#eee8f0
}

.interest-editorial-card:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(24,16,29,.02) 35%,rgba(24,16,29,.88) 100%)
}

.interest-editorial-card>div {
  position:absolute;
  z-index:2;
  left:26px;
  right:26px;
  bottom:24px;
  color:#fff
}

.interest-editorial-card span {
  display:inline-block;
  margin-bottom:10px;
  color:#d9ff55;
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase
}

.interest-editorial-card h3 {
  margin:0 0 8px;
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.05
}

.interest-editorial-card p {
  margin:0;
  max-width:440px;
  color:rgba(255,255,255,.84);
  font-size:14px;
  line-height:1.55
}

.interest-editorial-card:hover img {
  transform:scale(1.025)
}

.about-page .contact {
  padding:110px 0 0
}

.about-page .contact .shell {
  width:min(100% - 48px,1180px)
}

.about-page .contact-card {
  background:var(--purple);
  color:#fff;
  border-radius:28px 28px 0 0;
  padding:76px 80px;
  margin:0
}

.about-page .contact-card .eyebrow {
  color:var(--lime)
}

.about-page .contact-card h2 {
  max-width:760px;
  margin:12px 0 18px
}

.about-page .contact-card>p {
  max-width:700px;
  color:#e4d7ed;
  font-size:18px;
  line-height:1.7
}

.about-page .contact-card .actions {
  margin-top:30px
}

@media(max-width:980px) {
  .interest-editorial-card,.interest-editorial-card.interest-editorial-lead,.interest-editorial-card.interest-editorial-wide {
  grid-column:span 6;
  min-height:440px
}

.about-page .contact-card {
  padding:62px 52px
}

}

@media(max-width:640px) {
  .interest-editorial-grid {
  grid-template-columns:1fr;
  gap:16px
}

.interest-editorial-card,.interest-editorial-card.interest-editorial-lead,.interest-editorial-card.interest-editorial-wide {
  grid-column:auto;
  min-height:420px
}

.about-page .contact {
  padding-top:80px
}

.about-page .contact .shell {
  width:min(100% - 28px,1180px)
}

.about-page .contact-card {
  padding:46px 24px;
  border-radius:22px 22px 0 0
}

.about-profile-card {
  width:100%
}

.about-profile-card img {
  object-position:center 14%
}

}

@media(prefers-reduced-motion:reduce) {
  .interest-editorial-card img {
  transition:none!important
}

}

/* Final alignment and navigation polish */
.quote-slider {
  max-width:980px;
  position:relative
}

.quote-slider blockquote {
  padding-right:0;
  margin-top:28px;
  min-height:260px
}

.quote-slider blockquote>p {
  max-width:900px;
  margin-right:0
}

.quote-controls {
  width:100%;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:18px;
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12)
}

.quote-controls>span {
  justify-self:center;
  display:flex;
  align-items:center;
  gap:8px
}

.quote-controls .prev {
  justify-self:start
}

.quote-controls .next {
  justify-self:end
}

.quote-controls button {
  position:static;
  flex:0 0 44px;
  display:grid;
  place-items:center
}

.clean-workspace {
  overflow:visible;
  display:grid;
  place-items:center
}

.clean-workspace img {
  width:min(100%,620px);
  height:auto;
  object-fit:contain;
  transform:none
}

.clean-workspace:before {
  content:"";
  position:absolute;
  width:min(78%,460px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 45% 38%,rgba(217,255,85,.18),rgba(107,34,170,.08) 44%,transparent 72%);
  z-index:-1
}

.interest-editorial-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  align-items:stretch
}

.interest-editorial-card,.interest-editorial-card.interest-editorial-lead,.interest-editorial-card.interest-editorial-wide {
  grid-column:span 1;
  min-height:430px;
  border-radius:22px
}

.interest-editorial-card img {
  object-position:center
}

.interest-editorial-card>div {
  left:24px;
  right:24px;
  bottom:22px
}

.back-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:46px;
  padding:11px 15px;
  border:1px solid rgba(91,36,133,.18);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  color:#4f1f69;
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  letter-spacing:.02em;
  transition:background .2s ease,border-color .2s ease,transform .2s ease
}

.back-link:hover {
  background:#fff;
  border-color:rgba(91,36,133,.38);
  transform:translateX(-2px)
}

.back-link:focus-visible {
  outline:3px solid #d9ff55;
  outline-offset:3px
}

.next-case {
  padding:24px 0 120px
}

.next-case .shell {
  max-width:1180px
}

.next-case a {
  grid-template-columns:minmax(0,1fr) 64px;
  gap:28px;
  align-items:center;
  padding:40px 44px;
  border:1px solid rgba(91,36,133,.12);
  background:linear-gradient(135deg,#f3edf5,#ebe2f0);
  box-shadow:0 14px 34px rgba(41,20,50,.06);
  text-decoration:none
}

.next-case a:hover {
  background:linear-gradient(135deg,#eee5f2,#e4d9eb);
  box-shadow:0 18px 42px rgba(41,20,50,.09)
}

.next-case span {
  align-self:end
}

.next-case strong {
  max-width:820px
}

.next-case i {
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#4f1f69;
  color:#fff;
  font-size:24px
}

.case-contact .outline-light {
  color:#fff!important;
  background:transparent!important;
  border-color:rgba(255,255,255,.55)!important
}

.case-contact .outline-light:hover {
  background:#fff!important;
  color:#271b2d!important;
  border-color:#fff!important
}

.case-contact .light-button {
  background:#d9ff55!important;
  color:#201727!important
}

.case-contact .light-button:hover {
  background:#e3ff79!important
}

@media(max-width:980px) {
  .interest-editorial-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.interest-editorial-card,.interest-editorial-card.interest-editorial-lead,.interest-editorial-card.interest-editorial-wide {
  grid-column:span 1;
  min-height:420px
}

.clean-workspace img {
  width:min(92%,560px)
}

}

@media(max-width:640px) {
  .quote-slider blockquote {
  min-height:330px
}

.quote-controls {
  grid-template-columns:42px 1fr 42px;
  gap:12px;
  margin-top:26px;
  padding-top:18px
}

.quote-controls button {
  width:42px;
  height:42px
}

.interest-editorial-grid {
  grid-template-columns:1fr;
  gap:16px
}

.interest-editorial-card,.interest-editorial-card.interest-editorial-lead,.interest-editorial-card.interest-editorial-wide {
  grid-column:auto;
  min-height:390px
}

.next-case {
  padding-bottom:78px
}

.next-case a {
  grid-template-columns:1fr 48px;
  padding:28px 24px;
  gap:18px
}

.next-case i {
  width:44px;
  height:44px;
  font-size:20px
}

.back-link {
  margin-bottom:34px
}

}

/* vNext refinement: testimonial spacing, two-column interests, evidence alignment, scroll-to-top */
.quote-slider {
  position:relative;
  padding-bottom:78px
}

.quote-controls {
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:0;
  z-index:3
}

.quote-controls button {
  position:static;
  flex:0 0 auto
}

.quote-controls>span {
  display:flex;
  align-items:center;
  gap:8px
}

.interest-editorial-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-top:48px
}

.interest-editorial-card,.interest-editorial-card.interest-editorial-lead,.interest-editorial-card.interest-editorial-wide {
  grid-column:auto;
  min-height:250px;
  display:grid;
  grid-template-columns:minmax(180px,42%) 1fr;
  overflow:hidden;
  border-radius:22px;
  background:#f6f2f7;
  border:1px solid rgba(45,28,53,.1)
}

.interest-editorial-card img {
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  min-height:250px;
  object-fit:cover;
  display:block;
  background:#eee8f0
}

.interest-editorial-card:after {
  display:none
}

.interest-editorial-card>div {
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  z-index:1;
  padding:30px 28px;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:center
}

.interest-editorial-card span {
  color:var(--purple);
  margin-bottom:10px
}

.interest-editorial-card h3 {
  font-size:clamp(24px,2vw,31px);
  margin:0 0 10px
}

.interest-editorial-card p {
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
  margin:0
}

.interest-editorial-card:hover img {
  transform:scale(1.02)
}

.evidence-heading {
  max-width:760px;
  margin:0 auto 52px;
  text-align:center
}

.evidence-heading .eyebrow {
  display:block;
  margin-bottom:12px
}

.evidence-heading h2 {
  max-width:720px;
  margin:0 auto 18px;
  line-height:1.08
}

.evidence-heading>p:last-child {
  max-width:650px;
  margin:0 auto;
  color:#cbbfd0;
  line-height:1.65
}

.scroll-top {
  position:fixed;
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--purple);
  color:#fff;
  box-shadow:0 14px 36px rgba(42,18,55,.22);
  cursor:pointer;
  z-index:80;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease,background .22s ease
}

.scroll-top.show {
  opacity:1;
  visibility:visible;
  transform:none
}

.scroll-top:hover {
  background:var(--purple2)
}

.scroll-top:focus-visible {
  outline:3px solid var(--lime);
  outline-offset:3px
}

.scroll-top svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round
}

@media(max-width:900px) {
  .interest-editorial-grid {
  grid-template-columns:1fr
}

.interest-editorial-card,.interest-editorial-card.interest-editorial-lead,.interest-editorial-card.interest-editorial-wide {
  grid-template-columns:minmax(170px,38%) 1fr;
  min-height:230px
}

.interest-editorial-card img {
  min-height:230px
}

}

@media(max-width:600px) {
  .quote-slider {
  padding-bottom:72px
}

.quote-controls {
  bottom:6px
}

.interest-editorial-card,.interest-editorial-card.interest-editorial-lead,.interest-editorial-card.interest-editorial-wide {
  grid-template-columns:1fr;
  min-height:auto
}

.interest-editorial-card img {
  height:230px;
  min-height:230px
}

.interest-editorial-card>div {
  padding:24px 22px 28px
}

.scroll-top {
  right:16px;
  bottom:16px;
  width:44px;
  height:44px
}

.evidence-heading {
  margin-bottom:38px;
  text-align:left
}

.evidence-heading h2,.evidence-heading>p:last-child {
  margin-left:0;
  margin-right:0
}

}

@media(prefers-reduced-motion:reduce) {
  .scroll-top {
  transition:none
}

.interest-editorial-card img {
  transition:none
}

}

/* Final alignment refinements */
.quote-slider {
  position:relative;
  padding-bottom:108px
}

.quote-slider blockquote>p {
  margin-bottom:0
}

.quote-controls {
  position:absolute!important;
  left:50%!important;
  bottom:0!important;
  transform:translateX(-50%)!important;
  margin:0!important;
  padding:0!important;
  border-top:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
  width:auto!important
}

.quote-controls>span {
  display:flex!important;
  align-items:center!important;
  gap:8px!important
}

.evidence-heading {
  max-width:860px;
  margin:0 auto 54px 0;
  text-align:left!important
}

.evidence-heading .eyebrow,.evidence-heading h2,.evidence-heading>p {
  text-align:left!important;
  margin-left:0!important;
  margin-right:0!important
}

.evidence-heading h2 {
  max-width:760px;
  line-height:1.08;
  margin-top:12px;
  margin-bottom:18px
}

.evidence-heading>p {
  max-width:700px;
  line-height:1.65
}

@media(max-width:600px) {
  .quote-slider {
  padding-bottom:100px
}

.quote-controls {
  gap:14px!important
}

.evidence-heading {
  margin-bottom:40px
}

}

/* Final alignment override: testimonial controls and 50/50 evidence heading */
.quote-slider {
  position:relative;
  display:flex;
  flex-direction:column;
}

.quote-slider blockquote {
  position:relative;
  min-height:0;
  padding-right:0;
  margin:28px 0 0;
}

.quote-slider blockquote>p {
  margin-bottom:0;
}

.quote-controls {
  position:static!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  order:10;
  width:100%!important;
  display:grid!important;
  grid-template-columns:44px 1fr 44px!important;
  align-items:center!important;
  gap:18px!important;
  margin:64px 0 0!important;
  padding:22px 0 0!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
}

.quote-controls .prev {
  justify-self:start
}

.quote-controls .next {
  justify-self:end
}

.quote-controls>span {
  justify-self:center;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}

.evidence-heading {
  max-width:none;
  margin:0 0 56px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:64px;
  row-gap:12px;
  align-items:start;
  text-align:left!important;
}

.evidence-heading .eyebrow {
  grid-column:1;
  margin:0 0 10px!important;
  text-align:left!important;
}

.evidence-heading h2 {
  grid-column:1;
  margin:0!important;
  max-width:620px;
  text-align:left!important;
  line-height:1.06;
}

.evidence-heading>p:last-child {
  grid-column:2;
  grid-row:1 / span 2;
  align-self:end;
  max-width:560px;
  margin:0!important;
  text-align:left!important;
  line-height:1.7;
}

@media(max-width:760px) {
  .quote-controls {
  grid-template-columns:42px 1fr 42px!important;
  gap:12px!important;
  margin-top:48px!important;
  padding-top:18px!important;
}

.quote-controls button {
  width:42px;
  height:42px
}

.evidence-heading {
  grid-template-columns:1fr;
  gap:14px;
  margin-bottom:40px;
}

.evidence-heading .eyebrow,
  .evidence-heading h2,
  .evidence-heading>p:last-child {
  grid-column:1;
  grid-row:auto;
  max-width:none;
}

}

/* Final refinement — content-fit testimonials and clearer project CTAs */
.testimonials .shell {
  display:flex;
  flex-direction:column;
}

.quote-slider {
  max-width:980px;
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
  padding-bottom:0!important;
}

.quote-slider blockquote {
  min-height:0!important;
  height:auto!important;
  margin:28px 0 0!important;
  padding:0!important;
}

.quote-slider blockquote.active {
  display:block;
}

.quote-slider blockquote>p {
  max-width:900px;
  margin:0!important;
}

.quote-slider blockquote footer {
  margin-top:28px;
}

.quote-controls {
  position:static!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:min(100%,900px)!important;
  margin:64px 0 0!important;
  padding:22px 0 0!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
}

.case-link {
  display:inline-flex!important;
  align-items:center;
  justify-content:flex-start!important;
  gap:12px;
  width:max-content;
  max-width:100%;
  margin-top:24px!important;
  padding:12px 16px!important;
  border:1px solid rgba(77,22,136,.22)!important;
  border-radius:999px;
  background:rgba(239,229,251,.65);
  color:var(--purple);
  font-size:13px;
  line-height:1;
  text-decoration:none;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease;
}

.case-link span {
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
  transition:transform .2s ease,background .2s ease;
}

.case-link:hover,
.case-link:focus-visible {
  background:var(--purple);
  border-color:var(--purple)!important;
  color:#fff;
  transform:translateY(-2px);
  outline:none;
}

.case-link:hover span,
.case-link:focus-visible span {
  background:var(--lime);
  color:var(--ink);
  transform:translate(2px,-2px);
}

@media(max-width:600px) {
  .quote-slider blockquote>p {
  font-size:29px
}

.quote-controls {
  width:100%!important;
  margin-top:48px!important;
}

.case-link {
  width:100%;
  justify-content:space-between!important
}

}

/* Editorial testimonial refinement */
.testimonials {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 18%,rgba(108,34,170,.24),transparent 32%),
    #18121d;
}

.testimonials:before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.65) 42%,transparent);
}

.testimonials .shell {
  position:relative;
  z-index:1;
  display:grid!important;
  grid-template-columns:minmax(150px,220px) minmax(0,1fr);
  column-gap:clamp(48px,7vw,100px);
  align-items:start;
}

.testimonials .eyebrow {
  margin:12px 0 0;
  padding-top:14px;
  border-top:2px solid var(--lime);
  width:max-content;
}

.quote-slider {
  position:relative;
  width:100%;
  max-width:none!important;
  padding:0 0 0 52px!important;
}

.quote-slider:before {
  content:"“";
  position:absolute;
  left:0;
  top:-22px;
  color:var(--lime);
  font-family:Georgia,serif;
  font-size:92px;
  line-height:1;
  opacity:.95;
}

.quote-slider blockquote {
  width:100%;
  margin:0!important;
}

.quote-slider blockquote>p {
  max-width:920px!important;
  font-size:clamp(31px,3.5vw,48px)!important;
  line-height:1.18!important;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.quote-slider blockquote footer {
  margin-top:32px!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr);
  gap:16px!important;
  align-items:center!important;
  max-width:620px;
}

.quote-slider footer b {
  width:48px!important;
  height:48px!important;
  border:1px solid rgba(217,255,85,.28);
  background:rgba(108,34,170,.55)!important;
}

.quote-slider footer span {
  display:block;
  color:#d4c9d7;
  font-size:14px;
  line-height:1.5;
}

.quote-controls {
  width:min(100%,920px)!important;
  margin:48px 0 0!important;
  padding-top:20px!important;
  display:grid!important;
  grid-template-columns:44px 1fr 44px!important;
  gap:18px!important;
  align-items:center!important;
  border-top:1px solid rgba(255,255,255,.14)!important;
}

.quote-controls .prev {
  justify-self:start
}

.quote-controls .next {
  justify-self:end
}

.quote-controls>span {
  justify-self:center!important
}

.quote-controls button {
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.quote-controls button:hover {
  background:rgba(217,255,85,.1);
  border-color:var(--lime);
  transform:translateY(-2px);
}

.quote-controls button:focus-visible {
  outline:3px solid var(--lime);
  outline-offset:3px;
}

.quote-controls i {
  width:24px!important;
  height:3px!important;
  border-radius:999px;
  background:#65596a!important;
}

.quote-controls i.active {
  width:38px!important;
  transform:none!important;
  background:var(--lime)!important;
}

@media(max-width:800px) {
  .testimonials .shell {
  grid-template-columns:1fr!important;
  row-gap:34px;
}

.testimonials .eyebrow {
  margin-top:0
}

.quote-slider {
  padding-left:38px!important
}

.quote-slider:before {
  font-size:70px;
  top:-16px
}

.quote-slider blockquote>p {
  font-size:clamp(28px,7vw,38px)!important
}

.quote-controls {
  margin-top:40px!important
}

}

@media(max-width:520px) {
  .quote-slider {
  padding-left:28px!important
}

.quote-slider:before {
  left:-5px;
  font-size:58px
}

.quote-slider blockquote footer {
  grid-template-columns:44px 1fr
}

.quote-slider footer b {
  width:44px!important;
  height:44px!important
}

.quote-controls {
  grid-template-columns:42px 1fr 42px!important;
  gap:12px!important
}

}

/* Final content-fit testimonial spacing */
.testimonials {
  padding-top:72px!important;
  padding-bottom:64px!important
}

.testimonials .shell {
  align-items:start!important
}

.quote-slider blockquote footer {
  margin-top:24px!important
}

.quote-controls {
  margin-top:24px!important;
  padding-top:20px!important
}

@media(max-width:800px) {
  .testimonials {
  padding-top:64px!important;
  padding-bottom:56px!important
}

.quote-controls {
  margin-top:24px!important
}

}

/* Editorial measurable outcomes */
.case-results {
  padding:92px 0;
  background:linear-gradient(180deg,#fff 0%,#faf8fc 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.case-results .shell {
  display:grid;
  grid-template-columns:minmax(180px,.34fr) minmax(0,1fr);
  gap:clamp(36px,7vw,96px);
  align-items:start
}

.case-results .results-intro {
  position:sticky;
  top:110px
}

.case-results .results-intro .eyebrow {
  margin-bottom:14px
}

.case-results .results-intro h2 {
  font-size:clamp(34px,4vw,54px);
  line-height:1.05;
  letter-spacing:-.035em;
  margin:0 0 18px
}

.case-results .results-intro p {
  color:var(--muted);
  font-size:16px;
  line-height:1.65;
  max-width:360px;
  margin:0
}

.case-stat-grid {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  border-top:1px solid var(--line)
}

.case-stat-grid li {
  min-height:190px;
  padding:34px 28px 32px!important;
  border-bottom:1px solid var(--line);
  display:flex!important;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start!important;
  gap:22px!important
}

.case-stat-grid li:nth-child(odd) {
  border-right:1px solid var(--line)
}

.case-stat-grid strong {
  font-size:clamp(48px,6vw,76px)!important;
  line-height:.95;
  letter-spacing:-.05em;
  color:var(--purple)
}

.case-stat-grid span {
  font-size:16px!important;
  line-height:1.45;
  color:var(--ink);
  max-width:260px
}

@media(max-width:820px) {
  .case-results {
  padding:72px 0
}

.case-results .shell {
  grid-template-columns:1fr;
  gap:34px
}

.case-results .results-intro {
  position:static
}

}

@media(max-width:560px) {
  .case-stat-grid {
  grid-template-columns:1fr!important
}

.case-stat-grid li:nth-child(odd) {
  border-right:0
}

.case-stat-grid li {
  min-height:150px;
  padding:28px 10px!important
}

}

/* E-commerce emotional journey */
.journey-section {
  padding:110px 0;
  background:#fff
}

.journey-heading {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:60px;
  align-items:end;
  margin-bottom:46px
}

.journey-heading h2 {
  margin:0;
  font-size:clamp(38px,5vw,66px);
  line-height:1.04;
  letter-spacing:-.04em
}

.journey-heading p {
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  max-width:680px
}

.journey-figure {
  margin:0;
  background:#f8f5fb;
  border:1px solid #e5ddeb;
  border-radius:26px;
  padding:clamp(16px,3vw,34px)
}

.journey-figure img {
  display:block;
  width:100%;
  height:auto;
  border-radius:18px
}

.journey-figure figcaption {
  margin-top:18px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  max-width:920px
}

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

.journey-heading {
  grid-template-columns:1fr;
  gap:18px;
  margin-bottom:30px
}

.journey-figure {
  padding:12px;
  border-radius:20px;
  overflow-x:auto
}

.journey-figure img {
  min-width:760px
}

}

/* Final compact testimonial fit */
.testimonials {
  padding-top:52px!important;
  padding-bottom:44px!important;
}

.testimonials .shell {
  align-items:start!important;
  row-gap:0!important;
}

.quote-slider {
  min-height:0!important;
  height:auto!important;
  padding-bottom:0!important;
}

.quote-slider blockquote {
  min-height:0!important;
  height:auto!important;
  margin:0!important;
}

.quote-slider blockquote>p {
  margin:0!important;
}

.quote-slider blockquote footer {
  margin-top:20px!important;
}

.quote-controls {
  position:static!important;
  transform:none!important;
  margin-top:18px!important;
  padding-top:16px!important;
  width:min(100%,920px)!important;
}

@media(max-width:800px) {
  .testimonials {
  padding-top:44px!important;
  padding-bottom:38px!important;
}

.testimonials .shell {
  row-gap:22px!important
}

.quote-controls {
  margin-top:16px!important;
  padding-top:14px!important
}

}

/* Final testimonial component — content-driven, no overlapping rules */
.testimonials.section {
  padding-block:clamp(72px,8vw,112px);
  background:
    radial-gradient(circle at 84% 18%,rgba(77,22,136,.075),transparent 30%),
    var(--paper);
}

.testimonial-layout {
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
  gap:clamp(48px,7vw,96px);
  align-items:start;
}

.testimonial-intro {
  max-width:360px
}

.testimonial-intro h2 {
  margin:12px 0 18px;
  font-size:clamp(32px,3.4vw,48px);
  line-height:1.06;
  letter-spacing:-.035em;
}

.testimonial-intro>p:last-child {
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.quote-slider.testimonial-panel {
  position:relative!important;
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
  padding:clamp(28px,3.5vw,44px);
  border:1px solid rgba(77,22,136,.12);
  border-radius:24px;
  background:rgba(255,255,255,.72);
  box-shadow:0 14px 38px rgba(55,25,72,.06);
}

.testimonial-quotes {
  position:relative
}

.quote-slider.testimonial-panel blockquote {
  position:static!important;
  inset:auto!important;
  width:auto!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  max-height:0!important;
  overflow:hidden!important;
  transform:translateY(10px)!important;
  transition:opacity .35s ease,transform .35s ease,max-height .45s ease,visibility 0s linear .45s!important;
}

.quote-slider.testimonial-panel blockquote.active {
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  max-height:560px!important;
  transform:translateY(0)!important;
  transition:opacity .4s ease,transform .4s ease,max-height .5s ease!important;
}

.quote-slider.testimonial-panel blockquote>p {
  margin:0;
  max-width:820px;
  font-size:clamp(23px,2.5vw,34px);
  line-height:1.35;
  letter-spacing:-.022em;
  color:var(--ink);
  text-wrap:balance;
}

.quote-slider.testimonial-panel blockquote footer {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:28px;
}

.quote-slider.testimonial-panel blockquote footer>b {
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
  font-size:12px;
  letter-spacing:.04em;
}

.quote-slider.testimonial-panel blockquote footer span {
  display:grid;
  gap:3px
}

.quote-slider.testimonial-panel blockquote footer strong {
  font-size:14px;
  line-height:1.35;
  color:var(--ink)
}

.quote-slider.testimonial-panel blockquote footer small {
  font-size:13px;
  color:var(--muted)
}

.quote-slider.testimonial-panel .quote-controls {
  position:static!important;
  inset:auto!important;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:28px!important;
  padding-top:20px!important;
  border-top:1px solid rgba(77,22,136,.12);
}

.quote-controls button {
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(77,22,136,.18);
  background:#fff;
  color:var(--purple);
  font-size:18px;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}

.quote-controls button:hover {
  background:var(--purple);
  color:#fff;
  border-color:var(--purple);
  transform:translateY(-1px)
}

.quote-controls button:focus-visible {
  outline:3px solid #d9ff55;
  outline-offset:3px
}

.quote-dots {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px
}

.quote-dots i {
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(77,22,136,.22);
  transition:width .25s ease,background .25s ease
}

.quote-dots i.active {
  width:22px;
  border-radius:999px;
  background:var(--purple)
}

@media(max-width:820px) {
  .testimonial-layout {
  grid-template-columns:1fr;
  gap:30px
}

.testimonial-intro {
  max-width:620px
}

}

@media(max-width:600px) {
  .testimonials.section {
  padding-block:64px
}

.quote-slider.testimonial-panel {
  padding:24px 20px;
  border-radius:20px
}

.quote-slider.testimonial-panel blockquote>p {
  font-size:22px;
  line-height:1.4
}

.quote-slider.testimonial-panel blockquote footer {
  margin-top:22px
}

.quote-slider.testimonial-panel .quote-controls {
  margin-top:22px!important;
  padding-top:18px!important
}

}

@media(prefers-reduced-motion:reduce) {
  .quote-slider.testimonial-panel blockquote {
  transition:none!important;
  transform:none!important
}

.quote-controls button {
  transition:none!important
}

}

/* Testimonial alignment reset — simple, stable editorial layout */
.testimonials.section {
  padding-block:clamp(64px,7vw,88px)!important;
}

.testimonial-layout {
  display:block!important;
}

.testimonial-intro {
  max-width:720px!important;
  margin:0 0 clamp(28px,4vw,40px)!important;
}

.testimonial-intro h2 {
  max-width:620px;
  margin:10px 0 14px!important;
}

.testimonial-intro>p:last-child {
  max-width:620px;
}

.quote-slider.testimonial-panel {
  width:100%;
  max-width:none!important;
  display:block!important;
  padding:clamp(28px,4vw,48px)!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 10px 30px rgba(55,25,72,.055)!important;
}

.testimonial-quotes {
  position:relative!important;
  width:100%;
}

.quote-slider.testimonial-panel blockquote {
  display:none!important;
  position:static!important;
  width:100%!important;
  max-height:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  visibility:hidden!important;
  overflow:visible!important;
  transform:none!important;
  transition:none!important;
}

.quote-slider.testimonial-panel blockquote.active {
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  max-height:none!important;
}

.quote-slider.testimonial-panel blockquote>p {
  max-width:900px!important;
  margin:0!important;
  font-size:clamp(23px,2.35vw,33px)!important;
  line-height:1.38!important;
  text-wrap:pretty!important;
}

.quote-slider.testimonial-panel blockquote footer {
  margin-top:24px!important;
}

.quote-slider.testimonial-panel .quote-controls {
  position:static!important;
  width:100%;
  margin-top:24px!important;
  padding-top:18px!important;
  display:grid!important;
  grid-template-columns:44px 1fr 44px!important;
  align-items:center!important;
  gap:16px!important;
  border-top:1px solid rgba(77,22,136,.11)!important;
}

.quote-slider.testimonial-panel .quote-controls .quote-dots {
  justify-self:center!important;
}

.quote-slider.testimonial-panel .quote-controls .prev {
  justify-self:start!important
}

.quote-slider.testimonial-panel .quote-controls .next {
  justify-self:end!important
}

@media(max-width:700px) {
  .testimonials.section {
  padding-block:56px!important
}

.testimonial-intro {
  margin-bottom:24px!important
}

.quote-slider.testimonial-panel {
  padding:24px 20px!important;
  border-radius:20px!important
}

.quote-slider.testimonial-panel blockquote>p {
  font-size:22px!important;
  line-height:1.42!important
}

.quote-slider.testimonial-panel blockquote footer {
  margin-top:20px!important
}

.quote-slider.testimonial-panel .quote-controls {
  margin-top:20px!important;
  padding-top:16px!important
}

}

.quote-slider.testimonial-panel {
  transition:opacity .18s ease,transform .18s ease
}

.quote-slider.testimonial-panel.is-changing {
  opacity:.55;
  transform:translateY(3px)
}

@media(prefers-reduced-motion:reduce) {
  .quote-slider.testimonial-panel {
  transition:none!important
}

.quote-slider.testimonial-panel.is-changing {
  opacity:1!important;
  transform:none!important
}

}

/* Clean testimonial component */
.voices-section {
  padding:88px 0;
  background:linear-gradient(180deg,#faf8fc 0%,#f3edf8 100%);
  border-top:1px solid rgba(77,22,136,.08);
  border-bottom:1px solid rgba(77,22,136,.08);
}

.voices-wrap {
  display:grid;
  gap:34px
}

.voices-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:48px;
  align-items:end;
}

.voices-head h2 {
  margin:10px 0 0;
  max-width:760px;
  font-size:clamp(36px,4.6vw,60px);
  line-height:1.04;
  letter-spacing:-.045em;
}

.voices-head>p {
  margin:0 0 6px;
  color:var(--muted);
  font-size:17px;
  line-height:1.6;
}

.voices-card {
  position:relative;
  max-width:980px;
  padding:42px 48px 28px;
  background:#fff;
  border:1px solid rgba(77,22,136,.14);
  border-radius:24px;
  box-shadow:0 12px 32px rgba(41,16,57,.07);
}

.voices-card:before {
  content:'“';
  position:absolute;
  top:18px;
  right:34px;
  font-size:88px;
  line-height:1;
  /* color:rgba(77,22,136,.10); */
  color: var(--v4-accent) !important;
  font-family:Georgia,serif;
  pointer-events:none;
}

.voices-track {
  position:relative
}

.voice-item {
  display:none;
  margin:0;
  padding:0;
  max-width:820px
}

.voice-item.active {
  display:block;
  animation:voiceIn .28s ease both
}

.voice-item>p {
  margin:0;
  max-width:800px;
  font-size:clamp(24px,3vw,36px);
  line-height:1.32;
  letter-spacing:-.025em;
  color:var(--ink);
}

.voice-item footer {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:28px;
}

.voice-avatar {
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:var(--purple);
  color:#fff;
  font-size:13px;
  font-weight:800;
}

.voice-item footer>span:last-child {
  display:grid;
  gap:2px
}

.voice-item footer strong {
  font-size:14px;
  line-height:1.35
}

.voice-item footer small {
  font-size:13px;
  color:var(--muted)
}

.voices-controls {
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:14px;
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.voices-controls button {
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-size:20px;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}

.voices-controls button:hover {
  background:var(--purple);
  color:#fff;
  border-color:var(--purple);
  transform:translateY(-1px)
}

.voices-controls button:focus-visible {
  outline:3px solid var(--lime);
  outline-offset:3px
}

.voices-prev {
  justify-self:start
}

.voices-next {
  justify-self:end
}

.voices-dots {
  justify-self:center;
  display:flex;
  gap:8px
}

.voices-dots i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#c8becd;
  transition:width .2s ease,background .2s ease
}

.voices-dots i.active {
  width:22px;
  border-radius:99px;
  background:var(--purple)
}

@keyframes voiceIn {
  from {
  opacity:0;
  transform:translateY(6px)
}

to {
  opacity:1;
  transform:none
}

}

@media(max-width:800px) {
  .voices-section {
  padding:64px 0
}

.voices-head {
  grid-template-columns:1fr;
  gap:18px
}

.voices-head>p {
  max-width:620px
}

.voices-card {
  max-width:none;
  padding:30px 24px 22px
}

.voices-card:before {
  font-size:64px;
  top:12px;
  right:20px
}

.voice-item>p {
  font-size:clamp(22px,6vw,30px)
}

}

@media(max-width:520px) {
  .voices-section {
  padding:52px 0
}

.voices-wrap {
  gap:26px
}

.voices-card {
  padding:26px 18px 18px;
  border-radius:18px
}

.voice-item footer {
  align-items:flex-start;
  margin-top:22px
}

.voices-controls {
  margin-top:20px;
  padding-top:14px;
  grid-template-columns:40px 1fr 40px
}

.voices-controls button {
  width:40px;
  height:40px
}

}

@media(prefers-reduced-motion:reduce) {
  .voice-item.active {
  animation:none
}

.voices-controls button {
  transition:none
}

}

/* Final portfolio polish */
.ways {
  background:#fff
}

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

.way {
  position:relative;
  padding:30px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg,#fff 0%,#fbf9ff 100%);
  min-height:210px;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease
}

.way:hover {
  transform:translateY(-3px);
  border-color:rgba(77,22,136,.24);
  box-shadow:0 14px 34px rgba(31,20,44,.07)
}

.way span {
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--lime);
  color:#21152b;
  font-size:12px;
  font-weight:800;
  margin-bottom:28px
}

.way h3 {
  margin:0 0 12px;
  font-size:clamp(21px,2vw,27px);
  line-height:1.16;
  letter-spacing:-.02em
}

.way p {
  margin:0;
  color:var(--muted);
  line-height:1.65;
  max-width:34ch
}

.case-read-time {
  display:inline-flex;
  align-items:center;
  margin-left:auto;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em
}

.case-topbar .shell {
  display:flex;
  align-items:center;
  gap:14px
}

.case-senior-evidence article:last-child h3 {
  max-width:22ch
}

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

}

@media(max-width:620px) {
  .ways-grid {
  grid-template-columns:1fr
}

.way {
  min-height:0;
  padding:24px
}

.case-read-time {
  margin-left:0
}

}

@media(prefers-reduced-motion:reduce) {
  .way {
  transition:none
}

.way:hover {
  transform:none
}

}

/* Password-protected case studies */
.password-page {
  min-height:100vh;
  background:var(--surface,#f7f5ff);
  color:var(--ink,#17151e)
}

.password-main {
  min-height:calc(100vh - 82px);
  display:grid;
  place-items:center;
  padding:clamp(48px,8vw,96px) 20px
}

.password-shell {
  width:min(1080px,100%);
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(360px,1fr);
  align-items:center;
  gap:clamp(40px,7vw,96px)
}

.password-card {
  max-width:570px;
  padding:clamp(32px,5vw,56px);
  background:#fff;
  border:1px solid rgba(35,25,65,.1);
  border-radius:28px;
  box-shadow:0 24px 70px rgba(48,31,89,.1)
}

.password-card h1 {
  font-size:clamp(2.25rem,4.4vw,4.25rem);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:12px 0 20px
}

.password-card>p:not(.eyebrow) {
  font-size:1.08rem;
  line-height:1.7;
  color:#555064;
  max-width:48ch;
  margin-bottom:30px
}

.password-card label {
  display:block;
  font-weight:700;
  margin-bottom:10px
}

.password-field {
  display:flex;
  align-items:center;
  background:#faf9ff;
  border:1px solid rgba(35,25,65,.18);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .2s,box-shadow .2s
}

.password-field:focus-within {
  border-color:#6846c7;
  box-shadow:0 0 0 4px rgba(104,70,199,.14)
}

.password-field input {
  width:100%;
  min-width:0;
  border:0;
  background:transparent;
  padding:15px 16px;
  font:inherit;
  color:inherit;
  outline:0
}

.password-field button {
  border:0;
  background:transparent;
  color:#5e3db9;
  font-weight:750;
  padding:15px 16px;
  cursor:pointer
}

.password-submit {
  width:100%;
  justify-content:center;
  margin-top:18px;
  background:#2d175d;
  color:#fff;
  border-color:#2d175d
}

.password-submit:hover {
  background:#43217f;
  color:#fff
}

.password-message {
  min-height:24px;
  margin:10px 0 0;
  font-size:.93rem;
  color:#33745a
}

.password-message.is-error {
  color:#9b2f3e
}

.password-back {
  display:inline-flex;
  margin-top:24px;
  color:#554c66;
  font-weight:700;
  text-decoration:none
}

.password-back:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.password-visual {
  position:relative;
  aspect-ratio:1/1;
  max-width:470px;
  width:100%;
  margin:auto;
  border-radius:50%;
  background:radial-gradient(circle at 38% 30%,rgba(217,255,85,.42),transparent 25%),radial-gradient(circle at 60% 56%,rgba(111,77,205,.22),transparent 58%)
}

.password-grid {
  position:absolute;
  inset:8%;
  border-radius:50%;
  background-image:linear-gradient(rgba(91,62,169,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(91,62,169,.09) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle,#000 52%,transparent 78%)
}

.password-lock {
  position:absolute;
  left:50%;
  top:50%;
  width:144px;
  height:116px;
  transform:translate(-50%,-38%);
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(63,37,127,.12);
  box-shadow:0 24px 70px rgba(58,34,118,.13)
}

.password-lock:before {
  content:"";
  position:absolute;
  width:70px;
  height:68px;
  left:50%;
  top:-48px;
  transform:translateX(-50%);
  border:14px solid #5c3bb4;
  border-bottom:0;
  border-radius:38px 38px 0 0
}

.password-lock span {
  position:absolute;
  left:50%;
  top:43%;
  width:16px;
  height:34px;
  transform:translate(-50%,-50%);
  border-radius:10px;
  background:#d9ff55;
  box-shadow:0 0 0 7px rgba(217,255,85,.22)
}

.password-node {
  position:absolute;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#d9ff55;
  box-shadow:0 0 0 7px rgba(217,255,85,.2)
}

.node-one {
  left:19%;
  top:30%
}

.node-two {
  right:17%;
  bottom:27%
}

.password-line {
  position:absolute;
  left:21%;
  right:19%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(83,54,164,.4),transparent);
  transform:rotate(-18deg)
}

@media(max-width:780px) {
  .password-shell {
  grid-template-columns:1fr
}

.password-visual {
  max-width:280px
}

.password-card {
  max-width:none
}

.password-main {
  padding-top:34px
}

.password-card h1 {
  font-size:clamp(2.2rem,11vw,3.4rem)
}

}

@media(prefers-reduced-motion:no-preference) {
  .password-lock {
  animation:passwordFloat 5s ease-in-out infinite
}

@keyframes passwordFloat {
  50% {
  transform:translate(-50%,-43%)
}

}

}

/* Minimal centred password gate + page slide transitions */
.password-page {
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(101,67,190,.10),transparent 34%),
    var(--surface,#f7f5ff);
}

.password-main {
  min-height:100svh!important;
  display:grid!important;
  place-items:center!important;
  padding:32px 20px!important;
}

.password-shell {
  width:min(520px,100%)!important;
  display:block!important;
}

.password-card {
  width:100%;
  max-width:none!important;
  padding:clamp(30px,6vw,48px)!important;
  border-radius:24px!important;
  box-shadow:0 18px 50px rgba(48,31,89,.08)!important;
  text-align:left;
}

.password-brand {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  margin-bottom:30px;
  border-radius:50%;
  background:var(--purple,#4d1688);
  color:#fff;
  font-weight:850;
  text-decoration:none;
}

.password-card h1 {
  margin:10px 0 16px!important;
  font-size:clamp(2.15rem,6vw,3.45rem)!important;
  line-height:1.02!important;
}

.password-card>p:not(.eyebrow) {
  margin-bottom:26px!important;
  font-size:1rem!important;
  line-height:1.65!important;
}

.password-visual {
  display:none!important
}

.gate-enter {
  animation:gateSlideIn .46s cubic-bezier(.22,.8,.22,1) both
}

.gate-exit {
  animation:gateSlideOut .42s cubic-bezier(.55,.08,.68,.53) both;
  pointer-events:none
}

.case-page {
  animation:caseSlideIn .48s cubic-bezier(.22,.8,.22,1) both
}

.page-slide-out {
  animation:pageSlideOut .38s cubic-bezier(.55,.08,.68,.53) both;
  pointer-events:none
}

@keyframes gateSlideIn {
  from {
  opacity:0;
  transform:translateY(42px)
}

to {
  opacity:1;
  transform:none
}

}

@keyframes gateSlideOut {
  to {
  opacity:0;
  transform:translateY(-100vh)
}

}

@keyframes caseSlideIn {
  from {
  opacity:0;
  transform:translateY(34px)
}

to {
  opacity:1;
  transform:none
}

}

@keyframes pageSlideOut {
  to {
  opacity:0;
  transform:translateY(-100vh)
}

}

@media(max-width:520px) {
  .password-main {
  padding:24px 16px!important
}

.password-card {
  padding:28px 22px!important;
  border-radius:20px!important
}

.password-brand {
  margin-bottom:24px
}

}

@media(prefers-reduced-motion:reduce) {
  .gate-enter,.gate-exit,.case-page,.page-slide-out {
  animation:none!important
}

}

/* Global case-study password overlay */
body.gate-open {
  overflow:hidden
}

.case-gate[hidden] {
  display:none
}

.case-gate {
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:end center;
  isolation:isolate
}

.case-gate-backdrop {
  position:absolute;
  inset:0;
  background:rgba(20,16,34,.46);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .28s ease
}

.case-gate-panel {
  position:relative;
  z-index:1;
  width:min(520px,calc(100% - 32px));
  margin-bottom:clamp(24px,8vh,72px);
  padding:20px 0 4px;
  color:#fff;
  transform:translateY(120%);
  opacity:0;
  transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .25s ease
}

.case-gate.is-open .case-gate-backdrop {
  opacity:1
}

.case-gate.is-open .case-gate-panel {
  transform:translateY(0);
  opacity:1
}

.case-gate.is-leaving .case-gate-backdrop {
  opacity:0
}

.case-gate.is-leaving .case-gate-panel {
  transform:translateY(-115%);
  opacity:0
}

.case-gate-panel .eyebrow {
  color:#d9ff55;
  margin:0 0 8px
}

.case-gate-panel h2 {
  margin:0 0 22px;
  font-size:clamp(2rem,5vw,3.6rem);
  line-height:1;
  letter-spacing:-.045em;
  color:#fff
}

.case-gate-close {
  position:absolute;
  right:0;
  top:0;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:1.55rem;
  line-height:1;
  cursor:pointer
}

.case-gate-field {
  display:flex;
  align-items:center;
  border-bottom:1px solid #d9ff55;
  background:transparent;
  box-shadow:none
}

.case-gate-field input {
  width:100%;
  min-width:0;
  padding:15px 0;
  border:0;
  background:transparent;
  color:#fff;
  font:inherit;
  font-size:1.08rem;
  outline:0
}

.case-gate-field input::placeholder {
  color:rgba(255,255,255,.64)
}

.case-gate-field:focus-within {
  border:0;
  box-shadow:none
}

.case-gate-toggle {
  border:0;
  background:transparent;
  color:#fff;
  font-weight:700;
  padding:12px 0 12px 16px;
  cursor:pointer
}

.case-gate-message {
  min-height:22px;
  margin:10px 0 8px;
  color:#ffd4dc;
  font-size:.92rem
}

.case-gate-submit {
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:0;
  border-radius:999px;
  background:#d9ff55;
  color:#211736;
  font:800 1rem/1 inherit;
  padding:13px 20px;
  cursor:pointer
}

.case-gate-submit:hover {
  transform:translateY(-1px)
}

.case-gate-panel.shake {
  animation:gateShake .34s ease
}

@keyframes gateShake {
  20%,60% {
  transform:translateX(-8px)
}

40%,80% {
  transform:translateX(8px)
}

}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

@media(max-width:640px) {
  .case-gate {
  place-items:center
}

.case-gate-panel {
  margin:0;
  width:calc(100% - 40px)
}

.case-gate-close {
  top:-54px
}

}

@media(prefers-reduced-motion:reduce) {
  .case-gate-backdrop,.case-gate-panel {
  transition:none!important
}

.case-gate-panel.shake {
  animation:none!important
}

}

/* Final About page editorial interests */
.interest-story-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:48px
}

.interest-story {
  display:grid;
  grid-template-columns:minmax(180px,42%) 1fr;
  min-height:260px;
  overflow:hidden;
  border:1px solid rgba(45,28,53,.10);
  border-radius:24px;
  background:#f7f4f8;
  transition:transform .25s ease,border-color .25s ease
}

.interest-story-reverse {
  grid-template-columns:1fr minmax(180px,42%)
}

.interest-story-reverse img {
  order:2
}

.interest-story img {
  width:100%;
  height:100%;
  min-height:260px;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)
}

.interest-story>div {
  padding:32px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0
}

.interest-story span {
  display:inline-block;
  width:max-content;
  margin-bottom:10px;
  color:var(--purple);
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase
}

.interest-story h3 {
  margin:0 0 10px;
  font-size:clamp(25px,2.2vw,32px);
  line-height:1.1
}

.interest-story p {
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.7
}

.interest-story:hover {
  transform:translateY(-3px);
  border-color:rgba(77,22,136,.25)
}

.interest-story:hover img {
  transform:scale(1.025)
}

.about-working-section {
  background:#fff;
  padding-top:100px
}

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

.working-together-grid article {
  padding:30px;
  border:1px solid rgba(45,28,53,.1);
  border-radius:22px;
  background:#fff
}

.working-together-grid span {
  display:inline-block;
  margin-bottom:24px;
  padding:7px 11px;
  border-radius:999px;
  background:var(--lime);
  color:#1b1420;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase
}

.working-together-grid h3 {
  margin:0 0 12px;
  font-size:24px;
  line-height:1.2
}

.working-together-grid p {
  margin:0;
  color:var(--muted);
  line-height:1.7
}

@media(max-width:980px) {
  .interest-story-grid {
  grid-template-columns:1fr
}

.working-together-grid {
  grid-template-columns:1fr 1fr
}

}

@media(max-width:640px) {
  .interest-story,.interest-story-reverse {
  grid-template-columns:1fr;
  min-height:auto
}

.interest-story-reverse img {
  order:0
}

.interest-story img {
  height:240px;
  min-height:240px
}

.interest-story>div {
  padding:26px 22px 30px
}

.working-together-grid {
  grid-template-columns:1fr
}

.about-working-section {
  padding-top:76px
}

}

@media(prefers-reduced-motion:reduce) {
  .interest-story,.interest-story img {
  transition:none!important;
  transform:none!important
}

}

/* Final capability and CV panel refinements */
.capabilities .cap::after {
  content:none!important;
  display:none!important;
}

.experience-download {
  margin-top:48px;
  padding:34px 36px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:36px;
  border:1px solid rgba(42,29,48,.12);
  border-radius:22px;
  background:linear-gradient(180deg,#faf8fb 0%,#f5f1f7 100%);
  box-shadow:none;
}

.experience-download-copy {
  max-width:700px
}

.experience-download .eyebrow {
  margin:0 0 9px
}

.experience-download h3 {
  margin:0;
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.1;
  letter-spacing:-.035em;
}

.experience-download-copy>p:last-child {
  margin:12px 0 0;
  max-width:620px;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}

.experience-download .resume-button {
  min-width:156px;
  padding:14px 18px;
  justify-content:space-between;
  gap:18px;
  border:1px solid var(--purple);
  border-radius:999px;
  background:var(--purple);
  color:#fff;
  box-shadow:none;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}

.experience-download .resume-button:hover {
  background:var(--purple2);
  border-color:var(--purple2);
  transform:translateY(-2px);
}

.experience-download .resume-button span {
  font-size:16px
}

.experience-download .resume-button:focus-visible {
  outline:3px solid var(--lime);
  outline-offset:4px;
}

@media(max-width:720px) {
  .experience-download {
  grid-template-columns:1fr;
  align-items:start;
  gap:24px;
  padding:28px 24px;
}

.experience-download .resume-button {
  width:100%;
}

}

/* Modern Beyond design bento layout */
.beyond-modern {
  background:linear-gradient(180deg,#fff 0%,#fbf9fc 100%)
}

.beyond-head {
  align-items:end
}

.beyond-head>p {
  max-width:500px
}

.beyond-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:22px;
  margin-top:48px;
  align-items:stretch
}

.beyond-card {
  grid-column:span 4;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(45,28,53,.10);
  border-radius:26px;
  background:#fff;
  min-height:430px;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease
}

.beyond-feature {
  grid-column:span 7;
  min-height:560px
}

.beyond-tall {
  grid-column:span 5;
  min-height:560px
}

.beyond-wide {
  grid-column:span 8;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  min-height:360px
}

.beyond-media {
  position:relative;
  overflow:hidden;
  min-height:235px;
  background:#eee8f0
}

.beyond-feature .beyond-media,.beyond-tall .beyond-media {
  min-height:360px
}

.beyond-wide .beyond-media {
  min-height:360px
}

.beyond-media:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(31,20,37,.08) 100%);
  pointer-events:none
}

.beyond-media img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)
}

.beyond-copy {
  padding:28px 28px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1
}

.beyond-copy span {
  display:inline-flex;
  width:max-content;
  margin-bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  background:#f0e8f6;
  color:var(--purple);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase
}

.beyond-copy h3 {
  margin:0 0 10px;
  font-size:clamp(25px,2.2vw,34px);
  line-height:1.08
}

.beyond-copy p {
  margin:0;
  max-width:560px;
  color:var(--muted);
  font-size:15px;
  line-height:1.68
}

.beyond-card:hover {
  transform:translateY(-4px);
  border-color:rgba(77,22,136,.22);
  box-shadow:0 18px 44px rgba(41,25,48,.07)
}

.beyond-card:hover .beyond-media img {
  transform:scale(1.025)
}

@media(max-width:980px) {
  .beyond-card,.beyond-feature,.beyond-tall {
  grid-column:span 6;
  min-height:440px
}

.beyond-wide {
  grid-column:span 12;
  min-height:330px
}

.beyond-feature .beyond-media,.beyond-tall .beyond-media {
  min-height:270px
}

}

@media(max-width:680px) {
  .beyond-grid {
  grid-template-columns:1fr;
  gap:18px;
  margin-top:36px
}

.beyond-card,.beyond-feature,.beyond-tall,.beyond-wide {
  grid-column:auto;
  display:flex;
  min-height:auto
}

.beyond-media,.beyond-feature .beyond-media,.beyond-tall .beyond-media,.beyond-wide .beyond-media {
  height:245px;
  min-height:245px
}

.beyond-copy {
  padding:24px 22px 27px
}

.beyond-card:hover {
  transform:none;
  box-shadow:none
}

}

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

}

/* Final mobile project-card alignment */
@media (max-width: 700px) {
  .project-stack {
  display:grid;
  gap:24px;
}

.stack-card,
  .stack-card.stack-feature {
  position:relative !important;
  top:auto !important;
  display:flex;
  flex-direction:column;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(32,18,40,.07);
  transform:none !important;
}

.stack-card.is-covered,
  .stack-card.is-current {
  box-shadow:0 10px 28px rgba(32,18,40,.07);
}

.stack-media,
  .stack-card:nth-child(even) .stack-media {
  order:0;
  width:100%;
  min-height:0;
  height:232px;
  padding:18px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
}

.stack-media img,
  .stack-card:nth-child(even) .stack-media img {
  position:relative;
  inset:auto;
  width:100%;
  max-width:100%;
  height:100%;
  max-height:100%;
  min-height:0;
  object-fit:contain;
  transform:none !important;
  filter:drop-shadow(0 10px 18px rgba(28,17,34,.10));
  animation:none !important;
}

.stack-media:after,
  .media-sheen {
  display:none !important
}

.media-chrome {
  left:12px;
  right:12px;
  top:12px;
  padding:7px 10px;
  font-size:9px;
}

.media-status {
  left:12px;
  right:auto;
  bottom:12px !important;
  max-width:calc(100% - 24px);
  padding:8px 10px;
  font-size:10px;
}

.stack-content {
  order:1;
  padding:24px 20px 20px;
}

.stack-meta {
  margin:0 0 8px;
  font-size:10px;
  line-height:1.35;
}

.stack-content h3 {
  margin:0 0 12px;
  font-size:clamp(25px,7vw,30px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.evidence-strip {
  grid-template-columns:1fr;
  margin:0 0 13px;
  padding:9px 0;
}

.evidence-strip span:nth-child(n+2) {
  display:none
}

.project-summary {
  display:block;
  margin:0;
}

.project-summary p {
  margin:0;
  padding:0;
  border:0;
  font-size:13.5px;
  line-height:1.5;
  color:var(--muted);
}

.project-summary p:nth-child(n+2) {
  display:none
}

.project-summary b {
  display:inline;
  margin-right:4px;
  font-size:inherit;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
}

.stack-content .project-results {
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:16px 0 0;
  padding:13px 0;
}

.stack-content .project-results b {
  font-size:19px
}

.stack-content .project-results span {
  font-size:10.5px
}

.stack-content .pills {
  gap:6px;
  margin:14px 0 0;
}

.stack-content .pills span {
  padding:6px 8px;
  font-size:10px;
}

.stack-content .pills span:nth-child(n+4) {
  display:none
}

.stack-content .case-link {
  width:100%;
  min-height:48px;
  margin:18px 0 0;
  padding:0 16px;
  border:0;
  border-radius:10px;
  background:var(--purple);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  line-height:1;
}

.stack-content .case-link:hover,
  .stack-content .case-link:focus-visible {
  background:var(--purple2);
  color:#fff;
  transform:none;
}

}

@media (max-width: 390px) {
  .stack-media,
  .stack-card:nth-child(even) .stack-media {
  height:210px
}

.stack-content {
  padding:21px 17px 17px
}

.stack-content h3 {
  font-size:24px
}

}

/* Simplified hero refinement */
.clean-hero .hero-grid {
  grid-template-columns:minmax(0,1.22fr) minmax(390px,.78fr);
  gap:44px;
}

.clean-hero .hero-copy {
  max-width:800px
}

.clean-hero h1 {
  max-width:780px;
  font-size:clamp(46px,4.8vw,68px);
  line-height:1.02;
  margin:18px 0 22px;
}

.clean-hero .hero-text {
  max-width:620px;
  font-size:18px;
  line-height:1.62
}

.clean-workspace {
  height:510px;
  max-width:540px;
  margin-left:auto;
}

.clean-workspace>img {
  width:min(100%,520px);
  filter:drop-shadow(0 14px 26px rgba(44,23,53,.055));
  animation:workspaceSimpleIn .7s cubic-bezier(.2,.72,.2,1) both;
}

.workspace-label {
  display:none!important
}

.workspace-flow {
  position:absolute;
  left:50%;
  bottom:42px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 13px;
  border:1px solid rgba(79,31,105,.11);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 22px rgba(39,20,46,.045);
  backdrop-filter:blur(10px);
  color:#4b4050;
  font-size:10px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}

.workspace-flow i {
  width:18px;
  height:1px;
  background:rgba(77,22,136,.28)
}

.workspace-flow i:after {
  content:"";
  display:block;
  width:4px;
  height:4px;
  margin:-1.5px 0 0 auto;
  border-radius:50%;
  background:var(--lime)
}

@keyframes workspaceSimpleIn {
  from {
  opacity:0;
  transform:translateY(8px)
}

to {
  opacity:1;
  transform:none
}

}

@media(max-width:1080px) {
  .clean-hero .hero-grid {
  grid-template-columns:minmax(0,1.12fr) minmax(350px,.88fr);
  gap:28px
}

.clean-workspace {
  height:470px;
  max-width:500px
}

}

@media(max-width:900px) {
  .clean-hero .hero-grid {
  grid-template-columns:1fr;
  gap:22px
}

.clean-workspace {
  height:430px;
  max-width:520px;
  margin:0 auto
}

}

@media(max-width:620px) {
  .clean-hero h1 {
  font-size:clamp(38px,10.5vw,48px);
  line-height:1.04
}

.clean-hero .hero-text {
  font-size:16px
}

.clean-workspace {
  height:330px;
  max-width:350px
}

.workspace-flow {
  bottom:18px;
  font-size:9px;
  padding:8px 11px;
  gap:8px
}

}

@media(prefers-reduced-motion:reduce) {
  .clean-workspace>img {
  animation:none!important
}

}

/* Production resilience, accessibility and final responsive polish */
html:not(.js) .reveal {
  opacity:1!important;
  transform:none!important
}

nav a[aria-current="page"] {
  color:#fff;
  font-weight:800
}

img {
  max-width:100%;
  height:auto
}

:focus-visible {
  outline:3px solid var(--lime);
  outline-offset:4px
}

.accent-word::after {
  left:50%!important;
  right:auto!important;
  width:52%!important;
  height:7px!important;
  bottom:.08em!important;
  transform:translateX(-50%)!important;
  border-radius:999px!important;
  opacity:.9!important
}

.clean-hero h1 {
  max-width:880px;
  font-size:clamp(44px,4.45vw,64px);
  line-height:1.04;
  text-wrap:balance
}

.clean-hero .hero-text {
  text-wrap:pretty
}

@media(max-width:900px) {
  .clean-hero {
  min-height:auto
}

.clean-hero .hero-grid {
  padding-top:110px;
  padding-bottom:64px
}

.clean-workspace {
  max-width:480px
}

}

@media(max-width:620px) {
  .clean-hero .hero-grid {
  padding-top:92px;
  padding-bottom:48px
}

.clean-hero h1 {
  font-size:clamp(36px,10vw,46px);
  max-width:13ch
}

.clean-workspace {
  height:300px
}

.workspace-flow {
  max-width:calc(100vw - 48px)
}

}

@media(max-width:700px) {
  .stack-card {
  border:1px solid rgba(45,28,53,.09)
}

.stack-content .case-link {
  font-weight:800
}

.media-label {
  max-width:70%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto!important
}

*,*:before,*:after {
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important
}

}

/* Contact details and final CTA refinement */
.contact-box,.contact-card,.case-contact-card {
  overflow:hidden
}

.contact-box>p:not(.eyebrow),.contact-card>p:not(.eyebrow),.case-contact-card>p:not(.eyebrow) {
  max-width:720px
}

.contact-links {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  width:100%;
  margin-top:30px;
}

.contact-link {
  position:relative;
  display:flex;
  min-height:108px;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  padding:18px 46px 18px 18px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:18px;
  background:rgba(255,255,255,.075);
  color:#fff;
  text-decoration:none;
  transition:transform .22s ease,background .22s ease,border-color .22s ease;
}

.contact-link:hover,.contact-link:focus-visible {
  transform:translateY(-3px);
  background:rgba(255,255,255,.13);
  border-color:rgba(217,255,85,.52);
}

.contact-link-label {
  color:rgba(255,255,255,.72);
  font-size:11px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.contact-link strong {
  font-size:15px;
  line-height:1.35;
  overflow-wrap:anywhere
}

.contact-link i {
  position:absolute;
  right:17px;
  top:17px;
  color:var(--lime);
  font-style:normal;
  font-size:18px
}

.contact-links-compact {
  margin-top:28px
}

.footer-contact-row {
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:16px;
  margin:16px 0 10px
}

.footer-contact-row a {
  color:inherit;
  text-decoration:none;
  font-size:13px;
  font-weight:750;
  opacity:.78
}

.footer-contact-row a:hover,.footer-contact-row a:focus-visible {
  opacity:1;
  color:var(--purple)
}

@media(max-width:980px) {
  .contact-links {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

}

@media(max-width:620px) {
  .contact-links {
  grid-template-columns:1fr;
  gap:10px;
  margin-top:24px
}

.contact-link {
  min-height:88px;
  padding:16px 46px 16px 16px
}

.footer-contact-row {
  justify-content:flex-start;
  gap:14px;
  margin-top:14px
}

}

/* Editorial contact rail — final production treatment */
.contact-rail {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  margin-top:38px;
  border-top:1px solid rgba(255,255,255,.28);
  border-bottom:1px solid rgba(255,255,255,.28);
}

.contact-rail-item {
  position:relative;
  display:flex;
  min-width:0;
  min-height:118px;
  flex-direction:column;
  justify-content:center;
  gap:9px;
  padding:25px 54px 25px 26px;
  color:#fff;
  text-decoration:none;
  border-right:1px solid rgba(255,255,255,.24);
  transition:background-color .2s ease,color .2s ease;
}

.contact-rail-item:last-child {
  border-right:0
}

.contact-rail-item:hover,.contact-rail-item:focus-visible {
  background:rgba(255,255,255,.08)
}

.contact-rail-item:focus-visible {
  outline:3px solid var(--lime);
  outline-offset:-3px
}

.contact-rail-label {
  color:rgba(255,255,255,.72);
  font-size:11px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.contact-rail-item strong {
  font-size:clamp(15px,1.45vw,19px);
  line-height:1.35;
  overflow-wrap:anywhere;
}

.contact-rail-arrow {
  position:absolute;
  top:25px;
  right:25px;
  color:var(--lime);
  font-size:19px;
  line-height:1;
}

.case-contact-card {
  max-width:980px
}

.case-contact-card .contact-rail {
  margin-top:34px
}

@media(max-width:760px) {
  .contact-rail {
  grid-template-columns:1fr;
  margin-top:30px
}

.contact-rail-item {
  min-height:92px;
  padding:21px 48px 21px 4px;
  border-right:0;
  border-bottom:1px solid rgba(255,255,255,.24);
}

.contact-rail-item:last-child {
  border-bottom:0
}

.contact-rail-arrow {
  top:50%;
  right:4px;
  transform:translateY(-50%)
}

}

/* Final hero refinement */
.hero-grid {
  grid-template-columns:1.15fr .85fr;
  align-items:center
}

.hero-text {
  max-width:38rem
}

.hero-stage {
  background:none!important;
  box-shadow:none!important
}

.clean-workspace img {
  max-width:100%;
  filter:grayscale(100%) contrast(1.05)
}

.workspace-flow {
  display:none
}

.hero-stage::after {
  content:"";
  position:absolute;
  inset:8% 5%;
  background:url('https://logeshdevaraj.com/assets/images/portfolio/journey.png') center/contain no-repeat;
  opacity:.18;
  pointer-events:none;
  mix-blend-mode:multiply;
}

.hero-copy .trust-line {
  margin-top:20px;
  font-size:.95rem;
  color:var(--muted,#666)
}

/* Refined e-commerce product workflow */
.case-workflow {
  padding:clamp(72px,9vw,124px) 0;
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.workflow-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);
  gap:clamp(32px,7vw,96px);
  align-items:end;
  margin-bottom:48px
}

.workflow-heading h2 {
  max-width:760px;
  margin:0;
  font-size:clamp(36px,4.2vw,58px);
  line-height:1.03;
  letter-spacing:-.045em
}

.workflow-heading>p {
  max-width:560px;
  margin:0;
  color:#574e5b;
  font-size:17px;
  line-height:1.7
}

.workflow-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin:0;
  padding:1px;
  list-style:none;
  background:rgba(49,28,58,.14);
  border:1px solid rgba(49,28,58,.14);
  border-radius:22px;
  overflow:hidden
}

.workflow-step {
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  min-height:230px;
  padding:30px;
  background:#fbfafc
}

.workflow-step:nth-child(even) {
  background:#f7f4fa
}

.workflow-index {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(77,22,136,.26);
  border-radius:50%;
  color:#5b2485;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em
}

.workflow-step h3 {
  margin:4px 0 12px;
  font-size:22px;
  line-height:1.18;
  letter-spacing:-.025em
}

.workflow-step p {
  margin:0 0 20px;
  color:#584f5c;
  font-size:15px;
  line-height:1.65
}

.workflow-step small {
  display:block;
  margin-top:auto;
  color:#6b5f71;
  font-size:11px;
  font-weight:750;
  line-height:1.45;
  letter-spacing:.06em;
  text-transform:uppercase
}

.workflow-step>div {
  display:flex;
  min-width:0;
  flex-direction:column
}

.workflow-note {
  margin-top:24px;
  padding:20px 24px;
  border-left:3px solid #d9ff55;
  background:#f7f4fa;
  color:#514657;
  font-size:15px;
  line-height:1.65
}

.workflow-note strong {
  color:#321c3a
}

@media(max-width:960px) {
  .workflow-heading {
  grid-template-columns:1fr;
  gap:22px
}

.workflow-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

}

@media(max-width:620px) {
  .case-workflow {
  padding:64px 0
}

.workflow-heading {
  margin-bottom:30px
}

.workflow-heading h2 {
  font-size:36px
}

.workflow-heading>p {
  font-size:16px
}

.workflow-grid {
  grid-template-columns:1fr;
  border-radius:16px
}

.workflow-step {
  min-height:0;
  padding:24px 20px
}

.workflow-step p {
  margin-bottom:16px
}

.workflow-note {
  margin-top:18px;
  padding:17px 18px
}

}

/* E-commerce workflow refinement */
.case-workflow {
  overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#fbf9fc 100%)
}

.workflow-path {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin-top:42px
}

.workflow-path:before {
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:34px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(77,22,136,.25) 10%,rgba(77,22,136,.25) 90%,transparent);
  z-index:0
}

.workflow-stage {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:52px 1fr;
  gap:16px;
  align-items:start;
  padding:24px;
  border:1px solid rgba(49,28,58,.12);
  border-radius:20px;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 32px rgba(32,19,42,.06)
}

.workflow-icon {
  display:grid;
  width:52px;
  height:52px;
  place-items:center;
  border:1px solid rgba(77,22,136,.18);
  border-radius:50%;
  background:#f7f3fa;
  color:#4d1688
}

.workflow-icon svg {
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

.workflow-kicker {
  margin:0 0 5px;
  color:#7a657f;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase
}

.workflow-stage h3 {
  margin:0 0 10px;
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.025em
}

.workflow-stage>div:last-child>p:not(.workflow-kicker) {
  margin:0;
  color:#584f5c;
  font-size:14px;
  line-height:1.62
}

.workflow-tools {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:17px
}

.workflow-tools span {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border:1px solid rgba(77,22,136,.14);
  border-radius:999px;
  background:#faf7fc;
  color:#4e3c55;
  font-size:11px;
  font-weight:700;
  line-height:1.2
}

.workflow-note {
  position:relative!important;
  display:block!important;
  margin-top:26px!important;
  padding:18px 20px!important;
  border:1px solid rgba(77,22,136,.13)!important;
  border-left:4px solid #d9ff55!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#514657!important;
  font-size:14px!important;
  line-height:1.6!important
}

@media(max-width:980px) {
  .workflow-path {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.workflow-path:before {
  display:none
}

}

@media(max-width:640px) {
  .workflow-path {
  grid-template-columns:1fr;
  gap:14px;
  margin-top:30px
}

.workflow-stage {
  grid-template-columns:44px 1fr;
  padding:20px 18px
}

.workflow-icon {
  width:44px;
  height:44px
}

.workflow-icon svg {
  width:22px;
  height:22px
}

.workflow-stage h3 {
  font-size:19px
}

.workflow-stage>div:last-child>p:not(.workflow-kicker) {
  font-size:14px
}

.workflow-tools {
  margin-top:14px
}

}

/* Hero background illustration and responsive 70% text layout */
.hero.clean-hero {
  position:relative;
  min-height:clamp(680px,88vh,840px);
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}

.hero.clean-hero .hero-grid {
  position:relative;
  z-index:2;
  display:block;
  min-height:0;
}

.hero.clean-hero .hero-copy {
  position:relative;
  z-index:3;
  width:70%;
  max-width:860px;
}

.hero.clean-hero h1 {
  max-width:14.5ch;
  margin:22px 0 24px;
  font-size:clamp(48px,5.35vw,76px);
  line-height:1.03;
  letter-spacing:-.052em;
}

.hero.clean-hero .hero-text {
  max-width:690px;
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.62;
}

.hero.clean-hero .trust-line {
  max-width:560px;
  margin:24px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.hero.clean-hero .hero-stage.clean-workspace {
  position:absolute;
  z-index:1;
  top:88px;
  right:-3%;
  bottom:28px;
  width:58%;
  height:auto;
  max-width:none;
  margin:0;
  pointer-events:none;
  overflow:visible;
  opacity:.13;
  background:url('https://logeshdevaraj.com/assets/images/portfolio/journey.png') right center / contain no-repeat!important;
  filter:grayscale(1) contrast(.88);
  mix-blend-mode:multiply;
}

.hero.clean-hero .hero-stage.clean-workspace::after,
.hero.clean-hero .hero-stage.clean-workspace::before {
  display:none!important
}

@media(max-width:980px) {
  .hero.clean-hero {
  min-height:auto;
  padding:138px 0 92px
}

.hero.clean-hero .hero-copy {
  width:82%;
  max-width:760px
}

.hero.clean-hero h1 {
  max-width:15ch;
  font-size:clamp(46px,7vw,66px)
}

.hero.clean-hero .hero-stage.clean-workspace {
  top:105px;
  right:-12%;
  bottom:20px;
  width:64%;
  opacity:.09;
}

}

@media(max-width:680px) {
  .hero.clean-hero {
  padding:122px 0 72px
}

.hero.clean-hero .hero-copy {
  width:100%;
  max-width:none
}

.hero.clean-hero h1 {
  max-width:100%;
  font-size:clamp(40px,11vw,54px);
  line-height:1.05;
  letter-spacing:-.045em;
}

.hero.clean-hero .hero-text {
  max-width:36rem;
  font-size:17px;
  line-height:1.58
}

.hero.clean-hero .hero-stage.clean-workspace {
  top:150px;
  right:-28%;
  bottom:54px;
  width:92%;
  opacity:.045;
  background-position:right center!important;
}

.hero.clean-hero .actions {
  gap:12px;
  margin-top:28px
}

.hero.clean-hero .trust-line {
  margin-top:20px;
  font-size:13px
}

}

@media(max-width:420px) {
  .hero.clean-hero h1 {
  font-size:clamp(37px,10.5vw,46px)
}

.hero.clean-hero .hero-stage.clean-workspace {
  opacity:.035;
  right:-38%;
  width:108%
}

}

/* Final hero balance: true 70% copy, vertically centred, subtle layered background */
.hero.clean-hero {
  min-height:min(85svh,820px);
  max-height:none;
  padding:96px 0 48px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 82% 42%,rgba(108,34,170,.105) 0,rgba(108,34,170,.045) 24%,transparent 52%),
    radial-gradient(circle at 12% 88%,rgba(217,255,85,.09) 0,transparent 27%),
    linear-gradient(135deg,#fff 15%,#fbf8fd 58%,#f4eef9 100%);
}

.hero.clean-hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(77,22,136,.042) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,22,136,.042) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.55;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 45%,#000 76%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 45%,#000 76%,transparent 100%);
}

.hero.clean-hero .hero-checks {
  display:none
}

.hero.clean-hero .hero-grid {
  width:min(1180px,calc(100% - 40px));
  margin:auto;
  display:flex;
  align-items:center;
  min-height:calc(min(85svh,820px) - 144px);
}

.hero.clean-hero .hero-copy {
  width:70%;
  max-width:none;
  max-height:calc(85svh - 132px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero.clean-hero h1 {
  max-width:100%;
  font-size:clamp(46px,4.75vw,70px);
  line-height:1.025;
  text-wrap:balance;
}

.hero.clean-hero .hero-text {
  max-width:760px
}

.hero.clean-hero .hero-stage.clean-workspace {
  top:8%;
  right:-5%;
  bottom:5%;
  width:55%;
  opacity:.105;
  background-position:right center!important;
  filter:grayscale(1) contrast(.82) brightness(1.04);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 22%,#000 58%,rgba(0,0,0,.74) 82%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 22%,#000 58%,rgba(0,0,0,.74) 82%,transparent 100%);
}

@media(max-width:980px) {
  .hero.clean-hero {
  min-height:auto;
  padding:126px 0 76px;
}

.hero.clean-hero .hero-grid {
  width:min(100% - 40px,1180px);
  min-height:auto;
}

.hero.clean-hero .hero-copy {
  width:82%;
  max-height:none;
}

.hero.clean-hero h1 {
  max-width:100%;
  font-size:clamp(44px,6.4vw,62px);
}

.hero.clean-hero .hero-stage.clean-workspace {
  right:-13%;
  width:65%;
  opacity:.075;
}

}

@media(max-width:680px) {
  .hero.clean-hero {
  padding:112px 0 64px;
  background:
      radial-gradient(circle at 95% 28%,rgba(108,34,170,.08),transparent 42%),
      linear-gradient(145deg,#fff 22%,#f8f3fb 100%);
}

.hero.clean-hero::before {
  opacity:.3;
  background-size:34px 34px
}

.hero.clean-hero .hero-grid {
  width:min(100% - 28px,1180px)
}

.hero.clean-hero .hero-copy {
  width:100%
}

.hero.clean-hero h1 {
  max-width:100%;
  font-size:clamp(38px,10.2vw,50px);
  line-height:1.045;
}

.hero.clean-hero .hero-stage.clean-workspace {
  top:18%;
  right:-36%;
  bottom:8%;
  width:105%;
  opacity:.032;
}

}

/* FINAL HERO SYSTEM — consolidated for readability and responsive balance */
.hero.clean-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:clamp(660px,85svh,820px);
  padding:clamp(96px,10vh,132px) 0 clamp(58px,7vh,88px);
  background:
    radial-gradient(ellipse at 88% 42%,rgba(94,32,148,.10) 0%,rgba(94,32,148,.045) 28%,transparent 58%),
    radial-gradient(ellipse at 6% 92%,rgba(217,255,85,.08) 0%,transparent 34%),
    linear-gradient(135deg,#fff 0%,#fcf9fd 55%,#f5eff9 100%);
}

.hero.clean-hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(77,22,136,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,22,136,.035) 1px,transparent 1px);
  background-size:44px 44px;
  opacity:.58;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 38%,rgba(0,0,0,.45) 60%,#000 84%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 38%,rgba(0,0,0,.45) 60%,#000 84%,transparent 100%);
}

.hero.clean-hero .hero-checks {
  display:none!important
}

.hero.clean-hero .hero-grid {
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 48px));
  min-height:0;
  margin:0 auto;
  display:block;
}

.hero.clean-hero .hero-copy {
  position:relative;
  z-index:3;
  width:min(70%,900px);
  max-width:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero.clean-hero .kicker {
  max-width:100%;
  margin:0 0 18px;
}

.hero.clean-hero h1 {
  max-width:15.8ch;
  margin:0;
  font-size:clamp(48px,5vw,72px);
  line-height:1.01;
  letter-spacing:-.052em;
  text-wrap:balance;
}

.hero.clean-hero .hero-text {
  max-width:700px;
  margin:26px 0 0;
  font-size:clamp(17px,1.35vw,20px);
  line-height:1.58;
}

.hero.clean-hero .actions {
  margin-top:30px;
}

.hero.clean-hero .trust-line {
  max-width:620px;
  margin:22px 0 0;
  font-size:14px;
  line-height:1.5;
}

.hero.clean-hero .hero-stage.clean-workspace {
  position:absolute;
  z-index:1;
  top:7%;
  right:-2.5%;
  bottom:5%;
  width:52%;
  height:auto;
  margin:0;
  pointer-events:none;
  opacity:.085;
  background:url('https://logeshdevaraj.com/assets/images/portfolio/journey.png') right center / contain no-repeat!important;
  filter:grayscale(1) contrast(.84) brightness(1.04);
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 20%,#000 55%,rgba(0,0,0,.76) 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 20%,#000 55%,rgba(0,0,0,.76) 86%,transparent 100%);
}

.hero.clean-hero .hero-stage.clean-workspace::before,
.hero.clean-hero .hero-stage.clean-workspace::after {
  display:none!important
}

@media (max-width:1050px) {
  .hero.clean-hero {
  min-height:auto;
  padding:126px 0 84px;
}

.hero.clean-hero .hero-grid {
  width:min(100% - 40px,1180px)
}

.hero.clean-hero .hero-copy {
  width:min(78%,780px)
}

.hero.clean-hero h1 {
  max-width:15ch;
  font-size:clamp(46px,6.2vw,64px)
}

.hero.clean-hero .hero-stage.clean-workspace {
  right:-11%;
  width:62%;
  opacity:.06
}

}

@media (max-width:720px) {
  .hero.clean-hero {
  min-height:auto;
  padding:112px 0 68px;
  align-items:flex-start;
  background:
      radial-gradient(ellipse at 105% 22%,rgba(94,32,148,.075),transparent 48%),
      linear-gradient(145deg,#fff 18%,#f8f3fb 100%);
}

.hero.clean-hero::before {
  background-size:34px 34px;
  opacity:.34
}

.hero.clean-hero .hero-grid {
  width:min(100% - 30px,1180px)
}

.hero.clean-hero .hero-copy {
  width:100%;
  max-width:none
}

.hero.clean-hero .kicker {
  margin-bottom:15px
}

.hero.clean-hero h1 {
  max-width:100%;
  font-size:clamp(38px,10.2vw,50px);
  line-height:1.045;
  letter-spacing:-.045em;
}

.hero.clean-hero .hero-text {
  max-width:37rem;
  margin-top:22px;
  font-size:17px;
  line-height:1.56
}

.hero.clean-hero .actions {
  margin-top:26px
}

.hero.clean-hero .trust-line {
  margin-top:18px;
  font-size:13px
}

.hero.clean-hero .hero-stage.clean-workspace {
  top:16%;
  right:-38%;
  bottom:8%;
  width:110%;
  opacity:.022;
}

}

@media (max-height:760px) and (min-width:721px) {
  .hero.clean-hero {
  min-height:620px;
  padding:92px 0 50px;
}

.hero.clean-hero h1 {
  font-size:clamp(44px,4.5vw,62px)
}

.hero.clean-hero .hero-text {
  margin-top:20px;
  font-size:17px
}

.hero.clean-hero .actions {
  margin-top:22px
}

.hero.clean-hero .trust-line {
  margin-top:16px
}

}

/* SCREEN-FIT HERO — final alignment and viewport optimisation */
.hero.clean-hero {
  box-sizing:border-box;
  min-height:100svh;
  height:auto;
  padding-top:clamp(112px,13vh,150px);
  padding-bottom:clamp(56px,8vh,92px);
  align-items:center;
}

.hero.clean-hero .hero-grid {
  display:flex;
  align-items:center;
  min-height:calc(100svh - clamp(168px,21vh,242px));
}

.hero.clean-hero .hero-copy {
  width:min(70%,860px);
  justify-content:center;
  padding:0;
}

.hero.clean-hero h1 {
  max-width:14.8ch;
  font-size:clamp(48px,4.7vw,68px);
  line-height:1.035;
}

.hero.clean-hero .hero-text {
  max-width:650px;
  margin-top:24px;
  font-size:clamp(17px,1.25vw,19px);
  line-height:1.58;
}

.hero.clean-hero .actions {
  margin-top:28px
}

.hero.clean-hero .trust-line {
  margin-top:20px
}

@media (max-width:1050px) {
  .hero.clean-hero {
  min-height:100svh;
  padding-top:124px;
  padding-bottom:70px;
}

.hero.clean-hero .hero-grid {
  min-height:calc(100svh - 194px);
  align-items:center;
}

.hero.clean-hero .hero-copy {
  width:min(82%,780px)
}

.hero.clean-hero h1 {
  max-width:14.5ch
}

}

@media (max-width:720px) {
  .hero.clean-hero {
  min-height:100svh;
  padding-top:104px;
  padding-bottom:52px;
  align-items:center;
}

.hero.clean-hero .hero-grid {
  min-height:calc(100svh - 156px);
  display:flex;
  align-items:center;
}

.hero.clean-hero .hero-copy {
  width:100%
}

.hero.clean-hero h1 {
  max-width:100%;
  font-size:clamp(38px,10vw,48px);
  line-height:1.06;
}

.hero.clean-hero .hero-text {
  max-width:34rem;
  margin-top:20px;
  font-size:16px;
  line-height:1.55;
}

.hero.clean-hero .actions {
  margin-top:24px
}

.hero.clean-hero .trust-line {
  margin-top:16px
}

}

@media (max-height:720px) and (min-width:721px) {
  .hero.clean-hero {
  min-height:100svh;
  padding-top:88px;
  padding-bottom:42px;
}

.hero.clean-hero .hero-grid {
  min-height:calc(100svh - 130px)
}

.hero.clean-hero h1 {
  font-size:clamp(42px,4.2vw,58px)
}

.hero.clean-hero .hero-text {
  margin-top:18px;
  font-size:16px
}

.hero.clean-hero .actions {
  margin-top:20px
}

.hero.clean-hero .trust-line {
  margin-top:14px
}

}

/* Hero width refinement */
.hero.clean-hero .hero-content {
  width:70%;
  max-width:900px;
}

.hero.clean-hero h1 {
  width:92%;
  max-width:none;
  line-height:1.08;
  letter-spacing:-0.03em;
}

.hero.clean-hero p,
.hero.clean-hero .hero-actions,
.hero.clean-hero .hero-trust {
  max-width:760px;
}

@media (max-width:1024px) {
  .hero.clean-hero .hero-content {
  width:82%;
  max-width:760px;
}

.hero.clean-hero h1 {
  width:100%;
}

}

@media (max-width:768px) {
  .hero.clean-hero .hero-content {
  width:100%;
  max-width:none;
}

.hero.clean-hero h1 {
  width:100%;
  line-height:1.12;
}

}

/* Final hero — simple, distinctive and recruiter-focused */
.hero.clean-hero {
  min-height:calc(100svh - 74px)!important;
  padding:clamp(54px,7vh,88px) 0!important;
  display:flex!important;
  align-items:center!important;
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  background:
    radial-gradient(circle at 82% 38%,rgba(79,31,105,.09),transparent 34%),
    linear-gradient(180deg,#fff 0%,#fbf9fc 100%)!important;
}

.hero.clean-hero::before {
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background-image:linear-gradient(rgba(79,31,105,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(79,31,105,.035) 1px,transparent 1px)!important;
  background-size:42px 42px!important;
  mask-image:linear-gradient(90deg,transparent 0%,transparent 43%,#000 72%,transparent 100%);
  opacity:.52!important;
  pointer-events:none!important;
  z-index:-2!important;
}

.hero.clean-hero .hero-grid {
  width:min(100% - 64px,1320px)!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.58fr) minmax(330px,.82fr)!important;
  gap:clamp(30px,4.5vw,76px)!important;
  align-items:center!important;
  position:relative!important;
  z-index:1!important;
}

.hero.clean-hero .hero-copy {
  width:100%!important;
  max-width:930px!important;
  padding:0!important;
}

.hero.clean-hero .kicker {
  margin:0 0 20px!important;
  font-size:13px!important;
  letter-spacing:.12em!important;
}

.hero.clean-hero h1 {
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  font-size:clamp(50px,5.15vw,72px)!important;
  line-height:1.055!important;
  letter-spacing:-.042em!important;
  text-wrap:initial!important;
}

.hero.clean-hero h1>span {
  display:block!important;
  white-space:nowrap
}

.hero.clean-hero .hero-text {
  max-width:710px!important;
  margin:26px 0 0!important;
  font-size:clamp(17px,1.35vw,19px)!important;
  line-height:1.58!important;
}

.hero.clean-hero .actions {
  margin-top:30px!important;
  gap:14px!important
}

.hero.clean-hero .trust-line {
  margin-top:22px!important;
  max-width:640px!important;
  font-size:14px!important
}

.hero.clean-hero .hero-stage.clean-workspace {
  display:block!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:720/620!important;
  background:url('https://logeshdevaraj.com/assets/images/portfolio/journey.png') center/contain no-repeat!important;
  opacity:.82!important;
  transform:none!important;
  filter:none!important;
}

.hero.clean-hero .hero-stage.clean-workspace::before,
.hero.clean-hero .hero-stage.clean-workspace::after {
  display:none!important
}

@media (max-width:1180px) {
  .hero.clean-hero .hero-grid {
  width:min(100% - 44px,1120px)!important;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr)!important;
  gap:30px!important
}

.hero.clean-hero h1 {
  font-size:clamp(46px,5.35vw,62px)!important
}

.hero.clean-hero .hero-stage.clean-workspace {
  opacity:.68!important
}

}

@media (max-width:960px) {
  .hero.clean-hero {
  min-height:auto!important;
  padding:88px 0 72px!important
}

.hero.clean-hero .hero-grid {
  grid-template-columns:1fr!important;
  width:min(100% - 40px,820px)!important
}

.hero.clean-hero .hero-copy {
  max-width:780px!important
}

.hero.clean-hero h1>span {
  white-space:normal
}

.hero.clean-hero h1 {
  max-width:16ch!important;
  font-size:clamp(46px,7.2vw,62px)!important
}

.hero.clean-hero .hero-stage.clean-workspace {
  position:absolute!important;
  right:-18%!important;
  top:14%!important;
  width:62%!important;
  opacity:.075!important;
  z-index:-1!important
}

}

@media (max-width:680px) {
  .hero.clean-hero {
  padding:74px 0 58px!important;
  background:linear-gradient(180deg,#fff 0%,#fbf9fc 100%)!important
}

.hero.clean-hero .hero-grid {
  width:min(100% - 30px,620px)!important
}

.hero.clean-hero .kicker {
  font-size:11px!important;
  line-height:1.5!important;
  margin-bottom:15px!important
}

.hero.clean-hero h1 {
  max-width:none!important;
  font-size:clamp(40px,11.5vw,52px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important
}

.hero.clean-hero .hero-text {
  margin-top:20px!important;
  font-size:16px!important;
  line-height:1.55!important
}

.hero.clean-hero .actions {
  margin-top:24px!important;
  align-items:stretch!important
}

.hero.clean-hero .actions .button {
  justify-content:center!important
}

.hero.clean-hero .trust-line {
  margin-top:18px!important;
  font-size:12.5px!important
}

.hero.clean-hero .hero-stage.clean-workspace {
  right:-34%!important;
  top:15%!important;
  width:100%!important;
  opacity:.045!important
}

}

@media (max-height:760px) and (min-width:961px) {
  .hero.clean-hero {
  padding:38px 0!important
}

.hero.clean-hero h1 {
  font-size:clamp(45px,4.6vw,63px)!important
}

.hero.clean-hero .hero-text {
  margin-top:20px!important;
  font-size:17px!important
}

.hero.clean-hero .actions {
  margin-top:22px!important
}

.hero.clean-hero .trust-line {
  margin-top:16px!important
}

}

/* Editorial hero — final production layout */
.hero.clean-hero {
  min-height:calc(100svh - 74px)!important;
  padding:clamp(48px,6.5vh,78px) 0!important;
  display:flex!important;
  align-items:center!important;
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:
    radial-gradient(circle at 82% 42%,rgba(79,31,105,.09),transparent 33%),
    linear-gradient(180deg,#fff 0%,#fbf9fc 100%)!important;
}

.hero.clean-hero::before {
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background-image:
    linear-gradient(rgba(79,31,105,.027) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,31,105,.027) 1px,transparent 1px)!important;
  background-size:44px 44px!important;
  mask-image:linear-gradient(90deg,transparent 0%,transparent 50%,#000 78%,transparent 100%)!important;
  opacity:.58!important;
  pointer-events:none!important;
  z-index:-2!important;
}

.hero.clean-hero .hero-grid {
  width:min(100% - 64px,1320px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,70%) minmax(260px,30%)!important;
  gap:clamp(22px,3vw,48px)!important;
  align-items:center!important;
  position:relative!important;
  z-index:1!important;
}

.hero.clean-hero .hero-copy {
  width:100%!important;
  max-width:900px!important;
  padding:0!important;
}

.hero.clean-hero .kicker {
  margin:0 0 18px!important;
  font-size:12px!important;
  line-height:1.45!important;
  letter-spacing:.13em!important;
}

.hero.clean-hero h1 {
  width:100%!important;
  max-width:900px!important;
  margin:0!important;
  font-size:clamp(48px,4.8vw,68px)!important;
  line-height:1.06!important;
  letter-spacing:-.042em!important;
  text-wrap:initial!important;
}

.hero.clean-hero h1>span {
  display:block!important;
  white-space:nowrap!important;
}

.hero.clean-hero .hero-text {
  max-width:680px!important;
  margin:24px 0 0!important;
  font-size:clamp(17px,1.25vw,19px)!important;
  line-height:1.58!important;
}

.hero.clean-hero .actions {
  margin-top:28px!important;
  gap:14px!important;
}

.hero.clean-hero .trust-line {
  margin-top:21px!important;
  max-width:680px!important;
  font-size:13.5px!important;
  letter-spacing:.005em!important;
}

.hero.clean-hero .trust-line span {
  color:#8a6ca0;
  padding:0 .32em
}

.hero.clean-hero .hero-stage.clean-workspace {
  display:block!important;
  position:relative!important;
  inset:auto!important;
  width:115%!important;
  margin-left:-12%!important;
  height:auto!important;
  aspect-ratio:760/620!important;
  background:url('https://logeshdevaraj.com/assets/images/portfolio/journey.png') center/contain no-repeat!important;
  opacity:.72!important;
  transform:none!important;
  filter:none!important;
}

.hero.clean-hero .hero-stage.clean-workspace::before,
.hero.clean-hero .hero-stage.clean-workspace::after {
  display:none!important
}

@media (max-width:1180px) {
  .hero.clean-hero .hero-grid {
  width:min(100% - 44px,1120px)!important;
  grid-template-columns:minmax(0,68%) minmax(260px,32%)!important;
  gap:24px!important;
}

.hero.clean-hero h1 {
  font-size:clamp(44px,5vw,60px)!important
}

.hero.clean-hero .hero-stage.clean-workspace {
  width:122%!important;
  margin-left:-18%!important;
  opacity:.62!important
}

}

@media (max-width:960px) {
  .hero.clean-hero {
  min-height:auto!important;
  padding:82px 0 68px!important;
}

.hero.clean-hero .hero-grid {
  width:min(100% - 40px,820px)!important;
  grid-template-columns:1fr!important;
}

.hero.clean-hero .hero-copy {
  max-width:760px!important
}

.hero.clean-hero h1 {
  max-width:15.5ch!important;
  font-size:clamp(44px,7vw,60px)!important
}

.hero.clean-hero h1>span {
  white-space:normal!important
}

.hero.clean-hero .hero-stage.clean-workspace {
  position:absolute!important;
  right:-22%!important;
  top:15%!important;
  width:68%!important;
  margin:0!important;
  opacity:.065!important;
  z-index:-1!important;
}

}

@media (max-width:680px) {
  .hero.clean-hero {
  padding:70px 0 54px!important;
  background:linear-gradient(180deg,#fff 0%,#fbf9fc 100%)!important;
}

.hero.clean-hero .hero-grid {
  width:min(100% - 30px,620px)!important
}

.hero.clean-hero .kicker {
  font-size:11px!important;
  margin-bottom:14px!important
}

.hero.clean-hero h1 {
  max-width:none!important;
  font-size:clamp(39px,11vw,50px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}

.hero.clean-hero .hero-text {
  margin-top:19px!important;
  font-size:16px!important;
  line-height:1.55!important
}

.hero.clean-hero .actions {
  margin-top:23px!important;
  align-items:stretch!important
}

.hero.clean-hero .actions .button {
  justify-content:center!important
}

.hero.clean-hero .trust-line {
  margin-top:17px!important;
  font-size:12.5px!important;
  line-height:1.5!important
}

.hero.clean-hero .hero-stage.clean-workspace {
  right:-42%!important;
  top:18%!important;
  width:112%!important;
  opacity:.038!important
}

}

@media (max-height:760px) and (min-width:961px) {
  .hero.clean-hero {
  padding:32px 0!important
}

.hero.clean-hero h1 {
  font-size:clamp(42px,4.2vw,58px)!important
}

.hero.clean-hero .hero-text {
  margin-top:18px!important;
  font-size:16.5px!important
}

.hero.clean-hero .actions {
  margin-top:20px!important
}

.hero.clean-hero .trust-line {
  margin-top:14px!important
}

}

/* Production release refinements — August 2026 */
.hero.clean-hero .hero-copy {
  min-width: 0;
  max-width: 100%;
}

.hero.clean-hero h1 {
  max-width: 100%;
  text-wrap: balance;
}

.hero.clean-hero .hero-text {
  max-width: 46rem;
  text-wrap: pretty;
}

.hero.clean-hero .trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .65rem;
  align-items: center;
  max-width: 52rem;
}

.hero.clean-hero .trust-line span {
  opacity: .55;
}

.case-results .results-intro h2,
.case-senior-evidence .evidence-heading h2 {
  text-wrap: balance;
}

.story-copy p,
.case-prose p,
.evidence-result p {
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .hero.clean-hero h1 span {
  display: inline;
}

.hero.clean-hero h1 span + span::before {
  content: ' ';
}

.hero.clean-hero .trust-line {
  gap: .25rem .5rem;
}

.section-rail {
  display: none;
}

}

/* Final clean hero alignment — shared site container */
.hero.clean-hero {
  min-height:calc(100svh - 76px)!important;
  padding:clamp(104px,12vh,136px) 0 clamp(64px,8vh,92px)!important;
  display:flex!important;
  align-items:center!important;
  background:
    radial-gradient(circle at 82% 42%,rgba(77,22,136,.075),transparent 30%),
    linear-gradient(180deg,#fff 0%,#fbf9fc 100%)!important;
}

.hero.clean-hero .hero-grid {
  width:min(1180px,calc(100% - 40px))!important;
  margin-inline:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,7fr) minmax(240px,3fr)!important;
  gap:clamp(28px,4vw,54px)!important;
  align-items:center!important;
  min-height:0!important;
}

.hero.clean-hero .hero-copy {
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

.hero.clean-hero .kicker {
  margin:0 0 16px!important;
}

.hero.clean-hero h1 {
  width:100%!important;
  max-width:900px!important;
  margin:0!important;
  font-size:clamp(48px,5.15vw,72px)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
  text-wrap:balance!important;
}

.hero.clean-hero h1>span {
  display:block!important;
  white-space:normal!important;
}

.hero.clean-hero .hero-text {
  max-width:680px!important;
  margin:24px 0 0!important;
  font-size:clamp(17px,1.35vw,20px)!important;
  line-height:1.58!important;
}

.hero.clean-hero .actions {
  margin-top:30px!important;
  gap:16px!important;
}

.hero.clean-hero .hero-stage.clean-workspace {
  width:100%!important;
  max-width:360px!important;
  justify-self:end!important;
  margin:0!important;
  opacity:.52!important;
}

@media(max-width:900px) {
  .hero.clean-hero {
  min-height:auto!important;
  padding:112px 0 76px!important;
}

.hero.clean-hero .hero-grid {
  width:min(100% - 40px,820px)!important;
  grid-template-columns:1fr!important;
}

.hero.clean-hero h1 {
  max-width:15ch!important;
  font-size:clamp(46px,7vw,62px)!important;
}

.hero.clean-hero .hero-stage.clean-workspace {
  position:absolute!important;
  right:-20%!important;
  top:18%!important;
  width:58%!important;
  opacity:.055!important;
  z-index:0!important;
}

.hero.clean-hero .hero-copy {
  position:relative!important;
  z-index:1!important;
}

}

@media(max-width:600px) {
  .hero.clean-hero {
  padding:104px 0 64px!important;
}

.hero.clean-hero .hero-grid {
  width:min(100% - 28px,620px)!important;
}

.hero.clean-hero h1 {
  max-width:none!important;
  font-size:clamp(40px,11vw,50px)!important;
  line-height:1.07!important;
}

.hero.clean-hero .hero-text {
  margin-top:20px!important;
  font-size:16px!important;
}

.hero.clean-hero .actions {
  margin-top:24px!important;
}

.hero.clean-hero .hero-stage.clean-workspace {
  right:-42%!important;
  width:105%!important;
  opacity:.035!important;
}

}

/* FINAL BALANCE PASS — HERO, ABOUT HERO AND FOOTER */
.hero.clean-hero .hero-grid {
  width:min(100% - 48px,1180px)!important;
  grid-template-columns:minmax(0,7fr) minmax(250px,3fr)!important;
  gap:clamp(28px,4vw,58px)!important;
  align-items:center!important;
}

.hero.clean-hero .hero-copy {
  width:100%!important;
  max-width:none!important;
  padding-right:clamp(0px,2vw,24px)!important;
}

.hero.clean-hero h1 {
  max-width:100%!important;
  font-size:clamp(46px,4.85vw,68px)!important;
  line-height:1.035!important;
}

.hero.clean-hero .hero-text {
  max-width:650px!important;
}

.hero.clean-hero .hero-stage.clean-workspace {
  width:118%!important;
  max-width:420px!important;
  justify-self:center!important;
  margin-left:-12%!important;
  opacity:.66!important;
  transform:translateY(1%)!important;
}

.about-hero-grid {
  align-items:center!important;
  gap:clamp(36px,5vw,72px)!important;
}

.about-hero-copy h1 {
  max-width:760px!important;
  font-size:clamp(44px,4.7vw,66px)!important;
  line-height:1.04!important;
  letter-spacing:-.04em!important;
  text-wrap:balance!important;
}

.about-hero-copy .about-hero-lead {
  max-width:700px!important;
  font-size:clamp(18px,1.45vw,21px)!important;
  line-height:1.55!important;
}

.about-hero-copy>p:not(.kicker):not(.about-hero-lead) {
  max-width:690px!important;
}

.footer>.shell {
  display:grid!important;
  grid-template-columns:minmax(280px,1fr) auto!important;
  align-items:end!important;
  gap:40px!important;
}

.footer-right {
  display:grid!important;
  justify-items:end!important;
  gap:14px!important;
  text-align:right!important;
}

.footer-menu,
.footer-contact-row {
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:12px 24px!important;
}

.footer-copy {
  margin:0!important;
  text-align:right!important;
}

.footer-brand p {
  margin:0!important;
}

@media(max-width:900px) {
  .hero.clean-hero .hero-grid {
  width:min(100% - 40px,820px)!important;
  grid-template-columns:1fr!important;
}

.hero.clean-hero .hero-copy {
  padding-right:0!important;
}

.hero.clean-hero h1 {
  max-width:15ch!important;
}

.hero.clean-hero .hero-stage.clean-workspace {
  width:64%!important;
  max-width:none!important;
  margin-left:0!important;
}

.about-hero-copy h1 {
  font-size:clamp(42px,7vw,58px)!important;
}

.footer>.shell {
  grid-template-columns:1fr!important;
  align-items:start!important;
}

.footer-right {
  justify-items:start!important;
  text-align:left!important;
}

.footer-menu,
  .footer-contact-row {
  justify-content:flex-start!important;
}

.footer-copy {
  text-align:left!important;
}

}

@media(max-width:600px) {
  .hero.clean-hero .hero-grid {
  width:min(100% - 28px,620px)!important;
}

.hero.clean-hero h1 {
  max-width:none!important;
}

.about-hero-copy h1 {
  font-size:clamp(38px,10vw,48px)!important;
  line-height:1.08!important;
}

.about-hero-copy .about-hero-lead {
  font-size:17px!important;
}

.footer-menu,
  .footer-contact-row {
  gap:10px 18px!important;
}

}

/* FINAL SCREEN-FIT HERO — retain current typography */
.hero.clean-hero {
  min-height:calc(100svh - 76px)!important;
  height:auto!important;
  padding-block:clamp(42px,6vh,72px)!important;
  display:flex!important;
  align-items:center!important;
}

.hero.clean-hero .hero-grid {
  min-height:calc(100svh - 76px - clamp(84px,12vh,144px))!important;
  align-items:center!important;
}

.hero.clean-hero .kicker {
  margin-bottom:12px!important;
}

.hero.clean-hero .hero-text {
  margin-top:20px!important;
}

.hero.clean-hero .actions {
  margin-top:26px!important;
}

@media (max-height:820px) and (min-width:901px) {
  .hero.clean-hero {
  min-height:calc(100svh - 70px)!important;
  padding-block:clamp(28px,4vh,48px)!important;
}

.hero.clean-hero .hero-grid {
  min-height:calc(100svh - 70px - clamp(56px,8vh,96px))!important;
}

.hero.clean-hero .kicker {
  margin-bottom:10px!important;
}

.hero.clean-hero .hero-text {
  margin-top:16px!important;
  line-height:1.5!important;
}

.hero.clean-hero .actions {
  margin-top:20px!important;
}

}

@media(max-width:900px) {
  .hero.clean-hero {
  min-height:auto!important;
  padding:112px 0 72px!important;
}

.hero.clean-hero .hero-grid {
  min-height:auto!important;
}

}

@media(max-width:600px) {
  .hero.clean-hero {
  padding:98px 0 58px!important;
}

}

/* FINAL HERO HEIGHT RESET — exact viewport fit */
.hero.clean-hero {
  height:100svh!important;
  min-height:100svh!important;
  max-height:100svh!important;
  padding:76px 0 0!important;
  display:block!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

.hero.clean-hero .hero-grid {
  width:min(1180px,calc(100% - 40px))!important;
  height:calc(100svh - 76px)!important;
  min-height:0!important;
  margin-inline:auto!important;
  padding-block:clamp(24px,4vh,48px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,70fr) minmax(260px,30fr)!important;
  gap:clamp(24px,3vw,44px)!important;
  align-items:center!important;
  box-sizing:border-box!important;
}

.hero.clean-hero .hero-copy {
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  padding:0!important;
  align-self:center!important;
}

.hero.clean-hero .kicker {
  margin:0 0 12px!important;
}

.hero.clean-hero h1 {
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  font-size:clamp(44px,4.35vw,62px)!important;
  line-height:1.04!important;
  letter-spacing:-.04em!important;
}

.hero.clean-hero .hero-text {
  max-width:720px!important;
  margin:20px 0 0!important;
  font-size:clamp(16px,1.25vw,18px)!important;
  line-height:1.55!important;
}

.hero.clean-hero .actions {
  margin-top:26px!important;
}

.hero.clean-hero .hero-stage.clean-workspace {
  width:100%!important;
  max-width:360px!important;
  height:min(52vh,430px)!important;
  margin:0 auto!important;
  align-self:center!important;
  opacity:.12!important;
  position:relative!important;
  inset:auto!important;
}

@media (max-height:760px) and (min-width:901px) {
  .hero.clean-hero .hero-grid {
  padding-block:20px!important;
}

.hero.clean-hero h1 {
  font-size:clamp(40px,4vw,56px)!important;
}

.hero.clean-hero .hero-text {
  margin-top:16px!important;
  line-height:1.48!important;
}

.hero.clean-hero .actions {
  margin-top:20px!important;
}

.hero.clean-hero .hero-stage.clean-workspace {
  height:min(48vh,360px)!important;
}

}

@media (max-width:900px) {
  .hero.clean-hero {
  height:100svh!important;
  min-height:100svh!important;
  max-height:100svh!important;
  padding:76px 0 0!important;
  overflow:hidden!important;
}

.hero.clean-hero .hero-grid {
  width:min(100% - 32px,760px)!important;
  height:calc(100svh - 76px)!important;
  min-height:0!important;
  padding-block:clamp(24px,5vh,48px)!important;
  grid-template-columns:1fr!important;
  align-content:center!important;
  gap:20px!important;
}

.hero.clean-hero .hero-copy {
  width:100%!important;
}

.hero.clean-hero h1 {
  max-width:15ch!important;
  font-size:clamp(40px,7vw,58px)!important;
}

.hero.clean-hero .hero-stage.clean-workspace {
  position:absolute!important;
  right:-12%!important;
  bottom:4%!important;
  width:48%!important;
  height:34%!important;
  opacity:.045!important;
  pointer-events:none!important;
}

}

@media (max-width:600px) {
  .hero.clean-hero .hero-grid {
  width:min(100% - 28px,620px)!important;
  padding-block:clamp(20px,4vh,34px)!important;
}

.hero.clean-hero .kicker {
  margin-bottom:10px!important;
}

.hero.clean-hero h1 {
  max-width:none!important;
  font-size:clamp(34px,9.2vw,44px)!important;
  line-height:1.06!important;
}

.hero.clean-hero .hero-text {
  margin-top:16px!important;
  font-size:16px!important;
  line-height:1.5!important;
}

.hero.clean-hero .actions {
  margin-top:20px!important;
  gap:10px!important;
}

.hero.clean-hero .hero-stage.clean-workspace {
  display:none!important;
}

}

/* Final footer alignment — brand, menu and copyright on one horizontal line */
.footer {
  padding-block:24px;
}

.footer .shell {
  display:grid!important;
  grid-template-columns:minmax(260px,1fr) auto minmax(220px,1fr)!important;
  align-items:center!important;
  gap:clamp(28px,4vw,64px)!important;
}

.footer-brand {
  justify-self:start;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.footer-brand p {
  margin:0;
  line-height:1.45;
}

.footer-right {
  display:contents!important;
}

.footer-menu {
  grid-column:2;
  justify-self:center;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:clamp(18px,2.2vw,32px)!important;
  white-space:nowrap;
}

.footer-copy {
  grid-column:3;
  justify-self:end;
  margin:0!important;
  text-align:right;
  white-space:nowrap;
}

@media (max-width:900px) {
  .footer .shell {
  grid-template-columns:auto 1fr!important;
  gap:18px 28px!important;
}

.footer-brand {
  grid-column:1;
  grid-row:1;
}

.footer-menu {
  grid-column:2;
  grid-row:1;
  justify-self:end;
  gap:16px!important;
}

.footer-copy {
  grid-column:1 / -1;
  grid-row:2;
  justify-self:start;
  text-align:left;
}

}

@media (max-width:680px) {
  .footer {
  padding-block:28px;
}

.footer .shell {
  grid-template-columns:1fr!important;
  gap:18px!important;
  align-items:start!important;
}

.footer-brand,.footer-menu,.footer-copy {
  grid-column:1!important;
  grid-row:auto!important;
  justify-self:start!important;
  text-align:left!important;
}

.footer-menu {
  flex-wrap:wrap;
  gap:12px 20px!important;
  white-space:normal;
}

.footer-copy {
  white-space:normal;
}

}

/* Restored heading accent — solid line only */
h2:not(.no-heading-accent)::after,
h2:not(.no-heading-accent):after {
  content: "" !important;
  display: block !important;
  position: static !important;
  width: 54px !important;
  min-width: 54px !important;
  height: 3px !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--lime, #d9ff55) !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.case-gate-panel input[type="text"], textarea {
  border: none;
  /* Removes the permanent default border */
    outline: none;
}

/* 2026 recruiter-first hero — final NZ portfolio treatment */
.hero.clean-hero {
  height:auto!important;
  min-height:calc(100svh - 76px)!important;
  max-height:none!important;
  padding:76px 0 0!important;
  display:flex!important;
  align-items:stretch!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 82% 36%,rgba(77,22,136,.11),transparent 30%),
    radial-gradient(circle at 8% 92%,rgba(217,255,85,.08),transparent 22%),
    linear-gradient(180deg,#fcfbff 0%,#fff 100%)!important;
}

.hero.clean-hero .hero-checks {
  opacity:.22!important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 100%);
}

.hero.clean-hero .hero-grid {
  width:min(1180px,calc(100% - 40px))!important;
  min-height:calc(100svh - 76px)!important;
  height:auto!important;
  margin-inline:auto!important;
  padding-block:clamp(44px,7vh,76px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,62fr) minmax(320px,38fr)!important;
  gap:clamp(34px,5vw,72px)!important;
  align-items:center!important;
}

.hero.clean-hero .hero-copy {
  width:100%!important;
  max-width:780px!important;
}

.hero.clean-hero .kicker {
  margin:0 0 18px!important;
  font-size:13px!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}

.hero.clean-hero h1 {
  width:100%!important;
  max-width:13.5ch!important;
  margin:0!important;
  font-size:clamp(48px,5vw,72px)!important;
  line-height:1.02!important;
  letter-spacing:-.048em!important;
  text-wrap:balance!important;
}

.hero.clean-hero h1 .accent-word {
  white-space:normal!important;
}

.hero.clean-hero .hero-text {
  max-width:660px!important;
  margin:24px 0 0!important;
  font-size:clamp(17px,1.35vw,20px)!important;
  line-height:1.55!important;
  color:#5d536a!important;
}

.hero.clean-hero .actions {
  margin-top:30px!important;
  gap:18px!important;
}

.hero-proof {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  max-width:700px;
  margin:38px 0 0;
  padding:20px 0 0;
  border-top:1px solid rgba(36,20,61,.13);
}

.hero-proof li {
  padding-right:18px;
}

.hero-proof li+li {
  padding-left:18px;
  border-left:1px solid rgba(36,20,61,.12);
}

.hero-proof strong,.hero-proof span {
  display:block;
}

.hero-proof strong {
  font-size:14px;
  color:#24143d;
  margin-bottom:4px;
}

.hero-proof span {
  font-size:12px;
  line-height:1.35;
  color:#74687f;
}

.hero-visual {
  position:relative;
  width:100%;
  max-width:500px;
  justify-self:end;
}

.hero-visual::before {
  content:"";
  position:absolute;
  inset:10% 4% 6% 10%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(77,22,136,.13),transparent 68%);
  filter:blur(20px);
}

.hero-visual img {
  position:relative;
  display:block;
  width:100%;
  height:auto;
  filter:saturate(.9);
  animation:heroVisualFloat 7s ease-in-out infinite;
}

@keyframes heroVisualFloat {
  0%,100% {
  transform:translateY(0)
}

50% {
  transform:translateY(-8px)
}

}

@media(max-height:760px) and (min-width:901px) {
  .hero.clean-hero .hero-grid {
  padding-block:28px!important;
}

.hero.clean-hero h1 {
  font-size:clamp(44px,4.55vw,62px)!important;
}

.hero.clean-hero .hero-text {
  margin-top:18px!important;
  font-size:17px!important;
}

.hero-clean-hero .actions {
  margin-top:22px!important;
}

.hero-proof {
  margin-top:26px;
  padding-top:16px;
}

.hero-visual {
  max-width:430px;
}

}

@media(max-width:1000px) {
  .hero.clean-hero .hero-grid {
  grid-template-columns:minmax(0,68fr) minmax(240px,32fr)!important;
  gap:28px!important;
}

.hero.clean-hero h1 {
  font-size:clamp(44px,6vw,62px)!important;
}

.hero-proof {
  grid-template-columns:1fr;
  gap:10px;
}

.hero-proof li,.hero-proof li+li {
  padding:0;
  border:0;
  display:grid;
  grid-template-columns:120px 1fr;
  align-items:baseline;
}

}

@media(max-width:760px) {
  .hero.clean-hero {
  min-height:auto!important;
  padding-top:72px!important;
}

.hero.clean-hero .hero-grid {
  min-height:auto!important;
  grid-template-columns:1fr!important;
  padding-block:54px 64px!important;
  gap:34px!important;
}

.hero.clean-hero h1 {
  max-width:none!important;
  font-size:clamp(38px,11vw,52px)!important;
}

.hero.clean-hero .hero-text {
  font-size:17px!important;
}

.hero-visual {
  max-width:420px;
  justify-self:center;
  opacity:.72;
}

.hero-proof {
  margin-top:30px;
}

}

@media(max-width:520px) {
  .hero.clean-hero .hero-grid {
  width:min(100% - 28px,620px)!important;
  padding-block:42px 52px!important;
}

.hero.clean-hero h1 {
  font-size:clamp(36px,10.7vw,46px)!important;
  line-height:1.04!important;
}

.hero.clean-hero .actions {
  align-items:flex-start!important;
}

.hero-proof li,.hero-proof li+li {
  grid-template-columns:105px 1fr;
}

.hero-visual {
  opacity:.55;
}

}

@media(prefers-reduced-motion:reduce) {
  .hero-visual img {
  animation:none!important;
}

}

/* =========================================================
   FINAL HEADER + HERO ALIGNMENT — FRAMER-STYLE NAVIGATION
   ========================================================= */
.site-header {
  top:14px!important;
  left:50%!important;
  right:auto!important;
  width:min(1180px,calc(100% - 32px))!important;
  transform:translateX(-50%)!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
  pointer-events:none;
  animation:framerNavIn .7s cubic-bezier(.22,1,.36,1) both;
}

.site-header .nav-wrap {
  width:100%!important;
  height:64px!important;
  padding:7px 9px 7px 14px!important;
  border:1px solid rgba(38,20,55,.11)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.78)!important;
  -webkit-backdrop-filter:blur(20px) saturate(155%);
  backdrop-filter:blur(20px) saturate(155%);
  box-shadow:0 10px 34px rgba(37,18,51,.08),inset 0 1px 0 rgba(255,255,255,.86)!important;
  pointer-events:auto;
  transition:height .25s ease,background-color .25s ease,box-shadow .25s ease,transform .25s ease;
}

.site-header.is-scrolled .nav-wrap {
  height:58px!important;
  background:rgba(255,255,255,.2)!important;
  box-shadow:0 14px 38px rgba(37,18,51,.13),inset 0 1px 0 rgba(255,255,255,.95)!important;
}

.site-header .brand {
  gap:10px!important;
  min-width:max-content;
}

.site-header .brand span {
  width:36px!important;
  height:36px!important;
  background:linear-gradient(145deg,#4d1688,#6c22aa)!important;
  /* box-shadow:0 6px 16px rgba(77,22,136,0); */
  transition:transform .25s ease,box-shadow .25s ease;
}

.site-header .brand:hover span {
  transform:rotate(-5deg) scale(1.04);
  box-shadow:0 9px 20px rgba(77,22,136,.28);
}

.site-header .brand strong {
  font-size:14px!important;
  letter-spacing:-.01em;
}

.site-header nav {
  gap:4px!important;
}

.site-header nav a:not(.nav-cta) {
  padding:9px 11px!important;
  border-radius:999px!important;
  color:#403747;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}

.site-header nav a:not(.nav-cta):hover,
.site-header nav a:not(.nav-cta):focus-visible {
  background:rgba(77,22,136,.075);
  color:var(--purple);
  transform:translateY(-1px);
}

.site-header .nav-cta {
  margin-left:5px;
  padding:10px 16px!important;
  border-radius:999px!important;
  background:#18121d!important;
  box-shadow:0 8px 18px rgba(24,18,29,.14);
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease;
}

.site-header .nav-cta:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(24,18,29,.2);
  background:var(--purple)!important;
}

@keyframes framerNavIn {
  from {
  opacity:0;
  transform:translate(-50%,-18px) scale(.98)
}

to {
  opacity:1;
  transform:translate(-50%,0) scale(1)
}

}

.hero.clean-hero {
  min-height:100svh!important;
  padding:0!important;
  align-items:center!important;
}

.hero.clean-hero:after {
  display:none!important;
}

.hero.clean-hero .hero-grid {
  min-height:100svh!important;
  width:min(1180px,calc(100% - 40px))!important;
  padding:112px 0 48px!important;
  grid-template-columns:minmax(0,64fr) minmax(300px,36fr)!important;
  gap:clamp(30px,4vw,54px)!important;
  align-items:center!important;
}

.hero.clean-hero .hero-copy {
  max-width:none!important;
  min-width:0!important;
  align-self:center!important;
}

.hero.clean-hero .kicker {
  margin-bottom:16px!important;
}

.hero.clean-hero h1 {
  max-width:15.8ch!important;
  font-size:clamp(49px,5.05vw,70px)!important;
  line-height:1.015!important;
  letter-spacing:-.05em!important;
  text-wrap:balance!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

.hero.clean-hero .hero-text {
  max-width:620px!important;
  margin-top:22px!important;
  font-size:clamp(17px,1.25vw,19px)!important;
  line-height:1.55!important;
}

.hero.clean-hero .actions {
  margin-top:28px!important;
}

.hero.clean-hero .hero-proof {
  max-width:680px!important;
  margin-top:32px!important;
  padding-top:18px!important;
}

.hero.clean-hero .hero-visual {
  width:100%!important;
  max-width:470px!important;
  justify-self:end!important;
  align-self:center!important;
  transform:translateY(4px);
}

.hero.clean-hero .hero-visual img {
  width:100%!important;
}

@media(max-height:760px) and (min-width:901px) {
  .hero.clean-hero .hero-grid {
  padding:94px 0 24px!important;
}

.hero.clean-hero h1 {
  font-size:clamp(43px,4.35vw,59px)!important;
  max-width:16.4ch!important;
}

.hero.clean-hero .hero-text {
  margin-top:16px!important;
  font-size:16px!important;
}

.hero.clean-hero .actions {
  margin-top:20px!important;
}

.hero.clean-hero .hero-proof {
  margin-top:22px!important;
  padding-top:14px!important;
}

.hero.clean-hero .hero-visual {
  max-width:405px!important;
}

}

@media(max-width:900px) {
  .site-header {
  top:10px!important;
  width:calc(100% - 24px)!important;
}

.site-header .nav-wrap {
  height:60px!important;
  padding:6px 10px 6px 12px!important;
}

.site-header nav {
  top:68px!important;
  left:0!important;
  right:0!important;
  padding:14px!important;
  border:1px solid rgba(38,20,55,.1)!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 18px 45px rgba(37,18,51,.15)!important;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}

.site-header nav a {
  width:100%;
}

.site-header .nav-cta {
  margin:5px 0 0!important;
  text-align:center;
  justify-content:center;
}

.hero.clean-hero .hero-grid {
  grid-template-columns:1fr!important;
  min-height:auto!important;
  padding:112px 0 64px!important;
  gap:34px!important;
}

.hero.clean-hero h1 {
  max-width:15.5ch!important;
  font-size:clamp(44px,7vw,60px)!important;
}

.hero.clean-hero .hero-visual {
  justify-self:center!important;
  max-width:430px!important;
  transform:none;
}

}

@media(max-width:600px) {
  .site-header .brand strong {
  display:none;
}

.site-header .brand span {
  width:34px!important;
  height:34px!important;
}

.hero.clean-hero .hero-grid {
  width:min(100% - 28px,620px)!important;
  padding:100px 0 52px!important;
}

.hero.clean-hero h1 {
  max-width:none!important;
  font-size:clamp(36px,10.6vw,47px)!important;
  line-height:1.04!important;
}

.hero.clean-hero .hero-proof {
  grid-template-columns:1fr!important;
}

.hero.clean-hero .hero-visual {
  max-width:360px!important;
  opacity:.72;
}

}

@media(prefers-reduced-motion:reduce) {
  .site-header {
  animation:none!important;
}

.site-header *, .hero.clean-hero * {
  transition:none!important;
  animation:none!important;
}

}

/* =========================================================
   HERO PROOF FLOW FIX + POINTER GLOW
   ========================================================= */
.hero.clean-hero {
  --hero-glow-x:72%;
  --hero-glow-y:34%;
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
}

.hero.clean-hero::before {
  content:"";
  position:absolute;
  inset:-18%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--hero-glow-x) var(--hero-glow-y),rgba(111,55,168,.16) 0,rgba(111,55,168,.08) 18%,transparent 42%),
    radial-gradient(circle at calc(var(--hero-glow-x) + 8%) calc(var(--hero-glow-y) + 12%),rgba(217,255,85,.08) 0,transparent 28%);
  filter:blur(10px);
  opacity:.9;
  transition:opacity .3s ease;
}

.hero.clean-hero .hero-checks,
.hero.clean-hero .hero-grid {
  position:relative;
  z-index:1;
}

/* Reset legacy floating proof-card styles and keep proof content in flow. */
.hero.clean-hero .hero-proof {
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  width:auto!important;
  max-width:680px!important;
  min-height:0!important;
  margin:32px 0 0!important;
  padding:18px 0 0!important;
  border:0!important;
  border-top:1px solid rgba(36,20,61,.13)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  z-index:auto!important;
  transform:none!important;
}

.hero.clean-hero .hero-proof li {
  position:static!important;
  min-width:0;
}

@media(max-height:760px) and (min-width:901px) {
  .hero.clean-hero .hero-proof {
  margin-top:20px!important;
  padding-top:13px!important;
}

}

@media(max-width:900px) {
  .hero.clean-hero::before {
  inset:-10%;
  background:radial-gradient(circle at 70% 30%,rgba(111,55,168,.11),transparent 42%);
  filter:blur(8px);
}

}

@media(max-width:600px) {
  .hero.clean-hero .hero-proof {
  margin-top:24px!important;
  padding-top:14px!important;
}

}

@media(prefers-reduced-motion:reduce) {
  .hero.clean-hero::before {
  transition:none!important;
}

}

/* =========================================================
   FINAL HERO VISUAL ALIGNMENT + FRAMER-STYLE GLASS GLOW
   ========================================================= */
.hero.clean-hero {
  --hero-glow-x:76%;
  --hero-glow-y:34%;
  --hero-glow-x2:60%;
  --hero-glow-y2:66%;
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,247,253,.94));
}

.hero.clean-hero::before {
  display:block!important;
  inset:-22%!important;
  background:
    radial-gradient(circle at var(--hero-glow-x) var(--hero-glow-y),rgba(123,68,191,.27) 0,rgba(123,68,191,.16) 14%,rgba(123,68,191,.065) 30%,transparent 48%),
    radial-gradient(circle at var(--hero-glow-x2) var(--hero-glow-y2),rgba(217,255,85,.16) 0,rgba(217,255,85,.075) 20%,transparent 42%)!important;
  filter:blur(18px)!important;
  opacity:.95!important;
  animation:heroGlowBreathe 8s ease-in-out infinite alternate;
}

.hero.clean-hero::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(rgba(76,42,101,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(76,42,101,.025) 1px,transparent 1px),
    radial-gradient(ellipse at 82% 48%,rgba(255,255,255,.68),transparent 42%)!important;
  background-size:42px 42px,42px 42px,auto!important;
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 42%,#000 68%,rgba(0,0,0,.25) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 42%,#000 68%,rgba(0,0,0,.25) 100%);
  opacity:.78!important;
}

@keyframes heroGlowBreathe {
  from {
  transform:translate3d(-1.5%,-1%,0) scale(.98);
  opacity:.78
}

to {
  transform:translate3d(1.5%,1%,0) scale(1.04);
  opacity:1
}

}

.hero.clean-hero .hero-grid {
  grid-template-columns:minmax(0,62fr) minmax(330px,38fr)!important;
  gap:clamp(34px,4.5vw,64px)!important;
}

.hero.clean-hero .hero-copy {
  position:relative;
  z-index:2;
}

.hero.clean-hero .hero-visual {
  position:relative!important;
  width:100%!important;
  max-width:500px!important;
  min-height:480px;
  justify-self:end!important;
  display:grid!important;
  place-items:center!important;
  padding:34px 24px!important;
  border:1px solid rgba(255,255,255,.68)!important;
  border-radius:40px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.66),rgba(255,255,255,.28))!important;
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
  box-shadow:
    0 28px 70px rgba(57,27,91,.12),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(91,52,128,.06)!important;
  overflow:visible!important;
  transform:translateY(0)!important;
  isolation:isolate;
}

.hero.clean-hero .hero-visual::before,
.hero.clean-hero .hero-visual::after {
  content:"";
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  z-index:-1;
  filter:blur(8px);
}

.hero.clean-hero .hero-visual::before {
  width:190px;
  height:190px;
  right:-28px;
  top:-34px;
  background:radial-gradient(circle,rgba(118,62,184,.23),rgba(118,62,184,.03) 68%,transparent 72%);
  animation:glassOrbOne 7s ease-in-out infinite alternate;
}

.hero.clean-hero .hero-visual::after {
  width:150px;
  height:150px;
  left:-40px;
  bottom:16px;
  background:radial-gradient(circle,rgba(217,255,85,.20),rgba(217,255,85,.025) 66%,transparent 72%);
  animation:glassOrbTwo 8.5s ease-in-out infinite alternate;
}

@keyframes glassOrbOne {
  from {
  transform:translate3d(-8px,4px,0)
}

to {
  transform:translate3d(12px,-10px,0)
}

}

@keyframes glassOrbTwo {
  from {
  transform:translate3d(6px,-4px,0)
}

to {
  transform:translate3d(-10px,10px,0)
}

}

.hero.clean-hero .hero-visual img {
  width:min(112%,540px)!important;
  max-width:none!important;
  height:auto!important;
  display:block;
  transform:translateX(-2%) scale(1.02);
  filter:drop-shadow(0 18px 30px rgba(61,27,91,.10));
}

@media(max-height:760px) and (min-width:901px) {
  .hero.clean-hero .hero-visual {
  min-height:390px!important;
  max-width:430px!important;
  padding:22px 16px!important;
  border-radius:34px!important;
}

.hero.clean-hero .hero-visual img {
  width:108%!important;
}

}

@media(max-width:900px) {
  .hero.clean-hero .hero-grid {
  grid-template-columns:1fr!important;
}

.hero.clean-hero .hero-visual {
  justify-self:center!important;
  min-height:380px!important;
  max-width:460px!important;
}

.hero.clean-hero::before {
  opacity:.72!important;
}

}

@media(max-width:600px) {
  .hero.clean-hero .hero-visual {
  min-height:300px!important;
  max-width:360px!important;
  padding:18px 12px!important;
  border-radius:30px!important;
  background:rgba(255,255,255,.48)!important;
}

.hero.clean-hero .hero-visual img {
  width:108%!important;
  transform:none!important;
}

.hero.clean-hero::after {
  opacity:.45!important;
}

}

@media(prefers-reduced-motion:reduce) {
  .hero.clean-hero::before,
  .hero.clean-hero .hero-visual::before,
  .hero.clean-hero .hero-visual::after {
  animation:none!important;
}

}

/* =========================================================
   FINAL CLEAN INTERACTIVE HERO VISUAL — NO BACKGROUND GLOW
   ========================================================= */
.hero.clean-hero {
  --visual-rx:0deg;
  --visual-ry:0deg;
  --visual-x:0px;
  --visual-y:0px;
  background:linear-gradient(180deg,#fff 0%,#fcfafc 100%)!important;
}

.hero.clean-hero::before,
.hero.clean-hero::after {
  display:none!important;
  content:none!important;
  animation:none!important;
}

.hero.clean-hero .hero-checks {
  opacity:.18!important;
}

.hero.clean-hero .hero-visual {
  position:relative!important;
  width:100%!important;
  max-width:470px!important;
  min-height:420px!important;
  justify-self:end!important;
  display:grid!important;
  place-items:center!important;
  padding:12px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  overflow:visible!important;
  isolation:isolate;
  perspective:900px;
}

.hero.clean-hero .hero-visual::before,
.hero.clean-hero .hero-visual::after {
  display:none!important;
  content:none!important;
  animation:none!important;
}

.hero.clean-hero .hero-visual img {
  width:100%!important;
  max-width:450px!important;
  height:auto!important;
  display:block;
  opacity:.96;
  filter:none!important;
  transform:
    translate3d(var(--visual-x),var(--visual-y),0)
    rotateX(var(--visual-rx))
    rotateY(var(--visual-ry));
  transform-origin:center;
  transition:transform .55s cubic-bezier(.22,.8,.22,1),opacity .3s ease;
  animation:heroVisualFloat 6.5s ease-in-out infinite;
  will-change:transform;
}

@keyframes heroVisualFloat {
  0%,100% {
  margin-top:0
}

50% {
  margin-top:-10px
}

}

.hero.clean-hero .hero-visual:hover img {
  opacity:1;
}

@media(max-height:760px) and (min-width:901px) {
  .hero.clean-hero .hero-visual {
  min-height:340px!important;
  max-width:410px!important;
  padding:4px!important;
}

.hero.clean-hero .hero-visual img {
  max-width:390px!important;
}

}

@media(max-width:900px) {
  .hero.clean-hero .hero-visual {
  justify-self:center!important;
  min-height:320px!important;
  max-width:420px!important;
  padding:8px!important;
}

.hero.clean-hero .hero-visual img {
  max-width:400px!important;
}

}

@media(max-width:600px) {
  .hero.clean-hero .hero-visual {
  min-height:250px!important;
  max-width:330px!important;
  padding:0!important;
}

.hero.clean-hero .hero-visual img {
  max-width:320px!important;
  opacity:.82;
}

}

@media(prefers-reduced-motion:reduce) {
  .hero.clean-hero .hero-visual img {
  animation:none!important;
  transition:none!important;
  transform:none!important;
}

}


/* Password input: remove browser default border/chrome */
.case-gate-field input[type="password"],
input[type="password"]{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
}

.case-gate-field input[type="password"]:focus,
input[type="password"]:focus{
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}


/* Dynamic case-study password screen: remove h2 accent only inside the gate */
.case-gate-panel h2::before,
.case-gate-panel h2::after,
.case-gate-panel #case-gate-title::before,
.case-gate-panel #case-gate-title::after,
#case-gate-title::before,
#case-gate-title::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}


/* Mobile navigation: closed by default */
@media (max-width: 900px) {
  .site-header nav,
  .site-header .nav-links {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(.98) !important;
  }

  .site-header.is-menu-open nav,
  .site-header.is-menu-open .nav-links,
  .site-header nav.is-open,
  .site-header .nav-links.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  .site-header .nav-toggle[aria-expanded="false"] + nav,
  .site-header .menu-toggle[aria-expanded="false"] + nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}