@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600&display=swap");

/* STRYKON brand system
   Palette sampled from assets/images/strykon-logo.png:
   signal red #FE4500 / wordmark ivory #EDEAE3. */
:root {
  --brand-red: #fe4500;
  --brand-red-deep: #d93800;
  --brand-red-hover: #ff642b;
  --brand-ivory: #edeae3;
  --brand-black: #090909;
  --brand-carbon: #131110;
  --brand-muted: #9d9891;
  --brand-red-rgb: 254, 69, 0;

  /* Compatibility with the existing component tokens. */
  --ink: var(--brand-black);
  --ink-soft: var(--brand-carbon);
  --paper: var(--brand-black);
  --paper-2: #100f0e;
  --white: var(--brand-ivory);
  --text: var(--brand-ivory);
  --muted: var(--brand-muted);
  --teal: var(--brand-red);
  --teal-dark: var(--brand-red-deep);
  --teal-deep: var(--brand-red-deep);
  --lime: var(--brand-red);
  --coral: var(--brand-red);
  --line: rgba(237, 234, 227, .13);
  --line-dark: rgba(237, 234, 227, .13);
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Jost", "Segoe UI", Arial, sans-serif;
}

body {
  background-color: var(--brand-black);
  color: var(--brand-ivory);
  background-image:
    radial-gradient(circle at 84% 8%, rgba(var(--brand-red-rgb), .075), transparent 24%),
    linear-gradient(rgba(237, 234, 227, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237, 234, 227, .018) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.inner-hero h1 {
  font-family: "Jost", "Segoe UI", Arial, sans-serif;
}

em,
.hero-title em,
.inner-hero h1 em,
.section-top h2 em,
.standard-title h2 em,
.process-head h2 em,
.ads-copy h2 em,
.testimonial-heading h2 em,
.faq-heading h2 em,
.pre-contact-inner h2 em,
.contact-copy h2 em {
  font-family: "Jost", "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  color: var(--brand-red);
}

::selection {
  background: var(--brand-red);
  color: var(--brand-ivory);
}

:focus-visible {
  outline-color: var(--brand-red) !important;
}

.scroll-progress span,
.progress span,
.site-header::before {
  background: var(--brand-red);
  box-shadow: 0 0 18px rgba(var(--brand-red-rgb), .42);
}

.site-header,
.site-header.scrolled,
.header {
  background: rgba(9, 9, 9, .9);
  border-color: rgba(237, 234, 227, .14);
}

.site-header.scrolled {
  background: rgba(9, 9, 9, .97);
}

.brand-logo {
  width: 132px;
  height: 34px;
}

.brand-logo img {
  object-fit: contain;
  object-position: left center;
}

/* Standalone article templates originally used a generated SK tile.
   Render the supplied wordmark here as well, including in the footer. */
body:not(.redesign-v2) .header .brand,
body:not(.redesign-v2) .footer .brand {
  width: 132px;
  min-width: 132px;
  height: 34px;
  background: url("assets/images/strykon-logo.png") left center / contain no-repeat;
}

body:not(.redesign-v2) .header .brand > *,
body:not(.redesign-v2) .footer .brand > * {
  opacity: 0;
}

.header-cta,
.mobile-main-cta,
.button-primary,
.button-lime,
.nav-cta {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: var(--brand-black) !important;
  box-shadow: 0 14px 34px rgba(var(--brand-red-rgb), .16);
}

.header-cta:hover,
.mobile-main-cta:hover,
.button-primary:hover,
.button-lime:hover,
.nav-cta:hover {
  background: var(--brand-red-hover) !important;
  border-color: var(--brand-red-hover) !important;
  color: var(--brand-black) !important;
  box-shadow: 0 19px 44px rgba(var(--brand-red-rgb), .24);
}

.button-outline,
.button-dark {
  border-color: rgba(237, 234, 227, .24);
  border-left-color: var(--brand-red);
}

.button-outline:hover,
.button-dark:hover {
  background: var(--brand-ivory);
  border-color: var(--brand-ivory);
  color: var(--brand-black);
}

.section-index,
.inner-kicker,
.category,
.back-link,
.section-no,
.eyebrow {
  color: var(--brand-red);
}

.section-index::after,
.inner-kicker::before,
.status-dot,
.hero-arrow,
.floating-contact,
.case-ring,
.dot {
  background: var(--brand-red);
}

.status-dot,
.inner-kicker::before {
  box-shadow: 0 0 0 6px rgba(var(--brand-red-rgb), .11), 0 0 22px rgba(var(--brand-red-rgb), .38);
}

.page-index .hero,
.inner-hero,
.hero {
  background-color: var(--brand-black);
  background-image:
    radial-gradient(circle at 82% 22%, rgba(var(--brand-red-rgb), .17), transparent 30%),
    radial-gradient(circle at 12% 86%, rgba(var(--brand-red-rgb), .06), transparent 27%);
}

.hero::before {
  background:
    radial-gradient(circle at 78% 25%, rgba(var(--brand-red-rgb), .19), transparent 29%),
    radial-gradient(circle at 18% 65%, rgba(var(--brand-red-rgb), .07), transparent 25%);
}

.hero-visual::after {
  background:
    linear-gradient(180deg, transparent 30%, rgba(9, 9, 9, .2) 55%, rgba(9, 9, 9, .84) 100%),
    linear-gradient(135deg, rgba(var(--brand-red-rgb), .065), rgba(var(--brand-red-rgb), .025));
}

.visual-frame::before {
  background: var(--brand-red);
  box-shadow: 0 0 20px rgba(var(--brand-red-rgb), .24);
}

.hero-capability-reel,
.inner-hero-media.illustrated-media {
  background-color: var(--brand-carbon);
  border-color: rgba(var(--brand-red-rgb), .3);
  box-shadow: 0 42px 110px rgba(0, 0, 0, .56), 0 0 0 1px rgba(var(--brand-red-rgb), .07) inset;
}

.capability-status i::after,
.process-progress {
  background: linear-gradient(90deg, var(--brand-red), var(--brand-red-hover));
  box-shadow: 0 0 18px rgba(var(--brand-red-rgb), .25);
}

.partner-strip {
  background: var(--brand-ivory);
  color: var(--brand-black);
  border-color: transparent;
}

.partner-strip p,
.partner-strip span {
  color: var(--brand-black);
}

.partner-strip i {
  color: var(--brand-red);
}

.section-dark,
.services,
.process,
.inner-dark,
.testimonial-section,
.contact,
.footer,
.execution {
  background-color: #0f0e0d;
  background-image: radial-gradient(circle at 94% 0%, rgba(var(--brand-red-rgb), .065), transparent 31%);
}

.industry-card:hover,
.method-card:hover,
.flow-step:hover,
.portfolio-card:hover,
.blog-card:hover,
.mission-card:hover,
.team-card:hover,
.price-card:hover,
.direct-channels a:hover,
.step:hover,
.toc a:hover,
.toc a.active {
  border-color: rgba(var(--brand-red-rgb), .48);
}

.services-menu a:hover,
.services-menu a:focus-visible {
  background: #1a1512;
  border-color: rgba(var(--brand-red-rgb), .32);
}

.industry-card::after,
.method-card::before,
.service-row::before {
  background: var(--brand-red);
}

.industry-icon,
.creed-icon,
.metric-panel:nth-child(2) strong,
.metric-panel:nth-child(3) strong,
.creed-grid article > b,
.price-card li::before,
.ads-card-top b {
  color: var(--brand-red);
}

.industry-icon,
.creed-icon {
  border-color: rgba(var(--brand-red-rgb), .32);
}

.industry-card:hover .industry-icon,
.deliverables b,
.popular-label,
.faq details[open] summary b,
.deliver-list li span {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--brand-black);
}

.standard-card.feature,
.price-card.popular,
.mission-card.teal,
.ads-proof,
.side-cta {
  background: linear-gradient(145deg, var(--brand-red), var(--brand-red-hover));
  border-color: var(--brand-red);
  color: var(--brand-black);
}

.standard-card.feature p,
.price-card.popular p,
.price-card.popular li,
.mission-card.teal p,
.ads-proof p,
.side-cta p {
  color: rgba(9, 9, 9, .74);
}

.ads-proof .button-dark {
  background: var(--brand-black);
  border-color: var(--brand-black);
  color: var(--brand-ivory);
}

.inner-glow,
.contact-shape {
  background: var(--brand-red);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(var(--brand-red-rgb), .1);
}

.footer a:hover,
.text-link:hover,
.prose a,
.toc a.active {
  color: var(--brand-red);
}

@media (max-width: 900px) {
  body {
    background-size: auto, 42px 42px, 42px 42px;
  }

  .brand-logo,
  body:not(.redesign-v2) .header .brand,
  body:not(.redesign-v2) .footer .brand {
    width: 118px;
    min-width: 118px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}