/* ==========================================================================
   Deskman Studio — Services (redesign)
   Loaded ONLY on the Services page, after main.css. Every selector is scoped
   under .svc-redesign so nothing here can affect any other page. Colour,
   type and spacing tokens are inherited from main.css :root (--electric,
   --violet, --coral, --ink, --paper, --font-display …), so this file adds no
   new fonts and no new palette — it only composes the page.
   ========================================================================== */

.svc-redesign{
  --sv-black:#0E0D0D;          /* the near-black used for dark UI objects */
  --sv-black-2:#1A1818;        /* dark card surface on the process band   */
  --sv-white:#FFFFFF;
  --sv-paper:#F4F3F1;
  --sv-line:#E5E4E1;
  --sv-ink:#191717;
  --sv-muted:#6E6A6A;
  --sv-lime:var(--electric);
  --sv-violet:var(--violet);
  --sv-coral:var(--coral);
  --sv-r:22px;                 /* large card radius */
  --sv-r-sm:14px;
  --sv-ease:cubic-bezier(.62,.05,0,1);
  background:var(--sv-paper);
  color:var(--sv-ink);
  overflow-x:clip;             /* contain decorative bleed, no h-scroll */
}
.svc-redesign *{ box-sizing:border-box; }
.svc-redesign .wrap{ position:relative; }

/* shared type ------------------------------------------------------------- */
.svc-redesign .svc-eyebrow{
  display:inline-flex; align-items:center; gap:.6em; margin:0 0 var(--sp-24);
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; color:var(--sv-ink);
}
.svc-redesign .svc-eyebrow .d{ width:9px; height:9px; border-radius:50%;
  background:var(--sv-lime); display:inline-block; }
.svc-redesign .svc-eyebrow--violet .d{ background:var(--sv-violet); }
.svc-redesign .svc-eyebrow--onDark{ color:#EDEBEB; }
.svc-redesign .svc-eyebrow--onDark .d{ background:var(--sv-lime); }

.svc-redesign .svc-h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.04em;
  line-height:1.0; font-size:clamp(2.1rem,4.6vw,3.5rem); color:var(--sv-ink);
  margin:0;
}
.svc-redesign .svc-h2--onDark{ color:#F5F4F4; }

/* handwritten micro-notes ------------------------------------------------- */
.svc-redesign .svc-note{
  font-family:var(--font-script); font-weight:700; color:var(--sv-ink);
  font-size:clamp(1.05rem,1.5vw,1.35rem); line-height:1.05; position:relative;
  display:inline-block;
}
.svc-redesign .svc-note__arc{ position:absolute; width:52px; height:auto;
  color:var(--sv-ink); opacity:.85; }

/* ==========================================================================
   01 · HERO
   ========================================================================== */
.svc-redesign .svc-hero{
  padding:calc(var(--nav-top) + var(--nav-h) + var(--ticker-h) + var(--sp-56)) 0 var(--sp-64);
}
.svc-redesign .svc-hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-48);
  align-items:center;
}
.svc-redesign .svc-h1{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.05em;
  line-height:.92; font-size:clamp(3rem,7.6vw,6rem); color:var(--sv-ink);
  margin:.1em 0 var(--sp-24);
}
.svc-redesign .svc-h1__l1,.svc-redesign .svc-h1__l2{ display:block; position:relative; }
.svc-redesign .svc-h1__l1{ white-space:nowrap; }
.svc-redesign .svc-star{
  color:var(--sv-violet); font-weight:400; font-size:.5em; vertical-align:.42em;
  margin-left:.18em; display:inline-block; transform:rotate(2deg);
}
.svc-redesign .svc-h1__l2{ display:inline-block; }
.svc-redesign .svc-underline{
  position:absolute; left:0; right:8%; bottom:.02em; height:.14em;
  background:var(--sv-lime); border-radius:2px; transform:rotate(-.6deg);
}
.svc-redesign .svc-lead{
  max-width:46ch; font-size:1.06rem; line-height:1.62; color:var(--sv-muted);
}

/* hero artwork ------------------------------------------------------------ */
.svc-redesign .svc-hero__art{
  position:relative; min-height:340px; display:flex; justify-content:center;
  align-items:center;
}
.svc-redesign .svc-artcard{
  border-radius:var(--sv-r);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.55);
}
/* violet card sits BEHIND and to the RIGHT, so its right third peeks out */
.svc-redesign .svc-artcard--violet{
  position:absolute; left:52%; top:14%; width:46%; aspect-ratio:1/1.02;
  background:var(--sv-violet); color:#fff; transform:rotate(7deg);
  padding:var(--sp-24); z-index:1;
}
.svc-redesign .svc-artcard--violet .svc-artcard__pill{
  position:absolute; top:16px; right:16px; font-family:var(--font-mono);
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:5px 10px;
  color:#fff;
}
.svc-redesign .svc-artcard--violet .svc-artcard__dot{
  position:absolute; left:20px; top:22px; width:11px; height:11px;
  border-radius:50%; background:var(--sv-lime);
}
.svc-redesign .svc-artcard--violet .svc-artcard__txt{
  position:absolute; left:20px; bottom:20px; font-family:var(--font-display);
  font-weight:700; font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.02;
  letter-spacing:-.03em;
}
.svc-redesign .svc-artcard--dark{
  position:relative; width:60%; aspect-ratio:1/1.06; background:var(--sv-black);
  color:#EDEBEB; transform:rotate(-5deg) translateX(-9%); padding:var(--sp-24);
  z-index:2;
}
.svc-redesign .svc-artcard__brand{
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:#fff;
}
.svc-redesign .svc-artcard__brand i{ color:var(--sv-lime); font-style:normal; }
.svc-redesign .svc-artcard__stack{
  margin:var(--sp-16) 0 0; display:flex; flex-direction:column; gap:.08em;
  font-family:var(--font-display); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(1.35rem,2.7vw,2.05rem); line-height:1.06; color:#CFCDCD;
}
.svc-redesign .svc-artcard__go{
  position:absolute; right:18px; bottom:18px; width:46px; height:46px;
  border-radius:50%; background:var(--sv-lime); color:var(--sv-black);
  display:grid; place-items:center;
}
.svc-redesign .svc-artcard__go svg{ width:22px; height:22px; }
.svc-redesign .svc-note--hero{ position:absolute; top:-6%; right:2%; color:var(--sv-ink); }
.svc-redesign .svc-note--hero .svc-note__arc{ left:-46px; top:6px; }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.svc-redesign .svc-stats-sec{ padding-bottom:var(--sp-72); }
.svc-redesign .svc-stats{
  display:grid; grid-template-columns:auto auto 1fr 1.4fr; gap:var(--sp-40);
  align-items:center; background:var(--sv-white); border:1px solid var(--sv-line);
  border-radius:var(--sv-r); padding:var(--sp-32) var(--sp-40);
}
.svc-redesign .svc-stat b{ display:block; font-family:var(--font-display);
  font-weight:700; font-size:clamp(1.6rem,2.6vw,2.1rem); letter-spacing:-.03em;
  line-height:1; color:var(--sv-ink); }
.svc-redesign .svc-stat span{ display:block; margin-top:6px;
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--sv-muted); }
.svc-redesign .svc-stat__lead{ font-size:clamp(1.05rem,1.6vw,1.3rem)!important;
  font-weight:700; line-height:1.1; }
.svc-redesign .svc-stat__copy{ font-size:.98rem; line-height:1.6;
  color:var(--sv-muted); max-width:44ch; }

/* ==========================================================================
   03 · INTRO / PHILOSOPHY
   ========================================================================== */
.svc-redesign .svc-intro{ padding:var(--sp-24) 0 var(--sp-64); }
.svc-redesign .svc-intro__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-48); align-items:end;
}
.svc-redesign .svc-intro__body{ position:relative; padding-top:var(--sp-24); }
.svc-redesign .svc-intro__body p{ max-width:40ch; font-size:1.05rem;
  line-height:1.7; color:var(--sv-muted); }
.svc-redesign .svc-note--intro{ position:absolute; right:2%; bottom:-8%;
  text-align:right; transform:rotate(-4deg); }
.svc-redesign .svc-note--intro .svc-note__arc{ left:-40px; bottom:-30px; }

/* ==========================================================================
   04 · SERVICE CARDS
   ========================================================================== */
.svc-redesign .svc-cards-sec{ padding-bottom:var(--sp-80); }
.svc-redesign .svc-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-24);
}
.svc-redesign .svc-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--sv-white); border:1px solid var(--sv-line);
  border-radius:var(--sv-r); padding:var(--sp-32);
  transition:transform .4s var(--sv-ease), box-shadow .4s var(--sv-ease),
             border-color .4s var(--sv-ease);
}
.svc-redesign .svc-card__top{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:var(--sp-24);
}
.svc-redesign .svc-card__num{ font-family:var(--font-mono); font-size:11px;
  font-weight:600; letter-spacing:.1em; color:var(--sv-violet); }
.svc-redesign .svc-card__icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  color:var(--sv-ink); transition:transform .4s var(--sv-ease);
}
.svc-redesign .svc-card__icon svg{ width:24px; height:24px; }
.svc-redesign .svc-card__icon--lime{ background:#E7FFD2; color:#3B7A15; }
.svc-redesign .svc-card__icon--violet{ background:#ECE7FF; color:var(--sv-violet); }
.svc-redesign .svc-card__title{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:1.32rem; line-height:1.08; color:var(--sv-ink); margin:0 0 .35em;
  max-width:14ch;
}
.svc-redesign .svc-card__cat{ font-family:var(--font-mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.09em; color:var(--sv-muted);
  margin:0 0 var(--sp-16); }
.svc-redesign .svc-card__desc{ font-size:.97rem; line-height:1.6;
  color:var(--sv-muted); margin:0 0 var(--sp-24); }
.svc-redesign .svc-card__more{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  padding-top:var(--sp-16); border-top:1px solid var(--sv-line);
  font-weight:600; font-size:.95rem; color:var(--sv-violet);
}
.svc-redesign .svc-card__arrow{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--sv-line);
  display:grid; place-items:center; color:var(--sv-ink);
  transition:transform .4s var(--sv-ease), background .4s var(--sv-ease),
             color .4s var(--sv-ease), border-color .4s var(--sv-ease);
}
.svc-redesign .svc-card__arrow svg{ width:16px; height:16px; }

/* hover — subtle, fast, high quality */
@media (hover:hover){
  .svc-redesign .svc-card:hover{
    transform:translateY(-6px); border-color:#D2D0CC;
    box-shadow:0 26px 50px -30px rgba(0,0,0,.35);
  }
  .svc-redesign .svc-card:hover .svc-card__icon{ transform:rotate(-6deg) scale(1.05); }
  .svc-redesign .svc-card:hover .svc-card__arrow{
    background:var(--sv-lime); color:var(--sv-black); border-color:var(--sv-lime);
    transform:rotate(45deg);
  }
}

/* ==========================================================================
   06 · DARK PROCESS
   ========================================================================== */
.svc-redesign .svc-process{
  position:relative; background:var(--sv-black); color:#EDEBEB;
  border-radius:32px; margin:0 auto; padding:var(--sp-72) 0 var(--sp-64);
  overflow:hidden;
}
.svc-redesign .svc-process__blob{
  position:absolute; left:-3%; bottom:-6%; font-size:24rem; line-height:1;
  color:rgba(255,255,255,.03); pointer-events:none; z-index:0;
}
.svc-redesign .svc-process .wrap{ z-index:1; }
.svc-redesign .svc-process__head{
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-40);
  align-items:center; margin-bottom:var(--sp-48);
}
.svc-redesign .svc-ring{ position:relative; display:inline-block; color:#F5F4F4; }
.svc-redesign .svc-ring svg{
  position:absolute; left:50%; top:50%; width:126%; height:150%;
  transform:translate(-50%,-50%); color:var(--sv-lime); overflow:visible;
}
.svc-redesign .svc-process__intro{ position:relative; }
.svc-redesign .svc-process__intro p{ max-width:42ch; color:#B7B4B4;
  font-size:1.02rem; line-height:1.62; }
.svc-redesign .svc-note--proc{ position:absolute; right:0; top:-58px;
  color:#CFCDCD; text-align:right; transform:rotate(3deg); }
.svc-redesign .svc-note--proc .svc-note__arc{ right:20px; top:34px; color:#CFCDCD; }

.svc-redesign .svc-steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-16);
}
.svc-redesign .svc-step{
  background:var(--sv-black-2); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--sv-r-sm); padding:var(--sp-24);
  transition:transform .4s var(--sv-ease), border-color .4s var(--sv-ease),
             background .4s var(--sv-ease);
}
.svc-redesign .svc-step__top{ display:flex; align-items:center;
  justify-content:space-between; margin-bottom:var(--sp-32); }
.svc-redesign .svc-step__num{ font-family:var(--font-mono); font-size:11px;
  letter-spacing:.1em; color:#8B8888; }
.svc-redesign .svc-step__icon{
  width:40px; height:40px; border-radius:50%; background:#ECE7FF;
  color:var(--sv-violet); display:grid; place-items:center;
  transition:transform .4s var(--sv-ease);
}
.svc-redesign .svc-step__icon svg{ width:20px; height:20px; }
.svc-redesign .svc-step__title{ font-family:var(--font-display); font-weight:700;
  font-size:1.2rem; color:#F5F4F4; margin:0 0 .4em; letter-spacing:-.02em; }
.svc-redesign .svc-step__desc{ font-size:.92rem; line-height:1.55; color:#A9A6A6; }
@media (hover:hover){
  .svc-redesign .svc-step:hover{ transform:translateY(-5px);
    border-color:rgba(161,255,98,.5); background:#211E1E; }
  .svc-redesign .svc-step:hover .svc-step__icon{ transform:scale(1.08); }
}

/* 07 · flow sequence */
.svc-redesign .svc-flow{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6em var(--sp-16);
  margin-top:var(--sp-48); padding-top:var(--sp-32);
  border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:#B7B4B4;
}
.svc-redesign .svc-flow__node{ color:#EDEBEB; }
.svc-redesign .svc-flow__arr{ color:var(--sv-lime); }

/* ==========================================================================
   08 · CTA
   ========================================================================== */
.svc-redesign .svc-cta{ padding:var(--sp-80) 0 var(--sp-112); }
.svc-redesign .svc-cta__grid{
  display:grid; grid-template-columns:1.02fr .98fr; gap:var(--sp-40);
  align-items:center;
}
.svc-redesign .svc-cta__card{
  position:relative; background:var(--sv-violet); color:#fff;
  border-radius:26px; padding:var(--sp-48); overflow:hidden;
  box-shadow:0 34px 60px -34px rgba(104,64,255,.6);
}
.svc-redesign .svc-cta__brand{ font-family:var(--font-display); font-weight:700;
  font-size:1.05rem; color:#fff; }
.svc-redesign .svc-cta__brand i{ color:var(--sv-lime); font-style:normal; }
.svc-redesign .svc-cta__pill{
  position:absolute; top:var(--sp-40); right:var(--sp-40);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; border:1px solid rgba(255,255,255,.55);
  border-radius:999px; padding:7px 14px; color:#fff;
}
.svc-redesign .svc-cta__h{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.04em;
  line-height:.98; font-size:clamp(2.1rem,4vw,3.1rem); margin:var(--sp-32) 0 .3em;
}
.svc-redesign .svc-cta__sub{ max-width:40ch; color:rgba(255,255,255,.85);
  font-size:1.02rem; line-height:1.55; margin-bottom:var(--sp-32); }
.svc-redesign .svc-cta__btn{
  display:inline-flex; align-items:center; gap:.5em; height:3rem;
  padding-inline:1.6rem; border-radius:999px; background:#fff; color:var(--sv-ink);
  font-weight:600; font-size:1rem;
  transition:transform .3s var(--sv-ease), background .3s var(--sv-ease);
}
.svc-redesign .svc-cta__btn .ar{ transition:transform .3s var(--sv-ease); }
@media (hover:hover){
  .svc-redesign .svc-cta__btn:hover{ transform:translateY(-2px); background:var(--sv-lime); }
  .svc-redesign .svc-cta__btn:hover .ar{ transform:translateX(4px); }
}

/* aside: rotated black chip + process tree */
.svc-redesign .svc-cta__aside{ position:relative; min-height:300px;
  display:flex; align-items:center; gap:var(--sp-24); }
.svc-redesign .svc-cta__chip{
  position:relative; background:var(--sv-black); color:#EDEBEB;
  border-radius:20px; padding:var(--sp-24); width:52%; aspect-ratio:1/.94;
  transform:rotate(-7deg); box-shadow:0 30px 55px -32px rgba(0,0,0,.6);
  z-index:2;
}
.svc-redesign .svc-cta__chipdot{ position:absolute; left:20px; top:20px;
  width:11px; height:11px; border-radius:50%; background:var(--sv-lime); }
.svc-redesign .svc-cta__chiptxt{ position:absolute; left:22px; bottom:46px;
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.05; }
.svc-redesign .svc-cta__chipbrand{ position:absolute; left:22px; bottom:20px;
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.02em; color:#fff; }
.svc-redesign .svc-cta__chipbrand i{ font-style:normal; color:#8B8888; }
.svc-redesign .svc-cta__tree{ position:relative; z-index:1; flex:1;
  padding-left:var(--sp-16); }
.svc-redesign .svc-cta__tree ul{ display:flex; flex-direction:column; gap:.85em; }
.svc-redesign .svc-cta__tree li{ position:relative; display:flex; align-items:center;
  gap:.6em; font-family:var(--font-script); font-weight:700;
  font-size:1.25rem; color:var(--sv-ink); }
.svc-redesign .svc-cta__leaf{ width:22px; height:1.5px; background:#C9C7C3;
  display:inline-block; }
.svc-redesign .svc-cta__star{ position:absolute; color:#D8D6D2; font-size:1.4rem; }
.svc-redesign .svc-cta__star--1{ right:6%; top:2%; }
.svc-redesign .svc-cta__star--2{ right:20%; bottom:6%; font-size:1rem; }

/* ==========================================================================
   REVEAL — hook into main.js's .fade/.anim system, add a small stagger.
   Content is visible by default; only hidden once html.anim is set (GSAP
   confirmed + motion allowed), so a blocked script never leaves a blank page.
   ========================================================================== */
html.anim .svc-redesign .fade.d1{ transition-delay:.06s; }
html.anim .svc-redesign .fade.d2{ transition-delay:.12s; }
html.anim .svc-redesign .fade.d3{ transition-delay:.18s; }

@media (prefers-reduced-motion:reduce){
  .svc-redesign *{ transition:none !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .svc-redesign .svc-hero__grid{ grid-template-columns:1fr; gap:var(--sp-40); }
  .svc-redesign .svc-hero__art{ order:2; min-height:300px; max-width:520px; }
  .svc-redesign .svc-h1__l1{ white-space:normal; }
  .svc-redesign .svc-stats{ grid-template-columns:1fr 1fr; gap:var(--sp-24); }
  .svc-redesign .svc-stat--wide{ grid-column:1 / -1; }
  .svc-redesign .svc-stat__copy{ grid-column:1 / -1; max-width:none; }
  .svc-redesign .svc-intro__grid{ grid-template-columns:1fr; gap:var(--sp-32); align-items:start; }
  .svc-redesign .svc-note--intro{ position:static; display:inline-block;
    margin-top:var(--sp-24); transform:rotate(-3deg); }
  .svc-redesign .svc-note--intro .svc-note__arc{ display:none; }
  .svc-redesign .svc-cards{ grid-template-columns:repeat(2,1fr); }
  .svc-redesign .svc-process__head{ grid-template-columns:1fr; gap:var(--sp-24); }
  .svc-redesign .svc-note--proc{ position:static; display:inline-block;
    margin-top:var(--sp-16); text-align:left; }
  .svc-redesign .svc-note--proc .svc-note__arc{ display:none; }
  /* process cards become a horizontal snap row on tablet/mobile */
  .svc-redesign .svc-steps{
    grid-template-columns:none; grid-auto-flow:column;
    grid-auto-columns:minmax(230px,78%); overflow-x:auto;
    scroll-snap-type:x mandatory; margin-inline:calc(-1 * var(--container-pad));
    padding-inline:var(--container-pad); scrollbar-width:none;
  }
  .svc-redesign .svc-steps::-webkit-scrollbar{ display:none; }
  .svc-redesign .svc-step{ scroll-snap-align:start; }
  .svc-redesign .svc-cta__grid{ grid-template-columns:1fr; gap:var(--sp-32); }
  .svc-redesign .svc-cta__aside{ order:2; }
}

@media (max-width:600px){
  .svc-redesign .svc-hero{ padding-top:calc(var(--nav-top) + var(--nav-h) + var(--ticker-h) + var(--sp-40)); }
  .svc-redesign .svc-h1{ font-size:clamp(2.7rem,13vw,3.6rem); }
  .svc-redesign .svc-hero__art{ min-height:260px; margin-inline:auto; width:100%; }
  .svc-redesign .svc-note--hero{ display:none; }
  .svc-redesign .svc-stats{ grid-template-columns:1fr 1fr; padding:var(--sp-24); }
  .svc-redesign .svc-cards{ grid-template-columns:1fr; }
  .svc-redesign .svc-card{ padding:var(--sp-24); }
  .svc-redesign .svc-process{ border-radius:24px; padding:var(--sp-56) 0 var(--sp-48); }
  .svc-redesign .svc-cta__card{ padding:var(--sp-32); }
  .svc-redesign .svc-cta__pill{ top:var(--sp-32); right:var(--sp-24); }
  .svc-redesign .svc-cta__aside{ min-height:auto; flex-direction:column;
    align-items:flex-start; }
  .svc-redesign .svc-cta__chip{ width:74%; max-width:280px; }
  .svc-redesign .svc-cta__tree{ padding-left:0; }
  .svc-redesign .svc-cta__star{ display:none; }
}

@media (max-width:380px){
  .svc-redesign .svc-stats{ grid-template-columns:1fr; }
}