/* skailstudio.com, hand-built (2026-09-30), replacing the Framer mirror.

   THE FONT AND THE NAV ARE SHARED BY EVERY SKAIL SITE: /assets/font.css (Archivo, one variable file with
   width and weight axes) and /assets/nav.css + nav.js are copies of SkailSites/shared/, written by
   sync_shared.py; this site sets only the nav's theme (.nav custom properties, below). Headlines are
   Archivo at its narrowest and heaviest, the condensed display look the Framer page asked Anton for
   but never loaded; body copy is Archivo at normal width. Every colour, size and space below comes
   from the tokens in :root. */

:root {
  color-scheme: dark;

  /* colour */
  --bg: #0a0a0a;
  --bg-soft: #121212;
  --txt: #f4f4f4;
  --body: #cfcfcf;
  --muted: #9a9a9a;          /* 7.0:1 on --bg, 6.6:1 on --bg-soft */
  --faint: #767676;          /* the ticker's words: quieter than body text, 4.6:1 on --bg (item 135) */
  --red: #ff2e1f;            /* accents on the dark page: 5.4:1 on --bg */
  --red-fill: #d41900;       /* a red surface under white text: 5.3:1 */
  --red-fill-hover: #b81600;
  --error: #ff8a80;
  --line: #222;
  --line-soft: #1a1a1a;

  /* type */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-stretch: 62%;
  --display-weight: 800;
  --fs-h1: clamp(48px, 9.5vw, 136px);
  --fs-h2: clamp(34px, 6vw, 72px);
  --fs-h3: clamp(24px, 4vw, 44px);
  --fs-big: clamp(46px, 8vw, 110px);
  --fs-stat: clamp(40px, 6vw, 78px);
  --fs-lead: clamp(22px, 3vw, 34px);
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-small: 15px;
  --fs-label: 14px;          /* the smallest text on the site */
  --lh-display: .92;
  --lh-body: 1.6;
  --measure: 54ch;           /* a ch is a "0", wider than the average letter: 54ch sets about 70 to 76 characters a line
                                in this face, the owner's ~75 (2026-10-23: 49ch, about 68, "wraps way too early") */

  /* space and shape */
  /* page width and gutter: --page-max and --page-gutter, from the shared /assets/layout.css */
  --sec-y: 60px;
  --radius-pill: 100px;
  --radius-field: 8px;
  --dur: .2s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 104px; }   /* a section's heading clears the pinned nav */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--txt);
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--txt); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--txt); color: var(--bg); padding: 10px 14px; border-radius: var(--radius-field); }
.skip:focus { left: 8px; }

/* the display face: Archivo at its narrowest and heaviest */
.display, h1, h2, h3 {
  font-family: var(--font); font-stretch: var(--display-stretch); font-weight: var(--display-weight);
  text-transform: uppercase; letter-spacing: .5px; line-height: var(--lh-display); margin: 0;
}
p, li, dd { text-wrap: pretty; }   /* body prose never ends on a lone word (check_text_fills_box.js measureLastWord holds it) */
.nobr { white-space: nowrap; }      /* a compound that must not split at its hyphen ("20-" / "minute") */
.accent { color: var(--red); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--red-fill); color: #fff; text-decoration: none; border: 0; cursor: pointer;
  font: 700 var(--fs-label)/1 var(--font); letter-spacing: 1px; text-transform: uppercase;
  padding: 16px 26px; border-radius: var(--radius-pill);
  transition: background var(--dur), transform var(--dur), opacity var(--dur);
}
.btn:hover { background: var(--red-fill-hover); transform: translateY(-2px); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }

/* ── nav: the shared component (/assets/nav.css); this site's theme only ────── */
.nav { --nav-panel: var(--bg); --nav-fill: #1c1c1e; }   /* solid: page text must not show through the bar */
/* The section on screen is marked in the pill (site.js sets aria-current as the page scrolls; item 209). */
.nav-links a[aria-current="true"] { background: var(--nav-hover); color: var(--ink, #fff); }
.nav-cta { background: transparent; box-shadow: inset 0 0 0 1px var(--txt); padding: 12px 20px; font-size: var(--fs-small); font-weight: 600; letter-spacing: .5px; border-radius: 32px; }

.nav-cta:hover { background: var(--txt); color: var(--bg); }   /* outlined: the page's own red button is the one primary in view (item 135) */
/* A page's own "Start a project" marked [data-cta-band] takes the bar's away while it is on screen, so one is in view,
   never two and never none (site.js sets .cta-band-in; item 9). The bar's folds to nothing rather than leaving a blank
   slot, and the pill, which hugs its contents, closes up round the logo and links (board: an empty end read as broken). */
.navbar > .nav-cta { max-width: 260px; overflow: hidden; transition: background var(--dur), color var(--dur), opacity var(--dur); }   /* the fold itself snaps: animating width, padding or margin re-lays the bar every frame (Impeccable layout-transition) */
.cta-band-in .navbar > .nav-cta { max-width: 0; padding-left: 0; padding-right: 0; margin-left: -8px; opacity: 0; box-shadow: none; visibility: hidden; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 150px 0 40px; }
.hero h1 { font-size: var(--fs-h1); max-width: 100%; }
.hero-sub { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; margin-top: 38px; }   /* the button under its paragraph, on the headline's left edge (item 135) */
.hero-sub p { margin: 0; text-wrap: pretty; max-width: var(--measure); font-size: var(--fs-body-lg); line-height: 1.55; color: var(--body); }
/* The hero's action sits at the end of its sentence on every width, so the first screen has one thing to do (item 135). */
.hero-cta { flex: none; min-height: 48px; }
.marquee {
  margin-top: 60px; padding: 18px 0; overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);   /* the words run off under a fade, not a hard cut */
}
.marquee-track { display: inline-flex; animation: ticker 112s linear infinite; }
.marquee-group { display: flex; flex: none; }
.marquee-track span {
  font-stretch: var(--display-stretch); font-weight: var(--display-weight); text-transform: uppercase;
  font-size: 22px; letter-spacing: 1px; color: var(--faint); padding: 0 26px;
}
.marquee-track b { color: var(--red); font-weight: inherit; margin-left: 14px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ── sections ─────────────────────────────────────────────────────────── */
.sec { padding: var(--sec-y) 0 20px; scroll-margin-top: 16px; }
.sec h2 { font-size: var(--fs-h2); margin-bottom: 28px; }
.sec p { max-width: var(--measure); }

.about-grid { display: flex; flex-direction: column; gap: 34px; }   /* the statement, then its proof under it: stacked, not a statement left and a grey column right (board, item 55) */
.about-side { max-width: var(--measure); }
.about-grid .lead { margin: 0; max-width: var(--measure); font-size: var(--fs-lead); line-height: 1.4; font-weight: 500; text-wrap: wrap; }   /* pretty pulled its last four lines in at 390 */
.about-grid .lead b { color: var(--red); font-weight: 700; }
.about-side p { color: var(--body); font-size: var(--fs-body); line-height: 1.7; margin: 0 0 18px; }
.about-side p:last-child { margin-bottom: 0; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; margin: 0; padding: 0; }   /* a stat-band (saas-design): open figures on a hairline, not four filled tiles (item 8) */
.stat { border-top: 1px solid var(--line); padding: 24px 0 0; }
.stat dd { margin: 0; font-stretch: var(--display-stretch); font-weight: var(--display-weight); font-size: var(--fs-stat); line-height: 1; }
.stat dd a { color: inherit; text-decoration: none; }   /* each figure opens the case study it comes from */
.stat dd a:hover, .stat dd a:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
/* Each caption is one line where all four fit on one line (the wide 4-up band), and a set two-line stack below that,
   so no cell reads one line beside two. */
.stat dt .l2 { display: block; }
@media (min-width: 1200px) { .stat dt .l2 { display: inline; } }
.stat dt { margin-top: 14px; color: var(--muted); font-size: var(--fs-label); font-weight: 600; }   /* sentence case: a stat's caption, not an eyebrow (saas-design) */
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: flex-start; text-align: left; }   /* on the left edge, as the button under the row is */
.btn-line { background: transparent; color: var(--txt); box-shadow: inset 0 0 0 1px var(--txt); }
.btn-line:hover { background: var(--txt); color: var(--bg); }
.stats-more { margin-top: 40px; }   /* the same gap as between the band's rows */

.acc { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.acc-item { border-top: 1px solid var(--line); scroll-margin-top: 96px; }   /* an opened row stays clear of the sticky bar */
.acc-head {
  display: flex; align-items: center; gap: 24px; width: 100%; padding: 30px 6px;
  background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.acc-num { min-width: 46px; font-size: var(--fs-label); color: var(--muted); font-weight: 700; }
.acc-h { font: inherit; letter-spacing: normal; text-transform: none; line-height: inherit; }
.acc-title {
  flex: 1; font-size: var(--fs-h3); line-height: 1; transition: color .25s;
  font-stretch: var(--display-stretch); font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: .5px;
}
.acc-plus { width: 22px; height: 22px; flex: none; color: var(--muted); transition: transform .3s, color .25s; }
.acc-head[aria-expanded="true"] .acc-title, .acc-head:hover .acc-title { color: var(--red); }
.acc-head[aria-expanded="true"] .acc-plus { transform: rotate(45deg); color: var(--red); }
.acc-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s ease; }
.acc-panel[data-closed] { grid-template-rows: 0fr; }
.acc-panel > div { overflow: hidden; }
.acc-body { padding: 0 6px 34px 76px; display: grid; grid-template-columns: minmax(0, calc(var(--measure) * 17 / 16)); gap: 22px; }   /* under 1000px the list sits under its paragraph */
@media (min-width: 1000px) {
  /* the paragraph at the full measure, the list beside it as its own column (owner, 2026-10-23) */
  .acc-body { grid-template-columns: minmax(0, calc(var(--measure) * 17 / 16)) minmax(11rem, 16rem); column-gap: 64px; align-items: start; }
  /* both columns on the paragraph's line grid: "Includes" on its first line, each item on the next, so every item
     sits level with a line of the description (owner, 2026-10-23: the list floated a line below, misaligned) */
  .acc-body .acc-tools h4 { margin: 0; line-height: calc(17px * 1.65); }
  .acc-tools .chips li { display: block; white-space: normal; line-height: calc(17px * 1.65); }
  .acc-tools .chips li:not(:last-child)::after { content: none; }   /* one item a line: no commas */
  .acc-tools .chips { text-wrap: wrap; }
}
.acc-body p { margin: 0; text-wrap: pretty; color: var(--body); font-size: 17px; line-height: 1.65; }
.acc-tools h4 { margin: 0 0 10px; font-size: var(--fs-label); color: var(--muted); font-weight: 700; }
.chips { list-style: none; margin: 0; padding: 0; }   /* plain text, not pills: nothing here is tappable; a real space between items, so the gap is a word space */
.chips li { display: inline; font-size: var(--fs-small); color: var(--body); line-height: 1.6; white-space: nowrap; }
.chips li:not(:last-child)::after { content: ","; }   /* a comma reads right at a line end, where a dot dangles */
@media (min-width: 700px) { .chips { text-wrap: balance; } }   /* wide rows left one word on the last line; on a phone balance broke the first line early */

.industries { margin-top: 40px; display: flex; flex-direction: column; gap: 10px; }   /* the lead-in above its list at every width, as the Toolkit heading sits above its chips */
.industries h3 { font: 700 var(--fs-label)/1.6 var(--font); letter-spacing: normal; text-transform: none; color: var(--muted); }
.industries ul { list-style: none; margin: 0 0 0 -34px; padding: 0; display: flex; flex-wrap: wrap; row-gap: 6px; clip-path: inset(0 0 0 34px); }
.industries li { white-space: nowrap; padding-left: 34px; position: relative; font-stretch: var(--display-stretch); font-weight: var(--display-weight); font-size: 22px; letter-spacing: 1px; text-transform: uppercase; }
.industries .sep { position: absolute; left: 10px; color: var(--red); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.step { background: var(--bg); padding: 36px 28px; }
.step-num { font-stretch: var(--display-stretch); font-weight: var(--display-weight); color: var(--red); font-size: 34px; line-height: 1; }
.step h3 { font-size: 22px; letter-spacing: .5px; margin: 14px 0 10px; }
.step p { margin: 0; text-wrap: pretty; color: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); }
#approach { padding-bottom: var(--sec-y); }

/* ── contact ──────────────────────────────────────────────────────────── */
.contact { background: var(--bg-soft); padding: var(--sec-y) 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 72px; align-items: start; }   /* the copy column is as wide as its text, so the form sits beside it (item 135) */
.contact h2 { font-size: var(--fs-big); line-height: .9; margin: 0; }
.contact h2 .accent { display: block; }
.contact-lead { margin: 26px 0 0; color: var(--body); font-size: var(--fs-body-lg); line-height: var(--lh-body); max-width: 420px; }
.contact-meta { max-width: 420px; margin-top: 34px; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-small); color: var(--muted); }
.contact-meta a { color: var(--muted); }
.contact-meta a:hover { color: var(--red); }
form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; margin-bottom: 9px; font-size: var(--fs-label); color: var(--muted); font-weight: 700; }
.field input, .field textarea, .field select {
  width: 100%; display: block; background: #1c1c1e; border: 1px solid #2c2c2e;   /* raised a step above the section, not a hole in it (item 135) */
  color: var(--txt);
  padding: 15px 16px; font: 400 var(--fs-small)/1.4 var(--font); border-radius: var(--radius-field); transition: border-color var(--dur);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--red); }
.field input::placeholder, .field textarea::placeholder { color: #8a8a8a; }
.field textarea { resize: vertical; min-height: 120px; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px;
  background: #1c1c1e url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ff2e1f' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 16px center;
}
.field select:invalid { color: #8a8a8a; }   /* "Choose one" in the placeholder grey until a choice is made */
.field select option { background: var(--bg); color: var(--txt); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { margin: 0; color: var(--error); font-size: var(--fs-small); }
.form-error:empty { display: none; }
.success { background: rgba(255, 46, 31, .08); border: 1px solid var(--red); padding: 18px; border-radius: var(--radius-field); font-size: var(--fs-small); }

/* ── footer ───────────────────────────────────────────────────────────── */
.footer { background: var(--bg-soft); padding: 0 0 20px; }
.footer > .foot-top { position: relative; }
.footer > .foot-top::before { content: ""; position: absolute; top: 0; left: var(--page-gutter); right: var(--page-gutter); border-top: 1px solid #1f1f1f; }   /* the same hairline as the legal row, so the footer is its own group under the form (board, item 8) */
/* Two rows: the logo and the links, then the ruled legal row, which holds only the copyright (the owner's footer rule,
   2026-10-01: legal statements stack as full-width rows, never side by side). */
.foot-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.foot .copy { padding-top: 14px; border-top: 1px solid #1f1f1f; }
.foot-logo img { width: auto; height: 24px; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links a { font-size: var(--fs-small); color: var(--muted); font-weight: 400; text-decoration: none; transition: color var(--dur); }
.foot-links a:hover, .foot-links a[aria-current="page"] { color: var(--txt); }
.copy { font-size: var(--fs-label); color: var(--muted); margin: 0; }

/* ── 404 ──────────────────────────────────────────────────────────────── */
body:has(> .notfound) { min-height: 100dvh; display: flex; flex-direction: column; }
.notfound { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 140px 0 var(--sec-y); }   /* the message centred between the nav and the footer, no dead band above the footer (item 135) */
.notfound h1 { font-size: var(--fs-big); }
.notfound p { color: var(--body); font-size: var(--fs-body-lg); margin: 22px 0 30px; max-width: var(--measure); text-wrap: balance; }   /* two short lines, never "reach us." alone (board, 2026-10-23) */

/* ── smaller screens ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid { gap: 40px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats { gap: 36px 24px; }
  .steps { grid-template-columns: 1fr; }
  .step { padding: 30px 24px; }
  .marquee { margin-top: 46px; }
  .marquee-track span { font-size: 18px; padding: 0 20px; }
}
@media (max-width: 640px) {
  :root { --sec-y: 48px; }
  .hero { padding-top: 120px; }
  .hero-sub { margin-top: 26px; }
  .hero-sub p { font-size: var(--fs-body); }
  .marquee { margin-top: 36px; padding: 14px 0; }
  .marquee-track span { font-size: 15px; padding: 0 14px; }
  .acc-head { gap: 14px; padding: 22px 0; }   /* number, title and opened body on the same 16px edge as the rules */
  .acc-num { min-width: 34px; }
  .acc-body { padding: 0 0 26px; }
  .acc-body p { font-size: var(--fs-small); }
  .step { padding: 24px 18px; }
  .step-num { font-size: 28px; }
  .step h3 { font-size: 18px; }
  .stats { gap: 32px 16px; }
  .stat { padding-top: 20px; }
  .industries li { font-size: 18px; }
  .contact-lead { font-size: var(--fs-body); margin-top: 20px; }
  .row { grid-template-columns: 1fr; }
  form { gap: 14px; }
  .foot-top { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 28px; padding-bottom: 8px; }   /* the link rows' own 44px boxes carry the space: logo, links, rule and copyright on one ~30px rhythm (item 8) */
  .foot-logo { align-self: flex-start; }
  .foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .foot-links a { display: flex; align-items: center; min-height: 44px; }
  .foot .copy { padding-top: 18px; }
}

@media (max-width: 360px) {
  .stats { gap: 32px 12px; }   /* the longest stat label keeps to two lines at 320 */
  .stat dt { letter-spacing: .5px; }
}

/* motion is optional */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  *, *::before, *::after { transition: none !important; }
}