/* ──────────────────────────────────────────────────────────────
   MAISON ORBE. Dark tables, cream serif, gold hairlines.
   The hero is a wheel: a ring with its centre far below the page,
   the five pies sitting on its rim. Turning the ring one step rolls
   the next pie up into the middle while the last one rolls off the
   edge, and the table beneath crossfades to that pie's colour.
   ────────────────────────────────────────────────────────────── */

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

:root {
  --cream: #f3e6d0;
  --gold: #d9b986;
  --ink: #1d1410;
  --paper: #f5efe4;
  --muted: #6f6258;
  --line: rgba(29, 20, 16, .14);
  --pad: clamp(22px, 5vw, 88px);
  --ease: cubic-bezier(.4, .05, .15, 1);
  --t: 1.5s;
  /* the wheel: pie diameter, rim radius, degrees between pies */
  --D: min(60vw, 900px);
  --R: 350vw;
  --step: 11deg;
  --spin: 70deg;   /* extra self rotation per step, so the pie visibly rolls */
  --gap: clamp(30px, 3.4vw, 56px);   /* space between the crust and the arc */
  --cy: 94svh;                        /* the pie's centre line */
  /* the colour of the pie in front, used by the sections below */
  --tint: #3f0909;
}
body[data-pie="chocolate"] { --tint: #281811; }
body[data-pie="cherry"]    { --tint: #30031a; }
body[data-pie="pecan"]     { --tint: #4b1706; }
body[data-pie="lemon"]     { --tint: #302e11; }

html { scroll-behavior: smooth; }
body { font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; line-height: 1.05; letter-spacing: .005em; }
h2 { font-size: clamp(34px, 4.2vw, 58px); }
.eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }
.lead { margin-top: 16px; max-width: 54ch; color: var(--muted); font-size: 16px; }
.section-head { max-width: 760px; }
.section-head .eyebrow + h2 { margin-top: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 980px; background: var(--ink); color: var(--cream); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; transition: opacity .3s, transform .3s; }
.btn:hover { opacity: .9; transform: translateY(-1px); }

/* ══════════════ hero ══════════════ */
.hero { position: relative; height: 100svh; overflow: hidden; color: var(--cream); background: var(--tint); }
.tables { position: absolute; inset: 0; }
.table { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t) ease; }
.table.is-on { opacity: 1; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .18), transparent 30%, transparent 70%, rgba(0, 0, 0, .25)); pointer-events: none; }

.nav { position: absolute; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 var(--pad); height: 74px; }
.nav__logo { font-family: "Playfair Display", Georgia, serif; font-size: 22px; letter-spacing: .28em; text-transform: uppercase; }
.nav__links { display: flex; gap: clamp(20px, 3.4vw, 46px); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.nav__links a:hover { opacity: 1; }
.nav__cta { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; padding: 11px 26px; border-radius: 980px; border: 1px solid var(--gold); color: var(--cream); transition: background .3s, color .3s; }
.nav__cta:hover { background: var(--gold); color: var(--ink); }

.hero__copy { position: absolute; z-index: 10; left: 0; right: 0; top: 11svh; text-align: center; padding: 0 var(--pad); pointer-events: none; }
.hero__copy .eyebrow { color: var(--gold); }
.hero__copy h1 { margin-top: 10px; font-size: clamp(30px, 4.3vw, 62px); text-transform: uppercase; letter-spacing: .03em; }
.flavour { position: absolute; left: 50%; top: -44px; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; transition: opacity .3s, transform .3s; }
.flavour.is-swapping { opacity: 0; transform: translate(-50%, 6px); }

/* ── the arc ── */
.arc { position: absolute; z-index: 9; left: 50%; top: calc(var(--cy) - var(--D) / 2 - var(--gap)); width: calc(var(--D) + var(--gap) * 2); aspect-ratio: 1; transform: translateX(-50%); }
.arc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dot {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 1px solid rgba(243, 230, 208, .7); background: var(--tint);
  transition: left var(--t) var(--ease), top var(--t) var(--ease), background .5s, border-color .5s, transform .5s, opacity .4s;
}
.dot.no-transition { transition: none; }
.dot.is-active { background: var(--gold); border-color: var(--gold); transform: scale(1.35); }
.dot span {
  position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: rgba(243, 230, 208, .82);
  transition: opacity .4s;
}
.dot.is-left span { right: 22px; }
.dot.is-right span { left: 22px; }
.dot.is-active span { opacity: 0; }
.dot:hover span { color: var(--cream); }

/* ── the wheel ── */
.wheel { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.ring {
  position: absolute; left: 50%; top: calc(var(--cy) + var(--R)); width: 0; height: 0;
  transform: rotate(var(--turn, 0deg)); transition: transform var(--t) var(--ease);
}
.pie {
  position: absolute; left: 0; top: 0; width: var(--D); max-width: none; height: var(--D); margin: calc(var(--D) / -2) 0 0 calc(var(--D) / -2);
  transform: rotate(calc(var(--slot) * var(--step))) translateY(calc(var(--R) * -1)) rotate(calc(var(--roll, 0deg)));
  transition: transform var(--t) var(--ease), opacity .4s;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55));
}
.pie.no-transition { transition: none; }

.turn {
  position: absolute; z-index: 12; top: 62svh; width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold);
  display: grid; place-items: center; transition: background .3s, color .3s, transform .3s;
}
.turn svg { width: 22px; height: 22px; }
.turn:hover { background: var(--gold); color: var(--ink); }
.turn--prev { left: calc(50% - var(--D) / 2 - 90px); }
.turn--next { right: calc(50% - var(--D) / 2 - 90px); }
.counter { position: absolute; z-index: 12; right: calc(50% - var(--D) / 2 - 104px); top: calc(62svh + 76px); width: 82px; white-space: nowrap; text-align: center; font-family: "Playfair Display", Georgia, serif; font-size: 16px; letter-spacing: .1em; color: var(--cream); }
.counter::after { content: ""; display: block; width: 26px; height: 1px; margin: 8px auto 0; background: var(--gold); }

.hint { position: absolute; z-index: 12; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(243, 230, 208, .8); transition: opacity .4s; }
.hint span { width: 1px; height: 26px; background: rgba(243, 230, 208, .7); animation: drop 1.8s ease-in-out infinite; transform-origin: top; }
.hint.is-off { opacity: 0; }
@keyframes drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ══════════════ sections ══════════════ */
section:not(.hero) { padding: clamp(72px, 9vw, 130px) var(--pad); }
.pies { background: var(--paper); }
.pies__grid { margin-top: clamp(34px, 4vw, 60px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.card { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.card__img { position: relative; aspect-ratio: 1; background: var(--c); display: grid; place-items: center; overflow: hidden; }
.card__img img { width: 78%; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); transition: transform 1.2s var(--ease); }
.card:hover .card__img img { transform: rotate(18deg) scale(1.04); }
.card__img em { position: absolute; top: 12px; left: 12px; padding: 4px 9px; border-radius: 980px; background: var(--gold); color: var(--ink); font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .4s; }
.card.is-front .card__img em { opacity: 1; }
.card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { font-size: 21px; }
.card__body p { margin-top: 8px; font-size: 13.5px; color: var(--muted); flex: 1; }
.card__row { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.card__row strong { font-family: "Playfair Display", Georgia, serif; font-size: 18px; font-weight: 500; }
.card__row strong small { font-family: "Inter", sans-serif; font-size: 11px; color: var(--muted); margin-left: 4px; }
.card__row button { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.card__row button:hover { border-color: var(--ink); }

.house { background: var(--tint); color: var(--cream); transition: background var(--t) ease; }
.house .eyebrow { color: var(--gold); }
.house__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 90px); align-items: start; }
.house__cols h2 { margin-top: 14px; }
.house__text p { color: rgba(243, 230, 208, .8); font-size: 16px; }
.house__text p + p { margin-top: 16px; }
.house__facts { margin-top: 28px; }
.house__facts div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid rgba(243, 230, 208, .2); font-size: 14px; }
.house__facts dt { letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: var(--gold); }

.delivery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 90px); background: #fff; }
.delivery__copy h2 { margin-top: 14px; }
.delivery__form { display: grid; gap: 14px; }
.delivery__form label { display: grid; gap: 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.delivery__form input, .delivery__form select { font: 15px "Inter", sans-serif; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.delivery__form .btn { justify-self: start; margin-top: 6px; }
.form-note { font-size: 13px; color: var(--muted); }
.form-note.is-ok { color: #2d6a3e; }

.foot { padding: 24px var(--pad) 28px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.foot .nav__logo { font-size: 16px; color: var(--ink); }
.foot__top { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot__top nav { display: flex; gap: 20px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.foot__bottom { margin-top: 12px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ══════════════ phones ══════════════ */
@media (max-width: 900px) {
  :root { --D: 118vw; --R: 420vw; --step: 12deg; --cy: 100svh; --gap: 26px; }
  .nav__links { display: none; }
  .nav { height: 64px; }
  .nav__logo { font-size: 17px; }
  .hero__copy { top: 12svh; }
  .hero__copy h1 { font-size: 30px; }
  .flavour { top: -36px; font-size: 11px; }
  .dot span { font-size: 9px; letter-spacing: .16em; }
  .turn { top: auto; bottom: 64px; width: 48px; height: 48px; }
  .turn--prev { left: var(--pad); }
  .turn--next { right: var(--pad); }
  .counter { right: auto; left: 50%; transform: translateX(-50%); top: auto; bottom: 74px; }
  .hint { display: none; }
  .pies__grid { grid-template-columns: 1fr 1fr; }
  .house__cols, .delivery { grid-template-columns: 1fr; }
}