/* =========================================================
   Services intro compact + Sites landing demo (3 states)
   ========================================================= */

/* ---- Intro spacing & layout ---- */
.services{
  background:
    linear-gradient(180deg,#f7f4ef 0%,#f3f0e9 100%)!important;
}
.services__intro{
  padding:clamp(72px,8vw,96px) 0 clamp(1.25rem,2.5vw,1.75rem)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;
  align-items:end!important;
  gap:clamp(1.25rem,3vw,2.25rem)!important;
  border-bottom:1px solid rgba(17,17,17,.08);
  margin-bottom:0;
  position:relative;
}
.services__intro::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,106,0,.22) 40%,rgba(255,106,0,.22) 60%,transparent);
  opacity:.7;
  pointer-events:none;
}
.services__intro .eyebrow{
  margin-bottom:clamp(16px,2vw,22px)!important;
}
/* Headline: keep original styles from styles.css (size, display, em italic orange) */
.services__intro h2{
  margin:0;
}
.services__intro-lead,
.services__intro>p{
  max-width:380px!important;
  margin:0 0 .15rem!important;
  color:var(--muted,#6f6b63);
  font-size:1.02rem;
  line-height:1.55;
  justify-self:end;
}

/* First service gap from intro */
.service-experience--web{
  padding-top:clamp(56px,6vw,72px)!important;
  padding-bottom:clamp(2.5rem,4vw,3.5rem)!important;
  min-height:0!important;
  border-top:0!important;
}
.service-experience--web .service-experience__grid--web,
.service-experience__grid--web{
  grid-template-columns:minmax(0,.38fr) minmax(0,.62fr)!important;
  gap:clamp(1.5rem,4vw,3rem)!important;
  align-items:center!important;
}
.service-experience--web .service-art{
  min-height:0!important;
  place-items:stretch!important;
  perspective:none!important;
  transform:none!important;
}
.service-experience--web .service-art::before{display:none!important}

.service-experience--web .service-experience__text,
.service-experience--web .service-experience__copy>p:not(.service-experience__tag):not(.service-points){
  max-width:28rem;
  margin-top:1rem;
  color:var(--muted,#6f6b63);
  font-size:1rem;
  line-height:1.55;
}

/* Criteria list */
.service-points{
  list-style:none;
  margin:1.35rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.service-points li{
  position:relative;
  margin:0;
  padding-left:1.1rem;
  color:var(--ink,#111);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.35;
}
.service-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:12px;
  height:1.5px;
  border-radius:2px;
  background:#ff6a00;
}

/* ---- Landing demo browser ---- */
.lp-demo{
  width:100%;
  max-width:100%;
}
.lp-demo__browser{
  border:1px solid rgba(17,17,17,.1);
  border-radius:14px;
  background:#fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 40px rgba(40,28,18,.1),
    0 4px 12px rgba(40,28,18,.05);
  overflow:hidden;
}
.lp-demo__chrome{
  display:flex;
  align-items:center;
  gap:.75rem;
  height:40px;
  padding:0 12px;
  background:linear-gradient(180deg,#f7f5f1,#efece6);
  border-bottom:1px solid rgba(17,17,17,.08);
}
.lp-demo__dots{
  display:flex;
  gap:6px;
  flex:0 0 auto;
}
.lp-demo__dots i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(17,17,17,.14);
  display:block;
}
.lp-demo__dots i:nth-child(1){background:#ff6a00;opacity:.55}
.lp-demo__url{
  flex:1;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(17,17,17,.07);
  color:rgba(17,17,17,.45);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.02em;
}

.lp-demo__viewport{
  position:relative;
  aspect-ratio:16/10;
  background:#f3f0ea;
  overflow:hidden;
}

.lp-pane{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .55s cubic-bezier(.22,1,.36,1),visibility 0s linear .55s;
  pointer-events:none;
}
.lp-pane.is-active{
  opacity:1;
  visibility:visible;
  transition:opacity .55s cubic-bezier(.22,1,.36,1);
  pointer-events:auto;
}
.lp-pane img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}
.lp-pane__label{
  position:absolute;
  left:12px;
  top:12px;
  z-index:4;
  padding:.28rem .55rem;
  border-radius:999px;
  background:rgba(17,17,17,.78);
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Wireframe pane */
.lp-pane--wire{background:#f0ece5}
.lp-wire{
  position:absolute;
  inset:14% 10% 12%;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.lp-wire__nav{
  height:10px;
  width:42%;
  border-radius:4px;
  background:rgba(17,17,17,.1);
  align-self:flex-end;
}
.lp-wire__hero{
  height:28%;
  min-height:54px;
  border-radius:8px;
  background:rgba(17,17,17,.07);
  border:1px dashed rgba(17,17,17,.12);
  margin-top:4%;
}
.lp-wire__line{
  display:block;
  height:8px;
  width:72%;
  border-radius:4px;
  background:rgba(17,17,17,.1);
}
.lp-wire__line--lg{
  height:14px;
  width:58%;
  background:rgba(17,17,17,.16);
  margin-top:2%;
}
.lp-wire__cta{
  width:88px;
  height:26px;
  border-radius:999px;
  background:rgba(17,17,17,.18);
  margin-top:4px;
}
.lp-wire__proof{
  width:46%;
  height:10px;
  border-radius:4px;
  background:rgba(17,17,17,.08);
  margin-top:auto;
}
.lp-wire__blocks{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-top:8px;
}
.lp-wire__blocks i{
  display:block;
  height:36px;
  border-radius:6px;
  background:rgba(17,17,17,.07);
  border:1px solid rgba(17,17,17,.06);
}

/* Conversion overlays */
.lp-pane--action{background:#111}
.lp-pane--action img{
  opacity:.42;
  filter:grayscale(.15);
}
.lp-action{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.lp-action__path{
  position:absolute;
  left:12%;
  top:22%;
  width:2px;
  height:0;
  background:linear-gradient(180deg,#ff6a00,#ff8a3d);
  border-radius:2px;
  box-shadow:0 0 10px rgba(255,106,0,.35);
  opacity:0;
}
.lp-demo[data-state="2"] .lp-action__path,
.lp-pane--action.is-active .lp-action__path{
  animation:lpPathDraw 1.1s cubic-bezier(.22,1,.36,1) .15s forwards;
}
.lp-action__hot{
  position:absolute;
  border:1.5px solid rgba(255,106,0,.85);
  border-radius:10px;
  box-shadow:0 0 0 0 rgba(255,106,0,0);
  opacity:0;
  transform:scale(.96);
}
.lp-action__hot--head{
  left:10%;
  top:16%;
  width:54%;
  height:18%;
}
.lp-action__hot--proof{
  left:10%;
  top:48%;
  width:38%;
  height:12%;
}
.lp-action__hot--cta{
  left:10%;
  top:68%;
  width:28%;
  height:11%;
  border-radius:999px;
}
.lp-demo[data-state="2"] .lp-action__hot--head,
.lp-pane--action.is-active .lp-action__hot--head{
  animation:lpHotIn .45s ease .25s forwards;
}
.lp-demo[data-state="2"] .lp-action__hot--proof,
.lp-pane--action.is-active .lp-action__hot--proof{
  animation:lpHotIn .45s ease .55s forwards;
}
.lp-demo[data-state="2"] .lp-action__hot--cta,
.lp-pane--action.is-active .lp-action__hot--cta{
  animation:lpHotIn .45s ease .85s forwards, lpCtaPulse 1.6s ease 1.3s 2;
}

@keyframes lpPathDraw{
  from{height:0;opacity:0}
  to{height:58%;opacity:1}
}
@keyframes lpHotIn{
  to{opacity:1;transform:scale(1);box-shadow:0 0 0 4px rgba(255,106,0,.12)}
}
@keyframes lpCtaPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(255,106,0,.12)}
  50%{box-shadow:0 0 0 8px rgba(255,106,0,.2)}
}

/* Tabs */
.lp-demo__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.lp-demo__tab{
  appearance:none;
  border:1px solid rgba(17,17,17,.12);
  background:#fff;
  color:rgba(17,17,17,.55);
  font:600 .72rem/1 var(--body,inherit);
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:.55rem .8rem;
  border-radius:999px;
  cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.lp-demo__tab:hover{
  border-color:rgba(255,106,0,.35);
  color:#111;
}
.lp-demo__tab.is-active{
  background:#111;
  border-color:#111;
  color:#fff;
}
.lp-demo__tab:focus-visible{
  outline:2px solid rgba(255,106,0,.55);
  outline-offset:3px;
}

/* Caption */
.lp-demo__caption{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  margin:.7rem 0 0;
  color:rgba(17,17,17,.55);
  font-size:.8rem;
  line-height:1.4;
  letter-spacing:-.01em;
  max-width:36rem;
}
.lp-demo__caption-mark{
  flex:0 0 auto;
  width:14px;
  height:1.5px;
  margin-top:.55em;
  border-radius:2px;
  background:#ff6a00;
}

/* Entrance for demo block */
.service-experience--web.is-in-view .lp-demo__browser{
  animation:lpBrowserIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes lpBrowserIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

/* Other service blocks: keep alternating layout, compact spacing a bit */
.service-experience--ads,
.service-experience--content,
.service-experience--strategy{
  min-height:0!important;
  padding:clamp(2.75rem,5vw,4rem) 0!important;
}
.service-experience--content{
  background:#e8e2d6!important;
}
.service-experience--strategy{
  background:#ff6a00!important;
}

/* Mobile */
@media (max-width:960px){
  .services__intro{
    grid-template-columns:1fr!important;
    align-items:start!important;
    padding:clamp(56px,9vw,80px) 0 1.25rem!important;
    gap:1rem!important;
  }
  .services__intro-lead,
  .services__intro>p{
    max-width:100%!important;
    justify-self:start;
  }
  .service-experience__grid--web{
    grid-template-columns:1fr!important;
    gap:1.5rem!important;
  }
  .service-experience--web{
    padding-top:clamp(40px,7vw,56px)!important;
  }
  .service-experience--web .service-experience__copy{order:0}
  .service-experience--web .service-art{order:1}
  .lp-demo__viewport{aspect-ratio:16/11}
}

@media (max-width:720px){
  .services__intro{
    padding:clamp(48px,10vw,64px) 0 1.1rem!important;
  }
  .service-points{margin-top:1.1rem}
  .lp-demo__tabs{gap:6px}
  .lp-demo__tab{
    font-size:.68rem;
    padding:.5rem .7rem;
  }
  /* simpler motion on mobile */
  .lp-action__path,
  .lp-action__hot{animation:none!important;opacity:1;transform:none;height:auto}
  .lp-demo[data-state="2"] .lp-action__path{height:50%;opacity:.85}
  .lp-demo[data-state="2"] .lp-action__hot{opacity:1}
  .service-experience--web.is-in-view .lp-demo__browser{animation:none;opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .lp-pane{transition:none}
  .service-experience--web.is-in-view .lp-demo__browser,
  .lp-action__path,
  .lp-action__hot{animation:none!important}
  .lp-pane.is-active .lp-action__path{height:50%;opacity:.85}
  .lp-pane.is-active .lp-action__hot{opacity:1;transform:none}
}