/* ==========================================================================
   Start-up Audit — shared site styles
   Header / footer / navigation, icons, responsive tuning, scroll animations.
   Loaded after the compiled Tailwind bundle (home.css / about.css / case.css).
   ========================================================================== */

/* Offline-safe fallbacks for the Google-hosted Inter + Manrope */
@font-face { font-family: "SA Body"; font-weight: 400; font-display: swap; src: local("Inter"), url("../fonts/Inter-Regular.otf") format("opentype"); }
@font-face { font-family: "SA Body"; font-weight: 500; font-display: swap; src: local("Inter Medium"), url("../fonts/Inter-Medium.otf") format("opentype"); }
@font-face { font-family: "SA Body"; font-weight: 600; font-display: swap; src: local("Inter SemiBold"), url("../fonts/Inter-SemiBold.otf") format("opentype"); }
@font-face { font-family: "SA Body"; font-weight: 700; font-display: swap; src: local("Inter Bold"), url("../fonts/Inter-Bold.otf") format("opentype"); }
@font-face { font-family: "SA Heading"; font-weight: 500 600; font-display: swap; src: local("Inter Display SemiBold"), url("../fonts/InterDisplay-SemiBold.otf") format("opentype"); }
@font-face { font-family: "SA Heading"; font-weight: 700 800; font-display: swap; src: local("Inter Display Bold"), url("../fonts/InterDisplay-Bold.otf") format("opentype"); }

:root {
  --sa-teal: #008080;
  --sa-teal-dark: #006b6b;
  --sa-charcoal: #293133;
  --sa-platinum: #e5e4e2;
  --sa-header-h: 76px;
  --sa-ease: cubic-bezier(.2, .7, .1, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--sa-header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--sa-teal); outline-offset: 3px; }

/* ---- inline icons (replace Material Symbols font) ---- */
.sa-ico { display: inline-flex; width: 1em; height: 1em; font-size: 24px; line-height: 1; flex: none; vertical-align: middle; }
.sa-ico svg { width: 100%; height: 100%; display: block; }

/* ---- skip link ---- */
.sa-skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--sa-charcoal); color: #fff; padding: 12px 18px;
  font: 600 12px/1 "Inter", "SA Body", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: top .2s; }
.sa-skip:focus { top: 12px; }

/* ---- header ---- */
.sa-header { position: fixed; inset: 0 0 auto 0; z-index: 50; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sa-platinum); transition: box-shadow .35s var(--sa-ease); }
.sa-header.is-scrolled { box-shadow: 0 10px 28px -16px rgba(41, 49, 51, .35); }
.sa-header__bar { max-width: 1440px; margin: 0 auto; height: var(--sa-header-h); padding: 0 4rem; display: flex; align-items: center; gap: 1.5rem; }
.sa-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--sa-charcoal); flex: none; }
.sa-brand img { height: 32px; width: auto; display: block; }
.sa-brand span { font: 700 1.2rem/1 "Manrope", "SA Heading", "Inter", system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.sa-tag { display: none; font: 500 .6875rem/1 "Inter", "SA Body", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8a9294;
  border-left: 1px solid #d9d7d4; padding-left: .9rem; white-space: nowrap; }
.sa-nav { margin-left: auto; display: flex; align-items: center; gap: 2rem; }
.sa-nav a, .sa-mobile a { font: 500 .75rem/1 "Inter", "SA Body", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #4a5254; text-decoration: none; }
.sa-nav a { position: relative; padding: 10px 0; transition: color .25s ease; white-space: nowrap; }
.sa-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--sa-teal);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--sa-ease); }
.sa-nav a:hover, .sa-nav a[aria-current="page"] { color: var(--sa-teal); }
.sa-nav a:hover::after, .sa-nav a[aria-current="page"]::after { transform: scaleX(1); }
.sa-nav a[aria-current="page"] { font-weight: 600; }
.sa-cta { display: none; align-items: center; justify-content: center; background: var(--sa-teal); color: #fff; text-decoration: none; white-space: nowrap;
  font: 600 .75rem/1 "Inter", "SA Body", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 14px 22px; border: 1px solid var(--sa-teal);
  transition: background-color .25s ease, color .25s ease, transform .25s var(--sa-ease); }
.sa-cta:hover, .sa-cta[aria-current="page"] { background: var(--sa-charcoal); border-color: var(--sa-charcoal); }
.sa-cta:active { transform: translateY(1px); }
.sa-burger { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid var(--sa-platinum); background: #fff; cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.sa-burger__bars { width: 20px; height: 14px; position: relative; display: block; }
.sa-burger__bars i { position: absolute; left: 0; right: 0; height: 2px; background: var(--sa-charcoal); transition: transform .35s var(--sa-ease), opacity .2s; }
.sa-burger__bars i:nth-child(1) { top: 0; } .sa-burger__bars i:nth-child(2) { top: 6px; } .sa-burger__bars i:nth-child(3) { top: 12px; }
.sa-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sa-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.sa-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.sa-mobile { display: none; }

@media (min-width: 1280px) { .sa-tag { display: inline-block; } }
/* 900-1279px: tighter header so the Book an Audit button never leaves the screen */
@media (min-width: 900px) and (max-width: 1279px) { .sa-header__bar { padding: 0 2rem; gap: 1rem; } .sa-nav { gap: 1.25rem; } .sa-cta { padding: 14px 16px; margin-left: 0; } }
@media (min-width: 900px) { .sa-cta { display: inline-flex; margin-left: .5rem; } .sa-nav { margin-left: auto; } }
@media (max-width: 899px) {
  .sa-header__bar { padding: 0 1.25rem; }
  .sa-nav { display: none; }
  .sa-burger { display: inline-flex; }
  .sa-mobile { display: flex; flex-direction: column; border-top: 1px solid var(--sa-platinum); background: #fff; padding: .5rem 1.25rem 1.5rem;
    max-height: calc(100vh - var(--sa-header-h)); overflow-y: auto; }
  .sa-mobile[hidden] { display: none; }
  .sa-mobile a { padding: 18px 4px; font-size: .8125rem; border-bottom: 1px solid #efeeec; min-height: 48px; display: flex; align-items: center; }
  .sa-mobile a[aria-current="page"] { color: var(--sa-teal); font-weight: 600; }
  .sa-mobile .sa-mobile__cta { margin-top: 1rem; background: var(--sa-teal); color: #fff; justify-content: center; border: 0; font-weight: 600; }
}
@media (max-width: 380px) { .sa-brand span { font-size: 1.02rem; } }

/* ---- footer ---- */
.sa-footer { background: var(--sa-charcoal); color: #f2f0ee; border-top: 1px solid #c8c6c3; font-family: "Inter", "SA Body", system-ui, sans-serif; }
.sa-footer__inner { max-width: 1440px; margin: 0 auto; padding: 5rem 4rem 3rem; }
.sa-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(189, 201, 200, .3); }
.sa-footer__logo { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; margin-bottom: 1.25rem; }
.sa-footer__logo img { height: 32px; width: auto; filter: brightness(0) invert(1); }
.sa-footer__logo span { font: 700 1.2rem/1 "Manrope", "SA Heading", "Inter", system-ui, sans-serif; letter-spacing: -.01em; }
.sa-footer p { color: #c0c8ca; font-size: .875rem; line-height: 1.6; max-width: 28rem; margin: 0 0 1.5rem; }
.sa-footer__label { display: block; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: #bdc9c8; margin-bottom: .2rem; }
.sa-footer__h { font: 600 .75rem/1 "Inter", "SA Body", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 1.25rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(189, 201, 200, .2); }
.sa-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sa-footer a { color: #c0c8ca; text-decoration: none; font-size: .875rem; transition: color .2s ease; }
.sa-footer a:hover { color: #fff; }
.sa-footer .sa-footer__accent { color: #76d6d5; }
.sa-footer .sa-footer__accent:hover { color: #fff; text-decoration: underline; }
.sa-footer address { font-style: normal; display: grid; gap: 1rem; font-size: .875rem; }
.sa-footer address a { overflow-wrap: anywhere; }
.sa-footer__base { padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; font-size: .75rem; color: #c0c8ca; letter-spacing: .03em; }
.sa-footer__base .sa-footer__label { margin: 0; }
@media (max-width: 1023px) { .sa-footer__grid { grid-template-columns: 1fr 1fr; } .sa-footer__brand { grid-column: 1 / -1; } .sa-footer__inner { padding: 4rem 2rem 2.5rem; } }
@media (max-width: 599px) { .sa-footer__grid { grid-template-columns: 1fr; gap: 2.25rem; } .sa-footer__inner { padding: 3.5rem 1.25rem 2rem; } .sa-footer a { display: inline-block; padding: 4px 0; } }

/* ---- shared small components ---- */
.sa-chip { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid #bdc9c8; background: transparent; color: #293133; text-decoration: none;
  font: 600 .75rem/1.2 "Inter", "SA Body", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 12px 16px; min-height: 44px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.sa-chip span { color: var(--sa-teal); font-weight: 700; transition: color .25s ease; }
.sa-chip:hover { background: var(--sa-teal); border-color: var(--sa-teal); color: #fff; }
.sa-chip:hover span { color: #fff; }

.sa-portrait--empty::after { content: ""; position: absolute; inset: 0; background: url("../img/logo.png") center / 34% no-repeat; filter: brightness(0) invert(1); opacity: .9; }

/* ---- responsive tuning of the Stitch layouts (utilities live in a CSS layer, so these unlayered rules win) ---- */
@media (max-width: 1023px) { .px-margin { padding-left: 2rem; padding-right: 2rem; } }
@media (max-width: 599px) {
  .px-margin, .px-margin-compact { padding-left: 1.25rem; padding-right: 1.25rem; }
  main section[class*="py-["] { padding-top: 4.5rem; padding-bottom: 4.5rem; }
}
main img { height: auto; }
main img.object-cover, main img[class*="h-full"], main img[class*="h-["] { height: 100%; }
main img.absolute { height: 100%; }
main .overflow-hidden img[class*="aspect-"] { height: auto; }

/* ==========================================================================
   Scroll animation system
   - only active when JS has added .js to <html> (see head) and the visitor
     has not requested reduced motion
   - never animates layout properties; animations never block interaction
   ========================================================================== */

/* 1. Editorial text reveal — words rise out of a mask */
.js [data-text-reveal] .sa-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em 0 .14em; margin: -.06em 0 -.14em; }
.js [data-text-reveal] .sa-wi { display: inline-block; transform: translateY(112%); transition: transform .95s var(--sa-ease) var(--d, 0ms); will-change: transform; }
.js [data-text-reveal].is-in .sa-wi { transform: none; }

/* 2. Image reveal — masked wipe + slow settle */
.js [data-img-reveal] { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s cubic-bezier(.65, 0, .15, 1); }
.js [data-img-reveal].is-in { clip-path: inset(0 0 0 0); }
.js [data-img-reveal] > img, .js [data-img-reveal] picture img { transform: scale(1.14); transition: transform 1.8s var(--sa-ease); }
.js [data-img-reveal].is-in > img, .js [data-img-reveal].is-in picture img { transform: scale(1); }

/* 3. Staggered content */
@keyframes sa-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
.js [data-stagger]:not(.is-in) > * { opacity: 0; }
.js [data-stagger].is-in > * { animation: sa-rise .9s var(--sa-ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }

/* 4. Parallax depth (translate driven from JS; scale keeps the frame covered) */
[data-parallax] { scale: 1.14; translate: 0 var(--py, 0px); will-change: translate; }

/* 5. Section transitions + drawn rules */
.js [data-section] > :first-child { opacity: 0; transition: opacity 1.1s ease; }
.js [data-section].is-in > :first-child { opacity: 1; }
.js .sa-draw { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.65, 0, .15, 1) .2s; }
.js .sa-draw.is-in { transform: scaleX(1); }
.js [data-reveal] { opacity: 0; translate: 0 22px; transition: opacity .9s ease, translate .9s var(--sa-ease); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* 6. Hero intro — background photo eases in on every page load (class added by site.js) */
@keyframes sa-hero-in { from { opacity: 0; } to { opacity: 1; } }
.js .sa-hero-img { animation: sa-hero-in 1.6s var(--sa-ease) both; }
/* gentle page fade so navigation between pages feels continuous (opacity only: never traps fixed UI) */
@keyframes sa-page-in { from { opacity: 0; } to { opacity: 1; } }
.js main { animation: sa-page-in .45s ease both; }

/* hover feedback on bordered cards inside staggered grids (fine pointers only) */
[data-stagger] > * { transition: transform .35s var(--sa-ease), box-shadow .35s ease, border-color .35s ease, background-color .35s ease; }
@media (hover: hover) and (pointer: fine) {
  [data-stagger] > [class*="border"]:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -20px rgba(41, 49, 51, .5); border-color: var(--sa-teal); }
}

/* hover feedback on cards/CTAs that lacked it */
main a[href] { transition-property: color, background-color, border-color, opacity, transform; transition-duration: .25s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js:not(.sa-motion-on) [data-text-reveal] .sa-wi, html.js:not(.sa-motion-on) [data-img-reveal], html.js:not(.sa-motion-on) [data-img-reveal] > img, html.js:not(.sa-motion-on) .sa-draw, html.js:not(.sa-motion-on) [data-section] > :first-child, html.js:not(.sa-motion-on) [data-reveal] { transition: none !important; }
  html.js:not(.sa-motion-on) [data-text-reveal] .sa-wi { transform: none !important; }
  html.js:not(.sa-motion-on) [data-img-reveal] { clip-path: none !important; }
  html.js:not(.sa-motion-on) [data-img-reveal] > img { transform: none !important; }
  html.js:not(.sa-motion-on) [data-stagger]:not(.is-in) > * { opacity: 1 !important; }
  html.js:not(.sa-motion-on) [data-stagger].is-in > * { animation: none !important; }
  html.js:not(.sa-motion-on) .sa-draw { transform: none !important; }
  html.js:not(.sa-motion-on) [data-section] > :first-child, html.js:not(.sa-motion-on) [data-reveal] { opacity: 1 !important; translate: none !important; }
  html:not(.sa-motion-on) [data-parallax] { translate: none !important; scale: 1 !important; }
  html:not(.sa-motion-on) .sa-nav a::after { transition: none; }
  html.js:not(.sa-motion-on) .sa-hero-img, html.js:not(.sa-motion-on) main { animation: none !important; }
  html:not(.sa-motion-on) [data-stagger] > * { transition: none !important; }
  html:not(.sa-motion-on) [data-stagger] > [class*="border"]:hover { transform: none !important; }
}

/* Mobile: a 12-column grid with wide column gaps can exceed the viewport (11 gaps > width). */
@media (max-width: 1023px) { .grid-cols-12 { column-gap: 0; } }

/* Touch-friendly targets (>= 44px tall) on tablet and phone for text links */
@media (max-width: 1023px) {
  .sa-brand { min-height: 44px; }
  .sa-footer a, .sa-footer address a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .sa-footer ul { gap: 0; }
  main a.inline-flex, main a.group, main li > a, main nav[aria-label="Breadcrumb"] a, main a[href^="tel:"], main a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* opt-in notice shown only when the device asks for reduced motion */
.sa-motion-note { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: min(380px, calc(100vw - 32px)); background: #293133; color: #fff;
  padding: 14px 44px 14px 16px; font: 500 .8125rem/1.45 "Inter", "SA Body", system-ui, sans-serif; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); border-left: 3px solid var(--sa-teal); }
.sa-motion-note button.sa-motion-on { display: inline-block; margin-top: 8px; background: var(--sa-teal); color: #fff; border: 0; padding: 10px 14px; min-height: 40px; cursor: pointer;
  font: 600 .6875rem/1 "Inter", "SA Body", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.sa-motion-note button.sa-motion-on:hover { background: var(--sa-teal-dark); }
.sa-motion-note button.sa-motion-x { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; background: transparent; color: #c0c8ca; border: 0; font-size: 20px; cursor: pointer; }

/* ---- focal points: keep the subject of each photo in frame when it is cropped (esp. tall mobile frames) ---- */
main img[src*="hero-workshop"] { object-position: 60% 50%; }
main img[src*="bakery-observation"] { object-position: 62% 50%; }
main img[src*="shop-owner-review"] { object-position: 45% 50%; }
main img[src*="diagnostic-flatlay"] { object-position: 50% 55%; }
main img[src*="ch1-brand-storefront"] { object-position: 50% 55%; }
main img[src*="ch2-financial-ledger"] { object-position: 55% 50%; }
main img[src*="ch3-warehouse"] { object-position: 55% 50%; }
main img[src*="ch5-botanical-storefront"] { object-position: 50% 45%; }
main img[src*="cs-restaurant"] { object-position: 50% 50%; }
main img[src*="cs-meeting"] { object-position: 60% 50%; }
main img[src*="cs-foundry"] { object-position: 45% 55%; }
main img[src*="case-technology-office"] { object-position: 45% 55%; }
main img[src*="case-restaurant-kitchen"] { object-position: 42% 50%; }
main img[src*="ch4-service-point"] { object-position: 60% 40%; }
main img[src*="founder-portrait"] { object-position: 50% 18%; }

/* ===== Syncpedia case-study page (sp-*) ===== */
.sp-main{padding-top:0;background:#fff;overflow-x:clip}
.sp-wrap{max-width:1240px;margin:0 auto;padding:0 20px;position:relative}
@media(min-width:768px){.sp-wrap{padding:0 40px}}
.sp-sec{padding:72px 0 56px;position:relative}
@media(min-width:1024px){.sp-sec{padding:112px 0 72px}}
.sp-light{background:#fff;color:#293133}
.sp-light--alt{background:#f4f4f2}
.sp-dark{background:#293133;color:#fff}
.sp-close{background:linear-gradient(160deg,#293133 0%,#1c2527 60%,#006b6b 140%);color:#fff;padding-bottom:72px}
.sp-eyebrow{display:flex;align-items:center;gap:10px;font:700 12px/1.3 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#008080;margin:0 0 14px}
.sp-dark .sp-eyebrow,.sp-eyebrow--lt{color:#5fd0d0}
.sp-dot{width:10px;height:10px;background:currentColor;display:inline-block;flex:none}
.sp-chip{display:inline-block;line-height:1.5!important;border:1px solid #008080;color:#006b6b;font:700 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;margin:0 0 22px}
.sp-dark .sp-chip,.sp-chip--light{border-color:rgba(255,255,255,.55);color:#fff}
.sp-h1{font:800 clamp(38px,7vw,84px)/1.04 Manrope,sans-serif;letter-spacing:-.02em;color:#fff;margin:0;max-width:16ch}
.sp-h2{font:800 clamp(28px,4.6vw,52px)/1.1 Manrope,sans-serif;letter-spacing:-.015em;margin:0 0 32px;max-width:22ch}
.sp-h2--lt{color:#fff;max-width:26ch}
.sp-p,.sp-lead{font:400 18px/1.55 Inter,sans-serif;margin:0 0 24px;max-width:56ch}
.sp-lead{font-size:clamp(17px,2vw,22px);color:#e5e4e2}
.sp-lead--dk{color:#e5e4e2;margin-bottom:40px}
.sp-rule{display:block;width:72px;height:4px;background:#008080;margin:28px 0 24px}
.sp-note,.sp-callout{font:500 16px/1.55 Inter,sans-serif;max-width:60ch;margin:32px 0 0}
.sp-note{border-left:3px solid #008080;padding-left:16px;color:#d6d9da}
.sp-light .sp-note{color:#4a5456}
.sp-callout{background:#293133;color:#fff;padding:18px 22px;border-left:4px solid #008080;max-width:none}
.sp-foot{font:500 11px/1.6 Inter,sans-serif;letter-spacing:.04em;opacity:.65;margin:48px 0 0}
.sp-foot--hero{color:#fff;opacity:.8;margin:40px 0 0}
/* hero */
.sp-hero{position:relative;min-height:100svh;display:flex;align-items:center;background:#293133;color:#fff;overflow:hidden;padding:120px 0 96px}
.sp-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,28,30,.85) 0%,rgba(20,28,30,.55) 55%,rgba(20,28,30,.35) 100%),linear-gradient(0deg,rgba(20,28,30,.9) 0%,transparent 45%)}
.sp-hero__bar{position:absolute;left:0;top:0;bottom:0;width:8px;background:#008080}
.sp-hero__in{width:100%}
.sp-crumb{display:flex;gap:10px;font:600 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin:0 0 36px;color:#e5e4e2;flex-wrap:wrap;align-items:center}
.sp-crumb a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding:10px 0}
.sp-crumb a:hover{color:#5fd0d0;border-color:#5fd0d0}
.sp-scroll{position:absolute;right:20px;bottom:24px;color:#fff;font:600 12px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;padding:10px}
@media(min-width:768px){.sp-scroll{right:40px}}
/* node timelines */
.sp-nodes,.sp-stages,.sp-vt,.sp-list,.sp-big,.sp-qs,.sp-three,.sp-table ul,.sp-missing ul{list-style:none;margin:0;padding:0}
.sp-num{flex:none;width:40px;height:40px;border-radius:50%;background:#008080;color:#fff;display:grid;place-items:center;font:700 15px Manrope,sans-serif}
.sp-nodes{display:grid;gap:18px;grid-template-columns:1fr}
.sp-nodes li{display:flex;gap:16px;align-items:flex-start;background:#f4f4f2;padding:20px;border-top:3px solid #008080}
.sp-nodes h3,.sp-list h3{font:700 19px/1.25 Manrope,sans-serif;margin:0 0 4px}
.sp-nodes p,.sp-list p{margin:0;font:400 15px/1.5 Inter,sans-serif;color:#4a5456}
@media(min-width:640px){.sp-nodes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sp-nodes{grid-template-columns:repeat(5,1fr)}.sp-nodes li{flex-direction:column}}
/* split layouts */
.sp-split{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.sp-split{grid-template-columns:5fr 7fr;gap:64px}.sp-split--r{grid-template-columns:7fr 5fr}.sp-split--3{grid-template-columns:6fr 3fr 3fr;gap:36px}}
.sp-photo{margin:0}
.sp-photo__box{overflow:hidden;background:#1c2527;aspect-ratio:4/3;position:relative}
.sp-photo--tall .sp-photo__box{aspect-ratio:3/4;max-height:620px}
.sp-photo--wide .sp-photo__box{aspect-ratio:16/10}
.sp-photo--banner .sp-photo__box{aspect-ratio:16/8;max-height:460px}
.sp-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-split--3 .sp-photo--tall .sp-photo__box{aspect-ratio:3/4}
@media(max-width:899px){.sp-photo--tall .sp-photo__box{aspect-ratio:4/3}.sp-photo--tall{order:-1}}
/* big numerals */
.sp-big li{display:flex;align-items:baseline;gap:20px;font:700 clamp(22px,3vw,32px)/1.2 Manrope,sans-serif;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.sp-big span{font:700 clamp(30px,4vw,44px) Lora,Georgia,serif;color:#5fd0d0;min-width:2ch}
/* stage timeline */
.sp-friction{display:inline-block;font:700 14px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#006b6b;margin:0 0 16px}
.sp-track{position:relative;margin-bottom:12px}
.sp-stages{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;position:relative}
.sp-stages li{display:flex;gap:12px;align-items:center;background:#f4f4f2;padding:14px;border:1px solid #d9dcdd;font:600 16px Manrope,sans-serif}
.sp-stages li .sp-num{background:#293133;width:32px;height:32px;font-size:13px}
.sp-stages li.is-hot{background:#008080;color:#fff;border-color:#008080}
.sp-stages li.is-hot .sp-num{background:#fff;color:#006b6b}
.sp-wedge{display:none}
@media(min-width:1000px){
 .sp-stages{grid-template-columns:repeat(7,1fr);gap:0}
 .sp-stages li{flex-direction:column;text-align:center;padding:22px 6px;position:relative;z-index:1}
 .sp-wedge{display:block;position:absolute;left:calc(100%/7*1);width:calc(100%/7*4);top:100%;height:56px;background:rgba(0,128,128,.14);clip-path:polygon(0 0,100% 0,50% 100%)}
 .sp-drop{margin-top:64px!important}
}
.sp-drop{font:600 15px Inter,sans-serif;color:#006b6b;margin:20px 0 28px;text-align:left}
@media(min-width:1000px){.sp-drop{text-align:center}}
/* funnels */
.sp-funs{display:grid;gap:28px}
@media(min-width:640px){.sp-funs{grid-template-columns:1fr 1fr}}
.sp-fun h3{font:700 17px/1.3 Manrope,sans-serif;margin:0 0 14px;color:#fff}
.sp-bar{height:48px;width:var(--w);min-width:112px;background:#8a9496;margin:0 auto 6px;display:grid;place-items:center;font:600 12px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#10181a;transition:width .9s var(--sa-ease) calc(var(--i)*.15s)}
.is-good .sp-bar{background:#2fb3b3}
.sp-res{font:800 28px Manrope,sans-serif;letter-spacing:.04em;margin:14px 0 0;text-align:center;color:#ffb4a5}
.is-good .sp-res{color:#5fd0d0}
/* upgrade table */
.sp-th,.sp-table li{display:grid;grid-template-columns:1fr 36px 1.3fr;align-items:center;gap:12px}
.sp-th{font:700 12px Inter,sans-serif;letter-spacing:.14em;color:#006b6b;padding:0 0 12px;border-bottom:2px solid #008080}
.sp-th span:last-child{color:#008080}
.sp-table li{padding:18px 0;border-bottom:1px solid #e1e3e4}
.sp-today{display:flex;gap:12px;align-items:center;font:500 15px/1.35 Inter,sans-serif;color:#4a5456}
.sp-today i{flex:none;width:32px;height:32px;border-radius:50%;background:#e5e4e2;display:grid;place-items:center;font:700 13px Manrope,sans-serif;font-style:normal;color:#293133}
.sp-arrow{color:#008080;font-size:14px;text-align:center}
.sp-up b{display:block;font:700 18px/1.25 Manrope,sans-serif;margin-bottom:4px}
.sp-up em{font:400 15px/1.5 Inter,sans-serif;font-style:normal;color:#4a5456}
@media(max-width:720px){
 .sp-th{grid-template-columns:1fr 1fr}.sp-th span:nth-child(2){display:none}
 .sp-table li{grid-template-columns:1fr;gap:6px;background:#f4f4f2;padding:16px;margin-bottom:10px;border:0;border-left:4px solid #008080}
 .sp-arrow{text-align:left;transform:rotate(90deg);width:20px}
}
/* lists */
.sp-list li,.sp-vt li{display:flex;gap:20px;align-items:flex-start;padding:22px 0;border-bottom:1px solid #d9dcdd}
.sp-n2{font:700 clamp(32px,4vw,48px)/1 Lora,Georgia,serif;color:#008080;min-width:2ch}
.sp-vt{position:relative}
.sp-vt::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:#008080;opacity:.35}
.sp-vt li{border:0;padding:14px 0;position:relative}
.sp-vt p{margin:0;padding-top:8px;font:600 clamp(18px,2.2vw,24px)/1.3 Manrope,sans-serif}
/* unknowns */
.sp-qs li{display:flex;gap:16px;align-items:center;padding:14px 0;font:500 17px/1.4 Inter,sans-serif;border-bottom:1px solid rgba(255,255,255,.14)}
.sp-q{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid #5fd0d0;color:#5fd0d0;display:grid;place-items:center;font:800 18px Manrope,sans-serif}
.sp-missing ul{display:grid;gap:10px}
.sp-missing li{border:1.5px dashed rgba(255,255,255,.55);padding:14px 16px;font:600 14px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase}
/* close */
.sp-three li{font:700 clamp(20px,2.6vw,30px)/1.3 Manrope,sans-serif;padding:14px 0 14px 22px;border-left:4px solid #5fd0d0;margin:0 0 14px}
.sp-next{max-width:60ch;font:400 18px/1.55 Inter,sans-serif;margin:36px 0;color:#e5e4e2}
.sp-next b{color:#5fd0d0}
.sp-sign{display:flex;flex-direction:column;gap:2px;font:400 15px Inter,sans-serif;color:#cfd3d4;margin-bottom:32px;border-top:1px solid rgba(255,255,255,.2);padding-top:20px;max-width:360px}
.sp-sign b{font:800 20px Manrope,sans-serif;color:#fff}
.sp-actions{display:flex;flex-wrap:wrap;gap:14px}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;background:#008080;color:#fff;font:700 13px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;border:1px solid #008080;transition:background .3s,transform .3s var(--sa-ease)}
.sp-btn:hover{background:#006b6b;transform:translateY(-2px)}
.sp-btn--ghost{background:transparent;border-color:rgba(255,255,255,.6)}
.sp-btn--ghost:hover{background:rgba(255,255,255,.12)}
.sp-nodes li,.sp-stages li,.sp-table li,.sp-funs{transition:transform .35s var(--sa-ease),box-shadow .35s}
.sp-nodes li:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(41,49,51,.12)}
@media(max-width:767px){.sp-scroll{display:none}}

/* Syncpedia polish: native image ratios, compact phone type, side-by-side kept on phones */
.sp-photo--native .sp-photo__box{aspect-ratio:auto;max-height:none;background:transparent}
.sp-photo--native img{position:static;height:auto;display:block}
.sp-photo--native{max-width:380px;width:100%;margin-inline:auto}
.sp-photo--subject img{object-position:58% 50%}
.sp-photo img{image-rendering:auto}
@media(max-width:899px){
 .sp-photo--tall{order:0}
 .sp-photo--native{max-width:none;margin:0}
 .sp-fl{grid-template-columns:minmax(0,1fr) 34%;gap:0 16px;align-items:start}
 .sp-fl>div:first-child{display:contents}
 .sp-fl>div:first-child>*{grid-column:1/-1}
 .sp-fl>div:first-child>.sp-eyebrow,.sp-fl>div:first-child>.sp-chip,.sp-fl>div:first-child>.sp-h2{grid-column:1}
 .sp-fl>.sp-photo,.sp-fl>.sp-missing{grid-column:2;grid-row:1/span var(--rows,2)}
 .sp-fl--left{grid-template-columns:34% minmax(0,1fr)}
 .sp-fl--left>.sp-photo{grid-column:1;grid-row:1/span var(--rows,3)}
 .sp-fl--left>div:last-child{display:contents}
 .sp-fl--left>div:last-child>*{grid-column:1/-1}
 .sp-fl--left>div:last-child>.sp-eyebrow,.sp-fl--left>div:last-child>.sp-chip,.sp-fl--left>div:last-child>.sp-h2{grid-column:2}
 .sp-fl .sp-photo--tall .sp-photo__box,.sp-fl--left .sp-photo--tall .sp-photo__box{aspect-ratio:3/4;max-height:none}
 .sp-fl--left .sp-photo{align-self:start}
 /* s8: question list + missing-data boxes come after the header row */
 .sp-split--3>.sp-missing{grid-column:1/-1;grid-row:auto;order:3;margin-top:24px}
 .sp-split--3>.sp-photo{order:2}
}
@media(max-width:640px){
 .sp-sec{padding:48px 0 36px}
 .sp-h1{font-size:clamp(30px,9vw,40px)}
 .sp-h2{font-size:clamp(22px,6.4vw,28px);line-height:1.15;margin-bottom:20px}
 .sp-eyebrow{font-size:10.5px;letter-spacing:.12em;margin-bottom:10px}
 .sp-chip{font-size:9.5px;letter-spacing:.1em;padding:6px 9px;margin-bottom:14px}
 .sp-p,.sp-lead,.sp-next{font-size:15px}
 .sp-lead{font-size:16px}
 .sp-note,.sp-callout{font-size:14px;margin-top:20px}
 .sp-callout{padding:14px 16px}
 .sp-big li{font-size:18px;padding:12px 0;gap:14px}
 .sp-big span{font-size:26px}
 .sp-nodes li{padding:14px}
 .sp-nodes h3,.sp-list h3,.sp-up b{font-size:16px}
 .sp-nodes p,.sp-list p,.sp-up em,.sp-today{font-size:13.5px}
 .sp-num{width:32px;height:32px;font-size:13px}
 .sp-stages li{font-size:14px;padding:10px}
 .sp-fun h3{font-size:14px}
 .sp-funs{grid-template-columns:1fr 1fr;gap:12px}
 .sp-bar{min-width:82px;height:40px;font-size:9.5px;letter-spacing:.04em}
 .sp-res{font-size:18px}
 .sp-n2{font-size:26px}
 .sp-list li,.sp-vt li{padding:14px 0;gap:14px}
 .sp-vt p{font-size:16px;padding-top:4px}
 .sp-vt::before{left:15px}
 .sp-qs li{font-size:14.5px;padding:10px 0;gap:12px}
 .sp-q{width:32px;height:32px;font-size:15px}
 .sp-missing li{font-size:12px;padding:11px 12px}
 .sp-missing ul{grid-template-columns:1fr 1fr}
 .sp-three li{font-size:17px;padding:10px 0 10px 16px}
 .sp-foot{font-size:10px;margin-top:32px}
 .sp-btn{width:100%}
 .sp-hero{padding:104px 0 56px}
}

/* Phone-only horizontal scrollers (home: process steps, chapters) */
.sa-hscroll{scrollbar-width:thin;scrollbar-color:#008080 #d9dcdd;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.sa-hscroll::-webkit-scrollbar{height:4px}
.sa-hscroll::-webkit-scrollbar-thumb{background:#008080;border-radius:2px}
.sa-hscroll::-webkit-scrollbar-track{background:#d9dcdd}
.sa-hscroll:focus-visible{outline:2px solid #008080;outline-offset:4px}

/* ===== About · Founder profile — phone only (<640px). Desktop/tablet untouched. ===== */
@media (max-width: 639px) {
  .sa-founder > div { padding-top: 20px; padding-bottom: 32px; }
  .sa-founder > div > div:first-child { margin-bottom: 20px; padding-bottom: 12px; row-gap: 6px; }
  .sa-founder > div > div:first-child .font-mono { font-size: 10px; letter-spacing: .04em; }
  /* grid -> flowing block so text wraps around the floated portrait */
  .sa-founder .grid.grid-cols-12 { display: flow-root; }
  .sa-founder .grid.grid-cols-12 > div:has([data-portrait]) {
    float: left; width: 112px; margin: 2px 14px 6px 0;
  }
  .sa-founder [data-portrait] { aspect-ratio: 4 / 5; }
  .sa-founder .grid.grid-cols-12 > div:last-child, .sa-founder .grid.grid-cols-12 > div:has([data-portrait]) > div { padding: 4px; }
  .sa-founder .grid.grid-cols-12 > div:not(:has([data-portrait])) { display: block; }
  .sa-founder .grid.grid-cols-12 > div:not(:has([data-portrait])) > div:first-child { margin: 0 0 6px; font-size: 10px; }
  .sa-founder h1 { font-size: 24px; line-height: 1.15; margin: 0 0 8px; }
  .sa-founder .space-y-5 { margin: 0 0 16px; }
  .sa-founder .space-y-5 > * + * { margin-top: 8px; }
  .sa-founder .space-y-5 p:first-child { font-size: 14.5px; line-height: 1.4; }
  .sa-founder .space-y-5 p:not(:first-child) { font-size: 13.5px; line-height: 1.55; }
  /* tenets card: full width below, tighter */
  .sa-founder .divide-y { clear: both; margin-top: 4px; }
  .sa-founder .divide-y > div { padding: 10px 14px; gap: 4px; }
  .sa-founder .divide-y span.font-bold { min-width: 0; font-size: 11px; }
  .sa-founder .divide-y p { font-size: 13px; line-height: 1.45; }
}