/* Frovio — A4 leasing brochure (screen preview + print to PDF) */
.brochure-body { background: color-mix(in srgb, var(--ink) 10%, var(--bg)); padding: 88px 0 48px; }
.toolbar {
  position: fixed; inset: 0 0 auto; z-index: 10; height: 68px;
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: var(--header); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.toolbar .back { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14.5px; text-decoration: none; }
.toolbar .back svg { width: 18px; height: 18px; }
.tb-mid { display: flex; gap: 10px; margin-left: auto; }
.dirpick { display: inline-flex; gap: 4px; border: 1.5px solid var(--line); border-radius: 99px; padding: 3px; }
.dirpick button { border: 0; background: transparent; padding: 3px; border-radius: 50%; }
.dirpick button i { display: block; width: 22px; height: 22px; border-radius: 50%; }
.dirpick button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.toolbar .print { min-height: 42px; padding: 0 18px; font-size: 14px; }
@media (max-width: 560px) { .toolbar .print span, .toolbar .back span { display: none; } .toolbar .print { padding: 0 14px; } }

.sheets { width: 794px; margin: 0 auto; display: grid; gap: 28px; zoom: var(--z, 1); }
.sheet {
  position: relative;
  width: 210mm; height: 297mm; overflow: hidden;
  background: var(--bg); color: var(--ink);
  padding: 16mm 16mm 14mm;
  box-shadow: 0 30px 60px -30px rgba(40, 8, 22, 0.45);
  display: flex; flex-direction: column;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet .logo-word { font-size: 24px; }
.sheet .logo-mark { width: 22px; height: 27px; }
.sheet h2.display { font-size: 54px; margin: 16mm 0 8mm; }
.sh-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.sh-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-soft); padding-top: 5mm; border-top: 1px solid var(--line); }
.sh-lead { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 8mm; max-width: 150mm; }

/* cover */
.cover { background: var(--bg-2); padding: 14mm; }
.cv-top { display: flex; justify-content: space-between; align-items: center; }
.cv-top .logo-word { font-size: 34px; }
.cv-top .logo-mark { width: 30px; height: 36px; }
.cv-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.cv-art { position: relative; flex: 1; margin: 6mm 0; }
.cv-disc { position: absolute; left: 50%; top: 50%; width: 132mm; height: 132mm; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--bg), var(--bg-3)); }
.cv-swirl { position: absolute; left: 50%; bottom: 4%; height: 88%; transform: translateX(-42%); filter: drop-shadow(0 24px 30px rgba(74, 18, 40, 0.2)); }
.cv-cone { position: absolute; left: 12%; bottom: 2%; height: 50%; transform: rotate(-10deg); filter: drop-shadow(0 20px 24px rgba(74, 18, 40, 0.2)); }
.cv-berries { position: absolute; right: 2%; top: 0; width: 42%; }
.cv-bottom h1 { font-size: 54px; }
.cv-bottom p { margin: 5mm 0 0; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-soft); }

/* concept */
.sh-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.sh-prod { background: var(--bg-2); border-radius: 6mm; padding: 6mm; }
.sh-prod.alt { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.sh-prod img { height: 84mm; margin: 0 auto 5mm; filter: drop-shadow(0 14px 16px rgba(74, 18, 40, 0.16)); }
.sh-prod img.w { height: auto; width: 76mm; margin-top: 12mm; margin-bottom: 14mm; }
.sh-prod b { font-family: "Fraunces", serif; font-weight: 450; font-size: 30px; display: block; font-variation-settings: "SOFT" 100; }
.sh-prod p { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 2mm 0 0; }
.sh-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; margin-top: 12mm; }
.sh-pillars div { border-top: 2px solid var(--accent); padding-top: 4mm; font-size: 13px; color: var(--ink-soft); }
.sh-pillars b { display: block; font-family: "Fraunces", serif; font-weight: 450; font-size: 21px; color: var(--ink); margin-bottom: 1.5mm; }

/* craft */
.sh-photo { position: relative; }
.sh-photo.big > img:first-child { width: 100%; height: 112mm; object-fit: cover; border-radius: 5mm; }
.sh-scoop { position: absolute; right: -4mm; bottom: -12mm; width: 62mm; filter: drop-shadow(0 16px 18px rgba(74, 18, 40, 0.25)); }
.sh-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 9mm; margin-top: 16mm; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.sh-cols p { margin: 0; }
.sh-ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 3mm; color: var(--ink); font-weight: 600; }
.sh-ticks li { padding-left: 7mm; position: relative; }
.sh-ticks li::before { content: ""; position: absolute; left: 0; top: 1.6mm; width: 3.2mm; height: 3.2mm; border-radius: 50%; background: var(--accent); }
.sh-market { margin-top: 12mm; padding: 6mm 7mm; border-radius: 4mm; background: var(--bg-2); font-size: 14px; line-height: 1.55; border-left: 3px solid var(--accent); }

/* landlords */
.sh-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; }
.sh-formats figure { margin: 0; }
.sh-formats img { width: 100%; height: 54mm; object-fit: cover; border-radius: 4mm; }
.sh-formats figcaption { display: flex; flex-direction: column; gap: 1.5mm; align-items: flex-start; margin-top: 2.5mm; font-size: 12px; }
.sh-formats b { font-family: "Fraunces", serif; font-weight: 450; font-size: 19px; }
.sh-formats .tbc { font-size: 10px; }
.sh-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin-top: 12mm; }
.sh-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 5mm; font-size: 13px; color: var(--ink-soft); }
.sh-benefits b { display: block; font-family: "Fraunces", serif; font-weight: 450; font-size: 19px; color: var(--ink); }
.sh-req { border-collapse: collapse; width: 100%; font-size: 13px; align-self: start; }
.sh-req th { text-align: left; font-weight: 600; color: var(--ink-soft); padding: 3.4mm 3mm 2.6mm 0; border-bottom: 1px solid var(--line); vertical-align: top; width: 26mm; }
.sh-req td { padding: 3.4mm 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.sh-contact {
  margin-top: 12mm; border-radius: 6mm; padding: 9mm 9mm;
  background: var(--accent); color: var(--accent-ink);
  display: flex; justify-content: space-between; align-items: center;
}
.sh-contact p { margin: 0; font-size: 14px; }
.sh-contact .k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.sh-contact .n { font-family: "Fraunces", serif; font-size: 32px; margin: 1.5mm 0; }
.sh-contact .logo { color: var(--accent-ink); }
.sh-contact .logo-mark { color: var(--accent-ink); }
.sh-contact .logo-word .dot { color: var(--accent-ink); }

@media print {
  @page { size: A4; margin: 0; }
  html, body { background: none !important; }
  .brochure-body { padding: 0; }
  .toolbar { display: none; }
  .sheets { width: auto; gap: 0; zoom: 1 !important; }
  .sheet { box-shadow: none; break-after: page; }
}