/* ------------------------------------------------------------------
   VICTOR KULLBERG — shop, collections, homepage v2, history
   Loaded after style.css on site pages only. coming-soon.html does
   not load this file, so nothing here can change the live holding page.
------------------------------------------------------------------- */

:root {
  --studio-hi: #39383c;
  --studio-mid: #1b1b1d;
  --studio-lo: #0d0d0e;
  --panel: #0b0b0c;
}

body.no-scroll { overflow: hidden; }

.btn--solid {
  background: var(--bone);
  color: var(--black);
  border-color: var(--bone);
}
.btn--solid:hover { background: transparent; color: var(--bone); }
.btn--solid[disabled] {
  background: transparent;
  color: var(--bone-45);
  border-color: var(--hairline);
  cursor: not-allowed;
}
.btn--block { display: block; width: 100%; text-align: center; cursor: pointer; font-family: inherit; }

/* ---------- header: collections menu + bag ---------- */

.nav-drop { position: relative; }

.nav-drop > .nav-link { cursor: pointer; }

.nav-drop__panel {
  position: absolute;
  top: calc(100% + 1.4rem);
  left: -1.6rem;
  min-width: 15rem;
  padding: 1.6rem;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hairline);
  display: grid;
  gap: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0.4s;
}

.nav-drop::after { /* hover bridge */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 1.6rem;
}

.nav-drop:hover .nav-drop__panel,
.nav-drop:focus-within .nav-drop__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-drop__panel a {
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--bone-70);
  transition: color 0.3s;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav-drop__panel a:hover { color: var(--bone); }
.nav-drop__panel a small {
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  align-self: center;
}
.nav-drop__panel .nav-drop__all {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}

.bag-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  color: var(--bone-70);
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.4em 0;
  transition: color 0.4s;
}
.bag-btn:hover { color: var(--bone); }
.bag-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.1; }
.bag-btn__count {
  position: absolute;
  top: -0.35rem;
  left: 0.75rem;
  min-width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--bone);
  color: var(--black);
  font-size: 0.55rem;
  letter-spacing: 0;
  display: grid;
  place-items: center;
  font-weight: 500;
}
.bag-btn__count.is-empty { display: none; }

/* ---------- studio frame (product image backdrop) ---------- */

.studio {
  background:
    radial-gradient(ellipse 70% 60% at 50% 44%, var(--studio-hi) 0%, var(--studio-mid) 58%, var(--studio-lo) 100%);
  position: relative;
  overflow: hidden;
}
.studio::after { /* floor shadow */
  content: "";
  position: absolute;
  left: 22%; right: 22%; bottom: 5%;
  height: 7%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
  pointer-events: none;
}
.studio img { position: relative; z-index: 1; }

/* ---------- shop cards + grids ---------- */

.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 2.4vw, 2.4rem) clamp(1rem, 1.6vw, 1.6rem);
}
.shop-grid--3 { grid-template-columns: repeat(3, 1fr); }

.shop-card { display: block; }

.shop-card__frame {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
}
.shop-card__frame img {
  width: 82%;
  height: 92%;
  object-fit: contain;
  transition: transform 1.2s var(--ease-out);
}
.shop-card:hover .shop-card__frame img { transform: scale(1.045); }

.shop-card__meta { padding-top: 1.3rem; }
.shop-card__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.shop-card__line { margin-top: 0.35rem; font-size: 0.8rem; color: var(--bone-45); }
.shop-card__price {
  margin-top: 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- watches.html: filter tabs + ranges ---------- */

.filters {
  position: sticky;
  top: 76px;
  z-index: 20;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.filters__row {
  display: flex;
  gap: 2.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 1.25rem 0;
}
.filters__row::-webkit-scrollbar { display: none; }
.filter {
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone-45);
  cursor: pointer;
  white-space: nowrap;
  padding-bottom: 0.4em;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.filter:hover { color: var(--bone); }
.filter.is-active { color: var(--bone); border-bottom-color: var(--accent); }

.shop-range { padding-block: clamp(4rem, 9vh, 7rem) 0; }
.shop-range:last-of-type { padding-bottom: clamp(5rem, 11vh, 9rem); }
.shop-range__head {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 2rem 4rem;
  align-items: end;
  margin-bottom: clamp(2.4rem, 5vh, 3.6rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--hairline);
}
.shop-range__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 1;
}
.shop-range__name small {
  display: block;
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}
.shop-range__intro { color: var(--bone-70); line-height: 1.95; max-width: 38rem; }
.shop-range__intro a { display: inline-block; margin-top: 1.4rem; }

/* ---------- collection page hero (split) ---------- */

.col-hero {
  min-height: min(92vh, 900px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--hairline);
}
.col-hero__copy {
  padding: calc(76px + clamp(3rem, 8vh, 6rem)) var(--gutter) clamp(3rem, 8vh, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 44rem;
  margin-left: auto;
}
.col-hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.col-hero__line {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--accent);
}
.col-hero__text { margin-top: 2rem; color: var(--bone-70); line-height: 2; max-width: 32rem; }
.col-hero__actions { margin-top: 2.6rem; display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.col-hero__media { position: relative; overflow: hidden; display: grid; place-items: center; }
.col-hero__media > img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.col-hero__media > img.cut { width: min(70%, 460px); height: auto; padding-top: 76px; }

.col-specs {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem 5rem;
  align-items: start;
}
.col-specs .specs { margin: 0; }

/* ---------- product page v2 ---------- */

.crumb {
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone-45);
  margin-bottom: 2rem;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.crumb a:hover { color: var(--bone); }
.crumb span { color: var(--hairline); }

.pdp__stage {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}
.pdp__stage img { width: 74%; height: 90%; object-fit: contain; }

.product__name em {
  display: block;
  font-style: italic;
  color: var(--bone-70);
  font-size: 0.62em;
  margin-top: 0.3rem;
}

.pdp__price {
  margin-top: 1.8rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}

.swatches { margin-top: 2.4rem; }
.swatches__label {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone-45);
  margin-bottom: 1rem;
}
.swatches__label span { color: var(--bone); }
.swatches__row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.swatch {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  outline: 1px solid transparent;
  outline-offset: 4px;
  transition: outline-color 0.3s, transform 0.3s;
}
.swatch:hover { transform: scale(1.08); }
.swatch.is-active { outline-color: var(--bone); }

.pdp__buy { margin-top: 2.4rem; display: grid; gap: 1rem; }
.pdp__assure {
  margin-top: 1.6rem;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--bone-45);
}
.pdp__assure li::before { content: "—"; color: var(--accent); margin-right: 0.8rem; }

.more { padding-block: clamp(5rem, 11vh, 8rem); border-top: 1px solid var(--hairline); }

/* ---------- bag drawer ---------- */

.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--panel);
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.6s var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 1.8rem;
  border-bottom: 1px solid var(--hairline);
}
.drawer__title { font-size: 0.65rem; letter-spacing: 0.32em; text-transform: uppercase; }
.drawer__title span { color: var(--accent); }
.drawer__close {
  background: none; border: 0; color: var(--bone-70);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 0.2rem;
}
.drawer__close:hover { color: var(--bone); }
.drawer__body { flex: 1; overflow-y: auto; padding: 0 1.8rem; }
.drawer__foot { padding: 1.6rem 1.8rem 2rem; border-top: 1px solid var(--hairline); }
.drawer__foot:empty { display: none; }

.bag-lines { list-style: none; }
.bag-line {
  display: grid;
  grid-template-columns: 5.2rem 1fr auto;
  gap: 1.1rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--hairline);
}
.bag-line__img {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 44%, var(--studio-hi), var(--studio-lo));
}
.bag-line__img img { width: 84%; height: 92%; object-fit: contain; }
.bag-line__name { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.02em; }
.bag-line__meta { font-size: 0.76rem; color: var(--bone-45); margin-top: 0.2rem; line-height: 1.5; }
.bag-line__ref { letter-spacing: 0.08em; }
.bag-line__row { display: flex; align-items: center; gap: 1.2rem; margin-top: 0.9rem; }
.bag-line__price {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); text-align: right; max-width: 7.5rem; line-height: 1.6;
}
.bag-line__remove {
  background: none; border: 0; color: var(--bone-45); cursor: pointer;
  font: inherit; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
}
.bag-line__remove:hover { color: var(--bone); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--hairline); }
.qty button {
  background: none; border: 0; color: var(--bone-70); cursor: pointer;
  width: 1.9rem; height: 1.9rem; font-size: 0.95rem;
}
.qty button:hover { color: var(--bone); }
.qty span { min-width: 1.4rem; text-align: center; font-size: 0.8rem; }

.bag-sum__row {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.85rem; padding: 0.35rem 0;
}
.bag-sum__row span:last-child { font-family: var(--serif); font-size: 1.05rem; }
.bag-sum__row--muted { color: var(--bone-45); }
.bag-sum__row--muted span:last-child { font-family: var(--sans); font-size: 0.8rem; }
.bag-sum__checkout { margin-top: 1.4rem; width: 100%; cursor: pointer; font-family: inherit; }
.bag-sum__note { margin-top: 1rem; font-size: 0.76rem; color: var(--bone-45); line-height: 1.7; }
.bag-sum__note a { color: var(--bone-70); border-bottom: 1px solid var(--hairline); }
.bag-sum__view { margin-top: 1.4rem; }

.bag-empty { padding: 3.5rem 0; display: grid; gap: 1.6rem; justify-items: start; color: var(--bone-70); }
.bag-empty--page { justify-items: center; text-align: center; padding: 4rem 0 2rem; }

/* bag page */
.bag-page { padding: calc(76px + clamp(3rem, 8vh, 6rem)) 0 clamp(5rem, 11vh, 9rem); }
.bag-page__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1.05;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.bag-page__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.bag-lines--page { border-top: 1px solid var(--hairline); }
.bag-lines--page .bag-line { grid-template-columns: 8rem 1fr auto; padding: 2rem 0; }
.bag-sum { position: sticky; top: calc(76px + 2rem); padding: 2rem; border: 1px solid var(--hairline); }
.bag-assure {
  list-style: none; margin-top: 1.8rem; padding-top: 1.4rem;
  border-top: 1px solid var(--hairline); display: grid; gap: 0.6rem;
  font-size: 0.78rem; color: var(--bone-45);
}
.bag-assure a { color: var(--bone-70); }

/* ---------- homepage v2 ---------- */

.intro {
  text-align: center;
  padding-block: clamp(6rem, 15vh, 11rem);
}
.intro__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.2;
  max-width: 20ch;
  margin-inline: auto;
}
.intro__text { margin: 2.2rem auto 0; max-width: 36rem; color: var(--bone-70); line-height: 2; }

/* the three collections — tall tiles */
.trio { padding-bottom: clamp(5rem, 11vh, 9rem); }
.trio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.6rem); }
.trio__tile { display: block; position: relative; }
.trio__frame { aspect-ratio: 3 / 4.2; display: grid; place-items: center; }
.trio__frame img { width: 74%; height: 86%; object-fit: contain; transition: transform 1.4s var(--ease-out); }
.trio__tile:hover .trio__frame img { transform: scale(1.05) translateY(-1%); }
.trio__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1.5rem; }
.trio__name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1; }
.trio__line { margin-top: 0.6rem; font-size: 0.85rem; color: var(--bone-45); }
.trio__cta {
  font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap; transition: color 0.3s;
}
.trio__tile:hover .trio__cta { color: var(--bone); }

/* full-bleed feature with photograph */
.feature { position: relative; min-height: min(100vh, 980px); display: grid; align-items: end; overflow: hidden; }
.feature__bg { position: absolute; inset: -6% 0; background-size: cover; background-position: center; }
.feature__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.1) 100%),
              linear-gradient(0deg, rgba(0,0,0,0.6), transparent 45%);
}
.feature__copy { position: relative; z-index: 1; padding-block: clamp(5rem, 12vh, 9rem); max-width: 34rem; }
.feature__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; }
.feature__text { margin-top: 1.8rem; color: var(--bone-70); line-height: 2; }
.feature__actions { margin-top: 2.6rem; display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; }

/* selection carousel */
.rail { padding-block: clamp(5rem, 12vh, 9rem); border-top: 1px solid var(--hairline); }
.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 22%);
  gap: clamp(1rem, 1.6vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.rail__track > * { scroll-snap-align: start; }
.rail__nav { display: flex; gap: 0.6rem; }
.rail__nav button {
  width: 2.8rem; height: 2.8rem; border: 1px solid var(--hairline);
  background: none; color: var(--bone-70); cursor: pointer; font-size: 1rem;
  transition: background 0.3s, color 0.3s;
}
.rail__nav button:hover { background: var(--bone); color: var(--black); }

/* split: history teaser */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: min(86vh, 860px); border-top: 1px solid var(--hairline); }
.split__media { position: relative; overflow: hidden; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(4rem, 9vh, 7rem) clamp(2rem, 6vw, 6rem);
}
.split__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1.05; }
.split__text { margin-top: 1.8rem; color: var(--bone-70); line-height: 2; max-width: 30rem; }
.split__facts { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(3, auto); gap: 2rem; justify-content: start; }
.split__facts dt { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 300; line-height: 1; }
.split__facts dd { margin-top: 0.5rem; font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); max-width: 9rem; line-height: 1.6; }
.split__copy .link-line { margin-top: 3rem; align-self: flex-start; }

/* services row */
.services { padding-block: clamp(5rem, 11vh, 8rem); border-top: 1px solid var(--hairline); }
.services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }
.service { padding-top: 1.6rem; border-top: 1px solid var(--hairline); }
.service h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.02em; }
.service p { margin-top: 0.8rem; font-size: 0.86rem; color: var(--bone-45); line-height: 1.85; }
.service a { display: inline-block; margin-top: 1.2rem; }

/* ---------- history page ---------- */

.hist-hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.hist-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 70% 40%, rgba(143, 138, 150, 0.14), transparent 70%),
    linear-gradient(180deg, #050506, #000);
}
.hist-hero__mark {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(12rem, 30vw, 26rem);
  opacity: 0.07;
}
.hist-hero .container { position: relative; z-index: 1; padding-block: calc(76px + 4rem) clamp(4rem, 10vh, 7rem); }
.hist-hero__title { font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 7.4vw, 6.4rem); line-height: 0.98; }
.hist-hero__dates { margin-top: 1.4rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--accent); }
.hist-hero__lede { margin-top: 2rem; max-width: 34rem; color: var(--bone-70); line-height: 2; }

.chapter { padding-block: clamp(5rem, 12vh, 9rem); border-bottom: 1px solid var(--hairline); }
.chapter__grid { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 2.5rem clamp(3rem, 7vw, 7rem); }
.chapter__year { font-family: var(--serif); font-weight: 300; font-size: clamp(3.4rem, 7vw, 6rem); line-height: 0.9; color: var(--bone-45); }
.chapter__place { margin-top: 1rem; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); }
.chapter__title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.12; }
.chapter__text { margin-top: 1.6rem; color: var(--bone-70); line-height: 2; max-width: 40rem; }
.chapter__text + .chapter__text { margin-top: 1.1rem; }

.figures { padding-block: clamp(5rem, 12vh, 8rem); border-bottom: 1px solid var(--hairline); }
.figures__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.figure dt { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 4.6vw, 3.8rem); line-height: 1; }
.figure dd { margin-top: 0.9rem; font-size: 0.82rem; color: var(--bone-45); line-height: 1.7; max-width: 15rem; }

.sources { padding-block: clamp(3.5rem, 8vh, 5rem); }
.sources p, .sources li { font-size: 0.78rem; color: var(--bone-45); line-height: 1.9; }
.sources ul { list-style: none; margin-top: 0.8rem; }
.sources a { border-bottom: 1px solid var(--hairline); }
.sources a:hover { color: var(--bone); }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .services__grid { grid-template-columns: 1fr 1fr; }
  .figures__grid { grid-template-columns: 1fr 1fr; }
  .rail__track { grid-auto-columns: minmax(15rem, 30%); }
}

@media (max-width: 960px) {
  .shop-grid, .shop-grid--3 { grid-template-columns: 1fr 1fr; }
  .shop-range__head, .col-specs, .chapter__grid { grid-template-columns: 1fr; }
  .col-hero { grid-template-columns: 1fr; }
  .col-hero__copy { margin: 0; max-width: none; order: 1; padding-top: 3rem; }
  .col-hero__media { min-height: 70vh; order: 0; }
  .trio__grid { grid-template-columns: 1fr; }
  .trio__frame { aspect-ratio: 4 / 4; }
  .split { grid-template-columns: 1fr; }
  .split__media { min-height: 60vh; }
  .bag-page__grid { grid-template-columns: 1fr; }
  .bag-sum { position: static; }
  .rail__track { grid-auto-columns: minmax(14rem, 44%); }
}

@media (max-width: 680px) {
  .bag-btn__label { display: none; }
  .header__right { gap: 1.1rem; }
  .filters { top: 68px; }
  .services__grid { grid-template-columns: 1fr; }
  .split__facts { grid-template-columns: 1fr 1fr; }
  .bag-lines--page .bag-line { grid-template-columns: 5.2rem 1fr; }
  .bag-lines--page .bag-line__price { grid-column: 2; text-align: left; }
  .rail__track { grid-auto-columns: 74%; }
  .feature__scrim { background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.2) 100%); }
  .shop-grid, .shop-grid--3 { gap: 2rem 0.8rem; }
  .shop-card__name { font-size: 1.1rem; }
}

/* fixes */
.header__left { align-items: center; }
.specs dd, .bag-line__ref, .pdp__price, .chapter__year, .figure dt, .split__facts dt, .bag-sum__row { font-variant-numeric: lining-nums; }

/* ==================================================================
   LIGHT EDITION (v2)
   style.css is shared with the dark coming-soon page, so instead of
   editing it we remap its colour tokens here: --black becomes the
   paper ground and --bone becomes ink. Zones that sit on photography
   or video (hero, features, footer, preloader) re-declare the dark
   values locally so their text stays light.
=================================================================== */

:root {
  --paper: #f4f3f0;
  --paper-2: #e9e8e4;
  --ink: #141416;

  --black: var(--paper);
  --near-black: var(--paper-2);
  --bone: var(--ink);
  --bone-70: rgba(20, 20, 22, 0.72);
  --bone-45: rgba(20, 20, 22, 0.52);
  --hairline: rgba(20, 20, 22, 0.12);
  --accent: #77727d;          /* heather, a step darker for contrast on paper */
  --panel: var(--paper);

  --studio-hi: #ffffff;
  --studio-mid: #f0efec;
  --studio-lo: #e4e3df;
  --header-h: 76px;
}

body { background: var(--paper); color: var(--ink); }
::selection { background: var(--ink); color: var(--paper); }

/* dark zones: same tokens, original values */
.hero, .feature, .footer, .preloader, .page-hero:has(.page-hero__bg),
body.has-hero .header:not(.is-solid):not(.is-open) {
  --black: #000000;
  --near-black: #060607;
  --bone: #f2efe8;
  --bone-70: rgba(242, 239, 232, 0.78);
  --bone-45: rgba(242, 239, 232, 0.5);
  --hairline: rgba(242, 239, 232, 0.2);
  --accent: #a9a4b0;
  color: var(--bone);
}
.footer { background: #0e0e10; }
.preloader { background: #000; }

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

/* ---------- header v2 ---------- */

.header { background: rgba(244, 243, 240, 0.94); border-bottom-color: var(--hairline); }
.header.is-solid {
  background: rgba(244, 243, 240, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}
body.has-hero .header:not(.is-solid):not(.is-open) {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38), transparent);
  border-bottom-color: transparent;
}
.header.is-open { background: var(--paper); border-bottom-color: var(--hairline); }

.header__left { gap: 2.2rem; align-items: center; }
.header__right { gap: 2rem; }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--bone);
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.5rem 0;
}
.menu-btn__icon { display: grid; gap: 5px; width: 20px; }
.menu-btn__icon span {
  display: block; height: 1px; background: currentColor;
  transition: transform 0.45s var(--ease-out);
}
.header.is-open .menu-btn__icon span:first-child { transform: translateY(3px) rotate(45deg); }
.header.is-open .menu-btn__icon span:last-child { transform: translateY(-3px) rotate(-45deg); }

.nav-link { color: var(--bone-70); }
.nav-link[aria-current] { color: var(--bone); }
.nav-link[aria-current]::after { transform: scaleX(1); }

/* dropdown panel */
.mega {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 30px 60px -30px rgba(20, 20, 22, 0.25);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.6s var(--ease-out), visibility 0.6s;
}
.header.is-open .mega { clip-path: inset(0 0 0 0); visibility: visible; }
.mega__inner {
  width: min(1360px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.4rem, 5vh, 3.6rem) clamp(2.8rem, 6vh, 4.2rem);
}
.mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.mega__col { display: grid; gap: 0.95rem; align-content: start; }
.mega__head {
  font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.5rem;
}
.mega__col a {
  font-family: var(--serif); font-size: 1.25rem; letter-spacing: 0.02em;
  color: var(--bone-70); transition: color 0.3s; line-height: 1.25;
}
.mega__col a:hover, .mega__col a[aria-current] { color: var(--bone); }
.mega__col--small a { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.mega__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mega__card { display: grid; gap: 0.35rem; }
.mega__frame { aspect-ratio: 4 / 5; display: grid; place-items: center; margin-bottom: 0.6rem; }
.mega__frame img { width: 70%; height: 88%; object-fit: contain; transition: transform 1s var(--ease-out); }
.mega__card:hover .mega__frame img { transform: scale(1.05); }
.mega__name { font-family: var(--serif); font-size: 1.3rem; }
.mega__meta { font-size: 0.76rem; color: var(--bone-45); }
.mega__scrim {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(20, 20, 22, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
  z-index: -1;
}
.header.is-open .mega__scrim { opacity: 1; visibility: visible; }

/* ---------- hero v2: video only, one quiet link ---------- */

.hero__scrim { background: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, transparent 35%, transparent 75%, rgba(0, 0, 0, 0.25) 100%); }
.hero__min {
  position: absolute;
  left: 0; right: 0; bottom: clamp(2.4rem, 7vh, 4.5rem);
  z-index: 3;
  display: flex;
  justify-content: center;
}
.hero__min-link {
  font-size: 0.64rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #f2efe8;
  padding-bottom: 0.7em;
  border-bottom: 1px solid rgba(242, 239, 232, 0.55);
  transition: border-color 0.4s;
}
.hero__min-link:hover { border-bottom-color: #f2efe8; }

/* ---------- surfaces on paper ---------- */

.studio {
  background: radial-gradient(ellipse 75% 65% at 50% 42%, var(--studio-hi) 0%, var(--studio-mid) 60%, var(--studio-lo) 100%);
}
.studio::after { display: none; }   /* shadows are baked into the images now */

.filters { background: rgba(244, 243, 240, 0.94); }
.drawer__scrim { background: rgba(20, 20, 22, 0.35); }
.drawer__panel { background: var(--paper); }
.bag-line__img { background: radial-gradient(ellipse at 50% 44%, #fff, var(--studio-lo)); }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid:hover { background: transparent; color: var(--ink); }
.btn--solid[disabled] { background: transparent; color: var(--bone-45); border-color: var(--hairline); }
.bag-btn__count { background: var(--ink); color: var(--paper); }
body.has-hero .header:not(.is-solid):not(.is-open) .bag-btn__count { background: #f2efe8; color: #000; }

.intro { padding-block: clamp(5rem, 12vh, 8.5rem) clamp(3rem, 7vh, 5rem); }
.trio { padding-bottom: clamp(5rem, 11vh, 8rem); }
.rail { background: #fff; }
.services { background: var(--paper-2); border-top: 0; }
.split { background: #fff; border-top: 0; }

.hist-hero__bg { background: linear-gradient(180deg, #fff, var(--paper)); }
.hist-hero__mark { opacity: 0.06; }
.figures { background: #fff; }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .mega__inner { grid-template-columns: 1fr; }
  .mega__cards { order: -1; }
}

@media (max-width: 680px) {
  :root { --header-h: 68px; }
  .nav-link--watches, .nav-link--appt, .menu-btn__label { display: none; }
  .header__inner { grid-template-columns: 1fr auto 1fr; }
  .header__mark { justify-self: center; }
  .mega__cols { grid-template-columns: 1fr; gap: 2.2rem; }
  .mega__cards { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; overflow-x: auto; }
  .mega__col a { font-size: 1.5rem; }
  .mega__col--small a { font-size: 0.9rem; }
}

/* studio shots are framed 3:4 with their own margin and shadow */
.shop-card__frame img, .trio__frame img, .mega__frame img, .pdp__stage img, .bag-line__img img,
.col-hero__media > img.cut { width: 100%; height: 100%; object-fit: contain; }
.trio__frame img { width: 88%; }
.pdp__stage img { width: 90%; }
.col-hero__media > img.cut { width: min(78%, 560px); height: auto; }

@media (max-width: 680px) {
  .header__left { display: flex; }
  .header__right { gap: 0; }
}

.feature { background: #000; }
.feature__bg { inset: -12% 0; }
.mega__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
.shop-range .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1101px) {
  .shop-grid[data-p-more] { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .shop-range .shop-grid { grid-template-columns: 1fr 1fr; }
}

/* ==================================================================
   TYPE v3 — Bodoni Moda (display) + Jost (text and labels)
   The wordmark keeps Cormorant so it still matches the logo artwork.
=================================================================== */

:root {
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --wordmark: "Cormorant Garamond", "Times New Roman", serif;
}

body { font-family: var(--sans); font-weight: 300; font-size: 15.5px; letter-spacing: 0.012em; }
.header__word, .preloader__word, .footer__word { font-family: var(--wordmark); }

h1, h2, h3, .section-title, .page-hero__title, .col-hero__title, .hist-hero__title,
.feature__title, .split__title, .intro__title, .chapter__title, .film__title,
.shop-range__name, .product__name, .bag-page__title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: balance;
  font-optical-sizing: auto;
}
.col-hero__title, .hist-hero__title, .film__title--xl { letter-spacing: -0.02em; }
.product__name em, .col-hero__line, .product__line, .hist-hero__dates, .split__title em { font-family: var(--serif); font-style: italic; }

.eyebrow, .nav-link, .menu-btn, .btn, .link-line, .filter, .mega__head, .crumb,
.shop-card__price, .trio__cta, .drawer__title, .chapter__place, .swatches__label,
.specs dt, .product__note, .hero__min-link, .bag-line__remove, .footer__head {
  font-family: var(--sans);
  font-weight: 400;
}
.eyebrow { letter-spacing: 0.38em; font-size: 0.66rem; }
.btn { letter-spacing: 0.3em; font-size: 0.66rem; }

.shop-card__name, .trio__name, .mega__name, .mega__col a, .bag-line__name, .specs dd,
.service h3, .figure dt, .split__facts dt, .chapter__year, .pdp__price, .bag-sum__row span:last-child {
  font-family: var(--serif);
  font-weight: 400;
}
.shop-card__name { font-size: 1.12rem; letter-spacing: 0.01em; }
.trio__name { font-size: clamp(1.6rem, 2.3vw, 2.1rem); }
.mega__col a { font-size: 1.12rem; }
.specs dd { font-size: 0.95rem; }
.chapter__year { font-style: italic; }

/* ---------- film (looping video sections) ---------- */

.film {
  position: relative;
  overflow: hidden;
  background: #000;
  display: grid;
  align-items: end;
  --black: #000; --bone: #f2efe8; --bone-70: rgba(242, 239, 232, 0.8);
  --bone-45: rgba(242, 239, 232, 0.55); --hairline: rgba(242, 239, 232, 0.25); --accent: #b2adb8;
  color: var(--bone);
}
.film--band { min-height: min(86vh, 860px); }
.film--hero { min-height: min(100vh, 980px); }
.film__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.film__shade {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.2) 48%, rgba(0,0,0,0.1) 100%);
}
.film__caption { position: relative; z-index: 1; padding-block: clamp(4.5rem, 12vh, 8rem); }
.film__title { font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.08; max-width: 18ch; }
.film__title--xl { font-size: clamp(3.4rem, 8vw, 7rem); line-height: 0.95; }
.film__lede { margin-top: 1.8rem; max-width: 34rem; color: var(--bone-70); line-height: 2; }
.film__caption .link-line { margin-top: 2.4rem; }

.reel { padding-block: clamp(5rem, 11vh, 8rem); }
.reel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.6rem); }
.reel__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #000; }
.reel__item figcaption { padding-top: 1.2rem; font-size: 0.86rem; color: var(--bone-45); line-height: 1.8; }
.reel__item figcaption span {
  display: block; font-family: var(--serif); font-size: 1.3rem; color: var(--bone); margin-bottom: 0.3rem;
}

/* ---------- history with imagery ---------- */

.hist-hero--image { min-height: min(96vh, 960px); background: #000; }
.hist-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(0.25) contrast(1.05); }
.hist-hero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.82), rgba(0,0,0,0.3) 55%, rgba(0,0,0,0.15)); }
.hist-hero--image {
  --bone: #f2efe8; --bone-70: rgba(242, 239, 232, 0.82); --accent: #c9c3cf; color: var(--bone);
}
.hist-credit {
  position: absolute; right: var(--gutter); bottom: 1.2rem; z-index: 1;
  font-size: 0.66rem; letter-spacing: 0.04em; color: rgba(242, 239, 232, 0.6);
}

.chapter--media .chapter__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
.chapter--flip .chapter__fig { order: 2; }
.chapter__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.chapter__fig--tall img { aspect-ratio: 4 / 5; }
.chapter__fig figcaption, .instrument__fig figcaption { margin-top: 0.9rem; font-size: 0.74rem; color: var(--bone-45); line-height: 1.6; }
.chapter__body .chapter__year { font-size: clamp(3rem, 6vw, 5rem); }
.chapter__body .chapter__place { margin-bottom: 1.8rem; }

.instrument { padding-block: clamp(5rem, 12vh, 8rem); background: #fff; border-bottom: 1px solid var(--hairline); }
.instrument__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.instrument__fig img { width: 100%; }
.figures__grid--stack { grid-template-columns: 1fr 1fr; gap: 2.4rem 2rem; }

.sources__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; }
.sources li { margin-top: 0.5rem; }

@media (max-width: 960px) {
  .reel__grid { grid-template-columns: 1fr; }
  .reel__frame { aspect-ratio: 16 / 10; }
  .chapter--media .chapter__grid, .instrument__grid, .sources__grid { grid-template-columns: 1fr; }
  .chapter--flip .chapter__fig { order: 0; }
  .hist-credit { left: var(--gutter); right: auto; }
}

/* keep captions legible over busy footage */
.film__shade, .hist-hero__shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 38%, rgba(0,0,0,0) 70%),
    linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%);
}
@media (max-width: 680px) {
  .film__shade, .hist-hero__shade { background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.15) 100%); }
}

/* no sideways scrolling, ever (the closed bag drawer sits off-screen) */
html, body { overflow-x: clip; }
.drawer { overflow: hidden; }

/* history: text-only chapter */
.chapter--text .chapter__grid { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }

/* ---------- drawings ---------- */

.atelier { padding-block: clamp(5rem, 11vh, 8rem); background: #fff; border-top: 1px solid var(--hairline); }
.atelier--full { background: var(--paper); }
.atelier__lede { margin-top: 1.4rem; max-width: 34rem; color: var(--bone-70); line-height: 1.9; }
.atelier__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.sketch__sheet {
  position: relative;
  aspect-ratio: 3 / 4;
  background:
    linear-gradient(var(--paper-2) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, var(--paper-2) 1px, transparent 1px) 0 0 / 24px 100%,
    #fbfaf7;
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sketch__ref {
  position: absolute; top: 1rem; left: 1.1rem;
  font-size: 0.56rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent);
}
.sketch__art { position: relative; height: 84%; aspect-ratio: var(--ar, 0.58); }
.sketch__art img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mark {
  position: absolute; transform: translate(-50%, -50%);
  width: 1.45rem; height: 1.45rem; border-radius: 50%;
  border: 1px solid var(--ink); background: rgba(251, 250, 247, 0.92);
  font-family: var(--sans); font-size: 0.62rem; color: var(--ink);
  display: grid; place-items: center; font-variant-numeric: lining-nums;
}
.sketch figcaption { padding-top: 1.2rem; }
.sketch figcaption > a { font-family: var(--serif); font-size: 1.35rem; }
.sketch__legend { margin-top: 0.8rem; padding-left: 1.2rem; display: grid; gap: 0.35rem; font-size: 0.82rem; color: var(--bone-70); }
.sketch__legend li::marker { font-size: 0.72rem; color: var(--accent); }
.atelier__details { margin-top: clamp(3rem, 7vh, 5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.sketch__sheet--detail { aspect-ratio: 1 / 1; }
.sketch__sheet--detail img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.sketch-detail figcaption { padding-top: 1rem; font-size: 0.82rem; color: var(--bone-45); }
.sketch-detail figcaption span { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }

/* ---------- news and stories ---------- */

.stories { padding-block: clamp(5rem, 11vh, 8rem); border-top: 1px solid var(--hairline); }
.stories__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.4rem, 2vw, 2rem); }
.stories__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-hero + .stories { border-top: 0; }
.page-hero + .stories .stories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3.5rem; }
.story-card { display: grid; align-content: start; gap: 0.6rem; }
.story-card__frame { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); margin-bottom: 0.6rem; }
.story-card__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.story-card__frame--contain { background: #fbfaf7; border: 1px solid var(--hairline); }
.story-card__frame--contain img { object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.story-card:hover .story-card__frame img { transform: scale(1.04); }
.story-card__meta { font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); }
.story-card__title { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; text-wrap: balance; }
.story-card__dek { font-size: 0.86rem; color: var(--bone-45); line-height: 1.75; }

/* article */
.article { padding-top: calc(var(--header-h) + clamp(3rem, 8vh, 5rem)); }
.article__head { max-width: 52rem; }
.article__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.05; text-wrap: balance; }
.article__dek { margin-top: 1.4rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--bone-70); line-height: 1.5; max-width: 40rem; }
.article__hero { margin-top: clamp(2.5rem, 6vh, 4rem); }
.article__hero img { width: 100%; max-height: 72vh; object-fit: cover; }
.article__hero--contain img { object-fit: contain; background: #fbfaf7; border: 1px solid var(--hairline); padding: 4%; max-height: 64vh; mix-blend-mode: multiply; }
.article__body { max-width: 40rem; padding-block: clamp(3rem, 8vh, 5rem) clamp(4rem, 10vh, 7rem); }
.article__body p { font-size: 1.02rem; line-height: 2; color: var(--bone-70); }
.article__body p + p { margin-top: 1.2rem; }
.article__body h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin-top: 2.6rem; margin-bottom: 0.6rem; color: var(--ink); }
.article__sources { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--hairline); }
.article__sources li { list-style: none; margin-top: 0.4rem; font-size: 0.85rem; }
.article__sources a { border-bottom: 1px solid var(--hairline); }
.stories--more { background: #fff; }

@media (max-width: 1100px) {
  .stories__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .atelier__grid, .atelier__details { grid-template-columns: 1fr; max-width: 30rem; }
  .stories__grid--3, .page-hero + .stories .stories__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .stories__grid, .stories__grid--3, .page-hero + .stories .stories__grid { grid-template-columns: 1fr; }
}
.article__head, .article__body { max-width: 46rem; }

/* ==================================================================
   TYPE v4 — one geometric sans throughout, in the manner of Omega.
   Urbanist for headings and text; the wordmark stays in Cormorant.
=================================================================== */

:root {
  --serif: "Urbanist", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --sans: "Urbanist", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
}

body { font-weight: 400; font-size: 16px; letter-spacing: 0.01em; }

h1, h2, h3, .section-title, .page-hero__title, .col-hero__title, .hist-hero__title,
.feature__title, .split__title, .intro__title, .chapter__title, .film__title,
.shop-range__name, .product__name, .bag-page__title, .article__title {
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.col-hero__title, .hist-hero__title, .film__title--xl { letter-spacing: -0.025em; font-weight: 300; }

/* no italics in this voice: accents become lighter, not slanted */
.product__name em, .col-hero__line, .product__line, .hist-hero__dates, .split__title em,
.article__dek, .chapter__year, .quote__text {
  font-style: normal;
}
.product__name em { color: var(--bone-45); font-weight: 300; }
.col-hero__line, .product__line, .hist-hero__dates { color: var(--accent); font-weight: 400; letter-spacing: 0.02em; }
.chapter__year { font-weight: 200; }

.shop-card__name, .trio__name, .mega__name, .bag-line__name, .story-card__title,
.sketch figcaption > a, .reel__item figcaption span, .sketch-detail figcaption span, .service h3 {
  font-weight: 400;
  letter-spacing: 0;
}
.mega__col a, .specs dd, .pdp__price, .figure dt, .split__facts dt { font-weight: 300; }

.eyebrow, .nav-link, .menu-btn, .btn, .link-line, .filter, .mega__head, .crumb,
.shop-card__price, .trio__cta, .drawer__title, .chapter__place, .swatches__label,
.specs dt, .product__note, .hero__min-link, .story-card__meta, .footer__head {
  font-weight: 500;
}

/* ==================================================================
   HEADER v3 — in the manner of Omega: always light, wordmark centred,
   three tabs underneath, each opening a full-width light panel.
=================================================================== */

:root { --header-h: 116px; }

.header,
.header.is-solid,
body.has-hero .header:not(.is-solid):not(.is-open),
.header.is-open {
  --black: var(--paper); --bone: var(--ink); --bone-70: rgba(20,20,22,0.72);
  --bone-45: rgba(20,20,22,0.52); --hairline: rgba(20,20,22,0.12); --accent: #77727d;
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.has-hero .header:not(.is-solid):not(.is-open) .bag-btn__count { background: var(--ink); color: #fff; }

.header__top {
  width: min(1360px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.header__util { display: flex; gap: 2rem; }
.header__util a {
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bone-70); transition: color 0.3s;
}
.header__util a:hover { color: var(--ink); }
.header__mark { justify-self: center; }
.header__word { font-size: 1.25rem; color: var(--ink); }
.header__icons { justify-self: end; display: flex; align-items: center; gap: 1.6rem; }
.bag-btn { color: var(--ink); }
.bag-btn svg { width: 20px; height: 20px; }
.header .menu-btn { display: none; color: var(--ink); }

.header__nav {
  height: 48px;
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 4vw, 3.6rem);
}
.nav-tab {
  position: relative;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink);
  padding: 0 0.1rem;
  height: 100%;
}
.nav-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--ink); transform: scaleX(0); transition: transform 0.4s var(--ease-out);
}
.nav-tab:hover::after, .nav-tab.is-active::after, .nav-tab[aria-current]::after { transform: scaleX(1); }
.nav-tab:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* panels */
.nav-panels { position: absolute; top: 100%; left: 0; right: 0; }
.nav-panel {
  position: absolute; top: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 30px 50px -30px rgba(20, 20, 22, 0.18);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0.35s;
}
.nav-panel.is-active { opacity: 1; visibility: visible; transform: none; }
.nav-panel__inner {
  width: min(1360px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
}
.nav-panel__side {
  padding: clamp(2.2rem, 5vh, 3.4rem) 3rem clamp(2.4rem, 5vh, 3.6rem) 0;
  border-right: 1px solid var(--hairline);
}
.nav-panel__main { padding: clamp(2.2rem, 5vh, 3.4rem) 0 clamp(2.4rem, 5vh, 3.6rem) clamp(2rem, 4vw, 3.6rem); min-width: 0; }

.nav-head {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 1.4rem;
}
.nav-head--gap { margin-top: 2.8rem; }
.nav-list { display: grid; gap: 1.15rem; justify-items: start; }
.nav-list a, .nav-list__item {
  font-size: 1.12rem; font-weight: 400; letter-spacing: 0.02em; color: var(--bone-70);
  display: inline-flex; align-items: center; gap: 0.6rem; transition: color 0.25s;
}
.nav-list__item span { font-size: 1.1rem; opacity: 0; transform: translateX(-4px); transition: opacity 0.25s, transform 0.25s; }
.nav-list a:hover, .nav-list__item.is-active, .nav-list a[aria-current] { color: var(--ink); }
.nav-list__item.is-active span { opacity: 1; transform: none; }
.nav-list .nav-list__all {
  margin-top: 0.4rem; font-size: 0.9rem; font-weight: 500; color: var(--ink);
  padding-bottom: 0.3rem; border-bottom: 1px solid var(--ink);
}
.nav-list--small a { font-size: 0.92rem; overflow-wrap: anywhere; }

.nav-pane { display: none; }
.nav-pane.is-active { display: block; }
.nav-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; }
.nav-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-tile { display: grid; gap: 0.9rem; }
.nav-tile__frame { aspect-ratio: 4 / 5; background: #f5f5f4; overflow: hidden; display: grid; place-items: center; }
.nav-tiles--3 .nav-tile__frame { aspect-ratio: 4 / 3; }
.nav-tile__frame img { width: 100%; height: 100%; transition: transform 0.9s var(--ease-out); }
.nav-tile__frame--contain img { object-fit: contain; padding: 8% 10%; }
.nav-tile__frame--cover img { object-fit: cover; }
.nav-tile:hover .nav-tile__frame img { transform: scale(1.04); }
.nav-tile__label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.nav-btn {
  display: inline-block; margin-top: 2.2rem;
  border: 1px solid var(--hairline); padding: 0.95rem 1.5rem;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
  transition: border-color 0.3s, background 0.3s;
}
.nav-btn:hover { border-color: var(--ink); }

.nav-scrim {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: -1;
  background: rgba(20, 20, 22, 0.25);
  opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
}
.header.is-open .nav-scrim { opacity: 1; visibility: visible; }

/* retire the previous dropdown */
.mega, .mega__scrim { display: none !important; }

/* content starts below the taller header */
.hero { margin-top: var(--header-h); height: calc(100svh - var(--header-h)); min-height: 560px; }
.film--hero, .hist-hero--image { margin-top: var(--header-h); }
.page-hero { padding-top: calc(var(--header-h) + clamp(3.5rem, 9vh, 7rem)); }
.product, .bag-page { padding-top: calc(var(--header-h) + clamp(2.5rem, 7vh, 5rem)); }
.product__info, .bag-sum { top: calc(var(--header-h) + 2rem); }
.col-hero__copy { padding-top: calc(var(--header-h) + clamp(3rem, 8vh, 6rem)); }
.col-hero__media > img.cut { padding-top: var(--header-h); }
.hist-hero .container { padding-top: 4rem; }
.filters { top: var(--header-h); }
.article { padding-top: calc(var(--header-h) + clamp(3rem, 8vh, 5rem)); }
.hero__scrim { background: linear-gradient(0deg, rgba(0,0,0,0.45) 0%, transparent 35%); }

/* ---------- phones and small tablets: menu button, stacked panels ---------- */
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .header__top { height: 64px; grid-template-columns: 1fr auto 1fr; }
  .header__util, .header__nav { display: none; }
  .header .menu-btn { display: inline-flex; justify-self: start; }
  .header__word { font-size: 1rem; }
  .nav-panels {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: #fff; overflow-y: auto;
    visibility: hidden; opacity: 0; transition: opacity 0.35s, visibility 0.35s;
  }
  .header.is-open .nav-panels { visibility: visible; opacity: 1; }
  .nav-panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; max-height: none; overflow: visible; border-top: 0; }
  .nav-panel__inner { grid-template-columns: 1fr; }
  .nav-panel__side { border-right: 0; padding: 2rem 0 1.2rem; }
  .nav-panel__main { padding: 0 0 2.4rem; }
  .nav-panel[data-panel="watches"] .nav-pane:not([data-pane="meridian"]) { display: none; }
  .nav-tiles, .nav-tiles--3 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; padding-bottom: 0.6rem; }
  .nav-tiles--3 { grid-auto-columns: 62%; }
  .nav-list a, .nav-list__item { font-size: 1.3rem; }
  .nav-list__item span { display: none; }
  .nav-scrim { display: none; }
  .header.is-open .menu-btn__icon span:first-child { transform: translateY(3px) rotate(45deg); }
  .header.is-open .menu-btn__icon span:last-child { transform: translateY(-3px) rotate(-45deg); }
}

/* ==================================================================
   HEADER v3.1 — transparent, white on hover, scrolls away with the page
=================================================================== */

.header,
.header.is-solid {
  position: absolute;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background 0.35s var(--ease-out), border-color 0.35s, color 0.35s;
}
.header::before { /* soft shade so light text stays legible over footage */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0));
  opacity: 0; transition: opacity 0.35s;
}

/* over video or photography: light text */
body.has-hero .header:not(:hover):not(.is-open):not(:focus-within) {
  --bone: #f2efe8; --bone-70: rgba(242,239,232,0.85); --hairline: rgba(242,239,232,0.3);
  --ink: #f2efe8;
  background: transparent;
  color: #f2efe8;
}
body.has-hero .header:not(:hover):not(.is-open):not(:focus-within)::before { opacity: 1; }
body.has-hero .header:not(:hover):not(.is-open):not(:focus-within) .bag-btn__count { background: #f2efe8; color: #000; }

/* hover, keyboard focus or an open panel: white */
.header:hover, .header:focus-within, .header.is-open,
body.has-hero .header:hover, body.has-hero .header.is-open {
  background: #fff;
  border-bottom-color: rgba(20, 20, 22, 0.12);
}

/* the header no longer covers anything when scrolled, so content starts at the top */
.hero, .film--hero, .hist-hero--image { margin-top: 0; }
.hero { height: 100svh; min-height: 620px; }
.filters { top: 0; }
.product__info, .bag-sum { top: 2rem; }
.nav-panel { max-height: calc(100vh - var(--header-h)); }
.nav-scrim { position: fixed; inset: 0; }

@media (max-width: 900px) {
  .nav-panels { position: fixed; top: var(--header-h); }
  .header.is-open { position: fixed; }
}
body.has-hero .header:not(:hover):not(.is-open):not(:focus-within),
.header:not(:hover):not(.is-open):not(:focus-within) { border-bottom-color: transparent; }

/* ==================================================================
   HOMEPAGE v4 — spotlight (one watch) and single-watch sections,
   in the manner of Omega's editorial blocks
=================================================================== */

.feature--movement .feature__bg { background-position: 60% 50%; }
.feature__credit {
  position: absolute; right: var(--gutter); bottom: 1rem; z-index: 1;
  font-size: 0.66rem; letter-spacing: 0.04em; color: rgba(242, 239, 232, 0.55);
}

.btn-box {
  display: inline-block;
  padding: 1.05rem 2.6rem;
  border: 1px solid var(--hairline);
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.btn-box:hover { border-color: var(--ink); }

.spot { background: #fff; padding-block: clamp(5rem, 12vh, 8rem); }
.spot__head { text-align: center; max-width: 52rem; margin-inline: auto; display: grid; justify-items: center; gap: 1.6rem; }
.spot__title, .solo__title {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.15;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.spot__text, .solo__text { font-size: 1.05rem; line-height: 1.8; color: var(--bone-70); max-width: 44rem; letter-spacing: 0.02em; }
.spot__grid {
  margin-top: clamp(3.5rem, 8vh, 6rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem); align-items: start;
}
.spot__tall { margin-top: clamp(2rem, 5vh, 4rem); aspect-ratio: 4 / 5.6; overflow: hidden; }
.spot__tall img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.spot__wide { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #000; }

.spot-carousel { margin-top: clamp(2rem, 5vh, 3.4rem); padding-left: clamp(0rem, 3vw, 3rem); }
.spot-slide { display: none; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.6rem); align-items: center; }
.spot-slide.is-active { display: grid; }
.spot-slide__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }
.spot-slide__name { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.spot-slide__line { margin-top: 0.6rem; font-size: 0.9rem; color: var(--bone-70); }
.spot-slide__link {
  display: inline-block; margin-top: 1.2rem; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.1em;
  color: var(--ink); padding-bottom: 0.3rem; border-bottom: 1px solid var(--ink);
}
.spot-carousel__nav { margin-top: 1.6rem; margin-left: calc(min(11rem, 100%) + clamp(1.4rem, 4vw, 3.6rem)); display: flex; align-items: center; gap: 0.4rem; }
.spot-carousel__nav button {
  width: 2.6rem; height: 2.6rem; border: 0; background: #f2f2f1; color: var(--ink);
  font-size: 1.2rem; cursor: pointer; transition: background 0.3s;
}
.spot-carousel__nav button:hover:not(:disabled) { background: #e6e6e4; }
.spot-carousel__nav button:disabled { color: rgba(20, 20, 22, 0.25); cursor: default; }
.spot-carousel__count { margin-left: 0.8rem; font-size: 0.86rem; letter-spacing: 0.1em; color: var(--bone-70); font-variant-numeric: tabular-nums; }

.solo { background: #fff; padding-block: clamp(3rem, 8vh, 6rem) clamp(5rem, 12vh, 8rem); }
.solo__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.solo__copy { display: grid; justify-items: start; gap: 1.8rem; padding-left: clamp(0rem, 5vw, 5rem); }
.solo__text { max-width: 30rem; }
.solo__media { aspect-ratio: 8 / 9; background: #f6f6f5; display: grid; place-items: center; overflow: hidden; }
.solo__media img { width: 88%; height: 92%; object-fit: contain; transition: transform 1.2s var(--ease-out); }
.solo__media:hover img { transform: scale(1.03); }

@media (max-width: 900px) {
  .spot__grid, .solo__grid { grid-template-columns: 1fr; }
  .spot__tall { margin-top: 0; aspect-ratio: 4 / 5; }
  .spot-carousel { padding-left: 0; }
  .spot-carousel__nav { margin-left: 0; }
  .solo__copy { padding-left: 0; order: 1; }
}
.feature__video { z-index: 0; }
.feature .feature__scrim { z-index: 0; }
.feature .container { position: relative; z-index: 1; }

/* the dimming overlay sits below the header, never over it */
.nav-scrim,
.header.is-open .nav-scrim {
  position: absolute;
  inset: auto;
  top: 100%; left: 0; right: 0;
  height: 100vh;
}

/* stronger shade behind the transparent header so its text reads over the video */
.hero__scrim {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.34) 110px, rgba(0,0,0,0.08) 230px, rgba(0,0,0,0) 320px),
    linear-gradient(0deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 35%);
}
.header::before { background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0)); }
body.has-hero .header:not(:hover):not(.is-open):not(:focus-within) .nav-tab,
body.has-hero .header:not(:hover):not(.is-open):not(:focus-within) .header__util a,
body.has-hero .header:not(:hover):not(.is-open):not(:focus-within) .header__word {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* ==================================================================
   ABOUT THE HOUSE — centred editorial layout with photography
=================================================================== */

.house-label {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.2;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.house-label--center { text-align: center; }

.house-hero { position: relative; height: min(100svh, 980px); min-height: 560px; overflow: hidden; background: #000; display: grid; place-items: center; }
.house-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.house-hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.2) 260px, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.6) 100%);
}
.house-hero__copy { position: relative; z-index: 1; text-align: center; padding-inline: var(--gutter); color: #f2efe8; }
.house-hero__copy .eyebrow { color: rgba(242, 239, 232, 0.8); }
.house-hero__title {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: 1.05;
  letter-spacing: 0.08em; text-transform: uppercase; color: #f2efe8;
  text-wrap: balance;
}

.house-intro { background: #fff; padding-block: clamp(5rem, 13vh, 9rem); text-align: center; }
.house-intro .container { display: grid; justify-items: center; gap: 2.6rem; }
.house-intro__text {
  max-width: 50rem; font-size: clamp(1.2rem, 1.9vw, 1.6rem); font-weight: 300;
  line-height: 1.7; letter-spacing: 0.01em; color: var(--ink); text-wrap: balance;
}

.house-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: #fff; }
.house-split__media { min-height: min(80vh, 760px); overflow: hidden; }
.house-split__media img { width: 100%; height: 100%; object-fit: cover; }
.house-split__copy { display: grid; align-content: center; justify-items: start; gap: 1.8rem; padding: clamp(3rem, 8vh, 6rem) clamp(2rem, 6vw, 6rem); }
.house-split__text { max-width: 30rem; font-size: 1.05rem; line-height: 1.85; color: var(--bone-70); }

.house-brief { background: var(--paper); padding-block: clamp(5rem, 12vh, 8rem); }
.house-brief__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.house-brief__media { position: sticky; top: 2rem; aspect-ratio: 4 / 5; overflow: hidden; }
.house-brief__media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.house-brief__list { padding-top: clamp(0rem, 4vh, 3rem); }
.house-brief__intro { margin-top: 1rem; font-size: 1.05rem; color: var(--bone-70); }
.clauses { list-style: none; margin-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--hairline); }
.clauses li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1rem; padding: 1.8rem 0; border-bottom: 1px solid var(--hairline); }
.clauses span { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; color: var(--accent); padding-top: 0.35rem; font-variant-numeric: tabular-nums; }
.clauses p { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 300; line-height: 1.5; color: var(--ink); }

.house-cols { background: #fff; padding-block: clamp(5rem, 12vh, 8rem); }
.house-cols__grid { margin-top: clamp(2.5rem, 6vh, 4rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.4rem); }
.house-col { display: grid; justify-items: center; text-align: center; gap: 0.5rem; }
.house-col__frame { width: 100%; aspect-ratio: 4 / 5; background: #f6f6f5; display: grid; place-items: center; margin-bottom: 1rem; overflow: hidden; }
.house-col__frame img { width: 80%; height: 90%; object-fit: contain; transition: transform 1.2s var(--ease-out); }
.house-col:hover .house-col__frame img { transform: scale(1.04); }
.house-col__name { font-size: 0.86rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.house-col__line { font-size: 0.92rem; color: var(--bone-70); }

.house-close { position: relative; min-height: min(86vh, 820px); display: grid; place-items: center; overflow: hidden; background: #000; }
.house-close__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.house-close__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.house-close__copy { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; gap: 1.8rem; padding: 4rem var(--gutter); max-width: 44rem; }
.house-close__title { font-family: var(--sans); font-weight: 300; font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: 0.1em; text-transform: uppercase; color: #f2efe8; line-height: 1.15; }
.house-close__text { font-size: 1.05rem; line-height: 1.8; color: rgba(242, 239, 232, 0.85); }
.btn-box--light { color: #f2efe8; border-color: rgba(242, 239, 232, 0.5); }
.btn-box--light:hover { border-color: #f2efe8; background: #f2efe8; color: #000; }

@media (max-width: 900px) {
  .house-split, .house-brief__grid { grid-template-columns: 1fr; }
  .house-split__media { min-height: 56vh; }
  .house-brief__media { position: static; aspect-ratio: 4 / 3; }
  .house-cols__grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}
.house-hero { place-items: end center; }
.house-hero__copy { padding-bottom: clamp(3.5rem, 10vh, 6.5rem); }
.house-hero__shade {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.12) 240px, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0.82) 100%);
}
.house-close__shade { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,0.72), rgba(0,0,0,0.45)); }

/* ==================================================================
   PHONE MENU v2 — root list, then one section at a time (Omega-style)
=================================================================== */

.nav-root, .nav-back { display: none; }

@media (max-width: 900px) {
  .nav-panels { background: #fff; padding: 0 var(--gutter) 2.5rem; }
  .header.is-open .nav-panels { visibility: visible; opacity: 1; }

  /* root */
  .header.is-open:not(.is-drilled) .nav-root { display: flex; }
  .nav-root { flex-direction: column; min-height: 100%; padding-top: 1.4rem; }
  .nav-root__list { display: grid; border-top: 1px solid var(--hairline); }
  .nav-root__list button {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; background: none; border: 0; border-bottom: 1px solid var(--hairline);
    padding: 1.45rem 0; cursor: pointer;
    font-family: var(--sans); font-size: 0.86rem; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); text-align: left;
  }
  .nav-root__list button span { font-size: 1.3rem; font-weight: 300; letter-spacing: 0; color: var(--bone-45); }
  .nav-root__foot { margin-top: auto; padding-top: 3rem; display: grid; gap: 1.1rem; }
  .nav-root__foot a { font-size: 0.92rem; color: var(--bone-70); letter-spacing: 0.02em; }

  /* one section at a time */
  .nav-panel { display: none; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; max-height: none; overflow: visible; }
  .nav-panel.is-active { display: block; }
  .nav-back {
    display: flex; align-items: center; gap: 0.9rem; width: 100%;
    background: none; border: 0; border-bottom: 1px solid var(--hairline);
    padding: 1.45rem 0; margin-top: 1.4rem; cursor: pointer;
    font-family: var(--sans); font-size: 0.86rem; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); text-align: left;
  }
  .nav-back span { font-size: 1.3rem; font-weight: 300; letter-spacing: 0; color: var(--bone-45); }

  .nav-panel__inner { width: 100%; display: block; }
  .nav-panel__side { padding: 1.8rem 0 0; border: 0; }
  .nav-panel__main { display: none; }               /* no image tiles on phones */
  .nav-head { font-size: 0.66rem; color: var(--bone-45); margin-bottom: 1.1rem; }
  .nav-head--gap { margin-top: 2.4rem; }
  .nav-list { gap: 1.25rem; }
  .nav-list a, .nav-list__item { font-size: 1.2rem; font-weight: 300; color: var(--ink); }
  .nav-list--small a { font-size: 1rem; color: var(--bone-70); }
  .nav-list .nav-list__all { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.08em; }
  .nav-list__item span { display: none; }
}
@media (max-width: 900px) {
  .nav-panel[data-panel="services"] .nav-panel__side > .nav-head:first-child,
  .nav-panel[data-panel="world"] .nav-panel__side > .nav-head:first-child { display: none; }
}
.spot__tall--product { display: grid; place-items: center; background: #f6f6f5; }
.spot__tall--product img { width: 86%; height: 92%; object-fit: contain; object-position: 50% 50%; transition: transform 1.2s var(--ease-out); }
.spot__tall--product:hover img { transform: scale(1.03); }

/* ==================================================================
   COLLECTIONS + PRODUCT PAGE — Omega layout, house palette
=================================================================== */

.crumb2 {
  display: flex; flex-wrap: wrap; gap: 0.55rem;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone-70);
}
.crumb2 a { color: var(--bone-70); transition: color 0.3s; }
.crumb2 a:hover { color: var(--ink); }
.crumb2 span { color: var(--bone-45); }
.crumb2 b { font-weight: 500; color: var(--ink); }

/* collection head */
.col-head { background: #fff; padding: calc(var(--header-h) + 1.6rem) 0 clamp(3rem, 7vh, 4.5rem); text-align: center; }
.col-head .crumb2 { justify-content: flex-start; text-align: left; }
.col-head__title {
  margin-top: clamp(2.4rem, 6vh, 3.6rem);
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.1;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.col-head__title--sm { margin-top: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); text-align: center; }
.col-head__text {
  margin: clamp(1.8rem, 4vh, 2.6rem) auto 0; max-width: 54rem;
  font-size: 1.05rem; line-height: 1.85; letter-spacing: 0.02em; color: var(--bone-70);
}

.col-grid { background: #fff; padding-bottom: clamp(5rem, 11vh, 8rem); }
.col-grid__count {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone-70); padding: 1.2rem 0; margin-bottom: 1.6rem;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}

/* four-up product grid */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.6rem 0.9rem; }
.card4 { display: grid; gap: 0.45rem; align-content: start; text-align: center; }
.card4__frame { aspect-ratio: 4 / 5; background: #f6f6f5; display: grid; place-items: center; overflow: hidden; margin-bottom: 0.9rem; }
.card4__frame img { width: 88%; height: 94%; object-fit: contain; transition: transform 1.1s var(--ease-out); }
.card4:hover .card4__frame img { transform: scale(1.04); }
.card4__name { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.card4__line { font-size: 0.86rem; color: var(--bone-70); letter-spacing: 0.02em; }
.card4__price { margin-top: 0.3rem; font-size: 0.86rem; color: var(--ink); letter-spacing: 0.02em; }

/* watches.html ranges reuse the grid */
.shop-range .grid4 { margin-top: 0.4rem; }
.col-head + .filters { border-top: 1px solid var(--hairline); }

/* product page */
.pdp-page { background: #fff; }
.pdp2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); min-height: 100vh; }
.pdp2__media { background: #f6f6f5; position: relative; padding: calc(var(--header-h) + 1.6rem) clamp(1.4rem, 3vw, 3rem) 3rem; display: flex; flex-direction: column; }
.pdp2__stage { flex: 1; display: grid; place-items: center; min-height: 70vh; }
.pdp2__stage img { width: min(78%, 640px); height: auto; max-height: 82vh; object-fit: contain; }
.pdp2__info { padding: calc(var(--header-h) + clamp(4rem, 12vh, 7rem)) clamp(1.6rem, 5vw, 4.5rem) 4rem; }
.pdp2__name {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.pdp2__line { margin-top: 1.1rem; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.03em; color: var(--ink); }
.pdp2__price { margin-top: 2.4rem; font-size: 1.35rem; font-weight: 400; letter-spacing: 0.03em; color: var(--ink); }
.pdp2__note { margin-top: 0.6rem; font-size: 0.92rem; color: var(--bone-70); }
.pdp2__cta { margin-top: 2.2rem; display: grid; gap: 0.8rem; }
.cta-solid, .cta-line {
  display: block; text-align: center; padding: 1.35rem 1rem;
  font-size: 0.86rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.cta-solid { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.cta-solid:hover { background: #2c2b30; }
.cta-line { border: 1px solid var(--hairline); color: var(--ink); }
.cta-line:hover { border-color: var(--ink); }

.pdp2__variants { margin-top: 2.4rem; }
.pdp2__label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-70); margin-bottom: 1rem; }
.pdp2__thumbs { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.thumb { position: relative; width: 4.2rem; height: 5rem; display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s; }
.thumb:hover img { transform: scale(1.06); }
.thumb.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: -0.55rem; width: 5px; height: 5px;
  margin-left: -2.5px; border-radius: 50%; background: var(--ink);
}

.pdp2__ticks {
  list-style: none; margin-top: 2.4rem; padding: 1.5rem 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.pdp2__ticks li { font-size: 0.95rem; letter-spacing: 0.02em; color: var(--bone-70); display: flex; gap: 0.8rem; }
.pdp2__ticks li::before { content: "✓"; color: var(--ink); }

.acc { margin-top: 0.6rem; }
.acc__item { border-bottom: 1px solid var(--hairline); }
.acc__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  padding: 1.6rem 0; font-size: 0.86rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.acc__item summary::-webkit-details-marker { display: none; }
.acc__icon { position: relative; width: 1.1rem; height: 1.1rem; flex: none; }
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink);
  transition: transform 0.35s var(--ease-out);
}
.acc__icon::after { transform: rotate(90deg); }
.acc__item[open] .acc__icon::after { transform: rotate(0deg); }
.acc__body { padding-bottom: 1.8rem; }
.acc__text { font-size: 0.98rem; line-height: 1.85; color: var(--bone-70); }
.acc__specs div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 0.6rem 0; }
.acc__specs dt { font-size: 0.82rem; color: var(--bone-45); }
.acc__specs dd { font-size: 0.92rem; color: var(--ink); }
.acc__note { margin-top: 1rem; font-size: 0.8rem; color: var(--bone-45); }

.more2 { background: #fff; padding-block: clamp(4.5rem, 10vh, 7rem); border-top: 1px solid var(--hairline); }
.more2 .grid4 { margin-top: clamp(2.4rem, 6vh, 3.6rem); }

@media (max-width: 1100px) {
  .grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0.6rem; }
  .pdp2 { grid-template-columns: 1fr; min-height: 0; }
  .pdp2__stage { min-height: 52vh; }
  .pdp2__info { padding-top: 2.6rem; }
  .pdp2__ticks { grid-template-columns: 1fr; }
  .col-head .crumb2 { justify-content: center; }
}
.pdp2__thumbs { flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.9rem; scrollbar-width: none; }
.pdp2__thumbs::-webkit-scrollbar { display: none; }
.thumb { width: 3.5rem; height: 4.3rem; flex: none; }

/* product photos supplied on white blend into whatever light tile they sit on */
img[src*="assets/img/collection/"] { mix-blend-mode: multiply; }

/* product tiles: one flat light grey, no vignette that could read as a shadow */
.studio { background: #f6f6f5; }

/* ==================================================================
   PRODUCT PAGE — key materials, qualities, you may also like
=================================================================== */

/* key materials */
.mats { background: #fff; }
.mats__head {
  text-align: center; padding: clamp(3rem, 7vh, 4.5rem) var(--gutter) clamp(2rem, 5vh, 3rem);
  font-family: var(--sans); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink);
}
.mats__band { background: #000; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(80vh, 760px); color: #f2efe8; }
.mats__media { position: relative; overflow: hidden; }
.mats__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.7s var(--ease-out);
}
.mats__media img.is-active { opacity: 1; }
.mats__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.9)); }
.mats__copy { padding: clamp(3rem, 8vh, 5rem) clamp(1.6rem, 6vw, 6rem) 3rem clamp(1.6rem, 4vw, 4rem); }
.mats__tabs { display: flex; flex-wrap: wrap; gap: 2rem; }
.mats__tabs button {
  background: none; border: 0; cursor: pointer; padding: 0.4rem 0;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(242, 239, 232, 0.55); border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s;
}
.mats__tabs button:hover { color: #f2efe8; }
.mats__tabs button.is-active { color: #f2efe8; border-bottom-color: #f2efe8; }
.mats__tabs button:focus-visible { outline: 1px solid #f2efe8; outline-offset: 6px; }
.mats__title {
  margin-top: clamp(2.4rem, 6vh, 3.6rem);
  font-family: var(--sans); font-weight: 300; font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: 0.12em; text-transform: uppercase; color: #f2efe8; line-height: 1.1;
}
.mats__text { margin-top: 1.8rem; max-width: 36rem; font-size: 1.02rem; line-height: 1.9; letter-spacing: 0.02em; color: rgba(242, 239, 232, 0.85); }

/* qualities */
.quals { background: #fff; padding-block: clamp(4rem, 10vh, 7rem); }
.quals__box {
  position: relative;
  width: min(1360px, 100% - 2 * var(--gutter)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.6rem, 4vw, 4rem) clamp(3rem, 8vh, 5rem) 0;
}
.quals__box::before { content: ""; position: absolute; inset: 0 0 0 18%; background: #f6f6f5; z-index: 0; }
.quals__box > * { position: relative; z-index: 1; }
.quals__media { aspect-ratio: 6 / 7; overflow: hidden; }
.quals__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.quals__title {
  font-family: var(--sans); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.25;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.quals__text { margin-top: 1.8rem; font-size: 1rem; line-height: 1.9; letter-spacing: 0.02em; color: var(--bone-70); }
.quals__icons { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 1rem; }
.quals__icons li {
  display: grid; justify-items: center; gap: 1rem; text-align: center;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.quals__icon { width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 1px solid rgba(20, 20, 22, 0.18); display: grid; place-items: center; background: #fff; }
.quals__icon svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }

/* you may also like — compact carousel */
.like { background: #fff; padding: clamp(4rem, 9vh, 6rem) 0 clamp(4rem, 9vh, 6rem); border-top: 1px solid var(--hairline); }
.like__title {
  text-align: center; margin-bottom: clamp(2.4rem, 6vh, 3.4rem);
  font-family: var(--sans); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.like__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(9.5rem, 15vw, 13rem);
  gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.like__track::-webkit-scrollbar { display: none; }
.like-card { scroll-snap-align: start; display: grid; gap: 0.35rem; text-align: center; }
.like-card__frame { aspect-ratio: 4 / 5; background: #f6f6f5; display: grid; place-items: center; overflow: hidden; margin-bottom: 0.7rem; }
.like-card__frame img { width: 86%; height: 92%; object-fit: contain; transition: transform 1s var(--ease-out); }
.like-card:hover .like-card__frame img { transform: scale(1.05); }
.like-card__name { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.like-card__line { font-size: 0.82rem; color: var(--bone-70); }
.like__bar {
  width: min(1360px, 100% - 2 * var(--gutter)); margin: clamp(2rem, 5vh, 3rem) auto 0;
  display: flex; align-items: center; gap: 2rem;
}
.like__progress { flex: 1; height: 3px; background: #ececea; }
.like__progress span { display: block; height: 100%; background: var(--ink); transition: margin-left 0.25s, width 0.25s; }
.like__nav { display: flex; gap: 0.3rem; }
.like__nav button { width: 2.6rem; height: 2.6rem; border: 0; background: #f2f2f1; color: var(--ink); font-size: 1.2rem; cursor: pointer; }
.like__nav button:disabled { color: rgba(20, 20, 22, 0.25); cursor: default; }

@media (max-width: 1000px) {
  .quals__box { grid-template-columns: 1fr 1fr; padding-right: clamp(1.6rem, 4vw, 3rem); }
  .quals__icons { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); padding-left: clamp(1.6rem, 4vw, 3rem); }
}
@media (max-width: 760px) {
  .mats__band { grid-template-columns: 1fr; }
  .mats__media { min-height: 52vh; }
  .mats__media::after { background: linear-gradient(0deg, rgba(0,0,0,0.9), rgba(0,0,0,0) 40%); }
  .quals__box { grid-template-columns: 1fr; padding: 0 0 3rem; }
  .quals__box::before { inset: 22% 0 0 0; }
  .quals__copy, .quals__icons { padding-inline: 1.4rem; }
  .quals__icons { grid-template-columns: 1fr 1fr; }
}

/* collection tiles: watch sits smaller in its backdrop, Omega-style */
.card4__frame img { width: 66%; height: 74%; }
.like-card__frame img { width: 70%; height: 78%; }

/* homepage collection tiles: watch sits small in a generous backdrop */
.trio__frame img { width: 52%; height: 62%; object-fit: contain; }
.house-col__frame img { width: 58%; height: 68%; }
.quals__media--product { background: #fff; display: grid; place-items: center; }
.quals__media--product img { width: 74%; height: 84%; object-fit: contain; }

/* homepage collection tiles: smaller boxes, centred */
.trio__grid { max-width: 940px; margin-inline: auto; gap: clamp(0.8rem, 1.4vw, 1.2rem); }
.trio__frame { aspect-ratio: 4 / 5; }
.trio__frame img { width: 62%; height: 72%; }
.trio__name { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.pdp2__line + .pdp2__price[hidden] + .pdp2__note[hidden] + .pdp2__cta { margin-top: 2.6rem; }
@media (max-width: 960px) { .trio__grid { max-width: 26rem; } }

/* Meridian spotlight: model photograph top right, smaller product shot left */
.spot__wide { aspect-ratio: 4 / 3.4; background: #e9e9e7; }
.spot__wide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.spot__tall--product img { width: 58%; height: 70%; }
.spot__tall--product img { width: 46%; height: 56%; }

/* centred text-only page opener (Appointments) */
.page-hero--center { background: #fff; text-align: center; border-bottom: 1px solid var(--hairline); }
.page-hero--center .page-hero__title {
  font-family: var(--sans); font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.page-hero--center .page-hero__lede { margin-inline: auto; max-width: 40rem; }

/* ==================================================================
   DESIGN PASS — October 2026
   B9 headings · B12 collection lower half · B14 appointments ·
   B15 watchmaking/spotlight · B10 materials · C16–C18 readability
=================================================================== */

/* B9 — one heading voice: spaced capitals, as the collection pages */
.section-title, .intro__title, .split__title, .feature__title, .page-hero__title,
.chapter__title, .hist-hero__title, .film__title, .film__title--xl, .article__title,
.shop-range__name, .house-intro__title, .trio__name {
  font-family: var(--sans); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.1em; line-height: 1.18; text-wrap: balance;
}
.section-title, .intro__title, .split__title, .chapter__title, .shop-range__name { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.feature__title, .film__title, .page-hero__title, .article__title { font-size: clamp(1.9rem, 3.8vw, 3.1rem); }
.hist-hero__title, .film__title--xl { font-size: clamp(2.2rem, 5.2vw, 4.4rem); letter-spacing: 0.08em; line-height: 1.1; }
.chapter__title { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.trio__name { font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: 0.16em; }
.film__title { max-width: 22ch; }

/* B12 — collection pages, lower half in the same white, centred manner */
.col-spec, .col-others { background: #fff; padding-block: clamp(4rem, 10vh, 7rem); border-top: 1px solid var(--hairline); }
.col-spec__list { max-width: 46rem; margin: clamp(2rem, 5vh, 3rem) auto 0; }
.col-spec__list > div {
  display: grid; grid-template-columns: 14rem 1fr; gap: 1.5rem;
  padding: 1.05rem 0; border-top: 1px solid var(--hairline); text-align: left;
}
.col-spec__list > div:last-child { border-bottom: 1px solid var(--hairline); }
.col-spec__list dt { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.col-spec__list dd { font-size: 0.98rem; color: var(--bone-70); line-height: 1.7; }
.col-spec__note { margin-top: 1.6rem; text-align: center; font-size: 0.85rem; color: var(--bone-45); }
.col-others__grid {
  margin: clamp(2rem, 5vh, 3rem) auto 0; max-width: 46rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.4rem);
}
@media (max-width: 600px) {
  .col-spec__list > div { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* B14 — appointments: centred steps, one photograph */
.appt-band { height: clamp(320px, 62vh, 640px); overflow: hidden; background: #e9e9e7; }
.appt-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.appt-steps { text-align: center; }
.appt-steps .steps { margin-top: 0; max-width: 64rem; margin-inline: auto; }
.appt-steps .step p { margin-inline: auto; }
.appt-steps__cta { margin-top: clamp(3rem, 7vh, 5rem); display: flex; justify-content: center; }
.step h3 { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.14em; font-size: 1.05rem; font-weight: 500; }
.step p { font-size: 0.98rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 2.8rem; } }

/* B15 — watchmaking standard list fills the width, two columns */
.finish-list {
  max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
}
.finish-list div { grid-template-columns: 10rem 1fr; padding: 1.4rem 0; border-bottom: 1px solid var(--hairline); }
.finish-list div:last-child { border-bottom: 1px solid var(--hairline); }
.finish-list dt { font-family: var(--sans); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.finish-list dd { font-size: 0.98rem; }
@media (max-width: 860px) {
  .finish-list { grid-template-columns: 1fr; }
  .finish-list div { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* B15 — homepage spotlight: the product tile matches the photo's height */
.spot__grid { align-items: stretch; }
.spot__tall { margin-top: 0; aspect-ratio: auto; height: 100%; }
@media (max-width: 760px) { .spot__tall { aspect-ratio: 4 / 4.4; height: auto; } }

/* B10 — key materials on Longitude and Solstice: the watch itself, on white */
.mats__media--product { background: #fff; }
.mats__media--product img { inset: 9% 13%; width: 74%; height: 82%; object-fit: contain; }
.mats__media--product::after { display: none; }

/* C17 — faint grey reaches 4.5:1 on paper */
:root, body { --bone-45: rgba(20, 20, 22, 0.62); --accent: #66616c; }

/* C16 — nothing smaller than 11–12px; footer links readable */
.eyebrow { font-size: 0.72rem; }
.crumb, .crumb2, .filter, .trio__cta, .swatches__label, .specs dt, .product__note,
.chapter__place, .story-card__meta, .step__num, .entry__date, .pdp2__label,
.card4__line, .like-card__line, .mega__head { font-size: max(0.75rem, 12px); }
.footer__head { font-size: 0.74rem; }
.footer__col a { font-size: 0.92rem; }
.shop-card__line { font-size: 0.85rem; }

/* C18 — text over busy footage and photographs */
.film__shade, .hist-hero__shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.1) 78%),
    linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 55%);
}
.feature__scrim {
  background: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.15) 100%),
              linear-gradient(0deg, rgba(0,0,0,0.7), transparent 50%);
}
.feature__text, .hist-hero__lede, .film__caption p { font-size: 1.08rem; color: rgba(242, 239, 232, 0.9); }
@media (max-width: 680px) {
  .film__shade, .hist-hero__shade { background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0.25) 100%); }
}

/* ---------- Services panel: line icons instead of photographs ---------- */
.nav-icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.nav-icon { display: grid; gap: 0.7rem; align-content: start; }
.nav-icon__frame {
  aspect-ratio: 4 / 3; background: #f5f5f4; display: grid; place-items: center;
  transition: background 0.5s var(--ease-out);
}
.nav-icon__frame svg {
  width: clamp(48px, 22%, 72px); height: auto; fill: none;
  stroke: var(--ink); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.9s var(--ease-out);
}
.nav-icon:hover .nav-icon__frame { background: #ececea; }
.nav-icon:hover .nav-icon__frame svg { transform: scale(1.06); }
.nav-icon .nav-tile__label { margin-top: 0.3rem; }
.nav-icon__text { font-size: 0.86rem; line-height: 1.6; color: var(--bone-70); }
@media (max-width: 899px) {
  .nav-icons { grid-template-columns: 1fr; gap: 0.6rem; }
  .nav-icon { grid-template-columns: 5.2rem 1fr; column-gap: 1rem; align-items: center; }
  .nav-icon__frame { grid-row: span 2; aspect-ratio: 1; }
  .nav-icon__frame svg { width: 56%; }
  .nav-icon .nav-tile__label { margin-top: 0; align-self: end; }
  .nav-icon__text { align-self: start; }
}

/* ---------- News: product images sit on the card's own grey, no box ---------- */
.story-card__frame--contain { background: #f6f6f5; border: 0; }
.story-card__frame--contain img { padding: 9% 0; }
.article__hero--contain { background: #f6f6f5; display: grid; place-items: center; padding-block: clamp(1.5rem, 4vh, 3rem); }
.article__hero--contain img { background: none; border: 0; padding: 0; width: auto; max-width: 100%; height: min(58vh, 560px); max-height: none; object-fit: contain; }

/* ---------- Watchmaking: case / dial / bracelet as close crops of product photos ---------- */
.reel__frame--product { background: #fff; }
.reel__frame--product img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.reel__frame--case img { transform: scale(2.3); transform-origin: 84% 47%; }
.reel__frame--dial img { transform: scale(2.1); transform-origin: 50% 46%; }
.reel__frame--bracelet img { transform: scale(2.2); transform-origin: 50% 86%; }
.reel__item:hover .reel__frame--case img { transform: scale(2.4); }
.reel__item:hover .reel__frame--dial img { transform: scale(2.2); }
.reel__item:hover .reel__frame--bracelet img { transform: scale(2.3); }

/* ---------- Homepage spotlight: product tile beside a larger dial carousel ---------- */
.spot__grid { align-items: center; }
.spot__tall { aspect-ratio: 4 / 5; height: auto; }
.spot__side--carousel { display: grid; align-content: center; }
.spot-carousel--lg { margin-top: 0; padding-left: 0; text-align: center; }
.spot-carousel--lg .spot-slide { grid-template-columns: 1fr; gap: 1.6rem; justify-items: center; }
.spot-carousel--lg .spot-slide__img { display: block; width: min(62%, 300px); }
.spot-carousel--lg .spot-slide__img img { transition: transform 1.1s var(--ease-out); }
.spot-carousel--lg .spot-slide__img:hover img { transform: scale(1.03); }
.spot-carousel--lg .spot-slide__line { margin-top: 0.5rem; }
.spot-carousel--lg .spot-slide__link { margin-top: 1rem; display: inline-block; }
.spot-carousel--lg .spot-carousel__nav { margin: 2.2rem 0 0; justify-content: center; }
@media (max-width: 760px) {
  .spot__tall { aspect-ratio: 4 / 4.4; }
  .spot-carousel--lg { margin-top: 2.4rem; }
}

/* homepage trio: "Discover" sits as a small link under the line, not beside the name */
.trio__meta { display: block; }
.trio__cta { display: inline-block; margin-top: 0.9rem; padding-bottom: 0.2rem; border-bottom: 1px solid currentColor; color: var(--ink); }

/* homepage Solstice spotlight: the watch sits small on its grey ground */
.solo__media img { width: 52%; height: 60%; }

/* Services icons: no box, larger, on the panel's own ground */
.nav-icon__frame { aspect-ratio: auto; background: none; place-items: start; padding: 0.4rem 0 0.6rem; }
.nav-icon__frame svg { width: 84px; }
.nav-icon:hover .nav-icon__frame { background: none; }
.nav-icons { gap: clamp(1.4rem, 3vw, 3rem); }
@media (max-width: 899px) {
  .nav-icon__frame { aspect-ratio: auto; padding: 0; place-items: center; }
  .nav-icon__frame svg { width: 56px; }
}

/* Watchmaking bracelet tile: the side view, shown whole */
.reel__frame--side img { transform: scale(1.08); transform-origin: 50% 55%; }
.reel__item:hover .reel__frame--side img { transform: scale(1.14); }
.reel__frame--side img { object-fit: contain; transform: none; }
.reel__item:hover .reel__frame--side img { transform: scale(1.04); }

/* ---------- contact page ---------- */
.contact { background: #fff; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 7vw, 7rem); max-width: 68rem; margin-inline: auto; }
.contact__label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); margin-top: 2.6rem; }
.contact__info > .contact__label:first-child { margin-top: 0; }
.contact__email { margin-top: 0.8rem; font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: 0.02em; color: var(--ink); word-break: break-word; }
.contact__text { margin-top: 0.7rem; font-size: 0.98rem; line-height: 1.75; color: var(--bone-70); }
.contact__link, .contact__copy {
  display: inline-block; margin-top: 0.9rem; padding: 0 0 0.2rem; background: none; border: 0; border-bottom: 1px solid currentColor;
  font: inherit; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); cursor: pointer;
}
.contact__form { display: grid; gap: 1.4rem; align-content: start; }
.field { display: grid; gap: 0.5rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.field input, .field select, .field textarea, .contact__draft {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  border: 1px solid rgba(20, 20, 22, 0.22); border-radius: 0; padding: 0.85rem 0.9rem; outline: none; transition: border-color 0.3s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.6rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field input[readonly] { background: #f6f6f5; }
.field textarea, .contact__draft { resize: vertical; line-height: 1.6; }
.contact__send { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.contact__error { font-size: 0.9rem; color: #8a2a2a; }
.contact__fine { font-size: 0.85rem; color: var(--bone-45); margin-top: -0.6rem; }
.contact__done { border-top: 1px solid var(--hairline); padding-top: 1.6rem; }
.contact__done .contact__label { margin-top: 0; }
.contact__draft { margin-top: 1rem; font-size: 0.9rem; background: #f6f6f5; }
@media (max-width: 820px) {
  .contact__grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

/* homepage trio: a swipe carousel on phones, next watch peeking in */
@media (max-width: 760px) {
  .trio__grid {
    max-width: none; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 76%;
    gap: 0.8rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 0.4rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .trio__grid::-webkit-scrollbar { display: none; }
  .trio__tile { scroll-snap-align: start; }
  .trio__frame { aspect-ratio: 4 / 5; }
  .trio__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.6rem; }
  .trio__dots span { width: 22px; height: 2px; background: rgba(20, 20, 22, 0.18); transition: background 0.3s; }
  .trio__dots span.is-on { background: var(--ink); }
}
@media (min-width: 761px) { .trio__dots { display: none; } }

/* About: the brief as text only, one centred column */
.house-brief__grid--text { grid-template-columns: minmax(0, 1fr); max-width: 52rem; margin-inline: auto; }
.house-brief__grid--text .house-brief__list { padding-top: 0; }
.house-brief__grid--text .house-label, .house-brief__grid--text .house-brief__intro { text-align: center; }
.house-brief__grid--text .clauses { margin-top: clamp(2.4rem, 5vh, 3.4rem); }

/* contact page: no rules under the text */
.page-hero--plain { border-bottom: 0; }
.contact__link, .contact__copy { border-bottom: 0; padding-bottom: 0; }
.contact__link:hover, .contact__copy:hover { color: var(--bone-70); }
.field[hidden] { display: none; }
.page-hero--plain { padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.page-hero--plain + .contact { padding-top: clamp(2rem, 5vh, 3.5rem); }

/* contact: email set like the other text; the left column on a paper panel */
.contact__email { font-size: 0.98rem; line-height: 1.75; letter-spacing: 0.01em; color: var(--ink); margin-top: 0.7rem; }
.contact__info { background: var(--paper); padding: clamp(1.8rem, 3.5vw, 3rem); align-self: start; }