/* Service pages (websites.html and its six siblings, EN + FR).
 *
 * Structure and motion borrowed from a web-studio landing page (drifting screenshot wall, stack
 * marquee, count-ups, a device pinned beside scrolling cards, a process timeline, an animated
 * closing call) and rebuilt in this site's own palette and three serifs. Loaded after
 * relume.css; nothing here restyles a shared component outside .svc.
 *
 * Motion rules, all of them:
 *  - every loop is paused until service.js sees it on screen, and paused again when it leaves;
 *  - prefers-reduced-motion stops every loop and transition below (see the block at the end);
 *  - with no JavaScript nothing is hidden and nothing moves.
 */

.svc { overflow-x: clip; }
.svc main { display: block; }
.svc-wrap { width: min(1200px, 100%); margin: 0 auto; padding: 0 var(--pad); }
.svc-eyebrow {
  font-family: var(--caps);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.svc h1, .svc h2, .svc h3 { font-family: var(--display); font-weight: 500; color: var(--text); }
.svc h1 { font-size: clamp(2.3rem, 1.6rem + 3vw, 4.1rem); line-height: 1.06; letter-spacing: -0.01em; }
.svc h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.15; margin-bottom: var(--space-4); }
.svc h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.3; margin-bottom: var(--space-2); }
.svc p, .svc li { color: var(--body-text); font-size: 1.06rem; line-height: 1.7; }
.svc p + p { margin-top: var(--space-3); }
.svc strong { color: var(--text); font-weight: 500; }
.svc main a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.svc-section { padding: var(--space-8) 0; border-top: 1px solid var(--rule); }
.svc-section > .svc-wrap > p.svc-intro { max-width: 62ch; }
.svc-prose { max-width: 68ch; }
.svc-two { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .svc-two { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ hero */

.svc-hero { position: relative; padding: calc(var(--pad) + 6rem) 0 var(--space-7); overflow: hidden; }
.svc-hero-grid { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 980px) { .svc-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.svc-lede { font-family: var(--display); font-size: clamp(1.12rem, 1rem + 0.5vw, 1.32rem); color: var(--text) !important; max-width: 46ch; margin-top: var(--space-4); }
.svc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; margin-top: var(--space-5); }
.svc-price .count, .svc-price b {
  font-family: var(--display);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.svc-price span.unit { font-family: var(--caps); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--muted); }
.svc-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.svc-updated { font-family: var(--caps); font-size: 0.62rem !important; letter-spacing: 0.22em; color: var(--muted) !important; margin-top: var(--space-5); }
.svc-crumbs { font-family: var(--caps); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--muted); margin-bottom: var(--space-4); }
.svc-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.svc-crumbs li { font-size: inherit; color: inherit; }
.svc-crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--field); }
.svc main .svc-crumbs a { color: var(--text); text-decoration: none; }

/* The drifting wall: three columns of tiles on a slight tilt, each column a loop of its own
   tiles twice over, so -50% lands exactly where it started. */
.drift-wall {
  position: relative;
  height: clamp(340px, 56vw, 600px);
  overflow: hidden;
  border-radius: 6px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.drift-tilt {
  position: absolute;
  inset: -12% -8%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  transform: rotate(-7deg);
}
.drift-col { display: flex; flex-direction: column; gap: 14px; will-change: transform; animation: svc-drift-up 46s linear infinite; animation-play-state: paused; }
.drift-col:nth-child(2) { animation-name: svc-drift-down; animation-duration: 54s; }
.drift-col:nth-child(3) { animation-duration: 40s; }
.is-playing .drift-col { animation-play-state: running; }
@keyframes svc-drift-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes svc-drift-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.drift-tile {
  flex: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: #0b0f14;
}
.drift-tile img { height: auto; aspect-ratio: 16 / 10; }
.drift-tile.is-phone img { aspect-ratio: 390 / 844; }
.drift-tile.is-photo img { aspect-ratio: 3 / 2; }
.drift-card { padding: 1rem 1.1rem 1.2rem; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; gap: 0.8rem; }
.drift-card .k { font-family: var(--caps); font-size: 0.56rem; letter-spacing: 0.24em; color: var(--accent); }
.drift-card .v { font-family: var(--display); font-size: 1.05rem; line-height: 1.3; color: var(--text); }
.drift-card .bar { height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.drift-card .bar i { display: block; height: 100%; width: var(--w, 60%); background: var(--accent); }

/* ---------------------------------------------------------------- marquee */

.marquee { border-block: 1px solid var(--rule); overflow: hidden; padding: 1.1rem 0; }
.marquee-track { display: flex; width: max-content; animation: svc-marquee 38s linear infinite; animation-play-state: paused; }
.is-playing .marquee-track { animation-play-state: running; }
.marquee-track ul { display: flex; list-style: none; flex: none; }
.marquee-track li {
  font-family: var(--caps);
  font-size: 0.72rem !important;
  letter-spacing: 0.24em;
  color: var(--text) !important;
  white-space: nowrap;
  padding: 0 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.marquee-track li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c88800; display: inline-block; margin-left: 1.6rem; }
@keyframes svc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ stats */

.svc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); list-style: none; }
@media (min-width: 900px) { .svc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-stats li { border-top: 1px solid var(--field); padding-top: var(--space-3); }
.svc-stats .count, .svc-stats b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  line-height: 1.1;
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.svc-stats span.lbl { display: block; margin-top: 0.4rem; font-size: 0.98rem; color: var(--body-text); }

/* --------------------------------------------------------- lists and cards */

.svc-list { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.svc-list li { position: relative; padding-left: 1.6rem; }
.svc-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.6rem; height: 1px; background: var(--accent); }
.svc-list.is-not li::before { background: var(--muted); width: 0.6rem; transform: rotate(45deg); }
.svc-grid { display: grid; gap: var(--space-4); list-style: none; margin-top: var(--space-5); }
@media (min-width: 720px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: var(--space-5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.svc-card:hover { border-color: var(--field); transform: translateY(-2px); }
.svc-card .tag { font-family: var(--caps); font-size: 0.6rem; letter-spacing: 0.24em; color: var(--accent); margin-bottom: var(--space-2); display: block; }
.svc-photo { border-radius: 8px; overflow: hidden; }
.svc-photo img { height: auto; aspect-ratio: 3 / 2; }
.svc-photo figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }

/* ------------------------------------------- pinned device beside the cards */

.pin { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
@media (min-width: 980px) {
  .pin { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .pin-device { position: sticky; top: 16vh; }
}
.device-laptop { position: relative; padding: 2.2% 2.2% 0; background: #11161d; border: 1px solid var(--field); border-radius: 14px 14px 4px 4px; }
.device-laptop::after { content: ""; display: block; height: 14px; margin: 0 -6%; background: linear-gradient(#2a3038, #151a20); border-radius: 0 0 14px 14px; }
.device-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #070a0e; border-radius: 4px; }
.device-phone { position: relative; width: min(300px, 78%); margin: 0 auto; padding: 12px; background: #11161d; border: 1px solid var(--field); border-radius: 34px; }
.device-phone .device-screen { aspect-ratio: 9 / 18; border-radius: 24px; }
.device-screen .screen { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); transform: scale(1.03); }
.device-screen .screen.on { opacity: 1; transform: none; }
.device-screen .screen img { height: 100%; object-fit: cover; object-position: top; }
.screen-ui { height: 100%; padding: 8% 7%; display: flex; flex-direction: column; gap: 0.7rem; background: radial-gradient(120% 80% at 80% 0%, rgba(79, 191, 184, 0.14), transparent 60%), #070a0e; }
.screen-ui .k { font-family: var(--caps); font-size: 0.56rem; letter-spacing: 0.24em; color: var(--accent); }
.screen-ui .t { font-family: var(--display); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem); color: var(--text); line-height: 1.25; }
.screen-ui ul { list-style: none; display: grid; gap: 0.45rem; margin-top: 0.2rem; }
.screen-ui li { font-size: 0.86rem !important; line-height: 1.4 !important; color: var(--body-text); padding: 0.55rem 0.7rem; border: 1px solid var(--rule); border-radius: 6px; background: rgba(255, 255, 255, 0.02); }
.screen-ui li.me { margin-left: 18%; border-color: rgba(79, 191, 184, 0.45); color: var(--text); }
.screen-ui li.them { margin-right: 18%; }
.pin-cards { list-style: none; display: grid; gap: var(--space-5); }
@media (min-width: 980px) { .pin-cards li { min-height: 40vh; } }
.pin-cards li { border-left: 1px solid var(--rule); padding: var(--space-3) 0 var(--space-3) var(--space-5); transition: border-color 300ms var(--ease-out); }
.pin-cards li.on { border-left-color: var(--accent); }
.pin-cards .n { font-family: var(--caps); font-size: 0.62rem; letter-spacing: 0.24em; color: var(--muted); display: block; margin-bottom: var(--space-2); }

/* ----------------------------------------------------------------- table */

.svc-table-wrap { overflow-x: auto; margin-top: var(--space-5); border: 1px solid var(--rule); border-radius: 8px; }
.svc-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.svc-table th, .svc-table td { text-align: left; vertical-align: top; padding: 0.9rem 1rem; border-bottom: 1px solid var(--rule); font-size: 0.98rem; line-height: 1.5; color: var(--body-text); }
.svc-table thead th { font-family: var(--caps); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--text); font-weight: 400; }
.svc-table tbody th { color: var(--text); font-weight: 500; font-family: var(--body); }
.svc-table td.us { color: var(--text); background: rgba(79, 191, 184, 0.05); }
.svc-table tr:last-child th, .svc-table tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------- timeline */

.timeline { list-style: none; position: relative; margin-top: var(--space-6); display: grid; gap: var(--space-5); }
.timeline li { position: relative; padding-left: 3.2rem; }
.timeline li::before {
  content: attr(data-n);
  position: absolute; left: 0; top: 0;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  font-family: var(--caps); font-size: 0.7rem; color: var(--text);
  border: 1px solid var(--field); border-radius: 50%;
  background: var(--bg);
  transition: border-color 400ms var(--ease-out), background-color 400ms var(--ease-out), color 400ms var(--ease-out);
  z-index: 1;
}
.timeline li::after {
  content: "";
  position: absolute; left: calc(1.1rem - 1px); top: 2.2rem; bottom: calc(-1 * var(--space-5));
  width: 2px; background: linear-gradient(var(--accent), var(--accent)) top / 100% var(--fill, 0%) no-repeat, var(--rule);
  transition: background-size 900ms var(--ease-out);
}
.timeline li:last-child::after { display: none; }
.timeline li.on::before { border-color: var(--accent); background: var(--accent); color: #05070a; }
.timeline li.on::after { --fill: 100%; background-size: 100% 100%, auto; }
.timeline .when { font-family: var(--caps); font-size: 0.6rem; letter-spacing: 0.22em; color: var(--accent); display: block; margin-bottom: 0.3rem; }
.svc-anim .timeline li:not(.on)::after { background-size: 100% 0%, auto; }

/* ------------------------------------------------------------ guarantees */

.svc-guar { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 820px) { .svc-guar { grid-template-columns: 1fr 1fr; } }
.svc-guar .svc-card { border-color: var(--field); }
.svc-guar h3 { font-style: italic; }

/* ---------------------------------------------------- live sites (websites) */

.live-grid { display: grid; gap: var(--space-5); margin-top: var(--space-5); list-style: none; }
@media (min-width: 900px) { .live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.live-card { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.live-card .shot { overflow: hidden; }
.live-card .shot img { height: auto; aspect-ratio: 16 / 10; transition: transform 900ms var(--ease-out); }
.live-card:hover .shot img { transform: scale(1.03); }
.live-card .body-in { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.live-card .where { font-family: var(--caps); font-size: 0.58rem; letter-spacing: 0.22em; color: var(--muted); }
.live-card .btn { margin-top: auto; align-self: flex-start; text-align: center; letter-spacing: 0.1em; }

/* ------------------------------------------------------------------- FAQ */

.svc-faq { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
@media (min-width: 900px) { .svc-faq { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); } }
.svc-faq > div { border-top: 1px solid var(--rule); padding-top: var(--space-4); }

/* ------------------------------------------------------ the closing call */

.svc-cta { padding: var(--space-8) 0; }
.cta-box { position: relative; overflow: hidden; border-radius: 14px; padding: 2px; }
.cta-box::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--accent) 72%, #c88800 80%, transparent 90%);
  animation: svc-orbit 9s linear infinite;
  animation-play-state: paused;
}
.is-playing .cta-box::before { animation-play-state: running; }
@keyframes svc-orbit { to { transform: rotate(1turn); } }
.cta-inner {
  position: relative;
  border-radius: 12px;
  padding: var(--space-7) var(--space-5);
  text-align: center;
  background: radial-gradient(90% 120% at 50% 0%, rgba(79, 191, 184, 0.12), transparent 65%), #070a0e;
}
.cta-inner p { max-width: 54ch; margin-left: auto; margin-right: auto; }
.cta-inner .svc-actions { justify-content: center; }

/* Other services, back to the home page's list. */
.svc-more { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-4); }
.svc main .svc-more a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 1rem; border: 1px solid var(--field); border-radius: 999px;
  font-family: var(--caps); font-size: 0.64rem; letter-spacing: 0.16em; text-decoration: none; color: var(--text);
}
.svc main .svc-more a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------- footer */

.svc .legal-footer { width: min(1200px, 100%); margin: 0 auto; padding: var(--space-4) var(--pad) var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); border-top: 1px solid var(--rule); font-family: var(--caps); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--muted); }
.svc .legal-footer a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text); }
.svc .legal-footer a:hover { color: var(--accent); }

/* ----------------------------------------------------------- the reveal */
/* Only when service.js is running with motion allowed (it sets .svc-anim). */
.svc-anim .svc-rise { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); }
.svc-anim .svc-rise.in { opacity: 1; transform: none; }

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .drift-col, .drift-col:nth-child(2), .drift-col:nth-child(3),
  .marquee-track,
  .cta-box::before { animation: none; transform: none; }
  .drift-col:nth-child(2) { transform: none; }
  .svc-rise, .svc-anim .svc-rise { opacity: 1; transform: none; transition: none; }
  .device-screen .screen, .svc-card, .live-card .shot img, .timeline li::before, .timeline li::after, .pin-cards li { transition: none; }
  .svc-card:hover, .live-card:hover .shot img { transform: none; }
  .marquee { overflow-x: auto; }
}

/* Text for screen readers only (an empty table corner still needs a name). */
.svc .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }