/* =========================================================================
   mesamis.at 2026 — Core Stylesheet
   Built from Figma "mesamis Website 2026" (exact tokens).
   Sections: Fonts · Tokens · Base · Grid/Modules · Typography (.oh-typo)
             Arrow · Buttons · Lottie · Header/Nav · Mobile menu · Footer
             Cookie consent · Helpers · Responsive
   ========================================================================= */

/* ----------------------------------------------------------------- Fonts */
@font-face{font-family:"Borna";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/borna-regular-webfont.woff2") format("woff2"),
      url("../fonts/borna-regular-webfont.woff") format("woff");}
@font-face{font-family:"Borna";font-weight:400;font-style:italic;font-display:swap;
  src:url("../fonts/borna-regularitalic-webfont.woff2") format("woff2"),
      url("../fonts/borna-regularitalic-webfont.woff") format("woff");}
@font-face{font-family:"Borna";font-weight:500;font-style:normal;font-display:swap;
  src:url("../fonts/borna-medium-webfont.woff2") format("woff2"),
      url("../fonts/borna-medium-webfont.woff") format("woff");}
@font-face{font-family:"Borna";font-weight:500;font-style:italic;font-display:swap;
  src:url("../fonts/borna-mediumitalic-webfont.woff2") format("woff2"),
      url("../fonts/borna-mediumitalic-webfont.woff") format("woff");}
@font-face{font-family:"Borna";font-weight:600;font-style:normal;font-display:swap;
  src:url("../fonts/borna-semibold-webfont.woff2") format("woff2"),
      url("../fonts/borna-semibold-webfont.woff") format("woff");}
@font-face{font-family:"Borna";font-weight:600;font-style:italic;font-display:swap;
  src:url("../fonts/borna-semibolditalic-webfont.woff2") format("woff2"),
      url("../fonts/borna-semibolditalic-webfont.woff") format("woff");}
@font-face{font-family:"Borna";font-weight:700;font-style:normal;font-display:swap;
  src:url("../fonts/borna-bold-webfont.woff2") format("woff2"),
      url("../fonts/borna-bold-webfont.woff") format("woff");}
@font-face{font-family:"Borna";font-weight:700;font-style:italic;font-display:swap;
  src:url("../fonts/borna-bolditalic-webfont.woff2") format("woff2"),
      url("../fonts/borna-bolditalic-webfont.woff") format("woff");}

/* ---------------------------------------------------------------- Tokens */
:root{
  --dark:#003C46;     /* primary teal: headings, body, footer/menu bg     */
  --dark-2:#004D52;   /* secondary teal: hover, accents, inactive lang    */
  --green:#51DAA7;    /* mint: section bg, buttons, active state, accent  */
  --light:#F5F5F5;    /* light grey bg                                    */
  --white:#FFFFFF;

  --font:"Borna",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --maxw:1440px;      /* content grid width  */
  --gutter:20px;      /* column gutter       */
  --pad-x:24px;       /* inner side padding  */
  --header-h:80px;

  /* vertical section padding scale */
  --pt-zero:0px;   --pt-small:40px;  --pt-default:100px;  --pt-big:160px;
}

/* ------------------------------------------------------------------ Base */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);}
body{margin:0;font-family:var(--font);font-weight:500;color:var(--dark);
  background:var(--white);line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--green);color:var(--dark);}

/* Focus visibility (a11y) */
:focus{outline:none;}
:focus-visible{outline:3px solid var(--dark-2);outline-offset:3px;border-radius:2px;}
.bg-dark :focus-visible,.oh-menu :focus-visible{outline-color:var(--green);}

/* Skip link: first in tab order (a11y), hidden until focused. On focus it appears as a
   pill just to the RIGHT of the logo, before the nav — so it no longer covers the logo. */
.skip-link{position:fixed;left:-9999px;top:16px;z-index:2000;background:var(--dark);
  color:#fff;padding:12px 22px;border-radius:100px;box-shadow:0 6px 18px rgba(0,0,0,.28);}
.skip-link:focus{left:calc(var(--pad-x) + 140px);}

/* ---------------------------------------------------- Layout wrap & grid */
/* full-bleed background lives on the module; .oh-wrap centers the 1440 grid */
.module{width:100%;}
.oh-wrap{width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad-x);}

/* row = flex; widths via calc on a --w variable (12-col, 20px gutter) */
.row{display:flex;gap:var(--gutter);align-items:center;}
/* width comes from --w (set by the *-width-N helpers). Use a calc fallback of 12
   instead of declaring --w:12 here — a `.row>.cell` declaration would out-specify
   the `.two-width-N` helpers (.row>.cell = 2 classes vs .two-width-7 = 1) and pin
   every cell to full width → all columns collapse to equal flex thirds. */
.row>.cell,.row>.space{
  --unit:calc((100% - 11*var(--gutter)) / 12);
  width:calc(var(--w, 12)*var(--unit) + (var(--w, 12) - 1)*var(--gutter));
  flex:0 0 auto;min-width:0;box-sizing:border-box;}
.row.one{justify-content:center;}
.row .space{align-self:stretch;pointer-events:none;}

/* per-column vertical alignment */
.cell.valign-top{align-self:flex-start;}
.cell.valign-bottom{align-self:flex-end;}
.cell.valign-center{align-self:center;}

/* width helpers 1..12 (apply to .cell / .space) */
.one-width-1,.two-width-1,.three-width-1,.four-width-1,.two-space-1{--w:1;}
.one-width-2,.two-width-2,.three-width-2,.four-width-2,.two-space-2{--w:2;}
.one-width-3,.two-width-3,.three-width-3,.four-width-3,.two-space-3{--w:3;}
.one-width-4,.two-width-4,.three-width-4,.four-width-4,.two-space-4{--w:4;}
.one-width-5,.two-width-5,.three-width-5,.four-width-5,.two-space-5{--w:5;}
.one-width-6,.two-width-6,.three-width-6,.four-width-6,.two-space-6{--w:6;}
.one-width-7,.two-width-7,.three-width-7,.four-width-7{--w:7;}
.one-width-8,.two-width-8,.three-width-8{--w:8;}
.one-width-9,.two-width-9,.three-width-9{--w:9;}
.one-width-10,.two-width-10{--w:10;}
.one-width-11,.two-width-11{--w:11;}
.one-width-12,.two-width-12{--w:12;}

/* backgrounds */
.bg-white{background:var(--white);}
.bg-green{background:var(--green);}
.bg-dark{background:var(--dark);}
.bg-light{background:var(--light);}

/* vertical padding scale (per module) */
.pt-zero{padding-top:var(--pt-zero);}    .pb-zero{padding-bottom:var(--pt-zero);}
.pt-small{padding-top:var(--pt-small);}  .pb-small{padding-bottom:var(--pt-small);}
.pt-default{padding-top:var(--pt-default);}.pb-default{padding-bottom:var(--pt-default);}
.pt-big{padding-top:var(--pt-big);}      .pb-big{padding-bottom:var(--pt-big);}
/* modules with no explicit padding class get the default rhythm */
.module:not([class*="pt-"]){padding-top:var(--pt-default);}
.module:not([class*="pb-"]){padding-bottom:var(--pt-default);}
.module.full-bleed-img{padding:0;}
/* full-bleed media renders directly in the module (no .oh-wrap) → 100% viewport width */
.full-bleed-img img,.full-bleed-img video,.full-bleed-img .full-bleed-media,
.full-bleed-img picture>img{display:block;width:100%;height:auto;}

/* media inside cells fill width nicely, square crops where needed */
.cell>img,.cell>video,.cell>picture>img{width:100%;}
.cell-media-square img,.cell-media-square video{aspect-ratio:1/1;object-fit:cover;}
.cell-media-wide img{aspect-ratio:16/9;object-fit:cover;width:100%;}
.cell-media-portrait img{aspect-ratio:72/104;object-fit:cover;width:100%;}

/* Unequal-height columns (e.g. a photo beside long copy): text columns keep ≥24px vertical
   breathing room so the copy never touches the neighbouring section — even when the module is
   pt-zero/pb-zero. An UNSHAPED photo stretches to the taller (text) column and covers it, so the
   image reaches the section's vertical edges (the module's pt-/pb- padding is still respected).
   Desktop only: below 861px the columns stack and the photo already goes full-width. */
.row>.cell.oh-typo:not(.cell-photo):not(.multi-cell){padding-block:24px;}
@media (min-width:861px){
  .row>.cell.cell-photo:not([class*="cell-media-"]){align-self:stretch;}
  .row>.cell.cell-photo:not([class*="cell-media-"])>img,
  .row>.cell.cell-photo:not([class*="cell-media-"])>video{width:100%;height:100%;object-fit:cover;}
}

/* wider column gaps — opt-in checkbox (e.g. the "My offer" workshop columns).
   Raising --gutter widens the gaps AND keeps the 12-col math intact; clamped so
   the columns never collapse below the row-stacking breakpoint. */
.row.gap-wide{--gutter:clamp(32px,5vw,96px);}

/* "narrow" — opt-in inner side padding on a single cell (type `narrow` into the cell's
   "Extra CSS class(es)" field). Gives an animation more air (and shrinks it a touch) or a
   text column more breathing room, WITHOUT changing the cell's grid width. The existing
   24px vertical padding on text/lottie cells is kept; this only adds left/right air. */
.cell.narrow{padding-inline:clamp(24px,7%,90px);}

/* "Multi" layout: flex-wrap, centred cards capped at --cell-max (e.g. podcast cards,
   Figma 76:298 — four 200px cards, centred). Width comes from the inline --cell-max. */
.row.multi{flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(24px,4vw,80px);}
.row.multi>.cell.multi-cell{width:auto;flex:0 1 var(--cell-max,200px);
  max-width:var(--cell-max,200px);min-width:0;}
/* Multi cards built from a Rich-text column: the "icon" field becomes the full-width
   square cover (e.g. podcast art); title (h3) + author (p) sit below it. This only
   applies inside .row.multi — the small .icon-lead teasers elsewhere are untouched. */
.row.multi .cell .icon-lead{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:10px;margin:0 0 14px;}
.row.multi .cell .pc-title,.row.multi .cell h3,.row.multi .cell h4{
  font-weight:600;font-size:18px;line-height:1.3;margin:0 0 4px;}
.row.multi .cell .pc-by,.row.multi .cell p{
  font-weight:500;font-size:15px;line-height:1.4;color:var(--dark-2);margin:0;}

/* Whole-column link (e.g. a podcast card linking to its episode): a stretched, invisible
   overlay link makes the entire cell — cover + title + author — clickable. The hover only
   targets cells that ACTUALLY contain a .cell-link anchor (via :has) — so unlinked cells get
   NO hover. The card lifts and the cover gains a shadow on hover/focus (any background). */
.cell:has(> .cell-link){position:relative;transition:transform .2s ease;}
.cell:has(> .cell-link) .icon-lead,.cell:has(> .cell-link) > img{transition:box-shadow .25s ease;}
.cell-link{position:absolute;inset:0;z-index:2;border-radius:inherit;}
.cell:has(> .cell-link):hover,.cell:has(> .cell-link):focus-within{transform:translateY(-5px);}
.cell:has(> .cell-link):hover .icon-lead,.cell:has(> .cell-link):focus-within .icon-lead,
.cell:has(> .cell-link):hover > img,.cell:has(> .cell-link):focus-within > img{
  box-shadow:0 14px 30px rgba(0,0,0,.22);}
/* keep any real links inside the rich text clickable above the overlay */
.cell:has(> .cell-link) .oh-typo a:not(.cell-link){position:relative;z-index:3;}

/* ----------------------------------------------- Typography (.oh-typo) */
.oh-typo h1,.oh-typo h2{margin:0 0 .3em;}
.oh-typo h4,.oh-typo h5,.oh-typo h6{margin:0 0 .6em;}
.oh-typo p,.oh-typo ul,.oh-typo ol{margin:0 0 1.15em;}   /* ~20px under paragraphs */
.oh-typo>*:last-child{margin-bottom:0;}

.oh-typo h1{font-weight:600;color:var(--dark);line-height:1.02;letter-spacing:-.5px;
  font-size:clamp(40px,5.4vw,80px);}
.oh-typo h2{font-weight:600;color:var(--dark);line-height:1.05;letter-spacing:-.3px;
  font-size:clamp(30px,3.4vw,45px);}
.oh-typo h3{font-weight:600;color:var(--dark);line-height:1.25;margin:0 0 .3em;
  font-size:clamp(24px,2.1vw,30px);}   /* Figma 47:27 — tight title→body spacing */
.oh-typo h4{font-weight:600;color:var(--dark);line-height:1.3;
  font-size:clamp(19px,1.4vw,22px);}
.oh-typo h5{font-weight:600;color:var(--dark-2);line-height:1.3;font-size:16px;
  letter-spacing:.04em;text-transform:uppercase;}
.oh-typo h6{font-weight:600;color:var(--dark-2);line-height:1.3;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;}

.oh-typo p,.oh-typo ul,.oh-typo ol{font-weight:500;color:var(--dark);line-height:1.55;
  font-size:clamp(16px,1.05vw,18px);}
.oh-typo p.large{font-size:clamp(18px,1.3vw,21px);}
.oh-typo p.small{font-size:15px;}
.oh-typo ul,.oh-typo ol{padding-left:1.4em;}
.oh-typo li{margin-bottom:.35em;}
.oh-typo b,.oh-typo strong{font-weight:600;}
.oh-typo i,.oh-typo em{font-style:italic;}
.oh-typo a:not(.button):not(.button-green):not(.button-outline){
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--green);transition:color .25s;}
.oh-typo a:not(.button):not(.button-green):not(.button-outline):hover{color:var(--dark-2);}
.oh-typo blockquote{margin:0;padding-left:24px;border-left:5px solid var(--green);
  color:var(--dark-2);}
.oh-typo table{border-collapse:collapse;width:100%;}
.oh-typo td,.oh-typo th{padding:8px 12px;border-bottom:1px solid rgba(0,60,70,.15);
  text-align:left;}

/* very large centred display quote (78–80px in Figma) */
.oh-typo .display,.oh-typo h1.display{font-size:clamp(34px,5.2vw,78px);line-height:1.08;}

/* colour overrides (single utility classes on tags) */
.color-green{color:var(--green)!important;}
.color-dark{color:var(--dark)!important;}
.color-dark2,.color-dark-2{color:var(--dark-2)!important;}
.color-white{color:var(--white)!important;}
.color-light{color:var(--light)!important;}

/* alignment helpers */
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}

/* inverse context (light type on dark bg) */
.oh-typo-invers,.bg-dark .oh-typo{}
.oh-typo-invers h1,.oh-typo-invers h2,.oh-typo-invers h3,.oh-typo-invers h4,
.oh-typo-invers p,.oh-typo-invers ul,.oh-typo-invers ol,.oh-typo-invers li,
.bg-dark .oh-typo h1,.bg-dark .oh-typo h2,.bg-dark .oh-typo h3,.bg-dark .oh-typo h4,
.bg-dark .oh-typo p,.bg-dark .oh-typo ul,.bg-dark .oh-typo ol,.bg-dark .oh-typo li{
  color:var(--white);}
.oh-typo-invers h5,.oh-typo-invers h6,.bg-dark .oh-typo h5,.bg-dark .oh-typo h6{
  color:var(--green);}

/* ----------------------------------------------------- Arrow heading icon */
.oh-arrow{display:inline-block;width:.74em;height:.74em;vertical-align:baseline;
  margin-right:.18em;flex:none;color:currentColor;position:relative;top:.02em;}
.oh-arrow svg{width:100%;height:100%;display:block;fill:none;
  stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* --------------------------------------------------------------- Buttons */
.oh-typo .button,.oh-typo .button-green,.oh-typo .button-outline,
a.button,a.button-green,a.button-outline,button.button,button.button-green{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-family:var(--font);font-weight:600;font-size:18px;line-height:1.2;
  color:var(--dark);text-decoration:none;cursor:pointer;
  padding:16px 60px;border-radius:100px;border:0;
  background:var(--white);box-shadow:0 7px 0 0 var(--dark);
  transition:transform .15s ease,box-shadow .15s ease,background .2s ease;}
.oh-typo .button-green,a.button-green,button.button-green{background:var(--green);}
.oh-typo .button-outline,a.button-outline{background:transparent;box-shadow:none;
  border:2px solid var(--dark);padding:14px 58px;}
.oh-typo .button:hover,.oh-typo .button-green:hover,
a.button:hover,a.button-green:hover,button.button:hover,button.button-green:hover{
  transform:translateY(4px);box-shadow:0 3px 0 0 var(--dark);}
.oh-typo .button:active,a.button:active,button.button:active{
  transform:translateY(7px);box-shadow:0 0 0 0 var(--dark);}
.oh-typo .button-outline:hover,a.button-outline:hover{background:var(--dark);
  color:var(--white);transform:none;box-shadow:none;}
.button-row{display:flex;flex-wrap:wrap;gap:16px;}
.button-row.center{justify-content:center;}

/* ---------------------------------------------------------------- Lottie */
/* All mesamis hero animations are square (1040²). Force the box square and make
   the lottie-injected <svg> / fallback fill it — lottie-web otherwise sizes the
   svg to the container at init and can leave it tiny. */
.oh-lottie{position:relative;width:100%;aspect-ratio:1/1;}
.oh-lottie .oh-lottie-anim{position:absolute;inset:0;width:100%;height:100%;}
.oh-lottie .oh-lottie-anim svg{width:100%!important;height:100%!important;}
.oh-lottie .oh-lottie-fallback{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:none;}
.oh-lottie.is-reduced .oh-lottie-anim{display:none;}
.oh-lottie.is-reduced .oh-lottie-fallback{display:block;}
.oh-lottie.square,.oh-lottie.square .oh-lottie-anim{aspect-ratio:1/1;}

/* ---------------------------------------------------------- Header / nav */
.oh-header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--header-h);
  background:var(--white);box-shadow:0 4px 4px 0 rgba(0,0,0,.25);
  transition:transform .3s ease;}
body{padding-top:var(--header-h);}            /* offset for fixed header */
.oh-header-inner{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.oh-logo{display:flex;align-items:center;}
.oh-logo img{height:22px;width:auto;}
.oh-logo .logo-white{display:none;}

.oh-nav{display:flex;align-items:center;margin-left:auto;}  /* group nav+lang hard right (Figma) */
.oh-nav>ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:32px;}
.oh-nav a{position:relative;font-weight:500;font-size:18px;color:var(--dark);
  padding:6px 1px;transition:color .3s ease;}   /* match the underline's .3s */
/* underline that draws in from the left on hover / for the active page */
.oh-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left center;
  transition:transform .3s ease;}
.oh-nav a:hover{color:var(--green);}   /* hover: text turns green too, in sync with the underline */
.oh-nav a:hover::after{transform:scaleX(1);}
/* Only the *current* page lights up — NOT every page in the rootline. The "Home"
   item is a shortcut to the root (uid 1), which lives in every page's rootline, so
   `li.active` would wrongly green it on every subpage. Home is lit via .page-home. */
.oh-nav a[aria-current="page"]{color:var(--green);}
.oh-nav a[aria-current="page"]::after{transform:scaleX(1);}
/* home page: the first nav item ("Home") only links to the root, so the menu
   never marks it current — body.page-home (set in TypoScript) lights it up. */
.page-home .oh-nav li:first-child>a,
.page-home .oh-menu-nav li:first-child>a{color:var(--green);}
.page-home .oh-nav li:first-child>a::after{transform:scaleX(1);}

/* language switch — two stacked boxes (DE over EN), active one filled green */
.oh-lang{display:flex;flex-direction:column;margin-left:10px;flex:none;}
.oh-lang a,.oh-lang .lang-disabled{display:flex;align-items:center;justify-content:center;
  width:36px;height:28px;font-weight:500;font-size:18px;line-height:1;box-sizing:border-box;
  color:var(--dark-2);border:1px solid var(--dark-2);transition:background .2s,color .2s;}
/* Collapse the shared edge to 1px: the second box drops its top border. Must beat the
   `.oh-lang a` border shorthand (0,1,1) — `.oh-lang>*+*` (0,1,0) lost, so the edge was 2px. */
.oh-lang a+a,.oh-lang a+.lang-disabled,
.oh-lang .lang-disabled+a,.oh-lang .lang-disabled+.lang-disabled{border-top:0;}
.oh-lang a:hover{background:rgba(81,218,167,.25);}
.oh-lang a[aria-current="true"],.oh-lang a.active{background:var(--green);color:var(--dark-2);}
.oh-lang .lang-disabled{opacity:.45;cursor:default;}   /* language not yet translated */
.oh-lang .sep{display:none;}

/* burger */
.oh-burger{display:none;width:40px;height:40px;border:0;background:transparent;
  padding:8px;cursor:pointer;}
.oh-burger span{display:block;height:2px;background:var(--dark);border-radius:2px;
  margin:5px 0;transition:transform .25s,opacity .25s;}

/* --------------------------------------------------------- Mobile menu */
.oh-menu{position:fixed;inset:0;z-index:1100;background:var(--dark);color:var(--white);
  display:flex;flex-direction:column;padding:24px var(--pad-x) 40px;
  transform:translateX(100%);transition:transform .35s ease;
  visibility:hidden;overflow-y:auto;}
.oh-menu.is-open{transform:none;visibility:visible;}
.oh-menu-top{display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);flex:none;}
.oh-menu-top .oh-logo img{height:24px;}
.oh-menu-close{width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  color:var(--white);}
.oh-menu-close svg{width:28px;height:28px;stroke:currentColor;stroke-width:2.4;}
.oh-menu-nav{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-direction:column;gap:20px;}
.oh-menu-nav a{font-weight:600;font-size:30px;line-height:1.27;color:var(--white);
  display:inline-block;border-bottom:3px solid transparent;}   /* Figma: 30px / lh38 */
.oh-menu-nav a[aria-current="page"]{
  color:var(--green);border-bottom-color:var(--green);}
.oh-menu-lang{margin-top:48px;display:flex;align-items:center;gap:12px;
  font-weight:600;font-size:30px;color:var(--white);}   /* Figma: 30px */
.oh-menu-lang a{color:var(--white);border-bottom:3px solid transparent;}
.oh-menu-lang a[aria-current="true"],.oh-menu-lang a.active{
  color:var(--green);border-bottom-color:var(--green);}
.oh-menu-legal{margin-top:auto;padding-top:40px;display:flex;flex-direction:column;gap:12px;}
.oh-menu-legal a{font-weight:600;font-size:18px;color:var(--white);}
.oh-menu-legal a:hover{color:var(--green);}

/* --------------------------------------------------------------- Footer */
.oh-footer{background:var(--dark);color:var(--white);}
.oh-footer .footer-top{height:5px;background:var(--green);}
/* No sitemap in the footer (Figma): brand · contact · legal, then a full-width © bar. */
.oh-footer-inner{max-width:var(--maxw);margin-inline:auto;padding:72px var(--pad-x);
  display:grid;grid-template-columns:1.4fr 1.2fr 1fr 1fr;gap:32px;align-items:start;}
/* brand column stretches so © can bottom-align in it on desktop (as before the rebuild) */
.oh-footer .footer-brand{display:flex;flex-direction:column;align-self:stretch;}
.oh-footer .footer-logo img{height:20px;width:auto;}
.oh-footer h4{font-weight:600;font-size:16px;margin:0 0 14px;color:var(--green);
  text-transform:uppercase;letter-spacing:.05em;}
.oh-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.oh-footer a,.oh-footer .oh-typo a{font-weight:500;font-size:16px;color:var(--white);
  text-decoration:none;}
/* beat the prose-underline rule (.oh-typo a:not(...)) which out-specifies the line above */
.oh-footer .oh-typo a:not(.button):not(.button-green):not(.button-outline){text-decoration:none;}
.oh-footer a:hover,.oh-footer .oh-typo a:hover{color:var(--green);}
.oh-footer .footer-contact p{margin:0 0 8px;font-size:16px;}
/* full-width copyright bar at the very bottom (Figma 51:17) */
/* desktop: © sits bottom-aligned inside the brand column. The full-width bar is mobile-only. */
.oh-footer .footer-brand .footer-copy{margin-top:auto;padding-top:28px;font-size:16px;color:rgba(255,255,255,.85);}
.oh-footer .footer-bottom{display:none;border-top:1px solid rgba(255,255,255,.16);}
.oh-footer .footer-bottom-inner{max-width:var(--maxw);margin-inline:auto;padding:22px var(--pad-x);}
.oh-footer .footer-bottom .footer-copy{margin:0;font-size:16px;color:rgba(255,255,255,.85);}

/* -------------------------------------------------------- Cookie consent */
.oh-cookie{position:fixed;left:0;right:0;bottom:0;z-index:1300;
  display:flex;justify-content:center;padding:20px;
  transform:translateY(120%);transition:transform .4s ease;}
.oh-cookie.is-visible{transform:none;}
.oh-cookie-box{max-width:920px;width:100%;background:var(--dark);color:var(--white);
  border:3px solid var(--green);border-radius:18px;padding:24px 28px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  box-shadow:0 12px 40px rgba(0,0,0,.25);}
.oh-cookie-box .cc-text{flex:1 1 320px;}
.oh-cookie-box .cc-text h3{margin:0 0 6px;font-size:20px;font-weight:600;color:var(--white);}
.oh-cookie-box .cc-text p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.9);}
.oh-cookie-box .cc-text a{color:var(--green);text-decoration:underline;}
.oh-cookie-box .cc-actions{display:flex;gap:14px;flex:none;}
.oh-cookie-box .cc-btn{font-weight:600;font-size:16px;border-radius:100px;cursor:pointer;
  padding:12px 26px;border:2px solid var(--green);transition:transform .15s,box-shadow .15s,background .2s;}
/* deeper-green shadow so the "raised" offset reads on the dark banner */
.cc-btn.cc-accept{background:var(--green);color:var(--dark);box-shadow:3px 4px 0 0 #2a9d76;}
.cc-btn.cc-decline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55);}
.cc-btn.cc-accept:hover{transform:translate(2px,3px);box-shadow:1px 1px 0 0 #2a9d76;}
.cc-btn.cc-decline:hover{background:rgba(255,255,255,.1);}

/* ------------------------------------------------------------- Helpers */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;
  padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.no-scroll{overflow:hidden;}
.section-head{text-align:center;margin-bottom:48px;}
/* teaser line-art icons (Figma ≈110–122px tall, dark-teal on green) */
.icon-lead{height:clamp(88px,9vw,115px);width:auto;margin:0 auto 22px;display:block;}
.icon-lead.icon-lg{height:clamp(120px,15vw,180px);margin-bottom:30px;}
.teaser{text-align:center;max-width:420px;margin-inline:auto;}
.teaser h3{margin-bottom:.3em;}
.teaser .button,.teaser .button-green{margin-top:18px;}

/* intro split: extra left gap before the text column (Figma ≈120px) */
.intro-copy{padding-left:clamp(0px,6vw,120px);}

/* large centred display quote */
.oh-typo .quote{max-width:1280px;margin-inline:auto;}
.oh-typo .quote .quote-by{display:block;font-size:clamp(22px,2.4vw,30px);
  line-height:1.2;margin-top:clamp(32px,4.5vw,64px);}   /* Figma: a full blank line above the author */

/* timeline (About) */
.oh-timeline{list-style:none;margin:0;padding:0;}
.oh-timeline li{margin-bottom:22px;}
.oh-timeline .yr{display:block;font-weight:600;font-size:18px;color:var(--dark);}
.oh-timeline .ev{display:block;font-weight:500;font-size:16px;color:var(--dark-2);line-height:1.45;}

/* podcast card */
.podcast{text-align:left;}
.podcast img{border-radius:10px;margin-bottom:16px;aspect-ratio:1/1;object-fit:cover;}
.podcast .pc-title{font-weight:600;font-size:18px;color:var(--dark);margin:0 0 4px;}
.podcast .pc-by{font-weight:500;font-size:15px;color:var(--dark-2);margin:0;}
.bg-green .podcast .pc-title{color:var(--dark);}

/* address pills (contact) */
.pill-row{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:24px;}

/* speech bubble (contact "Nice to meet you!") */
.oh-typo .speech-bubble{display:inline-block;position:relative;background:var(--white);
  color:var(--dark);font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.15;
  padding:20px 30px;border-radius:18px;margin:0 auto 40px;}
.oh-typo .speech-bubble::after{content:"";position:absolute;left:50%;bottom:-14px;
  transform:translateX(-50%);border:14px solid transparent;border-top-color:var(--white);
  border-bottom:0;}

/* ---------------------------------------------------------- Responsive */
@media (max-width:1100px){
  .oh-nav>ul{gap:24px;}
  .oh-nav a,.oh-lang{font-size:16px;}
}

/* iPad / sub-grid widths: below the 1440 grid the content would sit only --pad-x (24px)
   from the screen edge, so two-column text crowds the right edge (Georg @ ~1050px). Widen
   the side padding in this middle zone only — the full desktop grid (≥1341px) is untouched,
   and the columns still stack normally below 861px. */
@media (min-width:861px) and (max-width:1340px){
  :root{--pad-x:clamp(28px,4.4vw,52px);}
}

/* tablet/mobile: hamburger + collapse columns */
@media (max-width:980px){
  :root{--pt-default:72px;--pt-big:110px;--pt-small:32px;}
  .oh-nav,.oh-header .oh-lang{display:none;}
  .oh-burger{display:block;}
  .oh-footer-inner{grid-template-columns:1fr 1fr;gap:28px 24px;}
}

@media (max-width:860px){
  /* multi-column modules become single column (media first → text) */
  .row{flex-direction:column;align-items:stretch;gap:32px;}
  .row>.cell{--w:12!important;width:100%!important;}
  .row>.space{display:none;}
  .row.one{align-items:center;}
  /* photos break out of the .oh-wrap side padding → edge-to-edge on mobile (Figma 51:17) */
  .row>.cell.cell-photo{margin-inline:calc(-1*var(--pad-x));
    width:calc(100% + 2*var(--pad-x))!important;max-width:none;}
  .row>.cell.cell-photo>img,.row>.cell.cell-photo>video,
  .row>.cell.cell-photo>picture>img{width:100%;border-radius:0;}
  /* "Multi" stays a centred, wrapping row of cards (don't force a full-width column) */
  .row.multi{flex-direction:row;flex-wrap:wrap;justify-content:center;}
  .row.multi>.cell.multi-cell{width:auto!important;max-width:var(--cell-max,200px)!important;}
  .cell-media-square img,.cell-media-square video{aspect-ratio:1/1;}
  .intro-copy{padding-left:0;}
  .cell.narrow{padding-inline:0;}   /* stacked = full width: the narrow indent is not needed on mobile */
  .section-head{margin-bottom:32px;}
  /* Stacked text in a zero-bottom module (e.g. Home "Valyou"/"Hello", HCD "Cocreate")
     gets rhythm below it on mobile, so the copy never butts against the next section or
     the footer. Desktop keeps the author's pb-zero; this is the last (text) column only. */
  .module.pb-zero .row>.cell.oh-typo:not(.cell-photo):not(.multi-cell):last-child{
    padding-bottom:calc(var(--pt-default) * 1.5);}   /* Valyou/Hello/Cocreate: +50% breathing on mobile */
  /* Left-align a centred headline on mobile only. Type `head-left-mobile` into the
     section's "Section CSS class" field (My offer, Legal. Of course!). Beats the
     .section-head / .text-center centring via higher specificity — no !important. */
  .module.head-left-mobile .section-head,
  .module.head-left-mobile .section-head .text-center,
  .cell.head-left-mobile,.cell.head-left-mobile .text-center{text-align:left;}
}

@media (max-width:600px){
  :root{--pad-x:16px;--pt-default:56px;--pt-big:84px;}   /* Figma mobile side padding = 16 */
  .oh-footer-inner{grid-template-columns:1fr;text-align:center;justify-items:center;padding:56px 20px;}
  .oh-footer .footer-nav{display:none;}                  /* smartphone: no sitemap (Figma 51:17) */
  .oh-footer .footer-brand .footer-copy{display:none;}   /* © moves to the bottom bar instead */
  .oh-footer .footer-bottom{display:block;}
  .oh-footer .footer-bottom-inner{text-align:center;padding:20px;}
  .oh-footer ul{align-items:center;}
  .pill-row{align-items:center;}
  .oh-cookie-box{flex-direction:column;align-items:stretch;text-align:left;}
  .oh-cookie-box .cc-actions{justify-content:stretch;}
  .oh-cookie-box .cc-btn{flex:1;}
  /* Buttons size to their content on mobile (not full-width); they still stack. */
  .button-row{flex-direction:column;align-items:flex-start;}
  .button-row.center{align-items:center;}
}

/* Reduced motion: disable smooth scroll + transitions, show lottie fallbacks */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;}
  .oh-lottie .oh-lottie-anim{display:none;}
  .oh-lottie .oh-lottie-fallback{display:block;}
}