/* Portfolio shell: the Indigo Prism design system. A light, welcoming page (cool white and pale indigo) with deep indigo reserved for the hero and footer bands. White text only sits on indigo, violet or ink; cyan and amber are fills with dark text, thin lines and edges, never text on a light background. The old variable names (--emerald*, --mint) are kept as aliases of the new tokens so existing rules, and the demo and staff pages, keep working until they move over. */
:root {
  /* Palette */
  --ink: #1e1b4b; /* deep indigo for the hero and footer bands: 16:1 with white */
  --indigo: #4338ca; /* primary: buttons, links, headings. 7.9:1 with white, 7.5:1 on the page */
  --violet: #6d28d9; /* gradient partner and hover (7.1:1 with white) */
  --indigo-deep: #312e81; /* text hover states */
  --cyan: #22d3ee; /* accent on deep bands, fills with dark text (9.9:1), lines and edges; never text on light */
  --amber: #fbbf24; /* one highlight per page: fills with dark text (10.7:1) */
  --edge: #6366f1; /* borders, bars and dots only (4.2:1 on the page) */
  --bg: #f7f8ff; /* cool white page */
  --tint: #eef0ff; /* pale indigo section tint: muted text keeps 7:1 on it */
  --card: #ffffff;
  --text: #14123a;
  --muted: #4b4f73; /* 7.4:1 on the page */
  --border: #d9ddf5;
  --field-border: #5b5fc7; /* form fields need a stronger edge than cards (5:1) */
  /* Gradients */
  --grad-hero: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #5b21b6 100%);
  --grad-accent: linear-gradient(90deg, #4338ca, #6d28d9 55%, #22d3ee);
  --grad-wash: linear-gradient(180deg, #eef0ff 0%, #f7f8ff 100%);
  /* Shape and depth */
  --radius: 14px;
  --shadow: 0 1px 2px rgba(30, 27, 75, 0.08), 0 10px 28px rgba(67, 56, 202, 0.10);
  --shadow-lift: 0 2px 4px rgba(30, 27, 75, 0.10), 0 16px 36px rgba(67, 56, 202, 0.18);
  /* Type scale (system fonts: the security policy allows no external ones) */
  --fs-display: clamp(2.4rem, 7.5vw, 4rem);
  --fs-h1: clamp(2rem, 6vw, 3rem);
  --fs-h2: 1.6rem;
  --fs-h3: 1.3rem;
  --fs-lead: clamp(1.05rem, 2.6vw, 1.3rem);
  /* Aliases for the older names used across the project */
  --emerald-dark: var(--indigo);
  --emerald: var(--edge);
  --emerald-deep: var(--indigo-deep);
  --mint: var(--cyan);
  --accent-soft: var(--tint);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
/* overflow-x: clip (not hidden) keeps the sticky header working while the full-width section backgrounds below can never cause sideways scrolling. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  min-height: 100vh; /* a column, so the footer sits at the bottom of the window on short pages */
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; display: flex; flex-direction: column; }
a { color: var(--indigo); text-underline-offset: 3px; }
h1, .section-title, .cs-section h2 { color: var(--indigo); font-weight: 800; } /* indigo headings: 7.5:1 on the page */
a:hover { text-decoration-color: var(--violet); text-decoration-thickness: 2px; }
main a:not(.btn):hover { color: var(--indigo-deep); } /* darker indigo for the text itself; buttons keep their own colours */
a:focus-visible, button:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }
/* On the deep indigo bands an indigo ring would vanish, so the ring turns white there. */
.hero a:focus-visible, .site-footer a:focus-visible, .site-header a:focus-visible { outline-color: #fff; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--cyan);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 8px;
  z-index: 10;
}
.skip-link:focus { top: 12px; }

/* ---- Full-width bands ----
   The page content sits in a 960px column, but each section paints its own background across the whole window.
   The background is a pseudo-element behind the content (z-index -1, inside the section's own stacking context),
   so it never changes the layout or the reading order. */
#home > section, #project, #case-study, #legal { position: relative; isolation: isolate; }
#home > section::before, #home > section::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
}
#home > section::after { display: none; } /* only the hero uses a second layer */
#home > section { padding: 56px 0 64px; }
/* On a short page the last visible section stretches to the footer, so its background fills the window instead of leaving a plain gap. */
#home { display: flex; flex-direction: column; flex: 1 0 auto; }
#home > section:not([hidden]):not(:has(~ section:not([hidden]))) { flex: 1 0 auto; }

/* ---- Navigation ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ink);
  border-bottom: 3px solid var(--cyan);
}
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.site-header a { color: #fff; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: 0.01em; padding: 6px 0; overflow-wrap: anywhere; }
/* The brand mark: a plain geometric "M" built from straight edges, the same shape as the favicon. */
.brand::before { content: ""; flex: none; width: 20px; height: 20px; background: linear-gradient(135deg, var(--cyan), var(--violet)); clip-path: polygon(0 100%, 0 0, 50% 55%, 100% 0, 100% 100%, 76% 100%, 76% 46%, 50% 76%, 24% 46%, 24% 100%); }
.site-header nav { display: flex; gap: 2px; }
.site-header nav a { padding: 8px 12px; border-radius: 8px; font-size: 0.95rem; color: #e0e2ff; transition: background 0.15s ease, color 0.15s ease; }
.site-header nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 -3px 0 var(--cyan); } /* cyan underline marks the hover; cyan on the deep band is 8.9:1 */

/* ---- Hero ----
   Built only from gradients: a diagonal indigo-to-violet base, a fine cyan grid, arcs centred on the bottom-right corner,
   angled translucent planes and one amber edge line. Nothing here is an image or a figure. */
#home > #hero { padding: 88px 0 96px; color: #fff; }
#home > #hero::before {
  background:
    linear-gradient(90deg, var(--indigo), var(--violet) 50%, var(--cyan)) bottom / 100% 6px no-repeat,
    linear-gradient(rgba(34, 211, 238, 0.09) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(34, 211, 238, 0.09) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--grad-hero);
}
#home > #hero::after {
  display: block;
  background:
    linear-gradient(110deg, transparent calc(66% - 2px), rgba(251, 191, 36, 0.9) 66%, transparent calc(66% + 1px)),
    linear-gradient(225deg, rgba(167, 139, 250, 0.30) 0 15%, transparent 15%),
    linear-gradient(110deg, transparent 0 82%, rgba(34, 211, 238, 0.20) 82% 100%),
    linear-gradient(110deg, transparent 0 66%, rgba(124, 58, 237, 0.42) 66% 100%),
    repeating-radial-gradient(circle at 100% 100%, transparent 0 89px, rgba(34, 211, 238, 0.34) 89px 90px);
  /* The arcs, planes and amber line fade in only to the right of the text column, so no thin line ever crosses the headline or description. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0 56%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0 56%, #000 70%);
}
.role { margin: 0 0 8px; font-weight: 700; color: var(--indigo); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; }
.role:empty { display: none; }
#hero .role { color: #a5f3fc; } /* pale cyan: 8:1 or better on every part of the band, including the lilac corner plane */
/* Brand signature: a short cyan and amber bar under the main heading. */
.hero h1::after { content: ""; display: block; width: 96px; height: 6px; margin-top: 18px; border-radius: 3px; background: linear-gradient(90deg, var(--cyan) 0 55%, var(--amber) 55% 100%); }
.hero h1 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 16px; color: #fff; }
.tagline { font-size: var(--fs-lead); color: var(--muted); margin: 0; max-width: 36em; }
.hero .tagline { color: #fff; font-weight: 500; }
.hero .hero-description { color: #dcdefc; max-width: 34em; } /* on the deep band: 11:1 or better */
.hero .btn { background: var(--amber); border-color: var(--amber); color: var(--ink); } /* the one warm accent: dark text on amber is 10.7:1 */
.hero .btn:hover { background: #fcd34d; border-color: #fcd34d; color: var(--ink); box-shadow: 0 10px 24px rgba(251, 191, 36, 0.35); }

/* ---- Sections ---- */
.section-title { font-size: var(--fs-h2); letter-spacing: -0.015em; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }
/* A short indigo, violet and cyan segment leads the soft rule under each section heading. */
.section-title, .cs-section h2 { position: relative; }
.section-title::after, .cs-section h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 72px; height: 4px; background: var(--grad-accent); }
.about { max-width: 42em; margin: 0; color: var(--text); }
.about p { margin: 0 0 16px; }
.about p:last-child { margin-bottom: 0; }
.hero-description { font-size: 1.05rem; color: var(--muted); margin: 16px 0 0; max-width: 40em; }
.hero-description:empty { display: none; }
.hero-cta { margin: 28px 0 0; }
.hero-cta:empty { display: none; }
.section-intro { color: var(--muted); margin: -4px 0 20px; max-width: 40em; }
#services-lead { margin-top: 0; }
#services-lead:empty { display: none; }

/* Each section has its own light background, so the page reads as separate zones while staying bright. */
#services::before { background: var(--grad-wash); }
#how-it-works::before { background: repeating-linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0 1px, transparent 1px 22px), #fff; }
#faq::before { background: linear-gradient(180deg, var(--tint), #e4e8ff); }
#projects::before { background: linear-gradient(rgba(99, 102, 241, 0.06) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(99, 102, 241, 0.06) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg); }
#about::before { background: repeating-radial-gradient(circle at 0 100%, transparent 0 59px, rgba(99, 102, 241, 0.12) 59px 60px), #fff; }
#contact::before { background: linear-gradient(90deg, var(--indigo), var(--violet) 50%, var(--cyan)) top / 100% 4px no-repeat, linear-gradient(135deg, var(--tint), #dff6fb); }

/* ---- Cards ---- */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  --bar: var(--grad-accent);
  --corner: linear-gradient(225deg, rgba(34, 211, 238, 0.40) 0 34%, rgba(99, 102, 241, 0.10) 34% 62%, transparent 62%);
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Top edge bar and a corner of angled planes. They are out of the flow, so they cause no layout shift, and the clipping keeps the rounded corners clean. */
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--bar); }
.card::after { content: ""; position: absolute; top: 5px; right: 0; width: 72px; height: 72px; background: var(--corner); pointer-events: none; }
.card > * { position: relative; z-index: 1; }
.card:hover { transform: translateY(-4px); border-color: var(--edge); box-shadow: var(--shadow-lift); }
.card h3 { margin: 0; font-size: var(--fs-h3); letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--muted); }
.card.featured { grid-column: 1 / -1; border-color: var(--edge); border-width: 2px; padding: 34px 30px 28px; }
.card.featured h3 { font-size: 1.6rem; }
.card.featured > p { max-width: 44em; font-size: 1.05rem; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.badge { font-size: 0.78rem; font-weight: 600; color: var(--indigo-deep); background: var(--tint); border-radius: 6px; padding: 3px 12px; }
.badge.featured-badge { background: var(--amber); color: var(--ink); } /* dark text on amber: 10.7:1 */
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tags li { font-size: 0.78rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 10px; color: var(--muted); }

/* ---- Services ---- */
/* Wider minimum than the project grid, so the four non-featured services sit in a tidy 2x2 instead of leaving one alone. */
#service-list { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.card.service p { color: var(--text); }
.card .outcome { background: var(--tint); border-radius: 10px; padding: 10px 14px; font-size: 0.95rem; box-shadow: inset 4px 0 0 var(--violet); }
.card .examples-title { margin: 4px 0 0; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--indigo); }
.card ul.examples { margin: 0; padding-left: 20px; color: var(--muted); }
.card ul.examples li { margin-bottom: 4px; }
/* The lead service is a filled indigo-to-violet card with a warm corner; the others get their own edge and corner colours. */
.card.service.featured { background: linear-gradient(135deg, var(--indigo-deep) 0%, var(--indigo) 55%, var(--violet) 100%); border-color: transparent; color: #fff; --bar: linear-gradient(90deg, var(--cyan), var(--amber) 70%, var(--cyan)); --corner: linear-gradient(225deg, rgba(251, 191, 36, 0.9) 0 22%, rgba(34, 211, 238, 0.35) 22% 52%, rgba(167, 139, 250, 0.30) 52% 70%, transparent 70%); }
.card.service.featured::after { width: 96px; height: 96px; }
.card.service.featured h3 { color: #fff; }
.card.service.featured p { color: #eceeff; }
.card.service.featured .outcome { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 4px 0 0 var(--cyan); }
.card.service.featured .examples-title { color: #a5f3fc; } /* pale cyan: plain cyan is only 4.4:1 on the mid-indigo of the gradient */
.card.service.featured ul.examples { color: #eceeff; }
.card.service.featured:hover { border-color: transparent; box-shadow: 0 22px 48px rgba(67, 56, 202, 0.40); }
#service-list .card.service:nth-child(3) { --bar: linear-gradient(90deg, var(--violet), var(--cyan)); --corner: linear-gradient(225deg, rgba(109, 40, 217, 0.30) 0 34%, rgba(34, 211, 238, 0.18) 34% 62%, transparent 62%); }
#service-list .card.service:nth-child(4) { --bar: linear-gradient(90deg, var(--cyan), var(--indigo)); --corner: linear-gradient(225deg, rgba(99, 102, 241, 0.32) 0 34%, rgba(109, 40, 217, 0.12) 34% 62%, transparent 62%); }
#service-list .card.service:nth-child(5) { --bar: linear-gradient(90deg, var(--indigo), var(--cyan) 60%, var(--violet)); --corner: linear-gradient(225deg, rgba(34, 211, 238, 0.40) 0 20%, rgba(109, 40, 217, 0.22) 20% 48%, transparent 48%); }
#service-list .card.service:nth-child(6) { --bar: linear-gradient(90deg, var(--cyan), var(--violet)); --corner: linear-gradient(225deg, rgba(34, 211, 238, 0.40) 0 34%, rgba(99, 102, 241, 0.14) 34% 62%, transparent 62%); }
#service-list .card.service:nth-child(7) { --bar: linear-gradient(90deg, var(--violet), var(--indigo) 50%, var(--cyan)); --corner: linear-gradient(225deg, rgba(109, 40, 217, 0.34) 0 22%, rgba(34, 211, 238, 0.26) 22% 50%, transparent 50%); }
/* The featured project is light with an indigo edge, so its badges, tags and buttons keep their normal colours. */
.card.featured:not(.service) { background: linear-gradient(135deg, #fff 55%, var(--tint)); }
.section-note { max-width: 42em; color: var(--muted); margin: 20px 0 0; }
.section-note:empty, .section-more:empty { display: none; }
.section-more { margin: 20px 0 0; }

/* ---- How It Works ---- */
/* A numbered list; the numbers are CSS counters, so they follow the data order. Text stays in the list, readable by screen readers. */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 46em; }
.step { counter-increment: step; position: relative; display: flex; gap: 16px; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); }
.step::before { content: counter(step); flex: none; width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, var(--indigo), var(--violet)); color: #fff; font-weight: 800; box-shadow: 4px 4px 0 var(--cyan); display: flex; align-items: center; justify-content: center; }
/* A thin line joins each step to the next. */
.step:not(:last-child)::after { content: ""; position: absolute; left: 39px; top: 56px; bottom: -16px; width: 2px; background: linear-gradient(var(--edge), var(--cyan)); }
.step h3 { margin: 0 0 4px; font-size: 1.15rem; letter-spacing: -0.01em; }
.step p { margin: 0; color: var(--muted); }
.step-body { min-width: 0; }
#how-cta-text { color: var(--text); font-weight: 600; font-size: 1.05rem; margin-top: 28px; }

/* ---- FAQ ---- */
/* Native <details>: the browser handles open/close, keyboard and screen readers. Only the look is added here. */
.faq-list { display: grid; gap: 12px; max-width: 46em; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow 0.18s ease; }
.faq-item:hover { box-shadow: var(--shadow-lift); }
.faq-item[open] { border-color: var(--edge); background: var(--tint); box-shadow: var(--shadow), inset 4px 0 0 var(--violet); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 20px; font-weight: 600; border-radius: var(--radius); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-size: 1.4rem; line-height: 1; color: var(--indigo); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
.faq-answer { margin: 0; padding: 0 20px 18px; color: var(--muted); max-width: 42em; }
#faq-cta-text { color: var(--text); font-weight: 600; font-size: 1.05rem; margin-top: 28px; }

/* ---- Contact ---- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#contact .section-more { margin-top: 12px; }
#contact-methods { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); } /* four methods sit in a 2x2, not 3 and 1 */
/* The one calm line shown only when no contact method can be used yet. */
#contact-note { margin: 0 0 20px; max-width: 42em; font-weight: 600; color: var(--indigo-deep); background: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: inset 4px 0 0 var(--violet); }
.contact-card .contact-value { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
/* A method with no value yet: quiet and clearly unavailable, with no link and no placeholder details. */
.card.unavailable { background: transparent; box-shadow: none; border-style: dashed; }
.card.unavailable::before, .card.unavailable::after { display: none; }
.card.unavailable:hover { transform: none; border-color: var(--border); }
.unavailable-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.contact-form { margin-top: 40px; max-width: 42em; }
.contact-form h2 { font-size: 1.3rem; margin: 0 0 8px; }
.contact-form p { margin: 0 0 12px; color: var(--muted); }
.form-status { font-weight: 600; color: var(--indigo-deep); background: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: inset 4px 0 0 var(--violet); }
.form-status:empty { display: none; }
.contact-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field .optional { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%;
  min-height: 44px; /* comfortable touch target */
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--field-border);
  border-radius: 10px;
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--indigo); outline-offset: 1px; border-color: var(--indigo); }
fieldset:disabled .field input, fieldset:disabled .field textarea { background: var(--tint); color: var(--muted); cursor: not-allowed; }
fieldset:disabled .btn { opacity: 0.55; cursor: not-allowed; }
fieldset:disabled .btn:hover { background: var(--indigo); border-color: var(--indigo); box-shadow: none; transform: none; }

/* ---- Buttons ---- */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* comfortable touch target */
  padding: 8px 22px;
  border-radius: 10px;
  border: 2px solid var(--indigo);
  background: var(--indigo);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--violet); border-color: var(--violet); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(109, 40, 217, 0.28); }
.btn.secondary { background: #fff; color: var(--indigo-deep); border-color: var(--edge); } /* white with an indigo outline: the second action */
.btn.secondary:hover { background: var(--cyan); color: var(--ink); border-color: var(--cyan); box-shadow: 0 8px 20px rgba(34, 211, 238, 0.30); } /* cyan fill with dark text: 9.9:1 */
.btn.small { min-height: 44px; padding: 6px 14px; font-size: 0.9rem; }

/* ---- Project, case study and legal pages ----
   A light banner wash with a gradient top edge and fine diagonal lines sits behind the page title. */
#project { padding: 28px 0 8px; }
#project::before, #case-study::before, #legal::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: 320px;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--indigo), var(--violet) 55%, var(--cyan)) top / 100% 6px no-repeat,
    repeating-linear-gradient(115deg, transparent 0 34px, rgba(99, 102, 241, 0.08) 34px 35px),
    linear-gradient(180deg, var(--tint), var(--bg));
}
#project .crumb, #case-study .crumb, #legal .crumb { margin: 0 0 20px; }
#project h1, #case-study h1, #legal h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 12px; }
#project .lead, #case-study .lead, #legal .lead { font-size: var(--fs-lead); color: var(--muted); max-width: 40em; margin: 0 0 16px; }
#project .description { max-width: 42em; margin: 20px 0 0; }
#project .columns { display: grid; gap: 8px 40px; grid-template-columns: 1.4fr 1fr; align-items: start; margin-top: 8px; }
#project h2 { font-size: 1.15rem; margin: 28px 0 12px; }
#project ul.list { list-style: none; padding: 0; margin: 0; }
#project ul.list li { position: relative; padding: 0 0 10px 28px; }
/* Bullets are small tilted squares: a clean geometric marker. */
#project ul.list li::before, #case-study ul.list li::before, #legal ul.list li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 8px; height: 8px; border-radius: 2px; background: var(--violet); box-shadow: 3px 3px 0 var(--cyan); transform: rotate(45deg); }
#project ul.tech li { padding: 10px 14px; margin-bottom: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
#project ul.tech li::before { display: none; }
#project .tags { margin-top: 20px; }
#project .actions { margin-top: 28px; }

/* ---- Case study and legal ---- */
#case-study, #legal { padding: 28px 0 8px; max-width: 46rem; }
.toc { background: var(--card); border: 1px solid var(--border); border-top: 4px solid var(--violet); border-radius: var(--radius); padding: 16px 20px; margin: 0 0 8px; box-shadow: var(--shadow); }
.toc-title { margin: 0 0 6px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--indigo); }
.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.toc li { padding: 2px 0; break-inside: avoid; }
.cs-section { padding-top: 8px; }
.cs-section h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; margin: 36px 0 12px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }
.cs-section p { margin: 0 0 14px; }
#case-study ul.list, #legal ul.list { list-style: none; padding: 0; margin: 0; }
#case-study ul.list li, #legal ul.list li { position: relative; padding: 0 0 10px 28px; }
#case-study .actions, #legal .actions { margin-top: 36px; }

#status { color: var(--muted); }
#status:empty { display: none; }

/* ---- Footer ----
   The second deep band: the same indigo gradient as the hero, with a fine grid and arcs from the bottom-left corner. */
.site-footer {
  margin-top: 0;
  border-top: 4px solid var(--cyan);
  padding: 36px 0 40px;
  color: #d4d6fb; /* on the deep band: 10:1 or better */
  font-size: 0.9rem;
  background:
    repeating-radial-gradient(circle at 0 100%, transparent 0 69px, rgba(34, 211, 238, 0.20) 69px 70px),
    linear-gradient(rgba(34, 211, 238, 0.07) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(34, 211, 238, 0.07) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--grad-hero);
}
.site-footer p { margin: 0; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--cyan); text-decoration-color: var(--cyan); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; }
.footer-links a { padding: 11px 0; text-decoration: underline; text-underline-offset: 3px; } /* 44px-high tap target */
.footer-links[hidden], .footer-links a[hidden] { display: none; }
#legal .updated { margin: 0 0 12px; font-size: 0.9rem; color: var(--muted); }

/* ---- Responsive ---- */
/* Narrower than 900px the text runs close to the right edge, so the thin arcs and the amber line are dropped and only the soft planes and grid remain behind it. */
@media (max-width: 900px) {
  #home > #hero::before { background: linear-gradient(90deg, var(--indigo), var(--violet) 50%, var(--cyan)) bottom / 100% 6px no-repeat, linear-gradient(rgba(34, 211, 238, 0.05) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(34, 211, 238, 0.05) 1px, transparent 1px) 0 0 / 56px 56px, var(--grad-hero); }
  #home > #hero::after { -webkit-mask-image: none; mask-image: none; background: linear-gradient(225deg, rgba(167, 139, 250, 0.30) 0 18%, transparent 18%), linear-gradient(110deg, transparent 0 86%, rgba(124, 58, 237, 0.30) 86% 100%); }
}
@media (max-width: 720px) {
  .toc ol { columns: 1; }
  #project .columns { grid-template-columns: 1fr; }
}
/* Four nav links no longer fit beside the brand on a narrow screen: put the nav on its own row and let the
   header scroll away with the page (a two-row sticky header would cover too much of a phone screen). */
@media (max-width: 600px) {
  .site-header { position: static; }
  .site-header .bar { flex-wrap: wrap; justify-content: flex-start; gap: 0 12px; padding-top: 4px; padding-bottom: 4px; min-height: 0; }
  .brand { flex: 1 1 100%; display: flex; align-items: center; min-height: 44px; }
  .site-header nav { flex-wrap: wrap; margin-left: -9px; }
  /* Touch targets: every nav link is at least 44px high (and wide) once the nav is on a phone-sized row. */
  .site-header nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  #home > #hero { padding: 48px 0 56px; }
  #home > section { padding: 40px 0 48px; }
  .brand { font-size: 1rem; }
  .site-header nav { gap: 0; }
  .site-header nav a { padding: 8px 7px; font-size: 0.85rem; }
  .card, .card.featured { padding: 24px 18px 18px; }
  .card::after, .card.service.featured::after { width: 48px; height: 48px; }
  .step { padding: 14px 16px; gap: 12px; }
  .step:not(:last-child)::after { left: 33px; top: 50px; }
  .actions .btn { flex: 1 1 100%; } /* full-width buttons are easy to tap on a phone */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .btn, .faq-item, .site-header nav a { transition: none; }
  .card:hover, .btn:hover { transform: none; }
}