/* bunyanlabs.com page layer. Everything else comes from /ds/bunyan.css
   (theme bunyan-dark, density compact). Tokens only; no raw colours. */
html{scroll-behavior:smooth;scroll-padding-top:72px}
html[lang="ar"] .en,html[lang="en"] .ar{display:none!important}
.bl-topbar__brand svg{height:28px;width:auto}
.bl-topbar__actions{margin-inline-start:var(--space-2)}
@media (max-width:720px){.bl-topbar__actions{margin-inline-start:auto}}

/* Hero */
.hero{padding-block:var(--space-8) var(--space-7)}
.hero__in{--a:7fr;--b:4fr;--align:end;--gap:var(--space-7)}
.hero__copy{--gap:var(--space-4)}
.hero h1{max-width:16ch}
.hero .bl-lead b{color:var(--ink);font-weight:600}
.hero__aside{display:flex;flex-direction:column;gap:var(--space-4)}
.mosaic{display:block;width:100%;height:auto;max-width:420px}
.m-brand{fill:var(--brand)}.m-accent{fill:var(--accent)}.m-hl{fill:var(--highlight)}.m-tint{fill:var(--tint)}.m-line{fill:var(--line)}.m-paper{fill:var(--ink)}
@media (max-width:860px){.mosaic{max-width:300px}}
.glance{padding-block:var(--space-1)}

/* Section heads */
.head__title{--gap:var(--space-2)}
.sec-n{font-variant-numeric:tabular-nums;font-weight:700}
.sec-n::after{content:"/";margin-inline:var(--space-2);font-weight:400;opacity:.55}

/* Products: three equal cards, details folded */
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);align-items:start}
@media (max-width:1000px){.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.products{grid-template-columns:1fr}}
.product{gap:var(--space-3);height:100%}
.product__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.product__num{font:800 14px/1 var(--font-sans);color:var(--highlight);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.product{transition:border-color var(--dur-2) var(--ease)}
.product:hover{border-color:color-mix(in srgb,var(--highlight) 55%,var(--line))}
.product h3{line-height:1.25}
.product .product__sub{color:var(--ink);font-size:15px;line-height:24px}
.product .bl-dl{font-size:13.5px;margin-top:var(--space-1)}
.product .bl-dl dt{white-space:nowrap}
.product__more{border-top:1px solid var(--line);padding-top:var(--space-3);margin-top:auto}
.product__more summary{cursor:pointer;font:var(--text-label);color:var(--muted);list-style:none;display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-h-sm)}
.product__more summary::-webkit-details-marker{display:none}
.product__more summary:hover{color:var(--ink)}
.product__more summary::after{content:"";width:7px;height:7px;border:solid var(--highlight);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-2) var(--ease)}
.product__more[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.product__more p{margin-top:var(--space-2);color:var(--muted);font-size:14px;line-height:22px}
html[lang="ar"] .product__more p{line-height:26px}
.product__link{font:var(--text-label);display:inline-flex;align-items:center;min-height:var(--control-h-sm)}

/* Principles */
.principles{--min:230px}
.principles > div{display:flex;flex-direction:column;gap:var(--space-2)}
.principle__n{font:800 22px/1 var(--font-sans);color:var(--highlight);letter-spacing:.02em;margin-bottom:var(--space-1)}
.principles p{color:var(--muted);font-size:14px;line-height:22px}
html[lang="ar"] .principles p{line-height:26px}

/* Contact */
.contact__in{--a:5fr;--b:7fr;--gap:var(--space-7)}
.contact__copy{--gap:var(--space-3)}
.mail{font:var(--text-label);font-size:16px;align-self:flex-start}
.contact-form{gap:var(--space-3)}
.form-grid{--min:200px;--gap:var(--space-3)}
.msg{margin:0;font-size:14px;color:var(--success)}
.msg.err{color:var(--danger)}
.msg:empty{display:none}

/* 404 */
.lost{min-height:calc(100vh - 140px);display:grid;align-content:center;gap:var(--space-4)}

@media (prefers-reduced-motion:no-preference){
  .hero__copy > *,.glance{animation:rise .7s var(--ease) both}
  .hero__copy > :nth-child(2){animation-delay:.05s}.hero__copy > :nth-child(3){animation-delay:.1s}.hero__copy > :nth-child(4){animation-delay:.15s}.glance{animation-delay:.2s}
  @keyframes rise{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* Footer */
.foot-brand{display:inline-flex;align-items:center;gap:var(--space-2)}

/* Longer bilingual statuses and accessible contact feedback. */
.product__top .bl-badge{white-space:normal;line-height:1.6}
.contact-help{font-size:14px;line-height:1.8;overflow-wrap:anywhere}
.field-error{margin:0;color:var(--danger);font-size:13px;line-height:1.7}
.contact-form [aria-invalid="true"]{border-color:var(--danger)}
.contact-form [hidden]{display:none!important}
.contact-form .bl-btn{white-space:normal;text-align:center;height:auto;min-height:var(--control-h)}
.contact-form textarea{resize:vertical}
.msg{color:var(--muted);line-height:1.8;overflow-wrap:anywhere}