/* The shared stylesheet for the pages BESIDE the home page — /website-design/, /online-store/,
   /mobile-apps/, /ai-automation/, /pricing/.
 *
 * WHY THESE PAGES DO NOT LOOK LIKE THE HOME PAGE'S MACHINERY. index.html carries a 5-second
 * curtain, GSAP from a CDN, split-text headings, a custom scroll rail and 42 scroll reveals. That
 * is right for the one page a prospect lands on from a name they already know, and wrong for a
 * page somebody reaches from a Google result: they arrived with a question, and every one of
 * those costs time before the answer appears. These pages share the tokens, the faces and the
 * ornament, and none of the choreography. No script runs on them at all.
 *
 * The tokens are index.html's, copied rather than imported, because index.html inlines its CSS by
 * design — a first paint that waits on a stylesheet is the thing its curtain exists to avoid. Two
 * copies of a colour is the cost; the alternative is a render-blocking request on the page that
 * can least afford one. Keep them in step: `tests/test_sitepages.py` asserts the palette matches.
 */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%;
  font-display: swap; src: url("fonts/archivo-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 400 900;
  font-display: swap; src: url("fonts/unbounded-latin.woff2") format("woff2"); }

:root {
  --bg: #edeae4; --surface: #fff; --ink: #131110; --muted: rgba(19,17,16,.62);
  --border: rgba(19,17,16,.12); --gold: #c08c2e; --gold-bright: #e2b95d; --bloom: #eed9a4;
  --dark-stage: #0f0d0a; --on-dark: #f3efe7; --on-dark-muted: rgba(243,239,231,.62);
  --radius: 1.4rem; --radius-s: 1rem;
  --techno: Unbounded, Archivo, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: Archivo, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); overflow-x: hidden;
  font: 17px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 26px); }
a { color: var(--gold); text-underline-offset: .18em; }
a:hover { color: var(--gold-bright); }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; line-height: 1.15; }

/* --- the bar ---------------------------------------------------------------------------------
   The wordmark is a link home on every page but the home page, which is how a visitor who landed
   on /online-store/ from a search finds the rest of the studio. */
header.bar { border-bottom: 1px solid var(--border); background: rgba(237,234,228,.9);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
header.bar .wrap { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px; }
.mark { font-family: var(--techno); font-weight: 800; font-size: 18px; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; }
.mark em { font-style: normal; color: var(--gold); }
nav.top { display: flex; flex-wrap: wrap; gap: clamp(10px, 2vw, 20px); font-size: 14px; }
nav.top a { color: var(--muted); text-decoration: none; }
nav.top a:hover, nav.top a[aria-current="page"] { color: var(--ink); }
nav.top a[aria-current="page"] { font-weight: 600; }

/* --- the head of the page --------------------------------------------------------------------- */
.hero { padding: clamp(40px, 7vw, 76px) 0 clamp(24px, 4vw, 40px); }
.eyebrow { font: 600 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px; }
h1 { font-size: clamp(32px, 6vw, 54px); margin: 0 0 20px; font-weight: 800; }
.lede { font-size: clamp(18px, 2.4vw, 22px); line-height: 1.5; color: rgba(19,17,16,.78);
  margin: 0 0 28px; max-width: 42ch; }

/* --- the price, stated rather than hinted at ---------------------------------------------------
   `services.ts` forbids a range and forbids an hourly rate. A page that gives a number and its
   inclusions in the same block is the visible form of that rule. */
.price { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline;
  padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); margin: 0 0 14px; }
.price b { font-family: var(--techno); font-weight: 800; font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -.03em; }
.price span { color: var(--muted); font-size: 15px; }
.after { font-size: 14px; color: var(--muted); margin: 0 0 34px; }

/* --- body sections ----------------------------------------------------------------------------- */
section { padding: clamp(28px, 5vw, 46px) 0; border-top: 1px solid var(--border); }
section > .wrap > h2 { font-size: clamp(24px, 3.6vw, 34px); margin: 0 0 8px; }
section > .wrap > h2 + p { color: var(--muted); margin: 0 0 24px; max-width: 58ch; }
p { max-width: 68ch; }

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: 20px 22px; }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; font-size: 15.5px; color: rgba(19,17,16,.72); }

ul.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ul.ticks li { padding-left: 30px; position: relative; max-width: 66ch; }
ul.ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--gold);
  font-weight: 700; }

ol.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 16px; }
ol.steps li { counter-increment: s; padding-left: 52px; position: relative; max-width: 66ch; }
ol.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 2px;
  font: 700 14px/1 var(--mono); color: var(--gold); letter-spacing: .08em; }
ol.steps b { display: block; font-family: var(--display); font-size: 17px; }

/* --- questions, open by default ----------------------------------------------------------------
   <details> that starts closed hides its answer from a crawler's rendered text in some readers and
   from Ctrl-F in every browser. These are open, and the arrow only collapses them. */
details.q { border-top: 1px solid var(--border); padding: 16px 0; }
details.q:last-of-type { border-bottom: 1px solid var(--border); }
details.q summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 18px;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after { content: "\2212"; color: var(--gold); font-weight: 400; }
details.q:not([open]) summary::after { content: "+"; }
details.q p { margin: 12px 0 0; color: rgba(19,17,16,.76); }

/* --- the call to action ------------------------------------------------------------------------- */
.cta { background: var(--dark-stage); color: var(--on-dark); border-top: none;
  margin-top: clamp(28px, 5vw, 46px); }
.cta h2 { color: var(--on-dark); }
.cta p { color: var(--on-dark-muted); }
.btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn { display: inline-block; padding: 13px 22px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 15px; background: var(--gold); color: #131110;
  border: 1px solid var(--gold); }
.btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #131110; }
.btn.ghost { background: transparent; color: var(--on-dark); border-color: rgba(243,239,231,.42); }
.btn.ghost:hover { background: rgba(243,239,231,.08); color: var(--on-dark); }

/* --- the foot ------------------------------------------------------------------------------------ */
footer { background: var(--dark-stage); color: var(--on-dark-muted); padding: 30px 0 40px;
  font-size: 14px; }
footer .frow { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px; }
footer .frow a { color: var(--on-dark); text-decoration: none; }
footer .frow a:hover { color: var(--gold-bright); }
footer .row { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
footer nav a { color: var(--on-dark-muted); text-decoration: none; }
footer nav a:hover { color: var(--on-dark); }

/* --- narrow screens ------------------------------------------------------------------------------
   Five links and a wordmark wrapped onto three lines on a phone, and because the bar is sticky
   those three lines followed the visitor down the page — 110px of a 844px screen spent on
   navigation nobody had asked for. On a phone the bar scrolls away with the page and the links
   become one horizontal strip; the scrollbar is hidden rather than styled, as everywhere else in
   this project. */
@media (max-width: 720px) {
  header.bar { position: static; }
  header.bar .wrap { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 12px;
    padding-bottom: 12px; min-height: 0; }
  nav.top { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none;
    -ms-overflow-style: none; }
  nav.top::-webkit-scrollbar { display: none; }
  nav.top a { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}