


.wordmark {
  --wordmark-color: var(--brand-silver);
  --wordmark-accent: var(--brand-ember);
  --wordmark-size: 1.42rem;
  --wordmark-track: 0.34em;
  display: inline-flex; align-items: baseline; gap: 0.16em;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: var(--wordmark-size); line-height: 1;
  text-transform: uppercase; letter-spacing: var(--wordmark-track);
  color: var(--wordmark-color); white-space: nowrap;
}
.wordmark:hover { color: var(--wordmark-color); }
.wordmark-flame { display: inline-block; height: 1.62em; width: auto; flex: 0 0 auto; }
.wordmark-dot { color: var(--wordmark-accent); letter-spacing: 0; }
.wordmark--footer { --wordmark-size: 1.18rem; }
@media (min-width: 768px) { .wordmark { --wordmark-size: 1.62rem; } }


.nav {
  --nav-link: var(--brand-ash);
  --nav-link-on: var(--brand-silver);
  --nav-rule: var(--brand-ember);
}
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav-item { margin: 0; }
.nav-link {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 1.05rem;
  color: var(--nav-link); position: relative; transition: color 0.2s ease;
}
.nav-link::after {
  content: ''; position: absolute; left: 24px; right: 24px; bottom: 2px; height: 2px;
  background: var(--nav-rule); transform: scaleX(0); transform-origin: left;
  transition: transform 0.24s ease;
}
.nav-link:hover, .nav-link.is-current { color: var(--nav-link-on); }
.nav-link:hover::after, .nav-link.is-current::after { transform: scaleX(1); }
@media (min-width: 768px) {
  .nav-link { font-size: 0.82rem; letter-spacing: 0.13em; white-space: nowrap; }
  .nav-link::after { left: 16%; right: 16%; }
}

.menu-toggle span { background: var(--brand-silver); width: 26px; }
.menu-close { font-family: 'Oswald', sans-serif; }


.cart-pill {
  --pill-bg: var(--brand-slate);
  --pill-on: var(--brand-silver);
  --pill-count: var(--brand-crimson);
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--pill-bg); color: var(--pill-on);
  border: 1px solid var(--brand-line); border-radius: 8px;
  padding: 0.5rem 0.85rem; min-height: 44px;
  font-family: 'Oswald', sans-serif; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cart-pill:hover { color: var(--pill-on); border-color: var(--brand-ember); background: #2e2e2e; }
.cart-pill-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.cart-pill-count {
  background: var(--pill-count); color: #fff; border-radius: 999px;
  min-width: 22px; padding: 0 0.35rem; text-align: center;
  font-size: 0.75rem; line-height: 22px; font-weight: 600;
}
.cart-pill-label { display: none; }
@media (min-width: 1024px) { .cart-pill-label { display: inline; } }


.btn {
  --btn-bg: var(--brand-crimson);
  --btn-on: #ffffff;
  --btn-pad: 0.85rem 1.618rem;
  --btn-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--btn-bg); color: var(--btn-on);
  border: none; border-radius: var(--btn-radius); padding: var(--btn-pad);
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.92rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer; text-align: center; min-height: 48px;
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.btn:hover { color: var(--btn-on); filter: brightness(0.92); box-shadow: 0 10px 26px rgba(229, 9, 20, 0.34); }
.btn:active { transform: translateY(1px); }
.btn-primary { --btn-bg: var(--brand-crimson); }
.btn-primary:hover { --btn-bg: var(--brand-crimson-hi); }
.btn-ember { --btn-bg: var(--brand-ember); }
.btn-ghost {
  --btn-bg: transparent; --btn-on: var(--brand-silver);
  border: 1px solid var(--brand-line);
}
.btn-ghost:hover { --btn-bg: var(--brand-slate); border-color: var(--brand-ember); box-shadow: none; }
.btn-large { --btn-pad: 1.118rem 2.618rem; font-size: 1.05rem; }
.btn-block { width: 100%; }


.badge {
  --badge-bg: var(--brand-crimson);
  --badge-on: #ffffff;
  display: inline-block; background: var(--badge-bg); color: var(--badge-on);
  padding: 0.3rem 1rem; border-radius: 999px;
  font-family: 'Oswald', sans-serif; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap;
}
.badge-ember { --badge-bg: var(--brand-ember); }
.badge-quiet { --badge-bg: var(--brand-slate); --badge-on: var(--brand-ash); }


.card {
  --card-bg: var(--brand-graphite);
  --card-line: var(--brand-line);
  --card-radius: 14px;
  position: relative; margin-top: 14px;
  padding: 2.618rem 8% 1.618rem;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
  transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}
.card:hover { border-color: rgba(255, 90, 20, 0.5); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); transform: translateY(-3px); }
.card .badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); }
.card-title { font-size: 1.15rem; margin: 0 0 0.618rem; }
.card-content { margin: 0; color: var(--brand-ash); font-size: 0.94rem; }
.card--flat { box-shadow: none; background: var(--brand-carbon); }
.card--flat:hover { transform: none; }


.offer {
  --offer-line: var(--brand-line);
  border: 1px solid var(--offer-line); border-radius: 10px;
  background: linear-gradient(150deg, rgba(26, 26, 26, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
  padding: 1.618rem 7%;
}
.offer-key {
  font-family: 'Oswald', sans-serif; font-size: 1.9rem; line-height: 1;
  color: var(--brand-ember); margin: 0 0 0.5rem;
}
.offer-title {
  font-family: 'Oswald', sans-serif; font-size: 0.92rem; text-transform: uppercase;
  letter-spacing: 0.1em; margin: 0 0 0.4rem; color: var(--brand-silver);
}
.offer-note { margin: 0; font-size: 0.86rem; color: var(--brand-dim); }

@media (max-width: 599px) {
  .service-offerings .l-auto-grid--tight { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .service-offerings .offer { padding: 1rem 5%; }
  .service-offerings .offer-key { font-size: 1.5rem; margin-bottom: 0.3rem; }
  .service-offerings .offer-title { font-size: 0.82rem; letter-spacing: 0.06em; margin-bottom: 0.25rem; }
  .service-offerings .offer-note { font-size: 0.78rem; line-height: 1.45; }
}


.claim { position: relative; min-height: 15rem; }
@media (min-width: 768px) { .claim { min-height: 17rem; } }
.claim-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.claim-slide.is-active { opacity: 1; visibility: visible; position: relative; }
.claim-kicker {
  font-family: 'Oswald', sans-serif; font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.3em; color: var(--brand-ember); margin: 0 0 1rem;
}
.claim-head {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.12;
  color: var(--brand-silver); font-size: 2.5rem; margin: 0 0 1rem;
}
@media (min-width: 768px) { .claim-head { font-size: 3.8rem; } }
.claim-sub { color: var(--brand-ash); font-size: 1.08rem; max-width: 40rem; margin: 0 auto 1.618rem; }
.claim-dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 1.618rem; }
.claim-dot {
  width: 44px; height: 44px; padding: 0; border: none; background: none;
  cursor: pointer; position: relative;
}
.claim-dot::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 3px; background: var(--brand-line); transition: background 0.24s ease;
}
.claim-dot.is-active::before { background: var(--brand-ember); }


.shot {
  --shot-max: 27rem;
  position: relative; width: 78%; max-width: var(--shot-max); margin: 0 auto;
}
.shot img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 60px rgba(229, 9, 20, 0.3));
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .shot img { animation: none; } }
.shot::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -4%; height: 12%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 90, 20, 0.42) 0%, rgba(13, 13, 13, 0) 72%);
  filter: blur(6px);
}
.shot--panel { --shot-max: 32rem; width: 88%; }
.shot--mini { --shot-max: 7.5rem; width: 100%; margin: 0; }
.shot--mini img { animation: none; filter: none; border-radius: 8px; background: var(--brand-carbon); }
.shot--mini::after { display: none; }


.price {
  --price-now: var(--brand-silver);
  --price-was: var(--brand-dim);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.85rem;
}
.price-now {
  font-family: 'Oswald', sans-serif; font-size: 2.6rem; line-height: 1;
  font-weight: 600; color: var(--price-now);
}
.price-was { font-size: 1.05rem; color: var(--price-was); text-decoration: line-through; }
.price-unit { font-size: 0.82rem; color: var(--brand-dim); width: 100%; margin: 0; }


.stock { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #4ade80; }
.stock-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px rgba(74, 222, 128, 0.7); }


.stepper {
  --step-bg: var(--brand-slate);
  display: inline-flex; align-items: stretch; border: 1px solid var(--brand-line);
  border-radius: 8px; overflow: hidden; background: var(--step-bg);
}
.stepper-btn {
  width: 48px; min-height: 48px; background: none; border: none; color: var(--brand-silver);
  font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background 0.2s ease;
}
.stepper-btn:hover { background: var(--brand-crimson); }
.stepper-value {
  width: 56px; min-height: 48px; background: var(--brand-carbon); border: none;
  color: var(--brand-silver); text-align: center;
  font-family: 'Oswald', sans-serif; font-size: 1.05rem;
  border-left: 1px solid var(--brand-line); border-right: 1px solid var(--brand-line);
  -moz-appearance: textfield;
}
.stepper-value::-webkit-outer-spin-button,
.stepper-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


.crumbs { font-size: 0.8rem; color: var(--brand-dim); letter-spacing: 0.06em; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crumbs li { margin: 0; display: flex; gap: 0.5rem; align-items: center; }
.crumbs li + li::before { content: '\203A'; color: var(--brand-line); }
.crumbs a { color: var(--brand-ash); }
.crumbs a:hover { color: var(--brand-ember); }


.facets { list-style: none; margin: 0; padding: 0; }
.facets li {
  position: relative; padding-left: 1.9rem; margin-bottom: 0.85rem;
  color: var(--brand-ash); font-size: 0.98rem;
}
.facets li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 12px; height: 12px; background: var(--brand-crimson);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.facets strong { color: var(--brand-silver); font-weight: 500; }


.spec { border: 1px solid var(--brand-line); border-radius: 10px; overflow: hidden; }
.spec table { margin: 0; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: none; }
.spec td { color: var(--brand-silver); font-size: 0.94rem; }


.panels { border: 1px solid var(--brand-line); border-radius: 12px; overflow: hidden; background: var(--brand-carbon); }
.panels-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--brand-line); background: var(--brand-graphite); }
.panels-tab {
  flex: 1 1 auto; min-height: 48px; padding: 0.85rem 4%;
  background: none; border: none; border-bottom: 3px solid transparent;
  color: var(--brand-ash); cursor: pointer;
  font-family: 'Oswald', sans-serif; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.panels-tab:hover { color: var(--brand-silver); }
.panels-tab.is-active { color: var(--brand-silver); border-bottom-color: var(--brand-ember); background: var(--brand-carbon); }
.panels-body { padding: 2.618rem 6%; }
.panels-pane { display: none; }
.panels-pane.is-active { display: block; animation: paneIn 0.35s ease both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .panels-pane.is-active { animation: none; } }


.faq-item {
  --faq-num: var(--brand-ember);
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem;
  padding: 1.618rem 0; border-bottom: 1px solid var(--brand-line);
}
.faq-num { font-family: 'Oswald', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--faq-num); line-height: 1.1; }
.faq-q { font-size: 1.05rem; margin: 0 0 0.618rem; }
.faq-a { margin: 0; color: var(--brand-ash); font-size: 0.96rem; }


.form { --form-line: var(--brand-line); }
.form-group { margin-bottom: 1.118rem; }
.form-label {
  display: block; margin-bottom: 0.4rem;
  font-family: 'Oswald', sans-serif; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--brand-ash);
}
.form-input {
  width: 100%; min-height: 50px; padding: 0.75rem 4%;
  background: var(--brand-void); color: var(--brand-silver);
  border: 1px solid var(--form-line); border-radius: 8px;
  font-size: 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input::placeholder { color: #666666; }
.form-input:focus { border-color: var(--brand-ember); box-shadow: 0 0 0 3px rgba(255, 90, 20, 0.16); outline: none; }
.form-input.is-error { border-color: var(--brand-crimson-hi); }
textarea.form-input { min-height: 8rem; resize: vertical; }
.form-consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.84rem; color: var(--brand-ash); }
.form-consent input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--brand-crimson); }
.form-note { font-size: 0.82rem; color: var(--brand-dim); margin: 0.85rem 0 0; }
.form-alert {
  border-radius: 8px; padding: 1rem 5%; margin-bottom: 1.618rem;
  border: 1px solid var(--brand-crimson-hi); background: rgba(229, 9, 20, 0.12); font-size: 0.92rem;
}
.form-alert.is-ok { border-color: #4ade80; background: rgba(74, 222, 128, 0.1); }
.form-alert ul { margin: 0.5rem 0 0; padding-left: 5%; }


.rail {
  --rail-bg: var(--brand-graphite);
  background: var(--rail-bg); border: 1px solid var(--brand-line);
  border-top: 3px solid var(--brand-crimson); border-radius: 12px;
  padding: 2.118rem 7%;
}
.rail-head { font-size: 1.25rem; margin: 0 0 0.618rem; }
.rail-steps { list-style: none; margin: 0 0 1.618rem; padding: 0; counter-reset: rs; }
.rail-steps li {
  counter-increment: rs; position: relative; padding-left: 2.4rem;
  margin-bottom: 0.7rem; font-size: 0.9rem; color: var(--brand-ash);
}
.rail-steps li::before {
  content: '0' counter(rs); position: absolute; left: 0; top: 0;
  font-family: 'Oswald', sans-serif; font-weight: 700; color: var(--brand-ember); font-size: 0.9rem;
}


.line {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.118rem;
  padding: 1.618rem 0; border-bottom: 1px solid var(--brand-line); align-items: start;
}
.line-name { font-size: 1.05rem; margin: 0 0 0.35rem; }
.line-meta { font-size: 0.84rem; color: var(--brand-dim); margin: 0 0 1rem; }
.line-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.118rem; justify-content: space-between; }
.line-sum { font-family: 'Oswald', sans-serif; font-size: 1.5rem; color: var(--brand-silver); }
.line-drop { background: none; border: none; color: var(--brand-dim); cursor: pointer; font-size: 0.82rem; text-decoration: underline; padding: 0.5rem 0; }
.line-drop:hover { color: var(--brand-crimson-hi); }

.totals { margin-top: 1.618rem; }
.totals-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.618rem 0; font-size: 0.94rem; color: var(--brand-ash); }
.totals-row--grand {
  border-top: 1px solid var(--brand-line); margin-top: 0.618rem; padding-top: 1.118rem;
  font-family: 'Oswald', sans-serif; font-size: 1.5rem; color: var(--brand-silver);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.empty-cart { text-align: center; padding: 4.236rem 6%; border: 1px dashed var(--brand-line); border-radius: 12px; }


.fmap-col h4 { font-size: 0.8rem; letter-spacing: 0.16em; color: var(--brand-dim); margin: 0 0 0.85rem; }
.fmap-col ul { list-style: none; margin: 0; padding: 0; }
.fmap-col li { margin-bottom: 0.5rem; }
.fmap-col a { color: var(--brand-ash); font-size: 0.88rem; }
.fmap-col a:hover { color: var(--brand-ember); }
.legal-note { font-size: 0.8rem; color: var(--brand-dim); margin: 0; max-width: 54rem; line-height: 1.6; }


.prose { max-width: 52rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2.618rem; }
.prose h3 { font-size: 1.1rem; margin-top: 1.618rem; }
.prose p, .prose li { color: var(--brand-ash); }
.prose li { margin-bottom: 0.5rem; }
.prose strong { color: var(--brand-silver); }
