/* ============================================================
   OVERLAYS — everything drawn on top of the room: the shared button,
   the overlay panel (case studies / profile / contact), and the
   entry plaque. Behavior is in overlays.js.
   ============================================================ */

/* ============================================================
   BUTTON — the ONE button style, used everywhere a button or link-
   as-button appears (entry plaque, case-study CTAs, contact form).
   No variants, no size overrides. Sage gray-green, not blue.
   ============================================================ */
.btn {
  display: inline-block;
  padding: 8px 30px;
  background: rgba(159, 170, 160, 1);
  border: 2px solid rgba(110, 120, 112, 1);
  color: #1a1510;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.25s ease;
  touch-action: manipulation;   /* a double-tap on ENTER must not zoom the page */
}
.btn:hover {
  background: rgba(140, 150, 142, 1);
  border-color: rgba(90, 100, 92, 1);
}

/* ============================================================
   OVERLAY CARD — one shared white card for case studies (scrolls),
   the profile (portrait), and the contact form (hand). Translucent
   backdrop so the room stays visible behind it. Opened from
   overlays.js.
   ============================================================ */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  /* Height from the REAL visible viewport, not `vh`. On iOS, vh is the
     tall viewport with the browser toolbars hidden, so a 92vh card ran
     off the top and bottom whenever the toolbars were showing. The live
     site sizes its modals from --viewport-height for the same reason.
     On desktop the two are identical. */
  bottom: auto;
  height: var(--viewport-height, 100vh);
  background: rgba(0, 0, 0, 0.6);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.overlay-backdrop.is-open { opacity: 1; visibility: visible; }

/* OVERLAY CARD — the white box itself. Sized directly (no wrapper, no
   background art); the 6% inset the old wrap gave it is now baked into
   the backdrop's padding. */
.overlay-card {
  position: relative;
  width: min(1050px, 92vw);
  height: min(calc(var(--viewport-height, 100vh) * 0.92), 950px);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #1f3d3a;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  font-family: 'Source Serif 4', Georgia, serif;
}

.overlay-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  border-bottom: 1px solid #e3dfd4;
}
.overlay-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1.5px solid #b9c4b3;
  border-radius: 50%;
  color: #4d6b45;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  touch-action: manipulation;
}
.overlay-nav-btn:hover { background: #4d6b45; border-color: #4d6b45; color: #fff; }
.overlay-counter {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #8a9184;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  min-width: 48px;
  text-align: center;
}
.overlay-close {
  margin-left: auto;
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #1f3d3a;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.2s ease;
}
.overlay-close:hover { color: #4d6b45; }

.overlay-dots {
  display: none;
  flex-shrink: 0;
  justify-content: center;
  gap: 7px;
  padding: 10px 0 4px;
}
.overlay-dot { width: 6px; height: 6px; border-radius: 50%; background: #d6d0c2; transition: background 0.25s ease, transform 0.25s ease; }
.overlay-dot--active { background: #4d6b45; transform: scale(1.35); }
@media (max-width: 700px) { .overlay-dots { display: flex; } }

.overlay-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 44px 40px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transition: opacity 0.2s ease;
}
.overlay-content h1 { margin: 0 0 6px; font-family: 'Jost', sans-serif; font-weight: 700; font-size: 38px; line-height: 1.15; color: #1f3d3a; }
.overlay-content h2 { margin: 0 0 28px; font-family: 'Jost', sans-serif; font-weight: 400; font-size: 21px; color: #4d6b45; }
.overlay-content h3 { margin: 30px 0 10px; font-family: 'Jost', sans-serif; font-weight: 700; font-size: 23px; color: #1f3d3a; }
.overlay-content p, .overlay-content li { font-size: 17px; line-height: 1.65; color: #2c2b26; }
.overlay-content p { margin: 0 0 15px; }
.overlay-content ul { margin: 15px 0; padding-left: 32px; }
.overlay-content li { margin-bottom: 12px; }
.overlay-content li strong { color: #1f3d3a; font-weight: 600; }
.overlay-quote { font-style: italic; color: #4a4a45; margin: 0 0 18px; }
.overlay-quote-source { font-style: normal; font-family: 'Jost', sans-serif; font-size: 13px; color: #8a9184; letter-spacing: 0.5px; }

.overlay-field { display: block; margin-bottom: 18px; font-family: 'Jost', sans-serif; }
.overlay-field span { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: #4d6b45; margin-bottom: 6px; }
.overlay-field input, .overlay-field textarea {
  width: 100%;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  padding: 10px 12px;
  border: 1.5px solid #d6d0c2;
  border-radius: 4px;
  color: #1f3d3a;
  background: #fbfaf7;
}
.overlay-field input:focus, .overlay-field textarea:focus {
  outline: none;
  border-color: #4d6b45;
}
.overlay-field textarea { resize: vertical; }

/* ============================================================
   ENTRY PLAQUE — the greeting on the bot wall. Same translucent-
   backdrop pattern as .overlay-backdrop, but the copy sits directly
   on the plaque image rather than in a white card.
   ============================================================ */
.entry-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.entry-backdrop.is-open { opacity: 1; visibility: visible; }

.entry-plaque {
  position: relative;
  width: min(1100px, 92vw);
}
.entry-plaque img {
  display: block;
  width: 100%;
  height: auto;
  /* Reserve the plaque's height before the file arrives, so the copy
     sits in its final place from first paint instead of collapsing onto
     a zero-height box and jumping when the image lands. Update if the
     plaque art's proportions change. */
  aspect-ratio: 5671 / 2779;
}
/* Fallback if plaque_entry.webp 404s — an explicit size instead of
   collapsing to zero. */
.entry-plaque.bg-failed {
  width: min(1100px, 92vw);
  height: min(500px, 60vh);
  background: #2a2a2a;
  border-radius: 8px;
}
.entry-plaque.bg-failed img { display: none; }

.entry-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6% 10%;
  color: #1a1510;
  font-family: 'Jost', sans-serif;
}
.entry-copy h1 {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 3.6vw, 40px);
  line-height: 1.25;
}
.entry-copy p {
  margin: 1.4em 0 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.4vw, 17px);
  line-height: 1.5;
  max-width: 46ch;
}
/* spacing only — color/shape/etc. all come from .btn at the top of this file */
.entry-copy .btn {
  margin-top: clamp(20px, 3vw, 36px);
}

/* ---- Phones: the square plaque (plaque_entry_mobile.webp, via the
   <picture> in index.html) ------------------------------------------
   Ported from the live site's modals.css: a square placard, 75vw wide
   (95vw on phones under 400px), centred on the frame and dropped so the
   eyes show above it. The only change from the live site is HOW FAR it
   drops: not a viewport-% fudge but the frame's own geometry — the
   plaque's top edge lands exactly on the chat box's top edge (same
   variables chatbot.css positions the frame with), so eyes and frame-top
   are visible above it and the greeting text is covered, on every phone.
   The image sets its own height (`auto` ratio), never squashed. */
@media (max-width: 599px) {
  .entry-backdrop {
    display: block;
    padding: 0;
    --plaque-top: calc(
      var(--viewport-height, 100vh) / 2
      - var(--frame-vertical-offset)
      - var(--frame-size) / 2
      + var(--frame-size) * var(--chat-top-pct)
    );
  }
  .entry-plaque {
    position: absolute;
    left: 50%;
    top: var(--plaque-top);
    transform: translateX(-50%);
    /* PLAQUE SIZE ON PHONES — this one line. 100vw = edge to edge (the
       art's own bevel is the margin, as on the live site). Height follows
       the image; the top edge stays pinned to the chat box, so a bigger
       plaque grows downward. */
    width: 100vw;
    max-width: none;
    height: auto;
  }
  .entry-plaque img {
    width: 100%;
    height: auto;
    aspect-ratio: auto 3084 / 2775;
  }
  .entry-plaque.bg-failed { width: 100vw; max-width: none; height: 90vw; }
  .entry-copy { padding: 9% 9%; }
  .entry-copy h1 { font-size: 19px; line-height: 1.25; }
  .entry-copy p  { font-size: 13px; line-height: 1.45; margin-top: 1em; max-width: none; }
  .entry-copy .btn { margin-top: 16px; padding: 7px 24px; font-size: 15px; letter-spacing: 2px; }
}
@media (max-width: 399px) {
  /* Smaller phones: same full width; only the type steps up a notch. */
  .entry-copy h1 { font-size: 20px; }
  .entry-copy p  { font-size: 14px; }
}

.case-study-video { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; margin: 10px 0 26px; border-radius: 4px; overflow: hidden; background: #111; }
.case-study-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.overlay-footer { margin-top: 44px; padding-top: 30px; border-top: 1px solid #e3dfd4; text-align: center; }
.overlay-footer p { font-family: 'Jost', sans-serif; font-size: 19px; font-weight: 500; color: #1f3d3a; margin: 0 0 20px; }

@media (max-width: 700px) {
  /* Phones: the card becomes a sheet — nearly the full visible height,
     a grab handle on top, and pulling its top strip (the arrows/× bar)
     down closes it (pull-to-close.js). The card's height comes from stretching to the
     backdrop's content box, so the margins live in ONE place: the
     backdrop's padding. The bottom margin also clears the home indicator
     when the browser's toolbar is tucked away. */
  .overlay-backdrop {
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .overlay-card {
    width: 94vw;
    height: auto;
    align-self: stretch;
    will-change: transform;   /* it moves with the finger */
  }
  .overlay-card::before {
    content: '';
    position: absolute;
    top: 7px; left: 50%;
    width: 38px; height: 4px;
    border-radius: 2px;
    background: #d6d0c2;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .overlay-header { padding: 20px 18px 12px; }
  .overlay-content { padding: 22px 22px 34px; }
  .overlay-content h1 { font-size: 28px; }
  .overlay-content h2 { font-size: 17px; margin-bottom: 20px; }
  .overlay-content h3 { font-size: 19px; }
  .overlay-content p, .overlay-content li { font-size: 16px; }
}