/* House of Zejd — Franchise page (layout follows HOZ2 Website Pages - Final.pdf; page hero from about.css) */

/* 1. concept intro */
.hz-fr-intro { text-align: center; max-width: 820px; margin: 0 auto; }
.hz-fr-intro .hz-display { margin-bottom: var(--space-6); }
.hz-fr-intro p { font-size: 19px; line-height: 32px; color: var(--ink-muted); margin: 0; }
.hz-fr-intro .hz-sprig { margin: var(--space-12) auto var(--space-8); width: 44px; }

/* why partner: numbered, centred column with arrows like the PDF */
.hz-fr-why { max-width: 820px; margin: 0 auto; }
.hz-fr-why-title { text-align: center; font: 700 26px/32px var(--font-display); color: var(--ink); margin: 0 0 var(--space-8); }
.hz-fr-reasons { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hz-fr-reasons li { display: grid; grid-template-columns: 56px 1fr 28px; align-items: center; gap: var(--space-4); padding: var(--space-5, 20px) 0; border-bottom: 1px solid var(--line); transition: background .3s, padding .3s; }
.hz-fr-reasons li::after { content: "\2192"; color: var(--olive); font-size: 20px; text-align: right; transition: transform .3s; }
.hz-fr-reasons li:hover { background: var(--paper-alt); padding-left: var(--space-4); padding-right: var(--space-4); }
.hz-fr-reasons li:hover::after { transform: translateX(4px); }
.hz-fr-reasons .n { font: italic 400 20px/1 var(--font-display); color: var(--olive); }
.hz-fr-reasons p { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink); }

/* 2. full-width product band (hands holding Zejd products over a world map) */
.hz-fr-band { position: relative; height: clamp(360px, 46vw, 620px); overflow: hidden; background: #e9e9e9; }
.hz-fr-band img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }

/* 3. franchise support: two columns, olive divider (PDF) */
.hz-fr-support { display: grid; grid-template-columns: 1fr 1px 1fr; gap: var(--space-16); max-width: 1000px; margin: 0 auto; }
.hz-fr-divider { background: var(--olive-ink); opacity: .55; }
.hz-fr-col-n { display: block; font: italic 400 18px/1 var(--font-display); color: var(--olive); margin-bottom: var(--space-3); }
.hz-fr-col h3 { font: 700 26px/32px var(--font-display); color: var(--ink); margin: 0 0 var(--space-6); }
.hz-fr-list { list-style: none; margin: 0; padding: 0; }
.hz-fr-list li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-8); font-size: 17px; line-height: 27px; color: var(--ink-muted); border-bottom: 1px solid var(--line); }
.hz-fr-list li:last-child { border-bottom: 0; }
.hz-fr-list li::before { content: "\2192"; position: absolute; left: 0; top: var(--space-3); color: var(--olive); }

/* 4. join the family (grey band in the PDF) */
.hz-fr-join { background: var(--paper-alt); padding: var(--space-24) 0 var(--space-16); }
.hz-fr-join-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.hz-fr-join .hz-display { margin-bottom: var(--space-6); }
.hz-fr-join p { font-size: 19px; line-height: 32px; color: var(--ink-muted); margin: 0; }
.hz-fr-down { display: inline-flex; margin-top: var(--space-8); width: 52px; height: 52px; border-radius: 999px; border: 1px solid var(--line-strong); align-items: center; justify-content: center; transition: background .25s, border-color .25s; animation: hz-bob 2.4s ease-in-out infinite; }
.hz-fr-down svg { width: 20px; height: 10px; stroke: var(--olive); fill: none; stroke-width: 1.5; }
.hz-fr-down:hover { background: var(--olive); border-color: var(--olive); }
.hz-fr-down:hover svg { stroke: var(--on-olive); }
@keyframes hz-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* 5. inquiry: client asked for "Inquire About Franchising" first, then the title on two lines with tight spacing */
#inquire.hz-band { background: #ece6d8; }
.hz-fr-form-head { text-align: center; max-width: 820px; margin: 0 auto var(--space-12); }
.hz-fr-form-head .hz-display { margin-bottom: var(--space-3); }
.hz-fr-form-head .hz-lead { margin: 0; }
.hz-fr-form-title { margin: var(--space-8) 0 0; font: 700 20px/26px var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.hz-fr-form-title span { display: block; }

/* full-width form, fields in rows (same treatment as the gifting form) */
#inquire .hz-success { max-width: 760px; margin: var(--space-6) auto 0; }
#inquire .hz-success[hidden] { display: none; }

@media (max-width: 1024px) {
}
@media (max-width: 860px) {
  .hz-fr-reasons li { grid-template-columns: 40px 1fr; }
  .hz-fr-reasons li::after { display: none; }
  .hz-fr-reasons p { font-size: 16px; line-height: 25px; }
  .hz-fr-support { grid-template-columns: 1fr; gap: var(--space-12); }
  .hz-fr-divider { display: none; }
  .hz-fr-join { padding: var(--space-16) 0 var(--space-12); }
  .hz-fr-form-title { font-size: 16px; line-height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .hz-fr-down { animation: none; } }

/* ===== why partner: dark, gold, sticky title + reason cards ===== */
.hz-why { background: #1d1c18; color: #d9d2c3; padding: var(--space-24) 0; }
.hz-why-grid { display: grid; grid-template-columns: 4fr 7fr; gap: var(--space-16); align-items: start; }
.hz-why-sticky { position: sticky; top: 120px; }
.hz-why .hz-eyebrow { color: var(--gold); }
.hz-why .hz-display { color: #f4efe4; font-size: 48px; line-height: 54px; margin-bottom: var(--space-8); }
.hz-why .hz-display em { color: var(--gold); }
.hz-why-photo { position: relative; margin: 0; padding: 0 14px 14px 0; }
.hz-why-photo::before { content: ""; position: absolute; left: 14px; top: 14px; right: 0; bottom: 0; border: 1px solid rgba(227,190,47,.5); }
.hz-why-photo img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.9); }

.hz-why-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.hz-why-card { position: relative; min-height: 230px; padding: var(--space-8); border: 1px solid rgba(227,190,47,.22); background: rgba(255,255,255,.02); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: border-color .35s, background .35s, transform .45s cubic-bezier(.2,.7,.2,1); }
.hz-why-card::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--gold); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.hz-why-card:hover { border-color: rgba(227,190,47,.55); background: rgba(227,190,47,.05); transform: translateY(-4px); }
.hz-why-card:hover::before { width: 100%; }
.hz-why-card:last-child { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: var(--space-8); }
.hz-why-card .n { font: italic 400 64px/1 var(--font-display); color: transparent; -webkit-text-stroke: 1px var(--gold); letter-spacing: -.02em; transition: color .35s; }
.hz-why-card:hover .n { color: var(--gold); }
.hz-why-card p { margin: var(--space-6) 0 0; font: 400 22px/31px var(--font-display); color: #f4efe4; }
.hz-why-card:last-child p { margin: 0; }

/* v2: compact cards, numerals in the site's style (small gold italic + hairline) */
.hz-why-cards { gap: var(--space-3); align-self: center; }
.hz-why-card { min-height: 0; padding: var(--space-6) var(--space-6) var(--space-6); justify-content: flex-start; }
.hz-why-card .n { display: flex; align-items: center; gap: var(--space-3); font: italic 400 22px/1 var(--font-display); color: var(--gold); -webkit-text-stroke: 0; letter-spacing: .02em; }
.hz-why-card .n::after { content: ""; width: 32px; height: 1px; background: rgba(227,190,47,.6); transition: width .45s cubic-bezier(.2,.7,.2,1); }
.hz-why-card:hover .n::after { width: 56px; }
.hz-why-card p { margin-top: var(--space-4); font-size: 18px; line-height: 26px; }
.hz-why-card:last-child { flex-direction: column; align-items: flex-start; gap: 0; }
.hz-why-card:last-child p { margin-top: var(--space-4); }
.hz-why-photo img { aspect-ratio: 3 / 2; }

@media (max-width: 960px) {
  .hz-why { padding: var(--space-16) 0; }
  .hz-why-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hz-why-sticky { position: static; }
  .hz-why .hz-display { font-size: 36px; line-height: 42px; }
  .hz-why-photo { display: none; }
}
@media (max-width: 600px) {
  .hz-why-cards { grid-template-columns: 1fr; }
  .hz-why-card, .hz-why-card:last-child { min-height: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: var(--space-6); }
  .hz-why-card:last-child p { margin-top: var(--space-6); }
  .hz-why-card .n { font-size: 20px; }
  .hz-why-card p { font-size: 17px; line-height: 25px; }
}