Interior — Landing Luxury

:root {
  --bg: #f6f2ec;
  --paper: #fbf9f5;
  --ink: #2c2620;
  --ink-2: #5a5147;
  --muted: #8a8175;
  --clay: #b08968;
  --clay-d: #8c6a4f;
  --walnut: #5c4433;
  --sage: #9caf88;
  --line: rgba(44, 38, 32, 0.12);
  --white: #fff;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --shadow: 0 24px 60px -30px rgba(44, 38, 32, 0.45);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, blockquote { margin: 0; }

a { color: inherit; text-decoration: none; }

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--r-md);
  z-index: 60;
}
.skip:focus { left: 16px; top: 16px; }

/* ---- shared ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay-d);
  margin: 0 0 18px;
}
.eyebrow.center { justify-content: center; }
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 4px rgba(176, 137, 104, 0.18);
}

.section-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.btn:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; }
.btn--solid {
  background: var(--ink);
  color: var(--paper);
}
.btn--solid:hover { background: var(--walnut); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--walnut); transform: translateY(-2px); }
.btn--full { width: 100%; padding: 16px; }

/* ---- header ---- */
.site {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 64px);
  background: rgba(246, 242, 236, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--walnut);
  color: var(--walnut);
  font-family: "Cormorant Garamond", serif;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.02em;
}
.brand__name {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px; font-weight: 600;
  letter-spacing: 0.01em;
}
.brand__name em { color: var(--clay); font-style: italic; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.nav a:not(.nav__cta)::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--walnut);
  transition: width 0.3s ease;
}
.nav a:not(.nav__cta):hover { color: var(--ink); }
.nav a:not(.nav__cta):hover::after { width: 100%; }
.nav__cta {
  border: 1px solid var(--walnut);
  color: var(--walnut);
  padding: 9px 20px !important;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease;
}
.nav__cta:hover { background: var(--walnut); color: var(--paper); }

/* ---- hero ---- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 64px);
  max-width: 1240px;
  margin: 0 auto;
}
.hero__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(44px, 8vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.hero__title em { font-style: italic; color: var(--clay-d); }
.hero__lede {
  margin: 26px 0 0;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 17px;
  min-height: 3em;
  transition: opacity 0.4s ease;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 0; }
.stats {
  display: flex;
  gap: clamp(24px, 5vw, 52px);
  margin: 46px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.stats dt {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.stats dd {
  margin: 6px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 40px; font-weight: 600;
  color: var(--walnut);
}
.stats dd span { color: var(--clay); }

.hero__plate { position: relative; }
.plate {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.plate--hero {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(120% 90% at 20% 12%, rgba(255, 255, 255, 0.34), transparent 55%),
    linear-gradient(150deg, #7d5c42 0%, #b08968 42%, #6e5a44 78%, #3d3025 100%);
  position: relative;
  overflow: hidden;
}
.plate--hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(44, 38, 32, 0.5), transparent 45%);
}
.plate__caption {
  position: absolute;
  left: 22px; bottom: 22px; z-index: 2;
  color: var(--paper);
  font-family: "Cormorant Garamond", serif;
  font-size: 20px; font-weight: 500;
}
.tag {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 10px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(251, 249, 245, 0.16);
  border: 1px solid rgba(251, 249, 245, 0.32);
  backdrop-filter: blur(4px);
}

/* ---- section head ---- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* ---- work ---- */
.work, .services {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 90px) clamp(20px, 5vw, 64px);
}
.work { border-top: 1px solid var(--line); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: inherit;
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  transition: all 0.22s ease;
}
.chip:hover { border-color: var(--clay); color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--walnut); outline-offset: 2px; }
.chip.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.chip__n {
  display: inline-block;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--clay);
  font-weight: 700;
}
.chip.is-active .chip__n { color: var(--sage); }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease, opacity 0.35s ease, border-color 0.3s ease;
}
.card:hover, .card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(176, 137, 104, 0.5);
  outline: none;
}
.card.is-hidden {
  display: none;
}
.card.is-dim { opacity: 0; transform: translateY(8px); }
.card__cover {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
}
.card__cover::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(44, 38, 32, 0);
  transition: background 0.4s ease;
}
.card:hover .card__cover::before { background: rgba(44, 38, 32, 0.14); }
.card__badge {
  position: absolute;
  top: 14px; left: 14px; z-index: 2;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(44, 38, 32, 0.42);
  border: 1px solid rgba(251, 249, 245, 0.28);
  backdrop-filter: blur(4px);
  transform: translateY(-4px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.card:hover .card__badge, .card:focus-visible .card__badge { opacity: 1; transform: none; }
.c1 { background: linear-gradient(140deg, #8c6a4f, #c9a988); }
.c2 { background: linear-gradient(140deg, #5c4433, #9caf88); }
.c3 { background: linear-gradient(140deg, #3d3428, #7d8fa0); }
.c4 { background: linear-gradient(140deg, #6e5a44, #d8c7b0); }
.c5 { background: linear-gradient(140deg, #7a8c6a, #cdbfa6); }
.c6 { background: linear-gradient(140deg, #b08968, #5c4433); }
.card__body { padding: 18px 20px 22px; }
.card__title {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.01em;
}
.card__meta { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.empty {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 40px 0;
}

/* ---- services ledger ---- */
.services { border-top: 1px solid var(--line); }
.services__lede { max-width: 40ch; color: var(--ink-2); font-size: 16px; }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger__row {
  display: grid;
  grid-template-columns: 60px 1.1fr 2fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 30px 6px;
  border-top: 1px solid var(--line);
  transition: background 0.3s ease, padding 0.3s ease;
}
.ledger__row:last-child { border-bottom: 1px solid var(--line); }
.ledger__row:hover { background: var(--paper); padding-left: 18px; }
.ledger__no {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px; color: var(--clay);
}
.ledger__title {
  font-family: "Cormorant Garamond", serif;
  font-size: 24px; font-weight: 500;
}
.ledger__desc { color: var(--ink-2); font-size: 15px; }
.ledger__meta {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- voices ---- */
.voices {
  background: var(--walnut);
  color: var(--paper);
  text-align: center;
  padding: clamp(56px, 9vw, 110px) clamp(20px, 5vw, 64px);
}
.voices .eyebrow { color: #d8c0a8; }
.voices .dot { background: var(--sage); box-shadow: 0 0 0 4px rgba(156, 175, 136, 0.25); }
.quote { margin: 0 auto; max-width: 760px; }
.quote blockquote {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 4.4vw, 42px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  transition: opacity 0.4s ease;
}
.quote figcaption {
  margin-top: 22px;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #cbb79f;
  transition: opacity 0.4s ease;
}
.quote__dots { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.qdot {
  width: 9px; height: 9px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(251, 249, 245, 0.5);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.qdot:hover { transform: scale(1.2); }
.qdot.is-active { background: var(--sage); border-color: var(--sage); }
.qdot:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

/* ---- consult ---- */
.consult {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 72px);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 90px) clamp(20px, 5vw, 64px);
  align-items: start;
}
.consult__lede { color: var(--ink-2); font-size: 16px; max-width: 42ch; }
.consult__list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.consult__list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  color: var(--ink);
}
.consult__list li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 10px; height: 1px;
  background: var(--clay);
}
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 20px 50px -34px rgba(44, 38, 32, 0.4);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 13px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: #b3aa9d; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(176, 137, 104, 0.16);
}
.field.has-error input, .field.has-error select {
  border-color: #b4553f;
  box-shadow: 0 0 0 3px rgba(180, 85, 63, 0.14);
}
.err {
  display: block;
  min-height: 15px;
  margin-top: 6px;
  font-size: 12px;
  color: #a24632;
}
.form__note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* ---- footer ---- */
.foot {
  border-top: 1px solid var(--line);
  text-align: center;
  padding: 50px 20px;
}
.foot__brand {
  font-family: "Cormorant Garamond", serif;
  font-size: 30px; font-weight: 600;
}
.foot__brand em { color: var(--clay); font-style: italic; }
.foot__addr { margin: 12px 0 6px; color: var(--ink-2); font-size: 14px; }
.foot__fine { margin: 0; color: var(--muted); font-size: 12px; }

/* ---- toast ---- */
.toast {
  position: fixed;
  left: 50%; bottom: 30px;
  transform: translate(-50%, 24px);
  background: var(--ink);
  color: var(--paper);
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 80;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---- reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero__plate { order: -1; }
  .plate--hero { aspect-ratio: 16 / 10; }
  .consult { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .ledger__row { grid-template-columns: 44px 1fr; grid-template-areas: "no title" ". desc" ". meta"; gap: 6px 18px; }
  .ledger__no { grid-area: no; }
  .ledger__title { grid-area: title; }
  .ledger__desc { grid-area: desc; }
  .ledger__meta { grid-area: meta; margin-top: 6px; }
}

@media (max-width: 520px) {
  .nav { gap: 14px; }
  .nav a:not(.nav__cta) { display: none; }
  .site { padding: 14px 20px; }
  .hero { padding: 34px 20px 48px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .stats { flex-wrap: wrap; gap: 20px; }
  .stats dd { font-size: 32px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .grid { grid-template-columns: 1fr; }
  .filters { width: 100%; }
  .voices { padding: 48px 20px; }
  .toast { left: 16px; right: 16px; bottom: 16px; transform: translateY(24px); text-align: center; }
  .toast.is-show { transform: translateY(0); }
}

(function () {
  "use strict";

  /* ---------- toast helper ---------- */
  var toastEl = document.getElementById("toast");
  var toastTimer;
  function toast(msg) {
    if (!toastEl) return;
    toastEl.textContent = msg;
    toastEl.classList.add("is-show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("is-show");
    }, 3200);
  }

  /* ---------- rotating hero statements ---------- */
  var statements = [
    "We design residences that hold light gently and age with grace.",
    "A small atelier, working slowly, on a handful of commissions a year.",
    "Materials chosen for how they will feel in twenty years, not two.",
    "Every room begins with a study of the way the sun crosses it.",
  ];
  var stEl = document.getElementById("statement");
  var stIndex = 0;
  if (stEl) {
    setInterval(function () {
      stIndex = (stIndex + 1) % statements.length;
      stEl.style.opacity = "0";
      setTimeout(function () {
        stEl.textContent = statements[stIndex];
        stEl.style.opacity = "1";
      }, 400);
    }, 4600);
  }

  /* ---------- portfolio filter ---------- */
  var chips = Array.prototype.slice.call(document.querySelectorAll(".chip"));
  var cards = Array.prototype.slice.call(document.querySelectorAll(".card"));
  var countEl = document.getElementById("count");
  var emptyEl = document.getElementById("empty");

  function applyFilter(cat) {
    var visible = 0;
    cards.forEach(function (card, i) {
      var match = cat === "all" || card.getAttribute("data-cat") === cat;
      if (match) {
        card.classList.remove("is-hidden");
        card.classList.add("is-dim");
        visible++;
        // stagger the fade-in
        setTimeout(function () {
          card.classList.remove("is-dim");
        }, 40 + i * 45);
      } else {
        card.classList.add("is-hidden");
      }
    });
    if (countEl) countEl.textContent = String(visible);
    if (emptyEl) emptyEl.hidden = visible !== 0;
  }

  chips.forEach(function (chip) {
    chip.addEventListener("click", function () {
      chips.forEach(function (c) {
        c.classList.remove("is-active");
        c.setAttribute("aria-pressed", "false");
      });
      chip.classList.add("is-active");
      chip.setAttribute("aria-pressed", "true");
      applyFilter(chip.getAttribute("data-filter"));
    });
  });

  /* open a project (demo behaviour) */
  cards.forEach(function (card) {
    function open() {
      var title = card.querySelector(".card__title");
      toast("Opening " + (title ? title.textContent : "project") + " — case study coming soon.");
    }
    card.addEventListener("click", open);
    card.addEventListener("keydown", function (e) {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        open();
      }
    });
  });

  /* ---------- testimonials ---------- */
  var quotes = [
    {
      text: "“They read the house before they touched it. What they returned to us feels less designed than remembered.”",
      by: "— Eleanor Vance, Halden House",
    },
    {
      text: "“Restraint is rare in this trade. Maren & Ashford knew exactly what to leave alone.”",
      by: "— Tomas Revell, The Ottoline",
    },
    {
      text: "“Four cabins, one language of walnut and linen. Guests ask who made it, every single time.”",
      by: "— Captain I. Serra, Sirocco 44m",
    },
  ];
  var qText = document.getElementById("quote");
  var qBy = document.getElementById("quote-by");
  var qdots = Array.prototype.slice.call(document.querySelectorAll(".qdot"));
  var qIndex = 0;
  var qTimer;

  function showQuote(i) {
    qIndex = (i + quotes.length) % quotes.length;
    if (qText) qText.style.opacity = "0";
    if (qBy) qBy.style.opacity = "0";
    setTimeout(function () {
      if (qText) { qText.textContent = quotes[qIndex].text; qText.style.opacity = "1"; }
      if (qBy) { qBy.textContent = quotes[qIndex].by; qBy.style.opacity = "1"; }
    }, 380);
    qdots.forEach(function (d, di) {
      d.classList.toggle("is-active", di === qIndex);
      d.setAttribute("aria-selected", di === qIndex ? "true" : "false");
    });
  }
  function startQuotes() {
    clearInterval(qTimer);
    qTimer = setInterval(function () { showQuote(qIndex + 1); }, 5200);
  }
  qdots.forEach(function (d, i) {
    d.addEventListener("click", function () { showQuote(i); startQuotes(); });
  });
  if (qdots.length) startQuotes();

  /* ---------- form validation ---------- */
  var form = document.getElementById("form");
  function setError(name, msg) {
    var field = form.querySelector("#" + name);
    var wrap = field ? field.closest(".field") : null;
    var err = form.querySelector('.err[data-for="' + name + '"]');
    if (wrap) wrap.classList.toggle("has-error", !!msg);
    if (err) err.textContent = msg || "";
  }
  if (form) {
    form.addEventListener("submit", function (e) {
      e.preventDefault();
      var ok = true;
      var name = form.name.value.trim();
      var email = form.email.value.trim();
      var ptype = form.ptype.value;

      if (!name) { setError("name", "Please tell us your name."); ok = false; }
      else setError("name", "");

      var reEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!email) { setError("email", "An email is required."); ok = false; }
      else if (!reEmail.test(email)) { setError("email", "That email doesn't look right."); ok = false; }
      else setError("email", "");

      if (!ptype) { setError("ptype", "Choose a project type."); ok = false; }
      else setError("ptype", "");

      if (!ok) {
        var firstErr = form.querySelector(".has-error input, .has-error select");
        if (firstErr) firstErr.focus();
        return;
      }
      form.reset();
      toast("Thank you, " + name.split(" ")[0] + ". We'll be in touch within two working days.");
    });

    ["name", "email", "ptype"].forEach(function (n) {
      var el = form.querySelector("#" + n);
      if (el) el.addEventListener("input", function () { setError(n, ""); });
      if (el && el.tagName === "SELECT") el.addEventListener("change", function () { setError(n, ""); });
    });
  }

  /* ---------- scroll reveal ---------- */
  var reveals = Array.prototype.slice.call(document.querySelectorAll("[data-reveal]"));
  if ("IntersectionObserver" in window) {
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (en.isIntersecting) {
          en.target.classList.add("is-in");
          io.unobserve(en.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    reveals.forEach(function (r) { io.observe(r); });
  } else {
    reveals.forEach(function (r) { r.classList.add("is-in"); });
  }
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Maren &amp; Ashford — Bespoke Interiors</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip" href="#work">Skip to work</a>

  <header class="site" data-reveal>
    <a class="brand" href="#top" aria-label="Maren and Ashford, home">
      <span class="brand__mark" aria-hidden="true">M&amp;A</span>
      <span class="brand__name">Maren <em>&amp;</em> Ashford</span>
    </a>
    <nav class="nav" aria-label="Primary">
      <a href="#work">Work</a>
      <a href="#services">Atelier</a>
      <a href="#voices">Voices</a>
      <a href="#consult" class="nav__cta">Enquire</a>
    </nav>
  </header>

  <main id="top">
    <!-- HERO -->
    <section class="hero" id="hero">
      <div class="hero__copy" data-reveal>
        <p class="eyebrow"><span class="dot" aria-hidden="true"></span> Bespoke interiors · Est. 2004</p>
        <h1 class="hero__title">Rooms composed<br />like a quiet<br /><em>correspondence.</em></h1>
        <p class="hero__lede" id="statement" aria-live="polite">We design residences that hold light gently and age with grace.</p>
        <div class="hero__actions">
          <a href="#consult" class="btn btn--solid">Request a private consultation</a>
          <a href="#work" class="btn btn--ghost">View selected work</a>
        </div>
        <dl class="stats">
          <div><dt>Commissions</dt><dd>140<span>+</span></dd></div>
          <div><dt>Countries</dt><dd>19</dd></div>
          <div><dt>Awards</dt><dd>31</dd></div>
        </dl>
      </div>
      <div class="hero__plate" data-reveal aria-hidden="true">
        <div class="plate plate--hero"></div>
        <figure class="plate__caption">
          <span class="tag">Signature · 2025</span>
          Halden House, Cotswolds
        </figure>
      </div>
    </section>

    <!-- WORK -->
    <section class="work" id="work">
      <div class="section-head" data-reveal>
        <div>
          <p class="eyebrow"><span class="dot" aria-hidden="true"></span> Selected work</p>
          <h2 class="section-title">A curated portfolio</h2>
        </div>
        <div class="filters" role="group" aria-label="Filter projects by discipline">
          <button class="chip is-active" data-filter="all" aria-pressed="true">All <span class="chip__n" id="count">6</span></button>
          <button class="chip" data-filter="residential" aria-pressed="false">Residential</button>
          <button class="chip" data-filter="hospitality" aria-pressed="false">Hospitality</button>
          <button class="chip" data-filter="yacht" aria-pressed="false">Yacht</button>
          <button class="chip" data-filter="gallery" aria-pressed="false">Gallery</button>
        </div>
      </div>

      <div class="grid" id="grid">
        <article class="card" data-cat="residential" tabindex="0">
          <div class="card__cover c1"><span class="card__badge">Residential</span></div>
          <div class="card__body">
            <h3 class="card__title">Halden House</h3>
            <p class="card__meta">Full renovation · Cotswolds, UK · 2025</p>
          </div>
        </article>
        <article class="card" data-cat="hospitality" tabindex="0">
          <div class="card__cover c2"><span class="card__badge">Hospitality</span></div>
          <div class="card__body">
            <h3 class="card__title">The Ottoline</h3>
            <p class="card__meta">Boutique hotel · Lisbon, PT · 2024</p>
          </div>
        </article>
        <article class="card" data-cat="yacht" tabindex="0">
          <div class="card__cover c3"><span class="card__badge">Yacht</span></div>
          <div class="card__body">
            <h3 class="card__title">Sirocco 44m</h3>
            <p class="card__meta">Interior refit · Monaco · 2025</p>
          </div>
        </article>
        <article class="card" data-cat="gallery" tabindex="0">
          <div class="card__cover c4"><span class="card__badge">Gallery</span></div>
          <div class="card__body">
            <h3 class="card__title">Aperture Room</h3>
            <p class="card__meta">Private collection · New York, US · 2023</p>
          </div>
        </article>
        <article class="card" data-cat="residential" tabindex="0">
          <div class="card__cover c5"><span class="card__badge">Residential</span></div>
          <div class="card__body">
            <h3 class="card__title">Fern &amp; Slate</h3>
            <p class="card__meta">New build · Kyoto, JP · 2024</p>
          </div>
        </article>
        <article class="card" data-cat="hospitality" tabindex="0">
          <div class="card__cover c6"><span class="card__badge">Hospitality</span></div>
          <div class="card__body">
            <h3 class="card__title">Maison Verre</h3>
            <p class="card__meta">Restaurant · Paris, FR · 2025</p>
          </div>
        </article>
      </div>
      <p class="empty" id="empty" hidden>No projects in this discipline yet.</p>
    </section>

    <!-- SERVICES -->
    <section class="services" id="services">
      <div class="section-head" data-reveal>
        <div>
          <p class="eyebrow"><span class="dot" aria-hidden="true"></span> The atelier</p>
          <h2 class="section-title">Disciplines, without shortcuts</h2>
        </div>
        <p class="services__lede">A small studio by design. Every commission is led personally, from the first sightline study to the final steaming of the drapes.</p>
      </div>
      <ul class="ledger">
        <li class="ledger__row">
          <span class="ledger__no">01</span>
          <h3 class="ledger__title">Full interior architecture</h3>
          <p class="ledger__desc">Spatial planning, joinery and material palettes drawn to the millimetre.</p>
          <span class="ledger__meta">From 20 weeks</span>
        </li>
        <li class="ledger__row">
          <span class="ledger__no">02</span>
          <h3 class="ledger__title">Furniture &amp; commissions</h3>
          <p class="ledger__desc">Bespoke pieces made with named workshops in England and Italy.</p>
          <span class="ledger__meta">Made to order</span>
        </li>
        <li class="ledger__row">
          <span class="ledger__no">03</span>
          <h3 class="ledger__title">Art &amp; styling direction</h3>
          <p class="ledger__desc">Curation, lighting scenes and the final layer of quiet objects.</p>
          <span class="ledger__meta">Ongoing</span>
        </li>
      </ul>
    </section>

    <!-- VOICES -->
    <section class="voices" id="voices" data-reveal>
      <p class="eyebrow center"><span class="dot" aria-hidden="true"></span> Client voices</p>
      <figure class="quote">
        <blockquote id="quote">&ldquo;They read the house before they touched it. What they returned to us feels less designed than remembered.&rdquo;</blockquote>
        <figcaption id="quote-by">— Eleanor Vance, Halden House</figcaption>
      </figure>
      <div class="quote__dots" role="tablist" aria-label="Testimonials">
        <button class="qdot is-active" role="tab" aria-selected="true" aria-label="Testimonial 1"></button>
        <button class="qdot" role="tab" aria-selected="false" aria-label="Testimonial 2"></button>
        <button class="qdot" role="tab" aria-selected="false" aria-label="Testimonial 3"></button>
      </div>
    </section>

    <!-- CONSULT -->
    <section class="consult" id="consult">
      <div class="consult__intro" data-reveal>
        <p class="eyebrow"><span class="dot" aria-hidden="true"></span> Private consultation</p>
        <h2 class="section-title">Begin a conversation</h2>
        <p class="consult__lede">We accept a limited number of commissions each year. Tell us a little about the project and we will reply within two working days.</p>
        <ul class="consult__list">
          <li>Confidential and unhurried</li>
          <li>No obligation to proceed</li>
          <li>Led by a principal designer</li>
        </ul>
      </div>
      <form class="form" id="form" novalidate data-reveal>
        <div class="field">
          <label for="name">Full name</label>
          <input id="name" name="name" type="text" autocomplete="name" required placeholder="Eleanor Vance" />
          <span class="err" data-for="name"></span>
        </div>
        <div class="field">
          <label for="email">Email</label>
          <input id="email" name="email" type="email" autocomplete="email" required placeholder="[email protected]" />
          <span class="err" data-for="email"></span>
        </div>
        <div class="field">
          <label for="ptype">Project type</label>
          <select id="ptype" name="ptype" required>
            <option value="" selected disabled>Select one</option>
            <option>Residential</option>
            <option>Hospitality</option>
            <option>Yacht</option>
            <option>Gallery / Art space</option>
          </select>
          <span class="err" data-for="ptype"></span>
        </div>
        <div class="field">
          <label for="msg">A few lines about the project</label>
          <textarea id="msg" name="msg" rows="4" placeholder="Location, scope and the feeling you are after."></textarea>
        </div>
        <button type="submit" class="btn btn--solid btn--full">Send enquiry</button>
        <p class="form__note">By enquiring you agree to be contacted about your project.</p>
      </form>
    </section>
  </main>

  <footer class="foot">
    <div class="foot__brand">Maren <em>&amp;</em> Ashford</div>
    <p class="foot__addr">17 Cadogan Mews, London · [email protected]</p>
    <p class="foot__fine">© 2026 Maren &amp; Ashford. A fictional atelier for demonstration.</p>
  </footer>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <script src="script.js"></script>
</body>
</html>