/* REALTYTHANKYOU — hero + what arrives + examples (spec composition) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=Inter:wght@400;500;600&family=Caveat:wght@500&display=swap');

.bh{
  --ground:#F4F3EE; --ink:#22382F; --accent:#38634C; --s2:#E7E5DC; --line:#D6D3C7;
  --sub:color-mix(in srgb, #22382F 66%, #ffffff);
  --gut:48px; --gap:24px; --max:1240px;
  --disp:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,sans-serif;
}
@media (max-width:1023px){ .bh{ --gut:24px; } }
@media (max-width:599px){  .bh{ --gut:20px; } }
main > .bh{ padding:48px var(--gut); background:var(--ground); color:var(--ink); font-family:var(--body); }
@media (max-width:1023px){ main > .bh{ padding:32px var(--gut); } }
@media (max-width:599px){  main > .bh{ padding:24px var(--gut); } }
main > .bh > *{ max-width:var(--max); margin-inline:auto; }
.bh h1,.bh h2,.bh h3{ font-family:var(--disp); color:var(--ink); margin:0; text-wrap:balance;
  letter-spacing:-.015em; font-weight:700; }
.bh h1{ font-size:clamp(36px,3.9vw,56px); line-height:1.06; }
.bh h2{ font-size:clamp(27px,2.5vw,36px); line-height:1.15; }
.bh h3{ font-size:19px; line-height:1.3; }
.bh p{ margin:0; font-size:16px; line-height:1.6; color:var(--sub); max-width:660px; }
.bh .bh-lead{ font-size:clamp(17px,1.2vw,19px); line-height:1.55; margin-top:18px; }
.bh-btn{ display:inline-flex; align-items:center; min-height:48px; padding:0 26px; margin-top:28px;
  border-radius:12px; background:var(--accent); color:#fff; font-family:var(--body);
  font-weight:600; font-size:16px; text-decoration:none; }
.bh-btn:hover{ filter:brightness(.92); }
.bh a:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* hero split */
.bh--hero{ padding-top:56px; padding-bottom:56px; }
.bh-hero{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap) 48px; align-items:center; }
.bh-hero__copy{ grid-column:span 5; }
.bh-hero__art{ grid-column:span 7; }
@media (max-width:899px){
  .bh-hero{ grid-template-columns:1fr; }
  .bh-hero__copy,.bh-hero__art{ grid-column:1 / -1; }
  .bh-hero__art{ order:2; }
}

/* the correspondence example */
.bh-note{ background:#fff; border:1px solid var(--line); border-radius:2px;
  padding:clamp(26px,2.8vw,42px); box-shadow:0 20px 52px rgba(20,24,28,.12);
  transform:rotate(-1.5deg); max-width:560px; margin-inline:auto; }
.bh-note p{ font-family:'Caveat',cursive; color:#2B2A28; max-width:none;
  font-size:clamp(21px,1.7vw,25px); line-height:1.6; }
.bh-note__g{ margin-bottom:.5em; }
.bh-note__b{ margin-bottom:.7em; }
.bh-note__s{ margin-bottom:.1em; }
.bh-note__n{ font-size:clamp(23px,1.9vw,28px); }
.bh-note__from{ display:block; margin-top:22px; font-family:var(--body); font-size:11px;
  letter-spacing:.14em; color:var(--sub); }

/* labels sheet (labelsbyhand) */
.bh-labels{ background:#fff; border:1px solid var(--line); padding:26px; display:grid;
  grid-template-columns:1fr 1fr; gap:14px; box-shadow:0 20px 52px rgba(20,24,28,.12);
  transform:rotate(-1deg); max-width:600px; margin-inline:auto; }
.bh-label{ border:1px solid var(--line); border-radius:2px; padding:14px 16px;
  font-family:'Caveat',cursive; font-size:22px; color:#2B2A28; }

/* document with signature (signiforme) */
.bh-doc{ background:#fff; border:1px solid var(--line); padding:34px 32px 30px;
  box-shadow:0 20px 52px rgba(20,24,28,.12); transform:rotate(-1deg);
  max-width:520px; margin-inline:auto; }
.bh-doc__t{ font-family:var(--body); font-size:11px; letter-spacing:.16em; color:var(--sub); }
.bh-doc__l{ display:block; height:3px; border-radius:2px; background:#C9CFD4; opacity:.7; margin:13px 0; }
.bh-doc__l:nth-child(odd){ width:88%; } .bh-doc__l:nth-child(3n){ width:70%; }
.bh-doc__sig{ display:block; margin-top:26px; font-family:'Caveat',cursive; font-size:34px; color:#2B2A28; }
.bh-doc__rule{ display:block; height:1px; background:var(--line); margin:4px 0 8px; width:62%; }
.bh-doc__cap{ font-family:var(--body); font-size:12px; color:var(--sub); }

/* what arrives */
.bh-arrives{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap) 48px; align-items:center; }
.bh-arrives__copy{ grid-column:span 5; }
.bh-arrives__art{ grid-column:span 7; }
.bh-arrives__art .bh-note,.bh-arrives__art .bh-labels,.bh-arrives__art .bh-doc{ transform:rotate(1.2deg); }
.bh-rows{ margin:28px 0 0; }
.bh-rows > div{ display:grid; grid-template-columns:132px 1fr; gap:18px; padding:16px 0;
  border-top:1px solid var(--line); }
.bh-rows > div:last-child{ border-bottom:1px solid var(--line); }
.bh-rows dt{ font-family:var(--disp); font-size:15px; color:var(--ink); }
.bh-rows dd{ margin:0; font-size:16px; line-height:1.6; color:var(--sub); }
@media (max-width:899px){
  .bh-arrives{ grid-template-columns:1fr; }
  .bh-arrives__copy,.bh-arrives__art{ grid-column:1 / -1; }
  .bh-arrives__art{ order:-1; }
  .bh-rows > div{ grid-template-columns:1fr; gap:4px; }
}


/* the addressed envelope beside the note, so "what arrives" shows the delivered
   object rather than repeating the hero card */
.bh-arrives__art{ position:relative; }
.bh-env{ margin:-30px 0 0 auto; width:min(72%,420px); position:relative;
  background:#fff; border:1px solid var(--line); border-radius:2px; padding:22px 24px;
  min-height:124px; box-shadow:0 16px 40px rgba(20,24,28,.10); transform:rotate(-1deg); }
.bh-env__to{ font-family:var(--body); font-size:14px; line-height:1.5; color:var(--ink); }
.bh-env__stamp{ position:absolute; top:14px; right:16px; width:42px; height:50px;
  border:1px dashed var(--line); border-radius:2px; }

/* examples */
.bh--examples{ background:var(--s2); }
.bh-ex__head{ max-width:660px; }
.bh-ex{ list-style:none; margin:32px 0 0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:0 48px; }
.bh-ex li{ padding:22px 0; border-top:1px solid var(--line); }
.bh-ex p{ margin-top:8px; font-size:15px; }
.bh-ex__go{ margin-top:28px; }
.bh-ex__go a{ color:var(--accent); font-weight:600; text-decoration:none; font-size:16px; }
.bh-ex__go a:hover{ text-decoration:underline; }
@media (max-width:899px){ .bh-ex{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .bh *{ transition:none !important; animation:none !important; } }


/* ---------------------------------------------------------------------------
   Approved brand hero photography, restored.

   The hero art slot previously held `.bh-note`, a CSS drawing of a handwritten
   card. The approved photograph is the brand asset and it was never deleted --
   it is still live in the bucket at /images/ and byte-identical to the original
   in _design/photo/. Only the markup reference had been dropped, so this rule
   plus the <img> in the page body is the whole repair; no image is republished.

   Sized to the note card it replaces (same radius and shadow) so the hero's
   proportions and rhythm are unchanged at every width.
   --------------------------------------------------------------------------- */
.bh-hero__photo{
  display:block; width:100%; max-width:560px; margin-inline:auto;
  aspect-ratio:16/10; object-fit:cover;
  border-radius:2px; box-shadow:0 20px 52px rgba(20,24,28,.12);
}
@media (max-width:899px){
  .bh-hero__photo{ max-width:none; aspect-ratio:3/2; }
}