/* Smargasy — compiled from the approved designs.
   Pages carry the designs' own inline styles. This file holds only what an
   inline style cannot express: the reset, generated hover and focus rules,
   keyframes, and the desktop/mobile chrome switch.

   The hover rules use !important because they have to beat the inline styles
   they are overriding. Lift them into your own CSS layer and the !important
   can go. */

* { box-sizing: border-box; }
  body { margin: 0; min-width: 320px; background: #FFFFFF; color: #10104A; font-family: Onest, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: #FF6600; text-decoration: none; }
  a:hover { color: #E05800; }
  :focus-visible { outline: 2px solid #FF6600; outline-offset: 3px; border-radius: 4px; }
  ::selection { background: #FF6600; color: #10104A; }
  @keyframes sm-voice { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
  @keyframes voice { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
  @keyframes wave { 0%, 100% { transform: scaleY(.16); } 50% { transform: scaleY(1); } }
  @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.8); } }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes glow { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .9; transform: scale(1.08); } }
  @keyframes sweep { from { transform: translateY(-100%); } to { transform: translateY(400%); } }
  @keyframes sm-orb-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3%, -2%); } }
  @keyframes sm-grid-pulse { 0%, 100% { opacity: .28; } 50% { opacity: .36; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* generated from the designs' style-hover / style-focus attributes */
.s1:hover { background: #E05800 !important; transform: translateY(-2px) !important; }
.s2:hover { background: #F7F6F2 !important; color: #10104A !important; }
.s3:hover { background: #FDFCFA !important; }
.s4:hover { border-color: #10104A !important; background: #FDFCFA !important; }
.s5:hover { color: #fff !important; }
.s6:hover { background: #E05800 !important; color: #10104A !important; transform: translateY(-1px) !important; box-shadow: 0 10px 24px rgba(255,102,0,.32) !important; }
.s7:hover { color: #FF9A4D !important; }
.s8:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 30px rgba(6,6,28,.3) !important; }
.s9:hover { background: #E05800 !important; color: #10104A !important; }
.s10:hover { color: #10104A !important; border-left-color: #FF6600 !important; }
.s11:hover { background: #06061C !important; }
.s12:hover { border-bottom-color: #10104A !important; color: #10104A !important; }
.s13:hover { background: #06061C !important; transform: translateY(-2px) !important; }
.s14:hover { background: #FBFAF7 !important; padding-left: 14px !important; padding-right: 14px !important; color: #10104A !important; }
.s15:hover { color: #10104A !important; }
.s16:hover { transform: translateY(-4px) !important; }
.s17:hover { background: #10104A !important; color: #fff !important; }
.s18:hover { background: #E05800 !important; color: #10104A !important; transform: translateY(-2px) !important; box-shadow: 0 16px 34px rgba(255,102,0,.34) !important; }
.s19:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.6) !important; color: #fff !important; }
.s20:hover { background: rgba(255,255,255,.09) !important; border-color: #fff !important; color: #fff !important; }
.s21:hover { background: #06061C !important; color: #fff !important; transform: translateY(-2px) !important; }
.s22:hover { background: #FBFAF7 !important; }
.s23:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 44px rgba(6,6,28,.1) !important; border-color: #D8D5CB !important; color: #10104A !important; }
.s24:hover { color: #10104A !important; padding-left: 14px !important; background: #F7F6F2 !important; }
.s25:hover { transform: translateY(-5px) !important; box-shadow: 0 22px 48px rgba(16,16,74,.11) !important; color: #10104A !important; }
.s26:hover { background: #E05800 !important; color: #10104A !important; transform: translateY(-2px) !important; box-shadow: 0 16px 34px rgba(255,102,0,.3) !important; }
.s27:hover { background: #F7F6F2 !important; }
.s28:hover { color: #B84A00 !important; }
.s29:hover { background: #FBFAF7 !important; color: #10104A !important; }
.s30:hover { background: #F1EFE9 !important; color: #10104A !important; }
.s31:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 30px rgba(6,6,28,.3) !important; color: #fff !important; }
.s32:hover { transform: translateY(-5px) !important; box-shadow: 0 22px 48px rgba(6,6,28,.11) !important; border-color: #D8D5CB !important; color: #10104A !important; }

/* the design swapped chrome in JS at 1120px; here it is a media query */
[data-chrome="mobile"] { display: none; }
@media (max-width: 1119px) {
  [data-chrome="desktop"] { display: none; }
  [data-chrome="mobile"] { display: block; }
}

/* Fixed header offset — dark heroes overlap spacer to avoid white gap */
[data-chrome="desktop"],
[data-chrome="mobile"] {
  height: 0;
  overflow: visible;
}

:root {
  --sm-header-h: 78px;
  --sm-dur-fast: 180ms;
  --sm-dur-med: 260ms;
  --sm-dur-slow: 600ms;
  --sm-ease-out: cubic-bezier(.22, .61, .36, 1);
  --sm-stagger: 70ms;
}

@media (max-width: 1119px) {
  :root {
    --sm-header-h: calc(80px + env(safe-area-inset-top, 0px));
  }

  [data-chrome="mobile"] > header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  [data-chrome="mobile"] .sm-header-bar,
  [data-chrome="mobile"] header > div[style*="height: 78px"] {
    height: auto !important;
    min-height: 80px;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    align-items: center;
  }

  div[style="height: 78px;"] {
    height: var(--sm-header-h) !important;
  }
}

.sm-header-bar {
  box-sizing: border-box;
}

.sm-mobile-menu-toggle__line {
  display: block;
  width: 100%;
  height: 1.5px;
  background: #fff;
  border-radius: 1px;
}

html {
  scroll-padding-top: var(--sm-header-h);
}

div[style="height: 78px;"] + section#top,
div[style="height: 78px;"] + section[style*="background: #06061C"],
.sm-header-spacer + section[style*="background: #06061C"],
.sm-header-spacer + article > section.sm-hero-dark {
  margin-top: calc(-1 * var(--sm-header-h));
}

/* Narrow viewports: hero inner padding must include header height (vw-based
   padding alone does not clear the fixed bar after the negative margin). */
@media (max-width: 1119px) {
  div[style="height: 78px;"] + section[style*="background: #06061C"] > div[style*="max-width: 1280px"],
  .sm-header-spacer + section[style*="background: #06061C"] > div[style*="max-width: 1280px"],
  .sm-header-spacer + article > section.sm-hero-dark > div[style*="max-width: 1280px"] {
    padding-top: calc(var(--sm-header-h) + clamp(40px, 5vw, 64px)) !important;
  }

  div[style="height: 78px;"] + section#top > div[style*="max-width: 1280px"] {
    padding-top: calc(var(--sm-header-h) + clamp(52px, 6.5vw, 92px)) !important;
  }
}

@keyframes lm-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lm-up { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.sm-site-logo {
  min-width: 120px;
  min-height: 30px;
}

.sm-back-to-top {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 35;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: #10104A;
  color: #fff;
  box-shadow: 0 12px 32px rgba(6, 6, 28, 0.28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background 0.18s ease, color 0.18s ease;
}

.sm-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.sm-back-to-top:hover {
  background: #FF6600;
  color: #10104A;
}

.sm-back-to-top:focus-visible {
  outline: 2px solid #FF6600;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sm-back-to-top {
    transition: opacity 0.01s ease, visibility 0.01s ease, background 0.18s ease, color 0.18s ease;
    transform: none;
  }

  .sm-back-to-top.is-visible {
    transform: none;
  }
}

/* Sidebar layouts + blog list — stack on narrow viewports */
@media (max-width: 720px) {
  .sm-sidebar-layout,
  [style*="grid-template-columns: 260px"],
  [style*="grid-template-columns:260px"] {
    display: block !important;
  }

  [style*="grid-template-columns: 150px 1fr 120px"],
  [style*="grid-template-columns:150px 1fr 120px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Hero stat row (4-up under page hero) and home “What we do” grid */
.sm-hero-stats > div,
.sm-feature-grid > [data-reveal] {
  min-width: 0;
}

@media (max-width: 900px) {
  .sm-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sm-hero-stats > div {
    padding: 28px clamp(16px, 3vw, 24px) 28px 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  .sm-hero-stats > div:nth-child(2n) {
    padding: 28px 0 28px clamp(16px, 3vw, 24px) !important;
    border-right: none !important;
  }

  .sm-hero-stats > div:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  .sm-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sm-feature-grid > [data-reveal] {
    padding: 36px clamp(16px, 3vw, 24px) 36px 0 !important;
    border-right: 1px solid #E4E2DA !important;
    border-bottom: none !important;
  }

  .sm-feature-grid > [data-reveal]:nth-child(2n) {
    padding: 36px 0 36px clamp(16px, 3vw, 24px) !important;
    border-right: none !important;
  }

  .sm-feature-grid > [data-reveal]:nth-child(n + 3) {
    border-top: 1px solid #E4E2DA !important;
  }
}

@media (max-width: 640px) {
  .sm-hero-stats {
    grid-template-columns: 1fr !important;
  }

  .sm-hero-stats > div,
  .sm-hero-stats > div:nth-child(2n) {
    padding: 28px 0 !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  .sm-hero-stats > div:nth-child(n + 3) {
    border-top: none !important;
  }

  .sm-hero-stats > div:last-child {
    border-bottom: none !important;
  }

  .sm-feature-grid {
    grid-template-columns: 1fr !important;
  }

  .sm-feature-grid > [data-reveal],
  .sm-feature-grid > [data-reveal]:nth-child(2n) {
    padding: 32px 0 !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid #E4E2DA !important;
  }

  .sm-feature-grid > [data-reveal]:nth-child(n + 3) {
    border-top: none !important;
  }

  .sm-feature-grid > [data-reveal]:last-child {
    border-bottom: none !important;
  }
}

/* Numbered step rows (01/capture, STEP 01, etc.) */
.sm-step-grid > * {
  min-width: 0;
}

.sm-step-grid--dark {
  --sm-step-divider: rgba(255, 255, 255, 0.14);
}

.sm-step-grid--light {
  --sm-step-divider: #E4E2DA;
}

@media (max-width: 900px) {
  .sm-step-grid {
    grid-template-columns: 1fr !important;
  }

  .sm-step-grid > * {
    padding: 32px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--sm-step-divider, #E4E2DA) !important;
  }

  .sm-step-grid > *:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
}

/* Sticky sidebar sections (about, service pages): stack before tablet squeeze */
@media (max-width: 1023px) {
  [style*="position: sticky"][style*="top: 118px"],
  [style*="position: sticky"][style*="top:118px"] {
    position: static !important;
    top: auto !important;
  }

  div[style*="align-items: start"][style*="minmax(300px, 1fr)"],
  div[style*="align-items: start"][style*="minmax(320px, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: clamp(32px, 5vw, 56px) !important;
  }
}

/* Legacy attribute selectors — kept for pages not yet synced with sm-hero-stats class */
@media (max-width: 900px) {
  section[aria-label="What we do"] > div[style*="minmax(230px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  section[aria-label="What we do"] > div[style*="minmax(230px"]:not(.sm-feature-grid) {
    grid-template-columns: 1fr !important;
  }

  section[aria-label="What we do"] > div:not(.sm-feature-grid) > [data-reveal] {
    padding: 32px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid #E4E2DA !important;
  }

  section[aria-label="What we do"] > div:not(.sm-feature-grid) > [data-reveal]:last-child {
    border-bottom: none !important;
  }

  [style*="grid-template-columns: 96px 1fr"],
  [style*="grid-template-columns:96px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ----- subtle animations (see docs/superpowers/specs/2026-09-04-subtle-animations-design.md) ----- */

/* Header scroll depth */
[data-chrome="desktop"] header,
[data-chrome="mobile"] header {
  transition: background var(--sm-dur-fast) ease, box-shadow var(--sm-dur-fast) ease, backdrop-filter var(--sm-dur-fast) ease;
}

[data-chrome="desktop"] header.is-scrolled,
[data-chrome="mobile"] header.is-scrolled {
  background: rgba(6, 6, 28, .94) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 24px rgba(6, 6, 28, .18);
}

/* Services dropdown + mobile menu enter */
[data-dropdown],
[data-mobile-menu] {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--sm-dur-fast) ease, transform var(--sm-dur-fast) ease, visibility var(--sm-dur-fast) ease;
}

[data-dropdown] {
  flex-direction: column;
  transform: translateY(-6px);
}

[data-dropdown].is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

[data-mobile-menu] {
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition: opacity var(--sm-dur-med) ease, transform var(--sm-dur-med) ease, visibility var(--sm-dur-med) ease, max-height var(--sm-dur-med) ease;
}

[data-mobile-menu].is-open {
  max-height: 100vh;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* Service tab panel crossfade */
[data-service-panel] {
  transition: opacity 150ms ease;
}

/* Button press feedback */
.s1:active,
.s6:active,
.s8:active,
.s9:active,
.s18:active,
.s26:active,
button[type="submit"]:active {
  transform: scale(0.98) !important;
}

@media (prefers-reduced-motion: reduce) {
  .s1:active,
  .s6:active,
  .s8:active,
  .s9:active,
  .s18:active,
  .s26:active,
  button[type="submit"]:active {
    transform: none !important;
  }
}

/* Hero ambient motion */
.sm-hero-orb-drift {
  animation: sm-orb-drift 22s ease-in-out infinite !important;
}

.sm-hero-orb-drift--alt {
  animation-duration: 26s !important;
  animation-direction: reverse !important;
}

.sm-hero-grid-pulse {
  animation: sm-grid-pulse 30s ease-in-out infinite !important;
}

[data-hero-motion] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sm-hero-accent-line {
  overflow: hidden;
}

.sm-hero-accent-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  opacity: 0;
  animation: sm-accent-sweep 12s ease-in-out infinite;
}

@keyframes sm-accent-sweep {
  0%, 78%, 100% { opacity: 0; transform: translateX(-120%); }
  88% { opacity: .4; }
  95% { opacity: 0; transform: translateX(120%); }
}

/* Desktop nav underline */
nav[aria-label="Primary"] a {
  background-image: linear-gradient(#FF6600, #FF6600);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0 2px;
  transition: background-size var(--sm-dur-fast) ease, color .18s ease, border-color .18s ease;
}

nav[aria-label="Primary"] a:hover,
nav[aria-label="Primary"] a[aria-current="page"] {
  background-size: 100% 2px;
}

/* Prose inline link underline */
.sm-prose a:not([class^="s"]):not([style*="border-radius: 999px"]):not([style*="border-radius:999px"]) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--sm-dur-fast) ease, color .18s ease;
}

.sm-prose a:not([class^="s"]):not([style*="border-radius: 999px"]):not([style*="border-radius:999px"]):hover,
.sm-prose a:not([class^="s"]):not([style*="border-radius: 999px"]):not([style*="border-radius:999px"]):focus-visible {
  background-size: 100% 1px;
}

/* Form field focus glow */
input:not([type="hidden"]):not([tabindex="-1"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none !important;
  border-color: #FF6600 !important;
  box-shadow: 0 0 0 3px rgba(255, 102, 0, .12) !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-dropdown],
  [data-mobile-menu] {
    transform: none;
  }

  .sm-hero-accent-line::after {
    display: none;
  }
}

/* Lead form success + inline notes */
[data-lead-modal] form[hidden] {
  display: none !important;
}

.sm-lead-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px 4px;
}

.sm-lead-success[hidden] {
  display: none !important;
}

.sm-lead-success__icon {
  margin-bottom: 18px;
}

.sm-lead-success__title {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 26px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #10104A;
}

.sm-lead-success__body {
  margin: 12px 0 0;
  max-width: 24em;
  font-size: 15.5px;
  line-height: 1.62;
  color: #5C5A72;
}

.sm-lead-success__meta {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5C5A72;
}

.sm-lead-success__meta a {
  color: #B84A00;
  font-weight: 500;
}

.sm-lead-success__close {
  margin-top: 28px;
  min-height: 52px;
  width: 100%;
  background: #FF6600;
  color: #10104A;
  border: 0;
  border-radius: 999px;
  padding: 16px 28px;
  font-family: Onest, sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.sm-form-note--error {
  color: #B42318 !important;
}

.sm-form-note--success {
  color: #10104A !important;
  font-weight: 500;
}

.sm-project-case-study-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #b8e6c1;
  background: #edfaef;
  color: #1e7f44;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

a.s32 .sm-project-case-study-badge,
a.s15 .sm-project-case-study-badge,
a.s25 .sm-project-case-study-badge {
  color: #1e7f44;
}