/* ──────────────────────────────────────────────────────────────────────────
   Sallis Digital — shared stylesheet for index, services, pricing, about and contact

   Layout concept: alternating full-bleed colour bands. A black hero carries the
   pitch, then every section owns a colour. Nothing is a hairline; everything is
   a block you can see from across the room.

   Single committed theme, deliberately — the page does not follow the viewer's
   light/dark setting, because alternating full-bleed colour bands don't invert
   sensibly. Every colour is therefore set explicitly.

   Tailwind runs from the CDN and reads its theme from theme.js. This file holds
   the design tokens and the components Tailwind utilities can't express.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --ink:    #0A0C11;
  --ink-2:  #151A24;
  --bone:   #F4F3EF;
  --paper:  #FFFFFF;
  --amber:  #FFB020;
  --amber-2:#FF8A00;
  --blue:   #2B4BFF;
  --teal:   #00BFA0;
  --coral:  #FF5F45;
  --mute:   #5F6874;
  --rule:   #E6E4DD;
  color-scheme: light;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html { scroll-padding-top: 6.5rem; }

body {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

h1, h2, h3 { text-wrap: balance; }

::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ── Type scale ─────────────────────────────────────────────────────────── */
.d1 { font-family: Outfit, sans-serif; font-weight: 800; letter-spacing: -.035em; line-height: .95; }
.d2 { font-family: Outfit, sans-serif; font-weight: 800; letter-spacing: -.03em;  line-height: 1.02; }
.d3 { font-family: Outfit, sans-serif; font-weight: 700; letter-spacing: -.02em;  line-height: 1.12; }

/* The logo is the name set in Oswald, nothing else */
.wordmark {
  font-family: Oswald, "Arial Narrow", Impact, sans-serif;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1;
}

.eyebrow {
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── Buttons: pill with a circular arrow badge ──────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: .55rem .7rem .55rem 1.6rem;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.pill .badge {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  flex: none;
  transition: transform .18s ease;
}
.pill:hover { transform: translateY(-2px); }
.pill:hover .badge { transform: translateX(3px); }

.pill-amber { background: var(--amber); color: var(--ink); }
.pill-amber .badge { background: var(--ink); color: var(--amber); }

.pill-ink { background: var(--ink); color: #fff; }
.pill-ink .badge { background: var(--amber); color: var(--ink); }

.pill-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.pill-ghost .badge { background: rgba(255,255,255,.14); color: #fff; }
.pill-ghost:hover { background: rgba(255,255,255,.08); }

/* ── Hero atmosphere: soft colour fields behind the type ────────────────── */
.glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  opacity: .55;
  pointer-events: none;
}

/* ── Services ticker (home) ─────────────────────────────────────────────── */
.ticker-track {
  display: flex;
  width: max-content;
  animation: slide 38s linear infinite;
}
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Service cards (home) ───────────────────────────────────────────────── */
.svc {
  border-radius: 1.25rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.svc h3 { margin-top: 1.5rem; }
.svc .ico {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: .9rem;
  display: grid;
  place-items: center;
}

/* ── Service blocks (services page) ─────────────────────────────────────── */
.svc-head { display: flex; align-items: baseline; gap: 1.25rem; }
.svc-num {
  font-family: Outfit, sans-serif;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-size: 3.5rem;
}
@media (min-width: 640px) {
  .svc-num { font-size: 5rem; }
}

.checks li { display: flex; gap: .75rem; line-height: 1.6; }
.checks li::before {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-top: .55rem;
  background: currentColor;
  border-radius: 2px;
}

/* Jump rail (services page) */
.jump a {
  display: block;
  padding: .5rem 0 .5rem 1rem;
  border-left: 2px solid var(--rule);
  color: var(--mute);
  font-size: .9rem;
}
.jump a:hover { border-left-color: var(--amber); color: var(--ink); }

/* ── Pricing matrix (home + pricing) ────────────────────────────────────── */
.matrix { border-collapse: collapse; width: 100%; min-width: 48rem; }
.matrix th,
.matrix td {
  padding: 1rem 1.1rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.matrix thead th { vertical-align: bottom; border-bottom: 2px solid rgba(255,255,255,.3); }
.matrix tbody th { font-weight: 400; color: #C6CBD4; font-size: .95rem; }
.matrix td { text-align: center; width: 10rem; }
.matrix .yes { color: var(--amber); font-size: 1.1rem; }
.matrix .no  { color: #39414F; }
.matrix .col-plain { color: #C6CBD4; font-weight: 600; }
.matrix tbody tr:hover th,
.matrix tbody tr:hover td { background: rgba(255,255,255,.04); }
.matrix .hot { background: rgba(255,176,32,.07); }

/* ── Single-service rate rows (pricing page) ────────────────────────────── */
.rate {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 2rem;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.rate:last-child { border-bottom: 0; }
.rate .price {
  font-family: Outfit, sans-serif;
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: 1.75rem;
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 480px) {
  .rate { grid-template-columns: 1fr; }
  .rate .price { text-align: left; }
}

/* ── FAQ disclosures ────────────────────────────────────────────────────── */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details .mk { transition: transform .2s ease; }
details[open] .mk { transform: rotate(45deg); }

/* ── Form fields ────────────────────────────────────────────────────────── */
.field {
  width: 100%;
  background: #fff;
  border: 2px solid #E3E2DC;
  border-radius: .7rem;
  padding: .85rem 1rem;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .15s;
}
.field::placeholder { color: #A8AEB8; }
.field:focus { outline: none; border-color: var(--blue); }

/* ── Motion preferences ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .pill,
  .pill .badge,
  details .mk { transition: none; }
}