/* ==========================================================================
   LoomReach · Direction E "Showroom" · Contact (contact.html) and Thanks (thanks.html)
   Loaded after site.css. The form block is the homepage HP2-12 component (.lr-start):
   on Contact it opens the page, and it is the page's one full-coral field.
   ========================================================================== */

/* ---------- CT3-00 / CT3-01 · Head, form, card and next steps in one coral room ---------- */
.lr-contact { padding-top: 8px; }
/* the same head rhythm as the inner pages: the H1 lands where theirs does. There is no eyebrow
   (the H1 is the menu's call to action), so its room stays empty, as on How we work. */
.lr-contact .lr-room { padding-top: var(--lr-head-top); }
.lr-contact .lr-start__copy { gap: var(--lr-copy-gap); padding-top: var(--lr-eyebrow-slot); }
.lr-contact .lr-contact__h1 { margin-top: 2px; }
#form { scroll-margin-top: 88px; }
#form:focus { outline: none; }
@media (max-width: 599px) {
  /* the room meets the header, like the hero stage on the other pages */
  .lr-contact { padding-top: 0; }
  .lr-contact .lr-room { border-radius: 0 0 var(--lr-r-xl) var(--lr-r-xl); }
}
@media (min-width: 1024px) {
  .lr-contact .lr-start__grid {
    grid-template-areas: "copy panel" "card panel" "next panel";
    grid-template-rows: auto auto 1fr;
  }
  .lr-founder-card { grid-area: card; align-self: start; }
}

/* Founder mini-card: a white panel on the coral field */
.lr-founder-card {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 14px;
  padding: 10px 20px 18px 10px; border-radius: var(--lr-r-l);
}
.lr-founder-card__photo { border-radius: 16px; }
.lr-founder-card__photo .lr-photo__frame { inset: 6px; border-radius: 11px; }
.lr-founder-card__photo .lr-photo__label { padding: 0 2px; }
.lr-founder-card__id { display: grid; gap: 2px; min-width: 0; }
.lr-founder-card__name { font-size: 1.125rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
.lr-founder-card__role { font-size: .9375rem; line-height: 1.4; color: var(--lr-muted); }
.lr-founder-card__link { margin-top: 2px; font-size: .9375rem; }
.lr-founder-card__link .lr-link { font-weight: 600; }
.lr-founder-card__line {
  grid-column: 1 / -1; padding: 12px 0 0 10px; border-top: 1px solid var(--lr-line);
  font-size: .96875rem; line-height: 1.5; color: var(--lr-ink-2);
}
@media (min-width: 600px) {
  .lr-founder-card { grid-template-columns: 92px minmax(0, 1fr); column-gap: 20px; }
  .lr-founder-card__photo .lr-photo__frame { inset: 8px; border-radius: 12px; }
}

/* ---------- CT3-02 · Other ways to reach us: the envelope on a sand plinth, then a three-row list ---------- */
.lr-reach__grid { display: grid; gap: 24px; align-items: center; }
.lr-reach .lr-reach__obj { display: grid; width: 180px; }
.lr-reach__body { display: grid; gap: 20px; min-width: 0; }
.lr-reach__list { display: grid; }
.lr-reach__row { display: grid; gap: 2px; padding-block: 14px; border-top: 1px solid var(--lr-line); }
.lr-reach__row:last-child { border-bottom: 1px solid var(--lr-line); }
.lr-reach__k { font-family: var(--lr-font-mono); font-size: .75rem; font-weight: 400; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-muted); }
.lr-reach__v { font-size: 1.0625rem; line-height: 1.5; color: var(--lr-ink-2); text-wrap: pretty; overflow-wrap: anywhere; }
.lr-reach__v .lr-link { font-weight: 600; }
@media (min-width: 860px) {
  .lr-reach__grid { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); }
  .lr-reach .lr-reach__obj { width: 260px; }
  .lr-reach__row { grid-template-columns: 120px minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding-block: 16px; }
  .lr-reach__v { overflow-wrap: normal; }
}

/* ---------- CT3-03 · Assessing us as a supplier? (a sky room, the same inset as every room; the sheets on a sand plinth) ---------- */
.lr-supplier { padding-top: 0; }
.lr-supplier .lr-room { padding-block: clamp(32px, 4.6vw, 64px); }
.lr-supplier__band { display: grid; gap: 20px; justify-items: start; }
.lr-supplier__plinth {
  position: relative; display: grid; place-items: center; width: 160px; aspect-ratio: 1; border-radius: var(--lr-r-xl); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #F7F5F1 0%, #ECE8E0 100%);
}
.lr-supplier__plinth::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); }
.lr-supplier__plinth::after { content: ""; position: absolute; left: 50%; bottom: 10%; width: 54%; height: 12%; background: var(--lr-obj-floor); transform: translateX(-50%); }
.lr-supplier__plinth picture { position: relative; z-index: 1; width: 86%; height: 86%; }
.lr-supplier__plinth img { width: 100%; height: 100%; object-fit: contain; }
.lr-supplier__copy { display: grid; gap: 14px; max-width: 44em; }
.lr-supplier__title { font-size: var(--lr-fs-big); }
.lr-supplier__copy p { font-size: 1.0625rem; color: var(--lr-ink-2); text-wrap: pretty; }
.lr-supplier__copy .lr-link--arrow { color: var(--lr-ink); }
.lr-supplier__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
@media (min-width: 860px) {
  .lr-supplier__band { grid-template-columns: 220px minmax(0, 1fr); align-items: center; column-gap: clamp(28px, 4vw, 56px); }
  .lr-supplier__plinth { width: 220px; }
}
/* phones: both objects stand at 88 px beside their heading (as on every other page), the text under both */
@media (max-width: 599px) {
  .lr-reach__grid, .lr-supplier__band { grid-template-columns: minmax(0, 1fr) 88px; column-gap: 14px; row-gap: 18px; align-items: start; }
  .lr-reach__body, .lr-supplier__copy { display: contents; }
  .lr-reach .lr-reach__obj, .lr-supplier__plinth { grid-column: 2; grid-row: 1; width: 88px; border-radius: 18px; }
  .lr-reach__body .lr-h2, .lr-supplier__title { grid-column: 1; grid-row: 1; align-self: center; }
  .lr-reach__list, .lr-supplier__copy > p { grid-column: 1 / -1; }
  .lr-supplier__copy > p { margin-top: -4px; }
}

/* ==========================================================================
   thanks.html · Message received (no form, no hero object, no call to action)
   ========================================================================== */
.lr-thanks { padding-top: 8px; }
/* the head rhythm of the inner pages: the check mark stands above the H1, in the row the eyebrow takes on
   other pages (it reaches up into the room's top padding), so the H1 lands at the same height and on the
   same left edge as every other page's */
.lr-thanks__room.lr-room { padding-block: var(--lr-head-top) clamp(40px, 6vw, 88px); }
.lr-thanks__grid { display: grid; gap: clamp(32px, 4vw, 48px); }
.lr-thanks__copy { display: grid; gap: var(--lr-copy-gap); justify-items: start; align-content: start; max-width: 44rem; }
.lr-thanks__head { display: grid; gap: var(--lr-copy-gap); justify-items: start; }
.lr-thanks__head .lr-h1 { margin-top: 2px; }
.lr-thanks__copy .lr-lead { color: var(--lr-ink-2); }
.lr-thanks__copy .lr-lead .lr-link { color: var(--lr-ink); font-weight: 600; }
/* a plain drawn check (ink), no disc: a filled circle would read as a sequence sphere */
.lr-thanks__mark { display: block; width: 40px; height: 40px; margin-top: calc(var(--lr-eyebrow-slot) - var(--lr-copy-gap) - 40px); }
.lr-thanks__mark svg { display: block; width: 100%; height: 100%; }
.lr-thanks .lr-form__proto { background: #FFFFFF; width: 100%; }
.lr-thanks__wait { display: grid; gap: 4px; align-content: start; }
.lr-thanks__wait .lr-needs__title { margin-bottom: 12px; }
.lr-thanks__wait .lr-needs__list { grid-template-columns: minmax(0, 1fr); }
.lr-thanks__wait .lr-need { font-size: 1.0625rem; font-weight: 600; }
/* each page's object at exhibit size on its sand plinth, not a sticker */
.lr-thanks__wait .lr-need__thumb { width: 88px; height: 88px; border-radius: 18px; }
.lr-thanks__wait .lr-need__thumb::after { content: ""; position: absolute; left: 50%; bottom: 10%; width: 50%; height: 11%; background: var(--lr-obj-floor); transform: translateX(-50%); }
.lr-thanks__wait .lr-need__thumb { position: relative; }
.lr-thanks__wait .lr-need__thumb picture { position: relative; z-index: 1; }
@media (max-width: 599px) {
  .lr-thanks__mark { width: 28px; height: 28px; margin-top: calc(var(--lr-eyebrow-slot) - var(--lr-copy-gap) - 28px); }
  .lr-thanks { padding-top: 0; }
  .lr-thanks__room.lr-room { border-radius: 0 0 var(--lr-r-xl) var(--lr-r-xl); }
}
@media (min-width: 1024px) {
  .lr-thanks__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .lr-thanks__wait { padding-top: var(--lr-eyebrow-slot); }
}