/* ============================================================================
   07 — Warm & Trustworthy
   Sage green on warm paper. A humanist sans for the letter, a serif for the
   signature and the quotations. The framed drawing is offset from its mount
   so it reads as something hung on a wall rather than pasted on a page.
   ========================================================================= */

body.design-07 {
  --ink:        #1f2a24;
  --paper:      #f3f1ea;
  --card:       #fbfaf5;
  --soft:       #e3eae1;
  --line:       #d3d5c9;
  --muted:      #47524a;
  --accent:     #38614b;
  --accent-ink: #2c4f3c;   /* text-safe on paper: 6.8:1 */

  background: var(--paper);
  color: var(--ink);
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.68;
}

.design-07 h1,
.design-07 .w-h2,
.design-07 h3 {
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.design-07 .w-wrap { width: min(1140px, calc(100% - 44px)); margin-inline: auto; }

.design-07 .w-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* --- Header -------------------------------------------------------------- */

.design-07 .w-head { border-bottom: 1px solid var(--line); }

.design-07 .w-head__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  padding: 20px 0;
}

.design-07 .w-logo { font-weight: 700; font-size: 1.04rem; text-decoration: none; }

.design-07 .w-nav { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-inline: auto 0; }

.design-07 .w-nav a { font-size: 0.9rem; font-weight: 500; text-decoration: none; color: var(--muted); }
.design-07 .w-nav a:hover { color: var(--accent-ink); }

.design-07 .w-phone {
  padding: 9px 18px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.design-07 .w-phone:hover { background: var(--accent); color: #ffffff; }

/* --- Opening letter ------------------------------------------------------ */

.design-07 .w-open { padding: clamp(44px, 7vw, 88px) 0; }

.design-07 .w-open__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: start;
}

.design-07 .w-portrait { position: relative; padding: 14px 14px 0; background: var(--card); border: 1px solid var(--line); }

.design-07 .w-portrait::before {
  /* The mount: a green block the frame sits proud of. */
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  background: var(--accent);
  z-index: -1;
}

.design-07 .w-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.design-07 .w-portrait figcaption {
  padding: 14px 2px 16px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.design-07 .w-letter h1 {
  margin: 16px 0 22px;
  max-width: 17ch;
  font-size: clamp(1.9rem, 4vw, 3rem);
}

.design-07 .w-letter p { max-width: 56ch; color: var(--muted); }
.design-07 .w-letter p + p { margin-top: 16px; }

.design-07 .w-sign {
  margin-top: 26px !important;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ink) !important;
}

.design-07 .w-open__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  margin-top: 28px !important;
}

.design-07 .w-btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 4px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.94rem;
  text-decoration: none;
}

.design-07 .w-btn:hover { background: #24402f; }

.design-07 .w-quiet { font-size: 0.94rem; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.design-07 .w-quiet:hover { border-bottom-color: var(--accent); }

/* --- Promise ------------------------------------------------------------- */

.design-07 .w-promise { padding: clamp(40px, 6vw, 68px) 0; background: var(--soft); }

.design-07 .w-h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); max-width: 22ch; }

.design-07 .w-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 34px;
  margin-top: 28px;
}

.design-07 .w-checks li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-weight: 600;
  font-size: 1.02rem;
}

.design-07 .w-tick {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.6px solid var(--accent);
  position: relative;
}

.design-07 .w-tick::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 7px;
  height: 12px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(42deg);
}

/* --- How we help --------------------------------------------------------- */

.design-07 .w-help { padding: clamp(56px, 8vw, 96px) 0; }

.design-07 .w-help__head { margin-bottom: 34px; }
.design-07 .w-help__head .w-h2 { margin-top: 10px; }

.design-07 .w-help__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}

.design-07 .w-help article { padding: 28px 26px; background: var(--card); }

.design-07 .w-help__no {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 1.05rem;
  color: var(--accent-ink);
}

.design-07 .w-help h3 { margin: 10px 0 8px; font-size: 1.16rem; }
.design-07 .w-help article p:last-child { color: var(--muted); font-size: 0.96rem; }

/* --- Voices -------------------------------------------------------------- */

.design-07 .w-voices { padding-bottom: clamp(56px, 8vw, 96px); }

.design-07 .w-voices__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.design-07 .w-voices__lead { padding: clamp(28px, 4vw, 44px); background: var(--accent); color: #ffffff; }

.design-07 .w-voices__lead blockquote p {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  line-height: 1.36;
}

.design-07 .w-voices__lead blockquote p::before { content: "\201C"; }
.design-07 .w-voices__lead blockquote p::after { content: "\201D"; }

.design-07 .w-voices__lead figcaption {
  margin-top: 22px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cfe0d4;
}

.design-07 .w-voices__rest figure { padding: 22px 0; border-top: 1px solid var(--line); }
.design-07 .w-voices__rest figure:last-child { border-bottom: 1px solid var(--line); }
.design-07 .w-voices__rest blockquote p { color: var(--muted); }

.design-07 .w-voices__rest figcaption {
  margin-top: 12px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* --- Invitation ---------------------------------------------------------- */

.design-07 .w-invite { padding: clamp(52px, 7vw, 88px) 0; border-top: 1px solid var(--line); }

.design-07 .w-invite__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}

.design-07 .w-invite p { max-width: 52ch; margin-top: 16px; color: var(--muted); }
.design-07 .w-invite p:last-child { margin-top: 26px; }

.design-07 .w-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 30px;
}

.design-07 .w-details dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.design-07 .w-details dd { margin-top: 6px; font-weight: 600; }
.design-07 .w-details a { color: var(--accent-ink); text-decoration: none; }
.design-07 .w-details a:hover { text-decoration: underline; }

/* --- Footer -------------------------------------------------------------- */

.design-07 .w-foot { padding: 22px 0 40px; }

.design-07 .w-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  justify-content: space-between;
  font-size: 0.86rem;
  color: var(--muted);
}

/* --- Mark ---------------------------------------------------------------- */

.design-07 .w-logo { display: inline-flex; align-items: center; gap: 11px; }
.design-07 .w-mark { width: 27px; height: 27px; flex: none; color: var(--accent); }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 940px) {
  .design-07 .w-open__inner,
  .design-07 .w-voices__inner,
  .design-07 .w-invite__inner { grid-template-columns: 1fr; }
  .design-07 .w-portrait { max-width: 440px; }
  .design-07 .w-checks { grid-template-columns: 1fr; }
  .design-07 .w-help__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body.design-07 { font-size: 16px; }
  .design-07 .w-wrap { width: min(100% - 30px, 1140px); }
  .design-07 .w-portrait::before { inset: 16px -14px -14px 16px; }
  .design-07 .w-nav { order: 3; width: 100%; margin: 0; }
  .design-07 .w-details { grid-template-columns: 1fr; }
  .design-07 .w-btn { display: block; text-align: center; }
}