/* ---------- hero ---------- */
/* Like Salt: three tall panels side by side, one per case, each slowly cycling its pictures
   under a dark veil, with the name centered on top. */
.hero { position: relative; overflow: hidden; background: var(--night); color: var(--night-text); padding: 0; height: calc(100svh - 68px); min-height: 560px; display: grid; place-items: center; text-align: center; }
.triptych { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.panel { position: relative; overflow: hidden; display: block; color: inherit; text-decoration: none; background: var(--night-2); }
.panel + .panel { border-left: 1px solid var(--night-line); }
.slide { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0;
  animation: slide calc(var(--n) * 6s) linear infinite; animation-delay: calc(var(--i) * 6s + var(--lag)); }
.slide:first-child { opacity: 1; }
@keyframes slide {
  0% { opacity: 0; transform: scale(1.04); }
  6% { opacity: 1; }
  33% { opacity: 1; }
  40% { opacity: 0; transform: scale(1.14); }
  100% { opacity: 0; transform: scale(1.14); }
}
.panel.soon .slide { filter: grayscale(.55) brightness(.8); }
.panel-label { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 3; display: grid; gap: 8px; font: 500 1.35rem/1 var(--f-head); letter-spacing: .01em; color: var(--night-text); transition: color .3s; }
.panel-label span { font: 400 .66rem/1 var(--f-body); letter-spacing: .32em; text-transform: uppercase; color: var(--brass); }
.panel.soon .panel-label { color: var(--night-muted); }
a.panel:hover .panel-label { color: var(--brass); }
a.panel:hover .slide { filter: brightness(1.12); }
.hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(75% 60% at 50% 46%, color-mix(in srgb, var(--night) 22%, transparent), color-mix(in srgb, var(--night) 77%, transparent) 78%), linear-gradient(color-mix(in srgb, var(--night) 40%, transparent), color-mix(in srgb, var(--night) 20%, transparent) 40%, color-mix(in srgb, var(--night) 80%, transparent)); }
.hero-copy { position: relative; z-index: 2; max-width: 640px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.hero-copy a { pointer-events: auto; }
.hero .eyebrow { color: var(--brass); }
.hero-name { font: 700 clamp(3.6rem, 9vw, 7rem)/1 var(--f-name); letter-spacing: .01em; margin: 0 0 14px; color: var(--night-text); }
.hero-sub { font: 400 .68rem/1 var(--f-body); letter-spacing: .38em; text-transform: uppercase; color: var(--brass); margin: 0 0 26px; }
.hero-line { font: 400 clamp(1.3rem, 2.2vw, 1.7rem)/1.4 var(--f-head); color: var(--night-text); margin: 0 0 34px; }
.hero-line em { font-style: italic; color: var(--brass); }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
@media (max-width: 760px) {
  .panel-label { bottom: 22px; font-size: 1rem; }
  .panel-label span { font-size: .55rem; letter-spacing: .22em; }
  .hero-copy { padding-bottom: 70px; }
  .hero .eyebrow { font-size: .6rem; letter-spacing: .18em; gap: 8px; }
  .hero .eyebrow::before, .hero .eyebrow::after { width: 14px; }
  .hero-sub { font-size: .58rem; letter-spacing: .2em; }
}
@media (prefers-reduced-motion: reduce) { .slide { animation: none; } }

/* ---------- how ---------- */
.steps { list-style: none; padding: 0; margin: 0 0 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--gray-2); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 40px 34px; border: 0; transition: background .3s; }
.step + .step { border-left: 1px solid var(--gray-2); }
@media (max-width: 860px) { .step + .step { border-left: 0; border-top: 1px solid var(--gray-2); } }
.step:hover { background: #fff; }
.step-n { display: block; font: 400 .72rem/1 var(--f-body); letter-spacing: .32em; color: var(--brass-ink); margin-bottom: 22px; }
.step p { color: var(--ink-2); margin: 0; }
.split { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 20px; align-items: center; border: 1px solid var(--gray-2); padding: 34px; background: #fff; }
.split ul { margin: 16px 0 0; padding-left: 1.1em; color: var(--ink-2); }
.split .chip { color: var(--brass-ink); }
.split-mid path { stroke: var(--brass-ink); }
.split-mid svg { width: 80px; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } .split-mid { justify-self: center; transform: rotate(90deg); } }

/* ---------- duo ---------- */
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--gray-2); background: var(--ivory); }
.duo-grid > div { padding: clamp(32px, 5vw, 60px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.duo-grid > div + div { border-left: 1px solid var(--gray-2); }
.duo-grid p { max-width: 34em; margin-bottom: 28px; color: var(--ink-2); }
@media (max-width: 760px) { .duo-grid { grid-template-columns: 1fr; } .duo-grid > div + div { border-left: 0; border-top: 1px solid var(--gray-2); } }

/* ---------- faq ---------- */
.faq-wrap { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--gray-2); background: transparent; }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font: 500 1.4rem/1.3 var(--f-head); color: var(--char); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%; font: 400 1.6rem/1 var(--f-body); transition: rotate .2s var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { color: var(--ink-2); margin: 0 0 20px; max-width: 60ch; }
.faq summary::after { color: var(--brass-ink); }

/* plum pages: cards sit a shade darker than the section instead of white */
body.mid .step:hover { background: color-mix(in srgb, var(--night) 22%, transparent); }
body.mid .split { background: color-mix(in srgb, var(--night) 22%, transparent); }

/* FAQ page */
.faq-page .section-head h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
.final-cta { text-align: center; }