/* =====================================================================
   Legacy pages: copies of the old Framer site (everything except the new
   homepage and /start). Pixel copies by decision of Oct 27-28, 2026; the
   redesign later replaces this file and the page CSS next to it.
   Kept separate from assets/css/site.css on purpose.

   Breakpoints are Framer's:  desktop >= 1312px · tablet 810-1311px · phone <= 809px
   Colours, sizes and spacing are the computed values read from the live
   pages (Oct 28, 2026), including their quirks (for example the tablet
   header and footer stop at 1199px, as on Framer).
   ===================================================================== */

/* ---------- Fonts (files Frame uploaded to Framer; see assets/legacy/fonts/README.md) ---------- */
@font-face{font-family:'Lg Martina';src:url(../fonts/MartinaPlantijn-Light.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Lg Martina';src:url(../fonts/MartinaPlantijn-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lg Soehne';src:url(../fonts/Soehne-Buch.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lg Saans';src:url(../fonts/Saans-Light.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Lg Saans';src:url(../fonts/Saans-Regular.woff2) format('woff2');font-weight:380;font-style:normal;font-display:swap}
@font-face{font-family:'Lg Saans';src:url(../fonts/Saans-Medium.woff2) format('woff2');font-weight:570;font-style:normal;font-display:swap}
@font-face{font-family:'Lg Saans';src:url(../fonts/Saans-SemiBold.woff2) format('woff2');font-weight:670;font-style:normal;font-display:swap}
@font-face{font-family:'Lg Saans';src:url(../fonts/Saans-Bold.woff2) format('woff2');font-weight:790;font-style:normal;font-display:swap}
@font-face{font-family:'Lg Saans';src:url(../fonts/Saans-Heavy.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}

:root{
  --lg-serif:'Lg Martina',sans-serif;
  --lg-buch:'Lg Soehne',sans-serif;
  --lg-saans:'Lg Saans',sans-serif;
  --lg-ink:#0f1c19;
  --lg-page:#fbfaf8;
  --lg-line:#cfcdc9;
  --lg-gold:#c9a86c;
  --lg-gold-dk:#5a4621;
  --lg-label:#b0996c;
  --lg-grey:#8a9391;
  --lg-mid:#7a8583;
  --lg-dark-line:#394240;
}

/* ---------- Reset (Framer's base) ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--lg-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--lg-buch);color:var(--lg-ink)}
h1,h2,h3,h4,h5,h6,p,figure,ul{margin:0;padding:0}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.lg-page{display:flex;flex-direction:column;align-items:center;background:var(--lg-page);overflow:clip;min-height:100vh}
.lg-page>*{width:100%}
.lg-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Hairlines: Framer draws its 0.5px borders on an ::after layer */
.lg-hl{position:relative}
.lg-hl::after{content:"";position:absolute;inset:0;pointer-events:none;border:0 solid var(--lg-line)}

/* Hide by breakpoint (some live pages change words or rows per breakpoint):
   .lg-hide-d desktop · .lg-hide-t tablet · .lg-hide-p phone */
@media (min-width:1312px){.lg-hide-d{display:none!important}}
@media (min-width:810px) and (max-width:1311.98px){.lg-hide-t{display:none!important}}
@media (max-width:809.98px){.lg-hide-p{display:none!important}}

/* ---------- Buttons ---------- */
.lg-btns{display:flex;align-items:flex-start;gap:12px}
.lg-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;font:400 13px/16px var(--lg-buch);white-space:nowrap;position:relative;flex:none;transition:background-color .2s ease,color .2s ease}
.lg-btn svg{width:9px;height:9px;flex:none;fill:currentColor}
.lg-btn--gold{background:var(--lg-gold);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.lg-btn--gold:hover{background:var(--lg-gold-dk)}
.lg-btn--ink{background:var(--lg-ink);color:#fff}
.lg-btn--ink:hover{background:#000}
.lg-btn--light{background:var(--lg-page);color:#171615;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.lg-btn--light::after,.lg-btn--white::after{content:"";position:absolute;inset:0;border:.5px solid rgba(15,28,25,.16);border-radius:10px;pointer-events:none}
.lg-btn--light:hover{background:#fff}
.lg-btn--white{background:#fff;color:var(--lg-mid);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.lg-btn--ghost{background:rgba(255,255,255,.15);color:#fff}
.lg-btn--ghost:hover{background:#fff;color:#101f1b}

/* ---------- Header ---------- */
.lg-hdr-wrap{position:sticky;top:0;z-index:10}
.lg-hdr{display:flex;flex-direction:column;align-items:center;height:76px;background:rgba(255,255,255,.99)}
.lg-hdr::after{border-bottom-width:.5px}
.lg-hdr-bar{display:contents}
.lg-hdr-in{width:1312px;flex:none;height:76px;display:flex;align-items:center;gap:32px;padding:16px 24px}
.lg-hdr-in::after{border-color:#d5d3d0;border-left-width:.5px;border-right-width:.5px}
.lg-logo{display:flex;align-items:center;padding:12px;flex:none}
.lg-logo svg{width:93px;height:20px}
.lg-menu{flex:1;min-width:0;display:flex;align-items:center;gap:24px}
.lg-mi{display:flex;align-items:center;gap:6px;font:570 14px/20px var(--lg-saans);color:var(--lg-mid);cursor:pointer;white-space:nowrap;transition:color .2s ease}
.lg-mi svg{width:12px;height:8px;transition:transform .2s ease}
a.lg-mi:not(.lg-dd-t):hover{color:#101f1b}
.lg-dd{position:relative}
.lg-dd.is-open>.lg-mi{color:#050505}
.lg-dd.is-open>.lg-mi svg{transform:rotate(180deg)}
/* Hover opens menus only with a mouse; on touch screens a tap opens and a second tap closes (Oct 30 fix). */
@media (hover:hover){
.lg-dd:hover>.lg-mi,.lg-dd.is-hover>.lg-mi{color:#050505}
.lg-dd:hover>.lg-mi svg,.lg-dd.is-hover>.lg-mi svg{transform:rotate(180deg)}
}
.lg-cta{display:flex;align-items:center;gap:12px;flex:none}
.lg-mlogin,.lg-nav{display:none}
.lg-mo{display:none}
button.lg-nav{border:0;cursor:pointer}

/* Dropdown panels. The ::before strip bridges the 35px gap between a menu name and its panel, so the menu
   stays open while the pointer moves down. Panels must not clip (overflow), or the strip is cut off and a
   slow move closes the menu (owner, Oct 30: menus flickered). The grey Products column rounds its own corner. */
.lg-panel{position:absolute;left:0;top:55px;z-index:20;background:#fff;border-radius:10px;box-shadow:0 10px 20px rgba(0,0,0,.05);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.lg-panel::before{content:"";position:absolute;left:0;right:0;top:-35px;height:35px}
.lg-dd.is-open>.lg-panel,.lg-dd:has(:focus-visible)>.lg-panel{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s}
@media (hover:hover){.lg-dd:hover>.lg-panel,.lg-dd.is-hover>.lg-panel{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s}}
/* Escape hides the menu while focus goes back to its trigger. */
.lg-dd.is-shut>.lg-panel{opacity:0;visibility:hidden}
.lg-dd.is-shut>.lg-mi svg{transform:none}
.lg-pi{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;border-radius:8px;background:#fff;transition:background-color .2s ease}
.lg-pi b{font:670 14px/14px var(--lg-saans);letter-spacing:-.14px;color:rgba(23,22,21,.6);transition:color .2s ease}
.lg-pi span{font:400 14px/16px var(--lg-buch);color:rgba(23,22,21,.6);transition:color .2s ease}
.lg-pi:hover{background:#f5f3f1}
.lg-pi:hover b{color:#171615}
.lg-pi:hover span{color:rgba(23,22,21,.8)}
.lg-ph{font:790 10px/16px var(--lg-saans);letter-spacing:.2px;text-transform:uppercase;color:var(--lg-label)}

/* Products: 878 x 467 */
.lg-panel--products{width:878px}
/* Under 1070px wide, keep the wide panels inside the window, even while hidden (a hidden panel still widens the
   page). Products (878px) starts further left: the menu starts at 165px on tablets (24 + 117 + 24), so its left
   edge goes to 100vw - 165 - 878 - 12, never past 12px from the window edge. Company opens leftwards. */
@media (min-width:900px) and (max-width:1069.98px){
  .lg-panel--products{left:max(-153px,min(0px,calc(100vw - 1055px)))}
  .lg-panel--company{left:auto;right:0}
}
.lg-pp-top{display:flex;align-items:center;padding:24px;height:90px}
.lg-pp-brand{flex:1;display:flex;align-items:center;gap:12px}
.lg-pp-mark{width:42px;height:42px;border-radius:9px;background:#fff;position:relative;display:flex;align-items:center;justify-content:center;flex:none}
.lg-pp-mark::after{content:"";position:absolute;inset:0;border:.5px solid rgba(142,142,142,.2);border-radius:9px}
.lg-pp-mark svg{width:20px;height:16px}
.lg-pp-txt{display:flex;flex-direction:column;gap:6px;flex:1}
.lg-pp-txt b{font:670 14px/14px var(--lg-saans);letter-spacing:-.14px;color:#4d4d4d}
.lg-pp-txt span{font:400 14px/16px var(--lg-buch);color:rgba(116,115,115,.8)}
.lg-pp-div{height:1px;background:rgba(207,205,201,.3)}
.lg-pp-bot{display:flex;align-items:flex-start;justify-content:center;height:376px}
.lg-pp-vdiv{width:1px;align-self:stretch;background:rgba(207,205,201,.3);flex:none}
.lg-pp-c1{width:316px;flex:none;padding:24px 20px 20px;display:flex;flex-direction:column;align-items:center;gap:8px}
.lg-pp-c1 .lg-ph{width:254px}
.lg-pp-c1 .lg-pp-list{width:276px;display:flex;flex-direction:column;gap:10px}
.lg-pp-c2{width:294px;flex:none;padding:24px 20px;display:flex;flex-direction:column;gap:24px}
.lg-pp-grp{display:flex;flex-direction:column;gap:8px}
.lg-pp-c2 .lg-ph{padding-left:12px}
.lg-pp-c3{width:266px;flex:none;align-self:stretch;background:#fafafa;border-bottom-right-radius:10px;padding:24px 20px 0;display:flex;justify-content:center}
.lg-pp-c3>div{width:212px;display:flex;flex-direction:column;gap:16px}
.lg-pp-c3 .lg-ph{color:#999}
.lg-pp-tools{display:flex;flex-direction:column;gap:20px}
.lg-pp-tools a{font:570 14px/14px var(--lg-saans);letter-spacing:-.14px;color:#1a2a2a;height:14px;display:flex;align-items:center}

/* Use cases: 600 x 238 */
.lg-panel--uses{width:600px;display:flex;align-items:center;gap:12px;padding:12px}
.lg-pu-col{width:275px;display:flex;flex-direction:column;gap:6px}
.lg-pu-col:first-child{padding-right:6px}
.lg-pu-col:last-child{padding-left:6px}
.lg-pu-div{width:2px;height:214px;position:relative;flex:none}
.lg-pu-div::after{content:"";position:absolute;inset:0;border-left:.5px solid rgba(207,205,201,.6)}
.lg-pu{display:flex;align-items:center;padding:12px;height:38px;border-radius:10px;background:#fff;font:570 14px/14px var(--lg-saans);letter-spacing:-.14px;color:rgba(23,22,21,.6);transition:background-color .2s ease,color .2s ease}
.lg-pu:hover{background:#f5f3f1;color:#171615}

/* Partners 300 x 264, Company 392 x 160 */
.lg-panel--list{padding:6px}
.lg-panel--partners{width:300px}
.lg-panel--company{width:392px}
.lg-pl{display:flex;flex-direction:column;gap:8px}
.lg-pl .lg-pi{height:44px}

/* ---------- Footer ---------- */
.lg-foot{display:flex;justify-content:center;background:var(--lg-ink);overflow:clip}
.lg-foot-in{width:1312px;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:72px;padding:94px 64px 0}
.lg-foot-in::after{border-color:var(--lg-dark-line);border-left-width:.5px;border-right-width:.5px}
.lg-f1{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px}
.lg-f1 svg{width:94px;height:20px}
.lg-f2{width:100%;display:flex;align-items:flex-start;justify-content:space-between}
.lg-fcols{display:flex;align-items:flex-start;gap:48px}
.lg-fcol{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.lg-fcol h4{font:670 14px/22px var(--lg-saans);color:#8af1d9;white-space:nowrap}
.lg-flist{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.lg-flist a,.lg-fdev a{font:400 14px/22px var(--lg-buch);color:#828e8a;white-space:nowrap;transition:color .2s ease}
.lg-flist a:hover,.lg-fdev a:hover{color:#fff}
.lg-flist--2{padding-top:46px}
.lg-fdev{font:400 14px/22px var(--lg-buch);color:rgba(255,255,255,.4);width:72px;white-space:nowrap}
.lg-fspacer{width:45px;height:22px}
.lg-crafted{font:400 14px/22px var(--lg-serif);color:rgba(255,255,255,.6);white-space:nowrap}
.lg-crafted span{font:300 14px/22px var(--lg-saans)}
.lg-crafted--t{font-weight:300}
.lg-f3{width:100%;display:flex;align-items:center;gap:24px}
.lg-flegal{display:flex;align-items:flex-start;gap:12px;flex:none}
.lg-copy{font:380 14px/22px var(--lg-saans);color:rgba(255,255,255,.4);white-space:pre}
.lg-flegal a{font:670 14px/22px var(--lg-saans);color:#828e8a;white-space:nowrap;transition:color .2s ease}
.lg-flegal a:hover{color:#fff}
.lg-fline{flex:1;height:1px;background:var(--lg-dark-line)}
.lg-social{display:flex;align-items:center;gap:24px;flex:none}
.lg-social a{display:flex;align-items:center;gap:12px;font:570 14px/22px var(--lg-saans);color:rgba(255,255,255,.4);white-space:nowrap}
.lg-social svg{width:16px;height:16px}
/* The logomark's frames, cropped by the bottom of the page */
.lg-deco{width:100%;height:248px;position:relative;overflow:clip}
.lg-deco i{position:absolute;display:block}
.lg-deco .a{background:#252e2b}
.lg-deco .b{background:#38403e}
.lg-deco .a1{left:0;right:0;top:0;height:16px}
.lg-deco .a2{right:0;top:16px;width:80px;height:232px}
.lg-deco .b1{right:104px;top:64px;width:1080px;height:16px}
.lg-deco .b2{right:104px;top:80px;width:80px;height:232px}
.lg-deco .c1{left:0;top:128px;width:972px;height:16px}
.lg-deco .c2{left:892px;top:144px;width:80px;height:105px}

/* ---------- CTA band (dark, before the footer) ---------- */
.lg-band{display:flex;flex-direction:column;align-items:center;background:var(--lg-ink);overflow:clip}
.lg-band::after{border-color:var(--lg-ink);border-top-width:.5px}
.lg-band-in{width:1312px;flex:none;display:flex;align-items:center;justify-content:center;padding:96px 64px;background:var(--lg-ink)}
.lg-band-in::after{border-color:var(--lg-dark-line);border-right-width:.5px;border-bottom-width:.5px;border-left-width:.5px}
.lg-band-txt{width:100%;display:flex;flex-direction:column;align-items:center;gap:32px}
.lg-band-copy{display:flex;flex-direction:column;align-items:center;gap:24px}
.lg-band h2{width:713px;font:400 56px/66px var(--lg-serif);color:#fff;text-align:center}
.lg-band p{width:580px;font:400 16px/28px var(--lg-buch);color:rgba(255,255,255,.64);text-align:center}
.lg-band .lg-btns{justify-content:center}

/* =====================================================================
   Tablet: 810 - 1311px
   ===================================================================== */
@media (max-width:1311.98px){
  /* Framer capped the tablet header at 1199px, which left an empty strip on the right at 1200-1311px.
     It now spans the full width (Oct 30 fix). */
  .lg-hdr{width:100%;padding:0 24px}
  .lg-hdr-in{width:100%;gap:24px;padding:16px 0}
  .lg-hdr-in::after{display:none}

  .lg-foot{align-self:stretch}  /* also capped at 1199px on Framer; full width since Oct 30 */
  .lg-foot-in{width:100%;gap:64px}
  .lg-f2{width:auto;justify-content:center}
  .lg-fcols{gap:47px}
  .lg-deco .c1{left:-285px}
  .lg-deco .c2{left:607px}
}

/* =====================================================================
   Phone: up to 809px
   ===================================================================== */
@media (max-width:809.98px){
  .lg-hdr{max-width:none;padding:0;justify-content:center}
  .lg-hdr-in{height:35px;padding:0 22px;gap:0;flex-direction:column;justify-content:flex-start}
  .lg-hdr-bar{width:100%;height:33px;display:flex;align-items:center;justify-content:space-between;position:relative}
  .lg-logo{padding:0;position:static}
  .lg-logo::after{content:"";position:absolute;inset:0;z-index:1}  /* as on Framer, the whole bar links home */
  .lg-menu,.lg-login,.lg-apply{display:none}
  .lg-cta{gap:12px}
  .lg-mlogin{display:flex;position:relative;z-index:2;align-items:center;justify-content:center;gap:4px;padding:8px 12px;border-radius:10px;background:#fff;overflow:hidden;font:400 13px/15.6px var(--lg-buch);color:#666e6b;box-shadow:0 1px 2px -.5px rgba(22,25,29,.04),inset 0 -.5px 0 0 rgba(22,25,29,.12)}
  .lg-mlogin::after{content:"";position:absolute;inset:0;border:.5px solid rgba(48,48,48,.2);border-radius:10px;pointer-events:none}
  .lg-nav{display:flex;width:32px;height:32px;padding:5px;border-radius:10px;background:var(--lg-ink);align-items:center;justify-content:center;position:relative;z-index:2}
  .lg-nav svg{width:16px;height:16px}

  /* Phone menu, open (Framer's "Phone Open" variant): a grid of two equal rows, at most one screen tall.
     Fix (owner, Oct 27): when open sections need more than one screen, the list scrolls inside the
     menu instead of running over the page as it does on Framer. */
  .lg-hdr-wrap.is-menu .lg-hdr{display:none}
  .lg-hdr-wrap.is-menu .lg-mo{display:grid}
  .lg-mo{grid-template-columns:100%;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;max-height:100vh;max-height:100dvh;background:#fff}
  .lg-mo::after{border-bottom-width:.5px}
  .lg-mo-in{align-self:start;display:flex;flex-direction:column;max-height:100vh;max-height:100dvh}
  .lg-mo-bar{height:76px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
  .lg-mo-bar::after{border-color:rgba(207,205,201,.7);border-bottom-width:.5px}
  .lg-mo-logo svg{width:93px;height:20px}
  .lg-mlist{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:22px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .lg-macc{width:100%;display:flex;flex-direction:column;gap:18px;background:#fff}
  .lg-mt{width:100%;height:20px;display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;cursor:pointer;font:400 16px/20px var(--lg-buch);color:#7a8583;text-align:left}
  .lg-mt span{flex:1}
  .lg-mt svg{width:20px;height:20px;flex:none}
  .lg-macc.is-open .lg-mt svg{transform:rotate(180deg)}
  .lg-mbody{display:none;flex-direction:column}
  .lg-macc.is-open .lg-mbody{display:flex}
  .lg-macc--groups .lg-mbody{gap:18px}
  .lg-mgrp{display:flex;flex-direction:column;gap:10px}
  .lg-mh{padding-left:18px;font:790 10px/16px var(--lg-saans);letter-spacing:.2px;text-transform:uppercase;color:#b0996c}
  .lg-ms{display:flex;align-items:center;gap:18px;height:36px}
  .lg-ms i{width:1px;align-self:stretch;background:#cfcdc9;flex:none}
  .lg-ms span{flex:1;font:400 16px/16px var(--lg-buch);color:#7a8583}
  .lg-ms--plain{padding:8px 0}
  .lg-ms--plain span{font-size:15px;line-height:20px}
  .lg-mlink{height:20px;font:400 16px/20px var(--lg-buch);color:#7a8583}

  .lg-foot{max-width:none;align-self:auto}
  .lg-foot-in{gap:48px;padding:64px 24px 0 32px}
  .lg-f1{height:54px;gap:16px}
  .lg-f2{width:100%;justify-content:space-between}
  .lg-fcols{flex-direction:column;gap:32px}
  .lg-fcol{gap:10px}
  .lg-flist--2,.lg-fspacer{display:none}
  .lg-f3{flex-direction:column;align-items:flex-start;gap:24px}
  .lg-flegal{flex-direction:column;gap:16px}
  .lg-social--p{align-items:flex-start;padding-bottom:24px}
  .lg-copy{order:9}
  .lg-fline{display:none}
  .lg-deco .a2{width:50px}
  .lg-deco .b1{right:79px;top:44px}
  .lg-deco .b2{right:79px;top:60px;width:40px}
  .lg-deco .c1{left:-787px;top:96px}
  .lg-deco .c2{left:145px;top:112px;width:40px;height:137px}

  .lg-band-in{width:100%;padding:64px 24px}
  .lg-band-copy{gap:16px}
  .lg-band h2{width:100%;font-size:30px;line-height:40px}
  .lg-band p{width:100%}
}

/* =====================================================================
   Narrow tablets: 810 - 899px. Fix (Oct 30): on Framer the tablet header's menu runs into the
   Log in / Get started buttons below about 900px wide (iPad portrait), so the header uses the
   phone layout (logo, Log in, menu button) up to 899px. The rest of the page keeps its tablet layout.
   Same rules as the phone header above.
   ===================================================================== */
@media (min-width:810px) and (max-width:899.98px){

  .lg-hdr{max-width:none;padding:0;justify-content:center}
  .lg-hdr-in{height:35px;padding:0 22px;gap:0;flex-direction:column;justify-content:flex-start}
  .lg-hdr-bar{width:100%;height:33px;display:flex;align-items:center;justify-content:space-between;position:relative}
  .lg-logo{padding:0;position:static}
  .lg-logo::after{content:"";position:absolute;inset:0;z-index:1}  /* as on Framer, the whole bar links home */
  .lg-menu,.lg-login,.lg-apply{display:none}
  .lg-cta{gap:12px}
  .lg-mlogin{display:flex;position:relative;z-index:2;align-items:center;justify-content:center;gap:4px;padding:8px 12px;border-radius:10px;background:#fff;overflow:hidden;font:400 13px/15.6px var(--lg-buch);color:#666e6b;box-shadow:0 1px 2px -.5px rgba(22,25,29,.04),inset 0 -.5px 0 0 rgba(22,25,29,.12)}
  .lg-mlogin::after{content:"";position:absolute;inset:0;border:.5px solid rgba(48,48,48,.2);border-radius:10px;pointer-events:none}
  .lg-nav{display:flex;width:32px;height:32px;padding:5px;border-radius:10px;background:var(--lg-ink);align-items:center;justify-content:center;position:relative;z-index:2}
  .lg-nav svg{width:16px;height:16px}

  /* Phone menu, open (Framer's "Phone Open" variant): a grid of two equal rows, at most one screen tall.
     Fix (owner, Oct 27): when open sections need more than one screen, the list scrolls inside the
     menu instead of running over the page as it does on Framer. */
  .lg-hdr-wrap.is-menu .lg-hdr{display:none}
  .lg-hdr-wrap.is-menu .lg-mo{display:grid}
  .lg-mo{grid-template-columns:100%;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;max-height:100vh;max-height:100dvh;background:#fff}
  .lg-mo::after{border-bottom-width:.5px}
  .lg-mo-in{align-self:start;display:flex;flex-direction:column;max-height:100vh;max-height:100dvh}
  .lg-mo-bar{height:76px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
  .lg-mo-bar::after{border-color:rgba(207,205,201,.7);border-bottom-width:.5px}
  .lg-mo-logo svg{width:93px;height:20px}
  .lg-mlist{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:22px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .lg-macc{width:100%;display:flex;flex-direction:column;gap:18px;background:#fff}
  .lg-mt{width:100%;height:20px;display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;cursor:pointer;font:400 16px/20px var(--lg-buch);color:#7a8583;text-align:left}
  .lg-mt span{flex:1}
  .lg-mt svg{width:20px;height:20px;flex:none}
  .lg-macc.is-open .lg-mt svg{transform:rotate(180deg)}
  .lg-mbody{display:none;flex-direction:column}
  .lg-macc.is-open .lg-mbody{display:flex}
  .lg-macc--groups .lg-mbody{gap:18px}
  .lg-mgrp{display:flex;flex-direction:column;gap:10px}
  .lg-mh{padding-left:18px;font:790 10px/16px var(--lg-saans);letter-spacing:.2px;text-transform:uppercase;color:#b0996c}
  .lg-ms{display:flex;align-items:center;gap:18px;height:36px}
  .lg-ms i{width:1px;align-self:stretch;background:#cfcdc9;flex:none}
  .lg-ms span{flex:1;font:400 16px/16px var(--lg-buch);color:#7a8583}
  .lg-ms--plain{padding:8px 0}
  .lg-ms--plain span{font-size:15px;line-height:20px}
  .lg-mlink{height:20px;font:400 16px/20px var(--lg-buch);color:#7a8583}
}

/* =====================================================================
   Industry-page tabs (Oct 30 fix). On Framer the panel's component was fixed at 1312px and the tab row
   ran past the screen on phones, so the last tab and the panel copy were cut off. The panel now fills
   its space (legacy.js switches the component to its tablet/phone variant), and on phones the tabs
   wrap into two columns so every tab can be reached.
   ===================================================================== */
[data-lg-tabpanel]>[class$="-container"][class]{width:100%}
@media (max-width:809.98px){
  [data-lg-tabpanel] *{max-width:100%}
  div:has(>[data-lg-tabpanel]) div:has(>[role="tab"]){flex-wrap:wrap;min-width:0!important}
  div:has(>[data-lg-tabpanel]) div:has(>[role="tab"])>[role="tab"]{flex:1 1 50%!important;border-bottom:.5px solid #CFCDC9!important;margin-bottom:0!important}
  div:has(>[data-lg-tabpanel]) div:has(>[role="tab"])>[role="tab"][aria-selected="true"]{border-bottom-color:transparent!important}
}