/* ==========================================================================
   Home page
   The hero is the images in use, each a different product: a website (the
   Kova bench), a trade show banner (a wall light), a printed catalogue (granite
   paving), a proposal (a fire table) and a text with a client's project
   team (a pergola, before and after). The
   frames (laptop, phone, pages, banner) are drawn here in CSS so they stay
   sharp at any size; only the pictures inside them are images. Each frame
   is its own size container, so everything inside scales with it (cqw).
   ========================================================================== */
.home { max-width: 1320px; }
.home h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -0.045em; font-weight: 500; margin: 0; }

/* --- Hero text -------------------------------------------------------------- */
.lp-hero { padding: clamp(24px, 4.5vw, 56px) 0 clamp(18px, 2.6vw, 30px); }
.lp-title { font-size: clamp(38px, 5.3vw, 76px); line-height: 1; letter-spacing: -0.052em; font-weight: 500; margin: 0; max-width: 20ch; text-wrap: balance; }
.lp-lead-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; margin-top: clamp(20px, 2.6vw, 32px); }
.lp-lead { margin: 0; font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.h-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* --- The stage: five places a product is seen, clustered so each piece
   overlaps a neighbour ------------------------------------------------------------ */
.lp-stage {
  position: relative;
  aspect-ratio: 1320 / 810;
  margin: 28px 0 0;
  border-radius: 32px;
  background:
    radial-gradient(120% 90% at 50% 100%, #d9ddd9 0%, rgba(217, 221, 217, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}
.mk { position: absolute; margin: 0; container-type: inline-size; }
.mk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-tag {
  position: absolute; left: 0; top: -36px; z-index: 2;
  font-size: 12px; font-weight: 800; letter-spacing: 0.01em; padding: 4px 11px; border-radius: var(--pill);
  background: var(--ink); color: #fff; white-space: nowrap;
  border: 2.5px solid var(--lime); box-shadow: 0 2px 8px rgba(18, 20, 18, 0.18);
}
/* Each example is outlined in marchelle lime. */
.bn, .lt-lid, .ct, .pp, .ph { outline: 3px solid var(--lime); }
.ph { outline-offset: 2px; }
.mk-banner { left: 9%; top: 13%; width: 15%; z-index: 1; }
.mk-laptop { left: 22%; top: 7%; width: 49%; z-index: 2; }
.mk-catalogue { left: 14%; top: 55%; width: 36%; z-index: 3; transform: rotate(-2.5deg); }
.mk-proposal { left: 45%; top: 58%; width: 29%; z-index: 4; transform: rotate(2.5deg); }
.mk-phone { left: 68.5%; top: 13%; width: 19%; z-index: 5; transform: rotate(1.5deg); }
.mk-catalogue .mk-tag, .mk-proposal .mk-tag { top: -13px; left: 14px; }

/* Trade show banner */
.bn { aspect-ratio: 0.4; display: flex; flex-direction: column; padding: 9cqw 8cqw 7cqw; background: #17191b; color: #fff; border-radius: 2cqw; box-shadow: 0 18px 30px rgba(18, 20, 18, 0.22); overflow: hidden; }
.bn-brand { margin: 0; font-size: 6.4cqw; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #e9b872; }
.bn-line { margin: 5cqw 0 7cqw; font-size: 12.5cqw; line-height: 1.02; font-weight: 600; letter-spacing: -0.04em; }
.bn-pic { flex: 1; margin: 0 -8cqw; overflow: hidden; }
.bn-pic img { object-position: 50% 45%; }
.bn-foot { margin: 6cqw 0 0; font-size: 6cqw; font-weight: 700; display: flex; justify-content: space-between; gap: 4cqw; }
.bn-foot span { color: #e9b872; }
.bn-stand { display: block; height: 4cqw; margin: -1cqw -6% 0; border-radius: 0 0 3cqw 3cqw; background: linear-gradient(#c6cac7, #9fa4a0); box-shadow: 0 10px 14px rgba(18, 20, 18, 0.18); }

/* Website on a laptop */
.lt-lid { padding: 2cqw 2cqw 2.6cqw; background: #1b1d1b; border-radius: 2.6cqw 2.6cqw 0.8cqw 0.8cqw; box-shadow: 0 22px 40px rgba(18, 20, 18, 0.2); }
.lt-screen { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; border-radius: 0.6cqw; }
.lt-base { height: 2.4cqw; margin: 0 -7%; border-radius: 0.4cqw 0.4cqw 3cqw 3cqw; background: linear-gradient(#e2e5e3, #aeb3af); position: relative; box-shadow: 0 14px 20px rgba(18, 20, 18, 0.16); }
.lt-base::before { content: ""; position: absolute; left: 43%; right: 43%; top: 0; height: 0.9cqw; border-radius: 0 0 1cqw 1cqw; background: #9ea39f; }
.ws { height: 100%; display: flex; flex-direction: column; font-size: 1.45cqw; color: #1d2b34; }
.ws-nav { display: flex; align-items: center; gap: 2.6cqw; padding: 1.5cqw 2.6cqw; font-weight: 600; }
.ws-nav b { font-size: 1.7cqw; letter-spacing: 0.12em; text-transform: uppercase; margin-right: auto; }
.ws-nav i { font-style: normal; padding: 0.6cqw 1.5cqw; border-radius: 9cqw; background: #1d2b34; color: #fff; }
.ws-hero { position: relative; flex: 1; min-height: 0; }
.ws-hero img { object-position: 50% 66%; }
.ws-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 16, 20, 0.55), rgba(10, 16, 20, 0) 42%); }
.ws-copy { position: absolute; z-index: 1; left: 3cqw; top: 3.2cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 0.9cqw; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); }
.ws-copy span { font-size: 1.5cqw; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ws-copy strong { font-size: 3.3cqw; line-height: 1.02; font-weight: 600; letter-spacing: -0.04em; max-width: 8ch; }
.ws-copy em { font-style: normal; font-size: 1.45cqw; font-weight: 700; padding: 0.8cqw 1.8cqw; border-radius: 9cqw; background: #fff; color: #1d2b34; text-shadow: none; }
.ws-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2cqw; padding: 1.4cqw 2.6cqw; background: #f3f4f2; }
.ws-row span { aspect-ratio: 4 / 3; background: #fff; border-radius: 0.6cqw; }
.ws-row img { object-fit: contain; padding: 8%; }

/* Printed catalogue spread */
.ct { aspect-ratio: 1.45; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 0.8cqw; box-shadow: 0 20px 34px rgba(18, 20, 18, 0.22); overflow: hidden; }
.ct-page { position: relative; min-width: 0; }
.ct-left { padding: 4.5cqw 4cqw; display: flex; flex-direction: column; background: linear-gradient(90deg, #fff 82%, #e9ebe9); }
.ct-right::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 14%); pointer-events: none; }
.ct-right img { object-position: 50% 70%; }
.ct-right span { position: absolute; right: 2.4cqw; bottom: 2cqw; z-index: 1; font-size: 2.2cqw; font-weight: 700; color: #fff; }
.ct-kicker { margin: 0; font-size: 2.1cqw; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6f7b84; }
.ct-cut { flex: 1; min-height: 0; margin: 1cqw 0; }
.ct-cut { display: flex; align-items: center; }
.ct-cut img { object-fit: contain; height: auto; max-height: 100%; mix-blend-mode: multiply; }
.ct-name { margin: 0; font-size: 3.9cqw; line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; color: #1d2b34; }
.ct-spec { margin: 0.8cqw 0 2cqw; font-size: 2cqw; color: #5c6670; }
.ct-dots { display: flex; gap: 1.2cqw; }
.ct-dots i { width: 3cqw; height: 3cqw; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }

/* Proposal on the desk */
.pp { aspect-ratio: 1.414; display: flex; flex-direction: column; padding: 4cqw; background: #fff; border-radius: 0.8cqw; box-shadow: 0 20px 34px rgba(18, 20, 18, 0.22); }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqw; padding-bottom: 2.4cqw; margin-bottom: 3cqw; border-bottom: 0.35cqw solid #1d2b34; font-size: 2.6cqw; color: #1d2b34; }
.pp-head b { flex: none; font-size: 4.2cqw; letter-spacing: -0.03em; }
.pp-head span { flex: 1 1 0; min-width: 0; color: #6f7b84; font-weight: 600; font-size: 2.2cqw; text-align: right; }
.pp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 64fr 36fr; gap: 3.4cqw; }
.pp-pic { min-height: 0; border-radius: 0.6cqw; overflow: hidden; }
.pp-pic img { object-position: 50% 62%; }
.pp-side { font-size: 2.5cqw; line-height: 1.35; color: #1d2b34; }
.pp-side p { margin: 0; }
.pp-h { margin-top: 2.4cqw !important; font-size: 2.1cqw; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #6f7b84; }
.pp-h:first-child { margin-top: 0 !important; }
.pp-sign { margin-top: 4cqw !important; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 2.2cqw; }

/* A text from a client */
.ph { aspect-ratio: 0.49; display: flex; flex-direction: column; border: 2.6cqw solid #141514; border-radius: 9cqw; background: #f4f5f3; overflow: hidden; box-shadow: 0 24px 40px rgba(18, 20, 18, 0.26); }
.ph-top { display: flex; align-items: center; gap: 3cqw; padding: 7cqw 5cqw 4cqw; background: #fff; border-bottom: 1px solid #e3e6e3; font-size: 4.6cqw; }
.ph-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ph-who b, .ph-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-who small { font-size: 3.8cqw; font-weight: 600; color: #6f7b84; }
.ph-av { flex: none; width: 10cqw; height: 10cqw; border-radius: 50%; display: grid; place-items: center; background: #1d2b34; color: #fff; font-weight: 800; font-size: 3.6cqw; letter-spacing: 0.02em; }
.ph-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4cqw; padding: 4cqw; }
.msg { max-width: 80%; border-radius: 6cqw; overflow: hidden; font-size: 4.4cqw; line-height: 1.3; }
.msg img { height: auto; aspect-ratio: 4 / 3; }
.msg p { margin: 0; padding: 2.6cqw 4cqw 3.2cqw; }
.msg.in { align-self: flex-start; background: #e4e7e4; border-bottom-left-radius: 1.6cqw; }
.msg.out { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 1.6cqw; }

/* --- Everything it does: six cards, then the tour ------------------------------- */
.lp-can { margin-top: clamp(64px, 8vw, 110px); }
.lp-can h2 { max-width: 22ch; }
.lp-can-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; margin-top: 34px; }
.lp-card { border-top: 1.5px solid var(--ink); padding-top: 18px; }
.lp-card h3 { margin: 18px 0 6px; font-size: 20px; letter-spacing: -0.025em; font-weight: 650; }
.lp-card p { margin: 0; color: var(--ink-2); line-height: 1.5; max-width: 40ch; }
/* Each card's icon: lime and black tiles alternating (top row lime, black,
   lime; bottom row black, lime, black). */
.cd-icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--lime); color: var(--ink); }
.cd-icon svg { width: 38px; height: 38px; }
.lp-card:nth-child(even) .cd-icon { background: var(--ink); color: var(--lime); }
.lp-more { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-top: 40px; padding: 22px 26px; border-radius: 22px; background: var(--surface); }
.lp-more p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.lp-more strong { color: var(--ink); }
.lp-tour-btn { flex: none; border: 1.5px solid var(--ink); }

/* --- The end: an invitation ------------------------------------------------------ */
.h-end {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end;
  margin-top: clamp(64px, 8vw, 110px); padding: clamp(32px, 5vw, 60px);
  border-radius: 28px; background: var(--dark); color: #fff;
}
.h-end h2 { color: #fff; max-width: 18ch; }
.h-end p { margin: 14px 0 0; color: #c4c8c4; font-size: 17px; line-height: 1.5; max-width: 52ch; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn-outline-light:hover:not(:disabled) { border-color: #fff; }

/* --- Smaller screens ------------------------------------------------------------- */
@media (max-width: 980px) {
  .lp-lead-row { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .h-actions { justify-content: flex-start; }
  /* The stage stacks: the website full width, the text and banner side by
     side, then the catalogue and the proposal. */
  .lp-stage {
    aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0; row-gap: 0; align-items: start; padding: 54px clamp(14px, 4vw, 40px) 30px; border-radius: 24px;
  }
  .mk { position: relative; inset: auto; width: auto; transform: none; }
  /* Each piece sits a little over the one before it; later ones are on top,
     so every label stays in view. */
  .mk-laptop { grid-column: 1 / -1; width: 92%; justify-self: center; order: 1; z-index: 1; }
  .mk-phone { width: min(96%, 300px); justify-self: end; margin: -9% 2% 0 0; transform: rotate(-1.5deg); order: 2; z-index: 3; }
  .mk-banner { width: min(100%, 290px); justify-self: start; margin: 6% 0 0 -4%; order: 3; z-index: 2; }
  .mk-catalogue { grid-column: 1 / -1; width: 96%; margin-top: -14%; transform: rotate(-1.5deg); order: 4; z-index: 4; }
  .mk-proposal { grid-column: 1 / -1; width: 90%; justify-self: end; margin-top: -6%; transform: rotate(1.5deg); order: 5; z-index: 5; }
  .mk-catalogue .mk-tag { top: -36px; left: 0; }
  /* On the right, so it doesn't sit over the catalogue's product name. */
  .mk-proposal .mk-tag { top: -36px; left: auto; right: 0; }
  .lp-can-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-end { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lp-stage { margin: 0 -8px; }
  .mk-tag, .mk-catalogue .mk-tag, .mk-proposal .mk-tag { font-size: 11px; padding: 3px 9px; top: -32px; }
  .lp-can-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .lp-more { padding: 18px; }
  .lp-tour-btn { width: 100%; justify-content: center; }
}

/* --- The tour (public/js/tour.js) ------------------------------------------------- */
dialog.tour {
  width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; overflow: auto; overscroll-behavior: contain;
  border-radius: 26px; background: var(--surface);
}
dialog.tour:not([open]) { display: none; }
dialog.tour::backdrop { background: rgba(12, 13, 12, 0.72); }
.tour-open, .tour-open body { overflow: hidden; }
.tour-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px 24px; }
.tour-count { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-2); }
.tour-close {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface-2);
  font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer;
}
.tour-close:hover { border-color: var(--ink); }
.tour-shot {
  position: relative; margin: 0 16px; border-radius: 16px; overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line);
}
.tour-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The ring: everything outside it dimmed, a lime outline drawn in. */
.tour-ring {
  position: absolute; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(18, 20, 18, 0); outline: 3px solid transparent; outline-offset: 0;
  transition: box-shadow 0.35s ease, outline-color 0.35s ease, outline-offset 0.35s ease;
}
.tour-ring.on { box-shadow: 0 0 0 9999px rgba(18, 20, 18, 0.42); outline-color: var(--lime); outline-offset: 2px; animation: tour-pulse 2.2s ease-in-out 0.4s infinite; }
@keyframes tour-pulse { 50% { outline-offset: 6px; } }
@media (prefers-reduced-motion: reduce) { .tour-ring, .tour-ring.on { transition: none; animation: none; } }
.tour-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: end; padding: 20px 24px 22px; }
.tour-copy h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.025em; }
.tour-copy p { margin: 0; color: var(--ink-2); line-height: 1.5; max-width: 56ch; }
.tour-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.tour-dots { display: flex; gap: 2px; }
.tour-dots button {
  position: relative; width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer;
}
.tour-dots button::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--line-2); transition: background 0.2s, inset 0.2s;
}
.tour-dots button[aria-selected="true"]::before { background: var(--ink); inset: 6px; }
.tour-btns { display: flex; gap: 8px; }
.tour-btns .btn { min-width: 96px; justify-content: center; }
.tour-back:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 700px) {
  dialog.tour { width: calc(100vw - 16px); border-radius: 20px; }
  .tour-top { padding: 10px 10px 8px 16px; }
  .tour-shot { margin: 0 10px; border-radius: 12px; }
  .tour-ring { border-radius: 8px; outline-width: 2px; }
  .tour-body { grid-template-columns: 1fr; padding: 16px 16px 16px; }
  .tour-copy h2 { font-size: 20px; }
  .tour-copy p { font-size: 15px; }
  .tour-nav { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .tour-dots button { width: 18px; }
  .tour-btns { margin-left: auto; }
  .tour-btns .btn { min-width: 0; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 380px) { .tour-dots { display: none; } .tour-nav { justify-content: flex-end; } }