/* Continuous editorial layout
   Sections remain semantic in HTML, but the page reads as one composition. */

:root{
  --editorial-max:1420px;
  --editorial-bg:#fbfaff;
  --editorial-ink:#111624;
}

html{background:var(--editorial-bg)}
body{
  padding:0!important;
  background:var(--editorial-bg)!important;
}

/* Navigation belongs to the page, not to a floating outer card. */
.header{
  width:100%!important;
  margin:0!important;
  top:0!important;
  border:0!important;
  border-radius:0!important;
  padding-inline:max(28px,calc((100vw - var(--editorial-max))/2 + 48px))!important;
  box-shadow:0 10px 32px rgba(13,20,33,.12)!important;
}

/* One full-width document canvas. */
body > main{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:var(--editorial-bg)!important;
  box-shadow:none!important;
}

body > main > .hero,
body > main > .services,
body > main > .process,
body > main > .cases,
body > main > .contact{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Hero: full-width atmosphere, stable centred composition. */
body > main > .hero.hero-light{
  min-height:720px!important;
  padding:0!important;
  background-color:#f8f6fb!important;
  background-size:auto 100%!important;
  background-position:80% center!important;
  background-repeat:no-repeat!important;
}
.hero.hero-light .hero-inner{
  position:relative!important;
  display:block!important;
  width:min(var(--editorial-max),100%)!important;
  min-height:720px!important;
  margin:0 auto!important;
  padding:48px 54px!important;
}
.hero.hero-light .hero-media{
  position:absolute!important;
  inset:0!important;
}
.hero.hero-light .results-card{
  right:30px!important;
  bottom:30px!important;
}

/* Stronger conversion area on the desktop hero. */
@media(min-width:1121px){
  .hero.hero-light .experience{
    min-height:48px!important;
    padding-inline:19px!important;
    gap:13px!important;
    font-size:15px!important;
    box-shadow:0 12px 30px rgba(58,39,91,.09),inset 0 1px 0 #fff!important;
  }
  .hero.hero-light .experience span{
    width:9px!important;
    height:9px!important;
  }
  .hero.hero-light .hero-actions{
    gap:14px!important;
    margin-top:24px!important;
  }
  .hero.hero-light .hero-actions .button{
    min-height:64px!important;
    padding-inline:29px!important;
    border-radius:15px!important;
    font-size:15px!important;
    font-weight:750!important;
  }
  .hero.hero-light .hero-actions .button-primary{
    min-width:400px!important;
    background:linear-gradient(135deg,#9558ff 0%,#742ff3 54%,#5d20dc 100%)!important;
    box-shadow:0 18px 42px rgba(111,44,239,.39),0 7px 18px rgba(111,44,239,.2),inset 0 1px 0 rgba(255,255,255,.28)!important;
  }
  .hero.hero-light .hero-actions .button-primary:hover{
    transform:translateY(-3px)!important;
    box-shadow:0 24px 52px rgba(111,44,239,.48),0 10px 24px rgba(111,44,239,.22)!important;
  }
  .hero.hero-light .hero-secondary{
    min-width:184px!important;
    justify-content:center!important;
  }
  .hero.hero-light .hero-consult{
    max-width:690px!important;
    min-height:136px!important;
    margin-top:20px!important;
    padding:24px 26px!important;
    gap:20px!important;
    border-radius:20px!important;
    box-shadow:0 22px 54px rgba(47,32,75,.11),inset 0 1px 0 #fff!important;
  }
  .hero.hero-light .hero-consult .consult-icon{
    width:58px!important;
    height:58px!important;
    border-radius:16px!important;
    font-size:24px!important;
  }
  .hero.hero-light .hero-consult h2{
    margin-bottom:6px!important;
    font-size:21px!important;
  }
  .hero.hero-light .hero-consult p{
    max-width:555px!important;
    margin-bottom:9px!important;
    font-size:14px!important;
    line-height:1.5!important;
  }
  .hero.hero-light .hero-consult a{
    font-size:14px!important;
  }
  .hero.hero-light .results-card{
    right:clamp(-110px,calc((1420px - 100vw)/2),30px)!important;
  }
}

/* The light chapters share the exact same canvas. */
body > main > .services,
body > main > .cases,
body > main > .contact{
  position:relative;
  overflow:visible!important;
  background:transparent!important;
}
body > main > .services{
  padding:118px max(32px,calc((100vw - var(--editorial-max))/2 + 64px)) 142px!important;
}
.services:before{display:none!important}

/* Editorial experience feature: a full-width story, not another section card. */
body > main > .experience-feature{
  position:relative;
  isolation:isolate;
  width:100%;
  margin:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 92% 8%,rgba(134,79,247,.15),transparent 30%),
    linear-gradient(135deg,#f4f0fb 0%,#fbfaff 55%,#eee7fb 100%);
}
.experience-feature:before{
  content:"";
  position:absolute;
  z-index:-1;
  right:-130px;
  bottom:-190px;
  width:460px;
  height:460px;
  border:1px solid rgba(119,67,229,.1);
  border-radius:50%;
  box-shadow:0 0 0 70px rgba(119,67,229,.045),0 0 0 140px rgba(119,67,229,.025);
}
.experience-feature-inner{
  display:grid;
  grid-template-columns:minmax(360px,.86fr) minmax(500px,1.14fr);
  align-items:center;
  gap:clamp(52px,6vw,94px);
  width:min(var(--editorial-max),100%);
  margin:0 auto;
  padding:100px 64px 108px;
}
.experience-feature-visual{
  position:relative;
  min-width:0;
  height:620px;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(39,28,59,.16);
  border-radius:32px;
  background:#151a25;
  box-shadow:0 34px 80px rgba(37,25,58,.2);
}
.experience-feature-visual:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 46%,rgba(14,12,24,.1) 65%,rgba(17,11,30,.84) 100%),linear-gradient(135deg,rgba(126,68,244,.08),transparent 48%);
  pointer-events:none;
}
.experience-feature-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 44%;
  filter:contrast(1.035);
  transform:scale(1.01);
}
.experience-feature-visual figcaption{
  position:absolute;
  z-index:1;
  right:30px;
  bottom:27px;
  left:30px;
  display:grid;
  gap:5px;
  color:#fff;
}
.experience-feature-visual figcaption strong{font-size:19px;letter-spacing:-.025em}
.experience-feature-visual figcaption span{color:#c9c1d7;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.experience-feature-copy{max-width:680px}
.experience-feature-copy .eyebrow{margin-bottom:22px;color:#7540ef}
.experience-feature-copy h2{
  max-width:650px;
  margin:0;
  color:#111624;
  font-size:clamp(50px,5vw,72px);
  line-height:.99;
  letter-spacing:-.06em;
}
.experience-feature-lead{
  max-width:650px;
  margin:30px 0 14px;
  color:#353947;
  font-size:19px;
  font-weight:650;
  line-height:1.6;
}
.experience-feature-text{
  max-width:640px;
  margin:0;
  color:#73707b;
  font-size:15px;
  line-height:1.75;
}
.experience-feature-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:34px 0 30px;
  border-block:1px solid rgba(58,45,78,.14);
}
.experience-feature-facts>div{
  display:grid;
  align-content:center;
  gap:5px;
  min-height:102px;
  padding:18px 18px 18px 0;
}
.experience-feature-facts>div+div{padding-left:20px;border-left:1px solid rgba(58,45,78,.12)}
.experience-feature-facts strong{color:#171b28;font-size:20px;letter-spacing:-.035em}
.experience-feature-facts span{max-width:150px;color:#85818c;font-size:11px;line-height:1.5}
.experience-feature-button{
  min-width:260px;
  min-height:60px;
  justify-content:space-between;
  gap:35px;
  padding-inline:25px;
  border:1px solid #8f5cf6;
  border-radius:15px;
  background:linear-gradient(135deg,#8d52fa 0%,#6f31eb 60%,#5721d3 100%);
  color:#fff;
  box-shadow:0 18px 38px rgba(112,48,231,.3),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .2s ease,box-shadow .2s ease;
}
.experience-feature-button:hover{transform:translateY(-3px);box-shadow:0 24px 48px rgba(112,48,231,.4),inset 0 1px 0 rgba(255,255,255,.22)}
.experience-feature-button span{font-size:19px}

/* A deliberate dark chapter, full bleed and without a container silhouette. */
body > main > .process{
  background:
    radial-gradient(circle at 18% 0,#202a42 0,transparent 34%),
    radial-gradient(circle at 100% 100%,#201743 0,transparent 34%),
    #0b1320!important;
}
.process .process-inner{
  width:min(var(--editorial-max),100%)!important;
  max-width:var(--editorial-max)!important;
  margin:0 auto!important;
  padding:118px 64px 126px!important;
}

/* Cases and contacts are consecutive parts of the same light field. */
body > main > .cases{
  padding:126px max(32px,calc((100vw - var(--editorial-max))/2 + 64px)) 88px!important;
}
.cases:after{display:none!important}
body > main > .contact{
  padding:82px max(36px,calc((100vw - var(--editorial-max))/2 + 72px)) 132px!important;
  background:transparent!important;
}
.contact:before{
  z-index:-1!important;
  right:max(7%,calc((100vw - var(--editorial-max))/2 + 24%))!important;
  top:-175px!important;
  opacity:.72;
}

/* Footer closes the same page canvas. */
.footer{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.footer .footer-inner{
  width:min(var(--editorial-max),100%)!important;
  max-width:var(--editorial-max)!important;
  margin:0 auto!important;
}

@media(max-width:1120px){
  .header{padding-inline:28px!important}
  .hero.hero-light .hero-inner{min-height:690px!important;padding:40px!important}
  .hero.hero-light .results-card{right:24px!important;bottom:24px!important}
  body > main > .services{padding:96px 46px 112px!important}
  .experience-feature-inner{grid-template-columns:minmax(320px,.82fr) minmax(440px,1.18fr);gap:46px;padding:86px 46px 94px}
  .experience-feature-visual{height:560px}
  .process .process-inner{padding:98px 46px 106px!important}
  body > main > .cases{padding:104px 46px 76px!important}
  body > main > .contact{padding:72px 54px 112px!important}
}

@media(max-width:900px){
  .header{padding-inline:22px!important}
  body > main,
  body > main > .hero,
  body > main > .services,
  body > main > .process,
  body > main > .cases,
  body > main > .contact,
  .footer{
    width:100%!important;
    border-radius:0!important;
  }
  body > main > .hero.hero-light{
    min-height:0!important;
    padding:360px 28px 34px!important;
    background-size:auto 390px!important;
    background-position:center top!important;
  }
  .hero.hero-light .hero-inner{display:contents!important}
  .hero.hero-light .hero-media{position:relative!important;inset:auto!important}
  .hero.hero-light .results-card{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:none!important;
  }
  body > main > .services{padding:78px 28px 92px!important}
  .experience-feature-inner{grid-template-columns:minmax(280px,.8fr) minmax(380px,1.2fr);gap:34px;padding:76px 28px 82px}
  .experience-feature-visual{height:510px;border-radius:26px}
  .experience-feature-copy h2{font-size:clamp(45px,6vw,57px)}
  .experience-feature-lead{margin-top:24px;font-size:17px}
  .experience-feature-facts{margin-block:27px 25px}
  .experience-feature-facts>div{min-height:90px;padding-right:10px}
  .experience-feature-facts>div+div{padding-left:13px}
  .process .process-inner{padding:82px 28px 90px!important}
  body > main > .cases{padding:86px 28px 58px!important}
  body > main > .contact{padding:58px 28px 88px!important}
}

@media(max-width:620px){
  body > main > .hero.hero-light{
    padding:218px 0 20px!important;
    background-size:auto 250px!important;
  }
  body > main > .services{padding:66px 20px 78px!important}
  .experience-feature-inner{display:flex;flex-direction:column;align-items:stretch;gap:42px;padding:64px 20px 70px}
  .experience-feature-visual{width:100%;height:430px;border-radius:24px}
  .experience-feature-visual img{object-position:center 38%}
  .experience-feature-visual figcaption{right:22px;bottom:21px;left:22px}
  .experience-feature-copy{max-width:none}
  .experience-feature-copy h2{font-size:clamp(39px,12vw,48px)}
  .experience-feature-lead{font-size:16px;line-height:1.55}
  .experience-feature-text{font-size:14px;line-height:1.65}
  .experience-feature-facts{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:27px}
  .experience-feature-facts>div{min-height:94px;padding:15px 8px 15px 0}
  .experience-feature-facts>div+div{padding-left:10px}
  .experience-feature-facts strong{font-size:17px}
  .experience-feature-facts span{font-size:9px}
  .experience-feature-button{width:100%;min-width:0}
  .process .process-inner{padding:70px 20px 78px!important}
  body > main > .cases{padding:72px 20px 48px!important}
  body > main > .contact{padding:48px 20px 72px!important}
  .contact:before{display:none!important}
}