/* THE AVILA COLLECTION — method illustration, closing section and footer, revision 9
   Loads last, after avila-r8.css. Homepage only.

   lantern-ink.png  305 x 874 visible artwork, trimmed to the true alpha bounding box of
   "Ornamental Lantern - source.png". Recolour only: RGB set to palette espresso #2b1a12,
   each pixel keeping its own alpha scaled by 0.55 + 0.45 x darkness so the engraving's
   tonal modelling survives at small size. No dilation, no blur, no stroke widening —
   geometry is pixel-identical to the source. */

/* ---------- 1. The method: lantern in place of the horizontal rule ---------- */
.rule-accent{display:none}
.orn-method{
  display:block;height:140px;aspect-ratio:305/874;
  margin:0 0 1.5rem;
  background:url("img/brand/lantern-ink.png") left center/contain no-repeat}

/* ---------- 2. Closing invitation: compact, balanced, single primary action ---------- */
.close--compact{padding-block:clamp(3rem,5vw,4.25rem)}
.close__inner{text-align:center;max-width:44rem;margin-inline:auto}
/* The totem insertion point stays in the markup but reserves no height for visitors. */
body:not(.review) .close--compact .slot--totem{display:none}
body.review .close--compact .slot--totem{margin-bottom:1.6rem}
.close--compact h2{margin-top:0;margin-bottom:.75rem}
.close--compact .lede{max-width:40rem;margin:0 auto 1.9rem}
.close__actions{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.85rem 1.5rem;margin:0}
.close .btn{
  font-family:var(--font-label,inherit);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;display:inline-block;line-height:1}
.close .btn--primary{
  background:var(--gold);color:var(--anchor-espresso);
  padding:.95rem 2.1rem;border:1px solid var(--gold)}
.close .btn--primary:hover{background:var(--surface-1);border-color:var(--surface-1)}
.close .btn--quiet{
  color:var(--surface-3);padding:.95rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--surface-3) 45%,transparent)}
.close .btn--quiet:hover{color:var(--surface-1);border-bottom-color:var(--surface-1)}

/* ---------- 3. Footer: brand and service area left, contact right ---------- */
footer.foot{padding-block:2rem}
footer.foot .wrap{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:1.1rem 2.5rem;line-height:1.7}
.foot__brand,.foot__contact{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.foot__contact{text-align:right;align-items:flex-end}
.foot__name{color:var(--surface-3);letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}
.foot__area{color:var(--surface-4)}
.foot__contact a{overflow-wrap:anywhere}

@media (max-width:900px){
  .orn-method{height:100px;margin-bottom:1.2rem}
}
@media (max-width:700px){
  .close--compact{padding-block:2.75rem}
  .close__actions{flex-direction:column;gap:1.1rem}
  .close .btn--primary{width:100%;max-width:20rem;text-align:center;padding-block:1rem}
  .close .btn--quiet{padding:.2rem 0}
  footer.foot .wrap{flex-direction:column;gap:1.25rem}
  .foot__contact{text-align:left;align-items:flex-start}
}