/*
 * ashlabs.uk
 *
 * A studio site: hero, what we do, the work, how we work, contact. Static HTML
 * and one stylesheet — a marketing page that needs a build step and a runtime
 * to render a paragraph is a liability, not a feature. It also means link
 * previews and search engines see the real content, which the app itself
 * cannot manage because it is client-rendered.
 *
 * Light by default with a dark preference honoured, because a studio site gets
 * opened on other people's machines in daylight far more than the app does.
 */

:root {
  --bg: #ffffff;
  --raised: #f6f6f3;
  --line: #e6e6e0;
  --fg: #12120f;
  --muted: #5f5f58;
  --accent: #6b7f00;
  --accent-fg: #ffffff;
  --radius: 16px;
  --max: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0d0c;
    --raised: #171715;
    --line: #29291f;
    --fg: #f3f3ee;
    --muted: #9c9c94;
    --accent: #c3de1e;
    --accent-fg: #1a1a00;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

a { color: inherit; }
a.plain { text-decoration: none; }

h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.15; margin: 0; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }

/* ------------------------------------------------------------------ nav -- */

header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 66px;
}

.brand {
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  letter-spacing: -0.02em;
}
.brand span { color: var(--accent); }

header.site nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
header.site nav a {
  text-decoration: none;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 0.95rem;
}
header.site nav a:hover { color: var(--fg); background: var(--raised); }
header.site nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }

/* Below 640px the links would wrap into the logo; the nav collapses to the one
   link that matters, which is how to get in touch. */
@media (max-width: 640px) {
  header.site nav a.hide-sm { display: none; }
}

.button {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-fg);
  text-decoration: none;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 11px;
  border: 0;
  font-size: 1rem;
  cursor: pointer;
}
.button:hover { filter: brightness(1.08); }
.button.quiet {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
}

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

.hero { padding: 96px 0 72px; }
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  max-width: 16ch;
  margin-bottom: 22px;
}
.hero .lede {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 34px;
}
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 18px;
}

/* -------------------------------------------------------------- section -- */

section { padding: 72px 0; border-top: 1px solid var(--line); }
section > .wrap > h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 12px; }
section > .wrap > .sub { color: var(--muted); max-width: 52ch; margin-bottom: 40px; }

.cards { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.card p { color: var(--muted); margin-bottom: 0; }

/* Numbered steps, without a list marker fighting the layout. */
ol.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 860px) { ol.steps { grid-template-columns: repeat(3, 1fr); } }
ol.steps li { counter-increment: step; }
ol.steps .n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 14px;
}
ol.steps h3 { font-size: 1.05rem; margin-bottom: 6px; }
ol.steps p { color: var(--muted); margin: 0; }

/* ----------------------------------------------------------------- work -- */

.work {
  display: grid;
  gap: 32px;
  align-items: center;
  grid-template-columns: 1fr;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
}
@media (min-width: 880px) { .work { grid-template-columns: 1.1fr 1fr; padding: 44px; } }

.work h3 { font-size: 1.7rem; margin-bottom: 10px; }
.work .tag {
  display: inline-block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 16px;
}

ul.ticks { list-style: none; margin: 0 0 22px; padding: 0; }
ul.ticks li { padding-left: 26px; position: relative; margin-bottom: 10px; color: var(--muted); }
ul.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
}

/* A phone-shaped frame, drawn rather than screenshotted: a mocked-up image of
   an app that looks different in practice is worse than no image. */
.device {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--bg);
  padding: 14px;
  max-width: 280px;
  margin: 0 auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.device .screen {
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, var(--bg)), var(--bg));
  padding: 18px 16px 24px;
  min-height: 330px;
}
.device .line { height: 10px; border-radius: 5px; background: var(--line); margin-bottom: 10px; }
.device .line.short { width: 45%; }
.device .amount { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; margin: 18px 0 6px; }
.device .row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--muted);
}
.device .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

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

.cta { text-align: center; }
.cta h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 14px; }
.cta p { color: var(--muted); max-width: 44ch; margin: 0 auto 28px; }

footer.site { border-top: 1px solid var(--line); padding: 40px 0 60px; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
footer.site a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
footer.site a:hover { color: var(--fg); }
footer.site .spacer { flex: 1; }

/* --------------------------------------------------------------- forms --- */

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.9rem; margin-bottom: 6px; font-weight: 600; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.prose { max-width: 40rem; }
.prose h2 { font-size: 1.4rem; margin: 36px 0 10px; }
.prose p { color: var(--muted); }