/* Ruzain Herbs — one-page layout. Loads AFTER organic.css and uses only its tokens. */

html { scroll-behavior: smooth; }
body.rz { font-size: 16px; background: var(--color-bg); }
.rz p { margin: 0; }
.rz h1, .rz h2, .rz h3, .rz h4, .rz h6 { margin: 0; }
.rz-wrap { max-width: 1200px; margin: 0 auto; }
.rz-sec { padding: clamp(52px, 7vw, 100px) var(--space-6) 0; scroll-margin-top: 96px; }
.rz-sec--tight { padding-top: clamp(28px, 5vw, 64px); }
.rz-lead { max-width: 34ch; margin-bottom: var(--space-6); }
.rz-kicker { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-heading); color: var(--color-accent-700); margin-bottom: var(--space-3); }
.rz-h2 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.08; }
.rz-muted { color: var(--color-neutral-700); }

/* header */
.rz-head { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(12px); }
.rz-head__in { max-width: 1200px; margin: 0 auto; padding: var(--space-3) var(--space-6); display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.rz-head img { height: 54px; width: auto; }
.rz-nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rz-nav a.rz-link { padding: 8px 12px; font-size: 14.5px; font-weight: 600; color: var(--color-text); text-decoration: none; border-radius: 999px; }
.rz-nav a.rz-link:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* hero */
.rz-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: center; }
.rz-hero h1 { font-size: clamp(36px, 5.4vw, 62px); line-height: 1.04; margin-bottom: var(--space-4); }
.rz-hero__intro { font-size: clamp(17px, 2vw, 20px); line-height: 1.6; max-width: 54ch; margin-bottom: var(--space-3); }
.rz-hero__sub { font-size: 16.5px; line-height: 1.65; max-width: 54ch; margin-bottom: var(--space-6); color: var(--color-neutral-700); }
.rz-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-8); }
.rz-cta .btn { padding: 16px 28px; font-size: 16px; }
.rz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); border-top: 1px solid var(--color-divider); padding-top: var(--space-6); }
.rz-stats b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1; color: var(--color-accent-700); margin-bottom: 6px; }
.rz-stats span { font-size: 14px; line-height: 1.4; color: var(--color-neutral-700); }

/* photo slots — replace the whole .rz-slot div with <img class="washed"> */
.rz-slot { border-radius: calc(var(--radius-lg) * 1.6); background: repeating-linear-gradient(135deg, var(--color-accent-2-200) 0 16px, var(--color-neutral-200) 16px 32px); display: grid; place-items: center; padding: var(--space-6); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 2; color: var(--color-neutral-700); text-align: center; }
.rz-slot--hero { aspect-ratio: 4 / 5; }
.rz-slot--wide { aspect-ratio: 3 / 2; border-radius: calc(var(--radius-lg) * 1.4); }
.rz-slot--sq { aspect-ratio: 1; border-radius: calc(var(--radius-lg) * 1.4); font-size: 11px; }
.rz-figs { display: grid; gap: var(--space-3); }
.rz-figs__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.rz img.washed { border-radius: calc(var(--radius-lg) * 1.4); width: 100%; height: 100%; object-fit: cover; }

/* dark panels */
.rz-panel { background: var(--color-accent-2-800); border-radius: calc(var(--radius-lg) * 1.6); padding: clamp(26px, 4vw, 52px); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-8); }
.rz-panel h3 { font-size: 22px; line-height: 1.2; color: var(--color-bg); margin-bottom: 10px; }
.rz-panel p { font-size: 15.5px; line-height: 1.6; color: var(--color-accent-2-200); }

/* herb directory */
.rz-tools--wild { padding-bottom: var(--space-6); }
.rz-wild { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 14px; line-height: 1.2; padding: 10px 17px; border-radius: 999px; cursor: pointer; background: transparent; color: var(--color-accent-2-900); border: 1px dashed var(--color-accent-2-500); }
.rz-wild[aria-pressed="true"] { background: var(--color-accent-2-800); color: var(--color-bg); border: 1px solid var(--color-accent-2-800); }
.rz-count { font-size: 14px; color: var(--color-neutral-700); }
.rz-herb__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

.rz-tools { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; padding-bottom: var(--space-4); }
.rz-search { flex: 1 1 240px; min-width: 0; position: relative; display: block; }
.rz-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-neutral-600); pointer-events: none; }
.rz-search .input { padding: 12px 16px 12px 42px; font-size: 15px; background: var(--color-neutral-100); }
.rz-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rz-chip { font-family: var(--font-heading); font-size: 14px; line-height: 1.2; padding: 10px 17px; border-radius: 999px; cursor: pointer; background: transparent; color: var(--color-text); border: 1px solid var(--color-divider); }
.rz-chip:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.rz-chip[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.rz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); gap: var(--space-3); }
.rz-herb { display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer; padding: var(--space-6); border-radius: calc(var(--radius-lg) * 1.15); background: var(--color-surface); border: 1px solid transparent; transition: box-shadow .15s, background .15s; }
.rz-herb:hover { box-shadow: var(--shadow-md); }
.rz-herb[aria-pressed="true"] { background: var(--color-accent-200); border-color: var(--color-accent); }
.rz-herb__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rz-herb__name { font-family: var(--font-heading); font-size: 23px; line-height: 1.15; }
.rz-herb__tick { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--color-accent); color: var(--color-bg); display: none; place-items: center; }
.rz-herb[aria-pressed="true"] .rz-herb__tick { display: grid; }
.rz-herb__latin { font-size: 14.5px; font-style: italic; line-height: 1.35; color: var(--color-accent-700); }
.rz-herb__local { font-size: 13.5px; line-height: 1.4; color: var(--color-neutral-700); }
.rz-herb__note { font-size: 14px; line-height: 1.55; color: var(--color-neutral-700); margin-top: 4px; }
.rz-herb[hidden] { display: none; }
.rz-empty { padding: var(--space-8) 4px; font-size: 16.5px; line-height: 1.6; color: var(--color-neutral-700); }
.rz-note { margin-top: var(--space-6); background: var(--color-accent-100); border-radius: calc(var(--radius-lg) * 1.15); padding: clamp(22px, 2.6vw, 32px); max-width: 96ch; }
.rz-note h3 { font-size: 22px; line-height: 1.2; margin-bottom: 10px; color: var(--color-accent-900); }
.rz-note p { font-size: 16px; line-height: 1.65; color: var(--color-accent-900); }

/* two-column prose */
.rz-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }
.rz-prose p { font-size: 17px; line-height: 1.7; margin-bottom: var(--space-4); }
.rz-prose p:last-child { margin-bottom: 0; }

/* card rows */
.rz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--space-4); }
.rz-cards--faq { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.rz-cards .card { padding: var(--space-6); gap: var(--space-2); }
.rz-cards .card h3 { font-size: 21px; line-height: 1.22; }
.rz-cards .card p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); }
.rz-cards--faq .card h3 { font-size: 20px; line-height: 1.25; }
.rz-cards--faq .card p { font-size: 15.5px; line-height: 1.65; }
.rz-after { margin-top: var(--space-6); font-size: 15.5px; line-height: 1.65; color: var(--color-neutral-700); max-width: 80ch; }

/* enquiry */
.rz-enq { background: var(--color-accent-2-800); border-radius: calc(var(--radius-lg) * 1.6); padding: clamp(26px, 4vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 56px); }
.rz-enq h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; color: var(--color-bg); margin-bottom: var(--space-4); }
.rz-enq__kicker { color: var(--color-accent-2-300); }
.rz-enq__intro { font-size: 16.5px; line-height: 1.7; color: var(--color-accent-2-200); margin-bottom: var(--space-6); }
.rz-contact { display: grid; gap: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--color-bg) 22%, transparent); padding-top: var(--space-6); }
.rz-contact__label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-2-300); margin-bottom: 6px; }
.rz-contact a.rz-tel { font-family: var(--font-heading); font-size: 27px; color: var(--color-bg); text-decoration: none; }
.rz-contact a.rz-mail { font-size: 17px; color: var(--color-bg); text-decoration: none; }
.rz-contact a:hover { color: var(--color-accent-300); }
.rz-wa { gap: 9px; padding: 13px 22px; font-size: 15px; background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.rz-wa:hover { background: var(--color-bg); }
.rz-addr { display: flex; gap: 10px; align-items: flex-start; }
.rz-addr svg { color: var(--color-accent-2-300); flex-shrink: 0; margin-top: 2px; }
.rz-addr p { font-size: 16px; line-height: 1.55; color: var(--color-bg); }
.rz-form { background: var(--color-bg); border-radius: calc(var(--radius-lg) * 1.15); padding: clamp(22px, 2.8vw, 34px); display: grid; gap: var(--space-3); }
.rz-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-3); }
.rz-form .input { min-height: 44px; font-size: 15px; background: var(--color-neutral-100); }
.rz-form textarea.input { border-radius: var(--radius-md); padding: 12px 16px; line-height: 1.5; }
.rz-hint { font-size: 13px; line-height: 1.5; color: var(--color-accent-700); margin-top: 7px; }
.rz-form__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: 2px; }
.rz-form__actions .btn { flex: 1 1 150px; padding: 15px 22px; font-size: 15px; }
.rz-fine { font-size: 13px; line-height: 1.55; color: var(--color-neutral-700); }

/* footer */
.rz-foot { margin-top: clamp(52px, 7vw, 100px); background: var(--color-neutral-900); color: var(--color-neutral-300); padding: clamp(36px, 5vw, 68px) var(--space-6) var(--space-6); }
.rz-foot__cols { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent); }
.rz-foot__brand { font-family: var(--font-heading); font-size: 28px; color: var(--color-bg); margin-bottom: var(--space-3); }
.rz-foot p { font-size: 15px; line-height: 1.65; }
.rz-foot__label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-2-300); margin-bottom: var(--space-3); }
.rz-foot__list { display: grid; gap: var(--space-2); }
.rz-foot__list a { font-size: 15px; color: var(--color-neutral-300); text-decoration: none; }
.rz-foot__list a:hover { color: var(--color-bg); }
.rz-foot__base { max-width: 1200px; margin: 0 auto; padding-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: space-between; }
.rz-foot__base p { font-size: 13px; color: var(--color-neutral-500); }

/* photos */
.rz img.rz-img { width: 100%; display: block; object-fit: cover; }
.rz-img--hero { aspect-ratio: 4 / 5; border-radius: calc(var(--radius-lg) * 1.6); }
.rz-img--wide { aspect-ratio: 3 / 2; }
.rz-img--sq { aspect-ratio: 1; }
.rz-img--43 { aspect-ratio: 4 / 3; border-radius: calc(var(--radius-lg) * 1.2); }
.rz-figrow { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); }
.rz-figrow figure { margin: 0; display: grid; gap: 10px; }
.rz-figrow figcaption { font-size: 13.5px; line-height: 1.5; color: var(--color-neutral-700); }

/* form messages + honeypot */
.rz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rz-sent, .rz-err { font-size: 15px; line-height: 1.55; padding: 14px 16px; border-radius: var(--radius-md); margin: 0; }
.rz-sent { background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.rz-err { background: var(--color-accent-200); color: var(--color-accent-900); }