/* =========================================================
   UI polish: hero, method cards, difference fill, clarity,
   scroll fade, kill progress bar / clutter
   ========================================================= */

.scroll-progress{display:none!important}

/* ---- Scroll fade (shared) ---- */
.js .reveal{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0ms);
}
.js .reveal.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ---- Light sections depth ---- */
.clarity,
.services,
.difference,
.precision{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(255,106,0,.045),transparent 55%),
    linear-gradient(180deg,#f7f4ef 0%,#fafafa 40%,#f3f0ea 100%);
}
.services__intro,
.difference__heading,
.precision__head,
.clarity__head{
  position:relative;
}

/* ---- Hero secondary CTA + orbits ---- */
.hero-stage__chip{display:none!important}
.hero-stage__secondary{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-height:52px;
  padding:.75rem 1.15rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:.95rem;
  font-weight:600;
  text-decoration:none;
  backdrop-filter:blur(8px);
  opacity:0;
  transform:translateY(12px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1),background .2s,border-color .2s;
}
.hero-stage__secondary.is-on{opacity:1;transform:none}
.hero-stage__secondary:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.45);
}
.hero-stage__secondary-icon{
  display:inline-grid;
  place-items:center;
  width:1.4rem;
  height:1.4rem;
  border-radius:50%;
  background:rgba(255,106,0,.2);
  color:#ff8a3d;
  font-size:.75rem;
}
.hero-stage__ghost{display:none!important}

/* Orbit pins: full-size rotator + content at top edge */
.orbit-pin{
  position:absolute;
  inset:0;
  display:block;
  transform:rotate(var(--a,0deg));
  animation:pinIn .75s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--delay,.5s);
  pointer-events:none;
}
.orbit-pin__dot,
.orbit-pin__media{
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%,-50%) rotate(calc(var(--a,0deg) * -1));
  box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.12);
}
.orbit-pin__dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:.4rem .75rem;
  border-radius:999px;
  background:rgba(17,17,17,.92);
  border:1px solid rgba(255,106,0,.45);
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.orbit-pin__media{
  width:64px;
  height:64px;
  border-radius:16px;
  overflow:hidden;
  background:#1a1612;
}
.orbit-pin__media--sm{width:56px;height:56px;border-radius:14px}
.orbit-pin__media--lg{width:76px;height:76px;border-radius:18px}
.orbit-pin__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@keyframes pinIn{
  from{opacity:0}
  to{opacity:1}
}
.orbit-node{display:none!important}

/* ---- Clarity compare (legacy leftovers; shell spacing in section-rhythm.css) ---- */
.clarity__lead{
  margin:0;
  max-width:34rem;
  color:#6f675e;
  font-size:1.02rem;
}
.clarity__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:1.25rem 1.5rem;
  align-items:start;
  width:100%;
  max-width:1100px;
}
.clarity__col-label{
  margin:0 0 .35rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.clarity__col-label--bad{color:#b45309}
.clarity__col-label--good{color:#c2410c}
.clarity-card{
  border:1px solid transparent;
  box-shadow:0 8px 24px rgba(40,28,18,.07),0 1px 0 rgba(255,255,255,.8) inset;
}
.clarity-card--bad{
  background:linear-gradient(180deg,#fff,#faf6f2);
  border-color:#f0e4d8;
  border-left:4px solid #d4a574;
  color:#5c534a;
}
.clarity-card--good{
  background:linear-gradient(180deg,#fff,#fff8f2);
  border-color:rgba(255,106,0,.22);
  border-left:4px solid #ff6a00;
  color:#1a120c;
  box-shadow:0 10px 28px rgba(255,106,0,.1),0 1px 0 rgba(255,255,255,.9) inset;
}
.clarity-card__icon{
  width:22px;
  height:22px;
  font-size:.75rem;
}
.clarity-card--bad .clarity-card__icon{
  background:#f5ebe3;
  color:#9a3412;
}
.clarity-card--good .clarity-card__icon{
  background:#ff6a00;
  color:#fff;
}
.clarity__vs{
  align-self:center;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 12px 30px rgba(17,17,17,.18);
}
.clarity__video{display:none!important}

@media (max-width:1024px){
  .clarity__grid{grid-template-columns:1fr;max-width:520px}
  .clarity__vs{justify-self:center;order:0;margin:.25rem 0}
  .clarity__col:first-child{order:-1}
}

/* ---- Method cards (replaces buggy sticky scroll) ---- */
.method--cards{
  /* vertical padding: section-rhythm.css */
  overflow:hidden;
}
.method--cards .method__layout,
.method--cards .method__sticky,
.method--cards .method__steps,
.method--cards .method-progress,
.method--cards .method-live,
.method--cards .method-radar{display:none!important}

.method-cards__intro{
  max-width:40rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.method-cards__intro h2{
  font:650 clamp(2.4rem,4.5vw,4.2rem)/.98 var(--display,inherit);
  letter-spacing:-.04em;
  margin:.25rem 0 1rem;
}
.method-cards__intro h2 em{
  color:#ff8a52;
  font-family:var(--editorial,serif);
  font-style:italic;
  font-weight:400;
  -webkit-text-stroke:0;
}
.method-cards__intro>p:not(.eyebrow){
  color:rgba(255,255,255,.58);
  font-size:1.05rem;
  max-width:34rem;
}
.method-cards__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem;
}
.method-card{
  position:relative;
  padding:1.35rem 1.2rem 1.5rem;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 40px rgba(0,0,0,.22);
  min-height:100%;
}
.method-card__num{
  display:block;
  color:#ff6a00;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
}
.method-card__label{
  margin:.85rem 0 .35rem;
  color:rgba(255,255,255,.45);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.method-card h3{
  margin:0 0 .65rem;
  font:650 1.35rem/1.15 var(--display,inherit);
  letter-spacing:-.03em;
  color:#fff;
}
.method-card>p:last-child{
  margin:0;
  color:rgba(255,255,255,.58);
  font-size:.9rem;
  line-height:1.55;
}

@media (max-width:1100px){
  .method-cards__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .method-cards__grid{grid-template-columns:1fr}
  .method-card{padding:1.2rem 1.1rem}
}

/* ---- Difference: dark fill + cycle ---- */
.difference-toolbar{display:none!important}
.difference-console{
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(17,17,17,.1);
  box-shadow:0 18px 50px rgba(40,28,18,.08);
  background:#fff;
  min-height:0;
}
.difference-tabs{
  background:#f6f2eb;
}
.difference-tab{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid!important;
  grid-template-columns:35px 1fr!important;
  align-items:center;
  gap:1rem;
  background:transparent!important;
  color:var(--ink,#111);
}
.difference-tab::before{display:none!important}
/* ::after reserved for orange progress bar on active tab (hero-clean.css) */
.difference-tab__fill{
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg,#1a1714,#111);
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
}
.difference-tab.is-active .difference-tab__fill{
  animation:diffFill var(--diff-cycle,5.2s) linear forwards;
}
.difference-tab > *:not(.difference-tab__fill){
  position:relative;
  z-index:1;
}
.difference-tab__n{
  color:#8a8378;
  font-size:.58rem;
  letter-spacing:.08em;
  grid-column:1;
}
.difference-tab__copy{grid-column:2}
.difference-tab.is-active,
.difference-tab.is-active .difference-tab__copy,
.difference-tab.is-active .difference-tab__copy small,
.difference-tab.is-active .difference-tab__n{
  color:#fff;
}
.difference-stage{
  background:#faf8f4;
  min-height:420px;
  padding:0;
}
.difference-panel{
  position:relative;
  inset:auto;
  padding:clamp(1.75rem,3vw,2.75rem);
  display:block;
  max-width:36rem;
  animation:diffPanelIn .45s cubic-bezier(.22,1,.36,1);
}
.difference-panel[hidden]{display:none!important}
.diff-panel__kicker{
  margin:0 0 .75rem;
  color:#ff6a00;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.difference-panel h3{
  margin:0 0 .85rem;
  font:650 clamp(1.5rem,2.5vw,2.1rem)/1.15 var(--display,inherit);
  letter-spacing:-.03em;
  color:#15110e;
}
.difference-panel>p{
  margin:0 0 1.25rem;
  color:#5f574e;
  font-size:1.02rem;
  line-height:1.6;
}
.diff-panel__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.55rem;
}
.diff-panel__list li{
  position:relative;
  padding:.7rem .9rem .7rem 2.1rem;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  box-shadow:0 6px 16px rgba(40,28,18,.05);
  color:#2a241e;
  font-size:.92rem;
  font-weight:500;
}
.diff-panel__list li::before{
  content:"";
  position:absolute;
  left:.85rem;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff6a00;
  transform:translateY(-50%);
}
@keyframes diffFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes diffPanelIn{from{opacity:0;transform:translate3d(12px,0,0)}to{opacity:1;transform:none}}

/* Hide leftover CSS art systems from difference panels
   (do NOT target .clarity-flow — that is the live clarity section) */
.difference .clarity-map,
.difference-panel .clarity-map,
.performance-system,
.conversation-system,
.agility-system{display:none!important}

/* Services: slightly softer art presence */
.service-experience--ads .acquisition-map{
  opacity:.92;
  filter:saturate(.9);
}
.acq-source,
.acq-core{
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

@media (prefers-reduced-motion:reduce){
  .difference-tab.is-active .difference-tab__fill{transform:scaleX(1);animation:none}
  .orbit-pin{animation:none;opacity:1}
  .difference-panel{animation:none}
}