/* Wolf Enterprises: styles. Tokens live in tokens.css. */

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: var(--steel); text-decoration: none; }
a:hover { color: var(--deep); }

:focus-visible {
  outline: 2px solid var(--steel-light);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
}
.skip:focus { top: 16px; }

/* ---------- Placeholders: clearly marked, never shipped ---------- */

.ph {
  display: inline-block;
  padding: 0 0.4em;
  border: 1px dashed currentColor;
  border-radius: 2px;
  font-style: normal;
  opacity: 0.85;
}
.ph::before { content: "[ "; }
.ph::after  { content: " ]"; }

/* ---------- Type ---------- */

.eyebrow {
  display: inline-block;
  color: var(--steel);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.eyebrow-dark { color: var(--steel-light); }

.h2 {
  color: var(--ink);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

.lead {
  color: var(--ink);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

.split-body p + p { margin-top: 1.1em; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--steel);
  font-size: 15px;
  font-weight: 600;
}
.text-link .arrow { transition: transform var(--dur-fast) var(--ease); }
.text-link:hover .arrow { transform: translateX(4px); }

.num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid var(--steel);
  border-radius: 2px;
  background: var(--steel);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.btn:hover  { background: var(--deep); border-color: var(--deep); color: #fff; transform: translateY(-2px); }
.btn:active { background: var(--night); border-color: var(--night); transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--pale); border-color: var(--pale); color: var(--steel-light);
  cursor: not-allowed; transform: none;
}

.btn-secondary { background: transparent; color: var(--steel); }
.btn-secondary:hover { background: transparent; border-color: var(--deep); color: var(--deep); }

/* Secondary on dark grounds: Steel on Night is too faint, so the outline steps up to Steel-light. */
.btn-ghost-dark { background: transparent; border-color: var(--steel-light); color: #fff; }
.btn-ghost-dark:hover { background: var(--deep); border-color: var(--deep); }

.btn-lg { min-height: 58px; padding: 0 34px; font-size: 16px; }

/* ---------- Tags ---------- */

.tag {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 2px;
  background: rgba(123, 140, 158, 0.18);
  color: var(--steel-light);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.tag-light { background: var(--pale); color: var(--steel); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  color: #fff;
}
/* Solid Night fades in on a pseudo layer so only opacity animates */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--night);
  border-bottom: 1px solid rgba(123, 140, 158, 0.16);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.site-header.is-solid::before { opacity: 1; }

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 24px;
}

.brand { position: relative; z-index: 2; }
.brand img { width: auto; height: 40px; }
.site-header .brand img { height: 46px; }

.site-nav { display: flex; align-items: center; gap: 28px; }

.nav-main, .nav-stores { display: flex; align-items: center; }
.nav-main { gap: 30px; }
.nav-stores {
  gap: 22px;
  padding-left: 28px;
  border-left: 1px solid rgba(123, 140, 158, 0.3);
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 500;
}
.site-nav a:hover { color: #fff; }
.nav-main a[aria-current="page"] { color: #fff; }
.nav-main a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.nav-main a:hover::after,
.nav-main a[aria-current="page"]::after { transform: scaleX(1); }

.nav-store { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
span.nav-store { font-size: 14px; font-weight: 500; }
.nav-store .ph { white-space: nowrap; }
.nav-store.is-soon { color: var(--steel-light); cursor: default; }
.nav-store.is-soon:hover { color: var(--steel-light); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: #fff;
  font: 600 13px/1 var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle-bars { display: grid; gap: 6px; width: 22px; }
.nav-toggle-bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; position: relative; z-index: 2; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
    background: var(--night);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms var(--ease), visibility 0s linear 300ms;
  }
  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms var(--ease), visibility 0s;
  }

  .nav-main, .nav-stores { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-stores { margin-top: 32px; padding: 0; border: 0; }

  .nav-main li, .nav-stores li { border-bottom: 1px solid rgba(123, 140, 158, 0.18); }
  .nav-main a {
    display: flex;
    padding: 18px 0;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: var(--track-tight);
  }
  .nav-main a::after { display: none; }
  .nav-main a[aria-current="page"] { color: var(--steel-light); }
  .nav-stores a { display: flex; justify-content: space-between; padding: 16px 0; font-size: 16px; }
}

/* ---------- Facet shapes: geometry from the mark, never the wolf ---------- */

.facets {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.facet-layer, .facets svg {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  will-change: transform;
}
.facets-hero polygon  { fill: var(--deep); }
.facets-deep polygon  { fill: var(--night); opacity: 0.5; }
.facets-paper polygon { fill: var(--pale); }
.facets-paper { opacity: 0.55; }
.facets-right { left: auto; width: min(46vw, 620px); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 48px);
  background: var(--night);
  color: #fff;
  overflow: hidden;
}

.hero-inner { position: relative; }

.hero-eyebrow { margin-bottom: clamp(24px, 3vw, 40px); }

.hero-title {
  color: #fff;
  font-size: clamp(44px, 7.4vw, 118px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.028em;
}
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.hero-title .line > span { display: inline-block; }

.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px 64px;
  margin-top: clamp(36px, 5vw, 64px);
}
.hero-lede {
  max-width: 520px;
  color: var(--steel-light);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
}

.hero-index-wrap { position: relative; margin-top: clamp(48px, 7vw, 96px); }
.hero-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(123, 140, 158, 0.25);
}
.hero-index li + li { border-left: 1px solid rgba(123, 140, 158, 0.25); }
.hero-index a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 0 26px 20px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.hero-index li:first-child a { padding-left: 0; }
.hero-index .num {
  color: var(--steel-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.hero-index a:hover { color: var(--pale); }

/* Hero load: lines rise with a short stagger, the rest fades after */
@keyframes rise   { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.js .hero-title .line > span {
  animation: rise 560ms var(--ease) both;
  animation-delay: calc(var(--i) * 60ms);
}
.js .hero-eyebrow,
.js .hero-foot,
.js .hero-index-wrap {
  animation: fadeUp 480ms var(--ease) both;
  animation-delay: 180ms;
}

/* Interior page hero: same Night band, shorter, no full screen */
.hero-page {
  min-height: 0;
  padding: calc(var(--header-h) + clamp(72px, 9vw, 132px)) 0 clamp(64px, 8vw, 112px);
}
.hero-title-page { font-size: clamp(38px, 5.8vw, 92px); }
.hero-404-actions { margin-top: clamp(28px, 3.5vw, 44px); }

.hero-lede-page {
  max-width: 660px;
  margin-top: clamp(24px, 3vw, 36px);
}

/* ---------- Sections ---------- */

.section {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
}
.section .wrap { position: relative; }
.section-paper { background: var(--paper); }
.section-mist  { background: var(--mist); }

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-top: 18px;
  margin-bottom: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line);
}
.sec-num {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.sec-head-dark { border-top-color: rgba(123, 140, 158, 0.25); }
.sec-head-dark .sec-num { color: #fff; }

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px 32px;
}
.split > .h2 { grid-column: 1 / span 5; }
.split > :last-child { grid-column: 7 / -1; }
.split-end { align-items: end; }
.split-end > :last-child { justify-self: end; text-align: right; }
.split-end .text-link { margin-top: 0; }
.split-note { color: var(--muted); font-size: 15px; }

/* ---------- 02: Develop, Operate, Grow ---------- */
/* Desktop: labels sticky on the left, descriptions scroll normally on the right.
   Mobile: steps stacked, a vertical line draws down between them. Nothing pins the page. */

.steps {
  position: relative;
  padding: var(--section-y) 0;
  background: var(--deep);
  color: #fff;
}
.steps-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.steps-side {
  grid-column: 1 / span 6;
  position: sticky;
  top: max(calc(var(--header-h) + 40px), calc(50vh - 250px));
}
.steps-panels { grid-column: 8 / -1; }

.steps-nav { display: flex; gap: clamp(20px, 2.4vw, 36px); }
.steps-track {
  position: relative;
  flex: 0 0 1px;
  background: rgba(123, 140, 158, 0.28);
}
.steps-fill {
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleY(0.3333);
  transform-origin: top;
  transition: transform 600ms var(--ease);
}
.steps-words li {
  color: #fff;
  font-size: clamp(56px, 7.8vw, 124px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  opacity: 0.16;
  transition: opacity 500ms var(--ease);
}
.steps-words li.is-active { opacity: 1; }

/* Each description gets most of a screen, so one is always across the middle of the viewport */
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56vh;
  opacity: 0.28;
  transition: opacity 500ms var(--ease);
}
.step.is-active { opacity: 1; }

.step-kicker {
  display: flex;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(123, 140, 158, 0.28);
  color: var(--steel-light);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.step-kicker .num { color: #fff; }
/* The big word in the left column names the step, so the heading is hidden there.
   It comes back on mobile and in the static fallback, where that column is not shown. */
.step-title {
  display: none;
  color: #fff;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--track-tight);
}
.step-text {
  margin-top: 0;
  color: var(--pale);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
}
/* The three services under each step: icon and title only */
.step-svcs {
  margin-top: 28px;
  border-top: 1px solid rgba(123, 140, 158, 0.2);
}
.step-svcs li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(123, 140, 158, 0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
/* Steel disappears on Deep, so on this dark band the icons step up to Steel-light */
.step-svc-icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--steel-light);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Quiet link to the full services page */
.text-link-dark { color: var(--steel-light); }
.text-link-dark:hover { color: #fff; }
.steps-more { margin-top: 8px; }

.step-line { display: none; }

/* Static fallback: no JS or reduced motion. All three steps simply visible, side by side. */
.steps.is-static .steps-inner { display: block; }
.steps.is-static .steps-side { position: static; }
.steps.is-static .steps-nav,
.steps.is-static .step-line { display: none; }
.steps.is-static .steps-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
}
.steps.is-static .step { min-height: 0; opacity: 1; justify-content: flex-start; }
.steps.is-static .step-title { display: block; }
.steps.is-static .step-text { margin-top: 20px; }
html:not(.js) .step-title { display: block; }
html:not(.js) .step { opacity: 1; }

/* ---------- 03: Services grid ---------- */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
/* When the grid follows the section head directly, it does not need its own top gap */
.sec-head + .svc-grid,
.sec-head + .visually-hidden + .svc-grid { margin-top: 0; }

.svc-grid li {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.svc-grid a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 26px 26px;
  color: var(--ink);
}
.svc-grid a:hover { background: var(--mist); color: var(--ink); }
.svc-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.svc-icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--steel);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svc-num {
  color: var(--steel);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.svc-title {
  font-size: clamp(18px, 1.45vw, 21px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.svc-desc {
  margin-top: 10px;
  color: var(--body);
  font-size: 15px;
  line-height: 1.55;
}
.svc-grid .arrow {
  margin-left: auto;
  color: var(--steel);
  font-size: 18px;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease);
}
.svc-grid a:hover .arrow { transform: translateX(5px); }

/* ---------- About: the Develop, Operate, Grow model ---------- */

.model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(40px, 5vw, 64px);
}
.model-grid li {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.model-kicker {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
  color: var(--steel);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.model-kicker .num { color: var(--ink); }
.model-title {
  color: var(--ink);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.model-text { margin-top: 12px; font-size: 16px; }

@media (max-width: 720px) {
  .model-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Contact form ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 48px 32px;
}
.contact-form-col { grid-column: 1 / span 7; }
.contact-aside {
  grid-column: 9 / -1;
  padding-top: 8px;
}
.h2-sm { font-size: clamp(28px, 3vw, 40px); }

.contact-block + .contact-block { margin-top: 32px; }
.contact-aside .contact-label { display: block; margin-bottom: 10px; color: var(--steel); }
.contact-aside a { font-size: 17px; font-weight: 500; }

.form { margin-top: 32px; }
.field + .field { margin-top: 22px; }
.field label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.req { color: var(--steel); }

.field input,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover,
.field textarea:hover { border-color: var(--steel-light); }
.field input:focus,
.field textarea:focus {
  border-color: var(--steel);
  outline: 2px solid var(--steel-light);
  outline-offset: 1px;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #8A3A3A; }
.field-error {
  margin-top: 6px;
  color: #8A3A3A;
  font-size: 14px;
}

.form-req-note {
  margin: 20px 0 26px;
  color: var(--muted);
  font-size: 14px;
}
.form-placeholder { margin-top: 20px; color: var(--steel); font-size: 14px; }

.form-status {
  margin-top: 28px;
  padding: 22px 24px;
  border-left: 3px solid var(--steel);
  background: var(--mist);
}
.form-status-title {
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
}
.form-status-text { margin-top: 6px; font-size: 15px; }
.form-status.is-error { border-left-color: #8A3A3A; }
.form.is-sending { opacity: 0.6; pointer-events: none; }

@media (max-width: 960px) {
  .contact-form-col, .contact-aside { grid-column: 1 / -1; }
  .contact-aside { padding-top: 0; }
}

/* ---------- 04: Callout ---------- */

.callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px 64px;
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(28px, 4vw, 48px);
  border-left: 3px solid var(--steel);
  background: var(--paper);
}
.callout-text {
  max-width: 62ch;
  color: var(--ink);
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- 05: Store cards ---------- */

.store-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(40px, 5vw, 64px);
}
.store-card {
  display: block;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur) var(--ease);
}
.store-card:hover { color: var(--ink); border-color: var(--steel-light); transform: translateY(-4px); }
.store-card.is-soon { cursor: default; }

.store-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--pale);
  overflow: hidden;
}
.store-facets { position: absolute; inset: 0; width: 100%; height: 100%; }
.store-facets polygon { fill: var(--mist); opacity: 0.6; }
.store-media-label {
  position: absolute;
  left: 20px; bottom: 16px;
  color: var(--steel-light);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.store-body { padding: 24px 26px 30px; }
.store-name {
  margin-top: 16px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--track-tight);
}
.store-desc { margin-top: 10px; color: var(--muted); font-size: 15px; }

/* A lone store card reads as a panel: media beside the words, not a half empty row */
.store-grid-single { grid-template-columns: 1fr; }
.store-grid-single .store-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
}
.store-grid-single .store-media { aspect-ratio: auto; min-height: 320px; }
.store-grid-single .store-body {
  align-self: center;
  padding: clamp(28px, 4vw, 52px);
}
.store-grid-single .store-name { margin-top: 18px; }
.store-grid-single .store-desc { font-size: 17px; max-width: 34ch; }

/* Nothing to click until the store is live */
.store-card.is-soon { cursor: default; }
.store-card.is-soon:hover,
.js .store-card.is-soon[data-reveal].is-in:hover { transform: none; border-color: var(--line); }

@media (max-width: 720px) {
  .store-grid-single .store-card { grid-template-columns: 1fr; }
  .store-grid-single .store-media { aspect-ratio: 16 / 10; min-height: 0; }
  .store-grid-single .store-body { padding: 24px 26px 30px; }
}

/* ---------- Contact prompt ---------- */

.cta {
  padding: clamp(72px, 9vw, 128px) 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 64px;
}
.cta .eyebrow { margin-bottom: 18px; }
.cta .h2 { max-width: 14ch; }

/* ---------- Footer ---------- */

.site-footer {
  padding: clamp(64px, 7vw, 96px) 0 32px;
  background: var(--night);
  color: var(--steel-light);
  font-size: 15px;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px 64px;
  padding-bottom: 56px;
}
.site-footer .brand img { height: 52px; }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 40px clamp(40px, 6vw, 96px);
}
.footer-label {
  margin-bottom: 18px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.footer-cols li + li { margin-top: 10px; }
.site-footer a { color: var(--pale); }
.site-footer a:hover { color: #fff; }
.site-footer .nav-store.is-soon { display: inline-flex; gap: 8px; align-items: center; color: var(--steel-light); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(123, 140, 158, 0.2);
  font-size: 13px;
}

/* ---------- Scroll reveal ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .store-card[data-reveal].is-in:hover { transform: translateY(-4px); }
.js .store-card[data-reveal] { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .split > .h2, .split > :last-child { grid-column: 1 / -1; }
  .split-end > :last-child { justify-self: start; text-align: left; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr; }

  .steps-inner { display: block; }
  .steps-side { position: static; }
  .steps-nav { display: none; }
  .steps-panels { padding-left: 34px; }
  .step { min-height: 0; padding-bottom: 72px; opacity: 1; }
  .step-title { display: block; }
  .step-text { margin-top: 20px; }
  .step:last-child { padding-bottom: 0; }
  /* Node on the line for each step */
  .step::before {
    content: "";
    position: absolute;
    left: -38px; top: 2px;
    width: 9px; height: 9px;
    border: 1px solid var(--steel-light);
    border-radius: 50%;
    background: var(--deep);
  }
  .step.is-reached::before { background: #fff; border-color: #fff; }
  /* Line segment from this step down to the next, drawn once the next step is reached */
  .step-line {
    display: block;
    position: absolute;
    left: -34px; top: 20px; bottom: 8px;
    width: 1px;
    background: rgba(123, 140, 158, 0.28);
  }
  .step-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 650ms var(--ease);
  }
  .step.is-linked .step-line::after { transform: scaleY(1); }
  .step:last-child .step-line { display: none; }
  .steps.is-static .steps-panels { padding-left: 0; }
  .steps.is-static .step::before { display: none; }
  .steps.is-static .steps-panels { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero-foot { grid-template-columns: 1fr; }
  .hero-index a { flex-direction: column; gap: 6px; padding: 18px 0 22px 14px; font-size: 14px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-grid a { padding: 20px 20px 22px; }
  .callout { grid-template-columns: 1fr; }
  .store-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .brand img, .site-header .brand img { height: 32px; }
  .site-footer .brand img { height: 44px; }
  .cta-inner { align-items: flex-start; }
}

/* ---------- Reduced motion: everything still, everything visible ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .facet-layer, .facets svg { transform: none !important; }
  .btn:hover, .store-card:hover { transform: none; }
}