/* FireYourSEOAgency shared styles.
   Design tokens: see assets/js/tw-config.js and design-system/MASTER.md.
   Style: neubrutalist. Hard edges, thick borders, offset shadows, no soft radius. */

:root {
  --ember: #FF4D00;
  --ember-deep: #C63C00;
  --ink: #0B0B0D;
  --paper: #FAFAF7;
  --signal: #FFD400;
  --rise: #22C55E;
  --rise-deep: #15803D;
  --smoke: #3A3A3F;
  --ash: #B9B9B3;
}

html {
  scroll-behavior: smooth;
}

/* The hidden attribute must always win, even against Tailwind display utilities
   like .grid or .inline-flex, otherwise JS show/hide logic silently breaks. */
[hidden] {
  display: none !important;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[id] {
  scroll-margin-top: 90px;
}

a, button, summary, [role="button"], label[for] {
  cursor: pointer;
  touch-action: manipulation;
}

/* Focus: ember-deep passes 3:1 against paper, white and ink surrounds */
:focus-visible {
  outline: 3px solid var(--ember-deep);
  outline-offset: 3px;
}
.on-ember :focus-visible,
.on-ember:focus-visible {
  outline-color: var(--ink);
}

/* Display type */
.font-display {
  letter-spacing: 0.01em;
}

.hero-line {
  font-size: clamp(3.3rem, 16vw, 9.5rem);
  line-height: 0.94;
}

.h2-display {
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1;
}

/* REVIEWS gets a thick signal bar underneath with five stars knocked out
   of it. The bar is level, not tilted, so it reads as an underline rather
   than a strike or a stray graphic. The stars are cut in ink rather than
   printed in gold: gold on gold would be invisible, and ink on signal is
   13.7:1 so the rating reads instantly. */
.rise-underline {
  position: relative;
  white-space: nowrap;
}
.rise-underline::after {
  content: "";
  position: absolute;
  left: -1%;
  right: -1%;
  bottom: 0.15em;
  height: 0.16em;
  background-color: var(--signal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.2 2.4 119.6 18.2'%3E%3Cg fill='%230B0B0D'%3E%3Cpath d='M12 2.6l2.85 6.2 6.79.59-5.12 4.43 1.58 6.59L12 16.26l-6.1 4.15 1.58-6.59L2.36 9.39l6.79-.59z'/%3E%3Cpath d='M37 2.6l2.85 6.2 6.79.59-5.12 4.43 1.58 6.59L37 16.26l-6.1 4.15 1.58-6.59-5.12-4.43 6.79-.59z'/%3E%3Cpath d='M62 2.6l2.85 6.2 6.79.59-5.12 4.43 1.58 6.59L62 16.26l-6.1 4.15 1.58-6.59-5.12-4.43 6.79-.59z'/%3E%3Cpath d='M87 2.6l2.85 6.2 6.79.59-5.12 4.43 1.58 6.59L87 16.26l-6.1 4.15 1.58-6.59-5.12-4.43 6.79-.59z'/%3E%3Cpath d='M112 2.6l2.85 6.2 6.79.59-5.12 4.43 1.58 6.59L112 16.26l-6.1 4.15 1.58-6.59-5.12-4.43 6.79-.59z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 74%;
}

/* Buttons */
.btn-brut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: 'Anton', Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--ember);
  color: var(--ink);
  border: 4px solid var(--ink);
  padding: 0.9rem 1.6rem;
  box-shadow: 8px 8px 0 0 var(--ink);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out;
  text-decoration: none;
}
.btn-brut:hover {
  transform: translate(2px, 2px);
  box-shadow: 6px 6px 0 0 var(--ink);
  background: #FF5E14;
}
.btn-brut:active {
  transform: translate(7px, 7px);
  box-shadow: 1px 1px 0 0 var(--ink);
}
.btn-on-dark {
  border-color: var(--paper);
  box-shadow: 8px 8px 0 0 var(--signal);
}
.btn-on-dark:hover {
  box-shadow: 6px 6px 0 0 var(--signal);
}
.btn-on-dark:active {
  box-shadow: 1px 1px 0 0 var(--signal);
}
.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: none;
}
.btn-ghost:hover {
  background: rgba(250, 250, 247, 0.08);
  transform: none;
}

/* Cards react on hover: they lift against their shadow and the shadow
   grows. Uses the standalone translate property so it composes with any
   Tailwind transform utilities already on the card (like the raised
   Most Popular pack). Transform and shadow only, no layout shift. */
article[class*="shadow-brut"],
aside[class*="shadow-brut"],
div[class*="shadow-brut"],
a[class*="shadow-brut"] {
  transition: translate 0.18s ease-out, box-shadow 0.18s ease-out;
}
article[class*="shadow-brut"]:hover,
aside[class*="shadow-brut"]:hover,
div[class*="shadow-brut"]:hover,
a[class*="shadow-brut"]:hover {
  translate: -3px -3px;
}
article.shadow-brut:hover,
aside.shadow-brut:hover,
div.shadow-brut:hover,
a.shadow-brut:hover,
a.shadow-brut-sm:hover {
  box-shadow: 11px 11px 0 0 #0B0B0D;
}
article.shadow-brut-ember:hover,
aside.shadow-brut-ember:hover,
div.shadow-brut-ember:hover {
  box-shadow: 11px 11px 0 0 #FF4D00;
}

/* Nav links */
.nav-link {
  text-decoration: none;
  border-bottom: 3px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease-out, color 0.15s ease-out;
}
.nav-link:hover {
  border-bottom-color: var(--signal);
}

/* Text links in body copy */
.link-loud {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ember);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease-out, color 0.15s ease-out;
}
.link-loud:hover {
  text-decoration-color: var(--signal);
}

/* Hero media: graded into the brand so the photo sits inside the dark
   theme instead of floating on it. Slightly desaturated and darkened,
   with an ember glaze from the top corner and a fade to ink at the base. */
#hero-media img,
#hero-media video {
  filter: grayscale(0.3) brightness(0.78) contrast(1.08);
}
/* The wide counter photo already places the card right of centre, so the
   desktop crop stays natural. On small portrait screens the cover crop is
   tight, so bias it toward the card side to keep it in frame. */
@media (max-width: 1023px) {
  #hero-media img,
  #hero-media video {
    object-position: 62% 50%;
  }
}
.hero-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(155deg, rgba(255, 77, 0, 0.14) 0%, rgba(255, 77, 0, 0) 45%),
    linear-gradient(to top, rgba(11, 11, 13, 0.9) 0%, rgba(11, 11, 13, 0.3) 38%, rgba(11, 11, 13, 0.18) 62%),
    linear-gradient(to right, rgba(11, 11, 13, 0.93) 0%, rgba(11, 11, 13, 0.72) 42%, rgba(11, 11, 13, 0.2) 76%, rgba(11, 11, 13, 0.12) 100%);
}
@media (max-width: 1023px) {
  /* Phones: the text pins to the top under a heavy veil, the hero grows
     taller than the screen, and the veil opens toward the bottom so the
     card on the counter is the clear payoff shot. */
  #hero .hero-content {
    min-height: calc(120dvh - 64px);
    justify-content: flex-start;
    padding-top: 2.5rem;
  }
  /* Oversize the photo vertically, top anchored, so the counter and the
     card slide down into the open zone below the text. */
  #hero-media img,
  #hero-media video {
    height: 120%;
    object-position: 62% 50%;
  }
}
/* Short phones need a taller hero or the open zone vanishes */
@media (max-width: 1023px) and (max-height: 720px) {
  #hero .hero-content {
    min-height: calc(140dvh - 64px);
  }
  .hero-grade {
    background:
      linear-gradient(155deg, rgba(255, 77, 0, 0.12) 0%, rgba(255, 77, 0, 0) 45%),
      linear-gradient(to bottom, rgba(11, 11, 13, 0.96) 0%, rgba(11, 11, 13, 0.9) 38%, rgba(11, 11, 13, 0.55) 60%, rgba(11, 11, 13, 0.15) 82%, rgba(11, 11, 13, 0.2) 100%);
  }
}

/* Hero media: slow Ken Burns zoom, once */
.kenburns {
  animation: kenburns 16s ease-out both;
}
@keyframes kenburns {
  from { opacity: 0; transform: scale(1); }
  12%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1.12) translate(-1.5%, 1%); }
}

/* Trades marquee: a ticker band of who the cards work for. The track holds
   two identical lists and slides from -50% to 0, so the content drifts
   left to right and loops seamlessly. It never pauses on hover, because
   stopping under the cursor reads as a glitch. Reduced motion freezes it
   as a static strip via the global animation kill. */
.marquee {
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-ltr 36s linear infinite;
}
.marquee-track > ul {
  display: flex;
  align-items: center;
  flex: none;
}
.marquee-track li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-right: 1.1rem;
  white-space: nowrap;
}
@keyframes marquee-ltr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Fade-in used by the case study caption */
.cs-fade-in {
  animation: csFadeIn 0.4s ease-out both;
}
@keyframes csFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Accordion */
details.acc {
  background: #FFFFFF;
  border: 3px solid var(--ink);
}
details.acc + details.acc {
  margin-top: 0.75rem;
}
details.acc summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 1.05rem;
  min-height: 44px;
}
details.acc summary::-webkit-details-marker {
  display: none;
}
details.acc summary:hover {
  background: #F1F1EC;
}
details.acc .acc-body {
  padding: 0 1.25rem 1.25rem;
  color: var(--smoke);
  line-height: 1.65;
}
details.acc .acc-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border: 3px solid var(--ink);
  display: grid;
  place-items: center;
  background: var(--signal);
}
details.acc .acc-icon svg {
  transition: transform 0.2s ease-out;
}
details.acc[open] .acc-icon svg {
  transform: rotate(45deg);
}

/* Sticky mobile buy bar */
#mobile-buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  transform: translateY(110%);
  transition: transform 0.25s ease-out;
  padding-bottom: env(safe-area-inset-bottom);
}
#mobile-buy-bar.is-visible {
  transform: translateY(0);
}
@media (min-width: 768px) {
  #mobile-buy-bar {
    display: none;
  }
}

/* Buy button slots: reserve space so nothing jumps when buttons render */
.buy-slot {
  min-height: 64px;
  display: flex;
  align-items: stretch;
}
.buy-slot > * {
  width: 100%;
}
.buy-slot .shopify-buy-frame {
  width: 100%;
}

/* Case study: scroll-scrubbed stage. The tall wrapper gives the scroll
   distance; the inner block pins below the header while progress drives
   the animation, so scrolling back rewinds it. */
.cs-scroll {
  height: 560vh;
}
.cs-sticky {
  position: sticky;
  top: 64px;
  min-height: calc(100dvh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem 0 1rem;
}

.cs-panel {
  background: #FFFFFF;
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 0 var(--ink);
  position: relative;
  overflow: hidden;
}
.cs-disclaimer {
  background: var(--ink);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.75rem;
  text-align: center;
}
.cs-searchbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 1rem 0.75rem;
  border: 3px solid var(--ink);
  padding: 0.55rem 0.8rem;
  font-size: 0.95rem;
  color: var(--smoke);
  background: #FFFFFF;
}
.cs-pack {
  margin: 0 1rem;
  border: 3px solid var(--ink);
  background: #FFFFFF;
}
.cs-pack-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem;
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
}
.cs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.6rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
}
.cs-pack .cs-row + .cs-row {
  border-top: 2px solid #E5E5E0;
}
.cs-gap {
  margin: 0.6rem 1rem;
  text-align: center;
  color: var(--smoke);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cs-lowlist {
  margin: 0 1rem 1rem;
  border: 3px solid #C9C9C2;
  background: #F3F3EE;
}
.cs-lowlist .cs-row {
  color: var(--smoke);
}
.cs-lowlist .cs-row + .cs-row {
  border-top: 2px solid #DBDBD4;
}
.cs-cafe {
  position: relative;
  background: #FFFFFF;
  z-index: 5;
  will-change: transform;
}
#cs-tapcard {
  will-change: transform, opacity;
}
.cs-pos {
  flex: none;
  font-weight: 800;
  font-size: 0.78rem;
  border: 2px solid currentColor;
  padding: 0.1rem 0.4rem;
}
.cs-name {
  font-weight: 700;
  color: var(--ink);
}
.cs-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stars {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.stars .stars-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: calc(var(--rating, 0) / 5 * 100%);
}
.cs-caption {
  position: absolute;
  right: 12px;
  top: 12px;
  background: var(--signal);
  color: var(--ink);
  border: 3px solid var(--ink);
  font-family: 'Anton', Impact, sans-serif;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  opacity: 0;
  z-index: 6;
}
.cs-tapcard {
  position: absolute;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
}

/* Reduced motion: kill animation and show final, static states */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  .kenburns {
    animation: none;
    opacity: 1;
  }
}