/* Tannora — warm minimal (tea/tannin) identity: paper + ink + one tan accent */
:root{
  --c-bg:#F7F3EC;
  --c-bg-raised:#FBF8F2;
  --c-primary:#221C14;   /* ink — headings/body */
  --c-text:#221C14;
  --c-secondary:#8A6A3B; /* muted tan — kickers/labels */
  --c-accent:#B8863B;    /* tan/gold — CTAs, links, rules */
  --c-line: color-mix(in srgb, var(--c-accent) 30%, transparent);
  --c-line-soft: color-mix(in srgb, var(--c-primary) 10%, transparent);
  --f-disp:'Schibsted Grotesk',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--c-text);background:var(--c-bg);line-height:1.65;font-size:16px}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--f-disp);line-height:1.1;color:var(--c-primary);font-weight:700;letter-spacing:-0.01em}

/* ---- header ---- */
header.nav{position:sticky;top:0;background:color-mix(in srgb,var(--c-bg) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--c-line-soft);z-index:20}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{font-family:var(--f-disp);font-weight:800;font-size:19px;color:var(--c-primary);text-decoration:none;letter-spacing:-0.01em}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-right > a{color:var(--c-primary);text-decoration:none;font-size:14px;font-weight:500;opacity:.78}
.nav-right > a:hover{opacity:1;color:var(--c-accent)}

/* language switcher — plain text "EN ▾" dropdown */
.langswitch{position:relative;font-size:14px}
.langswitch summary{list-style:none;cursor:pointer;color:var(--c-primary);font-weight:600;padding:6px 2px;user-select:none;display:flex;align-items:center;gap:4px}
.langswitch summary::-webkit-details-marker{display:none}
.langswitch .car{font-size:11px;color:var(--c-accent);transition:transform .15s}
.langswitch[open] .car{transform:rotate(180deg)}
.langswitch .menu{position:absolute;top:100%;right:0;margin-top:8px;background:var(--c-bg-raised);border:1px solid var(--c-line-soft);border-radius:8px;box-shadow:0 10px 30px rgba(34,28,20,.10);padding:6px;display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:2px;min-width:300px;max-height:70vh;overflow:auto}
[dir=rtl] .langswitch .menu{right:auto;left:0}
.langswitch .menu a{display:flex;align-items:baseline;gap:8px;padding:8px 10px;border-radius:6px;text-decoration:none;color:var(--c-text);font-size:13px}
.langswitch .menu a:hover{background:color-mix(in srgb,var(--c-accent) 10%,transparent)}
.langswitch .menu a[aria-current=true]{color:var(--c-accent);font-weight:700}
.langswitch .menu .code{font-family:var(--f-disp);font-weight:700;width:26px;flex:none;font-size:12px;color:var(--c-secondary)}
.langswitch .menu .name{opacity:.85}

/* ---- hero: full-bleed edge-to-edge video band, headline overlaid on dark scrim ---- */
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c-secondary);margin-bottom:18px;padding-bottom:8px;border-bottom:1px solid var(--c-line)}
.hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:90vh;min-height:560px;max-height:940px;overflow:hidden;display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(20,15,8,.10) 0%, rgba(20,15,8,.38) 45%, rgba(20,15,8,.80) 100%)}
.hero-inner{position:relative;z-index:2;max-width:640px;padding-bottom:72px}
.hero-inner .eyebrow{color:#EBD6AC;border-bottom-color:rgba(235,214,172,.4)}
.hero h1{font-size:clamp(34px,4.8vw,58px);color:#fff;letter-spacing:-0.02em}
.hero p{font-size:18px;max-width:48ch;margin-top:18px;color:rgba(255,255,255,.88)}
.hero .btn{border-color:#fff;color:#fff}
.hero .btn:hover{background:var(--c-accent);border-color:var(--c-accent);color:#fff}

.btn{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--c-primary);font-weight:600;font-size:15px;padding:13px 24px;border-radius:999px;text-decoration:none;margin-top:28px;border:1.5px solid var(--c-primary);transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--c-accent);border-color:var(--c-accent);color:#fff}

section{padding:52px 0;border-top:1px solid var(--c-line-soft)}
.hero + section{border-top:none}
section#contact{border-top:1px solid var(--c-line-soft)}
section.more{background:var(--c-bg-raised)}

/* ---- prose (page body copy) ---- */
.prose h2{font-size:27px;margin:34px 0 14px;padding-top:18px;border-top:1px solid var(--c-line-soft)}
.prose h2:first-child{border-top:none;padding-top:0;margin-top:0}
.prose h3{font-size:19px;margin:24px 0 8px;font-weight:700}
.prose p{margin:12px 0;max-width:70ch}
.prose ul{margin:12px 0 12px 22px}
.prose li{margin:6px 0}
.prose strong{color:var(--c-primary)}
.prose hr{border:none;border-top:1px solid var(--c-line);margin:30px 0}
.prose a{color:var(--c-accent)}

.vid{aspect-ratio:16/9;width:100%;border-radius:6px;overflow:hidden;background:var(--c-primary);margin:26px 0;border:1px solid var(--c-line)}
.vid video{width:100%;height:100%}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:22px 0}
.grid img{width:100%;border-radius:4px;display:block;border:1px solid var(--c-line-soft)}

/* ---- "more from brand" — minimal hairline list, not cards ---- */
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:baseline;gap:16px;padding:18px 0;text-decoration:none;color:var(--c-text);border-top:1px solid var(--c-line-soft)}
.list .row:last-child{border-bottom:1px solid var(--c-line-soft)}
.row .k{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--c-secondary);font-weight:700;flex:none;width:120px}
.row .t{font-family:var(--f-disp);font-size:17px;font-weight:600;flex:1}
.row .arrow{opacity:0;color:var(--c-accent);transition:opacity .15s,transform .15s;transform:translateX(-4px)}
.row:hover .t{color:var(--c-accent)}
.row:hover .arrow{opacity:1;transform:translateX(0)}

/* ---- forms: the /api/contact form + every embedded .prose <form> from page.html ---- */
form.contact,.prose form{display:grid;gap:6px;max-width:560px;margin:20px 0}
form.contact label,.prose form label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-secondary);margin-top:10px}
form.contact label:first-child,.prose form label:first-child{margin-top:0}
form.contact input,form.contact textarea,form.contact select,
.prose form input,.prose form textarea,.prose form select{
  width:100%;padding:13px 14px;border:1px solid var(--c-line-soft);border-radius:6px;font:inherit;font-size:15px;
  background:var(--c-bg-raised);color:var(--c-text)}
form.contact input:focus,form.contact textarea:focus,form.contact select:focus,
.prose form input:focus,.prose form textarea:focus,.prose form select:focus{outline:none;border-color:var(--c-accent)}
form.contact textarea,.prose form textarea{resize:vertical;min-height:110px}
.prose form br{display:none} /* strip stray line breaks embedded in older markup */
.prose form button,.prose form input[type=submit]{
  display:inline-flex;align-items:center;gap:8px;justify-self:start;background:var(--c-accent);color:#fff;font-weight:600;
  font-size:15px;padding:13px 24px;border-radius:999px;border:1.5px solid var(--c-accent);margin-top:14px;cursor:pointer}
.prose form button:hover,.prose form input[type=submit]:hover{background:transparent;color:var(--c-primary);border-color:var(--c-primary)}
.prose form input[type=hidden]{display:none}
.prose form p{margin:10px 0}

footer{padding:52px 0;border-top:1px solid var(--c-line-soft);font-size:14px}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.brand-foot{font-family:var(--f-disp);font-size:18px;color:var(--c-primary)}
.tagline{margin-top:8px;max-width:44ch;opacity:.78}
.disclaimer{opacity:.6;max-width:32ch;text-align:right}
[dir=rtl] .disclaimer{text-align:left}

[dir=rtl]{direction:rtl}
[dir=rtl] .row .arrow{transform:translateX(4px)}

/* ---- mobile: no horizontal overflow, hero legible, header wraps ---- */
html,body{overflow-x:hidden;max-width:100%}
img,video{max-width:100%;height:auto}
.prose table{display:block;overflow-x:auto;max-width:100%}

@media (max-width:860px){
  .hero{height:80vh;min-height:480px}
  .hero-bg{height:100%;width:100%}
  .hero-inner{max-width:100%;padding-bottom:40px}
  .hero h1{font-size:clamp(28px,8vw,40px)}
  header.nav .wrap{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px;gap:10px}
  .nav-right{gap:14px;flex-wrap:wrap}
  .langswitch .menu{grid-template-columns:1fr;min-width:220px}
  .footer-grid{flex-direction:column;align-items:flex-start}
  .disclaimer{text-align:left}
}

/* reused article imagery (enzymes.bio watermarked) */
.prose figure.post-img{margin:30px 0}
.prose figure.post-img img{width:100%;height:auto;display:block;border-radius:12px}
.prose figure.post-img figcaption{font-size:13px;opacity:.72;margin-top:7px;line-height:1.4}