@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  --ink: #0c0a08;
  --ink-2: #16120e;
  --ink-3: #221c16;
  --steel: #34302a;
  --steel-2: #4a443c;
  --ember: #c8632b;
  --ember-2: #e5854a;
  --ember-deep: #8f3f16;
  --cream: #f4ede3;
  --cream-2: #d3cabf;
  --cream-3: #a49a8c;
  --line: rgba(244, 237, 227, 0.14);
  --line-strong: rgba(244, 237, 227, 0.3);
  --surface-glass: rgba(34, 28, 22, 0.86);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;
  --shadow-soft: 0 24px 60px -30px rgba(0, 0, 0, 0.85);
  --shadow-card: 0 18px 42px -24px rgba(0, 0, 0, 0.9);
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--cream-2);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--ember-2);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

a:hover,
a:focus-visible {
  color: var(--cream);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  color: var(--cream);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  font-weight: 600;
}

h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
}

h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
}

h3 {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
}

h4 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
}

p {
  margin: 0 0 1.2em;
  color: var(--cream-2);
}

main {
  display: block;
  position: relative;
  z-index: 1;
}

::selection {
  background: var(--ember);
  color: #16120e;
}

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ember-2);
  margin-bottom: 1rem;
  display: inline-block;
}

.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--cream-2);
  max-width: 62ch;
}

.section-shell {
  padding: clamp(4.5rem, 9vw, 9rem) 0;
  position: relative;
}

.section-shell--tight {
  padding: clamp(3rem, 5vw, 5rem) 0;
}

.container-wide {
  width: min(1400px, 92vw);
  margin-inline: auto;
  position: relative;
}

.container-narrow {
  width: min(880px, 92vw);
  margin-inline: auto;
}

.container-mid {
  width: min(1140px, 92vw);
  margin-inline: auto;
}

.rule-line {
  height: 1px;
  width: 100%;
  background: var(--line);
  border: 0;
  margin: 0;
}

.text-ember {
  color: var(--ember-2);
}

.text-cream {
  color: var(--cream);
}

.mono-tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-3);
}

.btn-forge,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  text-align: center;
}

.btn-forge {
  background-color: var(--ember);
  color: #17100a;
}

.btn-forge:hover,
.btn-forge:focus-visible {
  background-color: var(--ember-2);
  color: #17100a;
  transform: translateY(-3px);
}

.btn-ghost {
  background-color: transparent;
  color: var(--cream);
  border-color: var(--line-strong);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--ember-2);
  color: var(--ember-2);
  transform: translateY(-3px);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: var(--ember-2);
}

.link-arrow i {
  transition: transform 0.3s var(--ease);
}

.link-arrow:hover i,
.link-arrow:focus-visible i {
  transform: translateX(6px);
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  padding: 1.1rem 0;
  transition: background-color 0.35s var(--ease), padding 0.35s var(--ease), border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
  background-color: var(--surface-glass);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding: 0.65rem 0;
}

.header-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--cream);
}

.brand-mark__name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.brand-mark__sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream-3);
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 0.82rem;
  color: var(--cream-2);
}

.header-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.header-meta__item i {
  color: var(--ember-2);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 1.7rem;
}

.primary-nav a {
  color: var(--cream-2);
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 0;
  background-color: var(--ember-2);
  transition: width 0.3s var(--ease);
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--cream);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--cream);
  width: 46px;
  height: 42px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.mobile-drawer {
  display: none;
  background-color: var(--ink-2);
  border-top: 1px solid var(--line);
}

.mobile-drawer.is-open {
  display: block;
}

.mobile-drawer__inner {
  padding: 1.8rem 0 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.mobile-drawer a {
  color: var(--cream-2);
  font-size: 1.05rem;
  font-weight: 500;
}

.mobile-drawer a:hover,
.mobile-drawer a:focus-visible {
  color: var(--ember-2);
}

.hero-stage {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding: 9rem 0 4.5rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero-stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  width: 100%;
}

.hero-stage__title {
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  line-height: 0.98;
  margin-bottom: 0.4em;
}

.hero-stage__title em {
  font-style: italic;
  color: var(--ember-2);
  display: block;
}

.hero-stage__side {
  border-left: 1px solid var(--line-strong);
  padding-left: clamp(1.2rem, 2.5vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.hero-stage__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.2rem;
}

.hero-stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  color: var(--cream);
  line-height: 1;
}

.hero-stat__label {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-3);
}

.hero-scroll {
  position: absolute;
  right: 3vw;
  bottom: 2.4rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream-3);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.hero-scroll::before {
  content: "";
  width: 1px;
  height: 62px;
  background: linear-gradient(var(--ember-2), transparent);
}

.rail-marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 1.05rem 0;
  background-color: var(--ink-2);
}

.rail-marquee__track {
  display: flex;
  gap: 3.4rem;
  white-space: nowrap;
  animation: rail-slide 34s linear infinite;
}

.rail-marquee__item {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--cream-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rail-marquee__item i {
  color: var(--ember-2);
  margin-right: 0.9rem;
}

@keyframes rail-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.intro-edit {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.intro-edit__index {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 8vw, 7rem);
  line-height: 0.8;
  color: var(--steel-2);
}

.intro-edit__body h2 {
  margin-bottom: 1.2rem;
}

.intro-edit__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 3rem;
  margin-top: 2.4rem;
}

.micro-fact {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.micro-fact__value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--ember-2);
  line-height: 1;
}

.micro-fact__label {
  font-size: 0.78rem;
  color: var(--cream-3);
  letter-spacing: 0.08em;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 1.1rem;
}

.bento-cell {
  background-color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.bento-cell:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

.bento-cell__label {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ember-2);
  margin-bottom: 0.9rem;
  display: block;
}

.bento-cell--feature {
  grid-column: span 7;
  grid-row: span 2;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
  background-size: cover;
  background-position: center;
}

.bento-cell--feature .bento-cell__overlay {
  padding: 2.2rem;
}

.bento-cell--tall {
  grid-column: span 5;
  grid-row: span 2;
}

.bento-cell--wide {
  grid-column: span 6;
}

.bento-cell--half {
  grid-column: span 6;
}

.bento-cell--third {
  grid-column: span 4;
}

.bento-cell__num {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--ember-2);
  margin-bottom: 0.4rem;
}

.step-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.step-item {
  padding: 2.2rem 1.6rem 2.4rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}

.step-item:last-child {
  border-right: 0;
}

.step-item__badge {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ember-2);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 1rem;
}

.step-item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

.step-item p {
  font-size: 0.9rem;
  color: var(--cream-3);
  margin: 0;
}

.price-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}

.price-card {
  background-color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 2.3rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.price-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
}

.price-card--accent {
  border-color: var(--ember);
  background: linear-gradient(160deg, rgba(200, 99, 43, 0.14), var(--ink-2) 60%);
}

.price-card__tier {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-3);
}

.price-card__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  color: var(--cream);
  line-height: 1;
  margin: 0.9rem 0 0.2rem;
}

.price-card__term {
  font-size: 0.82rem;
  color: var(--cream-3);
  margin-bottom: 1.6rem;
}

.spec-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.spec-list li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: var(--cream-2);
}

.spec-list i {
  color: var(--ember-2);
  margin-top: 0.28rem;
}

.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.gallery-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--ink-3);
  min-height: 220px;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.gallery-tile:hover img {
  transform: scale(1.06);
}

.gallery-tile__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.3rem 1.4rem;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.92), transparent);
  font-size: 0.85rem;
  color: var(--cream);
}

.gallery-tile--a { grid-column: span 5; grid-row: span 2; min-height: 460px; }
.gallery-tile--b { grid-column: span 4; }
.gallery-tile--c { grid-column: span 3; }
.gallery-tile--d { grid-column: span 4; }
.gallery-tile--e { grid-column: span 3; }

.editorial-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5.5rem);
}

.editorial-split--reverse .editorial-split__media {
  order: 2;
}

.editorial-split__media {
  position: relative;
}

.editorial-split__media img {
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}

.editorial-split__floater {
  position: absolute;
  right: -1.4rem;
  bottom: 2.6rem;
  background-color: var(--surface-glass);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.4rem;
  max-width: 220px;
  backdrop-filter: blur(10px);
}

.editorial-split__floater strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ember-2);
  line-height: 1;
}

.editorial-split__floater span {
  font-size: 0.75rem;
  color: var(--cream-3);
}

.testimonial-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
}

.quote-card {
  background-color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.quote-card__text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--cream);
  margin: 0;
}

.quote-card__person {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: auto;
}

.quote-card__person img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.quote-card__name {
  font-weight: 600;
  color: var(--cream);
  font-size: 0.95rem;
  line-height: 1.2;
}

.quote-card__role {
  font-size: 0.78rem;
  color: var(--cream-3);
}

.faq-stack {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background-color: var(--ink-2);
  overflow: hidden;
}

.faq-toggle {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 1.3rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  text-align: left;
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
}

.faq-toggle i {
  color: var(--ember-2);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}

.faq-toggle[aria-expanded="true"] i {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 1.6rem 1.4rem;
  color: var(--cream-2);
  font-size: 0.94rem;
}

.cta-forge {
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg);
  padding: clamp(3rem, 6vw, 5.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-forge h2 {
  margin-bottom: 0.8rem;
}

.cta-forge__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.8rem;
}

.form-panel {
  background-color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
}

.form-field {
  margin-bottom: 1.2rem;
}

.form-field label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-3);
  margin-bottom: 0.5rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background-color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  transition: border-color 0.25s var(--ease);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--cream-3);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--ember-2);
}

.form-check-inline {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.85rem;
  color: var(--cream-3);
  margin-bottom: 1.5rem;
}

.form-check-inline input {
  margin-top: 0.3rem;
  accent-color: var(--ember);
}

.info-stack {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.info-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.4rem;
}

.info-row i {
  color: var(--ember-2);
  font-size: 1.1rem;
  margin-top: 0.2rem;
  width: 22px;
  text-align: center;
}

.info-row__label {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-3);
  display: block;
  margin-bottom: 0.2rem;
}

.info-row__value {
  color: var(--cream);
  font-size: 1rem;
}

.map-frame {
  width: 100%;
  min-height: 380px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.map-frame iframe {
  width: 100%;
  height: 440px;
  border: 0;
  display: block;
  filter: grayscale(0.4) contrast(1.05);
}

.post-card {
  background-color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

.post-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
}

.post-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.post-card:hover .post-card__media img {
  transform: scale(1.05);
}

.post-card__body {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1;
}

.post-card__meta {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember-2);
}

.post-card h3 {
  font-size: 1.4rem;
  margin: 0;
}

.post-card p {
  font-size: 0.9rem;
  color: var(--cream-3);
  margin: 0;
}

.post-card__foot {
  margin-top: auto;
  padding-top: 0.6rem;
}

.section-corner-index {
  position: absolute;
  top: clamp(2rem, 5vw, 4rem);
  right: 4vw;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--steel);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.vertical-note {
  position: absolute;
  left: 1.5vw;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream-3);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-vault {
  position: fixed;
  left: clamp(1rem, 3vw, 2.4rem);
  bottom: clamp(1rem, 3vw, 2.4rem);
  z-index: 1200;
  width: min(430px, calc(100vw - 2rem));
  background-color: var(--surface-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ember);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: var(--shadow-soft);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

.cookie-vault--closing {
  opacity: 0;
  transform: translateY(24px);
}

.cookie-vault__tag {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ember-2);
  margin-bottom: 0.7rem;
}

.cookie-vault__copy {
  font-size: 0.9rem;
  color: var(--cream-2);
  margin: 0 0 1.2rem;
}

.cookie-vault__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.cookie-vault__link {
  font-size: 0.8rem;
  color: var(--cream-3);
  margin-right: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-vault__link:hover,
.cookie-vault__link:focus-visible {
  color: var(--cream);
}

.cookie-vault__btn {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.cookie-vault__btn--decline {
  background: transparent;
  color: var(--cream-2);
}

.cookie-vault__btn--decline:hover,
.cookie-vault__btn--decline:focus-visible {
  border-color: var(--cream-2);
  color: var(--cream);
}

.cookie-vault__btn--accept {
  background-color: var(--ember);
  border-color: var(--ember);
  color: #17100a;
}

.cookie-vault__btn--accept:hover,
.cookie-vault__btn--accept:focus-visible {
  background-color: var(--ember-2);
  border-color: var(--ember-2);
  color: #17100a;
}

.footer-forge {
  background-color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding: clamp(3.5rem, 7vw, 6rem) 0 2rem;
  margin-top: 4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.6rem;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-3);
  margin-bottom: 1.2rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-links a {
  color: var(--cream-2);
  font-size: 0.92rem;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--ember-2);
}

.footer-brand__copy {
  font-size: 0.88rem;
  color: var(--cream-3);
  max-width: 34ch;
  margin-top: 1rem;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-size: 0.9rem;
  color: var(--cream-2);
}

.footer-contact__item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.footer-contact__item i {
  color: var(--ember-2);
  margin-top: 0.25rem;
}

.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--cream-3);
}

.footer-bottom__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
}

.footer-bottom__legal a {
  color: var(--cream-3);
}

.footer-bottom__legal a:hover,
.footer-bottom__legal a:focus-visible {
  color: var(--cream);
}

.footer-registry {
  font-size: 0.76rem;
  color: var(--cream-3);
  letter-spacing: 0.04em;
}

.article-body {
  font-size: 1.02rem;
  color: var(--cream-2);
}

.article-body h2 {
  margin-top: 2.4rem;
}

.article-body h3 {
  margin-top: 1.8rem;
}

.article-body ul,
.article-body ol {
  padding-left: 1.2rem;
  margin-bottom: 1.4rem;
}

.article-body li {
  margin-bottom: 0.5rem;
}

.legal-body {
  max-width: 78ch;
}

.legal-body h2 {
  margin-top: 2.6rem;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.legal-body h3 {
  margin-top: 1.8rem;
  font-size: 1.15rem;
}

.page-banner {
  padding: clamp(8rem, 14vw, 12rem) 0 clamp(3rem, 6vw, 5rem);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line);
}

.page-banner__crumb {
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-3);
  margin-bottom: 1rem;
}

.page-banner__crumb a {
  color: var(--cream-3);
}

.page-banner__crumb a:hover,
.page-banner__crumb a:focus-visible {
  color: var(--ember-2);
}

@media (max-width: 991px) {
  .header-meta {
    display: none;
  }

  .primary-nav {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .hero-stage__grid,
  .intro-edit,
  .editorial-split,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .editorial-split--reverse .editorial-split__media {
    order: 0;
  }

  .hero-stage__side {
    border-left: 0;
    border-top: 1px solid var(--line-strong);
    padding-left: 0;
    padding-top: 1.4rem;
  }

  .bento-cell--feature,
  .bento-cell--tall,
  .bento-cell--wide,
  .bento-cell--half,
  .bento-cell--third {
    grid-column: span 12;
    grid-row: auto;
  }

  .gallery-tile--a,
  .gallery-tile--b,
  .gallery-tile--c,
  .gallery-tile--d,
  .gallery-tile--e {
    grid-column: span 12;
    min-height: 260px;
  }

  .hero-scroll,
  .vertical-note {
    display: none;
  }

  .intro-edit__split {
    grid-template-columns: 1fr;
  }

  .step-item {
    border-right: 0;
  }
}

@media (max-width: 575px) {
  body {
    font-size: 0.96rem;
  }

  .cookie-vault {
    left: 0.8rem;
    right: 0.8rem;
    width: auto;
    bottom: 0.8rem;
    padding: 1.3rem;
  }

  .cookie-vault__link {
    margin-right: 0;
    width: 100%;
  }

  .price-card {
    padding: 1.8rem 1.4rem;
  }
}

/* QA_GRID_COLUMN_FIX .price-ladder.row */
.price-ladder.row{--bs-gutter-x:0;--bs-gutter-y:0;margin-left:0;margin-right:0}
.price-ladder.row>:is([class^="col-"],[class*=" col-"]){width:100%;max-width:100%;min-width:0;flex:none;padding-left:0;padding-right:0;margin-top:0}

/* QA_FIX: blog page – fixed header overlaps page banner on mobile.
   Push the first page section below the fixed header height. */
@media (max-width: 991px) {
  main > .page-banner {
    margin-top: 7.3rem;
  }
}

/* QA_FIX: blog page – section index numeral contrast.
   Original .intro-edit__index used --steel-2 (#4a443c) on --ink (#0c0a08),
   failing the 3:1 contrast threshold. Use a lighter, still-subtle tone. */
.intro-edit__index {
  color: var(--cream-3);
}

/* QA_FIX: contrast for decorative section index on about page */
.intro-edit__index {
  color: var(--cream-3);
}

/* QA_FIX: offset fixed header so it no longer overlaps the page banner hero on small screens */
@media (max-width: 991px) {
  main {
    padding-top: 120px;
  }
}

/* QA_CONTRAST_FIX .intro-edit__index */
.intro-edit__index {
  color: var(--cream-3);
}

/* QA_FIX: article hero (.hero-stage) clearance under the fixed header on small screens.
   The fixed header is ~116px tall on mobile; offset the hero so its top edge
   starts below the header and no content is covered. */
@media (max-width: 991px) {
  main > .hero-stage:first-child {
    margin-top: 120px;
  }
}

/* QA_TEST: probe hero offset */
@media (max-width: 991px) {
  main { padding-top: 320px; }
}

/* ============================================================
   QA_FIX pack – damascus-chef-knife-k4
   ============================================================ */

/* 1) Reveal animations: keep revealed content fully opaque and in place so
   text never renders semi-transparent (contrast) or shifted (overlap). */
[data-aos] {
  opacity: 1 !important;
}
[data-aos="fade-up"],
[data-aos="fade-down"],
[data-aos="fade-left"],
[data-aos="fade-right"] {
  transform: none !important;
}

/* 2) Step rail: 6 process steps were sharing 5 narrow auto-fit tracks and
   squeezing the copy into ~236px columns. Use two readable columns on
   desktop and a single column on small screens. */
.step-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.step-rail .step-item {
  border-right: 1px solid var(--line);
}
.step-rail .step-item:nth-child(2n) {
  border-right: 0;
}
.step-rail .step-item:last-child {
  border-right: 0;
}
@media (max-width: 991px) {
  .step-rail {
    grid-template-columns: 1fr;
  }
  .step-rail .step-item,
  .step-rail .step-item:nth-child(2n) {
    border-right: 0;
  }
}

/* 3) Contrast: muted warm-grey label text was below 4.5:1 on the dark
   surfaces. Lift the small uppercase / caption tones. */
.price-card__tier,
.price-card__term,
.step-item p,
.micro-fact__label,
.hero-stat__label,
.brand-mark__sub,
.mono-tag,
.form-field label,
.footer-brand__copy,
.footer-registry,
.footer-bottom {
  color: #cfc6b9;
}

/* 4) Gallery captions sit over photographs, so give the caption bar a solid
   dark plate instead of a gradient that lets light image pixels through. */
.gallery-tile__caption {
  background-image: none;
  background-color: rgba(10, 8, 6, 0.88);
  color: #f4ede3;
}

/* 5) Hero micro-facts sit over the hero photograph on mobile: give them a
   dark plate so the small labels keep their contrast. */
.hero-stage .micro-fact {
  background-color: rgba(10, 8, 6, 0.85);
  border-top-color: rgba(244, 237, 227, 0.32);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
}
.hero-stage .micro-fact__label {
  color: #e9e1d6;
}

/* 6) Fixed header overlap on mobile: put the offset on the hero section
   itself (with a BFC on main so the margin cannot collapse away) instead of
   relying on main padding, which left the hero flush with the top. */
@media (max-width: 991px) {
  main.main-hero-stage {
    padding-top: 0;
    display: flow-root;
  }
  main.main-hero-stage > .hero-stage {
    margin-top: 116px;
  }
}

/* 7) Inline confirmation for the quote form (see js/main.js) */
.form-panel__note {
  margin: 1.2rem 0 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--ember);
  border-radius: var(--radius-sm);
  background-color: rgba(200, 99, 43, 0.14);
  color: var(--cream);
  font-size: 0.92rem;
}

/* QA_FIX (privacy-policy): fixed header clearance.
   The fixed .site-header (~116px tall on mobile) was overlapping the top of the
   page content. Push <main> down with its own margin (not padding) so the hero
   box itself starts below the header, and neutralise the previous padding
   overrides. */
@media (max-width: 991px) {
  main {
    padding-top: 0 !important;
    margin-top: 124px;
  }
  main > .page-banner {
    margin-top: 0;
  }
}

/* ============================================================
   QA_FIX pack – refund-policy (page banner hero clearance)
   ============================================================ */
/* Clear the fixed header on small screens so the page-banner hero
   (top edge) starts below the header instead of under it.
   Scoped to this page's <main class="main-page-banner"> so other
   pages with their own offsets are not affected. */
@media (max-width: 991px) {
  main.main-page-banner {
    padding-top: 116px;
    margin-top: 0;
    display: flow-root;
  }
  main.main-page-banner > .page-banner {
    margin-top: 0;
  }
}

/* ============================================================
   QA_FIX pack – price page
   ============================================================ */

/* 1) Fixed header clearance on mobile. The desktop-only header is fixed and
   ~116px tall on small screens; the leading hero banner was flush with the top
   of the document (top: 0) so the header covered it. Push the whole page block
   down by the header height on mobile. Scoped to this page's main so other
   templates are unaffected. Also neutralise the earlier debug padding/margin
   values that only created a large empty gap on this template. */
@media (max-width: 991px) {
  main.page-price {
    margin-top: 120px;
    padding-top: 0;
  }
  main.page-price > .page-banner {
    margin-top: 0;
  }
}

/* ============================================================
   QA_FIX pack – what-ruins-a-kitchen-knife-p8 (article / hero-stage)
   ============================================================ */

/* 1) Fixed header clearance on mobile.
   The desktop header is fixed and measures ~116px tall at 360px.
   The leading .hero-stage was flush with the top of the document, so the
   header sat on top of the hero. Give this page's <body> a top offset equal
   to (a little more than) the header height and neutralise the generic
   <main> offsets that other templates rely on, so the hero's top edge starts
   below the header. Scoped to body.page-article-hero so it cannot leak. */
@media (max-width: 991px) {
  body.page-article-hero {
    padding-top: 124px;
  }
  body.page-article-hero main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body.page-article-hero main > .hero-stage,
  body.page-article-hero main > .hero-stage:first-child {
    margin-top: 0 !important;
  }
}

/* 2) Contrast: the breadcrumb separator ".text-ember" sits over the hero
   photograph and measured 3.64:1 against the blended backdrop. Use a lighter
   ember tint for the separator so it clears 4.5:1 while keeping the accent. */
.hero-stage .page-banner__crumb .text-ember {
  color: #f2cba6;
}

/* ============================================================
   QA_FIX pack – home hero headline clipping
   ============================================================ */
/* The desktop hero headline used clamp(2.8rem, 7vw, 6.4rem). At large
   viewports 7vw resolves to ~6.4rem, so the 4-line headline (plus eyebrow,
   lede, CTA row and stat block) grew taller than the hero's content box.
   Because .hero-stage is a flex container with overflow:hidden, the tail of
   the headline was clipped by the section bounds (and sat under the fixed
   cookie consent panel). Cap the display size against the available hero
   height so the whole headline renders inside the section, and keep the
   headline clear of the bottom-anchored consent panel. */
.hero-stage .hero-stage__title {
  font-size: clamp(2.6rem, 4.6vw, 5.2rem);
  line-height: 1.02;
  overflow-wrap: break-word;
}

/* Give the hero a little extra breathing room at the top so the taller
   content column still fits without the flex-end alignment pushing the
   headline past the padded content box. */
@media (min-width: 992px) {
  .hero-stage {
    padding-top: clamp(7rem, 9vw, 9rem);
    padding-bottom: clamp(3rem, 5vw, 4.5rem);
  }
}

/* ============================================================
   QA_FIX pack – home hero / cookie consent clearance
   ============================================================ */
/* The cookie consent panel is fixed to the bottom-left of the viewport and
   overlapped the hero's CTA row and stat block on desktop. Reserve space at
   the bottom of the hero so the headline, buttons and stats all render above
   the panel. Scoped to the hero stage and only where there is room to sit
   beside the panel (>= 992px); the panel is full-width-ish on small screens
   so mobile keeps its own tighter layout. */
@media (min-width: 992px) {
  .hero-stage {
    padding-bottom: clamp(13rem, 20vw, 17rem);
  }
}

/* ============================================================
   QA_FIX pack – newsletter form (home, section "One email a month…")
   ============================================================ */
/* The newsletter CTA used a Bootstrap row with `align-items-end`, mixing a
   .form-field (which carries a 1.2rem bottom margin) in one column with a
   bare .btn-forge in the other. The mismatched internal bottom margins made
   the columns size to different content heights, so the absolutely normal
   flow of the row pulled the orange Subscribe button up over the email
   input, hiding it and making the form unusable on desktop.

   Fix: give the two columns a shared, deterministic alignment instead of
   relying on flex-end with unequal margins - the label + input stack and the
   button sit in one grid row, with the button's bottom edge aligned to the
   input's bottom edge. Scoped to the CTA block (.cta-forge) so no other
   form on the site is affected. */
.cta-forge form.row {
  align-items: end;
}

.cta-forge form.row > [class^="col-"],
.cta-forge form.row > [class*=" col-"] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

/* Neutralise the stacked bottom margins inside this one-row form so both
   columns measure the same height and neither content box can ride up over
   its neighbour. */
.cta-forge form.row .form-field {
  margin-bottom: 0;
  width: 100%;
}

.cta-forge form.row .btn-forge {
  margin: 0;
}

/* Keep a small gap between the stacked label/input and the button when the
   row wraps to a single column on small screens. */
@media (max-width: 767px) {
  .cta-forge form.row .btn-forge {
    margin-top: 0.4rem;
  }
}

/* ============================================================
   QA_FIX pack – home hero / cookie consent clearance on mobile
   ============================================================ */
/* The cookie consent panel (.cookie-vault) is position:fixed to the bottom
   of the viewport. On phones it is nearly full width and sits roughly 300px
   tall, so while it is on screen it lands on top of the hero headline and
   lede, clipping the main title text in section 1.

   The previous clearance rule was scoped to (min-width: 992px), so small
   screens had no reservation at all. Reserve vertical space on the hero at
   phone widths too, so the headline, lede, CTA row and stat block all render
   above the bottom-anchored panel. The hero is a flex container that
   bottom-aligns its content; adding bottom padding here lifts the content
   clear of the panel without changing the design or the reading order.
   Scoped to .hero-stage so no other section is affected. */
@media (max-width: 991px) {
  .hero-stage {
    padding-bottom: clamp(20rem, 78vw, 26rem);
  }
}

/* ============================================================
   QA_FIX – home hero CTA button contrast
   ============================================================ */
/* The hero primary CTA (.btn-forge) renders the dark ink text #17100a on the
   ember plate #c8632b. Where the hero photograph and its 0.78 black scrim
   darken the plate, the rendered pair measured ~1.3:1 (needs 4.5:1).
   Deepen the plate to the existing --ember-deep tone and lift the label to
   --cream so the same ember accent is kept but the pairing clears the
   threshold. Scoped to the hero action row so no other .btn-forge on the
   site (cards, footer, forms) changes. */
.hero-stage .cta-forge__actions .btn-forge {
  background-color: var(--ember-deep);
  border-color: var(--ember);
  color: var(--cream);
}

.hero-stage .cta-forge__actions .btn-forge:hover,
.hero-stage .cta-forge__actions .btn-forge:focus-visible {
  background-color: var(--ember);
  border-color: var(--ember-2);
  color: #100b07;
}