/* ==========================================================================
   Deskman Studio Manager — area pages
   ==========================================================================

   Every colour, font and spacing value below reads a theme token first and
   falls back to a literal second: var(--ink, #201D1D). Under the Deskman
   Studio theme the page inherits the real palette and typography and looks
   like the rest of the site; under any other theme it still renders correctly
   instead of collapsing to unstyled text.

   Everything is namespaced .dsa- so nothing here can reach the theme's own
   components, and the theme's .wrap is reused for the container so the column
   width lines up exactly with the pages either side of it.
   ========================================================================== */

.dsa-main {
  background: var(--paper, #F4F4F4);
  color: var(--ink, #201D1D);
  font-family: var(--font-body, "Plus Jakarta Sans", Arial, sans-serif);
}

/* The nav is fixed and overlays the top of the page, so the first section has
   to clear it. Falls back to a fixed value where the theme tokens are absent. */
.dsa-hero {
  padding: calc(var(--nav-h, 56px) + var(--ticker-h, 24px) + var(--nav-top, 16px) + 72px) 0 64px;
}
.dsa-hero-short { padding-bottom: 40px; }

.dsa-crumbs {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #817F7F);
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
}
.dsa-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.dsa-crumbs a:hover { border-bottom-color: currentColor; }
.dsa-crumbs [aria-current] { color: var(--ink, #201D1D); }

.dsa-eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #817F7F);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 20px;
}
.dsa-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--electric, #A1FF62);
  display: inline-block;
}

.dsa-h1 {
  font-family: var(--font-display, "Bricolage Grotesque", Arial, sans-serif);
  font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 0 0 24px;
  max-width: 18ch;
  text-wrap: balance;
}
.dsa-h2 {
  font-family: var(--font-display, "Bricolage Grotesque", Arial, sans-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.dsa-h2-c { text-align: center; max-width: 20ch; margin-inline: auto; margin-bottom: 48px; }
.dsa-h3 {
  font-family: var(--font-display, "Bricolage Grotesque", Arial, sans-serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -.02em;
  margin: 0 0 24px;
}

.dsa-lead {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--neutral-600, #312E2E);
  max-width: 60ch;
  margin: 0 0 32px;
}

/* ---------- buttons ---------- */
.dsa-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dsa-actions-c { justify-content: center; }

.dsa-btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: var(--btn-h, 40px);
  padding: 12px 22px;
  border-radius: var(--radius-pill, 999px);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .2s var(--ease, cubic-bezier(.625,.05,0,1)), background-color .2s, color .2s;
}
.dsa-btn:hover { transform: translateY(-2px); }
.dsa-btn-solid { background: var(--ink, #201D1D); color: var(--paper, #F4F4F4); }
.dsa-btn-solid:hover { background: var(--violet, #6840FF); color: #fff; }
.dsa-btn-ghost { border-color: var(--line, #E1E1E1); color: var(--ink, #201D1D); background: transparent; }
.dsa-btn-ghost:hover { border-color: var(--ink, #201D1D); }
.dsa-btn-light { border-color: rgba(255,255,255,.35); color: #fff; }
.dsa-btn-light:hover { border-color: #fff; }

/* ---------- hero stats ---------- */
.dsa-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 56px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line, #E1E1E1);
  list-style: none;
}
.dsa-stat-v {
  display: block;
  font-family: var(--font-display, "Bricolage Grotesque", Arial, sans-serif);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.dsa-stat-l {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #817F7F);
  margin-top: 6px;
}

/* ---------- sections ---------- */
.dsa-sec { padding: 72px 0; }
.dsa-sec + .dsa-sec { padding-top: 0; }

/* A heading column beside a body column on wide screens, stacked on narrow.
   The heading sticks so it stays with its content through a long read. */
.dsa-split { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) {
  .dsa-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; }
  .dsa-split-head { position: sticky; top: 140px; align-self: start; }
}

.dsa-prose { max-width: 68ch; }
.dsa-prose-wide { max-width: 80ch; margin-inline: auto; }
.dsa-prose p { margin: 0 0 20px; line-height: 1.75; font-size: 1.02rem; color: var(--neutral-600, #312E2E); }
.dsa-prose p:last-child { margin-bottom: 0; }
.dsa-prose h2, .dsa-prose h3 { font-family: var(--font-display, "Bricolage Grotesque", Arial, sans-serif); margin: 32px 0 12px; }
.dsa-prose ul, .dsa-prose ol { margin: 0 0 20px 1.2em; padding: 0; line-height: 1.75; }
.dsa-prose ul { list-style: disc; }
.dsa-prose ol { list-style: decimal; }
.dsa-prose a { color: var(--violet, #6840FF); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- services grid ---------- */
.dsa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.dsa-card {
  background: #fff;
  border: 1px solid var(--line, #E1E1E1);
  border-radius: var(--radius-soft, 1em);
  padding: 26px 24px 28px;
  transition: transform .25s var(--ease, cubic-bezier(.625,.05,0,1)), border-color .25s;
}
.dsa-card:hover { transform: translateY(-3px); border-color: var(--ink, #201D1D); }
.dsa-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--violet, #6840FF);
  display: block;
  margin-bottom: 14px;
}
.dsa-card h3 {
  font-family: var(--font-display, "Bricolage Grotesque", Arial, sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.dsa-card p { margin: 0; line-height: 1.65; color: var(--neutral-600, #312E2E); font-size: .95rem; }

/* ---------- why us rows ---------- */
.dsa-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line, #E1E1E1); }
.dsa-rows li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line, #E1E1E1);
}
@media (min-width: 800px) {
  .dsa-rows li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; }
}
.dsa-rows h3 {
  font-family: var(--font-display, "Bricolage Grotesque", Arial, sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}
.dsa-rows p { margin: 0; line-height: 1.7; color: var(--neutral-600, #312E2E); }

/* ---------- process ---------- */
.dsa-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  counter-reset: dsa;
}
.dsa-steps li {
  background: #fff;
  border: 1px solid var(--line, #E1E1E1);
  border-radius: var(--radius-soft, 1em);
  padding: 24px 22px 26px;
}
.dsa-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--electric, #A1FF62);
  color: var(--ink, #201D1D);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
}
.dsa-steps h3 {
  font-family: var(--font-display, "Bricolage Grotesque", Arial, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.dsa-steps p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--neutral-600, #312E2E); }

/* ---------- localities ---------- */
.dsa-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.dsa-chips li {
  border: 1px solid var(--line, #E1E1E1);
  background: #fff;
  border-radius: var(--radius-pill, 999px);
  padding: 9px 18px;
  font-size: .9rem;
  font-weight: 500;
}

/* ---------- FAQ ---------- */
.dsa-faq-list { border-top: 1px solid var(--line, #E1E1E1); }
.dsa-q { border-bottom: 1px solid var(--line, #E1E1E1); }
.dsa-q > summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 0;
  font-family: var(--font-display, "Bricolage Grotesque", Arial, sans-serif);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -.01em;
  position: relative;
}
.dsa-q > summary::-webkit-details-marker { display: none; }
.dsa-q > summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--violet, #6840FF);
  transition: transform .2s ease;
}
.dsa-q[open] > summary::after { content: "–"; }
.dsa-q > p { margin: 0 0 24px; padding-right: 40px; line-height: 1.75; color: var(--neutral-600, #312E2E); }

/* ---------- closing CTA ---------- */
.dsa-cta {
  background: var(--ink, #201D1D);
  color: var(--paper, #F4F4F4);
  padding: 88px 0;
  margin-top: 72px;
  text-align: center;
}
.dsa-cta-h {
  font-family: var(--font-display, "Bricolage Grotesque", Arial, sans-serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 20px;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.dsa-cta-p {
  max-width: 56ch;
  margin: 0 auto 32px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
}
.dsa-cta .dsa-btn-solid { background: var(--electric, #A1FF62); color: var(--ink, #201D1D); }
.dsa-cta .dsa-btn-solid:hover { background: #fff; color: var(--ink, #201D1D); }

.dsa-map {
  margin: 48px auto 0;
  max-width: 900px;
  border-radius: var(--radius-soft, 1em);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  aspect-ratio: 16 / 7;
}
.dsa-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) invert(.92) contrast(.85); }

/* ---------- related areas ---------- */
.dsa-related { padding-top: 72px; }
.dsa-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.dsa-related-list a {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--line, #E1E1E1);
  border-radius: var(--radius-soft, 1em);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .2s var(--ease, cubic-bezier(.625,.05,0,1)), border-color .2s;
}
.dsa-related-list a:hover { transform: translateY(-2px); border-color: var(--ink, #201D1D); }
.dsa-related-city {
  display: block;
  font-family: var(--font-display, "Bricolage Grotesque", Arial, sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}
.dsa-related-svc {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #817F7F);
  margin-top: 5px;
}
.dsa-related-list-lg a { padding: 28px 26px; }

/* ---------- [deskman_areas] shortcode ---------- */
.dsa-index-h {
  font-family: var(--font-display, "Bricolage Grotesque", Arial, sans-serif);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 16px;
}
.dsa-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.dsa-index-list a {
  color: inherit;
  text-decoration: none;
  font-size: .95rem;
  border-bottom: 1px solid var(--line, #E1E1E1);
  padding-bottom: 2px;
}
.dsa-index-list a:hover { border-bottom-color: currentColor; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .dsa-btn, .dsa-card, .dsa-related-list a { transition: none; }
  .dsa-btn:hover, .dsa-card:hover, .dsa-related-list a:hover { transform: none; }
}

@media (max-width: 640px) {
  .dsa-sec { padding: 48px 0; }
  .dsa-cta { padding: 64px 0; margin-top: 48px; }
  .dsa-stats { gap: 28px; margin-top: 40px; }
}