/* ============================================================
   CONCRETE — shared footer ("Let's talk" + the intake bot + doc-foot).
   Used on every page except Services. Pairs with footer.js.
   ============================================================ */
.thedoor{ --open:1; position:relative; background:transparent; isolation:isolate; }
/* the footer field — a quiet dark gradient with one faint warm core behind the bot */
.door-stage{ position:relative; height:clamp(520px,72vh,900px); overflow:hidden; background:transparent; }

/* the invitation + the bot — the hero, centered in the field */
.door-call{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:6; text-align:center; width:min(92%,640px);
  opacity:calc(min(1, var(--open) * 1.4 - 0.12)); transition:opacity .15s linear; }
/* same treatment as the Case Studies / Services headers — Anton, uppercase, white */
.ec-header{ font-family:var(--disp); font-weight:400; font-size:clamp(30px,6vw,68px); line-height:.98; letter-spacing:.012em;
  text-transform:uppercase; color:#fff; margin:0 0 clamp(26px,4vh,44px); }
.ec-tally{ font-family:var(--mono); font-size:clamp(9px,1.05vw,11px); letter-spacing:.2em; text-transform:uppercase; color:#9a8d7c; margin:0 0 28px; }
/* the intake — the light speaking: a typed opener + a thin underline input + a red send-arrow */
.intake{ max-width:min(94%,540px); margin:0 auto; text-align:left; }
/* a proper chat, in the Concrete theme — avatar + bubbles; earlier lines fade up into the dark */
.intake-log{ display:flex; flex-direction:column; gap:11px; margin:0 0 15px; max-height:46vh; overflow-y:auto;
  scrollbar-width:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 13%, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 13%, #000 100%); }
.intake-log::-webkit-scrollbar{ display:none; }
.msg{ display:flex; gap:9px; align-items:flex-end; max-width:100%; }
.msg.bot{ justify-content:flex-start; }
.msg.user{ justify-content:flex-end; }
/* the bot's avatar is the Concrete mark */
.msg-avatar{ flex:none; width:30px; height:30px; border-radius:50%; background:#100f15 url(assets/logo.svg) center / 60% no-repeat;
  border:1px solid rgba(255,224,186,.18); box-shadow:0 0 16px rgba(229,52,43,.22); }
.msg-bubble{ max-width:80%; padding:11px 15px; border-radius:15px; font-family:var(--sans);
  font-size:clamp(14px,1.05vw,16px); line-height:1.52; letter-spacing:.01em; word-wrap:break-word; }
.msg.bot .msg-bubble{ background:rgba(24,21,26,.9); border:1px solid rgba(255,224,186,.15); color:#f4e8d8;
  border-bottom-left-radius:5px; }   /* backdrop-filter removed: Safari re-rasterises it on every keystroke = typing lag */
.msg.user .msg-bubble{ background:rgba(229,52,43,.13); border:1px solid rgba(229,52,43,.42); color:#fceae3; border-bottom-right-radius:5px; }
/* live cursor (streaming reply + the opener as it types) */
.msg-bubble.streaming::after,.bot-caret{ content:''; display:inline-block; width:2px; height:1.02em; margin-left:3px;
  vertical-align:-0.16em; background:#E5342B; box-shadow:0 0 8px rgba(229,52,43,.85); animation:caretBlink 1s steps(1) infinite; }
.intake.is-conversing .bot-caret{ display:none; }
@keyframes caretBlink{ 50%{ opacity:0 } }
/* the composer — a themed chat input bar with a round red send */
.intake-form{ display:flex; align-items:center; gap:8px; padding:6px 6px 6px 16px; border-radius:24px;
  background:rgba(15,13,18,.92); border:1px solid rgba(255,224,186,.18);
  /* backdrop-filter removed: on each keystroke Safari re-renders the blur over the animated door → big typing lag */
  transition:border-color .25s, box-shadow .25s; }
.intake-form:focus-within{ border-color:rgba(255,224,186,.4); box-shadow:0 0 0 1px rgba(255,224,186,.1); }
.intake-input{ flex:1 1 auto; min-width:0; background:none; border:0; outline:none; font-family:var(--sans);
  font-size:clamp(14px,1.05vw,16px); letter-spacing:.02em; color:#f2e6d4; padding:5px 0; }
.intake-input::placeholder{ color:#867c6c; }
.intake-send{ flex:none; width:34px; height:34px; display:grid; place-items:center; cursor:pointer; border-radius:50%;
  background:#E5342B; border:0; color:#fff; font-size:15px; transition:transform .15s, box-shadow .2s; }
.intake-send:hover,.intake-send:focus-visible{ box-shadow:0 0 20px rgba(229,52,43,.6); transform:translateY(-1px); outline:none; }
/* always-available handoff to the team */
.intake-handoff{ display:block; margin:14px auto 0; padding:4px; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:clamp(10px,1.1vw,12px); letter-spacing:.07em; color:#8a8276; transition:color .2s; }
.intake-handoff:hover,.intake-handoff:focus-visible{ color:#E5342B; outline:none; }
@media (prefers-reduced-motion: reduce){ .bot-caret,.msg-bubble.streaming::after{ animation:none; opacity:.5; } .intake-send:hover{ transform:none; } }
/* document foot — always present, the foot of the case file */
.foot-doc{ position:relative; z-index:3; background:#070709; border-top:1px solid rgba(239,239,236,.1);
  padding:clamp(26px,4vw,46px) clamp(20px,6vw,80px) clamp(30px,4vw,48px);
  font-family:var(--mono); font-size:11px; letter-spacing:.07em; color:#807e76; display:grid; gap:clamp(16px,2vw,22px); }
.foot-doc a{ color:#cfccc4; text-decoration:none; transition:color .2s; }
.foot-doc a:hover{ color:#fff; }
.fd-links{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 30px; }
.fd-nav{ display:flex; gap:clamp(18px,3vw,34px); flex-wrap:wrap; text-transform:uppercase; letter-spacing:.12em; }
.fd-soc{ display:flex; gap:22px; text-transform:uppercase; letter-spacing:.12em; }
.fd-sign{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 30px; border-top:1px solid rgba(239,239,236,.07); padding-top:clamp(16px,2vw,22px); }
/* mark + head-office address travel together as the left cluster, so the row reads as three balanced
   groups (brand+address · Framer badge · legal) instead of four items strewn across by space-between */
.fd-sign-l{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; }
/* the real Concrete logo lockup, same as the header mark */
.fd-mark{ display:flex; align-items:center; gap:9px; font-family:var(--disp); font-size:clamp(18px,2.3vw,23px); letter-spacing:.04em; text-transform:uppercase; color:#fff; }
.fd-mark .logo{ height:22px; width:auto; display:block; flex:none; }
.fd-mark:hover{ color:#fff; }
/* head office address — quiet mono, sits between the mark and the legal links */
.fd-addr{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:#8f8b80; }
/* legal cluster — Privacy / Terms links + the © line */
.fd-legal{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:5px 16px; letter-spacing:.08em; font-family:var(--sans); color:#a8a49a; }
.fd-legal a{ color:#cfccc4; text-decoration:none; transition:color .2s; }
.fd-legal a:hover{ color:#fff; }
.fd-copy{ color:#8f8b80; }
/* Framer Expert badge (injected by footer.js) */
.framer-badge{ display:inline-flex; align-items:center; gap:9px; padding:7px 13px; border-radius:8px; border:1px solid rgba(239,239,236,.18); background:rgba(255,255,255,.03); color:#cfccc4; font-family:var(--sans); font-size:11px; letter-spacing:.11em; text-transform:uppercase; line-height:1.1; text-decoration:none; transition:border-color .2s, color .2s; }
.framer-badge:hover{ border-color:rgba(239,239,236,.42); color:#fff; }
.framer-badge .fb-mark{ width:13px; height:auto; color:#fff; flex:none; }
.framer-badge .fb-txt b{ color:#fff; font-weight:700; }
/* mobile: the chat bot text bottomed out at the 12px clamp min — too small on a phone. bump it up,
   and set the input to 16px so iOS doesn't zoom the viewport when it's focused. */
@media (max-width:720px){
  .msg-bubble{ font-size:16.5px; line-height:1.55; max-width:86%; padding:12px 15px; }
  .intake-input{ font-size:16.5px; }
  .intake-input::placeholder{ font-size:16px; }
  .intake-form{ padding:8px 8px 8px 17px; }
  .intake-handoff{ font-size:13px; }
  .ec-tally{ font-size:11px; }
  /* the 72vh stage centred the chat, leaving a huge void above "LET'S TALK". Let it flow in instead. */
  .door-stage{ height:auto; min-height:0; overflow:visible; }
  .door-call{ position:static; transform:none; width:min(94%,640px); margin:0 auto;
    padding:clamp(26px,5vh,52px) 0 clamp(22px,4vh,40px); }
  .ec-header{ margin-bottom:clamp(18px,3vh,30px); }
}

@media (prefers-reduced-motion: reduce){ .ds-motes i{ animation:none; } }