/* v0.20 — electronic wallpaper and project balloons */
:root{--bg:#a9d2df;--bg2:#afd2dc;--card:#fffefa;--text:#162b38;--muted:#506876;--line:rgba(27,75,100,.18);--yellow:#ffe087;--green:#187968;--cyan:#226c97;--purple:#73559c;--pink:#a45476;--orange:#a65b23;--max:1180px}
body{background:radial-gradient(ellipse 70% 28% at 23% 19%,#f4d4b7 0%,transparent 100%),radial-gradient(ellipse 72% 28% at 70% 55%,#e5c4df 0%,transparent 100%),radial-gradient(ellipse 70% 28% at 15% 89%,#a7bee8 0%,transparent 100%),linear-gradient(145deg,#96d6d3,#b3d5df 52%,#9dbfe1);color:var(--text);font-family:"IBM Plex Sans",Inter,system-ui,sans-serif;line-height:1.5}
body::before{content:"";position:fixed;inset:0;z-index:0;background:url(electronics-pattern.svg) repeat;background-size:480px 400px;opacity:.62;pointer-events:none}
main,.footer{position:relative;z-index:1}
.noise{display:none}.shell{width:min(var(--max),calc(100% - 42px))}
.topbar{top:12px;width:min(1222px,calc(100% - 24px));height:60px;margin:12px auto 0;padding:0 23px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(255,254,250,.9);box-shadow:0 10px 30px rgba(23,61,80,.08);backdrop-filter:blur(20px)}
.nav a{color:#3c5c6e;font-size:12px;font-weight:750;letter-spacing:.075em}.nav a:hover,.nav a:focus-visible{color:#166f93}.lang button{color:#6a8594}.lang button.active{color:#126b92}.lang{color:#94a9b2}
.hero{padding:105px 0 68px;grid-template-columns:minmax(0,1fr) 275px;column-gap:52px}.hero h1{font-size:clamp(54px,7.6vw,100px);line-height:.94;letter-spacing:-.065em;margin:27px 0 34px;color:#142a3a}.hero h1 em{color:#237ba3}.eyebrow{color:#31576b;font-weight:750}.live-dot{background:#1da585;box-shadow:0 0 0 5px rgba(29,165,133,.12)}
.hero > .hero-portrait{transform:rotate(3deg);padding:9px 9px 27px;width:270px;background:#fffefa;box-shadow:0 20px 45px rgba(34,78,104,.18);border-radius:7px}.hero > .hero-portrait img{width:100%;height:316px;border-radius:3px;border:0}.hero-copy{color:#27465a;font-size:clamp(18px,2vw,25px);line-height:1.35}.hero-bottom{gap:32px}.hero-cta{align-content:end}.button{border:1px solid rgba(23,68,91,.28);background:rgba(255,255,255,.52);font-size:12px}.button.primary{background:#173e56;color:white;border-color:#173e56}.button.ghost:hover{border-color:#173e56;background:#fffefa}
.stats{margin-bottom:115px;border:1px solid rgba(255,255,255,.68);border-radius:26px;background:rgba(255,254,250,.83);box-shadow:0 12px 36px rgba(28,73,99,.07);overflow:hidden}.stats article{border-color:var(--line)}.stats strong{font-size:clamp(25px,3.3vw,48px);letter-spacing:-.05em}.stats span{font-size:12px}
.section{padding-bottom:128px}.section-head{align-items:end;margin-bottom:38px}.section-head h2{font-size:clamp(36px,4.7vw,60px);letter-spacing:-.055em;line-height:1.06}.kicker{color:#175d82;letter-spacing:.12em}.split-head p{color:#31546a}
#work .project-grid{display:flex;flex-direction:column;gap:38px}
#work .project{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(310px,auto) auto;gap:12px 18px;min-height:370px;overflow:visible;height:auto;background:none;border:0;box-shadow:none;border-radius:0}
#work .project .visual{grid-column:2;grid-row:1 / span 2;height:100%;min-height:370px;border-radius:30px;box-shadow:0 18px 34px rgba(28,70,90,.16);background:#d6e5e8}
#work .project .visual img{height:100%}
#work .project .project-body{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;align-self:stretch;padding:30px clamp(25px,3vw,40px);background:var(--card);border-radius:30px 30px 30px 6px;box-shadow:0 14px 34px rgba(30,73,98,.1);min-width:0}
#work .project h3{font-size:clamp(29px,3.3vw,43px);line-height:1.03;margin:22px 0 15px;letter-spacing:-.045em;word-spacing:normal}
#work .project p{color:#344d5c;font-size:15px;line-height:1.55}
#work .project .meta{font-size:10px;color:#627783;letter-spacing:.07em}
.status{border-color:#d9e4e7}.status.shipped{color:#127c65}.status.deployed{color:#176e9b}.status.pilot,.status.production{color:#986116}.status.prototype{color:#70559b}
#work .tag-balloon{grid-column:1;grid-row:2;justify-self:start;max-width:100%;padding:11px 15px;background:#fffefa;border-radius:6px 22px 22px 22px;box-shadow:0 9px 22px rgba(30,73,98,.09)}
.tag-balloon .facts{margin:0;gap:6px}.tag-balloon .facts span{background:#edf5f6;color:#31566a;border:0;padding:6px 10px;font-size:10px;letter-spacing:.035em}
#work .project .big-number{font-size:clamp(55px,7vw,96px);color:#fff;text-shadow:0 2px 25px rgba(0,0,0,.35)}
#work .project .spec-overlay{color:#fff}
#work .project .project-link{margin-top:14px;color:#126f9b}
.capsula-moment{background:#fffefa;border:0;border-radius:28px;box-shadow:0 14px 36px rgba(30,73,98,.1)}.capsula-moment-copy p{color:#38566a}.capsula-moment .kicker{color:#246b8e}
#lab .mini-grid{gap:24px}
#lab .mini-project{display:flex;flex-direction:column;min-height:0;overflow:visible;background:none;border:0;border-radius:0;gap:10px}
#lab .mini-project>img,#lab .mini-project>a:first-child,#lab .mini-project>.spotter-hover,#lab .mini-project>.spotter-gallery,#lab .mini-project>.text-card-visual{width:100%;height:280px;min-height:280px;flex:none;overflow:hidden;border-radius:25px;background:#d8e8e8;box-shadow:0 12px 25px rgba(30,73,98,.13)}
#lab .mini-project>img{object-fit:cover}#lab .mini-project>a:first-child img,#lab .mini-project>.spotter-hover img{width:100%;height:100%;min-height:0;object-fit:cover}
#lab .mini-project>div:not(.tag-balloon):not(.text-card-visual):not(.spotter-hover):not(.spotter-gallery){flex:1;padding:26px;background:#fffefa;border-radius:25px 25px 25px 5px;box-shadow:0 12px 26px rgba(30,73,98,.09)}
#lab .mini-project h3{font-size:clamp(26px,2.6vw,35px);letter-spacing:-.04em;margin:16px 0 12px}#lab .mini-project p{color:#3c596b;line-height:1.55;font-size:14px}#lab .mini-project .tag-balloon{align-self:flex-start;background:#fffefa;padding:10px 13px;border-radius:5px 20px 20px 20px;box-shadow:0 7px 20px rgba(30,73,98,.08)}
#lab .spotter-project{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:10px 18px}#lab .spotter-project>.spotter-hover{grid-column:2;grid-row:1 / span 2;height:100%;min-height:355px}#lab .spotter-project>div:not(.tag-balloon):not(.spotter-hover){grid-column:1;grid-row:1}#lab .spotter-project>.tag-balloon{grid-column:1;grid-row:2}
.production-collage figure,.community-visual,.talks-strip{border:0;border-radius:25px;box-shadow:0 14px 35px rgba(30,73,98,.12)}.production-copy{color:#214257}.production-collage figcaption{background:rgba(16,40,55,.83)}
.univelis-grid{gap:18px;background:transparent;border:0;overflow:visible}.univelis-card{background:#fffefa;border-radius:24px;box-shadow:0 12px 30px rgba(30,73,98,.09);padding:27px}.univelis-card p{color:#3a5666}.univelis-card .facts span{background:#edf5f6;color:#31566a;border:0}.univelis-card .project-link{color:#126f9b}
.talks-strip figcaption{background:#fffefa;color:#385469}.community-copy{background:#fffefa;border:0;box-shadow:0 14px 34px rgba(30,73,98,.1)}.community-copy p{color:#385469}.community-number{color:#1e7d9f}
.closing{border-color:rgba(20,68,94,.24)}.closing-small{color:#35566a}.closing h2{font-size:clamp(47px,7vw,80px);letter-spacing:-.06em}.closing-links a{background:#fffefa;border:0;box-shadow:0 8px 22px rgba(30,73,98,.1)}.closing-links a:hover{background:#17435d;color:white}.footer{border-color:rgba(20,68,94,.24);color:#4c6a7a}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr) 215px;column-gap:30px}.hero > .hero-portrait{width:210px}.hero > .hero-portrait img{height:255px}#lab .spotter-project{display:flex}}
@media(max-width:680px){.topbar{top:8px;height:52px;margin-top:8px;padding:0 18px}.shell{width:calc(100% - 28px)}.hero{padding:72px 0 45px;grid-template-columns:1fr}.hero h1{font-size:clamp(46px,13vw,75px);margin-bottom:24px}.hero > .hero-portrait{width:145px;margin:0 0 30px}.hero > .hero-portrait img{height:170px}.hero-bottom{gap:22px}.hero-copy{font-size:18px}.stats{margin-bottom:80px}.section{padding-bottom:90px}.section-head{margin-bottom:25px}#work .project-grid{gap:30px}#work .project{display:flex;flex-direction:column;gap:9px;min-height:0}#work .project .visual{order:0;height:235px;min-height:235px;width:100%;border-radius:24px}#work .project .project-body{order:1;border-radius:24px 24px 24px 5px;padding:24px}#work .project h3{font-size:clamp(28px,8vw,38px)}#work .tag-balloon{order:2}#lab .mini-grid{gap:28px}#lab .spotter-project{display:flex}#lab .mini-project>img,#lab .mini-project>a:first-child,#lab .mini-project>.spotter-hover,#lab .mini-project>.spotter-gallery,#lab .mini-project>.text-card-visual,#lab .spotter-project>.spotter-hover{height:235px;min-height:235px}.capsula-moment{border-radius:24px}.production-copy{font-size:28px}.community-copy h2{font-size:48px}}

/* v0.21 — the copy determines card height; imagery fills the remaining area */
.topbar{width:min(var(--max),calc(100% - 42px))}
.workplaces{white-space:nowrap}

#work .project{
  grid-template-columns:minmax(0,58%) minmax(0,42%);
  grid-template-rows:auto auto;
  min-height:0;
  gap:8px 0;
}
#work .project .visual{
  position:absolute;
  inset:0 0 0 49%;
  width:auto;
  height:auto;
  min-height:0;
  grid-column:auto;
  grid-row:auto;
}
#work .project .visual > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#work .project .visual.contain > img{object-fit:contain}
#work .project .visual.split-two > img:first-child{left:0;width:50%}
#work .project .visual.split-two > img:nth-child(2){left:50%;width:50%}
#work .project .project-body{grid-column:1;grid-row:1;z-index:2;align-self:start;justify-content:center}
#work .project .tag-balloon{grid-column:1;grid-row:2;z-index:2;align-self:start;justify-self:start;width:max-content;max-width:100%;height:max-content;padding:9px 16px}
#work .project.capsula-mini .project-body,
#work .project.rtk-project .project-body,
#work .project.amper-project .project-body{padding:21px 29px}
#work .project.capsula-mini h3,
#work .project.rtk-project h3,
#work .project.amper-project h3{margin:14px 0 10px;font-size:clamp(27px,3vw,37px)}
#work .project.capsula-mini p,
#work .project.rtk-project p,
#work .project.amper-project p{font-size:14px;line-height:1.42}

/* One compact, readable line of highlights, wrapping naturally when needed. */
.tag-balloon .facts{display:block;line-height:1.5}
.tag-balloon .facts span{display:inline;padding:0;background:none;border:0;border-radius:0;color:#31566a;font-size:12px;letter-spacing:0;text-transform:none;white-space:nowrap}
.tag-balloon .facts span + span::before{content:" · ";color:#6c8c99;white-space:pre}
.univelis-card .facts{display:block;line-height:1.6}
.univelis-card .facts span{display:inline;padding:0;background:none;border:0;border-radius:0;color:#31566a;font-size:12px;letter-spacing:0;text-transform:none;white-space:nowrap}
.univelis-card .facts span + span::before{content:" · ";color:#6c8c99;white-space:pre}

/* All prototypes use the Spotter layout and remain in one full-width column. */
#lab .mini-grid{display:flex;flex-direction:column;gap:32px}
#lab .mini-grid > .mini-project{
  display:grid;
  grid-template-columns:minmax(0,58%) minmax(0,42%);
  grid-template-rows:auto auto;
  gap:8px 0;
  position:relative;
  min-height:0;
  width:100%;
}
#lab .mini-grid > .mini-project > img,
#lab .mini-grid > .mini-project > a:first-child,
#lab .mini-grid > .mini-project > .spotter-hover,
#lab .mini-grid > .mini-project > .spotter-gallery,
#lab .mini-grid > .mini-project > .text-card-visual{
  position:absolute;
  inset:0 0 0 49%;
  width:51%;
  height:100%;
  min-height:0;
  max-height:none;
  grid-column:auto;
  grid-row:auto;
  z-index:0;
}
#lab .mini-grid > .mini-project > img{object-fit:cover}
#lab .mini-grid > .mini-project > a:first-child img{height:100%;min-height:0;object-fit:cover}
#lab .mini-grid > .mini-project > div:not(.tag-balloon):not(.text-card-visual):not(.spotter-hover):not(.spotter-gallery){
  grid-column:1;
  grid-row:1;
  position:relative;
  z-index:2;
  align-self:start;
  padding:27px 31px;
}
#lab .mini-grid > .mini-project > .tag-balloon{
  grid-column:1;
  grid-row:2;
  position:relative;
  z-index:2;
  align-self:start;
  justify-self:start;
  width:max-content;
  max-width:100%;
  height:max-content;
  padding:9px 16px;
}

@media(max-width:680px){
  .topbar{width:calc(100% - 28px)}
  #work .project,#lab .mini-grid > .mini-project{display:flex;flex-direction:column;gap:9px}
  #work .project .visual,
  #lab .mini-grid > .mini-project > img,
  #lab .mini-grid > .mini-project > a:first-child,
  #lab .mini-grid > .mini-project > .spotter-hover,
  #lab .mini-grid > .mini-project > .spotter-gallery,
  #lab .mini-grid > .mini-project > .text-card-visual{
    position:relative;inset:auto;order:0;width:100%;height:235px;min-height:235px;flex:none
  }
  #work .project .project-body,
  #lab .mini-grid > .mini-project > div:not(.tag-balloon):not(.text-card-visual):not(.spotter-hover):not(.spotter-gallery){order:1;width:calc(100% - 12px);margin-top:-26px;padding:23px}
  #work .project .tag-balloon,#lab .mini-grid > .mini-project > .tag-balloon{order:2}
}

/* v0.22 — half the image/text overlap. Previous overlap was 9% of the card:
   move the image 2.25% right, pull the copy edge 2.25% left. */
body::before{background-size:640px 500px}
#work .project{grid-template-columns:minmax(0,55.75%) minmax(0,44.25%)}
#work .project .visual{left:51.25%}

/* The anecdote belongs to the talks, directly after the stage photographs. */
#talks .capsula-moment{margin-top:24px}

/* Prototypes: three equally wide columns with media above the copy. */
#lab .mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
#lab .mini-grid > .mini-project{
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  gap:9px;
  grid-column:auto;
}
#lab .mini-grid > .mini-project > img,
#lab .mini-grid > .mini-project > a:first-child,
#lab .mini-grid > .mini-project > .spotter-hover,
#lab .mini-grid > .mini-project > .spotter-gallery,
#lab .mini-grid > .mini-project > .text-card-visual{
  position:relative;
  inset:auto;
  width:100%;
  height:225px;
  min-height:225px;
  max-height:225px;
  flex:none;
  order:0;
  border-radius:23px;
}
#lab .mini-grid > .mini-project > img{object-fit:cover}
#lab .mini-grid > .mini-project > div:not(.tag-balloon):not(.text-card-visual):not(.spotter-hover):not(.spotter-gallery){
  position:relative;
  grid-column:auto;
  grid-row:auto;
  flex:1;
  order:1;
  width:100%;
  margin:0;
  padding:23px 24px;
}
#lab .mini-grid > .mini-project > .tag-balloon{
  position:relative;
  grid-column:auto;
  grid-row:auto;
  order:2;
  width:max-content;
  max-width:100%;
  margin:0;
}
#lab .mini-project h3{font-size:clamp(25px,2.3vw,31px)}
#lab .mini-project p{font-size:14px}
#lab .mini-grid > .mini-project > a:first-child img{width:100%;height:100%;min-height:0;object-fit:cover}

@media(max-width:1000px){
  #lab .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  #work .project .visual{left:auto}
}
@media(max-width:640px){
  #lab .mini-grid{grid-template-columns:1fr;gap:28px}
  #lab .mini-grid > .mini-project > img,
  #lab .mini-grid > .mini-project > a:first-child,
  #lab .mini-grid > .mini-project > .spotter-hover,
  #lab .mini-grid > .mini-project > .spotter-gallery,
  #lab .mini-grid > .mini-project > .text-card-visual{height:235px;min-height:235px;max-height:235px}
}

/* v0.23 — lower the image panels in Selected Work by 4% of their height. */
#work .project .visual{transform:translateY(4%)}

/* v0.24 — image position, breathing room and subject framing. */
#work .project .visual{transform:translateY(8%)}
#work .project{margin-bottom:4%}
.hero > .hero-portrait{transform:translateX(-30px) rotate(3deg)}

/* These product photos already had a 1.2× zoom in the original stylesheet. */
#work .rtk-project .visual > img:first-child,
#work .amper-project .visual > img:first-child{transform:scale(1.56)}
#work .rtk-project:hover .visual > img:first-child,
#work .amper-project:hover .visual > img:first-child{transform:scale(1.60)}

@media(max-width:680px){
  .hero > .hero-portrait{transform:rotate(3deg)}
}

/* v0.25 — Spotter is the full-width lead story of the R&D section. */
#lab .spotter-feature{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,55.75%) minmax(0,44.25%);
  grid-template-rows:auto auto;
  gap:8px 0;
  min-height:0;
  margin:0 0 48px;
  background:none;
  border:0;
  overflow:visible;
}
#lab .spotter-feature > .visual{
  position:absolute;
  inset:0 0 0 51.25%;
  width:auto;
  height:auto;
  min-height:0;
  border-radius:30px;
  overflow:hidden;
  background:#d6e5e8;
  box-shadow:0 18px 34px rgba(28,70,90,.16);
  transform:translateY(8%);
}
#lab .spotter-feature > .visual img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover}
#lab .spotter-feature > .project-body{
  grid-column:1;
  grid-row:1;
  z-index:2;
  align-self:start;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:30px clamp(25px,3vw,40px);
  background:#fffefa;
  border-radius:30px 30px 30px 6px;
  box-shadow:0 14px 34px rgba(30,73,98,.1);
}
#lab .spotter-feature h3{font-size:clamp(29px,3.3vw,43px);line-height:1.03;margin:22px 0 15px;letter-spacing:-.045em}
#lab .spotter-feature p{font-size:15px;line-height:1.55;color:#344d5c;margin:0}
#lab .spotter-feature > .tag-balloon{
  grid-column:1;
  grid-row:2;
  z-index:2;
  justify-self:start;
  align-self:start;
  width:max-content;
  max-width:100%;
  height:max-content;
  padding:9px 16px;
  background:#fffefa;
  border-radius:6px 22px 22px 22px;
  box-shadow:0 9px 22px rgba(30,73,98,.09);
}
#lab .spotter-feature:hover .spotter-main{opacity:0}
#lab .spotter-feature:hover .spotter-alt{opacity:1}

@media(max-width:680px){
  #lab .spotter-feature{display:flex;flex-direction:column;gap:9px;margin-bottom:42px}
  #lab .spotter-feature > .visual{position:relative;inset:auto;order:0;width:100%;height:235px;min-height:235px;border-radius:24px}
  #lab .spotter-feature > .project-body{order:1;width:calc(100% - 12px);margin-top:-26px;padding:23px;border-radius:24px 24px 24px 5px}
  #lab .spotter-feature > .tag-balloon{order:2}
}