/* Sparkling's established identity applied to the v4.1 structure. */
@font-face {
  font-family: Inter;
  src: url("inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
:root {
  --ink: #1a1a4e;
  --navy: #1a1a4e;
  --paper: #ffffff;
  --white: #ffffff;
  --muted: #626d7e;
  --line: #d6dee7;
  --teal: #007c8f;
  --mint: #10f2fd;
  --pale: #f1f5f9;
  --warm: #e8eef5;
  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --radius: 8px;
}
body { background: var(--paper); }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.025em; }
h1 { font-weight: 700; }
.site-header { background: rgba(255,255,255,.98); border-color: #e8ecf1; }
.header-inner { height: 76px; }
.brand-lockup { display: block; width: 166px; flex: none; }
.brand-logo { display: block; width: 100%; height: auto; }
.brand-logo-inverse { display: none; }
.footer .brand-lockup { width: 184px; }
.footer .brand-logo-default { display: none; }
.footer .brand-logo-inverse { display: block; }
.button {
  background: var(--teal);
  border-color: var(--teal);
  border-radius: var(--radius);
  font-weight: 600;
}
.button:hover { background: #006666; border-color: #006666; }
.button.secondary { color: var(--teal); border-color: var(--teal); background: white; }
.button.secondary:hover { background: #edf9fa; }
.button.light { color: var(--navy); background: var(--mint); border-color: var(--mint); }
.button.light:hover { background: #87f8ff; border-color: #87f8ff; }
.text-link { color: var(--teal); }
.text-link:hover { color: #006666; }
.dark .text-link, .footer .text-link { color: var(--mint); }
.home-hero {
  background:
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.97) 38%,rgba(255,255,255,.64) 100%),
    url("hero-decision-architecture.webp") right center / auto 100% no-repeat;
}
.home-hero h1 { font-weight: 700; letter-spacing: -.035em; }
.home-hero h1 em { color: var(--teal); }
.system-figure {
  background: rgba(255,255,255,.96);
  border-color: #cddbe7;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 38px rgba(26,26,78,.06);
}
.figure-top, .figure-caption, .figure-controls, .figure-controls button+button { border-color: #cddbe7; }
.figure-grid { background-color: #f5f9fc; background-image: radial-gradient(#bfcedd .7px,transparent .7px); }
.system-map .tiny { fill: #626d7e; }
.system-map .node { fill: white; stroke: #aabed0; }
.system-map .main-node { fill: var(--navy); stroke: var(--navy); }
.system-map .connection { stroke: #819db5; }
.system-map .point { fill: var(--teal); }
.figure-controls button[aria-pressed=true] { background: var(--navy); color: var(--mint); }
.area-card, .entry, .experience-card, .artifact, .depth-item, .proof-link, .output-specimen, .contact-form {
  border-radius: var(--radius);
}
.area-card { border-top-color: var(--teal); box-shadow: 0 2px 7px rgba(26,26,78,.035); }
.area-card:hover { background: #f0fafb; border-color: #a5d5de; }
.area-descriptor { color: var(--teal); }
.decision-box, .context-note, .area-example, .check-scope, .takeaway, .deliverables li {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.check-scope:hover { background: #e8f6f8; }
.case-feature { border-radius: 12px; overflow: hidden; }
.case-art { background: #e7f2f8; border-color: #cddbe7; }
.finding-row { border-color: #bfd4e1; }
.pill { border-color: #c8d5e2; border-radius: 5px; }
.pill.career { background: #edf1f8; border-color: #d3daea; color: #35355e; }
.pill.research { background: #eaf7f9; border-color: #c4e3e8; color: #126778; }
.field input, .field textarea, .field select { border-color: #c5d0dc; border-radius: 6px; }
.filter, .artifact-tabs button, .menu-toggle { border-radius: 6px; }
.family, .family:last-child { border-color: #c9d5e1; }
.dark { background: var(--navy); color: white; }
.dark .lead, .dark .muted, .fabric-step p, .closing p { color: #cbd5e5; }
.fabric-note, .founder-monogram .position { color: #b8cbe1; }
.fabric-steps, .fabric-step { border-color: #41416d; }
.footer { background: var(--navy); color: #e0e8f5; }
.footer p, .footer .muted, .footer h3, .footer-bottom { color: #b8c7df; }
.footer-bottom { border-color: #41416d; }
@media(max-width:900px) {
  .brand-lockup { width: 150px; }
}
@media(max-width:720px) {
  .brand-lockup { width: 158px; }
  .home-hero { background-position: right top; background-size: auto 55%; }
  .nav { background: white; box-shadow: 0 15px 25px rgba(26,26,78,.06); }
  .area-grid.compact { grid-template-columns: 1fr; gap: 16px; }
  .area-grid.compact .area-card { padding: 26px; }
  .area-grid.compact .area-descriptor,
  .area-grid.compact .area-question,
  .area-grid.compact .area-outputs p { min-height: 0; }
  .area-grid.compact .area-question { font-size: 17px; }
  .area-grid.compact .area-outputs p { font-size: 12px; }
}

/* V4.3: component details from the established live-site design language. */
:root { --coral: #ff5a5f; }
.arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  vertical-align: middle;
  color: var(--coral);
}
.text-link {
  gap: 8px;
  border-bottom: 0;
  padding-bottom: 0;
}
.text-link .arrow,
.situation>.arrow,
.situation:hover>.arrow { color: var(--coral); }
.dark .text-link .arrow,
.footer .text-link .arrow { color: var(--mint); }
.button { gap: 8px; }
.button .arrow { color: currentColor; }
.area-card-heading {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.area-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  color: var(--teal);
  background: #e6f4f7;
  border: 1px solid #cce8ed;
  border-radius: 50%;
}
.service-icon { width: 22px; height: 22px; }
.area-card>.text-link,
.area-grid.compact .area-card>.text-link,
.package-link>.text-link,
.proof-link>.text-link,
.entry>.text-link {
  width: 100%;
  justify-content: space-between;
  align-self: stretch;
  margin-top: auto;
  padding-top: 24px;
}
.proof-link, .entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.experience-card>.text-link,
.check-scope>.text-link {
  width: 100%;
  align-self: stretch;
  justify-content: space-between;
}
.area-card:hover .arrow,
.package-link:hover .arrow,
.proof-link:hover .arrow,
.experience-card:hover .arrow,
.check-scope:hover .arrow { transform: translateX(4px); }
.home .service-area-overview {
  background: var(--pale);
  border-bottom: 1px solid #dde5ed;
}
.home .home-partners {
  background: var(--pale);
  border-color: #dde5ed;
}
.footer { border-top: 1px solid rgba(16,242,253,.24); }
@media(max-width:720px) {
  .area-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .service-icon { width: 20px; height: 20px; }
}

/* Page names are the H1; the headline sits under it as a subtitle. */
.hero-subtitle {
  max-width: 790px;
  margin: 20px 0 0;
  color: var(--navy);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.015em;
}
.hero-subtitle+.lead { margin-top: 20px; }
.package-link .card-tagline {
  margin-top: 12px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

/* About: founder photo. */
.founder-photo {
  margin: 0;
  align-self: start;
}
.founder-photo img {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--pale);
}
.founder-photo figcaption {
  max-width: 280px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* Visual pass fixes (screenshots of the offline copy at 375, 910, 1000 and 1440 px). */
/* Eyebrows inside prose sections and the founder panel had picked up the paragraph colour and size. */
.prose-section>p.eyebrow,
.founder-copy p.eyebrow,
.case-method>p.eyebrow {
  max-width: none;
  color: var(--teal);
  font-size: 11px;
}
@media(max-width:720px) {
  .prose-section>p.eyebrow,
  .founder-copy p.eyebrow,
  .case-method>p.eyebrow { font-size: 10px; }
}
/* Case-study lists read like the paragraphs around them: same colour, size and line length. */
.case-story .check-list {
  max-width: 820px;
  color: var(--muted);
}
.case-story .check-list li {
  color: var(--muted);
  font-size: 16px;
}
/* A link at the end of a note must not stretch its line. */
.context-note .text-link {
  display: inline;
  gap: 0;
}
.context-note .text-link .arrow {
  margin: 0 0 0 8px;
  vertical-align: -3px;
}
/* Short subtitles wrap evenly instead of leaving one word on the last line. */
.hero-subtitle { text-wrap: balance; }
/* Footer: the email address stays whole on phones and the note matches the links. */
.footer-links .small { font-size: 13px; }
@media(max-width:480px) {
  .footer-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    column-gap: 20px;
  }
  .footer-links a[href^="mailto:"] { font-size: 12px; }
}
@media(min-width:361px) and (max-width:480px) {
  .footer-links a[href^="mailto:"] { overflow-wrap: normal; }
}
/* Narrowest phones: the longest page title word must fit the screen. */
@media(max-width:340px) {
  .page-hero h1,
  .page-hero.compact h1 { font-size: 34px; }
}

/* V4.4: the method behind the paid case, using the established brand. */
.case-method {
  padding: 30px;
  margin-top: 38px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius);
  background: var(--pale);
  scroll-margin-top: 110px;
}
.case-method .eyebrow { margin-bottom: 18px; }
.case-story .case-method h2 { margin-top: 0; font-size: 28px; }
.case-evidence { margin: 0; }
.case-evidence>div { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.case-evidence dt { font-size: 15px; font-weight: 600; }
.case-evidence dd { margin: 9px 0 0; font-size: 14px; color: var(--muted); }
.area-artifacts { color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 14px; }
.prose-section>.engagement-result { color: var(--ink); font-size: 19px; line-height: 1.65; margin-bottom: 24px; }
.engagement-summary { margin: 0; border-top: 3px solid var(--teal); }
.engagement-summary>div { padding: 21px 0; border-bottom: 1px solid var(--line); }
.engagement-summary dt { font-size: 16px; font-weight: 600; }
.engagement-summary dd { margin: 9px 0 0; font-size: 14px; color: var(--muted); max-width: 780px; }
.delivery-example>.example-status { padding: 14px 18px; border-left: 3px solid var(--teal); background: var(--pale); font-size: 12px; line-height: 1.7; margin-bottom: 22px; }
.delivery-example>.example-intro { margin-bottom: 24px; }
.example-decision { padding: 20px; background: var(--pale); border-radius: var(--radius); margin: 24px 0; }
.example-decision>strong { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--teal); }
.example-decision>p { margin-top: 10px; color: var(--ink); font-size: 17px; }
.example-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding: 0; margin: 24px 0; gap: 10px; counter-reset: flow; }
.example-flow>li { counter-increment: flow; padding: 18px 15px; margin: 0; border: 1px solid var(--line); border-top: 3px solid var(--teal); border-radius: var(--radius); min-width: 0; }
.example-flow>li:before { content: '0' counter(flow); display: block; font: 11px var(--mono); color: var(--teal); margin-bottom: 12px; }
.example-flow strong { display: block; font-size: 14px; line-height: 1.4; }
.example-flow span { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 9px; }
.handoff-example { scroll-margin-top: 110px; }
.handoff-example>summary { font-size: 19px; font-weight: 600; padding: 22px 35px 22px 0; }
.example-rows { margin: 0 0 12px; }
.example-rows>div { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 22px; padding: 18px 0; border-top: 1px solid var(--line); }
.example-rows dt { font-size: 13px; font-weight: 600; line-height: 1.6; }
.example-rows dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.example-links { margin-block: 24px 34px; }
.partner-links { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.partner-option .partner-links .text-link { margin-top: 0; }
.prose-section>.authority-note { padding-left: 18px; border-left: 3px solid var(--teal); font-size: 14px; margin-bottom: 24px; }
.case-finding { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.case-finding h3 { font-size: 24px; line-height: 1.3; margin-bottom: 16px; }
.case-finding .actions { margin-top: 24px; }
@media(max-width:1050px) { .example-flow { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) {
  .case-method { padding: 22px; scroll-margin-top: 95px; }
  .case-story .case-method h2 { font-size: 25px; }
  .prose-section>.engagement-result { font-size: 17px; }
  .example-flow { grid-template-columns: 1fr; }
  .example-rows>div { grid-template-columns: 1fr; gap: 8px; }
  .handoff-example>summary { font-size: 18px; }
}

/* LinkedIn and GitHub links: brand icon before the text (footer, Contact). */
.social-icon {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 20px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.text-link .social-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}