/* ===========================================================
   Design Services — modelled on noomoagency.com's scroll sequence:
   branded intro, giant spread headline with 3D pixel objects, an all-caps
   manifesto, a pinned showcase with travelling words and 3D objects, a card
   that grows edge to edge, floating paper cards, drifting words, a hairline
   table and a chip-based brief.

   Loaded by design-services.html only; everything is prefixed so nothing can
   leak into other pages. Colours come from the site's own tokens, so the page
   follows the light/dark switch.

   Motion is layered on, never required:
     html.ds-motion  motion allowed → pinned, scroll-scrubbed layouts switch on
     html.ds-gl      WebGL available → the 3D canvases show
     html.dsn-ready  intro finished → hero lines slide in
   Without these classes (no JavaScript, reduced motion) every section is a
   plain, static, fully readable layout.
   =========================================================== */

/* ---------- Base ---------- */
.dsn {
  position: relative;
  overflow-x: clip;
  color: var(--primary);
}
.dsn-wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 40px);
}

/* Big editorial type: light weight, uppercase, tight — the reference style. */
.dsn-big,
.dsn-mid,
.dsn-word,
.dsn-drift,
.dsn-hero-title {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  color: var(--primary);
  margin: 0;
}
.dsn-big  { font-size: clamp(34px, 5vw, 86px);  line-height: 1.02; }
.dsn-mid  { font-size: clamp(26px, 3.1vw, 52px); line-height: 1.06; }

.dsn-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border: 1px solid var(--text-color);
  border-radius: 999px;
  font-size: var(--font-size-sm);
  line-height: 1.3;
  color: var(--primary);
  width: fit-content;
  white-space: nowrap;
}

.dsn-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-color);
  color: var(--accent-color-2);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
}
.dsn-btn:hover,
.dsn-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.08); color: var(--accent-color-2); }
.dsn-btn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
.dsn-btn i { transition: transform .3s ease; }
.dsn-btn:hover i { transform: translateX(3px); }
.dsn-btn-dark {
  background: var(--primary);
  color: var(--secondary);
}
.dsn-btn-dark:hover,
.dsn-btn-dark:focus-visible { color: var(--secondary); }

.dsn-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}
.ds-gl .dsn-canvas { display: block; }

/* A sticky stage only exists while motion is on. */
.dsn-sticky { position: relative; }
.ds-motion .dsn-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* ---------- Ambient glow ---------- */
.dsn-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.dsn-ambient span {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-color) 22%, transparent) 0%, transparent 62%);
  filter: blur(20px);
}
.dsn-ambient span:first-child { top: -30vmax; left: 20vw; }
.dsn-ambient span:last-child  { bottom: -40vmax; right: -20vmax; opacity: .7; }
.ds-motion .dsn-ambient span:first-child { animation: dsnDrift 26s ease-in-out infinite alternate; }
.ds-motion .dsn-ambient span:last-child  { animation: dsnDrift 32s ease-in-out -8s infinite alternate-reverse; }
@keyframes dsnDrift {
  from { transform: translate3d(-6vw, 0, 0) scale(1); }
  to   { transform: translate3d(8vw, 10vh, 0) scale(1.15); }
}

/* ---------- Intro ---------- */
/* Shown only when JS is running, motion is allowed and it has not played this
   visit. It hides itself after 2.6s even if design.js never loads, so it can
   never trap the page. */
.dsn-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--secondary);
  transition: transform .8s cubic-bezier(.76, 0, .24, 1);
}
.js.ds-intro-on:not(.dsn-seen) .dsn-intro {
  display: flex;
  animation: dsnIntroFailsafe 0s linear 2.6s forwards;
}
.dsn-intro.is-out { transform: translateY(-100%); }
.dsn-intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.dsn-intro-brand {
  font-size: clamp(40px, 8vw, 120px);
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
}
.dsn-intro-sub,
.dsn-intro-count {
  font-size: var(--font-size-sm);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-color);
}
.dsn-intro-count b { color: var(--accent-color); font-weight: 600; }
.dsn-intro-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--accent-color);
  transform-origin: 0 50%;
  transform: scaleX(var(--load, 0));
}
@keyframes dsnIntroFailsafe { to { visibility: hidden; opacity: 0; } }

/* ---------- Cursor follower ---------- */
.dsn-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--accent-color);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: width .3s ease, height .3s ease, margin .3s ease, background-color .3s ease, opacity .3s ease;
}
.dsn-cursor-on .dsn-cursor { opacity: 1; }
.dsn-cursor.is-hover {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
}

/* =========================================================
   1. HERO
   ========================================================= */
.dsn-hero .dsn-sticky {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px clamp(20px, 3vw, 40px) 40px;
}
.ds-motion .dsn-hero { height: 190vh; }

.dsn-hero-title {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  font-size: clamp(34px, 9vw, 200px);
  line-height: .9;
  width: 100%;
}
/* Each line spreads its word groups edge to edge, like the reference. */
.dsn-hl {
  display: flex;
  justify-content: space-between;
  gap: .25em;
  /* Clip vertically for the slide-in, but let words travel sideways. */
  overflow-x: visible;
  overflow-y: clip;
  padding-bottom: .04em;
}
.dsn-hl-1 { width: 74%; }
.dsn-hl > span { display: inline-block; white-space: nowrap; }

/* Entrance: lines rise out of their own mask once the intro finishes. */
.ds-motion .dsn-hl > span {
  translate: 0 108%;
  transition: translate 1.1s cubic-bezier(.2, .8, .2, 1);
}
.ds-motion.dsn-ready .dsn-hl > span { translate: 0 0; }
.ds-motion.dsn-ready .dsn-hl-2 > span { transition-delay: .08s; }
.ds-motion.dsn-ready .dsn-hl-3 > span { transition-delay: .16s; }

/* Exit: scrubbed by scroll (--p goes 0→1 across the pinned stretch).
   The first line slides left, the middle line splits apart, the last slides
   right, as the reference headline breaks up. */
.ds-motion .dsn-hl-1 { transform: translateX(calc(var(--p, 0) * -38%)); opacity: calc(1 - var(--p, 0) * 1.3); }
.ds-motion .dsn-hl-2 > span:first-child { transform: translateX(calc(var(--p, 0) * -32vw)); }
.ds-motion .dsn-hl-2 > span:last-child  { transform: translateX(calc(var(--p, 0) * 32vw)); }
.ds-motion .dsn-hl-2 { opacity: calc(1 - var(--p, 0) * 1.1); }
.ds-motion .dsn-hl-3 { transform: translateX(calc(var(--p, 0) * 28%)); opacity: calc(1 - var(--p, 0) * 1.2); }

.dsn-hero .dsn-canvas { z-index: 2; }

.dsn-hero-foot {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: clamp(28px, 6vh, 72px);
}
.ds-motion .dsn-hero-foot {
  opacity: calc(1 - var(--p, 0) * 2.2);
  transform: translateY(calc(var(--p, 0) * 40px));
}
.dsn-crumb {
  display: flex;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--text-color);
}
.dsn-crumb a { color: var(--text-color); text-decoration: none; }
.dsn-crumb a:hover { color: var(--accent-color); }
.dsn-crumb [aria-current] { color: var(--primary); }
.dsn-hero-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 320px;
}
.dsn-hero-intro p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--primary);
}
.dsn-scroll-cue {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-color);
}
.ds-motion .dsn-scroll-cue { display: block; opacity: calc(1 - var(--p, 0) * 4); }
.dsn-scroll-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 34px;
  margin: 10px auto 0;
  background: linear-gradient(var(--accent-color), transparent);
  animation: dsnCue 1.8s ease-in-out infinite;
}
@keyframes dsnCue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* =========================================================
   2. MANIFESTO
   ========================================================= */
.dsn-manifesto { padding: clamp(80px, 14vh, 180px) 0 clamp(60px, 10vh, 120px); }
.dsn-manifesto .dsn-wrap { display: flex; flex-direction: column; gap: clamp(28px, 5vh, 56px); }
.dsn-manifesto .dsn-mid { max-width: 26ch; }
.dsn-lede {
  margin: 0;
  max-width: 560px;
  font-size: var(--font-size-lg);
  color: var(--text-color);
}

/* Word-by-word reading reveal. design.js wraps words in .dsn-w and writes
   --t (how far the heading has been read). Words blend from the muted body
   grey to their final colour; every blend stays at or above 3:1 contrast. */
.dsn-read .dsn-w {
  --lit: clamp(0, calc(var(--t, 1) * var(--n, 1) - var(--i, 0)), 1);
  color: color-mix(in srgb, var(--primary) calc(var(--lit) * 100%), var(--text-color));
  transition: color .2s linear;
}

.dsn-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: clamp(16px, 4vh, 48px);
}
@media (min-width: 768px) { .dsn-cols { grid-template-columns: repeat(3, 1fr); } }
.dsn-col { display: flex; flex-direction: column; gap: 22px; }
.dsn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-size-base);
  color: var(--primary);
}
.dsn-list a { color: inherit; text-decoration: none; transition: color .25s ease, padding .25s ease; }
.dsn-list a:hover,
.dsn-list a:focus-visible { color: var(--accent-color); padding-left: 6px; }
/* Items cascade in once the columns are on screen. */
.ds-motion .dsn-cols .dsn-list li {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .6s ease, translate .6s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--k, 0) * 45ms);
}
.ds-motion .dsn-cols.is-in .dsn-list li { opacity: 1; translate: 0 0; }

/* =========================================================
   3. PINNED SHOWCASE
   ========================================================= */
/* Static (no motion): slides simply stack. */
.dsn-show .dsn-sticky { display: flex; flex-direction: column; }
.dsn-slide {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: clamp(60px, 10vh, 120px) clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--accent-color-3);
}
.dsn-word { font-size: clamp(56px, 13vw, 250px); line-height: .88; }
.dsn-meta-l { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--font-size-sm); color: var(--primary); }
.dsn-meta-r h3 { margin: 0 0 10px; font-size: var(--font-size-lg); font-weight: 600; color: var(--primary); }
.dsn-meta-r p  { margin: 0; font-size: var(--font-size-sm); line-height: 1.6; color: var(--text-color); }
.dsn-show-count,
.dsn-show-bar { display: none; }

/* Pinned (motion): one full-screen stage, slides layered on top of each other.
   design.js writes, per slide, --q (0→1 progress through that slide) and --v
   (0→1 visibility), and marks the current slide .is-on. */
.ds-motion .dsn-show { height: 600vh; }
.ds-motion .dsn-show .dsn-sticky { display: block; }
.ds-motion .dsn-slide {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  border: 0;
  opacity: var(--v, 0);
  visibility: hidden;
}
.ds-motion .dsn-slide.is-on { visibility: visible; }
.ds-motion .dsn-word {
  position: absolute;
  top: 15vh;
  left: 0;
  right: 0;
  z-index: 1;
  text-align: center;
  white-space: nowrap;
  /* The word travels down and grows as you scroll through the slide. */
  transform: translateY(calc(var(--q, 0) * 34vh)) scale(calc(1 + var(--q, 0) * .22));
  transform-origin: 50% 0;
}
.dsn-show .dsn-canvas { z-index: 2; }
.ds-motion .dsn-meta-l {
  position: absolute;
  z-index: 3;
  left: clamp(20px, 3vw, 40px);
  top: 60vh;
  transform: translateY(calc((1 - var(--v, 0)) * 24px));
}
.ds-motion .dsn-meta-r {
  position: absolute;
  z-index: 3;
  right: clamp(20px, 3vw, 40px);
  top: 57vh;
  width: min(340px, 30vw);
  transform: translateY(calc((1 - var(--v, 0)) * 24px));
}
.ds-motion .dsn-slide .dsn-btn {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 9vh;
  transform: translateX(-50%) translateY(calc((1 - var(--v, 0)) * 20px));
}
.ds-motion .dsn-slide .dsn-btn:hover { transform: translateX(-50%) translateY(-2px); }
.ds-motion .dsn-show-count {
  display: block;
  position: absolute;
  z-index: 3;
  top: 110px;
  right: clamp(20px, 3vw, 40px);
  font-size: var(--font-size-sm);
  letter-spacing: .1em;
  color: var(--text-color);
}
.dsn-show-count b { color: var(--primary); font-weight: 600; }
.ds-motion .dsn-show-bar {
  display: block;
  position: absolute;
  z-index: 3;
  left: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  bottom: 28px;
  height: 1px;
  background: var(--accent-color-3);
}
.dsn-show-bar span {
  display: block;
  height: 100%;
  background: var(--accent-color);
  transform-origin: 0 50%;
  transform: scaleX(var(--sp, 0));
}
@media (max-width: 767px) {
  .ds-motion .dsn-word { top: 22vh; }
  .ds-motion .dsn-meta-l { top: auto; bottom: calc(15vh + 70px); }
  .ds-motion .dsn-meta-r { top: auto; bottom: calc(6vh + 64px); left: clamp(20px, 3vw, 40px); width: auto; }
  .ds-motion .dsn-meta-r h3 { margin: 0; }
  .ds-motion .dsn-meta-r p { display: none; }
  .ds-motion .dsn-slide .dsn-btn { bottom: 6vh; white-space: nowrap; padding: 12px 20px; }
  .ds-motion .dsn-show-count { display: none; }
}

/* =========================================================
   4. CARD THAT GROWS EDGE TO EDGE
   ========================================================= */
.dsn-card { padding: 0 clamp(20px, 3vw, 40px) clamp(60px, 10vh, 120px); }
.ds-motion .dsn-card { height: 230vh; padding: 0; }
.ds-motion .dsn-card .dsn-sticky { display: flex; align-items: center; justify-content: center; }
.dsn-card-frame {
  position: relative;
  width: 100%;
  height: 72vh;
  border-radius: 24px;
  overflow: hidden;
}
/* --g: growth, 0→1 over the first ~65% of the pinned stretch, then held. */
.ds-motion .dsn-card { --g: clamp(0, calc(var(--p, 1) / .65), 1); }
.ds-motion .dsn-card-frame {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  border-radius: calc((1 - var(--g)) * 36px);
  transform: scale(calc(.56 + .44 * var(--g)));
  will-change: transform;
}
.dsn-card-frame img {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
}
.ds-motion .dsn-card-frame img { transform: translateY(calc((var(--p, .5) - .5) * -6%)) scale(calc(1.18 - .18 * var(--g))); }
.dsn-card-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 4, 4, .25) 0%, rgba(4, 4, 4, .15) 45%, rgba(4, 4, 4, .75) 100%);
}
.dsn-card-over {
  position: absolute;
  inset: auto clamp(20px, 4vw, 64px) clamp(28px, 6vh, 72px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #fff;
}
.ds-motion .dsn-card-over {
  opacity: clamp(0, calc((var(--p, 1) - .35) * 3.5), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--p, 1) - .35) * 3.5), 1)) * 40px));
}
.dsn-card-kicker { font-size: var(--font-size-sm); letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.dsn-card-title {
  margin: 0;
  font-size: clamp(48px, 10vw, 180px);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
}
.dsn-card-note { margin: 0; max-width: 420px; font-size: var(--font-size-base); color: rgba(255, 255, 255, .85); }

/* =========================================================
   5 & 6. TEAM / HUMAN TOUCH
   ========================================================= */
.dsn-team,
.dsn-human { padding: clamp(80px, 14vh, 180px) 0 clamp(40px, 8vh, 100px); }
.dsn-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
@media (min-width: 992px) { .dsn-team-grid { grid-template-columns: 1.5fr 1fr; } }
.dsn-side { margin: 0; max-width: 380px; font-size: var(--font-size-sm); line-height: 1.6; color: var(--text-color); justify-self: end; }

/* Line-by-line reveal: each line rises out of its own mask when on screen. */
.dsn-lines > span { display: block; overflow: clip; padding-bottom: .04em; }
.dsn-lines > span > span { display: inline-block; }
.ds-motion .dsn-lines > span > span {
  translate: 0 110%;
  transition: translate 1s cubic-bezier(.2, .8, .2, 1);
}
.ds-motion .dsn-lines.is-in > span > span { translate: 0 0; }
.ds-motion .dsn-lines.is-in > span:nth-child(2) > span { transition-delay: .09s; }
.ds-motion .dsn-lines.is-in > span:nth-child(3) > span { transition-delay: .18s; }

/* Floating paper cards, tilted in 3D and drifting at different speeds. */
.dsn-float {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 1360px;
  margin: 48px auto 0;
  padding: 0 clamp(20px, 3vw, 40px);
}
@media (min-width: 768px) {
  .dsn-float {
    display: block;
    height: 72vh;
    perspective: 1200px;
    margin-top: 0;
  }
  .dsn-paper {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: clamp(220px, 21vw, 300px);
    transform:
      translate3d(0, calc((.5 - var(--p, .5)) * var(--s, 1) * 260px), 0)
      rotateX(10deg) rotateY(-12deg)
      rotate(calc(var(--r, 0deg) + (var(--p, .5) - .5) * 14deg));
  }
}
.dsn-paper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 26px;
  border: 1px solid var(--accent-color-3);
  border-radius: 14px;
  background: var(--accent-color-4);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
  will-change: transform;
}
.dsn-paper b { font-size: var(--font-size-lg); font-weight: 600; color: var(--primary); }
.dsn-paper span { font-size: var(--font-size-sm); line-height: 1.55; color: var(--text-color); }

/* Drifting words, each blending from grey to solid as it crosses the middle. */
.dsn-words {
  position: relative;
  overflow: clip;
  padding: clamp(40px, 8vh, 96px) 0 clamp(40px, 10vh, 120px);
}
.dsn-words .dsn-canvas { z-index: 2; }
.dsn-drift {
  position: relative;
  z-index: 1;
  display: block;
  width: max-content;
  margin-left: var(--x, 10%);
  font-size: clamp(54px, 10vw, 200px);
  line-height: 1.12;
  white-space: nowrap;
}
.ds-motion .dsn-drift {
  transform: translateX(calc((var(--wp, .5) - .5) * var(--dx, 10) * 1vw));
  color: color-mix(in srgb, var(--primary) calc(var(--lit, 1) * 100%), var(--text-color));
}

/* =========================================================
   7. HAIRLINE DISCIPLINE TABLE (the expandable index)
   ========================================================= */
.dsn-table { padding: clamp(80px, 14vh, 180px) 0 clamp(60px, 10vh, 120px); }
.dsn-table-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 40px;
}
@media (min-width: 992px) { .dsn-table-head { grid-template-columns: 1.5fr 1fr; align-items: end; } }
.dsn-table-head p { margin: 0; justify-self: end; max-width: 380px; font-size: var(--font-size-sm); line-height: 1.6; color: var(--text-color); }

.ds-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--primary);
}
.ds-item { border-bottom: 1px solid var(--accent-color-3); }
.ds-item-head { margin: 0; font-size: inherit; }
.ds-toggle {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  color: var(--primary);
}
.ds-toggle:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; border-radius: 6px; }
.ds-num { font-size: var(--font-size-sm); color: var(--accent-color); font-variant-numeric: tabular-nums; }
.ds-name {
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  transition: color .25s ease, transform .35s cubic-bezier(.4, 0, .2, 1);
}
.ds-tags { display: none; font-size: var(--font-size-sm); color: var(--text-color); white-space: nowrap; }
.ds-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--text-color);
  flex-shrink: 0;
  transition: background-color .25s ease, border-color .25s ease;
}
.ds-icon::before,
.ds-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: var(--primary);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), background-color .25s ease;
}
.ds-icon::after { transform: rotate(90deg); }
@media (min-width: 768px) {
  .ds-toggle { grid-template-columns: 56px 1fr auto auto; gap: 24px; }
  .ds-tags { display: block; }
}
@media (hover: hover) {
  .ds-toggle:hover .ds-name { color: var(--accent-color); transform: translateX(8px); }
  .ds-toggle:hover .ds-icon { border-color: var(--accent-color); }
}
.ds-item.is-open .ds-name { color: var(--accent-color); }
.ds-item.is-open .ds-icon { background: var(--accent-color); border-color: var(--accent-color); }
.ds-item.is-open .ds-icon::before,
.ds-item.is-open .ds-icon::after { background: var(--accent-color-2); }
.ds-item.is-open .ds-icon::after { transform: rotate(0deg); }

/* Panels are OPEN by default so the page reads without JavaScript; main.js
   collapses them. Closed panels are also made inert by main.js. */
.ds-panel-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 0 4px 30px 60px;
}
.js .ds-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .45s;
}
.js .ds-item.is-open .ds-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
}
.js .ds-panel > .ds-panel-clip { overflow: hidden; min-height: 0; }
@media (max-width: 767px) { .ds-panel-inner { padding-left: 4px; } }
@media (min-width: 768px) {
  .ds-panel-inner { grid-template-columns: 1.3fr 1fr; column-gap: 40px; }
  .ds-panel-inner .ds-lede,
  .ds-panel-inner .ds-panel-cta { grid-column: 1 / -1; }
}
.ds-lede { margin: 0; font-size: var(--font-size-lg); color: var(--primary); }
.ds-panel h4 {
  margin: 0 0 12px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-color);
}
.ds-does { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ds-does li { position: relative; padding-left: 22px; color: var(--primary); }
.ds-does li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 2px; background: var(--accent-color); }
.ds-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ds-tools li { padding: 5px 12px; border: 1px solid var(--accent-color-3); border-radius: 999px; font-size: var(--font-size-sm); color: var(--primary); }
.ds-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-color-6);
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.ds-text-link:hover,
.ds-text-link:focus-visible { color: var(--accent-color); border-color: var(--accent-color); }

/* Rows arrive one after another. */
.ds-index > .ds-item.reveal.is-visible { animation-delay: calc(var(--i, 0) * 70ms); }

/* =========================================================
   8. HOW IT WORKS
   ========================================================= */
.dsn-steps-wrap { padding: clamp(40px, 8vh, 100px) 0; }
.dsn-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 32px;
}
@media (min-width: 576px) { .dsn-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .dsn-steps { grid-template-columns: repeat(4, 1fr); } }
.dsn-steps li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 0 32px;
  border-top: 1px solid var(--accent-color-3);
}
.dsn-steps span { font-size: var(--font-size-sm); color: var(--accent-color); }
.dsn-steps h3 { margin: 0; font-size: var(--font-size-xl); font-weight: 500; color: var(--primary); }
.dsn-steps p { margin: 0; font-size: var(--font-size-sm); line-height: 1.6; color: var(--text-color); }
.dsn-steps > li.reveal.is-visible { animation-delay: calc(var(--i, 0) * 80ms); }

/* =========================================================
   9. CONTACT / BRIEF
   ========================================================= */
.dsn-contact { padding: clamp(80px, 14vh, 180px) 0 clamp(60px, 10vh, 120px); }
.dsn-contact .dsn-big { max-width: 22ch; }
.dsn-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: clamp(40px, 8vh, 96px);
}
@media (min-width: 992px) { .dsn-contact-grid { grid-template-columns: 1fr 1.6fr; gap: 80px; } }
.dsn-contact-side { display: flex; flex-direction: column; gap: 18px; }
.dsn-contact-side p { margin: 0; max-width: 360px; font-size: var(--font-size-sm); line-height: 1.6; color: var(--text-color); }

.dsn-form { display: flex; flex-direction: column; gap: 30px; }
.dsn-form fieldset { margin: 0; padding: 0 0 26px; border: 0; border-bottom: 1px solid var(--accent-color-3); min-width: 0; }
.dsn-form legend {
  margin-bottom: 14px;
  padding: 0;
  font-size: var(--font-size-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-color);
}
.dsn-form legend small { text-transform: none; letter-spacing: 0; }
.ds-chips { display: flex; flex-wrap: wrap; gap: 10px; }
/* Real checkboxes and radios underneath, so keyboard and screen readers work
   natively and the form submits without JavaScript. */
.ds-chip { position: relative; cursor: pointer; }
.ds-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ds-chip span {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--text-color);
  border-radius: 999px;
  color: var(--primary);
  font-size: var(--font-size-sm);
  user-select: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ds-chip:hover span { border-color: var(--accent-color); }
.ds-chip input:checked + span { background: var(--accent-color); border-color: var(--accent-color); color: var(--accent-color-2); }
.ds-chip input:focus-visible + span { outline: 2px solid var(--accent-color); outline-offset: 3px; }
.ds-brief-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ds-brief-summary { margin: 0; font-size: var(--font-size-sm); color: var(--primary); font-weight: 500; }
.ds-brief-summary:empty { display: none; }

/* =========================================================
   10. FAQ
   ========================================================= */
.dsn-faq { padding: clamp(40px, 8vh, 100px) 0 clamp(80px, 14vh, 160px); }

.ds-sr-only {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================
   Reduced motion: design.js never adds .ds-motion, so pinned and scrubbed
   styles are already off. These catch the few always-on animations.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .dsn-ambient span,
  .dsn-scroll-cue::after { animation: none !important; }
  .dsn-intro { display: none !important; }
  .ds-name, .ds-icon, .ds-icon::before, .ds-icon::after,
  .js .ds-panel, .js .ds-item.is-open .ds-panel { transition: none !important; }
  .ds-toggle:hover .ds-name { transform: none; }
  .ds-index > .ds-item.reveal.is-visible,
  .dsn-steps > li.reveal.is-visible { animation-delay: 0ms; }
}

/* Lenis smooth scrolling: let it own the scroll position. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* The site sets overflow-x:hidden on BOTH html and body below 768px. That
   turns body into its own (non-scrolling) scroll container, and sticky
   elements then stick to body instead of the window, i.e. never. clip hides
   sideways overflow the same way without creating a scroll container. */
@media screen and (max-width: 767px) {
  html.ds-motion body { overflow-x: clip; }
}