/* Midel — advanced Home comp. Tokens from inputs/branding/midel-styleguide.html V1.2 */
:root{
  --deep:#0D1B2E; --navy:#1B3F6A; --cobalt:#2A5898; --mid:#4B7EC0;
  --sky:#7FADD8; --mist:#C2D9EF; --pale:#E8F0F8; --cloud:#F4F8FC;
  --yellow:#FFDD00; --yellowmid:#8A6A00; --cyan:#00D0E8; --cyanmid:#009DAD;
  --muted:#6B7A8D; --flag:#b8860b;
  --grad:linear-gradient(110deg,var(--cobalt) 0%,var(--mid) 40%,var(--sky) 100%);
  --maxw:1140px; --r:14px; --shadow:0 10px 30px -12px rgba(13,27,46,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Manrope',system-ui,Segoe UI,sans-serif;color:var(--deep);background:#fff;
  line-height:1.55;-webkit-font-smoothing:antialiased;font-weight:500;overflow-x:clip}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* type */
.eyebrow{font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyanmid)}
.on-dark .eyebrow,.eyebrow.on-dark{color:var(--cyan)}
h1,h2,h3{letter-spacing:-.01em;line-height:1.1;font-weight:800}
h1{font-size:clamp(34px,5vw,56px);line-height:1.06}
h2{font-size:clamp(26px,3.4vw,36px)}
h3{font-size:18px}
.lead{font-weight:500;font-size:clamp(16px,1.5vw,19px);color:var(--navy);max-width:60ch}
.on-dark .lead{color:var(--mist)}

/* buttons — yellow only as CTA surface */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:800;font-size:15px;
  padding:13px 22px;border-radius:10px;cursor:pointer;border:0;text-decoration:none;transition:.15s;white-space:nowrap}
.btn-cta{background:var(--yellow);color:var(--deep)}
.btn-cta:hover{filter:brightness(.94)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-ghost.dark{color:var(--navy);border-color:var(--mist)}
.btn-ghost.dark:hover{background:var(--pale)}
.arrow{color:var(--cyanmid);font-weight:800;text-decoration:none}

/* sections + dark/light rhythm */
section{padding:clamp(56px,8vw,96px) 0}
.dark{background:var(--grad);color:#fff}
.deep{background:var(--deep);color:#fff}
.cloud{background:var(--cloud)}
.accent{width:44px;height:4px;background:var(--cyan);border-radius:2px;margin:0 0 22px}
.sec-head{max-width:60ch;margin-bottom:34px}
.sec-head h2{margin:8px 0 10px}

/* announcement bar */
.annbar{background:var(--grad);color:#fff;font-size:13.5px;font-weight:600;text-align:center;
  padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:10px}
.annbar a{color:var(--yellow);text-decoration:none;font-weight:700}
.annbar .x{margin-left:6px;color:#fff;opacity:.7;cursor:pointer}

/* header */
header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--pale)}
.nav{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand .logo{height:26px;width:auto;display:block}
.nav .links{display:flex;gap:2px;margin-left:auto;list-style:none}
.nav .links>li{position:static}
.nav .links>li>a{display:flex;align-items:center;gap:5px;height:68px;padding:0 9px;
  color:var(--navy);text-decoration:none;font-weight:600;font-size:15px}
.nav .links>li>a .car{font-size:9px;opacity:.55;transition:.15s}
.nav .links>li:hover>a{color:var(--cobalt)}
.nav .links>li.active>a{color:var(--cobalt)}
.nav .links>li.has-mega:hover>a .car{transform:rotate(180deg)}
.item.soon,footer.site a.soon{position:relative}
.item.soon .nm::after,footer.site a.soon::after{
  content:"soon";font-size:9px;font-weight:800;color:#9aa7b8;background:var(--pale);
  padding:1px 6px;border-radius:5px;margin-left:7px;vertical-align:middle;letter-spacing:.03em}
footer.site a.soon{color:#5c7086}
.nav .right{display:flex;align-items:center;gap:14px}
/* language selector (dropdown) */
.langsel{position:relative}
.langbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 6px;border:0;border-radius:9px;
  background:transparent;font-family:inherit;font-weight:700;font-size:13px;color:var(--deep);cursor:pointer}
.langbtn:hover{color:var(--cobalt)}
.langbtn .car{font-size:9px;opacity:.55;transition:transform .15s}
.langsel.open .langbtn .car{transform:rotate(180deg)}
.langbtn .flag,.langopt .flag{width:18px;height:12px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(13,27,46,.12)}
.langmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;background:#fff;border:1px solid var(--pale);
  border-radius:10px;box-shadow:var(--shadow);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:.15s;z-index:30}
.langsel.open .langmenu{opacity:1;visibility:visible;transform:none}
.langopt{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:7px;text-decoration:none;
  font-size:14px;font-weight:600;color:var(--deep)}
.langopt:hover{background:var(--cloud)}
.langopt.active{color:var(--cobalt)}
.langopt.soon{color:var(--mist);cursor:not-allowed}
.langopt em{margin-left:auto;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mist);background:var(--cloud);padding:2px 6px;border-radius:5px}
/* inline flag switch — used in the mobile drawer clone */
.nav .lang{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-weight:700;font-size:13px;color:var(--navy);cursor:default}
.nav .lang b{display:inline-flex;align-items:center;gap:4px;color:var(--deep)}
.nav .lang .soon-lang{display:inline-flex;align-items:center;gap:4px;opacity:.45}
.lang .flag{width:18px;height:12px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(13,27,46,.12)}
.mobile-actions{display:none} /* cloned header actions — only shown inside the mobile drawer */
/* trim the header CTA so it sits inside the 68px bar */
.nav .right .btn-cta{padding:10px 18px;font-size:14px}
.iconbtn{width:38px;height:38px;border:1px solid var(--pale);border-radius:9px;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--navy);cursor:pointer;font-size:16px}
/* keyboard focus visibility across interactive chrome */
.nav a:focus-visible,.iconbtn:focus-visible,.navtoggle:focus-visible,
.mega a:focus-visible,.btn:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:6px}
/* hamburger — hidden on desktop, shown at the mobile breakpoint */
.navtoggle{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--pale);
  border-radius:9px;background:#fff;cursor:pointer;position:relative}
.navtoggle .bars,.navtoggle .bars::before,.navtoggle .bars::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--deep);
  border-radius:2px;transition:.2s;transform:translate(-50%,-50%)}
.navtoggle .bars::before{transform:translate(-50%,-7px)}
.navtoggle .bars::after{transform:translate(-50%,5px)}
.navtoggle[aria-expanded="true"] .bars{background:transparent}
.navtoggle[aria-expanded="true"] .bars::before{transform:translate(-50%,-50%) rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--pale);
  box-shadow:0 24px 44px -22px rgba(13,27,46,.35);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:.16s;z-index:30}
.links>li.has-mega:hover .mega,.mega.open{opacity:1;visibility:visible;transform:none}
.mega .inner{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:28px 0}

/* single-list menus (Applications/Technology/Resources/Company) share the same
   full-width panel as Products: the list spreads into columns, promo sits right */
.mega .inner.cols-2{grid-template-columns:1fr 300px;gap:40px;padding:28px 0}
.mega .inner.cols-2 .megacol{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 28px;align-content:start}
.mega .inner.cols-2 .megacol h4{grid-column:1/-1;margin-bottom:8px}
/* Applications menu: distribute the data-driven items across 2 columns */
.app-menu-items{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:2px 28px}
.megacol h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--cyanmid);
  margin-bottom:10px;font-weight:800}
.megacol a.item{display:flex;align-items:center;gap:11px;padding:8px 0;text-decoration:none;color:var(--deep)}
.megacol a.item:hover{color:var(--cobalt)}
.megacol a.item .th{width:40px;height:40px;border-radius:9px;background:var(--pale);flex:none}
.megacol a.item .th.g{background:var(--grad)}
/* application mini-thumb = the same application photo, scaled down */
.megacol a.item .th.th-img{background-size:cover;background-position:center}
/* Regional Sales Partners: the dot-matrix world map. The full map
   (images/world/worldmap-dots.svg, 0.7u dots at 0.5 opacity) is tuned for a
   large dark panel and washes out at 40px, so worldmap.py also emits an icon
   build — coarser grid, fatter dots, currentColor, Antarctica dropped and the
   latitudes cropped to the inhabited band so the continents fill the tile. */
.megacol a.item .th.th-map{background:var(--pale);color:var(--cobalt);
  background-image:url("../images/world/worldmap-icon.svg");
  background-repeat:no-repeat;background-position:center;background-size:86% auto}
/* dark mini-thumb carrying a laser-green beam profile (Products menu) */
.megacol a.item .th.th-beam{background:radial-gradient(120% 120% at 50% 35%,#1c3a63 0%,#12294a 80%);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.megacol a.item .th.th-beam img{max-width:82%;max-height:82%;width:auto;object-fit:contain}
/* EDOF hint: a plain vertical double-headed arrow beside the 3D form */
.megacol a.item .th.th-beam.edof{position:relative}
.megacol a.item .th.th-beam.edof::after{content:"";position:absolute;right:2px;top:50%;
  transform:translateY(-50%);width:8px;height:22px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 22'%3E%3Cline x1='4' y1='3.5' x2='4' y2='18.5' stroke='%237bf3a6' stroke-width='1.5'/%3E%3Cpath d='M4 0 L1 4 L7 4 Z' fill='%237bf3a6'/%3E%3Cpath d='M4 22 L1 18 L7 18 Z' fill='%237bf3a6'/%3E%3C/svg%3E") center/contain no-repeat}
.megacol a.item .nm{font-weight:700;font-size:14.5px}
.megacol a.item small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.mega .promo{background:var(--cloud);border-radius:12px;padding:20px;display:flex;flex-direction:column;justify-content:center}
.mega .promo b{font-size:15px;color:var(--deep)}
.mega .promo p{font-size:13px;color:var(--navy);margin:6px 0 14px}
.badge-new{font-size:9px;font-weight:800;color:#fff;background:var(--cyanmid);padding:2px 6px;border-radius:5px;margin-left:7px;vertical-align:middle;letter-spacing:.04em}
/* action buttons whose target isn't built yet — visibly not-yet-available */
a.soon-link{opacity:.55;cursor:not-allowed;position:relative}
a.soon-link::after{content:"soon";font-size:9px;font-weight:800;color:#9aa7b8;background:var(--pale);
  padding:1px 6px;border-radius:5px;margin-left:8px;vertical-align:middle;letter-spacing:.03em}

/* hero */
.hero{position:relative;overflow:hidden}
/* subpage gradient hero — tighter than the home splash hero (product/usecase/contact) */
.hero--sub{padding:clamp(44px,6vw,64px) 0}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
/* single-column subpage hero (usecase/contact) — no side visual */
.hero--stack .wrap{display:block}
.hero h1{margin:16px 0 18px;max-width:16ch}
/* 50ch statt der globalen 60ch: der Lead endete sonst bei 55% Hero-Breite, wo das
   Foto schon durchscheint und der Kontrast auf 3.0:1 fiel. Bei 44ch schließt er
   bei ~43% ab, mit Abstand innerhalb des Deckplateaus (49%). */
.hero .lead{max-width:44ch}
.hero .cta-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:26px}
/* soft, non-aggressive path into the page — the top-right Contact button carries conversion */
.hero .herolink{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;
  font-size:15px;text-decoration:none;opacity:.9}
.hero .herolink .arr{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);
  font-size:13px;transition:transform .2s,background .2s,border-color .2s}
.hero .herolink:hover{opacity:1}
.hero .herolink:hover .arr{transform:translateY(3px);background:rgba(255,255,255,.14);border-color:#fff}
/* Beam-profile icon on the "Our products" herolink. Same capsule geometry as .arr
   so the two hero links read as one pair, but wider — a profile needs width to be
   a profile. The curve morphs Gaussian -> flat-top -> ring-core and back, holding
   each shape for ~2s so it is readable rather than a wobble. */
.hero .herolink .bshape{display:block;width:34px;height:21px;flex:none;
  padding:3px 4px;border-radius:11px;border:1.5px solid rgba(255,255,255,.5);
  box-sizing:content-box;transition:background .15s,border-color .15s}
.hero .herolink:hover .bshape{background:rgba(255,255,255,.14);border-color:#fff}
.hero .visual{aspect-ratio:4/3;border-radius:var(--r);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;
  color:var(--mist);font-size:13px;font-weight:600}
.hero .visual::after{content:"Beam-profile visual"}
/* hero visual holding a real plot/render instead of the placeholder label */
.hero .visual.has-img{background:rgba(255,255,255,.06);padding:16px}
.hero .visual.has-img::after{display:none}
.hero .visual.has-img img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 22px rgba(6,16,32,.35))}

/* logo bar — auto-scrolling marquee, desaturated logos, colour on hover */
.logos{padding:34px 0;overflow:hidden}
.logos .label{text-align:center;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:22px}

/* the marquee: two identical groups scroll left, looping at -50% */
.logobar{position:relative}
.logobar-track{display:flex;width:max-content;
  animation:logo-scroll 42s linear infinite}
.logobar:hover .logobar-track{animation-play-state:paused}
.logobar-group{display:flex;align-items:center;flex:none}
/* soft fade at both edges so logos slide in/out gracefully */
.logobar::before,.logobar::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.logobar::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.logobar::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}

@keyframes logo-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* one logo cell */
.logos .lg{flex:none;display:flex;align-items:center;justify-content:center;
  height:46px;margin:0 34px;text-decoration:none}
.logos .lg img{max-height:46px;max-width:170px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.55;transition:filter .25s,opacity .25s}
.logos .lg:hover img{filter:grayscale(0);opacity:1}
/* text fallback for logos we don't have a file for yet */
.logos .lg .lg-text{font-weight:800;font-size:16px;letter-spacing:.01em;color:#9aa8b8;
  white-space:nowrap;transition:color .25s}
.logos .lg:hover .lg-text{color:var(--navy)}

/* if the whole set fits, stop scrolling and center it */
.logobar--static{overflow:hidden}
.logobar--static .logobar-track{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
.logobar--static .logobar-group[aria-hidden]{display:none}
.logobar--static .logobar-group{flex-wrap:wrap;justify-content:center;gap:8px 0}

@media (prefers-reduced-motion:reduce){
  /* SMIL cannot be stopped from CSS, so chrome.js removes the <animate> node
     instead and the path stays on the Gaussian it is authored with. */
  .logobar-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}
  .logobar-group[aria-hidden]{display:none}
  .gm-hq .gm-dot::after{animation:none}
}

/* thesis / mission band */
.thesis h2{max-width:24ch}
.thesis .lead{margin-top:14px;max-width:64ch}
.thesis .hl{color:var(--cyan)}
.thesis .link{display:inline-block;margin-top:22px;color:var(--cyan);font-weight:700;text-decoration:none}

/* cards grid */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* "Where it's used" on product pages: holds however many applications are
   actually mapped to that product (2 to 4 today), so it flows instead of
   leaving a hole like the fixed .grid3 would. Same .imgcard tiles as the home
   page carousel — see applications.js products[]. */
.appgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--pale);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;gap:10px;transition:.18s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card .tile{width:46px;height:46px;border-radius:12px;background:var(--pale);
  display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.card .tile i{width:20px;height:20px;border-radius:6px;background:var(--cobalt);display:block}
.card .tile.cy{background:#E0F9FC}.card .tile.cy i{background:var(--cyanmid)}
.card .tile.ye{background:#FFFBE0}.card .tile.ye i{background:var(--yellowmid)}
.card h3{font-size:18px}
.card p{font-size:14.5px;color:var(--navy)}
.card .go{margin-top:auto;color:var(--cyanmid);font-weight:700;font-size:14px;text-decoration:none}
/* portfolio "Explore" links render as the standard yellow CTA button */
.card .card-cta{margin-top:auto;align-self:flex-start;padding:11px 18px;font-size:14px}
/* not-yet-built products: muted "coming soon" chip instead of a dead yellow button */
.card .card-soon{margin-top:auto;align-self:flex-start;font-size:13px;font-weight:800;color:#5c7086;
  background:var(--cloud);border:1px solid var(--pale);border-radius:999px;padding:8px 15px;cursor:default}

/* portfolio featured */
.card.feat{border:2px solid var(--yellow);position:relative}
.card.feat .badge{position:absolute;top:16px;right:16px;z-index:3;background:var(--yellow);color:var(--deep);
  font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:6px}
.card .vis{height:96px;border-radius:10px;background:var(--grad);opacity:.85;margin-bottom:6px}
.only{display:inline-block;font-size:12px;font-weight:700;color:var(--cyanmid);margin-top:2px}

/* portfolio layout: 3D is the hero of the class, not one of three equals —
   a large featured card beside the other two stacked. All cards keep the same
   vertical form (visual on top, copy below); only the featured visual is bigger.
   White cards get a resting shadow so they lift off the cloud section. */
.portfolio-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;align-items:stretch}
.portfolio-side{display:flex;flex-direction:column;gap:20px}
.portfolio-side .card{flex:1}
.portfolio-grid .card{box-shadow:var(--shadow)}
.portfolio-grid .card.feat h3{font-size:22px}
/* featured 3D card: the visual grows to absorb the slack so the copy block
   (title → link) stays together at the bottom instead of being pulled apart
   by the .go margin-top:auto. */
.portfolio-grid .card.feat .vis.beam{flex:1 1 auto;min-height:360px}
.portfolio-grid .card.feat .card-cta{margin-top:6px}
/* the three surfaces climb as a staircase instead of a flat row — more dynamic
   and it reads as "one family, escalating capability" */
.card.feat .beam-row.has-swap{justify-content:center;gap:1.5%}
.card.feat .beam-row.has-swap img{max-height:54%}
.card.feat .beam-row.has-swap img:nth-child(1){transform:translateY(42px)}
.card.feat .beam-row.has-swap img:nth-child(2){transform:translateY(4px)}
.card.feat .beam-row.has-swap img:nth-child(3){transform:translateY(-38px)}

/* beam-profile card visual — laser-green render on the Midel brand gradient.
   Green PNGs are transparent, so the field colour comes from here. The blue
   grad reads friendlier than flat navy and the green glow still holds up at
   card size (verified against navy/pale/cloud in _bgcompare). */
/* backdrop = defocused green-laser lab photo (baked dark+blur), not a flat
   gradient — the green profiles read as real light on a real optical bench */
.vis.beam{height:132px;opacity:1;background:var(--deep) url("../images/products/lab-backdrop.webp") center/cover no-repeat;
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.vis.beam img{max-height:88%;max-width:90%;width:auto;object-fit:contain;
  filter:drop-shadow(0 3px 18px rgba(0,255,120,.28)) drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.vis.beam .beam-caustic{position:absolute}
/* one or more forms sitting side by side, evenly spread */
.vis.beam .beam-row{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:space-evenly;gap:2%;padding:0 4%}
.vis.beam .beam-row img{max-height:82%;flex:0 1 auto;min-width:0}
/* 3D card: surfaces by default, side-view caustic (EDOF channel) on hover */
.vis.beam .beam-caustic{max-height:94%;max-width:40%;opacity:0;transform:scale(.96);
  transition:opacity .4s ease,transform .4s ease}
.vis.beam .beam-row{transition:opacity .4s ease}
.card:hover .vis.beam .beam-row.has-swap{opacity:0}
.card:hover .vis.beam .beam-caustic{opacity:1;transform:scale(1)}
/* tiny caption that reveals the EDOF story on hover of the 3D card */
.vis.beam .beam-cap{position:absolute;left:0;right:0;bottom:8px;text-align:center;
  font-size:11px;font-weight:800;letter-spacing:.02em;color:#fff;opacity:0;
  text-shadow:0 1px 6px rgba(13,27,46,.55);transition:opacity .4s ease;pointer-events:none}
.card:hover .vis.beam .beam-cap{opacity:1}

/* ── Products portfolio (home) ────────────────────────────────────────────
   Real simulation plots (jet colormap) shown as "framed data", not UI. The
   section runs on a light blue gradient with a faint laser-cutting photo
   underneath, so the busy multicolour plots read as intentional exhibits on a
   calm, bright field. Cards are milky-white glass; the plot tiles inside are
   lighter still. Deliberately separate from .vis.beam (the green line-art
   surfaces still used in the menu + technology page); do not merge the two. */
/* mid-blue field like the source slide: laser-cutting photo as the base, a
   mid-blue brand gradient laid over it at ~75% (≈25% transparent) so the blue
   dominates and the photo reads as a faint texture underneath. */
.portfolio{position:relative;isolation:isolate;
  background:var(--deep) url("../images/products/laser-cutting-bg.webp") center/cover no-repeat}
.portfolio > .wrap{position:relative;z-index:1}
.pf-bg{position:absolute;inset:0;z-index:0;background:var(--grad);opacity:.78}
/* section is now a strong blue field → its heading rides on dark;
   eyebrow uses the standard cyan tech-accent like every other dark section */
.portfolio .sec-head .eyebrow{color:var(--cyan)}
.portfolio .sec-head h2{color:#fff}
.pf-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;align-items:stretch}
.pf-side{display:flex;flex-direction:column;gap:20px}
.pf-side .pf-card{flex:1}
/* white frosted-glass card: very transparent, blur pulls the blue field
   through so it reads like the slide's translucent tiles. A solid title bar
   sits flush at the top (slide-style); the body below carries the content.
   Text is dark navy/deep for contrast (styleguide: body 500 navy). */
.pf-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:rgba(255,255,255,.30);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(255,255,255,.45);box-shadow:0 18px 44px -18px rgba(6,16,32,.55);
  border-radius:var(--r)}
/* title bar — like the slide's coloured header strip. Default: near-white bar,
   deep-navy title. Featured overrides to the brand yellow (see .pf-feat). */
.pf-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 22px;background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(255,255,255,.5)}
.pf-bar h3{color:var(--deep);margin:0}
.pf-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px}
/* dark body text on the translucent card (styleguide: body 500 navy) */
.pf-card p{font-size:14.5px;color:var(--navy);margin-bottom:2px}
.pf-card p b{color:var(--deep)}
.pf-card .card-cta{margin-top:auto;align-self:flex-start;padding:11px 18px;font-size:14px}
.pf-card .card-soon{margin-top:auto;align-self:flex-start;font-size:13px;font-weight:800;
  color:var(--navy);background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.55);
  border-radius:999px;padding:8px 15px;cursor:default}
/* featured: yellow header strip carries both the title and the exclusivity tag,
   so yellow stays a single deliberate signal (no separate badge stacking). */
.pf-feat{border-color:var(--yellow)}
.pf-feat .pf-bar{background:var(--yellow);border-bottom:none}
.pf-feat .pf-bar h3{font-size:22px}
.pf-tag{flex:none;color:var(--deep);font-weight:800;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;opacity:.82}
/* plot exhibits: each figure is a lighter tile framing one simulation image.
   In the featured card the tile row grows to absorb the card's slack — the
   portrait 3D plots fill the extra height instead of leaving a gap above the
   CTA (keeps the 3-card layout balanced). */
.pf-shapes{display:flex;gap:12px;margin:6px 0 4px}
/* tiles are frameless now — the plots float straight on the glass for a
   cleaner look; a soft shadow lifts them off the blue field. */
.pf-shapes figure{flex:1;min-width:0;padding:2px 0;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.pf-shapes img{width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(6,16,32,.22))}
.pf-shapes figcaption{font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--cobalt)}
.pf-feat .pf-shapes{flex:1 1 auto;align-items:stretch;min-height:0}
.pf-feat .pf-shapes figure{justify-content:center;min-height:0}
.pf-feat .pf-shapes img{min-height:0;max-height:100%}
.pf-shapes--sm img{max-height:96px}
/* two stacked line-splitter plots share one captioned tile */
.pf-splitter-lines{gap:6px !important}
.pf-splitter-lines img{max-height:44px}

/* use cases — editorial cards: alternating photo/text, each on a white card
   with a resting shadow and a left accent stripe. The stripe steps decoratively
   through the brand's cool ramp (cyan → cobalt → sky) so the stack of cases
   pops without breaking the monochrome-navy palette (styleguide: no foreign
   hues; cyan is the tech accent). Differentiates from the card grids above.

   TODO(css): .uc-rows/.uc-row/.uc-photo are ORPHANED — the home section was
   rebuilt as .uc2-* (see index.html): the sky accent failed AA as a link colour
   and three hues implied a category difference. Delete these on the style pass,
   when the uc2- rules move in here. .uc-text and .chip/.chips are still live —
   the 12 use-case detail pages use them. */
.uc-rows{display:flex;flex-direction:column;gap:20px}
.uc-row{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;
  background:#fff;border:1px solid var(--pale);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);position:relative;transition:.2s;
  border-left:5px solid var(--accent,var(--cyan))}
.uc-row:hover{transform:translateY(-3px);box-shadow:0 18px 44px -16px rgba(13,27,46,.42)}
/* decorative blue-ramp accents — no semantic mapping to beam class */
.uc-rows .uc-row:nth-child(1){--accent:var(--cyan)}
.uc-rows .uc-row:nth-child(2){--accent:var(--cobalt)}
.uc-rows .uc-row:nth-child(3){--accent:var(--sky)}
.uc-row.rev .uc-photo{order:2}
.uc-row.rev .uc-text{order:1}
/* fixed, compact photo height so every card is the same height (object-fit
   absorbs the differing source aspect ratios); grid stretch keeps text to match */
.uc-photo{overflow:hidden;height:190px;background:var(--grad)}
.uc-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.uc-row:hover .uc-photo img{transform:scale(1.045)}
.uc-text{padding:20px 30px;display:flex;flex-direction:column;justify-content:center}
.uc-text h3{font-size:19px;margin:10px 0 13px;max-width:26ch}
/* the case link picks up the card's accent so each card reads as one unit */
.uc-text .go{color:var(--accent,var(--cyanmid))}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:11px;font-weight:700;color:var(--navy);background:var(--pale);padding:3px 9px;border-radius:20px}

/* how we work */
.steps{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.step{flex:1;min-width:130px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:16px}
.step .n{font-size:12px;font-weight:800;color:var(--cyan)}
.step .t{font-weight:700;font-size:14px;margin-top:6px}
.how-cta{margin-top:26px;display:inline-block;color:var(--cyan);font-weight:700;text-decoration:none}

/* technology */
.tech-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:stretch}
/* the two company assets — hardware moat + software moat — as a paired set on
   the light tech section. A uniting outer frame makes "built to work as one"
   literal: the two assets live inside one card, split by a hairline divider.
   Cyan kicker = tech-accent on light (styleguide). */
.assets-frame{margin-top:20px;background:#fff;border:1px solid var(--pale);
  border-radius:var(--r);box-shadow:var(--shadow);border-top:3px solid var(--cyan);
  padding:18px 20px 20px}
.assets-intro{margin:0 0 14px;font-weight:700;color:var(--navy);font-size:15px}
.assets{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.asset{position:relative}
/* hairline between the paired assets — they read as two facets of one thing */
.asset+.asset{padding-left:22px;border-left:1px solid var(--pale)}
.asset-k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cyanmid)}
.asset h3{color:var(--deep);font-size:17px;margin:6px 0 6px}
.asset p{font-size:13.5px;color:var(--navy);margin:0}
.tech .go{color:var(--cyanmid);font-weight:700;font-size:14px;text-decoration:none}
.tech .go:hover{color:var(--cyan)}
.tech .box{aspect-ratio:16/10;border-radius:var(--r);background:var(--pale);display:flex;
  align-items:center;justify-content:center;color:#93a3b5;font-weight:600;font-size:13px}
.tech-photo{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  position:relative;background:var(--deep);height:100%;min-height:340px}
.tech-photo img{display:block;width:100%;height:100%;min-height:100%;object-fit:cover;
  transform:scale(1.2);transform-origin:center}

/* global reach — dot-matrix world map with partner markers.
   Flat --deep (not the gradient) so it sits between the light Credibility
   section and the gradient Closing without a dark-on-dark clash. */
.reach{background:var(--deep);color:#fff}
.reach h2{max-width:20ch}
.reach .lead{margin-top:12px;max-width:62ch}
.globe{width:100%;max-width:820px;margin:30px auto 4px}
.gm-canvas{position:relative;width:100%;aspect-ratio:2/1}
.gm-canvas .gm-dots,.gm-canvas .gm-arcs{position:absolute;inset:0;width:100%;height:100%}
.gm-arcs{overflow:visible;fill:none;stroke:var(--cyan);stroke-width:.9;
  stroke-opacity:.7;stroke-linecap:round}
/* markers: positioned by left%/top% from the shared equirectangular projection */
.gm-marker{position:absolute;transform:translate(-50%,-50%);z-index:2}
.gm-dot{display:block;width:9px;height:9px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,208,232,.22)}
.gm-hq .gm-dot{width:12px;height:12px;box-shadow:0 0 0 4px rgba(0,208,232,.28)}
/* HQ pulse ring; disabled under prefers-reduced-motion below */
.gm-hq .gm-dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--cyan);animation:gmpulse 2.4s ease-out infinite}
.gm-label{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);
  white-space:nowrap;font-size:11.5px;font-weight:700;color:var(--mist);
  background:rgba(13,27,46,.55);padding:2px 8px;border-radius:999px;
  border:1px solid rgba(194,217,239,.2)}
.gm-hq .gm-label{color:#fff}
/* place a label above its pin instead of below (avoids collisions, e.g. Seoul/Tokyo) */
.gm-lbl-above .gm-label{top:auto;bottom:calc(100% + 6px)}
@keyframes gmpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
/* overview strip: partner logos + countries under the map (map labels stay too) */
.gm-legend{display:flex;list-style:none;margin:22px 0 0;padding:0;
  gap:10px 26px;flex-wrap:wrap;justify-content:center}
.gm-leg{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mist)}
.gm-leg b{color:#fff;font-weight:700}
.gm-leg .gm-swatch{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:none}
.gm-leg-worldwide .gm-swatch{background:transparent;border:1.5px solid var(--sky)}
/* small partner logo in the overview: on a light chip so mono/dark marks read */
.gm-leg .gm-logo{height:16px;width:auto;max-width:52px;flex:none;object-fit:contain;
  background:#fff;border-radius:3px;padding:2px 4px}

/* partner stories (partners-advanced.html) */
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ps-card{background:#fff;border:1px solid var(--pale);border-radius:var(--r);
  box-shadow:var(--shadow);border-top:3px solid var(--cyan);padding:20px 22px 22px;
  display:flex;flex-direction:column;gap:14px}
.ps-flag{font-size:11.5px;font-weight:700;color:var(--yellowmid);
  background:rgba(255,221,0,.14);border:1px solid rgba(138,106,0,.28);
  border-radius:8px;padding:5px 10px;align-self:flex-start}
.ps-who{display:flex;align-items:center;gap:14px}
.ps-avatar{width:52px;height:52px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--pale),var(--mist));
  border:2px solid #fff;box-shadow:0 2px 8px rgba(13,27,46,.14)}
.ps-id{display:flex;flex-direction:column;gap:2px}
.ps-id b{font-size:15px;color:var(--deep);font-weight:800}
.ps-role{font-size:13px;color:var(--navy);font-weight:600}
.ps-region{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-top:2px}
.ps-code{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--cyanmid);
  background:var(--pale);border-radius:4px;padding:2px 5px}
.ps-quote{margin:0}
.ps-en{font-size:14.5px;color:var(--navy);margin:0}
.ps-native{font-size:14px;color:var(--deep);margin:10px 0 0;padding-top:10px;
  border-top:1px solid var(--pale)}

/* credibility */
.cred .stats{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin:18px 0 22px}
.cred .stat b{display:block;font-size:30px;font-weight:800;color:var(--cobalt);line-height:1}
.cred .stat span{font-size:13px;font-weight:600;color:var(--navy)}
/* two brand facts sit in the same row, quieter than the numbers */
.cred .stat.fact{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--navy)}
.cred .stat.fact::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none}
/* team band: a peer to the advisor quote, not a trailing link */
.cred .teamband{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;
  padding:16px 20px;background:var(--cloud);border:1px solid var(--pale);border-radius:var(--r)}
.cred .teamband .faces{display:flex}
.cred .teamband .faces .face:not(:first-child){margin-left:-14px}
.cred .teamband-txt{display:flex;flex-direction:column;gap:4px}
.cred .teamband-txt b{font-size:15px;color:var(--deep);font-weight:800}
.cred .teamband-txt .go{color:var(--cyanmid);font-weight:700;font-size:14px;text-decoration:none}
.cred .teamband-txt .go:hover{color:var(--cyan)}
/* sources are pre-cropped to a square headshot in _originals/team — just center */
.cred .team .face,.cred .teamband .face{width:52px;height:52px;border-radius:50%;background:var(--pale);
  object-fit:cover;object-position:50% 50%;border:2px solid #fff;box-shadow:0 2px 8px rgba(13,27,46,.14)}
/* Tom Merk portrait in the advisor quote */
.bigquote img.face{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 50%;flex:none}
.cred .merk{background:var(--cloud);border:1px solid var(--pale);border-radius:var(--r);
  padding:20px 22px;font-size:14.5px;color:var(--navy)}
.cred .merk b{color:var(--deep)}

/* closing */
.closing{text-align:center}
.closing h2{max-width:22ch;margin:0 auto 14px}
.closing .lead{margin:0 auto 26px}

/* footer (rich) */
footer.site{background:var(--deep);color:var(--mist);padding:58px 0 26px;font-size:14px}
footer.site .ftop{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:36px}
footer.site h5{color:#fff;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:14px;font-weight:800}
footer.site a{color:var(--mist);text-decoration:none;display:block;margin:9px 0}
footer.site a:hover{color:#fff}
.fbrand{display:flex;align-items:center;margin-bottom:16px}
.fbrand .logo{height:32px;width:auto;display:block}
.fcontact .ci{display:flex;align-items:center;gap:11px;margin:11px 0;color:var(--mist)}
/* .ic is an inline SVG now, not a grey box (2026-08-31) */
.fcontact .ci .ic{width:17px;height:17px;flex:none;color:var(--cyan);opacity:.85}
/* single LinkedIn link — the only channel we run */
footer.site a.social-li{display:inline-flex;align-items:center;gap:10px;margin:16px 0 0;padding:9px 16px 9px 13px;
  border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:13.5px;font-weight:700;text-decoration:none;transition:background .2s,border-color .2s}
footer.site a.social-li svg{color:var(--cyan);flex:none;transition:color .2s}
footer.site a.social-li:hover{background:var(--cyanmid);border-color:var(--cyanmid);color:#fff}
footer.site a.social-li:hover svg{color:#fff}
.factions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.factions .btn{padding:11px 16px;font-size:13.5px}
.fnews .lbl{font-size:13px;color:var(--mist);margin-bottom:8px}
.fnews .news{display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:9px;overflow:hidden}
.fnews .news input{flex:1;background:transparent;border:0;color:#fff;padding:11px 12px;font-family:inherit;font-size:13px;outline:none}
.fnews .news input::placeholder{color:#7d93ad}
.fnews .news button{background:var(--yellow);color:var(--deep);border:0;font-weight:800;padding:0 16px;cursor:pointer;font-family:inherit;font-size:13px}
/* Needs to out-specify `footer.site a{display:block}` above (2026-08-31): as a
   plain .backtop it lost, so the label and the arrow stacked instead of sitting
   side by side. The extra top margin separates it from the Company link list it
   now follows, so it does not read as one more nav item. */
footer.site a.backtop{display:inline-flex;align-items:center;gap:9px;color:var(--mist);margin:26px 0 0;font-size:13px}
.backtop .circ{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center}
.fbottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:#6d84a0}
.fbottom .fl a{display:inline-block;margin-right:20px;color:#6d84a0}
.fbottom .fl a:hover{color:#fff}

/* ---- Product detail ---- */
.fit{background:#fff;border:1px solid var(--pale);border-left:4px solid var(--cyan);
  border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.fit h3{font-size:21px;margin-bottom:4px}
.fit .sub{font-size:14.5px;color:var(--navy);margin-bottom:20px}
.fitgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fititem{background:var(--cloud);border:1px solid var(--pale);border-radius:10px;padding:14px 16px}
.fititem .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cyanmid)}
.fititem .v{font-size:14px;font-weight:600;color:var(--deep);margin-top:5px}
.note{font-size:12.5px;color:var(--muted);margin-top:12px}
.fit .note{margin-top:16px}
/* spec table — one global structure across all product/spec pages. Wrap the
   <table class="spec"> in <div class="spec-card"> and mark each group header
   with <td class="spec-sec" colspan="2">…</td>. Styled flat, as a table — no
   raised card — so structure + style stay global without popping off the page. */
.spec-card{margin-top:6px}
table.spec{width:100%;border-collapse:collapse}
table.spec th,table.spec td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--pale);font-size:14px;vertical-align:top}
table.spec th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--cyanmid);font-weight:700}
table.spec td b{color:var(--deep)}table.spec td{color:var(--navy)}
/* group header row inside a spec table — a coloured band that clearly sets each
   section (Spot geometry, Input beam requirements, Integration, …) apart */
table.spec td.spec-sec{background:var(--pale);color:var(--cobalt);font-weight:800;
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  box-shadow:inset 3px 0 0 var(--cyan)}
/* measurement evidence — a real measured profile beside its readout, one row
   per operating mode (single-/multi-mode). The figure frames the beam-profile
   image (or a labelled placeholder until the hi-res grab lands); the readout is
   a compact key/value list of the measured values with their conditions. */
.evidence{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ev-row{display:flex;flex-direction:column;gap:14px;
  background:#fff;border:1px solid var(--pale);border-radius:var(--r);
  box-shadow:var(--shadow);padding:18px;border-top:3px solid var(--cyan)}
.ev-fig{margin:0;text-align:center}
.ev-fig .ev-img{width:100%;max-width:220px;margin:0 auto;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  background:#0D1B2E;display:flex;align-items:center;justify-content:center}
.ev-fig .ev-img img{width:100%;height:100%;object-fit:cover;display:block}
/* labelled placeholder (before the hi-res beam grab is delivered) */
.ev-fig .ev-img.ph{background:repeating-linear-gradient(135deg,#12233b,#12233b 9px,#16294660 9px,#16294660 18px);
  color:var(--mist);font-size:12px;font-weight:600;text-align:center;padding:14px;line-height:1.5}
.ev-fig figcaption{font-size:12px;font-weight:700;color:var(--cyanmid);margin-top:9px;text-transform:uppercase;letter-spacing:.05em}
.ev-mode{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ev-read{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 22px;margin-top:8px}
.ev-read .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--cyanmid)}
.ev-read .v{font-size:18px;font-weight:800;color:var(--deep);line-height:1.15}
.ev-cond{font-size:12.5px;color:var(--navy);margin-top:14px}
.ev-cond b{color:var(--deep)}
.calc{background:var(--grad);border-radius:var(--r);padding:26px 30px;color:#fff;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.calc .t{font-weight:800;font-size:20px}.calc .d{font-size:14px;color:var(--mist);margin-top:4px;max-width:52ch}
.dl{display:flex;gap:14px;flex-wrap:wrap}
.dlbtn{display:flex;align-items:center;gap:12px;border:1px solid var(--pale);border-radius:10px;
  padding:14px 18px;text-decoration:none;color:var(--deep);font-weight:700;font-size:14px;background:#fff}
.dlbtn:hover{box-shadow:var(--shadow)}
.dlbtn .ic{width:26px;height:30px;border-radius:5px;background:var(--pale);flex:none}
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--pale);padding:18px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:16px;color:var(--deep);list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyanmid);font-weight:800;font-size:20px}
.faq details[open] summary::after{content:"\2013"}
.faq p{font-size:14.5px;color:var(--navy);margin-top:10px;max-width:74ch}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* related use-case cards: image thumb + text body (matches home .uc-photo) */
.grid2 .card{padding:0;gap:0;overflow:hidden}
.grid2 .card .thumb{height:180px;background:var(--grad);overflow:hidden}
.grid2 .card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.grid2 .card:hover .thumb img{transform:scale(1.045)}
.grid2 .card .body{padding:22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}

/* ---- Signature stripe (Midel marker: key statements only) ---- */
.stripe{border-left:4px solid var(--cyan)!important}
.linkcard{position:relative;overflow:hidden;text-decoration:none}
.linkcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cyan);
  transform:scaleY(0);transition:.18s;transform-origin:top}
.linkcard:hover::before{transform:scaleY(1)}

/* ---- Photo cards (applications) ---- */
.imgcard{position:relative;border-radius:var(--r);overflow:hidden;min-height:340px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:#fff;
  background:var(--deep);transition:.18s;text-decoration:none}
.imgcard *{text-decoration:none}
.imgcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.imgcard .bg{position:absolute;inset:0;z-index:0;background:var(--grad);opacity:.55}
.imgcard .bg.ph{display:flex;align-items:flex-start;justify-content:flex-end;padding:10px;
  color:rgba(255,255,255,.5);font-size:11px;font-weight:600}
.imgcard::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(13,27,46,0) 0%,rgba(13,27,46,.5) 40%,rgba(13,27,46,.93) 65%,rgba(13,27,46,1) 100%)}
.imgcard>*{position:relative;z-index:1}
.imgcard .k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.imgcard h3{color:#fff;margin:6px 0 8px;font-size:20px}
.imgcard p{font-size:14px;color:var(--mist);max-width:40ch}
.imgcard .go{color:#fff;background:var(--yellow);color:var(--deep);font-weight:800;font-size:13px;
  padding:9px 16px;border-radius:8px;margin-top:14px;align-self:flex-start;text-decoration:none}
/* image-backed tiles: the application photo (inline background-image) fills
   the card; the ::after gradient guarantees text legibility. */
.imgcard .bg.bg-img{background-size:cover;background-position:center;opacity:1}
/* non-link (soon) tiles: no hover lift, muted CTA */
span.imgcard{cursor:default}
span.imgcard:hover{transform:none;box-shadow:none}
span.imgcard .go{background:rgba(255,255,255,.16);color:#fff}
.soon-tag{display:inline-block;vertical-align:middle;margin-left:8px;font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--deep);background:var(--cyan);
  padding:2px 7px;border-radius:999px}

/* section-level CTA row */
.sec-cta{display:flex;justify-content:center;margin-top:28px}

/* ---- Applications carousel (home) ---- */
/* Shows all applications; up to 3 tiles visible (2 tablet / 1 mobile),
   the rest paginate via auto-advance + prev/next + dots. */
.appcar{position:relative}
.appcar-viewport{overflow:hidden}
.appcar-track{display:flex;transition:transform .5s cubic-bezier(.4,.0,.2,1);will-change:transform}
.appcar-cell{flex:0 0 33.3333%;box-sizing:border-box;padding:0 10px}
.appcar-cell .imgcard{width:100%}
.appcar-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.appcar-btn{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--pale);
  background:#fff;color:var(--cobalt);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;padding:0}
.appcar-btn:hover{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.appcar-dots{display:flex;align-items:center;gap:9px}
.appcar-dot{width:9px;height:9px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:var(--mist);transition:.18s}
.appcar-dot:hover{background:var(--sky)}
.appcar-dot.active{background:var(--cobalt);transform:scale(1.25)}
/* everything fits on one page → hide the controls */
.appcar--static .appcar-ctrl{display:none}
@media (max-width:1080px){.appcar-cell{flex-basis:50%}}
@media (max-width:640px){.appcar-cell{flex-basis:100%}}

/* ---- Mini hero (subpages) ---- */
.minihero{position:relative;background:var(--deep);color:#fff;padding:clamp(64px,10vw,110px) 0}
.minihero .bg{position:absolute;inset:0;background:var(--grad);opacity:.4}
.minihero .bg.ph{display:flex;align-items:flex-start;justify-content:flex-end;padding:12px;
  color:rgba(255,255,255,.4);font-size:12px;font-weight:600}
/* image-backed mini hero: the same application photo (inline background-image) as bg */
.minihero .bg.bg-photo{background-size:cover;background-position:center;opacity:1}
.minihero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(13,27,46,.95) 25%,rgba(13,27,46,.55) 70%,rgba(13,27,46,.35))}
.minihero .wrap{position:relative;z-index:1}
.minihero .eyebrow{color:var(--cyan)}
.minihero h1{font-size:clamp(30px,4.2vw,46px);margin:14px 0 12px}
.minihero .lead{color:var(--mist)}

/* ---- Quality flowchart ---- */
.flow{display:flex;gap:0;flex-wrap:wrap;align-items:stretch;margin-top:18px}
.fstep{flex:1;min-width:150px;background:#fff;border:1px solid var(--pale);border-radius:12px;
  padding:16px;position:relative;margin-right:26px}
.fstep:last-child{margin-right:0}
.fstep::after{content:"→";position:absolute;right:-22px;top:50%;transform:translateY(-50%);
  color:var(--cyanmid);font-weight:800;font-size:15px}
.fstep:last-child::after{display:none}
.fstep .n{font-size:11px;font-weight:800;color:var(--cyanmid)}
.fstep .t{font-weight:800;font-size:14px;margin-top:4px;color:var(--deep)}
.fstep .d{font-size:12px;color:var(--navy);margin-top:5px}
.trustrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.trustchip{display:flex;align-items:center;gap:8px;background:var(--cloud);border:1px solid var(--pale);
  border-radius:20px;padding:8px 15px;font-size:13px;font-weight:700;color:var(--navy)}
.trustchip::before{content:"✓";color:var(--cyanmid);font-weight:800}

/* ---- Quotes / voices ---- */
.quote{background:#fff;border:1px solid var(--pale);border-radius:var(--r);padding:22px 24px}
.quote.stripe{border-left:4px solid var(--cyan)}
.quote p{font-size:15px;color:var(--deep);font-weight:600;line-height:1.55}
.quote .who{display:flex;align-items:center;gap:11px;margin-top:14px}
.quote .face{width:40px;height:40px;border-radius:50%;background:var(--pale);flex:none}
.quote .nm{font-weight:800;font-size:13.5px;color:var(--deep)}
.quote .rl{display:block;font-size:12px;color:var(--muted)}
.bigquote{background:#fff;border:1px solid var(--pale);border-left:4px solid var(--cyan);
  border-radius:var(--r);padding:28px 32px;box-shadow:var(--shadow);max-width:820px}
.bigquote p{font-size:clamp(17px,2vw,21px);font-weight:700;color:var(--deep);line-height:1.5}
.bigquote .who{display:flex;align-items:center;gap:12px;margin-top:16px}
.bigquote .nm{font-weight:800;font-size:14px;display:block}
.bigquote .rl{font-size:12.5px;color:var(--muted)}

/* owner sign-off flag — placeholder content awaiting confirmation (see quotes.md) */
.ownerflag{margin-top:14px;font-size:12px;color:var(--flag)}

/* ---- Facts strip (product trust facts) ---- */
.facts{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.fact{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:8px 16px;
  font-size:13px;font-weight:700;color:#fff}
.fact::before{content:"✓";color:var(--cyan);font-weight:800}

/* ---- Story highlight card ---- */
.storycard{background:#fff;color:var(--deep);border-radius:var(--r);padding:26px 28px;
  display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
  border-left:4px solid var(--cyan);box-shadow:var(--shadow)}
.storycard .k{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--cyanmid)}
.storycard b{display:block;font-size:19px;margin-top:4px}
.storycard span{font-size:14px;color:var(--navy)}

/* ---- Breadcrumb (shared: product, application, use-case) ---- */
.crumb{font-size:13px;color:var(--mist);margin-bottom:14px}
.crumb a{color:var(--mist);text-decoration:none}
.crumb .sep{opacity:.5;margin:0 7px}
.uc-metachips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.uc-metachips .chip{background:rgba(255,255,255,.14);color:#fff}
.uc-cols{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:start}
.uc-text .uc-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--cyanmid);margin:24px 0 9px}
.uc-text .uc-h:first-child{margin-top:0}
.uc-bul{list-style:none;display:grid;gap:9px}
.uc-bul li{position:relative;padding-left:18px;font-size:15px;color:var(--navy)}
.uc-bul li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--cyanmid)}
.uc-take{margin-top:24px;background:#fff;border:1px solid var(--pale);border-left:4px solid var(--cyan);
  border-radius:var(--r);padding:18px 20px;font-weight:700;color:var(--deep);font-size:15.5px}
.uc-graphic{background:var(--deep);border-radius:var(--r);min-height:440px;display:flex;align-items:center;
  justify-content:center;color:var(--sky);font-size:13px;font-weight:600;position:relative;overflow:hidden;text-align:center;padding:20px}
.uc-graphic .cap{position:absolute;top:14px;left:16px;right:16px;font-size:12px;font-weight:700;color:#fff}
.uc-evidence{margin-top:22px;font-size:13px;color:var(--muted);border-top:1px solid var(--pale);padding-top:16px}
.uc-evidence .flag{color:var(--flag);font-weight:600}
/* small partner lockup, reused on every use case where the partner may be named */
.uc-partner{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.uc-partner .lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.uc-partner img{height:30px;width:auto;display:block}
.uc-graphic img{max-width:100%;max-height:400px;border-radius:10px;display:block}

/* ---- Contact form ---- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em}
.field label .req{color:var(--cyanmid)}
.field input,.field select,.field textarea{font-family:inherit;font-size:15px;padding:12px 14px;
  border:1px solid var(--mist);border-radius:9px;background:#fff;color:var(--deep);outline:none;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(42,88,152,.12)}
.field textarea{min-height:110px;resize:vertical}
.formnote{font-size:12.5px;color:var(--muted);margin-top:4px}
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:start}
.contact-side .ci{display:flex;align-items:center;gap:11px;margin:12px 0;font-size:14.5px;color:var(--navy)}
.contact-side .ci .ic{width:18px;height:18px;border-radius:5px;background:var(--pale);flex:none}
.contact-side h3{font-size:15px;margin:22px 0 8px}

/* ---- Partner cards ---- */
.partnergrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.partner{background:#fff;border:1px solid var(--pale);border-radius:var(--r);padding:20px;transition:.18s}
.partner:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.partner .region{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--cyanmid)}
.partner h4{font-size:16px;margin:6px 0 2px;color:var(--deep)}
.partner .person{font-size:13.5px;color:var(--navy)}
.partner a{color:var(--cyanmid);font-size:13px;font-weight:700;text-decoration:none;display:inline-block;margin-top:12px}

@media(max-width:820px){
  .hero .wrap,.tech-grid,.uc-cols,.contact-grid{grid-template-columns:1fr}
  .hero .visual{display:none}
  .grid3,.grid2,.fitgrid,.form{grid-template-columns:1fr}
  .portfolio-grid,.pf-grid,.ps-grid{grid-template-columns:1fr}
  .evidence{grid-template-columns:1fr}
  /* on narrow cards the exclusivity tag can wrap under the title */
  .pf-feat .pf-bar{flex-wrap:wrap;gap:4px 12px}
  .uc-row,.uc-row.rev{grid-template-columns:1fr}
  .uc-row.rev .uc-photo,.uc-row.rev .uc-text{order:initial}
  .uc-photo{height:220px}
  .partnergrid{grid-template-columns:1fr 1fr}
  footer.site .ftop{grid-template-columns:1fr 1fr}
  .fstep{min-width:100%;margin-right:0;margin-bottom:26px}
  .fstep::after{content:"↓";right:auto;left:50%;top:auto;bottom:-24px;transform:translateX(-50%)}
}

/* nav switches to drawer earlier than content grids: the horizontal bar
   (logo + 5 items + lang + CTA) needs ~1135px, so hand off to the hamburger
   before it overflows on tablets/small laptops */
@media(max-width:1080px){
  /* ---- mobile navigation: drawer instead of hidden ---- */
  /* backdrop-filter would trap the fixed drawer in the header's containing block */
  header.site{backdrop-filter:none;background:#fff}
  .navtoggle{display:block}
  .nav .right{display:none}            /* search/lang/CTA move into the drawer */
  .nav{gap:0}
  .nav .links{
    position:fixed;left:0;right:0;top:var(--headtop,109px);bottom:0;margin:0;
    display:block;overflow-y:auto;background:#fff;border-top:1px solid var(--pale);
    padding:8px 0 40px;transform:translateX(-100%);transition:transform .22s ease;
    z-index:40;-webkit-overflow-scrolling:touch}
  body.nav-open .nav .links{transform:none}
  body.nav-open{overflow:hidden}
  .nav .links>li{border-bottom:1px solid var(--pale)}
  .nav .links>li>a{height:auto;padding:16px 24px;font-size:16px;justify-content:space-between}
  .nav .links>li>a .car{font-size:12px;transition:transform .2s}
  .nav .links>li.open>a .car{transform:rotate(180deg)}
  /* mega panels become inline accordions */
  .nav .links>li .mega{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-radius:0;width:auto;max-width:none;
    max-height:0;overflow:hidden;transition:max-height .24s ease;background:var(--cloud)}
  .nav .links>li.open .mega{max-height:1200px}
  .nav .links>li .mega .inner,.nav .links>li .mega .inner.cols-2{
    display:block;grid-template-columns:none;padding:6px 24px 18px}
  .nav .links>li .mega .inner.cols-2 .megacol{display:block;grid-template-columns:none}
  .nav .links>li .mega .app-menu-items{display:block;grid-template-columns:none}
  .nav .links>li .mega .megacol{margin-top:12px}
  .nav .links>li .mega .promo{margin-top:14px}
  .mobile-actions{display:flex;flex-direction:column;gap:12px;padding:22px 24px}
  .mobile-actions .btn{justify-content:center}
  .mobile-actions .lang{font-size:15px}
}
@media(max-width:560px){footer.site .ftop,.partnergrid,.assets{grid-template-columns:1fr}
  /* stacked: divider moves from left edge to top */
  .asset+.asset{padding-left:0;border-left:none;padding-top:16px;border-top:1px solid var(--pale)}}

/* world map: on narrow screens the pin labels collide — drop them and show
   the legend list instead, so every region is still named. */
@media(max-width:640px){
  .gm-label{display:none}
  .gm-legend{display:flex}
}

/* ============ HERO mit Spiegelfoto + Strahlform-Streifen ============ */
/* base = echtes Hero-Blau (--grad) */
.hero--photo{background:var(--grad)}

/* Foto-Geometrie (aus images/hero/logo-mirror.webp vermessen):
   Quelle 4869x3246. Der Spiegel-Disc sitzt bei x=50.3% (praktisch bildmittig),
   Disc-Breite = 21.75% der Bildbreite. Zoom z=1.38, Pan-Shift s=330px.

   Sei W = Hero-Breite, B = gerenderte Bildbreite = min(z·W, C).
   Aus background-position:calc(50% + s) folgen die Bildkanten im Container:
     linke  Kante  x_L = (W − B)/2 + s
     rechte Kante  x_R = (W + B)/2 + s
   Disc-Mitte = x_L + B/2 = W/2 + s  → skaleninvariant (immer Viewport-Mitte + 330px).

   Damit KEINE Bildkante sichtbar wird, muss der Fade (::after) an der jeweiligen
   Naht Foto↔Blau decken:
     LINKS   x_L ≤ λ_L·W          → volles Alpha nötig bis λ_L
             worst case (Cap greift, W=W_max):  λ_L ≥ 1/2 − (C/2 − s)/W_max
     RECHTS  x_R ≥ W (Foto reicht bis zur Kante) → C ≥ W_max − 2·s
   Auslegung für W_max = 2560px:
     C ≥ 2560 − 660 = 1900  → Cap 1900px (Disc 0.2175·1900 ≈ 413px)
     λ_L ≥ 1/2 − (950 − 330)/2560 ≈ 0.258  → linkes Deckplateau bis 28% */
.hero--photo::before{ /* das Foto — gezoomt, Disc rechts neben dem Text fixiert */
  content:"";position:absolute;inset:0;z-index:0;
  background:url("../images/hero/logo-mirror.webp") no-repeat;
  background-size:min(138%,1900px) auto; /* Cap 1900px: schließt rechts bis W_max=2560 (C≥W_max−2s) */
  background-position:calc(50% + 330px) 46%; /* Disc-Mitte skaleninvariant rechts vom Text */
}
.hero--photo::after{ /* Lesbarkeits-Fade: opakes Hero-Blau links → transparent über den Spiegel,
     rechts wieder leicht anziehend, damit nie ein transparenter Gap am Bildrand entsteht.
     Deckplateau bis 28% garantiert: λ_L ≥ 0.258 bei W_max=2560 → linke Kante nie sichtbar. */
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(100deg,
      var(--cobalt)        2%,
      var(--cobalt)       49%,   /* Deckplateau: 28% → 49% (2026-08-31, Kontrast).
                                    28% reichte für die linke Naht, aber der Lead lief
                                    bis 55% und fiel dort auf 3.02:1 gegen #C2D9EF —
                                    AA verlangt 4.5:1, und AA-large gilt bei 19px
                                    regular nicht. 46% ist die Obergrenze, die den
                                    Spiegel nicht antastet: dessen linker Rand liegt
                                    bei min. 53.6%. Der Lead endet per max-width:50ch
                                    jetzt bei ~48%, also innerhalb des Plateaus. */
      rgba(42,88,152,.55) 54%,
      rgba(42,88,152,.22) 62%,
      rgba(42,88,152,0)   78%,
      rgba(42,88,152,0)   88%,
      rgba(42,88,152,.28) 100%);
}
/* --- Ultrawide (W > C+2s = 2560px): beide Nähte treten INS Bild → je ein Verlauf --- */
/* Ab hier gilt x_R = W/2 + (C/2+s) < W, d.h. das Foto schließt rechts nicht mehr;
   physisch schließen bräuchte Cap ≥ W−2s = 2780 (Disc 605px, zu groß) → per Fade decken.
   Gecapptes Regime (B=C=1900): Nahtanteile
     x_L/W = 1/2 − (C/2−s)/W  (steigt mit W → worst case W_max)
     x_R/W = 1/2 + (C/2+s)/W  (fällt  mit W → worst case W_max)
   Für W_max = 3440:  λ_L ≥ 1/2 − 620/3440 = 0.320   → linkes Plateau bis 33%
                      λ_R ≤ 1/2 + 1280/3440 = 0.872   → rechts deckend ab 86%
   Disc-Fenster [48%,72%] (Disc-Ränder: links min 53.6%, rechts max 71.0%) bleibt frei. */
@media (min-width:2561px){
  .hero--photo::after{
    background:
      /* linker Verlauf: deckt linke Naht (λ_L ≤ 0.320), fadet vor Disc auf 0 */
      linear-gradient(100deg,
        var(--cobalt)        0%,
        var(--cobalt)       33%,
        rgba(42,88,152,.45) 42%,
        rgba(42,88,152,0)   48%),
      /* rechter Verlauf: transparent bis Disc-Ende, Rampe → deckt rechte Naht (λ_R ≥ 0.872).
         Zielfarbe = helleres --sky (127,173,216), matcht das Ende des Hero-Basis-Grads */
      linear-gradient(100deg,
        rgba(127,173,216,0)   72%,
        rgba(127,173,216,.55) 80%,
        var(--sky)            86%,
        var(--sky)           100%);
  }
}
/* einspaltiges Layout (überschreibt das 2-Spalten-Grid von .hero .wrap) */
.hero--photo .wrap{display:block;max-width:var(--maxw);
  padding-top:clamp(48px,7vw,90px);padding-bottom:clamp(48px,7vw,90px)}
.hero--photo .col{max-width:620px}
/* Eyebrow im Hero größer + luftiger, damit er nicht untergeht */
.hero--photo .eyebrow{font-size:15px;letter-spacing:.18em;display:inline-block;margin-bottom:14px}
.hero--photo h1{max-width:15ch}
.hero--photo .lead{max-width:52ch}

/* --- Strahlform-Streifen (grün, minimal) --- */
.beamstrip{margin:26px 0 4px}
.bs-row{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.bs-shape{width:52px;height:52px;border-radius:10px;flex:none;
  object-fit:contain;display:block;
  filter:drop-shadow(0 0 10px rgba(77,255,158,.35))}
/* milchig-transparente Glasbox hinter den Formen */
.bs-milk{display:inline-flex;align-items:center;padding:12px 18px;border-radius:16px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 20px rgba(13,27,46,.14) inset, 0 2px 14px rgba(13,27,46,.10)}

@media (max-width:820px){
  .hero--photo::before{background-size:cover;background-position:70% 40%}
  .hero--photo::after{background:linear-gradient(180deg,
    rgba(42,88,152,.92) 40%, rgba(42,88,152,.55) 100%)}
  /* Formen kleiner skalieren, damit alle 6 in eine Zeile passen (kein Umbruch) */
  .bs-milk{padding:10px 12px}
  .bs-row{gap:8px}
  .bs-shape{width:40px;height:40px}
}
@media (max-width:400px){
  .bs-row{gap:6px}
  .bs-shape{width:34px;height:34px}
}

/* Collapsible process-landscape cards (native <details>) */
details.proc{cursor:pointer}
details.proc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
details.proc summary::-webkit-details-marker{display:none}
details.proc summary h3{margin:0}
details.proc .proc-tog{flex:0 0 auto;width:22px;height:22px;position:relative;color:var(--cyanmid,#1aa)}
details.proc .proc-tog::before,
details.proc .proc-tog::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:transform .18s ease,opacity .18s ease}
details.proc .proc-tog::before{left:4px;right:4px;top:10px;height:2px}
details.proc .proc-tog::after{top:4px;bottom:4px;left:10px;width:2px}
details.proc[open] .proc-tog::after{transform:scaleY(0);opacity:0}
details.proc p{margin:12px 0 0}