/* Rebuild-specific corrections. Keep this file short: the archived theme CSS
   is the source of truth, this only patches what the static rebuild changes. */
/* form-guard — die Versteck-Klasse fuer den Honeypot.
 *
 * Gehoert in das globale Stylesheet jeder Site. Absichtlich HIER und nicht als
 * Inline-Style am Element: Inline-`display:none` ist das Muster, auf das die
 * besseren Formular-Ausfueller pruefen, bevor sie ein Feld befuellen. Ein Feld,
 * das per externer Klasse aus dem Viewport geschoben wird, sieht fuer sie aus
 * wie ein normales Feld.
 *
 * Deshalb auch `left:-10000px` und nicht `display:none`: ein Feld mit
 * `display:none` wird von manchen Ausfuellern uebersprungen, ein
 * weggeschobenes nicht.
 */
.fg-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Auch bei erzwungenen Farben und in Druckausgaben draussen halten. */
@media print {
  .fg-hp { display: none !important; }
}

/* Messages under the rebuilt forms (newsletter, contact). */
.ash-form-message { margin-top: 12px; font-size: 15px; line-height: 1.4; }
.ash-form-message--success { color: #2f5d3a; }
.ash-form-message--error { color: #b3261e; }
.ash-form-message--pending { color: #666; }

/* The child theme's off-canvas mobile menu (.men) shipped its stylesheet in a
   cache bundle (kel79o7a/rtls.css) that the Wayback Machine never captured, and
   its toggle script is unknown. Divi's own mobile menu (#mobile_menu, same
   items) is used instead; the unstyled custom block stays hidden. */
#et_mobile_nav_menu .men { display: none; }

/* The child theme painted the current menu item white for the green header
   bar; inside Divi's white mobile dropdown that made it invisible. */
#mobile_menu li.current-menu-item > a, #mobile_menu li.current_page_item > a { color: #4d985b !important; }

/* ── Phone and tablet layout ──────────────────────────────────────────────
   The archived theme CSS sizes several blocks for desktop only (fixed pixel
   widths on text blocks, table-layout rows, hero paddings), so the WordPress
   site overflowed on phones and the browser zoomed out. These rules apply
   below Divi's own 980 px breakpoint and only cap or stack; desktop is
   untouched. Listed in docs/ASSUMPTIONS.md. */
@media (max-width: 980px) {
  /* clip, not hidden: overflow-x:hidden on html/body locks vertical scrolling in iOS Safari */
  #page-container { overflow-x: clip; }
  html body #page-container #et-main-area div#home-page-4 h3 { font-size: 34px !important; line-height: 1.1 !important; }
  /* The header's white Consultation button (a dead href="#") overlaps the logo on phones; Divi's menu lists the same item. */
  html body #main-header a.cons { display: none !important; }
  /* Flex rows keep their columns side by side whatever their width; stack them. */
  html body #page-container #et-main-area .et_pb_row { flex-wrap: wrap !important; flex-direction: column !important; }
  html body #page-container #et-main-area .et_pb_column { flex: 0 0 100% !important; }
  /* Portfolio cards are floated thirds; one per row on phones. */
  html body #page-container #et-main-area div#single-portfolio { width: 100% !important; float: none !important; margin-right: 0 !important; }
  /* Resource lists (people, farms, books...): image and text are floated halves; the template
     even carries a phone-only heading (h3.mobi) whose rules were never archived. */
  html body #page-container #et-main-area .resource-post { display: block !important; }
  html body #page-container #et-main-area .resource-post .image-sct, html body #page-container #et-main-area .resource-post .content-sct { width: 100% !important; float: none !important; margin: 0 0 20px !important; }
  html body #page-container #et-main-area .resource-post .image-sct { height: 240px !important; }
  html body #page-container #et-main-area .resource-post h3.mobi { display: block !important; }
  html body #page-container #et-main-area .resource-post .content-sct h3 { display: none !important; }
  html body #page-container #et-main-area div#resources h2 { font-size: 40px !important; padding-bottom: 30px !important; }
  /* Single-post template: content column and sidebar stack. */
  html body #page-container #et-main-area .lele, html body #page-container #et-main-area .riri, html body #page-container #et-main-area .sido { width: 100% !important; float: none !important; display: block !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  html body #page-container #et-main-area .container { width: 100% !important; max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; }
  html body #page-container #et-main-area .et_pb_row { width: 90% !important; max-width: 100% !important; }
  /* The podcast row is laid out as a table and takes its content's width. */
  html body div#home-page-3 .et_pb_row { display: block !important; }
  html body div#home-page-3 .et_pb_text_inner { margin-left: 0 !important; }
  html body div#home-page-3 h2 { font-size: 30px !important; line-height: 1.15 !important; overflow-wrap: normal !important; word-break: normal !important; } /* breaks only at the <wbr> after each full stop */
  /* The cow illustration is a positioned pseudo-element on the right; on phones it sits above the text. */
  html body #page-container #et-main-area div#home-page-3 .et_pb_row::before { position: relative !important; display: block !important; width: 100% !important; height: 200px !important; right: auto !important; top: 0 !important; left: auto !important; margin-bottom: 16px !important; background-size: contain !important; background-position: center bottom !important; background-repeat: no-repeat !important; }
  html body div#home-page-3 .et_pb_column { position: relative; }
  html body div#home-page-3 a, div#home-page-2 a { white-space: normal !important; }
  html body div#home-page-1 h1 { font-size: 36px !important; line-height: 1.2 !important; }
  /* The About photo is an absolutely positioned pseudo-element covering the left half; on phones it sits above the text. */
  html body div#home-page-2::before { position: relative !important; display: block !important; width: 100% !important; height: 260px !important; margin-bottom: 24px; }
  html body div#home-page-2 .et_pb_column_empty { display: none !important; }
  html body div#home-page-2 .et_pb_column_1_2:nth-child(2) { width: 100% !important; }
  html body div#home-page-2 h2 { font-size: 34px !important; line-height: 1.15 !important; }
  html body div#home-page-3 a { font-size: 16px !important; }
  /* Footer grid (Bootstrap-style columns with negative row margins) stacks on phones. */
  html body #page-container #main-footer .row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
  html body #page-container #main-footer .col-md-3, #main-footer .col-md-4, #main-footer .col-md-8, #main-footer .col-lg-3 { width: 100% !important; float: none !important; max-width: 100% !important; }
  html body #page-container #et-main-area .et_pb_row::before, #main-content .et_pb_row::after,
  html body #page-container #et-main-area .et_pb_section::before, #main-content .et_pb_section::after,
  html body #page-container #et-main-area .et_pb_column::before, #main-content .et_pb_column::after { max-width: 100% !important; }
  html body #page-container #et-main-area .et_pb_column { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; }
  html body #page-container #et-main-area .et_pb_text_inner { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  html body #page-container #et-main-area .et_pb_text_inner img, #main-content .et_pb_text_inner p img { max-width: 100% !important; height: auto !important; } /* the width attribute keeps the box reserved before the image loads */
  html body #page-container #et-main-area .et_pb_text_inner p { max-width: 100% !important; }
  html body #page-container #et-main-area [style*="width"]:not(.owl-stage):not(.owl-item) { max-width: 100% !important; }
  html body #page-container #et-main-area .owl-stage, html body #page-container #et-main-area .owl-item { max-width: none !important; } /* the carousel sizes its track inline */
  html body #page-container #et-main-area div#home-page-5 .owl-nav { display: none !important; } /* touch drag on phones; the arrows sat on the VIEW ALL button */
}
@media (max-width: 760px) {
  /* Our Story hero: the mobile background was declared with the shorthand, which reset its size and tiled it. */
  html body div#Longread-01 { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
  html body div#Longread-01 .et_pb_text_inner { padding-top: 150px !important; padding-bottom: 130px !important; }
  html body div#Longread-01 h1 { font-size: 38px !important; line-height: 46px !important; }
  /* Justified 24 px italic in a 300 px column leaves rivers of white; left-align on phones. */
  html body div#Longread-02 p { text-align: left !important; font-size: 20px !important; }
  html body div#Longread-02::before { display: none; }
}

/* Images whose file was never archived (site.js marks them). */
img.ash-missing { visibility: hidden; }
/* self-hosted fonts: /assets/css/fonts.css replaces the Google Fonts links */

/* ── Resource lists as a card grid ─────────────────────────────────────────
   The theme floated image and text halves with alternating order and a
   phone-only duplicate title; the brief asks for a plain card grid. */
html body #page-container #et-main-area div#resources { max-width: 1280px; margin: 0 auto; padding: 0 20px 60px; box-sizing: border-box; }
html body #page-container #et-main-area div#resources .ctg { grid-column: 1 / -1; }
html body #page-container #et-main-area div#resources .resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
html body #page-container #et-main-area div#resources .resource-post { display: flex !important; flex-direction: column !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: #fff; border-radius: 12px; box-shadow: 0 1px 18px rgba(0,0,0,.08); overflow: hidden; }
html body #page-container #et-main-area div#resources .resource-post .image-sct { width: 100% !important; height: 220px !important; float: none !important; margin: 0 !important; border-radius: 0 !important; filter: none !important; order: 0 !important; }
html body #page-container #et-main-area div#resources .resource-post .image-sct::before { display: none; }
html body #page-container #et-main-area div#resources .resource-post .content-sct { width: 100% !important; float: none !important; margin: 0 !important; padding: 22px 24px 28px !important; order: 1 !important; box-sizing: border-box; }
html body #page-container #et-main-area div#resources .resource-post .content-sct h3 { font-size: 22px !important; line-height: 1.3 !important; padding-bottom: 12px !important; display: block !important; }
html body #page-container #et-main-area div#resources .resource-post .content-sct p { font-size: 16px !important; line-height: 1.6 !important; }
html body #page-container #et-main-area div#resources .resource-post .content-sct a { margin-top: 18px !important; padding: 12px 22px 13px !important; font-size: 15px !important; }
html body #page-container #et-main-area div#resources h2 { font-size: 44px !important; padding-bottom: 30px !important; }
@media (max-width: 980px) { html body #page-container #et-main-area div#resources .resource-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 640px) { html body #page-container #et-main-area div#resources .resource-grid { grid-template-columns: 1fr; } }

/* ── Category-post template ──────────────────────────────────────────────── */
html body #page-container #et-main-area #main-content.tpo .breadcrumb, html body #page-container #et-main-area #main-content.tpo .breadcrumb a { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.7); font-size: 15px; }
html body #page-container #et-main-area #main-content.tpo .breadcrumb .kaba { display: none; }

/* ── Belief pages: one hero and intro treatment for all nine ─────────────────
   Each page's own CSS sets a 76 px white title on a background photo; the
   photos are regenerated, and these rules keep the title readable and the
   intro box inside the viewport on every page, including the two whose 2023
   captures had lost their page CSS. */
html body #page-container #et-main-area .belief-hero { position: relative; padding: 201px 0 211px !important; background-size: cover !important; background-position: center !important; margin-bottom: 0 !important; }
html body #page-container #et-main-area .belief-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 30, 20, .35), rgba(20, 30, 20, .45)); }
html body #page-container #et-main-area .belief-hero .et_pb_row { position: relative; z-index: 1; }
html body #page-container #et-main-area .belief-hero h1 { font-family: Lato, sans-serif; font-weight: bold; font-size: 76px; line-height: 105%; color: #fefefe !important; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
html body #page-container #et-main-area .belief-hero span { color: #fefefe; }
html body #page-container #et-main-area .belief-intro::before, html body #page-container #et-main-area .belief-intro::after { display: none !important; }
html body #page-container #et-main-area .belief-intro .et_pb_row { border-radius: 10px !important; max-width: 1080px !important; box-sizing: border-box; padding: 40px 60px 51px !important; }
@media (max-width: 980px) {
  html body #page-container #et-main-area .belief-hero { padding: 110px 0 120px !important; }
  html body #page-container #et-main-area .belief-hero h1 { font-size: 40px !important; }
  html body #page-container #et-main-area .belief-intro .et_pb_row { margin-top: -40px !important; padding: 28px 22px 32px !important; }
}

/* ── Home: "Join the LIST" panel over the illustration ──────────────────────
   The form column was a hard white rectangle cut into the drawing. */
html body #page-container #et-main-area div#home-page-6 .et_pb_column { background: rgba(255,255,255,.92) !important; border-radius: 16px; box-shadow: 0 2px 24px rgba(0,0,0,.12); padding: 44px 72px 52px !important; }
@media (max-width: 980px) { html body #page-container #et-main-area div#home-page-6 .et_pb_column { padding: 28px 22px 32px !important; } }

/* ── Breadcrumb on the post templates: the theme hid every link ("/ / Title") ── */
html body #page-container #et-main-area #main-content.tpo .breadcrumb > span a { display: inline !important; }

/* ── Portfolio hero: the same overlay as the belief heroes keeps the title readable ── */
html body #page-container #et-main-area div#portfolio-01 { position: relative; }
html body #page-container #et-main-area div#portfolio-01::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 30, 20, .35), rgba(20, 30, 20, .45)); }
html body #page-container #et-main-area div#portfolio-01 .et_pb_row { position: relative; z-index: 1; }
html body #page-container #et-main-area div#portfolio-01 h1, html body #page-container #et-main-area div#portfolio-01 h1 span { color: #fefefe !important; text-shadow: 0 2px 12px rgba(0,0,0,.35); }

/* ── Portfolio cards: the arrow is a 40 px mark, the card image keeps its 410x300 box ── */
html body #page-container #et-main-area div#single-portfolio a { line-height: 0; }

/* ── Decorative pseudo-elements the theme hangs 500 px past the right edge (team, process stages): clip at every width ── */
html body #page-container { overflow-x: clip; }

/* ── Phone menu on every page: the two 2021 belief captures load no theme bundle, so the
   hamburger glyph and the dropdown rules come from here as well ── */
@media (max-width: 980px) {
  html body #main-header #et_mobile_nav_menu { display: block; float: right; margin-top: 6px; }
  html body #main-header .mobile_menu_bar { display: block; position: relative; line-height: 0; width: auto; }
  html body #main-header .mobile_menu_bar::before { content: "\61"; position: relative; top: 0; left: 0; font-family: ETmodules; font-weight: 400; font-size: 32px; line-height: 1; cursor: pointer; color: #fff; -webkit-font-smoothing: antialiased; }
  html body #main-header .et_mobile_menu { position: absolute; left: 0; top: 100%; width: 100%; box-sizing: border-box; padding: 5%; margin: 0; background: #fff; border-top: 3px solid #4d985b; z-index: 9999; visibility: visible; opacity: 1; }
  html body #main-header .et_mobile_menu li { list-style: none; }
  html body #main-header .et_mobile_menu li a { display: block; padding: 10px 5%; color: #333; font-size: 16px; border-bottom: 1px solid rgba(0,0,0,.1); }
  html body #main-header #top-menu, html body #main-header .et-cart-info, html body #main-header #et_top_search { display: none; }
}

/* ── Phone: belief overview hero shows the cattle, not 550 px of sky; the Invest hands icon stays off the text ── */
@media (max-width: 980px) {
  html body #page-container #et-main-area div#beliefs-01 { background-position: center 72% !important; }
  html body #page-container #et-main-area div#beliefs-01 .et_pb_row .et_pb_text_inner { padding-top: 120px !important; padding-bottom: 100px !important; }
  html body #page-container #et-main-area div#invest-05::before { display: none !important; }
}

/* ── Phone: belief cards, carousel intro, footer position ──
   The theme swaps the nine belief cards for a mobile copy wrapped in a code module that never
   renders (its inner section carries the id the phone rule hides); the desktop section stacks fine.
   "Our Latest Thinking" lays heading and intro side by side in a flex row; stacked on phones.
   The theme pulls the footer 141 px up over whatever ends the page; on phones that covers the
   newsletter button and the belief intro. */
@media (max-width: 980px) {
  html body #page-container #et-main-area div#beliefs-04 { display: none !important; }
  html body #page-container #et-main-area div#beliefs-03 { display: block !important; }
  html body #page-container #et-main-area div#home-page-5 .et_pb_text .et_pb_text_inner { display: block !important; }
  html body #page-container #et-main-area div#home-page-5 .et_pb_text .et_pb_text_inner h2, html body #page-container #et-main-area div#home-page-5 .et_pb_text .et_pb_text_inner p { width: auto !important; max-width: none !important; margin: 0 0 16px !important; text-align: left !important; }
  html body #main-footer { margin-top: 0 !important; }
}

/* ── Header between 981 and 1199 px (ruling 15 Oct 2026): one row, Consultation button visible.
   The theme keeps the navigation at its 956 px content width there (menu 696 + button), which no
   longer fits beside the 192 px logo and adds 15 px of menu padding; tighter type and spacing fit. */
@media (min-width: 981px) and (max-width: 1199px) {
  html body #main-header #top-menu { padding: 0 !important; }
  html body #main-header #top-menu > li:not(:last-child) { padding-right: 22px !important; }
  html body #main-header #top-menu a { font-size: 17px !important; }
  html body #main-header .consu { margin-left: 22px !important; }
  html body #main-header a.cons { font-size: 17px !important; line-height: 26px !important; padding: 7px 14px !important; }
}

/* ── Header: deterministic. Divi pinned the header from a window-load handler that jQuery 3.7 registers too
   late on fast loads, so it engaged at random and the content jumped by the header height when it did.
   The build sets et_non_fixed_nav on <body>, and the header sticks by CSS alone, in flow, at every width. ── */
html body #main-header { position: sticky !important; top: 0; z-index: 99999; }
html body #main-header.et-fixed-header { position: sticky !important; }

/* ── Print: the theme hides its phone copies of a few sections with "only screen" queries; in print both
   copies would appear. ── */
@media print {
  html body div#beliefs-04, html body div#cs02.et_pb_section_3, html body div#cs02.et_pb_section_6, html body div#cs02.et_pb_section_8 { display: none !important; }
}