/* =============================================================================
   HOMEPAGE

   The page alternates deliberately: ink hero, ink proof, lavender domain,
   page explorer, ink manifesto, surface platform, lavender move, page
   renewable, ink close. No two adjacent bands share a ground or a shape,
   and one band per page is allowed to be much louder than the rest.
   ============================================================================= */

/* ── Hero ───────────────────────────────────────────────────────────────
   A single deep-ink photographic environment. Missie is composited with
   her own alpha channel, so there is no mask edge, no card, and nothing
   painted behind her. */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--section-ink-deep);
  color: var(--text-on-ink);
  overflow: hidden;
}

.hero__env { position: absolute; inset: 0; z-index: 0; }
.hero__env img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }

/* Ink pooled on the left so the headline sits on settled ground, and along
   the foot so the wire reads. Gone well before the middle of the frame. */
.hero__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(96deg, var(--section-ink-deep) 0%, rgba(7, 6, 15, .92) 24%, rgba(7, 6, 15, .42) 46%, rgba(7, 6, 15, 0) 66%),
    linear-gradient(180deg, rgba(7, 6, 15, .74) 0%, rgba(7, 6, 15, 0) 24%),
    linear-gradient(0deg, rgba(7, 6, 15, .88) 0%, rgba(7, 6, 15, 0) 20%);
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: calc(var(--head-h) + clamp(2.5rem, 5vw, 4.5rem)) var(--gutter) clamp(5.5rem, 8vw, 8rem);
  min-height: clamp(34rem, 64vw, 50rem);
}

.hero__copy { max-width: 32rem; }
.hero h1 { font-size: var(--d1); margin-bottom: 1.5rem; max-width: 17ch; }
.hero h1 .say { color: var(--brand-quiet); }
.hero .lede { color: var(--text-on-ink-2); max-width: 34ch; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); }
.hero .btns { margin-top: 2.25rem; }

.hero__moo { margin: 0 0 0 auto; align-self: end; width: min(100%, 32rem); }
.hero__moo img { display: block; width: 100%; height: auto; }

/* ── The wire ───────────────────────────────────────────────────────────
   One line of verified platform facts along the foot of the hero,
   changing slowly. The site's only ambient motion, and the plainest way
   to say that all of this carries on without fuss.

   Every line is in the HTML. With motion reduced or scripting off they
   simply stack and nothing is lost. */

.wire {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 1rem var(--gutter) 1.35rem;
  border-top: 1px solid rgba(201, 190, 255, .16);
}

.wire__label {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-quiet);
}

.wire__label::before {
  content: "";
  width: 6px; height: 6px;
  margin-right: .55rem;
  border-radius: 50%;
  background: var(--brand-quiet);
  animation: wire-pulse 2.8s var(--ease) infinite;
}

@keyframes wire-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.wire__list { position: relative; flex: 1 1 auto; list-style: none; margin: 0; padding: 0; min-height: 1.6em; }
.wire__list li { display: flex; gap: .5rem; align-items: center; font-size: var(--t-small); color: var(--text-on-ink-2); }
.wire__list .tick { flex: none; color: var(--brand-quiet); }

/* Only once the script confirms it can run does the wire become one line
   at a time. Until then, and always without JavaScript, all five stack. */
.js-wire .wire__list li {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
  pointer-events: none;
}

.js-wire .wire__list li.is-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .wire__label::before { animation: none; opacity: .85; }
}

@media (max-width: 1100px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); } }

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 0;
    padding-bottom: clamp(7rem, 18vw, 9rem);
  }
  .hero__copy { max-width: none; order: 1; }
  .hero h1 { max-width: none; }
  .hero .lede { max-width: 42ch; }
  .hero__moo { order: 2; width: min(74%, 20rem); margin: 1.5rem auto 0; }
  .hero__env img { object-position: 74% 40%; }
  .hero__wash {
    background:
      linear-gradient(180deg, rgba(7, 6, 15, .9) 0%, rgba(7, 6, 15, .72) 44%, rgba(7, 6, 15, .58) 100%);
  }
  /* The lines wrap on a narrow screen, so the row is given the height of
     the longest of them rather than clipping to one. */
  .wire { flex-direction: column; align-items: flex-start; gap: .45rem; padding-bottom: 1.1rem; }
  .wire__list { min-height: 3.2em; width: 100%; }
  .wire__list li { align-items: flex-start; }
  .wire__list .tick { margin-top: .3em; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: clamp(2.5rem, 1.4rem + 5.4vw, 3.5rem); }
}

/* ── Proof ──────────────────────────────────────────────────────────────
   Four commitments at display scale on the deepest ground on the page.
   This used to be a thin grey strip of small print. */

.proof { background: var(--section-ink); color: var(--text-on-ink); padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.proof__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); }

.proof__item { position: relative; padding-left: clamp(1.25rem, 2.5vw, 2rem); }
.proof__item:first-child { padding-left: 0; }

.proof__item::before {
  content: "";
  position: absolute;
  left: 0; top: .4rem; bottom: .4rem;
  width: 1px;
  background: rgba(201, 190, 255, .18);
}

.proof__item:first-child::before { display: none; }

.proof__fig {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem);
  line-height: .95;
  letter-spacing: -.03em;
  color: #fff;
}

.proof__term {
  margin: .5rem 0 0;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--brand-quiet);
}

.proof__def { margin: .55rem 0 0; font-size: var(--t-micro); line-height: 1.55; color: var(--text-on-ink-2); max-width: 26ch; }

@media (max-width: 860px) {
  .proof__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .proof__item:nth-child(odd) { padding-left: 0; }
  .proof__item:nth-child(odd)::before { display: none; }
}

@media (max-width: 480px) {
  .proof__row { grid-template-columns: minmax(0, 1fr); }
  .proof__item { padding-left: 0; }
  .proof__item::before { display: none; }
  .proof__def { max-width: none; }
}

/* ── Domain band ────────────────────────────────────────────────────────── */

.dband { background: var(--section-lavender); }

.dband__wrap {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(2.75rem, 5vw, 4.5rem) var(--gutter);
}

.dband h2 { font-size: var(--d3); }
.dband h2 .say { color: var(--brand); }
.dband__copy p { margin: 1rem 0 0; font-size: var(--t-body); color: var(--text-on-lavender); max-width: 28ch; }

.dtabs { display: flex; gap: 1.75rem; border-bottom: 1px solid var(--border-lavender); margin-bottom: 1.1rem; }

.dtab {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: .35rem 0 .7rem;
  font-family: var(--sans); font-size: var(--t-small); font-weight: 600;
  color: var(--text-on-lavender); cursor: pointer; min-height: var(--tap);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.dtab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }

.dform { display: flex; gap: .6rem; }

.dform input {
  flex: 1 1 auto; min-width: 0; min-height: 58px;
  padding: .85rem 1.15rem;
  border: 1px solid var(--border-lavender); border-radius: var(--r-1);
  background: var(--surface);
  font-family: var(--sans); font-size: var(--t-body); color: var(--text);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.dform input::placeholder { color: var(--text-muted); }
.dform input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.dform .btn { min-height: 58px; padding-inline: 1.9rem; }

.dband__marks { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin: 1.15rem 0 0; padding: 0; }

.dband__marks li {
  display: inline-flex; align-items: center;
  padding: .45rem .75rem;
  background: var(--surface);
  border: 1px solid var(--border-lavender);
  border-radius: var(--r-1);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.dband__marks li:hover { border-color: var(--brand); transform: translateY(-1px); }
.dband__marks img { display: block; width: auto; height: 20px; }
.dband__note { margin: 1rem 0 0; font-size: var(--t-micro); color: var(--text-on-lavender); }

@media (max-width: 860px) {
  .dband__wrap { grid-template-columns: minmax(0, 1fr); }
  .dband__copy p { max-width: none; }
}

@media (max-width: 520px) {
  .dform { flex-direction: column; }
  .dform .btn { width: 100%; }
}

/* ── Manifesto ──────────────────────────────────────────────────────────
   One statement at the largest size on the site. The rhythm breaks here
   on purpose: a page needs somewhere to raise its voice, and this is the
   thing worth saying loudly. */

.creed { background: var(--section-ink); color: var(--text-on-ink); padding-block: clamp(4rem, 8vw, 8rem); }
.creed__wrap { max-width: 1120px; }

.creed__say {
  font-size: var(--d0);
  line-height: .98;
  letter-spacing: -.035em;
  max-width: 18ch;
  color: #fff;
}

.creed__say .say { color: var(--brand-quiet); }

.creed__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  align-items: end;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(201, 190, 255, .18);
}

.creed__foot p { margin: 0; color: var(--text-on-ink-2); max-width: 58ch; }

@media (max-width: 760px) {
  .creed__foot { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .creed__say { max-width: none; }
}

/* ── Platform ───────────────────────────────────────────────────────────
   The photograph runs off the right edge of the page against the copy: a
   different shape from every other band here. */

.plat { background: var(--surface); }

.plat__wrap {
  display: grid;
  grid-template-columns: minmax(26rem, 1fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}

.plat__copy { padding-block: var(--band); max-width: 34rem; }

.plat h2 { font-size: var(--d3); margin-bottom: 1rem; }
.plat h2 .say { color: var(--brand); }
.plat__lede { font-size: var(--t-lead); color: var(--text-soft); max-width: 40ch; margin-bottom: 2rem; }
.plat .ruled { margin-bottom: 1.75rem; }

.plat__fig { margin: 0; align-self: stretch; min-height: clamp(24rem, 42vw, 38rem); }
.plat__fig .ph, .plat__fig .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .plat__wrap { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 0; }
  .plat__copy { padding-inline: var(--gutter); padding-bottom: var(--band-sm); max-width: none; }
  .plat__fig { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ── Sustainability ─────────────────────────────────────────────────────
   The one full landscape on the homepage, running off the right edge. */

.green { background: var(--page); }

.green__wrap {
  display: grid;
  grid-template-columns: minmax(24rem, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}

.green__copy { padding-block: var(--band); max-width: 32rem; }

.green h2 { font-size: var(--d3); margin-bottom: 1rem; }
.green h2 .say { color: var(--brand); }
.green__copy > p { margin: 0; color: var(--text-soft); max-width: 38ch; }
.green__badge { margin-top: 2rem; max-width: 230px; }
.green__link { margin: 1.5rem 0 0; }

.green__fig { margin: 0; align-self: stretch; min-height: clamp(20rem, 34vw, 30rem); }
.green__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .green__wrap { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .green__copy { padding-inline: var(--gutter); padding-bottom: var(--band-sm); }
  .green__copy > p { max-width: none; }
  .green__fig { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ── Closing ────────────────────────────────────────────────────────────── */

.close { background: var(--section-ink); color: var(--text-on-ink); padding-block: var(--band); }

.close__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.close h2 { font-size: var(--d2); color: #fff; }
.close h2 .say { color: var(--brand-quiet); }
.close p { color: var(--text-on-ink-2); max-width: 46ch; }
.close .btns { margin-top: 2rem; }
.close__sign { margin: 1.5rem 0 0; }
.close__sign span { font-family: var(--serif); font-size: 1.5rem; font-style: italic; color: var(--brand-quiet); }

@media (max-width: 860px) { .close__wrap { grid-template-columns: minmax(0, 1fr); } }
/* ── Service explorer ───────────────────────────────────────────────────
   The range as an editorial index against one large photograph. The names
   are set at heading scale, not as small tab labels, and the panel runs
   off the right edge of the page rather than sitting in a card.

   The base state is the no-JavaScript state: every entry stacked and
   complete. The tab behaviour is layered on only once the script confirms
   it can run, so nothing is hidden behind a control that is not working.

   The travelling marker is one rule moved with a transform. Adapted from
   @ruixen.ui's sliding tabs on 21st.dev and rebuilt without the layout
   animation library. */

.explore { background: var(--page); padding-block: var(--band); overflow: hidden; }

.explore__grid {
  display: grid;
  grid-template-columns: minmax(15rem, 3.2fr) minmax(0, 8.8fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: stretch;
  padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}

.explore .head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.explore .head h2 { font-size: var(--d3); }
.explore .head h2 .say { color: var(--brand); }

/* ── The index ── */

.explore__index { position: relative; display: grid; align-content: start; align-self: center; }

.explore__tab {
  display: grid;
  gap: .15rem;
  width: 100%;
  min-height: var(--tap);
  padding: 1rem 0 1rem 1.25rem;
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  color: var(--text);
  transition: color var(--fast) var(--ease), padding-left var(--base) var(--ease);
}

.explore__index .explore__tab:last-child { border-bottom: 1px solid var(--border); }

.explore__fam {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.1rem + .7vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}

.explore__cat {
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--text-muted);
  transition: color var(--fast) var(--ease);
}

/* Selection is marked by the travelling rule, the brand-coloured category
   and a small indent, not by fading the other names. Dimming text with
   opacity would take the unselected categories below the contrast
   threshold, which is too high a price for a hover effect. */
.js-explore .explore__tab[aria-selected="true"] { padding-left: 1.6rem; }
.explore__tab[aria-selected="true"] .explore__fam { color: var(--brand); }
.explore__tab[aria-selected="true"] .explore__cat { color: var(--brand); }
.explore__tab:hover .explore__fam { color: var(--brand); }

.explore__marker {
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 0;
  background: var(--brand);
  border-radius: 1px;
  opacity: 0;
  transition: transform var(--base) var(--ease), height var(--base) var(--ease), opacity var(--fast) var(--ease);
}

.js-explore .explore__marker { opacity: 1; }

/* ── The stage ── */

.explore__stage { position: relative; display: grid; gap: 1.5rem; }

.explore__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.explore__fig {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-2) 0 0 var(--r-2);
  background: var(--surface-soft);
  aspect-ratio: 5 / 4;
}

.explore__fig .ph, .explore__fig .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }

.explore__copy { padding-right: var(--gutter); }

.explore__name { font-family: var(--serif); font-size: var(--d3); line-height: 1.02; letter-spacing: -.03em; }
.explore__name span { display: block; font-family: var(--sans); font-size: var(--t-small); font-weight: 600; color: var(--brand); margin-top: .5rem; letter-spacing: 0; }
.explore__sum { margin: 1.15rem 0 0; font-size: var(--t-lead); line-height: 1.5; color: var(--text-soft); max-width: 38ch; }

.explore__pts { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .55rem; }
.explore__pts li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-small); }
.explore__pts .tick { flex: none; margin-top: .25em; color: var(--brand); }

.explore__foot {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center;
  margin-top: 1.75rem; padding-top: 1.35rem;
  border-top: 1px solid var(--border);
}

.explore__price { margin: 0; font-size: var(--t-small); color: var(--text-soft); white-space: nowrap; }
.explore__price strong { font-family: var(--serif); font-size: 1.875rem; font-weight: 500; color: var(--text); letter-spacing: -.02em; }

/* ── With JavaScript: one entry at a time, crossfaded ── */

.js-explore .explore__stage { display: block; }

.js-explore .explore__panel {
  position: absolute;
  inset: 0 0 auto;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease), visibility var(--base);
}

.js-explore .explore__panel.is-on { position: relative; opacity: 1; visibility: visible; transform: none; }

@media (max-width: 1024px) {
  .explore__grid { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .explore .head, .explore__index, .explore__copy { padding-inline: var(--gutter); }
  .explore__index { grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto; padding-inline: var(--gutter); }
  .explore__tab { border-top: 0; border-bottom: 2px solid var(--border); padding: .75rem 1.25rem .75rem 0; }
  .explore__index .explore__tab:last-child { border-bottom: 2px solid var(--border); }
  .explore__marker { top: auto; bottom: 0; left: var(--gutter); width: 0; height: 2px; }
  .explore__fig { border-radius: var(--r-2); margin-inline: var(--gutter); }
}

/* Below this width the index is dropped and all six entries are simply
   listed. Six tabs across a phone is worse than six entries you scroll. */
@media (max-width: 760px) {
  .js-explore .explore__index { display: none; }
  .js-explore .explore__stage { display: grid; gap: 2.5rem; }
  .js-explore .explore__panel { position: relative; opacity: 1; visibility: visible; transform: none; }
  .explore__panel { grid-template-columns: minmax(0, 1fr); }
  .explore__fig { aspect-ratio: 16 / 10; }
}