/* ==========================================================================
   AD PHASE — Services experience
   Editorial chapters instead of a card grid. Everything is scoped under
   .svc-* so it cannot leak into the other pages that share this stylesheet.
   ========================================================================== */

/* Services is a dark-only experience: the toggle is hidden on this page. */
:root[data-force-dark] .theme-toggle{ display:none; }

.svc-en{
  font-family:var(--font-latin);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size: 0.85rem;
  color:var(--ink-faint);
}

/* ---------------------------------------------------------------- hero -- */
.svc-hero{
  position:relative;
  min-height:78svh;
  display:flex; align-items:center;
  padding-top:calc(var(--header-h) + var(--sp-5));
  padding-bottom:var(--sp-6);
  overflow:hidden;
  isolation:isolate;
}
.svc-hero__bg{
  position:absolute; inset:-4%;
  z-index:-3;
  background:url('../assets/images/svc/hero-banner.webp') center/cover no-repeat;
  opacity:.55;
  transform:translate3d(var(--mx,0), var(--my,0), 0) scale(1.04);
  transition:transform 1.2s var(--ease-out);
}
.svc-hero__shade{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(to left, var(--bg) 8%, rgba(13,23,18,.86) 42%, rgba(13,23,18,.35) 78%, rgba(13,23,18,.6) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 30%);
}
.svc-hero__grid{
  position:absolute; inset:0; z-index:-1; opacity:.35;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(70% 70% at 25% 50%, black, transparent 80%);
  -webkit-mask-image:radial-gradient(70% 70% at 25% 50%, black, transparent 80%);
}
.svc-hero__layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--sp-7);
  align-items:center;
  width:100%;
}
.svc-hero h1{
  font-size: var(--fs-display);
  line-height:1.06;
  margin-block:var(--sp-4) var(--sp-5);
}
.svc-hero h1 .accent{ color:var(--brand-strong); }
.svc-hero .lead{ max-width:44ch; }
.svc-hero__pillars{
  display:flex; gap:var(--sp-5); flex-wrap:wrap;
  margin-top:var(--sp-7);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.svc-hero__pillars span{ display:flex; align-items:center; gap:.5em; font-weight:700; font-size:var(--fs-small); color:var(--ink-soft); }
.svc-hero__pillars span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand-strong); box-shadow:0 0 10px var(--brand-strong); }

/* layered visual composition that follows the cursor at different depths */
.svc-stack{ position:relative; height:min(560px, 62vh); }
.svc-stack__card{
  position:absolute;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-3);
  transform:translate3d(calc(var(--mx,0) * var(--d,1)), calc(var(--my,0) * var(--d,1)), 0);
  transition:transform 1s var(--ease-out);
}
.svc-stack__card img{ width:100%; height:100%; object-fit:cover; }
.svc-stack__card.c1{ width:62%; aspect-ratio:1; inset-inline-start:4%; top:6%; --d:1.6; z-index:3; }
.svc-stack__card.c2{ width:44%; aspect-ratio:1; inset-inline-end:0; top:0; --d:.8; z-index:2; opacity:.85; }
.svc-stack__card.c3{ width:46%; aspect-ratio:1; inset-inline-end:8%; bottom:0; --d:1.1; z-index:4; }
.svc-stack__tag{
  position:absolute; z-index:5;
  inset-inline-start:0; bottom:10%;
  padding:.8em 1.1em;
  border-radius:var(--r-md);
  font-size:var(--fs-micro); font-weight:700;
  display:flex; flex-direction:column; gap:.2em;
  transform:translate3d(calc(var(--mx,0) * 2), calc(var(--my,0) * 2), 0);
  transition:transform 1s var(--ease-out);
}
.svc-stack__tag strong{ font-size: 1.25rem; color:var(--brand-strong); font-family:var(--font-latin); }

/* ---------------------------------------------------------------- intro -- */
.svc-intro{ padding-block:clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem); }
.svc-intro__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--sp-8); align-items:end; }
.svc-intro h2{ font-size: var(--fs-h1); line-height:1.12; }
.svc-intro p{ font-size:var(--fs-lead); color:var(--ink-soft); }

/* ------------------------------------------------------ sticky service nav -- */
.svc-nav{
  position:sticky;
  top:var(--header-h-shrunk);
  z-index:60;
  background:rgba(13,23,18,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-block:1px solid var(--line);
}
.svc-nav ol{
  display:flex; gap:var(--sp-2);
  list-style:none; margin:0; padding:0;
  overflow-x:auto; scrollbar-width:none;
}
.svc-nav ol::-webkit-scrollbar{ display:none; }
.svc-nav a{
  position:relative;
  display:flex; align-items:baseline; gap:.5em;
  padding:1.05em .9em;
  white-space:nowrap;
  font-size:var(--fs-small); font-weight:700;
  color:var(--ink-faint);
  transition:color var(--dur-fast);
}
.svc-nav a b{ font-family:var(--font-latin); font-size: 0.85rem; font-weight:600; color:var(--ink-faint); transition:color var(--dur-fast); }
.svc-nav a::after{
  content:""; position:absolute; inset-inline:.9em; bottom:-1px; height:2px;
  background:var(--brand-strong);
  box-shadow:0 0 12px var(--brand-strong);
  transform:scaleX(0); transition:transform var(--dur-med) var(--ease-out);
}
.svc-nav a:hover{ color:var(--ink); }
.svc-nav a.is-active{ color:var(--ink); }
.svc-nav a.is-active b{ color:var(--brand-strong); }
.svc-nav a.is-active::after{ transform:scaleX(1); }

/* ------------------------------------------------------------ chapters -- */
.svc-chapter{
  position:relative;
  padding-block:clamp(2.5rem, 5vw, 4rem);
  border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h-shrunk) + 60px);
}
.svc-chapter__num{
  font-family:var(--font-latin);
  font-weight:800;
  font-size: var(--fs-num-xl);
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px var(--line-strong);
  transform:translateY(var(--num-shift, 0px));
  transition:-webkit-text-stroke-color var(--dur-med);
  user-select:none;
}
.svc-chapter:hover .svc-chapter__num{ -webkit-text-stroke-color:var(--brand-line); }
.svc-chapter__label{ display:flex; align-items:center; gap:.8em; margin-bottom:var(--sp-4); }
.svc-chapter__label::before{ content:""; width:28px; height:1px; background:var(--brand-strong); }
.svc-chapter h3{
  font-size: var(--fs-h1);
  line-height:1.12;
  margin-bottom:var(--sp-4);
  transition:transform var(--dur-med) var(--ease-out);
}
.svc-chapter p{ color:var(--ink-soft); font-size:var(--fs-lead); max-width:46ch; transition:color var(--dur-med); }
.svc-chapter:hover p{ color:var(--ink); }
.svc-chapter__tags{ display:flex; flex-wrap:wrap; gap:.5em; margin-top:var(--sp-5); }
.svc-chapter__tags span{
  padding:.45em .9em; border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  font-size:var(--fs-micro); font-weight:600; color:var(--ink-soft);
}

.svc-explore{
  display:inline-flex; align-items:center; gap:.8em;
  margin-top:var(--sp-6);
  font-weight:700;
  color:var(--ink);
  padding-bottom:.35em;
  border-bottom:1px solid var(--line-strong);
  transition:border-color var(--dur-fast), color var(--dur-fast);
}
.svc-explore .arr{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand); color:var(--on-brand);
  transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med);
}
.svc-explore .arr svg{ width:16px; height:16px; }
.svc-chapter:hover .svc-explore{ color:var(--brand-strong); border-color:var(--brand-line); }
.svc-chapter:hover .svc-explore .arr{ transform:translateX(-6px) rotate(-45deg); box-shadow:var(--brand-glow-sm); }

/* media with mask that opens up on hover */
.svc-media{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:1/1;
  background:var(--bg-soft);
  clip-path:inset(4% 4% 4% 4% round var(--r-lg));
  transition:clip-path .9s var(--ease-out), box-shadow .9s var(--ease-out);
}
.svc-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
  transition:transform 1.4s var(--ease-out);
}
.svc-media::after{
  content:""; position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  pointer-events:none;
  transition:box-shadow .6s;
}
.svc-chapter:hover .svc-media{ clip-path:inset(0 0 0 0 round var(--r-lg)); box-shadow:0 30px 90px -40px color-mix(in srgb, var(--brand) 45%, transparent); }
.svc-chapter:hover .svc-media img{ transform:scale(1.14); }
.svc-chapter:hover .svc-media::after{ box-shadow:inset 0 0 0 1px var(--brand-line); }

/* reveal: the media unmasks from the bottom when entering the viewport */
.svc-chapter .svc-media{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out), clip-path .9s var(--ease-out), box-shadow .9s var(--ease-out); }
.svc-chapter.is-in .svc-media{ opacity:1; transform:none; }
.svc-chapter .svc-copy > *{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.svc-chapter.is-in .svc-copy > *{ opacity:1; transform:none; }
.svc-chapter.is-in .svc-copy > *:nth-child(2){ transition-delay:.08s; }
.svc-chapter.is-in .svc-copy > *:nth-child(3){ transition-delay:.16s; }
.svc-chapter.is-in .svc-copy > *:nth-child(4){ transition-delay:.24s; }
.svc-chapter.is-in .svc-copy > *:nth-child(5){ transition-delay:.32s; }
.svc-chapter.is-in .svc-copy > *:nth-child(6){ transition-delay:.4s; }

/* layout A: text | image */
.svc-chapter.is-split .svc-chapter__inner,
.svc-chapter.is-split-rev .svc-chapter__inner{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center;
}
.svc-chapter.is-split-rev .svc-media-wrap{ order:-1; }

/* layout B: full-width visual with copy panel overlapping */
.svc-chapter.is-full .svc-media{ aspect-ratio:16/8; }
.svc-chapter.is-full .svc-media img{ object-position:center 40%; }
.svc-chapter.is-full .svc-chapter__inner{ position:relative; }
.svc-chapter.is-full .svc-copy{
  position:relative;
  margin-top:-12%;
  margin-inline-start:var(--sp-7);
  max-width:620px;
  padding:var(--sp-7);
  border-radius:var(--r-lg);
  background:rgba(13,23,18,.9);
  backdrop-filter:blur(14px);
  border:1px solid var(--line-strong);
  z-index:2;
}

/* layout C: asymmetric editorial — huge number, offset narrow image */
.svc-chapter.is-asym .svc-chapter__inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-rows:auto auto;
  gap:var(--sp-6) var(--sp-8);
  align-items:end;
}
.svc-chapter.is-asym .svc-chapter__num{ grid-column:1 / -1; }
.svc-chapter.is-asym .svc-media{ aspect-ratio:4/5; }
.svc-chapter.is-asym .svc-media-wrap{ margin-top:calc(-1 * clamp(3rem, 1rem + 6vw, 8rem)); }

.svc-chapter .svc-chapter__num{ margin-bottom:var(--sp-5); }
.svc-chapter.is-split .svc-chapter__num,
.svc-chapter.is-split-rev .svc-chapter__num{ font-size: var(--fs-num-xl); }

/* -------------------------------------------------------------- stats -- */
.svc-stats{ padding-block:clamp(2rem, 4vw, 3.25rem); position:relative; overflow:hidden; }
.svc-stats h2{ font-size: var(--fs-h2); max-width:16ch; }
.svc-stats__grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  margin-top:var(--sp-8);
  border-top:1px solid var(--line);
}
.svc-stat{ padding:var(--sp-6) var(--sp-5) var(--sp-5); border-inline-start:1px solid var(--line); }
.svc-stat:first-child{ border-inline-start:0; }
.svc-stat__num{
  font-family:var(--font-latin); font-weight:800;
  font-size: var(--fs-stat);
  line-height:1; color:var(--ink);
  direction:ltr; unicode-bidi:isolate;
  display:inline-flex; align-items:baseline;
}
.svc-stat__num .u{ color:var(--brand-strong); font-size:.55em; margin-inline:.05em; }
.svc-stat h4{ margin-top:var(--sp-4); font-size: 1.0625rem; }
.svc-stat p{ color:var(--ink-faint); font-size:var(--fs-micro); margin-top:.3em; }
.svc-stats__note{ margin-top:var(--sp-5); color:var(--ink-faint); font-size:var(--fs-micro); }

/* ---------------------------------------------------------- principles -- */
.svc-principles{ padding-block:clamp(2rem, 4vw, 3.25rem); }
.svc-principle{
  display:grid;
  grid-template-columns:80px 1fr 1fr;
  gap:var(--sp-6);
  align-items:center;
  padding-block:var(--sp-6);
  border-top:1px solid var(--line);
  transition:padding var(--dur-med) var(--ease-out);
}
.svc-principle:last-child{ border-bottom:1px solid var(--line); }
.svc-principle__n{ font-family:var(--font-latin); font-weight:600; color:var(--ink-faint); }
.svc-principle__word{ display:flex; flex-direction:column; gap:.2em; }
.svc-principle__word strong{
  font-size: var(--fs-h1);
  line-height:1.1;
  transition:color var(--dur-med), transform var(--dur-med) var(--ease-out);
}
.svc-principle p{ color:var(--ink-soft); max-width:44ch; }
.svc-principle:hover{ padding-inline-start:var(--sp-4); }
.svc-principle:hover .svc-principle__word strong{ color:var(--brand-strong); }
.svc-principle:hover .svc-principle__n{ color:var(--brand-strong); }

/* --------------------------------------------------------- case studies -- */
.svc-cases{ padding-block:clamp(2rem, 4vw, 3.25rem); overflow:hidden; }
.svc-cases__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; }
.svc-cases__head h2{ font-size: var(--fs-h2); }
.svc-cases__ctrl{ display:flex; gap:var(--sp-2); }
.svc-cases__ctrl button{
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.svc-cases__ctrl button:hover{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.svc-cases__ctrl svg{ width:18px; height:18px; }
.svc-rail{
  display:flex; gap:var(--sp-5);
  margin-top:var(--sp-7);
  padding-inline:var(--gutter);
  padding-bottom:var(--sp-4);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
  cursor:grab;
}
.svc-rail::-webkit-scrollbar{ display:none; }
.svc-rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.svc-case{
  flex:0 0 clamp(280px, 34vw, 480px);
  scroll-snap-align:start;
  display:flex; flex-direction:column;
}
.svc-case__media{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
}
.svc-case__media img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform 1.2s var(--ease-out);
  pointer-events:none;
}
.svc-case__media.is-chart img{ object-fit:contain; object-position:center; padding:6%; }
.svc-case__media.is-chart::after{ display:none; }
.svc-case__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(9,16,12,.55), transparent 45%); pointer-events:none; }
.svc-case:hover .svc-case__media img{ transform:scale(1.06); }
.svc-case__result{
  position:absolute; inset-inline-start:var(--sp-4); bottom:var(--sp-4); z-index:2;
  padding:.55em .9em; border-radius:var(--r-pill);
  background:var(--brand); color:var(--on-brand);
  font-weight:800; font-size:var(--fs-micro);
  direction:ltr; unicode-bidi:isolate;
}
.svc-case__cat{ margin-top:var(--sp-4); }
.svc-case h3{ font-size: 1.125rem; margin-top:.4em; }
.svc-case p{ color:var(--ink-soft); font-size:var(--fs-small); margin-top:.4em; }
.svc-case__link{ margin-top:var(--sp-3); font-weight:700; font-size:var(--fs-small); color:var(--brand-strong); display:inline-flex; gap:.5em; align-items:center; }
.svc-case__link span{ transition:transform var(--dur-fast); display:inline-block; }
.svc-case:hover .svc-case__link span{ transform:translateX(-5px); }

/* ---------------------------------------------------------------- CTA -- */
.svc-cta{
  position:relative;
  padding-block:clamp(3rem, 6vw, 5rem);
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.svc-cta__glow{
  position:absolute; left:50%; top:55%;
  width:min(900px, 120vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--brand) 20%, transparent), rgba(27,74,65,.25) 45%, transparent 72%);
  filter:blur(20px);
  z-index:-1;
  animation:svcGlow 9s ease-in-out infinite alternate;
}
.svc-cta h2{ font-size: var(--fs-display); line-height:1.08; }
.svc-cta h2 .accent{ color:var(--brand-strong); }
.svc-cta .lead{ margin:var(--sp-5) auto var(--sp-7); }
.svc-cta .hero-ctas{ justify-content:center; }

@keyframes svcGlow{
  from{ transform:translate(-50%,-50%) scale(.92); opacity:.8; }
  to{ transform:translate(-50%,-50%) scale(1.08); opacity:1; }
}

/* ------------------------------------------------- click page transition -- */
.svc-wipe{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  clip-path:circle(0% at var(--wx,50%) var(--wy,50%));
  pointer-events:none;
  transition:clip-path .55s cubic-bezier(.7,0,.3,1);
}
.svc-wipe::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at var(--wx,50%) var(--wy,50%), color-mix(in srgb, var(--brand) 18%, transparent), transparent 40%);
}
.svc-wipe.is-on{ clip-path:circle(150% at var(--wx,50%) var(--wy,50%)); }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1080px){
  .svc-hero__layout{ grid-template-columns:1fr; }
  .svc-stack{ height:420px; max-width:560px; }
  .svc-intro__grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .svc-chapter.is-asym .svc-chapter__inner{ grid-template-columns:1fr 1fr; }
  .svc-chapter.is-asym .svc-media-wrap{ margin-top:0; }
  .svc-stats__grid{ grid-template-columns:repeat(2,1fr); }
  .svc-stat:nth-child(3){ border-inline-start:0; }
  .svc-stat:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width: 760px){
  .svc-hero{ min-height:auto; padding-bottom:var(--sp-7); }
  .svc-hero__shade{ background:linear-gradient(to top, var(--bg) 20%, rgba(13,23,18,.78) 60%, rgba(13,23,18,.55)); }
  .svc-stack{ height:320px; }
  .svc-stack__tag{ display:none; }
  .svc-chapter{ padding-block:clamp(2rem, 4vw, 3rem); }
  .svc-chapter.is-split .svc-chapter__inner,
  .svc-chapter.is-split-rev .svc-chapter__inner,
  .svc-chapter.is-asym .svc-chapter__inner{ grid-template-columns:1fr; gap:var(--sp-5); }
  /* on phones the image always follows the heading block, never precedes it */
  .svc-chapter.is-split-rev .svc-media-wrap{ order:0; }
  .svc-chapter__num{ font-size: var(--fs-num-xl) !important; margin-bottom:var(--sp-2); }
  .svc-chapter.is-full .svc-media{ aspect-ratio:4/3; }
  .svc-chapter.is-full .svc-copy{ margin:-18% var(--sp-3) 0; padding:var(--sp-5); }
  .svc-chapter.is-asym .svc-media{ aspect-ratio:1; }
  .svc-media{ clip-path:inset(0 0 0 0 round var(--r-lg)); }
  .svc-principle{ grid-template-columns:44px 1fr; gap:var(--sp-3) var(--sp-4); }
  .svc-principle p{ grid-column:2; }
  .svc-stats__grid{ grid-template-columns:1fr 1fr; }
  .svc-stat{ padding:var(--sp-5) var(--sp-3); }
  .svc-case{ flex-basis:78vw; }
  .svc-cases__ctrl{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .svc-hero__bg, .svc-stack__card, .svc-stack__tag{ transform:none !important; transition:none !important; }
  .svc-chapter .svc-media, .svc-chapter .svc-copy > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .svc-chapter__num{ transform:none !important; }
  .svc-cta__glow{ animation:none; }
  .svc-wipe{ display:none; }
}