/* robees landing page, v4 port, stage 1: structure and styling.
   Source of truth: design/robees-mvp-v4.html and design/robees-landing-spec.md.
   Loaded by index.html only; every other public page keeps home.css.
   No keyframes, no reveal transition: stage 3 owns motion.
   Square corners everywhere, no rounding, no shadows, no gradients. */

/* robees typeface v9, three cuts, full character set (no subsetting, no
   unicode-range). The hash in each filename is the file's content hash, so a
   new build gets a new URL and no cached copy of an older face survives.
   Masters: OneDrive HempHive/Graphic Design/Fonts/robees{Logo,Display,Text}-Regular.otf.
   The v7 face is retired: the app moved to these files on 2026-09-24. */
@font-face {
  font-family: "robees Logo";
  src: url("assets/robees-logo.b35eec6b8d.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "robees Display";
  src: url("assets/robees-display.8e27ece8c3.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "robees Text";
  src: url("assets/robees-text.0d148d04c9.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html { color-scheme: dark; overflow-x: clip; scroll-behavior: smooth; }
:root {
  --g1: #2E3D23; --g2: #26331D; --g3: #1D2716; --g4: #151C10;
  --bone: #F2EDE3; --gold: #D4BC85; --muted: #8E9A85; --oat: #E6DCC6;
  --spruce: #8FA878; --bark: #B5825A; --hemp: #C9BE9E;
  --comb: #E5A733; --board: #7D98A8;
  --lt-lab: #665722;                    /* small uppercase labels on light grounds, 5.22:1 */
  /* Measurand colours: identity, one measurand one colour, here and in the
     app (app/src/app/globals.css :root carries the same eight; change both). */
  --measurand-temperature: #E5A21C; --measurand-humidity: #7C9AB2; --measurand-pressure: #CBBD98;
  --measurand-sound: #93B27C; --measurand-light: #C8D18A; --measurand-motion: #C97B4A;
  --measurand-weight: #7D9A55; --measurand-outside: #6F9A90;
  --severity-warn: #F5C518; --severity-critical: #E03131;
  /* Three cuts, one job each: Logo for the wordmark and nothing else,
     Display for headings and the large numbers, Text for everything small.
     --f is the Text cut because body, buttons and inputs inherit it. */
  --f-logo: "robees Logo", Georgia, serif;
  --f-display: "robees Display", Georgia, serif;
  --f: "robees Text", Georgia, serif;
  --gut: clamp(20px, 5vw, 80px); --max: 1240px;
}
* { box-sizing: border-box; border-radius: 0 !important; }
body { margin: 0; background: var(--g1); color: var(--bone); font-family: var(--f);
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip;
  font-synthesis: none; }   /* the file has one weight; never fake bold or italic from it */
h1, h2, h3, h5, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font-family: var(--f); }

/* ---- paper grain, over the whole page ---- */
#grain { position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: .14; mix-blend-mode: overlay; }

/* ---- bands and torn edges ---- */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); position: relative; z-index: 2; }
section { position: relative; padding-block: clamp(64px, 9vw, 132px); }
.b1 { background: var(--g1); } .b2 { background: var(--g2); } .b3 { background: var(--g3); } .b4 { background: var(--g4); }
.lt { color: var(--g1); }
.lt.oat0 { background: #EFE9DC; }
.lt.oat { background: var(--oat); }
.lt.oat2 { background: #DCD1B8; }
/* The tear sits at the top of a section, translated up into the section
   above, and is filled with its own section's colour by setupTears(). It is
   pulled 2px down into its own section, and its path runs past the viewBox
   bottom with overflow visible, so the join is overlapped rather than
   abutted: subpixel rounding at 110% or 125% zoom cannot open a hairline. */
.tear { position: absolute; top: 0; left: 0; width: 100%; height: clamp(30px, 4vw, 58px);
  transform: translateY(calc(-100% + 2px)); display: block; z-index: 1; overflow: visible; }

/* ---- sticky bar. Keeps the ids home.js drives: #site-nav, #nav-burger,
   .nav-link, .lang-toggle, .scrolled, .menu-open ---- */
.site-nav { position: sticky; top: 0; z-index: 60; background: rgba(46, 61, 35, .94); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(242, 237, 227, .16); padding-top: env(safe-area-inset-top, 0px); }
.site-nav.scrolled { background: rgba(46, 61, 35, .97); }
.site-nav-inner { max-width: var(--max); margin: 0 auto; padding: 13px var(--gut); display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); }
.nav-brand { font-size: 23px; letter-spacing: .01em; margin-right: auto; line-height: 1; display: inline-flex; align-items: center; gap: 14px; }
.nav-mark { height: 38px; width: auto; display: block; }   /* the bee mark, SVG, so crisp at any size and in print */
.nav-links { display: flex; gap: clamp(10px, 2vw, 26px); margin: 0; }
.nav-link { font-size: 13.5px; color: var(--bone); opacity: .7; letter-spacing: .02em; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav-link:hover, .nav-link.active { opacity: 1; border-bottom-color: var(--gold); }
.nav-actions { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
.lang-toggle { display: flex; gap: 2px; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.lang-toggle button { font-size: 11px; letter-spacing: .14em; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 5px 7px; }
.lang-toggle button.active { color: var(--gold); border-bottom: 1px solid var(--gold); }
.nav-burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; }
.nav-burger svg { stroke: var(--bone); stroke-width: 2; }
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .site-nav.menu-open .nav-links { display: flex; flex-direction: column; gap: 4px; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--g1); border-bottom: 1px solid rgba(242, 237, 227, .16); padding: 12px var(--gut) 18px; }
  .nav-actions .nav-app-btn { display: none; }   /* beats .btn, which comes later */
}

/* ---- buttons ---- */
.btn { display: inline-block; background: var(--gold); color: var(--g4); padding: 11px 22px 12px;
  font-size: 15px; letter-spacing: .01em; white-space: nowrap; border: 0; cursor: pointer; transition: background .18s; }
.btn:hover { background: var(--bone); }
.btn.sm { padding: 9px 16px 10px; font-size: 13.5px; }
.btn.ghost, .btn.btn-outline { background: none; color: var(--bone); box-shadow: inset 0 0 0 1px rgba(242, 237, 227, .5); }
.btn.ghost:hover, .btn.btn-outline:hover { background: rgba(242, 237, 227, .1); }
.lt .btn.ghost { background: none; color: var(--g1); box-shadow: inset 0 0 0 1px rgba(46, 61, 35, .45); }
.lt .btn.ghost:hover { background: rgba(46, 61, 35, .08); }
.lt .btn { background: var(--g1); color: var(--oat); }
.lt .btn:hover { background: var(--g4); }
.btn-block { width: 100%; }

/* ---- type ---- */
.lab { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); display: block; }
.lt .lab { color: var(--lt-lab); }
h1 { font-size: clamp(34px, 5.6vw, 74px); line-height: 1.04; letter-spacing: .045em; text-transform: uppercase; max-width: 14ch; font-weight: 400; }
h2 { font-size: clamp(22px, 3vw, 38px); line-height: 1.12; letter-spacing: .055em; text-transform: uppercase; max-width: 22ch; font-weight: 400; }
.plain { text-transform: none; letter-spacing: .008em; font-size: clamp(20px, 2.4vw, 30px); }
h3 { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.2; letter-spacing: .01em; font-weight: 400; }
/* Face per job. Everything not listed here inherits the Text cut from body. */
.nav-brand, .foot .brand { font-family: var(--f-logo); }
h1, h2, h3, .lw-num, .lw-mini-num { font-family: var(--f-display); }
.sub { font-size: clamp(17px, 1.7vw, 21px); color: color-mix(in srgb, var(--bone) 80%, var(--muted)); max-width: 46ch; margin-top: 20px; }
.lt .sub { color: color-mix(in srgb, var(--g1) 76%, transparent); }
.sm { font-size: 15px; color: var(--muted); max-width: 52ch; }
.lt .sm { color: color-mix(in srgb, var(--g1) 66%, transparent); }
.cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(26px, 4vw, 40px); }
/* Citation under a figure: small letterspaced caps. */
.cite { display: block; margin-top: 12px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.lt .cite { color: var(--lt-lab); }

/* ---- the gold label plus hairline heading device ---- */
.eyebrow { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(26px, 4vw, 44px); }
.eyebrow .lab { font-size: 12px; letter-spacing: .22em; white-space: nowrap; }
.eyebrow .rule { flex: 1; height: 1px; background: currentColor; opacity: .22; }
.lt .eyebrow .rule { opacity: .30; }
.mid { text-align: center; }
.mid h2 { margin-inline: auto; }
.mid .eyebrow { justify-content: center; }
.mid .eyebrow .rule { display: none; }
.mid form { margin-inline: auto; }
.mid .faq, .mid .field, .mid .field-row, .mid .consent { text-align: left; }

/* ---- grids ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.split.l { grid-template-columns: 1.05fr .95fr; }
.split.top { align-items: start; }
@media (max-width: 880px) { .split, .split.l { grid-template-columns: 1fr; } }

/* ---- lists ---- */
.bul { margin-top: 26px; display: grid; gap: 13px; }
.bul li { display: flex; gap: 14px; align-items: baseline; font-size: 16.5px; line-height: 1.55; }
.bul li::before { content: ""; width: 7px; height: 7px; background: var(--gold); flex: none; transform: translateY(-2px); }
.two { columns: 2; column-gap: 44px; display: block; }
.two li { margin-bottom: 13px; break-inside: avoid; }
@media (max-width: 700px) { .two { columns: 1; } }

/* ---- hero backdrop (robees-hero.js): comb variant C behind the hero, with
   the faint left-hand veil that keeps the headline clear. Promoted from the
   GSS demo rig on 30 Sept; the rig's panel is gone. ---- */
#hero { position: relative; overflow: hidden; isolation: isolate; }
#hero > .hero-backdrop, #hero > .hero-veil { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
#hero > .hero-veil { z-index: 1; background: linear-gradient(90deg, rgba(21, 28, 16, .32) 0%, rgba(21, 28, 16, 0) 40%, rgba(21, 28, 16, 0) 100%); }
#hero > .wrap { position: relative; z-index: 2; }

/* ---- the hive: what it is, what it does for you, what it costs ---- */
/* The 3D hive (robees-hive-3d.js). Only the stage CSS from the snippet is
   ported, and all of it is scoped to #hive: the snippet's own h1, .lede and
   .body rules are not needed, the section already sets its type. The
   element starts invisible and shifted; the script flies it in. */
#hive .stage { position: relative; aspect-ratio: 1 / 1.14; min-height: 440px; }
#hive .stage model-viewer { display: block; width: 100%; height: 100%; background: transparent; pointer-events: none;
  --poster-color: transparent; opacity: 0; transform: translateX(-72px) scale(.93); will-change: opacity, transform; }
/* one column: the model sits above the text, not below it */
@media (max-width: 880px) {
  #hive .hive-stage-col { order: -1; }
  #hive .stage { aspect-ratio: 1 / 1; min-height: 0; }
}
/* The hook under DIE BEUTE: three short claims in the display cut, square
   markers like .bul, and the insulation baseline as a footnote right under. */
.hive-hook { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 6px; }
.hive-hook li { display: flex; gap: 14px; align-items: baseline; font-family: var(--f-display);
  font-size: clamp(19px, 2.2vw, 26px); line-height: 1.2; letter-spacing: .008em; }
.hive-hook li::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; transform: translateY(-3px); }
.hive-what { margin-top: 22px; font-size: 16.5px; line-height: 1.6; max-width: 52ch; color: color-mix(in srgb, var(--g1) 82%, transparent); }
.hive-what + .hive-what { margin-top: 12px; }
.hive-facts { margin-top: clamp(44px, 6vw, 80px); padding-top: clamp(30px, 4vw, 44px); border-top: 1px solid rgba(46, 61, 35, .22); }
.hive-facts > * { min-width: 0; }
/* both headings and the benefit bullets carry the section now, so they are
   set large: the lead line and the caption that used to support them are gone */
.hive-facts h3 { font-size: clamp(26px, 3.1vw, 42px); line-height: 1.12; }
.hive-facts .bul { margin-top: 22px; gap: 16px; }
.hive-facts .bul li { font-size: clamp(19px, 1.9vw, 25px); line-height: 1.35; }
.hive-facts .bul li::before { width: 9px; height: 9px; transform: translateY(-3px); }
/* What it costs: the two defining costs in the display cut, the rest of the
   list behind "Mehr", which opens on hover (fine pointers) or on click. */
.price-top { margin-top: 22px; display: grid; gap: 16px; }
.price-top .pt { display: grid; gap: 4px; }
.price-top .pt-v { font-family: var(--f-display); font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; letter-spacing: .01em; }
.price-top .pt-l { font-size: 15px; line-height: 1.4; color: color-mix(in srgb, var(--g1) 76%, transparent); }
.price-more { margin-top: 18px; }
.price-more-btn { display: inline-flex; align-items: center; gap: 9px; padding: 6px 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--lt-lab); }
.price-more-btn:hover, .price-more-btn:focus-visible { color: var(--g1); }
.price-more-btn .chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
.price-more.open .price-more-btn .chev { transform: translateY(1px) rotate(-135deg); }
.price-more-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s ease, visibility 0s linear .35s; }
.price-more-panel > div { overflow: hidden; min-height: 0; }
.price-more.open .price-more-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s ease, visibility 0s; }
.price-more .prices { margin-top: 6px; }
.prices { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 15.5px; line-height: 1.4; }
.prices th, .prices td { padding: 11px 0; border-bottom: 1px solid rgba(46, 61, 35, .20); vertical-align: baseline; }
.prices tr:first-child th, .prices tr:first-child td { border-top: 1px solid rgba(46, 61, 35, .20); }
.prices th { font-weight: 400; text-align: left; padding-right: 18px; }
.prices td { text-align: right; font-family: var(--f-display); letter-spacing: .02em; width: 42%; }
@media (max-width: 480px) { .prices td { width: 46%; } }

/* ---- illustration slots. Empty in stage 1; each carries a comment naming
   its reference from the spec ledger. .art and .slot only reserve the
   layout space. The hero .slot lost its framed "Render" placeholder on
   27 Sept, and on a single-column phone layout the empty slot is hidden
   rather than left as a blank block under the buttons. ---- */
.art { position: relative; width: 100%; aspect-ratio: 4 / 3; }
.slot { position: relative; width: 100%; aspect-ratio: 4 / 3; }
@media (max-width: 880px) { .slot:empty { display: none; } }
.bleed-l, .bleed-r { position: absolute; top: 50%; translate: 0 -50%; width: min(34vw, 420px); aspect-ratio: auto; opacity: .10; z-index: 0; pointer-events: none; }
.bleed-l { left: -16%; } .bleed-r { right: -16%; }

/* ---- demo tiles. The live widget keeps its lw-* markup and ids, which
   lwRenderFreshness fills; only the look changes. Each hive-sensor card
   takes a v4 tile colour via :has() on its data-metric child. ---- */
.lw-cards-panel { margin-top: clamp(24px, 3.4vw, 40px); text-align: left; }
.lw-top-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.lw-live-pill { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); box-shadow: inset 0 0 0 1px rgba(212, 188, 133, .5); padding: 5px 9px; }
.lw-update-pulse { display: none; }
.lw-group + .lw-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(242, 237, 227, .18); }
.lw-group-label { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.lw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 18px); }
/* the one block: four per row like the app's dashboard (TILE_COLUMNS = 4) */
.lw-cards.lw-cards--all { grid-template-columns: repeat(4, 1fr); }
.lw-cards.lw-cards--2 { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
.lw-cards.lw-cards--1 { grid-template-columns: 1fr; max-width: 310px; }
.lw-mini-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(10px, 1.4vw, 18px); max-width: 640px; }
@media (max-width: 860px) { .lw-cards, .lw-cards.lw-cards--all { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .lw-cards, .lw-cards.lw-cards--2, .lw-cards.lw-cards--all, .lw-mini-row { grid-template-columns: 1fr; } }
.lw-metric, .lw-mini-metric { padding: clamp(18px, 2vw, 26px); min-height: clamp(140px, 15vw, 196px);
  display: flex; flex-direction: column-reverse; justify-content: space-between; color: #151C10;
  background: var(--tile, var(--hemp)); transition: background-color .9s ease, color .9s ease, box-shadow .9s ease; }
.lw-mini-metric { min-height: clamp(120px, 11vw, 150px); }
.lw-metric[hidden] { display: none; }   /* display:flex above would otherwise override the attribute */
/* One colour per measurand, the same tokens as the app's tiles
   (app/src/lib/measurands.ts TILES; the values live in :root above). */
.lw-metric:has([data-metric="t_in"]) { --tile: var(--measurand-temperature); }
.lw-metric:has([data-metric="h_in"]) { --tile: var(--measurand-humidity); }
.lw-metric:has([data-metric="pressure"]) { --tile: var(--measurand-pressure); }
.lw-metric:has([data-metric="sound_db"]) { --tile: var(--measurand-sound); }
.lw-metric:has([data-metric="light_lux"]) { --tile: var(--measurand-light); }
.lw-metric:has([data-metric="tilt"]) { --tile: var(--measurand-motion); }
.lw-metric:has([data-metric="t_out"]) { --tile: var(--measurand-outside); }
/* Waiting, not failed. A tile with nothing current (data-stale, set by home.js)
   drops to a low-chroma wash of its own colour over the section ground, with a
   hairline of the same colour, so the grid recedes while each tile keeps its
   identity. Label, "--", unit and the staleness line stay fully legible in
   bone. Fresh tiles are untouched, and the transition back to full colour is
   the page visibly waking up. The wording is home.js's and does not change. */
.lw-metric[data-stale="1"] { background: color-mix(in srgb, var(--tile, var(--hemp)) 18%, var(--g3));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile, var(--hemp)) 42%, transparent); color: var(--bone); }
.lw-metric[data-stale="1"] .lw-label { opacity: 1; }
.lw-metric[data-stale="1"] .lw-card-note { opacity: .85; }
/* the Open-Meteo credit on the outside card; not .lw-card-note, which the script
   removes whenever a card has no stale note */
.lw-credit { order: 3; display: block; font-size: 10.5px; letter-spacing: .04em; opacity: .75; margin-bottom: 8px;
  color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.lw-num, .lw-mini-num { font-size: clamp(30px, 4vw, 54px); line-height: 1; letter-spacing: .005em; font-variant-numeric: tabular-nums; }
.lw-mini-num { font-size: clamp(24px, 3vw, 40px); }
.lw-unit { font-size: .36em; margin-left: .28em; opacity: .78; }
.lw-label, .lw-mini-label { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .72; margin-bottom: 14px; }
.lw-num--text { font-size: clamp(20px, 2.2vw, 30px); text-transform: uppercase; letter-spacing: .04em; }
.lw-sub { font-size: 15px; opacity: .8; margin-top: 6px; order: -1; }
.lw-card-note { font-size: 10.5px; letter-spacing: .04em; opacity: .75; margin-bottom: 8px; }
.lw-metric[data-stale="1"] .lw-num, .lw-mini-metric[data-stale="1"] .lw-mini-num { opacity: .6; }
/* The whole-widget dim skips the outside card: that one is the weather
   service's current value, and dimming it made current data look stale. */
#live-widget[data-stale="1"] .lw-metric:not(#lw-outside) .lw-num, #live-widget[data-stale="1"] .lw-mini-num { opacity: .6; }
.lw-freshness { margin-top: 22px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lw-freshness[data-state="stale"] { color: color-mix(in srgb, var(--bone) 82%, var(--muted)); }
.lw-freshness[data-state="offline"] { color: var(--bark); }

/* ---- form. Keeps .field, .field-row, .consent, .form-feedback for home.js ---- */
form { margin-top: clamp(28px, 4vw, 42px); max-width: 620px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
label { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
input, select, textarea { width: 100%; font-family: var(--f); font-size: 16px; color: var(--bone);
  background: rgba(242, 237, 227, .06); border: 0; box-shadow: inset 0 0 0 1px rgba(242, 237, 227, .26); padding: 13px 14px; outline: none; }
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 1px var(--gold); }
select { appearance: none; }
select option { color: var(--g4); }
input[hidden] { display: none; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 6px 0 18px; }
.consent input { width: auto; margin-top: 4px; }
form .btn { margin-top: 8px; }
.form-feedback { margin-top: 14px; font-size: 15px; min-height: 1.4em; }
.form-feedback.success { color: var(--spruce); }
.form-feedback.error { color: var(--comb); }

/* ---- contact: one form for beekeepers and organisations (variant B) ---- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 60px; align-items: start; text-align: left; }
.contact-copy .lab { margin-bottom: 16px; }
.contact-h { text-transform: none; letter-spacing: -.2px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.16; max-width: none; }
.contact-sub { font-size: clamp(16px, 1.4vw, 17px); line-height: 1.55; color: color-mix(in srgb, var(--bone) 75%, var(--muted)); margin: 13px 0 0; max-width: 46ch; }
.contact-small { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 14px 0 0; }
.contact-form { margin-top: 0; max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; position: relative; }
.contact-form .full, .contact-form .contact-actions { grid-column: 1 / -1; }
.contact-form .field { margin-bottom: 14px; }
.contact-form label i { font-style: normal; opacity: .6; letter-spacing: .1em; }
.contact-form textarea { min-height: 78px; }
.contact-form select { padding-right: 38px; background-repeat: no-repeat; background-position: right 14px center; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%238E9A85' stroke-width='1.8'/%3E%3C/svg%3E"); }
.contact-form .cf-hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.contact-actions { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.contact-actions .btn { margin-top: 0; }
.contact-actions .form-feedback { margin-top: 0; }
.contact { margin-top: clamp(64px, 8vw, 110px); padding-top: clamp(40px, 5vw, 60px); border-top: 1px solid rgba(242, 237, 227, .16); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 620px) { .contact-form { grid-template-columns: 1fr; } .contact-actions { flex-direction: column; align-items: flex-start; } }

/* ---- faq. Keeps .faq-item.open / .faq-question / .faq-answer for home.js ---- */
.faq { margin-top: 26px; border-top: 1px solid rgba(242, 237, 227, .24); }
.faq-item { border-bottom: 1px solid rgba(242, 237, 227, .24); }
.faq-question { width: 100%; background: none; border: 0; color: var(--bone); cursor: pointer; padding: 18px 0;
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline; text-align: left;
  font-size: clamp(16.5px, 1.8vw, 20px); font-family: var(--f); }
.faq-question:hover { color: var(--gold); }
.faq-question::after { content: "+"; color: var(--gold); font-size: 20px; line-height: 1; flex: none; }
.faq-item.open .faq-question::after { content: "\2013"; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item.open .faq-answer { max-height: 30em; }
.faq-answer-inner { padding: 0 0 20px; font-size: 16px; color: var(--muted); max-width: 60ch; }

/* ---- a light section inverts every hairline, field and rule ---- */
.lt .bul li::before { background: var(--g1); }
.lt input, .lt select, .lt textarea { color: var(--g1); background: rgba(46, 61, 35, .05); box-shadow: inset 0 0 0 1px rgba(46, 61, 35, .30); }
.lt label { color: var(--lt-lab); }
.lt .faq { border-top-color: rgba(46, 61, 35, .26); }
.lt .faq-item { border-bottom-color: rgba(46, 61, 35, .26); }
.lt .faq-question { color: var(--g1); }
.lt .faq-question:hover, .lt .faq-question::after { color: var(--lt-lab); }
.lt .faq-answer-inner { color: rgba(46, 61, 35, .72); }

/* ---- footer. Keeps the five legal links. ---- */
.site-footer { background: var(--g4); padding-block: 46px calc(54px + env(safe-area-inset-bottom, 0px)); position: relative; }

/* Supporters strip inside the footer band: one centred row of four identical
   bone plates (same height, same padding), each logo scaled to the same
   optical height, wrapping to two rows only below roughly 585px. The logos
   are dark or blue artwork on alpha, so the plate is what makes them
   legible on the darkest olive; brand colours intact.
   The image files carry different transparent margins (measured alpha
   bounding boxes: EU 94% of the file height, KWF 83%, AAU 69%, build! 100%),
   so each img box is sized to put the visible artwork at 30px. The files
   are partner assets and stay untouched. */
.site-footer #partners { margin-bottom: 44px; padding-bottom: 40px; border-bottom: 1px solid rgba(242, 237, 227, .16); }
.site-footer #partners .eyebrow { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0; }
.site-footer #partners .partner-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(12px, 2.4vw, 36px); margin: 22px 0 20px; }
.site-footer #partners .partner-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  height: 64px; padding: 0 16px; background: var(--bone); }
.site-footer #partners .partner-logo img { width: auto; max-width: none; display: block; }
/* The EU file is the white-on-alpha variant made for the old dark strip; on
   a bone plate it vanishes. Inverting the single-colour emblem yields its
   black monochrome variant, the same ink KWF's own file carries. */
.site-footer #partners .partner-logo:nth-child(1) img { height: 32px; filter: invert(1); }   /* EU: artwork 30px */
.site-footer #partners .partner-logo:nth-child(2) img { height: 36px; }   /* KWF: artwork 30px */
.site-footer #partners .partner-logo:nth-child(3) img { height: 44px; }   /* AAU: artwork 30px */
.site-footer #partners .partner-logo:nth-child(4) img { height: 30px; }   /* build!: artwork 30px */
.site-footer #partners .partner-caption { text-align: center; font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 720px; margin: 0 auto; }
.foot { display: flex; gap: 26px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; font-size: 13.5px; color: var(--muted); }
.foot .brand { font-size: 20px; color: var(--bone); }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a:hover { color: var(--bone); }
.foot .legal { flex-basis: 100%; font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- the app demo in #app (robees-app-demo.js) ------------------------
   A phone cycling through four app screens, with a floating callout. The
   data on it is deliberately fictional (three apiaries, fourteen colonies,
   Volk 7 drifting from 35.4 to 32.1 degrees) and internally consistent:
   the flag, the amber tile stripe, the amber map pin and the callout all
   mean the same colony. Do not wire it to live data.
   Every rule is nested under .rb-appdemo, so nothing escapes, and the
   ping keyframes are renamed rb-ping. Two things reach IN from the page
   and are handled here: the site-wide "* { border-radius: 0 !important }"
   would square the phone, its pins and its dots, so the radii inside the
   component carry !important (the one place on the page with round
   corners, and only because it depicts a phone); and the page's .sub,
   body line height and size are reset at the root. These rules sit at the
   end of the file so they win ties with .lt .sub. */
.rb-appdemo {
  --scr: #050705; --card: #18221A; --line: #2B3A26;
  --cream: #F2EDE3; --dim: #9AA88C; --amber: #FFC24D; --amber2: #E8A317;
  font-size: 16px; line-height: normal;
}
.rb-appdemo .sub { max-width: none; margin-top: 0; }
/* the map pins stop pinging while the section is off screen */
.rb-appdemo.rb-idle .mk::after { animation-play-state: paused; }
.rb-appdemo .stage { position:relative;display:flex;justify-content:center;align-items:center; min-height:600px;perspective:1400px }
.rb-appdemo .phone { position:relative;width:308px;height:640px;border-radius:44px !important; background:linear-gradient(150deg,#20291B,#0C110A 58%,#1A2216); padding:11px;box-shadow:0 34px 70px -26px rgba(30,36,20,.60), 0 6px 18px rgba(30,36,20,.18), inset 0 0 0 1px rgba(242,237,227,.10); opacity:0;transform:translateY(26px) scale(.97);will-change:opacity,transform }
.rb-appdemo .phone.in { opacity:1;transform:none;transition:opacity .9s ease, transform 1s cubic-bezier(.22,.9,.3,1) }
.rb-appdemo .phone::after { content:"";position:absolute;left:50%;top:19px;width:88px;height:22px; transform:translateX(-50%);background:#070A06;border-radius:12px !important;z-index:5 }
.rb-appdemo .screen { position:relative;width:100%;height:100%;border-radius:34px !important;overflow:hidden; background:var(--scr);font-family:"robees Text",Georgia,serif;color:var(--cream) }
.rb-appdemo .scr { position:absolute;inset:0;opacity:0;transform:translateX(16px); transition:opacity .55s ease, transform .55s cubic-bezier(.22,.9,.3,1); display:flex;flex-direction:column }
.rb-appdemo .scr.on { opacity:1;transform:none }
.rb-appdemo .scr.out { opacity:0;transform:translateX(-16px) }
.rb-appdemo .top { display:flex;align-items:center;justify-content:space-between; padding:42px 16px 10px;border-bottom:1px solid var(--line);flex:0 0 auto }
.rb-appdemo .brand { display:flex;align-items:center;gap:7px;font-family:"robees Display",Georgia,serif;font-size:17px }
.rb-appdemo .brand img { width:19px;height:auto;display:block }
.rb-appdemo .top .pill { font-size:9.5px;letter-spacing:.08em;border:1px solid var(--line); border-radius:5px !important;padding:4px 7px;color:var(--dim) }
.rb-appdemo .pad { padding:14px 16px;flex:1 1 auto;overflow:hidden }
.rb-appdemo .hello { font-family:"robees Display",Georgia,serif;font-size:19px;margin:2px 0 13px }
.rb-appdemo .seg { display:inline-flex;background:#101A0D;border-radius:9px !important;padding:3px;gap:3px;margin-bottom:9px }
.rb-appdemo .seg b { font-size:10.5px;padding:5px 11px;border-radius:7px !important;color:var(--dim);font-weight:400 }
.rb-appdemo .seg b.sel { background:var(--amber);color:#1A1405;font-weight:700 }
.rb-appdemo .map { position:relative;height:214px;border-radius:12px !important;overflow:hidden;border:1px solid var(--line); background:radial-gradient(120% 90% at 32% 18%,#3A4B2C,#24301A 58%,#18220F) }
.rb-appdemo .map .water { position:absolute;left:-8%;top:52%;width:66%;height:20%;border-radius:50% !important; background:#2C5140;filter:blur(.4px);transform:rotate(-7deg) }
.rb-appdemo .map .road { position:absolute;height:1.5px;background:rgba(242,237,227,.20) }
.rb-appdemo .mk { position:absolute;width:15px;height:15px;border-radius:50% !important;transform:translate(-50%,-50%) }
.rb-appdemo .mk::after { content:"";position:absolute;inset:-7px;border-radius:50% !important;border:1.5px solid currentColor; opacity:.55;animation:rb-ping 2.6s ease-out infinite }
@keyframes rb-ping{0%{transform:scale(.55);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.rb-appdemo .mk.g { background:#8FA878;color:#8FA878 }
.rb-appdemo .mk.a { background:var(--amber);color:var(--amber) }
.rb-appdemo .mk.c { background:#C8BCA0;color:#C8BCA0 }
.rb-appdemo .maplab { position:absolute;font-size:9px;color:rgba(242,237,227,.82);transform:translate(-50%,10px);font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.65) }
.rb-appdemo .card { background:var(--card);border:1px solid var(--line);border-radius:12px !important;padding:12px 13px;margin-bottom:10px }
.rb-appdemo .k { font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 6px }
.rb-appdemo .row { display:flex;align-items:center;justify-content:space-between;gap:10px }
.rb-appdemo .row + .row { margin-top:9px }
.rb-appdemo .nm { font-weight:700;font-size:13.5px }
.rb-appdemo .sub { font-size:10.5px;color:var(--dim);font-weight:400 }
.rb-appdemo .flag { font-size:10.5px;color:var(--amber);white-space:nowrap }
.rb-appdemo .dot { width:7px;height:7px;border-radius:50% !important;background:var(--amber);flex:0 0 auto;margin-right:8px }
.rb-appdemo .wx { display:flex;align-items:center;gap:12px }
.rb-appdemo .wx .t { font-family:"robees Display",Georgia,serif;font-size:27px;line-height:1 }
.rb-appdemo .wx .s { font-size:10.5px;color:var(--dim);line-height:1.5 }
.rb-appdemo .sun { width:24px;height:24px;border-radius:50% !important;background:radial-gradient(circle,#FFD469,#E8A317);flex:0 0 auto }
.rb-appdemo .hives { display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:2px }
.rb-appdemo .hv { background:var(--card);border:1px solid var(--line);border-radius:9px !important;padding:7px 5px 6px;text-align:center }
.rb-appdemo .hv i { display:block;height:4px;border-radius:2px !important;margin-bottom:6px }
.rb-appdemo .hv .b { height:22px;border-radius:4px !important;background:#26331F;margin-bottom:5px;position:relative }
.rb-appdemo .hv .b::after { content:"";position:absolute;left:28%;right:28%;top:44%;height:2px;background:#3A4A30;border-radius:2px !important }
.rb-appdemo .hv span { font-size:8.5px;color:var(--dim) }
.rb-appdemo .chart { background:var(--amber2);border-radius:12px !important;padding:12px 13px 10px;color:#20180A }
.rb-appdemo .chart h4 { font-family:"robees Display",Georgia,serif;font-size:16px;margin:0 0 1px;font-weight:400 }
.rb-appdemo .chart .meta { font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin-bottom:8px }
.rb-appdemo .chart svg { display:block;width:100%;height:110px }
.rb-appdemo .chart .pathline { fill:none;stroke:#20180A;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round }
.rb-appdemo .stats { display:flex;justify-content:space-between;margin-top:9px;gap:6px }
.rb-appdemo .stats div { font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.7 }
.rb-appdemo .stats b { display:block;font-family:"robees Display",Georgia,serif;font-size:14px;letter-spacing:0; text-transform:none;opacity:1;margin-top:2px }
.rb-appdemo .note { background:#101A0D;border:1px solid var(--line);border-radius:10px !important;padding:10px 11px;margin-bottom:8px }
.rb-appdemo .note p { margin:0;font-size:12px;font-weight:700;line-height:1.35 }
.rb-appdemo .note small { display:block;margin-top:5px;font-size:9.5px;color:var(--dim) }
.rb-appdemo .field { background:#101A0D;border:1px solid var(--line);border-radius:10px !important;padding:11px; font-size:11.5px;color:#6E7C62;margin-bottom:9px }
.rb-appdemo .add { display:inline-block;background:var(--amber);color:#1A1405;font-weight:700;font-size:11px; padding:7px 15px;border-radius:7px !important }
.rb-appdemo .tabs { margin-top:auto;flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line);background:#080D07;padding:9px 4px 16px }
.rb-appdemo .tabs a { display:flex;flex-direction:column;align-items:center;gap:4px; font-size:8.5px;letter-spacing:.06em;color:#5E6B53;text-decoration:none }
.rb-appdemo .tabs a i { width:15px;height:15px;border:1.4px solid currentColor;border-radius:4px !important;display:block }
.rb-appdemo .tabs a.m i { border-radius:50% !important }
.rb-appdemo .tabs a.n i { border-radius:3px !important;border-width:1.4px;position:relative }
.rb-appdemo .tabs a.n i::after { content:"";position:absolute;left:3px;right:3px;top:4px;height:1.2px;background:currentColor; box-shadow:0 4px 0 currentColor }
.rb-appdemo .tabs a.s i { border-radius:50% !important;box-shadow:inset 0 0 0 3px transparent }
.rb-appdemo .tabs a.sel { color:var(--amber) }
.rb-appdemo .callout { position:absolute;left:-26px;bottom:128px;background:var(--card);border:1px solid var(--line); border-radius:12px !important;padding:10px 13px;box-shadow:0 18px 34px -16px rgba(30,36,20,.55); opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.3,1) }
.rb-appdemo .callout.in { opacity:1;transform:none }
.rb-appdemo .callout .k { margin-bottom:4px }
.rb-appdemo .callout .v { font-family:"robees Display",Georgia,serif;font-size:17px;color:var(--cream) }
.rb-appdemo .callout .v em { font-style:normal;color:var(--amber) }
@media (max-width: 880px) {
  .rb-appdemo .stage { min-height:0 }
  .rb-appdemo .callout { left:auto;right:-4px;bottom:60px }
}