/* Simplefuture AI — midnight, ivory and cobalt.
   Shared website theme. The interactive opening scene has its own stylesheet. */
:root {
  --ink: #142238;
  --paper: #f7f5ef;
  --muted: #526074;
  --line: #d6dce5;
  --soft: #e5ecf7;
  --yellow: #dce6ff;
  --accent: #3459d1;
  --accent-hover: #2848b5;
  --surface: #fffefa;
}

body { background: var(--paper); color: var(--ink); }
::selection { background: #dce6ff; color: #142238; }
:focus-visible { outline: 3px solid #3459d1; outline-offset: 5px; }
.skip { background: #3459d1; color: #fff; border-radius: 8px; }
em { color: #3459d1; }
.eyebrow { color: #405781; font-size: 11px; letter-spacing: 1.6px; }

/* A quiet, legible navigation bar on every page. */
header, header.is-scrolled {
  background: #fffefaf2;
  color: #142238;
  border-color: #ffffff;
  box-shadow: 0 8px 35px #1422380c, 0 1px 0 #14223808;
}
header .brand, footer .brand { color: #142238; }
.brand-ai { color: inherit; }
header nav a { color: #46566e; }
header nav a:hover, header nav a[aria-current] { color: #3459d1; }
header nav a:after { background: #3459d1; }
header.has-menu nav.is-open { border-color: #d6dce5; }
.menu-toggle { color: #142238; border-color: #a5b2c8; background: #fffefa; }
.menu-toggle:hover, .menu-toggle[aria-expanded=true] { background: #e5ecf7; }

/* Consistent action and keyboard states. */
.button, header .button.small {
  background: #3459d1;
  color: #fff;
  border-color: #3459d1;
  box-shadow: 0 3px 0 #1422380a;
}
.button:hover, header .button.small:hover {
  background: #2848b5;
  border-color: #2848b5;
  box-shadow: 0 9px 24px #3459d125;
  transform: translateY(-2px);
}
.button span, header .button.small span { background: #ffffff1f; color: #fff; }
.button:hover span, header .button.small:hover span { background: #ffffff30; }
.inline-link { color: #2848b5; text-decoration-color: #a7b9eb; transition: color .2s, text-decoration-color .2s; }
.inline-link:hover { color: #142238; text-decoration-color: currentColor; }

/* Reassurance and service cards. */
.principles { background: transparent; border-color: #d6dce5; }
.principles .wrap { color: #46566e; }
.principles span:before { background: #e5ecf7; color: #3459d1; border-color: #cad5eb; }
.section-heading > p { color: #526074; }
.service {
  background: #fffefa;
  color: #142238;
  border-color: #d9dfe8;
  box-shadow: 0 2px 3px #14223803;
}
.service:before { background: radial-gradient(420px circle at var(--pointer-x,50%) var(--pointer-y,0%), #e5ecf7, transparent 80%); }
.service:hover { border-color: #a4b6df; box-shadow: 0 20px 45px #1422380c; transform: translateY(-5px); }
.service-top > span:last-child { color: #56647a; font-size: 10px; letter-spacing: 1.15px; }
.service-top > .line-icon {
  background: linear-gradient(145deg, #f9fbff, #e5ecf7);
  color: #3459d1;
  border-color: #fff;
  box-shadow: 4px 5px 0 #cbd7ed, 7px 12px 20px #1422380b;
  transform: none;
}
.service:hover .line-icon { transform: translateY(-3px); }
.service p, .service-outcome span { color: #526074; }
.service li:before { color: #3459d1; }
.service a, .service .service-outcome { border-color: #d6dce5; color: #142238; }
.service a:hover { color: #3459d1; }
.service .service-detail { color: #2848b5; }
.service.featured {
  background: linear-gradient(155deg, #1c304f, #142238 70%);
  color: #fffefa;
  border-color: #243953;
  box-shadow: 0 10px 26px #14223812;
}
.service.featured:before { background: radial-gradient(420px circle at var(--pointer-x,50%) var(--pointer-y,0%), #5879e62b, transparent 80%); }
.service.featured:hover { border-color: #627cac; box-shadow: 0 20px 45px #14223823; }
.featured .service-top > span:last-child, .featured p, .featured .service-outcome span { color: #c9d4e6; }
.featured .line-icon {
  background: linear-gradient(145deg, #fff, #cfddfb);
  color: #2848b5;
  border-color: #f6f8ff;
  box-shadow: 4px 5px 0 #829ccc, 7px 12px 20px #08102140;
}
.featured li:before { color: #b8ccff; }
.featured a, .featured .service-outcome { color: #fff; border-color: #ffffff2b; }
.featured .service-detail { color: #dce6ff; }
.featured a:hover { color: #b8ccff; }

/* The existing workflow film belongs to the same visual system. */
.admin-feature {
  background: linear-gradient(130deg, #edf1f8, #e5ecf7);
  border-color: #d1dbed;
  box-shadow: inset 0 1px 0 #ffffffb3;
}
.admin-feature h3 { color: #142238; }
.admin-feature .eyebrow, .admin-feature-copy > p:not(.eyebrow), .admin-film figcaption { color: #526074; }
.admin-feature .inline-link { color: #2848b5; }
.admin-film video { background: #f7f5ef; border-color: #ccd6e8; box-shadow: 0 18px 40px -24px #14223855; }
.admin-film-toggle { color: #142238; border-color: #9caccc; background: #fffefa; }
.admin-film-toggle:hover { background: #dce6ff; border-color: #6d89c9; }
.admin-film-toggle:focus-visible, .admin-film video:focus-visible { outline-color: #3459d1; }

/* A navy showcase, with readable examples and a clear selected state. */
.practice { background: #142238; color: #fffefa; border: 1px solid #24364f; }
.practice:before {
  background: radial-gradient(ellipse at 95% 5%, #3459d126, transparent 55%),
    linear-gradient(115deg, transparent 60%, #ffffff03);
}
.practice .eyebrow, .practice h2 em { color: #aec6ff; }
.practice-heading > p, .example-copy > p, .example-copy dd { color: #c7d2e3; }
.practice-options button { color: #dce5f3; border-color: #51617a; background: #ffffff03; }
.practice-options button:hover { border-color: #adbef0; background: #ffffff08; }
.practice-options button[aria-pressed=true] { background: #dce6ff; color: #142238; border-color: #dce6ff; }
.practice-options button:focus-visible { outline-color: #b8ccff; }
.demo-label { color: #cad7ed; border-color: #536883; }
.example-copy dl { border-color: #526b93; }
.example-copy dt { color: #adc6ff; }
.example-copy .button { background: #fffefa; color: #142238; border-color: #fffefa; }
.example-copy .button span { background: #e5ecf7; color: #3459d1; }
.example-copy .button:hover { background: #dce6ff; border-color: #dce6ff; box-shadow: 0 9px 24px #070e1b30; }
.example-copy .button:focus-visible { outline-color: #b8ccff; }
.demo-board {
  background: #fffefa;
  color: #142238;
  border-color: #e9eef8;
  box-shadow: 12px 17px 0 -7px #7991c42e, 0 30px 55px #050c183d;
  transform: none;
}
.demo-board:hover { transform: translateY(-3px); }
.board-bar { border-color: #dbe2ec; color: #284366; }
.board-bar i { background: #3459d1; }
.board-bar > span:last-child, .board-note { color: #59677d; }
.flow-node { background: #fff; border-color: #d2dcec; }
.flow-node .node-icon { background: #e5ecf7; color: #3459d1; }
.flow-node small { color: #526a8b; }
.flow-node div > span { color: #5d6a7c; }
.flow-node b { color: #3459d1; }
.flow-connector { border-color: #bdcce3; }
.flow-connector span { color: #526074; }
.review-node { background: #e5ecf7; border-color: #a9bde1; }
.concept-main { background: #e5ecf7; }
.concept-cta { background: #2848b5; color: #fff; }
.concept-art span { background: #748cb6; }
.concept-art span:nth-child(2) { background: #a3b6d9; }
.concept-art span:nth-child(3) { background: #476994; }
.sample-question { background: #edf1f8; border-color: #cedaeb; }
.sample-question small, .sample-draft small { color: #526a8b; }
.sample-draft { background: #fff; border-color: #cedaeb; }
.review-pill { background: #e5ecf7; color: #284366; }
.practice-disclaimer { color: #bccbdf; border-color: #425977; }

/* The process, founder and local service information. */
.steps:before { background: #d6dce5; }
.steps article > span {
  background: #e5ecf7;
  color: #2848b5;
  border-color: #fff;
  box-shadow: 0 0 0 8px #f7f5ef, 3px 4px 0 1px #bacbea;
}
.steps article:hover > span { background: #dce6ff; }
.steps p { color: #526074; }
.promise { background: #edf1f8; border-color: #d4deef; }
.promise > span { color: #3459d1; }
.promise p { color: #526074; }
.promise strong { color: #142238; }
.founder-seal {
  background: linear-gradient(140deg, #263f64, #142238 80%);
  color: #dce6ff;
  border-color: #425b7f;
  box-shadow: 8px 10px 0 #cad6eb, 0 24px 50px #14223812;
  transform: none;
}
.founder-seal:before { border-color: #b9ccec4a; }
.founder-seal > span { color: #fffefa; }
.founder p:not(.eyebrow) { color: #526074; }
.local-help { border-color: #d6dce5; }
.local-help h2 em { color: #3459d1; }
.local-help > p:not(.eyebrow) { color: #526074; }
.local-help nav a { color: #2848b5; text-decoration-color: #a7b9eb; }
.local-help nav a:hover { color: #142238; text-decoration-color: currentColor; }
.local-help nav a:after { background: #3459d1; }

/* Questions open without changing the page's visual rhythm. */
.faqs details { border-color: #d6dce5; }
.faqs summary { color: #142238; }
.faqs summary:hover { color: #2848b5; }
.faqs summary:after { border-color: #bdcbe0; color: #3459d1; }
.faqs details[open] summary:after { background: #dce6ff; border-color: #b9cbee; }
.faqs details p { color: #526074; }

/* A clear final invitation, with an uncluttered light form. */
.contact {
  background: #142238;
  color: #fffefa;
  border-color: #263a58;
  box-shadow: 0 20px 55px #1422380c;
}
.contact:before {
  border-color: #6c92ef0a;
  box-shadow: 0 0 0 60px #6c92ef05;
}
.contact .eyebrow { color: #b6ccff; }
.contact > div > p { color: #d0dbec; }
.contact h2 { color: #fffefa; }
.contact h2 em { color: #aec6ff; }
.contact > div > p > a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: #9fb5df;
  text-underline-offset: 5px;
  overflow-wrap: anywhere;
}
.contact > div > p > a:hover { color: #b8ccff; }
.contact > div a:focus-visible { outline-color: #b8ccff; }
.next-expectation { border-color: #425a7c; }
.next-expectation h3 { color: #fffefa; }
.next-expectation p { color: #c7d2e3; }
.contact form {
  background: #fffefa;
  color: #142238;
  border-color: #fff;
  box-shadow: 0 25px 60px #050c1833;
}
.contact form:focus-within { border-color: #adc6ff; }
.contact form h3, .contact form label { color: #142238; }
.contact input:not([type="hidden"]), .contact select, .contact textarea {
  background: #f8f9fc;
  color: #142238;
  border-color: #a8b5ca;
}
.contact input::placeholder, .contact textarea::placeholder { color: #647086; opacity: 1; }
.contact input:focus, .contact select:focus, .contact textarea:focus {
  outline: 3px solid #3459d1;
  outline-offset: 2px;
  border-color: #3459d1;
  box-shadow: none;
}
.contact .form-note { color: #526074; }
.contact #form-status { color: #142238; }
.contact .button { background: #3459d1; color: #fff; border-color: #3459d1; }
.contact .button:hover { background: #2848b5; border-color: #2848b5; }
.contact .button:focus-visible { outline-color: #3459d1; }

/* Footer and privacy dialog. */
footer p, footer > div { color: #526074; }
footer a:hover, footer .text-button:hover { color: #2848b5; }
dialog { background: #fffefa; color: #142238; border-color: #d6dce5; box-shadow: 0 30px 100px #0a14244d; }
dialog::backdrop { background: #101d33c9; }
dialog .close { color: #142238; border-radius: 7px; }
dialog .close:hover { background: #e5ecf7; }
dialog p:not(.eyebrow) { color: #526074; }

/* The three crawlable service pages share the same premium palette. */
.service-page .service-hero {
  background: radial-gradient(ellipse at 90% 70%, #dce6ff99, transparent 58%), #f7f5ef;
  border-color: #d6dce5;
}
.service-page .service-hero h1 { color: #142238; }
.service-page .service-hero h1 em { color: #3459d1; }
.service-page .service-lead { color: #526074; }
.breadcrumbs a, .breadcrumbs > span { color: #526074; }
.breadcrumbs a:hover { color: #2848b5; }
.breadcrumbs a:after { background: #3459d1; }
.service-body article p { color: #526074; }
.service-body article h2 { color: #142238; }
.service-page .service-aside {
  background: #fffefa;
  border-color: #d8e1ef;
  box-shadow: 8px 12px 0 #e5ecf7;
}
.service-aside p { color: #526074; }
.service-aside > a, .service-aside nav a { color: #2848b5; }
.service-aside > a:hover, .service-aside nav a:hover { color: #142238; }
.service-aside nav a:after { background: #3459d1; }
.service-aside hr { border-color: #d6dce5; }
.service-page .service-end { background: #e5ecf7; border: 1px solid #d2ddef; }
.service-end h2 { color: #142238; }
.service-end h2 em { color: #3459d1; }
.service-end p { color: #526074; }
.service-page footer { border-color: #d6dce5; }
.service-page footer > a { color: #2848b5; }

@media (max-width: 900px) {
  .steps article { border-color: #d6dce5; }
  .practice { border-radius: 24px; }
  .service-page .service-end { margin-inline: 24px; }
}
@media (max-width: 600px) {
  .contact { gap: 30px; }
  .contact > div > p > a { font-size: 16px; }
  .service-page .service-end { margin-inline: 16px; padding: 28px 23px; }
  .founder-seal { box-shadow: 6px 8px 0 #cad6eb, 0 18px 32px #14223810; }
}
@media (prefers-reduced-motion: reduce) {
  .service:hover, .service:hover .line-icon, .button:hover,
  header .button.small:hover, .demo-board:hover { transform: none; }
}