/* Secondary-page editorial hero */
.page-hero { position: relative; min-height: 34rem; display: grid; align-items: end; padding: 6.5rem 0 5.5rem; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(105deg, var(--ivory) 0 52%, rgb(7 30 24 / .14) 100%), url("../images/pelin-market-harvest.webp") right center / 54% 100% no-repeat; }
.page-hero::before { content: ""; position: absolute; width: 28rem; height: 28rem; right: 29%; top: -21rem; border: 1px solid rgb(16 60 47 / .15); border-radius: 50%; box-shadow: 0 0 0 4rem rgb(16 60 47 / .025), 0 0 0 8rem rgb(16 60 47 / .02); }
.page-hero::after { content: ""; position: absolute; inset: 0 0 0 52%; background: linear-gradient(90deg, var(--ivory), transparent 38%), linear-gradient(0deg, rgb(7 30 24 / .48), transparent 65%); }
.page-hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr .65fr; gap: 5rem; align-items: end; }
.page-hero h1 { max-width: 12ch; margin: 1rem 0 0; color: var(--forest-1000); font-size: var(--step-4); text-wrap: balance; }
.page-hero .container > p { margin: 0; padding: 1.5rem; border: 1px solid rgb(255 255 255 / .26); border-radius: var(--radius-md); background: rgb(7 30 24 / .69); color: #e7efeb; box-shadow: var(--shadow-soft); backdrop-filter: blur(11px); font-size: var(--step-0); }

/* About and reusable editorial grids */
.manifesto { position: relative; max-width: 27ch; margin-bottom: 5rem; padding-left: 2rem; color: var(--forest-900); font-family: var(--font-display); font-size: var(--step-2); font-weight: 720; line-height: 1.34; }
.manifesto::before { content: "“"; position: absolute; left: -.25rem; top: -.55rem; color: var(--tomato); font-size: 4rem; line-height: 1; }
.values-grid, .detail-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(12rem, auto); gap: .9rem; }
.value, .detail-card { position: relative; grid-column: span 4; padding: 2.25rem; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.value:nth-child(1), .detail-card:nth-child(1) { grid-column: span 7; grid-row: span 2; border-radius: var(--radius-lg) var(--radius-xs) var(--radius-xs); background: linear-gradient(145deg, var(--sage-100), var(--paper)); }
.value:nth-child(2), .detail-card:nth-child(2) { grid-column: span 5; border-radius: var(--radius-xs) var(--radius-lg) var(--radius-xs) var(--radius-xs); background: var(--forest-900); color: #fff; }
.value:nth-child(3), .detail-card:nth-child(3) { grid-column: span 5; background: #f7e5dc; }
.value:nth-child(4), .detail-card:nth-child(4) { grid-column: span 4; background: #f5ebcc; }
.value:nth-child(5), .detail-card:nth-child(5) { grid-column: span 4; background: var(--sage-100); }
.value:nth-child(6), .detail-card:nth-child(6) { grid-column: span 4; border-radius: var(--radius-xs) var(--radius-xs) var(--radius-lg); }
.value::after, .detail-card::after { content: ""; position: absolute; width: 7rem; aspect-ratio: 1; right: -4rem; bottom: -4rem; border: 1px solid currentColor; border-radius: 50%; opacity: .12; box-shadow: 0 0 0 1.5rem currentColor; }
.value h2, .detail-card h2 { max-width: 10ch; }
.value p, .detail-card p { color: var(--muted); font-size: .87rem; }
.value:nth-child(2) p, .detail-card:nth-child(2) p { color: #c0cec8; }

/* Detailed how-it-works route */
.process-detail { counter-reset: detail; position: relative; display: grid; }
.process-detail::before { content: ""; position: absolute; left: 3.15rem; top: 3rem; bottom: 3rem; width: 2px; background: linear-gradient(var(--leaf-500), var(--tomato), var(--gold)); }
.process-row { counter-increment: detail; position: relative; display: grid; grid-template-columns: 6.5rem .9fr 1.1fr; gap: 2.5rem; align-items: start; padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.process-row::before { content: counter(detail, decimal-leading-zero); position: relative; z-index: 1; display: grid; place-items: center; width: 4.3rem; height: 4.3rem; border: .6rem solid var(--ivory); border-radius: 50%; background: var(--forest-900); color: var(--pistachio); font: 900 .88rem/1 var(--font-display); }
.process-row:nth-child(3n+2)::before { background: var(--tomato); color: #fff; }
.process-row:nth-child(3n)::before { background: var(--gold); color: var(--forest-1000); }
.process-row h2 { max-width: 12ch; margin-top: .65rem; font-size: var(--step-2); }
.process-row p { margin-top: .65rem; color: var(--muted); }
.disclaimer { margin-top: 2rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-left: 4px solid var(--tomato); background: #fff9f3; color: var(--slate); font-size: .84rem; }

/* Categories page: editorial crop gallery */
.catalog { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 10.5rem; gap: .9rem; }
.catalog-card { position: relative; grid-column: span 4; grid-row: span 2; display: block; padding: 1.7rem; overflow: hidden; border: 0; border-radius: var(--radius-md); background: linear-gradient(180deg, rgb(7 30 24 / .05), rgb(7 30 24 / .88)), url("../images/pelin-market-harvest.webp") left center / auto 100%; color: #fff; transition: transform var(--ease-out), background-size 700ms ease; }
.catalog-card:hover { transform: translateY(-4px); background-size: auto 106%; }
.catalog-card:nth-child(1) { grid-column: span 7; grid-row: span 3; background-position: 8% center; }
.catalog-card:nth-child(2) { grid-column: span 5; grid-row: span 2; background-position: 52% center; }
.catalog-card:nth-child(3) { grid-column: span 5; background-position: 92% center; }
.catalog-card:nth-child(4) { grid-column: span 5; background-position: 96% center; }
.catalog-card:nth-child(5) { grid-column: span 3; background-position: 79% center; }
.catalog-card:nth-child(6) { grid-column: span 4; background-position: 82% center; }
.catalog-card:nth-child(7) { grid-column: span 5; background-position: 55% center; }
.catalog-card:nth-child(8) { grid-column: span 7; background: linear-gradient(135deg, rgb(16 60 47 / .92), rgb(7 30 24 / .96)), url("../images/pelin-market-harvest.webp") center / cover; }
.catalog-icon { display: none; }
.catalog-card > div { position: absolute; left: 1.7rem; right: 1.7rem; bottom: 1.35rem; }
.catalog-card h2 { max-width: 13ch; margin-bottom: .5rem; font-size: var(--step-2); text-shadow: 0 2px 12px rgb(0 0 0 / .25); }
.catalog-card p { max-width: 36rem; margin-bottom: .7rem; color: #dbe6e1; font-size: .8rem; }
.catalog-card ul { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.catalog-card li { padding: .25rem .55rem; border: 1px solid rgb(255 255 255 / .25); border-radius: var(--radius-pill); background: rgb(7 30 24 / .35); font-size: .62rem; backdrop-filter: blur(6px); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: .9rem; }
.contact-card { grid-column: span 4; min-height: 12rem; padding: 2rem; border: 1px solid var(--line); background: var(--paper); }
.contact-card:nth-child(1) { grid-column: span 7; border-radius: var(--radius-lg) 0 0; background: var(--sage-100); }
.contact-card:nth-child(2) { grid-column: span 5; border-radius: 0 var(--radius-lg) 0 0; background: var(--forest-900); color: #fff; }
.contact-card:nth-child(5) { background: #f6e5dc; }
.contact-card:nth-child(6) { background: #f7edcf; }
.contact-label { color: var(--leaf-600); font-size: .67rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.contact-card:nth-child(2) .contact-label { color: var(--pistachio); }
.contact-value { max-width: 18ch; font-family: var(--font-display); font-size: var(--step-1); font-weight: 800; overflow-wrap: anywhere; }
.support-note { position: relative; margin-top: 1rem; padding: clamp(2rem, 5vw, 4rem); overflow: hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--forest-1000); color: #fff; }
.support-note::after { content: ""; position: absolute; width: 18rem; height: 18rem; right: -8rem; bottom: -11rem; border: 1px solid rgb(201 231 122 / .2); border-radius: 50%; box-shadow: 0 0 0 3rem rgb(201 231 122 / .03); }
.support-note p { color: #bdccc6; }

/* Legal reading experience */
.prose { max-width: var(--narrow); }
.prose > section { padding: 2.2rem 0; border-top: 1px solid var(--line); }
.prose h2 { max-width: 20ch; margin: 0 0 1rem; font-size: var(--step-2); line-height: 1.15; }
.prose h3 { margin-top: 2rem; }
.prose p, .prose li { color: #4e5b56; }
.draft-banner { position: relative; margin-bottom: 2.8rem; padding: 1.3rem 1.4rem 1.3rem 3.7rem; border: 1px solid #d7d5b8; border-radius: var(--radius-sm); background: #fffbe5; color: #514b24; font-weight: 720; }
.draft-banner::before { content: "!"; position: absolute; left: 1.25rem; top: 50%; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--gold); color: var(--forest-1000); transform: translateY(-50%); font-weight: 900; }
body.page-privacy-policy .page-hero, body.page-terms-of-use .page-hero, body.page-cookie-policy .page-hero { min-height: 25rem; padding-block: 4.5rem; background: linear-gradient(135deg, var(--cream), var(--sage-100)); }
body.page-privacy-policy .page-hero::after, body.page-terms-of-use .page-hero::after, body.page-cookie-policy .page-hero::after { display: none; }
body.page-privacy-policy .page-hero .container > p, body.page-terms-of-use .page-hero .container > p, body.page-cookie-policy .page-hero .container > p { background: var(--paper); color: var(--slate); border-color: var(--line); }

/* Error */
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgb(201 231 122 / .12), transparent 22rem), var(--forest-1000); color: #fff; text-align: center; }
.error-code { margin-bottom: 2rem; color: var(--pistachio); font: 900 clamp(7rem, 20vw, 16rem)/.7 var(--font-display); letter-spacing: -.1em; }
.error-page p { margin-inline: auto; color: #c4d1cc; }

/* Two-category editorial page */
.catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 35rem; }
.catalog-card, .catalog-card:nth-child(n) { grid-column: auto; grid-row: auto; padding: 0; background: var(--forest-900); }
.catalog-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
.catalog-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(7 30 24 / .03) 20%, rgb(7 30 24 / .92) 100%); pointer-events: none; }
.catalog-card:hover { background-size: auto; }
.catalog-card:hover > img { transform: scale(1.04); }
.catalog-card > div { z-index: 2; bottom: 1.5rem; }
.catalog-card .tag { display: inline-flex; margin-bottom: 1rem; padding: .32rem .65rem; border: 1px solid rgb(255 255 255 / .3); border-radius: var(--radius-pill); background: rgb(7 30 24 / .4); color: #fff; font-size: .62rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.catalog-card h2 { font-size: clamp(2rem, 4vw, 3.3rem); }