/* KAMTOBE Creations: the tablet layout (601 to 1100px wide), 31 October 2026.
   Loaded after css/style.css with media="(min-width: 601px) and (max-width: 1100px)", so it never reaches a phone or
   a desktop. Same content, wording, images, order and design language as the desktop, composed for a tablet: a solid
   bar, the gallery in a framed window on the first screen, and the width used for two-column sections.
   Two shapes: portrait tablets (up to 820px, where the 3D gallery sits above the words) and landscape tablets
   (821 to 1100px, where it sits beside them, as on the desktop). */

:root { --band-gap: 14px; }

/* ---------- Bar: solid graphite (brushed silver in light mode), so nothing from the gallery runs through the logo ---------- */
.bar,
.bar.is-solid {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--line);
}
.bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--metal-silver);
  opacity: 0.32;
  pointer-events: none;
}
.nav a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- First screen: the gallery in a framed window ---------- */
/* The live 3D (or its still) stays fixed behind the page. The hero is solid page colour with one rounded window onto
   it, edged in brushed silver; scene.js centres the gallery in the free space, which is that window. */
.hero { isolation: isolate; overflow: clip; background: none; }
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 22px;
  pointer-events: none;
}
.hero::before { z-index: -1; box-shadow: 0 0 0 100vmax var(--bg), inset 0 -50px 50px -36px rgba(var(--shade), 0.5); }
.hero::after {
  padding: 1.2px;
  background: var(--metal-silver);
  background-size: 220% 100%;
  background-position: 80% 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.75;
}
.cta-row .btn { flex: 0 0 auto; }

/* ---------- Ask Meret and the cookie choice ---------- */
/* A safe area at the end of the page, so the launcher never sits on the last links. */
.foot { padding-bottom: calc(28px + 72px + env(safe-area-inset-bottom)); }
/* The cookie choice: one compact strip above the launcher, words beside two equal buttons. */
.kc-consent {
  width: min(900px, calc(100% - 2 * var(--gutter)));
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 22px;
  padding: 14px 16px 14px 20px;
  font-size: 0.84rem;
  line-height: 1.45;
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 64px);
}
.kc-consent-actions { justify-content: flex-end; }
.kc-consent-actions button { flex: 1 1 0; min-width: 118px; }

/* ---------- Tap targets: every control and stand-alone link at least 44 x 44px ---------- */
.btn-small { min-height: 44px; }
.meret-links a, .meret-options .chip { min-height: 44px; }
.foot-legal a, .foot-cookie { display: inline-flex; align-items: center; min-height: 44px; }
.contact-list .follow-links a { min-width: 44px; justify-content: center; }
.contact-list li > a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.brand { min-height: 44px; }

/* ======================================================================================
   Portrait tablets, 601 to 820px: the gallery band above the words
   ====================================================================================== */
@media (max-width: 820px) {
  :root { --band: clamp(240px, 33svh, 420px); }
  .hero {
    min-height: 0;
    justify-content: flex-start;
    padding: calc(var(--bar-h) + var(--band-gap) + var(--band) + 30px) var(--gutter) 16px;
  }
  .hero::before,
  .hero::after {
    left: var(--gutter);
    right: var(--gutter);
    top: calc(var(--bar-h) + var(--band-gap));
    height: var(--band);
  }
  .hero-copy { max-width: 640px; }
  .hero h1 { font-size: clamp(2.3rem, 6.1vw, 3rem); line-height: 1.05; }
  .lead { margin-top: 16px; font-size: 1.06rem; }
  .cta-row { margin-top: 24px; }
  .trust { margin-top: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scroll-cue { margin-top: 14px; }

  /* Sections: the width is used, two columns where it reads well. */
  .founder-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 32px; }
  .founder-copy h2 { font-size: clamp(2rem, 4.6vw, 2.5rem); }
  .founder-lead { font-size: 1.06rem; }
  .founder-copy .cta-row .btn { white-space: normal; text-align: center; }
  .twin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .memory { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .memory .disclosure { grid-column: 1 / -1; }
  .custom-card { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .founder { width: min(300px, 46vw); }
  .seats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .seat-frame { border-radius: 60px 60px 10px 10px; }
  .seat-name { font-size: 1.05rem; }
  .agent-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-detail > div:nth-of-type(3) { grid-column: 1 / -1; }
  .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
}

/* Small tablets and large phones on their side (601 to 767px): the menu button, as on phones. */
@media (max-width: 767px) {
  :root { --bar-h: 60px; }
  .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder-grid, .twin { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================================
   Landscape tablets, 821 to 1100px: the words on the left, the gallery in a framed window beside them
   ====================================================================================== */
@media (min-width: 821px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas: "copy band" "trust trust" "cue cue";
    column-gap: clamp(28px, 4vw, 48px);
    align-content: center;
    padding: calc(var(--bar-h) + 20px) var(--gutter) 22px;
  }
  .hero-copy { grid-area: copy; max-width: none; align-self: center; }
  .hero::before,
  .hero::after { position: relative; grid-area: band; min-height: 300px; }
  .trust { grid-area: trust; max-width: none; margin-top: 28px; }
  .scroll-cue { grid-area: cue; justify-self: start; }
  .hero h1 { font-size: clamp(2.3rem, 4.3vw, 3rem); }
  /* The shade sits under the words only, never over the framed gallery. */
  .stage-shade {
    background:
      linear-gradient(90deg, rgba(var(--shade), 0.97) 0%, rgba(var(--shade), 0.92) 36%, rgba(var(--shade), 0) 54%),
      linear-gradient(0deg, rgba(var(--shade), 0.9) 0%, rgba(var(--shade), 0) 24%);
  }
}
@media (min-width: 940px) {
  .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ======================================================================================
   Phones and small tablets on their side (short screens)
   ====================================================================================== */
@media (max-height: 520px) {
  :root { --bar-h: 56px; --band: clamp(150px, 52svh, 240px); }
  .hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.4rem); }
  .lead { font-size: 1rem; }
  .hero-copy { max-width: none; }
  /* The cookie choice becomes a low strip on the bottom edge, and the launcher a small round button that waits for the choice. */
  .kc-consent {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 10px max(var(--gutter), env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    font-size: 0.8125rem;
  }
  .meret-btn { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); min-height: 0; padding: 4px; }
  .meret-btn span { display: none; }
  body:has(> .kc-consent:not([hidden])) .meret-btn { visibility: hidden; }
}

/* ---------- Sections on every tablet ---------- */
/* Footer on two columns: the studio on the left, the menu and products beside it, the company line below. */
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-row: span 2; }
  .foot-products { grid-column: 2; }
  .foot-legal { grid-column: 1 / -1; }
}
/* Work: three columns once there is room for them. */
@media (min-width: 900px) {
  .work-grid { columns: 3 240px; column-gap: 24px; }
}